Initial commit

396 files changed, 380887 insertions, 0 deletions

diff --git a/.formatter.exs b/.formatter.exs
new file mode 100644
index 0000000..d2cda26
--- /dev/null
+++ b/.formatter.exs
@@ -0,0 +1,4 @@
+# Used by "mix format"
+[
+  inputs: ["{mix,.formatter}.exs", "{config,lib,test}/**/*.{ex,exs}"]
+]
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f426138
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,33 @@
+# The directory Mix will write compiled artifacts to.
+/_build/
+
+# If you run "mix test --cover", coverage assets end up here.
+/cover/
+
+# The directory Mix downloads your dependencies sources to.
+/deps/
+
+# Where third-party dependencies like ExDoc output generated docs.
+/doc/
+
+# Ignore .fetch files in case you like to edit your project deps locally.
+/.fetch
+
+# If the VM crashes, it generates a dump, let's ignore it too.
+erl_crash.dump
+
+# Also ignore archive artifacts (built via "mix archive.build").
+*.ez
+
+# Ignore package tarball (built via "mix hex.build").
+mediasync-*.tar
+
+# Temporary files, for example, from tests.
+/tmp/
+
+##
+
+/.env
+
+/node_modules/
+
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..7f70009
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+/priv/static/video.js/
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..de753c5
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "printWidth": 100
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..d0297ad
--- /dev/null
+++ b/README.md
@@ -0,0 +1,8 @@
+# Mediasync
+
+TODO:
+
+- verify websocket origin header
+- do all the discord integration so it works as an Activity
+- add videojs-youtube
+- present errors nicely on the frontend eg. multiple connections with same user token should show a warning rather than silently failing, a message should be shown when the user is disconnected, etc.
diff --git a/config/runtime.exs b/config/runtime.exs
new file mode 100644
index 0000000..5c600db
--- /dev/null
+++ b/config/runtime.exs
@@ -0,0 +1,13 @@
+import Config
+
+{:ok, sqids} = Sqids.new()
+
+config :mediasync,
+  port: String.to_integer(System.get_env("MEDIASYNC_PORT", "8000")),
+  node_id: Sqids.encode!(sqids, [String.to_integer(System.get_env("MEDIASYNC_NODE_ID", "1"))]),
+  max_rooms: :infinity,
+  max_video_url_size: 2048,
+  websocket_max_frame_octets: 10_000,
+  secret_key_base: System.fetch_env!("MEDIASYNC_SECRET_KEY_BASE"),
+  session_encryption_salt: System.fetch_env!("MEDIASYNC_SESSION_ENCRYPTION_SALT"),
+  session_signing_salt: System.fetch_env!("MEDIASYNC_SESSION_SIGNING_SALT")
diff --git a/lib/mediasync.ex b/lib/mediasync.ex
new file mode 100644
index 0000000..a7bf704
--- /dev/null
+++ b/lib/mediasync.ex
@@ -0,0 +1,18 @@
+defmodule Mediasync do
+  @moduledoc """
+  Documentation for `Mediasync`.
+  """
+
+  @doc """
+  Hello world.
+
+  ## Examples
+
+      iex> Mediasync.hello()
+      :world
+
+  """
+  def hello do
+    :world
+  end
+end
diff --git a/lib/mediasync/application.ex b/lib/mediasync/application.ex
new file mode 100644
index 0000000..1e8f6d4
--- /dev/null
+++ b/lib/mediasync/application.ex
@@ -0,0 +1,35 @@
+defmodule Mediasync.Application do
+  # See https://hexdocs.pm/elixir/Application.html
+  # for more information on OTP Applications
+  @moduledoc false
+
+  use Application
+
+  @impl true
+  def start(_type, _args) do
+    children = [
+      # Starts a worker by calling: Mediasync.Worker.start_link(arg)
+      # {Mediasync.Worker, arg}
+      {Bandit,
+       plug: Mediasync.Router,
+       scheme: :http,
+       ip: {127, 0, 0, 1},
+       port: Application.get_env(:mediasync, :port)},
+      {DynamicSupervisor,
+       max_children: Application.get_env(:mediasync, :max_rooms),
+       max_restarts: 0,
+       strategy: :one_for_one,
+       name: Mediasync.RoomSupervisor},
+      {Registry, keys: :unique, name: Mediasync.RoomRegistry},
+      {Registry, keys: :unique, name: Mediasync.RoomConnectionRegistry},
+      {Registry, keys: :duplicate, name: Mediasync.RoomSubscriptionRegistry}
+    ]
+
+    System.no_halt(true)
+
+    # See https://hexdocs.pm/elixir/Supervisor.html
+    # for other strategies and supported options
+    opts = [strategy: :one_for_one, name: Mediasync.Supervisor]
+    Supervisor.start_link(children, opts)
+  end
+end
diff --git a/lib/mediasync/http_errors.ex b/lib/mediasync/http_errors.ex
new file mode 100644
index 0000000..2b11ea6
--- /dev/null
+++ b/lib/mediasync/http_errors.ex
@@ -0,0 +1,93 @@
+defmodule Mediasync.HTTPErrors do
+  import Plug.Conn
+  import Mediasync.Utils
+
+  @video_url_too_large Jason.encode!(
+                         %{
+                           "error" => "video_url_too_large",
+                           "max_size" => Application.compile_env(:mediasync, :max_video_url_size)
+                         },
+                         pretty: true
+                       )
+
+  @spec send_video_url_too_large(Plug.Conn.t()) :: Plug.Conn.t()
+  @spec send_video_url_too_large(Plug.Conn.t(), []) :: Plug.Conn.t()
+  def send_video_url_too_large(conn, _opts \\ []) do
+    conn
+    |> put_json_content_type()
+    |> send_resp(
+      400,
+      @video_url_too_large
+    )
+  end
+
+  @invalid_video_url Jason.encode!(
+                       %{
+                         "error" => "invalid_video_url"
+                       },
+                       pretty: true
+                     )
+
+  @spec send_invalid_video_url(Plug.Conn.t()) :: Plug.Conn.t()
+  @spec send_invalid_video_url(Plug.Conn.t(), []) :: Plug.Conn.t()
+  def send_invalid_video_url(conn, _opts \\ []) do
+    conn
+    |> put_json_content_type()
+    |> send_resp(
+      400,
+      @invalid_video_url
+    )
+  end
+
+  @not_found Jason.encode!(
+               %{
+                 "error" => "not_found",
+                 "message" => "No page was found at this location."
+               },
+               pretty: true
+             )
+
+  @spec send_not_found(Plug.Conn.t()) :: Plug.Conn.t()
+  @spec send_not_found(Plug.Conn.t(), []) :: Plug.Conn.t()
+  def send_not_found(conn, _opts \\ []) do
+    conn
+    |> put_json_content_type()
+    |> send_resp(
+      404,
+      @not_found
+    )
+  end
+
+  @invalid_csrf_token Jason.encode!(
+                        %{
+                          "error" => "invalid_csrf_token",
+                          "message" => "Try reloading the previous page and retrying."
+                        },
+                        pretty: true
+                      )
+
+  @spec send_invalid_csrf_token(Plug.Conn.t()) :: Plug.Conn.t()
+  @spec send_invalid_csrf_token(Plug.Conn.t(), []) :: Plug.Conn.t()
+  def send_invalid_csrf_token(conn, _opts \\ []) do
+    conn
+    |> put_json_content_type()
+    |> send_resp(400, @invalid_csrf_token)
+  end
+
+  @unknown Jason.encode!(
+             %{
+               "error" => "unknown",
+               "message" =>
+                 "Something went wrong. Consider reloading the previous page and retrying your action."
+             },
+             pretty: true
+           )
+
+  @spec send_unknown(Plug.Conn.t()) :: Plug.Conn.t()
+  @spec send_unknown(Plug.Conn.t(), []) :: Plug.Conn.t()
+  def send_unknown(conn, _opts \\ []) do
+    conn
+    |> put_json_content_type()
+    |> send_resp(500, @unknown)
+  end
+end
diff --git a/lib/mediasync/playback_state.ex b/lib/mediasync/playback_state.ex
new file mode 100644
index 0000000..85afc01
--- /dev/null
+++ b/lib/mediasync/playback_state.ex
@@ -0,0 +1,9 @@
+defmodule Mediasync.PlaybackState do
+  @enforce_keys [:paused?, :position_milliseconds]
+  defstruct @enforce_keys
+
+  @type t() :: %Mediasync.PlaybackState{
+          paused?: boolean(),
+          position_milliseconds: integer()
+        }
+end
diff --git a/lib/mediasync/room.ex b/lib/mediasync/room.ex
new file mode 100644
index 0000000..c425441
--- /dev/null
+++ b/lib/mediasync/room.ex
@@ -0,0 +1,119 @@
+defmodule Mediasync.Room.State do
+  @enforce_keys [:video_url, :host_user_token_hash]
+
+  @host_disconnected_tries_max 5 * 6
+
+  defstruct [
+    :video_url,
+    :host_user_token_hash,
+    :room_id,
+    host_disconnected_tries: @host_disconnected_tries_max
+  ]
+
+  def host_disconnected_tries_max do
+    @host_disconnected_tries_max
+  end
+
+  @type t() :: %Mediasync.Room.State{
+          video_url: binary(),
+          host_user_token_hash: Mediasync.UserToken.hash(),
+          room_id: Mediasync.RoomID.t(),
+          host_disconnected_tries: integer()
+        }
+end
+
+defmodule Mediasync.Room do
+  use GenServer
+
+  @spec start_link(Mediasync.Room.State.t()) :: tuple()
+  def start_link(state = %Mediasync.Room.State{}) do
+    state =
+      case state.room_id do
+        nil -> %{state | room_id: Mediasync.RoomID.generate()}
+        _ -> state
+      end
+
+    Tuple.append(
+      GenServer.start_link(__MODULE__, state,
+        name: {:via, Registry, {Mediasync.RoomRegistry, state.room_id}}
+      ),
+      state.room_id
+    )
+  end
+
+  @spec get_video_url(GenServer.server()) :: binary()
+  def get_video_url(pid) do
+    GenServer.call(pid, :get_video_url)
+  end
+
+  @spec host?(GenServer.server(), Mediasync.UserToken.hash()) :: boolean()
+  def host?(pid, user_token_hash) do
+    GenServer.call(pid, {:host?, user_token_hash})
+  end
+
+  @spec publish_playback_state(GenServer.server(), Mediasync.PlaybackState.t()) :: :ok
+  def publish_playback_state(pid, playback_state = %Mediasync.PlaybackState{}) do
+    GenServer.call(pid, {:publish_playback_state, playback_state})
+  end
+
+  @inactive_check_wait_milliseconds 10 * 1000
+
+  @impl true
+  @spec init(Mediasync.Room.State.t()) :: {:ok, Mediasync.Room.State.t()}
+  def init(room_state = %Mediasync.Room.State{}) do
+    Process.send_after(self(), :check_if_active, @inactive_check_wait_milliseconds)
+
+    {:ok, room_state}
+  end
+
+  @impl true
+  def handle_call(:get_video_url, _from, state = %Mediasync.Room.State{}) do
+    {:reply, state.video_url, state}
+  end
+
+  @impl true
+  def handle_call({:host?, user_token_hash}, _from, state = %Mediasync.Room.State{}) do
+    host_user_token_hash = state.host_user_token_hash
+
+    case user_token_hash do
+      ^host_user_token_hash -> {:reply, true, state}
+      _ -> {:reply, false, state}
+    end
+  end
+
+  @impl true
+  def handle_call(
+        {:publish_playback_state, playback_state = %Mediasync.PlaybackState{}},
+        _from,
+        state = %Mediasync.Room.State{}
+      ) do
+    Registry.dispatch(Mediasync.RoomSubscriptionRegistry, state.room_id, fn entries ->
+      for {pid, _} <- entries, do: send(pid, {:playback_state_update, playback_state})
+    end)
+
+    {:reply, :ok, state}
+  end
+
+  @impl true
+  def handle_info(:check_if_active, state) do
+    state =
+      case Registry.lookup(
+             Mediasync.RoomConnectionRegistry,
+             {state.room_id, state.host_user_token_hash}
+           ) do
+        [{_pid, _value}] ->
+          %{state | host_disconnected_tries: Mediasync.Room.State.host_disconnected_tries_max()}
+
+        _ ->
+          %{state | host_disconnected_tries: state.host_disconnected_tries - 1}
+      end
+
+    Process.send_after(self(), :check_if_active, @inactive_check_wait_milliseconds)
+
+    if state.host_disconnected_tries <= 0 do
+      {:stop, :no_host, state}
+    else
+      {:noreply, state}
+    end
+  end
+end
diff --git a/lib/mediasync/room_connection.ex b/lib/mediasync/room_connection.ex
new file mode 100644
index 0000000..ec44b7b
--- /dev/null
+++ b/lib/mediasync/room_connection.ex
@@ -0,0 +1,106 @@
+defmodule Mediasync.RoomConnection.State do
+  @enforce_keys [:room_pid, :room_id, :user_token_hash]
+  defstruct [
+    :room_pid,
+    :room_id,
+    :user_token_hash,
+    :room_monitor_ref,
+    :host?,
+    initialized?: false
+  ]
+
+  @type t() :: %Mediasync.RoomConnection.State{
+          room_pid: pid(),
+          room_id: Mediasync.RoomID.t(),
+          user_token_hash: Mediasync.UserToken.hash(),
+          room_monitor_ref: reference() | nil,
+          host?: boolean() | nil,
+          initialized?: boolean()
+        }
+end
+
+defmodule Mediasync.RoomConnection do
+  import Mediasync.Utils, only: [bool_to_int_repr: 1, int_repr_to_bool!: 1]
+
+  @behaviour WebSock
+
+  @spec init(Mediasync.RoomConnection.State.t()) :: {:ok, Mediasync.RoomConnection.State.t()}
+  @impl true
+  def init(state = %Mediasync.RoomConnection.State{}) do
+    state = %{state | room_monitor_ref: Process.monitor(state.room_pid)}
+
+    case Registry.register(
+           Mediasync.RoomConnectionRegistry,
+           {state.room_id, state.user_token_hash},
+           nil
+         ) do
+      {:ok, _pid} ->
+        state = %{state | host?: Mediasync.Room.host?(state.room_pid, state.user_token_hash)}
+
+        unless state.host? do
+          Registry.register(Mediasync.RoomSubscriptionRegistry, state.room_id, nil)
+        end
+
+        {:ok, state}
+
+      _ ->
+        {:stop, {:error, :user_already_connected}, state}
+    end
+  end
+
+  @impl true
+  def handle_in(
+        {"i", opcode: :binary},
+        state = %Mediasync.RoomConnection.State{}
+      ) do
+    {:push,
+     [
+       {:binary, <<"i", bool_to_int_repr(state.host?)::8>>}
+     ], %{state | initialized?: true}}
+  end
+
+  @impl true
+  def handle_in(
+        {<<"s", paused?::8, position_milliseconds::64>>, opcode: :binary},
+        state = %Mediasync.RoomConnection.State{}
+      ) do
+    if state.host? do
+      Mediasync.Room.publish_playback_state(state.room_pid, %Mediasync.PlaybackState{
+        paused?: int_repr_to_bool!(paused?),
+        position_milliseconds: position_milliseconds
+      })
+
+      {:ok, state}
+    else
+      {:stop, {:error, :received_forbidden_state_update}, state}
+    end
+  end
+
+  @impl true
+  def handle_info(
+        {:playback_state_update, playback_state = %Mediasync.PlaybackState{}},
+        state = %Mediasync.RoomConnection.State{}
+      ) do
+    if state.initialized? do
+      {:push,
+       {:binary,
+        <<"s", bool_to_int_repr(playback_state.paused?)::8,
+          playback_state.position_milliseconds::64>>}, state}
+    else
+      {:ok, state}
+    end
+  end
+
+  @impl true
+  def handle_info(
+        {:DOWN, ref, :process, _object, _reason},
+        state = %Mediasync.RoomConnection.State{}
+      ) do
+    room_monitor_ref = state.room_monitor_ref
+
+    case ref do
+      ^room_monitor_ref -> {:stop, {:error, :room_exited}, state}
+      _ -> {:stop, {:error, :unexpected_down_message}, state}
+    end
+  end
+end
diff --git a/lib/mediasync/room_id.ex b/lib/mediasync/room_id.ex
new file mode 100644
index 0000000..64a8d23
--- /dev/null
+++ b/lib/mediasync/room_id.ex
@@ -0,0 +1,9 @@
+defmodule Mediasync.RoomID do
+  @type t() :: binary()
+
+  @spec generate() :: t()
+  def generate do
+    Application.get_env(:mediasync, :node_id) <>
+      "~" <> Base.url_encode64(:crypto.strong_rand_bytes(16), padding: false)
+  end
+end
diff --git a/lib/mediasync/router.ex b/lib/mediasync/router.ex
new file mode 100644
index 0000000..54ef533
--- /dev/null
+++ b/lib/mediasync/router.ex
@@ -0,0 +1,119 @@
+defmodule Mediasync.Router do
+  import Mediasync.Utils
+  import Mediasync.UserToken
+  use Plug.Router
+  use Plug.ErrorHandler
+
+  plug(Plug.Logger)
+  plug(Plug.Head)
+
+  plug(Plug.Static, at: "/static", from: {:mediasync, "priv/static"})
+
+  plug(:put_secret_key_base)
+
+  plug(Plug.Session,
+    store: :cookie,
+    key: "_mediasync_session",
+    encryption_salt: {Mediasync.Utils, :get_session_encryption_salt, []},
+    signing_salt: {Mediasync.Utils, :get_session_signing_salt, []}
+  )
+
+  plug(:fetch_session)
+
+  plug(:ensure_user_token)
+
+  plug(:match)
+
+  plug(Plug.Parsers,
+    parsers: [:urlencoded],
+    pass: ["application/x-www-form-urlencoded"]
+  )
+
+  plug(Plug.CSRFProtection)
+
+  plug(:dispatch)
+
+  get "/" do
+    conn
+    |> put_html_content_type()
+    |> send_resp(200, Mediasync.Templates.home())
+  end
+
+  post "/host_room" do
+    video_url = conn.body_params["video_url"]
+
+    cond do
+      byte_size(video_url) > Application.get_env(:mediasync, :max_video_url_size) ->
+        Mediasync.HTTPErrors.send_video_url_too_large(conn)
+
+      elem(URI.new(video_url), 0) != :ok ->
+        Mediasync.HTTPErrors.send_invalid_video_url(conn)
+
+      true ->
+        {:ok, _pid, room_id} =
+          DynamicSupervisor.start_child(
+            Mediasync.RoomSupervisor,
+            {Mediasync.Room,
+             %Mediasync.Room.State{
+               video_url: video_url,
+               host_user_token_hash: get_user_token_hash!(conn)
+             }}
+          )
+
+        redirect(conn, status: 303, location: "/room/#{room_id}")
+    end
+  end
+
+  get "/room/:room_id" do
+    case Registry.lookup(Mediasync.RoomRegistry, conn.path_params["room_id"]) do
+      [{pid, _value}] ->
+        conn
+        |> put_html_content_type()
+        |> send_resp(200, Mediasync.Templates.room(Mediasync.Room.get_video_url(pid)))
+
+      [] ->
+        Mediasync.HTTPErrors.send_not_found(conn)
+    end
+  end
+
+  get "/room/:room_id/websocket" do
+    # TODO: verify origin before doing any of this
+
+    user_token_hash = get_user_token_hash!(conn)
+    room_id = conn.path_params["room_id"]
+
+    case Registry.lookup(Mediasync.RoomRegistry, room_id) do
+      [{pid, _value}] ->
+        conn
+        |> WebSockAdapter.upgrade(
+          Mediasync.RoomConnection,
+          %Mediasync.RoomConnection.State{
+            room_pid: pid,
+            room_id: room_id,
+            user_token_hash: user_token_hash
+          },
+          max_frame_size: Application.fetch_env!(:mediasync, :websocket_max_frame_octets)
+        )
+
+      [] ->
+        Mediasync.HTTPErrors.send_not_found(conn)
+    end
+  end
+
+  match _ do
+    Mediasync.HTTPErrors.send_not_found(conn)
+  end
+
+  @impl Plug.ErrorHandler
+  def handle_errors(conn, %{kind: kind, reason: reason, stack: _stack}) do
+    IO.inspect({kind, reason})
+
+    case {kind, reason} do
+      {:error, %Plug.CSRFProtection.InvalidCSRFTokenError{}} ->
+        Mediasync.HTTPErrors.send_invalid_csrf_token(conn)
+
+      _ ->
+        Mediasync.HTTPErrors.send_unknown(conn)
+    end
+  end
+end
diff --git a/lib/mediasync/templates.ex b/lib/mediasync/templates.ex
new file mode 100644
index 0000000..fb91aa0
--- /dev/null
+++ b/lib/mediasync/templates.ex
@@ -0,0 +1,5 @@
+defmodule Mediasync.Templates do
+  require EEx
+  EEx.function_from_file(:def, :home, "priv/home.html.eex")
+  EEx.function_from_file(:def, :room, "priv/room.html.eex", [:video_url])
+end
diff --git a/lib/mediasync/user_token.ex b/lib/mediasync/user_token.ex
new file mode 100644
index 0000000..edeed0c
--- /dev/null
+++ b/lib/mediasync/user_token.ex
@@ -0,0 +1,58 @@
+defmodule Mediasync.UserToken do
+  import Plug.Conn
+
+  @type hash() :: binary()
+
+  @user_token_session_key "user_token"
+
+  @spec ensure_user_token(Plug.Conn.t()) :: Plug.Conn.t()
+  @spec ensure_user_token(Plug.Conn.t(), []) :: Plug.Conn.t()
+  def ensure_user_token(conn, _opts \\ []) do
+    if get_user_token(conn) do
+      conn
+    else
+      put_session(
+        conn,
+        @user_token_session_key,
+        Base.encode64(:crypto.strong_rand_bytes(16), padding: false)
+      )
+    end
+  end
+
+  @spec get_user_token_hash(Plug.Conn.t()) :: hash() | nil
+  @doc """
+  Retrieves a hash of the user token from the session.
+
+  This hash, not the original token, is suitable to be stored server-side (note
+  that the actual underlying token is what must be sent by the client). Using
+  these hashes for comparison prevents timing attacks, and it is OK for them
+  to be leaked in logs (such as when a GenServer exits and its state is
+  dumped).
+  """
+  def get_user_token_hash(conn) do
+    case get_user_token(conn) do
+      nil -> nil
+      user_token -> :crypto.hash(:sha256, user_token)
+    end
+  end
+
+  @spec get_user_token_hash!(Plug.Conn.t()) :: hash()
+  @doc """
+  Like `get_user_token_hash/1`, but raises if there is no
+  user token in the session.
+  """
+  def get_user_token_hash!(conn) do
+    user_token_hash = get_user_token_hash(conn)
+
+    if user_token_hash do
+      user_token_hash
+    else
+      raise "No user token in session! Use ensure_user_token first."
+    end
+  end
+
+  @spec get_user_token(Plug.Conn.t()) :: binary() | nil
+  defp get_user_token(conn) do
+    get_session(conn, @user_token_session_key)
+  end
+end
diff --git a/lib/mediasync/utils.ex b/lib/mediasync/utils.ex
new file mode 100644
index 0000000..fa0ab68
--- /dev/null
+++ b/lib/mediasync/utils.ex
@@ -0,0 +1,66 @@
+defmodule Mediasync.Utils do
+  import Plug.Conn
+
+  @spec put_html_content_type(Plug.Conn.t()) :: Plug.Conn.t()
+  @spec put_html_content_type(Plug.Conn.t(), []) :: Plug.Conn.t()
+  def put_html_content_type(conn, _opts \\ []) do
+    put_resp_content_type(conn, "text/html")
+  end
+
+  @spec put_json_content_type(Plug.Conn.t()) :: Plug.Conn.t()
+  @spec put_json_content_type(Plug.Conn.t(), []) :: Plug.Conn.t()
+  def put_json_content_type(conn, _opts \\ []) do
+    put_resp_content_type(conn, "application/json")
+  end
+
+  @spec redirect(Plug.Conn.t(), status: Plug.Conn.status(), location: binary()) :: Plug.Conn.t()
+  def redirect(conn, status: status, location: location) do
+    conn
+    |> put_resp_header("Location", location)
+    |> send_resp(status, "Redirecting to #{location}")
+  end
+
+  @spec put_secret_key_base(Plug.Conn.t()) :: Plug.Conn.t()
+  @spec put_secret_key_base(Plug.Conn.t(), []) :: Plug.Conn.t()
+  def put_secret_key_base(conn, _opts \\ []) do
+    put_in(conn.secret_key_base, Application.fetch_env!(:mediasync, :secret_key_base))
+  end
+
+  @spec get_session_encryption_salt() :: binary()
+  def get_session_encryption_salt do
+    Application.fetch_env!(:mediasync, :session_encryption_salt)
+  end
+
+  @spec get_session_signing_salt() :: binary()
+  def get_session_signing_salt do
+    Application.fetch_env!(:mediasync, :session_signing_salt)
+  end
+
+  @spec bool_to_int_repr(boolean()) :: 0 | 1
+  @doc """
+  Convert false to 0 and true to 1. Useful for sending boolean values over binary protocols.
+
+  Inverse of `int_repr_to_bool/1`.
+  """
+  def bool_to_int_repr(bool) do
+    case bool do
+      false -> 0
+      true -> 1
+    end
+  end
+
+  @spec int_repr_to_bool!(0 | 1) :: boolean()
+  @doc """
+  Convert 0 to false and 1 to true. Useful for receiving boolean values over binary protocols.
+  Raises `ArgumentError` if given an argument other than 0 or 1.
+
+  Inverse of `bool_to_int_repr/1`.
+  """
+  def int_repr_to_bool!(int_repr) do
+    case int_repr do
+      0 -> false
+      1 -> true
+      _ -> raise ArgumentError
+    end
+  end
+end
diff --git a/lib/mix/tasks/vendor.ex b/lib/mix/tasks/vendor.ex
new file mode 100644
index 0000000..1f64236
--- /dev/null
+++ b/lib/mix/tasks/vendor.ex
@@ -0,0 +1,11 @@
+defmodule Mix.Tasks.Vendor do
+  use Mix.Task
+
+  @impl Mix.Task
+  def run([]) do
+    {_, 0} = System.cmd("npm", ~w(install))
+    File.cp_r!("node_modules/video.js/dist", "priv/static/video.js")
+    File.cp_r!("node_modules/video.js/LICENSE", "priv/static/video.js/LICENSE")
+    nil
+  end
+end
diff --git a/mix.exs b/mix.exs
new file mode 100644
index 0000000..fbab2a0
--- /dev/null
+++ b/mix.exs
@@ -0,0 +1,33 @@
+defmodule Mediasync.MixProject do
+  use Mix.Project
+
+  def project do
+    [
+      app: :mediasync,
+      version: "0.1.0",
+      elixir: "~> 1.17",
+      start_permanent: Mix.env() == :prod,
+      deps: deps()
+    ]
+  end
+
+  # Run "mix help compile.app" to learn about applications.
+  def application do
+    [
+      extra_applications: [:logger],
+      mod: {Mediasync.Application, []}
+    ]
+  end
+
+  # Run "mix help deps" to learn about dependencies.
+  defp deps do
+    [
+      {:bandit, "~> 1.0"},
+      {:jason, "~> 1.4"},
+      {:sqids, "~> 0.1.0"},
+      {:websock_adapter, "~> 0.5.6"}
+      # {:dep_from_hexpm, "~> 0.3.0"},
+      # {:dep_from_git, git: "https://github.com/elixir-lang/my_dep.git", tag: "0.1.0"}
+    ]
+  end
+end
diff --git a/mix.lock b/mix.lock
new file mode 100644
index 0000000..0e8eec7
--- /dev/null
+++ b/mix.lock
@@ -0,0 +1,13 @@
+%{
+  "bandit": {:hex, :bandit, "1.5.4", "8e56e7cfc06f3c57995be0d9bf4e45b972d8732f5c7e96ef8ec0735f52079527", [:mix], [{:hpax, "~> 0.2.0", [hex: :hpax, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:thousand_island, "~> 1.0", [hex: :thousand_island, repo: "hexpm", optional: false]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "04c2b38874769af67fe7f10034f606ad6dda1d8f80c4d7a0c616b347584d5aff"},
+  "hpax": {:hex, :hpax, "0.2.0", "5a58219adcb75977b2edce5eb22051de9362f08236220c9e859a47111c194ff5", [:mix], [], "hexpm", "bea06558cdae85bed075e6c036993d43cd54d447f76d8190a8db0dc5893fa2f1"},
+  "jason": {:hex, :jason, "1.4.3", "d3f984eeb96fe53b85d20e0b049f03e57d075b5acda3ac8d465c969a2536c17b", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "9a90e868927f7c777689baa16d86f4d0e086d968db5c05d917ccff6d443e58a3"},
+  "mime": {:hex, :mime, "2.0.5", "dc34c8efd439abe6ae0343edbb8556f4d63f178594894720607772a041b04b02", [:mix], [], "hexpm", "da0d64a365c45bc9935cc5c8a7fc5e49a0e0f9932a761c55d6c52b142780a05c"},
+  "plug": {:hex, :plug, "1.16.0", "1d07d50cb9bb05097fdf187b31cf087c7297aafc3fed8299aac79c128a707e47", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "cbf53aa1f5c4d758a7559c0bd6d59e286c2be0c6a1fac8cc3eee2f638243b93e"},
+  "plug_crypto": {:hex, :plug_crypto, "2.1.0", "f44309c2b06d249c27c8d3f65cfe08158ade08418cf540fd4f72d4d6863abb7b", [:mix], [], "hexpm", "131216a4b030b8f8ce0f26038bc4421ae60e4bb95c5cf5395e1421437824c4fa"},
+  "sqids": {:hex, :sqids, "0.1.3", "d4f60863797bfe4abb32e775a015a021664fc58578e3f229859609732fe30667", [:mix], [], "hexpm", "f1648688086e0075c5d9a91e58a115fed7028895e03fa513b1dcd78ccffca3e5"},
+  "telemetry": {:hex, :telemetry, "1.2.1", "68fdfe8d8f05a8428483a97d7aab2f268aaff24b49e0f599faa091f1d4e7f61c", [:rebar3], [], "hexpm", "dad9ce9d8effc621708f99eac538ef1cbe05d6a874dd741de2e689c47feafed5"},
+  "thousand_island": {:hex, :thousand_island, "1.3.5", "6022b6338f1635b3d32406ff98d68b843ba73b3aa95cfc27154223244f3a6ca5", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "2be6954916fdfe4756af3239fb6b6d75d0b8063b5df03ba76fd8a4c87849e180"},
+  "websock": {:hex, :websock, "0.5.3", "2f69a6ebe810328555b6fe5c831a851f485e303a7c8ce6c5f675abeb20ebdadc", [:mix], [], "hexpm", "6105453d7fac22c712ad66fab1d45abdf049868f253cf719b625151460b8b453"},
+  "websock_adapter": {:hex, :websock_adapter, "0.5.6", "0437fe56e093fd4ac422de33bf8fc89f7bc1416a3f2d732d8b2c8fd54792fe60", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "e04378d26b0af627817ae84c92083b7e97aca3121196679b73c73b99d0d133ea"},
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..3465191
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,330 @@
+{
+  "name": "mediasync",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "devDependencies": {
+        "prettier": "3.3.2",
+        "video.js": "^8.12.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
+      "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
+      "dev": true,
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@videojs/http-streaming": {
+      "version": "3.12.1",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.12.1.tgz",
+      "integrity": "sha512-rpB5AMt0QZ9bMXzwiWhynF2NLNnm5g2DZjPOFX6OoFqqXhbe2ngY2nqm9lLRhRVe22YeysQCmAlvBNwGuWFI8Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "4.0.0",
+        "aes-decrypter": "4.0.1",
+        "global": "^4.4.0",
+        "m3u8-parser": "^7.1.0",
+        "mpd-parser": "^1.3.0",
+        "mux.js": "7.0.3",
+        "video.js": "^7 || ^8"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "video.js": "^8.11.0"
+      }
+    },
+    "node_modules/@videojs/vhs-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz",
+      "integrity": "sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/@videojs/xhr": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/aes-decrypter": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.1.tgz",
+      "integrity": "sha512-H1nh/P9VZXUf17AA5NQfJML88CFjVBDuGkp5zDHa7oEhYN9TTpNLJknRY1ie0iSKWlDf6JRnJKaZVDSQdPy6Cg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      }
+    },
+    "node_modules/aes-decrypter/node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
+      "dev": true
+    },
+    "node_modules/global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "dev": true,
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
+    "node_modules/individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g==",
+      "dev": true
+    },
+    "node_modules/is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
+      "dev": true
+    },
+    "node_modules/keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A==",
+      "dev": true
+    },
+    "node_modules/m3u8-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.1.0.tgz",
+      "integrity": "sha512-7N+pk79EH4oLKPEYdgRXgAsKDyA/VCo0qCHlUwacttQA0WqsjZQYmNfywMvjlY9MpEBVZEt0jKFd73Kv15EBYQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0"
+      }
+    },
+    "node_modules/m3u8-parser/node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "dev": true,
+      "dependencies": {
+        "dom-walk": "^0.1.0"
+      }
+    },
+    "node_modules/mpd-parser": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.3.0.tgz",
+      "integrity": "sha512-WgeIwxAqkmb9uTn4ClicXpEQYCEduDqRKfmUdp4X8vmghKfBNXZLYpREn9eqrDx/Tf5LhzRcJLSpi4ohfV742Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^4.0.0",
+        "@xmldom/xmldom": "^0.8.3",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "mpd-to-m3u8-json": "bin/parse.js"
+      }
+    },
+    "node_modules/mux.js": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.0.3.tgz",
+      "integrity": "sha512-gzlzJVEGFYPtl2vvEiJneSWAWD4nfYRHD5XgxmB2gWvXraMPOYk+sxfvexmNfjQUFpmk6hwLR5C6iSFmuwCHdQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "muxjs-transmux": "bin/transmux.js"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      },
+      "bin": {
+        "pkcs7": "bin/cli.js"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
+      "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "dev": true
+    },
+    "node_modules/rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "dev": true,
+      "dependencies": {
+        "individual": "^2.0.0"
+      }
+    },
+    "node_modules/safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+      "dev": true,
+      "dependencies": {
+        "rust-result": "^1.0.0"
+      }
+    },
+    "node_modules/url-toolkit": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
+      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==",
+      "dev": true
+    },
+    "node_modules/video.js": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.12.0.tgz",
+      "integrity": "sha512-bLjfg3y09CAed1xZ4FujdTW7G9kgL0CJHaBnDKwBUgYuutijCutYPP5yQGCdN6VOi76uEuOpINwmTJSJia6zww==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "3.12.1",
+        "@videojs/vhs-utils": "^4.0.0",
+        "@videojs/xhr": "2.6.0",
+        "aes-decrypter": "^4.0.1",
+        "global": "4.4.0",
+        "keycode": "2.2.0",
+        "m3u8-parser": "^7.1.0",
+        "mpd-parser": "^1.2.2",
+        "mux.js": "^7.0.1",
+        "safe-json-parse": "4.0.0",
+        "videojs-contrib-quality-levels": "4.1.0",
+        "videojs-font": "4.1.0",
+        "videojs-vtt.js": "0.15.5"
+      }
+    },
+    "node_modules/videojs-contrib-quality-levels": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.1.0.tgz",
+      "integrity": "sha512-TfrXJJg1Bv4t6TOCMEVMwF/CoS8iENYsWNKip8zfhB5kTcegiFYezEA0eHAJPU64ZC8NQbxQgOwAsYU8VXbOWA==",
+      "dev": true,
+      "dependencies": {
+        "global": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=16",
+        "npm": ">=8"
+      },
+      "peerDependencies": {
+        "video.js": "^8"
+      }
+    },
+    "node_modules/videojs-font": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.1.0.tgz",
+      "integrity": "sha512-X1LuPfLZPisPLrANIAKCknZbZu5obVM/ylfd1CN+SsCmPZQ3UMDPcvLTpPBJxcBuTpHQq2MO1QCFt7p8spnZ/w==",
+      "dev": true
+    },
+    "node_modules/videojs-vtt.js": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
+      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
+      "dev": true,
+      "dependencies": {
+        "global": "^4.3.1"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..5a3869a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "prettier": "3.3.2",
+    "video.js": "^8.12.0"
+  }
+}
diff --git a/priv/home.html.eex b/priv/home.html.eex
new file mode 100644
index 0000000..5936e6c
--- /dev/null
+++ b/priv/home.html.eex
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>home | mediasync</title>
+    <link rel="stylesheet" href="/static/main.css">
+</head>
+
+<body>
+    <form action="/host_room" method="post">
+        <input name="_csrf_token" type="hidden" value="<%= Plug.CSRFProtection.get_csrf_token() %>">
+        <label for="host_room_input_video_url">video url:</label>
+        <input name="video_url" id="host_room_input_video_url" type="url"
+            maxlength="<%= Application.get_env(:mediasync, :max_video_url_size) %>" required><br>
+
+        <script>
+            "use strict";
+            /*  The built-in validation for <input type="url"> seems very half-hearted in my
+                testing (Firefox 127.0.2), so let's replace it with something complete. */
+            (() => {
+                const checkURLInputValidity = (urlInput) => {
+                    if (URL.canParse(urlInput.value)) {
+                        urlInput.setCustomValidity("");
+                    } else {
+                        urlInput.setCustomValidity("Please enter a valid URL.");
+                    }
+                    urlInput.reportValidity();
+                };
+                const urlInput = document.querySelector("input#host_room_input_video_url");
+                checkURLInputValidity(urlInput);
+                urlInput.addEventListener("input", e => checkURLInputValidity(e.target));
+            })();
+        </script>
+
+        <input type="submit" value="host room">
+    </form>
+</body>
+
+</html>
diff --git a/priv/room.html.eex b/priv/room.html.eex
new file mode 100644
index 0000000..fd86768
--- /dev/null
+++ b/priv/room.html.eex
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>room | mediasync</title>
+    <link rel="stylesheet" href="/static/main.css">
+    <link rel="stylesheet" href="/static/video.js/video-js.min.css">
+    <style>
+        body {
+            margin: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="playerContainer">
+        <video-js id="player">
+            <source src="<%= Plug.HTML.html_escape(video_url) %>">
+        </video-js>
+    </div>
+    <script src="/static/video.js/video.min.js"></script>
+    <script src="/static/room.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/priv/static/main.css b/priv/static/main.css
new file mode 100644
index 0000000..85906c6
--- /dev/null
+++ b/priv/static/main.css
@@ -0,0 +1,14 @@
+body {
+  background-color: black;
+  color: white;
+  font-family: monospace;
+}
+
+input {
+  font-family: inherit;
+}
+
+div#playerContainer {
+  width: 100svw;
+  height: 100svh;
+}
diff --git a/priv/static/room.js b/priv/static/room.js
new file mode 100644
index 0000000..85ef9d3
--- /dev/null
+++ b/priv/static/room.js
@@ -0,0 +1,148 @@
+"use strict";
+
+(() => {
+  const randomBackoffMilliseconds = (lowest, highest) => {
+    return Math.round(Math.random() * (highest - lowest) + lowest);
+  };
+
+  const prepareInitialInfoMessage = () => {
+    const dataView = new DataView(new ArrayBuffer(1));
+    dataView.setUint8(0, "i".charCodeAt(0));
+    return dataView;
+  };
+
+  const prepareStateUpdateMessage = (positionMilliseconds, paused) => {
+    const dataView = new DataView(new ArrayBuffer(10));
+    dataView.setUint8(0, "s".charCodeAt(0));
+    dataView.setUint8(1, +paused);
+    dataView.setBigUint64(2, positionMilliseconds);
+    return dataView;
+  };
+
+  const player = videojs("player", {
+    controls: true,
+    fill: true,
+    playsinline: true,
+    preload: "auto",
+  });
+
+  const updatePlaybackState = (latestReceivedState, nowMilliseconds) => {
+    if (nowMilliseconds - latestReceivedState.receivedAtMilliseconds > 2000) {
+      player.pause();
+      return;
+    }
+
+    const idealPositionMilliseconds =
+      latestReceivedState.positionMilliseconds +
+      (nowMilliseconds - latestReceivedState.receivedAtMilliseconds);
+    const currentPositionMilliseconds = player.currentTime() * 1000;
+    const positionDiffMilliseconds = currentPositionMilliseconds - idealPositionMilliseconds;
+    const absPositionDiffMilliseconds = Math.abs(positionDiffMilliseconds);
+
+    if (absPositionDiffMilliseconds > 1250) {
+      player.currentTime(idealPositionMilliseconds / 1000);
+      player.playbackRate(1);
+    } else if (
+      absPositionDiffMilliseconds > 200 ||
+      (player.playbackRate() != 1 && absPositionDiffMilliseconds > 100)
+    ) {
+      player.playbackRate(1 - 0.02 * Math.sign(positionDiffMilliseconds));
+    } else {
+      player.playbackRate(1);
+    }
+
+    if (latestReceivedState.paused) {
+      player.pause();
+      player.currentTime(idealPositionMilliseconds / 1000);
+    } else {
+      player.play().then(null, () => {
+        // Failed to play - try muting in case it's because the browser is blocking autoplay
+        player.muted(true);
+        player.play().then(null, () => console.error("Failed to play video."));
+      });
+    }
+  };
+
+  const latestReceivedState = {
+    paused: true,
+    positionMilliseconds: 0,
+    receivedAtMilliseconds: null,
+  };
+
+  const manageWebsocket = () => {
+    let websocket = new WebSocket(location.href.replace(/^http/, "ws") + "/websocket");
+    websocket.binaryType = "arraybuffer";
+
+    let initialized = false;
+    let host;
+
+    // Interval to check video state for non-hosts, and to send state for host
+    let intervalId;
+
+    websocket.addEventListener("open", (_) => {
+      console.debug("Created WebSocket connection successfully.");
+      websocket.send(prepareInitialInfoMessage());
+    });
+
+    websocket.addEventListener("message", (event) => {
+      const messageDataView = new DataView(event.data);
+      switch (String.fromCharCode(messageDataView.getUint8(0))) {
+        case "i":
+          if (initialized) {
+            websocket.close(); // Error condition: we're already initialized
+          } else {
+            initialized = true;
+            host = !!messageDataView.getUint8(1);
+
+            // How often host sends state - unused on non-host clients
+            const SEND_STATE_INTERVAL_MILLISECONDS = 250;
+            // How often client checks if its state matches what the server sent - unused on hosts
+            const CHECK_STATE_INTERVAL_MILLISECONDS = 20;
+
+            if (host) {
+              intervalId = setInterval(() => {
+                websocket.send(
+                  prepareStateUpdateMessage(
+                    BigInt(Math.round(player.currentTime() * 1000)),
+                    player.paused(),
+                  ),
+                );
+              }, SEND_STATE_INTERVAL_MILLISECONDS);
+            } else {
+              intervalId = setInterval(() => {
+                updatePlaybackState(latestReceivedState, performance.now());
+              }, CHECK_STATE_INTERVAL_MILLISECONDS);
+            }
+          }
+          break;
+        case "s":
+          if (host || !initialized) {
+            /* Error conditions: host should send state updates, not receive
+               them, and the server should not send us state updates until
+               we're initialized. */
+            websocket.close();
+          } else {
+            latestReceivedState.paused = messageDataView.getUint8(1);
+            latestReceivedState.positionMilliseconds = Number(messageDataView.getBigUint64(2));
+            latestReceivedState.receivedAtMilliseconds = performance.now();
+          }
+          break;
+        default:
+          websocket.close(); // Error condition: unrecognized message type
+      }
+    });
+
+    websocket.addEventListener("close", (_) => {
+      clearInterval(intervalId);
+      player.pause();
+      const recreateAfter = randomBackoffMilliseconds(50, 3000);
+      console.debug(
+        `WebSocket connection closed; will attempt to recreate it in ${recreateAfter} ms.`,
+      );
+      websocket = null;
+      setTimeout(manageWebsocket, recreateAfter);
+    });
+  };
+
+  manageWebsocket();
+})();
diff --git a/priv/static/video.js/LICENSE b/priv/static/video.js/LICENSE
new file mode 100644
index 0000000..8a7f05f
--- /dev/null
+++ b/priv/static/video.js/LICENSE
@@ -0,0 +1,13 @@
+Copyright Brightcove, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
\ No newline at end of file
diff --git a/priv/static/video.js/alt/video-js-cdn.css b/priv/static/video.js/alt/video-js-cdn.css
new file mode 100644
index 0000000..2f602f6
--- /dev/null
+++ b/priv/static/video.js/alt/video-js-cdn.css
@@ -0,0 +1,1935 @@
+.vjs-svg-icon {
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-position: center;
+  fill: currentColor;
+  height: 1.8em;
+  width: 1.8em;
+}
+.vjs-svg-icon:before {
+  content: none !important;
+}
+
+.vjs-svg-icon:hover,
+.vjs-control:focus .vjs-svg-icon {
+  filter: drop-shadow(0 0 0.25em #fff);
+}
+
+.vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
+  text-align: center;
+}
+
+@font-face {
+  font-family: VideoJS;
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABUgAAsAAAAAItAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV33Y21hcAAAAYQAAAEJAAAD5p42+VxnbHlmAAACkAAADwwAABdk9R/WHmhlYWQAABGcAAAAKwAAADYn8kSnaGhlYQAAEcgAAAAdAAAAJA+RCL1obXR4AAAR6AAAABMAAAC8Q44AAGxvY2EAABH8AAAAYAAAAGB7SIHGbWF4cAAAElwAAAAfAAAAIAFAAI9uYW1lAAASfAAAASUAAAIK1cf1oHBvc3QAABOkAAABfAAAAnXdFqh1eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGR7xDiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGPHcRdyA4RZgQRADbZCycAAHic7dPXbcMwAEXRK1vuvffem749XAbKV3bjBA6fXsaIgMMLEWoQJaAEFKNnlELyQ4K27zib5PNF6vl8yld+TKr5kH0+cUw0xv00Hwvx2DResUyFKrV4XoMmLdp06NKjz4AhI8ZMmDJjzoIlK9Zs2LJjz4EjJ85cuHLjziPe/0UWL17mf2tqKLz/9jK9f8tXpGCoRdPKhtS0RqFkWvVQNtSKoVYNtWaoddPXEBqG2jQ9XWgZattQO4baNdSeofYNdWCoQ0MdGerYUCeGOjXUmaHODXVhqEtDXRnq2lA3hro11J2h7g31YKhHQz0Z6tlQL4Z6NdSbod4N9WGoT9MfHF6GmhnZLxyDcRMAAAB4nJ1YC1gUV5auc6urCmxEGrq6VRD6ATQP5dHPKK8GRIyoKApoEBUDAiGzGmdUfKNRM4qLZrUZdGKcGN/GZJKd0SyOWTbfbmZ2NxqzM5IxRtNZd78vwYlJdtREoO7sudVNq6PmmxmKqrqPU+eee173P80Bh39Cu9DOEY4DHZBK3i20D/QRLcfxbE5sEVtwLpZzclw4ibFIkSCJUcZ4MBpMnnzwuKNsGWBL5i3qy6kO2dVpvUpKbkAP9fq62rdeGJ+TM/7C1nbIutfuWrWk5ci4zMxxR1qW/N+9JsmCGXj9VKWhFx/6tr/nz78INDm2C9yPF/fDcxLuyKxLBZ1ZBz2QTi+RSkiH5RrDQJ/GgGQadX9m0YSURs7GpSG905Zsk41uj14yul1OtieZ7QUk5GRG/YiS7PYYPSAZNRed9sq3+bOpz00rKb7pe/ZEZvbALxZAHT3AFoH8GXP3rt67QFn40kt8W13FjLTDb48c+fSi5/7h0P4dL5yz7DPtbmgmYxfQA9RL2+EOfTcvdp+1vmuBpvOll1As1S6ak0IvJzC7sKWJFtJgBd2uWcg+0Zyg7dzQfhcjXRgXGZRf5/a4A58IDU777Nl252AUk4m2ByRRjqTNqIDCEJeAnU3iCFwrkrNwXEzg4yFevBwypzxkcX+AIfk3VEKl3XmWbT8788SzvpvFJaiOezL6QyuSr9VNf97csNu0z3LuhR0wATUxZAfVBwVOy+nQFhxYdWaXlXe4HC4zWGWzzsrLDtmhI9pOWOHv7PTT7XybH1Z0+v2d5Abd3kmG+TsH23CS/KwTxx/JkzEwx6jcQOUc42LLwHJ/J93uZ9ygh3HuZGwqsY9dWDHQ58dxNqyqKRQTYdxwTubiOSs3FiMDkq0WSZQgCT0GBDOg2lxOAd1FlPVGs4AKBAcYHHaP2wPkHaivmLF5zYqnIZrvcHx5gN4k/6tchNW1DtdgNL2KrxEkS/kfnIHoVnp1VjmjpTf5r0lTzLj0mdS28tX+XGorU364eMPmnWVl8J36nlKGw3CZhjEiuMw8h8mKvhGD+4/lElBWjAhLJMg6fTw4zPZ8cOmcGQBm2Qxml1nAm13CpYGq1JKUlJJUzQn1PTAO0mgv6VMMpA/DuRfSWEu4lDIxdbAtdWIKvnn2Vk766CWfz9fpY0sH/UpdP50rfszaVpdVRmvIejEdLMk45s4Bu0EWHjeOySmFyZSiMahvZdNSn29peoI/YexYfKQTLeurTXXwEVLeSfInTWHkkMaeUx7sBvOCSTSj3AlcKjfueyS36tCrXDlgRtF0etFq9jhc1kfKuBT/OwMr0F4UUTTh1AN0g20+H/ScPcsIEsYu9d/zN5PmjprPtNwI1ZZcDK6iC97Mcjp2y2aX36f+QbpGHrgRuHlXJ+Zf6PFRL2uQSp8vxHeF2IoRb8Rd2rhMzsNxSRmEuKK4JFnkojhMcx6jzqHzGMGFcW+MhBj0bhf6cowN+45I4LHvwT6fteu7M42wGRI/pxcg6/MZdEvt1U1XaulHFXuLmqov/MukvRVL35/b3ODM1+4aPjtzeK7zmUkV2h3DN54HaQ9GzJvxHRb6Ks2gB81fwqraT+A7GvZJrRLRofU6G0urNL+zFw3v0FaVDFxsKEZW56F31r6ip6vOL+FCObBPuIMRiXld9RaMdLzRIOGhPey2T9vA/35DmZPK9IWaT9d/WgOGMieYqJ/dzjLIhZU118gbysxrNUGefxD6UO/hyNNllpFTOIbx32kSFQctnweV5PxTMHLjRqiAN+fQE9gL+Xy5WB6MOS4GJJuYbDUHhcKDhHGRbLzOpjsjdM1+iwAZLGeieehACX2hhI7SjK/ZUTNrvVje31TxJiFBGYViWFkCn9PMeX9fS6qVbzfCj4fOCTzDnuWy2c4xA7mdNkA3RS9FH2VeqzdCBlixxbzXjvkHU1I8BOYFb1pZvPIHSSIj4svT8xpzcxtXN+ZKyjdDvbz08niiF3PqV9Tn5NST8vg48MTaY8E5xqSSIsWoWHo+LtAzxdH/GDUyp37CBEYfso04F/NlMTcDJUTpECLY0HFGQHImE8xsEUdgnrQlixIvGhJA1BvxpDHGxEMBYFeNOHcBJlSjwe2JcSfbBEsGOPPBHg/6SBBOCsLLw0SpUxod0Z1bFMfLkbQ3UiZxEyd0Dx8t+SRBu18Q9msFbI4e3p1THEfkSEh7kEJ5orR10qTWDvbgPWn5aWvCYyOAjwgXyjJi34uMjo58L25cmRAeQZWI2PA1QQLsPESAH8WGFwZZ4SPoR73BHPzIPMJj9AreBzKUmrH4todT18ANvi1oc3YGjUT/0j+ExUwq8PI9BLaCQIpvewwYu2evAG/Vo/5avPdY7o+BemLLXw3y+AdkzP9bpIxB1wm5EYq8fesHbPEPtm6HrHvtx4jcGPR8fDDpkZBefIjB46QnlUNRltv4Z/pO/J6dxEjhYAtmoMeq+GozvUVvNYOW3m6GCIhoprcfr97B8AcIQYsfD8ljUvGNjvkrpj0ETA48ZMIxCeqsRIsQALE0gi2GB+glSOfbOjW3GSBM9yPq8/rpJXrJDz0BPxV6xdN4uiCGDQed3WhgFkBUZEFsmeyyBpzXrm7UGTBZG8Lh5aubFufk5eUsbrrFGr7McYdbltxa0nKYqRKbQjvikXYkTGM0f2xuyM3Ly21oXnWfvf6I1BmZwfh7EWWIYsg2nHhsDhOnczhJcmI6eBAmy3jZ3RiJmKQR/JA99FcwsfaVbNDDyi1rL9NPj9hfo61wjM6BjzOLijLpeTgk/pL+ip6tfYWupzeOgPny2tcUu9J/9mhxJlgyi985NFRbvCVewXUNXLJaW0RxZqtRYtnfYdcYomXQWdnJHQA3jiEEkeTQWcWxdDP9IvvVWvo2TK553XEMEq+s69/QDU1Q7p0zxwsm9qS379whr8NI2PJqLUyGyfNeX3eFfnJU2U+uHR9cVV1IqgurqwuV44XVp0h2qN55X5XJwtk59yP0IZuHrqBOBIuIYhkcoT6Kx79Pu2HS/IPZIMOqLWs/pteOOk4NPgEb6QAIdAPsyZk5Mwd+wVaHMexJv719W7xCu2l37UG6lvYdBcvHa08p89741zd63phTRGqL5ggo6SlvdbWXzCqsPq78NnSu7wnKy2HNZbVoRCI7UJEOyRj+sPE002tOOY7Qa5fXboFWkLNeqYUSZRocp9XwSUZxcQZ9Hw6LV2pOoVmvHQEDbGIENEG5i6bLgMSM4n8+FNLTtAds99DaWEvgcf4o5SyYe9x+kF6/tGoTPAdRmS/XQIEy//QxKC2oqioAI3tS5auvxCtzT6y6RK8fhChYcwCJaMJhxc0vqSxQ/qmgsrKAlBZUHlauheTpvd9uj5DnLzJct6qfq5fXbYHVIGcfrIVJihbaVLu1wW7Vbs8zK0A8e9Jvb91S9cVMjPrazD6gpfeZTXzYbCFMcppVRsGMpp55OWgx1/3JeAxW1Y7AORgM/m3rWrsdLkQVmEVSU16cX/e7uvkvpqRiQsG06XJ0t64Tf+l0nG1dt025gyOIZlvq5u9KSU1N2TW/rsWnnMRPyTDkctbhvIcNvYIXWyLzdwYLoYesUbaQG4iK2cWO2gdpeUYLqDD0MUTOPhDIGnZEs58yArR86FznuWEsU4YDi2x26dA4klkn8Qa6vhk2QUfX4Jxm/ngX9r7ogn1dmlmwqZmuhxtdg9XN/DEcUgqb+9hMyNansfaQET2mcROCmGEMVqxm5u+h6kN2MOwgqykV2wH9yQG9DvVFU38Pogaf4FVuE62KI/oJ02RDdWW2w5dqQwU/8+N1q1DlvsL863u61KLE7x/o8w0VJQM/Y/SQ3unIrqxueEa1BqT5VFNsO7p39/UC771a77RowpaKe9nvJQIT1Pog5LGx8XblBKmCNGTf3xMogAQvPnz9PYKX/08sVDTG1OKUlOLUgS/UaZtm1NAaYTsl7i9ZQ+L6O4Rl0OGa577LuWvc+C+x96/vYh0lLBuM+7XwI/dTLtdT7v4d6rRTWDnku0IBrqFnZ5bVIqKP8lasJlithWnaLhTsr8qFJBulF/70p4undou36HeTJ5+jv1fCybeQ8nH3+Xv6aENczmOFlab+hqMDg1rLOt12A+tiUFrYDwQ6c3RUJp601nzegTNX6WlYAI2zSUV945F6zU56ZmZVQaWspWcIADxJ9GmljQUnL2p2Dpr5T8H+5KJFu+vqBq8qvyHRzStLHPEO5SPYCV9nZe0yZT2RcH0oHvegSzNEJ0oGWU8iQWM12dgPEugngVceGIwZgPFp0BiT1a0a3R5Rcot7ihfA1J/20v96jX7zmTX9s583H0kwx6WnLd09cXrR9LGroOa9sHNbdyz8wcKk5lqhaVFJZNwmqtw884MXNdvJujpBa3xzuSaZH9sxa06Z7x+HJSduPbdYHv/DgmEhfbehvlmGN7JUkcG78GDM12CeyFFTPNqVeNxC1gzjz+c2nVo63Xxs8rKJWXoBJM0tmEbfGm4qzpoOH3xpzQfyxLzW1gnE9NHo6tol1eMEic4ZVPrjnVi0kqAe2sQ2bgqupScaq8WGlUWgWHI51SKJl/UYT6zccNsCSkBtiVZLsiefuFSDYT3Fi8Zk7EUnmjTRYtsFeuDDJS05MW79M3mr3mla+d8dzac31KTPmBYfFiYSUef48PhPjm9ryZsSGZZkdNvzq0Y9rdNcwDq5Dg5C3QW+7UN64IKptvS3tvHbvu5c9pv1Exau21rc9LIpwpQwUjTq8576yeVDz5+4WZ1nXT43wV60rPLJbDp/UksNrP3iQ2SA63Pst058gOYDbhRnRUw8l/sRt4HbxPzO4WYpInCpuVgSbVh6JXuwnnJngKTTCwaPWmG5Xbhpm1U0Yt3FyBGpGYemPM77p2TD904JjgJ2QFpFLeYpGx8X15Qx1Zk31p5ki9ZLUuXE0lmuJlcakJMVLeFS1iIvrB8drY0aloilakqCZwzwRORtxlgwxS4IThggJd4TDxoiaAIT80fFPGrCPPru+puFn504P/ybr4ihA/6dKASLshEJic7xE8tmzu3KzA7TABBe8y5fNbWo3ilQn/SuFKM16b2l5bOeayqfGhYmhIulU+fVNDdWVv4NMzX10MBHyPR5uhWUu8D9P1VnIMt4nGNgZGBgAOJ/1bf64vltvjJwszOAwAOlmqvINEc/WJyDgQlEAQA+dgnjAHicY2BkYGBnAAGOPgaG//85+hkYGVCBPgBGJwNkAAAAeJxjYGBgYB/EmKMPtxwAhg4B0gAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAe4CLgKKAtAC/ANiA4wDqAPgBDAEsATaBQgFWgXABggGLgZwBqwG9gdOB4oH0ggqCHAIhgicCMgJJAlWCYgJrAnyCkAKdgrkC7J4nGNgZGBg0GdoZmBnAAEmIOYCQgaG/2A+AwAaqwHQAHicXZBNaoNAGIZfE5PQCKFQ2lUps2oXBfOzzAESyDKBQJdGR2NQR3QSSE/QE/QEPUUPUHqsvsrXjTMw83zPvPMNCuAWP3DQDAejdm1GjzwS7pMmwi75XngAD4/CQ/oX4TFe4Qt7uMMbOzjuDc0EmXCP/C7cJ38Iu+RP4QEe8CU8pP8WHmOPX2EPz87TPo202ey2OjlnQSXV/6arOjWFmvszMWtd6CqwOlKHq6ovycLaWMWVydXKFFZnmVFlZU46tP7R2nI5ncbi/dDkfDtFBA2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Yu6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxtkXlT2zAQxf1C4thJAwRajt4HRy8VMwwfSJHXsQZZcnUQ+PYoTtwpM+wf2t9brWZ2n5JBsol58nJcYYAdDDFCijEy5JhgileYYRd72MccBzjEa7zBEY5xglO8xTu8xwd8xCd8xhd8xTec4RwXuMR3/MBP/MJvMPzBFYpk2Cr+OF0fTEgrFI1aHhxN740KDbEmeJpsWZlVj40s+45aLuv9KijlhCXSjLQnu/d/4UH6sWul1mRzFxZeekUuE7z10mg3qMtM1FGQddPSrLQyvJR6OaukItYXDp6pCJrmz0umqkau5pZ2hFmm7m+ImG5W2t0kZoJXUtPhVnYTbbdOBdeCVGqpJe7XKTqSbRK7zbdwXfR0U+SVsStuS3Y76em6+Ic3xYiHUppc04Nn0lMzay3dSxNcp8auDlWlaCi48yetFD7Y9USsx87G45cuop1ZxQUtjLnL4j53FO0a+5X08UXqQ7NQNo92R0XOz7sxWEnxN2TneJI8Acttu4Q=) format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-play, .video-js .vjs-play-control .vjs-icon-placeholder, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
+  content: "\f101";
+}
+
+.vjs-icon-play-circle {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-play-circle:before {
+  content: "\f102";
+}
+
+.vjs-icon-pause, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-pause:before, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
+  content: "\f103";
+}
+
+.vjs-icon-volume-mute, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
+  content: "\f104";
+}
+
+.vjs-icon-volume-low, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-volume-low:before, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before {
+  content: "\f105";
+}
+
+.vjs-icon-volume-mid, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-volume-mid:before, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before {
+  content: "\f106";
+}
+
+.vjs-icon-volume-high, .video-js .vjs-mute-control .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before {
+  content: "\f107";
+}
+
+.vjs-icon-fullscreen-enter, .video-js .vjs-fullscreen-control .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
+  content: "\f108";
+}
+
+.vjs-icon-fullscreen-exit, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
+  content: "\f109";
+}
+
+.vjs-icon-spinner {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-spinner:before {
+  content: "\f10a";
+}
+
+.vjs-icon-subtitles, .video-js .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-subtitles-button .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-subtitles:before, .video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-subtitles-button .vjs-icon-placeholder:before {
+  content: "\f10b";
+}
+
+.vjs-icon-captions, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-captions-button .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-captions:before, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-captions-button .vjs-icon-placeholder:before {
+  content: "\f10c";
+}
+
+.vjs-icon-hd {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-hd:before {
+  content: "\f10d";
+}
+
+.vjs-icon-chapters, .video-js .vjs-chapters-button .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-chapters:before, .video-js .vjs-chapters-button .vjs-icon-placeholder:before {
+  content: "\f10e";
+}
+
+.vjs-icon-downloading {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-downloading:before {
+  content: "\f10f";
+}
+
+.vjs-icon-file-download {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-file-download:before {
+  content: "\f110";
+}
+
+.vjs-icon-file-download-done {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-file-download-done:before {
+  content: "\f111";
+}
+
+.vjs-icon-file-download-off {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-file-download-off:before {
+  content: "\f112";
+}
+
+.vjs-icon-share {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-share:before {
+  content: "\f113";
+}
+
+.vjs-icon-cog {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-cog:before {
+  content: "\f114";
+}
+
+.vjs-icon-square {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-square:before {
+  content: "\f115";
+}
+
+.vjs-icon-circle, .vjs-seek-to-live-control .vjs-icon-placeholder, .video-js .vjs-volume-level, .video-js .vjs-play-progress {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-circle:before, .vjs-seek-to-live-control .vjs-icon-placeholder:before, .video-js .vjs-volume-level:before, .video-js .vjs-play-progress:before {
+  content: "\f116";
+}
+
+.vjs-icon-circle-outline {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-circle-outline:before {
+  content: "\f117";
+}
+
+.vjs-icon-circle-inner-circle {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-circle-inner-circle:before {
+  content: "\f118";
+}
+
+.vjs-icon-cancel, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-cancel:before, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before {
+  content: "\f119";
+}
+
+.vjs-icon-repeat {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-repeat:before {
+  content: "\f11a";
+}
+
+.vjs-icon-replay, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-replay:before, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
+  content: "\f11b";
+}
+
+.vjs-icon-replay-5, .video-js .vjs-skip-backward-5 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-replay-5:before, .video-js .vjs-skip-backward-5 .vjs-icon-placeholder:before {
+  content: "\f11c";
+}
+
+.vjs-icon-replay-10, .video-js .vjs-skip-backward-10 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-replay-10:before, .video-js .vjs-skip-backward-10 .vjs-icon-placeholder:before {
+  content: "\f11d";
+}
+
+.vjs-icon-replay-30, .video-js .vjs-skip-backward-30 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-replay-30:before, .video-js .vjs-skip-backward-30 .vjs-icon-placeholder:before {
+  content: "\f11e";
+}
+
+.vjs-icon-forward-5, .video-js .vjs-skip-forward-5 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-forward-5:before, .video-js .vjs-skip-forward-5 .vjs-icon-placeholder:before {
+  content: "\f11f";
+}
+
+.vjs-icon-forward-10, .video-js .vjs-skip-forward-10 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-forward-10:before, .video-js .vjs-skip-forward-10 .vjs-icon-placeholder:before {
+  content: "\f120";
+}
+
+.vjs-icon-forward-30, .video-js .vjs-skip-forward-30 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-forward-30:before, .video-js .vjs-skip-forward-30 .vjs-icon-placeholder:before {
+  content: "\f121";
+}
+
+.vjs-icon-audio, .video-js .vjs-audio-button .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-audio:before, .video-js .vjs-audio-button .vjs-icon-placeholder:before {
+  content: "\f122";
+}
+
+.vjs-icon-next-item {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-next-item:before {
+  content: "\f123";
+}
+
+.vjs-icon-previous-item {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-previous-item:before {
+  content: "\f124";
+}
+
+.vjs-icon-shuffle {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-shuffle:before {
+  content: "\f125";
+}
+
+.vjs-icon-cast {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-cast:before {
+  content: "\f126";
+}
+
+.vjs-icon-picture-in-picture-enter, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-picture-in-picture-enter:before, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
+  content: "\f127";
+}
+
+.vjs-icon-picture-in-picture-exit, .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-picture-in-picture-exit:before, .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
+  content: "\f128";
+}
+
+.vjs-icon-facebook {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-facebook:before {
+  content: "\f129";
+}
+
+.vjs-icon-linkedin {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-linkedin:before {
+  content: "\f12a";
+}
+
+.vjs-icon-twitter {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-twitter:before {
+  content: "\f12b";
+}
+
+.vjs-icon-tumblr {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-tumblr:before {
+  content: "\f12c";
+}
+
+.vjs-icon-pinterest {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-pinterest:before {
+  content: "\f12d";
+}
+
+.vjs-icon-audio-description, .video-js .vjs-descriptions-button .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-audio-description:before, .video-js .vjs-descriptions-button .vjs-icon-placeholder:before {
+  content: "\f12e";
+}
+
+.video-js {
+  display: inline-block;
+  vertical-align: top;
+  box-sizing: border-box;
+  color: #fff;
+  background-color: #000;
+  position: relative;
+  padding: 0;
+  font-size: 10px;
+  line-height: 1;
+  font-weight: normal;
+  font-style: normal;
+  font-family: Arial, Helvetica, sans-serif;
+  word-break: initial;
+}
+.video-js:-moz-full-screen {
+  position: absolute;
+}
+.video-js:-webkit-full-screen {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.video-js[tabindex="-1"] {
+  outline: none;
+}
+
+.video-js *,
+.video-js *:before,
+.video-js *:after {
+  box-sizing: inherit;
+}
+
+.video-js ul {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  list-style-position: outside;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.video-js.vjs-fluid,
+.video-js.vjs-16-9,
+.video-js.vjs-4-3,
+.video-js.vjs-9-16,
+.video-js.vjs-1-1 {
+  width: 100%;
+  max-width: 100%;
+}
+
+.video-js.vjs-fluid:not(.vjs-audio-only-mode),
+.video-js.vjs-16-9:not(.vjs-audio-only-mode),
+.video-js.vjs-4-3:not(.vjs-audio-only-mode),
+.video-js.vjs-9-16:not(.vjs-audio-only-mode),
+.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
+  height: 0;
+}
+
+.video-js.vjs-16-9:not(.vjs-audio-only-mode) {
+  padding-top: 56.25%;
+}
+
+.video-js.vjs-4-3:not(.vjs-audio-only-mode) {
+  padding-top: 75%;
+}
+
+.video-js.vjs-9-16:not(.vjs-audio-only-mode) {
+  padding-top: 177.7777777778%;
+}
+
+.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
+  padding-top: 100%;
+}
+
+.video-js.vjs-fill:not(.vjs-audio-only-mode) {
+  width: 100%;
+  height: 100%;
+}
+
+.video-js .vjs-tech {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.video-js.vjs-audio-only-mode .vjs-tech {
+  display: none;
+}
+
+body.vjs-full-window,
+body.vjs-pip-window {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+
+.vjs-full-window .video-js.vjs-fullscreen,
+body.vjs-pip-window .video-js {
+  position: fixed;
+  overflow: hidden;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.video-js.vjs-fullscreen:not(.vjs-ios-native-fs),
+body.vjs-pip-window .video-js {
+  width: 100% !important;
+  height: 100% !important;
+  padding-top: 0 !important;
+  display: block;
+}
+
+.video-js.vjs-fullscreen.vjs-user-inactive {
+  cursor: none;
+}
+
+.vjs-pip-container .vjs-pip-text {
+  position: absolute;
+  bottom: 10%;
+  font-size: 2em;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 0.5em;
+  text-align: center;
+  width: 100%;
+}
+
+.vjs-layout-tiny.vjs-pip-container .vjs-pip-text,
+.vjs-layout-x-small.vjs-pip-container .vjs-pip-text,
+.vjs-layout-small.vjs-pip-container .vjs-pip-text {
+  bottom: 0;
+  font-size: 1.4em;
+}
+
+.vjs-hidden {
+  display: none !important;
+}
+
+.vjs-disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.video-js .vjs-offscreen {
+  height: 1px;
+  left: -9999px;
+  position: absolute;
+  top: 0;
+  width: 1px;
+}
+
+.vjs-lock-showing {
+  display: block !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
+.vjs-no-js {
+  padding: 20px;
+  color: #fff;
+  background-color: #000;
+  font-size: 18px;
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: center;
+  width: 300px;
+  height: 150px;
+  margin: 0px auto;
+}
+
+.vjs-no-js a,
+.vjs-no-js a:visited {
+  color: #66A8CC;
+}
+
+.video-js .vjs-big-play-button {
+  font-size: 3em;
+  line-height: 1.5em;
+  height: 1.63332em;
+  width: 3em;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  padding: 0;
+  margin-top: -0.81666em;
+  margin-left: -1.5em;
+  cursor: pointer;
+  opacity: 1;
+  border: 0.06666em solid #fff;
+  background-color: #2B333F;
+  background-color: rgba(43, 51, 63, 0.7);
+  border-radius: 0.3em;
+  transition: all 0.4s;
+}
+.vjs-big-play-button .vjs-svg-icon {
+  width: 1em;
+  height: 1em;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  line-height: 1;
+  transform: translate(-50%, -50%);
+}
+
+.video-js:hover .vjs-big-play-button,
+.video-js .vjs-big-play-button:focus {
+  border-color: #fff;
+  background-color: #73859f;
+  background-color: rgba(115, 133, 159, 0.5);
+  transition: all 0s;
+}
+
+.vjs-controls-disabled .vjs-big-play-button,
+.vjs-has-started .vjs-big-play-button,
+.vjs-using-native-controls .vjs-big-play-button,
+.vjs-error .vjs-big-play-button {
+  display: none;
+}
+
+.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking, .vjs-scrubbing, .vjs-error) .vjs-big-play-button {
+  display: block;
+}
+
+.video-js button {
+  background: none;
+  border: none;
+  color: inherit;
+  display: inline-block;
+  font-size: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-decoration: none;
+  transition: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none;
+}
+
+.vjs-control .vjs-button {
+  width: 100%;
+  height: 100%;
+}
+
+.video-js .vjs-control.vjs-close-button {
+  cursor: pointer;
+  height: 3em;
+  position: absolute;
+  right: 0;
+  top: 0.5em;
+  z-index: 2;
+}
+.video-js .vjs-modal-dialog {
+  background: rgba(0, 0, 0, 0.8);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
+  overflow: auto;
+}
+
+.video-js .vjs-modal-dialog > * {
+  box-sizing: border-box;
+}
+
+.vjs-modal-dialog .vjs-modal-dialog-content {
+  font-size: 1.2em;
+  line-height: 1.5;
+  padding: 20px 24px;
+  z-index: 1;
+}
+
+.vjs-menu-button {
+  cursor: pointer;
+}
+
+.vjs-menu-button.vjs-disabled {
+  cursor: default;
+}
+
+.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
+  display: none;
+}
+
+.vjs-menu .vjs-menu-content {
+  display: block;
+  padding: 0;
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  overflow: auto;
+}
+
+.vjs-menu .vjs-menu-content > * {
+  box-sizing: border-box;
+}
+
+.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
+  display: none;
+}
+
+.vjs-menu li {
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  margin: 0;
+  padding: 0.2em 0;
+  line-height: 1.4em;
+  font-size: 1.2em;
+  text-align: center;
+  text-transform: lowercase;
+}
+
+.vjs-menu li.vjs-menu-item:focus,
+.vjs-menu li.vjs-menu-item:hover,
+.js-focus-visible .vjs-menu li.vjs-menu-item:hover {
+  background-color: #73859f;
+  background-color: rgba(115, 133, 159, 0.5);
+}
+
+.vjs-menu li.vjs-selected,
+.vjs-menu li.vjs-selected:focus,
+.vjs-menu li.vjs-selected:hover,
+.js-focus-visible .vjs-menu li.vjs-selected:hover {
+  background-color: #fff;
+  color: #2B333F;
+}
+.vjs-menu li.vjs-selected .vjs-svg-icon,
+.vjs-menu li.vjs-selected:focus .vjs-svg-icon,
+.vjs-menu li.vjs-selected:hover .vjs-svg-icon,
+.js-focus-visible .vjs-menu li.vjs-selected:hover .vjs-svg-icon {
+  fill: #000000;
+}
+
+.video-js .vjs-menu *:not(.vjs-selected):focus:not(:focus-visible),
+.js-focus-visible .vjs-menu *:not(.vjs-selected):focus:not(.focus-visible) {
+  background: none;
+}
+
+.vjs-menu li.vjs-menu-title {
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 1em;
+  line-height: 2em;
+  padding: 0;
+  margin: 0 0 0.3em 0;
+  font-weight: bold;
+  cursor: default;
+}
+
+.vjs-menu-button-popup .vjs-menu {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  width: 10em;
+  left: -3em;
+  height: 0em;
+  margin-bottom: 1.5em;
+  border-top-color: rgba(43, 51, 63, 0.7);
+}
+
+.vjs-pip-window .vjs-menu-button-popup .vjs-menu {
+  left: unset;
+  right: 1em;
+}
+
+.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  background-color: #2B333F;
+  background-color: rgba(43, 51, 63, 0.7);
+  position: absolute;
+  width: 100%;
+  bottom: 1.5em;
+  max-height: 15em;
+}
+
+.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 5em;
+}
+
+.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 10em;
+}
+
+.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 14em;
+}
+
+.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 25em;
+}
+
+.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu,
+.vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
+  display: block;
+}
+
+.video-js .vjs-menu-button-inline {
+  transition: all 0.4s;
+  overflow: hidden;
+}
+
+.video-js .vjs-menu-button-inline:before {
+  width: 2.222222222em;
+}
+
+.video-js .vjs-menu-button-inline:hover,
+.video-js .vjs-menu-button-inline:focus,
+.video-js .vjs-menu-button-inline.vjs-slider-active {
+  width: 12em;
+}
+
+.vjs-menu-button-inline .vjs-menu {
+  opacity: 0;
+  height: 100%;
+  width: auto;
+  position: absolute;
+  left: 4em;
+  top: 0;
+  padding: 0;
+  margin: 0;
+  transition: all 0.4s;
+}
+
+.vjs-menu-button-inline:hover .vjs-menu,
+.vjs-menu-button-inline:focus .vjs-menu,
+.vjs-menu-button-inline.vjs-slider-active .vjs-menu {
+  display: block;
+  opacity: 1;
+}
+
+.vjs-menu-button-inline .vjs-menu-content {
+  width: auto;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+.video-js .vjs-control-bar {
+  display: none;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3em;
+  background-color: #2B333F;
+  background-color: rgba(43, 51, 63, 0.7);
+}
+
+.video-js:not(.vjs-controls-disabled, .vjs-using-native-controls, .vjs-error) .vjs-control-bar.vjs-lock-showing {
+  display: flex !important;
+}
+
+.vjs-has-started .vjs-control-bar,
+.vjs-audio-only-mode .vjs-control-bar {
+  display: flex;
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0.1s, opacity 0.1s;
+}
+
+.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  visibility: visible;
+  opacity: 0;
+  pointer-events: none;
+  transition: visibility 1s, opacity 1s;
+}
+
+.vjs-controls-disabled .vjs-control-bar,
+.vjs-using-native-controls .vjs-control-bar,
+.vjs-error .vjs-control-bar {
+  display: none !important;
+}
+
+.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,
+.vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.video-js .vjs-control {
+  position: relative;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 4em;
+  flex: none;
+}
+
+.video-js .vjs-control.vjs-visible-text {
+  width: auto;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.vjs-button > .vjs-icon-placeholder:before {
+  font-size: 1.8em;
+  line-height: 1.67;
+}
+
+.vjs-button > .vjs-icon-placeholder {
+  display: block;
+}
+
+.vjs-button > .vjs-svg-icon {
+  display: inline-block;
+}
+
+.video-js .vjs-control:focus:before,
+.video-js .vjs-control:hover:before,
+.video-js .vjs-control:focus {
+  text-shadow: 0em 0em 1em white;
+}
+
+.video-js *:not(.vjs-visible-text) > .vjs-control-text {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.video-js .vjs-custom-control-spacer {
+  display: none;
+}
+
+.video-js .vjs-progress-control {
+  cursor: pointer;
+  flex: auto;
+  display: flex;
+  align-items: center;
+  min-width: 4em;
+  touch-action: none;
+}
+
+.video-js .vjs-progress-control.disabled {
+  cursor: default;
+}
+
+.vjs-live .vjs-progress-control {
+  display: none;
+}
+
+.vjs-liveui .vjs-progress-control {
+  display: flex;
+  align-items: center;
+}
+
+.video-js .vjs-progress-holder {
+  flex: auto;
+  transition: all 0.2s;
+  height: 0.3em;
+}
+
+.video-js .vjs-progress-control .vjs-progress-holder {
+  margin: 0 10px;
+}
+
+.video-js .vjs-progress-control:hover .vjs-progress-holder {
+  font-size: 1.6666666667em;
+}
+
+.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {
+  font-size: 1em;
+}
+
+.video-js .vjs-progress-holder .vjs-play-progress,
+.video-js .vjs-progress-holder .vjs-load-progress,
+.video-js .vjs-progress-holder .vjs-load-progress div {
+  position: absolute;
+  display: block;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 0;
+}
+
+.video-js .vjs-play-progress {
+  background-color: #fff;
+}
+.video-js .vjs-play-progress:before {
+  font-size: 0.9em;
+  position: absolute;
+  right: -0.5em;
+  line-height: 0.35em;
+  z-index: 1;
+}
+
+.vjs-svg-icons-enabled .vjs-play-progress:before {
+  content: none !important;
+}
+
+.vjs-play-progress .vjs-svg-icon {
+  position: absolute;
+  top: -0.35em;
+  right: -0.4em;
+  width: 0.9em;
+  height: 0.9em;
+  pointer-events: none;
+  line-height: 0.15em;
+  z-index: 1;
+}
+
+.video-js .vjs-load-progress {
+  background: rgba(115, 133, 159, 0.5);
+}
+
+.video-js .vjs-load-progress div {
+  background: rgba(115, 133, 159, 0.75);
+}
+
+.video-js .vjs-time-tooltip {
+  background-color: #fff;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 0.3em;
+  color: #000;
+  float: right;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1em;
+  padding: 6px 8px 8px 8px;
+  pointer-events: none;
+  position: absolute;
+  top: -3.4em;
+  visibility: hidden;
+  z-index: 1;
+}
+
+.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
+  display: none;
+}
+
+.video-js .vjs-progress-control:hover .vjs-time-tooltip,
+.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
+  display: block;
+  font-size: 0.6em;
+  visibility: visible;
+}
+
+.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip {
+  font-size: 1em;
+}
+
+.video-js .vjs-progress-control .vjs-mouse-display {
+  display: none;
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  background-color: #000;
+  z-index: 1;
+}
+
+.video-js .vjs-progress-control:hover .vjs-mouse-display {
+  display: block;
+}
+
+.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 1s, opacity 1s;
+}
+
+.vjs-mouse-display .vjs-time-tooltip {
+  color: #fff;
+  background-color: #000;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.video-js .vjs-slider {
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+  margin: 0 0.45em 0 0.45em;
+  /* iOS Safari */
+  -webkit-touch-callout: none;
+  /* Safari, and Chrome 53 */
+  -webkit-user-select: none;
+  /* Non-prefixed version, currently supported by Chrome and Opera */
+  -moz-user-select: none;
+       user-select: none;
+  background-color: #73859f;
+  background-color: rgba(115, 133, 159, 0.5);
+}
+
+.video-js .vjs-slider.disabled {
+  cursor: default;
+}
+
+.video-js .vjs-slider:focus {
+  text-shadow: 0em 0em 1em white;
+  box-shadow: 0 0 1em #fff;
+}
+
+.video-js .vjs-mute-control {
+  cursor: pointer;
+  flex: none;
+}
+.video-js .vjs-volume-control {
+  cursor: pointer;
+  margin-right: 1em;
+  display: flex;
+}
+
+.video-js .vjs-volume-control.vjs-volume-horizontal {
+  width: 5em;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control {
+  visibility: visible;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin-left: -1px;
+}
+
+.video-js .vjs-volume-panel {
+  transition: width 1s;
+}
+.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control, .video-js .vjs-volume-panel:active .vjs-volume-control, .video-js .vjs-volume-panel:focus .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control:active, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active {
+  visibility: visible;
+  opacity: 1;
+  position: relative;
+  transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
+}
+.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
+  width: 5em;
+  height: 3em;
+  margin-right: 0;
+}
+.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
+  left: -3.5em;
+  transition: left 0s;
+}
+.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
+  width: 10em;
+  transition: width 0.1s;
+}
+.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
+  width: 4em;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
+  height: 8em;
+  width: 3em;
+  left: -3000em;
+  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
+  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
+}
+
+.video-js .vjs-volume-panel {
+  display: flex;
+}
+
+.video-js .vjs-volume-bar {
+  margin: 1.35em 0.45em;
+}
+
+.vjs-volume-bar.vjs-slider-horizontal {
+  width: 5em;
+  height: 0.3em;
+}
+
+.vjs-volume-bar.vjs-slider-vertical {
+  width: 0.3em;
+  height: 5em;
+  margin: 1.35em auto;
+}
+
+.video-js .vjs-volume-level {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background-color: #fff;
+}
+.video-js .vjs-volume-level:before {
+  position: absolute;
+  font-size: 0.9em;
+  z-index: 1;
+}
+
+.vjs-slider-vertical .vjs-volume-level {
+  width: 0.3em;
+}
+.vjs-slider-vertical .vjs-volume-level:before {
+  top: -0.5em;
+  left: -0.3em;
+  z-index: 1;
+}
+
+.vjs-svg-icons-enabled .vjs-volume-level:before {
+  content: none;
+}
+
+.vjs-volume-level .vjs-svg-icon {
+  position: absolute;
+  width: 0.9em;
+  height: 0.9em;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.vjs-slider-horizontal .vjs-volume-level {
+  height: 0.3em;
+}
+.vjs-slider-horizontal .vjs-volume-level:before {
+  line-height: 0.35em;
+  right: -0.5em;
+}
+
+.vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon {
+  right: -0.3em;
+  transform: translateY(-50%);
+}
+
+.vjs-slider-vertical .vjs-volume-level .vjs-svg-icon {
+  top: -0.55em;
+  transform: translateX(-50%);
+}
+
+.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
+  width: 4em;
+}
+
+.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
+  height: 100%;
+}
+
+.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
+  width: 100%;
+}
+
+.video-js .vjs-volume-vertical {
+  width: 3em;
+  height: 8em;
+  bottom: 8em;
+  background-color: #2B333F;
+  background-color: rgba(43, 51, 63, 0.7);
+}
+
+.video-js .vjs-volume-horizontal .vjs-menu {
+  left: -2em;
+}
+
+.video-js .vjs-volume-tooltip {
+  background-color: #fff;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 0.3em;
+  color: #000;
+  float: right;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1em;
+  padding: 6px 8px 8px 8px;
+  pointer-events: none;
+  position: absolute;
+  top: -3.4em;
+  visibility: hidden;
+  z-index: 1;
+}
+
+.video-js .vjs-volume-control:hover .vjs-volume-tooltip,
+.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
+  display: block;
+  font-size: 1em;
+  visibility: visible;
+}
+
+.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip,
+.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
+  left: 1em;
+  top: -12px;
+}
+
+.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip {
+  font-size: 1em;
+}
+
+.video-js .vjs-volume-control .vjs-mouse-display {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  background-color: #000;
+  z-index: 1;
+}
+
+.video-js .vjs-volume-horizontal .vjs-mouse-display {
+  width: 1px;
+  height: 100%;
+}
+
+.video-js .vjs-volume-control:hover .vjs-mouse-display {
+  display: block;
+}
+
+.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 1s, opacity 1s;
+}
+
+.vjs-mouse-display .vjs-volume-tooltip {
+  color: #fff;
+  background-color: #000;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.vjs-poster {
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+}
+
+.vjs-has-started .vjs-poster,
+.vjs-using-native-controls .vjs-poster {
+  display: none;
+}
+
+.vjs-audio.vjs-has-started .vjs-poster,
+.vjs-has-started.vjs-audio-poster-mode .vjs-poster,
+.vjs-pip-container.vjs-has-started .vjs-poster {
+  display: block;
+}
+
+.vjs-poster img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.video-js .vjs-live-control {
+  display: flex;
+  align-items: flex-start;
+  flex: auto;
+  font-size: 1em;
+  line-height: 3em;
+}
+
+.video-js:not(.vjs-live) .vjs-live-control,
+.video-js.vjs-liveui .vjs-live-control {
+  display: none;
+}
+
+.video-js .vjs-seek-to-live-control {
+  align-items: center;
+  cursor: pointer;
+  flex: none;
+  display: inline-flex;
+  height: 100%;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  font-size: 1em;
+  line-height: 3em;
+  width: auto;
+  min-width: 4em;
+}
+
+.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,
+.video-js:not(.vjs-live) .vjs-seek-to-live-control {
+  display: none;
+}
+
+.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge {
+  cursor: auto;
+}
+
+.vjs-seek-to-live-control .vjs-icon-placeholder {
+  margin-right: 0.5em;
+  color: #888;
+}
+
+.vjs-svg-icons-enabled .vjs-seek-to-live-control {
+  line-height: 0;
+}
+
+.vjs-seek-to-live-control .vjs-svg-icon {
+  width: 1em;
+  height: 1em;
+  pointer-events: none;
+  fill: #888888;
+}
+
+.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
+  color: red;
+}
+
+.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-svg-icon {
+  fill: red;
+}
+
+.video-js .vjs-time-control {
+  flex: none;
+  font-size: 1em;
+  line-height: 3em;
+  min-width: 2em;
+  width: auto;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.vjs-live .vjs-time-control,
+.vjs-live .vjs-time-divider,
+.video-js .vjs-current-time,
+.video-js .vjs-duration {
+  display: none;
+}
+
+.vjs-time-divider {
+  display: none;
+  line-height: 3em;
+}
+
+.video-js .vjs-play-control {
+  cursor: pointer;
+}
+
+.video-js .vjs-play-control .vjs-icon-placeholder {
+  flex: none;
+}
+
+.vjs-text-track-display {
+  position: absolute;
+  bottom: 3em;
+  left: 0;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+}
+
+.vjs-error .vjs-text-track-display {
+  display: none;
+}
+
+.video-js.vjs-controls-disabled .vjs-text-track-display,
+.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
+  bottom: 1em;
+}
+
+.video-js .vjs-text-track {
+  font-size: 1.4em;
+  text-align: center;
+  margin-bottom: 0.1em;
+}
+
+.vjs-subtitles {
+  color: #fff;
+}
+
+.vjs-captions {
+  color: #fc6;
+}
+
+.vjs-tt-cue {
+  display: block;
+}
+
+video::-webkit-media-text-track-display {
+  transform: translateY(-3em);
+}
+
+.video-js.vjs-controls-disabled video::-webkit-media-text-track-display,
+.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
+  transform: translateY(-1.5em);
+}
+
+.video-js.vjs-force-center-align-cues .vjs-text-track-cue {
+  text-align: center !important;
+  width: 80% !important;
+}
+
+.video-js .vjs-picture-in-picture-control {
+  cursor: pointer;
+  flex: none;
+}
+.video-js.vjs-audio-only-mode .vjs-picture-in-picture-control,
+.vjs-pip-window .vjs-picture-in-picture-control {
+  display: none;
+}
+
+.video-js .vjs-fullscreen-control {
+  cursor: pointer;
+  flex: none;
+}
+.video-js.vjs-audio-only-mode .vjs-fullscreen-control,
+.vjs-pip-window .vjs-fullscreen-control {
+  display: none;
+}
+
+.vjs-playback-rate > .vjs-menu-button,
+.vjs-playback-rate .vjs-playback-rate-value {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.vjs-playback-rate .vjs-playback-rate-value {
+  pointer-events: none;
+  font-size: 1.5em;
+  line-height: 2;
+  text-align: center;
+}
+
+.vjs-playback-rate .vjs-menu {
+  width: 4em;
+  left: 0em;
+}
+
+.vjs-error .vjs-error-display .vjs-modal-dialog-content {
+  font-size: 1.4em;
+  text-align: center;
+}
+
+.vjs-loading-spinner {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0.85;
+  text-align: left;
+  border: 0.6em solid rgba(43, 51, 63, 0.7);
+  box-sizing: border-box;
+  background-clip: padding-box;
+  width: 5em;
+  height: 5em;
+  border-radius: 50%;
+  visibility: hidden;
+}
+
+.vjs-seeking .vjs-loading-spinner,
+.vjs-waiting .vjs-loading-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: vjs-spinner-show 0s linear 0.3s forwards;
+}
+
+.vjs-error .vjs-loading-spinner {
+  display: none;
+}
+
+.vjs-loading-spinner:before,
+.vjs-loading-spinner:after {
+  content: "";
+  position: absolute;
+  box-sizing: inherit;
+  width: inherit;
+  height: inherit;
+  border-radius: inherit;
+  opacity: 1;
+  border: inherit;
+  border-color: transparent;
+  border-top-color: white;
+}
+
+.vjs-seeking .vjs-loading-spinner:before,
+.vjs-seeking .vjs-loading-spinner:after,
+.vjs-waiting .vjs-loading-spinner:before,
+.vjs-waiting .vjs-loading-spinner:after {
+  animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
+}
+
+.vjs-seeking .vjs-loading-spinner:before,
+.vjs-waiting .vjs-loading-spinner:before {
+  border-top-color: rgb(255, 255, 255);
+}
+
+.vjs-seeking .vjs-loading-spinner:after,
+.vjs-waiting .vjs-loading-spinner:after {
+  border-top-color: rgb(255, 255, 255);
+  animation-delay: 0.44s;
+}
+
+@keyframes vjs-spinner-show {
+  to {
+    visibility: visible;
+  }
+}
+@keyframes vjs-spinner-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes vjs-spinner-fade {
+  0% {
+    border-top-color: #73859f;
+  }
+  20% {
+    border-top-color: #73859f;
+  }
+  35% {
+    border-top-color: white;
+  }
+  60% {
+    border-top-color: #73859f;
+  }
+  100% {
+    border-top-color: #73859f;
+  }
+}
+.video-js.vjs-audio-only-mode .vjs-captions-button {
+  display: none;
+}
+
+.vjs-chapters-button .vjs-menu ul {
+  width: 24em;
+}
+
+.video-js.vjs-audio-only-mode .vjs-descriptions-button {
+  display: none;
+}
+
+.vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-svg-icon {
+  width: 1.5em;
+  height: 1.5em;
+}
+
+.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
+  vertical-align: middle;
+  display: inline-block;
+  margin-bottom: -0.1em;
+}
+
+.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
+  font-family: VideoJS;
+  content: "\f10c";
+  font-size: 1.5em;
+  line-height: inherit;
+}
+
+.video-js.vjs-audio-only-mode .vjs-subs-caps-button {
+  display: none;
+}
+
+.video-js .vjs-audio-button + .vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder,
+.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
+  vertical-align: middle;
+  display: inline-block;
+  margin-bottom: -0.1em;
+}
+
+.video-js .vjs-audio-button + .vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before,
+.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
+  font-family: VideoJS;
+  content: " \f12e";
+  font-size: 1.5em;
+  line-height: inherit;
+}
+
+.video-js.vjs-layout-small .vjs-current-time,
+.video-js.vjs-layout-small .vjs-time-divider,
+.video-js.vjs-layout-small .vjs-duration,
+.video-js.vjs-layout-small .vjs-remaining-time,
+.video-js.vjs-layout-small .vjs-playback-rate,
+.video-js.vjs-layout-small .vjs-volume-control, .video-js.vjs-layout-x-small .vjs-current-time,
+.video-js.vjs-layout-x-small .vjs-time-divider,
+.video-js.vjs-layout-x-small .vjs-duration,
+.video-js.vjs-layout-x-small .vjs-remaining-time,
+.video-js.vjs-layout-x-small .vjs-playback-rate,
+.video-js.vjs-layout-x-small .vjs-volume-control, .video-js.vjs-layout-tiny .vjs-current-time,
+.video-js.vjs-layout-tiny .vjs-time-divider,
+.video-js.vjs-layout-tiny .vjs-duration,
+.video-js.vjs-layout-tiny .vjs-remaining-time,
+.video-js.vjs-layout-tiny .vjs-playback-rate,
+.video-js.vjs-layout-tiny .vjs-volume-control {
+  display: none;
+}
+.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover {
+  width: auto;
+  width: initial;
+}
+.video-js.vjs-layout-x-small .vjs-progress-control, .video-js.vjs-layout-tiny .vjs-progress-control {
+  display: none;
+}
+.video-js.vjs-layout-x-small .vjs-custom-control-spacer {
+  flex: auto;
+  display: block;
+}
+
+.vjs-modal-dialog.vjs-text-track-settings {
+  background-color: #2B333F;
+  background-color: rgba(43, 51, 63, 0.75);
+  color: #fff;
+  height: 70%;
+}
+
+.vjs-error .vjs-text-track-settings {
+  display: none;
+}
+
+.vjs-text-track-settings .vjs-modal-dialog-content {
+  display: table;
+}
+
+.vjs-text-track-settings .vjs-track-settings-colors,
+.vjs-text-track-settings .vjs-track-settings-font,
+.vjs-text-track-settings .vjs-track-settings-controls {
+  display: table-cell;
+}
+
+.vjs-text-track-settings .vjs-track-settings-controls {
+  text-align: right;
+  vertical-align: bottom;
+}
+
+@supports (display: grid) {
+  .vjs-text-track-settings .vjs-modal-dialog-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    padding: 20px 24px 0px 24px;
+  }
+  .vjs-track-settings-controls .vjs-default-button {
+    margin-bottom: 20px;
+  }
+  .vjs-text-track-settings .vjs-track-settings-controls {
+    grid-column: 1/-1;
+  }
+  .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,
+  .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content,
+  .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content {
+    grid-template-columns: 1fr;
+  }
+}
+.vjs-text-track-settings select {
+  font-size: inherit;
+}
+
+.vjs-track-setting > select {
+  margin-right: 1em;
+  margin-bottom: 0.5em;
+}
+
+.vjs-text-track-settings fieldset {
+  margin: 10px;
+  border: none;
+}
+
+.vjs-text-track-settings fieldset span {
+  display: inline-block;
+  padding: 0 0.6em 0.8em;
+}
+
+.vjs-text-track-settings fieldset span > select {
+  max-width: 7.3em;
+}
+
+.vjs-text-track-settings legend {
+  color: #fff;
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+.vjs-text-track-settings .vjs-label {
+  margin: 0 0.5em 0.5em 0;
+}
+
+.vjs-track-settings-controls button:focus,
+.vjs-track-settings-controls button:active {
+  outline-style: solid;
+  outline-width: medium;
+  background-image: linear-gradient(0deg, #fff 88%, #73859f 100%);
+}
+
+.vjs-track-settings-controls button:hover {
+  color: rgba(43, 51, 63, 0.75);
+}
+
+.vjs-track-settings-controls button {
+  background-color: #fff;
+  background-image: linear-gradient(-180deg, #fff 88%, #73859f 100%);
+  color: #2B333F;
+  cursor: pointer;
+  border-radius: 2px;
+}
+
+.vjs-track-settings-controls .vjs-default-button {
+  margin-right: 1em;
+}
+
+.vjs-title-bar {
+  background: rgba(0, 0, 0, 0.9);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0) 100%);
+  font-size: 1.2em;
+  line-height: 1.5;
+  transition: opacity 0.1s;
+  padding: 0.666em 1.333em 4em;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.vjs-error .vjs-title-bar {
+  display: none;
+}
+
+.vjs-title-bar-title,
+.vjs-title-bar-description {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vjs-title-bar-title {
+  font-weight: bold;
+  margin-bottom: 0.333em;
+}
+
+.vjs-playing.vjs-user-inactive .vjs-title-bar {
+  opacity: 0;
+  transition: opacity 1s;
+}
+
+.video-js .vjs-skip-forward-5 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-forward-10 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-forward-30 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-backward-5 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-backward-10 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-backward-30 {
+  cursor: pointer;
+}
+@media print {
+  .video-js > *:not(.vjs-tech):not(.vjs-poster) {
+    visibility: hidden;
+  }
+}
+.vjs-resize-manager {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: -1000;
+}
+
+.js-focus-visible .video-js *:focus:not(.focus-visible) {
+  outline: none;
+}
+
+.video-js *:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/priv/static/video.js/alt/video-js-cdn.min.css b/priv/static/video.js/alt/video-js-cdn.min.css
new file mode 100644
index 0000000..36b8b2d
--- /dev/null
+++ b/priv/static/video.js/alt/video-js-cdn.min.css
@@ -0,0 +1 @@
+.vjs-svg-icon{display:inline-block;background-repeat:no-repeat;background-position:center;fill:currentColor;height:1.8em;width:1.8em}.vjs-svg-icon:before{content:none!important}.vjs-control:focus .vjs-svg-icon,.vjs-svg-icon:hover{filter:drop-shadow(0 0 .25em #fff)}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-modal-dialog,.vjs-button>.vjs-icon-placeholder:before,.vjs-modal-dialog .vjs-modal-dialog-content{position:absolute;top:0;left:0;width:100%;height:100%}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.vjs-button>.vjs-icon-placeholder:before{text-align:center}@font-face{font-family:VideoJS;src:url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABUgAAsAAAAAItAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV33Y21hcAAAAYQAAAEJAAAD5p42+VxnbHlmAAACkAAADwwAABdk9R/WHmhlYWQAABGcAAAAKwAAADYn8kSnaGhlYQAAEcgAAAAdAAAAJA+RCL1obXR4AAAR6AAAABMAAAC8Q44AAGxvY2EAABH8AAAAYAAAAGB7SIHGbWF4cAAAElwAAAAfAAAAIAFAAI9uYW1lAAASfAAAASUAAAIK1cf1oHBvc3QAABOkAAABfAAAAnXdFqh1eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGR7xDiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGPHcRdyA4RZgQRADbZCycAAHic7dPXbcMwAEXRK1vuvffem749XAbKV3bjBA6fXsaIgMMLEWoQJaAEFKNnlELyQ4K27zib5PNF6vl8yld+TKr5kH0+cUw0xv00Hwvx2DResUyFKrV4XoMmLdp06NKjz4AhI8ZMmDJjzoIlK9Zs2LJjz4EjJ85cuHLjziPe/0UWL17mf2tqKLz/9jK9f8tXpGCoRdPKhtS0RqFkWvVQNtSKoVYNtWaoddPXEBqG2jQ9XWgZattQO4baNdSeofYNdWCoQ0MdGerYUCeGOjXUmaHODXVhqEtDXRnq2lA3hro11J2h7g31YKhHQz0Z6tlQL4Z6NdSbod4N9WGoT9MfHF6GmhnZLxyDcRMAAAB4nJ1YC1gUV5auc6urCmxEGrq6VRD6ATQP5dHPKK8GRIyoKApoEBUDAiGzGmdUfKNRM4qLZrUZdGKcGN/GZJKd0SyOWTbfbmZ2NxqzM5IxRtNZd78vwYlJdtREoO7sudVNq6PmmxmKqrqPU+eee173P80Bh39Cu9DOEY4DHZBK3i20D/QRLcfxbE5sEVtwLpZzclw4ibFIkSCJUcZ4MBpMnnzwuKNsGWBL5i3qy6kO2dVpvUpKbkAP9fq62rdeGJ+TM/7C1nbIutfuWrWk5ci4zMxxR1qW/N+9JsmCGXj9VKWhFx/6tr/nz78INDm2C9yPF/fDcxLuyKxLBZ1ZBz2QTi+RSkiH5RrDQJ/GgGQadX9m0YSURs7GpSG905Zsk41uj14yul1OtieZ7QUk5GRG/YiS7PYYPSAZNRed9sq3+bOpz00rKb7pe/ZEZvbALxZAHT3AFoH8GXP3rt67QFn40kt8W13FjLTDb48c+fSi5/7h0P4dL5yz7DPtbmgmYxfQA9RL2+EOfTcvdp+1vmuBpvOll1As1S6ak0IvJzC7sKWJFtJgBd2uWcg+0Zyg7dzQfhcjXRgXGZRf5/a4A58IDU777Nl252AUk4m2ByRRjqTNqIDCEJeAnU3iCFwrkrNwXEzg4yFevBwypzxkcX+AIfk3VEKl3XmWbT8788SzvpvFJaiOezL6QyuSr9VNf97csNu0z3LuhR0wATUxZAfVBwVOy+nQFhxYdWaXlXe4HC4zWGWzzsrLDtmhI9pOWOHv7PTT7XybH1Z0+v2d5Abd3kmG+TsH23CS/KwTxx/JkzEwx6jcQOUc42LLwHJ/J93uZ9ygh3HuZGwqsY9dWDHQ58dxNqyqKRQTYdxwTubiOSs3FiMDkq0WSZQgCT0GBDOg2lxOAd1FlPVGs4AKBAcYHHaP2wPkHaivmLF5zYqnIZrvcHx5gN4k/6tchNW1DtdgNL2KrxEkS/kfnIHoVnp1VjmjpTf5r0lTzLj0mdS28tX+XGorU364eMPmnWVl8J36nlKGw3CZhjEiuMw8h8mKvhGD+4/lElBWjAhLJMg6fTw4zPZ8cOmcGQBm2Qxml1nAm13CpYGq1JKUlJJUzQn1PTAO0mgv6VMMpA/DuRfSWEu4lDIxdbAtdWIKvnn2Vk766CWfz9fpY0sH/UpdP50rfszaVpdVRmvIejEdLMk45s4Bu0EWHjeOySmFyZSiMahvZdNSn29peoI/YexYfKQTLeurTXXwEVLeSfInTWHkkMaeUx7sBvOCSTSj3AlcKjfueyS36tCrXDlgRtF0etFq9jhc1kfKuBT/OwMr0F4UUTTh1AN0g20+H/ScPcsIEsYu9d/zN5PmjprPtNwI1ZZcDK6iC97Mcjp2y2aX36f+QbpGHrgRuHlXJ+Zf6PFRL2uQSp8vxHeF2IoRb8Rd2rhMzsNxSRmEuKK4JFnkojhMcx6jzqHzGMGFcW+MhBj0bhf6cowN+45I4LHvwT6fteu7M42wGRI/pxcg6/MZdEvt1U1XaulHFXuLmqov/MukvRVL35/b3ODM1+4aPjtzeK7zmUkV2h3DN54HaQ9GzJvxHRb6Ks2gB81fwqraT+A7GvZJrRLRofU6G0urNL+zFw3v0FaVDFxsKEZW56F31r6ip6vOL+FCObBPuIMRiXld9RaMdLzRIOGhPey2T9vA/35DmZPK9IWaT9d/WgOGMieYqJ/dzjLIhZU118gbysxrNUGefxD6UO/hyNNllpFTOIbx32kSFQctnweV5PxTMHLjRqiAN+fQE9gL+Xy5WB6MOS4GJJuYbDUHhcKDhHGRbLzOpjsjdM1+iwAZLGeieehACX2hhI7SjK/ZUTNrvVje31TxJiFBGYViWFkCn9PMeX9fS6qVbzfCj4fOCTzDnuWy2c4xA7mdNkA3RS9FH2VeqzdCBlixxbzXjvkHU1I8BOYFb1pZvPIHSSIj4svT8xpzcxtXN+ZKyjdDvbz08niiF3PqV9Tn5NST8vg48MTaY8E5xqSSIsWoWHo+LtAzxdH/GDUyp37CBEYfso04F/NlMTcDJUTpECLY0HFGQHImE8xsEUdgnrQlixIvGhJA1BvxpDHGxEMBYFeNOHcBJlSjwe2JcSfbBEsGOPPBHg/6SBBOCsLLw0SpUxod0Z1bFMfLkbQ3UiZxEyd0Dx8t+SRBu18Q9msFbI4e3p1THEfkSEh7kEJ5orR10qTWDvbgPWn5aWvCYyOAjwgXyjJi34uMjo58L25cmRAeQZWI2PA1QQLsPESAH8WGFwZZ4SPoR73BHPzIPMJj9AreBzKUmrH4todT18ANvi1oc3YGjUT/0j+ExUwq8PI9BLaCQIpvewwYu2evAG/Vo/5avPdY7o+BemLLXw3y+AdkzP9bpIxB1wm5EYq8fesHbPEPtm6HrHvtx4jcGPR8fDDpkZBefIjB46QnlUNRltv4Z/pO/J6dxEjhYAtmoMeq+GozvUVvNYOW3m6GCIhoprcfr97B8AcIQYsfD8ljUvGNjvkrpj0ETA48ZMIxCeqsRIsQALE0gi2GB+glSOfbOjW3GSBM9yPq8/rpJXrJDz0BPxV6xdN4uiCGDQed3WhgFkBUZEFsmeyyBpzXrm7UGTBZG8Lh5aubFufk5eUsbrrFGr7McYdbltxa0nKYqRKbQjvikXYkTGM0f2xuyM3Ly21oXnWfvf6I1BmZwfh7EWWIYsg2nHhsDhOnczhJcmI6eBAmy3jZ3RiJmKQR/JA99FcwsfaVbNDDyi1rL9NPj9hfo61wjM6BjzOLijLpeTgk/pL+ip6tfYWupzeOgPny2tcUu9J/9mhxJlgyi985NFRbvCVewXUNXLJaW0RxZqtRYtnfYdcYomXQWdnJHQA3jiEEkeTQWcWxdDP9IvvVWvo2TK553XEMEq+s69/QDU1Q7p0zxwsm9qS379whr8NI2PJqLUyGyfNeX3eFfnJU2U+uHR9cVV1IqgurqwuV44XVp0h2qN55X5XJwtk59yP0IZuHrqBOBIuIYhkcoT6Kx79Pu2HS/IPZIMOqLWs/pteOOk4NPgEb6QAIdAPsyZk5Mwd+wVaHMexJv719W7xCu2l37UG6lvYdBcvHa08p89741zd63phTRGqL5ggo6SlvdbWXzCqsPq78NnSu7wnKy2HNZbVoRCI7UJEOyRj+sPE002tOOY7Qa5fXboFWkLNeqYUSZRocp9XwSUZxcQZ9Hw6LV2pOoVmvHQEDbGIENEG5i6bLgMSM4n8+FNLTtAds99DaWEvgcf4o5SyYe9x+kF6/tGoTPAdRmS/XQIEy//QxKC2oqioAI3tS5auvxCtzT6y6RK8fhChYcwCJaMJhxc0vqSxQ/qmgsrKAlBZUHlauheTpvd9uj5DnLzJct6qfq5fXbYHVIGcfrIVJihbaVLu1wW7Vbs8zK0A8e9Jvb91S9cVMjPrazD6gpfeZTXzYbCFMcppVRsGMpp55OWgx1/3JeAxW1Y7AORgM/m3rWrsdLkQVmEVSU16cX/e7uvkvpqRiQsG06XJ0t64Tf+l0nG1dt025gyOIZlvq5u9KSU1N2TW/rsWnnMRPyTDkctbhvIcNvYIXWyLzdwYLoYesUbaQG4iK2cWO2gdpeUYLqDD0MUTOPhDIGnZEs58yArR86FznuWEsU4YDi2x26dA4klkn8Qa6vhk2QUfX4Jxm/ngX9r7ogn1dmlmwqZmuhxtdg9XN/DEcUgqb+9hMyNansfaQET2mcROCmGEMVqxm5u+h6kN2MOwgqykV2wH9yQG9DvVFU38Pogaf4FVuE62KI/oJ02RDdWW2w5dqQwU/8+N1q1DlvsL863u61KLE7x/o8w0VJQM/Y/SQ3unIrqxueEa1BqT5VFNsO7p39/UC771a77RowpaKe9nvJQIT1Pog5LGx8XblBKmCNGTf3xMogAQvPnz9PYKX/08sVDTG1OKUlOLUgS/UaZtm1NAaYTsl7i9ZQ+L6O4Rl0OGa577LuWvc+C+x96/vYh0lLBuM+7XwI/dTLtdT7v4d6rRTWDnku0IBrqFnZ5bVIqKP8lasJlithWnaLhTsr8qFJBulF/70p4undou36HeTJ5+jv1fCybeQ8nH3+Xv6aENczmOFlab+hqMDg1rLOt12A+tiUFrYDwQ6c3RUJp601nzegTNX6WlYAI2zSUV945F6zU56ZmZVQaWspWcIADxJ9GmljQUnL2p2Dpr5T8H+5KJFu+vqBq8qvyHRzStLHPEO5SPYCV9nZe0yZT2RcH0oHvegSzNEJ0oGWU8iQWM12dgPEugngVceGIwZgPFp0BiT1a0a3R5Rcot7ihfA1J/20v96jX7zmTX9s583H0kwx6WnLd09cXrR9LGroOa9sHNbdyz8wcKk5lqhaVFJZNwmqtw884MXNdvJujpBa3xzuSaZH9sxa06Z7x+HJSduPbdYHv/DgmEhfbehvlmGN7JUkcG78GDM12CeyFFTPNqVeNxC1gzjz+c2nVo63Xxs8rKJWXoBJM0tmEbfGm4qzpoOH3xpzQfyxLzW1gnE9NHo6tol1eMEic4ZVPrjnVi0kqAe2sQ2bgqupScaq8WGlUWgWHI51SKJl/UYT6zccNsCSkBtiVZLsiefuFSDYT3Fi8Zk7EUnmjTRYtsFeuDDJS05MW79M3mr3mla+d8dzac31KTPmBYfFiYSUef48PhPjm9ryZsSGZZkdNvzq0Y9rdNcwDq5Dg5C3QW+7UN64IKptvS3tvHbvu5c9pv1Exau21rc9LIpwpQwUjTq8576yeVDz5+4WZ1nXT43wV60rPLJbDp/UksNrP3iQ2SA63Pst058gOYDbhRnRUw8l/sRt4HbxPzO4WYpInCpuVgSbVh6JXuwnnJngKTTCwaPWmG5Xbhpm1U0Yt3FyBGpGYemPM77p2TD904JjgJ2QFpFLeYpGx8X15Qx1Zk31p5ki9ZLUuXE0lmuJlcakJMVLeFS1iIvrB8drY0aloilakqCZwzwRORtxlgwxS4IThggJd4TDxoiaAIT80fFPGrCPPru+puFn504P/ybr4ihA/6dKASLshEJic7xE8tmzu3KzA7TABBe8y5fNbWo3ilQn/SuFKM16b2l5bOeayqfGhYmhIulU+fVNDdWVv4NMzX10MBHyPR5uhWUu8D9P1VnIMt4nGNgZGBgAOJ/1bf64vltvjJwszOAwAOlmqvINEc/WJyDgQlEAQA+dgnjAHicY2BkYGBnAAGOPgaG//85+hkYGVCBPgBGJwNkAAAAeJxjYGBgYB/EmKMPtxwAhg4B0gAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAe4CLgKKAtAC/ANiA4wDqAPgBDAEsATaBQgFWgXABggGLgZwBqwG9gdOB4oH0ggqCHAIhgicCMgJJAlWCYgJrAnyCkAKdgrkC7J4nGNgZGBg0GdoZmBnAAEmIOYCQgaG/2A+AwAaqwHQAHicXZBNaoNAGIZfE5PQCKFQ2lUps2oXBfOzzAESyDKBQJdGR2NQR3QSSE/QE/QEPUUPUHqsvsrXjTMw83zPvPMNCuAWP3DQDAejdm1GjzwS7pMmwi75XngAD4/CQ/oX4TFe4Qt7uMMbOzjuDc0EmXCP/C7cJ38Iu+RP4QEe8CU8pP8WHmOPX2EPz87TPo202ey2OjlnQSXV/6arOjWFmvszMWtd6CqwOlKHq6ovycLaWMWVydXKFFZnmVFlZU46tP7R2nI5ncbi/dDkfDtFBA2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Yu6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxtkXlT2zAQxf1C4thJAwRajt4HRy8VMwwfSJHXsQZZcnUQ+PYoTtwpM+wf2t9brWZ2n5JBsol58nJcYYAdDDFCijEy5JhgileYYRd72MccBzjEa7zBEY5xglO8xTu8xwd8xCd8xhd8xTec4RwXuMR3/MBP/MJvMPzBFYpk2Cr+OF0fTEgrFI1aHhxN740KDbEmeJpsWZlVj40s+45aLuv9KijlhCXSjLQnu/d/4UH6sWul1mRzFxZeekUuE7z10mg3qMtM1FGQddPSrLQyvJR6OaukItYXDp6pCJrmz0umqkau5pZ2hFmm7m+ImG5W2t0kZoJXUtPhVnYTbbdOBdeCVGqpJe7XKTqSbRK7zbdwXfR0U+SVsStuS3Y76em6+Ic3xYiHUppc04Nn0lMzay3dSxNcp8auDlWlaCi48yetFD7Y9USsx87G45cuop1ZxQUtjLnL4j53FO0a+5X08UXqQ7NQNo92R0XOz7sxWEnxN2TneJI8Acttu4Q=) format("woff");font-weight:400;font-style:normal}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-play-control .vjs-icon-placeholder,.vjs-icon-play{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-play-control .vjs-icon-placeholder:before,.vjs-icon-play:before{content:"\f101"}.vjs-icon-play-circle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-play-circle:before{content:"\f102"}.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder,.vjs-icon-pause{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before,.vjs-icon-pause:before{content:"\f103"}.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder,.vjs-icon-volume-mute{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before,.vjs-icon-volume-mute:before{content:"\f104"}.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder,.vjs-icon-volume-low{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before,.vjs-icon-volume-low:before{content:"\f105"}.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder,.vjs-icon-volume-mid{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before,.vjs-icon-volume-mid:before{content:"\f106"}.video-js .vjs-mute-control .vjs-icon-placeholder,.vjs-icon-volume-high{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control .vjs-icon-placeholder:before,.vjs-icon-volume-high:before{content:"\f107"}.video-js .vjs-fullscreen-control .vjs-icon-placeholder,.vjs-icon-fullscreen-enter{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before,.vjs-icon-fullscreen-enter:before{content:"\f108"}.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder,.vjs-icon-fullscreen-exit{font-family:VideoJS;font-weight:400;font-style:normal}.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before,.vjs-icon-fullscreen-exit:before{content:"\f109"}.vjs-icon-spinner{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-spinner:before{content:"\f10a"}.video-js .vjs-subs-caps-button .vjs-icon-placeholder,.video-js .vjs-subtitles-button .vjs-icon-placeholder,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder,.vjs-icon-subtitles{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js .vjs-subtitles-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before,.vjs-icon-subtitles:before{content:"\f10b"}.video-js .vjs-captions-button .vjs-icon-placeholder,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder,.vjs-icon-captions{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-captions-button .vjs-icon-placeholder:before,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before,.vjs-icon-captions:before{content:"\f10c"}.vjs-icon-hd{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-hd:before{content:"\f10d"}.video-js .vjs-chapters-button .vjs-icon-placeholder,.vjs-icon-chapters{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-chapters-button .vjs-icon-placeholder:before,.vjs-icon-chapters:before{content:"\f10e"}.vjs-icon-downloading{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-downloading:before{content:"\f10f"}.vjs-icon-file-download{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-file-download:before{content:"\f110"}.vjs-icon-file-download-done{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-file-download-done:before{content:"\f111"}.vjs-icon-file-download-off{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-file-download-off:before{content:"\f112"}.vjs-icon-share{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-share:before{content:"\f113"}.vjs-icon-cog{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-cog:before{content:"\f114"}.vjs-icon-square{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-square:before{content:"\f115"}.video-js .vjs-play-progress,.video-js .vjs-volume-level,.vjs-icon-circle,.vjs-seek-to-live-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-progress:before,.video-js .vjs-volume-level:before,.vjs-icon-circle:before,.vjs-seek-to-live-control .vjs-icon-placeholder:before{content:"\f116"}.vjs-icon-circle-outline{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle-outline:before{content:"\f117"}.vjs-icon-circle-inner-circle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle-inner-circle:before{content:"\f118"}.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder,.vjs-icon-cancel{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before,.vjs-icon-cancel:before{content:"\f119"}.vjs-icon-repeat{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-repeat:before{content:"\f11a"}.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder,.vjs-icon-replay{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before,.vjs-icon-replay:before{content:"\f11b"}.video-js .vjs-skip-backward-5 .vjs-icon-placeholder,.vjs-icon-replay-5{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-backward-5 .vjs-icon-placeholder:before,.vjs-icon-replay-5:before{content:"\f11c"}.video-js .vjs-skip-backward-10 .vjs-icon-placeholder,.vjs-icon-replay-10{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-backward-10 .vjs-icon-placeholder:before,.vjs-icon-replay-10:before{content:"\f11d"}.video-js .vjs-skip-backward-30 .vjs-icon-placeholder,.vjs-icon-replay-30{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-backward-30 .vjs-icon-placeholder:before,.vjs-icon-replay-30:before{content:"\f11e"}.video-js .vjs-skip-forward-5 .vjs-icon-placeholder,.vjs-icon-forward-5{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-forward-5 .vjs-icon-placeholder:before,.vjs-icon-forward-5:before{content:"\f11f"}.video-js .vjs-skip-forward-10 .vjs-icon-placeholder,.vjs-icon-forward-10{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-forward-10 .vjs-icon-placeholder:before,.vjs-icon-forward-10:before{content:"\f120"}.video-js .vjs-skip-forward-30 .vjs-icon-placeholder,.vjs-icon-forward-30{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-forward-30 .vjs-icon-placeholder:before,.vjs-icon-forward-30:before{content:"\f121"}.video-js .vjs-audio-button .vjs-icon-placeholder,.vjs-icon-audio{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-audio-button .vjs-icon-placeholder:before,.vjs-icon-audio:before{content:"\f122"}.vjs-icon-next-item{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-next-item:before{content:"\f123"}.vjs-icon-previous-item{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-previous-item:before{content:"\f124"}.vjs-icon-shuffle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-shuffle:before{content:"\f125"}.vjs-icon-cast{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-cast:before{content:"\f126"}.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder,.vjs-icon-picture-in-picture-enter{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before,.vjs-icon-picture-in-picture-enter:before{content:"\f127"}.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder,.vjs-icon-picture-in-picture-exit{font-family:VideoJS;font-weight:400;font-style:normal}.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before,.vjs-icon-picture-in-picture-exit:before{content:"\f128"}.vjs-icon-facebook{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-facebook:before{content:"\f129"}.vjs-icon-linkedin{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-linkedin:before{content:"\f12a"}.vjs-icon-twitter{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-twitter:before{content:"\f12b"}.vjs-icon-tumblr{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-tumblr:before{content:"\f12c"}.vjs-icon-pinterest{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-pinterest:before{content:"\f12d"}.video-js .vjs-descriptions-button .vjs-icon-placeholder,.vjs-icon-audio-description{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-descriptions-button .vjs-icon-placeholder:before,.vjs-icon-audio-description:before{content:"\f12e"}.video-js{display:inline-block;vertical-align:top;box-sizing:border-box;color:#fff;background-color:#000;position:relative;padding:0;font-size:10px;line-height:1;font-weight:400;font-style:normal;font-family:Arial,Helvetica,sans-serif;word-break:initial}.video-js:-moz-full-screen{position:absolute}.video-js:-webkit-full-screen{width:100%!important;height:100%!important}.video-js[tabindex="-1"]{outline:0}.video-js *,.video-js :after,.video-js :before{box-sizing:inherit}.video-js ul{font-family:inherit;font-size:inherit;line-height:inherit;list-style-position:outside;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.video-js.vjs-1-1,.video-js.vjs-16-9,.video-js.vjs-4-3,.video-js.vjs-9-16,.video-js.vjs-fluid{width:100%;max-width:100%}.video-js.vjs-1-1:not(.vjs-audio-only-mode),.video-js.vjs-16-9:not(.vjs-audio-only-mode),.video-js.vjs-4-3:not(.vjs-audio-only-mode),.video-js.vjs-9-16:not(.vjs-audio-only-mode),.video-js.vjs-fluid:not(.vjs-audio-only-mode){height:0}.video-js.vjs-16-9:not(.vjs-audio-only-mode){padding-top:56.25%}.video-js.vjs-4-3:not(.vjs-audio-only-mode){padding-top:75%}.video-js.vjs-9-16:not(.vjs-audio-only-mode){padding-top:177.7777777778%}.video-js.vjs-1-1:not(.vjs-audio-only-mode){padding-top:100%}.video-js.vjs-fill:not(.vjs-audio-only-mode){width:100%;height:100%}.video-js .vjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.video-js.vjs-audio-only-mode .vjs-tech{display:none}body.vjs-full-window,body.vjs-pip-window{padding:0;margin:0;height:100%}.vjs-full-window .video-js.vjs-fullscreen,body.vjs-pip-window .video-js{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0}.video-js.vjs-fullscreen:not(.vjs-ios-native-fs),body.vjs-pip-window .video-js{width:100%!important;height:100%!important;padding-top:0!important;display:block}.video-js.vjs-fullscreen.vjs-user-inactive{cursor:none}.vjs-pip-container .vjs-pip-text{position:absolute;bottom:10%;font-size:2em;background-color:rgba(0,0,0,.7);padding:.5em;text-align:center;width:100%}.vjs-layout-small.vjs-pip-container .vjs-pip-text,.vjs-layout-tiny.vjs-pip-container .vjs-pip-text,.vjs-layout-x-small.vjs-pip-container .vjs-pip-text{bottom:0;font-size:1.4em}.vjs-hidden{display:none!important}.vjs-disabled{opacity:.5;cursor:default}.video-js .vjs-offscreen{height:1px;left:-9999px;position:absolute;top:0;width:1px}.vjs-lock-showing{display:block!important;opacity:1!important;visibility:visible!important}.vjs-no-js{padding:20px;color:#fff;background-color:#000;font-size:18px;font-family:Arial,Helvetica,sans-serif;text-align:center;width:300px;height:150px;margin:0 auto}.vjs-no-js a,.vjs-no-js a:visited{color:#66a8cc}.video-js .vjs-big-play-button{font-size:3em;line-height:1.5em;height:1.63332em;width:3em;display:block;position:absolute;top:50%;left:50%;padding:0;margin-top:-.81666em;margin-left:-1.5em;cursor:pointer;opacity:1;border:.06666em solid #fff;background-color:#2b333f;background-color:rgba(43,51,63,.7);border-radius:.3em;transition:all .4s}.vjs-big-play-button .vjs-svg-icon{width:1em;height:1em;position:absolute;top:50%;left:50%;line-height:1;transform:translate(-50%,-50%)}.video-js .vjs-big-play-button:focus,.video-js:hover .vjs-big-play-button{border-color:#fff;background-color:#73859f;background-color:rgba(115,133,159,.5);transition:all 0s}.vjs-controls-disabled .vjs-big-play-button,.vjs-error .vjs-big-play-button,.vjs-has-started .vjs-big-play-button,.vjs-using-native-controls .vjs-big-play-button{display:none}.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking,.vjs-scrubbing,.vjs-error) .vjs-big-play-button{display:block}.video-js button{background:0 0;border:none;color:inherit;display:inline-block;font-size:inherit;line-height:inherit;text-transform:none;text-decoration:none;transition:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vjs-control .vjs-button{width:100%;height:100%}.video-js .vjs-control.vjs-close-button{cursor:pointer;height:3em;position:absolute;right:0;top:.5em;z-index:2}.video-js .vjs-modal-dialog{background:rgba(0,0,0,.8);background:linear-gradient(180deg,rgba(0,0,0,.8),rgba(255,255,255,0));overflow:auto}.video-js .vjs-modal-dialog>*{box-sizing:border-box}.vjs-modal-dialog .vjs-modal-dialog-content{font-size:1.2em;line-height:1.5;padding:20px 24px;z-index:1}.vjs-menu-button{cursor:pointer}.vjs-menu-button.vjs-disabled{cursor:default}.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu{display:none}.vjs-menu .vjs-menu-content{display:block;padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;overflow:auto}.vjs-menu .vjs-menu-content>*{box-sizing:border-box}.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu{display:none}.vjs-menu li{display:flex;justify-content:center;list-style:none;margin:0;padding:.2em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.js-focus-visible .vjs-menu li.vjs-menu-item:hover,.vjs-menu li.vjs-menu-item:focus,.vjs-menu li.vjs-menu-item:hover{background-color:#73859f;background-color:rgba(115,133,159,.5)}.js-focus-visible .vjs-menu li.vjs-selected:hover,.vjs-menu li.vjs-selected,.vjs-menu li.vjs-selected:focus,.vjs-menu li.vjs-selected:hover{background-color:#fff;color:#2b333f}.js-focus-visible .vjs-menu li.vjs-selected:hover .vjs-svg-icon,.vjs-menu li.vjs-selected .vjs-svg-icon,.vjs-menu li.vjs-selected:focus .vjs-svg-icon,.vjs-menu li.vjs-selected:hover .vjs-svg-icon{fill:#000}.js-focus-visible .vjs-menu :not(.vjs-selected):focus:not(.focus-visible),.video-js .vjs-menu :not(.vjs-selected):focus:not(:focus-visible){background:0 0}.vjs-menu li.vjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em 0;font-weight:700;cursor:default}.vjs-menu-button-popup .vjs-menu{display:none;position:absolute;bottom:0;width:10em;left:-3em;height:0;margin-bottom:1.5em;border-top-color:rgba(43,51,63,.7)}.vjs-pip-window .vjs-menu-button-popup .vjs-menu{left:unset;right:1em}.vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:#2b333f;background-color:rgba(43,51,63,.7);position:absolute;width:100%;bottom:1.5em;max-height:15em}.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:5em}.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:10em}.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:14em}.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:25em}.vjs-menu-button-popup .vjs-menu.vjs-lock-showing,.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu{display:block}.video-js .vjs-menu-button-inline{transition:all .4s;overflow:hidden}.video-js .vjs-menu-button-inline:before{width:2.222222222em}.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline:hover{width:12em}.vjs-menu-button-inline .vjs-menu{opacity:0;height:100%;width:auto;position:absolute;left:4em;top:0;padding:0;margin:0;transition:all .4s}.vjs-menu-button-inline.vjs-slider-active .vjs-menu,.vjs-menu-button-inline:focus .vjs-menu,.vjs-menu-button-inline:hover .vjs-menu{display:block;opacity:1}.vjs-menu-button-inline .vjs-menu-content{width:auto;height:100%;margin:0;overflow:hidden}.video-js .vjs-control-bar{display:none;width:100%;position:absolute;bottom:0;left:0;right:0;height:3em;background-color:#2b333f;background-color:rgba(43,51,63,.7)}.video-js:not(.vjs-controls-disabled,.vjs-using-native-controls,.vjs-error) .vjs-control-bar.vjs-lock-showing{display:flex!important}.vjs-audio-only-mode .vjs-control-bar,.vjs-has-started .vjs-control-bar{display:flex;visibility:visible;opacity:1;transition:visibility .1s,opacity .1s}.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{visibility:visible;opacity:0;pointer-events:none;transition:visibility 1s,opacity 1s}.vjs-controls-disabled .vjs-control-bar,.vjs-error .vjs-control-bar,.vjs-using-native-controls .vjs-control-bar{display:none!important}.vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{opacity:1;visibility:visible;pointer-events:auto}.video-js .vjs-control{position:relative;text-align:center;margin:0;padding:0;height:100%;width:4em;flex:none}.video-js .vjs-control.vjs-visible-text{width:auto;padding-left:1em;padding-right:1em}.vjs-button>.vjs-icon-placeholder:before{font-size:1.8em;line-height:1.67}.vjs-button>.vjs-icon-placeholder{display:block}.vjs-button>.vjs-svg-icon{display:inline-block}.video-js .vjs-control:focus,.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before{text-shadow:0 0 1em #fff}.video-js :not(.vjs-visible-text)>.vjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.video-js .vjs-custom-control-spacer{display:none}.video-js .vjs-progress-control{cursor:pointer;flex:auto;display:flex;align-items:center;min-width:4em;touch-action:none}.video-js .vjs-progress-control.disabled{cursor:default}.vjs-live .vjs-progress-control{display:none}.vjs-liveui .vjs-progress-control{display:flex;align-items:center}.video-js .vjs-progress-holder{flex:auto;transition:all .2s;height:.3em}.video-js .vjs-progress-control .vjs-progress-holder{margin:0 10px}.video-js .vjs-progress-control:hover .vjs-progress-holder{font-size:1.6666666667em}.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled{font-size:1em}.video-js .vjs-progress-holder .vjs-load-progress,.video-js .vjs-progress-holder .vjs-load-progress div,.video-js .vjs-progress-holder .vjs-play-progress{position:absolute;display:block;height:100%;margin:0;padding:0;width:0}.video-js .vjs-play-progress{background-color:#fff}.video-js .vjs-play-progress:before{font-size:.9em;position:absolute;right:-.5em;line-height:.35em;z-index:1}.vjs-svg-icons-enabled .vjs-play-progress:before{content:none!important}.vjs-play-progress .vjs-svg-icon{position:absolute;top:-.35em;right:-.4em;width:.9em;height:.9em;pointer-events:none;line-height:.15em;z-index:1}.video-js .vjs-load-progress{background:rgba(115,133,159,.5)}.video-js .vjs-load-progress div{background:rgba(115,133,159,.75)}.video-js .vjs-time-tooltip{background-color:#fff;background-color:rgba(255,255,255,.8);border-radius:.3em;color:#000;float:right;font-family:Arial,Helvetica,sans-serif;font-size:1em;padding:6px 8px 8px 8px;pointer-events:none;position:absolute;top:-3.4em;visibility:hidden;z-index:1}.video-js .vjs-progress-holder:focus .vjs-time-tooltip{display:none}.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-time-tooltip{display:block;font-size:.6em;visibility:visible}.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip{font-size:1em}.video-js .vjs-progress-control .vjs-mouse-display{display:none;position:absolute;width:1px;height:100%;background-color:#000;z-index:1}.video-js .vjs-progress-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display{visibility:hidden;opacity:0;transition:visibility 1s,opacity 1s}.vjs-mouse-display .vjs-time-tooltip{color:#fff;background-color:#000;background-color:rgba(0,0,0,.8)}.video-js .vjs-slider{position:relative;cursor:pointer;padding:0;margin:0 .45em 0 .45em;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:#73859f;background-color:rgba(115,133,159,.5)}.video-js .vjs-slider.disabled{cursor:default}.video-js .vjs-slider:focus{text-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.video-js .vjs-mute-control{cursor:pointer;flex:none}.video-js .vjs-volume-control{cursor:pointer;margin-right:1em;display:flex}.video-js .vjs-volume-control.vjs-volume-horizontal{width:5em}.video-js .vjs-volume-panel .vjs-volume-control{visibility:visible;opacity:0;width:1px;height:1px;margin-left:-1px}.video-js .vjs-volume-panel{transition:width 1s}.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active,.video-js .vjs-volume-panel .vjs-volume-control:active,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control,.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control,.video-js .vjs-volume-panel:active .vjs-volume-control,.video-js .vjs-volume-panel:focus .vjs-volume-control{visibility:visible;opacity:1;position:relative;transition:visibility .1s,opacity .1s,height .1s,width .1s,left 0s,top 0s}.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal{width:5em;height:3em;margin-right:0}.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical{left:-3.5em;transition:left 0s}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active{width:10em;transition:width .1s}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only{width:4em}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical{height:8em;width:3em;left:-3000em;transition:visibility 1s,opacity 1s,height 1s 1s,width 1s 1s,left 1s 1s,top 1s 1s}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{transition:visibility 1s,opacity 1s,height 1s 1s,width 1s,left 1s 1s,top 1s 1s}.video-js .vjs-volume-panel{display:flex}.video-js .vjs-volume-bar{margin:1.35em .45em}.vjs-volume-bar.vjs-slider-horizontal{width:5em;height:.3em}.vjs-volume-bar.vjs-slider-vertical{width:.3em;height:5em;margin:1.35em auto}.video-js .vjs-volume-level{position:absolute;bottom:0;left:0;background-color:#fff}.video-js .vjs-volume-level:before{position:absolute;font-size:.9em;z-index:1}.vjs-slider-vertical .vjs-volume-level{width:.3em}.vjs-slider-vertical .vjs-volume-level:before{top:-.5em;left:-.3em;z-index:1}.vjs-svg-icons-enabled .vjs-volume-level:before{content:none}.vjs-volume-level .vjs-svg-icon{position:absolute;width:.9em;height:.9em;pointer-events:none;z-index:1}.vjs-slider-horizontal .vjs-volume-level{height:.3em}.vjs-slider-horizontal .vjs-volume-level:before{line-height:.35em;right:-.5em}.vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon{right:-.3em;transform:translateY(-50%)}.vjs-slider-vertical .vjs-volume-level .vjs-svg-icon{top:-.55em;transform:translateX(-50%)}.video-js .vjs-volume-panel.vjs-volume-panel-vertical{width:4em}.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level{height:100%}.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level{width:100%}.video-js .vjs-volume-vertical{width:3em;height:8em;bottom:8em;background-color:#2b333f;background-color:rgba(43,51,63,.7)}.video-js .vjs-volume-horizontal .vjs-menu{left:-2em}.video-js .vjs-volume-tooltip{background-color:#fff;background-color:rgba(255,255,255,.8);border-radius:.3em;color:#000;float:right;font-family:Arial,Helvetica,sans-serif;font-size:1em;padding:6px 8px 8px 8px;pointer-events:none;position:absolute;top:-3.4em;visibility:hidden;z-index:1}.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip,.video-js .vjs-volume-control:hover .vjs-volume-tooltip{display:block;font-size:1em;visibility:visible}.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip,.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip{left:1em;top:-12px}.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip{font-size:1em}.video-js .vjs-volume-control .vjs-mouse-display{display:none;position:absolute;width:100%;height:1px;background-color:#000;z-index:1}.video-js .vjs-volume-horizontal .vjs-mouse-display{width:1px;height:100%}.video-js .vjs-volume-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display{visibility:hidden;opacity:0;transition:visibility 1s,opacity 1s}.vjs-mouse-display .vjs-volume-tooltip{color:#fff;background-color:#000;background-color:rgba(0,0,0,.8)}.vjs-poster{display:inline-block;vertical-align:middle;cursor:pointer;margin:0;padding:0;position:absolute;top:0;right:0;bottom:0;left:0;height:100%}.vjs-has-started .vjs-poster,.vjs-using-native-controls .vjs-poster{display:none}.vjs-audio.vjs-has-started .vjs-poster,.vjs-has-started.vjs-audio-poster-mode .vjs-poster,.vjs-pip-container.vjs-has-started .vjs-poster{display:block}.vjs-poster img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.video-js .vjs-live-control{display:flex;align-items:flex-start;flex:auto;font-size:1em;line-height:3em}.video-js.vjs-liveui .vjs-live-control,.video-js:not(.vjs-live) .vjs-live-control{display:none}.video-js .vjs-seek-to-live-control{align-items:center;cursor:pointer;flex:none;display:inline-flex;height:100%;padding-left:.5em;padding-right:.5em;font-size:1em;line-height:3em;width:auto;min-width:4em}.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,.video-js:not(.vjs-live) .vjs-seek-to-live-control{display:none}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{cursor:auto}.vjs-seek-to-live-control .vjs-icon-placeholder{margin-right:.5em;color:#888}.vjs-svg-icons-enabled .vjs-seek-to-live-control{line-height:0}.vjs-seek-to-live-control .vjs-svg-icon{width:1em;height:1em;pointer-events:none;fill:#888}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder{color:red}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-svg-icon{fill:red}.video-js .vjs-time-control{flex:none;font-size:1em;line-height:3em;min-width:2em;width:auto;padding-left:1em;padding-right:1em}.video-js .vjs-current-time,.video-js .vjs-duration,.vjs-live .vjs-time-control,.vjs-live .vjs-time-divider{display:none}.vjs-time-divider{display:none;line-height:3em}.video-js .vjs-play-control{cursor:pointer}.video-js .vjs-play-control .vjs-icon-placeholder{flex:none}.vjs-text-track-display{position:absolute;bottom:3em;left:0;right:0;top:0;pointer-events:none}.vjs-error .vjs-text-track-display{display:none}.video-js.vjs-controls-disabled .vjs-text-track-display,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:1em}.video-js .vjs-text-track{font-size:1.4em;text-align:center;margin-bottom:.1em}.vjs-subtitles{color:#fff}.vjs-captions{color:#fc6}.vjs-tt-cue{display:block}video::-webkit-media-text-track-display{transform:translateY(-3em)}.video-js.vjs-controls-disabled video::-webkit-media-text-track-display,.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display{transform:translateY(-1.5em)}.video-js.vjs-force-center-align-cues .vjs-text-track-cue{text-align:center!important;width:80%!important}.video-js .vjs-picture-in-picture-control{cursor:pointer;flex:none}.video-js.vjs-audio-only-mode .vjs-picture-in-picture-control,.vjs-pip-window .vjs-picture-in-picture-control{display:none}.video-js .vjs-fullscreen-control{cursor:pointer;flex:none}.video-js.vjs-audio-only-mode .vjs-fullscreen-control,.vjs-pip-window .vjs-fullscreen-control{display:none}.vjs-playback-rate .vjs-playback-rate-value,.vjs-playback-rate>.vjs-menu-button{position:absolute;top:0;left:0;width:100%;height:100%}.vjs-playback-rate .vjs-playback-rate-value{pointer-events:none;font-size:1.5em;line-height:2;text-align:center}.vjs-playback-rate .vjs-menu{width:4em;left:0}.vjs-error .vjs-error-display .vjs-modal-dialog-content{font-size:1.4em;text-align:center}.vjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.85;text-align:left;border:.6em solid rgba(43,51,63,.7);box-sizing:border-box;background-clip:padding-box;width:5em;height:5em;border-radius:50%;visibility:hidden}.vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner{display:flex;justify-content:center;align-items:center;animation:vjs-spinner-show 0s linear .3s forwards}.vjs-error .vjs-loading-spinner{display:none}.vjs-loading-spinner:after,.vjs-loading-spinner:before{content:"";position:absolute;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:1;border:inherit;border-color:transparent;border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:after,.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:before{animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite}.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:before{border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:after{border-top-color:#fff;animation-delay:.44s}@keyframes vjs-spinner-show{to{visibility:visible}}@keyframes vjs-spinner-spin{100%{transform:rotate(360deg)}}@keyframes vjs-spinner-fade{0%{border-top-color:#73859f}20%{border-top-color:#73859f}35%{border-top-color:#fff}60%{border-top-color:#73859f}100%{border-top-color:#73859f}}.video-js.vjs-audio-only-mode .vjs-captions-button{display:none}.vjs-chapters-button .vjs-menu ul{width:24em}.video-js.vjs-audio-only-mode .vjs-descriptions-button{display:none}.vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-svg-icon{width:1.5em;height:1.5em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder{vertical-align:middle;display:inline-block;margin-bottom:-.1em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{font-family:VideoJS;content:"\f10c";font-size:1.5em;line-height:inherit}.video-js.vjs-audio-only-mode .vjs-subs-caps-button{display:none}.video-js .vjs-audio-button+.vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder,.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder{vertical-align:middle;display:inline-block;margin-bottom:-.1em}.video-js .vjs-audio-button+.vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before,.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{font-family:VideoJS;content:" \f12e";font-size:1.5em;line-height:inherit}.video-js.vjs-layout-small .vjs-current-time,.video-js.vjs-layout-small .vjs-duration,.video-js.vjs-layout-small .vjs-playback-rate,.video-js.vjs-layout-small .vjs-remaining-time,.video-js.vjs-layout-small .vjs-time-divider,.video-js.vjs-layout-small .vjs-volume-control,.video-js.vjs-layout-tiny .vjs-current-time,.video-js.vjs-layout-tiny .vjs-duration,.video-js.vjs-layout-tiny .vjs-playback-rate,.video-js.vjs-layout-tiny .vjs-remaining-time,.video-js.vjs-layout-tiny .vjs-time-divider,.video-js.vjs-layout-tiny .vjs-volume-control,.video-js.vjs-layout-x-small .vjs-current-time,.video-js.vjs-layout-x-small .vjs-duration,.video-js.vjs-layout-x-small .vjs-playback-rate,.video-js.vjs-layout-x-small .vjs-remaining-time,.video-js.vjs-layout-x-small .vjs-time-divider,.video-js.vjs-layout-x-small .vjs-volume-control{display:none}.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover{width:auto;width:initial}.video-js.vjs-layout-tiny .vjs-progress-control,.video-js.vjs-layout-x-small .vjs-progress-control{display:none}.video-js.vjs-layout-x-small .vjs-custom-control-spacer{flex:auto;display:block}.vjs-modal-dialog.vjs-text-track-settings{background-color:#2b333f;background-color:rgba(43,51,63,.75);color:#fff;height:70%}.vjs-error .vjs-text-track-settings{display:none}.vjs-text-track-settings .vjs-modal-dialog-content{display:table}.vjs-text-track-settings .vjs-track-settings-colors,.vjs-text-track-settings .vjs-track-settings-controls,.vjs-text-track-settings .vjs-track-settings-font{display:table-cell}.vjs-text-track-settings .vjs-track-settings-controls{text-align:right;vertical-align:bottom}@supports (display:grid){.vjs-text-track-settings .vjs-modal-dialog-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;padding:20px 24px 0 24px}.vjs-track-settings-controls .vjs-default-button{margin-bottom:20px}.vjs-text-track-settings .vjs-track-settings-controls{grid-column:1/-1}.vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content{grid-template-columns:1fr}}.vjs-text-track-settings select{font-size:inherit}.vjs-track-setting>select{margin-right:1em;margin-bottom:.5em}.vjs-text-track-settings fieldset{margin:10px;border:none}.vjs-text-track-settings fieldset span{display:inline-block;padding:0 .6em .8em}.vjs-text-track-settings fieldset span>select{max-width:7.3em}.vjs-text-track-settings legend{color:#fff;font-weight:700;font-size:1.2em}.vjs-text-track-settings .vjs-label{margin:0 .5em .5em 0}.vjs-track-settings-controls button:active,.vjs-track-settings-controls button:focus{outline-style:solid;outline-width:medium;background-image:linear-gradient(0deg,#fff 88%,#73859f 100%)}.vjs-track-settings-controls button:hover{color:rgba(43,51,63,.75)}.vjs-track-settings-controls button{background-color:#fff;background-image:linear-gradient(-180deg,#fff 88%,#73859f 100%);color:#2b333f;cursor:pointer;border-radius:2px}.vjs-track-settings-controls .vjs-default-button{margin-right:1em}.vjs-title-bar{background:rgba(0,0,0,.9);background:linear-gradient(180deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.7) 60%,rgba(0,0,0,0) 100%);font-size:1.2em;line-height:1.5;transition:opacity .1s;padding:.666em 1.333em 4em;pointer-events:none;position:absolute;top:0;width:100%}.vjs-error .vjs-title-bar{display:none}.vjs-title-bar-description,.vjs-title-bar-title{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vjs-title-bar-title{font-weight:700;margin-bottom:.333em}.vjs-playing.vjs-user-inactive .vjs-title-bar{opacity:0;transition:opacity 1s}.video-js .vjs-skip-forward-5{cursor:pointer}.video-js .vjs-skip-forward-10{cursor:pointer}.video-js .vjs-skip-forward-30{cursor:pointer}.video-js .vjs-skip-backward-5{cursor:pointer}.video-js .vjs-skip-backward-10{cursor:pointer}.video-js .vjs-skip-backward-30{cursor:pointer}@media print{.video-js>:not(.vjs-tech):not(.vjs-poster){visibility:hidden}}.vjs-resize-manager{position:absolute;top:0;left:0;width:100%;height:100%;border:none;z-index:-1000}.js-focus-visible .video-js :focus:not(.focus-visible){outline:0}.video-js :focus:not(:focus-visible){outline:0}
\ No newline at end of file
diff --git a/priv/static/video.js/alt/video.core.js b/priv/static/video.js/alt/video.core.js
new file mode 100644
index 0000000..28b38e7
--- /dev/null
+++ b/priv/static/video.js/alt/video.core.js
@@ -0,0 +1,28595 @@
+/**
+ * @license
+ * Video.js 8.12.0 <http://videojs.com/>
+ * Copyright Brightcove, Inc. <https://www.brightcove.com/>
+ * Available under Apache License Version 2.0
+ * <https://github.com/videojs/video.js/blob/main/LICENSE>
+ *
+ * Includes vtt.js <https://github.com/mozilla/vtt.js>
+ * Available under Apache License Version 2.0
+ * <https://github.com/mozilla/vtt.js/blob/main/LICENSE>
+ */
+
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojs = factory());
+})(this, (function () { 'use strict';
+
+  var version = "8.12.0";
+
+  /**
+   * An Object that contains lifecycle hooks as keys which point to an array
+   * of functions that are run when a lifecycle is triggered
+   *
+   * @private
+   */
+  const hooks_ = {};
+
+  /**
+   * Get a list of hooks for a specific lifecycle
+   *
+   * @param  {string} type
+   *         the lifecycle to get hooks from
+   *
+   * @param  {Function|Function[]} [fn]
+   *         Optionally add a hook (or hooks) to the lifecycle that your are getting.
+   *
+   * @return {Array}
+   *         an array of hooks, or an empty array if there are none.
+   */
+  const hooks = function (type, fn) {
+    hooks_[type] = hooks_[type] || [];
+    if (fn) {
+      hooks_[type] = hooks_[type].concat(fn);
+    }
+    return hooks_[type];
+  };
+
+  /**
+   * Add a function hook to a specific videojs lifecycle.
+   *
+   * @param {string} type
+   *        the lifecycle to hook the function to.
+   *
+   * @param {Function|Function[]}
+   *        The function or array of functions to attach.
+   */
+  const hook = function (type, fn) {
+    hooks(type, fn);
+  };
+
+  /**
+   * Remove a hook from a specific videojs lifecycle.
+   *
+   * @param  {string} type
+   *         the lifecycle that the function hooked to
+   *
+   * @param  {Function} fn
+   *         The hooked function to remove
+   *
+   * @return {boolean}
+   *         The function that was removed or undef
+   */
+  const removeHook = function (type, fn) {
+    const index = hooks(type).indexOf(fn);
+    if (index <= -1) {
+      return false;
+    }
+    hooks_[type] = hooks_[type].slice();
+    hooks_[type].splice(index, 1);
+    return true;
+  };
+
+  /**
+   * Add a function hook that will only run once to a specific videojs lifecycle.
+   *
+   * @param {string} type
+   *        the lifecycle to hook the function to.
+   *
+   * @param {Function|Function[]}
+   *        The function or array of functions to attach.
+   */
+  const hookOnce = function (type, fn) {
+    hooks(type, [].concat(fn).map(original => {
+      const wrapper = (...args) => {
+        removeHook(type, wrapper);
+        return original(...args);
+      };
+      return wrapper;
+    }));
+  };
+
+  /**
+   * @file fullscreen-api.js
+   * @module fullscreen-api
+   */
+
+  /**
+   * Store the browser-specific methods for the fullscreen API.
+   *
+   * @type {Object}
+   * @see [Specification]{@link https://fullscreen.spec.whatwg.org}
+   * @see [Map Approach From Screenfull.js]{@link https://github.com/sindresorhus/screenfull.js}
+   */
+  const FullscreenApi = {
+    prefixed: true
+  };
+
+  // browser API methods
+  const apiMap = [['requestFullscreen', 'exitFullscreen', 'fullscreenElement', 'fullscreenEnabled', 'fullscreenchange', 'fullscreenerror', 'fullscreen'],
+  // WebKit
+  ['webkitRequestFullscreen', 'webkitExitFullscreen', 'webkitFullscreenElement', 'webkitFullscreenEnabled', 'webkitfullscreenchange', 'webkitfullscreenerror', '-webkit-full-screen']];
+  const specApi = apiMap[0];
+  let browserApi;
+
+  // determine the supported set of functions
+  for (let i = 0; i < apiMap.length; i++) {
+    // check for exitFullscreen function
+    if (apiMap[i][1] in document) {
+      browserApi = apiMap[i];
+      break;
+    }
+  }
+
+  // map the browser API names to the spec API names
+  if (browserApi) {
+    for (let i = 0; i < browserApi.length; i++) {
+      FullscreenApi[specApi[i]] = browserApi[i];
+    }
+    FullscreenApi.prefixed = browserApi[0] !== specApi[0];
+  }
+
+  /**
+   * @file create-logger.js
+   * @module create-logger
+   */
+
+  // This is the private tracking variable for the logging history.
+  let history = [];
+
+  /**
+   * Log messages to the console and history based on the type of message
+   *
+   * @private
+   * @param  {string} name
+   *         The name of the console method to use.
+   *
+   * @param  {Object} log
+   *         The arguments to be passed to the matching console method.
+   *
+   * @param {string} [styles]
+   *        styles for name
+   */
+  const LogByTypeFactory = (name, log, styles) => (type, level, args) => {
+    const lvl = log.levels[level];
+    const lvlRegExp = new RegExp(`^(${lvl})$`);
+    let resultName = name;
+    if (type !== 'log') {
+      // Add the type to the front of the message when it's not "log".
+      args.unshift(type.toUpperCase() + ':');
+    }
+    if (styles) {
+      resultName = `%c${name}`;
+      args.unshift(styles);
+    }
+
+    // Add console prefix after adding to history.
+    args.unshift(resultName + ':');
+
+    // Add a clone of the args at this point to history.
+    if (history) {
+      history.push([].concat(args));
+
+      // only store 1000 history entries
+      const splice = history.length - 1000;
+      history.splice(0, splice > 0 ? splice : 0);
+    }
+
+    // If there's no console then don't try to output messages, but they will
+    // still be stored in history.
+    if (!window.console) {
+      return;
+    }
+
+    // Was setting these once outside of this function, but containing them
+    // in the function makes it easier to test cases where console doesn't exist
+    // when the module is executed.
+    let fn = window.console[type];
+    if (!fn && type === 'debug') {
+      // Certain browsers don't have support for console.debug. For those, we
+      // should default to the closest comparable log.
+      fn = window.console.info || window.console.log;
+    }
+
+    // Bail out if there's no console or if this type is not allowed by the
+    // current logging level.
+    if (!fn || !lvl || !lvlRegExp.test(type)) {
+      return;
+    }
+    fn[Array.isArray(args) ? 'apply' : 'call'](window.console, args);
+  };
+  function createLogger$1(name, delimiter = ':', styles = '') {
+    // This is the private tracking variable for logging level.
+    let level = 'info';
+
+    // the curried logByType bound to the specific log and history
+    let logByType;
+
+    /**
+     * Logs plain debug messages. Similar to `console.log`.
+     *
+     * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+     * of our JSDoc template, we cannot properly document this as both a function
+     * and a namespace, so its function signature is documented here.
+     *
+     * #### Arguments
+     * ##### *args
+     * *[]
+     *
+     * Any combination of values that could be passed to `console.log()`.
+     *
+     * #### Return Value
+     *
+     * `undefined`
+     *
+     * @namespace
+     * @param    {...*} args
+     *           One or more messages or objects that should be logged.
+     */
+    const log = function (...args) {
+      logByType('log', level, args);
+    };
+
+    // This is the logByType helper that the logging methods below use
+    logByType = LogByTypeFactory(name, log, styles);
+
+    /**
+     * Create a new subLogger which chains the old name to the new name.
+     *
+     * For example, doing `videojs.log.createLogger('player')` and then using that logger will log the following:
+     * ```js
+     *  mylogger('foo');
+     *  // > VIDEOJS: player: foo
+     * ```
+     *
+     * @param {string} subName
+     *        The name to add call the new logger
+     * @param {string} [subDelimiter]
+     *        Optional delimiter
+     * @param {string} [subStyles]
+     *        Optional styles
+     * @return {Object}
+     */
+    log.createLogger = (subName, subDelimiter, subStyles) => {
+      const resultDelimiter = subDelimiter !== undefined ? subDelimiter : delimiter;
+      const resultStyles = subStyles !== undefined ? subStyles : styles;
+      const resultName = `${name} ${resultDelimiter} ${subName}`;
+      return createLogger$1(resultName, resultDelimiter, resultStyles);
+    };
+
+    /**
+     * Create a new logger.
+     *
+     * @param {string} newName
+     *        The name for the new logger
+     * @param {string} [newDelimiter]
+     *        Optional delimiter
+     * @param {string} [newStyles]
+     *        Optional styles
+     * @return {Object}
+     */
+    log.createNewLogger = (newName, newDelimiter, newStyles) => {
+      return createLogger$1(newName, newDelimiter, newStyles);
+    };
+
+    /**
+     * Enumeration of available logging levels, where the keys are the level names
+     * and the values are `|`-separated strings containing logging methods allowed
+     * in that logging level. These strings are used to create a regular expression
+     * matching the function name being called.
+     *
+     * Levels provided by Video.js are:
+     *
+     * - `off`: Matches no calls. Any value that can be cast to `false` will have
+     *   this effect. The most restrictive.
+     * - `all`: Matches only Video.js-provided functions (`debug`, `log`,
+     *   `log.warn`, and `log.error`).
+     * - `debug`: Matches `log.debug`, `log`, `log.warn`, and `log.error` calls.
+     * - `info` (default): Matches `log`, `log.warn`, and `log.error` calls.
+     * - `warn`: Matches `log.warn` and `log.error` calls.
+     * - `error`: Matches only `log.error` calls.
+     *
+     * @type {Object}
+     */
+    log.levels = {
+      all: 'debug|log|warn|error',
+      off: '',
+      debug: 'debug|log|warn|error',
+      info: 'log|warn|error',
+      warn: 'warn|error',
+      error: 'error',
+      DEFAULT: level
+    };
+
+    /**
+     * Get or set the current logging level.
+     *
+     * If a string matching a key from {@link module:log.levels} is provided, acts
+     * as a setter.
+     *
+     * @param  {'all'|'debug'|'info'|'warn'|'error'|'off'} [lvl]
+     *         Pass a valid level to set a new logging level.
+     *
+     * @return {string}
+     *         The current logging level.
+     */
+    log.level = lvl => {
+      if (typeof lvl === 'string') {
+        if (!log.levels.hasOwnProperty(lvl)) {
+          throw new Error(`"${lvl}" in not a valid log level`);
+        }
+        level = lvl;
+      }
+      return level;
+    };
+
+    /**
+     * Returns an array containing everything that has been logged to the history.
+     *
+     * This array is a shallow clone of the internal history record. However, its
+     * contents are _not_ cloned; so, mutating objects inside this array will
+     * mutate them in history.
+     *
+     * @return {Array}
+     */
+    log.history = () => history ? [].concat(history) : [];
+
+    /**
+     * Allows you to filter the history by the given logger name
+     *
+     * @param {string} fname
+     *        The name to filter by
+     *
+     * @return {Array}
+     *         The filtered list to return
+     */
+    log.history.filter = fname => {
+      return (history || []).filter(historyItem => {
+        // if the first item in each historyItem includes `fname`, then it's a match
+        return new RegExp(`.*${fname}.*`).test(historyItem[0]);
+      });
+    };
+
+    /**
+     * Clears the internal history tracking, but does not prevent further history
+     * tracking.
+     */
+    log.history.clear = () => {
+      if (history) {
+        history.length = 0;
+      }
+    };
+
+    /**
+     * Disable history tracking if it is currently enabled.
+     */
+    log.history.disable = () => {
+      if (history !== null) {
+        history.length = 0;
+        history = null;
+      }
+    };
+
+    /**
+     * Enable history tracking if it is currently disabled.
+     */
+    log.history.enable = () => {
+      if (history === null) {
+        history = [];
+      }
+    };
+
+    /**
+     * Logs error messages. Similar to `console.error`.
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as an error
+     */
+    log.error = (...args) => logByType('error', level, args);
+
+    /**
+     * Logs warning messages. Similar to `console.warn`.
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as a warning.
+     */
+    log.warn = (...args) => logByType('warn', level, args);
+
+    /**
+     * Logs debug messages. Similar to `console.debug`, but may also act as a comparable
+     * log if `console.debug` is not available
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as debug.
+     */
+    log.debug = (...args) => logByType('debug', level, args);
+    return log;
+  }
+
+  /**
+   * @file log.js
+   * @module log
+   */
+  const log = createLogger$1('VIDEOJS');
+  const createLogger = log.createLogger;
+
+  /**
+   * @file obj.js
+   * @module obj
+   */
+
+  /**
+   * @callback obj:EachCallback
+   *
+   * @param {*} value
+   *        The current key for the object that is being iterated over.
+   *
+   * @param {string} key
+   *        The current key-value for object that is being iterated over
+   */
+
+  /**
+   * @callback obj:ReduceCallback
+   *
+   * @param {*} accum
+   *        The value that is accumulating over the reduce loop.
+   *
+   * @param {*} value
+   *        The current key for the object that is being iterated over.
+   *
+   * @param {string} key
+   *        The current key-value for object that is being iterated over
+   *
+   * @return {*}
+   *         The new accumulated value.
+   */
+  const toString$1 = Object.prototype.toString;
+
+  /**
+   * Get the keys of an Object
+   *
+   * @param {Object}
+   *        The Object to get the keys from
+   *
+   * @return {string[]}
+   *         An array of the keys from the object. Returns an empty array if the
+   *         object passed in was invalid or had no keys.
+   *
+   * @private
+   */
+  const keys = function (object) {
+    return isObject(object) ? Object.keys(object) : [];
+  };
+
+  /**
+   * Array-like iteration for objects.
+   *
+   * @param {Object} object
+   *        The object to iterate over
+   *
+   * @param {obj:EachCallback} fn
+   *        The callback function which is called for each key in the object.
+   */
+  function each(object, fn) {
+    keys(object).forEach(key => fn(object[key], key));
+  }
+
+  /**
+   * Array-like reduce for objects.
+   *
+   * @param {Object} object
+   *        The Object that you want to reduce.
+   *
+   * @param {Function} fn
+   *         A callback function which is called for each key in the object. It
+   *         receives the accumulated value and the per-iteration value and key
+   *         as arguments.
+   *
+   * @param {*} [initial = 0]
+   *        Starting value
+   *
+   * @return {*}
+   *         The final accumulated value.
+   */
+  function reduce(object, fn, initial = 0) {
+    return keys(object).reduce((accum, key) => fn(accum, object[key], key), initial);
+  }
+
+  /**
+   * Returns whether a value is an object of any kind - including DOM nodes,
+   * arrays, regular expressions, etc. Not functions, though.
+   *
+   * This avoids the gotcha where using `typeof` on a `null` value
+   * results in `'object'`.
+   *
+   * @param  {Object} value
+   * @return {boolean}
+   */
+  function isObject(value) {
+    return !!value && typeof value === 'object';
+  }
+
+  /**
+   * Returns whether an object appears to be a "plain" object - that is, a
+   * direct instance of `Object`.
+   *
+   * @param  {Object} value
+   * @return {boolean}
+   */
+  function isPlain(value) {
+    return isObject(value) && toString$1.call(value) === '[object Object]' && value.constructor === Object;
+  }
+
+  /**
+   * Merge two objects recursively.
+   *
+   * Performs a deep merge like
+   * {@link https://lodash.com/docs/4.17.10#merge|lodash.merge}, but only merges
+   * plain objects (not arrays, elements, or anything else).
+   *
+   * Non-plain object values will be copied directly from the right-most
+   * argument.
+   *
+   * @param   {Object[]} sources
+   *          One or more objects to merge into a new object.
+   *
+   * @return {Object}
+   *          A new object that is the merged result of all sources.
+   */
+  function merge(...sources) {
+    const result = {};
+    sources.forEach(source => {
+      if (!source) {
+        return;
+      }
+      each(source, (value, key) => {
+        if (!isPlain(value)) {
+          result[key] = value;
+          return;
+        }
+        if (!isPlain(result[key])) {
+          result[key] = {};
+        }
+        result[key] = merge(result[key], value);
+      });
+    });
+    return result;
+  }
+
+  /**
+   * Returns an array of values for a given object
+   *
+   * @param  {Object} source - target object
+   * @return {Array<unknown>} - object values
+   */
+  function values(source = {}) {
+    const result = [];
+    for (const key in source) {
+      if (source.hasOwnProperty(key)) {
+        const value = source[key];
+        result.push(value);
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Object.defineProperty but "lazy", which means that the value is only set after
+   * it is retrieved the first time, rather than being set right away.
+   *
+   * @param {Object} obj the object to set the property on
+   * @param {string} key the key for the property to set
+   * @param {Function} getValue the function used to get the value when it is needed.
+   * @param {boolean} setter whether a setter should be allowed or not
+   */
+  function defineLazyProperty(obj, key, getValue, setter = true) {
+    const set = value => Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      writable: true
+    });
+    const options = {
+      configurable: true,
+      enumerable: true,
+      get() {
+        const value = getValue();
+        set(value);
+        return value;
+      }
+    };
+    if (setter) {
+      options.set = set;
+    }
+    return Object.defineProperty(obj, key, options);
+  }
+
+  var Obj = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    each: each,
+    reduce: reduce,
+    isObject: isObject,
+    isPlain: isPlain,
+    merge: merge,
+    values: values,
+    defineLazyProperty: defineLazyProperty
+  });
+
+  /**
+   * @file browser.js
+   * @module browser
+   */
+
+  /**
+   * Whether or not this device is an iPod.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_IPOD = false;
+
+  /**
+   * The detected iOS version - or `null`.
+   *
+   * @static
+   * @type {string|null}
+   */
+  let IOS_VERSION = null;
+
+  /**
+   * Whether or not this is an Android device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_ANDROID = false;
+
+  /**
+   * The detected Android version - or `null` if not Android or indeterminable.
+   *
+   * @static
+   * @type {number|string|null}
+   */
+  let ANDROID_VERSION;
+
+  /**
+   * Whether or not this is Mozilla Firefox.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_FIREFOX = false;
+
+  /**
+   * Whether or not this is Microsoft Edge.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_EDGE = false;
+
+  /**
+   * Whether or not this is any Chromium Browser
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_CHROMIUM = false;
+
+  /**
+   * Whether or not this is any Chromium browser that is not Edge.
+   *
+   * This will also be `true` for Chrome on iOS, which will have different support
+   * as it is actually Safari under the hood.
+   *
+   * Deprecated, as the behaviour to not match Edge was to prevent Legacy Edge's UA matching.
+   * IS_CHROMIUM should be used instead.
+   * "Chromium but not Edge" could be explicitly tested with IS_CHROMIUM && !IS_EDGE
+   *
+   * @static
+   * @deprecated
+   * @type {Boolean}
+   */
+  let IS_CHROME = false;
+
+  /**
+   * The detected Chromium version - or `null`.
+   *
+   * @static
+   * @type {number|null}
+   */
+  let CHROMIUM_VERSION = null;
+
+  /**
+   * The detected Google Chrome version - or `null`.
+   * This has always been the _Chromium_ version, i.e. would return on Chromium Edge.
+   * Deprecated, use CHROMIUM_VERSION instead.
+   *
+   * @static
+   * @deprecated
+   * @type {number|null}
+   */
+  let CHROME_VERSION = null;
+
+  /**
+   * The detected Internet Explorer version - or `null`.
+   *
+   * @static
+   * @deprecated
+   * @type {number|null}
+   */
+  let IE_VERSION = null;
+
+  /**
+   * Whether or not this is desktop Safari.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_SAFARI = false;
+
+  /**
+   * Whether or not this is a Windows machine.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_WINDOWS = false;
+
+  /**
+   * Whether or not this device is an iPad.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_IPAD = false;
+
+  /**
+   * Whether or not this device is an iPhone.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  // The Facebook app's UIWebView identifies as both an iPhone and iPad, so
+  // to identify iPhones, we need to exclude iPads.
+  // http://artsy.github.io/blog/2012/10/18/the-perils-of-ios-user-agent-sniffing/
+  let IS_IPHONE = false;
+
+  /**
+   * Whether or not this is a Tizen device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_TIZEN = false;
+
+  /**
+   * Whether or not this is a WebOS device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_WEBOS = false;
+
+  /**
+   * Whether or not this is a Smart TV (Tizen or WebOS) device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_SMART_TV = false;
+
+  /**
+   * Whether or not this device is touch-enabled.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const TOUCH_ENABLED = Boolean(isReal() && ('ontouchstart' in window || window.navigator.maxTouchPoints || window.DocumentTouch && window.document instanceof window.DocumentTouch));
+  const UAD = window.navigator && window.navigator.userAgentData;
+  if (UAD && UAD.platform && UAD.brands) {
+    // If userAgentData is present, use it instead of userAgent to avoid warnings
+    // Currently only implemented on Chromium
+    // userAgentData does not expose Android version, so ANDROID_VERSION remains `null`
+
+    IS_ANDROID = UAD.platform === 'Android';
+    IS_EDGE = Boolean(UAD.brands.find(b => b.brand === 'Microsoft Edge'));
+    IS_CHROMIUM = Boolean(UAD.brands.find(b => b.brand === 'Chromium'));
+    IS_CHROME = !IS_EDGE && IS_CHROMIUM;
+    CHROMIUM_VERSION = CHROME_VERSION = (UAD.brands.find(b => b.brand === 'Chromium') || {}).version || null;
+    IS_WINDOWS = UAD.platform === 'Windows';
+  }
+
+  // If the browser is not Chromium, either userAgentData is not present which could be an old Chromium browser,
+  //  or it's a browser that has added userAgentData since that we don't have tests for yet. In either case,
+  // the checks need to be made agiainst the regular userAgent string.
+  if (!IS_CHROMIUM) {
+    const USER_AGENT = window.navigator && window.navigator.userAgent || '';
+    IS_IPOD = /iPod/i.test(USER_AGENT);
+    IOS_VERSION = function () {
+      const match = USER_AGENT.match(/OS (\d+)_/i);
+      if (match && match[1]) {
+        return match[1];
+      }
+      return null;
+    }();
+    IS_ANDROID = /Android/i.test(USER_AGENT);
+    ANDROID_VERSION = function () {
+      // This matches Android Major.Minor.Patch versions
+      // ANDROID_VERSION is Major.Minor as a Number, if Minor isn't available, then only Major is returned
+      const match = USER_AGENT.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i);
+      if (!match) {
+        return null;
+      }
+      const major = match[1] && parseFloat(match[1]);
+      const minor = match[2] && parseFloat(match[2]);
+      if (major && minor) {
+        return parseFloat(match[1] + '.' + match[2]);
+      } else if (major) {
+        return major;
+      }
+      return null;
+    }();
+    IS_FIREFOX = /Firefox/i.test(USER_AGENT);
+    IS_EDGE = /Edg/i.test(USER_AGENT);
+    IS_CHROMIUM = /Chrome/i.test(USER_AGENT) || /CriOS/i.test(USER_AGENT);
+    IS_CHROME = !IS_EDGE && IS_CHROMIUM;
+    CHROMIUM_VERSION = CHROME_VERSION = function () {
+      const match = USER_AGENT.match(/(Chrome|CriOS)\/(\d+)/);
+      if (match && match[2]) {
+        return parseFloat(match[2]);
+      }
+      return null;
+    }();
+    IE_VERSION = function () {
+      const result = /MSIE\s(\d+)\.\d/.exec(USER_AGENT);
+      let version = result && parseFloat(result[1]);
+      if (!version && /Trident\/7.0/i.test(USER_AGENT) && /rv:11.0/.test(USER_AGENT)) {
+        // IE 11 has a different user agent string than other IE versions
+        version = 11.0;
+      }
+      return version;
+    }();
+    IS_TIZEN = /Tizen/i.test(USER_AGENT);
+    IS_WEBOS = /Web0S/i.test(USER_AGENT);
+    IS_SMART_TV = IS_TIZEN || IS_WEBOS;
+    IS_SAFARI = /Safari/i.test(USER_AGENT) && !IS_CHROME && !IS_ANDROID && !IS_EDGE && !IS_SMART_TV;
+    IS_WINDOWS = /Windows/i.test(USER_AGENT);
+    IS_IPAD = /iPad/i.test(USER_AGENT) || IS_SAFARI && TOUCH_ENABLED && !/iPhone/i.test(USER_AGENT);
+    IS_IPHONE = /iPhone/i.test(USER_AGENT) && !IS_IPAD;
+  }
+
+  /**
+   * Whether or not this is an iOS device.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const IS_IOS = IS_IPHONE || IS_IPAD || IS_IPOD;
+
+  /**
+   * Whether or not this is any flavor of Safari - including iOS.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const IS_ANY_SAFARI = (IS_SAFARI || IS_IOS) && !IS_CHROME;
+
+  var browser = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    get IS_IPOD () { return IS_IPOD; },
+    get IOS_VERSION () { return IOS_VERSION; },
+    get IS_ANDROID () { return IS_ANDROID; },
+    get ANDROID_VERSION () { return ANDROID_VERSION; },
+    get IS_FIREFOX () { return IS_FIREFOX; },
+    get IS_EDGE () { return IS_EDGE; },
+    get IS_CHROMIUM () { return IS_CHROMIUM; },
+    get IS_CHROME () { return IS_CHROME; },
+    get CHROMIUM_VERSION () { return CHROMIUM_VERSION; },
+    get CHROME_VERSION () { return CHROME_VERSION; },
+    get IE_VERSION () { return IE_VERSION; },
+    get IS_SAFARI () { return IS_SAFARI; },
+    get IS_WINDOWS () { return IS_WINDOWS; },
+    get IS_IPAD () { return IS_IPAD; },
+    get IS_IPHONE () { return IS_IPHONE; },
+    get IS_TIZEN () { return IS_TIZEN; },
+    get IS_WEBOS () { return IS_WEBOS; },
+    get IS_SMART_TV () { return IS_SMART_TV; },
+    TOUCH_ENABLED: TOUCH_ENABLED,
+    IS_IOS: IS_IOS,
+    IS_ANY_SAFARI: IS_ANY_SAFARI
+  });
+
+  /**
+   * @file dom.js
+   * @module dom
+   */
+
+  /**
+   * Detect if a value is a string with any non-whitespace characters.
+   *
+   * @private
+   * @param  {string} str
+   *         The string to check
+   *
+   * @return {boolean}
+   *         Will be `true` if the string is non-blank, `false` otherwise.
+   *
+   */
+  function isNonBlankString(str) {
+    // we use str.trim as it will trim any whitespace characters
+    // from the front or back of non-whitespace characters. aka
+    // Any string that contains non-whitespace characters will
+    // still contain them after `trim` but whitespace only strings
+    // will have a length of 0, failing this check.
+    return typeof str === 'string' && Boolean(str.trim());
+  }
+
+  /**
+   * Throws an error if the passed string has whitespace. This is used by
+   * class methods to be relatively consistent with the classList API.
+   *
+   * @private
+   * @param  {string} str
+   *         The string to check for whitespace.
+   *
+   * @throws {Error}
+   *         Throws an error if there is whitespace in the string.
+   */
+  function throwIfWhitespace(str) {
+    // str.indexOf instead of regex because str.indexOf is faster performance wise.
+    if (str.indexOf(' ') >= 0) {
+      throw new Error('class has illegal whitespace characters');
+    }
+  }
+
+  /**
+   * Whether the current DOM interface appears to be real (i.e. not simulated).
+   *
+   * @return {boolean}
+   *         Will be `true` if the DOM appears to be real, `false` otherwise.
+   */
+  function isReal() {
+    // Both document and window will never be undefined thanks to `global`.
+    return document === window.document;
+  }
+
+  /**
+   * Determines, via duck typing, whether or not a value is a DOM element.
+   *
+   * @param  {*} value
+   *         The value to check.
+   *
+   * @return {boolean}
+   *         Will be `true` if the value is a DOM element, `false` otherwise.
+   */
+  function isEl(value) {
+    return isObject(value) && value.nodeType === 1;
+  }
+
+  /**
+   * Determines if the current DOM is embedded in an iframe.
+   *
+   * @return {boolean}
+   *         Will be `true` if the DOM is embedded in an iframe, `false`
+   *         otherwise.
+   */
+  function isInFrame() {
+    // We need a try/catch here because Safari will throw errors when attempting
+    // to get either `parent` or `self`
+    try {
+      return window.parent !== window.self;
+    } catch (x) {
+      return true;
+    }
+  }
+
+  /**
+   * Creates functions to query the DOM using a given method.
+   *
+   * @private
+   * @param   {string} method
+   *          The method to create the query with.
+   *
+   * @return  {Function}
+   *          The query method
+   */
+  function createQuerier(method) {
+    return function (selector, context) {
+      if (!isNonBlankString(selector)) {
+        return document[method](null);
+      }
+      if (isNonBlankString(context)) {
+        context = document.querySelector(context);
+      }
+      const ctx = isEl(context) ? context : document;
+      return ctx[method] && ctx[method](selector);
+    };
+  }
+
+  /**
+   * Creates an element and applies properties, attributes, and inserts content.
+   *
+   * @param  {string} [tagName='div']
+   *         Name of tag to be created.
+   *
+   * @param  {Object} [properties={}]
+   *         Element properties to be applied.
+   *
+   * @param  {Object} [attributes={}]
+   *         Element attributes to be applied.
+   *
+   * @param {ContentDescriptor} [content]
+   *        A content descriptor object.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  function createEl(tagName = 'div', properties = {}, attributes = {}, content) {
+    const el = document.createElement(tagName);
+    Object.getOwnPropertyNames(properties).forEach(function (propName) {
+      const val = properties[propName];
+
+      // Handle textContent since it's not supported everywhere and we have a
+      // method for it.
+      if (propName === 'textContent') {
+        textContent(el, val);
+      } else if (el[propName] !== val || propName === 'tabIndex') {
+        el[propName] = val;
+      }
+    });
+    Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
+      el.setAttribute(attrName, attributes[attrName]);
+    });
+    if (content) {
+      appendContent(el, content);
+    }
+    return el;
+  }
+
+  /**
+   * Injects text into an element, replacing any existing contents entirely.
+   *
+   * @param  {HTMLElement} el
+   *         The element to add text content into
+   *
+   * @param  {string} text
+   *         The text content to add.
+   *
+   * @return {Element}
+   *         The element with added text content.
+   */
+  function textContent(el, text) {
+    if (typeof el.textContent === 'undefined') {
+      el.innerText = text;
+    } else {
+      el.textContent = text;
+    }
+    return el;
+  }
+
+  /**
+   * Insert an element as the first child node of another
+   *
+   * @param {Element} child
+   *        Element to insert
+   *
+   * @param {Element} parent
+   *        Element to insert child into
+   */
+  function prependTo(child, parent) {
+    if (parent.firstChild) {
+      parent.insertBefore(child, parent.firstChild);
+    } else {
+      parent.appendChild(child);
+    }
+  }
+
+  /**
+   * Check if an element has a class name.
+   *
+   * @param  {Element} element
+   *         Element to check
+   *
+   * @param  {string} classToCheck
+   *         Class name to check for
+   *
+   * @return {boolean}
+   *         Will be `true` if the element has a class, `false` otherwise.
+   *
+   * @throws {Error}
+   *         Throws an error if `classToCheck` has white space.
+   */
+  function hasClass(element, classToCheck) {
+    throwIfWhitespace(classToCheck);
+    return element.classList.contains(classToCheck);
+  }
+
+  /**
+   * Add a class name to an element.
+   *
+   * @param  {Element} element
+   *         Element to add class name to.
+   *
+   * @param  {...string} classesToAdd
+   *         One or more class name to add.
+   *
+   * @return {Element}
+   *         The DOM element with the added class name.
+   */
+  function addClass(element, ...classesToAdd) {
+    element.classList.add(...classesToAdd.reduce((prev, current) => prev.concat(current.split(/\s+/)), []));
+    return element;
+  }
+
+  /**
+   * Remove a class name from an element.
+   *
+   * @param  {Element} element
+   *         Element to remove a class name from.
+   *
+   * @param  {...string} classesToRemove
+   *         One or more class name to remove.
+   *
+   * @return {Element}
+   *         The DOM element with class name removed.
+   */
+  function removeClass(element, ...classesToRemove) {
+    // Protect in case the player gets disposed
+    if (!element) {
+      log.warn("removeClass was called with an element that doesn't exist");
+      return null;
+    }
+    element.classList.remove(...classesToRemove.reduce((prev, current) => prev.concat(current.split(/\s+/)), []));
+    return element;
+  }
+
+  /**
+   * The callback definition for toggleClass.
+   *
+   * @callback module:dom~PredicateCallback
+   * @param    {Element} element
+   *           The DOM element of the Component.
+   *
+   * @param    {string} classToToggle
+   *           The `className` that wants to be toggled
+   *
+   * @return   {boolean|undefined}
+   *           If `true` is returned, the `classToToggle` will be added to the
+   *           `element`. If `false`, the `classToToggle` will be removed from
+   *           the `element`. If `undefined`, the callback will be ignored.
+   */
+
+  /**
+   * Adds or removes a class name to/from an element depending on an optional
+   * condition or the presence/absence of the class name.
+   *
+   * @param  {Element} element
+   *         The element to toggle a class name on.
+   *
+   * @param  {string} classToToggle
+   *         The class that should be toggled.
+   *
+   * @param  {boolean|module:dom~PredicateCallback} [predicate]
+   *         See the return value for {@link module:dom~PredicateCallback}
+   *
+   * @return {Element}
+   *         The element with a class that has been toggled.
+   */
+  function toggleClass(element, classToToggle, predicate) {
+    if (typeof predicate === 'function') {
+      predicate = predicate(element, classToToggle);
+    }
+    if (typeof predicate !== 'boolean') {
+      predicate = undefined;
+    }
+    classToToggle.split(/\s+/).forEach(className => element.classList.toggle(className, predicate));
+    return element;
+  }
+
+  /**
+   * Apply attributes to an HTML element.
+   *
+   * @param {Element} el
+   *        Element to add attributes to.
+   *
+   * @param {Object} [attributes]
+   *        Attributes to be applied.
+   */
+  function setAttributes(el, attributes) {
+    Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
+      const attrValue = attributes[attrName];
+      if (attrValue === null || typeof attrValue === 'undefined' || attrValue === false) {
+        el.removeAttribute(attrName);
+      } else {
+        el.setAttribute(attrName, attrValue === true ? '' : attrValue);
+      }
+    });
+  }
+
+  /**
+   * Get an element's attribute values, as defined on the HTML tag.
+   *
+   * Attributes are not the same as properties. They're defined on the tag
+   * or with setAttribute.
+   *
+   * @param  {Element} tag
+   *         Element from which to get tag attributes.
+   *
+   * @return {Object}
+   *         All attributes of the element. Boolean attributes will be `true` or
+   *         `false`, others will be strings.
+   */
+  function getAttributes(tag) {
+    const obj = {};
+
+    // known boolean attributes
+    // we can check for matching boolean properties, but not all browsers
+    // and not all tags know about these attributes, so, we still want to check them manually
+    const knownBooleans = ['autoplay', 'controls', 'playsinline', 'loop', 'muted', 'default', 'defaultMuted'];
+    if (tag && tag.attributes && tag.attributes.length > 0) {
+      const attrs = tag.attributes;
+      for (let i = attrs.length - 1; i >= 0; i--) {
+        const attrName = attrs[i].name;
+        /** @type {boolean|string} */
+        let attrVal = attrs[i].value;
+
+        // check for known booleans
+        // the matching element property will return a value for typeof
+        if (knownBooleans.includes(attrName)) {
+          // the value of an included boolean attribute is typically an empty
+          // string ('') which would equal false if we just check for a false value.
+          // we also don't want support bad code like autoplay='false'
+          attrVal = attrVal !== null ? true : false;
+        }
+        obj[attrName] = attrVal;
+      }
+    }
+    return obj;
+  }
+
+  /**
+   * Get the value of an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to get the value of.
+   *
+   * @return {string}
+   *         The value of the attribute.
+   */
+  function getAttribute(el, attribute) {
+    return el.getAttribute(attribute);
+  }
+
+  /**
+   * Set the value of an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to set.
+   *
+   * @param {string} value
+   *        Value to set the attribute to.
+   */
+  function setAttribute(el, attribute, value) {
+    el.setAttribute(attribute, value);
+  }
+
+  /**
+   * Remove an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to remove.
+   */
+  function removeAttribute(el, attribute) {
+    el.removeAttribute(attribute);
+  }
+
+  /**
+   * Attempt to block the ability to select text.
+   */
+  function blockTextSelection() {
+    document.body.focus();
+    document.onselectstart = function () {
+      return false;
+    };
+  }
+
+  /**
+   * Turn off text selection blocking.
+   */
+  function unblockTextSelection() {
+    document.onselectstart = function () {
+      return true;
+    };
+  }
+
+  /**
+   * Identical to the native `getBoundingClientRect` function, but ensures that
+   * the method is supported at all (it is in all browsers we claim to support)
+   * and that the element is in the DOM before continuing.
+   *
+   * This wrapper function also shims properties which are not provided by some
+   * older browsers (namely, IE8).
+   *
+   * Additionally, some browsers do not support adding properties to a
+   * `ClientRect`/`DOMRect` object; so, we shallow-copy it with the standard
+   * properties (except `x` and `y` which are not widely supported). This helps
+   * avoid implementations where keys are non-enumerable.
+   *
+   * @param  {Element} el
+   *         Element whose `ClientRect` we want to calculate.
+   *
+   * @return {Object|undefined}
+   *         Always returns a plain object - or `undefined` if it cannot.
+   */
+  function getBoundingClientRect(el) {
+    if (el && el.getBoundingClientRect && el.parentNode) {
+      const rect = el.getBoundingClientRect();
+      const result = {};
+      ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach(k => {
+        if (rect[k] !== undefined) {
+          result[k] = rect[k];
+        }
+      });
+      if (!result.height) {
+        result.height = parseFloat(computedStyle(el, 'height'));
+      }
+      if (!result.width) {
+        result.width = parseFloat(computedStyle(el, 'width'));
+      }
+      return result;
+    }
+  }
+
+  /**
+   * Represents the position of a DOM element on the page.
+   *
+   * @typedef  {Object} module:dom~Position
+   *
+   * @property {number} left
+   *           Pixels to the left.
+   *
+   * @property {number} top
+   *           Pixels from the top.
+   */
+
+  /**
+   * Get the position of an element in the DOM.
+   *
+   * Uses `getBoundingClientRect` technique from John Resig.
+   *
+   * @see http://ejohn.org/blog/getboundingclientrect-is-awesome/
+   *
+   * @param  {Element} el
+   *         Element from which to get offset.
+   *
+   * @return {module:dom~Position}
+   *         The position of the element that was passed in.
+   */
+  function findPosition(el) {
+    if (!el || el && !el.offsetParent) {
+      return {
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0
+      };
+    }
+    const width = el.offsetWidth;
+    const height = el.offsetHeight;
+    let left = 0;
+    let top = 0;
+    while (el.offsetParent && el !== document[FullscreenApi.fullscreenElement]) {
+      left += el.offsetLeft;
+      top += el.offsetTop;
+      el = el.offsetParent;
+    }
+    return {
+      left,
+      top,
+      width,
+      height
+    };
+  }
+
+  /**
+   * Represents x and y coordinates for a DOM element or mouse pointer.
+   *
+   * @typedef  {Object} module:dom~Coordinates
+   *
+   * @property {number} x
+   *           x coordinate in pixels
+   *
+   * @property {number} y
+   *           y coordinate in pixels
+   */
+
+  /**
+   * Get the pointer position within an element.
+   *
+   * The base on the coordinates are the bottom left of the element.
+   *
+   * @param  {Element} el
+   *         Element on which to get the pointer position on.
+   *
+   * @param  {Event} event
+   *         Event object.
+   *
+   * @return {module:dom~Coordinates}
+   *         A coordinates object corresponding to the mouse position.
+   *
+   */
+  function getPointerPosition(el, event) {
+    const translated = {
+      x: 0,
+      y: 0
+    };
+    if (IS_IOS) {
+      let item = el;
+      while (item && item.nodeName.toLowerCase() !== 'html') {
+        const transform = computedStyle(item, 'transform');
+        if (/^matrix/.test(transform)) {
+          const values = transform.slice(7, -1).split(/,\s/).map(Number);
+          translated.x += values[4];
+          translated.y += values[5];
+        } else if (/^matrix3d/.test(transform)) {
+          const values = transform.slice(9, -1).split(/,\s/).map(Number);
+          translated.x += values[12];
+          translated.y += values[13];
+        }
+        item = item.parentNode;
+      }
+    }
+    const position = {};
+    const boxTarget = findPosition(event.target);
+    const box = findPosition(el);
+    const boxW = box.width;
+    const boxH = box.height;
+    let offsetY = event.offsetY - (box.top - boxTarget.top);
+    let offsetX = event.offsetX - (box.left - boxTarget.left);
+    if (event.changedTouches) {
+      offsetX = event.changedTouches[0].pageX - box.left;
+      offsetY = event.changedTouches[0].pageY + box.top;
+      if (IS_IOS) {
+        offsetX -= translated.x;
+        offsetY -= translated.y;
+      }
+    }
+    position.y = 1 - Math.max(0, Math.min(1, offsetY / boxH));
+    position.x = Math.max(0, Math.min(1, offsetX / boxW));
+    return position;
+  }
+
+  /**
+   * Determines, via duck typing, whether or not a value is a text node.
+   *
+   * @param  {*} value
+   *         Check if this value is a text node.
+   *
+   * @return {boolean}
+   *         Will be `true` if the value is a text node, `false` otherwise.
+   */
+  function isTextNode(value) {
+    return isObject(value) && value.nodeType === 3;
+  }
+
+  /**
+   * Empties the contents of an element.
+   *
+   * @param  {Element} el
+   *         The element to empty children from
+   *
+   * @return {Element}
+   *         The element with no children
+   */
+  function emptyEl(el) {
+    while (el.firstChild) {
+      el.removeChild(el.firstChild);
+    }
+    return el;
+  }
+
+  /**
+   * This is a mixed value that describes content to be injected into the DOM
+   * via some method. It can be of the following types:
+   *
+   * Type       | Description
+   * -----------|-------------
+   * `string`   | The value will be normalized into a text node.
+   * `Element`  | The value will be accepted as-is.
+   * `Text`     | A TextNode. The value will be accepted as-is.
+   * `Array`    | A one-dimensional array of strings, elements, text nodes, or functions. These functions should return a string, element, or text node (any other return value, like an array, will be ignored).
+   * `Function` | A function, which is expected to return a string, element, text node, or array - any of the other possible values described above. This means that a content descriptor could be a function that returns an array of functions, but those second-level functions must return strings, elements, or text nodes.
+   *
+   * @typedef {string|Element|Text|Array|Function} ContentDescriptor
+   */
+
+  /**
+   * Normalizes content for eventual insertion into the DOM.
+   *
+   * This allows a wide range of content definition methods, but helps protect
+   * from falling into the trap of simply writing to `innerHTML`, which could
+   * be an XSS concern.
+   *
+   * The content for an element can be passed in multiple types and
+   * combinations, whose behavior is as follows:
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Array}
+   *         All of the content that was passed in, normalized to an array of
+   *         elements or text nodes.
+   */
+  function normalizeContent(content) {
+    // First, invoke content if it is a function. If it produces an array,
+    // that needs to happen before normalization.
+    if (typeof content === 'function') {
+      content = content();
+    }
+
+    // Next up, normalize to an array, so one or many items can be normalized,
+    // filtered, and returned.
+    return (Array.isArray(content) ? content : [content]).map(value => {
+      // First, invoke value if it is a function to produce a new value,
+      // which will be subsequently normalized to a Node of some kind.
+      if (typeof value === 'function') {
+        value = value();
+      }
+      if (isEl(value) || isTextNode(value)) {
+        return value;
+      }
+      if (typeof value === 'string' && /\S/.test(value)) {
+        return document.createTextNode(value);
+      }
+    }).filter(value => value);
+  }
+
+  /**
+   * Normalizes and appends content to an element.
+   *
+   * @param  {Element} el
+   *         Element to append normalized content to.
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Element}
+   *         The element with appended normalized content.
+   */
+  function appendContent(el, content) {
+    normalizeContent(content).forEach(node => el.appendChild(node));
+    return el;
+  }
+
+  /**
+   * Normalizes and inserts content into an element; this is identical to
+   * `appendContent()`, except it empties the element first.
+   *
+   * @param {Element} el
+   *        Element to insert normalized content into.
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Element}
+   *         The element with inserted normalized content.
+   */
+  function insertContent(el, content) {
+    return appendContent(emptyEl(el), content);
+  }
+
+  /**
+   * Check if an event was a single left click.
+   *
+   * @param  {MouseEvent} event
+   *         Event object.
+   *
+   * @return {boolean}
+   *         Will be `true` if a single left click, `false` otherwise.
+   */
+  function isSingleLeftClick(event) {
+    // Note: if you create something draggable, be sure to
+    // call it on both `mousedown` and `mousemove` event,
+    // otherwise `mousedown` should be enough for a button
+
+    if (event.button === undefined && event.buttons === undefined) {
+      // Why do we need `buttons` ?
+      // Because, middle mouse sometimes have this:
+      // e.button === 0 and e.buttons === 4
+      // Furthermore, we want to prevent combination click, something like
+      // HOLD middlemouse then left click, that would be
+      // e.button === 0, e.buttons === 5
+      // just `button` is not gonna work
+
+      // Alright, then what this block does ?
+      // this is for chrome `simulate mobile devices`
+      // I want to support this as well
+
+      return true;
+    }
+    if (event.button === 0 && event.buttons === undefined) {
+      // Touch screen, sometimes on some specific device, `buttons`
+      // doesn't have anything (safari on ios, blackberry...)
+
+      return true;
+    }
+
+    // `mouseup` event on a single left click has
+    // `button` and `buttons` equal to 0
+    if (event.type === 'mouseup' && event.button === 0 && event.buttons === 0) {
+      return true;
+    }
+    if (event.button !== 0 || event.buttons !== 1) {
+      // This is the reason we have those if else block above
+      // if any special case we can catch and let it slide
+      // we do it above, when get to here, this definitely
+      // is-not-left-click
+
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * Finds a single DOM element matching `selector` within the optional
+   * `context` of another DOM element (defaulting to `document`).
+   *
+   * @param  {string} selector
+   *         A valid CSS selector, which will be passed to `querySelector`.
+   *
+   * @param  {Element|String} [context=document]
+   *         A DOM element within which to query. Can also be a selector
+   *         string in which case the first matching element will be used
+   *         as context. If missing (or no element matches selector), falls
+   *         back to `document`.
+   *
+   * @return {Element|null}
+   *         The element that was found or null.
+   */
+  const $ = createQuerier('querySelector');
+
+  /**
+   * Finds a all DOM elements matching `selector` within the optional
+   * `context` of another DOM element (defaulting to `document`).
+   *
+   * @param  {string} selector
+   *         A valid CSS selector, which will be passed to `querySelectorAll`.
+   *
+   * @param  {Element|String} [context=document]
+   *         A DOM element within which to query. Can also be a selector
+   *         string in which case the first matching element will be used
+   *         as context. If missing (or no element matches selector), falls
+   *         back to `document`.
+   *
+   * @return {NodeList}
+   *         A element list of elements that were found. Will be empty if none
+   *         were found.
+   *
+   */
+  const $$ = createQuerier('querySelectorAll');
+
+  /**
+   * A safe getComputedStyle.
+   *
+   * This is needed because in Firefox, if the player is loaded in an iframe with
+   * `display:none`, then `getComputedStyle` returns `null`, so, we do a
+   * null-check to make sure that the player doesn't break in these cases.
+   *
+   * @param    {Element} el
+   *           The element you want the computed style of
+   *
+   * @param    {string} prop
+   *           The property name you want
+   *
+   * @see      https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+   */
+  function computedStyle(el, prop) {
+    if (!el || !prop) {
+      return '';
+    }
+    if (typeof window.getComputedStyle === 'function') {
+      let computedStyleValue;
+      try {
+        computedStyleValue = window.getComputedStyle(el);
+      } catch (e) {
+        return '';
+      }
+      return computedStyleValue ? computedStyleValue.getPropertyValue(prop) || computedStyleValue[prop] : '';
+    }
+    return '';
+  }
+
+  /**
+   * Copy document style sheets to another window.
+   *
+   * @param    {Window} win
+   *           The window element you want to copy the document style sheets to.
+   *
+   */
+  function copyStyleSheetsToWindow(win) {
+    [...document.styleSheets].forEach(styleSheet => {
+      try {
+        const cssRules = [...styleSheet.cssRules].map(rule => rule.cssText).join('');
+        const style = document.createElement('style');
+        style.textContent = cssRules;
+        win.document.head.appendChild(style);
+      } catch (e) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.type = styleSheet.type;
+        // For older Safari this has to be the string; on other browsers setting the MediaList works
+        link.media = styleSheet.media.mediaText;
+        link.href = styleSheet.href;
+        win.document.head.appendChild(link);
+      }
+    });
+  }
+
+  var Dom = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    isReal: isReal,
+    isEl: isEl,
+    isInFrame: isInFrame,
+    createEl: createEl,
+    textContent: textContent,
+    prependTo: prependTo,
+    hasClass: hasClass,
+    addClass: addClass,
+    removeClass: removeClass,
+    toggleClass: toggleClass,
+    setAttributes: setAttributes,
+    getAttributes: getAttributes,
+    getAttribute: getAttribute,
+    setAttribute: setAttribute,
+    removeAttribute: removeAttribute,
+    blockTextSelection: blockTextSelection,
+    unblockTextSelection: unblockTextSelection,
+    getBoundingClientRect: getBoundingClientRect,
+    findPosition: findPosition,
+    getPointerPosition: getPointerPosition,
+    isTextNode: isTextNode,
+    emptyEl: emptyEl,
+    normalizeContent: normalizeContent,
+    appendContent: appendContent,
+    insertContent: insertContent,
+    isSingleLeftClick: isSingleLeftClick,
+    $: $,
+    $$: $$,
+    computedStyle: computedStyle,
+    copyStyleSheetsToWindow: copyStyleSheetsToWindow
+  });
+
+  /**
+   * @file setup.js - Functions for setting up a player without
+   * user interaction based on the data-setup `attribute` of the video tag.
+   *
+   * @module setup
+   */
+  let _windowLoaded = false;
+  let videojs$1;
+
+  /**
+   * Set up any tags that have a data-setup `attribute` when the player is started.
+   */
+  const autoSetup = function () {
+    if (videojs$1.options.autoSetup === false) {
+      return;
+    }
+    const vids = Array.prototype.slice.call(document.getElementsByTagName('video'));
+    const audios = Array.prototype.slice.call(document.getElementsByTagName('audio'));
+    const divs = Array.prototype.slice.call(document.getElementsByTagName('video-js'));
+    const mediaEls = vids.concat(audios, divs);
+
+    // Check if any media elements exist
+    if (mediaEls && mediaEls.length > 0) {
+      for (let i = 0, e = mediaEls.length; i < e; i++) {
+        const mediaEl = mediaEls[i];
+
+        // Check if element exists, has getAttribute func.
+        if (mediaEl && mediaEl.getAttribute) {
+          // Make sure this player hasn't already been set up.
+          if (mediaEl.player === undefined) {
+            const options = mediaEl.getAttribute('data-setup');
+
+            // Check if data-setup attr exists.
+            // We only auto-setup if they've added the data-setup attr.
+            if (options !== null) {
+              // Create new video.js instance.
+              videojs$1(mediaEl);
+            }
+          }
+
+          // If getAttribute isn't defined, we need to wait for the DOM.
+        } else {
+          autoSetupTimeout(1);
+          break;
+        }
+      }
+
+      // No videos were found, so keep looping unless page is finished loading.
+    } else if (!_windowLoaded) {
+      autoSetupTimeout(1);
+    }
+  };
+
+  /**
+   * Wait until the page is loaded before running autoSetup. This will be called in
+   * autoSetup if `hasLoaded` returns false.
+   *
+   * @param {number} wait
+   *        How long to wait in ms
+   *
+   * @param {module:videojs} [vjs]
+   *        The videojs library function
+   */
+  function autoSetupTimeout(wait, vjs) {
+    // Protect against breakage in non-browser environments
+    if (!isReal()) {
+      return;
+    }
+    if (vjs) {
+      videojs$1 = vjs;
+    }
+    window.setTimeout(autoSetup, wait);
+  }
+
+  /**
+   * Used to set the internal tracking of window loaded state to true.
+   *
+   * @private
+   */
+  function setWindowLoaded() {
+    _windowLoaded = true;
+    window.removeEventListener('load', setWindowLoaded);
+  }
+  if (isReal()) {
+    if (document.readyState === 'complete') {
+      setWindowLoaded();
+    } else {
+      /**
+       * Listen for the load event on window, and set _windowLoaded to true.
+       *
+       * We use a standard event listener here to avoid incrementing the GUID
+       * before any players are created.
+       *
+       * @listens load
+       */
+      window.addEventListener('load', setWindowLoaded);
+    }
+  }
+
+  /**
+   * @file stylesheet.js
+   * @module stylesheet
+   */
+
+  /**
+   * Create a DOM style element given a className for it.
+   *
+   * @param {string} className
+   *        The className to add to the created style element.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  const createStyleElement = function (className) {
+    const style = document.createElement('style');
+    style.className = className;
+    return style;
+  };
+
+  /**
+   * Add text to a DOM element.
+   *
+   * @param {Element} el
+   *        The Element to add text content to.
+   *
+   * @param {string} content
+   *        The text to add to the element.
+   */
+  const setTextContent = function (el, content) {
+    if (el.styleSheet) {
+      el.styleSheet.cssText = content;
+    } else {
+      el.textContent = content;
+    }
+  };
+
+  /**
+   * @file dom-data.js
+   * @module dom-data
+   */
+
+  /**
+   * Element Data Store.
+   *
+   * Allows for binding data to an element without putting it directly on the
+   * element. Ex. Event listeners are stored here.
+   * (also from jsninja.com, slightly modified and updated for closure compiler)
+   *
+   * @type {Object}
+   * @private
+   */
+  var DomData = new WeakMap();
+
+  /**
+   * @file guid.js
+   * @module guid
+   */
+
+  // Default value for GUIDs. This allows us to reset the GUID counter in tests.
+  //
+  // The initial GUID is 3 because some users have come to rely on the first
+  // default player ID ending up as `vjs_video_3`.
+  //
+  // See: https://github.com/videojs/video.js/pull/6216
+  const _initialGuid = 3;
+
+  /**
+   * Unique ID for an element or function
+   *
+   * @type {Number}
+   */
+  let _guid = _initialGuid;
+
+  /**
+   * Get a unique auto-incrementing ID by number that has not been returned before.
+   *
+   * @return {number}
+   *         A new unique ID.
+   */
+  function newGUID() {
+    return _guid++;
+  }
+
+  /**
+   * @file events.js. An Event System (John Resig - Secrets of a JS Ninja http://jsninja.com/)
+   * (Original book version wasn't completely usable, so fixed some things and made Closure Compiler compatible)
+   * This should work very similarly to jQuery's events, however it's based off the book version which isn't as
+   * robust as jquery's, so there's probably some differences.
+   *
+   * @file events.js
+   * @module events
+   */
+
+  /**
+   * Clean up the listener cache and dispatchers
+   *
+   * @param {Element|Object} elem
+   *        Element to clean up
+   *
+   * @param {string} type
+   *        Type of event to clean up
+   */
+  function _cleanUpEvents(elem, type) {
+    if (!DomData.has(elem)) {
+      return;
+    }
+    const data = DomData.get(elem);
+
+    // Remove the events of a particular type if there are none left
+    if (data.handlers[type].length === 0) {
+      delete data.handlers[type];
+      // data.handlers[type] = null;
+      // Setting to null was causing an error with data.handlers
+
+      // Remove the meta-handler from the element
+      if (elem.removeEventListener) {
+        elem.removeEventListener(type, data.dispatcher, false);
+      } else if (elem.detachEvent) {
+        elem.detachEvent('on' + type, data.dispatcher);
+      }
+    }
+
+    // Remove the events object if there are no types left
+    if (Object.getOwnPropertyNames(data.handlers).length <= 0) {
+      delete data.handlers;
+      delete data.dispatcher;
+      delete data.disabled;
+    }
+
+    // Finally remove the element data if there is no data left
+    if (Object.getOwnPropertyNames(data).length === 0) {
+      DomData.delete(elem);
+    }
+  }
+
+  /**
+   * Loops through an array of event types and calls the requested method for each type.
+   *
+   * @param {Function} fn
+   *        The event method we want to use.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind listeners to
+   *
+   * @param {string[]} types
+   *        Type of event to bind to.
+   *
+   * @param {Function} callback
+   *        Event listener.
+   */
+  function _handleMultipleEvents(fn, elem, types, callback) {
+    types.forEach(function (type) {
+      // Call the event method for each one of the types
+      fn(elem, type, callback);
+    });
+  }
+
+  /**
+   * Fix a native event to have standard property values
+   *
+   * @param {Object} event
+   *        Event object to fix.
+   *
+   * @return {Object}
+   *         Fixed event object.
+   */
+  function fixEvent(event) {
+    if (event.fixed_) {
+      return event;
+    }
+    function returnTrue() {
+      return true;
+    }
+    function returnFalse() {
+      return false;
+    }
+
+    // Test if fixing up is needed
+    // Used to check if !event.stopPropagation instead of isPropagationStopped
+    // But native events return true for stopPropagation, but don't have
+    // other expected methods like isPropagationStopped. Seems to be a problem
+    // with the Javascript Ninja code. So we're just overriding all events now.
+    if (!event || !event.isPropagationStopped || !event.isImmediatePropagationStopped) {
+      const old = event || window.event;
+      event = {};
+      // Clone the old object so that we can modify the values event = {};
+      // IE8 Doesn't like when you mess with native event properties
+      // Firefox returns false for event.hasOwnProperty('type') and other props
+      //  which makes copying more difficult.
+      // TODO: Probably best to create a whitelist of event props
+      for (const key in old) {
+        // Safari 6.0.3 warns you if you try to copy deprecated layerX/Y
+        // Chrome warns you if you try to copy deprecated keyboardEvent.keyLocation
+        // and webkitMovementX/Y
+        // Lighthouse complains if Event.path is copied
+        if (key !== 'layerX' && key !== 'layerY' && key !== 'keyLocation' && key !== 'webkitMovementX' && key !== 'webkitMovementY' && key !== 'path') {
+          // Chrome 32+ warns if you try to copy deprecated returnValue, but
+          // we still want to if preventDefault isn't supported (IE8).
+          if (!(key === 'returnValue' && old.preventDefault)) {
+            event[key] = old[key];
+          }
+        }
+      }
+
+      // The event occurred on this element
+      if (!event.target) {
+        event.target = event.srcElement || document;
+      }
+
+      // Handle which other element the event is related to
+      if (!event.relatedTarget) {
+        event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
+      }
+
+      // Stop the default browser action
+      event.preventDefault = function () {
+        if (old.preventDefault) {
+          old.preventDefault();
+        }
+        event.returnValue = false;
+        old.returnValue = false;
+        event.defaultPrevented = true;
+      };
+      event.defaultPrevented = false;
+
+      // Stop the event from bubbling
+      event.stopPropagation = function () {
+        if (old.stopPropagation) {
+          old.stopPropagation();
+        }
+        event.cancelBubble = true;
+        old.cancelBubble = true;
+        event.isPropagationStopped = returnTrue;
+      };
+      event.isPropagationStopped = returnFalse;
+
+      // Stop the event from bubbling and executing other handlers
+      event.stopImmediatePropagation = function () {
+        if (old.stopImmediatePropagation) {
+          old.stopImmediatePropagation();
+        }
+        event.isImmediatePropagationStopped = returnTrue;
+        event.stopPropagation();
+      };
+      event.isImmediatePropagationStopped = returnFalse;
+
+      // Handle mouse position
+      if (event.clientX !== null && event.clientX !== undefined) {
+        const doc = document.documentElement;
+        const body = document.body;
+        event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
+        event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
+      }
+
+      // Handle key presses
+      event.which = event.charCode || event.keyCode;
+
+      // Fix button for mouse clicks:
+      // 0 == left; 1 == middle; 2 == right
+      if (event.button !== null && event.button !== undefined) {
+        // The following is disabled because it does not pass videojs-standard
+        // and... yikes.
+        /* eslint-disable */
+        event.button = event.button & 1 ? 0 : event.button & 4 ? 1 : event.button & 2 ? 2 : 0;
+        /* eslint-enable */
+      }
+    }
+
+    event.fixed_ = true;
+    // Returns fixed-up instance
+    return event;
+  }
+
+  /**
+   * Whether passive event listeners are supported
+   */
+  let _supportsPassive;
+  const supportsPassive = function () {
+    if (typeof _supportsPassive !== 'boolean') {
+      _supportsPassive = false;
+      try {
+        const opts = Object.defineProperty({}, 'passive', {
+          get() {
+            _supportsPassive = true;
+          }
+        });
+        window.addEventListener('test', null, opts);
+        window.removeEventListener('test', null, opts);
+      } catch (e) {
+        // disregard
+      }
+    }
+    return _supportsPassive;
+  };
+
+  /**
+   * Touch events Chrome expects to be passive
+   */
+  const passiveEvents = ['touchstart', 'touchmove'];
+
+  /**
+   * Add an event listener to element
+   * It stores the handler function in a separate cache object
+   * and adds a generic handler to the element's event,
+   * along with a unique id (guid) to the element.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind listeners to
+   *
+   * @param {string|string[]} type
+   *        Type of event to bind to.
+   *
+   * @param {Function} fn
+   *        Event listener.
+   */
+  function on(elem, type, fn) {
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(on, elem, type, fn);
+    }
+    if (!DomData.has(elem)) {
+      DomData.set(elem, {});
+    }
+    const data = DomData.get(elem);
+
+    // We need a place to store all our handler data
+    if (!data.handlers) {
+      data.handlers = {};
+    }
+    if (!data.handlers[type]) {
+      data.handlers[type] = [];
+    }
+    if (!fn.guid) {
+      fn.guid = newGUID();
+    }
+    data.handlers[type].push(fn);
+    if (!data.dispatcher) {
+      data.disabled = false;
+      data.dispatcher = function (event, hash) {
+        if (data.disabled) {
+          return;
+        }
+        event = fixEvent(event);
+        const handlers = data.handlers[event.type];
+        if (handlers) {
+          // Copy handlers so if handlers are added/removed during the process it doesn't throw everything off.
+          const handlersCopy = handlers.slice(0);
+          for (let m = 0, n = handlersCopy.length; m < n; m++) {
+            if (event.isImmediatePropagationStopped()) {
+              break;
+            } else {
+              try {
+                handlersCopy[m].call(elem, event, hash);
+              } catch (e) {
+                log.error(e);
+              }
+            }
+          }
+        }
+      };
+    }
+    if (data.handlers[type].length === 1) {
+      if (elem.addEventListener) {
+        let options = false;
+        if (supportsPassive() && passiveEvents.indexOf(type) > -1) {
+          options = {
+            passive: true
+          };
+        }
+        elem.addEventListener(type, data.dispatcher, options);
+      } else if (elem.attachEvent) {
+        elem.attachEvent('on' + type, data.dispatcher);
+      }
+    }
+  }
+
+  /**
+   * Removes event listeners from an element
+   *
+   * @param {Element|Object} elem
+   *        Object to remove listeners from.
+   *
+   * @param {string|string[]} [type]
+   *        Type of listener to remove. Don't include to remove all events from element.
+   *
+   * @param {Function} [fn]
+   *        Specific listener to remove. Don't include to remove listeners for an event
+   *        type.
+   */
+  function off(elem, type, fn) {
+    // Don't want to add a cache object through getElData if not needed
+    if (!DomData.has(elem)) {
+      return;
+    }
+    const data = DomData.get(elem);
+
+    // If no events exist, nothing to unbind
+    if (!data.handlers) {
+      return;
+    }
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(off, elem, type, fn);
+    }
+
+    // Utility function
+    const removeType = function (el, t) {
+      data.handlers[t] = [];
+      _cleanUpEvents(el, t);
+    };
+
+    // Are we removing all bound events?
+    if (type === undefined) {
+      for (const t in data.handlers) {
+        if (Object.prototype.hasOwnProperty.call(data.handlers || {}, t)) {
+          removeType(elem, t);
+        }
+      }
+      return;
+    }
+    const handlers = data.handlers[type];
+
+    // If no handlers exist, nothing to unbind
+    if (!handlers) {
+      return;
+    }
+
+    // If no listener was provided, remove all listeners for type
+    if (!fn) {
+      removeType(elem, type);
+      return;
+    }
+
+    // We're only removing a single handler
+    if (fn.guid) {
+      for (let n = 0; n < handlers.length; n++) {
+        if (handlers[n].guid === fn.guid) {
+          handlers.splice(n--, 1);
+        }
+      }
+    }
+    _cleanUpEvents(elem, type);
+  }
+
+  /**
+   * Trigger an event for an element
+   *
+   * @param {Element|Object} elem
+   *        Element to trigger an event on
+   *
+   * @param {EventTarget~Event|string} event
+   *        A string (the type) or an event object with a type attribute
+   *
+   * @param {Object} [hash]
+   *        data hash to pass along with the event
+   *
+   * @return {boolean|undefined}
+   *         Returns the opposite of `defaultPrevented` if default was
+   *         prevented. Otherwise, returns `undefined`
+   */
+  function trigger(elem, event, hash) {
+    // Fetches element data and a reference to the parent (for bubbling).
+    // Don't want to add a data object to cache for every parent,
+    // so checking hasElData first.
+    const elemData = DomData.has(elem) ? DomData.get(elem) : {};
+    const parent = elem.parentNode || elem.ownerDocument;
+    // type = event.type || event,
+    // handler;
+
+    // If an event name was passed as a string, creates an event out of it
+    if (typeof event === 'string') {
+      event = {
+        type: event,
+        target: elem
+      };
+    } else if (!event.target) {
+      event.target = elem;
+    }
+
+    // Normalizes the event properties.
+    event = fixEvent(event);
+
+    // If the passed element has a dispatcher, executes the established handlers.
+    if (elemData.dispatcher) {
+      elemData.dispatcher.call(elem, event, hash);
+    }
+
+    // Unless explicitly stopped or the event does not bubble (e.g. media events)
+    // recursively calls this function to bubble the event up the DOM.
+    if (parent && !event.isPropagationStopped() && event.bubbles === true) {
+      trigger.call(null, parent, event, hash);
+
+      // If at the top of the DOM, triggers the default action unless disabled.
+    } else if (!parent && !event.defaultPrevented && event.target && event.target[event.type]) {
+      if (!DomData.has(event.target)) {
+        DomData.set(event.target, {});
+      }
+      const targetData = DomData.get(event.target);
+
+      // Checks if the target has a default action for this event.
+      if (event.target[event.type]) {
+        // Temporarily disables event dispatching on the target as we have already executed the handler.
+        targetData.disabled = true;
+        // Executes the default action.
+        if (typeof event.target[event.type] === 'function') {
+          event.target[event.type]();
+        }
+        // Re-enables event dispatching.
+        targetData.disabled = false;
+      }
+    }
+
+    // Inform the triggerer if the default was prevented by returning false
+    return !event.defaultPrevented;
+  }
+
+  /**
+   * Trigger a listener only once for an event.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind to.
+   *
+   * @param {string|string[]} type
+   *        Name/type of event
+   *
+   * @param {Event~EventListener} fn
+   *        Event listener function
+   */
+  function one(elem, type, fn) {
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(one, elem, type, fn);
+    }
+    const func = function () {
+      off(elem, type, func);
+      fn.apply(this, arguments);
+    };
+
+    // copy the guid to the new function so it can removed using the original function's ID
+    func.guid = fn.guid = fn.guid || newGUID();
+    on(elem, type, func);
+  }
+
+  /**
+   * Trigger a listener only once and then turn if off for all
+   * configured events
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind to.
+   *
+   * @param {string|string[]} type
+   *        Name/type of event
+   *
+   * @param {Event~EventListener} fn
+   *        Event listener function
+   */
+  function any(elem, type, fn) {
+    const func = function () {
+      off(elem, type, func);
+      fn.apply(this, arguments);
+    };
+
+    // copy the guid to the new function so it can removed using the original function's ID
+    func.guid = fn.guid = fn.guid || newGUID();
+
+    // multiple ons, but one off for everything
+    on(elem, type, func);
+  }
+
+  var Events = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    fixEvent: fixEvent,
+    on: on,
+    off: off,
+    trigger: trigger,
+    one: one,
+    any: any
+  });
+
+  /**
+   * @file fn.js
+   * @module fn
+   */
+  const UPDATE_REFRESH_INTERVAL = 30;
+
+  /**
+   * A private, internal-only function for changing the context of a function.
+   *
+   * It also stores a unique id on the function so it can be easily removed from
+   * events.
+   *
+   * @private
+   * @function
+   * @param    {*} context
+   *           The object to bind as scope.
+   *
+   * @param    {Function} fn
+   *           The function to be bound to a scope.
+   *
+   * @param    {number} [uid]
+   *           An optional unique ID for the function to be set
+   *
+   * @return   {Function}
+   *           The new function that will be bound into the context given
+   */
+  const bind_ = function (context, fn, uid) {
+    // Make sure the function has a unique ID
+    if (!fn.guid) {
+      fn.guid = newGUID();
+    }
+
+    // Create the new function that changes the context
+    const bound = fn.bind(context);
+
+    // Allow for the ability to individualize this function
+    // Needed in the case where multiple objects might share the same prototype
+    // IF both items add an event listener with the same function, then you try to remove just one
+    // it will remove both because they both have the same guid.
+    // when using this, you need to use the bind method when you remove the listener as well.
+    // currently used in text tracks
+    bound.guid = uid ? uid + '_' + fn.guid : fn.guid;
+    return bound;
+  };
+
+  /**
+   * Wraps the given function, `fn`, with a new function that only invokes `fn`
+   * at most once per every `wait` milliseconds.
+   *
+   * @function
+   * @param    {Function} fn
+   *           The function to be throttled.
+   *
+   * @param    {number}   wait
+   *           The number of milliseconds by which to throttle.
+   *
+   * @return   {Function}
+   */
+  const throttle = function (fn, wait) {
+    let last = window.performance.now();
+    const throttled = function (...args) {
+      const now = window.performance.now();
+      if (now - last >= wait) {
+        fn(...args);
+        last = now;
+      }
+    };
+    return throttled;
+  };
+
+  /**
+   * Creates a debounced function that delays invoking `func` until after `wait`
+   * milliseconds have elapsed since the last time the debounced function was
+   * invoked.
+   *
+   * Inspired by lodash and underscore implementations.
+   *
+   * @function
+   * @param    {Function} func
+   *           The function to wrap with debounce behavior.
+   *
+   * @param    {number} wait
+   *           The number of milliseconds to wait after the last invocation.
+   *
+   * @param    {boolean} [immediate]
+   *           Whether or not to invoke the function immediately upon creation.
+   *
+   * @param    {Object} [context=window]
+   *           The "context" in which the debounced function should debounce. For
+   *           example, if this function should be tied to a Video.js player,
+   *           the player can be passed here. Alternatively, defaults to the
+   *           global `window` object.
+   *
+   * @return   {Function}
+   *           A debounced function.
+   */
+  const debounce = function (func, wait, immediate, context = window) {
+    let timeout;
+    const cancel = () => {
+      context.clearTimeout(timeout);
+      timeout = null;
+    };
+
+    /* eslint-disable consistent-this */
+    const debounced = function () {
+      const self = this;
+      const args = arguments;
+      let later = function () {
+        timeout = null;
+        later = null;
+        if (!immediate) {
+          func.apply(self, args);
+        }
+      };
+      if (!timeout && immediate) {
+        func.apply(self, args);
+      }
+      context.clearTimeout(timeout);
+      timeout = context.setTimeout(later, wait);
+    };
+    /* eslint-enable consistent-this */
+
+    debounced.cancel = cancel;
+    return debounced;
+  };
+
+  var Fn = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UPDATE_REFRESH_INTERVAL: UPDATE_REFRESH_INTERVAL,
+    bind_: bind_,
+    throttle: throttle,
+    debounce: debounce
+  });
+
+  /**
+   * @file src/js/event-target.js
+   */
+  let EVENT_MAP;
+
+  /**
+   * `EventTarget` is a class that can have the same API as the DOM `EventTarget`. It
+   * adds shorthand functions that wrap around lengthy functions. For example:
+   * the `on` function is a wrapper around `addEventListener`.
+   *
+   * @see [EventTarget Spec]{@link https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget}
+   * @class EventTarget
+   */
+  class EventTarget {
+    /**
+     * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+     * function that will get called when an event with a certain name gets triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to call with `EventTarget`s
+     */
+    on(type, fn) {
+      // Remove the addEventListener alias before calling Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      on(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+     * This makes it so that the `event listener` will no longer get called when the
+     * named event happens.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to remove.
+     */
+    off(type, fn) {
+      off(this, type, fn);
+    }
+    /**
+     * This function will add an `event listener` that gets triggered only once. After the
+     * first trigger it will get removed. This is like adding an `event listener`
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    one(type, fn) {
+      // Remove the addEventListener aliasing Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      one(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * This function will add an `event listener` that gets triggered only once and is
+     * removed from all events. This is like adding an array of `event listener`s
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+     * first time it is triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    any(type, fn) {
+      // Remove the addEventListener aliasing Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      any(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * This function causes an event to happen. This will then cause any `event listeners`
+     * that are waiting for that event, to get called. If there are no `event listeners`
+     * for an event then nothing will happen.
+     *
+     * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+     * Trigger will also call the `on` + `uppercaseEventName` function.
+     *
+     * Example:
+     * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+     * `onClick` if it exists.
+     *
+     * @param {string|EventTarget~Event|Object} event
+     *        The name of the event, an `Event`, or an object with a key of type set to
+     *        an event name.
+     */
+    trigger(event) {
+      const type = event.type || event;
+
+      // deprecation
+      // In a future version we should default target to `this`
+      // similar to how we default the target to `elem` in
+      // `Events.trigger`. Right now the default `target` will be
+      // `document` due to the `Event.fixEvent` call.
+      if (typeof event === 'string') {
+        event = {
+          type
+        };
+      }
+      event = fixEvent(event);
+      if (this.allowedEvents_[type] && this['on' + type]) {
+        this['on' + type](event);
+      }
+      trigger(this, event);
+    }
+    queueTrigger(event) {
+      // only set up EVENT_MAP if it'll be used
+      if (!EVENT_MAP) {
+        EVENT_MAP = new Map();
+      }
+      const type = event.type || event;
+      let map = EVENT_MAP.get(this);
+      if (!map) {
+        map = new Map();
+        EVENT_MAP.set(this, map);
+      }
+      const oldTimeout = map.get(type);
+      map.delete(type);
+      window.clearTimeout(oldTimeout);
+      const timeout = window.setTimeout(() => {
+        map.delete(type);
+        // if we cleared out all timeouts for the current target, delete its map
+        if (map.size === 0) {
+          map = null;
+          EVENT_MAP.delete(this);
+        }
+        this.trigger(event);
+      }, 0);
+      map.set(type, timeout);
+    }
+  }
+
+  /**
+   * A Custom DOM event.
+   *
+   * @typedef {CustomEvent} Event
+   * @see [Properties]{@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent}
+   */
+
+  /**
+   * All event listeners should follow the following format.
+   *
+   * @callback EventListener
+   * @this {EventTarget}
+   *
+   * @param {Event} event
+   *        the event that triggered this function
+   *
+   * @param {Object} [hash]
+   *        hash of data sent during the event
+   */
+
+  /**
+   * An object containing event names as keys and booleans as values.
+   *
+   * > NOTE: If an event name is set to a true value here {@link EventTarget#trigger}
+   *         will have extra functionality. See that function for more information.
+   *
+   * @property EventTarget.prototype.allowedEvents_
+   * @protected
+   */
+  EventTarget.prototype.allowedEvents_ = {};
+
+  /**
+   * An alias of {@link EventTarget#on}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#on}
+   */
+  EventTarget.prototype.addEventListener = EventTarget.prototype.on;
+
+  /**
+   * An alias of {@link EventTarget#off}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#off}
+   */
+  EventTarget.prototype.removeEventListener = EventTarget.prototype.off;
+
+  /**
+   * An alias of {@link EventTarget#trigger}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#trigger}
+   */
+  EventTarget.prototype.dispatchEvent = EventTarget.prototype.trigger;
+
+  /**
+   * @file mixins/evented.js
+   * @module evented
+   */
+  const objName = obj => {
+    if (typeof obj.name === 'function') {
+      return obj.name();
+    }
+    if (typeof obj.name === 'string') {
+      return obj.name;
+    }
+    if (obj.name_) {
+      return obj.name_;
+    }
+    if (obj.constructor && obj.constructor.name) {
+      return obj.constructor.name;
+    }
+    return typeof obj;
+  };
+
+  /**
+   * Returns whether or not an object has had the evented mixin applied.
+   *
+   * @param  {Object} object
+   *         An object to test.
+   *
+   * @return {boolean}
+   *         Whether or not the object appears to be evented.
+   */
+  const isEvented = object => object instanceof EventTarget || !!object.eventBusEl_ && ['on', 'one', 'off', 'trigger'].every(k => typeof object[k] === 'function');
+
+  /**
+   * Adds a callback to run after the evented mixin applied.
+   *
+   * @param  {Object} target
+   *         An object to Add
+   * @param  {Function} callback
+   *         The callback to run.
+   */
+  const addEventedCallback = (target, callback) => {
+    if (isEvented(target)) {
+      callback();
+    } else {
+      if (!target.eventedCallbacks) {
+        target.eventedCallbacks = [];
+      }
+      target.eventedCallbacks.push(callback);
+    }
+  };
+
+  /**
+   * Whether a value is a valid event type - non-empty string or array.
+   *
+   * @private
+   * @param  {string|Array} type
+   *         The type value to test.
+   *
+   * @return {boolean}
+   *         Whether or not the type is a valid event type.
+   */
+  const isValidEventType = type =>
+  // The regex here verifies that the `type` contains at least one non-
+  // whitespace character.
+  typeof type === 'string' && /\S/.test(type) || Array.isArray(type) && !!type.length;
+
+  /**
+   * Validates a value to determine if it is a valid event target. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the target does not appear to be a valid event target.
+   *
+   * @param  {Object} target
+   *         The object to test.
+   *
+   * @param  {Object} obj
+   *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateTarget = (target, obj, fnName) => {
+    if (!target || !target.nodeName && !isEvented(target)) {
+      throw new Error(`Invalid target for ${objName(obj)}#${fnName}; must be a DOM node or evented object.`);
+    }
+  };
+
+  /**
+   * Validates a value to determine if it is a valid event target. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the type does not appear to be a valid event type.
+   *
+   * @param  {string|Array} type
+   *         The type to test.
+   *
+   * @param  {Object} obj
+  *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateEventType = (type, obj, fnName) => {
+    if (!isValidEventType(type)) {
+      throw new Error(`Invalid event type for ${objName(obj)}#${fnName}; must be a non-empty string or array.`);
+    }
+  };
+
+  /**
+   * Validates a value to determine if it is a valid listener. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the listener is not a function.
+   *
+   * @param  {Function} listener
+   *         The listener to test.
+   *
+   * @param  {Object} obj
+   *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateListener = (listener, obj, fnName) => {
+    if (typeof listener !== 'function') {
+      throw new Error(`Invalid listener for ${objName(obj)}#${fnName}; must be a function.`);
+    }
+  };
+
+  /**
+   * Takes an array of arguments given to `on()` or `one()`, validates them, and
+   * normalizes them into an object.
+   *
+   * @private
+   * @param  {Object} self
+   *         The evented object on which `on()` or `one()` was called. This
+   *         object will be bound as the `this` value for the listener.
+   *
+   * @param  {Array} args
+   *         An array of arguments passed to `on()` or `one()`.
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   *
+   * @return {Object}
+   *         An object containing useful values for `on()` or `one()` calls.
+   */
+  const normalizeListenArgs = (self, args, fnName) => {
+    // If the number of arguments is less than 3, the target is always the
+    // evented object itself.
+    const isTargetingSelf = args.length < 3 || args[0] === self || args[0] === self.eventBusEl_;
+    let target;
+    let type;
+    let listener;
+    if (isTargetingSelf) {
+      target = self.eventBusEl_;
+
+      // Deal with cases where we got 3 arguments, but we are still listening to
+      // the evented object itself.
+      if (args.length >= 3) {
+        args.shift();
+      }
+      [type, listener] = args;
+    } else {
+      [target, type, listener] = args;
+    }
+    validateTarget(target, self, fnName);
+    validateEventType(type, self, fnName);
+    validateListener(listener, self, fnName);
+    listener = bind_(self, listener);
+    return {
+      isTargetingSelf,
+      target,
+      type,
+      listener
+    };
+  };
+
+  /**
+   * Adds the listener to the event type(s) on the target, normalizing for
+   * the type of target.
+   *
+   * @private
+   * @param  {Element|Object} target
+   *         A DOM node or evented object.
+   *
+   * @param  {string} method
+   *         The event binding method to use ("on" or "one").
+   *
+   * @param  {string|Array} type
+   *         One or more event type(s).
+   *
+   * @param  {Function} listener
+   *         A listener function.
+   */
+  const listen = (target, method, type, listener) => {
+    validateTarget(target, target, method);
+    if (target.nodeName) {
+      Events[method](target, type, listener);
+    } else {
+      target[method](type, listener);
+    }
+  };
+
+  /**
+   * Contains methods that provide event capabilities to an object which is passed
+   * to {@link module:evented|evented}.
+   *
+   * @mixin EventedMixin
+   */
+  const EventedMixin = {
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    on(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'on');
+      listen(target, 'on', type, listener);
+
+      // If this object is listening to another evented object.
+      if (!isTargetingSelf) {
+        // If this object is disposed, remove the listener.
+        const removeListenerOnDispose = () => this.off(target, type, listener);
+
+        // Use the same function ID as the listener so we can remove it later it
+        // using the ID of the original listener.
+        removeListenerOnDispose.guid = listener.guid;
+
+        // Add a listener to the target's dispose event as well. This ensures
+        // that if the target is disposed BEFORE this object, we remove the
+        // removal listener that was just added. Otherwise, we create a memory leak.
+        const removeRemoverOnTargetDispose = () => this.off('dispose', removeListenerOnDispose);
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        removeRemoverOnTargetDispose.guid = listener.guid;
+        listen(this, 'on', 'dispose', removeListenerOnDispose);
+        listen(target, 'on', 'dispose', removeRemoverOnTargetDispose);
+      }
+    },
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object. The listener will be called once per event and then removed.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    one(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'one');
+
+      // Targeting this evented object.
+      if (isTargetingSelf) {
+        listen(target, 'one', type, listener);
+
+        // Targeting another evented object.
+      } else {
+        // TODO: This wrapper is incorrect! It should only
+        //       remove the wrapper for the event type that called it.
+        //       Instead all listeners are removed on the first trigger!
+        //       see https://github.com/videojs/video.js/issues/5962
+        const wrapper = (...largs) => {
+          this.off(target, type, wrapper);
+          listener.apply(null, largs);
+        };
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        wrapper.guid = listener.guid;
+        listen(target, 'one', type, wrapper);
+      }
+    },
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object. The listener will only be called once for the first event that is triggered
+     * then removed.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    any(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'any');
+
+      // Targeting this evented object.
+      if (isTargetingSelf) {
+        listen(target, 'any', type, listener);
+
+        // Targeting another evented object.
+      } else {
+        const wrapper = (...largs) => {
+          this.off(target, type, wrapper);
+          listener.apply(null, largs);
+        };
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        wrapper.guid = listener.guid;
+        listen(target, 'any', type, wrapper);
+      }
+    },
+    /**
+     * Removes listener(s) from event(s) on an evented object.
+     *
+     * @param  {string|Array|Element|Object} [targetOrType]
+     *         If this is a string or array, it represents the event type(s).
+     *
+     *         Another evented object can be passed here instead, in which case
+     *         ALL 3 arguments are _required_.
+     *
+     * @param  {string|Array|Function} [typeOrListener]
+     *         If the first argument was a string or array, this may be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function; otherwise, _all_ listeners bound to the
+     *         event type(s) will be removed.
+     */
+    off(targetOrType, typeOrListener, listener) {
+      // Targeting this evented object.
+      if (!targetOrType || isValidEventType(targetOrType)) {
+        off(this.eventBusEl_, targetOrType, typeOrListener);
+
+        // Targeting another evented object.
+      } else {
+        const target = targetOrType;
+        const type = typeOrListener;
+
+        // Fail fast and in a meaningful way!
+        validateTarget(target, this, 'off');
+        validateEventType(type, this, 'off');
+        validateListener(listener, this, 'off');
+
+        // Ensure there's at least a guid, even if the function hasn't been used
+        listener = bind_(this, listener);
+
+        // Remove the dispose listener on this evented object, which was given
+        // the same guid as the event listener in on().
+        this.off('dispose', listener);
+        if (target.nodeName) {
+          off(target, type, listener);
+          off(target, 'dispose', listener);
+        } else if (isEvented(target)) {
+          target.off(type, listener);
+          target.off('dispose', listener);
+        }
+      }
+    },
+    /**
+     * Fire an event on this evented object, causing its listeners to be called.
+     *
+     * @param   {string|Object} event
+     *          An event type or an object with a type property.
+     *
+     * @param   {Object} [hash]
+     *          An additional object to pass along to listeners.
+     *
+     * @return {boolean}
+     *          Whether or not the default behavior was prevented.
+     */
+    trigger(event, hash) {
+      validateTarget(this.eventBusEl_, this, 'trigger');
+      const type = event && typeof event !== 'string' ? event.type : event;
+      if (!isValidEventType(type)) {
+        throw new Error(`Invalid event type for ${objName(this)}#trigger; ` + 'must be a non-empty string or object with a type key that has a non-empty value.');
+      }
+      return trigger(this.eventBusEl_, event, hash);
+    }
+  };
+
+  /**
+   * Applies {@link module:evented~EventedMixin|EventedMixin} to a target object.
+   *
+   * @param  {Object} target
+   *         The object to which to add event methods.
+   *
+   * @param  {Object} [options={}]
+   *         Options for customizing the mixin behavior.
+   *
+   * @param  {string} [options.eventBusKey]
+   *         By default, adds a `eventBusEl_` DOM element to the target object,
+   *         which is used as an event bus. If the target object already has a
+   *         DOM element that should be used, pass its key here.
+   *
+   * @return {Object}
+   *         The target object.
+   */
+  function evented(target, options = {}) {
+    const {
+      eventBusKey
+    } = options;
+
+    // Set or create the eventBusEl_.
+    if (eventBusKey) {
+      if (!target[eventBusKey].nodeName) {
+        throw new Error(`The eventBusKey "${eventBusKey}" does not refer to an element.`);
+      }
+      target.eventBusEl_ = target[eventBusKey];
+    } else {
+      target.eventBusEl_ = createEl('span', {
+        className: 'vjs-event-bus'
+      });
+    }
+    Object.assign(target, EventedMixin);
+    if (target.eventedCallbacks) {
+      target.eventedCallbacks.forEach(callback => {
+        callback();
+      });
+    }
+
+    // When any evented object is disposed, it removes all its listeners.
+    target.on('dispose', () => {
+      target.off();
+      [target, target.el_, target.eventBusEl_].forEach(function (val) {
+        if (val && DomData.has(val)) {
+          DomData.delete(val);
+        }
+      });
+      window.setTimeout(() => {
+        target.eventBusEl_ = null;
+      }, 0);
+    });
+    return target;
+  }
+
+  /**
+   * @file mixins/stateful.js
+   * @module stateful
+   */
+
+  /**
+   * Contains methods that provide statefulness to an object which is passed
+   * to {@link module:stateful}.
+   *
+   * @mixin StatefulMixin
+   */
+  const StatefulMixin = {
+    /**
+     * A hash containing arbitrary keys and values representing the state of
+     * the object.
+     *
+     * @type {Object}
+     */
+    state: {},
+    /**
+     * Set the state of an object by mutating its
+     * {@link module:stateful~StatefulMixin.state|state} object in place.
+     *
+     * @fires   module:stateful~StatefulMixin#statechanged
+     * @param   {Object|Function} stateUpdates
+     *          A new set of properties to shallow-merge into the plugin state.
+     *          Can be a plain object or a function returning a plain object.
+     *
+     * @return {Object|undefined}
+     *          An object containing changes that occurred. If no changes
+     *          occurred, returns `undefined`.
+     */
+    setState(stateUpdates) {
+      // Support providing the `stateUpdates` state as a function.
+      if (typeof stateUpdates === 'function') {
+        stateUpdates = stateUpdates();
+      }
+      let changes;
+      each(stateUpdates, (value, key) => {
+        // Record the change if the value is different from what's in the
+        // current state.
+        if (this.state[key] !== value) {
+          changes = changes || {};
+          changes[key] = {
+            from: this.state[key],
+            to: value
+          };
+        }
+        this.state[key] = value;
+      });
+
+      // Only trigger "statechange" if there were changes AND we have a trigger
+      // function. This allows us to not require that the target object be an
+      // evented object.
+      if (changes && isEvented(this)) {
+        /**
+         * An event triggered on an object that is both
+         * {@link module:stateful|stateful} and {@link module:evented|evented}
+         * indicating that its state has changed.
+         *
+         * @event    module:stateful~StatefulMixin#statechanged
+         * @type     {Object}
+         * @property {Object} changes
+         *           A hash containing the properties that were changed and
+         *           the values they were changed `from` and `to`.
+         */
+        this.trigger({
+          changes,
+          type: 'statechanged'
+        });
+      }
+      return changes;
+    }
+  };
+
+  /**
+   * Applies {@link module:stateful~StatefulMixin|StatefulMixin} to a target
+   * object.
+   *
+   * If the target object is {@link module:evented|evented} and has a
+   * `handleStateChanged` method, that method will be automatically bound to the
+   * `statechanged` event on itself.
+   *
+   * @param   {Object} target
+   *          The object to be made stateful.
+   *
+   * @param   {Object} [defaultState]
+   *          A default set of properties to populate the newly-stateful object's
+   *          `state` property.
+   *
+   * @return {Object}
+   *          Returns the `target`.
+   */
+  function stateful(target, defaultState) {
+    Object.assign(target, StatefulMixin);
+
+    // This happens after the mixing-in because we need to replace the `state`
+    // added in that step.
+    target.state = Object.assign({}, target.state, defaultState);
+
+    // Auto-bind the `handleStateChanged` method of the target object if it exists.
+    if (typeof target.handleStateChanged === 'function' && isEvented(target)) {
+      target.on('statechanged', target.handleStateChanged);
+    }
+    return target;
+  }
+
+  /**
+   * @file str.js
+   * @module to-lower-case
+   */
+
+  /**
+   * Lowercase the first letter of a string.
+   *
+   * @param {string} string
+   *        String to be lowercased
+   *
+   * @return {string}
+   *         The string with a lowercased first letter
+   */
+  const toLowerCase = function (string) {
+    if (typeof string !== 'string') {
+      return string;
+    }
+    return string.replace(/./, w => w.toLowerCase());
+  };
+
+  /**
+   * Uppercase the first letter of a string.
+   *
+   * @param {string} string
+   *        String to be uppercased
+   *
+   * @return {string}
+   *         The string with an uppercased first letter
+   */
+  const toTitleCase = function (string) {
+    if (typeof string !== 'string') {
+      return string;
+    }
+    return string.replace(/./, w => w.toUpperCase());
+  };
+
+  /**
+   * Compares the TitleCase versions of the two strings for equality.
+   *
+   * @param {string} str1
+   *        The first string to compare
+   *
+   * @param {string} str2
+   *        The second string to compare
+   *
+   * @return {boolean}
+   *         Whether the TitleCase versions of the strings are equal
+   */
+  const titleCaseEquals = function (str1, str2) {
+    return toTitleCase(str1) === toTitleCase(str2);
+  };
+
+  var Str = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    toLowerCase: toLowerCase,
+    toTitleCase: toTitleCase,
+    titleCaseEquals: titleCaseEquals
+  });
+
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+  function unwrapExports (x) {
+  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+  }
+
+  function createCommonjsModule(fn, module) {
+  	return module = { exports: {} }, fn(module, module.exports), module.exports;
+  }
+
+  var keycode = createCommonjsModule(function (module, exports) {
+    // Source: http://jsfiddle.net/vWx8V/
+    // http://stackoverflow.com/questions/5603195/full-list-of-javascript-keycodes
+
+    /**
+     * Conenience method returns corresponding value for given keyName or keyCode.
+     *
+     * @param {Mixed} keyCode {Number} or keyName {String}
+     * @return {Mixed}
+     * @api public
+     */
+
+    function keyCode(searchInput) {
+      // Keyboard Events
+      if (searchInput && 'object' === typeof searchInput) {
+        var hasKeyCode = searchInput.which || searchInput.keyCode || searchInput.charCode;
+        if (hasKeyCode) searchInput = hasKeyCode;
+      }
+
+      // Numbers
+      if ('number' === typeof searchInput) return names[searchInput];
+
+      // Everything else (cast to string)
+      var search = String(searchInput);
+
+      // check codes
+      var foundNamedKey = codes[search.toLowerCase()];
+      if (foundNamedKey) return foundNamedKey;
+
+      // check aliases
+      var foundNamedKey = aliases[search.toLowerCase()];
+      if (foundNamedKey) return foundNamedKey;
+
+      // weird character?
+      if (search.length === 1) return search.charCodeAt(0);
+      return undefined;
+    }
+
+    /**
+     * Compares a keyboard event with a given keyCode or keyName.
+     *
+     * @param {Event} event Keyboard event that should be tested
+     * @param {Mixed} keyCode {Number} or keyName {String}
+     * @return {Boolean}
+     * @api public
+     */
+    keyCode.isEventKey = function isEventKey(event, nameOrCode) {
+      if (event && 'object' === typeof event) {
+        var keyCode = event.which || event.keyCode || event.charCode;
+        if (keyCode === null || keyCode === undefined) {
+          return false;
+        }
+        if (typeof nameOrCode === 'string') {
+          // check codes
+          var foundNamedKey = codes[nameOrCode.toLowerCase()];
+          if (foundNamedKey) {
+            return foundNamedKey === keyCode;
+          }
+
+          // check aliases
+          var foundNamedKey = aliases[nameOrCode.toLowerCase()];
+          if (foundNamedKey) {
+            return foundNamedKey === keyCode;
+          }
+        } else if (typeof nameOrCode === 'number') {
+          return nameOrCode === keyCode;
+        }
+        return false;
+      }
+    };
+    exports = module.exports = keyCode;
+
+    /**
+     * Get by name
+     *
+     *   exports.code['enter'] // => 13
+     */
+
+    var codes = exports.code = exports.codes = {
+      'backspace': 8,
+      'tab': 9,
+      'enter': 13,
+      'shift': 16,
+      'ctrl': 17,
+      'alt': 18,
+      'pause/break': 19,
+      'caps lock': 20,
+      'esc': 27,
+      'space': 32,
+      'page up': 33,
+      'page down': 34,
+      'end': 35,
+      'home': 36,
+      'left': 37,
+      'up': 38,
+      'right': 39,
+      'down': 40,
+      'insert': 45,
+      'delete': 46,
+      'command': 91,
+      'left command': 91,
+      'right command': 93,
+      'numpad *': 106,
+      'numpad +': 107,
+      'numpad -': 109,
+      'numpad .': 110,
+      'numpad /': 111,
+      'num lock': 144,
+      'scroll lock': 145,
+      'my computer': 182,
+      'my calculator': 183,
+      ';': 186,
+      '=': 187,
+      ',': 188,
+      '-': 189,
+      '.': 190,
+      '/': 191,
+      '`': 192,
+      '[': 219,
+      '\\': 220,
+      ']': 221,
+      "'": 222
+    };
+
+    // Helper aliases
+
+    var aliases = exports.aliases = {
+      'windows': 91,
+      '⇧': 16,
+      '⌥': 18,
+      '⌃': 17,
+      '⌘': 91,
+      'ctl': 17,
+      'control': 17,
+      'option': 18,
+      'pause': 19,
+      'break': 19,
+      'caps': 20,
+      'return': 13,
+      'escape': 27,
+      'spc': 32,
+      'spacebar': 32,
+      'pgup': 33,
+      'pgdn': 34,
+      'ins': 45,
+      'del': 46,
+      'cmd': 91
+    };
+
+    /*!
+     * Programatically add the following
+     */
+
+    // lower case chars
+    for (i = 97; i < 123; i++) codes[String.fromCharCode(i)] = i - 32;
+
+    // numbers
+    for (var i = 48; i < 58; i++) codes[i - 48] = i;
+
+    // function keys
+    for (i = 1; i < 13; i++) codes['f' + i] = i + 111;
+
+    // numpad keys
+    for (i = 0; i < 10; i++) codes['numpad ' + i] = i + 96;
+
+    /**
+     * Get by code
+     *
+     *   exports.name[13] // => 'Enter'
+     */
+
+    var names = exports.names = exports.title = {}; // title for backward compat
+
+    // Create reverse mapping
+    for (i in codes) names[codes[i]] = i;
+
+    // Add aliases
+    for (var alias in aliases) {
+      codes[alias] = aliases[alias];
+    }
+  });
+  keycode.code;
+  keycode.codes;
+  keycode.aliases;
+  keycode.names;
+  keycode.title;
+
+  /**
+   * Player Component - Base class for all UI objects
+   *
+   * @file component.js
+   */
+
+  /**
+   * Base class for all UI Components.
+   * Components are UI objects which represent both a javascript object and an element
+   * in the DOM. They can be children of other components, and can have
+   * children themselves.
+   *
+   * Components can also use methods from {@link EventTarget}
+   */
+  class Component {
+    /**
+     * A callback that is called when a component is ready. Does not have any
+     * parameters and any callback value will be ignored.
+     *
+     * @callback ReadyCallback
+     * @this Component
+     */
+
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of component options.
+     *
+     * @param {Object[]} [options.children]
+     *        An array of children objects to initialize this component with. Children objects have
+     *        a name property that will be used if more than one component of the same type needs to be
+     *        added.
+     *
+     * @param  {string} [options.className]
+     *         A class or space separated list of classes to add the component
+     *
+     * @param {ReadyCallback} [ready]
+     *        Function that gets called when the `Component` is ready.
+     */
+    constructor(player, options, ready) {
+      // The component might be the player itself and we can't pass `this` to super
+      if (!player && this.play) {
+        this.player_ = player = this; // eslint-disable-line
+      } else {
+        this.player_ = player;
+      }
+      this.isDisposed_ = false;
+
+      // Hold the reference to the parent component via `addChild` method
+      this.parentComponent_ = null;
+
+      // Make a copy of prototype.options_ to protect against overriding defaults
+      this.options_ = merge({}, this.options_);
+
+      // Updated options with supplied options
+      options = this.options_ = merge(this.options_, options);
+
+      // Get ID from options or options element if one is supplied
+      this.id_ = options.id || options.el && options.el.id;
+
+      // If there was no ID from the options, generate one
+      if (!this.id_) {
+        // Don't require the player ID function in the case of mock players
+        const id = player && player.id && player.id() || 'no_player';
+        this.id_ = `${id}_component_${newGUID()}`;
+      }
+      this.name_ = options.name || null;
+
+      // Create element if one wasn't provided in options
+      if (options.el) {
+        this.el_ = options.el;
+      } else if (options.createEl !== false) {
+        this.el_ = this.createEl();
+      }
+      if (options.className && this.el_) {
+        options.className.split(' ').forEach(c => this.addClass(c));
+      }
+
+      // Remove the placeholder event methods. If the component is evented, the
+      // real methods are added next
+      ['on', 'off', 'one', 'any', 'trigger'].forEach(fn => {
+        this[fn] = undefined;
+      });
+
+      // if evented is anything except false, we want to mixin in evented
+      if (options.evented !== false) {
+        // Make this an evented object and use `el_`, if available, as its event bus
+        evented(this, {
+          eventBusKey: this.el_ ? 'el_' : null
+        });
+        this.handleLanguagechange = this.handleLanguagechange.bind(this);
+        this.on(this.player_, 'languagechange', this.handleLanguagechange);
+      }
+      stateful(this, this.constructor.defaultState);
+      this.children_ = [];
+      this.childIndex_ = {};
+      this.childNameIndex_ = {};
+      this.setTimeoutIds_ = new Set();
+      this.setIntervalIds_ = new Set();
+      this.rafIds_ = new Set();
+      this.namedRafs_ = new Map();
+      this.clearingTimersOnDispose_ = false;
+
+      // Add any child components in options
+      if (options.initChildren !== false) {
+        this.initChildren();
+      }
+
+      // Don't want to trigger ready here or it will go before init is actually
+      // finished for all children that run this constructor
+      this.ready(ready);
+      if (options.reportTouchActivity !== false) {
+        this.enableTouchActivity();
+      }
+    }
+
+    // `on`, `off`, `one`, `any` and `trigger` are here so tsc includes them in definitions.
+    // They are replaced or removed in the constructor
+
+    /**
+     * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+     * function that will get called when an event with a certain name gets triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to call with `EventTarget`s
+     */
+    on(type, fn) {}
+
+    /**
+     * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+     * This makes it so that the `event listener` will no longer get called when the
+     * named event happens.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} [fn]
+     *        The function to remove. If not specified, all listeners managed by Video.js will be removed.
+     */
+    off(type, fn) {}
+
+    /**
+     * This function will add an `event listener` that gets triggered only once. After the
+     * first trigger it will get removed. This is like adding an `event listener`
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    one(type, fn) {}
+
+    /**
+     * This function will add an `event listener` that gets triggered only once and is
+     * removed from all events. This is like adding an array of `event listener`s
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+     * first time it is triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    any(type, fn) {}
+
+    /**
+     * This function causes an event to happen. This will then cause any `event listeners`
+     * that are waiting for that event, to get called. If there are no `event listeners`
+     * for an event then nothing will happen.
+     *
+     * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+     * Trigger will also call the `on` + `uppercaseEventName` function.
+     *
+     * Example:
+     * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+     * `onClick` if it exists.
+     *
+     * @param {string|Event|Object} event
+     *        The name of the event, an `Event`, or an object with a key of type set to
+     *        an event name.
+     *
+     * @param {Object} [hash]
+     *        Optionally extra argument to pass through to an event listener
+     */
+    trigger(event, hash) {}
+
+    /**
+     * Dispose of the `Component` and all child components.
+     *
+     * @fires Component#dispose
+     *
+     * @param {Object} options
+     * @param {Element} options.originalEl element with which to replace player element
+     */
+    dispose(options = {}) {
+      // Bail out if the component has already been disposed.
+      if (this.isDisposed_) {
+        return;
+      }
+      if (this.readyQueue_) {
+        this.readyQueue_.length = 0;
+      }
+
+      /**
+       * Triggered when a `Component` is disposed.
+       *
+       * @event Component#dispose
+       * @type {Event}
+       *
+       * @property {boolean} [bubbles=false]
+       *           set to false so that the dispose event does not
+       *           bubble up
+       */
+      this.trigger({
+        type: 'dispose',
+        bubbles: false
+      });
+      this.isDisposed_ = true;
+
+      // Dispose all children.
+      if (this.children_) {
+        for (let i = this.children_.length - 1; i >= 0; i--) {
+          if (this.children_[i].dispose) {
+            this.children_[i].dispose();
+          }
+        }
+      }
+
+      // Delete child references
+      this.children_ = null;
+      this.childIndex_ = null;
+      this.childNameIndex_ = null;
+      this.parentComponent_ = null;
+      if (this.el_) {
+        // Remove element from DOM
+        if (this.el_.parentNode) {
+          if (options.restoreEl) {
+            this.el_.parentNode.replaceChild(options.restoreEl, this.el_);
+          } else {
+            this.el_.parentNode.removeChild(this.el_);
+          }
+        }
+        this.el_ = null;
+      }
+
+      // remove reference to the player after disposing of the element
+      this.player_ = null;
+    }
+
+    /**
+     * Determine whether or not this component has been disposed.
+     *
+     * @return {boolean}
+     *         If the component has been disposed, will be `true`. Otherwise, `false`.
+     */
+    isDisposed() {
+      return Boolean(this.isDisposed_);
+    }
+
+    /**
+     * Return the {@link Player} that the `Component` has attached to.
+     *
+     * @return { import('./player').default }
+     *         The player that this `Component` has attached to.
+     */
+    player() {
+      return this.player_;
+    }
+
+    /**
+     * Deep merge of options objects with new options.
+     * > Note: When both `obj` and `options` contain properties whose values are objects.
+     *         The two properties get merged using {@link module:obj.merge}
+     *
+     * @param {Object} obj
+     *        The object that contains new options.
+     *
+     * @return {Object}
+     *         A new object of `this.options_` and `obj` merged together.
+     */
+    options(obj) {
+      if (!obj) {
+        return this.options_;
+      }
+      this.options_ = merge(this.options_, obj);
+      return this.options_;
+    }
+
+    /**
+     * Get the `Component`s DOM element
+     *
+     * @return {Element}
+     *         The DOM element for this `Component`.
+     */
+    el() {
+      return this.el_;
+    }
+
+    /**
+     * Create the `Component`s DOM element.
+     *
+     * @param {string} [tagName]
+     *        Element's DOM node type. e.g. 'div'
+     *
+     * @param {Object} [properties]
+     *        An object of properties that should be set.
+     *
+     * @param {Object} [attributes]
+     *        An object of attributes that should be set.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tagName, properties, attributes) {
+      return createEl(tagName, properties, attributes);
+    }
+
+    /**
+     * Localize a string given the string in english.
+     *
+     * If tokens are provided, it'll try and run a simple token replacement on the provided string.
+     * The tokens it looks for look like `{1}` with the index being 1-indexed into the tokens array.
+     *
+     * If a `defaultValue` is provided, it'll use that over `string`,
+     * if a value isn't found in provided language files.
+     * This is useful if you want to have a descriptive key for token replacement
+     * but have a succinct localized string and not require `en.json` to be included.
+     *
+     * Currently, it is used for the progress bar timing.
+     * ```js
+     * {
+     *   "progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
+     * }
+     * ```
+     * It is then used like so:
+     * ```js
+     * this.localize('progress bar timing: currentTime={1} duration{2}',
+     *               [this.player_.currentTime(), this.player_.duration()],
+     *               '{1} of {2}');
+     * ```
+     *
+     * Which outputs something like: `01:23 of 24:56`.
+     *
+     *
+     * @param {string} string
+     *        The string to localize and the key to lookup in the language files.
+     * @param {string[]} [tokens]
+     *        If the current item has token replacements, provide the tokens here.
+     * @param {string} [defaultValue]
+     *        Defaults to `string`. Can be a default value to use for token replacement
+     *        if the lookup key is needed to be separate.
+     *
+     * @return {string}
+     *         The localized string or if no localization exists the english string.
+     */
+    localize(string, tokens, defaultValue = string) {
+      const code = this.player_.language && this.player_.language();
+      const languages = this.player_.languages && this.player_.languages();
+      const language = languages && languages[code];
+      const primaryCode = code && code.split('-')[0];
+      const primaryLang = languages && languages[primaryCode];
+      let localizedString = defaultValue;
+      if (language && language[string]) {
+        localizedString = language[string];
+      } else if (primaryLang && primaryLang[string]) {
+        localizedString = primaryLang[string];
+      }
+      if (tokens) {
+        localizedString = localizedString.replace(/\{(\d+)\}/g, function (match, index) {
+          const value = tokens[index - 1];
+          let ret = value;
+          if (typeof value === 'undefined') {
+            ret = match;
+          }
+          return ret;
+        });
+      }
+      return localizedString;
+    }
+
+    /**
+     * Handles language change for the player in components. Should be overridden by sub-components.
+     *
+     * @abstract
+     */
+    handleLanguagechange() {}
+
+    /**
+     * Return the `Component`s DOM element. This is where children get inserted.
+     * This will usually be the the same as the element returned in {@link Component#el}.
+     *
+     * @return {Element}
+     *         The content element for this `Component`.
+     */
+    contentEl() {
+      return this.contentEl_ || this.el_;
+    }
+
+    /**
+     * Get this `Component`s ID
+     *
+     * @return {string}
+     *         The id of this `Component`
+     */
+    id() {
+      return this.id_;
+    }
+
+    /**
+     * Get the `Component`s name. The name gets used to reference the `Component`
+     * and is set during registration.
+     *
+     * @return {string}
+     *         The name of this `Component`.
+     */
+    name() {
+      return this.name_;
+    }
+
+    /**
+     * Get an array of all child components
+     *
+     * @return {Array}
+     *         The children
+     */
+    children() {
+      return this.children_;
+    }
+
+    /**
+     * Returns the child `Component` with the given `id`.
+     *
+     * @param {string} id
+     *        The id of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The child `Component` with the given `id` or undefined.
+     */
+    getChildById(id) {
+      return this.childIndex_[id];
+    }
+
+    /**
+     * Returns the child `Component` with the given `name`.
+     *
+     * @param {string} name
+     *        The name of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The child `Component` with the given `name` or undefined.
+     */
+    getChild(name) {
+      if (!name) {
+        return;
+      }
+      return this.childNameIndex_[name];
+    }
+
+    /**
+     * Returns the descendant `Component` following the givent
+     * descendant `names`. For instance ['foo', 'bar', 'baz'] would
+     * try to get 'foo' on the current component, 'bar' on the 'foo'
+     * component and 'baz' on the 'bar' component and return undefined
+     * if any of those don't exist.
+     *
+     * @param {...string[]|...string} names
+     *        The name of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The descendant `Component` following the given descendant
+     *         `names` or undefined.
+     */
+    getDescendant(...names) {
+      // flatten array argument into the main array
+      names = names.reduce((acc, n) => acc.concat(n), []);
+      let currentChild = this;
+      for (let i = 0; i < names.length; i++) {
+        currentChild = currentChild.getChild(names[i]);
+        if (!currentChild || !currentChild.getChild) {
+          return;
+        }
+      }
+      return currentChild;
+    }
+
+    /**
+     * Adds an SVG icon element to another element or component.
+     *
+     * @param {string} iconName
+     *        The name of icon. A list of all the icon names can be found at 'sandbox/svg-icons.html'
+     *
+     * @param {Element} [el=this.el()]
+     *        Element to set the title on. Defaults to the current Component's element.
+     *
+     * @return {Element}
+     *        The newly created icon element.
+     */
+    setIcon(iconName, el = this.el()) {
+      // TODO: In v9 of video.js, we will want to remove font icons entirely.
+      // This means this check, as well as the others throughout the code, and
+      // the unecessary CSS for font icons, will need to be removed.
+      // See https://github.com/videojs/video.js/pull/8260 as to which components
+      // need updating.
+      if (!this.player_.options_.experimentalSvgIcons) {
+        return;
+      }
+      const xmlnsURL = 'http://www.w3.org/2000/svg';
+
+      // The below creates an element in the format of:
+      // <span><svg><use>....</use></svg></span>
+      const iconContainer = createEl('span', {
+        className: 'vjs-icon-placeholder vjs-svg-icon'
+      }, {
+        'aria-hidden': 'true'
+      });
+      const svgEl = document.createElementNS(xmlnsURL, 'svg');
+      svgEl.setAttributeNS(null, 'viewBox', '0 0 512 512');
+      const useEl = document.createElementNS(xmlnsURL, 'use');
+      svgEl.appendChild(useEl);
+      useEl.setAttributeNS(null, 'href', `#vjs-icon-${iconName}`);
+      iconContainer.appendChild(svgEl);
+
+      // Replace a pre-existing icon if one exists.
+      if (this.iconIsSet_) {
+        el.replaceChild(iconContainer, el.querySelector('.vjs-icon-placeholder'));
+      } else {
+        el.appendChild(iconContainer);
+      }
+      this.iconIsSet_ = true;
+      return iconContainer;
+    }
+
+    /**
+     * Add a child `Component` inside the current `Component`.
+     *
+     * @param {string|Component} child
+     *        The name or instance of a child to add.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of options that will get passed to children of
+     *        the child.
+     *
+     * @param {number} [index=this.children_.length]
+     *        The index to attempt to add a child into.
+     *
+     *
+     * @return {Component}
+     *         The `Component` that gets added as a child. When using a string the
+     *         `Component` will get created by this process.
+     */
+    addChild(child, options = {}, index = this.children_.length) {
+      let component;
+      let componentName;
+
+      // If child is a string, create component with options
+      if (typeof child === 'string') {
+        componentName = toTitleCase(child);
+        const componentClassName = options.componentClass || componentName;
+
+        // Set name through options
+        options.name = componentName;
+
+        // Create a new object & element for this controls set
+        // If there's no .player_, this is a player
+        const ComponentClass = Component.getComponent(componentClassName);
+        if (!ComponentClass) {
+          throw new Error(`Component ${componentClassName} does not exist`);
+        }
+
+        // data stored directly on the videojs object may be
+        // misidentified as a component to retain
+        // backwards-compatibility with 4.x. check to make sure the
+        // component class can be instantiated.
+        if (typeof ComponentClass !== 'function') {
+          return null;
+        }
+        component = new ComponentClass(this.player_ || this, options);
+
+        // child is a component instance
+      } else {
+        component = child;
+      }
+      if (component.parentComponent_) {
+        component.parentComponent_.removeChild(component);
+      }
+      this.children_.splice(index, 0, component);
+      component.parentComponent_ = this;
+      if (typeof component.id === 'function') {
+        this.childIndex_[component.id()] = component;
+      }
+
+      // If a name wasn't used to create the component, check if we can use the
+      // name function of the component
+      componentName = componentName || component.name && toTitleCase(component.name());
+      if (componentName) {
+        this.childNameIndex_[componentName] = component;
+        this.childNameIndex_[toLowerCase(componentName)] = component;
+      }
+
+      // Add the UI object's element to the container div (box)
+      // Having an element is not required
+      if (typeof component.el === 'function' && component.el()) {
+        // If inserting before a component, insert before that component's element
+        let refNode = null;
+        if (this.children_[index + 1]) {
+          // Most children are components, but the video tech is an HTML element
+          if (this.children_[index + 1].el_) {
+            refNode = this.children_[index + 1].el_;
+          } else if (isEl(this.children_[index + 1])) {
+            refNode = this.children_[index + 1];
+          }
+        }
+        this.contentEl().insertBefore(component.el(), refNode);
+      }
+
+      // Return so it can stored on parent object if desired.
+      return component;
+    }
+
+    /**
+     * Remove a child `Component` from this `Component`s list of children. Also removes
+     * the child `Component`s element from this `Component`s element.
+     *
+     * @param {Component} component
+     *        The child `Component` to remove.
+     */
+    removeChild(component) {
+      if (typeof component === 'string') {
+        component = this.getChild(component);
+      }
+      if (!component || !this.children_) {
+        return;
+      }
+      let childFound = false;
+      for (let i = this.children_.length - 1; i >= 0; i--) {
+        if (this.children_[i] === component) {
+          childFound = true;
+          this.children_.splice(i, 1);
+          break;
+        }
+      }
+      if (!childFound) {
+        return;
+      }
+      component.parentComponent_ = null;
+      this.childIndex_[component.id()] = null;
+      this.childNameIndex_[toTitleCase(component.name())] = null;
+      this.childNameIndex_[toLowerCase(component.name())] = null;
+      const compEl = component.el();
+      if (compEl && compEl.parentNode === this.contentEl()) {
+        this.contentEl().removeChild(component.el());
+      }
+    }
+
+    /**
+     * Add and initialize default child `Component`s based upon options.
+     */
+    initChildren() {
+      const children = this.options_.children;
+      if (children) {
+        // `this` is `parent`
+        const parentOptions = this.options_;
+        const handleAdd = child => {
+          const name = child.name;
+          let opts = child.opts;
+
+          // Allow options for children to be set at the parent options
+          // e.g. videojs(id, { controlBar: false });
+          // instead of videojs(id, { children: { controlBar: false });
+          if (parentOptions[name] !== undefined) {
+            opts = parentOptions[name];
+          }
+
+          // Allow for disabling default components
+          // e.g. options['children']['posterImage'] = false
+          if (opts === false) {
+            return;
+          }
+
+          // Allow options to be passed as a simple boolean if no configuration
+          // is necessary.
+          if (opts === true) {
+            opts = {};
+          }
+
+          // We also want to pass the original player options
+          // to each component as well so they don't need to
+          // reach back into the player for options later.
+          opts.playerOptions = this.options_.playerOptions;
+
+          // Create and add the child component.
+          // Add a direct reference to the child by name on the parent instance.
+          // If two of the same component are used, different names should be supplied
+          // for each
+          const newChild = this.addChild(name, opts);
+          if (newChild) {
+            this[name] = newChild;
+          }
+        };
+
+        // Allow for an array of children details to passed in the options
+        let workingChildren;
+        const Tech = Component.getComponent('Tech');
+        if (Array.isArray(children)) {
+          workingChildren = children;
+        } else {
+          workingChildren = Object.keys(children);
+        }
+        workingChildren
+        // children that are in this.options_ but also in workingChildren  would
+        // give us extra children we do not want. So, we want to filter them out.
+        .concat(Object.keys(this.options_).filter(function (child) {
+          return !workingChildren.some(function (wchild) {
+            if (typeof wchild === 'string') {
+              return child === wchild;
+            }
+            return child === wchild.name;
+          });
+        })).map(child => {
+          let name;
+          let opts;
+          if (typeof child === 'string') {
+            name = child;
+            opts = children[name] || this.options_[name] || {};
+          } else {
+            name = child.name;
+            opts = child;
+          }
+          return {
+            name,
+            opts
+          };
+        }).filter(child => {
+          // we have to make sure that child.name isn't in the techOrder since
+          // techs are registered as Components but can't aren't compatible
+          // See https://github.com/videojs/video.js/issues/2772
+          const c = Component.getComponent(child.opts.componentClass || toTitleCase(child.name));
+          return c && !Tech.isTech(c);
+        }).forEach(handleAdd);
+      }
+    }
+
+    /**
+     * Builds the default DOM class name. Should be overridden by sub-components.
+     *
+     * @return {string}
+     *         The DOM class name for this object.
+     *
+     * @abstract
+     */
+    buildCSSClass() {
+      // Child classes can include a function that does:
+      // return 'CLASS NAME' + this._super();
+      return '';
+    }
+
+    /**
+     * Bind a listener to the component's ready state.
+     * Different from event listeners in that if the ready event has already happened
+     * it will trigger the function immediately.
+     *
+     * @param {ReadyCallback} fn
+     *        Function that gets called when the `Component` is ready.
+     *
+     * @return {Component}
+     *         Returns itself; method can be chained.
+     */
+    ready(fn, sync = false) {
+      if (!fn) {
+        return;
+      }
+      if (!this.isReady_) {
+        this.readyQueue_ = this.readyQueue_ || [];
+        this.readyQueue_.push(fn);
+        return;
+      }
+      if (sync) {
+        fn.call(this);
+      } else {
+        // Call the function asynchronously by default for consistency
+        this.setTimeout(fn, 1);
+      }
+    }
+
+    /**
+     * Trigger all the ready listeners for this `Component`.
+     *
+     * @fires Component#ready
+     */
+    triggerReady() {
+      this.isReady_ = true;
+
+      // Ensure ready is triggered asynchronously
+      this.setTimeout(function () {
+        const readyQueue = this.readyQueue_;
+
+        // Reset Ready Queue
+        this.readyQueue_ = [];
+        if (readyQueue && readyQueue.length > 0) {
+          readyQueue.forEach(function (fn) {
+            fn.call(this);
+          }, this);
+        }
+
+        // Allow for using event listeners also
+        /**
+         * Triggered when a `Component` is ready.
+         *
+         * @event Component#ready
+         * @type {Event}
+         */
+        this.trigger('ready');
+      }, 1);
+    }
+
+    /**
+     * Find a single DOM element matching a `selector`. This can be within the `Component`s
+     * `contentEl()` or another custom context.
+     *
+     * @param {string} selector
+     *        A valid CSS selector, which will be passed to `querySelector`.
+     *
+     * @param {Element|string} [context=this.contentEl()]
+     *        A DOM element within which to query. Can also be a selector string in
+     *        which case the first matching element will get used as context. If
+     *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+     *        nothing it falls back to `document`.
+     *
+     * @return {Element|null}
+     *         the dom element that was found, or null
+     *
+     * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+     */
+    $(selector, context) {
+      return $(selector, context || this.contentEl());
+    }
+
+    /**
+     * Finds all DOM element matching a `selector`. This can be within the `Component`s
+     * `contentEl()` or another custom context.
+     *
+     * @param {string} selector
+     *        A valid CSS selector, which will be passed to `querySelectorAll`.
+     *
+     * @param {Element|string} [context=this.contentEl()]
+     *        A DOM element within which to query. Can also be a selector string in
+     *        which case the first matching element will get used as context. If
+     *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+     *        nothing it falls back to `document`.
+     *
+     * @return {NodeList}
+     *         a list of dom elements that were found
+     *
+     * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+     */
+    $$(selector, context) {
+      return $$(selector, context || this.contentEl());
+    }
+
+    /**
+     * Check if a component's element has a CSS class name.
+     *
+     * @param {string} classToCheck
+     *        CSS class name to check.
+     *
+     * @return {boolean}
+     *         - True if the `Component` has the class.
+     *         - False if the `Component` does not have the class`
+     */
+    hasClass(classToCheck) {
+      return hasClass(this.el_, classToCheck);
+    }
+
+    /**
+     * Add a CSS class name to the `Component`s element.
+     *
+     * @param {...string} classesToAdd
+     *        One or more CSS class name to add.
+     */
+    addClass(...classesToAdd) {
+      addClass(this.el_, ...classesToAdd);
+    }
+
+    /**
+     * Remove a CSS class name from the `Component`s element.
+     *
+     * @param {...string} classesToRemove
+     *        One or more CSS class name to remove.
+     */
+    removeClass(...classesToRemove) {
+      removeClass(this.el_, ...classesToRemove);
+    }
+
+    /**
+     * Add or remove a CSS class name from the component's element.
+     * - `classToToggle` gets added when {@link Component#hasClass} would return false.
+     * - `classToToggle` gets removed when {@link Component#hasClass} would return true.
+     *
+     * @param  {string} classToToggle
+     *         The class to add or remove based on (@link Component#hasClass}
+     *
+     * @param  {boolean|Dom~predicate} [predicate]
+     *         An {@link Dom~predicate} function or a boolean
+     */
+    toggleClass(classToToggle, predicate) {
+      toggleClass(this.el_, classToToggle, predicate);
+    }
+
+    /**
+     * Show the `Component`s element if it is hidden by removing the
+     * 'vjs-hidden' class name from it.
+     */
+    show() {
+      this.removeClass('vjs-hidden');
+    }
+
+    /**
+     * Hide the `Component`s element if it is currently showing by adding the
+     * 'vjs-hidden` class name to it.
+     */
+    hide() {
+      this.addClass('vjs-hidden');
+    }
+
+    /**
+     * Lock a `Component`s element in its visible state by adding the 'vjs-lock-showing'
+     * class name to it. Used during fadeIn/fadeOut.
+     *
+     * @private
+     */
+    lockShowing() {
+      this.addClass('vjs-lock-showing');
+    }
+
+    /**
+     * Unlock a `Component`s element from its visible state by removing the 'vjs-lock-showing'
+     * class name from it. Used during fadeIn/fadeOut.
+     *
+     * @private
+     */
+    unlockShowing() {
+      this.removeClass('vjs-lock-showing');
+    }
+
+    /**
+     * Get the value of an attribute on the `Component`s element.
+     *
+     * @param {string} attribute
+     *        Name of the attribute to get the value from.
+     *
+     * @return {string|null}
+     *         - The value of the attribute that was asked for.
+     *         - Can be an empty string on some browsers if the attribute does not exist
+     *           or has no value
+     *         - Most browsers will return null if the attribute does not exist or has
+     *           no value.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute}
+     */
+    getAttribute(attribute) {
+      return getAttribute(this.el_, attribute);
+    }
+
+    /**
+     * Set the value of an attribute on the `Component`'s element
+     *
+     * @param {string} attribute
+     *        Name of the attribute to set.
+     *
+     * @param {string} value
+     *        Value to set the attribute to.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute}
+     */
+    setAttribute(attribute, value) {
+      setAttribute(this.el_, attribute, value);
+    }
+
+    /**
+     * Remove an attribute from the `Component`s element.
+     *
+     * @param {string} attribute
+     *        Name of the attribute to remove.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute}
+     */
+    removeAttribute(attribute) {
+      removeAttribute(this.el_, attribute);
+    }
+
+    /**
+     * Get or set the width of the component based upon the CSS styles.
+     * See {@link Component#dimension} for more detailed information.
+     *
+     * @param {number|string} [num]
+     *        The width that you want to set postfixed with '%', 'px' or nothing.
+     *
+     * @param {boolean} [skipListeners]
+     *        Skip the componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The width when getting, zero if there is no width
+     */
+    width(num, skipListeners) {
+      return this.dimension('width', num, skipListeners);
+    }
+
+    /**
+     * Get or set the height of the component based upon the CSS styles.
+     * See {@link Component#dimension} for more detailed information.
+     *
+     * @param {number|string} [num]
+     *        The height that you want to set postfixed with '%', 'px' or nothing.
+     *
+     * @param {boolean} [skipListeners]
+     *        Skip the componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The height when getting, zero if there is no height
+     */
+    height(num, skipListeners) {
+      return this.dimension('height', num, skipListeners);
+    }
+
+    /**
+     * Set both the width and height of the `Component` element at the same time.
+     *
+     * @param  {number|string} width
+     *         Width to set the `Component`s element to.
+     *
+     * @param  {number|string} height
+     *         Height to set the `Component`s element to.
+     */
+    dimensions(width, height) {
+      // Skip componentresize listeners on width for optimization
+      this.width(width, true);
+      this.height(height);
+    }
+
+    /**
+     * Get or set width or height of the `Component` element. This is the shared code
+     * for the {@link Component#width} and {@link Component#height}.
+     *
+     * Things to know:
+     * - If the width or height in an number this will return the number postfixed with 'px'.
+     * - If the width/height is a percent this will return the percent postfixed with '%'
+     * - Hidden elements have a width of 0 with `window.getComputedStyle`. This function
+     *   defaults to the `Component`s `style.width` and falls back to `window.getComputedStyle`.
+     *   See [this]{@link http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/}
+     *   for more information
+     * - If you want the computed style of the component, use {@link Component#currentWidth}
+     *   and {@link {Component#currentHeight}
+     *
+     * @fires Component#componentresize
+     *
+     * @param {string} widthOrHeight
+     8        'width' or 'height'
+     *
+     * @param  {number|string} [num]
+     8         New dimension
+     *
+     * @param  {boolean} [skipListeners]
+     *         Skip componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The dimension when getting or 0 if unset
+     */
+    dimension(widthOrHeight, num, skipListeners) {
+      if (num !== undefined) {
+        // Set to zero if null or literally NaN (NaN !== NaN)
+        if (num === null || num !== num) {
+          num = 0;
+        }
+
+        // Check if using css width/height (% or px) and adjust
+        if (('' + num).indexOf('%') !== -1 || ('' + num).indexOf('px') !== -1) {
+          this.el_.style[widthOrHeight] = num;
+        } else if (num === 'auto') {
+          this.el_.style[widthOrHeight] = '';
+        } else {
+          this.el_.style[widthOrHeight] = num + 'px';
+        }
+
+        // skipListeners allows us to avoid triggering the resize event when setting both width and height
+        if (!skipListeners) {
+          /**
+           * Triggered when a component is resized.
+           *
+           * @event Component#componentresize
+           * @type {Event}
+           */
+          this.trigger('componentresize');
+        }
+        return;
+      }
+
+      // Not setting a value, so getting it
+      // Make sure element exists
+      if (!this.el_) {
+        return 0;
+      }
+
+      // Get dimension value from style
+      const val = this.el_.style[widthOrHeight];
+      const pxIndex = val.indexOf('px');
+      if (pxIndex !== -1) {
+        // Return the pixel value with no 'px'
+        return parseInt(val.slice(0, pxIndex), 10);
+      }
+
+      // No px so using % or no style was set, so falling back to offsetWidth/height
+      // If component has display:none, offset will return 0
+      // TODO: handle display:none and no dimension style using px
+      return parseInt(this.el_['offset' + toTitleCase(widthOrHeight)], 10);
+    }
+
+    /**
+     * Get the computed width or the height of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @param {string} widthOrHeight
+     *        A string containing 'width' or 'height'. Whichever one you want to get.
+     *
+     * @return {number}
+     *         The dimension that gets asked for or 0 if nothing was set
+     *         for that dimension.
+     */
+    currentDimension(widthOrHeight) {
+      let computedWidthOrHeight = 0;
+      if (widthOrHeight !== 'width' && widthOrHeight !== 'height') {
+        throw new Error('currentDimension only accepts width or height value');
+      }
+      computedWidthOrHeight = computedStyle(this.el_, widthOrHeight);
+
+      // remove 'px' from variable and parse as integer
+      computedWidthOrHeight = parseFloat(computedWidthOrHeight);
+
+      // if the computed value is still 0, it's possible that the browser is lying
+      // and we want to check the offset values.
+      // This code also runs wherever getComputedStyle doesn't exist.
+      if (computedWidthOrHeight === 0 || isNaN(computedWidthOrHeight)) {
+        const rule = `offset${toTitleCase(widthOrHeight)}`;
+        computedWidthOrHeight = this.el_[rule];
+      }
+      return computedWidthOrHeight;
+    }
+
+    /**
+     * An object that contains width and height values of the `Component`s
+     * computed style. Uses `window.getComputedStyle`.
+     *
+     * @typedef {Object} Component~DimensionObject
+     *
+     * @property {number} width
+     *           The width of the `Component`s computed style.
+     *
+     * @property {number} height
+     *           The height of the `Component`s computed style.
+     */
+
+    /**
+     * Get an object that contains computed width and height values of the
+     * component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {Component~DimensionObject}
+     *         The computed dimensions of the component's element.
+     */
+    currentDimensions() {
+      return {
+        width: this.currentDimension('width'),
+        height: this.currentDimension('height')
+      };
+    }
+
+    /**
+     * Get the computed width of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {number}
+     *         The computed width of the component's element.
+     */
+    currentWidth() {
+      return this.currentDimension('width');
+    }
+
+    /**
+     * Get the computed height of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {number}
+     *         The computed height of the component's element.
+     */
+    currentHeight() {
+      return this.currentDimension('height');
+    }
+
+    /**
+     * Set the focus to this component
+     */
+    focus() {
+      this.el_.focus();
+    }
+
+    /**
+     * Remove the focus from this component
+     */
+    blur() {
+      this.el_.blur();
+    }
+
+    /**
+     * When this Component receives a `keydown` event which it does not process,
+     *  it passes the event to the Player for handling.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     */
+    handleKeyDown(event) {
+      if (this.player_) {
+        // We only stop propagation here because we want unhandled events to fall
+        // back to the browser. Exclude Tab for focus trapping.
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.stopPropagation();
+        }
+        this.player_.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Many components used to have a `handleKeyPress` method, which was poorly
+     * named because it listened to a `keydown` event. This method name now
+     * delegates to `handleKeyDown`. This means anyone calling `handleKeyPress`
+     * will not see their method calls stop working.
+     *
+     * @param {KeyboardEvent} event
+     *        The event that caused this function to be called.
+     */
+    handleKeyPress(event) {
+      this.handleKeyDown(event);
+    }
+
+    /**
+     * Emit a 'tap' events when touch event support gets detected. This gets used to
+     * support toggling the controls through a tap on the video. They get enabled
+     * because every sub-component would have extra overhead otherwise.
+     *
+     * @protected
+     * @fires Component#tap
+     * @listens Component#touchstart
+     * @listens Component#touchmove
+     * @listens Component#touchleave
+     * @listens Component#touchcancel
+     * @listens Component#touchend
+      */
+    emitTapEvents() {
+      // Track the start time so we can determine how long the touch lasted
+      let touchStart = 0;
+      let firstTouch = null;
+
+      // Maximum movement allowed during a touch event to still be considered a tap
+      // Other popular libs use anywhere from 2 (hammer.js) to 15,
+      // so 10 seems like a nice, round number.
+      const tapMovementThreshold = 10;
+
+      // The maximum length a touch can be while still being considered a tap
+      const touchTimeThreshold = 200;
+      let couldBeTap;
+      this.on('touchstart', function (event) {
+        // If more than one finger, don't consider treating this as a click
+        if (event.touches.length === 1) {
+          // Copy pageX/pageY from the object
+          firstTouch = {
+            pageX: event.touches[0].pageX,
+            pageY: event.touches[0].pageY
+          };
+          // Record start time so we can detect a tap vs. "touch and hold"
+          touchStart = window.performance.now();
+          // Reset couldBeTap tracking
+          couldBeTap = true;
+        }
+      });
+      this.on('touchmove', function (event) {
+        // If more than one finger, don't consider treating this as a click
+        if (event.touches.length > 1) {
+          couldBeTap = false;
+        } else if (firstTouch) {
+          // Some devices will throw touchmoves for all but the slightest of taps.
+          // So, if we moved only a small distance, this could still be a tap
+          const xdiff = event.touches[0].pageX - firstTouch.pageX;
+          const ydiff = event.touches[0].pageY - firstTouch.pageY;
+          const touchDistance = Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+          if (touchDistance > tapMovementThreshold) {
+            couldBeTap = false;
+          }
+        }
+      });
+      const noTap = function () {
+        couldBeTap = false;
+      };
+
+      // TODO: Listen to the original target. http://youtu.be/DujfpXOKUp8?t=13m8s
+      this.on('touchleave', noTap);
+      this.on('touchcancel', noTap);
+
+      // When the touch ends, measure how long it took and trigger the appropriate
+      // event
+      this.on('touchend', function (event) {
+        firstTouch = null;
+        // Proceed only if the touchmove/leave/cancel event didn't happen
+        if (couldBeTap === true) {
+          // Measure how long the touch lasted
+          const touchTime = window.performance.now() - touchStart;
+
+          // Make sure the touch was less than the threshold to be considered a tap
+          if (touchTime < touchTimeThreshold) {
+            // Don't let browser turn this into a click
+            event.preventDefault();
+            /**
+             * Triggered when a `Component` is tapped.
+             *
+             * @event Component#tap
+             * @type {MouseEvent}
+             */
+            this.trigger('tap');
+            // It may be good to copy the touchend event object and change the
+            // type to tap, if the other event properties aren't exact after
+            // Events.fixEvent runs (e.g. event.target)
+          }
+        }
+      });
+    }
+
+    /**
+     * This function reports user activity whenever touch events happen. This can get
+     * turned off by any sub-components that wants touch events to act another way.
+     *
+     * Report user touch activity when touch events occur. User activity gets used to
+     * determine when controls should show/hide. It is simple when it comes to mouse
+     * events, because any mouse event should show the controls. So we capture mouse
+     * events that bubble up to the player and report activity when that happens.
+     * With touch events it isn't as easy as `touchstart` and `touchend` toggle player
+     * controls. So touch events can't help us at the player level either.
+     *
+     * User activity gets checked asynchronously. So what could happen is a tap event
+     * on the video turns the controls off. Then the `touchend` event bubbles up to
+     * the player. Which, if it reported user activity, would turn the controls right
+     * back on. We also don't want to completely block touch events from bubbling up.
+     * Furthermore a `touchmove` event and anything other than a tap, should not turn
+     * controls back on.
+     *
+     * @listens Component#touchstart
+     * @listens Component#touchmove
+     * @listens Component#touchend
+     * @listens Component#touchcancel
+     */
+    enableTouchActivity() {
+      // Don't continue if the root player doesn't support reporting user activity
+      if (!this.player() || !this.player().reportUserActivity) {
+        return;
+      }
+
+      // listener for reporting that the user is active
+      const report = bind_(this.player(), this.player().reportUserActivity);
+      let touchHolding;
+      this.on('touchstart', function () {
+        report();
+        // For as long as the they are touching the device or have their mouse down,
+        // we consider them active even if they're not moving their finger or mouse.
+        // So we want to continue to update that they are active
+        this.clearInterval(touchHolding);
+        // report at the same interval as activityCheck
+        touchHolding = this.setInterval(report, 250);
+      });
+      const touchEnd = function (event) {
+        report();
+        // stop the interval that maintains activity if the touch is holding
+        this.clearInterval(touchHolding);
+      };
+      this.on('touchmove', report);
+      this.on('touchend', touchEnd);
+      this.on('touchcancel', touchEnd);
+    }
+
+    /**
+     * A callback that has no parameters and is bound into `Component`s context.
+     *
+     * @callback Component~GenericCallback
+     * @this Component
+     */
+
+    /**
+     * Creates a function that runs after an `x` millisecond timeout. This function is a
+     * wrapper around `window.setTimeout`. There are a few reasons to use this one
+     * instead though:
+     * 1. It gets cleared via  {@link Component#clearTimeout} when
+     *    {@link Component#dispose} gets called.
+     * 2. The function callback will gets turned into a {@link Component~GenericCallback}
+     *
+     * > Note: You can't use `window.clearTimeout` on the id returned by this function. This
+     *         will cause its dispose listener not to get cleaned up! Please use
+     *         {@link Component#clearTimeout} or {@link Component#dispose} instead.
+     *
+     * @param {Component~GenericCallback} fn
+     *        The function that will be run after `timeout`.
+     *
+     * @param {number} timeout
+     *        Timeout in milliseconds to delay before executing the specified function.
+     *
+     * @return {number}
+     *         Returns a timeout ID that gets used to identify the timeout. It can also
+     *         get used in {@link Component#clearTimeout} to clear the timeout that
+     *         was set.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout}
+     */
+    setTimeout(fn, timeout) {
+      // declare as variables so they are properly available in timeout function
+      // eslint-disable-next-line
+      var timeoutId;
+      fn = bind_(this, fn);
+      this.clearTimersOnDispose_();
+      timeoutId = window.setTimeout(() => {
+        if (this.setTimeoutIds_.has(timeoutId)) {
+          this.setTimeoutIds_.delete(timeoutId);
+        }
+        fn();
+      }, timeout);
+      this.setTimeoutIds_.add(timeoutId);
+      return timeoutId;
+    }
+
+    /**
+     * Clears a timeout that gets created via `window.setTimeout` or
+     * {@link Component#setTimeout}. If you set a timeout via {@link Component#setTimeout}
+     * use this function instead of `window.clearTimout`. If you don't your dispose
+     * listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} timeoutId
+     *        The id of the timeout to clear. The return value of
+     *        {@link Component#setTimeout} or `window.setTimeout`.
+     *
+     * @return {number}
+     *         Returns the timeout id that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout}
+     */
+    clearTimeout(timeoutId) {
+      if (this.setTimeoutIds_.has(timeoutId)) {
+        this.setTimeoutIds_.delete(timeoutId);
+        window.clearTimeout(timeoutId);
+      }
+      return timeoutId;
+    }
+
+    /**
+     * Creates a function that gets run every `x` milliseconds. This function is a wrapper
+     * around `window.setInterval`. There are a few reasons to use this one instead though.
+     * 1. It gets cleared via  {@link Component#clearInterval} when
+     *    {@link Component#dispose} gets called.
+     * 2. The function callback will be a {@link Component~GenericCallback}
+     *
+     * @param {Component~GenericCallback} fn
+     *        The function to run every `x` seconds.
+     *
+     * @param {number} interval
+     *        Execute the specified function every `x` milliseconds.
+     *
+     * @return {number}
+     *         Returns an id that can be used to identify the interval. It can also be be used in
+     *         {@link Component#clearInterval} to clear the interval.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval}
+     */
+    setInterval(fn, interval) {
+      fn = bind_(this, fn);
+      this.clearTimersOnDispose_();
+      const intervalId = window.setInterval(fn, interval);
+      this.setIntervalIds_.add(intervalId);
+      return intervalId;
+    }
+
+    /**
+     * Clears an interval that gets created via `window.setInterval` or
+     * {@link Component#setInterval}. If you set an interval via {@link Component#setInterval}
+     * use this function instead of `window.clearInterval`. If you don't your dispose
+     * listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} intervalId
+     *        The id of the interval to clear. The return value of
+     *        {@link Component#setInterval} or `window.setInterval`.
+     *
+     * @return {number}
+     *         Returns the interval id that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval}
+     */
+    clearInterval(intervalId) {
+      if (this.setIntervalIds_.has(intervalId)) {
+        this.setIntervalIds_.delete(intervalId);
+        window.clearInterval(intervalId);
+      }
+      return intervalId;
+    }
+
+    /**
+     * Queues up a callback to be passed to requestAnimationFrame (rAF), but
+     * with a few extra bonuses:
+     *
+     * - Supports browsers that do not support rAF by falling back to
+     *   {@link Component#setTimeout}.
+     *
+     * - The callback is turned into a {@link Component~GenericCallback} (i.e.
+     *   bound to the component).
+     *
+     * - Automatic cancellation of the rAF callback is handled if the component
+     *   is disposed before it is called.
+     *
+     * @param  {Component~GenericCallback} fn
+     *         A function that will be bound to this component and executed just
+     *         before the browser's next repaint.
+     *
+     * @return {number}
+     *         Returns an rAF ID that gets used to identify the timeout. It can
+     *         also be used in {@link Component#cancelAnimationFrame} to cancel
+     *         the animation frame callback.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame}
+     */
+    requestAnimationFrame(fn) {
+      this.clearTimersOnDispose_();
+
+      // declare as variables so they are properly available in rAF function
+      // eslint-disable-next-line
+      var id;
+      fn = bind_(this, fn);
+      id = window.requestAnimationFrame(() => {
+        if (this.rafIds_.has(id)) {
+          this.rafIds_.delete(id);
+        }
+        fn();
+      });
+      this.rafIds_.add(id);
+      return id;
+    }
+
+    /**
+     * Request an animation frame, but only one named animation
+     * frame will be queued. Another will never be added until
+     * the previous one finishes.
+     *
+     * @param {string} name
+     *        The name to give this requestAnimationFrame
+     *
+     * @param  {Component~GenericCallback} fn
+     *         A function that will be bound to this component and executed just
+     *         before the browser's next repaint.
+     */
+    requestNamedAnimationFrame(name, fn) {
+      if (this.namedRafs_.has(name)) {
+        return;
+      }
+      this.clearTimersOnDispose_();
+      fn = bind_(this, fn);
+      const id = this.requestAnimationFrame(() => {
+        fn();
+        if (this.namedRafs_.has(name)) {
+          this.namedRafs_.delete(name);
+        }
+      });
+      this.namedRafs_.set(name, id);
+      return name;
+    }
+
+    /**
+     * Cancels a current named animation frame if it exists.
+     *
+     * @param {string} name
+     *        The name of the requestAnimationFrame to cancel.
+     */
+    cancelNamedAnimationFrame(name) {
+      if (!this.namedRafs_.has(name)) {
+        return;
+      }
+      this.cancelAnimationFrame(this.namedRafs_.get(name));
+      this.namedRafs_.delete(name);
+    }
+
+    /**
+     * Cancels a queued callback passed to {@link Component#requestAnimationFrame}
+     * (rAF).
+     *
+     * If you queue an rAF callback via {@link Component#requestAnimationFrame},
+     * use this function instead of `window.cancelAnimationFrame`. If you don't,
+     * your dispose listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} id
+     *        The rAF ID to clear. The return value of {@link Component#requestAnimationFrame}.
+     *
+     * @return {number}
+     *         Returns the rAF ID that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/cancelAnimationFrame}
+     */
+    cancelAnimationFrame(id) {
+      if (this.rafIds_.has(id)) {
+        this.rafIds_.delete(id);
+        window.cancelAnimationFrame(id);
+      }
+      return id;
+    }
+
+    /**
+     * A function to setup `requestAnimationFrame`, `setTimeout`,
+     * and `setInterval`, clearing on dispose.
+     *
+     * > Previously each timer added and removed dispose listeners on it's own.
+     * For better performance it was decided to batch them all, and use `Set`s
+     * to track outstanding timer ids.
+     *
+     * @private
+     */
+    clearTimersOnDispose_() {
+      if (this.clearingTimersOnDispose_) {
+        return;
+      }
+      this.clearingTimersOnDispose_ = true;
+      this.one('dispose', () => {
+        [['namedRafs_', 'cancelNamedAnimationFrame'], ['rafIds_', 'cancelAnimationFrame'], ['setTimeoutIds_', 'clearTimeout'], ['setIntervalIds_', 'clearInterval']].forEach(([idName, cancelName]) => {
+          // for a `Set` key will actually be the value again
+          // so forEach((val, val) =>` but for maps we want to use
+          // the key.
+          this[idName].forEach((val, key) => this[cancelName](key));
+        });
+        this.clearingTimersOnDispose_ = false;
+      });
+    }
+
+    /**
+     * Register a `Component` with `videojs` given the name and the component.
+     *
+     * > NOTE: {@link Tech}s should not be registered as a `Component`. {@link Tech}s
+     *         should be registered using {@link Tech.registerTech} or
+     *         {@link videojs:videojs.registerTech}.
+     *
+     * > NOTE: This function can also be seen on videojs as
+     *         {@link videojs:videojs.registerComponent}.
+     *
+     * @param {string} name
+     *        The name of the `Component` to register.
+     *
+     * @param {Component} ComponentToRegister
+     *        The `Component` class to register.
+     *
+     * @return {Component}
+     *         The `Component` that was registered.
+     */
+    static registerComponent(name, ComponentToRegister) {
+      if (typeof name !== 'string' || !name) {
+        throw new Error(`Illegal component name, "${name}"; must be a non-empty string.`);
+      }
+      const Tech = Component.getComponent('Tech');
+
+      // We need to make sure this check is only done if Tech has been registered.
+      const isTech = Tech && Tech.isTech(ComponentToRegister);
+      const isComp = Component === ComponentToRegister || Component.prototype.isPrototypeOf(ComponentToRegister.prototype);
+      if (isTech || !isComp) {
+        let reason;
+        if (isTech) {
+          reason = 'techs must be registered using Tech.registerTech()';
+        } else {
+          reason = 'must be a Component subclass';
+        }
+        throw new Error(`Illegal component, "${name}"; ${reason}.`);
+      }
+      name = toTitleCase(name);
+      if (!Component.components_) {
+        Component.components_ = {};
+      }
+      const Player = Component.getComponent('Player');
+      if (name === 'Player' && Player && Player.players) {
+        const players = Player.players;
+        const playerNames = Object.keys(players);
+
+        // If we have players that were disposed, then their name will still be
+        // in Players.players. So, we must loop through and verify that the value
+        // for each item is not null. This allows registration of the Player component
+        // after all players have been disposed or before any were created.
+        if (players && playerNames.length > 0 && playerNames.map(pname => players[pname]).every(Boolean)) {
+          throw new Error('Can not register Player component after player has been created.');
+        }
+      }
+      Component.components_[name] = ComponentToRegister;
+      Component.components_[toLowerCase(name)] = ComponentToRegister;
+      return ComponentToRegister;
+    }
+
+    /**
+     * Get a `Component` based on the name it was registered with.
+     *
+     * @param {string} name
+     *        The Name of the component to get.
+     *
+     * @return {typeof Component}
+     *         The `Component` that got registered under the given name.
+     */
+    static getComponent(name) {
+      if (!name || !Component.components_) {
+        return;
+      }
+      return Component.components_[name];
+    }
+  }
+  Component.registerComponent('Component', Component);
+
+  /**
+   * @file time.js
+   * @module time
+   */
+
+  /**
+   * Returns the time for the specified index at the start or end
+   * of a TimeRange object.
+   *
+   * @typedef    {Function} TimeRangeIndex
+   *
+   * @param      {number} [index=0]
+   *             The range number to return the time for.
+   *
+   * @return     {number}
+   *             The time offset at the specified index.
+   *
+   * @deprecated The index argument must be provided.
+   *             In the future, leaving it out will throw an error.
+   */
+
+  /**
+   * An object that contains ranges of time, which mimics {@link TimeRanges}.
+   *
+   * @typedef  {Object} TimeRange
+   *
+   * @property {number} length
+   *           The number of time ranges represented by this object.
+   *
+   * @property {module:time~TimeRangeIndex} start
+   *           Returns the time offset at which a specified time range begins.
+   *
+   * @property {module:time~TimeRangeIndex} end
+   *           Returns the time offset at which a specified time range ends.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges
+   */
+
+  /**
+   * Check if any of the time ranges are over the maximum index.
+   *
+   * @private
+   * @param   {string} fnName
+   *          The function name to use for logging
+   *
+   * @param   {number} index
+   *          The index to check
+   *
+   * @param   {number} maxIndex
+   *          The maximum possible index
+   *
+   * @throws  {Error} if the timeRanges provided are over the maxIndex
+   */
+  function rangeCheck(fnName, index, maxIndex) {
+    if (typeof index !== 'number' || index < 0 || index > maxIndex) {
+      throw new Error(`Failed to execute '${fnName}' on 'TimeRanges': The index provided (${index}) is non-numeric or out of bounds (0-${maxIndex}).`);
+    }
+  }
+
+  /**
+   * Get the time for the specified index at the start or end
+   * of a TimeRange object.
+   *
+   * @private
+   * @param      {string} fnName
+   *             The function name to use for logging
+   *
+   * @param      {string} valueIndex
+   *             The property that should be used to get the time. should be
+   *             'start' or 'end'
+   *
+   * @param      {Array} ranges
+   *             An array of time ranges
+   *
+   * @param      {Array} [rangeIndex=0]
+   *             The index to start the search at
+   *
+   * @return     {number}
+   *             The time that offset at the specified index.
+   *
+   * @deprecated rangeIndex must be set to a value, in the future this will throw an error.
+   * @throws     {Error} if rangeIndex is more than the length of ranges
+   */
+  function getRange(fnName, valueIndex, ranges, rangeIndex) {
+    rangeCheck(fnName, rangeIndex, ranges.length - 1);
+    return ranges[rangeIndex][valueIndex];
+  }
+
+  /**
+   * Create a time range object given ranges of time.
+   *
+   * @private
+   * @param   {Array} [ranges]
+   *          An array of time ranges.
+   *
+   * @return  {TimeRange}
+   */
+  function createTimeRangesObj(ranges) {
+    let timeRangesObj;
+    if (ranges === undefined || ranges.length === 0) {
+      timeRangesObj = {
+        length: 0,
+        start() {
+          throw new Error('This TimeRanges object is empty');
+        },
+        end() {
+          throw new Error('This TimeRanges object is empty');
+        }
+      };
+    } else {
+      timeRangesObj = {
+        length: ranges.length,
+        start: getRange.bind(null, 'start', 0, ranges),
+        end: getRange.bind(null, 'end', 1, ranges)
+      };
+    }
+    if (window.Symbol && window.Symbol.iterator) {
+      timeRangesObj[window.Symbol.iterator] = () => (ranges || []).values();
+    }
+    return timeRangesObj;
+  }
+
+  /**
+   * Create a `TimeRange` object which mimics an
+   * {@link https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges|HTML5 TimeRanges instance}.
+   *
+   * @param {number|Array[]} start
+   *        The start of a single range (a number) or an array of ranges (an
+   *        array of arrays of two numbers each).
+   *
+   * @param {number} end
+   *        The end of a single range. Cannot be used with the array form of
+   *        the `start` argument.
+   *
+   * @return {TimeRange}
+   */
+  function createTimeRanges(start, end) {
+    if (Array.isArray(start)) {
+      return createTimeRangesObj(start);
+    } else if (start === undefined || end === undefined) {
+      return createTimeRangesObj();
+    }
+    return createTimeRangesObj([[start, end]]);
+  }
+
+  /**
+   * Format seconds as a time string, H:MM:SS or M:SS. Supplying a guide (in
+   * seconds) will force a number of leading zeros to cover the length of the
+   * guide.
+   *
+   * @private
+   * @param  {number} seconds
+   *         Number of seconds to be turned into a string
+   *
+   * @param  {number} guide
+   *         Number (in seconds) to model the string after
+   *
+   * @return {string}
+   *         Time formatted as H:MM:SS or M:SS
+   */
+  const defaultImplementation = function (seconds, guide) {
+    seconds = seconds < 0 ? 0 : seconds;
+    let s = Math.floor(seconds % 60);
+    let m = Math.floor(seconds / 60 % 60);
+    let h = Math.floor(seconds / 3600);
+    const gm = Math.floor(guide / 60 % 60);
+    const gh = Math.floor(guide / 3600);
+
+    // handle invalid times
+    if (isNaN(seconds) || seconds === Infinity) {
+      // '-' is false for all relational operators (e.g. <, >=) so this setting
+      // will add the minimum number of fields specified by the guide
+      h = m = s = '-';
+    }
+
+    // Check if we need to show hours
+    h = h > 0 || gh > 0 ? h + ':' : '';
+
+    // If hours are showing, we may need to add a leading zero.
+    // Always show at least one digit of minutes.
+    m = ((h || gm >= 10) && m < 10 ? '0' + m : m) + ':';
+
+    // Check if leading zero is need for seconds
+    s = s < 10 ? '0' + s : s;
+    return h + m + s;
+  };
+
+  // Internal pointer to the current implementation.
+  let implementation = defaultImplementation;
+
+  /**
+   * Replaces the default formatTime implementation with a custom implementation.
+   *
+   * @param {Function} customImplementation
+   *        A function which will be used in place of the default formatTime
+   *        implementation. Will receive the current time in seconds and the
+   *        guide (in seconds) as arguments.
+   */
+  function setFormatTime(customImplementation) {
+    implementation = customImplementation;
+  }
+
+  /**
+   * Resets formatTime to the default implementation.
+   */
+  function resetFormatTime() {
+    implementation = defaultImplementation;
+  }
+
+  /**
+   * Delegates to either the default time formatting function or a custom
+   * function supplied via `setFormatTime`.
+   *
+   * Formats seconds as a time string (H:MM:SS or M:SS). Supplying a
+   * guide (in seconds) will force a number of leading zeros to cover the
+   * length of the guide.
+   *
+   * @example  formatTime(125, 600) === "02:05"
+   * @param    {number} seconds
+   *           Number of seconds to be turned into a string
+   *
+   * @param    {number} guide
+   *           Number (in seconds) to model the string after
+   *
+   * @return   {string}
+   *           Time formatted as H:MM:SS or M:SS
+   */
+  function formatTime(seconds, guide = seconds) {
+    return implementation(seconds, guide);
+  }
+
+  var Time = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    createTimeRanges: createTimeRanges,
+    createTimeRange: createTimeRanges,
+    setFormatTime: setFormatTime,
+    resetFormatTime: resetFormatTime,
+    formatTime: formatTime
+  });
+
+  /**
+   * @file buffer.js
+   * @module buffer
+   */
+
+  /**
+   * Compute the percentage of the media that has been buffered.
+   *
+   * @param { import('./time').TimeRange } buffered
+   *        The current `TimeRanges` object representing buffered time ranges
+   *
+   * @param {number} duration
+   *        Total duration of the media
+   *
+   * @return {number}
+   *         Percent buffered of the total duration in decimal form.
+   */
+  function bufferedPercent(buffered, duration) {
+    let bufferedDuration = 0;
+    let start;
+    let end;
+    if (!duration) {
+      return 0;
+    }
+    if (!buffered || !buffered.length) {
+      buffered = createTimeRanges(0, 0);
+    }
+    for (let i = 0; i < buffered.length; i++) {
+      start = buffered.start(i);
+      end = buffered.end(i);
+
+      // buffered end can be bigger than duration by a very small fraction
+      if (end > duration) {
+        end = duration;
+      }
+      bufferedDuration += end - start;
+    }
+    return bufferedDuration / duration;
+  }
+
+  /**
+   * @file media-error.js
+   */
+
+  /**
+   * A Custom `MediaError` class which mimics the standard HTML5 `MediaError` class.
+   *
+   * @param {number|string|Object|MediaError} value
+   *        This can be of multiple types:
+   *        - number: should be a standard error code
+   *        - string: an error message (the code will be 0)
+   *        - Object: arbitrary properties
+   *        - `MediaError` (native): used to populate a video.js `MediaError` object
+   *        - `MediaError` (video.js): will return itself if it's already a
+   *          video.js `MediaError` object.
+   *
+   * @see [MediaError Spec]{@link https://dev.w3.org/html5/spec-author-view/video.html#mediaerror}
+   * @see [Encrypted MediaError Spec]{@link https://www.w3.org/TR/2013/WD-encrypted-media-20130510/#error-codes}
+   *
+   * @class MediaError
+   */
+  function MediaError(value) {
+    // Allow redundant calls to this constructor to avoid having `instanceof`
+    // checks peppered around the code.
+    if (value instanceof MediaError) {
+      return value;
+    }
+    if (typeof value === 'number') {
+      this.code = value;
+    } else if (typeof value === 'string') {
+      // default code is zero, so this is a custom error
+      this.message = value;
+    } else if (isObject(value)) {
+      // We assign the `code` property manually because native `MediaError` objects
+      // do not expose it as an own/enumerable property of the object.
+      if (typeof value.code === 'number') {
+        this.code = value.code;
+      }
+      Object.assign(this, value);
+    }
+    if (!this.message) {
+      this.message = MediaError.defaultMessages[this.code] || '';
+    }
+  }
+
+  /**
+   * The error code that refers two one of the defined `MediaError` types
+   *
+   * @type {Number}
+   */
+  MediaError.prototype.code = 0;
+
+  /**
+   * An optional message that to show with the error. Message is not part of the HTML5
+   * video spec but allows for more informative custom errors.
+   *
+   * @type {String}
+   */
+  MediaError.prototype.message = '';
+
+  /**
+   * An optional status code that can be set by plugins to allow even more detail about
+   * the error. For example a plugin might provide a specific HTTP status code and an
+   * error message for that code. Then when the plugin gets that error this class will
+   * know how to display an error message for it. This allows a custom message to show
+   * up on the `Player` error overlay.
+   *
+   * @type {Array}
+   */
+  MediaError.prototype.status = null;
+
+  /**
+   * An object containing an error type, as well as other information regarding the error.
+   *
+   * @typedef {{errorType: string, [key: string]: any}} ErrorMetadata
+   */
+
+  /**
+   * An optional object to give more detail about the error. This can be used to give
+   * a higher level of specificity to an error versus the more generic MediaError codes.
+   * `metadata` expects an `errorType` string that should align with the values from videojs.Error.
+   *
+   * @type {ErrorMetadata}
+   */
+  MediaError.prototype.metadata = null;
+
+  /**
+   * Errors indexed by the W3C standard. The order **CANNOT CHANGE**! See the
+   * specification listed under {@link MediaError} for more information.
+   *
+   * @enum {array}
+   * @readonly
+   * @property {string} 0 - MEDIA_ERR_CUSTOM
+   * @property {string} 1 - MEDIA_ERR_ABORTED
+   * @property {string} 2 - MEDIA_ERR_NETWORK
+   * @property {string} 3 - MEDIA_ERR_DECODE
+   * @property {string} 4 - MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @property {string} 5 - MEDIA_ERR_ENCRYPTED
+   */
+  MediaError.errorTypes = ['MEDIA_ERR_CUSTOM', 'MEDIA_ERR_ABORTED', 'MEDIA_ERR_NETWORK', 'MEDIA_ERR_DECODE', 'MEDIA_ERR_SRC_NOT_SUPPORTED', 'MEDIA_ERR_ENCRYPTED'];
+
+  /**
+   * The default `MediaError` messages based on the {@link MediaError.errorTypes}.
+   *
+   * @type {Array}
+   * @constant
+   */
+  MediaError.defaultMessages = {
+    1: 'You aborted the media playback',
+    2: 'A network error caused the media download to fail part-way.',
+    3: 'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.',
+    4: 'The media could not be loaded, either because the server or network failed or because the format is not supported.',
+    5: 'The media is encrypted and we do not have the keys to decrypt it.'
+  };
+
+  /**
+   * W3C error code for any custom error.
+   *
+   * @member MediaError#MEDIA_ERR_CUSTOM
+   * @constant {number}
+   * @default 0
+   */
+  MediaError.MEDIA_ERR_CUSTOM = 0;
+
+  /**
+   * W3C error code for any custom error.
+   *
+   * @member MediaError.MEDIA_ERR_CUSTOM
+   * @constant {number}
+   * @default 0
+   */
+  MediaError.prototype.MEDIA_ERR_CUSTOM = 0;
+
+  /**
+   * W3C error code for media error aborted.
+   *
+   * @member MediaError#MEDIA_ERR_ABORTED
+   * @constant {number}
+   * @default 1
+   */
+  MediaError.MEDIA_ERR_ABORTED = 1;
+
+  /**
+   * W3C error code for media error aborted.
+   *
+   * @member MediaError.MEDIA_ERR_ABORTED
+   * @constant {number}
+   * @default 1
+   */
+  MediaError.prototype.MEDIA_ERR_ABORTED = 1;
+
+  /**
+   * W3C error code for any network error.
+   *
+   * @member MediaError#MEDIA_ERR_NETWORK
+   * @constant {number}
+   * @default 2
+   */
+  MediaError.MEDIA_ERR_NETWORK = 2;
+
+  /**
+   * W3C error code for any network error.
+   *
+   * @member MediaError.MEDIA_ERR_NETWORK
+   * @constant {number}
+   * @default 2
+   */
+  MediaError.prototype.MEDIA_ERR_NETWORK = 2;
+
+  /**
+   * W3C error code for any decoding error.
+   *
+   * @member MediaError#MEDIA_ERR_DECODE
+   * @constant {number}
+   * @default 3
+   */
+  MediaError.MEDIA_ERR_DECODE = 3;
+
+  /**
+   * W3C error code for any decoding error.
+   *
+   * @member MediaError.MEDIA_ERR_DECODE
+   * @constant {number}
+   * @default 3
+   */
+  MediaError.prototype.MEDIA_ERR_DECODE = 3;
+
+  /**
+   * W3C error code for any time that a source is not supported.
+   *
+   * @member MediaError#MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @constant {number}
+   * @default 4
+   */
+  MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+
+  /**
+   * W3C error code for any time that a source is not supported.
+   *
+   * @member MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @constant {number}
+   * @default 4
+   */
+  MediaError.prototype.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+
+  /**
+   * W3C error code for any time that a source is encrypted.
+   *
+   * @member MediaError#MEDIA_ERR_ENCRYPTED
+   * @constant {number}
+   * @default 5
+   */
+  MediaError.MEDIA_ERR_ENCRYPTED = 5;
+
+  /**
+   * W3C error code for any time that a source is encrypted.
+   *
+   * @member MediaError.MEDIA_ERR_ENCRYPTED
+   * @constant {number}
+   * @default 5
+   */
+  MediaError.prototype.MEDIA_ERR_ENCRYPTED = 5;
+
+  var tuple = SafeParseTuple;
+  function SafeParseTuple(obj, reviver) {
+    var json;
+    var error = null;
+    try {
+      json = JSON.parse(obj, reviver);
+    } catch (err) {
+      error = err;
+    }
+    return [error, json];
+  }
+
+  /**
+   * Returns whether an object is `Promise`-like (i.e. has a `then` method).
+   *
+   * @param  {Object}  value
+   *         An object that may or may not be `Promise`-like.
+   *
+   * @return {boolean}
+   *         Whether or not the object is `Promise`-like.
+   */
+  function isPromise(value) {
+    return value !== undefined && value !== null && typeof value.then === 'function';
+  }
+
+  /**
+   * Silence a Promise-like object.
+   *
+   * This is useful for avoiding non-harmful, but potentially confusing "uncaught
+   * play promise" rejection error messages.
+   *
+   * @param  {Object} value
+   *         An object that may or may not be `Promise`-like.
+   */
+  function silencePromise(value) {
+    if (isPromise(value)) {
+      value.then(null, e => {});
+    }
+  }
+
+  /**
+   * @file text-track-list-converter.js Utilities for capturing text track state and
+   * re-creating tracks based on a capture.
+   *
+   * @module text-track-list-converter
+   */
+
+  /**
+   * Examine a single {@link TextTrack} and return a JSON-compatible javascript object that
+   * represents the {@link TextTrack}'s state.
+   *
+   * @param {TextTrack} track
+   *        The text track to query.
+   *
+   * @return {Object}
+   *         A serializable javascript representation of the TextTrack.
+   * @private
+   */
+  const trackToJson_ = function (track) {
+    const ret = ['kind', 'label', 'language', 'id', 'inBandMetadataTrackDispatchType', 'mode', 'src'].reduce((acc, prop, i) => {
+      if (track[prop]) {
+        acc[prop] = track[prop];
+      }
+      return acc;
+    }, {
+      cues: track.cues && Array.prototype.map.call(track.cues, function (cue) {
+        return {
+          startTime: cue.startTime,
+          endTime: cue.endTime,
+          text: cue.text,
+          id: cue.id
+        };
+      })
+    });
+    return ret;
+  };
+
+  /**
+   * Examine a {@link Tech} and return a JSON-compatible javascript array that represents the
+   * state of all {@link TextTrack}s currently configured. The return array is compatible with
+   * {@link text-track-list-converter:jsonToTextTracks}.
+   *
+   * @param { import('../tech/tech').default } tech
+   *        The tech object to query
+   *
+   * @return {Array}
+   *         A serializable javascript representation of the {@link Tech}s
+   *         {@link TextTrackList}.
+   */
+  const textTracksToJson = function (tech) {
+    const trackEls = tech.$$('track');
+    const trackObjs = Array.prototype.map.call(trackEls, t => t.track);
+    const tracks = Array.prototype.map.call(trackEls, function (trackEl) {
+      const json = trackToJson_(trackEl.track);
+      if (trackEl.src) {
+        json.src = trackEl.src;
+      }
+      return json;
+    });
+    return tracks.concat(Array.prototype.filter.call(tech.textTracks(), function (track) {
+      return trackObjs.indexOf(track) === -1;
+    }).map(trackToJson_));
+  };
+
+  /**
+   * Create a set of remote {@link TextTrack}s on a {@link Tech} based on an array of javascript
+   * object {@link TextTrack} representations.
+   *
+   * @param {Array} json
+   *        An array of `TextTrack` representation objects, like those that would be
+   *        produced by `textTracksToJson`.
+   *
+   * @param {Tech} tech
+   *        The `Tech` to create the `TextTrack`s on.
+   */
+  const jsonToTextTracks = function (json, tech) {
+    json.forEach(function (track) {
+      const addedTrack = tech.addRemoteTextTrack(track).track;
+      if (!track.src && track.cues) {
+        track.cues.forEach(cue => addedTrack.addCue(cue));
+      }
+    });
+    return tech.textTracks();
+  };
+  var textTrackConverter = {
+    textTracksToJson,
+    jsonToTextTracks,
+    trackToJson_
+  };
+
+  /**
+   * @file modal-dialog.js
+   */
+  const MODAL_CLASS_NAME = 'vjs-modal-dialog';
+
+  /**
+   * The `ModalDialog` displays over the video and its controls, which blocks
+   * interaction with the player until it is closed.
+   *
+   * Modal dialogs include a "Close" button and will close when that button
+   * is activated - or when ESC is pressed anywhere.
+   *
+   * @extends Component
+   */
+  class ModalDialog extends Component {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param { import('./utils/dom').ContentDescriptor} [options.content=undefined]
+     *        Provide customized content for this modal.
+     *
+     * @param {string} [options.description]
+     *        A text description for the modal, primarily for accessibility.
+     *
+     * @param {boolean} [options.fillAlways=false]
+     *        Normally, modals are automatically filled only the first time
+     *        they open. This tells the modal to refresh its content
+     *        every time it opens.
+     *
+     * @param {string} [options.label]
+     *        A text label for the modal, primarily for accessibility.
+     *
+     * @param {boolean} [options.pauseOnOpen=true]
+     *        If `true`, playback will will be paused if playing when
+     *        the modal opens, and resumed when it closes.
+     *
+     * @param {boolean} [options.temporary=true]
+     *        If `true`, the modal can only be opened once; it will be
+     *        disposed as soon as it's closed.
+     *
+     * @param {boolean} [options.uncloseable=false]
+     *        If `true`, the user will not be able to close the modal
+     *        through the UI in the normal ways. Programmatic closing is
+     *        still possible.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.close_ = e => this.close(e);
+      this.opened_ = this.hasBeenOpened_ = this.hasBeenFilled_ = false;
+      this.closeable(!this.options_.uncloseable);
+      this.content(this.options_.content);
+
+      // Make sure the contentEl is defined AFTER any children are initialized
+      // because we only want the contents of the modal in the contentEl
+      // (not the UI elements like the close button).
+      this.contentEl_ = createEl('div', {
+        className: `${MODAL_CLASS_NAME}-content`
+      }, {
+        role: 'document'
+      });
+      this.descEl_ = createEl('p', {
+        className: `${MODAL_CLASS_NAME}-description vjs-control-text`,
+        id: this.el().getAttribute('aria-describedby')
+      });
+      textContent(this.descEl_, this.description());
+      this.el_.appendChild(this.descEl_);
+      this.el_.appendChild(this.contentEl_);
+    }
+
+    /**
+     * Create the `ModalDialog`'s DOM element
+     *
+     * @return {Element}
+     *         The DOM element that gets created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildCSSClass(),
+        tabIndex: -1
+      }, {
+        'aria-describedby': `${this.id()}_description`,
+        'aria-hidden': 'true',
+        'aria-label': this.label(),
+        'role': 'dialog',
+        'aria-live': 'polite'
+      });
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.descEl_ = null;
+      this.previouslyActiveEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `${MODAL_CLASS_NAME} vjs-hidden ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Returns the label string for this modal. Primarily used for accessibility.
+     *
+     * @return {string}
+     *         the localized or raw label of this modal.
+     */
+    label() {
+      return this.localize(this.options_.label || 'Modal Window');
+    }
+
+    /**
+     * Returns the description string for this modal. Primarily used for
+     * accessibility.
+     *
+     * @return {string}
+     *         The localized or raw description of this modal.
+     */
+    description() {
+      let desc = this.options_.description || this.localize('This is a modal window.');
+
+      // Append a universal closeability message if the modal is closeable.
+      if (this.closeable()) {
+        desc += ' ' + this.localize('This modal can be closed by pressing the Escape key or activating the close button.');
+      }
+      return desc;
+    }
+
+    /**
+     * Opens the modal.
+     *
+     * @fires ModalDialog#beforemodalopen
+     * @fires ModalDialog#modalopen
+     */
+    open() {
+      if (this.opened_) {
+        if (this.options_.fillAlways) {
+          this.fill();
+        }
+        return;
+      }
+      const player = this.player();
+
+      /**
+        * Fired just before a `ModalDialog` is opened.
+        *
+        * @event ModalDialog#beforemodalopen
+        * @type {Event}
+        */
+      this.trigger('beforemodalopen');
+      this.opened_ = true;
+
+      // Fill content if the modal has never opened before and
+      // never been filled.
+      if (this.options_.fillAlways || !this.hasBeenOpened_ && !this.hasBeenFilled_) {
+        this.fill();
+      }
+
+      // If the player was playing, pause it and take note of its previously
+      // playing state.
+      this.wasPlaying_ = !player.paused();
+      if (this.options_.pauseOnOpen && this.wasPlaying_) {
+        player.pause();
+      }
+      this.on('keydown', this.handleKeyDown_);
+
+      // Hide controls and note if they were enabled.
+      this.hadControls_ = player.controls();
+      player.controls(false);
+      this.show();
+      this.conditionalFocus_();
+      this.el().setAttribute('aria-hidden', 'false');
+
+      /**
+        * Fired just after a `ModalDialog` is opened.
+        *
+        * @event ModalDialog#modalopen
+        * @type {Event}
+        */
+      this.trigger('modalopen');
+      this.hasBeenOpened_ = true;
+    }
+
+    /**
+     * If the `ModalDialog` is currently open or closed.
+     *
+     * @param  {boolean} [value]
+     *         If given, it will open (`true`) or close (`false`) the modal.
+     *
+     * @return {boolean}
+     *         the current open state of the modaldialog
+     */
+    opened(value) {
+      if (typeof value === 'boolean') {
+        this[value ? 'open' : 'close']();
+      }
+      return this.opened_;
+    }
+
+    /**
+     * Closes the modal, does nothing if the `ModalDialog` is
+     * not open.
+     *
+     * @fires ModalDialog#beforemodalclose
+     * @fires ModalDialog#modalclose
+     */
+    close() {
+      if (!this.opened_) {
+        return;
+      }
+      const player = this.player();
+
+      /**
+        * Fired just before a `ModalDialog` is closed.
+        *
+        * @event ModalDialog#beforemodalclose
+        * @type {Event}
+        */
+      this.trigger('beforemodalclose');
+      this.opened_ = false;
+      if (this.wasPlaying_ && this.options_.pauseOnOpen) {
+        player.play();
+      }
+      this.off('keydown', this.handleKeyDown_);
+      if (this.hadControls_) {
+        player.controls(true);
+      }
+      this.hide();
+      this.el().setAttribute('aria-hidden', 'true');
+
+      /**
+        * Fired just after a `ModalDialog` is closed.
+        *
+        * @event ModalDialog#modalclose
+        * @type {Event}
+        */
+      this.trigger('modalclose');
+      this.conditionalBlur_();
+      if (this.options_.temporary) {
+        this.dispose();
+      }
+    }
+
+    /**
+     * Check to see if the `ModalDialog` is closeable via the UI.
+     *
+     * @param  {boolean} [value]
+     *         If given as a boolean, it will set the `closeable` option.
+     *
+     * @return {boolean}
+     *         Returns the final value of the closable option.
+     */
+    closeable(value) {
+      if (typeof value === 'boolean') {
+        const closeable = this.closeable_ = !!value;
+        let close = this.getChild('closeButton');
+
+        // If this is being made closeable and has no close button, add one.
+        if (closeable && !close) {
+          // The close button should be a child of the modal - not its
+          // content element, so temporarily change the content element.
+          const temp = this.contentEl_;
+          this.contentEl_ = this.el_;
+          close = this.addChild('closeButton', {
+            controlText: 'Close Modal Dialog'
+          });
+          this.contentEl_ = temp;
+          this.on(close, 'close', this.close_);
+        }
+
+        // If this is being made uncloseable and has a close button, remove it.
+        if (!closeable && close) {
+          this.off(close, 'close', this.close_);
+          this.removeChild(close);
+          close.dispose();
+        }
+      }
+      return this.closeable_;
+    }
+
+    /**
+     * Fill the modal's content element with the modal's "content" option.
+     * The content element will be emptied before this change takes place.
+     */
+    fill() {
+      this.fillWith(this.content());
+    }
+
+    /**
+     * Fill the modal's content element with arbitrary content.
+     * The content element will be emptied before this change takes place.
+     *
+     * @fires ModalDialog#beforemodalfill
+     * @fires ModalDialog#modalfill
+     *
+     * @param { import('./utils/dom').ContentDescriptor} [content]
+     *        The same rules apply to this as apply to the `content` option.
+     */
+    fillWith(content) {
+      const contentEl = this.contentEl();
+      const parentEl = contentEl.parentNode;
+      const nextSiblingEl = contentEl.nextSibling;
+
+      /**
+        * Fired just before a `ModalDialog` is filled with content.
+        *
+        * @event ModalDialog#beforemodalfill
+        * @type {Event}
+        */
+      this.trigger('beforemodalfill');
+      this.hasBeenFilled_ = true;
+
+      // Detach the content element from the DOM before performing
+      // manipulation to avoid modifying the live DOM multiple times.
+      parentEl.removeChild(contentEl);
+      this.empty();
+      insertContent(contentEl, content);
+      /**
+       * Fired just after a `ModalDialog` is filled with content.
+       *
+       * @event ModalDialog#modalfill
+       * @type {Event}
+       */
+      this.trigger('modalfill');
+
+      // Re-inject the re-filled content element.
+      if (nextSiblingEl) {
+        parentEl.insertBefore(contentEl, nextSiblingEl);
+      } else {
+        parentEl.appendChild(contentEl);
+      }
+
+      // make sure that the close button is last in the dialog DOM
+      const closeButton = this.getChild('closeButton');
+      if (closeButton) {
+        parentEl.appendChild(closeButton.el_);
+      }
+    }
+
+    /**
+     * Empties the content element. This happens anytime the modal is filled.
+     *
+     * @fires ModalDialog#beforemodalempty
+     * @fires ModalDialog#modalempty
+     */
+    empty() {
+      /**
+      * Fired just before a `ModalDialog` is emptied.
+      *
+      * @event ModalDialog#beforemodalempty
+      * @type {Event}
+      */
+      this.trigger('beforemodalempty');
+      emptyEl(this.contentEl());
+
+      /**
+      * Fired just after a `ModalDialog` is emptied.
+      *
+      * @event ModalDialog#modalempty
+      * @type {Event}
+      */
+      this.trigger('modalempty');
+    }
+
+    /**
+     * Gets or sets the modal content, which gets normalized before being
+     * rendered into the DOM.
+     *
+     * This does not update the DOM or fill the modal, but it is called during
+     * that process.
+     *
+     * @param  { import('./utils/dom').ContentDescriptor} [value]
+     *         If defined, sets the internal content value to be used on the
+     *         next call(s) to `fill`. This value is normalized before being
+     *         inserted. To "clear" the internal content value, pass `null`.
+     *
+     * @return { import('./utils/dom').ContentDescriptor}
+     *         The current content of the modal dialog
+     */
+    content(value) {
+      if (typeof value !== 'undefined') {
+        this.content_ = value;
+      }
+      return this.content_;
+    }
+
+    /**
+     * conditionally focus the modal dialog if focus was previously on the player.
+     *
+     * @private
+     */
+    conditionalFocus_() {
+      const activeEl = document.activeElement;
+      const playerEl = this.player_.el_;
+      this.previouslyActiveEl_ = null;
+      if (playerEl.contains(activeEl) || playerEl === activeEl) {
+        this.previouslyActiveEl_ = activeEl;
+        this.focus();
+      }
+    }
+
+    /**
+     * conditionally blur the element and refocus the last focused element
+     *
+     * @private
+     */
+    conditionalBlur_() {
+      if (this.previouslyActiveEl_) {
+        this.previouslyActiveEl_.focus();
+        this.previouslyActiveEl_ = null;
+      }
+    }
+
+    /**
+     * Keydown handler. Attached when modal is focused.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Do not allow keydowns to reach out of the modal dialog.
+      event.stopPropagation();
+      if (keycode.isEventKey(event, 'Escape') && this.closeable()) {
+        event.preventDefault();
+        this.close();
+        return;
+      }
+
+      // exit early if it isn't a tab key
+      if (!keycode.isEventKey(event, 'Tab')) {
+        return;
+      }
+      const focusableEls = this.focusableEls_();
+      const activeEl = this.el_.querySelector(':focus');
+      let focusIndex;
+      for (let i = 0; i < focusableEls.length; i++) {
+        if (activeEl === focusableEls[i]) {
+          focusIndex = i;
+          break;
+        }
+      }
+      if (document.activeElement === this.el_) {
+        focusIndex = 0;
+      }
+      if (event.shiftKey && focusIndex === 0) {
+        focusableEls[focusableEls.length - 1].focus();
+        event.preventDefault();
+      } else if (!event.shiftKey && focusIndex === focusableEls.length - 1) {
+        focusableEls[0].focus();
+        event.preventDefault();
+      }
+    }
+
+    /**
+     * get all focusable elements
+     *
+     * @private
+     */
+    focusableEls_() {
+      const allChildren = this.el_.querySelectorAll('*');
+      return Array.prototype.filter.call(allChildren, child => {
+        return (child instanceof window.HTMLAnchorElement || child instanceof window.HTMLAreaElement) && child.hasAttribute('href') || (child instanceof window.HTMLInputElement || child instanceof window.HTMLSelectElement || child instanceof window.HTMLTextAreaElement || child instanceof window.HTMLButtonElement) && !child.hasAttribute('disabled') || child instanceof window.HTMLIFrameElement || child instanceof window.HTMLObjectElement || child instanceof window.HTMLEmbedElement || child.hasAttribute('tabindex') && child.getAttribute('tabindex') !== -1 || child.hasAttribute('contenteditable');
+      });
+    }
+  }
+
+  /**
+   * Default options for `ModalDialog` default options.
+   *
+   * @type {Object}
+   * @private
+   */
+  ModalDialog.prototype.options_ = {
+    pauseOnOpen: true,
+    temporary: true
+  };
+  Component.registerComponent('ModalDialog', ModalDialog);
+
+  /**
+   * @file track-list.js
+   */
+
+  /**
+   * Common functionaliy between {@link TextTrackList}, {@link AudioTrackList}, and
+   * {@link VideoTrackList}
+   *
+   * @extends EventTarget
+   */
+  class TrackList extends EventTarget {
+    /**
+     * Create an instance of this class
+     *
+     * @param { import('./track').default[] } tracks
+     *        A list of tracks to initialize the list with.
+     *
+     * @abstract
+     */
+    constructor(tracks = []) {
+      super();
+      this.tracks_ = [];
+
+      /**
+       * @memberof TrackList
+       * @member {number} length
+       *         The current number of `Track`s in the this Trackist.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.tracks_.length;
+        }
+      });
+      for (let i = 0; i < tracks.length; i++) {
+        this.addTrack(tracks[i]);
+      }
+    }
+
+    /**
+     * Add a {@link Track} to the `TrackList`
+     *
+     * @param { import('./track').default } track
+     *        The audio, video, or text track to add to the list.
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      const index = this.tracks_.length;
+      if (!('' + index in this)) {
+        Object.defineProperty(this, index, {
+          get() {
+            return this.tracks_[index];
+          }
+        });
+      }
+
+      // Do not add duplicate tracks
+      if (this.tracks_.indexOf(track) === -1) {
+        this.tracks_.push(track);
+        /**
+         * Triggered when a track is added to a track list.
+         *
+         * @event TrackList#addtrack
+         * @type {Event}
+         * @property {Track} track
+         *           A reference to track that was added.
+         */
+        this.trigger({
+          track,
+          type: 'addtrack',
+          target: this
+        });
+      }
+
+      /**
+       * Triggered when a track label is changed.
+       *
+       * @event TrackList#addtrack
+       * @type {Event}
+       * @property {Track} track
+       *           A reference to track that was added.
+       */
+      track.labelchange_ = () => {
+        this.trigger({
+          track,
+          type: 'labelchange',
+          target: this
+        });
+      };
+      if (isEvented(track)) {
+        track.addEventListener('labelchange', track.labelchange_);
+      }
+    }
+
+    /**
+     * Remove a {@link Track} from the `TrackList`
+     *
+     * @param { import('./track').default } rtrack
+     *        The audio, video, or text track to remove from the list.
+     *
+     * @fires TrackList#removetrack
+     */
+    removeTrack(rtrack) {
+      let track;
+      for (let i = 0, l = this.length; i < l; i++) {
+        if (this[i] === rtrack) {
+          track = this[i];
+          if (track.off) {
+            track.off();
+          }
+          this.tracks_.splice(i, 1);
+          break;
+        }
+      }
+      if (!track) {
+        return;
+      }
+
+      /**
+       * Triggered when a track is removed from track list.
+       *
+       * @event TrackList#removetrack
+       * @type {Event}
+       * @property {Track} track
+       *           A reference to track that was removed.
+       */
+      this.trigger({
+        track,
+        type: 'removetrack',
+        target: this
+      });
+    }
+
+    /**
+     * Get a Track from the TrackList by a tracks id
+     *
+     * @param {string} id - the id of the track to get
+     * @method getTrackById
+     * @return { import('./track').default }
+     * @private
+     */
+    getTrackById(id) {
+      let result = null;
+      for (let i = 0, l = this.length; i < l; i++) {
+        const track = this[i];
+        if (track.id === id) {
+          result = track;
+          break;
+        }
+      }
+      return result;
+    }
+  }
+
+  /**
+   * Triggered when a different track is selected/enabled.
+   *
+   * @event TrackList#change
+   * @type {Event}
+   */
+
+  /**
+   * Events that can be called with on + eventName. See {@link EventHandler}.
+   *
+   * @property {Object} TrackList#allowedEvents_
+   * @protected
+   */
+  TrackList.prototype.allowedEvents_ = {
+    change: 'change',
+    addtrack: 'addtrack',
+    removetrack: 'removetrack',
+    labelchange: 'labelchange'
+  };
+
+  // emulate attribute EventHandler support to allow for feature detection
+  for (const event in TrackList.prototype.allowedEvents_) {
+    TrackList.prototype['on' + event] = null;
+  }
+
+  /**
+   * @file audio-track-list.js
+   */
+
+  /**
+   * Anywhere we call this function we diverge from the spec
+   * as we only support one enabled audiotrack at a time
+   *
+   * @param {AudioTrackList} list
+   *        list to work on
+   *
+   * @param { import('./audio-track').default } track
+   *        The track to skip
+   *
+   * @private
+   */
+  const disableOthers$1 = function (list, track) {
+    for (let i = 0; i < list.length; i++) {
+      if (!Object.keys(list[i]).length || track.id === list[i].id) {
+        continue;
+      }
+      // another audio track is enabled, disable it
+      list[i].enabled = false;
+    }
+  };
+
+  /**
+   * The current list of {@link AudioTrack} for a media file.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist}
+   * @extends TrackList
+   */
+  class AudioTrackList extends TrackList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./audio-track').default[] } [tracks=[]]
+     *        A list of `AudioTrack` to instantiate the list with.
+     */
+    constructor(tracks = []) {
+      // make sure only 1 track is enabled
+      // sorted from last index to first index
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        if (tracks[i].enabled) {
+          disableOthers$1(tracks, tracks[i]);
+          break;
+        }
+      }
+      super(tracks);
+      this.changing_ = false;
+    }
+
+    /**
+     * Add an {@link AudioTrack} to the `AudioTrackList`.
+     *
+     * @param { import('./audio-track').default } track
+     *        The AudioTrack to add to the list
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      if (track.enabled) {
+        disableOthers$1(this, track);
+      }
+      super.addTrack(track);
+      // native tracks don't have this
+      if (!track.addEventListener) {
+        return;
+      }
+      track.enabledChange_ = () => {
+        // when we are disabling other tracks (since we don't support
+        // more than one track at a time) we will set changing_
+        // to true so that we don't trigger additional change events
+        if (this.changing_) {
+          return;
+        }
+        this.changing_ = true;
+        disableOthers$1(this, track);
+        this.changing_ = false;
+        this.trigger('change');
+      };
+
+      /**
+       * @listens AudioTrack#enabledchange
+       * @fires TrackList#change
+       */
+      track.addEventListener('enabledchange', track.enabledChange_);
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+      if (rtrack.removeEventListener && rtrack.enabledChange_) {
+        rtrack.removeEventListener('enabledchange', rtrack.enabledChange_);
+        rtrack.enabledChange_ = null;
+      }
+    }
+  }
+
+  /**
+   * @file video-track-list.js
+   */
+
+  /**
+   * Un-select all other {@link VideoTrack}s that are selected.
+   *
+   * @param {VideoTrackList} list
+   *        list to work on
+   *
+   * @param { import('./video-track').default } track
+   *        The track to skip
+   *
+   * @private
+   */
+  const disableOthers = function (list, track) {
+    for (let i = 0; i < list.length; i++) {
+      if (!Object.keys(list[i]).length || track.id === list[i].id) {
+        continue;
+      }
+      // another video track is enabled, disable it
+      list[i].selected = false;
+    }
+  };
+
+  /**
+   * The current list of {@link VideoTrack} for a video.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist}
+   * @extends TrackList
+   */
+  class VideoTrackList extends TrackList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {VideoTrack[]} [tracks=[]]
+     *        A list of `VideoTrack` to instantiate the list with.
+     */
+    constructor(tracks = []) {
+      // make sure only 1 track is enabled
+      // sorted from last index to first index
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        if (tracks[i].selected) {
+          disableOthers(tracks, tracks[i]);
+          break;
+        }
+      }
+      super(tracks);
+      this.changing_ = false;
+
+      /**
+       * @member {number} VideoTrackList#selectedIndex
+       *         The current index of the selected {@link VideoTrack`}.
+       */
+      Object.defineProperty(this, 'selectedIndex', {
+        get() {
+          for (let i = 0; i < this.length; i++) {
+            if (this[i].selected) {
+              return i;
+            }
+          }
+          return -1;
+        },
+        set() {}
+      });
+    }
+
+    /**
+     * Add a {@link VideoTrack} to the `VideoTrackList`.
+     *
+     * @param { import('./video-track').default } track
+     *        The VideoTrack to add to the list
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      if (track.selected) {
+        disableOthers(this, track);
+      }
+      super.addTrack(track);
+      // native tracks don't have this
+      if (!track.addEventListener) {
+        return;
+      }
+      track.selectedChange_ = () => {
+        if (this.changing_) {
+          return;
+        }
+        this.changing_ = true;
+        disableOthers(this, track);
+        this.changing_ = false;
+        this.trigger('change');
+      };
+
+      /**
+       * @listens VideoTrack#selectedchange
+       * @fires TrackList#change
+       */
+      track.addEventListener('selectedchange', track.selectedChange_);
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+      if (rtrack.removeEventListener && rtrack.selectedChange_) {
+        rtrack.removeEventListener('selectedchange', rtrack.selectedChange_);
+        rtrack.selectedChange_ = null;
+      }
+    }
+  }
+
+  /**
+   * @file text-track-list.js
+   */
+
+  /**
+   * The current list of {@link TextTrack} for a media file.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttracklist}
+   * @extends TrackList
+   */
+  class TextTrackList extends TrackList {
+    /**
+     * Add a {@link TextTrack} to the `TextTrackList`
+     *
+     * @param { import('./text-track').default } track
+     *        The text track to add to the list.
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      super.addTrack(track);
+      if (!this.queueChange_) {
+        this.queueChange_ = () => this.queueTrigger('change');
+      }
+      if (!this.triggerSelectedlanguagechange) {
+        this.triggerSelectedlanguagechange_ = () => this.trigger('selectedlanguagechange');
+      }
+
+      /**
+       * @listens TextTrack#modechange
+       * @fires TrackList#change
+       */
+      track.addEventListener('modechange', this.queueChange_);
+      const nonLanguageTextTrackKind = ['metadata', 'chapters'];
+      if (nonLanguageTextTrackKind.indexOf(track.kind) === -1) {
+        track.addEventListener('modechange', this.triggerSelectedlanguagechange_);
+      }
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+
+      // manually remove the event handlers we added
+      if (rtrack.removeEventListener) {
+        if (this.queueChange_) {
+          rtrack.removeEventListener('modechange', this.queueChange_);
+        }
+        if (this.selectedlanguagechange_) {
+          rtrack.removeEventListener('modechange', this.triggerSelectedlanguagechange_);
+        }
+      }
+    }
+  }
+
+  /**
+   * @file html-track-element-list.js
+   */
+
+  /**
+   * The current list of {@link HtmlTrackElement}s.
+   */
+  class HtmlTrackElementList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {HtmlTrackElement[]} [tracks=[]]
+     *        A list of `HtmlTrackElement` to instantiate the list with.
+     */
+    constructor(trackElements = []) {
+      this.trackElements_ = [];
+
+      /**
+       * @memberof HtmlTrackElementList
+       * @member {number} length
+       *         The current number of `Track`s in the this Trackist.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.trackElements_.length;
+        }
+      });
+      for (let i = 0, length = trackElements.length; i < length; i++) {
+        this.addTrackElement_(trackElements[i]);
+      }
+    }
+
+    /**
+     * Add an {@link HtmlTrackElement} to the `HtmlTrackElementList`
+     *
+     * @param {HtmlTrackElement} trackElement
+     *        The track element to add to the list.
+     *
+     * @private
+     */
+    addTrackElement_(trackElement) {
+      const index = this.trackElements_.length;
+      if (!('' + index in this)) {
+        Object.defineProperty(this, index, {
+          get() {
+            return this.trackElements_[index];
+          }
+        });
+      }
+
+      // Do not add duplicate elements
+      if (this.trackElements_.indexOf(trackElement) === -1) {
+        this.trackElements_.push(trackElement);
+      }
+    }
+
+    /**
+     * Get an {@link HtmlTrackElement} from the `HtmlTrackElementList` given an
+     * {@link TextTrack}.
+     *
+     * @param {TextTrack} track
+     *        The track associated with a track element.
+     *
+     * @return {HtmlTrackElement|undefined}
+     *         The track element that was found or undefined.
+     *
+     * @private
+     */
+    getTrackElementByTrack_(track) {
+      let trackElement_;
+      for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+        if (track === this.trackElements_[i].track) {
+          trackElement_ = this.trackElements_[i];
+          break;
+        }
+      }
+      return trackElement_;
+    }
+
+    /**
+     * Remove a {@link HtmlTrackElement} from the `HtmlTrackElementList`
+     *
+     * @param {HtmlTrackElement} trackElement
+     *        The track element to remove from the list.
+     *
+     * @private
+     */
+    removeTrackElement_(trackElement) {
+      for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+        if (trackElement === this.trackElements_[i]) {
+          if (this.trackElements_[i].track && typeof this.trackElements_[i].track.off === 'function') {
+            this.trackElements_[i].track.off();
+          }
+          if (typeof this.trackElements_[i].off === 'function') {
+            this.trackElements_[i].off();
+          }
+          this.trackElements_.splice(i, 1);
+          break;
+        }
+      }
+    }
+  }
+
+  /**
+   * @file text-track-cue-list.js
+   */
+
+  /**
+   * @typedef {Object} TextTrackCueList~TextTrackCue
+   *
+   * @property {string} id
+   *           The unique id for this text track cue
+   *
+   * @property {number} startTime
+   *           The start time for this text track cue
+   *
+   * @property {number} endTime
+   *           The end time for this text track cue
+   *
+   * @property {boolean} pauseOnExit
+   *           Pause when the end time is reached if true.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue}
+   */
+
+  /**
+   * A List of TextTrackCues.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcuelist}
+   */
+  class TextTrackCueList {
+    /**
+     * Create an instance of this class..
+     *
+     * @param {Array} cues
+     *        A list of cues to be initialized with
+     */
+    constructor(cues) {
+      TextTrackCueList.prototype.setCues_.call(this, cues);
+
+      /**
+       * @memberof TextTrackCueList
+       * @member {number} length
+       *         The current number of `TextTrackCue`s in the TextTrackCueList.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.length_;
+        }
+      });
+    }
+
+    /**
+     * A setter for cues in this list. Creates getters
+     * an an index for the cues.
+     *
+     * @param {Array} cues
+     *        An array of cues to set
+     *
+     * @private
+     */
+    setCues_(cues) {
+      const oldLength = this.length || 0;
+      let i = 0;
+      const l = cues.length;
+      this.cues_ = cues;
+      this.length_ = cues.length;
+      const defineProp = function (index) {
+        if (!('' + index in this)) {
+          Object.defineProperty(this, '' + index, {
+            get() {
+              return this.cues_[index];
+            }
+          });
+        }
+      };
+      if (oldLength < l) {
+        i = oldLength;
+        for (; i < l; i++) {
+          defineProp.call(this, i);
+        }
+      }
+    }
+
+    /**
+     * Get a `TextTrackCue` that is currently in the `TextTrackCueList` by id.
+     *
+     * @param {string} id
+     *        The id of the cue that should be searched for.
+     *
+     * @return {TextTrackCueList~TextTrackCue|null}
+     *         A single cue or null if none was found.
+     */
+    getCueById(id) {
+      let result = null;
+      for (let i = 0, l = this.length; i < l; i++) {
+        const cue = this[i];
+        if (cue.id === id) {
+          result = cue;
+          break;
+        }
+      }
+      return result;
+    }
+  }
+
+  /**
+   * @file track-kinds.js
+   */
+
+  /**
+   * All possible `VideoTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-videotrack-kind
+   * @typedef VideoTrack~Kind
+   * @enum
+   */
+  const VideoTrackKind = {
+    alternative: 'alternative',
+    captions: 'captions',
+    main: 'main',
+    sign: 'sign',
+    subtitles: 'subtitles',
+    commentary: 'commentary'
+  };
+
+  /**
+   * All possible `AudioTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-kind
+   * @typedef AudioTrack~Kind
+   * @enum
+   */
+  const AudioTrackKind = {
+    'alternative': 'alternative',
+    'descriptions': 'descriptions',
+    'main': 'main',
+    'main-desc': 'main-desc',
+    'translation': 'translation',
+    'commentary': 'commentary'
+  };
+
+  /**
+   * All possible `TextTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-texttrack-kind
+   * @typedef TextTrack~Kind
+   * @enum
+   */
+  const TextTrackKind = {
+    subtitles: 'subtitles',
+    captions: 'captions',
+    descriptions: 'descriptions',
+    chapters: 'chapters',
+    metadata: 'metadata'
+  };
+
+  /**
+   * All possible `TextTrackMode`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackmode
+   * @typedef TextTrack~Mode
+   * @enum
+   */
+  const TextTrackMode = {
+    disabled: 'disabled',
+    hidden: 'hidden',
+    showing: 'showing'
+  };
+
+  /**
+   * @file track.js
+   */
+
+  /**
+   * A Track class that contains all of the common functionality for {@link AudioTrack},
+   * {@link VideoTrack}, and {@link TextTrack}.
+   *
+   * > Note: This class should not be used directly
+   *
+   * @see {@link https://html.spec.whatwg.org/multipage/embedded-content.html}
+   * @extends EventTarget
+   * @abstract
+   */
+  class Track extends EventTarget {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {string} [options.kind='']
+     *        A valid kind for the track type you are creating.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @abstract
+     */
+    constructor(options = {}) {
+      super();
+      const trackProps = {
+        id: options.id || 'vjs_track_' + newGUID(),
+        kind: options.kind || '',
+        language: options.language || ''
+      };
+      let label = options.label || '';
+
+      /**
+       * @memberof Track
+       * @member {string} id
+       *         The id of this track. Cannot be changed after creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      /**
+       * @memberof Track
+       * @member {string} kind
+       *         The kind of track that this is. Cannot be changed after creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      /**
+       * @memberof Track
+       * @member {string} language
+       *         The two letter language code for this track. Cannot be changed after
+       *         creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      for (const key in trackProps) {
+        Object.defineProperty(this, key, {
+          get() {
+            return trackProps[key];
+          },
+          set() {}
+        });
+      }
+
+      /**
+       * @memberof Track
+       * @member {string} label
+       *         The label of this track. Cannot be changed after creation.
+       * @instance
+       *
+       * @fires Track#labelchange
+       */
+      Object.defineProperty(this, 'label', {
+        get() {
+          return label;
+        },
+        set(newLabel) {
+          if (newLabel !== label) {
+            label = newLabel;
+
+            /**
+             * An event that fires when label changes on this track.
+             *
+             * > Note: This is not part of the spec!
+             *
+             * @event Track#labelchange
+             * @type {Event}
+             */
+            this.trigger('labelchange');
+          }
+        }
+      });
+    }
+  }
+
+  /**
+   * @file url.js
+   * @module url
+   */
+
+  /**
+   * @typedef {Object} url:URLObject
+   *
+   * @property {string} protocol
+   *           The protocol of the url that was parsed.
+   *
+   * @property {string} hostname
+   *           The hostname of the url that was parsed.
+   *
+   * @property {string} port
+   *           The port of the url that was parsed.
+   *
+   * @property {string} pathname
+   *           The pathname of the url that was parsed.
+   *
+   * @property {string} search
+   *           The search query of the url that was parsed.
+   *
+   * @property {string} hash
+   *           The hash of the url that was parsed.
+   *
+   * @property {string} host
+   *           The host of the url that was parsed.
+   */
+
+  /**
+   * Resolve and parse the elements of a URL.
+   *
+   * @function
+   * @param    {String} url
+   *           The url to parse
+   *
+   * @return   {url:URLObject}
+   *           An object of url details
+   */
+  const parseUrl = function (url) {
+    // This entire method can be replace with URL once we are able to drop IE11
+
+    const props = ['protocol', 'hostname', 'port', 'pathname', 'search', 'hash', 'host'];
+
+    // add the url to an anchor and let the browser parse the URL
+    const a = document.createElement('a');
+    a.href = url;
+
+    // Copy the specific URL properties to a new object
+    // This is also needed for IE because the anchor loses its
+    // properties when it's removed from the dom
+    const details = {};
+    for (let i = 0; i < props.length; i++) {
+      details[props[i]] = a[props[i]];
+    }
+
+    // IE adds the port to the host property unlike everyone else. If
+    // a port identifier is added for standard ports, strip it.
+    if (details.protocol === 'http:') {
+      details.host = details.host.replace(/:80$/, '');
+    }
+    if (details.protocol === 'https:') {
+      details.host = details.host.replace(/:443$/, '');
+    }
+    if (!details.protocol) {
+      details.protocol = window.location.protocol;
+    }
+
+    /* istanbul ignore if */
+    if (!details.host) {
+      details.host = window.location.host;
+    }
+    return details;
+  };
+
+  /**
+   * Get absolute version of relative URL.
+   *
+   * @function
+   * @param    {string} url
+   *           URL to make absolute
+   *
+   * @return   {string}
+   *           Absolute URL
+   *
+   * @see      http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
+   */
+  const getAbsoluteURL = function (url) {
+    // Check if absolute URL
+    if (!url.match(/^https?:\/\//)) {
+      // Add the url to an anchor and let the browser parse it to convert to an absolute url
+      const a = document.createElement('a');
+      a.href = url;
+      url = a.href;
+    }
+    return url;
+  };
+
+  /**
+   * Returns the extension of the passed file name. It will return an empty string
+   * if passed an invalid path.
+   *
+   * @function
+   * @param    {string} path
+   *           The fileName path like '/path/to/file.mp4'
+   *
+   * @return  {string}
+   *           The extension in lower case or an empty string if no
+   *           extension could be found.
+   */
+  const getFileExtension = function (path) {
+    if (typeof path === 'string') {
+      const splitPathRe = /^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/;
+      const pathParts = splitPathRe.exec(path);
+      if (pathParts) {
+        return pathParts.pop().toLowerCase();
+      }
+    }
+    return '';
+  };
+
+  /**
+   * Returns whether the url passed is a cross domain request or not.
+   *
+   * @function
+   * @param    {string} url
+   *           The url to check.
+   *
+   * @param    {Object} [winLoc]
+   *           the domain to check the url against, defaults to window.location
+   *
+   * @param    {string} [winLoc.protocol]
+   *           The window location protocol defaults to window.location.protocol
+   *
+   * @param    {string} [winLoc.host]
+   *           The window location host defaults to window.location.host
+   *
+   * @return   {boolean}
+   *           Whether it is a cross domain request or not.
+   */
+  const isCrossOrigin = function (url, winLoc = window.location) {
+    const urlInfo = parseUrl(url);
+
+    // IE8 protocol relative urls will return ':' for protocol
+    const srcProtocol = urlInfo.protocol === ':' ? winLoc.protocol : urlInfo.protocol;
+
+    // Check if url is for another domain/origin
+    // IE8 doesn't know location.origin, so we won't rely on it here
+    const crossOrigin = srcProtocol + urlInfo.host !== winLoc.protocol + winLoc.host;
+    return crossOrigin;
+  };
+
+  var Url = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    parseUrl: parseUrl,
+    getAbsoluteURL: getAbsoluteURL,
+    getFileExtension: getFileExtension,
+    isCrossOrigin: isCrossOrigin
+  });
+
+  var win;
+  if (typeof window !== "undefined") {
+    win = window;
+  } else if (typeof commonjsGlobal !== "undefined") {
+    win = commonjsGlobal;
+  } else if (typeof self !== "undefined") {
+    win = self;
+  } else {
+    win = {};
+  }
+  var window_1 = win;
+
+  var _extends_1 = createCommonjsModule(function (module) {
+    function _extends() {
+      module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i];
+          for (var key in source) {
+            if (Object.prototype.hasOwnProperty.call(source, key)) {
+              target[key] = source[key];
+            }
+          }
+        }
+        return target;
+      }, module.exports.__esModule = true, module.exports["default"] = module.exports;
+      return _extends.apply(this, arguments);
+    }
+    module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+  unwrapExports(_extends_1);
+
+  var isFunction_1 = isFunction;
+  var toString = Object.prototype.toString;
+  function isFunction(fn) {
+    if (!fn) {
+      return false;
+    }
+    var string = toString.call(fn);
+    return string === '[object Function]' || typeof fn === 'function' && string !== '[object RegExp]' || typeof window !== 'undefined' && (
+    // IE8 and below
+    fn === window.setTimeout || fn === window.alert || fn === window.confirm || fn === window.prompt);
+  }
+
+  var httpResponseHandler = function httpResponseHandler(callback, decodeResponseBody) {
+    if (decodeResponseBody === void 0) {
+      decodeResponseBody = false;
+    }
+    return function (err, response, responseBody) {
+      // if the XHR failed, return that error
+      if (err) {
+        callback(err);
+        return;
+      } // if the HTTP status code is 4xx or 5xx, the request also failed
+
+      if (response.statusCode >= 400 && response.statusCode <= 599) {
+        var cause = responseBody;
+        if (decodeResponseBody) {
+          if (window_1.TextDecoder) {
+            var charset = getCharset(response.headers && response.headers['content-type']);
+            try {
+              cause = new TextDecoder(charset).decode(responseBody);
+            } catch (e) {}
+          } else {
+            cause = String.fromCharCode.apply(null, new Uint8Array(responseBody));
+          }
+        }
+        callback({
+          cause: cause
+        });
+        return;
+      } // otherwise, request succeeded
+
+      callback(null, responseBody);
+    };
+  };
+  function getCharset(contentTypeHeader) {
+    if (contentTypeHeader === void 0) {
+      contentTypeHeader = '';
+    }
+    return contentTypeHeader.toLowerCase().split(';').reduce(function (charset, contentType) {
+      var _contentType$split = contentType.split('='),
+        type = _contentType$split[0],
+        value = _contentType$split[1];
+      if (type.trim() === 'charset') {
+        return value.trim();
+      }
+      return charset;
+    }, 'utf-8');
+  }
+  var httpHandler = httpResponseHandler;
+
+  createXHR.httpHandler = httpHandler;
+  /**
+   * @license
+   * slighly modified parse-headers 2.0.2 <https://github.com/kesla/parse-headers/>
+   * Copyright (c) 2014 David Björklund
+   * Available under the MIT license
+   * <https://github.com/kesla/parse-headers/blob/master/LICENCE>
+   */
+
+  var parseHeaders = function parseHeaders(headers) {
+    var result = {};
+    if (!headers) {
+      return result;
+    }
+    headers.trim().split('\n').forEach(function (row) {
+      var index = row.indexOf(':');
+      var key = row.slice(0, index).trim().toLowerCase();
+      var value = row.slice(index + 1).trim();
+      if (typeof result[key] === 'undefined') {
+        result[key] = value;
+      } else if (Array.isArray(result[key])) {
+        result[key].push(value);
+      } else {
+        result[key] = [result[key], value];
+      }
+    });
+    return result;
+  };
+  var lib = createXHR; // Allow use of default import syntax in TypeScript
+
+  var default_1 = createXHR;
+  createXHR.XMLHttpRequest = window_1.XMLHttpRequest || noop;
+  createXHR.XDomainRequest = "withCredentials" in new createXHR.XMLHttpRequest() ? createXHR.XMLHttpRequest : window_1.XDomainRequest;
+  forEachArray(["get", "put", "post", "patch", "head", "delete"], function (method) {
+    createXHR[method === "delete" ? "del" : method] = function (uri, options, callback) {
+      options = initParams(uri, options, callback);
+      options.method = method.toUpperCase();
+      return _createXHR(options);
+    };
+  });
+  function forEachArray(array, iterator) {
+    for (var i = 0; i < array.length; i++) {
+      iterator(array[i]);
+    }
+  }
+  function isEmpty(obj) {
+    for (var i in obj) {
+      if (obj.hasOwnProperty(i)) return false;
+    }
+    return true;
+  }
+  function initParams(uri, options, callback) {
+    var params = uri;
+    if (isFunction_1(options)) {
+      callback = options;
+      if (typeof uri === "string") {
+        params = {
+          uri: uri
+        };
+      }
+    } else {
+      params = _extends_1({}, options, {
+        uri: uri
+      });
+    }
+    params.callback = callback;
+    return params;
+  }
+  function createXHR(uri, options, callback) {
+    options = initParams(uri, options, callback);
+    return _createXHR(options);
+  }
+  function _createXHR(options) {
+    if (typeof options.callback === "undefined") {
+      throw new Error("callback argument missing");
+    }
+    var called = false;
+    var callback = function cbOnce(err, response, body) {
+      if (!called) {
+        called = true;
+        options.callback(err, response, body);
+      }
+    };
+    function readystatechange() {
+      if (xhr.readyState === 4) {
+        setTimeout(loadFunc, 0);
+      }
+    }
+    function getBody() {
+      // Chrome with requestType=blob throws errors arround when even testing access to responseText
+      var body = undefined;
+      if (xhr.response) {
+        body = xhr.response;
+      } else {
+        body = xhr.responseText || getXml(xhr);
+      }
+      if (isJson) {
+        try {
+          body = JSON.parse(body);
+        } catch (e) {}
+      }
+      return body;
+    }
+    function errorFunc(evt) {
+      clearTimeout(timeoutTimer);
+      if (!(evt instanceof Error)) {
+        evt = new Error("" + (evt || "Unknown XMLHttpRequest Error"));
+      }
+      evt.statusCode = 0;
+      return callback(evt, failureResponse);
+    } // will load the data & process the response in a special response object
+
+    function loadFunc() {
+      if (aborted) return;
+      var status;
+      clearTimeout(timeoutTimer);
+      if (options.useXDR && xhr.status === undefined) {
+        //IE8 CORS GET successful response doesn't have a status field, but body is fine
+        status = 200;
+      } else {
+        status = xhr.status === 1223 ? 204 : xhr.status;
+      }
+      var response = failureResponse;
+      var err = null;
+      if (status !== 0) {
+        response = {
+          body: getBody(),
+          statusCode: status,
+          method: method,
+          headers: {},
+          url: uri,
+          rawRequest: xhr
+        };
+        if (xhr.getAllResponseHeaders) {
+          //remember xhr can in fact be XDR for CORS in IE
+          response.headers = parseHeaders(xhr.getAllResponseHeaders());
+        }
+      } else {
+        err = new Error("Internal XMLHttpRequest Error");
+      }
+      return callback(err, response, response.body);
+    }
+    var xhr = options.xhr || null;
+    if (!xhr) {
+      if (options.cors || options.useXDR) {
+        xhr = new createXHR.XDomainRequest();
+      } else {
+        xhr = new createXHR.XMLHttpRequest();
+      }
+    }
+    var key;
+    var aborted;
+    var uri = xhr.url = options.uri || options.url;
+    var method = xhr.method = options.method || "GET";
+    var body = options.body || options.data;
+    var headers = xhr.headers = options.headers || {};
+    var sync = !!options.sync;
+    var isJson = false;
+    var timeoutTimer;
+    var failureResponse = {
+      body: undefined,
+      headers: {},
+      statusCode: 0,
+      method: method,
+      url: uri,
+      rawRequest: xhr
+    };
+    if ("json" in options && options.json !== false) {
+      isJson = true;
+      headers["accept"] || headers["Accept"] || (headers["Accept"] = "application/json"); //Don't override existing accept header declared by user
+
+      if (method !== "GET" && method !== "HEAD") {
+        headers["content-type"] || headers["Content-Type"] || (headers["Content-Type"] = "application/json"); //Don't override existing accept header declared by user
+
+        body = JSON.stringify(options.json === true ? body : options.json);
+      }
+    }
+    xhr.onreadystatechange = readystatechange;
+    xhr.onload = loadFunc;
+    xhr.onerror = errorFunc; // IE9 must have onprogress be set to a unique function.
+
+    xhr.onprogress = function () {// IE must die
+    };
+    xhr.onabort = function () {
+      aborted = true;
+    };
+    xhr.ontimeout = errorFunc;
+    xhr.open(method, uri, !sync, options.username, options.password); //has to be after open
+
+    if (!sync) {
+      xhr.withCredentials = !!options.withCredentials;
+    } // Cannot set timeout with sync request
+    // not setting timeout on the xhr object, because of old webkits etc. not handling that correctly
+    // both npm's request and jquery 1.x use this kind of timeout, so this is being consistent
+
+    if (!sync && options.timeout > 0) {
+      timeoutTimer = setTimeout(function () {
+        if (aborted) return;
+        aborted = true; //IE9 may still call readystatechange
+
+        xhr.abort("timeout");
+        var e = new Error("XMLHttpRequest timeout");
+        e.code = "ETIMEDOUT";
+        errorFunc(e);
+      }, options.timeout);
+    }
+    if (xhr.setRequestHeader) {
+      for (key in headers) {
+        if (headers.hasOwnProperty(key)) {
+          xhr.setRequestHeader(key, headers[key]);
+        }
+      }
+    } else if (options.headers && !isEmpty(options.headers)) {
+      throw new Error("Headers cannot be set on an XDomainRequest object");
+    }
+    if ("responseType" in options) {
+      xhr.responseType = options.responseType;
+    }
+    if ("beforeSend" in options && typeof options.beforeSend === "function") {
+      options.beforeSend(xhr);
+    } // Microsoft Edge browser sends "undefined" when send is called with undefined value.
+    // XMLHttpRequest spec says to pass null as body to indicate no body
+    // See https://github.com/naugtur/xhr/issues/100.
+
+    xhr.send(body || null);
+    return xhr;
+  }
+  function getXml(xhr) {
+    // xhr.responseXML will throw Exception "InvalidStateError" or "DOMException"
+    // See https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseXML.
+    try {
+      if (xhr.responseType === "document") {
+        return xhr.responseXML;
+      }
+      var firefoxBugTakenEffect = xhr.responseXML && xhr.responseXML.documentElement.nodeName === "parsererror";
+      if (xhr.responseType === "" && !firefoxBugTakenEffect) {
+        return xhr.responseXML;
+      }
+    } catch (e) {}
+    return null;
+  }
+  function noop() {}
+  lib.default = default_1;
+
+  /**
+   * @file text-track.js
+   */
+
+  /**
+   * Takes a webvtt file contents and parses it into cues
+   *
+   * @param {string} srcContent
+   *        webVTT file contents
+   *
+   * @param {TextTrack} track
+   *        TextTrack to add cues to. Cues come from the srcContent.
+   *
+   * @private
+   */
+  const parseCues = function (srcContent, track) {
+    const parser = new window.WebVTT.Parser(window, window.vttjs, window.WebVTT.StringDecoder());
+    const errors = [];
+    parser.oncue = function (cue) {
+      track.addCue(cue);
+    };
+    parser.onparsingerror = function (error) {
+      errors.push(error);
+    };
+    parser.onflush = function () {
+      track.trigger({
+        type: 'loadeddata',
+        target: track
+      });
+    };
+    parser.parse(srcContent);
+    if (errors.length > 0) {
+      if (window.console && window.console.groupCollapsed) {
+        window.console.groupCollapsed(`Text Track parsing errors for ${track.src}`);
+      }
+      errors.forEach(error => log.error(error));
+      if (window.console && window.console.groupEnd) {
+        window.console.groupEnd();
+      }
+    }
+    parser.flush();
+  };
+
+  /**
+   * Load a `TextTrack` from a specified url.
+   *
+   * @param {string} src
+   *        Url to load track from.
+   *
+   * @param {TextTrack} track
+   *        Track to add cues to. Comes from the content at the end of `url`.
+   *
+   * @private
+   */
+  const loadTrack = function (src, track) {
+    const opts = {
+      uri: src
+    };
+    const crossOrigin = isCrossOrigin(src);
+    if (crossOrigin) {
+      opts.cors = crossOrigin;
+    }
+    const withCredentials = track.tech_.crossOrigin() === 'use-credentials';
+    if (withCredentials) {
+      opts.withCredentials = withCredentials;
+    }
+    lib(opts, bind_(this, function (err, response, responseBody) {
+      if (err) {
+        return log.error(err, response);
+      }
+      track.loaded_ = true;
+
+      // Make sure that vttjs has loaded, otherwise, wait till it finished loading
+      // NOTE: this is only used for the alt/video.novtt.js build
+      if (typeof window.WebVTT !== 'function') {
+        if (track.tech_) {
+          // to prevent use before define eslint error, we define loadHandler
+          // as a let here
+          track.tech_.any(['vttjsloaded', 'vttjserror'], event => {
+            if (event.type === 'vttjserror') {
+              log.error(`vttjs failed to load, stopping trying to process ${track.src}`);
+              return;
+            }
+            return parseCues(responseBody, track);
+          });
+        }
+      } else {
+        parseCues(responseBody, track);
+      }
+    }));
+  };
+
+  /**
+   * A representation of a single `TextTrack`.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrack}
+   * @extends Track
+   */
+  class TextTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} options={}
+     *        Object of option names and values
+     *
+     * @param { import('../tech/tech').default } options.tech
+     *        A reference to the tech that owns this TextTrack.
+     *
+     * @param {TextTrack~Kind} [options.kind='subtitles']
+     *        A valid text track kind.
+     *
+     * @param {TextTrack~Mode} [options.mode='disabled']
+     *        A valid text track mode.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this TextTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {string} [options.srclang='']
+     *        A valid two character language code. An alternative, but deprioritized
+     *        version of `options.language`
+     *
+     * @param {string} [options.src]
+     *        A url to TextTrack cues.
+     *
+     * @param {boolean} [options.default]
+     *        If this track should default to on or off.
+     */
+    constructor(options = {}) {
+      if (!options.tech) {
+        throw new Error('A tech was not provided.');
+      }
+      const settings = merge(options, {
+        kind: TextTrackKind[options.kind] || 'subtitles',
+        language: options.language || options.srclang || ''
+      });
+      let mode = TextTrackMode[settings.mode] || 'disabled';
+      const default_ = settings.default;
+      if (settings.kind === 'metadata' || settings.kind === 'chapters') {
+        mode = 'hidden';
+      }
+      super(settings);
+      this.tech_ = settings.tech;
+      this.cues_ = [];
+      this.activeCues_ = [];
+      this.preload_ = this.tech_.preloadTextTracks !== false;
+      const cues = new TextTrackCueList(this.cues_);
+      const activeCues = new TextTrackCueList(this.activeCues_);
+      let changed = false;
+      this.timeupdateHandler = bind_(this, function (event = {}) {
+        if (this.tech_.isDisposed()) {
+          return;
+        }
+        if (!this.tech_.isReady_) {
+          if (event.type !== 'timeupdate') {
+            this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+          }
+          return;
+        }
+
+        // Accessing this.activeCues for the side-effects of updating itself
+        // due to its nature as a getter function. Do not remove or cues will
+        // stop updating!
+        // Use the setter to prevent deletion from uglify (pure_getters rule)
+        this.activeCues = this.activeCues;
+        if (changed) {
+          this.trigger('cuechange');
+          changed = false;
+        }
+        if (event.type !== 'timeupdate') {
+          this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+        }
+      });
+      const disposeHandler = () => {
+        this.stopTracking();
+      };
+      this.tech_.one('dispose', disposeHandler);
+      if (mode !== 'disabled') {
+        this.startTracking();
+      }
+      Object.defineProperties(this, {
+        /**
+         * @memberof TextTrack
+         * @member {boolean} default
+         *         If this track was set to be on or off by default. Cannot be changed after
+         *         creation.
+         * @instance
+         *
+         * @readonly
+         */
+        default: {
+          get() {
+            return default_;
+          },
+          set() {}
+        },
+        /**
+         * @memberof TextTrack
+         * @member {string} mode
+         *         Set the mode of this TextTrack to a valid {@link TextTrack~Mode}. Will
+         *         not be set if setting to an invalid mode.
+         * @instance
+         *
+         * @fires TextTrack#modechange
+         */
+        mode: {
+          get() {
+            return mode;
+          },
+          set(newMode) {
+            if (!TextTrackMode[newMode]) {
+              return;
+            }
+            if (mode === newMode) {
+              return;
+            }
+            mode = newMode;
+            if (!this.preload_ && mode !== 'disabled' && this.cues.length === 0) {
+              // On-demand load.
+              loadTrack(this.src, this);
+            }
+            this.stopTracking();
+            if (mode !== 'disabled') {
+              this.startTracking();
+            }
+            /**
+             * An event that fires when mode changes on this track. This allows
+             * the TextTrackList that holds this track to act accordingly.
+             *
+             * > Note: This is not part of the spec!
+             *
+             * @event TextTrack#modechange
+             * @type {Event}
+             */
+            this.trigger('modechange');
+          }
+        },
+        /**
+         * @memberof TextTrack
+         * @member {TextTrackCueList} cues
+         *         The text track cue list for this TextTrack.
+         * @instance
+         */
+        cues: {
+          get() {
+            if (!this.loaded_) {
+              return null;
+            }
+            return cues;
+          },
+          set() {}
+        },
+        /**
+         * @memberof TextTrack
+         * @member {TextTrackCueList} activeCues
+         *         The list text track cues that are currently active for this TextTrack.
+         * @instance
+         */
+        activeCues: {
+          get() {
+            if (!this.loaded_) {
+              return null;
+            }
+
+            // nothing to do
+            if (this.cues.length === 0) {
+              return activeCues;
+            }
+            const ct = this.tech_.currentTime();
+            const active = [];
+            for (let i = 0, l = this.cues.length; i < l; i++) {
+              const cue = this.cues[i];
+              if (cue.startTime <= ct && cue.endTime >= ct) {
+                active.push(cue);
+              }
+            }
+            changed = false;
+            if (active.length !== this.activeCues_.length) {
+              changed = true;
+            } else {
+              for (let i = 0; i < active.length; i++) {
+                if (this.activeCues_.indexOf(active[i]) === -1) {
+                  changed = true;
+                }
+              }
+            }
+            this.activeCues_ = active;
+            activeCues.setCues_(this.activeCues_);
+            return activeCues;
+          },
+          // /!\ Keep this setter empty (see the timeupdate handler above)
+          set() {}
+        }
+      });
+      if (settings.src) {
+        this.src = settings.src;
+        if (!this.preload_) {
+          // Tracks will load on-demand.
+          // Act like we're loaded for other purposes.
+          this.loaded_ = true;
+        }
+        if (this.preload_ || settings.kind !== 'subtitles' && settings.kind !== 'captions') {
+          loadTrack(this.src, this);
+        }
+      } else {
+        this.loaded_ = true;
+      }
+    }
+    startTracking() {
+      // More precise cues based on requestVideoFrameCallback with a requestAnimationFram fallback
+      this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+      // Also listen to timeupdate in case rVFC/rAF stops (window in background, audio in video el)
+      this.tech_.on('timeupdate', this.timeupdateHandler);
+    }
+    stopTracking() {
+      if (this.rvf_) {
+        this.tech_.cancelVideoFrameCallback(this.rvf_);
+        this.rvf_ = undefined;
+      }
+      this.tech_.off('timeupdate', this.timeupdateHandler);
+    }
+
+    /**
+     * Add a cue to the internal list of cues.
+     *
+     * @param {TextTrack~Cue} cue
+     *        The cue to add to our internal list
+     */
+    addCue(originalCue) {
+      let cue = originalCue;
+
+      // Testing if the cue is a VTTCue in a way that survives minification
+      if (!('getCueAsHTML' in cue)) {
+        cue = new window.vttjs.VTTCue(originalCue.startTime, originalCue.endTime, originalCue.text);
+        for (const prop in originalCue) {
+          if (!(prop in cue)) {
+            cue[prop] = originalCue[prop];
+          }
+        }
+
+        // make sure that `id` is copied over
+        cue.id = originalCue.id;
+        cue.originalCue_ = originalCue;
+      }
+      const tracks = this.tech_.textTracks();
+      for (let i = 0; i < tracks.length; i++) {
+        if (tracks[i] !== this) {
+          tracks[i].removeCue(cue);
+        }
+      }
+      this.cues_.push(cue);
+      this.cues.setCues_(this.cues_);
+    }
+
+    /**
+     * Remove a cue from our internal list
+     *
+     * @param {TextTrack~Cue} removeCue
+     *        The cue to remove from our internal list
+     */
+    removeCue(removeCue) {
+      let i = this.cues_.length;
+      while (i--) {
+        const cue = this.cues_[i];
+        if (cue === removeCue || cue.originalCue_ && cue.originalCue_ === removeCue) {
+          this.cues_.splice(i, 1);
+          this.cues.setCues_(this.cues_);
+          break;
+        }
+      }
+    }
+  }
+
+  /**
+   * cuechange - One or more cues in the track have become active or stopped being active.
+   * @protected
+   */
+  TextTrack.prototype.allowedEvents_ = {
+    cuechange: 'cuechange'
+  };
+
+  /**
+   * A representation of a single `AudioTrack`. If it is part of an {@link AudioTrackList}
+   * only one `AudioTrack` in the list will be enabled at a time.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotrack}
+   * @extends Track
+   */
+  class AudioTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {AudioTrack~Kind} [options.kind='']
+     *        A valid audio track kind
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {boolean} [options.enabled]
+     *        If this track is the one that is currently playing. If this track is part of
+     *        an {@link AudioTrackList}, only one {@link AudioTrack} will be enabled.
+     */
+    constructor(options = {}) {
+      const settings = merge(options, {
+        kind: AudioTrackKind[options.kind] || ''
+      });
+      super(settings);
+      let enabled = false;
+
+      /**
+       * @memberof AudioTrack
+       * @member {boolean} enabled
+       *         If this `AudioTrack` is enabled or not. When setting this will
+       *         fire {@link AudioTrack#enabledchange} if the state of enabled is changed.
+       * @instance
+       *
+       * @fires VideoTrack#selectedchange
+       */
+      Object.defineProperty(this, 'enabled', {
+        get() {
+          return enabled;
+        },
+        set(newEnabled) {
+          // an invalid or unchanged value
+          if (typeof newEnabled !== 'boolean' || newEnabled === enabled) {
+            return;
+          }
+          enabled = newEnabled;
+
+          /**
+           * An event that fires when enabled changes on this track. This allows
+           * the AudioTrackList that holds this track to act accordingly.
+           *
+           * > Note: This is not part of the spec! Native tracks will do
+           *         this internally without an event.
+           *
+           * @event AudioTrack#enabledchange
+           * @type {Event}
+           */
+          this.trigger('enabledchange');
+        }
+      });
+
+      // if the user sets this track to selected then
+      // set selected to that true value otherwise
+      // we keep it false
+      if (settings.enabled) {
+        this.enabled = settings.enabled;
+      }
+      this.loaded_ = true;
+    }
+  }
+
+  /**
+   * A representation of a single `VideoTrack`.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotrack}
+   * @extends Track
+   */
+  class VideoTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {string} [options.kind='']
+     *        A valid {@link VideoTrack~Kind}
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {boolean} [options.selected]
+     *        If this track is the one that is currently playing.
+     */
+    constructor(options = {}) {
+      const settings = merge(options, {
+        kind: VideoTrackKind[options.kind] || ''
+      });
+      super(settings);
+      let selected = false;
+
+      /**
+       * @memberof VideoTrack
+       * @member {boolean} selected
+       *         If this `VideoTrack` is selected or not. When setting this will
+       *         fire {@link VideoTrack#selectedchange} if the state of selected changed.
+       * @instance
+       *
+       * @fires VideoTrack#selectedchange
+       */
+      Object.defineProperty(this, 'selected', {
+        get() {
+          return selected;
+        },
+        set(newSelected) {
+          // an invalid or unchanged value
+          if (typeof newSelected !== 'boolean' || newSelected === selected) {
+            return;
+          }
+          selected = newSelected;
+
+          /**
+           * An event that fires when selected changes on this track. This allows
+           * the VideoTrackList that holds this track to act accordingly.
+           *
+           * > Note: This is not part of the spec! Native tracks will do
+           *         this internally without an event.
+           *
+           * @event VideoTrack#selectedchange
+           * @type {Event}
+           */
+          this.trigger('selectedchange');
+        }
+      });
+
+      // if the user sets this track to selected then
+      // set selected to that true value otherwise
+      // we keep it false
+      if (settings.selected) {
+        this.selected = settings.selected;
+      }
+    }
+  }
+
+  /**
+   * @file html-track-element.js
+   */
+
+  /**
+   * A single track represented in the DOM.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#htmltrackelement}
+   * @extends EventTarget
+   */
+  class HTMLTrackElement extends EventTarget {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} options={}
+     *        Object of option names and values
+     *
+     * @param { import('../tech/tech').default } options.tech
+     *        A reference to the tech that owns this HTMLTrackElement.
+     *
+     * @param {TextTrack~Kind} [options.kind='subtitles']
+     *        A valid text track kind.
+     *
+     * @param {TextTrack~Mode} [options.mode='disabled']
+     *        A valid text track mode.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this TextTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {string} [options.srclang='']
+     *        A valid two character language code. An alternative, but deprioritized
+     *        version of `options.language`
+     *
+     * @param {string} [options.src]
+     *        A url to TextTrack cues.
+     *
+     * @param {boolean} [options.default]
+     *        If this track should default to on or off.
+     */
+    constructor(options = {}) {
+      super();
+      let readyState;
+      const track = new TextTrack(options);
+      this.kind = track.kind;
+      this.src = track.src;
+      this.srclang = track.language;
+      this.label = track.label;
+      this.default = track.default;
+      Object.defineProperties(this, {
+        /**
+         * @memberof HTMLTrackElement
+         * @member {HTMLTrackElement~ReadyState} readyState
+         *         The current ready state of the track element.
+         * @instance
+         */
+        readyState: {
+          get() {
+            return readyState;
+          }
+        },
+        /**
+         * @memberof HTMLTrackElement
+         * @member {TextTrack} track
+         *         The underlying TextTrack object.
+         * @instance
+         *
+         */
+        track: {
+          get() {
+            return track;
+          }
+        }
+      });
+      readyState = HTMLTrackElement.NONE;
+
+      /**
+       * @listens TextTrack#loadeddata
+       * @fires HTMLTrackElement#load
+       */
+      track.addEventListener('loadeddata', () => {
+        readyState = HTMLTrackElement.LOADED;
+        this.trigger({
+          type: 'load',
+          target: this
+        });
+      });
+    }
+  }
+
+  /**
+   * @protected
+   */
+  HTMLTrackElement.prototype.allowedEvents_ = {
+    load: 'load'
+  };
+
+  /**
+   * The text track not loaded state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.NONE = 0;
+
+  /**
+   * The text track loading state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.LOADING = 1;
+
+  /**
+   * The text track loaded state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.LOADED = 2;
+
+  /**
+   * The text track failed to load state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.ERROR = 3;
+
+  /*
+   * This file contains all track properties that are used in
+   * player.js, tech.js, html5.js and possibly other techs in the future.
+   */
+
+  const NORMAL = {
+    audio: {
+      ListClass: AudioTrackList,
+      TrackClass: AudioTrack,
+      capitalName: 'Audio'
+    },
+    video: {
+      ListClass: VideoTrackList,
+      TrackClass: VideoTrack,
+      capitalName: 'Video'
+    },
+    text: {
+      ListClass: TextTrackList,
+      TrackClass: TextTrack,
+      capitalName: 'Text'
+    }
+  };
+  Object.keys(NORMAL).forEach(function (type) {
+    NORMAL[type].getterName = `${type}Tracks`;
+    NORMAL[type].privateName = `${type}Tracks_`;
+  });
+  const REMOTE = {
+    remoteText: {
+      ListClass: TextTrackList,
+      TrackClass: TextTrack,
+      capitalName: 'RemoteText',
+      getterName: 'remoteTextTracks',
+      privateName: 'remoteTextTracks_'
+    },
+    remoteTextEl: {
+      ListClass: HtmlTrackElementList,
+      TrackClass: HTMLTrackElement,
+      capitalName: 'RemoteTextTrackEls',
+      getterName: 'remoteTextTrackEls',
+      privateName: 'remoteTextTrackEls_'
+    }
+  };
+  const ALL = Object.assign({}, NORMAL, REMOTE);
+  REMOTE.names = Object.keys(REMOTE);
+  NORMAL.names = Object.keys(NORMAL);
+  ALL.names = [].concat(REMOTE.names).concat(NORMAL.names);
+
+  var minDoc = {};
+
+  var topLevel = typeof commonjsGlobal !== 'undefined' ? commonjsGlobal : typeof window !== 'undefined' ? window : {};
+  var doccy;
+  if (typeof document !== 'undefined') {
+    doccy = document;
+  } else {
+    doccy = topLevel['__GLOBAL_DOCUMENT_CACHE@4'];
+    if (!doccy) {
+      doccy = topLevel['__GLOBAL_DOCUMENT_CACHE@4'] = minDoc;
+    }
+  }
+  var document_1 = doccy;
+
+  /**
+   * Copyright 2013 vtt.js Contributors
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *   http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+
+  /* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+  /* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+  var _objCreate = Object.create || function () {
+    function F() {}
+    return function (o) {
+      if (arguments.length !== 1) {
+        throw new Error('Object.create shim only accepts one parameter.');
+      }
+      F.prototype = o;
+      return new F();
+    };
+  }();
+
+  // Creates a new ParserError object from an errorData object. The errorData
+  // object should have default code and message properties. The default message
+  // property can be overriden by passing in a message parameter.
+  // See ParsingError.Errors below for acceptable errors.
+  function ParsingError(errorData, message) {
+    this.name = "ParsingError";
+    this.code = errorData.code;
+    this.message = message || errorData.message;
+  }
+  ParsingError.prototype = _objCreate(Error.prototype);
+  ParsingError.prototype.constructor = ParsingError;
+
+  // ParsingError metadata for acceptable ParsingErrors.
+  ParsingError.Errors = {
+    BadSignature: {
+      code: 0,
+      message: "Malformed WebVTT signature."
+    },
+    BadTimeStamp: {
+      code: 1,
+      message: "Malformed time stamp."
+    }
+  };
+
+  // Try to parse input as a time stamp.
+  function parseTimeStamp(input) {
+    function computeSeconds(h, m, s, f) {
+      return (h | 0) * 3600 + (m | 0) * 60 + (s | 0) + (f | 0) / 1000;
+    }
+    var m = input.match(/^(\d+):(\d{1,2})(:\d{1,2})?\.(\d{3})/);
+    if (!m) {
+      return null;
+    }
+    if (m[3]) {
+      // Timestamp takes the form of [hours]:[minutes]:[seconds].[milliseconds]
+      return computeSeconds(m[1], m[2], m[3].replace(":", ""), m[4]);
+    } else if (m[1] > 59) {
+      // Timestamp takes the form of [hours]:[minutes].[milliseconds]
+      // First position is hours as it's over 59.
+      return computeSeconds(m[1], m[2], 0, m[4]);
+    } else {
+      // Timestamp takes the form of [minutes]:[seconds].[milliseconds]
+      return computeSeconds(0, m[1], m[2], m[4]);
+    }
+  }
+
+  // A settings object holds key/value pairs and will ignore anything but the first
+  // assignment to a specific key.
+  function Settings() {
+    this.values = _objCreate(null);
+  }
+  Settings.prototype = {
+    // Only accept the first assignment to any key.
+    set: function (k, v) {
+      if (!this.get(k) && v !== "") {
+        this.values[k] = v;
+      }
+    },
+    // Return the value for a key, or a default value.
+    // If 'defaultKey' is passed then 'dflt' is assumed to be an object with
+    // a number of possible default values as properties where 'defaultKey' is
+    // the key of the property that will be chosen; otherwise it's assumed to be
+    // a single value.
+    get: function (k, dflt, defaultKey) {
+      if (defaultKey) {
+        return this.has(k) ? this.values[k] : dflt[defaultKey];
+      }
+      return this.has(k) ? this.values[k] : dflt;
+    },
+    // Check whether we have a value for a key.
+    has: function (k) {
+      return k in this.values;
+    },
+    // Accept a setting if its one of the given alternatives.
+    alt: function (k, v, a) {
+      for (var n = 0; n < a.length; ++n) {
+        if (v === a[n]) {
+          this.set(k, v);
+          break;
+        }
+      }
+    },
+    // Accept a setting if its a valid (signed) integer.
+    integer: function (k, v) {
+      if (/^-?\d+$/.test(v)) {
+        // integer
+        this.set(k, parseInt(v, 10));
+      }
+    },
+    // Accept a setting if its a valid percentage.
+    percent: function (k, v) {
+      if (v.match(/^([\d]{1,3})(\.[\d]*)?%$/)) {
+        v = parseFloat(v);
+        if (v >= 0 && v <= 100) {
+          this.set(k, v);
+          return true;
+        }
+      }
+      return false;
+    }
+  };
+
+  // Helper function to parse input into groups separated by 'groupDelim', and
+  // interprete each group as a key/value pair separated by 'keyValueDelim'.
+  function parseOptions(input, callback, keyValueDelim, groupDelim) {
+    var groups = groupDelim ? input.split(groupDelim) : [input];
+    for (var i in groups) {
+      if (typeof groups[i] !== "string") {
+        continue;
+      }
+      var kv = groups[i].split(keyValueDelim);
+      if (kv.length !== 2) {
+        continue;
+      }
+      var k = kv[0].trim();
+      var v = kv[1].trim();
+      callback(k, v);
+    }
+  }
+  function parseCue(input, cue, regionList) {
+    // Remember the original input if we need to throw an error.
+    var oInput = input;
+    // 4.1 WebVTT timestamp
+    function consumeTimeStamp() {
+      var ts = parseTimeStamp(input);
+      if (ts === null) {
+        throw new ParsingError(ParsingError.Errors.BadTimeStamp, "Malformed timestamp: " + oInput);
+      }
+      // Remove time stamp from input.
+      input = input.replace(/^[^\sa-zA-Z-]+/, "");
+      return ts;
+    }
+
+    // 4.4.2 WebVTT cue settings
+    function consumeCueSettings(input, cue) {
+      var settings = new Settings();
+      parseOptions(input, function (k, v) {
+        switch (k) {
+          case "region":
+            // Find the last region we parsed with the same region id.
+            for (var i = regionList.length - 1; i >= 0; i--) {
+              if (regionList[i].id === v) {
+                settings.set(k, regionList[i].region);
+                break;
+              }
+            }
+            break;
+          case "vertical":
+            settings.alt(k, v, ["rl", "lr"]);
+            break;
+          case "line":
+            var vals = v.split(","),
+              vals0 = vals[0];
+            settings.integer(k, vals0);
+            settings.percent(k, vals0) ? settings.set("snapToLines", false) : null;
+            settings.alt(k, vals0, ["auto"]);
+            if (vals.length === 2) {
+              settings.alt("lineAlign", vals[1], ["start", "center", "end"]);
+            }
+            break;
+          case "position":
+            vals = v.split(",");
+            settings.percent(k, vals[0]);
+            if (vals.length === 2) {
+              settings.alt("positionAlign", vals[1], ["start", "center", "end"]);
+            }
+            break;
+          case "size":
+            settings.percent(k, v);
+            break;
+          case "align":
+            settings.alt(k, v, ["start", "center", "end", "left", "right"]);
+            break;
+        }
+      }, /:/, /\s/);
+
+      // Apply default values for any missing fields.
+      cue.region = settings.get("region", null);
+      cue.vertical = settings.get("vertical", "");
+      try {
+        cue.line = settings.get("line", "auto");
+      } catch (e) {}
+      cue.lineAlign = settings.get("lineAlign", "start");
+      cue.snapToLines = settings.get("snapToLines", true);
+      cue.size = settings.get("size", 100);
+      // Safari still uses the old middle value and won't accept center
+      try {
+        cue.align = settings.get("align", "center");
+      } catch (e) {
+        cue.align = settings.get("align", "middle");
+      }
+      try {
+        cue.position = settings.get("position", "auto");
+      } catch (e) {
+        cue.position = settings.get("position", {
+          start: 0,
+          left: 0,
+          center: 50,
+          middle: 50,
+          end: 100,
+          right: 100
+        }, cue.align);
+      }
+      cue.positionAlign = settings.get("positionAlign", {
+        start: "start",
+        left: "start",
+        center: "center",
+        middle: "center",
+        end: "end",
+        right: "end"
+      }, cue.align);
+    }
+    function skipWhitespace() {
+      input = input.replace(/^\s+/, "");
+    }
+
+    // 4.1 WebVTT cue timings.
+    skipWhitespace();
+    cue.startTime = consumeTimeStamp(); // (1) collect cue start time
+    skipWhitespace();
+    if (input.substr(0, 3) !== "-->") {
+      // (3) next characters must match "-->"
+      throw new ParsingError(ParsingError.Errors.BadTimeStamp, "Malformed time stamp (time stamps must be separated by '-->'): " + oInput);
+    }
+    input = input.substr(3);
+    skipWhitespace();
+    cue.endTime = consumeTimeStamp(); // (5) collect cue end time
+
+    // 4.1 WebVTT cue settings list.
+    skipWhitespace();
+    consumeCueSettings(input, cue);
+  }
+
+  // When evaluating this file as part of a Webpack bundle for server
+  // side rendering, `document` is an empty object.
+  var TEXTAREA_ELEMENT = document_1.createElement && document_1.createElement("textarea");
+  var TAG_NAME = {
+    c: "span",
+    i: "i",
+    b: "b",
+    u: "u",
+    ruby: "ruby",
+    rt: "rt",
+    v: "span",
+    lang: "span"
+  };
+
+  // 5.1 default text color
+  // 5.2 default text background color is equivalent to text color with bg_ prefix
+  var DEFAULT_COLOR_CLASS = {
+    white: 'rgba(255,255,255,1)',
+    lime: 'rgba(0,255,0,1)',
+    cyan: 'rgba(0,255,255,1)',
+    red: 'rgba(255,0,0,1)',
+    yellow: 'rgba(255,255,0,1)',
+    magenta: 'rgba(255,0,255,1)',
+    blue: 'rgba(0,0,255,1)',
+    black: 'rgba(0,0,0,1)'
+  };
+  var TAG_ANNOTATION = {
+    v: "title",
+    lang: "lang"
+  };
+  var NEEDS_PARENT = {
+    rt: "ruby"
+  };
+
+  // Parse content into a document fragment.
+  function parseContent(window, input) {
+    function nextToken() {
+      // Check for end-of-string.
+      if (!input) {
+        return null;
+      }
+
+      // Consume 'n' characters from the input.
+      function consume(result) {
+        input = input.substr(result.length);
+        return result;
+      }
+      var m = input.match(/^([^<]*)(<[^>]*>?)?/);
+      // If there is some text before the next tag, return it, otherwise return
+      // the tag.
+      return consume(m[1] ? m[1] : m[2]);
+    }
+    function unescape(s) {
+      TEXTAREA_ELEMENT.innerHTML = s;
+      s = TEXTAREA_ELEMENT.textContent;
+      TEXTAREA_ELEMENT.textContent = "";
+      return s;
+    }
+    function shouldAdd(current, element) {
+      return !NEEDS_PARENT[element.localName] || NEEDS_PARENT[element.localName] === current.localName;
+    }
+
+    // Create an element for this tag.
+    function createElement(type, annotation) {
+      var tagName = TAG_NAME[type];
+      if (!tagName) {
+        return null;
+      }
+      var element = window.document.createElement(tagName);
+      var name = TAG_ANNOTATION[type];
+      if (name && annotation) {
+        element[name] = annotation.trim();
+      }
+      return element;
+    }
+    var rootDiv = window.document.createElement("div"),
+      current = rootDiv,
+      t,
+      tagStack = [];
+    while ((t = nextToken()) !== null) {
+      if (t[0] === '<') {
+        if (t[1] === "/") {
+          // If the closing tag matches, move back up to the parent node.
+          if (tagStack.length && tagStack[tagStack.length - 1] === t.substr(2).replace(">", "")) {
+            tagStack.pop();
+            current = current.parentNode;
+          }
+          // Otherwise just ignore the end tag.
+          continue;
+        }
+        var ts = parseTimeStamp(t.substr(1, t.length - 2));
+        var node;
+        if (ts) {
+          // Timestamps are lead nodes as well.
+          node = window.document.createProcessingInstruction("timestamp", ts);
+          current.appendChild(node);
+          continue;
+        }
+        var m = t.match(/^<([^.\s/0-9>]+)(\.[^\s\\>]+)?([^>\\]+)?(\\?)>?$/);
+        // If we can't parse the tag, skip to the next tag.
+        if (!m) {
+          continue;
+        }
+        // Try to construct an element, and ignore the tag if we couldn't.
+        node = createElement(m[1], m[3]);
+        if (!node) {
+          continue;
+        }
+        // Determine if the tag should be added based on the context of where it
+        // is placed in the cuetext.
+        if (!shouldAdd(current, node)) {
+          continue;
+        }
+        // Set the class list (as a list of classes, separated by space).
+        if (m[2]) {
+          var classes = m[2].split('.');
+          classes.forEach(function (cl) {
+            var bgColor = /^bg_/.test(cl);
+            // slice out `bg_` if it's a background color
+            var colorName = bgColor ? cl.slice(3) : cl;
+            if (DEFAULT_COLOR_CLASS.hasOwnProperty(colorName)) {
+              var propName = bgColor ? 'background-color' : 'color';
+              var propValue = DEFAULT_COLOR_CLASS[colorName];
+              node.style[propName] = propValue;
+            }
+          });
+          node.className = classes.join(' ');
+        }
+        // Append the node to the current node, and enter the scope of the new
+        // node.
+        tagStack.push(m[1]);
+        current.appendChild(node);
+        current = node;
+        continue;
+      }
+
+      // Text nodes are leaf nodes.
+      current.appendChild(window.document.createTextNode(unescape(t)));
+    }
+    return rootDiv;
+  }
+
+  // This is a list of all the Unicode characters that have a strong
+  // right-to-left category. What this means is that these characters are
+  // written right-to-left for sure. It was generated by pulling all the strong
+  // right-to-left characters out of the Unicode data table. That table can
+  // found at: http://www.unicode.org/Public/UNIDATA/UnicodeData.txt
+  var strongRTLRanges = [[0x5be, 0x5be], [0x5c0, 0x5c0], [0x5c3, 0x5c3], [0x5c6, 0x5c6], [0x5d0, 0x5ea], [0x5f0, 0x5f4], [0x608, 0x608], [0x60b, 0x60b], [0x60d, 0x60d], [0x61b, 0x61b], [0x61e, 0x64a], [0x66d, 0x66f], [0x671, 0x6d5], [0x6e5, 0x6e6], [0x6ee, 0x6ef], [0x6fa, 0x70d], [0x70f, 0x710], [0x712, 0x72f], [0x74d, 0x7a5], [0x7b1, 0x7b1], [0x7c0, 0x7ea], [0x7f4, 0x7f5], [0x7fa, 0x7fa], [0x800, 0x815], [0x81a, 0x81a], [0x824, 0x824], [0x828, 0x828], [0x830, 0x83e], [0x840, 0x858], [0x85e, 0x85e], [0x8a0, 0x8a0], [0x8a2, 0x8ac], [0x200f, 0x200f], [0xfb1d, 0xfb1d], [0xfb1f, 0xfb28], [0xfb2a, 0xfb36], [0xfb38, 0xfb3c], [0xfb3e, 0xfb3e], [0xfb40, 0xfb41], [0xfb43, 0xfb44], [0xfb46, 0xfbc1], [0xfbd3, 0xfd3d], [0xfd50, 0xfd8f], [0xfd92, 0xfdc7], [0xfdf0, 0xfdfc], [0xfe70, 0xfe74], [0xfe76, 0xfefc], [0x10800, 0x10805], [0x10808, 0x10808], [0x1080a, 0x10835], [0x10837, 0x10838], [0x1083c, 0x1083c], [0x1083f, 0x10855], [0x10857, 0x1085f], [0x10900, 0x1091b], [0x10920, 0x10939], [0x1093f, 0x1093f], [0x10980, 0x109b7], [0x109be, 0x109bf], [0x10a00, 0x10a00], [0x10a10, 0x10a13], [0x10a15, 0x10a17], [0x10a19, 0x10a33], [0x10a40, 0x10a47], [0x10a50, 0x10a58], [0x10a60, 0x10a7f], [0x10b00, 0x10b35], [0x10b40, 0x10b55], [0x10b58, 0x10b72], [0x10b78, 0x10b7f], [0x10c00, 0x10c48], [0x1ee00, 0x1ee03], [0x1ee05, 0x1ee1f], [0x1ee21, 0x1ee22], [0x1ee24, 0x1ee24], [0x1ee27, 0x1ee27], [0x1ee29, 0x1ee32], [0x1ee34, 0x1ee37], [0x1ee39, 0x1ee39], [0x1ee3b, 0x1ee3b], [0x1ee42, 0x1ee42], [0x1ee47, 0x1ee47], [0x1ee49, 0x1ee49], [0x1ee4b, 0x1ee4b], [0x1ee4d, 0x1ee4f], [0x1ee51, 0x1ee52], [0x1ee54, 0x1ee54], [0x1ee57, 0x1ee57], [0x1ee59, 0x1ee59], [0x1ee5b, 0x1ee5b], [0x1ee5d, 0x1ee5d], [0x1ee5f, 0x1ee5f], [0x1ee61, 0x1ee62], [0x1ee64, 0x1ee64], [0x1ee67, 0x1ee6a], [0x1ee6c, 0x1ee72], [0x1ee74, 0x1ee77], [0x1ee79, 0x1ee7c], [0x1ee7e, 0x1ee7e], [0x1ee80, 0x1ee89], [0x1ee8b, 0x1ee9b], [0x1eea1, 0x1eea3], [0x1eea5, 0x1eea9], [0x1eeab, 0x1eebb], [0x10fffd, 0x10fffd]];
+  function isStrongRTLChar(charCode) {
+    for (var i = 0; i < strongRTLRanges.length; i++) {
+      var currentRange = strongRTLRanges[i];
+      if (charCode >= currentRange[0] && charCode <= currentRange[1]) {
+        return true;
+      }
+    }
+    return false;
+  }
+  function determineBidi(cueDiv) {
+    var nodeStack = [],
+      text = "",
+      charCode;
+    if (!cueDiv || !cueDiv.childNodes) {
+      return "ltr";
+    }
+    function pushNodes(nodeStack, node) {
+      for (var i = node.childNodes.length - 1; i >= 0; i--) {
+        nodeStack.push(node.childNodes[i]);
+      }
+    }
+    function nextTextNode(nodeStack) {
+      if (!nodeStack || !nodeStack.length) {
+        return null;
+      }
+      var node = nodeStack.pop(),
+        text = node.textContent || node.innerText;
+      if (text) {
+        // TODO: This should match all unicode type B characters (paragraph
+        // separator characters). See issue #115.
+        var m = text.match(/^.*(\n|\r)/);
+        if (m) {
+          nodeStack.length = 0;
+          return m[0];
+        }
+        return text;
+      }
+      if (node.tagName === "ruby") {
+        return nextTextNode(nodeStack);
+      }
+      if (node.childNodes) {
+        pushNodes(nodeStack, node);
+        return nextTextNode(nodeStack);
+      }
+    }
+    pushNodes(nodeStack, cueDiv);
+    while (text = nextTextNode(nodeStack)) {
+      for (var i = 0; i < text.length; i++) {
+        charCode = text.charCodeAt(i);
+        if (isStrongRTLChar(charCode)) {
+          return "rtl";
+        }
+      }
+    }
+    return "ltr";
+  }
+  function computeLinePos(cue) {
+    if (typeof cue.line === "number" && (cue.snapToLines || cue.line >= 0 && cue.line <= 100)) {
+      return cue.line;
+    }
+    if (!cue.track || !cue.track.textTrackList || !cue.track.textTrackList.mediaElement) {
+      return -1;
+    }
+    var track = cue.track,
+      trackList = track.textTrackList,
+      count = 0;
+    for (var i = 0; i < trackList.length && trackList[i] !== track; i++) {
+      if (trackList[i].mode === "showing") {
+        count++;
+      }
+    }
+    return ++count * -1;
+  }
+  function StyleBox() {}
+
+  // Apply styles to a div. If there is no div passed then it defaults to the
+  // div on 'this'.
+  StyleBox.prototype.applyStyles = function (styles, div) {
+    div = div || this.div;
+    for (var prop in styles) {
+      if (styles.hasOwnProperty(prop)) {
+        div.style[prop] = styles[prop];
+      }
+    }
+  };
+  StyleBox.prototype.formatStyle = function (val, unit) {
+    return val === 0 ? 0 : val + unit;
+  };
+
+  // Constructs the computed display state of the cue (a div). Places the div
+  // into the overlay which should be a block level element (usually a div).
+  function CueStyleBox(window, cue, styleOptions) {
+    StyleBox.call(this);
+    this.cue = cue;
+
+    // Parse our cue's text into a DOM tree rooted at 'cueDiv'. This div will
+    // have inline positioning and will function as the cue background box.
+    this.cueDiv = parseContent(window, cue.text);
+    var styles = {
+      color: "rgba(255, 255, 255, 1)",
+      backgroundColor: "rgba(0, 0, 0, 0.8)",
+      position: "relative",
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      display: "inline",
+      writingMode: cue.vertical === "" ? "horizontal-tb" : cue.vertical === "lr" ? "vertical-lr" : "vertical-rl",
+      unicodeBidi: "plaintext"
+    };
+    this.applyStyles(styles, this.cueDiv);
+
+    // Create an absolutely positioned div that will be used to position the cue
+    // div. Note, all WebVTT cue-setting alignments are equivalent to the CSS
+    // mirrors of them except middle instead of center on Safari.
+    this.div = window.document.createElement("div");
+    styles = {
+      direction: determineBidi(this.cueDiv),
+      writingMode: cue.vertical === "" ? "horizontal-tb" : cue.vertical === "lr" ? "vertical-lr" : "vertical-rl",
+      unicodeBidi: "plaintext",
+      textAlign: cue.align === "middle" ? "center" : cue.align,
+      font: styleOptions.font,
+      whiteSpace: "pre-line",
+      position: "absolute"
+    };
+    this.applyStyles(styles);
+    this.div.appendChild(this.cueDiv);
+
+    // Calculate the distance from the reference edge of the viewport to the text
+    // position of the cue box. The reference edge will be resolved later when
+    // the box orientation styles are applied.
+    var textPos = 0;
+    switch (cue.positionAlign) {
+      case "start":
+      case "line-left":
+        textPos = cue.position;
+        break;
+      case "center":
+        textPos = cue.position - cue.size / 2;
+        break;
+      case "end":
+      case "line-right":
+        textPos = cue.position - cue.size;
+        break;
+    }
+
+    // Horizontal box orientation; textPos is the distance from the left edge of the
+    // area to the left edge of the box and cue.size is the distance extending to
+    // the right from there.
+    if (cue.vertical === "") {
+      this.applyStyles({
+        left: this.formatStyle(textPos, "%"),
+        width: this.formatStyle(cue.size, "%")
+      });
+      // Vertical box orientation; textPos is the distance from the top edge of the
+      // area to the top edge of the box and cue.size is the height extending
+      // downwards from there.
+    } else {
+      this.applyStyles({
+        top: this.formatStyle(textPos, "%"),
+        height: this.formatStyle(cue.size, "%")
+      });
+    }
+    this.move = function (box) {
+      this.applyStyles({
+        top: this.formatStyle(box.top, "px"),
+        bottom: this.formatStyle(box.bottom, "px"),
+        left: this.formatStyle(box.left, "px"),
+        right: this.formatStyle(box.right, "px"),
+        height: this.formatStyle(box.height, "px"),
+        width: this.formatStyle(box.width, "px")
+      });
+    };
+  }
+  CueStyleBox.prototype = _objCreate(StyleBox.prototype);
+  CueStyleBox.prototype.constructor = CueStyleBox;
+
+  // Represents the co-ordinates of an Element in a way that we can easily
+  // compute things with such as if it overlaps or intersects with another Element.
+  // Can initialize it with either a StyleBox or another BoxPosition.
+  function BoxPosition(obj) {
+    // Either a BoxPosition was passed in and we need to copy it, or a StyleBox
+    // was passed in and we need to copy the results of 'getBoundingClientRect'
+    // as the object returned is readonly. All co-ordinate values are in reference
+    // to the viewport origin (top left).
+    var lh, height, width, top;
+    if (obj.div) {
+      height = obj.div.offsetHeight;
+      width = obj.div.offsetWidth;
+      top = obj.div.offsetTop;
+      var rects = (rects = obj.div.childNodes) && (rects = rects[0]) && rects.getClientRects && rects.getClientRects();
+      obj = obj.div.getBoundingClientRect();
+      // In certain cases the outter div will be slightly larger then the sum of
+      // the inner div's lines. This could be due to bold text, etc, on some platforms.
+      // In this case we should get the average line height and use that. This will
+      // result in the desired behaviour.
+      lh = rects ? Math.max(rects[0] && rects[0].height || 0, obj.height / rects.length) : 0;
+    }
+    this.left = obj.left;
+    this.right = obj.right;
+    this.top = obj.top || top;
+    this.height = obj.height || height;
+    this.bottom = obj.bottom || top + (obj.height || height);
+    this.width = obj.width || width;
+    this.lineHeight = lh !== undefined ? lh : obj.lineHeight;
+  }
+
+  // Move the box along a particular axis. Optionally pass in an amount to move
+  // the box. If no amount is passed then the default is the line height of the
+  // box.
+  BoxPosition.prototype.move = function (axis, toMove) {
+    toMove = toMove !== undefined ? toMove : this.lineHeight;
+    switch (axis) {
+      case "+x":
+        this.left += toMove;
+        this.right += toMove;
+        break;
+      case "-x":
+        this.left -= toMove;
+        this.right -= toMove;
+        break;
+      case "+y":
+        this.top += toMove;
+        this.bottom += toMove;
+        break;
+      case "-y":
+        this.top -= toMove;
+        this.bottom -= toMove;
+        break;
+    }
+  };
+
+  // Check if this box overlaps another box, b2.
+  BoxPosition.prototype.overlaps = function (b2) {
+    return this.left < b2.right && this.right > b2.left && this.top < b2.bottom && this.bottom > b2.top;
+  };
+
+  // Check if this box overlaps any other boxes in boxes.
+  BoxPosition.prototype.overlapsAny = function (boxes) {
+    for (var i = 0; i < boxes.length; i++) {
+      if (this.overlaps(boxes[i])) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  // Check if this box is within another box.
+  BoxPosition.prototype.within = function (container) {
+    return this.top >= container.top && this.bottom <= container.bottom && this.left >= container.left && this.right <= container.right;
+  };
+
+  // Check if this box is entirely within the container or it is overlapping
+  // on the edge opposite of the axis direction passed. For example, if "+x" is
+  // passed and the box is overlapping on the left edge of the container, then
+  // return true.
+  BoxPosition.prototype.overlapsOppositeAxis = function (container, axis) {
+    switch (axis) {
+      case "+x":
+        return this.left < container.left;
+      case "-x":
+        return this.right > container.right;
+      case "+y":
+        return this.top < container.top;
+      case "-y":
+        return this.bottom > container.bottom;
+    }
+  };
+
+  // Find the percentage of the area that this box is overlapping with another
+  // box.
+  BoxPosition.prototype.intersectPercentage = function (b2) {
+    var x = Math.max(0, Math.min(this.right, b2.right) - Math.max(this.left, b2.left)),
+      y = Math.max(0, Math.min(this.bottom, b2.bottom) - Math.max(this.top, b2.top)),
+      intersectArea = x * y;
+    return intersectArea / (this.height * this.width);
+  };
+
+  // Convert the positions from this box to CSS compatible positions using
+  // the reference container's positions. This has to be done because this
+  // box's positions are in reference to the viewport origin, whereas, CSS
+  // values are in referecne to their respective edges.
+  BoxPosition.prototype.toCSSCompatValues = function (reference) {
+    return {
+      top: this.top - reference.top,
+      bottom: reference.bottom - this.bottom,
+      left: this.left - reference.left,
+      right: reference.right - this.right,
+      height: this.height,
+      width: this.width
+    };
+  };
+
+  // Get an object that represents the box's position without anything extra.
+  // Can pass a StyleBox, HTMLElement, or another BoxPositon.
+  BoxPosition.getSimpleBoxPosition = function (obj) {
+    var height = obj.div ? obj.div.offsetHeight : obj.tagName ? obj.offsetHeight : 0;
+    var width = obj.div ? obj.div.offsetWidth : obj.tagName ? obj.offsetWidth : 0;
+    var top = obj.div ? obj.div.offsetTop : obj.tagName ? obj.offsetTop : 0;
+    obj = obj.div ? obj.div.getBoundingClientRect() : obj.tagName ? obj.getBoundingClientRect() : obj;
+    var ret = {
+      left: obj.left,
+      right: obj.right,
+      top: obj.top || top,
+      height: obj.height || height,
+      bottom: obj.bottom || top + (obj.height || height),
+      width: obj.width || width
+    };
+    return ret;
+  };
+
+  // Move a StyleBox to its specified, or next best, position. The containerBox
+  // is the box that contains the StyleBox, such as a div. boxPositions are
+  // a list of other boxes that the styleBox can't overlap with.
+  function moveBoxToLinePosition(window, styleBox, containerBox, boxPositions) {
+    // Find the best position for a cue box, b, on the video. The axis parameter
+    // is a list of axis, the order of which, it will move the box along. For example:
+    // Passing ["+x", "-x"] will move the box first along the x axis in the positive
+    // direction. If it doesn't find a good position for it there it will then move
+    // it along the x axis in the negative direction.
+    function findBestPosition(b, axis) {
+      var bestPosition,
+        specifiedPosition = new BoxPosition(b),
+        percentage = 1; // Highest possible so the first thing we get is better.
+
+      for (var i = 0; i < axis.length; i++) {
+        while (b.overlapsOppositeAxis(containerBox, axis[i]) || b.within(containerBox) && b.overlapsAny(boxPositions)) {
+          b.move(axis[i]);
+        }
+        // We found a spot where we aren't overlapping anything. This is our
+        // best position.
+        if (b.within(containerBox)) {
+          return b;
+        }
+        var p = b.intersectPercentage(containerBox);
+        // If we're outside the container box less then we were on our last try
+        // then remember this position as the best position.
+        if (percentage > p) {
+          bestPosition = new BoxPosition(b);
+          percentage = p;
+        }
+        // Reset the box position to the specified position.
+        b = new BoxPosition(specifiedPosition);
+      }
+      return bestPosition || specifiedPosition;
+    }
+    var boxPosition = new BoxPosition(styleBox),
+      cue = styleBox.cue,
+      linePos = computeLinePos(cue),
+      axis = [];
+
+    // If we have a line number to align the cue to.
+    if (cue.snapToLines) {
+      var size;
+      switch (cue.vertical) {
+        case "":
+          axis = ["+y", "-y"];
+          size = "height";
+          break;
+        case "rl":
+          axis = ["+x", "-x"];
+          size = "width";
+          break;
+        case "lr":
+          axis = ["-x", "+x"];
+          size = "width";
+          break;
+      }
+      var step = boxPosition.lineHeight,
+        position = step * Math.round(linePos),
+        maxPosition = containerBox[size] + step,
+        initialAxis = axis[0];
+
+      // If the specified intial position is greater then the max position then
+      // clamp the box to the amount of steps it would take for the box to
+      // reach the max position.
+      if (Math.abs(position) > maxPosition) {
+        position = position < 0 ? -1 : 1;
+        position *= Math.ceil(maxPosition / step) * step;
+      }
+
+      // If computed line position returns negative then line numbers are
+      // relative to the bottom of the video instead of the top. Therefore, we
+      // need to increase our initial position by the length or width of the
+      // video, depending on the writing direction, and reverse our axis directions.
+      if (linePos < 0) {
+        position += cue.vertical === "" ? containerBox.height : containerBox.width;
+        axis = axis.reverse();
+      }
+
+      // Move the box to the specified position. This may not be its best
+      // position.
+      boxPosition.move(initialAxis, position);
+    } else {
+      // If we have a percentage line value for the cue.
+      var calculatedPercentage = boxPosition.lineHeight / containerBox.height * 100;
+      switch (cue.lineAlign) {
+        case "center":
+          linePos -= calculatedPercentage / 2;
+          break;
+        case "end":
+          linePos -= calculatedPercentage;
+          break;
+      }
+
+      // Apply initial line position to the cue box.
+      switch (cue.vertical) {
+        case "":
+          styleBox.applyStyles({
+            top: styleBox.formatStyle(linePos, "%")
+          });
+          break;
+        case "rl":
+          styleBox.applyStyles({
+            left: styleBox.formatStyle(linePos, "%")
+          });
+          break;
+        case "lr":
+          styleBox.applyStyles({
+            right: styleBox.formatStyle(linePos, "%")
+          });
+          break;
+      }
+      axis = ["+y", "-x", "+x", "-y"];
+
+      // Get the box position again after we've applied the specified positioning
+      // to it.
+      boxPosition = new BoxPosition(styleBox);
+    }
+    var bestPosition = findBestPosition(boxPosition, axis);
+    styleBox.move(bestPosition.toCSSCompatValues(containerBox));
+  }
+  function WebVTT$1() {
+    // Nothing
+  }
+
+  // Helper to allow strings to be decoded instead of the default binary utf8 data.
+  WebVTT$1.StringDecoder = function () {
+    return {
+      decode: function (data) {
+        if (!data) {
+          return "";
+        }
+        if (typeof data !== "string") {
+          throw new Error("Error - expected string data.");
+        }
+        return decodeURIComponent(encodeURIComponent(data));
+      }
+    };
+  };
+  WebVTT$1.convertCueToDOMTree = function (window, cuetext) {
+    if (!window || !cuetext) {
+      return null;
+    }
+    return parseContent(window, cuetext);
+  };
+  var FONT_SIZE_PERCENT = 0.05;
+  var FONT_STYLE = "sans-serif";
+  var CUE_BACKGROUND_PADDING = "1.5%";
+
+  // Runs the processing model over the cues and regions passed to it.
+  // @param overlay A block level element (usually a div) that the computed cues
+  //                and regions will be placed into.
+  WebVTT$1.processCues = function (window, cues, overlay) {
+    if (!window || !cues || !overlay) {
+      return null;
+    }
+
+    // Remove all previous children.
+    while (overlay.firstChild) {
+      overlay.removeChild(overlay.firstChild);
+    }
+    var paddedOverlay = window.document.createElement("div");
+    paddedOverlay.style.position = "absolute";
+    paddedOverlay.style.left = "0";
+    paddedOverlay.style.right = "0";
+    paddedOverlay.style.top = "0";
+    paddedOverlay.style.bottom = "0";
+    paddedOverlay.style.margin = CUE_BACKGROUND_PADDING;
+    overlay.appendChild(paddedOverlay);
+
+    // Determine if we need to compute the display states of the cues. This could
+    // be the case if a cue's state has been changed since the last computation or
+    // if it has not been computed yet.
+    function shouldCompute(cues) {
+      for (var i = 0; i < cues.length; i++) {
+        if (cues[i].hasBeenReset || !cues[i].displayState) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    // We don't need to recompute the cues' display states. Just reuse them.
+    if (!shouldCompute(cues)) {
+      for (var i = 0; i < cues.length; i++) {
+        paddedOverlay.appendChild(cues[i].displayState);
+      }
+      return;
+    }
+    var boxPositions = [],
+      containerBox = BoxPosition.getSimpleBoxPosition(paddedOverlay),
+      fontSize = Math.round(containerBox.height * FONT_SIZE_PERCENT * 100) / 100;
+    var styleOptions = {
+      font: fontSize + "px " + FONT_STYLE
+    };
+    (function () {
+      var styleBox, cue;
+      for (var i = 0; i < cues.length; i++) {
+        cue = cues[i];
+
+        // Compute the intial position and styles of the cue div.
+        styleBox = new CueStyleBox(window, cue, styleOptions);
+        paddedOverlay.appendChild(styleBox.div);
+
+        // Move the cue div to it's correct line position.
+        moveBoxToLinePosition(window, styleBox, containerBox, boxPositions);
+
+        // Remember the computed div so that we don't have to recompute it later
+        // if we don't have too.
+        cue.displayState = styleBox.div;
+        boxPositions.push(BoxPosition.getSimpleBoxPosition(styleBox));
+      }
+    })();
+  };
+  WebVTT$1.Parser = function (window, vttjs, decoder) {
+    if (!decoder) {
+      decoder = vttjs;
+      vttjs = {};
+    }
+    if (!vttjs) {
+      vttjs = {};
+    }
+    this.window = window;
+    this.vttjs = vttjs;
+    this.state = "INITIAL";
+    this.buffer = "";
+    this.decoder = decoder || new TextDecoder("utf8");
+    this.regionList = [];
+  };
+  WebVTT$1.Parser.prototype = {
+    // If the error is a ParsingError then report it to the consumer if
+    // possible. If it's not a ParsingError then throw it like normal.
+    reportOrThrowError: function (e) {
+      if (e instanceof ParsingError) {
+        this.onparsingerror && this.onparsingerror(e);
+      } else {
+        throw e;
+      }
+    },
+    parse: function (data) {
+      var self = this;
+
+      // If there is no data then we won't decode it, but will just try to parse
+      // whatever is in buffer already. This may occur in circumstances, for
+      // example when flush() is called.
+      if (data) {
+        // Try to decode the data that we received.
+        self.buffer += self.decoder.decode(data, {
+          stream: true
+        });
+      }
+      function collectNextLine() {
+        var buffer = self.buffer;
+        var pos = 0;
+        while (pos < buffer.length && buffer[pos] !== '\r' && buffer[pos] !== '\n') {
+          ++pos;
+        }
+        var line = buffer.substr(0, pos);
+        // Advance the buffer early in case we fail below.
+        if (buffer[pos] === '\r') {
+          ++pos;
+        }
+        if (buffer[pos] === '\n') {
+          ++pos;
+        }
+        self.buffer = buffer.substr(pos);
+        return line;
+      }
+
+      // 3.4 WebVTT region and WebVTT region settings syntax
+      function parseRegion(input) {
+        var settings = new Settings();
+        parseOptions(input, function (k, v) {
+          switch (k) {
+            case "id":
+              settings.set(k, v);
+              break;
+            case "width":
+              settings.percent(k, v);
+              break;
+            case "lines":
+              settings.integer(k, v);
+              break;
+            case "regionanchor":
+            case "viewportanchor":
+              var xy = v.split(',');
+              if (xy.length !== 2) {
+                break;
+              }
+              // We have to make sure both x and y parse, so use a temporary
+              // settings object here.
+              var anchor = new Settings();
+              anchor.percent("x", xy[0]);
+              anchor.percent("y", xy[1]);
+              if (!anchor.has("x") || !anchor.has("y")) {
+                break;
+              }
+              settings.set(k + "X", anchor.get("x"));
+              settings.set(k + "Y", anchor.get("y"));
+              break;
+            case "scroll":
+              settings.alt(k, v, ["up"]);
+              break;
+          }
+        }, /=/, /\s/);
+
+        // Create the region, using default values for any values that were not
+        // specified.
+        if (settings.has("id")) {
+          var region = new (self.vttjs.VTTRegion || self.window.VTTRegion)();
+          region.width = settings.get("width", 100);
+          region.lines = settings.get("lines", 3);
+          region.regionAnchorX = settings.get("regionanchorX", 0);
+          region.regionAnchorY = settings.get("regionanchorY", 100);
+          region.viewportAnchorX = settings.get("viewportanchorX", 0);
+          region.viewportAnchorY = settings.get("viewportanchorY", 100);
+          region.scroll = settings.get("scroll", "");
+          // Register the region.
+          self.onregion && self.onregion(region);
+          // Remember the VTTRegion for later in case we parse any VTTCues that
+          // reference it.
+          self.regionList.push({
+            id: settings.get("id"),
+            region: region
+          });
+        }
+      }
+
+      // draft-pantos-http-live-streaming-20
+      // https://tools.ietf.org/html/draft-pantos-http-live-streaming-20#section-3.5
+      // 3.5 WebVTT
+      function parseTimestampMap(input) {
+        var settings = new Settings();
+        parseOptions(input, function (k, v) {
+          switch (k) {
+            case "MPEGT":
+              settings.integer(k + 'S', v);
+              break;
+            case "LOCA":
+              settings.set(k + 'L', parseTimeStamp(v));
+              break;
+          }
+        }, /[^\d]:/, /,/);
+        self.ontimestampmap && self.ontimestampmap({
+          "MPEGTS": settings.get("MPEGTS"),
+          "LOCAL": settings.get("LOCAL")
+        });
+      }
+
+      // 3.2 WebVTT metadata header syntax
+      function parseHeader(input) {
+        if (input.match(/X-TIMESTAMP-MAP/)) {
+          // This line contains HLS X-TIMESTAMP-MAP metadata
+          parseOptions(input, function (k, v) {
+            switch (k) {
+              case "X-TIMESTAMP-MAP":
+                parseTimestampMap(v);
+                break;
+            }
+          }, /=/);
+        } else {
+          parseOptions(input, function (k, v) {
+            switch (k) {
+              case "Region":
+                // 3.3 WebVTT region metadata header syntax
+                parseRegion(v);
+                break;
+            }
+          }, /:/);
+        }
+      }
+
+      // 5.1 WebVTT file parsing.
+      try {
+        var line;
+        if (self.state === "INITIAL") {
+          // We can't start parsing until we have the first line.
+          if (!/\r\n|\n/.test(self.buffer)) {
+            return this;
+          }
+          line = collectNextLine();
+          var m = line.match(/^WEBVTT([ \t].*)?$/);
+          if (!m || !m[0]) {
+            throw new ParsingError(ParsingError.Errors.BadSignature);
+          }
+          self.state = "HEADER";
+        }
+        var alreadyCollectedLine = false;
+        while (self.buffer) {
+          // We can't parse a line until we have the full line.
+          if (!/\r\n|\n/.test(self.buffer)) {
+            return this;
+          }
+          if (!alreadyCollectedLine) {
+            line = collectNextLine();
+          } else {
+            alreadyCollectedLine = false;
+          }
+          switch (self.state) {
+            case "HEADER":
+              // 13-18 - Allow a header (metadata) under the WEBVTT line.
+              if (/:/.test(line)) {
+                parseHeader(line);
+              } else if (!line) {
+                // An empty line terminates the header and starts the body (cues).
+                self.state = "ID";
+              }
+              continue;
+            case "NOTE":
+              // Ignore NOTE blocks.
+              if (!line) {
+                self.state = "ID";
+              }
+              continue;
+            case "ID":
+              // Check for the start of NOTE blocks.
+              if (/^NOTE($|[ \t])/.test(line)) {
+                self.state = "NOTE";
+                break;
+              }
+              // 19-29 - Allow any number of line terminators, then initialize new cue values.
+              if (!line) {
+                continue;
+              }
+              self.cue = new (self.vttjs.VTTCue || self.window.VTTCue)(0, 0, "");
+              // Safari still uses the old middle value and won't accept center
+              try {
+                self.cue.align = "center";
+              } catch (e) {
+                self.cue.align = "middle";
+              }
+              self.state = "CUE";
+              // 30-39 - Check if self line contains an optional identifier or timing data.
+              if (line.indexOf("-->") === -1) {
+                self.cue.id = line;
+                continue;
+              }
+            // Process line as start of a cue.
+            /*falls through*/
+            case "CUE":
+              // 40 - Collect cue timings and settings.
+              try {
+                parseCue(line, self.cue, self.regionList);
+              } catch (e) {
+                self.reportOrThrowError(e);
+                // In case of an error ignore rest of the cue.
+                self.cue = null;
+                self.state = "BADCUE";
+                continue;
+              }
+              self.state = "CUETEXT";
+              continue;
+            case "CUETEXT":
+              var hasSubstring = line.indexOf("-->") !== -1;
+              // 34 - If we have an empty line then report the cue.
+              // 35 - If we have the special substring '-->' then report the cue,
+              // but do not collect the line as we need to process the current
+              // one as a new cue.
+              if (!line || hasSubstring && (alreadyCollectedLine = true)) {
+                // We are done parsing self cue.
+                self.oncue && self.oncue(self.cue);
+                self.cue = null;
+                self.state = "ID";
+                continue;
+              }
+              if (self.cue.text) {
+                self.cue.text += "\n";
+              }
+              self.cue.text += line.replace(/\u2028/g, '\n').replace(/u2029/g, '\n');
+              continue;
+            case "BADCUE":
+              // BADCUE
+              // 54-62 - Collect and discard the remaining cue.
+              if (!line) {
+                self.state = "ID";
+              }
+              continue;
+          }
+        }
+      } catch (e) {
+        self.reportOrThrowError(e);
+
+        // If we are currently parsing a cue, report what we have.
+        if (self.state === "CUETEXT" && self.cue && self.oncue) {
+          self.oncue(self.cue);
+        }
+        self.cue = null;
+        // Enter BADWEBVTT state if header was not parsed correctly otherwise
+        // another exception occurred so enter BADCUE state.
+        self.state = self.state === "INITIAL" ? "BADWEBVTT" : "BADCUE";
+      }
+      return this;
+    },
+    flush: function () {
+      var self = this;
+      try {
+        // Finish decoding the stream.
+        self.buffer += self.decoder.decode();
+        // Synthesize the end of the current cue or region.
+        if (self.cue || self.state === "HEADER") {
+          self.buffer += "\n\n";
+          self.parse();
+        }
+        // If we've flushed, parsed, and we're still on the INITIAL state then
+        // that means we don't have enough of the stream to parse the first
+        // line.
+        if (self.state === "INITIAL") {
+          throw new ParsingError(ParsingError.Errors.BadSignature);
+        }
+      } catch (e) {
+        self.reportOrThrowError(e);
+      }
+      self.onflush && self.onflush();
+      return this;
+    }
+  };
+  var vtt = WebVTT$1;
+
+  /**
+   * Copyright 2013 vtt.js Contributors
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *   http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+
+  var autoKeyword = "auto";
+  var directionSetting = {
+    "": 1,
+    "lr": 1,
+    "rl": 1
+  };
+  var alignSetting = {
+    "start": 1,
+    "center": 1,
+    "end": 1,
+    "left": 1,
+    "right": 1,
+    "auto": 1,
+    "line-left": 1,
+    "line-right": 1
+  };
+  function findDirectionSetting(value) {
+    if (typeof value !== "string") {
+      return false;
+    }
+    var dir = directionSetting[value.toLowerCase()];
+    return dir ? value.toLowerCase() : false;
+  }
+  function findAlignSetting(value) {
+    if (typeof value !== "string") {
+      return false;
+    }
+    var align = alignSetting[value.toLowerCase()];
+    return align ? value.toLowerCase() : false;
+  }
+  function VTTCue(startTime, endTime, text) {
+    /**
+     * Shim implementation specific properties. These properties are not in
+     * the spec.
+     */
+
+    // Lets us know when the VTTCue's data has changed in such a way that we need
+    // to recompute its display state. This lets us compute its display state
+    // lazily.
+    this.hasBeenReset = false;
+
+    /**
+     * VTTCue and TextTrackCue properties
+     * http://dev.w3.org/html5/webvtt/#vttcue-interface
+     */
+
+    var _id = "";
+    var _pauseOnExit = false;
+    var _startTime = startTime;
+    var _endTime = endTime;
+    var _text = text;
+    var _region = null;
+    var _vertical = "";
+    var _snapToLines = true;
+    var _line = "auto";
+    var _lineAlign = "start";
+    var _position = "auto";
+    var _positionAlign = "auto";
+    var _size = 100;
+    var _align = "center";
+    Object.defineProperties(this, {
+      "id": {
+        enumerable: true,
+        get: function () {
+          return _id;
+        },
+        set: function (value) {
+          _id = "" + value;
+        }
+      },
+      "pauseOnExit": {
+        enumerable: true,
+        get: function () {
+          return _pauseOnExit;
+        },
+        set: function (value) {
+          _pauseOnExit = !!value;
+        }
+      },
+      "startTime": {
+        enumerable: true,
+        get: function () {
+          return _startTime;
+        },
+        set: function (value) {
+          if (typeof value !== "number") {
+            throw new TypeError("Start time must be set to a number.");
+          }
+          _startTime = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "endTime": {
+        enumerable: true,
+        get: function () {
+          return _endTime;
+        },
+        set: function (value) {
+          if (typeof value !== "number") {
+            throw new TypeError("End time must be set to a number.");
+          }
+          _endTime = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "text": {
+        enumerable: true,
+        get: function () {
+          return _text;
+        },
+        set: function (value) {
+          _text = "" + value;
+          this.hasBeenReset = true;
+        }
+      },
+      "region": {
+        enumerable: true,
+        get: function () {
+          return _region;
+        },
+        set: function (value) {
+          _region = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "vertical": {
+        enumerable: true,
+        get: function () {
+          return _vertical;
+        },
+        set: function (value) {
+          var setting = findDirectionSetting(value);
+          // Have to check for false because the setting an be an empty string.
+          if (setting === false) {
+            throw new SyntaxError("Vertical: an invalid or illegal direction string was specified.");
+          }
+          _vertical = setting;
+          this.hasBeenReset = true;
+        }
+      },
+      "snapToLines": {
+        enumerable: true,
+        get: function () {
+          return _snapToLines;
+        },
+        set: function (value) {
+          _snapToLines = !!value;
+          this.hasBeenReset = true;
+        }
+      },
+      "line": {
+        enumerable: true,
+        get: function () {
+          return _line;
+        },
+        set: function (value) {
+          if (typeof value !== "number" && value !== autoKeyword) {
+            throw new SyntaxError("Line: an invalid number or illegal string was specified.");
+          }
+          _line = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "lineAlign": {
+        enumerable: true,
+        get: function () {
+          return _lineAlign;
+        },
+        set: function (value) {
+          var setting = findAlignSetting(value);
+          if (!setting) {
+            console.warn("lineAlign: an invalid or illegal string was specified.");
+          } else {
+            _lineAlign = setting;
+            this.hasBeenReset = true;
+          }
+        }
+      },
+      "position": {
+        enumerable: true,
+        get: function () {
+          return _position;
+        },
+        set: function (value) {
+          if (value < 0 || value > 100) {
+            throw new Error("Position must be between 0 and 100.");
+          }
+          _position = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "positionAlign": {
+        enumerable: true,
+        get: function () {
+          return _positionAlign;
+        },
+        set: function (value) {
+          var setting = findAlignSetting(value);
+          if (!setting) {
+            console.warn("positionAlign: an invalid or illegal string was specified.");
+          } else {
+            _positionAlign = setting;
+            this.hasBeenReset = true;
+          }
+        }
+      },
+      "size": {
+        enumerable: true,
+        get: function () {
+          return _size;
+        },
+        set: function (value) {
+          if (value < 0 || value > 100) {
+            throw new Error("Size must be between 0 and 100.");
+          }
+          _size = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "align": {
+        enumerable: true,
+        get: function () {
+          return _align;
+        },
+        set: function (value) {
+          var setting = findAlignSetting(value);
+          if (!setting) {
+            throw new SyntaxError("align: an invalid or illegal alignment string was specified.");
+          }
+          _align = setting;
+          this.hasBeenReset = true;
+        }
+      }
+    });
+
+    /**
+     * Other <track> spec defined properties
+     */
+
+    // http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#text-track-cue-display-state
+    this.displayState = undefined;
+  }
+
+  /**
+   * VTTCue methods
+   */
+
+  VTTCue.prototype.getCueAsHTML = function () {
+    // Assume WebVTT.convertCueToDOMTree is on the global.
+    return WebVTT.convertCueToDOMTree(window, this.text);
+  };
+  var vttcue = VTTCue;
+
+  /**
+   * Copyright 2013 vtt.js Contributors
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *   http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+
+  var scrollSetting = {
+    "": true,
+    "up": true
+  };
+  function findScrollSetting(value) {
+    if (typeof value !== "string") {
+      return false;
+    }
+    var scroll = scrollSetting[value.toLowerCase()];
+    return scroll ? value.toLowerCase() : false;
+  }
+  function isValidPercentValue(value) {
+    return typeof value === "number" && value >= 0 && value <= 100;
+  }
+
+  // VTTRegion shim http://dev.w3.org/html5/webvtt/#vttregion-interface
+  function VTTRegion() {
+    var _width = 100;
+    var _lines = 3;
+    var _regionAnchorX = 0;
+    var _regionAnchorY = 100;
+    var _viewportAnchorX = 0;
+    var _viewportAnchorY = 100;
+    var _scroll = "";
+    Object.defineProperties(this, {
+      "width": {
+        enumerable: true,
+        get: function () {
+          return _width;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("Width must be between 0 and 100.");
+          }
+          _width = value;
+        }
+      },
+      "lines": {
+        enumerable: true,
+        get: function () {
+          return _lines;
+        },
+        set: function (value) {
+          if (typeof value !== "number") {
+            throw new TypeError("Lines must be set to a number.");
+          }
+          _lines = value;
+        }
+      },
+      "regionAnchorY": {
+        enumerable: true,
+        get: function () {
+          return _regionAnchorY;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("RegionAnchorX must be between 0 and 100.");
+          }
+          _regionAnchorY = value;
+        }
+      },
+      "regionAnchorX": {
+        enumerable: true,
+        get: function () {
+          return _regionAnchorX;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("RegionAnchorY must be between 0 and 100.");
+          }
+          _regionAnchorX = value;
+        }
+      },
+      "viewportAnchorY": {
+        enumerable: true,
+        get: function () {
+          return _viewportAnchorY;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("ViewportAnchorY must be between 0 and 100.");
+          }
+          _viewportAnchorY = value;
+        }
+      },
+      "viewportAnchorX": {
+        enumerable: true,
+        get: function () {
+          return _viewportAnchorX;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("ViewportAnchorX must be between 0 and 100.");
+          }
+          _viewportAnchorX = value;
+        }
+      },
+      "scroll": {
+        enumerable: true,
+        get: function () {
+          return _scroll;
+        },
+        set: function (value) {
+          var setting = findScrollSetting(value);
+          // Have to check for false as an empty string is a legal value.
+          if (setting === false) {
+            console.warn("Scroll: an invalid or illegal string was specified.");
+          } else {
+            _scroll = setting;
+          }
+        }
+      }
+    });
+  }
+  var vttregion = VTTRegion;
+
+  var browserIndex = createCommonjsModule(function (module) {
+    /**
+     * Copyright 2013 vtt.js Contributors
+     *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *   http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+
+    // Default exports for Node. Export the extended versions of VTTCue and
+    // VTTRegion in Node since we likely want the capability to convert back and
+    // forth between JSON. If we don't then it's not that big of a deal since we're
+    // off browser.
+
+    var vttjs = module.exports = {
+      WebVTT: vtt,
+      VTTCue: vttcue,
+      VTTRegion: vttregion
+    };
+    window_1.vttjs = vttjs;
+    window_1.WebVTT = vttjs.WebVTT;
+    var cueShim = vttjs.VTTCue;
+    var regionShim = vttjs.VTTRegion;
+    var nativeVTTCue = window_1.VTTCue;
+    var nativeVTTRegion = window_1.VTTRegion;
+    vttjs.shim = function () {
+      window_1.VTTCue = cueShim;
+      window_1.VTTRegion = regionShim;
+    };
+    vttjs.restore = function () {
+      window_1.VTTCue = nativeVTTCue;
+      window_1.VTTRegion = nativeVTTRegion;
+    };
+    if (!window_1.VTTCue) {
+      vttjs.shim();
+    }
+  });
+  browserIndex.WebVTT;
+  browserIndex.VTTCue;
+  browserIndex.VTTRegion;
+
+  /**
+   * @file tech.js
+   */
+
+  /**
+   * An Object containing a structure like: `{src: 'url', type: 'mimetype'}` or string
+   * that just contains the src url alone.
+   * * `var SourceObject = {src: 'http://ex.com/video.mp4', type: 'video/mp4'};`
+     * `var SourceString = 'http://example.com/some-video.mp4';`
+   *
+   * @typedef {Object|string} SourceObject
+   *
+   * @property {string} src
+   *           The url to the source
+   *
+   * @property {string} type
+   *           The mime type of the source
+   */
+
+  /**
+   * A function used by {@link Tech} to create a new {@link TextTrack}.
+   *
+   * @private
+   *
+   * @param {Tech} self
+   *        An instance of the Tech class.
+   *
+   * @param {string} kind
+   *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+   *
+   * @param {string} [label]
+   *        Label to identify the text track
+   *
+   * @param {string} [language]
+   *        Two letter language abbreviation
+   *
+   * @param {Object} [options={}]
+   *        An object with additional text track options
+   *
+   * @return {TextTrack}
+   *          The text track that was created.
+   */
+  function createTrackHelper(self, kind, label, language, options = {}) {
+    const tracks = self.textTracks();
+    options.kind = kind;
+    if (label) {
+      options.label = label;
+    }
+    if (language) {
+      options.language = language;
+    }
+    options.tech = self;
+    const track = new ALL.text.TrackClass(options);
+    tracks.addTrack(track);
+    return track;
+  }
+
+  /**
+   * This is the base class for media playback technology controllers, such as
+   * {@link HTML5}
+   *
+   * @extends Component
+   */
+  class Tech extends Component {
+    /**
+    * Create an instance of this Tech.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    *
+    * @param {Function} [ready]
+    *        Callback function to call when the `HTML5` Tech is ready.
+    */
+    constructor(options = {}, ready = function () {}) {
+      // we don't want the tech to report user activity automatically.
+      // This is done manually in addControlsListeners
+      options.reportTouchActivity = false;
+      super(null, options, ready);
+      this.onDurationChange_ = e => this.onDurationChange(e);
+      this.trackProgress_ = e => this.trackProgress(e);
+      this.trackCurrentTime_ = e => this.trackCurrentTime(e);
+      this.stopTrackingCurrentTime_ = e => this.stopTrackingCurrentTime(e);
+      this.disposeSourceHandler_ = e => this.disposeSourceHandler(e);
+      this.queuedHanders_ = new Set();
+
+      // keep track of whether the current source has played at all to
+      // implement a very limited played()
+      this.hasStarted_ = false;
+      this.on('playing', function () {
+        this.hasStarted_ = true;
+      });
+      this.on('loadstart', function () {
+        this.hasStarted_ = false;
+      });
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        if (options && options[props.getterName]) {
+          this[props.privateName] = options[props.getterName];
+        }
+      });
+
+      // Manually track progress in cases where the browser/tech doesn't report it.
+      if (!this.featuresProgressEvents) {
+        this.manualProgressOn();
+      }
+
+      // Manually track timeupdates in cases where the browser/tech doesn't report it.
+      if (!this.featuresTimeupdateEvents) {
+        this.manualTimeUpdatesOn();
+      }
+      ['Text', 'Audio', 'Video'].forEach(track => {
+        if (options[`native${track}Tracks`] === false) {
+          this[`featuresNative${track}Tracks`] = false;
+        }
+      });
+      if (options.nativeCaptions === false || options.nativeTextTracks === false) {
+        this.featuresNativeTextTracks = false;
+      } else if (options.nativeCaptions === true || options.nativeTextTracks === true) {
+        this.featuresNativeTextTracks = true;
+      }
+      if (!this.featuresNativeTextTracks) {
+        this.emulateTextTracks();
+      }
+      this.preloadTextTracks = options.preloadTextTracks !== false;
+      this.autoRemoteTextTracks_ = new ALL.text.ListClass();
+      this.initTrackListeners();
+
+      // Turn on component tap events only if not using native controls
+      if (!options.nativeControlsForTouch) {
+        this.emitTapEvents();
+      }
+      if (this.constructor) {
+        this.name_ = this.constructor.name || 'Unknown Tech';
+      }
+    }
+
+    /**
+     * A special function to trigger source set in a way that will allow player
+     * to re-trigger if the player or tech are not ready yet.
+     *
+     * @fires Tech#sourceset
+     * @param {string} src The source string at the time of the source changing.
+     */
+    triggerSourceset(src) {
+      if (!this.isReady_) {
+        // on initial ready we have to trigger source set
+        // 1ms after ready so that player can watch for it.
+        this.one('ready', () => this.setTimeout(() => this.triggerSourceset(src), 1));
+      }
+
+      /**
+       * Fired when the source is set on the tech causing the media element
+       * to reload.
+       *
+       * @see {@link Player#event:sourceset}
+       * @event Tech#sourceset
+       * @type {Event}
+       */
+      this.trigger({
+        src,
+        type: 'sourceset'
+      });
+    }
+
+    /* Fallbacks for unsupported event types
+    ================================================================================ */
+
+    /**
+     * Polyfill the `progress` event for browsers that don't support it natively.
+     *
+     * @see {@link Tech#trackProgress}
+     */
+    manualProgressOn() {
+      this.on('durationchange', this.onDurationChange_);
+      this.manualProgress = true;
+
+      // Trigger progress watching when a source begins loading
+      this.one('ready', this.trackProgress_);
+    }
+
+    /**
+     * Turn off the polyfill for `progress` events that was created in
+     * {@link Tech#manualProgressOn}
+     */
+    manualProgressOff() {
+      this.manualProgress = false;
+      this.stopTrackingProgress();
+      this.off('durationchange', this.onDurationChange_);
+    }
+
+    /**
+     * This is used to trigger a `progress` event when the buffered percent changes. It
+     * sets an interval function that will be called every 500 milliseconds to check if the
+     * buffer end percent has changed.
+     *
+     * > This function is called by {@link Tech#manualProgressOn}
+     *
+     * @param {Event} event
+     *        The `ready` event that caused this to run.
+     *
+     * @listens Tech#ready
+     * @fires Tech#progress
+     */
+    trackProgress(event) {
+      this.stopTrackingProgress();
+      this.progressInterval = this.setInterval(bind_(this, function () {
+        // Don't trigger unless buffered amount is greater than last time
+
+        const numBufferedPercent = this.bufferedPercent();
+        if (this.bufferedPercent_ !== numBufferedPercent) {
+          /**
+           * See {@link Player#progress}
+           *
+           * @event Tech#progress
+           * @type {Event}
+           */
+          this.trigger('progress');
+        }
+        this.bufferedPercent_ = numBufferedPercent;
+        if (numBufferedPercent === 1) {
+          this.stopTrackingProgress();
+        }
+      }), 500);
+    }
+
+    /**
+     * Update our internal duration on a `durationchange` event by calling
+     * {@link Tech#duration}.
+     *
+     * @param {Event} event
+     *        The `durationchange` event that caused this to run.
+     *
+     * @listens Tech#durationchange
+     */
+    onDurationChange(event) {
+      this.duration_ = this.duration();
+    }
+
+    /**
+     * Get and create a `TimeRange` object for buffering.
+     *
+     * @return { import('../utils/time').TimeRange }
+     *         The time range object that was created.
+     */
+    buffered() {
+      return createTimeRanges(0, 0);
+    }
+
+    /**
+     * Get the percentage of the current video that is currently buffered.
+     *
+     * @return {number}
+     *         A number from 0 to 1 that represents the decimal percentage of the
+     *         video that is buffered.
+     *
+     */
+    bufferedPercent() {
+      return bufferedPercent(this.buffered(), this.duration_);
+    }
+
+    /**
+     * Turn off the polyfill for `progress` events that was created in
+     * {@link Tech#manualProgressOn}
+     * Stop manually tracking progress events by clearing the interval that was set in
+     * {@link Tech#trackProgress}.
+     */
+    stopTrackingProgress() {
+      this.clearInterval(this.progressInterval);
+    }
+
+    /**
+     * Polyfill the `timeupdate` event for browsers that don't support it.
+     *
+     * @see {@link Tech#trackCurrentTime}
+     */
+    manualTimeUpdatesOn() {
+      this.manualTimeUpdates = true;
+      this.on('play', this.trackCurrentTime_);
+      this.on('pause', this.stopTrackingCurrentTime_);
+    }
+
+    /**
+     * Turn off the polyfill for `timeupdate` events that was created in
+     * {@link Tech#manualTimeUpdatesOn}
+     */
+    manualTimeUpdatesOff() {
+      this.manualTimeUpdates = false;
+      this.stopTrackingCurrentTime();
+      this.off('play', this.trackCurrentTime_);
+      this.off('pause', this.stopTrackingCurrentTime_);
+    }
+
+    /**
+     * Sets up an interval function to track current time and trigger `timeupdate` every
+     * 250 milliseconds.
+     *
+     * @listens Tech#play
+     * @triggers Tech#timeupdate
+     */
+    trackCurrentTime() {
+      if (this.currentTimeInterval) {
+        this.stopTrackingCurrentTime();
+      }
+      this.currentTimeInterval = this.setInterval(function () {
+        /**
+         * Triggered at an interval of 250ms to indicated that time is passing in the video.
+         *
+         * @event Tech#timeupdate
+         * @type {Event}
+         */
+        this.trigger({
+          type: 'timeupdate',
+          target: this,
+          manuallyTriggered: true
+        });
+
+        // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
+      }, 250);
+    }
+
+    /**
+     * Stop the interval function created in {@link Tech#trackCurrentTime} so that the
+     * `timeupdate` event is no longer triggered.
+     *
+     * @listens {Tech#pause}
+     */
+    stopTrackingCurrentTime() {
+      this.clearInterval(this.currentTimeInterval);
+
+      // #1002 - if the video ends right before the next timeupdate would happen,
+      // the progress bar won't make it all the way to the end
+      this.trigger({
+        type: 'timeupdate',
+        target: this,
+        manuallyTriggered: true
+      });
+    }
+
+    /**
+     * Turn off all event polyfills, clear the `Tech`s {@link AudioTrackList},
+     * {@link VideoTrackList}, and {@link TextTrackList}, and dispose of this Tech.
+     *
+     * @fires Component#dispose
+     */
+    dispose() {
+      // clear out all tracks because we can't reuse them between techs
+      this.clearTracks(NORMAL.names);
+
+      // Turn off any manual progress or timeupdate tracking
+      if (this.manualProgress) {
+        this.manualProgressOff();
+      }
+      if (this.manualTimeUpdates) {
+        this.manualTimeUpdatesOff();
+      }
+      super.dispose();
+    }
+
+    /**
+     * Clear out a single `TrackList` or an array of `TrackLists` given their names.
+     *
+     * > Note: Techs without source handlers should call this between sources for `video`
+     *         & `audio` tracks. You don't want to use them between tracks!
+     *
+     * @param {string[]|string} types
+     *        TrackList names to clear, valid names are `video`, `audio`, and
+     *        `text`.
+     */
+    clearTracks(types) {
+      types = [].concat(types);
+      // clear out all tracks because we can't reuse them between techs
+      types.forEach(type => {
+        const list = this[`${type}Tracks`]() || [];
+        let i = list.length;
+        while (i--) {
+          const track = list[i];
+          if (type === 'text') {
+            this.removeRemoteTextTrack(track);
+          }
+          list.removeTrack(track);
+        }
+      });
+    }
+
+    /**
+     * Remove any TextTracks added via addRemoteTextTrack that are
+     * flagged for automatic garbage collection
+     */
+    cleanupAutoTextTracks() {
+      const list = this.autoRemoteTextTracks_ || [];
+      let i = list.length;
+      while (i--) {
+        const track = list[i];
+        this.removeRemoteTextTrack(track);
+      }
+    }
+
+    /**
+     * Reset the tech, which will removes all sources and reset the internal readyState.
+     *
+     * @abstract
+     */
+    reset() {}
+
+    /**
+     * Get the value of `crossOrigin` from the tech.
+     *
+     * @abstract
+     *
+     * @see {Html5#crossOrigin}
+     */
+    crossOrigin() {}
+
+    /**
+     * Set the value of `crossOrigin` on the tech.
+     *
+     * @abstract
+     *
+     * @param {string} crossOrigin the crossOrigin value
+     * @see {Html5#setCrossOrigin}
+     */
+    setCrossOrigin() {}
+
+    /**
+     * Get or set an error on the Tech.
+     *
+     * @param {MediaError} [err]
+     *        Error to set on the Tech
+     *
+     * @return {MediaError|null}
+     *         The current error object on the tech, or null if there isn't one.
+     */
+    error(err) {
+      if (err !== undefined) {
+        this.error_ = new MediaError(err);
+        this.trigger('error');
+      }
+      return this.error_;
+    }
+
+    /**
+     * Returns the `TimeRange`s that have been played through for the current source.
+     *
+     * > NOTE: This implementation is incomplete. It does not track the played `TimeRange`.
+     *         It only checks whether the source has played at all or not.
+     *
+     * @return { import('../utils/time').TimeRange }
+     *         - A single time range if this video has played
+     *         - An empty set of ranges if not.
+     */
+    played() {
+      if (this.hasStarted_) {
+        return createTimeRanges(0, 0);
+      }
+      return createTimeRanges();
+    }
+
+    /**
+     * Start playback
+     *
+     * @abstract
+     *
+     * @see {Html5#play}
+     */
+    play() {}
+
+    /**
+     * Set whether we are scrubbing or not
+     *
+     * @abstract
+     * @param {boolean} _isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     *
+     * @see {Html5#setScrubbing}
+     */
+    setScrubbing(_isScrubbing) {}
+
+    /**
+     * Get whether we are scrubbing or not
+     *
+     * @abstract
+     *
+     * @see {Html5#scrubbing}
+     */
+    scrubbing() {}
+
+    /**
+     * Causes a manual time update to occur if {@link Tech#manualTimeUpdatesOn} was
+     * previously called.
+     *
+     * @param {number} _seconds
+     *        Set the current time of the media to this.
+     * @fires Tech#timeupdate
+     */
+    setCurrentTime(_seconds) {
+      // improve the accuracy of manual timeupdates
+      if (this.manualTimeUpdates) {
+        /**
+         * A manual `timeupdate` event.
+         *
+         * @event Tech#timeupdate
+         * @type {Event}
+         */
+        this.trigger({
+          type: 'timeupdate',
+          target: this,
+          manuallyTriggered: true
+        });
+      }
+    }
+
+    /**
+     * Turn on listeners for {@link VideoTrackList}, {@link {AudioTrackList}, and
+     * {@link TextTrackList} events.
+     *
+     * This adds {@link EventTarget~EventListeners} for `addtrack`, and  `removetrack`.
+     *
+     * @fires Tech#audiotrackchange
+     * @fires Tech#videotrackchange
+     * @fires Tech#texttrackchange
+     */
+    initTrackListeners() {
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link AudioTrackList}
+        *
+        * @event Tech#audiotrackchange
+        * @type {Event}
+        */
+
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link VideoTrackList}
+        *
+        * @event Tech#videotrackchange
+        * @type {Event}
+        */
+
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link TextTrackList}
+        *
+        * @event Tech#texttrackchange
+        * @type {Event}
+        */
+      NORMAL.names.forEach(name => {
+        const props = NORMAL[name];
+        const trackListChanges = () => {
+          this.trigger(`${name}trackchange`);
+        };
+        const tracks = this[props.getterName]();
+        tracks.addEventListener('removetrack', trackListChanges);
+        tracks.addEventListener('addtrack', trackListChanges);
+        this.on('dispose', () => {
+          tracks.removeEventListener('removetrack', trackListChanges);
+          tracks.removeEventListener('addtrack', trackListChanges);
+        });
+      });
+    }
+
+    /**
+     * Emulate TextTracks using vtt.js if necessary
+     *
+     * @fires Tech#vttjsloaded
+     * @fires Tech#vttjserror
+     */
+    addWebVttScript_() {
+      if (window.WebVTT) {
+        return;
+      }
+
+      // Initially, Tech.el_ is a child of a dummy-div wait until the Component system
+      // signals that the Tech is ready at which point Tech.el_ is part of the DOM
+      // before inserting the WebVTT script
+      if (document.body.contains(this.el())) {
+        // load via require if available and vtt.js script location was not passed in
+        // as an option. novtt builds will turn the above require call into an empty object
+        // which will cause this if check to always fail.
+        if (!this.options_['vtt.js'] && isPlain(browserIndex) && Object.keys(browserIndex).length > 0) {
+          this.trigger('vttjsloaded');
+          return;
+        }
+
+        // load vtt.js via the script location option or the cdn of no location was
+        // passed in
+        const script = document.createElement('script');
+        script.src = this.options_['vtt.js'] || 'https://vjs.zencdn.net/vttjs/0.14.1/vtt.min.js';
+        script.onload = () => {
+          /**
+           * Fired when vtt.js is loaded.
+           *
+           * @event Tech#vttjsloaded
+           * @type {Event}
+           */
+          this.trigger('vttjsloaded');
+        };
+        script.onerror = () => {
+          /**
+           * Fired when vtt.js was not loaded due to an error
+           *
+           * @event Tech#vttjsloaded
+           * @type {Event}
+           */
+          this.trigger('vttjserror');
+        };
+        this.on('dispose', () => {
+          script.onload = null;
+          script.onerror = null;
+        });
+        // but have not loaded yet and we set it to true before the inject so that
+        // we don't overwrite the injected window.WebVTT if it loads right away
+        window.WebVTT = true;
+        this.el().parentNode.appendChild(script);
+      } else {
+        this.ready(this.addWebVttScript_);
+      }
+    }
+
+    /**
+     * Emulate texttracks
+     *
+     */
+    emulateTextTracks() {
+      const tracks = this.textTracks();
+      const remoteTracks = this.remoteTextTracks();
+      const handleAddTrack = e => tracks.addTrack(e.track);
+      const handleRemoveTrack = e => tracks.removeTrack(e.track);
+      remoteTracks.on('addtrack', handleAddTrack);
+      remoteTracks.on('removetrack', handleRemoveTrack);
+      this.addWebVttScript_();
+      const updateDisplay = () => this.trigger('texttrackchange');
+      const textTracksChanges = () => {
+        updateDisplay();
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+          track.removeEventListener('cuechange', updateDisplay);
+          if (track.mode === 'showing') {
+            track.addEventListener('cuechange', updateDisplay);
+          }
+        }
+      };
+      textTracksChanges();
+      tracks.addEventListener('change', textTracksChanges);
+      tracks.addEventListener('addtrack', textTracksChanges);
+      tracks.addEventListener('removetrack', textTracksChanges);
+      this.on('dispose', function () {
+        remoteTracks.off('addtrack', handleAddTrack);
+        remoteTracks.off('removetrack', handleRemoveTrack);
+        tracks.removeEventListener('change', textTracksChanges);
+        tracks.removeEventListener('addtrack', textTracksChanges);
+        tracks.removeEventListener('removetrack', textTracksChanges);
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+          track.removeEventListener('cuechange', updateDisplay);
+        }
+      });
+    }
+
+    /**
+     * Create and returns a remote {@link TextTrack} object.
+     *
+     * @param {string} kind
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+     *
+     * @param {string} [label]
+     *        Label to identify the text track
+     *
+     * @param {string} [language]
+     *        Two letter language abbreviation
+     *
+     * @return {TextTrack}
+     *         The TextTrack that gets created.
+     */
+    addTextTrack(kind, label, language) {
+      if (!kind) {
+        throw new Error('TextTrack kind is required but was not provided');
+      }
+      return createTrackHelper(this, kind, label, language);
+    }
+
+    /**
+     * Create an emulated TextTrack for use by addRemoteTextTrack
+     *
+     * This is intended to be overridden by classes that inherit from
+     * Tech in order to create native or custom TextTracks.
+     *
+     * @param {Object} options
+     *        The object should contain the options to initialize the TextTrack with.
+     *
+     * @param {string} [options.kind]
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+     *
+     * @param {string} [options.label].
+     *        Label to identify the text track
+     *
+     * @param {string} [options.language]
+     *        Two letter language abbreviation.
+     *
+     * @return {HTMLTrackElement}
+     *         The track element that gets created.
+     */
+    createRemoteTextTrack(options) {
+      const track = merge(options, {
+        tech: this
+      });
+      return new REMOTE.remoteTextEl.TrackClass(track);
+    }
+
+    /**
+     * Creates a remote text track object and returns an html track element.
+     *
+     * > Note: This can be an emulated {@link HTMLTrackElement} or a native one.
+     *
+     * @param {Object} options
+     *        See {@link Tech#createRemoteTextTrack} for more detailed properties.
+     *
+     * @param {boolean} [manualCleanup=false]
+     *        - When false: the TextTrack will be automatically removed from the video
+     *          element whenever the source changes
+     *        - When True: The TextTrack will have to be cleaned up manually
+     *
+     * @return {HTMLTrackElement}
+     *         An Html Track Element.
+     *
+     */
+    addRemoteTextTrack(options = {}, manualCleanup) {
+      const htmlTrackElement = this.createRemoteTextTrack(options);
+      if (typeof manualCleanup !== 'boolean') {
+        manualCleanup = false;
+      }
+
+      // store HTMLTrackElement and TextTrack to remote list
+      this.remoteTextTrackEls().addTrackElement_(htmlTrackElement);
+      this.remoteTextTracks().addTrack(htmlTrackElement.track);
+      if (manualCleanup === false) {
+        // create the TextTrackList if it doesn't exist
+        this.ready(() => this.autoRemoteTextTracks_.addTrack(htmlTrackElement.track));
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Remove a remote text track from the remote `TextTrackList`.
+     *
+     * @param {TextTrack} track
+     *        `TextTrack` to remove from the `TextTrackList`
+     */
+    removeRemoteTextTrack(track) {
+      const trackElement = this.remoteTextTrackEls().getTrackElementByTrack_(track);
+
+      // remove HTMLTrackElement and TextTrack from remote list
+      this.remoteTextTrackEls().removeTrackElement_(trackElement);
+      this.remoteTextTracks().removeTrack(track);
+      this.autoRemoteTextTracks_.removeTrack(track);
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object}
+     *         An object with supported media playback quality metrics
+     *
+     * @abstract
+     */
+    getVideoPlaybackQuality() {
+      return {};
+    }
+
+    /**
+     * Attempt to create a floating video window always on top of other windows
+     * so that users may continue consuming media while they interact with other
+     * content sites, or applications on their device.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @return {Promise|undefined}
+     *         A promise with a Picture-in-Picture window if the browser supports
+     *         Promises (or one was passed in as an option). It returns undefined
+     *         otherwise.
+     *
+     * @abstract
+     */
+    requestPictureInPicture() {
+      return Promise.reject();
+    }
+
+    /**
+     * A method to check for the value of the 'disablePictureInPicture' <video> property.
+     * Defaults to true, as it should be considered disabled if the tech does not support pip
+     *
+     * @abstract
+     */
+    disablePictureInPicture() {
+      return true;
+    }
+
+    /**
+     * A method to set or unset the 'disablePictureInPicture' <video> property.
+     *
+     * @abstract
+     */
+    setDisablePictureInPicture() {}
+
+    /**
+     * A fallback implementation of requestVideoFrameCallback using requestAnimationFrame
+     *
+     * @param {function} cb
+     * @return {number} request id
+     */
+    requestVideoFrameCallback(cb) {
+      const id = newGUID();
+      if (!this.isReady_ || this.paused()) {
+        this.queuedHanders_.add(id);
+        this.one('playing', () => {
+          if (this.queuedHanders_.has(id)) {
+            this.queuedHanders_.delete(id);
+            cb();
+          }
+        });
+      } else {
+        this.requestNamedAnimationFrame(id, cb);
+      }
+      return id;
+    }
+
+    /**
+     * A fallback implementation of cancelVideoFrameCallback
+     *
+     * @param {number} id id of callback to be cancelled
+     */
+    cancelVideoFrameCallback(id) {
+      if (this.queuedHanders_.has(id)) {
+        this.queuedHanders_.delete(id);
+      } else {
+        this.cancelNamedAnimationFrame(id);
+      }
+    }
+
+    /**
+     * A method to set a poster from a `Tech`.
+     *
+     * @abstract
+     */
+    setPoster() {}
+
+    /**
+     * A method to check for the presence of the 'playsinline' <video> attribute.
+     *
+     * @abstract
+     */
+    playsinline() {}
+
+    /**
+     * A method to set or unset the 'playsinline' <video> attribute.
+     *
+     * @abstract
+     */
+    setPlaysinline() {}
+
+    /**
+     * Attempt to force override of native audio tracks.
+     *
+     * @param {boolean} override - If set to true native audio will be overridden,
+     * otherwise native audio will potentially be used.
+     *
+     * @abstract
+     */
+    overrideNativeAudioTracks(override) {}
+
+    /**
+     * Attempt to force override of native video tracks.
+     *
+     * @param {boolean} override - If set to true native video will be overridden,
+     * otherwise native video will potentially be used.
+     *
+     * @abstract
+     */
+    overrideNativeVideoTracks(override) {}
+
+    /**
+     * Check if the tech can support the given mime-type.
+     *
+     * The base tech does not support any type, but source handlers might
+     * overwrite this.
+     *
+     * @param  {string} _type
+     *         The mimetype to check for support
+     *
+     * @return {string}
+     *         'probably', 'maybe', or empty string
+     *
+     * @see [Spec]{@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType}
+     *
+     * @abstract
+     */
+    canPlayType(_type) {
+      return '';
+    }
+
+    /**
+     * Check if the type is supported by this tech.
+     *
+     * The base tech does not support any type, but source handlers might
+     * overwrite this.
+     *
+     * @param {string} _type
+     *        The media type to check
+     * @return {string} Returns the native video element's response
+     */
+    static canPlayType(_type) {
+      return '';
+    }
+
+    /**
+     * Check if the tech can support the given source
+     *
+     * @param {Object} srcObj
+     *        The source object
+     * @param {Object} options
+     *        The options passed to the tech
+     * @return {string} 'probably', 'maybe', or '' (empty string)
+     */
+    static canPlaySource(srcObj, options) {
+      return Tech.canPlayType(srcObj.type);
+    }
+
+    /*
+     * Return whether the argument is a Tech or not.
+     * Can be passed either a Class like `Html5` or a instance like `player.tech_`
+     *
+     * @param {Object} component
+     *        The item to check
+     *
+     * @return {boolean}
+     *         Whether it is a tech or not
+     *         - True if it is a tech
+     *         - False if it is not
+     */
+    static isTech(component) {
+      return component.prototype instanceof Tech || component instanceof Tech || component === Tech;
+    }
+
+    /**
+     * Registers a `Tech` into a shared list for videojs.
+     *
+     * @param {string} name
+     *        Name of the `Tech` to register.
+     *
+     * @param {Object} tech
+     *        The `Tech` class to register.
+     */
+    static registerTech(name, tech) {
+      if (!Tech.techs_) {
+        Tech.techs_ = {};
+      }
+      if (!Tech.isTech(tech)) {
+        throw new Error(`Tech ${name} must be a Tech`);
+      }
+      if (!Tech.canPlayType) {
+        throw new Error('Techs must have a static canPlayType method on them');
+      }
+      if (!Tech.canPlaySource) {
+        throw new Error('Techs must have a static canPlaySource method on them');
+      }
+      name = toTitleCase(name);
+      Tech.techs_[name] = tech;
+      Tech.techs_[toLowerCase(name)] = tech;
+      if (name !== 'Tech') {
+        // camel case the techName for use in techOrder
+        Tech.defaultTechOrder_.push(name);
+      }
+      return tech;
+    }
+
+    /**
+     * Get a `Tech` from the shared list by name.
+     *
+     * @param {string} name
+     *        `camelCase` or `TitleCase` name of the Tech to get
+     *
+     * @return {Tech|undefined}
+     *         The `Tech` or undefined if there was no tech with the name requested.
+     */
+    static getTech(name) {
+      if (!name) {
+        return;
+      }
+      if (Tech.techs_ && Tech.techs_[name]) {
+        return Tech.techs_[name];
+      }
+      name = toTitleCase(name);
+      if (window && window.videojs && window.videojs[name]) {
+        log.warn(`The ${name} tech was added to the videojs object when it should be registered using videojs.registerTech(name, tech)`);
+        return window.videojs[name];
+      }
+    }
+  }
+
+  /**
+   * Get the {@link VideoTrackList}
+   *
+   * @returns {VideoTrackList}
+   * @method Tech.prototype.videoTracks
+   */
+
+  /**
+   * Get the {@link AudioTrackList}
+   *
+   * @returns {AudioTrackList}
+   * @method Tech.prototype.audioTracks
+   */
+
+  /**
+   * Get the {@link TextTrackList}
+   *
+   * @returns {TextTrackList}
+   * @method Tech.prototype.textTracks
+   */
+
+  /**
+   * Get the remote element {@link TextTrackList}
+   *
+   * @returns {TextTrackList}
+   * @method Tech.prototype.remoteTextTracks
+   */
+
+  /**
+   * Get the remote element {@link HtmlTrackElementList}
+   *
+   * @returns {HtmlTrackElementList}
+   * @method Tech.prototype.remoteTextTrackEls
+   */
+
+  ALL.names.forEach(function (name) {
+    const props = ALL[name];
+    Tech.prototype[props.getterName] = function () {
+      this[props.privateName] = this[props.privateName] || new props.ListClass();
+      return this[props.privateName];
+    };
+  });
+
+  /**
+   * List of associated text tracks
+   *
+   * @type {TextTrackList}
+   * @private
+   * @property Tech#textTracks_
+   */
+
+  /**
+   * List of associated audio tracks.
+   *
+   * @type {AudioTrackList}
+   * @private
+   * @property Tech#audioTracks_
+   */
+
+  /**
+   * List of associated video tracks.
+   *
+   * @type {VideoTrackList}
+   * @private
+   * @property Tech#videoTracks_
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports volume control.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresVolumeControl = true;
+
+  /**
+   * Boolean indicating whether the `Tech` supports muting volume.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresMuteControl = true;
+
+  /**
+   * Boolean indicating whether the `Tech` supports fullscreen resize control.
+   * Resizing plugins using request fullscreen reloads the plugin
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresFullscreenResize = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports changing the speed at which the video
+   * plays. Examples:
+   *   - Set player to play 2x (twice) as fast
+   *   - Set player to play 0.5x (half) as fast
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresPlaybackRate = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `progress` event.
+   * This will be used to determine if {@link Tech#manualProgressOn} should be called.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresProgressEvents = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `sourceset` event.
+   *
+   * A tech should set this to `true` and then use {@link Tech#triggerSourceset}
+   * to trigger a {@link Tech#event:sourceset} at the earliest time after getting
+   * a new source.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresSourceset = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `timeupdate` event.
+   * This will be used to determine if {@link Tech#manualTimeUpdates} should be called.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresTimeupdateEvents = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the native `TextTrack`s.
+   * This will help us integrate with native `TextTrack`s if the browser supports them.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresNativeTextTracks = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports `requestVideoFrameCallback`.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresVideoFrameCallback = false;
+
+  /**
+   * A functional mixin for techs that want to use the Source Handler pattern.
+   * Source handlers are scripts for handling specific formats.
+   * The source handler pattern is used for adaptive formats (HLS, DASH) that
+   * manually load video data and feed it into a Source Buffer (Media Source Extensions)
+   * Example: `Tech.withSourceHandlers.call(MyTech);`
+   *
+   * @param {Tech} _Tech
+   *        The tech to add source handler functions to.
+   *
+   * @mixes Tech~SourceHandlerAdditions
+   */
+  Tech.withSourceHandlers = function (_Tech) {
+    /**
+     * Register a source handler
+     *
+     * @param {Function} handler
+     *        The source handler class
+     *
+     * @param {number} [index]
+     *        Register it at the following index
+     */
+    _Tech.registerSourceHandler = function (handler, index) {
+      let handlers = _Tech.sourceHandlers;
+      if (!handlers) {
+        handlers = _Tech.sourceHandlers = [];
+      }
+      if (index === undefined) {
+        // add to the end of the list
+        index = handlers.length;
+      }
+      handlers.splice(index, 0, handler);
+    };
+
+    /**
+     * Check if the tech can support the given type. Also checks the
+     * Techs sourceHandlers.
+     *
+     * @param {string} type
+     *         The mimetype to check.
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    _Tech.canPlayType = function (type) {
+      const handlers = _Tech.sourceHandlers || [];
+      let can;
+      for (let i = 0; i < handlers.length; i++) {
+        can = handlers[i].canPlayType(type);
+        if (can) {
+          return can;
+        }
+      }
+      return '';
+    };
+
+    /**
+     * Returns the first source handler that supports the source.
+     *
+     * TODO: Answer question: should 'probably' be prioritized over 'maybe'
+     *
+     * @param {SourceObject} source
+     *        The source object
+     *
+     * @param {Object} options
+     *        The options passed to the tech
+     *
+     * @return {SourceHandler|null}
+     *          The first source handler that supports the source or null if
+     *          no SourceHandler supports the source
+     */
+    _Tech.selectSourceHandler = function (source, options) {
+      const handlers = _Tech.sourceHandlers || [];
+      let can;
+      for (let i = 0; i < handlers.length; i++) {
+        can = handlers[i].canHandleSource(source, options);
+        if (can) {
+          return handlers[i];
+        }
+      }
+      return null;
+    };
+
+    /**
+     * Check if the tech can support the given source.
+     *
+     * @param {SourceObject} srcObj
+     *        The source object
+     *
+     * @param {Object} options
+     *        The options passed to the tech
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    _Tech.canPlaySource = function (srcObj, options) {
+      const sh = _Tech.selectSourceHandler(srcObj, options);
+      if (sh) {
+        return sh.canHandleSource(srcObj, options);
+      }
+      return '';
+    };
+
+    /**
+     * When using a source handler, prefer its implementation of
+     * any function normally provided by the tech.
+     */
+    const deferrable = ['seekable', 'seeking', 'duration'];
+
+    /**
+     * A wrapper around {@link Tech#seekable} that will call a `SourceHandler`s seekable
+     * function if it exists, with a fallback to the Techs seekable function.
+     *
+     * @method _Tech.seekable
+     */
+
+    /**
+     * A wrapper around {@link Tech#duration} that will call a `SourceHandler`s duration
+     * function if it exists, otherwise it will fallback to the techs duration function.
+     *
+     * @method _Tech.duration
+     */
+
+    deferrable.forEach(function (fnName) {
+      const originalFn = this[fnName];
+      if (typeof originalFn !== 'function') {
+        return;
+      }
+      this[fnName] = function () {
+        if (this.sourceHandler_ && this.sourceHandler_[fnName]) {
+          return this.sourceHandler_[fnName].apply(this.sourceHandler_, arguments);
+        }
+        return originalFn.apply(this, arguments);
+      };
+    }, _Tech.prototype);
+
+    /**
+     * Create a function for setting the source using a source object
+     * and source handlers.
+     * Should never be called unless a source handler was found.
+     *
+     * @param {SourceObject} source
+     *        A source object with src and type keys
+     */
+    _Tech.prototype.setSource = function (source) {
+      let sh = _Tech.selectSourceHandler(source, this.options_);
+      if (!sh) {
+        // Fall back to a native source handler when unsupported sources are
+        // deliberately set
+        if (_Tech.nativeSourceHandler) {
+          sh = _Tech.nativeSourceHandler;
+        } else {
+          log.error('No source handler found for the current source.');
+        }
+      }
+
+      // Dispose any existing source handler
+      this.disposeSourceHandler();
+      this.off('dispose', this.disposeSourceHandler_);
+      if (sh !== _Tech.nativeSourceHandler) {
+        this.currentSource_ = source;
+      }
+      this.sourceHandler_ = sh.handleSource(source, this, this.options_);
+      this.one('dispose', this.disposeSourceHandler_);
+    };
+
+    /**
+     * Clean up any existing SourceHandlers and listeners when the Tech is disposed.
+     *
+     * @listens Tech#dispose
+     */
+    _Tech.prototype.disposeSourceHandler = function () {
+      // if we have a source and get another one
+      // then we are loading something new
+      // than clear all of our current tracks
+      if (this.currentSource_) {
+        this.clearTracks(['audio', 'video']);
+        this.currentSource_ = null;
+      }
+
+      // always clean up auto-text tracks
+      this.cleanupAutoTextTracks();
+      if (this.sourceHandler_) {
+        if (this.sourceHandler_.dispose) {
+          this.sourceHandler_.dispose();
+        }
+        this.sourceHandler_ = null;
+      }
+    };
+  };
+
+  // The base Tech class needs to be registered as a Component. It is the only
+  // Tech that can be registered as a Component.
+  Component.registerComponent('Tech', Tech);
+  Tech.registerTech('Tech', Tech);
+
+  /**
+   * A list of techs that should be added to techOrder on Players
+   *
+   * @private
+   */
+  Tech.defaultTechOrder_ = [];
+
+  /**
+   * @file middleware.js
+   * @module middleware
+   */
+  const middlewares = {};
+  const middlewareInstances = {};
+  const TERMINATOR = {};
+
+  /**
+   * A middleware object is a plain JavaScript object that has methods that
+   * match the {@link Tech} methods found in the lists of allowed
+   * {@link module:middleware.allowedGetters|getters},
+   * {@link module:middleware.allowedSetters|setters}, and
+   * {@link module:middleware.allowedMediators|mediators}.
+   *
+   * @typedef {Object} MiddlewareObject
+   */
+
+  /**
+   * A middleware factory function that should return a
+   * {@link module:middleware~MiddlewareObject|MiddlewareObject}.
+   *
+   * This factory will be called for each player when needed, with the player
+   * passed in as an argument.
+   *
+   * @callback MiddlewareFactory
+   * @param { import('../player').default } player
+   *        A Video.js player.
+   */
+
+  /**
+   * Define a middleware that the player should use by way of a factory function
+   * that returns a middleware object.
+   *
+   * @param  {string} type
+   *         The MIME type to match or `"*"` for all MIME types.
+   *
+   * @param  {MiddlewareFactory} middleware
+   *         A middleware factory function that will be executed for
+   *         matching types.
+   */
+  function use(type, middleware) {
+    middlewares[type] = middlewares[type] || [];
+    middlewares[type].push(middleware);
+  }
+
+  /**
+   * Asynchronously sets a source using middleware by recursing through any
+   * matching middlewares and calling `setSource` on each, passing along the
+   * previous returned value each time.
+   *
+   * @param  { import('../player').default } player
+   *         A {@link Player} instance.
+   *
+   * @param  {Tech~SourceObject} src
+   *         A source object.
+   *
+   * @param  {Function}
+   *         The next middleware to run.
+   */
+  function setSource(player, src, next) {
+    player.setTimeout(() => setSourceHelper(src, middlewares[src.type], next, player), 1);
+  }
+
+  /**
+   * When the tech is set, passes the tech to each middleware's `setTech` method.
+   *
+   * @param {Object[]} middleware
+   *        An array of middleware instances.
+   *
+   * @param { import('../tech/tech').default } tech
+   *        A Video.js tech.
+   */
+  function setTech(middleware, tech) {
+    middleware.forEach(mw => mw.setTech && mw.setTech(tech));
+  }
+
+  /**
+   * Calls a getter on the tech first, through each middleware
+   * from right to left to the player.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @return {*}
+   *         The final value from the tech after middleware has intercepted it.
+   */
+  function get(middleware, tech, method) {
+    return middleware.reduceRight(middlewareIterator(method), tech[method]());
+  }
+
+  /**
+   * Takes the argument given to the player and calls the setter method on each
+   * middleware from left to right to the tech.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @param  {*} arg
+   *         The value to set on the tech.
+   *
+   * @return {*}
+   *         The return value of the `method` of the `tech`.
+   */
+  function set(middleware, tech, method, arg) {
+    return tech[method](middleware.reduce(middlewareIterator(method), arg));
+  }
+
+  /**
+   * Takes the argument given to the player and calls the `call` version of the
+   * method on each middleware from left to right.
+   *
+   * Then, call the passed in method on the tech and return the result unchanged
+   * back to the player, through middleware, this time from right to left.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @param  {*} arg
+   *         The value to set on the tech.
+   *
+   * @return {*}
+   *         The return value of the `method` of the `tech`, regardless of the
+   *         return values of middlewares.
+   */
+  function mediate(middleware, tech, method, arg = null) {
+    const callMethod = 'call' + toTitleCase(method);
+    const middlewareValue = middleware.reduce(middlewareIterator(callMethod), arg);
+    const terminated = middlewareValue === TERMINATOR;
+    // deprecated. The `null` return value should instead return TERMINATOR to
+    // prevent confusion if a techs method actually returns null.
+    const returnValue = terminated ? null : tech[method](middlewareValue);
+    executeRight(middleware, method, returnValue, terminated);
+    return returnValue;
+  }
+
+  /**
+   * Enumeration of allowed getters where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedGetters = {
+    buffered: 1,
+    currentTime: 1,
+    duration: 1,
+    muted: 1,
+    played: 1,
+    paused: 1,
+    seekable: 1,
+    volume: 1,
+    ended: 1
+  };
+
+  /**
+   * Enumeration of allowed setters where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedSetters = {
+    setCurrentTime: 1,
+    setMuted: 1,
+    setVolume: 1
+  };
+
+  /**
+   * Enumeration of allowed mediators where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedMediators = {
+    play: 1,
+    pause: 1
+  };
+  function middlewareIterator(method) {
+    return (value, mw) => {
+      // if the previous middleware terminated, pass along the termination
+      if (value === TERMINATOR) {
+        return TERMINATOR;
+      }
+      if (mw[method]) {
+        return mw[method](value);
+      }
+      return value;
+    };
+  }
+  function executeRight(mws, method, value, terminated) {
+    for (let i = mws.length - 1; i >= 0; i--) {
+      const mw = mws[i];
+      if (mw[method]) {
+        mw[method](terminated, value);
+      }
+    }
+  }
+
+  /**
+   * Clear the middleware cache for a player.
+   *
+   * @param  { import('../player').default } player
+   *         A {@link Player} instance.
+   */
+  function clearCacheForPlayer(player) {
+    middlewareInstances[player.id()] = null;
+  }
+
+  /**
+   * {
+   *  [playerId]: [[mwFactory, mwInstance], ...]
+   * }
+   *
+   * @private
+   */
+  function getOrCreateFactory(player, mwFactory) {
+    const mws = middlewareInstances[player.id()];
+    let mw = null;
+    if (mws === undefined || mws === null) {
+      mw = mwFactory(player);
+      middlewareInstances[player.id()] = [[mwFactory, mw]];
+      return mw;
+    }
+    for (let i = 0; i < mws.length; i++) {
+      const [mwf, mwi] = mws[i];
+      if (mwf !== mwFactory) {
+        continue;
+      }
+      mw = mwi;
+    }
+    if (mw === null) {
+      mw = mwFactory(player);
+      mws.push([mwFactory, mw]);
+    }
+    return mw;
+  }
+  function setSourceHelper(src = {}, middleware = [], next, player, acc = [], lastRun = false) {
+    const [mwFactory, ...mwrest] = middleware;
+
+    // if mwFactory is a string, then we're at a fork in the road
+    if (typeof mwFactory === 'string') {
+      setSourceHelper(src, middlewares[mwFactory], next, player, acc, lastRun);
+
+      // if we have an mwFactory, call it with the player to get the mw,
+      // then call the mw's setSource method
+    } else if (mwFactory) {
+      const mw = getOrCreateFactory(player, mwFactory);
+
+      // if setSource isn't present, implicitly select this middleware
+      if (!mw.setSource) {
+        acc.push(mw);
+        return setSourceHelper(src, mwrest, next, player, acc, lastRun);
+      }
+      mw.setSource(Object.assign({}, src), function (err, _src) {
+        // something happened, try the next middleware on the current level
+        // make sure to use the old src
+        if (err) {
+          return setSourceHelper(src, mwrest, next, player, acc, lastRun);
+        }
+
+        // we've succeeded, now we need to go deeper
+        acc.push(mw);
+
+        // if it's the same type, continue down the current chain
+        // otherwise, we want to go down the new chain
+        setSourceHelper(_src, src.type === _src.type ? mwrest : middlewares[_src.type], next, player, acc, lastRun);
+      });
+    } else if (mwrest.length) {
+      setSourceHelper(src, mwrest, next, player, acc, lastRun);
+    } else if (lastRun) {
+      next(src, acc);
+    } else {
+      setSourceHelper(src, middlewares['*'], next, player, acc, true);
+    }
+  }
+
+  /**
+   * Mimetypes
+   *
+   * @see https://www.iana.org/assignments/media-types/media-types.xhtml
+   * @typedef Mimetypes~Kind
+   * @enum
+   */
+  const MimetypesKind = {
+    opus: 'video/ogg',
+    ogv: 'video/ogg',
+    mp4: 'video/mp4',
+    mov: 'video/mp4',
+    m4v: 'video/mp4',
+    mkv: 'video/x-matroska',
+    m4a: 'audio/mp4',
+    mp3: 'audio/mpeg',
+    aac: 'audio/aac',
+    caf: 'audio/x-caf',
+    flac: 'audio/flac',
+    oga: 'audio/ogg',
+    wav: 'audio/wav',
+    m3u8: 'application/x-mpegURL',
+    mpd: 'application/dash+xml',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    gif: 'image/gif',
+    png: 'image/png',
+    svg: 'image/svg+xml',
+    webp: 'image/webp'
+  };
+
+  /**
+   * Get the mimetype of a given src url if possible
+   *
+   * @param {string} src
+   *        The url to the src
+   *
+   * @return {string}
+   *         return the mimetype if it was known or empty string otherwise
+   */
+  const getMimetype = function (src = '') {
+    const ext = getFileExtension(src);
+    const mimetype = MimetypesKind[ext.toLowerCase()];
+    return mimetype || '';
+  };
+
+  /**
+   * Find the mime type of a given source string if possible. Uses the player
+   * source cache.
+   *
+   * @param { import('../player').default } player
+   *        The player object
+   *
+   * @param {string} src
+   *        The source string
+   *
+   * @return {string}
+   *         The type that was found
+   */
+  const findMimetype = (player, src) => {
+    if (!src) {
+      return '';
+    }
+
+    // 1. check for the type in the `source` cache
+    if (player.cache_.source.src === src && player.cache_.source.type) {
+      return player.cache_.source.type;
+    }
+
+    // 2. see if we have this source in our `currentSources` cache
+    const matchingSources = player.cache_.sources.filter(s => s.src === src);
+    if (matchingSources.length) {
+      return matchingSources[0].type;
+    }
+
+    // 3. look for the src url in source elements and use the type there
+    const sources = player.$$('source');
+    for (let i = 0; i < sources.length; i++) {
+      const s = sources[i];
+      if (s.type && s.src && s.src === src) {
+        return s.type;
+      }
+    }
+
+    // 4. finally fallback to our list of mime types based on src url extension
+    return getMimetype(src);
+  };
+
+  /**
+   * @module filter-source
+   */
+
+  /**
+   * Filter out single bad source objects or multiple source objects in an
+   * array. Also flattens nested source object arrays into a 1 dimensional
+   * array of source objects.
+   *
+   * @param {Tech~SourceObject|Tech~SourceObject[]} src
+   *        The src object to filter
+   *
+   * @return {Tech~SourceObject[]}
+   *         An array of sourceobjects containing only valid sources
+   *
+   * @private
+   */
+  const filterSource = function (src) {
+    // traverse array
+    if (Array.isArray(src)) {
+      let newsrc = [];
+      src.forEach(function (srcobj) {
+        srcobj = filterSource(srcobj);
+        if (Array.isArray(srcobj)) {
+          newsrc = newsrc.concat(srcobj);
+        } else if (isObject(srcobj)) {
+          newsrc.push(srcobj);
+        }
+      });
+      src = newsrc;
+    } else if (typeof src === 'string' && src.trim()) {
+      // convert string into object
+      src = [fixSource({
+        src
+      })];
+    } else if (isObject(src) && typeof src.src === 'string' && src.src && src.src.trim()) {
+      // src is already valid
+      src = [fixSource(src)];
+    } else {
+      // invalid source, turn it into an empty array
+      src = [];
+    }
+    return src;
+  };
+
+  /**
+   * Checks src mimetype, adding it when possible
+   *
+   * @param {Tech~SourceObject} src
+   *        The src object to check
+   * @return {Tech~SourceObject}
+   *        src Object with known type
+   */
+  function fixSource(src) {
+    if (!src.type) {
+      const mimetype = getMimetype(src.src);
+      if (mimetype) {
+        src.type = mimetype;
+      }
+    }
+    return src;
+  }
+
+  var icons = "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-play\">\n      <path d=\"M16 10v28l22-14z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-pause\">\n      <path d=\"M12 38h8V10h-8v28zm16-28v28h8V10h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-audio\">\n      <path d=\"M24 2C14.06 2 6 10.06 6 20v14c0 3.31 2.69 6 6 6h6V24h-8v-4c0-7.73 6.27-14 14-14s14 6.27 14 14v4h-8v16h6c3.31 0 6-2.69 6-6V20c0-9.94-8.06-18-18-18z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-captions\">\n      <path d=\"M38 8H10c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM22 22h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2zm14 0h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-subtitles\">\n      <path d=\"M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-fullscreen-enter\">\n      <path d=\"M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-fullscreen-exit\">\n      <path d=\"M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-play-circle\">\n      <path d=\"M20 33l12-9-12-9v18zm4-29C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-mute\">\n      <path d=\"M33 24c0-3.53-2.04-6.58-5-8.05v4.42l4.91 4.91c.06-.42.09-.85.09-1.28zm5 0c0 1.88-.41 3.65-1.08 5.28l3.03 3.03C41.25 29.82 42 27 42 24c0-8.56-5.99-15.72-14-17.54v4.13c5.78 1.72 10 7.07 10 13.41zM8.55 6L6 8.55 15.45 18H6v12h8l10 10V26.55l8.51 8.51c-1.34 1.03-2.85 1.86-4.51 2.36v4.13a17.94 17.94 0 0 0 7.37-3.62L39.45 42 42 39.45l-18-18L8.55 6zM24 8l-4.18 4.18L24 16.36V8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-low\">\n      <path d=\"M14 18v12h8l10 10V8L22 18h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-medium\">\n      <path d=\"M37 24c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zm-27-6v12h8l10 10V8L18 18h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-high\">\n      <path d=\"M6 18v12h8l10 10V8L14 18H6zm27 6c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zM28 6.46v4.13c5.78 1.72 10 7.07 10 13.41s-4.22 11.69-10 13.41v4.13c8.01-1.82 14-8.97 14-17.54S36.01 8.28 28 6.46z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-spinner\">\n      <path d=\"M18.8 21l9.53-16.51C26.94 4.18 25.49 4 24 4c-4.8 0-9.19 1.69-12.64 4.51l7.33 12.69.11-.2zm24.28-3c-1.84-5.85-6.3-10.52-11.99-12.68L23.77 18h19.31zm.52 2H28.62l.58 1 9.53 16.5C41.99 33.94 44 29.21 44 24c0-1.37-.14-2.71-.4-4zm-26.53 4l-7.8-13.5C6.01 14.06 4 18.79 4 24c0 1.37.14 2.71.4 4h14.98l-2.31-4zM4.92 30c1.84 5.85 6.3 10.52 11.99 12.68L24.23 30H4.92zm22.54 0l-7.8 13.51c1.4.31 2.85.49 4.34.49 4.8 0 9.19-1.69 12.64-4.51L29.31 26.8 27.46 30z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 24 24\" id=\"vjs-icon-hd\">\n      <path d=\"M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-chapters\">\n      <path d=\"M6 26h4v-4H6v4zm0 8h4v-4H6v4zm0-16h4v-4H6v4zm8 8h28v-4H14v4zm0 8h28v-4H14v4zm0-20v4h28v-4H14z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 40 40\" id=\"vjs-icon-downloading\">\n      <path d=\"M18.208 36.875q-3.208-.292-5.979-1.729-2.771-1.438-4.812-3.729-2.042-2.292-3.188-5.229-1.146-2.938-1.146-6.23 0-6.583 4.334-11.416 4.333-4.834 10.833-5.5v3.166q-5.167.75-8.583 4.646Q6.25 14.75 6.25 19.958q0 5.209 3.396 9.104 3.396 3.896 8.562 4.646zM20 28.417L11.542 20l2.083-2.083 4.917 4.916v-11.25h2.916v11.25l4.875-4.916L28.417 20zm1.792 8.458v-3.167q1.833-.25 3.541-.958 1.709-.708 3.167-1.875l2.333 2.292q-1.958 1.583-4.25 2.541-2.291.959-4.791 1.167zm6.791-27.792q-1.541-1.125-3.25-1.854-1.708-.729-3.541-1.021V3.042q2.5.25 4.77 1.208 2.271.958 4.271 2.5zm4.584 21.584l-2.25-2.25q1.166-1.5 1.854-3.209.687-1.708.937-3.541h3.209q-.292 2.5-1.229 4.791-.938 2.292-2.521 4.209zm.541-12.417q-.291-1.833-.958-3.562-.667-1.73-1.833-3.188l2.375-2.208q1.541 1.916 2.458 4.208.917 2.292 1.167 4.75z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download\">\n      <path d=\"M10.8 40.55q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h26.35v-7.7h3.4v7.7q0 1.4-1 2.4t-2.4 1zM24 32.1L13.9 22.05l2.45-2.45 5.95 5.95V7.15h3.4v18.4l5.95-5.95 2.45 2.45z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download-done\">\n      <path d=\"M9.8 40.5v-3.45h28.4v3.45zm9.2-9.05L7.4 19.85l2.45-2.35L19 26.65l19.2-19.2 2.4 2.4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download-off\">\n      <path d=\"M4.9 4.75L43.25 43.1 41 45.3l-4.75-4.75q-.05.05-.075.025-.025-.025-.075-.025H10.8q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h22.05l-7-7-1.85 1.8L13.9 21.9l1.85-1.85L2.7 7zm26.75 14.7l2.45 2.45-3.75 3.8-2.45-2.5zM25.7 7.15V21.1l-3.4-3.45V7.15z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-share\">\n      <path d=\"M36 32.17c-1.52 0-2.89.59-3.93 1.54L17.82 25.4c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31A5.83 5.83 0 1 0 36 32.17z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cog\">\n      <path d=\"M38.86 25.95c.08-.64.14-1.29.14-1.95s-.06-1.31-.14-1.95l4.23-3.31c.38-.3.49-.84.24-1.28l-4-6.93c-.25-.43-.77-.61-1.22-.43l-4.98 2.01c-1.03-.79-2.16-1.46-3.38-1.97L29 4.84c-.09-.47-.5-.84-1-.84h-8c-.5 0-.91.37-.99.84l-.75 5.3a14.8 14.8 0 0 0-3.38 1.97L9.9 10.1a1 1 0 0 0-1.22.43l-4 6.93c-.25.43-.14.97.24 1.28l4.22 3.31C9.06 22.69 9 23.34 9 24s.06 1.31.14 1.95l-4.22 3.31c-.38.3-.49.84-.24 1.28l4 6.93c.25.43.77.61 1.22.43l4.98-2.01c1.03.79 2.16 1.46 3.38 1.97l.75 5.3c.08.47.49.84.99.84h8c.5 0 .91-.37.99-.84l.75-5.3a14.8 14.8 0 0 0 3.38-1.97l4.98 2.01a1 1 0 0 0 1.22-.43l4-6.93c.25-.43.14-.97-.24-1.28l-4.22-3.31zM24 31c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-square\">\n      <path d=\"M36 8H12c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H12V12h24v24z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle\">\n      <circle cx=\"24\" cy=\"24\" r=\"20\"></circle>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle-outline\">\n      <path d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle-inner-circle\">\n      <path d=\"M24 4C12.97 4 4 12.97 4 24s8.97 20 20 20 20-8.97 20-20S35.03 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm6-16c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6 6 2.69 6 6z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cancel\">\n      <path d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-replay\">\n      <path d=\"M24 10V2L14 12l10 10v-8c6.63 0 12 5.37 12 12s-5.37 12-12 12-12-5.37-12-12H8c0 8.84 7.16 16 16 16s16-7.16 16-16-7.16-16-16-16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-repeat\">\n      <path d=\"M14 14h20v6l8-8-8-8v6H10v12h4v-8zm20 20H14v-6l-8 8 8 8v-6h24V26h-4v8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-5\">\n      <path d=\"M17.689 98l-8.697 8.696 8.697 8.697 2.486-2.485-4.32-4.319h1.302c4.93 0 9.071 1.722 12.424 5.165 3.352 3.443 5.029 7.638 5.029 12.584h3.55c0-2.958-.553-5.73-1.658-8.313-1.104-2.583-2.622-4.841-4.555-6.774-1.932-1.932-4.19-3.45-6.773-4.555-2.584-1.104-5.355-1.657-8.313-1.657H15.5l4.615-4.615zm-8.08 21.659v13.861h11.357v5.008H9.609V143h12.7c.834 0 1.55-.298 2.146-.894.596-.597.895-1.31.895-2.145v-7.781c0-.835-.299-1.55-.895-2.147a2.929 2.929 0 0 0-2.147-.894h-8.227v-5.096H25.35v-4.384z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-10\">\n      <path d=\"M42.315 125.63c0-4.997-1.694-9.235-5.08-12.713-3.388-3.479-7.571-5.218-12.552-5.218h-1.315l4.363 4.363-2.51 2.51-8.787-8.786L25.221 97l2.45 2.45-4.662 4.663h1.375c2.988 0 5.788.557 8.397 1.673 2.61 1.116 4.892 2.65 6.844 4.602 1.953 1.953 3.487 4.234 4.602 6.844 1.116 2.61 1.674 5.41 1.674 8.398zM8.183 142v-19.657H3.176V117.8h9.643V142zm13.63 0c-1.156 0-2.127-.393-2.912-1.178-.778-.778-1.168-1.746-1.168-2.902v-16.04c0-1.156.393-2.127 1.178-2.912.779-.779 1.746-1.168 2.902-1.168h7.696c1.156 0 2.126.392 2.911 1.177.779.78 1.168 1.747 1.168 2.903v16.04c0 1.156-.392 2.127-1.177 2.912-.779.779-1.746 1.168-2.902 1.168zm.556-4.636h6.583v-15.02H22.37z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-30\">\n      <path d=\"M26.047 97l-8.733 8.732 8.733 8.733 2.496-2.494-4.336-4.338h1.307c4.95 0 9.108 1.73 12.474 5.187 3.367 3.458 5.051 7.668 5.051 12.635h3.565c0-2.97-.556-5.751-1.665-8.346-1.109-2.594-2.633-4.862-4.574-6.802-1.94-1.941-4.208-3.466-6.803-4.575-2.594-1.109-5.375-1.664-8.345-1.664H23.85l4.634-4.634zM2.555 117.531v4.688h10.297v5.25H5.873v4.687h6.979v5.156H2.555V142H13.36c1.061 0 1.95-.395 2.668-1.186.718-.79 1.076-1.772 1.076-2.94v-16.218c0-1.168-.358-2.149-1.076-2.94-.717-.79-1.607-1.185-2.668-1.185zm22.482.14c-1.149 0-2.11.39-2.885 1.165-.78.78-1.172 1.744-1.172 2.893v15.943c0 1.149.388 2.11 1.163 2.885.78.78 1.745 1.172 2.894 1.172h7.649c1.148 0 2.11-.388 2.884-1.163.78-.78 1.17-1.745 1.17-2.894v-15.943c0-1.15-.386-2.111-1.16-2.885-.78-.78-1.746-1.172-2.894-1.172zm.553 4.518h6.545v14.93H25.59z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-5\">\n      <path d=\"M29.508 97l-2.431 2.43 4.625 4.625h-1.364c-2.965 0-5.742.554-8.332 1.66-2.589 1.107-4.851 2.629-6.788 4.566-1.937 1.937-3.458 4.2-4.565 6.788-1.107 2.59-1.66 5.367-1.66 8.331h3.557c0-4.957 1.68-9.16 5.04-12.611 3.36-3.45 7.51-5.177 12.451-5.177h1.304l-4.326 4.33 2.49 2.49 8.715-8.716zm-9.783 21.61v13.89h11.382v5.018H19.725V142h12.727a2.93 2.93 0 0 0 2.15-.896 2.93 2.93 0 0 0 .896-2.15v-7.798c0-.837-.299-1.554-.896-2.152a2.93 2.93 0 0 0-2.15-.896h-8.245V123h11.29v-4.392z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-10\">\n      <path d=\"M23.119 97l-2.386 2.383 4.538 4.538h-1.339c-2.908 0-5.633.543-8.173 1.63-2.54 1.085-4.76 2.577-6.66 4.478-1.9 1.9-3.392 4.12-4.478 6.66-1.085 2.54-1.629 5.264-1.629 8.172h3.49c0-4.863 1.648-8.986 4.944-12.372 3.297-3.385 7.368-5.078 12.216-5.078h1.279l-4.245 4.247 2.443 2.442 8.55-8.55zm-9.52 21.45v4.42h4.871V142h4.513v-23.55zm18.136 0c-1.125 0-2.066.377-2.824 1.135-.764.764-1.148 1.709-1.148 2.834v15.612c0 1.124.38 2.066 1.139 2.824.764.764 1.708 1.145 2.833 1.145h7.489c1.125 0 2.066-.378 2.824-1.136.764-.764 1.145-1.709 1.145-2.833v-15.612c0-1.125-.378-2.067-1.136-2.825-.764-.764-1.708-1.145-2.833-1.145zm.54 4.42h6.408v14.617h-6.407z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-30\">\n      <path d=\"M25.549 97l-2.437 2.434 4.634 4.635H26.38c-2.97 0-5.753.555-8.347 1.664-2.594 1.109-4.861 2.633-6.802 4.574-1.94 1.94-3.465 4.207-4.574 6.802-1.109 2.594-1.664 5.377-1.664 8.347h3.565c0-4.967 1.683-9.178 5.05-12.636 3.366-3.458 7.525-5.187 12.475-5.187h1.307l-4.335 4.338 2.495 2.494 8.732-8.732zm-11.553 20.53v4.689h10.297v5.249h-6.978v4.688h6.978v5.156H13.996V142h10.808c1.06 0 1.948-.395 2.666-1.186.718-.79 1.077-1.771 1.077-2.94v-16.217c0-1.169-.36-2.15-1.077-2.94-.718-.79-1.605-1.186-2.666-1.186zm21.174.168c-1.149 0-2.11.389-2.884 1.163-.78.78-1.172 1.745-1.172 2.894v15.942c0 1.15.388 2.11 1.162 2.885.78.78 1.745 1.17 2.894 1.17h7.649c1.149 0 2.11-.386 2.885-1.16.78-.78 1.17-1.746 1.17-2.895v-15.942c0-1.15-.387-2.11-1.161-2.885-.78-.78-1.745-1.172-2.894-1.172zm.552 4.516h6.542v14.931h-6.542z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 512 512\" id=\"vjs-icon-audio-description\">\n      <g fill-rule=\"evenodd\"><path d=\"M227.29 381.351V162.993c50.38-1.017 89.108-3.028 117.631 17.126 27.374 19.342 48.734 56.965 44.89 105.325-4.067 51.155-41.335 94.139-89.776 98.475-24.085 2.155-71.972 0-71.972 0s-.84-1.352-.773-2.568m48.755-54.804c31.43 1.26 53.208-16.633 56.495-45.386 4.403-38.51-21.188-63.552-58.041-60.796v103.612c-.036 1.466.575 2.22 1.546 2.57\"></path><path d=\"M383.78 381.328c13.336 3.71 17.387-11.06 23.215-21.408 12.722-22.571 22.294-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.226 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894\"></path><path d=\"M425.154 381.328c13.336 3.71 17.384-11.061 23.215-21.408 12.721-22.571 22.291-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.511c-.586 3.874 2.226 7.315 3.866 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894\"></path><path d=\"M466.26 381.328c13.337 3.71 17.385-11.061 23.216-21.408 12.722-22.571 22.292-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.225 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894M4.477 383.005H72.58l18.573-28.484 64.169-.135s.065 19.413.065 28.62h48.756V160.307h-58.816c-5.653 9.537-140.85 222.697-140.85 222.697zm152.667-145.282v71.158l-40.453-.27 40.453-70.888z\"></path></g>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-next-item\">\n      <path d=\"M12 36l17-12-17-12v24zm20-24v24h4V12h-4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-previous-item\">\n      <path d=\"M12 12h4v24h-4zm7 12l17 12V12z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-shuffle\">\n      <path d=\"M21.17 18.34L10.83 8 8 10.83l10.34 10.34 2.83-2.83zM29 8l4.09 4.09L8 37.17 10.83 40l25.09-25.09L40 19V8H29zm.66 18.83l-2.83 2.83 6.26 6.26L29 40h11V29l-4.09 4.09-6.25-6.26z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cast\">\n      <path d=\"M42 6H6c-2.21 0-4 1.79-4 4v6h4v-6h36v28H28v4h14c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4zM2 36v6h6c0-3.31-2.69-6-6-6zm0-8v4c5.52 0 10 4.48 10 10h4c0-7.73-6.27-14-14-14zm0-8v4c9.94 0 18 8.06 18 18h4c0-12.15-9.85-22-22-22z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-picture-in-picture-enter\">\n      <path d=\"M38 22H22v11.99h16V22zm8 16V9.96C46 7.76 44.2 6 42 6H6C3.8 6 2 7.76 2 9.96V38c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4zm-4 .04H6V9.94h36v28.1z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 22 18\" id=\"vjs-icon-picture-in-picture-exit\">\n      <path d=\"M18 4H4v10h14V4zm4 12V1.98C22 .88 21.1 0 20 0H2C.9 0 0 .88 0 1.98V16c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H2V1.97h18v14.05z\"></path>\n      <path fill=\"none\" d=\"M-1-3h24v24H-1z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-facebook\">\n      <path d=\"M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759H734V905H479V609h255V391q0-186 104-288.5T1115 0q147 0 228 12z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-linkedin\">\n      <path d=\"M477 625v991H147V625h330zm21-306q1 73-50.5 122T312 490h-2q-82 0-132-49t-50-122q0-74 51.5-122.5T314 148t133 48.5T498 319zm1166 729v568h-329v-530q0-105-40.5-164.5T1168 862q-63 0-105.5 34.5T999 982q-11 30-11 81v553H659q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5T1285 602q171 0 275 113.5t104 332.5z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-twitter\">\n      <path d=\"M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5T1369.5 1125 1185 1335.5t-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5T285 1033q33 5 61 5 43 0 85-11-112-23-185.5-111.5T172 710v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5T884 653q-8-38-8-74 0-134 94.5-228.5T1199 256q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-tumblr\">\n      <path d=\"M1328 1329l80 237q-23 35-111 66t-177 32q-104 2-190.5-26T787 1564t-95-106-55.5-120-16.5-118V676H452V461q72-26 129-69.5t91-90 58-102 34-99T779 12q1-5 4.5-8.5T791 0h244v424h333v252h-334v518q0 30 6.5 56t22.5 52.5 49.5 41.5 81.5 14q78-2 134-29z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-pinterest\">\n      <path d=\"M1664 896q0 209-103 385.5T1281.5 1561 896 1664q-111 0-218-32 59-93 78-164 9-34 54-211 20 39 73 67.5t114 28.5q121 0 216-68.5t147-188.5 52-270q0-114-59.5-214T1180 449t-255-63q-105 0-196 29t-154.5 77-109 110.5-67 129.5T377 866q0 104 40 183t117 111q30 12 38-20 2-7 8-31t8-30q6-23-11-43-51-61-51-151 0-151 104.5-259.5T904 517q151 0 235.5 82t84.5 213q0 170-68.5 289T980 1220q-61 0-98-43.5T859 1072q8-35 26.5-93.5t30-103T927 800q0-50-27-83t-77-33q-62 0-105 57t-43 142q0 73 25 122l-99 418q-17 70-13 177-206-91-333-281T128 896q0-209 103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z\"></path>\n    </symbol>\n  </defs>\n</svg>";
+
+  /**
+   * @file loader.js
+   */
+
+  /**
+   * The `MediaLoader` is the `Component` that decides which playback technology to load
+   * when a player is initialized.
+   *
+   * @extends Component
+   */
+  class MediaLoader extends Component {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should attach to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function that is run when this component is ready.
+     */
+    constructor(player, options, ready) {
+      // MediaLoader has no element
+      const options_ = merge({
+        createEl: false
+      }, options);
+      super(player, options_, ready);
+
+      // If there are no sources when the player is initialized,
+      // load the first supported playback technology.
+
+      if (!options.playerOptions.sources || options.playerOptions.sources.length === 0) {
+        for (let i = 0, j = options.playerOptions.techOrder; i < j.length; i++) {
+          const techName = toTitleCase(j[i]);
+          let tech = Tech.getTech(techName);
+
+          // Support old behavior of techs being registered as components.
+          // Remove once that deprecated behavior is removed.
+          if (!techName) {
+            tech = Component.getComponent(techName);
+          }
+
+          // Check if the browser supports this technology
+          if (tech && tech.isSupported()) {
+            player.loadTech_(techName);
+            break;
+          }
+        }
+      } else {
+        // Loop through playback technologies (e.g. HTML5) and check for support.
+        // Then load the best source.
+        // A few assumptions here:
+        //   All playback technologies respect preload false.
+        player.src(options.playerOptions.sources);
+      }
+    }
+  }
+  Component.registerComponent('MediaLoader', MediaLoader);
+
+  /**
+   * @file clickable-component.js
+   */
+
+  /**
+   * Component which is clickable or keyboard actionable, but is not a
+   * native HTML button.
+   *
+   * @extends Component
+   */
+  class ClickableComponent extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  { import('./player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of component options.
+     *
+     * @param  {function} [options.clickHandler]
+     *         The function to call when the button is clicked / activated
+     *
+     * @param  {string} [options.controlText]
+     *         The text to set on the button
+     *
+     * @param  {string} [options.className]
+     *         A class or space separated list of classes to add the component
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      if (this.options_.controlText) {
+        this.controlText(this.options_.controlText);
+      }
+      this.handleMouseOver_ = e => this.handleMouseOver(e);
+      this.handleMouseOut_ = e => this.handleMouseOut(e);
+      this.handleClick_ = e => this.handleClick(e);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.emitTapEvents();
+      this.enable();
+    }
+
+    /**
+     * Create the `ClickableComponent`s DOM element.
+     *
+     * @param {string} [tag=div]
+     *        The element's node type.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element.
+     *
+     * @param {Object} [attributes={}]
+     *        An object of attributes that should be set on the element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tag = 'div', props = {}, attributes = {}) {
+      props = Object.assign({
+        className: this.buildCSSClass(),
+        tabIndex: 0
+      }, props);
+      if (tag === 'button') {
+        log.error(`Creating a ClickableComponent with an HTML element of ${tag} is not supported; use a Button instead.`);
+      }
+
+      // Add ARIA attributes for clickable element which is not a native HTML button
+      attributes = Object.assign({
+        role: 'button'
+      }, attributes);
+      this.tabIndex_ = props.tabIndex;
+      const el = createEl(tag, props, attributes);
+      if (!this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+      }
+      this.createControlTextEl(el);
+      return el;
+    }
+    dispose() {
+      // remove controlTextEl_ on dispose
+      this.controlTextEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Create a control text element on this `ClickableComponent`
+     *
+     * @param {Element} [el]
+     *        Parent element for the control text.
+     *
+     * @return {Element}
+     *         The control text element that gets created.
+     */
+    createControlTextEl(el) {
+      this.controlTextEl_ = createEl('span', {
+        className: 'vjs-control-text'
+      }, {
+        // let the screen reader user know that the text of the element may change
+        'aria-live': 'polite'
+      });
+      if (el) {
+        el.appendChild(this.controlTextEl_);
+      }
+      this.controlText(this.controlText_, el);
+      return this.controlTextEl_;
+    }
+
+    /**
+     * Get or set the localize text to use for the controls on the `ClickableComponent`.
+     *
+     * @param {string} [text]
+     *        Control text for element.
+     *
+     * @param {Element} [el=this.el()]
+     *        Element to set the title on.
+     *
+     * @return {string}
+     *         - The control text when getting
+     */
+    controlText(text, el = this.el()) {
+      if (text === undefined) {
+        return this.controlText_ || 'Need Text';
+      }
+      const localizedText = this.localize(text);
+
+      /** @protected */
+      this.controlText_ = text;
+      textContent(this.controlTextEl_, localizedText);
+      if (!this.nonIconControl && !this.player_.options_.noUITitleAttributes) {
+        // Set title attribute if only an icon is shown
+        el.setAttribute('title', localizedText);
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-control vjs-button ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Enable this `ClickableComponent`
+     */
+    enable() {
+      if (!this.enabled_) {
+        this.enabled_ = true;
+        this.removeClass('vjs-disabled');
+        this.el_.setAttribute('aria-disabled', 'false');
+        if (typeof this.tabIndex_ !== 'undefined') {
+          this.el_.setAttribute('tabIndex', this.tabIndex_);
+        }
+        this.on(['tap', 'click'], this.handleClick_);
+        this.on('keydown', this.handleKeyDown_);
+      }
+    }
+
+    /**
+     * Disable this `ClickableComponent`
+     */
+    disable() {
+      this.enabled_ = false;
+      this.addClass('vjs-disabled');
+      this.el_.setAttribute('aria-disabled', 'true');
+      if (typeof this.tabIndex_ !== 'undefined') {
+        this.el_.removeAttribute('tabIndex');
+      }
+      this.off('mouseover', this.handleMouseOver_);
+      this.off('mouseout', this.handleMouseOut_);
+      this.off(['tap', 'click'], this.handleClick_);
+      this.off('keydown', this.handleKeyDown_);
+    }
+
+    /**
+     * Handles language change in ClickableComponent for the player in components
+     *
+     *
+     */
+    handleLanguagechange() {
+      this.controlText(this.controlText_);
+    }
+
+    /**
+     * Event handler that is called when a `ClickableComponent` receives a
+     * `click` or `tap` event.
+     *
+     * @param {Event} event
+     *        The `tap` or `click` event that caused this function to be called.
+     *
+     * @listens tap
+     * @listens click
+     * @abstract
+     */
+    handleClick(event) {
+      if (this.options_.clickHandler) {
+        this.options_.clickHandler.call(this, arguments);
+      }
+    }
+
+    /**
+     * Event handler that is called when a `ClickableComponent` receives a
+     * `keydown` event.
+     *
+     * By default, if the key is Space or Enter, it will trigger a `click` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Support Space or Enter key operation to fire a click event. Also,
+      // prevent the event from propagating through the DOM and triggering
+      // Player hotkeys.
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.trigger('click');
+      } else {
+        // Pass keypress handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+  }
+  Component.registerComponent('ClickableComponent', ClickableComponent);
+
+  /**
+   * @file poster-image.js
+   */
+
+  /**
+   * A `ClickableComponent` that handles showing the poster image for the player.
+   *
+   * @extends ClickableComponent
+   */
+  class PosterImage extends ClickableComponent {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should attach to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update();
+      this.update_ = e => this.update(e);
+      player.on('posterchange', this.update_);
+    }
+
+    /**
+     * Clean up and dispose of the `PosterImage`.
+     */
+    dispose() {
+      this.player().off('posterchange', this.update_);
+      super.dispose();
+    }
+
+    /**
+     * Create the `PosterImage`s DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      // The el is an empty div to keep position in the DOM
+      // A picture and img el will be inserted when a source is set
+      return createEl('div', {
+        className: 'vjs-poster'
+      });
+    }
+
+    /**
+     * Get or set the `PosterImage`'s crossOrigin option.
+     *
+     * @param {string|null} [value]
+     *        The value to set the crossOrigin to. If an argument is
+     *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+     *
+     * @return {string|null}
+     *         - The current crossOrigin value of the `Player` when getting.
+     *         - undefined when setting
+     */
+    crossOrigin(value) {
+      // `null` can be set to unset a value
+      if (typeof value === 'undefined') {
+        if (this.$('img')) {
+          // If the poster's element exists, give its value
+          return this.$('img').crossOrigin;
+        } else if (this.player_.tech_ && this.player_.tech_.isReady_) {
+          // If not but the tech is ready, query the tech
+          return this.player_.crossOrigin();
+        }
+        // Otherwise check options as the  poster is usually set before the state of crossorigin
+        // can be retrieved by the getter
+        return this.player_.options_.crossOrigin || this.player_.options_.crossorigin || null;
+      }
+      if (value !== null && value !== 'anonymous' && value !== 'use-credentials') {
+        this.player_.log.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${value}"`);
+        return;
+      }
+      if (this.$('img')) {
+        this.$('img').crossOrigin = value;
+      }
+      return;
+    }
+
+    /**
+     * An {@link EventTarget~EventListener} for {@link Player#posterchange} events.
+     *
+     * @listens Player#posterchange
+     *
+     * @param {Event} [event]
+     *        The `Player#posterchange` event that triggered this function.
+     */
+    update(event) {
+      const url = this.player().poster();
+      this.setSrc(url);
+
+      // If there's no poster source we should display:none on this component
+      // so it's not still clickable or right-clickable
+      if (url) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+
+    /**
+     * Set the source of the `PosterImage` depending on the display method. (Re)creates
+     * the inner picture and img elementss when needed.
+     *
+     * @param {string} [url]
+     *        The URL to the source for the `PosterImage`. If not specified or falsy,
+     *        any source and ant inner picture/img are removed.
+     */
+    setSrc(url) {
+      if (!url) {
+        this.el_.textContent = '';
+        return;
+      }
+      if (!this.$('img')) {
+        this.el_.appendChild(createEl('picture', {
+          className: 'vjs-poster',
+          // Don't want poster to be tabbable.
+          tabIndex: -1
+        }, {}, createEl('img', {
+          loading: 'lazy',
+          crossOrigin: this.crossOrigin()
+        }, {
+          alt: ''
+        })));
+      }
+      this.$('img').src = url;
+    }
+
+    /**
+     * An {@link EventTarget~EventListener} for clicks on the `PosterImage`. See
+     * {@link ClickableComponent#handleClick} for instances where this will be triggered.
+     *
+     * @listens tap
+     * @listens click
+     * @listens keydown
+     *
+     * @param {Event} event
+     +        The `click`, `tap` or `keydown` event that caused this function to be called.
+     */
+    handleClick(event) {
+      // We don't want a click to trigger playback when controls are disabled
+      if (!this.player_.controls()) {
+        return;
+      }
+      if (this.player_.tech(true)) {
+        this.player_.tech(true).focus();
+      }
+      if (this.player_.paused()) {
+        silencePromise(this.player_.play());
+      } else {
+        this.player_.pause();
+      }
+    }
+  }
+
+  /**
+   * Get or set the `PosterImage`'s crossorigin option. For the HTML5 player, this
+   * sets the `crossOrigin` property on the `<img>` tag to control the CORS
+   * behavior.
+   *
+   * @param {string|null} [value]
+   *        The value to set the `PosterImages`'s crossorigin to. If an argument is
+   *        given, must be one of `anonymous` or `use-credentials`.
+   *
+   * @return {string|null|undefined}
+   *         - The current crossorigin value of the `Player` when getting.
+   *         - undefined when setting
+   */
+  PosterImage.prototype.crossorigin = PosterImage.prototype.crossOrigin;
+  Component.registerComponent('PosterImage', PosterImage);
+
+  /**
+   * @file text-track-display.js
+   */
+  const darkGray = '#222';
+  const lightGray = '#ccc';
+  const fontMap = {
+    monospace: 'monospace',
+    sansSerif: 'sans-serif',
+    serif: 'serif',
+    monospaceSansSerif: '"Andale Mono", "Lucida Console", monospace',
+    monospaceSerif: '"Courier New", monospace',
+    proportionalSansSerif: 'sans-serif',
+    proportionalSerif: 'serif',
+    casual: '"Comic Sans MS", Impact, fantasy',
+    script: '"Monotype Corsiva", cursive',
+    smallcaps: '"Andale Mono", "Lucida Console", monospace, sans-serif'
+  };
+
+  /**
+   * Construct an rgba color from a given hex color code.
+   *
+   * @param {number} color
+   *        Hex number for color, like #f0e or #f604e2.
+   *
+   * @param {number} opacity
+   *        Value for opacity, 0.0 - 1.0.
+   *
+   * @return {string}
+   *         The rgba color that was created, like 'rgba(255, 0, 0, 0.3)'.
+   */
+  function constructColor(color, opacity) {
+    let hex;
+    if (color.length === 4) {
+      // color looks like "#f0e"
+      hex = color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+    } else if (color.length === 7) {
+      // color looks like "#f604e2"
+      hex = color.slice(1);
+    } else {
+      throw new Error('Invalid color code provided, ' + color + '; must be formatted as e.g. #f0e or #f604e2.');
+    }
+    return 'rgba(' + parseInt(hex.slice(0, 2), 16) + ',' + parseInt(hex.slice(2, 4), 16) + ',' + parseInt(hex.slice(4, 6), 16) + ',' + opacity + ')';
+  }
+
+  /**
+   * Try to update the style of a DOM element. Some style changes will throw an error,
+   * particularly in IE8. Those should be noops.
+   *
+   * @param {Element} el
+   *        The DOM element to be styled.
+   *
+   * @param {string} style
+   *        The CSS property on the element that should be styled.
+   *
+   * @param {string} rule
+   *        The style rule that should be applied to the property.
+   *
+   * @private
+   */
+  function tryUpdateStyle(el, style, rule) {
+    try {
+      el.style[style] = rule;
+    } catch (e) {
+      // Satisfies linter.
+      return;
+    }
+  }
+
+  /**
+   * Converts the CSS top/right/bottom/left property numeric value to string in pixels.
+   *
+   * @param {number} position
+   *        The CSS top/right/bottom/left property value.
+   *
+   * @return {string}
+   *          The CSS property value that was created, like '10px'.
+   *
+   * @private
+   */
+  function getCSSPositionValue(position) {
+    return position ? `${position}px` : '';
+  }
+
+  /**
+   * The component for displaying text track cues.
+   *
+   * @extends Component
+   */
+  class TextTrackDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when `TextTrackDisplay` is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      const updateDisplayTextHandler = e => this.updateDisplay(e);
+      const updateDisplayHandler = e => {
+        this.updateDisplayOverlay();
+        this.updateDisplay(e);
+      };
+      player.on('loadstart', e => this.toggleDisplay(e));
+      player.on('texttrackchange', updateDisplayTextHandler);
+      player.on('loadedmetadata', e => {
+        this.updateDisplayOverlay();
+        this.preselectTrack(e);
+      });
+
+      // This used to be called during player init, but was causing an error
+      // if a track should show by default and the display hadn't loaded yet.
+      // Should probably be moved to an external track loader when we support
+      // tracks that don't need a display.
+      player.ready(bind_(this, function () {
+        if (player.tech_ && player.tech_.featuresNativeTextTracks) {
+          this.hide();
+          return;
+        }
+        player.on('fullscreenchange', updateDisplayHandler);
+        player.on('playerresize', updateDisplayHandler);
+        const screenOrientation = window.screen.orientation || window;
+        const changeOrientationEvent = window.screen.orientation ? 'change' : 'orientationchange';
+        screenOrientation.addEventListener(changeOrientationEvent, updateDisplayHandler);
+        player.on('dispose', () => screenOrientation.removeEventListener(changeOrientationEvent, updateDisplayHandler));
+        const tracks = this.options_.playerOptions.tracks || [];
+        for (let i = 0; i < tracks.length; i++) {
+          this.player_.addRemoteTextTrack(tracks[i], true);
+        }
+        this.preselectTrack();
+      }));
+    }
+
+    /**
+    * Preselect a track following this precedence:
+    * - matches the previously selected {@link TextTrack}'s language and kind
+    * - matches the previously selected {@link TextTrack}'s language only
+    * - is the first default captions track
+    * - is the first default descriptions track
+    *
+    * @listens Player#loadstart
+    */
+    preselectTrack() {
+      const modes = {
+        captions: 1,
+        subtitles: 1
+      };
+      const trackList = this.player_.textTracks();
+      const userPref = this.player_.cache_.selectedLanguage;
+      let firstDesc;
+      let firstCaptions;
+      let preferredTrack;
+      for (let i = 0; i < trackList.length; i++) {
+        const track = trackList[i];
+        if (userPref && userPref.enabled && userPref.language && userPref.language === track.language && track.kind in modes) {
+          // Always choose the track that matches both language and kind
+          if (track.kind === userPref.kind) {
+            preferredTrack = track;
+            // or choose the first track that matches language
+          } else if (!preferredTrack) {
+            preferredTrack = track;
+          }
+
+          // clear everything if offTextTrackMenuItem was clicked
+        } else if (userPref && !userPref.enabled) {
+          preferredTrack = null;
+          firstDesc = null;
+          firstCaptions = null;
+        } else if (track.default) {
+          if (track.kind === 'descriptions' && !firstDesc) {
+            firstDesc = track;
+          } else if (track.kind in modes && !firstCaptions) {
+            firstCaptions = track;
+          }
+        }
+      }
+
+      // The preferredTrack matches the user preference and takes
+      // precedence over all the other tracks.
+      // So, display the preferredTrack before the first default track
+      // and the subtitles/captions track before the descriptions track
+      if (preferredTrack) {
+        preferredTrack.mode = 'showing';
+      } else if (firstCaptions) {
+        firstCaptions.mode = 'showing';
+      } else if (firstDesc) {
+        firstDesc.mode = 'showing';
+      }
+    }
+
+    /**
+     * Turn display of {@link TextTrack}'s from the current state into the other state.
+     * There are only two states:
+     * - 'shown'
+     * - 'hidden'
+     *
+     * @listens Player#loadstart
+     */
+    toggleDisplay() {
+      if (this.player_.tech_ && this.player_.tech_.featuresNativeTextTracks) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+
+    /**
+     * Create the {@link Component}'s DOM element.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-text-track-display'
+      }, {
+        'translate': 'yes',
+        'aria-live': 'off',
+        'aria-atomic': 'true'
+      });
+    }
+
+    /**
+     * Clear all displayed {@link TextTrack}s.
+     */
+    clearDisplay() {
+      if (typeof window.WebVTT === 'function') {
+        window.WebVTT.processCues(window, [], this.el_);
+      }
+    }
+
+    /**
+     * Update the displayed TextTrack when a either a {@link Player#texttrackchange} or
+     * a {@link Player#fullscreenchange} is fired.
+     *
+     * @listens Player#texttrackchange
+     * @listens Player#fullscreenchange
+     */
+    updateDisplay() {
+      const tracks = this.player_.textTracks();
+      const allowMultipleShowingTracks = this.options_.allowMultipleShowingTracks;
+      this.clearDisplay();
+      if (allowMultipleShowingTracks) {
+        const showingTracks = [];
+        for (let i = 0; i < tracks.length; ++i) {
+          const track = tracks[i];
+          if (track.mode !== 'showing') {
+            continue;
+          }
+          showingTracks.push(track);
+        }
+        this.updateForTrack(showingTracks);
+        return;
+      }
+
+      //  Track display prioritization model: if multiple tracks are 'showing',
+      //  display the first 'subtitles' or 'captions' track which is 'showing',
+      //  otherwise display the first 'descriptions' track which is 'showing'
+
+      let descriptionsTrack = null;
+      let captionsSubtitlesTrack = null;
+      let i = tracks.length;
+      while (i--) {
+        const track = tracks[i];
+        if (track.mode === 'showing') {
+          if (track.kind === 'descriptions') {
+            descriptionsTrack = track;
+          } else {
+            captionsSubtitlesTrack = track;
+          }
+        }
+      }
+      if (captionsSubtitlesTrack) {
+        if (this.getAttribute('aria-live') !== 'off') {
+          this.setAttribute('aria-live', 'off');
+        }
+        this.updateForTrack(captionsSubtitlesTrack);
+      } else if (descriptionsTrack) {
+        if (this.getAttribute('aria-live') !== 'assertive') {
+          this.setAttribute('aria-live', 'assertive');
+        }
+        this.updateForTrack(descriptionsTrack);
+      }
+    }
+
+    /**
+     * Updates the displayed TextTrack to be sure it overlays the video when a either
+     * a {@link Player#texttrackchange} or a {@link Player#fullscreenchange} is fired.
+     */
+    updateDisplayOverlay() {
+      // inset-inline and inset-block are not supprted on old chrome, but these are
+      // only likely to be used on TV devices
+      if (!this.player_.videoHeight() || !window.CSS.supports('inset-inline: 10px')) {
+        return;
+      }
+      const playerWidth = this.player_.currentWidth();
+      const playerHeight = this.player_.currentHeight();
+      const playerAspectRatio = playerWidth / playerHeight;
+      const videoAspectRatio = this.player_.videoWidth() / this.player_.videoHeight();
+      let insetInlineMatch = 0;
+      let insetBlockMatch = 0;
+      if (Math.abs(playerAspectRatio - videoAspectRatio) > 0.1) {
+        if (playerAspectRatio > videoAspectRatio) {
+          insetInlineMatch = Math.round((playerWidth - playerHeight * videoAspectRatio) / 2);
+        } else {
+          insetBlockMatch = Math.round((playerHeight - playerWidth / videoAspectRatio) / 2);
+        }
+      }
+      tryUpdateStyle(this.el_, 'insetInline', getCSSPositionValue(insetInlineMatch));
+      tryUpdateStyle(this.el_, 'insetBlock', getCSSPositionValue(insetBlockMatch));
+    }
+
+    /**
+     * Style {@Link TextTrack} activeCues according to {@Link TextTrackSettings}.
+     *
+     * @param {TextTrack} track
+     *        Text track object containing active cues to style.
+     */
+    updateDisplayState(track) {
+      const overrides = this.player_.textTrackSettings.getValues();
+      const cues = track.activeCues;
+      let i = cues.length;
+      while (i--) {
+        const cue = cues[i];
+        if (!cue) {
+          continue;
+        }
+        const cueDiv = cue.displayState;
+        if (overrides.color) {
+          cueDiv.firstChild.style.color = overrides.color;
+        }
+        if (overrides.textOpacity) {
+          tryUpdateStyle(cueDiv.firstChild, 'color', constructColor(overrides.color || '#fff', overrides.textOpacity));
+        }
+        if (overrides.backgroundColor) {
+          cueDiv.firstChild.style.backgroundColor = overrides.backgroundColor;
+        }
+        if (overrides.backgroundOpacity) {
+          tryUpdateStyle(cueDiv.firstChild, 'backgroundColor', constructColor(overrides.backgroundColor || '#000', overrides.backgroundOpacity));
+        }
+        if (overrides.windowColor) {
+          if (overrides.windowOpacity) {
+            tryUpdateStyle(cueDiv, 'backgroundColor', constructColor(overrides.windowColor, overrides.windowOpacity));
+          } else {
+            cueDiv.style.backgroundColor = overrides.windowColor;
+          }
+        }
+        if (overrides.edgeStyle) {
+          if (overrides.edgeStyle === 'dropshadow') {
+            cueDiv.firstChild.style.textShadow = `2px 2px 3px ${darkGray}, 2px 2px 4px ${darkGray}, 2px 2px 5px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'raised') {
+            cueDiv.firstChild.style.textShadow = `1px 1px ${darkGray}, 2px 2px ${darkGray}, 3px 3px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'depressed') {
+            cueDiv.firstChild.style.textShadow = `1px 1px ${lightGray}, 0 1px ${lightGray}, -1px -1px ${darkGray}, 0 -1px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'uniform') {
+            cueDiv.firstChild.style.textShadow = `0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}`;
+          }
+        }
+        if (overrides.fontPercent && overrides.fontPercent !== 1) {
+          const fontSize = window.parseFloat(cueDiv.style.fontSize);
+          cueDiv.style.fontSize = fontSize * overrides.fontPercent + 'px';
+          cueDiv.style.height = 'auto';
+          cueDiv.style.top = 'auto';
+        }
+        if (overrides.fontFamily && overrides.fontFamily !== 'default') {
+          if (overrides.fontFamily === 'small-caps') {
+            cueDiv.firstChild.style.fontVariant = 'small-caps';
+          } else {
+            cueDiv.firstChild.style.fontFamily = fontMap[overrides.fontFamily];
+          }
+        }
+      }
+    }
+
+    /**
+     * Add an {@link TextTrack} to to the {@link Tech}s {@link TextTrackList}.
+     *
+     * @param {TextTrack|TextTrack[]} tracks
+     *        Text track object or text track array to be added to the list.
+     */
+    updateForTrack(tracks) {
+      if (!Array.isArray(tracks)) {
+        tracks = [tracks];
+      }
+      if (typeof window.WebVTT !== 'function' || tracks.every(track => {
+        return !track.activeCues;
+      })) {
+        return;
+      }
+      const cues = [];
+
+      // push all active track cues
+      for (let i = 0; i < tracks.length; ++i) {
+        const track = tracks[i];
+        for (let j = 0; j < track.activeCues.length; ++j) {
+          cues.push(track.activeCues[j]);
+        }
+      }
+
+      // removes all cues before it processes new ones
+      window.WebVTT.processCues(window, cues, this.el_);
+
+      // add unique class to each language text track & add settings styling if necessary
+      for (let i = 0; i < tracks.length; ++i) {
+        const track = tracks[i];
+        for (let j = 0; j < track.activeCues.length; ++j) {
+          const cueEl = track.activeCues[j].displayState;
+          addClass(cueEl, 'vjs-text-track-cue', 'vjs-text-track-cue-' + (track.language ? track.language : i));
+          if (track.language) {
+            setAttribute(cueEl, 'lang', track.language);
+          }
+        }
+        if (this.player_.textTrackSettings) {
+          this.updateDisplayState(track);
+        }
+      }
+    }
+  }
+  Component.registerComponent('TextTrackDisplay', TextTrackDisplay);
+
+  /**
+   * @file loading-spinner.js
+   */
+
+  /**
+   * A loading spinner for use during waiting/loading events.
+   *
+   * @extends Component
+   */
+  class LoadingSpinner extends Component {
+    /**
+     * Create the `LoadingSpinner`s DOM element.
+     *
+     * @return {Element}
+     *         The dom element that gets created.
+     */
+    createEl() {
+      const isAudio = this.player_.isAudio();
+      const playerType = this.localize(isAudio ? 'Audio Player' : 'Video Player');
+      const controlText = createEl('span', {
+        className: 'vjs-control-text',
+        textContent: this.localize('{1} is loading.', [playerType])
+      });
+      const el = super.createEl('div', {
+        className: 'vjs-loading-spinner',
+        dir: 'ltr'
+      });
+      el.appendChild(controlText);
+      return el;
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-control-text').textContent = this.localize('{1} is loading.', [this.player_.isAudio() ? 'Audio Player' : 'Video Player']);
+    }
+  }
+  Component.registerComponent('LoadingSpinner', LoadingSpinner);
+
+  /**
+   * @file button.js
+   */
+
+  /**
+   * Base class for all buttons.
+   *
+   * @extends ClickableComponent
+   */
+  class Button extends ClickableComponent {
+    /**
+     * Create the `Button`s DOM element.
+     *
+     * @param {string} [tag="button"]
+     *        The element's node type. This argument is IGNORED: no matter what
+     *        is passed, it will always create a `button` element.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element.
+     *
+     * @param {Object} [attributes={}]
+     *        An object of attributes that should be set on the element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tag, props = {}, attributes = {}) {
+      tag = 'button';
+      props = Object.assign({
+        className: this.buildCSSClass()
+      }, props);
+
+      // Add attributes for button element
+      attributes = Object.assign({
+        // Necessary since the default button type is "submit"
+        type: 'button'
+      }, attributes);
+      const el = createEl(tag, props, attributes);
+      if (!this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+      }
+      this.createControlTextEl(el);
+      return el;
+    }
+
+    /**
+     * Add a child `Component` inside of this `Button`.
+     *
+     * @param {string|Component} child
+     *        The name or instance of a child to add.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of options that will get passed to children of
+     *        the child.
+     *
+     * @return {Component}
+     *         The `Component` that gets added as a child. When using a string the
+     *         `Component` will get created by this process.
+     *
+     * @deprecated since version 5
+     */
+    addChild(child, options = {}) {
+      const className = this.constructor.name;
+      log.warn(`Adding an actionable (user controllable) child to a Button (${className}) is not supported; use a ClickableComponent instead.`);
+
+      // Avoid the error message generated by ClickableComponent's addChild method
+      return Component.prototype.addChild.call(this, child, options);
+    }
+
+    /**
+     * Enable the `Button` element so that it can be activated or clicked. Use this with
+     * {@link Button#disable}.
+     */
+    enable() {
+      super.enable();
+      this.el_.removeAttribute('disabled');
+    }
+
+    /**
+     * Disable the `Button` element so that it cannot be activated or clicked. Use this with
+     * {@link Button#enable}.
+     */
+    disable() {
+      super.disable();
+      this.el_.setAttribute('disabled', 'disabled');
+    }
+
+    /**
+     * This gets called when a `Button` has focus and `keydown` is triggered via a key
+     * press.
+     *
+     * @param {KeyboardEvent} event
+     *        The event that caused this function to get called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Ignore Space or Enter key operation, which is handled by the browser for
+      // a button - though not for its super class, ClickableComponent. Also,
+      // prevent the event from propagating through the DOM and triggering Player
+      // hotkeys. We do not preventDefault here because we _want_ the browser to
+      // handle it.
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.stopPropagation();
+        return;
+      }
+
+      // Pass keypress handling up for unsupported keys
+      super.handleKeyDown(event);
+    }
+  }
+  Component.registerComponent('Button', Button);
+
+  /**
+   * @file big-play-button.js
+   */
+
+  /**
+   * The initial play button that shows before the video has played. The hiding of the
+   * `BigPlayButton` get done via CSS and `Player` states.
+   *
+   * @extends Button
+   */
+  class BigPlayButton extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.mouseused_ = false;
+      this.setIcon('play');
+      this.on('mousedown', e => this.handleMouseDown(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object. Always returns 'vjs-big-play-button'.
+     */
+    buildCSSClass() {
+      return 'vjs-big-play-button';
+    }
+
+    /**
+     * This gets called when a `BigPlayButton` "clicked". See {@link ClickableComponent}
+     * for more detailed information on what a click can be.
+     *
+     * @param {KeyboardEvent|MouseEvent|TouchEvent} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const playPromise = this.player_.play();
+
+      // exit early if clicked via the mouse
+      if (this.mouseused_ && 'clientX' in event && 'clientY' in event) {
+        silencePromise(playPromise);
+        if (this.player_.tech(true)) {
+          this.player_.tech(true).focus();
+        }
+        return;
+      }
+      const cb = this.player_.getChild('controlBar');
+      const playToggle = cb && cb.getChild('playToggle');
+      if (!playToggle) {
+        this.player_.tech(true).focus();
+        return;
+      }
+      const playFocus = () => playToggle.focus();
+      if (isPromise(playPromise)) {
+        playPromise.then(playFocus, () => {});
+      } else {
+        this.setTimeout(playFocus, 1);
+      }
+    }
+
+    /**
+     * Event handler that is called when a `BigPlayButton` receives a
+     * `keydown` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      this.mouseused_ = false;
+      super.handleKeyDown(event);
+    }
+
+    /**
+     * Handle `mousedown` events on the `BigPlayButton`.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      this.mouseused_ = true;
+    }
+  }
+
+  /**
+   * The text that should display over the `BigPlayButton`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  BigPlayButton.prototype.controlText_ = 'Play Video';
+  Component.registerComponent('BigPlayButton', BigPlayButton);
+
+  /**
+   * @file close-button.js
+   */
+
+  /**
+   * The `CloseButton` is a `{@link Button}` that fires a `close` event when
+   * it gets clicked.
+   *
+   * @extends Button
+   */
+  class CloseButton extends Button {
+    /**
+    * Creates an instance of the this class.
+    *
+    * @param  { import('./player').default } player
+    *         The `Player` that this class should be attached to.
+    *
+    * @param  {Object} [options]
+    *         The key/value store of player options.
+    */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('cancel');
+      this.controlText(options && options.controlText || this.localize('Close'));
+    }
+
+    /**
+    * Builds the default DOM `className`.
+    *
+    * @return {string}
+    *         The DOM `className` for this object.
+    */
+    buildCSSClass() {
+      return `vjs-close-button ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when a `CloseButton` gets clicked. See
+     * {@link ClickableComponent#handleClick} for more information on when
+     * this will be triggered
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     * @fires CloseButton#close
+     */
+    handleClick(event) {
+      /**
+       * Triggered when the a `CloseButton` is clicked.
+       *
+       * @event CloseButton#close
+       * @type {Event}
+       *
+       * @property {boolean} [bubbles=false]
+       *           set to false so that the close event does not
+       *           bubble up to parents if there is no listener
+       */
+      this.trigger({
+        type: 'close',
+        bubbles: false
+      });
+    }
+    /**
+     * Event handler that is called when a `CloseButton` receives a
+     * `keydown` event.
+     *
+     * By default, if the key is Esc, it will trigger a `click` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Esc button will trigger `click` event
+      if (keycode.isEventKey(event, 'Esc')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.trigger('click');
+      } else {
+        // Pass keypress handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+  }
+  Component.registerComponent('CloseButton', CloseButton);
+
+  /**
+   * @file play-toggle.js
+   */
+
+  /**
+   * Button to toggle between play and pause.
+   *
+   * @extends Button
+   */
+  class PlayToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+
+      // show or hide replay icon
+      options.replay = options.replay === undefined || options.replay;
+      this.setIcon('play');
+      this.on(player, 'play', e => this.handlePlay(e));
+      this.on(player, 'pause', e => this.handlePause(e));
+      if (options.replay) {
+        this.on(player, 'ended', e => this.handleEnded(e));
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-play-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when an `PlayToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (this.player_.paused()) {
+        silencePromise(this.player_.play());
+      } else {
+        this.player_.pause();
+      }
+    }
+
+    /**
+     * This gets called once after the video has ended and the user seeks so that
+     * we can change the replay button back to a play button.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#seeked
+     */
+    handleSeeked(event) {
+      this.removeClass('vjs-ended');
+      if (this.player_.paused()) {
+        this.handlePause(event);
+      } else {
+        this.handlePlay(event);
+      }
+    }
+
+    /**
+     * Add the vjs-playing class to the element so it can change appearance.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#play
+     */
+    handlePlay(event) {
+      this.removeClass('vjs-ended', 'vjs-paused');
+      this.addClass('vjs-playing');
+      // change the button text to "Pause"
+      this.setIcon('pause');
+      this.controlText('Pause');
+    }
+
+    /**
+     * Add the vjs-paused class to the element so it can change appearance.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#pause
+     */
+    handlePause(event) {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      // change the button text to "Play"
+      this.setIcon('play');
+      this.controlText('Play');
+    }
+
+    /**
+     * Add the vjs-ended class to the element so it can change appearance
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#ended
+     */
+    handleEnded(event) {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-ended');
+      // change the button text to "Replay"
+      this.setIcon('replay');
+      this.controlText('Replay');
+
+      // on the next seek remove the replay button
+      this.one(this.player_, 'seeked', e => this.handleSeeked(e));
+    }
+  }
+
+  /**
+   * The text that should display over the `PlayToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PlayToggle.prototype.controlText_ = 'Play';
+  Component.registerComponent('PlayToggle', PlayToggle);
+
+  /**
+   * @file time-display.js
+   */
+
+  /**
+   * Displays time information about the video
+   *
+   * @extends Component
+   */
+  class TimeDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, ['timeupdate', 'ended', 'seeking'], e => this.update(e));
+      this.updateTextNode_();
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const className = this.buildCSSClass();
+      const el = super.createEl('div', {
+        className: `${className} vjs-time-control vjs-control`
+      });
+      const span = createEl('span', {
+        className: 'vjs-control-text',
+        textContent: `${this.localize(this.labelText_)}\u00a0`
+      }, {
+        role: 'presentation'
+      });
+      el.appendChild(span);
+      this.contentEl_ = createEl('span', {
+        className: `${className}-display`
+      }, {
+        // span elements have no implicit role, but some screen readers (notably VoiceOver)
+        // treat them as a break between items in the DOM when using arrow keys
+        // (or left-to-right swipes on iOS) to read contents of a page. Using
+        // role='presentation' causes VoiceOver to NOT treat this span as a break.
+        role: 'presentation'
+      });
+      el.appendChild(this.contentEl_);
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.textNode_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Updates the displayed time according to the `updateContent` function which is defined in the child class.
+     *
+     * @param {Event} [event]
+     *          The `timeupdate`, `ended` or `seeking` (if enableSmoothSeeking is true) event that caused this function to be called.
+     */
+    update(event) {
+      if (!this.player_.options_.enableSmoothSeeking && event.type === 'seeking') {
+        return;
+      }
+      this.updateContent(event);
+    }
+
+    /**
+     * Updates the time display text node with a new time
+     *
+     * @param {number} [time=0] the time to update to
+     *
+     * @private
+     */
+    updateTextNode_(time = 0) {
+      time = formatTime(time);
+      if (this.formattedTime_ === time) {
+        return;
+      }
+      this.formattedTime_ = time;
+      this.requestNamedAnimationFrame('TimeDisplay#updateTextNode_', () => {
+        if (!this.contentEl_) {
+          return;
+        }
+        let oldNode = this.textNode_;
+        if (oldNode && this.contentEl_.firstChild !== oldNode) {
+          oldNode = null;
+          log.warn('TimeDisplay#updateTextnode_: Prevented replacement of text node element since it was no longer a child of this node. Appending a new node instead.');
+        }
+        this.textNode_ = document.createTextNode(this.formattedTime_);
+        if (!this.textNode_) {
+          return;
+        }
+        if (oldNode) {
+          this.contentEl_.replaceChild(this.textNode_, oldNode);
+        } else {
+          this.contentEl_.appendChild(this.textNode_);
+        }
+      });
+    }
+
+    /**
+     * To be filled out in the child class, should update the displayed time
+     * in accordance with the fact that the current time has changed.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate`  event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     */
+    updateContent(event) {}
+  }
+
+  /**
+   * The text that is added to the `TimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  TimeDisplay.prototype.labelText_ = 'Time';
+
+  /**
+   * The text that should display over the `TimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  TimeDisplay.prototype.controlText_ = 'Time';
+  Component.registerComponent('TimeDisplay', TimeDisplay);
+
+  /**
+   * @file current-time-display.js
+   */
+
+  /**
+   * Displays the current time
+   *
+   * @extends Component
+   */
+  class CurrentTimeDisplay extends TimeDisplay {
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-current-time';
+    }
+
+    /**
+     * Update current time display
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` event that caused this function to run.
+     *
+     * @listens Player#timeupdate
+     */
+    updateContent(event) {
+      // Allows for smooth scrubbing, when player can't keep up.
+      let time;
+      if (this.player_.ended()) {
+        time = this.player_.duration();
+      } else {
+        time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+      }
+      this.updateTextNode_(time);
+    }
+  }
+
+  /**
+   * The text that is added to the `CurrentTimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  CurrentTimeDisplay.prototype.labelText_ = 'Current Time';
+
+  /**
+   * The text that should display over the `CurrentTimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  CurrentTimeDisplay.prototype.controlText_ = 'Current Time';
+  Component.registerComponent('CurrentTimeDisplay', CurrentTimeDisplay);
+
+  /**
+   * @file duration-display.js
+   */
+
+  /**
+   * Displays the duration
+   *
+   * @extends Component
+   */
+  class DurationDisplay extends TimeDisplay {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      const updateContent = e => this.updateContent(e);
+
+      // we do not want to/need to throttle duration changes,
+      // as they should always display the changed duration as
+      // it has changed
+      this.on(player, 'durationchange', updateContent);
+
+      // Listen to loadstart because the player duration is reset when a new media element is loaded,
+      // but the durationchange on the user agent will not fire.
+      // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
+      this.on(player, 'loadstart', updateContent);
+
+      // Also listen for timeupdate (in the parent) and loadedmetadata because removing those
+      // listeners could have broken dependent applications/libraries. These
+      // can likely be removed for 7.0.
+      this.on(player, 'loadedmetadata', updateContent);
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-duration';
+    }
+
+    /**
+     * Update duration time display.
+     *
+     * @param {Event} [event]
+     *        The `durationchange`, `timeupdate`, or `loadedmetadata` event that caused
+     *        this function to be called.
+     *
+     * @listens Player#durationchange
+     * @listens Player#timeupdate
+     * @listens Player#loadedmetadata
+     */
+    updateContent(event) {
+      const duration = this.player_.duration();
+      this.updateTextNode_(duration);
+    }
+  }
+
+  /**
+   * The text that is added to the `DurationDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  DurationDisplay.prototype.labelText_ = 'Duration';
+
+  /**
+   * The text that should display over the `DurationDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  DurationDisplay.prototype.controlText_ = 'Duration';
+  Component.registerComponent('DurationDisplay', DurationDisplay);
+
+  /**
+   * @file time-divider.js
+   */
+
+  /**
+   * The separator between the current time and duration.
+   * Can be hidden if it's not needed in the design.
+   *
+   * @extends Component
+   */
+  class TimeDivider extends Component {
+    /**
+     * Create the component's DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-time-control vjs-time-divider'
+      }, {
+        // this element and its contents can be hidden from assistive techs since
+        // it is made extraneous by the announcement of the control text
+        // for the current time and duration displays
+        'aria-hidden': true
+      });
+      const div = super.createEl('div');
+      const span = super.createEl('span', {
+        textContent: '/'
+      });
+      div.appendChild(span);
+      el.appendChild(div);
+      return el;
+    }
+  }
+  Component.registerComponent('TimeDivider', TimeDivider);
+
+  /**
+   * @file remaining-time-display.js
+   */
+
+  /**
+   * Displays the time left in the video
+   *
+   * @extends Component
+   */
+  class RemainingTimeDisplay extends TimeDisplay {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, 'durationchange', e => this.updateContent(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-remaining-time';
+    }
+
+    /**
+     * Create the `Component`'s DOM element with the "minus" character prepend to the time
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl();
+      if (this.options_.displayNegative !== false) {
+        el.insertBefore(createEl('span', {}, {
+          'aria-hidden': true
+        }, '-'), this.contentEl_);
+      }
+      return el;
+    }
+
+    /**
+     * Update remaining time display.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` or `durationchange` event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     * @listens Player#durationchange
+     */
+    updateContent(event) {
+      if (typeof this.player_.duration() !== 'number') {
+        return;
+      }
+      let time;
+
+      // @deprecated We should only use remainingTimeDisplay
+      // as of video.js 7
+      if (this.player_.ended()) {
+        time = 0;
+      } else if (this.player_.remainingTimeDisplay) {
+        time = this.player_.remainingTimeDisplay();
+      } else {
+        time = this.player_.remainingTime();
+      }
+      this.updateTextNode_(time);
+    }
+  }
+
+  /**
+   * The text that is added to the `RemainingTimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  RemainingTimeDisplay.prototype.labelText_ = 'Remaining Time';
+
+  /**
+   * The text that should display over the `RemainingTimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  RemainingTimeDisplay.prototype.controlText_ = 'Remaining Time';
+  Component.registerComponent('RemainingTimeDisplay', RemainingTimeDisplay);
+
+  /**
+   * @file live-display.js
+   */
+
+  // TODO - Future make it click to snap to live
+
+  /**
+   * Displays the live indicator when duration is Infinity.
+   *
+   * @extends Component
+   */
+  class LiveDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.updateShowing();
+      this.on(this.player(), 'durationchange', e => this.updateShowing(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-live-control vjs-control'
+      });
+      this.contentEl_ = createEl('div', {
+        className: 'vjs-live-display'
+      }, {
+        'aria-live': 'off'
+      });
+      this.contentEl_.appendChild(createEl('span', {
+        className: 'vjs-control-text',
+        textContent: `${this.localize('Stream Type')}\u00a0`
+      }));
+      this.contentEl_.appendChild(document.createTextNode(this.localize('LIVE')));
+      el.appendChild(this.contentEl_);
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Check the duration to see if the LiveDisplay should be showing or not. Then show/hide
+     * it accordingly
+     *
+     * @param {Event} [event]
+     *        The {@link Player#durationchange} event that caused this function to run.
+     *
+     * @listens Player#durationchange
+     */
+    updateShowing(event) {
+      if (this.player().duration() === Infinity) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }
+  Component.registerComponent('LiveDisplay', LiveDisplay);
+
+  /**
+   * @file seek-to-live.js
+   */
+
+  /**
+   * Displays the live indicator when duration is Infinity.
+   *
+   * @extends Component
+   */
+  class SeekToLive extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.updateLiveEdgeStatus();
+      if (this.player_.liveTracker) {
+        this.updateLiveEdgeStatusHandler_ = e => this.updateLiveEdgeStatus(e);
+        this.on(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
+      }
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('button', {
+        className: 'vjs-seek-to-live-control vjs-control'
+      });
+      this.setIcon('circle', el);
+      this.textEl_ = createEl('span', {
+        className: 'vjs-seek-to-live-text',
+        textContent: this.localize('LIVE')
+      }, {
+        'aria-hidden': 'true'
+      });
+      el.appendChild(this.textEl_);
+      return el;
+    }
+
+    /**
+     * Update the state of this button if we are at the live edge
+     * or not
+     */
+    updateLiveEdgeStatus() {
+      // default to live edge
+      if (!this.player_.liveTracker || this.player_.liveTracker.atLiveEdge()) {
+        this.setAttribute('aria-disabled', true);
+        this.addClass('vjs-at-live-edge');
+        this.controlText('Seek to live, currently playing live');
+      } else {
+        this.setAttribute('aria-disabled', false);
+        this.removeClass('vjs-at-live-edge');
+        this.controlText('Seek to live, currently behind live');
+      }
+    }
+
+    /**
+     * On click bring us as near to the live point as possible.
+     * This requires that we wait for the next `live-seekable-change`
+     * event which will happen every segment length seconds.
+     */
+    handleClick() {
+      this.player_.liveTracker.seekToLiveEdge();
+    }
+
+    /**
+     * Dispose of the element and stop tracking
+     */
+    dispose() {
+      if (this.player_.liveTracker) {
+        this.off(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
+      }
+      this.textEl_ = null;
+      super.dispose();
+    }
+  }
+  /**
+   * The text that should display over the `SeekToLive`s control. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  SeekToLive.prototype.controlText_ = 'Seek to live, currently playing live';
+  Component.registerComponent('SeekToLive', SeekToLive);
+
+  /**
+   * @file num.js
+   * @module num
+   */
+
+  /**
+   * Keep a number between a min and a max value
+   *
+   * @param {number} number
+   *        The number to clamp
+   *
+   * @param {number} min
+   *        The minimum value
+   * @param {number} max
+   *        The maximum value
+   *
+   * @return {number}
+   *         the clamped number
+   */
+  function clamp(number, min, max) {
+    number = Number(number);
+    return Math.min(max, Math.max(min, isNaN(number) ? min : number));
+  }
+
+  var Num = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    clamp: clamp
+  });
+
+  /**
+   * @file slider.js
+   */
+
+  /**
+   * The base functionality for a slider. Can be vertical or horizontal.
+   * For instance the volume bar or the seek bar on a video is a slider.
+   *
+   * @extends Component
+   */
+  class Slider extends Component {
+    /**
+    * Create an instance of this class
+    *
+    * @param { import('../player').default } player
+    *        The `Player` that this class should be attached to.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    */
+    constructor(player, options) {
+      super(player, options);
+      this.handleMouseDown_ = e => this.handleMouseDown(e);
+      this.handleMouseUp_ = e => this.handleMouseUp(e);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.handleClick_ = e => this.handleClick(e);
+      this.handleMouseMove_ = e => this.handleMouseMove(e);
+      this.update_ = e => this.update(e);
+
+      // Set property names to bar to match with the child Slider class is looking for
+      this.bar = this.getChild(this.options_.barName);
+
+      // Set a horizontal or vertical class on the slider depending on the slider type
+      this.vertical(!!this.options_.vertical);
+      this.enable();
+    }
+
+    /**
+     * Are controls are currently enabled for this slider or not.
+     *
+     * @return {boolean}
+     *         true if controls are enabled, false otherwise
+     */
+    enabled() {
+      return this.enabled_;
+    }
+
+    /**
+     * Enable controls for this slider if they are disabled
+     */
+    enable() {
+      if (this.enabled()) {
+        return;
+      }
+      this.on('mousedown', this.handleMouseDown_);
+      this.on('touchstart', this.handleMouseDown_);
+      this.on('keydown', this.handleKeyDown_);
+      this.on('click', this.handleClick_);
+
+      // TODO: deprecated, controlsvisible does not seem to be fired
+      this.on(this.player_, 'controlsvisible', this.update);
+      if (this.playerEvent) {
+        this.on(this.player_, this.playerEvent, this.update);
+      }
+      this.removeClass('disabled');
+      this.setAttribute('tabindex', 0);
+      this.enabled_ = true;
+    }
+
+    /**
+     * Disable controls for this slider if they are enabled
+     */
+    disable() {
+      if (!this.enabled()) {
+        return;
+      }
+      const doc = this.bar.el_.ownerDocument;
+      this.off('mousedown', this.handleMouseDown_);
+      this.off('touchstart', this.handleMouseDown_);
+      this.off('keydown', this.handleKeyDown_);
+      this.off('click', this.handleClick_);
+      this.off(this.player_, 'controlsvisible', this.update_);
+      this.off(doc, 'mousemove', this.handleMouseMove_);
+      this.off(doc, 'mouseup', this.handleMouseUp_);
+      this.off(doc, 'touchmove', this.handleMouseMove_);
+      this.off(doc, 'touchend', this.handleMouseUp_);
+      this.removeAttribute('tabindex');
+      this.addClass('disabled');
+      if (this.playerEvent) {
+        this.off(this.player_, this.playerEvent, this.update);
+      }
+      this.enabled_ = false;
+    }
+
+    /**
+     * Create the `Slider`s DOM element.
+     *
+     * @param {string} type
+     *        Type of element to create.
+     *
+     * @param {Object} [props={}]
+     *        List of properties in Object form.
+     *
+     * @param {Object} [attributes={}]
+     *        list of attributes in Object form.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(type, props = {}, attributes = {}) {
+      // Add the slider element class to all sub classes
+      props.className = props.className + ' vjs-slider';
+      props = Object.assign({
+        tabIndex: 0
+      }, props);
+      attributes = Object.assign({
+        'role': 'slider',
+        'aria-valuenow': 0,
+        'aria-valuemin': 0,
+        'aria-valuemax': 100
+      }, attributes);
+      return super.createEl(type, props, attributes);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `Slider`.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     * @fires Slider#slideractive
+     */
+    handleMouseDown(event) {
+      const doc = this.bar.el_.ownerDocument;
+      if (event.type === 'mousedown') {
+        event.preventDefault();
+      }
+      // Do not call preventDefault() on touchstart in Chrome
+      // to avoid console warnings. Use a 'touch-action: none' style
+      // instead to prevent unintended scrolling.
+      // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+      if (event.type === 'touchstart' && !IS_CHROME) {
+        event.preventDefault();
+      }
+      blockTextSelection();
+      this.addClass('vjs-sliding');
+      /**
+       * Triggered when the slider is in an active state
+       *
+       * @event Slider#slideractive
+       * @type {MouseEvent}
+       */
+      this.trigger('slideractive');
+      this.on(doc, 'mousemove', this.handleMouseMove_);
+      this.on(doc, 'mouseup', this.handleMouseUp_);
+      this.on(doc, 'touchmove', this.handleMouseMove_);
+      this.on(doc, 'touchend', this.handleMouseUp_);
+      this.handleMouseMove(event, true);
+    }
+
+    /**
+     * Handle the `mousemove`, `touchmove`, and `mousedown` events on this `Slider`.
+     * The `mousemove` and `touchmove` events will only only trigger this function during
+     * `mousedown` and `touchstart`. This is due to {@link Slider#handleMouseDown} and
+     * {@link Slider#handleMouseUp}.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown`, `mousemove`, `touchstart`, or `touchmove` event that triggered
+     *        this function
+     * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false.
+     *
+     * @listens mousemove
+     * @listens touchmove
+     */
+    handleMouseMove(event) {}
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `Slider`.
+     *
+     * @param {MouseEvent} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     * @fires Slider#sliderinactive
+     */
+    handleMouseUp(event) {
+      const doc = this.bar.el_.ownerDocument;
+      unblockTextSelection();
+      this.removeClass('vjs-sliding');
+      /**
+       * Triggered when the slider is no longer in an active state.
+       *
+       * @event Slider#sliderinactive
+       * @type {Event}
+       */
+      this.trigger('sliderinactive');
+      this.off(doc, 'mousemove', this.handleMouseMove_);
+      this.off(doc, 'mouseup', this.handleMouseUp_);
+      this.off(doc, 'touchmove', this.handleMouseMove_);
+      this.off(doc, 'touchend', this.handleMouseUp_);
+      this.update();
+    }
+
+    /**
+     * Update the progress bar of the `Slider`.
+     *
+     * @return {number}
+     *          The percentage of progress the progress bar represents as a
+     *          number from 0 to 1.
+     */
+    update() {
+      // In VolumeBar init we have a setTimeout for update that pops and update
+      // to the end of the execution stack. The player is destroyed before then
+      // update will cause an error
+      // If there's no bar...
+      if (!this.el_ || !this.bar) {
+        return;
+      }
+
+      // clamp progress between 0 and 1
+      // and only round to four decimal places, as we round to two below
+      const progress = this.getProgress();
+      if (progress === this.progress_) {
+        return progress;
+      }
+      this.progress_ = progress;
+      this.requestNamedAnimationFrame('Slider#update', () => {
+        // Set the new bar width or height
+        const sizeKey = this.vertical() ? 'height' : 'width';
+
+        // Convert to a percentage for css value
+        this.bar.el().style[sizeKey] = (progress * 100).toFixed(2) + '%';
+      });
+      return progress;
+    }
+
+    /**
+     * Get the percentage of the bar that should be filled
+     * but clamped and rounded.
+     *
+     * @return {number}
+     *         percentage filled that the slider is
+     */
+    getProgress() {
+      return Number(clamp(this.getPercent(), 0, 1).toFixed(4));
+    }
+
+    /**
+     * Calculate distance for slider
+     *
+     * @param {Event} event
+     *        The event that caused this function to run.
+     *
+     * @return {number}
+     *         The current position of the Slider.
+     *         - position.x for vertical `Slider`s
+     *         - position.y for horizontal `Slider`s
+     */
+    calculateDistance(event) {
+      const position = getPointerPosition(this.el_, event);
+      if (this.vertical()) {
+        return position.y;
+      }
+      return position.x;
+    }
+
+    /**
+     * Handle a `keydown` event on the `Slider`. Watches for left, right, up, and down
+     * arrow keys. This function will only be called when the slider has focus. See
+     * {@link Slider#handleFocus} and {@link Slider#handleBlur}.
+     *
+     * @param {KeyboardEvent} event
+     *        the `keydown` event that caused this function to run.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Left and Down Arrows
+      if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepBack();
+
+        // Up and Right Arrows
+      } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepForward();
+      } else {
+        // Pass keydown handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Listener for click events on slider, used to prevent clicks
+     *   from bubbling up to parent elements like button menus.
+     *
+     * @param {Object} event
+     *        Event that caused this object to run
+     */
+    handleClick(event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+
+    /**
+     * Get/set if slider is horizontal for vertical
+     *
+     * @param {boolean} [bool]
+     *        - true if slider is vertical,
+     *        - false is horizontal
+     *
+     * @return {boolean}
+     *         - true if slider is vertical, and getting
+     *         - false if the slider is horizontal, and getting
+     */
+    vertical(bool) {
+      if (bool === undefined) {
+        return this.vertical_ || false;
+      }
+      this.vertical_ = !!bool;
+      if (this.vertical_) {
+        this.addClass('vjs-slider-vertical');
+      } else {
+        this.addClass('vjs-slider-horizontal');
+      }
+    }
+  }
+  Component.registerComponent('Slider', Slider);
+
+  /**
+   * @file load-progress-bar.js
+   */
+
+  // get the percent width of a time compared to the total end
+  const percentify = (time, end) => clamp(time / end * 100, 0, 100).toFixed(2) + '%';
+
+  /**
+   * Shows loading progress
+   *
+   * @extends Component
+   */
+  class LoadProgressBar extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.partEls_ = [];
+      this.on(player, 'progress', e => this.update(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-load-progress'
+      });
+      const wrapper = createEl('span', {
+        className: 'vjs-control-text'
+      });
+      const loadedText = createEl('span', {
+        textContent: this.localize('Loaded')
+      });
+      const separator = document.createTextNode(': ');
+      this.percentageEl_ = createEl('span', {
+        className: 'vjs-control-text-loaded-percentage',
+        textContent: '0%'
+      });
+      el.appendChild(wrapper);
+      wrapper.appendChild(loadedText);
+      wrapper.appendChild(separator);
+      wrapper.appendChild(this.percentageEl_);
+      return el;
+    }
+    dispose() {
+      this.partEls_ = null;
+      this.percentageEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Update progress bar
+     *
+     * @param {Event} [event]
+     *        The `progress` event that caused this function to run.
+     *
+     * @listens Player#progress
+     */
+    update(event) {
+      this.requestNamedAnimationFrame('LoadProgressBar#update', () => {
+        const liveTracker = this.player_.liveTracker;
+        const buffered = this.player_.buffered();
+        const duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
+        const bufferedEnd = this.player_.bufferedEnd();
+        const children = this.partEls_;
+        const percent = percentify(bufferedEnd, duration);
+        if (this.percent_ !== percent) {
+          // update the width of the progress bar
+          this.el_.style.width = percent;
+          // update the control-text
+          textContent(this.percentageEl_, percent);
+          this.percent_ = percent;
+        }
+
+        // add child elements to represent the individual buffered time ranges
+        for (let i = 0; i < buffered.length; i++) {
+          const start = buffered.start(i);
+          const end = buffered.end(i);
+          let part = children[i];
+          if (!part) {
+            part = this.el_.appendChild(createEl());
+            children[i] = part;
+          }
+
+          //  only update if changed
+          if (part.dataset.start === start && part.dataset.end === end) {
+            continue;
+          }
+          part.dataset.start = start;
+          part.dataset.end = end;
+
+          // set the percent based on the width of the progress bar (bufferedEnd)
+          part.style.left = percentify(start, bufferedEnd);
+          part.style.width = percentify(end - start, bufferedEnd);
+        }
+
+        // remove unused buffered range elements
+        for (let i = children.length; i > buffered.length; i--) {
+          this.el_.removeChild(children[i - 1]);
+        }
+        children.length = buffered.length;
+      });
+    }
+  }
+  Component.registerComponent('LoadProgressBar', LoadProgressBar);
+
+  /**
+   * @file time-tooltip.js
+   */
+
+  /**
+   * Time tooltips display a time above the progress bar.
+   *
+   * @extends Component
+   */
+  class TimeTooltip extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the time tooltip DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-time-tooltip'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Updates the position of the time tooltip relative to the `SeekBar`.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint, content) {
+      const tooltipRect = findPosition(this.el_);
+      const playerRect = getBoundingClientRect(this.player_.el());
+      const seekBarPointPx = seekBarRect.width * seekBarPoint;
+
+      // do nothing if either rect isn't available
+      // for example, if the player isn't in the DOM for testing
+      if (!playerRect || !tooltipRect) {
+        return;
+      }
+
+      // This is the space left of the `seekBarPoint` available within the bounds
+      // of the player. We calculate any gap between the left edge of the player
+      // and the left edge of the `SeekBar` and add the number of pixels in the
+      // `SeekBar` before hitting the `seekBarPoint`
+      let spaceLeftOfPoint = seekBarRect.left - playerRect.left + seekBarPointPx;
+
+      // This is the space right of the `seekBarPoint` available within the bounds
+      // of the player. We calculate the number of pixels from the `seekBarPoint`
+      // to the right edge of the `SeekBar` and add to that any gap between the
+      // right edge of the `SeekBar` and the player.
+      let spaceRightOfPoint = seekBarRect.width - seekBarPointPx + (playerRect.right - seekBarRect.right);
+
+      // spaceRightOfPoint is always NaN for mouse time display
+      // because the seekbarRect does not have a right property. This causes
+      // the mouse tool tip to be truncated when it's close to the right edge of the player.
+      // In such cases, we ignore the `playerRect.right - seekBarRect.right` value when calculating.
+      // For the sake of consistency, we ignore seekBarRect.left - playerRect.left for the left edge.
+      if (!spaceRightOfPoint) {
+        spaceRightOfPoint = seekBarRect.width - seekBarPointPx;
+        spaceLeftOfPoint = seekBarPointPx;
+      }
+      // This is the number of pixels by which the tooltip will need to be pulled
+      // further to the right to center it over the `seekBarPoint`.
+      let pullTooltipBy = tooltipRect.width / 2;
+
+      // Adjust the `pullTooltipBy` distance to the left or right depending on
+      // the results of the space calculations above.
+      if (spaceLeftOfPoint < pullTooltipBy) {
+        pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
+      } else if (spaceRightOfPoint < pullTooltipBy) {
+        pullTooltipBy = spaceRightOfPoint;
+      }
+
+      // Due to the imprecision of decimal/ratio based calculations and varying
+      // rounding behaviors, there are cases where the spacing adjustment is off
+      // by a pixel or two. This adds insurance to these calculations.
+      if (pullTooltipBy < 0) {
+        pullTooltipBy = 0;
+      } else if (pullTooltipBy > tooltipRect.width) {
+        pullTooltipBy = tooltipRect.width;
+      }
+
+      // prevent small width fluctuations within 0.4px from
+      // changing the value below.
+      // This really helps for live to prevent the play
+      // progress time tooltip from jittering
+      pullTooltipBy = Math.round(pullTooltipBy);
+      this.el_.style.right = `-${pullTooltipBy}px`;
+      this.write(content);
+    }
+
+    /**
+     * Write the time to the tooltip DOM element.
+     *
+     * @param {string} content
+     *        The formatted time for the tooltip.
+     */
+    write(content) {
+      textContent(this.el_, content);
+    }
+
+    /**
+     * Updates the position of the time tooltip relative to the `SeekBar`.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     *
+     * @param {number} time
+     *        The time to update the tooltip to, not used during live playback
+     *
+     * @param {Function} cb
+     *        A function that will be called during the request animation frame
+     *        for tooltips that need to do additional animations from the default
+     */
+    updateTime(seekBarRect, seekBarPoint, time, cb) {
+      this.requestNamedAnimationFrame('TimeTooltip#updateTime', () => {
+        let content;
+        const duration = this.player_.duration();
+        if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+          const liveWindow = this.player_.liveTracker.liveWindow();
+          const secondsBehind = liveWindow - seekBarPoint * liveWindow;
+          content = (secondsBehind < 1 ? '' : '-') + formatTime(secondsBehind, liveWindow);
+        } else {
+          content = formatTime(time, duration);
+        }
+        this.update(seekBarRect, seekBarPoint, content);
+        if (cb) {
+          cb();
+        }
+      });
+    }
+  }
+  Component.registerComponent('TimeTooltip', TimeTooltip);
+
+  /**
+   * @file play-progress-bar.js
+   */
+
+  /**
+   * Used by {@link SeekBar} to display media playback progress as part of the
+   * {@link ProgressControl}.
+   *
+   * @extends Component
+   */
+  class PlayProgressBar extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('circle');
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-play-progress vjs-slider-bar'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Enqueues updates to its own DOM as well as the DOM of its
+     * {@link TimeTooltip} child.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint) {
+      const timeTooltip = this.getChild('timeTooltip');
+      if (!timeTooltip) {
+        return;
+      }
+      const time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+      timeTooltip.updateTime(seekBarRect, seekBarPoint, time);
+    }
+  }
+
+  /**
+   * Default options for {@link PlayProgressBar}.
+   *
+   * @type {Object}
+   * @private
+   */
+  PlayProgressBar.prototype.options_ = {
+    children: []
+  };
+
+  // Time tooltips should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    PlayProgressBar.prototype.options_.children.push('timeTooltip');
+  }
+  Component.registerComponent('PlayProgressBar', PlayProgressBar);
+
+  /**
+   * @file mouse-time-display.js
+   */
+
+  /**
+   * The {@link MouseTimeDisplay} component tracks mouse movement over the
+   * {@link ProgressControl}. It displays an indicator and a {@link TimeTooltip}
+   * indicating the time which is represented by a given point in the
+   * {@link ProgressControl}.
+   *
+   * @extends Component
+   */
+  class MouseTimeDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-mouse-display'
+      });
+    }
+
+    /**
+     * Enqueues updates to its own DOM as well as the DOM of its
+     * {@link TimeTooltip} child.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint) {
+      const time = seekBarPoint * this.player_.duration();
+      this.getChild('timeTooltip').updateTime(seekBarRect, seekBarPoint, time, () => {
+        this.el_.style.left = `${seekBarRect.width * seekBarPoint}px`;
+      });
+    }
+  }
+
+  /**
+   * Default options for `MouseTimeDisplay`
+   *
+   * @type {Object}
+   * @private
+   */
+  MouseTimeDisplay.prototype.options_ = {
+    children: ['timeTooltip']
+  };
+  Component.registerComponent('MouseTimeDisplay', MouseTimeDisplay);
+
+  /**
+   * @file seek-bar.js
+   */
+
+  // The number of seconds the `step*` functions move the timeline.
+  const STEP_SECONDS = 5;
+
+  // The multiplier of STEP_SECONDS that PgUp/PgDown move the timeline.
+  const PAGE_KEY_MULTIPLIER = 12;
+
+  /**
+   * Seek bar and container for the progress bars. Uses {@link PlayProgressBar}
+   * as its `bar`.
+   *
+   * @extends Slider
+   */
+  class SeekBar extends Slider {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setEventHandlers_();
+    }
+
+    /**
+     * Sets the event handlers
+     *
+     * @private
+     */
+    setEventHandlers_() {
+      this.update_ = bind_(this, this.update);
+      this.update = throttle(this.update_, UPDATE_REFRESH_INTERVAL);
+      this.on(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
+      if (this.player_.liveTracker) {
+        this.on(this.player_.liveTracker, 'liveedgechange', this.update);
+      }
+
+      // when playing, let's ensure we smoothly update the play progress bar
+      // via an interval
+      this.updateInterval = null;
+      this.enableIntervalHandler_ = e => this.enableInterval_(e);
+      this.disableIntervalHandler_ = e => this.disableInterval_(e);
+      this.on(this.player_, ['playing'], this.enableIntervalHandler_);
+      this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
+
+      // we don't need to update the play progress if the document is hidden,
+      // also, this causes the CPU to spike and eventually crash the page on IE11.
+      if ('hidden' in document && 'visibilityState' in document) {
+        this.on(document, 'visibilitychange', this.toggleVisibility_);
+      }
+    }
+    toggleVisibility_(e) {
+      if (document.visibilityState === 'hidden') {
+        this.cancelNamedAnimationFrame('SeekBar#update');
+        this.cancelNamedAnimationFrame('Slider#update');
+        this.disableInterval_(e);
+      } else {
+        if (!this.player_.ended() && !this.player_.paused()) {
+          this.enableInterval_();
+        }
+
+        // we just switched back to the page and someone may be looking, so, update ASAP
+        this.update();
+      }
+    }
+    enableInterval_() {
+      if (this.updateInterval) {
+        return;
+      }
+      this.updateInterval = this.setInterval(this.update, UPDATE_REFRESH_INTERVAL);
+    }
+    disableInterval_(e) {
+      if (this.player_.liveTracker && this.player_.liveTracker.isLive() && e && e.type !== 'ended') {
+        return;
+      }
+      if (!this.updateInterval) {
+        return;
+      }
+      this.clearInterval(this.updateInterval);
+      this.updateInterval = null;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-progress-holder'
+      }, {
+        'aria-label': this.localize('Progress Bar')
+      });
+    }
+
+    /**
+     * This function updates the play progress bar and accessibility
+     * attributes to whatever is passed in.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` or `ended` event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     *
+     * @return {number}
+     *          The current percent at a number from 0-1
+     */
+    update(event) {
+      // ignore updates while the tab is hidden
+      if (document.visibilityState === 'hidden') {
+        return;
+      }
+      const percent = super.update();
+      this.requestNamedAnimationFrame('SeekBar#update', () => {
+        const currentTime = this.player_.ended() ? this.player_.duration() : this.getCurrentTime_();
+        const liveTracker = this.player_.liveTracker;
+        let duration = this.player_.duration();
+        if (liveTracker && liveTracker.isLive()) {
+          duration = this.player_.liveTracker.liveCurrentTime();
+        }
+        if (this.percent_ !== percent) {
+          // machine readable value of progress bar (percentage complete)
+          this.el_.setAttribute('aria-valuenow', (percent * 100).toFixed(2));
+          this.percent_ = percent;
+        }
+        if (this.currentTime_ !== currentTime || this.duration_ !== duration) {
+          // human readable value of progress bar (time complete)
+          this.el_.setAttribute('aria-valuetext', this.localize('progress bar timing: currentTime={1} duration={2}', [formatTime(currentTime, duration), formatTime(duration, duration)], '{1} of {2}'));
+          this.currentTime_ = currentTime;
+          this.duration_ = duration;
+        }
+
+        // update the progress bar time tooltip with the current time
+        if (this.bar) {
+          this.bar.update(getBoundingClientRect(this.el()), this.getProgress());
+        }
+      });
+      return percent;
+    }
+
+    /**
+     * Prevent liveThreshold from causing seeks to seem like they
+     * are not happening from a user perspective.
+     *
+     * @param {number} ct
+     *        current time to seek to
+     */
+    userSeek_(ct) {
+      if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+        this.player_.liveTracker.nextSeekedFromUser();
+      }
+      this.player_.currentTime(ct);
+    }
+
+    /**
+     * Get the value of current time but allows for smooth scrubbing,
+     * when player can't keep up.
+     *
+     * @return {number}
+     *         The current time value to display
+     *
+     * @private
+     */
+    getCurrentTime_() {
+      return this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+    }
+
+    /**
+     * Get the percentage of media played so far.
+     *
+     * @return {number}
+     *         The percentage of media played so far (0 to 1).
+     */
+    getPercent() {
+      const currentTime = this.getCurrentTime_();
+      let percent;
+      const liveTracker = this.player_.liveTracker;
+      if (liveTracker && liveTracker.isLive()) {
+        percent = (currentTime - liveTracker.seekableStart()) / liveTracker.liveWindow();
+
+        // prevent the percent from changing at the live edge
+        if (liveTracker.atLiveEdge()) {
+          percent = 1;
+        }
+      } else {
+        percent = currentTime / this.player_.duration();
+      }
+      return percent;
+    }
+
+    /**
+     * Handle mouse down on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mousedown` event that caused this to run.
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+
+      // Stop event propagation to prevent double fire in progress-control.js
+      event.stopPropagation();
+      this.videoWasPlaying = !this.player_.paused();
+      this.player_.pause();
+      super.handleMouseDown(event);
+    }
+
+    /**
+     * Handle mouse move on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mousemove` event that caused this to run.
+     * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false
+     *
+     * @listens mousemove
+     */
+    handleMouseMove(event, mouseDown = false) {
+      if (!isSingleLeftClick(event) || isNaN(this.player_.duration())) {
+        return;
+      }
+      if (!mouseDown && !this.player_.scrubbing()) {
+        this.player_.scrubbing(true);
+      }
+      let newTime;
+      const distance = this.calculateDistance(event);
+      const liveTracker = this.player_.liveTracker;
+      if (!liveTracker || !liveTracker.isLive()) {
+        newTime = distance * this.player_.duration();
+
+        // Don't let video end while scrubbing.
+        if (newTime === this.player_.duration()) {
+          newTime = newTime - 0.1;
+        }
+      } else {
+        if (distance >= 0.99) {
+          liveTracker.seekToLiveEdge();
+          return;
+        }
+        const seekableStart = liveTracker.seekableStart();
+        const seekableEnd = liveTracker.liveCurrentTime();
+        newTime = seekableStart + distance * liveTracker.liveWindow();
+
+        // Don't let video end while scrubbing.
+        if (newTime >= seekableEnd) {
+          newTime = seekableEnd;
+        }
+
+        // Compensate for precision differences so that currentTime is not less
+        // than seekable start
+        if (newTime <= seekableStart) {
+          newTime = seekableStart + 0.1;
+        }
+
+        // On android seekableEnd can be Infinity sometimes,
+        // this will cause newTime to be Infinity, which is
+        // not a valid currentTime.
+        if (newTime === Infinity) {
+          return;
+        }
+      }
+
+      // Set new time (tell player to seek to new time)
+      this.userSeek_(newTime);
+      if (this.player_.options_.enableSmoothSeeking) {
+        this.update();
+      }
+    }
+    enable() {
+      super.enable();
+      const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+      if (!mouseTimeDisplay) {
+        return;
+      }
+      mouseTimeDisplay.show();
+    }
+    disable() {
+      super.disable();
+      const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+      if (!mouseTimeDisplay) {
+        return;
+      }
+      mouseTimeDisplay.hide();
+    }
+
+    /**
+     * Handle mouse up on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mouseup` event that caused this to run.
+     *
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      super.handleMouseUp(event);
+
+      // Stop event propagation to prevent double fire in progress-control.js
+      if (event) {
+        event.stopPropagation();
+      }
+      this.player_.scrubbing(false);
+
+      /**
+       * Trigger timeupdate because we're done seeking and the time has changed.
+       * This is particularly useful for if the player is paused to time the time displays.
+       *
+       * @event Tech#timeupdate
+       * @type {Event}
+       */
+      this.player_.trigger({
+        type: 'timeupdate',
+        target: this,
+        manuallyTriggered: true
+      });
+      if (this.videoWasPlaying) {
+        silencePromise(this.player_.play());
+      } else {
+        // We're done seeking and the time has changed.
+        // If the player is paused, make sure we display the correct time on the seek bar.
+        this.update_();
+      }
+    }
+
+    /**
+     * Move more quickly fast forward for keyboard-only users
+     */
+    stepForward() {
+      this.userSeek_(this.player_.currentTime() + STEP_SECONDS);
+    }
+
+    /**
+     * Move more quickly rewind for keyboard-only users
+     */
+    stepBack() {
+      this.userSeek_(this.player_.currentTime() - STEP_SECONDS);
+    }
+
+    /**
+     * Toggles the playback state of the player
+     * This gets called when enter or space is used on the seekbar
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called
+     *
+     */
+    handleAction(event) {
+      if (this.player_.paused()) {
+        this.player_.play();
+      } else {
+        this.player_.pause();
+      }
+    }
+
+    /**
+     * Called when this SeekBar has focus and a key gets pressed down.
+     * Supports the following keys:
+     *
+     *   Space or Enter key fire a click event
+     *   Home key moves to start of the timeline
+     *   End key moves to end of the timeline
+     *   Digit "0" through "9" keys move to 0%, 10% ... 80%, 90% of the timeline
+     *   PageDown key moves back a larger step than ArrowDown
+     *   PageUp key moves forward a large step
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      const liveTracker = this.player_.liveTracker;
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.handleAction(event);
+      } else if (keycode.isEventKey(event, 'Home')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(0);
+      } else if (keycode.isEventKey(event, 'End')) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (liveTracker && liveTracker.isLive()) {
+          this.userSeek_(liveTracker.liveCurrentTime());
+        } else {
+          this.userSeek_(this.player_.duration());
+        }
+      } else if (/^[0-9]$/.test(keycode(event))) {
+        event.preventDefault();
+        event.stopPropagation();
+        const gotoFraction = (keycode.codes[keycode(event)] - keycode.codes['0']) * 10.0 / 100.0;
+        if (liveTracker && liveTracker.isLive()) {
+          this.userSeek_(liveTracker.seekableStart() + liveTracker.liveWindow() * gotoFraction);
+        } else {
+          this.userSeek_(this.player_.duration() * gotoFraction);
+        }
+      } else if (keycode.isEventKey(event, 'PgDn')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(this.player_.currentTime() - STEP_SECONDS * PAGE_KEY_MULTIPLIER);
+      } else if (keycode.isEventKey(event, 'PgUp')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(this.player_.currentTime() + STEP_SECONDS * PAGE_KEY_MULTIPLIER);
+      } else {
+        // Pass keydown handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+    dispose() {
+      this.disableInterval_();
+      this.off(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
+      if (this.player_.liveTracker) {
+        this.off(this.player_.liveTracker, 'liveedgechange', this.update);
+      }
+      this.off(this.player_, ['playing'], this.enableIntervalHandler_);
+      this.off(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
+
+      // we don't need to update the play progress if the document is hidden,
+      // also, this causes the CPU to spike and eventually crash the page on IE11.
+      if ('hidden' in document && 'visibilityState' in document) {
+        this.off(document, 'visibilitychange', this.toggleVisibility_);
+      }
+      super.dispose();
+    }
+  }
+
+  /**
+   * Default options for the `SeekBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  SeekBar.prototype.options_ = {
+    children: ['loadProgressBar', 'playProgressBar'],
+    barName: 'playProgressBar'
+  };
+
+  // MouseTimeDisplay tooltips should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    SeekBar.prototype.options_.children.splice(1, 0, 'mouseTimeDisplay');
+  }
+  Component.registerComponent('SeekBar', SeekBar);
+
+  /**
+   * @file progress-control.js
+   */
+
+  /**
+   * The Progress Control component contains the seek bar, load progress,
+   * and play progress.
+   *
+   * @extends Component
+   */
+  class ProgressControl extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.handleMouseMove = throttle(bind_(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+      this.throttledHandleMouseSeek = throttle(bind_(this, this.handleMouseSeek), UPDATE_REFRESH_INTERVAL);
+      this.handleMouseUpHandler_ = e => this.handleMouseUp(e);
+      this.handleMouseDownHandler_ = e => this.handleMouseDown(e);
+      this.enable();
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-progress-control vjs-control'
+      });
+    }
+
+    /**
+     * When the mouse moves over the `ProgressControl`, the pointer position
+     * gets passed down to the `MouseTimeDisplay` component.
+     *
+     * @param {Event} event
+     *        The `mousemove` event that caused this function to run.
+     *
+     * @listen mousemove
+     */
+    handleMouseMove(event) {
+      const seekBar = this.getChild('seekBar');
+      if (!seekBar) {
+        return;
+      }
+      const playProgressBar = seekBar.getChild('playProgressBar');
+      const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
+      if (!playProgressBar && !mouseTimeDisplay) {
+        return;
+      }
+      const seekBarEl = seekBar.el();
+      const seekBarRect = findPosition(seekBarEl);
+      let seekBarPoint = getPointerPosition(seekBarEl, event).x;
+
+      // The default skin has a gap on either side of the `SeekBar`. This means
+      // that it's possible to trigger this behavior outside the boundaries of
+      // the `SeekBar`. This ensures we stay within it at all times.
+      seekBarPoint = clamp(seekBarPoint, 0, 1);
+      if (mouseTimeDisplay) {
+        mouseTimeDisplay.update(seekBarRect, seekBarPoint);
+      }
+      if (playProgressBar) {
+        playProgressBar.update(seekBarRect, seekBar.getProgress());
+      }
+    }
+
+    /**
+     * A throttled version of the {@link ProgressControl#handleMouseSeek} listener.
+     *
+     * @method ProgressControl#throttledHandleMouseSeek
+     * @param {Event} event
+     *        The `mousemove` event that caused this function to run.
+     *
+     * @listen mousemove
+     * @listen touchmove
+     */
+
+    /**
+     * Handle `mousemove` or `touchmove` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousemove
+     * @listens touchmove
+     */
+    handleMouseSeek(event) {
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseMove(event);
+      }
+    }
+
+    /**
+     * Are controls are currently enabled for this progress control.
+     *
+     * @return {boolean}
+     *         true if controls are enabled, false otherwise
+     */
+    enabled() {
+      return this.enabled_;
+    }
+
+    /**
+     * Disable all controls on the progress control and its children
+     */
+    disable() {
+      this.children().forEach(child => child.disable && child.disable());
+      if (!this.enabled()) {
+        return;
+      }
+      this.off(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
+      this.off(this.el_, 'mousemove', this.handleMouseMove);
+      this.removeListenersAddedOnMousedownAndTouchstart();
+      this.addClass('disabled');
+      this.enabled_ = false;
+
+      // Restore normal playback state if controls are disabled while scrubbing
+      if (this.player_.scrubbing()) {
+        const seekBar = this.getChild('seekBar');
+        this.player_.scrubbing(false);
+        if (seekBar.videoWasPlaying) {
+          silencePromise(this.player_.play());
+        }
+      }
+    }
+
+    /**
+     * Enable all controls on the progress control and its children
+     */
+    enable() {
+      this.children().forEach(child => child.enable && child.enable());
+      if (this.enabled()) {
+        return;
+      }
+      this.on(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
+      this.on(this.el_, 'mousemove', this.handleMouseMove);
+      this.removeClass('disabled');
+      this.enabled_ = true;
+    }
+
+    /**
+     * Cleanup listeners after the user finishes interacting with the progress controls
+     */
+    removeListenersAddedOnMousedownAndTouchstart() {
+      const doc = this.el_.ownerDocument;
+      this.off(doc, 'mousemove', this.throttledHandleMouseSeek);
+      this.off(doc, 'touchmove', this.throttledHandleMouseSeek);
+      this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.off(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseDown(event) {
+      const doc = this.el_.ownerDocument;
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseDown(event);
+      }
+      this.on(doc, 'mousemove', this.throttledHandleMouseSeek);
+      this.on(doc, 'touchmove', this.throttledHandleMouseSeek);
+      this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.on(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseUp(event);
+      }
+      this.removeListenersAddedOnMousedownAndTouchstart();
+    }
+  }
+
+  /**
+   * Default options for `ProgressControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  ProgressControl.prototype.options_ = {
+    children: ['seekBar']
+  };
+  Component.registerComponent('ProgressControl', ProgressControl);
+
+  /**
+   * @file picture-in-picture-toggle.js
+   */
+
+  /**
+   * Toggle Picture-in-Picture mode
+   *
+   * @extends Button
+   */
+  class PictureInPictureToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @listens Player#enterpictureinpicture
+     * @listens Player#leavepictureinpicture
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('picture-in-picture-enter');
+      this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], e => this.handlePictureInPictureChange(e));
+      this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], e => this.handlePictureInPictureEnabledChange(e));
+      this.on(player, ['loadedmetadata', 'audioonlymodechange', 'audiopostermodechange'], () => this.handlePictureInPictureAudioModeChange());
+
+      // TODO: Deactivate button on player emptied event.
+      this.disable();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-picture-in-picture-control vjs-hidden ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Displays or hides the button depending on the audio mode detection.
+     * Exits picture-in-picture if it is enabled when switching to audio mode.
+     */
+    handlePictureInPictureAudioModeChange() {
+      // This audio detection will not detect HLS or DASH audio-only streams because there was no reliable way to detect them at the time
+      const isSourceAudio = this.player_.currentType().substring(0, 5) === 'audio';
+      const isAudioMode = isSourceAudio || this.player_.audioPosterMode() || this.player_.audioOnlyMode();
+      if (!isAudioMode) {
+        this.show();
+        return;
+      }
+      if (this.player_.isInPictureInPicture()) {
+        this.player_.exitPictureInPicture();
+      }
+      this.hide();
+    }
+
+    /**
+     * Enables or disables button based on availability of a Picture-In-Picture mode.
+     *
+     * Enabled if
+     * - `player.options().enableDocumentPictureInPicture` is true and
+     *   window.documentPictureInPicture is available; or
+     * - `player.disablePictureInPicture()` is false and
+     *   element.requestPictureInPicture is available
+     */
+    handlePictureInPictureEnabledChange() {
+      if (document.pictureInPictureEnabled && this.player_.disablePictureInPicture() === false || this.player_.options_.enableDocumentPictureInPicture && 'documentPictureInPicture' in window) {
+        this.enable();
+      } else {
+        this.disable();
+      }
+    }
+
+    /**
+     * Handles enterpictureinpicture and leavepictureinpicture on the player and change control text accordingly.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#enterpictureinpicture} or {@link Player#leavepictureinpicture} event that caused this function to be
+     *        called.
+     *
+     * @listens Player#enterpictureinpicture
+     * @listens Player#leavepictureinpicture
+     */
+    handlePictureInPictureChange(event) {
+      if (this.player_.isInPictureInPicture()) {
+        this.setIcon('picture-in-picture-exit');
+        this.controlText('Exit Picture-in-Picture');
+      } else {
+        this.setIcon('picture-in-picture-enter');
+        this.controlText('Picture-in-Picture');
+      }
+      this.handlePictureInPictureEnabledChange();
+    }
+
+    /**
+     * This gets called when an `PictureInPictureToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (!this.player_.isInPictureInPicture()) {
+        this.player_.requestPictureInPicture();
+      } else {
+        this.player_.exitPictureInPicture();
+      }
+    }
+
+    /**
+     * Show the `Component`s element if it is hidden by removing the
+     * 'vjs-hidden' class name from it only in browsers that support the Picture-in-Picture API.
+     */
+    show() {
+      // Does not allow to display the pictureInPictureToggle in browsers that do not support the Picture-in-Picture API, e.g. Firefox.
+      if (typeof document.exitPictureInPicture !== 'function') {
+        return;
+      }
+      super.show();
+    }
+  }
+
+  /**
+   * The text that should display over the `PictureInPictureToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PictureInPictureToggle.prototype.controlText_ = 'Picture-in-Picture';
+  Component.registerComponent('PictureInPictureToggle', PictureInPictureToggle);
+
+  /**
+   * @file fullscreen-toggle.js
+   */
+
+  /**
+   * Toggle fullscreen video
+   *
+   * @extends Button
+   */
+  class FullscreenToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('fullscreen-enter');
+      this.on(player, 'fullscreenchange', e => this.handleFullscreenChange(e));
+      if (document[player.fsApi_.fullscreenEnabled] === false) {
+        this.disable();
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-fullscreen-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Handles fullscreenchange on the player and change control text accordingly.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#fullscreenchange} event that caused this function to be
+     *        called.
+     *
+     * @listens Player#fullscreenchange
+     */
+    handleFullscreenChange(event) {
+      if (this.player_.isFullscreen()) {
+        this.controlText('Exit Fullscreen');
+        this.setIcon('fullscreen-exit');
+      } else {
+        this.controlText('Fullscreen');
+        this.setIcon('fullscreen-enter');
+      }
+    }
+
+    /**
+     * This gets called when an `FullscreenToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (!this.player_.isFullscreen()) {
+        this.player_.requestFullscreen();
+      } else {
+        this.player_.exitFullscreen();
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `FullscreenToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  FullscreenToggle.prototype.controlText_ = 'Fullscreen';
+  Component.registerComponent('FullscreenToggle', FullscreenToggle);
+
+  /**
+   * Check if volume control is supported and if it isn't hide the
+   * `Component` that was passed  using the `vjs-hidden` class.
+   *
+   * @param { import('../../component').default } self
+   *        The component that should be hidden if volume is unsupported
+   *
+   * @param { import('../../player').default } player
+   *        A reference to the player
+   *
+   * @private
+   */
+  const checkVolumeSupport = function (self, player) {
+    // hide volume controls when they're not supported by the current tech
+    if (player.tech_ && !player.tech_.featuresVolumeControl) {
+      self.addClass('vjs-hidden');
+    }
+    self.on(player, 'loadstart', function () {
+      if (!player.tech_.featuresVolumeControl) {
+        self.addClass('vjs-hidden');
+      } else {
+        self.removeClass('vjs-hidden');
+      }
+    });
+  };
+
+  /**
+   * @file volume-level.js
+   */
+
+  /**
+   * Shows volume level
+   *
+   * @extends Component
+   */
+  class VolumeLevel extends Component {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-volume-level'
+      });
+      this.setIcon('circle', el);
+      el.appendChild(super.createEl('span', {
+        className: 'vjs-control-text'
+      }));
+      return el;
+    }
+  }
+  Component.registerComponent('VolumeLevel', VolumeLevel);
+
+  /**
+   * @file volume-level-tooltip.js
+   */
+
+  /**
+   * Volume level tooltips display a volume above or side by side the volume bar.
+   *
+   * @extends Component
+   */
+  class VolumeLevelTooltip extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the volume tooltip DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-volume-tooltip'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Updates the position of the tooltip relative to the `VolumeBar` and
+     * its content text.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     */
+    update(rangeBarRect, rangeBarPoint, vertical, content) {
+      if (!vertical) {
+        const tooltipRect = getBoundingClientRect(this.el_);
+        const playerRect = getBoundingClientRect(this.player_.el());
+        const volumeBarPointPx = rangeBarRect.width * rangeBarPoint;
+        if (!playerRect || !tooltipRect) {
+          return;
+        }
+        const spaceLeftOfPoint = rangeBarRect.left - playerRect.left + volumeBarPointPx;
+        const spaceRightOfPoint = rangeBarRect.width - volumeBarPointPx + (playerRect.right - rangeBarRect.right);
+        let pullTooltipBy = tooltipRect.width / 2;
+        if (spaceLeftOfPoint < pullTooltipBy) {
+          pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
+        } else if (spaceRightOfPoint < pullTooltipBy) {
+          pullTooltipBy = spaceRightOfPoint;
+        }
+        if (pullTooltipBy < 0) {
+          pullTooltipBy = 0;
+        } else if (pullTooltipBy > tooltipRect.width) {
+          pullTooltipBy = tooltipRect.width;
+        }
+        this.el_.style.right = `-${pullTooltipBy}px`;
+      }
+      this.write(`${content}%`);
+    }
+
+    /**
+     * Write the volume to the tooltip DOM element.
+     *
+     * @param {string} content
+     *        The formatted volume for the tooltip.
+     */
+    write(content) {
+      textContent(this.el_, content);
+    }
+
+    /**
+     * Updates the position of the volume tooltip relative to the `VolumeBar`.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     * @param {number} volume
+     *        The volume level to update the tooltip to
+     *
+     * @param {Function} cb
+     *        A function that will be called during the request animation frame
+     *        for tooltips that need to do additional animations from the default
+     */
+    updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, cb) {
+      this.requestNamedAnimationFrame('VolumeLevelTooltip#updateVolume', () => {
+        this.update(rangeBarRect, rangeBarPoint, vertical, volume.toFixed(0));
+        if (cb) {
+          cb();
+        }
+      });
+    }
+  }
+  Component.registerComponent('VolumeLevelTooltip', VolumeLevelTooltip);
+
+  /**
+   * @file mouse-volume-level-display.js
+   */
+
+  /**
+   * The {@link MouseVolumeLevelDisplay} component tracks mouse movement over the
+   * {@link VolumeControl}. It displays an indicator and a {@link VolumeLevelTooltip}
+   * indicating the volume level which is represented by a given point in the
+   * {@link VolumeBar}.
+   *
+   * @extends Component
+   */
+  class MouseVolumeLevelDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-mouse-display'
+      });
+    }
+
+    /**
+     * Enquires updates to its own DOM as well as the DOM of its
+     * {@link VolumeLevelTooltip} child.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     */
+    update(rangeBarRect, rangeBarPoint, vertical) {
+      const volume = 100 * rangeBarPoint;
+      this.getChild('volumeLevelTooltip').updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, () => {
+        if (vertical) {
+          this.el_.style.bottom = `${rangeBarRect.height * rangeBarPoint}px`;
+        } else {
+          this.el_.style.left = `${rangeBarRect.width * rangeBarPoint}px`;
+        }
+      });
+    }
+  }
+
+  /**
+   * Default options for `MouseVolumeLevelDisplay`
+   *
+   * @type {Object}
+   * @private
+   */
+  MouseVolumeLevelDisplay.prototype.options_ = {
+    children: ['volumeLevelTooltip']
+  };
+  Component.registerComponent('MouseVolumeLevelDisplay', MouseVolumeLevelDisplay);
+
+  /**
+   * @file volume-bar.js
+   */
+
+  /**
+   * The bar that contains the volume level and can be clicked on to adjust the level
+   *
+   * @extends Slider
+   */
+  class VolumeBar extends Slider {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on('slideractive', e => this.updateLastVolume_(e));
+      this.on(player, 'volumechange', e => this.updateARIAAttributes(e));
+      player.ready(() => this.updateARIAAttributes());
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-volume-bar vjs-slider-bar'
+      }, {
+        'aria-label': this.localize('Volume Level'),
+        'aria-live': 'polite'
+      });
+    }
+
+    /**
+     * Handle mouse down on volume bar
+     *
+     * @param {Event} event
+     *        The `mousedown` event that caused this to run.
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+      super.handleMouseDown(event);
+    }
+
+    /**
+     * Handle movement events on the {@link VolumeMenuButton}.
+     *
+     * @param {Event} event
+     *        The event that caused this function to run.
+     *
+     * @listens mousemove
+     */
+    handleMouseMove(event) {
+      const mouseVolumeLevelDisplay = this.getChild('mouseVolumeLevelDisplay');
+      if (mouseVolumeLevelDisplay) {
+        const volumeBarEl = this.el();
+        const volumeBarRect = getBoundingClientRect(volumeBarEl);
+        const vertical = this.vertical();
+        let volumeBarPoint = getPointerPosition(volumeBarEl, event);
+        volumeBarPoint = vertical ? volumeBarPoint.y : volumeBarPoint.x;
+        // The default skin has a gap on either side of the `VolumeBar`. This means
+        // that it's possible to trigger this behavior outside the boundaries of
+        // the `VolumeBar`. This ensures we stay within it at all times.
+        volumeBarPoint = clamp(volumeBarPoint, 0, 1);
+        mouseVolumeLevelDisplay.update(volumeBarRect, volumeBarPoint, vertical);
+      }
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+      this.checkMuted();
+      this.player_.volume(this.calculateDistance(event));
+    }
+
+    /**
+     * If the player is muted unmute it.
+     */
+    checkMuted() {
+      if (this.player_.muted()) {
+        this.player_.muted(false);
+      }
+    }
+
+    /**
+     * Get percent of volume level
+     *
+     * @return {number}
+     *         Volume level percent as a decimal number.
+     */
+    getPercent() {
+      if (this.player_.muted()) {
+        return 0;
+      }
+      return this.player_.volume();
+    }
+
+    /**
+     * Increase volume level for keyboard users
+     */
+    stepForward() {
+      this.checkMuted();
+      this.player_.volume(this.player_.volume() + 0.1);
+    }
+
+    /**
+     * Decrease volume level for keyboard users
+     */
+    stepBack() {
+      this.checkMuted();
+      this.player_.volume(this.player_.volume() - 0.1);
+    }
+
+    /**
+     * Update ARIA accessibility attributes
+     *
+     * @param {Event} [event]
+     *        The `volumechange` event that caused this function to run.
+     *
+     * @listens Player#volumechange
+     */
+    updateARIAAttributes(event) {
+      const ariaValue = this.player_.muted() ? 0 : this.volumeAsPercentage_();
+      this.el_.setAttribute('aria-valuenow', ariaValue);
+      this.el_.setAttribute('aria-valuetext', ariaValue + '%');
+    }
+
+    /**
+     * Returns the current value of the player volume as a percentage
+     *
+     * @private
+     */
+    volumeAsPercentage_() {
+      return Math.round(this.player_.volume() * 100);
+    }
+
+    /**
+     * When user starts dragging the VolumeBar, store the volume and listen for
+     * the end of the drag. When the drag ends, if the volume was set to zero,
+     * set lastVolume to the stored volume.
+     *
+     * @listens slideractive
+     * @private
+     */
+    updateLastVolume_() {
+      const volumeBeforeDrag = this.player_.volume();
+      this.one('sliderinactive', () => {
+        if (this.player_.volume() === 0) {
+          this.player_.lastVolume_(volumeBeforeDrag);
+        }
+      });
+    }
+  }
+
+  /**
+   * Default options for the `VolumeBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumeBar.prototype.options_ = {
+    children: ['volumeLevel'],
+    barName: 'volumeLevel'
+  };
+
+  // MouseVolumeLevelDisplay tooltip should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    VolumeBar.prototype.options_.children.splice(0, 0, 'mouseVolumeLevelDisplay');
+  }
+
+  /**
+   * Call the update event for this Slider when this event happens on the player.
+   *
+   * @type {string}
+   */
+  VolumeBar.prototype.playerEvent = 'volumechange';
+  Component.registerComponent('VolumeBar', VolumeBar);
+
+  /**
+   * @file volume-control.js
+   */
+
+  /**
+   * The component for controlling the volume level
+   *
+   * @extends Component
+   */
+  class VolumeControl extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.vertical = options.vertical || false;
+
+      // Pass the vertical option down to the VolumeBar if
+      // the VolumeBar is turned on.
+      if (typeof options.volumeBar === 'undefined' || isPlain(options.volumeBar)) {
+        options.volumeBar = options.volumeBar || {};
+        options.volumeBar.vertical = options.vertical;
+      }
+      super(player, options);
+
+      // hide this control if volume support is missing
+      checkVolumeSupport(this, player);
+      this.throttledHandleMouseMove = throttle(bind_(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+      this.handleMouseUpHandler_ = e => this.handleMouseUp(e);
+      this.on('mousedown', e => this.handleMouseDown(e));
+      this.on('touchstart', e => this.handleMouseDown(e));
+      this.on('mousemove', e => this.handleMouseMove(e));
+
+      // while the slider is active (the mouse has been pressed down and
+      // is dragging) or in focus we do not want to hide the VolumeBar
+      this.on(this.volumeBar, ['focus', 'slideractive'], () => {
+        this.volumeBar.addClass('vjs-slider-active');
+        this.addClass('vjs-slider-active');
+        this.trigger('slideractive');
+      });
+      this.on(this.volumeBar, ['blur', 'sliderinactive'], () => {
+        this.volumeBar.removeClass('vjs-slider-active');
+        this.removeClass('vjs-slider-active');
+        this.trigger('sliderinactive');
+      });
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      let orientationClass = 'vjs-volume-horizontal';
+      if (this.options_.vertical) {
+        orientationClass = 'vjs-volume-vertical';
+      }
+      return super.createEl('div', {
+        className: `vjs-volume-control vjs-control ${orientationClass}`
+      });
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseDown(event) {
+      const doc = this.el_.ownerDocument;
+      this.on(doc, 'mousemove', this.throttledHandleMouseMove);
+      this.on(doc, 'touchmove', this.throttledHandleMouseMove);
+      this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.on(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      const doc = this.el_.ownerDocument;
+      this.off(doc, 'mousemove', this.throttledHandleMouseMove);
+      this.off(doc, 'touchmove', this.throttledHandleMouseMove);
+      this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.off(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseMove(event) {
+      this.volumeBar.handleMouseMove(event);
+    }
+  }
+
+  /**
+   * Default options for the `VolumeControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumeControl.prototype.options_ = {
+    children: ['volumeBar']
+  };
+  Component.registerComponent('VolumeControl', VolumeControl);
+
+  /**
+   * Check if muting volume is supported and if it isn't hide the mute toggle
+   * button.
+   *
+   * @param { import('../../component').default } self
+   *        A reference to the mute toggle button
+   *
+   * @param { import('../../player').default } player
+   *        A reference to the player
+   *
+   * @private
+   */
+  const checkMuteSupport = function (self, player) {
+    // hide mute toggle button if it's not supported by the current tech
+    if (player.tech_ && !player.tech_.featuresMuteControl) {
+      self.addClass('vjs-hidden');
+    }
+    self.on(player, 'loadstart', function () {
+      if (!player.tech_.featuresMuteControl) {
+        self.addClass('vjs-hidden');
+      } else {
+        self.removeClass('vjs-hidden');
+      }
+    });
+  };
+
+  /**
+   * @file mute-toggle.js
+   */
+
+  /**
+   * A button component for muting the audio.
+   *
+   * @extends Button
+   */
+  class MuteToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+
+      // hide this control if volume support is missing
+      checkMuteSupport(this, player);
+      this.on(player, ['loadstart', 'volumechange'], e => this.update(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-mute-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when an `MuteToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const vol = this.player_.volume();
+      const lastVolume = this.player_.lastVolume_();
+      if (vol === 0) {
+        const volumeToSet = lastVolume < 0.1 ? 0.1 : lastVolume;
+        this.player_.volume(volumeToSet);
+        this.player_.muted(false);
+      } else {
+        this.player_.muted(this.player_.muted() ? false : true);
+      }
+    }
+
+    /**
+     * Update the `MuteToggle` button based on the state of `volume` and `muted`
+     * on the player.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#loadstart} event if this function was called
+     *        through an event.
+     *
+     * @listens Player#loadstart
+     * @listens Player#volumechange
+     */
+    update(event) {
+      this.updateIcon_();
+      this.updateControlText_();
+    }
+
+    /**
+     * Update the appearance of the `MuteToggle` icon.
+     *
+     * Possible states (given `level` variable below):
+     * - 0: crossed out
+     * - 1: zero bars of volume
+     * - 2: one bar of volume
+     * - 3: two bars of volume
+     *
+     * @private
+     */
+    updateIcon_() {
+      const vol = this.player_.volume();
+      let level = 3;
+      this.setIcon('volume-high');
+
+      // in iOS when a player is loaded with muted attribute
+      // and volume is changed with a native mute button
+      // we want to make sure muted state is updated
+      if (IS_IOS && this.player_.tech_ && this.player_.tech_.el_) {
+        this.player_.muted(this.player_.tech_.el_.muted);
+      }
+      if (vol === 0 || this.player_.muted()) {
+        this.setIcon('volume-mute');
+        level = 0;
+      } else if (vol < 0.33) {
+        this.setIcon('volume-low');
+        level = 1;
+      } else if (vol < 0.67) {
+        this.setIcon('volume-medium');
+        level = 2;
+      }
+      removeClass(this.el_, [0, 1, 2, 3].reduce((str, i) => str + `${i ? ' ' : ''}vjs-vol-${i}`, ''));
+      addClass(this.el_, `vjs-vol-${level}`);
+    }
+
+    /**
+     * If `muted` has changed on the player, update the control text
+     * (`title` attribute on `vjs-mute-control` element and content of
+     * `vjs-control-text` element).
+     *
+     * @private
+     */
+    updateControlText_() {
+      const soundOff = this.player_.muted() || this.player_.volume() === 0;
+      const text = soundOff ? 'Unmute' : 'Mute';
+      if (this.controlText() !== text) {
+        this.controlText(text);
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `MuteToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  MuteToggle.prototype.controlText_ = 'Mute';
+  Component.registerComponent('MuteToggle', MuteToggle);
+
+  /**
+   * @file volume-control.js
+   */
+
+  /**
+   * A Component to contain the MuteToggle and VolumeControl so that
+   * they can work together.
+   *
+   * @extends Component
+   */
+  class VolumePanel extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      if (typeof options.inline !== 'undefined') {
+        options.inline = options.inline;
+      } else {
+        options.inline = true;
+      }
+
+      // pass the inline option down to the VolumeControl as vertical if
+      // the VolumeControl is on.
+      if (typeof options.volumeControl === 'undefined' || isPlain(options.volumeControl)) {
+        options.volumeControl = options.volumeControl || {};
+        options.volumeControl.vertical = !options.inline;
+      }
+      super(player, options);
+
+      // this handler is used by mouse handler methods below
+      this.handleKeyPressHandler_ = e => this.handleKeyPress(e);
+      this.on(player, ['loadstart'], e => this.volumePanelState_(e));
+      this.on(this.muteToggle, 'keyup', e => this.handleKeyPress(e));
+      this.on(this.volumeControl, 'keyup', e => this.handleVolumeControlKeyUp(e));
+      this.on('keydown', e => this.handleKeyPress(e));
+      this.on('mouseover', e => this.handleMouseOver(e));
+      this.on('mouseout', e => this.handleMouseOut(e));
+
+      // while the slider is active (the mouse has been pressed down and
+      // is dragging) we do not want to hide the VolumeBar
+      this.on(this.volumeControl, ['slideractive'], this.sliderActive_);
+      this.on(this.volumeControl, ['sliderinactive'], this.sliderInactive_);
+    }
+
+    /**
+     * Add vjs-slider-active class to the VolumePanel
+     *
+     * @listens VolumeControl#slideractive
+     * @private
+     */
+    sliderActive_() {
+      this.addClass('vjs-slider-active');
+    }
+
+    /**
+     * Removes vjs-slider-active class to the VolumePanel
+     *
+     * @listens VolumeControl#sliderinactive
+     * @private
+     */
+    sliderInactive_() {
+      this.removeClass('vjs-slider-active');
+    }
+
+    /**
+     * Adds vjs-hidden or vjs-mute-toggle-only to the VolumePanel
+     * depending on MuteToggle and VolumeControl state
+     *
+     * @listens Player#loadstart
+     * @private
+     */
+    volumePanelState_() {
+      // hide volume panel if neither volume control or mute toggle
+      // are displayed
+      if (this.volumeControl.hasClass('vjs-hidden') && this.muteToggle.hasClass('vjs-hidden')) {
+        this.addClass('vjs-hidden');
+      }
+
+      // if only mute toggle is visible we don't want
+      // volume panel expanding when hovered or active
+      if (this.volumeControl.hasClass('vjs-hidden') && !this.muteToggle.hasClass('vjs-hidden')) {
+        this.addClass('vjs-mute-toggle-only');
+      }
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      let orientationClass = 'vjs-volume-panel-horizontal';
+      if (!this.options_.inline) {
+        orientationClass = 'vjs-volume-panel-vertical';
+      }
+      return super.createEl('div', {
+        className: `vjs-volume-panel vjs-control ${orientationClass}`
+      });
+    }
+
+    /**
+     * Dispose of the `volume-panel` and all child components.
+     */
+    dispose() {
+      this.handleMouseOut();
+      super.dispose();
+    }
+
+    /**
+     * Handles `keyup` events on the `VolumeControl`, looking for ESC, which closes
+     * the volume panel and sets focus on `MuteToggle`.
+     *
+     * @param {Event} event
+     *        The `keyup` event that caused this function to be called.
+     *
+     * @listens keyup
+     */
+    handleVolumeControlKeyUp(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        this.muteToggle.focus();
+      }
+    }
+
+    /**
+     * This gets called when a `VolumePanel` gains hover via a `mouseover` event.
+     * Turns on listening for `mouseover` event. When they happen it
+     * calls `this.handleMouseOver`.
+     *
+     * @param {Event} event
+     *        The `mouseover` event that caused this function to be called.
+     *
+     * @listens mouseover
+     */
+    handleMouseOver(event) {
+      this.addClass('vjs-hover');
+      on(document, 'keyup', this.handleKeyPressHandler_);
+    }
+
+    /**
+     * This gets called when a `VolumePanel` gains hover via a `mouseout` event.
+     * Turns on listening for `mouseout` event. When they happen it
+     * calls `this.handleMouseOut`.
+     *
+     * @param {Event} event
+     *        The `mouseout` event that caused this function to be called.
+     *
+     * @listens mouseout
+     */
+    handleMouseOut(event) {
+      this.removeClass('vjs-hover');
+      off(document, 'keyup', this.handleKeyPressHandler_);
+    }
+
+    /**
+     * Handles `keyup` event on the document or `keydown` event on the `VolumePanel`,
+     * looking for ESC, which hides the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        The keypress that triggered this event.
+     *
+     * @listens keydown | keyup
+     */
+    handleKeyPress(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        this.handleMouseOut();
+      }
+    }
+  }
+
+  /**
+   * Default options for the `VolumeControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumePanel.prototype.options_ = {
+    children: ['muteToggle', 'volumeControl']
+  };
+  Component.registerComponent('VolumePanel', VolumePanel);
+
+  /**
+   * Button to skip forward a configurable amount of time
+   * through a video. Renders in the control bar.
+   *
+   * e.g. options: {controlBar: {skipButtons: forward: 5}}
+   *
+   * @extends Button
+   */
+  class SkipForward extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.validOptions = [5, 10, 30];
+      this.skipTime = this.getSkipForwardTime();
+      if (this.skipTime && this.validOptions.includes(this.skipTime)) {
+        this.setIcon(`forward-${this.skipTime}`);
+        this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime.toLocaleString(player.language())]));
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+    getSkipForwardTime() {
+      const playerOptions = this.options_.playerOptions;
+      return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.forward;
+    }
+    buildCSSClass() {
+      return `vjs-skip-forward-${this.getSkipForwardTime()} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * On click, skips forward in the duration/seekable range by a configurable amount of seconds.
+     * If the time left in the duration/seekable range is less than the configured 'skip forward' time,
+     * skips to end of duration/seekable range.
+     *
+     * Handle a click on a `SkipForward` button
+     *
+     * @param {EventTarget~Event} event
+     *        The `click` event that caused this function
+     *        to be called
+     */
+    handleClick(event) {
+      if (isNaN(this.player_.duration())) {
+        return;
+      }
+      const currentVideoTime = this.player_.currentTime();
+      const liveTracker = this.player_.liveTracker;
+      const duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
+      let newTime;
+      if (currentVideoTime + this.skipTime <= duration) {
+        newTime = currentVideoTime + this.skipTime;
+      } else {
+        newTime = duration;
+      }
+      this.player_.currentTime(newTime);
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime]));
+    }
+  }
+  SkipForward.prototype.controlText_ = 'Skip Forward';
+  Component.registerComponent('SkipForward', SkipForward);
+
+  /**
+   * Button to skip backward a configurable amount of time
+   * through a video. Renders in the control bar.
+   *
+   *  * e.g. options: {controlBar: {skipButtons: backward: 5}}
+   *
+   * @extends Button
+   */
+  class SkipBackward extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.validOptions = [5, 10, 30];
+      this.skipTime = this.getSkipBackwardTime();
+      if (this.skipTime && this.validOptions.includes(this.skipTime)) {
+        this.setIcon(`replay-${this.skipTime}`);
+        this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime.toLocaleString(player.language())]));
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+    getSkipBackwardTime() {
+      const playerOptions = this.options_.playerOptions;
+      return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.backward;
+    }
+    buildCSSClass() {
+      return `vjs-skip-backward-${this.getSkipBackwardTime()} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * On click, skips backward in the video by a configurable amount of seconds.
+     * If the current time in the video is less than the configured 'skip backward' time,
+     * skips to beginning of video or seekable range.
+     *
+     * Handle a click on a `SkipBackward` button
+     *
+     * @param {EventTarget~Event} event
+     *        The `click` event that caused this function
+     *        to be called
+     */
+    handleClick(event) {
+      const currentVideoTime = this.player_.currentTime();
+      const liveTracker = this.player_.liveTracker;
+      const seekableStart = liveTracker && liveTracker.isLive() && liveTracker.seekableStart();
+      let newTime;
+      if (seekableStart && currentVideoTime - this.skipTime <= seekableStart) {
+        newTime = seekableStart;
+      } else if (currentVideoTime >= this.skipTime) {
+        newTime = currentVideoTime - this.skipTime;
+      } else {
+        newTime = 0;
+      }
+      this.player_.currentTime(newTime);
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime]));
+    }
+  }
+  SkipBackward.prototype.controlText_ = 'Skip Backward';
+  Component.registerComponent('SkipBackward', SkipBackward);
+
+  /**
+   * @file menu.js
+   */
+
+  /**
+   * The Menu component is used to build popup menus, including subtitle and
+   * captions selection menus.
+   *
+   * @extends Component
+   */
+  class Menu extends Component {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        the player that this component should attach to
+     *
+     * @param {Object} [options]
+     *        Object of option names and values
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      if (options) {
+        this.menuButton_ = options.menuButton;
+      }
+      this.focusedChild_ = -1;
+      this.on('keydown', e => this.handleKeyDown(e));
+
+      // All the menu item instances share the same blur handler provided by the menu container.
+      this.boundHandleBlur_ = e => this.handleBlur(e);
+      this.boundHandleTapClick_ = e => this.handleTapClick(e);
+    }
+
+    /**
+     * Add event listeners to the {@link MenuItem}.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem` to add listeners to.
+     *
+     */
+    addEventListenerForItem(component) {
+      if (!(component instanceof Component)) {
+        return;
+      }
+      this.on(component, 'blur', this.boundHandleBlur_);
+      this.on(component, ['tap', 'click'], this.boundHandleTapClick_);
+    }
+
+    /**
+     * Remove event listeners from the {@link MenuItem}.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem` to remove listeners.
+     *
+     */
+    removeEventListenerForItem(component) {
+      if (!(component instanceof Component)) {
+        return;
+      }
+      this.off(component, 'blur', this.boundHandleBlur_);
+      this.off(component, ['tap', 'click'], this.boundHandleTapClick_);
+    }
+
+    /**
+     * This method will be called indirectly when the component has been added
+     * before the component adds to the new menu instance by `addItem`.
+     * In this case, the original menu instance will remove the component
+     * by calling `removeChild`.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem`
+     */
+    removeChild(component) {
+      if (typeof component === 'string') {
+        component = this.getChild(component);
+      }
+      this.removeEventListenerForItem(component);
+      super.removeChild(component);
+    }
+
+    /**
+     * Add a {@link MenuItem} to the menu.
+     *
+     * @param {Object|string} component
+     *        The name or instance of the `MenuItem` to add.
+     *
+     */
+    addItem(component) {
+      const childComponent = this.addChild(component);
+      if (childComponent) {
+        this.addEventListenerForItem(childComponent);
+      }
+    }
+
+    /**
+     * Create the `Menu`s DOM element.
+     *
+     * @return {Element}
+     *         the element that was created
+     */
+    createEl() {
+      const contentElType = this.options_.contentElType || 'ul';
+      this.contentEl_ = createEl(contentElType, {
+        className: 'vjs-menu-content'
+      });
+      this.contentEl_.setAttribute('role', 'menu');
+      const el = super.createEl('div', {
+        append: this.contentEl_,
+        className: 'vjs-menu'
+      });
+      el.appendChild(this.contentEl_);
+
+      // Prevent clicks from bubbling up. Needed for Menu Buttons,
+      // where a click on the parent is significant
+      on(el, 'click', function (event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      });
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.boundHandleBlur_ = null;
+      this.boundHandleTapClick_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Called when a `MenuItem` loses focus.
+     *
+     * @param {Event} event
+     *        The `blur` event that caused this function to be called.
+     *
+     * @listens blur
+     */
+    handleBlur(event) {
+      const relatedTarget = event.relatedTarget || document.activeElement;
+
+      // Close menu popup when a user clicks outside the menu
+      if (!this.children().some(element => {
+        return element.el() === relatedTarget;
+      })) {
+        const btn = this.menuButton_;
+        if (btn && btn.buttonPressed_ && relatedTarget !== btn.el().firstChild) {
+          btn.unpressButton();
+        }
+      }
+    }
+
+    /**
+     * Called when a `MenuItem` gets clicked or tapped.
+     *
+     * @param {Event} event
+     *        The `click` or `tap` event that caused this function to be called.
+     *
+     * @listens click,tap
+     */
+    handleTapClick(event) {
+      // Unpress the associated MenuButton, and move focus back to it
+      if (this.menuButton_) {
+        this.menuButton_.unpressButton();
+        const childComponents = this.children();
+        if (!Array.isArray(childComponents)) {
+          return;
+        }
+        const foundComponent = childComponents.filter(component => component.el() === event.target)[0];
+        if (!foundComponent) {
+          return;
+        }
+
+        // don't focus menu button if item is a caption settings item
+        // because focus will move elsewhere
+        if (foundComponent.name() !== 'CaptionSettingsMenuItem') {
+          this.menuButton_.focus();
+        }
+      }
+    }
+
+    /**
+     * Handle a `keydown` event on this menu. This listener is added in the constructor.
+     *
+     * @param {KeyboardEvent} event
+     *        A `keydown` event that happened on the menu.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Left and Down Arrows
+      if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepForward();
+
+        // Up and Right Arrows
+      } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepBack();
+      }
+    }
+
+    /**
+     * Move to next (lower) menu item for keyboard users.
+     */
+    stepForward() {
+      let stepChild = 0;
+      if (this.focusedChild_ !== undefined) {
+        stepChild = this.focusedChild_ + 1;
+      }
+      this.focus(stepChild);
+    }
+
+    /**
+     * Move to previous (higher) menu item for keyboard users.
+     */
+    stepBack() {
+      let stepChild = 0;
+      if (this.focusedChild_ !== undefined) {
+        stepChild = this.focusedChild_ - 1;
+      }
+      this.focus(stepChild);
+    }
+
+    /**
+     * Set focus on a {@link MenuItem} in the `Menu`.
+     *
+     * @param {Object|string} [item=0]
+     *        Index of child item set focus on.
+     */
+    focus(item = 0) {
+      const children = this.children().slice();
+      const haveTitle = children.length && children[0].hasClass('vjs-menu-title');
+      if (haveTitle) {
+        children.shift();
+      }
+      if (children.length > 0) {
+        if (item < 0) {
+          item = 0;
+        } else if (item >= children.length) {
+          item = children.length - 1;
+        }
+        this.focusedChild_ = item;
+        children[item].el_.focus();
+      }
+    }
+  }
+  Component.registerComponent('Menu', Menu);
+
+  /**
+   * @file menu-button.js
+   */
+
+  /**
+   * A `MenuButton` class for any popup {@link Menu}.
+   *
+   * @extends Component
+   */
+  class MenuButton extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+      this.menuButton_ = new Button(player, options);
+      this.menuButton_.controlText(this.controlText_);
+      this.menuButton_.el_.setAttribute('aria-haspopup', 'true');
+
+      // Add buildCSSClass values to the button, not the wrapper
+      const buttonClass = Button.prototype.buildCSSClass();
+      this.menuButton_.el_.className = this.buildCSSClass() + ' ' + buttonClass;
+      this.menuButton_.removeClass('vjs-control');
+      this.addChild(this.menuButton_);
+      this.update();
+      this.enabled_ = true;
+      const handleClick = e => this.handleClick(e);
+      this.handleMenuKeyUp_ = e => this.handleMenuKeyUp(e);
+      this.on(this.menuButton_, 'tap', handleClick);
+      this.on(this.menuButton_, 'click', handleClick);
+      this.on(this.menuButton_, 'keydown', e => this.handleKeyDown(e));
+      this.on(this.menuButton_, 'mouseenter', () => {
+        this.addClass('vjs-hover');
+        this.menu.show();
+        on(document, 'keyup', this.handleMenuKeyUp_);
+      });
+      this.on('mouseleave', e => this.handleMouseLeave(e));
+      this.on('keydown', e => this.handleSubmenuKeyDown(e));
+    }
+
+    /**
+     * Update the menu based on the current state of its items.
+     */
+    update() {
+      const menu = this.createMenu();
+      if (this.menu) {
+        this.menu.dispose();
+        this.removeChild(this.menu);
+      }
+      this.menu = menu;
+      this.addChild(menu);
+
+      /**
+       * Track the state of the menu button
+       *
+       * @type {Boolean}
+       * @private
+       */
+      this.buttonPressed_ = false;
+      this.menuButton_.el_.setAttribute('aria-expanded', 'false');
+      if (this.items && this.items.length <= this.hideThreshold_) {
+        this.hide();
+        this.menu.contentEl_.removeAttribute('role');
+      } else {
+        this.show();
+        this.menu.contentEl_.setAttribute('role', 'menu');
+      }
+    }
+
+    /**
+     * Create the menu and add all items to it.
+     *
+     * @return {Menu}
+     *         The constructed menu
+     */
+    createMenu() {
+      const menu = new Menu(this.player_, {
+        menuButton: this
+      });
+
+      /**
+       * Hide the menu if the number of items is less than or equal to this threshold. This defaults
+       * to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list
+       * it here because every time we run `createMenu` we need to reset the value.
+       *
+       * @protected
+       * @type {Number}
+       */
+      this.hideThreshold_ = 0;
+
+      // Add a title list item to the top
+      if (this.options_.title) {
+        const titleEl = createEl('li', {
+          className: 'vjs-menu-title',
+          textContent: toTitleCase(this.options_.title),
+          tabIndex: -1
+        });
+        const titleComponent = new Component(this.player_, {
+          el: titleEl
+        });
+        menu.addItem(titleComponent);
+      }
+      this.items = this.createItems();
+      if (this.items) {
+        // Add menu items to the menu
+        for (let i = 0; i < this.items.length; i++) {
+          menu.addItem(this.items[i]);
+        }
+      }
+      return menu;
+    }
+
+    /**
+     * Create the list of menu items. Specific to each subclass.
+     *
+     * @abstract
+     */
+    createItems() {}
+
+    /**
+     * Create the `MenuButtons`s DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildWrapperCSSClass()
+      }, {});
+    }
+
+    /**
+     * Overwrites the `setIcon` method from `Component`.
+     * In this case, we want the icon to be appended to the menuButton.
+     *
+     * @param {string} name
+     *         The icon name to be added.
+     */
+    setIcon(name) {
+      super.setIcon(name, this.menuButton_.el_);
+    }
+
+    /**
+     * Allow sub components to stack CSS class names for the wrapper element
+     *
+     * @return {string}
+     *         The constructed wrapper DOM `className`
+     */
+    buildWrapperCSSClass() {
+      let menuButtonClass = 'vjs-menu-button';
+
+      // If the inline option is passed, we want to use different styles altogether.
+      if (this.options_.inline === true) {
+        menuButtonClass += '-inline';
+      } else {
+        menuButtonClass += '-popup';
+      }
+
+      // TODO: Fix the CSS so that this isn't necessary
+      const buttonClass = Button.prototype.buildCSSClass();
+      return `vjs-menu-button ${menuButtonClass} ${buttonClass} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      let menuButtonClass = 'vjs-menu-button';
+
+      // If the inline option is passed, we want to use different styles altogether.
+      if (this.options_.inline === true) {
+        menuButtonClass += '-inline';
+      } else {
+        menuButtonClass += '-popup';
+      }
+      return `vjs-menu-button ${menuButtonClass} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Get or set the localized control text that will be used for accessibility.
+     *
+     * > NOTE: This will come from the internal `menuButton_` element.
+     *
+     * @param {string} [text]
+     *        Control text for element.
+     *
+     * @param {Element} [el=this.menuButton_.el()]
+     *        Element to set the title on.
+     *
+     * @return {string}
+     *         - The control text when getting
+     */
+    controlText(text, el = this.menuButton_.el()) {
+      return this.menuButton_.controlText(text, el);
+    }
+
+    /**
+     * Dispose of the `menu-button` and all child components.
+     */
+    dispose() {
+      this.handleMouseLeave();
+      super.dispose();
+    }
+
+    /**
+     * Handle a click on a `MenuButton`.
+     * See {@link ClickableComponent#handleClick} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (this.buttonPressed_) {
+        this.unpressButton();
+      } else {
+        this.pressButton();
+      }
+    }
+
+    /**
+     * Handle `mouseleave` for `MenuButton`.
+     *
+     * @param {Event} event
+     *        The `mouseleave` event that caused this function to be called.
+     *
+     * @listens mouseleave
+     */
+    handleMouseLeave(event) {
+      this.removeClass('vjs-hover');
+      off(document, 'keyup', this.handleMenuKeyUp_);
+    }
+
+    /**
+     * Set the focus to the actual button, not to this element
+     */
+    focus() {
+      this.menuButton_.focus();
+    }
+
+    /**
+     * Remove the focus from the actual button, not this element
+     */
+    blur() {
+      this.menuButton_.blur();
+    }
+
+    /**
+     * Handle tab, escape, down arrow, and up arrow keys for `MenuButton`. See
+     * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Escape or Tab unpress the 'button'
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        if (this.buttonPressed_) {
+          this.unpressButton();
+        }
+
+        // Don't preventDefault for Tab key - we still want to lose focus
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.preventDefault();
+          // Set focus back to the menu button's button
+          this.menuButton_.focus();
+        }
+        // Up Arrow or Down Arrow also 'press' the button to open the menu
+      } else if (keycode.isEventKey(event, 'Up') || keycode.isEventKey(event, 'Down')) {
+        if (!this.buttonPressed_) {
+          event.preventDefault();
+          this.pressButton();
+        }
+      }
+    }
+
+    /**
+     * Handle a `keyup` event on a `MenuButton`. The listener for this is added in
+     * the constructor.
+     *
+     * @param {Event} event
+     *        Key press event
+     *
+     * @listens keyup
+     */
+    handleMenuKeyUp(event) {
+      // Escape hides popup menu
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        this.removeClass('vjs-hover');
+      }
+    }
+
+    /**
+     * This method name now delegates to `handleSubmenuKeyDown`. This means
+     * anyone calling `handleSubmenuKeyPress` will not see their method calls
+     * stop working.
+     *
+     * @param {Event} event
+     *        The event that caused this function to be called.
+     */
+    handleSubmenuKeyPress(event) {
+      this.handleSubmenuKeyDown(event);
+    }
+
+    /**
+     * Handle a `keydown` event on a sub-menu. The listener for this is added in
+     * the constructor.
+     *
+     * @param {Event} event
+     *        Key press event
+     *
+     * @listens keydown
+     */
+    handleSubmenuKeyDown(event) {
+      // Escape or Tab unpress the 'button'
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        if (this.buttonPressed_) {
+          this.unpressButton();
+        }
+        // Don't preventDefault for Tab key - we still want to lose focus
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.preventDefault();
+          // Set focus back to the menu button's button
+          this.menuButton_.focus();
+        }
+      }
+    }
+
+    /**
+     * Put the current `MenuButton` into a pressed state.
+     */
+    pressButton() {
+      if (this.enabled_) {
+        this.buttonPressed_ = true;
+        this.menu.show();
+        this.menu.lockShowing();
+        this.menuButton_.el_.setAttribute('aria-expanded', 'true');
+
+        // set the focus into the submenu, except on iOS where it is resulting in
+        // undesired scrolling behavior when the player is in an iframe
+        if (IS_IOS && isInFrame()) {
+          // Return early so that the menu isn't focused
+          return;
+        }
+        this.menu.focus();
+      }
+    }
+
+    /**
+     * Take the current `MenuButton` out of a pressed state.
+     */
+    unpressButton() {
+      if (this.enabled_) {
+        this.buttonPressed_ = false;
+        this.menu.unlockShowing();
+        this.menu.hide();
+        this.menuButton_.el_.setAttribute('aria-expanded', 'false');
+      }
+    }
+
+    /**
+     * Disable the `MenuButton`. Don't allow it to be clicked.
+     */
+    disable() {
+      this.unpressButton();
+      this.enabled_ = false;
+      this.addClass('vjs-disabled');
+      this.menuButton_.disable();
+    }
+
+    /**
+     * Enable the `MenuButton`. Allow it to be clicked.
+     */
+    enable() {
+      this.enabled_ = true;
+      this.removeClass('vjs-disabled');
+      this.menuButton_.enable();
+    }
+  }
+  Component.registerComponent('MenuButton', MenuButton);
+
+  /**
+   * @file track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific  track types (e.g. subtitles).
+   *
+   * @extends MenuButton
+   */
+  class TrackButton extends MenuButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const tracks = options.tracks;
+      super(player, options);
+      if (this.items.length <= 1) {
+        this.hide();
+      }
+      if (!tracks) {
+        return;
+      }
+      const updateHandler = bind_(this, this.update);
+      tracks.addEventListener('removetrack', updateHandler);
+      tracks.addEventListener('addtrack', updateHandler);
+      tracks.addEventListener('labelchange', updateHandler);
+      this.player_.on('ready', updateHandler);
+      this.player_.on('dispose', function () {
+        tracks.removeEventListener('removetrack', updateHandler);
+        tracks.removeEventListener('addtrack', updateHandler);
+        tracks.removeEventListener('labelchange', updateHandler);
+      });
+    }
+  }
+  Component.registerComponent('TrackButton', TrackButton);
+
+  /**
+   * @file menu-keys.js
+   */
+
+  /**
+    * All keys used for operation of a menu (`MenuButton`, `Menu`, and `MenuItem`)
+    * Note that 'Enter' and 'Space' are not included here (otherwise they would
+    * prevent the `MenuButton` and `MenuItem` from being keyboard-clickable)
+   *
+    * @typedef MenuKeys
+    * @array
+    */
+  const MenuKeys = ['Tab', 'Esc', 'Up', 'Down', 'Right', 'Left'];
+
+  /**
+   * @file menu-item.js
+   */
+
+  /**
+   * The component for a menu item. `<li>`
+   *
+   * @extends ClickableComponent
+   */
+  class MenuItem extends ClickableComponent {
+    /**
+     * Creates an instance of the this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.selectable = options.selectable;
+      this.isSelected_ = options.selected || false;
+      this.multiSelectable = options.multiSelectable;
+      this.selected(this.isSelected_);
+      if (this.selectable) {
+        if (this.multiSelectable) {
+          this.el_.setAttribute('role', 'menuitemcheckbox');
+        } else {
+          this.el_.setAttribute('role', 'menuitemradio');
+        }
+      } else {
+        this.el_.setAttribute('role', 'menuitem');
+      }
+    }
+
+    /**
+     * Create the `MenuItem's DOM element
+     *
+     * @param {string} [type=li]
+     *        Element's node type, not actually used, always set to `li`.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element
+     *
+     * @param {Object} [attrs={}]
+     *        An object of attributes that should be set on the element
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(type, props, attrs) {
+      // The control is textual, not just an icon
+      this.nonIconControl = true;
+      const el = super.createEl('li', Object.assign({
+        className: 'vjs-menu-item',
+        tabIndex: -1
+      }, props), attrs);
+
+      // swap icon with menu item text.
+      const menuItemEl = createEl('span', {
+        className: 'vjs-menu-item-text',
+        textContent: this.localize(this.options_.label)
+      });
+
+      // If using SVG icons, the element with vjs-icon-placeholder will be added separately.
+      if (this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(menuItemEl);
+      } else {
+        el.replaceChild(menuItemEl, el.querySelector('.vjs-icon-placeholder'));
+      }
+      return el;
+    }
+
+    /**
+     * Ignore keys which are used by the menu, but pass any other ones up. See
+     * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      if (!MenuKeys.some(key => keycode.isEventKey(event, key))) {
+        // Pass keydown handling up for unused keys
+        super.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Any click on a `MenuItem` puts it into the selected state.
+     * See {@link ClickableComponent#handleClick} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      this.selected(true);
+    }
+
+    /**
+     * Set the state for this menu item as selected or not.
+     *
+     * @param {boolean} selected
+     *        if the menu item is selected or not
+     */
+    selected(selected) {
+      if (this.selectable) {
+        if (selected) {
+          this.addClass('vjs-selected');
+          this.el_.setAttribute('aria-checked', 'true');
+          // aria-checked isn't fully supported by browsers/screen readers,
+          // so indicate selected state to screen reader in the control text.
+          this.controlText(', selected');
+          this.isSelected_ = true;
+        } else {
+          this.removeClass('vjs-selected');
+          this.el_.setAttribute('aria-checked', 'false');
+          // Indicate un-selected state to screen reader
+          this.controlText('');
+          this.isSelected_ = false;
+        }
+      }
+    }
+  }
+  Component.registerComponent('MenuItem', MenuItem);
+
+  /**
+   * @file text-track-menu-item.js
+   */
+
+  /**
+   * The specific menu item type for selecting a language within a text track kind
+   *
+   * @extends MenuItem
+   */
+  class TextTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const tracks = player.textTracks();
+
+      // Modify options for parent MenuItem class's init.
+      options.label = track.label || track.language || 'Unknown';
+      options.selected = track.mode === 'showing';
+      super(player, options);
+      this.track = track;
+      // Determine the relevant kind(s) of tracks for this component and filter
+      // out empty kinds.
+      this.kinds = (options.kinds || [options.kind || this.track.kind]).filter(Boolean);
+      const changeHandler = (...args) => {
+        this.handleTracksChange.apply(this, args);
+      };
+      const selectedLanguageChangeHandler = (...args) => {
+        this.handleSelectedLanguageChange.apply(this, args);
+      };
+      player.on(['loadstart', 'texttrackchange'], changeHandler);
+      tracks.addEventListener('change', changeHandler);
+      tracks.addEventListener('selectedlanguagechange', selectedLanguageChangeHandler);
+      this.on('dispose', function () {
+        player.off(['loadstart', 'texttrackchange'], changeHandler);
+        tracks.removeEventListener('change', changeHandler);
+        tracks.removeEventListener('selectedlanguagechange', selectedLanguageChangeHandler);
+      });
+
+      // iOS7 doesn't dispatch change events to TextTrackLists when an
+      // associated track's mode changes. Without something like
+      // Object.observe() (also not present on iOS7), it's not
+      // possible to detect changes to the mode attribute and polyfill
+      // the change event. As a poor substitute, we manually dispatch
+      // change events whenever the controls modify the mode.
+      if (tracks.onchange === undefined) {
+        let event;
+        this.on(['tap', 'click'], function () {
+          if (typeof window.Event !== 'object') {
+            // Android 2.3 throws an Illegal Constructor error for window.Event
+            try {
+              event = new window.Event('change');
+            } catch (err) {
+              // continue regardless of error
+            }
+          }
+          if (!event) {
+            event = document.createEvent('Event');
+            event.initEvent('change', true, true);
+          }
+          tracks.dispatchEvent(event);
+        });
+      }
+
+      // set the default state based on current tracks
+      this.handleTracksChange();
+    }
+
+    /**
+     * This gets called when an `TextTrackMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const referenceTrack = this.track;
+      const tracks = this.player_.textTracks();
+      super.handleClick(event);
+      if (!tracks) {
+        return;
+      }
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+
+        // If the track from the text tracks list is not of the right kind,
+        // skip it. We do not want to affect tracks of incompatible kind(s).
+        if (this.kinds.indexOf(track.kind) === -1) {
+          continue;
+        }
+
+        // If this text track is the component's track and it is not showing,
+        // set it to showing.
+        if (track === referenceTrack) {
+          if (track.mode !== 'showing') {
+            track.mode = 'showing';
+          }
+
+          // If this text track is not the component's track and it is not
+          // disabled, set it to disabled.
+        } else if (track.mode !== 'disabled') {
+          track.mode = 'disabled';
+        }
+      }
+    }
+
+    /**
+     * Handle text track list change
+     *
+     * @param {Event} event
+     *        The `change` event that caused this function to be called.
+     *
+     * @listens TextTrackList#change
+     */
+    handleTracksChange(event) {
+      const shouldBeSelected = this.track.mode === 'showing';
+
+      // Prevent redundant selected() calls because they may cause
+      // screen readers to read the appended control text unnecessarily
+      if (shouldBeSelected !== this.isSelected_) {
+        this.selected(shouldBeSelected);
+      }
+    }
+    handleSelectedLanguageChange(event) {
+      if (this.track.mode === 'showing') {
+        const selectedLanguage = this.player_.cache_.selectedLanguage;
+
+        // Don't replace the kind of track across the same language
+        if (selectedLanguage && selectedLanguage.enabled && selectedLanguage.language === this.track.language && selectedLanguage.kind !== this.track.kind) {
+          return;
+        }
+        this.player_.cache_.selectedLanguage = {
+          enabled: true,
+          language: this.track.language,
+          kind: this.track.kind
+        };
+      }
+    }
+    dispose() {
+      // remove reference to track object on dispose
+      this.track = null;
+      super.dispose();
+    }
+  }
+  Component.registerComponent('TextTrackMenuItem', TextTrackMenuItem);
+
+  /**
+   * @file off-text-track-menu-item.js
+   */
+
+  /**
+   * A special menu item for turning off a specific type of text track
+   *
+   * @extends TextTrackMenuItem
+   */
+  class OffTextTrackMenuItem extends TextTrackMenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      // Create pseudo track info
+      // Requires options['kind']
+      options.track = {
+        player,
+        // it is no longer necessary to store `kind` or `kinds` on the track itself
+        // since they are now stored in the `kinds` property of all instances of
+        // TextTrackMenuItem, but this will remain for backwards compatibility
+        kind: options.kind,
+        kinds: options.kinds,
+        default: false,
+        mode: 'disabled'
+      };
+      if (!options.kinds) {
+        options.kinds = [options.kind];
+      }
+      if (options.label) {
+        options.track.label = options.label;
+      } else {
+        options.track.label = options.kinds.join(' and ') + ' off';
+      }
+
+      // MenuItem is selectable
+      options.selectable = true;
+      // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+      options.multiSelectable = false;
+      super(player, options);
+    }
+
+    /**
+     * Handle text track change
+     *
+     * @param {Event} event
+     *        The event that caused this function to run
+     */
+    handleTracksChange(event) {
+      const tracks = this.player().textTracks();
+      let shouldBeSelected = true;
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (this.options_.kinds.indexOf(track.kind) > -1 && track.mode === 'showing') {
+          shouldBeSelected = false;
+          break;
+        }
+      }
+
+      // Prevent redundant selected() calls because they may cause
+      // screen readers to read the appended control text unnecessarily
+      if (shouldBeSelected !== this.isSelected_) {
+        this.selected(shouldBeSelected);
+      }
+    }
+    handleSelectedLanguageChange(event) {
+      const tracks = this.player().textTracks();
+      let allHidden = true;
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (['captions', 'descriptions', 'subtitles'].indexOf(track.kind) > -1 && track.mode === 'showing') {
+          allHidden = false;
+          break;
+        }
+      }
+      if (allHidden) {
+        this.player_.cache_.selectedLanguage = {
+          enabled: false
+        };
+      }
+    }
+
+    /**
+     * Update control text and label on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.label);
+      super.handleLanguagechange();
+    }
+  }
+  Component.registerComponent('OffTextTrackMenuItem', OffTextTrackMenuItem);
+
+  /**
+   * @file text-track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific text track types (e.g. subtitles)
+   *
+   * @extends MenuButton
+   */
+  class TextTrackButton extends TrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.tracks = player.textTracks();
+      super(player, options);
+    }
+
+    /**
+     * Create a menu item for each text track
+     *
+     * @param {TextTrackMenuItem[]} [items=[]]
+     *        Existing array of items to use during creation
+     *
+     * @return {TextTrackMenuItem[]}
+     *         Array of menu items that were created
+     */
+    createItems(items = [], TrackMenuItem = TextTrackMenuItem) {
+      // Label is an override for the [track] off label
+      // USed to localise captions/subtitles
+      let label;
+      if (this.label_) {
+        label = `${this.label_} off`;
+      }
+      // Add an OFF menu item to turn all tracks off
+      items.push(new OffTextTrackMenuItem(this.player_, {
+        kinds: this.kinds_,
+        kind: this.kind_,
+        label
+      }));
+      this.hideThreshold_ += 1;
+      const tracks = this.player_.textTracks();
+      if (!Array.isArray(this.kinds_)) {
+        this.kinds_ = [this.kind_];
+      }
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+
+        // only add tracks that are of an appropriate kind and have a label
+        if (this.kinds_.indexOf(track.kind) > -1) {
+          const item = new TrackMenuItem(this.player_, {
+            track,
+            kinds: this.kinds_,
+            kind: this.kind_,
+            // MenuItem is selectable
+            selectable: true,
+            // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+            multiSelectable: false
+          });
+          item.addClass(`vjs-${track.kind}-menu-item`);
+          items.push(item);
+        }
+      }
+      return items;
+    }
+  }
+  Component.registerComponent('TextTrackButton', TextTrackButton);
+
+  /**
+   * @file chapters-track-menu-item.js
+   */
+
+  /**
+   * The chapter track menu item
+   *
+   * @extends MenuItem
+   */
+  class ChaptersTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const cue = options.cue;
+      const currentTime = player.currentTime();
+
+      // Modify options for parent MenuItem class's init.
+      options.selectable = true;
+      options.multiSelectable = false;
+      options.label = cue.text;
+      options.selected = cue.startTime <= currentTime && currentTime < cue.endTime;
+      super(player, options);
+      this.track = track;
+      this.cue = cue;
+    }
+
+    /**
+     * This gets called when an `ChaptersTrackMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick();
+      this.player_.currentTime(this.cue.startTime);
+    }
+  }
+  Component.registerComponent('ChaptersTrackMenuItem', ChaptersTrackMenuItem);
+
+  /**
+   * @file chapters-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting chapters
+   * Chapters act much differently than other text tracks
+   * Cues are navigation vs. other tracks of alternative languages
+   *
+   * @extends TextTrackButton
+   */
+  class ChaptersButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this function is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('chapters');
+      this.selectCurrentItem_ = () => {
+        this.items.forEach(item => {
+          item.selected(this.track_.activeCues[0] === item.cue);
+        });
+      };
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-chapters-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-chapters-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Update the menu based on the current state of its items.
+     *
+     * @param {Event} [event]
+     *        An event that triggered this function to run.
+     *
+     * @listens TextTrackList#addtrack
+     * @listens TextTrackList#removetrack
+     * @listens TextTrackList#change
+     */
+    update(event) {
+      if (event && event.track && event.track.kind !== 'chapters') {
+        return;
+      }
+      const track = this.findChaptersTrack();
+      if (track !== this.track_) {
+        this.setTrack(track);
+        super.update();
+      } else if (!this.items || track && track.cues && track.cues.length !== this.items.length) {
+        // Update the menu initially or if the number of cues has changed since set
+        super.update();
+      }
+    }
+
+    /**
+     * Set the currently selected track for the chapters button.
+     *
+     * @param {TextTrack} track
+     *        The new track to select. Nothing will change if this is the currently selected
+     *        track.
+     */
+    setTrack(track) {
+      if (this.track_ === track) {
+        return;
+      }
+      if (!this.updateHandler_) {
+        this.updateHandler_ = this.update.bind(this);
+      }
+
+      // here this.track_ refers to the old track instance
+      if (this.track_) {
+        const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
+        if (remoteTextTrackEl) {
+          remoteTextTrackEl.removeEventListener('load', this.updateHandler_);
+        }
+        this.track_.removeEventListener('cuechange', this.selectCurrentItem_);
+        this.track_ = null;
+      }
+      this.track_ = track;
+
+      // here this.track_ refers to the new track instance
+      if (this.track_) {
+        this.track_.mode = 'hidden';
+        const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
+        if (remoteTextTrackEl) {
+          remoteTextTrackEl.addEventListener('load', this.updateHandler_);
+        }
+        this.track_.addEventListener('cuechange', this.selectCurrentItem_);
+      }
+    }
+
+    /**
+     * Find the track object that is currently in use by this ChaptersButton
+     *
+     * @return {TextTrack|undefined}
+     *         The current track or undefined if none was found.
+     */
+    findChaptersTrack() {
+      const tracks = this.player_.textTracks() || [];
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        // We will always choose the last track as our chaptersTrack
+        const track = tracks[i];
+        if (track.kind === this.kind_) {
+          return track;
+        }
+      }
+    }
+
+    /**
+     * Get the caption for the ChaptersButton based on the track label. This will also
+     * use the current tracks localized kind as a fallback if a label does not exist.
+     *
+     * @return {string}
+     *         The tracks current label or the localized track kind.
+     */
+    getMenuCaption() {
+      if (this.track_ && this.track_.label) {
+        return this.track_.label;
+      }
+      return this.localize(toTitleCase(this.kind_));
+    }
+
+    /**
+     * Create menu from chapter track
+     *
+     * @return { import('../../menu/menu').default }
+     *         New menu for the chapter buttons
+     */
+    createMenu() {
+      this.options_.title = this.getMenuCaption();
+      return super.createMenu();
+    }
+
+    /**
+     * Create a menu item for each text track
+     *
+     * @return  { import('./text-track-menu-item').default[] }
+     *         Array of menu items
+     */
+    createItems() {
+      const items = [];
+      if (!this.track_) {
+        return items;
+      }
+      const cues = this.track_.cues;
+      if (!cues) {
+        return items;
+      }
+      for (let i = 0, l = cues.length; i < l; i++) {
+        const cue = cues[i];
+        const mi = new ChaptersTrackMenuItem(this.player_, {
+          track: this.track_,
+          cue
+        });
+        items.push(mi);
+      }
+      return items;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  ChaptersButton.prototype.kind_ = 'chapters';
+
+  /**
+   * The text that should display over the `ChaptersButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  ChaptersButton.prototype.controlText_ = 'Chapters';
+  Component.registerComponent('ChaptersButton', ChaptersButton);
+
+  /**
+   * @file descriptions-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting descriptions
+   *
+   * @extends TextTrackButton
+   */
+  class DescriptionsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('audio-description');
+      const tracks = player.textTracks();
+      const changeHandler = bind_(this, this.handleTracksChange);
+      tracks.addEventListener('change', changeHandler);
+      this.on('dispose', function () {
+        tracks.removeEventListener('change', changeHandler);
+      });
+    }
+
+    /**
+     * Handle text track change
+     *
+     * @param {Event} event
+     *        The event that caused this function to run
+     *
+     * @listens TextTrackList#change
+     */
+    handleTracksChange(event) {
+      const tracks = this.player().textTracks();
+      let disabled = false;
+
+      // Check whether a track of a different kind is showing
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (track.kind !== this.kind_ && track.mode === 'showing') {
+          disabled = true;
+          break;
+        }
+      }
+
+      // If another track is showing, disable this menu button
+      if (disabled) {
+        this.disable();
+      } else {
+        this.enable();
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-descriptions-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-descriptions-button ${super.buildWrapperCSSClass()}`;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  DescriptionsButton.prototype.kind_ = 'descriptions';
+
+  /**
+   * The text that should display over the `DescriptionsButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  DescriptionsButton.prototype.controlText_ = 'Descriptions';
+  Component.registerComponent('DescriptionsButton', DescriptionsButton);
+
+  /**
+   * @file subtitles-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting subtitles
+   *
+   * @extends TextTrackButton
+   */
+  class SubtitlesButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('subtitles');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-subtitles-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-subtitles-button ${super.buildWrapperCSSClass()}`;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  SubtitlesButton.prototype.kind_ = 'subtitles';
+
+  /**
+   * The text that should display over the `SubtitlesButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  SubtitlesButton.prototype.controlText_ = 'Subtitles';
+  Component.registerComponent('SubtitlesButton', SubtitlesButton);
+
+  /**
+   * @file caption-settings-menu-item.js
+   */
+
+  /**
+   * The menu item for caption track settings menu
+   *
+   * @extends TextTrackMenuItem
+   */
+  class CaptionSettingsMenuItem extends TextTrackMenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      options.track = {
+        player,
+        kind: options.kind,
+        label: options.kind + ' settings',
+        selectable: false,
+        default: false,
+        mode: 'disabled'
+      };
+
+      // CaptionSettingsMenuItem has no concept of 'selected'
+      options.selectable = false;
+      options.name = 'CaptionSettingsMenuItem';
+      super(player, options);
+      this.addClass('vjs-texttrack-settings');
+      this.controlText(', opens ' + options.kind + ' settings dialog');
+    }
+
+    /**
+     * This gets called when an `CaptionSettingsMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      this.player().getChild('textTrackSettings').open();
+    }
+
+    /**
+     * Update control text and label on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.kind + ' settings');
+      super.handleLanguagechange();
+    }
+  }
+  Component.registerComponent('CaptionSettingsMenuItem', CaptionSettingsMenuItem);
+
+  /**
+   * @file captions-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting captions
+   *
+   * @extends TextTrackButton
+   */
+  class CaptionsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('captions');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-captions-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-captions-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create caption menu items
+     *
+     * @return {CaptionSettingsMenuItem[]}
+     *         The array of current menu items.
+     */
+    createItems() {
+      const items = [];
+      if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks) && this.player().getChild('textTrackSettings')) {
+        items.push(new CaptionSettingsMenuItem(this.player_, {
+          kind: this.kind_
+        }));
+        this.hideThreshold_ += 1;
+      }
+      return super.createItems(items);
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  CaptionsButton.prototype.kind_ = 'captions';
+
+  /**
+   * The text that should display over the `CaptionsButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  CaptionsButton.prototype.controlText_ = 'Captions';
+  Component.registerComponent('CaptionsButton', CaptionsButton);
+
+  /**
+   * @file subs-caps-menu-item.js
+   */
+
+  /**
+   * SubsCapsMenuItem has an [cc] icon to distinguish captions from subtitles
+   * in the SubsCapsMenu.
+   *
+   * @extends TextTrackMenuItem
+   */
+  class SubsCapsMenuItem extends TextTrackMenuItem {
+    createEl(type, props, attrs) {
+      const el = super.createEl(type, props, attrs);
+      const parentSpan = el.querySelector('.vjs-menu-item-text');
+      if (this.options_.track.kind === 'captions') {
+        if (this.player_.options_.experimentalSvgIcons) {
+          this.setIcon('captions', el);
+        } else {
+          parentSpan.appendChild(createEl('span', {
+            className: 'vjs-icon-placeholder'
+          }, {
+            'aria-hidden': true
+          }));
+        }
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-control-text',
+          // space added as the text will visually flow with the
+          // label
+          textContent: ` ${this.localize('Captions')}`
+        }));
+      }
+      return el;
+    }
+  }
+  Component.registerComponent('SubsCapsMenuItem', SubsCapsMenuItem);
+
+  /**
+   * @file sub-caps-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting captions and/or subtitles
+   *
+   * @extends TextTrackButton
+   */
+  class SubsCapsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+
+      // Although North America uses "captions" in most cases for
+      // "captions and subtitles" other locales use "subtitles"
+      this.label_ = 'subtitles';
+      this.setIcon('subtitles');
+      if (['en', 'en-us', 'en-ca', 'fr-ca'].indexOf(this.player_.language_) > -1) {
+        this.label_ = 'captions';
+        this.setIcon('captions');
+      }
+      this.menuButton_.controlText(toTitleCase(this.label_));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-subs-caps-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-subs-caps-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create caption/subtitles menu items
+     *
+     * @return {CaptionSettingsMenuItem[]}
+     *         The array of current menu items.
+     */
+    createItems() {
+      let items = [];
+      if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks) && this.player().getChild('textTrackSettings')) {
+        items.push(new CaptionSettingsMenuItem(this.player_, {
+          kind: this.label_
+        }));
+        this.hideThreshold_ += 1;
+      }
+      items = super.createItems(items, SubsCapsMenuItem);
+      return items;
+    }
+  }
+
+  /**
+   * `kind`s of TextTrack to look for to associate it with this menu.
+   *
+   * @type {array}
+   * @private
+   */
+  SubsCapsButton.prototype.kinds_ = ['captions', 'subtitles'];
+
+  /**
+   * The text that should display over the `SubsCapsButton`s controls.
+   *
+   *
+   * @type {string}
+   * @protected
+   */
+  SubsCapsButton.prototype.controlText_ = 'Subtitles';
+  Component.registerComponent('SubsCapsButton', SubsCapsButton);
+
+  /**
+   * @file audio-track-menu-item.js
+   */
+
+  /**
+   * An {@link AudioTrack} {@link MenuItem}
+   *
+   * @extends MenuItem
+   */
+  class AudioTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const tracks = player.audioTracks();
+
+      // Modify options for parent MenuItem class's init.
+      options.label = track.label || track.language || 'Unknown';
+      options.selected = track.enabled;
+      super(player, options);
+      this.track = track;
+      this.addClass(`vjs-${track.kind}-menu-item`);
+      const changeHandler = (...args) => {
+        this.handleTracksChange.apply(this, args);
+      };
+      tracks.addEventListener('change', changeHandler);
+      this.on('dispose', () => {
+        tracks.removeEventListener('change', changeHandler);
+      });
+    }
+    createEl(type, props, attrs) {
+      const el = super.createEl(type, props, attrs);
+      const parentSpan = el.querySelector('.vjs-menu-item-text');
+      if (['main-desc', 'description'].indexOf(this.options_.track.kind) >= 0) {
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-control-text',
+          textContent: ' ' + this.localize('Descriptions')
+        }));
+      }
+      return el;
+    }
+
+    /**
+     * This gets called when an `AudioTrackMenuItem is "clicked". See {@link ClickableComponent}
+     * for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick(event);
+
+      // the audio track list will automatically toggle other tracks
+      // off for us.
+      this.track.enabled = true;
+
+      // when native audio tracks are used, we want to make sure that other tracks are turned off
+      if (this.player_.tech_.featuresNativeAudioTracks) {
+        const tracks = this.player_.audioTracks();
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+
+          // skip the current track since we enabled it above
+          if (track === this.track) {
+            continue;
+          }
+          track.enabled = track === this.track;
+        }
+      }
+    }
+
+    /**
+     * Handle any {@link AudioTrack} change.
+     *
+     * @param {Event} [event]
+     *        The {@link AudioTrackList#change} event that caused this to run.
+     *
+     * @listens AudioTrackList#change
+     */
+    handleTracksChange(event) {
+      this.selected(this.track.enabled);
+    }
+  }
+  Component.registerComponent('AudioTrackMenuItem', AudioTrackMenuItem);
+
+  /**
+   * @file audio-track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific {@link AudioTrack} types.
+   *
+   * @extends TrackButton
+   */
+  class AudioTrackButton extends TrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param {Player} player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.tracks = player.audioTracks();
+      super(player, options);
+      this.setIcon('audio');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-audio-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-audio-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create a menu item for each audio track
+     *
+     * @param {AudioTrackMenuItem[]} [items=[]]
+     *        An array of existing menu items to use.
+     *
+     * @return {AudioTrackMenuItem[]}
+     *         An array of menu items
+     */
+    createItems(items = []) {
+      // if there's only one audio track, there no point in showing it
+      this.hideThreshold_ = 1;
+      const tracks = this.player_.audioTracks();
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        items.push(new AudioTrackMenuItem(this.player_, {
+          track,
+          // MenuItem is selectable
+          selectable: true,
+          // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+          multiSelectable: false
+        }));
+      }
+      return items;
+    }
+  }
+
+  /**
+   * The text that should display over the `AudioTrackButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  AudioTrackButton.prototype.controlText_ = 'Audio Track';
+  Component.registerComponent('AudioTrackButton', AudioTrackButton);
+
+  /**
+   * @file playback-rate-menu-item.js
+   */
+
+  /**
+   * The specific menu item type for selecting a playback rate.
+   *
+   * @extends MenuItem
+   */
+  class PlaybackRateMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const label = options.rate;
+      const rate = parseFloat(label, 10);
+
+      // Modify options for parent MenuItem class's init.
+      options.label = label;
+      options.selected = rate === player.playbackRate();
+      options.selectable = true;
+      options.multiSelectable = false;
+      super(player, options);
+      this.label = label;
+      this.rate = rate;
+      this.on(player, 'ratechange', e => this.update(e));
+    }
+
+    /**
+     * This gets called when an `PlaybackRateMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick();
+      this.player().playbackRate(this.rate);
+    }
+
+    /**
+     * Update the PlaybackRateMenuItem when the playbackrate changes.
+     *
+     * @param {Event} [event]
+     *        The `ratechange` event that caused this function to run.
+     *
+     * @listens Player#ratechange
+     */
+    update(event) {
+      this.selected(this.player().playbackRate() === this.rate);
+    }
+  }
+
+  /**
+   * The text that should display over the `PlaybackRateMenuItem`s controls. Added for localization.
+   *
+   * @type {string}
+   * @private
+   */
+  PlaybackRateMenuItem.prototype.contentElType = 'button';
+  Component.registerComponent('PlaybackRateMenuItem', PlaybackRateMenuItem);
+
+  /**
+   * @file playback-rate-menu-button.js
+   */
+
+  /**
+   * The component for controlling the playback rate.
+   *
+   * @extends MenuButton
+   */
+  class PlaybackRateMenuButton extends MenuButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);
+      this.updateVisibility();
+      this.updateLabel();
+      this.on(player, 'loadstart', e => this.updateVisibility(e));
+      this.on(player, 'ratechange', e => this.updateLabel(e));
+      this.on(player, 'playbackrateschange', e => this.handlePlaybackRateschange(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl();
+      this.labelElId_ = 'vjs-playback-rate-value-label-' + this.id_;
+      this.labelEl_ = createEl('div', {
+        className: 'vjs-playback-rate-value',
+        id: this.labelElId_,
+        textContent: '1x'
+      });
+      el.appendChild(this.labelEl_);
+      return el;
+    }
+    dispose() {
+      this.labelEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-playback-rate ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-playback-rate ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create the list of menu items. Specific to each subclass.
+     *
+     */
+    createItems() {
+      const rates = this.playbackRates();
+      const items = [];
+      for (let i = rates.length - 1; i >= 0; i--) {
+        items.push(new PlaybackRateMenuItem(this.player(), {
+          rate: rates[i] + 'x'
+        }));
+      }
+      return items;
+    }
+
+    /**
+     * On playbackrateschange, update the menu to account for the new items.
+     *
+     * @listens Player#playbackrateschange
+     */
+    handlePlaybackRateschange(event) {
+      this.update();
+    }
+
+    /**
+     * Get possible playback rates
+     *
+     * @return {Array}
+     *         All possible playback rates
+     */
+    playbackRates() {
+      const player = this.player();
+      return player.playbackRates && player.playbackRates() || [];
+    }
+
+    /**
+     * Get whether playback rates is supported by the tech
+     * and an array of playback rates exists
+     *
+     * @return {boolean}
+     *         Whether changing playback rate is supported
+     */
+    playbackRateSupported() {
+      return this.player().tech_ && this.player().tech_.featuresPlaybackRate && this.playbackRates() && this.playbackRates().length > 0;
+    }
+
+    /**
+     * Hide playback rate controls when they're no playback rate options to select
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#loadstart
+     */
+    updateVisibility(event) {
+      if (this.playbackRateSupported()) {
+        this.removeClass('vjs-hidden');
+      } else {
+        this.addClass('vjs-hidden');
+      }
+    }
+
+    /**
+     * Update button label when rate changed
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#ratechange
+     */
+    updateLabel(event) {
+      if (this.playbackRateSupported()) {
+        this.labelEl_.textContent = this.player().playbackRate() + 'x';
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `PlaybackRateMenuButton`s controls.
+   *
+   * Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PlaybackRateMenuButton.prototype.controlText_ = 'Playback Rate';
+  Component.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton);
+
+  /**
+   * @file spacer.js
+   */
+
+  /**
+   * Just an empty spacer element that can be used as an append point for plugins, etc.
+   * Also can be used to create space between elements when necessary.
+   *
+   * @extends Component
+   */
+  class Spacer extends Component {
+    /**
+    * Builds the default DOM `className`.
+    *
+    * @return {string}
+    *         The DOM `className` for this object.
+    */
+    buildCSSClass() {
+      return `vjs-spacer ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(tag = 'div', props = {}, attributes = {}) {
+      if (!props.className) {
+        props.className = this.buildCSSClass();
+      }
+      return super.createEl(tag, props, attributes);
+    }
+  }
+  Component.registerComponent('Spacer', Spacer);
+
+  /**
+   * @file custom-control-spacer.js
+   */
+
+  /**
+   * Spacer specifically meant to be used as an insertion point for new plugins, etc.
+   *
+   * @extends Spacer
+   */
+  class CustomControlSpacer extends Spacer {
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-custom-control-spacer ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildCSSClass(),
+        // No-flex/table-cell mode requires there be some content
+        // in the cell to fill the remaining space of the table.
+        textContent: '\u00a0'
+      });
+    }
+  }
+  Component.registerComponent('CustomControlSpacer', CustomControlSpacer);
+
+  /**
+   * @file control-bar.js
+   */
+
+  /**
+   * Container of main controls.
+   *
+   * @extends Component
+   */
+  class ControlBar extends Component {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-control-bar',
+        dir: 'ltr'
+      });
+    }
+  }
+
+  /**
+   * Default options for `ControlBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  ControlBar.prototype.options_ = {
+    children: ['playToggle', 'skipBackward', 'skipForward', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'seekToLive', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'pictureInPictureToggle', 'fullscreenToggle']
+  };
+  Component.registerComponent('ControlBar', ControlBar);
+
+  /**
+   * @file error-display.js
+   */
+
+  /**
+   * A display that indicates an error has occurred. This means that the video
+   * is unplayable.
+   *
+   * @extends ModalDialog
+   */
+  class ErrorDisplay extends ModalDialog {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  { import('./player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, 'error', e => {
+        this.open(e);
+      });
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     *
+     * @deprecated Since version 5.
+     */
+    buildCSSClass() {
+      return `vjs-error-display ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Gets the localized error message based on the `Player`s error.
+     *
+     * @return {string}
+     *         The `Player`s error message localized or an empty string.
+     */
+    content() {
+      const error = this.player().error();
+      return error ? this.localize(error.message) : '';
+    }
+  }
+
+  /**
+   * The default options for an `ErrorDisplay`.
+   *
+   * @private
+   */
+  ErrorDisplay.prototype.options_ = Object.assign({}, ModalDialog.prototype.options_, {
+    pauseOnOpen: false,
+    fillAlways: true,
+    temporary: false,
+    uncloseable: true
+  });
+  Component.registerComponent('ErrorDisplay', ErrorDisplay);
+
+  /**
+   * @file text-track-settings.js
+   */
+  const LOCAL_STORAGE_KEY = 'vjs-text-track-settings';
+  const COLOR_BLACK = ['#000', 'Black'];
+  const COLOR_BLUE = ['#00F', 'Blue'];
+  const COLOR_CYAN = ['#0FF', 'Cyan'];
+  const COLOR_GREEN = ['#0F0', 'Green'];
+  const COLOR_MAGENTA = ['#F0F', 'Magenta'];
+  const COLOR_RED = ['#F00', 'Red'];
+  const COLOR_WHITE = ['#FFF', 'White'];
+  const COLOR_YELLOW = ['#FF0', 'Yellow'];
+  const OPACITY_OPAQUE = ['1', 'Opaque'];
+  const OPACITY_SEMI = ['0.5', 'Semi-Transparent'];
+  const OPACITY_TRANS = ['0', 'Transparent'];
+
+  // Configuration for the various <select> elements in the DOM of this component.
+  //
+  // Possible keys include:
+  //
+  // `default`:
+  //   The default option index. Only needs to be provided if not zero.
+  // `parser`:
+  //   A function which is used to parse the value from the selected option in
+  //   a customized way.
+  // `selector`:
+  //   The selector used to find the associated <select> element.
+  const selectConfigs = {
+    backgroundColor: {
+      selector: '.vjs-bg-color > select',
+      id: 'captions-background-color-%s',
+      label: 'Color',
+      options: [COLOR_BLACK, COLOR_WHITE, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
+    },
+    backgroundOpacity: {
+      selector: '.vjs-bg-opacity > select',
+      id: 'captions-background-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_OPAQUE, OPACITY_SEMI, OPACITY_TRANS]
+    },
+    color: {
+      selector: '.vjs-text-color > select',
+      id: 'captions-foreground-color-%s',
+      label: 'Color',
+      options: [COLOR_WHITE, COLOR_BLACK, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
+    },
+    edgeStyle: {
+      selector: '.vjs-edge-style > select',
+      id: '%s',
+      label: 'Text Edge Style',
+      options: [['none', 'None'], ['raised', 'Raised'], ['depressed', 'Depressed'], ['uniform', 'Uniform'], ['dropshadow', 'Drop shadow']]
+    },
+    fontFamily: {
+      selector: '.vjs-font-family > select',
+      id: 'captions-font-family-%s',
+      label: 'Font Family',
+      options: [['proportionalSansSerif', 'Proportional Sans-Serif'], ['monospaceSansSerif', 'Monospace Sans-Serif'], ['proportionalSerif', 'Proportional Serif'], ['monospaceSerif', 'Monospace Serif'], ['casual', 'Casual'], ['script', 'Script'], ['small-caps', 'Small Caps']]
+    },
+    fontPercent: {
+      selector: '.vjs-font-percent > select',
+      id: 'captions-font-size-%s',
+      label: 'Font Size',
+      options: [['0.50', '50%'], ['0.75', '75%'], ['1.00', '100%'], ['1.25', '125%'], ['1.50', '150%'], ['1.75', '175%'], ['2.00', '200%'], ['3.00', '300%'], ['4.00', '400%']],
+      default: 2,
+      parser: v => v === '1.00' ? null : Number(v)
+    },
+    textOpacity: {
+      selector: '.vjs-text-opacity > select',
+      id: 'captions-foreground-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_OPAQUE, OPACITY_SEMI]
+    },
+    // Options for this object are defined below.
+    windowColor: {
+      selector: '.vjs-window-color > select',
+      id: 'captions-window-color-%s',
+      label: 'Color'
+    },
+    // Options for this object are defined below.
+    windowOpacity: {
+      selector: '.vjs-window-opacity > select',
+      id: 'captions-window-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_TRANS, OPACITY_SEMI, OPACITY_OPAQUE]
+    }
+  };
+  selectConfigs.windowColor.options = selectConfigs.backgroundColor.options;
+
+  /**
+   * Get the actual value of an option.
+   *
+   * @param  {string} value
+   *         The value to get
+   *
+   * @param  {Function} [parser]
+   *         Optional function to adjust the value.
+   *
+   * @return {*}
+   *         - Will be `undefined` if no value exists
+   *         - Will be `undefined` if the given value is "none".
+   *         - Will be the actual value otherwise.
+   *
+   * @private
+   */
+  function parseOptionValue(value, parser) {
+    if (parser) {
+      value = parser(value);
+    }
+    if (value && value !== 'none') {
+      return value;
+    }
+  }
+
+  /**
+   * Gets the value of the selected <option> element within a <select> element.
+   *
+   * @param  {Element} el
+   *         the element to look in
+   *
+   * @param  {Function} [parser]
+   *         Optional function to adjust the value.
+   *
+   * @return {*}
+   *         - Will be `undefined` if no value exists
+   *         - Will be `undefined` if the given value is "none".
+   *         - Will be the actual value otherwise.
+   *
+   * @private
+   */
+  function getSelectedOptionValue(el, parser) {
+    const value = el.options[el.options.selectedIndex].value;
+    return parseOptionValue(value, parser);
+  }
+
+  /**
+   * Sets the selected <option> element within a <select> element based on a
+   * given value.
+   *
+   * @param {Element} el
+   *        The element to look in.
+   *
+   * @param {string} value
+   *        the property to look on.
+   *
+   * @param {Function} [parser]
+   *        Optional function to adjust the value before comparing.
+   *
+   * @private
+   */
+  function setSelectedOption(el, value, parser) {
+    if (!value) {
+      return;
+    }
+    for (let i = 0; i < el.options.length; i++) {
+      if (parseOptionValue(el.options[i].value, parser) === value) {
+        el.selectedIndex = i;
+        break;
+      }
+    }
+  }
+
+  /**
+   * Manipulate Text Tracks settings.
+   *
+   * @extends ModalDialog
+   */
+  class TextTrackSettings extends ModalDialog {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player, options) {
+      options.temporary = false;
+      super(player, options);
+      this.updateDisplay = this.updateDisplay.bind(this);
+
+      // fill the modal and pretend we have opened it
+      this.fill();
+      this.hasBeenOpened_ = this.hasBeenFilled_ = true;
+      this.endDialog = createEl('p', {
+        className: 'vjs-control-text',
+        textContent: this.localize('End of dialog window.')
+      });
+      this.el().appendChild(this.endDialog);
+      this.setDefaults();
+
+      // Grab `persistTextTrackSettings` from the player options if not passed in child options
+      if (options.persistTextTrackSettings === undefined) {
+        this.options_.persistTextTrackSettings = this.options_.playerOptions.persistTextTrackSettings;
+      }
+      this.on(this.$('.vjs-done-button'), 'click', () => {
+        this.saveSettings();
+        this.close();
+      });
+      this.on(this.$('.vjs-default-button'), 'click', () => {
+        this.setDefaults();
+        this.updateDisplay();
+      });
+      each(selectConfigs, config => {
+        this.on(this.$(config.selector), 'change', this.updateDisplay);
+      });
+      if (this.options_.persistTextTrackSettings) {
+        this.restoreSettings();
+      }
+    }
+    dispose() {
+      this.endDialog = null;
+      super.dispose();
+    }
+
+    /**
+     * Create a <select> element with configured options.
+     *
+     * @param {string} key
+     *        Configuration key to use during creation.
+     *
+     * @param {string} [legendId]
+     *        Id of associated <legend>.
+     *
+     * @param {string} [type=label]
+     *        Type of labelling element, `label` or `legend`
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElSelect_(key, legendId = '', type = 'label') {
+      const config = selectConfigs[key];
+      const id = config.id.replace('%s', this.id_);
+      const selectLabelledbyIds = [legendId, id].join(' ').trim();
+      const guid = `vjs_select_${newGUID()}`;
+      return [`<${type} id="${id}"${type === 'label' ? ` for="${guid}" class="vjs-label"` : ''}>`, this.localize(config.label), `</${type}>`, `<select aria-labelledby="${selectLabelledbyIds}" id="${guid}">`].concat(config.options.map(o => {
+        const optionId = id + '-' + o[1].replace(/\W+/g, '');
+        return [`<option id="${optionId}" value="${o[0]}" `, `aria-labelledby="${selectLabelledbyIds} ${optionId}">`, this.localize(o[1]), '</option>'].join('');
+      })).concat('</select>').join('');
+    }
+
+    /**
+     * Create foreground color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElFgColor_() {
+      const legendId = `captions-text-legend-${this.id_}`;
+      return ['<fieldset class="vjs-fg vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Text'), '</legend>', '<span class="vjs-text-color">', this.createElSelect_('color', legendId), '</span>', '<span class="vjs-text-opacity vjs-opacity">', this.createElSelect_('textOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create background color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElBgColor_() {
+      const legendId = `captions-background-${this.id_}`;
+      return ['<fieldset class="vjs-bg vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Text Background'), '</legend>', '<span class="vjs-bg-color">', this.createElSelect_('backgroundColor', legendId), '</span>', '<span class="vjs-bg-opacity vjs-opacity">', this.createElSelect_('backgroundOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create window color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElWinColor_() {
+      const legendId = `captions-window-${this.id_}`;
+      return ['<fieldset class="vjs-window vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Caption Area Background'), '</legend>', '<span class="vjs-window-color">', this.createElSelect_('windowColor', legendId), '</span>', '<span class="vjs-window-opacity vjs-opacity">', this.createElSelect_('windowOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create color elements for the component
+     *
+     * @return {Element}
+     *         The element that was created
+     *
+     * @private
+     */
+    createElColors_() {
+      return createEl('div', {
+        className: 'vjs-track-settings-colors',
+        innerHTML: [this.createElFgColor_(), this.createElBgColor_(), this.createElWinColor_()].join('')
+      });
+    }
+
+    /**
+     * Create font elements for the component
+     *
+     * @return {Element}
+     *         The element that was created.
+     *
+     * @private
+     */
+    createElFont_() {
+      return createEl('div', {
+        className: 'vjs-track-settings-font',
+        innerHTML: ['<fieldset class="vjs-font-percent vjs-track-setting">', this.createElSelect_('fontPercent', '', 'legend'), '</fieldset>', '<fieldset class="vjs-edge-style vjs-track-setting">', this.createElSelect_('edgeStyle', '', 'legend'), '</fieldset>', '<fieldset class="vjs-font-family vjs-track-setting">', this.createElSelect_('fontFamily', '', 'legend'), '</fieldset>'].join('')
+      });
+    }
+
+    /**
+     * Create controls for the component
+     *
+     * @return {Element}
+     *         The element that was created.
+     *
+     * @private
+     */
+    createElControls_() {
+      const defaultsDescription = this.localize('restore all settings to the default values');
+      return createEl('div', {
+        className: 'vjs-track-settings-controls',
+        innerHTML: [`<button type="button" class="vjs-default-button" title="${defaultsDescription}">`, this.localize('Reset'), `<span class="vjs-control-text"> ${defaultsDescription}</span>`, '</button>', `<button type="button" class="vjs-done-button">${this.localize('Done')}</button>`].join('')
+      });
+    }
+    content() {
+      return [this.createElColors_(), this.createElFont_(), this.createElControls_()];
+    }
+    label() {
+      return this.localize('Caption Settings Dialog');
+    }
+    description() {
+      return this.localize('Beginning of dialog window. Escape will cancel and close the window.');
+    }
+    buildCSSClass() {
+      return super.buildCSSClass() + ' vjs-text-track-settings';
+    }
+
+    /**
+     * Gets an object of text track settings (or null).
+     *
+     * @return {Object}
+     *         An object with config values parsed from the DOM or localStorage.
+     */
+    getValues() {
+      return reduce(selectConfigs, (accum, config, key) => {
+        const value = getSelectedOptionValue(this.$(config.selector), config.parser);
+        if (value !== undefined) {
+          accum[key] = value;
+        }
+        return accum;
+      }, {});
+    }
+
+    /**
+     * Sets text track settings from an object of values.
+     *
+     * @param {Object} values
+     *        An object with config values parsed from the DOM or localStorage.
+     */
+    setValues(values) {
+      each(selectConfigs, (config, key) => {
+        setSelectedOption(this.$(config.selector), values[key], config.parser);
+      });
+    }
+
+    /**
+     * Sets all `<select>` elements to their default values.
+     */
+    setDefaults() {
+      each(selectConfigs, config => {
+        const index = config.hasOwnProperty('default') ? config.default : 0;
+        this.$(config.selector).selectedIndex = index;
+      });
+    }
+
+    /**
+     * Restore texttrack settings from localStorage
+     */
+    restoreSettings() {
+      let values;
+      try {
+        values = JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_KEY));
+      } catch (err) {
+        log.warn(err);
+      }
+      if (values) {
+        this.setValues(values);
+      }
+    }
+
+    /**
+     * Save text track settings to localStorage
+     */
+    saveSettings() {
+      if (!this.options_.persistTextTrackSettings) {
+        return;
+      }
+      const values = this.getValues();
+      try {
+        if (Object.keys(values).length) {
+          window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(values));
+        } else {
+          window.localStorage.removeItem(LOCAL_STORAGE_KEY);
+        }
+      } catch (err) {
+        log.warn(err);
+      }
+    }
+
+    /**
+     * Update display of text track settings
+     */
+    updateDisplay() {
+      const ttDisplay = this.player_.getChild('textTrackDisplay');
+      if (ttDisplay) {
+        ttDisplay.updateDisplay();
+      }
+    }
+
+    /**
+     * conditionally blur the element and refocus the captions button
+     *
+     * @private
+     */
+    conditionalBlur_() {
+      this.previouslyActiveEl_ = null;
+      const cb = this.player_.controlBar;
+      const subsCapsBtn = cb && cb.subsCapsButton;
+      const ccBtn = cb && cb.captionsButton;
+      if (subsCapsBtn) {
+        subsCapsBtn.focus();
+      } else if (ccBtn) {
+        ccBtn.focus();
+      }
+    }
+
+    /**
+     * Repopulate dialog with new localizations on languagechange
+     */
+    handleLanguagechange() {
+      this.fill();
+    }
+  }
+  Component.registerComponent('TextTrackSettings', TextTrackSettings);
+
+  /**
+   * @file resize-manager.js
+   */
+
+  /**
+   * A Resize Manager. It is in charge of triggering `playerresize` on the player in the right conditions.
+   *
+   * It'll either create an iframe and use a debounced resize handler on it or use the new {@link https://wicg.github.io/ResizeObserver/|ResizeObserver}.
+   *
+   * If the ResizeObserver is available natively, it will be used. A polyfill can be passed in as an option.
+   * If a `playerresize` event is not needed, the ResizeManager component can be removed from the player, see the example below.
+   *
+   * @example <caption>How to disable the resize manager</caption>
+   * const player = videojs('#vid', {
+   *   resizeManager: false
+   * });
+   *
+   * @see {@link https://wicg.github.io/ResizeObserver/|ResizeObserver specification}
+   *
+   * @extends Component
+   */
+  class ResizeManager extends Component {
+    /**
+     * Create the ResizeManager.
+     *
+     * @param {Object} player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of ResizeManager options.
+     *
+     * @param {Object} [options.ResizeObserver]
+     *        A polyfill for ResizeObserver can be passed in here.
+     *        If this is set to null it will ignore the native ResizeObserver and fall back to the iframe fallback.
+     */
+    constructor(player, options) {
+      let RESIZE_OBSERVER_AVAILABLE = options.ResizeObserver || window.ResizeObserver;
+
+      // if `null` was passed, we want to disable the ResizeObserver
+      if (options.ResizeObserver === null) {
+        RESIZE_OBSERVER_AVAILABLE = false;
+      }
+
+      // Only create an element when ResizeObserver isn't available
+      const options_ = merge({
+        createEl: !RESIZE_OBSERVER_AVAILABLE,
+        reportTouchActivity: false
+      }, options);
+      super(player, options_);
+      this.ResizeObserver = options.ResizeObserver || window.ResizeObserver;
+      this.loadListener_ = null;
+      this.resizeObserver_ = null;
+      this.debouncedHandler_ = debounce(() => {
+        this.resizeHandler();
+      }, 100, false, this);
+      if (RESIZE_OBSERVER_AVAILABLE) {
+        this.resizeObserver_ = new this.ResizeObserver(this.debouncedHandler_);
+        this.resizeObserver_.observe(player.el());
+      } else {
+        this.loadListener_ = () => {
+          if (!this.el_ || !this.el_.contentWindow) {
+            return;
+          }
+          const debouncedHandler_ = this.debouncedHandler_;
+          let unloadListener_ = this.unloadListener_ = function () {
+            off(this, 'resize', debouncedHandler_);
+            off(this, 'unload', unloadListener_);
+            unloadListener_ = null;
+          };
+
+          // safari and edge can unload the iframe before resizemanager dispose
+          // we have to dispose of event handlers correctly before that happens
+          on(this.el_.contentWindow, 'unload', unloadListener_);
+          on(this.el_.contentWindow, 'resize', debouncedHandler_);
+        };
+        this.one('load', this.loadListener_);
+      }
+    }
+    createEl() {
+      return super.createEl('iframe', {
+        className: 'vjs-resize-manager',
+        tabIndex: -1,
+        title: this.localize('No content')
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Called when a resize is triggered on the iframe or a resize is observed via the ResizeObserver
+     *
+     * @fires Player#playerresize
+     */
+    resizeHandler() {
+      /**
+       * Called when the player size has changed
+       *
+       * @event Player#playerresize
+       * @type {Event}
+       */
+      // make sure player is still around to trigger
+      // prevents this from causing an error after dispose
+      if (!this.player_ || !this.player_.trigger) {
+        return;
+      }
+      this.player_.trigger('playerresize');
+    }
+    dispose() {
+      if (this.debouncedHandler_) {
+        this.debouncedHandler_.cancel();
+      }
+      if (this.resizeObserver_) {
+        if (this.player_.el()) {
+          this.resizeObserver_.unobserve(this.player_.el());
+        }
+        this.resizeObserver_.disconnect();
+      }
+      if (this.loadListener_) {
+        this.off('load', this.loadListener_);
+      }
+      if (this.el_ && this.el_.contentWindow && this.unloadListener_) {
+        this.unloadListener_.call(this.el_.contentWindow);
+      }
+      this.ResizeObserver = null;
+      this.resizeObserver = null;
+      this.debouncedHandler_ = null;
+      this.loadListener_ = null;
+      super.dispose();
+    }
+  }
+  Component.registerComponent('ResizeManager', ResizeManager);
+
+  const defaults = {
+    trackingThreshold: 20,
+    liveTolerance: 15
+  };
+
+  /*
+    track when we are at the live edge, and other helpers for live playback */
+
+  /**
+   * A class for checking live current time and determining when the player
+   * is at or behind the live edge.
+   */
+  class LiveTracker extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {number} [options.trackingThreshold=20]
+     *        Number of seconds of live window (seekableEnd - seekableStart) that
+     *        media needs to have before the liveui will be shown.
+     *
+     * @param {number} [options.liveTolerance=15]
+     *        Number of seconds behind live that we have to be
+     *        before we will be considered non-live. Note that this will only
+     *        be used when playing at the live edge. This allows large seekable end
+     *        changes to not effect whether we are live or not.
+     */
+    constructor(player, options) {
+      // LiveTracker does not need an element
+      const options_ = merge(defaults, options, {
+        createEl: false
+      });
+      super(player, options_);
+      this.trackLiveHandler_ = () => this.trackLive_();
+      this.handlePlay_ = e => this.handlePlay(e);
+      this.handleFirstTimeupdate_ = e => this.handleFirstTimeupdate(e);
+      this.handleSeeked_ = e => this.handleSeeked(e);
+      this.seekToLiveEdge_ = e => this.seekToLiveEdge(e);
+      this.reset_();
+      this.on(this.player_, 'durationchange', e => this.handleDurationchange(e));
+      // we should try to toggle tracking on canplay as native playback engines, like Safari
+      // may not have the proper values for things like seekableEnd until then
+      this.on(this.player_, 'canplay', () => this.toggleTracking());
+    }
+
+    /**
+     * all the functionality for tracking when seek end changes
+     * and for tracking how far past seek end we should be
+     */
+    trackLive_() {
+      const seekable = this.player_.seekable();
+
+      // skip undefined seekable
+      if (!seekable || !seekable.length) {
+        return;
+      }
+      const newTime = Number(window.performance.now().toFixed(4));
+      const deltaTime = this.lastTime_ === -1 ? 0 : (newTime - this.lastTime_) / 1000;
+      this.lastTime_ = newTime;
+      this.pastSeekEnd_ = this.pastSeekEnd() + deltaTime;
+      const liveCurrentTime = this.liveCurrentTime();
+      const currentTime = this.player_.currentTime();
+
+      // we are behind live if any are true
+      // 1. the player is paused
+      // 2. the user seeked to a location 2 seconds away from live
+      // 3. the difference between live and current time is greater
+      //    liveTolerance which defaults to 15s
+      let isBehind = this.player_.paused() || this.seekedBehindLive_ || Math.abs(liveCurrentTime - currentTime) > this.options_.liveTolerance;
+
+      // we cannot be behind if
+      // 1. until we have not seen a timeupdate yet
+      // 2. liveCurrentTime is Infinity, which happens on Android and Native Safari
+      if (!this.timeupdateSeen_ || liveCurrentTime === Infinity) {
+        isBehind = false;
+      }
+      if (isBehind !== this.behindLiveEdge_) {
+        this.behindLiveEdge_ = isBehind;
+        this.trigger('liveedgechange');
+      }
+    }
+
+    /**
+     * handle a durationchange event on the player
+     * and start/stop tracking accordingly.
+     */
+    handleDurationchange() {
+      this.toggleTracking();
+    }
+
+    /**
+     * start/stop tracking
+     */
+    toggleTracking() {
+      if (this.player_.duration() === Infinity && this.liveWindow() >= this.options_.trackingThreshold) {
+        if (this.player_.options_.liveui) {
+          this.player_.addClass('vjs-liveui');
+        }
+        this.startTracking();
+      } else {
+        this.player_.removeClass('vjs-liveui');
+        this.stopTracking();
+      }
+    }
+
+    /**
+     * start tracking live playback
+     */
+    startTracking() {
+      if (this.isTracking()) {
+        return;
+      }
+
+      // If we haven't seen a timeupdate, we need to check whether playback
+      // began before this component started tracking. This can happen commonly
+      // when using autoplay.
+      if (!this.timeupdateSeen_) {
+        this.timeupdateSeen_ = this.player_.hasStarted();
+      }
+      this.trackingInterval_ = this.setInterval(this.trackLiveHandler_, UPDATE_REFRESH_INTERVAL);
+      this.trackLive_();
+      this.on(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+      if (!this.timeupdateSeen_) {
+        this.one(this.player_, 'play', this.handlePlay_);
+        this.one(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+      } else {
+        this.on(this.player_, 'seeked', this.handleSeeked_);
+      }
+    }
+
+    /**
+     * handle the first timeupdate on the player if it wasn't already playing
+     * when live tracker started tracking.
+     */
+    handleFirstTimeupdate() {
+      this.timeupdateSeen_ = true;
+      this.on(this.player_, 'seeked', this.handleSeeked_);
+    }
+
+    /**
+     * Keep track of what time a seek starts, and listen for seeked
+     * to find where a seek ends.
+     */
+    handleSeeked() {
+      const timeDiff = Math.abs(this.liveCurrentTime() - this.player_.currentTime());
+      this.seekedBehindLive_ = this.nextSeekedFromUser_ && timeDiff > 2;
+      this.nextSeekedFromUser_ = false;
+      this.trackLive_();
+    }
+
+    /**
+     * handle the first play on the player, and make sure that we seek
+     * right to the live edge.
+     */
+    handlePlay() {
+      this.one(this.player_, 'timeupdate', this.seekToLiveEdge_);
+    }
+
+    /**
+     * Stop tracking, and set all internal variables to
+     * their initial value.
+     */
+    reset_() {
+      this.lastTime_ = -1;
+      this.pastSeekEnd_ = 0;
+      this.lastSeekEnd_ = -1;
+      this.behindLiveEdge_ = true;
+      this.timeupdateSeen_ = false;
+      this.seekedBehindLive_ = false;
+      this.nextSeekedFromUser_ = false;
+      this.clearInterval(this.trackingInterval_);
+      this.trackingInterval_ = null;
+      this.off(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+      this.off(this.player_, 'seeked', this.handleSeeked_);
+      this.off(this.player_, 'play', this.handlePlay_);
+      this.off(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+      this.off(this.player_, 'timeupdate', this.seekToLiveEdge_);
+    }
+
+    /**
+     * The next seeked event is from the user. Meaning that any seek
+     * > 2s behind live will be considered behind live for real and
+     * liveTolerance will be ignored.
+     */
+    nextSeekedFromUser() {
+      this.nextSeekedFromUser_ = true;
+    }
+
+    /**
+     * stop tracking live playback
+     */
+    stopTracking() {
+      if (!this.isTracking()) {
+        return;
+      }
+      this.reset_();
+      this.trigger('liveedgechange');
+    }
+
+    /**
+     * A helper to get the player seekable end
+     * so that we don't have to null check everywhere
+     *
+     * @return {number}
+     *         The furthest seekable end or Infinity.
+     */
+    seekableEnd() {
+      const seekable = this.player_.seekable();
+      const seekableEnds = [];
+      let i = seekable ? seekable.length : 0;
+      while (i--) {
+        seekableEnds.push(seekable.end(i));
+      }
+
+      // grab the furthest seekable end after sorting, or if there are none
+      // default to Infinity
+      return seekableEnds.length ? seekableEnds.sort()[seekableEnds.length - 1] : Infinity;
+    }
+
+    /**
+     * A helper to get the player seekable start
+     * so that we don't have to null check everywhere
+     *
+     * @return {number}
+     *         The earliest seekable start or 0.
+     */
+    seekableStart() {
+      const seekable = this.player_.seekable();
+      const seekableStarts = [];
+      let i = seekable ? seekable.length : 0;
+      while (i--) {
+        seekableStarts.push(seekable.start(i));
+      }
+
+      // grab the first seekable start after sorting, or if there are none
+      // default to 0
+      return seekableStarts.length ? seekableStarts.sort()[0] : 0;
+    }
+
+    /**
+     * Get the live time window aka
+     * the amount of time between seekable start and
+     * live current time.
+     *
+     * @return {number}
+     *         The amount of seconds that are seekable in
+     *         the live video.
+     */
+    liveWindow() {
+      const liveCurrentTime = this.liveCurrentTime();
+
+      // if liveCurrenTime is Infinity then we don't have a liveWindow at all
+      if (liveCurrentTime === Infinity) {
+        return 0;
+      }
+      return liveCurrentTime - this.seekableStart();
+    }
+
+    /**
+     * Determines if the player is live, only checks if this component
+     * is tracking live playback or not
+     *
+     * @return {boolean}
+     *         Whether liveTracker is tracking
+     */
+    isLive() {
+      return this.isTracking();
+    }
+
+    /**
+     * Determines if currentTime is at the live edge and won't fall behind
+     * on each seekableendchange
+     *
+     * @return {boolean}
+     *         Whether playback is at the live edge
+     */
+    atLiveEdge() {
+      return !this.behindLiveEdge();
+    }
+
+    /**
+     * get what we expect the live current time to be
+     *
+     * @return {number}
+     *         The expected live current time
+     */
+    liveCurrentTime() {
+      return this.pastSeekEnd() + this.seekableEnd();
+    }
+
+    /**
+     * The number of seconds that have occurred after seekable end
+     * changed. This will be reset to 0 once seekable end changes.
+     *
+     * @return {number}
+     *         Seconds past the current seekable end
+     */
+    pastSeekEnd() {
+      const seekableEnd = this.seekableEnd();
+      if (this.lastSeekEnd_ !== -1 && seekableEnd !== this.lastSeekEnd_) {
+        this.pastSeekEnd_ = 0;
+      }
+      this.lastSeekEnd_ = seekableEnd;
+      return this.pastSeekEnd_;
+    }
+
+    /**
+     * If we are currently behind the live edge, aka currentTime will be
+     * behind on a seekableendchange
+     *
+     * @return {boolean}
+     *         If we are behind the live edge
+     */
+    behindLiveEdge() {
+      return this.behindLiveEdge_;
+    }
+
+    /**
+     * Whether live tracker is currently tracking or not.
+     */
+    isTracking() {
+      return typeof this.trackingInterval_ === 'number';
+    }
+
+    /**
+     * Seek to the live edge if we are behind the live edge
+     */
+    seekToLiveEdge() {
+      this.seekedBehindLive_ = false;
+      if (this.atLiveEdge()) {
+        return;
+      }
+      this.nextSeekedFromUser_ = false;
+      this.player_.currentTime(this.liveCurrentTime());
+    }
+
+    /**
+     * Dispose of liveTracker
+     */
+    dispose() {
+      this.stopTracking();
+      super.dispose();
+    }
+  }
+  Component.registerComponent('LiveTracker', LiveTracker);
+
+  /**
+   * Displays an element over the player which contains an optional title and
+   * description for the current content.
+   *
+   * Much of the code for this component originated in the now obsolete
+   * videojs-dock plugin: https://github.com/brightcove/videojs-dock/
+   *
+   * @extends Component
+   */
+  class TitleBar extends Component {
+    constructor(player, options) {
+      super(player, options);
+      this.on('statechanged', e => this.updateDom_());
+      this.updateDom_();
+    }
+
+    /**
+     * Create the `TitleBar`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      this.els = {
+        title: createEl('div', {
+          className: 'vjs-title-bar-title',
+          id: `vjs-title-bar-title-${newGUID()}`
+        }),
+        description: createEl('div', {
+          className: 'vjs-title-bar-description',
+          id: `vjs-title-bar-description-${newGUID()}`
+        })
+      };
+      return createEl('div', {
+        className: 'vjs-title-bar'
+      }, {}, values(this.els));
+    }
+
+    /**
+     * Updates the DOM based on the component's state object.
+     */
+    updateDom_() {
+      const tech = this.player_.tech_;
+      const techEl = tech && tech.el_;
+      const techAriaAttrs = {
+        title: 'aria-labelledby',
+        description: 'aria-describedby'
+      };
+      ['title', 'description'].forEach(k => {
+        const value = this.state[k];
+        const el = this.els[k];
+        const techAriaAttr = techAriaAttrs[k];
+        emptyEl(el);
+        if (value) {
+          textContent(el, value);
+        }
+
+        // If there is a tech element available, update its ARIA attributes
+        // according to whether a title and/or description have been provided.
+        if (techEl) {
+          techEl.removeAttribute(techAriaAttr);
+          if (value) {
+            techEl.setAttribute(techAriaAttr, el.id);
+          }
+        }
+      });
+      if (this.state.title || this.state.description) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+
+    /**
+     * Update the contents of the title bar component with new title and
+     * description text.
+     *
+     * If both title and description are missing, the title bar will be hidden.
+     *
+     * If either title or description are present, the title bar will be visible.
+     *
+     * NOTE: Any previously set value will be preserved. To unset a previously
+     * set value, you must pass an empty string or null.
+     *
+     * For example:
+     *
+     * ```
+     * update({title: 'foo', description: 'bar'}) // title: 'foo', description: 'bar'
+     * update({description: 'bar2'}) // title: 'foo', description: 'bar2'
+     * update({title: ''}) // title: '', description: 'bar2'
+     * update({title: 'foo', description: null}) // title: 'foo', description: null
+     * ```
+     *
+     * @param  {Object} [options={}]
+     *         An options object. When empty, the title bar will be hidden.
+     *
+     * @param  {string} [options.title]
+     *         A title to display in the title bar.
+     *
+     * @param  {string} [options.description]
+     *         A description to display in the title bar.
+     */
+    update(options) {
+      this.setState(options);
+    }
+
+    /**
+     * Dispose the component.
+     */
+    dispose() {
+      const tech = this.player_.tech_;
+      const techEl = tech && tech.el_;
+      if (techEl) {
+        techEl.removeAttribute('aria-labelledby');
+        techEl.removeAttribute('aria-describedby');
+      }
+      super.dispose();
+      this.els = null;
+    }
+  }
+  Component.registerComponent('TitleBar', TitleBar);
+
+  /**
+   * This function is used to fire a sourceset when there is something
+   * similar to `mediaEl.load()` being called. It will try to find the source via
+   * the `src` attribute and then the `<source>` elements. It will then fire `sourceset`
+   * with the source that was found or empty string if we cannot know. If it cannot
+   * find a source then `sourceset` will not be fired.
+   *
+   * @param { import('./html5').default } tech
+   *        The tech object that sourceset was setup on
+   *
+   * @return {boolean}
+   *         returns false if the sourceset was not fired and true otherwise.
+   */
+  const sourcesetLoad = tech => {
+    const el = tech.el();
+
+    // if `el.src` is set, that source will be loaded.
+    if (el.hasAttribute('src')) {
+      tech.triggerSourceset(el.src);
+      return true;
+    }
+
+    /**
+     * Since there isn't a src property on the media element, source elements will be used for
+     * implementing the source selection algorithm. This happens asynchronously and
+     * for most cases were there is more than one source we cannot tell what source will
+     * be loaded, without re-implementing the source selection algorithm. At this time we are not
+     * going to do that. There are three special cases that we do handle here though:
+     *
+     * 1. If there are no sources, do not fire `sourceset`.
+     * 2. If there is only one `<source>` with a `src` property/attribute that is our `src`
+     * 3. If there is more than one `<source>` but all of them have the same `src` url.
+     *    That will be our src.
+     */
+    const sources = tech.$$('source');
+    const srcUrls = [];
+    let src = '';
+
+    // if there are no sources, do not fire sourceset
+    if (!sources.length) {
+      return false;
+    }
+
+    // only count valid/non-duplicate source elements
+    for (let i = 0; i < sources.length; i++) {
+      const url = sources[i].src;
+      if (url && srcUrls.indexOf(url) === -1) {
+        srcUrls.push(url);
+      }
+    }
+
+    // there were no valid sources
+    if (!srcUrls.length) {
+      return false;
+    }
+
+    // there is only one valid source element url
+    // use that
+    if (srcUrls.length === 1) {
+      src = srcUrls[0];
+    }
+    tech.triggerSourceset(src);
+    return true;
+  };
+
+  /**
+   * our implementation of an `innerHTML` descriptor for browsers
+   * that do not have one.
+   */
+  const innerHTMLDescriptorPolyfill = Object.defineProperty({}, 'innerHTML', {
+    get() {
+      return this.cloneNode(true).innerHTML;
+    },
+    set(v) {
+      // make a dummy node to use innerHTML on
+      const dummy = document.createElement(this.nodeName.toLowerCase());
+
+      // set innerHTML to the value provided
+      dummy.innerHTML = v;
+
+      // make a document fragment to hold the nodes from dummy
+      const docFrag = document.createDocumentFragment();
+
+      // copy all of the nodes created by the innerHTML on dummy
+      // to the document fragment
+      while (dummy.childNodes.length) {
+        docFrag.appendChild(dummy.childNodes[0]);
+      }
+
+      // remove content
+      this.innerText = '';
+
+      // now we add all of that html in one by appending the
+      // document fragment. This is how innerHTML does it.
+      window.Element.prototype.appendChild.call(this, docFrag);
+
+      // then return the result that innerHTML's setter would
+      return this.innerHTML;
+    }
+  });
+
+  /**
+   * Get a property descriptor given a list of priorities and the
+   * property to get.
+   */
+  const getDescriptor = (priority, prop) => {
+    let descriptor = {};
+    for (let i = 0; i < priority.length; i++) {
+      descriptor = Object.getOwnPropertyDescriptor(priority[i], prop);
+      if (descriptor && descriptor.set && descriptor.get) {
+        break;
+      }
+    }
+    descriptor.enumerable = true;
+    descriptor.configurable = true;
+    return descriptor;
+  };
+  const getInnerHTMLDescriptor = tech => getDescriptor([tech.el(), window.HTMLMediaElement.prototype, window.Element.prototype, innerHTMLDescriptorPolyfill], 'innerHTML');
+
+  /**
+   * Patches browser internal functions so that we can tell synchronously
+   * if a `<source>` was appended to the media element. For some reason this
+   * causes a `sourceset` if the the media element is ready and has no source.
+   * This happens when:
+   * - The page has just loaded and the media element does not have a source.
+   * - The media element was emptied of all sources, then `load()` was called.
+   *
+   * It does this by patching the following functions/properties when they are supported:
+   *
+   * - `append()` - can be used to add a `<source>` element to the media element
+   * - `appendChild()` - can be used to add a `<source>` element to the media element
+   * - `insertAdjacentHTML()` -  can be used to add a `<source>` element to the media element
+   * - `innerHTML` -  can be used to add a `<source>` element to the media element
+   *
+   * @param {Html5} tech
+   *        The tech object that sourceset is being setup on.
+   */
+  const firstSourceWatch = function (tech) {
+    const el = tech.el();
+
+    // make sure firstSourceWatch isn't setup twice.
+    if (el.resetSourceWatch_) {
+      return;
+    }
+    const old = {};
+    const innerDescriptor = getInnerHTMLDescriptor(tech);
+    const appendWrapper = appendFn => (...args) => {
+      const retval = appendFn.apply(el, args);
+      sourcesetLoad(tech);
+      return retval;
+    };
+    ['append', 'appendChild', 'insertAdjacentHTML'].forEach(k => {
+      if (!el[k]) {
+        return;
+      }
+
+      // store the old function
+      old[k] = el[k];
+
+      // call the old function with a sourceset if a source
+      // was loaded
+      el[k] = appendWrapper(old[k]);
+    });
+    Object.defineProperty(el, 'innerHTML', merge(innerDescriptor, {
+      set: appendWrapper(innerDescriptor.set)
+    }));
+    el.resetSourceWatch_ = () => {
+      el.resetSourceWatch_ = null;
+      Object.keys(old).forEach(k => {
+        el[k] = old[k];
+      });
+      Object.defineProperty(el, 'innerHTML', innerDescriptor);
+    };
+
+    // on the first sourceset, we need to revert our changes
+    tech.one('sourceset', el.resetSourceWatch_);
+  };
+
+  /**
+   * our implementation of a `src` descriptor for browsers
+   * that do not have one
+   */
+  const srcDescriptorPolyfill = Object.defineProperty({}, 'src', {
+    get() {
+      if (this.hasAttribute('src')) {
+        return getAbsoluteURL(window.Element.prototype.getAttribute.call(this, 'src'));
+      }
+      return '';
+    },
+    set(v) {
+      window.Element.prototype.setAttribute.call(this, 'src', v);
+      return v;
+    }
+  });
+  const getSrcDescriptor = tech => getDescriptor([tech.el(), window.HTMLMediaElement.prototype, srcDescriptorPolyfill], 'src');
+
+  /**
+   * setup `sourceset` handling on the `Html5` tech. This function
+   * patches the following element properties/functions:
+   *
+   * - `src` - to determine when `src` is set
+   * - `setAttribute()` - to determine when `src` is set
+   * - `load()` - this re-triggers the source selection algorithm, and can
+   *              cause a sourceset.
+   *
+   * If there is no source when we are adding `sourceset` support or during a `load()`
+   * we also patch the functions listed in `firstSourceWatch`.
+   *
+   * @param {Html5} tech
+   *        The tech to patch
+   */
+  const setupSourceset = function (tech) {
+    if (!tech.featuresSourceset) {
+      return;
+    }
+    const el = tech.el();
+
+    // make sure sourceset isn't setup twice.
+    if (el.resetSourceset_) {
+      return;
+    }
+    const srcDescriptor = getSrcDescriptor(tech);
+    const oldSetAttribute = el.setAttribute;
+    const oldLoad = el.load;
+    Object.defineProperty(el, 'src', merge(srcDescriptor, {
+      set: v => {
+        const retval = srcDescriptor.set.call(el, v);
+
+        // we use the getter here to get the actual value set on src
+        tech.triggerSourceset(el.src);
+        return retval;
+      }
+    }));
+    el.setAttribute = (n, v) => {
+      const retval = oldSetAttribute.call(el, n, v);
+      if (/src/i.test(n)) {
+        tech.triggerSourceset(el.src);
+      }
+      return retval;
+    };
+    el.load = () => {
+      const retval = oldLoad.call(el);
+
+      // if load was called, but there was no source to fire
+      // sourceset on. We have to watch for a source append
+      // as that can trigger a `sourceset` when the media element
+      // has no source
+      if (!sourcesetLoad(tech)) {
+        tech.triggerSourceset('');
+        firstSourceWatch(tech);
+      }
+      return retval;
+    };
+    if (el.currentSrc) {
+      tech.triggerSourceset(el.currentSrc);
+    } else if (!sourcesetLoad(tech)) {
+      firstSourceWatch(tech);
+    }
+    el.resetSourceset_ = () => {
+      el.resetSourceset_ = null;
+      el.load = oldLoad;
+      el.setAttribute = oldSetAttribute;
+      Object.defineProperty(el, 'src', srcDescriptor);
+      if (el.resetSourceWatch_) {
+        el.resetSourceWatch_();
+      }
+    };
+  };
+
+  /**
+   * @file html5.js
+   */
+
+  /**
+   * HTML5 Media Controller - Wrapper for HTML5 Media API
+   *
+   * @mixes Tech~SourceHandlerAdditions
+   * @extends Tech
+   */
+  class Html5 extends Tech {
+    /**
+    * Create an instance of this Tech.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    *
+    * @param {Function} [ready]
+    *        Callback function to call when the `HTML5` Tech is ready.
+    */
+    constructor(options, ready) {
+      super(options, ready);
+      const source = options.source;
+      let crossoriginTracks = false;
+      this.featuresVideoFrameCallback = this.featuresVideoFrameCallback && this.el_.tagName === 'VIDEO';
+
+      // Set the source if one is provided
+      // 1) Check if the source is new (if not, we want to keep the original so playback isn't interrupted)
+      // 2) Check to see if the network state of the tag was failed at init, and if so, reset the source
+      // anyway so the error gets fired.
+      if (source && (this.el_.currentSrc !== source.src || options.tag && options.tag.initNetworkState_ === 3)) {
+        this.setSource(source);
+      } else {
+        this.handleLateInit_(this.el_);
+      }
+
+      // setup sourceset after late sourceset/init
+      if (options.enableSourceset) {
+        this.setupSourcesetHandling_();
+      }
+      this.isScrubbing_ = false;
+      if (this.el_.hasChildNodes()) {
+        const nodes = this.el_.childNodes;
+        let nodesLength = nodes.length;
+        const removeNodes = [];
+        while (nodesLength--) {
+          const node = nodes[nodesLength];
+          const nodeName = node.nodeName.toLowerCase();
+          if (nodeName === 'track') {
+            if (!this.featuresNativeTextTracks) {
+              // Empty video tag tracks so the built-in player doesn't use them also.
+              // This may not be fast enough to stop HTML5 browsers from reading the tags
+              // so we'll need to turn off any default tracks if we're manually doing
+              // captions and subtitles. videoElement.textTracks
+              removeNodes.push(node);
+            } else {
+              // store HTMLTrackElement and TextTrack to remote list
+              this.remoteTextTrackEls().addTrackElement_(node);
+              this.remoteTextTracks().addTrack(node.track);
+              this.textTracks().addTrack(node.track);
+              if (!crossoriginTracks && !this.el_.hasAttribute('crossorigin') && isCrossOrigin(node.src)) {
+                crossoriginTracks = true;
+              }
+            }
+          }
+        }
+        for (let i = 0; i < removeNodes.length; i++) {
+          this.el_.removeChild(removeNodes[i]);
+        }
+      }
+      this.proxyNativeTracks_();
+      if (this.featuresNativeTextTracks && crossoriginTracks) {
+        log.warn('Text Tracks are being loaded from another origin but the crossorigin attribute isn\'t used.\n' + 'This may prevent text tracks from loading.');
+      }
+
+      // prevent iOS Safari from disabling metadata text tracks during native playback
+      this.restoreMetadataTracksInIOSNativePlayer_();
+
+      // Determine if native controls should be used
+      // Our goal should be to get the custom controls on mobile solid everywhere
+      // so we can remove this all together. Right now this will block custom
+      // controls on touch enabled laptops like the Chrome Pixel
+      if ((TOUCH_ENABLED || IS_IPHONE) && options.nativeControlsForTouch === true) {
+        this.setControls(true);
+      }
+
+      // on iOS, we want to proxy `webkitbeginfullscreen` and `webkitendfullscreen`
+      // into a `fullscreenchange` event
+      this.proxyWebkitFullscreen_();
+      this.triggerReady();
+    }
+
+    /**
+     * Dispose of `HTML5` media element and remove all tracks.
+     */
+    dispose() {
+      if (this.el_ && this.el_.resetSourceset_) {
+        this.el_.resetSourceset_();
+      }
+      Html5.disposeMediaElement(this.el_);
+      this.options_ = null;
+
+      // tech will handle clearing of the emulated track list
+      super.dispose();
+    }
+
+    /**
+     * Modify the media element so that we can detect when
+     * the source is changed. Fires `sourceset` just after the source has changed
+     */
+    setupSourcesetHandling_() {
+      setupSourceset(this);
+    }
+
+    /**
+     * When a captions track is enabled in the iOS Safari native player, all other
+     * tracks are disabled (including metadata tracks), which nulls all of their
+     * associated cue points. This will restore metadata tracks to their pre-fullscreen
+     * state in those cases so that cue points are not needlessly lost.
+     *
+     * @private
+     */
+    restoreMetadataTracksInIOSNativePlayer_() {
+      const textTracks = this.textTracks();
+      let metadataTracksPreFullscreenState;
+
+      // captures a snapshot of every metadata track's current state
+      const takeMetadataTrackSnapshot = () => {
+        metadataTracksPreFullscreenState = [];
+        for (let i = 0; i < textTracks.length; i++) {
+          const track = textTracks[i];
+          if (track.kind === 'metadata') {
+            metadataTracksPreFullscreenState.push({
+              track,
+              storedMode: track.mode
+            });
+          }
+        }
+      };
+
+      // snapshot each metadata track's initial state, and update the snapshot
+      // each time there is a track 'change' event
+      takeMetadataTrackSnapshot();
+      textTracks.addEventListener('change', takeMetadataTrackSnapshot);
+      this.on('dispose', () => textTracks.removeEventListener('change', takeMetadataTrackSnapshot));
+      const restoreTrackMode = () => {
+        for (let i = 0; i < metadataTracksPreFullscreenState.length; i++) {
+          const storedTrack = metadataTracksPreFullscreenState[i];
+          if (storedTrack.track.mode === 'disabled' && storedTrack.track.mode !== storedTrack.storedMode) {
+            storedTrack.track.mode = storedTrack.storedMode;
+          }
+        }
+        // we only want this handler to be executed on the first 'change' event
+        textTracks.removeEventListener('change', restoreTrackMode);
+      };
+
+      // when we enter fullscreen playback, stop updating the snapshot and
+      // restore all track modes to their pre-fullscreen state
+      this.on('webkitbeginfullscreen', () => {
+        textTracks.removeEventListener('change', takeMetadataTrackSnapshot);
+
+        // remove the listener before adding it just in case it wasn't previously removed
+        textTracks.removeEventListener('change', restoreTrackMode);
+        textTracks.addEventListener('change', restoreTrackMode);
+      });
+
+      // start updating the snapshot again after leaving fullscreen
+      this.on('webkitendfullscreen', () => {
+        // remove the listener before adding it just in case it wasn't previously removed
+        textTracks.removeEventListener('change', takeMetadataTrackSnapshot);
+        textTracks.addEventListener('change', takeMetadataTrackSnapshot);
+
+        // remove the restoreTrackMode handler in case it wasn't triggered during fullscreen playback
+        textTracks.removeEventListener('change', restoreTrackMode);
+      });
+    }
+
+    /**
+     * Attempt to force override of tracks for the given type
+     *
+     * @param {string} type - Track type to override, possible values include 'Audio',
+     * 'Video', and 'Text'.
+     * @param {boolean} override - If set to true native audio/video will be overridden,
+     * otherwise native audio/video will potentially be used.
+     * @private
+     */
+    overrideNative_(type, override) {
+      // If there is no behavioral change don't add/remove listeners
+      if (override !== this[`featuresNative${type}Tracks`]) {
+        return;
+      }
+      const lowerCaseType = type.toLowerCase();
+      if (this[`${lowerCaseType}TracksListeners_`]) {
+        Object.keys(this[`${lowerCaseType}TracksListeners_`]).forEach(eventName => {
+          const elTracks = this.el()[`${lowerCaseType}Tracks`];
+          elTracks.removeEventListener(eventName, this[`${lowerCaseType}TracksListeners_`][eventName]);
+        });
+      }
+      this[`featuresNative${type}Tracks`] = !override;
+      this[`${lowerCaseType}TracksListeners_`] = null;
+      this.proxyNativeTracksForType_(lowerCaseType);
+    }
+
+    /**
+     * Attempt to force override of native audio tracks.
+     *
+     * @param {boolean} override - If set to true native audio will be overridden,
+     * otherwise native audio will potentially be used.
+     */
+    overrideNativeAudioTracks(override) {
+      this.overrideNative_('Audio', override);
+    }
+
+    /**
+     * Attempt to force override of native video tracks.
+     *
+     * @param {boolean} override - If set to true native video will be overridden,
+     * otherwise native video will potentially be used.
+     */
+    overrideNativeVideoTracks(override) {
+      this.overrideNative_('Video', override);
+    }
+
+    /**
+     * Proxy native track list events for the given type to our track
+     * lists if the browser we are playing in supports that type of track list.
+     *
+     * @param {string} name - Track type; values include 'audio', 'video', and 'text'
+     * @private
+     */
+    proxyNativeTracksForType_(name) {
+      const props = NORMAL[name];
+      const elTracks = this.el()[props.getterName];
+      const techTracks = this[props.getterName]();
+      if (!this[`featuresNative${props.capitalName}Tracks`] || !elTracks || !elTracks.addEventListener) {
+        return;
+      }
+      const listeners = {
+        change: e => {
+          const event = {
+            type: 'change',
+            target: techTracks,
+            currentTarget: techTracks,
+            srcElement: techTracks
+          };
+          techTracks.trigger(event);
+
+          // if we are a text track change event, we should also notify the
+          // remote text track list. This can potentially cause a false positive
+          // if we were to get a change event on a non-remote track and
+          // we triggered the event on the remote text track list which doesn't
+          // contain that track. However, best practices mean looping through the
+          // list of tracks and searching for the appropriate mode value, so,
+          // this shouldn't pose an issue
+          if (name === 'text') {
+            this[REMOTE.remoteText.getterName]().trigger(event);
+          }
+        },
+        addtrack(e) {
+          techTracks.addTrack(e.track);
+        },
+        removetrack(e) {
+          techTracks.removeTrack(e.track);
+        }
+      };
+      const removeOldTracks = function () {
+        const removeTracks = [];
+        for (let i = 0; i < techTracks.length; i++) {
+          let found = false;
+          for (let j = 0; j < elTracks.length; j++) {
+            if (elTracks[j] === techTracks[i]) {
+              found = true;
+              break;
+            }
+          }
+          if (!found) {
+            removeTracks.push(techTracks[i]);
+          }
+        }
+        while (removeTracks.length) {
+          techTracks.removeTrack(removeTracks.shift());
+        }
+      };
+      this[props.getterName + 'Listeners_'] = listeners;
+      Object.keys(listeners).forEach(eventName => {
+        const listener = listeners[eventName];
+        elTracks.addEventListener(eventName, listener);
+        this.on('dispose', e => elTracks.removeEventListener(eventName, listener));
+      });
+
+      // Remove (native) tracks that are not used anymore
+      this.on('loadstart', removeOldTracks);
+      this.on('dispose', e => this.off('loadstart', removeOldTracks));
+    }
+
+    /**
+     * Proxy all native track list events to our track lists if the browser we are playing
+     * in supports that type of track list.
+     *
+     * @private
+     */
+    proxyNativeTracks_() {
+      NORMAL.names.forEach(name => {
+        this.proxyNativeTracksForType_(name);
+      });
+    }
+
+    /**
+     * Create the `Html5` Tech's DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      let el = this.options_.tag;
+
+      // Check if this browser supports moving the element into the box.
+      // On the iPhone video will break if you move the element,
+      // So we have to create a brand new element.
+      // If we ingested the player div, we do not need to move the media element.
+      if (!el || !(this.options_.playerElIngest || this.movingMediaElementInDOM)) {
+        // If the original tag is still there, clone and remove it.
+        if (el) {
+          const clone = el.cloneNode(true);
+          if (el.parentNode) {
+            el.parentNode.insertBefore(clone, el);
+          }
+          Html5.disposeMediaElement(el);
+          el = clone;
+        } else {
+          el = document.createElement('video');
+
+          // determine if native controls should be used
+          const tagAttributes = this.options_.tag && getAttributes(this.options_.tag);
+          const attributes = merge({}, tagAttributes);
+          if (!TOUCH_ENABLED || this.options_.nativeControlsForTouch !== true) {
+            delete attributes.controls;
+          }
+          setAttributes(el, Object.assign(attributes, {
+            id: this.options_.techId,
+            class: 'vjs-tech'
+          }));
+        }
+        el.playerId = this.options_.playerId;
+      }
+      if (typeof this.options_.preload !== 'undefined') {
+        setAttribute(el, 'preload', this.options_.preload);
+      }
+      if (this.options_.disablePictureInPicture !== undefined) {
+        el.disablePictureInPicture = this.options_.disablePictureInPicture;
+      }
+
+      // Update specific tag settings, in case they were overridden
+      // `autoplay` has to be *last* so that `muted` and `playsinline` are present
+      // when iOS/Safari or other browsers attempt to autoplay.
+      const settingsAttrs = ['loop', 'muted', 'playsinline', 'autoplay'];
+      for (let i = 0; i < settingsAttrs.length; i++) {
+        const attr = settingsAttrs[i];
+        const value = this.options_[attr];
+        if (typeof value !== 'undefined') {
+          if (value) {
+            setAttribute(el, attr, attr);
+          } else {
+            removeAttribute(el, attr);
+          }
+          el[attr] = value;
+        }
+      }
+      return el;
+    }
+
+    /**
+     * This will be triggered if the loadstart event has already fired, before videojs was
+     * ready. Two known examples of when this can happen are:
+     * 1. If we're loading the playback object after it has started loading
+     * 2. The media is already playing the (often with autoplay on) then
+     *
+     * This function will fire another loadstart so that videojs can catchup.
+     *
+     * @fires Tech#loadstart
+     *
+     * @return {undefined}
+     *         returns nothing.
+     */
+    handleLateInit_(el) {
+      if (el.networkState === 0 || el.networkState === 3) {
+        // The video element hasn't started loading the source yet
+        // or didn't find a source
+        return;
+      }
+      if (el.readyState === 0) {
+        // NetworkState is set synchronously BUT loadstart is fired at the
+        // end of the current stack, usually before setInterval(fn, 0).
+        // So at this point we know loadstart may have already fired or is
+        // about to fire, and either way the player hasn't seen it yet.
+        // We don't want to fire loadstart prematurely here and cause a
+        // double loadstart so we'll wait and see if it happens between now
+        // and the next loop, and fire it if not.
+        // HOWEVER, we also want to make sure it fires before loadedmetadata
+        // which could also happen between now and the next loop, so we'll
+        // watch for that also.
+        let loadstartFired = false;
+        const setLoadstartFired = function () {
+          loadstartFired = true;
+        };
+        this.on('loadstart', setLoadstartFired);
+        const triggerLoadstart = function () {
+          // We did miss the original loadstart. Make sure the player
+          // sees loadstart before loadedmetadata
+          if (!loadstartFired) {
+            this.trigger('loadstart');
+          }
+        };
+        this.on('loadedmetadata', triggerLoadstart);
+        this.ready(function () {
+          this.off('loadstart', setLoadstartFired);
+          this.off('loadedmetadata', triggerLoadstart);
+          if (!loadstartFired) {
+            // We did miss the original native loadstart. Fire it now.
+            this.trigger('loadstart');
+          }
+        });
+        return;
+      }
+
+      // From here on we know that loadstart already fired and we missed it.
+      // The other readyState events aren't as much of a problem if we double
+      // them, so not going to go to as much trouble as loadstart to prevent
+      // that unless we find reason to.
+      const eventsToTrigger = ['loadstart'];
+
+      // loadedmetadata: newly equal to HAVE_METADATA (1) or greater
+      eventsToTrigger.push('loadedmetadata');
+
+      // loadeddata: newly increased to HAVE_CURRENT_DATA (2) or greater
+      if (el.readyState >= 2) {
+        eventsToTrigger.push('loadeddata');
+      }
+
+      // canplay: newly increased to HAVE_FUTURE_DATA (3) or greater
+      if (el.readyState >= 3) {
+        eventsToTrigger.push('canplay');
+      }
+
+      // canplaythrough: newly equal to HAVE_ENOUGH_DATA (4)
+      if (el.readyState >= 4) {
+        eventsToTrigger.push('canplaythrough');
+      }
+
+      // We still need to give the player time to add event listeners
+      this.ready(function () {
+        eventsToTrigger.forEach(function (type) {
+          this.trigger(type);
+        }, this);
+      });
+    }
+
+    /**
+     * Set whether we are scrubbing or not.
+     * This is used to decide whether we should use `fastSeek` or not.
+     * `fastSeek` is used to provide trick play on Safari browsers.
+     *
+     * @param {boolean} isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     */
+    setScrubbing(isScrubbing) {
+      this.isScrubbing_ = isScrubbing;
+    }
+
+    /**
+     * Get whether we are scrubbing or not.
+     *
+     * @return {boolean} isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     */
+    scrubbing() {
+      return this.isScrubbing_;
+    }
+
+    /**
+     * Set current time for the `HTML5` tech.
+     *
+     * @param {number} seconds
+     *        Set the current time of the media to this.
+     */
+    setCurrentTime(seconds) {
+      try {
+        if (this.isScrubbing_ && this.el_.fastSeek && IS_ANY_SAFARI) {
+          this.el_.fastSeek(seconds);
+        } else {
+          this.el_.currentTime = seconds;
+        }
+      } catch (e) {
+        log(e, 'Video is not ready. (Video.js)');
+        // this.warning(VideoJS.warnings.videoNotReady);
+      }
+    }
+
+    /**
+     * Get the current duration of the HTML5 media element.
+     *
+     * @return {number}
+     *         The duration of the media or 0 if there is no duration.
+     */
+    duration() {
+      // Android Chrome will report duration as Infinity for VOD HLS until after
+      // playback has started, which triggers the live display erroneously.
+      // Return NaN if playback has not started and trigger a durationupdate once
+      // the duration can be reliably known.
+      if (this.el_.duration === Infinity && IS_ANDROID && IS_CHROME && this.el_.currentTime === 0) {
+        // Wait for the first `timeupdate` with currentTime > 0 - there may be
+        // several with 0
+        const checkProgress = () => {
+          if (this.el_.currentTime > 0) {
+            // Trigger durationchange for genuinely live video
+            if (this.el_.duration === Infinity) {
+              this.trigger('durationchange');
+            }
+            this.off('timeupdate', checkProgress);
+          }
+        };
+        this.on('timeupdate', checkProgress);
+        return NaN;
+      }
+      return this.el_.duration || NaN;
+    }
+
+    /**
+     * Get the current width of the HTML5 media element.
+     *
+     * @return {number}
+     *         The width of the HTML5 media element.
+     */
+    width() {
+      return this.el_.offsetWidth;
+    }
+
+    /**
+     * Get the current height of the HTML5 media element.
+     *
+     * @return {number}
+     *         The height of the HTML5 media element.
+     */
+    height() {
+      return this.el_.offsetHeight;
+    }
+
+    /**
+     * Proxy iOS `webkitbeginfullscreen` and `webkitendfullscreen` into
+     * `fullscreenchange` event.
+     *
+     * @private
+     * @fires fullscreenchange
+     * @listens webkitendfullscreen
+     * @listens webkitbeginfullscreen
+     * @listens webkitbeginfullscreen
+     */
+    proxyWebkitFullscreen_() {
+      if (!('webkitDisplayingFullscreen' in this.el_)) {
+        return;
+      }
+      const endFn = function () {
+        this.trigger('fullscreenchange', {
+          isFullscreen: false
+        });
+        // Safari will sometimes set controls on the videoelement when existing fullscreen.
+        if (this.el_.controls && !this.options_.nativeControlsForTouch && this.controls()) {
+          this.el_.controls = false;
+        }
+      };
+      const beginFn = function () {
+        if ('webkitPresentationMode' in this.el_ && this.el_.webkitPresentationMode !== 'picture-in-picture') {
+          this.one('webkitendfullscreen', endFn);
+          this.trigger('fullscreenchange', {
+            isFullscreen: true,
+            // set a flag in case another tech triggers fullscreenchange
+            nativeIOSFullscreen: true
+          });
+        }
+      };
+      this.on('webkitbeginfullscreen', beginFn);
+      this.on('dispose', () => {
+        this.off('webkitbeginfullscreen', beginFn);
+        this.off('webkitendfullscreen', endFn);
+      });
+    }
+
+    /**
+     * Check if fullscreen is supported on the video el.
+     *
+     * @return {boolean}
+     *         - True if fullscreen is supported.
+     *         - False if fullscreen is not supported.
+     */
+    supportsFullScreen() {
+      return typeof this.el_.webkitEnterFullScreen === 'function';
+    }
+
+    /**
+     * Request that the `HTML5` Tech enter fullscreen.
+     */
+    enterFullScreen() {
+      const video = this.el_;
+      if (video.paused && video.networkState <= video.HAVE_METADATA) {
+        // attempt to prime the video element for programmatic access
+        // this isn't necessary on the desktop but shouldn't hurt
+        silencePromise(this.el_.play());
+
+        // playing and pausing synchronously during the transition to fullscreen
+        // can get iOS ~6.1 devices into a play/pause loop
+        this.setTimeout(function () {
+          video.pause();
+          try {
+            video.webkitEnterFullScreen();
+          } catch (e) {
+            this.trigger('fullscreenerror', e);
+          }
+        }, 0);
+      } else {
+        try {
+          video.webkitEnterFullScreen();
+        } catch (e) {
+          this.trigger('fullscreenerror', e);
+        }
+      }
+    }
+
+    /**
+     * Request that the `HTML5` Tech exit fullscreen.
+     */
+    exitFullScreen() {
+      if (!this.el_.webkitDisplayingFullscreen) {
+        this.trigger('fullscreenerror', new Error('The video is not fullscreen'));
+        return;
+      }
+      this.el_.webkitExitFullScreen();
+    }
+
+    /**
+     * Create a floating video window always on top of other windows so that users may
+     * continue consuming media while they interact with other content sites, or
+     * applications on their device.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @return {Promise}
+     *         A promise with a Picture-in-Picture window.
+     */
+    requestPictureInPicture() {
+      return this.el_.requestPictureInPicture();
+    }
+
+    /**
+     * Native requestVideoFrameCallback if supported by browser/tech, or fallback
+     * Don't use rVCF on Safari when DRM is playing, as it doesn't fire
+     * Needs to be checked later than the constructor
+     * This will be a false positive for clear sources loaded after a Fairplay source
+     *
+     * @param {function} cb function to call
+     * @return {number} id of request
+     */
+    requestVideoFrameCallback(cb) {
+      if (this.featuresVideoFrameCallback && !this.el_.webkitKeys) {
+        return this.el_.requestVideoFrameCallback(cb);
+      }
+      return super.requestVideoFrameCallback(cb);
+    }
+
+    /**
+     * Native or fallback requestVideoFrameCallback
+     *
+     * @param {number} id request id to cancel
+     */
+    cancelVideoFrameCallback(id) {
+      if (this.featuresVideoFrameCallback && !this.el_.webkitKeys) {
+        this.el_.cancelVideoFrameCallback(id);
+      } else {
+        super.cancelVideoFrameCallback(id);
+      }
+    }
+
+    /**
+     * A getter/setter for the `Html5` Tech's source object.
+     * > Note: Please use {@link Html5#setSource}
+     *
+     * @param {Tech~SourceObject} [src]
+     *        The source object you want to set on the `HTML5` techs element.
+     *
+     * @return {Tech~SourceObject|undefined}
+     *         - The current source object when a source is not passed in.
+     *         - undefined when setting
+     *
+     * @deprecated Since version 5.
+     */
+    src(src) {
+      if (src === undefined) {
+        return this.el_.src;
+      }
+
+      // Setting src through `src` instead of `setSrc` will be deprecated
+      this.setSrc(src);
+    }
+
+    /**
+     * Reset the tech by removing all sources and then calling
+     * {@link Html5.resetMediaElement}.
+     */
+    reset() {
+      Html5.resetMediaElement(this.el_);
+    }
+
+    /**
+     * Get the current source on the `HTML5` Tech. Falls back to returning the source from
+     * the HTML5 media element.
+     *
+     * @return {Tech~SourceObject}
+     *         The current source object from the HTML5 tech. With a fallback to the
+     *         elements source.
+     */
+    currentSrc() {
+      if (this.currentSource_) {
+        return this.currentSource_.src;
+      }
+      return this.el_.currentSrc;
+    }
+
+    /**
+     * Set controls attribute for the HTML5 media Element.
+     *
+     * @param {string} val
+     *        Value to set the controls attribute to
+     */
+    setControls(val) {
+      this.el_.controls = !!val;
+    }
+
+    /**
+     * Create and returns a remote {@link TextTrack} object.
+     *
+     * @param {string} kind
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+     *
+     * @param {string} [label]
+     *        Label to identify the text track
+     *
+     * @param {string} [language]
+     *        Two letter language abbreviation
+     *
+     * @return {TextTrack}
+     *         The TextTrack that gets created.
+     */
+    addTextTrack(kind, label, language) {
+      if (!this.featuresNativeTextTracks) {
+        return super.addTextTrack(kind, label, language);
+      }
+      return this.el_.addTextTrack(kind, label, language);
+    }
+
+    /**
+     * Creates either native TextTrack or an emulated TextTrack depending
+     * on the value of `featuresNativeTextTracks`
+     *
+     * @param {Object} options
+     *        The object should contain the options to initialize the TextTrack with.
+     *
+     * @param {string} [options.kind]
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+     *
+     * @param {string} [options.label]
+     *        Label to identify the text track
+     *
+     * @param {string} [options.language]
+     *        Two letter language abbreviation.
+     *
+     * @param {boolean} [options.default]
+     *        Default this track to on.
+     *
+     * @param {string} [options.id]
+     *        The internal id to assign this track.
+     *
+     * @param {string} [options.src]
+     *        A source url for the track.
+     *
+     * @return {HTMLTrackElement}
+     *         The track element that gets created.
+     */
+    createRemoteTextTrack(options) {
+      if (!this.featuresNativeTextTracks) {
+        return super.createRemoteTextTrack(options);
+      }
+      const htmlTrackElement = document.createElement('track');
+      if (options.kind) {
+        htmlTrackElement.kind = options.kind;
+      }
+      if (options.label) {
+        htmlTrackElement.label = options.label;
+      }
+      if (options.language || options.srclang) {
+        htmlTrackElement.srclang = options.language || options.srclang;
+      }
+      if (options.default) {
+        htmlTrackElement.default = options.default;
+      }
+      if (options.id) {
+        htmlTrackElement.id = options.id;
+      }
+      if (options.src) {
+        htmlTrackElement.src = options.src;
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Creates a remote text track object and returns an html track element.
+     *
+     * @param {Object} options The object should contain values for
+     * kind, language, label, and src (location of the WebVTT file)
+     * @param {boolean} [manualCleanup=false] if set to true, the TextTrack
+     * will not be removed from the TextTrackList and HtmlTrackElementList
+     * after a source change
+     * @return {HTMLTrackElement} An Html Track Element.
+     * This can be an emulated {@link HTMLTrackElement} or a native one.
+     *
+     */
+    addRemoteTextTrack(options, manualCleanup) {
+      const htmlTrackElement = super.addRemoteTextTrack(options, manualCleanup);
+      if (this.featuresNativeTextTracks) {
+        this.el().appendChild(htmlTrackElement);
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Remove remote `TextTrack` from `TextTrackList` object
+     *
+     * @param {TextTrack} track
+     *        `TextTrack` object to remove
+     */
+    removeRemoteTextTrack(track) {
+      super.removeRemoteTextTrack(track);
+      if (this.featuresNativeTextTracks) {
+        const tracks = this.$$('track');
+        let i = tracks.length;
+        while (i--) {
+          if (track === tracks[i] || track === tracks[i].track) {
+            this.el().removeChild(tracks[i]);
+          }
+        }
+      }
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object}
+     *         An object with supported media playback quality metrics
+     */
+    getVideoPlaybackQuality() {
+      if (typeof this.el().getVideoPlaybackQuality === 'function') {
+        return this.el().getVideoPlaybackQuality();
+      }
+      const videoPlaybackQuality = {};
+      if (typeof this.el().webkitDroppedFrameCount !== 'undefined' && typeof this.el().webkitDecodedFrameCount !== 'undefined') {
+        videoPlaybackQuality.droppedVideoFrames = this.el().webkitDroppedFrameCount;
+        videoPlaybackQuality.totalVideoFrames = this.el().webkitDecodedFrameCount;
+      }
+      if (window.performance) {
+        videoPlaybackQuality.creationTime = window.performance.now();
+      }
+      return videoPlaybackQuality;
+    }
+  }
+
+  /* HTML5 Support Testing ---------------------------------------------------- */
+
+  /**
+   * Element for testing browser HTML5 media capabilities
+   *
+   * @type {Element}
+   * @constant
+   * @private
+   */
+  defineLazyProperty(Html5, 'TEST_VID', function () {
+    if (!isReal()) {
+      return;
+    }
+    const video = document.createElement('video');
+    const track = document.createElement('track');
+    track.kind = 'captions';
+    track.srclang = 'en';
+    track.label = 'English';
+    video.appendChild(track);
+    return video;
+  });
+
+  /**
+   * Check if HTML5 media is supported by this browser/device.
+   *
+   * @return {boolean}
+   *         - True if HTML5 media is supported.
+   *         - False if HTML5 media is not supported.
+   */
+  Html5.isSupported = function () {
+    // IE with no Media Player is a LIAR! (#984)
+    try {
+      Html5.TEST_VID.volume = 0.5;
+    } catch (e) {
+      return false;
+    }
+    return !!(Html5.TEST_VID && Html5.TEST_VID.canPlayType);
+  };
+
+  /**
+   * Check if the tech can support the given type
+   *
+   * @param {string} type
+   *        The mimetype to check
+   * @return {string} 'probably', 'maybe', or '' (empty string)
+   */
+  Html5.canPlayType = function (type) {
+    return Html5.TEST_VID.canPlayType(type);
+  };
+
+  /**
+   * Check if the tech can support the given source
+   *
+   * @param {Object} srcObj
+   *        The source object
+   * @param {Object} options
+   *        The options passed to the tech
+   * @return {string} 'probably', 'maybe', or '' (empty string)
+   */
+  Html5.canPlaySource = function (srcObj, options) {
+    return Html5.canPlayType(srcObj.type);
+  };
+
+  /**
+   * Check if the volume can be changed in this browser/device.
+   * Volume cannot be changed in a lot of mobile devices.
+   * Specifically, it can't be changed from 1 on iOS.
+   *
+   * @return {boolean}
+   *         - True if volume can be controlled
+   *         - False otherwise
+   */
+  Html5.canControlVolume = function () {
+    // IE will error if Windows Media Player not installed #3315
+    try {
+      const volume = Html5.TEST_VID.volume;
+      Html5.TEST_VID.volume = volume / 2 + 0.1;
+      const canControl = volume !== Html5.TEST_VID.volume;
+
+      // With the introduction of iOS 15, there are cases where the volume is read as
+      // changed but reverts back to its original state at the start of the next tick.
+      // To determine whether volume can be controlled on iOS,
+      // a timeout is set and the volume is checked asynchronously.
+      // Since `features` doesn't currently work asynchronously, the value is manually set.
+      if (canControl && IS_IOS) {
+        window.setTimeout(() => {
+          if (Html5 && Html5.prototype) {
+            Html5.prototype.featuresVolumeControl = volume !== Html5.TEST_VID.volume;
+          }
+        });
+
+        // default iOS to false, which will be updated in the timeout above.
+        return false;
+      }
+      return canControl;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if the volume can be muted in this browser/device.
+   * Some devices, e.g. iOS, don't allow changing volume
+   * but permits muting/unmuting.
+   *
+   * @return {boolean}
+   *      - True if volume can be muted
+   *      - False otherwise
+   */
+  Html5.canMuteVolume = function () {
+    try {
+      const muted = Html5.TEST_VID.muted;
+
+      // in some versions of iOS muted property doesn't always
+      // work, so we want to set both property and attribute
+      Html5.TEST_VID.muted = !muted;
+      if (Html5.TEST_VID.muted) {
+        setAttribute(Html5.TEST_VID, 'muted', 'muted');
+      } else {
+        removeAttribute(Html5.TEST_VID, 'muted', 'muted');
+      }
+      return muted !== Html5.TEST_VID.muted;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if the playback rate can be changed in this browser/device.
+   *
+   * @return {boolean}
+   *         - True if playback rate can be controlled
+   *         - False otherwise
+   */
+  Html5.canControlPlaybackRate = function () {
+    // Playback rate API is implemented in Android Chrome, but doesn't do anything
+    // https://github.com/videojs/video.js/issues/3180
+    if (IS_ANDROID && IS_CHROME && CHROME_VERSION < 58) {
+      return false;
+    }
+    // IE will error if Windows Media Player not installed #3315
+    try {
+      const playbackRate = Html5.TEST_VID.playbackRate;
+      Html5.TEST_VID.playbackRate = playbackRate / 2 + 0.1;
+      return playbackRate !== Html5.TEST_VID.playbackRate;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if we can override a video/audio elements attributes, with
+   * Object.defineProperty.
+   *
+   * @return {boolean}
+   *         - True if builtin attributes can be overridden
+   *         - False otherwise
+   */
+  Html5.canOverrideAttributes = function () {
+    // if we cannot overwrite the src/innerHTML property, there is no support
+    // iOS 7 safari for instance cannot do this.
+    try {
+      const noop = () => {};
+      Object.defineProperty(document.createElement('video'), 'src', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('audio'), 'src', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('video'), 'innerHTML', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('audio'), 'innerHTML', {
+        get: noop,
+        set: noop
+      });
+    } catch (e) {
+      return false;
+    }
+    return true;
+  };
+
+  /**
+   * Check to see if native `TextTrack`s are supported by this browser/device.
+   *
+   * @return {boolean}
+   *         - True if native `TextTrack`s are supported.
+   *         - False otherwise
+   */
+  Html5.supportsNativeTextTracks = function () {
+    return IS_ANY_SAFARI || IS_IOS && IS_CHROME;
+  };
+
+  /**
+   * Check to see if native `VideoTrack`s are supported by this browser/device
+   *
+   * @return {boolean}
+   *        - True if native `VideoTrack`s are supported.
+   *        - False otherwise
+   */
+  Html5.supportsNativeVideoTracks = function () {
+    return !!(Html5.TEST_VID && Html5.TEST_VID.videoTracks);
+  };
+
+  /**
+   * Check to see if native `AudioTrack`s are supported by this browser/device
+   *
+   * @return {boolean}
+   *        - True if native `AudioTrack`s are supported.
+   *        - False otherwise
+   */
+  Html5.supportsNativeAudioTracks = function () {
+    return !!(Html5.TEST_VID && Html5.TEST_VID.audioTracks);
+  };
+
+  /**
+   * An array of events available on the Html5 tech.
+   *
+   * @private
+   * @type {Array}
+   */
+  Html5.Events = ['loadstart', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'seeking', 'seeked', 'ended', 'durationchange', 'timeupdate', 'progress', 'play', 'pause', 'ratechange', 'resize', 'volumechange'];
+
+  /**
+   * Boolean indicating whether the `Tech` supports volume control.
+   *
+   * @type {boolean}
+   * @default {@link Html5.canControlVolume}
+   */
+  /**
+   * Boolean indicating whether the `Tech` supports muting volume.
+   *
+   * @type {boolean}
+   * @default {@link Html5.canMuteVolume}
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports changing the speed at which the media
+   * plays. Examples:
+   *   - Set player to play 2x (twice) as fast
+   *   - Set player to play 0.5x (half) as fast
+   *
+   * @type {boolean}
+   * @default {@link Html5.canControlPlaybackRate}
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `sourceset` event.
+   *
+   * @type {boolean}
+   * @default
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `TextTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeTextTracks}
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `VideoTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeVideoTracks}
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `AudioTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeAudioTracks}
+   */
+  [['featuresMuteControl', 'canMuteVolume'], ['featuresPlaybackRate', 'canControlPlaybackRate'], ['featuresSourceset', 'canOverrideAttributes'], ['featuresNativeTextTracks', 'supportsNativeTextTracks'], ['featuresNativeVideoTracks', 'supportsNativeVideoTracks'], ['featuresNativeAudioTracks', 'supportsNativeAudioTracks']].forEach(function ([key, fn]) {
+    defineLazyProperty(Html5.prototype, key, () => Html5[fn](), true);
+  });
+  Html5.prototype.featuresVolumeControl = Html5.canControlVolume();
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the media element
+   * moving in the DOM. iOS breaks if you move the media element, so this is set this to
+   * false there. Everywhere else this should be true.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.movingMediaElementInDOM = !IS_IOS;
+
+  // TODO: Previous comment: No longer appears to be used. Can probably be removed.
+  //       Is this true?
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports automatic media resize
+   * when going into fullscreen.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.featuresFullscreenResize = true;
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the progress event.
+   * If this is false, manual `progress` events will be triggered instead.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.featuresProgressEvents = true;
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the timeupdate event.
+   * If this is false, manual `timeupdate` events will be triggered instead.
+   *
+   * @default
+   */
+  Html5.prototype.featuresTimeupdateEvents = true;
+
+  /**
+   * Whether the HTML5 el supports `requestVideoFrameCallback`
+   *
+   * @type {boolean}
+   */
+  Html5.prototype.featuresVideoFrameCallback = !!(Html5.TEST_VID && Html5.TEST_VID.requestVideoFrameCallback);
+  Html5.disposeMediaElement = function (el) {
+    if (!el) {
+      return;
+    }
+    if (el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+
+    // remove any child track or source nodes to prevent their loading
+    while (el.hasChildNodes()) {
+      el.removeChild(el.firstChild);
+    }
+
+    // remove any src reference. not setting `src=''` because that causes a warning
+    // in firefox
+    el.removeAttribute('src');
+
+    // force the media element to update its loading state by calling load()
+    // however IE on Windows 7N has a bug that throws an error so need a try/catch (#793)
+    if (typeof el.load === 'function') {
+      // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+      (function () {
+        try {
+          el.load();
+        } catch (e) {
+          // not supported
+        }
+      })();
+    }
+  };
+  Html5.resetMediaElement = function (el) {
+    if (!el) {
+      return;
+    }
+    const sources = el.querySelectorAll('source');
+    let i = sources.length;
+    while (i--) {
+      el.removeChild(sources[i]);
+    }
+
+    // remove any src reference.
+    // not setting `src=''` because that throws an error
+    el.removeAttribute('src');
+    if (typeof el.load === 'function') {
+      // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+      (function () {
+        try {
+          el.load();
+        } catch (e) {
+          // satisfy linter
+        }
+      })();
+    }
+  };
+
+  /* Native HTML5 element property wrapping ----------------------------------- */
+  // Wrap native boolean attributes with getters that check both property and attribute
+  // The list is as followed:
+  // muted, defaultMuted, autoplay, controls, loop, playsinline
+  [
+  /**
+   * Get the value of `muted` from the media element. `muted` indicates
+   * that the volume for the media should be set to silent. This does not actually change
+   * the `volume` attribute.
+   *
+   * @method Html5#muted
+   * @return {boolean}
+   *         - True if the value of `volume` should be ignored and the audio set to silent.
+   *         - False if the value of `volume` should be used.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted}
+   */
+  'muted',
+  /**
+   * Get the value of `defaultMuted` from the media element. `defaultMuted` indicates
+   * whether the media should start muted or not. Only changes the default state of the
+   * media. `muted` and `defaultMuted` can have different values. {@link Html5#muted} indicates the
+   * current state.
+   *
+   * @method Html5#defaultMuted
+   * @return {boolean}
+   *         - The value of `defaultMuted` from the media element.
+   *         - True indicates that the media should start muted.
+   *         - False indicates that the media should not start muted
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted}
+   */
+  'defaultMuted',
+  /**
+   * Get the value of `autoplay` from the media element. `autoplay` indicates
+   * that the media should start to play as soon as the page is ready.
+   *
+   * @method Html5#autoplay
+   * @return {boolean}
+   *         - The value of `autoplay` from the media element.
+   *         - True indicates that the media should start as soon as the page loads.
+   *         - False indicates that the media should not start as soon as the page loads.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay}
+   */
+  'autoplay',
+  /**
+   * Get the value of `controls` from the media element. `controls` indicates
+   * whether the native media controls should be shown or hidden.
+   *
+   * @method Html5#controls
+   * @return {boolean}
+   *         - The value of `controls` from the media element.
+   *         - True indicates that native controls should be showing.
+   *         - False indicates that native controls should be hidden.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-controls}
+   */
+  'controls',
+  /**
+   * Get the value of `loop` from the media element. `loop` indicates
+   * that the media should return to the start of the media and continue playing once
+   * it reaches the end.
+   *
+   * @method Html5#loop
+   * @return {boolean}
+   *         - The value of `loop` from the media element.
+   *         - True indicates that playback should seek back to start once
+   *           the end of a media is reached.
+   *         - False indicates that playback should not loop back to the start when the
+   *           end of the media is reached.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop}
+   */
+  'loop',
+  /**
+   * Get the value of `playsinline` from the media element. `playsinline` indicates
+   * to the browser that non-fullscreen playback is preferred when fullscreen
+   * playback is the native default, such as in iOS Safari.
+   *
+   * @method Html5#playsinline
+   * @return {boolean}
+   *         - The value of `playsinline` from the media element.
+   *         - True indicates that the media should play inline.
+   *         - False indicates that the media should not play inline.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+   */
+  'playsinline'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop] || this.el_.hasAttribute(prop);
+    };
+  });
+
+  // Wrap native boolean attributes with setters that set both property and attribute
+  // The list is as followed:
+  // setMuted, setDefaultMuted, setAutoplay, setLoop, setPlaysinline
+  // setControls is special-cased above
+  [
+  /**
+   * Set the value of `muted` on the media element. `muted` indicates that the current
+   * audio level should be silent.
+   *
+   * @method Html5#setMuted
+   * @param {boolean} muted
+   *        - True if the audio should be set to silent
+   *        - False otherwise
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted}
+   */
+  'muted',
+  /**
+   * Set the value of `defaultMuted` on the media element. `defaultMuted` indicates that the current
+   * audio level should be silent, but will only effect the muted level on initial playback..
+   *
+   * @method Html5.prototype.setDefaultMuted
+   * @param {boolean} defaultMuted
+   *        - True if the audio should be set to silent
+   *        - False otherwise
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted}
+   */
+  'defaultMuted',
+  /**
+   * Set the value of `autoplay` on the media element. `autoplay` indicates
+   * that the media should start to play as soon as the page is ready.
+   *
+   * @method Html5#setAutoplay
+   * @param {boolean} autoplay
+   *         - True indicates that the media should start as soon as the page loads.
+   *         - False indicates that the media should not start as soon as the page loads.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay}
+   */
+  'autoplay',
+  /**
+   * Set the value of `loop` on the media element. `loop` indicates
+   * that the media should return to the start of the media and continue playing once
+   * it reaches the end.
+   *
+   * @method Html5#setLoop
+   * @param {boolean} loop
+   *         - True indicates that playback should seek back to start once
+   *           the end of a media is reached.
+   *         - False indicates that playback should not loop back to the start when the
+   *           end of the media is reached.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop}
+   */
+  'loop',
+  /**
+   * Set the value of `playsinline` from the media element. `playsinline` indicates
+   * to the browser that non-fullscreen playback is preferred when fullscreen
+   * playback is the native default, such as in iOS Safari.
+   *
+   * @method Html5#setPlaysinline
+   * @param {boolean} playsinline
+   *         - True indicates that the media should play inline.
+   *         - False indicates that the media should not play inline.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+   */
+  'playsinline'].forEach(function (prop) {
+    Html5.prototype['set' + toTitleCase(prop)] = function (v) {
+      this.el_[prop] = v;
+      if (v) {
+        this.el_.setAttribute(prop, prop);
+      } else {
+        this.el_.removeAttribute(prop);
+      }
+    };
+  });
+
+  // Wrap native properties with a getter
+  // The list is as followed
+  // paused, currentTime, buffered, volume, poster, preload, error, seeking
+  // seekable, ended, playbackRate, defaultPlaybackRate, disablePictureInPicture
+  // played, networkState, readyState, videoWidth, videoHeight, crossOrigin
+  [
+  /**
+   * Get the value of `paused` from the media element. `paused` indicates whether the media element
+   * is currently paused or not.
+   *
+   * @method Html5#paused
+   * @return {boolean}
+   *         The value of `paused` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-paused}
+   */
+  'paused',
+  /**
+   * Get the value of `currentTime` from the media element. `currentTime` indicates
+   * the current second that the media is at in playback.
+   *
+   * @method Html5#currentTime
+   * @return {number}
+   *         The value of `currentTime` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-currenttime}
+   */
+  'currentTime',
+  /**
+   * Get the value of `buffered` from the media element. `buffered` is a `TimeRange`
+   * object that represents the parts of the media that are already downloaded and
+   * available for playback.
+   *
+   * @method Html5#buffered
+   * @return {TimeRange}
+   *         The value of `buffered` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-buffered}
+   */
+  'buffered',
+  /**
+   * Get the value of `volume` from the media element. `volume` indicates
+   * the current playback volume of audio for a media. `volume` will be a value from 0
+   * (silent) to 1 (loudest and default).
+   *
+   * @method Html5#volume
+   * @return {number}
+   *         The value of `volume` from the media element. Value will be between 0-1.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume}
+   */
+  'volume',
+  /**
+   * Get the value of `poster` from the media element. `poster` indicates
+   * that the url of an image file that can/will be shown when no media data is available.
+   *
+   * @method Html5#poster
+   * @return {string}
+   *         The value of `poster` from the media element. Value will be a url to an
+   *         image.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-video-poster}
+   */
+  'poster',
+  /**
+   * Get the value of `preload` from the media element. `preload` indicates
+   * what should download before the media is interacted with. It can have the following
+   * values:
+   * - none: nothing should be downloaded
+   * - metadata: poster and the first few frames of the media may be downloaded to get
+   *   media dimensions and other metadata
+   * - auto: allow the media and metadata for the media to be downloaded before
+   *    interaction
+   *
+   * @method Html5#preload
+   * @return {string}
+   *         The value of `preload` from the media element. Will be 'none', 'metadata',
+   *         or 'auto'.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload}
+   */
+  'preload',
+  /**
+   * Get the value of the `error` from the media element. `error` indicates any
+   * MediaError that may have occurred during playback. If error returns null there is no
+   * current error.
+   *
+   * @method Html5#error
+   * @return {MediaError|null}
+   *         The value of `error` from the media element. Will be `MediaError` if there
+   *         is a current error and null otherwise.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-error}
+   */
+  'error',
+  /**
+   * Get the value of `seeking` from the media element. `seeking` indicates whether the
+   * media is currently seeking to a new position or not.
+   *
+   * @method Html5#seeking
+   * @return {boolean}
+   *         - The value of `seeking` from the media element.
+   *         - True indicates that the media is currently seeking to a new position.
+   *         - False indicates that the media is not seeking to a new position at this time.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seeking}
+   */
+  'seeking',
+  /**
+   * Get the value of `seekable` from the media element. `seekable` returns a
+   * `TimeRange` object indicating ranges of time that can currently be `seeked` to.
+   *
+   * @method Html5#seekable
+   * @return {TimeRange}
+   *         The value of `seekable` from the media element. A `TimeRange` object
+   *         indicating the current ranges of time that can be seeked to.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seekable}
+   */
+  'seekable',
+  /**
+   * Get the value of `ended` from the media element. `ended` indicates whether
+   * the media has reached the end or not.
+   *
+   * @method Html5#ended
+   * @return {boolean}
+   *         - The value of `ended` from the media element.
+   *         - True indicates that the media has ended.
+   *         - False indicates that the media has not ended.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-ended}
+   */
+  'ended',
+  /**
+   * Get the value of `playbackRate` from the media element. `playbackRate` indicates
+   * the rate at which the media is currently playing back. Examples:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5#playbackRate
+   * @return {number}
+   *         The value of `playbackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'playbackRate',
+  /**
+   * Get the value of `defaultPlaybackRate` from the media element. `defaultPlaybackRate` indicates
+   * the rate at which the media is currently playing back. This value will not indicate the current
+   * `playbackRate` after playback has started, use {@link Html5#playbackRate} for that.
+   *
+   * Examples:
+   *   - if defaultPlaybackRate is set to 2, media will play twice as fast.
+   *   - if defaultPlaybackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5.prototype.defaultPlaybackRate
+   * @return {number}
+   *         The value of `defaultPlaybackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'defaultPlaybackRate',
+  /**
+   * Get the value of 'disablePictureInPicture' from the video element.
+   *
+   * @method Html5#disablePictureInPicture
+   * @return {boolean} value
+   *         - The value of `disablePictureInPicture` from the video element.
+   *         - True indicates that the video can't be played in Picture-In-Picture mode
+   *         - False indicates that the video can be played in Picture-In-Picture mode
+   *
+   * @see [Spec]{@link https://w3c.github.io/picture-in-picture/#disable-pip}
+   */
+  'disablePictureInPicture',
+  /**
+   * Get the value of `played` from the media element. `played` returns a `TimeRange`
+   * object representing points in the media timeline that have been played.
+   *
+   * @method Html5#played
+   * @return {TimeRange}
+   *         The value of `played` from the media element. A `TimeRange` object indicating
+   *         the ranges of time that have been played.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-played}
+   */
+  'played',
+  /**
+   * Get the value of `networkState` from the media element. `networkState` indicates
+   * the current network state. It returns an enumeration from the following list:
+   * - 0: NETWORK_EMPTY
+   * - 1: NETWORK_IDLE
+   * - 2: NETWORK_LOADING
+   * - 3: NETWORK_NO_SOURCE
+   *
+   * @method Html5#networkState
+   * @return {number}
+   *         The value of `networkState` from the media element. This will be a number
+   *         from the list in the description.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-networkstate}
+   */
+  'networkState',
+  /**
+   * Get the value of `readyState` from the media element. `readyState` indicates
+   * the current state of the media element. It returns an enumeration from the
+   * following list:
+   * - 0: HAVE_NOTHING
+   * - 1: HAVE_METADATA
+   * - 2: HAVE_CURRENT_DATA
+   * - 3: HAVE_FUTURE_DATA
+   * - 4: HAVE_ENOUGH_DATA
+   *
+   * @method Html5#readyState
+   * @return {number}
+   *         The value of `readyState` from the media element. This will be a number
+   *         from the list in the description.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#ready-states}
+   */
+  'readyState',
+  /**
+   * Get the value of `videoWidth` from the video element. `videoWidth` indicates
+   * the current width of the video in css pixels.
+   *
+   * @method Html5#videoWidth
+   * @return {number}
+   *         The value of `videoWidth` from the video element. This will be a number
+   *         in css pixels.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth}
+   */
+  'videoWidth',
+  /**
+   * Get the value of `videoHeight` from the video element. `videoHeight` indicates
+   * the current height of the video in css pixels.
+   *
+   * @method Html5#videoHeight
+   * @return {number}
+   *         The value of `videoHeight` from the video element. This will be a number
+   *         in css pixels.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth}
+   */
+  'videoHeight',
+  /**
+   * Get the value of `crossOrigin` from the media element. `crossOrigin` indicates
+   * to the browser that should sent the cookies along with the requests for the
+   * different assets/playlists
+   *
+   * @method Html5#crossOrigin
+   * @return {string}
+   *         - anonymous indicates that the media should not sent cookies.
+   *         - use-credentials indicates that the media should sent cookies along the requests.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-media-crossorigin}
+   */
+  'crossOrigin'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop];
+    };
+  });
+
+  // Wrap native properties with a setter in this format:
+  // set + toTitleCase(name)
+  // The list is as follows:
+  // setVolume, setSrc, setPoster, setPreload, setPlaybackRate, setDefaultPlaybackRate,
+  // setDisablePictureInPicture, setCrossOrigin
+  [
+  /**
+   * Set the value of `volume` on the media element. `volume` indicates the current
+   * audio level as a percentage in decimal form. This means that 1 is 100%, 0.5 is 50%, and
+   * so on.
+   *
+   * @method Html5#setVolume
+   * @param {number} percentAsDecimal
+   *        The volume percent as a decimal. Valid range is from 0-1.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume}
+   */
+  'volume',
+  /**
+   * Set the value of `src` on the media element. `src` indicates the current
+   * {@link Tech~SourceObject} for the media.
+   *
+   * @method Html5#setSrc
+   * @param {Tech~SourceObject} src
+   *        The source object to set as the current source.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-src}
+   */
+  'src',
+  /**
+   * Set the value of `poster` on the media element. `poster` is the url to
+   * an image file that can/will be shown when no media data is available.
+   *
+   * @method Html5#setPoster
+   * @param {string} poster
+   *        The url to an image that should be used as the `poster` for the media
+   *        element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-poster}
+   */
+  'poster',
+  /**
+   * Set the value of `preload` on the media element. `preload` indicates
+   * what should download before the media is interacted with. It can have the following
+   * values:
+   * - none: nothing should be downloaded
+   * - metadata: poster and the first few frames of the media may be downloaded to get
+   *   media dimensions and other metadata
+   * - auto: allow the media and metadata for the media to be downloaded before
+   *    interaction
+   *
+   * @method Html5#setPreload
+   * @param {string} preload
+   *         The value of `preload` to set on the media element. Must be 'none', 'metadata',
+   *         or 'auto'.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload}
+   */
+  'preload',
+  /**
+   * Set the value of `playbackRate` on the media element. `playbackRate` indicates
+   * the rate at which the media should play back. Examples:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5#setPlaybackRate
+   * @return {number}
+   *         The value of `playbackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'playbackRate',
+  /**
+   * Set the value of `defaultPlaybackRate` on the media element. `defaultPlaybackRate` indicates
+   * the rate at which the media should play back upon initial startup. Changing this value
+   * after a video has started will do nothing. Instead you should used {@link Html5#setPlaybackRate}.
+   *
+   * Example Values:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5.prototype.setDefaultPlaybackRate
+   * @return {number}
+   *         The value of `defaultPlaybackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultplaybackrate}
+   */
+  'defaultPlaybackRate',
+  /**
+   * Prevents the browser from suggesting a Picture-in-Picture context menu
+   * or to request Picture-in-Picture automatically in some cases.
+   *
+   * @method Html5#setDisablePictureInPicture
+   * @param {boolean} value
+   *         The true value will disable Picture-in-Picture mode.
+   *
+   * @see [Spec]{@link https://w3c.github.io/picture-in-picture/#disable-pip}
+   */
+  'disablePictureInPicture',
+  /**
+   * Set the value of `crossOrigin` from the media element. `crossOrigin` indicates
+   * to the browser that should sent the cookies along with the requests for the
+   * different assets/playlists
+   *
+   * @method Html5#setCrossOrigin
+   * @param {string} crossOrigin
+   *         - anonymous indicates that the media should not sent cookies.
+   *         - use-credentials indicates that the media should sent cookies along the requests.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-media-crossorigin}
+   */
+  'crossOrigin'].forEach(function (prop) {
+    Html5.prototype['set' + toTitleCase(prop)] = function (v) {
+      this.el_[prop] = v;
+    };
+  });
+
+  // wrap native functions with a function
+  // The list is as follows:
+  // pause, load, play
+  [
+  /**
+   * A wrapper around the media elements `pause` function. This will call the `HTML5`
+   * media elements `pause` function.
+   *
+   * @method Html5#pause
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-pause}
+   */
+  'pause',
+  /**
+   * A wrapper around the media elements `load` function. This will call the `HTML5`s
+   * media element `load` function.
+   *
+   * @method Html5#load
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-load}
+   */
+  'load',
+  /**
+   * A wrapper around the media elements `play` function. This will call the `HTML5`s
+   * media element `play` function.
+   *
+   * @method Html5#play
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-play}
+   */
+  'play'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop]();
+    };
+  });
+  Tech.withSourceHandlers(Html5);
+
+  /**
+   * Native source handler for Html5, simply passes the source to the media element.
+   *
+   * @property {Tech~SourceObject} source
+   *        The source object
+   *
+   * @property {Html5} tech
+   *        The instance of the HTML5 tech.
+   */
+  Html5.nativeSourceHandler = {};
+
+  /**
+   * Check if the media element can play the given mime type.
+   *
+   * @param {string} type
+   *        The mimetype to check
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string)
+   */
+  Html5.nativeSourceHandler.canPlayType = function (type) {
+    // IE without MediaPlayer throws an error (#519)
+    try {
+      return Html5.TEST_VID.canPlayType(type);
+    } catch (e) {
+      return '';
+    }
+  };
+
+  /**
+   * Check if the media element can handle a source natively.
+   *
+   * @param {Tech~SourceObject} source
+   *         The source object
+   *
+   * @param {Object} [options]
+   *         Options to be passed to the tech.
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string).
+   */
+  Html5.nativeSourceHandler.canHandleSource = function (source, options) {
+    // If a type was provided we should rely on that
+    if (source.type) {
+      return Html5.nativeSourceHandler.canPlayType(source.type);
+
+      // If no type, fall back to checking 'video/[EXTENSION]'
+    } else if (source.src) {
+      const ext = getFileExtension(source.src);
+      return Html5.nativeSourceHandler.canPlayType(`video/${ext}`);
+    }
+    return '';
+  };
+
+  /**
+   * Pass the source to the native media element.
+   *
+   * @param {Tech~SourceObject} source
+   *        The source object
+   *
+   * @param {Html5} tech
+   *        The instance of the Html5 tech
+   *
+   * @param {Object} [options]
+   *        The options to pass to the source
+   */
+  Html5.nativeSourceHandler.handleSource = function (source, tech, options) {
+    tech.setSrc(source.src);
+  };
+
+  /**
+   * A noop for the native dispose function, as cleanup is not needed.
+   */
+  Html5.nativeSourceHandler.dispose = function () {};
+
+  // Register the native source handler
+  Html5.registerSourceHandler(Html5.nativeSourceHandler);
+  Tech.registerTech('Html5', Html5);
+
+  /**
+   * @file player.js
+   */
+
+  // The following tech events are simply re-triggered
+  // on the player when they happen
+  const TECH_EVENTS_RETRIGGER = [
+  /**
+   * Fired while the user agent is downloading media data.
+   *
+   * @event Player#progress
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `progress` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechProgress_
+   * @fires Player#progress
+   * @listens Tech#progress
+   */
+  'progress',
+  /**
+   * Fires when the loading of an audio/video is aborted.
+   *
+   * @event Player#abort
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `abort` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechAbort_
+   * @fires Player#abort
+   * @listens Tech#abort
+   */
+  'abort',
+  /**
+   * Fires when the browser is intentionally not getting media data.
+   *
+   * @event Player#suspend
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `suspend` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechSuspend_
+   * @fires Player#suspend
+   * @listens Tech#suspend
+   */
+  'suspend',
+  /**
+   * Fires when the current playlist is empty.
+   *
+   * @event Player#emptied
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `emptied` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechEmptied_
+   * @fires Player#emptied
+   * @listens Tech#emptied
+   */
+  'emptied',
+  /**
+   * Fires when the browser is trying to get media data, but data is not available.
+   *
+   * @event Player#stalled
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `stalled` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechStalled_
+   * @fires Player#stalled
+   * @listens Tech#stalled
+   */
+  'stalled',
+  /**
+   * Fires when the browser has loaded meta data for the audio/video.
+   *
+   * @event Player#loadedmetadata
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `loadedmetadata` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechLoadedmetadata_
+   * @fires Player#loadedmetadata
+   * @listens Tech#loadedmetadata
+   */
+  'loadedmetadata',
+  /**
+   * Fires when the browser has loaded the current frame of the audio/video.
+   *
+   * @event Player#loadeddata
+   * @type {event}
+   */
+  /**
+   * Retrigger the `loadeddata` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechLoaddeddata_
+   * @fires Player#loadeddata
+   * @listens Tech#loadeddata
+   */
+  'loadeddata',
+  /**
+   * Fires when the current playback position has changed.
+   *
+   * @event Player#timeupdate
+   * @type {event}
+   */
+  /**
+   * Retrigger the `timeupdate` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechTimeUpdate_
+   * @fires Player#timeupdate
+   * @listens Tech#timeupdate
+   */
+  'timeupdate',
+  /**
+   * Fires when the video's intrinsic dimensions change
+   *
+   * @event Player#resize
+   * @type {event}
+   */
+  /**
+   * Retrigger the `resize` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechResize_
+   * @fires Player#resize
+   * @listens Tech#resize
+   */
+  'resize',
+  /**
+   * Fires when the volume has been changed
+   *
+   * @event Player#volumechange
+   * @type {event}
+   */
+  /**
+   * Retrigger the `volumechange` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechVolumechange_
+   * @fires Player#volumechange
+   * @listens Tech#volumechange
+   */
+  'volumechange',
+  /**
+   * Fires when the text track has been changed
+   *
+   * @event Player#texttrackchange
+   * @type {event}
+   */
+  /**
+   * Retrigger the `texttrackchange` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechTexttrackchange_
+   * @fires Player#texttrackchange
+   * @listens Tech#texttrackchange
+   */
+  'texttrackchange'];
+
+  // events to queue when playback rate is zero
+  // this is a hash for the sole purpose of mapping non-camel-cased event names
+  // to camel-cased function names
+  const TECH_EVENTS_QUEUE = {
+    canplay: 'CanPlay',
+    canplaythrough: 'CanPlayThrough',
+    playing: 'Playing',
+    seeked: 'Seeked'
+  };
+  const BREAKPOINT_ORDER = ['tiny', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'huge'];
+  const BREAKPOINT_CLASSES = {};
+
+  // grep: vjs-layout-tiny
+  // grep: vjs-layout-x-small
+  // grep: vjs-layout-small
+  // grep: vjs-layout-medium
+  // grep: vjs-layout-large
+  // grep: vjs-layout-x-large
+  // grep: vjs-layout-huge
+  BREAKPOINT_ORDER.forEach(k => {
+    const v = k.charAt(0) === 'x' ? `x-${k.substring(1)}` : k;
+    BREAKPOINT_CLASSES[k] = `vjs-layout-${v}`;
+  });
+  const DEFAULT_BREAKPOINTS = {
+    tiny: 210,
+    xsmall: 320,
+    small: 425,
+    medium: 768,
+    large: 1440,
+    xlarge: 2560,
+    huge: Infinity
+  };
+
+  /**
+   * An instance of the `Player` class is created when any of the Video.js setup methods
+   * are used to initialize a video.
+   *
+   * After an instance has been created it can be accessed globally in three ways:
+   * 1. By calling `videojs.getPlayer('example_video_1');`
+   * 2. By calling `videojs('example_video_1');` (not recommended)
+   * 2. By using it directly via `videojs.players.example_video_1;`
+   *
+   * @extends Component
+   * @global
+   */
+  class Player extends Component {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Element} tag
+     *        The original video DOM element used for configuring options.
+     *
+     * @param {Object} [options]
+     *        Object of option names and values.
+     *
+     * @param {Function} [ready]
+     *        Ready callback function.
+     */
+    constructor(tag, options, ready) {
+      // Make sure tag ID exists
+      // also here.. probably better
+      tag.id = tag.id || options.id || `vjs_video_${newGUID()}`;
+
+      // Set Options
+      // The options argument overrides options set in the video tag
+      // which overrides globally set options.
+      // This latter part coincides with the load order
+      // (tag must exist before Player)
+      options = Object.assign(Player.getTagSettings(tag), options);
+
+      // Delay the initialization of children because we need to set up
+      // player properties first, and can't use `this` before `super()`
+      options.initChildren = false;
+
+      // Same with creating the element
+      options.createEl = false;
+
+      // don't auto mixin the evented mixin
+      options.evented = false;
+
+      // we don't want the player to report touch activity on itself
+      // see enableTouchActivity in Component
+      options.reportTouchActivity = false;
+
+      // If language is not set, get the closest lang attribute
+      if (!options.language) {
+        const closest = tag.closest('[lang]');
+        if (closest) {
+          options.language = closest.getAttribute('lang');
+        }
+      }
+
+      // Run base component initializing with new options
+      super(null, options, ready);
+
+      // Create bound methods for document listeners.
+      this.boundDocumentFullscreenChange_ = e => this.documentFullscreenChange_(e);
+      this.boundFullWindowOnEscKey_ = e => this.fullWindowOnEscKey(e);
+      this.boundUpdateStyleEl_ = e => this.updateStyleEl_(e);
+      this.boundApplyInitTime_ = e => this.applyInitTime_(e);
+      this.boundUpdateCurrentBreakpoint_ = e => this.updateCurrentBreakpoint_(e);
+      this.boundHandleTechClick_ = e => this.handleTechClick_(e);
+      this.boundHandleTechDoubleClick_ = e => this.handleTechDoubleClick_(e);
+      this.boundHandleTechTouchStart_ = e => this.handleTechTouchStart_(e);
+      this.boundHandleTechTouchMove_ = e => this.handleTechTouchMove_(e);
+      this.boundHandleTechTouchEnd_ = e => this.handleTechTouchEnd_(e);
+      this.boundHandleTechTap_ = e => this.handleTechTap_(e);
+
+      // default isFullscreen_ to false
+      this.isFullscreen_ = false;
+
+      // create logger
+      this.log = createLogger(this.id_);
+
+      // Hold our own reference to fullscreen api so it can be mocked in tests
+      this.fsApi_ = FullscreenApi;
+
+      // Tracks when a tech changes the poster
+      this.isPosterFromTech_ = false;
+
+      // Holds callback info that gets queued when playback rate is zero
+      // and a seek is happening
+      this.queuedCallbacks_ = [];
+
+      // Turn off API access because we're loading a new tech that might load asynchronously
+      this.isReady_ = false;
+
+      // Init state hasStarted_
+      this.hasStarted_ = false;
+
+      // Init state userActive_
+      this.userActive_ = false;
+
+      // Init debugEnabled_
+      this.debugEnabled_ = false;
+
+      // Init state audioOnlyMode_
+      this.audioOnlyMode_ = false;
+
+      // Init state audioPosterMode_
+      this.audioPosterMode_ = false;
+
+      // Init state audioOnlyCache_
+      this.audioOnlyCache_ = {
+        playerHeight: null,
+        hiddenChildren: []
+      };
+
+      // if the global option object was accidentally blown away by
+      // someone, bail early with an informative error
+      if (!this.options_ || !this.options_.techOrder || !this.options_.techOrder.length) {
+        throw new Error('No techOrder specified. Did you overwrite ' + 'videojs.options instead of just changing the ' + 'properties you want to override?');
+      }
+
+      // Store the original tag used to set options
+      this.tag = tag;
+
+      // Store the tag attributes used to restore html5 element
+      this.tagAttributes = tag && getAttributes(tag);
+
+      // Update current language
+      this.language(this.options_.language);
+
+      // Update Supported Languages
+      if (options.languages) {
+        // Normalise player option languages to lowercase
+        const languagesToLower = {};
+        Object.getOwnPropertyNames(options.languages).forEach(function (name) {
+          languagesToLower[name.toLowerCase()] = options.languages[name];
+        });
+        this.languages_ = languagesToLower;
+      } else {
+        this.languages_ = Player.prototype.options_.languages;
+      }
+      this.resetCache_();
+
+      // Set poster
+      /** @type string */
+      this.poster_ = options.poster || '';
+
+      // Set controls
+      /** @type {boolean} */
+      this.controls_ = !!options.controls;
+
+      // Original tag settings stored in options
+      // now remove immediately so native controls don't flash.
+      // May be turned back on by HTML5 tech if nativeControlsForTouch is true
+      tag.controls = false;
+      tag.removeAttribute('controls');
+      this.changingSrc_ = false;
+      this.playCallbacks_ = [];
+      this.playTerminatedQueue_ = [];
+
+      // the attribute overrides the option
+      if (tag.hasAttribute('autoplay')) {
+        this.autoplay(true);
+      } else {
+        // otherwise use the setter to validate and
+        // set the correct value.
+        this.autoplay(this.options_.autoplay);
+      }
+
+      // check plugins
+      if (options.plugins) {
+        Object.keys(options.plugins).forEach(name => {
+          if (typeof this[name] !== 'function') {
+            throw new Error(`plugin "${name}" does not exist`);
+          }
+        });
+      }
+
+      /*
+       * Store the internal state of scrubbing
+       *
+       * @private
+       * @return {Boolean} True if the user is scrubbing
+       */
+      this.scrubbing_ = false;
+      this.el_ = this.createEl();
+
+      // Make this an evented object and use `el_` as its event bus.
+      evented(this, {
+        eventBusKey: 'el_'
+      });
+
+      // listen to document and player fullscreenchange handlers so we receive those events
+      // before a user can receive them so we can update isFullscreen appropriately.
+      // make sure that we listen to fullscreenchange events before everything else to make sure that
+      // our isFullscreen method is updated properly for internal components as well as external.
+      if (this.fsApi_.requestFullscreen) {
+        on(document, this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+        this.on(this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+      }
+      if (this.fluid_) {
+        this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+      }
+      // We also want to pass the original player options to each component and plugin
+      // as well so they don't need to reach back into the player for options later.
+      // We also need to do another copy of this.options_ so we don't end up with
+      // an infinite loop.
+      const playerOptionsCopy = merge(this.options_);
+
+      // Load plugins
+      if (options.plugins) {
+        Object.keys(options.plugins).forEach(name => {
+          this[name](options.plugins[name]);
+        });
+      }
+
+      // Enable debug mode to fire debugon event for all plugins.
+      if (options.debug) {
+        this.debug(true);
+      }
+      this.options_.playerOptions = playerOptionsCopy;
+      this.middleware_ = [];
+      this.playbackRates(options.playbackRates);
+      if (options.experimentalSvgIcons) {
+        // Add SVG Sprite to the DOM
+        const parser = new window.DOMParser();
+        const parsedSVG = parser.parseFromString(icons, 'image/svg+xml');
+        const errorNode = parsedSVG.querySelector('parsererror');
+        if (errorNode) {
+          log.warn('Failed to load SVG Icons. Falling back to Font Icons.');
+          this.options_.experimentalSvgIcons = null;
+        } else {
+          const sprite = parsedSVG.documentElement;
+          sprite.style.display = 'none';
+          this.el_.appendChild(sprite);
+          this.addClass('vjs-svg-icons-enabled');
+        }
+      }
+      this.initChildren();
+
+      // Set isAudio based on whether or not an audio tag was used
+      this.isAudio(tag.nodeName.toLowerCase() === 'audio');
+
+      // Update controls className. Can't do this when the controls are initially
+      // set because the element doesn't exist yet.
+      if (this.controls()) {
+        this.addClass('vjs-controls-enabled');
+      } else {
+        this.addClass('vjs-controls-disabled');
+      }
+
+      // Set ARIA label and region role depending on player type
+      this.el_.setAttribute('role', 'region');
+      if (this.isAudio()) {
+        this.el_.setAttribute('aria-label', this.localize('Audio Player'));
+      } else {
+        this.el_.setAttribute('aria-label', this.localize('Video Player'));
+      }
+      if (this.isAudio()) {
+        this.addClass('vjs-audio');
+      }
+
+      // TODO: Make this smarter. Toggle user state between touching/mousing
+      // using events, since devices can have both touch and mouse events.
+      // TODO: Make this check be performed again when the window switches between monitors
+      // (See https://github.com/videojs/video.js/issues/5683)
+      if (TOUCH_ENABLED) {
+        this.addClass('vjs-touch-enabled');
+      }
+
+      // iOS Safari has broken hover handling
+      if (!IS_IOS) {
+        this.addClass('vjs-workinghover');
+      }
+
+      // Make player easily findable by ID
+      Player.players[this.id_] = this;
+
+      // Add a major version class to aid css in plugins
+      const majorVersion = version.split('.')[0];
+      this.addClass(`vjs-v${majorVersion}`);
+
+      // When the player is first initialized, trigger activity so components
+      // like the control bar show themselves if needed
+      this.userActive(true);
+      this.reportUserActivity();
+      this.one('play', e => this.listenForUserActivity_(e));
+      this.on('keydown', e => this.handleKeyDown(e));
+      this.on('languagechange', e => this.handleLanguagechange(e));
+      this.breakpoints(this.options_.breakpoints);
+      this.responsive(this.options_.responsive);
+
+      // Calling both the audio mode methods after the player is fully
+      // setup to be able to listen to the events triggered by them
+      this.on('ready', () => {
+        // Calling the audioPosterMode method first so that
+        // the audioOnlyMode can take precedence when both options are set to true
+        this.audioPosterMode(this.options_.audioPosterMode);
+        this.audioOnlyMode(this.options_.audioOnlyMode);
+      });
+    }
+
+    /**
+     * Destroys the video player and does any necessary cleanup.
+     *
+     * This is especially helpful if you are dynamically adding and removing videos
+     * to/from the DOM.
+     *
+     * @fires Player#dispose
+     */
+    dispose() {
+      /**
+       * Called when the player is being disposed of.
+       *
+       * @event Player#dispose
+       * @type {Event}
+       */
+      this.trigger('dispose');
+      // prevent dispose from being called twice
+      this.off('dispose');
+
+      // Make sure all player-specific document listeners are unbound. This is
+      off(document, this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+      off(document, 'keydown', this.boundFullWindowOnEscKey_);
+      if (this.styleEl_ && this.styleEl_.parentNode) {
+        this.styleEl_.parentNode.removeChild(this.styleEl_);
+        this.styleEl_ = null;
+      }
+
+      // Kill reference to this player
+      Player.players[this.id_] = null;
+      if (this.tag && this.tag.player) {
+        this.tag.player = null;
+      }
+      if (this.el_ && this.el_.player) {
+        this.el_.player = null;
+      }
+      if (this.tech_) {
+        this.tech_.dispose();
+        this.isPosterFromTech_ = false;
+        this.poster_ = '';
+      }
+      if (this.playerElIngest_) {
+        this.playerElIngest_ = null;
+      }
+      if (this.tag) {
+        this.tag = null;
+      }
+      clearCacheForPlayer(this);
+
+      // remove all event handlers for track lists
+      // all tracks and track listeners are removed on
+      // tech dispose
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        const list = this[props.getterName]();
+
+        // if it is not a native list
+        // we have to manually remove event listeners
+        if (list && list.off) {
+          list.off();
+        }
+      });
+
+      // the actual .el_ is removed here, or replaced if
+      super.dispose({
+        restoreEl: this.options_.restoreEl
+      });
+    }
+
+    /**
+     * Create the `Player`'s DOM element.
+     *
+     * @return {Element}
+     *         The DOM element that gets created.
+     */
+    createEl() {
+      let tag = this.tag;
+      let el;
+      let playerElIngest = this.playerElIngest_ = tag.parentNode && tag.parentNode.hasAttribute && tag.parentNode.hasAttribute('data-vjs-player');
+      const divEmbed = this.tag.tagName.toLowerCase() === 'video-js';
+      if (playerElIngest) {
+        el = this.el_ = tag.parentNode;
+      } else if (!divEmbed) {
+        el = this.el_ = super.createEl('div');
+      }
+
+      // Copy over all the attributes from the tag, including ID and class
+      // ID will now reference player box, not the video tag
+      const attrs = getAttributes(tag);
+      if (divEmbed) {
+        el = this.el_ = tag;
+        tag = this.tag = document.createElement('video');
+        while (el.children.length) {
+          tag.appendChild(el.firstChild);
+        }
+        if (!hasClass(el, 'video-js')) {
+          addClass(el, 'video-js');
+        }
+        el.appendChild(tag);
+        playerElIngest = this.playerElIngest_ = el;
+        // move properties over from our custom `video-js` element
+        // to our new `video` element. This will move things like
+        // `src` or `controls` that were set via js before the player
+        // was initialized.
+        Object.keys(el).forEach(k => {
+          try {
+            tag[k] = el[k];
+          } catch (e) {
+            // we got a a property like outerHTML which we can't actually copy, ignore it
+          }
+        });
+      }
+
+      // set tabindex to -1 to remove the video element from the focus order
+      tag.setAttribute('tabindex', '-1');
+      attrs.tabindex = '-1';
+
+      // Workaround for #4583 on Chrome (on Windows) with JAWS.
+      // See https://github.com/FreedomScientific/VFO-standards-support/issues/78
+      // Note that we can't detect if JAWS is being used, but this ARIA attribute
+      // doesn't change behavior of Chrome if JAWS is not being used
+      if (IS_CHROME && IS_WINDOWS) {
+        tag.setAttribute('role', 'application');
+        attrs.role = 'application';
+      }
+
+      // Remove width/height attrs from tag so CSS can make it 100% width/height
+      tag.removeAttribute('width');
+      tag.removeAttribute('height');
+      if ('width' in attrs) {
+        delete attrs.width;
+      }
+      if ('height' in attrs) {
+        delete attrs.height;
+      }
+      Object.getOwnPropertyNames(attrs).forEach(function (attr) {
+        // don't copy over the class attribute to the player element when we're in a div embed
+        // the class is already set up properly in the divEmbed case
+        // and we want to make sure that the `video-js` class doesn't get lost
+        if (!(divEmbed && attr === 'class')) {
+          el.setAttribute(attr, attrs[attr]);
+        }
+        if (divEmbed) {
+          tag.setAttribute(attr, attrs[attr]);
+        }
+      });
+
+      // Update tag id/class for use as HTML5 playback tech
+      // Might think we should do this after embedding in container so .vjs-tech class
+      // doesn't flash 100% width/height, but class only applies with .video-js parent
+      tag.playerId = tag.id;
+      tag.id += '_html5_api';
+      tag.className = 'vjs-tech';
+
+      // Make player findable on elements
+      tag.player = el.player = this;
+      // Default state of video is paused
+      this.addClass('vjs-paused');
+      const deviceClassNames = ['IS_SMART_TV', 'IS_TIZEN', 'IS_WEBOS', 'IS_ANDROID', 'IS_IPAD', 'IS_IPHONE'].filter(key => browser[key]).map(key => {
+        return 'vjs-device-' + key.substring(3).toLowerCase().replace(/\_/g, '-');
+      });
+      this.addClass(...deviceClassNames);
+
+      // Add a style element in the player that we'll use to set the width/height
+      // of the player in a way that's still overridable by CSS, just like the
+      // video element
+      if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true) {
+        this.styleEl_ = createStyleElement('vjs-styles-dimensions');
+        const defaultsStyleEl = $('.vjs-styles-defaults');
+        const head = $('head');
+        head.insertBefore(this.styleEl_, defaultsStyleEl ? defaultsStyleEl.nextSibling : head.firstChild);
+      }
+      this.fill_ = false;
+      this.fluid_ = false;
+
+      // Pass in the width/height/aspectRatio options which will update the style el
+      this.width(this.options_.width);
+      this.height(this.options_.height);
+      this.fill(this.options_.fill);
+      this.fluid(this.options_.fluid);
+      this.aspectRatio(this.options_.aspectRatio);
+      // support both crossOrigin and crossorigin to reduce confusion and issues around the name
+      this.crossOrigin(this.options_.crossOrigin || this.options_.crossorigin);
+
+      // Hide any links within the video/audio tag,
+      // because IE doesn't hide them completely from screen readers.
+      const links = tag.getElementsByTagName('a');
+      for (let i = 0; i < links.length; i++) {
+        const linkEl = links.item(i);
+        addClass(linkEl, 'vjs-hidden');
+        linkEl.setAttribute('hidden', 'hidden');
+      }
+
+      // insertElFirst seems to cause the networkState to flicker from 3 to 2, so
+      // keep track of the original for later so we can know if the source originally failed
+      tag.initNetworkState_ = tag.networkState;
+
+      // Wrap video tag in div (el/box) container
+      if (tag.parentNode && !playerElIngest) {
+        tag.parentNode.insertBefore(el, tag);
+      }
+
+      // insert the tag as the first child of the player element
+      // then manually add it to the children array so that this.addChild
+      // will work properly for other components
+      //
+      // Breaks iPhone, fixed in HTML5 setup.
+      prependTo(tag, el);
+      this.children_.unshift(tag);
+
+      // Set lang attr on player to ensure CSS :lang() in consistent with player
+      // if it's been set to something different to the doc
+      this.el_.setAttribute('lang', this.language_);
+      this.el_.setAttribute('translate', 'no');
+      this.el_ = el;
+      return el;
+    }
+
+    /**
+     * Get or set the `Player`'s crossOrigin option. For the HTML5 player, this
+     * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+     * behavior.
+     *
+     * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+     *
+     * @param {string|null} [value]
+     *        The value to set the `Player`'s crossOrigin to. If an argument is
+     *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+     *
+     * @return {string|null|undefined}
+     *         - The current crossOrigin value of the `Player` when getting.
+     *         - undefined when setting
+     */
+    crossOrigin(value) {
+      // `null` can be set to unset a value
+      if (typeof value === 'undefined') {
+        return this.techGet_('crossOrigin');
+      }
+      if (value !== null && value !== 'anonymous' && value !== 'use-credentials') {
+        log.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${value}"`);
+        return;
+      }
+      this.techCall_('setCrossOrigin', value);
+      if (this.posterImage) {
+        this.posterImage.crossOrigin(value);
+      }
+      return;
+    }
+
+    /**
+     * A getter/setter for the `Player`'s width. Returns the player's configured value.
+     * To get the current width use `currentWidth()`.
+     *
+     * @param {number|string} [value]
+     *        CSS value to set the `Player`'s width to.
+     *
+     * @return {number|undefined}
+     *         - The current width of the `Player` when getting.
+     *         - Nothing when setting
+     */
+    width(value) {
+      return this.dimension('width', value);
+    }
+
+    /**
+     * A getter/setter for the `Player`'s height. Returns the player's configured value.
+     * To get the current height use `currentheight()`.
+     *
+     * @param {number|string} [value]
+     *        CSS value to set the `Player`'s height to.
+     *
+     * @return {number|undefined}
+     *         - The current height of the `Player` when getting.
+     *         - Nothing when setting
+     */
+    height(value) {
+      return this.dimension('height', value);
+    }
+
+    /**
+     * A getter/setter for the `Player`'s width & height.
+     *
+     * @param {string} dimension
+     *        This string can be:
+     *        - 'width'
+     *        - 'height'
+     *
+     * @param {number|string} [value]
+     *        Value for dimension specified in the first argument.
+     *
+     * @return {number}
+     *         The dimension arguments value when getting (width/height).
+     */
+    dimension(dimension, value) {
+      const privDimension = dimension + '_';
+      if (value === undefined) {
+        return this[privDimension] || 0;
+      }
+      if (value === '' || value === 'auto') {
+        // If an empty string is given, reset the dimension to be automatic
+        this[privDimension] = undefined;
+        this.updateStyleEl_();
+        return;
+      }
+      const parsedVal = parseFloat(value);
+      if (isNaN(parsedVal)) {
+        log.error(`Improper value "${value}" supplied for for ${dimension}`);
+        return;
+      }
+      this[privDimension] = parsedVal;
+      this.updateStyleEl_();
+    }
+
+    /**
+     * A getter/setter/toggler for the vjs-fluid `className` on the `Player`.
+     *
+     * Turning this on will turn off fill mode.
+     *
+     * @param {boolean} [bool]
+     *        - A value of true adds the class.
+     *        - A value of false removes the class.
+     *        - No value will be a getter.
+     *
+     * @return {boolean|undefined}
+     *         - The value of fluid when getting.
+     *         - `undefined` when setting.
+     */
+    fluid(bool) {
+      if (bool === undefined) {
+        return !!this.fluid_;
+      }
+      this.fluid_ = !!bool;
+      if (isEvented(this)) {
+        this.off(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+      }
+      if (bool) {
+        this.addClass('vjs-fluid');
+        this.fill(false);
+        addEventedCallback(this, () => {
+          this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+        });
+      } else {
+        this.removeClass('vjs-fluid');
+      }
+      this.updateStyleEl_();
+    }
+
+    /**
+     * A getter/setter/toggler for the vjs-fill `className` on the `Player`.
+     *
+     * Turning this on will turn off fluid mode.
+     *
+     * @param {boolean} [bool]
+     *        - A value of true adds the class.
+     *        - A value of false removes the class.
+     *        - No value will be a getter.
+     *
+     * @return {boolean|undefined}
+     *         - The value of fluid when getting.
+     *         - `undefined` when setting.
+     */
+    fill(bool) {
+      if (bool === undefined) {
+        return !!this.fill_;
+      }
+      this.fill_ = !!bool;
+      if (bool) {
+        this.addClass('vjs-fill');
+        this.fluid(false);
+      } else {
+        this.removeClass('vjs-fill');
+      }
+    }
+
+    /**
+     * Get/Set the aspect ratio
+     *
+     * @param {string} [ratio]
+     *        Aspect ratio for player
+     *
+     * @return {string|undefined}
+     *         returns the current aspect ratio when getting
+     */
+
+    /**
+     * A getter/setter for the `Player`'s aspect ratio.
+     *
+     * @param {string} [ratio]
+     *        The value to set the `Player`'s aspect ratio to.
+     *
+     * @return {string|undefined}
+     *         - The current aspect ratio of the `Player` when getting.
+     *         - undefined when setting
+     */
+    aspectRatio(ratio) {
+      if (ratio === undefined) {
+        return this.aspectRatio_;
+      }
+
+      // Check for width:height format
+      if (!/^\d+\:\d+$/.test(ratio)) {
+        throw new Error('Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.');
+      }
+      this.aspectRatio_ = ratio;
+
+      // We're assuming if you set an aspect ratio you want fluid mode,
+      // because in fixed mode you could calculate width and height yourself.
+      this.fluid(true);
+      this.updateStyleEl_();
+    }
+
+    /**
+     * Update styles of the `Player` element (height, width and aspect ratio).
+     *
+     * @private
+     * @listens Tech#loadedmetadata
+     */
+    updateStyleEl_() {
+      if (window.VIDEOJS_NO_DYNAMIC_STYLE === true) {
+        const width = typeof this.width_ === 'number' ? this.width_ : this.options_.width;
+        const height = typeof this.height_ === 'number' ? this.height_ : this.options_.height;
+        const techEl = this.tech_ && this.tech_.el();
+        if (techEl) {
+          if (width >= 0) {
+            techEl.width = width;
+          }
+          if (height >= 0) {
+            techEl.height = height;
+          }
+        }
+        return;
+      }
+      let width;
+      let height;
+      let aspectRatio;
+      let idClass;
+
+      // The aspect ratio is either used directly or to calculate width and height.
+      if (this.aspectRatio_ !== undefined && this.aspectRatio_ !== 'auto') {
+        // Use any aspectRatio that's been specifically set
+        aspectRatio = this.aspectRatio_;
+      } else if (this.videoWidth() > 0) {
+        // Otherwise try to get the aspect ratio from the video metadata
+        aspectRatio = this.videoWidth() + ':' + this.videoHeight();
+      } else {
+        // Or use a default. The video element's is 2:1, but 16:9 is more common.
+        aspectRatio = '16:9';
+      }
+
+      // Get the ratio as a decimal we can use to calculate dimensions
+      const ratioParts = aspectRatio.split(':');
+      const ratioMultiplier = ratioParts[1] / ratioParts[0];
+      if (this.width_ !== undefined) {
+        // Use any width that's been specifically set
+        width = this.width_;
+      } else if (this.height_ !== undefined) {
+        // Or calculate the width from the aspect ratio if a height has been set
+        width = this.height_ / ratioMultiplier;
+      } else {
+        // Or use the video's metadata, or use the video el's default of 300
+        width = this.videoWidth() || 300;
+      }
+      if (this.height_ !== undefined) {
+        // Use any height that's been specifically set
+        height = this.height_;
+      } else {
+        // Otherwise calculate the height from the ratio and the width
+        height = width * ratioMultiplier;
+      }
+
+      // Ensure the CSS class is valid by starting with an alpha character
+      if (/^[^a-zA-Z]/.test(this.id())) {
+        idClass = 'dimensions-' + this.id();
+      } else {
+        idClass = this.id() + '-dimensions';
+      }
+
+      // Ensure the right class is still on the player for the style element
+      this.addClass(idClass);
+      setTextContent(this.styleEl_, `
+      .${idClass} {
+        width: ${width}px;
+        height: ${height}px;
+      }
+
+      .${idClass}.vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: ${ratioMultiplier * 100}%;
+      }
+    `);
+    }
+
+    /**
+     * Load/Create an instance of playback {@link Tech} including element
+     * and API methods. Then append the `Tech` element in `Player` as a child.
+     *
+     * @param {string} techName
+     *        name of the playback technology
+     *
+     * @param {string} source
+     *        video source
+     *
+     * @private
+     */
+    loadTech_(techName, source) {
+      // Pause and remove current playback technology
+      if (this.tech_) {
+        this.unloadTech_();
+      }
+      const titleTechName = toTitleCase(techName);
+      const camelTechName = techName.charAt(0).toLowerCase() + techName.slice(1);
+
+      // get rid of the HTML5 video tag as soon as we are using another tech
+      if (titleTechName !== 'Html5' && this.tag) {
+        Tech.getTech('Html5').disposeMediaElement(this.tag);
+        this.tag.player = null;
+        this.tag = null;
+      }
+      this.techName_ = titleTechName;
+
+      // Turn off API access because we're loading a new tech that might load asynchronously
+      this.isReady_ = false;
+      let autoplay = this.autoplay();
+
+      // if autoplay is a string (or `true` with normalizeAutoplay: true) we pass false to the tech
+      // because the player is going to handle autoplay on `loadstart`
+      if (typeof this.autoplay() === 'string' || this.autoplay() === true && this.options_.normalizeAutoplay) {
+        autoplay = false;
+      }
+
+      // Grab tech-specific options from player options and add source and parent element to use.
+      const techOptions = {
+        source,
+        autoplay,
+        'nativeControlsForTouch': this.options_.nativeControlsForTouch,
+        'playerId': this.id(),
+        'techId': `${this.id()}_${camelTechName}_api`,
+        'playsinline': this.options_.playsinline,
+        'preload': this.options_.preload,
+        'loop': this.options_.loop,
+        'disablePictureInPicture': this.options_.disablePictureInPicture,
+        'muted': this.options_.muted,
+        'poster': this.poster(),
+        'language': this.language(),
+        'playerElIngest': this.playerElIngest_ || false,
+        'vtt.js': this.options_['vtt.js'],
+        'canOverridePoster': !!this.options_.techCanOverridePoster,
+        'enableSourceset': this.options_.enableSourceset
+      };
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        techOptions[props.getterName] = this[props.privateName];
+      });
+      Object.assign(techOptions, this.options_[titleTechName]);
+      Object.assign(techOptions, this.options_[camelTechName]);
+      Object.assign(techOptions, this.options_[techName.toLowerCase()]);
+      if (this.tag) {
+        techOptions.tag = this.tag;
+      }
+      if (source && source.src === this.cache_.src && this.cache_.currentTime > 0) {
+        techOptions.startTime = this.cache_.currentTime;
+      }
+
+      // Initialize tech instance
+      const TechClass = Tech.getTech(techName);
+      if (!TechClass) {
+        throw new Error(`No Tech named '${titleTechName}' exists! '${titleTechName}' should be registered using videojs.registerTech()'`);
+      }
+      this.tech_ = new TechClass(techOptions);
+
+      // player.triggerReady is always async, so don't need this to be async
+      this.tech_.ready(bind_(this, this.handleTechReady_), true);
+      textTrackConverter.jsonToTextTracks(this.textTracksJson_ || [], this.tech_);
+
+      // Listen to all HTML5-defined events and trigger them on the player
+      TECH_EVENTS_RETRIGGER.forEach(event => {
+        this.on(this.tech_, event, e => this[`handleTech${toTitleCase(event)}_`](e));
+      });
+      Object.keys(TECH_EVENTS_QUEUE).forEach(event => {
+        this.on(this.tech_, event, eventObj => {
+          if (this.tech_.playbackRate() === 0 && this.tech_.seeking()) {
+            this.queuedCallbacks_.push({
+              callback: this[`handleTech${TECH_EVENTS_QUEUE[event]}_`].bind(this),
+              event: eventObj
+            });
+            return;
+          }
+          this[`handleTech${TECH_EVENTS_QUEUE[event]}_`](eventObj);
+        });
+      });
+      this.on(this.tech_, 'loadstart', e => this.handleTechLoadStart_(e));
+      this.on(this.tech_, 'sourceset', e => this.handleTechSourceset_(e));
+      this.on(this.tech_, 'waiting', e => this.handleTechWaiting_(e));
+      this.on(this.tech_, 'ended', e => this.handleTechEnded_(e));
+      this.on(this.tech_, 'seeking', e => this.handleTechSeeking_(e));
+      this.on(this.tech_, 'play', e => this.handleTechPlay_(e));
+      this.on(this.tech_, 'pause', e => this.handleTechPause_(e));
+      this.on(this.tech_, 'durationchange', e => this.handleTechDurationChange_(e));
+      this.on(this.tech_, 'fullscreenchange', (e, data) => this.handleTechFullscreenChange_(e, data));
+      this.on(this.tech_, 'fullscreenerror', (e, err) => this.handleTechFullscreenError_(e, err));
+      this.on(this.tech_, 'enterpictureinpicture', e => this.handleTechEnterPictureInPicture_(e));
+      this.on(this.tech_, 'leavepictureinpicture', e => this.handleTechLeavePictureInPicture_(e));
+      this.on(this.tech_, 'error', e => this.handleTechError_(e));
+      this.on(this.tech_, 'posterchange', e => this.handleTechPosterChange_(e));
+      this.on(this.tech_, 'textdata', e => this.handleTechTextData_(e));
+      this.on(this.tech_, 'ratechange', e => this.handleTechRateChange_(e));
+      this.on(this.tech_, 'loadedmetadata', this.boundUpdateStyleEl_);
+      this.usingNativeControls(this.techGet_('controls'));
+      if (this.controls() && !this.usingNativeControls()) {
+        this.addTechControlsListeners_();
+      }
+
+      // Add the tech element in the DOM if it was not already there
+      // Make sure to not insert the original video element if using Html5
+      if (this.tech_.el().parentNode !== this.el() && (titleTechName !== 'Html5' || !this.tag)) {
+        prependTo(this.tech_.el(), this.el());
+      }
+
+      // Get rid of the original video tag reference after the first tech is loaded
+      if (this.tag) {
+        this.tag.player = null;
+        this.tag = null;
+      }
+    }
+
+    /**
+     * Unload and dispose of the current playback {@link Tech}.
+     *
+     * @private
+     */
+    unloadTech_() {
+      // Save the current text tracks so that we can reuse the same text tracks with the next tech
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        this[props.privateName] = this[props.getterName]();
+      });
+      this.textTracksJson_ = textTrackConverter.textTracksToJson(this.tech_);
+      this.isReady_ = false;
+      this.tech_.dispose();
+      this.tech_ = false;
+      if (this.isPosterFromTech_) {
+        this.poster_ = '';
+        this.trigger('posterchange');
+      }
+      this.isPosterFromTech_ = false;
+    }
+
+    /**
+     * Return a reference to the current {@link Tech}.
+     * It will print a warning by default about the danger of using the tech directly
+     * but any argument that is passed in will silence the warning.
+     *
+     * @param {*} [safety]
+     *        Anything passed in to silence the warning
+     *
+     * @return {Tech}
+     *         The Tech
+     */
+    tech(safety) {
+      if (safety === undefined) {
+        log.warn('Using the tech directly can be dangerous. I hope you know what you\'re doing.\n' + 'See https://github.com/videojs/video.js/issues/2617 for more info.\n');
+      }
+      return this.tech_;
+    }
+
+    /**
+     * An object that contains Video.js version.
+     *
+     * @typedef {Object} PlayerVersion
+     *
+     * @property {string} 'video.js' - Video.js version
+     */
+
+    /**
+     * Returns an object with Video.js version.
+     *
+     * @return {PlayerVersion}
+     *          An object with Video.js version.
+     */
+    version() {
+      return {
+        'video.js': version
+      };
+    }
+
+    /**
+     * Set up click and touch listeners for the playback element
+     *
+     * - On desktops: a click on the video itself will toggle playback
+     * - On mobile devices: a click on the video toggles controls
+     *   which is done by toggling the user state between active and
+     *   inactive
+     * - A tap can signal that a user has become active or has become inactive
+     *   e.g. a quick tap on an iPhone movie should reveal the controls. Another
+     *   quick tap should hide them again (signaling the user is in an inactive
+     *   viewing state)
+     * - In addition to this, we still want the user to be considered inactive after
+     *   a few seconds of inactivity.
+     *
+     * > Note: the only part of iOS interaction we can't mimic with this setup
+     * is a touch and hold on the video element counting as activity in order to
+     * keep the controls showing, but that shouldn't be an issue. A touch and hold
+     * on any controls will still keep the user active
+     *
+     * @private
+     */
+    addTechControlsListeners_() {
+      // Make sure to remove all the previous listeners in case we are called multiple times.
+      this.removeTechControlsListeners_();
+      this.on(this.tech_, 'click', this.boundHandleTechClick_);
+      this.on(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
+
+      // If the controls were hidden we don't want that to change without a tap event
+      // so we'll check if the controls were already showing before reporting user
+      // activity
+      this.on(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+      this.on(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+      this.on(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+
+      // The tap listener needs to come after the touchend listener because the tap
+      // listener cancels out any reportedUserActivity when setting userActive(false)
+      this.on(this.tech_, 'tap', this.boundHandleTechTap_);
+    }
+
+    /**
+     * Remove the listeners used for click and tap controls. This is needed for
+     * toggling to controls disabled, where a tap/touch should do nothing.
+     *
+     * @private
+     */
+    removeTechControlsListeners_() {
+      // We don't want to just use `this.off()` because there might be other needed
+      // listeners added by techs that extend this.
+      this.off(this.tech_, 'tap', this.boundHandleTechTap_);
+      this.off(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+      this.off(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+      this.off(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+      this.off(this.tech_, 'click', this.boundHandleTechClick_);
+      this.off(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
+    }
+
+    /**
+     * Player waits for the tech to be ready
+     *
+     * @private
+     */
+    handleTechReady_() {
+      this.triggerReady();
+
+      // Keep the same volume as before
+      if (this.cache_.volume) {
+        this.techCall_('setVolume', this.cache_.volume);
+      }
+
+      // Look if the tech found a higher resolution poster while loading
+      this.handleTechPosterChange_();
+
+      // Update the duration if available
+      this.handleTechDurationChange_();
+    }
+
+    /**
+     * Retrigger the `loadstart` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#loadstart
+     * @listens Tech#loadstart
+     * @private
+     */
+    handleTechLoadStart_() {
+      // TODO: Update to use `emptied` event instead. See #1277.
+
+      this.removeClass('vjs-ended', 'vjs-seeking');
+
+      // reset the error state
+      this.error(null);
+
+      // Update the duration
+      this.handleTechDurationChange_();
+      if (!this.paused()) {
+        /**
+         * Fired when the user agent begins looking for media data
+         *
+         * @event Player#loadstart
+         * @type {Event}
+         */
+        this.trigger('loadstart');
+      } else {
+        // reset the hasStarted state
+        this.hasStarted(false);
+        this.trigger('loadstart');
+      }
+
+      // autoplay happens after loadstart for the browser,
+      // so we mimic that behavior
+      this.manualAutoplay_(this.autoplay() === true && this.options_.normalizeAutoplay ? 'play' : this.autoplay());
+    }
+
+    /**
+     * Handle autoplay string values, rather than the typical boolean
+     * values that should be handled by the tech. Note that this is not
+     * part of any specification. Valid values and what they do can be
+     * found on the autoplay getter at Player#autoplay()
+     */
+    manualAutoplay_(type) {
+      if (!this.tech_ || typeof type !== 'string') {
+        return;
+      }
+
+      // Save original muted() value, set muted to true, and attempt to play().
+      // On promise rejection, restore muted from saved value
+      const resolveMuted = () => {
+        const previouslyMuted = this.muted();
+        this.muted(true);
+        const restoreMuted = () => {
+          this.muted(previouslyMuted);
+        };
+
+        // restore muted on play terminatation
+        this.playTerminatedQueue_.push(restoreMuted);
+        const mutedPromise = this.play();
+        if (!isPromise(mutedPromise)) {
+          return;
+        }
+        return mutedPromise.catch(err => {
+          restoreMuted();
+          throw new Error(`Rejection at manualAutoplay. Restoring muted value. ${err ? err : ''}`);
+        });
+      };
+      let promise;
+
+      // if muted defaults to true
+      // the only thing we can do is call play
+      if (type === 'any' && !this.muted()) {
+        promise = this.play();
+        if (isPromise(promise)) {
+          promise = promise.catch(resolveMuted);
+        }
+      } else if (type === 'muted' && !this.muted()) {
+        promise = resolveMuted();
+      } else {
+        promise = this.play();
+      }
+      if (!isPromise(promise)) {
+        return;
+      }
+      return promise.then(() => {
+        this.trigger({
+          type: 'autoplay-success',
+          autoplay: type
+        });
+      }).catch(() => {
+        this.trigger({
+          type: 'autoplay-failure',
+          autoplay: type
+        });
+      });
+    }
+
+    /**
+     * Update the internal source caches so that we return the correct source from
+     * `src()`, `currentSource()`, and `currentSources()`.
+     *
+     * > Note: `currentSources` will not be updated if the source that is passed in exists
+     *         in the current `currentSources` cache.
+     *
+     *
+     * @param {Tech~SourceObject} srcObj
+     *        A string or object source to update our caches to.
+     */
+    updateSourceCaches_(srcObj = '') {
+      let src = srcObj;
+      let type = '';
+      if (typeof src !== 'string') {
+        src = srcObj.src;
+        type = srcObj.type;
+      }
+
+      // make sure all the caches are set to default values
+      // to prevent null checking
+      this.cache_.source = this.cache_.source || {};
+      this.cache_.sources = this.cache_.sources || [];
+
+      // try to get the type of the src that was passed in
+      if (src && !type) {
+        type = findMimetype(this, src);
+      }
+
+      // update `currentSource` cache always
+      this.cache_.source = merge({}, srcObj, {
+        src,
+        type
+      });
+      const matchingSources = this.cache_.sources.filter(s => s.src && s.src === src);
+      const sourceElSources = [];
+      const sourceEls = this.$$('source');
+      const matchingSourceEls = [];
+      for (let i = 0; i < sourceEls.length; i++) {
+        const sourceObj = getAttributes(sourceEls[i]);
+        sourceElSources.push(sourceObj);
+        if (sourceObj.src && sourceObj.src === src) {
+          matchingSourceEls.push(sourceObj.src);
+        }
+      }
+
+      // if we have matching source els but not matching sources
+      // the current source cache is not up to date
+      if (matchingSourceEls.length && !matchingSources.length) {
+        this.cache_.sources = sourceElSources;
+        // if we don't have matching source or source els set the
+        // sources cache to the `currentSource` cache
+      } else if (!matchingSources.length) {
+        this.cache_.sources = [this.cache_.source];
+      }
+
+      // update the tech `src` cache
+      this.cache_.src = src;
+    }
+
+    /**
+     * *EXPERIMENTAL* Fired when the source is set or changed on the {@link Tech}
+     * causing the media element to reload.
+     *
+     * It will fire for the initial source and each subsequent source.
+     * This event is a custom event from Video.js and is triggered by the {@link Tech}.
+     *
+     * The event object for this event contains a `src` property that will contain the source
+     * that was available when the event was triggered. This is generally only necessary if Video.js
+     * is switching techs while the source was being changed.
+     *
+     * It is also fired when `load` is called on the player (or media element)
+     * because the {@link https://html.spec.whatwg.org/multipage/media.html#dom-media-load|specification for `load`}
+     * says that the resource selection algorithm needs to be aborted and restarted.
+     * In this case, it is very likely that the `src` property will be set to the
+     * empty string `""` to indicate we do not know what the source will be but
+     * that it is changing.
+     *
+     * *This event is currently still experimental and may change in minor releases.*
+     * __To use this, pass `enableSourceset` option to the player.__
+     *
+     * @event Player#sourceset
+     * @type {Event}
+     * @prop {string} src
+     *                The source url available when the `sourceset` was triggered.
+     *                It will be an empty string if we cannot know what the source is
+     *                but know that the source will change.
+     */
+    /**
+     * Retrigger the `sourceset` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#sourceset
+     * @listens Tech#sourceset
+     * @private
+     */
+    handleTechSourceset_(event) {
+      // only update the source cache when the source
+      // was not updated using the player api
+      if (!this.changingSrc_) {
+        let updateSourceCaches = src => this.updateSourceCaches_(src);
+        const playerSrc = this.currentSource().src;
+        const eventSrc = event.src;
+
+        // if we have a playerSrc that is not a blob, and a tech src that is a blob
+        if (playerSrc && !/^blob:/.test(playerSrc) && /^blob:/.test(eventSrc)) {
+          // if both the tech source and the player source were updated we assume
+          // something like @videojs/http-streaming did the sourceset and skip updating the source cache.
+          if (!this.lastSource_ || this.lastSource_.tech !== eventSrc && this.lastSource_.player !== playerSrc) {
+            updateSourceCaches = () => {};
+          }
+        }
+
+        // update the source to the initial source right away
+        // in some cases this will be empty string
+        updateSourceCaches(eventSrc);
+
+        // if the `sourceset` `src` was an empty string
+        // wait for a `loadstart` to update the cache to `currentSrc`.
+        // If a sourceset happens before a `loadstart`, we reset the state
+        if (!event.src) {
+          this.tech_.any(['sourceset', 'loadstart'], e => {
+            // if a sourceset happens before a `loadstart` there
+            // is nothing to do as this `handleTechSourceset_`
+            // will be called again and this will be handled there.
+            if (e.type === 'sourceset') {
+              return;
+            }
+            const techSrc = this.techGet_('currentSrc');
+            this.lastSource_.tech = techSrc;
+            this.updateSourceCaches_(techSrc);
+          });
+        }
+      }
+      this.lastSource_ = {
+        player: this.currentSource().src,
+        tech: event.src
+      };
+      this.trigger({
+        src: event.src,
+        type: 'sourceset'
+      });
+    }
+
+    /**
+     * Add/remove the vjs-has-started class
+     *
+     *
+     * @param {boolean} request
+     *        - true: adds the class
+     *        - false: remove the class
+     *
+     * @return {boolean}
+     *         the boolean value of hasStarted_
+     */
+    hasStarted(request) {
+      if (request === undefined) {
+        // act as getter, if we have no request to change
+        return this.hasStarted_;
+      }
+      if (request === this.hasStarted_) {
+        return;
+      }
+      this.hasStarted_ = request;
+      if (this.hasStarted_) {
+        this.addClass('vjs-has-started');
+      } else {
+        this.removeClass('vjs-has-started');
+      }
+    }
+
+    /**
+     * Fired whenever the media begins or resumes playback
+     *
+     * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play}
+     * @fires Player#play
+     * @listens Tech#play
+     * @private
+     */
+    handleTechPlay_() {
+      this.removeClass('vjs-ended', 'vjs-paused');
+      this.addClass('vjs-playing');
+
+      // hide the poster when the user hits play
+      this.hasStarted(true);
+      /**
+       * Triggered whenever an {@link Tech#play} event happens. Indicates that
+       * playback has started or resumed.
+       *
+       * @event Player#play
+       * @type {Event}
+       */
+      this.trigger('play');
+    }
+
+    /**
+     * Retrigger the `ratechange` event that was triggered by the {@link Tech}.
+     *
+     * If there were any events queued while the playback rate was zero, fire
+     * those events now.
+     *
+     * @private
+     * @method Player#handleTechRateChange_
+     * @fires Player#ratechange
+     * @listens Tech#ratechange
+     */
+    handleTechRateChange_() {
+      if (this.tech_.playbackRate() > 0 && this.cache_.lastPlaybackRate === 0) {
+        this.queuedCallbacks_.forEach(queued => queued.callback(queued.event));
+        this.queuedCallbacks_ = [];
+      }
+      this.cache_.lastPlaybackRate = this.tech_.playbackRate();
+      /**
+       * Fires when the playing speed of the audio/video is changed
+       *
+       * @event Player#ratechange
+       * @type {event}
+       */
+      this.trigger('ratechange');
+    }
+
+    /**
+     * Retrigger the `waiting` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#waiting
+     * @listens Tech#waiting
+     * @private
+     */
+    handleTechWaiting_() {
+      this.addClass('vjs-waiting');
+      /**
+       * A readyState change on the DOM element has caused playback to stop.
+       *
+       * @event Player#waiting
+       * @type {Event}
+       */
+      this.trigger('waiting');
+
+      // Browsers may emit a timeupdate event after a waiting event. In order to prevent
+      // premature removal of the waiting class, wait for the time to change.
+      const timeWhenWaiting = this.currentTime();
+      const timeUpdateListener = () => {
+        if (timeWhenWaiting !== this.currentTime()) {
+          this.removeClass('vjs-waiting');
+          this.off('timeupdate', timeUpdateListener);
+        }
+      };
+      this.on('timeupdate', timeUpdateListener);
+    }
+
+    /**
+     * Retrigger the `canplay` event that was triggered by the {@link Tech}.
+     * > Note: This is not consistent between browsers. See #1351
+     *
+     * @fires Player#canplay
+     * @listens Tech#canplay
+     * @private
+     */
+    handleTechCanPlay_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media has a readyState of HAVE_FUTURE_DATA or greater.
+       *
+       * @event Player#canplay
+       * @type {Event}
+       */
+      this.trigger('canplay');
+    }
+
+    /**
+     * Retrigger the `canplaythrough` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#canplaythrough
+     * @listens Tech#canplaythrough
+     * @private
+     */
+    handleTechCanPlayThrough_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media has a readyState of HAVE_ENOUGH_DATA or greater. This means that the
+       * entire media file can be played without buffering.
+       *
+       * @event Player#canplaythrough
+       * @type {Event}
+       */
+      this.trigger('canplaythrough');
+    }
+
+    /**
+     * Retrigger the `playing` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#playing
+     * @listens Tech#playing
+     * @private
+     */
+    handleTechPlaying_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media is no longer blocked from playback, and has started playing.
+       *
+       * @event Player#playing
+       * @type {Event}
+       */
+      this.trigger('playing');
+    }
+
+    /**
+     * Retrigger the `seeking` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#seeking
+     * @listens Tech#seeking
+     * @private
+     */
+    handleTechSeeking_() {
+      this.addClass('vjs-seeking');
+      /**
+       * Fired whenever the player is jumping to a new time
+       *
+       * @event Player#seeking
+       * @type {Event}
+       */
+      this.trigger('seeking');
+    }
+
+    /**
+     * Retrigger the `seeked` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#seeked
+     * @listens Tech#seeked
+     * @private
+     */
+    handleTechSeeked_() {
+      this.removeClass('vjs-seeking', 'vjs-ended');
+      /**
+       * Fired when the player has finished jumping to a new time
+       *
+       * @event Player#seeked
+       * @type {Event}
+       */
+      this.trigger('seeked');
+    }
+
+    /**
+     * Retrigger the `pause` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#pause
+     * @listens Tech#pause
+     * @private
+     */
+    handleTechPause_() {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      /**
+       * Fired whenever the media has been paused
+       *
+       * @event Player#pause
+       * @type {Event}
+       */
+      this.trigger('pause');
+    }
+
+    /**
+     * Retrigger the `ended` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#ended
+     * @listens Tech#ended
+     * @private
+     */
+    handleTechEnded_() {
+      this.addClass('vjs-ended');
+      this.removeClass('vjs-waiting');
+      if (this.options_.loop) {
+        this.currentTime(0);
+        this.play();
+      } else if (!this.paused()) {
+        this.pause();
+      }
+
+      /**
+       * Fired when the end of the media resource is reached (currentTime == duration)
+       *
+       * @event Player#ended
+       * @type {Event}
+       */
+      this.trigger('ended');
+    }
+
+    /**
+     * Fired when the duration of the media resource is first known or changed
+     *
+     * @listens Tech#durationchange
+     * @private
+     */
+    handleTechDurationChange_() {
+      this.duration(this.techGet_('duration'));
+    }
+
+    /**
+     * Handle a click on the media element to play/pause
+     *
+     * @param {Event} event
+     *        the event that caused this function to trigger
+     *
+     * @listens Tech#click
+     * @private
+     */
+    handleTechClick_(event) {
+      // When controls are disabled a click should not toggle playback because
+      // the click is considered a control
+      if (!this.controls_) {
+        return;
+      }
+      if (this.options_ === undefined || this.options_.userActions === undefined || this.options_.userActions.click === undefined || this.options_.userActions.click !== false) {
+        if (this.options_ !== undefined && this.options_.userActions !== undefined && typeof this.options_.userActions.click === 'function') {
+          this.options_.userActions.click.call(this, event);
+        } else if (this.paused()) {
+          silencePromise(this.play());
+        } else {
+          this.pause();
+        }
+      }
+    }
+
+    /**
+     * Handle a double-click on the media element to enter/exit fullscreen
+     *
+     * @param {Event} event
+     *        the event that caused this function to trigger
+     *
+     * @listens Tech#dblclick
+     * @private
+     */
+    handleTechDoubleClick_(event) {
+      if (!this.controls_) {
+        return;
+      }
+
+      // we do not want to toggle fullscreen state
+      // when double-clicking inside a control bar or a modal
+      const inAllowedEls = Array.prototype.some.call(this.$$('.vjs-control-bar, .vjs-modal-dialog'), el => el.contains(event.target));
+      if (!inAllowedEls) {
+        /*
+         * options.userActions.doubleClick
+         *
+         * If `undefined` or `true`, double-click toggles fullscreen if controls are present
+         * Set to `false` to disable double-click handling
+         * Set to a function to substitute an external double-click handler
+         */
+        if (this.options_ === undefined || this.options_.userActions === undefined || this.options_.userActions.doubleClick === undefined || this.options_.userActions.doubleClick !== false) {
+          if (this.options_ !== undefined && this.options_.userActions !== undefined && typeof this.options_.userActions.doubleClick === 'function') {
+            this.options_.userActions.doubleClick.call(this, event);
+          } else if (this.isFullscreen()) {
+            this.exitFullscreen();
+          } else {
+            this.requestFullscreen();
+          }
+        }
+      }
+    }
+
+    /**
+     * Handle a tap on the media element. It will toggle the user
+     * activity state, which hides and shows the controls.
+     *
+     * @listens Tech#tap
+     * @private
+     */
+    handleTechTap_() {
+      this.userActive(!this.userActive());
+    }
+
+    /**
+     * Handle touch to start
+     *
+     * @listens Tech#touchstart
+     * @private
+     */
+    handleTechTouchStart_() {
+      this.userWasActive = this.userActive();
+    }
+
+    /**
+     * Handle touch to move
+     *
+     * @listens Tech#touchmove
+     * @private
+     */
+    handleTechTouchMove_() {
+      if (this.userWasActive) {
+        this.reportUserActivity();
+      }
+    }
+
+    /**
+     * Handle touch to end
+     *
+     * @param {Event} event
+     *        the touchend event that triggered
+     *        this function
+     *
+     * @listens Tech#touchend
+     * @private
+     */
+    handleTechTouchEnd_(event) {
+      // Stop the mouse events from also happening
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    }
+
+    /**
+     * @private
+     */
+    toggleFullscreenClass_() {
+      if (this.isFullscreen()) {
+        this.addClass('vjs-fullscreen');
+      } else {
+        this.removeClass('vjs-fullscreen');
+      }
+    }
+
+    /**
+     * when the document fschange event triggers it calls this
+     */
+    documentFullscreenChange_(e) {
+      const targetPlayer = e.target.player;
+
+      // if another player was fullscreen
+      // do a null check for targetPlayer because older firefox's would put document as e.target
+      if (targetPlayer && targetPlayer !== this) {
+        return;
+      }
+      const el = this.el();
+      let isFs = document[this.fsApi_.fullscreenElement] === el;
+      if (!isFs && el.matches) {
+        isFs = el.matches(':' + this.fsApi_.fullscreen);
+      }
+      this.isFullscreen(isFs);
+    }
+
+    /**
+     * Handle Tech Fullscreen Change
+     *
+     * @param {Event} event
+     *        the fullscreenchange event that triggered this function
+     *
+     * @param {Object} data
+     *        the data that was sent with the event
+     *
+     * @private
+     * @listens Tech#fullscreenchange
+     * @fires Player#fullscreenchange
+     */
+    handleTechFullscreenChange_(event, data) {
+      if (data) {
+        if (data.nativeIOSFullscreen) {
+          this.addClass('vjs-ios-native-fs');
+          this.tech_.one('webkitendfullscreen', () => {
+            this.removeClass('vjs-ios-native-fs');
+          });
+        }
+        this.isFullscreen(data.isFullscreen);
+      }
+    }
+    handleTechFullscreenError_(event, err) {
+      this.trigger('fullscreenerror', err);
+    }
+
+    /**
+     * @private
+     */
+    togglePictureInPictureClass_() {
+      if (this.isInPictureInPicture()) {
+        this.addClass('vjs-picture-in-picture');
+      } else {
+        this.removeClass('vjs-picture-in-picture');
+      }
+    }
+
+    /**
+     * Handle Tech Enter Picture-in-Picture.
+     *
+     * @param {Event} event
+     *        the enterpictureinpicture event that triggered this function
+     *
+     * @private
+     * @listens Tech#enterpictureinpicture
+     */
+    handleTechEnterPictureInPicture_(event) {
+      this.isInPictureInPicture(true);
+    }
+
+    /**
+     * Handle Tech Leave Picture-in-Picture.
+     *
+     * @param {Event} event
+     *        the leavepictureinpicture event that triggered this function
+     *
+     * @private
+     * @listens Tech#leavepictureinpicture
+     */
+    handleTechLeavePictureInPicture_(event) {
+      this.isInPictureInPicture(false);
+    }
+
+    /**
+     * Fires when an error occurred during the loading of an audio/video.
+     *
+     * @private
+     * @listens Tech#error
+     */
+    handleTechError_() {
+      const error = this.tech_.error();
+      if (error) {
+        this.error(error);
+      }
+    }
+
+    /**
+     * Retrigger the `textdata` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#textdata
+     * @listens Tech#textdata
+     * @private
+     */
+    handleTechTextData_() {
+      let data = null;
+      if (arguments.length > 1) {
+        data = arguments[1];
+      }
+
+      /**
+       * Fires when we get a textdata event from tech
+       *
+       * @event Player#textdata
+       * @type {Event}
+       */
+      this.trigger('textdata', data);
+    }
+
+    /**
+     * Get object for cached values.
+     *
+     * @return {Object}
+     *         get the current object cache
+     */
+    getCache() {
+      return this.cache_;
+    }
+
+    /**
+     * Resets the internal cache object.
+     *
+     * Using this function outside the player constructor or reset method may
+     * have unintended side-effects.
+     *
+     * @private
+     */
+    resetCache_() {
+      this.cache_ = {
+        // Right now, the currentTime is not _really_ cached because it is always
+        // retrieved from the tech (see: currentTime). However, for completeness,
+        // we set it to zero here to ensure that if we do start actually caching
+        // it, we reset it along with everything else.
+        currentTime: 0,
+        initTime: 0,
+        inactivityTimeout: this.options_.inactivityTimeout,
+        duration: NaN,
+        lastVolume: 1,
+        lastPlaybackRate: this.defaultPlaybackRate(),
+        media: null,
+        src: '',
+        source: {},
+        sources: [],
+        playbackRates: [],
+        volume: 1
+      };
+    }
+
+    /**
+     * Pass values to the playback tech
+     *
+     * @param {string} [method]
+     *        the method to call
+     *
+     * @param {Object} [arg]
+     *        the argument to pass
+     *
+     * @private
+     */
+    techCall_(method, arg) {
+      // If it's not ready yet, call method when it is
+
+      this.ready(function () {
+        if (method in allowedSetters) {
+          return set(this.middleware_, this.tech_, method, arg);
+        } else if (method in allowedMediators) {
+          return mediate(this.middleware_, this.tech_, method, arg);
+        }
+        try {
+          if (this.tech_) {
+            this.tech_[method](arg);
+          }
+        } catch (e) {
+          log(e);
+          throw e;
+        }
+      }, true);
+    }
+
+    /**
+     * Mediate attempt to call playback tech method
+     * and return the value of the method called.
+     *
+     * @param {string} method
+     *        Tech method
+     *
+     * @return {*}
+     *         Value returned by the tech method called, undefined if tech
+     *         is not ready or tech method is not present
+     *
+     * @private
+     */
+    techGet_(method) {
+      if (!this.tech_ || !this.tech_.isReady_) {
+        return;
+      }
+      if (method in allowedGetters) {
+        return get(this.middleware_, this.tech_, method);
+      } else if (method in allowedMediators) {
+        return mediate(this.middleware_, this.tech_, method);
+      }
+
+      // Log error when playback tech object is present but method
+      // is undefined or unavailable
+      try {
+        return this.tech_[method]();
+      } catch (e) {
+        // When building additional tech libs, an expected method may not be defined yet
+        if (this.tech_[method] === undefined) {
+          log(`Video.js: ${method} method not defined for ${this.techName_} playback technology.`, e);
+          throw e;
+        }
+
+        // When a method isn't available on the object it throws a TypeError
+        if (e.name === 'TypeError') {
+          log(`Video.js: ${method} unavailable on ${this.techName_} playback technology element.`, e);
+          this.tech_.isReady_ = false;
+          throw e;
+        }
+
+        // If error unknown, just log and throw
+        log(e);
+        throw e;
+      }
+    }
+
+    /**
+     * Attempt to begin playback at the first opportunity.
+     *
+     * @return {Promise|undefined}
+     *         Returns a promise if the browser supports Promises (or one
+     *         was passed in as an option). This promise will be resolved on
+     *         the return value of play. If this is undefined it will fulfill the
+     *         promise chain otherwise the promise chain will be fulfilled when
+     *         the promise from play is fulfilled.
+     */
+    play() {
+      return new Promise(resolve => {
+        this.play_(resolve);
+      });
+    }
+
+    /**
+     * The actual logic for play, takes a callback that will be resolved on the
+     * return value of play. This allows us to resolve to the play promise if there
+     * is one on modern browsers.
+     *
+     * @private
+     * @param {Function} [callback]
+     *        The callback that should be called when the techs play is actually called
+     */
+    play_(callback = silencePromise) {
+      this.playCallbacks_.push(callback);
+      const isSrcReady = Boolean(!this.changingSrc_ && (this.src() || this.currentSrc()));
+      const isSafariOrIOS = Boolean(IS_ANY_SAFARI || IS_IOS);
+
+      // treat calls to play_ somewhat like the `one` event function
+      if (this.waitToPlay_) {
+        this.off(['ready', 'loadstart'], this.waitToPlay_);
+        this.waitToPlay_ = null;
+      }
+
+      // if the player/tech is not ready or the src itself is not ready
+      // queue up a call to play on `ready` or `loadstart`
+      if (!this.isReady_ || !isSrcReady) {
+        this.waitToPlay_ = e => {
+          this.play_();
+        };
+        this.one(['ready', 'loadstart'], this.waitToPlay_);
+
+        // if we are in Safari, there is a high chance that loadstart will trigger after the gesture timeperiod
+        // in that case, we need to prime the video element by calling load so it'll be ready in time
+        if (!isSrcReady && isSafariOrIOS) {
+          this.load();
+        }
+        return;
+      }
+
+      // If the player/tech is ready and we have a source, we can attempt playback.
+      const val = this.techGet_('play');
+
+      // For native playback, reset the progress bar if we get a play call from a replay.
+      const isNativeReplay = isSafariOrIOS && this.hasClass('vjs-ended');
+      if (isNativeReplay) {
+        this.resetProgressBar_();
+      }
+      // play was terminated if the returned value is null
+      if (val === null) {
+        this.runPlayTerminatedQueue_();
+      } else {
+        this.runPlayCallbacks_(val);
+      }
+    }
+
+    /**
+     * These functions will be run when if play is terminated. If play
+     * runPlayCallbacks_ is run these function will not be run. This allows us
+     * to differentiate between a terminated play and an actual call to play.
+     */
+    runPlayTerminatedQueue_() {
+      const queue = this.playTerminatedQueue_.slice(0);
+      this.playTerminatedQueue_ = [];
+      queue.forEach(function (q) {
+        q();
+      });
+    }
+
+    /**
+     * When a callback to play is delayed we have to run these
+     * callbacks when play is actually called on the tech. This function
+     * runs the callbacks that were delayed and accepts the return value
+     * from the tech.
+     *
+     * @param {undefined|Promise} val
+     *        The return value from the tech.
+     */
+    runPlayCallbacks_(val) {
+      const callbacks = this.playCallbacks_.slice(0);
+      this.playCallbacks_ = [];
+      // clear play terminatedQueue since we finished a real play
+      this.playTerminatedQueue_ = [];
+      callbacks.forEach(function (cb) {
+        cb(val);
+      });
+    }
+
+    /**
+     * Pause the video playback
+     */
+    pause() {
+      this.techCall_('pause');
+    }
+
+    /**
+     * Check if the player is paused or has yet to play
+     *
+     * @return {boolean}
+     *         - false: if the media is currently playing
+     *         - true: if media is not currently playing
+     */
+    paused() {
+      // The initial state of paused should be true (in Safari it's actually false)
+      return this.techGet_('paused') === false ? false : true;
+    }
+
+    /**
+     * Get a TimeRange object representing the current ranges of time that the user
+     * has played.
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A time range object that represents all the increments of time that have
+     *         been played.
+     */
+    played() {
+      return this.techGet_('played') || createTimeRanges(0, 0);
+    }
+
+    /**
+     * Sets or returns whether or not the user is "scrubbing". Scrubbing is
+     * when the user has clicked the progress bar handle and is
+     * dragging it along the progress bar.
+     *
+     * @param {boolean} [isScrubbing]
+     *        whether the user is or is not scrubbing
+     *
+     * @return {boolean|undefined}
+     *         - The value of scrubbing when getting
+     *         - Nothing when setting
+     */
+    scrubbing(isScrubbing) {
+      if (typeof isScrubbing === 'undefined') {
+        return this.scrubbing_;
+      }
+      this.scrubbing_ = !!isScrubbing;
+      this.techCall_('setScrubbing', this.scrubbing_);
+      if (isScrubbing) {
+        this.addClass('vjs-scrubbing');
+      } else {
+        this.removeClass('vjs-scrubbing');
+      }
+    }
+
+    /**
+     * Get or set the current time (in seconds)
+     *
+     * @param {number|string} [seconds]
+     *        The time to seek to in seconds
+     *
+     * @return {number|undefined}
+     *         - the current time in seconds when getting
+     *         - Nothing when setting
+     */
+    currentTime(seconds) {
+      if (seconds === undefined) {
+        // cache last currentTime and return. default to 0 seconds
+        //
+        // Caching the currentTime is meant to prevent a massive amount of reads on the tech's
+        // currentTime when scrubbing, but may not provide much performance benefit after all.
+        // Should be tested. Also something has to read the actual current time or the cache will
+        // never get updated.
+        this.cache_.currentTime = this.techGet_('currentTime') || 0;
+        return this.cache_.currentTime;
+      }
+      if (seconds < 0) {
+        seconds = 0;
+      }
+      if (!this.isReady_ || this.changingSrc_ || !this.tech_ || !this.tech_.isReady_) {
+        this.cache_.initTime = seconds;
+        this.off('canplay', this.boundApplyInitTime_);
+        this.one('canplay', this.boundApplyInitTime_);
+        return;
+      }
+      this.techCall_('setCurrentTime', seconds);
+      this.cache_.initTime = 0;
+      if (isFinite(seconds)) {
+        this.cache_.currentTime = Number(seconds);
+      }
+    }
+
+    /**
+     * Apply the value of initTime stored in cache as currentTime.
+     *
+     * @private
+     */
+    applyInitTime_() {
+      this.currentTime(this.cache_.initTime);
+    }
+
+    /**
+     * Normally gets the length in time of the video in seconds;
+     * in all but the rarest use cases an argument will NOT be passed to the method
+     *
+     * > **NOTE**: The video must have started loading before the duration can be
+     * known, and depending on preload behaviour may not be known until the video starts
+     * playing.
+     *
+     * @fires Player#durationchange
+     *
+     * @param {number} [seconds]
+     *        The duration of the video to set in seconds
+     *
+     * @return {number|undefined}
+     *         - The duration of the video in seconds when getting
+     *         - Nothing when setting
+     */
+    duration(seconds) {
+      if (seconds === undefined) {
+        // return NaN if the duration is not known
+        return this.cache_.duration !== undefined ? this.cache_.duration : NaN;
+      }
+      seconds = parseFloat(seconds);
+
+      // Standardize on Infinity for signaling video is live
+      if (seconds < 0) {
+        seconds = Infinity;
+      }
+      if (seconds !== this.cache_.duration) {
+        // Cache the last set value for optimized scrubbing
+        this.cache_.duration = seconds;
+        if (seconds === Infinity) {
+          this.addClass('vjs-live');
+        } else {
+          this.removeClass('vjs-live');
+        }
+        if (!isNaN(seconds)) {
+          // Do not fire durationchange unless the duration value is known.
+          // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
+
+          /**
+           * @event Player#durationchange
+           * @type {Event}
+           */
+          this.trigger('durationchange');
+        }
+      }
+    }
+
+    /**
+     * Calculates how much time is left in the video. Not part
+     * of the native video API.
+     *
+     * @return {number}
+     *         The time remaining in seconds
+     */
+    remainingTime() {
+      return this.duration() - this.currentTime();
+    }
+
+    /**
+     * A remaining time function that is intended to be used when
+     * the time is to be displayed directly to the user.
+     *
+     * @return {number}
+     *         The rounded time remaining in seconds
+     */
+    remainingTimeDisplay() {
+      return Math.floor(this.duration()) - Math.floor(this.currentTime());
+    }
+
+    //
+    // Kind of like an array of portions of the video that have been downloaded.
+
+    /**
+     * Get a TimeRange object with an array of the times of the video
+     * that have been downloaded. If you just want the percent of the
+     * video that's been downloaded, use bufferedPercent.
+     *
+     * @see [Buffered Spec]{@link http://dev.w3.org/html5/spec/video.html#dom-media-buffered}
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A mock {@link TimeRanges} object (following HTML spec)
+     */
+    buffered() {
+      let buffered = this.techGet_('buffered');
+      if (!buffered || !buffered.length) {
+        buffered = createTimeRanges(0, 0);
+      }
+      return buffered;
+    }
+
+    /**
+     * Get the TimeRanges of the media that are currently available
+     * for seeking to.
+     *
+     * @see [Seekable Spec]{@link https://html.spec.whatwg.org/multipage/media.html#dom-media-seekable}
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A mock {@link TimeRanges} object (following HTML spec)
+     */
+    seekable() {
+      let seekable = this.techGet_('seekable');
+      if (!seekable || !seekable.length) {
+        seekable = createTimeRanges(0, 0);
+      }
+      return seekable;
+    }
+
+    /**
+     * Returns whether the player is in the "seeking" state.
+     *
+     * @return {boolean} True if the player is in the seeking state, false if not.
+     */
+    seeking() {
+      return this.techGet_('seeking');
+    }
+
+    /**
+     * Returns whether the player is in the "ended" state.
+     *
+     * @return {boolean} True if the player is in the ended state, false if not.
+     */
+    ended() {
+      return this.techGet_('ended');
+    }
+
+    /**
+     * Returns the current state of network activity for the element, from
+     * the codes in the list below.
+     * - NETWORK_EMPTY (numeric value 0)
+     *   The element has not yet been initialised. All attributes are in
+     *   their initial states.
+     * - NETWORK_IDLE (numeric value 1)
+     *   The element's resource selection algorithm is active and has
+     *   selected a resource, but it is not actually using the network at
+     *   this time.
+     * - NETWORK_LOADING (numeric value 2)
+     *   The user agent is actively trying to download data.
+     * - NETWORK_NO_SOURCE (numeric value 3)
+     *   The element's resource selection algorithm is active, but it has
+     *   not yet found a resource to use.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states
+     * @return {number} the current network activity state
+     */
+    networkState() {
+      return this.techGet_('networkState');
+    }
+
+    /**
+     * Returns a value that expresses the current state of the element
+     * with respect to rendering the current playback position, from the
+     * codes in the list below.
+     * - HAVE_NOTHING (numeric value 0)
+     *   No information regarding the media resource is available.
+     * - HAVE_METADATA (numeric value 1)
+     *   Enough of the resource has been obtained that the duration of the
+     *   resource is available.
+     * - HAVE_CURRENT_DATA (numeric value 2)
+     *   Data for the immediate current playback position is available.
+     * - HAVE_FUTURE_DATA (numeric value 3)
+     *   Data for the immediate current playback position is available, as
+     *   well as enough data for the user agent to advance the current
+     *   playback position in the direction of playback.
+     * - HAVE_ENOUGH_DATA (numeric value 4)
+     *   The user agent estimates that enough data is available for
+     *   playback to proceed uninterrupted.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate
+     * @return {number} the current playback rendering state
+     */
+    readyState() {
+      return this.techGet_('readyState');
+    }
+
+    /**
+     * Get the percent (as a decimal) of the video that's been downloaded.
+     * This method is not a part of the native HTML video API.
+     *
+     * @return {number}
+     *         A decimal between 0 and 1 representing the percent
+     *         that is buffered 0 being 0% and 1 being 100%
+     */
+    bufferedPercent() {
+      return bufferedPercent(this.buffered(), this.duration());
+    }
+
+    /**
+     * Get the ending time of the last buffered time range
+     * This is used in the progress bar to encapsulate all time ranges.
+     *
+     * @return {number}
+     *         The end of the last buffered time range
+     */
+    bufferedEnd() {
+      const buffered = this.buffered();
+      const duration = this.duration();
+      let end = buffered.end(buffered.length - 1);
+      if (end > duration) {
+        end = duration;
+      }
+      return end;
+    }
+
+    /**
+     * Get or set the current volume of the media
+     *
+     * @param  {number} [percentAsDecimal]
+     *         The new volume as a decimal percent:
+     *         - 0 is muted/0%/off
+     *         - 1.0 is 100%/full
+     *         - 0.5 is half volume or 50%
+     *
+     * @return {number|undefined}
+     *         The current volume as a percent when getting
+     */
+    volume(percentAsDecimal) {
+      let vol;
+      if (percentAsDecimal !== undefined) {
+        // Force value to between 0 and 1
+        vol = Math.max(0, Math.min(1, percentAsDecimal));
+        this.cache_.volume = vol;
+        this.techCall_('setVolume', vol);
+        if (vol > 0) {
+          this.lastVolume_(vol);
+        }
+        return;
+      }
+
+      // Default to 1 when returning current volume.
+      vol = parseFloat(this.techGet_('volume'));
+      return isNaN(vol) ? 1 : vol;
+    }
+
+    /**
+     * Get the current muted state, or turn mute on or off
+     *
+     * @param {boolean} [muted]
+     *        - true to mute
+     *        - false to unmute
+     *
+     * @return {boolean|undefined}
+     *         - true if mute is on and getting
+     *         - false if mute is off and getting
+     *         - nothing if setting
+     */
+    muted(muted) {
+      if (muted !== undefined) {
+        this.techCall_('setMuted', muted);
+        return;
+      }
+      return this.techGet_('muted') || false;
+    }
+
+    /**
+     * Get the current defaultMuted state, or turn defaultMuted on or off. defaultMuted
+     * indicates the state of muted on initial playback.
+     *
+     * ```js
+     *   var myPlayer = videojs('some-player-id');
+     *
+     *   myPlayer.src("http://www.example.com/path/to/video.mp4");
+     *
+     *   // get, should be false
+     *   console.log(myPlayer.defaultMuted());
+     *   // set to true
+     *   myPlayer.defaultMuted(true);
+     *   // get should be true
+     *   console.log(myPlayer.defaultMuted());
+     * ```
+     *
+     * @param {boolean} [defaultMuted]
+     *        - true to mute
+     *        - false to unmute
+     *
+     * @return {boolean|undefined}
+     *         - true if defaultMuted is on and getting
+     *         - false if defaultMuted is off and getting
+     *         - Nothing when setting
+     */
+    defaultMuted(defaultMuted) {
+      if (defaultMuted !== undefined) {
+        this.techCall_('setDefaultMuted', defaultMuted);
+      }
+      return this.techGet_('defaultMuted') || false;
+    }
+
+    /**
+     * Get the last volume, or set it
+     *
+     * @param  {number} [percentAsDecimal]
+     *         The new last volume as a decimal percent:
+     *         - 0 is muted/0%/off
+     *         - 1.0 is 100%/full
+     *         - 0.5 is half volume or 50%
+     *
+     * @return {number|undefined}
+     *         - The current value of lastVolume as a percent when getting
+     *         - Nothing when setting
+     *
+     * @private
+     */
+    lastVolume_(percentAsDecimal) {
+      if (percentAsDecimal !== undefined && percentAsDecimal !== 0) {
+        this.cache_.lastVolume = percentAsDecimal;
+        return;
+      }
+      return this.cache_.lastVolume;
+    }
+
+    /**
+     * Check if current tech can support native fullscreen
+     * (e.g. with built in controls like iOS)
+     *
+     * @return {boolean}
+     *         if native fullscreen is supported
+     */
+    supportsFullScreen() {
+      return this.techGet_('supportsFullScreen') || false;
+    }
+
+    /**
+     * Check if the player is in fullscreen mode or tell the player that it
+     * is or is not in fullscreen mode.
+     *
+     * > NOTE: As of the latest HTML5 spec, isFullscreen is no longer an official
+     * property and instead document.fullscreenElement is used. But isFullscreen is
+     * still a valuable property for internal player workings.
+     *
+     * @param  {boolean} [isFS]
+     *         Set the players current fullscreen state
+     *
+     * @return {boolean|undefined}
+     *         - true if fullscreen is on and getting
+     *         - false if fullscreen is off and getting
+     *         - Nothing when setting
+     */
+    isFullscreen(isFS) {
+      if (isFS !== undefined) {
+        const oldValue = this.isFullscreen_;
+        this.isFullscreen_ = Boolean(isFS);
+
+        // if we changed fullscreen state and we're in prefixed mode, trigger fullscreenchange
+        // this is the only place where we trigger fullscreenchange events for older browsers
+        // fullWindow mode is treated as a prefixed event and will get a fullscreenchange event as well
+        if (this.isFullscreen_ !== oldValue && this.fsApi_.prefixed) {
+          /**
+             * @event Player#fullscreenchange
+             * @type {Event}
+             */
+          this.trigger('fullscreenchange');
+        }
+        this.toggleFullscreenClass_();
+        return;
+      }
+      return this.isFullscreen_;
+    }
+
+    /**
+     * Increase the size of the video to full screen
+     * In some browsers, full screen is not supported natively, so it enters
+     * "full window mode", where the video fills the browser window.
+     * In browsers and devices that support native full screen, sometimes the
+     * browser's default controls will be shown, and not the Video.js custom skin.
+     * This includes most mobile devices (iOS, Android) and older versions of
+     * Safari.
+     *
+     * @param  {Object} [fullscreenOptions]
+     *         Override the player fullscreen options
+     *
+     * @fires Player#fullscreenchange
+     */
+    requestFullscreen(fullscreenOptions) {
+      if (this.isInPictureInPicture()) {
+        this.exitPictureInPicture();
+      }
+      const self = this;
+      return new Promise((resolve, reject) => {
+        function offHandler() {
+          self.off('fullscreenerror', errorHandler);
+          self.off('fullscreenchange', changeHandler);
+        }
+        function changeHandler() {
+          offHandler();
+          resolve();
+        }
+        function errorHandler(e, err) {
+          offHandler();
+          reject(err);
+        }
+        self.one('fullscreenchange', changeHandler);
+        self.one('fullscreenerror', errorHandler);
+        const promise = self.requestFullscreenHelper_(fullscreenOptions);
+        if (promise) {
+          promise.then(offHandler, offHandler);
+          promise.then(resolve, reject);
+        }
+      });
+    }
+    requestFullscreenHelper_(fullscreenOptions) {
+      let fsOptions;
+
+      // Only pass fullscreen options to requestFullscreen in spec-compliant browsers.
+      // Use defaults or player configured option unless passed directly to this method.
+      if (!this.fsApi_.prefixed) {
+        fsOptions = this.options_.fullscreen && this.options_.fullscreen.options || {};
+        if (fullscreenOptions !== undefined) {
+          fsOptions = fullscreenOptions;
+        }
+      }
+
+      // This method works as follows:
+      // 1. if a fullscreen api is available, use it
+      //   1. call requestFullscreen with potential options
+      //   2. if we got a promise from above, use it to update isFullscreen()
+      // 2. otherwise, if the tech supports fullscreen, call `enterFullScreen` on it.
+      //   This is particularly used for iPhone, older iPads, and non-safari browser on iOS.
+      // 3. otherwise, use "fullWindow" mode
+      if (this.fsApi_.requestFullscreen) {
+        const promise = this.el_[this.fsApi_.requestFullscreen](fsOptions);
+
+        // Even on browsers with promise support this may not return a promise
+        if (promise) {
+          promise.then(() => this.isFullscreen(true), () => this.isFullscreen(false));
+        }
+        return promise;
+      } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) {
+        // we can't take the video.js controls fullscreen but we can go fullscreen
+        // with native controls
+        this.techCall_('enterFullScreen');
+      } else {
+        // fullscreen isn't supported so we'll just stretch the video element to
+        // fill the viewport
+        this.enterFullWindow();
+      }
+    }
+
+    /**
+     * Return the video to its normal size after having been in full screen mode
+     *
+     * @fires Player#fullscreenchange
+     */
+    exitFullscreen() {
+      const self = this;
+      return new Promise((resolve, reject) => {
+        function offHandler() {
+          self.off('fullscreenerror', errorHandler);
+          self.off('fullscreenchange', changeHandler);
+        }
+        function changeHandler() {
+          offHandler();
+          resolve();
+        }
+        function errorHandler(e, err) {
+          offHandler();
+          reject(err);
+        }
+        self.one('fullscreenchange', changeHandler);
+        self.one('fullscreenerror', errorHandler);
+        const promise = self.exitFullscreenHelper_();
+        if (promise) {
+          promise.then(offHandler, offHandler);
+          // map the promise to our resolve/reject methods
+          promise.then(resolve, reject);
+        }
+      });
+    }
+    exitFullscreenHelper_() {
+      if (this.fsApi_.requestFullscreen) {
+        const promise = document[this.fsApi_.exitFullscreen]();
+
+        // Even on browsers with promise support this may not return a promise
+        if (promise) {
+          // we're splitting the promise here, so, we want to catch the
+          // potential error so that this chain doesn't have unhandled errors
+          silencePromise(promise.then(() => this.isFullscreen(false)));
+        }
+        return promise;
+      } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) {
+        this.techCall_('exitFullScreen');
+      } else {
+        this.exitFullWindow();
+      }
+    }
+
+    /**
+     * When fullscreen isn't supported we can stretch the
+     * video container to as wide as the browser will let us.
+     *
+     * @fires Player#enterFullWindow
+     */
+    enterFullWindow() {
+      this.isFullscreen(true);
+      this.isFullWindow = true;
+
+      // Storing original doc overflow value to return to when fullscreen is off
+      this.docOrigOverflow = document.documentElement.style.overflow;
+
+      // Add listener for esc key to exit fullscreen
+      on(document, 'keydown', this.boundFullWindowOnEscKey_);
+
+      // Hide any scroll bars
+      document.documentElement.style.overflow = 'hidden';
+
+      // Apply fullscreen styles
+      addClass(document.body, 'vjs-full-window');
+
+      /**
+       * @event Player#enterFullWindow
+       * @type {Event}
+       */
+      this.trigger('enterFullWindow');
+    }
+
+    /**
+     * Check for call to either exit full window or
+     * full screen on ESC key
+     *
+     * @param {string} event
+     *        Event to check for key press
+     */
+    fullWindowOnEscKey(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        if (this.isFullscreen() === true) {
+          if (!this.isFullWindow) {
+            this.exitFullscreen();
+          } else {
+            this.exitFullWindow();
+          }
+        }
+      }
+    }
+
+    /**
+     * Exit full window
+     *
+     * @fires Player#exitFullWindow
+     */
+    exitFullWindow() {
+      this.isFullscreen(false);
+      this.isFullWindow = false;
+      off(document, 'keydown', this.boundFullWindowOnEscKey_);
+
+      // Unhide scroll bars.
+      document.documentElement.style.overflow = this.docOrigOverflow;
+
+      // Remove fullscreen styles
+      removeClass(document.body, 'vjs-full-window');
+
+      // Resize the box, controller, and poster to original sizes
+      // this.positionAll();
+      /**
+       * @event Player#exitFullWindow
+       * @type {Event}
+       */
+      this.trigger('exitFullWindow');
+    }
+
+    /**
+     * Get or set disable Picture-in-Picture mode.
+     *
+     * @param {boolean} [value]
+     *                  - true will disable Picture-in-Picture mode
+     *                  - false will enable Picture-in-Picture mode
+     */
+    disablePictureInPicture(value) {
+      if (value === undefined) {
+        return this.techGet_('disablePictureInPicture');
+      }
+      this.techCall_('setDisablePictureInPicture', value);
+      this.options_.disablePictureInPicture = value;
+      this.trigger('disablepictureinpicturechanged');
+    }
+
+    /**
+     * Check if the player is in Picture-in-Picture mode or tell the player that it
+     * is or is not in Picture-in-Picture mode.
+     *
+     * @param  {boolean} [isPiP]
+     *         Set the players current Picture-in-Picture state
+     *
+     * @return {boolean|undefined}
+     *         - true if Picture-in-Picture is on and getting
+     *         - false if Picture-in-Picture is off and getting
+     *         - nothing if setting
+     */
+    isInPictureInPicture(isPiP) {
+      if (isPiP !== undefined) {
+        this.isInPictureInPicture_ = !!isPiP;
+        this.togglePictureInPictureClass_();
+        return;
+      }
+      return !!this.isInPictureInPicture_;
+    }
+
+    /**
+     * Create a floating video window always on top of other windows so that users may
+     * continue consuming media while they interact with other content sites, or
+     * applications on their device.
+     *
+     * This can use document picture-in-picture or element picture in picture
+     *
+     * Set `enableDocumentPictureInPicture` to `true` to use docPiP on a supported browser
+     * Else set `disablePictureInPicture` to `false` to disable elPiP on a supported browser
+     *
+     *
+     * @see [Spec]{@link https://w3c.github.io/picture-in-picture/}
+     * @see [Spec]{@link https://wicg.github.io/document-picture-in-picture/}
+     *
+     * @fires Player#enterpictureinpicture
+     *
+     * @return {Promise}
+     *         A promise with a Picture-in-Picture window.
+     */
+    requestPictureInPicture() {
+      if (this.options_.enableDocumentPictureInPicture && window.documentPictureInPicture) {
+        const pipContainer = document.createElement(this.el().tagName);
+        pipContainer.classList = this.el().classList;
+        pipContainer.classList.add('vjs-pip-container');
+        if (this.posterImage) {
+          pipContainer.appendChild(this.posterImage.el().cloneNode(true));
+        }
+        if (this.titleBar) {
+          pipContainer.appendChild(this.titleBar.el().cloneNode(true));
+        }
+        pipContainer.appendChild(createEl('p', {
+          className: 'vjs-pip-text'
+        }, {}, this.localize('Playing in picture-in-picture')));
+        return window.documentPictureInPicture.requestWindow({
+          // The aspect ratio won't be correct, Chrome bug https://crbug.com/1407629
+          width: this.videoWidth(),
+          height: this.videoHeight()
+        }).then(pipWindow => {
+          copyStyleSheetsToWindow(pipWindow);
+          this.el_.parentNode.insertBefore(pipContainer, this.el_);
+          pipWindow.document.body.appendChild(this.el_);
+          pipWindow.document.body.classList.add('vjs-pip-window');
+          this.player_.isInPictureInPicture(true);
+          this.player_.trigger({
+            type: 'enterpictureinpicture',
+            pipWindow
+          });
+
+          // Listen for the PiP closing event to move the video back.
+          pipWindow.addEventListener('pagehide', event => {
+            const pipVideo = event.target.querySelector('.video-js');
+            pipContainer.parentNode.replaceChild(pipVideo, pipContainer);
+            this.player_.isInPictureInPicture(false);
+            this.player_.trigger('leavepictureinpicture');
+          });
+          return pipWindow;
+        });
+      }
+      if ('pictureInPictureEnabled' in document && this.disablePictureInPicture() === false) {
+        /**
+         * This event fires when the player enters picture in picture mode
+         *
+         * @event Player#enterpictureinpicture
+         * @type {Event}
+         */
+        return this.techGet_('requestPictureInPicture');
+      }
+      return Promise.reject('No PiP mode is available');
+    }
+
+    /**
+     * Exit Picture-in-Picture mode.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @fires Player#leavepictureinpicture
+     *
+     * @return {Promise}
+     *         A promise.
+     */
+    exitPictureInPicture() {
+      if (window.documentPictureInPicture && window.documentPictureInPicture.window) {
+        // With documentPictureInPicture, Player#leavepictureinpicture is fired in the pagehide handler
+        window.documentPictureInPicture.window.close();
+        return Promise.resolve();
+      }
+      if ('pictureInPictureEnabled' in document) {
+        /**
+         * This event fires when the player leaves picture in picture mode
+         *
+         * @event Player#leavepictureinpicture
+         * @type {Event}
+         */
+        return document.exitPictureInPicture();
+      }
+    }
+
+    /**
+     * Called when this Player has focus and a key gets pressed down, or when
+     * any Component of this player receives a key press that it doesn't handle.
+     * This allows player-wide hotkeys (either as defined below, or optionally
+     * by an external function).
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      const {
+        userActions
+      } = this.options_;
+
+      // Bail out if hotkeys are not configured.
+      if (!userActions || !userActions.hotkeys) {
+        return;
+      }
+
+      // Function that determines whether or not to exclude an element from
+      // hotkeys handling.
+      const excludeElement = el => {
+        const tagName = el.tagName.toLowerCase();
+
+        // The first and easiest test is for `contenteditable` elements.
+        if (el.isContentEditable) {
+          return true;
+        }
+
+        // Inputs matching these types will still trigger hotkey handling as
+        // they are not text inputs.
+        const allowedInputTypes = ['button', 'checkbox', 'hidden', 'radio', 'reset', 'submit'];
+        if (tagName === 'input') {
+          return allowedInputTypes.indexOf(el.type) === -1;
+        }
+
+        // The final test is by tag name. These tags will be excluded entirely.
+        const excludedTags = ['textarea'];
+        return excludedTags.indexOf(tagName) !== -1;
+      };
+
+      // Bail out if the user is focused on an interactive form element.
+      if (excludeElement(this.el_.ownerDocument.activeElement)) {
+        return;
+      }
+      if (typeof userActions.hotkeys === 'function') {
+        userActions.hotkeys.call(this, event);
+      } else {
+        this.handleHotkeys(event);
+      }
+    }
+
+    /**
+     * Called when this Player receives a hotkey keydown event.
+     * Supported player-wide hotkeys are:
+     *
+     *   f          - toggle fullscreen
+     *   m          - toggle mute
+     *   k or Space - toggle play/pause
+     *
+     * @param {Event} event
+     *        The `keydown` event that caused this function to be called.
+     */
+    handleHotkeys(event) {
+      const hotkeys = this.options_.userActions ? this.options_.userActions.hotkeys : {};
+
+      // set fullscreenKey, muteKey, playPauseKey from `hotkeys`, use defaults if not set
+      const {
+        fullscreenKey = keydownEvent => keycode.isEventKey(keydownEvent, 'f'),
+        muteKey = keydownEvent => keycode.isEventKey(keydownEvent, 'm'),
+        playPauseKey = keydownEvent => keycode.isEventKey(keydownEvent, 'k') || keycode.isEventKey(keydownEvent, 'Space')
+      } = hotkeys;
+      if (fullscreenKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const FSToggle = Component.getComponent('FullscreenToggle');
+        if (document[this.fsApi_.fullscreenEnabled] !== false) {
+          FSToggle.prototype.handleClick.call(this, event);
+        }
+      } else if (muteKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const MuteToggle = Component.getComponent('MuteToggle');
+        MuteToggle.prototype.handleClick.call(this, event);
+      } else if (playPauseKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const PlayToggle = Component.getComponent('PlayToggle');
+        PlayToggle.prototype.handleClick.call(this, event);
+      }
+    }
+
+    /**
+     * Check whether the player can play a given mimetype
+     *
+     * @see https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype
+     *
+     * @param {string} type
+     *        The mimetype to check
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    canPlayType(type) {
+      let can;
+
+      // Loop through each playback technology in the options order
+      for (let i = 0, j = this.options_.techOrder; i < j.length; i++) {
+        const techName = j[i];
+        let tech = Tech.getTech(techName);
+
+        // Support old behavior of techs being registered as components.
+        // Remove once that deprecated behavior is removed.
+        if (!tech) {
+          tech = Component.getComponent(techName);
+        }
+
+        // Check if the current tech is defined before continuing
+        if (!tech) {
+          log.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+          continue;
+        }
+
+        // Check if the browser supports this technology
+        if (tech.isSupported()) {
+          can = tech.canPlayType(type);
+          if (can) {
+            return can;
+          }
+        }
+      }
+      return '';
+    }
+
+    /**
+     * Select source based on tech-order or source-order
+     * Uses source-order selection if `options.sourceOrder` is truthy. Otherwise,
+     * defaults to tech-order selection
+     *
+     * @param {Array} sources
+     *        The sources for a media asset
+     *
+     * @return {Object|boolean}
+     *         Object of source and tech order or false
+     */
+    selectSource(sources) {
+      // Get only the techs specified in `techOrder` that exist and are supported by the
+      // current platform
+      const techs = this.options_.techOrder.map(techName => {
+        return [techName, Tech.getTech(techName)];
+      }).filter(([techName, tech]) => {
+        // Check if the current tech is defined before continuing
+        if (tech) {
+          // Check if the browser supports this technology
+          return tech.isSupported();
+        }
+        log.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+        return false;
+      });
+
+      // Iterate over each `innerArray` element once per `outerArray` element and execute
+      // `tester` with both. If `tester` returns a non-falsy value, exit early and return
+      // that value.
+      const findFirstPassingTechSourcePair = function (outerArray, innerArray, tester) {
+        let found;
+        outerArray.some(outerChoice => {
+          return innerArray.some(innerChoice => {
+            found = tester(outerChoice, innerChoice);
+            if (found) {
+              return true;
+            }
+          });
+        });
+        return found;
+      };
+      let foundSourceAndTech;
+      const flip = fn => (a, b) => fn(b, a);
+      const finder = ([techName, tech], source) => {
+        if (tech.canPlaySource(source, this.options_[techName.toLowerCase()])) {
+          return {
+            source,
+            tech: techName
+          };
+        }
+      };
+
+      // Depending on the truthiness of `options.sourceOrder`, we swap the order of techs and sources
+      // to select from them based on their priority.
+      if (this.options_.sourceOrder) {
+        // Source-first ordering
+        foundSourceAndTech = findFirstPassingTechSourcePair(sources, techs, flip(finder));
+      } else {
+        // Tech-first ordering
+        foundSourceAndTech = findFirstPassingTechSourcePair(techs, sources, finder);
+      }
+      return foundSourceAndTech || false;
+    }
+
+    /**
+     * Executes source setting and getting logic
+     *
+     * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+     *        A SourceObject, an array of SourceObjects, or a string referencing
+     *        a URL to a media source. It is _highly recommended_ that an object
+     *        or array of objects is used here, so that source selection
+     *        algorithms can take the `type` into account.
+     *
+     *        If not provided, this method acts as a getter.
+     * @param {boolean} [isRetry]
+     *        Indicates whether this is being called internally as a result of a retry
+     *
+     * @return {string|undefined}
+     *         If the `source` argument is missing, returns the current source
+     *         URL. Otherwise, returns nothing/undefined.
+     */
+    handleSrc_(source, isRetry) {
+      // getter usage
+      if (typeof source === 'undefined') {
+        return this.cache_.src || '';
+      }
+
+      // Reset retry behavior for new source
+      if (this.resetRetryOnError_) {
+        this.resetRetryOnError_();
+      }
+
+      // filter out invalid sources and turn our source into
+      // an array of source objects
+      const sources = filterSource(source);
+
+      // if a source was passed in then it is invalid because
+      // it was filtered to a zero length Array. So we have to
+      // show an error
+      if (!sources.length) {
+        this.setTimeout(function () {
+          this.error({
+            code: 4,
+            message: this.options_.notSupportedMessage
+          });
+        }, 0);
+        return;
+      }
+
+      // initial sources
+      this.changingSrc_ = true;
+
+      // Only update the cached source list if we are not retrying a new source after error,
+      // since in that case we want to include the failed source(s) in the cache
+      if (!isRetry) {
+        this.cache_.sources = sources;
+      }
+      this.updateSourceCaches_(sources[0]);
+
+      // middlewareSource is the source after it has been changed by middleware
+      setSource(this, sources[0], (middlewareSource, mws) => {
+        this.middleware_ = mws;
+
+        // since sourceSet is async we have to update the cache again after we select a source since
+        // the source that is selected could be out of order from the cache update above this callback.
+        if (!isRetry) {
+          this.cache_.sources = sources;
+        }
+        this.updateSourceCaches_(middlewareSource);
+        const err = this.src_(middlewareSource);
+        if (err) {
+          if (sources.length > 1) {
+            return this.handleSrc_(sources.slice(1));
+          }
+          this.changingSrc_ = false;
+
+          // We need to wrap this in a timeout to give folks a chance to add error event handlers
+          this.setTimeout(function () {
+            this.error({
+              code: 4,
+              message: this.options_.notSupportedMessage
+            });
+          }, 0);
+
+          // we could not find an appropriate tech, but let's still notify the delegate that this is it
+          // this needs a better comment about why this is needed
+          this.triggerReady();
+          return;
+        }
+        setTech(mws, this.tech_);
+      });
+
+      // Try another available source if this one fails before playback.
+      if (sources.length > 1) {
+        const retry = () => {
+          // Remove the error modal
+          this.error(null);
+          this.handleSrc_(sources.slice(1), true);
+        };
+        const stopListeningForErrors = () => {
+          this.off('error', retry);
+        };
+        this.one('error', retry);
+        this.one('playing', stopListeningForErrors);
+        this.resetRetryOnError_ = () => {
+          this.off('error', retry);
+          this.off('playing', stopListeningForErrors);
+        };
+      }
+    }
+
+    /**
+     * Get or set the video source.
+     *
+     * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+     *        A SourceObject, an array of SourceObjects, or a string referencing
+     *        a URL to a media source. It is _highly recommended_ that an object
+     *        or array of objects is used here, so that source selection
+     *        algorithms can take the `type` into account.
+     *
+     *        If not provided, this method acts as a getter.
+     *
+     * @return {string|undefined}
+     *         If the `source` argument is missing, returns the current source
+     *         URL. Otherwise, returns nothing/undefined.
+     */
+    src(source) {
+      return this.handleSrc_(source, false);
+    }
+
+    /**
+     * Set the source object on the tech, returns a boolean that indicates whether
+     * there is a tech that can play the source or not
+     *
+     * @param {Tech~SourceObject} source
+     *        The source object to set on the Tech
+     *
+     * @return {boolean}
+     *         - True if there is no Tech to playback this source
+     *         - False otherwise
+     *
+     * @private
+     */
+    src_(source) {
+      const sourceTech = this.selectSource([source]);
+      if (!sourceTech) {
+        return true;
+      }
+      if (!titleCaseEquals(sourceTech.tech, this.techName_)) {
+        this.changingSrc_ = true;
+        // load this technology with the chosen source
+        this.loadTech_(sourceTech.tech, sourceTech.source);
+        this.tech_.ready(() => {
+          this.changingSrc_ = false;
+        });
+        return false;
+      }
+
+      // wait until the tech is ready to set the source
+      // and set it synchronously if possible (#2326)
+      this.ready(function () {
+        // The setSource tech method was added with source handlers
+        // so older techs won't support it
+        // We need to check the direct prototype for the case where subclasses
+        // of the tech do not support source handlers
+        if (this.tech_.constructor.prototype.hasOwnProperty('setSource')) {
+          this.techCall_('setSource', source);
+        } else {
+          this.techCall_('src', source.src);
+        }
+        this.changingSrc_ = false;
+      }, true);
+      return false;
+    }
+
+    /**
+     * Begin loading the src data.
+     */
+    load() {
+      // Workaround to use the load method with the VHS.
+      // Does not cover the case when the load method is called directly from the mediaElement.
+      if (this.tech_ && this.tech_.vhs) {
+        this.src(this.currentSource());
+        return;
+      }
+      this.techCall_('load');
+    }
+
+    /**
+     * Reset the player. Loads the first tech in the techOrder,
+     * removes all the text tracks in the existing `tech`,
+     * and calls `reset` on the `tech`.
+     */
+    reset() {
+      if (this.paused()) {
+        this.doReset_();
+      } else {
+        const playPromise = this.play();
+        silencePromise(playPromise.then(() => this.doReset_()));
+      }
+    }
+    doReset_() {
+      if (this.tech_) {
+        this.tech_.clearTracks('text');
+      }
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      this.resetCache_();
+      this.poster('');
+      this.loadTech_(this.options_.techOrder[0], null);
+      this.techCall_('reset');
+      this.resetControlBarUI_();
+      this.error(null);
+      if (this.titleBar) {
+        this.titleBar.update({
+          title: undefined,
+          description: undefined
+        });
+      }
+      if (isEvented(this)) {
+        this.trigger('playerreset');
+      }
+    }
+
+    /**
+     * Reset Control Bar's UI by calling sub-methods that reset
+     * all of Control Bar's components
+     */
+    resetControlBarUI_() {
+      this.resetProgressBar_();
+      this.resetPlaybackRate_();
+      this.resetVolumeBar_();
+    }
+
+    /**
+     * Reset tech's progress so progress bar is reset in the UI
+     */
+    resetProgressBar_() {
+      this.currentTime(0);
+      const {
+        currentTimeDisplay,
+        durationDisplay,
+        progressControl,
+        remainingTimeDisplay
+      } = this.controlBar || {};
+      const {
+        seekBar
+      } = progressControl || {};
+      if (currentTimeDisplay) {
+        currentTimeDisplay.updateContent();
+      }
+      if (durationDisplay) {
+        durationDisplay.updateContent();
+      }
+      if (remainingTimeDisplay) {
+        remainingTimeDisplay.updateContent();
+      }
+      if (seekBar) {
+        seekBar.update();
+        if (seekBar.loadProgressBar) {
+          seekBar.loadProgressBar.update();
+        }
+      }
+    }
+
+    /**
+     * Reset Playback ratio
+     */
+    resetPlaybackRate_() {
+      this.playbackRate(this.defaultPlaybackRate());
+      this.handleTechRateChange_();
+    }
+
+    /**
+     * Reset Volume bar
+     */
+    resetVolumeBar_() {
+      this.volume(1.0);
+      this.trigger('volumechange');
+    }
+
+    /**
+     * Returns all of the current source objects.
+     *
+     * @return {Tech~SourceObject[]}
+     *         The current source objects
+     */
+    currentSources() {
+      const source = this.currentSource();
+      const sources = [];
+
+      // assume `{}` or `{ src }`
+      if (Object.keys(source).length !== 0) {
+        sources.push(source);
+      }
+      return this.cache_.sources || sources;
+    }
+
+    /**
+     * Returns the current source object.
+     *
+     * @return {Tech~SourceObject}
+     *         The current source object
+     */
+    currentSource() {
+      return this.cache_.source || {};
+    }
+
+    /**
+     * Returns the fully qualified URL of the current source value e.g. http://mysite.com/video.mp4
+     * Can be used in conjunction with `currentType` to assist in rebuilding the current source object.
+     *
+     * @return {string}
+     *         The current source
+     */
+    currentSrc() {
+      return this.currentSource() && this.currentSource().src || '';
+    }
+
+    /**
+     * Get the current source type e.g. video/mp4
+     * This can allow you rebuild the current source object so that you could load the same
+     * source and tech later
+     *
+     * @return {string}
+     *         The source MIME type
+     */
+    currentType() {
+      return this.currentSource() && this.currentSource().type || '';
+    }
+
+    /**
+     * Get or set the preload attribute
+     *
+     * @param {'none'|'auto'|'metadata'} [value]
+     *        Preload mode to pass to tech
+     *
+     * @return {string|undefined}
+     *         - The preload attribute value when getting
+     *         - Nothing when setting
+     */
+    preload(value) {
+      if (value !== undefined) {
+        this.techCall_('setPreload', value);
+        this.options_.preload = value;
+        return;
+      }
+      return this.techGet_('preload');
+    }
+
+    /**
+     * Get or set the autoplay option. When this is a boolean it will
+     * modify the attribute on the tech. When this is a string the attribute on
+     * the tech will be removed and `Player` will handle autoplay on loadstarts.
+     *
+     * @param {boolean|'play'|'muted'|'any'} [value]
+     *        - true: autoplay using the browser behavior
+     *        - false: do not autoplay
+     *        - 'play': call play() on every loadstart
+     *        - 'muted': call muted() then play() on every loadstart
+     *        - 'any': call play() on every loadstart. if that fails call muted() then play().
+     *        - *: values other than those listed here will be set `autoplay` to true
+     *
+     * @return {boolean|string|undefined}
+     *         - The current value of autoplay when getting
+     *         - Nothing when setting
+     */
+    autoplay(value) {
+      // getter usage
+      if (value === undefined) {
+        return this.options_.autoplay || false;
+      }
+      let techAutoplay;
+
+      // if the value is a valid string set it to that, or normalize `true` to 'play', if need be
+      if (typeof value === 'string' && /(any|play|muted)/.test(value) || value === true && this.options_.normalizeAutoplay) {
+        this.options_.autoplay = value;
+        this.manualAutoplay_(typeof value === 'string' ? value : 'play');
+        techAutoplay = false;
+
+        // any falsy value sets autoplay to false in the browser,
+        // lets do the same
+      } else if (!value) {
+        this.options_.autoplay = false;
+
+        // any other value (ie truthy) sets autoplay to true
+      } else {
+        this.options_.autoplay = true;
+      }
+      techAutoplay = typeof techAutoplay === 'undefined' ? this.options_.autoplay : techAutoplay;
+
+      // if we don't have a tech then we do not queue up
+      // a setAutoplay call on tech ready. We do this because the
+      // autoplay option will be passed in the constructor and we
+      // do not need to set it twice
+      if (this.tech_) {
+        this.techCall_('setAutoplay', techAutoplay);
+      }
+    }
+
+    /**
+     * Set or unset the playsinline attribute.
+     * Playsinline tells the browser that non-fullscreen playback is preferred.
+     *
+     * @param {boolean} [value]
+     *        - true means that we should try to play inline by default
+     *        - false means that we should use the browser's default playback mode,
+     *          which in most cases is inline. iOS Safari is a notable exception
+     *          and plays fullscreen by default.
+     *
+     * @return {string|undefined}
+     *         - the current value of playsinline
+     *         - Nothing when setting
+     *
+     * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+     */
+    playsinline(value) {
+      if (value !== undefined) {
+        this.techCall_('setPlaysinline', value);
+        this.options_.playsinline = value;
+      }
+      return this.techGet_('playsinline');
+    }
+
+    /**
+     * Get or set the loop attribute on the video element.
+     *
+     * @param {boolean} [value]
+     *        - true means that we should loop the video
+     *        - false means that we should not loop the video
+     *
+     * @return {boolean|undefined}
+     *         - The current value of loop when getting
+     *         - Nothing when setting
+     */
+    loop(value) {
+      if (value !== undefined) {
+        this.techCall_('setLoop', value);
+        this.options_.loop = value;
+        return;
+      }
+      return this.techGet_('loop');
+    }
+
+    /**
+     * Get or set the poster image source url
+     *
+     * @fires Player#posterchange
+     *
+     * @param {string} [src]
+     *        Poster image source URL
+     *
+     * @return {string|undefined}
+     *         - The current value of poster when getting
+     *         - Nothing when setting
+     */
+    poster(src) {
+      if (src === undefined) {
+        return this.poster_;
+      }
+
+      // The correct way to remove a poster is to set as an empty string
+      // other falsey values will throw errors
+      if (!src) {
+        src = '';
+      }
+      if (src === this.poster_) {
+        return;
+      }
+
+      // update the internal poster variable
+      this.poster_ = src;
+
+      // update the tech's poster
+      this.techCall_('setPoster', src);
+      this.isPosterFromTech_ = false;
+
+      // alert components that the poster has been set
+      /**
+       * This event fires when the poster image is changed on the player.
+       *
+       * @event Player#posterchange
+       * @type {Event}
+       */
+      this.trigger('posterchange');
+    }
+
+    /**
+     * Some techs (e.g. YouTube) can provide a poster source in an
+     * asynchronous way. We want the poster component to use this
+     * poster source so that it covers up the tech's controls.
+     * (YouTube's play button). However we only want to use this
+     * source if the player user hasn't set a poster through
+     * the normal APIs.
+     *
+     * @fires Player#posterchange
+     * @listens Tech#posterchange
+     * @private
+     */
+    handleTechPosterChange_() {
+      if ((!this.poster_ || this.options_.techCanOverridePoster) && this.tech_ && this.tech_.poster) {
+        const newPoster = this.tech_.poster() || '';
+        if (newPoster !== this.poster_) {
+          this.poster_ = newPoster;
+          this.isPosterFromTech_ = true;
+
+          // Let components know the poster has changed
+          this.trigger('posterchange');
+        }
+      }
+    }
+
+    /**
+     * Get or set whether or not the controls are showing.
+     *
+     * @fires Player#controlsenabled
+     *
+     * @param {boolean} [bool]
+     *        - true to turn controls on
+     *        - false to turn controls off
+     *
+     * @return {boolean|undefined}
+     *         - The current value of controls when getting
+     *         - Nothing when setting
+     */
+    controls(bool) {
+      if (bool === undefined) {
+        return !!this.controls_;
+      }
+      bool = !!bool;
+
+      // Don't trigger a change event unless it actually changed
+      if (this.controls_ === bool) {
+        return;
+      }
+      this.controls_ = bool;
+      if (this.usingNativeControls()) {
+        this.techCall_('setControls', bool);
+      }
+      if (this.controls_) {
+        this.removeClass('vjs-controls-disabled');
+        this.addClass('vjs-controls-enabled');
+        /**
+         * @event Player#controlsenabled
+         * @type {Event}
+         */
+        this.trigger('controlsenabled');
+        if (!this.usingNativeControls()) {
+          this.addTechControlsListeners_();
+        }
+      } else {
+        this.removeClass('vjs-controls-enabled');
+        this.addClass('vjs-controls-disabled');
+        /**
+         * @event Player#controlsdisabled
+         * @type {Event}
+         */
+        this.trigger('controlsdisabled');
+        if (!this.usingNativeControls()) {
+          this.removeTechControlsListeners_();
+        }
+      }
+    }
+
+    /**
+     * Toggle native controls on/off. Native controls are the controls built into
+     * devices (e.g. default iPhone controls) or other techs
+     * (e.g. Vimeo Controls)
+     * **This should only be set by the current tech, because only the tech knows
+     * if it can support native controls**
+     *
+     * @fires Player#usingnativecontrols
+     * @fires Player#usingcustomcontrols
+     *
+     * @param {boolean} [bool]
+     *        - true to turn native controls on
+     *        - false to turn native controls off
+     *
+     * @return {boolean|undefined}
+     *         - The current value of native controls when getting
+     *         - Nothing when setting
+     */
+    usingNativeControls(bool) {
+      if (bool === undefined) {
+        return !!this.usingNativeControls_;
+      }
+      bool = !!bool;
+
+      // Don't trigger a change event unless it actually changed
+      if (this.usingNativeControls_ === bool) {
+        return;
+      }
+      this.usingNativeControls_ = bool;
+      if (this.usingNativeControls_) {
+        this.addClass('vjs-using-native-controls');
+
+        /**
+         * player is using the native device controls
+         *
+         * @event Player#usingnativecontrols
+         * @type {Event}
+         */
+        this.trigger('usingnativecontrols');
+      } else {
+        this.removeClass('vjs-using-native-controls');
+
+        /**
+         * player is using the custom HTML controls
+         *
+         * @event Player#usingcustomcontrols
+         * @type {Event}
+         */
+        this.trigger('usingcustomcontrols');
+      }
+    }
+
+    /**
+     * Set or get the current MediaError
+     *
+     * @fires Player#error
+     *
+     * @param  {MediaError|string|number} [err]
+     *         A MediaError or a string/number to be turned
+     *         into a MediaError
+     *
+     * @return {MediaError|null|undefined}
+     *         - The current MediaError when getting (or null)
+     *         - Nothing when setting
+     */
+    error(err) {
+      if (err === undefined) {
+        return this.error_ || null;
+      }
+
+      // allow hooks to modify error object
+      hooks('beforeerror').forEach(hookFunction => {
+        const newErr = hookFunction(this, err);
+        if (!(isObject(newErr) && !Array.isArray(newErr) || typeof newErr === 'string' || typeof newErr === 'number' || newErr === null)) {
+          this.log.error('please return a value that MediaError expects in beforeerror hooks');
+          return;
+        }
+        err = newErr;
+      });
+
+      // Suppress the first error message for no compatible source until
+      // user interaction
+      if (this.options_.suppressNotSupportedError && err && err.code === 4) {
+        const triggerSuppressedError = function () {
+          this.error(err);
+        };
+        this.options_.suppressNotSupportedError = false;
+        this.any(['click', 'touchstart'], triggerSuppressedError);
+        this.one('loadstart', function () {
+          this.off(['click', 'touchstart'], triggerSuppressedError);
+        });
+        return;
+      }
+
+      // restoring to default
+      if (err === null) {
+        this.error_ = null;
+        this.removeClass('vjs-error');
+        if (this.errorDisplay) {
+          this.errorDisplay.close();
+        }
+        return;
+      }
+      this.error_ = new MediaError(err);
+
+      // add the vjs-error classname to the player
+      this.addClass('vjs-error');
+
+      // log the name of the error type and any message
+      // IE11 logs "[object object]" and required you to expand message to see error object
+      log.error(`(CODE:${this.error_.code} ${MediaError.errorTypes[this.error_.code]})`, this.error_.message, this.error_);
+
+      /**
+       * @event Player#error
+       * @type {Event}
+       */
+      this.trigger('error');
+
+      // notify hooks of the per player error
+      hooks('error').forEach(hookFunction => hookFunction(this, this.error_));
+      return;
+    }
+
+    /**
+     * Report user activity
+     *
+     * @param {Object} event
+     *        Event object
+     */
+    reportUserActivity(event) {
+      this.userActivity_ = true;
+    }
+
+    /**
+     * Get/set if user is active
+     *
+     * @fires Player#useractive
+     * @fires Player#userinactive
+     *
+     * @param {boolean} [bool]
+     *        - true if the user is active
+     *        - false if the user is inactive
+     *
+     * @return {boolean|undefined}
+     *         - The current value of userActive when getting
+     *         - Nothing when setting
+     */
+    userActive(bool) {
+      if (bool === undefined) {
+        return this.userActive_;
+      }
+      bool = !!bool;
+      if (bool === this.userActive_) {
+        return;
+      }
+      this.userActive_ = bool;
+      if (this.userActive_) {
+        this.userActivity_ = true;
+        this.removeClass('vjs-user-inactive');
+        this.addClass('vjs-user-active');
+        /**
+         * @event Player#useractive
+         * @type {Event}
+         */
+        this.trigger('useractive');
+        return;
+      }
+
+      // Chrome/Safari/IE have bugs where when you change the cursor it can
+      // trigger a mousemove event. This causes an issue when you're hiding
+      // the cursor when the user is inactive, and a mousemove signals user
+      // activity. Making it impossible to go into inactive mode. Specifically
+      // this happens in fullscreen when we really need to hide the cursor.
+      //
+      // When this gets resolved in ALL browsers it can be removed
+      // https://code.google.com/p/chromium/issues/detail?id=103041
+      if (this.tech_) {
+        this.tech_.one('mousemove', function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+        });
+      }
+      this.userActivity_ = false;
+      this.removeClass('vjs-user-active');
+      this.addClass('vjs-user-inactive');
+      /**
+       * @event Player#userinactive
+       * @type {Event}
+       */
+      this.trigger('userinactive');
+    }
+
+    /**
+     * Listen for user activity based on timeout value
+     *
+     * @private
+     */
+    listenForUserActivity_() {
+      let mouseInProgress;
+      let lastMoveX;
+      let lastMoveY;
+      const handleActivity = bind_(this, this.reportUserActivity);
+      const handleMouseMove = function (e) {
+        // #1068 - Prevent mousemove spamming
+        // Chrome Bug: https://code.google.com/p/chromium/issues/detail?id=366970
+        if (e.screenX !== lastMoveX || e.screenY !== lastMoveY) {
+          lastMoveX = e.screenX;
+          lastMoveY = e.screenY;
+          handleActivity();
+        }
+      };
+      const handleMouseDown = function () {
+        handleActivity();
+        // For as long as the they are touching the device or have their mouse down,
+        // we consider them active even if they're not moving their finger or mouse.
+        // So we want to continue to update that they are active
+        this.clearInterval(mouseInProgress);
+        // Setting userActivity=true now and setting the interval to the same time
+        // as the activityCheck interval (250) should ensure we never miss the
+        // next activityCheck
+        mouseInProgress = this.setInterval(handleActivity, 250);
+      };
+      const handleMouseUpAndMouseLeave = function (event) {
+        handleActivity();
+        // Stop the interval that maintains activity if the mouse/touch is down
+        this.clearInterval(mouseInProgress);
+      };
+
+      // Any mouse movement will be considered user activity
+      this.on('mousedown', handleMouseDown);
+      this.on('mousemove', handleMouseMove);
+      this.on('mouseup', handleMouseUpAndMouseLeave);
+      this.on('mouseleave', handleMouseUpAndMouseLeave);
+      const controlBar = this.getChild('controlBar');
+
+      // Fixes bug on Android & iOS where when tapping progressBar (when control bar is displayed)
+      // controlBar would no longer be hidden by default timeout.
+      if (controlBar && !IS_IOS && !IS_ANDROID) {
+        controlBar.on('mouseenter', function (event) {
+          if (this.player().options_.inactivityTimeout !== 0) {
+            this.player().cache_.inactivityTimeout = this.player().options_.inactivityTimeout;
+          }
+          this.player().options_.inactivityTimeout = 0;
+        });
+        controlBar.on('mouseleave', function (event) {
+          this.player().options_.inactivityTimeout = this.player().cache_.inactivityTimeout;
+        });
+      }
+
+      // Listen for keyboard navigation
+      // Shouldn't need to use inProgress interval because of key repeat
+      this.on('keydown', handleActivity);
+      this.on('keyup', handleActivity);
+
+      // Run an interval every 250 milliseconds instead of stuffing everything into
+      // the mousemove/touchmove function itself, to prevent performance degradation.
+      // `this.reportUserActivity` simply sets this.userActivity_ to true, which
+      // then gets picked up by this loop
+      // http://ejohn.org/blog/learning-from-twitter/
+      let inactivityTimeout;
+
+      /** @this Player */
+      const activityCheck = function () {
+        // Check to see if mouse/touch activity has happened
+        if (!this.userActivity_) {
+          return;
+        }
+
+        // Reset the activity tracker
+        this.userActivity_ = false;
+
+        // If the user state was inactive, set the state to active
+        this.userActive(true);
+
+        // Clear any existing inactivity timeout to start the timer over
+        this.clearTimeout(inactivityTimeout);
+        const timeout = this.options_.inactivityTimeout;
+        if (timeout <= 0) {
+          return;
+        }
+
+        // In <timeout> milliseconds, if no more activity has occurred the
+        // user will be considered inactive
+        inactivityTimeout = this.setTimeout(function () {
+          // Protect against the case where the inactivityTimeout can trigger just
+          // before the next user activity is picked up by the activity check loop
+          // causing a flicker
+          if (!this.userActivity_) {
+            this.userActive(false);
+          }
+        }, timeout);
+      };
+      this.setInterval(activityCheck, 250);
+    }
+
+    /**
+     * Gets or sets the current playback rate. A playback rate of
+     * 1.0 represents normal speed and 0.5 would indicate half-speed
+     * playback, for instance.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-playbackrate
+     *
+     * @param {number} [rate]
+     *       New playback rate to set.
+     *
+     * @return {number|undefined}
+     *         - The current playback rate when getting or 1.0
+     *         - Nothing when setting
+     */
+    playbackRate(rate) {
+      if (rate !== undefined) {
+        // NOTE: this.cache_.lastPlaybackRate is set from the tech handler
+        // that is registered above
+        this.techCall_('setPlaybackRate', rate);
+        return;
+      }
+      if (this.tech_ && this.tech_.featuresPlaybackRate) {
+        return this.cache_.lastPlaybackRate || this.techGet_('playbackRate');
+      }
+      return 1.0;
+    }
+
+    /**
+     * Gets or sets the current default playback rate. A default playback rate of
+     * 1.0 represents normal speed and 0.5 would indicate half-speed playback, for instance.
+     * defaultPlaybackRate will only represent what the initial playbackRate of a video was, not
+     * not the current playbackRate.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-defaultplaybackrate
+     *
+     * @param {number} [rate]
+     *       New default playback rate to set.
+     *
+     * @return {number|undefined}
+     *         - The default playback rate when getting or 1.0
+     *         - Nothing when setting
+     */
+    defaultPlaybackRate(rate) {
+      if (rate !== undefined) {
+        return this.techCall_('setDefaultPlaybackRate', rate);
+      }
+      if (this.tech_ && this.tech_.featuresPlaybackRate) {
+        return this.techGet_('defaultPlaybackRate');
+      }
+      return 1.0;
+    }
+
+    /**
+     * Gets or sets the audio flag
+     *
+     * @param {boolean} [bool]
+     *        - true signals that this is an audio player
+     *        - false signals that this is not an audio player
+     *
+     * @return {boolean|undefined}
+     *         - The current value of isAudio when getting
+     *         - Nothing when setting
+     */
+    isAudio(bool) {
+      if (bool !== undefined) {
+        this.isAudio_ = !!bool;
+        return;
+      }
+      return !!this.isAudio_;
+    }
+    enableAudioOnlyUI_() {
+      // Update styling immediately to show the control bar so we can get its height
+      this.addClass('vjs-audio-only-mode');
+      const playerChildren = this.children();
+      const controlBar = this.getChild('ControlBar');
+      const controlBarHeight = controlBar && controlBar.currentHeight();
+
+      // Hide all player components except the control bar. Control bar components
+      // needed only for video are hidden with CSS
+      playerChildren.forEach(child => {
+        if (child === controlBar) {
+          return;
+        }
+        if (child.el_ && !child.hasClass('vjs-hidden')) {
+          child.hide();
+          this.audioOnlyCache_.hiddenChildren.push(child);
+        }
+      });
+      this.audioOnlyCache_.playerHeight = this.currentHeight();
+
+      // Set the player height the same as the control bar
+      this.height(controlBarHeight);
+      this.trigger('audioonlymodechange');
+    }
+    disableAudioOnlyUI_() {
+      this.removeClass('vjs-audio-only-mode');
+
+      // Show player components that were previously hidden
+      this.audioOnlyCache_.hiddenChildren.forEach(child => child.show());
+
+      // Reset player height
+      this.height(this.audioOnlyCache_.playerHeight);
+      this.trigger('audioonlymodechange');
+    }
+
+    /**
+     * Get the current audioOnlyMode state or set audioOnlyMode to true or false.
+     *
+     * Setting this to `true` will hide all player components except the control bar,
+     * as well as control bar components needed only for video.
+     *
+     * @param {boolean} [value]
+     *         The value to set audioOnlyMode to.
+     *
+     * @return {Promise|boolean}
+     *        A Promise is returned when setting the state, and a boolean when getting
+     *        the present state
+     */
+    audioOnlyMode(value) {
+      if (typeof value !== 'boolean' || value === this.audioOnlyMode_) {
+        return this.audioOnlyMode_;
+      }
+      this.audioOnlyMode_ = value;
+
+      // Enable Audio Only Mode
+      if (value) {
+        const exitPromises = [];
+
+        // Fullscreen and PiP are not supported in audioOnlyMode, so exit if we need to.
+        if (this.isInPictureInPicture()) {
+          exitPromises.push(this.exitPictureInPicture());
+        }
+        if (this.isFullscreen()) {
+          exitPromises.push(this.exitFullscreen());
+        }
+        if (this.audioPosterMode()) {
+          exitPromises.push(this.audioPosterMode(false));
+        }
+        return Promise.all(exitPromises).then(() => this.enableAudioOnlyUI_());
+      }
+
+      // Disable Audio Only Mode
+      return Promise.resolve().then(() => this.disableAudioOnlyUI_());
+    }
+    enablePosterModeUI_() {
+      // Hide the video element and show the poster image to enable posterModeUI
+      const tech = this.tech_ && this.tech_;
+      tech.hide();
+      this.addClass('vjs-audio-poster-mode');
+      this.trigger('audiopostermodechange');
+    }
+    disablePosterModeUI_() {
+      // Show the video element and hide the poster image to disable posterModeUI
+      const tech = this.tech_ && this.tech_;
+      tech.show();
+      this.removeClass('vjs-audio-poster-mode');
+      this.trigger('audiopostermodechange');
+    }
+
+    /**
+     * Get the current audioPosterMode state or set audioPosterMode to true or false
+     *
+     * @param {boolean} [value]
+     *         The value to set audioPosterMode to.
+     *
+     * @return {Promise|boolean}
+     *         A Promise is returned when setting the state, and a boolean when getting
+     *        the present state
+     */
+    audioPosterMode(value) {
+      if (typeof value !== 'boolean' || value === this.audioPosterMode_) {
+        return this.audioPosterMode_;
+      }
+      this.audioPosterMode_ = value;
+      if (value) {
+        if (this.audioOnlyMode()) {
+          const audioOnlyModePromise = this.audioOnlyMode(false);
+          return audioOnlyModePromise.then(() => {
+            // enable audio poster mode after audio only mode is disabled
+            this.enablePosterModeUI_();
+          });
+        }
+        return Promise.resolve().then(() => {
+          // enable audio poster mode
+          this.enablePosterModeUI_();
+        });
+      }
+      return Promise.resolve().then(() => {
+        // disable audio poster mode
+        this.disablePosterModeUI_();
+      });
+    }
+
+    /**
+     * A helper method for adding a {@link TextTrack} to our
+     * {@link TextTrackList}.
+     *
+     * In addition to the W3C settings we allow adding additional info through options.
+     *
+     * @see http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack
+     *
+     * @param {string} [kind]
+     *        the kind of TextTrack you are adding
+     *
+     * @param {string} [label]
+     *        the label to give the TextTrack label
+     *
+     * @param {string} [language]
+     *        the language to set on the TextTrack
+     *
+     * @return {TextTrack|undefined}
+     *         the TextTrack that was added or undefined
+     *         if there is no tech
+     */
+    addTextTrack(kind, label, language) {
+      if (this.tech_) {
+        return this.tech_.addTextTrack(kind, label, language);
+      }
+    }
+
+    /**
+     * Create a remote {@link TextTrack} and an {@link HTMLTrackElement}.
+     *
+     * @param {Object} options
+     *        Options to pass to {@link HTMLTrackElement} during creation. See
+     *        {@link HTMLTrackElement} for object properties that you should use.
+     *
+     * @param {boolean} [manualCleanup=false] if set to true, the TextTrack will not be removed
+     *                                        from the TextTrackList and HtmlTrackElementList
+     *                                        after a source change
+     *
+     * @return { import('./tracks/html-track-element').default }
+     *         the HTMLTrackElement that was created and added
+     *         to the HtmlTrackElementList and the remote
+     *         TextTrackList
+     *
+     */
+    addRemoteTextTrack(options, manualCleanup) {
+      if (this.tech_) {
+        return this.tech_.addRemoteTextTrack(options, manualCleanup);
+      }
+    }
+
+    /**
+     * Remove a remote {@link TextTrack} from the respective
+     * {@link TextTrackList} and {@link HtmlTrackElementList}.
+     *
+     * @param {Object} track
+     *        Remote {@link TextTrack} to remove
+     *
+     * @return {undefined}
+     *         does not return anything
+     */
+    removeRemoteTextTrack(obj = {}) {
+      let {
+        track
+      } = obj;
+      if (!track) {
+        track = obj;
+      }
+
+      // destructure the input into an object with a track argument, defaulting to arguments[0]
+      // default the whole argument to an empty object if nothing was passed in
+
+      if (this.tech_) {
+        return this.tech_.removeRemoteTextTrack(track);
+      }
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object|undefined}
+     *         An object with supported media playback quality metrics or undefined if there
+     *         is no tech or the tech does not support it.
+     */
+    getVideoPlaybackQuality() {
+      return this.techGet_('getVideoPlaybackQuality');
+    }
+
+    /**
+     * Get video width
+     *
+     * @return {number}
+     *         current video width
+     */
+    videoWidth() {
+      return this.tech_ && this.tech_.videoWidth && this.tech_.videoWidth() || 0;
+    }
+
+    /**
+     * Get video height
+     *
+     * @return {number}
+     *         current video height
+     */
+    videoHeight() {
+      return this.tech_ && this.tech_.videoHeight && this.tech_.videoHeight() || 0;
+    }
+
+    /**
+     * Set or get the player's language code.
+     *
+     * Changing the language will trigger
+     * [languagechange]{@link Player#event:languagechange}
+     * which Components can use to update control text.
+     * ClickableComponent will update its control text by default on
+     * [languagechange]{@link Player#event:languagechange}.
+     *
+     * @fires Player#languagechange
+     *
+     * @param {string} [code]
+     *        the language code to set the player to
+     *
+     * @return {string|undefined}
+     *         - The current language code when getting
+     *         - Nothing when setting
+     */
+    language(code) {
+      if (code === undefined) {
+        return this.language_;
+      }
+      if (this.language_ !== String(code).toLowerCase()) {
+        this.language_ = String(code).toLowerCase();
+
+        // during first init, it's possible some things won't be evented
+        if (isEvented(this)) {
+          /**
+          * fires when the player language change
+          *
+          * @event Player#languagechange
+          * @type {Event}
+          */
+          this.trigger('languagechange');
+        }
+      }
+    }
+
+    /**
+     * Get the player's language dictionary
+     * Merge every time, because a newly added plugin might call videojs.addLanguage() at any time
+     * Languages specified directly in the player options have precedence
+     *
+     * @return {Array}
+     *         An array of of supported languages
+     */
+    languages() {
+      return merge(Player.prototype.options_.languages, this.languages_);
+    }
+
+    /**
+     * returns a JavaScript object representing the current track
+     * information. **DOES not return it as JSON**
+     *
+     * @return {Object}
+     *         Object representing the current of track info
+     */
+    toJSON() {
+      const options = merge(this.options_);
+      const tracks = options.tracks;
+      options.tracks = [];
+      for (let i = 0; i < tracks.length; i++) {
+        let track = tracks[i];
+
+        // deep merge tracks and null out player so no circular references
+        track = merge(track);
+        track.player = undefined;
+        options.tracks[i] = track;
+      }
+      return options;
+    }
+
+    /**
+     * Creates a simple modal dialog (an instance of the {@link ModalDialog}
+     * component) that immediately overlays the player with arbitrary
+     * content and removes itself when closed.
+     *
+     * @param {string|Function|Element|Array|null} content
+     *        Same as {@link ModalDialog#content}'s param of the same name.
+     *        The most straight-forward usage is to provide a string or DOM
+     *        element.
+     *
+     * @param {Object} [options]
+     *        Extra options which will be passed on to the {@link ModalDialog}.
+     *
+     * @return {ModalDialog}
+     *         the {@link ModalDialog} that was created
+     */
+    createModal(content, options) {
+      options = options || {};
+      options.content = content || '';
+      const modal = new ModalDialog(this, options);
+      this.addChild(modal);
+      modal.on('dispose', () => {
+        this.removeChild(modal);
+      });
+      modal.open();
+      return modal;
+    }
+
+    /**
+     * Change breakpoint classes when the player resizes.
+     *
+     * @private
+     */
+    updateCurrentBreakpoint_() {
+      if (!this.responsive()) {
+        return;
+      }
+      const currentBreakpoint = this.currentBreakpoint();
+      const currentWidth = this.currentWidth();
+      for (let i = 0; i < BREAKPOINT_ORDER.length; i++) {
+        const candidateBreakpoint = BREAKPOINT_ORDER[i];
+        const maxWidth = this.breakpoints_[candidateBreakpoint];
+        if (currentWidth <= maxWidth) {
+          // The current breakpoint did not change, nothing to do.
+          if (currentBreakpoint === candidateBreakpoint) {
+            return;
+          }
+
+          // Only remove a class if there is a current breakpoint.
+          if (currentBreakpoint) {
+            this.removeClass(BREAKPOINT_CLASSES[currentBreakpoint]);
+          }
+          this.addClass(BREAKPOINT_CLASSES[candidateBreakpoint]);
+          this.breakpoint_ = candidateBreakpoint;
+          break;
+        }
+      }
+    }
+
+    /**
+     * Removes the current breakpoint.
+     *
+     * @private
+     */
+    removeCurrentBreakpoint_() {
+      const className = this.currentBreakpointClass();
+      this.breakpoint_ = '';
+      if (className) {
+        this.removeClass(className);
+      }
+    }
+
+    /**
+     * Get or set breakpoints on the player.
+     *
+     * Calling this method with an object or `true` will remove any previous
+     * custom breakpoints and start from the defaults again.
+     *
+     * @param  {Object|boolean} [breakpoints]
+     *         If an object is given, it can be used to provide custom
+     *         breakpoints. If `true` is given, will set default breakpoints.
+     *         If this argument is not given, will simply return the current
+     *         breakpoints.
+     *
+     * @param  {number} [breakpoints.tiny]
+     *         The maximum width for the "vjs-layout-tiny" class.
+     *
+     * @param  {number} [breakpoints.xsmall]
+     *         The maximum width for the "vjs-layout-x-small" class.
+     *
+     * @param  {number} [breakpoints.small]
+     *         The maximum width for the "vjs-layout-small" class.
+     *
+     * @param  {number} [breakpoints.medium]
+     *         The maximum width for the "vjs-layout-medium" class.
+     *
+     * @param  {number} [breakpoints.large]
+     *         The maximum width for the "vjs-layout-large" class.
+     *
+     * @param  {number} [breakpoints.xlarge]
+     *         The maximum width for the "vjs-layout-x-large" class.
+     *
+     * @param  {number} [breakpoints.huge]
+     *         The maximum width for the "vjs-layout-huge" class.
+     *
+     * @return {Object}
+     *         An object mapping breakpoint names to maximum width values.
+     */
+    breakpoints(breakpoints) {
+      // Used as a getter.
+      if (breakpoints === undefined) {
+        return Object.assign(this.breakpoints_);
+      }
+      this.breakpoint_ = '';
+      this.breakpoints_ = Object.assign({}, DEFAULT_BREAKPOINTS, breakpoints);
+
+      // When breakpoint definitions change, we need to update the currently
+      // selected breakpoint.
+      this.updateCurrentBreakpoint_();
+
+      // Clone the breakpoints before returning.
+      return Object.assign(this.breakpoints_);
+    }
+
+    /**
+     * Get or set a flag indicating whether or not this player should adjust
+     * its UI based on its dimensions.
+     *
+     * @param  {boolean} [value]
+     *         Should be `true` if the player should adjust its UI based on its
+     *         dimensions; otherwise, should be `false`.
+     *
+     * @return {boolean|undefined}
+     *         Will be `true` if this player should adjust its UI based on its
+     *         dimensions; otherwise, will be `false`.
+     *         Nothing if setting
+     */
+    responsive(value) {
+      // Used as a getter.
+      if (value === undefined) {
+        return this.responsive_;
+      }
+      value = Boolean(value);
+      const current = this.responsive_;
+
+      // Nothing changed.
+      if (value === current) {
+        return;
+      }
+
+      // The value actually changed, set it.
+      this.responsive_ = value;
+
+      // Start listening for breakpoints and set the initial breakpoint if the
+      // player is now responsive.
+      if (value) {
+        this.on('playerresize', this.boundUpdateCurrentBreakpoint_);
+        this.updateCurrentBreakpoint_();
+
+        // Stop listening for breakpoints if the player is no longer responsive.
+      } else {
+        this.off('playerresize', this.boundUpdateCurrentBreakpoint_);
+        this.removeCurrentBreakpoint_();
+      }
+      return value;
+    }
+
+    /**
+     * Get current breakpoint name, if any.
+     *
+     * @return {string}
+     *         If there is currently a breakpoint set, returns a the key from the
+     *         breakpoints object matching it. Otherwise, returns an empty string.
+     */
+    currentBreakpoint() {
+      return this.breakpoint_;
+    }
+
+    /**
+     * Get the current breakpoint class name.
+     *
+     * @return {string}
+     *         The matching class name (e.g. `"vjs-layout-tiny"` or
+     *         `"vjs-layout-large"`) for the current breakpoint. Empty string if
+     *         there is no current breakpoint.
+     */
+    currentBreakpointClass() {
+      return BREAKPOINT_CLASSES[this.breakpoint_] || '';
+    }
+
+    /**
+     * An object that describes a single piece of media.
+     *
+     * Properties that are not part of this type description will be retained; so,
+     * this can be viewed as a generic metadata storage mechanism as well.
+     *
+     * @see      {@link https://wicg.github.io/mediasession/#the-mediametadata-interface}
+     * @typedef  {Object} Player~MediaObject
+     *
+     * @property {string} [album]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {string} [artist]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {Object[]} [artwork]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API. If not specified, will be populated via the `poster`, if
+     *           available.
+     *
+     * @property {string} [poster]
+     *           URL to an image that will display before playback.
+     *
+     * @property {Tech~SourceObject|Tech~SourceObject[]|string} [src]
+     *           A single source object, an array of source objects, or a string
+     *           referencing a URL to a media source. It is _highly recommended_
+     *           that an object or array of objects is used here, so that source
+     *           selection algorithms can take the `type` into account.
+     *
+     * @property {string} [title]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {Object[]} [textTracks]
+     *           An array of objects to be used to create text tracks, following
+     *           the {@link https://www.w3.org/TR/html50/embedded-content-0.html#the-track-element|native track element format}.
+     *           For ease of removal, these will be created as "remote" text
+     *           tracks and set to automatically clean up on source changes.
+     *
+     *           These objects may have properties like `src`, `kind`, `label`,
+     *           and `language`, see {@link Tech#createRemoteTextTrack}.
+     */
+
+    /**
+     * Populate the player using a {@link Player~MediaObject|MediaObject}.
+     *
+     * @param  {Player~MediaObject} media
+     *         A media object.
+     *
+     * @param  {Function} ready
+     *         A callback to be called when the player is ready.
+     */
+    loadMedia(media, ready) {
+      if (!media || typeof media !== 'object') {
+        return;
+      }
+      const crossOrigin = this.crossOrigin();
+      this.reset();
+
+      // Clone the media object so it cannot be mutated from outside.
+      this.cache_.media = merge(media);
+      const {
+        artist,
+        artwork,
+        description,
+        poster,
+        src,
+        textTracks,
+        title
+      } = this.cache_.media;
+
+      // If `artwork` is not given, create it using `poster`.
+      if (!artwork && poster) {
+        this.cache_.media.artwork = [{
+          src: poster,
+          type: getMimetype(poster)
+        }];
+      }
+      if (crossOrigin) {
+        this.crossOrigin(crossOrigin);
+      }
+      if (src) {
+        this.src(src);
+      }
+      if (poster) {
+        this.poster(poster);
+      }
+      if (Array.isArray(textTracks)) {
+        textTracks.forEach(tt => this.addRemoteTextTrack(tt, false));
+      }
+      if (this.titleBar) {
+        this.titleBar.update({
+          title,
+          description: description || artist || ''
+        });
+      }
+      this.ready(ready);
+    }
+
+    /**
+     * Get a clone of the current {@link Player~MediaObject} for this player.
+     *
+     * If the `loadMedia` method has not been used, will attempt to return a
+     * {@link Player~MediaObject} based on the current state of the player.
+     *
+     * @return {Player~MediaObject}
+     */
+    getMedia() {
+      if (!this.cache_.media) {
+        const poster = this.poster();
+        const src = this.currentSources();
+        const textTracks = Array.prototype.map.call(this.remoteTextTracks(), tt => ({
+          kind: tt.kind,
+          label: tt.label,
+          language: tt.language,
+          src: tt.src
+        }));
+        const media = {
+          src,
+          textTracks
+        };
+        if (poster) {
+          media.poster = poster;
+          media.artwork = [{
+            src: media.poster,
+            type: getMimetype(media.poster)
+          }];
+        }
+        return media;
+      }
+      return merge(this.cache_.media);
+    }
+
+    /**
+     * Gets tag settings
+     *
+     * @param {Element} tag
+     *        The player tag
+     *
+     * @return {Object}
+     *         An object containing all of the settings
+     *         for a player tag
+     */
+    static getTagSettings(tag) {
+      const baseOptions = {
+        sources: [],
+        tracks: []
+      };
+      const tagOptions = getAttributes(tag);
+      const dataSetup = tagOptions['data-setup'];
+      if (hasClass(tag, 'vjs-fill')) {
+        tagOptions.fill = true;
+      }
+      if (hasClass(tag, 'vjs-fluid')) {
+        tagOptions.fluid = true;
+      }
+
+      // Check if data-setup attr exists.
+      if (dataSetup !== null) {
+        // Parse options JSON
+        // If empty string, make it a parsable json object.
+        const [err, data] = tuple(dataSetup || '{}');
+        if (err) {
+          log.error(err);
+        }
+        Object.assign(tagOptions, data);
+      }
+      Object.assign(baseOptions, tagOptions);
+
+      // Get tag children settings
+      if (tag.hasChildNodes()) {
+        const children = tag.childNodes;
+        for (let i = 0, j = children.length; i < j; i++) {
+          const child = children[i];
+          // Change case needed: http://ejohn.org/blog/nodename-case-sensitivity/
+          const childName = child.nodeName.toLowerCase();
+          if (childName === 'source') {
+            baseOptions.sources.push(getAttributes(child));
+          } else if (childName === 'track') {
+            baseOptions.tracks.push(getAttributes(child));
+          }
+        }
+      }
+      return baseOptions;
+    }
+
+    /**
+     * Set debug mode to enable/disable logs at info level.
+     *
+     * @param {boolean} enabled
+     * @fires Player#debugon
+     * @fires Player#debugoff
+     * @return {boolean|undefined}
+     */
+    debug(enabled) {
+      if (enabled === undefined) {
+        return this.debugEnabled_;
+      }
+      if (enabled) {
+        this.trigger('debugon');
+        this.previousLogLevel_ = this.log.level;
+        this.log.level('debug');
+        this.debugEnabled_ = true;
+      } else {
+        this.trigger('debugoff');
+        this.log.level(this.previousLogLevel_);
+        this.previousLogLevel_ = undefined;
+        this.debugEnabled_ = false;
+      }
+    }
+
+    /**
+     * Set or get current playback rates.
+     * Takes an array and updates the playback rates menu with the new items.
+     * Pass in an empty array to hide the menu.
+     * Values other than arrays are ignored.
+     *
+     * @fires Player#playbackrateschange
+     * @param {number[]} [newRates]
+     *                   The new rates that the playback rates menu should update to.
+     *                   An empty array will hide the menu
+     * @return {number[]} When used as a getter will return the current playback rates
+     */
+    playbackRates(newRates) {
+      if (newRates === undefined) {
+        return this.cache_.playbackRates;
+      }
+
+      // ignore any value that isn't an array
+      if (!Array.isArray(newRates)) {
+        return;
+      }
+
+      // ignore any arrays that don't only contain numbers
+      if (!newRates.every(rate => typeof rate === 'number')) {
+        return;
+      }
+      this.cache_.playbackRates = newRates;
+
+      /**
+      * fires when the playback rates in a player are changed
+      *
+      * @event Player#playbackrateschange
+      * @type {Event}
+      */
+      this.trigger('playbackrateschange');
+    }
+  }
+
+  /**
+   * Get the {@link VideoTrackList}
+   *
+   * @link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist
+   *
+   * @return {VideoTrackList}
+   *         the current video track list
+   *
+   * @method Player.prototype.videoTracks
+   */
+
+  /**
+   * Get the {@link AudioTrackList}
+   *
+   * @link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist
+   *
+   * @return {AudioTrackList}
+   *         the current audio track list
+   *
+   * @method Player.prototype.audioTracks
+   */
+
+  /**
+   * Get the {@link TextTrackList}
+   *
+   * @link http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-texttracks
+   *
+   * @return {TextTrackList}
+   *         the current text track list
+   *
+   * @method Player.prototype.textTracks
+   */
+
+  /**
+   * Get the remote {@link TextTrackList}
+   *
+   * @return {TextTrackList}
+   *         The current remote text track list
+   *
+   * @method Player.prototype.remoteTextTracks
+   */
+
+  /**
+   * Get the remote {@link HtmlTrackElementList} tracks.
+   *
+   * @return {HtmlTrackElementList}
+   *         The current remote text track element list
+   *
+   * @method Player.prototype.remoteTextTrackEls
+   */
+
+  ALL.names.forEach(function (name) {
+    const props = ALL[name];
+    Player.prototype[props.getterName] = function () {
+      if (this.tech_) {
+        return this.tech_[props.getterName]();
+      }
+
+      // if we have not yet loadTech_, we create {video,audio,text}Tracks_
+      // these will be passed to the tech during loading
+      this[props.privateName] = this[props.privateName] || new props.ListClass();
+      return this[props.privateName];
+    };
+  });
+
+  /**
+   * Get or set the `Player`'s crossorigin option. For the HTML5 player, this
+   * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+   * behavior.
+   *
+   * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+   *
+   * @param {string} [value]
+   *        The value to set the `Player`'s crossorigin to. If an argument is
+   *        given, must be one of `anonymous` or `use-credentials`.
+   *
+   * @return {string|undefined}
+   *         - The current crossorigin value of the `Player` when getting.
+   *         - undefined when setting
+   */
+  Player.prototype.crossorigin = Player.prototype.crossOrigin;
+
+  /**
+   * Global enumeration of players.
+   *
+   * The keys are the player IDs and the values are either the {@link Player}
+   * instance or `null` for disposed players.
+   *
+   * @type {Object}
+   */
+  Player.players = {};
+  const navigator = window.navigator;
+
+  /*
+   * Player instance options, surfaced using options
+   * options = Player.prototype.options_
+   * Make changes in options, not here.
+   *
+   * @type {Object}
+   * @private
+   */
+  Player.prototype.options_ = {
+    // Default order of fallback technology
+    techOrder: Tech.defaultTechOrder_,
+    html5: {},
+    // enable sourceset by default
+    enableSourceset: true,
+    // default inactivity timeout
+    inactivityTimeout: 2000,
+    // default playback rates
+    playbackRates: [],
+    // Add playback rate selection by adding rates
+    // 'playbackRates': [0.5, 1, 1.5, 2],
+    liveui: false,
+    // Included control sets
+    children: ['mediaLoader', 'posterImage', 'titleBar', 'textTrackDisplay', 'loadingSpinner', 'bigPlayButton', 'liveTracker', 'controlBar', 'errorDisplay', 'textTrackSettings', 'resizeManager'],
+    language: navigator && (navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language) || 'en',
+    // locales and their language translations
+    languages: {},
+    // Default message to show when a video cannot be played.
+    notSupportedMessage: 'No compatible source was found for this media.',
+    normalizeAutoplay: false,
+    fullscreen: {
+      options: {
+        navigationUI: 'hide'
+      }
+    },
+    breakpoints: {},
+    responsive: false,
+    audioOnlyMode: false,
+    audioPosterMode: false,
+    // Default smooth seeking to false
+    enableSmoothSeeking: false
+  };
+  TECH_EVENTS_RETRIGGER.forEach(function (event) {
+    Player.prototype[`handleTech${toTitleCase(event)}_`] = function () {
+      return this.trigger(event);
+    };
+  });
+
+  /**
+   * Fired when the player has initial duration and dimension information
+   *
+   * @event Player#loadedmetadata
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the player has downloaded data at the current playback position
+   *
+   * @event Player#loadeddata
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the current playback position has changed *
+   * During playback this is fired every 15-250 milliseconds, depending on the
+   * playback technology in use.
+   *
+   * @event Player#timeupdate
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the volume changes
+   *
+   * @event Player#volumechange
+   * @type {Event}
+   */
+
+  /**
+   * Reports whether or not a player has a plugin available.
+   *
+   * This does not report whether or not the plugin has ever been initialized
+   * on this player. For that, [usingPlugin]{@link Player#usingPlugin}.
+   *
+   * @method Player#hasPlugin
+   * @param  {string}  name
+   *         The name of a plugin.
+   *
+   * @return {boolean}
+   *         Whether or not this player has the requested plugin available.
+   */
+
+  /**
+   * Reports whether or not a player is using a plugin by name.
+   *
+   * For basic plugins, this only reports whether the plugin has _ever_ been
+   * initialized on this player.
+   *
+   * @method Player#usingPlugin
+   * @param  {string} name
+   *         The name of a plugin.
+   *
+   * @return {boolean}
+   *         Whether or not this player is using the requested plugin.
+   */
+
+  Component.registerComponent('Player', Player);
+
+  /**
+   * @file plugin.js
+   */
+
+  /**
+   * The base plugin name.
+   *
+   * @private
+   * @constant
+   * @type {string}
+   */
+  const BASE_PLUGIN_NAME = 'plugin';
+
+  /**
+   * The key on which a player's active plugins cache is stored.
+   *
+   * @private
+   * @constant
+   * @type     {string}
+   */
+  const PLUGIN_CACHE_KEY = 'activePlugins_';
+
+  /**
+   * Stores registered plugins in a private space.
+   *
+   * @private
+   * @type    {Object}
+   */
+  const pluginStorage = {};
+
+  /**
+   * Reports whether or not a plugin has been registered.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of a plugin.
+   *
+   * @return {boolean}
+   *          Whether or not the plugin has been registered.
+   */
+  const pluginExists = name => pluginStorage.hasOwnProperty(name);
+
+  /**
+   * Get a single registered plugin by name.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of a plugin.
+   *
+   * @return {typeof Plugin|Function|undefined}
+   *          The plugin (or undefined).
+   */
+  const getPlugin = name => pluginExists(name) ? pluginStorage[name] : undefined;
+
+  /**
+   * Marks a plugin as "active" on a player.
+   *
+   * Also, ensures that the player has an object for tracking active plugins.
+   *
+   * @private
+   * @param   {Player} player
+   *          A Video.js player instance.
+   *
+   * @param   {string} name
+   *          The name of a plugin.
+   */
+  const markPluginAsActive = (player, name) => {
+    player[PLUGIN_CACHE_KEY] = player[PLUGIN_CACHE_KEY] || {};
+    player[PLUGIN_CACHE_KEY][name] = true;
+  };
+
+  /**
+   * Triggers a pair of plugin setup events.
+   *
+   * @private
+   * @param  {Player} player
+   *         A Video.js player instance.
+   *
+   * @param  {PluginEventHash} hash
+   *         A plugin event hash.
+   *
+   * @param  {boolean} [before]
+   *         If true, prefixes the event name with "before". In other words,
+   *         use this to trigger "beforepluginsetup" instead of "pluginsetup".
+   */
+  const triggerSetupEvent = (player, hash, before) => {
+    const eventName = (before ? 'before' : '') + 'pluginsetup';
+    player.trigger(eventName, hash);
+    player.trigger(eventName + ':' + hash.name, hash);
+  };
+
+  /**
+   * Takes a basic plugin function and returns a wrapper function which marks
+   * on the player that the plugin has been activated.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of the plugin.
+   *
+   * @param   {Function} plugin
+   *          The basic plugin.
+   *
+   * @return {Function}
+   *          A wrapper function for the given plugin.
+   */
+  const createBasicPlugin = function (name, plugin) {
+    const basicPluginWrapper = function () {
+      // We trigger the "beforepluginsetup" and "pluginsetup" events on the player
+      // regardless, but we want the hash to be consistent with the hash provided
+      // for advanced plugins.
+      //
+      // The only potentially counter-intuitive thing here is the `instance` in
+      // the "pluginsetup" event is the value returned by the `plugin` function.
+      triggerSetupEvent(this, {
+        name,
+        plugin,
+        instance: null
+      }, true);
+      const instance = plugin.apply(this, arguments);
+      markPluginAsActive(this, name);
+      triggerSetupEvent(this, {
+        name,
+        plugin,
+        instance
+      });
+      return instance;
+    };
+    Object.keys(plugin).forEach(function (prop) {
+      basicPluginWrapper[prop] = plugin[prop];
+    });
+    return basicPluginWrapper;
+  };
+
+  /**
+   * Takes a plugin sub-class and returns a factory function for generating
+   * instances of it.
+   *
+   * This factory function will replace itself with an instance of the requested
+   * sub-class of Plugin.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of the plugin.
+   *
+   * @param   {Plugin} PluginSubClass
+   *          The advanced plugin.
+   *
+   * @return {Function}
+   */
+  const createPluginFactory = (name, PluginSubClass) => {
+    // Add a `name` property to the plugin prototype so that each plugin can
+    // refer to itself by name.
+    PluginSubClass.prototype.name = name;
+    return function (...args) {
+      triggerSetupEvent(this, {
+        name,
+        plugin: PluginSubClass,
+        instance: null
+      }, true);
+      const instance = new PluginSubClass(...[this, ...args]);
+
+      // The plugin is replaced by a function that returns the current instance.
+      this[name] = () => instance;
+      triggerSetupEvent(this, instance.getEventHash());
+      return instance;
+    };
+  };
+
+  /**
+   * Parent class for all advanced plugins.
+   *
+   * @mixes   module:evented~EventedMixin
+   * @mixes   module:stateful~StatefulMixin
+   * @fires   Player#beforepluginsetup
+   * @fires   Player#beforepluginsetup:$name
+   * @fires   Player#pluginsetup
+   * @fires   Player#pluginsetup:$name
+   * @listens Player#dispose
+   * @throws  {Error}
+   *          If attempting to instantiate the base {@link Plugin} class
+   *          directly instead of via a sub-class.
+   */
+  class Plugin {
+    /**
+     * Creates an instance of this class.
+     *
+     * Sub-classes should call `super` to ensure plugins are properly initialized.
+     *
+     * @param {Player} player
+     *        A Video.js player instance.
+     */
+    constructor(player) {
+      if (this.constructor === Plugin) {
+        throw new Error('Plugin must be sub-classed; not directly instantiated.');
+      }
+      this.player = player;
+      if (!this.log) {
+        this.log = this.player.log.createLogger(this.name);
+      }
+
+      // Make this object evented, but remove the added `trigger` method so we
+      // use the prototype version instead.
+      evented(this);
+      delete this.trigger;
+      stateful(this, this.constructor.defaultState);
+      markPluginAsActive(player, this.name);
+
+      // Auto-bind the dispose method so we can use it as a listener and unbind
+      // it later easily.
+      this.dispose = this.dispose.bind(this);
+
+      // If the player is disposed, dispose the plugin.
+      player.on('dispose', this.dispose);
+    }
+
+    /**
+     * Get the version of the plugin that was set on <pluginName>.VERSION
+     */
+    version() {
+      return this.constructor.VERSION;
+    }
+
+    /**
+     * Each event triggered by plugins includes a hash of additional data with
+     * conventional properties.
+     *
+     * This returns that object or mutates an existing hash.
+     *
+     * @param   {Object} [hash={}]
+     *          An object to be used as event an event hash.
+     *
+     * @return {PluginEventHash}
+     *          An event hash object with provided properties mixed-in.
+     */
+    getEventHash(hash = {}) {
+      hash.name = this.name;
+      hash.plugin = this.constructor;
+      hash.instance = this;
+      return hash;
+    }
+
+    /**
+     * Triggers an event on the plugin object and overrides
+     * {@link module:evented~EventedMixin.trigger|EventedMixin.trigger}.
+     *
+     * @param   {string|Object} event
+     *          An event type or an object with a type property.
+     *
+     * @param   {Object} [hash={}]
+     *          Additional data hash to merge with a
+     *          {@link PluginEventHash|PluginEventHash}.
+     *
+     * @return {boolean}
+     *          Whether or not default was prevented.
+     */
+    trigger(event, hash = {}) {
+      return trigger(this.eventBusEl_, event, this.getEventHash(hash));
+    }
+
+    /**
+     * Handles "statechanged" events on the plugin. No-op by default, override by
+     * subclassing.
+     *
+     * @abstract
+     * @param    {Event} e
+     *           An event object provided by a "statechanged" event.
+     *
+     * @param    {Object} e.changes
+     *           An object describing changes that occurred with the "statechanged"
+     *           event.
+     */
+    handleStateChanged(e) {}
+
+    /**
+     * Disposes a plugin.
+     *
+     * Subclasses can override this if they want, but for the sake of safety,
+     * it's probably best to subscribe the "dispose" event.
+     *
+     * @fires Plugin#dispose
+     */
+    dispose() {
+      const {
+        name,
+        player
+      } = this;
+
+      /**
+       * Signals that a advanced plugin is about to be disposed.
+       *
+       * @event Plugin#dispose
+       * @type  {Event}
+       */
+      this.trigger('dispose');
+      this.off();
+      player.off('dispose', this.dispose);
+
+      // Eliminate any possible sources of leaking memory by clearing up
+      // references between the player and the plugin instance and nulling out
+      // the plugin's state and replacing methods with a function that throws.
+      player[PLUGIN_CACHE_KEY][name] = false;
+      this.player = this.state = null;
+
+      // Finally, replace the plugin name on the player with a new factory
+      // function, so that the plugin is ready to be set up again.
+      player[name] = createPluginFactory(name, pluginStorage[name]);
+    }
+
+    /**
+     * Determines if a plugin is a basic plugin (i.e. not a sub-class of `Plugin`).
+     *
+     * @param   {string|Function} plugin
+     *          If a string, matches the name of a plugin. If a function, will be
+     *          tested directly.
+     *
+     * @return {boolean}
+     *          Whether or not a plugin is a basic plugin.
+     */
+    static isBasic(plugin) {
+      const p = typeof plugin === 'string' ? getPlugin(plugin) : plugin;
+      return typeof p === 'function' && !Plugin.prototype.isPrototypeOf(p.prototype);
+    }
+
+    /**
+     * Register a Video.js plugin.
+     *
+     * @param   {string} name
+     *          The name of the plugin to be registered. Must be a string and
+     *          must not match an existing plugin or a method on the `Player`
+     *          prototype.
+     *
+     * @param   {typeof Plugin|Function} plugin
+     *          A sub-class of `Plugin` or a function for basic plugins.
+     *
+     * @return {typeof Plugin|Function}
+     *          For advanced plugins, a factory function for that plugin. For
+     *          basic plugins, a wrapper function that initializes the plugin.
+     */
+    static registerPlugin(name, plugin) {
+      if (typeof name !== 'string') {
+        throw new Error(`Illegal plugin name, "${name}", must be a string, was ${typeof name}.`);
+      }
+      if (pluginExists(name)) {
+        log.warn(`A plugin named "${name}" already exists. You may want to avoid re-registering plugins!`);
+      } else if (Player.prototype.hasOwnProperty(name)) {
+        throw new Error(`Illegal plugin name, "${name}", cannot share a name with an existing player method!`);
+      }
+      if (typeof plugin !== 'function') {
+        throw new Error(`Illegal plugin for "${name}", must be a function, was ${typeof plugin}.`);
+      }
+      pluginStorage[name] = plugin;
+
+      // Add a player prototype method for all sub-classed plugins (but not for
+      // the base Plugin class).
+      if (name !== BASE_PLUGIN_NAME) {
+        if (Plugin.isBasic(plugin)) {
+          Player.prototype[name] = createBasicPlugin(name, plugin);
+        } else {
+          Player.prototype[name] = createPluginFactory(name, plugin);
+        }
+      }
+      return plugin;
+    }
+
+    /**
+     * De-register a Video.js plugin.
+     *
+     * @param  {string} name
+     *         The name of the plugin to be de-registered. Must be a string that
+     *         matches an existing plugin.
+     *
+     * @throws {Error}
+     *         If an attempt is made to de-register the base plugin.
+     */
+    static deregisterPlugin(name) {
+      if (name === BASE_PLUGIN_NAME) {
+        throw new Error('Cannot de-register base plugin.');
+      }
+      if (pluginExists(name)) {
+        delete pluginStorage[name];
+        delete Player.prototype[name];
+      }
+    }
+
+    /**
+     * Gets an object containing multiple Video.js plugins.
+     *
+     * @param   {Array} [names]
+     *          If provided, should be an array of plugin names. Defaults to _all_
+     *          plugin names.
+     *
+     * @return {Object|undefined}
+     *          An object containing plugin(s) associated with their name(s) or
+     *          `undefined` if no matching plugins exist).
+     */
+    static getPlugins(names = Object.keys(pluginStorage)) {
+      let result;
+      names.forEach(name => {
+        const plugin = getPlugin(name);
+        if (plugin) {
+          result = result || {};
+          result[name] = plugin;
+        }
+      });
+      return result;
+    }
+
+    /**
+     * Gets a plugin's version, if available
+     *
+     * @param   {string} name
+     *          The name of a plugin.
+     *
+     * @return {string}
+     *          The plugin's version or an empty string.
+     */
+    static getPluginVersion(name) {
+      const plugin = getPlugin(name);
+      return plugin && plugin.VERSION || '';
+    }
+  }
+
+  /**
+   * Gets a plugin by name if it exists.
+   *
+   * @static
+   * @method   getPlugin
+   * @memberOf Plugin
+   * @param    {string} name
+   *           The name of a plugin.
+   *
+   * @returns  {typeof Plugin|Function|undefined}
+   *           The plugin (or `undefined`).
+   */
+  Plugin.getPlugin = getPlugin;
+
+  /**
+   * The name of the base plugin class as it is registered.
+   *
+   * @type {string}
+   */
+  Plugin.BASE_PLUGIN_NAME = BASE_PLUGIN_NAME;
+  Plugin.registerPlugin(BASE_PLUGIN_NAME, Plugin);
+
+  /**
+   * Documented in player.js
+   *
+   * @ignore
+   */
+  Player.prototype.usingPlugin = function (name) {
+    return !!this[PLUGIN_CACHE_KEY] && this[PLUGIN_CACHE_KEY][name] === true;
+  };
+
+  /**
+   * Documented in player.js
+   *
+   * @ignore
+   */
+  Player.prototype.hasPlugin = function (name) {
+    return !!pluginExists(name);
+  };
+
+  /**
+   * Signals that a plugin is about to be set up on a player.
+   *
+   * @event    Player#beforepluginsetup
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin is about to be set up on a player - by name. The name
+   * is the name of the plugin.
+   *
+   * @event    Player#beforepluginsetup:$name
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin has just been set up on a player.
+   *
+   * @event    Player#pluginsetup
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin has just been set up on a player - by name. The name
+   * is the name of the plugin.
+   *
+   * @event    Player#pluginsetup:$name
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * @typedef  {Object} PluginEventHash
+   *
+   * @property {string} instance
+   *           For basic plugins, the return value of the plugin function. For
+   *           advanced plugins, the plugin instance on which the event is fired.
+   *
+   * @property {string} name
+   *           The name of the plugin.
+   *
+   * @property {string} plugin
+   *           For basic plugins, the plugin function. For advanced plugins, the
+   *           plugin class/constructor.
+   */
+
+  /**
+   * @file deprecate.js
+   * @module deprecate
+   */
+
+  /**
+   * Decorate a function with a deprecation message the first time it is called.
+   *
+   * @param  {string}   message
+   *         A deprecation message to log the first time the returned function
+   *         is called.
+   *
+   * @param  {Function} fn
+   *         The function to be deprecated.
+   *
+   * @return {Function}
+   *         A wrapper function that will log a deprecation warning the first
+   *         time it is called. The return value will be the return value of
+   *         the wrapped function.
+   */
+  function deprecate(message, fn) {
+    let warned = false;
+    return function (...args) {
+      if (!warned) {
+        log.warn(message);
+      }
+      warned = true;
+      return fn.apply(this, args);
+    };
+  }
+
+  /**
+   * Internal function used to mark a function as deprecated in the next major
+   * version with consistent messaging.
+   *
+   * @param  {number}   major   The major version where it will be removed
+   * @param  {string}   oldName The old function name
+   * @param  {string}   newName The new function name
+   * @param  {Function} fn      The function to deprecate
+   * @return {Function}         The decorated function
+   */
+  function deprecateForMajor(major, oldName, newName, fn) {
+    return deprecate(`${oldName} is deprecated and will be removed in ${major}.0; please use ${newName} instead.`, fn);
+  }
+
+  var VjsErrors = {
+    UnsupportedSidxContainer: 'unsupported-sidx-container-error',
+    DashManifestSidxParsingError: 'dash-manifest-sidx-parsing-error',
+    HlsPlaylistRequestError: 'hls-playlist-request-error',
+    SegmentUnsupportedMediaFormat: 'segment-unsupported-media-format-error',
+    UnsupportedMediaInitialization: 'unsupported-media-initialization-error',
+    SegmentSwitchError: 'segment-switch-error',
+    SegmentExceedsSourceBufferQuota: 'segment-exceeds-source-buffer-quota-error',
+    SegmentAppendError: 'segment-append-error',
+    VttLoadError: 'vtt-load-error',
+    VttCueParsingError: 'vtt-cue-parsing-error',
+    // Errors used in contrib-ads:
+    AdsBeforePrerollError: 'ads-before-preroll-error',
+    AdsPrerollError: 'ads-preroll-error',
+    AdsMidrollError: 'ads-midroll-error',
+    AdsPostrollError: 'ads-postroll-error',
+    AdsMacroReplacementFailed: 'ads-macro-replacement-failed',
+    AdsResumeContentFailed: 'ads-resume-content-failed',
+    // Errors used in contrib-eme:
+    EMEFailedToRequestMediaKeySystemAccess: 'eme-failed-request-media-key-system-access',
+    EMEFailedToCreateMediaKeys: 'eme-failed-create-media-keys',
+    EMEFailedToAttachMediaKeysToVideoElement: 'eme-failed-attach-media-keys-to-video',
+    EMEFailedToCreateMediaKeySession: 'eme-failed-create-media-key-session',
+    EMEFailedToSetServerCertificate: 'eme-failed-set-server-certificate',
+    EMEFailedToGenerateLicenseRequest: 'eme-failed-generate-license-request',
+    EMEFailedToUpdateSessionWithReceivedLicenseKeys: 'eme-failed-update-session',
+    EMEFailedToCloseSession: 'eme-failed-close-session',
+    EMEFailedToRemoveKeysFromSession: 'eme-failed-remove-keys',
+    EMEFailedToLoadSessionBySessionId: 'eme-failed-load-session'
+  };
+
+  /**
+   * @file video.js
+   * @module videojs
+   */
+
+  /**
+   * Normalize an `id` value by trimming off a leading `#`
+   *
+   * @private
+   * @param   {string} id
+   *          A string, maybe with a leading `#`.
+   *
+   * @return {string}
+   *          The string, without any leading `#`.
+   */
+  const normalizeId = id => id.indexOf('#') === 0 ? id.slice(1) : id;
+
+  /**
+   * A callback that is called when a component is ready. Does not have any
+   * parameters and any callback value will be ignored. See: {@link Component~ReadyCallback}
+   *
+   * @callback ReadyCallback
+   */
+
+  /**
+   * The `videojs()` function doubles as the main function for users to create a
+   * {@link Player} instance as well as the main library namespace.
+   *
+   * It can also be used as a getter for a pre-existing {@link Player} instance.
+   * However, we _strongly_ recommend using `videojs.getPlayer()` for this
+   * purpose because it avoids any potential for unintended initialization.
+   *
+   * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+   * of our JSDoc template, we cannot properly document this as both a function
+   * and a namespace, so its function signature is documented here.
+   *
+   * #### Arguments
+   * ##### id
+   * string|Element, **required**
+   *
+   * Video element or video element ID.
+   *
+   * ##### options
+   * Object, optional
+   *
+   * Options object for providing settings.
+   * See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+   *
+   * ##### ready
+   * {@link Component~ReadyCallback}, optional
+   *
+   * A function to be called when the {@link Player} and {@link Tech} are ready.
+   *
+   * #### Return Value
+   *
+   * The `videojs()` function returns a {@link Player} instance.
+   *
+   * @namespace
+   *
+   * @borrows AudioTrack as AudioTrack
+   * @borrows Component.getComponent as getComponent
+   * @borrows module:events.on as on
+   * @borrows module:events.one as one
+   * @borrows module:events.off as off
+   * @borrows module:events.trigger as trigger
+   * @borrows EventTarget as EventTarget
+   * @borrows module:middleware.use as use
+   * @borrows Player.players as players
+   * @borrows Plugin.registerPlugin as registerPlugin
+   * @borrows Plugin.deregisterPlugin as deregisterPlugin
+   * @borrows Plugin.getPlugins as getPlugins
+   * @borrows Plugin.getPlugin as getPlugin
+   * @borrows Plugin.getPluginVersion as getPluginVersion
+   * @borrows Tech.getTech as getTech
+   * @borrows Tech.registerTech as registerTech
+   * @borrows TextTrack as TextTrack
+   * @borrows VideoTrack as VideoTrack
+   *
+   * @param  {string|Element} id
+   *         Video element or video element ID.
+   *
+   * @param  {Object} [options]
+   *         Options object for providing settings.
+   *         See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+   *
+   * @param  {ReadyCallback} [ready]
+   *         A function to be called when the {@link Player} and {@link Tech} are
+   *         ready.
+   *
+   * @return {Player}
+   *         The `videojs()` function returns a {@link Player|Player} instance.
+   */
+  function videojs(id, options, ready) {
+    let player = videojs.getPlayer(id);
+    if (player) {
+      if (options) {
+        log.warn(`Player "${id}" is already initialised. Options will not be applied.`);
+      }
+      if (ready) {
+        player.ready(ready);
+      }
+      return player;
+    }
+    const el = typeof id === 'string' ? $('#' + normalizeId(id)) : id;
+    if (!isEl(el)) {
+      throw new TypeError('The element or ID supplied is not valid. (videojs)');
+    }
+
+    // document.body.contains(el) will only check if el is contained within that one document.
+    // This causes problems for elements in iframes.
+    // Instead, use the element's ownerDocument instead of the global document.
+    // This will make sure that the element is indeed in the dom of that document.
+    // Additionally, check that the document in question has a default view.
+    // If the document is no longer attached to the dom, the defaultView of the document will be null.
+    // If element is inside Shadow DOM (e.g. is part of a Custom element), ownerDocument.body
+    // always returns false. Instead, use the Shadow DOM root.
+    const inShadowDom = 'getRootNode' in el ? el.getRootNode() instanceof window.ShadowRoot : false;
+    const rootNode = inShadowDom ? el.getRootNode() : el.ownerDocument.body;
+    if (!el.ownerDocument.defaultView || !rootNode.contains(el)) {
+      log.warn('The element supplied is not included in the DOM');
+    }
+    options = options || {};
+
+    // Store a copy of the el before modification, if it is to be restored in destroy()
+    // If div ingest, store the parent div
+    if (options.restoreEl === true) {
+      options.restoreEl = (el.parentNode && el.parentNode.hasAttribute('data-vjs-player') ? el.parentNode : el).cloneNode(true);
+    }
+    hooks('beforesetup').forEach(hookFunction => {
+      const opts = hookFunction(el, merge(options));
+      if (!isObject(opts) || Array.isArray(opts)) {
+        log.error('please return an object in beforesetup hooks');
+        return;
+      }
+      options = merge(options, opts);
+    });
+
+    // We get the current "Player" component here in case an integration has
+    // replaced it with a custom player.
+    const PlayerComponent = Component.getComponent('Player');
+    player = new PlayerComponent(el, options, ready);
+    hooks('setup').forEach(hookFunction => hookFunction(player));
+    return player;
+  }
+  videojs.hooks_ = hooks_;
+  videojs.hooks = hooks;
+  videojs.hook = hook;
+  videojs.hookOnce = hookOnce;
+  videojs.removeHook = removeHook;
+
+  // Add default styles
+  if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true && isReal()) {
+    let style = $('.vjs-styles-defaults');
+    if (!style) {
+      style = createStyleElement('vjs-styles-defaults');
+      const head = $('head');
+      if (head) {
+        head.insertBefore(style, head.firstChild);
+      }
+      setTextContent(style, `
+      .video-js {
+        width: 300px;
+        height: 150px;
+      }
+
+      .vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: 56.25%
+      }
+    `);
+    }
+  }
+
+  // Run Auto-load players
+  // You have to wait at least once in case this script is loaded after your
+  // video in the DOM (weird behavior only with minified version)
+  autoSetupTimeout(1, videojs);
+
+  /**
+   * Current Video.js version. Follows [semantic versioning](https://semver.org/).
+   *
+   * @type {string}
+   */
+  videojs.VERSION = version;
+
+  /**
+   * The global options object. These are the settings that take effect
+   * if no overrides are specified when the player is created.
+   *
+   * @type {Object}
+   */
+  videojs.options = Player.prototype.options_;
+
+  /**
+   * Get an object with the currently created players, keyed by player ID
+   *
+   * @return {Object}
+   *         The created players
+   */
+  videojs.getPlayers = () => Player.players;
+
+  /**
+   * Get a single player based on an ID or DOM element.
+   *
+   * This is useful if you want to check if an element or ID has an associated
+   * Video.js player, but not create one if it doesn't.
+   *
+   * @param   {string|Element} id
+   *          An HTML element - `<video>`, `<audio>`, or `<video-js>` -
+   *          or a string matching the `id` of such an element.
+   *
+   * @return {Player|undefined}
+   *          A player instance or `undefined` if there is no player instance
+   *          matching the argument.
+   */
+  videojs.getPlayer = id => {
+    const players = Player.players;
+    let tag;
+    if (typeof id === 'string') {
+      const nId = normalizeId(id);
+      const player = players[nId];
+      if (player) {
+        return player;
+      }
+      tag = $('#' + nId);
+    } else {
+      tag = id;
+    }
+    if (isEl(tag)) {
+      const {
+        player,
+        playerId
+      } = tag;
+
+      // Element may have a `player` property referring to an already created
+      // player instance. If so, return that.
+      if (player || players[playerId]) {
+        return player || players[playerId];
+      }
+    }
+  };
+
+  /**
+   * Returns an array of all current players.
+   *
+   * @return {Array}
+   *         An array of all players. The array will be in the order that
+   *         `Object.keys` provides, which could potentially vary between
+   *         JavaScript engines.
+   *
+   */
+  videojs.getAllPlayers = () =>
+  // Disposed players leave a key with a `null` value, so we need to make sure
+  // we filter those out.
+  Object.keys(Player.players).map(k => Player.players[k]).filter(Boolean);
+  videojs.players = Player.players;
+  videojs.getComponent = Component.getComponent;
+
+  /**
+   * Register a component so it can referred to by name. Used when adding to other
+   * components, either through addChild `component.addChild('myComponent')` or through
+   * default children options  `{ children: ['myComponent'] }`.
+   *
+   * > NOTE: You could also just initialize the component before adding.
+   * `component.addChild(new MyComponent());`
+   *
+   * @param {string} name
+   *        The class name of the component
+   *
+   * @param {typeof Component} comp
+   *        The component class
+   *
+   * @return {typeof Component}
+   *         The newly registered component
+   */
+  videojs.registerComponent = (name, comp) => {
+    if (Tech.isTech(comp)) {
+      log.warn(`The ${name} tech was registered as a component. It should instead be registered using videojs.registerTech(name, tech)`);
+    }
+    return Component.registerComponent.call(Component, name, comp);
+  };
+  videojs.getTech = Tech.getTech;
+  videojs.registerTech = Tech.registerTech;
+  videojs.use = use;
+
+  /**
+   * An object that can be returned by a middleware to signify
+   * that the middleware is being terminated.
+   *
+   * @type {object}
+   * @property {object} middleware.TERMINATOR
+   */
+  Object.defineProperty(videojs, 'middleware', {
+    value: {},
+    writeable: false,
+    enumerable: true
+  });
+  Object.defineProperty(videojs.middleware, 'TERMINATOR', {
+    value: TERMINATOR,
+    writeable: false,
+    enumerable: true
+  });
+
+  /**
+   * A reference to the {@link module:browser|browser utility module} as an object.
+   *
+   * @type {Object}
+   * @see  {@link module:browser|browser}
+   */
+  videojs.browser = browser;
+
+  /**
+   * A reference to the {@link module:obj|obj utility module} as an object.
+   *
+   * @type {Object}
+   * @see  {@link module:obj|obj}
+   */
+  videojs.obj = Obj;
+
+  /**
+   * Deprecated reference to the {@link module:obj.merge|merge function}
+   *
+   * @type {Function}
+   * @see {@link module:obj.merge|merge}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.obj.merge instead.
+   */
+  videojs.mergeOptions = deprecateForMajor(9, 'videojs.mergeOptions', 'videojs.obj.merge', merge);
+
+  /**
+   * Deprecated reference to the {@link module:obj.defineLazyProperty|defineLazyProperty function}
+   *
+   * @type {Function}
+   * @see {@link module:obj.defineLazyProperty|defineLazyProperty}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.obj.defineLazyProperty instead.
+   */
+  videojs.defineLazyProperty = deprecateForMajor(9, 'videojs.defineLazyProperty', 'videojs.obj.defineLazyProperty', defineLazyProperty);
+
+  /**
+   * Deprecated reference to the {@link module:fn.bind_|fn.bind_ function}
+   *
+   * @type {Function}
+   * @see {@link module:fn.bind_|fn.bind_}
+   * @deprecated Deprecated and will be removed in 9.0. Please use native Function.prototype.bind instead.
+   */
+  videojs.bind = deprecateForMajor(9, 'videojs.bind', 'native Function.prototype.bind', bind_);
+  videojs.registerPlugin = Plugin.registerPlugin;
+  videojs.deregisterPlugin = Plugin.deregisterPlugin;
+
+  /**
+   * Deprecated method to register a plugin with Video.js
+   *
+   * @deprecated Deprecated and will be removed in 9.0. Use videojs.registerPlugin() instead.
+   *
+   * @param {string} name
+   *        The plugin name
+  *
+   * @param {typeof Plugin|Function} plugin
+   *         The plugin sub-class or function
+   *
+   * @return {typeof Plugin|Function}
+   */
+  videojs.plugin = (name, plugin) => {
+    log.warn('videojs.plugin() is deprecated; use videojs.registerPlugin() instead');
+    return Plugin.registerPlugin(name, plugin);
+  };
+  videojs.getPlugins = Plugin.getPlugins;
+  videojs.getPlugin = Plugin.getPlugin;
+  videojs.getPluginVersion = Plugin.getPluginVersion;
+
+  /**
+   * Adding languages so that they're available to all players.
+   * Example: `videojs.addLanguage('es', { 'Hello': 'Hola' });`
+   *
+   * @param {string} code
+   *        The language code or dictionary property
+   *
+   * @param {Object} data
+   *        The data values to be translated
+   *
+   * @return {Object}
+   *         The resulting language dictionary object
+   */
+  videojs.addLanguage = function (code, data) {
+    code = ('' + code).toLowerCase();
+    videojs.options.languages = merge(videojs.options.languages, {
+      [code]: data
+    });
+    return videojs.options.languages[code];
+  };
+
+  /**
+   * A reference to the {@link module:log|log utility module} as an object.
+   *
+   * @type {Function}
+   * @see  {@link module:log|log}
+   */
+  videojs.log = log;
+  videojs.createLogger = createLogger;
+
+  /**
+   * A reference to the {@link module:time|time utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:time|time}
+   */
+  videojs.time = Time;
+
+  /**
+   * Deprecated reference to the {@link module:time.createTimeRanges|createTimeRanges function}
+   *
+   * @type {Function}
+   * @see {@link module:time.createTimeRanges|createTimeRanges}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.createTimeRanges instead.
+   */
+  videojs.createTimeRange = deprecateForMajor(9, 'videojs.createTimeRange', 'videojs.time.createTimeRanges', createTimeRanges);
+
+  /**
+   * Deprecated reference to the {@link module:time.createTimeRanges|createTimeRanges function}
+   *
+   * @type {Function}
+   * @see {@link module:time.createTimeRanges|createTimeRanges}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.createTimeRanges instead.
+   */
+  videojs.createTimeRanges = deprecateForMajor(9, 'videojs.createTimeRanges', 'videojs.time.createTimeRanges', createTimeRanges);
+
+  /**
+   * Deprecated reference to the {@link module:time.formatTime|formatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.formatTime|formatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.format instead.
+   */
+  videojs.formatTime = deprecateForMajor(9, 'videojs.formatTime', 'videojs.time.formatTime', formatTime);
+
+  /**
+   * Deprecated reference to the {@link module:time.setFormatTime|setFormatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.setFormatTime|setFormatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.setFormat instead.
+   */
+  videojs.setFormatTime = deprecateForMajor(9, 'videojs.setFormatTime', 'videojs.time.setFormatTime', setFormatTime);
+
+  /**
+   * Deprecated reference to the {@link module:time.resetFormatTime|resetFormatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.resetFormatTime|resetFormatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.resetFormat instead.
+   */
+  videojs.resetFormatTime = deprecateForMajor(9, 'videojs.resetFormatTime', 'videojs.time.resetFormatTime', resetFormatTime);
+
+  /**
+   * Deprecated reference to the {@link module:url.parseUrl|Url.parseUrl function}
+   *
+   * @type {Function}
+   * @see {@link module:url.parseUrl|parseUrl}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.url.parseUrl instead.
+   */
+  videojs.parseUrl = deprecateForMajor(9, 'videojs.parseUrl', 'videojs.url.parseUrl', parseUrl);
+
+  /**
+   * Deprecated reference to the {@link module:url.isCrossOrigin|Url.isCrossOrigin function}
+   *
+   * @type {Function}
+   * @see {@link module:url.isCrossOrigin|isCrossOrigin}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.url.isCrossOrigin instead.
+   */
+  videojs.isCrossOrigin = deprecateForMajor(9, 'videojs.isCrossOrigin', 'videojs.url.isCrossOrigin', isCrossOrigin);
+  videojs.EventTarget = EventTarget;
+  videojs.any = any;
+  videojs.on = on;
+  videojs.one = one;
+  videojs.off = off;
+  videojs.trigger = trigger;
+
+  /**
+   * A cross-browser XMLHttpRequest wrapper.
+   *
+   * @function
+   * @param    {Object} options
+   *           Settings for the request.
+   *
+   * @return   {XMLHttpRequest|XDomainRequest}
+   *           The request object.
+   *
+   * @see      https://github.com/Raynos/xhr
+   */
+  videojs.xhr = lib;
+  videojs.TextTrack = TextTrack;
+  videojs.AudioTrack = AudioTrack;
+  videojs.VideoTrack = VideoTrack;
+  ['isEl', 'isTextNode', 'createEl', 'hasClass', 'addClass', 'removeClass', 'toggleClass', 'setAttributes', 'getAttributes', 'emptyEl', 'appendContent', 'insertContent'].forEach(k => {
+    videojs[k] = function () {
+      log.warn(`videojs.${k}() is deprecated; use videojs.dom.${k}() instead`);
+      return Dom[k].apply(null, arguments);
+    };
+  });
+  videojs.computedStyle = deprecateForMajor(9, 'videojs.computedStyle', 'videojs.dom.computedStyle', computedStyle);
+
+  /**
+   * A reference to the {@link module:dom|DOM utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:dom|dom}
+   */
+  videojs.dom = Dom;
+
+  /**
+   * A reference to the {@link module:fn|fn utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:fn|fn}
+   */
+  videojs.fn = Fn;
+
+  /**
+   * A reference to the {@link module:num|num utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:num|num}
+   */
+  videojs.num = Num;
+
+  /**
+   * A reference to the {@link module:str|str utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:str|str}
+   */
+  videojs.str = Str;
+
+  /**
+   * A reference to the {@link module:url|URL utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:url|url}
+   */
+  videojs.url = Url;
+
+  // The list of possible error types to occur in video.js
+  videojs.Error = VjsErrors;
+
+  return videojs;
+
+}));
diff --git a/priv/static/video.js/alt/video.core.min.js b/priv/static/video.js/alt/video.core.min.js
new file mode 100644
index 0000000..82b5015
--- /dev/null
+++ b/priv/static/video.js/alt/video.core.min.js
@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Video.js 8.12.0 <http://videojs.com/>
+ * Copyright Brightcove, Inc. <https://www.brightcove.com/>
+ * Available under Apache License Version 2.0
+ * <https://github.com/videojs/video.js/blob/main/LICENSE>
+ *
+ * Includes vtt.js <https://github.com/mozilla/vtt.js>
+ * Available under Apache License Version 2.0
+ * <https://github.com/mozilla/vtt.js/blob/main/LICENSE>
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).videojs=t()}(this,function(){"use strict";var D="8.12.0";const B={},R=function(e,t){return B[e]=B[e]||[],t&&(B[e]=B[e].concat(t)),B[e]};function H(e,t){return!((t=R(e).indexOf(t))<=-1||(B[e]=B[e].slice(),B[e].splice(t,1),0))}const F={prefixed:!0};var V=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror","fullscreen"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror","-webkit-full-screen"]],z=V[0];let q;for(let e=0;e<V.length;e++)if(V[e][1]in document){q=V[e];break}if(q){for(let e=0;e<q.length;e++)F[z[e]]=q[e];F.prefixed=q[0]!==z[0]}let d=[];function $(e){return n(e)?Object.keys(e):[]}const l=function i(r,n=":",a=""){let t="info",s;function o(...e){s("log",t,e)}var l,h,c;return s=(l=r,h=o,c=a,(t,s,i)=>{var e,s=h.levels[s],r=new RegExp(`^(${s})$`);let n=l;if("log"!==t&&i.unshift(t.toUpperCase()+":"),c&&(n="%c"+l,i.unshift(c)),i.unshift(n+":"),d&&(d.push([].concat(i)),e=d.length-1e3,d.splice(0,0<e?e:0)),window.console){let e=window.console[t];(e=e||"debug"!==t?e:window.console.info||window.console.log)&&s&&r.test(t)&&e[Array.isArray(i)?"apply":"call"](window.console,i)}}),o.createLogger=(e,t,s)=>i(r+` ${t=void 0!==t?t:n} `+e,t,void 0!==s?s:a),o.createNewLogger=(e,t,s)=>i(e,t,s),o.levels={all:"debug|log|warn|error",off:"",debug:"debug|log|warn|error",info:"log|warn|error",warn:"warn|error",error:"error",DEFAULT:t},o.level=e=>{if("string"==typeof e){if(!o.levels.hasOwnProperty(e))throw new Error(`"${e}" in not a valid log level`);t=e}return t},o.history=()=>d?[].concat(d):[],o.history.filter=t=>(d||[]).filter(e=>new RegExp(`.*${t}.*`).test(e[0])),o.history.clear=()=>{d&&(d.length=0)},o.history.disable=()=>{null!==d&&(d.length=0,d=null)},o.history.enable=()=>{null===d&&(d=[])},o.error=(...e)=>s("error",t,e),o.warn=(...e)=>s("warn",t,e),o.debug=(...e)=>s("debug",t,e),o}("VIDEOJS"),U=l.createLogger,K=Object.prototype.toString;function W(t,s){$(t).forEach(e=>s(t[e],e))}function X(s,i,e=0){return $(s).reduce((e,t)=>i(e,s[t],t),e)}function n(e){return!!e&&"object"==typeof e}function G(e){return n(e)&&"[object Object]"===K.call(e)&&e.constructor===Object}function h(...e){const s={};return e.forEach(e=>{e&&W(e,(e,t)=>{G(e)?(G(s[t])||(s[t]={}),s[t]=h(s[t],e)):s[t]=e})}),s}function Y(e={}){var t,s=[];for(const i in e)e.hasOwnProperty(i)&&(t=e[i],s.push(t));return s}function Q(t,s,i,e=!0){const r=e=>Object.defineProperty(t,s,{value:e,enumerable:!0,writable:!0});var n={configurable:!0,enumerable:!0,get(){var e=i();return r(e),e}};return e&&(n.set=r),Object.defineProperty(t,s,n)}var J=Object.freeze({__proto__:null,each:W,reduce:X,isObject:n,isPlain:G,merge:h,values:Y,defineLazyProperty:Q});let Z=!1,ee=null,o=!1,te,se=!1,ie=!1,re=!1,c=!1,ne=null,ae=null,oe=null,le=!1,he=!1,ce=!1,de=!1,ue=!1,pe=!1,ge=!1;const me=Boolean(be()&&("ontouchstart"in window||window.navigator.maxTouchPoints||window.DocumentTouch&&window.document instanceof window.DocumentTouch));var ve,e=window.navigator&&window.navigator.userAgentData;if(e&&e.platform&&e.brands&&(o="Android"===e.platform,ie=Boolean(e.brands.find(e=>"Microsoft Edge"===e.brand)),re=Boolean(e.brands.find(e=>"Chromium"===e.brand)),c=!ie&&re,ne=ae=(e.brands.find(e=>"Chromium"===e.brand)||{}).version||null,he="Windows"===e.platform),!re){const N=window.navigator&&window.navigator.userAgent||"";Z=/iPod/i.test(N),ee=(e=N.match(/OS (\d+)_/i))&&e[1]?e[1]:null,o=/Android/i.test(N),te=(e=N.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i))?(Pt=e[1]&&parseFloat(e[1]),ve=e[2]&&parseFloat(e[2]),Pt&&ve?parseFloat(e[1]+"."+e[2]):Pt||null):null,se=/Firefox/i.test(N),ie=/Edg/i.test(N),re=/Chrome/i.test(N)||/CriOS/i.test(N),c=!ie&&re,ne=ae=(ve=N.match(/(Chrome|CriOS)\/(\d+)/))&&ve[2]?parseFloat(ve[2]):null,oe=function(){var e=/MSIE\s(\d+)\.\d/.exec(N);let t=e&&parseFloat(e[1]);return t=!t&&/Trident\/7.0/i.test(N)&&/rv:11.0/.test(N)?11:t}(),ue=/Tizen/i.test(N),pe=/Web0S/i.test(N),ge=ue||pe,le=/Safari/i.test(N)&&!c&&!o&&!ie&&!ge,he=/Windows/i.test(N),ce=/iPad/i.test(N)||le&&me&&!/iPhone/i.test(N),de=/iPhone/i.test(N)&&!ce}const u=de||ce||Z,_e=(le||u)&&!c;var fe=Object.freeze({__proto__:null,get IS_IPOD(){return Z},get IOS_VERSION(){return ee},get IS_ANDROID(){return o},get ANDROID_VERSION(){return te},get IS_FIREFOX(){return se},get IS_EDGE(){return ie},get IS_CHROMIUM(){return re},get IS_CHROME(){return c},get CHROMIUM_VERSION(){return ne},get CHROME_VERSION(){return ae},get IE_VERSION(){return oe},get IS_SAFARI(){return le},get IS_WINDOWS(){return he},get IS_IPAD(){return ce},get IS_IPHONE(){return de},get IS_TIZEN(){return ue},get IS_WEBOS(){return pe},get IS_SMART_TV(){return ge},TOUCH_ENABLED:me,IS_IOS:u,IS_ANY_SAFARI:_e});function ye(e){return"string"==typeof e&&Boolean(e.trim())}function be(){return document===window.document}function Te(e){return n(e)&&1===e.nodeType}function ke(){try{return window.parent!==window.self}catch(e){return!0}}function Ce(s){return function(e,t){return ye(e)?(t=Te(t=ye(t)?document.querySelector(t):t)?t:document)[s]&&t[s](e):document[s](null)}}function p(e="div",s={},t={},i){const r=document.createElement(e);return Object.getOwnPropertyNames(s).forEach(function(e){var t=s[e];"textContent"===e?we(r,t):r[e]===t&&"tabIndex"!==e||(r[e]=t)}),Object.getOwnPropertyNames(t).forEach(function(e){r.setAttribute(e,t[e])}),i&&qe(r,i),r}function we(e,t){return"undefined"==typeof e.textContent?e.innerText=t:e.textContent=t,e}function Ee(e,t){t.firstChild?t.insertBefore(e,t.firstChild):t.appendChild(e)}function Se(e,t){if(0<=t.indexOf(" "))throw new Error("class has illegal whitespace characters");return e.classList.contains(t)}function xe(e,...t){return e.classList.add(...t.reduce((e,t)=>e.concat(t.split(/\s+/)),[])),e}function je(e,...t){return e?(e.classList.remove(...t.reduce((e,t)=>e.concat(t.split(/\s+/)),[])),e):(l.warn("removeClass was called with an element that doesn't exist"),null)}function Pe(t,e,s){return"boolean"!=typeof(s="function"==typeof s?s(t,e):s)&&(s=void 0),e.split(/\s+/).forEach(e=>t.classList.toggle(e,s)),t}function Ie(s,i){Object.getOwnPropertyNames(i).forEach(function(e){var t=i[e];null===t||"undefined"==typeof t||!1===t?s.removeAttribute(e):s.setAttribute(e,!0===t?"":t)})}function Me(e){var s={},i=["autoplay","controls","playsinline","loop","muted","default","defaultMuted"];if(e&&e.attributes&&0<e.attributes.length){var r=e.attributes;for(let t=r.length-1;0<=t;t--){var n=r[t].name;let e=r[t].value;i.includes(n)&&(e=null!==e),s[n]=e}}return s}function Ae(e,t){return e.getAttribute(t)}function Oe(e,t,s){e.setAttribute(t,s)}function Le(e,t){e.removeAttribute(t)}function Ne(){document.body.focus(),document.onselectstart=function(){return!1}}function De(){document.onselectstart=function(){return!0}}function Be(e){if(e&&e.getBoundingClientRect&&e.parentNode){const t=e.getBoundingClientRect(),s={};return["bottom","height","left","right","top","width"].forEach(e=>{void 0!==t[e]&&(s[e]=t[e])}),s.height||(s.height=parseFloat(Xe(e,"height"))),s.width||(s.width=parseFloat(Xe(e,"width"))),s}}function Re(e){if(!e||!e.offsetParent)return{left:0,top:0,width:0,height:0};var t=e.offsetWidth,s=e.offsetHeight;let i=0,r=0;for(;e.offsetParent&&e!==document[F.fullscreenElement];)i+=e.offsetLeft,r+=e.offsetTop,e=e.offsetParent;return{left:i,top:r,width:t,height:s}}function He(t,e){var s={x:0,y:0};if(u){let e=t;for(;e&&"html"!==e.nodeName.toLowerCase();){var i,r=Xe(e,"transform");/^matrix/.test(r)?(i=r.slice(7,-1).split(/,\s/).map(Number),s.x+=i[4],s.y+=i[5]):/^matrix3d/.test(r)&&(i=r.slice(9,-1).split(/,\s/).map(Number),s.x+=i[12],s.y+=i[13]),e=e.parentNode}}var n={},a=Re(e.target),t=Re(t),o=t.width,l=t.height;let h=e.offsetY-(t.top-a.top),c=e.offsetX-(t.left-a.left);return e.changedTouches&&(c=e.changedTouches[0].pageX-t.left,h=e.changedTouches[0].pageY+t.top,u)&&(c-=s.x,h-=s.y),n.y=1-Math.max(0,Math.min(1,h/l)),n.x=Math.max(0,Math.min(1,c/o)),n}function Fe(e){return n(e)&&3===e.nodeType}function Ve(e){for(;e.firstChild;)e.removeChild(e.firstChild);return e}function ze(e){return"function"==typeof e&&(e=e()),(Array.isArray(e)?e:[e]).map(e=>Te(e="function"==typeof e?e():e)||Fe(e)?e:"string"==typeof e&&/\S/.test(e)?document.createTextNode(e):void 0).filter(e=>e)}function qe(t,e){return ze(e).forEach(e=>t.appendChild(e)),t}function $e(e,t){return qe(Ve(e),t)}function Ue(e){return void 0===e.button&&void 0===e.buttons||0===e.button&&void 0===e.buttons||"mouseup"===e.type&&0===e.button&&0===e.buttons||0===e.button&&1===e.buttons}const Ke=Ce("querySelector"),We=Ce("querySelectorAll");function Xe(t,s){if(!t||!s)return"";if("function"!=typeof window.getComputedStyle)return"";{let e;try{e=window.getComputedStyle(t)}catch(e){return""}return e?e.getPropertyValue(s)||e[s]:""}}function Ge(i){[...document.styleSheets].forEach(t=>{try{var s=[...t.cssRules].map(e=>e.cssText).join(""),e=document.createElement("style");e.textContent=s,i.document.head.appendChild(e)}catch(e){s=document.createElement("link");s.rel="stylesheet",s.type=t.type,s.media=t.media.mediaText,s.href=t.href,i.document.head.appendChild(s)}})}var Ye=Object.freeze({__proto__:null,isReal:be,isEl:Te,isInFrame:ke,createEl:p,textContent:we,prependTo:Ee,hasClass:Se,addClass:xe,removeClass:je,toggleClass:Pe,setAttributes:Ie,getAttributes:Me,getAttribute:Ae,setAttribute:Oe,removeAttribute:Le,blockTextSelection:Ne,unblockTextSelection:De,getBoundingClientRect:Be,findPosition:Re,getPointerPosition:He,isTextNode:Fe,emptyEl:Ve,normalizeContent:ze,appendContent:qe,insertContent:$e,isSingleLeftClick:Ue,$:Ke,$$:We,computedStyle:Xe,copyStyleSheetsToWindow:Ge});let Qe=!1,Je;function Ze(){if(!1!==Je.options.autoSetup){var e=Array.prototype.slice.call(document.getElementsByTagName("video")),t=Array.prototype.slice.call(document.getElementsByTagName("audio")),s=Array.prototype.slice.call(document.getElementsByTagName("video-js")),i=e.concat(t,s);if(i&&0<i.length)for(let e=0,t=i.length;e<t;e++){var r=i[e];if(!r||!r.getAttribute){et(1);break}void 0===r.player&&null!==r.getAttribute("data-setup")&&Je(r)}else Qe||et(1)}}function et(e,t){be()&&(t&&(Je=t),window.setTimeout(Ze,e))}function tt(){Qe=!0,window.removeEventListener("load",tt)}be()&&("complete"===document.readyState?tt():window.addEventListener("load",tt));function st(e){var t=document.createElement("style");return t.className=e,t}function it(e,t){e.styleSheet?e.styleSheet.cssText=t:e.textContent=t}var g=new WeakMap;let m=3;function rt(e,t){var s;g.has(e)&&(0===(s=g.get(e)).handlers[t].length&&(delete s.handlers[t],e.removeEventListener?e.removeEventListener(t,s.dispatcher,!1):e.detachEvent&&e.detachEvent("on"+t,s.dispatcher)),Object.getOwnPropertyNames(s.handlers).length<=0&&(delete s.handlers,delete s.dispatcher,delete s.disabled),0===Object.getOwnPropertyNames(s).length)&&g.delete(e)}function nt(t,s,e,i){e.forEach(function(e){t(s,e,i)})}function at(e){if(!e.fixed_){if(!e||!e.isPropagationStopped||!e.isImmediatePropagationStopped){const n=e||window.event;e={};for(const a in n)"layerX"===a||"layerY"===a||"keyLocation"===a||"webkitMovementX"===a||"webkitMovementY"===a||"path"===a||"returnValue"===a&&n.preventDefault||(e[a]=n[a]);var t,s;e.target||(e.target=e.srcElement||document),e.relatedTarget||(e.relatedTarget=e.fromElement===e.target?e.toElement:e.fromElement),e.preventDefault=function(){n.preventDefault&&n.preventDefault(),e.returnValue=!1,n.returnValue=!1,e.defaultPrevented=!0},e.defaultPrevented=!1,e.stopPropagation=function(){n.stopPropagation&&n.stopPropagation(),e.cancelBubble=!0,n.cancelBubble=!0,e.isPropagationStopped=i},e.isPropagationStopped=r,e.stopImmediatePropagation=function(){n.stopImmediatePropagation&&n.stopImmediatePropagation(),e.isImmediatePropagationStopped=i,e.stopPropagation()},e.isImmediatePropagationStopped=r,null!==e.clientX&&void 0!==e.clientX&&(t=document.documentElement,s=document.body,e.pageX=e.clientX+(t&&t.scrollLeft||s&&s.scrollLeft||0)-(t&&t.clientLeft||s&&s.clientLeft||0),e.pageY=e.clientY+(t&&t.scrollTop||s&&s.scrollTop||0)-(t&&t.clientTop||s&&s.clientTop||0)),e.which=e.charCode||e.keyCode,null!==e.button&&void 0!==e.button&&(e.button=1&e.button?0:4&e.button?1:2&e.button?2:0)}e.fixed_=!0}return e;function i(){return!0}function r(){return!1}}let ot;const lt=["touchstart","touchmove"];function v(n,t,e){if(Array.isArray(t))return nt(v,n,t,e);g.has(n)||g.set(n,{});const a=g.get(n);if(a.handlers||(a.handlers={}),a.handlers[t]||(a.handlers[t]=[]),e.guid||(e.guid=m++),a.handlers[t].push(e),a.dispatcher||(a.disabled=!1,a.dispatcher=function(s,i){if(!a.disabled){s=at(s);var e=a.handlers[s.type];if(e){var r=e.slice(0);for(let e=0,t=r.length;e<t&&!s.isImmediatePropagationStopped();e++)try{r[e].call(n,s,i)}catch(e){l.error(e)}}}}),1===a.handlers[t].length)if(n.addEventListener){let e=!1;(function(){if("boolean"!=typeof ot){ot=!1;try{var e=Object.defineProperty({},"passive",{get(){ot=!0}});window.addEventListener("test",null,e),window.removeEventListener("test",null,e)}catch(e){}}return ot})()&&-1<lt.indexOf(t)&&(e={passive:!0}),n.addEventListener(t,a.dispatcher,e)}else n.attachEvent&&n.attachEvent("on"+t,a.dispatcher)}function _(e,t,s){if(g.has(e)){const n=g.get(e);if(n.handlers){if(Array.isArray(t))return nt(_,e,t,s);var i=function(e,t){n.handlers[t]=[],rt(e,t)};if(void 0===t)for(const a in n.handlers)Object.prototype.hasOwnProperty.call(n.handlers||{},a)&&i(e,a);else{var r=n.handlers[t];if(r)if(s){if(s.guid)for(let e=0;e<r.length;e++)r[e].guid===s.guid&&r.splice(e--,1);rt(e,t)}else i(e,t)}}}}function ht(e,t,s){var i=g.has(e)?g.get(e):{},r=e.parentNode||e.ownerDocument;return"string"==typeof t?t={type:t,target:e}:t.target||(t.target=e),t=at(t),i.dispatcher&&i.dispatcher.call(e,t,s),r&&!t.isPropagationStopped()&&!0===t.bubbles?ht.call(null,r,t,s):!r&&!t.defaultPrevented&&t.target&&t.target[t.type]&&(g.has(t.target)||g.set(t.target,{}),i=g.get(t.target),t.target[t.type])&&(i.disabled=!0,"function"==typeof t.target[t.type]&&t.target[t.type](),i.disabled=!1),!t.defaultPrevented}function ct(e,t,s){if(Array.isArray(t))return nt(ct,e,t,s);function i(){_(e,t,i),s.apply(this,arguments)}i.guid=s.guid=s.guid||m++,v(e,t,i)}function dt(e,t,s){function i(){_(e,t,i),s.apply(this,arguments)}i.guid=s.guid=s.guid||m++,v(e,t,i)}var ut=Object.freeze({__proto__:null,fixEvent:at,on:v,off:_,trigger:ht,one:ct,any:dt});function f(e,t,s){return t.guid||(t.guid=m++),(e=t.bind(e)).guid=s?s+"_"+t.guid:t.guid,e}function r(s,i){let r=window.performance.now();return function(...e){var t=window.performance.now();t-r>=i&&(s(...e),r=t)}}function pt(i,r,n,a=window){let o;function e(){const e=this,t=arguments;let s=function(){o=null,s=null,n||i.apply(e,t)};!o&&n&&i.apply(e,t),a.clearTimeout(o),o=a.setTimeout(s,r)}return e.cancel=()=>{a.clearTimeout(o),o=null},e}e=Object.freeze({__proto__:null,UPDATE_REFRESH_INTERVAL:30,bind_:f,throttle:r,debounce:pt});let gt;class s{on(e,t){var s=this.addEventListener;this.addEventListener=()=>{},v(this,e,t),this.addEventListener=s}off(e,t){_(this,e,t)}one(e,t){var s=this.addEventListener;this.addEventListener=()=>{},ct(this,e,t),this.addEventListener=s}any(e,t){var s=this.addEventListener;this.addEventListener=()=>{},dt(this,e,t),this.addEventListener=s}trigger(e){var t=e.type||e;e=at(e="string"==typeof e?{type:t}:e),this.allowedEvents_[t]&&this["on"+t]&&this["on"+t](e),ht(this,e)}queueTrigger(e){gt=gt||new Map;const t=e.type||e;let s=gt.get(this);s||(s=new Map,gt.set(this,s));var i=s.get(t),i=(s.delete(t),window.clearTimeout(i),window.setTimeout(()=>{s.delete(t),0===s.size&&(s=null,gt.delete(this)),this.trigger(e)},0));s.set(t,i)}}s.prototype.allowedEvents_={},s.prototype.addEventListener=s.prototype.on,s.prototype.removeEventListener=s.prototype.off,s.prototype.dispatchEvent=s.prototype.trigger;const mt=e=>"function"==typeof e.name?e.name():"string"==typeof e.name?e.name:e.name_||(e.constructor&&e.constructor.name?e.constructor.name:typeof e),vt=t=>t instanceof s||!!t.eventBusEl_&&["on","one","off","trigger"].every(e=>"function"==typeof t[e]),_t=e=>"string"==typeof e&&/\S/.test(e)||Array.isArray(e)&&!!e.length,ft=(e,t,s)=>{if(!e||!e.nodeName&&!vt(e))throw new Error(`Invalid target for ${mt(t)}#${s}; must be a DOM node or evented object.`)},yt=(e,t,s)=>{if(!_t(e))throw new Error(`Invalid event type for ${mt(t)}#${s}; must be a non-empty string or array.`)},bt=(e,t,s)=>{if("function"!=typeof e)throw new Error(`Invalid listener for ${mt(t)}#${s}; must be a function.`)},Tt=(e,t,s)=>{var i=t.length<3||t[0]===e||t[0]===e.eventBusEl_;let r,n,a;return i?(r=e.eventBusEl_,3<=t.length&&t.shift(),[n,a]=t):[r,n,a]=t,ft(r,e,s),yt(n,e,s),bt(a,e,s),a=f(e,a),{isTargetingSelf:i,target:r,type:n,listener:a}},kt=(e,t,s,i)=>{ft(e,e,t),e.nodeName?ut[t](e,s,i):e[t](s,i)},Ct={on(...e){const{isTargetingSelf:t,target:s,type:i,listener:r}=Tt(this,e,"on");if(kt(s,"on",i,r),!t){const n=()=>this.off(s,i,r);n.guid=r.guid;e=()=>this.off("dispose",n);e.guid=r.guid,kt(this,"on","dispose",n),kt(s,"on","dispose",e)}},one(...e){const{isTargetingSelf:t,target:s,type:i,listener:r}=Tt(this,e,"one");if(t)kt(s,"one",i,r);else{const n=(...e)=>{this.off(s,i,n),r.apply(null,e)};n.guid=r.guid,kt(s,"one",i,n)}},any(...e){const{isTargetingSelf:t,target:s,type:i,listener:r}=Tt(this,e,"any");if(t)kt(s,"any",i,r);else{const n=(...e)=>{this.off(s,i,n),r.apply(null,e)};n.guid=r.guid,kt(s,"any",i,n)}},off(e,t,s){!e||_t(e)?_(this.eventBusEl_,e,t):(e=e,t=t,ft(e,this,"off"),yt(t,this,"off"),bt(s,this,"off"),s=f(this,s),this.off("dispose",s),e.nodeName?(_(e,t,s),_(e,"dispose",s)):vt(e)&&(e.off(t,s),e.off("dispose",s)))},trigger(e,t){ft(this.eventBusEl_,this,"trigger");var s=e&&"string"!=typeof e?e.type:e;if(_t(s))return ht(this.eventBusEl_,e,t);throw new Error(`Invalid event type for ${mt(this)}#trigger; `+"must be a non-empty string or object with a type key that has a non-empty value.")}};function wt(e,t={}){t=t.eventBusKey;if(t){if(!e[t].nodeName)throw new Error(`The eventBusKey "${t}" does not refer to an element.`);e.eventBusEl_=e[t]}else e.eventBusEl_=p("span",{className:"vjs-event-bus"});Object.assign(e,Ct),e.eventedCallbacks&&e.eventedCallbacks.forEach(e=>{e()}),e.on("dispose",()=>{e.off(),[e,e.el_,e.eventBusEl_].forEach(function(e){e&&g.has(e)&&g.delete(e)}),window.setTimeout(()=>{e.eventBusEl_=null},0)})}const Et={state:{},setState(e){"function"==typeof e&&(e=e());let s;return W(e,(e,t)=>{this.state[t]!==e&&((s=s||{})[t]={from:this.state[t],to:e}),this.state[t]=e}),s&&vt(this)&&this.trigger({changes:s,type:"statechanged"}),s}};function St(e,t){Object.assign(e,Et),e.state=Object.assign({},e.state,t),"function"==typeof e.handleStateChanged&&vt(e)&&e.on("statechanged",e.handleStateChanged)}function xt(e){return"string"!=typeof e?e:e.replace(/./,e=>e.toLowerCase())}function y(e){return"string"!=typeof e?e:e.replace(/./,e=>e.toUpperCase())}function jt(e,t){return y(e)===y(t)}var Pt=Object.freeze({__proto__:null,toLowerCase:xt,toTitleCase:y,titleCaseEquals:jt}),It="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function Mt(e,t){return e(t={exports:{}},t.exports),t.exports}var a=Mt(function(e,t){function s(e){var t;return"number"==typeof(e=e&&"object"==typeof e&&(t=e.which||e.keyCode||e.charCode)?t:e)?o[e]:(t=String(e),i[t.toLowerCase()]||r[t.toLowerCase()]||(1===t.length?t.charCodeAt(0):void 0))}s.isEventKey=function(e,t){if(e&&"object"==typeof e){e=e.which||e.keyCode||e.charCode;if(null!=e)if("string"==typeof t){var s=i[t.toLowerCase()];if(s)return s===e;if(s=r[t.toLowerCase()])return s===e}else if("number"==typeof t)return t===e;return!1}};for(var i=(t=e.exports=s).code=t.codes={backspace:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,"pause/break":19,"caps lock":20,esc:27,space:32,"page up":33,"page down":34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,command:91,"left command":91,"right command":93,"numpad *":106,"numpad +":107,"numpad -":109,"numpad .":110,"numpad /":111,"num lock":144,"scroll lock":145,"my computer":182,"my calculator":183,";":186,"=":187,",":188,"-":189,".":190,"/":191,"`":192,"[":219,"\\":220,"]":221,"'":222},r=t.aliases={windows:91,"⇧":16,"⌥":18,"⌃":17,"⌘":91,ctl:17,control:17,option:18,pause:19,break:19,caps:20,return:13,escape:27,spc:32,spacebar:32,pgup:33,pgdn:34,ins:45,del:46,cmd:91},n=97;n<123;n++)i[String.fromCharCode(n)]=n-32;for(var n=48;n<58;n++)i[n-48]=n;for(n=1;n<13;n++)i["f"+n]=n+111;for(n=0;n<10;n++)i["numpad "+n]=n+96;var a,o=t.names=t.title={};for(n in i)o[i[n]]=n;for(a in r)i[a]=r[a]});a.code,a.codes,a.aliases,a.names,a.title;class b{constructor(e,t,s){!e&&this.play?this.player_=e=this:this.player_=e,this.isDisposed_=!1,this.parentComponent_=null,this.options_=h({},this.options_),t=this.options_=h(this.options_,t),this.id_=t.id||t.el&&t.el.id,this.id_||(e=e&&e.id&&e.id()||"no_player",this.id_=e+"_component_"+m++),this.name_=t.name||null,t.el?this.el_=t.el:!1!==t.createEl&&(this.el_=this.createEl()),t.className&&this.el_&&t.className.split(" ").forEach(e=>this.addClass(e)),["on","off","one","any","trigger"].forEach(e=>{this[e]=void 0}),!1!==t.evented&&(wt(this,{eventBusKey:this.el_?"el_":null}),this.handleLanguagechange=this.handleLanguagechange.bind(this),this.on(this.player_,"languagechange",this.handleLanguagechange)),St(this,this.constructor.defaultState),this.children_=[],this.childIndex_={},this.childNameIndex_={},this.setTimeoutIds_=new Set,this.setIntervalIds_=new Set,this.rafIds_=new Set,this.namedRafs_=new Map,(this.clearingTimersOnDispose_=!1)!==t.initChildren&&this.initChildren(),this.ready(s),!1!==t.reportTouchActivity&&this.enableTouchActivity()}on(e,t){}off(e,t){}one(e,t){}any(e,t){}trigger(e,t){}dispose(e={}){if(!this.isDisposed_){if(this.readyQueue_&&(this.readyQueue_.length=0),this.trigger({type:"dispose",bubbles:!1}),this.isDisposed_=!0,this.children_)for(let e=this.children_.length-1;0<=e;e--)this.children_[e].dispose&&this.children_[e].dispose();this.children_=null,this.childIndex_=null,this.childNameIndex_=null,this.parentComponent_=null,this.el_&&(this.el_.parentNode&&(e.restoreEl?this.el_.parentNode.replaceChild(e.restoreEl,this.el_):this.el_.parentNode.removeChild(this.el_)),this.el_=null),this.player_=null}}isDisposed(){return Boolean(this.isDisposed_)}player(){return this.player_}options(e){return e&&(this.options_=h(this.options_,e)),this.options_}el(){return this.el_}createEl(e,t,s){return p(e,t,s)}localize(e,i,t=e){var s=this.player_.language&&this.player_.language(),r=this.player_.languages&&this.player_.languages(),n=r&&r[s],s=s&&s.split("-")[0],r=r&&r[s];let a=t;return n&&n[e]?a=n[e]:r&&r[e]&&(a=r[e]),a=i?a.replace(/\{(\d+)\}/g,function(e,t){t=i[t-1];let s="undefined"==typeof t?e:t;return s}):a}handleLanguagechange(){}contentEl(){return this.contentEl_||this.el_}id(){return this.id_}name(){return this.name_}children(){return this.children_}getChildById(e){return this.childIndex_[e]}getChild(e){if(e)return this.childNameIndex_[e]}getDescendant(...t){t=t.reduce((e,t)=>e.concat(t),[]);let s=this;for(let e=0;e<t.length;e++)if(!(s=s.getChild(t[e]))||!s.getChild)return;return s}setIcon(e,t=this.el()){var s,i,r;if(this.player_.options_.experimentalSvgIcons)return r="http://www.w3.org/2000/svg",s=p("span",{className:"vjs-icon-placeholder vjs-svg-icon"},{"aria-hidden":"true"}),(i=document.createElementNS(r,"svg")).setAttributeNS(null,"viewBox","0 0 512 512"),r=document.createElementNS(r,"use"),i.appendChild(r),r.setAttributeNS(null,"href","#vjs-icon-"+e),s.appendChild(i),this.iconIsSet_?t.replaceChild(s,t.querySelector(".vjs-icon-placeholder")):t.appendChild(s),this.iconIsSet_=!0,s}addChild(e,t={},s=this.children_.length){let i,r;if("string"==typeof e){r=y(e);var n=t.componentClass||r,a=(t.name=r,b.getComponent(n));if(!a)throw new Error(`Component ${n} does not exist`);if("function"!=typeof a)return null;i=new a(this.player_||this,t)}else i=e;if(i.parentComponent_&&i.parentComponent_.removeChild(i),this.children_.splice(s,0,i),i.parentComponent_=this,"function"==typeof i.id&&(this.childIndex_[i.id()]=i),(r=r||i.name&&y(i.name()))&&(this.childNameIndex_[r]=i,this.childNameIndex_[xt(r)]=i),"function"==typeof i.el&&i.el()){let e=null;this.children_[s+1]&&(this.children_[s+1].el_?e=this.children_[s+1].el_:Te(this.children_[s+1])&&(e=this.children_[s+1])),this.contentEl().insertBefore(i.el(),e)}return i}removeChild(s){if((s="string"==typeof s?this.getChild(s):s)&&this.children_){let t=!1;for(let e=this.children_.length-1;0<=e;e--)if(this.children_[e]===s){t=!0,this.children_.splice(e,1);break}var e;t&&(s.parentComponent_=null,this.childIndex_[s.id()]=null,this.childNameIndex_[y(s.name())]=null,this.childNameIndex_[xt(s.name())]=null,e=s.el())&&e.parentNode===this.contentEl()&&this.contentEl().removeChild(s.el())}}initChildren(){const i=this.options_.children;if(i){const r=this.options_;let e;const t=b.getComponent("Tech");(e=Array.isArray(i)?i:Object.keys(i)).concat(Object.keys(this.options_).filter(function(t){return!e.some(function(e){return"string"==typeof e?t===e:t===e.name})})).map(e=>{let t,s;return s="string"==typeof e?(t=e,i[t]||this.options_[t]||{}):(t=e.name,e),{name:t,opts:s}}).filter(e=>{e=b.getComponent(e.opts.componentClass||y(e.name));return e&&!t.isTech(e)}).forEach(e=>{var t=e.name;let s=e.opts;!1!==(s=void 0!==r[t]?r[t]:s)&&((s=!0===s?{}:s).playerOptions=this.options_.playerOptions,e=this.addChild(t,s))&&(this[t]=e)})}}buildCSSClass(){return""}ready(e,t=!1){e&&(this.isReady_?t?e.call(this):this.setTimeout(e,1):(this.readyQueue_=this.readyQueue_||[],this.readyQueue_.push(e)))}triggerReady(){this.isReady_=!0,this.setTimeout(function(){var e=this.readyQueue_;this.readyQueue_=[],e&&0<e.length&&e.forEach(function(e){e.call(this)},this),this.trigger("ready")},1)}$(e,t){return Ke(e,t||this.contentEl())}$$(e,t){return We(e,t||this.contentEl())}hasClass(e){return Se(this.el_,e)}addClass(...e){xe(this.el_,...e)}removeClass(...e){je(this.el_,...e)}toggleClass(e,t){Pe(this.el_,e,t)}show(){this.removeClass("vjs-hidden")}hide(){this.addClass("vjs-hidden")}lockShowing(){this.addClass("vjs-lock-showing")}unlockShowing(){this.removeClass("vjs-lock-showing")}getAttribute(e){return Ae(this.el_,e)}setAttribute(e,t){Oe(this.el_,e,t)}removeAttribute(e){Le(this.el_,e)}width(e,t){return this.dimension("width",e,t)}height(e,t){return this.dimension("height",e,t)}dimensions(e,t){this.width(e,!0),this.height(t)}dimension(e,t,s){var i,r;if(void 0===t)return this.el_?-1!==(r=(i=this.el_.style[e]).indexOf("px"))?parseInt(i.slice(0,r),10):parseInt(this.el_["offset"+y(e)],10):0;-1!==(""+(t=null!==t&&t==t?t:0)).indexOf("%")||-1!==(""+t).indexOf("px")?this.el_.style[e]=t:this.el_.style[e]="auto"===t?"":t+"px",s||this.trigger("componentresize")}currentDimension(e){let t=0;if("width"!==e&&"height"!==e)throw new Error("currentDimension only accepts width or height value");return t=Xe(this.el_,e),0!==(t=parseFloat(t))&&!isNaN(t)||(e="offset"+y(e),t=this.el_[e]),t}currentDimensions(){return{width:this.currentDimension("width"),height:this.currentDimension("height")}}currentWidth(){return this.currentDimension("width")}currentHeight(){return this.currentDimension("height")}focus(){this.el_.focus()}blur(){this.el_.blur()}handleKeyDown(e){this.player_&&(a.isEventKey(e,"Tab")||e.stopPropagation(),this.player_.handleKeyDown(e))}handleKeyPress(e){this.handleKeyDown(e)}emitTapEvents(){let t=0,s=null;let i;this.on("touchstart",function(e){1===e.touches.length&&(s={pageX:e.touches[0].pageX,pageY:e.touches[0].pageY},t=window.performance.now(),i=!0)}),this.on("touchmove",function(e){var t;(1<e.touches.length||s&&(t=e.touches[0].pageX-s.pageX,e=e.touches[0].pageY-s.pageY,10<Math.sqrt(t*t+e*e)))&&(i=!1)});function e(){i=!1}this.on("touchleave",e),this.on("touchcancel",e),this.on("touchend",function(e){!(s=null)===i&&window.performance.now()-t<200&&(e.preventDefault(),this.trigger("tap"))})}enableTouchActivity(){if(this.player()&&this.player().reportUserActivity){const s=f(this.player(),this.player().reportUserActivity);let t;this.on("touchstart",function(){s(),this.clearInterval(t),t=this.setInterval(s,250)});var e=function(e){s(),this.clearInterval(t)};this.on("touchmove",s),this.on("touchend",e),this.on("touchcancel",e)}}setTimeout(e,t){var s;return e=f(this,e),this.clearTimersOnDispose_(),s=window.setTimeout(()=>{this.setTimeoutIds_.has(s)&&this.setTimeoutIds_.delete(s),e()},t),this.setTimeoutIds_.add(s),s}clearTimeout(e){return this.setTimeoutIds_.has(e)&&(this.setTimeoutIds_.delete(e),window.clearTimeout(e)),e}setInterval(e,t){e=f(this,e),this.clearTimersOnDispose_();e=window.setInterval(e,t);return this.setIntervalIds_.add(e),e}clearInterval(e){return this.setIntervalIds_.has(e)&&(this.setIntervalIds_.delete(e),window.clearInterval(e)),e}requestAnimationFrame(e){var t;return this.clearTimersOnDispose_(),e=f(this,e),t=window.requestAnimationFrame(()=>{this.rafIds_.has(t)&&this.rafIds_.delete(t),e()}),this.rafIds_.add(t),t}requestNamedAnimationFrame(e,t){var s;if(!this.namedRafs_.has(e))return this.clearTimersOnDispose_(),t=f(this,t),s=this.requestAnimationFrame(()=>{t(),this.namedRafs_.has(e)&&this.namedRafs_.delete(e)}),this.namedRafs_.set(e,s),e}cancelNamedAnimationFrame(e){this.namedRafs_.has(e)&&(this.cancelAnimationFrame(this.namedRafs_.get(e)),this.namedRafs_.delete(e))}cancelAnimationFrame(e){return this.rafIds_.has(e)&&(this.rafIds_.delete(e),window.cancelAnimationFrame(e)),e}clearTimersOnDispose_(){this.clearingTimersOnDispose_||(this.clearingTimersOnDispose_=!0,this.one("dispose",()=>{[["namedRafs_","cancelNamedAnimationFrame"],["rafIds_","cancelAnimationFrame"],["setTimeoutIds_","clearTimeout"],["setIntervalIds_","clearInterval"]].forEach(([e,s])=>{this[e].forEach((e,t)=>this[s](t))}),this.clearingTimersOnDispose_=!1}))}static registerComponent(t,e){if("string"!=typeof t||!t)throw new Error(`Illegal component name, "${t}"; must be a non-empty string.`);var s=b.getComponent("Tech"),s=s&&s.isTech(e),i=b===e||b.prototype.isPrototypeOf(e.prototype);if(s||!i){let e;throw e=s?"techs must be registered using Tech.registerTech()":"must be a Component subclass",new Error(`Illegal component, "${t}"; ${e}.`)}t=y(t),b.components_||(b.components_={});i=b.getComponent("Player");if("Player"===t&&i&&i.players){const r=i.players;s=Object.keys(r);if(r&&0<s.length&&s.map(e=>r[e]).every(Boolean))throw new Error("Can not register Player component after player has been created.")}return b.components_[t]=e,b.components_[xt(t)]=e}static getComponent(e){if(e&&b.components_)return b.components_[e]}}function At(e,t,s,i){var r=i,n=s.length-1;if("number"!=typeof r||r<0||n<r)throw new Error(`Failed to execute '${e}' on 'TimeRanges': The index provided (${r}) is non-numeric or out of bounds (0-${n}).`);return s[i][t]}function Ot(e){let t;return t=void 0===e||0===e.length?{length:0,start(){throw new Error("This TimeRanges object is empty")},end(){throw new Error("This TimeRanges object is empty")}}:{length:e.length,start:At.bind(null,"start",0,e),end:At.bind(null,"end",1,e)},window.Symbol&&window.Symbol.iterator&&(t[window.Symbol.iterator]=()=>(e||[]).values()),t}function T(e,t){return Array.isArray(e)?Ot(e):void 0===e||void 0===t?Ot():Ot([[e,t]])}b.registerComponent("Component",b);function Lt(e,t){e=e<0?0:e;let s=Math.floor(e%60),i=Math.floor(e/60%60),r=Math.floor(e/3600);var n=Math.floor(t/60%60),t=Math.floor(t/3600);return r=0<(r=!isNaN(e)&&e!==1/0?r:i=s="-")||0<t?r+":":"",i=((r||10<=n)&&i<10?"0"+i:i)+":",s=s<10?"0"+s:s,r+i+s}let Nt=Lt;function Dt(e){Nt=e}function Bt(){Nt=Lt}function Rt(e,t=e){return Nt(e,t)}var Ht=Object.freeze({__proto__:null,createTimeRanges:T,createTimeRange:T,setFormatTime:Dt,resetFormatTime:Bt,formatTime:Rt});function Ft(t,s){let i=0;var r;let n;if(!s)return 0;t&&t.length||(t=T(0,0));for(let e=0;e<t.length;e++)r=t.start(e),(n=t.end(e))>s&&(n=s),i+=n-r;return i/s}function i(e){if(e instanceof i)return e;"number"==typeof e?this.code=e:"string"==typeof e?this.message=e:n(e)&&("number"==typeof e.code&&(this.code=e.code),Object.assign(this,e)),this.message||(this.message=i.defaultMessages[this.code]||"")}i.prototype.code=0,i.prototype.message="",i.prototype.status=null,i.prototype.metadata=null,i.errorTypes=["MEDIA_ERR_CUSTOM","MEDIA_ERR_ABORTED","MEDIA_ERR_NETWORK","MEDIA_ERR_DECODE","MEDIA_ERR_SRC_NOT_SUPPORTED","MEDIA_ERR_ENCRYPTED"],i.defaultMessages={1:"You aborted the media playback",2:"A network error caused the media download to fail part-way.",3:"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.",4:"The media could not be loaded, either because the server or network failed or because the format is not supported.",5:"The media is encrypted and we do not have the keys to decrypt it."},i.MEDIA_ERR_CUSTOM=0,i.prototype.MEDIA_ERR_CUSTOM=0,i.MEDIA_ERR_ABORTED=1,i.prototype.MEDIA_ERR_ABORTED=1,i.MEDIA_ERR_NETWORK=2,i.prototype.MEDIA_ERR_NETWORK=2,i.MEDIA_ERR_DECODE=3,i.prototype.MEDIA_ERR_DECODE=3,i.MEDIA_ERR_SRC_NOT_SUPPORTED=4,i.prototype.MEDIA_ERR_SRC_NOT_SUPPORTED=4,i.MEDIA_ERR_ENCRYPTED=5,i.prototype.MEDIA_ERR_ENCRYPTED=5;var Vt=function(e,t){var s,i=null;try{s=JSON.parse(e,t)}catch(e){i=e}return[i,s]};function zt(e){return null!=e&&"function"==typeof e.then}function k(e){zt(e)&&e.then(null,e=>{})}function qt(i){return["kind","label","language","id","inBandMetadataTrackDispatchType","mode","src"].reduce((e,t,s)=>(i[t]&&(e[t]=i[t]),e),{cues:i.cues&&Array.prototype.map.call(i.cues,function(e){return{startTime:e.startTime,endTime:e.endTime,text:e.text,id:e.id}})})}var $t=function(e){var t=e.$$("track");const s=Array.prototype.map.call(t,e=>e.track);return Array.prototype.map.call(t,function(e){var t=qt(e.track);return e.src&&(t.src=e.src),t}).concat(Array.prototype.filter.call(e.textTracks(),function(e){return-1===s.indexOf(e)}).map(qt))},Ut=function(e,s){return e.forEach(function(e){const t=s.addRemoteTextTrack(e).track;!e.src&&e.cues&&e.cues.forEach(e=>t.addCue(e))}),s.textTracks()};qt;const Kt="vjs-modal-dialog";class Wt extends b{constructor(e,t){super(e,t),this.handleKeyDown_=e=>this.handleKeyDown(e),this.close_=e=>this.close(e),this.opened_=this.hasBeenOpened_=this.hasBeenFilled_=!1,this.closeable(!this.options_.uncloseable),this.content(this.options_.content),this.contentEl_=p("div",{className:Kt+"-content"},{role:"document"}),this.descEl_=p("p",{className:Kt+"-description vjs-control-text",id:this.el().getAttribute("aria-describedby")}),we(this.descEl_,this.description()),this.el_.appendChild(this.descEl_),this.el_.appendChild(this.contentEl_)}createEl(){return super.createEl("div",{className:this.buildCSSClass(),tabIndex:-1},{"aria-describedby":this.id()+"_description","aria-hidden":"true","aria-label":this.label(),role:"dialog","aria-live":"polite"})}dispose(){this.contentEl_=null,this.descEl_=null,this.previouslyActiveEl_=null,super.dispose()}buildCSSClass(){return Kt+" vjs-hidden "+super.buildCSSClass()}label(){return this.localize(this.options_.label||"Modal Window")}description(){let e=this.options_.description||this.localize("This is a modal window.");return this.closeable()&&(e+=" "+this.localize("This modal can be closed by pressing the Escape key or activating the close button.")),e}open(){var e;this.opened_?this.options_.fillAlways&&this.fill():(e=this.player(),this.trigger("beforemodalopen"),this.opened_=!0,!this.options_.fillAlways&&(this.hasBeenOpened_||this.hasBeenFilled_)||this.fill(),this.wasPlaying_=!e.paused(),this.options_.pauseOnOpen&&this.wasPlaying_&&e.pause(),this.on("keydown",this.handleKeyDown_),this.hadControls_=e.controls(),e.controls(!1),this.show(),this.conditionalFocus_(),this.el().setAttribute("aria-hidden","false"),this.trigger("modalopen"),this.hasBeenOpened_=!0)}opened(e){return"boolean"==typeof e&&this[e?"open":"close"](),this.opened_}close(){var e;this.opened_&&(e=this.player(),this.trigger("beforemodalclose"),this.opened_=!1,this.wasPlaying_&&this.options_.pauseOnOpen&&e.play(),this.off("keydown",this.handleKeyDown_),this.hadControls_&&e.controls(!0),this.hide(),this.el().setAttribute("aria-hidden","true"),this.trigger("modalclose"),this.conditionalBlur_(),this.options_.temporary)&&this.dispose()}closeable(t){if("boolean"==typeof t){var s,t=this.closeable_=!!t;let e=this.getChild("closeButton");t&&!e&&(s=this.contentEl_,this.contentEl_=this.el_,e=this.addChild("closeButton",{controlText:"Close Modal Dialog"}),this.contentEl_=s,this.on(e,"close",this.close_)),!t&&e&&(this.off(e,"close",this.close_),this.removeChild(e),e.dispose())}return this.closeable_}fill(){this.fillWith(this.content())}fillWith(e){var t=this.contentEl(),s=t.parentNode,i=t.nextSibling,e=(this.trigger("beforemodalfill"),this.hasBeenFilled_=!0,s.removeChild(t),this.empty(),$e(t,e),this.trigger("modalfill"),i?s.insertBefore(t,i):s.appendChild(t),this.getChild("closeButton"));e&&s.appendChild(e.el_)}empty(){this.trigger("beforemodalempty"),Ve(this.contentEl()),this.trigger("modalempty")}content(e){return"undefined"!=typeof e&&(this.content_=e),this.content_}conditionalFocus_(){var e=document.activeElement,t=this.player_.el_;this.previouslyActiveEl_=null,!t.contains(e)&&t!==e||(this.previouslyActiveEl_=e,this.focus())}conditionalBlur_(){this.previouslyActiveEl_&&(this.previouslyActiveEl_.focus(),this.previouslyActiveEl_=null)}handleKeyDown(e){if(e.stopPropagation(),a.isEventKey(e,"Escape")&&this.closeable())e.preventDefault(),this.close();else if(a.isEventKey(e,"Tab")){var s=this.focusableEls_(),i=this.el_.querySelector(":focus");let t;for(let e=0;e<s.length;e++)if(i===s[e]){t=e;break}document.activeElement===this.el_&&(t=0),e.shiftKey&&0===t?(s[s.length-1].focus(),e.preventDefault()):e.shiftKey||t!==s.length-1||(s[0].focus(),e.preventDefault())}}focusableEls_(){var e=this.el_.querySelectorAll("*");return Array.prototype.filter.call(e,e=>(e instanceof window.HTMLAnchorElement||e instanceof window.HTMLAreaElement)&&e.hasAttribute("href")||(e instanceof window.HTMLInputElement||e instanceof window.HTMLSelectElement||e instanceof window.HTMLTextAreaElement||e instanceof window.HTMLButtonElement)&&!e.hasAttribute("disabled")||e instanceof window.HTMLIFrameElement||e instanceof window.HTMLObjectElement||e instanceof window.HTMLEmbedElement||e.hasAttribute("tabindex")&&-1!==e.getAttribute("tabindex")||e.hasAttribute("contenteditable"))}}Wt.prototype.options_={pauseOnOpen:!0,temporary:!0},b.registerComponent("ModalDialog",Wt);class Xt extends s{constructor(t=[]){super(),this.tracks_=[],Object.defineProperty(this,"length",{get(){return this.tracks_.length}});for(let e=0;e<t.length;e++)this.addTrack(t[e])}addTrack(e){const t=this.tracks_.length;""+t in this||Object.defineProperty(this,t,{get(){return this.tracks_[t]}}),-1===this.tracks_.indexOf(e)&&(this.tracks_.push(e),this.trigger({track:e,type:"addtrack",target:this})),e.labelchange_=()=>{this.trigger({track:e,type:"labelchange",target:this})},vt(e)&&e.addEventListener("labelchange",e.labelchange_)}removeTrack(s){let i;for(let e=0,t=this.length;e<t;e++)if(this[e]===s){(i=this[e]).off&&i.off(),this.tracks_.splice(e,1);break}i&&this.trigger({track:i,type:"removetrack",target:this})}getTrackById(s){let i=null;for(let e=0,t=this.length;e<t;e++){var r=this[e];if(r.id===s){i=r;break}}return i}}for(const ln in Xt.prototype.allowedEvents_={change:"change",addtrack:"addtrack",removetrack:"removetrack",labelchange:"labelchange"})Xt.prototype["on"+ln]=null;function Gt(t,s){for(let e=0;e<t.length;e++)Object.keys(t[e]).length&&s.id!==t[e].id&&(t[e].enabled=!1)}function Yt(t,s){for(let e=0;e<t.length;e++)Object.keys(t[e]).length&&s.id!==t[e].id&&(t[e].selected=!1)}class Qt extends Xt{addTrack(e){super.addTrack(e),this.queueChange_||(this.queueChange_=()=>this.queueTrigger("change")),this.triggerSelectedlanguagechange||(this.triggerSelectedlanguagechange_=()=>this.trigger("selectedlanguagechange")),e.addEventListener("modechange",this.queueChange_);-1===["metadata","chapters"].indexOf(e.kind)&&e.addEventListener("modechange",this.triggerSelectedlanguagechange_)}removeTrack(e){super.removeTrack(e),e.removeEventListener&&(this.queueChange_&&e.removeEventListener("modechange",this.queueChange_),this.selectedlanguagechange_)&&e.removeEventListener("modechange",this.triggerSelectedlanguagechange_)}}class Jt{constructor(e){Jt.prototype.setCues_.call(this,e),Object.defineProperty(this,"length",{get(){return this.length_}})}setCues_(e){var t=this.length||0;let s=0;function i(e){""+e in this||Object.defineProperty(this,""+e,{get(){return this.cues_[e]}})}var r=e.length;this.cues_=e,this.length_=e.length;if(t<r)for(s=t;s<r;s++)i.call(this,s)}getCueById(s){let i=null;for(let e=0,t=this.length;e<t;e++){var r=this[e];if(r.id===s){i=r;break}}return i}}const Zt={alternative:"alternative",captions:"captions",main:"main",sign:"sign",subtitles:"subtitles",commentary:"commentary"},es={alternative:"alternative",descriptions:"descriptions",main:"main","main-desc":"main-desc",translation:"translation",commentary:"commentary"},ts={subtitles:"subtitles",captions:"captions",descriptions:"descriptions",chapters:"chapters",metadata:"metadata"},ss={disabled:"disabled",hidden:"hidden",showing:"showing"};class is extends s{constructor(e={}){super();const t={id:e.id||"vjs_track_"+m++,kind:e.kind||"",language:e.language||""};let s=e.label||"";for(const i in t)Object.defineProperty(this,i,{get(){return t[i]},set(){}});Object.defineProperty(this,"label",{get(){return s},set(e){e!==s&&(s=e,this.trigger("labelchange"))}})}}function rs(e){var t=["protocol","hostname","port","pathname","search","hash","host"],s=document.createElement("a"),i=(s.href=e,{});for(let e=0;e<t.length;e++)i[t[e]]=s[t[e]];return"http:"===i.protocol&&(i.host=i.host.replace(/:80$/,"")),"https:"===i.protocol&&(i.host=i.host.replace(/:443$/,"")),i.protocol||(i.protocol=window.location.protocol),i.host||(i.host=window.location.host),i}function ns(e){var t;return e.match(/^https?:\/\//)||((t=document.createElement("a")).href=e,e=t.href),e}function as(e,t=window.location){return(":"===(e=rs(e)).protocol?t:e).protocol+e.host!==t.protocol+t.host}const os=function(e){if("string"==typeof e){e=/^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/.exec(e);if(e)return e.pop().toLowerCase()}return""};var ls=Object.freeze({__proto__:null,parseUrl:rs,getAbsoluteURL:ns,getFileExtension:os,isCrossOrigin:as}),t="undefined"!=typeof window?window:"undefined"!=typeof It?It:"undefined"!=typeof self?self:{},C=t,hs=Mt(function(e){function t(){return e.exports=t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s,i=arguments[t];for(s in i)Object.prototype.hasOwnProperty.call(i,s)&&(e[s]=i[s])}return e},e.exports.__esModule=!0,e.exports.default=e.exports,t.apply(this,arguments)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports}),cs=((t=hs)&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")&&t.default,function(e){var t;return!!e&&("[object Function]"===(t=ds.call(e))||"function"==typeof e&&"[object RegExp]"!==t||"undefined"!=typeof window&&(e===window.setTimeout||e===window.alert||e===window.confirm||e===window.prompt))}),ds=Object.prototype.toString;fs.httpHandler=function(i,r){return void 0===r&&(r=!1),function(e,t,s){if(e)i(e);else if(400<=t.statusCode&&t.statusCode<=599){e=s;if(r)if(C.TextDecoder){t=function(e){void 0===e&&(e="");return e.toLowerCase().split(";").reduce(function(e,t){var t=t.split("="),s=t[0],t=t[1];return"charset"===s.trim()?t.trim():e},"utf-8")}(t.headers&&t.headers["content-type"]);try{e=new TextDecoder(t).decode(s)}catch(e){}}else e=String.fromCharCode.apply(null,new Uint8Array(s));i({cause:e})}else i(null,s)}};for(var us=function(e){var i={};return e&&e.trim().split("\n").forEach(function(e){var t=e.indexOf(":"),s=e.slice(0,t).trim().toLowerCase(),e=e.slice(t+1).trim();"undefined"==typeof i[s]?i[s]=e:Array.isArray(i[s])?i[s].push(e):i[s]=[i[s],e]}),i},ps=fs,t=fs,gs=(fs.XMLHttpRequest=C.XMLHttpRequest||function(){},fs.XDomainRequest="withCredentials"in new fs.XMLHttpRequest?fs.XMLHttpRequest:C.XDomainRequest,["get","put","post","patch","head","delete"]),ms=function(i){fs["delete"===i?"del":i]=function(e,t,s){return(t=_s(e,t,s)).method=i.toUpperCase(),ys(t)}},vs=0;vs<gs.length;vs++)ms(gs[vs]);function _s(e,t,s){var i=e;return cs(t)?(s=t,"string"==typeof e&&(i={uri:e})):i=hs({},t,{uri:e}),i.callback=s,i}function fs(e,t,s){return ys(t=_s(e,t,s))}function ys(i){if("undefined"==typeof i.callback)throw new Error("callback argument missing");var r=!1,n=function(e,t,s){r||(r=!0,i.callback(e,t,s))};function a(){var e=void 0,e=h.response||h.responseText||function(e){try{if("document"===e.responseType)return e.responseXML;var t=e.responseXML&&"parsererror"===e.responseXML.documentElement.nodeName;if(""===e.responseType&&!t)return e.responseXML}catch(e){}return null}(h);if(m)try{e=JSON.parse(e)}catch(e){}return e}function t(e){return clearTimeout(l),(e=e instanceof Error?e:new Error(""+(e||"Unknown XMLHttpRequest Error"))).statusCode=0,n(e,v)}function e(){var e,t,s;if(!o)return clearTimeout(l),e=i.useXDR&&void 0===h.status?200:1223===h.status?204:h.status,t=v,s=null,0!==e?(t={body:a(),statusCode:e,method:d,headers:{},url:c,rawRequest:h},h.getAllResponseHeaders&&(t.headers=us(h.getAllResponseHeaders()))):s=new Error("Internal XMLHttpRequest Error"),n(s,t,t.body)}var s,o,l,h=i.xhr||null,c=(h=h||new(i.cors||i.useXDR?fs.XDomainRequest:fs.XMLHttpRequest)).url=i.uri||i.url,d=h.method=i.method||"GET",u=i.body||i.data,p=h.headers=i.headers||{},g=!!i.sync,m=!1,v={body:void 0,headers:{},statusCode:0,method:d,url:c,rawRequest:h};if("json"in i&&!1!==i.json&&(m=!0,p.accept||p.Accept||(p.Accept="application/json"),"GET"!==d)&&"HEAD"!==d&&(p["content-type"]||p["Content-Type"]||(p["Content-Type"]="application/json"),u=JSON.stringify(!0===i.json?u:i.json)),h.onreadystatechange=function(){4===h.readyState&&setTimeout(e,0)},h.onload=e,h.onerror=t,h.onprogress=function(){},h.onabort=function(){o=!0},h.ontimeout=t,h.open(d,c,!g,i.username,i.password),g||(h.withCredentials=!!i.withCredentials),!g&&0<i.timeout&&(l=setTimeout(function(){var e;o||(o=!0,h.abort("timeout"),(e=new Error("XMLHttpRequest timeout")).code="ETIMEDOUT",t(e))},i.timeout)),h.setRequestHeader)for(s in p)p.hasOwnProperty(s)&&h.setRequestHeader(s,p[s]);else if(i.headers&&!function(e){for(var t in e)if(e.hasOwnProperty(t))return;return 1}(i.headers))throw new Error("Headers cannot be set on an XDomainRequest object");return"responseType"in i&&(h.responseType=i.responseType),"beforeSend"in i&&"function"==typeof i.beforeSend&&i.beforeSend(h),h.send(u||null),h}ps.default=t;function bs(e,t){var s=new window.WebVTT.Parser(window,window.vttjs,window.WebVTT.StringDecoder());const i=[];s.oncue=function(e){t.addCue(e)},s.onparsingerror=function(e){i.push(e)},s.onflush=function(){t.trigger({type:"loadeddata",target:t})},s.parse(e),0<i.length&&(window.console&&window.console.groupCollapsed&&window.console.groupCollapsed("Text Track parsing errors for "+t.src),i.forEach(e=>l.error(e)),window.console)&&window.console.groupEnd&&window.console.groupEnd(),s.flush()}function Ts(e,i){var t={uri:e};(e=as(e))&&(t.cors=e),(e="use-credentials"===i.tech_.crossOrigin())&&(t.withCredentials=e),ps(t,f(this,function(e,t,s){if(e)return l.error(e,t);i.loaded_=!0,"function"!=typeof window.WebVTT?i.tech_&&i.tech_.any(["vttjsloaded","vttjserror"],e=>{if("vttjserror"!==e.type)return bs(s,i);l.error("vttjs failed to load, stopping trying to process "+i.src)}):bs(s,i)}))}class ks extends is{constructor(e={}){if(!e.tech)throw new Error("A tech was not provided.");e=h(e,{kind:ts[e.kind]||"subtitles",language:e.language||e.srclang||""});let t=ss[e.mode]||"disabled";const s=e.default,i=("metadata"!==e.kind&&"chapters"!==e.kind||(t="hidden"),super(e),this.tech_=e.tech,this.cues_=[],this.activeCues_=[],this.preload_=!1!==this.tech_.preloadTextTracks,new Jt(this.cues_)),n=new Jt(this.activeCues_);let a=!1;this.timeupdateHandler=f(this,function(e={}){this.tech_.isDisposed()||(this.tech_.isReady_&&(this.activeCues=this.activeCues,a)&&(this.trigger("cuechange"),a=!1),"timeupdate"!==e.type&&(this.rvf_=this.tech_.requestVideoFrameCallback(this.timeupdateHandler)))});this.tech_.one("dispose",()=>{this.stopTracking()}),"disabled"!==t&&this.startTracking(),Object.defineProperties(this,{default:{get(){return s},set(){}},mode:{get(){return t},set(e){ss[e]&&t!==e&&(t=e,this.preload_||"disabled"===t||0!==this.cues.length||Ts(this.src,this),this.stopTracking(),"disabled"!==t&&this.startTracking(),this.trigger("modechange"))}},cues:{get(){return this.loaded_?i:null},set(){}},activeCues:{get(){if(!this.loaded_)return null;if(0!==this.cues.length){var s=this.tech_.currentTime(),i=[];for(let e=0,t=this.cues.length;e<t;e++){var r=this.cues[e];r.startTime<=s&&r.endTime>=s&&i.push(r)}if(a=!1,i.length!==this.activeCues_.length)a=!0;else for(let e=0;e<i.length;e++)-1===this.activeCues_.indexOf(i[e])&&(a=!0);this.activeCues_=i,n.setCues_(this.activeCues_)}return n},set(){}}}),e.src?(this.src=e.src,this.preload_||(this.loaded_=!0),(this.preload_||"subtitles"!==e.kind&&"captions"!==e.kind)&&Ts(this.src,this)):this.loaded_=!0}startTracking(){this.rvf_=this.tech_.requestVideoFrameCallback(this.timeupdateHandler),this.tech_.on("timeupdate",this.timeupdateHandler)}stopTracking(){this.rvf_&&(this.tech_.cancelVideoFrameCallback(this.rvf_),this.rvf_=void 0),this.tech_.off("timeupdate",this.timeupdateHandler)}addCue(e){let t=e;if(!("getCueAsHTML"in t)){t=new window.vttjs.VTTCue(e.startTime,e.endTime,e.text);for(const i in e)i in t||(t[i]=e[i]);t.id=e.id,t.originalCue_=e}var s=this.tech_.textTracks();for(let e=0;e<s.length;e++)s[e]!==this&&s[e].removeCue(t);this.cues_.push(t),this.cues.setCues_(this.cues_)}removeCue(e){let t=this.cues_.length;for(;t--;){var s=this.cues_[t];if(s===e||s.originalCue_&&s.originalCue_===e){this.cues_.splice(t,1),this.cues.setCues_(this.cues_);break}}}}ks.prototype.allowedEvents_={cuechange:"cuechange"};class Cs extends is{constructor(e={}){e=h(e,{kind:es[e.kind]||""});super(e);let t=!1;Object.defineProperty(this,"enabled",{get(){return t},set(e){"boolean"==typeof e&&e!==t&&(t=e,this.trigger("enabledchange"))}}),e.enabled&&(this.enabled=e.enabled),this.loaded_=!0}}class ws extends is{constructor(e={}){e=h(e,{kind:Zt[e.kind]||""});super(e);let t=!1;Object.defineProperty(this,"selected",{get(){return t},set(e){"boolean"==typeof e&&e!==t&&(t=e,this.trigger("selectedchange"))}}),e.selected&&(this.selected=e.selected)}}class Es extends s{constructor(e={}){super();let t;const s=new ks(e);this.kind=s.kind,this.src=s.src,this.srclang=s.language,this.label=s.label,this.default=s.default,Object.defineProperties(this,{readyState:{get(){return t}},track:{get(){return s}}}),t=Es.NONE,s.addEventListener("loadeddata",()=>{t=Es.LOADED,this.trigger({type:"load",target:this})})}}Es.prototype.allowedEvents_={load:"load"},Es.NONE=0,Es.LOADING=1,Es.LOADED=2,Es.ERROR=3;const w={audio:{ListClass:class extends Xt{constructor(t=[]){for(let e=t.length-1;0<=e;e--)if(t[e].enabled){Gt(t,t[e]);break}super(t),this.changing_=!1}addTrack(e){e.enabled&&Gt(this,e),super.addTrack(e),e.addEventListener&&(e.enabledChange_=()=>{this.changing_||(this.changing_=!0,Gt(this,e),this.changing_=!1,this.trigger("change"))},e.addEventListener("enabledchange",e.enabledChange_))}removeTrack(e){super.removeTrack(e),e.removeEventListener&&e.enabledChange_&&(e.removeEventListener("enabledchange",e.enabledChange_),e.enabledChange_=null)}},TrackClass:Cs,capitalName:"Audio"},video:{ListClass:class extends Xt{constructor(t=[]){for(let e=t.length-1;0<=e;e--)if(t[e].selected){Yt(t,t[e]);break}super(t),this.changing_=!1,Object.defineProperty(this,"selectedIndex",{get(){for(let e=0;e<this.length;e++)if(this[e].selected)return e;return-1},set(){}})}addTrack(e){e.selected&&Yt(this,e),super.addTrack(e),e.addEventListener&&(e.selectedChange_=()=>{this.changing_||(this.changing_=!0,Yt(this,e),this.changing_=!1,this.trigger("change"))},e.addEventListener("selectedchange",e.selectedChange_))}removeTrack(e){super.removeTrack(e),e.removeEventListener&&e.selectedChange_&&(e.removeEventListener("selectedchange",e.selectedChange_),e.selectedChange_=null)}},TrackClass:ws,capitalName:"Video"},text:{ListClass:Qt,TrackClass:ks,capitalName:"Text"}},Ss=(Object.keys(w).forEach(function(e){w[e].getterName=e+"Tracks",w[e].privateName=e+"Tracks_"}),{remoteText:{ListClass:Qt,TrackClass:ks,capitalName:"RemoteText",getterName:"remoteTextTracks",privateName:"remoteTextTracks_"},remoteTextEl:{ListClass:class{constructor(s=[]){this.trackElements_=[],Object.defineProperty(this,"length",{get(){return this.trackElements_.length}});for(let e=0,t=s.length;e<t;e++)this.addTrackElement_(s[e])}addTrackElement_(e){const t=this.trackElements_.length;""+t in this||Object.defineProperty(this,t,{get(){return this.trackElements_[t]}}),-1===this.trackElements_.indexOf(e)&&this.trackElements_.push(e)}getTrackElementByTrack_(s){let i;for(let e=0,t=this.trackElements_.length;e<t;e++)if(s===this.trackElements_[e].track){i=this.trackElements_[e];break}return i}removeTrackElement_(s){for(let e=0,t=this.trackElements_.length;e<t;e++)if(s===this.trackElements_[e]){this.trackElements_[e].track&&"function"==typeof this.trackElements_[e].track.off&&this.trackElements_[e].track.off(),"function"==typeof this.trackElements_[e].off&&this.trackElements_[e].off(),this.trackElements_.splice(e,1);break}}},TrackClass:Es,capitalName:"RemoteTextTrackEls",getterName:"remoteTextTrackEls",privateName:"remoteTextTrackEls_"}}),E=Object.assign({},w,Ss);Ss.names=Object.keys(Ss),w.names=Object.keys(w),E.names=[].concat(Ss.names).concat(w.names);var t="undefined"!=typeof It?It:"undefined"!=typeof window?window:{},xs="undefined"!=typeof document?document:(xs=t["__GLOBAL_DOCUMENT_CACHE@4"])||(t["__GLOBAL_DOCUMENT_CACHE@4"]={}),It=xs,js=Object.create||function(e){if(1!==arguments.length)throw new Error("Object.create shim only accepts one parameter.");return Ps.prototype=e,new Ps};function Ps(){}function S(e,t){this.name="ParsingError",this.code=e.code,this.message=t||e.message}function Is(e){function t(e,t,s,i){return 3600*(0|e)+60*(0|t)+(0|s)+(0|i)/1e3}e=e.match(/^(\d+):(\d{1,2})(:\d{1,2})?\.(\d{3})/);return e?e[3]?t(e[1],e[2],e[3].replace(":",""),e[4]):59<e[1]?t(e[1],e[2],0,e[4]):t(0,e[1],e[2],e[4]):null}function Ms(){this.values=js(null)}function As(e,t,s,i){var r,n,a=i?e.split(i):[e];for(r in a)"string"==typeof a[r]&&2===(n=a[r].split(s)).length&&t(n[0].trim(),n[1].trim())}((S.prototype=js(Error.prototype)).constructor=S).Errors={BadSignature:{code:0,message:"Malformed WebVTT signature."},BadTimeStamp:{code:1,message:"Malformed time stamp."}},Ms.prototype={set:function(e,t){this.get(e)||""===t||(this.values[e]=t)},get:function(e,t,s){return s?this.has(e)?this.values[e]:t[s]:this.has(e)?this.values[e]:t},has:function(e){return e in this.values},alt:function(e,t,s){for(var i=0;i<s.length;++i)if(t===s[i]){this.set(e,t);break}},integer:function(e,t){/^-?\d+$/.test(t)&&this.set(e,parseInt(t,10))},percent:function(e,t){return!!(t.match(/^([\d]{1,3})(\.[\d]*)?%$/)&&0<=(t=parseFloat(t))&&t<=100)&&(this.set(e,t),!0)}};var Os=It.createElement&&It.createElement("textarea"),Ls={c:"span",i:"i",b:"b",u:"u",ruby:"ruby",rt:"rt",v:"span",lang:"span"},Ns={white:"rgba(255,255,255,1)",lime:"rgba(0,255,0,1)",cyan:"rgba(0,255,255,1)",red:"rgba(255,0,0,1)",yellow:"rgba(255,255,0,1)",magenta:"rgba(255,0,255,1)",blue:"rgba(0,0,255,1)",black:"rgba(0,0,0,1)"},Ds={v:"title",lang:"lang"},Bs={rt:"ruby"};function Rs(e,t){for(var s,i,r,n,a,o,l=e.document.createElement("div"),h=l,c=[];null!==(o=void 0,o=t?(o=(o=t.match(/^([^<]*)(<[^>]*>?)?/))[1]||o[2],t=t.substr(o.length),o):null);)"<"===o[0]?"/"===o[1]?c.length&&c[c.length-1]===o.substr(2).replace(">","")&&(c.pop(),h=h.parentNode):(i=Is(o.substr(1,o.length-2)))?(s=e.document.createProcessingInstruction("timestamp",i),h.appendChild(s)):(i=o.match(/^<([^.\s/0-9>]+)(\.[^\s\\>]+)?([^>\\]+)?(\\?)>?$/))&&(r=i[1],n=i[3],a=void 0,a=Ls[r],s=a?(a=e.document.createElement(a),(r=Ds[r])&&n&&(a[r]=n.trim()),a):null)&&(r=h,Bs[(n=s).localName]&&Bs[n.localName]!==r.localName||(i[2]&&((a=i[2].split(".")).forEach(function(e){var t=/^bg_/.test(e),e=t?e.slice(3):e;Ns.hasOwnProperty(e)&&(e=Ns[e],s.style[t?"background-color":"color"]=e)}),s.className=a.join(" ")),c.push(i[1]),h.appendChild(s),h=s)):h.appendChild(e.document.createTextNode((n=o,Os.innerHTML=n,n=Os.textContent,Os.textContent="",n)));return l}var Hs=[[1470,1470],[1472,1472],[1475,1475],[1478,1478],[1488,1514],[1520,1524],[1544,1544],[1547,1547],[1549,1549],[1563,1563],[1566,1610],[1645,1647],[1649,1749],[1765,1766],[1774,1775],[1786,1805],[1807,1808],[1810,1839],[1869,1957],[1969,1969],[1984,2026],[2036,2037],[2042,2042],[2048,2069],[2074,2074],[2084,2084],[2088,2088],[2096,2110],[2112,2136],[2142,2142],[2208,2208],[2210,2220],[8207,8207],[64285,64285],[64287,64296],[64298,64310],[64312,64316],[64318,64318],[64320,64321],[64323,64324],[64326,64449],[64467,64829],[64848,64911],[64914,64967],[65008,65020],[65136,65140],[65142,65276],[67584,67589],[67592,67592],[67594,67637],[67639,67640],[67644,67644],[67647,67669],[67671,67679],[67840,67867],[67872,67897],[67903,67903],[67968,68023],[68030,68031],[68096,68096],[68112,68115],[68117,68119],[68121,68147],[68160,68167],[68176,68184],[68192,68223],[68352,68405],[68416,68437],[68440,68466],[68472,68479],[68608,68680],[126464,126467],[126469,126495],[126497,126498],[126500,126500],[126503,126503],[126505,126514],[126516,126519],[126521,126521],[126523,126523],[126530,126530],[126535,126535],[126537,126537],[126539,126539],[126541,126543],[126545,126546],[126548,126548],[126551,126551],[126553,126553],[126555,126555],[126557,126557],[126559,126559],[126561,126562],[126564,126564],[126567,126570],[126572,126578],[126580,126583],[126585,126588],[126590,126590],[126592,126601],[126603,126619],[126625,126627],[126629,126633],[126635,126651],[1114109,1114109]];function Fs(e){var t=[],s="";if(e&&e.childNodes)for(n(t,e);s=function e(t){var s,i,r;return t&&t.length?(i=(s=t.pop()).textContent||s.innerText)?(r=i.match(/^.*(\n|\r)/))?r[t.length=0]:i:"ruby"===s.tagName?e(t):s.childNodes?(n(t,s),e(t)):void 0:null}(t);)for(var i=0;i<s.length;i++)if(function(e){for(var t=0;t<Hs.length;t++){var s=Hs[t];if(e>=s[0]&&e<=s[1])return 1}}(s.charCodeAt(i)))return"rtl";return"ltr";function n(e,t){for(var s=t.childNodes.length-1;0<=s;s--)e.push(t.childNodes[s])}}function Vs(){}function zs(e,t,s){Vs.call(this),this.cue=t,this.cueDiv=Rs(e,t.text);var i={color:"rgba(255, 255, 255, 1)",backgroundColor:"rgba(0, 0, 0, 0.8)",position:"relative",left:0,right:0,top:0,bottom:0,display:"inline",writingMode:""===t.vertical?"horizontal-tb":"lr"===t.vertical?"vertical-lr":"vertical-rl",unicodeBidi:"plaintext"},r=(this.applyStyles(i,this.cueDiv),this.div=e.document.createElement("div"),i={direction:Fs(this.cueDiv),writingMode:""===t.vertical?"horizontal-tb":"lr"===t.vertical?"vertical-lr":"vertical-rl",unicodeBidi:"plaintext",textAlign:"middle"===t.align?"center":t.align,font:s.font,whiteSpace:"pre-line",position:"absolute"},this.applyStyles(i),this.div.appendChild(this.cueDiv),0);switch(t.positionAlign){case"start":case"line-left":r=t.position;break;case"center":r=t.position-t.size/2;break;case"end":case"line-right":r=t.position-t.size}""===t.vertical?this.applyStyles({left:this.formatStyle(r,"%"),width:this.formatStyle(t.size,"%")}):this.applyStyles({top:this.formatStyle(r,"%"),height:this.formatStyle(t.size,"%")}),this.move=function(e){this.applyStyles({top:this.formatStyle(e.top,"px"),bottom:this.formatStyle(e.bottom,"px"),left:this.formatStyle(e.left,"px"),right:this.formatStyle(e.right,"px"),height:this.formatStyle(e.height,"px"),width:this.formatStyle(e.width,"px")})}}function x(e){var t,s,i,r;e.div&&(t=e.div.offsetHeight,s=e.div.offsetWidth,i=e.div.offsetTop,r=(r=(r=e.div.childNodes)&&r[0])&&r.getClientRects&&r.getClientRects(),e=e.div.getBoundingClientRect(),r=r?Math.max(r[0]&&r[0].height||0,e.height/r.length):0),this.left=e.left,this.right=e.right,this.top=e.top||i,this.height=e.height||t,this.bottom=e.bottom||i+(e.height||t),this.width=e.width||s,this.lineHeight=void 0!==r?r:e.lineHeight}function qs(e,t,o,l){var s,i=new x(t),r=t.cue,n=function(e){if("number"==typeof e.line&&(e.snapToLines||0<=e.line&&e.line<=100))return e.line;if(!e.track||!e.track.textTrackList||!e.track.textTrackList.mediaElement)return-1;for(var t=e.track,s=t.textTrackList,i=0,r=0;r<s.length&&s[r]!==t;r++)"showing"===s[r].mode&&i++;return-1*++i}(r),a=[];if(r.snapToLines){switch(r.vertical){case"":a=["+y","-y"],s="height";break;case"rl":a=["+x","-x"],s="width";break;case"lr":a=["-x","+x"],s="width"}var h=i.lineHeight,c=h*Math.round(n),d=o[s]+h,u=a[0];Math.abs(c)>d&&(c=c<0?-1:1,c*=Math.ceil(d/h)*h),n<0&&(c+=""===r.vertical?o.height:o.width,a=a.reverse()),i.move(u,c)}else{var p=i.lineHeight/o.height*100;switch(r.lineAlign){case"center":n-=p/2;break;case"end":n-=p}switch(r.vertical){case"":t.applyStyles({top:t.formatStyle(n,"%")});break;case"rl":t.applyStyles({left:t.formatStyle(n,"%")});break;case"lr":t.applyStyles({right:t.formatStyle(n,"%")})}a=["+y","-x","+x","-y"],i=new x(t)}d=function(e,t){for(var s,i=new x(e),r=1,n=0;n<t.length;n++){for(;e.overlapsOppositeAxis(o,t[n])||e.within(o)&&e.overlapsAny(l);)e.move(t[n]);if(e.within(o))return e;var a=e.intersectPercentage(o);a<r&&(s=new x(e),r=a),e=new x(i)}return s||i}(i,a);t.move(d.toCSSCompatValues(o))}function $s(){}Vs.prototype.applyStyles=function(e,t){for(var s in t=t||this.div,e)e.hasOwnProperty(s)&&(t.style[s]=e[s])},Vs.prototype.formatStyle=function(e,t){return 0===e?0:e+t},(zs.prototype=js(Vs.prototype)).constructor=zs,x.prototype.move=function(e,t){switch(t=void 0!==t?t:this.lineHeight,e){case"+x":this.left+=t,this.right+=t;break;case"-x":this.left-=t,this.right-=t;break;case"+y":this.top+=t,this.bottom+=t;break;case"-y":this.top-=t,this.bottom-=t}},x.prototype.overlaps=function(e){return this.left<e.right&&this.right>e.left&&this.top<e.bottom&&this.bottom>e.top},x.prototype.overlapsAny=function(e){for(var t=0;t<e.length;t++)if(this.overlaps(e[t]))return!0;return!1},x.prototype.within=function(e){return this.top>=e.top&&this.bottom<=e.bottom&&this.left>=e.left&&this.right<=e.right},x.prototype.overlapsOppositeAxis=function(e,t){switch(t){case"+x":return this.left<e.left;case"-x":return this.right>e.right;case"+y":return this.top<e.top;case"-y":return this.bottom>e.bottom}},x.prototype.intersectPercentage=function(e){return Math.max(0,Math.min(this.right,e.right)-Math.max(this.left,e.left))*Math.max(0,Math.min(this.bottom,e.bottom)-Math.max(this.top,e.top))/(this.height*this.width)},x.prototype.toCSSCompatValues=function(e){return{top:this.top-e.top,bottom:e.bottom-this.bottom,left:this.left-e.left,right:e.right-this.right,height:this.height,width:this.width}},x.getSimpleBoxPosition=function(e){var t=e.div?e.div.offsetHeight:e.tagName?e.offsetHeight:0,s=e.div?e.div.offsetWidth:e.tagName?e.offsetWidth:0,i=e.div?e.div.offsetTop:e.tagName?e.offsetTop:0;return{left:(e=e.div?e.div.getBoundingClientRect():e.tagName?e.getBoundingClientRect():e).left,right:e.right,top:e.top||i,height:e.height||t,bottom:e.bottom||i+(e.height||t),width:e.width||s}},$s.StringDecoder=function(){return{decode:function(e){if(!e)return"";if("string"!=typeof e)throw new Error("Error - expected string data.");return decodeURIComponent(encodeURIComponent(e))}}},$s.convertCueToDOMTree=function(e,t){return e&&t?Rs(e,t):null};$s.processCues=function(e,t,s){if(!e||!t||!s)return null;for(;s.firstChild;)s.removeChild(s.firstChild);var i=e.document.createElement("div");if(i.style.position="absolute",i.style.left="0",i.style.right="0",i.style.top="0",i.style.bottom="0",i.style.margin="1.5%",s.appendChild(i),function(e){for(var t=0;t<e.length;t++)if(e[t].hasBeenReset||!e[t].displayState)return 1}(t))for(var r,n,a=[],o=x.getSimpleBoxPosition(i),l={font:Math.round(.05*o.height*100)/100+"px sans-serif"},h=0;h<t.length;h++)n=t[h],r=new zs(e,n,l),i.appendChild(r.div),qs(0,r,o,a),n.displayState=r.div,a.push(x.getSimpleBoxPosition(r));else for(var c=0;c<t.length;c++)i.appendChild(t[c].displayState)},($s.Parser=function(e,t,s){s||(s=t,t={}),t=t||{},this.window=e,this.vttjs=t,this.state="INITIAL",this.buffer="",this.decoder=s||new TextDecoder("utf8"),this.regionList=[]}).prototype={reportOrThrowError:function(e){if(!(e instanceof S))throw e;this.onparsingerror&&this.onparsingerror(e)},parse:function(e){var i=this;function t(){for(var e=i.buffer,t=0;t<e.length&&"\r"!==e[t]&&"\n"!==e[t];)++t;var s=e.substr(0,t);return"\r"===e[t]&&++t,"\n"===e[t]&&++t,i.buffer=e.substr(t),s}function s(e){e.match(/X-TIMESTAMP-MAP/)?As(e,function(e,t){var s;"X-TIMESTAMP-MAP"===e&&(e=t,s=new Ms,As(e,function(e,t){switch(e){case"MPEGT":s.integer(e+"S",t);break;case"LOCA":s.set(e+"L",Is(t))}},/[^\d]:/,/,/),i.ontimestampmap)&&i.ontimestampmap({MPEGTS:s.get("MPEGTS"),LOCAL:s.get("LOCAL")})},/=/):As(e,function(e,t){var r;"Region"===e&&(e=t,r=new Ms,As(e,function(e,t){switch(e){case"id":r.set(e,t);break;case"width":r.percent(e,t);break;case"lines":r.integer(e,t);break;case"regionanchor":case"viewportanchor":var s,i=t.split(",");2===i.length&&((s=new Ms).percent("x",i[0]),s.percent("y",i[1]),s.has("x")&&s.has("y"))&&(r.set(e+"X",s.get("x")),r.set(e+"Y",s.get("y")));break;case"scroll":r.alt(e,t,["up"])}},/=/,/\s/),r.has("id"))&&((e=new(i.vttjs.VTTRegion||i.window.VTTRegion)).width=r.get("width",100),e.lines=r.get("lines",3),e.regionAnchorX=r.get("regionanchorX",0),e.regionAnchorY=r.get("regionanchorY",100),e.viewportAnchorX=r.get("viewportanchorX",0),e.viewportAnchorY=r.get("viewportanchorY",100),e.scroll=r.get("scroll",""),i.onregion&&i.onregion(e),i.regionList.push({id:r.get("id"),region:e}))},/:/)}e&&(i.buffer+=i.decoder.decode(e,{stream:!0}));try{if("INITIAL"===i.state){if(!/\r\n|\n/.test(i.buffer))return this;var r,n=(r=t()).match(/^WEBVTT([ \t].*)?$/);if(!n||!n[0])throw new S(S.Errors.BadSignature);i.state="HEADER"}for(var a=!1;i.buffer;){if(!/\r\n|\n/.test(i.buffer))return this;switch(a?a=!1:r=t(),i.state){case"HEADER":/:/.test(r)?s(r):r||(i.state="ID");continue;case"NOTE":r||(i.state="ID");continue;case"ID":if(/^NOTE($|[ \t])/.test(r)){i.state="NOTE";break}if(!r)continue;i.cue=new(i.vttjs.VTTCue||i.window.VTTCue)(0,0,"");try{i.cue.align="center"}catch(e){i.cue.align="middle"}if(i.state="CUE",-1===r.indexOf("--\x3e")){i.cue.id=r;continue}case"CUE":try{!function(t,s,n){var i=t;function e(){var e=Is(t);if(null===e)throw new S(S.Errors.BadTimeStamp,"Malformed timestamp: "+i);return t=t.replace(/^[^\sa-zA-Z-]+/,""),e}function r(){t=t.replace(/^\s+/,"")}if(r(),s.startTime=e(),r(),"--\x3e"!==t.substr(0,3))throw new S(S.Errors.BadTimeStamp,"Malformed time stamp (time stamps must be separated by '--\x3e'): "+i);t=t.substr(3),r(),s.endTime=e(),r();var a=t,o=new Ms;As(a,function(e,t){switch(e){case"region":for(var s=n.length-1;0<=s;s--)if(n[s].id===t){o.set(e,n[s].region);break}break;case"vertical":o.alt(e,t,["rl","lr"]);break;case"line":var i=t.split(","),r=i[0];o.integer(e,r),o.percent(e,r)&&o.set("snapToLines",!1),o.alt(e,r,["auto"]),2===i.length&&o.alt("lineAlign",i[1],["start","center","end"]);break;case"position":i=t.split(","),o.percent(e,i[0]),2===i.length&&o.alt("positionAlign",i[1],["start","center","end"]);break;case"size":o.percent(e,t);break;case"align":o.alt(e,t,["start","center","end","left","right"])}},/:/,/\s/),s.region=o.get("region",null),s.vertical=o.get("vertical","");try{s.line=o.get("line","auto")}catch(e){}s.lineAlign=o.get("lineAlign","start"),s.snapToLines=o.get("snapToLines",!0),s.size=o.get("size",100);try{s.align=o.get("align","center")}catch(e){s.align=o.get("align","middle")}try{s.position=o.get("position","auto")}catch(e){s.position=o.get("position",{start:0,left:0,center:50,middle:50,end:100,right:100},s.align)}s.positionAlign=o.get("positionAlign",{start:"start",left:"start",center:"center",middle:"center",end:"end",right:"end"},s.align)}(r,i.cue,i.regionList)}catch(e){i.reportOrThrowError(e),i.cue=null,i.state="BADCUE";continue}i.state="CUETEXT";continue;case"CUETEXT":var o=-1!==r.indexOf("--\x3e");if(!r||o&&(a=!0)){i.oncue&&i.oncue(i.cue),i.cue=null,i.state="ID";continue}i.cue.text&&(i.cue.text+="\n"),i.cue.text+=r.replace(/\u2028/g,"\n").replace(/u2029/g,"\n");continue;case"BADCUE":r||(i.state="ID");continue}}}catch(e){i.reportOrThrowError(e),"CUETEXT"===i.state&&i.cue&&i.oncue&&i.oncue(i.cue),i.cue=null,i.state="INITIAL"===i.state?"BADWEBVTT":"BADCUE"}return this},flush:function(){var t=this;try{if(t.buffer+=t.decoder.decode(),!t.cue&&"HEADER"!==t.state||(t.buffer+="\n\n",t.parse()),"INITIAL"===t.state)throw new S(S.Errors.BadSignature)}catch(e){t.reportOrThrowError(e)}return t.onflush&&t.onflush(),this}};var Us=$s,Ks={"":1,lr:1,rl:1},Ws={start:1,center:1,end:1,left:1,right:1,auto:1,"line-left":1,"line-right":1};function Xs(e){return"string"==typeof e&&!!Ws[e.toLowerCase()]&&e.toLowerCase()}function Gs(e,t,s){this.hasBeenReset=!1;var i="",r=!1,n=e,a=t,o=s,l=null,h="",c=!0,d="auto",u="start",p="auto",g="auto",m=100,v="center";Object.defineProperties(this,{id:{enumerable:!0,get:function(){return i},set:function(e){i=""+e}},pauseOnExit:{enumerable:!0,get:function(){return r},set:function(e){r=!!e}},startTime:{enumerable:!0,get:function(){return n},set:function(e){if("number"!=typeof e)throw new TypeError("Start time must be set to a number.");n=e,this.hasBeenReset=!0}},endTime:{enumerable:!0,get:function(){return a},set:function(e){if("number"!=typeof e)throw new TypeError("End time must be set to a number.");a=e,this.hasBeenReset=!0}},text:{enumerable:!0,get:function(){return o},set:function(e){o=""+e,this.hasBeenReset=!0}},region:{enumerable:!0,get:function(){return l},set:function(e){l=e,this.hasBeenReset=!0}},vertical:{enumerable:!0,get:function(){return h},set:function(e){e="string"==typeof(e=e)&&!!Ks[e.toLowerCase()]&&e.toLowerCase();if(!1===e)throw new SyntaxError("Vertical: an invalid or illegal direction string was specified.");h=e,this.hasBeenReset=!0}},snapToLines:{enumerable:!0,get:function(){return c},set:function(e){c=!!e,this.hasBeenReset=!0}},line:{enumerable:!0,get:function(){return d},set:function(e){if("number"!=typeof e&&"auto"!==e)throw new SyntaxError("Line: an invalid number or illegal string was specified.");d=e,this.hasBeenReset=!0}},lineAlign:{enumerable:!0,get:function(){return u},set:function(e){e=Xs(e);e&&(u=e,this.hasBeenReset=!0)}},position:{enumerable:!0,get:function(){return p},set:function(e){if(e<0||100<e)throw new Error("Position must be between 0 and 100.");p=e,this.hasBeenReset=!0}},positionAlign:{enumerable:!0,get:function(){return g},set:function(e){e=Xs(e);e&&(g=e,this.hasBeenReset=!0)}},size:{enumerable:!0,get:function(){return m},set:function(e){if(e<0||100<e)throw new Error("Size must be between 0 and 100.");m=e,this.hasBeenReset=!0}},align:{enumerable:!0,get:function(){return v},set:function(e){e=Xs(e);if(!e)throw new SyntaxError("align: an invalid or illegal alignment string was specified.");v=e,this.hasBeenReset=!0}}}),this.displayState=void 0}Gs.prototype.getCueAsHTML=function(){return WebVTT.convertCueToDOMTree(window,this.text)};var Ys=Gs,Qs={"":!0,up:!0};function Js(e){return"number"==typeof e&&0<=e&&e<=100}function Zs(){var t=100,s=3,i=0,r=100,n=0,a=100,o="";Object.defineProperties(this,{width:{enumerable:!0,get:function(){return t},set:function(e){if(!Js(e))throw new Error("Width must be between 0 and 100.");t=e}},lines:{enumerable:!0,get:function(){return s},set:function(e){if("number"!=typeof e)throw new TypeError("Lines must be set to a number.");s=e}},regionAnchorY:{enumerable:!0,get:function(){return r},set:function(e){if(!Js(e))throw new Error("RegionAnchorX must be between 0 and 100.");r=e}},regionAnchorX:{enumerable:!0,get:function(){return i},set:function(e){if(!Js(e))throw new Error("RegionAnchorY must be between 0 and 100.");i=e}},viewportAnchorY:{enumerable:!0,get:function(){return a},set:function(e){if(!Js(e))throw new Error("ViewportAnchorY must be between 0 and 100.");a=e}},viewportAnchorX:{enumerable:!0,get:function(){return n},set:function(e){if(!Js(e))throw new Error("ViewportAnchorX must be between 0 and 100.");n=e}},scroll:{enumerable:!0,get:function(){return o},set:function(e){e="string"==typeof(e=e)&&!!Qs[e.toLowerCase()]&&e.toLowerCase();!1!==e&&(o=e)}}})}var ei=Mt(function(e){var e=e.exports={WebVTT:Us,VTTCue:Ys,VTTRegion:Zs},t=(C.vttjs=e,C.WebVTT=e.WebVTT,e.VTTCue),s=e.VTTRegion,i=C.VTTCue,r=C.VTTRegion;e.shim=function(){C.VTTCue=t,C.VTTRegion=s},e.restore=function(){C.VTTCue=i,C.VTTRegion=r},C.VTTCue||e.shim()});ei.WebVTT,ei.VTTCue,ei.VTTRegion;class j extends b{constructor(t={},e=function(){}){t.reportTouchActivity=!1,super(null,t,e),this.onDurationChange_=e=>this.onDurationChange(e),this.trackProgress_=e=>this.trackProgress(e),this.trackCurrentTime_=e=>this.trackCurrentTime(e),this.stopTrackingCurrentTime_=e=>this.stopTrackingCurrentTime(e),this.disposeSourceHandler_=e=>this.disposeSourceHandler(e),this.queuedHanders_=new Set,this.hasStarted_=!1,this.on("playing",function(){this.hasStarted_=!0}),this.on("loadstart",function(){this.hasStarted_=!1}),E.names.forEach(e=>{e=E[e];t&&t[e.getterName]&&(this[e.privateName]=t[e.getterName])}),this.featuresProgressEvents||this.manualProgressOn(),this.featuresTimeupdateEvents||this.manualTimeUpdatesOn(),["Text","Audio","Video"].forEach(e=>{!1===t[`native${e}Tracks`]&&(this[`featuresNative${e}Tracks`]=!1)}),!1===t.nativeCaptions||!1===t.nativeTextTracks?this.featuresNativeTextTracks=!1:!0!==t.nativeCaptions&&!0!==t.nativeTextTracks||(this.featuresNativeTextTracks=!0),this.featuresNativeTextTracks||this.emulateTextTracks(),this.preloadTextTracks=!1!==t.preloadTextTracks,this.autoRemoteTextTracks_=new E.text.ListClass,this.initTrackListeners(),t.nativeControlsForTouch||this.emitTapEvents(),this.constructor&&(this.name_=this.constructor.name||"Unknown Tech")}triggerSourceset(e){this.isReady_||this.one("ready",()=>this.setTimeout(()=>this.triggerSourceset(e),1)),this.trigger({src:e,type:"sourceset"})}manualProgressOn(){this.on("durationchange",this.onDurationChange_),this.manualProgress=!0,this.one("ready",this.trackProgress_)}manualProgressOff(){this.manualProgress=!1,this.stopTrackingProgress(),this.off("durationchange",this.onDurationChange_)}trackProgress(e){this.stopTrackingProgress(),this.progressInterval=this.setInterval(f(this,function(){var e=this.bufferedPercent();this.bufferedPercent_!==e&&this.trigger("progress"),1===(this.bufferedPercent_=e)&&this.stopTrackingProgress()}),500)}onDurationChange(e){this.duration_=this.duration()}buffered(){return T(0,0)}bufferedPercent(){return Ft(this.buffered(),this.duration_)}stopTrackingProgress(){this.clearInterval(this.progressInterval)}manualTimeUpdatesOn(){this.manualTimeUpdates=!0,this.on("play",this.trackCurrentTime_),this.on("pause",this.stopTrackingCurrentTime_)}manualTimeUpdatesOff(){this.manualTimeUpdates=!1,this.stopTrackingCurrentTime(),this.off("play",this.trackCurrentTime_),this.off("pause",this.stopTrackingCurrentTime_)}trackCurrentTime(){this.currentTimeInterval&&this.stopTrackingCurrentTime(),this.currentTimeInterval=this.setInterval(function(){this.trigger({type:"timeupdate",target:this,manuallyTriggered:!0})},250)}stopTrackingCurrentTime(){this.clearInterval(this.currentTimeInterval),this.trigger({type:"timeupdate",target:this,manuallyTriggered:!0})}dispose(){this.clearTracks(w.names),this.manualProgress&&this.manualProgressOff(),this.manualTimeUpdates&&this.manualTimeUpdatesOff(),super.dispose()}clearTracks(e){(e=[].concat(e)).forEach(e=>{var t=this[e+"Tracks"]()||[];let s=t.length;for(;s--;){var i=t[s];"text"===e&&this.removeRemoteTextTrack(i),t.removeTrack(i)}})}cleanupAutoTextTracks(){var e=this.autoRemoteTextTracks_||[];let t=e.length;for(;t--;){var s=e[t];this.removeRemoteTextTrack(s)}}reset(){}crossOrigin(){}setCrossOrigin(){}error(e){return void 0!==e&&(this.error_=new i(e),this.trigger("error")),this.error_}played(){return this.hasStarted_?T(0,0):T()}play(){}setScrubbing(e){}scrubbing(){}setCurrentTime(e){this.manualTimeUpdates&&this.trigger({type:"timeupdate",target:this,manuallyTriggered:!0})}initTrackListeners(){w.names.forEach(e=>{var t=w[e];const s=()=>{this.trigger(e+"trackchange")},i=this[t.getterName]();i.addEventListener("removetrack",s),i.addEventListener("addtrack",s),this.on("dispose",()=>{i.removeEventListener("removetrack",s),i.removeEventListener("addtrack",s)})})}addWebVttScript_(){if(!window.WebVTT)if(document.body.contains(this.el()))if(!this.options_["vtt.js"]&&G(ei)&&0<Object.keys(ei).length)this.trigger("vttjsloaded");else{const e=document.createElement("script");e.src=this.options_["vtt.js"]||"https://vjs.zencdn.net/vttjs/0.14.1/vtt.min.js",e.onload=()=>{this.trigger("vttjsloaded")},e.onerror=()=>{this.trigger("vttjserror")},this.on("dispose",()=>{e.onload=null,e.onerror=null}),window.WebVTT=!0,this.el().parentNode.appendChild(e)}else this.ready(this.addWebVttScript_)}emulateTextTracks(){const s=this.textTracks(),e=this.remoteTextTracks(),t=e=>s.addTrack(e.track),i=e=>s.removeTrack(e.track),r=(e.on("addtrack",t),e.on("removetrack",i),this.addWebVttScript_(),()=>this.trigger("texttrackchange")),n=()=>{r();for(let e=0;e<s.length;e++){var t=s[e];t.removeEventListener("cuechange",r),"showing"===t.mode&&t.addEventListener("cuechange",r)}};n(),s.addEventListener("change",n),s.addEventListener("addtrack",n),s.addEventListener("removetrack",n),this.on("dispose",function(){e.off("addtrack",t),e.off("removetrack",i),s.removeEventListener("change",n),s.removeEventListener("addtrack",n),s.removeEventListener("removetrack",n);for(let e=0;e<s.length;e++)s[e].removeEventListener("cuechange",r)})}addTextTrack(e,t,s){if(e)return e=e,t=t,s=s,r={},n=(i=this).textTracks(),r.kind=e,t&&(r.label=t),s&&(r.language=s),r.tech=i,e=new E.text.TrackClass(r),n.addTrack(e),e;throw new Error("TextTrack kind is required but was not provided");var i,r,n}createRemoteTextTrack(e){e=h(e,{tech:this});return new Ss.remoteTextEl.TrackClass(e)}addRemoteTextTrack(e={},t){const s=this.createRemoteTextTrack(e);return"boolean"!=typeof t&&(t=!1),this.remoteTextTrackEls().addTrackElement_(s),this.remoteTextTracks().addTrack(s.track),!1===t&&this.ready(()=>this.autoRemoteTextTracks_.addTrack(s.track)),s}removeRemoteTextTrack(e){var t=this.remoteTextTrackEls().getTrackElementByTrack_(e);this.remoteTextTrackEls().removeTrackElement_(t),this.remoteTextTracks().removeTrack(e),this.autoRemoteTextTracks_.removeTrack(e)}getVideoPlaybackQuality(){return{}}requestPictureInPicture(){return Promise.reject()}disablePictureInPicture(){return!0}setDisablePictureInPicture(){}requestVideoFrameCallback(e){const t=m++;return!this.isReady_||this.paused()?(this.queuedHanders_.add(t),this.one("playing",()=>{this.queuedHanders_.has(t)&&(this.queuedHanders_.delete(t),e())})):this.requestNamedAnimationFrame(t,e),t}cancelVideoFrameCallback(e){this.queuedHanders_.has(e)?this.queuedHanders_.delete(e):this.cancelNamedAnimationFrame(e)}setPoster(){}playsinline(){}setPlaysinline(){}overrideNativeAudioTracks(e){}overrideNativeVideoTracks(e){}canPlayType(e){return""}static canPlayType(e){return""}static canPlaySource(e,t){return j.canPlayType(e.type)}static isTech(e){return e.prototype instanceof j||e instanceof j||e===j}static registerTech(e,t){if(j.techs_||(j.techs_={}),!j.isTech(t))throw new Error(`Tech ${e} must be a Tech`);if(!j.canPlayType)throw new Error("Techs must have a static canPlayType method on them");if(j.canPlaySource)return e=y(e),j.techs_[e]=t,j.techs_[xt(e)]=t,"Tech"!==e&&j.defaultTechOrder_.push(e),t;throw new Error("Techs must have a static canPlaySource method on them")}static getTech(e){if(e)return j.techs_&&j.techs_[e]?j.techs_[e]:(e=y(e),window&&window.videojs&&window.videojs[e]?(l.warn(`The ${e} tech was added to the videojs object when it should be registered using videojs.registerTech(name, tech)`),window.videojs[e]):void 0)}}E.names.forEach(function(e){const t=E[e];j.prototype[t.getterName]=function(){return this[t.privateName]=this[t.privateName]||new t.ListClass,this[t.privateName]}}),j.prototype.featuresVolumeControl=!0,j.prototype.featuresMuteControl=!0,j.prototype.featuresFullscreenResize=!1,j.prototype.featuresPlaybackRate=!1,j.prototype.featuresProgressEvents=!1,j.prototype.featuresSourceset=!1,j.prototype.featuresTimeupdateEvents=!1,j.prototype.featuresNativeTextTracks=!1,j.prototype.featuresVideoFrameCallback=!1,j.withSourceHandlers=function(r){r.registerSourceHandler=function(e,t){let s=r.sourceHandlers;s=s||(r.sourceHandlers=[]),void 0===t&&(t=s.length),s.splice(t,0,e)},r.canPlayType=function(t){var s,i=r.sourceHandlers||[];for(let e=0;e<i.length;e++)if(s=i[e].canPlayType(t))return s;return""},r.selectSourceHandler=function(t,s){var i=r.sourceHandlers||[];for(let e=0;e<i.length;e++)if(i[e].canHandleSource(t,s))return i[e];return null},r.canPlaySource=function(e,t){var s=r.selectSourceHandler(e,t);return s?s.canHandleSource(e,t):""};["seekable","seeking","duration"].forEach(function(e){const t=this[e];"function"==typeof t&&(this[e]=function(){return this.sourceHandler_&&this.sourceHandler_[e]?this.sourceHandler_[e].apply(this.sourceHandler_,arguments):t.apply(this,arguments)})},r.prototype),r.prototype.setSource=function(e){let t=r.selectSourceHandler(e,this.options_);t||(r.nativeSourceHandler?t=r.nativeSourceHandler:l.error("No source handler found for the current source.")),this.disposeSourceHandler(),this.off("dispose",this.disposeSourceHandler_),t!==r.nativeSourceHandler&&(this.currentSource_=e),this.sourceHandler_=t.handleSource(e,this,this.options_),this.one("dispose",this.disposeSourceHandler_)},r.prototype.disposeSourceHandler=function(){this.currentSource_&&(this.clearTracks(["audio","video"]),this.currentSource_=null),this.cleanupAutoTextTracks(),this.sourceHandler_&&(this.sourceHandler_.dispose&&this.sourceHandler_.dispose(),this.sourceHandler_=null)}},b.registerComponent("Tech",j),j.registerTech("Tech",j),j.defaultTechOrder_=[];const ti={},si={},ii={};function ri(e,t,s){e.setTimeout(()=>function s(i={},e=[],r,n,a=[],o=!1){const[t,...l]=e;if("string"==typeof t)s(i,ti[t],r,n,a,o);else if(t){const h=ci(n,t);if(!h.setSource)return a.push(h),s(i,l,r,n,a,o);h.setSource(Object.assign({},i),function(e,t){if(e)return s(i,l,r,n,a,o);a.push(h),s(t,i.type===t.type?l:ti[t.type],r,n,a,o)})}else l.length?s(i,l,r,n,a,o):o?r(i,a):s(i,ti["*"],r,n,a,!0)}(t,ti[t.type],s,e),1)}function ni(e,t,s,i=null){var r="call"+y(s),r=e.reduce(hi(r),i),i=r===ii,t=i?null:t[s](r),n=e,a=s,o=t,l=i;for(let e=n.length-1;0<=e;e--){var h=n[e];h[a]&&h[a](l,o)}return t}const ai={buffered:1,currentTime:1,duration:1,muted:1,played:1,paused:1,seekable:1,volume:1,ended:1},oi={setCurrentTime:1,setMuted:1,setVolume:1},li={play:1,pause:1};function hi(s){return(e,t)=>e===ii?ii:t[s]?t[s](e):e}function ci(e,t){var s=si[e.id()];let i=null;if(null==s)i=t(e),si[e.id()]=[[t,i]];else{for(let e=0;e<s.length;e++){var[r,n]=s[e];r===t&&(i=n)}null===i&&(i=t(e),s.push([t,i]))}return i}function di(e){if(Array.isArray(e)){let t=[];e.forEach(function(e){e=di(e),Array.isArray(e)?t=t.concat(e):n(e)&&t.push(e)}),e=t}else e="string"==typeof e&&e.trim()?[gi({src:e})]:n(e)&&"string"==typeof e.src&&e.src&&e.src.trim()?[gi(e)]:[];return e}const ui={opus:"video/ogg",ogv:"video/ogg",mp4:"video/mp4",mov:"video/mp4",m4v:"video/mp4",mkv:"video/x-matroska",m4a:"audio/mp4",mp3:"audio/mpeg",aac:"audio/aac",caf:"audio/x-caf",flac:"audio/flac",oga:"audio/ogg",wav:"audio/wav",m3u8:"application/x-mpegURL",mpd:"application/dash+xml",jpg:"image/jpeg",jpeg:"image/jpeg",gif:"image/gif",png:"image/png",svg:"image/svg+xml",webp:"image/webp"},pi=function(e=""){e=os(e);return ui[e.toLowerCase()]||""};function gi(e){var t;return e.type||(t=pi(e.src))&&(e.type=t),e}class mi extends b{constructor(i,e,t){if(super(i,h({createEl:!1},e),t),e.playerOptions.sources&&0!==e.playerOptions.sources.length)i.src(e.playerOptions.sources);else for(let t=0,s=e.playerOptions.techOrder;t<s.length;t++){var r=y(s[t]);let e=j.getTech(r);if((e=r?e:b.getComponent(r))&&e.isSupported()){i.loadTech_(r);break}}}}b.registerComponent("MediaLoader",mi);class vi extends b{constructor(e,t){super(e,t),this.options_.controlText&&this.controlText(this.options_.controlText),this.handleMouseOver_=e=>this.handleMouseOver(e),this.handleMouseOut_=e=>this.handleMouseOut(e),this.handleClick_=e=>this.handleClick(e),this.handleKeyDown_=e=>this.handleKeyDown(e),this.emitTapEvents(),this.enable()}createEl(e="div",t={},s={}){t=Object.assign({className:this.buildCSSClass(),tabIndex:0},t),"button"===e&&l.error(`Creating a ClickableComponent with an HTML element of ${e} is not supported; use a Button instead.`),s=Object.assign({role:"button"},s),this.tabIndex_=t.tabIndex;e=p(e,t,s);return this.player_.options_.experimentalSvgIcons||e.appendChild(p("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),this.createControlTextEl(e),e}dispose(){this.controlTextEl_=null,super.dispose()}createControlTextEl(e){return this.controlTextEl_=p("span",{className:"vjs-control-text"},{"aria-live":"polite"}),e&&e.appendChild(this.controlTextEl_),this.controlText(this.controlText_,e),this.controlTextEl_}controlText(e,t=this.el()){if(void 0===e)return this.controlText_||"Need Text";var s=this.localize(e);this.controlText_=e,we(this.controlTextEl_,s),this.nonIconControl||this.player_.options_.noUITitleAttributes||t.setAttribute("title",s)}buildCSSClass(){return"vjs-control vjs-button "+super.buildCSSClass()}enable(){this.enabled_||(this.enabled_=!0,this.removeClass("vjs-disabled"),this.el_.setAttribute("aria-disabled","false"),"undefined"!=typeof this.tabIndex_&&this.el_.setAttribute("tabIndex",this.tabIndex_),this.on(["tap","click"],this.handleClick_),this.on("keydown",this.handleKeyDown_))}disable(){this.enabled_=!1,this.addClass("vjs-disabled"),this.el_.setAttribute("aria-disabled","true"),"undefined"!=typeof this.tabIndex_&&this.el_.removeAttribute("tabIndex"),this.off("mouseover",this.handleMouseOver_),this.off("mouseout",this.handleMouseOut_),this.off(["tap","click"],this.handleClick_),this.off("keydown",this.handleKeyDown_)}handleLanguagechange(){this.controlText(this.controlText_)}handleClick(e){this.options_.clickHandler&&this.options_.clickHandler.call(this,arguments)}handleKeyDown(e){a.isEventKey(e,"Space")||a.isEventKey(e,"Enter")?(e.preventDefault(),e.stopPropagation(),this.trigger("click")):super.handleKeyDown(e)}}b.registerComponent("ClickableComponent",vi);class _i extends vi{constructor(e,t){super(e,t),this.update(),this.update_=e=>this.update(e),e.on("posterchange",this.update_)}dispose(){this.player().off("posterchange",this.update_),super.dispose()}createEl(){return p("div",{className:"vjs-poster"})}crossOrigin(e){if("undefined"==typeof e)return this.$("img")?this.$("img").crossOrigin:this.player_.tech_&&this.player_.tech_.isReady_?this.player_.crossOrigin():this.player_.options_.crossOrigin||this.player_.options_.crossorigin||null;null!==e&&"anonymous"!==e&&"use-credentials"!==e?this.player_.log.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${e}"`):this.$("img")&&(this.$("img").crossOrigin=e)}update(e){var t=this.player().poster();this.setSrc(t),t?this.show():this.hide()}setSrc(e){e?(this.$("img")||this.el_.appendChild(p("picture",{className:"vjs-poster",tabIndex:-1},{},p("img",{loading:"lazy",crossOrigin:this.crossOrigin()},{alt:""}))),this.$("img").src=e):this.el_.textContent=""}handleClick(e){this.player_.controls()&&(this.player_.tech(!0)&&this.player_.tech(!0).focus(),this.player_.paused()?k(this.player_.play()):this.player_.pause())}}_i.prototype.crossorigin=_i.prototype.crossOrigin,b.registerComponent("PosterImage",_i);const fi={monospace:"monospace",sansSerif:"sans-serif",serif:"serif",monospaceSansSerif:'"Andale Mono", "Lucida Console", monospace',monospaceSerif:'"Courier New", monospace',proportionalSansSerif:"sans-serif",proportionalSerif:"serif",casual:'"Comic Sans MS", Impact, fantasy',script:'"Monotype Corsiva", cursive',smallcaps:'"Andale Mono", "Lucida Console", monospace, sans-serif'};function yi(e,t){let s;if(4===e.length)s=e[1]+e[1]+e[2]+e[2]+e[3]+e[3];else{if(7!==e.length)throw new Error("Invalid color code provided, "+e+"; must be formatted as e.g. #f0e or #f604e2.");s=e.slice(1)}return"rgba("+parseInt(s.slice(0,2),16)+","+parseInt(s.slice(2,4),16)+","+parseInt(s.slice(4,6),16)+","+t+")"}function bi(e,t,s){try{e.style[t]=s}catch(e){}}function Ti(e){return e?e+"px":""}class ki extends b{constructor(i,e,t){super(i,e,t);const r=e=>{this.updateDisplayOverlay(),this.updateDisplay(e)};i.on("loadstart",e=>this.toggleDisplay(e)),i.on("texttrackchange",e=>this.updateDisplay(e)),i.on("loadedmetadata",e=>{this.updateDisplayOverlay(),this.preselectTrack(e)}),i.ready(f(this,function(){if(i.tech_&&i.tech_.featuresNativeTextTracks)this.hide();else{i.on("fullscreenchange",r),i.on("playerresize",r);const e=window.screen.orientation||window,s=window.screen.orientation?"change":"orientationchange";e.addEventListener(s,r),i.on("dispose",()=>e.removeEventListener(s,r));var t=this.options_.playerOptions.tracks||[];for(let e=0;e<t.length;e++)this.player_.addRemoteTextTrack(t[e],!0);this.preselectTrack()}}))}preselectTrack(){var t={captions:1,subtitles:1},s=this.player_.textTracks(),i=this.player_.cache_.selectedLanguage;let r,n,a;for(let e=0;e<s.length;e++){var o=s[e];i&&i.enabled&&i.language&&i.language===o.language&&o.kind in t?a=o.kind!==i.kind&&a||o:i&&!i.enabled?(a=null,r=null,n=null):o.default&&("descriptions"!==o.kind||r?o.kind in t&&!n&&(n=o):r=o)}a?a.mode="showing":n?n.mode="showing":r&&(r.mode="showing")}toggleDisplay(){this.player_.tech_&&this.player_.tech_.featuresNativeTextTracks?this.hide():this.show()}createEl(){return super.createEl("div",{className:"vjs-text-track-display"},{translate:"yes","aria-live":"off","aria-atomic":"true"})}clearDisplay(){"function"==typeof window.WebVTT&&window.WebVTT.processCues(window,[],this.el_)}updateDisplay(){var i=this.player_.textTracks(),e=this.options_.allowMultipleShowingTracks;if(this.clearDisplay(),e){var t=[];for(let e=0;e<i.length;++e){var s=i[e];"showing"===s.mode&&t.push(s)}this.updateForTrack(t)}else{let e=null,t=null,s=i.length;for(;s--;){var r=i[s];"showing"===r.mode&&("descriptions"===r.kind?e=r:t=r)}t?("off"!==this.getAttribute("aria-live")&&this.setAttribute("aria-live","off"),this.updateForTrack(t)):e&&("assertive"!==this.getAttribute("aria-live")&&this.setAttribute("aria-live","assertive"),this.updateForTrack(e))}}updateDisplayOverlay(){if(this.player_.videoHeight()&&window.CSS.supports("inset-inline: 10px")){var s=this.player_.currentWidth(),i=this.player_.currentHeight(),r=s/i,n=this.player_.videoWidth()/this.player_.videoHeight();let e=0,t=0;.1<Math.abs(r-n)&&(n<r?e=Math.round((s-i*n)/2):t=Math.round((i-s/n)/2)),bi(this.el_,"insetInline",Ti(e)),bi(this.el_,"insetBlock",Ti(t))}}updateDisplayState(e){var t=this.player_.textTrackSettings.getValues(),s=e.activeCues;let i=s.length;for(;i--;){var r,n=s[i];n&&(n=n.displayState,t.color&&(n.firstChild.style.color=t.color),t.textOpacity&&bi(n.firstChild,"color",yi(t.color||"#fff",t.textOpacity)),t.backgroundColor&&(n.firstChild.style.backgroundColor=t.backgroundColor),t.backgroundOpacity&&bi(n.firstChild,"backgroundColor",yi(t.backgroundColor||"#000",t.backgroundOpacity)),t.windowColor&&(t.windowOpacity?bi(n,"backgroundColor",yi(t.windowColor,t.windowOpacity)):n.style.backgroundColor=t.windowColor),t.edgeStyle&&("dropshadow"===t.edgeStyle?n.firstChild.style.textShadow="2px 2px 3px #222, 2px 2px 4px #222, 2px 2px 5px #222":"raised"===t.edgeStyle?n.firstChild.style.textShadow="1px 1px #222, 2px 2px #222, 3px 3px #222":"depressed"===t.edgeStyle?n.firstChild.style.textShadow="1px 1px #ccc, 0 1px #ccc, -1px -1px #222, 0 -1px #222":"uniform"===t.edgeStyle&&(n.firstChild.style.textShadow="0 0 4px #222, 0 0 4px #222, 0 0 4px #222, 0 0 4px #222")),t.fontPercent&&1!==t.fontPercent&&(r=window.parseFloat(n.style.fontSize),n.style.fontSize=r*t.fontPercent+"px",n.style.height="auto",n.style.top="auto"),t.fontFamily)&&"default"!==t.fontFamily&&("small-caps"===t.fontFamily?n.firstChild.style.fontVariant="small-caps":n.firstChild.style.fontFamily=fi[t.fontFamily])}}updateForTrack(s){if(Array.isArray(s)||(s=[s]),"function"==typeof window.WebVTT&&!s.every(e=>!e.activeCues)){var t=[];for(let e=0;e<s.length;++e){var i=s[e];for(let e=0;e<i.activeCues.length;++e)t.push(i.activeCues[e])}window.WebVTT.processCues(window,t,this.el_);for(let t=0;t<s.length;++t){var r=s[t];for(let e=0;e<r.activeCues.length;++e){var n=r.activeCues[e].displayState;xe(n,"vjs-text-track-cue","vjs-text-track-cue-"+(r.language||t)),r.language&&Oe(n,"lang",r.language)}this.player_.textTrackSettings&&this.updateDisplayState(r)}}}}b.registerComponent("TextTrackDisplay",ki);class Ci extends b{createEl(){var e=this.player_.isAudio(),e=this.localize(e?"Audio Player":"Video Player"),e=p("span",{className:"vjs-control-text",textContent:this.localize("{1} is loading.",[e])}),t=super.createEl("div",{className:"vjs-loading-spinner",dir:"ltr"});return t.appendChild(e),t}handleLanguagechange(){this.$(".vjs-control-text").textContent=this.localize("{1} is loading.",[this.player_.isAudio()?"Audio Player":"Video Player"])}}b.registerComponent("LoadingSpinner",Ci);class P extends vi{createEl(e,t={},s={}){t=p("button",t=Object.assign({className:this.buildCSSClass()},t),s=Object.assign({type:"button"},s));return this.player_.options_.experimentalSvgIcons||t.appendChild(p("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),this.createControlTextEl(t),t}addChild(e,t={}){var s=this.constructor.name;return l.warn(`Adding an actionable (user controllable) child to a Button (${s}) is not supported; use a ClickableComponent instead.`),b.prototype.addChild.call(this,e,t)}enable(){super.enable(),this.el_.removeAttribute("disabled")}disable(){super.disable(),this.el_.setAttribute("disabled","disabled")}handleKeyDown(e){a.isEventKey(e,"Space")||a.isEventKey(e,"Enter")?e.stopPropagation():super.handleKeyDown(e)}}b.registerComponent("Button",P);class wi extends P{constructor(e,t){super(e,t),this.mouseused_=!1,this.setIcon("play"),this.on("mousedown",e=>this.handleMouseDown(e))}buildCSSClass(){return"vjs-big-play-button"}handleClick(e){var t=this.player_.play();if(this.mouseused_&&"clientX"in e&&"clientY"in e)k(t),this.player_.tech(!0)&&this.player_.tech(!0).focus();else{var e=this.player_.getChild("controlBar");const s=e&&e.getChild("playToggle");s?(e=()=>s.focus(),zt(t)?t.then(e,()=>{}):this.setTimeout(e,1)):this.player_.tech(!0).focus()}}handleKeyDown(e){this.mouseused_=!1,super.handleKeyDown(e)}handleMouseDown(e){this.mouseused_=!0}}wi.prototype.controlText_="Play Video",b.registerComponent("BigPlayButton",wi);P;b.registerComponent("CloseButton",class extends P{constructor(e,t){super(e,t),this.setIcon("cancel"),this.controlText(t&&t.controlText||this.localize("Close"))}buildCSSClass(){return"vjs-close-button "+super.buildCSSClass()}handleClick(e){this.trigger({type:"close",bubbles:!1})}handleKeyDown(e){a.isEventKey(e,"Esc")?(e.preventDefault(),e.stopPropagation(),this.trigger("click")):super.handleKeyDown(e)}});class Ei extends P{constructor(e,t={}){super(e,t),t.replay=void 0===t.replay||t.replay,this.setIcon("play"),this.on(e,"play",e=>this.handlePlay(e)),this.on(e,"pause",e=>this.handlePause(e)),t.replay&&this.on(e,"ended",e=>this.handleEnded(e))}buildCSSClass(){return"vjs-play-control "+super.buildCSSClass()}handleClick(e){this.player_.paused()?k(this.player_.play()):this.player_.pause()}handleSeeked(e){this.removeClass("vjs-ended"),this.player_.paused()?this.handlePause(e):this.handlePlay(e)}handlePlay(e){this.removeClass("vjs-ended","vjs-paused"),this.addClass("vjs-playing"),this.setIcon("pause"),this.controlText("Pause")}handlePause(e){this.removeClass("vjs-playing"),this.addClass("vjs-paused"),this.setIcon("play"),this.controlText("Play")}handleEnded(e){this.removeClass("vjs-playing"),this.addClass("vjs-ended"),this.setIcon("replay"),this.controlText("Replay"),this.one(this.player_,"seeked",e=>this.handleSeeked(e))}}Ei.prototype.controlText_="Play",b.registerComponent("PlayToggle",Ei);class Si extends b{constructor(e,t){super(e,t),this.on(e,["timeupdate","ended","seeking"],e=>this.update(e)),this.updateTextNode_()}createEl(){var e=this.buildCSSClass(),t=super.createEl("div",{className:e+" vjs-time-control vjs-control"}),s=p("span",{className:"vjs-control-text",textContent:this.localize(this.labelText_)+" "},{role:"presentation"});return t.appendChild(s),this.contentEl_=p("span",{className:e+"-display"},{role:"presentation"}),t.appendChild(this.contentEl_),t}dispose(){this.contentEl_=null,this.textNode_=null,super.dispose()}update(e){!this.player_.options_.enableSmoothSeeking&&"seeking"===e.type||this.updateContent(e)}updateTextNode_(e=0){e=Rt(e),this.formattedTime_!==e&&(this.formattedTime_=e,this.requestNamedAnimationFrame("TimeDisplay#updateTextNode_",()=>{if(this.contentEl_){let e=this.textNode_;e&&this.contentEl_.firstChild!==e&&(e=null,l.warn("TimeDisplay#updateTextnode_: Prevented replacement of text node element since it was no longer a child of this node. Appending a new node instead.")),this.textNode_=document.createTextNode(this.formattedTime_),this.textNode_&&(e?this.contentEl_.replaceChild(this.textNode_,e):this.contentEl_.appendChild(this.textNode_))}}))}updateContent(e){}}Si.prototype.labelText_="Time",Si.prototype.controlText_="Time",b.registerComponent("TimeDisplay",Si);class xi extends Si{buildCSSClass(){return"vjs-current-time"}updateContent(e){let t;t=this.player_.ended()?this.player_.duration():this.player_.scrubbing()?this.player_.getCache().currentTime:this.player_.currentTime(),this.updateTextNode_(t)}}xi.prototype.labelText_="Current Time",xi.prototype.controlText_="Current Time",b.registerComponent("CurrentTimeDisplay",xi);class ji extends Si{constructor(e,t){super(e,t);t=e=>this.updateContent(e);this.on(e,"durationchange",t),this.on(e,"loadstart",t),this.on(e,"loadedmetadata",t)}buildCSSClass(){return"vjs-duration"}updateContent(e){var t=this.player_.duration();this.updateTextNode_(t)}}ji.prototype.labelText_="Duration",ji.prototype.controlText_="Duration",b.registerComponent("DurationDisplay",ji);class Pi extends b{createEl(){var e=super.createEl("div",{className:"vjs-time-control vjs-time-divider"},{"aria-hidden":!0}),t=super.createEl("div"),s=super.createEl("span",{textContent:"/"});return t.appendChild(s),e.appendChild(t),e}}b.registerComponent("TimeDivider",Pi);class Ii extends Si{constructor(e,t){super(e,t),this.on(e,"durationchange",e=>this.updateContent(e))}buildCSSClass(){return"vjs-remaining-time"}createEl(){var e=super.createEl();return!1!==this.options_.displayNegative&&e.insertBefore(p("span",{},{"aria-hidden":!0},"-"),this.contentEl_),e}updateContent(e){if("number"==typeof this.player_.duration()){let e;e=this.player_.ended()?0:this.player_.remainingTimeDisplay?this.player_.remainingTimeDisplay():this.player_.remainingTime(),this.updateTextNode_(e)}}}Ii.prototype.labelText_="Remaining Time",Ii.prototype.controlText_="Remaining Time",b.registerComponent("RemainingTimeDisplay",Ii);class Mi extends b{constructor(e,t){super(e,t),this.updateShowing(),this.on(this.player(),"durationchange",e=>this.updateShowing(e))}createEl(){var e=super.createEl("div",{className:"vjs-live-control vjs-control"});return this.contentEl_=p("div",{className:"vjs-live-display"},{"aria-live":"off"}),this.contentEl_.appendChild(p("span",{className:"vjs-control-text",textContent:this.localize("Stream Type")+" "})),this.contentEl_.appendChild(document.createTextNode(this.localize("LIVE"))),e.appendChild(this.contentEl_),e}dispose(){this.contentEl_=null,super.dispose()}updateShowing(e){this.player().duration()===1/0?this.show():this.hide()}}b.registerComponent("LiveDisplay",Mi);class Ai extends P{constructor(e,t){super(e,t),this.updateLiveEdgeStatus(),this.player_.liveTracker&&(this.updateLiveEdgeStatusHandler_=e=>this.updateLiveEdgeStatus(e),this.on(this.player_.liveTracker,"liveedgechange",this.updateLiveEdgeStatusHandler_))}createEl(){var e=super.createEl("button",{className:"vjs-seek-to-live-control vjs-control"});return this.setIcon("circle",e),this.textEl_=p("span",{className:"vjs-seek-to-live-text",textContent:this.localize("LIVE")},{"aria-hidden":"true"}),e.appendChild(this.textEl_),e}updateLiveEdgeStatus(){!this.player_.liveTracker||this.player_.liveTracker.atLiveEdge()?(this.setAttribute("aria-disabled",!0),this.addClass("vjs-at-live-edge"),this.controlText("Seek to live, currently playing live")):(this.setAttribute("aria-disabled",!1),this.removeClass("vjs-at-live-edge"),this.controlText("Seek to live, currently behind live"))}handleClick(){this.player_.liveTracker.seekToLiveEdge()}dispose(){this.player_.liveTracker&&this.off(this.player_.liveTracker,"liveedgechange",this.updateLiveEdgeStatusHandler_),this.textEl_=null,super.dispose()}}function Oi(e,t,s){return e=Number(e),Math.min(s,Math.max(t,isNaN(e)?t:e))}Ai.prototype.controlText_="Seek to live, currently playing live",b.registerComponent("SeekToLive",Ai);t=Object.freeze({__proto__:null,clamp:Oi});class Li extends b{constructor(e,t){super(e,t),this.handleMouseDown_=e=>this.handleMouseDown(e),this.handleMouseUp_=e=>this.handleMouseUp(e),this.handleKeyDown_=e=>this.handleKeyDown(e),this.handleClick_=e=>this.handleClick(e),this.handleMouseMove_=e=>this.handleMouseMove(e),this.update_=e=>this.update(e),this.bar=this.getChild(this.options_.barName),this.vertical(!!this.options_.vertical),this.enable()}enabled(){return this.enabled_}enable(){this.enabled()||(this.on("mousedown",this.handleMouseDown_),this.on("touchstart",this.handleMouseDown_),this.on("keydown",this.handleKeyDown_),this.on("click",this.handleClick_),this.on(this.player_,"controlsvisible",this.update),this.playerEvent&&this.on(this.player_,this.playerEvent,this.update),this.removeClass("disabled"),this.setAttribute("tabindex",0),this.enabled_=!0)}disable(){var e;this.enabled()&&(e=this.bar.el_.ownerDocument,this.off("mousedown",this.handleMouseDown_),this.off("touchstart",this.handleMouseDown_),this.off("keydown",this.handleKeyDown_),this.off("click",this.handleClick_),this.off(this.player_,"controlsvisible",this.update_),this.off(e,"mousemove",this.handleMouseMove_),this.off(e,"mouseup",this.handleMouseUp_),this.off(e,"touchmove",this.handleMouseMove_),this.off(e,"touchend",this.handleMouseUp_),this.removeAttribute("tabindex"),this.addClass("disabled"),this.playerEvent&&this.off(this.player_,this.playerEvent,this.update),this.enabled_=!1)}createEl(e,t={},s={}){return t.className=t.className+" vjs-slider",t=Object.assign({tabIndex:0},t),s=Object.assign({role:"slider","aria-valuenow":0,"aria-valuemin":0,"aria-valuemax":100},s),super.createEl(e,t,s)}handleMouseDown(e){var t=this.bar.el_.ownerDocument;"mousedown"===e.type&&e.preventDefault(),"touchstart"!==e.type||c||e.preventDefault(),Ne(),this.addClass("vjs-sliding"),this.trigger("slideractive"),this.on(t,"mousemove",this.handleMouseMove_),this.on(t,"mouseup",this.handleMouseUp_),this.on(t,"touchmove",this.handleMouseMove_),this.on(t,"touchend",this.handleMouseUp_),this.handleMouseMove(e,!0)}handleMouseMove(e){}handleMouseUp(e){var t=this.bar.el_.ownerDocument;De(),this.removeClass("vjs-sliding"),this.trigger("sliderinactive"),this.off(t,"mousemove",this.handleMouseMove_),this.off(t,"mouseup",this.handleMouseUp_),this.off(t,"touchmove",this.handleMouseMove_),this.off(t,"touchend",this.handleMouseUp_),this.update()}update(){if(this.el_&&this.bar){const t=this.getProgress();return t!==this.progress_&&(this.progress_=t,this.requestNamedAnimationFrame("Slider#update",()=>{var e=this.vertical()?"height":"width";this.bar.el().style[e]=(100*t).toFixed(2)+"%"})),t}}getProgress(){return Number(Oi(this.getPercent(),0,1).toFixed(4))}calculateDistance(e){e=He(this.el_,e);return this.vertical()?e.y:e.x}handleKeyDown(e){a.isEventKey(e,"Left")||a.isEventKey(e,"Down")?(e.preventDefault(),e.stopPropagation(),this.stepBack()):a.isEventKey(e,"Right")||a.isEventKey(e,"Up")?(e.preventDefault(),e.stopPropagation(),this.stepForward()):super.handleKeyDown(e)}handleClick(e){e.stopPropagation(),e.preventDefault()}vertical(e){if(void 0===e)return this.vertical_||!1;this.vertical_=!!e,this.vertical_?this.addClass("vjs-slider-vertical"):this.addClass("vjs-slider-horizontal")}}b.registerComponent("Slider",Li);const Ni=(e,t)=>Oi(e/t*100,0,100).toFixed(2)+"%";class Di extends b{constructor(e,t){super(e,t),this.partEls_=[],this.on(e,"progress",e=>this.update(e))}createEl(){var e=super.createEl("div",{className:"vjs-load-progress"}),t=p("span",{className:"vjs-control-text"}),s=p("span",{textContent:this.localize("Loaded")}),i=document.createTextNode(": ");return this.percentageEl_=p("span",{className:"vjs-control-text-loaded-percentage",textContent:"0%"}),e.appendChild(t),t.appendChild(s),t.appendChild(i),t.appendChild(this.percentageEl_),e}dispose(){this.partEls_=null,this.percentageEl_=null,super.dispose()}update(e){this.requestNamedAnimationFrame("LoadProgressBar#update",()=>{var e=this.player_.liveTracker,s=this.player_.buffered(),e=e&&e.isLive()?e.seekableEnd():this.player_.duration(),i=this.player_.bufferedEnd(),r=this.partEls_,e=Ni(i,e);this.percent_!==e&&(this.el_.style.width=e,we(this.percentageEl_,e),this.percent_=e);for(let t=0;t<s.length;t++){var n=s.start(t),a=s.end(t);let e=r[t];e||(e=this.el_.appendChild(p()),r[t]=e),e.dataset.start===n&&e.dataset.end===a||(e.dataset.start=n,e.dataset.end=a,e.style.left=Ni(n,i),e.style.width=Ni(a-n,i))}for(let e=r.length;e>s.length;e--)this.el_.removeChild(r[e-1]);r.length=s.length})}}b.registerComponent("LoadProgressBar",Di);class Bi extends b{constructor(e,t){super(e,t),this.update=r(f(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-time-tooltip"},{"aria-hidden":"true"})}update(i,r,n){var a=Re(this.el_),o=Be(this.player_.el()),r=i.width*r;if(o&&a){let e=i.left-o.left+r,t=i.width-r+(o.right-i.right),s=(t||(t=i.width-r,e=r),a.width/2);e<s?s+=s-e:t<s&&(s=t),s<0?s=0:s>a.width&&(s=a.width),s=Math.round(s),this.el_.style.right=`-${s}px`,this.write(n)}}write(e){we(this.el_,e)}updateTime(r,n,a,o){this.requestNamedAnimationFrame("TimeTooltip#updateTime",()=>{let e;var t,s,i=this.player_.duration();e=this.player_.liveTracker&&this.player_.liveTracker.isLive()?((s=(t=this.player_.liveTracker.liveWindow())-n*t)<1?"":"-")+Rt(s,t):Rt(a,i),this.update(r,n,e),o&&o()})}}b.registerComponent("TimeTooltip",Bi);class Ri extends b{constructor(e,t){super(e,t),this.setIcon("circle"),this.update=r(f(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-play-progress vjs-slider-bar"},{"aria-hidden":"true"})}update(e,t){var s,i=this.getChild("timeTooltip");i&&(s=this.player_.scrubbing()?this.player_.getCache().currentTime:this.player_.currentTime(),i.updateTime(e,t,s))}}Ri.prototype.options_={children:[]},u||o||Ri.prototype.options_.children.push("timeTooltip"),b.registerComponent("PlayProgressBar",Ri);class Hi extends b{constructor(e,t){super(e,t),this.update=r(f(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-mouse-display"})}update(e,t){var s=t*this.player_.duration();this.getChild("timeTooltip").updateTime(e,t,s,()=>{this.el_.style.left=e.width*t+"px"})}}Hi.prototype.options_={children:["timeTooltip"]},b.registerComponent("MouseTimeDisplay",Hi);class Fi extends Li{constructor(e,t){super(e,t),this.setEventHandlers_()}setEventHandlers_(){this.update_=f(this,this.update),this.update=r(this.update_,30),this.on(this.player_,["ended","durationchange","timeupdate"],this.update),this.player_.liveTracker&&this.on(this.player_.liveTracker,"liveedgechange",this.update),this.updateInterval=null,this.enableIntervalHandler_=e=>this.enableInterval_(e),this.disableIntervalHandler_=e=>this.disableInterval_(e),this.on(this.player_,["playing"],this.enableIntervalHandler_),this.on(this.player_,["ended","pause","waiting"],this.disableIntervalHandler_),"hidden"in document&&"visibilityState"in document&&this.on(document,"visibilitychange",this.toggleVisibility_)}toggleVisibility_(e){"hidden"===document.visibilityState?(this.cancelNamedAnimationFrame("SeekBar#update"),this.cancelNamedAnimationFrame("Slider#update"),this.disableInterval_(e)):(this.player_.ended()||this.player_.paused()||this.enableInterval_(),this.update())}enableInterval_(){this.updateInterval||(this.updateInterval=this.setInterval(this.update,30))}disableInterval_(e){this.player_.liveTracker&&this.player_.liveTracker.isLive()&&e&&"ended"!==e.type||this.updateInterval&&(this.clearInterval(this.updateInterval),this.updateInterval=null)}createEl(){return super.createEl("div",{className:"vjs-progress-holder"},{"aria-label":this.localize("Progress Bar")})}update(e){if("hidden"!==document.visibilityState){const i=super.update();return this.requestNamedAnimationFrame("SeekBar#update",()=>{var e=this.player_.ended()?this.player_.duration():this.getCurrentTime_(),t=this.player_.liveTracker;let s=this.player_.duration();t&&t.isLive()&&(s=this.player_.liveTracker.liveCurrentTime()),this.percent_!==i&&(this.el_.setAttribute("aria-valuenow",(100*i).toFixed(2)),this.percent_=i),this.currentTime_===e&&this.duration_===s||(this.el_.setAttribute("aria-valuetext",this.localize("progress bar timing: currentTime={1} duration={2}",[Rt(e,s),Rt(s,s)],"{1} of {2}")),this.currentTime_=e,this.duration_=s),this.bar&&this.bar.update(Be(this.el()),this.getProgress())}),i}}userSeek_(e){this.player_.liveTracker&&this.player_.liveTracker.isLive()&&this.player_.liveTracker.nextSeekedFromUser(),this.player_.currentTime(e)}getCurrentTime_(){return this.player_.scrubbing()?this.player_.getCache().currentTime:this.player_.currentTime()}getPercent(){var e=this.getCurrentTime_();let t;var s=this.player_.liveTracker;return s&&s.isLive()?(t=(e-s.seekableStart())/s.liveWindow(),s.atLiveEdge()&&(t=1)):t=e/this.player_.duration(),t}handleMouseDown(e){Ue(e)&&(e.stopPropagation(),this.videoWasPlaying=!this.player_.paused(),this.player_.pause(),super.handleMouseDown(e))}handleMouseMove(t,s=!1){if(Ue(t)&&!isNaN(this.player_.duration())){s||this.player_.scrubbing()||this.player_.scrubbing(!0);let e;s=this.calculateDistance(t),t=this.player_.liveTracker;if(t&&t.isLive()){if(.99<=s)return void t.seekToLiveEdge();var i=t.seekableStart(),r=t.liveCurrentTime();if((e=(e=(e=i+s*t.liveWindow())>=r?r:e)<=i?i+.1:e)===1/0)return}else(e=s*this.player_.duration())===this.player_.duration()&&(e-=.1);this.userSeek_(e),this.player_.options_.enableSmoothSeeking&&this.update()}}enable(){super.enable();var e=this.getChild("mouseTimeDisplay");e&&e.show()}disable(){super.disable();var e=this.getChild("mouseTimeDisplay");e&&e.hide()}handleMouseUp(e){super.handleMouseUp(e),e&&e.stopPropagation(),this.player_.scrubbing(!1),this.player_.trigger({type:"timeupdate",target:this,manuallyTriggered:!0}),this.videoWasPlaying?k(this.player_.play()):this.update_()}stepForward(){this.userSeek_(this.player_.currentTime()+5)}stepBack(){this.userSeek_(this.player_.currentTime()-5)}handleAction(e){this.player_.paused()?this.player_.play():this.player_.pause()}handleKeyDown(e){var t,s=this.player_.liveTracker;a.isEventKey(e,"Space")||a.isEventKey(e,"Enter")?(e.preventDefault(),e.stopPropagation(),this.handleAction(e)):a.isEventKey(e,"Home")?(e.preventDefault(),e.stopPropagation(),this.userSeek_(0)):a.isEventKey(e,"End")?(e.preventDefault(),e.stopPropagation(),s&&s.isLive()?this.userSeek_(s.liveCurrentTime()):this.userSeek_(this.player_.duration())):/^[0-9]$/.test(a(e))?(e.preventDefault(),e.stopPropagation(),t=10*(a.codes[a(e)]-a.codes[0])/100,s&&s.isLive()?this.userSeek_(s.seekableStart()+s.liveWindow()*t):this.userSeek_(this.player_.duration()*t)):a.isEventKey(e,"PgDn")?(e.preventDefault(),e.stopPropagation(),this.userSeek_(this.player_.currentTime()-60)):a.isEventKey(e,"PgUp")?(e.preventDefault(),e.stopPropagation(),this.userSeek_(this.player_.currentTime()+60)):super.handleKeyDown(e)}dispose(){this.disableInterval_(),this.off(this.player_,["ended","durationchange","timeupdate"],this.update),this.player_.liveTracker&&this.off(this.player_.liveTracker,"liveedgechange",this.update),this.off(this.player_,["playing"],this.enableIntervalHandler_),this.off(this.player_,["ended","pause","waiting"],this.disableIntervalHandler_),"hidden"in document&&"visibilityState"in document&&this.off(document,"visibilitychange",this.toggleVisibility_),super.dispose()}}Fi.prototype.options_={children:["loadProgressBar","playProgressBar"],barName:"playProgressBar"},u||o||Fi.prototype.options_.children.splice(1,0,"mouseTimeDisplay"),b.registerComponent("SeekBar",Fi);class Vi extends b{constructor(e,t){super(e,t),this.handleMouseMove=r(f(this,this.handleMouseMove),30),this.throttledHandleMouseSeek=r(f(this,this.handleMouseSeek),30),this.handleMouseUpHandler_=e=>this.handleMouseUp(e),this.handleMouseDownHandler_=e=>this.handleMouseDown(e),this.enable()}createEl(){return super.createEl("div",{className:"vjs-progress-control vjs-control"})}handleMouseMove(e){var t,s,i,r,n=this.getChild("seekBar");n&&(t=n.getChild("playProgressBar"),s=n.getChild("mouseTimeDisplay"),t||s)&&(i=Re(r=n.el()),r=Oi(r=He(r,e).x,0,1),s&&s.update(i,r),t)&&t.update(i,n.getProgress())}handleMouseSeek(e){var t=this.getChild("seekBar");t&&t.handleMouseMove(e)}enabled(){return this.enabled_}disable(){var e;this.children().forEach(e=>e.disable&&e.disable()),this.enabled()&&(this.off(["mousedown","touchstart"],this.handleMouseDownHandler_),this.off(this.el_,"mousemove",this.handleMouseMove),this.removeListenersAddedOnMousedownAndTouchstart(),this.addClass("disabled"),this.enabled_=!1,this.player_.scrubbing())&&(e=this.getChild("seekBar"),this.player_.scrubbing(!1),e.videoWasPlaying)&&k(this.player_.play())}enable(){this.children().forEach(e=>e.enable&&e.enable()),this.enabled()||(this.on(["mousedown","touchstart"],this.handleMouseDownHandler_),this.on(this.el_,"mousemove",this.handleMouseMove),this.removeClass("disabled"),this.enabled_=!0)}removeListenersAddedOnMousedownAndTouchstart(){var e=this.el_.ownerDocument;this.off(e,"mousemove",this.throttledHandleMouseSeek),this.off(e,"touchmove",this.throttledHandleMouseSeek),this.off(e,"mouseup",this.handleMouseUpHandler_),this.off(e,"touchend",this.handleMouseUpHandler_)}handleMouseDown(e){var t=this.el_.ownerDocument,s=this.getChild("seekBar");s&&s.handleMouseDown(e),this.on(t,"mousemove",this.throttledHandleMouseSeek),this.on(t,"touchmove",this.throttledHandleMouseSeek),this.on(t,"mouseup",this.handleMouseUpHandler_),this.on(t,"touchend",this.handleMouseUpHandler_)}handleMouseUp(e){var t=this.getChild("seekBar");t&&t.handleMouseUp(e),this.removeListenersAddedOnMousedownAndTouchstart()}}Vi.prototype.options_={children:["seekBar"]},b.registerComponent("ProgressControl",Vi);class zi extends P{constructor(e,t){super(e,t),this.setIcon("picture-in-picture-enter"),this.on(e,["enterpictureinpicture","leavepictureinpicture"],e=>this.handlePictureInPictureChange(e)),this.on(e,["disablepictureinpicturechanged","loadedmetadata"],e=>this.handlePictureInPictureEnabledChange(e)),this.on(e,["loadedmetadata","audioonlymodechange","audiopostermodechange"],()=>this.handlePictureInPictureAudioModeChange()),this.disable()}buildCSSClass(){return"vjs-picture-in-picture-control vjs-hidden "+super.buildCSSClass()}handlePictureInPictureAudioModeChange(){"audio"===this.player_.currentType().substring(0,5)||this.player_.audioPosterMode()||this.player_.audioOnlyMode()?(this.player_.isInPictureInPicture()&&this.player_.exitPictureInPicture(),this.hide()):this.show()}handlePictureInPictureEnabledChange(){document.pictureInPictureEnabled&&!1===this.player_.disablePictureInPicture()||this.player_.options_.enableDocumentPictureInPicture&&"documentPictureInPicture"in window?this.enable():this.disable()}handlePictureInPictureChange(e){this.player_.isInPictureInPicture()?(this.setIcon("picture-in-picture-exit"),this.controlText("Exit Picture-in-Picture")):(this.setIcon("picture-in-picture-enter"),this.controlText("Picture-in-Picture")),this.handlePictureInPictureEnabledChange()}handleClick(e){this.player_.isInPictureInPicture()?this.player_.exitPictureInPicture():this.player_.requestPictureInPicture()}show(){"function"==typeof document.exitPictureInPicture&&super.show()}}zi.prototype.controlText_="Picture-in-Picture",b.registerComponent("PictureInPictureToggle",zi);class qi extends P{constructor(e,t){super(e,t),this.setIcon("fullscreen-enter"),this.on(e,"fullscreenchange",e=>this.handleFullscreenChange(e)),!1===document[e.fsApi_.fullscreenEnabled]&&this.disable()}buildCSSClass(){return"vjs-fullscreen-control "+super.buildCSSClass()}handleFullscreenChange(e){this.player_.isFullscreen()?(this.controlText("Exit Fullscreen"),this.setIcon("fullscreen-exit")):(this.controlText("Fullscreen"),this.setIcon("fullscreen-enter"))}handleClick(e){this.player_.isFullscreen()?this.player_.exitFullscreen():this.player_.requestFullscreen()}}qi.prototype.controlText_="Fullscreen",b.registerComponent("FullscreenToggle",qi);class $i extends b{createEl(){var e=super.createEl("div",{className:"vjs-volume-level"});return this.setIcon("circle",e),e.appendChild(super.createEl("span",{className:"vjs-control-text"})),e}}b.registerComponent("VolumeLevel",$i);class Ui extends b{constructor(e,t){super(e,t),this.update=r(f(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-volume-tooltip"},{"aria-hidden":"true"})}update(t,s,i,e){if(!i){var i=Be(this.el_),r=Be(this.player_.el()),s=t.width*s;if(!r||!i)return;var n=t.left-r.left+s,s=t.width-s+(r.right-t.right);let e=i.width/2;n<e?e+=e-n:s<e&&(e=s),e<0?e=0:e>i.width&&(e=i.width),this.el_.style.right=`-${e}px`}this.write(e+"%")}write(e){we(this.el_,e)}updateVolume(e,t,s,i,r){this.requestNamedAnimationFrame("VolumeLevelTooltip#updateVolume",()=>{this.update(e,t,s,i.toFixed(0)),r&&r()})}}b.registerComponent("VolumeLevelTooltip",Ui);class Ki extends b{constructor(e,t){super(e,t),this.update=r(f(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-mouse-display"})}update(e,t,s){var i=100*t;this.getChild("volumeLevelTooltip").updateVolume(e,t,s,i,()=>{s?this.el_.style.bottom=e.height*t+"px":this.el_.style.left=e.width*t+"px"})}}Ki.prototype.options_={children:["volumeLevelTooltip"]},b.registerComponent("MouseVolumeLevelDisplay",Ki);class Wi extends Li{constructor(e,t){super(e,t),this.on("slideractive",e=>this.updateLastVolume_(e)),this.on(e,"volumechange",e=>this.updateARIAAttributes(e)),e.ready(()=>this.updateARIAAttributes())}createEl(){return super.createEl("div",{className:"vjs-volume-bar vjs-slider-bar"},{"aria-label":this.localize("Volume Level"),"aria-live":"polite"})}handleMouseDown(e){Ue(e)&&super.handleMouseDown(e)}handleMouseMove(e){var t,s,i,r=this.getChild("mouseVolumeLevelDisplay");r&&(t=Be(i=this.el()),s=this.vertical(),i=He(i,e),i=Oi(i=s?i.y:i.x,0,1),r.update(t,i,s)),Ue(e)&&(this.checkMuted(),this.player_.volume(this.calculateDistance(e)))}checkMuted(){this.player_.muted()&&this.player_.muted(!1)}getPercent(){return this.player_.muted()?0:this.player_.volume()}stepForward(){this.checkMuted(),this.player_.volume(this.player_.volume()+.1)}stepBack(){this.checkMuted(),this.player_.volume(this.player_.volume()-.1)}updateARIAAttributes(e){var t=this.player_.muted()?0:this.volumeAsPercentage_();this.el_.setAttribute("aria-valuenow",t),this.el_.setAttribute("aria-valuetext",t+"%")}volumeAsPercentage_(){return Math.round(100*this.player_.volume())}updateLastVolume_(){const e=this.player_.volume();this.one("sliderinactive",()=>{0===this.player_.volume()&&this.player_.lastVolume_(e)})}}Wi.prototype.options_={children:["volumeLevel"],barName:"volumeLevel"},u||o||Wi.prototype.options_.children.splice(0,0,"mouseVolumeLevelDisplay"),Wi.prototype.playerEvent="volumechange",b.registerComponent("VolumeBar",Wi);class Xi extends b{constructor(e,t={}){var s,i;t.vertical=t.vertical||!1,"undefined"!=typeof t.volumeBar&&!G(t.volumeBar)||(t.volumeBar=t.volumeBar||{},t.volumeBar.vertical=t.vertical),super(e,t),s=this,(i=e).tech_&&!i.tech_.featuresVolumeControl&&s.addClass("vjs-hidden"),s.on(i,"loadstart",function(){i.tech_.featuresVolumeControl?s.removeClass("vjs-hidden"):s.addClass("vjs-hidden")}),this.throttledHandleMouseMove=r(f(this,this.handleMouseMove),30),this.handleMouseUpHandler_=e=>this.handleMouseUp(e),this.on("mousedown",e=>this.handleMouseDown(e)),this.on("touchstart",e=>this.handleMouseDown(e)),this.on("mousemove",e=>this.handleMouseMove(e)),this.on(this.volumeBar,["focus","slideractive"],()=>{this.volumeBar.addClass("vjs-slider-active"),this.addClass("vjs-slider-active"),this.trigger("slideractive")}),this.on(this.volumeBar,["blur","sliderinactive"],()=>{this.volumeBar.removeClass("vjs-slider-active"),this.removeClass("vjs-slider-active"),this.trigger("sliderinactive")})}createEl(){let e="vjs-volume-horizontal";return this.options_.vertical&&(e="vjs-volume-vertical"),super.createEl("div",{className:"vjs-volume-control vjs-control "+e})}handleMouseDown(e){var t=this.el_.ownerDocument;this.on(t,"mousemove",this.throttledHandleMouseMove),this.on(t,"touchmove",this.throttledHandleMouseMove),this.on(t,"mouseup",this.handleMouseUpHandler_),this.on(t,"touchend",this.handleMouseUpHandler_)}handleMouseUp(e){var t=this.el_.ownerDocument;this.off(t,"mousemove",this.throttledHandleMouseMove),this.off(t,"touchmove",this.throttledHandleMouseMove),this.off(t,"mouseup",this.handleMouseUpHandler_),this.off(t,"touchend",this.handleMouseUpHandler_)}handleMouseMove(e){this.volumeBar.handleMouseMove(e)}}Xi.prototype.options_={children:["volumeBar"]},b.registerComponent("VolumeControl",Xi);class Gi extends P{constructor(e,t){var s,i;super(e,t),s=this,(i=e).tech_&&!i.tech_.featuresMuteControl&&s.addClass("vjs-hidden"),s.on(i,"loadstart",function(){i.tech_.featuresMuteControl?s.removeClass("vjs-hidden"):s.addClass("vjs-hidden")}),this.on(e,["loadstart","volumechange"],e=>this.update(e))}buildCSSClass(){return"vjs-mute-control "+super.buildCSSClass()}handleClick(e){var t=this.player_.volume(),s=this.player_.lastVolume_();0===t?(this.player_.volume(s<.1?.1:s),this.player_.muted(!1)):this.player_.muted(!this.player_.muted())}update(e){this.updateIcon_(),this.updateControlText_()}updateIcon_(){var e=this.player_.volume();let t=3;this.setIcon("volume-high"),u&&this.player_.tech_&&this.player_.tech_.el_&&this.player_.muted(this.player_.tech_.el_.muted),0===e||this.player_.muted()?(this.setIcon("volume-mute"),t=0):e<.33?(this.setIcon("volume-low"),t=1):e<.67&&(this.setIcon("volume-medium"),t=2),je(this.el_,[0,1,2,3].reduce((e,t)=>e+`${t?" ":""}vjs-vol-`+t,"")),xe(this.el_,"vjs-vol-"+t)}updateControlText_(){var e=this.player_.muted()||0===this.player_.volume()?"Unmute":"Mute";this.controlText()!==e&&this.controlText(e)}}Gi.prototype.controlText_="Mute",b.registerComponent("MuteToggle",Gi);class Yi extends b{constructor(e,t={}){"undefined"!=typeof t.inline?t.inline=t.inline:t.inline=!0,"undefined"!=typeof t.volumeControl&&!G(t.volumeControl)||(t.volumeControl=t.volumeControl||{},t.volumeControl.vertical=!t.inline),super(e,t),this.handleKeyPressHandler_=e=>this.handleKeyPress(e),this.on(e,["loadstart"],e=>this.volumePanelState_(e)),this.on(this.muteToggle,"keyup",e=>this.handleKeyPress(e)),this.on(this.volumeControl,"keyup",e=>this.handleVolumeControlKeyUp(e)),this.on("keydown",e=>this.handleKeyPress(e)),this.on("mouseover",e=>this.handleMouseOver(e)),this.on("mouseout",e=>this.handleMouseOut(e)),this.on(this.volumeControl,["slideractive"],this.sliderActive_),this.on(this.volumeControl,["sliderinactive"],this.sliderInactive_)}sliderActive_(){this.addClass("vjs-slider-active")}sliderInactive_(){this.removeClass("vjs-slider-active")}volumePanelState_(){this.volumeControl.hasClass("vjs-hidden")&&this.muteToggle.hasClass("vjs-hidden")&&this.addClass("vjs-hidden"),this.volumeControl.hasClass("vjs-hidden")&&!this.muteToggle.hasClass("vjs-hidden")&&this.addClass("vjs-mute-toggle-only")}createEl(){let e="vjs-volume-panel-horizontal";return this.options_.inline||(e="vjs-volume-panel-vertical"),super.createEl("div",{className:"vjs-volume-panel vjs-control "+e})}dispose(){this.handleMouseOut(),super.dispose()}handleVolumeControlKeyUp(e){a.isEventKey(e,"Esc")&&this.muteToggle.focus()}handleMouseOver(e){this.addClass("vjs-hover"),v(document,"keyup",this.handleKeyPressHandler_)}handleMouseOut(e){this.removeClass("vjs-hover"),_(document,"keyup",this.handleKeyPressHandler_)}handleKeyPress(e){a.isEventKey(e,"Esc")&&this.handleMouseOut()}}Yi.prototype.options_={children:["muteToggle","volumeControl"]},b.registerComponent("VolumePanel",Yi);class Qi extends P{constructor(e,t){super(e,t),this.validOptions=[5,10,30],this.skipTime=this.getSkipForwardTime(),this.skipTime&&this.validOptions.includes(this.skipTime)?(this.setIcon("forward-"+this.skipTime),this.controlText(this.localize("Skip forward {1} seconds",[this.skipTime.toLocaleString(e.language())])),this.show()):this.hide()}getSkipForwardTime(){var e=this.options_.playerOptions;return e.controlBar&&e.controlBar.skipButtons&&e.controlBar.skipButtons.forward}buildCSSClass(){return`vjs-skip-forward-${this.getSkipForwardTime()} `+super.buildCSSClass()}handleClick(e){if(!isNaN(this.player_.duration())){var t=this.player_.currentTime(),s=this.player_.liveTracker,s=s&&s.isLive()?s.seekableEnd():this.player_.duration();let e;e=t+this.skipTime<=s?t+this.skipTime:s,this.player_.currentTime(e)}}handleLanguagechange(){this.controlText(this.localize("Skip forward {1} seconds",[this.skipTime]))}}Qi.prototype.controlText_="Skip Forward",b.registerComponent("SkipForward",Qi);class Ji extends P{constructor(e,t){super(e,t),this.validOptions=[5,10,30],this.skipTime=this.getSkipBackwardTime(),this.skipTime&&this.validOptions.includes(this.skipTime)?(this.setIcon("replay-"+this.skipTime),this.controlText(this.localize("Skip backward {1} seconds",[this.skipTime.toLocaleString(e.language())])),this.show()):this.hide()}getSkipBackwardTime(){var e=this.options_.playerOptions;return e.controlBar&&e.controlBar.skipButtons&&e.controlBar.skipButtons.backward}buildCSSClass(){return`vjs-skip-backward-${this.getSkipBackwardTime()} `+super.buildCSSClass()}handleClick(e){var t=this.player_.currentTime(),s=this.player_.liveTracker,s=s&&s.isLive()&&s.seekableStart();let i;i=s&&t-this.skipTime<=s?s:t>=this.skipTime?t-this.skipTime:0,this.player_.currentTime(i)}handleLanguagechange(){this.controlText(this.localize("Skip backward {1} seconds",[this.skipTime]))}}Ji.prototype.controlText_="Skip Backward",b.registerComponent("SkipBackward",Ji);class Zi extends b{constructor(e,t){super(e,t),t&&(this.menuButton_=t.menuButton),this.focusedChild_=-1,this.on("keydown",e=>this.handleKeyDown(e)),this.boundHandleBlur_=e=>this.handleBlur(e),this.boundHandleTapClick_=e=>this.handleTapClick(e)}addEventListenerForItem(e){e instanceof b&&(this.on(e,"blur",this.boundHandleBlur_),this.on(e,["tap","click"],this.boundHandleTapClick_))}removeEventListenerForItem(e){e instanceof b&&(this.off(e,"blur",this.boundHandleBlur_),this.off(e,["tap","click"],this.boundHandleTapClick_))}removeChild(e){"string"==typeof e&&(e=this.getChild(e)),this.removeEventListenerForItem(e),super.removeChild(e)}addItem(e){e=this.addChild(e);e&&this.addEventListenerForItem(e)}createEl(){var e=this.options_.contentElType||"ul",e=(this.contentEl_=p(e,{className:"vjs-menu-content"}),this.contentEl_.setAttribute("role","menu"),super.createEl("div",{append:this.contentEl_,className:"vjs-menu"}));return e.appendChild(this.contentEl_),v(e,"click",function(e){e.preventDefault(),e.stopImmediatePropagation()}),e}dispose(){this.contentEl_=null,this.boundHandleBlur_=null,this.boundHandleTapClick_=null,super.dispose()}handleBlur(e){const t=e.relatedTarget||document.activeElement;this.children().some(e=>e.el()===t)||(e=this.menuButton_)&&e.buttonPressed_&&t!==e.el().firstChild&&e.unpressButton()}handleTapClick(t){var e;this.menuButton_&&(this.menuButton_.unpressButton(),e=this.children(),Array.isArray(e))&&(e=e.filter(e=>e.el()===t.target)[0])&&"CaptionSettingsMenuItem"!==e.name()&&this.menuButton_.focus()}handleKeyDown(e){a.isEventKey(e,"Left")||a.isEventKey(e,"Down")?(e.preventDefault(),e.stopPropagation(),this.stepForward()):(a.isEventKey(e,"Right")||a.isEventKey(e,"Up"))&&(e.preventDefault(),e.stopPropagation(),this.stepBack())}stepForward(){let e=0;void 0!==this.focusedChild_&&(e=this.focusedChild_+1),this.focus(e)}stepBack(){let e=0;void 0!==this.focusedChild_&&(e=this.focusedChild_-1),this.focus(e)}focus(e=0){var t=this.children().slice();t.length&&t[0].hasClass("vjs-menu-title")&&t.shift(),0<t.length&&(e<0?e=0:e>=t.length&&(e=t.length-1),t[this.focusedChild_=e].el_.focus())}}b.registerComponent("Menu",Zi);class er extends b{constructor(e,t={}){super(e,t),this.menuButton_=new P(e,t),this.menuButton_.controlText(this.controlText_),this.menuButton_.el_.setAttribute("aria-haspopup","true");e=P.prototype.buildCSSClass(),this.menuButton_.el_.className=this.buildCSSClass()+" "+e,this.menuButton_.removeClass("vjs-control"),this.addChild(this.menuButton_),this.update(),this.enabled_=!0,t=e=>this.handleClick(e);this.handleMenuKeyUp_=e=>this.handleMenuKeyUp(e),this.on(this.menuButton_,"tap",t),this.on(this.menuButton_,"click",t),this.on(this.menuButton_,"keydown",e=>this.handleKeyDown(e)),this.on(this.menuButton_,"mouseenter",()=>{this.addClass("vjs-hover"),this.menu.show(),v(document,"keyup",this.handleMenuKeyUp_)}),this.on("mouseleave",e=>this.handleMouseLeave(e)),this.on("keydown",e=>this.handleSubmenuKeyDown(e))}update(){var e=this.createMenu();this.menu&&(this.menu.dispose(),this.removeChild(this.menu)),this.menu=e,this.addChild(e),this.buttonPressed_=!1,this.menuButton_.el_.setAttribute("aria-expanded","false"),this.items&&this.items.length<=this.hideThreshold_?(this.hide(),this.menu.contentEl_.removeAttribute("role")):(this.show(),this.menu.contentEl_.setAttribute("role","menu"))}createMenu(){var e,t=new Zi(this.player_,{menuButton:this});if(this.hideThreshold_=0,this.options_.title&&(e=p("li",{className:"vjs-menu-title",textContent:y(this.options_.title),tabIndex:-1}),e=new b(this.player_,{el:e}),t.addItem(e)),this.items=this.createItems(),this.items)for(let e=0;e<this.items.length;e++)t.addItem(this.items[e]);return t}createItems(){}createEl(){return super.createEl("div",{className:this.buildWrapperCSSClass()},{})}setIcon(e){super.setIcon(e,this.menuButton_.el_)}buildWrapperCSSClass(){let e="vjs-menu-button";!0===this.options_.inline?e+="-inline":e+="-popup";var t=P.prototype.buildCSSClass();return`vjs-menu-button ${e} ${t} `+super.buildCSSClass()}buildCSSClass(){let e="vjs-menu-button";return!0===this.options_.inline?e+="-inline":e+="-popup",`vjs-menu-button ${e} `+super.buildCSSClass()}controlText(e,t=this.menuButton_.el()){return this.menuButton_.controlText(e,t)}dispose(){this.handleMouseLeave(),super.dispose()}handleClick(e){this.buttonPressed_?this.unpressButton():this.pressButton()}handleMouseLeave(e){this.removeClass("vjs-hover"),_(document,"keyup",this.handleMenuKeyUp_)}focus(){this.menuButton_.focus()}blur(){this.menuButton_.blur()}handleKeyDown(e){a.isEventKey(e,"Esc")||a.isEventKey(e,"Tab")?(this.buttonPressed_&&this.unpressButton(),a.isEventKey(e,"Tab")||(e.preventDefault(),this.menuButton_.focus())):!a.isEventKey(e,"Up")&&!a.isEventKey(e,"Down")||this.buttonPressed_||(e.preventDefault(),this.pressButton())}handleMenuKeyUp(e){(a.isEventKey(e,"Esc")||a.isEventKey(e,"Tab"))&&this.removeClass("vjs-hover")}handleSubmenuKeyPress(e){this.handleSubmenuKeyDown(e)}handleSubmenuKeyDown(e){(a.isEventKey(e,"Esc")||a.isEventKey(e,"Tab"))&&(this.buttonPressed_&&this.unpressButton(),a.isEventKey(e,"Tab")||(e.preventDefault(),this.menuButton_.focus()))}pressButton(){this.enabled_&&(this.buttonPressed_=!0,this.menu.show(),this.menu.lockShowing(),this.menuButton_.el_.setAttribute("aria-expanded","true"),u&&ke()||this.menu.focus())}unpressButton(){this.enabled_&&(this.buttonPressed_=!1,this.menu.unlockShowing(),this.menu.hide(),this.menuButton_.el_.setAttribute("aria-expanded","false"))}disable(){this.unpressButton(),this.enabled_=!1,this.addClass("vjs-disabled"),this.menuButton_.disable()}enable(){this.enabled_=!0,this.removeClass("vjs-disabled"),this.menuButton_.enable()}}b.registerComponent("MenuButton",er);class tr extends er{constructor(e,t){const s=t.tracks;if(super(e,t),this.items.length<=1&&this.hide(),s){const i=f(this,this.update);s.addEventListener("removetrack",i),s.addEventListener("addtrack",i),s.addEventListener("labelchange",i),this.player_.on("ready",i),this.player_.on("dispose",function(){s.removeEventListener("removetrack",i),s.removeEventListener("addtrack",i),s.removeEventListener("labelchange",i)})}}}b.registerComponent("TrackButton",tr);const sr=["Tab","Esc","Up","Down","Right","Left"];class ir extends vi{constructor(e,t){super(e,t),this.selectable=t.selectable,this.isSelected_=t.selected||!1,this.multiSelectable=t.multiSelectable,this.selected(this.isSelected_),this.selectable?this.multiSelectable?this.el_.setAttribute("role","menuitemcheckbox"):this.el_.setAttribute("role","menuitemradio"):this.el_.setAttribute("role","menuitem")}createEl(e,t,s){this.nonIconControl=!0;t=super.createEl("li",Object.assign({className:"vjs-menu-item",tabIndex:-1},t),s),s=p("span",{className:"vjs-menu-item-text",textContent:this.localize(this.options_.label)});return this.player_.options_.experimentalSvgIcons?t.appendChild(s):t.replaceChild(s,t.querySelector(".vjs-icon-placeholder")),t}handleKeyDown(t){sr.some(e=>a.isEventKey(t,e))||super.handleKeyDown(t)}handleClick(e){this.selected(!0)}selected(e){this.selectable&&(e?(this.addClass("vjs-selected"),this.el_.setAttribute("aria-checked","true"),this.controlText(", selected"),this.isSelected_=!0):(this.removeClass("vjs-selected"),this.el_.setAttribute("aria-checked","false"),this.controlText(""),this.isSelected_=!1))}}b.registerComponent("MenuItem",ir);class rr extends ir{constructor(e,t){var s=t.track;const i=e.textTracks(),r=(t.label=s.label||s.language||"Unknown",t.selected="showing"===s.mode,super(e,t),this.track=s,this.kinds=(t.kinds||[t.kind||this.track.kind]).filter(Boolean),(...e)=>{this.handleTracksChange.apply(this,e)}),n=(...e)=>{this.handleSelectedLanguageChange.apply(this,e)};if(e.on(["loadstart","texttrackchange"],r),i.addEventListener("change",r),i.addEventListener("selectedlanguagechange",n),this.on("dispose",function(){e.off(["loadstart","texttrackchange"],r),i.removeEventListener("change",r),i.removeEventListener("selectedlanguagechange",n)}),void 0===i.onchange){let e;this.on(["tap","click"],function(){if("object"!=typeof window.Event)try{e=new window.Event("change")}catch(e){}e||(e=document.createEvent("Event")).initEvent("change",!0,!0),i.dispatchEvent(e)})}this.handleTracksChange()}handleClick(e){var t=this.track,s=this.player_.textTracks();if(super.handleClick(e),s)for(let e=0;e<s.length;e++){var i=s[e];-1!==this.kinds.indexOf(i.kind)&&(i===t?"showing"!==i.mode&&(i.mode="showing"):"disabled"!==i.mode&&(i.mode="disabled"))}}handleTracksChange(e){var t="showing"===this.track.mode;t!==this.isSelected_&&this.selected(t)}handleSelectedLanguageChange(e){var t;"showing"!==this.track.mode||(t=this.player_.cache_.selectedLanguage)&&t.enabled&&t.language===this.track.language&&t.kind!==this.track.kind||(this.player_.cache_.selectedLanguage={enabled:!0,language:this.track.language,kind:this.track.kind})}dispose(){this.track=null,super.dispose()}}b.registerComponent("TextTrackMenuItem",rr);class nr extends rr{constructor(e,t){t.track={player:e,kind:t.kind,kinds:t.kinds,default:!1,mode:"disabled"},t.kinds||(t.kinds=[t.kind]),t.label?t.track.label=t.label:t.track.label=t.kinds.join(" and ")+" off",t.selectable=!0,t.multiSelectable=!1,super(e,t)}handleTracksChange(e){var s=this.player().textTracks();let i=!0;for(let e=0,t=s.length;e<t;e++){var r=s[e];if(-1<this.options_.kinds.indexOf(r.kind)&&"showing"===r.mode){i=!1;break}}i!==this.isSelected_&&this.selected(i)}handleSelectedLanguageChange(e){var s=this.player().textTracks();let i=!0;for(let e=0,t=s.length;e<t;e++){var r=s[e];if(-1<["captions","descriptions","subtitles"].indexOf(r.kind)&&"showing"===r.mode){i=!1;break}}i&&(this.player_.cache_.selectedLanguage={enabled:!1})}handleLanguagechange(){this.$(".vjs-menu-item-text").textContent=this.player_.localize(this.options_.label),super.handleLanguagechange()}}b.registerComponent("OffTextTrackMenuItem",nr);class ar extends tr{constructor(e,t={}){t.tracks=e.textTracks(),super(e,t)}createItems(t=[],s=rr){let e;this.label_&&(e=this.label_+" off"),t.push(new nr(this.player_,{kinds:this.kinds_,kind:this.kind_,label:e})),this.hideThreshold_+=1;var i=this.player_.textTracks();Array.isArray(this.kinds_)||(this.kinds_=[this.kind_]);for(let e=0;e<i.length;e++){var r,n=i[e];-1<this.kinds_.indexOf(n.kind)&&((r=new s(this.player_,{track:n,kinds:this.kinds_,kind:this.kind_,selectable:!0,multiSelectable:!1})).addClass(`vjs-${n.kind}-menu-item`),t.push(r))}return t}}b.registerComponent("TextTrackButton",ar);class or extends ir{constructor(e,t){var s=t.track,i=t.cue,r=e.currentTime();t.selectable=!0,t.multiSelectable=!1,t.label=i.text,t.selected=i.startTime<=r&&r<i.endTime,super(e,t),this.track=s,this.cue=i}handleClick(e){super.handleClick(),this.player_.currentTime(this.cue.startTime)}}b.registerComponent("ChaptersTrackMenuItem",or);class lr extends ar{constructor(e,t,s){super(e,t,s),this.setIcon("chapters"),this.selectCurrentItem_=()=>{this.items.forEach(e=>{e.selected(this.track_.activeCues[0]===e.cue)})}}buildCSSClass(){return"vjs-chapters-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-chapters-button "+super.buildWrapperCSSClass()}update(e){e&&e.track&&"chapters"!==e.track.kind||((e=this.findChaptersTrack())!==this.track_?(this.setTrack(e),super.update()):(!this.items||e&&e.cues&&e.cues.length!==this.items.length)&&super.update())}setTrack(e){var t;this.track_!==e&&(this.updateHandler_||(this.updateHandler_=this.update.bind(this)),this.track_&&((t=this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_))&&t.removeEventListener("load",this.updateHandler_),this.track_.removeEventListener("cuechange",this.selectCurrentItem_),this.track_=null),this.track_=e,this.track_)&&(this.track_.mode="hidden",(t=this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_))&&t.addEventListener("load",this.updateHandler_),this.track_.addEventListener("cuechange",this.selectCurrentItem_))}findChaptersTrack(){var t=this.player_.textTracks()||[];for(let e=t.length-1;0<=e;e--){var s=t[e];if(s.kind===this.kind_)return s}}getMenuCaption(){return this.track_&&this.track_.label?this.track_.label:this.localize(y(this.kind_))}createMenu(){return this.options_.title=this.getMenuCaption(),super.createMenu()}createItems(){var s=[];if(this.track_){var i=this.track_.cues;if(i)for(let e=0,t=i.length;e<t;e++){var r=i[e],r=new or(this.player_,{track:this.track_,cue:r});s.push(r)}}return s}}lr.prototype.kind_="chapters",lr.prototype.controlText_="Chapters",b.registerComponent("ChaptersButton",lr);class hr extends ar{constructor(e,t,s){super(e,t,s),this.setIcon("audio-description");const i=e.textTracks(),r=f(this,this.handleTracksChange);i.addEventListener("change",r),this.on("dispose",function(){i.removeEventListener("change",r)})}handleTracksChange(e){var s=this.player().textTracks();let i=!1;for(let e=0,t=s.length;e<t;e++){var r=s[e];if(r.kind!==this.kind_&&"showing"===r.mode){i=!0;break}}i?this.disable():this.enable()}buildCSSClass(){return"vjs-descriptions-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-descriptions-button "+super.buildWrapperCSSClass()}}hr.prototype.kind_="descriptions",hr.prototype.controlText_="Descriptions",b.registerComponent("DescriptionsButton",hr);class cr extends ar{constructor(e,t,s){super(e,t,s),this.setIcon("subtitles")}buildCSSClass(){return"vjs-subtitles-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-subtitles-button "+super.buildWrapperCSSClass()}}cr.prototype.kind_="subtitles",cr.prototype.controlText_="Subtitles",b.registerComponent("SubtitlesButton",cr);class dr extends rr{constructor(e,t){t.track={player:e,kind:t.kind,label:t.kind+" settings",selectable:!1,default:!1,mode:"disabled"},t.selectable=!1,t.name="CaptionSettingsMenuItem",super(e,t),this.addClass("vjs-texttrack-settings"),this.controlText(", opens "+t.kind+" settings dialog")}handleClick(e){this.player().getChild("textTrackSettings").open()}handleLanguagechange(){this.$(".vjs-menu-item-text").textContent=this.player_.localize(this.options_.kind+" settings"),super.handleLanguagechange()}}b.registerComponent("CaptionSettingsMenuItem",dr);class ur extends ar{constructor(e,t,s){super(e,t,s),this.setIcon("captions")}buildCSSClass(){return"vjs-captions-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-captions-button "+super.buildWrapperCSSClass()}createItems(){var e=[];return this.player().tech_&&this.player().tech_.featuresNativeTextTracks||!this.player().getChild("textTrackSettings")||(e.push(new dr(this.player_,{kind:this.kind_})),this.hideThreshold_+=1),super.createItems(e)}}ur.prototype.kind_="captions",ur.prototype.controlText_="Captions",b.registerComponent("CaptionsButton",ur);class pr extends rr{createEl(e,t,s){e=super.createEl(e,t,s),t=e.querySelector(".vjs-menu-item-text");return"captions"===this.options_.track.kind&&(this.player_.options_.experimentalSvgIcons?this.setIcon("captions",e):t.appendChild(p("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),t.appendChild(p("span",{className:"vjs-control-text",textContent:" "+this.localize("Captions")}))),e}}b.registerComponent("SubsCapsMenuItem",pr);class gr extends ar{constructor(e,t={}){super(e,t),this.label_="subtitles",this.setIcon("subtitles"),-1<["en","en-us","en-ca","fr-ca"].indexOf(this.player_.language_)&&(this.label_="captions",this.setIcon("captions")),this.menuButton_.controlText(y(this.label_))}buildCSSClass(){return"vjs-subs-caps-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-subs-caps-button "+super.buildWrapperCSSClass()}createItems(){let e=[];return this.player().tech_&&this.player().tech_.featuresNativeTextTracks||!this.player().getChild("textTrackSettings")||(e.push(new dr(this.player_,{kind:this.label_})),this.hideThreshold_+=1),e=super.createItems(e,pr)}}gr.prototype.kinds_=["captions","subtitles"],gr.prototype.controlText_="Subtitles",b.registerComponent("SubsCapsButton",gr);class mr extends ir{constructor(e,t){var s=t.track;const i=e.audioTracks(),r=(t.label=s.label||s.language||"Unknown",t.selected=s.enabled,super(e,t),this.track=s,this.addClass(`vjs-${s.kind}-menu-item`),(...e)=>{this.handleTracksChange.apply(this,e)});i.addEventListener("change",r),this.on("dispose",()=>{i.removeEventListener("change",r)})}createEl(e,t,s){e=super.createEl(e,t,s),t=e.querySelector(".vjs-menu-item-text");return 0<=["main-desc","description"].indexOf(this.options_.track.kind)&&(t.appendChild(p("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),t.appendChild(p("span",{className:"vjs-control-text",textContent:" "+this.localize("Descriptions")}))),e}handleClick(e){if(super.handleClick(e),this.track.enabled=!0,this.player_.tech_.featuresNativeAudioTracks){var t=this.player_.audioTracks();for(let e=0;e<t.length;e++){var s=t[e];s!==this.track&&(s.enabled=s===this.track)}}}handleTracksChange(e){this.selected(this.track.enabled)}}b.registerComponent("AudioTrackMenuItem",mr);class vr extends tr{constructor(e,t={}){t.tracks=e.audioTracks(),super(e,t),this.setIcon("audio")}buildCSSClass(){return"vjs-audio-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-audio-button "+super.buildWrapperCSSClass()}createItems(t=[]){this.hideThreshold_=1;var s=this.player_.audioTracks();for(let e=0;e<s.length;e++){var i=s[e];t.push(new mr(this.player_,{track:i,selectable:!0,multiSelectable:!1}))}return t}}vr.prototype.controlText_="Audio Track",b.registerComponent("AudioTrackButton",vr);class _r extends ir{constructor(e,t){var s=t.rate,i=parseFloat(s,10);t.label=s,t.selected=i===e.playbackRate(),t.selectable=!0,t.multiSelectable=!1,super(e,t),this.label=s,this.rate=i,this.on(e,"ratechange",e=>this.update(e))}handleClick(e){super.handleClick(),this.player().playbackRate(this.rate)}update(e){this.selected(this.player().playbackRate()===this.rate)}}_r.prototype.contentElType="button",b.registerComponent("PlaybackRateMenuItem",_r);class fr extends er{constructor(e,t){super(e,t),this.menuButton_.el_.setAttribute("aria-describedby",this.labelElId_),this.updateVisibility(),this.updateLabel(),this.on(e,"loadstart",e=>this.updateVisibility(e)),this.on(e,"ratechange",e=>this.updateLabel(e)),this.on(e,"playbackrateschange",e=>this.handlePlaybackRateschange(e))}createEl(){var e=super.createEl();return this.labelElId_="vjs-playback-rate-value-label-"+this.id_,this.labelEl_=p("div",{className:"vjs-playback-rate-value",id:this.labelElId_,textContent:"1x"}),e.appendChild(this.labelEl_),e}dispose(){this.labelEl_=null,super.dispose()}buildCSSClass(){return"vjs-playback-rate "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-playback-rate "+super.buildWrapperCSSClass()}createItems(){var t=this.playbackRates(),s=[];for(let e=t.length-1;0<=e;e--)s.push(new _r(this.player(),{rate:t[e]+"x"}));return s}handlePlaybackRateschange(e){this.update()}playbackRates(){var e=this.player();return e.playbackRates&&e.playbackRates()||[]}playbackRateSupported(){return this.player().tech_&&this.player().tech_.featuresPlaybackRate&&this.playbackRates()&&0<this.playbackRates().length}updateVisibility(e){this.playbackRateSupported()?this.removeClass("vjs-hidden"):this.addClass("vjs-hidden")}updateLabel(e){this.playbackRateSupported()&&(this.labelEl_.textContent=this.player().playbackRate()+"x")}}fr.prototype.controlText_="Playback Rate",b.registerComponent("PlaybackRateMenuButton",fr);class yr extends b{buildCSSClass(){return"vjs-spacer "+super.buildCSSClass()}createEl(e="div",t={},s={}){return t.className||(t.className=this.buildCSSClass()),super.createEl(e,t,s)}}b.registerComponent("Spacer",yr);b.registerComponent("CustomControlSpacer",class extends yr{buildCSSClass(){return"vjs-custom-control-spacer "+super.buildCSSClass()}createEl(){return super.createEl("div",{className:this.buildCSSClass(),textContent:" "})}});class br extends b{createEl(){return super.createEl("div",{className:"vjs-control-bar",dir:"ltr"})}}br.prototype.options_={children:["playToggle","skipBackward","skipForward","volumePanel","currentTimeDisplay","timeDivider","durationDisplay","progressControl","liveDisplay","seekToLive","remainingTimeDisplay","customControlSpacer","playbackRateMenuButton","chaptersButton","descriptionsButton","subsCapsButton","audioTrackButton","pictureInPictureToggle","fullscreenToggle"]},b.registerComponent("ControlBar",br);class Tr extends Wt{constructor(e,t){super(e,t),this.on(e,"error",e=>{this.open(e)})}buildCSSClass(){return"vjs-error-display "+super.buildCSSClass()}content(){var e=this.player().error();return e?this.localize(e.message):""}}Tr.prototype.options_=Object.assign({},Wt.prototype.options_,{pauseOnOpen:!1,fillAlways:!0,temporary:!1,uncloseable:!0}),b.registerComponent("ErrorDisplay",Tr);const kr="vjs-text-track-settings";var xs=["#000","Black"],It=["#00F","Blue"],Cr=["#0FF","Cyan"],wr=["#0F0","Green"],Er=["#F0F","Magenta"],Sr=["#F00","Red"],xr=["#FFF","White"],jr=["#FF0","Yellow"],Pr=["1","Opaque"],Ir=["0.5","Semi-Transparent"],Mr=["0","Transparent"];const Ar={backgroundColor:{selector:".vjs-bg-color > select",id:"captions-background-color-%s",label:"Color",options:[xs,xr,Sr,wr,It,jr,Er,Cr]},backgroundOpacity:{selector:".vjs-bg-opacity > select",id:"captions-background-opacity-%s",label:"Opacity",options:[Pr,Ir,Mr]},color:{selector:".vjs-text-color > select",id:"captions-foreground-color-%s",label:"Color",options:[xr,xs,Sr,wr,It,jr,Er,Cr]},edgeStyle:{selector:".vjs-edge-style > select",id:"%s",label:"Text Edge Style",options:[["none","None"],["raised","Raised"],["depressed","Depressed"],["uniform","Uniform"],["dropshadow","Drop shadow"]]},fontFamily:{selector:".vjs-font-family > select",id:"captions-font-family-%s",label:"Font Family",options:[["proportionalSansSerif","Proportional Sans-Serif"],["monospaceSansSerif","Monospace Sans-Serif"],["proportionalSerif","Proportional Serif"],["monospaceSerif","Monospace Serif"],["casual","Casual"],["script","Script"],["small-caps","Small Caps"]]},fontPercent:{selector:".vjs-font-percent > select",id:"captions-font-size-%s",label:"Font Size",options:[["0.50","50%"],["0.75","75%"],["1.00","100%"],["1.25","125%"],["1.50","150%"],["1.75","175%"],["2.00","200%"],["3.00","300%"],["4.00","400%"]],default:2,parser:e=>"1.00"===e?null:Number(e)},textOpacity:{selector:".vjs-text-opacity > select",id:"captions-foreground-opacity-%s",label:"Opacity",options:[Pr,Ir]},windowColor:{selector:".vjs-window-color > select",id:"captions-window-color-%s",label:"Color"},windowOpacity:{selector:".vjs-window-opacity > select",id:"captions-window-opacity-%s",label:"Opacity",options:[Mr,Ir,Pr]}};function Or(e,t){if((e=t?t(e):e)&&"none"!==e)return e}Ar.windowColor.options=Ar.backgroundColor.options;class Lr extends Wt{constructor(e,t){t.temporary=!1,super(e,t),this.updateDisplay=this.updateDisplay.bind(this),this.fill(),this.hasBeenOpened_=this.hasBeenFilled_=!0,this.endDialog=p("p",{className:"vjs-control-text",textContent:this.localize("End of dialog window.")}),this.el().appendChild(this.endDialog),this.setDefaults(),void 0===t.persistTextTrackSettings&&(this.options_.persistTextTrackSettings=this.options_.playerOptions.persistTextTrackSettings),this.on(this.$(".vjs-done-button"),"click",()=>{this.saveSettings(),this.close()}),this.on(this.$(".vjs-default-button"),"click",()=>{this.setDefaults(),this.updateDisplay()}),W(Ar,e=>{this.on(this.$(e.selector),"change",this.updateDisplay)}),this.options_.persistTextTrackSettings&&this.restoreSettings()}dispose(){this.endDialog=null,super.dispose()}createElSelect_(e,t="",s="label"){e=Ar[e];const i=e.id.replace("%s",this.id_),r=[t,i].join(" ").trim();t="vjs_select_"+m++;return[`<${s} id="${i}"${"label"===s?` for="${t}" class="vjs-label"`:""}>`,this.localize(e.label),`</${s}>`,`<select aria-labelledby="${r}" id="${t}">`].concat(e.options.map(e=>{var t=i+"-"+e[1].replace(/\W+/g,"");return[`<option id="${t}" value="${e[0]}" `,`aria-labelledby="${r} ${t}">`,this.localize(e[1]),"</option>"].join("")})).concat("</select>").join("")}createElFgColor_(){var e="captions-text-legend-"+this.id_;return['<fieldset class="vjs-fg vjs-track-setting">',`<legend id="${e}">`,this.localize("Text"),"</legend>",'<span class="vjs-text-color">',this.createElSelect_("color",e),"</span>",'<span class="vjs-text-opacity vjs-opacity">',this.createElSelect_("textOpacity",e),"</span>","</fieldset>"].join("")}createElBgColor_(){var e="captions-background-"+this.id_;return['<fieldset class="vjs-bg vjs-track-setting">',`<legend id="${e}">`,this.localize("Text Background"),"</legend>",'<span class="vjs-bg-color">',this.createElSelect_("backgroundColor",e),"</span>",'<span class="vjs-bg-opacity vjs-opacity">',this.createElSelect_("backgroundOpacity",e),"</span>","</fieldset>"].join("")}createElWinColor_(){var e="captions-window-"+this.id_;return['<fieldset class="vjs-window vjs-track-setting">',`<legend id="${e}">`,this.localize("Caption Area Background"),"</legend>",'<span class="vjs-window-color">',this.createElSelect_("windowColor",e),"</span>",'<span class="vjs-window-opacity vjs-opacity">',this.createElSelect_("windowOpacity",e),"</span>","</fieldset>"].join("")}createElColors_(){return p("div",{className:"vjs-track-settings-colors",innerHTML:[this.createElFgColor_(),this.createElBgColor_(),this.createElWinColor_()].join("")})}createElFont_(){return p("div",{className:"vjs-track-settings-font",innerHTML:['<fieldset class="vjs-font-percent vjs-track-setting">',this.createElSelect_("fontPercent","","legend"),"</fieldset>",'<fieldset class="vjs-edge-style vjs-track-setting">',this.createElSelect_("edgeStyle","","legend"),"</fieldset>",'<fieldset class="vjs-font-family vjs-track-setting">',this.createElSelect_("fontFamily","","legend"),"</fieldset>"].join("")})}createElControls_(){var e=this.localize("restore all settings to the default values");return p("div",{className:"vjs-track-settings-controls",innerHTML:[`<button type="button" class="vjs-default-button" title="${e}">`,this.localize("Reset"),`<span class="vjs-control-text"> ${e}</span>`,"</button>",`<button type="button" class="vjs-done-button">${this.localize("Done")}</button>`].join("")})}content(){return[this.createElColors_(),this.createElFont_(),this.createElControls_()]}label(){return this.localize("Caption Settings Dialog")}description(){return this.localize("Beginning of dialog window. Escape will cancel and close the window.")}buildCSSClass(){return super.buildCSSClass()+" vjs-text-track-settings"}getValues(){return X(Ar,(e,t,s)=>{i=this.$(t.selector),t=t.parser;var i=Or(i.options[i.options.selectedIndex].value,t);return void 0!==i&&(e[s]=i),e},{})}setValues(n){W(Ar,(e,t)=>{var s=this.$(e.selector),i=n[t],r=e.parser;if(i)for(let e=0;e<s.options.length;e++)if(Or(s.options[e].value,r)===i){s.selectedIndex=e;break}})}setDefaults(){W(Ar,e=>{var t=e.hasOwnProperty("default")?e.default:0;this.$(e.selector).selectedIndex=t})}restoreSettings(){let e;try{e=JSON.parse(window.localStorage.getItem(kr))}catch(e){l.warn(e)}e&&this.setValues(e)}saveSettings(){if(this.options_.persistTextTrackSettings){var e=this.getValues();try{Object.keys(e).length?window.localStorage.setItem(kr,JSON.stringify(e)):window.localStorage.removeItem(kr)}catch(e){l.warn(e)}}}updateDisplay(){var e=this.player_.getChild("textTrackDisplay");e&&e.updateDisplay()}conditionalBlur_(){this.previouslyActiveEl_=null;var e=this.player_.controlBar,t=e&&e.subsCapsButton,e=e&&e.captionsButton;t?t.focus():e&&e.focus()}handleLanguagechange(){this.fill()}}b.registerComponent("TextTrackSettings",Lr);class Nr extends b{constructor(e,t){let s=t.ResizeObserver||window.ResizeObserver;super(e,h({createEl:!(s=null===t.ResizeObserver?!1:s),reportTouchActivity:!1},t)),this.ResizeObserver=t.ResizeObserver||window.ResizeObserver,this.loadListener_=null,this.resizeObserver_=null,this.debouncedHandler_=pt(()=>{this.resizeHandler()},100,!1,this),s?(this.resizeObserver_=new this.ResizeObserver(this.debouncedHandler_),this.resizeObserver_.observe(e.el())):(this.loadListener_=()=>{if(this.el_&&this.el_.contentWindow){const t=this.debouncedHandler_;let e=this.unloadListener_=function(){_(this,"resize",t),_(this,"unload",e),e=null};v(this.el_.contentWindow,"unload",e),v(this.el_.contentWindow,"resize",t)}},this.one("load",this.loadListener_))}createEl(){return super.createEl("iframe",{className:"vjs-resize-manager",tabIndex:-1,title:this.localize("No content")},{"aria-hidden":"true"})}resizeHandler(){this.player_&&this.player_.trigger&&this.player_.trigger("playerresize")}dispose(){this.debouncedHandler_&&this.debouncedHandler_.cancel(),this.resizeObserver_&&(this.player_.el()&&this.resizeObserver_.unobserve(this.player_.el()),this.resizeObserver_.disconnect()),this.loadListener_&&this.off("load",this.loadListener_),this.el_&&this.el_.contentWindow&&this.unloadListener_&&this.unloadListener_.call(this.el_.contentWindow),this.ResizeObserver=null,this.resizeObserver=null,this.debouncedHandler_=null,this.loadListener_=null,super.dispose()}}b.registerComponent("ResizeManager",Nr);const Dr={trackingThreshold:20,liveTolerance:15};class Br extends b{constructor(e,t){super(e,h(Dr,t,{createEl:!1})),this.trackLiveHandler_=()=>this.trackLive_(),this.handlePlay_=e=>this.handlePlay(e),this.handleFirstTimeupdate_=e=>this.handleFirstTimeupdate(e),this.handleSeeked_=e=>this.handleSeeked(e),this.seekToLiveEdge_=e=>this.seekToLiveEdge(e),this.reset_(),this.on(this.player_,"durationchange",e=>this.handleDurationchange(e)),this.on(this.player_,"canplay",()=>this.toggleTracking())}trackLive_(){var t=this.player_.seekable();if(t&&t.length){var t=Number(window.performance.now().toFixed(4)),s=-1===this.lastTime_?0:(t-this.lastTime_)/1e3,t=(this.lastTime_=t,this.pastSeekEnd_=this.pastSeekEnd()+s,this.liveCurrentTime()),s=this.player_.currentTime();let e=this.player_.paused()||this.seekedBehindLive_||Math.abs(t-s)>this.options_.liveTolerance;(e=this.timeupdateSeen_&&t!==1/0?e:!1)!==this.behindLiveEdge_&&(this.behindLiveEdge_=e,this.trigger("liveedgechange"))}}handleDurationchange(){this.toggleTracking()}toggleTracking(){this.player_.duration()===1/0&&this.liveWindow()>=this.options_.trackingThreshold?(this.player_.options_.liveui&&this.player_.addClass("vjs-liveui"),this.startTracking()):(this.player_.removeClass("vjs-liveui"),this.stopTracking())}startTracking(){this.isTracking()||(this.timeupdateSeen_||(this.timeupdateSeen_=this.player_.hasStarted()),this.trackingInterval_=this.setInterval(this.trackLiveHandler_,30),this.trackLive_(),this.on(this.player_,["play","pause"],this.trackLiveHandler_),this.timeupdateSeen_?this.on(this.player_,"seeked",this.handleSeeked_):(this.one(this.player_,"play",this.handlePlay_),this.one(this.player_,"timeupdate",this.handleFirstTimeupdate_)))}handleFirstTimeupdate(){this.timeupdateSeen_=!0,this.on(this.player_,"seeked",this.handleSeeked_)}handleSeeked(){var e=Math.abs(this.liveCurrentTime()-this.player_.currentTime());this.seekedBehindLive_=this.nextSeekedFromUser_&&2<e,this.nextSeekedFromUser_=!1,this.trackLive_()}handlePlay(){this.one(this.player_,"timeupdate",this.seekToLiveEdge_)}reset_(){this.lastTime_=-1,this.pastSeekEnd_=0,this.lastSeekEnd_=-1,this.behindLiveEdge_=!0,this.timeupdateSeen_=!1,this.seekedBehindLive_=!1,this.nextSeekedFromUser_=!1,this.clearInterval(this.trackingInterval_),this.trackingInterval_=null,this.off(this.player_,["play","pause"],this.trackLiveHandler_),this.off(this.player_,"seeked",this.handleSeeked_),this.off(this.player_,"play",this.handlePlay_),this.off(this.player_,"timeupdate",this.handleFirstTimeupdate_),this.off(this.player_,"timeupdate",this.seekToLiveEdge_)}nextSeekedFromUser(){this.nextSeekedFromUser_=!0}stopTracking(){this.isTracking()&&(this.reset_(),this.trigger("liveedgechange"))}seekableEnd(){var e=this.player_.seekable(),t=[];let s=e?e.length:0;for(;s--;)t.push(e.end(s));return t.length?t.sort()[t.length-1]:1/0}seekableStart(){var e=this.player_.seekable(),t=[];let s=e?e.length:0;for(;s--;)t.push(e.start(s));return t.length?t.sort()[0]:0}liveWindow(){var e=this.liveCurrentTime();return e===1/0?0:e-this.seekableStart()}isLive(){return this.isTracking()}atLiveEdge(){return!this.behindLiveEdge()}liveCurrentTime(){return this.pastSeekEnd()+this.seekableEnd()}pastSeekEnd(){var e=this.seekableEnd();return-1!==this.lastSeekEnd_&&e!==this.lastSeekEnd_&&(this.pastSeekEnd_=0),this.lastSeekEnd_=e,this.pastSeekEnd_}behindLiveEdge(){return this.behindLiveEdge_}isTracking(){return"number"==typeof this.trackingInterval_}seekToLiveEdge(){this.seekedBehindLive_=!1,this.atLiveEdge()||(this.nextSeekedFromUser_=!1,this.player_.currentTime(this.liveCurrentTime()))}dispose(){this.stopTracking(),super.dispose()}}b.registerComponent("LiveTracker",Br);class Rr extends b{constructor(e,t){super(e,t),this.on("statechanged",e=>this.updateDom_()),this.updateDom_()}createEl(){return this.els={title:p("div",{className:"vjs-title-bar-title",id:"vjs-title-bar-title-"+m++}),description:p("div",{className:"vjs-title-bar-description",id:"vjs-title-bar-description-"+m++})},p("div",{className:"vjs-title-bar"},{},Y(this.els))}updateDom_(){var e=this.player_.tech_;const i=e&&e.el_,r={title:"aria-labelledby",description:"aria-describedby"};["title","description"].forEach(e=>{var t=this.state[e],s=this.els[e],e=r[e];Ve(s),t&&we(s,t),i&&(i.removeAttribute(e),t)&&i.setAttribute(e,s.id)}),this.state.title||this.state.description?this.show():this.hide()}update(e){this.setState(e)}dispose(){var e=this.player_.tech_,e=e&&e.el_;e&&(e.removeAttribute("aria-labelledby"),e.removeAttribute("aria-describedby")),super.dispose(),this.els=null}}b.registerComponent("TitleBar",Rr);function Hr(s){const i=s.el();if(!i.resetSourceWatch_){const t={},e=$r(s),r=t=>(...e)=>{e=t.apply(i,e);return Vr(s),e};["append","appendChild","insertAdjacentHTML"].forEach(e=>{i[e]&&(t[e]=i[e],i[e]=r(t[e]))}),Object.defineProperty(i,"innerHTML",h(e,{set:r(e.set)})),i.resetSourceWatch_=()=>{i.resetSourceWatch_=null,Object.keys(t).forEach(e=>{i[e]=t[e]}),Object.defineProperty(i,"innerHTML",e)},s.one("sourceset",i.resetSourceWatch_)}}function Fr(s){if(s.featuresSourceset){const i=s.el();if(!i.resetSourceset_){e=s;const t=qr([e.el(),window.HTMLMediaElement.prototype,Ur],"src");var e;const r=i.setAttribute,n=i.load;Object.defineProperty(i,"src",h(t,{set:e=>{e=t.set.call(i,e);return s.triggerSourceset(i.src),e}})),i.setAttribute=(e,t)=>{t=r.call(i,e,t);return/src/i.test(e)&&s.triggerSourceset(i.src),t},i.load=()=>{var e=n.call(i);return Vr(s)||(s.triggerSourceset(""),Hr(s)),e},i.currentSrc?s.triggerSourceset(i.currentSrc):Vr(s)||Hr(s),i.resetSourceset_=()=>{i.resetSourceset_=null,i.load=n,i.setAttribute=r,Object.defineProperty(i,"src",t),i.resetSourceWatch_&&i.resetSourceWatch_()}}}}const Vr=t=>{var e=t.el();if(e.hasAttribute("src"))t.triggerSourceset(e.src);else{var s=t.$$("source"),i=[];let e="";if(!s.length)return!1;for(let e=0;e<s.length;e++){var r=s[e].src;r&&-1===i.indexOf(r)&&i.push(r)}if(!i.length)return!1;1===i.length&&(e=i[0]),t.triggerSourceset(e)}return!0},zr=Object.defineProperty({},"innerHTML",{get(){return this.cloneNode(!0).innerHTML},set(e){for(var t=document.createElement(this.nodeName.toLowerCase()),s=(t.innerHTML=e,document.createDocumentFragment());t.childNodes.length;)s.appendChild(t.childNodes[0]);return this.innerText="",window.Element.prototype.appendChild.call(this,s),this.innerHTML}}),qr=(t,s)=>{let i={};for(let e=0;e<t.length&&!((i=Object.getOwnPropertyDescriptor(t[e],s))&&i.set&&i.get);e++);return i.enumerable=!0,i.configurable=!0,i},$r=e=>qr([e.el(),window.HTMLMediaElement.prototype,window.Element.prototype,zr],"innerHTML"),Ur=Object.defineProperty({},"src",{get(){return this.hasAttribute("src")?ns(window.Element.prototype.getAttribute.call(this,"src")):""},set(e){return window.Element.prototype.setAttribute.call(this,"src",e),e}});class I extends j{constructor(e,t){super(e,t);t=e.source;let s=!1;if(this.featuresVideoFrameCallback=this.featuresVideoFrameCallback&&"VIDEO"===this.el_.tagName,t&&(this.el_.currentSrc!==t.src||e.tag&&3===e.tag.initNetworkState_)?this.setSource(t):this.handleLateInit_(this.el_),e.enableSourceset&&this.setupSourcesetHandling_(),this.isScrubbing_=!1,this.el_.hasChildNodes()){var i=this.el_.childNodes;let e=i.length;for(var r=[];e--;){var n=i[e];"track"===n.nodeName.toLowerCase()&&(this.featuresNativeTextTracks?(this.remoteTextTrackEls().addTrackElement_(n),this.remoteTextTracks().addTrack(n.track),this.textTracks().addTrack(n.track),s||this.el_.hasAttribute("crossorigin")||!as(n.src)||(s=!0)):r.push(n))}for(let e=0;e<r.length;e++)this.el_.removeChild(r[e])}this.proxyNativeTracks_(),this.featuresNativeTextTracks&&s&&l.warn("Text Tracks are being loaded from another origin but the crossorigin attribute isn't used.\nThis may prevent text tracks from loading."),this.restoreMetadataTracksInIOSNativePlayer_(),(me||de)&&!0===e.nativeControlsForTouch&&this.setControls(!0),this.proxyWebkitFullscreen_(),this.triggerReady()}dispose(){this.el_&&this.el_.resetSourceset_&&this.el_.resetSourceset_(),I.disposeMediaElement(this.el_),this.options_=null,super.dispose()}setupSourcesetHandling_(){Fr(this)}restoreMetadataTracksInIOSNativePlayer_(){const s=this.textTracks();let i;const e=()=>{i=[];for(let e=0;e<s.length;e++){var t=s[e];"metadata"===t.kind&&i.push({track:t,storedMode:t.mode})}},r=(e(),s.addEventListener("change",e),this.on("dispose",()=>s.removeEventListener("change",e)),()=>{for(let e=0;e<i.length;e++){var t=i[e];"disabled"===t.track.mode&&t.track.mode!==t.storedMode&&(t.track.mode=t.storedMode)}s.removeEventListener("change",r)});this.on("webkitbeginfullscreen",()=>{s.removeEventListener("change",e),s.removeEventListener("change",r),s.addEventListener("change",r)}),this.on("webkitendfullscreen",()=>{s.removeEventListener("change",e),s.addEventListener("change",e),s.removeEventListener("change",r)})}overrideNative_(e,t){if(t===this[`featuresNative${e}Tracks`]){const s=e.toLowerCase();this[s+"TracksListeners_"]&&Object.keys(this[s+"TracksListeners_"]).forEach(e=>{this.el()[s+"Tracks"].removeEventListener(e,this[s+"TracksListeners_"][e])}),this[`featuresNative${e}Tracks`]=!t,this[s+"TracksListeners_"]=null,this.proxyNativeTracksForType_(s)}}overrideNativeAudioTracks(e){this.overrideNative_("Audio",e)}overrideNativeVideoTracks(e){this.overrideNative_("Video",e)}proxyNativeTracksForType_(s){var e=w[s];const i=this.el()[e.getterName],r=this[e.getterName]();if(this[`featuresNative${e.capitalName}Tracks`]&&i&&i.addEventListener){const n={change:e=>{var t={type:"change",target:r,currentTarget:r,srcElement:r};r.trigger(t),"text"===s&&this[Ss.remoteText.getterName]().trigger(t)},addtrack(e){r.addTrack(e.track)},removetrack(e){r.removeTrack(e.track)}},t=function(){var e=[];for(let s=0;s<r.length;s++){let t=!1;for(let e=0;e<i.length;e++)if(i[e]===r[s]){t=!0;break}t||e.push(r[s])}for(;e.length;)r.removeTrack(e.shift())};this[e.getterName+"Listeners_"]=n,Object.keys(n).forEach(t=>{const s=n[t];i.addEventListener(t,s),this.on("dispose",e=>i.removeEventListener(t,s))}),this.on("loadstart",t),this.on("dispose",e=>this.off("loadstart",t))}}proxyNativeTracks_(){w.names.forEach(e=>{this.proxyNativeTracksForType_(e)})}createEl(){let t=this.options_.tag;t&&(this.options_.playerElIngest||this.movingMediaElementInDOM)||(t?(e=t.cloneNode(!0),t.parentNode&&t.parentNode.insertBefore(e,t),I.disposeMediaElement(t),t=e):(t=document.createElement("video"),e=h({},this.options_.tag&&Me(this.options_.tag)),me&&!0===this.options_.nativeControlsForTouch||delete e.controls,Ie(t,Object.assign(e,{id:this.options_.techId,class:"vjs-tech"}))),t.playerId=this.options_.playerId),"undefined"!=typeof this.options_.preload&&Oe(t,"preload",this.options_.preload),void 0!==this.options_.disablePictureInPicture&&(t.disablePictureInPicture=this.options_.disablePictureInPicture);var e,s=["loop","muted","playsinline","autoplay"];for(let e=0;e<s.length;e++){var i=s[e],r=this.options_[i];"undefined"!=typeof r&&(r?Oe(t,i,i):Le(t,i),t[i]=r)}return t}handleLateInit_(e){if(0!==e.networkState&&3!==e.networkState)if(0===e.readyState){let e=!1;const t=function(){e=!0},s=(this.on("loadstart",t),function(){e||this.trigger("loadstart")});this.on("loadedmetadata",s),void this.ready(function(){this.off("loadstart",t),this.off("loadedmetadata",s),e||this.trigger("loadstart")})}else{const i=["loadstart"];i.push("loadedmetadata"),2<=e.readyState&&i.push("loadeddata"),3<=e.readyState&&i.push("canplay"),4<=e.readyState&&i.push("canplaythrough"),this.ready(function(){i.forEach(function(e){this.trigger(e)},this)})}}setScrubbing(e){this.isScrubbing_=e}scrubbing(){return this.isScrubbing_}setCurrentTime(e){try{this.isScrubbing_&&this.el_.fastSeek&&_e?this.el_.fastSeek(e):this.el_.currentTime=e}catch(e){l(e,"Video is not ready. (Video.js)")}}duration(){if(this.el_.duration===1/0&&o&&c&&0===this.el_.currentTime){const e=()=>{0<this.el_.currentTime&&(this.el_.duration===1/0&&this.trigger("durationchange"),this.off("timeupdate",e))};return this.on("timeupdate",e),NaN}return this.el_.duration||NaN}width(){return this.el_.offsetWidth}height(){return this.el_.offsetHeight}proxyWebkitFullscreen_(){if("webkitDisplayingFullscreen"in this.el_){const e=function(){this.trigger("fullscreenchange",{isFullscreen:!1}),this.el_.controls&&!this.options_.nativeControlsForTouch&&this.controls()&&(this.el_.controls=!1)},t=function(){"webkitPresentationMode"in this.el_&&"picture-in-picture"!==this.el_.webkitPresentationMode&&(this.one("webkitendfullscreen",e),this.trigger("fullscreenchange",{isFullscreen:!0,nativeIOSFullscreen:!0}))};this.on("webkitbeginfullscreen",t),this.on("dispose",()=>{this.off("webkitbeginfullscreen",t),this.off("webkitendfullscreen",e)})}}supportsFullScreen(){return"function"==typeof this.el_.webkitEnterFullScreen}enterFullScreen(){const e=this.el_;if(e.paused&&e.networkState<=e.HAVE_METADATA)k(this.el_.play()),this.setTimeout(function(){e.pause();try{e.webkitEnterFullScreen()}catch(e){this.trigger("fullscreenerror",e)}},0);else try{e.webkitEnterFullScreen()}catch(e){this.trigger("fullscreenerror",e)}}exitFullScreen(){this.el_.webkitDisplayingFullscreen?this.el_.webkitExitFullScreen():this.trigger("fullscreenerror",new Error("The video is not fullscreen"))}requestPictureInPicture(){return this.el_.requestPictureInPicture()}requestVideoFrameCallback(e){return this.featuresVideoFrameCallback&&!this.el_.webkitKeys?this.el_.requestVideoFrameCallback(e):super.requestVideoFrameCallback(e)}cancelVideoFrameCallback(e){this.featuresVideoFrameCallback&&!this.el_.webkitKeys?this.el_.cancelVideoFrameCallback(e):super.cancelVideoFrameCallback(e)}src(e){if(void 0===e)return this.el_.src;this.setSrc(e)}reset(){I.resetMediaElement(this.el_)}currentSrc(){return this.currentSource_?this.currentSource_.src:this.el_.currentSrc}setControls(e){this.el_.controls=!!e}addTextTrack(e,t,s){return this.featuresNativeTextTracks?this.el_.addTextTrack(e,t,s):super.addTextTrack(e,t,s)}createRemoteTextTrack(e){var t;return this.featuresNativeTextTracks?(t=document.createElement("track"),e.kind&&(t.kind=e.kind),e.label&&(t.label=e.label),(e.language||e.srclang)&&(t.srclang=e.language||e.srclang),e.default&&(t.default=e.default),e.id&&(t.id=e.id),e.src&&(t.src=e.src),t):super.createRemoteTextTrack(e)}addRemoteTextTrack(e,t){e=super.addRemoteTextTrack(e,t);return this.featuresNativeTextTracks&&this.el().appendChild(e),e}removeRemoteTextTrack(t){if(super.removeRemoteTextTrack(t),this.featuresNativeTextTracks){var s=this.$$("track");let e=s.length;for(;e--;)t!==s[e]&&t!==s[e].track||this.el().removeChild(s[e])}}getVideoPlaybackQuality(){var e;return"function"==typeof this.el().getVideoPlaybackQuality?this.el().getVideoPlaybackQuality():(e={},"undefined"!=typeof this.el().webkitDroppedFrameCount&&"undefined"!=typeof this.el().webkitDecodedFrameCount&&(e.droppedVideoFrames=this.el().webkitDroppedFrameCount,e.totalVideoFrames=this.el().webkitDecodedFrameCount),window.performance&&(e.creationTime=window.performance.now()),e)}}Q(I,"TEST_VID",function(){var e,t;if(be())return e=document.createElement("video"),(t=document.createElement("track")).kind="captions",t.srclang="en",t.label="English",e.appendChild(t),e}),I.isSupported=function(){try{I.TEST_VID.volume=.5}catch(e){return!1}return!(!I.TEST_VID||!I.TEST_VID.canPlayType)},I.canPlayType=function(e){return I.TEST_VID.canPlayType(e)},I.canPlaySource=function(e,t){return I.canPlayType(e.type)},I.canControlVolume=function(){try{const t=I.TEST_VID.volume;I.TEST_VID.volume=t/2+.1;var e=t!==I.TEST_VID.volume;return e&&u?(window.setTimeout(()=>{I&&I.prototype&&(I.prototype.featuresVolumeControl=t!==I.TEST_VID.volume)}),!1):e}catch(e){return!1}},I.canMuteVolume=function(){try{var e=I.TEST_VID.muted;return I.TEST_VID.muted=!e,I.TEST_VID.muted?Oe(I.TEST_VID,"muted","muted"):Le(I.TEST_VID,"muted"),e!==I.TEST_VID.muted}catch(e){return!1}},I.canControlPlaybackRate=function(){if(o&&c&&ae<58)return!1;try{var e=I.TEST_VID.playbackRate;return I.TEST_VID.playbackRate=e/2+.1,e!==I.TEST_VID.playbackRate}catch(e){return!1}},I.canOverrideAttributes=function(){try{var e=()=>{};Object.defineProperty(document.createElement("video"),"src",{get:e,set:e}),Object.defineProperty(document.createElement("audio"),"src",{get:e,set:e}),Object.defineProperty(document.createElement("video"),"innerHTML",{get:e,set:e}),Object.defineProperty(document.createElement("audio"),"innerHTML",{get:e,set:e})}catch(e){return!1}return!0},I.supportsNativeTextTracks=function(){return _e||u&&c},I.supportsNativeVideoTracks=function(){return!(!I.TEST_VID||!I.TEST_VID.videoTracks)},I.supportsNativeAudioTracks=function(){return!(!I.TEST_VID||!I.TEST_VID.audioTracks)},I.Events=["loadstart","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","ended","durationchange","timeupdate","progress","play","pause","ratechange","resize","volumechange"],[["featuresMuteControl","canMuteVolume"],["featuresPlaybackRate","canControlPlaybackRate"],["featuresSourceset","canOverrideAttributes"],["featuresNativeTextTracks","supportsNativeTextTracks"],["featuresNativeVideoTracks","supportsNativeVideoTracks"],["featuresNativeAudioTracks","supportsNativeAudioTracks"]].forEach(function([e,t]){Q(I.prototype,e,()=>I[t](),!0)}),I.prototype.featuresVolumeControl=I.canControlVolume(),I.prototype.movingMediaElementInDOM=!u,I.prototype.featuresFullscreenResize=!0,I.prototype.featuresProgressEvents=!0,I.prototype.featuresTimeupdateEvents=!0,I.prototype.featuresVideoFrameCallback=!(!I.TEST_VID||!I.TEST_VID.requestVideoFrameCallback),I.disposeMediaElement=function(e){if(e){for(e.parentNode&&e.parentNode.removeChild(e);e.hasChildNodes();)e.removeChild(e.firstChild);if(e.removeAttribute("src"),"function"==typeof e.load)try{e.load()}catch(e){}}},I.resetMediaElement=function(t){if(t){var s=t.querySelectorAll("source");let e=s.length;for(;e--;)t.removeChild(s[e]);if(t.removeAttribute("src"),"function"==typeof t.load)try{t.load()}catch(e){}}},["muted","defaultMuted","autoplay","controls","loop","playsinline"].forEach(function(e){I.prototype[e]=function(){return this.el_[e]||this.el_.hasAttribute(e)}}),["muted","defaultMuted","autoplay","loop","playsinline"].forEach(function(t){I.prototype["set"+y(t)]=function(e){(this.el_[t]=e)?this.el_.setAttribute(t,t):this.el_.removeAttribute(t)}}),["paused","currentTime","buffered","volume","poster","preload","error","seeking","seekable","ended","playbackRate","defaultPlaybackRate","disablePictureInPicture","played","networkState","readyState","videoWidth","videoHeight","crossOrigin"].forEach(function(e){I.prototype[e]=function(){return this.el_[e]}}),["volume","src","poster","preload","playbackRate","defaultPlaybackRate","disablePictureInPicture","crossOrigin"].forEach(function(t){I.prototype["set"+y(t)]=function(e){this.el_[t]=e}}),["pause","load","play"].forEach(function(e){I.prototype[e]=function(){return this.el_[e]()}}),j.withSourceHandlers(I),I.nativeSourceHandler={},I.nativeSourceHandler.canPlayType=function(e){try{return I.TEST_VID.canPlayType(e)}catch(e){return""}},I.nativeSourceHandler.canHandleSource=function(e,t){return e.type?I.nativeSourceHandler.canPlayType(e.type):e.src?(e=os(e.src),I.nativeSourceHandler.canPlayType("video/"+e)):""},I.nativeSourceHandler.handleSource=function(e,t,s){t.setSrc(e.src)},I.nativeSourceHandler.dispose=function(){},I.registerSourceHandler(I.nativeSourceHandler),j.registerTech("Html5",I);const Kr=["progress","abort","suspend","emptied","stalled","loadedmetadata","loadeddata","timeupdate","resize","volumechange","texttrackchange"],Wr={canplay:"CanPlay",canplaythrough:"CanPlayThrough",playing:"Playing",seeked:"Seeked"},Xr=["tiny","xsmall","small","medium","large","xlarge","huge"],Gr={},Yr=(Xr.forEach(e=>{var t="x"===e.charAt(0)?"x-"+e.substring(1):e;Gr[e]="vjs-layout-"+t}),{tiny:210,xsmall:320,small:425,medium:768,large:1440,xlarge:2560,huge:1/0});class M extends b{constructor(e,t,s){if(e.id=e.id||t.id||"vjs_video_"+m++,(t=Object.assign(M.getTagSettings(e),t)).initChildren=!1,t.createEl=!1,t.evented=!1,t.reportTouchActivity=!1,t.language||(i=e.closest("[lang]"))&&(t.language=i.getAttribute("lang")),super(null,t,s),this.boundDocumentFullscreenChange_=e=>this.documentFullscreenChange_(e),this.boundFullWindowOnEscKey_=e=>this.fullWindowOnEscKey(e),this.boundUpdateStyleEl_=e=>this.updateStyleEl_(e),this.boundApplyInitTime_=e=>this.applyInitTime_(e),this.boundUpdateCurrentBreakpoint_=e=>this.updateCurrentBreakpoint_(e),this.boundHandleTechClick_=e=>this.handleTechClick_(e),this.boundHandleTechDoubleClick_=e=>this.handleTechDoubleClick_(e),this.boundHandleTechTouchStart_=e=>this.handleTechTouchStart_(e),this.boundHandleTechTouchMove_=e=>this.handleTechTouchMove_(e),this.boundHandleTechTouchEnd_=e=>this.handleTechTouchEnd_(e),this.boundHandleTechTap_=e=>this.handleTechTap_(e),this.isFullscreen_=!1,this.log=U(this.id_),this.fsApi_=F,this.isPosterFromTech_=!1,this.queuedCallbacks_=[],this.isReady_=!1,this.hasStarted_=!1,this.userActive_=!1,this.debugEnabled_=!1,this.audioOnlyMode_=!1,this.audioPosterMode_=!1,this.audioOnlyCache_={playerHeight:null,hiddenChildren:[]},!this.options_||!this.options_.techOrder||!this.options_.techOrder.length)throw new Error("No techOrder specified. Did you overwrite videojs.options instead of just changing the properties you want to override?");if(this.tag=e,this.tagAttributes=e&&Me(e),this.language(this.options_.language),t.languages){const r={};Object.getOwnPropertyNames(t.languages).forEach(function(e){r[e.toLowerCase()]=t.languages[e]}),this.languages_=r}else this.languages_=M.prototype.options_.languages;this.resetCache_(),this.poster_=t.poster||"",this.controls_=!!t.controls,e.controls=!1,e.removeAttribute("controls"),this.changingSrc_=!1,this.playCallbacks_=[],this.playTerminatedQueue_=[],e.hasAttribute("autoplay")?this.autoplay(!0):this.autoplay(this.options_.autoplay),t.plugins&&Object.keys(t.plugins).forEach(e=>{if("function"!=typeof this[e])throw new Error(`plugin "${e}" does not exist`)}),this.scrubbing_=!1,this.el_=this.createEl(),wt(this,{eventBusKey:"el_"}),this.fsApi_.requestFullscreen&&(v(document,this.fsApi_.fullscreenchange,this.boundDocumentFullscreenChange_),this.on(this.fsApi_.fullscreenchange,this.boundDocumentFullscreenChange_)),this.fluid_&&this.on(["playerreset","resize"],this.boundUpdateStyleEl_);var i=h(this.options_),s=(t.plugins&&Object.keys(t.plugins).forEach(e=>{this[e](t.plugins[e])}),t.debug&&this.debug(!0),this.options_.playerOptions=i,this.middleware_=[],this.playbackRates(t.playbackRates),t.experimentalSvgIcons&&((s=(new window.DOMParser).parseFromString('<svg xmlns="http://www.w3.org/2000/svg">\n  <defs>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-play">\n      <path d="M16 10v28l22-14z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-pause">\n      <path d="M12 38h8V10h-8v28zm16-28v28h8V10h-8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-audio">\n      <path d="M24 2C14.06 2 6 10.06 6 20v14c0 3.31 2.69 6 6 6h6V24h-8v-4c0-7.73 6.27-14 14-14s14 6.27 14 14v4h-8v16h6c3.31 0 6-2.69 6-6V20c0-9.94-8.06-18-18-18z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-captions">\n      <path d="M38 8H10c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM22 22h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2zm14 0h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-subtitles">\n      <path d="M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-fullscreen-enter">\n      <path d="M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-fullscreen-exit">\n      <path d="M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-play-circle">\n      <path d="M20 33l12-9-12-9v18zm4-29C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-mute">\n      <path d="M33 24c0-3.53-2.04-6.58-5-8.05v4.42l4.91 4.91c.06-.42.09-.85.09-1.28zm5 0c0 1.88-.41 3.65-1.08 5.28l3.03 3.03C41.25 29.82 42 27 42 24c0-8.56-5.99-15.72-14-17.54v4.13c5.78 1.72 10 7.07 10 13.41zM8.55 6L6 8.55 15.45 18H6v12h8l10 10V26.55l8.51 8.51c-1.34 1.03-2.85 1.86-4.51 2.36v4.13a17.94 17.94 0 0 0 7.37-3.62L39.45 42 42 39.45l-18-18L8.55 6zM24 8l-4.18 4.18L24 16.36V8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-low">\n      <path d="M14 18v12h8l10 10V8L22 18h-8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-medium">\n      <path d="M37 24c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zm-27-6v12h8l10 10V8L18 18h-8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-high">\n      <path d="M6 18v12h8l10 10V8L14 18H6zm27 6c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zM28 6.46v4.13c5.78 1.72 10 7.07 10 13.41s-4.22 11.69-10 13.41v4.13c8.01-1.82 14-8.97 14-17.54S36.01 8.28 28 6.46z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-spinner">\n      <path d="M18.8 21l9.53-16.51C26.94 4.18 25.49 4 24 4c-4.8 0-9.19 1.69-12.64 4.51l7.33 12.69.11-.2zm24.28-3c-1.84-5.85-6.3-10.52-11.99-12.68L23.77 18h19.31zm.52 2H28.62l.58 1 9.53 16.5C41.99 33.94 44 29.21 44 24c0-1.37-.14-2.71-.4-4zm-26.53 4l-7.8-13.5C6.01 14.06 4 18.79 4 24c0 1.37.14 2.71.4 4h14.98l-2.31-4zM4.92 30c1.84 5.85 6.3 10.52 11.99 12.68L24.23 30H4.92zm22.54 0l-7.8 13.51c1.4.31 2.85.49 4.34.49 4.8 0 9.19-1.69 12.64-4.51L29.31 26.8 27.46 30z"></path>\n    </symbol>\n    <symbol viewBox="0 0 24 24" id="vjs-icon-hd">\n      <path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-chapters">\n      <path d="M6 26h4v-4H6v4zm0 8h4v-4H6v4zm0-16h4v-4H6v4zm8 8h28v-4H14v4zm0 8h28v-4H14v4zm0-20v4h28v-4H14z"></path>\n    </symbol>\n    <symbol viewBox="0 0 40 40" id="vjs-icon-downloading">\n      <path d="M18.208 36.875q-3.208-.292-5.979-1.729-2.771-1.438-4.812-3.729-2.042-2.292-3.188-5.229-1.146-2.938-1.146-6.23 0-6.583 4.334-11.416 4.333-4.834 10.833-5.5v3.166q-5.167.75-8.583 4.646Q6.25 14.75 6.25 19.958q0 5.209 3.396 9.104 3.396 3.896 8.562 4.646zM20 28.417L11.542 20l2.083-2.083 4.917 4.916v-11.25h2.916v11.25l4.875-4.916L28.417 20zm1.792 8.458v-3.167q1.833-.25 3.541-.958 1.709-.708 3.167-1.875l2.333 2.292q-1.958 1.583-4.25 2.541-2.291.959-4.791 1.167zm6.791-27.792q-1.541-1.125-3.25-1.854-1.708-.729-3.541-1.021V3.042q2.5.25 4.77 1.208 2.271.958 4.271 2.5zm4.584 21.584l-2.25-2.25q1.166-1.5 1.854-3.209.687-1.708.937-3.541h3.209q-.292 2.5-1.229 4.791-.938 2.292-2.521 4.209zm.541-12.417q-.291-1.833-.958-3.562-.667-1.73-1.833-3.188l2.375-2.208q1.541 1.916 2.458 4.208.917 2.292 1.167 4.75z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-file-download">\n      <path d="M10.8 40.55q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h26.35v-7.7h3.4v7.7q0 1.4-1 2.4t-2.4 1zM24 32.1L13.9 22.05l2.45-2.45 5.95 5.95V7.15h3.4v18.4l5.95-5.95 2.45 2.45z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-file-download-done">\n      <path d="M9.8 40.5v-3.45h28.4v3.45zm9.2-9.05L7.4 19.85l2.45-2.35L19 26.65l19.2-19.2 2.4 2.4z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-file-download-off">\n      <path d="M4.9 4.75L43.25 43.1 41 45.3l-4.75-4.75q-.05.05-.075.025-.025-.025-.075-.025H10.8q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h22.05l-7-7-1.85 1.8L13.9 21.9l1.85-1.85L2.7 7zm26.75 14.7l2.45 2.45-3.75 3.8-2.45-2.5zM25.7 7.15V21.1l-3.4-3.45V7.15z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-share">\n      <path d="M36 32.17c-1.52 0-2.89.59-3.93 1.54L17.82 25.4c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31A5.83 5.83 0 1 0 36 32.17z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-cog">\n      <path d="M38.86 25.95c.08-.64.14-1.29.14-1.95s-.06-1.31-.14-1.95l4.23-3.31c.38-.3.49-.84.24-1.28l-4-6.93c-.25-.43-.77-.61-1.22-.43l-4.98 2.01c-1.03-.79-2.16-1.46-3.38-1.97L29 4.84c-.09-.47-.5-.84-1-.84h-8c-.5 0-.91.37-.99.84l-.75 5.3a14.8 14.8 0 0 0-3.38 1.97L9.9 10.1a1 1 0 0 0-1.22.43l-4 6.93c-.25.43-.14.97.24 1.28l4.22 3.31C9.06 22.69 9 23.34 9 24s.06 1.31.14 1.95l-4.22 3.31c-.38.3-.49.84-.24 1.28l4 6.93c.25.43.77.61 1.22.43l4.98-2.01c1.03.79 2.16 1.46 3.38 1.97l.75 5.3c.08.47.49.84.99.84h8c.5 0 .91-.37.99-.84l.75-5.3a14.8 14.8 0 0 0 3.38-1.97l4.98 2.01a1 1 0 0 0 1.22-.43l4-6.93c.25-.43.14-.97-.24-1.28l-4.22-3.31zM24 31c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-square">\n      <path d="M36 8H12c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H12V12h24v24z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-circle">\n      <circle cx="24" cy="24" r="20"></circle>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-circle-outline">\n      <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-circle-inner-circle">\n      <path d="M24 4C12.97 4 4 12.97 4 24s8.97 20 20 20 20-8.97 20-20S35.03 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm6-16c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6 6 2.69 6 6z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-cancel">\n      <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-replay">\n      <path d="M24 10V2L14 12l10 10v-8c6.63 0 12 5.37 12 12s-5.37 12-12 12-12-5.37-12-12H8c0 8.84 7.16 16 16 16s16-7.16 16-16-7.16-16-16-16z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-repeat">\n      <path d="M14 14h20v6l8-8-8-8v6H10v12h4v-8zm20 20H14v-6l-8 8 8 8v-6h24V26h-4v8z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-replay-5">\n      <path d="M17.689 98l-8.697 8.696 8.697 8.697 2.486-2.485-4.32-4.319h1.302c4.93 0 9.071 1.722 12.424 5.165 3.352 3.443 5.029 7.638 5.029 12.584h3.55c0-2.958-.553-5.73-1.658-8.313-1.104-2.583-2.622-4.841-4.555-6.774-1.932-1.932-4.19-3.45-6.773-4.555-2.584-1.104-5.355-1.657-8.313-1.657H15.5l4.615-4.615zm-8.08 21.659v13.861h11.357v5.008H9.609V143h12.7c.834 0 1.55-.298 2.146-.894.596-.597.895-1.31.895-2.145v-7.781c0-.835-.299-1.55-.895-2.147a2.929 2.929 0 0 0-2.147-.894h-8.227v-5.096H25.35v-4.384z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-replay-10">\n      <path d="M42.315 125.63c0-4.997-1.694-9.235-5.08-12.713-3.388-3.479-7.571-5.218-12.552-5.218h-1.315l4.363 4.363-2.51 2.51-8.787-8.786L25.221 97l2.45 2.45-4.662 4.663h1.375c2.988 0 5.788.557 8.397 1.673 2.61 1.116 4.892 2.65 6.844 4.602 1.953 1.953 3.487 4.234 4.602 6.844 1.116 2.61 1.674 5.41 1.674 8.398zM8.183 142v-19.657H3.176V117.8h9.643V142zm13.63 0c-1.156 0-2.127-.393-2.912-1.178-.778-.778-1.168-1.746-1.168-2.902v-16.04c0-1.156.393-2.127 1.178-2.912.779-.779 1.746-1.168 2.902-1.168h7.696c1.156 0 2.126.392 2.911 1.177.779.78 1.168 1.747 1.168 2.903v16.04c0 1.156-.392 2.127-1.177 2.912-.779.779-1.746 1.168-2.902 1.168zm.556-4.636h6.583v-15.02H22.37z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-replay-30">\n      <path d="M26.047 97l-8.733 8.732 8.733 8.733 2.496-2.494-4.336-4.338h1.307c4.95 0 9.108 1.73 12.474 5.187 3.367 3.458 5.051 7.668 5.051 12.635h3.565c0-2.97-.556-5.751-1.665-8.346-1.109-2.594-2.633-4.862-4.574-6.802-1.94-1.941-4.208-3.466-6.803-4.575-2.594-1.109-5.375-1.664-8.345-1.664H23.85l4.634-4.634zM2.555 117.531v4.688h10.297v5.25H5.873v4.687h6.979v5.156H2.555V142H13.36c1.061 0 1.95-.395 2.668-1.186.718-.79 1.076-1.772 1.076-2.94v-16.218c0-1.168-.358-2.149-1.076-2.94-.717-.79-1.607-1.185-2.668-1.185zm22.482.14c-1.149 0-2.11.39-2.885 1.165-.78.78-1.172 1.744-1.172 2.893v15.943c0 1.149.388 2.11 1.163 2.885.78.78 1.745 1.172 2.894 1.172h7.649c1.148 0 2.11-.388 2.884-1.163.78-.78 1.17-1.745 1.17-2.894v-15.943c0-1.15-.386-2.111-1.16-2.885-.78-.78-1.746-1.172-2.894-1.172zm.553 4.518h6.545v14.93H25.59z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-forward-5">\n      <path d="M29.508 97l-2.431 2.43 4.625 4.625h-1.364c-2.965 0-5.742.554-8.332 1.66-2.589 1.107-4.851 2.629-6.788 4.566-1.937 1.937-3.458 4.2-4.565 6.788-1.107 2.59-1.66 5.367-1.66 8.331h3.557c0-4.957 1.68-9.16 5.04-12.611 3.36-3.45 7.51-5.177 12.451-5.177h1.304l-4.326 4.33 2.49 2.49 8.715-8.716zm-9.783 21.61v13.89h11.382v5.018H19.725V142h12.727a2.93 2.93 0 0 0 2.15-.896 2.93 2.93 0 0 0 .896-2.15v-7.798c0-.837-.299-1.554-.896-2.152a2.93 2.93 0 0 0-2.15-.896h-8.245V123h11.29v-4.392z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-forward-10">\n      <path d="M23.119 97l-2.386 2.383 4.538 4.538h-1.339c-2.908 0-5.633.543-8.173 1.63-2.54 1.085-4.76 2.577-6.66 4.478-1.9 1.9-3.392 4.12-4.478 6.66-1.085 2.54-1.629 5.264-1.629 8.172h3.49c0-4.863 1.648-8.986 4.944-12.372 3.297-3.385 7.368-5.078 12.216-5.078h1.279l-4.245 4.247 2.443 2.442 8.55-8.55zm-9.52 21.45v4.42h4.871V142h4.513v-23.55zm18.136 0c-1.125 0-2.066.377-2.824 1.135-.764.764-1.148 1.709-1.148 2.834v15.612c0 1.124.38 2.066 1.139 2.824.764.764 1.708 1.145 2.833 1.145h7.489c1.125 0 2.066-.378 2.824-1.136.764-.764 1.145-1.709 1.145-2.833v-15.612c0-1.125-.378-2.067-1.136-2.825-.764-.764-1.708-1.145-2.833-1.145zm.54 4.42h6.408v14.617h-6.407z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-forward-30">\n      <path d="M25.549 97l-2.437 2.434 4.634 4.635H26.38c-2.97 0-5.753.555-8.347 1.664-2.594 1.109-4.861 2.633-6.802 4.574-1.94 1.94-3.465 4.207-4.574 6.802-1.109 2.594-1.664 5.377-1.664 8.347h3.565c0-4.967 1.683-9.178 5.05-12.636 3.366-3.458 7.525-5.187 12.475-5.187h1.307l-4.335 4.338 2.495 2.494 8.732-8.732zm-11.553 20.53v4.689h10.297v5.249h-6.978v4.688h6.978v5.156H13.996V142h10.808c1.06 0 1.948-.395 2.666-1.186.718-.79 1.077-1.771 1.077-2.94v-16.217c0-1.169-.36-2.15-1.077-2.94-.718-.79-1.605-1.186-2.666-1.186zm21.174.168c-1.149 0-2.11.389-2.884 1.163-.78.78-1.172 1.745-1.172 2.894v15.942c0 1.15.388 2.11 1.162 2.885.78.78 1.745 1.17 2.894 1.17h7.649c1.149 0 2.11-.386 2.885-1.16.78-.78 1.17-1.746 1.17-2.895v-15.942c0-1.15-.387-2.11-1.161-2.885-.78-.78-1.745-1.172-2.894-1.172zm.552 4.516h6.542v14.931h-6.542z"></path>\n    </symbol>\n    <symbol viewBox="0 0 512 512" id="vjs-icon-audio-description">\n      <g fill-rule="evenodd"><path d="M227.29 381.351V162.993c50.38-1.017 89.108-3.028 117.631 17.126 27.374 19.342 48.734 56.965 44.89 105.325-4.067 51.155-41.335 94.139-89.776 98.475-24.085 2.155-71.972 0-71.972 0s-.84-1.352-.773-2.568m48.755-54.804c31.43 1.26 53.208-16.633 56.495-45.386 4.403-38.51-21.188-63.552-58.041-60.796v103.612c-.036 1.466.575 2.22 1.546 2.57"></path><path d="M383.78 381.328c13.336 3.71 17.387-11.06 23.215-21.408 12.722-22.571 22.294-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.226 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894"></path><path d="M425.154 381.328c13.336 3.71 17.384-11.061 23.215-21.408 12.721-22.571 22.291-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.511c-.586 3.874 2.226 7.315 3.866 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894"></path><path d="M466.26 381.328c13.337 3.71 17.385-11.061 23.216-21.408 12.722-22.571 22.292-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.225 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894M4.477 383.005H72.58l18.573-28.484 64.169-.135s.065 19.413.065 28.62h48.756V160.307h-58.816c-5.653 9.537-140.85 222.697-140.85 222.697zm152.667-145.282v71.158l-40.453-.27 40.453-70.888z"></path></g>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-next-item">\n      <path d="M12 36l17-12-17-12v24zm20-24v24h4V12h-4z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-previous-item">\n      <path d="M12 12h4v24h-4zm7 12l17 12V12z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-shuffle">\n      <path d="M21.17 18.34L10.83 8 8 10.83l10.34 10.34 2.83-2.83zM29 8l4.09 4.09L8 37.17 10.83 40l25.09-25.09L40 19V8H29zm.66 18.83l-2.83 2.83 6.26 6.26L29 40h11V29l-4.09 4.09-6.25-6.26z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-cast">\n      <path d="M42 6H6c-2.21 0-4 1.79-4 4v6h4v-6h36v28H28v4h14c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4zM2 36v6h6c0-3.31-2.69-6-6-6zm0-8v4c5.52 0 10 4.48 10 10h4c0-7.73-6.27-14-14-14zm0-8v4c9.94 0 18 8.06 18 18h4c0-12.15-9.85-22-22-22z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-picture-in-picture-enter">\n      <path d="M38 22H22v11.99h16V22zm8 16V9.96C46 7.76 44.2 6 42 6H6C3.8 6 2 7.76 2 9.96V38c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4zm-4 .04H6V9.94h36v28.1z"></path>\n    </symbol>\n    <symbol viewBox="0 0 22 18" id="vjs-icon-picture-in-picture-exit">\n      <path d="M18 4H4v10h14V4zm4 12V1.98C22 .88 21.1 0 20 0H2C.9 0 0 .88 0 1.98V16c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H2V1.97h18v14.05z"></path>\n      <path fill="none" d="M-1-3h24v24H-1z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-facebook">\n      <path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759H734V905H479V609h255V391q0-186 104-288.5T1115 0q147 0 228 12z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-linkedin">\n      <path d="M477 625v991H147V625h330zm21-306q1 73-50.5 122T312 490h-2q-82 0-132-49t-50-122q0-74 51.5-122.5T314 148t133 48.5T498 319zm1166 729v568h-329v-530q0-105-40.5-164.5T1168 862q-63 0-105.5 34.5T999 982q-11 30-11 81v553H659q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5T1285 602q171 0 275 113.5t104 332.5z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-twitter">\n      <path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5T1369.5 1125 1185 1335.5t-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5T285 1033q33 5 61 5 43 0 85-11-112-23-185.5-111.5T172 710v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5T884 653q-8-38-8-74 0-134 94.5-228.5T1199 256q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-tumblr">\n      <path d="M1328 1329l80 237q-23 35-111 66t-177 32q-104 2-190.5-26T787 1564t-95-106-55.5-120-16.5-118V676H452V461q72-26 129-69.5t91-90 58-102 34-99T779 12q1-5 4.5-8.5T791 0h244v424h333v252h-334v518q0 30 6.5 56t22.5 52.5 49.5 41.5 81.5 14q78-2 134-29z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-pinterest">\n      <path d="M1664 896q0 209-103 385.5T1281.5 1561 896 1664q-111 0-218-32 59-93 78-164 9-34 54-211 20 39 73 67.5t114 28.5q121 0 216-68.5t147-188.5 52-270q0-114-59.5-214T1180 449t-255-63q-105 0-196 29t-154.5 77-109 110.5-67 129.5T377 866q0 104 40 183t117 111q30 12 38-20 2-7 8-31t8-30q6-23-11-43-51-61-51-151 0-151 104.5-259.5T904 517q151 0 235.5 82t84.5 213q0 170-68.5 289T980 1220q-61 0-98-43.5T859 1072q8-35 26.5-93.5t30-103T927 800q0-50-27-83t-77-33q-62 0-105 57t-43 142q0 73 25 122l-99 418q-17 70-13 177-206-91-333-281T128 896q0-209 103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z"></path>\n    </symbol>\n  </defs>\n</svg>',"image/svg+xml")).querySelector("parsererror")?(l.warn("Failed to load SVG Icons. Falling back to Font Icons."),this.options_.experimentalSvgIcons=null):((i=s.documentElement).style.display="none",this.el_.appendChild(i),this.addClass("vjs-svg-icons-enabled"))),this.initChildren(),this.isAudio("audio"===e.nodeName.toLowerCase()),this.controls()?this.addClass("vjs-controls-enabled"):this.addClass("vjs-controls-disabled"),this.el_.setAttribute("role","region"),this.isAudio()?this.el_.setAttribute("aria-label",this.localize("Audio Player")):this.el_.setAttribute("aria-label",this.localize("Video Player")),this.isAudio()&&this.addClass("vjs-audio"),me&&this.addClass("vjs-touch-enabled"),u||this.addClass("vjs-workinghover"),M.players[this.id_]=this,D.split(".")[0]);this.addClass("vjs-v"+s),this.userActive(!0),this.reportUserActivity(),this.one("play",e=>this.listenForUserActivity_(e)),this.on("keydown",e=>this.handleKeyDown(e)),this.on("languagechange",e=>this.handleLanguagechange(e)),this.breakpoints(this.options_.breakpoints),this.responsive(this.options_.responsive),this.on("ready",()=>{this.audioPosterMode(this.options_.audioPosterMode),this.audioOnlyMode(this.options_.audioOnlyMode)})}dispose(){var e;this.trigger("dispose"),this.off("dispose"),_(document,this.fsApi_.fullscreenchange,this.boundDocumentFullscreenChange_),_(document,"keydown",this.boundFullWindowOnEscKey_),this.styleEl_&&this.styleEl_.parentNode&&(this.styleEl_.parentNode.removeChild(this.styleEl_),this.styleEl_=null),M.players[this.id_]=null,this.tag&&this.tag.player&&(this.tag.player=null),this.el_&&this.el_.player&&(this.el_.player=null),this.tech_&&(this.tech_.dispose(),this.isPosterFromTech_=!1,this.poster_=""),this.playerElIngest_&&(this.playerElIngest_=null),this.tag&&(this.tag=null),e=this,si[e.id()]=null,E.names.forEach(e=>{e=this[E[e].getterName]();e&&e.off&&e.off()}),super.dispose({restoreEl:this.options_.restoreEl})}createEl(){let t=this.tag,s,e=this.playerElIngest_=t.parentNode&&t.parentNode.hasAttribute&&t.parentNode.hasAttribute("data-vjs-player");const i="video-js"===this.tag.tagName.toLowerCase(),r=(e?s=this.el_=t.parentNode:i||(s=this.el_=super.createEl("div")),Me(t));if(i){for(s=this.el_=t,t=this.tag=document.createElement("video");s.children.length;)t.appendChild(s.firstChild);Se(s,"video-js")||xe(s,"video-js"),s.appendChild(t),e=this.playerElIngest_=s,Object.keys(s).forEach(e=>{try{t[e]=s[e]}catch(e){}})}t.setAttribute("tabindex","-1"),r.tabindex="-1",c&&he&&(t.setAttribute("role","application"),r.role="application"),t.removeAttribute("width"),t.removeAttribute("height"),"width"in r&&delete r.width,"height"in r&&delete r.height,Object.getOwnPropertyNames(r).forEach(function(e){i&&"class"===e||s.setAttribute(e,r[e]),i&&t.setAttribute(e,r[e])}),t.playerId=t.id,t.id+="_html5_api",t.className="vjs-tech",(t.player=s.player=this).addClass("vjs-paused");var n,a=["IS_SMART_TV","IS_TIZEN","IS_WEBOS","IS_ANDROID","IS_IPAD","IS_IPHONE"].filter(e=>fe[e]).map(e=>"vjs-device-"+e.substring(3).toLowerCase().replace(/\_/g,"-")),o=(this.addClass(...a),!0!==window.VIDEOJS_NO_DYNAMIC_STYLE&&(this.styleEl_=st("vjs-styles-dimensions"),a=Ke(".vjs-styles-defaults"),(n=Ke("head")).insertBefore(this.styleEl_,a?a.nextSibling:n.firstChild)),this.fill_=!1,this.fluid_=!1,this.width(this.options_.width),this.height(this.options_.height),this.fill(this.options_.fill),this.fluid(this.options_.fluid),this.aspectRatio(this.options_.aspectRatio),this.crossOrigin(this.options_.crossOrigin||this.options_.crossorigin),t.getElementsByTagName("a"));for(let e=0;e<o.length;e++){var l=o.item(e);xe(l,"vjs-hidden"),l.setAttribute("hidden","hidden")}return t.initNetworkState_=t.networkState,t.parentNode&&!e&&t.parentNode.insertBefore(s,t),Ee(t,s),this.children_.unshift(t),this.el_.setAttribute("lang",this.language_),this.el_.setAttribute("translate","no"),this.el_=s}crossOrigin(e){if("undefined"==typeof e)return this.techGet_("crossOrigin");null!==e&&"anonymous"!==e&&"use-credentials"!==e?l.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${e}"`):(this.techCall_("setCrossOrigin",e),this.posterImage&&this.posterImage.crossOrigin(e))}width(e){return this.dimension("width",e)}height(e){return this.dimension("height",e)}dimension(e,t){var s,i=e+"_";if(void 0===t)return this[i]||0;""===t||"auto"===t?(this[i]=void 0,this.updateStyleEl_()):(s=parseFloat(t),isNaN(s)?l.error(`Improper value "${t}" supplied for for `+e):(this[i]=s,this.updateStyleEl_()))}fluid(e){if(void 0===e)return!!this.fluid_;var t;this.fluid_=!!e,vt(this)&&this.off(["playerreset","resize"],this.boundUpdateStyleEl_),e?(this.addClass("vjs-fluid"),this.fill(!1),e=this,t=()=>{this.on(["playerreset","resize"],this.boundUpdateStyleEl_)},vt(e)?t():(e.eventedCallbacks||(e.eventedCallbacks=[]),e.eventedCallbacks.push(t))):this.removeClass("vjs-fluid"),this.updateStyleEl_()}fill(e){if(void 0===e)return!!this.fill_;this.fill_=!!e,e?(this.addClass("vjs-fill"),this.fluid(!1)):this.removeClass("vjs-fill")}aspectRatio(e){if(void 0===e)return this.aspectRatio_;if(!/^\d+\:\d+$/.test(e))throw new Error("Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.");this.aspectRatio_=e,this.fluid(!0),this.updateStyleEl_()}updateStyleEl_(){if(!0===window.VIDEOJS_NO_DYNAMIC_STYLE){const e="number"==typeof this.width_?this.width_:this.options_.width,t="number"==typeof this.height_?this.height_:this.options_.height;var r=this.tech_&&this.tech_.el();void(r&&(0<=e&&(r.width=e),0<=t)&&(r.height=t))}else{let e,t,s,i;r=(s=void 0!==this.aspectRatio_&&"auto"!==this.aspectRatio_?this.aspectRatio_:0<this.videoWidth()?this.videoWidth()+":"+this.videoHeight():"16:9").split(":"),r=r[1]/r[0];e=void 0!==this.width_?this.width_:void 0!==this.height_?this.height_/r:this.videoWidth()||300,t=void 0!==this.height_?this.height_:e*r,i=/^[^a-zA-Z]/.test(this.id())?"dimensions-"+this.id():this.id()+"-dimensions",this.addClass(i),it(this.styleEl_,`
+      .${i} {
+        width: ${e}px;
+        height: ${t}px;
+      }
+
+      .${i}.vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: ${100*r}%;
+      }
+    `)}}loadTech_(e,t){this.tech_&&this.unloadTech_();var s=y(e),i=e.charAt(0).toLowerCase()+e.slice(1);"Html5"!==s&&this.tag&&(j.getTech("Html5").disposeMediaElement(this.tag),this.tag.player=null,this.tag=null),this.techName_=s,this.isReady_=!1;let r=this.autoplay();const n={source:t,autoplay:r="string"==typeof this.autoplay()||!0===this.autoplay()&&this.options_.normalizeAutoplay?!1:r,nativeControlsForTouch:this.options_.nativeControlsForTouch,playerId:this.id(),techId:this.id()+`_${i}_api`,playsinline:this.options_.playsinline,preload:this.options_.preload,loop:this.options_.loop,disablePictureInPicture:this.options_.disablePictureInPicture,muted:this.options_.muted,poster:this.poster(),language:this.language(),playerElIngest:this.playerElIngest_||!1,"vtt.js":this.options_["vtt.js"],canOverridePoster:!!this.options_.techCanOverridePoster,enableSourceset:this.options_.enableSourceset};E.names.forEach(e=>{e=E[e];n[e.getterName]=this[e.privateName]}),Object.assign(n,this.options_[s]),Object.assign(n,this.options_[i]),Object.assign(n,this.options_[e.toLowerCase()]),this.tag&&(n.tag=this.tag),t&&t.src===this.cache_.src&&0<this.cache_.currentTime&&(n.startTime=this.cache_.currentTime);i=j.getTech(e);if(!i)throw new Error(`No Tech named '${s}' exists! '${s}' should be registered using videojs.registerTech()'`);this.tech_=new i(n),this.tech_.ready(f(this,this.handleTechReady_),!0),Ut(this.textTracksJson_||[],this.tech_),Kr.forEach(t=>{this.on(this.tech_,t,e=>this[`handleTech${y(t)}_`](e))}),Object.keys(Wr).forEach(t=>{this.on(this.tech_,t,e=>{0===this.tech_.playbackRate()&&this.tech_.seeking()?this.queuedCallbacks_.push({callback:this[`handleTech${Wr[t]}_`].bind(this),event:e}):this[`handleTech${Wr[t]}_`](e)})}),this.on(this.tech_,"loadstart",e=>this.handleTechLoadStart_(e)),this.on(this.tech_,"sourceset",e=>this.handleTechSourceset_(e)),this.on(this.tech_,"waiting",e=>this.handleTechWaiting_(e)),this.on(this.tech_,"ended",e=>this.handleTechEnded_(e)),this.on(this.tech_,"seeking",e=>this.handleTechSeeking_(e)),this.on(this.tech_,"play",e=>this.handleTechPlay_(e)),this.on(this.tech_,"pause",e=>this.handleTechPause_(e)),this.on(this.tech_,"durationchange",e=>this.handleTechDurationChange_(e)),this.on(this.tech_,"fullscreenchange",(e,t)=>this.handleTechFullscreenChange_(e,t)),this.on(this.tech_,"fullscreenerror",(e,t)=>this.handleTechFullscreenError_(e,t)),this.on(this.tech_,"enterpictureinpicture",e=>this.handleTechEnterPictureInPicture_(e)),this.on(this.tech_,"leavepictureinpicture",e=>this.handleTechLeavePictureInPicture_(e)),this.on(this.tech_,"error",e=>this.handleTechError_(e)),this.on(this.tech_,"posterchange",e=>this.handleTechPosterChange_(e)),this.on(this.tech_,"textdata",e=>this.handleTechTextData_(e)),this.on(this.tech_,"ratechange",e=>this.handleTechRateChange_(e)),this.on(this.tech_,"loadedmetadata",this.boundUpdateStyleEl_),this.usingNativeControls(this.techGet_("controls")),this.controls()&&!this.usingNativeControls()&&this.addTechControlsListeners_(),this.tech_.el().parentNode===this.el()||"Html5"===s&&this.tag||Ee(this.tech_.el(),this.el()),this.tag&&(this.tag.player=null,this.tag=null)}unloadTech_(){E.names.forEach(e=>{e=E[e];this[e.privateName]=this[e.getterName]()}),this.textTracksJson_=$t(this.tech_),this.isReady_=!1,this.tech_.dispose(),this.tech_=!1,this.isPosterFromTech_&&(this.poster_="",this.trigger("posterchange")),this.isPosterFromTech_=!1}tech(e){return void 0===e&&l.warn("Using the tech directly can be dangerous. I hope you know what you're doing.\nSee https://github.com/videojs/video.js/issues/2617 for more info.\n"),this.tech_}version(){return{"video.js":D}}addTechControlsListeners_(){this.removeTechControlsListeners_(),this.on(this.tech_,"click",this.boundHandleTechClick_),this.on(this.tech_,"dblclick",this.boundHandleTechDoubleClick_),this.on(this.tech_,"touchstart",this.boundHandleTechTouchStart_),this.on(this.tech_,"touchmove",this.boundHandleTechTouchMove_),this.on(this.tech_,"touchend",this.boundHandleTechTouchEnd_),this.on(this.tech_,"tap",this.boundHandleTechTap_)}removeTechControlsListeners_(){this.off(this.tech_,"tap",this.boundHandleTechTap_),this.off(this.tech_,"touchstart",this.boundHandleTechTouchStart_),this.off(this.tech_,"touchmove",this.boundHandleTechTouchMove_),this.off(this.tech_,"touchend",this.boundHandleTechTouchEnd_),this.off(this.tech_,"click",this.boundHandleTechClick_),this.off(this.tech_,"dblclick",this.boundHandleTechDoubleClick_)}handleTechReady_(){this.triggerReady(),this.cache_.volume&&this.techCall_("setVolume",this.cache_.volume),this.handleTechPosterChange_(),this.handleTechDurationChange_()}handleTechLoadStart_(){this.removeClass("vjs-ended","vjs-seeking"),this.error(null),this.handleTechDurationChange_(),this.paused()&&this.hasStarted(!1),this.trigger("loadstart"),this.manualAutoplay_(!0===this.autoplay()&&this.options_.normalizeAutoplay?"play":this.autoplay())}manualAutoplay_(t){if(this.tech_&&"string"==typeof t){var s=()=>{const e=this.muted(),t=(this.muted(!0),()=>{this.muted(e)});this.playTerminatedQueue_.push(t);var s=this.play();if(zt(s))return s.catch(e=>{throw t(),new Error("Rejection at manualAutoplay. Restoring muted value. "+(e||""))})};let e;if("any"!==t||this.muted()?e="muted"!==t||this.muted()?this.play():s():zt(e=this.play())&&(e=e.catch(s)),zt(e))return e.then(()=>{this.trigger({type:"autoplay-success",autoplay:t})}).catch(()=>{this.trigger({type:"autoplay-failure",autoplay:t})})}}updateSourceCaches_(e=""){let t=e,s="";"string"!=typeof t&&(t=e.src,s=e.type),this.cache_.source=this.cache_.source||{},this.cache_.sources=this.cache_.sources||[],t&&!s&&(s=((e,t)=>{if(!t)return"";if(e.cache_.source.src===t&&e.cache_.source.type)return e.cache_.source.type;var s=e.cache_.sources.filter(e=>e.src===t);if(s.length)return s[0].type;var i=e.$$("source");for(let e=0;e<i.length;e++){var r=i[e];if(r.type&&r.src&&r.src===t)return r.type}return pi(t)})(this,t)),this.cache_.source=h({},e,{src:t,type:s});var e=this.cache_.sources.filter(e=>e.src&&e.src===t),i=[],r=this.$$("source"),n=[];for(let e=0;e<r.length;e++){var a=Me(r[e]);i.push(a),a.src&&a.src===t&&n.push(a.src)}n.length&&!e.length?this.cache_.sources=i:e.length||(this.cache_.sources=[this.cache_.source]),this.cache_.src=t}handleTechSourceset_(t){if(!this.changingSrc_){let e=e=>this.updateSourceCaches_(e);var s=this.currentSource().src,i=t.src;(e=!s||/^blob:/.test(s)||!/^blob:/.test(i)||this.lastSource_&&(this.lastSource_.tech===i||this.lastSource_.player===s)?e:()=>{})(i),t.src||this.tech_.any(["sourceset","loadstart"],e=>{"sourceset"!==e.type&&(e=this.techGet_("currentSrc"),this.lastSource_.tech=e,this.updateSourceCaches_(e))})}this.lastSource_={player:this.currentSource().src,tech:t.src},this.trigger({src:t.src,type:"sourceset"})}hasStarted(e){if(void 0===e)return this.hasStarted_;e!==this.hasStarted_&&(this.hasStarted_=e,this.hasStarted_?this.addClass("vjs-has-started"):this.removeClass("vjs-has-started"))}handleTechPlay_(){this.removeClass("vjs-ended","vjs-paused"),this.addClass("vjs-playing"),this.hasStarted(!0),this.trigger("play")}handleTechRateChange_(){0<this.tech_.playbackRate()&&0===this.cache_.lastPlaybackRate&&(this.queuedCallbacks_.forEach(e=>e.callback(e.event)),this.queuedCallbacks_=[]),this.cache_.lastPlaybackRate=this.tech_.playbackRate(),this.trigger("ratechange")}handleTechWaiting_(){this.addClass("vjs-waiting"),this.trigger("waiting");const e=this.currentTime(),t=()=>{e!==this.currentTime()&&(this.removeClass("vjs-waiting"),this.off("timeupdate",t))};this.on("timeupdate",t)}handleTechCanPlay_(){this.removeClass("vjs-waiting"),this.trigger("canplay")}handleTechCanPlayThrough_(){this.removeClass("vjs-waiting"),this.trigger("canplaythrough")}handleTechPlaying_(){this.removeClass("vjs-waiting"),this.trigger("playing")}handleTechSeeking_(){this.addClass("vjs-seeking"),this.trigger("seeking")}handleTechSeeked_(){this.removeClass("vjs-seeking","vjs-ended"),this.trigger("seeked")}handleTechPause_(){this.removeClass("vjs-playing"),this.addClass("vjs-paused"),this.trigger("pause")}handleTechEnded_(){this.addClass("vjs-ended"),this.removeClass("vjs-waiting"),this.options_.loop?(this.currentTime(0),this.play()):this.paused()||this.pause(),this.trigger("ended")}handleTechDurationChange_(){this.duration(this.techGet_("duration"))}handleTechClick_(e){!this.controls_||void 0!==this.options_&&void 0!==this.options_.userActions&&void 0!==this.options_.userActions.click&&!1===this.options_.userActions.click||(void 0!==this.options_&&void 0!==this.options_.userActions&&"function"==typeof this.options_.userActions.click?this.options_.userActions.click.call(this,e):this.paused()?k(this.play()):this.pause())}handleTechDoubleClick_(t){!this.controls_||Array.prototype.some.call(this.$$(".vjs-control-bar, .vjs-modal-dialog"),e=>e.contains(t.target))||void 0!==this.options_&&void 0!==this.options_.userActions&&void 0!==this.options_.userActions.doubleClick&&!1===this.options_.userActions.doubleClick||(void 0!==this.options_&&void 0!==this.options_.userActions&&"function"==typeof this.options_.userActions.doubleClick?this.options_.userActions.doubleClick.call(this,t):this.isFullscreen()?this.exitFullscreen():this.requestFullscreen())}handleTechTap_(){this.userActive(!this.userActive())}handleTechTouchStart_(){this.userWasActive=this.userActive()}handleTechTouchMove_(){this.userWasActive&&this.reportUserActivity()}handleTechTouchEnd_(e){e.cancelable&&e.preventDefault()}toggleFullscreenClass_(){this.isFullscreen()?this.addClass("vjs-fullscreen"):this.removeClass("vjs-fullscreen")}documentFullscreenChange_(t){t=t.target.player;if(!t||t===this){t=this.el();let e=document[this.fsApi_.fullscreenElement]===t;!e&&t.matches&&(e=t.matches(":"+this.fsApi_.fullscreen)),this.isFullscreen(e)}}handleTechFullscreenChange_(e,t){t&&(t.nativeIOSFullscreen&&(this.addClass("vjs-ios-native-fs"),this.tech_.one("webkitendfullscreen",()=>{this.removeClass("vjs-ios-native-fs")})),this.isFullscreen(t.isFullscreen))}handleTechFullscreenError_(e,t){this.trigger("fullscreenerror",t)}togglePictureInPictureClass_(){this.isInPictureInPicture()?this.addClass("vjs-picture-in-picture"):this.removeClass("vjs-picture-in-picture")}handleTechEnterPictureInPicture_(e){this.isInPictureInPicture(!0)}handleTechLeavePictureInPicture_(e){this.isInPictureInPicture(!1)}handleTechError_(){var e=this.tech_.error();e&&this.error(e)}handleTechTextData_(){let e=1<arguments.length?arguments[1]:null;this.trigger("textdata",e)}getCache(){return this.cache_}resetCache_(){this.cache_={currentTime:0,initTime:0,inactivityTimeout:this.options_.inactivityTimeout,duration:NaN,lastVolume:1,lastPlaybackRate:this.defaultPlaybackRate(),media:null,src:"",source:{},sources:[],playbackRates:[],volume:1}}techCall_(t,s){this.ready(function(){if(t in oi)return e=this.middleware_,this.tech_[t](e.reduce(hi(t),s));if(t in li)return ni(this.middleware_,this.tech_,t,s);var e;try{this.tech_&&this.tech_[t](s)}catch(e){throw l(e),e}},!0)}techGet_(t){if(this.tech_&&this.tech_.isReady_){if(t in ai)return e=this.middleware_,s=this.tech_,e.reduceRight(hi(t),s[t]());if(t in li)return ni(this.middleware_,this.tech_,t);var e,s;try{return this.tech_[t]()}catch(e){throw void 0===this.tech_[t]?l(`Video.js: ${t} method not defined for ${this.techName_} playback technology.`,e):"TypeError"===e.name?(l(`Video.js: ${t} unavailable on ${this.techName_} playback technology element.`,e),this.tech_.isReady_=!1):l(e),e}}}play(){return new Promise(e=>{this.play_(e)})}play_(e=k){this.playCallbacks_.push(e);var t,e=Boolean(!this.changingSrc_&&(this.src()||this.currentSrc())),s=Boolean(_e||u);this.waitToPlay_&&(this.off(["ready","loadstart"],this.waitToPlay_),this.waitToPlay_=null),this.isReady_&&e?(t=this.techGet_("play"),s&&this.hasClass("vjs-ended")&&this.resetProgressBar_(),null===t?this.runPlayTerminatedQueue_():this.runPlayCallbacks_(t)):(this.waitToPlay_=e=>{this.play_()},this.one(["ready","loadstart"],this.waitToPlay_),!e&&s&&this.load())}runPlayTerminatedQueue_(){var e=this.playTerminatedQueue_.slice(0);this.playTerminatedQueue_=[],e.forEach(function(e){e()})}runPlayCallbacks_(t){var e=this.playCallbacks_.slice(0);this.playCallbacks_=[],this.playTerminatedQueue_=[],e.forEach(function(e){e(t)})}pause(){this.techCall_("pause")}paused(){return!1!==this.techGet_("paused")}played(){return this.techGet_("played")||T(0,0)}scrubbing(e){if("undefined"==typeof e)return this.scrubbing_;this.scrubbing_=!!e,this.techCall_("setScrubbing",this.scrubbing_),e?this.addClass("vjs-scrubbing"):this.removeClass("vjs-scrubbing")}currentTime(e){if(void 0===e)return this.cache_.currentTime=this.techGet_("currentTime")||0,this.cache_.currentTime;e<0&&(e=0),this.isReady_&&!this.changingSrc_&&this.tech_&&this.tech_.isReady_?(this.techCall_("setCurrentTime",e),this.cache_.initTime=0,isFinite(e)&&(this.cache_.currentTime=Number(e))):(this.cache_.initTime=e,this.off("canplay",this.boundApplyInitTime_),this.one("canplay",this.boundApplyInitTime_))}applyInitTime_(){this.currentTime(this.cache_.initTime)}duration(e){if(void 0===e)return void 0!==this.cache_.duration?this.cache_.duration:NaN;(e=(e=parseFloat(e))<0?1/0:e)!==this.cache_.duration&&((this.cache_.duration=e)===1/0?this.addClass("vjs-live"):this.removeClass("vjs-live"),isNaN(e)||this.trigger("durationchange"))}remainingTime(){return this.duration()-this.currentTime()}remainingTimeDisplay(){return Math.floor(this.duration())-Math.floor(this.currentTime())}buffered(){let e=this.techGet_("buffered");return e=e&&e.length?e:T(0,0)}seekable(){let e=this.techGet_("seekable");return e=e&&e.length?e:T(0,0)}seeking(){return this.techGet_("seeking")}ended(){return this.techGet_("ended")}networkState(){return this.techGet_("networkState")}readyState(){return this.techGet_("readyState")}bufferedPercent(){return Ft(this.buffered(),this.duration())}bufferedEnd(){var e=this.buffered(),t=this.duration();let s=e.end(e.length-1);return s=s>t?t:s}volume(e){let t;if(void 0===e)return t=parseFloat(this.techGet_("volume")),isNaN(t)?1:t;t=Math.max(0,Math.min(1,e)),this.cache_.volume=t,this.techCall_("setVolume",t),0<t&&this.lastVolume_(t)}muted(e){if(void 0===e)return this.techGet_("muted")||!1;this.techCall_("setMuted",e)}defaultMuted(e){return void 0!==e&&this.techCall_("setDefaultMuted",e),this.techGet_("defaultMuted")||!1}lastVolume_(e){if(void 0===e||0===e)return this.cache_.lastVolume;this.cache_.lastVolume=e}supportsFullScreen(){return this.techGet_("supportsFullScreen")||!1}isFullscreen(e){var t;if(void 0===e)return this.isFullscreen_;t=this.isFullscreen_,this.isFullscreen_=Boolean(e),this.isFullscreen_!==t&&this.fsApi_.prefixed&&this.trigger("fullscreenchange"),this.toggleFullscreenClass_()}requestFullscreen(a){this.isInPictureInPicture()&&this.exitPictureInPicture();const o=this;return new Promise((e,s)=>{function i(){o.off("fullscreenerror",r),o.off("fullscreenchange",t)}function t(){i(),e()}function r(e,t){i(),s(t)}o.one("fullscreenchange",t),o.one("fullscreenerror",r);var n=o.requestFullscreenHelper_(a);n&&(n.then(i,i),n.then(e,s))})}requestFullscreenHelper_(e){let t;if(this.fsApi_.prefixed||(t=this.options_.fullscreen&&this.options_.fullscreen.options||{},void 0!==e&&(t=e)),this.fsApi_.requestFullscreen)return(e=this.el_[this.fsApi_.requestFullscreen](t))&&e.then(()=>this.isFullscreen(!0),()=>this.isFullscreen(!1)),e;this.tech_.supportsFullScreen()&&!0==!this.options_.preferFullWindow?this.techCall_("enterFullScreen"):this.enterFullWindow()}exitFullscreen(){const a=this;return new Promise((e,s)=>{function i(){a.off("fullscreenerror",r),a.off("fullscreenchange",t)}function t(){i(),e()}function r(e,t){i(),s(t)}a.one("fullscreenchange",t),a.one("fullscreenerror",r);var n=a.exitFullscreenHelper_();n&&(n.then(i,i),n.then(e,s))})}exitFullscreenHelper_(){var e;if(this.fsApi_.requestFullscreen)return(e=document[this.fsApi_.exitFullscreen]())&&k(e.then(()=>this.isFullscreen(!1))),e;this.tech_.supportsFullScreen()&&!0==!this.options_.preferFullWindow?this.techCall_("exitFullScreen"):this.exitFullWindow()}enterFullWindow(){this.isFullscreen(!0),this.isFullWindow=!0,this.docOrigOverflow=document.documentElement.style.overflow,v(document,"keydown",this.boundFullWindowOnEscKey_),document.documentElement.style.overflow="hidden",xe(document.body,"vjs-full-window"),this.trigger("enterFullWindow")}fullWindowOnEscKey(e){a.isEventKey(e,"Esc")&&!0===this.isFullscreen()&&(this.isFullWindow?this.exitFullWindow():this.exitFullscreen())}exitFullWindow(){this.isFullscreen(!1),this.isFullWindow=!1,_(document,"keydown",this.boundFullWindowOnEscKey_),document.documentElement.style.overflow=this.docOrigOverflow,je(document.body,"vjs-full-window"),this.trigger("exitFullWindow")}disablePictureInPicture(e){if(void 0===e)return this.techGet_("disablePictureInPicture");this.techCall_("setDisablePictureInPicture",e),this.options_.disablePictureInPicture=e,this.trigger("disablepictureinpicturechanged")}isInPictureInPicture(e){if(void 0===e)return!!this.isInPictureInPicture_;this.isInPictureInPicture_=!!e,this.togglePictureInPictureClass_()}requestPictureInPicture(){if(this.options_.enableDocumentPictureInPicture&&window.documentPictureInPicture){const t=document.createElement(this.el().tagName);return t.classList=this.el().classList,t.classList.add("vjs-pip-container"),this.posterImage&&t.appendChild(this.posterImage.el().cloneNode(!0)),this.titleBar&&t.appendChild(this.titleBar.el().cloneNode(!0)),t.appendChild(p("p",{className:"vjs-pip-text"},{},this.localize("Playing in picture-in-picture"))),window.documentPictureInPicture.requestWindow({width:this.videoWidth(),height:this.videoHeight()}).then(e=>(Ge(e),this.el_.parentNode.insertBefore(t,this.el_),e.document.body.appendChild(this.el_),e.document.body.classList.add("vjs-pip-window"),this.player_.isInPictureInPicture(!0),this.player_.trigger({type:"enterpictureinpicture",pipWindow:e}),e.addEventListener("pagehide",e=>{e=e.target.querySelector(".video-js");t.parentNode.replaceChild(e,t),this.player_.isInPictureInPicture(!1),this.player_.trigger("leavepictureinpicture")}),e))}return"pictureInPictureEnabled"in document&&!1===this.disablePictureInPicture()?this.techGet_("requestPictureInPicture"):Promise.reject("No PiP mode is available")}exitPictureInPicture(){return window.documentPictureInPicture&&window.documentPictureInPicture.window?(window.documentPictureInPicture.window.close(),Promise.resolve()):"pictureInPictureEnabled"in document?document.exitPictureInPicture():void 0}handleKeyDown(e){var t,s,i=this.options_["userActions"];i&&i.hotkeys&&(t=this.el_.ownerDocument.activeElement,s=t.tagName.toLowerCase(),t.isContentEditable||("input"===s?-1===["button","checkbox","hidden","radio","reset","submit"].indexOf(t.type):-1!==["textarea"].indexOf(s))||("function"==typeof i.hotkeys?i.hotkeys.call(this,e):this.handleHotkeys(e)))}handleHotkeys(e){var{fullscreenKey:t=e=>a.isEventKey(e,"f"),muteKey:s=e=>a.isEventKey(e,"m"),playPauseKey:i=e=>a.isEventKey(e,"k")||a.isEventKey(e,"Space")}=this.options_.userActions?this.options_.userActions.hotkeys:{};t.call(this,e)?(e.preventDefault(),e.stopPropagation(),t=b.getComponent("FullscreenToggle"),!1!==document[this.fsApi_.fullscreenEnabled]&&t.prototype.handleClick.call(this,e)):s.call(this,e)?(e.preventDefault(),e.stopPropagation(),b.getComponent("MuteToggle").prototype.handleClick.call(this,e)):i.call(this,e)&&(e.preventDefault(),e.stopPropagation(),b.getComponent("PlayToggle").prototype.handleClick.call(this,e))}canPlayType(i){var r;for(let t=0,s=this.options_.techOrder;t<s.length;t++){var n=s[t];let e=j.getTech(n);if(e=e||b.getComponent(n)){if(e.isSupported()&&(r=e.canPlayType(i)))return r}else l.error(`The "${n}" tech is undefined. Skipped browser support check for that tech.`)}return""}selectSource(e){function t(e,s,i){let r;return e.some(t=>s.some(e=>{if(r=i(t,e))return!0})),r}var s=this.options_.techOrder.map(e=>[e,j.getTech(e)]).filter(([e,t])=>t?t.isSupported():(l.error(`The "${e}" tech is undefined. Skipped browser support check for that tech.`),!1));let i;var r,n=([e,t],s)=>{if(t.canPlaySource(s,this.options_[e.toLowerCase()]))return{source:s,tech:e}};return(i=this.options_.sourceOrder?t(e,s,(r=n,(e,t)=>r(t,e))):t(s,e,n))||!1}handleSrc_(e,i){if("undefined"==typeof e)return this.cache_.src||"";this.resetRetryOnError_&&this.resetRetryOnError_();const r=di(e);if(r.length){if(this.changingSrc_=!0,i||(this.cache_.sources=r),this.updateSourceCaches_(r[0]),ri(this,r[0],(e,t)=>{var s;if(this.middleware_=t,i||(this.cache_.sources=r),this.updateSourceCaches_(e),this.src_(e))return 1<r.length?this.handleSrc_(r.slice(1)):(this.changingSrc_=!1,this.setTimeout(function(){this.error({code:4,message:this.options_.notSupportedMessage})},0),void this.triggerReady());s=this.tech_,t.forEach(e=>e.setTech&&e.setTech(s))}),1<r.length){const t=()=>{this.error(null),this.handleSrc_(r.slice(1),!0)},s=()=>{this.off("error",t)};this.one("error",t),this.one("playing",s),this.resetRetryOnError_=()=>{this.off("error",t),this.off("playing",s)}}}else this.setTimeout(function(){this.error({code:4,message:this.options_.notSupportedMessage})},0)}src(e){return this.handleSrc_(e,!1)}src_(e){var t=this.selectSource([e]);return!t||(jt(t.tech,this.techName_)?this.ready(function(){this.tech_.constructor.prototype.hasOwnProperty("setSource")?this.techCall_("setSource",e):this.techCall_("src",e.src),this.changingSrc_=!1},!0):(this.changingSrc_=!0,this.loadTech_(t.tech,t.source),this.tech_.ready(()=>{this.changingSrc_=!1})),!1)}load(){this.tech_&&this.tech_.vhs?this.src(this.currentSource()):this.techCall_("load")}reset(){this.paused()?this.doReset_():k(this.play().then(()=>this.doReset_()))}doReset_(){this.tech_&&this.tech_.clearTracks("text"),this.removeClass("vjs-playing"),this.addClass("vjs-paused"),this.resetCache_(),this.poster(""),this.loadTech_(this.options_.techOrder[0],null),this.techCall_("reset"),this.resetControlBarUI_(),this.error(null),this.titleBar&&this.titleBar.update({title:void 0,description:void 0}),vt(this)&&this.trigger("playerreset")}resetControlBarUI_(){this.resetProgressBar_(),this.resetPlaybackRate_(),this.resetVolumeBar_()}resetProgressBar_(){this.currentTime(0);var{currentTimeDisplay:e,durationDisplay:t,progressControl:s,remainingTimeDisplay:i}=this.controlBar||{},s=(s||{})["seekBar"];e&&e.updateContent(),t&&t.updateContent(),i&&i.updateContent(),s&&(s.update(),s.loadProgressBar)&&s.loadProgressBar.update()}resetPlaybackRate_(){this.playbackRate(this.defaultPlaybackRate()),this.handleTechRateChange_()}resetVolumeBar_(){this.volume(1),this.trigger("volumechange")}currentSources(){var e=this.currentSource(),t=[];return 0!==Object.keys(e).length&&t.push(e),this.cache_.sources||t}currentSource(){return this.cache_.source||{}}currentSrc(){return this.currentSource()&&this.currentSource().src||""}currentType(){return this.currentSource()&&this.currentSource().type||""}preload(e){if(void 0===e)return this.techGet_("preload");this.techCall_("setPreload",e),this.options_.preload=e}autoplay(e){if(void 0===e)return this.options_.autoplay||!1;let t;"string"==typeof e&&/(any|play|muted)/.test(e)||!0===e&&this.options_.normalizeAutoplay?(this.options_.autoplay=e,this.manualAutoplay_("string"==typeof e?e:"play"),t=!1):this.options_.autoplay=!!e,t="undefined"==typeof t?this.options_.autoplay:t,this.tech_&&this.techCall_("setAutoplay",t)}playsinline(e){return void 0!==e&&(this.techCall_("setPlaysinline",e),this.options_.playsinline=e),this.techGet_("playsinline")}loop(e){if(void 0===e)return this.techGet_("loop");this.techCall_("setLoop",e),this.options_.loop=e}poster(e){if(void 0===e)return this.poster_;(e=e||"")!==this.poster_&&(this.poster_=e,this.techCall_("setPoster",e),this.isPosterFromTech_=!1,this.trigger("posterchange"))}handleTechPosterChange_(){var e;(!this.poster_||this.options_.techCanOverridePoster)&&this.tech_&&this.tech_.poster&&(e=this.tech_.poster()||"")!==this.poster_&&(this.poster_=e,this.isPosterFromTech_=!0,this.trigger("posterchange"))}controls(e){if(void 0===e)return!!this.controls_;this.controls_!==(e=!!e)&&(this.controls_=e,this.usingNativeControls()&&this.techCall_("setControls",e),this.controls_?(this.removeClass("vjs-controls-disabled"),this.addClass("vjs-controls-enabled"),this.trigger("controlsenabled"),this.usingNativeControls()||this.addTechControlsListeners_()):(this.removeClass("vjs-controls-enabled"),this.addClass("vjs-controls-disabled"),this.trigger("controlsdisabled"),this.usingNativeControls()||this.removeTechControlsListeners_()))}usingNativeControls(e){if(void 0===e)return!!this.usingNativeControls_;this.usingNativeControls_!==(e=!!e)&&(this.usingNativeControls_=e,this.usingNativeControls_?(this.addClass("vjs-using-native-controls"),this.trigger("usingnativecontrols")):(this.removeClass("vjs-using-native-controls"),this.trigger("usingcustomcontrols")))}error(t){if(void 0===t)return this.error_||null;if(R("beforeerror").forEach(e=>{e=e(this,t);n(e)&&!Array.isArray(e)||"string"==typeof e||"number"==typeof e||null===e?t=e:this.log.error("please return a value that MediaError expects in beforeerror hooks")}),this.options_.suppressNotSupportedError&&t&&4===t.code){const e=function(){this.error(t)};this.options_.suppressNotSupportedError=!1,this.any(["click","touchstart"],e),void this.one("loadstart",function(){this.off(["click","touchstart"],e)})}else null===t?(this.error_=null,this.removeClass("vjs-error"),this.errorDisplay&&this.errorDisplay.close()):(this.error_=new i(t),this.addClass("vjs-error"),l.error(`(CODE:${this.error_.code} ${i.errorTypes[this.error_.code]})`,this.error_.message,this.error_),this.trigger("error"),R("error").forEach(e=>e(this,this.error_)))}reportUserActivity(e){this.userActivity_=!0}userActive(e){if(void 0===e)return this.userActive_;(e=!!e)!==this.userActive_&&(this.userActive_=e,this.userActive_?(this.userActivity_=!0,this.removeClass("vjs-user-inactive"),this.addClass("vjs-user-active"),this.trigger("useractive")):(this.tech_&&this.tech_.one("mousemove",function(e){e.stopPropagation(),e.preventDefault()}),this.userActivity_=!1,this.removeClass("vjs-user-active"),this.addClass("vjs-user-inactive"),this.trigger("userinactive")))}listenForUserActivity_(){let t,s,i;const r=f(this,this.reportUserActivity);function e(e){r(),this.clearInterval(t)}this.on("mousedown",function(){r(),this.clearInterval(t),t=this.setInterval(r,250)}),this.on("mousemove",function(e){e.screenX===s&&e.screenY===i||(s=e.screenX,i=e.screenY,r())}),this.on("mouseup",e),this.on("mouseleave",e);var n=this.getChild("controlBar");!n||u||o||(n.on("mouseenter",function(e){0!==this.player().options_.inactivityTimeout&&(this.player().cache_.inactivityTimeout=this.player().options_.inactivityTimeout),this.player().options_.inactivityTimeout=0}),n.on("mouseleave",function(e){this.player().options_.inactivityTimeout=this.player().cache_.inactivityTimeout})),this.on("keydown",r),this.on("keyup",r);let a;this.setInterval(function(){var e;this.userActivity_&&(this.userActivity_=!1,this.userActive(!0),this.clearTimeout(a),(e=this.options_.inactivityTimeout)<=0||(a=this.setTimeout(function(){this.userActivity_||this.userActive(!1)},e)))},250)}playbackRate(e){if(void 0===e)return this.tech_&&this.tech_.featuresPlaybackRate?this.cache_.lastPlaybackRate||this.techGet_("playbackRate"):1;this.techCall_("setPlaybackRate",e)}defaultPlaybackRate(e){return void 0!==e?this.techCall_("setDefaultPlaybackRate",e):this.tech_&&this.tech_.featuresPlaybackRate?this.techGet_("defaultPlaybackRate"):1}isAudio(e){if(void 0===e)return!!this.isAudio_;this.isAudio_=!!e}enableAudioOnlyUI_(){this.addClass("vjs-audio-only-mode");var e=this.children();const t=this.getChild("ControlBar");var s=t&&t.currentHeight();e.forEach(e=>{e!==t&&e.el_&&!e.hasClass("vjs-hidden")&&(e.hide(),this.audioOnlyCache_.hiddenChildren.push(e))}),this.audioOnlyCache_.playerHeight=this.currentHeight(),this.height(s),this.trigger("audioonlymodechange")}disableAudioOnlyUI_(){this.removeClass("vjs-audio-only-mode"),this.audioOnlyCache_.hiddenChildren.forEach(e=>e.show()),this.height(this.audioOnlyCache_.playerHeight),this.trigger("audioonlymodechange")}audioOnlyMode(e){return"boolean"!=typeof e||e===this.audioOnlyMode_?this.audioOnlyMode_:(this.audioOnlyMode_=e)?(e=[],this.isInPictureInPicture()&&e.push(this.exitPictureInPicture()),this.isFullscreen()&&e.push(this.exitFullscreen()),this.audioPosterMode()&&e.push(this.audioPosterMode(!1)),Promise.all(e).then(()=>this.enableAudioOnlyUI_())):Promise.resolve().then(()=>this.disableAudioOnlyUI_())}enablePosterModeUI_(){(this.tech_&&this.tech_).hide(),this.addClass("vjs-audio-poster-mode"),this.trigger("audiopostermodechange")}disablePosterModeUI_(){(this.tech_&&this.tech_).show(),this.removeClass("vjs-audio-poster-mode"),this.trigger("audiopostermodechange")}audioPosterMode(e){return"boolean"!=typeof e||e===this.audioPosterMode_?this.audioPosterMode_:(this.audioPosterMode_=e)?(this.audioOnlyMode()?this.audioOnlyMode(!1):Promise.resolve()).then(()=>{this.enablePosterModeUI_()}):Promise.resolve().then(()=>{this.disablePosterModeUI_()})}addTextTrack(e,t,s){if(this.tech_)return this.tech_.addTextTrack(e,t,s)}addRemoteTextTrack(e,t){if(this.tech_)return this.tech_.addRemoteTextTrack(e,t)}removeRemoteTextTrack(e={}){let t=e["track"];if(t=t||e,this.tech_)return this.tech_.removeRemoteTextTrack(t)}getVideoPlaybackQuality(){return this.techGet_("getVideoPlaybackQuality")}videoWidth(){return this.tech_&&this.tech_.videoWidth&&this.tech_.videoWidth()||0}videoHeight(){return this.tech_&&this.tech_.videoHeight&&this.tech_.videoHeight()||0}language(e){if(void 0===e)return this.language_;this.language_!==String(e).toLowerCase()&&(this.language_=String(e).toLowerCase(),vt(this))&&this.trigger("languagechange")}languages(){return h(M.prototype.options_.languages,this.languages_)}toJSON(){var t=h(this.options_),s=t.tracks;t.tracks=[];for(let e=0;e<s.length;e++){var i=s[e];(i=h(i)).player=void 0,t.tracks[e]=i}return t}createModal(e,t){(t=t||{}).content=e||"";const s=new Wt(this,t);return this.addChild(s),s.on("dispose",()=>{this.removeChild(s)}),s.open(),s}updateCurrentBreakpoint_(){if(this.responsive()){var t=this.currentBreakpoint(),s=this.currentWidth();for(let e=0;e<Xr.length;e++){var i=Xr[e];if(s<=this.breakpoints_[i]){if(t===i)return;t&&this.removeClass(Gr[t]),this.addClass(Gr[i]),this.breakpoint_=i;break}}}}removeCurrentBreakpoint_(){var e=this.currentBreakpointClass();this.breakpoint_="",e&&this.removeClass(e)}breakpoints(e){return void 0!==e&&(this.breakpoint_="",this.breakpoints_=Object.assign({},Yr,e),this.updateCurrentBreakpoint_()),Object.assign(this.breakpoints_)}responsive(e){return void 0===e?this.responsive_:(e=Boolean(e))!==this.responsive_?((this.responsive_=e)?(this.on("playerresize",this.boundUpdateCurrentBreakpoint_),this.updateCurrentBreakpoint_()):(this.off("playerresize",this.boundUpdateCurrentBreakpoint_),this.removeCurrentBreakpoint_()),e):void 0}currentBreakpoint(){return this.breakpoint_}currentBreakpointClass(){return Gr[this.breakpoint_]||""}loadMedia(e,t){var s,i,r,n,a,o,l;e&&"object"==typeof e&&(s=this.crossOrigin(),{artist:e,artwork:i,description:r,poster:n,src:a,textTracks:o,title:l}=(this.reset(),this.cache_.media=h(e),this.cache_.media),!i&&n&&(this.cache_.media.artwork=[{src:n,type:pi(n)}]),s&&this.crossOrigin(s),a&&this.src(a),n&&this.poster(n),Array.isArray(o)&&o.forEach(e=>this.addRemoteTextTrack(e,!1)),this.titleBar&&this.titleBar.update({title:l,description:r||e||""}),this.ready(t))}getMedia(){var e,t;return this.cache_.media?h(this.cache_.media):(e=this.poster(),t={src:this.currentSources(),textTracks:Array.prototype.map.call(this.remoteTextTracks(),e=>({kind:e.kind,label:e.label,language:e.language,src:e.src}))},e&&(t.poster=e,t.artwork=[{src:t.poster,type:pi(t.poster)}]),t)}static getTagSettings(e){var t,s={sources:[],tracks:[]},i=Me(e),r=i["data-setup"];if(Se(e,"vjs-fill")&&(i.fill=!0),Se(e,"vjs-fluid")&&(i.fluid=!0),null!==r&&([r,t]=Vt(r||"{}"),r&&l.error(r),Object.assign(i,t)),Object.assign(s,i),e.hasChildNodes()){var n=e.childNodes;for(let e=0,t=n.length;e<t;e++){var a=n[e],o=a.nodeName.toLowerCase();"source"===o?s.sources.push(Me(a)):"track"===o&&s.tracks.push(Me(a))}}return s}debug(e){if(void 0===e)return this.debugEnabled_;e?(this.trigger("debugon"),this.previousLogLevel_=this.log.level,this.log.level("debug"),this.debugEnabled_=!0):(this.trigger("debugoff"),this.log.level(this.previousLogLevel_),this.previousLogLevel_=void 0,this.debugEnabled_=!1)}playbackRates(e){if(void 0===e)return this.cache_.playbackRates;Array.isArray(e)&&e.every(e=>"number"==typeof e)&&(this.cache_.playbackRates=e,this.trigger("playbackrateschange"))}}E.names.forEach(function(e){const t=E[e];M.prototype[t.getterName]=function(){return this.tech_?this.tech_[t.getterName]():(this[t.privateName]=this[t.privateName]||new t.ListClass,this[t.privateName])}}),M.prototype.crossorigin=M.prototype.crossOrigin,M.players={};xr=window.navigator;M.prototype.options_={techOrder:j.defaultTechOrder_,html5:{},enableSourceset:!0,inactivityTimeout:2e3,playbackRates:[],liveui:!1,children:["mediaLoader","posterImage","titleBar","textTrackDisplay","loadingSpinner","bigPlayButton","liveTracker","controlBar","errorDisplay","textTrackSettings","resizeManager"],language:xr&&(xr.languages&&xr.languages[0]||xr.userLanguage||xr.language)||"en",languages:{},notSupportedMessage:"No compatible source was found for this media.",normalizeAutoplay:!1,fullscreen:{options:{navigationUI:"hide"}},breakpoints:{},responsive:!1,audioOnlyMode:!1,audioPosterMode:!1,enableSmoothSeeking:!1},Kr.forEach(function(e){M.prototype[`handleTech${y(e)}_`]=function(){return this.trigger(e)}}),b.registerComponent("Player",M);function Qr(t,s){function i(){nn(this,{name:t,plugin:s,instance:null},!0);var e=s.apply(this,arguments);return rn(this,t),nn(this,{name:t,plugin:s,instance:e}),e}return Object.keys(s).forEach(function(e){i[e]=s[e]}),i}const Jr="plugin",Zr="activePlugins_",en={},tn=e=>en.hasOwnProperty(e),sn=e=>tn(e)?en[e]:void 0,rn=(e,t)=>{e[Zr]=e[Zr]||{},e[Zr][t]=!0},nn=(e,t,s)=>{s=(s?"before":"")+"pluginsetup";e.trigger(s,t),e.trigger(s+":"+t.name,t)},an=(s,i)=>(i.prototype.name=s,function(...e){nn(this,{name:s,plugin:i,instance:null},!0);const t=new i(this,...e);return this[s]=()=>t,nn(this,t.getEventHash()),t});class A{constructor(e){if(this.constructor===A)throw new Error("Plugin must be sub-classed; not directly instantiated.");this.player=e,this.log||(this.log=this.player.log.createLogger(this.name)),wt(this),delete this.trigger,St(this,this.constructor.defaultState),rn(e,this.name),this.dispose=this.dispose.bind(this),e.on("dispose",this.dispose)}version(){return this.constructor.VERSION}getEventHash(e={}){return e.name=this.name,e.plugin=this.constructor,e.instance=this,e}trigger(e,t={}){return ht(this.eventBusEl_,e,this.getEventHash(t))}handleStateChanged(e){}dispose(){var{name:e,player:t}=this;this.trigger("dispose"),this.off(),t.off("dispose",this.dispose),t[Zr][e]=!1,this.player=this.state=null,t[e]=an(e,en[e])}static isBasic(e){e="string"==typeof e?sn(e):e;return"function"==typeof e&&!A.prototype.isPrototypeOf(e.prototype)}static registerPlugin(e,t){if("string"!=typeof e)throw new Error(`Illegal plugin name, "${e}", must be a string, was ${typeof e}.`);if(tn(e))l.warn(`A plugin named "${e}" already exists. You may want to avoid re-registering plugins!`);else if(M.prototype.hasOwnProperty(e))throw new Error(`Illegal plugin name, "${e}", cannot share a name with an existing player method!`);if("function"!=typeof t)throw new Error(`Illegal plugin for "${e}", must be a function, was ${typeof t}.`);return en[e]=t,e!==Jr&&(A.isBasic(t)?M.prototype[e]=Qr(e,t):M.prototype[e]=an(e,t)),t}static deregisterPlugin(e){if(e===Jr)throw new Error("Cannot de-register base plugin.");tn(e)&&(delete en[e],delete M.prototype[e])}static getPlugins(e=Object.keys(en)){let s;return e.forEach(e=>{var t=sn(e);t&&((s=s||{})[e]=t)}),s}static getPluginVersion(e){e=sn(e);return e&&e.VERSION||""}}function O(e,s,i,r){{var n=s+` is deprecated and will be removed in ${e}.0; please use ${i} instead.`,a=r;let t=!1;return function(...e){return t||l.warn(n),t=!0,a.apply(this,e)}}}A.getPlugin=sn,A.BASE_PLUGIN_NAME=Jr,A.registerPlugin(Jr,A),M.prototype.usingPlugin=function(e){return!!this[Zr]&&!0===this[Zr][e]},M.prototype.hasPlugin=function(e){return!!tn(e)};const on=e=>0===e.indexOf("#")?e.slice(1):e;function L(e,t,s){let i=L.getPlayer(e);if(i)t&&l.warn(`Player "${e}" is already initialised. Options will not be applied.`),s&&i.ready(s);else{const r="string"==typeof e?Ke("#"+on(e)):e;if(!Te(r))throw new TypeError("The element or ID supplied is not valid. (videojs)");e="getRootNode"in r&&r.getRootNode()instanceof window.ShadowRoot?r.getRootNode():r.ownerDocument.body,e=(r.ownerDocument.defaultView&&e.contains(r)||l.warn("The element supplied is not included in the DOM"),!0===(t=t||{}).restoreEl&&(t.restoreEl=(r.parentNode&&r.parentNode.hasAttribute("data-vjs-player")?r.parentNode:r).cloneNode(!0)),R("beforesetup").forEach(e=>{e=e(r,h(t));!n(e)||Array.isArray(e)?l.error("please return an object in beforesetup hooks"):t=h(t,e)}),b.getComponent("Player"));i=new e(r,t,s),R("setup").forEach(e=>e(i))}return i}return L.hooks_=B,L.hooks=R,L.hook=function(e,t){R(e,t)},L.hookOnce=function(i,e){R(i,[].concat(e).map(t=>{const s=(...e)=>(H(i,s),t(...e));return s}))},L.removeHook=H,!0!==window.VIDEOJS_NO_DYNAMIC_STYLE&&be()&&!(xs=Ke(".vjs-styles-defaults"))&&(xs=st("vjs-styles-defaults"),(Sr=Ke("head"))&&Sr.insertBefore(xs,Sr.firstChild),it(xs,`
+      .video-js {
+        width: 300px;
+        height: 150px;
+      }
+
+      .vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: 56.25%
+      }
+    `)),et(1,L),L.VERSION=D,L.options=M.prototype.options_,L.getPlayers=()=>M.players,L.getPlayer=e=>{var t=M.players;let s;if("string"==typeof e){var i=on(e),r=t[i];if(r)return r;s=Ke("#"+i)}else s=e;if(Te(s)){var{player:r,playerId:i}=s;if(r||t[i])return r||t[i]}},L.getAllPlayers=()=>Object.keys(M.players).map(e=>M.players[e]).filter(Boolean),L.players=M.players,L.getComponent=b.getComponent,L.registerComponent=(e,t)=>(j.isTech(t)&&l.warn(`The ${e} tech was registered as a component. It should instead be registered using videojs.registerTech(name, tech)`),b.registerComponent.call(b,e,t)),L.getTech=j.getTech,L.registerTech=j.registerTech,L.use=function(e,t){ti[e]=ti[e]||[],ti[e].push(t)},Object.defineProperty(L,"middleware",{value:{},writeable:!1,enumerable:!0}),Object.defineProperty(L.middleware,"TERMINATOR",{value:ii,writeable:!1,enumerable:!0}),L.browser=fe,L.obj=J,L.mergeOptions=O(9,"videojs.mergeOptions","videojs.obj.merge",h),L.defineLazyProperty=O(9,"videojs.defineLazyProperty","videojs.obj.defineLazyProperty",Q),L.bind=O(9,"videojs.bind","native Function.prototype.bind",f),L.registerPlugin=A.registerPlugin,L.deregisterPlugin=A.deregisterPlugin,L.plugin=(e,t)=>(l.warn("videojs.plugin() is deprecated; use videojs.registerPlugin() instead"),A.registerPlugin(e,t)),L.getPlugins=A.getPlugins,L.getPlugin=A.getPlugin,L.getPluginVersion=A.getPluginVersion,L.addLanguage=function(e,t){return e=(""+e).toLowerCase(),L.options.languages=h(L.options.languages,{[e]:t}),L.options.languages[e]},L.log=l,L.createLogger=U,L.time=Ht,L.createTimeRange=O(9,"videojs.createTimeRange","videojs.time.createTimeRanges",T),L.createTimeRanges=O(9,"videojs.createTimeRanges","videojs.time.createTimeRanges",T),L.formatTime=O(9,"videojs.formatTime","videojs.time.formatTime",Rt),L.setFormatTime=O(9,"videojs.setFormatTime","videojs.time.setFormatTime",Dt),L.resetFormatTime=O(9,"videojs.resetFormatTime","videojs.time.resetFormatTime",Bt),L.parseUrl=O(9,"videojs.parseUrl","videojs.url.parseUrl",rs),L.isCrossOrigin=O(9,"videojs.isCrossOrigin","videojs.url.isCrossOrigin",as),L.EventTarget=s,L.any=dt,L.on=v,L.one=ct,L.off=_,L.trigger=ht,L.xhr=ps,L.TextTrack=ks,L.AudioTrack=Cs,L.VideoTrack=ws,["isEl","isTextNode","createEl","hasClass","addClass","removeClass","toggleClass","setAttributes","getAttributes","emptyEl","appendContent","insertContent"].forEach(e=>{L[e]=function(){return l.warn(`videojs.${e}() is deprecated; use videojs.dom.${e}() instead`),Ye[e].apply(null,arguments)}}),L.computedStyle=O(9,"videojs.computedStyle","videojs.dom.computedStyle",Xe),L.dom=Ye,L.fn=e,L.num=t,L.str=Pt,L.url=ls,L.Error={UnsupportedSidxContainer:"unsupported-sidx-container-error",DashManifestSidxParsingError:"dash-manifest-sidx-parsing-error",HlsPlaylistRequestError:"hls-playlist-request-error",SegmentUnsupportedMediaFormat:"segment-unsupported-media-format-error",UnsupportedMediaInitialization:"unsupported-media-initialization-error",SegmentSwitchError:"segment-switch-error",SegmentExceedsSourceBufferQuota:"segment-exceeds-source-buffer-quota-error",SegmentAppendError:"segment-append-error",VttLoadError:"vtt-load-error",VttCueParsingError:"vtt-cue-parsing-error",AdsBeforePrerollError:"ads-before-preroll-error",AdsPrerollError:"ads-preroll-error",AdsMidrollError:"ads-midroll-error",AdsPostrollError:"ads-postroll-error",AdsMacroReplacementFailed:"ads-macro-replacement-failed",AdsResumeContentFailed:"ads-resume-content-failed",EMEFailedToRequestMediaKeySystemAccess:"eme-failed-request-media-key-system-access",EMEFailedToCreateMediaKeys:"eme-failed-create-media-keys",EMEFailedToAttachMediaKeysToVideoElement:"eme-failed-attach-media-keys-to-video",EMEFailedToCreateMediaKeySession:"eme-failed-create-media-key-session",EMEFailedToSetServerCertificate:"eme-failed-set-server-certificate",EMEFailedToGenerateLicenseRequest:"eme-failed-generate-license-request",EMEFailedToUpdateSessionWithReceivedLicenseKeys:"eme-failed-update-session",EMEFailedToCloseSession:"eme-failed-close-session",EMEFailedToRemoveKeysFromSession:"eme-failed-remove-keys",EMEFailedToLoadSessionBySessionId:"eme-failed-load-session"},L});
\ No newline at end of file
diff --git a/priv/static/video.js/alt/video.core.novtt.js b/priv/static/video.js/alt/video.core.novtt.js
new file mode 100644
index 0000000..f169b1b
--- /dev/null
+++ b/priv/static/video.js/alt/video.core.novtt.js
@@ -0,0 +1,26893 @@
+/**
+ * @license
+ * Video.js 8.12.0 <http://videojs.com/>
+ * Copyright Brightcove, Inc. <https://www.brightcove.com/>
+ * Available under Apache License Version 2.0
+ * <https://github.com/videojs/video.js/blob/main/LICENSE>
+ *
+ * Includes vtt.js <https://github.com/mozilla/vtt.js>
+ * Available under Apache License Version 2.0
+ * <https://github.com/mozilla/vtt.js/blob/main/LICENSE>
+ */
+
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojs = factory());
+})(this, (function () { 'use strict';
+
+  var version = "8.12.0";
+
+  /**
+   * An Object that contains lifecycle hooks as keys which point to an array
+   * of functions that are run when a lifecycle is triggered
+   *
+   * @private
+   */
+  const hooks_ = {};
+
+  /**
+   * Get a list of hooks for a specific lifecycle
+   *
+   * @param  {string} type
+   *         the lifecycle to get hooks from
+   *
+   * @param  {Function|Function[]} [fn]
+   *         Optionally add a hook (or hooks) to the lifecycle that your are getting.
+   *
+   * @return {Array}
+   *         an array of hooks, or an empty array if there are none.
+   */
+  const hooks = function (type, fn) {
+    hooks_[type] = hooks_[type] || [];
+    if (fn) {
+      hooks_[type] = hooks_[type].concat(fn);
+    }
+    return hooks_[type];
+  };
+
+  /**
+   * Add a function hook to a specific videojs lifecycle.
+   *
+   * @param {string} type
+   *        the lifecycle to hook the function to.
+   *
+   * @param {Function|Function[]}
+   *        The function or array of functions to attach.
+   */
+  const hook = function (type, fn) {
+    hooks(type, fn);
+  };
+
+  /**
+   * Remove a hook from a specific videojs lifecycle.
+   *
+   * @param  {string} type
+   *         the lifecycle that the function hooked to
+   *
+   * @param  {Function} fn
+   *         The hooked function to remove
+   *
+   * @return {boolean}
+   *         The function that was removed or undef
+   */
+  const removeHook = function (type, fn) {
+    const index = hooks(type).indexOf(fn);
+    if (index <= -1) {
+      return false;
+    }
+    hooks_[type] = hooks_[type].slice();
+    hooks_[type].splice(index, 1);
+    return true;
+  };
+
+  /**
+   * Add a function hook that will only run once to a specific videojs lifecycle.
+   *
+   * @param {string} type
+   *        the lifecycle to hook the function to.
+   *
+   * @param {Function|Function[]}
+   *        The function or array of functions to attach.
+   */
+  const hookOnce = function (type, fn) {
+    hooks(type, [].concat(fn).map(original => {
+      const wrapper = (...args) => {
+        removeHook(type, wrapper);
+        return original(...args);
+      };
+      return wrapper;
+    }));
+  };
+
+  /**
+   * @file fullscreen-api.js
+   * @module fullscreen-api
+   */
+
+  /**
+   * Store the browser-specific methods for the fullscreen API.
+   *
+   * @type {Object}
+   * @see [Specification]{@link https://fullscreen.spec.whatwg.org}
+   * @see [Map Approach From Screenfull.js]{@link https://github.com/sindresorhus/screenfull.js}
+   */
+  const FullscreenApi = {
+    prefixed: true
+  };
+
+  // browser API methods
+  const apiMap = [['requestFullscreen', 'exitFullscreen', 'fullscreenElement', 'fullscreenEnabled', 'fullscreenchange', 'fullscreenerror', 'fullscreen'],
+  // WebKit
+  ['webkitRequestFullscreen', 'webkitExitFullscreen', 'webkitFullscreenElement', 'webkitFullscreenEnabled', 'webkitfullscreenchange', 'webkitfullscreenerror', '-webkit-full-screen']];
+  const specApi = apiMap[0];
+  let browserApi;
+
+  // determine the supported set of functions
+  for (let i = 0; i < apiMap.length; i++) {
+    // check for exitFullscreen function
+    if (apiMap[i][1] in document) {
+      browserApi = apiMap[i];
+      break;
+    }
+  }
+
+  // map the browser API names to the spec API names
+  if (browserApi) {
+    for (let i = 0; i < browserApi.length; i++) {
+      FullscreenApi[specApi[i]] = browserApi[i];
+    }
+    FullscreenApi.prefixed = browserApi[0] !== specApi[0];
+  }
+
+  /**
+   * @file create-logger.js
+   * @module create-logger
+   */
+
+  // This is the private tracking variable for the logging history.
+  let history = [];
+
+  /**
+   * Log messages to the console and history based on the type of message
+   *
+   * @private
+   * @param  {string} name
+   *         The name of the console method to use.
+   *
+   * @param  {Object} log
+   *         The arguments to be passed to the matching console method.
+   *
+   * @param {string} [styles]
+   *        styles for name
+   */
+  const LogByTypeFactory = (name, log, styles) => (type, level, args) => {
+    const lvl = log.levels[level];
+    const lvlRegExp = new RegExp(`^(${lvl})$`);
+    let resultName = name;
+    if (type !== 'log') {
+      // Add the type to the front of the message when it's not "log".
+      args.unshift(type.toUpperCase() + ':');
+    }
+    if (styles) {
+      resultName = `%c${name}`;
+      args.unshift(styles);
+    }
+
+    // Add console prefix after adding to history.
+    args.unshift(resultName + ':');
+
+    // Add a clone of the args at this point to history.
+    if (history) {
+      history.push([].concat(args));
+
+      // only store 1000 history entries
+      const splice = history.length - 1000;
+      history.splice(0, splice > 0 ? splice : 0);
+    }
+
+    // If there's no console then don't try to output messages, but they will
+    // still be stored in history.
+    if (!window.console) {
+      return;
+    }
+
+    // Was setting these once outside of this function, but containing them
+    // in the function makes it easier to test cases where console doesn't exist
+    // when the module is executed.
+    let fn = window.console[type];
+    if (!fn && type === 'debug') {
+      // Certain browsers don't have support for console.debug. For those, we
+      // should default to the closest comparable log.
+      fn = window.console.info || window.console.log;
+    }
+
+    // Bail out if there's no console or if this type is not allowed by the
+    // current logging level.
+    if (!fn || !lvl || !lvlRegExp.test(type)) {
+      return;
+    }
+    fn[Array.isArray(args) ? 'apply' : 'call'](window.console, args);
+  };
+  function createLogger$1(name, delimiter = ':', styles = '') {
+    // This is the private tracking variable for logging level.
+    let level = 'info';
+
+    // the curried logByType bound to the specific log and history
+    let logByType;
+
+    /**
+     * Logs plain debug messages. Similar to `console.log`.
+     *
+     * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+     * of our JSDoc template, we cannot properly document this as both a function
+     * and a namespace, so its function signature is documented here.
+     *
+     * #### Arguments
+     * ##### *args
+     * *[]
+     *
+     * Any combination of values that could be passed to `console.log()`.
+     *
+     * #### Return Value
+     *
+     * `undefined`
+     *
+     * @namespace
+     * @param    {...*} args
+     *           One or more messages or objects that should be logged.
+     */
+    const log = function (...args) {
+      logByType('log', level, args);
+    };
+
+    // This is the logByType helper that the logging methods below use
+    logByType = LogByTypeFactory(name, log, styles);
+
+    /**
+     * Create a new subLogger which chains the old name to the new name.
+     *
+     * For example, doing `videojs.log.createLogger('player')` and then using that logger will log the following:
+     * ```js
+     *  mylogger('foo');
+     *  // > VIDEOJS: player: foo
+     * ```
+     *
+     * @param {string} subName
+     *        The name to add call the new logger
+     * @param {string} [subDelimiter]
+     *        Optional delimiter
+     * @param {string} [subStyles]
+     *        Optional styles
+     * @return {Object}
+     */
+    log.createLogger = (subName, subDelimiter, subStyles) => {
+      const resultDelimiter = subDelimiter !== undefined ? subDelimiter : delimiter;
+      const resultStyles = subStyles !== undefined ? subStyles : styles;
+      const resultName = `${name} ${resultDelimiter} ${subName}`;
+      return createLogger$1(resultName, resultDelimiter, resultStyles);
+    };
+
+    /**
+     * Create a new logger.
+     *
+     * @param {string} newName
+     *        The name for the new logger
+     * @param {string} [newDelimiter]
+     *        Optional delimiter
+     * @param {string} [newStyles]
+     *        Optional styles
+     * @return {Object}
+     */
+    log.createNewLogger = (newName, newDelimiter, newStyles) => {
+      return createLogger$1(newName, newDelimiter, newStyles);
+    };
+
+    /**
+     * Enumeration of available logging levels, where the keys are the level names
+     * and the values are `|`-separated strings containing logging methods allowed
+     * in that logging level. These strings are used to create a regular expression
+     * matching the function name being called.
+     *
+     * Levels provided by Video.js are:
+     *
+     * - `off`: Matches no calls. Any value that can be cast to `false` will have
+     *   this effect. The most restrictive.
+     * - `all`: Matches only Video.js-provided functions (`debug`, `log`,
+     *   `log.warn`, and `log.error`).
+     * - `debug`: Matches `log.debug`, `log`, `log.warn`, and `log.error` calls.
+     * - `info` (default): Matches `log`, `log.warn`, and `log.error` calls.
+     * - `warn`: Matches `log.warn` and `log.error` calls.
+     * - `error`: Matches only `log.error` calls.
+     *
+     * @type {Object}
+     */
+    log.levels = {
+      all: 'debug|log|warn|error',
+      off: '',
+      debug: 'debug|log|warn|error',
+      info: 'log|warn|error',
+      warn: 'warn|error',
+      error: 'error',
+      DEFAULT: level
+    };
+
+    /**
+     * Get or set the current logging level.
+     *
+     * If a string matching a key from {@link module:log.levels} is provided, acts
+     * as a setter.
+     *
+     * @param  {'all'|'debug'|'info'|'warn'|'error'|'off'} [lvl]
+     *         Pass a valid level to set a new logging level.
+     *
+     * @return {string}
+     *         The current logging level.
+     */
+    log.level = lvl => {
+      if (typeof lvl === 'string') {
+        if (!log.levels.hasOwnProperty(lvl)) {
+          throw new Error(`"${lvl}" in not a valid log level`);
+        }
+        level = lvl;
+      }
+      return level;
+    };
+
+    /**
+     * Returns an array containing everything that has been logged to the history.
+     *
+     * This array is a shallow clone of the internal history record. However, its
+     * contents are _not_ cloned; so, mutating objects inside this array will
+     * mutate them in history.
+     *
+     * @return {Array}
+     */
+    log.history = () => history ? [].concat(history) : [];
+
+    /**
+     * Allows you to filter the history by the given logger name
+     *
+     * @param {string} fname
+     *        The name to filter by
+     *
+     * @return {Array}
+     *         The filtered list to return
+     */
+    log.history.filter = fname => {
+      return (history || []).filter(historyItem => {
+        // if the first item in each historyItem includes `fname`, then it's a match
+        return new RegExp(`.*${fname}.*`).test(historyItem[0]);
+      });
+    };
+
+    /**
+     * Clears the internal history tracking, but does not prevent further history
+     * tracking.
+     */
+    log.history.clear = () => {
+      if (history) {
+        history.length = 0;
+      }
+    };
+
+    /**
+     * Disable history tracking if it is currently enabled.
+     */
+    log.history.disable = () => {
+      if (history !== null) {
+        history.length = 0;
+        history = null;
+      }
+    };
+
+    /**
+     * Enable history tracking if it is currently disabled.
+     */
+    log.history.enable = () => {
+      if (history === null) {
+        history = [];
+      }
+    };
+
+    /**
+     * Logs error messages. Similar to `console.error`.
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as an error
+     */
+    log.error = (...args) => logByType('error', level, args);
+
+    /**
+     * Logs warning messages. Similar to `console.warn`.
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as a warning.
+     */
+    log.warn = (...args) => logByType('warn', level, args);
+
+    /**
+     * Logs debug messages. Similar to `console.debug`, but may also act as a comparable
+     * log if `console.debug` is not available
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as debug.
+     */
+    log.debug = (...args) => logByType('debug', level, args);
+    return log;
+  }
+
+  /**
+   * @file log.js
+   * @module log
+   */
+  const log = createLogger$1('VIDEOJS');
+  const createLogger = log.createLogger;
+
+  /**
+   * @file obj.js
+   * @module obj
+   */
+
+  /**
+   * @callback obj:EachCallback
+   *
+   * @param {*} value
+   *        The current key for the object that is being iterated over.
+   *
+   * @param {string} key
+   *        The current key-value for object that is being iterated over
+   */
+
+  /**
+   * @callback obj:ReduceCallback
+   *
+   * @param {*} accum
+   *        The value that is accumulating over the reduce loop.
+   *
+   * @param {*} value
+   *        The current key for the object that is being iterated over.
+   *
+   * @param {string} key
+   *        The current key-value for object that is being iterated over
+   *
+   * @return {*}
+   *         The new accumulated value.
+   */
+  const toString$1 = Object.prototype.toString;
+
+  /**
+   * Get the keys of an Object
+   *
+   * @param {Object}
+   *        The Object to get the keys from
+   *
+   * @return {string[]}
+   *         An array of the keys from the object. Returns an empty array if the
+   *         object passed in was invalid or had no keys.
+   *
+   * @private
+   */
+  const keys = function (object) {
+    return isObject(object) ? Object.keys(object) : [];
+  };
+
+  /**
+   * Array-like iteration for objects.
+   *
+   * @param {Object} object
+   *        The object to iterate over
+   *
+   * @param {obj:EachCallback} fn
+   *        The callback function which is called for each key in the object.
+   */
+  function each(object, fn) {
+    keys(object).forEach(key => fn(object[key], key));
+  }
+
+  /**
+   * Array-like reduce for objects.
+   *
+   * @param {Object} object
+   *        The Object that you want to reduce.
+   *
+   * @param {Function} fn
+   *         A callback function which is called for each key in the object. It
+   *         receives the accumulated value and the per-iteration value and key
+   *         as arguments.
+   *
+   * @param {*} [initial = 0]
+   *        Starting value
+   *
+   * @return {*}
+   *         The final accumulated value.
+   */
+  function reduce(object, fn, initial = 0) {
+    return keys(object).reduce((accum, key) => fn(accum, object[key], key), initial);
+  }
+
+  /**
+   * Returns whether a value is an object of any kind - including DOM nodes,
+   * arrays, regular expressions, etc. Not functions, though.
+   *
+   * This avoids the gotcha where using `typeof` on a `null` value
+   * results in `'object'`.
+   *
+   * @param  {Object} value
+   * @return {boolean}
+   */
+  function isObject(value) {
+    return !!value && typeof value === 'object';
+  }
+
+  /**
+   * Returns whether an object appears to be a "plain" object - that is, a
+   * direct instance of `Object`.
+   *
+   * @param  {Object} value
+   * @return {boolean}
+   */
+  function isPlain(value) {
+    return isObject(value) && toString$1.call(value) === '[object Object]' && value.constructor === Object;
+  }
+
+  /**
+   * Merge two objects recursively.
+   *
+   * Performs a deep merge like
+   * {@link https://lodash.com/docs/4.17.10#merge|lodash.merge}, but only merges
+   * plain objects (not arrays, elements, or anything else).
+   *
+   * Non-plain object values will be copied directly from the right-most
+   * argument.
+   *
+   * @param   {Object[]} sources
+   *          One or more objects to merge into a new object.
+   *
+   * @return {Object}
+   *          A new object that is the merged result of all sources.
+   */
+  function merge(...sources) {
+    const result = {};
+    sources.forEach(source => {
+      if (!source) {
+        return;
+      }
+      each(source, (value, key) => {
+        if (!isPlain(value)) {
+          result[key] = value;
+          return;
+        }
+        if (!isPlain(result[key])) {
+          result[key] = {};
+        }
+        result[key] = merge(result[key], value);
+      });
+    });
+    return result;
+  }
+
+  /**
+   * Returns an array of values for a given object
+   *
+   * @param  {Object} source - target object
+   * @return {Array<unknown>} - object values
+   */
+  function values(source = {}) {
+    const result = [];
+    for (const key in source) {
+      if (source.hasOwnProperty(key)) {
+        const value = source[key];
+        result.push(value);
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Object.defineProperty but "lazy", which means that the value is only set after
+   * it is retrieved the first time, rather than being set right away.
+   *
+   * @param {Object} obj the object to set the property on
+   * @param {string} key the key for the property to set
+   * @param {Function} getValue the function used to get the value when it is needed.
+   * @param {boolean} setter whether a setter should be allowed or not
+   */
+  function defineLazyProperty(obj, key, getValue, setter = true) {
+    const set = value => Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      writable: true
+    });
+    const options = {
+      configurable: true,
+      enumerable: true,
+      get() {
+        const value = getValue();
+        set(value);
+        return value;
+      }
+    };
+    if (setter) {
+      options.set = set;
+    }
+    return Object.defineProperty(obj, key, options);
+  }
+
+  var Obj = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    each: each,
+    reduce: reduce,
+    isObject: isObject,
+    isPlain: isPlain,
+    merge: merge,
+    values: values,
+    defineLazyProperty: defineLazyProperty
+  });
+
+  /**
+   * @file browser.js
+   * @module browser
+   */
+
+  /**
+   * Whether or not this device is an iPod.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_IPOD = false;
+
+  /**
+   * The detected iOS version - or `null`.
+   *
+   * @static
+   * @type {string|null}
+   */
+  let IOS_VERSION = null;
+
+  /**
+   * Whether or not this is an Android device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_ANDROID = false;
+
+  /**
+   * The detected Android version - or `null` if not Android or indeterminable.
+   *
+   * @static
+   * @type {number|string|null}
+   */
+  let ANDROID_VERSION;
+
+  /**
+   * Whether or not this is Mozilla Firefox.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_FIREFOX = false;
+
+  /**
+   * Whether or not this is Microsoft Edge.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_EDGE = false;
+
+  /**
+   * Whether or not this is any Chromium Browser
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_CHROMIUM = false;
+
+  /**
+   * Whether or not this is any Chromium browser that is not Edge.
+   *
+   * This will also be `true` for Chrome on iOS, which will have different support
+   * as it is actually Safari under the hood.
+   *
+   * Deprecated, as the behaviour to not match Edge was to prevent Legacy Edge's UA matching.
+   * IS_CHROMIUM should be used instead.
+   * "Chromium but not Edge" could be explicitly tested with IS_CHROMIUM && !IS_EDGE
+   *
+   * @static
+   * @deprecated
+   * @type {Boolean}
+   */
+  let IS_CHROME = false;
+
+  /**
+   * The detected Chromium version - or `null`.
+   *
+   * @static
+   * @type {number|null}
+   */
+  let CHROMIUM_VERSION = null;
+
+  /**
+   * The detected Google Chrome version - or `null`.
+   * This has always been the _Chromium_ version, i.e. would return on Chromium Edge.
+   * Deprecated, use CHROMIUM_VERSION instead.
+   *
+   * @static
+   * @deprecated
+   * @type {number|null}
+   */
+  let CHROME_VERSION = null;
+
+  /**
+   * The detected Internet Explorer version - or `null`.
+   *
+   * @static
+   * @deprecated
+   * @type {number|null}
+   */
+  let IE_VERSION = null;
+
+  /**
+   * Whether or not this is desktop Safari.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_SAFARI = false;
+
+  /**
+   * Whether or not this is a Windows machine.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_WINDOWS = false;
+
+  /**
+   * Whether or not this device is an iPad.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_IPAD = false;
+
+  /**
+   * Whether or not this device is an iPhone.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  // The Facebook app's UIWebView identifies as both an iPhone and iPad, so
+  // to identify iPhones, we need to exclude iPads.
+  // http://artsy.github.io/blog/2012/10/18/the-perils-of-ios-user-agent-sniffing/
+  let IS_IPHONE = false;
+
+  /**
+   * Whether or not this is a Tizen device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_TIZEN = false;
+
+  /**
+   * Whether or not this is a WebOS device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_WEBOS = false;
+
+  /**
+   * Whether or not this is a Smart TV (Tizen or WebOS) device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_SMART_TV = false;
+
+  /**
+   * Whether or not this device is touch-enabled.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const TOUCH_ENABLED = Boolean(isReal() && ('ontouchstart' in window || window.navigator.maxTouchPoints || window.DocumentTouch && window.document instanceof window.DocumentTouch));
+  const UAD = window.navigator && window.navigator.userAgentData;
+  if (UAD && UAD.platform && UAD.brands) {
+    // If userAgentData is present, use it instead of userAgent to avoid warnings
+    // Currently only implemented on Chromium
+    // userAgentData does not expose Android version, so ANDROID_VERSION remains `null`
+
+    IS_ANDROID = UAD.platform === 'Android';
+    IS_EDGE = Boolean(UAD.brands.find(b => b.brand === 'Microsoft Edge'));
+    IS_CHROMIUM = Boolean(UAD.brands.find(b => b.brand === 'Chromium'));
+    IS_CHROME = !IS_EDGE && IS_CHROMIUM;
+    CHROMIUM_VERSION = CHROME_VERSION = (UAD.brands.find(b => b.brand === 'Chromium') || {}).version || null;
+    IS_WINDOWS = UAD.platform === 'Windows';
+  }
+
+  // If the browser is not Chromium, either userAgentData is not present which could be an old Chromium browser,
+  //  or it's a browser that has added userAgentData since that we don't have tests for yet. In either case,
+  // the checks need to be made agiainst the regular userAgent string.
+  if (!IS_CHROMIUM) {
+    const USER_AGENT = window.navigator && window.navigator.userAgent || '';
+    IS_IPOD = /iPod/i.test(USER_AGENT);
+    IOS_VERSION = function () {
+      const match = USER_AGENT.match(/OS (\d+)_/i);
+      if (match && match[1]) {
+        return match[1];
+      }
+      return null;
+    }();
+    IS_ANDROID = /Android/i.test(USER_AGENT);
+    ANDROID_VERSION = function () {
+      // This matches Android Major.Minor.Patch versions
+      // ANDROID_VERSION is Major.Minor as a Number, if Minor isn't available, then only Major is returned
+      const match = USER_AGENT.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i);
+      if (!match) {
+        return null;
+      }
+      const major = match[1] && parseFloat(match[1]);
+      const minor = match[2] && parseFloat(match[2]);
+      if (major && minor) {
+        return parseFloat(match[1] + '.' + match[2]);
+      } else if (major) {
+        return major;
+      }
+      return null;
+    }();
+    IS_FIREFOX = /Firefox/i.test(USER_AGENT);
+    IS_EDGE = /Edg/i.test(USER_AGENT);
+    IS_CHROMIUM = /Chrome/i.test(USER_AGENT) || /CriOS/i.test(USER_AGENT);
+    IS_CHROME = !IS_EDGE && IS_CHROMIUM;
+    CHROMIUM_VERSION = CHROME_VERSION = function () {
+      const match = USER_AGENT.match(/(Chrome|CriOS)\/(\d+)/);
+      if (match && match[2]) {
+        return parseFloat(match[2]);
+      }
+      return null;
+    }();
+    IE_VERSION = function () {
+      const result = /MSIE\s(\d+)\.\d/.exec(USER_AGENT);
+      let version = result && parseFloat(result[1]);
+      if (!version && /Trident\/7.0/i.test(USER_AGENT) && /rv:11.0/.test(USER_AGENT)) {
+        // IE 11 has a different user agent string than other IE versions
+        version = 11.0;
+      }
+      return version;
+    }();
+    IS_TIZEN = /Tizen/i.test(USER_AGENT);
+    IS_WEBOS = /Web0S/i.test(USER_AGENT);
+    IS_SMART_TV = IS_TIZEN || IS_WEBOS;
+    IS_SAFARI = /Safari/i.test(USER_AGENT) && !IS_CHROME && !IS_ANDROID && !IS_EDGE && !IS_SMART_TV;
+    IS_WINDOWS = /Windows/i.test(USER_AGENT);
+    IS_IPAD = /iPad/i.test(USER_AGENT) || IS_SAFARI && TOUCH_ENABLED && !/iPhone/i.test(USER_AGENT);
+    IS_IPHONE = /iPhone/i.test(USER_AGENT) && !IS_IPAD;
+  }
+
+  /**
+   * Whether or not this is an iOS device.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const IS_IOS = IS_IPHONE || IS_IPAD || IS_IPOD;
+
+  /**
+   * Whether or not this is any flavor of Safari - including iOS.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const IS_ANY_SAFARI = (IS_SAFARI || IS_IOS) && !IS_CHROME;
+
+  var browser = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    get IS_IPOD () { return IS_IPOD; },
+    get IOS_VERSION () { return IOS_VERSION; },
+    get IS_ANDROID () { return IS_ANDROID; },
+    get ANDROID_VERSION () { return ANDROID_VERSION; },
+    get IS_FIREFOX () { return IS_FIREFOX; },
+    get IS_EDGE () { return IS_EDGE; },
+    get IS_CHROMIUM () { return IS_CHROMIUM; },
+    get IS_CHROME () { return IS_CHROME; },
+    get CHROMIUM_VERSION () { return CHROMIUM_VERSION; },
+    get CHROME_VERSION () { return CHROME_VERSION; },
+    get IE_VERSION () { return IE_VERSION; },
+    get IS_SAFARI () { return IS_SAFARI; },
+    get IS_WINDOWS () { return IS_WINDOWS; },
+    get IS_IPAD () { return IS_IPAD; },
+    get IS_IPHONE () { return IS_IPHONE; },
+    get IS_TIZEN () { return IS_TIZEN; },
+    get IS_WEBOS () { return IS_WEBOS; },
+    get IS_SMART_TV () { return IS_SMART_TV; },
+    TOUCH_ENABLED: TOUCH_ENABLED,
+    IS_IOS: IS_IOS,
+    IS_ANY_SAFARI: IS_ANY_SAFARI
+  });
+
+  /**
+   * @file dom.js
+   * @module dom
+   */
+
+  /**
+   * Detect if a value is a string with any non-whitespace characters.
+   *
+   * @private
+   * @param  {string} str
+   *         The string to check
+   *
+   * @return {boolean}
+   *         Will be `true` if the string is non-blank, `false` otherwise.
+   *
+   */
+  function isNonBlankString(str) {
+    // we use str.trim as it will trim any whitespace characters
+    // from the front or back of non-whitespace characters. aka
+    // Any string that contains non-whitespace characters will
+    // still contain them after `trim` but whitespace only strings
+    // will have a length of 0, failing this check.
+    return typeof str === 'string' && Boolean(str.trim());
+  }
+
+  /**
+   * Throws an error if the passed string has whitespace. This is used by
+   * class methods to be relatively consistent with the classList API.
+   *
+   * @private
+   * @param  {string} str
+   *         The string to check for whitespace.
+   *
+   * @throws {Error}
+   *         Throws an error if there is whitespace in the string.
+   */
+  function throwIfWhitespace(str) {
+    // str.indexOf instead of regex because str.indexOf is faster performance wise.
+    if (str.indexOf(' ') >= 0) {
+      throw new Error('class has illegal whitespace characters');
+    }
+  }
+
+  /**
+   * Whether the current DOM interface appears to be real (i.e. not simulated).
+   *
+   * @return {boolean}
+   *         Will be `true` if the DOM appears to be real, `false` otherwise.
+   */
+  function isReal() {
+    // Both document and window will never be undefined thanks to `global`.
+    return document === window.document;
+  }
+
+  /**
+   * Determines, via duck typing, whether or not a value is a DOM element.
+   *
+   * @param  {*} value
+   *         The value to check.
+   *
+   * @return {boolean}
+   *         Will be `true` if the value is a DOM element, `false` otherwise.
+   */
+  function isEl(value) {
+    return isObject(value) && value.nodeType === 1;
+  }
+
+  /**
+   * Determines if the current DOM is embedded in an iframe.
+   *
+   * @return {boolean}
+   *         Will be `true` if the DOM is embedded in an iframe, `false`
+   *         otherwise.
+   */
+  function isInFrame() {
+    // We need a try/catch here because Safari will throw errors when attempting
+    // to get either `parent` or `self`
+    try {
+      return window.parent !== window.self;
+    } catch (x) {
+      return true;
+    }
+  }
+
+  /**
+   * Creates functions to query the DOM using a given method.
+   *
+   * @private
+   * @param   {string} method
+   *          The method to create the query with.
+   *
+   * @return  {Function}
+   *          The query method
+   */
+  function createQuerier(method) {
+    return function (selector, context) {
+      if (!isNonBlankString(selector)) {
+        return document[method](null);
+      }
+      if (isNonBlankString(context)) {
+        context = document.querySelector(context);
+      }
+      const ctx = isEl(context) ? context : document;
+      return ctx[method] && ctx[method](selector);
+    };
+  }
+
+  /**
+   * Creates an element and applies properties, attributes, and inserts content.
+   *
+   * @param  {string} [tagName='div']
+   *         Name of tag to be created.
+   *
+   * @param  {Object} [properties={}]
+   *         Element properties to be applied.
+   *
+   * @param  {Object} [attributes={}]
+   *         Element attributes to be applied.
+   *
+   * @param {ContentDescriptor} [content]
+   *        A content descriptor object.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  function createEl(tagName = 'div', properties = {}, attributes = {}, content) {
+    const el = document.createElement(tagName);
+    Object.getOwnPropertyNames(properties).forEach(function (propName) {
+      const val = properties[propName];
+
+      // Handle textContent since it's not supported everywhere and we have a
+      // method for it.
+      if (propName === 'textContent') {
+        textContent(el, val);
+      } else if (el[propName] !== val || propName === 'tabIndex') {
+        el[propName] = val;
+      }
+    });
+    Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
+      el.setAttribute(attrName, attributes[attrName]);
+    });
+    if (content) {
+      appendContent(el, content);
+    }
+    return el;
+  }
+
+  /**
+   * Injects text into an element, replacing any existing contents entirely.
+   *
+   * @param  {HTMLElement} el
+   *         The element to add text content into
+   *
+   * @param  {string} text
+   *         The text content to add.
+   *
+   * @return {Element}
+   *         The element with added text content.
+   */
+  function textContent(el, text) {
+    if (typeof el.textContent === 'undefined') {
+      el.innerText = text;
+    } else {
+      el.textContent = text;
+    }
+    return el;
+  }
+
+  /**
+   * Insert an element as the first child node of another
+   *
+   * @param {Element} child
+   *        Element to insert
+   *
+   * @param {Element} parent
+   *        Element to insert child into
+   */
+  function prependTo(child, parent) {
+    if (parent.firstChild) {
+      parent.insertBefore(child, parent.firstChild);
+    } else {
+      parent.appendChild(child);
+    }
+  }
+
+  /**
+   * Check if an element has a class name.
+   *
+   * @param  {Element} element
+   *         Element to check
+   *
+   * @param  {string} classToCheck
+   *         Class name to check for
+   *
+   * @return {boolean}
+   *         Will be `true` if the element has a class, `false` otherwise.
+   *
+   * @throws {Error}
+   *         Throws an error if `classToCheck` has white space.
+   */
+  function hasClass(element, classToCheck) {
+    throwIfWhitespace(classToCheck);
+    return element.classList.contains(classToCheck);
+  }
+
+  /**
+   * Add a class name to an element.
+   *
+   * @param  {Element} element
+   *         Element to add class name to.
+   *
+   * @param  {...string} classesToAdd
+   *         One or more class name to add.
+   *
+   * @return {Element}
+   *         The DOM element with the added class name.
+   */
+  function addClass(element, ...classesToAdd) {
+    element.classList.add(...classesToAdd.reduce((prev, current) => prev.concat(current.split(/\s+/)), []));
+    return element;
+  }
+
+  /**
+   * Remove a class name from an element.
+   *
+   * @param  {Element} element
+   *         Element to remove a class name from.
+   *
+   * @param  {...string} classesToRemove
+   *         One or more class name to remove.
+   *
+   * @return {Element}
+   *         The DOM element with class name removed.
+   */
+  function removeClass(element, ...classesToRemove) {
+    // Protect in case the player gets disposed
+    if (!element) {
+      log.warn("removeClass was called with an element that doesn't exist");
+      return null;
+    }
+    element.classList.remove(...classesToRemove.reduce((prev, current) => prev.concat(current.split(/\s+/)), []));
+    return element;
+  }
+
+  /**
+   * The callback definition for toggleClass.
+   *
+   * @callback module:dom~PredicateCallback
+   * @param    {Element} element
+   *           The DOM element of the Component.
+   *
+   * @param    {string} classToToggle
+   *           The `className` that wants to be toggled
+   *
+   * @return   {boolean|undefined}
+   *           If `true` is returned, the `classToToggle` will be added to the
+   *           `element`. If `false`, the `classToToggle` will be removed from
+   *           the `element`. If `undefined`, the callback will be ignored.
+   */
+
+  /**
+   * Adds or removes a class name to/from an element depending on an optional
+   * condition or the presence/absence of the class name.
+   *
+   * @param  {Element} element
+   *         The element to toggle a class name on.
+   *
+   * @param  {string} classToToggle
+   *         The class that should be toggled.
+   *
+   * @param  {boolean|module:dom~PredicateCallback} [predicate]
+   *         See the return value for {@link module:dom~PredicateCallback}
+   *
+   * @return {Element}
+   *         The element with a class that has been toggled.
+   */
+  function toggleClass(element, classToToggle, predicate) {
+    if (typeof predicate === 'function') {
+      predicate = predicate(element, classToToggle);
+    }
+    if (typeof predicate !== 'boolean') {
+      predicate = undefined;
+    }
+    classToToggle.split(/\s+/).forEach(className => element.classList.toggle(className, predicate));
+    return element;
+  }
+
+  /**
+   * Apply attributes to an HTML element.
+   *
+   * @param {Element} el
+   *        Element to add attributes to.
+   *
+   * @param {Object} [attributes]
+   *        Attributes to be applied.
+   */
+  function setAttributes(el, attributes) {
+    Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
+      const attrValue = attributes[attrName];
+      if (attrValue === null || typeof attrValue === 'undefined' || attrValue === false) {
+        el.removeAttribute(attrName);
+      } else {
+        el.setAttribute(attrName, attrValue === true ? '' : attrValue);
+      }
+    });
+  }
+
+  /**
+   * Get an element's attribute values, as defined on the HTML tag.
+   *
+   * Attributes are not the same as properties. They're defined on the tag
+   * or with setAttribute.
+   *
+   * @param  {Element} tag
+   *         Element from which to get tag attributes.
+   *
+   * @return {Object}
+   *         All attributes of the element. Boolean attributes will be `true` or
+   *         `false`, others will be strings.
+   */
+  function getAttributes(tag) {
+    const obj = {};
+
+    // known boolean attributes
+    // we can check for matching boolean properties, but not all browsers
+    // and not all tags know about these attributes, so, we still want to check them manually
+    const knownBooleans = ['autoplay', 'controls', 'playsinline', 'loop', 'muted', 'default', 'defaultMuted'];
+    if (tag && tag.attributes && tag.attributes.length > 0) {
+      const attrs = tag.attributes;
+      for (let i = attrs.length - 1; i >= 0; i--) {
+        const attrName = attrs[i].name;
+        /** @type {boolean|string} */
+        let attrVal = attrs[i].value;
+
+        // check for known booleans
+        // the matching element property will return a value for typeof
+        if (knownBooleans.includes(attrName)) {
+          // the value of an included boolean attribute is typically an empty
+          // string ('') which would equal false if we just check for a false value.
+          // we also don't want support bad code like autoplay='false'
+          attrVal = attrVal !== null ? true : false;
+        }
+        obj[attrName] = attrVal;
+      }
+    }
+    return obj;
+  }
+
+  /**
+   * Get the value of an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to get the value of.
+   *
+   * @return {string}
+   *         The value of the attribute.
+   */
+  function getAttribute(el, attribute) {
+    return el.getAttribute(attribute);
+  }
+
+  /**
+   * Set the value of an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to set.
+   *
+   * @param {string} value
+   *        Value to set the attribute to.
+   */
+  function setAttribute(el, attribute, value) {
+    el.setAttribute(attribute, value);
+  }
+
+  /**
+   * Remove an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to remove.
+   */
+  function removeAttribute(el, attribute) {
+    el.removeAttribute(attribute);
+  }
+
+  /**
+   * Attempt to block the ability to select text.
+   */
+  function blockTextSelection() {
+    document.body.focus();
+    document.onselectstart = function () {
+      return false;
+    };
+  }
+
+  /**
+   * Turn off text selection blocking.
+   */
+  function unblockTextSelection() {
+    document.onselectstart = function () {
+      return true;
+    };
+  }
+
+  /**
+   * Identical to the native `getBoundingClientRect` function, but ensures that
+   * the method is supported at all (it is in all browsers we claim to support)
+   * and that the element is in the DOM before continuing.
+   *
+   * This wrapper function also shims properties which are not provided by some
+   * older browsers (namely, IE8).
+   *
+   * Additionally, some browsers do not support adding properties to a
+   * `ClientRect`/`DOMRect` object; so, we shallow-copy it with the standard
+   * properties (except `x` and `y` which are not widely supported). This helps
+   * avoid implementations where keys are non-enumerable.
+   *
+   * @param  {Element} el
+   *         Element whose `ClientRect` we want to calculate.
+   *
+   * @return {Object|undefined}
+   *         Always returns a plain object - or `undefined` if it cannot.
+   */
+  function getBoundingClientRect(el) {
+    if (el && el.getBoundingClientRect && el.parentNode) {
+      const rect = el.getBoundingClientRect();
+      const result = {};
+      ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach(k => {
+        if (rect[k] !== undefined) {
+          result[k] = rect[k];
+        }
+      });
+      if (!result.height) {
+        result.height = parseFloat(computedStyle(el, 'height'));
+      }
+      if (!result.width) {
+        result.width = parseFloat(computedStyle(el, 'width'));
+      }
+      return result;
+    }
+  }
+
+  /**
+   * Represents the position of a DOM element on the page.
+   *
+   * @typedef  {Object} module:dom~Position
+   *
+   * @property {number} left
+   *           Pixels to the left.
+   *
+   * @property {number} top
+   *           Pixels from the top.
+   */
+
+  /**
+   * Get the position of an element in the DOM.
+   *
+   * Uses `getBoundingClientRect` technique from John Resig.
+   *
+   * @see http://ejohn.org/blog/getboundingclientrect-is-awesome/
+   *
+   * @param  {Element} el
+   *         Element from which to get offset.
+   *
+   * @return {module:dom~Position}
+   *         The position of the element that was passed in.
+   */
+  function findPosition(el) {
+    if (!el || el && !el.offsetParent) {
+      return {
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0
+      };
+    }
+    const width = el.offsetWidth;
+    const height = el.offsetHeight;
+    let left = 0;
+    let top = 0;
+    while (el.offsetParent && el !== document[FullscreenApi.fullscreenElement]) {
+      left += el.offsetLeft;
+      top += el.offsetTop;
+      el = el.offsetParent;
+    }
+    return {
+      left,
+      top,
+      width,
+      height
+    };
+  }
+
+  /**
+   * Represents x and y coordinates for a DOM element or mouse pointer.
+   *
+   * @typedef  {Object} module:dom~Coordinates
+   *
+   * @property {number} x
+   *           x coordinate in pixels
+   *
+   * @property {number} y
+   *           y coordinate in pixels
+   */
+
+  /**
+   * Get the pointer position within an element.
+   *
+   * The base on the coordinates are the bottom left of the element.
+   *
+   * @param  {Element} el
+   *         Element on which to get the pointer position on.
+   *
+   * @param  {Event} event
+   *         Event object.
+   *
+   * @return {module:dom~Coordinates}
+   *         A coordinates object corresponding to the mouse position.
+   *
+   */
+  function getPointerPosition(el, event) {
+    const translated = {
+      x: 0,
+      y: 0
+    };
+    if (IS_IOS) {
+      let item = el;
+      while (item && item.nodeName.toLowerCase() !== 'html') {
+        const transform = computedStyle(item, 'transform');
+        if (/^matrix/.test(transform)) {
+          const values = transform.slice(7, -1).split(/,\s/).map(Number);
+          translated.x += values[4];
+          translated.y += values[5];
+        } else if (/^matrix3d/.test(transform)) {
+          const values = transform.slice(9, -1).split(/,\s/).map(Number);
+          translated.x += values[12];
+          translated.y += values[13];
+        }
+        item = item.parentNode;
+      }
+    }
+    const position = {};
+    const boxTarget = findPosition(event.target);
+    const box = findPosition(el);
+    const boxW = box.width;
+    const boxH = box.height;
+    let offsetY = event.offsetY - (box.top - boxTarget.top);
+    let offsetX = event.offsetX - (box.left - boxTarget.left);
+    if (event.changedTouches) {
+      offsetX = event.changedTouches[0].pageX - box.left;
+      offsetY = event.changedTouches[0].pageY + box.top;
+      if (IS_IOS) {
+        offsetX -= translated.x;
+        offsetY -= translated.y;
+      }
+    }
+    position.y = 1 - Math.max(0, Math.min(1, offsetY / boxH));
+    position.x = Math.max(0, Math.min(1, offsetX / boxW));
+    return position;
+  }
+
+  /**
+   * Determines, via duck typing, whether or not a value is a text node.
+   *
+   * @param  {*} value
+   *         Check if this value is a text node.
+   *
+   * @return {boolean}
+   *         Will be `true` if the value is a text node, `false` otherwise.
+   */
+  function isTextNode(value) {
+    return isObject(value) && value.nodeType === 3;
+  }
+
+  /**
+   * Empties the contents of an element.
+   *
+   * @param  {Element} el
+   *         The element to empty children from
+   *
+   * @return {Element}
+   *         The element with no children
+   */
+  function emptyEl(el) {
+    while (el.firstChild) {
+      el.removeChild(el.firstChild);
+    }
+    return el;
+  }
+
+  /**
+   * This is a mixed value that describes content to be injected into the DOM
+   * via some method. It can be of the following types:
+   *
+   * Type       | Description
+   * -----------|-------------
+   * `string`   | The value will be normalized into a text node.
+   * `Element`  | The value will be accepted as-is.
+   * `Text`     | A TextNode. The value will be accepted as-is.
+   * `Array`    | A one-dimensional array of strings, elements, text nodes, or functions. These functions should return a string, element, or text node (any other return value, like an array, will be ignored).
+   * `Function` | A function, which is expected to return a string, element, text node, or array - any of the other possible values described above. This means that a content descriptor could be a function that returns an array of functions, but those second-level functions must return strings, elements, or text nodes.
+   *
+   * @typedef {string|Element|Text|Array|Function} ContentDescriptor
+   */
+
+  /**
+   * Normalizes content for eventual insertion into the DOM.
+   *
+   * This allows a wide range of content definition methods, but helps protect
+   * from falling into the trap of simply writing to `innerHTML`, which could
+   * be an XSS concern.
+   *
+   * The content for an element can be passed in multiple types and
+   * combinations, whose behavior is as follows:
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Array}
+   *         All of the content that was passed in, normalized to an array of
+   *         elements or text nodes.
+   */
+  function normalizeContent(content) {
+    // First, invoke content if it is a function. If it produces an array,
+    // that needs to happen before normalization.
+    if (typeof content === 'function') {
+      content = content();
+    }
+
+    // Next up, normalize to an array, so one or many items can be normalized,
+    // filtered, and returned.
+    return (Array.isArray(content) ? content : [content]).map(value => {
+      // First, invoke value if it is a function to produce a new value,
+      // which will be subsequently normalized to a Node of some kind.
+      if (typeof value === 'function') {
+        value = value();
+      }
+      if (isEl(value) || isTextNode(value)) {
+        return value;
+      }
+      if (typeof value === 'string' && /\S/.test(value)) {
+        return document.createTextNode(value);
+      }
+    }).filter(value => value);
+  }
+
+  /**
+   * Normalizes and appends content to an element.
+   *
+   * @param  {Element} el
+   *         Element to append normalized content to.
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Element}
+   *         The element with appended normalized content.
+   */
+  function appendContent(el, content) {
+    normalizeContent(content).forEach(node => el.appendChild(node));
+    return el;
+  }
+
+  /**
+   * Normalizes and inserts content into an element; this is identical to
+   * `appendContent()`, except it empties the element first.
+   *
+   * @param {Element} el
+   *        Element to insert normalized content into.
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Element}
+   *         The element with inserted normalized content.
+   */
+  function insertContent(el, content) {
+    return appendContent(emptyEl(el), content);
+  }
+
+  /**
+   * Check if an event was a single left click.
+   *
+   * @param  {MouseEvent} event
+   *         Event object.
+   *
+   * @return {boolean}
+   *         Will be `true` if a single left click, `false` otherwise.
+   */
+  function isSingleLeftClick(event) {
+    // Note: if you create something draggable, be sure to
+    // call it on both `mousedown` and `mousemove` event,
+    // otherwise `mousedown` should be enough for a button
+
+    if (event.button === undefined && event.buttons === undefined) {
+      // Why do we need `buttons` ?
+      // Because, middle mouse sometimes have this:
+      // e.button === 0 and e.buttons === 4
+      // Furthermore, we want to prevent combination click, something like
+      // HOLD middlemouse then left click, that would be
+      // e.button === 0, e.buttons === 5
+      // just `button` is not gonna work
+
+      // Alright, then what this block does ?
+      // this is for chrome `simulate mobile devices`
+      // I want to support this as well
+
+      return true;
+    }
+    if (event.button === 0 && event.buttons === undefined) {
+      // Touch screen, sometimes on some specific device, `buttons`
+      // doesn't have anything (safari on ios, blackberry...)
+
+      return true;
+    }
+
+    // `mouseup` event on a single left click has
+    // `button` and `buttons` equal to 0
+    if (event.type === 'mouseup' && event.button === 0 && event.buttons === 0) {
+      return true;
+    }
+    if (event.button !== 0 || event.buttons !== 1) {
+      // This is the reason we have those if else block above
+      // if any special case we can catch and let it slide
+      // we do it above, when get to here, this definitely
+      // is-not-left-click
+
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * Finds a single DOM element matching `selector` within the optional
+   * `context` of another DOM element (defaulting to `document`).
+   *
+   * @param  {string} selector
+   *         A valid CSS selector, which will be passed to `querySelector`.
+   *
+   * @param  {Element|String} [context=document]
+   *         A DOM element within which to query. Can also be a selector
+   *         string in which case the first matching element will be used
+   *         as context. If missing (or no element matches selector), falls
+   *         back to `document`.
+   *
+   * @return {Element|null}
+   *         The element that was found or null.
+   */
+  const $ = createQuerier('querySelector');
+
+  /**
+   * Finds a all DOM elements matching `selector` within the optional
+   * `context` of another DOM element (defaulting to `document`).
+   *
+   * @param  {string} selector
+   *         A valid CSS selector, which will be passed to `querySelectorAll`.
+   *
+   * @param  {Element|String} [context=document]
+   *         A DOM element within which to query. Can also be a selector
+   *         string in which case the first matching element will be used
+   *         as context. If missing (or no element matches selector), falls
+   *         back to `document`.
+   *
+   * @return {NodeList}
+   *         A element list of elements that were found. Will be empty if none
+   *         were found.
+   *
+   */
+  const $$ = createQuerier('querySelectorAll');
+
+  /**
+   * A safe getComputedStyle.
+   *
+   * This is needed because in Firefox, if the player is loaded in an iframe with
+   * `display:none`, then `getComputedStyle` returns `null`, so, we do a
+   * null-check to make sure that the player doesn't break in these cases.
+   *
+   * @param    {Element} el
+   *           The element you want the computed style of
+   *
+   * @param    {string} prop
+   *           The property name you want
+   *
+   * @see      https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+   */
+  function computedStyle(el, prop) {
+    if (!el || !prop) {
+      return '';
+    }
+    if (typeof window.getComputedStyle === 'function') {
+      let computedStyleValue;
+      try {
+        computedStyleValue = window.getComputedStyle(el);
+      } catch (e) {
+        return '';
+      }
+      return computedStyleValue ? computedStyleValue.getPropertyValue(prop) || computedStyleValue[prop] : '';
+    }
+    return '';
+  }
+
+  /**
+   * Copy document style sheets to another window.
+   *
+   * @param    {Window} win
+   *           The window element you want to copy the document style sheets to.
+   *
+   */
+  function copyStyleSheetsToWindow(win) {
+    [...document.styleSheets].forEach(styleSheet => {
+      try {
+        const cssRules = [...styleSheet.cssRules].map(rule => rule.cssText).join('');
+        const style = document.createElement('style');
+        style.textContent = cssRules;
+        win.document.head.appendChild(style);
+      } catch (e) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.type = styleSheet.type;
+        // For older Safari this has to be the string; on other browsers setting the MediaList works
+        link.media = styleSheet.media.mediaText;
+        link.href = styleSheet.href;
+        win.document.head.appendChild(link);
+      }
+    });
+  }
+
+  var Dom = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    isReal: isReal,
+    isEl: isEl,
+    isInFrame: isInFrame,
+    createEl: createEl,
+    textContent: textContent,
+    prependTo: prependTo,
+    hasClass: hasClass,
+    addClass: addClass,
+    removeClass: removeClass,
+    toggleClass: toggleClass,
+    setAttributes: setAttributes,
+    getAttributes: getAttributes,
+    getAttribute: getAttribute,
+    setAttribute: setAttribute,
+    removeAttribute: removeAttribute,
+    blockTextSelection: blockTextSelection,
+    unblockTextSelection: unblockTextSelection,
+    getBoundingClientRect: getBoundingClientRect,
+    findPosition: findPosition,
+    getPointerPosition: getPointerPosition,
+    isTextNode: isTextNode,
+    emptyEl: emptyEl,
+    normalizeContent: normalizeContent,
+    appendContent: appendContent,
+    insertContent: insertContent,
+    isSingleLeftClick: isSingleLeftClick,
+    $: $,
+    $$: $$,
+    computedStyle: computedStyle,
+    copyStyleSheetsToWindow: copyStyleSheetsToWindow
+  });
+
+  /**
+   * @file setup.js - Functions for setting up a player without
+   * user interaction based on the data-setup `attribute` of the video tag.
+   *
+   * @module setup
+   */
+  let _windowLoaded = false;
+  let videojs$1;
+
+  /**
+   * Set up any tags that have a data-setup `attribute` when the player is started.
+   */
+  const autoSetup = function () {
+    if (videojs$1.options.autoSetup === false) {
+      return;
+    }
+    const vids = Array.prototype.slice.call(document.getElementsByTagName('video'));
+    const audios = Array.prototype.slice.call(document.getElementsByTagName('audio'));
+    const divs = Array.prototype.slice.call(document.getElementsByTagName('video-js'));
+    const mediaEls = vids.concat(audios, divs);
+
+    // Check if any media elements exist
+    if (mediaEls && mediaEls.length > 0) {
+      for (let i = 0, e = mediaEls.length; i < e; i++) {
+        const mediaEl = mediaEls[i];
+
+        // Check if element exists, has getAttribute func.
+        if (mediaEl && mediaEl.getAttribute) {
+          // Make sure this player hasn't already been set up.
+          if (mediaEl.player === undefined) {
+            const options = mediaEl.getAttribute('data-setup');
+
+            // Check if data-setup attr exists.
+            // We only auto-setup if they've added the data-setup attr.
+            if (options !== null) {
+              // Create new video.js instance.
+              videojs$1(mediaEl);
+            }
+          }
+
+          // If getAttribute isn't defined, we need to wait for the DOM.
+        } else {
+          autoSetupTimeout(1);
+          break;
+        }
+      }
+
+      // No videos were found, so keep looping unless page is finished loading.
+    } else if (!_windowLoaded) {
+      autoSetupTimeout(1);
+    }
+  };
+
+  /**
+   * Wait until the page is loaded before running autoSetup. This will be called in
+   * autoSetup if `hasLoaded` returns false.
+   *
+   * @param {number} wait
+   *        How long to wait in ms
+   *
+   * @param {module:videojs} [vjs]
+   *        The videojs library function
+   */
+  function autoSetupTimeout(wait, vjs) {
+    // Protect against breakage in non-browser environments
+    if (!isReal()) {
+      return;
+    }
+    if (vjs) {
+      videojs$1 = vjs;
+    }
+    window.setTimeout(autoSetup, wait);
+  }
+
+  /**
+   * Used to set the internal tracking of window loaded state to true.
+   *
+   * @private
+   */
+  function setWindowLoaded() {
+    _windowLoaded = true;
+    window.removeEventListener('load', setWindowLoaded);
+  }
+  if (isReal()) {
+    if (document.readyState === 'complete') {
+      setWindowLoaded();
+    } else {
+      /**
+       * Listen for the load event on window, and set _windowLoaded to true.
+       *
+       * We use a standard event listener here to avoid incrementing the GUID
+       * before any players are created.
+       *
+       * @listens load
+       */
+      window.addEventListener('load', setWindowLoaded);
+    }
+  }
+
+  /**
+   * @file stylesheet.js
+   * @module stylesheet
+   */
+
+  /**
+   * Create a DOM style element given a className for it.
+   *
+   * @param {string} className
+   *        The className to add to the created style element.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  const createStyleElement = function (className) {
+    const style = document.createElement('style');
+    style.className = className;
+    return style;
+  };
+
+  /**
+   * Add text to a DOM element.
+   *
+   * @param {Element} el
+   *        The Element to add text content to.
+   *
+   * @param {string} content
+   *        The text to add to the element.
+   */
+  const setTextContent = function (el, content) {
+    if (el.styleSheet) {
+      el.styleSheet.cssText = content;
+    } else {
+      el.textContent = content;
+    }
+  };
+
+  /**
+   * @file dom-data.js
+   * @module dom-data
+   */
+
+  /**
+   * Element Data Store.
+   *
+   * Allows for binding data to an element without putting it directly on the
+   * element. Ex. Event listeners are stored here.
+   * (also from jsninja.com, slightly modified and updated for closure compiler)
+   *
+   * @type {Object}
+   * @private
+   */
+  var DomData = new WeakMap();
+
+  /**
+   * @file guid.js
+   * @module guid
+   */
+
+  // Default value for GUIDs. This allows us to reset the GUID counter in tests.
+  //
+  // The initial GUID is 3 because some users have come to rely on the first
+  // default player ID ending up as `vjs_video_3`.
+  //
+  // See: https://github.com/videojs/video.js/pull/6216
+  const _initialGuid = 3;
+
+  /**
+   * Unique ID for an element or function
+   *
+   * @type {Number}
+   */
+  let _guid = _initialGuid;
+
+  /**
+   * Get a unique auto-incrementing ID by number that has not been returned before.
+   *
+   * @return {number}
+   *         A new unique ID.
+   */
+  function newGUID() {
+    return _guid++;
+  }
+
+  /**
+   * @file events.js. An Event System (John Resig - Secrets of a JS Ninja http://jsninja.com/)
+   * (Original book version wasn't completely usable, so fixed some things and made Closure Compiler compatible)
+   * This should work very similarly to jQuery's events, however it's based off the book version which isn't as
+   * robust as jquery's, so there's probably some differences.
+   *
+   * @file events.js
+   * @module events
+   */
+
+  /**
+   * Clean up the listener cache and dispatchers
+   *
+   * @param {Element|Object} elem
+   *        Element to clean up
+   *
+   * @param {string} type
+   *        Type of event to clean up
+   */
+  function _cleanUpEvents(elem, type) {
+    if (!DomData.has(elem)) {
+      return;
+    }
+    const data = DomData.get(elem);
+
+    // Remove the events of a particular type if there are none left
+    if (data.handlers[type].length === 0) {
+      delete data.handlers[type];
+      // data.handlers[type] = null;
+      // Setting to null was causing an error with data.handlers
+
+      // Remove the meta-handler from the element
+      if (elem.removeEventListener) {
+        elem.removeEventListener(type, data.dispatcher, false);
+      } else if (elem.detachEvent) {
+        elem.detachEvent('on' + type, data.dispatcher);
+      }
+    }
+
+    // Remove the events object if there are no types left
+    if (Object.getOwnPropertyNames(data.handlers).length <= 0) {
+      delete data.handlers;
+      delete data.dispatcher;
+      delete data.disabled;
+    }
+
+    // Finally remove the element data if there is no data left
+    if (Object.getOwnPropertyNames(data).length === 0) {
+      DomData.delete(elem);
+    }
+  }
+
+  /**
+   * Loops through an array of event types and calls the requested method for each type.
+   *
+   * @param {Function} fn
+   *        The event method we want to use.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind listeners to
+   *
+   * @param {string[]} types
+   *        Type of event to bind to.
+   *
+   * @param {Function} callback
+   *        Event listener.
+   */
+  function _handleMultipleEvents(fn, elem, types, callback) {
+    types.forEach(function (type) {
+      // Call the event method for each one of the types
+      fn(elem, type, callback);
+    });
+  }
+
+  /**
+   * Fix a native event to have standard property values
+   *
+   * @param {Object} event
+   *        Event object to fix.
+   *
+   * @return {Object}
+   *         Fixed event object.
+   */
+  function fixEvent(event) {
+    if (event.fixed_) {
+      return event;
+    }
+    function returnTrue() {
+      return true;
+    }
+    function returnFalse() {
+      return false;
+    }
+
+    // Test if fixing up is needed
+    // Used to check if !event.stopPropagation instead of isPropagationStopped
+    // But native events return true for stopPropagation, but don't have
+    // other expected methods like isPropagationStopped. Seems to be a problem
+    // with the Javascript Ninja code. So we're just overriding all events now.
+    if (!event || !event.isPropagationStopped || !event.isImmediatePropagationStopped) {
+      const old = event || window.event;
+      event = {};
+      // Clone the old object so that we can modify the values event = {};
+      // IE8 Doesn't like when you mess with native event properties
+      // Firefox returns false for event.hasOwnProperty('type') and other props
+      //  which makes copying more difficult.
+      // TODO: Probably best to create a whitelist of event props
+      for (const key in old) {
+        // Safari 6.0.3 warns you if you try to copy deprecated layerX/Y
+        // Chrome warns you if you try to copy deprecated keyboardEvent.keyLocation
+        // and webkitMovementX/Y
+        // Lighthouse complains if Event.path is copied
+        if (key !== 'layerX' && key !== 'layerY' && key !== 'keyLocation' && key !== 'webkitMovementX' && key !== 'webkitMovementY' && key !== 'path') {
+          // Chrome 32+ warns if you try to copy deprecated returnValue, but
+          // we still want to if preventDefault isn't supported (IE8).
+          if (!(key === 'returnValue' && old.preventDefault)) {
+            event[key] = old[key];
+          }
+        }
+      }
+
+      // The event occurred on this element
+      if (!event.target) {
+        event.target = event.srcElement || document;
+      }
+
+      // Handle which other element the event is related to
+      if (!event.relatedTarget) {
+        event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
+      }
+
+      // Stop the default browser action
+      event.preventDefault = function () {
+        if (old.preventDefault) {
+          old.preventDefault();
+        }
+        event.returnValue = false;
+        old.returnValue = false;
+        event.defaultPrevented = true;
+      };
+      event.defaultPrevented = false;
+
+      // Stop the event from bubbling
+      event.stopPropagation = function () {
+        if (old.stopPropagation) {
+          old.stopPropagation();
+        }
+        event.cancelBubble = true;
+        old.cancelBubble = true;
+        event.isPropagationStopped = returnTrue;
+      };
+      event.isPropagationStopped = returnFalse;
+
+      // Stop the event from bubbling and executing other handlers
+      event.stopImmediatePropagation = function () {
+        if (old.stopImmediatePropagation) {
+          old.stopImmediatePropagation();
+        }
+        event.isImmediatePropagationStopped = returnTrue;
+        event.stopPropagation();
+      };
+      event.isImmediatePropagationStopped = returnFalse;
+
+      // Handle mouse position
+      if (event.clientX !== null && event.clientX !== undefined) {
+        const doc = document.documentElement;
+        const body = document.body;
+        event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
+        event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
+      }
+
+      // Handle key presses
+      event.which = event.charCode || event.keyCode;
+
+      // Fix button for mouse clicks:
+      // 0 == left; 1 == middle; 2 == right
+      if (event.button !== null && event.button !== undefined) {
+        // The following is disabled because it does not pass videojs-standard
+        // and... yikes.
+        /* eslint-disable */
+        event.button = event.button & 1 ? 0 : event.button & 4 ? 1 : event.button & 2 ? 2 : 0;
+        /* eslint-enable */
+      }
+    }
+
+    event.fixed_ = true;
+    // Returns fixed-up instance
+    return event;
+  }
+
+  /**
+   * Whether passive event listeners are supported
+   */
+  let _supportsPassive;
+  const supportsPassive = function () {
+    if (typeof _supportsPassive !== 'boolean') {
+      _supportsPassive = false;
+      try {
+        const opts = Object.defineProperty({}, 'passive', {
+          get() {
+            _supportsPassive = true;
+          }
+        });
+        window.addEventListener('test', null, opts);
+        window.removeEventListener('test', null, opts);
+      } catch (e) {
+        // disregard
+      }
+    }
+    return _supportsPassive;
+  };
+
+  /**
+   * Touch events Chrome expects to be passive
+   */
+  const passiveEvents = ['touchstart', 'touchmove'];
+
+  /**
+   * Add an event listener to element
+   * It stores the handler function in a separate cache object
+   * and adds a generic handler to the element's event,
+   * along with a unique id (guid) to the element.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind listeners to
+   *
+   * @param {string|string[]} type
+   *        Type of event to bind to.
+   *
+   * @param {Function} fn
+   *        Event listener.
+   */
+  function on(elem, type, fn) {
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(on, elem, type, fn);
+    }
+    if (!DomData.has(elem)) {
+      DomData.set(elem, {});
+    }
+    const data = DomData.get(elem);
+
+    // We need a place to store all our handler data
+    if (!data.handlers) {
+      data.handlers = {};
+    }
+    if (!data.handlers[type]) {
+      data.handlers[type] = [];
+    }
+    if (!fn.guid) {
+      fn.guid = newGUID();
+    }
+    data.handlers[type].push(fn);
+    if (!data.dispatcher) {
+      data.disabled = false;
+      data.dispatcher = function (event, hash) {
+        if (data.disabled) {
+          return;
+        }
+        event = fixEvent(event);
+        const handlers = data.handlers[event.type];
+        if (handlers) {
+          // Copy handlers so if handlers are added/removed during the process it doesn't throw everything off.
+          const handlersCopy = handlers.slice(0);
+          for (let m = 0, n = handlersCopy.length; m < n; m++) {
+            if (event.isImmediatePropagationStopped()) {
+              break;
+            } else {
+              try {
+                handlersCopy[m].call(elem, event, hash);
+              } catch (e) {
+                log.error(e);
+              }
+            }
+          }
+        }
+      };
+    }
+    if (data.handlers[type].length === 1) {
+      if (elem.addEventListener) {
+        let options = false;
+        if (supportsPassive() && passiveEvents.indexOf(type) > -1) {
+          options = {
+            passive: true
+          };
+        }
+        elem.addEventListener(type, data.dispatcher, options);
+      } else if (elem.attachEvent) {
+        elem.attachEvent('on' + type, data.dispatcher);
+      }
+    }
+  }
+
+  /**
+   * Removes event listeners from an element
+   *
+   * @param {Element|Object} elem
+   *        Object to remove listeners from.
+   *
+   * @param {string|string[]} [type]
+   *        Type of listener to remove. Don't include to remove all events from element.
+   *
+   * @param {Function} [fn]
+   *        Specific listener to remove. Don't include to remove listeners for an event
+   *        type.
+   */
+  function off(elem, type, fn) {
+    // Don't want to add a cache object through getElData if not needed
+    if (!DomData.has(elem)) {
+      return;
+    }
+    const data = DomData.get(elem);
+
+    // If no events exist, nothing to unbind
+    if (!data.handlers) {
+      return;
+    }
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(off, elem, type, fn);
+    }
+
+    // Utility function
+    const removeType = function (el, t) {
+      data.handlers[t] = [];
+      _cleanUpEvents(el, t);
+    };
+
+    // Are we removing all bound events?
+    if (type === undefined) {
+      for (const t in data.handlers) {
+        if (Object.prototype.hasOwnProperty.call(data.handlers || {}, t)) {
+          removeType(elem, t);
+        }
+      }
+      return;
+    }
+    const handlers = data.handlers[type];
+
+    // If no handlers exist, nothing to unbind
+    if (!handlers) {
+      return;
+    }
+
+    // If no listener was provided, remove all listeners for type
+    if (!fn) {
+      removeType(elem, type);
+      return;
+    }
+
+    // We're only removing a single handler
+    if (fn.guid) {
+      for (let n = 0; n < handlers.length; n++) {
+        if (handlers[n].guid === fn.guid) {
+          handlers.splice(n--, 1);
+        }
+      }
+    }
+    _cleanUpEvents(elem, type);
+  }
+
+  /**
+   * Trigger an event for an element
+   *
+   * @param {Element|Object} elem
+   *        Element to trigger an event on
+   *
+   * @param {EventTarget~Event|string} event
+   *        A string (the type) or an event object with a type attribute
+   *
+   * @param {Object} [hash]
+   *        data hash to pass along with the event
+   *
+   * @return {boolean|undefined}
+   *         Returns the opposite of `defaultPrevented` if default was
+   *         prevented. Otherwise, returns `undefined`
+   */
+  function trigger(elem, event, hash) {
+    // Fetches element data and a reference to the parent (for bubbling).
+    // Don't want to add a data object to cache for every parent,
+    // so checking hasElData first.
+    const elemData = DomData.has(elem) ? DomData.get(elem) : {};
+    const parent = elem.parentNode || elem.ownerDocument;
+    // type = event.type || event,
+    // handler;
+
+    // If an event name was passed as a string, creates an event out of it
+    if (typeof event === 'string') {
+      event = {
+        type: event,
+        target: elem
+      };
+    } else if (!event.target) {
+      event.target = elem;
+    }
+
+    // Normalizes the event properties.
+    event = fixEvent(event);
+
+    // If the passed element has a dispatcher, executes the established handlers.
+    if (elemData.dispatcher) {
+      elemData.dispatcher.call(elem, event, hash);
+    }
+
+    // Unless explicitly stopped or the event does not bubble (e.g. media events)
+    // recursively calls this function to bubble the event up the DOM.
+    if (parent && !event.isPropagationStopped() && event.bubbles === true) {
+      trigger.call(null, parent, event, hash);
+
+      // If at the top of the DOM, triggers the default action unless disabled.
+    } else if (!parent && !event.defaultPrevented && event.target && event.target[event.type]) {
+      if (!DomData.has(event.target)) {
+        DomData.set(event.target, {});
+      }
+      const targetData = DomData.get(event.target);
+
+      // Checks if the target has a default action for this event.
+      if (event.target[event.type]) {
+        // Temporarily disables event dispatching on the target as we have already executed the handler.
+        targetData.disabled = true;
+        // Executes the default action.
+        if (typeof event.target[event.type] === 'function') {
+          event.target[event.type]();
+        }
+        // Re-enables event dispatching.
+        targetData.disabled = false;
+      }
+    }
+
+    // Inform the triggerer if the default was prevented by returning false
+    return !event.defaultPrevented;
+  }
+
+  /**
+   * Trigger a listener only once for an event.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind to.
+   *
+   * @param {string|string[]} type
+   *        Name/type of event
+   *
+   * @param {Event~EventListener} fn
+   *        Event listener function
+   */
+  function one(elem, type, fn) {
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(one, elem, type, fn);
+    }
+    const func = function () {
+      off(elem, type, func);
+      fn.apply(this, arguments);
+    };
+
+    // copy the guid to the new function so it can removed using the original function's ID
+    func.guid = fn.guid = fn.guid || newGUID();
+    on(elem, type, func);
+  }
+
+  /**
+   * Trigger a listener only once and then turn if off for all
+   * configured events
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind to.
+   *
+   * @param {string|string[]} type
+   *        Name/type of event
+   *
+   * @param {Event~EventListener} fn
+   *        Event listener function
+   */
+  function any(elem, type, fn) {
+    const func = function () {
+      off(elem, type, func);
+      fn.apply(this, arguments);
+    };
+
+    // copy the guid to the new function so it can removed using the original function's ID
+    func.guid = fn.guid = fn.guid || newGUID();
+
+    // multiple ons, but one off for everything
+    on(elem, type, func);
+  }
+
+  var Events = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    fixEvent: fixEvent,
+    on: on,
+    off: off,
+    trigger: trigger,
+    one: one,
+    any: any
+  });
+
+  /**
+   * @file fn.js
+   * @module fn
+   */
+  const UPDATE_REFRESH_INTERVAL = 30;
+
+  /**
+   * A private, internal-only function for changing the context of a function.
+   *
+   * It also stores a unique id on the function so it can be easily removed from
+   * events.
+   *
+   * @private
+   * @function
+   * @param    {*} context
+   *           The object to bind as scope.
+   *
+   * @param    {Function} fn
+   *           The function to be bound to a scope.
+   *
+   * @param    {number} [uid]
+   *           An optional unique ID for the function to be set
+   *
+   * @return   {Function}
+   *           The new function that will be bound into the context given
+   */
+  const bind_ = function (context, fn, uid) {
+    // Make sure the function has a unique ID
+    if (!fn.guid) {
+      fn.guid = newGUID();
+    }
+
+    // Create the new function that changes the context
+    const bound = fn.bind(context);
+
+    // Allow for the ability to individualize this function
+    // Needed in the case where multiple objects might share the same prototype
+    // IF both items add an event listener with the same function, then you try to remove just one
+    // it will remove both because they both have the same guid.
+    // when using this, you need to use the bind method when you remove the listener as well.
+    // currently used in text tracks
+    bound.guid = uid ? uid + '_' + fn.guid : fn.guid;
+    return bound;
+  };
+
+  /**
+   * Wraps the given function, `fn`, with a new function that only invokes `fn`
+   * at most once per every `wait` milliseconds.
+   *
+   * @function
+   * @param    {Function} fn
+   *           The function to be throttled.
+   *
+   * @param    {number}   wait
+   *           The number of milliseconds by which to throttle.
+   *
+   * @return   {Function}
+   */
+  const throttle = function (fn, wait) {
+    let last = window.performance.now();
+    const throttled = function (...args) {
+      const now = window.performance.now();
+      if (now - last >= wait) {
+        fn(...args);
+        last = now;
+      }
+    };
+    return throttled;
+  };
+
+  /**
+   * Creates a debounced function that delays invoking `func` until after `wait`
+   * milliseconds have elapsed since the last time the debounced function was
+   * invoked.
+   *
+   * Inspired by lodash and underscore implementations.
+   *
+   * @function
+   * @param    {Function} func
+   *           The function to wrap with debounce behavior.
+   *
+   * @param    {number} wait
+   *           The number of milliseconds to wait after the last invocation.
+   *
+   * @param    {boolean} [immediate]
+   *           Whether or not to invoke the function immediately upon creation.
+   *
+   * @param    {Object} [context=window]
+   *           The "context" in which the debounced function should debounce. For
+   *           example, if this function should be tied to a Video.js player,
+   *           the player can be passed here. Alternatively, defaults to the
+   *           global `window` object.
+   *
+   * @return   {Function}
+   *           A debounced function.
+   */
+  const debounce = function (func, wait, immediate, context = window) {
+    let timeout;
+    const cancel = () => {
+      context.clearTimeout(timeout);
+      timeout = null;
+    };
+
+    /* eslint-disable consistent-this */
+    const debounced = function () {
+      const self = this;
+      const args = arguments;
+      let later = function () {
+        timeout = null;
+        later = null;
+        if (!immediate) {
+          func.apply(self, args);
+        }
+      };
+      if (!timeout && immediate) {
+        func.apply(self, args);
+      }
+      context.clearTimeout(timeout);
+      timeout = context.setTimeout(later, wait);
+    };
+    /* eslint-enable consistent-this */
+
+    debounced.cancel = cancel;
+    return debounced;
+  };
+
+  var Fn = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UPDATE_REFRESH_INTERVAL: UPDATE_REFRESH_INTERVAL,
+    bind_: bind_,
+    throttle: throttle,
+    debounce: debounce
+  });
+
+  /**
+   * @file src/js/event-target.js
+   */
+  let EVENT_MAP;
+
+  /**
+   * `EventTarget` is a class that can have the same API as the DOM `EventTarget`. It
+   * adds shorthand functions that wrap around lengthy functions. For example:
+   * the `on` function is a wrapper around `addEventListener`.
+   *
+   * @see [EventTarget Spec]{@link https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget}
+   * @class EventTarget
+   */
+  class EventTarget {
+    /**
+     * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+     * function that will get called when an event with a certain name gets triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to call with `EventTarget`s
+     */
+    on(type, fn) {
+      // Remove the addEventListener alias before calling Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      on(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+     * This makes it so that the `event listener` will no longer get called when the
+     * named event happens.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to remove.
+     */
+    off(type, fn) {
+      off(this, type, fn);
+    }
+    /**
+     * This function will add an `event listener` that gets triggered only once. After the
+     * first trigger it will get removed. This is like adding an `event listener`
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    one(type, fn) {
+      // Remove the addEventListener aliasing Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      one(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * This function will add an `event listener` that gets triggered only once and is
+     * removed from all events. This is like adding an array of `event listener`s
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+     * first time it is triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    any(type, fn) {
+      // Remove the addEventListener aliasing Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      any(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * This function causes an event to happen. This will then cause any `event listeners`
+     * that are waiting for that event, to get called. If there are no `event listeners`
+     * for an event then nothing will happen.
+     *
+     * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+     * Trigger will also call the `on` + `uppercaseEventName` function.
+     *
+     * Example:
+     * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+     * `onClick` if it exists.
+     *
+     * @param {string|EventTarget~Event|Object} event
+     *        The name of the event, an `Event`, or an object with a key of type set to
+     *        an event name.
+     */
+    trigger(event) {
+      const type = event.type || event;
+
+      // deprecation
+      // In a future version we should default target to `this`
+      // similar to how we default the target to `elem` in
+      // `Events.trigger`. Right now the default `target` will be
+      // `document` due to the `Event.fixEvent` call.
+      if (typeof event === 'string') {
+        event = {
+          type
+        };
+      }
+      event = fixEvent(event);
+      if (this.allowedEvents_[type] && this['on' + type]) {
+        this['on' + type](event);
+      }
+      trigger(this, event);
+    }
+    queueTrigger(event) {
+      // only set up EVENT_MAP if it'll be used
+      if (!EVENT_MAP) {
+        EVENT_MAP = new Map();
+      }
+      const type = event.type || event;
+      let map = EVENT_MAP.get(this);
+      if (!map) {
+        map = new Map();
+        EVENT_MAP.set(this, map);
+      }
+      const oldTimeout = map.get(type);
+      map.delete(type);
+      window.clearTimeout(oldTimeout);
+      const timeout = window.setTimeout(() => {
+        map.delete(type);
+        // if we cleared out all timeouts for the current target, delete its map
+        if (map.size === 0) {
+          map = null;
+          EVENT_MAP.delete(this);
+        }
+        this.trigger(event);
+      }, 0);
+      map.set(type, timeout);
+    }
+  }
+
+  /**
+   * A Custom DOM event.
+   *
+   * @typedef {CustomEvent} Event
+   * @see [Properties]{@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent}
+   */
+
+  /**
+   * All event listeners should follow the following format.
+   *
+   * @callback EventListener
+   * @this {EventTarget}
+   *
+   * @param {Event} event
+   *        the event that triggered this function
+   *
+   * @param {Object} [hash]
+   *        hash of data sent during the event
+   */
+
+  /**
+   * An object containing event names as keys and booleans as values.
+   *
+   * > NOTE: If an event name is set to a true value here {@link EventTarget#trigger}
+   *         will have extra functionality. See that function for more information.
+   *
+   * @property EventTarget.prototype.allowedEvents_
+   * @protected
+   */
+  EventTarget.prototype.allowedEvents_ = {};
+
+  /**
+   * An alias of {@link EventTarget#on}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#on}
+   */
+  EventTarget.prototype.addEventListener = EventTarget.prototype.on;
+
+  /**
+   * An alias of {@link EventTarget#off}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#off}
+   */
+  EventTarget.prototype.removeEventListener = EventTarget.prototype.off;
+
+  /**
+   * An alias of {@link EventTarget#trigger}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#trigger}
+   */
+  EventTarget.prototype.dispatchEvent = EventTarget.prototype.trigger;
+
+  /**
+   * @file mixins/evented.js
+   * @module evented
+   */
+  const objName = obj => {
+    if (typeof obj.name === 'function') {
+      return obj.name();
+    }
+    if (typeof obj.name === 'string') {
+      return obj.name;
+    }
+    if (obj.name_) {
+      return obj.name_;
+    }
+    if (obj.constructor && obj.constructor.name) {
+      return obj.constructor.name;
+    }
+    return typeof obj;
+  };
+
+  /**
+   * Returns whether or not an object has had the evented mixin applied.
+   *
+   * @param  {Object} object
+   *         An object to test.
+   *
+   * @return {boolean}
+   *         Whether or not the object appears to be evented.
+   */
+  const isEvented = object => object instanceof EventTarget || !!object.eventBusEl_ && ['on', 'one', 'off', 'trigger'].every(k => typeof object[k] === 'function');
+
+  /**
+   * Adds a callback to run after the evented mixin applied.
+   *
+   * @param  {Object} target
+   *         An object to Add
+   * @param  {Function} callback
+   *         The callback to run.
+   */
+  const addEventedCallback = (target, callback) => {
+    if (isEvented(target)) {
+      callback();
+    } else {
+      if (!target.eventedCallbacks) {
+        target.eventedCallbacks = [];
+      }
+      target.eventedCallbacks.push(callback);
+    }
+  };
+
+  /**
+   * Whether a value is a valid event type - non-empty string or array.
+   *
+   * @private
+   * @param  {string|Array} type
+   *         The type value to test.
+   *
+   * @return {boolean}
+   *         Whether or not the type is a valid event type.
+   */
+  const isValidEventType = type =>
+  // The regex here verifies that the `type` contains at least one non-
+  // whitespace character.
+  typeof type === 'string' && /\S/.test(type) || Array.isArray(type) && !!type.length;
+
+  /**
+   * Validates a value to determine if it is a valid event target. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the target does not appear to be a valid event target.
+   *
+   * @param  {Object} target
+   *         The object to test.
+   *
+   * @param  {Object} obj
+   *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateTarget = (target, obj, fnName) => {
+    if (!target || !target.nodeName && !isEvented(target)) {
+      throw new Error(`Invalid target for ${objName(obj)}#${fnName}; must be a DOM node or evented object.`);
+    }
+  };
+
+  /**
+   * Validates a value to determine if it is a valid event target. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the type does not appear to be a valid event type.
+   *
+   * @param  {string|Array} type
+   *         The type to test.
+   *
+   * @param  {Object} obj
+  *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateEventType = (type, obj, fnName) => {
+    if (!isValidEventType(type)) {
+      throw new Error(`Invalid event type for ${objName(obj)}#${fnName}; must be a non-empty string or array.`);
+    }
+  };
+
+  /**
+   * Validates a value to determine if it is a valid listener. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the listener is not a function.
+   *
+   * @param  {Function} listener
+   *         The listener to test.
+   *
+   * @param  {Object} obj
+   *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateListener = (listener, obj, fnName) => {
+    if (typeof listener !== 'function') {
+      throw new Error(`Invalid listener for ${objName(obj)}#${fnName}; must be a function.`);
+    }
+  };
+
+  /**
+   * Takes an array of arguments given to `on()` or `one()`, validates them, and
+   * normalizes them into an object.
+   *
+   * @private
+   * @param  {Object} self
+   *         The evented object on which `on()` or `one()` was called. This
+   *         object will be bound as the `this` value for the listener.
+   *
+   * @param  {Array} args
+   *         An array of arguments passed to `on()` or `one()`.
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   *
+   * @return {Object}
+   *         An object containing useful values for `on()` or `one()` calls.
+   */
+  const normalizeListenArgs = (self, args, fnName) => {
+    // If the number of arguments is less than 3, the target is always the
+    // evented object itself.
+    const isTargetingSelf = args.length < 3 || args[0] === self || args[0] === self.eventBusEl_;
+    let target;
+    let type;
+    let listener;
+    if (isTargetingSelf) {
+      target = self.eventBusEl_;
+
+      // Deal with cases where we got 3 arguments, but we are still listening to
+      // the evented object itself.
+      if (args.length >= 3) {
+        args.shift();
+      }
+      [type, listener] = args;
+    } else {
+      [target, type, listener] = args;
+    }
+    validateTarget(target, self, fnName);
+    validateEventType(type, self, fnName);
+    validateListener(listener, self, fnName);
+    listener = bind_(self, listener);
+    return {
+      isTargetingSelf,
+      target,
+      type,
+      listener
+    };
+  };
+
+  /**
+   * Adds the listener to the event type(s) on the target, normalizing for
+   * the type of target.
+   *
+   * @private
+   * @param  {Element|Object} target
+   *         A DOM node or evented object.
+   *
+   * @param  {string} method
+   *         The event binding method to use ("on" or "one").
+   *
+   * @param  {string|Array} type
+   *         One or more event type(s).
+   *
+   * @param  {Function} listener
+   *         A listener function.
+   */
+  const listen = (target, method, type, listener) => {
+    validateTarget(target, target, method);
+    if (target.nodeName) {
+      Events[method](target, type, listener);
+    } else {
+      target[method](type, listener);
+    }
+  };
+
+  /**
+   * Contains methods that provide event capabilities to an object which is passed
+   * to {@link module:evented|evented}.
+   *
+   * @mixin EventedMixin
+   */
+  const EventedMixin = {
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    on(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'on');
+      listen(target, 'on', type, listener);
+
+      // If this object is listening to another evented object.
+      if (!isTargetingSelf) {
+        // If this object is disposed, remove the listener.
+        const removeListenerOnDispose = () => this.off(target, type, listener);
+
+        // Use the same function ID as the listener so we can remove it later it
+        // using the ID of the original listener.
+        removeListenerOnDispose.guid = listener.guid;
+
+        // Add a listener to the target's dispose event as well. This ensures
+        // that if the target is disposed BEFORE this object, we remove the
+        // removal listener that was just added. Otherwise, we create a memory leak.
+        const removeRemoverOnTargetDispose = () => this.off('dispose', removeListenerOnDispose);
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        removeRemoverOnTargetDispose.guid = listener.guid;
+        listen(this, 'on', 'dispose', removeListenerOnDispose);
+        listen(target, 'on', 'dispose', removeRemoverOnTargetDispose);
+      }
+    },
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object. The listener will be called once per event and then removed.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    one(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'one');
+
+      // Targeting this evented object.
+      if (isTargetingSelf) {
+        listen(target, 'one', type, listener);
+
+        // Targeting another evented object.
+      } else {
+        // TODO: This wrapper is incorrect! It should only
+        //       remove the wrapper for the event type that called it.
+        //       Instead all listeners are removed on the first trigger!
+        //       see https://github.com/videojs/video.js/issues/5962
+        const wrapper = (...largs) => {
+          this.off(target, type, wrapper);
+          listener.apply(null, largs);
+        };
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        wrapper.guid = listener.guid;
+        listen(target, 'one', type, wrapper);
+      }
+    },
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object. The listener will only be called once for the first event that is triggered
+     * then removed.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    any(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'any');
+
+      // Targeting this evented object.
+      if (isTargetingSelf) {
+        listen(target, 'any', type, listener);
+
+        // Targeting another evented object.
+      } else {
+        const wrapper = (...largs) => {
+          this.off(target, type, wrapper);
+          listener.apply(null, largs);
+        };
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        wrapper.guid = listener.guid;
+        listen(target, 'any', type, wrapper);
+      }
+    },
+    /**
+     * Removes listener(s) from event(s) on an evented object.
+     *
+     * @param  {string|Array|Element|Object} [targetOrType]
+     *         If this is a string or array, it represents the event type(s).
+     *
+     *         Another evented object can be passed here instead, in which case
+     *         ALL 3 arguments are _required_.
+     *
+     * @param  {string|Array|Function} [typeOrListener]
+     *         If the first argument was a string or array, this may be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function; otherwise, _all_ listeners bound to the
+     *         event type(s) will be removed.
+     */
+    off(targetOrType, typeOrListener, listener) {
+      // Targeting this evented object.
+      if (!targetOrType || isValidEventType(targetOrType)) {
+        off(this.eventBusEl_, targetOrType, typeOrListener);
+
+        // Targeting another evented object.
+      } else {
+        const target = targetOrType;
+        const type = typeOrListener;
+
+        // Fail fast and in a meaningful way!
+        validateTarget(target, this, 'off');
+        validateEventType(type, this, 'off');
+        validateListener(listener, this, 'off');
+
+        // Ensure there's at least a guid, even if the function hasn't been used
+        listener = bind_(this, listener);
+
+        // Remove the dispose listener on this evented object, which was given
+        // the same guid as the event listener in on().
+        this.off('dispose', listener);
+        if (target.nodeName) {
+          off(target, type, listener);
+          off(target, 'dispose', listener);
+        } else if (isEvented(target)) {
+          target.off(type, listener);
+          target.off('dispose', listener);
+        }
+      }
+    },
+    /**
+     * Fire an event on this evented object, causing its listeners to be called.
+     *
+     * @param   {string|Object} event
+     *          An event type or an object with a type property.
+     *
+     * @param   {Object} [hash]
+     *          An additional object to pass along to listeners.
+     *
+     * @return {boolean}
+     *          Whether or not the default behavior was prevented.
+     */
+    trigger(event, hash) {
+      validateTarget(this.eventBusEl_, this, 'trigger');
+      const type = event && typeof event !== 'string' ? event.type : event;
+      if (!isValidEventType(type)) {
+        throw new Error(`Invalid event type for ${objName(this)}#trigger; ` + 'must be a non-empty string or object with a type key that has a non-empty value.');
+      }
+      return trigger(this.eventBusEl_, event, hash);
+    }
+  };
+
+  /**
+   * Applies {@link module:evented~EventedMixin|EventedMixin} to a target object.
+   *
+   * @param  {Object} target
+   *         The object to which to add event methods.
+   *
+   * @param  {Object} [options={}]
+   *         Options for customizing the mixin behavior.
+   *
+   * @param  {string} [options.eventBusKey]
+   *         By default, adds a `eventBusEl_` DOM element to the target object,
+   *         which is used as an event bus. If the target object already has a
+   *         DOM element that should be used, pass its key here.
+   *
+   * @return {Object}
+   *         The target object.
+   */
+  function evented(target, options = {}) {
+    const {
+      eventBusKey
+    } = options;
+
+    // Set or create the eventBusEl_.
+    if (eventBusKey) {
+      if (!target[eventBusKey].nodeName) {
+        throw new Error(`The eventBusKey "${eventBusKey}" does not refer to an element.`);
+      }
+      target.eventBusEl_ = target[eventBusKey];
+    } else {
+      target.eventBusEl_ = createEl('span', {
+        className: 'vjs-event-bus'
+      });
+    }
+    Object.assign(target, EventedMixin);
+    if (target.eventedCallbacks) {
+      target.eventedCallbacks.forEach(callback => {
+        callback();
+      });
+    }
+
+    // When any evented object is disposed, it removes all its listeners.
+    target.on('dispose', () => {
+      target.off();
+      [target, target.el_, target.eventBusEl_].forEach(function (val) {
+        if (val && DomData.has(val)) {
+          DomData.delete(val);
+        }
+      });
+      window.setTimeout(() => {
+        target.eventBusEl_ = null;
+      }, 0);
+    });
+    return target;
+  }
+
+  /**
+   * @file mixins/stateful.js
+   * @module stateful
+   */
+
+  /**
+   * Contains methods that provide statefulness to an object which is passed
+   * to {@link module:stateful}.
+   *
+   * @mixin StatefulMixin
+   */
+  const StatefulMixin = {
+    /**
+     * A hash containing arbitrary keys and values representing the state of
+     * the object.
+     *
+     * @type {Object}
+     */
+    state: {},
+    /**
+     * Set the state of an object by mutating its
+     * {@link module:stateful~StatefulMixin.state|state} object in place.
+     *
+     * @fires   module:stateful~StatefulMixin#statechanged
+     * @param   {Object|Function} stateUpdates
+     *          A new set of properties to shallow-merge into the plugin state.
+     *          Can be a plain object or a function returning a plain object.
+     *
+     * @return {Object|undefined}
+     *          An object containing changes that occurred. If no changes
+     *          occurred, returns `undefined`.
+     */
+    setState(stateUpdates) {
+      // Support providing the `stateUpdates` state as a function.
+      if (typeof stateUpdates === 'function') {
+        stateUpdates = stateUpdates();
+      }
+      let changes;
+      each(stateUpdates, (value, key) => {
+        // Record the change if the value is different from what's in the
+        // current state.
+        if (this.state[key] !== value) {
+          changes = changes || {};
+          changes[key] = {
+            from: this.state[key],
+            to: value
+          };
+        }
+        this.state[key] = value;
+      });
+
+      // Only trigger "statechange" if there were changes AND we have a trigger
+      // function. This allows us to not require that the target object be an
+      // evented object.
+      if (changes && isEvented(this)) {
+        /**
+         * An event triggered on an object that is both
+         * {@link module:stateful|stateful} and {@link module:evented|evented}
+         * indicating that its state has changed.
+         *
+         * @event    module:stateful~StatefulMixin#statechanged
+         * @type     {Object}
+         * @property {Object} changes
+         *           A hash containing the properties that were changed and
+         *           the values they were changed `from` and `to`.
+         */
+        this.trigger({
+          changes,
+          type: 'statechanged'
+        });
+      }
+      return changes;
+    }
+  };
+
+  /**
+   * Applies {@link module:stateful~StatefulMixin|StatefulMixin} to a target
+   * object.
+   *
+   * If the target object is {@link module:evented|evented} and has a
+   * `handleStateChanged` method, that method will be automatically bound to the
+   * `statechanged` event on itself.
+   *
+   * @param   {Object} target
+   *          The object to be made stateful.
+   *
+   * @param   {Object} [defaultState]
+   *          A default set of properties to populate the newly-stateful object's
+   *          `state` property.
+   *
+   * @return {Object}
+   *          Returns the `target`.
+   */
+  function stateful(target, defaultState) {
+    Object.assign(target, StatefulMixin);
+
+    // This happens after the mixing-in because we need to replace the `state`
+    // added in that step.
+    target.state = Object.assign({}, target.state, defaultState);
+
+    // Auto-bind the `handleStateChanged` method of the target object if it exists.
+    if (typeof target.handleStateChanged === 'function' && isEvented(target)) {
+      target.on('statechanged', target.handleStateChanged);
+    }
+    return target;
+  }
+
+  /**
+   * @file str.js
+   * @module to-lower-case
+   */
+
+  /**
+   * Lowercase the first letter of a string.
+   *
+   * @param {string} string
+   *        String to be lowercased
+   *
+   * @return {string}
+   *         The string with a lowercased first letter
+   */
+  const toLowerCase = function (string) {
+    if (typeof string !== 'string') {
+      return string;
+    }
+    return string.replace(/./, w => w.toLowerCase());
+  };
+
+  /**
+   * Uppercase the first letter of a string.
+   *
+   * @param {string} string
+   *        String to be uppercased
+   *
+   * @return {string}
+   *         The string with an uppercased first letter
+   */
+  const toTitleCase = function (string) {
+    if (typeof string !== 'string') {
+      return string;
+    }
+    return string.replace(/./, w => w.toUpperCase());
+  };
+
+  /**
+   * Compares the TitleCase versions of the two strings for equality.
+   *
+   * @param {string} str1
+   *        The first string to compare
+   *
+   * @param {string} str2
+   *        The second string to compare
+   *
+   * @return {boolean}
+   *         Whether the TitleCase versions of the strings are equal
+   */
+  const titleCaseEquals = function (str1, str2) {
+    return toTitleCase(str1) === toTitleCase(str2);
+  };
+
+  var Str = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    toLowerCase: toLowerCase,
+    toTitleCase: toTitleCase,
+    titleCaseEquals: titleCaseEquals
+  });
+
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+  function unwrapExports (x) {
+  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+  }
+
+  function createCommonjsModule(fn, module) {
+  	return module = { exports: {} }, fn(module, module.exports), module.exports;
+  }
+
+  var keycode = createCommonjsModule(function (module, exports) {
+    // Source: http://jsfiddle.net/vWx8V/
+    // http://stackoverflow.com/questions/5603195/full-list-of-javascript-keycodes
+
+    /**
+     * Conenience method returns corresponding value for given keyName or keyCode.
+     *
+     * @param {Mixed} keyCode {Number} or keyName {String}
+     * @return {Mixed}
+     * @api public
+     */
+
+    function keyCode(searchInput) {
+      // Keyboard Events
+      if (searchInput && 'object' === typeof searchInput) {
+        var hasKeyCode = searchInput.which || searchInput.keyCode || searchInput.charCode;
+        if (hasKeyCode) searchInput = hasKeyCode;
+      }
+
+      // Numbers
+      if ('number' === typeof searchInput) return names[searchInput];
+
+      // Everything else (cast to string)
+      var search = String(searchInput);
+
+      // check codes
+      var foundNamedKey = codes[search.toLowerCase()];
+      if (foundNamedKey) return foundNamedKey;
+
+      // check aliases
+      var foundNamedKey = aliases[search.toLowerCase()];
+      if (foundNamedKey) return foundNamedKey;
+
+      // weird character?
+      if (search.length === 1) return search.charCodeAt(0);
+      return undefined;
+    }
+
+    /**
+     * Compares a keyboard event with a given keyCode or keyName.
+     *
+     * @param {Event} event Keyboard event that should be tested
+     * @param {Mixed} keyCode {Number} or keyName {String}
+     * @return {Boolean}
+     * @api public
+     */
+    keyCode.isEventKey = function isEventKey(event, nameOrCode) {
+      if (event && 'object' === typeof event) {
+        var keyCode = event.which || event.keyCode || event.charCode;
+        if (keyCode === null || keyCode === undefined) {
+          return false;
+        }
+        if (typeof nameOrCode === 'string') {
+          // check codes
+          var foundNamedKey = codes[nameOrCode.toLowerCase()];
+          if (foundNamedKey) {
+            return foundNamedKey === keyCode;
+          }
+
+          // check aliases
+          var foundNamedKey = aliases[nameOrCode.toLowerCase()];
+          if (foundNamedKey) {
+            return foundNamedKey === keyCode;
+          }
+        } else if (typeof nameOrCode === 'number') {
+          return nameOrCode === keyCode;
+        }
+        return false;
+      }
+    };
+    exports = module.exports = keyCode;
+
+    /**
+     * Get by name
+     *
+     *   exports.code['enter'] // => 13
+     */
+
+    var codes = exports.code = exports.codes = {
+      'backspace': 8,
+      'tab': 9,
+      'enter': 13,
+      'shift': 16,
+      'ctrl': 17,
+      'alt': 18,
+      'pause/break': 19,
+      'caps lock': 20,
+      'esc': 27,
+      'space': 32,
+      'page up': 33,
+      'page down': 34,
+      'end': 35,
+      'home': 36,
+      'left': 37,
+      'up': 38,
+      'right': 39,
+      'down': 40,
+      'insert': 45,
+      'delete': 46,
+      'command': 91,
+      'left command': 91,
+      'right command': 93,
+      'numpad *': 106,
+      'numpad +': 107,
+      'numpad -': 109,
+      'numpad .': 110,
+      'numpad /': 111,
+      'num lock': 144,
+      'scroll lock': 145,
+      'my computer': 182,
+      'my calculator': 183,
+      ';': 186,
+      '=': 187,
+      ',': 188,
+      '-': 189,
+      '.': 190,
+      '/': 191,
+      '`': 192,
+      '[': 219,
+      '\\': 220,
+      ']': 221,
+      "'": 222
+    };
+
+    // Helper aliases
+
+    var aliases = exports.aliases = {
+      'windows': 91,
+      '⇧': 16,
+      '⌥': 18,
+      '⌃': 17,
+      '⌘': 91,
+      'ctl': 17,
+      'control': 17,
+      'option': 18,
+      'pause': 19,
+      'break': 19,
+      'caps': 20,
+      'return': 13,
+      'escape': 27,
+      'spc': 32,
+      'spacebar': 32,
+      'pgup': 33,
+      'pgdn': 34,
+      'ins': 45,
+      'del': 46,
+      'cmd': 91
+    };
+
+    /*!
+     * Programatically add the following
+     */
+
+    // lower case chars
+    for (i = 97; i < 123; i++) codes[String.fromCharCode(i)] = i - 32;
+
+    // numbers
+    for (var i = 48; i < 58; i++) codes[i - 48] = i;
+
+    // function keys
+    for (i = 1; i < 13; i++) codes['f' + i] = i + 111;
+
+    // numpad keys
+    for (i = 0; i < 10; i++) codes['numpad ' + i] = i + 96;
+
+    /**
+     * Get by code
+     *
+     *   exports.name[13] // => 'Enter'
+     */
+
+    var names = exports.names = exports.title = {}; // title for backward compat
+
+    // Create reverse mapping
+    for (i in codes) names[codes[i]] = i;
+
+    // Add aliases
+    for (var alias in aliases) {
+      codes[alias] = aliases[alias];
+    }
+  });
+  keycode.code;
+  keycode.codes;
+  keycode.aliases;
+  keycode.names;
+  keycode.title;
+
+  /**
+   * Player Component - Base class for all UI objects
+   *
+   * @file component.js
+   */
+
+  /**
+   * Base class for all UI Components.
+   * Components are UI objects which represent both a javascript object and an element
+   * in the DOM. They can be children of other components, and can have
+   * children themselves.
+   *
+   * Components can also use methods from {@link EventTarget}
+   */
+  class Component {
+    /**
+     * A callback that is called when a component is ready. Does not have any
+     * parameters and any callback value will be ignored.
+     *
+     * @callback ReadyCallback
+     * @this Component
+     */
+
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of component options.
+     *
+     * @param {Object[]} [options.children]
+     *        An array of children objects to initialize this component with. Children objects have
+     *        a name property that will be used if more than one component of the same type needs to be
+     *        added.
+     *
+     * @param  {string} [options.className]
+     *         A class or space separated list of classes to add the component
+     *
+     * @param {ReadyCallback} [ready]
+     *        Function that gets called when the `Component` is ready.
+     */
+    constructor(player, options, ready) {
+      // The component might be the player itself and we can't pass `this` to super
+      if (!player && this.play) {
+        this.player_ = player = this; // eslint-disable-line
+      } else {
+        this.player_ = player;
+      }
+      this.isDisposed_ = false;
+
+      // Hold the reference to the parent component via `addChild` method
+      this.parentComponent_ = null;
+
+      // Make a copy of prototype.options_ to protect against overriding defaults
+      this.options_ = merge({}, this.options_);
+
+      // Updated options with supplied options
+      options = this.options_ = merge(this.options_, options);
+
+      // Get ID from options or options element if one is supplied
+      this.id_ = options.id || options.el && options.el.id;
+
+      // If there was no ID from the options, generate one
+      if (!this.id_) {
+        // Don't require the player ID function in the case of mock players
+        const id = player && player.id && player.id() || 'no_player';
+        this.id_ = `${id}_component_${newGUID()}`;
+      }
+      this.name_ = options.name || null;
+
+      // Create element if one wasn't provided in options
+      if (options.el) {
+        this.el_ = options.el;
+      } else if (options.createEl !== false) {
+        this.el_ = this.createEl();
+      }
+      if (options.className && this.el_) {
+        options.className.split(' ').forEach(c => this.addClass(c));
+      }
+
+      // Remove the placeholder event methods. If the component is evented, the
+      // real methods are added next
+      ['on', 'off', 'one', 'any', 'trigger'].forEach(fn => {
+        this[fn] = undefined;
+      });
+
+      // if evented is anything except false, we want to mixin in evented
+      if (options.evented !== false) {
+        // Make this an evented object and use `el_`, if available, as its event bus
+        evented(this, {
+          eventBusKey: this.el_ ? 'el_' : null
+        });
+        this.handleLanguagechange = this.handleLanguagechange.bind(this);
+        this.on(this.player_, 'languagechange', this.handleLanguagechange);
+      }
+      stateful(this, this.constructor.defaultState);
+      this.children_ = [];
+      this.childIndex_ = {};
+      this.childNameIndex_ = {};
+      this.setTimeoutIds_ = new Set();
+      this.setIntervalIds_ = new Set();
+      this.rafIds_ = new Set();
+      this.namedRafs_ = new Map();
+      this.clearingTimersOnDispose_ = false;
+
+      // Add any child components in options
+      if (options.initChildren !== false) {
+        this.initChildren();
+      }
+
+      // Don't want to trigger ready here or it will go before init is actually
+      // finished for all children that run this constructor
+      this.ready(ready);
+      if (options.reportTouchActivity !== false) {
+        this.enableTouchActivity();
+      }
+    }
+
+    // `on`, `off`, `one`, `any` and `trigger` are here so tsc includes them in definitions.
+    // They are replaced or removed in the constructor
+
+    /**
+     * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+     * function that will get called when an event with a certain name gets triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to call with `EventTarget`s
+     */
+    on(type, fn) {}
+
+    /**
+     * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+     * This makes it so that the `event listener` will no longer get called when the
+     * named event happens.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} [fn]
+     *        The function to remove. If not specified, all listeners managed by Video.js will be removed.
+     */
+    off(type, fn) {}
+
+    /**
+     * This function will add an `event listener` that gets triggered only once. After the
+     * first trigger it will get removed. This is like adding an `event listener`
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    one(type, fn) {}
+
+    /**
+     * This function will add an `event listener` that gets triggered only once and is
+     * removed from all events. This is like adding an array of `event listener`s
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+     * first time it is triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    any(type, fn) {}
+
+    /**
+     * This function causes an event to happen. This will then cause any `event listeners`
+     * that are waiting for that event, to get called. If there are no `event listeners`
+     * for an event then nothing will happen.
+     *
+     * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+     * Trigger will also call the `on` + `uppercaseEventName` function.
+     *
+     * Example:
+     * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+     * `onClick` if it exists.
+     *
+     * @param {string|Event|Object} event
+     *        The name of the event, an `Event`, or an object with a key of type set to
+     *        an event name.
+     *
+     * @param {Object} [hash]
+     *        Optionally extra argument to pass through to an event listener
+     */
+    trigger(event, hash) {}
+
+    /**
+     * Dispose of the `Component` and all child components.
+     *
+     * @fires Component#dispose
+     *
+     * @param {Object} options
+     * @param {Element} options.originalEl element with which to replace player element
+     */
+    dispose(options = {}) {
+      // Bail out if the component has already been disposed.
+      if (this.isDisposed_) {
+        return;
+      }
+      if (this.readyQueue_) {
+        this.readyQueue_.length = 0;
+      }
+
+      /**
+       * Triggered when a `Component` is disposed.
+       *
+       * @event Component#dispose
+       * @type {Event}
+       *
+       * @property {boolean} [bubbles=false]
+       *           set to false so that the dispose event does not
+       *           bubble up
+       */
+      this.trigger({
+        type: 'dispose',
+        bubbles: false
+      });
+      this.isDisposed_ = true;
+
+      // Dispose all children.
+      if (this.children_) {
+        for (let i = this.children_.length - 1; i >= 0; i--) {
+          if (this.children_[i].dispose) {
+            this.children_[i].dispose();
+          }
+        }
+      }
+
+      // Delete child references
+      this.children_ = null;
+      this.childIndex_ = null;
+      this.childNameIndex_ = null;
+      this.parentComponent_ = null;
+      if (this.el_) {
+        // Remove element from DOM
+        if (this.el_.parentNode) {
+          if (options.restoreEl) {
+            this.el_.parentNode.replaceChild(options.restoreEl, this.el_);
+          } else {
+            this.el_.parentNode.removeChild(this.el_);
+          }
+        }
+        this.el_ = null;
+      }
+
+      // remove reference to the player after disposing of the element
+      this.player_ = null;
+    }
+
+    /**
+     * Determine whether or not this component has been disposed.
+     *
+     * @return {boolean}
+     *         If the component has been disposed, will be `true`. Otherwise, `false`.
+     */
+    isDisposed() {
+      return Boolean(this.isDisposed_);
+    }
+
+    /**
+     * Return the {@link Player} that the `Component` has attached to.
+     *
+     * @return { import('./player').default }
+     *         The player that this `Component` has attached to.
+     */
+    player() {
+      return this.player_;
+    }
+
+    /**
+     * Deep merge of options objects with new options.
+     * > Note: When both `obj` and `options` contain properties whose values are objects.
+     *         The two properties get merged using {@link module:obj.merge}
+     *
+     * @param {Object} obj
+     *        The object that contains new options.
+     *
+     * @return {Object}
+     *         A new object of `this.options_` and `obj` merged together.
+     */
+    options(obj) {
+      if (!obj) {
+        return this.options_;
+      }
+      this.options_ = merge(this.options_, obj);
+      return this.options_;
+    }
+
+    /**
+     * Get the `Component`s DOM element
+     *
+     * @return {Element}
+     *         The DOM element for this `Component`.
+     */
+    el() {
+      return this.el_;
+    }
+
+    /**
+     * Create the `Component`s DOM element.
+     *
+     * @param {string} [tagName]
+     *        Element's DOM node type. e.g. 'div'
+     *
+     * @param {Object} [properties]
+     *        An object of properties that should be set.
+     *
+     * @param {Object} [attributes]
+     *        An object of attributes that should be set.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tagName, properties, attributes) {
+      return createEl(tagName, properties, attributes);
+    }
+
+    /**
+     * Localize a string given the string in english.
+     *
+     * If tokens are provided, it'll try and run a simple token replacement on the provided string.
+     * The tokens it looks for look like `{1}` with the index being 1-indexed into the tokens array.
+     *
+     * If a `defaultValue` is provided, it'll use that over `string`,
+     * if a value isn't found in provided language files.
+     * This is useful if you want to have a descriptive key for token replacement
+     * but have a succinct localized string and not require `en.json` to be included.
+     *
+     * Currently, it is used for the progress bar timing.
+     * ```js
+     * {
+     *   "progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
+     * }
+     * ```
+     * It is then used like so:
+     * ```js
+     * this.localize('progress bar timing: currentTime={1} duration{2}',
+     *               [this.player_.currentTime(), this.player_.duration()],
+     *               '{1} of {2}');
+     * ```
+     *
+     * Which outputs something like: `01:23 of 24:56`.
+     *
+     *
+     * @param {string} string
+     *        The string to localize and the key to lookup in the language files.
+     * @param {string[]} [tokens]
+     *        If the current item has token replacements, provide the tokens here.
+     * @param {string} [defaultValue]
+     *        Defaults to `string`. Can be a default value to use for token replacement
+     *        if the lookup key is needed to be separate.
+     *
+     * @return {string}
+     *         The localized string or if no localization exists the english string.
+     */
+    localize(string, tokens, defaultValue = string) {
+      const code = this.player_.language && this.player_.language();
+      const languages = this.player_.languages && this.player_.languages();
+      const language = languages && languages[code];
+      const primaryCode = code && code.split('-')[0];
+      const primaryLang = languages && languages[primaryCode];
+      let localizedString = defaultValue;
+      if (language && language[string]) {
+        localizedString = language[string];
+      } else if (primaryLang && primaryLang[string]) {
+        localizedString = primaryLang[string];
+      }
+      if (tokens) {
+        localizedString = localizedString.replace(/\{(\d+)\}/g, function (match, index) {
+          const value = tokens[index - 1];
+          let ret = value;
+          if (typeof value === 'undefined') {
+            ret = match;
+          }
+          return ret;
+        });
+      }
+      return localizedString;
+    }
+
+    /**
+     * Handles language change for the player in components. Should be overridden by sub-components.
+     *
+     * @abstract
+     */
+    handleLanguagechange() {}
+
+    /**
+     * Return the `Component`s DOM element. This is where children get inserted.
+     * This will usually be the the same as the element returned in {@link Component#el}.
+     *
+     * @return {Element}
+     *         The content element for this `Component`.
+     */
+    contentEl() {
+      return this.contentEl_ || this.el_;
+    }
+
+    /**
+     * Get this `Component`s ID
+     *
+     * @return {string}
+     *         The id of this `Component`
+     */
+    id() {
+      return this.id_;
+    }
+
+    /**
+     * Get the `Component`s name. The name gets used to reference the `Component`
+     * and is set during registration.
+     *
+     * @return {string}
+     *         The name of this `Component`.
+     */
+    name() {
+      return this.name_;
+    }
+
+    /**
+     * Get an array of all child components
+     *
+     * @return {Array}
+     *         The children
+     */
+    children() {
+      return this.children_;
+    }
+
+    /**
+     * Returns the child `Component` with the given `id`.
+     *
+     * @param {string} id
+     *        The id of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The child `Component` with the given `id` or undefined.
+     */
+    getChildById(id) {
+      return this.childIndex_[id];
+    }
+
+    /**
+     * Returns the child `Component` with the given `name`.
+     *
+     * @param {string} name
+     *        The name of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The child `Component` with the given `name` or undefined.
+     */
+    getChild(name) {
+      if (!name) {
+        return;
+      }
+      return this.childNameIndex_[name];
+    }
+
+    /**
+     * Returns the descendant `Component` following the givent
+     * descendant `names`. For instance ['foo', 'bar', 'baz'] would
+     * try to get 'foo' on the current component, 'bar' on the 'foo'
+     * component and 'baz' on the 'bar' component and return undefined
+     * if any of those don't exist.
+     *
+     * @param {...string[]|...string} names
+     *        The name of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The descendant `Component` following the given descendant
+     *         `names` or undefined.
+     */
+    getDescendant(...names) {
+      // flatten array argument into the main array
+      names = names.reduce((acc, n) => acc.concat(n), []);
+      let currentChild = this;
+      for (let i = 0; i < names.length; i++) {
+        currentChild = currentChild.getChild(names[i]);
+        if (!currentChild || !currentChild.getChild) {
+          return;
+        }
+      }
+      return currentChild;
+    }
+
+    /**
+     * Adds an SVG icon element to another element or component.
+     *
+     * @param {string} iconName
+     *        The name of icon. A list of all the icon names can be found at 'sandbox/svg-icons.html'
+     *
+     * @param {Element} [el=this.el()]
+     *        Element to set the title on. Defaults to the current Component's element.
+     *
+     * @return {Element}
+     *        The newly created icon element.
+     */
+    setIcon(iconName, el = this.el()) {
+      // TODO: In v9 of video.js, we will want to remove font icons entirely.
+      // This means this check, as well as the others throughout the code, and
+      // the unecessary CSS for font icons, will need to be removed.
+      // See https://github.com/videojs/video.js/pull/8260 as to which components
+      // need updating.
+      if (!this.player_.options_.experimentalSvgIcons) {
+        return;
+      }
+      const xmlnsURL = 'http://www.w3.org/2000/svg';
+
+      // The below creates an element in the format of:
+      // <span><svg><use>....</use></svg></span>
+      const iconContainer = createEl('span', {
+        className: 'vjs-icon-placeholder vjs-svg-icon'
+      }, {
+        'aria-hidden': 'true'
+      });
+      const svgEl = document.createElementNS(xmlnsURL, 'svg');
+      svgEl.setAttributeNS(null, 'viewBox', '0 0 512 512');
+      const useEl = document.createElementNS(xmlnsURL, 'use');
+      svgEl.appendChild(useEl);
+      useEl.setAttributeNS(null, 'href', `#vjs-icon-${iconName}`);
+      iconContainer.appendChild(svgEl);
+
+      // Replace a pre-existing icon if one exists.
+      if (this.iconIsSet_) {
+        el.replaceChild(iconContainer, el.querySelector('.vjs-icon-placeholder'));
+      } else {
+        el.appendChild(iconContainer);
+      }
+      this.iconIsSet_ = true;
+      return iconContainer;
+    }
+
+    /**
+     * Add a child `Component` inside the current `Component`.
+     *
+     * @param {string|Component} child
+     *        The name or instance of a child to add.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of options that will get passed to children of
+     *        the child.
+     *
+     * @param {number} [index=this.children_.length]
+     *        The index to attempt to add a child into.
+     *
+     *
+     * @return {Component}
+     *         The `Component` that gets added as a child. When using a string the
+     *         `Component` will get created by this process.
+     */
+    addChild(child, options = {}, index = this.children_.length) {
+      let component;
+      let componentName;
+
+      // If child is a string, create component with options
+      if (typeof child === 'string') {
+        componentName = toTitleCase(child);
+        const componentClassName = options.componentClass || componentName;
+
+        // Set name through options
+        options.name = componentName;
+
+        // Create a new object & element for this controls set
+        // If there's no .player_, this is a player
+        const ComponentClass = Component.getComponent(componentClassName);
+        if (!ComponentClass) {
+          throw new Error(`Component ${componentClassName} does not exist`);
+        }
+
+        // data stored directly on the videojs object may be
+        // misidentified as a component to retain
+        // backwards-compatibility with 4.x. check to make sure the
+        // component class can be instantiated.
+        if (typeof ComponentClass !== 'function') {
+          return null;
+        }
+        component = new ComponentClass(this.player_ || this, options);
+
+        // child is a component instance
+      } else {
+        component = child;
+      }
+      if (component.parentComponent_) {
+        component.parentComponent_.removeChild(component);
+      }
+      this.children_.splice(index, 0, component);
+      component.parentComponent_ = this;
+      if (typeof component.id === 'function') {
+        this.childIndex_[component.id()] = component;
+      }
+
+      // If a name wasn't used to create the component, check if we can use the
+      // name function of the component
+      componentName = componentName || component.name && toTitleCase(component.name());
+      if (componentName) {
+        this.childNameIndex_[componentName] = component;
+        this.childNameIndex_[toLowerCase(componentName)] = component;
+      }
+
+      // Add the UI object's element to the container div (box)
+      // Having an element is not required
+      if (typeof component.el === 'function' && component.el()) {
+        // If inserting before a component, insert before that component's element
+        let refNode = null;
+        if (this.children_[index + 1]) {
+          // Most children are components, but the video tech is an HTML element
+          if (this.children_[index + 1].el_) {
+            refNode = this.children_[index + 1].el_;
+          } else if (isEl(this.children_[index + 1])) {
+            refNode = this.children_[index + 1];
+          }
+        }
+        this.contentEl().insertBefore(component.el(), refNode);
+      }
+
+      // Return so it can stored on parent object if desired.
+      return component;
+    }
+
+    /**
+     * Remove a child `Component` from this `Component`s list of children. Also removes
+     * the child `Component`s element from this `Component`s element.
+     *
+     * @param {Component} component
+     *        The child `Component` to remove.
+     */
+    removeChild(component) {
+      if (typeof component === 'string') {
+        component = this.getChild(component);
+      }
+      if (!component || !this.children_) {
+        return;
+      }
+      let childFound = false;
+      for (let i = this.children_.length - 1; i >= 0; i--) {
+        if (this.children_[i] === component) {
+          childFound = true;
+          this.children_.splice(i, 1);
+          break;
+        }
+      }
+      if (!childFound) {
+        return;
+      }
+      component.parentComponent_ = null;
+      this.childIndex_[component.id()] = null;
+      this.childNameIndex_[toTitleCase(component.name())] = null;
+      this.childNameIndex_[toLowerCase(component.name())] = null;
+      const compEl = component.el();
+      if (compEl && compEl.parentNode === this.contentEl()) {
+        this.contentEl().removeChild(component.el());
+      }
+    }
+
+    /**
+     * Add and initialize default child `Component`s based upon options.
+     */
+    initChildren() {
+      const children = this.options_.children;
+      if (children) {
+        // `this` is `parent`
+        const parentOptions = this.options_;
+        const handleAdd = child => {
+          const name = child.name;
+          let opts = child.opts;
+
+          // Allow options for children to be set at the parent options
+          // e.g. videojs(id, { controlBar: false });
+          // instead of videojs(id, { children: { controlBar: false });
+          if (parentOptions[name] !== undefined) {
+            opts = parentOptions[name];
+          }
+
+          // Allow for disabling default components
+          // e.g. options['children']['posterImage'] = false
+          if (opts === false) {
+            return;
+          }
+
+          // Allow options to be passed as a simple boolean if no configuration
+          // is necessary.
+          if (opts === true) {
+            opts = {};
+          }
+
+          // We also want to pass the original player options
+          // to each component as well so they don't need to
+          // reach back into the player for options later.
+          opts.playerOptions = this.options_.playerOptions;
+
+          // Create and add the child component.
+          // Add a direct reference to the child by name on the parent instance.
+          // If two of the same component are used, different names should be supplied
+          // for each
+          const newChild = this.addChild(name, opts);
+          if (newChild) {
+            this[name] = newChild;
+          }
+        };
+
+        // Allow for an array of children details to passed in the options
+        let workingChildren;
+        const Tech = Component.getComponent('Tech');
+        if (Array.isArray(children)) {
+          workingChildren = children;
+        } else {
+          workingChildren = Object.keys(children);
+        }
+        workingChildren
+        // children that are in this.options_ but also in workingChildren  would
+        // give us extra children we do not want. So, we want to filter them out.
+        .concat(Object.keys(this.options_).filter(function (child) {
+          return !workingChildren.some(function (wchild) {
+            if (typeof wchild === 'string') {
+              return child === wchild;
+            }
+            return child === wchild.name;
+          });
+        })).map(child => {
+          let name;
+          let opts;
+          if (typeof child === 'string') {
+            name = child;
+            opts = children[name] || this.options_[name] || {};
+          } else {
+            name = child.name;
+            opts = child;
+          }
+          return {
+            name,
+            opts
+          };
+        }).filter(child => {
+          // we have to make sure that child.name isn't in the techOrder since
+          // techs are registered as Components but can't aren't compatible
+          // See https://github.com/videojs/video.js/issues/2772
+          const c = Component.getComponent(child.opts.componentClass || toTitleCase(child.name));
+          return c && !Tech.isTech(c);
+        }).forEach(handleAdd);
+      }
+    }
+
+    /**
+     * Builds the default DOM class name. Should be overridden by sub-components.
+     *
+     * @return {string}
+     *         The DOM class name for this object.
+     *
+     * @abstract
+     */
+    buildCSSClass() {
+      // Child classes can include a function that does:
+      // return 'CLASS NAME' + this._super();
+      return '';
+    }
+
+    /**
+     * Bind a listener to the component's ready state.
+     * Different from event listeners in that if the ready event has already happened
+     * it will trigger the function immediately.
+     *
+     * @param {ReadyCallback} fn
+     *        Function that gets called when the `Component` is ready.
+     *
+     * @return {Component}
+     *         Returns itself; method can be chained.
+     */
+    ready(fn, sync = false) {
+      if (!fn) {
+        return;
+      }
+      if (!this.isReady_) {
+        this.readyQueue_ = this.readyQueue_ || [];
+        this.readyQueue_.push(fn);
+        return;
+      }
+      if (sync) {
+        fn.call(this);
+      } else {
+        // Call the function asynchronously by default for consistency
+        this.setTimeout(fn, 1);
+      }
+    }
+
+    /**
+     * Trigger all the ready listeners for this `Component`.
+     *
+     * @fires Component#ready
+     */
+    triggerReady() {
+      this.isReady_ = true;
+
+      // Ensure ready is triggered asynchronously
+      this.setTimeout(function () {
+        const readyQueue = this.readyQueue_;
+
+        // Reset Ready Queue
+        this.readyQueue_ = [];
+        if (readyQueue && readyQueue.length > 0) {
+          readyQueue.forEach(function (fn) {
+            fn.call(this);
+          }, this);
+        }
+
+        // Allow for using event listeners also
+        /**
+         * Triggered when a `Component` is ready.
+         *
+         * @event Component#ready
+         * @type {Event}
+         */
+        this.trigger('ready');
+      }, 1);
+    }
+
+    /**
+     * Find a single DOM element matching a `selector`. This can be within the `Component`s
+     * `contentEl()` or another custom context.
+     *
+     * @param {string} selector
+     *        A valid CSS selector, which will be passed to `querySelector`.
+     *
+     * @param {Element|string} [context=this.contentEl()]
+     *        A DOM element within which to query. Can also be a selector string in
+     *        which case the first matching element will get used as context. If
+     *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+     *        nothing it falls back to `document`.
+     *
+     * @return {Element|null}
+     *         the dom element that was found, or null
+     *
+     * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+     */
+    $(selector, context) {
+      return $(selector, context || this.contentEl());
+    }
+
+    /**
+     * Finds all DOM element matching a `selector`. This can be within the `Component`s
+     * `contentEl()` or another custom context.
+     *
+     * @param {string} selector
+     *        A valid CSS selector, which will be passed to `querySelectorAll`.
+     *
+     * @param {Element|string} [context=this.contentEl()]
+     *        A DOM element within which to query. Can also be a selector string in
+     *        which case the first matching element will get used as context. If
+     *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+     *        nothing it falls back to `document`.
+     *
+     * @return {NodeList}
+     *         a list of dom elements that were found
+     *
+     * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+     */
+    $$(selector, context) {
+      return $$(selector, context || this.contentEl());
+    }
+
+    /**
+     * Check if a component's element has a CSS class name.
+     *
+     * @param {string} classToCheck
+     *        CSS class name to check.
+     *
+     * @return {boolean}
+     *         - True if the `Component` has the class.
+     *         - False if the `Component` does not have the class`
+     */
+    hasClass(classToCheck) {
+      return hasClass(this.el_, classToCheck);
+    }
+
+    /**
+     * Add a CSS class name to the `Component`s element.
+     *
+     * @param {...string} classesToAdd
+     *        One or more CSS class name to add.
+     */
+    addClass(...classesToAdd) {
+      addClass(this.el_, ...classesToAdd);
+    }
+
+    /**
+     * Remove a CSS class name from the `Component`s element.
+     *
+     * @param {...string} classesToRemove
+     *        One or more CSS class name to remove.
+     */
+    removeClass(...classesToRemove) {
+      removeClass(this.el_, ...classesToRemove);
+    }
+
+    /**
+     * Add or remove a CSS class name from the component's element.
+     * - `classToToggle` gets added when {@link Component#hasClass} would return false.
+     * - `classToToggle` gets removed when {@link Component#hasClass} would return true.
+     *
+     * @param  {string} classToToggle
+     *         The class to add or remove based on (@link Component#hasClass}
+     *
+     * @param  {boolean|Dom~predicate} [predicate]
+     *         An {@link Dom~predicate} function or a boolean
+     */
+    toggleClass(classToToggle, predicate) {
+      toggleClass(this.el_, classToToggle, predicate);
+    }
+
+    /**
+     * Show the `Component`s element if it is hidden by removing the
+     * 'vjs-hidden' class name from it.
+     */
+    show() {
+      this.removeClass('vjs-hidden');
+    }
+
+    /**
+     * Hide the `Component`s element if it is currently showing by adding the
+     * 'vjs-hidden` class name to it.
+     */
+    hide() {
+      this.addClass('vjs-hidden');
+    }
+
+    /**
+     * Lock a `Component`s element in its visible state by adding the 'vjs-lock-showing'
+     * class name to it. Used during fadeIn/fadeOut.
+     *
+     * @private
+     */
+    lockShowing() {
+      this.addClass('vjs-lock-showing');
+    }
+
+    /**
+     * Unlock a `Component`s element from its visible state by removing the 'vjs-lock-showing'
+     * class name from it. Used during fadeIn/fadeOut.
+     *
+     * @private
+     */
+    unlockShowing() {
+      this.removeClass('vjs-lock-showing');
+    }
+
+    /**
+     * Get the value of an attribute on the `Component`s element.
+     *
+     * @param {string} attribute
+     *        Name of the attribute to get the value from.
+     *
+     * @return {string|null}
+     *         - The value of the attribute that was asked for.
+     *         - Can be an empty string on some browsers if the attribute does not exist
+     *           or has no value
+     *         - Most browsers will return null if the attribute does not exist or has
+     *           no value.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute}
+     */
+    getAttribute(attribute) {
+      return getAttribute(this.el_, attribute);
+    }
+
+    /**
+     * Set the value of an attribute on the `Component`'s element
+     *
+     * @param {string} attribute
+     *        Name of the attribute to set.
+     *
+     * @param {string} value
+     *        Value to set the attribute to.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute}
+     */
+    setAttribute(attribute, value) {
+      setAttribute(this.el_, attribute, value);
+    }
+
+    /**
+     * Remove an attribute from the `Component`s element.
+     *
+     * @param {string} attribute
+     *        Name of the attribute to remove.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute}
+     */
+    removeAttribute(attribute) {
+      removeAttribute(this.el_, attribute);
+    }
+
+    /**
+     * Get or set the width of the component based upon the CSS styles.
+     * See {@link Component#dimension} for more detailed information.
+     *
+     * @param {number|string} [num]
+     *        The width that you want to set postfixed with '%', 'px' or nothing.
+     *
+     * @param {boolean} [skipListeners]
+     *        Skip the componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The width when getting, zero if there is no width
+     */
+    width(num, skipListeners) {
+      return this.dimension('width', num, skipListeners);
+    }
+
+    /**
+     * Get or set the height of the component based upon the CSS styles.
+     * See {@link Component#dimension} for more detailed information.
+     *
+     * @param {number|string} [num]
+     *        The height that you want to set postfixed with '%', 'px' or nothing.
+     *
+     * @param {boolean} [skipListeners]
+     *        Skip the componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The height when getting, zero if there is no height
+     */
+    height(num, skipListeners) {
+      return this.dimension('height', num, skipListeners);
+    }
+
+    /**
+     * Set both the width and height of the `Component` element at the same time.
+     *
+     * @param  {number|string} width
+     *         Width to set the `Component`s element to.
+     *
+     * @param  {number|string} height
+     *         Height to set the `Component`s element to.
+     */
+    dimensions(width, height) {
+      // Skip componentresize listeners on width for optimization
+      this.width(width, true);
+      this.height(height);
+    }
+
+    /**
+     * Get or set width or height of the `Component` element. This is the shared code
+     * for the {@link Component#width} and {@link Component#height}.
+     *
+     * Things to know:
+     * - If the width or height in an number this will return the number postfixed with 'px'.
+     * - If the width/height is a percent this will return the percent postfixed with '%'
+     * - Hidden elements have a width of 0 with `window.getComputedStyle`. This function
+     *   defaults to the `Component`s `style.width` and falls back to `window.getComputedStyle`.
+     *   See [this]{@link http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/}
+     *   for more information
+     * - If you want the computed style of the component, use {@link Component#currentWidth}
+     *   and {@link {Component#currentHeight}
+     *
+     * @fires Component#componentresize
+     *
+     * @param {string} widthOrHeight
+     8        'width' or 'height'
+     *
+     * @param  {number|string} [num]
+     8         New dimension
+     *
+     * @param  {boolean} [skipListeners]
+     *         Skip componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The dimension when getting or 0 if unset
+     */
+    dimension(widthOrHeight, num, skipListeners) {
+      if (num !== undefined) {
+        // Set to zero if null or literally NaN (NaN !== NaN)
+        if (num === null || num !== num) {
+          num = 0;
+        }
+
+        // Check if using css width/height (% or px) and adjust
+        if (('' + num).indexOf('%') !== -1 || ('' + num).indexOf('px') !== -1) {
+          this.el_.style[widthOrHeight] = num;
+        } else if (num === 'auto') {
+          this.el_.style[widthOrHeight] = '';
+        } else {
+          this.el_.style[widthOrHeight] = num + 'px';
+        }
+
+        // skipListeners allows us to avoid triggering the resize event when setting both width and height
+        if (!skipListeners) {
+          /**
+           * Triggered when a component is resized.
+           *
+           * @event Component#componentresize
+           * @type {Event}
+           */
+          this.trigger('componentresize');
+        }
+        return;
+      }
+
+      // Not setting a value, so getting it
+      // Make sure element exists
+      if (!this.el_) {
+        return 0;
+      }
+
+      // Get dimension value from style
+      const val = this.el_.style[widthOrHeight];
+      const pxIndex = val.indexOf('px');
+      if (pxIndex !== -1) {
+        // Return the pixel value with no 'px'
+        return parseInt(val.slice(0, pxIndex), 10);
+      }
+
+      // No px so using % or no style was set, so falling back to offsetWidth/height
+      // If component has display:none, offset will return 0
+      // TODO: handle display:none and no dimension style using px
+      return parseInt(this.el_['offset' + toTitleCase(widthOrHeight)], 10);
+    }
+
+    /**
+     * Get the computed width or the height of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @param {string} widthOrHeight
+     *        A string containing 'width' or 'height'. Whichever one you want to get.
+     *
+     * @return {number}
+     *         The dimension that gets asked for or 0 if nothing was set
+     *         for that dimension.
+     */
+    currentDimension(widthOrHeight) {
+      let computedWidthOrHeight = 0;
+      if (widthOrHeight !== 'width' && widthOrHeight !== 'height') {
+        throw new Error('currentDimension only accepts width or height value');
+      }
+      computedWidthOrHeight = computedStyle(this.el_, widthOrHeight);
+
+      // remove 'px' from variable and parse as integer
+      computedWidthOrHeight = parseFloat(computedWidthOrHeight);
+
+      // if the computed value is still 0, it's possible that the browser is lying
+      // and we want to check the offset values.
+      // This code also runs wherever getComputedStyle doesn't exist.
+      if (computedWidthOrHeight === 0 || isNaN(computedWidthOrHeight)) {
+        const rule = `offset${toTitleCase(widthOrHeight)}`;
+        computedWidthOrHeight = this.el_[rule];
+      }
+      return computedWidthOrHeight;
+    }
+
+    /**
+     * An object that contains width and height values of the `Component`s
+     * computed style. Uses `window.getComputedStyle`.
+     *
+     * @typedef {Object} Component~DimensionObject
+     *
+     * @property {number} width
+     *           The width of the `Component`s computed style.
+     *
+     * @property {number} height
+     *           The height of the `Component`s computed style.
+     */
+
+    /**
+     * Get an object that contains computed width and height values of the
+     * component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {Component~DimensionObject}
+     *         The computed dimensions of the component's element.
+     */
+    currentDimensions() {
+      return {
+        width: this.currentDimension('width'),
+        height: this.currentDimension('height')
+      };
+    }
+
+    /**
+     * Get the computed width of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {number}
+     *         The computed width of the component's element.
+     */
+    currentWidth() {
+      return this.currentDimension('width');
+    }
+
+    /**
+     * Get the computed height of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {number}
+     *         The computed height of the component's element.
+     */
+    currentHeight() {
+      return this.currentDimension('height');
+    }
+
+    /**
+     * Set the focus to this component
+     */
+    focus() {
+      this.el_.focus();
+    }
+
+    /**
+     * Remove the focus from this component
+     */
+    blur() {
+      this.el_.blur();
+    }
+
+    /**
+     * When this Component receives a `keydown` event which it does not process,
+     *  it passes the event to the Player for handling.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     */
+    handleKeyDown(event) {
+      if (this.player_) {
+        // We only stop propagation here because we want unhandled events to fall
+        // back to the browser. Exclude Tab for focus trapping.
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.stopPropagation();
+        }
+        this.player_.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Many components used to have a `handleKeyPress` method, which was poorly
+     * named because it listened to a `keydown` event. This method name now
+     * delegates to `handleKeyDown`. This means anyone calling `handleKeyPress`
+     * will not see their method calls stop working.
+     *
+     * @param {KeyboardEvent} event
+     *        The event that caused this function to be called.
+     */
+    handleKeyPress(event) {
+      this.handleKeyDown(event);
+    }
+
+    /**
+     * Emit a 'tap' events when touch event support gets detected. This gets used to
+     * support toggling the controls through a tap on the video. They get enabled
+     * because every sub-component would have extra overhead otherwise.
+     *
+     * @protected
+     * @fires Component#tap
+     * @listens Component#touchstart
+     * @listens Component#touchmove
+     * @listens Component#touchleave
+     * @listens Component#touchcancel
+     * @listens Component#touchend
+      */
+    emitTapEvents() {
+      // Track the start time so we can determine how long the touch lasted
+      let touchStart = 0;
+      let firstTouch = null;
+
+      // Maximum movement allowed during a touch event to still be considered a tap
+      // Other popular libs use anywhere from 2 (hammer.js) to 15,
+      // so 10 seems like a nice, round number.
+      const tapMovementThreshold = 10;
+
+      // The maximum length a touch can be while still being considered a tap
+      const touchTimeThreshold = 200;
+      let couldBeTap;
+      this.on('touchstart', function (event) {
+        // If more than one finger, don't consider treating this as a click
+        if (event.touches.length === 1) {
+          // Copy pageX/pageY from the object
+          firstTouch = {
+            pageX: event.touches[0].pageX,
+            pageY: event.touches[0].pageY
+          };
+          // Record start time so we can detect a tap vs. "touch and hold"
+          touchStart = window.performance.now();
+          // Reset couldBeTap tracking
+          couldBeTap = true;
+        }
+      });
+      this.on('touchmove', function (event) {
+        // If more than one finger, don't consider treating this as a click
+        if (event.touches.length > 1) {
+          couldBeTap = false;
+        } else if (firstTouch) {
+          // Some devices will throw touchmoves for all but the slightest of taps.
+          // So, if we moved only a small distance, this could still be a tap
+          const xdiff = event.touches[0].pageX - firstTouch.pageX;
+          const ydiff = event.touches[0].pageY - firstTouch.pageY;
+          const touchDistance = Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+          if (touchDistance > tapMovementThreshold) {
+            couldBeTap = false;
+          }
+        }
+      });
+      const noTap = function () {
+        couldBeTap = false;
+      };
+
+      // TODO: Listen to the original target. http://youtu.be/DujfpXOKUp8?t=13m8s
+      this.on('touchleave', noTap);
+      this.on('touchcancel', noTap);
+
+      // When the touch ends, measure how long it took and trigger the appropriate
+      // event
+      this.on('touchend', function (event) {
+        firstTouch = null;
+        // Proceed only if the touchmove/leave/cancel event didn't happen
+        if (couldBeTap === true) {
+          // Measure how long the touch lasted
+          const touchTime = window.performance.now() - touchStart;
+
+          // Make sure the touch was less than the threshold to be considered a tap
+          if (touchTime < touchTimeThreshold) {
+            // Don't let browser turn this into a click
+            event.preventDefault();
+            /**
+             * Triggered when a `Component` is tapped.
+             *
+             * @event Component#tap
+             * @type {MouseEvent}
+             */
+            this.trigger('tap');
+            // It may be good to copy the touchend event object and change the
+            // type to tap, if the other event properties aren't exact after
+            // Events.fixEvent runs (e.g. event.target)
+          }
+        }
+      });
+    }
+
+    /**
+     * This function reports user activity whenever touch events happen. This can get
+     * turned off by any sub-components that wants touch events to act another way.
+     *
+     * Report user touch activity when touch events occur. User activity gets used to
+     * determine when controls should show/hide. It is simple when it comes to mouse
+     * events, because any mouse event should show the controls. So we capture mouse
+     * events that bubble up to the player and report activity when that happens.
+     * With touch events it isn't as easy as `touchstart` and `touchend` toggle player
+     * controls. So touch events can't help us at the player level either.
+     *
+     * User activity gets checked asynchronously. So what could happen is a tap event
+     * on the video turns the controls off. Then the `touchend` event bubbles up to
+     * the player. Which, if it reported user activity, would turn the controls right
+     * back on. We also don't want to completely block touch events from bubbling up.
+     * Furthermore a `touchmove` event and anything other than a tap, should not turn
+     * controls back on.
+     *
+     * @listens Component#touchstart
+     * @listens Component#touchmove
+     * @listens Component#touchend
+     * @listens Component#touchcancel
+     */
+    enableTouchActivity() {
+      // Don't continue if the root player doesn't support reporting user activity
+      if (!this.player() || !this.player().reportUserActivity) {
+        return;
+      }
+
+      // listener for reporting that the user is active
+      const report = bind_(this.player(), this.player().reportUserActivity);
+      let touchHolding;
+      this.on('touchstart', function () {
+        report();
+        // For as long as the they are touching the device or have their mouse down,
+        // we consider them active even if they're not moving their finger or mouse.
+        // So we want to continue to update that they are active
+        this.clearInterval(touchHolding);
+        // report at the same interval as activityCheck
+        touchHolding = this.setInterval(report, 250);
+      });
+      const touchEnd = function (event) {
+        report();
+        // stop the interval that maintains activity if the touch is holding
+        this.clearInterval(touchHolding);
+      };
+      this.on('touchmove', report);
+      this.on('touchend', touchEnd);
+      this.on('touchcancel', touchEnd);
+    }
+
+    /**
+     * A callback that has no parameters and is bound into `Component`s context.
+     *
+     * @callback Component~GenericCallback
+     * @this Component
+     */
+
+    /**
+     * Creates a function that runs after an `x` millisecond timeout. This function is a
+     * wrapper around `window.setTimeout`. There are a few reasons to use this one
+     * instead though:
+     * 1. It gets cleared via  {@link Component#clearTimeout} when
+     *    {@link Component#dispose} gets called.
+     * 2. The function callback will gets turned into a {@link Component~GenericCallback}
+     *
+     * > Note: You can't use `window.clearTimeout` on the id returned by this function. This
+     *         will cause its dispose listener not to get cleaned up! Please use
+     *         {@link Component#clearTimeout} or {@link Component#dispose} instead.
+     *
+     * @param {Component~GenericCallback} fn
+     *        The function that will be run after `timeout`.
+     *
+     * @param {number} timeout
+     *        Timeout in milliseconds to delay before executing the specified function.
+     *
+     * @return {number}
+     *         Returns a timeout ID that gets used to identify the timeout. It can also
+     *         get used in {@link Component#clearTimeout} to clear the timeout that
+     *         was set.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout}
+     */
+    setTimeout(fn, timeout) {
+      // declare as variables so they are properly available in timeout function
+      // eslint-disable-next-line
+      var timeoutId;
+      fn = bind_(this, fn);
+      this.clearTimersOnDispose_();
+      timeoutId = window.setTimeout(() => {
+        if (this.setTimeoutIds_.has(timeoutId)) {
+          this.setTimeoutIds_.delete(timeoutId);
+        }
+        fn();
+      }, timeout);
+      this.setTimeoutIds_.add(timeoutId);
+      return timeoutId;
+    }
+
+    /**
+     * Clears a timeout that gets created via `window.setTimeout` or
+     * {@link Component#setTimeout}. If you set a timeout via {@link Component#setTimeout}
+     * use this function instead of `window.clearTimout`. If you don't your dispose
+     * listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} timeoutId
+     *        The id of the timeout to clear. The return value of
+     *        {@link Component#setTimeout} or `window.setTimeout`.
+     *
+     * @return {number}
+     *         Returns the timeout id that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout}
+     */
+    clearTimeout(timeoutId) {
+      if (this.setTimeoutIds_.has(timeoutId)) {
+        this.setTimeoutIds_.delete(timeoutId);
+        window.clearTimeout(timeoutId);
+      }
+      return timeoutId;
+    }
+
+    /**
+     * Creates a function that gets run every `x` milliseconds. This function is a wrapper
+     * around `window.setInterval`. There are a few reasons to use this one instead though.
+     * 1. It gets cleared via  {@link Component#clearInterval} when
+     *    {@link Component#dispose} gets called.
+     * 2. The function callback will be a {@link Component~GenericCallback}
+     *
+     * @param {Component~GenericCallback} fn
+     *        The function to run every `x` seconds.
+     *
+     * @param {number} interval
+     *        Execute the specified function every `x` milliseconds.
+     *
+     * @return {number}
+     *         Returns an id that can be used to identify the interval. It can also be be used in
+     *         {@link Component#clearInterval} to clear the interval.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval}
+     */
+    setInterval(fn, interval) {
+      fn = bind_(this, fn);
+      this.clearTimersOnDispose_();
+      const intervalId = window.setInterval(fn, interval);
+      this.setIntervalIds_.add(intervalId);
+      return intervalId;
+    }
+
+    /**
+     * Clears an interval that gets created via `window.setInterval` or
+     * {@link Component#setInterval}. If you set an interval via {@link Component#setInterval}
+     * use this function instead of `window.clearInterval`. If you don't your dispose
+     * listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} intervalId
+     *        The id of the interval to clear. The return value of
+     *        {@link Component#setInterval} or `window.setInterval`.
+     *
+     * @return {number}
+     *         Returns the interval id that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval}
+     */
+    clearInterval(intervalId) {
+      if (this.setIntervalIds_.has(intervalId)) {
+        this.setIntervalIds_.delete(intervalId);
+        window.clearInterval(intervalId);
+      }
+      return intervalId;
+    }
+
+    /**
+     * Queues up a callback to be passed to requestAnimationFrame (rAF), but
+     * with a few extra bonuses:
+     *
+     * - Supports browsers that do not support rAF by falling back to
+     *   {@link Component#setTimeout}.
+     *
+     * - The callback is turned into a {@link Component~GenericCallback} (i.e.
+     *   bound to the component).
+     *
+     * - Automatic cancellation of the rAF callback is handled if the component
+     *   is disposed before it is called.
+     *
+     * @param  {Component~GenericCallback} fn
+     *         A function that will be bound to this component and executed just
+     *         before the browser's next repaint.
+     *
+     * @return {number}
+     *         Returns an rAF ID that gets used to identify the timeout. It can
+     *         also be used in {@link Component#cancelAnimationFrame} to cancel
+     *         the animation frame callback.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame}
+     */
+    requestAnimationFrame(fn) {
+      this.clearTimersOnDispose_();
+
+      // declare as variables so they are properly available in rAF function
+      // eslint-disable-next-line
+      var id;
+      fn = bind_(this, fn);
+      id = window.requestAnimationFrame(() => {
+        if (this.rafIds_.has(id)) {
+          this.rafIds_.delete(id);
+        }
+        fn();
+      });
+      this.rafIds_.add(id);
+      return id;
+    }
+
+    /**
+     * Request an animation frame, but only one named animation
+     * frame will be queued. Another will never be added until
+     * the previous one finishes.
+     *
+     * @param {string} name
+     *        The name to give this requestAnimationFrame
+     *
+     * @param  {Component~GenericCallback} fn
+     *         A function that will be bound to this component and executed just
+     *         before the browser's next repaint.
+     */
+    requestNamedAnimationFrame(name, fn) {
+      if (this.namedRafs_.has(name)) {
+        return;
+      }
+      this.clearTimersOnDispose_();
+      fn = bind_(this, fn);
+      const id = this.requestAnimationFrame(() => {
+        fn();
+        if (this.namedRafs_.has(name)) {
+          this.namedRafs_.delete(name);
+        }
+      });
+      this.namedRafs_.set(name, id);
+      return name;
+    }
+
+    /**
+     * Cancels a current named animation frame if it exists.
+     *
+     * @param {string} name
+     *        The name of the requestAnimationFrame to cancel.
+     */
+    cancelNamedAnimationFrame(name) {
+      if (!this.namedRafs_.has(name)) {
+        return;
+      }
+      this.cancelAnimationFrame(this.namedRafs_.get(name));
+      this.namedRafs_.delete(name);
+    }
+
+    /**
+     * Cancels a queued callback passed to {@link Component#requestAnimationFrame}
+     * (rAF).
+     *
+     * If you queue an rAF callback via {@link Component#requestAnimationFrame},
+     * use this function instead of `window.cancelAnimationFrame`. If you don't,
+     * your dispose listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} id
+     *        The rAF ID to clear. The return value of {@link Component#requestAnimationFrame}.
+     *
+     * @return {number}
+     *         Returns the rAF ID that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/cancelAnimationFrame}
+     */
+    cancelAnimationFrame(id) {
+      if (this.rafIds_.has(id)) {
+        this.rafIds_.delete(id);
+        window.cancelAnimationFrame(id);
+      }
+      return id;
+    }
+
+    /**
+     * A function to setup `requestAnimationFrame`, `setTimeout`,
+     * and `setInterval`, clearing on dispose.
+     *
+     * > Previously each timer added and removed dispose listeners on it's own.
+     * For better performance it was decided to batch them all, and use `Set`s
+     * to track outstanding timer ids.
+     *
+     * @private
+     */
+    clearTimersOnDispose_() {
+      if (this.clearingTimersOnDispose_) {
+        return;
+      }
+      this.clearingTimersOnDispose_ = true;
+      this.one('dispose', () => {
+        [['namedRafs_', 'cancelNamedAnimationFrame'], ['rafIds_', 'cancelAnimationFrame'], ['setTimeoutIds_', 'clearTimeout'], ['setIntervalIds_', 'clearInterval']].forEach(([idName, cancelName]) => {
+          // for a `Set` key will actually be the value again
+          // so forEach((val, val) =>` but for maps we want to use
+          // the key.
+          this[idName].forEach((val, key) => this[cancelName](key));
+        });
+        this.clearingTimersOnDispose_ = false;
+      });
+    }
+
+    /**
+     * Register a `Component` with `videojs` given the name and the component.
+     *
+     * > NOTE: {@link Tech}s should not be registered as a `Component`. {@link Tech}s
+     *         should be registered using {@link Tech.registerTech} or
+     *         {@link videojs:videojs.registerTech}.
+     *
+     * > NOTE: This function can also be seen on videojs as
+     *         {@link videojs:videojs.registerComponent}.
+     *
+     * @param {string} name
+     *        The name of the `Component` to register.
+     *
+     * @param {Component} ComponentToRegister
+     *        The `Component` class to register.
+     *
+     * @return {Component}
+     *         The `Component` that was registered.
+     */
+    static registerComponent(name, ComponentToRegister) {
+      if (typeof name !== 'string' || !name) {
+        throw new Error(`Illegal component name, "${name}"; must be a non-empty string.`);
+      }
+      const Tech = Component.getComponent('Tech');
+
+      // We need to make sure this check is only done if Tech has been registered.
+      const isTech = Tech && Tech.isTech(ComponentToRegister);
+      const isComp = Component === ComponentToRegister || Component.prototype.isPrototypeOf(ComponentToRegister.prototype);
+      if (isTech || !isComp) {
+        let reason;
+        if (isTech) {
+          reason = 'techs must be registered using Tech.registerTech()';
+        } else {
+          reason = 'must be a Component subclass';
+        }
+        throw new Error(`Illegal component, "${name}"; ${reason}.`);
+      }
+      name = toTitleCase(name);
+      if (!Component.components_) {
+        Component.components_ = {};
+      }
+      const Player = Component.getComponent('Player');
+      if (name === 'Player' && Player && Player.players) {
+        const players = Player.players;
+        const playerNames = Object.keys(players);
+
+        // If we have players that were disposed, then their name will still be
+        // in Players.players. So, we must loop through and verify that the value
+        // for each item is not null. This allows registration of the Player component
+        // after all players have been disposed or before any were created.
+        if (players && playerNames.length > 0 && playerNames.map(pname => players[pname]).every(Boolean)) {
+          throw new Error('Can not register Player component after player has been created.');
+        }
+      }
+      Component.components_[name] = ComponentToRegister;
+      Component.components_[toLowerCase(name)] = ComponentToRegister;
+      return ComponentToRegister;
+    }
+
+    /**
+     * Get a `Component` based on the name it was registered with.
+     *
+     * @param {string} name
+     *        The Name of the component to get.
+     *
+     * @return {typeof Component}
+     *         The `Component` that got registered under the given name.
+     */
+    static getComponent(name) {
+      if (!name || !Component.components_) {
+        return;
+      }
+      return Component.components_[name];
+    }
+  }
+  Component.registerComponent('Component', Component);
+
+  /**
+   * @file time.js
+   * @module time
+   */
+
+  /**
+   * Returns the time for the specified index at the start or end
+   * of a TimeRange object.
+   *
+   * @typedef    {Function} TimeRangeIndex
+   *
+   * @param      {number} [index=0]
+   *             The range number to return the time for.
+   *
+   * @return     {number}
+   *             The time offset at the specified index.
+   *
+   * @deprecated The index argument must be provided.
+   *             In the future, leaving it out will throw an error.
+   */
+
+  /**
+   * An object that contains ranges of time, which mimics {@link TimeRanges}.
+   *
+   * @typedef  {Object} TimeRange
+   *
+   * @property {number} length
+   *           The number of time ranges represented by this object.
+   *
+   * @property {module:time~TimeRangeIndex} start
+   *           Returns the time offset at which a specified time range begins.
+   *
+   * @property {module:time~TimeRangeIndex} end
+   *           Returns the time offset at which a specified time range ends.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges
+   */
+
+  /**
+   * Check if any of the time ranges are over the maximum index.
+   *
+   * @private
+   * @param   {string} fnName
+   *          The function name to use for logging
+   *
+   * @param   {number} index
+   *          The index to check
+   *
+   * @param   {number} maxIndex
+   *          The maximum possible index
+   *
+   * @throws  {Error} if the timeRanges provided are over the maxIndex
+   */
+  function rangeCheck(fnName, index, maxIndex) {
+    if (typeof index !== 'number' || index < 0 || index > maxIndex) {
+      throw new Error(`Failed to execute '${fnName}' on 'TimeRanges': The index provided (${index}) is non-numeric or out of bounds (0-${maxIndex}).`);
+    }
+  }
+
+  /**
+   * Get the time for the specified index at the start or end
+   * of a TimeRange object.
+   *
+   * @private
+   * @param      {string} fnName
+   *             The function name to use for logging
+   *
+   * @param      {string} valueIndex
+   *             The property that should be used to get the time. should be
+   *             'start' or 'end'
+   *
+   * @param      {Array} ranges
+   *             An array of time ranges
+   *
+   * @param      {Array} [rangeIndex=0]
+   *             The index to start the search at
+   *
+   * @return     {number}
+   *             The time that offset at the specified index.
+   *
+   * @deprecated rangeIndex must be set to a value, in the future this will throw an error.
+   * @throws     {Error} if rangeIndex is more than the length of ranges
+   */
+  function getRange(fnName, valueIndex, ranges, rangeIndex) {
+    rangeCheck(fnName, rangeIndex, ranges.length - 1);
+    return ranges[rangeIndex][valueIndex];
+  }
+
+  /**
+   * Create a time range object given ranges of time.
+   *
+   * @private
+   * @param   {Array} [ranges]
+   *          An array of time ranges.
+   *
+   * @return  {TimeRange}
+   */
+  function createTimeRangesObj(ranges) {
+    let timeRangesObj;
+    if (ranges === undefined || ranges.length === 0) {
+      timeRangesObj = {
+        length: 0,
+        start() {
+          throw new Error('This TimeRanges object is empty');
+        },
+        end() {
+          throw new Error('This TimeRanges object is empty');
+        }
+      };
+    } else {
+      timeRangesObj = {
+        length: ranges.length,
+        start: getRange.bind(null, 'start', 0, ranges),
+        end: getRange.bind(null, 'end', 1, ranges)
+      };
+    }
+    if (window.Symbol && window.Symbol.iterator) {
+      timeRangesObj[window.Symbol.iterator] = () => (ranges || []).values();
+    }
+    return timeRangesObj;
+  }
+
+  /**
+   * Create a `TimeRange` object which mimics an
+   * {@link https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges|HTML5 TimeRanges instance}.
+   *
+   * @param {number|Array[]} start
+   *        The start of a single range (a number) or an array of ranges (an
+   *        array of arrays of two numbers each).
+   *
+   * @param {number} end
+   *        The end of a single range. Cannot be used with the array form of
+   *        the `start` argument.
+   *
+   * @return {TimeRange}
+   */
+  function createTimeRanges(start, end) {
+    if (Array.isArray(start)) {
+      return createTimeRangesObj(start);
+    } else if (start === undefined || end === undefined) {
+      return createTimeRangesObj();
+    }
+    return createTimeRangesObj([[start, end]]);
+  }
+
+  /**
+   * Format seconds as a time string, H:MM:SS or M:SS. Supplying a guide (in
+   * seconds) will force a number of leading zeros to cover the length of the
+   * guide.
+   *
+   * @private
+   * @param  {number} seconds
+   *         Number of seconds to be turned into a string
+   *
+   * @param  {number} guide
+   *         Number (in seconds) to model the string after
+   *
+   * @return {string}
+   *         Time formatted as H:MM:SS or M:SS
+   */
+  const defaultImplementation = function (seconds, guide) {
+    seconds = seconds < 0 ? 0 : seconds;
+    let s = Math.floor(seconds % 60);
+    let m = Math.floor(seconds / 60 % 60);
+    let h = Math.floor(seconds / 3600);
+    const gm = Math.floor(guide / 60 % 60);
+    const gh = Math.floor(guide / 3600);
+
+    // handle invalid times
+    if (isNaN(seconds) || seconds === Infinity) {
+      // '-' is false for all relational operators (e.g. <, >=) so this setting
+      // will add the minimum number of fields specified by the guide
+      h = m = s = '-';
+    }
+
+    // Check if we need to show hours
+    h = h > 0 || gh > 0 ? h + ':' : '';
+
+    // If hours are showing, we may need to add a leading zero.
+    // Always show at least one digit of minutes.
+    m = ((h || gm >= 10) && m < 10 ? '0' + m : m) + ':';
+
+    // Check if leading zero is need for seconds
+    s = s < 10 ? '0' + s : s;
+    return h + m + s;
+  };
+
+  // Internal pointer to the current implementation.
+  let implementation = defaultImplementation;
+
+  /**
+   * Replaces the default formatTime implementation with a custom implementation.
+   *
+   * @param {Function} customImplementation
+   *        A function which will be used in place of the default formatTime
+   *        implementation. Will receive the current time in seconds and the
+   *        guide (in seconds) as arguments.
+   */
+  function setFormatTime(customImplementation) {
+    implementation = customImplementation;
+  }
+
+  /**
+   * Resets formatTime to the default implementation.
+   */
+  function resetFormatTime() {
+    implementation = defaultImplementation;
+  }
+
+  /**
+   * Delegates to either the default time formatting function or a custom
+   * function supplied via `setFormatTime`.
+   *
+   * Formats seconds as a time string (H:MM:SS or M:SS). Supplying a
+   * guide (in seconds) will force a number of leading zeros to cover the
+   * length of the guide.
+   *
+   * @example  formatTime(125, 600) === "02:05"
+   * @param    {number} seconds
+   *           Number of seconds to be turned into a string
+   *
+   * @param    {number} guide
+   *           Number (in seconds) to model the string after
+   *
+   * @return   {string}
+   *           Time formatted as H:MM:SS or M:SS
+   */
+  function formatTime(seconds, guide = seconds) {
+    return implementation(seconds, guide);
+  }
+
+  var Time = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    createTimeRanges: createTimeRanges,
+    createTimeRange: createTimeRanges,
+    setFormatTime: setFormatTime,
+    resetFormatTime: resetFormatTime,
+    formatTime: formatTime
+  });
+
+  /**
+   * @file buffer.js
+   * @module buffer
+   */
+
+  /**
+   * Compute the percentage of the media that has been buffered.
+   *
+   * @param { import('./time').TimeRange } buffered
+   *        The current `TimeRanges` object representing buffered time ranges
+   *
+   * @param {number} duration
+   *        Total duration of the media
+   *
+   * @return {number}
+   *         Percent buffered of the total duration in decimal form.
+   */
+  function bufferedPercent(buffered, duration) {
+    let bufferedDuration = 0;
+    let start;
+    let end;
+    if (!duration) {
+      return 0;
+    }
+    if (!buffered || !buffered.length) {
+      buffered = createTimeRanges(0, 0);
+    }
+    for (let i = 0; i < buffered.length; i++) {
+      start = buffered.start(i);
+      end = buffered.end(i);
+
+      // buffered end can be bigger than duration by a very small fraction
+      if (end > duration) {
+        end = duration;
+      }
+      bufferedDuration += end - start;
+    }
+    return bufferedDuration / duration;
+  }
+
+  /**
+   * @file media-error.js
+   */
+
+  /**
+   * A Custom `MediaError` class which mimics the standard HTML5 `MediaError` class.
+   *
+   * @param {number|string|Object|MediaError} value
+   *        This can be of multiple types:
+   *        - number: should be a standard error code
+   *        - string: an error message (the code will be 0)
+   *        - Object: arbitrary properties
+   *        - `MediaError` (native): used to populate a video.js `MediaError` object
+   *        - `MediaError` (video.js): will return itself if it's already a
+   *          video.js `MediaError` object.
+   *
+   * @see [MediaError Spec]{@link https://dev.w3.org/html5/spec-author-view/video.html#mediaerror}
+   * @see [Encrypted MediaError Spec]{@link https://www.w3.org/TR/2013/WD-encrypted-media-20130510/#error-codes}
+   *
+   * @class MediaError
+   */
+  function MediaError(value) {
+    // Allow redundant calls to this constructor to avoid having `instanceof`
+    // checks peppered around the code.
+    if (value instanceof MediaError) {
+      return value;
+    }
+    if (typeof value === 'number') {
+      this.code = value;
+    } else if (typeof value === 'string') {
+      // default code is zero, so this is a custom error
+      this.message = value;
+    } else if (isObject(value)) {
+      // We assign the `code` property manually because native `MediaError` objects
+      // do not expose it as an own/enumerable property of the object.
+      if (typeof value.code === 'number') {
+        this.code = value.code;
+      }
+      Object.assign(this, value);
+    }
+    if (!this.message) {
+      this.message = MediaError.defaultMessages[this.code] || '';
+    }
+  }
+
+  /**
+   * The error code that refers two one of the defined `MediaError` types
+   *
+   * @type {Number}
+   */
+  MediaError.prototype.code = 0;
+
+  /**
+   * An optional message that to show with the error. Message is not part of the HTML5
+   * video spec but allows for more informative custom errors.
+   *
+   * @type {String}
+   */
+  MediaError.prototype.message = '';
+
+  /**
+   * An optional status code that can be set by plugins to allow even more detail about
+   * the error. For example a plugin might provide a specific HTTP status code and an
+   * error message for that code. Then when the plugin gets that error this class will
+   * know how to display an error message for it. This allows a custom message to show
+   * up on the `Player` error overlay.
+   *
+   * @type {Array}
+   */
+  MediaError.prototype.status = null;
+
+  /**
+   * An object containing an error type, as well as other information regarding the error.
+   *
+   * @typedef {{errorType: string, [key: string]: any}} ErrorMetadata
+   */
+
+  /**
+   * An optional object to give more detail about the error. This can be used to give
+   * a higher level of specificity to an error versus the more generic MediaError codes.
+   * `metadata` expects an `errorType` string that should align with the values from videojs.Error.
+   *
+   * @type {ErrorMetadata}
+   */
+  MediaError.prototype.metadata = null;
+
+  /**
+   * Errors indexed by the W3C standard. The order **CANNOT CHANGE**! See the
+   * specification listed under {@link MediaError} for more information.
+   *
+   * @enum {array}
+   * @readonly
+   * @property {string} 0 - MEDIA_ERR_CUSTOM
+   * @property {string} 1 - MEDIA_ERR_ABORTED
+   * @property {string} 2 - MEDIA_ERR_NETWORK
+   * @property {string} 3 - MEDIA_ERR_DECODE
+   * @property {string} 4 - MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @property {string} 5 - MEDIA_ERR_ENCRYPTED
+   */
+  MediaError.errorTypes = ['MEDIA_ERR_CUSTOM', 'MEDIA_ERR_ABORTED', 'MEDIA_ERR_NETWORK', 'MEDIA_ERR_DECODE', 'MEDIA_ERR_SRC_NOT_SUPPORTED', 'MEDIA_ERR_ENCRYPTED'];
+
+  /**
+   * The default `MediaError` messages based on the {@link MediaError.errorTypes}.
+   *
+   * @type {Array}
+   * @constant
+   */
+  MediaError.defaultMessages = {
+    1: 'You aborted the media playback',
+    2: 'A network error caused the media download to fail part-way.',
+    3: 'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.',
+    4: 'The media could not be loaded, either because the server or network failed or because the format is not supported.',
+    5: 'The media is encrypted and we do not have the keys to decrypt it.'
+  };
+
+  /**
+   * W3C error code for any custom error.
+   *
+   * @member MediaError#MEDIA_ERR_CUSTOM
+   * @constant {number}
+   * @default 0
+   */
+  MediaError.MEDIA_ERR_CUSTOM = 0;
+
+  /**
+   * W3C error code for any custom error.
+   *
+   * @member MediaError.MEDIA_ERR_CUSTOM
+   * @constant {number}
+   * @default 0
+   */
+  MediaError.prototype.MEDIA_ERR_CUSTOM = 0;
+
+  /**
+   * W3C error code for media error aborted.
+   *
+   * @member MediaError#MEDIA_ERR_ABORTED
+   * @constant {number}
+   * @default 1
+   */
+  MediaError.MEDIA_ERR_ABORTED = 1;
+
+  /**
+   * W3C error code for media error aborted.
+   *
+   * @member MediaError.MEDIA_ERR_ABORTED
+   * @constant {number}
+   * @default 1
+   */
+  MediaError.prototype.MEDIA_ERR_ABORTED = 1;
+
+  /**
+   * W3C error code for any network error.
+   *
+   * @member MediaError#MEDIA_ERR_NETWORK
+   * @constant {number}
+   * @default 2
+   */
+  MediaError.MEDIA_ERR_NETWORK = 2;
+
+  /**
+   * W3C error code for any network error.
+   *
+   * @member MediaError.MEDIA_ERR_NETWORK
+   * @constant {number}
+   * @default 2
+   */
+  MediaError.prototype.MEDIA_ERR_NETWORK = 2;
+
+  /**
+   * W3C error code for any decoding error.
+   *
+   * @member MediaError#MEDIA_ERR_DECODE
+   * @constant {number}
+   * @default 3
+   */
+  MediaError.MEDIA_ERR_DECODE = 3;
+
+  /**
+   * W3C error code for any decoding error.
+   *
+   * @member MediaError.MEDIA_ERR_DECODE
+   * @constant {number}
+   * @default 3
+   */
+  MediaError.prototype.MEDIA_ERR_DECODE = 3;
+
+  /**
+   * W3C error code for any time that a source is not supported.
+   *
+   * @member MediaError#MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @constant {number}
+   * @default 4
+   */
+  MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+
+  /**
+   * W3C error code for any time that a source is not supported.
+   *
+   * @member MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @constant {number}
+   * @default 4
+   */
+  MediaError.prototype.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+
+  /**
+   * W3C error code for any time that a source is encrypted.
+   *
+   * @member MediaError#MEDIA_ERR_ENCRYPTED
+   * @constant {number}
+   * @default 5
+   */
+  MediaError.MEDIA_ERR_ENCRYPTED = 5;
+
+  /**
+   * W3C error code for any time that a source is encrypted.
+   *
+   * @member MediaError.MEDIA_ERR_ENCRYPTED
+   * @constant {number}
+   * @default 5
+   */
+  MediaError.prototype.MEDIA_ERR_ENCRYPTED = 5;
+
+  var tuple = SafeParseTuple;
+  function SafeParseTuple(obj, reviver) {
+    var json;
+    var error = null;
+    try {
+      json = JSON.parse(obj, reviver);
+    } catch (err) {
+      error = err;
+    }
+    return [error, json];
+  }
+
+  /**
+   * Returns whether an object is `Promise`-like (i.e. has a `then` method).
+   *
+   * @param  {Object}  value
+   *         An object that may or may not be `Promise`-like.
+   *
+   * @return {boolean}
+   *         Whether or not the object is `Promise`-like.
+   */
+  function isPromise(value) {
+    return value !== undefined && value !== null && typeof value.then === 'function';
+  }
+
+  /**
+   * Silence a Promise-like object.
+   *
+   * This is useful for avoiding non-harmful, but potentially confusing "uncaught
+   * play promise" rejection error messages.
+   *
+   * @param  {Object} value
+   *         An object that may or may not be `Promise`-like.
+   */
+  function silencePromise(value) {
+    if (isPromise(value)) {
+      value.then(null, e => {});
+    }
+  }
+
+  /**
+   * @file text-track-list-converter.js Utilities for capturing text track state and
+   * re-creating tracks based on a capture.
+   *
+   * @module text-track-list-converter
+   */
+
+  /**
+   * Examine a single {@link TextTrack} and return a JSON-compatible javascript object that
+   * represents the {@link TextTrack}'s state.
+   *
+   * @param {TextTrack} track
+   *        The text track to query.
+   *
+   * @return {Object}
+   *         A serializable javascript representation of the TextTrack.
+   * @private
+   */
+  const trackToJson_ = function (track) {
+    const ret = ['kind', 'label', 'language', 'id', 'inBandMetadataTrackDispatchType', 'mode', 'src'].reduce((acc, prop, i) => {
+      if (track[prop]) {
+        acc[prop] = track[prop];
+      }
+      return acc;
+    }, {
+      cues: track.cues && Array.prototype.map.call(track.cues, function (cue) {
+        return {
+          startTime: cue.startTime,
+          endTime: cue.endTime,
+          text: cue.text,
+          id: cue.id
+        };
+      })
+    });
+    return ret;
+  };
+
+  /**
+   * Examine a {@link Tech} and return a JSON-compatible javascript array that represents the
+   * state of all {@link TextTrack}s currently configured. The return array is compatible with
+   * {@link text-track-list-converter:jsonToTextTracks}.
+   *
+   * @param { import('../tech/tech').default } tech
+   *        The tech object to query
+   *
+   * @return {Array}
+   *         A serializable javascript representation of the {@link Tech}s
+   *         {@link TextTrackList}.
+   */
+  const textTracksToJson = function (tech) {
+    const trackEls = tech.$$('track');
+    const trackObjs = Array.prototype.map.call(trackEls, t => t.track);
+    const tracks = Array.prototype.map.call(trackEls, function (trackEl) {
+      const json = trackToJson_(trackEl.track);
+      if (trackEl.src) {
+        json.src = trackEl.src;
+      }
+      return json;
+    });
+    return tracks.concat(Array.prototype.filter.call(tech.textTracks(), function (track) {
+      return trackObjs.indexOf(track) === -1;
+    }).map(trackToJson_));
+  };
+
+  /**
+   * Create a set of remote {@link TextTrack}s on a {@link Tech} based on an array of javascript
+   * object {@link TextTrack} representations.
+   *
+   * @param {Array} json
+   *        An array of `TextTrack` representation objects, like those that would be
+   *        produced by `textTracksToJson`.
+   *
+   * @param {Tech} tech
+   *        The `Tech` to create the `TextTrack`s on.
+   */
+  const jsonToTextTracks = function (json, tech) {
+    json.forEach(function (track) {
+      const addedTrack = tech.addRemoteTextTrack(track).track;
+      if (!track.src && track.cues) {
+        track.cues.forEach(cue => addedTrack.addCue(cue));
+      }
+    });
+    return tech.textTracks();
+  };
+  var textTrackConverter = {
+    textTracksToJson,
+    jsonToTextTracks,
+    trackToJson_
+  };
+
+  /**
+   * @file modal-dialog.js
+   */
+  const MODAL_CLASS_NAME = 'vjs-modal-dialog';
+
+  /**
+   * The `ModalDialog` displays over the video and its controls, which blocks
+   * interaction with the player until it is closed.
+   *
+   * Modal dialogs include a "Close" button and will close when that button
+   * is activated - or when ESC is pressed anywhere.
+   *
+   * @extends Component
+   */
+  class ModalDialog extends Component {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param { import('./utils/dom').ContentDescriptor} [options.content=undefined]
+     *        Provide customized content for this modal.
+     *
+     * @param {string} [options.description]
+     *        A text description for the modal, primarily for accessibility.
+     *
+     * @param {boolean} [options.fillAlways=false]
+     *        Normally, modals are automatically filled only the first time
+     *        they open. This tells the modal to refresh its content
+     *        every time it opens.
+     *
+     * @param {string} [options.label]
+     *        A text label for the modal, primarily for accessibility.
+     *
+     * @param {boolean} [options.pauseOnOpen=true]
+     *        If `true`, playback will will be paused if playing when
+     *        the modal opens, and resumed when it closes.
+     *
+     * @param {boolean} [options.temporary=true]
+     *        If `true`, the modal can only be opened once; it will be
+     *        disposed as soon as it's closed.
+     *
+     * @param {boolean} [options.uncloseable=false]
+     *        If `true`, the user will not be able to close the modal
+     *        through the UI in the normal ways. Programmatic closing is
+     *        still possible.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.close_ = e => this.close(e);
+      this.opened_ = this.hasBeenOpened_ = this.hasBeenFilled_ = false;
+      this.closeable(!this.options_.uncloseable);
+      this.content(this.options_.content);
+
+      // Make sure the contentEl is defined AFTER any children are initialized
+      // because we only want the contents of the modal in the contentEl
+      // (not the UI elements like the close button).
+      this.contentEl_ = createEl('div', {
+        className: `${MODAL_CLASS_NAME}-content`
+      }, {
+        role: 'document'
+      });
+      this.descEl_ = createEl('p', {
+        className: `${MODAL_CLASS_NAME}-description vjs-control-text`,
+        id: this.el().getAttribute('aria-describedby')
+      });
+      textContent(this.descEl_, this.description());
+      this.el_.appendChild(this.descEl_);
+      this.el_.appendChild(this.contentEl_);
+    }
+
+    /**
+     * Create the `ModalDialog`'s DOM element
+     *
+     * @return {Element}
+     *         The DOM element that gets created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildCSSClass(),
+        tabIndex: -1
+      }, {
+        'aria-describedby': `${this.id()}_description`,
+        'aria-hidden': 'true',
+        'aria-label': this.label(),
+        'role': 'dialog',
+        'aria-live': 'polite'
+      });
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.descEl_ = null;
+      this.previouslyActiveEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `${MODAL_CLASS_NAME} vjs-hidden ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Returns the label string for this modal. Primarily used for accessibility.
+     *
+     * @return {string}
+     *         the localized or raw label of this modal.
+     */
+    label() {
+      return this.localize(this.options_.label || 'Modal Window');
+    }
+
+    /**
+     * Returns the description string for this modal. Primarily used for
+     * accessibility.
+     *
+     * @return {string}
+     *         The localized or raw description of this modal.
+     */
+    description() {
+      let desc = this.options_.description || this.localize('This is a modal window.');
+
+      // Append a universal closeability message if the modal is closeable.
+      if (this.closeable()) {
+        desc += ' ' + this.localize('This modal can be closed by pressing the Escape key or activating the close button.');
+      }
+      return desc;
+    }
+
+    /**
+     * Opens the modal.
+     *
+     * @fires ModalDialog#beforemodalopen
+     * @fires ModalDialog#modalopen
+     */
+    open() {
+      if (this.opened_) {
+        if (this.options_.fillAlways) {
+          this.fill();
+        }
+        return;
+      }
+      const player = this.player();
+
+      /**
+        * Fired just before a `ModalDialog` is opened.
+        *
+        * @event ModalDialog#beforemodalopen
+        * @type {Event}
+        */
+      this.trigger('beforemodalopen');
+      this.opened_ = true;
+
+      // Fill content if the modal has never opened before and
+      // never been filled.
+      if (this.options_.fillAlways || !this.hasBeenOpened_ && !this.hasBeenFilled_) {
+        this.fill();
+      }
+
+      // If the player was playing, pause it and take note of its previously
+      // playing state.
+      this.wasPlaying_ = !player.paused();
+      if (this.options_.pauseOnOpen && this.wasPlaying_) {
+        player.pause();
+      }
+      this.on('keydown', this.handleKeyDown_);
+
+      // Hide controls and note if they were enabled.
+      this.hadControls_ = player.controls();
+      player.controls(false);
+      this.show();
+      this.conditionalFocus_();
+      this.el().setAttribute('aria-hidden', 'false');
+
+      /**
+        * Fired just after a `ModalDialog` is opened.
+        *
+        * @event ModalDialog#modalopen
+        * @type {Event}
+        */
+      this.trigger('modalopen');
+      this.hasBeenOpened_ = true;
+    }
+
+    /**
+     * If the `ModalDialog` is currently open or closed.
+     *
+     * @param  {boolean} [value]
+     *         If given, it will open (`true`) or close (`false`) the modal.
+     *
+     * @return {boolean}
+     *         the current open state of the modaldialog
+     */
+    opened(value) {
+      if (typeof value === 'boolean') {
+        this[value ? 'open' : 'close']();
+      }
+      return this.opened_;
+    }
+
+    /**
+     * Closes the modal, does nothing if the `ModalDialog` is
+     * not open.
+     *
+     * @fires ModalDialog#beforemodalclose
+     * @fires ModalDialog#modalclose
+     */
+    close() {
+      if (!this.opened_) {
+        return;
+      }
+      const player = this.player();
+
+      /**
+        * Fired just before a `ModalDialog` is closed.
+        *
+        * @event ModalDialog#beforemodalclose
+        * @type {Event}
+        */
+      this.trigger('beforemodalclose');
+      this.opened_ = false;
+      if (this.wasPlaying_ && this.options_.pauseOnOpen) {
+        player.play();
+      }
+      this.off('keydown', this.handleKeyDown_);
+      if (this.hadControls_) {
+        player.controls(true);
+      }
+      this.hide();
+      this.el().setAttribute('aria-hidden', 'true');
+
+      /**
+        * Fired just after a `ModalDialog` is closed.
+        *
+        * @event ModalDialog#modalclose
+        * @type {Event}
+        */
+      this.trigger('modalclose');
+      this.conditionalBlur_();
+      if (this.options_.temporary) {
+        this.dispose();
+      }
+    }
+
+    /**
+     * Check to see if the `ModalDialog` is closeable via the UI.
+     *
+     * @param  {boolean} [value]
+     *         If given as a boolean, it will set the `closeable` option.
+     *
+     * @return {boolean}
+     *         Returns the final value of the closable option.
+     */
+    closeable(value) {
+      if (typeof value === 'boolean') {
+        const closeable = this.closeable_ = !!value;
+        let close = this.getChild('closeButton');
+
+        // If this is being made closeable and has no close button, add one.
+        if (closeable && !close) {
+          // The close button should be a child of the modal - not its
+          // content element, so temporarily change the content element.
+          const temp = this.contentEl_;
+          this.contentEl_ = this.el_;
+          close = this.addChild('closeButton', {
+            controlText: 'Close Modal Dialog'
+          });
+          this.contentEl_ = temp;
+          this.on(close, 'close', this.close_);
+        }
+
+        // If this is being made uncloseable and has a close button, remove it.
+        if (!closeable && close) {
+          this.off(close, 'close', this.close_);
+          this.removeChild(close);
+          close.dispose();
+        }
+      }
+      return this.closeable_;
+    }
+
+    /**
+     * Fill the modal's content element with the modal's "content" option.
+     * The content element will be emptied before this change takes place.
+     */
+    fill() {
+      this.fillWith(this.content());
+    }
+
+    /**
+     * Fill the modal's content element with arbitrary content.
+     * The content element will be emptied before this change takes place.
+     *
+     * @fires ModalDialog#beforemodalfill
+     * @fires ModalDialog#modalfill
+     *
+     * @param { import('./utils/dom').ContentDescriptor} [content]
+     *        The same rules apply to this as apply to the `content` option.
+     */
+    fillWith(content) {
+      const contentEl = this.contentEl();
+      const parentEl = contentEl.parentNode;
+      const nextSiblingEl = contentEl.nextSibling;
+
+      /**
+        * Fired just before a `ModalDialog` is filled with content.
+        *
+        * @event ModalDialog#beforemodalfill
+        * @type {Event}
+        */
+      this.trigger('beforemodalfill');
+      this.hasBeenFilled_ = true;
+
+      // Detach the content element from the DOM before performing
+      // manipulation to avoid modifying the live DOM multiple times.
+      parentEl.removeChild(contentEl);
+      this.empty();
+      insertContent(contentEl, content);
+      /**
+       * Fired just after a `ModalDialog` is filled with content.
+       *
+       * @event ModalDialog#modalfill
+       * @type {Event}
+       */
+      this.trigger('modalfill');
+
+      // Re-inject the re-filled content element.
+      if (nextSiblingEl) {
+        parentEl.insertBefore(contentEl, nextSiblingEl);
+      } else {
+        parentEl.appendChild(contentEl);
+      }
+
+      // make sure that the close button is last in the dialog DOM
+      const closeButton = this.getChild('closeButton');
+      if (closeButton) {
+        parentEl.appendChild(closeButton.el_);
+      }
+    }
+
+    /**
+     * Empties the content element. This happens anytime the modal is filled.
+     *
+     * @fires ModalDialog#beforemodalempty
+     * @fires ModalDialog#modalempty
+     */
+    empty() {
+      /**
+      * Fired just before a `ModalDialog` is emptied.
+      *
+      * @event ModalDialog#beforemodalempty
+      * @type {Event}
+      */
+      this.trigger('beforemodalempty');
+      emptyEl(this.contentEl());
+
+      /**
+      * Fired just after a `ModalDialog` is emptied.
+      *
+      * @event ModalDialog#modalempty
+      * @type {Event}
+      */
+      this.trigger('modalempty');
+    }
+
+    /**
+     * Gets or sets the modal content, which gets normalized before being
+     * rendered into the DOM.
+     *
+     * This does not update the DOM or fill the modal, but it is called during
+     * that process.
+     *
+     * @param  { import('./utils/dom').ContentDescriptor} [value]
+     *         If defined, sets the internal content value to be used on the
+     *         next call(s) to `fill`. This value is normalized before being
+     *         inserted. To "clear" the internal content value, pass `null`.
+     *
+     * @return { import('./utils/dom').ContentDescriptor}
+     *         The current content of the modal dialog
+     */
+    content(value) {
+      if (typeof value !== 'undefined') {
+        this.content_ = value;
+      }
+      return this.content_;
+    }
+
+    /**
+     * conditionally focus the modal dialog if focus was previously on the player.
+     *
+     * @private
+     */
+    conditionalFocus_() {
+      const activeEl = document.activeElement;
+      const playerEl = this.player_.el_;
+      this.previouslyActiveEl_ = null;
+      if (playerEl.contains(activeEl) || playerEl === activeEl) {
+        this.previouslyActiveEl_ = activeEl;
+        this.focus();
+      }
+    }
+
+    /**
+     * conditionally blur the element and refocus the last focused element
+     *
+     * @private
+     */
+    conditionalBlur_() {
+      if (this.previouslyActiveEl_) {
+        this.previouslyActiveEl_.focus();
+        this.previouslyActiveEl_ = null;
+      }
+    }
+
+    /**
+     * Keydown handler. Attached when modal is focused.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Do not allow keydowns to reach out of the modal dialog.
+      event.stopPropagation();
+      if (keycode.isEventKey(event, 'Escape') && this.closeable()) {
+        event.preventDefault();
+        this.close();
+        return;
+      }
+
+      // exit early if it isn't a tab key
+      if (!keycode.isEventKey(event, 'Tab')) {
+        return;
+      }
+      const focusableEls = this.focusableEls_();
+      const activeEl = this.el_.querySelector(':focus');
+      let focusIndex;
+      for (let i = 0; i < focusableEls.length; i++) {
+        if (activeEl === focusableEls[i]) {
+          focusIndex = i;
+          break;
+        }
+      }
+      if (document.activeElement === this.el_) {
+        focusIndex = 0;
+      }
+      if (event.shiftKey && focusIndex === 0) {
+        focusableEls[focusableEls.length - 1].focus();
+        event.preventDefault();
+      } else if (!event.shiftKey && focusIndex === focusableEls.length - 1) {
+        focusableEls[0].focus();
+        event.preventDefault();
+      }
+    }
+
+    /**
+     * get all focusable elements
+     *
+     * @private
+     */
+    focusableEls_() {
+      const allChildren = this.el_.querySelectorAll('*');
+      return Array.prototype.filter.call(allChildren, child => {
+        return (child instanceof window.HTMLAnchorElement || child instanceof window.HTMLAreaElement) && child.hasAttribute('href') || (child instanceof window.HTMLInputElement || child instanceof window.HTMLSelectElement || child instanceof window.HTMLTextAreaElement || child instanceof window.HTMLButtonElement) && !child.hasAttribute('disabled') || child instanceof window.HTMLIFrameElement || child instanceof window.HTMLObjectElement || child instanceof window.HTMLEmbedElement || child.hasAttribute('tabindex') && child.getAttribute('tabindex') !== -1 || child.hasAttribute('contenteditable');
+      });
+    }
+  }
+
+  /**
+   * Default options for `ModalDialog` default options.
+   *
+   * @type {Object}
+   * @private
+   */
+  ModalDialog.prototype.options_ = {
+    pauseOnOpen: true,
+    temporary: true
+  };
+  Component.registerComponent('ModalDialog', ModalDialog);
+
+  /**
+   * @file track-list.js
+   */
+
+  /**
+   * Common functionaliy between {@link TextTrackList}, {@link AudioTrackList}, and
+   * {@link VideoTrackList}
+   *
+   * @extends EventTarget
+   */
+  class TrackList extends EventTarget {
+    /**
+     * Create an instance of this class
+     *
+     * @param { import('./track').default[] } tracks
+     *        A list of tracks to initialize the list with.
+     *
+     * @abstract
+     */
+    constructor(tracks = []) {
+      super();
+      this.tracks_ = [];
+
+      /**
+       * @memberof TrackList
+       * @member {number} length
+       *         The current number of `Track`s in the this Trackist.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.tracks_.length;
+        }
+      });
+      for (let i = 0; i < tracks.length; i++) {
+        this.addTrack(tracks[i]);
+      }
+    }
+
+    /**
+     * Add a {@link Track} to the `TrackList`
+     *
+     * @param { import('./track').default } track
+     *        The audio, video, or text track to add to the list.
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      const index = this.tracks_.length;
+      if (!('' + index in this)) {
+        Object.defineProperty(this, index, {
+          get() {
+            return this.tracks_[index];
+          }
+        });
+      }
+
+      // Do not add duplicate tracks
+      if (this.tracks_.indexOf(track) === -1) {
+        this.tracks_.push(track);
+        /**
+         * Triggered when a track is added to a track list.
+         *
+         * @event TrackList#addtrack
+         * @type {Event}
+         * @property {Track} track
+         *           A reference to track that was added.
+         */
+        this.trigger({
+          track,
+          type: 'addtrack',
+          target: this
+        });
+      }
+
+      /**
+       * Triggered when a track label is changed.
+       *
+       * @event TrackList#addtrack
+       * @type {Event}
+       * @property {Track} track
+       *           A reference to track that was added.
+       */
+      track.labelchange_ = () => {
+        this.trigger({
+          track,
+          type: 'labelchange',
+          target: this
+        });
+      };
+      if (isEvented(track)) {
+        track.addEventListener('labelchange', track.labelchange_);
+      }
+    }
+
+    /**
+     * Remove a {@link Track} from the `TrackList`
+     *
+     * @param { import('./track').default } rtrack
+     *        The audio, video, or text track to remove from the list.
+     *
+     * @fires TrackList#removetrack
+     */
+    removeTrack(rtrack) {
+      let track;
+      for (let i = 0, l = this.length; i < l; i++) {
+        if (this[i] === rtrack) {
+          track = this[i];
+          if (track.off) {
+            track.off();
+          }
+          this.tracks_.splice(i, 1);
+          break;
+        }
+      }
+      if (!track) {
+        return;
+      }
+
+      /**
+       * Triggered when a track is removed from track list.
+       *
+       * @event TrackList#removetrack
+       * @type {Event}
+       * @property {Track} track
+       *           A reference to track that was removed.
+       */
+      this.trigger({
+        track,
+        type: 'removetrack',
+        target: this
+      });
+    }
+
+    /**
+     * Get a Track from the TrackList by a tracks id
+     *
+     * @param {string} id - the id of the track to get
+     * @method getTrackById
+     * @return { import('./track').default }
+     * @private
+     */
+    getTrackById(id) {
+      let result = null;
+      for (let i = 0, l = this.length; i < l; i++) {
+        const track = this[i];
+        if (track.id === id) {
+          result = track;
+          break;
+        }
+      }
+      return result;
+    }
+  }
+
+  /**
+   * Triggered when a different track is selected/enabled.
+   *
+   * @event TrackList#change
+   * @type {Event}
+   */
+
+  /**
+   * Events that can be called with on + eventName. See {@link EventHandler}.
+   *
+   * @property {Object} TrackList#allowedEvents_
+   * @protected
+   */
+  TrackList.prototype.allowedEvents_ = {
+    change: 'change',
+    addtrack: 'addtrack',
+    removetrack: 'removetrack',
+    labelchange: 'labelchange'
+  };
+
+  // emulate attribute EventHandler support to allow for feature detection
+  for (const event in TrackList.prototype.allowedEvents_) {
+    TrackList.prototype['on' + event] = null;
+  }
+
+  /**
+   * @file audio-track-list.js
+   */
+
+  /**
+   * Anywhere we call this function we diverge from the spec
+   * as we only support one enabled audiotrack at a time
+   *
+   * @param {AudioTrackList} list
+   *        list to work on
+   *
+   * @param { import('./audio-track').default } track
+   *        The track to skip
+   *
+   * @private
+   */
+  const disableOthers$1 = function (list, track) {
+    for (let i = 0; i < list.length; i++) {
+      if (!Object.keys(list[i]).length || track.id === list[i].id) {
+        continue;
+      }
+      // another audio track is enabled, disable it
+      list[i].enabled = false;
+    }
+  };
+
+  /**
+   * The current list of {@link AudioTrack} for a media file.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist}
+   * @extends TrackList
+   */
+  class AudioTrackList extends TrackList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./audio-track').default[] } [tracks=[]]
+     *        A list of `AudioTrack` to instantiate the list with.
+     */
+    constructor(tracks = []) {
+      // make sure only 1 track is enabled
+      // sorted from last index to first index
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        if (tracks[i].enabled) {
+          disableOthers$1(tracks, tracks[i]);
+          break;
+        }
+      }
+      super(tracks);
+      this.changing_ = false;
+    }
+
+    /**
+     * Add an {@link AudioTrack} to the `AudioTrackList`.
+     *
+     * @param { import('./audio-track').default } track
+     *        The AudioTrack to add to the list
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      if (track.enabled) {
+        disableOthers$1(this, track);
+      }
+      super.addTrack(track);
+      // native tracks don't have this
+      if (!track.addEventListener) {
+        return;
+      }
+      track.enabledChange_ = () => {
+        // when we are disabling other tracks (since we don't support
+        // more than one track at a time) we will set changing_
+        // to true so that we don't trigger additional change events
+        if (this.changing_) {
+          return;
+        }
+        this.changing_ = true;
+        disableOthers$1(this, track);
+        this.changing_ = false;
+        this.trigger('change');
+      };
+
+      /**
+       * @listens AudioTrack#enabledchange
+       * @fires TrackList#change
+       */
+      track.addEventListener('enabledchange', track.enabledChange_);
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+      if (rtrack.removeEventListener && rtrack.enabledChange_) {
+        rtrack.removeEventListener('enabledchange', rtrack.enabledChange_);
+        rtrack.enabledChange_ = null;
+      }
+    }
+  }
+
+  /**
+   * @file video-track-list.js
+   */
+
+  /**
+   * Un-select all other {@link VideoTrack}s that are selected.
+   *
+   * @param {VideoTrackList} list
+   *        list to work on
+   *
+   * @param { import('./video-track').default } track
+   *        The track to skip
+   *
+   * @private
+   */
+  const disableOthers = function (list, track) {
+    for (let i = 0; i < list.length; i++) {
+      if (!Object.keys(list[i]).length || track.id === list[i].id) {
+        continue;
+      }
+      // another video track is enabled, disable it
+      list[i].selected = false;
+    }
+  };
+
+  /**
+   * The current list of {@link VideoTrack} for a video.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist}
+   * @extends TrackList
+   */
+  class VideoTrackList extends TrackList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {VideoTrack[]} [tracks=[]]
+     *        A list of `VideoTrack` to instantiate the list with.
+     */
+    constructor(tracks = []) {
+      // make sure only 1 track is enabled
+      // sorted from last index to first index
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        if (tracks[i].selected) {
+          disableOthers(tracks, tracks[i]);
+          break;
+        }
+      }
+      super(tracks);
+      this.changing_ = false;
+
+      /**
+       * @member {number} VideoTrackList#selectedIndex
+       *         The current index of the selected {@link VideoTrack`}.
+       */
+      Object.defineProperty(this, 'selectedIndex', {
+        get() {
+          for (let i = 0; i < this.length; i++) {
+            if (this[i].selected) {
+              return i;
+            }
+          }
+          return -1;
+        },
+        set() {}
+      });
+    }
+
+    /**
+     * Add a {@link VideoTrack} to the `VideoTrackList`.
+     *
+     * @param { import('./video-track').default } track
+     *        The VideoTrack to add to the list
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      if (track.selected) {
+        disableOthers(this, track);
+      }
+      super.addTrack(track);
+      // native tracks don't have this
+      if (!track.addEventListener) {
+        return;
+      }
+      track.selectedChange_ = () => {
+        if (this.changing_) {
+          return;
+        }
+        this.changing_ = true;
+        disableOthers(this, track);
+        this.changing_ = false;
+        this.trigger('change');
+      };
+
+      /**
+       * @listens VideoTrack#selectedchange
+       * @fires TrackList#change
+       */
+      track.addEventListener('selectedchange', track.selectedChange_);
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+      if (rtrack.removeEventListener && rtrack.selectedChange_) {
+        rtrack.removeEventListener('selectedchange', rtrack.selectedChange_);
+        rtrack.selectedChange_ = null;
+      }
+    }
+  }
+
+  /**
+   * @file text-track-list.js
+   */
+
+  /**
+   * The current list of {@link TextTrack} for a media file.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttracklist}
+   * @extends TrackList
+   */
+  class TextTrackList extends TrackList {
+    /**
+     * Add a {@link TextTrack} to the `TextTrackList`
+     *
+     * @param { import('./text-track').default } track
+     *        The text track to add to the list.
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      super.addTrack(track);
+      if (!this.queueChange_) {
+        this.queueChange_ = () => this.queueTrigger('change');
+      }
+      if (!this.triggerSelectedlanguagechange) {
+        this.triggerSelectedlanguagechange_ = () => this.trigger('selectedlanguagechange');
+      }
+
+      /**
+       * @listens TextTrack#modechange
+       * @fires TrackList#change
+       */
+      track.addEventListener('modechange', this.queueChange_);
+      const nonLanguageTextTrackKind = ['metadata', 'chapters'];
+      if (nonLanguageTextTrackKind.indexOf(track.kind) === -1) {
+        track.addEventListener('modechange', this.triggerSelectedlanguagechange_);
+      }
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+
+      // manually remove the event handlers we added
+      if (rtrack.removeEventListener) {
+        if (this.queueChange_) {
+          rtrack.removeEventListener('modechange', this.queueChange_);
+        }
+        if (this.selectedlanguagechange_) {
+          rtrack.removeEventListener('modechange', this.triggerSelectedlanguagechange_);
+        }
+      }
+    }
+  }
+
+  /**
+   * @file html-track-element-list.js
+   */
+
+  /**
+   * The current list of {@link HtmlTrackElement}s.
+   */
+  class HtmlTrackElementList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {HtmlTrackElement[]} [tracks=[]]
+     *        A list of `HtmlTrackElement` to instantiate the list with.
+     */
+    constructor(trackElements = []) {
+      this.trackElements_ = [];
+
+      /**
+       * @memberof HtmlTrackElementList
+       * @member {number} length
+       *         The current number of `Track`s in the this Trackist.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.trackElements_.length;
+        }
+      });
+      for (let i = 0, length = trackElements.length; i < length; i++) {
+        this.addTrackElement_(trackElements[i]);
+      }
+    }
+
+    /**
+     * Add an {@link HtmlTrackElement} to the `HtmlTrackElementList`
+     *
+     * @param {HtmlTrackElement} trackElement
+     *        The track element to add to the list.
+     *
+     * @private
+     */
+    addTrackElement_(trackElement) {
+      const index = this.trackElements_.length;
+      if (!('' + index in this)) {
+        Object.defineProperty(this, index, {
+          get() {
+            return this.trackElements_[index];
+          }
+        });
+      }
+
+      // Do not add duplicate elements
+      if (this.trackElements_.indexOf(trackElement) === -1) {
+        this.trackElements_.push(trackElement);
+      }
+    }
+
+    /**
+     * Get an {@link HtmlTrackElement} from the `HtmlTrackElementList` given an
+     * {@link TextTrack}.
+     *
+     * @param {TextTrack} track
+     *        The track associated with a track element.
+     *
+     * @return {HtmlTrackElement|undefined}
+     *         The track element that was found or undefined.
+     *
+     * @private
+     */
+    getTrackElementByTrack_(track) {
+      let trackElement_;
+      for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+        if (track === this.trackElements_[i].track) {
+          trackElement_ = this.trackElements_[i];
+          break;
+        }
+      }
+      return trackElement_;
+    }
+
+    /**
+     * Remove a {@link HtmlTrackElement} from the `HtmlTrackElementList`
+     *
+     * @param {HtmlTrackElement} trackElement
+     *        The track element to remove from the list.
+     *
+     * @private
+     */
+    removeTrackElement_(trackElement) {
+      for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+        if (trackElement === this.trackElements_[i]) {
+          if (this.trackElements_[i].track && typeof this.trackElements_[i].track.off === 'function') {
+            this.trackElements_[i].track.off();
+          }
+          if (typeof this.trackElements_[i].off === 'function') {
+            this.trackElements_[i].off();
+          }
+          this.trackElements_.splice(i, 1);
+          break;
+        }
+      }
+    }
+  }
+
+  /**
+   * @file text-track-cue-list.js
+   */
+
+  /**
+   * @typedef {Object} TextTrackCueList~TextTrackCue
+   *
+   * @property {string} id
+   *           The unique id for this text track cue
+   *
+   * @property {number} startTime
+   *           The start time for this text track cue
+   *
+   * @property {number} endTime
+   *           The end time for this text track cue
+   *
+   * @property {boolean} pauseOnExit
+   *           Pause when the end time is reached if true.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue}
+   */
+
+  /**
+   * A List of TextTrackCues.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcuelist}
+   */
+  class TextTrackCueList {
+    /**
+     * Create an instance of this class..
+     *
+     * @param {Array} cues
+     *        A list of cues to be initialized with
+     */
+    constructor(cues) {
+      TextTrackCueList.prototype.setCues_.call(this, cues);
+
+      /**
+       * @memberof TextTrackCueList
+       * @member {number} length
+       *         The current number of `TextTrackCue`s in the TextTrackCueList.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.length_;
+        }
+      });
+    }
+
+    /**
+     * A setter for cues in this list. Creates getters
+     * an an index for the cues.
+     *
+     * @param {Array} cues
+     *        An array of cues to set
+     *
+     * @private
+     */
+    setCues_(cues) {
+      const oldLength = this.length || 0;
+      let i = 0;
+      const l = cues.length;
+      this.cues_ = cues;
+      this.length_ = cues.length;
+      const defineProp = function (index) {
+        if (!('' + index in this)) {
+          Object.defineProperty(this, '' + index, {
+            get() {
+              return this.cues_[index];
+            }
+          });
+        }
+      };
+      if (oldLength < l) {
+        i = oldLength;
+        for (; i < l; i++) {
+          defineProp.call(this, i);
+        }
+      }
+    }
+
+    /**
+     * Get a `TextTrackCue` that is currently in the `TextTrackCueList` by id.
+     *
+     * @param {string} id
+     *        The id of the cue that should be searched for.
+     *
+     * @return {TextTrackCueList~TextTrackCue|null}
+     *         A single cue or null if none was found.
+     */
+    getCueById(id) {
+      let result = null;
+      for (let i = 0, l = this.length; i < l; i++) {
+        const cue = this[i];
+        if (cue.id === id) {
+          result = cue;
+          break;
+        }
+      }
+      return result;
+    }
+  }
+
+  /**
+   * @file track-kinds.js
+   */
+
+  /**
+   * All possible `VideoTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-videotrack-kind
+   * @typedef VideoTrack~Kind
+   * @enum
+   */
+  const VideoTrackKind = {
+    alternative: 'alternative',
+    captions: 'captions',
+    main: 'main',
+    sign: 'sign',
+    subtitles: 'subtitles',
+    commentary: 'commentary'
+  };
+
+  /**
+   * All possible `AudioTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-kind
+   * @typedef AudioTrack~Kind
+   * @enum
+   */
+  const AudioTrackKind = {
+    'alternative': 'alternative',
+    'descriptions': 'descriptions',
+    'main': 'main',
+    'main-desc': 'main-desc',
+    'translation': 'translation',
+    'commentary': 'commentary'
+  };
+
+  /**
+   * All possible `TextTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-texttrack-kind
+   * @typedef TextTrack~Kind
+   * @enum
+   */
+  const TextTrackKind = {
+    subtitles: 'subtitles',
+    captions: 'captions',
+    descriptions: 'descriptions',
+    chapters: 'chapters',
+    metadata: 'metadata'
+  };
+
+  /**
+   * All possible `TextTrackMode`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackmode
+   * @typedef TextTrack~Mode
+   * @enum
+   */
+  const TextTrackMode = {
+    disabled: 'disabled',
+    hidden: 'hidden',
+    showing: 'showing'
+  };
+
+  /**
+   * @file track.js
+   */
+
+  /**
+   * A Track class that contains all of the common functionality for {@link AudioTrack},
+   * {@link VideoTrack}, and {@link TextTrack}.
+   *
+   * > Note: This class should not be used directly
+   *
+   * @see {@link https://html.spec.whatwg.org/multipage/embedded-content.html}
+   * @extends EventTarget
+   * @abstract
+   */
+  class Track extends EventTarget {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {string} [options.kind='']
+     *        A valid kind for the track type you are creating.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @abstract
+     */
+    constructor(options = {}) {
+      super();
+      const trackProps = {
+        id: options.id || 'vjs_track_' + newGUID(),
+        kind: options.kind || '',
+        language: options.language || ''
+      };
+      let label = options.label || '';
+
+      /**
+       * @memberof Track
+       * @member {string} id
+       *         The id of this track. Cannot be changed after creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      /**
+       * @memberof Track
+       * @member {string} kind
+       *         The kind of track that this is. Cannot be changed after creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      /**
+       * @memberof Track
+       * @member {string} language
+       *         The two letter language code for this track. Cannot be changed after
+       *         creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      for (const key in trackProps) {
+        Object.defineProperty(this, key, {
+          get() {
+            return trackProps[key];
+          },
+          set() {}
+        });
+      }
+
+      /**
+       * @memberof Track
+       * @member {string} label
+       *         The label of this track. Cannot be changed after creation.
+       * @instance
+       *
+       * @fires Track#labelchange
+       */
+      Object.defineProperty(this, 'label', {
+        get() {
+          return label;
+        },
+        set(newLabel) {
+          if (newLabel !== label) {
+            label = newLabel;
+
+            /**
+             * An event that fires when label changes on this track.
+             *
+             * > Note: This is not part of the spec!
+             *
+             * @event Track#labelchange
+             * @type {Event}
+             */
+            this.trigger('labelchange');
+          }
+        }
+      });
+    }
+  }
+
+  /**
+   * @file url.js
+   * @module url
+   */
+
+  /**
+   * @typedef {Object} url:URLObject
+   *
+   * @property {string} protocol
+   *           The protocol of the url that was parsed.
+   *
+   * @property {string} hostname
+   *           The hostname of the url that was parsed.
+   *
+   * @property {string} port
+   *           The port of the url that was parsed.
+   *
+   * @property {string} pathname
+   *           The pathname of the url that was parsed.
+   *
+   * @property {string} search
+   *           The search query of the url that was parsed.
+   *
+   * @property {string} hash
+   *           The hash of the url that was parsed.
+   *
+   * @property {string} host
+   *           The host of the url that was parsed.
+   */
+
+  /**
+   * Resolve and parse the elements of a URL.
+   *
+   * @function
+   * @param    {String} url
+   *           The url to parse
+   *
+   * @return   {url:URLObject}
+   *           An object of url details
+   */
+  const parseUrl = function (url) {
+    // This entire method can be replace with URL once we are able to drop IE11
+
+    const props = ['protocol', 'hostname', 'port', 'pathname', 'search', 'hash', 'host'];
+
+    // add the url to an anchor and let the browser parse the URL
+    const a = document.createElement('a');
+    a.href = url;
+
+    // Copy the specific URL properties to a new object
+    // This is also needed for IE because the anchor loses its
+    // properties when it's removed from the dom
+    const details = {};
+    for (let i = 0; i < props.length; i++) {
+      details[props[i]] = a[props[i]];
+    }
+
+    // IE adds the port to the host property unlike everyone else. If
+    // a port identifier is added for standard ports, strip it.
+    if (details.protocol === 'http:') {
+      details.host = details.host.replace(/:80$/, '');
+    }
+    if (details.protocol === 'https:') {
+      details.host = details.host.replace(/:443$/, '');
+    }
+    if (!details.protocol) {
+      details.protocol = window.location.protocol;
+    }
+
+    /* istanbul ignore if */
+    if (!details.host) {
+      details.host = window.location.host;
+    }
+    return details;
+  };
+
+  /**
+   * Get absolute version of relative URL.
+   *
+   * @function
+   * @param    {string} url
+   *           URL to make absolute
+   *
+   * @return   {string}
+   *           Absolute URL
+   *
+   * @see      http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
+   */
+  const getAbsoluteURL = function (url) {
+    // Check if absolute URL
+    if (!url.match(/^https?:\/\//)) {
+      // Add the url to an anchor and let the browser parse it to convert to an absolute url
+      const a = document.createElement('a');
+      a.href = url;
+      url = a.href;
+    }
+    return url;
+  };
+
+  /**
+   * Returns the extension of the passed file name. It will return an empty string
+   * if passed an invalid path.
+   *
+   * @function
+   * @param    {string} path
+   *           The fileName path like '/path/to/file.mp4'
+   *
+   * @return  {string}
+   *           The extension in lower case or an empty string if no
+   *           extension could be found.
+   */
+  const getFileExtension = function (path) {
+    if (typeof path === 'string') {
+      const splitPathRe = /^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/;
+      const pathParts = splitPathRe.exec(path);
+      if (pathParts) {
+        return pathParts.pop().toLowerCase();
+      }
+    }
+    return '';
+  };
+
+  /**
+   * Returns whether the url passed is a cross domain request or not.
+   *
+   * @function
+   * @param    {string} url
+   *           The url to check.
+   *
+   * @param    {Object} [winLoc]
+   *           the domain to check the url against, defaults to window.location
+   *
+   * @param    {string} [winLoc.protocol]
+   *           The window location protocol defaults to window.location.protocol
+   *
+   * @param    {string} [winLoc.host]
+   *           The window location host defaults to window.location.host
+   *
+   * @return   {boolean}
+   *           Whether it is a cross domain request or not.
+   */
+  const isCrossOrigin = function (url, winLoc = window.location) {
+    const urlInfo = parseUrl(url);
+
+    // IE8 protocol relative urls will return ':' for protocol
+    const srcProtocol = urlInfo.protocol === ':' ? winLoc.protocol : urlInfo.protocol;
+
+    // Check if url is for another domain/origin
+    // IE8 doesn't know location.origin, so we won't rely on it here
+    const crossOrigin = srcProtocol + urlInfo.host !== winLoc.protocol + winLoc.host;
+    return crossOrigin;
+  };
+
+  var Url = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    parseUrl: parseUrl,
+    getAbsoluteURL: getAbsoluteURL,
+    getFileExtension: getFileExtension,
+    isCrossOrigin: isCrossOrigin
+  });
+
+  var win;
+  if (typeof window !== "undefined") {
+    win = window;
+  } else if (typeof commonjsGlobal !== "undefined") {
+    win = commonjsGlobal;
+  } else if (typeof self !== "undefined") {
+    win = self;
+  } else {
+    win = {};
+  }
+  var window_1 = win;
+
+  var _extends_1 = createCommonjsModule(function (module) {
+    function _extends() {
+      module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i];
+          for (var key in source) {
+            if (Object.prototype.hasOwnProperty.call(source, key)) {
+              target[key] = source[key];
+            }
+          }
+        }
+        return target;
+      }, module.exports.__esModule = true, module.exports["default"] = module.exports;
+      return _extends.apply(this, arguments);
+    }
+    module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+  unwrapExports(_extends_1);
+
+  var isFunction_1 = isFunction;
+  var toString = Object.prototype.toString;
+  function isFunction(fn) {
+    if (!fn) {
+      return false;
+    }
+    var string = toString.call(fn);
+    return string === '[object Function]' || typeof fn === 'function' && string !== '[object RegExp]' || typeof window !== 'undefined' && (
+    // IE8 and below
+    fn === window.setTimeout || fn === window.alert || fn === window.confirm || fn === window.prompt);
+  }
+
+  var httpResponseHandler = function httpResponseHandler(callback, decodeResponseBody) {
+    if (decodeResponseBody === void 0) {
+      decodeResponseBody = false;
+    }
+    return function (err, response, responseBody) {
+      // if the XHR failed, return that error
+      if (err) {
+        callback(err);
+        return;
+      } // if the HTTP status code is 4xx or 5xx, the request also failed
+
+      if (response.statusCode >= 400 && response.statusCode <= 599) {
+        var cause = responseBody;
+        if (decodeResponseBody) {
+          if (window_1.TextDecoder) {
+            var charset = getCharset(response.headers && response.headers['content-type']);
+            try {
+              cause = new TextDecoder(charset).decode(responseBody);
+            } catch (e) {}
+          } else {
+            cause = String.fromCharCode.apply(null, new Uint8Array(responseBody));
+          }
+        }
+        callback({
+          cause: cause
+        });
+        return;
+      } // otherwise, request succeeded
+
+      callback(null, responseBody);
+    };
+  };
+  function getCharset(contentTypeHeader) {
+    if (contentTypeHeader === void 0) {
+      contentTypeHeader = '';
+    }
+    return contentTypeHeader.toLowerCase().split(';').reduce(function (charset, contentType) {
+      var _contentType$split = contentType.split('='),
+        type = _contentType$split[0],
+        value = _contentType$split[1];
+      if (type.trim() === 'charset') {
+        return value.trim();
+      }
+      return charset;
+    }, 'utf-8');
+  }
+  var httpHandler = httpResponseHandler;
+
+  createXHR.httpHandler = httpHandler;
+  /**
+   * @license
+   * slighly modified parse-headers 2.0.2 <https://github.com/kesla/parse-headers/>
+   * Copyright (c) 2014 David Björklund
+   * Available under the MIT license
+   * <https://github.com/kesla/parse-headers/blob/master/LICENCE>
+   */
+
+  var parseHeaders = function parseHeaders(headers) {
+    var result = {};
+    if (!headers) {
+      return result;
+    }
+    headers.trim().split('\n').forEach(function (row) {
+      var index = row.indexOf(':');
+      var key = row.slice(0, index).trim().toLowerCase();
+      var value = row.slice(index + 1).trim();
+      if (typeof result[key] === 'undefined') {
+        result[key] = value;
+      } else if (Array.isArray(result[key])) {
+        result[key].push(value);
+      } else {
+        result[key] = [result[key], value];
+      }
+    });
+    return result;
+  };
+  var lib = createXHR; // Allow use of default import syntax in TypeScript
+
+  var default_1 = createXHR;
+  createXHR.XMLHttpRequest = window_1.XMLHttpRequest || noop;
+  createXHR.XDomainRequest = "withCredentials" in new createXHR.XMLHttpRequest() ? createXHR.XMLHttpRequest : window_1.XDomainRequest;
+  forEachArray(["get", "put", "post", "patch", "head", "delete"], function (method) {
+    createXHR[method === "delete" ? "del" : method] = function (uri, options, callback) {
+      options = initParams(uri, options, callback);
+      options.method = method.toUpperCase();
+      return _createXHR(options);
+    };
+  });
+  function forEachArray(array, iterator) {
+    for (var i = 0; i < array.length; i++) {
+      iterator(array[i]);
+    }
+  }
+  function isEmpty(obj) {
+    for (var i in obj) {
+      if (obj.hasOwnProperty(i)) return false;
+    }
+    return true;
+  }
+  function initParams(uri, options, callback) {
+    var params = uri;
+    if (isFunction_1(options)) {
+      callback = options;
+      if (typeof uri === "string") {
+        params = {
+          uri: uri
+        };
+      }
+    } else {
+      params = _extends_1({}, options, {
+        uri: uri
+      });
+    }
+    params.callback = callback;
+    return params;
+  }
+  function createXHR(uri, options, callback) {
+    options = initParams(uri, options, callback);
+    return _createXHR(options);
+  }
+  function _createXHR(options) {
+    if (typeof options.callback === "undefined") {
+      throw new Error("callback argument missing");
+    }
+    var called = false;
+    var callback = function cbOnce(err, response, body) {
+      if (!called) {
+        called = true;
+        options.callback(err, response, body);
+      }
+    };
+    function readystatechange() {
+      if (xhr.readyState === 4) {
+        setTimeout(loadFunc, 0);
+      }
+    }
+    function getBody() {
+      // Chrome with requestType=blob throws errors arround when even testing access to responseText
+      var body = undefined;
+      if (xhr.response) {
+        body = xhr.response;
+      } else {
+        body = xhr.responseText || getXml(xhr);
+      }
+      if (isJson) {
+        try {
+          body = JSON.parse(body);
+        } catch (e) {}
+      }
+      return body;
+    }
+    function errorFunc(evt) {
+      clearTimeout(timeoutTimer);
+      if (!(evt instanceof Error)) {
+        evt = new Error("" + (evt || "Unknown XMLHttpRequest Error"));
+      }
+      evt.statusCode = 0;
+      return callback(evt, failureResponse);
+    } // will load the data & process the response in a special response object
+
+    function loadFunc() {
+      if (aborted) return;
+      var status;
+      clearTimeout(timeoutTimer);
+      if (options.useXDR && xhr.status === undefined) {
+        //IE8 CORS GET successful response doesn't have a status field, but body is fine
+        status = 200;
+      } else {
+        status = xhr.status === 1223 ? 204 : xhr.status;
+      }
+      var response = failureResponse;
+      var err = null;
+      if (status !== 0) {
+        response = {
+          body: getBody(),
+          statusCode: status,
+          method: method,
+          headers: {},
+          url: uri,
+          rawRequest: xhr
+        };
+        if (xhr.getAllResponseHeaders) {
+          //remember xhr can in fact be XDR for CORS in IE
+          response.headers = parseHeaders(xhr.getAllResponseHeaders());
+        }
+      } else {
+        err = new Error("Internal XMLHttpRequest Error");
+      }
+      return callback(err, response, response.body);
+    }
+    var xhr = options.xhr || null;
+    if (!xhr) {
+      if (options.cors || options.useXDR) {
+        xhr = new createXHR.XDomainRequest();
+      } else {
+        xhr = new createXHR.XMLHttpRequest();
+      }
+    }
+    var key;
+    var aborted;
+    var uri = xhr.url = options.uri || options.url;
+    var method = xhr.method = options.method || "GET";
+    var body = options.body || options.data;
+    var headers = xhr.headers = options.headers || {};
+    var sync = !!options.sync;
+    var isJson = false;
+    var timeoutTimer;
+    var failureResponse = {
+      body: undefined,
+      headers: {},
+      statusCode: 0,
+      method: method,
+      url: uri,
+      rawRequest: xhr
+    };
+    if ("json" in options && options.json !== false) {
+      isJson = true;
+      headers["accept"] || headers["Accept"] || (headers["Accept"] = "application/json"); //Don't override existing accept header declared by user
+
+      if (method !== "GET" && method !== "HEAD") {
+        headers["content-type"] || headers["Content-Type"] || (headers["Content-Type"] = "application/json"); //Don't override existing accept header declared by user
+
+        body = JSON.stringify(options.json === true ? body : options.json);
+      }
+    }
+    xhr.onreadystatechange = readystatechange;
+    xhr.onload = loadFunc;
+    xhr.onerror = errorFunc; // IE9 must have onprogress be set to a unique function.
+
+    xhr.onprogress = function () {// IE must die
+    };
+    xhr.onabort = function () {
+      aborted = true;
+    };
+    xhr.ontimeout = errorFunc;
+    xhr.open(method, uri, !sync, options.username, options.password); //has to be after open
+
+    if (!sync) {
+      xhr.withCredentials = !!options.withCredentials;
+    } // Cannot set timeout with sync request
+    // not setting timeout on the xhr object, because of old webkits etc. not handling that correctly
+    // both npm's request and jquery 1.x use this kind of timeout, so this is being consistent
+
+    if (!sync && options.timeout > 0) {
+      timeoutTimer = setTimeout(function () {
+        if (aborted) return;
+        aborted = true; //IE9 may still call readystatechange
+
+        xhr.abort("timeout");
+        var e = new Error("XMLHttpRequest timeout");
+        e.code = "ETIMEDOUT";
+        errorFunc(e);
+      }, options.timeout);
+    }
+    if (xhr.setRequestHeader) {
+      for (key in headers) {
+        if (headers.hasOwnProperty(key)) {
+          xhr.setRequestHeader(key, headers[key]);
+        }
+      }
+    } else if (options.headers && !isEmpty(options.headers)) {
+      throw new Error("Headers cannot be set on an XDomainRequest object");
+    }
+    if ("responseType" in options) {
+      xhr.responseType = options.responseType;
+    }
+    if ("beforeSend" in options && typeof options.beforeSend === "function") {
+      options.beforeSend(xhr);
+    } // Microsoft Edge browser sends "undefined" when send is called with undefined value.
+    // XMLHttpRequest spec says to pass null as body to indicate no body
+    // See https://github.com/naugtur/xhr/issues/100.
+
+    xhr.send(body || null);
+    return xhr;
+  }
+  function getXml(xhr) {
+    // xhr.responseXML will throw Exception "InvalidStateError" or "DOMException"
+    // See https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseXML.
+    try {
+      if (xhr.responseType === "document") {
+        return xhr.responseXML;
+      }
+      var firefoxBugTakenEffect = xhr.responseXML && xhr.responseXML.documentElement.nodeName === "parsererror";
+      if (xhr.responseType === "" && !firefoxBugTakenEffect) {
+        return xhr.responseXML;
+      }
+    } catch (e) {}
+    return null;
+  }
+  function noop() {}
+  lib.default = default_1;
+
+  /**
+   * @file text-track.js
+   */
+
+  /**
+   * Takes a webvtt file contents and parses it into cues
+   *
+   * @param {string} srcContent
+   *        webVTT file contents
+   *
+   * @param {TextTrack} track
+   *        TextTrack to add cues to. Cues come from the srcContent.
+   *
+   * @private
+   */
+  const parseCues = function (srcContent, track) {
+    const parser = new window.WebVTT.Parser(window, window.vttjs, window.WebVTT.StringDecoder());
+    const errors = [];
+    parser.oncue = function (cue) {
+      track.addCue(cue);
+    };
+    parser.onparsingerror = function (error) {
+      errors.push(error);
+    };
+    parser.onflush = function () {
+      track.trigger({
+        type: 'loadeddata',
+        target: track
+      });
+    };
+    parser.parse(srcContent);
+    if (errors.length > 0) {
+      if (window.console && window.console.groupCollapsed) {
+        window.console.groupCollapsed(`Text Track parsing errors for ${track.src}`);
+      }
+      errors.forEach(error => log.error(error));
+      if (window.console && window.console.groupEnd) {
+        window.console.groupEnd();
+      }
+    }
+    parser.flush();
+  };
+
+  /**
+   * Load a `TextTrack` from a specified url.
+   *
+   * @param {string} src
+   *        Url to load track from.
+   *
+   * @param {TextTrack} track
+   *        Track to add cues to. Comes from the content at the end of `url`.
+   *
+   * @private
+   */
+  const loadTrack = function (src, track) {
+    const opts = {
+      uri: src
+    };
+    const crossOrigin = isCrossOrigin(src);
+    if (crossOrigin) {
+      opts.cors = crossOrigin;
+    }
+    const withCredentials = track.tech_.crossOrigin() === 'use-credentials';
+    if (withCredentials) {
+      opts.withCredentials = withCredentials;
+    }
+    lib(opts, bind_(this, function (err, response, responseBody) {
+      if (err) {
+        return log.error(err, response);
+      }
+      track.loaded_ = true;
+
+      // Make sure that vttjs has loaded, otherwise, wait till it finished loading
+      // NOTE: this is only used for the alt/video.novtt.js build
+      if (typeof window.WebVTT !== 'function') {
+        if (track.tech_) {
+          // to prevent use before define eslint error, we define loadHandler
+          // as a let here
+          track.tech_.any(['vttjsloaded', 'vttjserror'], event => {
+            if (event.type === 'vttjserror') {
+              log.error(`vttjs failed to load, stopping trying to process ${track.src}`);
+              return;
+            }
+            return parseCues(responseBody, track);
+          });
+        }
+      } else {
+        parseCues(responseBody, track);
+      }
+    }));
+  };
+
+  /**
+   * A representation of a single `TextTrack`.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrack}
+   * @extends Track
+   */
+  class TextTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} options={}
+     *        Object of option names and values
+     *
+     * @param { import('../tech/tech').default } options.tech
+     *        A reference to the tech that owns this TextTrack.
+     *
+     * @param {TextTrack~Kind} [options.kind='subtitles']
+     *        A valid text track kind.
+     *
+     * @param {TextTrack~Mode} [options.mode='disabled']
+     *        A valid text track mode.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this TextTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {string} [options.srclang='']
+     *        A valid two character language code. An alternative, but deprioritized
+     *        version of `options.language`
+     *
+     * @param {string} [options.src]
+     *        A url to TextTrack cues.
+     *
+     * @param {boolean} [options.default]
+     *        If this track should default to on or off.
+     */
+    constructor(options = {}) {
+      if (!options.tech) {
+        throw new Error('A tech was not provided.');
+      }
+      const settings = merge(options, {
+        kind: TextTrackKind[options.kind] || 'subtitles',
+        language: options.language || options.srclang || ''
+      });
+      let mode = TextTrackMode[settings.mode] || 'disabled';
+      const default_ = settings.default;
+      if (settings.kind === 'metadata' || settings.kind === 'chapters') {
+        mode = 'hidden';
+      }
+      super(settings);
+      this.tech_ = settings.tech;
+      this.cues_ = [];
+      this.activeCues_ = [];
+      this.preload_ = this.tech_.preloadTextTracks !== false;
+      const cues = new TextTrackCueList(this.cues_);
+      const activeCues = new TextTrackCueList(this.activeCues_);
+      let changed = false;
+      this.timeupdateHandler = bind_(this, function (event = {}) {
+        if (this.tech_.isDisposed()) {
+          return;
+        }
+        if (!this.tech_.isReady_) {
+          if (event.type !== 'timeupdate') {
+            this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+          }
+          return;
+        }
+
+        // Accessing this.activeCues for the side-effects of updating itself
+        // due to its nature as a getter function. Do not remove or cues will
+        // stop updating!
+        // Use the setter to prevent deletion from uglify (pure_getters rule)
+        this.activeCues = this.activeCues;
+        if (changed) {
+          this.trigger('cuechange');
+          changed = false;
+        }
+        if (event.type !== 'timeupdate') {
+          this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+        }
+      });
+      const disposeHandler = () => {
+        this.stopTracking();
+      };
+      this.tech_.one('dispose', disposeHandler);
+      if (mode !== 'disabled') {
+        this.startTracking();
+      }
+      Object.defineProperties(this, {
+        /**
+         * @memberof TextTrack
+         * @member {boolean} default
+         *         If this track was set to be on or off by default. Cannot be changed after
+         *         creation.
+         * @instance
+         *
+         * @readonly
+         */
+        default: {
+          get() {
+            return default_;
+          },
+          set() {}
+        },
+        /**
+         * @memberof TextTrack
+         * @member {string} mode
+         *         Set the mode of this TextTrack to a valid {@link TextTrack~Mode}. Will
+         *         not be set if setting to an invalid mode.
+         * @instance
+         *
+         * @fires TextTrack#modechange
+         */
+        mode: {
+          get() {
+            return mode;
+          },
+          set(newMode) {
+            if (!TextTrackMode[newMode]) {
+              return;
+            }
+            if (mode === newMode) {
+              return;
+            }
+            mode = newMode;
+            if (!this.preload_ && mode !== 'disabled' && this.cues.length === 0) {
+              // On-demand load.
+              loadTrack(this.src, this);
+            }
+            this.stopTracking();
+            if (mode !== 'disabled') {
+              this.startTracking();
+            }
+            /**
+             * An event that fires when mode changes on this track. This allows
+             * the TextTrackList that holds this track to act accordingly.
+             *
+             * > Note: This is not part of the spec!
+             *
+             * @event TextTrack#modechange
+             * @type {Event}
+             */
+            this.trigger('modechange');
+          }
+        },
+        /**
+         * @memberof TextTrack
+         * @member {TextTrackCueList} cues
+         *         The text track cue list for this TextTrack.
+         * @instance
+         */
+        cues: {
+          get() {
+            if (!this.loaded_) {
+              return null;
+            }
+            return cues;
+          },
+          set() {}
+        },
+        /**
+         * @memberof TextTrack
+         * @member {TextTrackCueList} activeCues
+         *         The list text track cues that are currently active for this TextTrack.
+         * @instance
+         */
+        activeCues: {
+          get() {
+            if (!this.loaded_) {
+              return null;
+            }
+
+            // nothing to do
+            if (this.cues.length === 0) {
+              return activeCues;
+            }
+            const ct = this.tech_.currentTime();
+            const active = [];
+            for (let i = 0, l = this.cues.length; i < l; i++) {
+              const cue = this.cues[i];
+              if (cue.startTime <= ct && cue.endTime >= ct) {
+                active.push(cue);
+              }
+            }
+            changed = false;
+            if (active.length !== this.activeCues_.length) {
+              changed = true;
+            } else {
+              for (let i = 0; i < active.length; i++) {
+                if (this.activeCues_.indexOf(active[i]) === -1) {
+                  changed = true;
+                }
+              }
+            }
+            this.activeCues_ = active;
+            activeCues.setCues_(this.activeCues_);
+            return activeCues;
+          },
+          // /!\ Keep this setter empty (see the timeupdate handler above)
+          set() {}
+        }
+      });
+      if (settings.src) {
+        this.src = settings.src;
+        if (!this.preload_) {
+          // Tracks will load on-demand.
+          // Act like we're loaded for other purposes.
+          this.loaded_ = true;
+        }
+        if (this.preload_ || settings.kind !== 'subtitles' && settings.kind !== 'captions') {
+          loadTrack(this.src, this);
+        }
+      } else {
+        this.loaded_ = true;
+      }
+    }
+    startTracking() {
+      // More precise cues based on requestVideoFrameCallback with a requestAnimationFram fallback
+      this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+      // Also listen to timeupdate in case rVFC/rAF stops (window in background, audio in video el)
+      this.tech_.on('timeupdate', this.timeupdateHandler);
+    }
+    stopTracking() {
+      if (this.rvf_) {
+        this.tech_.cancelVideoFrameCallback(this.rvf_);
+        this.rvf_ = undefined;
+      }
+      this.tech_.off('timeupdate', this.timeupdateHandler);
+    }
+
+    /**
+     * Add a cue to the internal list of cues.
+     *
+     * @param {TextTrack~Cue} cue
+     *        The cue to add to our internal list
+     */
+    addCue(originalCue) {
+      let cue = originalCue;
+
+      // Testing if the cue is a VTTCue in a way that survives minification
+      if (!('getCueAsHTML' in cue)) {
+        cue = new window.vttjs.VTTCue(originalCue.startTime, originalCue.endTime, originalCue.text);
+        for (const prop in originalCue) {
+          if (!(prop in cue)) {
+            cue[prop] = originalCue[prop];
+          }
+        }
+
+        // make sure that `id` is copied over
+        cue.id = originalCue.id;
+        cue.originalCue_ = originalCue;
+      }
+      const tracks = this.tech_.textTracks();
+      for (let i = 0; i < tracks.length; i++) {
+        if (tracks[i] !== this) {
+          tracks[i].removeCue(cue);
+        }
+      }
+      this.cues_.push(cue);
+      this.cues.setCues_(this.cues_);
+    }
+
+    /**
+     * Remove a cue from our internal list
+     *
+     * @param {TextTrack~Cue} removeCue
+     *        The cue to remove from our internal list
+     */
+    removeCue(removeCue) {
+      let i = this.cues_.length;
+      while (i--) {
+        const cue = this.cues_[i];
+        if (cue === removeCue || cue.originalCue_ && cue.originalCue_ === removeCue) {
+          this.cues_.splice(i, 1);
+          this.cues.setCues_(this.cues_);
+          break;
+        }
+      }
+    }
+  }
+
+  /**
+   * cuechange - One or more cues in the track have become active or stopped being active.
+   * @protected
+   */
+  TextTrack.prototype.allowedEvents_ = {
+    cuechange: 'cuechange'
+  };
+
+  /**
+   * A representation of a single `AudioTrack`. If it is part of an {@link AudioTrackList}
+   * only one `AudioTrack` in the list will be enabled at a time.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotrack}
+   * @extends Track
+   */
+  class AudioTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {AudioTrack~Kind} [options.kind='']
+     *        A valid audio track kind
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {boolean} [options.enabled]
+     *        If this track is the one that is currently playing. If this track is part of
+     *        an {@link AudioTrackList}, only one {@link AudioTrack} will be enabled.
+     */
+    constructor(options = {}) {
+      const settings = merge(options, {
+        kind: AudioTrackKind[options.kind] || ''
+      });
+      super(settings);
+      let enabled = false;
+
+      /**
+       * @memberof AudioTrack
+       * @member {boolean} enabled
+       *         If this `AudioTrack` is enabled or not. When setting this will
+       *         fire {@link AudioTrack#enabledchange} if the state of enabled is changed.
+       * @instance
+       *
+       * @fires VideoTrack#selectedchange
+       */
+      Object.defineProperty(this, 'enabled', {
+        get() {
+          return enabled;
+        },
+        set(newEnabled) {
+          // an invalid or unchanged value
+          if (typeof newEnabled !== 'boolean' || newEnabled === enabled) {
+            return;
+          }
+          enabled = newEnabled;
+
+          /**
+           * An event that fires when enabled changes on this track. This allows
+           * the AudioTrackList that holds this track to act accordingly.
+           *
+           * > Note: This is not part of the spec! Native tracks will do
+           *         this internally without an event.
+           *
+           * @event AudioTrack#enabledchange
+           * @type {Event}
+           */
+          this.trigger('enabledchange');
+        }
+      });
+
+      // if the user sets this track to selected then
+      // set selected to that true value otherwise
+      // we keep it false
+      if (settings.enabled) {
+        this.enabled = settings.enabled;
+      }
+      this.loaded_ = true;
+    }
+  }
+
+  /**
+   * A representation of a single `VideoTrack`.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotrack}
+   * @extends Track
+   */
+  class VideoTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {string} [options.kind='']
+     *        A valid {@link VideoTrack~Kind}
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {boolean} [options.selected]
+     *        If this track is the one that is currently playing.
+     */
+    constructor(options = {}) {
+      const settings = merge(options, {
+        kind: VideoTrackKind[options.kind] || ''
+      });
+      super(settings);
+      let selected = false;
+
+      /**
+       * @memberof VideoTrack
+       * @member {boolean} selected
+       *         If this `VideoTrack` is selected or not. When setting this will
+       *         fire {@link VideoTrack#selectedchange} if the state of selected changed.
+       * @instance
+       *
+       * @fires VideoTrack#selectedchange
+       */
+      Object.defineProperty(this, 'selected', {
+        get() {
+          return selected;
+        },
+        set(newSelected) {
+          // an invalid or unchanged value
+          if (typeof newSelected !== 'boolean' || newSelected === selected) {
+            return;
+          }
+          selected = newSelected;
+
+          /**
+           * An event that fires when selected changes on this track. This allows
+           * the VideoTrackList that holds this track to act accordingly.
+           *
+           * > Note: This is not part of the spec! Native tracks will do
+           *         this internally without an event.
+           *
+           * @event VideoTrack#selectedchange
+           * @type {Event}
+           */
+          this.trigger('selectedchange');
+        }
+      });
+
+      // if the user sets this track to selected then
+      // set selected to that true value otherwise
+      // we keep it false
+      if (settings.selected) {
+        this.selected = settings.selected;
+      }
+    }
+  }
+
+  /**
+   * @file html-track-element.js
+   */
+
+  /**
+   * A single track represented in the DOM.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#htmltrackelement}
+   * @extends EventTarget
+   */
+  class HTMLTrackElement extends EventTarget {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} options={}
+     *        Object of option names and values
+     *
+     * @param { import('../tech/tech').default } options.tech
+     *        A reference to the tech that owns this HTMLTrackElement.
+     *
+     * @param {TextTrack~Kind} [options.kind='subtitles']
+     *        A valid text track kind.
+     *
+     * @param {TextTrack~Mode} [options.mode='disabled']
+     *        A valid text track mode.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this TextTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {string} [options.srclang='']
+     *        A valid two character language code. An alternative, but deprioritized
+     *        version of `options.language`
+     *
+     * @param {string} [options.src]
+     *        A url to TextTrack cues.
+     *
+     * @param {boolean} [options.default]
+     *        If this track should default to on or off.
+     */
+    constructor(options = {}) {
+      super();
+      let readyState;
+      const track = new TextTrack(options);
+      this.kind = track.kind;
+      this.src = track.src;
+      this.srclang = track.language;
+      this.label = track.label;
+      this.default = track.default;
+      Object.defineProperties(this, {
+        /**
+         * @memberof HTMLTrackElement
+         * @member {HTMLTrackElement~ReadyState} readyState
+         *         The current ready state of the track element.
+         * @instance
+         */
+        readyState: {
+          get() {
+            return readyState;
+          }
+        },
+        /**
+         * @memberof HTMLTrackElement
+         * @member {TextTrack} track
+         *         The underlying TextTrack object.
+         * @instance
+         *
+         */
+        track: {
+          get() {
+            return track;
+          }
+        }
+      });
+      readyState = HTMLTrackElement.NONE;
+
+      /**
+       * @listens TextTrack#loadeddata
+       * @fires HTMLTrackElement#load
+       */
+      track.addEventListener('loadeddata', () => {
+        readyState = HTMLTrackElement.LOADED;
+        this.trigger({
+          type: 'load',
+          target: this
+        });
+      });
+    }
+  }
+
+  /**
+   * @protected
+   */
+  HTMLTrackElement.prototype.allowedEvents_ = {
+    load: 'load'
+  };
+
+  /**
+   * The text track not loaded state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.NONE = 0;
+
+  /**
+   * The text track loading state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.LOADING = 1;
+
+  /**
+   * The text track loaded state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.LOADED = 2;
+
+  /**
+   * The text track failed to load state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.ERROR = 3;
+
+  /*
+   * This file contains all track properties that are used in
+   * player.js, tech.js, html5.js and possibly other techs in the future.
+   */
+
+  const NORMAL = {
+    audio: {
+      ListClass: AudioTrackList,
+      TrackClass: AudioTrack,
+      capitalName: 'Audio'
+    },
+    video: {
+      ListClass: VideoTrackList,
+      TrackClass: VideoTrack,
+      capitalName: 'Video'
+    },
+    text: {
+      ListClass: TextTrackList,
+      TrackClass: TextTrack,
+      capitalName: 'Text'
+    }
+  };
+  Object.keys(NORMAL).forEach(function (type) {
+    NORMAL[type].getterName = `${type}Tracks`;
+    NORMAL[type].privateName = `${type}Tracks_`;
+  });
+  const REMOTE = {
+    remoteText: {
+      ListClass: TextTrackList,
+      TrackClass: TextTrack,
+      capitalName: 'RemoteText',
+      getterName: 'remoteTextTracks',
+      privateName: 'remoteTextTracks_'
+    },
+    remoteTextEl: {
+      ListClass: HtmlTrackElementList,
+      TrackClass: HTMLTrackElement,
+      capitalName: 'RemoteTextTrackEls',
+      getterName: 'remoteTextTrackEls',
+      privateName: 'remoteTextTrackEls_'
+    }
+  };
+  const ALL = Object.assign({}, NORMAL, REMOTE);
+  REMOTE.names = Object.keys(REMOTE);
+  NORMAL.names = Object.keys(NORMAL);
+  ALL.names = [].concat(REMOTE.names).concat(NORMAL.names);
+
+  var vtt = {};
+
+  /**
+   * @file tech.js
+   */
+
+  /**
+   * An Object containing a structure like: `{src: 'url', type: 'mimetype'}` or string
+   * that just contains the src url alone.
+   * * `var SourceObject = {src: 'http://ex.com/video.mp4', type: 'video/mp4'};`
+     * `var SourceString = 'http://example.com/some-video.mp4';`
+   *
+   * @typedef {Object|string} SourceObject
+   *
+   * @property {string} src
+   *           The url to the source
+   *
+   * @property {string} type
+   *           The mime type of the source
+   */
+
+  /**
+   * A function used by {@link Tech} to create a new {@link TextTrack}.
+   *
+   * @private
+   *
+   * @param {Tech} self
+   *        An instance of the Tech class.
+   *
+   * @param {string} kind
+   *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+   *
+   * @param {string} [label]
+   *        Label to identify the text track
+   *
+   * @param {string} [language]
+   *        Two letter language abbreviation
+   *
+   * @param {Object} [options={}]
+   *        An object with additional text track options
+   *
+   * @return {TextTrack}
+   *          The text track that was created.
+   */
+  function createTrackHelper(self, kind, label, language, options = {}) {
+    const tracks = self.textTracks();
+    options.kind = kind;
+    if (label) {
+      options.label = label;
+    }
+    if (language) {
+      options.language = language;
+    }
+    options.tech = self;
+    const track = new ALL.text.TrackClass(options);
+    tracks.addTrack(track);
+    return track;
+  }
+
+  /**
+   * This is the base class for media playback technology controllers, such as
+   * {@link HTML5}
+   *
+   * @extends Component
+   */
+  class Tech extends Component {
+    /**
+    * Create an instance of this Tech.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    *
+    * @param {Function} [ready]
+    *        Callback function to call when the `HTML5` Tech is ready.
+    */
+    constructor(options = {}, ready = function () {}) {
+      // we don't want the tech to report user activity automatically.
+      // This is done manually in addControlsListeners
+      options.reportTouchActivity = false;
+      super(null, options, ready);
+      this.onDurationChange_ = e => this.onDurationChange(e);
+      this.trackProgress_ = e => this.trackProgress(e);
+      this.trackCurrentTime_ = e => this.trackCurrentTime(e);
+      this.stopTrackingCurrentTime_ = e => this.stopTrackingCurrentTime(e);
+      this.disposeSourceHandler_ = e => this.disposeSourceHandler(e);
+      this.queuedHanders_ = new Set();
+
+      // keep track of whether the current source has played at all to
+      // implement a very limited played()
+      this.hasStarted_ = false;
+      this.on('playing', function () {
+        this.hasStarted_ = true;
+      });
+      this.on('loadstart', function () {
+        this.hasStarted_ = false;
+      });
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        if (options && options[props.getterName]) {
+          this[props.privateName] = options[props.getterName];
+        }
+      });
+
+      // Manually track progress in cases where the browser/tech doesn't report it.
+      if (!this.featuresProgressEvents) {
+        this.manualProgressOn();
+      }
+
+      // Manually track timeupdates in cases where the browser/tech doesn't report it.
+      if (!this.featuresTimeupdateEvents) {
+        this.manualTimeUpdatesOn();
+      }
+      ['Text', 'Audio', 'Video'].forEach(track => {
+        if (options[`native${track}Tracks`] === false) {
+          this[`featuresNative${track}Tracks`] = false;
+        }
+      });
+      if (options.nativeCaptions === false || options.nativeTextTracks === false) {
+        this.featuresNativeTextTracks = false;
+      } else if (options.nativeCaptions === true || options.nativeTextTracks === true) {
+        this.featuresNativeTextTracks = true;
+      }
+      if (!this.featuresNativeTextTracks) {
+        this.emulateTextTracks();
+      }
+      this.preloadTextTracks = options.preloadTextTracks !== false;
+      this.autoRemoteTextTracks_ = new ALL.text.ListClass();
+      this.initTrackListeners();
+
+      // Turn on component tap events only if not using native controls
+      if (!options.nativeControlsForTouch) {
+        this.emitTapEvents();
+      }
+      if (this.constructor) {
+        this.name_ = this.constructor.name || 'Unknown Tech';
+      }
+    }
+
+    /**
+     * A special function to trigger source set in a way that will allow player
+     * to re-trigger if the player or tech are not ready yet.
+     *
+     * @fires Tech#sourceset
+     * @param {string} src The source string at the time of the source changing.
+     */
+    triggerSourceset(src) {
+      if (!this.isReady_) {
+        // on initial ready we have to trigger source set
+        // 1ms after ready so that player can watch for it.
+        this.one('ready', () => this.setTimeout(() => this.triggerSourceset(src), 1));
+      }
+
+      /**
+       * Fired when the source is set on the tech causing the media element
+       * to reload.
+       *
+       * @see {@link Player#event:sourceset}
+       * @event Tech#sourceset
+       * @type {Event}
+       */
+      this.trigger({
+        src,
+        type: 'sourceset'
+      });
+    }
+
+    /* Fallbacks for unsupported event types
+    ================================================================================ */
+
+    /**
+     * Polyfill the `progress` event for browsers that don't support it natively.
+     *
+     * @see {@link Tech#trackProgress}
+     */
+    manualProgressOn() {
+      this.on('durationchange', this.onDurationChange_);
+      this.manualProgress = true;
+
+      // Trigger progress watching when a source begins loading
+      this.one('ready', this.trackProgress_);
+    }
+
+    /**
+     * Turn off the polyfill for `progress` events that was created in
+     * {@link Tech#manualProgressOn}
+     */
+    manualProgressOff() {
+      this.manualProgress = false;
+      this.stopTrackingProgress();
+      this.off('durationchange', this.onDurationChange_);
+    }
+
+    /**
+     * This is used to trigger a `progress` event when the buffered percent changes. It
+     * sets an interval function that will be called every 500 milliseconds to check if the
+     * buffer end percent has changed.
+     *
+     * > This function is called by {@link Tech#manualProgressOn}
+     *
+     * @param {Event} event
+     *        The `ready` event that caused this to run.
+     *
+     * @listens Tech#ready
+     * @fires Tech#progress
+     */
+    trackProgress(event) {
+      this.stopTrackingProgress();
+      this.progressInterval = this.setInterval(bind_(this, function () {
+        // Don't trigger unless buffered amount is greater than last time
+
+        const numBufferedPercent = this.bufferedPercent();
+        if (this.bufferedPercent_ !== numBufferedPercent) {
+          /**
+           * See {@link Player#progress}
+           *
+           * @event Tech#progress
+           * @type {Event}
+           */
+          this.trigger('progress');
+        }
+        this.bufferedPercent_ = numBufferedPercent;
+        if (numBufferedPercent === 1) {
+          this.stopTrackingProgress();
+        }
+      }), 500);
+    }
+
+    /**
+     * Update our internal duration on a `durationchange` event by calling
+     * {@link Tech#duration}.
+     *
+     * @param {Event} event
+     *        The `durationchange` event that caused this to run.
+     *
+     * @listens Tech#durationchange
+     */
+    onDurationChange(event) {
+      this.duration_ = this.duration();
+    }
+
+    /**
+     * Get and create a `TimeRange` object for buffering.
+     *
+     * @return { import('../utils/time').TimeRange }
+     *         The time range object that was created.
+     */
+    buffered() {
+      return createTimeRanges(0, 0);
+    }
+
+    /**
+     * Get the percentage of the current video that is currently buffered.
+     *
+     * @return {number}
+     *         A number from 0 to 1 that represents the decimal percentage of the
+     *         video that is buffered.
+     *
+     */
+    bufferedPercent() {
+      return bufferedPercent(this.buffered(), this.duration_);
+    }
+
+    /**
+     * Turn off the polyfill for `progress` events that was created in
+     * {@link Tech#manualProgressOn}
+     * Stop manually tracking progress events by clearing the interval that was set in
+     * {@link Tech#trackProgress}.
+     */
+    stopTrackingProgress() {
+      this.clearInterval(this.progressInterval);
+    }
+
+    /**
+     * Polyfill the `timeupdate` event for browsers that don't support it.
+     *
+     * @see {@link Tech#trackCurrentTime}
+     */
+    manualTimeUpdatesOn() {
+      this.manualTimeUpdates = true;
+      this.on('play', this.trackCurrentTime_);
+      this.on('pause', this.stopTrackingCurrentTime_);
+    }
+
+    /**
+     * Turn off the polyfill for `timeupdate` events that was created in
+     * {@link Tech#manualTimeUpdatesOn}
+     */
+    manualTimeUpdatesOff() {
+      this.manualTimeUpdates = false;
+      this.stopTrackingCurrentTime();
+      this.off('play', this.trackCurrentTime_);
+      this.off('pause', this.stopTrackingCurrentTime_);
+    }
+
+    /**
+     * Sets up an interval function to track current time and trigger `timeupdate` every
+     * 250 milliseconds.
+     *
+     * @listens Tech#play
+     * @triggers Tech#timeupdate
+     */
+    trackCurrentTime() {
+      if (this.currentTimeInterval) {
+        this.stopTrackingCurrentTime();
+      }
+      this.currentTimeInterval = this.setInterval(function () {
+        /**
+         * Triggered at an interval of 250ms to indicated that time is passing in the video.
+         *
+         * @event Tech#timeupdate
+         * @type {Event}
+         */
+        this.trigger({
+          type: 'timeupdate',
+          target: this,
+          manuallyTriggered: true
+        });
+
+        // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
+      }, 250);
+    }
+
+    /**
+     * Stop the interval function created in {@link Tech#trackCurrentTime} so that the
+     * `timeupdate` event is no longer triggered.
+     *
+     * @listens {Tech#pause}
+     */
+    stopTrackingCurrentTime() {
+      this.clearInterval(this.currentTimeInterval);
+
+      // #1002 - if the video ends right before the next timeupdate would happen,
+      // the progress bar won't make it all the way to the end
+      this.trigger({
+        type: 'timeupdate',
+        target: this,
+        manuallyTriggered: true
+      });
+    }
+
+    /**
+     * Turn off all event polyfills, clear the `Tech`s {@link AudioTrackList},
+     * {@link VideoTrackList}, and {@link TextTrackList}, and dispose of this Tech.
+     *
+     * @fires Component#dispose
+     */
+    dispose() {
+      // clear out all tracks because we can't reuse them between techs
+      this.clearTracks(NORMAL.names);
+
+      // Turn off any manual progress or timeupdate tracking
+      if (this.manualProgress) {
+        this.manualProgressOff();
+      }
+      if (this.manualTimeUpdates) {
+        this.manualTimeUpdatesOff();
+      }
+      super.dispose();
+    }
+
+    /**
+     * Clear out a single `TrackList` or an array of `TrackLists` given their names.
+     *
+     * > Note: Techs without source handlers should call this between sources for `video`
+     *         & `audio` tracks. You don't want to use them between tracks!
+     *
+     * @param {string[]|string} types
+     *        TrackList names to clear, valid names are `video`, `audio`, and
+     *        `text`.
+     */
+    clearTracks(types) {
+      types = [].concat(types);
+      // clear out all tracks because we can't reuse them between techs
+      types.forEach(type => {
+        const list = this[`${type}Tracks`]() || [];
+        let i = list.length;
+        while (i--) {
+          const track = list[i];
+          if (type === 'text') {
+            this.removeRemoteTextTrack(track);
+          }
+          list.removeTrack(track);
+        }
+      });
+    }
+
+    /**
+     * Remove any TextTracks added via addRemoteTextTrack that are
+     * flagged for automatic garbage collection
+     */
+    cleanupAutoTextTracks() {
+      const list = this.autoRemoteTextTracks_ || [];
+      let i = list.length;
+      while (i--) {
+        const track = list[i];
+        this.removeRemoteTextTrack(track);
+      }
+    }
+
+    /**
+     * Reset the tech, which will removes all sources and reset the internal readyState.
+     *
+     * @abstract
+     */
+    reset() {}
+
+    /**
+     * Get the value of `crossOrigin` from the tech.
+     *
+     * @abstract
+     *
+     * @see {Html5#crossOrigin}
+     */
+    crossOrigin() {}
+
+    /**
+     * Set the value of `crossOrigin` on the tech.
+     *
+     * @abstract
+     *
+     * @param {string} crossOrigin the crossOrigin value
+     * @see {Html5#setCrossOrigin}
+     */
+    setCrossOrigin() {}
+
+    /**
+     * Get or set an error on the Tech.
+     *
+     * @param {MediaError} [err]
+     *        Error to set on the Tech
+     *
+     * @return {MediaError|null}
+     *         The current error object on the tech, or null if there isn't one.
+     */
+    error(err) {
+      if (err !== undefined) {
+        this.error_ = new MediaError(err);
+        this.trigger('error');
+      }
+      return this.error_;
+    }
+
+    /**
+     * Returns the `TimeRange`s that have been played through for the current source.
+     *
+     * > NOTE: This implementation is incomplete. It does not track the played `TimeRange`.
+     *         It only checks whether the source has played at all or not.
+     *
+     * @return { import('../utils/time').TimeRange }
+     *         - A single time range if this video has played
+     *         - An empty set of ranges if not.
+     */
+    played() {
+      if (this.hasStarted_) {
+        return createTimeRanges(0, 0);
+      }
+      return createTimeRanges();
+    }
+
+    /**
+     * Start playback
+     *
+     * @abstract
+     *
+     * @see {Html5#play}
+     */
+    play() {}
+
+    /**
+     * Set whether we are scrubbing or not
+     *
+     * @abstract
+     * @param {boolean} _isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     *
+     * @see {Html5#setScrubbing}
+     */
+    setScrubbing(_isScrubbing) {}
+
+    /**
+     * Get whether we are scrubbing or not
+     *
+     * @abstract
+     *
+     * @see {Html5#scrubbing}
+     */
+    scrubbing() {}
+
+    /**
+     * Causes a manual time update to occur if {@link Tech#manualTimeUpdatesOn} was
+     * previously called.
+     *
+     * @param {number} _seconds
+     *        Set the current time of the media to this.
+     * @fires Tech#timeupdate
+     */
+    setCurrentTime(_seconds) {
+      // improve the accuracy of manual timeupdates
+      if (this.manualTimeUpdates) {
+        /**
+         * A manual `timeupdate` event.
+         *
+         * @event Tech#timeupdate
+         * @type {Event}
+         */
+        this.trigger({
+          type: 'timeupdate',
+          target: this,
+          manuallyTriggered: true
+        });
+      }
+    }
+
+    /**
+     * Turn on listeners for {@link VideoTrackList}, {@link {AudioTrackList}, and
+     * {@link TextTrackList} events.
+     *
+     * This adds {@link EventTarget~EventListeners} for `addtrack`, and  `removetrack`.
+     *
+     * @fires Tech#audiotrackchange
+     * @fires Tech#videotrackchange
+     * @fires Tech#texttrackchange
+     */
+    initTrackListeners() {
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link AudioTrackList}
+        *
+        * @event Tech#audiotrackchange
+        * @type {Event}
+        */
+
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link VideoTrackList}
+        *
+        * @event Tech#videotrackchange
+        * @type {Event}
+        */
+
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link TextTrackList}
+        *
+        * @event Tech#texttrackchange
+        * @type {Event}
+        */
+      NORMAL.names.forEach(name => {
+        const props = NORMAL[name];
+        const trackListChanges = () => {
+          this.trigger(`${name}trackchange`);
+        };
+        const tracks = this[props.getterName]();
+        tracks.addEventListener('removetrack', trackListChanges);
+        tracks.addEventListener('addtrack', trackListChanges);
+        this.on('dispose', () => {
+          tracks.removeEventListener('removetrack', trackListChanges);
+          tracks.removeEventListener('addtrack', trackListChanges);
+        });
+      });
+    }
+
+    /**
+     * Emulate TextTracks using vtt.js if necessary
+     *
+     * @fires Tech#vttjsloaded
+     * @fires Tech#vttjserror
+     */
+    addWebVttScript_() {
+      if (window.WebVTT) {
+        return;
+      }
+
+      // Initially, Tech.el_ is a child of a dummy-div wait until the Component system
+      // signals that the Tech is ready at which point Tech.el_ is part of the DOM
+      // before inserting the WebVTT script
+      if (document.body.contains(this.el())) {
+        // load via require if available and vtt.js script location was not passed in
+        // as an option. novtt builds will turn the above require call into an empty object
+        // which will cause this if check to always fail.
+        if (!this.options_['vtt.js'] && isPlain(vtt) && Object.keys(vtt).length > 0) {
+          this.trigger('vttjsloaded');
+          return;
+        }
+
+        // load vtt.js via the script location option or the cdn of no location was
+        // passed in
+        const script = document.createElement('script');
+        script.src = this.options_['vtt.js'] || 'https://vjs.zencdn.net/vttjs/0.14.1/vtt.min.js';
+        script.onload = () => {
+          /**
+           * Fired when vtt.js is loaded.
+           *
+           * @event Tech#vttjsloaded
+           * @type {Event}
+           */
+          this.trigger('vttjsloaded');
+        };
+        script.onerror = () => {
+          /**
+           * Fired when vtt.js was not loaded due to an error
+           *
+           * @event Tech#vttjsloaded
+           * @type {Event}
+           */
+          this.trigger('vttjserror');
+        };
+        this.on('dispose', () => {
+          script.onload = null;
+          script.onerror = null;
+        });
+        // but have not loaded yet and we set it to true before the inject so that
+        // we don't overwrite the injected window.WebVTT if it loads right away
+        window.WebVTT = true;
+        this.el().parentNode.appendChild(script);
+      } else {
+        this.ready(this.addWebVttScript_);
+      }
+    }
+
+    /**
+     * Emulate texttracks
+     *
+     */
+    emulateTextTracks() {
+      const tracks = this.textTracks();
+      const remoteTracks = this.remoteTextTracks();
+      const handleAddTrack = e => tracks.addTrack(e.track);
+      const handleRemoveTrack = e => tracks.removeTrack(e.track);
+      remoteTracks.on('addtrack', handleAddTrack);
+      remoteTracks.on('removetrack', handleRemoveTrack);
+      this.addWebVttScript_();
+      const updateDisplay = () => this.trigger('texttrackchange');
+      const textTracksChanges = () => {
+        updateDisplay();
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+          track.removeEventListener('cuechange', updateDisplay);
+          if (track.mode === 'showing') {
+            track.addEventListener('cuechange', updateDisplay);
+          }
+        }
+      };
+      textTracksChanges();
+      tracks.addEventListener('change', textTracksChanges);
+      tracks.addEventListener('addtrack', textTracksChanges);
+      tracks.addEventListener('removetrack', textTracksChanges);
+      this.on('dispose', function () {
+        remoteTracks.off('addtrack', handleAddTrack);
+        remoteTracks.off('removetrack', handleRemoveTrack);
+        tracks.removeEventListener('change', textTracksChanges);
+        tracks.removeEventListener('addtrack', textTracksChanges);
+        tracks.removeEventListener('removetrack', textTracksChanges);
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+          track.removeEventListener('cuechange', updateDisplay);
+        }
+      });
+    }
+
+    /**
+     * Create and returns a remote {@link TextTrack} object.
+     *
+     * @param {string} kind
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+     *
+     * @param {string} [label]
+     *        Label to identify the text track
+     *
+     * @param {string} [language]
+     *        Two letter language abbreviation
+     *
+     * @return {TextTrack}
+     *         The TextTrack that gets created.
+     */
+    addTextTrack(kind, label, language) {
+      if (!kind) {
+        throw new Error('TextTrack kind is required but was not provided');
+      }
+      return createTrackHelper(this, kind, label, language);
+    }
+
+    /**
+     * Create an emulated TextTrack for use by addRemoteTextTrack
+     *
+     * This is intended to be overridden by classes that inherit from
+     * Tech in order to create native or custom TextTracks.
+     *
+     * @param {Object} options
+     *        The object should contain the options to initialize the TextTrack with.
+     *
+     * @param {string} [options.kind]
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+     *
+     * @param {string} [options.label].
+     *        Label to identify the text track
+     *
+     * @param {string} [options.language]
+     *        Two letter language abbreviation.
+     *
+     * @return {HTMLTrackElement}
+     *         The track element that gets created.
+     */
+    createRemoteTextTrack(options) {
+      const track = merge(options, {
+        tech: this
+      });
+      return new REMOTE.remoteTextEl.TrackClass(track);
+    }
+
+    /**
+     * Creates a remote text track object and returns an html track element.
+     *
+     * > Note: This can be an emulated {@link HTMLTrackElement} or a native one.
+     *
+     * @param {Object} options
+     *        See {@link Tech#createRemoteTextTrack} for more detailed properties.
+     *
+     * @param {boolean} [manualCleanup=false]
+     *        - When false: the TextTrack will be automatically removed from the video
+     *          element whenever the source changes
+     *        - When True: The TextTrack will have to be cleaned up manually
+     *
+     * @return {HTMLTrackElement}
+     *         An Html Track Element.
+     *
+     */
+    addRemoteTextTrack(options = {}, manualCleanup) {
+      const htmlTrackElement = this.createRemoteTextTrack(options);
+      if (typeof manualCleanup !== 'boolean') {
+        manualCleanup = false;
+      }
+
+      // store HTMLTrackElement and TextTrack to remote list
+      this.remoteTextTrackEls().addTrackElement_(htmlTrackElement);
+      this.remoteTextTracks().addTrack(htmlTrackElement.track);
+      if (manualCleanup === false) {
+        // create the TextTrackList if it doesn't exist
+        this.ready(() => this.autoRemoteTextTracks_.addTrack(htmlTrackElement.track));
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Remove a remote text track from the remote `TextTrackList`.
+     *
+     * @param {TextTrack} track
+     *        `TextTrack` to remove from the `TextTrackList`
+     */
+    removeRemoteTextTrack(track) {
+      const trackElement = this.remoteTextTrackEls().getTrackElementByTrack_(track);
+
+      // remove HTMLTrackElement and TextTrack from remote list
+      this.remoteTextTrackEls().removeTrackElement_(trackElement);
+      this.remoteTextTracks().removeTrack(track);
+      this.autoRemoteTextTracks_.removeTrack(track);
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object}
+     *         An object with supported media playback quality metrics
+     *
+     * @abstract
+     */
+    getVideoPlaybackQuality() {
+      return {};
+    }
+
+    /**
+     * Attempt to create a floating video window always on top of other windows
+     * so that users may continue consuming media while they interact with other
+     * content sites, or applications on their device.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @return {Promise|undefined}
+     *         A promise with a Picture-in-Picture window if the browser supports
+     *         Promises (or one was passed in as an option). It returns undefined
+     *         otherwise.
+     *
+     * @abstract
+     */
+    requestPictureInPicture() {
+      return Promise.reject();
+    }
+
+    /**
+     * A method to check for the value of the 'disablePictureInPicture' <video> property.
+     * Defaults to true, as it should be considered disabled if the tech does not support pip
+     *
+     * @abstract
+     */
+    disablePictureInPicture() {
+      return true;
+    }
+
+    /**
+     * A method to set or unset the 'disablePictureInPicture' <video> property.
+     *
+     * @abstract
+     */
+    setDisablePictureInPicture() {}
+
+    /**
+     * A fallback implementation of requestVideoFrameCallback using requestAnimationFrame
+     *
+     * @param {function} cb
+     * @return {number} request id
+     */
+    requestVideoFrameCallback(cb) {
+      const id = newGUID();
+      if (!this.isReady_ || this.paused()) {
+        this.queuedHanders_.add(id);
+        this.one('playing', () => {
+          if (this.queuedHanders_.has(id)) {
+            this.queuedHanders_.delete(id);
+            cb();
+          }
+        });
+      } else {
+        this.requestNamedAnimationFrame(id, cb);
+      }
+      return id;
+    }
+
+    /**
+     * A fallback implementation of cancelVideoFrameCallback
+     *
+     * @param {number} id id of callback to be cancelled
+     */
+    cancelVideoFrameCallback(id) {
+      if (this.queuedHanders_.has(id)) {
+        this.queuedHanders_.delete(id);
+      } else {
+        this.cancelNamedAnimationFrame(id);
+      }
+    }
+
+    /**
+     * A method to set a poster from a `Tech`.
+     *
+     * @abstract
+     */
+    setPoster() {}
+
+    /**
+     * A method to check for the presence of the 'playsinline' <video> attribute.
+     *
+     * @abstract
+     */
+    playsinline() {}
+
+    /**
+     * A method to set or unset the 'playsinline' <video> attribute.
+     *
+     * @abstract
+     */
+    setPlaysinline() {}
+
+    /**
+     * Attempt to force override of native audio tracks.
+     *
+     * @param {boolean} override - If set to true native audio will be overridden,
+     * otherwise native audio will potentially be used.
+     *
+     * @abstract
+     */
+    overrideNativeAudioTracks(override) {}
+
+    /**
+     * Attempt to force override of native video tracks.
+     *
+     * @param {boolean} override - If set to true native video will be overridden,
+     * otherwise native video will potentially be used.
+     *
+     * @abstract
+     */
+    overrideNativeVideoTracks(override) {}
+
+    /**
+     * Check if the tech can support the given mime-type.
+     *
+     * The base tech does not support any type, but source handlers might
+     * overwrite this.
+     *
+     * @param  {string} _type
+     *         The mimetype to check for support
+     *
+     * @return {string}
+     *         'probably', 'maybe', or empty string
+     *
+     * @see [Spec]{@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType}
+     *
+     * @abstract
+     */
+    canPlayType(_type) {
+      return '';
+    }
+
+    /**
+     * Check if the type is supported by this tech.
+     *
+     * The base tech does not support any type, but source handlers might
+     * overwrite this.
+     *
+     * @param {string} _type
+     *        The media type to check
+     * @return {string} Returns the native video element's response
+     */
+    static canPlayType(_type) {
+      return '';
+    }
+
+    /**
+     * Check if the tech can support the given source
+     *
+     * @param {Object} srcObj
+     *        The source object
+     * @param {Object} options
+     *        The options passed to the tech
+     * @return {string} 'probably', 'maybe', or '' (empty string)
+     */
+    static canPlaySource(srcObj, options) {
+      return Tech.canPlayType(srcObj.type);
+    }
+
+    /*
+     * Return whether the argument is a Tech or not.
+     * Can be passed either a Class like `Html5` or a instance like `player.tech_`
+     *
+     * @param {Object} component
+     *        The item to check
+     *
+     * @return {boolean}
+     *         Whether it is a tech or not
+     *         - True if it is a tech
+     *         - False if it is not
+     */
+    static isTech(component) {
+      return component.prototype instanceof Tech || component instanceof Tech || component === Tech;
+    }
+
+    /**
+     * Registers a `Tech` into a shared list for videojs.
+     *
+     * @param {string} name
+     *        Name of the `Tech` to register.
+     *
+     * @param {Object} tech
+     *        The `Tech` class to register.
+     */
+    static registerTech(name, tech) {
+      if (!Tech.techs_) {
+        Tech.techs_ = {};
+      }
+      if (!Tech.isTech(tech)) {
+        throw new Error(`Tech ${name} must be a Tech`);
+      }
+      if (!Tech.canPlayType) {
+        throw new Error('Techs must have a static canPlayType method on them');
+      }
+      if (!Tech.canPlaySource) {
+        throw new Error('Techs must have a static canPlaySource method on them');
+      }
+      name = toTitleCase(name);
+      Tech.techs_[name] = tech;
+      Tech.techs_[toLowerCase(name)] = tech;
+      if (name !== 'Tech') {
+        // camel case the techName for use in techOrder
+        Tech.defaultTechOrder_.push(name);
+      }
+      return tech;
+    }
+
+    /**
+     * Get a `Tech` from the shared list by name.
+     *
+     * @param {string} name
+     *        `camelCase` or `TitleCase` name of the Tech to get
+     *
+     * @return {Tech|undefined}
+     *         The `Tech` or undefined if there was no tech with the name requested.
+     */
+    static getTech(name) {
+      if (!name) {
+        return;
+      }
+      if (Tech.techs_ && Tech.techs_[name]) {
+        return Tech.techs_[name];
+      }
+      name = toTitleCase(name);
+      if (window && window.videojs && window.videojs[name]) {
+        log.warn(`The ${name} tech was added to the videojs object when it should be registered using videojs.registerTech(name, tech)`);
+        return window.videojs[name];
+      }
+    }
+  }
+
+  /**
+   * Get the {@link VideoTrackList}
+   *
+   * @returns {VideoTrackList}
+   * @method Tech.prototype.videoTracks
+   */
+
+  /**
+   * Get the {@link AudioTrackList}
+   *
+   * @returns {AudioTrackList}
+   * @method Tech.prototype.audioTracks
+   */
+
+  /**
+   * Get the {@link TextTrackList}
+   *
+   * @returns {TextTrackList}
+   * @method Tech.prototype.textTracks
+   */
+
+  /**
+   * Get the remote element {@link TextTrackList}
+   *
+   * @returns {TextTrackList}
+   * @method Tech.prototype.remoteTextTracks
+   */
+
+  /**
+   * Get the remote element {@link HtmlTrackElementList}
+   *
+   * @returns {HtmlTrackElementList}
+   * @method Tech.prototype.remoteTextTrackEls
+   */
+
+  ALL.names.forEach(function (name) {
+    const props = ALL[name];
+    Tech.prototype[props.getterName] = function () {
+      this[props.privateName] = this[props.privateName] || new props.ListClass();
+      return this[props.privateName];
+    };
+  });
+
+  /**
+   * List of associated text tracks
+   *
+   * @type {TextTrackList}
+   * @private
+   * @property Tech#textTracks_
+   */
+
+  /**
+   * List of associated audio tracks.
+   *
+   * @type {AudioTrackList}
+   * @private
+   * @property Tech#audioTracks_
+   */
+
+  /**
+   * List of associated video tracks.
+   *
+   * @type {VideoTrackList}
+   * @private
+   * @property Tech#videoTracks_
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports volume control.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresVolumeControl = true;
+
+  /**
+   * Boolean indicating whether the `Tech` supports muting volume.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresMuteControl = true;
+
+  /**
+   * Boolean indicating whether the `Tech` supports fullscreen resize control.
+   * Resizing plugins using request fullscreen reloads the plugin
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresFullscreenResize = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports changing the speed at which the video
+   * plays. Examples:
+   *   - Set player to play 2x (twice) as fast
+   *   - Set player to play 0.5x (half) as fast
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresPlaybackRate = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `progress` event.
+   * This will be used to determine if {@link Tech#manualProgressOn} should be called.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresProgressEvents = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `sourceset` event.
+   *
+   * A tech should set this to `true` and then use {@link Tech#triggerSourceset}
+   * to trigger a {@link Tech#event:sourceset} at the earliest time after getting
+   * a new source.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresSourceset = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `timeupdate` event.
+   * This will be used to determine if {@link Tech#manualTimeUpdates} should be called.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresTimeupdateEvents = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the native `TextTrack`s.
+   * This will help us integrate with native `TextTrack`s if the browser supports them.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresNativeTextTracks = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports `requestVideoFrameCallback`.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresVideoFrameCallback = false;
+
+  /**
+   * A functional mixin for techs that want to use the Source Handler pattern.
+   * Source handlers are scripts for handling specific formats.
+   * The source handler pattern is used for adaptive formats (HLS, DASH) that
+   * manually load video data and feed it into a Source Buffer (Media Source Extensions)
+   * Example: `Tech.withSourceHandlers.call(MyTech);`
+   *
+   * @param {Tech} _Tech
+   *        The tech to add source handler functions to.
+   *
+   * @mixes Tech~SourceHandlerAdditions
+   */
+  Tech.withSourceHandlers = function (_Tech) {
+    /**
+     * Register a source handler
+     *
+     * @param {Function} handler
+     *        The source handler class
+     *
+     * @param {number} [index]
+     *        Register it at the following index
+     */
+    _Tech.registerSourceHandler = function (handler, index) {
+      let handlers = _Tech.sourceHandlers;
+      if (!handlers) {
+        handlers = _Tech.sourceHandlers = [];
+      }
+      if (index === undefined) {
+        // add to the end of the list
+        index = handlers.length;
+      }
+      handlers.splice(index, 0, handler);
+    };
+
+    /**
+     * Check if the tech can support the given type. Also checks the
+     * Techs sourceHandlers.
+     *
+     * @param {string} type
+     *         The mimetype to check.
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    _Tech.canPlayType = function (type) {
+      const handlers = _Tech.sourceHandlers || [];
+      let can;
+      for (let i = 0; i < handlers.length; i++) {
+        can = handlers[i].canPlayType(type);
+        if (can) {
+          return can;
+        }
+      }
+      return '';
+    };
+
+    /**
+     * Returns the first source handler that supports the source.
+     *
+     * TODO: Answer question: should 'probably' be prioritized over 'maybe'
+     *
+     * @param {SourceObject} source
+     *        The source object
+     *
+     * @param {Object} options
+     *        The options passed to the tech
+     *
+     * @return {SourceHandler|null}
+     *          The first source handler that supports the source or null if
+     *          no SourceHandler supports the source
+     */
+    _Tech.selectSourceHandler = function (source, options) {
+      const handlers = _Tech.sourceHandlers || [];
+      let can;
+      for (let i = 0; i < handlers.length; i++) {
+        can = handlers[i].canHandleSource(source, options);
+        if (can) {
+          return handlers[i];
+        }
+      }
+      return null;
+    };
+
+    /**
+     * Check if the tech can support the given source.
+     *
+     * @param {SourceObject} srcObj
+     *        The source object
+     *
+     * @param {Object} options
+     *        The options passed to the tech
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    _Tech.canPlaySource = function (srcObj, options) {
+      const sh = _Tech.selectSourceHandler(srcObj, options);
+      if (sh) {
+        return sh.canHandleSource(srcObj, options);
+      }
+      return '';
+    };
+
+    /**
+     * When using a source handler, prefer its implementation of
+     * any function normally provided by the tech.
+     */
+    const deferrable = ['seekable', 'seeking', 'duration'];
+
+    /**
+     * A wrapper around {@link Tech#seekable} that will call a `SourceHandler`s seekable
+     * function if it exists, with a fallback to the Techs seekable function.
+     *
+     * @method _Tech.seekable
+     */
+
+    /**
+     * A wrapper around {@link Tech#duration} that will call a `SourceHandler`s duration
+     * function if it exists, otherwise it will fallback to the techs duration function.
+     *
+     * @method _Tech.duration
+     */
+
+    deferrable.forEach(function (fnName) {
+      const originalFn = this[fnName];
+      if (typeof originalFn !== 'function') {
+        return;
+      }
+      this[fnName] = function () {
+        if (this.sourceHandler_ && this.sourceHandler_[fnName]) {
+          return this.sourceHandler_[fnName].apply(this.sourceHandler_, arguments);
+        }
+        return originalFn.apply(this, arguments);
+      };
+    }, _Tech.prototype);
+
+    /**
+     * Create a function for setting the source using a source object
+     * and source handlers.
+     * Should never be called unless a source handler was found.
+     *
+     * @param {SourceObject} source
+     *        A source object with src and type keys
+     */
+    _Tech.prototype.setSource = function (source) {
+      let sh = _Tech.selectSourceHandler(source, this.options_);
+      if (!sh) {
+        // Fall back to a native source handler when unsupported sources are
+        // deliberately set
+        if (_Tech.nativeSourceHandler) {
+          sh = _Tech.nativeSourceHandler;
+        } else {
+          log.error('No source handler found for the current source.');
+        }
+      }
+
+      // Dispose any existing source handler
+      this.disposeSourceHandler();
+      this.off('dispose', this.disposeSourceHandler_);
+      if (sh !== _Tech.nativeSourceHandler) {
+        this.currentSource_ = source;
+      }
+      this.sourceHandler_ = sh.handleSource(source, this, this.options_);
+      this.one('dispose', this.disposeSourceHandler_);
+    };
+
+    /**
+     * Clean up any existing SourceHandlers and listeners when the Tech is disposed.
+     *
+     * @listens Tech#dispose
+     */
+    _Tech.prototype.disposeSourceHandler = function () {
+      // if we have a source and get another one
+      // then we are loading something new
+      // than clear all of our current tracks
+      if (this.currentSource_) {
+        this.clearTracks(['audio', 'video']);
+        this.currentSource_ = null;
+      }
+
+      // always clean up auto-text tracks
+      this.cleanupAutoTextTracks();
+      if (this.sourceHandler_) {
+        if (this.sourceHandler_.dispose) {
+          this.sourceHandler_.dispose();
+        }
+        this.sourceHandler_ = null;
+      }
+    };
+  };
+
+  // The base Tech class needs to be registered as a Component. It is the only
+  // Tech that can be registered as a Component.
+  Component.registerComponent('Tech', Tech);
+  Tech.registerTech('Tech', Tech);
+
+  /**
+   * A list of techs that should be added to techOrder on Players
+   *
+   * @private
+   */
+  Tech.defaultTechOrder_ = [];
+
+  /**
+   * @file middleware.js
+   * @module middleware
+   */
+  const middlewares = {};
+  const middlewareInstances = {};
+  const TERMINATOR = {};
+
+  /**
+   * A middleware object is a plain JavaScript object that has methods that
+   * match the {@link Tech} methods found in the lists of allowed
+   * {@link module:middleware.allowedGetters|getters},
+   * {@link module:middleware.allowedSetters|setters}, and
+   * {@link module:middleware.allowedMediators|mediators}.
+   *
+   * @typedef {Object} MiddlewareObject
+   */
+
+  /**
+   * A middleware factory function that should return a
+   * {@link module:middleware~MiddlewareObject|MiddlewareObject}.
+   *
+   * This factory will be called for each player when needed, with the player
+   * passed in as an argument.
+   *
+   * @callback MiddlewareFactory
+   * @param { import('../player').default } player
+   *        A Video.js player.
+   */
+
+  /**
+   * Define a middleware that the player should use by way of a factory function
+   * that returns a middleware object.
+   *
+   * @param  {string} type
+   *         The MIME type to match or `"*"` for all MIME types.
+   *
+   * @param  {MiddlewareFactory} middleware
+   *         A middleware factory function that will be executed for
+   *         matching types.
+   */
+  function use(type, middleware) {
+    middlewares[type] = middlewares[type] || [];
+    middlewares[type].push(middleware);
+  }
+
+  /**
+   * Asynchronously sets a source using middleware by recursing through any
+   * matching middlewares and calling `setSource` on each, passing along the
+   * previous returned value each time.
+   *
+   * @param  { import('../player').default } player
+   *         A {@link Player} instance.
+   *
+   * @param  {Tech~SourceObject} src
+   *         A source object.
+   *
+   * @param  {Function}
+   *         The next middleware to run.
+   */
+  function setSource(player, src, next) {
+    player.setTimeout(() => setSourceHelper(src, middlewares[src.type], next, player), 1);
+  }
+
+  /**
+   * When the tech is set, passes the tech to each middleware's `setTech` method.
+   *
+   * @param {Object[]} middleware
+   *        An array of middleware instances.
+   *
+   * @param { import('../tech/tech').default } tech
+   *        A Video.js tech.
+   */
+  function setTech(middleware, tech) {
+    middleware.forEach(mw => mw.setTech && mw.setTech(tech));
+  }
+
+  /**
+   * Calls a getter on the tech first, through each middleware
+   * from right to left to the player.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @return {*}
+   *         The final value from the tech after middleware has intercepted it.
+   */
+  function get(middleware, tech, method) {
+    return middleware.reduceRight(middlewareIterator(method), tech[method]());
+  }
+
+  /**
+   * Takes the argument given to the player and calls the setter method on each
+   * middleware from left to right to the tech.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @param  {*} arg
+   *         The value to set on the tech.
+   *
+   * @return {*}
+   *         The return value of the `method` of the `tech`.
+   */
+  function set(middleware, tech, method, arg) {
+    return tech[method](middleware.reduce(middlewareIterator(method), arg));
+  }
+
+  /**
+   * Takes the argument given to the player and calls the `call` version of the
+   * method on each middleware from left to right.
+   *
+   * Then, call the passed in method on the tech and return the result unchanged
+   * back to the player, through middleware, this time from right to left.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @param  {*} arg
+   *         The value to set on the tech.
+   *
+   * @return {*}
+   *         The return value of the `method` of the `tech`, regardless of the
+   *         return values of middlewares.
+   */
+  function mediate(middleware, tech, method, arg = null) {
+    const callMethod = 'call' + toTitleCase(method);
+    const middlewareValue = middleware.reduce(middlewareIterator(callMethod), arg);
+    const terminated = middlewareValue === TERMINATOR;
+    // deprecated. The `null` return value should instead return TERMINATOR to
+    // prevent confusion if a techs method actually returns null.
+    const returnValue = terminated ? null : tech[method](middlewareValue);
+    executeRight(middleware, method, returnValue, terminated);
+    return returnValue;
+  }
+
+  /**
+   * Enumeration of allowed getters where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedGetters = {
+    buffered: 1,
+    currentTime: 1,
+    duration: 1,
+    muted: 1,
+    played: 1,
+    paused: 1,
+    seekable: 1,
+    volume: 1,
+    ended: 1
+  };
+
+  /**
+   * Enumeration of allowed setters where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedSetters = {
+    setCurrentTime: 1,
+    setMuted: 1,
+    setVolume: 1
+  };
+
+  /**
+   * Enumeration of allowed mediators where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedMediators = {
+    play: 1,
+    pause: 1
+  };
+  function middlewareIterator(method) {
+    return (value, mw) => {
+      // if the previous middleware terminated, pass along the termination
+      if (value === TERMINATOR) {
+        return TERMINATOR;
+      }
+      if (mw[method]) {
+        return mw[method](value);
+      }
+      return value;
+    };
+  }
+  function executeRight(mws, method, value, terminated) {
+    for (let i = mws.length - 1; i >= 0; i--) {
+      const mw = mws[i];
+      if (mw[method]) {
+        mw[method](terminated, value);
+      }
+    }
+  }
+
+  /**
+   * Clear the middleware cache for a player.
+   *
+   * @param  { import('../player').default } player
+   *         A {@link Player} instance.
+   */
+  function clearCacheForPlayer(player) {
+    middlewareInstances[player.id()] = null;
+  }
+
+  /**
+   * {
+   *  [playerId]: [[mwFactory, mwInstance], ...]
+   * }
+   *
+   * @private
+   */
+  function getOrCreateFactory(player, mwFactory) {
+    const mws = middlewareInstances[player.id()];
+    let mw = null;
+    if (mws === undefined || mws === null) {
+      mw = mwFactory(player);
+      middlewareInstances[player.id()] = [[mwFactory, mw]];
+      return mw;
+    }
+    for (let i = 0; i < mws.length; i++) {
+      const [mwf, mwi] = mws[i];
+      if (mwf !== mwFactory) {
+        continue;
+      }
+      mw = mwi;
+    }
+    if (mw === null) {
+      mw = mwFactory(player);
+      mws.push([mwFactory, mw]);
+    }
+    return mw;
+  }
+  function setSourceHelper(src = {}, middleware = [], next, player, acc = [], lastRun = false) {
+    const [mwFactory, ...mwrest] = middleware;
+
+    // if mwFactory is a string, then we're at a fork in the road
+    if (typeof mwFactory === 'string') {
+      setSourceHelper(src, middlewares[mwFactory], next, player, acc, lastRun);
+
+      // if we have an mwFactory, call it with the player to get the mw,
+      // then call the mw's setSource method
+    } else if (mwFactory) {
+      const mw = getOrCreateFactory(player, mwFactory);
+
+      // if setSource isn't present, implicitly select this middleware
+      if (!mw.setSource) {
+        acc.push(mw);
+        return setSourceHelper(src, mwrest, next, player, acc, lastRun);
+      }
+      mw.setSource(Object.assign({}, src), function (err, _src) {
+        // something happened, try the next middleware on the current level
+        // make sure to use the old src
+        if (err) {
+          return setSourceHelper(src, mwrest, next, player, acc, lastRun);
+        }
+
+        // we've succeeded, now we need to go deeper
+        acc.push(mw);
+
+        // if it's the same type, continue down the current chain
+        // otherwise, we want to go down the new chain
+        setSourceHelper(_src, src.type === _src.type ? mwrest : middlewares[_src.type], next, player, acc, lastRun);
+      });
+    } else if (mwrest.length) {
+      setSourceHelper(src, mwrest, next, player, acc, lastRun);
+    } else if (lastRun) {
+      next(src, acc);
+    } else {
+      setSourceHelper(src, middlewares['*'], next, player, acc, true);
+    }
+  }
+
+  /**
+   * Mimetypes
+   *
+   * @see https://www.iana.org/assignments/media-types/media-types.xhtml
+   * @typedef Mimetypes~Kind
+   * @enum
+   */
+  const MimetypesKind = {
+    opus: 'video/ogg',
+    ogv: 'video/ogg',
+    mp4: 'video/mp4',
+    mov: 'video/mp4',
+    m4v: 'video/mp4',
+    mkv: 'video/x-matroska',
+    m4a: 'audio/mp4',
+    mp3: 'audio/mpeg',
+    aac: 'audio/aac',
+    caf: 'audio/x-caf',
+    flac: 'audio/flac',
+    oga: 'audio/ogg',
+    wav: 'audio/wav',
+    m3u8: 'application/x-mpegURL',
+    mpd: 'application/dash+xml',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    gif: 'image/gif',
+    png: 'image/png',
+    svg: 'image/svg+xml',
+    webp: 'image/webp'
+  };
+
+  /**
+   * Get the mimetype of a given src url if possible
+   *
+   * @param {string} src
+   *        The url to the src
+   *
+   * @return {string}
+   *         return the mimetype if it was known or empty string otherwise
+   */
+  const getMimetype = function (src = '') {
+    const ext = getFileExtension(src);
+    const mimetype = MimetypesKind[ext.toLowerCase()];
+    return mimetype || '';
+  };
+
+  /**
+   * Find the mime type of a given source string if possible. Uses the player
+   * source cache.
+   *
+   * @param { import('../player').default } player
+   *        The player object
+   *
+   * @param {string} src
+   *        The source string
+   *
+   * @return {string}
+   *         The type that was found
+   */
+  const findMimetype = (player, src) => {
+    if (!src) {
+      return '';
+    }
+
+    // 1. check for the type in the `source` cache
+    if (player.cache_.source.src === src && player.cache_.source.type) {
+      return player.cache_.source.type;
+    }
+
+    // 2. see if we have this source in our `currentSources` cache
+    const matchingSources = player.cache_.sources.filter(s => s.src === src);
+    if (matchingSources.length) {
+      return matchingSources[0].type;
+    }
+
+    // 3. look for the src url in source elements and use the type there
+    const sources = player.$$('source');
+    for (let i = 0; i < sources.length; i++) {
+      const s = sources[i];
+      if (s.type && s.src && s.src === src) {
+        return s.type;
+      }
+    }
+
+    // 4. finally fallback to our list of mime types based on src url extension
+    return getMimetype(src);
+  };
+
+  /**
+   * @module filter-source
+   */
+
+  /**
+   * Filter out single bad source objects or multiple source objects in an
+   * array. Also flattens nested source object arrays into a 1 dimensional
+   * array of source objects.
+   *
+   * @param {Tech~SourceObject|Tech~SourceObject[]} src
+   *        The src object to filter
+   *
+   * @return {Tech~SourceObject[]}
+   *         An array of sourceobjects containing only valid sources
+   *
+   * @private
+   */
+  const filterSource = function (src) {
+    // traverse array
+    if (Array.isArray(src)) {
+      let newsrc = [];
+      src.forEach(function (srcobj) {
+        srcobj = filterSource(srcobj);
+        if (Array.isArray(srcobj)) {
+          newsrc = newsrc.concat(srcobj);
+        } else if (isObject(srcobj)) {
+          newsrc.push(srcobj);
+        }
+      });
+      src = newsrc;
+    } else if (typeof src === 'string' && src.trim()) {
+      // convert string into object
+      src = [fixSource({
+        src
+      })];
+    } else if (isObject(src) && typeof src.src === 'string' && src.src && src.src.trim()) {
+      // src is already valid
+      src = [fixSource(src)];
+    } else {
+      // invalid source, turn it into an empty array
+      src = [];
+    }
+    return src;
+  };
+
+  /**
+   * Checks src mimetype, adding it when possible
+   *
+   * @param {Tech~SourceObject} src
+   *        The src object to check
+   * @return {Tech~SourceObject}
+   *        src Object with known type
+   */
+  function fixSource(src) {
+    if (!src.type) {
+      const mimetype = getMimetype(src.src);
+      if (mimetype) {
+        src.type = mimetype;
+      }
+    }
+    return src;
+  }
+
+  var icons = "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-play\">\n      <path d=\"M16 10v28l22-14z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-pause\">\n      <path d=\"M12 38h8V10h-8v28zm16-28v28h8V10h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-audio\">\n      <path d=\"M24 2C14.06 2 6 10.06 6 20v14c0 3.31 2.69 6 6 6h6V24h-8v-4c0-7.73 6.27-14 14-14s14 6.27 14 14v4h-8v16h6c3.31 0 6-2.69 6-6V20c0-9.94-8.06-18-18-18z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-captions\">\n      <path d=\"M38 8H10c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM22 22h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2zm14 0h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-subtitles\">\n      <path d=\"M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-fullscreen-enter\">\n      <path d=\"M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-fullscreen-exit\">\n      <path d=\"M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-play-circle\">\n      <path d=\"M20 33l12-9-12-9v18zm4-29C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-mute\">\n      <path d=\"M33 24c0-3.53-2.04-6.58-5-8.05v4.42l4.91 4.91c.06-.42.09-.85.09-1.28zm5 0c0 1.88-.41 3.65-1.08 5.28l3.03 3.03C41.25 29.82 42 27 42 24c0-8.56-5.99-15.72-14-17.54v4.13c5.78 1.72 10 7.07 10 13.41zM8.55 6L6 8.55 15.45 18H6v12h8l10 10V26.55l8.51 8.51c-1.34 1.03-2.85 1.86-4.51 2.36v4.13a17.94 17.94 0 0 0 7.37-3.62L39.45 42 42 39.45l-18-18L8.55 6zM24 8l-4.18 4.18L24 16.36V8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-low\">\n      <path d=\"M14 18v12h8l10 10V8L22 18h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-medium\">\n      <path d=\"M37 24c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zm-27-6v12h8l10 10V8L18 18h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-high\">\n      <path d=\"M6 18v12h8l10 10V8L14 18H6zm27 6c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zM28 6.46v4.13c5.78 1.72 10 7.07 10 13.41s-4.22 11.69-10 13.41v4.13c8.01-1.82 14-8.97 14-17.54S36.01 8.28 28 6.46z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-spinner\">\n      <path d=\"M18.8 21l9.53-16.51C26.94 4.18 25.49 4 24 4c-4.8 0-9.19 1.69-12.64 4.51l7.33 12.69.11-.2zm24.28-3c-1.84-5.85-6.3-10.52-11.99-12.68L23.77 18h19.31zm.52 2H28.62l.58 1 9.53 16.5C41.99 33.94 44 29.21 44 24c0-1.37-.14-2.71-.4-4zm-26.53 4l-7.8-13.5C6.01 14.06 4 18.79 4 24c0 1.37.14 2.71.4 4h14.98l-2.31-4zM4.92 30c1.84 5.85 6.3 10.52 11.99 12.68L24.23 30H4.92zm22.54 0l-7.8 13.51c1.4.31 2.85.49 4.34.49 4.8 0 9.19-1.69 12.64-4.51L29.31 26.8 27.46 30z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 24 24\" id=\"vjs-icon-hd\">\n      <path d=\"M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-chapters\">\n      <path d=\"M6 26h4v-4H6v4zm0 8h4v-4H6v4zm0-16h4v-4H6v4zm8 8h28v-4H14v4zm0 8h28v-4H14v4zm0-20v4h28v-4H14z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 40 40\" id=\"vjs-icon-downloading\">\n      <path d=\"M18.208 36.875q-3.208-.292-5.979-1.729-2.771-1.438-4.812-3.729-2.042-2.292-3.188-5.229-1.146-2.938-1.146-6.23 0-6.583 4.334-11.416 4.333-4.834 10.833-5.5v3.166q-5.167.75-8.583 4.646Q6.25 14.75 6.25 19.958q0 5.209 3.396 9.104 3.396 3.896 8.562 4.646zM20 28.417L11.542 20l2.083-2.083 4.917 4.916v-11.25h2.916v11.25l4.875-4.916L28.417 20zm1.792 8.458v-3.167q1.833-.25 3.541-.958 1.709-.708 3.167-1.875l2.333 2.292q-1.958 1.583-4.25 2.541-2.291.959-4.791 1.167zm6.791-27.792q-1.541-1.125-3.25-1.854-1.708-.729-3.541-1.021V3.042q2.5.25 4.77 1.208 2.271.958 4.271 2.5zm4.584 21.584l-2.25-2.25q1.166-1.5 1.854-3.209.687-1.708.937-3.541h3.209q-.292 2.5-1.229 4.791-.938 2.292-2.521 4.209zm.541-12.417q-.291-1.833-.958-3.562-.667-1.73-1.833-3.188l2.375-2.208q1.541 1.916 2.458 4.208.917 2.292 1.167 4.75z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download\">\n      <path d=\"M10.8 40.55q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h26.35v-7.7h3.4v7.7q0 1.4-1 2.4t-2.4 1zM24 32.1L13.9 22.05l2.45-2.45 5.95 5.95V7.15h3.4v18.4l5.95-5.95 2.45 2.45z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download-done\">\n      <path d=\"M9.8 40.5v-3.45h28.4v3.45zm9.2-9.05L7.4 19.85l2.45-2.35L19 26.65l19.2-19.2 2.4 2.4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download-off\">\n      <path d=\"M4.9 4.75L43.25 43.1 41 45.3l-4.75-4.75q-.05.05-.075.025-.025-.025-.075-.025H10.8q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h22.05l-7-7-1.85 1.8L13.9 21.9l1.85-1.85L2.7 7zm26.75 14.7l2.45 2.45-3.75 3.8-2.45-2.5zM25.7 7.15V21.1l-3.4-3.45V7.15z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-share\">\n      <path d=\"M36 32.17c-1.52 0-2.89.59-3.93 1.54L17.82 25.4c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31A5.83 5.83 0 1 0 36 32.17z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cog\">\n      <path d=\"M38.86 25.95c.08-.64.14-1.29.14-1.95s-.06-1.31-.14-1.95l4.23-3.31c.38-.3.49-.84.24-1.28l-4-6.93c-.25-.43-.77-.61-1.22-.43l-4.98 2.01c-1.03-.79-2.16-1.46-3.38-1.97L29 4.84c-.09-.47-.5-.84-1-.84h-8c-.5 0-.91.37-.99.84l-.75 5.3a14.8 14.8 0 0 0-3.38 1.97L9.9 10.1a1 1 0 0 0-1.22.43l-4 6.93c-.25.43-.14.97.24 1.28l4.22 3.31C9.06 22.69 9 23.34 9 24s.06 1.31.14 1.95l-4.22 3.31c-.38.3-.49.84-.24 1.28l4 6.93c.25.43.77.61 1.22.43l4.98-2.01c1.03.79 2.16 1.46 3.38 1.97l.75 5.3c.08.47.49.84.99.84h8c.5 0 .91-.37.99-.84l.75-5.3a14.8 14.8 0 0 0 3.38-1.97l4.98 2.01a1 1 0 0 0 1.22-.43l4-6.93c.25-.43.14-.97-.24-1.28l-4.22-3.31zM24 31c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-square\">\n      <path d=\"M36 8H12c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H12V12h24v24z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle\">\n      <circle cx=\"24\" cy=\"24\" r=\"20\"></circle>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle-outline\">\n      <path d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle-inner-circle\">\n      <path d=\"M24 4C12.97 4 4 12.97 4 24s8.97 20 20 20 20-8.97 20-20S35.03 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm6-16c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6 6 2.69 6 6z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cancel\">\n      <path d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-replay\">\n      <path d=\"M24 10V2L14 12l10 10v-8c6.63 0 12 5.37 12 12s-5.37 12-12 12-12-5.37-12-12H8c0 8.84 7.16 16 16 16s16-7.16 16-16-7.16-16-16-16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-repeat\">\n      <path d=\"M14 14h20v6l8-8-8-8v6H10v12h4v-8zm20 20H14v-6l-8 8 8 8v-6h24V26h-4v8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-5\">\n      <path d=\"M17.689 98l-8.697 8.696 8.697 8.697 2.486-2.485-4.32-4.319h1.302c4.93 0 9.071 1.722 12.424 5.165 3.352 3.443 5.029 7.638 5.029 12.584h3.55c0-2.958-.553-5.73-1.658-8.313-1.104-2.583-2.622-4.841-4.555-6.774-1.932-1.932-4.19-3.45-6.773-4.555-2.584-1.104-5.355-1.657-8.313-1.657H15.5l4.615-4.615zm-8.08 21.659v13.861h11.357v5.008H9.609V143h12.7c.834 0 1.55-.298 2.146-.894.596-.597.895-1.31.895-2.145v-7.781c0-.835-.299-1.55-.895-2.147a2.929 2.929 0 0 0-2.147-.894h-8.227v-5.096H25.35v-4.384z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-10\">\n      <path d=\"M42.315 125.63c0-4.997-1.694-9.235-5.08-12.713-3.388-3.479-7.571-5.218-12.552-5.218h-1.315l4.363 4.363-2.51 2.51-8.787-8.786L25.221 97l2.45 2.45-4.662 4.663h1.375c2.988 0 5.788.557 8.397 1.673 2.61 1.116 4.892 2.65 6.844 4.602 1.953 1.953 3.487 4.234 4.602 6.844 1.116 2.61 1.674 5.41 1.674 8.398zM8.183 142v-19.657H3.176V117.8h9.643V142zm13.63 0c-1.156 0-2.127-.393-2.912-1.178-.778-.778-1.168-1.746-1.168-2.902v-16.04c0-1.156.393-2.127 1.178-2.912.779-.779 1.746-1.168 2.902-1.168h7.696c1.156 0 2.126.392 2.911 1.177.779.78 1.168 1.747 1.168 2.903v16.04c0 1.156-.392 2.127-1.177 2.912-.779.779-1.746 1.168-2.902 1.168zm.556-4.636h6.583v-15.02H22.37z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-30\">\n      <path d=\"M26.047 97l-8.733 8.732 8.733 8.733 2.496-2.494-4.336-4.338h1.307c4.95 0 9.108 1.73 12.474 5.187 3.367 3.458 5.051 7.668 5.051 12.635h3.565c0-2.97-.556-5.751-1.665-8.346-1.109-2.594-2.633-4.862-4.574-6.802-1.94-1.941-4.208-3.466-6.803-4.575-2.594-1.109-5.375-1.664-8.345-1.664H23.85l4.634-4.634zM2.555 117.531v4.688h10.297v5.25H5.873v4.687h6.979v5.156H2.555V142H13.36c1.061 0 1.95-.395 2.668-1.186.718-.79 1.076-1.772 1.076-2.94v-16.218c0-1.168-.358-2.149-1.076-2.94-.717-.79-1.607-1.185-2.668-1.185zm22.482.14c-1.149 0-2.11.39-2.885 1.165-.78.78-1.172 1.744-1.172 2.893v15.943c0 1.149.388 2.11 1.163 2.885.78.78 1.745 1.172 2.894 1.172h7.649c1.148 0 2.11-.388 2.884-1.163.78-.78 1.17-1.745 1.17-2.894v-15.943c0-1.15-.386-2.111-1.16-2.885-.78-.78-1.746-1.172-2.894-1.172zm.553 4.518h6.545v14.93H25.59z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-5\">\n      <path d=\"M29.508 97l-2.431 2.43 4.625 4.625h-1.364c-2.965 0-5.742.554-8.332 1.66-2.589 1.107-4.851 2.629-6.788 4.566-1.937 1.937-3.458 4.2-4.565 6.788-1.107 2.59-1.66 5.367-1.66 8.331h3.557c0-4.957 1.68-9.16 5.04-12.611 3.36-3.45 7.51-5.177 12.451-5.177h1.304l-4.326 4.33 2.49 2.49 8.715-8.716zm-9.783 21.61v13.89h11.382v5.018H19.725V142h12.727a2.93 2.93 0 0 0 2.15-.896 2.93 2.93 0 0 0 .896-2.15v-7.798c0-.837-.299-1.554-.896-2.152a2.93 2.93 0 0 0-2.15-.896h-8.245V123h11.29v-4.392z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-10\">\n      <path d=\"M23.119 97l-2.386 2.383 4.538 4.538h-1.339c-2.908 0-5.633.543-8.173 1.63-2.54 1.085-4.76 2.577-6.66 4.478-1.9 1.9-3.392 4.12-4.478 6.66-1.085 2.54-1.629 5.264-1.629 8.172h3.49c0-4.863 1.648-8.986 4.944-12.372 3.297-3.385 7.368-5.078 12.216-5.078h1.279l-4.245 4.247 2.443 2.442 8.55-8.55zm-9.52 21.45v4.42h4.871V142h4.513v-23.55zm18.136 0c-1.125 0-2.066.377-2.824 1.135-.764.764-1.148 1.709-1.148 2.834v15.612c0 1.124.38 2.066 1.139 2.824.764.764 1.708 1.145 2.833 1.145h7.489c1.125 0 2.066-.378 2.824-1.136.764-.764 1.145-1.709 1.145-2.833v-15.612c0-1.125-.378-2.067-1.136-2.825-.764-.764-1.708-1.145-2.833-1.145zm.54 4.42h6.408v14.617h-6.407z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-30\">\n      <path d=\"M25.549 97l-2.437 2.434 4.634 4.635H26.38c-2.97 0-5.753.555-8.347 1.664-2.594 1.109-4.861 2.633-6.802 4.574-1.94 1.94-3.465 4.207-4.574 6.802-1.109 2.594-1.664 5.377-1.664 8.347h3.565c0-4.967 1.683-9.178 5.05-12.636 3.366-3.458 7.525-5.187 12.475-5.187h1.307l-4.335 4.338 2.495 2.494 8.732-8.732zm-11.553 20.53v4.689h10.297v5.249h-6.978v4.688h6.978v5.156H13.996V142h10.808c1.06 0 1.948-.395 2.666-1.186.718-.79 1.077-1.771 1.077-2.94v-16.217c0-1.169-.36-2.15-1.077-2.94-.718-.79-1.605-1.186-2.666-1.186zm21.174.168c-1.149 0-2.11.389-2.884 1.163-.78.78-1.172 1.745-1.172 2.894v15.942c0 1.15.388 2.11 1.162 2.885.78.78 1.745 1.17 2.894 1.17h7.649c1.149 0 2.11-.386 2.885-1.16.78-.78 1.17-1.746 1.17-2.895v-15.942c0-1.15-.387-2.11-1.161-2.885-.78-.78-1.745-1.172-2.894-1.172zm.552 4.516h6.542v14.931h-6.542z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 512 512\" id=\"vjs-icon-audio-description\">\n      <g fill-rule=\"evenodd\"><path d=\"M227.29 381.351V162.993c50.38-1.017 89.108-3.028 117.631 17.126 27.374 19.342 48.734 56.965 44.89 105.325-4.067 51.155-41.335 94.139-89.776 98.475-24.085 2.155-71.972 0-71.972 0s-.84-1.352-.773-2.568m48.755-54.804c31.43 1.26 53.208-16.633 56.495-45.386 4.403-38.51-21.188-63.552-58.041-60.796v103.612c-.036 1.466.575 2.22 1.546 2.57\"></path><path d=\"M383.78 381.328c13.336 3.71 17.387-11.06 23.215-21.408 12.722-22.571 22.294-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.226 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894\"></path><path d=\"M425.154 381.328c13.336 3.71 17.384-11.061 23.215-21.408 12.721-22.571 22.291-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.511c-.586 3.874 2.226 7.315 3.866 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894\"></path><path d=\"M466.26 381.328c13.337 3.71 17.385-11.061 23.216-21.408 12.722-22.571 22.292-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.225 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894M4.477 383.005H72.58l18.573-28.484 64.169-.135s.065 19.413.065 28.62h48.756V160.307h-58.816c-5.653 9.537-140.85 222.697-140.85 222.697zm152.667-145.282v71.158l-40.453-.27 40.453-70.888z\"></path></g>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-next-item\">\n      <path d=\"M12 36l17-12-17-12v24zm20-24v24h4V12h-4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-previous-item\">\n      <path d=\"M12 12h4v24h-4zm7 12l17 12V12z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-shuffle\">\n      <path d=\"M21.17 18.34L10.83 8 8 10.83l10.34 10.34 2.83-2.83zM29 8l4.09 4.09L8 37.17 10.83 40l25.09-25.09L40 19V8H29zm.66 18.83l-2.83 2.83 6.26 6.26L29 40h11V29l-4.09 4.09-6.25-6.26z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cast\">\n      <path d=\"M42 6H6c-2.21 0-4 1.79-4 4v6h4v-6h36v28H28v4h14c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4zM2 36v6h6c0-3.31-2.69-6-6-6zm0-8v4c5.52 0 10 4.48 10 10h4c0-7.73-6.27-14-14-14zm0-8v4c9.94 0 18 8.06 18 18h4c0-12.15-9.85-22-22-22z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-picture-in-picture-enter\">\n      <path d=\"M38 22H22v11.99h16V22zm8 16V9.96C46 7.76 44.2 6 42 6H6C3.8 6 2 7.76 2 9.96V38c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4zm-4 .04H6V9.94h36v28.1z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 22 18\" id=\"vjs-icon-picture-in-picture-exit\">\n      <path d=\"M18 4H4v10h14V4zm4 12V1.98C22 .88 21.1 0 20 0H2C.9 0 0 .88 0 1.98V16c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H2V1.97h18v14.05z\"></path>\n      <path fill=\"none\" d=\"M-1-3h24v24H-1z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-facebook\">\n      <path d=\"M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759H734V905H479V609h255V391q0-186 104-288.5T1115 0q147 0 228 12z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-linkedin\">\n      <path d=\"M477 625v991H147V625h330zm21-306q1 73-50.5 122T312 490h-2q-82 0-132-49t-50-122q0-74 51.5-122.5T314 148t133 48.5T498 319zm1166 729v568h-329v-530q0-105-40.5-164.5T1168 862q-63 0-105.5 34.5T999 982q-11 30-11 81v553H659q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5T1285 602q171 0 275 113.5t104 332.5z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-twitter\">\n      <path d=\"M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5T1369.5 1125 1185 1335.5t-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5T285 1033q33 5 61 5 43 0 85-11-112-23-185.5-111.5T172 710v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5T884 653q-8-38-8-74 0-134 94.5-228.5T1199 256q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-tumblr\">\n      <path d=\"M1328 1329l80 237q-23 35-111 66t-177 32q-104 2-190.5-26T787 1564t-95-106-55.5-120-16.5-118V676H452V461q72-26 129-69.5t91-90 58-102 34-99T779 12q1-5 4.5-8.5T791 0h244v424h333v252h-334v518q0 30 6.5 56t22.5 52.5 49.5 41.5 81.5 14q78-2 134-29z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-pinterest\">\n      <path d=\"M1664 896q0 209-103 385.5T1281.5 1561 896 1664q-111 0-218-32 59-93 78-164 9-34 54-211 20 39 73 67.5t114 28.5q121 0 216-68.5t147-188.5 52-270q0-114-59.5-214T1180 449t-255-63q-105 0-196 29t-154.5 77-109 110.5-67 129.5T377 866q0 104 40 183t117 111q30 12 38-20 2-7 8-31t8-30q6-23-11-43-51-61-51-151 0-151 104.5-259.5T904 517q151 0 235.5 82t84.5 213q0 170-68.5 289T980 1220q-61 0-98-43.5T859 1072q8-35 26.5-93.5t30-103T927 800q0-50-27-83t-77-33q-62 0-105 57t-43 142q0 73 25 122l-99 418q-17 70-13 177-206-91-333-281T128 896q0-209 103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z\"></path>\n    </symbol>\n  </defs>\n</svg>";
+
+  /**
+   * @file loader.js
+   */
+
+  /**
+   * The `MediaLoader` is the `Component` that decides which playback technology to load
+   * when a player is initialized.
+   *
+   * @extends Component
+   */
+  class MediaLoader extends Component {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should attach to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function that is run when this component is ready.
+     */
+    constructor(player, options, ready) {
+      // MediaLoader has no element
+      const options_ = merge({
+        createEl: false
+      }, options);
+      super(player, options_, ready);
+
+      // If there are no sources when the player is initialized,
+      // load the first supported playback technology.
+
+      if (!options.playerOptions.sources || options.playerOptions.sources.length === 0) {
+        for (let i = 0, j = options.playerOptions.techOrder; i < j.length; i++) {
+          const techName = toTitleCase(j[i]);
+          let tech = Tech.getTech(techName);
+
+          // Support old behavior of techs being registered as components.
+          // Remove once that deprecated behavior is removed.
+          if (!techName) {
+            tech = Component.getComponent(techName);
+          }
+
+          // Check if the browser supports this technology
+          if (tech && tech.isSupported()) {
+            player.loadTech_(techName);
+            break;
+          }
+        }
+      } else {
+        // Loop through playback technologies (e.g. HTML5) and check for support.
+        // Then load the best source.
+        // A few assumptions here:
+        //   All playback technologies respect preload false.
+        player.src(options.playerOptions.sources);
+      }
+    }
+  }
+  Component.registerComponent('MediaLoader', MediaLoader);
+
+  /**
+   * @file clickable-component.js
+   */
+
+  /**
+   * Component which is clickable or keyboard actionable, but is not a
+   * native HTML button.
+   *
+   * @extends Component
+   */
+  class ClickableComponent extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  { import('./player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of component options.
+     *
+     * @param  {function} [options.clickHandler]
+     *         The function to call when the button is clicked / activated
+     *
+     * @param  {string} [options.controlText]
+     *         The text to set on the button
+     *
+     * @param  {string} [options.className]
+     *         A class or space separated list of classes to add the component
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      if (this.options_.controlText) {
+        this.controlText(this.options_.controlText);
+      }
+      this.handleMouseOver_ = e => this.handleMouseOver(e);
+      this.handleMouseOut_ = e => this.handleMouseOut(e);
+      this.handleClick_ = e => this.handleClick(e);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.emitTapEvents();
+      this.enable();
+    }
+
+    /**
+     * Create the `ClickableComponent`s DOM element.
+     *
+     * @param {string} [tag=div]
+     *        The element's node type.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element.
+     *
+     * @param {Object} [attributes={}]
+     *        An object of attributes that should be set on the element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tag = 'div', props = {}, attributes = {}) {
+      props = Object.assign({
+        className: this.buildCSSClass(),
+        tabIndex: 0
+      }, props);
+      if (tag === 'button') {
+        log.error(`Creating a ClickableComponent with an HTML element of ${tag} is not supported; use a Button instead.`);
+      }
+
+      // Add ARIA attributes for clickable element which is not a native HTML button
+      attributes = Object.assign({
+        role: 'button'
+      }, attributes);
+      this.tabIndex_ = props.tabIndex;
+      const el = createEl(tag, props, attributes);
+      if (!this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+      }
+      this.createControlTextEl(el);
+      return el;
+    }
+    dispose() {
+      // remove controlTextEl_ on dispose
+      this.controlTextEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Create a control text element on this `ClickableComponent`
+     *
+     * @param {Element} [el]
+     *        Parent element for the control text.
+     *
+     * @return {Element}
+     *         The control text element that gets created.
+     */
+    createControlTextEl(el) {
+      this.controlTextEl_ = createEl('span', {
+        className: 'vjs-control-text'
+      }, {
+        // let the screen reader user know that the text of the element may change
+        'aria-live': 'polite'
+      });
+      if (el) {
+        el.appendChild(this.controlTextEl_);
+      }
+      this.controlText(this.controlText_, el);
+      return this.controlTextEl_;
+    }
+
+    /**
+     * Get or set the localize text to use for the controls on the `ClickableComponent`.
+     *
+     * @param {string} [text]
+     *        Control text for element.
+     *
+     * @param {Element} [el=this.el()]
+     *        Element to set the title on.
+     *
+     * @return {string}
+     *         - The control text when getting
+     */
+    controlText(text, el = this.el()) {
+      if (text === undefined) {
+        return this.controlText_ || 'Need Text';
+      }
+      const localizedText = this.localize(text);
+
+      /** @protected */
+      this.controlText_ = text;
+      textContent(this.controlTextEl_, localizedText);
+      if (!this.nonIconControl && !this.player_.options_.noUITitleAttributes) {
+        // Set title attribute if only an icon is shown
+        el.setAttribute('title', localizedText);
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-control vjs-button ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Enable this `ClickableComponent`
+     */
+    enable() {
+      if (!this.enabled_) {
+        this.enabled_ = true;
+        this.removeClass('vjs-disabled');
+        this.el_.setAttribute('aria-disabled', 'false');
+        if (typeof this.tabIndex_ !== 'undefined') {
+          this.el_.setAttribute('tabIndex', this.tabIndex_);
+        }
+        this.on(['tap', 'click'], this.handleClick_);
+        this.on('keydown', this.handleKeyDown_);
+      }
+    }
+
+    /**
+     * Disable this `ClickableComponent`
+     */
+    disable() {
+      this.enabled_ = false;
+      this.addClass('vjs-disabled');
+      this.el_.setAttribute('aria-disabled', 'true');
+      if (typeof this.tabIndex_ !== 'undefined') {
+        this.el_.removeAttribute('tabIndex');
+      }
+      this.off('mouseover', this.handleMouseOver_);
+      this.off('mouseout', this.handleMouseOut_);
+      this.off(['tap', 'click'], this.handleClick_);
+      this.off('keydown', this.handleKeyDown_);
+    }
+
+    /**
+     * Handles language change in ClickableComponent for the player in components
+     *
+     *
+     */
+    handleLanguagechange() {
+      this.controlText(this.controlText_);
+    }
+
+    /**
+     * Event handler that is called when a `ClickableComponent` receives a
+     * `click` or `tap` event.
+     *
+     * @param {Event} event
+     *        The `tap` or `click` event that caused this function to be called.
+     *
+     * @listens tap
+     * @listens click
+     * @abstract
+     */
+    handleClick(event) {
+      if (this.options_.clickHandler) {
+        this.options_.clickHandler.call(this, arguments);
+      }
+    }
+
+    /**
+     * Event handler that is called when a `ClickableComponent` receives a
+     * `keydown` event.
+     *
+     * By default, if the key is Space or Enter, it will trigger a `click` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Support Space or Enter key operation to fire a click event. Also,
+      // prevent the event from propagating through the DOM and triggering
+      // Player hotkeys.
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.trigger('click');
+      } else {
+        // Pass keypress handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+  }
+  Component.registerComponent('ClickableComponent', ClickableComponent);
+
+  /**
+   * @file poster-image.js
+   */
+
+  /**
+   * A `ClickableComponent` that handles showing the poster image for the player.
+   *
+   * @extends ClickableComponent
+   */
+  class PosterImage extends ClickableComponent {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should attach to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update();
+      this.update_ = e => this.update(e);
+      player.on('posterchange', this.update_);
+    }
+
+    /**
+     * Clean up and dispose of the `PosterImage`.
+     */
+    dispose() {
+      this.player().off('posterchange', this.update_);
+      super.dispose();
+    }
+
+    /**
+     * Create the `PosterImage`s DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      // The el is an empty div to keep position in the DOM
+      // A picture and img el will be inserted when a source is set
+      return createEl('div', {
+        className: 'vjs-poster'
+      });
+    }
+
+    /**
+     * Get or set the `PosterImage`'s crossOrigin option.
+     *
+     * @param {string|null} [value]
+     *        The value to set the crossOrigin to. If an argument is
+     *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+     *
+     * @return {string|null}
+     *         - The current crossOrigin value of the `Player` when getting.
+     *         - undefined when setting
+     */
+    crossOrigin(value) {
+      // `null` can be set to unset a value
+      if (typeof value === 'undefined') {
+        if (this.$('img')) {
+          // If the poster's element exists, give its value
+          return this.$('img').crossOrigin;
+        } else if (this.player_.tech_ && this.player_.tech_.isReady_) {
+          // If not but the tech is ready, query the tech
+          return this.player_.crossOrigin();
+        }
+        // Otherwise check options as the  poster is usually set before the state of crossorigin
+        // can be retrieved by the getter
+        return this.player_.options_.crossOrigin || this.player_.options_.crossorigin || null;
+      }
+      if (value !== null && value !== 'anonymous' && value !== 'use-credentials') {
+        this.player_.log.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${value}"`);
+        return;
+      }
+      if (this.$('img')) {
+        this.$('img').crossOrigin = value;
+      }
+      return;
+    }
+
+    /**
+     * An {@link EventTarget~EventListener} for {@link Player#posterchange} events.
+     *
+     * @listens Player#posterchange
+     *
+     * @param {Event} [event]
+     *        The `Player#posterchange` event that triggered this function.
+     */
+    update(event) {
+      const url = this.player().poster();
+      this.setSrc(url);
+
+      // If there's no poster source we should display:none on this component
+      // so it's not still clickable or right-clickable
+      if (url) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+
+    /**
+     * Set the source of the `PosterImage` depending on the display method. (Re)creates
+     * the inner picture and img elementss when needed.
+     *
+     * @param {string} [url]
+     *        The URL to the source for the `PosterImage`. If not specified or falsy,
+     *        any source and ant inner picture/img are removed.
+     */
+    setSrc(url) {
+      if (!url) {
+        this.el_.textContent = '';
+        return;
+      }
+      if (!this.$('img')) {
+        this.el_.appendChild(createEl('picture', {
+          className: 'vjs-poster',
+          // Don't want poster to be tabbable.
+          tabIndex: -1
+        }, {}, createEl('img', {
+          loading: 'lazy',
+          crossOrigin: this.crossOrigin()
+        }, {
+          alt: ''
+        })));
+      }
+      this.$('img').src = url;
+    }
+
+    /**
+     * An {@link EventTarget~EventListener} for clicks on the `PosterImage`. See
+     * {@link ClickableComponent#handleClick} for instances where this will be triggered.
+     *
+     * @listens tap
+     * @listens click
+     * @listens keydown
+     *
+     * @param {Event} event
+     +        The `click`, `tap` or `keydown` event that caused this function to be called.
+     */
+    handleClick(event) {
+      // We don't want a click to trigger playback when controls are disabled
+      if (!this.player_.controls()) {
+        return;
+      }
+      if (this.player_.tech(true)) {
+        this.player_.tech(true).focus();
+      }
+      if (this.player_.paused()) {
+        silencePromise(this.player_.play());
+      } else {
+        this.player_.pause();
+      }
+    }
+  }
+
+  /**
+   * Get or set the `PosterImage`'s crossorigin option. For the HTML5 player, this
+   * sets the `crossOrigin` property on the `<img>` tag to control the CORS
+   * behavior.
+   *
+   * @param {string|null} [value]
+   *        The value to set the `PosterImages`'s crossorigin to. If an argument is
+   *        given, must be one of `anonymous` or `use-credentials`.
+   *
+   * @return {string|null|undefined}
+   *         - The current crossorigin value of the `Player` when getting.
+   *         - undefined when setting
+   */
+  PosterImage.prototype.crossorigin = PosterImage.prototype.crossOrigin;
+  Component.registerComponent('PosterImage', PosterImage);
+
+  /**
+   * @file text-track-display.js
+   */
+  const darkGray = '#222';
+  const lightGray = '#ccc';
+  const fontMap = {
+    monospace: 'monospace',
+    sansSerif: 'sans-serif',
+    serif: 'serif',
+    monospaceSansSerif: '"Andale Mono", "Lucida Console", monospace',
+    monospaceSerif: '"Courier New", monospace',
+    proportionalSansSerif: 'sans-serif',
+    proportionalSerif: 'serif',
+    casual: '"Comic Sans MS", Impact, fantasy',
+    script: '"Monotype Corsiva", cursive',
+    smallcaps: '"Andale Mono", "Lucida Console", monospace, sans-serif'
+  };
+
+  /**
+   * Construct an rgba color from a given hex color code.
+   *
+   * @param {number} color
+   *        Hex number for color, like #f0e or #f604e2.
+   *
+   * @param {number} opacity
+   *        Value for opacity, 0.0 - 1.0.
+   *
+   * @return {string}
+   *         The rgba color that was created, like 'rgba(255, 0, 0, 0.3)'.
+   */
+  function constructColor(color, opacity) {
+    let hex;
+    if (color.length === 4) {
+      // color looks like "#f0e"
+      hex = color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+    } else if (color.length === 7) {
+      // color looks like "#f604e2"
+      hex = color.slice(1);
+    } else {
+      throw new Error('Invalid color code provided, ' + color + '; must be formatted as e.g. #f0e or #f604e2.');
+    }
+    return 'rgba(' + parseInt(hex.slice(0, 2), 16) + ',' + parseInt(hex.slice(2, 4), 16) + ',' + parseInt(hex.slice(4, 6), 16) + ',' + opacity + ')';
+  }
+
+  /**
+   * Try to update the style of a DOM element. Some style changes will throw an error,
+   * particularly in IE8. Those should be noops.
+   *
+   * @param {Element} el
+   *        The DOM element to be styled.
+   *
+   * @param {string} style
+   *        The CSS property on the element that should be styled.
+   *
+   * @param {string} rule
+   *        The style rule that should be applied to the property.
+   *
+   * @private
+   */
+  function tryUpdateStyle(el, style, rule) {
+    try {
+      el.style[style] = rule;
+    } catch (e) {
+      // Satisfies linter.
+      return;
+    }
+  }
+
+  /**
+   * Converts the CSS top/right/bottom/left property numeric value to string in pixels.
+   *
+   * @param {number} position
+   *        The CSS top/right/bottom/left property value.
+   *
+   * @return {string}
+   *          The CSS property value that was created, like '10px'.
+   *
+   * @private
+   */
+  function getCSSPositionValue(position) {
+    return position ? `${position}px` : '';
+  }
+
+  /**
+   * The component for displaying text track cues.
+   *
+   * @extends Component
+   */
+  class TextTrackDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when `TextTrackDisplay` is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      const updateDisplayTextHandler = e => this.updateDisplay(e);
+      const updateDisplayHandler = e => {
+        this.updateDisplayOverlay();
+        this.updateDisplay(e);
+      };
+      player.on('loadstart', e => this.toggleDisplay(e));
+      player.on('texttrackchange', updateDisplayTextHandler);
+      player.on('loadedmetadata', e => {
+        this.updateDisplayOverlay();
+        this.preselectTrack(e);
+      });
+
+      // This used to be called during player init, but was causing an error
+      // if a track should show by default and the display hadn't loaded yet.
+      // Should probably be moved to an external track loader when we support
+      // tracks that don't need a display.
+      player.ready(bind_(this, function () {
+        if (player.tech_ && player.tech_.featuresNativeTextTracks) {
+          this.hide();
+          return;
+        }
+        player.on('fullscreenchange', updateDisplayHandler);
+        player.on('playerresize', updateDisplayHandler);
+        const screenOrientation = window.screen.orientation || window;
+        const changeOrientationEvent = window.screen.orientation ? 'change' : 'orientationchange';
+        screenOrientation.addEventListener(changeOrientationEvent, updateDisplayHandler);
+        player.on('dispose', () => screenOrientation.removeEventListener(changeOrientationEvent, updateDisplayHandler));
+        const tracks = this.options_.playerOptions.tracks || [];
+        for (let i = 0; i < tracks.length; i++) {
+          this.player_.addRemoteTextTrack(tracks[i], true);
+        }
+        this.preselectTrack();
+      }));
+    }
+
+    /**
+    * Preselect a track following this precedence:
+    * - matches the previously selected {@link TextTrack}'s language and kind
+    * - matches the previously selected {@link TextTrack}'s language only
+    * - is the first default captions track
+    * - is the first default descriptions track
+    *
+    * @listens Player#loadstart
+    */
+    preselectTrack() {
+      const modes = {
+        captions: 1,
+        subtitles: 1
+      };
+      const trackList = this.player_.textTracks();
+      const userPref = this.player_.cache_.selectedLanguage;
+      let firstDesc;
+      let firstCaptions;
+      let preferredTrack;
+      for (let i = 0; i < trackList.length; i++) {
+        const track = trackList[i];
+        if (userPref && userPref.enabled && userPref.language && userPref.language === track.language && track.kind in modes) {
+          // Always choose the track that matches both language and kind
+          if (track.kind === userPref.kind) {
+            preferredTrack = track;
+            // or choose the first track that matches language
+          } else if (!preferredTrack) {
+            preferredTrack = track;
+          }
+
+          // clear everything if offTextTrackMenuItem was clicked
+        } else if (userPref && !userPref.enabled) {
+          preferredTrack = null;
+          firstDesc = null;
+          firstCaptions = null;
+        } else if (track.default) {
+          if (track.kind === 'descriptions' && !firstDesc) {
+            firstDesc = track;
+          } else if (track.kind in modes && !firstCaptions) {
+            firstCaptions = track;
+          }
+        }
+      }
+
+      // The preferredTrack matches the user preference and takes
+      // precedence over all the other tracks.
+      // So, display the preferredTrack before the first default track
+      // and the subtitles/captions track before the descriptions track
+      if (preferredTrack) {
+        preferredTrack.mode = 'showing';
+      } else if (firstCaptions) {
+        firstCaptions.mode = 'showing';
+      } else if (firstDesc) {
+        firstDesc.mode = 'showing';
+      }
+    }
+
+    /**
+     * Turn display of {@link TextTrack}'s from the current state into the other state.
+     * There are only two states:
+     * - 'shown'
+     * - 'hidden'
+     *
+     * @listens Player#loadstart
+     */
+    toggleDisplay() {
+      if (this.player_.tech_ && this.player_.tech_.featuresNativeTextTracks) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+
+    /**
+     * Create the {@link Component}'s DOM element.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-text-track-display'
+      }, {
+        'translate': 'yes',
+        'aria-live': 'off',
+        'aria-atomic': 'true'
+      });
+    }
+
+    /**
+     * Clear all displayed {@link TextTrack}s.
+     */
+    clearDisplay() {
+      if (typeof window.WebVTT === 'function') {
+        window.WebVTT.processCues(window, [], this.el_);
+      }
+    }
+
+    /**
+     * Update the displayed TextTrack when a either a {@link Player#texttrackchange} or
+     * a {@link Player#fullscreenchange} is fired.
+     *
+     * @listens Player#texttrackchange
+     * @listens Player#fullscreenchange
+     */
+    updateDisplay() {
+      const tracks = this.player_.textTracks();
+      const allowMultipleShowingTracks = this.options_.allowMultipleShowingTracks;
+      this.clearDisplay();
+      if (allowMultipleShowingTracks) {
+        const showingTracks = [];
+        for (let i = 0; i < tracks.length; ++i) {
+          const track = tracks[i];
+          if (track.mode !== 'showing') {
+            continue;
+          }
+          showingTracks.push(track);
+        }
+        this.updateForTrack(showingTracks);
+        return;
+      }
+
+      //  Track display prioritization model: if multiple tracks are 'showing',
+      //  display the first 'subtitles' or 'captions' track which is 'showing',
+      //  otherwise display the first 'descriptions' track which is 'showing'
+
+      let descriptionsTrack = null;
+      let captionsSubtitlesTrack = null;
+      let i = tracks.length;
+      while (i--) {
+        const track = tracks[i];
+        if (track.mode === 'showing') {
+          if (track.kind === 'descriptions') {
+            descriptionsTrack = track;
+          } else {
+            captionsSubtitlesTrack = track;
+          }
+        }
+      }
+      if (captionsSubtitlesTrack) {
+        if (this.getAttribute('aria-live') !== 'off') {
+          this.setAttribute('aria-live', 'off');
+        }
+        this.updateForTrack(captionsSubtitlesTrack);
+      } else if (descriptionsTrack) {
+        if (this.getAttribute('aria-live') !== 'assertive') {
+          this.setAttribute('aria-live', 'assertive');
+        }
+        this.updateForTrack(descriptionsTrack);
+      }
+    }
+
+    /**
+     * Updates the displayed TextTrack to be sure it overlays the video when a either
+     * a {@link Player#texttrackchange} or a {@link Player#fullscreenchange} is fired.
+     */
+    updateDisplayOverlay() {
+      // inset-inline and inset-block are not supprted on old chrome, but these are
+      // only likely to be used on TV devices
+      if (!this.player_.videoHeight() || !window.CSS.supports('inset-inline: 10px')) {
+        return;
+      }
+      const playerWidth = this.player_.currentWidth();
+      const playerHeight = this.player_.currentHeight();
+      const playerAspectRatio = playerWidth / playerHeight;
+      const videoAspectRatio = this.player_.videoWidth() / this.player_.videoHeight();
+      let insetInlineMatch = 0;
+      let insetBlockMatch = 0;
+      if (Math.abs(playerAspectRatio - videoAspectRatio) > 0.1) {
+        if (playerAspectRatio > videoAspectRatio) {
+          insetInlineMatch = Math.round((playerWidth - playerHeight * videoAspectRatio) / 2);
+        } else {
+          insetBlockMatch = Math.round((playerHeight - playerWidth / videoAspectRatio) / 2);
+        }
+      }
+      tryUpdateStyle(this.el_, 'insetInline', getCSSPositionValue(insetInlineMatch));
+      tryUpdateStyle(this.el_, 'insetBlock', getCSSPositionValue(insetBlockMatch));
+    }
+
+    /**
+     * Style {@Link TextTrack} activeCues according to {@Link TextTrackSettings}.
+     *
+     * @param {TextTrack} track
+     *        Text track object containing active cues to style.
+     */
+    updateDisplayState(track) {
+      const overrides = this.player_.textTrackSettings.getValues();
+      const cues = track.activeCues;
+      let i = cues.length;
+      while (i--) {
+        const cue = cues[i];
+        if (!cue) {
+          continue;
+        }
+        const cueDiv = cue.displayState;
+        if (overrides.color) {
+          cueDiv.firstChild.style.color = overrides.color;
+        }
+        if (overrides.textOpacity) {
+          tryUpdateStyle(cueDiv.firstChild, 'color', constructColor(overrides.color || '#fff', overrides.textOpacity));
+        }
+        if (overrides.backgroundColor) {
+          cueDiv.firstChild.style.backgroundColor = overrides.backgroundColor;
+        }
+        if (overrides.backgroundOpacity) {
+          tryUpdateStyle(cueDiv.firstChild, 'backgroundColor', constructColor(overrides.backgroundColor || '#000', overrides.backgroundOpacity));
+        }
+        if (overrides.windowColor) {
+          if (overrides.windowOpacity) {
+            tryUpdateStyle(cueDiv, 'backgroundColor', constructColor(overrides.windowColor, overrides.windowOpacity));
+          } else {
+            cueDiv.style.backgroundColor = overrides.windowColor;
+          }
+        }
+        if (overrides.edgeStyle) {
+          if (overrides.edgeStyle === 'dropshadow') {
+            cueDiv.firstChild.style.textShadow = `2px 2px 3px ${darkGray}, 2px 2px 4px ${darkGray}, 2px 2px 5px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'raised') {
+            cueDiv.firstChild.style.textShadow = `1px 1px ${darkGray}, 2px 2px ${darkGray}, 3px 3px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'depressed') {
+            cueDiv.firstChild.style.textShadow = `1px 1px ${lightGray}, 0 1px ${lightGray}, -1px -1px ${darkGray}, 0 -1px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'uniform') {
+            cueDiv.firstChild.style.textShadow = `0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}`;
+          }
+        }
+        if (overrides.fontPercent && overrides.fontPercent !== 1) {
+          const fontSize = window.parseFloat(cueDiv.style.fontSize);
+          cueDiv.style.fontSize = fontSize * overrides.fontPercent + 'px';
+          cueDiv.style.height = 'auto';
+          cueDiv.style.top = 'auto';
+        }
+        if (overrides.fontFamily && overrides.fontFamily !== 'default') {
+          if (overrides.fontFamily === 'small-caps') {
+            cueDiv.firstChild.style.fontVariant = 'small-caps';
+          } else {
+            cueDiv.firstChild.style.fontFamily = fontMap[overrides.fontFamily];
+          }
+        }
+      }
+    }
+
+    /**
+     * Add an {@link TextTrack} to to the {@link Tech}s {@link TextTrackList}.
+     *
+     * @param {TextTrack|TextTrack[]} tracks
+     *        Text track object or text track array to be added to the list.
+     */
+    updateForTrack(tracks) {
+      if (!Array.isArray(tracks)) {
+        tracks = [tracks];
+      }
+      if (typeof window.WebVTT !== 'function' || tracks.every(track => {
+        return !track.activeCues;
+      })) {
+        return;
+      }
+      const cues = [];
+
+      // push all active track cues
+      for (let i = 0; i < tracks.length; ++i) {
+        const track = tracks[i];
+        for (let j = 0; j < track.activeCues.length; ++j) {
+          cues.push(track.activeCues[j]);
+        }
+      }
+
+      // removes all cues before it processes new ones
+      window.WebVTT.processCues(window, cues, this.el_);
+
+      // add unique class to each language text track & add settings styling if necessary
+      for (let i = 0; i < tracks.length; ++i) {
+        const track = tracks[i];
+        for (let j = 0; j < track.activeCues.length; ++j) {
+          const cueEl = track.activeCues[j].displayState;
+          addClass(cueEl, 'vjs-text-track-cue', 'vjs-text-track-cue-' + (track.language ? track.language : i));
+          if (track.language) {
+            setAttribute(cueEl, 'lang', track.language);
+          }
+        }
+        if (this.player_.textTrackSettings) {
+          this.updateDisplayState(track);
+        }
+      }
+    }
+  }
+  Component.registerComponent('TextTrackDisplay', TextTrackDisplay);
+
+  /**
+   * @file loading-spinner.js
+   */
+
+  /**
+   * A loading spinner for use during waiting/loading events.
+   *
+   * @extends Component
+   */
+  class LoadingSpinner extends Component {
+    /**
+     * Create the `LoadingSpinner`s DOM element.
+     *
+     * @return {Element}
+     *         The dom element that gets created.
+     */
+    createEl() {
+      const isAudio = this.player_.isAudio();
+      const playerType = this.localize(isAudio ? 'Audio Player' : 'Video Player');
+      const controlText = createEl('span', {
+        className: 'vjs-control-text',
+        textContent: this.localize('{1} is loading.', [playerType])
+      });
+      const el = super.createEl('div', {
+        className: 'vjs-loading-spinner',
+        dir: 'ltr'
+      });
+      el.appendChild(controlText);
+      return el;
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-control-text').textContent = this.localize('{1} is loading.', [this.player_.isAudio() ? 'Audio Player' : 'Video Player']);
+    }
+  }
+  Component.registerComponent('LoadingSpinner', LoadingSpinner);
+
+  /**
+   * @file button.js
+   */
+
+  /**
+   * Base class for all buttons.
+   *
+   * @extends ClickableComponent
+   */
+  class Button extends ClickableComponent {
+    /**
+     * Create the `Button`s DOM element.
+     *
+     * @param {string} [tag="button"]
+     *        The element's node type. This argument is IGNORED: no matter what
+     *        is passed, it will always create a `button` element.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element.
+     *
+     * @param {Object} [attributes={}]
+     *        An object of attributes that should be set on the element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tag, props = {}, attributes = {}) {
+      tag = 'button';
+      props = Object.assign({
+        className: this.buildCSSClass()
+      }, props);
+
+      // Add attributes for button element
+      attributes = Object.assign({
+        // Necessary since the default button type is "submit"
+        type: 'button'
+      }, attributes);
+      const el = createEl(tag, props, attributes);
+      if (!this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+      }
+      this.createControlTextEl(el);
+      return el;
+    }
+
+    /**
+     * Add a child `Component` inside of this `Button`.
+     *
+     * @param {string|Component} child
+     *        The name or instance of a child to add.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of options that will get passed to children of
+     *        the child.
+     *
+     * @return {Component}
+     *         The `Component` that gets added as a child. When using a string the
+     *         `Component` will get created by this process.
+     *
+     * @deprecated since version 5
+     */
+    addChild(child, options = {}) {
+      const className = this.constructor.name;
+      log.warn(`Adding an actionable (user controllable) child to a Button (${className}) is not supported; use a ClickableComponent instead.`);
+
+      // Avoid the error message generated by ClickableComponent's addChild method
+      return Component.prototype.addChild.call(this, child, options);
+    }
+
+    /**
+     * Enable the `Button` element so that it can be activated or clicked. Use this with
+     * {@link Button#disable}.
+     */
+    enable() {
+      super.enable();
+      this.el_.removeAttribute('disabled');
+    }
+
+    /**
+     * Disable the `Button` element so that it cannot be activated or clicked. Use this with
+     * {@link Button#enable}.
+     */
+    disable() {
+      super.disable();
+      this.el_.setAttribute('disabled', 'disabled');
+    }
+
+    /**
+     * This gets called when a `Button` has focus and `keydown` is triggered via a key
+     * press.
+     *
+     * @param {KeyboardEvent} event
+     *        The event that caused this function to get called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Ignore Space or Enter key operation, which is handled by the browser for
+      // a button - though not for its super class, ClickableComponent. Also,
+      // prevent the event from propagating through the DOM and triggering Player
+      // hotkeys. We do not preventDefault here because we _want_ the browser to
+      // handle it.
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.stopPropagation();
+        return;
+      }
+
+      // Pass keypress handling up for unsupported keys
+      super.handleKeyDown(event);
+    }
+  }
+  Component.registerComponent('Button', Button);
+
+  /**
+   * @file big-play-button.js
+   */
+
+  /**
+   * The initial play button that shows before the video has played. The hiding of the
+   * `BigPlayButton` get done via CSS and `Player` states.
+   *
+   * @extends Button
+   */
+  class BigPlayButton extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.mouseused_ = false;
+      this.setIcon('play');
+      this.on('mousedown', e => this.handleMouseDown(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object. Always returns 'vjs-big-play-button'.
+     */
+    buildCSSClass() {
+      return 'vjs-big-play-button';
+    }
+
+    /**
+     * This gets called when a `BigPlayButton` "clicked". See {@link ClickableComponent}
+     * for more detailed information on what a click can be.
+     *
+     * @param {KeyboardEvent|MouseEvent|TouchEvent} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const playPromise = this.player_.play();
+
+      // exit early if clicked via the mouse
+      if (this.mouseused_ && 'clientX' in event && 'clientY' in event) {
+        silencePromise(playPromise);
+        if (this.player_.tech(true)) {
+          this.player_.tech(true).focus();
+        }
+        return;
+      }
+      const cb = this.player_.getChild('controlBar');
+      const playToggle = cb && cb.getChild('playToggle');
+      if (!playToggle) {
+        this.player_.tech(true).focus();
+        return;
+      }
+      const playFocus = () => playToggle.focus();
+      if (isPromise(playPromise)) {
+        playPromise.then(playFocus, () => {});
+      } else {
+        this.setTimeout(playFocus, 1);
+      }
+    }
+
+    /**
+     * Event handler that is called when a `BigPlayButton` receives a
+     * `keydown` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      this.mouseused_ = false;
+      super.handleKeyDown(event);
+    }
+
+    /**
+     * Handle `mousedown` events on the `BigPlayButton`.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      this.mouseused_ = true;
+    }
+  }
+
+  /**
+   * The text that should display over the `BigPlayButton`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  BigPlayButton.prototype.controlText_ = 'Play Video';
+  Component.registerComponent('BigPlayButton', BigPlayButton);
+
+  /**
+   * @file close-button.js
+   */
+
+  /**
+   * The `CloseButton` is a `{@link Button}` that fires a `close` event when
+   * it gets clicked.
+   *
+   * @extends Button
+   */
+  class CloseButton extends Button {
+    /**
+    * Creates an instance of the this class.
+    *
+    * @param  { import('./player').default } player
+    *         The `Player` that this class should be attached to.
+    *
+    * @param  {Object} [options]
+    *         The key/value store of player options.
+    */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('cancel');
+      this.controlText(options && options.controlText || this.localize('Close'));
+    }
+
+    /**
+    * Builds the default DOM `className`.
+    *
+    * @return {string}
+    *         The DOM `className` for this object.
+    */
+    buildCSSClass() {
+      return `vjs-close-button ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when a `CloseButton` gets clicked. See
+     * {@link ClickableComponent#handleClick} for more information on when
+     * this will be triggered
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     * @fires CloseButton#close
+     */
+    handleClick(event) {
+      /**
+       * Triggered when the a `CloseButton` is clicked.
+       *
+       * @event CloseButton#close
+       * @type {Event}
+       *
+       * @property {boolean} [bubbles=false]
+       *           set to false so that the close event does not
+       *           bubble up to parents if there is no listener
+       */
+      this.trigger({
+        type: 'close',
+        bubbles: false
+      });
+    }
+    /**
+     * Event handler that is called when a `CloseButton` receives a
+     * `keydown` event.
+     *
+     * By default, if the key is Esc, it will trigger a `click` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Esc button will trigger `click` event
+      if (keycode.isEventKey(event, 'Esc')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.trigger('click');
+      } else {
+        // Pass keypress handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+  }
+  Component.registerComponent('CloseButton', CloseButton);
+
+  /**
+   * @file play-toggle.js
+   */
+
+  /**
+   * Button to toggle between play and pause.
+   *
+   * @extends Button
+   */
+  class PlayToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+
+      // show or hide replay icon
+      options.replay = options.replay === undefined || options.replay;
+      this.setIcon('play');
+      this.on(player, 'play', e => this.handlePlay(e));
+      this.on(player, 'pause', e => this.handlePause(e));
+      if (options.replay) {
+        this.on(player, 'ended', e => this.handleEnded(e));
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-play-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when an `PlayToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (this.player_.paused()) {
+        silencePromise(this.player_.play());
+      } else {
+        this.player_.pause();
+      }
+    }
+
+    /**
+     * This gets called once after the video has ended and the user seeks so that
+     * we can change the replay button back to a play button.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#seeked
+     */
+    handleSeeked(event) {
+      this.removeClass('vjs-ended');
+      if (this.player_.paused()) {
+        this.handlePause(event);
+      } else {
+        this.handlePlay(event);
+      }
+    }
+
+    /**
+     * Add the vjs-playing class to the element so it can change appearance.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#play
+     */
+    handlePlay(event) {
+      this.removeClass('vjs-ended', 'vjs-paused');
+      this.addClass('vjs-playing');
+      // change the button text to "Pause"
+      this.setIcon('pause');
+      this.controlText('Pause');
+    }
+
+    /**
+     * Add the vjs-paused class to the element so it can change appearance.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#pause
+     */
+    handlePause(event) {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      // change the button text to "Play"
+      this.setIcon('play');
+      this.controlText('Play');
+    }
+
+    /**
+     * Add the vjs-ended class to the element so it can change appearance
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#ended
+     */
+    handleEnded(event) {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-ended');
+      // change the button text to "Replay"
+      this.setIcon('replay');
+      this.controlText('Replay');
+
+      // on the next seek remove the replay button
+      this.one(this.player_, 'seeked', e => this.handleSeeked(e));
+    }
+  }
+
+  /**
+   * The text that should display over the `PlayToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PlayToggle.prototype.controlText_ = 'Play';
+  Component.registerComponent('PlayToggle', PlayToggle);
+
+  /**
+   * @file time-display.js
+   */
+
+  /**
+   * Displays time information about the video
+   *
+   * @extends Component
+   */
+  class TimeDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, ['timeupdate', 'ended', 'seeking'], e => this.update(e));
+      this.updateTextNode_();
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const className = this.buildCSSClass();
+      const el = super.createEl('div', {
+        className: `${className} vjs-time-control vjs-control`
+      });
+      const span = createEl('span', {
+        className: 'vjs-control-text',
+        textContent: `${this.localize(this.labelText_)}\u00a0`
+      }, {
+        role: 'presentation'
+      });
+      el.appendChild(span);
+      this.contentEl_ = createEl('span', {
+        className: `${className}-display`
+      }, {
+        // span elements have no implicit role, but some screen readers (notably VoiceOver)
+        // treat them as a break between items in the DOM when using arrow keys
+        // (or left-to-right swipes on iOS) to read contents of a page. Using
+        // role='presentation' causes VoiceOver to NOT treat this span as a break.
+        role: 'presentation'
+      });
+      el.appendChild(this.contentEl_);
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.textNode_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Updates the displayed time according to the `updateContent` function which is defined in the child class.
+     *
+     * @param {Event} [event]
+     *          The `timeupdate`, `ended` or `seeking` (if enableSmoothSeeking is true) event that caused this function to be called.
+     */
+    update(event) {
+      if (!this.player_.options_.enableSmoothSeeking && event.type === 'seeking') {
+        return;
+      }
+      this.updateContent(event);
+    }
+
+    /**
+     * Updates the time display text node with a new time
+     *
+     * @param {number} [time=0] the time to update to
+     *
+     * @private
+     */
+    updateTextNode_(time = 0) {
+      time = formatTime(time);
+      if (this.formattedTime_ === time) {
+        return;
+      }
+      this.formattedTime_ = time;
+      this.requestNamedAnimationFrame('TimeDisplay#updateTextNode_', () => {
+        if (!this.contentEl_) {
+          return;
+        }
+        let oldNode = this.textNode_;
+        if (oldNode && this.contentEl_.firstChild !== oldNode) {
+          oldNode = null;
+          log.warn('TimeDisplay#updateTextnode_: Prevented replacement of text node element since it was no longer a child of this node. Appending a new node instead.');
+        }
+        this.textNode_ = document.createTextNode(this.formattedTime_);
+        if (!this.textNode_) {
+          return;
+        }
+        if (oldNode) {
+          this.contentEl_.replaceChild(this.textNode_, oldNode);
+        } else {
+          this.contentEl_.appendChild(this.textNode_);
+        }
+      });
+    }
+
+    /**
+     * To be filled out in the child class, should update the displayed time
+     * in accordance with the fact that the current time has changed.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate`  event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     */
+    updateContent(event) {}
+  }
+
+  /**
+   * The text that is added to the `TimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  TimeDisplay.prototype.labelText_ = 'Time';
+
+  /**
+   * The text that should display over the `TimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  TimeDisplay.prototype.controlText_ = 'Time';
+  Component.registerComponent('TimeDisplay', TimeDisplay);
+
+  /**
+   * @file current-time-display.js
+   */
+
+  /**
+   * Displays the current time
+   *
+   * @extends Component
+   */
+  class CurrentTimeDisplay extends TimeDisplay {
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-current-time';
+    }
+
+    /**
+     * Update current time display
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` event that caused this function to run.
+     *
+     * @listens Player#timeupdate
+     */
+    updateContent(event) {
+      // Allows for smooth scrubbing, when player can't keep up.
+      let time;
+      if (this.player_.ended()) {
+        time = this.player_.duration();
+      } else {
+        time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+      }
+      this.updateTextNode_(time);
+    }
+  }
+
+  /**
+   * The text that is added to the `CurrentTimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  CurrentTimeDisplay.prototype.labelText_ = 'Current Time';
+
+  /**
+   * The text that should display over the `CurrentTimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  CurrentTimeDisplay.prototype.controlText_ = 'Current Time';
+  Component.registerComponent('CurrentTimeDisplay', CurrentTimeDisplay);
+
+  /**
+   * @file duration-display.js
+   */
+
+  /**
+   * Displays the duration
+   *
+   * @extends Component
+   */
+  class DurationDisplay extends TimeDisplay {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      const updateContent = e => this.updateContent(e);
+
+      // we do not want to/need to throttle duration changes,
+      // as they should always display the changed duration as
+      // it has changed
+      this.on(player, 'durationchange', updateContent);
+
+      // Listen to loadstart because the player duration is reset when a new media element is loaded,
+      // but the durationchange on the user agent will not fire.
+      // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
+      this.on(player, 'loadstart', updateContent);
+
+      // Also listen for timeupdate (in the parent) and loadedmetadata because removing those
+      // listeners could have broken dependent applications/libraries. These
+      // can likely be removed for 7.0.
+      this.on(player, 'loadedmetadata', updateContent);
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-duration';
+    }
+
+    /**
+     * Update duration time display.
+     *
+     * @param {Event} [event]
+     *        The `durationchange`, `timeupdate`, or `loadedmetadata` event that caused
+     *        this function to be called.
+     *
+     * @listens Player#durationchange
+     * @listens Player#timeupdate
+     * @listens Player#loadedmetadata
+     */
+    updateContent(event) {
+      const duration = this.player_.duration();
+      this.updateTextNode_(duration);
+    }
+  }
+
+  /**
+   * The text that is added to the `DurationDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  DurationDisplay.prototype.labelText_ = 'Duration';
+
+  /**
+   * The text that should display over the `DurationDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  DurationDisplay.prototype.controlText_ = 'Duration';
+  Component.registerComponent('DurationDisplay', DurationDisplay);
+
+  /**
+   * @file time-divider.js
+   */
+
+  /**
+   * The separator between the current time and duration.
+   * Can be hidden if it's not needed in the design.
+   *
+   * @extends Component
+   */
+  class TimeDivider extends Component {
+    /**
+     * Create the component's DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-time-control vjs-time-divider'
+      }, {
+        // this element and its contents can be hidden from assistive techs since
+        // it is made extraneous by the announcement of the control text
+        // for the current time and duration displays
+        'aria-hidden': true
+      });
+      const div = super.createEl('div');
+      const span = super.createEl('span', {
+        textContent: '/'
+      });
+      div.appendChild(span);
+      el.appendChild(div);
+      return el;
+    }
+  }
+  Component.registerComponent('TimeDivider', TimeDivider);
+
+  /**
+   * @file remaining-time-display.js
+   */
+
+  /**
+   * Displays the time left in the video
+   *
+   * @extends Component
+   */
+  class RemainingTimeDisplay extends TimeDisplay {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, 'durationchange', e => this.updateContent(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-remaining-time';
+    }
+
+    /**
+     * Create the `Component`'s DOM element with the "minus" character prepend to the time
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl();
+      if (this.options_.displayNegative !== false) {
+        el.insertBefore(createEl('span', {}, {
+          'aria-hidden': true
+        }, '-'), this.contentEl_);
+      }
+      return el;
+    }
+
+    /**
+     * Update remaining time display.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` or `durationchange` event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     * @listens Player#durationchange
+     */
+    updateContent(event) {
+      if (typeof this.player_.duration() !== 'number') {
+        return;
+      }
+      let time;
+
+      // @deprecated We should only use remainingTimeDisplay
+      // as of video.js 7
+      if (this.player_.ended()) {
+        time = 0;
+      } else if (this.player_.remainingTimeDisplay) {
+        time = this.player_.remainingTimeDisplay();
+      } else {
+        time = this.player_.remainingTime();
+      }
+      this.updateTextNode_(time);
+    }
+  }
+
+  /**
+   * The text that is added to the `RemainingTimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  RemainingTimeDisplay.prototype.labelText_ = 'Remaining Time';
+
+  /**
+   * The text that should display over the `RemainingTimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  RemainingTimeDisplay.prototype.controlText_ = 'Remaining Time';
+  Component.registerComponent('RemainingTimeDisplay', RemainingTimeDisplay);
+
+  /**
+   * @file live-display.js
+   */
+
+  // TODO - Future make it click to snap to live
+
+  /**
+   * Displays the live indicator when duration is Infinity.
+   *
+   * @extends Component
+   */
+  class LiveDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.updateShowing();
+      this.on(this.player(), 'durationchange', e => this.updateShowing(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-live-control vjs-control'
+      });
+      this.contentEl_ = createEl('div', {
+        className: 'vjs-live-display'
+      }, {
+        'aria-live': 'off'
+      });
+      this.contentEl_.appendChild(createEl('span', {
+        className: 'vjs-control-text',
+        textContent: `${this.localize('Stream Type')}\u00a0`
+      }));
+      this.contentEl_.appendChild(document.createTextNode(this.localize('LIVE')));
+      el.appendChild(this.contentEl_);
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Check the duration to see if the LiveDisplay should be showing or not. Then show/hide
+     * it accordingly
+     *
+     * @param {Event} [event]
+     *        The {@link Player#durationchange} event that caused this function to run.
+     *
+     * @listens Player#durationchange
+     */
+    updateShowing(event) {
+      if (this.player().duration() === Infinity) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }
+  Component.registerComponent('LiveDisplay', LiveDisplay);
+
+  /**
+   * @file seek-to-live.js
+   */
+
+  /**
+   * Displays the live indicator when duration is Infinity.
+   *
+   * @extends Component
+   */
+  class SeekToLive extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.updateLiveEdgeStatus();
+      if (this.player_.liveTracker) {
+        this.updateLiveEdgeStatusHandler_ = e => this.updateLiveEdgeStatus(e);
+        this.on(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
+      }
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('button', {
+        className: 'vjs-seek-to-live-control vjs-control'
+      });
+      this.setIcon('circle', el);
+      this.textEl_ = createEl('span', {
+        className: 'vjs-seek-to-live-text',
+        textContent: this.localize('LIVE')
+      }, {
+        'aria-hidden': 'true'
+      });
+      el.appendChild(this.textEl_);
+      return el;
+    }
+
+    /**
+     * Update the state of this button if we are at the live edge
+     * or not
+     */
+    updateLiveEdgeStatus() {
+      // default to live edge
+      if (!this.player_.liveTracker || this.player_.liveTracker.atLiveEdge()) {
+        this.setAttribute('aria-disabled', true);
+        this.addClass('vjs-at-live-edge');
+        this.controlText('Seek to live, currently playing live');
+      } else {
+        this.setAttribute('aria-disabled', false);
+        this.removeClass('vjs-at-live-edge');
+        this.controlText('Seek to live, currently behind live');
+      }
+    }
+
+    /**
+     * On click bring us as near to the live point as possible.
+     * This requires that we wait for the next `live-seekable-change`
+     * event which will happen every segment length seconds.
+     */
+    handleClick() {
+      this.player_.liveTracker.seekToLiveEdge();
+    }
+
+    /**
+     * Dispose of the element and stop tracking
+     */
+    dispose() {
+      if (this.player_.liveTracker) {
+        this.off(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
+      }
+      this.textEl_ = null;
+      super.dispose();
+    }
+  }
+  /**
+   * The text that should display over the `SeekToLive`s control. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  SeekToLive.prototype.controlText_ = 'Seek to live, currently playing live';
+  Component.registerComponent('SeekToLive', SeekToLive);
+
+  /**
+   * @file num.js
+   * @module num
+   */
+
+  /**
+   * Keep a number between a min and a max value
+   *
+   * @param {number} number
+   *        The number to clamp
+   *
+   * @param {number} min
+   *        The minimum value
+   * @param {number} max
+   *        The maximum value
+   *
+   * @return {number}
+   *         the clamped number
+   */
+  function clamp(number, min, max) {
+    number = Number(number);
+    return Math.min(max, Math.max(min, isNaN(number) ? min : number));
+  }
+
+  var Num = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    clamp: clamp
+  });
+
+  /**
+   * @file slider.js
+   */
+
+  /**
+   * The base functionality for a slider. Can be vertical or horizontal.
+   * For instance the volume bar or the seek bar on a video is a slider.
+   *
+   * @extends Component
+   */
+  class Slider extends Component {
+    /**
+    * Create an instance of this class
+    *
+    * @param { import('../player').default } player
+    *        The `Player` that this class should be attached to.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    */
+    constructor(player, options) {
+      super(player, options);
+      this.handleMouseDown_ = e => this.handleMouseDown(e);
+      this.handleMouseUp_ = e => this.handleMouseUp(e);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.handleClick_ = e => this.handleClick(e);
+      this.handleMouseMove_ = e => this.handleMouseMove(e);
+      this.update_ = e => this.update(e);
+
+      // Set property names to bar to match with the child Slider class is looking for
+      this.bar = this.getChild(this.options_.barName);
+
+      // Set a horizontal or vertical class on the slider depending on the slider type
+      this.vertical(!!this.options_.vertical);
+      this.enable();
+    }
+
+    /**
+     * Are controls are currently enabled for this slider or not.
+     *
+     * @return {boolean}
+     *         true if controls are enabled, false otherwise
+     */
+    enabled() {
+      return this.enabled_;
+    }
+
+    /**
+     * Enable controls for this slider if they are disabled
+     */
+    enable() {
+      if (this.enabled()) {
+        return;
+      }
+      this.on('mousedown', this.handleMouseDown_);
+      this.on('touchstart', this.handleMouseDown_);
+      this.on('keydown', this.handleKeyDown_);
+      this.on('click', this.handleClick_);
+
+      // TODO: deprecated, controlsvisible does not seem to be fired
+      this.on(this.player_, 'controlsvisible', this.update);
+      if (this.playerEvent) {
+        this.on(this.player_, this.playerEvent, this.update);
+      }
+      this.removeClass('disabled');
+      this.setAttribute('tabindex', 0);
+      this.enabled_ = true;
+    }
+
+    /**
+     * Disable controls for this slider if they are enabled
+     */
+    disable() {
+      if (!this.enabled()) {
+        return;
+      }
+      const doc = this.bar.el_.ownerDocument;
+      this.off('mousedown', this.handleMouseDown_);
+      this.off('touchstart', this.handleMouseDown_);
+      this.off('keydown', this.handleKeyDown_);
+      this.off('click', this.handleClick_);
+      this.off(this.player_, 'controlsvisible', this.update_);
+      this.off(doc, 'mousemove', this.handleMouseMove_);
+      this.off(doc, 'mouseup', this.handleMouseUp_);
+      this.off(doc, 'touchmove', this.handleMouseMove_);
+      this.off(doc, 'touchend', this.handleMouseUp_);
+      this.removeAttribute('tabindex');
+      this.addClass('disabled');
+      if (this.playerEvent) {
+        this.off(this.player_, this.playerEvent, this.update);
+      }
+      this.enabled_ = false;
+    }
+
+    /**
+     * Create the `Slider`s DOM element.
+     *
+     * @param {string} type
+     *        Type of element to create.
+     *
+     * @param {Object} [props={}]
+     *        List of properties in Object form.
+     *
+     * @param {Object} [attributes={}]
+     *        list of attributes in Object form.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(type, props = {}, attributes = {}) {
+      // Add the slider element class to all sub classes
+      props.className = props.className + ' vjs-slider';
+      props = Object.assign({
+        tabIndex: 0
+      }, props);
+      attributes = Object.assign({
+        'role': 'slider',
+        'aria-valuenow': 0,
+        'aria-valuemin': 0,
+        'aria-valuemax': 100
+      }, attributes);
+      return super.createEl(type, props, attributes);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `Slider`.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     * @fires Slider#slideractive
+     */
+    handleMouseDown(event) {
+      const doc = this.bar.el_.ownerDocument;
+      if (event.type === 'mousedown') {
+        event.preventDefault();
+      }
+      // Do not call preventDefault() on touchstart in Chrome
+      // to avoid console warnings. Use a 'touch-action: none' style
+      // instead to prevent unintended scrolling.
+      // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+      if (event.type === 'touchstart' && !IS_CHROME) {
+        event.preventDefault();
+      }
+      blockTextSelection();
+      this.addClass('vjs-sliding');
+      /**
+       * Triggered when the slider is in an active state
+       *
+       * @event Slider#slideractive
+       * @type {MouseEvent}
+       */
+      this.trigger('slideractive');
+      this.on(doc, 'mousemove', this.handleMouseMove_);
+      this.on(doc, 'mouseup', this.handleMouseUp_);
+      this.on(doc, 'touchmove', this.handleMouseMove_);
+      this.on(doc, 'touchend', this.handleMouseUp_);
+      this.handleMouseMove(event, true);
+    }
+
+    /**
+     * Handle the `mousemove`, `touchmove`, and `mousedown` events on this `Slider`.
+     * The `mousemove` and `touchmove` events will only only trigger this function during
+     * `mousedown` and `touchstart`. This is due to {@link Slider#handleMouseDown} and
+     * {@link Slider#handleMouseUp}.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown`, `mousemove`, `touchstart`, or `touchmove` event that triggered
+     *        this function
+     * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false.
+     *
+     * @listens mousemove
+     * @listens touchmove
+     */
+    handleMouseMove(event) {}
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `Slider`.
+     *
+     * @param {MouseEvent} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     * @fires Slider#sliderinactive
+     */
+    handleMouseUp(event) {
+      const doc = this.bar.el_.ownerDocument;
+      unblockTextSelection();
+      this.removeClass('vjs-sliding');
+      /**
+       * Triggered when the slider is no longer in an active state.
+       *
+       * @event Slider#sliderinactive
+       * @type {Event}
+       */
+      this.trigger('sliderinactive');
+      this.off(doc, 'mousemove', this.handleMouseMove_);
+      this.off(doc, 'mouseup', this.handleMouseUp_);
+      this.off(doc, 'touchmove', this.handleMouseMove_);
+      this.off(doc, 'touchend', this.handleMouseUp_);
+      this.update();
+    }
+
+    /**
+     * Update the progress bar of the `Slider`.
+     *
+     * @return {number}
+     *          The percentage of progress the progress bar represents as a
+     *          number from 0 to 1.
+     */
+    update() {
+      // In VolumeBar init we have a setTimeout for update that pops and update
+      // to the end of the execution stack. The player is destroyed before then
+      // update will cause an error
+      // If there's no bar...
+      if (!this.el_ || !this.bar) {
+        return;
+      }
+
+      // clamp progress between 0 and 1
+      // and only round to four decimal places, as we round to two below
+      const progress = this.getProgress();
+      if (progress === this.progress_) {
+        return progress;
+      }
+      this.progress_ = progress;
+      this.requestNamedAnimationFrame('Slider#update', () => {
+        // Set the new bar width or height
+        const sizeKey = this.vertical() ? 'height' : 'width';
+
+        // Convert to a percentage for css value
+        this.bar.el().style[sizeKey] = (progress * 100).toFixed(2) + '%';
+      });
+      return progress;
+    }
+
+    /**
+     * Get the percentage of the bar that should be filled
+     * but clamped and rounded.
+     *
+     * @return {number}
+     *         percentage filled that the slider is
+     */
+    getProgress() {
+      return Number(clamp(this.getPercent(), 0, 1).toFixed(4));
+    }
+
+    /**
+     * Calculate distance for slider
+     *
+     * @param {Event} event
+     *        The event that caused this function to run.
+     *
+     * @return {number}
+     *         The current position of the Slider.
+     *         - position.x for vertical `Slider`s
+     *         - position.y for horizontal `Slider`s
+     */
+    calculateDistance(event) {
+      const position = getPointerPosition(this.el_, event);
+      if (this.vertical()) {
+        return position.y;
+      }
+      return position.x;
+    }
+
+    /**
+     * Handle a `keydown` event on the `Slider`. Watches for left, right, up, and down
+     * arrow keys. This function will only be called when the slider has focus. See
+     * {@link Slider#handleFocus} and {@link Slider#handleBlur}.
+     *
+     * @param {KeyboardEvent} event
+     *        the `keydown` event that caused this function to run.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Left and Down Arrows
+      if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepBack();
+
+        // Up and Right Arrows
+      } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepForward();
+      } else {
+        // Pass keydown handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Listener for click events on slider, used to prevent clicks
+     *   from bubbling up to parent elements like button menus.
+     *
+     * @param {Object} event
+     *        Event that caused this object to run
+     */
+    handleClick(event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+
+    /**
+     * Get/set if slider is horizontal for vertical
+     *
+     * @param {boolean} [bool]
+     *        - true if slider is vertical,
+     *        - false is horizontal
+     *
+     * @return {boolean}
+     *         - true if slider is vertical, and getting
+     *         - false if the slider is horizontal, and getting
+     */
+    vertical(bool) {
+      if (bool === undefined) {
+        return this.vertical_ || false;
+      }
+      this.vertical_ = !!bool;
+      if (this.vertical_) {
+        this.addClass('vjs-slider-vertical');
+      } else {
+        this.addClass('vjs-slider-horizontal');
+      }
+    }
+  }
+  Component.registerComponent('Slider', Slider);
+
+  /**
+   * @file load-progress-bar.js
+   */
+
+  // get the percent width of a time compared to the total end
+  const percentify = (time, end) => clamp(time / end * 100, 0, 100).toFixed(2) + '%';
+
+  /**
+   * Shows loading progress
+   *
+   * @extends Component
+   */
+  class LoadProgressBar extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.partEls_ = [];
+      this.on(player, 'progress', e => this.update(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-load-progress'
+      });
+      const wrapper = createEl('span', {
+        className: 'vjs-control-text'
+      });
+      const loadedText = createEl('span', {
+        textContent: this.localize('Loaded')
+      });
+      const separator = document.createTextNode(': ');
+      this.percentageEl_ = createEl('span', {
+        className: 'vjs-control-text-loaded-percentage',
+        textContent: '0%'
+      });
+      el.appendChild(wrapper);
+      wrapper.appendChild(loadedText);
+      wrapper.appendChild(separator);
+      wrapper.appendChild(this.percentageEl_);
+      return el;
+    }
+    dispose() {
+      this.partEls_ = null;
+      this.percentageEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Update progress bar
+     *
+     * @param {Event} [event]
+     *        The `progress` event that caused this function to run.
+     *
+     * @listens Player#progress
+     */
+    update(event) {
+      this.requestNamedAnimationFrame('LoadProgressBar#update', () => {
+        const liveTracker = this.player_.liveTracker;
+        const buffered = this.player_.buffered();
+        const duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
+        const bufferedEnd = this.player_.bufferedEnd();
+        const children = this.partEls_;
+        const percent = percentify(bufferedEnd, duration);
+        if (this.percent_ !== percent) {
+          // update the width of the progress bar
+          this.el_.style.width = percent;
+          // update the control-text
+          textContent(this.percentageEl_, percent);
+          this.percent_ = percent;
+        }
+
+        // add child elements to represent the individual buffered time ranges
+        for (let i = 0; i < buffered.length; i++) {
+          const start = buffered.start(i);
+          const end = buffered.end(i);
+          let part = children[i];
+          if (!part) {
+            part = this.el_.appendChild(createEl());
+            children[i] = part;
+          }
+
+          //  only update if changed
+          if (part.dataset.start === start && part.dataset.end === end) {
+            continue;
+          }
+          part.dataset.start = start;
+          part.dataset.end = end;
+
+          // set the percent based on the width of the progress bar (bufferedEnd)
+          part.style.left = percentify(start, bufferedEnd);
+          part.style.width = percentify(end - start, bufferedEnd);
+        }
+
+        // remove unused buffered range elements
+        for (let i = children.length; i > buffered.length; i--) {
+          this.el_.removeChild(children[i - 1]);
+        }
+        children.length = buffered.length;
+      });
+    }
+  }
+  Component.registerComponent('LoadProgressBar', LoadProgressBar);
+
+  /**
+   * @file time-tooltip.js
+   */
+
+  /**
+   * Time tooltips display a time above the progress bar.
+   *
+   * @extends Component
+   */
+  class TimeTooltip extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the time tooltip DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-time-tooltip'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Updates the position of the time tooltip relative to the `SeekBar`.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint, content) {
+      const tooltipRect = findPosition(this.el_);
+      const playerRect = getBoundingClientRect(this.player_.el());
+      const seekBarPointPx = seekBarRect.width * seekBarPoint;
+
+      // do nothing if either rect isn't available
+      // for example, if the player isn't in the DOM for testing
+      if (!playerRect || !tooltipRect) {
+        return;
+      }
+
+      // This is the space left of the `seekBarPoint` available within the bounds
+      // of the player. We calculate any gap between the left edge of the player
+      // and the left edge of the `SeekBar` and add the number of pixels in the
+      // `SeekBar` before hitting the `seekBarPoint`
+      let spaceLeftOfPoint = seekBarRect.left - playerRect.left + seekBarPointPx;
+
+      // This is the space right of the `seekBarPoint` available within the bounds
+      // of the player. We calculate the number of pixels from the `seekBarPoint`
+      // to the right edge of the `SeekBar` and add to that any gap between the
+      // right edge of the `SeekBar` and the player.
+      let spaceRightOfPoint = seekBarRect.width - seekBarPointPx + (playerRect.right - seekBarRect.right);
+
+      // spaceRightOfPoint is always NaN for mouse time display
+      // because the seekbarRect does not have a right property. This causes
+      // the mouse tool tip to be truncated when it's close to the right edge of the player.
+      // In such cases, we ignore the `playerRect.right - seekBarRect.right` value when calculating.
+      // For the sake of consistency, we ignore seekBarRect.left - playerRect.left for the left edge.
+      if (!spaceRightOfPoint) {
+        spaceRightOfPoint = seekBarRect.width - seekBarPointPx;
+        spaceLeftOfPoint = seekBarPointPx;
+      }
+      // This is the number of pixels by which the tooltip will need to be pulled
+      // further to the right to center it over the `seekBarPoint`.
+      let pullTooltipBy = tooltipRect.width / 2;
+
+      // Adjust the `pullTooltipBy` distance to the left or right depending on
+      // the results of the space calculations above.
+      if (spaceLeftOfPoint < pullTooltipBy) {
+        pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
+      } else if (spaceRightOfPoint < pullTooltipBy) {
+        pullTooltipBy = spaceRightOfPoint;
+      }
+
+      // Due to the imprecision of decimal/ratio based calculations and varying
+      // rounding behaviors, there are cases where the spacing adjustment is off
+      // by a pixel or two. This adds insurance to these calculations.
+      if (pullTooltipBy < 0) {
+        pullTooltipBy = 0;
+      } else if (pullTooltipBy > tooltipRect.width) {
+        pullTooltipBy = tooltipRect.width;
+      }
+
+      // prevent small width fluctuations within 0.4px from
+      // changing the value below.
+      // This really helps for live to prevent the play
+      // progress time tooltip from jittering
+      pullTooltipBy = Math.round(pullTooltipBy);
+      this.el_.style.right = `-${pullTooltipBy}px`;
+      this.write(content);
+    }
+
+    /**
+     * Write the time to the tooltip DOM element.
+     *
+     * @param {string} content
+     *        The formatted time for the tooltip.
+     */
+    write(content) {
+      textContent(this.el_, content);
+    }
+
+    /**
+     * Updates the position of the time tooltip relative to the `SeekBar`.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     *
+     * @param {number} time
+     *        The time to update the tooltip to, not used during live playback
+     *
+     * @param {Function} cb
+     *        A function that will be called during the request animation frame
+     *        for tooltips that need to do additional animations from the default
+     */
+    updateTime(seekBarRect, seekBarPoint, time, cb) {
+      this.requestNamedAnimationFrame('TimeTooltip#updateTime', () => {
+        let content;
+        const duration = this.player_.duration();
+        if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+          const liveWindow = this.player_.liveTracker.liveWindow();
+          const secondsBehind = liveWindow - seekBarPoint * liveWindow;
+          content = (secondsBehind < 1 ? '' : '-') + formatTime(secondsBehind, liveWindow);
+        } else {
+          content = formatTime(time, duration);
+        }
+        this.update(seekBarRect, seekBarPoint, content);
+        if (cb) {
+          cb();
+        }
+      });
+    }
+  }
+  Component.registerComponent('TimeTooltip', TimeTooltip);
+
+  /**
+   * @file play-progress-bar.js
+   */
+
+  /**
+   * Used by {@link SeekBar} to display media playback progress as part of the
+   * {@link ProgressControl}.
+   *
+   * @extends Component
+   */
+  class PlayProgressBar extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('circle');
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-play-progress vjs-slider-bar'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Enqueues updates to its own DOM as well as the DOM of its
+     * {@link TimeTooltip} child.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint) {
+      const timeTooltip = this.getChild('timeTooltip');
+      if (!timeTooltip) {
+        return;
+      }
+      const time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+      timeTooltip.updateTime(seekBarRect, seekBarPoint, time);
+    }
+  }
+
+  /**
+   * Default options for {@link PlayProgressBar}.
+   *
+   * @type {Object}
+   * @private
+   */
+  PlayProgressBar.prototype.options_ = {
+    children: []
+  };
+
+  // Time tooltips should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    PlayProgressBar.prototype.options_.children.push('timeTooltip');
+  }
+  Component.registerComponent('PlayProgressBar', PlayProgressBar);
+
+  /**
+   * @file mouse-time-display.js
+   */
+
+  /**
+   * The {@link MouseTimeDisplay} component tracks mouse movement over the
+   * {@link ProgressControl}. It displays an indicator and a {@link TimeTooltip}
+   * indicating the time which is represented by a given point in the
+   * {@link ProgressControl}.
+   *
+   * @extends Component
+   */
+  class MouseTimeDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-mouse-display'
+      });
+    }
+
+    /**
+     * Enqueues updates to its own DOM as well as the DOM of its
+     * {@link TimeTooltip} child.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint) {
+      const time = seekBarPoint * this.player_.duration();
+      this.getChild('timeTooltip').updateTime(seekBarRect, seekBarPoint, time, () => {
+        this.el_.style.left = `${seekBarRect.width * seekBarPoint}px`;
+      });
+    }
+  }
+
+  /**
+   * Default options for `MouseTimeDisplay`
+   *
+   * @type {Object}
+   * @private
+   */
+  MouseTimeDisplay.prototype.options_ = {
+    children: ['timeTooltip']
+  };
+  Component.registerComponent('MouseTimeDisplay', MouseTimeDisplay);
+
+  /**
+   * @file seek-bar.js
+   */
+
+  // The number of seconds the `step*` functions move the timeline.
+  const STEP_SECONDS = 5;
+
+  // The multiplier of STEP_SECONDS that PgUp/PgDown move the timeline.
+  const PAGE_KEY_MULTIPLIER = 12;
+
+  /**
+   * Seek bar and container for the progress bars. Uses {@link PlayProgressBar}
+   * as its `bar`.
+   *
+   * @extends Slider
+   */
+  class SeekBar extends Slider {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setEventHandlers_();
+    }
+
+    /**
+     * Sets the event handlers
+     *
+     * @private
+     */
+    setEventHandlers_() {
+      this.update_ = bind_(this, this.update);
+      this.update = throttle(this.update_, UPDATE_REFRESH_INTERVAL);
+      this.on(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
+      if (this.player_.liveTracker) {
+        this.on(this.player_.liveTracker, 'liveedgechange', this.update);
+      }
+
+      // when playing, let's ensure we smoothly update the play progress bar
+      // via an interval
+      this.updateInterval = null;
+      this.enableIntervalHandler_ = e => this.enableInterval_(e);
+      this.disableIntervalHandler_ = e => this.disableInterval_(e);
+      this.on(this.player_, ['playing'], this.enableIntervalHandler_);
+      this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
+
+      // we don't need to update the play progress if the document is hidden,
+      // also, this causes the CPU to spike and eventually crash the page on IE11.
+      if ('hidden' in document && 'visibilityState' in document) {
+        this.on(document, 'visibilitychange', this.toggleVisibility_);
+      }
+    }
+    toggleVisibility_(e) {
+      if (document.visibilityState === 'hidden') {
+        this.cancelNamedAnimationFrame('SeekBar#update');
+        this.cancelNamedAnimationFrame('Slider#update');
+        this.disableInterval_(e);
+      } else {
+        if (!this.player_.ended() && !this.player_.paused()) {
+          this.enableInterval_();
+        }
+
+        // we just switched back to the page and someone may be looking, so, update ASAP
+        this.update();
+      }
+    }
+    enableInterval_() {
+      if (this.updateInterval) {
+        return;
+      }
+      this.updateInterval = this.setInterval(this.update, UPDATE_REFRESH_INTERVAL);
+    }
+    disableInterval_(e) {
+      if (this.player_.liveTracker && this.player_.liveTracker.isLive() && e && e.type !== 'ended') {
+        return;
+      }
+      if (!this.updateInterval) {
+        return;
+      }
+      this.clearInterval(this.updateInterval);
+      this.updateInterval = null;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-progress-holder'
+      }, {
+        'aria-label': this.localize('Progress Bar')
+      });
+    }
+
+    /**
+     * This function updates the play progress bar and accessibility
+     * attributes to whatever is passed in.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` or `ended` event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     *
+     * @return {number}
+     *          The current percent at a number from 0-1
+     */
+    update(event) {
+      // ignore updates while the tab is hidden
+      if (document.visibilityState === 'hidden') {
+        return;
+      }
+      const percent = super.update();
+      this.requestNamedAnimationFrame('SeekBar#update', () => {
+        const currentTime = this.player_.ended() ? this.player_.duration() : this.getCurrentTime_();
+        const liveTracker = this.player_.liveTracker;
+        let duration = this.player_.duration();
+        if (liveTracker && liveTracker.isLive()) {
+          duration = this.player_.liveTracker.liveCurrentTime();
+        }
+        if (this.percent_ !== percent) {
+          // machine readable value of progress bar (percentage complete)
+          this.el_.setAttribute('aria-valuenow', (percent * 100).toFixed(2));
+          this.percent_ = percent;
+        }
+        if (this.currentTime_ !== currentTime || this.duration_ !== duration) {
+          // human readable value of progress bar (time complete)
+          this.el_.setAttribute('aria-valuetext', this.localize('progress bar timing: currentTime={1} duration={2}', [formatTime(currentTime, duration), formatTime(duration, duration)], '{1} of {2}'));
+          this.currentTime_ = currentTime;
+          this.duration_ = duration;
+        }
+
+        // update the progress bar time tooltip with the current time
+        if (this.bar) {
+          this.bar.update(getBoundingClientRect(this.el()), this.getProgress());
+        }
+      });
+      return percent;
+    }
+
+    /**
+     * Prevent liveThreshold from causing seeks to seem like they
+     * are not happening from a user perspective.
+     *
+     * @param {number} ct
+     *        current time to seek to
+     */
+    userSeek_(ct) {
+      if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+        this.player_.liveTracker.nextSeekedFromUser();
+      }
+      this.player_.currentTime(ct);
+    }
+
+    /**
+     * Get the value of current time but allows for smooth scrubbing,
+     * when player can't keep up.
+     *
+     * @return {number}
+     *         The current time value to display
+     *
+     * @private
+     */
+    getCurrentTime_() {
+      return this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+    }
+
+    /**
+     * Get the percentage of media played so far.
+     *
+     * @return {number}
+     *         The percentage of media played so far (0 to 1).
+     */
+    getPercent() {
+      const currentTime = this.getCurrentTime_();
+      let percent;
+      const liveTracker = this.player_.liveTracker;
+      if (liveTracker && liveTracker.isLive()) {
+        percent = (currentTime - liveTracker.seekableStart()) / liveTracker.liveWindow();
+
+        // prevent the percent from changing at the live edge
+        if (liveTracker.atLiveEdge()) {
+          percent = 1;
+        }
+      } else {
+        percent = currentTime / this.player_.duration();
+      }
+      return percent;
+    }
+
+    /**
+     * Handle mouse down on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mousedown` event that caused this to run.
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+
+      // Stop event propagation to prevent double fire in progress-control.js
+      event.stopPropagation();
+      this.videoWasPlaying = !this.player_.paused();
+      this.player_.pause();
+      super.handleMouseDown(event);
+    }
+
+    /**
+     * Handle mouse move on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mousemove` event that caused this to run.
+     * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false
+     *
+     * @listens mousemove
+     */
+    handleMouseMove(event, mouseDown = false) {
+      if (!isSingleLeftClick(event) || isNaN(this.player_.duration())) {
+        return;
+      }
+      if (!mouseDown && !this.player_.scrubbing()) {
+        this.player_.scrubbing(true);
+      }
+      let newTime;
+      const distance = this.calculateDistance(event);
+      const liveTracker = this.player_.liveTracker;
+      if (!liveTracker || !liveTracker.isLive()) {
+        newTime = distance * this.player_.duration();
+
+        // Don't let video end while scrubbing.
+        if (newTime === this.player_.duration()) {
+          newTime = newTime - 0.1;
+        }
+      } else {
+        if (distance >= 0.99) {
+          liveTracker.seekToLiveEdge();
+          return;
+        }
+        const seekableStart = liveTracker.seekableStart();
+        const seekableEnd = liveTracker.liveCurrentTime();
+        newTime = seekableStart + distance * liveTracker.liveWindow();
+
+        // Don't let video end while scrubbing.
+        if (newTime >= seekableEnd) {
+          newTime = seekableEnd;
+        }
+
+        // Compensate for precision differences so that currentTime is not less
+        // than seekable start
+        if (newTime <= seekableStart) {
+          newTime = seekableStart + 0.1;
+        }
+
+        // On android seekableEnd can be Infinity sometimes,
+        // this will cause newTime to be Infinity, which is
+        // not a valid currentTime.
+        if (newTime === Infinity) {
+          return;
+        }
+      }
+
+      // Set new time (tell player to seek to new time)
+      this.userSeek_(newTime);
+      if (this.player_.options_.enableSmoothSeeking) {
+        this.update();
+      }
+    }
+    enable() {
+      super.enable();
+      const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+      if (!mouseTimeDisplay) {
+        return;
+      }
+      mouseTimeDisplay.show();
+    }
+    disable() {
+      super.disable();
+      const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+      if (!mouseTimeDisplay) {
+        return;
+      }
+      mouseTimeDisplay.hide();
+    }
+
+    /**
+     * Handle mouse up on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mouseup` event that caused this to run.
+     *
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      super.handleMouseUp(event);
+
+      // Stop event propagation to prevent double fire in progress-control.js
+      if (event) {
+        event.stopPropagation();
+      }
+      this.player_.scrubbing(false);
+
+      /**
+       * Trigger timeupdate because we're done seeking and the time has changed.
+       * This is particularly useful for if the player is paused to time the time displays.
+       *
+       * @event Tech#timeupdate
+       * @type {Event}
+       */
+      this.player_.trigger({
+        type: 'timeupdate',
+        target: this,
+        manuallyTriggered: true
+      });
+      if (this.videoWasPlaying) {
+        silencePromise(this.player_.play());
+      } else {
+        // We're done seeking and the time has changed.
+        // If the player is paused, make sure we display the correct time on the seek bar.
+        this.update_();
+      }
+    }
+
+    /**
+     * Move more quickly fast forward for keyboard-only users
+     */
+    stepForward() {
+      this.userSeek_(this.player_.currentTime() + STEP_SECONDS);
+    }
+
+    /**
+     * Move more quickly rewind for keyboard-only users
+     */
+    stepBack() {
+      this.userSeek_(this.player_.currentTime() - STEP_SECONDS);
+    }
+
+    /**
+     * Toggles the playback state of the player
+     * This gets called when enter or space is used on the seekbar
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called
+     *
+     */
+    handleAction(event) {
+      if (this.player_.paused()) {
+        this.player_.play();
+      } else {
+        this.player_.pause();
+      }
+    }
+
+    /**
+     * Called when this SeekBar has focus and a key gets pressed down.
+     * Supports the following keys:
+     *
+     *   Space or Enter key fire a click event
+     *   Home key moves to start of the timeline
+     *   End key moves to end of the timeline
+     *   Digit "0" through "9" keys move to 0%, 10% ... 80%, 90% of the timeline
+     *   PageDown key moves back a larger step than ArrowDown
+     *   PageUp key moves forward a large step
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      const liveTracker = this.player_.liveTracker;
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.handleAction(event);
+      } else if (keycode.isEventKey(event, 'Home')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(0);
+      } else if (keycode.isEventKey(event, 'End')) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (liveTracker && liveTracker.isLive()) {
+          this.userSeek_(liveTracker.liveCurrentTime());
+        } else {
+          this.userSeek_(this.player_.duration());
+        }
+      } else if (/^[0-9]$/.test(keycode(event))) {
+        event.preventDefault();
+        event.stopPropagation();
+        const gotoFraction = (keycode.codes[keycode(event)] - keycode.codes['0']) * 10.0 / 100.0;
+        if (liveTracker && liveTracker.isLive()) {
+          this.userSeek_(liveTracker.seekableStart() + liveTracker.liveWindow() * gotoFraction);
+        } else {
+          this.userSeek_(this.player_.duration() * gotoFraction);
+        }
+      } else if (keycode.isEventKey(event, 'PgDn')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(this.player_.currentTime() - STEP_SECONDS * PAGE_KEY_MULTIPLIER);
+      } else if (keycode.isEventKey(event, 'PgUp')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(this.player_.currentTime() + STEP_SECONDS * PAGE_KEY_MULTIPLIER);
+      } else {
+        // Pass keydown handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+    dispose() {
+      this.disableInterval_();
+      this.off(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
+      if (this.player_.liveTracker) {
+        this.off(this.player_.liveTracker, 'liveedgechange', this.update);
+      }
+      this.off(this.player_, ['playing'], this.enableIntervalHandler_);
+      this.off(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
+
+      // we don't need to update the play progress if the document is hidden,
+      // also, this causes the CPU to spike and eventually crash the page on IE11.
+      if ('hidden' in document && 'visibilityState' in document) {
+        this.off(document, 'visibilitychange', this.toggleVisibility_);
+      }
+      super.dispose();
+    }
+  }
+
+  /**
+   * Default options for the `SeekBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  SeekBar.prototype.options_ = {
+    children: ['loadProgressBar', 'playProgressBar'],
+    barName: 'playProgressBar'
+  };
+
+  // MouseTimeDisplay tooltips should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    SeekBar.prototype.options_.children.splice(1, 0, 'mouseTimeDisplay');
+  }
+  Component.registerComponent('SeekBar', SeekBar);
+
+  /**
+   * @file progress-control.js
+   */
+
+  /**
+   * The Progress Control component contains the seek bar, load progress,
+   * and play progress.
+   *
+   * @extends Component
+   */
+  class ProgressControl extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.handleMouseMove = throttle(bind_(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+      this.throttledHandleMouseSeek = throttle(bind_(this, this.handleMouseSeek), UPDATE_REFRESH_INTERVAL);
+      this.handleMouseUpHandler_ = e => this.handleMouseUp(e);
+      this.handleMouseDownHandler_ = e => this.handleMouseDown(e);
+      this.enable();
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-progress-control vjs-control'
+      });
+    }
+
+    /**
+     * When the mouse moves over the `ProgressControl`, the pointer position
+     * gets passed down to the `MouseTimeDisplay` component.
+     *
+     * @param {Event} event
+     *        The `mousemove` event that caused this function to run.
+     *
+     * @listen mousemove
+     */
+    handleMouseMove(event) {
+      const seekBar = this.getChild('seekBar');
+      if (!seekBar) {
+        return;
+      }
+      const playProgressBar = seekBar.getChild('playProgressBar');
+      const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
+      if (!playProgressBar && !mouseTimeDisplay) {
+        return;
+      }
+      const seekBarEl = seekBar.el();
+      const seekBarRect = findPosition(seekBarEl);
+      let seekBarPoint = getPointerPosition(seekBarEl, event).x;
+
+      // The default skin has a gap on either side of the `SeekBar`. This means
+      // that it's possible to trigger this behavior outside the boundaries of
+      // the `SeekBar`. This ensures we stay within it at all times.
+      seekBarPoint = clamp(seekBarPoint, 0, 1);
+      if (mouseTimeDisplay) {
+        mouseTimeDisplay.update(seekBarRect, seekBarPoint);
+      }
+      if (playProgressBar) {
+        playProgressBar.update(seekBarRect, seekBar.getProgress());
+      }
+    }
+
+    /**
+     * A throttled version of the {@link ProgressControl#handleMouseSeek} listener.
+     *
+     * @method ProgressControl#throttledHandleMouseSeek
+     * @param {Event} event
+     *        The `mousemove` event that caused this function to run.
+     *
+     * @listen mousemove
+     * @listen touchmove
+     */
+
+    /**
+     * Handle `mousemove` or `touchmove` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousemove
+     * @listens touchmove
+     */
+    handleMouseSeek(event) {
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseMove(event);
+      }
+    }
+
+    /**
+     * Are controls are currently enabled for this progress control.
+     *
+     * @return {boolean}
+     *         true if controls are enabled, false otherwise
+     */
+    enabled() {
+      return this.enabled_;
+    }
+
+    /**
+     * Disable all controls on the progress control and its children
+     */
+    disable() {
+      this.children().forEach(child => child.disable && child.disable());
+      if (!this.enabled()) {
+        return;
+      }
+      this.off(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
+      this.off(this.el_, 'mousemove', this.handleMouseMove);
+      this.removeListenersAddedOnMousedownAndTouchstart();
+      this.addClass('disabled');
+      this.enabled_ = false;
+
+      // Restore normal playback state if controls are disabled while scrubbing
+      if (this.player_.scrubbing()) {
+        const seekBar = this.getChild('seekBar');
+        this.player_.scrubbing(false);
+        if (seekBar.videoWasPlaying) {
+          silencePromise(this.player_.play());
+        }
+      }
+    }
+
+    /**
+     * Enable all controls on the progress control and its children
+     */
+    enable() {
+      this.children().forEach(child => child.enable && child.enable());
+      if (this.enabled()) {
+        return;
+      }
+      this.on(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
+      this.on(this.el_, 'mousemove', this.handleMouseMove);
+      this.removeClass('disabled');
+      this.enabled_ = true;
+    }
+
+    /**
+     * Cleanup listeners after the user finishes interacting with the progress controls
+     */
+    removeListenersAddedOnMousedownAndTouchstart() {
+      const doc = this.el_.ownerDocument;
+      this.off(doc, 'mousemove', this.throttledHandleMouseSeek);
+      this.off(doc, 'touchmove', this.throttledHandleMouseSeek);
+      this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.off(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseDown(event) {
+      const doc = this.el_.ownerDocument;
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseDown(event);
+      }
+      this.on(doc, 'mousemove', this.throttledHandleMouseSeek);
+      this.on(doc, 'touchmove', this.throttledHandleMouseSeek);
+      this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.on(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseUp(event);
+      }
+      this.removeListenersAddedOnMousedownAndTouchstart();
+    }
+  }
+
+  /**
+   * Default options for `ProgressControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  ProgressControl.prototype.options_ = {
+    children: ['seekBar']
+  };
+  Component.registerComponent('ProgressControl', ProgressControl);
+
+  /**
+   * @file picture-in-picture-toggle.js
+   */
+
+  /**
+   * Toggle Picture-in-Picture mode
+   *
+   * @extends Button
+   */
+  class PictureInPictureToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @listens Player#enterpictureinpicture
+     * @listens Player#leavepictureinpicture
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('picture-in-picture-enter');
+      this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], e => this.handlePictureInPictureChange(e));
+      this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], e => this.handlePictureInPictureEnabledChange(e));
+      this.on(player, ['loadedmetadata', 'audioonlymodechange', 'audiopostermodechange'], () => this.handlePictureInPictureAudioModeChange());
+
+      // TODO: Deactivate button on player emptied event.
+      this.disable();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-picture-in-picture-control vjs-hidden ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Displays or hides the button depending on the audio mode detection.
+     * Exits picture-in-picture if it is enabled when switching to audio mode.
+     */
+    handlePictureInPictureAudioModeChange() {
+      // This audio detection will not detect HLS or DASH audio-only streams because there was no reliable way to detect them at the time
+      const isSourceAudio = this.player_.currentType().substring(0, 5) === 'audio';
+      const isAudioMode = isSourceAudio || this.player_.audioPosterMode() || this.player_.audioOnlyMode();
+      if (!isAudioMode) {
+        this.show();
+        return;
+      }
+      if (this.player_.isInPictureInPicture()) {
+        this.player_.exitPictureInPicture();
+      }
+      this.hide();
+    }
+
+    /**
+     * Enables or disables button based on availability of a Picture-In-Picture mode.
+     *
+     * Enabled if
+     * - `player.options().enableDocumentPictureInPicture` is true and
+     *   window.documentPictureInPicture is available; or
+     * - `player.disablePictureInPicture()` is false and
+     *   element.requestPictureInPicture is available
+     */
+    handlePictureInPictureEnabledChange() {
+      if (document.pictureInPictureEnabled && this.player_.disablePictureInPicture() === false || this.player_.options_.enableDocumentPictureInPicture && 'documentPictureInPicture' in window) {
+        this.enable();
+      } else {
+        this.disable();
+      }
+    }
+
+    /**
+     * Handles enterpictureinpicture and leavepictureinpicture on the player and change control text accordingly.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#enterpictureinpicture} or {@link Player#leavepictureinpicture} event that caused this function to be
+     *        called.
+     *
+     * @listens Player#enterpictureinpicture
+     * @listens Player#leavepictureinpicture
+     */
+    handlePictureInPictureChange(event) {
+      if (this.player_.isInPictureInPicture()) {
+        this.setIcon('picture-in-picture-exit');
+        this.controlText('Exit Picture-in-Picture');
+      } else {
+        this.setIcon('picture-in-picture-enter');
+        this.controlText('Picture-in-Picture');
+      }
+      this.handlePictureInPictureEnabledChange();
+    }
+
+    /**
+     * This gets called when an `PictureInPictureToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (!this.player_.isInPictureInPicture()) {
+        this.player_.requestPictureInPicture();
+      } else {
+        this.player_.exitPictureInPicture();
+      }
+    }
+
+    /**
+     * Show the `Component`s element if it is hidden by removing the
+     * 'vjs-hidden' class name from it only in browsers that support the Picture-in-Picture API.
+     */
+    show() {
+      // Does not allow to display the pictureInPictureToggle in browsers that do not support the Picture-in-Picture API, e.g. Firefox.
+      if (typeof document.exitPictureInPicture !== 'function') {
+        return;
+      }
+      super.show();
+    }
+  }
+
+  /**
+   * The text that should display over the `PictureInPictureToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PictureInPictureToggle.prototype.controlText_ = 'Picture-in-Picture';
+  Component.registerComponent('PictureInPictureToggle', PictureInPictureToggle);
+
+  /**
+   * @file fullscreen-toggle.js
+   */
+
+  /**
+   * Toggle fullscreen video
+   *
+   * @extends Button
+   */
+  class FullscreenToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('fullscreen-enter');
+      this.on(player, 'fullscreenchange', e => this.handleFullscreenChange(e));
+      if (document[player.fsApi_.fullscreenEnabled] === false) {
+        this.disable();
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-fullscreen-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Handles fullscreenchange on the player and change control text accordingly.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#fullscreenchange} event that caused this function to be
+     *        called.
+     *
+     * @listens Player#fullscreenchange
+     */
+    handleFullscreenChange(event) {
+      if (this.player_.isFullscreen()) {
+        this.controlText('Exit Fullscreen');
+        this.setIcon('fullscreen-exit');
+      } else {
+        this.controlText('Fullscreen');
+        this.setIcon('fullscreen-enter');
+      }
+    }
+
+    /**
+     * This gets called when an `FullscreenToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (!this.player_.isFullscreen()) {
+        this.player_.requestFullscreen();
+      } else {
+        this.player_.exitFullscreen();
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `FullscreenToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  FullscreenToggle.prototype.controlText_ = 'Fullscreen';
+  Component.registerComponent('FullscreenToggle', FullscreenToggle);
+
+  /**
+   * Check if volume control is supported and if it isn't hide the
+   * `Component` that was passed  using the `vjs-hidden` class.
+   *
+   * @param { import('../../component').default } self
+   *        The component that should be hidden if volume is unsupported
+   *
+   * @param { import('../../player').default } player
+   *        A reference to the player
+   *
+   * @private
+   */
+  const checkVolumeSupport = function (self, player) {
+    // hide volume controls when they're not supported by the current tech
+    if (player.tech_ && !player.tech_.featuresVolumeControl) {
+      self.addClass('vjs-hidden');
+    }
+    self.on(player, 'loadstart', function () {
+      if (!player.tech_.featuresVolumeControl) {
+        self.addClass('vjs-hidden');
+      } else {
+        self.removeClass('vjs-hidden');
+      }
+    });
+  };
+
+  /**
+   * @file volume-level.js
+   */
+
+  /**
+   * Shows volume level
+   *
+   * @extends Component
+   */
+  class VolumeLevel extends Component {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-volume-level'
+      });
+      this.setIcon('circle', el);
+      el.appendChild(super.createEl('span', {
+        className: 'vjs-control-text'
+      }));
+      return el;
+    }
+  }
+  Component.registerComponent('VolumeLevel', VolumeLevel);
+
+  /**
+   * @file volume-level-tooltip.js
+   */
+
+  /**
+   * Volume level tooltips display a volume above or side by side the volume bar.
+   *
+   * @extends Component
+   */
+  class VolumeLevelTooltip extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the volume tooltip DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-volume-tooltip'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Updates the position of the tooltip relative to the `VolumeBar` and
+     * its content text.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     */
+    update(rangeBarRect, rangeBarPoint, vertical, content) {
+      if (!vertical) {
+        const tooltipRect = getBoundingClientRect(this.el_);
+        const playerRect = getBoundingClientRect(this.player_.el());
+        const volumeBarPointPx = rangeBarRect.width * rangeBarPoint;
+        if (!playerRect || !tooltipRect) {
+          return;
+        }
+        const spaceLeftOfPoint = rangeBarRect.left - playerRect.left + volumeBarPointPx;
+        const spaceRightOfPoint = rangeBarRect.width - volumeBarPointPx + (playerRect.right - rangeBarRect.right);
+        let pullTooltipBy = tooltipRect.width / 2;
+        if (spaceLeftOfPoint < pullTooltipBy) {
+          pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
+        } else if (spaceRightOfPoint < pullTooltipBy) {
+          pullTooltipBy = spaceRightOfPoint;
+        }
+        if (pullTooltipBy < 0) {
+          pullTooltipBy = 0;
+        } else if (pullTooltipBy > tooltipRect.width) {
+          pullTooltipBy = tooltipRect.width;
+        }
+        this.el_.style.right = `-${pullTooltipBy}px`;
+      }
+      this.write(`${content}%`);
+    }
+
+    /**
+     * Write the volume to the tooltip DOM element.
+     *
+     * @param {string} content
+     *        The formatted volume for the tooltip.
+     */
+    write(content) {
+      textContent(this.el_, content);
+    }
+
+    /**
+     * Updates the position of the volume tooltip relative to the `VolumeBar`.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     * @param {number} volume
+     *        The volume level to update the tooltip to
+     *
+     * @param {Function} cb
+     *        A function that will be called during the request animation frame
+     *        for tooltips that need to do additional animations from the default
+     */
+    updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, cb) {
+      this.requestNamedAnimationFrame('VolumeLevelTooltip#updateVolume', () => {
+        this.update(rangeBarRect, rangeBarPoint, vertical, volume.toFixed(0));
+        if (cb) {
+          cb();
+        }
+      });
+    }
+  }
+  Component.registerComponent('VolumeLevelTooltip', VolumeLevelTooltip);
+
+  /**
+   * @file mouse-volume-level-display.js
+   */
+
+  /**
+   * The {@link MouseVolumeLevelDisplay} component tracks mouse movement over the
+   * {@link VolumeControl}. It displays an indicator and a {@link VolumeLevelTooltip}
+   * indicating the volume level which is represented by a given point in the
+   * {@link VolumeBar}.
+   *
+   * @extends Component
+   */
+  class MouseVolumeLevelDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-mouse-display'
+      });
+    }
+
+    /**
+     * Enquires updates to its own DOM as well as the DOM of its
+     * {@link VolumeLevelTooltip} child.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     */
+    update(rangeBarRect, rangeBarPoint, vertical) {
+      const volume = 100 * rangeBarPoint;
+      this.getChild('volumeLevelTooltip').updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, () => {
+        if (vertical) {
+          this.el_.style.bottom = `${rangeBarRect.height * rangeBarPoint}px`;
+        } else {
+          this.el_.style.left = `${rangeBarRect.width * rangeBarPoint}px`;
+        }
+      });
+    }
+  }
+
+  /**
+   * Default options for `MouseVolumeLevelDisplay`
+   *
+   * @type {Object}
+   * @private
+   */
+  MouseVolumeLevelDisplay.prototype.options_ = {
+    children: ['volumeLevelTooltip']
+  };
+  Component.registerComponent('MouseVolumeLevelDisplay', MouseVolumeLevelDisplay);
+
+  /**
+   * @file volume-bar.js
+   */
+
+  /**
+   * The bar that contains the volume level and can be clicked on to adjust the level
+   *
+   * @extends Slider
+   */
+  class VolumeBar extends Slider {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on('slideractive', e => this.updateLastVolume_(e));
+      this.on(player, 'volumechange', e => this.updateARIAAttributes(e));
+      player.ready(() => this.updateARIAAttributes());
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-volume-bar vjs-slider-bar'
+      }, {
+        'aria-label': this.localize('Volume Level'),
+        'aria-live': 'polite'
+      });
+    }
+
+    /**
+     * Handle mouse down on volume bar
+     *
+     * @param {Event} event
+     *        The `mousedown` event that caused this to run.
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+      super.handleMouseDown(event);
+    }
+
+    /**
+     * Handle movement events on the {@link VolumeMenuButton}.
+     *
+     * @param {Event} event
+     *        The event that caused this function to run.
+     *
+     * @listens mousemove
+     */
+    handleMouseMove(event) {
+      const mouseVolumeLevelDisplay = this.getChild('mouseVolumeLevelDisplay');
+      if (mouseVolumeLevelDisplay) {
+        const volumeBarEl = this.el();
+        const volumeBarRect = getBoundingClientRect(volumeBarEl);
+        const vertical = this.vertical();
+        let volumeBarPoint = getPointerPosition(volumeBarEl, event);
+        volumeBarPoint = vertical ? volumeBarPoint.y : volumeBarPoint.x;
+        // The default skin has a gap on either side of the `VolumeBar`. This means
+        // that it's possible to trigger this behavior outside the boundaries of
+        // the `VolumeBar`. This ensures we stay within it at all times.
+        volumeBarPoint = clamp(volumeBarPoint, 0, 1);
+        mouseVolumeLevelDisplay.update(volumeBarRect, volumeBarPoint, vertical);
+      }
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+      this.checkMuted();
+      this.player_.volume(this.calculateDistance(event));
+    }
+
+    /**
+     * If the player is muted unmute it.
+     */
+    checkMuted() {
+      if (this.player_.muted()) {
+        this.player_.muted(false);
+      }
+    }
+
+    /**
+     * Get percent of volume level
+     *
+     * @return {number}
+     *         Volume level percent as a decimal number.
+     */
+    getPercent() {
+      if (this.player_.muted()) {
+        return 0;
+      }
+      return this.player_.volume();
+    }
+
+    /**
+     * Increase volume level for keyboard users
+     */
+    stepForward() {
+      this.checkMuted();
+      this.player_.volume(this.player_.volume() + 0.1);
+    }
+
+    /**
+     * Decrease volume level for keyboard users
+     */
+    stepBack() {
+      this.checkMuted();
+      this.player_.volume(this.player_.volume() - 0.1);
+    }
+
+    /**
+     * Update ARIA accessibility attributes
+     *
+     * @param {Event} [event]
+     *        The `volumechange` event that caused this function to run.
+     *
+     * @listens Player#volumechange
+     */
+    updateARIAAttributes(event) {
+      const ariaValue = this.player_.muted() ? 0 : this.volumeAsPercentage_();
+      this.el_.setAttribute('aria-valuenow', ariaValue);
+      this.el_.setAttribute('aria-valuetext', ariaValue + '%');
+    }
+
+    /**
+     * Returns the current value of the player volume as a percentage
+     *
+     * @private
+     */
+    volumeAsPercentage_() {
+      return Math.round(this.player_.volume() * 100);
+    }
+
+    /**
+     * When user starts dragging the VolumeBar, store the volume and listen for
+     * the end of the drag. When the drag ends, if the volume was set to zero,
+     * set lastVolume to the stored volume.
+     *
+     * @listens slideractive
+     * @private
+     */
+    updateLastVolume_() {
+      const volumeBeforeDrag = this.player_.volume();
+      this.one('sliderinactive', () => {
+        if (this.player_.volume() === 0) {
+          this.player_.lastVolume_(volumeBeforeDrag);
+        }
+      });
+    }
+  }
+
+  /**
+   * Default options for the `VolumeBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumeBar.prototype.options_ = {
+    children: ['volumeLevel'],
+    barName: 'volumeLevel'
+  };
+
+  // MouseVolumeLevelDisplay tooltip should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    VolumeBar.prototype.options_.children.splice(0, 0, 'mouseVolumeLevelDisplay');
+  }
+
+  /**
+   * Call the update event for this Slider when this event happens on the player.
+   *
+   * @type {string}
+   */
+  VolumeBar.prototype.playerEvent = 'volumechange';
+  Component.registerComponent('VolumeBar', VolumeBar);
+
+  /**
+   * @file volume-control.js
+   */
+
+  /**
+   * The component for controlling the volume level
+   *
+   * @extends Component
+   */
+  class VolumeControl extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.vertical = options.vertical || false;
+
+      // Pass the vertical option down to the VolumeBar if
+      // the VolumeBar is turned on.
+      if (typeof options.volumeBar === 'undefined' || isPlain(options.volumeBar)) {
+        options.volumeBar = options.volumeBar || {};
+        options.volumeBar.vertical = options.vertical;
+      }
+      super(player, options);
+
+      // hide this control if volume support is missing
+      checkVolumeSupport(this, player);
+      this.throttledHandleMouseMove = throttle(bind_(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+      this.handleMouseUpHandler_ = e => this.handleMouseUp(e);
+      this.on('mousedown', e => this.handleMouseDown(e));
+      this.on('touchstart', e => this.handleMouseDown(e));
+      this.on('mousemove', e => this.handleMouseMove(e));
+
+      // while the slider is active (the mouse has been pressed down and
+      // is dragging) or in focus we do not want to hide the VolumeBar
+      this.on(this.volumeBar, ['focus', 'slideractive'], () => {
+        this.volumeBar.addClass('vjs-slider-active');
+        this.addClass('vjs-slider-active');
+        this.trigger('slideractive');
+      });
+      this.on(this.volumeBar, ['blur', 'sliderinactive'], () => {
+        this.volumeBar.removeClass('vjs-slider-active');
+        this.removeClass('vjs-slider-active');
+        this.trigger('sliderinactive');
+      });
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      let orientationClass = 'vjs-volume-horizontal';
+      if (this.options_.vertical) {
+        orientationClass = 'vjs-volume-vertical';
+      }
+      return super.createEl('div', {
+        className: `vjs-volume-control vjs-control ${orientationClass}`
+      });
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseDown(event) {
+      const doc = this.el_.ownerDocument;
+      this.on(doc, 'mousemove', this.throttledHandleMouseMove);
+      this.on(doc, 'touchmove', this.throttledHandleMouseMove);
+      this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.on(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      const doc = this.el_.ownerDocument;
+      this.off(doc, 'mousemove', this.throttledHandleMouseMove);
+      this.off(doc, 'touchmove', this.throttledHandleMouseMove);
+      this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.off(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseMove(event) {
+      this.volumeBar.handleMouseMove(event);
+    }
+  }
+
+  /**
+   * Default options for the `VolumeControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumeControl.prototype.options_ = {
+    children: ['volumeBar']
+  };
+  Component.registerComponent('VolumeControl', VolumeControl);
+
+  /**
+   * Check if muting volume is supported and if it isn't hide the mute toggle
+   * button.
+   *
+   * @param { import('../../component').default } self
+   *        A reference to the mute toggle button
+   *
+   * @param { import('../../player').default } player
+   *        A reference to the player
+   *
+   * @private
+   */
+  const checkMuteSupport = function (self, player) {
+    // hide mute toggle button if it's not supported by the current tech
+    if (player.tech_ && !player.tech_.featuresMuteControl) {
+      self.addClass('vjs-hidden');
+    }
+    self.on(player, 'loadstart', function () {
+      if (!player.tech_.featuresMuteControl) {
+        self.addClass('vjs-hidden');
+      } else {
+        self.removeClass('vjs-hidden');
+      }
+    });
+  };
+
+  /**
+   * @file mute-toggle.js
+   */
+
+  /**
+   * A button component for muting the audio.
+   *
+   * @extends Button
+   */
+  class MuteToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+
+      // hide this control if volume support is missing
+      checkMuteSupport(this, player);
+      this.on(player, ['loadstart', 'volumechange'], e => this.update(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-mute-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when an `MuteToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const vol = this.player_.volume();
+      const lastVolume = this.player_.lastVolume_();
+      if (vol === 0) {
+        const volumeToSet = lastVolume < 0.1 ? 0.1 : lastVolume;
+        this.player_.volume(volumeToSet);
+        this.player_.muted(false);
+      } else {
+        this.player_.muted(this.player_.muted() ? false : true);
+      }
+    }
+
+    /**
+     * Update the `MuteToggle` button based on the state of `volume` and `muted`
+     * on the player.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#loadstart} event if this function was called
+     *        through an event.
+     *
+     * @listens Player#loadstart
+     * @listens Player#volumechange
+     */
+    update(event) {
+      this.updateIcon_();
+      this.updateControlText_();
+    }
+
+    /**
+     * Update the appearance of the `MuteToggle` icon.
+     *
+     * Possible states (given `level` variable below):
+     * - 0: crossed out
+     * - 1: zero bars of volume
+     * - 2: one bar of volume
+     * - 3: two bars of volume
+     *
+     * @private
+     */
+    updateIcon_() {
+      const vol = this.player_.volume();
+      let level = 3;
+      this.setIcon('volume-high');
+
+      // in iOS when a player is loaded with muted attribute
+      // and volume is changed with a native mute button
+      // we want to make sure muted state is updated
+      if (IS_IOS && this.player_.tech_ && this.player_.tech_.el_) {
+        this.player_.muted(this.player_.tech_.el_.muted);
+      }
+      if (vol === 0 || this.player_.muted()) {
+        this.setIcon('volume-mute');
+        level = 0;
+      } else if (vol < 0.33) {
+        this.setIcon('volume-low');
+        level = 1;
+      } else if (vol < 0.67) {
+        this.setIcon('volume-medium');
+        level = 2;
+      }
+      removeClass(this.el_, [0, 1, 2, 3].reduce((str, i) => str + `${i ? ' ' : ''}vjs-vol-${i}`, ''));
+      addClass(this.el_, `vjs-vol-${level}`);
+    }
+
+    /**
+     * If `muted` has changed on the player, update the control text
+     * (`title` attribute on `vjs-mute-control` element and content of
+     * `vjs-control-text` element).
+     *
+     * @private
+     */
+    updateControlText_() {
+      const soundOff = this.player_.muted() || this.player_.volume() === 0;
+      const text = soundOff ? 'Unmute' : 'Mute';
+      if (this.controlText() !== text) {
+        this.controlText(text);
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `MuteToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  MuteToggle.prototype.controlText_ = 'Mute';
+  Component.registerComponent('MuteToggle', MuteToggle);
+
+  /**
+   * @file volume-control.js
+   */
+
+  /**
+   * A Component to contain the MuteToggle and VolumeControl so that
+   * they can work together.
+   *
+   * @extends Component
+   */
+  class VolumePanel extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      if (typeof options.inline !== 'undefined') {
+        options.inline = options.inline;
+      } else {
+        options.inline = true;
+      }
+
+      // pass the inline option down to the VolumeControl as vertical if
+      // the VolumeControl is on.
+      if (typeof options.volumeControl === 'undefined' || isPlain(options.volumeControl)) {
+        options.volumeControl = options.volumeControl || {};
+        options.volumeControl.vertical = !options.inline;
+      }
+      super(player, options);
+
+      // this handler is used by mouse handler methods below
+      this.handleKeyPressHandler_ = e => this.handleKeyPress(e);
+      this.on(player, ['loadstart'], e => this.volumePanelState_(e));
+      this.on(this.muteToggle, 'keyup', e => this.handleKeyPress(e));
+      this.on(this.volumeControl, 'keyup', e => this.handleVolumeControlKeyUp(e));
+      this.on('keydown', e => this.handleKeyPress(e));
+      this.on('mouseover', e => this.handleMouseOver(e));
+      this.on('mouseout', e => this.handleMouseOut(e));
+
+      // while the slider is active (the mouse has been pressed down and
+      // is dragging) we do not want to hide the VolumeBar
+      this.on(this.volumeControl, ['slideractive'], this.sliderActive_);
+      this.on(this.volumeControl, ['sliderinactive'], this.sliderInactive_);
+    }
+
+    /**
+     * Add vjs-slider-active class to the VolumePanel
+     *
+     * @listens VolumeControl#slideractive
+     * @private
+     */
+    sliderActive_() {
+      this.addClass('vjs-slider-active');
+    }
+
+    /**
+     * Removes vjs-slider-active class to the VolumePanel
+     *
+     * @listens VolumeControl#sliderinactive
+     * @private
+     */
+    sliderInactive_() {
+      this.removeClass('vjs-slider-active');
+    }
+
+    /**
+     * Adds vjs-hidden or vjs-mute-toggle-only to the VolumePanel
+     * depending on MuteToggle and VolumeControl state
+     *
+     * @listens Player#loadstart
+     * @private
+     */
+    volumePanelState_() {
+      // hide volume panel if neither volume control or mute toggle
+      // are displayed
+      if (this.volumeControl.hasClass('vjs-hidden') && this.muteToggle.hasClass('vjs-hidden')) {
+        this.addClass('vjs-hidden');
+      }
+
+      // if only mute toggle is visible we don't want
+      // volume panel expanding when hovered or active
+      if (this.volumeControl.hasClass('vjs-hidden') && !this.muteToggle.hasClass('vjs-hidden')) {
+        this.addClass('vjs-mute-toggle-only');
+      }
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      let orientationClass = 'vjs-volume-panel-horizontal';
+      if (!this.options_.inline) {
+        orientationClass = 'vjs-volume-panel-vertical';
+      }
+      return super.createEl('div', {
+        className: `vjs-volume-panel vjs-control ${orientationClass}`
+      });
+    }
+
+    /**
+     * Dispose of the `volume-panel` and all child components.
+     */
+    dispose() {
+      this.handleMouseOut();
+      super.dispose();
+    }
+
+    /**
+     * Handles `keyup` events on the `VolumeControl`, looking for ESC, which closes
+     * the volume panel and sets focus on `MuteToggle`.
+     *
+     * @param {Event} event
+     *        The `keyup` event that caused this function to be called.
+     *
+     * @listens keyup
+     */
+    handleVolumeControlKeyUp(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        this.muteToggle.focus();
+      }
+    }
+
+    /**
+     * This gets called when a `VolumePanel` gains hover via a `mouseover` event.
+     * Turns on listening for `mouseover` event. When they happen it
+     * calls `this.handleMouseOver`.
+     *
+     * @param {Event} event
+     *        The `mouseover` event that caused this function to be called.
+     *
+     * @listens mouseover
+     */
+    handleMouseOver(event) {
+      this.addClass('vjs-hover');
+      on(document, 'keyup', this.handleKeyPressHandler_);
+    }
+
+    /**
+     * This gets called when a `VolumePanel` gains hover via a `mouseout` event.
+     * Turns on listening for `mouseout` event. When they happen it
+     * calls `this.handleMouseOut`.
+     *
+     * @param {Event} event
+     *        The `mouseout` event that caused this function to be called.
+     *
+     * @listens mouseout
+     */
+    handleMouseOut(event) {
+      this.removeClass('vjs-hover');
+      off(document, 'keyup', this.handleKeyPressHandler_);
+    }
+
+    /**
+     * Handles `keyup` event on the document or `keydown` event on the `VolumePanel`,
+     * looking for ESC, which hides the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        The keypress that triggered this event.
+     *
+     * @listens keydown | keyup
+     */
+    handleKeyPress(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        this.handleMouseOut();
+      }
+    }
+  }
+
+  /**
+   * Default options for the `VolumeControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumePanel.prototype.options_ = {
+    children: ['muteToggle', 'volumeControl']
+  };
+  Component.registerComponent('VolumePanel', VolumePanel);
+
+  /**
+   * Button to skip forward a configurable amount of time
+   * through a video. Renders in the control bar.
+   *
+   * e.g. options: {controlBar: {skipButtons: forward: 5}}
+   *
+   * @extends Button
+   */
+  class SkipForward extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.validOptions = [5, 10, 30];
+      this.skipTime = this.getSkipForwardTime();
+      if (this.skipTime && this.validOptions.includes(this.skipTime)) {
+        this.setIcon(`forward-${this.skipTime}`);
+        this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime.toLocaleString(player.language())]));
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+    getSkipForwardTime() {
+      const playerOptions = this.options_.playerOptions;
+      return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.forward;
+    }
+    buildCSSClass() {
+      return `vjs-skip-forward-${this.getSkipForwardTime()} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * On click, skips forward in the duration/seekable range by a configurable amount of seconds.
+     * If the time left in the duration/seekable range is less than the configured 'skip forward' time,
+     * skips to end of duration/seekable range.
+     *
+     * Handle a click on a `SkipForward` button
+     *
+     * @param {EventTarget~Event} event
+     *        The `click` event that caused this function
+     *        to be called
+     */
+    handleClick(event) {
+      if (isNaN(this.player_.duration())) {
+        return;
+      }
+      const currentVideoTime = this.player_.currentTime();
+      const liveTracker = this.player_.liveTracker;
+      const duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
+      let newTime;
+      if (currentVideoTime + this.skipTime <= duration) {
+        newTime = currentVideoTime + this.skipTime;
+      } else {
+        newTime = duration;
+      }
+      this.player_.currentTime(newTime);
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime]));
+    }
+  }
+  SkipForward.prototype.controlText_ = 'Skip Forward';
+  Component.registerComponent('SkipForward', SkipForward);
+
+  /**
+   * Button to skip backward a configurable amount of time
+   * through a video. Renders in the control bar.
+   *
+   *  * e.g. options: {controlBar: {skipButtons: backward: 5}}
+   *
+   * @extends Button
+   */
+  class SkipBackward extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.validOptions = [5, 10, 30];
+      this.skipTime = this.getSkipBackwardTime();
+      if (this.skipTime && this.validOptions.includes(this.skipTime)) {
+        this.setIcon(`replay-${this.skipTime}`);
+        this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime.toLocaleString(player.language())]));
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+    getSkipBackwardTime() {
+      const playerOptions = this.options_.playerOptions;
+      return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.backward;
+    }
+    buildCSSClass() {
+      return `vjs-skip-backward-${this.getSkipBackwardTime()} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * On click, skips backward in the video by a configurable amount of seconds.
+     * If the current time in the video is less than the configured 'skip backward' time,
+     * skips to beginning of video or seekable range.
+     *
+     * Handle a click on a `SkipBackward` button
+     *
+     * @param {EventTarget~Event} event
+     *        The `click` event that caused this function
+     *        to be called
+     */
+    handleClick(event) {
+      const currentVideoTime = this.player_.currentTime();
+      const liveTracker = this.player_.liveTracker;
+      const seekableStart = liveTracker && liveTracker.isLive() && liveTracker.seekableStart();
+      let newTime;
+      if (seekableStart && currentVideoTime - this.skipTime <= seekableStart) {
+        newTime = seekableStart;
+      } else if (currentVideoTime >= this.skipTime) {
+        newTime = currentVideoTime - this.skipTime;
+      } else {
+        newTime = 0;
+      }
+      this.player_.currentTime(newTime);
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime]));
+    }
+  }
+  SkipBackward.prototype.controlText_ = 'Skip Backward';
+  Component.registerComponent('SkipBackward', SkipBackward);
+
+  /**
+   * @file menu.js
+   */
+
+  /**
+   * The Menu component is used to build popup menus, including subtitle and
+   * captions selection menus.
+   *
+   * @extends Component
+   */
+  class Menu extends Component {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        the player that this component should attach to
+     *
+     * @param {Object} [options]
+     *        Object of option names and values
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      if (options) {
+        this.menuButton_ = options.menuButton;
+      }
+      this.focusedChild_ = -1;
+      this.on('keydown', e => this.handleKeyDown(e));
+
+      // All the menu item instances share the same blur handler provided by the menu container.
+      this.boundHandleBlur_ = e => this.handleBlur(e);
+      this.boundHandleTapClick_ = e => this.handleTapClick(e);
+    }
+
+    /**
+     * Add event listeners to the {@link MenuItem}.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem` to add listeners to.
+     *
+     */
+    addEventListenerForItem(component) {
+      if (!(component instanceof Component)) {
+        return;
+      }
+      this.on(component, 'blur', this.boundHandleBlur_);
+      this.on(component, ['tap', 'click'], this.boundHandleTapClick_);
+    }
+
+    /**
+     * Remove event listeners from the {@link MenuItem}.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem` to remove listeners.
+     *
+     */
+    removeEventListenerForItem(component) {
+      if (!(component instanceof Component)) {
+        return;
+      }
+      this.off(component, 'blur', this.boundHandleBlur_);
+      this.off(component, ['tap', 'click'], this.boundHandleTapClick_);
+    }
+
+    /**
+     * This method will be called indirectly when the component has been added
+     * before the component adds to the new menu instance by `addItem`.
+     * In this case, the original menu instance will remove the component
+     * by calling `removeChild`.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem`
+     */
+    removeChild(component) {
+      if (typeof component === 'string') {
+        component = this.getChild(component);
+      }
+      this.removeEventListenerForItem(component);
+      super.removeChild(component);
+    }
+
+    /**
+     * Add a {@link MenuItem} to the menu.
+     *
+     * @param {Object|string} component
+     *        The name or instance of the `MenuItem` to add.
+     *
+     */
+    addItem(component) {
+      const childComponent = this.addChild(component);
+      if (childComponent) {
+        this.addEventListenerForItem(childComponent);
+      }
+    }
+
+    /**
+     * Create the `Menu`s DOM element.
+     *
+     * @return {Element}
+     *         the element that was created
+     */
+    createEl() {
+      const contentElType = this.options_.contentElType || 'ul';
+      this.contentEl_ = createEl(contentElType, {
+        className: 'vjs-menu-content'
+      });
+      this.contentEl_.setAttribute('role', 'menu');
+      const el = super.createEl('div', {
+        append: this.contentEl_,
+        className: 'vjs-menu'
+      });
+      el.appendChild(this.contentEl_);
+
+      // Prevent clicks from bubbling up. Needed for Menu Buttons,
+      // where a click on the parent is significant
+      on(el, 'click', function (event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      });
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.boundHandleBlur_ = null;
+      this.boundHandleTapClick_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Called when a `MenuItem` loses focus.
+     *
+     * @param {Event} event
+     *        The `blur` event that caused this function to be called.
+     *
+     * @listens blur
+     */
+    handleBlur(event) {
+      const relatedTarget = event.relatedTarget || document.activeElement;
+
+      // Close menu popup when a user clicks outside the menu
+      if (!this.children().some(element => {
+        return element.el() === relatedTarget;
+      })) {
+        const btn = this.menuButton_;
+        if (btn && btn.buttonPressed_ && relatedTarget !== btn.el().firstChild) {
+          btn.unpressButton();
+        }
+      }
+    }
+
+    /**
+     * Called when a `MenuItem` gets clicked or tapped.
+     *
+     * @param {Event} event
+     *        The `click` or `tap` event that caused this function to be called.
+     *
+     * @listens click,tap
+     */
+    handleTapClick(event) {
+      // Unpress the associated MenuButton, and move focus back to it
+      if (this.menuButton_) {
+        this.menuButton_.unpressButton();
+        const childComponents = this.children();
+        if (!Array.isArray(childComponents)) {
+          return;
+        }
+        const foundComponent = childComponents.filter(component => component.el() === event.target)[0];
+        if (!foundComponent) {
+          return;
+        }
+
+        // don't focus menu button if item is a caption settings item
+        // because focus will move elsewhere
+        if (foundComponent.name() !== 'CaptionSettingsMenuItem') {
+          this.menuButton_.focus();
+        }
+      }
+    }
+
+    /**
+     * Handle a `keydown` event on this menu. This listener is added in the constructor.
+     *
+     * @param {KeyboardEvent} event
+     *        A `keydown` event that happened on the menu.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Left and Down Arrows
+      if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepForward();
+
+        // Up and Right Arrows
+      } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepBack();
+      }
+    }
+
+    /**
+     * Move to next (lower) menu item for keyboard users.
+     */
+    stepForward() {
+      let stepChild = 0;
+      if (this.focusedChild_ !== undefined) {
+        stepChild = this.focusedChild_ + 1;
+      }
+      this.focus(stepChild);
+    }
+
+    /**
+     * Move to previous (higher) menu item for keyboard users.
+     */
+    stepBack() {
+      let stepChild = 0;
+      if (this.focusedChild_ !== undefined) {
+        stepChild = this.focusedChild_ - 1;
+      }
+      this.focus(stepChild);
+    }
+
+    /**
+     * Set focus on a {@link MenuItem} in the `Menu`.
+     *
+     * @param {Object|string} [item=0]
+     *        Index of child item set focus on.
+     */
+    focus(item = 0) {
+      const children = this.children().slice();
+      const haveTitle = children.length && children[0].hasClass('vjs-menu-title');
+      if (haveTitle) {
+        children.shift();
+      }
+      if (children.length > 0) {
+        if (item < 0) {
+          item = 0;
+        } else if (item >= children.length) {
+          item = children.length - 1;
+        }
+        this.focusedChild_ = item;
+        children[item].el_.focus();
+      }
+    }
+  }
+  Component.registerComponent('Menu', Menu);
+
+  /**
+   * @file menu-button.js
+   */
+
+  /**
+   * A `MenuButton` class for any popup {@link Menu}.
+   *
+   * @extends Component
+   */
+  class MenuButton extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+      this.menuButton_ = new Button(player, options);
+      this.menuButton_.controlText(this.controlText_);
+      this.menuButton_.el_.setAttribute('aria-haspopup', 'true');
+
+      // Add buildCSSClass values to the button, not the wrapper
+      const buttonClass = Button.prototype.buildCSSClass();
+      this.menuButton_.el_.className = this.buildCSSClass() + ' ' + buttonClass;
+      this.menuButton_.removeClass('vjs-control');
+      this.addChild(this.menuButton_);
+      this.update();
+      this.enabled_ = true;
+      const handleClick = e => this.handleClick(e);
+      this.handleMenuKeyUp_ = e => this.handleMenuKeyUp(e);
+      this.on(this.menuButton_, 'tap', handleClick);
+      this.on(this.menuButton_, 'click', handleClick);
+      this.on(this.menuButton_, 'keydown', e => this.handleKeyDown(e));
+      this.on(this.menuButton_, 'mouseenter', () => {
+        this.addClass('vjs-hover');
+        this.menu.show();
+        on(document, 'keyup', this.handleMenuKeyUp_);
+      });
+      this.on('mouseleave', e => this.handleMouseLeave(e));
+      this.on('keydown', e => this.handleSubmenuKeyDown(e));
+    }
+
+    /**
+     * Update the menu based on the current state of its items.
+     */
+    update() {
+      const menu = this.createMenu();
+      if (this.menu) {
+        this.menu.dispose();
+        this.removeChild(this.menu);
+      }
+      this.menu = menu;
+      this.addChild(menu);
+
+      /**
+       * Track the state of the menu button
+       *
+       * @type {Boolean}
+       * @private
+       */
+      this.buttonPressed_ = false;
+      this.menuButton_.el_.setAttribute('aria-expanded', 'false');
+      if (this.items && this.items.length <= this.hideThreshold_) {
+        this.hide();
+        this.menu.contentEl_.removeAttribute('role');
+      } else {
+        this.show();
+        this.menu.contentEl_.setAttribute('role', 'menu');
+      }
+    }
+
+    /**
+     * Create the menu and add all items to it.
+     *
+     * @return {Menu}
+     *         The constructed menu
+     */
+    createMenu() {
+      const menu = new Menu(this.player_, {
+        menuButton: this
+      });
+
+      /**
+       * Hide the menu if the number of items is less than or equal to this threshold. This defaults
+       * to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list
+       * it here because every time we run `createMenu` we need to reset the value.
+       *
+       * @protected
+       * @type {Number}
+       */
+      this.hideThreshold_ = 0;
+
+      // Add a title list item to the top
+      if (this.options_.title) {
+        const titleEl = createEl('li', {
+          className: 'vjs-menu-title',
+          textContent: toTitleCase(this.options_.title),
+          tabIndex: -1
+        });
+        const titleComponent = new Component(this.player_, {
+          el: titleEl
+        });
+        menu.addItem(titleComponent);
+      }
+      this.items = this.createItems();
+      if (this.items) {
+        // Add menu items to the menu
+        for (let i = 0; i < this.items.length; i++) {
+          menu.addItem(this.items[i]);
+        }
+      }
+      return menu;
+    }
+
+    /**
+     * Create the list of menu items. Specific to each subclass.
+     *
+     * @abstract
+     */
+    createItems() {}
+
+    /**
+     * Create the `MenuButtons`s DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildWrapperCSSClass()
+      }, {});
+    }
+
+    /**
+     * Overwrites the `setIcon` method from `Component`.
+     * In this case, we want the icon to be appended to the menuButton.
+     *
+     * @param {string} name
+     *         The icon name to be added.
+     */
+    setIcon(name) {
+      super.setIcon(name, this.menuButton_.el_);
+    }
+
+    /**
+     * Allow sub components to stack CSS class names for the wrapper element
+     *
+     * @return {string}
+     *         The constructed wrapper DOM `className`
+     */
+    buildWrapperCSSClass() {
+      let menuButtonClass = 'vjs-menu-button';
+
+      // If the inline option is passed, we want to use different styles altogether.
+      if (this.options_.inline === true) {
+        menuButtonClass += '-inline';
+      } else {
+        menuButtonClass += '-popup';
+      }
+
+      // TODO: Fix the CSS so that this isn't necessary
+      const buttonClass = Button.prototype.buildCSSClass();
+      return `vjs-menu-button ${menuButtonClass} ${buttonClass} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      let menuButtonClass = 'vjs-menu-button';
+
+      // If the inline option is passed, we want to use different styles altogether.
+      if (this.options_.inline === true) {
+        menuButtonClass += '-inline';
+      } else {
+        menuButtonClass += '-popup';
+      }
+      return `vjs-menu-button ${menuButtonClass} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Get or set the localized control text that will be used for accessibility.
+     *
+     * > NOTE: This will come from the internal `menuButton_` element.
+     *
+     * @param {string} [text]
+     *        Control text for element.
+     *
+     * @param {Element} [el=this.menuButton_.el()]
+     *        Element to set the title on.
+     *
+     * @return {string}
+     *         - The control text when getting
+     */
+    controlText(text, el = this.menuButton_.el()) {
+      return this.menuButton_.controlText(text, el);
+    }
+
+    /**
+     * Dispose of the `menu-button` and all child components.
+     */
+    dispose() {
+      this.handleMouseLeave();
+      super.dispose();
+    }
+
+    /**
+     * Handle a click on a `MenuButton`.
+     * See {@link ClickableComponent#handleClick} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (this.buttonPressed_) {
+        this.unpressButton();
+      } else {
+        this.pressButton();
+      }
+    }
+
+    /**
+     * Handle `mouseleave` for `MenuButton`.
+     *
+     * @param {Event} event
+     *        The `mouseleave` event that caused this function to be called.
+     *
+     * @listens mouseleave
+     */
+    handleMouseLeave(event) {
+      this.removeClass('vjs-hover');
+      off(document, 'keyup', this.handleMenuKeyUp_);
+    }
+
+    /**
+     * Set the focus to the actual button, not to this element
+     */
+    focus() {
+      this.menuButton_.focus();
+    }
+
+    /**
+     * Remove the focus from the actual button, not this element
+     */
+    blur() {
+      this.menuButton_.blur();
+    }
+
+    /**
+     * Handle tab, escape, down arrow, and up arrow keys for `MenuButton`. See
+     * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Escape or Tab unpress the 'button'
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        if (this.buttonPressed_) {
+          this.unpressButton();
+        }
+
+        // Don't preventDefault for Tab key - we still want to lose focus
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.preventDefault();
+          // Set focus back to the menu button's button
+          this.menuButton_.focus();
+        }
+        // Up Arrow or Down Arrow also 'press' the button to open the menu
+      } else if (keycode.isEventKey(event, 'Up') || keycode.isEventKey(event, 'Down')) {
+        if (!this.buttonPressed_) {
+          event.preventDefault();
+          this.pressButton();
+        }
+      }
+    }
+
+    /**
+     * Handle a `keyup` event on a `MenuButton`. The listener for this is added in
+     * the constructor.
+     *
+     * @param {Event} event
+     *        Key press event
+     *
+     * @listens keyup
+     */
+    handleMenuKeyUp(event) {
+      // Escape hides popup menu
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        this.removeClass('vjs-hover');
+      }
+    }
+
+    /**
+     * This method name now delegates to `handleSubmenuKeyDown`. This means
+     * anyone calling `handleSubmenuKeyPress` will not see their method calls
+     * stop working.
+     *
+     * @param {Event} event
+     *        The event that caused this function to be called.
+     */
+    handleSubmenuKeyPress(event) {
+      this.handleSubmenuKeyDown(event);
+    }
+
+    /**
+     * Handle a `keydown` event on a sub-menu. The listener for this is added in
+     * the constructor.
+     *
+     * @param {Event} event
+     *        Key press event
+     *
+     * @listens keydown
+     */
+    handleSubmenuKeyDown(event) {
+      // Escape or Tab unpress the 'button'
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        if (this.buttonPressed_) {
+          this.unpressButton();
+        }
+        // Don't preventDefault for Tab key - we still want to lose focus
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.preventDefault();
+          // Set focus back to the menu button's button
+          this.menuButton_.focus();
+        }
+      }
+    }
+
+    /**
+     * Put the current `MenuButton` into a pressed state.
+     */
+    pressButton() {
+      if (this.enabled_) {
+        this.buttonPressed_ = true;
+        this.menu.show();
+        this.menu.lockShowing();
+        this.menuButton_.el_.setAttribute('aria-expanded', 'true');
+
+        // set the focus into the submenu, except on iOS where it is resulting in
+        // undesired scrolling behavior when the player is in an iframe
+        if (IS_IOS && isInFrame()) {
+          // Return early so that the menu isn't focused
+          return;
+        }
+        this.menu.focus();
+      }
+    }
+
+    /**
+     * Take the current `MenuButton` out of a pressed state.
+     */
+    unpressButton() {
+      if (this.enabled_) {
+        this.buttonPressed_ = false;
+        this.menu.unlockShowing();
+        this.menu.hide();
+        this.menuButton_.el_.setAttribute('aria-expanded', 'false');
+      }
+    }
+
+    /**
+     * Disable the `MenuButton`. Don't allow it to be clicked.
+     */
+    disable() {
+      this.unpressButton();
+      this.enabled_ = false;
+      this.addClass('vjs-disabled');
+      this.menuButton_.disable();
+    }
+
+    /**
+     * Enable the `MenuButton`. Allow it to be clicked.
+     */
+    enable() {
+      this.enabled_ = true;
+      this.removeClass('vjs-disabled');
+      this.menuButton_.enable();
+    }
+  }
+  Component.registerComponent('MenuButton', MenuButton);
+
+  /**
+   * @file track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific  track types (e.g. subtitles).
+   *
+   * @extends MenuButton
+   */
+  class TrackButton extends MenuButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const tracks = options.tracks;
+      super(player, options);
+      if (this.items.length <= 1) {
+        this.hide();
+      }
+      if (!tracks) {
+        return;
+      }
+      const updateHandler = bind_(this, this.update);
+      tracks.addEventListener('removetrack', updateHandler);
+      tracks.addEventListener('addtrack', updateHandler);
+      tracks.addEventListener('labelchange', updateHandler);
+      this.player_.on('ready', updateHandler);
+      this.player_.on('dispose', function () {
+        tracks.removeEventListener('removetrack', updateHandler);
+        tracks.removeEventListener('addtrack', updateHandler);
+        tracks.removeEventListener('labelchange', updateHandler);
+      });
+    }
+  }
+  Component.registerComponent('TrackButton', TrackButton);
+
+  /**
+   * @file menu-keys.js
+   */
+
+  /**
+    * All keys used for operation of a menu (`MenuButton`, `Menu`, and `MenuItem`)
+    * Note that 'Enter' and 'Space' are not included here (otherwise they would
+    * prevent the `MenuButton` and `MenuItem` from being keyboard-clickable)
+   *
+    * @typedef MenuKeys
+    * @array
+    */
+  const MenuKeys = ['Tab', 'Esc', 'Up', 'Down', 'Right', 'Left'];
+
+  /**
+   * @file menu-item.js
+   */
+
+  /**
+   * The component for a menu item. `<li>`
+   *
+   * @extends ClickableComponent
+   */
+  class MenuItem extends ClickableComponent {
+    /**
+     * Creates an instance of the this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.selectable = options.selectable;
+      this.isSelected_ = options.selected || false;
+      this.multiSelectable = options.multiSelectable;
+      this.selected(this.isSelected_);
+      if (this.selectable) {
+        if (this.multiSelectable) {
+          this.el_.setAttribute('role', 'menuitemcheckbox');
+        } else {
+          this.el_.setAttribute('role', 'menuitemradio');
+        }
+      } else {
+        this.el_.setAttribute('role', 'menuitem');
+      }
+    }
+
+    /**
+     * Create the `MenuItem's DOM element
+     *
+     * @param {string} [type=li]
+     *        Element's node type, not actually used, always set to `li`.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element
+     *
+     * @param {Object} [attrs={}]
+     *        An object of attributes that should be set on the element
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(type, props, attrs) {
+      // The control is textual, not just an icon
+      this.nonIconControl = true;
+      const el = super.createEl('li', Object.assign({
+        className: 'vjs-menu-item',
+        tabIndex: -1
+      }, props), attrs);
+
+      // swap icon with menu item text.
+      const menuItemEl = createEl('span', {
+        className: 'vjs-menu-item-text',
+        textContent: this.localize(this.options_.label)
+      });
+
+      // If using SVG icons, the element with vjs-icon-placeholder will be added separately.
+      if (this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(menuItemEl);
+      } else {
+        el.replaceChild(menuItemEl, el.querySelector('.vjs-icon-placeholder'));
+      }
+      return el;
+    }
+
+    /**
+     * Ignore keys which are used by the menu, but pass any other ones up. See
+     * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      if (!MenuKeys.some(key => keycode.isEventKey(event, key))) {
+        // Pass keydown handling up for unused keys
+        super.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Any click on a `MenuItem` puts it into the selected state.
+     * See {@link ClickableComponent#handleClick} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      this.selected(true);
+    }
+
+    /**
+     * Set the state for this menu item as selected or not.
+     *
+     * @param {boolean} selected
+     *        if the menu item is selected or not
+     */
+    selected(selected) {
+      if (this.selectable) {
+        if (selected) {
+          this.addClass('vjs-selected');
+          this.el_.setAttribute('aria-checked', 'true');
+          // aria-checked isn't fully supported by browsers/screen readers,
+          // so indicate selected state to screen reader in the control text.
+          this.controlText(', selected');
+          this.isSelected_ = true;
+        } else {
+          this.removeClass('vjs-selected');
+          this.el_.setAttribute('aria-checked', 'false');
+          // Indicate un-selected state to screen reader
+          this.controlText('');
+          this.isSelected_ = false;
+        }
+      }
+    }
+  }
+  Component.registerComponent('MenuItem', MenuItem);
+
+  /**
+   * @file text-track-menu-item.js
+   */
+
+  /**
+   * The specific menu item type for selecting a language within a text track kind
+   *
+   * @extends MenuItem
+   */
+  class TextTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const tracks = player.textTracks();
+
+      // Modify options for parent MenuItem class's init.
+      options.label = track.label || track.language || 'Unknown';
+      options.selected = track.mode === 'showing';
+      super(player, options);
+      this.track = track;
+      // Determine the relevant kind(s) of tracks for this component and filter
+      // out empty kinds.
+      this.kinds = (options.kinds || [options.kind || this.track.kind]).filter(Boolean);
+      const changeHandler = (...args) => {
+        this.handleTracksChange.apply(this, args);
+      };
+      const selectedLanguageChangeHandler = (...args) => {
+        this.handleSelectedLanguageChange.apply(this, args);
+      };
+      player.on(['loadstart', 'texttrackchange'], changeHandler);
+      tracks.addEventListener('change', changeHandler);
+      tracks.addEventListener('selectedlanguagechange', selectedLanguageChangeHandler);
+      this.on('dispose', function () {
+        player.off(['loadstart', 'texttrackchange'], changeHandler);
+        tracks.removeEventListener('change', changeHandler);
+        tracks.removeEventListener('selectedlanguagechange', selectedLanguageChangeHandler);
+      });
+
+      // iOS7 doesn't dispatch change events to TextTrackLists when an
+      // associated track's mode changes. Without something like
+      // Object.observe() (also not present on iOS7), it's not
+      // possible to detect changes to the mode attribute and polyfill
+      // the change event. As a poor substitute, we manually dispatch
+      // change events whenever the controls modify the mode.
+      if (tracks.onchange === undefined) {
+        let event;
+        this.on(['tap', 'click'], function () {
+          if (typeof window.Event !== 'object') {
+            // Android 2.3 throws an Illegal Constructor error for window.Event
+            try {
+              event = new window.Event('change');
+            } catch (err) {
+              // continue regardless of error
+            }
+          }
+          if (!event) {
+            event = document.createEvent('Event');
+            event.initEvent('change', true, true);
+          }
+          tracks.dispatchEvent(event);
+        });
+      }
+
+      // set the default state based on current tracks
+      this.handleTracksChange();
+    }
+
+    /**
+     * This gets called when an `TextTrackMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const referenceTrack = this.track;
+      const tracks = this.player_.textTracks();
+      super.handleClick(event);
+      if (!tracks) {
+        return;
+      }
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+
+        // If the track from the text tracks list is not of the right kind,
+        // skip it. We do not want to affect tracks of incompatible kind(s).
+        if (this.kinds.indexOf(track.kind) === -1) {
+          continue;
+        }
+
+        // If this text track is the component's track and it is not showing,
+        // set it to showing.
+        if (track === referenceTrack) {
+          if (track.mode !== 'showing') {
+            track.mode = 'showing';
+          }
+
+          // If this text track is not the component's track and it is not
+          // disabled, set it to disabled.
+        } else if (track.mode !== 'disabled') {
+          track.mode = 'disabled';
+        }
+      }
+    }
+
+    /**
+     * Handle text track list change
+     *
+     * @param {Event} event
+     *        The `change` event that caused this function to be called.
+     *
+     * @listens TextTrackList#change
+     */
+    handleTracksChange(event) {
+      const shouldBeSelected = this.track.mode === 'showing';
+
+      // Prevent redundant selected() calls because they may cause
+      // screen readers to read the appended control text unnecessarily
+      if (shouldBeSelected !== this.isSelected_) {
+        this.selected(shouldBeSelected);
+      }
+    }
+    handleSelectedLanguageChange(event) {
+      if (this.track.mode === 'showing') {
+        const selectedLanguage = this.player_.cache_.selectedLanguage;
+
+        // Don't replace the kind of track across the same language
+        if (selectedLanguage && selectedLanguage.enabled && selectedLanguage.language === this.track.language && selectedLanguage.kind !== this.track.kind) {
+          return;
+        }
+        this.player_.cache_.selectedLanguage = {
+          enabled: true,
+          language: this.track.language,
+          kind: this.track.kind
+        };
+      }
+    }
+    dispose() {
+      // remove reference to track object on dispose
+      this.track = null;
+      super.dispose();
+    }
+  }
+  Component.registerComponent('TextTrackMenuItem', TextTrackMenuItem);
+
+  /**
+   * @file off-text-track-menu-item.js
+   */
+
+  /**
+   * A special menu item for turning off a specific type of text track
+   *
+   * @extends TextTrackMenuItem
+   */
+  class OffTextTrackMenuItem extends TextTrackMenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      // Create pseudo track info
+      // Requires options['kind']
+      options.track = {
+        player,
+        // it is no longer necessary to store `kind` or `kinds` on the track itself
+        // since they are now stored in the `kinds` property of all instances of
+        // TextTrackMenuItem, but this will remain for backwards compatibility
+        kind: options.kind,
+        kinds: options.kinds,
+        default: false,
+        mode: 'disabled'
+      };
+      if (!options.kinds) {
+        options.kinds = [options.kind];
+      }
+      if (options.label) {
+        options.track.label = options.label;
+      } else {
+        options.track.label = options.kinds.join(' and ') + ' off';
+      }
+
+      // MenuItem is selectable
+      options.selectable = true;
+      // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+      options.multiSelectable = false;
+      super(player, options);
+    }
+
+    /**
+     * Handle text track change
+     *
+     * @param {Event} event
+     *        The event that caused this function to run
+     */
+    handleTracksChange(event) {
+      const tracks = this.player().textTracks();
+      let shouldBeSelected = true;
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (this.options_.kinds.indexOf(track.kind) > -1 && track.mode === 'showing') {
+          shouldBeSelected = false;
+          break;
+        }
+      }
+
+      // Prevent redundant selected() calls because they may cause
+      // screen readers to read the appended control text unnecessarily
+      if (shouldBeSelected !== this.isSelected_) {
+        this.selected(shouldBeSelected);
+      }
+    }
+    handleSelectedLanguageChange(event) {
+      const tracks = this.player().textTracks();
+      let allHidden = true;
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (['captions', 'descriptions', 'subtitles'].indexOf(track.kind) > -1 && track.mode === 'showing') {
+          allHidden = false;
+          break;
+        }
+      }
+      if (allHidden) {
+        this.player_.cache_.selectedLanguage = {
+          enabled: false
+        };
+      }
+    }
+
+    /**
+     * Update control text and label on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.label);
+      super.handleLanguagechange();
+    }
+  }
+  Component.registerComponent('OffTextTrackMenuItem', OffTextTrackMenuItem);
+
+  /**
+   * @file text-track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific text track types (e.g. subtitles)
+   *
+   * @extends MenuButton
+   */
+  class TextTrackButton extends TrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.tracks = player.textTracks();
+      super(player, options);
+    }
+
+    /**
+     * Create a menu item for each text track
+     *
+     * @param {TextTrackMenuItem[]} [items=[]]
+     *        Existing array of items to use during creation
+     *
+     * @return {TextTrackMenuItem[]}
+     *         Array of menu items that were created
+     */
+    createItems(items = [], TrackMenuItem = TextTrackMenuItem) {
+      // Label is an override for the [track] off label
+      // USed to localise captions/subtitles
+      let label;
+      if (this.label_) {
+        label = `${this.label_} off`;
+      }
+      // Add an OFF menu item to turn all tracks off
+      items.push(new OffTextTrackMenuItem(this.player_, {
+        kinds: this.kinds_,
+        kind: this.kind_,
+        label
+      }));
+      this.hideThreshold_ += 1;
+      const tracks = this.player_.textTracks();
+      if (!Array.isArray(this.kinds_)) {
+        this.kinds_ = [this.kind_];
+      }
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+
+        // only add tracks that are of an appropriate kind and have a label
+        if (this.kinds_.indexOf(track.kind) > -1) {
+          const item = new TrackMenuItem(this.player_, {
+            track,
+            kinds: this.kinds_,
+            kind: this.kind_,
+            // MenuItem is selectable
+            selectable: true,
+            // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+            multiSelectable: false
+          });
+          item.addClass(`vjs-${track.kind}-menu-item`);
+          items.push(item);
+        }
+      }
+      return items;
+    }
+  }
+  Component.registerComponent('TextTrackButton', TextTrackButton);
+
+  /**
+   * @file chapters-track-menu-item.js
+   */
+
+  /**
+   * The chapter track menu item
+   *
+   * @extends MenuItem
+   */
+  class ChaptersTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const cue = options.cue;
+      const currentTime = player.currentTime();
+
+      // Modify options for parent MenuItem class's init.
+      options.selectable = true;
+      options.multiSelectable = false;
+      options.label = cue.text;
+      options.selected = cue.startTime <= currentTime && currentTime < cue.endTime;
+      super(player, options);
+      this.track = track;
+      this.cue = cue;
+    }
+
+    /**
+     * This gets called when an `ChaptersTrackMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick();
+      this.player_.currentTime(this.cue.startTime);
+    }
+  }
+  Component.registerComponent('ChaptersTrackMenuItem', ChaptersTrackMenuItem);
+
+  /**
+   * @file chapters-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting chapters
+   * Chapters act much differently than other text tracks
+   * Cues are navigation vs. other tracks of alternative languages
+   *
+   * @extends TextTrackButton
+   */
+  class ChaptersButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this function is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('chapters');
+      this.selectCurrentItem_ = () => {
+        this.items.forEach(item => {
+          item.selected(this.track_.activeCues[0] === item.cue);
+        });
+      };
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-chapters-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-chapters-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Update the menu based on the current state of its items.
+     *
+     * @param {Event} [event]
+     *        An event that triggered this function to run.
+     *
+     * @listens TextTrackList#addtrack
+     * @listens TextTrackList#removetrack
+     * @listens TextTrackList#change
+     */
+    update(event) {
+      if (event && event.track && event.track.kind !== 'chapters') {
+        return;
+      }
+      const track = this.findChaptersTrack();
+      if (track !== this.track_) {
+        this.setTrack(track);
+        super.update();
+      } else if (!this.items || track && track.cues && track.cues.length !== this.items.length) {
+        // Update the menu initially or if the number of cues has changed since set
+        super.update();
+      }
+    }
+
+    /**
+     * Set the currently selected track for the chapters button.
+     *
+     * @param {TextTrack} track
+     *        The new track to select. Nothing will change if this is the currently selected
+     *        track.
+     */
+    setTrack(track) {
+      if (this.track_ === track) {
+        return;
+      }
+      if (!this.updateHandler_) {
+        this.updateHandler_ = this.update.bind(this);
+      }
+
+      // here this.track_ refers to the old track instance
+      if (this.track_) {
+        const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
+        if (remoteTextTrackEl) {
+          remoteTextTrackEl.removeEventListener('load', this.updateHandler_);
+        }
+        this.track_.removeEventListener('cuechange', this.selectCurrentItem_);
+        this.track_ = null;
+      }
+      this.track_ = track;
+
+      // here this.track_ refers to the new track instance
+      if (this.track_) {
+        this.track_.mode = 'hidden';
+        const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
+        if (remoteTextTrackEl) {
+          remoteTextTrackEl.addEventListener('load', this.updateHandler_);
+        }
+        this.track_.addEventListener('cuechange', this.selectCurrentItem_);
+      }
+    }
+
+    /**
+     * Find the track object that is currently in use by this ChaptersButton
+     *
+     * @return {TextTrack|undefined}
+     *         The current track or undefined if none was found.
+     */
+    findChaptersTrack() {
+      const tracks = this.player_.textTracks() || [];
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        // We will always choose the last track as our chaptersTrack
+        const track = tracks[i];
+        if (track.kind === this.kind_) {
+          return track;
+        }
+      }
+    }
+
+    /**
+     * Get the caption for the ChaptersButton based on the track label. This will also
+     * use the current tracks localized kind as a fallback if a label does not exist.
+     *
+     * @return {string}
+     *         The tracks current label or the localized track kind.
+     */
+    getMenuCaption() {
+      if (this.track_ && this.track_.label) {
+        return this.track_.label;
+      }
+      return this.localize(toTitleCase(this.kind_));
+    }
+
+    /**
+     * Create menu from chapter track
+     *
+     * @return { import('../../menu/menu').default }
+     *         New menu for the chapter buttons
+     */
+    createMenu() {
+      this.options_.title = this.getMenuCaption();
+      return super.createMenu();
+    }
+
+    /**
+     * Create a menu item for each text track
+     *
+     * @return  { import('./text-track-menu-item').default[] }
+     *         Array of menu items
+     */
+    createItems() {
+      const items = [];
+      if (!this.track_) {
+        return items;
+      }
+      const cues = this.track_.cues;
+      if (!cues) {
+        return items;
+      }
+      for (let i = 0, l = cues.length; i < l; i++) {
+        const cue = cues[i];
+        const mi = new ChaptersTrackMenuItem(this.player_, {
+          track: this.track_,
+          cue
+        });
+        items.push(mi);
+      }
+      return items;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  ChaptersButton.prototype.kind_ = 'chapters';
+
+  /**
+   * The text that should display over the `ChaptersButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  ChaptersButton.prototype.controlText_ = 'Chapters';
+  Component.registerComponent('ChaptersButton', ChaptersButton);
+
+  /**
+   * @file descriptions-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting descriptions
+   *
+   * @extends TextTrackButton
+   */
+  class DescriptionsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('audio-description');
+      const tracks = player.textTracks();
+      const changeHandler = bind_(this, this.handleTracksChange);
+      tracks.addEventListener('change', changeHandler);
+      this.on('dispose', function () {
+        tracks.removeEventListener('change', changeHandler);
+      });
+    }
+
+    /**
+     * Handle text track change
+     *
+     * @param {Event} event
+     *        The event that caused this function to run
+     *
+     * @listens TextTrackList#change
+     */
+    handleTracksChange(event) {
+      const tracks = this.player().textTracks();
+      let disabled = false;
+
+      // Check whether a track of a different kind is showing
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (track.kind !== this.kind_ && track.mode === 'showing') {
+          disabled = true;
+          break;
+        }
+      }
+
+      // If another track is showing, disable this menu button
+      if (disabled) {
+        this.disable();
+      } else {
+        this.enable();
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-descriptions-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-descriptions-button ${super.buildWrapperCSSClass()}`;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  DescriptionsButton.prototype.kind_ = 'descriptions';
+
+  /**
+   * The text that should display over the `DescriptionsButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  DescriptionsButton.prototype.controlText_ = 'Descriptions';
+  Component.registerComponent('DescriptionsButton', DescriptionsButton);
+
+  /**
+   * @file subtitles-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting subtitles
+   *
+   * @extends TextTrackButton
+   */
+  class SubtitlesButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('subtitles');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-subtitles-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-subtitles-button ${super.buildWrapperCSSClass()}`;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  SubtitlesButton.prototype.kind_ = 'subtitles';
+
+  /**
+   * The text that should display over the `SubtitlesButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  SubtitlesButton.prototype.controlText_ = 'Subtitles';
+  Component.registerComponent('SubtitlesButton', SubtitlesButton);
+
+  /**
+   * @file caption-settings-menu-item.js
+   */
+
+  /**
+   * The menu item for caption track settings menu
+   *
+   * @extends TextTrackMenuItem
+   */
+  class CaptionSettingsMenuItem extends TextTrackMenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      options.track = {
+        player,
+        kind: options.kind,
+        label: options.kind + ' settings',
+        selectable: false,
+        default: false,
+        mode: 'disabled'
+      };
+
+      // CaptionSettingsMenuItem has no concept of 'selected'
+      options.selectable = false;
+      options.name = 'CaptionSettingsMenuItem';
+      super(player, options);
+      this.addClass('vjs-texttrack-settings');
+      this.controlText(', opens ' + options.kind + ' settings dialog');
+    }
+
+    /**
+     * This gets called when an `CaptionSettingsMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      this.player().getChild('textTrackSettings').open();
+    }
+
+    /**
+     * Update control text and label on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.kind + ' settings');
+      super.handleLanguagechange();
+    }
+  }
+  Component.registerComponent('CaptionSettingsMenuItem', CaptionSettingsMenuItem);
+
+  /**
+   * @file captions-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting captions
+   *
+   * @extends TextTrackButton
+   */
+  class CaptionsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('captions');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-captions-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-captions-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create caption menu items
+     *
+     * @return {CaptionSettingsMenuItem[]}
+     *         The array of current menu items.
+     */
+    createItems() {
+      const items = [];
+      if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks) && this.player().getChild('textTrackSettings')) {
+        items.push(new CaptionSettingsMenuItem(this.player_, {
+          kind: this.kind_
+        }));
+        this.hideThreshold_ += 1;
+      }
+      return super.createItems(items);
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  CaptionsButton.prototype.kind_ = 'captions';
+
+  /**
+   * The text that should display over the `CaptionsButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  CaptionsButton.prototype.controlText_ = 'Captions';
+  Component.registerComponent('CaptionsButton', CaptionsButton);
+
+  /**
+   * @file subs-caps-menu-item.js
+   */
+
+  /**
+   * SubsCapsMenuItem has an [cc] icon to distinguish captions from subtitles
+   * in the SubsCapsMenu.
+   *
+   * @extends TextTrackMenuItem
+   */
+  class SubsCapsMenuItem extends TextTrackMenuItem {
+    createEl(type, props, attrs) {
+      const el = super.createEl(type, props, attrs);
+      const parentSpan = el.querySelector('.vjs-menu-item-text');
+      if (this.options_.track.kind === 'captions') {
+        if (this.player_.options_.experimentalSvgIcons) {
+          this.setIcon('captions', el);
+        } else {
+          parentSpan.appendChild(createEl('span', {
+            className: 'vjs-icon-placeholder'
+          }, {
+            'aria-hidden': true
+          }));
+        }
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-control-text',
+          // space added as the text will visually flow with the
+          // label
+          textContent: ` ${this.localize('Captions')}`
+        }));
+      }
+      return el;
+    }
+  }
+  Component.registerComponent('SubsCapsMenuItem', SubsCapsMenuItem);
+
+  /**
+   * @file sub-caps-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting captions and/or subtitles
+   *
+   * @extends TextTrackButton
+   */
+  class SubsCapsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+
+      // Although North America uses "captions" in most cases for
+      // "captions and subtitles" other locales use "subtitles"
+      this.label_ = 'subtitles';
+      this.setIcon('subtitles');
+      if (['en', 'en-us', 'en-ca', 'fr-ca'].indexOf(this.player_.language_) > -1) {
+        this.label_ = 'captions';
+        this.setIcon('captions');
+      }
+      this.menuButton_.controlText(toTitleCase(this.label_));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-subs-caps-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-subs-caps-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create caption/subtitles menu items
+     *
+     * @return {CaptionSettingsMenuItem[]}
+     *         The array of current menu items.
+     */
+    createItems() {
+      let items = [];
+      if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks) && this.player().getChild('textTrackSettings')) {
+        items.push(new CaptionSettingsMenuItem(this.player_, {
+          kind: this.label_
+        }));
+        this.hideThreshold_ += 1;
+      }
+      items = super.createItems(items, SubsCapsMenuItem);
+      return items;
+    }
+  }
+
+  /**
+   * `kind`s of TextTrack to look for to associate it with this menu.
+   *
+   * @type {array}
+   * @private
+   */
+  SubsCapsButton.prototype.kinds_ = ['captions', 'subtitles'];
+
+  /**
+   * The text that should display over the `SubsCapsButton`s controls.
+   *
+   *
+   * @type {string}
+   * @protected
+   */
+  SubsCapsButton.prototype.controlText_ = 'Subtitles';
+  Component.registerComponent('SubsCapsButton', SubsCapsButton);
+
+  /**
+   * @file audio-track-menu-item.js
+   */
+
+  /**
+   * An {@link AudioTrack} {@link MenuItem}
+   *
+   * @extends MenuItem
+   */
+  class AudioTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const tracks = player.audioTracks();
+
+      // Modify options for parent MenuItem class's init.
+      options.label = track.label || track.language || 'Unknown';
+      options.selected = track.enabled;
+      super(player, options);
+      this.track = track;
+      this.addClass(`vjs-${track.kind}-menu-item`);
+      const changeHandler = (...args) => {
+        this.handleTracksChange.apply(this, args);
+      };
+      tracks.addEventListener('change', changeHandler);
+      this.on('dispose', () => {
+        tracks.removeEventListener('change', changeHandler);
+      });
+    }
+    createEl(type, props, attrs) {
+      const el = super.createEl(type, props, attrs);
+      const parentSpan = el.querySelector('.vjs-menu-item-text');
+      if (['main-desc', 'description'].indexOf(this.options_.track.kind) >= 0) {
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-control-text',
+          textContent: ' ' + this.localize('Descriptions')
+        }));
+      }
+      return el;
+    }
+
+    /**
+     * This gets called when an `AudioTrackMenuItem is "clicked". See {@link ClickableComponent}
+     * for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick(event);
+
+      // the audio track list will automatically toggle other tracks
+      // off for us.
+      this.track.enabled = true;
+
+      // when native audio tracks are used, we want to make sure that other tracks are turned off
+      if (this.player_.tech_.featuresNativeAudioTracks) {
+        const tracks = this.player_.audioTracks();
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+
+          // skip the current track since we enabled it above
+          if (track === this.track) {
+            continue;
+          }
+          track.enabled = track === this.track;
+        }
+      }
+    }
+
+    /**
+     * Handle any {@link AudioTrack} change.
+     *
+     * @param {Event} [event]
+     *        The {@link AudioTrackList#change} event that caused this to run.
+     *
+     * @listens AudioTrackList#change
+     */
+    handleTracksChange(event) {
+      this.selected(this.track.enabled);
+    }
+  }
+  Component.registerComponent('AudioTrackMenuItem', AudioTrackMenuItem);
+
+  /**
+   * @file audio-track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific {@link AudioTrack} types.
+   *
+   * @extends TrackButton
+   */
+  class AudioTrackButton extends TrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param {Player} player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.tracks = player.audioTracks();
+      super(player, options);
+      this.setIcon('audio');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-audio-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-audio-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create a menu item for each audio track
+     *
+     * @param {AudioTrackMenuItem[]} [items=[]]
+     *        An array of existing menu items to use.
+     *
+     * @return {AudioTrackMenuItem[]}
+     *         An array of menu items
+     */
+    createItems(items = []) {
+      // if there's only one audio track, there no point in showing it
+      this.hideThreshold_ = 1;
+      const tracks = this.player_.audioTracks();
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        items.push(new AudioTrackMenuItem(this.player_, {
+          track,
+          // MenuItem is selectable
+          selectable: true,
+          // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+          multiSelectable: false
+        }));
+      }
+      return items;
+    }
+  }
+
+  /**
+   * The text that should display over the `AudioTrackButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  AudioTrackButton.prototype.controlText_ = 'Audio Track';
+  Component.registerComponent('AudioTrackButton', AudioTrackButton);
+
+  /**
+   * @file playback-rate-menu-item.js
+   */
+
+  /**
+   * The specific menu item type for selecting a playback rate.
+   *
+   * @extends MenuItem
+   */
+  class PlaybackRateMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const label = options.rate;
+      const rate = parseFloat(label, 10);
+
+      // Modify options for parent MenuItem class's init.
+      options.label = label;
+      options.selected = rate === player.playbackRate();
+      options.selectable = true;
+      options.multiSelectable = false;
+      super(player, options);
+      this.label = label;
+      this.rate = rate;
+      this.on(player, 'ratechange', e => this.update(e));
+    }
+
+    /**
+     * This gets called when an `PlaybackRateMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick();
+      this.player().playbackRate(this.rate);
+    }
+
+    /**
+     * Update the PlaybackRateMenuItem when the playbackrate changes.
+     *
+     * @param {Event} [event]
+     *        The `ratechange` event that caused this function to run.
+     *
+     * @listens Player#ratechange
+     */
+    update(event) {
+      this.selected(this.player().playbackRate() === this.rate);
+    }
+  }
+
+  /**
+   * The text that should display over the `PlaybackRateMenuItem`s controls. Added for localization.
+   *
+   * @type {string}
+   * @private
+   */
+  PlaybackRateMenuItem.prototype.contentElType = 'button';
+  Component.registerComponent('PlaybackRateMenuItem', PlaybackRateMenuItem);
+
+  /**
+   * @file playback-rate-menu-button.js
+   */
+
+  /**
+   * The component for controlling the playback rate.
+   *
+   * @extends MenuButton
+   */
+  class PlaybackRateMenuButton extends MenuButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);
+      this.updateVisibility();
+      this.updateLabel();
+      this.on(player, 'loadstart', e => this.updateVisibility(e));
+      this.on(player, 'ratechange', e => this.updateLabel(e));
+      this.on(player, 'playbackrateschange', e => this.handlePlaybackRateschange(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl();
+      this.labelElId_ = 'vjs-playback-rate-value-label-' + this.id_;
+      this.labelEl_ = createEl('div', {
+        className: 'vjs-playback-rate-value',
+        id: this.labelElId_,
+        textContent: '1x'
+      });
+      el.appendChild(this.labelEl_);
+      return el;
+    }
+    dispose() {
+      this.labelEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-playback-rate ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-playback-rate ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create the list of menu items. Specific to each subclass.
+     *
+     */
+    createItems() {
+      const rates = this.playbackRates();
+      const items = [];
+      for (let i = rates.length - 1; i >= 0; i--) {
+        items.push(new PlaybackRateMenuItem(this.player(), {
+          rate: rates[i] + 'x'
+        }));
+      }
+      return items;
+    }
+
+    /**
+     * On playbackrateschange, update the menu to account for the new items.
+     *
+     * @listens Player#playbackrateschange
+     */
+    handlePlaybackRateschange(event) {
+      this.update();
+    }
+
+    /**
+     * Get possible playback rates
+     *
+     * @return {Array}
+     *         All possible playback rates
+     */
+    playbackRates() {
+      const player = this.player();
+      return player.playbackRates && player.playbackRates() || [];
+    }
+
+    /**
+     * Get whether playback rates is supported by the tech
+     * and an array of playback rates exists
+     *
+     * @return {boolean}
+     *         Whether changing playback rate is supported
+     */
+    playbackRateSupported() {
+      return this.player().tech_ && this.player().tech_.featuresPlaybackRate && this.playbackRates() && this.playbackRates().length > 0;
+    }
+
+    /**
+     * Hide playback rate controls when they're no playback rate options to select
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#loadstart
+     */
+    updateVisibility(event) {
+      if (this.playbackRateSupported()) {
+        this.removeClass('vjs-hidden');
+      } else {
+        this.addClass('vjs-hidden');
+      }
+    }
+
+    /**
+     * Update button label when rate changed
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#ratechange
+     */
+    updateLabel(event) {
+      if (this.playbackRateSupported()) {
+        this.labelEl_.textContent = this.player().playbackRate() + 'x';
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `PlaybackRateMenuButton`s controls.
+   *
+   * Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PlaybackRateMenuButton.prototype.controlText_ = 'Playback Rate';
+  Component.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton);
+
+  /**
+   * @file spacer.js
+   */
+
+  /**
+   * Just an empty spacer element that can be used as an append point for plugins, etc.
+   * Also can be used to create space between elements when necessary.
+   *
+   * @extends Component
+   */
+  class Spacer extends Component {
+    /**
+    * Builds the default DOM `className`.
+    *
+    * @return {string}
+    *         The DOM `className` for this object.
+    */
+    buildCSSClass() {
+      return `vjs-spacer ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(tag = 'div', props = {}, attributes = {}) {
+      if (!props.className) {
+        props.className = this.buildCSSClass();
+      }
+      return super.createEl(tag, props, attributes);
+    }
+  }
+  Component.registerComponent('Spacer', Spacer);
+
+  /**
+   * @file custom-control-spacer.js
+   */
+
+  /**
+   * Spacer specifically meant to be used as an insertion point for new plugins, etc.
+   *
+   * @extends Spacer
+   */
+  class CustomControlSpacer extends Spacer {
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-custom-control-spacer ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildCSSClass(),
+        // No-flex/table-cell mode requires there be some content
+        // in the cell to fill the remaining space of the table.
+        textContent: '\u00a0'
+      });
+    }
+  }
+  Component.registerComponent('CustomControlSpacer', CustomControlSpacer);
+
+  /**
+   * @file control-bar.js
+   */
+
+  /**
+   * Container of main controls.
+   *
+   * @extends Component
+   */
+  class ControlBar extends Component {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-control-bar',
+        dir: 'ltr'
+      });
+    }
+  }
+
+  /**
+   * Default options for `ControlBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  ControlBar.prototype.options_ = {
+    children: ['playToggle', 'skipBackward', 'skipForward', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'seekToLive', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'pictureInPictureToggle', 'fullscreenToggle']
+  };
+  Component.registerComponent('ControlBar', ControlBar);
+
+  /**
+   * @file error-display.js
+   */
+
+  /**
+   * A display that indicates an error has occurred. This means that the video
+   * is unplayable.
+   *
+   * @extends ModalDialog
+   */
+  class ErrorDisplay extends ModalDialog {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  { import('./player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, 'error', e => {
+        this.open(e);
+      });
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     *
+     * @deprecated Since version 5.
+     */
+    buildCSSClass() {
+      return `vjs-error-display ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Gets the localized error message based on the `Player`s error.
+     *
+     * @return {string}
+     *         The `Player`s error message localized or an empty string.
+     */
+    content() {
+      const error = this.player().error();
+      return error ? this.localize(error.message) : '';
+    }
+  }
+
+  /**
+   * The default options for an `ErrorDisplay`.
+   *
+   * @private
+   */
+  ErrorDisplay.prototype.options_ = Object.assign({}, ModalDialog.prototype.options_, {
+    pauseOnOpen: false,
+    fillAlways: true,
+    temporary: false,
+    uncloseable: true
+  });
+  Component.registerComponent('ErrorDisplay', ErrorDisplay);
+
+  /**
+   * @file text-track-settings.js
+   */
+  const LOCAL_STORAGE_KEY = 'vjs-text-track-settings';
+  const COLOR_BLACK = ['#000', 'Black'];
+  const COLOR_BLUE = ['#00F', 'Blue'];
+  const COLOR_CYAN = ['#0FF', 'Cyan'];
+  const COLOR_GREEN = ['#0F0', 'Green'];
+  const COLOR_MAGENTA = ['#F0F', 'Magenta'];
+  const COLOR_RED = ['#F00', 'Red'];
+  const COLOR_WHITE = ['#FFF', 'White'];
+  const COLOR_YELLOW = ['#FF0', 'Yellow'];
+  const OPACITY_OPAQUE = ['1', 'Opaque'];
+  const OPACITY_SEMI = ['0.5', 'Semi-Transparent'];
+  const OPACITY_TRANS = ['0', 'Transparent'];
+
+  // Configuration for the various <select> elements in the DOM of this component.
+  //
+  // Possible keys include:
+  //
+  // `default`:
+  //   The default option index. Only needs to be provided if not zero.
+  // `parser`:
+  //   A function which is used to parse the value from the selected option in
+  //   a customized way.
+  // `selector`:
+  //   The selector used to find the associated <select> element.
+  const selectConfigs = {
+    backgroundColor: {
+      selector: '.vjs-bg-color > select',
+      id: 'captions-background-color-%s',
+      label: 'Color',
+      options: [COLOR_BLACK, COLOR_WHITE, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
+    },
+    backgroundOpacity: {
+      selector: '.vjs-bg-opacity > select',
+      id: 'captions-background-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_OPAQUE, OPACITY_SEMI, OPACITY_TRANS]
+    },
+    color: {
+      selector: '.vjs-text-color > select',
+      id: 'captions-foreground-color-%s',
+      label: 'Color',
+      options: [COLOR_WHITE, COLOR_BLACK, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
+    },
+    edgeStyle: {
+      selector: '.vjs-edge-style > select',
+      id: '%s',
+      label: 'Text Edge Style',
+      options: [['none', 'None'], ['raised', 'Raised'], ['depressed', 'Depressed'], ['uniform', 'Uniform'], ['dropshadow', 'Drop shadow']]
+    },
+    fontFamily: {
+      selector: '.vjs-font-family > select',
+      id: 'captions-font-family-%s',
+      label: 'Font Family',
+      options: [['proportionalSansSerif', 'Proportional Sans-Serif'], ['monospaceSansSerif', 'Monospace Sans-Serif'], ['proportionalSerif', 'Proportional Serif'], ['monospaceSerif', 'Monospace Serif'], ['casual', 'Casual'], ['script', 'Script'], ['small-caps', 'Small Caps']]
+    },
+    fontPercent: {
+      selector: '.vjs-font-percent > select',
+      id: 'captions-font-size-%s',
+      label: 'Font Size',
+      options: [['0.50', '50%'], ['0.75', '75%'], ['1.00', '100%'], ['1.25', '125%'], ['1.50', '150%'], ['1.75', '175%'], ['2.00', '200%'], ['3.00', '300%'], ['4.00', '400%']],
+      default: 2,
+      parser: v => v === '1.00' ? null : Number(v)
+    },
+    textOpacity: {
+      selector: '.vjs-text-opacity > select',
+      id: 'captions-foreground-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_OPAQUE, OPACITY_SEMI]
+    },
+    // Options for this object are defined below.
+    windowColor: {
+      selector: '.vjs-window-color > select',
+      id: 'captions-window-color-%s',
+      label: 'Color'
+    },
+    // Options for this object are defined below.
+    windowOpacity: {
+      selector: '.vjs-window-opacity > select',
+      id: 'captions-window-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_TRANS, OPACITY_SEMI, OPACITY_OPAQUE]
+    }
+  };
+  selectConfigs.windowColor.options = selectConfigs.backgroundColor.options;
+
+  /**
+   * Get the actual value of an option.
+   *
+   * @param  {string} value
+   *         The value to get
+   *
+   * @param  {Function} [parser]
+   *         Optional function to adjust the value.
+   *
+   * @return {*}
+   *         - Will be `undefined` if no value exists
+   *         - Will be `undefined` if the given value is "none".
+   *         - Will be the actual value otherwise.
+   *
+   * @private
+   */
+  function parseOptionValue(value, parser) {
+    if (parser) {
+      value = parser(value);
+    }
+    if (value && value !== 'none') {
+      return value;
+    }
+  }
+
+  /**
+   * Gets the value of the selected <option> element within a <select> element.
+   *
+   * @param  {Element} el
+   *         the element to look in
+   *
+   * @param  {Function} [parser]
+   *         Optional function to adjust the value.
+   *
+   * @return {*}
+   *         - Will be `undefined` if no value exists
+   *         - Will be `undefined` if the given value is "none".
+   *         - Will be the actual value otherwise.
+   *
+   * @private
+   */
+  function getSelectedOptionValue(el, parser) {
+    const value = el.options[el.options.selectedIndex].value;
+    return parseOptionValue(value, parser);
+  }
+
+  /**
+   * Sets the selected <option> element within a <select> element based on a
+   * given value.
+   *
+   * @param {Element} el
+   *        The element to look in.
+   *
+   * @param {string} value
+   *        the property to look on.
+   *
+   * @param {Function} [parser]
+   *        Optional function to adjust the value before comparing.
+   *
+   * @private
+   */
+  function setSelectedOption(el, value, parser) {
+    if (!value) {
+      return;
+    }
+    for (let i = 0; i < el.options.length; i++) {
+      if (parseOptionValue(el.options[i].value, parser) === value) {
+        el.selectedIndex = i;
+        break;
+      }
+    }
+  }
+
+  /**
+   * Manipulate Text Tracks settings.
+   *
+   * @extends ModalDialog
+   */
+  class TextTrackSettings extends ModalDialog {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player, options) {
+      options.temporary = false;
+      super(player, options);
+      this.updateDisplay = this.updateDisplay.bind(this);
+
+      // fill the modal and pretend we have opened it
+      this.fill();
+      this.hasBeenOpened_ = this.hasBeenFilled_ = true;
+      this.endDialog = createEl('p', {
+        className: 'vjs-control-text',
+        textContent: this.localize('End of dialog window.')
+      });
+      this.el().appendChild(this.endDialog);
+      this.setDefaults();
+
+      // Grab `persistTextTrackSettings` from the player options if not passed in child options
+      if (options.persistTextTrackSettings === undefined) {
+        this.options_.persistTextTrackSettings = this.options_.playerOptions.persistTextTrackSettings;
+      }
+      this.on(this.$('.vjs-done-button'), 'click', () => {
+        this.saveSettings();
+        this.close();
+      });
+      this.on(this.$('.vjs-default-button'), 'click', () => {
+        this.setDefaults();
+        this.updateDisplay();
+      });
+      each(selectConfigs, config => {
+        this.on(this.$(config.selector), 'change', this.updateDisplay);
+      });
+      if (this.options_.persistTextTrackSettings) {
+        this.restoreSettings();
+      }
+    }
+    dispose() {
+      this.endDialog = null;
+      super.dispose();
+    }
+
+    /**
+     * Create a <select> element with configured options.
+     *
+     * @param {string} key
+     *        Configuration key to use during creation.
+     *
+     * @param {string} [legendId]
+     *        Id of associated <legend>.
+     *
+     * @param {string} [type=label]
+     *        Type of labelling element, `label` or `legend`
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElSelect_(key, legendId = '', type = 'label') {
+      const config = selectConfigs[key];
+      const id = config.id.replace('%s', this.id_);
+      const selectLabelledbyIds = [legendId, id].join(' ').trim();
+      const guid = `vjs_select_${newGUID()}`;
+      return [`<${type} id="${id}"${type === 'label' ? ` for="${guid}" class="vjs-label"` : ''}>`, this.localize(config.label), `</${type}>`, `<select aria-labelledby="${selectLabelledbyIds}" id="${guid}">`].concat(config.options.map(o => {
+        const optionId = id + '-' + o[1].replace(/\W+/g, '');
+        return [`<option id="${optionId}" value="${o[0]}" `, `aria-labelledby="${selectLabelledbyIds} ${optionId}">`, this.localize(o[1]), '</option>'].join('');
+      })).concat('</select>').join('');
+    }
+
+    /**
+     * Create foreground color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElFgColor_() {
+      const legendId = `captions-text-legend-${this.id_}`;
+      return ['<fieldset class="vjs-fg vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Text'), '</legend>', '<span class="vjs-text-color">', this.createElSelect_('color', legendId), '</span>', '<span class="vjs-text-opacity vjs-opacity">', this.createElSelect_('textOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create background color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElBgColor_() {
+      const legendId = `captions-background-${this.id_}`;
+      return ['<fieldset class="vjs-bg vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Text Background'), '</legend>', '<span class="vjs-bg-color">', this.createElSelect_('backgroundColor', legendId), '</span>', '<span class="vjs-bg-opacity vjs-opacity">', this.createElSelect_('backgroundOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create window color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElWinColor_() {
+      const legendId = `captions-window-${this.id_}`;
+      return ['<fieldset class="vjs-window vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Caption Area Background'), '</legend>', '<span class="vjs-window-color">', this.createElSelect_('windowColor', legendId), '</span>', '<span class="vjs-window-opacity vjs-opacity">', this.createElSelect_('windowOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create color elements for the component
+     *
+     * @return {Element}
+     *         The element that was created
+     *
+     * @private
+     */
+    createElColors_() {
+      return createEl('div', {
+        className: 'vjs-track-settings-colors',
+        innerHTML: [this.createElFgColor_(), this.createElBgColor_(), this.createElWinColor_()].join('')
+      });
+    }
+
+    /**
+     * Create font elements for the component
+     *
+     * @return {Element}
+     *         The element that was created.
+     *
+     * @private
+     */
+    createElFont_() {
+      return createEl('div', {
+        className: 'vjs-track-settings-font',
+        innerHTML: ['<fieldset class="vjs-font-percent vjs-track-setting">', this.createElSelect_('fontPercent', '', 'legend'), '</fieldset>', '<fieldset class="vjs-edge-style vjs-track-setting">', this.createElSelect_('edgeStyle', '', 'legend'), '</fieldset>', '<fieldset class="vjs-font-family vjs-track-setting">', this.createElSelect_('fontFamily', '', 'legend'), '</fieldset>'].join('')
+      });
+    }
+
+    /**
+     * Create controls for the component
+     *
+     * @return {Element}
+     *         The element that was created.
+     *
+     * @private
+     */
+    createElControls_() {
+      const defaultsDescription = this.localize('restore all settings to the default values');
+      return createEl('div', {
+        className: 'vjs-track-settings-controls',
+        innerHTML: [`<button type="button" class="vjs-default-button" title="${defaultsDescription}">`, this.localize('Reset'), `<span class="vjs-control-text"> ${defaultsDescription}</span>`, '</button>', `<button type="button" class="vjs-done-button">${this.localize('Done')}</button>`].join('')
+      });
+    }
+    content() {
+      return [this.createElColors_(), this.createElFont_(), this.createElControls_()];
+    }
+    label() {
+      return this.localize('Caption Settings Dialog');
+    }
+    description() {
+      return this.localize('Beginning of dialog window. Escape will cancel and close the window.');
+    }
+    buildCSSClass() {
+      return super.buildCSSClass() + ' vjs-text-track-settings';
+    }
+
+    /**
+     * Gets an object of text track settings (or null).
+     *
+     * @return {Object}
+     *         An object with config values parsed from the DOM or localStorage.
+     */
+    getValues() {
+      return reduce(selectConfigs, (accum, config, key) => {
+        const value = getSelectedOptionValue(this.$(config.selector), config.parser);
+        if (value !== undefined) {
+          accum[key] = value;
+        }
+        return accum;
+      }, {});
+    }
+
+    /**
+     * Sets text track settings from an object of values.
+     *
+     * @param {Object} values
+     *        An object with config values parsed from the DOM or localStorage.
+     */
+    setValues(values) {
+      each(selectConfigs, (config, key) => {
+        setSelectedOption(this.$(config.selector), values[key], config.parser);
+      });
+    }
+
+    /**
+     * Sets all `<select>` elements to their default values.
+     */
+    setDefaults() {
+      each(selectConfigs, config => {
+        const index = config.hasOwnProperty('default') ? config.default : 0;
+        this.$(config.selector).selectedIndex = index;
+      });
+    }
+
+    /**
+     * Restore texttrack settings from localStorage
+     */
+    restoreSettings() {
+      let values;
+      try {
+        values = JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_KEY));
+      } catch (err) {
+        log.warn(err);
+      }
+      if (values) {
+        this.setValues(values);
+      }
+    }
+
+    /**
+     * Save text track settings to localStorage
+     */
+    saveSettings() {
+      if (!this.options_.persistTextTrackSettings) {
+        return;
+      }
+      const values = this.getValues();
+      try {
+        if (Object.keys(values).length) {
+          window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(values));
+        } else {
+          window.localStorage.removeItem(LOCAL_STORAGE_KEY);
+        }
+      } catch (err) {
+        log.warn(err);
+      }
+    }
+
+    /**
+     * Update display of text track settings
+     */
+    updateDisplay() {
+      const ttDisplay = this.player_.getChild('textTrackDisplay');
+      if (ttDisplay) {
+        ttDisplay.updateDisplay();
+      }
+    }
+
+    /**
+     * conditionally blur the element and refocus the captions button
+     *
+     * @private
+     */
+    conditionalBlur_() {
+      this.previouslyActiveEl_ = null;
+      const cb = this.player_.controlBar;
+      const subsCapsBtn = cb && cb.subsCapsButton;
+      const ccBtn = cb && cb.captionsButton;
+      if (subsCapsBtn) {
+        subsCapsBtn.focus();
+      } else if (ccBtn) {
+        ccBtn.focus();
+      }
+    }
+
+    /**
+     * Repopulate dialog with new localizations on languagechange
+     */
+    handleLanguagechange() {
+      this.fill();
+    }
+  }
+  Component.registerComponent('TextTrackSettings', TextTrackSettings);
+
+  /**
+   * @file resize-manager.js
+   */
+
+  /**
+   * A Resize Manager. It is in charge of triggering `playerresize` on the player in the right conditions.
+   *
+   * It'll either create an iframe and use a debounced resize handler on it or use the new {@link https://wicg.github.io/ResizeObserver/|ResizeObserver}.
+   *
+   * If the ResizeObserver is available natively, it will be used. A polyfill can be passed in as an option.
+   * If a `playerresize` event is not needed, the ResizeManager component can be removed from the player, see the example below.
+   *
+   * @example <caption>How to disable the resize manager</caption>
+   * const player = videojs('#vid', {
+   *   resizeManager: false
+   * });
+   *
+   * @see {@link https://wicg.github.io/ResizeObserver/|ResizeObserver specification}
+   *
+   * @extends Component
+   */
+  class ResizeManager extends Component {
+    /**
+     * Create the ResizeManager.
+     *
+     * @param {Object} player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of ResizeManager options.
+     *
+     * @param {Object} [options.ResizeObserver]
+     *        A polyfill for ResizeObserver can be passed in here.
+     *        If this is set to null it will ignore the native ResizeObserver and fall back to the iframe fallback.
+     */
+    constructor(player, options) {
+      let RESIZE_OBSERVER_AVAILABLE = options.ResizeObserver || window.ResizeObserver;
+
+      // if `null` was passed, we want to disable the ResizeObserver
+      if (options.ResizeObserver === null) {
+        RESIZE_OBSERVER_AVAILABLE = false;
+      }
+
+      // Only create an element when ResizeObserver isn't available
+      const options_ = merge({
+        createEl: !RESIZE_OBSERVER_AVAILABLE,
+        reportTouchActivity: false
+      }, options);
+      super(player, options_);
+      this.ResizeObserver = options.ResizeObserver || window.ResizeObserver;
+      this.loadListener_ = null;
+      this.resizeObserver_ = null;
+      this.debouncedHandler_ = debounce(() => {
+        this.resizeHandler();
+      }, 100, false, this);
+      if (RESIZE_OBSERVER_AVAILABLE) {
+        this.resizeObserver_ = new this.ResizeObserver(this.debouncedHandler_);
+        this.resizeObserver_.observe(player.el());
+      } else {
+        this.loadListener_ = () => {
+          if (!this.el_ || !this.el_.contentWindow) {
+            return;
+          }
+          const debouncedHandler_ = this.debouncedHandler_;
+          let unloadListener_ = this.unloadListener_ = function () {
+            off(this, 'resize', debouncedHandler_);
+            off(this, 'unload', unloadListener_);
+            unloadListener_ = null;
+          };
+
+          // safari and edge can unload the iframe before resizemanager dispose
+          // we have to dispose of event handlers correctly before that happens
+          on(this.el_.contentWindow, 'unload', unloadListener_);
+          on(this.el_.contentWindow, 'resize', debouncedHandler_);
+        };
+        this.one('load', this.loadListener_);
+      }
+    }
+    createEl() {
+      return super.createEl('iframe', {
+        className: 'vjs-resize-manager',
+        tabIndex: -1,
+        title: this.localize('No content')
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Called when a resize is triggered on the iframe or a resize is observed via the ResizeObserver
+     *
+     * @fires Player#playerresize
+     */
+    resizeHandler() {
+      /**
+       * Called when the player size has changed
+       *
+       * @event Player#playerresize
+       * @type {Event}
+       */
+      // make sure player is still around to trigger
+      // prevents this from causing an error after dispose
+      if (!this.player_ || !this.player_.trigger) {
+        return;
+      }
+      this.player_.trigger('playerresize');
+    }
+    dispose() {
+      if (this.debouncedHandler_) {
+        this.debouncedHandler_.cancel();
+      }
+      if (this.resizeObserver_) {
+        if (this.player_.el()) {
+          this.resizeObserver_.unobserve(this.player_.el());
+        }
+        this.resizeObserver_.disconnect();
+      }
+      if (this.loadListener_) {
+        this.off('load', this.loadListener_);
+      }
+      if (this.el_ && this.el_.contentWindow && this.unloadListener_) {
+        this.unloadListener_.call(this.el_.contentWindow);
+      }
+      this.ResizeObserver = null;
+      this.resizeObserver = null;
+      this.debouncedHandler_ = null;
+      this.loadListener_ = null;
+      super.dispose();
+    }
+  }
+  Component.registerComponent('ResizeManager', ResizeManager);
+
+  const defaults = {
+    trackingThreshold: 20,
+    liveTolerance: 15
+  };
+
+  /*
+    track when we are at the live edge, and other helpers for live playback */
+
+  /**
+   * A class for checking live current time and determining when the player
+   * is at or behind the live edge.
+   */
+  class LiveTracker extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {number} [options.trackingThreshold=20]
+     *        Number of seconds of live window (seekableEnd - seekableStart) that
+     *        media needs to have before the liveui will be shown.
+     *
+     * @param {number} [options.liveTolerance=15]
+     *        Number of seconds behind live that we have to be
+     *        before we will be considered non-live. Note that this will only
+     *        be used when playing at the live edge. This allows large seekable end
+     *        changes to not effect whether we are live or not.
+     */
+    constructor(player, options) {
+      // LiveTracker does not need an element
+      const options_ = merge(defaults, options, {
+        createEl: false
+      });
+      super(player, options_);
+      this.trackLiveHandler_ = () => this.trackLive_();
+      this.handlePlay_ = e => this.handlePlay(e);
+      this.handleFirstTimeupdate_ = e => this.handleFirstTimeupdate(e);
+      this.handleSeeked_ = e => this.handleSeeked(e);
+      this.seekToLiveEdge_ = e => this.seekToLiveEdge(e);
+      this.reset_();
+      this.on(this.player_, 'durationchange', e => this.handleDurationchange(e));
+      // we should try to toggle tracking on canplay as native playback engines, like Safari
+      // may not have the proper values for things like seekableEnd until then
+      this.on(this.player_, 'canplay', () => this.toggleTracking());
+    }
+
+    /**
+     * all the functionality for tracking when seek end changes
+     * and for tracking how far past seek end we should be
+     */
+    trackLive_() {
+      const seekable = this.player_.seekable();
+
+      // skip undefined seekable
+      if (!seekable || !seekable.length) {
+        return;
+      }
+      const newTime = Number(window.performance.now().toFixed(4));
+      const deltaTime = this.lastTime_ === -1 ? 0 : (newTime - this.lastTime_) / 1000;
+      this.lastTime_ = newTime;
+      this.pastSeekEnd_ = this.pastSeekEnd() + deltaTime;
+      const liveCurrentTime = this.liveCurrentTime();
+      const currentTime = this.player_.currentTime();
+
+      // we are behind live if any are true
+      // 1. the player is paused
+      // 2. the user seeked to a location 2 seconds away from live
+      // 3. the difference between live and current time is greater
+      //    liveTolerance which defaults to 15s
+      let isBehind = this.player_.paused() || this.seekedBehindLive_ || Math.abs(liveCurrentTime - currentTime) > this.options_.liveTolerance;
+
+      // we cannot be behind if
+      // 1. until we have not seen a timeupdate yet
+      // 2. liveCurrentTime is Infinity, which happens on Android and Native Safari
+      if (!this.timeupdateSeen_ || liveCurrentTime === Infinity) {
+        isBehind = false;
+      }
+      if (isBehind !== this.behindLiveEdge_) {
+        this.behindLiveEdge_ = isBehind;
+        this.trigger('liveedgechange');
+      }
+    }
+
+    /**
+     * handle a durationchange event on the player
+     * and start/stop tracking accordingly.
+     */
+    handleDurationchange() {
+      this.toggleTracking();
+    }
+
+    /**
+     * start/stop tracking
+     */
+    toggleTracking() {
+      if (this.player_.duration() === Infinity && this.liveWindow() >= this.options_.trackingThreshold) {
+        if (this.player_.options_.liveui) {
+          this.player_.addClass('vjs-liveui');
+        }
+        this.startTracking();
+      } else {
+        this.player_.removeClass('vjs-liveui');
+        this.stopTracking();
+      }
+    }
+
+    /**
+     * start tracking live playback
+     */
+    startTracking() {
+      if (this.isTracking()) {
+        return;
+      }
+
+      // If we haven't seen a timeupdate, we need to check whether playback
+      // began before this component started tracking. This can happen commonly
+      // when using autoplay.
+      if (!this.timeupdateSeen_) {
+        this.timeupdateSeen_ = this.player_.hasStarted();
+      }
+      this.trackingInterval_ = this.setInterval(this.trackLiveHandler_, UPDATE_REFRESH_INTERVAL);
+      this.trackLive_();
+      this.on(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+      if (!this.timeupdateSeen_) {
+        this.one(this.player_, 'play', this.handlePlay_);
+        this.one(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+      } else {
+        this.on(this.player_, 'seeked', this.handleSeeked_);
+      }
+    }
+
+    /**
+     * handle the first timeupdate on the player if it wasn't already playing
+     * when live tracker started tracking.
+     */
+    handleFirstTimeupdate() {
+      this.timeupdateSeen_ = true;
+      this.on(this.player_, 'seeked', this.handleSeeked_);
+    }
+
+    /**
+     * Keep track of what time a seek starts, and listen for seeked
+     * to find where a seek ends.
+     */
+    handleSeeked() {
+      const timeDiff = Math.abs(this.liveCurrentTime() - this.player_.currentTime());
+      this.seekedBehindLive_ = this.nextSeekedFromUser_ && timeDiff > 2;
+      this.nextSeekedFromUser_ = false;
+      this.trackLive_();
+    }
+
+    /**
+     * handle the first play on the player, and make sure that we seek
+     * right to the live edge.
+     */
+    handlePlay() {
+      this.one(this.player_, 'timeupdate', this.seekToLiveEdge_);
+    }
+
+    /**
+     * Stop tracking, and set all internal variables to
+     * their initial value.
+     */
+    reset_() {
+      this.lastTime_ = -1;
+      this.pastSeekEnd_ = 0;
+      this.lastSeekEnd_ = -1;
+      this.behindLiveEdge_ = true;
+      this.timeupdateSeen_ = false;
+      this.seekedBehindLive_ = false;
+      this.nextSeekedFromUser_ = false;
+      this.clearInterval(this.trackingInterval_);
+      this.trackingInterval_ = null;
+      this.off(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+      this.off(this.player_, 'seeked', this.handleSeeked_);
+      this.off(this.player_, 'play', this.handlePlay_);
+      this.off(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+      this.off(this.player_, 'timeupdate', this.seekToLiveEdge_);
+    }
+
+    /**
+     * The next seeked event is from the user. Meaning that any seek
+     * > 2s behind live will be considered behind live for real and
+     * liveTolerance will be ignored.
+     */
+    nextSeekedFromUser() {
+      this.nextSeekedFromUser_ = true;
+    }
+
+    /**
+     * stop tracking live playback
+     */
+    stopTracking() {
+      if (!this.isTracking()) {
+        return;
+      }
+      this.reset_();
+      this.trigger('liveedgechange');
+    }
+
+    /**
+     * A helper to get the player seekable end
+     * so that we don't have to null check everywhere
+     *
+     * @return {number}
+     *         The furthest seekable end or Infinity.
+     */
+    seekableEnd() {
+      const seekable = this.player_.seekable();
+      const seekableEnds = [];
+      let i = seekable ? seekable.length : 0;
+      while (i--) {
+        seekableEnds.push(seekable.end(i));
+      }
+
+      // grab the furthest seekable end after sorting, or if there are none
+      // default to Infinity
+      return seekableEnds.length ? seekableEnds.sort()[seekableEnds.length - 1] : Infinity;
+    }
+
+    /**
+     * A helper to get the player seekable start
+     * so that we don't have to null check everywhere
+     *
+     * @return {number}
+     *         The earliest seekable start or 0.
+     */
+    seekableStart() {
+      const seekable = this.player_.seekable();
+      const seekableStarts = [];
+      let i = seekable ? seekable.length : 0;
+      while (i--) {
+        seekableStarts.push(seekable.start(i));
+      }
+
+      // grab the first seekable start after sorting, or if there are none
+      // default to 0
+      return seekableStarts.length ? seekableStarts.sort()[0] : 0;
+    }
+
+    /**
+     * Get the live time window aka
+     * the amount of time between seekable start and
+     * live current time.
+     *
+     * @return {number}
+     *         The amount of seconds that are seekable in
+     *         the live video.
+     */
+    liveWindow() {
+      const liveCurrentTime = this.liveCurrentTime();
+
+      // if liveCurrenTime is Infinity then we don't have a liveWindow at all
+      if (liveCurrentTime === Infinity) {
+        return 0;
+      }
+      return liveCurrentTime - this.seekableStart();
+    }
+
+    /**
+     * Determines if the player is live, only checks if this component
+     * is tracking live playback or not
+     *
+     * @return {boolean}
+     *         Whether liveTracker is tracking
+     */
+    isLive() {
+      return this.isTracking();
+    }
+
+    /**
+     * Determines if currentTime is at the live edge and won't fall behind
+     * on each seekableendchange
+     *
+     * @return {boolean}
+     *         Whether playback is at the live edge
+     */
+    atLiveEdge() {
+      return !this.behindLiveEdge();
+    }
+
+    /**
+     * get what we expect the live current time to be
+     *
+     * @return {number}
+     *         The expected live current time
+     */
+    liveCurrentTime() {
+      return this.pastSeekEnd() + this.seekableEnd();
+    }
+
+    /**
+     * The number of seconds that have occurred after seekable end
+     * changed. This will be reset to 0 once seekable end changes.
+     *
+     * @return {number}
+     *         Seconds past the current seekable end
+     */
+    pastSeekEnd() {
+      const seekableEnd = this.seekableEnd();
+      if (this.lastSeekEnd_ !== -1 && seekableEnd !== this.lastSeekEnd_) {
+        this.pastSeekEnd_ = 0;
+      }
+      this.lastSeekEnd_ = seekableEnd;
+      return this.pastSeekEnd_;
+    }
+
+    /**
+     * If we are currently behind the live edge, aka currentTime will be
+     * behind on a seekableendchange
+     *
+     * @return {boolean}
+     *         If we are behind the live edge
+     */
+    behindLiveEdge() {
+      return this.behindLiveEdge_;
+    }
+
+    /**
+     * Whether live tracker is currently tracking or not.
+     */
+    isTracking() {
+      return typeof this.trackingInterval_ === 'number';
+    }
+
+    /**
+     * Seek to the live edge if we are behind the live edge
+     */
+    seekToLiveEdge() {
+      this.seekedBehindLive_ = false;
+      if (this.atLiveEdge()) {
+        return;
+      }
+      this.nextSeekedFromUser_ = false;
+      this.player_.currentTime(this.liveCurrentTime());
+    }
+
+    /**
+     * Dispose of liveTracker
+     */
+    dispose() {
+      this.stopTracking();
+      super.dispose();
+    }
+  }
+  Component.registerComponent('LiveTracker', LiveTracker);
+
+  /**
+   * Displays an element over the player which contains an optional title and
+   * description for the current content.
+   *
+   * Much of the code for this component originated in the now obsolete
+   * videojs-dock plugin: https://github.com/brightcove/videojs-dock/
+   *
+   * @extends Component
+   */
+  class TitleBar extends Component {
+    constructor(player, options) {
+      super(player, options);
+      this.on('statechanged', e => this.updateDom_());
+      this.updateDom_();
+    }
+
+    /**
+     * Create the `TitleBar`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      this.els = {
+        title: createEl('div', {
+          className: 'vjs-title-bar-title',
+          id: `vjs-title-bar-title-${newGUID()}`
+        }),
+        description: createEl('div', {
+          className: 'vjs-title-bar-description',
+          id: `vjs-title-bar-description-${newGUID()}`
+        })
+      };
+      return createEl('div', {
+        className: 'vjs-title-bar'
+      }, {}, values(this.els));
+    }
+
+    /**
+     * Updates the DOM based on the component's state object.
+     */
+    updateDom_() {
+      const tech = this.player_.tech_;
+      const techEl = tech && tech.el_;
+      const techAriaAttrs = {
+        title: 'aria-labelledby',
+        description: 'aria-describedby'
+      };
+      ['title', 'description'].forEach(k => {
+        const value = this.state[k];
+        const el = this.els[k];
+        const techAriaAttr = techAriaAttrs[k];
+        emptyEl(el);
+        if (value) {
+          textContent(el, value);
+        }
+
+        // If there is a tech element available, update its ARIA attributes
+        // according to whether a title and/or description have been provided.
+        if (techEl) {
+          techEl.removeAttribute(techAriaAttr);
+          if (value) {
+            techEl.setAttribute(techAriaAttr, el.id);
+          }
+        }
+      });
+      if (this.state.title || this.state.description) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+
+    /**
+     * Update the contents of the title bar component with new title and
+     * description text.
+     *
+     * If both title and description are missing, the title bar will be hidden.
+     *
+     * If either title or description are present, the title bar will be visible.
+     *
+     * NOTE: Any previously set value will be preserved. To unset a previously
+     * set value, you must pass an empty string or null.
+     *
+     * For example:
+     *
+     * ```
+     * update({title: 'foo', description: 'bar'}) // title: 'foo', description: 'bar'
+     * update({description: 'bar2'}) // title: 'foo', description: 'bar2'
+     * update({title: ''}) // title: '', description: 'bar2'
+     * update({title: 'foo', description: null}) // title: 'foo', description: null
+     * ```
+     *
+     * @param  {Object} [options={}]
+     *         An options object. When empty, the title bar will be hidden.
+     *
+     * @param  {string} [options.title]
+     *         A title to display in the title bar.
+     *
+     * @param  {string} [options.description]
+     *         A description to display in the title bar.
+     */
+    update(options) {
+      this.setState(options);
+    }
+
+    /**
+     * Dispose the component.
+     */
+    dispose() {
+      const tech = this.player_.tech_;
+      const techEl = tech && tech.el_;
+      if (techEl) {
+        techEl.removeAttribute('aria-labelledby');
+        techEl.removeAttribute('aria-describedby');
+      }
+      super.dispose();
+      this.els = null;
+    }
+  }
+  Component.registerComponent('TitleBar', TitleBar);
+
+  /**
+   * This function is used to fire a sourceset when there is something
+   * similar to `mediaEl.load()` being called. It will try to find the source via
+   * the `src` attribute and then the `<source>` elements. It will then fire `sourceset`
+   * with the source that was found or empty string if we cannot know. If it cannot
+   * find a source then `sourceset` will not be fired.
+   *
+   * @param { import('./html5').default } tech
+   *        The tech object that sourceset was setup on
+   *
+   * @return {boolean}
+   *         returns false if the sourceset was not fired and true otherwise.
+   */
+  const sourcesetLoad = tech => {
+    const el = tech.el();
+
+    // if `el.src` is set, that source will be loaded.
+    if (el.hasAttribute('src')) {
+      tech.triggerSourceset(el.src);
+      return true;
+    }
+
+    /**
+     * Since there isn't a src property on the media element, source elements will be used for
+     * implementing the source selection algorithm. This happens asynchronously and
+     * for most cases were there is more than one source we cannot tell what source will
+     * be loaded, without re-implementing the source selection algorithm. At this time we are not
+     * going to do that. There are three special cases that we do handle here though:
+     *
+     * 1. If there are no sources, do not fire `sourceset`.
+     * 2. If there is only one `<source>` with a `src` property/attribute that is our `src`
+     * 3. If there is more than one `<source>` but all of them have the same `src` url.
+     *    That will be our src.
+     */
+    const sources = tech.$$('source');
+    const srcUrls = [];
+    let src = '';
+
+    // if there are no sources, do not fire sourceset
+    if (!sources.length) {
+      return false;
+    }
+
+    // only count valid/non-duplicate source elements
+    for (let i = 0; i < sources.length; i++) {
+      const url = sources[i].src;
+      if (url && srcUrls.indexOf(url) === -1) {
+        srcUrls.push(url);
+      }
+    }
+
+    // there were no valid sources
+    if (!srcUrls.length) {
+      return false;
+    }
+
+    // there is only one valid source element url
+    // use that
+    if (srcUrls.length === 1) {
+      src = srcUrls[0];
+    }
+    tech.triggerSourceset(src);
+    return true;
+  };
+
+  /**
+   * our implementation of an `innerHTML` descriptor for browsers
+   * that do not have one.
+   */
+  const innerHTMLDescriptorPolyfill = Object.defineProperty({}, 'innerHTML', {
+    get() {
+      return this.cloneNode(true).innerHTML;
+    },
+    set(v) {
+      // make a dummy node to use innerHTML on
+      const dummy = document.createElement(this.nodeName.toLowerCase());
+
+      // set innerHTML to the value provided
+      dummy.innerHTML = v;
+
+      // make a document fragment to hold the nodes from dummy
+      const docFrag = document.createDocumentFragment();
+
+      // copy all of the nodes created by the innerHTML on dummy
+      // to the document fragment
+      while (dummy.childNodes.length) {
+        docFrag.appendChild(dummy.childNodes[0]);
+      }
+
+      // remove content
+      this.innerText = '';
+
+      // now we add all of that html in one by appending the
+      // document fragment. This is how innerHTML does it.
+      window.Element.prototype.appendChild.call(this, docFrag);
+
+      // then return the result that innerHTML's setter would
+      return this.innerHTML;
+    }
+  });
+
+  /**
+   * Get a property descriptor given a list of priorities and the
+   * property to get.
+   */
+  const getDescriptor = (priority, prop) => {
+    let descriptor = {};
+    for (let i = 0; i < priority.length; i++) {
+      descriptor = Object.getOwnPropertyDescriptor(priority[i], prop);
+      if (descriptor && descriptor.set && descriptor.get) {
+        break;
+      }
+    }
+    descriptor.enumerable = true;
+    descriptor.configurable = true;
+    return descriptor;
+  };
+  const getInnerHTMLDescriptor = tech => getDescriptor([tech.el(), window.HTMLMediaElement.prototype, window.Element.prototype, innerHTMLDescriptorPolyfill], 'innerHTML');
+
+  /**
+   * Patches browser internal functions so that we can tell synchronously
+   * if a `<source>` was appended to the media element. For some reason this
+   * causes a `sourceset` if the the media element is ready and has no source.
+   * This happens when:
+   * - The page has just loaded and the media element does not have a source.
+   * - The media element was emptied of all sources, then `load()` was called.
+   *
+   * It does this by patching the following functions/properties when they are supported:
+   *
+   * - `append()` - can be used to add a `<source>` element to the media element
+   * - `appendChild()` - can be used to add a `<source>` element to the media element
+   * - `insertAdjacentHTML()` -  can be used to add a `<source>` element to the media element
+   * - `innerHTML` -  can be used to add a `<source>` element to the media element
+   *
+   * @param {Html5} tech
+   *        The tech object that sourceset is being setup on.
+   */
+  const firstSourceWatch = function (tech) {
+    const el = tech.el();
+
+    // make sure firstSourceWatch isn't setup twice.
+    if (el.resetSourceWatch_) {
+      return;
+    }
+    const old = {};
+    const innerDescriptor = getInnerHTMLDescriptor(tech);
+    const appendWrapper = appendFn => (...args) => {
+      const retval = appendFn.apply(el, args);
+      sourcesetLoad(tech);
+      return retval;
+    };
+    ['append', 'appendChild', 'insertAdjacentHTML'].forEach(k => {
+      if (!el[k]) {
+        return;
+      }
+
+      // store the old function
+      old[k] = el[k];
+
+      // call the old function with a sourceset if a source
+      // was loaded
+      el[k] = appendWrapper(old[k]);
+    });
+    Object.defineProperty(el, 'innerHTML', merge(innerDescriptor, {
+      set: appendWrapper(innerDescriptor.set)
+    }));
+    el.resetSourceWatch_ = () => {
+      el.resetSourceWatch_ = null;
+      Object.keys(old).forEach(k => {
+        el[k] = old[k];
+      });
+      Object.defineProperty(el, 'innerHTML', innerDescriptor);
+    };
+
+    // on the first sourceset, we need to revert our changes
+    tech.one('sourceset', el.resetSourceWatch_);
+  };
+
+  /**
+   * our implementation of a `src` descriptor for browsers
+   * that do not have one
+   */
+  const srcDescriptorPolyfill = Object.defineProperty({}, 'src', {
+    get() {
+      if (this.hasAttribute('src')) {
+        return getAbsoluteURL(window.Element.prototype.getAttribute.call(this, 'src'));
+      }
+      return '';
+    },
+    set(v) {
+      window.Element.prototype.setAttribute.call(this, 'src', v);
+      return v;
+    }
+  });
+  const getSrcDescriptor = tech => getDescriptor([tech.el(), window.HTMLMediaElement.prototype, srcDescriptorPolyfill], 'src');
+
+  /**
+   * setup `sourceset` handling on the `Html5` tech. This function
+   * patches the following element properties/functions:
+   *
+   * - `src` - to determine when `src` is set
+   * - `setAttribute()` - to determine when `src` is set
+   * - `load()` - this re-triggers the source selection algorithm, and can
+   *              cause a sourceset.
+   *
+   * If there is no source when we are adding `sourceset` support or during a `load()`
+   * we also patch the functions listed in `firstSourceWatch`.
+   *
+   * @param {Html5} tech
+   *        The tech to patch
+   */
+  const setupSourceset = function (tech) {
+    if (!tech.featuresSourceset) {
+      return;
+    }
+    const el = tech.el();
+
+    // make sure sourceset isn't setup twice.
+    if (el.resetSourceset_) {
+      return;
+    }
+    const srcDescriptor = getSrcDescriptor(tech);
+    const oldSetAttribute = el.setAttribute;
+    const oldLoad = el.load;
+    Object.defineProperty(el, 'src', merge(srcDescriptor, {
+      set: v => {
+        const retval = srcDescriptor.set.call(el, v);
+
+        // we use the getter here to get the actual value set on src
+        tech.triggerSourceset(el.src);
+        return retval;
+      }
+    }));
+    el.setAttribute = (n, v) => {
+      const retval = oldSetAttribute.call(el, n, v);
+      if (/src/i.test(n)) {
+        tech.triggerSourceset(el.src);
+      }
+      return retval;
+    };
+    el.load = () => {
+      const retval = oldLoad.call(el);
+
+      // if load was called, but there was no source to fire
+      // sourceset on. We have to watch for a source append
+      // as that can trigger a `sourceset` when the media element
+      // has no source
+      if (!sourcesetLoad(tech)) {
+        tech.triggerSourceset('');
+        firstSourceWatch(tech);
+      }
+      return retval;
+    };
+    if (el.currentSrc) {
+      tech.triggerSourceset(el.currentSrc);
+    } else if (!sourcesetLoad(tech)) {
+      firstSourceWatch(tech);
+    }
+    el.resetSourceset_ = () => {
+      el.resetSourceset_ = null;
+      el.load = oldLoad;
+      el.setAttribute = oldSetAttribute;
+      Object.defineProperty(el, 'src', srcDescriptor);
+      if (el.resetSourceWatch_) {
+        el.resetSourceWatch_();
+      }
+    };
+  };
+
+  /**
+   * @file html5.js
+   */
+
+  /**
+   * HTML5 Media Controller - Wrapper for HTML5 Media API
+   *
+   * @mixes Tech~SourceHandlerAdditions
+   * @extends Tech
+   */
+  class Html5 extends Tech {
+    /**
+    * Create an instance of this Tech.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    *
+    * @param {Function} [ready]
+    *        Callback function to call when the `HTML5` Tech is ready.
+    */
+    constructor(options, ready) {
+      super(options, ready);
+      const source = options.source;
+      let crossoriginTracks = false;
+      this.featuresVideoFrameCallback = this.featuresVideoFrameCallback && this.el_.tagName === 'VIDEO';
+
+      // Set the source if one is provided
+      // 1) Check if the source is new (if not, we want to keep the original so playback isn't interrupted)
+      // 2) Check to see if the network state of the tag was failed at init, and if so, reset the source
+      // anyway so the error gets fired.
+      if (source && (this.el_.currentSrc !== source.src || options.tag && options.tag.initNetworkState_ === 3)) {
+        this.setSource(source);
+      } else {
+        this.handleLateInit_(this.el_);
+      }
+
+      // setup sourceset after late sourceset/init
+      if (options.enableSourceset) {
+        this.setupSourcesetHandling_();
+      }
+      this.isScrubbing_ = false;
+      if (this.el_.hasChildNodes()) {
+        const nodes = this.el_.childNodes;
+        let nodesLength = nodes.length;
+        const removeNodes = [];
+        while (nodesLength--) {
+          const node = nodes[nodesLength];
+          const nodeName = node.nodeName.toLowerCase();
+          if (nodeName === 'track') {
+            if (!this.featuresNativeTextTracks) {
+              // Empty video tag tracks so the built-in player doesn't use them also.
+              // This may not be fast enough to stop HTML5 browsers from reading the tags
+              // so we'll need to turn off any default tracks if we're manually doing
+              // captions and subtitles. videoElement.textTracks
+              removeNodes.push(node);
+            } else {
+              // store HTMLTrackElement and TextTrack to remote list
+              this.remoteTextTrackEls().addTrackElement_(node);
+              this.remoteTextTracks().addTrack(node.track);
+              this.textTracks().addTrack(node.track);
+              if (!crossoriginTracks && !this.el_.hasAttribute('crossorigin') && isCrossOrigin(node.src)) {
+                crossoriginTracks = true;
+              }
+            }
+          }
+        }
+        for (let i = 0; i < removeNodes.length; i++) {
+          this.el_.removeChild(removeNodes[i]);
+        }
+      }
+      this.proxyNativeTracks_();
+      if (this.featuresNativeTextTracks && crossoriginTracks) {
+        log.warn('Text Tracks are being loaded from another origin but the crossorigin attribute isn\'t used.\n' + 'This may prevent text tracks from loading.');
+      }
+
+      // prevent iOS Safari from disabling metadata text tracks during native playback
+      this.restoreMetadataTracksInIOSNativePlayer_();
+
+      // Determine if native controls should be used
+      // Our goal should be to get the custom controls on mobile solid everywhere
+      // so we can remove this all together. Right now this will block custom
+      // controls on touch enabled laptops like the Chrome Pixel
+      if ((TOUCH_ENABLED || IS_IPHONE) && options.nativeControlsForTouch === true) {
+        this.setControls(true);
+      }
+
+      // on iOS, we want to proxy `webkitbeginfullscreen` and `webkitendfullscreen`
+      // into a `fullscreenchange` event
+      this.proxyWebkitFullscreen_();
+      this.triggerReady();
+    }
+
+    /**
+     * Dispose of `HTML5` media element and remove all tracks.
+     */
+    dispose() {
+      if (this.el_ && this.el_.resetSourceset_) {
+        this.el_.resetSourceset_();
+      }
+      Html5.disposeMediaElement(this.el_);
+      this.options_ = null;
+
+      // tech will handle clearing of the emulated track list
+      super.dispose();
+    }
+
+    /**
+     * Modify the media element so that we can detect when
+     * the source is changed. Fires `sourceset` just after the source has changed
+     */
+    setupSourcesetHandling_() {
+      setupSourceset(this);
+    }
+
+    /**
+     * When a captions track is enabled in the iOS Safari native player, all other
+     * tracks are disabled (including metadata tracks), which nulls all of their
+     * associated cue points. This will restore metadata tracks to their pre-fullscreen
+     * state in those cases so that cue points are not needlessly lost.
+     *
+     * @private
+     */
+    restoreMetadataTracksInIOSNativePlayer_() {
+      const textTracks = this.textTracks();
+      let metadataTracksPreFullscreenState;
+
+      // captures a snapshot of every metadata track's current state
+      const takeMetadataTrackSnapshot = () => {
+        metadataTracksPreFullscreenState = [];
+        for (let i = 0; i < textTracks.length; i++) {
+          const track = textTracks[i];
+          if (track.kind === 'metadata') {
+            metadataTracksPreFullscreenState.push({
+              track,
+              storedMode: track.mode
+            });
+          }
+        }
+      };
+
+      // snapshot each metadata track's initial state, and update the snapshot
+      // each time there is a track 'change' event
+      takeMetadataTrackSnapshot();
+      textTracks.addEventListener('change', takeMetadataTrackSnapshot);
+      this.on('dispose', () => textTracks.removeEventListener('change', takeMetadataTrackSnapshot));
+      const restoreTrackMode = () => {
+        for (let i = 0; i < metadataTracksPreFullscreenState.length; i++) {
+          const storedTrack = metadataTracksPreFullscreenState[i];
+          if (storedTrack.track.mode === 'disabled' && storedTrack.track.mode !== storedTrack.storedMode) {
+            storedTrack.track.mode = storedTrack.storedMode;
+          }
+        }
+        // we only want this handler to be executed on the first 'change' event
+        textTracks.removeEventListener('change', restoreTrackMode);
+      };
+
+      // when we enter fullscreen playback, stop updating the snapshot and
+      // restore all track modes to their pre-fullscreen state
+      this.on('webkitbeginfullscreen', () => {
+        textTracks.removeEventListener('change', takeMetadataTrackSnapshot);
+
+        // remove the listener before adding it just in case it wasn't previously removed
+        textTracks.removeEventListener('change', restoreTrackMode);
+        textTracks.addEventListener('change', restoreTrackMode);
+      });
+
+      // start updating the snapshot again after leaving fullscreen
+      this.on('webkitendfullscreen', () => {
+        // remove the listener before adding it just in case it wasn't previously removed
+        textTracks.removeEventListener('change', takeMetadataTrackSnapshot);
+        textTracks.addEventListener('change', takeMetadataTrackSnapshot);
+
+        // remove the restoreTrackMode handler in case it wasn't triggered during fullscreen playback
+        textTracks.removeEventListener('change', restoreTrackMode);
+      });
+    }
+
+    /**
+     * Attempt to force override of tracks for the given type
+     *
+     * @param {string} type - Track type to override, possible values include 'Audio',
+     * 'Video', and 'Text'.
+     * @param {boolean} override - If set to true native audio/video will be overridden,
+     * otherwise native audio/video will potentially be used.
+     * @private
+     */
+    overrideNative_(type, override) {
+      // If there is no behavioral change don't add/remove listeners
+      if (override !== this[`featuresNative${type}Tracks`]) {
+        return;
+      }
+      const lowerCaseType = type.toLowerCase();
+      if (this[`${lowerCaseType}TracksListeners_`]) {
+        Object.keys(this[`${lowerCaseType}TracksListeners_`]).forEach(eventName => {
+          const elTracks = this.el()[`${lowerCaseType}Tracks`];
+          elTracks.removeEventListener(eventName, this[`${lowerCaseType}TracksListeners_`][eventName]);
+        });
+      }
+      this[`featuresNative${type}Tracks`] = !override;
+      this[`${lowerCaseType}TracksListeners_`] = null;
+      this.proxyNativeTracksForType_(lowerCaseType);
+    }
+
+    /**
+     * Attempt to force override of native audio tracks.
+     *
+     * @param {boolean} override - If set to true native audio will be overridden,
+     * otherwise native audio will potentially be used.
+     */
+    overrideNativeAudioTracks(override) {
+      this.overrideNative_('Audio', override);
+    }
+
+    /**
+     * Attempt to force override of native video tracks.
+     *
+     * @param {boolean} override - If set to true native video will be overridden,
+     * otherwise native video will potentially be used.
+     */
+    overrideNativeVideoTracks(override) {
+      this.overrideNative_('Video', override);
+    }
+
+    /**
+     * Proxy native track list events for the given type to our track
+     * lists if the browser we are playing in supports that type of track list.
+     *
+     * @param {string} name - Track type; values include 'audio', 'video', and 'text'
+     * @private
+     */
+    proxyNativeTracksForType_(name) {
+      const props = NORMAL[name];
+      const elTracks = this.el()[props.getterName];
+      const techTracks = this[props.getterName]();
+      if (!this[`featuresNative${props.capitalName}Tracks`] || !elTracks || !elTracks.addEventListener) {
+        return;
+      }
+      const listeners = {
+        change: e => {
+          const event = {
+            type: 'change',
+            target: techTracks,
+            currentTarget: techTracks,
+            srcElement: techTracks
+          };
+          techTracks.trigger(event);
+
+          // if we are a text track change event, we should also notify the
+          // remote text track list. This can potentially cause a false positive
+          // if we were to get a change event on a non-remote track and
+          // we triggered the event on the remote text track list which doesn't
+          // contain that track. However, best practices mean looping through the
+          // list of tracks and searching for the appropriate mode value, so,
+          // this shouldn't pose an issue
+          if (name === 'text') {
+            this[REMOTE.remoteText.getterName]().trigger(event);
+          }
+        },
+        addtrack(e) {
+          techTracks.addTrack(e.track);
+        },
+        removetrack(e) {
+          techTracks.removeTrack(e.track);
+        }
+      };
+      const removeOldTracks = function () {
+        const removeTracks = [];
+        for (let i = 0; i < techTracks.length; i++) {
+          let found = false;
+          for (let j = 0; j < elTracks.length; j++) {
+            if (elTracks[j] === techTracks[i]) {
+              found = true;
+              break;
+            }
+          }
+          if (!found) {
+            removeTracks.push(techTracks[i]);
+          }
+        }
+        while (removeTracks.length) {
+          techTracks.removeTrack(removeTracks.shift());
+        }
+      };
+      this[props.getterName + 'Listeners_'] = listeners;
+      Object.keys(listeners).forEach(eventName => {
+        const listener = listeners[eventName];
+        elTracks.addEventListener(eventName, listener);
+        this.on('dispose', e => elTracks.removeEventListener(eventName, listener));
+      });
+
+      // Remove (native) tracks that are not used anymore
+      this.on('loadstart', removeOldTracks);
+      this.on('dispose', e => this.off('loadstart', removeOldTracks));
+    }
+
+    /**
+     * Proxy all native track list events to our track lists if the browser we are playing
+     * in supports that type of track list.
+     *
+     * @private
+     */
+    proxyNativeTracks_() {
+      NORMAL.names.forEach(name => {
+        this.proxyNativeTracksForType_(name);
+      });
+    }
+
+    /**
+     * Create the `Html5` Tech's DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      let el = this.options_.tag;
+
+      // Check if this browser supports moving the element into the box.
+      // On the iPhone video will break if you move the element,
+      // So we have to create a brand new element.
+      // If we ingested the player div, we do not need to move the media element.
+      if (!el || !(this.options_.playerElIngest || this.movingMediaElementInDOM)) {
+        // If the original tag is still there, clone and remove it.
+        if (el) {
+          const clone = el.cloneNode(true);
+          if (el.parentNode) {
+            el.parentNode.insertBefore(clone, el);
+          }
+          Html5.disposeMediaElement(el);
+          el = clone;
+        } else {
+          el = document.createElement('video');
+
+          // determine if native controls should be used
+          const tagAttributes = this.options_.tag && getAttributes(this.options_.tag);
+          const attributes = merge({}, tagAttributes);
+          if (!TOUCH_ENABLED || this.options_.nativeControlsForTouch !== true) {
+            delete attributes.controls;
+          }
+          setAttributes(el, Object.assign(attributes, {
+            id: this.options_.techId,
+            class: 'vjs-tech'
+          }));
+        }
+        el.playerId = this.options_.playerId;
+      }
+      if (typeof this.options_.preload !== 'undefined') {
+        setAttribute(el, 'preload', this.options_.preload);
+      }
+      if (this.options_.disablePictureInPicture !== undefined) {
+        el.disablePictureInPicture = this.options_.disablePictureInPicture;
+      }
+
+      // Update specific tag settings, in case they were overridden
+      // `autoplay` has to be *last* so that `muted` and `playsinline` are present
+      // when iOS/Safari or other browsers attempt to autoplay.
+      const settingsAttrs = ['loop', 'muted', 'playsinline', 'autoplay'];
+      for (let i = 0; i < settingsAttrs.length; i++) {
+        const attr = settingsAttrs[i];
+        const value = this.options_[attr];
+        if (typeof value !== 'undefined') {
+          if (value) {
+            setAttribute(el, attr, attr);
+          } else {
+            removeAttribute(el, attr);
+          }
+          el[attr] = value;
+        }
+      }
+      return el;
+    }
+
+    /**
+     * This will be triggered if the loadstart event has already fired, before videojs was
+     * ready. Two known examples of when this can happen are:
+     * 1. If we're loading the playback object after it has started loading
+     * 2. The media is already playing the (often with autoplay on) then
+     *
+     * This function will fire another loadstart so that videojs can catchup.
+     *
+     * @fires Tech#loadstart
+     *
+     * @return {undefined}
+     *         returns nothing.
+     */
+    handleLateInit_(el) {
+      if (el.networkState === 0 || el.networkState === 3) {
+        // The video element hasn't started loading the source yet
+        // or didn't find a source
+        return;
+      }
+      if (el.readyState === 0) {
+        // NetworkState is set synchronously BUT loadstart is fired at the
+        // end of the current stack, usually before setInterval(fn, 0).
+        // So at this point we know loadstart may have already fired or is
+        // about to fire, and either way the player hasn't seen it yet.
+        // We don't want to fire loadstart prematurely here and cause a
+        // double loadstart so we'll wait and see if it happens between now
+        // and the next loop, and fire it if not.
+        // HOWEVER, we also want to make sure it fires before loadedmetadata
+        // which could also happen between now and the next loop, so we'll
+        // watch for that also.
+        let loadstartFired = false;
+        const setLoadstartFired = function () {
+          loadstartFired = true;
+        };
+        this.on('loadstart', setLoadstartFired);
+        const triggerLoadstart = function () {
+          // We did miss the original loadstart. Make sure the player
+          // sees loadstart before loadedmetadata
+          if (!loadstartFired) {
+            this.trigger('loadstart');
+          }
+        };
+        this.on('loadedmetadata', triggerLoadstart);
+        this.ready(function () {
+          this.off('loadstart', setLoadstartFired);
+          this.off('loadedmetadata', triggerLoadstart);
+          if (!loadstartFired) {
+            // We did miss the original native loadstart. Fire it now.
+            this.trigger('loadstart');
+          }
+        });
+        return;
+      }
+
+      // From here on we know that loadstart already fired and we missed it.
+      // The other readyState events aren't as much of a problem if we double
+      // them, so not going to go to as much trouble as loadstart to prevent
+      // that unless we find reason to.
+      const eventsToTrigger = ['loadstart'];
+
+      // loadedmetadata: newly equal to HAVE_METADATA (1) or greater
+      eventsToTrigger.push('loadedmetadata');
+
+      // loadeddata: newly increased to HAVE_CURRENT_DATA (2) or greater
+      if (el.readyState >= 2) {
+        eventsToTrigger.push('loadeddata');
+      }
+
+      // canplay: newly increased to HAVE_FUTURE_DATA (3) or greater
+      if (el.readyState >= 3) {
+        eventsToTrigger.push('canplay');
+      }
+
+      // canplaythrough: newly equal to HAVE_ENOUGH_DATA (4)
+      if (el.readyState >= 4) {
+        eventsToTrigger.push('canplaythrough');
+      }
+
+      // We still need to give the player time to add event listeners
+      this.ready(function () {
+        eventsToTrigger.forEach(function (type) {
+          this.trigger(type);
+        }, this);
+      });
+    }
+
+    /**
+     * Set whether we are scrubbing or not.
+     * This is used to decide whether we should use `fastSeek` or not.
+     * `fastSeek` is used to provide trick play on Safari browsers.
+     *
+     * @param {boolean} isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     */
+    setScrubbing(isScrubbing) {
+      this.isScrubbing_ = isScrubbing;
+    }
+
+    /**
+     * Get whether we are scrubbing or not.
+     *
+     * @return {boolean} isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     */
+    scrubbing() {
+      return this.isScrubbing_;
+    }
+
+    /**
+     * Set current time for the `HTML5` tech.
+     *
+     * @param {number} seconds
+     *        Set the current time of the media to this.
+     */
+    setCurrentTime(seconds) {
+      try {
+        if (this.isScrubbing_ && this.el_.fastSeek && IS_ANY_SAFARI) {
+          this.el_.fastSeek(seconds);
+        } else {
+          this.el_.currentTime = seconds;
+        }
+      } catch (e) {
+        log(e, 'Video is not ready. (Video.js)');
+        // this.warning(VideoJS.warnings.videoNotReady);
+      }
+    }
+
+    /**
+     * Get the current duration of the HTML5 media element.
+     *
+     * @return {number}
+     *         The duration of the media or 0 if there is no duration.
+     */
+    duration() {
+      // Android Chrome will report duration as Infinity for VOD HLS until after
+      // playback has started, which triggers the live display erroneously.
+      // Return NaN if playback has not started and trigger a durationupdate once
+      // the duration can be reliably known.
+      if (this.el_.duration === Infinity && IS_ANDROID && IS_CHROME && this.el_.currentTime === 0) {
+        // Wait for the first `timeupdate` with currentTime > 0 - there may be
+        // several with 0
+        const checkProgress = () => {
+          if (this.el_.currentTime > 0) {
+            // Trigger durationchange for genuinely live video
+            if (this.el_.duration === Infinity) {
+              this.trigger('durationchange');
+            }
+            this.off('timeupdate', checkProgress);
+          }
+        };
+        this.on('timeupdate', checkProgress);
+        return NaN;
+      }
+      return this.el_.duration || NaN;
+    }
+
+    /**
+     * Get the current width of the HTML5 media element.
+     *
+     * @return {number}
+     *         The width of the HTML5 media element.
+     */
+    width() {
+      return this.el_.offsetWidth;
+    }
+
+    /**
+     * Get the current height of the HTML5 media element.
+     *
+     * @return {number}
+     *         The height of the HTML5 media element.
+     */
+    height() {
+      return this.el_.offsetHeight;
+    }
+
+    /**
+     * Proxy iOS `webkitbeginfullscreen` and `webkitendfullscreen` into
+     * `fullscreenchange` event.
+     *
+     * @private
+     * @fires fullscreenchange
+     * @listens webkitendfullscreen
+     * @listens webkitbeginfullscreen
+     * @listens webkitbeginfullscreen
+     */
+    proxyWebkitFullscreen_() {
+      if (!('webkitDisplayingFullscreen' in this.el_)) {
+        return;
+      }
+      const endFn = function () {
+        this.trigger('fullscreenchange', {
+          isFullscreen: false
+        });
+        // Safari will sometimes set controls on the videoelement when existing fullscreen.
+        if (this.el_.controls && !this.options_.nativeControlsForTouch && this.controls()) {
+          this.el_.controls = false;
+        }
+      };
+      const beginFn = function () {
+        if ('webkitPresentationMode' in this.el_ && this.el_.webkitPresentationMode !== 'picture-in-picture') {
+          this.one('webkitendfullscreen', endFn);
+          this.trigger('fullscreenchange', {
+            isFullscreen: true,
+            // set a flag in case another tech triggers fullscreenchange
+            nativeIOSFullscreen: true
+          });
+        }
+      };
+      this.on('webkitbeginfullscreen', beginFn);
+      this.on('dispose', () => {
+        this.off('webkitbeginfullscreen', beginFn);
+        this.off('webkitendfullscreen', endFn);
+      });
+    }
+
+    /**
+     * Check if fullscreen is supported on the video el.
+     *
+     * @return {boolean}
+     *         - True if fullscreen is supported.
+     *         - False if fullscreen is not supported.
+     */
+    supportsFullScreen() {
+      return typeof this.el_.webkitEnterFullScreen === 'function';
+    }
+
+    /**
+     * Request that the `HTML5` Tech enter fullscreen.
+     */
+    enterFullScreen() {
+      const video = this.el_;
+      if (video.paused && video.networkState <= video.HAVE_METADATA) {
+        // attempt to prime the video element for programmatic access
+        // this isn't necessary on the desktop but shouldn't hurt
+        silencePromise(this.el_.play());
+
+        // playing and pausing synchronously during the transition to fullscreen
+        // can get iOS ~6.1 devices into a play/pause loop
+        this.setTimeout(function () {
+          video.pause();
+          try {
+            video.webkitEnterFullScreen();
+          } catch (e) {
+            this.trigger('fullscreenerror', e);
+          }
+        }, 0);
+      } else {
+        try {
+          video.webkitEnterFullScreen();
+        } catch (e) {
+          this.trigger('fullscreenerror', e);
+        }
+      }
+    }
+
+    /**
+     * Request that the `HTML5` Tech exit fullscreen.
+     */
+    exitFullScreen() {
+      if (!this.el_.webkitDisplayingFullscreen) {
+        this.trigger('fullscreenerror', new Error('The video is not fullscreen'));
+        return;
+      }
+      this.el_.webkitExitFullScreen();
+    }
+
+    /**
+     * Create a floating video window always on top of other windows so that users may
+     * continue consuming media while they interact with other content sites, or
+     * applications on their device.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @return {Promise}
+     *         A promise with a Picture-in-Picture window.
+     */
+    requestPictureInPicture() {
+      return this.el_.requestPictureInPicture();
+    }
+
+    /**
+     * Native requestVideoFrameCallback if supported by browser/tech, or fallback
+     * Don't use rVCF on Safari when DRM is playing, as it doesn't fire
+     * Needs to be checked later than the constructor
+     * This will be a false positive for clear sources loaded after a Fairplay source
+     *
+     * @param {function} cb function to call
+     * @return {number} id of request
+     */
+    requestVideoFrameCallback(cb) {
+      if (this.featuresVideoFrameCallback && !this.el_.webkitKeys) {
+        return this.el_.requestVideoFrameCallback(cb);
+      }
+      return super.requestVideoFrameCallback(cb);
+    }
+
+    /**
+     * Native or fallback requestVideoFrameCallback
+     *
+     * @param {number} id request id to cancel
+     */
+    cancelVideoFrameCallback(id) {
+      if (this.featuresVideoFrameCallback && !this.el_.webkitKeys) {
+        this.el_.cancelVideoFrameCallback(id);
+      } else {
+        super.cancelVideoFrameCallback(id);
+      }
+    }
+
+    /**
+     * A getter/setter for the `Html5` Tech's source object.
+     * > Note: Please use {@link Html5#setSource}
+     *
+     * @param {Tech~SourceObject} [src]
+     *        The source object you want to set on the `HTML5` techs element.
+     *
+     * @return {Tech~SourceObject|undefined}
+     *         - The current source object when a source is not passed in.
+     *         - undefined when setting
+     *
+     * @deprecated Since version 5.
+     */
+    src(src) {
+      if (src === undefined) {
+        return this.el_.src;
+      }
+
+      // Setting src through `src` instead of `setSrc` will be deprecated
+      this.setSrc(src);
+    }
+
+    /**
+     * Reset the tech by removing all sources and then calling
+     * {@link Html5.resetMediaElement}.
+     */
+    reset() {
+      Html5.resetMediaElement(this.el_);
+    }
+
+    /**
+     * Get the current source on the `HTML5` Tech. Falls back to returning the source from
+     * the HTML5 media element.
+     *
+     * @return {Tech~SourceObject}
+     *         The current source object from the HTML5 tech. With a fallback to the
+     *         elements source.
+     */
+    currentSrc() {
+      if (this.currentSource_) {
+        return this.currentSource_.src;
+      }
+      return this.el_.currentSrc;
+    }
+
+    /**
+     * Set controls attribute for the HTML5 media Element.
+     *
+     * @param {string} val
+     *        Value to set the controls attribute to
+     */
+    setControls(val) {
+      this.el_.controls = !!val;
+    }
+
+    /**
+     * Create and returns a remote {@link TextTrack} object.
+     *
+     * @param {string} kind
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+     *
+     * @param {string} [label]
+     *        Label to identify the text track
+     *
+     * @param {string} [language]
+     *        Two letter language abbreviation
+     *
+     * @return {TextTrack}
+     *         The TextTrack that gets created.
+     */
+    addTextTrack(kind, label, language) {
+      if (!this.featuresNativeTextTracks) {
+        return super.addTextTrack(kind, label, language);
+      }
+      return this.el_.addTextTrack(kind, label, language);
+    }
+
+    /**
+     * Creates either native TextTrack or an emulated TextTrack depending
+     * on the value of `featuresNativeTextTracks`
+     *
+     * @param {Object} options
+     *        The object should contain the options to initialize the TextTrack with.
+     *
+     * @param {string} [options.kind]
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+     *
+     * @param {string} [options.label]
+     *        Label to identify the text track
+     *
+     * @param {string} [options.language]
+     *        Two letter language abbreviation.
+     *
+     * @param {boolean} [options.default]
+     *        Default this track to on.
+     *
+     * @param {string} [options.id]
+     *        The internal id to assign this track.
+     *
+     * @param {string} [options.src]
+     *        A source url for the track.
+     *
+     * @return {HTMLTrackElement}
+     *         The track element that gets created.
+     */
+    createRemoteTextTrack(options) {
+      if (!this.featuresNativeTextTracks) {
+        return super.createRemoteTextTrack(options);
+      }
+      const htmlTrackElement = document.createElement('track');
+      if (options.kind) {
+        htmlTrackElement.kind = options.kind;
+      }
+      if (options.label) {
+        htmlTrackElement.label = options.label;
+      }
+      if (options.language || options.srclang) {
+        htmlTrackElement.srclang = options.language || options.srclang;
+      }
+      if (options.default) {
+        htmlTrackElement.default = options.default;
+      }
+      if (options.id) {
+        htmlTrackElement.id = options.id;
+      }
+      if (options.src) {
+        htmlTrackElement.src = options.src;
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Creates a remote text track object and returns an html track element.
+     *
+     * @param {Object} options The object should contain values for
+     * kind, language, label, and src (location of the WebVTT file)
+     * @param {boolean} [manualCleanup=false] if set to true, the TextTrack
+     * will not be removed from the TextTrackList and HtmlTrackElementList
+     * after a source change
+     * @return {HTMLTrackElement} An Html Track Element.
+     * This can be an emulated {@link HTMLTrackElement} or a native one.
+     *
+     */
+    addRemoteTextTrack(options, manualCleanup) {
+      const htmlTrackElement = super.addRemoteTextTrack(options, manualCleanup);
+      if (this.featuresNativeTextTracks) {
+        this.el().appendChild(htmlTrackElement);
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Remove remote `TextTrack` from `TextTrackList` object
+     *
+     * @param {TextTrack} track
+     *        `TextTrack` object to remove
+     */
+    removeRemoteTextTrack(track) {
+      super.removeRemoteTextTrack(track);
+      if (this.featuresNativeTextTracks) {
+        const tracks = this.$$('track');
+        let i = tracks.length;
+        while (i--) {
+          if (track === tracks[i] || track === tracks[i].track) {
+            this.el().removeChild(tracks[i]);
+          }
+        }
+      }
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object}
+     *         An object with supported media playback quality metrics
+     */
+    getVideoPlaybackQuality() {
+      if (typeof this.el().getVideoPlaybackQuality === 'function') {
+        return this.el().getVideoPlaybackQuality();
+      }
+      const videoPlaybackQuality = {};
+      if (typeof this.el().webkitDroppedFrameCount !== 'undefined' && typeof this.el().webkitDecodedFrameCount !== 'undefined') {
+        videoPlaybackQuality.droppedVideoFrames = this.el().webkitDroppedFrameCount;
+        videoPlaybackQuality.totalVideoFrames = this.el().webkitDecodedFrameCount;
+      }
+      if (window.performance) {
+        videoPlaybackQuality.creationTime = window.performance.now();
+      }
+      return videoPlaybackQuality;
+    }
+  }
+
+  /* HTML5 Support Testing ---------------------------------------------------- */
+
+  /**
+   * Element for testing browser HTML5 media capabilities
+   *
+   * @type {Element}
+   * @constant
+   * @private
+   */
+  defineLazyProperty(Html5, 'TEST_VID', function () {
+    if (!isReal()) {
+      return;
+    }
+    const video = document.createElement('video');
+    const track = document.createElement('track');
+    track.kind = 'captions';
+    track.srclang = 'en';
+    track.label = 'English';
+    video.appendChild(track);
+    return video;
+  });
+
+  /**
+   * Check if HTML5 media is supported by this browser/device.
+   *
+   * @return {boolean}
+   *         - True if HTML5 media is supported.
+   *         - False if HTML5 media is not supported.
+   */
+  Html5.isSupported = function () {
+    // IE with no Media Player is a LIAR! (#984)
+    try {
+      Html5.TEST_VID.volume = 0.5;
+    } catch (e) {
+      return false;
+    }
+    return !!(Html5.TEST_VID && Html5.TEST_VID.canPlayType);
+  };
+
+  /**
+   * Check if the tech can support the given type
+   *
+   * @param {string} type
+   *        The mimetype to check
+   * @return {string} 'probably', 'maybe', or '' (empty string)
+   */
+  Html5.canPlayType = function (type) {
+    return Html5.TEST_VID.canPlayType(type);
+  };
+
+  /**
+   * Check if the tech can support the given source
+   *
+   * @param {Object} srcObj
+   *        The source object
+   * @param {Object} options
+   *        The options passed to the tech
+   * @return {string} 'probably', 'maybe', or '' (empty string)
+   */
+  Html5.canPlaySource = function (srcObj, options) {
+    return Html5.canPlayType(srcObj.type);
+  };
+
+  /**
+   * Check if the volume can be changed in this browser/device.
+   * Volume cannot be changed in a lot of mobile devices.
+   * Specifically, it can't be changed from 1 on iOS.
+   *
+   * @return {boolean}
+   *         - True if volume can be controlled
+   *         - False otherwise
+   */
+  Html5.canControlVolume = function () {
+    // IE will error if Windows Media Player not installed #3315
+    try {
+      const volume = Html5.TEST_VID.volume;
+      Html5.TEST_VID.volume = volume / 2 + 0.1;
+      const canControl = volume !== Html5.TEST_VID.volume;
+
+      // With the introduction of iOS 15, there are cases where the volume is read as
+      // changed but reverts back to its original state at the start of the next tick.
+      // To determine whether volume can be controlled on iOS,
+      // a timeout is set and the volume is checked asynchronously.
+      // Since `features` doesn't currently work asynchronously, the value is manually set.
+      if (canControl && IS_IOS) {
+        window.setTimeout(() => {
+          if (Html5 && Html5.prototype) {
+            Html5.prototype.featuresVolumeControl = volume !== Html5.TEST_VID.volume;
+          }
+        });
+
+        // default iOS to false, which will be updated in the timeout above.
+        return false;
+      }
+      return canControl;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if the volume can be muted in this browser/device.
+   * Some devices, e.g. iOS, don't allow changing volume
+   * but permits muting/unmuting.
+   *
+   * @return {boolean}
+   *      - True if volume can be muted
+   *      - False otherwise
+   */
+  Html5.canMuteVolume = function () {
+    try {
+      const muted = Html5.TEST_VID.muted;
+
+      // in some versions of iOS muted property doesn't always
+      // work, so we want to set both property and attribute
+      Html5.TEST_VID.muted = !muted;
+      if (Html5.TEST_VID.muted) {
+        setAttribute(Html5.TEST_VID, 'muted', 'muted');
+      } else {
+        removeAttribute(Html5.TEST_VID, 'muted', 'muted');
+      }
+      return muted !== Html5.TEST_VID.muted;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if the playback rate can be changed in this browser/device.
+   *
+   * @return {boolean}
+   *         - True if playback rate can be controlled
+   *         - False otherwise
+   */
+  Html5.canControlPlaybackRate = function () {
+    // Playback rate API is implemented in Android Chrome, but doesn't do anything
+    // https://github.com/videojs/video.js/issues/3180
+    if (IS_ANDROID && IS_CHROME && CHROME_VERSION < 58) {
+      return false;
+    }
+    // IE will error if Windows Media Player not installed #3315
+    try {
+      const playbackRate = Html5.TEST_VID.playbackRate;
+      Html5.TEST_VID.playbackRate = playbackRate / 2 + 0.1;
+      return playbackRate !== Html5.TEST_VID.playbackRate;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if we can override a video/audio elements attributes, with
+   * Object.defineProperty.
+   *
+   * @return {boolean}
+   *         - True if builtin attributes can be overridden
+   *         - False otherwise
+   */
+  Html5.canOverrideAttributes = function () {
+    // if we cannot overwrite the src/innerHTML property, there is no support
+    // iOS 7 safari for instance cannot do this.
+    try {
+      const noop = () => {};
+      Object.defineProperty(document.createElement('video'), 'src', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('audio'), 'src', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('video'), 'innerHTML', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('audio'), 'innerHTML', {
+        get: noop,
+        set: noop
+      });
+    } catch (e) {
+      return false;
+    }
+    return true;
+  };
+
+  /**
+   * Check to see if native `TextTrack`s are supported by this browser/device.
+   *
+   * @return {boolean}
+   *         - True if native `TextTrack`s are supported.
+   *         - False otherwise
+   */
+  Html5.supportsNativeTextTracks = function () {
+    return IS_ANY_SAFARI || IS_IOS && IS_CHROME;
+  };
+
+  /**
+   * Check to see if native `VideoTrack`s are supported by this browser/device
+   *
+   * @return {boolean}
+   *        - True if native `VideoTrack`s are supported.
+   *        - False otherwise
+   */
+  Html5.supportsNativeVideoTracks = function () {
+    return !!(Html5.TEST_VID && Html5.TEST_VID.videoTracks);
+  };
+
+  /**
+   * Check to see if native `AudioTrack`s are supported by this browser/device
+   *
+   * @return {boolean}
+   *        - True if native `AudioTrack`s are supported.
+   *        - False otherwise
+   */
+  Html5.supportsNativeAudioTracks = function () {
+    return !!(Html5.TEST_VID && Html5.TEST_VID.audioTracks);
+  };
+
+  /**
+   * An array of events available on the Html5 tech.
+   *
+   * @private
+   * @type {Array}
+   */
+  Html5.Events = ['loadstart', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'seeking', 'seeked', 'ended', 'durationchange', 'timeupdate', 'progress', 'play', 'pause', 'ratechange', 'resize', 'volumechange'];
+
+  /**
+   * Boolean indicating whether the `Tech` supports volume control.
+   *
+   * @type {boolean}
+   * @default {@link Html5.canControlVolume}
+   */
+  /**
+   * Boolean indicating whether the `Tech` supports muting volume.
+   *
+   * @type {boolean}
+   * @default {@link Html5.canMuteVolume}
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports changing the speed at which the media
+   * plays. Examples:
+   *   - Set player to play 2x (twice) as fast
+   *   - Set player to play 0.5x (half) as fast
+   *
+   * @type {boolean}
+   * @default {@link Html5.canControlPlaybackRate}
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `sourceset` event.
+   *
+   * @type {boolean}
+   * @default
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `TextTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeTextTracks}
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `VideoTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeVideoTracks}
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `AudioTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeAudioTracks}
+   */
+  [['featuresMuteControl', 'canMuteVolume'], ['featuresPlaybackRate', 'canControlPlaybackRate'], ['featuresSourceset', 'canOverrideAttributes'], ['featuresNativeTextTracks', 'supportsNativeTextTracks'], ['featuresNativeVideoTracks', 'supportsNativeVideoTracks'], ['featuresNativeAudioTracks', 'supportsNativeAudioTracks']].forEach(function ([key, fn]) {
+    defineLazyProperty(Html5.prototype, key, () => Html5[fn](), true);
+  });
+  Html5.prototype.featuresVolumeControl = Html5.canControlVolume();
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the media element
+   * moving in the DOM. iOS breaks if you move the media element, so this is set this to
+   * false there. Everywhere else this should be true.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.movingMediaElementInDOM = !IS_IOS;
+
+  // TODO: Previous comment: No longer appears to be used. Can probably be removed.
+  //       Is this true?
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports automatic media resize
+   * when going into fullscreen.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.featuresFullscreenResize = true;
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the progress event.
+   * If this is false, manual `progress` events will be triggered instead.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.featuresProgressEvents = true;
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the timeupdate event.
+   * If this is false, manual `timeupdate` events will be triggered instead.
+   *
+   * @default
+   */
+  Html5.prototype.featuresTimeupdateEvents = true;
+
+  /**
+   * Whether the HTML5 el supports `requestVideoFrameCallback`
+   *
+   * @type {boolean}
+   */
+  Html5.prototype.featuresVideoFrameCallback = !!(Html5.TEST_VID && Html5.TEST_VID.requestVideoFrameCallback);
+  Html5.disposeMediaElement = function (el) {
+    if (!el) {
+      return;
+    }
+    if (el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+
+    // remove any child track or source nodes to prevent their loading
+    while (el.hasChildNodes()) {
+      el.removeChild(el.firstChild);
+    }
+
+    // remove any src reference. not setting `src=''` because that causes a warning
+    // in firefox
+    el.removeAttribute('src');
+
+    // force the media element to update its loading state by calling load()
+    // however IE on Windows 7N has a bug that throws an error so need a try/catch (#793)
+    if (typeof el.load === 'function') {
+      // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+      (function () {
+        try {
+          el.load();
+        } catch (e) {
+          // not supported
+        }
+      })();
+    }
+  };
+  Html5.resetMediaElement = function (el) {
+    if (!el) {
+      return;
+    }
+    const sources = el.querySelectorAll('source');
+    let i = sources.length;
+    while (i--) {
+      el.removeChild(sources[i]);
+    }
+
+    // remove any src reference.
+    // not setting `src=''` because that throws an error
+    el.removeAttribute('src');
+    if (typeof el.load === 'function') {
+      // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+      (function () {
+        try {
+          el.load();
+        } catch (e) {
+          // satisfy linter
+        }
+      })();
+    }
+  };
+
+  /* Native HTML5 element property wrapping ----------------------------------- */
+  // Wrap native boolean attributes with getters that check both property and attribute
+  // The list is as followed:
+  // muted, defaultMuted, autoplay, controls, loop, playsinline
+  [
+  /**
+   * Get the value of `muted` from the media element. `muted` indicates
+   * that the volume for the media should be set to silent. This does not actually change
+   * the `volume` attribute.
+   *
+   * @method Html5#muted
+   * @return {boolean}
+   *         - True if the value of `volume` should be ignored and the audio set to silent.
+   *         - False if the value of `volume` should be used.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted}
+   */
+  'muted',
+  /**
+   * Get the value of `defaultMuted` from the media element. `defaultMuted` indicates
+   * whether the media should start muted or not. Only changes the default state of the
+   * media. `muted` and `defaultMuted` can have different values. {@link Html5#muted} indicates the
+   * current state.
+   *
+   * @method Html5#defaultMuted
+   * @return {boolean}
+   *         - The value of `defaultMuted` from the media element.
+   *         - True indicates that the media should start muted.
+   *         - False indicates that the media should not start muted
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted}
+   */
+  'defaultMuted',
+  /**
+   * Get the value of `autoplay` from the media element. `autoplay` indicates
+   * that the media should start to play as soon as the page is ready.
+   *
+   * @method Html5#autoplay
+   * @return {boolean}
+   *         - The value of `autoplay` from the media element.
+   *         - True indicates that the media should start as soon as the page loads.
+   *         - False indicates that the media should not start as soon as the page loads.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay}
+   */
+  'autoplay',
+  /**
+   * Get the value of `controls` from the media element. `controls` indicates
+   * whether the native media controls should be shown or hidden.
+   *
+   * @method Html5#controls
+   * @return {boolean}
+   *         - The value of `controls` from the media element.
+   *         - True indicates that native controls should be showing.
+   *         - False indicates that native controls should be hidden.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-controls}
+   */
+  'controls',
+  /**
+   * Get the value of `loop` from the media element. `loop` indicates
+   * that the media should return to the start of the media and continue playing once
+   * it reaches the end.
+   *
+   * @method Html5#loop
+   * @return {boolean}
+   *         - The value of `loop` from the media element.
+   *         - True indicates that playback should seek back to start once
+   *           the end of a media is reached.
+   *         - False indicates that playback should not loop back to the start when the
+   *           end of the media is reached.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop}
+   */
+  'loop',
+  /**
+   * Get the value of `playsinline` from the media element. `playsinline` indicates
+   * to the browser that non-fullscreen playback is preferred when fullscreen
+   * playback is the native default, such as in iOS Safari.
+   *
+   * @method Html5#playsinline
+   * @return {boolean}
+   *         - The value of `playsinline` from the media element.
+   *         - True indicates that the media should play inline.
+   *         - False indicates that the media should not play inline.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+   */
+  'playsinline'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop] || this.el_.hasAttribute(prop);
+    };
+  });
+
+  // Wrap native boolean attributes with setters that set both property and attribute
+  // The list is as followed:
+  // setMuted, setDefaultMuted, setAutoplay, setLoop, setPlaysinline
+  // setControls is special-cased above
+  [
+  /**
+   * Set the value of `muted` on the media element. `muted` indicates that the current
+   * audio level should be silent.
+   *
+   * @method Html5#setMuted
+   * @param {boolean} muted
+   *        - True if the audio should be set to silent
+   *        - False otherwise
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted}
+   */
+  'muted',
+  /**
+   * Set the value of `defaultMuted` on the media element. `defaultMuted` indicates that the current
+   * audio level should be silent, but will only effect the muted level on initial playback..
+   *
+   * @method Html5.prototype.setDefaultMuted
+   * @param {boolean} defaultMuted
+   *        - True if the audio should be set to silent
+   *        - False otherwise
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted}
+   */
+  'defaultMuted',
+  /**
+   * Set the value of `autoplay` on the media element. `autoplay` indicates
+   * that the media should start to play as soon as the page is ready.
+   *
+   * @method Html5#setAutoplay
+   * @param {boolean} autoplay
+   *         - True indicates that the media should start as soon as the page loads.
+   *         - False indicates that the media should not start as soon as the page loads.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay}
+   */
+  'autoplay',
+  /**
+   * Set the value of `loop` on the media element. `loop` indicates
+   * that the media should return to the start of the media and continue playing once
+   * it reaches the end.
+   *
+   * @method Html5#setLoop
+   * @param {boolean} loop
+   *         - True indicates that playback should seek back to start once
+   *           the end of a media is reached.
+   *         - False indicates that playback should not loop back to the start when the
+   *           end of the media is reached.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop}
+   */
+  'loop',
+  /**
+   * Set the value of `playsinline` from the media element. `playsinline` indicates
+   * to the browser that non-fullscreen playback is preferred when fullscreen
+   * playback is the native default, such as in iOS Safari.
+   *
+   * @method Html5#setPlaysinline
+   * @param {boolean} playsinline
+   *         - True indicates that the media should play inline.
+   *         - False indicates that the media should not play inline.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+   */
+  'playsinline'].forEach(function (prop) {
+    Html5.prototype['set' + toTitleCase(prop)] = function (v) {
+      this.el_[prop] = v;
+      if (v) {
+        this.el_.setAttribute(prop, prop);
+      } else {
+        this.el_.removeAttribute(prop);
+      }
+    };
+  });
+
+  // Wrap native properties with a getter
+  // The list is as followed
+  // paused, currentTime, buffered, volume, poster, preload, error, seeking
+  // seekable, ended, playbackRate, defaultPlaybackRate, disablePictureInPicture
+  // played, networkState, readyState, videoWidth, videoHeight, crossOrigin
+  [
+  /**
+   * Get the value of `paused` from the media element. `paused` indicates whether the media element
+   * is currently paused or not.
+   *
+   * @method Html5#paused
+   * @return {boolean}
+   *         The value of `paused` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-paused}
+   */
+  'paused',
+  /**
+   * Get the value of `currentTime` from the media element. `currentTime` indicates
+   * the current second that the media is at in playback.
+   *
+   * @method Html5#currentTime
+   * @return {number}
+   *         The value of `currentTime` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-currenttime}
+   */
+  'currentTime',
+  /**
+   * Get the value of `buffered` from the media element. `buffered` is a `TimeRange`
+   * object that represents the parts of the media that are already downloaded and
+   * available for playback.
+   *
+   * @method Html5#buffered
+   * @return {TimeRange}
+   *         The value of `buffered` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-buffered}
+   */
+  'buffered',
+  /**
+   * Get the value of `volume` from the media element. `volume` indicates
+   * the current playback volume of audio for a media. `volume` will be a value from 0
+   * (silent) to 1 (loudest and default).
+   *
+   * @method Html5#volume
+   * @return {number}
+   *         The value of `volume` from the media element. Value will be between 0-1.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume}
+   */
+  'volume',
+  /**
+   * Get the value of `poster` from the media element. `poster` indicates
+   * that the url of an image file that can/will be shown when no media data is available.
+   *
+   * @method Html5#poster
+   * @return {string}
+   *         The value of `poster` from the media element. Value will be a url to an
+   *         image.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-video-poster}
+   */
+  'poster',
+  /**
+   * Get the value of `preload` from the media element. `preload` indicates
+   * what should download before the media is interacted with. It can have the following
+   * values:
+   * - none: nothing should be downloaded
+   * - metadata: poster and the first few frames of the media may be downloaded to get
+   *   media dimensions and other metadata
+   * - auto: allow the media and metadata for the media to be downloaded before
+   *    interaction
+   *
+   * @method Html5#preload
+   * @return {string}
+   *         The value of `preload` from the media element. Will be 'none', 'metadata',
+   *         or 'auto'.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload}
+   */
+  'preload',
+  /**
+   * Get the value of the `error` from the media element. `error` indicates any
+   * MediaError that may have occurred during playback. If error returns null there is no
+   * current error.
+   *
+   * @method Html5#error
+   * @return {MediaError|null}
+   *         The value of `error` from the media element. Will be `MediaError` if there
+   *         is a current error and null otherwise.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-error}
+   */
+  'error',
+  /**
+   * Get the value of `seeking` from the media element. `seeking` indicates whether the
+   * media is currently seeking to a new position or not.
+   *
+   * @method Html5#seeking
+   * @return {boolean}
+   *         - The value of `seeking` from the media element.
+   *         - True indicates that the media is currently seeking to a new position.
+   *         - False indicates that the media is not seeking to a new position at this time.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seeking}
+   */
+  'seeking',
+  /**
+   * Get the value of `seekable` from the media element. `seekable` returns a
+   * `TimeRange` object indicating ranges of time that can currently be `seeked` to.
+   *
+   * @method Html5#seekable
+   * @return {TimeRange}
+   *         The value of `seekable` from the media element. A `TimeRange` object
+   *         indicating the current ranges of time that can be seeked to.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seekable}
+   */
+  'seekable',
+  /**
+   * Get the value of `ended` from the media element. `ended` indicates whether
+   * the media has reached the end or not.
+   *
+   * @method Html5#ended
+   * @return {boolean}
+   *         - The value of `ended` from the media element.
+   *         - True indicates that the media has ended.
+   *         - False indicates that the media has not ended.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-ended}
+   */
+  'ended',
+  /**
+   * Get the value of `playbackRate` from the media element. `playbackRate` indicates
+   * the rate at which the media is currently playing back. Examples:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5#playbackRate
+   * @return {number}
+   *         The value of `playbackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'playbackRate',
+  /**
+   * Get the value of `defaultPlaybackRate` from the media element. `defaultPlaybackRate` indicates
+   * the rate at which the media is currently playing back. This value will not indicate the current
+   * `playbackRate` after playback has started, use {@link Html5#playbackRate} for that.
+   *
+   * Examples:
+   *   - if defaultPlaybackRate is set to 2, media will play twice as fast.
+   *   - if defaultPlaybackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5.prototype.defaultPlaybackRate
+   * @return {number}
+   *         The value of `defaultPlaybackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'defaultPlaybackRate',
+  /**
+   * Get the value of 'disablePictureInPicture' from the video element.
+   *
+   * @method Html5#disablePictureInPicture
+   * @return {boolean} value
+   *         - The value of `disablePictureInPicture` from the video element.
+   *         - True indicates that the video can't be played in Picture-In-Picture mode
+   *         - False indicates that the video can be played in Picture-In-Picture mode
+   *
+   * @see [Spec]{@link https://w3c.github.io/picture-in-picture/#disable-pip}
+   */
+  'disablePictureInPicture',
+  /**
+   * Get the value of `played` from the media element. `played` returns a `TimeRange`
+   * object representing points in the media timeline that have been played.
+   *
+   * @method Html5#played
+   * @return {TimeRange}
+   *         The value of `played` from the media element. A `TimeRange` object indicating
+   *         the ranges of time that have been played.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-played}
+   */
+  'played',
+  /**
+   * Get the value of `networkState` from the media element. `networkState` indicates
+   * the current network state. It returns an enumeration from the following list:
+   * - 0: NETWORK_EMPTY
+   * - 1: NETWORK_IDLE
+   * - 2: NETWORK_LOADING
+   * - 3: NETWORK_NO_SOURCE
+   *
+   * @method Html5#networkState
+   * @return {number}
+   *         The value of `networkState` from the media element. This will be a number
+   *         from the list in the description.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-networkstate}
+   */
+  'networkState',
+  /**
+   * Get the value of `readyState` from the media element. `readyState` indicates
+   * the current state of the media element. It returns an enumeration from the
+   * following list:
+   * - 0: HAVE_NOTHING
+   * - 1: HAVE_METADATA
+   * - 2: HAVE_CURRENT_DATA
+   * - 3: HAVE_FUTURE_DATA
+   * - 4: HAVE_ENOUGH_DATA
+   *
+   * @method Html5#readyState
+   * @return {number}
+   *         The value of `readyState` from the media element. This will be a number
+   *         from the list in the description.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#ready-states}
+   */
+  'readyState',
+  /**
+   * Get the value of `videoWidth` from the video element. `videoWidth` indicates
+   * the current width of the video in css pixels.
+   *
+   * @method Html5#videoWidth
+   * @return {number}
+   *         The value of `videoWidth` from the video element. This will be a number
+   *         in css pixels.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth}
+   */
+  'videoWidth',
+  /**
+   * Get the value of `videoHeight` from the video element. `videoHeight` indicates
+   * the current height of the video in css pixels.
+   *
+   * @method Html5#videoHeight
+   * @return {number}
+   *         The value of `videoHeight` from the video element. This will be a number
+   *         in css pixels.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth}
+   */
+  'videoHeight',
+  /**
+   * Get the value of `crossOrigin` from the media element. `crossOrigin` indicates
+   * to the browser that should sent the cookies along with the requests for the
+   * different assets/playlists
+   *
+   * @method Html5#crossOrigin
+   * @return {string}
+   *         - anonymous indicates that the media should not sent cookies.
+   *         - use-credentials indicates that the media should sent cookies along the requests.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-media-crossorigin}
+   */
+  'crossOrigin'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop];
+    };
+  });
+
+  // Wrap native properties with a setter in this format:
+  // set + toTitleCase(name)
+  // The list is as follows:
+  // setVolume, setSrc, setPoster, setPreload, setPlaybackRate, setDefaultPlaybackRate,
+  // setDisablePictureInPicture, setCrossOrigin
+  [
+  /**
+   * Set the value of `volume` on the media element. `volume` indicates the current
+   * audio level as a percentage in decimal form. This means that 1 is 100%, 0.5 is 50%, and
+   * so on.
+   *
+   * @method Html5#setVolume
+   * @param {number} percentAsDecimal
+   *        The volume percent as a decimal. Valid range is from 0-1.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume}
+   */
+  'volume',
+  /**
+   * Set the value of `src` on the media element. `src` indicates the current
+   * {@link Tech~SourceObject} for the media.
+   *
+   * @method Html5#setSrc
+   * @param {Tech~SourceObject} src
+   *        The source object to set as the current source.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-src}
+   */
+  'src',
+  /**
+   * Set the value of `poster` on the media element. `poster` is the url to
+   * an image file that can/will be shown when no media data is available.
+   *
+   * @method Html5#setPoster
+   * @param {string} poster
+   *        The url to an image that should be used as the `poster` for the media
+   *        element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-poster}
+   */
+  'poster',
+  /**
+   * Set the value of `preload` on the media element. `preload` indicates
+   * what should download before the media is interacted with. It can have the following
+   * values:
+   * - none: nothing should be downloaded
+   * - metadata: poster and the first few frames of the media may be downloaded to get
+   *   media dimensions and other metadata
+   * - auto: allow the media and metadata for the media to be downloaded before
+   *    interaction
+   *
+   * @method Html5#setPreload
+   * @param {string} preload
+   *         The value of `preload` to set on the media element. Must be 'none', 'metadata',
+   *         or 'auto'.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload}
+   */
+  'preload',
+  /**
+   * Set the value of `playbackRate` on the media element. `playbackRate` indicates
+   * the rate at which the media should play back. Examples:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5#setPlaybackRate
+   * @return {number}
+   *         The value of `playbackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'playbackRate',
+  /**
+   * Set the value of `defaultPlaybackRate` on the media element. `defaultPlaybackRate` indicates
+   * the rate at which the media should play back upon initial startup. Changing this value
+   * after a video has started will do nothing. Instead you should used {@link Html5#setPlaybackRate}.
+   *
+   * Example Values:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5.prototype.setDefaultPlaybackRate
+   * @return {number}
+   *         The value of `defaultPlaybackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultplaybackrate}
+   */
+  'defaultPlaybackRate',
+  /**
+   * Prevents the browser from suggesting a Picture-in-Picture context menu
+   * or to request Picture-in-Picture automatically in some cases.
+   *
+   * @method Html5#setDisablePictureInPicture
+   * @param {boolean} value
+   *         The true value will disable Picture-in-Picture mode.
+   *
+   * @see [Spec]{@link https://w3c.github.io/picture-in-picture/#disable-pip}
+   */
+  'disablePictureInPicture',
+  /**
+   * Set the value of `crossOrigin` from the media element. `crossOrigin` indicates
+   * to the browser that should sent the cookies along with the requests for the
+   * different assets/playlists
+   *
+   * @method Html5#setCrossOrigin
+   * @param {string} crossOrigin
+   *         - anonymous indicates that the media should not sent cookies.
+   *         - use-credentials indicates that the media should sent cookies along the requests.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-media-crossorigin}
+   */
+  'crossOrigin'].forEach(function (prop) {
+    Html5.prototype['set' + toTitleCase(prop)] = function (v) {
+      this.el_[prop] = v;
+    };
+  });
+
+  // wrap native functions with a function
+  // The list is as follows:
+  // pause, load, play
+  [
+  /**
+   * A wrapper around the media elements `pause` function. This will call the `HTML5`
+   * media elements `pause` function.
+   *
+   * @method Html5#pause
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-pause}
+   */
+  'pause',
+  /**
+   * A wrapper around the media elements `load` function. This will call the `HTML5`s
+   * media element `load` function.
+   *
+   * @method Html5#load
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-load}
+   */
+  'load',
+  /**
+   * A wrapper around the media elements `play` function. This will call the `HTML5`s
+   * media element `play` function.
+   *
+   * @method Html5#play
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-play}
+   */
+  'play'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop]();
+    };
+  });
+  Tech.withSourceHandlers(Html5);
+
+  /**
+   * Native source handler for Html5, simply passes the source to the media element.
+   *
+   * @property {Tech~SourceObject} source
+   *        The source object
+   *
+   * @property {Html5} tech
+   *        The instance of the HTML5 tech.
+   */
+  Html5.nativeSourceHandler = {};
+
+  /**
+   * Check if the media element can play the given mime type.
+   *
+   * @param {string} type
+   *        The mimetype to check
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string)
+   */
+  Html5.nativeSourceHandler.canPlayType = function (type) {
+    // IE without MediaPlayer throws an error (#519)
+    try {
+      return Html5.TEST_VID.canPlayType(type);
+    } catch (e) {
+      return '';
+    }
+  };
+
+  /**
+   * Check if the media element can handle a source natively.
+   *
+   * @param {Tech~SourceObject} source
+   *         The source object
+   *
+   * @param {Object} [options]
+   *         Options to be passed to the tech.
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string).
+   */
+  Html5.nativeSourceHandler.canHandleSource = function (source, options) {
+    // If a type was provided we should rely on that
+    if (source.type) {
+      return Html5.nativeSourceHandler.canPlayType(source.type);
+
+      // If no type, fall back to checking 'video/[EXTENSION]'
+    } else if (source.src) {
+      const ext = getFileExtension(source.src);
+      return Html5.nativeSourceHandler.canPlayType(`video/${ext}`);
+    }
+    return '';
+  };
+
+  /**
+   * Pass the source to the native media element.
+   *
+   * @param {Tech~SourceObject} source
+   *        The source object
+   *
+   * @param {Html5} tech
+   *        The instance of the Html5 tech
+   *
+   * @param {Object} [options]
+   *        The options to pass to the source
+   */
+  Html5.nativeSourceHandler.handleSource = function (source, tech, options) {
+    tech.setSrc(source.src);
+  };
+
+  /**
+   * A noop for the native dispose function, as cleanup is not needed.
+   */
+  Html5.nativeSourceHandler.dispose = function () {};
+
+  // Register the native source handler
+  Html5.registerSourceHandler(Html5.nativeSourceHandler);
+  Tech.registerTech('Html5', Html5);
+
+  /**
+   * @file player.js
+   */
+
+  // The following tech events are simply re-triggered
+  // on the player when they happen
+  const TECH_EVENTS_RETRIGGER = [
+  /**
+   * Fired while the user agent is downloading media data.
+   *
+   * @event Player#progress
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `progress` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechProgress_
+   * @fires Player#progress
+   * @listens Tech#progress
+   */
+  'progress',
+  /**
+   * Fires when the loading of an audio/video is aborted.
+   *
+   * @event Player#abort
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `abort` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechAbort_
+   * @fires Player#abort
+   * @listens Tech#abort
+   */
+  'abort',
+  /**
+   * Fires when the browser is intentionally not getting media data.
+   *
+   * @event Player#suspend
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `suspend` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechSuspend_
+   * @fires Player#suspend
+   * @listens Tech#suspend
+   */
+  'suspend',
+  /**
+   * Fires when the current playlist is empty.
+   *
+   * @event Player#emptied
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `emptied` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechEmptied_
+   * @fires Player#emptied
+   * @listens Tech#emptied
+   */
+  'emptied',
+  /**
+   * Fires when the browser is trying to get media data, but data is not available.
+   *
+   * @event Player#stalled
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `stalled` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechStalled_
+   * @fires Player#stalled
+   * @listens Tech#stalled
+   */
+  'stalled',
+  /**
+   * Fires when the browser has loaded meta data for the audio/video.
+   *
+   * @event Player#loadedmetadata
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `loadedmetadata` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechLoadedmetadata_
+   * @fires Player#loadedmetadata
+   * @listens Tech#loadedmetadata
+   */
+  'loadedmetadata',
+  /**
+   * Fires when the browser has loaded the current frame of the audio/video.
+   *
+   * @event Player#loadeddata
+   * @type {event}
+   */
+  /**
+   * Retrigger the `loadeddata` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechLoaddeddata_
+   * @fires Player#loadeddata
+   * @listens Tech#loadeddata
+   */
+  'loadeddata',
+  /**
+   * Fires when the current playback position has changed.
+   *
+   * @event Player#timeupdate
+   * @type {event}
+   */
+  /**
+   * Retrigger the `timeupdate` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechTimeUpdate_
+   * @fires Player#timeupdate
+   * @listens Tech#timeupdate
+   */
+  'timeupdate',
+  /**
+   * Fires when the video's intrinsic dimensions change
+   *
+   * @event Player#resize
+   * @type {event}
+   */
+  /**
+   * Retrigger the `resize` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechResize_
+   * @fires Player#resize
+   * @listens Tech#resize
+   */
+  'resize',
+  /**
+   * Fires when the volume has been changed
+   *
+   * @event Player#volumechange
+   * @type {event}
+   */
+  /**
+   * Retrigger the `volumechange` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechVolumechange_
+   * @fires Player#volumechange
+   * @listens Tech#volumechange
+   */
+  'volumechange',
+  /**
+   * Fires when the text track has been changed
+   *
+   * @event Player#texttrackchange
+   * @type {event}
+   */
+  /**
+   * Retrigger the `texttrackchange` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechTexttrackchange_
+   * @fires Player#texttrackchange
+   * @listens Tech#texttrackchange
+   */
+  'texttrackchange'];
+
+  // events to queue when playback rate is zero
+  // this is a hash for the sole purpose of mapping non-camel-cased event names
+  // to camel-cased function names
+  const TECH_EVENTS_QUEUE = {
+    canplay: 'CanPlay',
+    canplaythrough: 'CanPlayThrough',
+    playing: 'Playing',
+    seeked: 'Seeked'
+  };
+  const BREAKPOINT_ORDER = ['tiny', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'huge'];
+  const BREAKPOINT_CLASSES = {};
+
+  // grep: vjs-layout-tiny
+  // grep: vjs-layout-x-small
+  // grep: vjs-layout-small
+  // grep: vjs-layout-medium
+  // grep: vjs-layout-large
+  // grep: vjs-layout-x-large
+  // grep: vjs-layout-huge
+  BREAKPOINT_ORDER.forEach(k => {
+    const v = k.charAt(0) === 'x' ? `x-${k.substring(1)}` : k;
+    BREAKPOINT_CLASSES[k] = `vjs-layout-${v}`;
+  });
+  const DEFAULT_BREAKPOINTS = {
+    tiny: 210,
+    xsmall: 320,
+    small: 425,
+    medium: 768,
+    large: 1440,
+    xlarge: 2560,
+    huge: Infinity
+  };
+
+  /**
+   * An instance of the `Player` class is created when any of the Video.js setup methods
+   * are used to initialize a video.
+   *
+   * After an instance has been created it can be accessed globally in three ways:
+   * 1. By calling `videojs.getPlayer('example_video_1');`
+   * 2. By calling `videojs('example_video_1');` (not recommended)
+   * 2. By using it directly via `videojs.players.example_video_1;`
+   *
+   * @extends Component
+   * @global
+   */
+  class Player extends Component {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Element} tag
+     *        The original video DOM element used for configuring options.
+     *
+     * @param {Object} [options]
+     *        Object of option names and values.
+     *
+     * @param {Function} [ready]
+     *        Ready callback function.
+     */
+    constructor(tag, options, ready) {
+      // Make sure tag ID exists
+      // also here.. probably better
+      tag.id = tag.id || options.id || `vjs_video_${newGUID()}`;
+
+      // Set Options
+      // The options argument overrides options set in the video tag
+      // which overrides globally set options.
+      // This latter part coincides with the load order
+      // (tag must exist before Player)
+      options = Object.assign(Player.getTagSettings(tag), options);
+
+      // Delay the initialization of children because we need to set up
+      // player properties first, and can't use `this` before `super()`
+      options.initChildren = false;
+
+      // Same with creating the element
+      options.createEl = false;
+
+      // don't auto mixin the evented mixin
+      options.evented = false;
+
+      // we don't want the player to report touch activity on itself
+      // see enableTouchActivity in Component
+      options.reportTouchActivity = false;
+
+      // If language is not set, get the closest lang attribute
+      if (!options.language) {
+        const closest = tag.closest('[lang]');
+        if (closest) {
+          options.language = closest.getAttribute('lang');
+        }
+      }
+
+      // Run base component initializing with new options
+      super(null, options, ready);
+
+      // Create bound methods for document listeners.
+      this.boundDocumentFullscreenChange_ = e => this.documentFullscreenChange_(e);
+      this.boundFullWindowOnEscKey_ = e => this.fullWindowOnEscKey(e);
+      this.boundUpdateStyleEl_ = e => this.updateStyleEl_(e);
+      this.boundApplyInitTime_ = e => this.applyInitTime_(e);
+      this.boundUpdateCurrentBreakpoint_ = e => this.updateCurrentBreakpoint_(e);
+      this.boundHandleTechClick_ = e => this.handleTechClick_(e);
+      this.boundHandleTechDoubleClick_ = e => this.handleTechDoubleClick_(e);
+      this.boundHandleTechTouchStart_ = e => this.handleTechTouchStart_(e);
+      this.boundHandleTechTouchMove_ = e => this.handleTechTouchMove_(e);
+      this.boundHandleTechTouchEnd_ = e => this.handleTechTouchEnd_(e);
+      this.boundHandleTechTap_ = e => this.handleTechTap_(e);
+
+      // default isFullscreen_ to false
+      this.isFullscreen_ = false;
+
+      // create logger
+      this.log = createLogger(this.id_);
+
+      // Hold our own reference to fullscreen api so it can be mocked in tests
+      this.fsApi_ = FullscreenApi;
+
+      // Tracks when a tech changes the poster
+      this.isPosterFromTech_ = false;
+
+      // Holds callback info that gets queued when playback rate is zero
+      // and a seek is happening
+      this.queuedCallbacks_ = [];
+
+      // Turn off API access because we're loading a new tech that might load asynchronously
+      this.isReady_ = false;
+
+      // Init state hasStarted_
+      this.hasStarted_ = false;
+
+      // Init state userActive_
+      this.userActive_ = false;
+
+      // Init debugEnabled_
+      this.debugEnabled_ = false;
+
+      // Init state audioOnlyMode_
+      this.audioOnlyMode_ = false;
+
+      // Init state audioPosterMode_
+      this.audioPosterMode_ = false;
+
+      // Init state audioOnlyCache_
+      this.audioOnlyCache_ = {
+        playerHeight: null,
+        hiddenChildren: []
+      };
+
+      // if the global option object was accidentally blown away by
+      // someone, bail early with an informative error
+      if (!this.options_ || !this.options_.techOrder || !this.options_.techOrder.length) {
+        throw new Error('No techOrder specified. Did you overwrite ' + 'videojs.options instead of just changing the ' + 'properties you want to override?');
+      }
+
+      // Store the original tag used to set options
+      this.tag = tag;
+
+      // Store the tag attributes used to restore html5 element
+      this.tagAttributes = tag && getAttributes(tag);
+
+      // Update current language
+      this.language(this.options_.language);
+
+      // Update Supported Languages
+      if (options.languages) {
+        // Normalise player option languages to lowercase
+        const languagesToLower = {};
+        Object.getOwnPropertyNames(options.languages).forEach(function (name) {
+          languagesToLower[name.toLowerCase()] = options.languages[name];
+        });
+        this.languages_ = languagesToLower;
+      } else {
+        this.languages_ = Player.prototype.options_.languages;
+      }
+      this.resetCache_();
+
+      // Set poster
+      /** @type string */
+      this.poster_ = options.poster || '';
+
+      // Set controls
+      /** @type {boolean} */
+      this.controls_ = !!options.controls;
+
+      // Original tag settings stored in options
+      // now remove immediately so native controls don't flash.
+      // May be turned back on by HTML5 tech if nativeControlsForTouch is true
+      tag.controls = false;
+      tag.removeAttribute('controls');
+      this.changingSrc_ = false;
+      this.playCallbacks_ = [];
+      this.playTerminatedQueue_ = [];
+
+      // the attribute overrides the option
+      if (tag.hasAttribute('autoplay')) {
+        this.autoplay(true);
+      } else {
+        // otherwise use the setter to validate and
+        // set the correct value.
+        this.autoplay(this.options_.autoplay);
+      }
+
+      // check plugins
+      if (options.plugins) {
+        Object.keys(options.plugins).forEach(name => {
+          if (typeof this[name] !== 'function') {
+            throw new Error(`plugin "${name}" does not exist`);
+          }
+        });
+      }
+
+      /*
+       * Store the internal state of scrubbing
+       *
+       * @private
+       * @return {Boolean} True if the user is scrubbing
+       */
+      this.scrubbing_ = false;
+      this.el_ = this.createEl();
+
+      // Make this an evented object and use `el_` as its event bus.
+      evented(this, {
+        eventBusKey: 'el_'
+      });
+
+      // listen to document and player fullscreenchange handlers so we receive those events
+      // before a user can receive them so we can update isFullscreen appropriately.
+      // make sure that we listen to fullscreenchange events before everything else to make sure that
+      // our isFullscreen method is updated properly for internal components as well as external.
+      if (this.fsApi_.requestFullscreen) {
+        on(document, this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+        this.on(this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+      }
+      if (this.fluid_) {
+        this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+      }
+      // We also want to pass the original player options to each component and plugin
+      // as well so they don't need to reach back into the player for options later.
+      // We also need to do another copy of this.options_ so we don't end up with
+      // an infinite loop.
+      const playerOptionsCopy = merge(this.options_);
+
+      // Load plugins
+      if (options.plugins) {
+        Object.keys(options.plugins).forEach(name => {
+          this[name](options.plugins[name]);
+        });
+      }
+
+      // Enable debug mode to fire debugon event for all plugins.
+      if (options.debug) {
+        this.debug(true);
+      }
+      this.options_.playerOptions = playerOptionsCopy;
+      this.middleware_ = [];
+      this.playbackRates(options.playbackRates);
+      if (options.experimentalSvgIcons) {
+        // Add SVG Sprite to the DOM
+        const parser = new window.DOMParser();
+        const parsedSVG = parser.parseFromString(icons, 'image/svg+xml');
+        const errorNode = parsedSVG.querySelector('parsererror');
+        if (errorNode) {
+          log.warn('Failed to load SVG Icons. Falling back to Font Icons.');
+          this.options_.experimentalSvgIcons = null;
+        } else {
+          const sprite = parsedSVG.documentElement;
+          sprite.style.display = 'none';
+          this.el_.appendChild(sprite);
+          this.addClass('vjs-svg-icons-enabled');
+        }
+      }
+      this.initChildren();
+
+      // Set isAudio based on whether or not an audio tag was used
+      this.isAudio(tag.nodeName.toLowerCase() === 'audio');
+
+      // Update controls className. Can't do this when the controls are initially
+      // set because the element doesn't exist yet.
+      if (this.controls()) {
+        this.addClass('vjs-controls-enabled');
+      } else {
+        this.addClass('vjs-controls-disabled');
+      }
+
+      // Set ARIA label and region role depending on player type
+      this.el_.setAttribute('role', 'region');
+      if (this.isAudio()) {
+        this.el_.setAttribute('aria-label', this.localize('Audio Player'));
+      } else {
+        this.el_.setAttribute('aria-label', this.localize('Video Player'));
+      }
+      if (this.isAudio()) {
+        this.addClass('vjs-audio');
+      }
+
+      // TODO: Make this smarter. Toggle user state between touching/mousing
+      // using events, since devices can have both touch and mouse events.
+      // TODO: Make this check be performed again when the window switches between monitors
+      // (See https://github.com/videojs/video.js/issues/5683)
+      if (TOUCH_ENABLED) {
+        this.addClass('vjs-touch-enabled');
+      }
+
+      // iOS Safari has broken hover handling
+      if (!IS_IOS) {
+        this.addClass('vjs-workinghover');
+      }
+
+      // Make player easily findable by ID
+      Player.players[this.id_] = this;
+
+      // Add a major version class to aid css in plugins
+      const majorVersion = version.split('.')[0];
+      this.addClass(`vjs-v${majorVersion}`);
+
+      // When the player is first initialized, trigger activity so components
+      // like the control bar show themselves if needed
+      this.userActive(true);
+      this.reportUserActivity();
+      this.one('play', e => this.listenForUserActivity_(e));
+      this.on('keydown', e => this.handleKeyDown(e));
+      this.on('languagechange', e => this.handleLanguagechange(e));
+      this.breakpoints(this.options_.breakpoints);
+      this.responsive(this.options_.responsive);
+
+      // Calling both the audio mode methods after the player is fully
+      // setup to be able to listen to the events triggered by them
+      this.on('ready', () => {
+        // Calling the audioPosterMode method first so that
+        // the audioOnlyMode can take precedence when both options are set to true
+        this.audioPosterMode(this.options_.audioPosterMode);
+        this.audioOnlyMode(this.options_.audioOnlyMode);
+      });
+    }
+
+    /**
+     * Destroys the video player and does any necessary cleanup.
+     *
+     * This is especially helpful if you are dynamically adding and removing videos
+     * to/from the DOM.
+     *
+     * @fires Player#dispose
+     */
+    dispose() {
+      /**
+       * Called when the player is being disposed of.
+       *
+       * @event Player#dispose
+       * @type {Event}
+       */
+      this.trigger('dispose');
+      // prevent dispose from being called twice
+      this.off('dispose');
+
+      // Make sure all player-specific document listeners are unbound. This is
+      off(document, this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+      off(document, 'keydown', this.boundFullWindowOnEscKey_);
+      if (this.styleEl_ && this.styleEl_.parentNode) {
+        this.styleEl_.parentNode.removeChild(this.styleEl_);
+        this.styleEl_ = null;
+      }
+
+      // Kill reference to this player
+      Player.players[this.id_] = null;
+      if (this.tag && this.tag.player) {
+        this.tag.player = null;
+      }
+      if (this.el_ && this.el_.player) {
+        this.el_.player = null;
+      }
+      if (this.tech_) {
+        this.tech_.dispose();
+        this.isPosterFromTech_ = false;
+        this.poster_ = '';
+      }
+      if (this.playerElIngest_) {
+        this.playerElIngest_ = null;
+      }
+      if (this.tag) {
+        this.tag = null;
+      }
+      clearCacheForPlayer(this);
+
+      // remove all event handlers for track lists
+      // all tracks and track listeners are removed on
+      // tech dispose
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        const list = this[props.getterName]();
+
+        // if it is not a native list
+        // we have to manually remove event listeners
+        if (list && list.off) {
+          list.off();
+        }
+      });
+
+      // the actual .el_ is removed here, or replaced if
+      super.dispose({
+        restoreEl: this.options_.restoreEl
+      });
+    }
+
+    /**
+     * Create the `Player`'s DOM element.
+     *
+     * @return {Element}
+     *         The DOM element that gets created.
+     */
+    createEl() {
+      let tag = this.tag;
+      let el;
+      let playerElIngest = this.playerElIngest_ = tag.parentNode && tag.parentNode.hasAttribute && tag.parentNode.hasAttribute('data-vjs-player');
+      const divEmbed = this.tag.tagName.toLowerCase() === 'video-js';
+      if (playerElIngest) {
+        el = this.el_ = tag.parentNode;
+      } else if (!divEmbed) {
+        el = this.el_ = super.createEl('div');
+      }
+
+      // Copy over all the attributes from the tag, including ID and class
+      // ID will now reference player box, not the video tag
+      const attrs = getAttributes(tag);
+      if (divEmbed) {
+        el = this.el_ = tag;
+        tag = this.tag = document.createElement('video');
+        while (el.children.length) {
+          tag.appendChild(el.firstChild);
+        }
+        if (!hasClass(el, 'video-js')) {
+          addClass(el, 'video-js');
+        }
+        el.appendChild(tag);
+        playerElIngest = this.playerElIngest_ = el;
+        // move properties over from our custom `video-js` element
+        // to our new `video` element. This will move things like
+        // `src` or `controls` that were set via js before the player
+        // was initialized.
+        Object.keys(el).forEach(k => {
+          try {
+            tag[k] = el[k];
+          } catch (e) {
+            // we got a a property like outerHTML which we can't actually copy, ignore it
+          }
+        });
+      }
+
+      // set tabindex to -1 to remove the video element from the focus order
+      tag.setAttribute('tabindex', '-1');
+      attrs.tabindex = '-1';
+
+      // Workaround for #4583 on Chrome (on Windows) with JAWS.
+      // See https://github.com/FreedomScientific/VFO-standards-support/issues/78
+      // Note that we can't detect if JAWS is being used, but this ARIA attribute
+      // doesn't change behavior of Chrome if JAWS is not being used
+      if (IS_CHROME && IS_WINDOWS) {
+        tag.setAttribute('role', 'application');
+        attrs.role = 'application';
+      }
+
+      // Remove width/height attrs from tag so CSS can make it 100% width/height
+      tag.removeAttribute('width');
+      tag.removeAttribute('height');
+      if ('width' in attrs) {
+        delete attrs.width;
+      }
+      if ('height' in attrs) {
+        delete attrs.height;
+      }
+      Object.getOwnPropertyNames(attrs).forEach(function (attr) {
+        // don't copy over the class attribute to the player element when we're in a div embed
+        // the class is already set up properly in the divEmbed case
+        // and we want to make sure that the `video-js` class doesn't get lost
+        if (!(divEmbed && attr === 'class')) {
+          el.setAttribute(attr, attrs[attr]);
+        }
+        if (divEmbed) {
+          tag.setAttribute(attr, attrs[attr]);
+        }
+      });
+
+      // Update tag id/class for use as HTML5 playback tech
+      // Might think we should do this after embedding in container so .vjs-tech class
+      // doesn't flash 100% width/height, but class only applies with .video-js parent
+      tag.playerId = tag.id;
+      tag.id += '_html5_api';
+      tag.className = 'vjs-tech';
+
+      // Make player findable on elements
+      tag.player = el.player = this;
+      // Default state of video is paused
+      this.addClass('vjs-paused');
+      const deviceClassNames = ['IS_SMART_TV', 'IS_TIZEN', 'IS_WEBOS', 'IS_ANDROID', 'IS_IPAD', 'IS_IPHONE'].filter(key => browser[key]).map(key => {
+        return 'vjs-device-' + key.substring(3).toLowerCase().replace(/\_/g, '-');
+      });
+      this.addClass(...deviceClassNames);
+
+      // Add a style element in the player that we'll use to set the width/height
+      // of the player in a way that's still overridable by CSS, just like the
+      // video element
+      if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true) {
+        this.styleEl_ = createStyleElement('vjs-styles-dimensions');
+        const defaultsStyleEl = $('.vjs-styles-defaults');
+        const head = $('head');
+        head.insertBefore(this.styleEl_, defaultsStyleEl ? defaultsStyleEl.nextSibling : head.firstChild);
+      }
+      this.fill_ = false;
+      this.fluid_ = false;
+
+      // Pass in the width/height/aspectRatio options which will update the style el
+      this.width(this.options_.width);
+      this.height(this.options_.height);
+      this.fill(this.options_.fill);
+      this.fluid(this.options_.fluid);
+      this.aspectRatio(this.options_.aspectRatio);
+      // support both crossOrigin and crossorigin to reduce confusion and issues around the name
+      this.crossOrigin(this.options_.crossOrigin || this.options_.crossorigin);
+
+      // Hide any links within the video/audio tag,
+      // because IE doesn't hide them completely from screen readers.
+      const links = tag.getElementsByTagName('a');
+      for (let i = 0; i < links.length; i++) {
+        const linkEl = links.item(i);
+        addClass(linkEl, 'vjs-hidden');
+        linkEl.setAttribute('hidden', 'hidden');
+      }
+
+      // insertElFirst seems to cause the networkState to flicker from 3 to 2, so
+      // keep track of the original for later so we can know if the source originally failed
+      tag.initNetworkState_ = tag.networkState;
+
+      // Wrap video tag in div (el/box) container
+      if (tag.parentNode && !playerElIngest) {
+        tag.parentNode.insertBefore(el, tag);
+      }
+
+      // insert the tag as the first child of the player element
+      // then manually add it to the children array so that this.addChild
+      // will work properly for other components
+      //
+      // Breaks iPhone, fixed in HTML5 setup.
+      prependTo(tag, el);
+      this.children_.unshift(tag);
+
+      // Set lang attr on player to ensure CSS :lang() in consistent with player
+      // if it's been set to something different to the doc
+      this.el_.setAttribute('lang', this.language_);
+      this.el_.setAttribute('translate', 'no');
+      this.el_ = el;
+      return el;
+    }
+
+    /**
+     * Get or set the `Player`'s crossOrigin option. For the HTML5 player, this
+     * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+     * behavior.
+     *
+     * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+     *
+     * @param {string|null} [value]
+     *        The value to set the `Player`'s crossOrigin to. If an argument is
+     *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+     *
+     * @return {string|null|undefined}
+     *         - The current crossOrigin value of the `Player` when getting.
+     *         - undefined when setting
+     */
+    crossOrigin(value) {
+      // `null` can be set to unset a value
+      if (typeof value === 'undefined') {
+        return this.techGet_('crossOrigin');
+      }
+      if (value !== null && value !== 'anonymous' && value !== 'use-credentials') {
+        log.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${value}"`);
+        return;
+      }
+      this.techCall_('setCrossOrigin', value);
+      if (this.posterImage) {
+        this.posterImage.crossOrigin(value);
+      }
+      return;
+    }
+
+    /**
+     * A getter/setter for the `Player`'s width. Returns the player's configured value.
+     * To get the current width use `currentWidth()`.
+     *
+     * @param {number|string} [value]
+     *        CSS value to set the `Player`'s width to.
+     *
+     * @return {number|undefined}
+     *         - The current width of the `Player` when getting.
+     *         - Nothing when setting
+     */
+    width(value) {
+      return this.dimension('width', value);
+    }
+
+    /**
+     * A getter/setter for the `Player`'s height. Returns the player's configured value.
+     * To get the current height use `currentheight()`.
+     *
+     * @param {number|string} [value]
+     *        CSS value to set the `Player`'s height to.
+     *
+     * @return {number|undefined}
+     *         - The current height of the `Player` when getting.
+     *         - Nothing when setting
+     */
+    height(value) {
+      return this.dimension('height', value);
+    }
+
+    /**
+     * A getter/setter for the `Player`'s width & height.
+     *
+     * @param {string} dimension
+     *        This string can be:
+     *        - 'width'
+     *        - 'height'
+     *
+     * @param {number|string} [value]
+     *        Value for dimension specified in the first argument.
+     *
+     * @return {number}
+     *         The dimension arguments value when getting (width/height).
+     */
+    dimension(dimension, value) {
+      const privDimension = dimension + '_';
+      if (value === undefined) {
+        return this[privDimension] || 0;
+      }
+      if (value === '' || value === 'auto') {
+        // If an empty string is given, reset the dimension to be automatic
+        this[privDimension] = undefined;
+        this.updateStyleEl_();
+        return;
+      }
+      const parsedVal = parseFloat(value);
+      if (isNaN(parsedVal)) {
+        log.error(`Improper value "${value}" supplied for for ${dimension}`);
+        return;
+      }
+      this[privDimension] = parsedVal;
+      this.updateStyleEl_();
+    }
+
+    /**
+     * A getter/setter/toggler for the vjs-fluid `className` on the `Player`.
+     *
+     * Turning this on will turn off fill mode.
+     *
+     * @param {boolean} [bool]
+     *        - A value of true adds the class.
+     *        - A value of false removes the class.
+     *        - No value will be a getter.
+     *
+     * @return {boolean|undefined}
+     *         - The value of fluid when getting.
+     *         - `undefined` when setting.
+     */
+    fluid(bool) {
+      if (bool === undefined) {
+        return !!this.fluid_;
+      }
+      this.fluid_ = !!bool;
+      if (isEvented(this)) {
+        this.off(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+      }
+      if (bool) {
+        this.addClass('vjs-fluid');
+        this.fill(false);
+        addEventedCallback(this, () => {
+          this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+        });
+      } else {
+        this.removeClass('vjs-fluid');
+      }
+      this.updateStyleEl_();
+    }
+
+    /**
+     * A getter/setter/toggler for the vjs-fill `className` on the `Player`.
+     *
+     * Turning this on will turn off fluid mode.
+     *
+     * @param {boolean} [bool]
+     *        - A value of true adds the class.
+     *        - A value of false removes the class.
+     *        - No value will be a getter.
+     *
+     * @return {boolean|undefined}
+     *         - The value of fluid when getting.
+     *         - `undefined` when setting.
+     */
+    fill(bool) {
+      if (bool === undefined) {
+        return !!this.fill_;
+      }
+      this.fill_ = !!bool;
+      if (bool) {
+        this.addClass('vjs-fill');
+        this.fluid(false);
+      } else {
+        this.removeClass('vjs-fill');
+      }
+    }
+
+    /**
+     * Get/Set the aspect ratio
+     *
+     * @param {string} [ratio]
+     *        Aspect ratio for player
+     *
+     * @return {string|undefined}
+     *         returns the current aspect ratio when getting
+     */
+
+    /**
+     * A getter/setter for the `Player`'s aspect ratio.
+     *
+     * @param {string} [ratio]
+     *        The value to set the `Player`'s aspect ratio to.
+     *
+     * @return {string|undefined}
+     *         - The current aspect ratio of the `Player` when getting.
+     *         - undefined when setting
+     */
+    aspectRatio(ratio) {
+      if (ratio === undefined) {
+        return this.aspectRatio_;
+      }
+
+      // Check for width:height format
+      if (!/^\d+\:\d+$/.test(ratio)) {
+        throw new Error('Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.');
+      }
+      this.aspectRatio_ = ratio;
+
+      // We're assuming if you set an aspect ratio you want fluid mode,
+      // because in fixed mode you could calculate width and height yourself.
+      this.fluid(true);
+      this.updateStyleEl_();
+    }
+
+    /**
+     * Update styles of the `Player` element (height, width and aspect ratio).
+     *
+     * @private
+     * @listens Tech#loadedmetadata
+     */
+    updateStyleEl_() {
+      if (window.VIDEOJS_NO_DYNAMIC_STYLE === true) {
+        const width = typeof this.width_ === 'number' ? this.width_ : this.options_.width;
+        const height = typeof this.height_ === 'number' ? this.height_ : this.options_.height;
+        const techEl = this.tech_ && this.tech_.el();
+        if (techEl) {
+          if (width >= 0) {
+            techEl.width = width;
+          }
+          if (height >= 0) {
+            techEl.height = height;
+          }
+        }
+        return;
+      }
+      let width;
+      let height;
+      let aspectRatio;
+      let idClass;
+
+      // The aspect ratio is either used directly or to calculate width and height.
+      if (this.aspectRatio_ !== undefined && this.aspectRatio_ !== 'auto') {
+        // Use any aspectRatio that's been specifically set
+        aspectRatio = this.aspectRatio_;
+      } else if (this.videoWidth() > 0) {
+        // Otherwise try to get the aspect ratio from the video metadata
+        aspectRatio = this.videoWidth() + ':' + this.videoHeight();
+      } else {
+        // Or use a default. The video element's is 2:1, but 16:9 is more common.
+        aspectRatio = '16:9';
+      }
+
+      // Get the ratio as a decimal we can use to calculate dimensions
+      const ratioParts = aspectRatio.split(':');
+      const ratioMultiplier = ratioParts[1] / ratioParts[0];
+      if (this.width_ !== undefined) {
+        // Use any width that's been specifically set
+        width = this.width_;
+      } else if (this.height_ !== undefined) {
+        // Or calculate the width from the aspect ratio if a height has been set
+        width = this.height_ / ratioMultiplier;
+      } else {
+        // Or use the video's metadata, or use the video el's default of 300
+        width = this.videoWidth() || 300;
+      }
+      if (this.height_ !== undefined) {
+        // Use any height that's been specifically set
+        height = this.height_;
+      } else {
+        // Otherwise calculate the height from the ratio and the width
+        height = width * ratioMultiplier;
+      }
+
+      // Ensure the CSS class is valid by starting with an alpha character
+      if (/^[^a-zA-Z]/.test(this.id())) {
+        idClass = 'dimensions-' + this.id();
+      } else {
+        idClass = this.id() + '-dimensions';
+      }
+
+      // Ensure the right class is still on the player for the style element
+      this.addClass(idClass);
+      setTextContent(this.styleEl_, `
+      .${idClass} {
+        width: ${width}px;
+        height: ${height}px;
+      }
+
+      .${idClass}.vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: ${ratioMultiplier * 100}%;
+      }
+    `);
+    }
+
+    /**
+     * Load/Create an instance of playback {@link Tech} including element
+     * and API methods. Then append the `Tech` element in `Player` as a child.
+     *
+     * @param {string} techName
+     *        name of the playback technology
+     *
+     * @param {string} source
+     *        video source
+     *
+     * @private
+     */
+    loadTech_(techName, source) {
+      // Pause and remove current playback technology
+      if (this.tech_) {
+        this.unloadTech_();
+      }
+      const titleTechName = toTitleCase(techName);
+      const camelTechName = techName.charAt(0).toLowerCase() + techName.slice(1);
+
+      // get rid of the HTML5 video tag as soon as we are using another tech
+      if (titleTechName !== 'Html5' && this.tag) {
+        Tech.getTech('Html5').disposeMediaElement(this.tag);
+        this.tag.player = null;
+        this.tag = null;
+      }
+      this.techName_ = titleTechName;
+
+      // Turn off API access because we're loading a new tech that might load asynchronously
+      this.isReady_ = false;
+      let autoplay = this.autoplay();
+
+      // if autoplay is a string (or `true` with normalizeAutoplay: true) we pass false to the tech
+      // because the player is going to handle autoplay on `loadstart`
+      if (typeof this.autoplay() === 'string' || this.autoplay() === true && this.options_.normalizeAutoplay) {
+        autoplay = false;
+      }
+
+      // Grab tech-specific options from player options and add source and parent element to use.
+      const techOptions = {
+        source,
+        autoplay,
+        'nativeControlsForTouch': this.options_.nativeControlsForTouch,
+        'playerId': this.id(),
+        'techId': `${this.id()}_${camelTechName}_api`,
+        'playsinline': this.options_.playsinline,
+        'preload': this.options_.preload,
+        'loop': this.options_.loop,
+        'disablePictureInPicture': this.options_.disablePictureInPicture,
+        'muted': this.options_.muted,
+        'poster': this.poster(),
+        'language': this.language(),
+        'playerElIngest': this.playerElIngest_ || false,
+        'vtt.js': this.options_['vtt.js'],
+        'canOverridePoster': !!this.options_.techCanOverridePoster,
+        'enableSourceset': this.options_.enableSourceset
+      };
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        techOptions[props.getterName] = this[props.privateName];
+      });
+      Object.assign(techOptions, this.options_[titleTechName]);
+      Object.assign(techOptions, this.options_[camelTechName]);
+      Object.assign(techOptions, this.options_[techName.toLowerCase()]);
+      if (this.tag) {
+        techOptions.tag = this.tag;
+      }
+      if (source && source.src === this.cache_.src && this.cache_.currentTime > 0) {
+        techOptions.startTime = this.cache_.currentTime;
+      }
+
+      // Initialize tech instance
+      const TechClass = Tech.getTech(techName);
+      if (!TechClass) {
+        throw new Error(`No Tech named '${titleTechName}' exists! '${titleTechName}' should be registered using videojs.registerTech()'`);
+      }
+      this.tech_ = new TechClass(techOptions);
+
+      // player.triggerReady is always async, so don't need this to be async
+      this.tech_.ready(bind_(this, this.handleTechReady_), true);
+      textTrackConverter.jsonToTextTracks(this.textTracksJson_ || [], this.tech_);
+
+      // Listen to all HTML5-defined events and trigger them on the player
+      TECH_EVENTS_RETRIGGER.forEach(event => {
+        this.on(this.tech_, event, e => this[`handleTech${toTitleCase(event)}_`](e));
+      });
+      Object.keys(TECH_EVENTS_QUEUE).forEach(event => {
+        this.on(this.tech_, event, eventObj => {
+          if (this.tech_.playbackRate() === 0 && this.tech_.seeking()) {
+            this.queuedCallbacks_.push({
+              callback: this[`handleTech${TECH_EVENTS_QUEUE[event]}_`].bind(this),
+              event: eventObj
+            });
+            return;
+          }
+          this[`handleTech${TECH_EVENTS_QUEUE[event]}_`](eventObj);
+        });
+      });
+      this.on(this.tech_, 'loadstart', e => this.handleTechLoadStart_(e));
+      this.on(this.tech_, 'sourceset', e => this.handleTechSourceset_(e));
+      this.on(this.tech_, 'waiting', e => this.handleTechWaiting_(e));
+      this.on(this.tech_, 'ended', e => this.handleTechEnded_(e));
+      this.on(this.tech_, 'seeking', e => this.handleTechSeeking_(e));
+      this.on(this.tech_, 'play', e => this.handleTechPlay_(e));
+      this.on(this.tech_, 'pause', e => this.handleTechPause_(e));
+      this.on(this.tech_, 'durationchange', e => this.handleTechDurationChange_(e));
+      this.on(this.tech_, 'fullscreenchange', (e, data) => this.handleTechFullscreenChange_(e, data));
+      this.on(this.tech_, 'fullscreenerror', (e, err) => this.handleTechFullscreenError_(e, err));
+      this.on(this.tech_, 'enterpictureinpicture', e => this.handleTechEnterPictureInPicture_(e));
+      this.on(this.tech_, 'leavepictureinpicture', e => this.handleTechLeavePictureInPicture_(e));
+      this.on(this.tech_, 'error', e => this.handleTechError_(e));
+      this.on(this.tech_, 'posterchange', e => this.handleTechPosterChange_(e));
+      this.on(this.tech_, 'textdata', e => this.handleTechTextData_(e));
+      this.on(this.tech_, 'ratechange', e => this.handleTechRateChange_(e));
+      this.on(this.tech_, 'loadedmetadata', this.boundUpdateStyleEl_);
+      this.usingNativeControls(this.techGet_('controls'));
+      if (this.controls() && !this.usingNativeControls()) {
+        this.addTechControlsListeners_();
+      }
+
+      // Add the tech element in the DOM if it was not already there
+      // Make sure to not insert the original video element if using Html5
+      if (this.tech_.el().parentNode !== this.el() && (titleTechName !== 'Html5' || !this.tag)) {
+        prependTo(this.tech_.el(), this.el());
+      }
+
+      // Get rid of the original video tag reference after the first tech is loaded
+      if (this.tag) {
+        this.tag.player = null;
+        this.tag = null;
+      }
+    }
+
+    /**
+     * Unload and dispose of the current playback {@link Tech}.
+     *
+     * @private
+     */
+    unloadTech_() {
+      // Save the current text tracks so that we can reuse the same text tracks with the next tech
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        this[props.privateName] = this[props.getterName]();
+      });
+      this.textTracksJson_ = textTrackConverter.textTracksToJson(this.tech_);
+      this.isReady_ = false;
+      this.tech_.dispose();
+      this.tech_ = false;
+      if (this.isPosterFromTech_) {
+        this.poster_ = '';
+        this.trigger('posterchange');
+      }
+      this.isPosterFromTech_ = false;
+    }
+
+    /**
+     * Return a reference to the current {@link Tech}.
+     * It will print a warning by default about the danger of using the tech directly
+     * but any argument that is passed in will silence the warning.
+     *
+     * @param {*} [safety]
+     *        Anything passed in to silence the warning
+     *
+     * @return {Tech}
+     *         The Tech
+     */
+    tech(safety) {
+      if (safety === undefined) {
+        log.warn('Using the tech directly can be dangerous. I hope you know what you\'re doing.\n' + 'See https://github.com/videojs/video.js/issues/2617 for more info.\n');
+      }
+      return this.tech_;
+    }
+
+    /**
+     * An object that contains Video.js version.
+     *
+     * @typedef {Object} PlayerVersion
+     *
+     * @property {string} 'video.js' - Video.js version
+     */
+
+    /**
+     * Returns an object with Video.js version.
+     *
+     * @return {PlayerVersion}
+     *          An object with Video.js version.
+     */
+    version() {
+      return {
+        'video.js': version
+      };
+    }
+
+    /**
+     * Set up click and touch listeners for the playback element
+     *
+     * - On desktops: a click on the video itself will toggle playback
+     * - On mobile devices: a click on the video toggles controls
+     *   which is done by toggling the user state between active and
+     *   inactive
+     * - A tap can signal that a user has become active or has become inactive
+     *   e.g. a quick tap on an iPhone movie should reveal the controls. Another
+     *   quick tap should hide them again (signaling the user is in an inactive
+     *   viewing state)
+     * - In addition to this, we still want the user to be considered inactive after
+     *   a few seconds of inactivity.
+     *
+     * > Note: the only part of iOS interaction we can't mimic with this setup
+     * is a touch and hold on the video element counting as activity in order to
+     * keep the controls showing, but that shouldn't be an issue. A touch and hold
+     * on any controls will still keep the user active
+     *
+     * @private
+     */
+    addTechControlsListeners_() {
+      // Make sure to remove all the previous listeners in case we are called multiple times.
+      this.removeTechControlsListeners_();
+      this.on(this.tech_, 'click', this.boundHandleTechClick_);
+      this.on(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
+
+      // If the controls were hidden we don't want that to change without a tap event
+      // so we'll check if the controls were already showing before reporting user
+      // activity
+      this.on(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+      this.on(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+      this.on(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+
+      // The tap listener needs to come after the touchend listener because the tap
+      // listener cancels out any reportedUserActivity when setting userActive(false)
+      this.on(this.tech_, 'tap', this.boundHandleTechTap_);
+    }
+
+    /**
+     * Remove the listeners used for click and tap controls. This is needed for
+     * toggling to controls disabled, where a tap/touch should do nothing.
+     *
+     * @private
+     */
+    removeTechControlsListeners_() {
+      // We don't want to just use `this.off()` because there might be other needed
+      // listeners added by techs that extend this.
+      this.off(this.tech_, 'tap', this.boundHandleTechTap_);
+      this.off(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+      this.off(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+      this.off(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+      this.off(this.tech_, 'click', this.boundHandleTechClick_);
+      this.off(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
+    }
+
+    /**
+     * Player waits for the tech to be ready
+     *
+     * @private
+     */
+    handleTechReady_() {
+      this.triggerReady();
+
+      // Keep the same volume as before
+      if (this.cache_.volume) {
+        this.techCall_('setVolume', this.cache_.volume);
+      }
+
+      // Look if the tech found a higher resolution poster while loading
+      this.handleTechPosterChange_();
+
+      // Update the duration if available
+      this.handleTechDurationChange_();
+    }
+
+    /**
+     * Retrigger the `loadstart` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#loadstart
+     * @listens Tech#loadstart
+     * @private
+     */
+    handleTechLoadStart_() {
+      // TODO: Update to use `emptied` event instead. See #1277.
+
+      this.removeClass('vjs-ended', 'vjs-seeking');
+
+      // reset the error state
+      this.error(null);
+
+      // Update the duration
+      this.handleTechDurationChange_();
+      if (!this.paused()) {
+        /**
+         * Fired when the user agent begins looking for media data
+         *
+         * @event Player#loadstart
+         * @type {Event}
+         */
+        this.trigger('loadstart');
+      } else {
+        // reset the hasStarted state
+        this.hasStarted(false);
+        this.trigger('loadstart');
+      }
+
+      // autoplay happens after loadstart for the browser,
+      // so we mimic that behavior
+      this.manualAutoplay_(this.autoplay() === true && this.options_.normalizeAutoplay ? 'play' : this.autoplay());
+    }
+
+    /**
+     * Handle autoplay string values, rather than the typical boolean
+     * values that should be handled by the tech. Note that this is not
+     * part of any specification. Valid values and what they do can be
+     * found on the autoplay getter at Player#autoplay()
+     */
+    manualAutoplay_(type) {
+      if (!this.tech_ || typeof type !== 'string') {
+        return;
+      }
+
+      // Save original muted() value, set muted to true, and attempt to play().
+      // On promise rejection, restore muted from saved value
+      const resolveMuted = () => {
+        const previouslyMuted = this.muted();
+        this.muted(true);
+        const restoreMuted = () => {
+          this.muted(previouslyMuted);
+        };
+
+        // restore muted on play terminatation
+        this.playTerminatedQueue_.push(restoreMuted);
+        const mutedPromise = this.play();
+        if (!isPromise(mutedPromise)) {
+          return;
+        }
+        return mutedPromise.catch(err => {
+          restoreMuted();
+          throw new Error(`Rejection at manualAutoplay. Restoring muted value. ${err ? err : ''}`);
+        });
+      };
+      let promise;
+
+      // if muted defaults to true
+      // the only thing we can do is call play
+      if (type === 'any' && !this.muted()) {
+        promise = this.play();
+        if (isPromise(promise)) {
+          promise = promise.catch(resolveMuted);
+        }
+      } else if (type === 'muted' && !this.muted()) {
+        promise = resolveMuted();
+      } else {
+        promise = this.play();
+      }
+      if (!isPromise(promise)) {
+        return;
+      }
+      return promise.then(() => {
+        this.trigger({
+          type: 'autoplay-success',
+          autoplay: type
+        });
+      }).catch(() => {
+        this.trigger({
+          type: 'autoplay-failure',
+          autoplay: type
+        });
+      });
+    }
+
+    /**
+     * Update the internal source caches so that we return the correct source from
+     * `src()`, `currentSource()`, and `currentSources()`.
+     *
+     * > Note: `currentSources` will not be updated if the source that is passed in exists
+     *         in the current `currentSources` cache.
+     *
+     *
+     * @param {Tech~SourceObject} srcObj
+     *        A string or object source to update our caches to.
+     */
+    updateSourceCaches_(srcObj = '') {
+      let src = srcObj;
+      let type = '';
+      if (typeof src !== 'string') {
+        src = srcObj.src;
+        type = srcObj.type;
+      }
+
+      // make sure all the caches are set to default values
+      // to prevent null checking
+      this.cache_.source = this.cache_.source || {};
+      this.cache_.sources = this.cache_.sources || [];
+
+      // try to get the type of the src that was passed in
+      if (src && !type) {
+        type = findMimetype(this, src);
+      }
+
+      // update `currentSource` cache always
+      this.cache_.source = merge({}, srcObj, {
+        src,
+        type
+      });
+      const matchingSources = this.cache_.sources.filter(s => s.src && s.src === src);
+      const sourceElSources = [];
+      const sourceEls = this.$$('source');
+      const matchingSourceEls = [];
+      for (let i = 0; i < sourceEls.length; i++) {
+        const sourceObj = getAttributes(sourceEls[i]);
+        sourceElSources.push(sourceObj);
+        if (sourceObj.src && sourceObj.src === src) {
+          matchingSourceEls.push(sourceObj.src);
+        }
+      }
+
+      // if we have matching source els but not matching sources
+      // the current source cache is not up to date
+      if (matchingSourceEls.length && !matchingSources.length) {
+        this.cache_.sources = sourceElSources;
+        // if we don't have matching source or source els set the
+        // sources cache to the `currentSource` cache
+      } else if (!matchingSources.length) {
+        this.cache_.sources = [this.cache_.source];
+      }
+
+      // update the tech `src` cache
+      this.cache_.src = src;
+    }
+
+    /**
+     * *EXPERIMENTAL* Fired when the source is set or changed on the {@link Tech}
+     * causing the media element to reload.
+     *
+     * It will fire for the initial source and each subsequent source.
+     * This event is a custom event from Video.js and is triggered by the {@link Tech}.
+     *
+     * The event object for this event contains a `src` property that will contain the source
+     * that was available when the event was triggered. This is generally only necessary if Video.js
+     * is switching techs while the source was being changed.
+     *
+     * It is also fired when `load` is called on the player (or media element)
+     * because the {@link https://html.spec.whatwg.org/multipage/media.html#dom-media-load|specification for `load`}
+     * says that the resource selection algorithm needs to be aborted and restarted.
+     * In this case, it is very likely that the `src` property will be set to the
+     * empty string `""` to indicate we do not know what the source will be but
+     * that it is changing.
+     *
+     * *This event is currently still experimental and may change in minor releases.*
+     * __To use this, pass `enableSourceset` option to the player.__
+     *
+     * @event Player#sourceset
+     * @type {Event}
+     * @prop {string} src
+     *                The source url available when the `sourceset` was triggered.
+     *                It will be an empty string if we cannot know what the source is
+     *                but know that the source will change.
+     */
+    /**
+     * Retrigger the `sourceset` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#sourceset
+     * @listens Tech#sourceset
+     * @private
+     */
+    handleTechSourceset_(event) {
+      // only update the source cache when the source
+      // was not updated using the player api
+      if (!this.changingSrc_) {
+        let updateSourceCaches = src => this.updateSourceCaches_(src);
+        const playerSrc = this.currentSource().src;
+        const eventSrc = event.src;
+
+        // if we have a playerSrc that is not a blob, and a tech src that is a blob
+        if (playerSrc && !/^blob:/.test(playerSrc) && /^blob:/.test(eventSrc)) {
+          // if both the tech source and the player source were updated we assume
+          // something like @videojs/http-streaming did the sourceset and skip updating the source cache.
+          if (!this.lastSource_ || this.lastSource_.tech !== eventSrc && this.lastSource_.player !== playerSrc) {
+            updateSourceCaches = () => {};
+          }
+        }
+
+        // update the source to the initial source right away
+        // in some cases this will be empty string
+        updateSourceCaches(eventSrc);
+
+        // if the `sourceset` `src` was an empty string
+        // wait for a `loadstart` to update the cache to `currentSrc`.
+        // If a sourceset happens before a `loadstart`, we reset the state
+        if (!event.src) {
+          this.tech_.any(['sourceset', 'loadstart'], e => {
+            // if a sourceset happens before a `loadstart` there
+            // is nothing to do as this `handleTechSourceset_`
+            // will be called again and this will be handled there.
+            if (e.type === 'sourceset') {
+              return;
+            }
+            const techSrc = this.techGet_('currentSrc');
+            this.lastSource_.tech = techSrc;
+            this.updateSourceCaches_(techSrc);
+          });
+        }
+      }
+      this.lastSource_ = {
+        player: this.currentSource().src,
+        tech: event.src
+      };
+      this.trigger({
+        src: event.src,
+        type: 'sourceset'
+      });
+    }
+
+    /**
+     * Add/remove the vjs-has-started class
+     *
+     *
+     * @param {boolean} request
+     *        - true: adds the class
+     *        - false: remove the class
+     *
+     * @return {boolean}
+     *         the boolean value of hasStarted_
+     */
+    hasStarted(request) {
+      if (request === undefined) {
+        // act as getter, if we have no request to change
+        return this.hasStarted_;
+      }
+      if (request === this.hasStarted_) {
+        return;
+      }
+      this.hasStarted_ = request;
+      if (this.hasStarted_) {
+        this.addClass('vjs-has-started');
+      } else {
+        this.removeClass('vjs-has-started');
+      }
+    }
+
+    /**
+     * Fired whenever the media begins or resumes playback
+     *
+     * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play}
+     * @fires Player#play
+     * @listens Tech#play
+     * @private
+     */
+    handleTechPlay_() {
+      this.removeClass('vjs-ended', 'vjs-paused');
+      this.addClass('vjs-playing');
+
+      // hide the poster when the user hits play
+      this.hasStarted(true);
+      /**
+       * Triggered whenever an {@link Tech#play} event happens. Indicates that
+       * playback has started or resumed.
+       *
+       * @event Player#play
+       * @type {Event}
+       */
+      this.trigger('play');
+    }
+
+    /**
+     * Retrigger the `ratechange` event that was triggered by the {@link Tech}.
+     *
+     * If there were any events queued while the playback rate was zero, fire
+     * those events now.
+     *
+     * @private
+     * @method Player#handleTechRateChange_
+     * @fires Player#ratechange
+     * @listens Tech#ratechange
+     */
+    handleTechRateChange_() {
+      if (this.tech_.playbackRate() > 0 && this.cache_.lastPlaybackRate === 0) {
+        this.queuedCallbacks_.forEach(queued => queued.callback(queued.event));
+        this.queuedCallbacks_ = [];
+      }
+      this.cache_.lastPlaybackRate = this.tech_.playbackRate();
+      /**
+       * Fires when the playing speed of the audio/video is changed
+       *
+       * @event Player#ratechange
+       * @type {event}
+       */
+      this.trigger('ratechange');
+    }
+
+    /**
+     * Retrigger the `waiting` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#waiting
+     * @listens Tech#waiting
+     * @private
+     */
+    handleTechWaiting_() {
+      this.addClass('vjs-waiting');
+      /**
+       * A readyState change on the DOM element has caused playback to stop.
+       *
+       * @event Player#waiting
+       * @type {Event}
+       */
+      this.trigger('waiting');
+
+      // Browsers may emit a timeupdate event after a waiting event. In order to prevent
+      // premature removal of the waiting class, wait for the time to change.
+      const timeWhenWaiting = this.currentTime();
+      const timeUpdateListener = () => {
+        if (timeWhenWaiting !== this.currentTime()) {
+          this.removeClass('vjs-waiting');
+          this.off('timeupdate', timeUpdateListener);
+        }
+      };
+      this.on('timeupdate', timeUpdateListener);
+    }
+
+    /**
+     * Retrigger the `canplay` event that was triggered by the {@link Tech}.
+     * > Note: This is not consistent between browsers. See #1351
+     *
+     * @fires Player#canplay
+     * @listens Tech#canplay
+     * @private
+     */
+    handleTechCanPlay_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media has a readyState of HAVE_FUTURE_DATA or greater.
+       *
+       * @event Player#canplay
+       * @type {Event}
+       */
+      this.trigger('canplay');
+    }
+
+    /**
+     * Retrigger the `canplaythrough` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#canplaythrough
+     * @listens Tech#canplaythrough
+     * @private
+     */
+    handleTechCanPlayThrough_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media has a readyState of HAVE_ENOUGH_DATA or greater. This means that the
+       * entire media file can be played without buffering.
+       *
+       * @event Player#canplaythrough
+       * @type {Event}
+       */
+      this.trigger('canplaythrough');
+    }
+
+    /**
+     * Retrigger the `playing` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#playing
+     * @listens Tech#playing
+     * @private
+     */
+    handleTechPlaying_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media is no longer blocked from playback, and has started playing.
+       *
+       * @event Player#playing
+       * @type {Event}
+       */
+      this.trigger('playing');
+    }
+
+    /**
+     * Retrigger the `seeking` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#seeking
+     * @listens Tech#seeking
+     * @private
+     */
+    handleTechSeeking_() {
+      this.addClass('vjs-seeking');
+      /**
+       * Fired whenever the player is jumping to a new time
+       *
+       * @event Player#seeking
+       * @type {Event}
+       */
+      this.trigger('seeking');
+    }
+
+    /**
+     * Retrigger the `seeked` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#seeked
+     * @listens Tech#seeked
+     * @private
+     */
+    handleTechSeeked_() {
+      this.removeClass('vjs-seeking', 'vjs-ended');
+      /**
+       * Fired when the player has finished jumping to a new time
+       *
+       * @event Player#seeked
+       * @type {Event}
+       */
+      this.trigger('seeked');
+    }
+
+    /**
+     * Retrigger the `pause` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#pause
+     * @listens Tech#pause
+     * @private
+     */
+    handleTechPause_() {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      /**
+       * Fired whenever the media has been paused
+       *
+       * @event Player#pause
+       * @type {Event}
+       */
+      this.trigger('pause');
+    }
+
+    /**
+     * Retrigger the `ended` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#ended
+     * @listens Tech#ended
+     * @private
+     */
+    handleTechEnded_() {
+      this.addClass('vjs-ended');
+      this.removeClass('vjs-waiting');
+      if (this.options_.loop) {
+        this.currentTime(0);
+        this.play();
+      } else if (!this.paused()) {
+        this.pause();
+      }
+
+      /**
+       * Fired when the end of the media resource is reached (currentTime == duration)
+       *
+       * @event Player#ended
+       * @type {Event}
+       */
+      this.trigger('ended');
+    }
+
+    /**
+     * Fired when the duration of the media resource is first known or changed
+     *
+     * @listens Tech#durationchange
+     * @private
+     */
+    handleTechDurationChange_() {
+      this.duration(this.techGet_('duration'));
+    }
+
+    /**
+     * Handle a click on the media element to play/pause
+     *
+     * @param {Event} event
+     *        the event that caused this function to trigger
+     *
+     * @listens Tech#click
+     * @private
+     */
+    handleTechClick_(event) {
+      // When controls are disabled a click should not toggle playback because
+      // the click is considered a control
+      if (!this.controls_) {
+        return;
+      }
+      if (this.options_ === undefined || this.options_.userActions === undefined || this.options_.userActions.click === undefined || this.options_.userActions.click !== false) {
+        if (this.options_ !== undefined && this.options_.userActions !== undefined && typeof this.options_.userActions.click === 'function') {
+          this.options_.userActions.click.call(this, event);
+        } else if (this.paused()) {
+          silencePromise(this.play());
+        } else {
+          this.pause();
+        }
+      }
+    }
+
+    /**
+     * Handle a double-click on the media element to enter/exit fullscreen
+     *
+     * @param {Event} event
+     *        the event that caused this function to trigger
+     *
+     * @listens Tech#dblclick
+     * @private
+     */
+    handleTechDoubleClick_(event) {
+      if (!this.controls_) {
+        return;
+      }
+
+      // we do not want to toggle fullscreen state
+      // when double-clicking inside a control bar or a modal
+      const inAllowedEls = Array.prototype.some.call(this.$$('.vjs-control-bar, .vjs-modal-dialog'), el => el.contains(event.target));
+      if (!inAllowedEls) {
+        /*
+         * options.userActions.doubleClick
+         *
+         * If `undefined` or `true`, double-click toggles fullscreen if controls are present
+         * Set to `false` to disable double-click handling
+         * Set to a function to substitute an external double-click handler
+         */
+        if (this.options_ === undefined || this.options_.userActions === undefined || this.options_.userActions.doubleClick === undefined || this.options_.userActions.doubleClick !== false) {
+          if (this.options_ !== undefined && this.options_.userActions !== undefined && typeof this.options_.userActions.doubleClick === 'function') {
+            this.options_.userActions.doubleClick.call(this, event);
+          } else if (this.isFullscreen()) {
+            this.exitFullscreen();
+          } else {
+            this.requestFullscreen();
+          }
+        }
+      }
+    }
+
+    /**
+     * Handle a tap on the media element. It will toggle the user
+     * activity state, which hides and shows the controls.
+     *
+     * @listens Tech#tap
+     * @private
+     */
+    handleTechTap_() {
+      this.userActive(!this.userActive());
+    }
+
+    /**
+     * Handle touch to start
+     *
+     * @listens Tech#touchstart
+     * @private
+     */
+    handleTechTouchStart_() {
+      this.userWasActive = this.userActive();
+    }
+
+    /**
+     * Handle touch to move
+     *
+     * @listens Tech#touchmove
+     * @private
+     */
+    handleTechTouchMove_() {
+      if (this.userWasActive) {
+        this.reportUserActivity();
+      }
+    }
+
+    /**
+     * Handle touch to end
+     *
+     * @param {Event} event
+     *        the touchend event that triggered
+     *        this function
+     *
+     * @listens Tech#touchend
+     * @private
+     */
+    handleTechTouchEnd_(event) {
+      // Stop the mouse events from also happening
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    }
+
+    /**
+     * @private
+     */
+    toggleFullscreenClass_() {
+      if (this.isFullscreen()) {
+        this.addClass('vjs-fullscreen');
+      } else {
+        this.removeClass('vjs-fullscreen');
+      }
+    }
+
+    /**
+     * when the document fschange event triggers it calls this
+     */
+    documentFullscreenChange_(e) {
+      const targetPlayer = e.target.player;
+
+      // if another player was fullscreen
+      // do a null check for targetPlayer because older firefox's would put document as e.target
+      if (targetPlayer && targetPlayer !== this) {
+        return;
+      }
+      const el = this.el();
+      let isFs = document[this.fsApi_.fullscreenElement] === el;
+      if (!isFs && el.matches) {
+        isFs = el.matches(':' + this.fsApi_.fullscreen);
+      }
+      this.isFullscreen(isFs);
+    }
+
+    /**
+     * Handle Tech Fullscreen Change
+     *
+     * @param {Event} event
+     *        the fullscreenchange event that triggered this function
+     *
+     * @param {Object} data
+     *        the data that was sent with the event
+     *
+     * @private
+     * @listens Tech#fullscreenchange
+     * @fires Player#fullscreenchange
+     */
+    handleTechFullscreenChange_(event, data) {
+      if (data) {
+        if (data.nativeIOSFullscreen) {
+          this.addClass('vjs-ios-native-fs');
+          this.tech_.one('webkitendfullscreen', () => {
+            this.removeClass('vjs-ios-native-fs');
+          });
+        }
+        this.isFullscreen(data.isFullscreen);
+      }
+    }
+    handleTechFullscreenError_(event, err) {
+      this.trigger('fullscreenerror', err);
+    }
+
+    /**
+     * @private
+     */
+    togglePictureInPictureClass_() {
+      if (this.isInPictureInPicture()) {
+        this.addClass('vjs-picture-in-picture');
+      } else {
+        this.removeClass('vjs-picture-in-picture');
+      }
+    }
+
+    /**
+     * Handle Tech Enter Picture-in-Picture.
+     *
+     * @param {Event} event
+     *        the enterpictureinpicture event that triggered this function
+     *
+     * @private
+     * @listens Tech#enterpictureinpicture
+     */
+    handleTechEnterPictureInPicture_(event) {
+      this.isInPictureInPicture(true);
+    }
+
+    /**
+     * Handle Tech Leave Picture-in-Picture.
+     *
+     * @param {Event} event
+     *        the leavepictureinpicture event that triggered this function
+     *
+     * @private
+     * @listens Tech#leavepictureinpicture
+     */
+    handleTechLeavePictureInPicture_(event) {
+      this.isInPictureInPicture(false);
+    }
+
+    /**
+     * Fires when an error occurred during the loading of an audio/video.
+     *
+     * @private
+     * @listens Tech#error
+     */
+    handleTechError_() {
+      const error = this.tech_.error();
+      if (error) {
+        this.error(error);
+      }
+    }
+
+    /**
+     * Retrigger the `textdata` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#textdata
+     * @listens Tech#textdata
+     * @private
+     */
+    handleTechTextData_() {
+      let data = null;
+      if (arguments.length > 1) {
+        data = arguments[1];
+      }
+
+      /**
+       * Fires when we get a textdata event from tech
+       *
+       * @event Player#textdata
+       * @type {Event}
+       */
+      this.trigger('textdata', data);
+    }
+
+    /**
+     * Get object for cached values.
+     *
+     * @return {Object}
+     *         get the current object cache
+     */
+    getCache() {
+      return this.cache_;
+    }
+
+    /**
+     * Resets the internal cache object.
+     *
+     * Using this function outside the player constructor or reset method may
+     * have unintended side-effects.
+     *
+     * @private
+     */
+    resetCache_() {
+      this.cache_ = {
+        // Right now, the currentTime is not _really_ cached because it is always
+        // retrieved from the tech (see: currentTime). However, for completeness,
+        // we set it to zero here to ensure that if we do start actually caching
+        // it, we reset it along with everything else.
+        currentTime: 0,
+        initTime: 0,
+        inactivityTimeout: this.options_.inactivityTimeout,
+        duration: NaN,
+        lastVolume: 1,
+        lastPlaybackRate: this.defaultPlaybackRate(),
+        media: null,
+        src: '',
+        source: {},
+        sources: [],
+        playbackRates: [],
+        volume: 1
+      };
+    }
+
+    /**
+     * Pass values to the playback tech
+     *
+     * @param {string} [method]
+     *        the method to call
+     *
+     * @param {Object} [arg]
+     *        the argument to pass
+     *
+     * @private
+     */
+    techCall_(method, arg) {
+      // If it's not ready yet, call method when it is
+
+      this.ready(function () {
+        if (method in allowedSetters) {
+          return set(this.middleware_, this.tech_, method, arg);
+        } else if (method in allowedMediators) {
+          return mediate(this.middleware_, this.tech_, method, arg);
+        }
+        try {
+          if (this.tech_) {
+            this.tech_[method](arg);
+          }
+        } catch (e) {
+          log(e);
+          throw e;
+        }
+      }, true);
+    }
+
+    /**
+     * Mediate attempt to call playback tech method
+     * and return the value of the method called.
+     *
+     * @param {string} method
+     *        Tech method
+     *
+     * @return {*}
+     *         Value returned by the tech method called, undefined if tech
+     *         is not ready or tech method is not present
+     *
+     * @private
+     */
+    techGet_(method) {
+      if (!this.tech_ || !this.tech_.isReady_) {
+        return;
+      }
+      if (method in allowedGetters) {
+        return get(this.middleware_, this.tech_, method);
+      } else if (method in allowedMediators) {
+        return mediate(this.middleware_, this.tech_, method);
+      }
+
+      // Log error when playback tech object is present but method
+      // is undefined or unavailable
+      try {
+        return this.tech_[method]();
+      } catch (e) {
+        // When building additional tech libs, an expected method may not be defined yet
+        if (this.tech_[method] === undefined) {
+          log(`Video.js: ${method} method not defined for ${this.techName_} playback technology.`, e);
+          throw e;
+        }
+
+        // When a method isn't available on the object it throws a TypeError
+        if (e.name === 'TypeError') {
+          log(`Video.js: ${method} unavailable on ${this.techName_} playback technology element.`, e);
+          this.tech_.isReady_ = false;
+          throw e;
+        }
+
+        // If error unknown, just log and throw
+        log(e);
+        throw e;
+      }
+    }
+
+    /**
+     * Attempt to begin playback at the first opportunity.
+     *
+     * @return {Promise|undefined}
+     *         Returns a promise if the browser supports Promises (or one
+     *         was passed in as an option). This promise will be resolved on
+     *         the return value of play. If this is undefined it will fulfill the
+     *         promise chain otherwise the promise chain will be fulfilled when
+     *         the promise from play is fulfilled.
+     */
+    play() {
+      return new Promise(resolve => {
+        this.play_(resolve);
+      });
+    }
+
+    /**
+     * The actual logic for play, takes a callback that will be resolved on the
+     * return value of play. This allows us to resolve to the play promise if there
+     * is one on modern browsers.
+     *
+     * @private
+     * @param {Function} [callback]
+     *        The callback that should be called when the techs play is actually called
+     */
+    play_(callback = silencePromise) {
+      this.playCallbacks_.push(callback);
+      const isSrcReady = Boolean(!this.changingSrc_ && (this.src() || this.currentSrc()));
+      const isSafariOrIOS = Boolean(IS_ANY_SAFARI || IS_IOS);
+
+      // treat calls to play_ somewhat like the `one` event function
+      if (this.waitToPlay_) {
+        this.off(['ready', 'loadstart'], this.waitToPlay_);
+        this.waitToPlay_ = null;
+      }
+
+      // if the player/tech is not ready or the src itself is not ready
+      // queue up a call to play on `ready` or `loadstart`
+      if (!this.isReady_ || !isSrcReady) {
+        this.waitToPlay_ = e => {
+          this.play_();
+        };
+        this.one(['ready', 'loadstart'], this.waitToPlay_);
+
+        // if we are in Safari, there is a high chance that loadstart will trigger after the gesture timeperiod
+        // in that case, we need to prime the video element by calling load so it'll be ready in time
+        if (!isSrcReady && isSafariOrIOS) {
+          this.load();
+        }
+        return;
+      }
+
+      // If the player/tech is ready and we have a source, we can attempt playback.
+      const val = this.techGet_('play');
+
+      // For native playback, reset the progress bar if we get a play call from a replay.
+      const isNativeReplay = isSafariOrIOS && this.hasClass('vjs-ended');
+      if (isNativeReplay) {
+        this.resetProgressBar_();
+      }
+      // play was terminated if the returned value is null
+      if (val === null) {
+        this.runPlayTerminatedQueue_();
+      } else {
+        this.runPlayCallbacks_(val);
+      }
+    }
+
+    /**
+     * These functions will be run when if play is terminated. If play
+     * runPlayCallbacks_ is run these function will not be run. This allows us
+     * to differentiate between a terminated play and an actual call to play.
+     */
+    runPlayTerminatedQueue_() {
+      const queue = this.playTerminatedQueue_.slice(0);
+      this.playTerminatedQueue_ = [];
+      queue.forEach(function (q) {
+        q();
+      });
+    }
+
+    /**
+     * When a callback to play is delayed we have to run these
+     * callbacks when play is actually called on the tech. This function
+     * runs the callbacks that were delayed and accepts the return value
+     * from the tech.
+     *
+     * @param {undefined|Promise} val
+     *        The return value from the tech.
+     */
+    runPlayCallbacks_(val) {
+      const callbacks = this.playCallbacks_.slice(0);
+      this.playCallbacks_ = [];
+      // clear play terminatedQueue since we finished a real play
+      this.playTerminatedQueue_ = [];
+      callbacks.forEach(function (cb) {
+        cb(val);
+      });
+    }
+
+    /**
+     * Pause the video playback
+     */
+    pause() {
+      this.techCall_('pause');
+    }
+
+    /**
+     * Check if the player is paused or has yet to play
+     *
+     * @return {boolean}
+     *         - false: if the media is currently playing
+     *         - true: if media is not currently playing
+     */
+    paused() {
+      // The initial state of paused should be true (in Safari it's actually false)
+      return this.techGet_('paused') === false ? false : true;
+    }
+
+    /**
+     * Get a TimeRange object representing the current ranges of time that the user
+     * has played.
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A time range object that represents all the increments of time that have
+     *         been played.
+     */
+    played() {
+      return this.techGet_('played') || createTimeRanges(0, 0);
+    }
+
+    /**
+     * Sets or returns whether or not the user is "scrubbing". Scrubbing is
+     * when the user has clicked the progress bar handle and is
+     * dragging it along the progress bar.
+     *
+     * @param {boolean} [isScrubbing]
+     *        whether the user is or is not scrubbing
+     *
+     * @return {boolean|undefined}
+     *         - The value of scrubbing when getting
+     *         - Nothing when setting
+     */
+    scrubbing(isScrubbing) {
+      if (typeof isScrubbing === 'undefined') {
+        return this.scrubbing_;
+      }
+      this.scrubbing_ = !!isScrubbing;
+      this.techCall_('setScrubbing', this.scrubbing_);
+      if (isScrubbing) {
+        this.addClass('vjs-scrubbing');
+      } else {
+        this.removeClass('vjs-scrubbing');
+      }
+    }
+
+    /**
+     * Get or set the current time (in seconds)
+     *
+     * @param {number|string} [seconds]
+     *        The time to seek to in seconds
+     *
+     * @return {number|undefined}
+     *         - the current time in seconds when getting
+     *         - Nothing when setting
+     */
+    currentTime(seconds) {
+      if (seconds === undefined) {
+        // cache last currentTime and return. default to 0 seconds
+        //
+        // Caching the currentTime is meant to prevent a massive amount of reads on the tech's
+        // currentTime when scrubbing, but may not provide much performance benefit after all.
+        // Should be tested. Also something has to read the actual current time or the cache will
+        // never get updated.
+        this.cache_.currentTime = this.techGet_('currentTime') || 0;
+        return this.cache_.currentTime;
+      }
+      if (seconds < 0) {
+        seconds = 0;
+      }
+      if (!this.isReady_ || this.changingSrc_ || !this.tech_ || !this.tech_.isReady_) {
+        this.cache_.initTime = seconds;
+        this.off('canplay', this.boundApplyInitTime_);
+        this.one('canplay', this.boundApplyInitTime_);
+        return;
+      }
+      this.techCall_('setCurrentTime', seconds);
+      this.cache_.initTime = 0;
+      if (isFinite(seconds)) {
+        this.cache_.currentTime = Number(seconds);
+      }
+    }
+
+    /**
+     * Apply the value of initTime stored in cache as currentTime.
+     *
+     * @private
+     */
+    applyInitTime_() {
+      this.currentTime(this.cache_.initTime);
+    }
+
+    /**
+     * Normally gets the length in time of the video in seconds;
+     * in all but the rarest use cases an argument will NOT be passed to the method
+     *
+     * > **NOTE**: The video must have started loading before the duration can be
+     * known, and depending on preload behaviour may not be known until the video starts
+     * playing.
+     *
+     * @fires Player#durationchange
+     *
+     * @param {number} [seconds]
+     *        The duration of the video to set in seconds
+     *
+     * @return {number|undefined}
+     *         - The duration of the video in seconds when getting
+     *         - Nothing when setting
+     */
+    duration(seconds) {
+      if (seconds === undefined) {
+        // return NaN if the duration is not known
+        return this.cache_.duration !== undefined ? this.cache_.duration : NaN;
+      }
+      seconds = parseFloat(seconds);
+
+      // Standardize on Infinity for signaling video is live
+      if (seconds < 0) {
+        seconds = Infinity;
+      }
+      if (seconds !== this.cache_.duration) {
+        // Cache the last set value for optimized scrubbing
+        this.cache_.duration = seconds;
+        if (seconds === Infinity) {
+          this.addClass('vjs-live');
+        } else {
+          this.removeClass('vjs-live');
+        }
+        if (!isNaN(seconds)) {
+          // Do not fire durationchange unless the duration value is known.
+          // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
+
+          /**
+           * @event Player#durationchange
+           * @type {Event}
+           */
+          this.trigger('durationchange');
+        }
+      }
+    }
+
+    /**
+     * Calculates how much time is left in the video. Not part
+     * of the native video API.
+     *
+     * @return {number}
+     *         The time remaining in seconds
+     */
+    remainingTime() {
+      return this.duration() - this.currentTime();
+    }
+
+    /**
+     * A remaining time function that is intended to be used when
+     * the time is to be displayed directly to the user.
+     *
+     * @return {number}
+     *         The rounded time remaining in seconds
+     */
+    remainingTimeDisplay() {
+      return Math.floor(this.duration()) - Math.floor(this.currentTime());
+    }
+
+    //
+    // Kind of like an array of portions of the video that have been downloaded.
+
+    /**
+     * Get a TimeRange object with an array of the times of the video
+     * that have been downloaded. If you just want the percent of the
+     * video that's been downloaded, use bufferedPercent.
+     *
+     * @see [Buffered Spec]{@link http://dev.w3.org/html5/spec/video.html#dom-media-buffered}
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A mock {@link TimeRanges} object (following HTML spec)
+     */
+    buffered() {
+      let buffered = this.techGet_('buffered');
+      if (!buffered || !buffered.length) {
+        buffered = createTimeRanges(0, 0);
+      }
+      return buffered;
+    }
+
+    /**
+     * Get the TimeRanges of the media that are currently available
+     * for seeking to.
+     *
+     * @see [Seekable Spec]{@link https://html.spec.whatwg.org/multipage/media.html#dom-media-seekable}
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A mock {@link TimeRanges} object (following HTML spec)
+     */
+    seekable() {
+      let seekable = this.techGet_('seekable');
+      if (!seekable || !seekable.length) {
+        seekable = createTimeRanges(0, 0);
+      }
+      return seekable;
+    }
+
+    /**
+     * Returns whether the player is in the "seeking" state.
+     *
+     * @return {boolean} True if the player is in the seeking state, false if not.
+     */
+    seeking() {
+      return this.techGet_('seeking');
+    }
+
+    /**
+     * Returns whether the player is in the "ended" state.
+     *
+     * @return {boolean} True if the player is in the ended state, false if not.
+     */
+    ended() {
+      return this.techGet_('ended');
+    }
+
+    /**
+     * Returns the current state of network activity for the element, from
+     * the codes in the list below.
+     * - NETWORK_EMPTY (numeric value 0)
+     *   The element has not yet been initialised. All attributes are in
+     *   their initial states.
+     * - NETWORK_IDLE (numeric value 1)
+     *   The element's resource selection algorithm is active and has
+     *   selected a resource, but it is not actually using the network at
+     *   this time.
+     * - NETWORK_LOADING (numeric value 2)
+     *   The user agent is actively trying to download data.
+     * - NETWORK_NO_SOURCE (numeric value 3)
+     *   The element's resource selection algorithm is active, but it has
+     *   not yet found a resource to use.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states
+     * @return {number} the current network activity state
+     */
+    networkState() {
+      return this.techGet_('networkState');
+    }
+
+    /**
+     * Returns a value that expresses the current state of the element
+     * with respect to rendering the current playback position, from the
+     * codes in the list below.
+     * - HAVE_NOTHING (numeric value 0)
+     *   No information regarding the media resource is available.
+     * - HAVE_METADATA (numeric value 1)
+     *   Enough of the resource has been obtained that the duration of the
+     *   resource is available.
+     * - HAVE_CURRENT_DATA (numeric value 2)
+     *   Data for the immediate current playback position is available.
+     * - HAVE_FUTURE_DATA (numeric value 3)
+     *   Data for the immediate current playback position is available, as
+     *   well as enough data for the user agent to advance the current
+     *   playback position in the direction of playback.
+     * - HAVE_ENOUGH_DATA (numeric value 4)
+     *   The user agent estimates that enough data is available for
+     *   playback to proceed uninterrupted.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate
+     * @return {number} the current playback rendering state
+     */
+    readyState() {
+      return this.techGet_('readyState');
+    }
+
+    /**
+     * Get the percent (as a decimal) of the video that's been downloaded.
+     * This method is not a part of the native HTML video API.
+     *
+     * @return {number}
+     *         A decimal between 0 and 1 representing the percent
+     *         that is buffered 0 being 0% and 1 being 100%
+     */
+    bufferedPercent() {
+      return bufferedPercent(this.buffered(), this.duration());
+    }
+
+    /**
+     * Get the ending time of the last buffered time range
+     * This is used in the progress bar to encapsulate all time ranges.
+     *
+     * @return {number}
+     *         The end of the last buffered time range
+     */
+    bufferedEnd() {
+      const buffered = this.buffered();
+      const duration = this.duration();
+      let end = buffered.end(buffered.length - 1);
+      if (end > duration) {
+        end = duration;
+      }
+      return end;
+    }
+
+    /**
+     * Get or set the current volume of the media
+     *
+     * @param  {number} [percentAsDecimal]
+     *         The new volume as a decimal percent:
+     *         - 0 is muted/0%/off
+     *         - 1.0 is 100%/full
+     *         - 0.5 is half volume or 50%
+     *
+     * @return {number|undefined}
+     *         The current volume as a percent when getting
+     */
+    volume(percentAsDecimal) {
+      let vol;
+      if (percentAsDecimal !== undefined) {
+        // Force value to between 0 and 1
+        vol = Math.max(0, Math.min(1, percentAsDecimal));
+        this.cache_.volume = vol;
+        this.techCall_('setVolume', vol);
+        if (vol > 0) {
+          this.lastVolume_(vol);
+        }
+        return;
+      }
+
+      // Default to 1 when returning current volume.
+      vol = parseFloat(this.techGet_('volume'));
+      return isNaN(vol) ? 1 : vol;
+    }
+
+    /**
+     * Get the current muted state, or turn mute on or off
+     *
+     * @param {boolean} [muted]
+     *        - true to mute
+     *        - false to unmute
+     *
+     * @return {boolean|undefined}
+     *         - true if mute is on and getting
+     *         - false if mute is off and getting
+     *         - nothing if setting
+     */
+    muted(muted) {
+      if (muted !== undefined) {
+        this.techCall_('setMuted', muted);
+        return;
+      }
+      return this.techGet_('muted') || false;
+    }
+
+    /**
+     * Get the current defaultMuted state, or turn defaultMuted on or off. defaultMuted
+     * indicates the state of muted on initial playback.
+     *
+     * ```js
+     *   var myPlayer = videojs('some-player-id');
+     *
+     *   myPlayer.src("http://www.example.com/path/to/video.mp4");
+     *
+     *   // get, should be false
+     *   console.log(myPlayer.defaultMuted());
+     *   // set to true
+     *   myPlayer.defaultMuted(true);
+     *   // get should be true
+     *   console.log(myPlayer.defaultMuted());
+     * ```
+     *
+     * @param {boolean} [defaultMuted]
+     *        - true to mute
+     *        - false to unmute
+     *
+     * @return {boolean|undefined}
+     *         - true if defaultMuted is on and getting
+     *         - false if defaultMuted is off and getting
+     *         - Nothing when setting
+     */
+    defaultMuted(defaultMuted) {
+      if (defaultMuted !== undefined) {
+        this.techCall_('setDefaultMuted', defaultMuted);
+      }
+      return this.techGet_('defaultMuted') || false;
+    }
+
+    /**
+     * Get the last volume, or set it
+     *
+     * @param  {number} [percentAsDecimal]
+     *         The new last volume as a decimal percent:
+     *         - 0 is muted/0%/off
+     *         - 1.0 is 100%/full
+     *         - 0.5 is half volume or 50%
+     *
+     * @return {number|undefined}
+     *         - The current value of lastVolume as a percent when getting
+     *         - Nothing when setting
+     *
+     * @private
+     */
+    lastVolume_(percentAsDecimal) {
+      if (percentAsDecimal !== undefined && percentAsDecimal !== 0) {
+        this.cache_.lastVolume = percentAsDecimal;
+        return;
+      }
+      return this.cache_.lastVolume;
+    }
+
+    /**
+     * Check if current tech can support native fullscreen
+     * (e.g. with built in controls like iOS)
+     *
+     * @return {boolean}
+     *         if native fullscreen is supported
+     */
+    supportsFullScreen() {
+      return this.techGet_('supportsFullScreen') || false;
+    }
+
+    /**
+     * Check if the player is in fullscreen mode or tell the player that it
+     * is or is not in fullscreen mode.
+     *
+     * > NOTE: As of the latest HTML5 spec, isFullscreen is no longer an official
+     * property and instead document.fullscreenElement is used. But isFullscreen is
+     * still a valuable property for internal player workings.
+     *
+     * @param  {boolean} [isFS]
+     *         Set the players current fullscreen state
+     *
+     * @return {boolean|undefined}
+     *         - true if fullscreen is on and getting
+     *         - false if fullscreen is off and getting
+     *         - Nothing when setting
+     */
+    isFullscreen(isFS) {
+      if (isFS !== undefined) {
+        const oldValue = this.isFullscreen_;
+        this.isFullscreen_ = Boolean(isFS);
+
+        // if we changed fullscreen state and we're in prefixed mode, trigger fullscreenchange
+        // this is the only place where we trigger fullscreenchange events for older browsers
+        // fullWindow mode is treated as a prefixed event and will get a fullscreenchange event as well
+        if (this.isFullscreen_ !== oldValue && this.fsApi_.prefixed) {
+          /**
+             * @event Player#fullscreenchange
+             * @type {Event}
+             */
+          this.trigger('fullscreenchange');
+        }
+        this.toggleFullscreenClass_();
+        return;
+      }
+      return this.isFullscreen_;
+    }
+
+    /**
+     * Increase the size of the video to full screen
+     * In some browsers, full screen is not supported natively, so it enters
+     * "full window mode", where the video fills the browser window.
+     * In browsers and devices that support native full screen, sometimes the
+     * browser's default controls will be shown, and not the Video.js custom skin.
+     * This includes most mobile devices (iOS, Android) and older versions of
+     * Safari.
+     *
+     * @param  {Object} [fullscreenOptions]
+     *         Override the player fullscreen options
+     *
+     * @fires Player#fullscreenchange
+     */
+    requestFullscreen(fullscreenOptions) {
+      if (this.isInPictureInPicture()) {
+        this.exitPictureInPicture();
+      }
+      const self = this;
+      return new Promise((resolve, reject) => {
+        function offHandler() {
+          self.off('fullscreenerror', errorHandler);
+          self.off('fullscreenchange', changeHandler);
+        }
+        function changeHandler() {
+          offHandler();
+          resolve();
+        }
+        function errorHandler(e, err) {
+          offHandler();
+          reject(err);
+        }
+        self.one('fullscreenchange', changeHandler);
+        self.one('fullscreenerror', errorHandler);
+        const promise = self.requestFullscreenHelper_(fullscreenOptions);
+        if (promise) {
+          promise.then(offHandler, offHandler);
+          promise.then(resolve, reject);
+        }
+      });
+    }
+    requestFullscreenHelper_(fullscreenOptions) {
+      let fsOptions;
+
+      // Only pass fullscreen options to requestFullscreen in spec-compliant browsers.
+      // Use defaults or player configured option unless passed directly to this method.
+      if (!this.fsApi_.prefixed) {
+        fsOptions = this.options_.fullscreen && this.options_.fullscreen.options || {};
+        if (fullscreenOptions !== undefined) {
+          fsOptions = fullscreenOptions;
+        }
+      }
+
+      // This method works as follows:
+      // 1. if a fullscreen api is available, use it
+      //   1. call requestFullscreen with potential options
+      //   2. if we got a promise from above, use it to update isFullscreen()
+      // 2. otherwise, if the tech supports fullscreen, call `enterFullScreen` on it.
+      //   This is particularly used for iPhone, older iPads, and non-safari browser on iOS.
+      // 3. otherwise, use "fullWindow" mode
+      if (this.fsApi_.requestFullscreen) {
+        const promise = this.el_[this.fsApi_.requestFullscreen](fsOptions);
+
+        // Even on browsers with promise support this may not return a promise
+        if (promise) {
+          promise.then(() => this.isFullscreen(true), () => this.isFullscreen(false));
+        }
+        return promise;
+      } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) {
+        // we can't take the video.js controls fullscreen but we can go fullscreen
+        // with native controls
+        this.techCall_('enterFullScreen');
+      } else {
+        // fullscreen isn't supported so we'll just stretch the video element to
+        // fill the viewport
+        this.enterFullWindow();
+      }
+    }
+
+    /**
+     * Return the video to its normal size after having been in full screen mode
+     *
+     * @fires Player#fullscreenchange
+     */
+    exitFullscreen() {
+      const self = this;
+      return new Promise((resolve, reject) => {
+        function offHandler() {
+          self.off('fullscreenerror', errorHandler);
+          self.off('fullscreenchange', changeHandler);
+        }
+        function changeHandler() {
+          offHandler();
+          resolve();
+        }
+        function errorHandler(e, err) {
+          offHandler();
+          reject(err);
+        }
+        self.one('fullscreenchange', changeHandler);
+        self.one('fullscreenerror', errorHandler);
+        const promise = self.exitFullscreenHelper_();
+        if (promise) {
+          promise.then(offHandler, offHandler);
+          // map the promise to our resolve/reject methods
+          promise.then(resolve, reject);
+        }
+      });
+    }
+    exitFullscreenHelper_() {
+      if (this.fsApi_.requestFullscreen) {
+        const promise = document[this.fsApi_.exitFullscreen]();
+
+        // Even on browsers with promise support this may not return a promise
+        if (promise) {
+          // we're splitting the promise here, so, we want to catch the
+          // potential error so that this chain doesn't have unhandled errors
+          silencePromise(promise.then(() => this.isFullscreen(false)));
+        }
+        return promise;
+      } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) {
+        this.techCall_('exitFullScreen');
+      } else {
+        this.exitFullWindow();
+      }
+    }
+
+    /**
+     * When fullscreen isn't supported we can stretch the
+     * video container to as wide as the browser will let us.
+     *
+     * @fires Player#enterFullWindow
+     */
+    enterFullWindow() {
+      this.isFullscreen(true);
+      this.isFullWindow = true;
+
+      // Storing original doc overflow value to return to when fullscreen is off
+      this.docOrigOverflow = document.documentElement.style.overflow;
+
+      // Add listener for esc key to exit fullscreen
+      on(document, 'keydown', this.boundFullWindowOnEscKey_);
+
+      // Hide any scroll bars
+      document.documentElement.style.overflow = 'hidden';
+
+      // Apply fullscreen styles
+      addClass(document.body, 'vjs-full-window');
+
+      /**
+       * @event Player#enterFullWindow
+       * @type {Event}
+       */
+      this.trigger('enterFullWindow');
+    }
+
+    /**
+     * Check for call to either exit full window or
+     * full screen on ESC key
+     *
+     * @param {string} event
+     *        Event to check for key press
+     */
+    fullWindowOnEscKey(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        if (this.isFullscreen() === true) {
+          if (!this.isFullWindow) {
+            this.exitFullscreen();
+          } else {
+            this.exitFullWindow();
+          }
+        }
+      }
+    }
+
+    /**
+     * Exit full window
+     *
+     * @fires Player#exitFullWindow
+     */
+    exitFullWindow() {
+      this.isFullscreen(false);
+      this.isFullWindow = false;
+      off(document, 'keydown', this.boundFullWindowOnEscKey_);
+
+      // Unhide scroll bars.
+      document.documentElement.style.overflow = this.docOrigOverflow;
+
+      // Remove fullscreen styles
+      removeClass(document.body, 'vjs-full-window');
+
+      // Resize the box, controller, and poster to original sizes
+      // this.positionAll();
+      /**
+       * @event Player#exitFullWindow
+       * @type {Event}
+       */
+      this.trigger('exitFullWindow');
+    }
+
+    /**
+     * Get or set disable Picture-in-Picture mode.
+     *
+     * @param {boolean} [value]
+     *                  - true will disable Picture-in-Picture mode
+     *                  - false will enable Picture-in-Picture mode
+     */
+    disablePictureInPicture(value) {
+      if (value === undefined) {
+        return this.techGet_('disablePictureInPicture');
+      }
+      this.techCall_('setDisablePictureInPicture', value);
+      this.options_.disablePictureInPicture = value;
+      this.trigger('disablepictureinpicturechanged');
+    }
+
+    /**
+     * Check if the player is in Picture-in-Picture mode or tell the player that it
+     * is or is not in Picture-in-Picture mode.
+     *
+     * @param  {boolean} [isPiP]
+     *         Set the players current Picture-in-Picture state
+     *
+     * @return {boolean|undefined}
+     *         - true if Picture-in-Picture is on and getting
+     *         - false if Picture-in-Picture is off and getting
+     *         - nothing if setting
+     */
+    isInPictureInPicture(isPiP) {
+      if (isPiP !== undefined) {
+        this.isInPictureInPicture_ = !!isPiP;
+        this.togglePictureInPictureClass_();
+        return;
+      }
+      return !!this.isInPictureInPicture_;
+    }
+
+    /**
+     * Create a floating video window always on top of other windows so that users may
+     * continue consuming media while they interact with other content sites, or
+     * applications on their device.
+     *
+     * This can use document picture-in-picture or element picture in picture
+     *
+     * Set `enableDocumentPictureInPicture` to `true` to use docPiP on a supported browser
+     * Else set `disablePictureInPicture` to `false` to disable elPiP on a supported browser
+     *
+     *
+     * @see [Spec]{@link https://w3c.github.io/picture-in-picture/}
+     * @see [Spec]{@link https://wicg.github.io/document-picture-in-picture/}
+     *
+     * @fires Player#enterpictureinpicture
+     *
+     * @return {Promise}
+     *         A promise with a Picture-in-Picture window.
+     */
+    requestPictureInPicture() {
+      if (this.options_.enableDocumentPictureInPicture && window.documentPictureInPicture) {
+        const pipContainer = document.createElement(this.el().tagName);
+        pipContainer.classList = this.el().classList;
+        pipContainer.classList.add('vjs-pip-container');
+        if (this.posterImage) {
+          pipContainer.appendChild(this.posterImage.el().cloneNode(true));
+        }
+        if (this.titleBar) {
+          pipContainer.appendChild(this.titleBar.el().cloneNode(true));
+        }
+        pipContainer.appendChild(createEl('p', {
+          className: 'vjs-pip-text'
+        }, {}, this.localize('Playing in picture-in-picture')));
+        return window.documentPictureInPicture.requestWindow({
+          // The aspect ratio won't be correct, Chrome bug https://crbug.com/1407629
+          width: this.videoWidth(),
+          height: this.videoHeight()
+        }).then(pipWindow => {
+          copyStyleSheetsToWindow(pipWindow);
+          this.el_.parentNode.insertBefore(pipContainer, this.el_);
+          pipWindow.document.body.appendChild(this.el_);
+          pipWindow.document.body.classList.add('vjs-pip-window');
+          this.player_.isInPictureInPicture(true);
+          this.player_.trigger({
+            type: 'enterpictureinpicture',
+            pipWindow
+          });
+
+          // Listen for the PiP closing event to move the video back.
+          pipWindow.addEventListener('pagehide', event => {
+            const pipVideo = event.target.querySelector('.video-js');
+            pipContainer.parentNode.replaceChild(pipVideo, pipContainer);
+            this.player_.isInPictureInPicture(false);
+            this.player_.trigger('leavepictureinpicture');
+          });
+          return pipWindow;
+        });
+      }
+      if ('pictureInPictureEnabled' in document && this.disablePictureInPicture() === false) {
+        /**
+         * This event fires when the player enters picture in picture mode
+         *
+         * @event Player#enterpictureinpicture
+         * @type {Event}
+         */
+        return this.techGet_('requestPictureInPicture');
+      }
+      return Promise.reject('No PiP mode is available');
+    }
+
+    /**
+     * Exit Picture-in-Picture mode.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @fires Player#leavepictureinpicture
+     *
+     * @return {Promise}
+     *         A promise.
+     */
+    exitPictureInPicture() {
+      if (window.documentPictureInPicture && window.documentPictureInPicture.window) {
+        // With documentPictureInPicture, Player#leavepictureinpicture is fired in the pagehide handler
+        window.documentPictureInPicture.window.close();
+        return Promise.resolve();
+      }
+      if ('pictureInPictureEnabled' in document) {
+        /**
+         * This event fires when the player leaves picture in picture mode
+         *
+         * @event Player#leavepictureinpicture
+         * @type {Event}
+         */
+        return document.exitPictureInPicture();
+      }
+    }
+
+    /**
+     * Called when this Player has focus and a key gets pressed down, or when
+     * any Component of this player receives a key press that it doesn't handle.
+     * This allows player-wide hotkeys (either as defined below, or optionally
+     * by an external function).
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      const {
+        userActions
+      } = this.options_;
+
+      // Bail out if hotkeys are not configured.
+      if (!userActions || !userActions.hotkeys) {
+        return;
+      }
+
+      // Function that determines whether or not to exclude an element from
+      // hotkeys handling.
+      const excludeElement = el => {
+        const tagName = el.tagName.toLowerCase();
+
+        // The first and easiest test is for `contenteditable` elements.
+        if (el.isContentEditable) {
+          return true;
+        }
+
+        // Inputs matching these types will still trigger hotkey handling as
+        // they are not text inputs.
+        const allowedInputTypes = ['button', 'checkbox', 'hidden', 'radio', 'reset', 'submit'];
+        if (tagName === 'input') {
+          return allowedInputTypes.indexOf(el.type) === -1;
+        }
+
+        // The final test is by tag name. These tags will be excluded entirely.
+        const excludedTags = ['textarea'];
+        return excludedTags.indexOf(tagName) !== -1;
+      };
+
+      // Bail out if the user is focused on an interactive form element.
+      if (excludeElement(this.el_.ownerDocument.activeElement)) {
+        return;
+      }
+      if (typeof userActions.hotkeys === 'function') {
+        userActions.hotkeys.call(this, event);
+      } else {
+        this.handleHotkeys(event);
+      }
+    }
+
+    /**
+     * Called when this Player receives a hotkey keydown event.
+     * Supported player-wide hotkeys are:
+     *
+     *   f          - toggle fullscreen
+     *   m          - toggle mute
+     *   k or Space - toggle play/pause
+     *
+     * @param {Event} event
+     *        The `keydown` event that caused this function to be called.
+     */
+    handleHotkeys(event) {
+      const hotkeys = this.options_.userActions ? this.options_.userActions.hotkeys : {};
+
+      // set fullscreenKey, muteKey, playPauseKey from `hotkeys`, use defaults if not set
+      const {
+        fullscreenKey = keydownEvent => keycode.isEventKey(keydownEvent, 'f'),
+        muteKey = keydownEvent => keycode.isEventKey(keydownEvent, 'm'),
+        playPauseKey = keydownEvent => keycode.isEventKey(keydownEvent, 'k') || keycode.isEventKey(keydownEvent, 'Space')
+      } = hotkeys;
+      if (fullscreenKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const FSToggle = Component.getComponent('FullscreenToggle');
+        if (document[this.fsApi_.fullscreenEnabled] !== false) {
+          FSToggle.prototype.handleClick.call(this, event);
+        }
+      } else if (muteKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const MuteToggle = Component.getComponent('MuteToggle');
+        MuteToggle.prototype.handleClick.call(this, event);
+      } else if (playPauseKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const PlayToggle = Component.getComponent('PlayToggle');
+        PlayToggle.prototype.handleClick.call(this, event);
+      }
+    }
+
+    /**
+     * Check whether the player can play a given mimetype
+     *
+     * @see https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype
+     *
+     * @param {string} type
+     *        The mimetype to check
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    canPlayType(type) {
+      let can;
+
+      // Loop through each playback technology in the options order
+      for (let i = 0, j = this.options_.techOrder; i < j.length; i++) {
+        const techName = j[i];
+        let tech = Tech.getTech(techName);
+
+        // Support old behavior of techs being registered as components.
+        // Remove once that deprecated behavior is removed.
+        if (!tech) {
+          tech = Component.getComponent(techName);
+        }
+
+        // Check if the current tech is defined before continuing
+        if (!tech) {
+          log.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+          continue;
+        }
+
+        // Check if the browser supports this technology
+        if (tech.isSupported()) {
+          can = tech.canPlayType(type);
+          if (can) {
+            return can;
+          }
+        }
+      }
+      return '';
+    }
+
+    /**
+     * Select source based on tech-order or source-order
+     * Uses source-order selection if `options.sourceOrder` is truthy. Otherwise,
+     * defaults to tech-order selection
+     *
+     * @param {Array} sources
+     *        The sources for a media asset
+     *
+     * @return {Object|boolean}
+     *         Object of source and tech order or false
+     */
+    selectSource(sources) {
+      // Get only the techs specified in `techOrder` that exist and are supported by the
+      // current platform
+      const techs = this.options_.techOrder.map(techName => {
+        return [techName, Tech.getTech(techName)];
+      }).filter(([techName, tech]) => {
+        // Check if the current tech is defined before continuing
+        if (tech) {
+          // Check if the browser supports this technology
+          return tech.isSupported();
+        }
+        log.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+        return false;
+      });
+
+      // Iterate over each `innerArray` element once per `outerArray` element and execute
+      // `tester` with both. If `tester` returns a non-falsy value, exit early and return
+      // that value.
+      const findFirstPassingTechSourcePair = function (outerArray, innerArray, tester) {
+        let found;
+        outerArray.some(outerChoice => {
+          return innerArray.some(innerChoice => {
+            found = tester(outerChoice, innerChoice);
+            if (found) {
+              return true;
+            }
+          });
+        });
+        return found;
+      };
+      let foundSourceAndTech;
+      const flip = fn => (a, b) => fn(b, a);
+      const finder = ([techName, tech], source) => {
+        if (tech.canPlaySource(source, this.options_[techName.toLowerCase()])) {
+          return {
+            source,
+            tech: techName
+          };
+        }
+      };
+
+      // Depending on the truthiness of `options.sourceOrder`, we swap the order of techs and sources
+      // to select from them based on their priority.
+      if (this.options_.sourceOrder) {
+        // Source-first ordering
+        foundSourceAndTech = findFirstPassingTechSourcePair(sources, techs, flip(finder));
+      } else {
+        // Tech-first ordering
+        foundSourceAndTech = findFirstPassingTechSourcePair(techs, sources, finder);
+      }
+      return foundSourceAndTech || false;
+    }
+
+    /**
+     * Executes source setting and getting logic
+     *
+     * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+     *        A SourceObject, an array of SourceObjects, or a string referencing
+     *        a URL to a media source. It is _highly recommended_ that an object
+     *        or array of objects is used here, so that source selection
+     *        algorithms can take the `type` into account.
+     *
+     *        If not provided, this method acts as a getter.
+     * @param {boolean} [isRetry]
+     *        Indicates whether this is being called internally as a result of a retry
+     *
+     * @return {string|undefined}
+     *         If the `source` argument is missing, returns the current source
+     *         URL. Otherwise, returns nothing/undefined.
+     */
+    handleSrc_(source, isRetry) {
+      // getter usage
+      if (typeof source === 'undefined') {
+        return this.cache_.src || '';
+      }
+
+      // Reset retry behavior for new source
+      if (this.resetRetryOnError_) {
+        this.resetRetryOnError_();
+      }
+
+      // filter out invalid sources and turn our source into
+      // an array of source objects
+      const sources = filterSource(source);
+
+      // if a source was passed in then it is invalid because
+      // it was filtered to a zero length Array. So we have to
+      // show an error
+      if (!sources.length) {
+        this.setTimeout(function () {
+          this.error({
+            code: 4,
+            message: this.options_.notSupportedMessage
+          });
+        }, 0);
+        return;
+      }
+
+      // initial sources
+      this.changingSrc_ = true;
+
+      // Only update the cached source list if we are not retrying a new source after error,
+      // since in that case we want to include the failed source(s) in the cache
+      if (!isRetry) {
+        this.cache_.sources = sources;
+      }
+      this.updateSourceCaches_(sources[0]);
+
+      // middlewareSource is the source after it has been changed by middleware
+      setSource(this, sources[0], (middlewareSource, mws) => {
+        this.middleware_ = mws;
+
+        // since sourceSet is async we have to update the cache again after we select a source since
+        // the source that is selected could be out of order from the cache update above this callback.
+        if (!isRetry) {
+          this.cache_.sources = sources;
+        }
+        this.updateSourceCaches_(middlewareSource);
+        const err = this.src_(middlewareSource);
+        if (err) {
+          if (sources.length > 1) {
+            return this.handleSrc_(sources.slice(1));
+          }
+          this.changingSrc_ = false;
+
+          // We need to wrap this in a timeout to give folks a chance to add error event handlers
+          this.setTimeout(function () {
+            this.error({
+              code: 4,
+              message: this.options_.notSupportedMessage
+            });
+          }, 0);
+
+          // we could not find an appropriate tech, but let's still notify the delegate that this is it
+          // this needs a better comment about why this is needed
+          this.triggerReady();
+          return;
+        }
+        setTech(mws, this.tech_);
+      });
+
+      // Try another available source if this one fails before playback.
+      if (sources.length > 1) {
+        const retry = () => {
+          // Remove the error modal
+          this.error(null);
+          this.handleSrc_(sources.slice(1), true);
+        };
+        const stopListeningForErrors = () => {
+          this.off('error', retry);
+        };
+        this.one('error', retry);
+        this.one('playing', stopListeningForErrors);
+        this.resetRetryOnError_ = () => {
+          this.off('error', retry);
+          this.off('playing', stopListeningForErrors);
+        };
+      }
+    }
+
+    /**
+     * Get or set the video source.
+     *
+     * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+     *        A SourceObject, an array of SourceObjects, or a string referencing
+     *        a URL to a media source. It is _highly recommended_ that an object
+     *        or array of objects is used here, so that source selection
+     *        algorithms can take the `type` into account.
+     *
+     *        If not provided, this method acts as a getter.
+     *
+     * @return {string|undefined}
+     *         If the `source` argument is missing, returns the current source
+     *         URL. Otherwise, returns nothing/undefined.
+     */
+    src(source) {
+      return this.handleSrc_(source, false);
+    }
+
+    /**
+     * Set the source object on the tech, returns a boolean that indicates whether
+     * there is a tech that can play the source or not
+     *
+     * @param {Tech~SourceObject} source
+     *        The source object to set on the Tech
+     *
+     * @return {boolean}
+     *         - True if there is no Tech to playback this source
+     *         - False otherwise
+     *
+     * @private
+     */
+    src_(source) {
+      const sourceTech = this.selectSource([source]);
+      if (!sourceTech) {
+        return true;
+      }
+      if (!titleCaseEquals(sourceTech.tech, this.techName_)) {
+        this.changingSrc_ = true;
+        // load this technology with the chosen source
+        this.loadTech_(sourceTech.tech, sourceTech.source);
+        this.tech_.ready(() => {
+          this.changingSrc_ = false;
+        });
+        return false;
+      }
+
+      // wait until the tech is ready to set the source
+      // and set it synchronously if possible (#2326)
+      this.ready(function () {
+        // The setSource tech method was added with source handlers
+        // so older techs won't support it
+        // We need to check the direct prototype for the case where subclasses
+        // of the tech do not support source handlers
+        if (this.tech_.constructor.prototype.hasOwnProperty('setSource')) {
+          this.techCall_('setSource', source);
+        } else {
+          this.techCall_('src', source.src);
+        }
+        this.changingSrc_ = false;
+      }, true);
+      return false;
+    }
+
+    /**
+     * Begin loading the src data.
+     */
+    load() {
+      // Workaround to use the load method with the VHS.
+      // Does not cover the case when the load method is called directly from the mediaElement.
+      if (this.tech_ && this.tech_.vhs) {
+        this.src(this.currentSource());
+        return;
+      }
+      this.techCall_('load');
+    }
+
+    /**
+     * Reset the player. Loads the first tech in the techOrder,
+     * removes all the text tracks in the existing `tech`,
+     * and calls `reset` on the `tech`.
+     */
+    reset() {
+      if (this.paused()) {
+        this.doReset_();
+      } else {
+        const playPromise = this.play();
+        silencePromise(playPromise.then(() => this.doReset_()));
+      }
+    }
+    doReset_() {
+      if (this.tech_) {
+        this.tech_.clearTracks('text');
+      }
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      this.resetCache_();
+      this.poster('');
+      this.loadTech_(this.options_.techOrder[0], null);
+      this.techCall_('reset');
+      this.resetControlBarUI_();
+      this.error(null);
+      if (this.titleBar) {
+        this.titleBar.update({
+          title: undefined,
+          description: undefined
+        });
+      }
+      if (isEvented(this)) {
+        this.trigger('playerreset');
+      }
+    }
+
+    /**
+     * Reset Control Bar's UI by calling sub-methods that reset
+     * all of Control Bar's components
+     */
+    resetControlBarUI_() {
+      this.resetProgressBar_();
+      this.resetPlaybackRate_();
+      this.resetVolumeBar_();
+    }
+
+    /**
+     * Reset tech's progress so progress bar is reset in the UI
+     */
+    resetProgressBar_() {
+      this.currentTime(0);
+      const {
+        currentTimeDisplay,
+        durationDisplay,
+        progressControl,
+        remainingTimeDisplay
+      } = this.controlBar || {};
+      const {
+        seekBar
+      } = progressControl || {};
+      if (currentTimeDisplay) {
+        currentTimeDisplay.updateContent();
+      }
+      if (durationDisplay) {
+        durationDisplay.updateContent();
+      }
+      if (remainingTimeDisplay) {
+        remainingTimeDisplay.updateContent();
+      }
+      if (seekBar) {
+        seekBar.update();
+        if (seekBar.loadProgressBar) {
+          seekBar.loadProgressBar.update();
+        }
+      }
+    }
+
+    /**
+     * Reset Playback ratio
+     */
+    resetPlaybackRate_() {
+      this.playbackRate(this.defaultPlaybackRate());
+      this.handleTechRateChange_();
+    }
+
+    /**
+     * Reset Volume bar
+     */
+    resetVolumeBar_() {
+      this.volume(1.0);
+      this.trigger('volumechange');
+    }
+
+    /**
+     * Returns all of the current source objects.
+     *
+     * @return {Tech~SourceObject[]}
+     *         The current source objects
+     */
+    currentSources() {
+      const source = this.currentSource();
+      const sources = [];
+
+      // assume `{}` or `{ src }`
+      if (Object.keys(source).length !== 0) {
+        sources.push(source);
+      }
+      return this.cache_.sources || sources;
+    }
+
+    /**
+     * Returns the current source object.
+     *
+     * @return {Tech~SourceObject}
+     *         The current source object
+     */
+    currentSource() {
+      return this.cache_.source || {};
+    }
+
+    /**
+     * Returns the fully qualified URL of the current source value e.g. http://mysite.com/video.mp4
+     * Can be used in conjunction with `currentType` to assist in rebuilding the current source object.
+     *
+     * @return {string}
+     *         The current source
+     */
+    currentSrc() {
+      return this.currentSource() && this.currentSource().src || '';
+    }
+
+    /**
+     * Get the current source type e.g. video/mp4
+     * This can allow you rebuild the current source object so that you could load the same
+     * source and tech later
+     *
+     * @return {string}
+     *         The source MIME type
+     */
+    currentType() {
+      return this.currentSource() && this.currentSource().type || '';
+    }
+
+    /**
+     * Get or set the preload attribute
+     *
+     * @param {'none'|'auto'|'metadata'} [value]
+     *        Preload mode to pass to tech
+     *
+     * @return {string|undefined}
+     *         - The preload attribute value when getting
+     *         - Nothing when setting
+     */
+    preload(value) {
+      if (value !== undefined) {
+        this.techCall_('setPreload', value);
+        this.options_.preload = value;
+        return;
+      }
+      return this.techGet_('preload');
+    }
+
+    /**
+     * Get or set the autoplay option. When this is a boolean it will
+     * modify the attribute on the tech. When this is a string the attribute on
+     * the tech will be removed and `Player` will handle autoplay on loadstarts.
+     *
+     * @param {boolean|'play'|'muted'|'any'} [value]
+     *        - true: autoplay using the browser behavior
+     *        - false: do not autoplay
+     *        - 'play': call play() on every loadstart
+     *        - 'muted': call muted() then play() on every loadstart
+     *        - 'any': call play() on every loadstart. if that fails call muted() then play().
+     *        - *: values other than those listed here will be set `autoplay` to true
+     *
+     * @return {boolean|string|undefined}
+     *         - The current value of autoplay when getting
+     *         - Nothing when setting
+     */
+    autoplay(value) {
+      // getter usage
+      if (value === undefined) {
+        return this.options_.autoplay || false;
+      }
+      let techAutoplay;
+
+      // if the value is a valid string set it to that, or normalize `true` to 'play', if need be
+      if (typeof value === 'string' && /(any|play|muted)/.test(value) || value === true && this.options_.normalizeAutoplay) {
+        this.options_.autoplay = value;
+        this.manualAutoplay_(typeof value === 'string' ? value : 'play');
+        techAutoplay = false;
+
+        // any falsy value sets autoplay to false in the browser,
+        // lets do the same
+      } else if (!value) {
+        this.options_.autoplay = false;
+
+        // any other value (ie truthy) sets autoplay to true
+      } else {
+        this.options_.autoplay = true;
+      }
+      techAutoplay = typeof techAutoplay === 'undefined' ? this.options_.autoplay : techAutoplay;
+
+      // if we don't have a tech then we do not queue up
+      // a setAutoplay call on tech ready. We do this because the
+      // autoplay option will be passed in the constructor and we
+      // do not need to set it twice
+      if (this.tech_) {
+        this.techCall_('setAutoplay', techAutoplay);
+      }
+    }
+
+    /**
+     * Set or unset the playsinline attribute.
+     * Playsinline tells the browser that non-fullscreen playback is preferred.
+     *
+     * @param {boolean} [value]
+     *        - true means that we should try to play inline by default
+     *        - false means that we should use the browser's default playback mode,
+     *          which in most cases is inline. iOS Safari is a notable exception
+     *          and plays fullscreen by default.
+     *
+     * @return {string|undefined}
+     *         - the current value of playsinline
+     *         - Nothing when setting
+     *
+     * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+     */
+    playsinline(value) {
+      if (value !== undefined) {
+        this.techCall_('setPlaysinline', value);
+        this.options_.playsinline = value;
+      }
+      return this.techGet_('playsinline');
+    }
+
+    /**
+     * Get or set the loop attribute on the video element.
+     *
+     * @param {boolean} [value]
+     *        - true means that we should loop the video
+     *        - false means that we should not loop the video
+     *
+     * @return {boolean|undefined}
+     *         - The current value of loop when getting
+     *         - Nothing when setting
+     */
+    loop(value) {
+      if (value !== undefined) {
+        this.techCall_('setLoop', value);
+        this.options_.loop = value;
+        return;
+      }
+      return this.techGet_('loop');
+    }
+
+    /**
+     * Get or set the poster image source url
+     *
+     * @fires Player#posterchange
+     *
+     * @param {string} [src]
+     *        Poster image source URL
+     *
+     * @return {string|undefined}
+     *         - The current value of poster when getting
+     *         - Nothing when setting
+     */
+    poster(src) {
+      if (src === undefined) {
+        return this.poster_;
+      }
+
+      // The correct way to remove a poster is to set as an empty string
+      // other falsey values will throw errors
+      if (!src) {
+        src = '';
+      }
+      if (src === this.poster_) {
+        return;
+      }
+
+      // update the internal poster variable
+      this.poster_ = src;
+
+      // update the tech's poster
+      this.techCall_('setPoster', src);
+      this.isPosterFromTech_ = false;
+
+      // alert components that the poster has been set
+      /**
+       * This event fires when the poster image is changed on the player.
+       *
+       * @event Player#posterchange
+       * @type {Event}
+       */
+      this.trigger('posterchange');
+    }
+
+    /**
+     * Some techs (e.g. YouTube) can provide a poster source in an
+     * asynchronous way. We want the poster component to use this
+     * poster source so that it covers up the tech's controls.
+     * (YouTube's play button). However we only want to use this
+     * source if the player user hasn't set a poster through
+     * the normal APIs.
+     *
+     * @fires Player#posterchange
+     * @listens Tech#posterchange
+     * @private
+     */
+    handleTechPosterChange_() {
+      if ((!this.poster_ || this.options_.techCanOverridePoster) && this.tech_ && this.tech_.poster) {
+        const newPoster = this.tech_.poster() || '';
+        if (newPoster !== this.poster_) {
+          this.poster_ = newPoster;
+          this.isPosterFromTech_ = true;
+
+          // Let components know the poster has changed
+          this.trigger('posterchange');
+        }
+      }
+    }
+
+    /**
+     * Get or set whether or not the controls are showing.
+     *
+     * @fires Player#controlsenabled
+     *
+     * @param {boolean} [bool]
+     *        - true to turn controls on
+     *        - false to turn controls off
+     *
+     * @return {boolean|undefined}
+     *         - The current value of controls when getting
+     *         - Nothing when setting
+     */
+    controls(bool) {
+      if (bool === undefined) {
+        return !!this.controls_;
+      }
+      bool = !!bool;
+
+      // Don't trigger a change event unless it actually changed
+      if (this.controls_ === bool) {
+        return;
+      }
+      this.controls_ = bool;
+      if (this.usingNativeControls()) {
+        this.techCall_('setControls', bool);
+      }
+      if (this.controls_) {
+        this.removeClass('vjs-controls-disabled');
+        this.addClass('vjs-controls-enabled');
+        /**
+         * @event Player#controlsenabled
+         * @type {Event}
+         */
+        this.trigger('controlsenabled');
+        if (!this.usingNativeControls()) {
+          this.addTechControlsListeners_();
+        }
+      } else {
+        this.removeClass('vjs-controls-enabled');
+        this.addClass('vjs-controls-disabled');
+        /**
+         * @event Player#controlsdisabled
+         * @type {Event}
+         */
+        this.trigger('controlsdisabled');
+        if (!this.usingNativeControls()) {
+          this.removeTechControlsListeners_();
+        }
+      }
+    }
+
+    /**
+     * Toggle native controls on/off. Native controls are the controls built into
+     * devices (e.g. default iPhone controls) or other techs
+     * (e.g. Vimeo Controls)
+     * **This should only be set by the current tech, because only the tech knows
+     * if it can support native controls**
+     *
+     * @fires Player#usingnativecontrols
+     * @fires Player#usingcustomcontrols
+     *
+     * @param {boolean} [bool]
+     *        - true to turn native controls on
+     *        - false to turn native controls off
+     *
+     * @return {boolean|undefined}
+     *         - The current value of native controls when getting
+     *         - Nothing when setting
+     */
+    usingNativeControls(bool) {
+      if (bool === undefined) {
+        return !!this.usingNativeControls_;
+      }
+      bool = !!bool;
+
+      // Don't trigger a change event unless it actually changed
+      if (this.usingNativeControls_ === bool) {
+        return;
+      }
+      this.usingNativeControls_ = bool;
+      if (this.usingNativeControls_) {
+        this.addClass('vjs-using-native-controls');
+
+        /**
+         * player is using the native device controls
+         *
+         * @event Player#usingnativecontrols
+         * @type {Event}
+         */
+        this.trigger('usingnativecontrols');
+      } else {
+        this.removeClass('vjs-using-native-controls');
+
+        /**
+         * player is using the custom HTML controls
+         *
+         * @event Player#usingcustomcontrols
+         * @type {Event}
+         */
+        this.trigger('usingcustomcontrols');
+      }
+    }
+
+    /**
+     * Set or get the current MediaError
+     *
+     * @fires Player#error
+     *
+     * @param  {MediaError|string|number} [err]
+     *         A MediaError or a string/number to be turned
+     *         into a MediaError
+     *
+     * @return {MediaError|null|undefined}
+     *         - The current MediaError when getting (or null)
+     *         - Nothing when setting
+     */
+    error(err) {
+      if (err === undefined) {
+        return this.error_ || null;
+      }
+
+      // allow hooks to modify error object
+      hooks('beforeerror').forEach(hookFunction => {
+        const newErr = hookFunction(this, err);
+        if (!(isObject(newErr) && !Array.isArray(newErr) || typeof newErr === 'string' || typeof newErr === 'number' || newErr === null)) {
+          this.log.error('please return a value that MediaError expects in beforeerror hooks');
+          return;
+        }
+        err = newErr;
+      });
+
+      // Suppress the first error message for no compatible source until
+      // user interaction
+      if (this.options_.suppressNotSupportedError && err && err.code === 4) {
+        const triggerSuppressedError = function () {
+          this.error(err);
+        };
+        this.options_.suppressNotSupportedError = false;
+        this.any(['click', 'touchstart'], triggerSuppressedError);
+        this.one('loadstart', function () {
+          this.off(['click', 'touchstart'], triggerSuppressedError);
+        });
+        return;
+      }
+
+      // restoring to default
+      if (err === null) {
+        this.error_ = null;
+        this.removeClass('vjs-error');
+        if (this.errorDisplay) {
+          this.errorDisplay.close();
+        }
+        return;
+      }
+      this.error_ = new MediaError(err);
+
+      // add the vjs-error classname to the player
+      this.addClass('vjs-error');
+
+      // log the name of the error type and any message
+      // IE11 logs "[object object]" and required you to expand message to see error object
+      log.error(`(CODE:${this.error_.code} ${MediaError.errorTypes[this.error_.code]})`, this.error_.message, this.error_);
+
+      /**
+       * @event Player#error
+       * @type {Event}
+       */
+      this.trigger('error');
+
+      // notify hooks of the per player error
+      hooks('error').forEach(hookFunction => hookFunction(this, this.error_));
+      return;
+    }
+
+    /**
+     * Report user activity
+     *
+     * @param {Object} event
+     *        Event object
+     */
+    reportUserActivity(event) {
+      this.userActivity_ = true;
+    }
+
+    /**
+     * Get/set if user is active
+     *
+     * @fires Player#useractive
+     * @fires Player#userinactive
+     *
+     * @param {boolean} [bool]
+     *        - true if the user is active
+     *        - false if the user is inactive
+     *
+     * @return {boolean|undefined}
+     *         - The current value of userActive when getting
+     *         - Nothing when setting
+     */
+    userActive(bool) {
+      if (bool === undefined) {
+        return this.userActive_;
+      }
+      bool = !!bool;
+      if (bool === this.userActive_) {
+        return;
+      }
+      this.userActive_ = bool;
+      if (this.userActive_) {
+        this.userActivity_ = true;
+        this.removeClass('vjs-user-inactive');
+        this.addClass('vjs-user-active');
+        /**
+         * @event Player#useractive
+         * @type {Event}
+         */
+        this.trigger('useractive');
+        return;
+      }
+
+      // Chrome/Safari/IE have bugs where when you change the cursor it can
+      // trigger a mousemove event. This causes an issue when you're hiding
+      // the cursor when the user is inactive, and a mousemove signals user
+      // activity. Making it impossible to go into inactive mode. Specifically
+      // this happens in fullscreen when we really need to hide the cursor.
+      //
+      // When this gets resolved in ALL browsers it can be removed
+      // https://code.google.com/p/chromium/issues/detail?id=103041
+      if (this.tech_) {
+        this.tech_.one('mousemove', function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+        });
+      }
+      this.userActivity_ = false;
+      this.removeClass('vjs-user-active');
+      this.addClass('vjs-user-inactive');
+      /**
+       * @event Player#userinactive
+       * @type {Event}
+       */
+      this.trigger('userinactive');
+    }
+
+    /**
+     * Listen for user activity based on timeout value
+     *
+     * @private
+     */
+    listenForUserActivity_() {
+      let mouseInProgress;
+      let lastMoveX;
+      let lastMoveY;
+      const handleActivity = bind_(this, this.reportUserActivity);
+      const handleMouseMove = function (e) {
+        // #1068 - Prevent mousemove spamming
+        // Chrome Bug: https://code.google.com/p/chromium/issues/detail?id=366970
+        if (e.screenX !== lastMoveX || e.screenY !== lastMoveY) {
+          lastMoveX = e.screenX;
+          lastMoveY = e.screenY;
+          handleActivity();
+        }
+      };
+      const handleMouseDown = function () {
+        handleActivity();
+        // For as long as the they are touching the device or have their mouse down,
+        // we consider them active even if they're not moving their finger or mouse.
+        // So we want to continue to update that they are active
+        this.clearInterval(mouseInProgress);
+        // Setting userActivity=true now and setting the interval to the same time
+        // as the activityCheck interval (250) should ensure we never miss the
+        // next activityCheck
+        mouseInProgress = this.setInterval(handleActivity, 250);
+      };
+      const handleMouseUpAndMouseLeave = function (event) {
+        handleActivity();
+        // Stop the interval that maintains activity if the mouse/touch is down
+        this.clearInterval(mouseInProgress);
+      };
+
+      // Any mouse movement will be considered user activity
+      this.on('mousedown', handleMouseDown);
+      this.on('mousemove', handleMouseMove);
+      this.on('mouseup', handleMouseUpAndMouseLeave);
+      this.on('mouseleave', handleMouseUpAndMouseLeave);
+      const controlBar = this.getChild('controlBar');
+
+      // Fixes bug on Android & iOS where when tapping progressBar (when control bar is displayed)
+      // controlBar would no longer be hidden by default timeout.
+      if (controlBar && !IS_IOS && !IS_ANDROID) {
+        controlBar.on('mouseenter', function (event) {
+          if (this.player().options_.inactivityTimeout !== 0) {
+            this.player().cache_.inactivityTimeout = this.player().options_.inactivityTimeout;
+          }
+          this.player().options_.inactivityTimeout = 0;
+        });
+        controlBar.on('mouseleave', function (event) {
+          this.player().options_.inactivityTimeout = this.player().cache_.inactivityTimeout;
+        });
+      }
+
+      // Listen for keyboard navigation
+      // Shouldn't need to use inProgress interval because of key repeat
+      this.on('keydown', handleActivity);
+      this.on('keyup', handleActivity);
+
+      // Run an interval every 250 milliseconds instead of stuffing everything into
+      // the mousemove/touchmove function itself, to prevent performance degradation.
+      // `this.reportUserActivity` simply sets this.userActivity_ to true, which
+      // then gets picked up by this loop
+      // http://ejohn.org/blog/learning-from-twitter/
+      let inactivityTimeout;
+
+      /** @this Player */
+      const activityCheck = function () {
+        // Check to see if mouse/touch activity has happened
+        if (!this.userActivity_) {
+          return;
+        }
+
+        // Reset the activity tracker
+        this.userActivity_ = false;
+
+        // If the user state was inactive, set the state to active
+        this.userActive(true);
+
+        // Clear any existing inactivity timeout to start the timer over
+        this.clearTimeout(inactivityTimeout);
+        const timeout = this.options_.inactivityTimeout;
+        if (timeout <= 0) {
+          return;
+        }
+
+        // In <timeout> milliseconds, if no more activity has occurred the
+        // user will be considered inactive
+        inactivityTimeout = this.setTimeout(function () {
+          // Protect against the case where the inactivityTimeout can trigger just
+          // before the next user activity is picked up by the activity check loop
+          // causing a flicker
+          if (!this.userActivity_) {
+            this.userActive(false);
+          }
+        }, timeout);
+      };
+      this.setInterval(activityCheck, 250);
+    }
+
+    /**
+     * Gets or sets the current playback rate. A playback rate of
+     * 1.0 represents normal speed and 0.5 would indicate half-speed
+     * playback, for instance.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-playbackrate
+     *
+     * @param {number} [rate]
+     *       New playback rate to set.
+     *
+     * @return {number|undefined}
+     *         - The current playback rate when getting or 1.0
+     *         - Nothing when setting
+     */
+    playbackRate(rate) {
+      if (rate !== undefined) {
+        // NOTE: this.cache_.lastPlaybackRate is set from the tech handler
+        // that is registered above
+        this.techCall_('setPlaybackRate', rate);
+        return;
+      }
+      if (this.tech_ && this.tech_.featuresPlaybackRate) {
+        return this.cache_.lastPlaybackRate || this.techGet_('playbackRate');
+      }
+      return 1.0;
+    }
+
+    /**
+     * Gets or sets the current default playback rate. A default playback rate of
+     * 1.0 represents normal speed and 0.5 would indicate half-speed playback, for instance.
+     * defaultPlaybackRate will only represent what the initial playbackRate of a video was, not
+     * not the current playbackRate.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-defaultplaybackrate
+     *
+     * @param {number} [rate]
+     *       New default playback rate to set.
+     *
+     * @return {number|undefined}
+     *         - The default playback rate when getting or 1.0
+     *         - Nothing when setting
+     */
+    defaultPlaybackRate(rate) {
+      if (rate !== undefined) {
+        return this.techCall_('setDefaultPlaybackRate', rate);
+      }
+      if (this.tech_ && this.tech_.featuresPlaybackRate) {
+        return this.techGet_('defaultPlaybackRate');
+      }
+      return 1.0;
+    }
+
+    /**
+     * Gets or sets the audio flag
+     *
+     * @param {boolean} [bool]
+     *        - true signals that this is an audio player
+     *        - false signals that this is not an audio player
+     *
+     * @return {boolean|undefined}
+     *         - The current value of isAudio when getting
+     *         - Nothing when setting
+     */
+    isAudio(bool) {
+      if (bool !== undefined) {
+        this.isAudio_ = !!bool;
+        return;
+      }
+      return !!this.isAudio_;
+    }
+    enableAudioOnlyUI_() {
+      // Update styling immediately to show the control bar so we can get its height
+      this.addClass('vjs-audio-only-mode');
+      const playerChildren = this.children();
+      const controlBar = this.getChild('ControlBar');
+      const controlBarHeight = controlBar && controlBar.currentHeight();
+
+      // Hide all player components except the control bar. Control bar components
+      // needed only for video are hidden with CSS
+      playerChildren.forEach(child => {
+        if (child === controlBar) {
+          return;
+        }
+        if (child.el_ && !child.hasClass('vjs-hidden')) {
+          child.hide();
+          this.audioOnlyCache_.hiddenChildren.push(child);
+        }
+      });
+      this.audioOnlyCache_.playerHeight = this.currentHeight();
+
+      // Set the player height the same as the control bar
+      this.height(controlBarHeight);
+      this.trigger('audioonlymodechange');
+    }
+    disableAudioOnlyUI_() {
+      this.removeClass('vjs-audio-only-mode');
+
+      // Show player components that were previously hidden
+      this.audioOnlyCache_.hiddenChildren.forEach(child => child.show());
+
+      // Reset player height
+      this.height(this.audioOnlyCache_.playerHeight);
+      this.trigger('audioonlymodechange');
+    }
+
+    /**
+     * Get the current audioOnlyMode state or set audioOnlyMode to true or false.
+     *
+     * Setting this to `true` will hide all player components except the control bar,
+     * as well as control bar components needed only for video.
+     *
+     * @param {boolean} [value]
+     *         The value to set audioOnlyMode to.
+     *
+     * @return {Promise|boolean}
+     *        A Promise is returned when setting the state, and a boolean when getting
+     *        the present state
+     */
+    audioOnlyMode(value) {
+      if (typeof value !== 'boolean' || value === this.audioOnlyMode_) {
+        return this.audioOnlyMode_;
+      }
+      this.audioOnlyMode_ = value;
+
+      // Enable Audio Only Mode
+      if (value) {
+        const exitPromises = [];
+
+        // Fullscreen and PiP are not supported in audioOnlyMode, so exit if we need to.
+        if (this.isInPictureInPicture()) {
+          exitPromises.push(this.exitPictureInPicture());
+        }
+        if (this.isFullscreen()) {
+          exitPromises.push(this.exitFullscreen());
+        }
+        if (this.audioPosterMode()) {
+          exitPromises.push(this.audioPosterMode(false));
+        }
+        return Promise.all(exitPromises).then(() => this.enableAudioOnlyUI_());
+      }
+
+      // Disable Audio Only Mode
+      return Promise.resolve().then(() => this.disableAudioOnlyUI_());
+    }
+    enablePosterModeUI_() {
+      // Hide the video element and show the poster image to enable posterModeUI
+      const tech = this.tech_ && this.tech_;
+      tech.hide();
+      this.addClass('vjs-audio-poster-mode');
+      this.trigger('audiopostermodechange');
+    }
+    disablePosterModeUI_() {
+      // Show the video element and hide the poster image to disable posterModeUI
+      const tech = this.tech_ && this.tech_;
+      tech.show();
+      this.removeClass('vjs-audio-poster-mode');
+      this.trigger('audiopostermodechange');
+    }
+
+    /**
+     * Get the current audioPosterMode state or set audioPosterMode to true or false
+     *
+     * @param {boolean} [value]
+     *         The value to set audioPosterMode to.
+     *
+     * @return {Promise|boolean}
+     *         A Promise is returned when setting the state, and a boolean when getting
+     *        the present state
+     */
+    audioPosterMode(value) {
+      if (typeof value !== 'boolean' || value === this.audioPosterMode_) {
+        return this.audioPosterMode_;
+      }
+      this.audioPosterMode_ = value;
+      if (value) {
+        if (this.audioOnlyMode()) {
+          const audioOnlyModePromise = this.audioOnlyMode(false);
+          return audioOnlyModePromise.then(() => {
+            // enable audio poster mode after audio only mode is disabled
+            this.enablePosterModeUI_();
+          });
+        }
+        return Promise.resolve().then(() => {
+          // enable audio poster mode
+          this.enablePosterModeUI_();
+        });
+      }
+      return Promise.resolve().then(() => {
+        // disable audio poster mode
+        this.disablePosterModeUI_();
+      });
+    }
+
+    /**
+     * A helper method for adding a {@link TextTrack} to our
+     * {@link TextTrackList}.
+     *
+     * In addition to the W3C settings we allow adding additional info through options.
+     *
+     * @see http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack
+     *
+     * @param {string} [kind]
+     *        the kind of TextTrack you are adding
+     *
+     * @param {string} [label]
+     *        the label to give the TextTrack label
+     *
+     * @param {string} [language]
+     *        the language to set on the TextTrack
+     *
+     * @return {TextTrack|undefined}
+     *         the TextTrack that was added or undefined
+     *         if there is no tech
+     */
+    addTextTrack(kind, label, language) {
+      if (this.tech_) {
+        return this.tech_.addTextTrack(kind, label, language);
+      }
+    }
+
+    /**
+     * Create a remote {@link TextTrack} and an {@link HTMLTrackElement}.
+     *
+     * @param {Object} options
+     *        Options to pass to {@link HTMLTrackElement} during creation. See
+     *        {@link HTMLTrackElement} for object properties that you should use.
+     *
+     * @param {boolean} [manualCleanup=false] if set to true, the TextTrack will not be removed
+     *                                        from the TextTrackList and HtmlTrackElementList
+     *                                        after a source change
+     *
+     * @return { import('./tracks/html-track-element').default }
+     *         the HTMLTrackElement that was created and added
+     *         to the HtmlTrackElementList and the remote
+     *         TextTrackList
+     *
+     */
+    addRemoteTextTrack(options, manualCleanup) {
+      if (this.tech_) {
+        return this.tech_.addRemoteTextTrack(options, manualCleanup);
+      }
+    }
+
+    /**
+     * Remove a remote {@link TextTrack} from the respective
+     * {@link TextTrackList} and {@link HtmlTrackElementList}.
+     *
+     * @param {Object} track
+     *        Remote {@link TextTrack} to remove
+     *
+     * @return {undefined}
+     *         does not return anything
+     */
+    removeRemoteTextTrack(obj = {}) {
+      let {
+        track
+      } = obj;
+      if (!track) {
+        track = obj;
+      }
+
+      // destructure the input into an object with a track argument, defaulting to arguments[0]
+      // default the whole argument to an empty object if nothing was passed in
+
+      if (this.tech_) {
+        return this.tech_.removeRemoteTextTrack(track);
+      }
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object|undefined}
+     *         An object with supported media playback quality metrics or undefined if there
+     *         is no tech or the tech does not support it.
+     */
+    getVideoPlaybackQuality() {
+      return this.techGet_('getVideoPlaybackQuality');
+    }
+
+    /**
+     * Get video width
+     *
+     * @return {number}
+     *         current video width
+     */
+    videoWidth() {
+      return this.tech_ && this.tech_.videoWidth && this.tech_.videoWidth() || 0;
+    }
+
+    /**
+     * Get video height
+     *
+     * @return {number}
+     *         current video height
+     */
+    videoHeight() {
+      return this.tech_ && this.tech_.videoHeight && this.tech_.videoHeight() || 0;
+    }
+
+    /**
+     * Set or get the player's language code.
+     *
+     * Changing the language will trigger
+     * [languagechange]{@link Player#event:languagechange}
+     * which Components can use to update control text.
+     * ClickableComponent will update its control text by default on
+     * [languagechange]{@link Player#event:languagechange}.
+     *
+     * @fires Player#languagechange
+     *
+     * @param {string} [code]
+     *        the language code to set the player to
+     *
+     * @return {string|undefined}
+     *         - The current language code when getting
+     *         - Nothing when setting
+     */
+    language(code) {
+      if (code === undefined) {
+        return this.language_;
+      }
+      if (this.language_ !== String(code).toLowerCase()) {
+        this.language_ = String(code).toLowerCase();
+
+        // during first init, it's possible some things won't be evented
+        if (isEvented(this)) {
+          /**
+          * fires when the player language change
+          *
+          * @event Player#languagechange
+          * @type {Event}
+          */
+          this.trigger('languagechange');
+        }
+      }
+    }
+
+    /**
+     * Get the player's language dictionary
+     * Merge every time, because a newly added plugin might call videojs.addLanguage() at any time
+     * Languages specified directly in the player options have precedence
+     *
+     * @return {Array}
+     *         An array of of supported languages
+     */
+    languages() {
+      return merge(Player.prototype.options_.languages, this.languages_);
+    }
+
+    /**
+     * returns a JavaScript object representing the current track
+     * information. **DOES not return it as JSON**
+     *
+     * @return {Object}
+     *         Object representing the current of track info
+     */
+    toJSON() {
+      const options = merge(this.options_);
+      const tracks = options.tracks;
+      options.tracks = [];
+      for (let i = 0; i < tracks.length; i++) {
+        let track = tracks[i];
+
+        // deep merge tracks and null out player so no circular references
+        track = merge(track);
+        track.player = undefined;
+        options.tracks[i] = track;
+      }
+      return options;
+    }
+
+    /**
+     * Creates a simple modal dialog (an instance of the {@link ModalDialog}
+     * component) that immediately overlays the player with arbitrary
+     * content and removes itself when closed.
+     *
+     * @param {string|Function|Element|Array|null} content
+     *        Same as {@link ModalDialog#content}'s param of the same name.
+     *        The most straight-forward usage is to provide a string or DOM
+     *        element.
+     *
+     * @param {Object} [options]
+     *        Extra options which will be passed on to the {@link ModalDialog}.
+     *
+     * @return {ModalDialog}
+     *         the {@link ModalDialog} that was created
+     */
+    createModal(content, options) {
+      options = options || {};
+      options.content = content || '';
+      const modal = new ModalDialog(this, options);
+      this.addChild(modal);
+      modal.on('dispose', () => {
+        this.removeChild(modal);
+      });
+      modal.open();
+      return modal;
+    }
+
+    /**
+     * Change breakpoint classes when the player resizes.
+     *
+     * @private
+     */
+    updateCurrentBreakpoint_() {
+      if (!this.responsive()) {
+        return;
+      }
+      const currentBreakpoint = this.currentBreakpoint();
+      const currentWidth = this.currentWidth();
+      for (let i = 0; i < BREAKPOINT_ORDER.length; i++) {
+        const candidateBreakpoint = BREAKPOINT_ORDER[i];
+        const maxWidth = this.breakpoints_[candidateBreakpoint];
+        if (currentWidth <= maxWidth) {
+          // The current breakpoint did not change, nothing to do.
+          if (currentBreakpoint === candidateBreakpoint) {
+            return;
+          }
+
+          // Only remove a class if there is a current breakpoint.
+          if (currentBreakpoint) {
+            this.removeClass(BREAKPOINT_CLASSES[currentBreakpoint]);
+          }
+          this.addClass(BREAKPOINT_CLASSES[candidateBreakpoint]);
+          this.breakpoint_ = candidateBreakpoint;
+          break;
+        }
+      }
+    }
+
+    /**
+     * Removes the current breakpoint.
+     *
+     * @private
+     */
+    removeCurrentBreakpoint_() {
+      const className = this.currentBreakpointClass();
+      this.breakpoint_ = '';
+      if (className) {
+        this.removeClass(className);
+      }
+    }
+
+    /**
+     * Get or set breakpoints on the player.
+     *
+     * Calling this method with an object or `true` will remove any previous
+     * custom breakpoints and start from the defaults again.
+     *
+     * @param  {Object|boolean} [breakpoints]
+     *         If an object is given, it can be used to provide custom
+     *         breakpoints. If `true` is given, will set default breakpoints.
+     *         If this argument is not given, will simply return the current
+     *         breakpoints.
+     *
+     * @param  {number} [breakpoints.tiny]
+     *         The maximum width for the "vjs-layout-tiny" class.
+     *
+     * @param  {number} [breakpoints.xsmall]
+     *         The maximum width for the "vjs-layout-x-small" class.
+     *
+     * @param  {number} [breakpoints.small]
+     *         The maximum width for the "vjs-layout-small" class.
+     *
+     * @param  {number} [breakpoints.medium]
+     *         The maximum width for the "vjs-layout-medium" class.
+     *
+     * @param  {number} [breakpoints.large]
+     *         The maximum width for the "vjs-layout-large" class.
+     *
+     * @param  {number} [breakpoints.xlarge]
+     *         The maximum width for the "vjs-layout-x-large" class.
+     *
+     * @param  {number} [breakpoints.huge]
+     *         The maximum width for the "vjs-layout-huge" class.
+     *
+     * @return {Object}
+     *         An object mapping breakpoint names to maximum width values.
+     */
+    breakpoints(breakpoints) {
+      // Used as a getter.
+      if (breakpoints === undefined) {
+        return Object.assign(this.breakpoints_);
+      }
+      this.breakpoint_ = '';
+      this.breakpoints_ = Object.assign({}, DEFAULT_BREAKPOINTS, breakpoints);
+
+      // When breakpoint definitions change, we need to update the currently
+      // selected breakpoint.
+      this.updateCurrentBreakpoint_();
+
+      // Clone the breakpoints before returning.
+      return Object.assign(this.breakpoints_);
+    }
+
+    /**
+     * Get or set a flag indicating whether or not this player should adjust
+     * its UI based on its dimensions.
+     *
+     * @param  {boolean} [value]
+     *         Should be `true` if the player should adjust its UI based on its
+     *         dimensions; otherwise, should be `false`.
+     *
+     * @return {boolean|undefined}
+     *         Will be `true` if this player should adjust its UI based on its
+     *         dimensions; otherwise, will be `false`.
+     *         Nothing if setting
+     */
+    responsive(value) {
+      // Used as a getter.
+      if (value === undefined) {
+        return this.responsive_;
+      }
+      value = Boolean(value);
+      const current = this.responsive_;
+
+      // Nothing changed.
+      if (value === current) {
+        return;
+      }
+
+      // The value actually changed, set it.
+      this.responsive_ = value;
+
+      // Start listening for breakpoints and set the initial breakpoint if the
+      // player is now responsive.
+      if (value) {
+        this.on('playerresize', this.boundUpdateCurrentBreakpoint_);
+        this.updateCurrentBreakpoint_();
+
+        // Stop listening for breakpoints if the player is no longer responsive.
+      } else {
+        this.off('playerresize', this.boundUpdateCurrentBreakpoint_);
+        this.removeCurrentBreakpoint_();
+      }
+      return value;
+    }
+
+    /**
+     * Get current breakpoint name, if any.
+     *
+     * @return {string}
+     *         If there is currently a breakpoint set, returns a the key from the
+     *         breakpoints object matching it. Otherwise, returns an empty string.
+     */
+    currentBreakpoint() {
+      return this.breakpoint_;
+    }
+
+    /**
+     * Get the current breakpoint class name.
+     *
+     * @return {string}
+     *         The matching class name (e.g. `"vjs-layout-tiny"` or
+     *         `"vjs-layout-large"`) for the current breakpoint. Empty string if
+     *         there is no current breakpoint.
+     */
+    currentBreakpointClass() {
+      return BREAKPOINT_CLASSES[this.breakpoint_] || '';
+    }
+
+    /**
+     * An object that describes a single piece of media.
+     *
+     * Properties that are not part of this type description will be retained; so,
+     * this can be viewed as a generic metadata storage mechanism as well.
+     *
+     * @see      {@link https://wicg.github.io/mediasession/#the-mediametadata-interface}
+     * @typedef  {Object} Player~MediaObject
+     *
+     * @property {string} [album]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {string} [artist]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {Object[]} [artwork]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API. If not specified, will be populated via the `poster`, if
+     *           available.
+     *
+     * @property {string} [poster]
+     *           URL to an image that will display before playback.
+     *
+     * @property {Tech~SourceObject|Tech~SourceObject[]|string} [src]
+     *           A single source object, an array of source objects, or a string
+     *           referencing a URL to a media source. It is _highly recommended_
+     *           that an object or array of objects is used here, so that source
+     *           selection algorithms can take the `type` into account.
+     *
+     * @property {string} [title]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {Object[]} [textTracks]
+     *           An array of objects to be used to create text tracks, following
+     *           the {@link https://www.w3.org/TR/html50/embedded-content-0.html#the-track-element|native track element format}.
+     *           For ease of removal, these will be created as "remote" text
+     *           tracks and set to automatically clean up on source changes.
+     *
+     *           These objects may have properties like `src`, `kind`, `label`,
+     *           and `language`, see {@link Tech#createRemoteTextTrack}.
+     */
+
+    /**
+     * Populate the player using a {@link Player~MediaObject|MediaObject}.
+     *
+     * @param  {Player~MediaObject} media
+     *         A media object.
+     *
+     * @param  {Function} ready
+     *         A callback to be called when the player is ready.
+     */
+    loadMedia(media, ready) {
+      if (!media || typeof media !== 'object') {
+        return;
+      }
+      const crossOrigin = this.crossOrigin();
+      this.reset();
+
+      // Clone the media object so it cannot be mutated from outside.
+      this.cache_.media = merge(media);
+      const {
+        artist,
+        artwork,
+        description,
+        poster,
+        src,
+        textTracks,
+        title
+      } = this.cache_.media;
+
+      // If `artwork` is not given, create it using `poster`.
+      if (!artwork && poster) {
+        this.cache_.media.artwork = [{
+          src: poster,
+          type: getMimetype(poster)
+        }];
+      }
+      if (crossOrigin) {
+        this.crossOrigin(crossOrigin);
+      }
+      if (src) {
+        this.src(src);
+      }
+      if (poster) {
+        this.poster(poster);
+      }
+      if (Array.isArray(textTracks)) {
+        textTracks.forEach(tt => this.addRemoteTextTrack(tt, false));
+      }
+      if (this.titleBar) {
+        this.titleBar.update({
+          title,
+          description: description || artist || ''
+        });
+      }
+      this.ready(ready);
+    }
+
+    /**
+     * Get a clone of the current {@link Player~MediaObject} for this player.
+     *
+     * If the `loadMedia` method has not been used, will attempt to return a
+     * {@link Player~MediaObject} based on the current state of the player.
+     *
+     * @return {Player~MediaObject}
+     */
+    getMedia() {
+      if (!this.cache_.media) {
+        const poster = this.poster();
+        const src = this.currentSources();
+        const textTracks = Array.prototype.map.call(this.remoteTextTracks(), tt => ({
+          kind: tt.kind,
+          label: tt.label,
+          language: tt.language,
+          src: tt.src
+        }));
+        const media = {
+          src,
+          textTracks
+        };
+        if (poster) {
+          media.poster = poster;
+          media.artwork = [{
+            src: media.poster,
+            type: getMimetype(media.poster)
+          }];
+        }
+        return media;
+      }
+      return merge(this.cache_.media);
+    }
+
+    /**
+     * Gets tag settings
+     *
+     * @param {Element} tag
+     *        The player tag
+     *
+     * @return {Object}
+     *         An object containing all of the settings
+     *         for a player tag
+     */
+    static getTagSettings(tag) {
+      const baseOptions = {
+        sources: [],
+        tracks: []
+      };
+      const tagOptions = getAttributes(tag);
+      const dataSetup = tagOptions['data-setup'];
+      if (hasClass(tag, 'vjs-fill')) {
+        tagOptions.fill = true;
+      }
+      if (hasClass(tag, 'vjs-fluid')) {
+        tagOptions.fluid = true;
+      }
+
+      // Check if data-setup attr exists.
+      if (dataSetup !== null) {
+        // Parse options JSON
+        // If empty string, make it a parsable json object.
+        const [err, data] = tuple(dataSetup || '{}');
+        if (err) {
+          log.error(err);
+        }
+        Object.assign(tagOptions, data);
+      }
+      Object.assign(baseOptions, tagOptions);
+
+      // Get tag children settings
+      if (tag.hasChildNodes()) {
+        const children = tag.childNodes;
+        for (let i = 0, j = children.length; i < j; i++) {
+          const child = children[i];
+          // Change case needed: http://ejohn.org/blog/nodename-case-sensitivity/
+          const childName = child.nodeName.toLowerCase();
+          if (childName === 'source') {
+            baseOptions.sources.push(getAttributes(child));
+          } else if (childName === 'track') {
+            baseOptions.tracks.push(getAttributes(child));
+          }
+        }
+      }
+      return baseOptions;
+    }
+
+    /**
+     * Set debug mode to enable/disable logs at info level.
+     *
+     * @param {boolean} enabled
+     * @fires Player#debugon
+     * @fires Player#debugoff
+     * @return {boolean|undefined}
+     */
+    debug(enabled) {
+      if (enabled === undefined) {
+        return this.debugEnabled_;
+      }
+      if (enabled) {
+        this.trigger('debugon');
+        this.previousLogLevel_ = this.log.level;
+        this.log.level('debug');
+        this.debugEnabled_ = true;
+      } else {
+        this.trigger('debugoff');
+        this.log.level(this.previousLogLevel_);
+        this.previousLogLevel_ = undefined;
+        this.debugEnabled_ = false;
+      }
+    }
+
+    /**
+     * Set or get current playback rates.
+     * Takes an array and updates the playback rates menu with the new items.
+     * Pass in an empty array to hide the menu.
+     * Values other than arrays are ignored.
+     *
+     * @fires Player#playbackrateschange
+     * @param {number[]} [newRates]
+     *                   The new rates that the playback rates menu should update to.
+     *                   An empty array will hide the menu
+     * @return {number[]} When used as a getter will return the current playback rates
+     */
+    playbackRates(newRates) {
+      if (newRates === undefined) {
+        return this.cache_.playbackRates;
+      }
+
+      // ignore any value that isn't an array
+      if (!Array.isArray(newRates)) {
+        return;
+      }
+
+      // ignore any arrays that don't only contain numbers
+      if (!newRates.every(rate => typeof rate === 'number')) {
+        return;
+      }
+      this.cache_.playbackRates = newRates;
+
+      /**
+      * fires when the playback rates in a player are changed
+      *
+      * @event Player#playbackrateschange
+      * @type {Event}
+      */
+      this.trigger('playbackrateschange');
+    }
+  }
+
+  /**
+   * Get the {@link VideoTrackList}
+   *
+   * @link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist
+   *
+   * @return {VideoTrackList}
+   *         the current video track list
+   *
+   * @method Player.prototype.videoTracks
+   */
+
+  /**
+   * Get the {@link AudioTrackList}
+   *
+   * @link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist
+   *
+   * @return {AudioTrackList}
+   *         the current audio track list
+   *
+   * @method Player.prototype.audioTracks
+   */
+
+  /**
+   * Get the {@link TextTrackList}
+   *
+   * @link http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-texttracks
+   *
+   * @return {TextTrackList}
+   *         the current text track list
+   *
+   * @method Player.prototype.textTracks
+   */
+
+  /**
+   * Get the remote {@link TextTrackList}
+   *
+   * @return {TextTrackList}
+   *         The current remote text track list
+   *
+   * @method Player.prototype.remoteTextTracks
+   */
+
+  /**
+   * Get the remote {@link HtmlTrackElementList} tracks.
+   *
+   * @return {HtmlTrackElementList}
+   *         The current remote text track element list
+   *
+   * @method Player.prototype.remoteTextTrackEls
+   */
+
+  ALL.names.forEach(function (name) {
+    const props = ALL[name];
+    Player.prototype[props.getterName] = function () {
+      if (this.tech_) {
+        return this.tech_[props.getterName]();
+      }
+
+      // if we have not yet loadTech_, we create {video,audio,text}Tracks_
+      // these will be passed to the tech during loading
+      this[props.privateName] = this[props.privateName] || new props.ListClass();
+      return this[props.privateName];
+    };
+  });
+
+  /**
+   * Get or set the `Player`'s crossorigin option. For the HTML5 player, this
+   * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+   * behavior.
+   *
+   * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+   *
+   * @param {string} [value]
+   *        The value to set the `Player`'s crossorigin to. If an argument is
+   *        given, must be one of `anonymous` or `use-credentials`.
+   *
+   * @return {string|undefined}
+   *         - The current crossorigin value of the `Player` when getting.
+   *         - undefined when setting
+   */
+  Player.prototype.crossorigin = Player.prototype.crossOrigin;
+
+  /**
+   * Global enumeration of players.
+   *
+   * The keys are the player IDs and the values are either the {@link Player}
+   * instance or `null` for disposed players.
+   *
+   * @type {Object}
+   */
+  Player.players = {};
+  const navigator = window.navigator;
+
+  /*
+   * Player instance options, surfaced using options
+   * options = Player.prototype.options_
+   * Make changes in options, not here.
+   *
+   * @type {Object}
+   * @private
+   */
+  Player.prototype.options_ = {
+    // Default order of fallback technology
+    techOrder: Tech.defaultTechOrder_,
+    html5: {},
+    // enable sourceset by default
+    enableSourceset: true,
+    // default inactivity timeout
+    inactivityTimeout: 2000,
+    // default playback rates
+    playbackRates: [],
+    // Add playback rate selection by adding rates
+    // 'playbackRates': [0.5, 1, 1.5, 2],
+    liveui: false,
+    // Included control sets
+    children: ['mediaLoader', 'posterImage', 'titleBar', 'textTrackDisplay', 'loadingSpinner', 'bigPlayButton', 'liveTracker', 'controlBar', 'errorDisplay', 'textTrackSettings', 'resizeManager'],
+    language: navigator && (navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language) || 'en',
+    // locales and their language translations
+    languages: {},
+    // Default message to show when a video cannot be played.
+    notSupportedMessage: 'No compatible source was found for this media.',
+    normalizeAutoplay: false,
+    fullscreen: {
+      options: {
+        navigationUI: 'hide'
+      }
+    },
+    breakpoints: {},
+    responsive: false,
+    audioOnlyMode: false,
+    audioPosterMode: false,
+    // Default smooth seeking to false
+    enableSmoothSeeking: false
+  };
+  TECH_EVENTS_RETRIGGER.forEach(function (event) {
+    Player.prototype[`handleTech${toTitleCase(event)}_`] = function () {
+      return this.trigger(event);
+    };
+  });
+
+  /**
+   * Fired when the player has initial duration and dimension information
+   *
+   * @event Player#loadedmetadata
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the player has downloaded data at the current playback position
+   *
+   * @event Player#loadeddata
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the current playback position has changed *
+   * During playback this is fired every 15-250 milliseconds, depending on the
+   * playback technology in use.
+   *
+   * @event Player#timeupdate
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the volume changes
+   *
+   * @event Player#volumechange
+   * @type {Event}
+   */
+
+  /**
+   * Reports whether or not a player has a plugin available.
+   *
+   * This does not report whether or not the plugin has ever been initialized
+   * on this player. For that, [usingPlugin]{@link Player#usingPlugin}.
+   *
+   * @method Player#hasPlugin
+   * @param  {string}  name
+   *         The name of a plugin.
+   *
+   * @return {boolean}
+   *         Whether or not this player has the requested plugin available.
+   */
+
+  /**
+   * Reports whether or not a player is using a plugin by name.
+   *
+   * For basic plugins, this only reports whether the plugin has _ever_ been
+   * initialized on this player.
+   *
+   * @method Player#usingPlugin
+   * @param  {string} name
+   *         The name of a plugin.
+   *
+   * @return {boolean}
+   *         Whether or not this player is using the requested plugin.
+   */
+
+  Component.registerComponent('Player', Player);
+
+  /**
+   * @file plugin.js
+   */
+
+  /**
+   * The base plugin name.
+   *
+   * @private
+   * @constant
+   * @type {string}
+   */
+  const BASE_PLUGIN_NAME = 'plugin';
+
+  /**
+   * The key on which a player's active plugins cache is stored.
+   *
+   * @private
+   * @constant
+   * @type     {string}
+   */
+  const PLUGIN_CACHE_KEY = 'activePlugins_';
+
+  /**
+   * Stores registered plugins in a private space.
+   *
+   * @private
+   * @type    {Object}
+   */
+  const pluginStorage = {};
+
+  /**
+   * Reports whether or not a plugin has been registered.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of a plugin.
+   *
+   * @return {boolean}
+   *          Whether or not the plugin has been registered.
+   */
+  const pluginExists = name => pluginStorage.hasOwnProperty(name);
+
+  /**
+   * Get a single registered plugin by name.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of a plugin.
+   *
+   * @return {typeof Plugin|Function|undefined}
+   *          The plugin (or undefined).
+   */
+  const getPlugin = name => pluginExists(name) ? pluginStorage[name] : undefined;
+
+  /**
+   * Marks a plugin as "active" on a player.
+   *
+   * Also, ensures that the player has an object for tracking active plugins.
+   *
+   * @private
+   * @param   {Player} player
+   *          A Video.js player instance.
+   *
+   * @param   {string} name
+   *          The name of a plugin.
+   */
+  const markPluginAsActive = (player, name) => {
+    player[PLUGIN_CACHE_KEY] = player[PLUGIN_CACHE_KEY] || {};
+    player[PLUGIN_CACHE_KEY][name] = true;
+  };
+
+  /**
+   * Triggers a pair of plugin setup events.
+   *
+   * @private
+   * @param  {Player} player
+   *         A Video.js player instance.
+   *
+   * @param  {PluginEventHash} hash
+   *         A plugin event hash.
+   *
+   * @param  {boolean} [before]
+   *         If true, prefixes the event name with "before". In other words,
+   *         use this to trigger "beforepluginsetup" instead of "pluginsetup".
+   */
+  const triggerSetupEvent = (player, hash, before) => {
+    const eventName = (before ? 'before' : '') + 'pluginsetup';
+    player.trigger(eventName, hash);
+    player.trigger(eventName + ':' + hash.name, hash);
+  };
+
+  /**
+   * Takes a basic plugin function and returns a wrapper function which marks
+   * on the player that the plugin has been activated.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of the plugin.
+   *
+   * @param   {Function} plugin
+   *          The basic plugin.
+   *
+   * @return {Function}
+   *          A wrapper function for the given plugin.
+   */
+  const createBasicPlugin = function (name, plugin) {
+    const basicPluginWrapper = function () {
+      // We trigger the "beforepluginsetup" and "pluginsetup" events on the player
+      // regardless, but we want the hash to be consistent with the hash provided
+      // for advanced plugins.
+      //
+      // The only potentially counter-intuitive thing here is the `instance` in
+      // the "pluginsetup" event is the value returned by the `plugin` function.
+      triggerSetupEvent(this, {
+        name,
+        plugin,
+        instance: null
+      }, true);
+      const instance = plugin.apply(this, arguments);
+      markPluginAsActive(this, name);
+      triggerSetupEvent(this, {
+        name,
+        plugin,
+        instance
+      });
+      return instance;
+    };
+    Object.keys(plugin).forEach(function (prop) {
+      basicPluginWrapper[prop] = plugin[prop];
+    });
+    return basicPluginWrapper;
+  };
+
+  /**
+   * Takes a plugin sub-class and returns a factory function for generating
+   * instances of it.
+   *
+   * This factory function will replace itself with an instance of the requested
+   * sub-class of Plugin.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of the plugin.
+   *
+   * @param   {Plugin} PluginSubClass
+   *          The advanced plugin.
+   *
+   * @return {Function}
+   */
+  const createPluginFactory = (name, PluginSubClass) => {
+    // Add a `name` property to the plugin prototype so that each plugin can
+    // refer to itself by name.
+    PluginSubClass.prototype.name = name;
+    return function (...args) {
+      triggerSetupEvent(this, {
+        name,
+        plugin: PluginSubClass,
+        instance: null
+      }, true);
+      const instance = new PluginSubClass(...[this, ...args]);
+
+      // The plugin is replaced by a function that returns the current instance.
+      this[name] = () => instance;
+      triggerSetupEvent(this, instance.getEventHash());
+      return instance;
+    };
+  };
+
+  /**
+   * Parent class for all advanced plugins.
+   *
+   * @mixes   module:evented~EventedMixin
+   * @mixes   module:stateful~StatefulMixin
+   * @fires   Player#beforepluginsetup
+   * @fires   Player#beforepluginsetup:$name
+   * @fires   Player#pluginsetup
+   * @fires   Player#pluginsetup:$name
+   * @listens Player#dispose
+   * @throws  {Error}
+   *          If attempting to instantiate the base {@link Plugin} class
+   *          directly instead of via a sub-class.
+   */
+  class Plugin {
+    /**
+     * Creates an instance of this class.
+     *
+     * Sub-classes should call `super` to ensure plugins are properly initialized.
+     *
+     * @param {Player} player
+     *        A Video.js player instance.
+     */
+    constructor(player) {
+      if (this.constructor === Plugin) {
+        throw new Error('Plugin must be sub-classed; not directly instantiated.');
+      }
+      this.player = player;
+      if (!this.log) {
+        this.log = this.player.log.createLogger(this.name);
+      }
+
+      // Make this object evented, but remove the added `trigger` method so we
+      // use the prototype version instead.
+      evented(this);
+      delete this.trigger;
+      stateful(this, this.constructor.defaultState);
+      markPluginAsActive(player, this.name);
+
+      // Auto-bind the dispose method so we can use it as a listener and unbind
+      // it later easily.
+      this.dispose = this.dispose.bind(this);
+
+      // If the player is disposed, dispose the plugin.
+      player.on('dispose', this.dispose);
+    }
+
+    /**
+     * Get the version of the plugin that was set on <pluginName>.VERSION
+     */
+    version() {
+      return this.constructor.VERSION;
+    }
+
+    /**
+     * Each event triggered by plugins includes a hash of additional data with
+     * conventional properties.
+     *
+     * This returns that object or mutates an existing hash.
+     *
+     * @param   {Object} [hash={}]
+     *          An object to be used as event an event hash.
+     *
+     * @return {PluginEventHash}
+     *          An event hash object with provided properties mixed-in.
+     */
+    getEventHash(hash = {}) {
+      hash.name = this.name;
+      hash.plugin = this.constructor;
+      hash.instance = this;
+      return hash;
+    }
+
+    /**
+     * Triggers an event on the plugin object and overrides
+     * {@link module:evented~EventedMixin.trigger|EventedMixin.trigger}.
+     *
+     * @param   {string|Object} event
+     *          An event type or an object with a type property.
+     *
+     * @param   {Object} [hash={}]
+     *          Additional data hash to merge with a
+     *          {@link PluginEventHash|PluginEventHash}.
+     *
+     * @return {boolean}
+     *          Whether or not default was prevented.
+     */
+    trigger(event, hash = {}) {
+      return trigger(this.eventBusEl_, event, this.getEventHash(hash));
+    }
+
+    /**
+     * Handles "statechanged" events on the plugin. No-op by default, override by
+     * subclassing.
+     *
+     * @abstract
+     * @param    {Event} e
+     *           An event object provided by a "statechanged" event.
+     *
+     * @param    {Object} e.changes
+     *           An object describing changes that occurred with the "statechanged"
+     *           event.
+     */
+    handleStateChanged(e) {}
+
+    /**
+     * Disposes a plugin.
+     *
+     * Subclasses can override this if they want, but for the sake of safety,
+     * it's probably best to subscribe the "dispose" event.
+     *
+     * @fires Plugin#dispose
+     */
+    dispose() {
+      const {
+        name,
+        player
+      } = this;
+
+      /**
+       * Signals that a advanced plugin is about to be disposed.
+       *
+       * @event Plugin#dispose
+       * @type  {Event}
+       */
+      this.trigger('dispose');
+      this.off();
+      player.off('dispose', this.dispose);
+
+      // Eliminate any possible sources of leaking memory by clearing up
+      // references between the player and the plugin instance and nulling out
+      // the plugin's state and replacing methods with a function that throws.
+      player[PLUGIN_CACHE_KEY][name] = false;
+      this.player = this.state = null;
+
+      // Finally, replace the plugin name on the player with a new factory
+      // function, so that the plugin is ready to be set up again.
+      player[name] = createPluginFactory(name, pluginStorage[name]);
+    }
+
+    /**
+     * Determines if a plugin is a basic plugin (i.e. not a sub-class of `Plugin`).
+     *
+     * @param   {string|Function} plugin
+     *          If a string, matches the name of a plugin. If a function, will be
+     *          tested directly.
+     *
+     * @return {boolean}
+     *          Whether or not a plugin is a basic plugin.
+     */
+    static isBasic(plugin) {
+      const p = typeof plugin === 'string' ? getPlugin(plugin) : plugin;
+      return typeof p === 'function' && !Plugin.prototype.isPrototypeOf(p.prototype);
+    }
+
+    /**
+     * Register a Video.js plugin.
+     *
+     * @param   {string} name
+     *          The name of the plugin to be registered. Must be a string and
+     *          must not match an existing plugin or a method on the `Player`
+     *          prototype.
+     *
+     * @param   {typeof Plugin|Function} plugin
+     *          A sub-class of `Plugin` or a function for basic plugins.
+     *
+     * @return {typeof Plugin|Function}
+     *          For advanced plugins, a factory function for that plugin. For
+     *          basic plugins, a wrapper function that initializes the plugin.
+     */
+    static registerPlugin(name, plugin) {
+      if (typeof name !== 'string') {
+        throw new Error(`Illegal plugin name, "${name}", must be a string, was ${typeof name}.`);
+      }
+      if (pluginExists(name)) {
+        log.warn(`A plugin named "${name}" already exists. You may want to avoid re-registering plugins!`);
+      } else if (Player.prototype.hasOwnProperty(name)) {
+        throw new Error(`Illegal plugin name, "${name}", cannot share a name with an existing player method!`);
+      }
+      if (typeof plugin !== 'function') {
+        throw new Error(`Illegal plugin for "${name}", must be a function, was ${typeof plugin}.`);
+      }
+      pluginStorage[name] = plugin;
+
+      // Add a player prototype method for all sub-classed plugins (but not for
+      // the base Plugin class).
+      if (name !== BASE_PLUGIN_NAME) {
+        if (Plugin.isBasic(plugin)) {
+          Player.prototype[name] = createBasicPlugin(name, plugin);
+        } else {
+          Player.prototype[name] = createPluginFactory(name, plugin);
+        }
+      }
+      return plugin;
+    }
+
+    /**
+     * De-register a Video.js plugin.
+     *
+     * @param  {string} name
+     *         The name of the plugin to be de-registered. Must be a string that
+     *         matches an existing plugin.
+     *
+     * @throws {Error}
+     *         If an attempt is made to de-register the base plugin.
+     */
+    static deregisterPlugin(name) {
+      if (name === BASE_PLUGIN_NAME) {
+        throw new Error('Cannot de-register base plugin.');
+      }
+      if (pluginExists(name)) {
+        delete pluginStorage[name];
+        delete Player.prototype[name];
+      }
+    }
+
+    /**
+     * Gets an object containing multiple Video.js plugins.
+     *
+     * @param   {Array} [names]
+     *          If provided, should be an array of plugin names. Defaults to _all_
+     *          plugin names.
+     *
+     * @return {Object|undefined}
+     *          An object containing plugin(s) associated with their name(s) or
+     *          `undefined` if no matching plugins exist).
+     */
+    static getPlugins(names = Object.keys(pluginStorage)) {
+      let result;
+      names.forEach(name => {
+        const plugin = getPlugin(name);
+        if (plugin) {
+          result = result || {};
+          result[name] = plugin;
+        }
+      });
+      return result;
+    }
+
+    /**
+     * Gets a plugin's version, if available
+     *
+     * @param   {string} name
+     *          The name of a plugin.
+     *
+     * @return {string}
+     *          The plugin's version or an empty string.
+     */
+    static getPluginVersion(name) {
+      const plugin = getPlugin(name);
+      return plugin && plugin.VERSION || '';
+    }
+  }
+
+  /**
+   * Gets a plugin by name if it exists.
+   *
+   * @static
+   * @method   getPlugin
+   * @memberOf Plugin
+   * @param    {string} name
+   *           The name of a plugin.
+   *
+   * @returns  {typeof Plugin|Function|undefined}
+   *           The plugin (or `undefined`).
+   */
+  Plugin.getPlugin = getPlugin;
+
+  /**
+   * The name of the base plugin class as it is registered.
+   *
+   * @type {string}
+   */
+  Plugin.BASE_PLUGIN_NAME = BASE_PLUGIN_NAME;
+  Plugin.registerPlugin(BASE_PLUGIN_NAME, Plugin);
+
+  /**
+   * Documented in player.js
+   *
+   * @ignore
+   */
+  Player.prototype.usingPlugin = function (name) {
+    return !!this[PLUGIN_CACHE_KEY] && this[PLUGIN_CACHE_KEY][name] === true;
+  };
+
+  /**
+   * Documented in player.js
+   *
+   * @ignore
+   */
+  Player.prototype.hasPlugin = function (name) {
+    return !!pluginExists(name);
+  };
+
+  /**
+   * Signals that a plugin is about to be set up on a player.
+   *
+   * @event    Player#beforepluginsetup
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin is about to be set up on a player - by name. The name
+   * is the name of the plugin.
+   *
+   * @event    Player#beforepluginsetup:$name
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin has just been set up on a player.
+   *
+   * @event    Player#pluginsetup
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin has just been set up on a player - by name. The name
+   * is the name of the plugin.
+   *
+   * @event    Player#pluginsetup:$name
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * @typedef  {Object} PluginEventHash
+   *
+   * @property {string} instance
+   *           For basic plugins, the return value of the plugin function. For
+   *           advanced plugins, the plugin instance on which the event is fired.
+   *
+   * @property {string} name
+   *           The name of the plugin.
+   *
+   * @property {string} plugin
+   *           For basic plugins, the plugin function. For advanced plugins, the
+   *           plugin class/constructor.
+   */
+
+  /**
+   * @file deprecate.js
+   * @module deprecate
+   */
+
+  /**
+   * Decorate a function with a deprecation message the first time it is called.
+   *
+   * @param  {string}   message
+   *         A deprecation message to log the first time the returned function
+   *         is called.
+   *
+   * @param  {Function} fn
+   *         The function to be deprecated.
+   *
+   * @return {Function}
+   *         A wrapper function that will log a deprecation warning the first
+   *         time it is called. The return value will be the return value of
+   *         the wrapped function.
+   */
+  function deprecate(message, fn) {
+    let warned = false;
+    return function (...args) {
+      if (!warned) {
+        log.warn(message);
+      }
+      warned = true;
+      return fn.apply(this, args);
+    };
+  }
+
+  /**
+   * Internal function used to mark a function as deprecated in the next major
+   * version with consistent messaging.
+   *
+   * @param  {number}   major   The major version where it will be removed
+   * @param  {string}   oldName The old function name
+   * @param  {string}   newName The new function name
+   * @param  {Function} fn      The function to deprecate
+   * @return {Function}         The decorated function
+   */
+  function deprecateForMajor(major, oldName, newName, fn) {
+    return deprecate(`${oldName} is deprecated and will be removed in ${major}.0; please use ${newName} instead.`, fn);
+  }
+
+  var VjsErrors = {
+    UnsupportedSidxContainer: 'unsupported-sidx-container-error',
+    DashManifestSidxParsingError: 'dash-manifest-sidx-parsing-error',
+    HlsPlaylistRequestError: 'hls-playlist-request-error',
+    SegmentUnsupportedMediaFormat: 'segment-unsupported-media-format-error',
+    UnsupportedMediaInitialization: 'unsupported-media-initialization-error',
+    SegmentSwitchError: 'segment-switch-error',
+    SegmentExceedsSourceBufferQuota: 'segment-exceeds-source-buffer-quota-error',
+    SegmentAppendError: 'segment-append-error',
+    VttLoadError: 'vtt-load-error',
+    VttCueParsingError: 'vtt-cue-parsing-error',
+    // Errors used in contrib-ads:
+    AdsBeforePrerollError: 'ads-before-preroll-error',
+    AdsPrerollError: 'ads-preroll-error',
+    AdsMidrollError: 'ads-midroll-error',
+    AdsPostrollError: 'ads-postroll-error',
+    AdsMacroReplacementFailed: 'ads-macro-replacement-failed',
+    AdsResumeContentFailed: 'ads-resume-content-failed',
+    // Errors used in contrib-eme:
+    EMEFailedToRequestMediaKeySystemAccess: 'eme-failed-request-media-key-system-access',
+    EMEFailedToCreateMediaKeys: 'eme-failed-create-media-keys',
+    EMEFailedToAttachMediaKeysToVideoElement: 'eme-failed-attach-media-keys-to-video',
+    EMEFailedToCreateMediaKeySession: 'eme-failed-create-media-key-session',
+    EMEFailedToSetServerCertificate: 'eme-failed-set-server-certificate',
+    EMEFailedToGenerateLicenseRequest: 'eme-failed-generate-license-request',
+    EMEFailedToUpdateSessionWithReceivedLicenseKeys: 'eme-failed-update-session',
+    EMEFailedToCloseSession: 'eme-failed-close-session',
+    EMEFailedToRemoveKeysFromSession: 'eme-failed-remove-keys',
+    EMEFailedToLoadSessionBySessionId: 'eme-failed-load-session'
+  };
+
+  /**
+   * @file video.js
+   * @module videojs
+   */
+
+  /**
+   * Normalize an `id` value by trimming off a leading `#`
+   *
+   * @private
+   * @param   {string} id
+   *          A string, maybe with a leading `#`.
+   *
+   * @return {string}
+   *          The string, without any leading `#`.
+   */
+  const normalizeId = id => id.indexOf('#') === 0 ? id.slice(1) : id;
+
+  /**
+   * A callback that is called when a component is ready. Does not have any
+   * parameters and any callback value will be ignored. See: {@link Component~ReadyCallback}
+   *
+   * @callback ReadyCallback
+   */
+
+  /**
+   * The `videojs()` function doubles as the main function for users to create a
+   * {@link Player} instance as well as the main library namespace.
+   *
+   * It can also be used as a getter for a pre-existing {@link Player} instance.
+   * However, we _strongly_ recommend using `videojs.getPlayer()` for this
+   * purpose because it avoids any potential for unintended initialization.
+   *
+   * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+   * of our JSDoc template, we cannot properly document this as both a function
+   * and a namespace, so its function signature is documented here.
+   *
+   * #### Arguments
+   * ##### id
+   * string|Element, **required**
+   *
+   * Video element or video element ID.
+   *
+   * ##### options
+   * Object, optional
+   *
+   * Options object for providing settings.
+   * See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+   *
+   * ##### ready
+   * {@link Component~ReadyCallback}, optional
+   *
+   * A function to be called when the {@link Player} and {@link Tech} are ready.
+   *
+   * #### Return Value
+   *
+   * The `videojs()` function returns a {@link Player} instance.
+   *
+   * @namespace
+   *
+   * @borrows AudioTrack as AudioTrack
+   * @borrows Component.getComponent as getComponent
+   * @borrows module:events.on as on
+   * @borrows module:events.one as one
+   * @borrows module:events.off as off
+   * @borrows module:events.trigger as trigger
+   * @borrows EventTarget as EventTarget
+   * @borrows module:middleware.use as use
+   * @borrows Player.players as players
+   * @borrows Plugin.registerPlugin as registerPlugin
+   * @borrows Plugin.deregisterPlugin as deregisterPlugin
+   * @borrows Plugin.getPlugins as getPlugins
+   * @borrows Plugin.getPlugin as getPlugin
+   * @borrows Plugin.getPluginVersion as getPluginVersion
+   * @borrows Tech.getTech as getTech
+   * @borrows Tech.registerTech as registerTech
+   * @borrows TextTrack as TextTrack
+   * @borrows VideoTrack as VideoTrack
+   *
+   * @param  {string|Element} id
+   *         Video element or video element ID.
+   *
+   * @param  {Object} [options]
+   *         Options object for providing settings.
+   *         See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+   *
+   * @param  {ReadyCallback} [ready]
+   *         A function to be called when the {@link Player} and {@link Tech} are
+   *         ready.
+   *
+   * @return {Player}
+   *         The `videojs()` function returns a {@link Player|Player} instance.
+   */
+  function videojs(id, options, ready) {
+    let player = videojs.getPlayer(id);
+    if (player) {
+      if (options) {
+        log.warn(`Player "${id}" is already initialised. Options will not be applied.`);
+      }
+      if (ready) {
+        player.ready(ready);
+      }
+      return player;
+    }
+    const el = typeof id === 'string' ? $('#' + normalizeId(id)) : id;
+    if (!isEl(el)) {
+      throw new TypeError('The element or ID supplied is not valid. (videojs)');
+    }
+
+    // document.body.contains(el) will only check if el is contained within that one document.
+    // This causes problems for elements in iframes.
+    // Instead, use the element's ownerDocument instead of the global document.
+    // This will make sure that the element is indeed in the dom of that document.
+    // Additionally, check that the document in question has a default view.
+    // If the document is no longer attached to the dom, the defaultView of the document will be null.
+    // If element is inside Shadow DOM (e.g. is part of a Custom element), ownerDocument.body
+    // always returns false. Instead, use the Shadow DOM root.
+    const inShadowDom = 'getRootNode' in el ? el.getRootNode() instanceof window.ShadowRoot : false;
+    const rootNode = inShadowDom ? el.getRootNode() : el.ownerDocument.body;
+    if (!el.ownerDocument.defaultView || !rootNode.contains(el)) {
+      log.warn('The element supplied is not included in the DOM');
+    }
+    options = options || {};
+
+    // Store a copy of the el before modification, if it is to be restored in destroy()
+    // If div ingest, store the parent div
+    if (options.restoreEl === true) {
+      options.restoreEl = (el.parentNode && el.parentNode.hasAttribute('data-vjs-player') ? el.parentNode : el).cloneNode(true);
+    }
+    hooks('beforesetup').forEach(hookFunction => {
+      const opts = hookFunction(el, merge(options));
+      if (!isObject(opts) || Array.isArray(opts)) {
+        log.error('please return an object in beforesetup hooks');
+        return;
+      }
+      options = merge(options, opts);
+    });
+
+    // We get the current "Player" component here in case an integration has
+    // replaced it with a custom player.
+    const PlayerComponent = Component.getComponent('Player');
+    player = new PlayerComponent(el, options, ready);
+    hooks('setup').forEach(hookFunction => hookFunction(player));
+    return player;
+  }
+  videojs.hooks_ = hooks_;
+  videojs.hooks = hooks;
+  videojs.hook = hook;
+  videojs.hookOnce = hookOnce;
+  videojs.removeHook = removeHook;
+
+  // Add default styles
+  if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true && isReal()) {
+    let style = $('.vjs-styles-defaults');
+    if (!style) {
+      style = createStyleElement('vjs-styles-defaults');
+      const head = $('head');
+      if (head) {
+        head.insertBefore(style, head.firstChild);
+      }
+      setTextContent(style, `
+      .video-js {
+        width: 300px;
+        height: 150px;
+      }
+
+      .vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: 56.25%
+      }
+    `);
+    }
+  }
+
+  // Run Auto-load players
+  // You have to wait at least once in case this script is loaded after your
+  // video in the DOM (weird behavior only with minified version)
+  autoSetupTimeout(1, videojs);
+
+  /**
+   * Current Video.js version. Follows [semantic versioning](https://semver.org/).
+   *
+   * @type {string}
+   */
+  videojs.VERSION = version;
+
+  /**
+   * The global options object. These are the settings that take effect
+   * if no overrides are specified when the player is created.
+   *
+   * @type {Object}
+   */
+  videojs.options = Player.prototype.options_;
+
+  /**
+   * Get an object with the currently created players, keyed by player ID
+   *
+   * @return {Object}
+   *         The created players
+   */
+  videojs.getPlayers = () => Player.players;
+
+  /**
+   * Get a single player based on an ID or DOM element.
+   *
+   * This is useful if you want to check if an element or ID has an associated
+   * Video.js player, but not create one if it doesn't.
+   *
+   * @param   {string|Element} id
+   *          An HTML element - `<video>`, `<audio>`, or `<video-js>` -
+   *          or a string matching the `id` of such an element.
+   *
+   * @return {Player|undefined}
+   *          A player instance or `undefined` if there is no player instance
+   *          matching the argument.
+   */
+  videojs.getPlayer = id => {
+    const players = Player.players;
+    let tag;
+    if (typeof id === 'string') {
+      const nId = normalizeId(id);
+      const player = players[nId];
+      if (player) {
+        return player;
+      }
+      tag = $('#' + nId);
+    } else {
+      tag = id;
+    }
+    if (isEl(tag)) {
+      const {
+        player,
+        playerId
+      } = tag;
+
+      // Element may have a `player` property referring to an already created
+      // player instance. If so, return that.
+      if (player || players[playerId]) {
+        return player || players[playerId];
+      }
+    }
+  };
+
+  /**
+   * Returns an array of all current players.
+   *
+   * @return {Array}
+   *         An array of all players. The array will be in the order that
+   *         `Object.keys` provides, which could potentially vary between
+   *         JavaScript engines.
+   *
+   */
+  videojs.getAllPlayers = () =>
+  // Disposed players leave a key with a `null` value, so we need to make sure
+  // we filter those out.
+  Object.keys(Player.players).map(k => Player.players[k]).filter(Boolean);
+  videojs.players = Player.players;
+  videojs.getComponent = Component.getComponent;
+
+  /**
+   * Register a component so it can referred to by name. Used when adding to other
+   * components, either through addChild `component.addChild('myComponent')` or through
+   * default children options  `{ children: ['myComponent'] }`.
+   *
+   * > NOTE: You could also just initialize the component before adding.
+   * `component.addChild(new MyComponent());`
+   *
+   * @param {string} name
+   *        The class name of the component
+   *
+   * @param {typeof Component} comp
+   *        The component class
+   *
+   * @return {typeof Component}
+   *         The newly registered component
+   */
+  videojs.registerComponent = (name, comp) => {
+    if (Tech.isTech(comp)) {
+      log.warn(`The ${name} tech was registered as a component. It should instead be registered using videojs.registerTech(name, tech)`);
+    }
+    return Component.registerComponent.call(Component, name, comp);
+  };
+  videojs.getTech = Tech.getTech;
+  videojs.registerTech = Tech.registerTech;
+  videojs.use = use;
+
+  /**
+   * An object that can be returned by a middleware to signify
+   * that the middleware is being terminated.
+   *
+   * @type {object}
+   * @property {object} middleware.TERMINATOR
+   */
+  Object.defineProperty(videojs, 'middleware', {
+    value: {},
+    writeable: false,
+    enumerable: true
+  });
+  Object.defineProperty(videojs.middleware, 'TERMINATOR', {
+    value: TERMINATOR,
+    writeable: false,
+    enumerable: true
+  });
+
+  /**
+   * A reference to the {@link module:browser|browser utility module} as an object.
+   *
+   * @type {Object}
+   * @see  {@link module:browser|browser}
+   */
+  videojs.browser = browser;
+
+  /**
+   * A reference to the {@link module:obj|obj utility module} as an object.
+   *
+   * @type {Object}
+   * @see  {@link module:obj|obj}
+   */
+  videojs.obj = Obj;
+
+  /**
+   * Deprecated reference to the {@link module:obj.merge|merge function}
+   *
+   * @type {Function}
+   * @see {@link module:obj.merge|merge}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.obj.merge instead.
+   */
+  videojs.mergeOptions = deprecateForMajor(9, 'videojs.mergeOptions', 'videojs.obj.merge', merge);
+
+  /**
+   * Deprecated reference to the {@link module:obj.defineLazyProperty|defineLazyProperty function}
+   *
+   * @type {Function}
+   * @see {@link module:obj.defineLazyProperty|defineLazyProperty}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.obj.defineLazyProperty instead.
+   */
+  videojs.defineLazyProperty = deprecateForMajor(9, 'videojs.defineLazyProperty', 'videojs.obj.defineLazyProperty', defineLazyProperty);
+
+  /**
+   * Deprecated reference to the {@link module:fn.bind_|fn.bind_ function}
+   *
+   * @type {Function}
+   * @see {@link module:fn.bind_|fn.bind_}
+   * @deprecated Deprecated and will be removed in 9.0. Please use native Function.prototype.bind instead.
+   */
+  videojs.bind = deprecateForMajor(9, 'videojs.bind', 'native Function.prototype.bind', bind_);
+  videojs.registerPlugin = Plugin.registerPlugin;
+  videojs.deregisterPlugin = Plugin.deregisterPlugin;
+
+  /**
+   * Deprecated method to register a plugin with Video.js
+   *
+   * @deprecated Deprecated and will be removed in 9.0. Use videojs.registerPlugin() instead.
+   *
+   * @param {string} name
+   *        The plugin name
+  *
+   * @param {typeof Plugin|Function} plugin
+   *         The plugin sub-class or function
+   *
+   * @return {typeof Plugin|Function}
+   */
+  videojs.plugin = (name, plugin) => {
+    log.warn('videojs.plugin() is deprecated; use videojs.registerPlugin() instead');
+    return Plugin.registerPlugin(name, plugin);
+  };
+  videojs.getPlugins = Plugin.getPlugins;
+  videojs.getPlugin = Plugin.getPlugin;
+  videojs.getPluginVersion = Plugin.getPluginVersion;
+
+  /**
+   * Adding languages so that they're available to all players.
+   * Example: `videojs.addLanguage('es', { 'Hello': 'Hola' });`
+   *
+   * @param {string} code
+   *        The language code or dictionary property
+   *
+   * @param {Object} data
+   *        The data values to be translated
+   *
+   * @return {Object}
+   *         The resulting language dictionary object
+   */
+  videojs.addLanguage = function (code, data) {
+    code = ('' + code).toLowerCase();
+    videojs.options.languages = merge(videojs.options.languages, {
+      [code]: data
+    });
+    return videojs.options.languages[code];
+  };
+
+  /**
+   * A reference to the {@link module:log|log utility module} as an object.
+   *
+   * @type {Function}
+   * @see  {@link module:log|log}
+   */
+  videojs.log = log;
+  videojs.createLogger = createLogger;
+
+  /**
+   * A reference to the {@link module:time|time utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:time|time}
+   */
+  videojs.time = Time;
+
+  /**
+   * Deprecated reference to the {@link module:time.createTimeRanges|createTimeRanges function}
+   *
+   * @type {Function}
+   * @see {@link module:time.createTimeRanges|createTimeRanges}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.createTimeRanges instead.
+   */
+  videojs.createTimeRange = deprecateForMajor(9, 'videojs.createTimeRange', 'videojs.time.createTimeRanges', createTimeRanges);
+
+  /**
+   * Deprecated reference to the {@link module:time.createTimeRanges|createTimeRanges function}
+   *
+   * @type {Function}
+   * @see {@link module:time.createTimeRanges|createTimeRanges}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.createTimeRanges instead.
+   */
+  videojs.createTimeRanges = deprecateForMajor(9, 'videojs.createTimeRanges', 'videojs.time.createTimeRanges', createTimeRanges);
+
+  /**
+   * Deprecated reference to the {@link module:time.formatTime|formatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.formatTime|formatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.format instead.
+   */
+  videojs.formatTime = deprecateForMajor(9, 'videojs.formatTime', 'videojs.time.formatTime', formatTime);
+
+  /**
+   * Deprecated reference to the {@link module:time.setFormatTime|setFormatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.setFormatTime|setFormatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.setFormat instead.
+   */
+  videojs.setFormatTime = deprecateForMajor(9, 'videojs.setFormatTime', 'videojs.time.setFormatTime', setFormatTime);
+
+  /**
+   * Deprecated reference to the {@link module:time.resetFormatTime|resetFormatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.resetFormatTime|resetFormatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.resetFormat instead.
+   */
+  videojs.resetFormatTime = deprecateForMajor(9, 'videojs.resetFormatTime', 'videojs.time.resetFormatTime', resetFormatTime);
+
+  /**
+   * Deprecated reference to the {@link module:url.parseUrl|Url.parseUrl function}
+   *
+   * @type {Function}
+   * @see {@link module:url.parseUrl|parseUrl}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.url.parseUrl instead.
+   */
+  videojs.parseUrl = deprecateForMajor(9, 'videojs.parseUrl', 'videojs.url.parseUrl', parseUrl);
+
+  /**
+   * Deprecated reference to the {@link module:url.isCrossOrigin|Url.isCrossOrigin function}
+   *
+   * @type {Function}
+   * @see {@link module:url.isCrossOrigin|isCrossOrigin}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.url.isCrossOrigin instead.
+   */
+  videojs.isCrossOrigin = deprecateForMajor(9, 'videojs.isCrossOrigin', 'videojs.url.isCrossOrigin', isCrossOrigin);
+  videojs.EventTarget = EventTarget;
+  videojs.any = any;
+  videojs.on = on;
+  videojs.one = one;
+  videojs.off = off;
+  videojs.trigger = trigger;
+
+  /**
+   * A cross-browser XMLHttpRequest wrapper.
+   *
+   * @function
+   * @param    {Object} options
+   *           Settings for the request.
+   *
+   * @return   {XMLHttpRequest|XDomainRequest}
+   *           The request object.
+   *
+   * @see      https://github.com/Raynos/xhr
+   */
+  videojs.xhr = lib;
+  videojs.TextTrack = TextTrack;
+  videojs.AudioTrack = AudioTrack;
+  videojs.VideoTrack = VideoTrack;
+  ['isEl', 'isTextNode', 'createEl', 'hasClass', 'addClass', 'removeClass', 'toggleClass', 'setAttributes', 'getAttributes', 'emptyEl', 'appendContent', 'insertContent'].forEach(k => {
+    videojs[k] = function () {
+      log.warn(`videojs.${k}() is deprecated; use videojs.dom.${k}() instead`);
+      return Dom[k].apply(null, arguments);
+    };
+  });
+  videojs.computedStyle = deprecateForMajor(9, 'videojs.computedStyle', 'videojs.dom.computedStyle', computedStyle);
+
+  /**
+   * A reference to the {@link module:dom|DOM utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:dom|dom}
+   */
+  videojs.dom = Dom;
+
+  /**
+   * A reference to the {@link module:fn|fn utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:fn|fn}
+   */
+  videojs.fn = Fn;
+
+  /**
+   * A reference to the {@link module:num|num utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:num|num}
+   */
+  videojs.num = Num;
+
+  /**
+   * A reference to the {@link module:str|str utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:str|str}
+   */
+  videojs.str = Str;
+
+  /**
+   * A reference to the {@link module:url|URL utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:url|url}
+   */
+  videojs.url = Url;
+
+  // The list of possible error types to occur in video.js
+  videojs.Error = VjsErrors;
+
+  return videojs;
+
+}));
diff --git a/priv/static/video.js/alt/video.core.novtt.min.js b/priv/static/video.js/alt/video.core.novtt.min.js
new file mode 100644
index 0000000..92d2a4d
--- /dev/null
+++ b/priv/static/video.js/alt/video.core.novtt.min.js
@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Video.js 8.12.0 <http://videojs.com/>
+ * Copyright Brightcove, Inc. <https://www.brightcove.com/>
+ * Available under Apache License Version 2.0
+ * <https://github.com/videojs/video.js/blob/main/LICENSE>
+ *
+ * Includes vtt.js <https://github.com/mozilla/vtt.js>
+ * Available under Apache License Version 2.0
+ * <https://github.com/mozilla/vtt.js/blob/main/LICENSE>
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).videojs=t()}(this,function(){"use strict";var D="8.12.0";const s={},B=function(e,t){return s[e]=s[e]||[],t&&(s[e]=s[e].concat(t)),s[e]};function R(e,t){return!((t=B(e).indexOf(t))<=-1||(s[e]=s[e].slice(),s[e].splice(t,1),0))}const F={prefixed:!0};var H=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror","fullscreen"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror","-webkit-full-screen"]],z=H[0];let V;for(let e=0;e<H.length;e++)if(H[e][1]in document){V=H[e];break}if(V){for(let e=0;e<V.length;e++)F[z[e]]=V[e];F.prefixed=V[0]!==z[0]}let d=[];function q(e){return n(e)?Object.keys(e):[]}const l=function i(r,n=":",a=""){let t="info",s;function o(...e){s("log",t,e)}var l,h,c;return s=(l=r,h=o,c=a,(t,s,i)=>{var e,s=h.levels[s],r=new RegExp(`^(${s})$`);let n=l;if("log"!==t&&i.unshift(t.toUpperCase()+":"),c&&(n="%c"+l,i.unshift(c)),i.unshift(n+":"),d&&(d.push([].concat(i)),e=d.length-1e3,d.splice(0,0<e?e:0)),window.console){let e=window.console[t];(e=e||"debug"!==t?e:window.console.info||window.console.log)&&s&&r.test(t)&&e[Array.isArray(i)?"apply":"call"](window.console,i)}}),o.createLogger=(e,t,s)=>i(r+` ${t=void 0!==t?t:n} `+e,t,void 0!==s?s:a),o.createNewLogger=(e,t,s)=>i(e,t,s),o.levels={all:"debug|log|warn|error",off:"",debug:"debug|log|warn|error",info:"log|warn|error",warn:"warn|error",error:"error",DEFAULT:t},o.level=e=>{if("string"==typeof e){if(!o.levels.hasOwnProperty(e))throw new Error(`"${e}" in not a valid log level`);t=e}return t},o.history=()=>d?[].concat(d):[],o.history.filter=t=>(d||[]).filter(e=>new RegExp(`.*${t}.*`).test(e[0])),o.history.clear=()=>{d&&(d.length=0)},o.history.disable=()=>{null!==d&&(d.length=0,d=null)},o.history.enable=()=>{null===d&&(d=[])},o.error=(...e)=>s("error",t,e),o.warn=(...e)=>s("warn",t,e),o.debug=(...e)=>s("debug",t,e),o}("VIDEOJS"),$=l.createLogger,K=Object.prototype.toString;function U(t,s){q(t).forEach(e=>s(t[e],e))}function W(s,i,e=0){return q(s).reduce((e,t)=>i(e,s[t],t),e)}function n(e){return!!e&&"object"==typeof e}function G(e){return n(e)&&"[object Object]"===K.call(e)&&e.constructor===Object}function h(...e){const s={};return e.forEach(e=>{e&&U(e,(e,t)=>{G(e)?(G(s[t])||(s[t]={}),s[t]=h(s[t],e)):s[t]=e})}),s}function X(e={}){var t,s=[];for(const i in e)e.hasOwnProperty(i)&&(t=e[i],s.push(t));return s}function Y(t,s,i,e=!0){const r=e=>Object.defineProperty(t,s,{value:e,enumerable:!0,writable:!0});var n={configurable:!0,enumerable:!0,get(){var e=i();return r(e),e}};return e&&(n.set=r),Object.defineProperty(t,s,n)}var Q=Object.freeze({__proto__:null,each:U,reduce:W,isObject:n,isPlain:G,merge:h,values:X,defineLazyProperty:Y});let J=!1,Z=null,o=!1,ee,te=!1,se=!1,ie=!1,c=!1,re=null,ne=null,ae=null,oe=!1,le=!1,he=!1,ce=!1,de=!1,ue=!1,pe=!1;const ge=Boolean(fe()&&("ontouchstart"in window||window.navigator.maxTouchPoints||window.DocumentTouch&&window.document instanceof window.DocumentTouch));var ve,e=window.navigator&&window.navigator.userAgentData;if(e&&e.platform&&e.brands&&(o="Android"===e.platform,se=Boolean(e.brands.find(e=>"Microsoft Edge"===e.brand)),ie=Boolean(e.brands.find(e=>"Chromium"===e.brand)),c=!se&&ie,re=ne=(e.brands.find(e=>"Chromium"===e.brand)||{}).version||null,le="Windows"===e.platform),!ie){const N=window.navigator&&window.navigator.userAgent||"";J=/iPod/i.test(N),Z=(e=N.match(/OS (\d+)_/i))&&e[1]?e[1]:null,o=/Android/i.test(N),ee=(e=N.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i))?(xt=e[1]&&parseFloat(e[1]),ve=e[2]&&parseFloat(e[2]),xt&&ve?parseFloat(e[1]+"."+e[2]):xt||null):null,te=/Firefox/i.test(N),se=/Edg/i.test(N),ie=/Chrome/i.test(N)||/CriOS/i.test(N),c=!se&&ie,re=ne=(ve=N.match(/(Chrome|CriOS)\/(\d+)/))&&ve[2]?parseFloat(ve[2]):null,ae=function(){var e=/MSIE\s(\d+)\.\d/.exec(N);let t=e&&parseFloat(e[1]);return t=!t&&/Trident\/7.0/i.test(N)&&/rv:11.0/.test(N)?11:t}(),de=/Tizen/i.test(N),ue=/Web0S/i.test(N),pe=de||ue,oe=/Safari/i.test(N)&&!c&&!o&&!se&&!pe,le=/Windows/i.test(N),he=/iPad/i.test(N)||oe&&ge&&!/iPhone/i.test(N),ce=/iPhone/i.test(N)&&!he}const u=ce||he||J,me=(oe||u)&&!c;var _e=Object.freeze({__proto__:null,get IS_IPOD(){return J},get IOS_VERSION(){return Z},get IS_ANDROID(){return o},get ANDROID_VERSION(){return ee},get IS_FIREFOX(){return te},get IS_EDGE(){return se},get IS_CHROMIUM(){return ie},get IS_CHROME(){return c},get CHROMIUM_VERSION(){return re},get CHROME_VERSION(){return ne},get IE_VERSION(){return ae},get IS_SAFARI(){return oe},get IS_WINDOWS(){return le},get IS_IPAD(){return he},get IS_IPHONE(){return ce},get IS_TIZEN(){return de},get IS_WEBOS(){return ue},get IS_SMART_TV(){return pe},TOUCH_ENABLED:ge,IS_IOS:u,IS_ANY_SAFARI:me});function ye(e){return"string"==typeof e&&Boolean(e.trim())}function fe(){return document===window.document}function be(e){return n(e)&&1===e.nodeType}function Te(){try{return window.parent!==window.self}catch(e){return!0}}function ke(s){return function(e,t){return ye(e)?(t=be(t=ye(t)?document.querySelector(t):t)?t:document)[s]&&t[s](e):document[s](null)}}function p(e="div",s={},t={},i){const r=document.createElement(e);return Object.getOwnPropertyNames(s).forEach(function(e){var t=s[e];"textContent"===e?Ce(r,t):r[e]===t&&"tabIndex"!==e||(r[e]=t)}),Object.getOwnPropertyNames(t).forEach(function(e){r.setAttribute(e,t[e])}),i&&Ve(r,i),r}function Ce(e,t){return"undefined"==typeof e.textContent?e.innerText=t:e.textContent=t,e}function we(e,t){t.firstChild?t.insertBefore(e,t.firstChild):t.appendChild(e)}function Ee(e,t){if(0<=t.indexOf(" "))throw new Error("class has illegal whitespace characters");return e.classList.contains(t)}function Se(e,...t){return e.classList.add(...t.reduce((e,t)=>e.concat(t.split(/\s+/)),[])),e}function xe(e,...t){return e?(e.classList.remove(...t.reduce((e,t)=>e.concat(t.split(/\s+/)),[])),e):(l.warn("removeClass was called with an element that doesn't exist"),null)}function je(t,e,s){return"boolean"!=typeof(s="function"==typeof s?s(t,e):s)&&(s=void 0),e.split(/\s+/).forEach(e=>t.classList.toggle(e,s)),t}function Pe(s,i){Object.getOwnPropertyNames(i).forEach(function(e){var t=i[e];null===t||"undefined"==typeof t||!1===t?s.removeAttribute(e):s.setAttribute(e,!0===t?"":t)})}function Ie(e){var s={},i=["autoplay","controls","playsinline","loop","muted","default","defaultMuted"];if(e&&e.attributes&&0<e.attributes.length){var r=e.attributes;for(let t=r.length-1;0<=t;t--){var n=r[t].name;let e=r[t].value;i.includes(n)&&(e=null!==e),s[n]=e}}return s}function Me(e,t){return e.getAttribute(t)}function Oe(e,t,s){e.setAttribute(t,s)}function Ae(e,t){e.removeAttribute(t)}function Le(){document.body.focus(),document.onselectstart=function(){return!1}}function Ne(){document.onselectstart=function(){return!0}}function De(e){if(e&&e.getBoundingClientRect&&e.parentNode){const t=e.getBoundingClientRect(),s={};return["bottom","height","left","right","top","width"].forEach(e=>{void 0!==t[e]&&(s[e]=t[e])}),s.height||(s.height=parseFloat(We(e,"height"))),s.width||(s.width=parseFloat(We(e,"width"))),s}}function Be(e){if(!e||!e.offsetParent)return{left:0,top:0,width:0,height:0};var t=e.offsetWidth,s=e.offsetHeight;let i=0,r=0;for(;e.offsetParent&&e!==document[F.fullscreenElement];)i+=e.offsetLeft,r+=e.offsetTop,e=e.offsetParent;return{left:i,top:r,width:t,height:s}}function Re(t,e){var s={x:0,y:0};if(u){let e=t;for(;e&&"html"!==e.nodeName.toLowerCase();){var i,r=We(e,"transform");/^matrix/.test(r)?(i=r.slice(7,-1).split(/,\s/).map(Number),s.x+=i[4],s.y+=i[5]):/^matrix3d/.test(r)&&(i=r.slice(9,-1).split(/,\s/).map(Number),s.x+=i[12],s.y+=i[13]),e=e.parentNode}}var n={},a=Be(e.target),t=Be(t),o=t.width,l=t.height;let h=e.offsetY-(t.top-a.top),c=e.offsetX-(t.left-a.left);return e.changedTouches&&(c=e.changedTouches[0].pageX-t.left,h=e.changedTouches[0].pageY+t.top,u)&&(c-=s.x,h-=s.y),n.y=1-Math.max(0,Math.min(1,h/l)),n.x=Math.max(0,Math.min(1,c/o)),n}function Fe(e){return n(e)&&3===e.nodeType}function He(e){for(;e.firstChild;)e.removeChild(e.firstChild);return e}function ze(e){return"function"==typeof e&&(e=e()),(Array.isArray(e)?e:[e]).map(e=>be(e="function"==typeof e?e():e)||Fe(e)?e:"string"==typeof e&&/\S/.test(e)?document.createTextNode(e):void 0).filter(e=>e)}function Ve(t,e){return ze(e).forEach(e=>t.appendChild(e)),t}function qe(e,t){return Ve(He(e),t)}function $e(e){return void 0===e.button&&void 0===e.buttons||0===e.button&&void 0===e.buttons||"mouseup"===e.type&&0===e.button&&0===e.buttons||0===e.button&&1===e.buttons}const Ke=ke("querySelector"),Ue=ke("querySelectorAll");function We(t,s){if(!t||!s)return"";if("function"!=typeof window.getComputedStyle)return"";{let e;try{e=window.getComputedStyle(t)}catch(e){return""}return e?e.getPropertyValue(s)||e[s]:""}}function Ge(i){[...document.styleSheets].forEach(t=>{try{var s=[...t.cssRules].map(e=>e.cssText).join(""),e=document.createElement("style");e.textContent=s,i.document.head.appendChild(e)}catch(e){s=document.createElement("link");s.rel="stylesheet",s.type=t.type,s.media=t.media.mediaText,s.href=t.href,i.document.head.appendChild(s)}})}var Xe=Object.freeze({__proto__:null,isReal:fe,isEl:be,isInFrame:Te,createEl:p,textContent:Ce,prependTo:we,hasClass:Ee,addClass:Se,removeClass:xe,toggleClass:je,setAttributes:Pe,getAttributes:Ie,getAttribute:Me,setAttribute:Oe,removeAttribute:Ae,blockTextSelection:Le,unblockTextSelection:Ne,getBoundingClientRect:De,findPosition:Be,getPointerPosition:Re,isTextNode:Fe,emptyEl:He,normalizeContent:ze,appendContent:Ve,insertContent:qe,isSingleLeftClick:$e,$:Ke,$$:Ue,computedStyle:We,copyStyleSheetsToWindow:Ge});let Ye=!1,Qe;function Je(){if(!1!==Qe.options.autoSetup){var e=Array.prototype.slice.call(document.getElementsByTagName("video")),t=Array.prototype.slice.call(document.getElementsByTagName("audio")),s=Array.prototype.slice.call(document.getElementsByTagName("video-js")),i=e.concat(t,s);if(i&&0<i.length)for(let e=0,t=i.length;e<t;e++){var r=i[e];if(!r||!r.getAttribute){Ze(1);break}void 0===r.player&&null!==r.getAttribute("data-setup")&&Qe(r)}else Ye||Ze(1)}}function Ze(e,t){fe()&&(t&&(Qe=t),window.setTimeout(Je,e))}function et(){Ye=!0,window.removeEventListener("load",et)}fe()&&("complete"===document.readyState?et():window.addEventListener("load",et));function tt(e){var t=document.createElement("style");return t.className=e,t}function st(e,t){e.styleSheet?e.styleSheet.cssText=t:e.textContent=t}var g=new WeakMap;let v=3;function it(e,t){var s;g.has(e)&&(0===(s=g.get(e)).handlers[t].length&&(delete s.handlers[t],e.removeEventListener?e.removeEventListener(t,s.dispatcher,!1):e.detachEvent&&e.detachEvent("on"+t,s.dispatcher)),Object.getOwnPropertyNames(s.handlers).length<=0&&(delete s.handlers,delete s.dispatcher,delete s.disabled),0===Object.getOwnPropertyNames(s).length)&&g.delete(e)}function rt(t,s,e,i){e.forEach(function(e){t(s,e,i)})}function nt(e){if(!e.fixed_){if(!e||!e.isPropagationStopped||!e.isImmediatePropagationStopped){const n=e||window.event;e={};for(const a in n)"layerX"===a||"layerY"===a||"keyLocation"===a||"webkitMovementX"===a||"webkitMovementY"===a||"path"===a||"returnValue"===a&&n.preventDefault||(e[a]=n[a]);var t,s;e.target||(e.target=e.srcElement||document),e.relatedTarget||(e.relatedTarget=e.fromElement===e.target?e.toElement:e.fromElement),e.preventDefault=function(){n.preventDefault&&n.preventDefault(),e.returnValue=!1,n.returnValue=!1,e.defaultPrevented=!0},e.defaultPrevented=!1,e.stopPropagation=function(){n.stopPropagation&&n.stopPropagation(),e.cancelBubble=!0,n.cancelBubble=!0,e.isPropagationStopped=i},e.isPropagationStopped=r,e.stopImmediatePropagation=function(){n.stopImmediatePropagation&&n.stopImmediatePropagation(),e.isImmediatePropagationStopped=i,e.stopPropagation()},e.isImmediatePropagationStopped=r,null!==e.clientX&&void 0!==e.clientX&&(t=document.documentElement,s=document.body,e.pageX=e.clientX+(t&&t.scrollLeft||s&&s.scrollLeft||0)-(t&&t.clientLeft||s&&s.clientLeft||0),e.pageY=e.clientY+(t&&t.scrollTop||s&&s.scrollTop||0)-(t&&t.clientTop||s&&s.clientTop||0)),e.which=e.charCode||e.keyCode,null!==e.button&&void 0!==e.button&&(e.button=1&e.button?0:4&e.button?1:2&e.button?2:0)}e.fixed_=!0}return e;function i(){return!0}function r(){return!1}}let at;const ot=["touchstart","touchmove"];function m(n,t,e){if(Array.isArray(t))return rt(m,n,t,e);g.has(n)||g.set(n,{});const a=g.get(n);if(a.handlers||(a.handlers={}),a.handlers[t]||(a.handlers[t]=[]),e.guid||(e.guid=v++),a.handlers[t].push(e),a.dispatcher||(a.disabled=!1,a.dispatcher=function(s,i){if(!a.disabled){s=nt(s);var e=a.handlers[s.type];if(e){var r=e.slice(0);for(let e=0,t=r.length;e<t&&!s.isImmediatePropagationStopped();e++)try{r[e].call(n,s,i)}catch(e){l.error(e)}}}}),1===a.handlers[t].length)if(n.addEventListener){let e=!1;(function(){if("boolean"!=typeof at){at=!1;try{var e=Object.defineProperty({},"passive",{get(){at=!0}});window.addEventListener("test",null,e),window.removeEventListener("test",null,e)}catch(e){}}return at})()&&-1<ot.indexOf(t)&&(e={passive:!0}),n.addEventListener(t,a.dispatcher,e)}else n.attachEvent&&n.attachEvent("on"+t,a.dispatcher)}function _(e,t,s){if(g.has(e)){const n=g.get(e);if(n.handlers){if(Array.isArray(t))return rt(_,e,t,s);var i=function(e,t){n.handlers[t]=[],it(e,t)};if(void 0===t)for(const a in n.handlers)Object.prototype.hasOwnProperty.call(n.handlers||{},a)&&i(e,a);else{var r=n.handlers[t];if(r)if(s){if(s.guid)for(let e=0;e<r.length;e++)r[e].guid===s.guid&&r.splice(e--,1);it(e,t)}else i(e,t)}}}}function lt(e,t,s){var i=g.has(e)?g.get(e):{},r=e.parentNode||e.ownerDocument;return"string"==typeof t?t={type:t,target:e}:t.target||(t.target=e),t=nt(t),i.dispatcher&&i.dispatcher.call(e,t,s),r&&!t.isPropagationStopped()&&!0===t.bubbles?lt.call(null,r,t,s):!r&&!t.defaultPrevented&&t.target&&t.target[t.type]&&(g.has(t.target)||g.set(t.target,{}),i=g.get(t.target),t.target[t.type])&&(i.disabled=!0,"function"==typeof t.target[t.type]&&t.target[t.type](),i.disabled=!1),!t.defaultPrevented}function ht(e,t,s){if(Array.isArray(t))return rt(ht,e,t,s);function i(){_(e,t,i),s.apply(this,arguments)}i.guid=s.guid=s.guid||v++,m(e,t,i)}function ct(e,t,s){function i(){_(e,t,i),s.apply(this,arguments)}i.guid=s.guid=s.guid||v++,m(e,t,i)}var dt=Object.freeze({__proto__:null,fixEvent:nt,on:m,off:_,trigger:lt,one:ht,any:ct});function y(e,t,s){return t.guid||(t.guid=v++),(e=t.bind(e)).guid=s?s+"_"+t.guid:t.guid,e}function r(s,i){let r=window.performance.now();return function(...e){var t=window.performance.now();t-r>=i&&(s(...e),r=t)}}function ut(i,r,n,a=window){let o;function e(){const e=this,t=arguments;let s=function(){o=null,s=null,n||i.apply(e,t)};!o&&n&&i.apply(e,t),a.clearTimeout(o),o=a.setTimeout(s,r)}return e.cancel=()=>{a.clearTimeout(o),o=null},e}e=Object.freeze({__proto__:null,UPDATE_REFRESH_INTERVAL:30,bind_:y,throttle:r,debounce:ut});let pt;class i{on(e,t){var s=this.addEventListener;this.addEventListener=()=>{},m(this,e,t),this.addEventListener=s}off(e,t){_(this,e,t)}one(e,t){var s=this.addEventListener;this.addEventListener=()=>{},ht(this,e,t),this.addEventListener=s}any(e,t){var s=this.addEventListener;this.addEventListener=()=>{},ct(this,e,t),this.addEventListener=s}trigger(e){var t=e.type||e;e=nt(e="string"==typeof e?{type:t}:e),this.allowedEvents_[t]&&this["on"+t]&&this["on"+t](e),lt(this,e)}queueTrigger(e){pt=pt||new Map;const t=e.type||e;let s=pt.get(this);s||(s=new Map,pt.set(this,s));var i=s.get(t),i=(s.delete(t),window.clearTimeout(i),window.setTimeout(()=>{s.delete(t),0===s.size&&(s=null,pt.delete(this)),this.trigger(e)},0));s.set(t,i)}}i.prototype.allowedEvents_={},i.prototype.addEventListener=i.prototype.on,i.prototype.removeEventListener=i.prototype.off,i.prototype.dispatchEvent=i.prototype.trigger;const gt=e=>"function"==typeof e.name?e.name():"string"==typeof e.name?e.name:e.name_||(e.constructor&&e.constructor.name?e.constructor.name:typeof e),a=t=>t instanceof i||!!t.eventBusEl_&&["on","one","off","trigger"].every(e=>"function"==typeof t[e]),vt=e=>"string"==typeof e&&/\S/.test(e)||Array.isArray(e)&&!!e.length,mt=(e,t,s)=>{if(!e||!e.nodeName&&!a(e))throw new Error(`Invalid target for ${gt(t)}#${s}; must be a DOM node or evented object.`)},_t=(e,t,s)=>{if(!vt(e))throw new Error(`Invalid event type for ${gt(t)}#${s}; must be a non-empty string or array.`)},yt=(e,t,s)=>{if("function"!=typeof e)throw new Error(`Invalid listener for ${gt(t)}#${s}; must be a function.`)},ft=(e,t,s)=>{var i=t.length<3||t[0]===e||t[0]===e.eventBusEl_;let r,n,a;return i?(r=e.eventBusEl_,3<=t.length&&t.shift(),[n,a]=t):[r,n,a]=t,mt(r,e,s),_t(n,e,s),yt(a,e,s),a=y(e,a),{isTargetingSelf:i,target:r,type:n,listener:a}},bt=(e,t,s,i)=>{mt(e,e,t),e.nodeName?dt[t](e,s,i):e[t](s,i)},Tt={on(...e){const{isTargetingSelf:t,target:s,type:i,listener:r}=ft(this,e,"on");if(bt(s,"on",i,r),!t){const n=()=>this.off(s,i,r);n.guid=r.guid;e=()=>this.off("dispose",n);e.guid=r.guid,bt(this,"on","dispose",n),bt(s,"on","dispose",e)}},one(...e){const{isTargetingSelf:t,target:s,type:i,listener:r}=ft(this,e,"one");if(t)bt(s,"one",i,r);else{const n=(...e)=>{this.off(s,i,n),r.apply(null,e)};n.guid=r.guid,bt(s,"one",i,n)}},any(...e){const{isTargetingSelf:t,target:s,type:i,listener:r}=ft(this,e,"any");if(t)bt(s,"any",i,r);else{const n=(...e)=>{this.off(s,i,n),r.apply(null,e)};n.guid=r.guid,bt(s,"any",i,n)}},off(e,t,s){!e||vt(e)?_(this.eventBusEl_,e,t):(e=e,t=t,mt(e,this,"off"),_t(t,this,"off"),yt(s,this,"off"),s=y(this,s),this.off("dispose",s),e.nodeName?(_(e,t,s),_(e,"dispose",s)):a(e)&&(e.off(t,s),e.off("dispose",s)))},trigger(e,t){mt(this.eventBusEl_,this,"trigger");var s=e&&"string"!=typeof e?e.type:e;if(vt(s))return lt(this.eventBusEl_,e,t);throw new Error(`Invalid event type for ${gt(this)}#trigger; `+"must be a non-empty string or object with a type key that has a non-empty value.")}};function kt(e,t={}){t=t.eventBusKey;if(t){if(!e[t].nodeName)throw new Error(`The eventBusKey "${t}" does not refer to an element.`);e.eventBusEl_=e[t]}else e.eventBusEl_=p("span",{className:"vjs-event-bus"});Object.assign(e,Tt),e.eventedCallbacks&&e.eventedCallbacks.forEach(e=>{e()}),e.on("dispose",()=>{e.off(),[e,e.el_,e.eventBusEl_].forEach(function(e){e&&g.has(e)&&g.delete(e)}),window.setTimeout(()=>{e.eventBusEl_=null},0)})}const Ct={state:{},setState(e){"function"==typeof e&&(e=e());let s;return U(e,(e,t)=>{this.state[t]!==e&&((s=s||{})[t]={from:this.state[t],to:e}),this.state[t]=e}),s&&a(this)&&this.trigger({changes:s,type:"statechanged"}),s}};function wt(e,t){Object.assign(e,Ct),e.state=Object.assign({},e.state,t),"function"==typeof e.handleStateChanged&&a(e)&&e.on("statechanged",e.handleStateChanged)}function Et(e){return"string"!=typeof e?e:e.replace(/./,e=>e.toLowerCase())}function f(e){return"string"!=typeof e?e:e.replace(/./,e=>e.toUpperCase())}function St(e,t){return f(e)===f(t)}var xt=Object.freeze({__proto__:null,toLowerCase:Et,toTitleCase:f,titleCaseEquals:St}),t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function jt(e,t){return e(t={exports:{}},t.exports),t.exports}var b=jt(function(e,t){function s(e){var t;return"number"==typeof(e=e&&"object"==typeof e&&(t=e.which||e.keyCode||e.charCode)?t:e)?o[e]:(t=String(e),i[t.toLowerCase()]||r[t.toLowerCase()]||(1===t.length?t.charCodeAt(0):void 0))}s.isEventKey=function(e,t){if(e&&"object"==typeof e){e=e.which||e.keyCode||e.charCode;if(null!=e)if("string"==typeof t){var s=i[t.toLowerCase()];if(s)return s===e;if(s=r[t.toLowerCase()])return s===e}else if("number"==typeof t)return t===e;return!1}};for(var i=(t=e.exports=s).code=t.codes={backspace:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,"pause/break":19,"caps lock":20,esc:27,space:32,"page up":33,"page down":34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,command:91,"left command":91,"right command":93,"numpad *":106,"numpad +":107,"numpad -":109,"numpad .":110,"numpad /":111,"num lock":144,"scroll lock":145,"my computer":182,"my calculator":183,";":186,"=":187,",":188,"-":189,".":190,"/":191,"`":192,"[":219,"\\":220,"]":221,"'":222},r=t.aliases={windows:91,"⇧":16,"⌥":18,"⌃":17,"⌘":91,ctl:17,control:17,option:18,pause:19,break:19,caps:20,return:13,escape:27,spc:32,spacebar:32,pgup:33,pgdn:34,ins:45,del:46,cmd:91},n=97;n<123;n++)i[String.fromCharCode(n)]=n-32;for(var n=48;n<58;n++)i[n-48]=n;for(n=1;n<13;n++)i["f"+n]=n+111;for(n=0;n<10;n++)i["numpad "+n]=n+96;var a,o=t.names=t.title={};for(n in i)o[i[n]]=n;for(a in r)i[a]=r[a]});b.code,b.codes,b.aliases,b.names,b.title;class T{constructor(e,t,s){!e&&this.play?this.player_=e=this:this.player_=e,this.isDisposed_=!1,this.parentComponent_=null,this.options_=h({},this.options_),t=this.options_=h(this.options_,t),this.id_=t.id||t.el&&t.el.id,this.id_||(e=e&&e.id&&e.id()||"no_player",this.id_=e+"_component_"+v++),this.name_=t.name||null,t.el?this.el_=t.el:!1!==t.createEl&&(this.el_=this.createEl()),t.className&&this.el_&&t.className.split(" ").forEach(e=>this.addClass(e)),["on","off","one","any","trigger"].forEach(e=>{this[e]=void 0}),!1!==t.evented&&(kt(this,{eventBusKey:this.el_?"el_":null}),this.handleLanguagechange=this.handleLanguagechange.bind(this),this.on(this.player_,"languagechange",this.handleLanguagechange)),wt(this,this.constructor.defaultState),this.children_=[],this.childIndex_={},this.childNameIndex_={},this.setTimeoutIds_=new Set,this.setIntervalIds_=new Set,this.rafIds_=new Set,this.namedRafs_=new Map,(this.clearingTimersOnDispose_=!1)!==t.initChildren&&this.initChildren(),this.ready(s),!1!==t.reportTouchActivity&&this.enableTouchActivity()}on(e,t){}off(e,t){}one(e,t){}any(e,t){}trigger(e,t){}dispose(e={}){if(!this.isDisposed_){if(this.readyQueue_&&(this.readyQueue_.length=0),this.trigger({type:"dispose",bubbles:!1}),this.isDisposed_=!0,this.children_)for(let e=this.children_.length-1;0<=e;e--)this.children_[e].dispose&&this.children_[e].dispose();this.children_=null,this.childIndex_=null,this.childNameIndex_=null,this.parentComponent_=null,this.el_&&(this.el_.parentNode&&(e.restoreEl?this.el_.parentNode.replaceChild(e.restoreEl,this.el_):this.el_.parentNode.removeChild(this.el_)),this.el_=null),this.player_=null}}isDisposed(){return Boolean(this.isDisposed_)}player(){return this.player_}options(e){return e&&(this.options_=h(this.options_,e)),this.options_}el(){return this.el_}createEl(e,t,s){return p(e,t,s)}localize(e,i,t=e){var s=this.player_.language&&this.player_.language(),r=this.player_.languages&&this.player_.languages(),n=r&&r[s],s=s&&s.split("-")[0],r=r&&r[s];let a=t;return n&&n[e]?a=n[e]:r&&r[e]&&(a=r[e]),a=i?a.replace(/\{(\d+)\}/g,function(e,t){t=i[t-1];let s="undefined"==typeof t?e:t;return s}):a}handleLanguagechange(){}contentEl(){return this.contentEl_||this.el_}id(){return this.id_}name(){return this.name_}children(){return this.children_}getChildById(e){return this.childIndex_[e]}getChild(e){if(e)return this.childNameIndex_[e]}getDescendant(...t){t=t.reduce((e,t)=>e.concat(t),[]);let s=this;for(let e=0;e<t.length;e++)if(!(s=s.getChild(t[e]))||!s.getChild)return;return s}setIcon(e,t=this.el()){var s,i,r;if(this.player_.options_.experimentalSvgIcons)return r="http://www.w3.org/2000/svg",s=p("span",{className:"vjs-icon-placeholder vjs-svg-icon"},{"aria-hidden":"true"}),(i=document.createElementNS(r,"svg")).setAttributeNS(null,"viewBox","0 0 512 512"),r=document.createElementNS(r,"use"),i.appendChild(r),r.setAttributeNS(null,"href","#vjs-icon-"+e),s.appendChild(i),this.iconIsSet_?t.replaceChild(s,t.querySelector(".vjs-icon-placeholder")):t.appendChild(s),this.iconIsSet_=!0,s}addChild(e,t={},s=this.children_.length){let i,r;if("string"==typeof e){r=f(e);var n=t.componentClass||r,a=(t.name=r,T.getComponent(n));if(!a)throw new Error(`Component ${n} does not exist`);if("function"!=typeof a)return null;i=new a(this.player_||this,t)}else i=e;if(i.parentComponent_&&i.parentComponent_.removeChild(i),this.children_.splice(s,0,i),i.parentComponent_=this,"function"==typeof i.id&&(this.childIndex_[i.id()]=i),(r=r||i.name&&f(i.name()))&&(this.childNameIndex_[r]=i,this.childNameIndex_[Et(r)]=i),"function"==typeof i.el&&i.el()){let e=null;this.children_[s+1]&&(this.children_[s+1].el_?e=this.children_[s+1].el_:be(this.children_[s+1])&&(e=this.children_[s+1])),this.contentEl().insertBefore(i.el(),e)}return i}removeChild(s){if((s="string"==typeof s?this.getChild(s):s)&&this.children_){let t=!1;for(let e=this.children_.length-1;0<=e;e--)if(this.children_[e]===s){t=!0,this.children_.splice(e,1);break}var e;t&&(s.parentComponent_=null,this.childIndex_[s.id()]=null,this.childNameIndex_[f(s.name())]=null,this.childNameIndex_[Et(s.name())]=null,e=s.el())&&e.parentNode===this.contentEl()&&this.contentEl().removeChild(s.el())}}initChildren(){const i=this.options_.children;if(i){const r=this.options_;let e;const t=T.getComponent("Tech");(e=Array.isArray(i)?i:Object.keys(i)).concat(Object.keys(this.options_).filter(function(t){return!e.some(function(e){return"string"==typeof e?t===e:t===e.name})})).map(e=>{let t,s;return s="string"==typeof e?(t=e,i[t]||this.options_[t]||{}):(t=e.name,e),{name:t,opts:s}}).filter(e=>{e=T.getComponent(e.opts.componentClass||f(e.name));return e&&!t.isTech(e)}).forEach(e=>{var t=e.name;let s=e.opts;!1!==(s=void 0!==r[t]?r[t]:s)&&((s=!0===s?{}:s).playerOptions=this.options_.playerOptions,e=this.addChild(t,s))&&(this[t]=e)})}}buildCSSClass(){return""}ready(e,t=!1){e&&(this.isReady_?t?e.call(this):this.setTimeout(e,1):(this.readyQueue_=this.readyQueue_||[],this.readyQueue_.push(e)))}triggerReady(){this.isReady_=!0,this.setTimeout(function(){var e=this.readyQueue_;this.readyQueue_=[],e&&0<e.length&&e.forEach(function(e){e.call(this)},this),this.trigger("ready")},1)}$(e,t){return Ke(e,t||this.contentEl())}$$(e,t){return Ue(e,t||this.contentEl())}hasClass(e){return Ee(this.el_,e)}addClass(...e){Se(this.el_,...e)}removeClass(...e){xe(this.el_,...e)}toggleClass(e,t){je(this.el_,e,t)}show(){this.removeClass("vjs-hidden")}hide(){this.addClass("vjs-hidden")}lockShowing(){this.addClass("vjs-lock-showing")}unlockShowing(){this.removeClass("vjs-lock-showing")}getAttribute(e){return Me(this.el_,e)}setAttribute(e,t){Oe(this.el_,e,t)}removeAttribute(e){Ae(this.el_,e)}width(e,t){return this.dimension("width",e,t)}height(e,t){return this.dimension("height",e,t)}dimensions(e,t){this.width(e,!0),this.height(t)}dimension(e,t,s){var i,r;if(void 0===t)return this.el_?-1!==(r=(i=this.el_.style[e]).indexOf("px"))?parseInt(i.slice(0,r),10):parseInt(this.el_["offset"+f(e)],10):0;-1!==(""+(t=null!==t&&t==t?t:0)).indexOf("%")||-1!==(""+t).indexOf("px")?this.el_.style[e]=t:this.el_.style[e]="auto"===t?"":t+"px",s||this.trigger("componentresize")}currentDimension(e){let t=0;if("width"!==e&&"height"!==e)throw new Error("currentDimension only accepts width or height value");return t=We(this.el_,e),0!==(t=parseFloat(t))&&!isNaN(t)||(e="offset"+f(e),t=this.el_[e]),t}currentDimensions(){return{width:this.currentDimension("width"),height:this.currentDimension("height")}}currentWidth(){return this.currentDimension("width")}currentHeight(){return this.currentDimension("height")}focus(){this.el_.focus()}blur(){this.el_.blur()}handleKeyDown(e){this.player_&&(b.isEventKey(e,"Tab")||e.stopPropagation(),this.player_.handleKeyDown(e))}handleKeyPress(e){this.handleKeyDown(e)}emitTapEvents(){let t=0,s=null;let i;this.on("touchstart",function(e){1===e.touches.length&&(s={pageX:e.touches[0].pageX,pageY:e.touches[0].pageY},t=window.performance.now(),i=!0)}),this.on("touchmove",function(e){var t;(1<e.touches.length||s&&(t=e.touches[0].pageX-s.pageX,e=e.touches[0].pageY-s.pageY,10<Math.sqrt(t*t+e*e)))&&(i=!1)});function e(){i=!1}this.on("touchleave",e),this.on("touchcancel",e),this.on("touchend",function(e){!(s=null)===i&&window.performance.now()-t<200&&(e.preventDefault(),this.trigger("tap"))})}enableTouchActivity(){if(this.player()&&this.player().reportUserActivity){const s=y(this.player(),this.player().reportUserActivity);let t;this.on("touchstart",function(){s(),this.clearInterval(t),t=this.setInterval(s,250)});var e=function(e){s(),this.clearInterval(t)};this.on("touchmove",s),this.on("touchend",e),this.on("touchcancel",e)}}setTimeout(e,t){var s;return e=y(this,e),this.clearTimersOnDispose_(),s=window.setTimeout(()=>{this.setTimeoutIds_.has(s)&&this.setTimeoutIds_.delete(s),e()},t),this.setTimeoutIds_.add(s),s}clearTimeout(e){return this.setTimeoutIds_.has(e)&&(this.setTimeoutIds_.delete(e),window.clearTimeout(e)),e}setInterval(e,t){e=y(this,e),this.clearTimersOnDispose_();e=window.setInterval(e,t);return this.setIntervalIds_.add(e),e}clearInterval(e){return this.setIntervalIds_.has(e)&&(this.setIntervalIds_.delete(e),window.clearInterval(e)),e}requestAnimationFrame(e){var t;return this.clearTimersOnDispose_(),e=y(this,e),t=window.requestAnimationFrame(()=>{this.rafIds_.has(t)&&this.rafIds_.delete(t),e()}),this.rafIds_.add(t),t}requestNamedAnimationFrame(e,t){var s;if(!this.namedRafs_.has(e))return this.clearTimersOnDispose_(),t=y(this,t),s=this.requestAnimationFrame(()=>{t(),this.namedRafs_.has(e)&&this.namedRafs_.delete(e)}),this.namedRafs_.set(e,s),e}cancelNamedAnimationFrame(e){this.namedRafs_.has(e)&&(this.cancelAnimationFrame(this.namedRafs_.get(e)),this.namedRafs_.delete(e))}cancelAnimationFrame(e){return this.rafIds_.has(e)&&(this.rafIds_.delete(e),window.cancelAnimationFrame(e)),e}clearTimersOnDispose_(){this.clearingTimersOnDispose_||(this.clearingTimersOnDispose_=!0,this.one("dispose",()=>{[["namedRafs_","cancelNamedAnimationFrame"],["rafIds_","cancelAnimationFrame"],["setTimeoutIds_","clearTimeout"],["setIntervalIds_","clearInterval"]].forEach(([e,s])=>{this[e].forEach((e,t)=>this[s](t))}),this.clearingTimersOnDispose_=!1}))}static registerComponent(t,e){if("string"!=typeof t||!t)throw new Error(`Illegal component name, "${t}"; must be a non-empty string.`);var s=T.getComponent("Tech"),s=s&&s.isTech(e),i=T===e||T.prototype.isPrototypeOf(e.prototype);if(s||!i){let e;throw e=s?"techs must be registered using Tech.registerTech()":"must be a Component subclass",new Error(`Illegal component, "${t}"; ${e}.`)}t=f(t),T.components_||(T.components_={});i=T.getComponent("Player");if("Player"===t&&i&&i.players){const r=i.players;s=Object.keys(r);if(r&&0<s.length&&s.map(e=>r[e]).every(Boolean))throw new Error("Can not register Player component after player has been created.")}return T.components_[t]=e,T.components_[Et(t)]=e}static getComponent(e){if(e&&T.components_)return T.components_[e]}}function Pt(e,t,s,i){var r=i,n=s.length-1;if("number"!=typeof r||r<0||n<r)throw new Error(`Failed to execute '${e}' on 'TimeRanges': The index provided (${r}) is non-numeric or out of bounds (0-${n}).`);return s[i][t]}function It(e){let t;return t=void 0===e||0===e.length?{length:0,start(){throw new Error("This TimeRanges object is empty")},end(){throw new Error("This TimeRanges object is empty")}}:{length:e.length,start:Pt.bind(null,"start",0,e),end:Pt.bind(null,"end",1,e)},window.Symbol&&window.Symbol.iterator&&(t[window.Symbol.iterator]=()=>(e||[]).values()),t}function k(e,t){return Array.isArray(e)?It(e):void 0===e||void 0===t?It():It([[e,t]])}T.registerComponent("Component",T);function Mt(e,t){e=e<0?0:e;let s=Math.floor(e%60),i=Math.floor(e/60%60),r=Math.floor(e/3600);var n=Math.floor(t/60%60),t=Math.floor(t/3600);return r=0<(r=!isNaN(e)&&e!==1/0?r:i=s="-")||0<t?r+":":"",i=((r||10<=n)&&i<10?"0"+i:i)+":",s=s<10?"0"+s:s,r+i+s}let Ot=Mt;function At(e){Ot=e}function Lt(){Ot=Mt}function Nt(e,t=e){return Ot(e,t)}var Dt=Object.freeze({__proto__:null,createTimeRanges:k,createTimeRange:k,setFormatTime:At,resetFormatTime:Lt,formatTime:Nt});function Bt(t,s){let i=0;var r;let n;if(!s)return 0;t&&t.length||(t=k(0,0));for(let e=0;e<t.length;e++)r=t.start(e),(n=t.end(e))>s&&(n=s),i+=n-r;return i/s}function C(e){if(e instanceof C)return e;"number"==typeof e?this.code=e:"string"==typeof e?this.message=e:n(e)&&("number"==typeof e.code&&(this.code=e.code),Object.assign(this,e)),this.message||(this.message=C.defaultMessages[this.code]||"")}C.prototype.code=0,C.prototype.message="",C.prototype.status=null,C.prototype.metadata=null,C.errorTypes=["MEDIA_ERR_CUSTOM","MEDIA_ERR_ABORTED","MEDIA_ERR_NETWORK","MEDIA_ERR_DECODE","MEDIA_ERR_SRC_NOT_SUPPORTED","MEDIA_ERR_ENCRYPTED"],C.defaultMessages={1:"You aborted the media playback",2:"A network error caused the media download to fail part-way.",3:"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.",4:"The media could not be loaded, either because the server or network failed or because the format is not supported.",5:"The media is encrypted and we do not have the keys to decrypt it."},C.MEDIA_ERR_CUSTOM=0,C.prototype.MEDIA_ERR_CUSTOM=0,C.MEDIA_ERR_ABORTED=1,C.prototype.MEDIA_ERR_ABORTED=1,C.MEDIA_ERR_NETWORK=2,C.prototype.MEDIA_ERR_NETWORK=2,C.MEDIA_ERR_DECODE=3,C.prototype.MEDIA_ERR_DECODE=3,C.MEDIA_ERR_SRC_NOT_SUPPORTED=4,C.prototype.MEDIA_ERR_SRC_NOT_SUPPORTED=4,C.MEDIA_ERR_ENCRYPTED=5,C.prototype.MEDIA_ERR_ENCRYPTED=5;var Rt=function(e,t){var s,i=null;try{s=JSON.parse(e,t)}catch(e){i=e}return[i,s]};function Ft(e){return null!=e&&"function"==typeof e.then}function w(e){Ft(e)&&e.then(null,e=>{})}function Ht(i){return["kind","label","language","id","inBandMetadataTrackDispatchType","mode","src"].reduce((e,t,s)=>(i[t]&&(e[t]=i[t]),e),{cues:i.cues&&Array.prototype.map.call(i.cues,function(e){return{startTime:e.startTime,endTime:e.endTime,text:e.text,id:e.id}})})}var zt=function(e){var t=e.$$("track");const s=Array.prototype.map.call(t,e=>e.track);return Array.prototype.map.call(t,function(e){var t=Ht(e.track);return e.src&&(t.src=e.src),t}).concat(Array.prototype.filter.call(e.textTracks(),function(e){return-1===s.indexOf(e)}).map(Ht))},Vt=function(e,s){return e.forEach(function(e){const t=s.addRemoteTextTrack(e).track;!e.src&&e.cues&&e.cues.forEach(e=>t.addCue(e))}),s.textTracks()};Ht;const qt="vjs-modal-dialog";class $t extends T{constructor(e,t){super(e,t),this.handleKeyDown_=e=>this.handleKeyDown(e),this.close_=e=>this.close(e),this.opened_=this.hasBeenOpened_=this.hasBeenFilled_=!1,this.closeable(!this.options_.uncloseable),this.content(this.options_.content),this.contentEl_=p("div",{className:qt+"-content"},{role:"document"}),this.descEl_=p("p",{className:qt+"-description vjs-control-text",id:this.el().getAttribute("aria-describedby")}),Ce(this.descEl_,this.description()),this.el_.appendChild(this.descEl_),this.el_.appendChild(this.contentEl_)}createEl(){return super.createEl("div",{className:this.buildCSSClass(),tabIndex:-1},{"aria-describedby":this.id()+"_description","aria-hidden":"true","aria-label":this.label(),role:"dialog","aria-live":"polite"})}dispose(){this.contentEl_=null,this.descEl_=null,this.previouslyActiveEl_=null,super.dispose()}buildCSSClass(){return qt+" vjs-hidden "+super.buildCSSClass()}label(){return this.localize(this.options_.label||"Modal Window")}description(){let e=this.options_.description||this.localize("This is a modal window.");return this.closeable()&&(e+=" "+this.localize("This modal can be closed by pressing the Escape key or activating the close button.")),e}open(){var e;this.opened_?this.options_.fillAlways&&this.fill():(e=this.player(),this.trigger("beforemodalopen"),this.opened_=!0,!this.options_.fillAlways&&(this.hasBeenOpened_||this.hasBeenFilled_)||this.fill(),this.wasPlaying_=!e.paused(),this.options_.pauseOnOpen&&this.wasPlaying_&&e.pause(),this.on("keydown",this.handleKeyDown_),this.hadControls_=e.controls(),e.controls(!1),this.show(),this.conditionalFocus_(),this.el().setAttribute("aria-hidden","false"),this.trigger("modalopen"),this.hasBeenOpened_=!0)}opened(e){return"boolean"==typeof e&&this[e?"open":"close"](),this.opened_}close(){var e;this.opened_&&(e=this.player(),this.trigger("beforemodalclose"),this.opened_=!1,this.wasPlaying_&&this.options_.pauseOnOpen&&e.play(),this.off("keydown",this.handleKeyDown_),this.hadControls_&&e.controls(!0),this.hide(),this.el().setAttribute("aria-hidden","true"),this.trigger("modalclose"),this.conditionalBlur_(),this.options_.temporary)&&this.dispose()}closeable(t){if("boolean"==typeof t){var s,t=this.closeable_=!!t;let e=this.getChild("closeButton");t&&!e&&(s=this.contentEl_,this.contentEl_=this.el_,e=this.addChild("closeButton",{controlText:"Close Modal Dialog"}),this.contentEl_=s,this.on(e,"close",this.close_)),!t&&e&&(this.off(e,"close",this.close_),this.removeChild(e),e.dispose())}return this.closeable_}fill(){this.fillWith(this.content())}fillWith(e){var t=this.contentEl(),s=t.parentNode,i=t.nextSibling,e=(this.trigger("beforemodalfill"),this.hasBeenFilled_=!0,s.removeChild(t),this.empty(),qe(t,e),this.trigger("modalfill"),i?s.insertBefore(t,i):s.appendChild(t),this.getChild("closeButton"));e&&s.appendChild(e.el_)}empty(){this.trigger("beforemodalempty"),He(this.contentEl()),this.trigger("modalempty")}content(e){return"undefined"!=typeof e&&(this.content_=e),this.content_}conditionalFocus_(){var e=document.activeElement,t=this.player_.el_;this.previouslyActiveEl_=null,!t.contains(e)&&t!==e||(this.previouslyActiveEl_=e,this.focus())}conditionalBlur_(){this.previouslyActiveEl_&&(this.previouslyActiveEl_.focus(),this.previouslyActiveEl_=null)}handleKeyDown(e){if(e.stopPropagation(),b.isEventKey(e,"Escape")&&this.closeable())e.preventDefault(),this.close();else if(b.isEventKey(e,"Tab")){var s=this.focusableEls_(),i=this.el_.querySelector(":focus");let t;for(let e=0;e<s.length;e++)if(i===s[e]){t=e;break}document.activeElement===this.el_&&(t=0),e.shiftKey&&0===t?(s[s.length-1].focus(),e.preventDefault()):e.shiftKey||t!==s.length-1||(s[0].focus(),e.preventDefault())}}focusableEls_(){var e=this.el_.querySelectorAll("*");return Array.prototype.filter.call(e,e=>(e instanceof window.HTMLAnchorElement||e instanceof window.HTMLAreaElement)&&e.hasAttribute("href")||(e instanceof window.HTMLInputElement||e instanceof window.HTMLSelectElement||e instanceof window.HTMLTextAreaElement||e instanceof window.HTMLButtonElement)&&!e.hasAttribute("disabled")||e instanceof window.HTMLIFrameElement||e instanceof window.HTMLObjectElement||e instanceof window.HTMLEmbedElement||e.hasAttribute("tabindex")&&-1!==e.getAttribute("tabindex")||e.hasAttribute("contenteditable"))}}$t.prototype.options_={pauseOnOpen:!0,temporary:!0},T.registerComponent("ModalDialog",$t);class Kt extends i{constructor(t=[]){super(),this.tracks_=[],Object.defineProperty(this,"length",{get(){return this.tracks_.length}});for(let e=0;e<t.length;e++)this.addTrack(t[e])}addTrack(e){const t=this.tracks_.length;""+t in this||Object.defineProperty(this,t,{get(){return this.tracks_[t]}}),-1===this.tracks_.indexOf(e)&&(this.tracks_.push(e),this.trigger({track:e,type:"addtrack",target:this})),e.labelchange_=()=>{this.trigger({track:e,type:"labelchange",target:this})},a(e)&&e.addEventListener("labelchange",e.labelchange_)}removeTrack(s){let i;for(let e=0,t=this.length;e<t;e++)if(this[e]===s){(i=this[e]).off&&i.off(),this.tracks_.splice(e,1);break}i&&this.trigger({track:i,type:"removetrack",target:this})}getTrackById(s){let i=null;for(let e=0,t=this.length;e<t;e++){var r=this[e];if(r.id===s){i=r;break}}return i}}for(const Ar in Kt.prototype.allowedEvents_={change:"change",addtrack:"addtrack",removetrack:"removetrack",labelchange:"labelchange"})Kt.prototype["on"+Ar]=null;function Ut(t,s){for(let e=0;e<t.length;e++)Object.keys(t[e]).length&&s.id!==t[e].id&&(t[e].enabled=!1)}function Wt(t,s){for(let e=0;e<t.length;e++)Object.keys(t[e]).length&&s.id!==t[e].id&&(t[e].selected=!1)}class Gt extends Kt{addTrack(e){super.addTrack(e),this.queueChange_||(this.queueChange_=()=>this.queueTrigger("change")),this.triggerSelectedlanguagechange||(this.triggerSelectedlanguagechange_=()=>this.trigger("selectedlanguagechange")),e.addEventListener("modechange",this.queueChange_);-1===["metadata","chapters"].indexOf(e.kind)&&e.addEventListener("modechange",this.triggerSelectedlanguagechange_)}removeTrack(e){super.removeTrack(e),e.removeEventListener&&(this.queueChange_&&e.removeEventListener("modechange",this.queueChange_),this.selectedlanguagechange_)&&e.removeEventListener("modechange",this.triggerSelectedlanguagechange_)}}class Xt{constructor(e){Xt.prototype.setCues_.call(this,e),Object.defineProperty(this,"length",{get(){return this.length_}})}setCues_(e){var t=this.length||0;let s=0;function i(e){""+e in this||Object.defineProperty(this,""+e,{get(){return this.cues_[e]}})}var r=e.length;this.cues_=e,this.length_=e.length;if(t<r)for(s=t;s<r;s++)i.call(this,s)}getCueById(s){let i=null;for(let e=0,t=this.length;e<t;e++){var r=this[e];if(r.id===s){i=r;break}}return i}}const Yt={alternative:"alternative",captions:"captions",main:"main",sign:"sign",subtitles:"subtitles",commentary:"commentary"},Qt={alternative:"alternative",descriptions:"descriptions",main:"main","main-desc":"main-desc",translation:"translation",commentary:"commentary"},Jt={subtitles:"subtitles",captions:"captions",descriptions:"descriptions",chapters:"chapters",metadata:"metadata"},Zt={disabled:"disabled",hidden:"hidden",showing:"showing"};class es extends i{constructor(e={}){super();const t={id:e.id||"vjs_track_"+v++,kind:e.kind||"",language:e.language||""};let s=e.label||"";for(const i in t)Object.defineProperty(this,i,{get(){return t[i]},set(){}});Object.defineProperty(this,"label",{get(){return s},set(e){e!==s&&(s=e,this.trigger("labelchange"))}})}}function ts(e){var t=["protocol","hostname","port","pathname","search","hash","host"],s=document.createElement("a"),i=(s.href=e,{});for(let e=0;e<t.length;e++)i[t[e]]=s[t[e]];return"http:"===i.protocol&&(i.host=i.host.replace(/:80$/,"")),"https:"===i.protocol&&(i.host=i.host.replace(/:443$/,"")),i.protocol||(i.protocol=window.location.protocol),i.host||(i.host=window.location.host),i}function ss(e){var t;return e.match(/^https?:\/\//)||((t=document.createElement("a")).href=e,e=t.href),e}function is(e,t=window.location){return(":"===(e=ts(e)).protocol?t:e).protocol+e.host!==t.protocol+t.host}const rs=function(e){if("string"==typeof e){e=/^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/.exec(e);if(e)return e.pop().toLowerCase()}return""};var ns=Object.freeze({__proto__:null,parseUrl:ts,getAbsoluteURL:ss,getFileExtension:rs,isCrossOrigin:is}),t="undefined"!=typeof window?window:"undefined"!=typeof t?t:"undefined"!=typeof self?self:{},as=t,os=jt(function(e){function t(){return e.exports=t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s,i=arguments[t];for(s in i)Object.prototype.hasOwnProperty.call(i,s)&&(e[s]=i[s])}return e},e.exports.__esModule=!0,e.exports.default=e.exports,t.apply(this,arguments)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports}),ls=((t=os)&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")&&t.default,function(e){var t;return!!e&&("[object Function]"===(t=hs.call(e))||"function"==typeof e&&"[object RegExp]"!==t||"undefined"!=typeof window&&(e===window.setTimeout||e===window.alert||e===window.confirm||e===window.prompt))}),hs=Object.prototype.toString;E.httpHandler=function(i,r){return void 0===r&&(r=!1),function(e,t,s){if(e)i(e);else if(400<=t.statusCode&&t.statusCode<=599){e=s;if(r)if(as.TextDecoder){t=function(e){void 0===e&&(e="");return e.toLowerCase().split(";").reduce(function(e,t){var t=t.split("="),s=t[0],t=t[1];return"charset"===s.trim()?t.trim():e},"utf-8")}(t.headers&&t.headers["content-type"]);try{e=new TextDecoder(t).decode(s)}catch(e){}}else e=String.fromCharCode.apply(null,new Uint8Array(s));i({cause:e})}else i(null,s)}};for(var cs=function(e){var i={};return e&&e.trim().split("\n").forEach(function(e){var t=e.indexOf(":"),s=e.slice(0,t).trim().toLowerCase(),e=e.slice(t+1).trim();"undefined"==typeof i[s]?i[s]=e:Array.isArray(i[s])?i[s].push(e):i[s]=[i[s],e]}),i},ds=E,t=E,us=(E.XMLHttpRequest=as.XMLHttpRequest||function(){},E.XDomainRequest="withCredentials"in new E.XMLHttpRequest?E.XMLHttpRequest:as.XDomainRequest,["get","put","post","patch","head","delete"]),ps=function(i){E["delete"===i?"del":i]=function(e,t,s){return(t=vs(e,t,s)).method=i.toUpperCase(),ms(t)}},gs=0;gs<us.length;gs++)ps(us[gs]);function vs(e,t,s){var i=e;return ls(t)?(s=t,"string"==typeof e&&(i={uri:e})):i=os({},t,{uri:e}),i.callback=s,i}function E(e,t,s){return ms(t=vs(e,t,s))}function ms(i){if("undefined"==typeof i.callback)throw new Error("callback argument missing");var r=!1,n=function(e,t,s){r||(r=!0,i.callback(e,t,s))};function a(){var e=void 0,e=h.response||h.responseText||function(e){try{if("document"===e.responseType)return e.responseXML;var t=e.responseXML&&"parsererror"===e.responseXML.documentElement.nodeName;if(""===e.responseType&&!t)return e.responseXML}catch(e){}return null}(h);if(v)try{e=JSON.parse(e)}catch(e){}return e}function t(e){return clearTimeout(l),(e=e instanceof Error?e:new Error(""+(e||"Unknown XMLHttpRequest Error"))).statusCode=0,n(e,m)}function e(){var e,t,s;if(!o)return clearTimeout(l),e=i.useXDR&&void 0===h.status?200:1223===h.status?204:h.status,t=m,s=null,0!==e?(t={body:a(),statusCode:e,method:d,headers:{},url:c,rawRequest:h},h.getAllResponseHeaders&&(t.headers=cs(h.getAllResponseHeaders()))):s=new Error("Internal XMLHttpRequest Error"),n(s,t,t.body)}var s,o,l,h=i.xhr||null,c=(h=h||new(i.cors||i.useXDR?E.XDomainRequest:E.XMLHttpRequest)).url=i.uri||i.url,d=h.method=i.method||"GET",u=i.body||i.data,p=h.headers=i.headers||{},g=!!i.sync,v=!1,m={body:void 0,headers:{},statusCode:0,method:d,url:c,rawRequest:h};if("json"in i&&!1!==i.json&&(v=!0,p.accept||p.Accept||(p.Accept="application/json"),"GET"!==d)&&"HEAD"!==d&&(p["content-type"]||p["Content-Type"]||(p["Content-Type"]="application/json"),u=JSON.stringify(!0===i.json?u:i.json)),h.onreadystatechange=function(){4===h.readyState&&setTimeout(e,0)},h.onload=e,h.onerror=t,h.onprogress=function(){},h.onabort=function(){o=!0},h.ontimeout=t,h.open(d,c,!g,i.username,i.password),g||(h.withCredentials=!!i.withCredentials),!g&&0<i.timeout&&(l=setTimeout(function(){var e;o||(o=!0,h.abort("timeout"),(e=new Error("XMLHttpRequest timeout")).code="ETIMEDOUT",t(e))},i.timeout)),h.setRequestHeader)for(s in p)p.hasOwnProperty(s)&&h.setRequestHeader(s,p[s]);else if(i.headers&&!function(e){for(var t in e)if(e.hasOwnProperty(t))return;return 1}(i.headers))throw new Error("Headers cannot be set on an XDomainRequest object");return"responseType"in i&&(h.responseType=i.responseType),"beforeSend"in i&&"function"==typeof i.beforeSend&&i.beforeSend(h),h.send(u||null),h}ds.default=t;function _s(e,t){var s=new window.WebVTT.Parser(window,window.vttjs,window.WebVTT.StringDecoder());const i=[];s.oncue=function(e){t.addCue(e)},s.onparsingerror=function(e){i.push(e)},s.onflush=function(){t.trigger({type:"loadeddata",target:t})},s.parse(e),0<i.length&&(window.console&&window.console.groupCollapsed&&window.console.groupCollapsed("Text Track parsing errors for "+t.src),i.forEach(e=>l.error(e)),window.console)&&window.console.groupEnd&&window.console.groupEnd(),s.flush()}function ys(e,i){var t={uri:e};(e=is(e))&&(t.cors=e),(e="use-credentials"===i.tech_.crossOrigin())&&(t.withCredentials=e),ds(t,y(this,function(e,t,s){if(e)return l.error(e,t);i.loaded_=!0,"function"!=typeof window.WebVTT?i.tech_&&i.tech_.any(["vttjsloaded","vttjserror"],e=>{if("vttjserror"!==e.type)return _s(s,i);l.error("vttjs failed to load, stopping trying to process "+i.src)}):_s(s,i)}))}class fs extends es{constructor(e={}){if(!e.tech)throw new Error("A tech was not provided.");e=h(e,{kind:Jt[e.kind]||"subtitles",language:e.language||e.srclang||""});let t=Zt[e.mode]||"disabled";const s=e.default,i=("metadata"!==e.kind&&"chapters"!==e.kind||(t="hidden"),super(e),this.tech_=e.tech,this.cues_=[],this.activeCues_=[],this.preload_=!1!==this.tech_.preloadTextTracks,new Xt(this.cues_)),n=new Xt(this.activeCues_);let a=!1;this.timeupdateHandler=y(this,function(e={}){this.tech_.isDisposed()||(this.tech_.isReady_&&(this.activeCues=this.activeCues,a)&&(this.trigger("cuechange"),a=!1),"timeupdate"!==e.type&&(this.rvf_=this.tech_.requestVideoFrameCallback(this.timeupdateHandler)))});this.tech_.one("dispose",()=>{this.stopTracking()}),"disabled"!==t&&this.startTracking(),Object.defineProperties(this,{default:{get(){return s},set(){}},mode:{get(){return t},set(e){Zt[e]&&t!==e&&(t=e,this.preload_||"disabled"===t||0!==this.cues.length||ys(this.src,this),this.stopTracking(),"disabled"!==t&&this.startTracking(),this.trigger("modechange"))}},cues:{get(){return this.loaded_?i:null},set(){}},activeCues:{get(){if(!this.loaded_)return null;if(0!==this.cues.length){var s=this.tech_.currentTime(),i=[];for(let e=0,t=this.cues.length;e<t;e++){var r=this.cues[e];r.startTime<=s&&r.endTime>=s&&i.push(r)}if(a=!1,i.length!==this.activeCues_.length)a=!0;else for(let e=0;e<i.length;e++)-1===this.activeCues_.indexOf(i[e])&&(a=!0);this.activeCues_=i,n.setCues_(this.activeCues_)}return n},set(){}}}),e.src?(this.src=e.src,this.preload_||(this.loaded_=!0),(this.preload_||"subtitles"!==e.kind&&"captions"!==e.kind)&&ys(this.src,this)):this.loaded_=!0}startTracking(){this.rvf_=this.tech_.requestVideoFrameCallback(this.timeupdateHandler),this.tech_.on("timeupdate",this.timeupdateHandler)}stopTracking(){this.rvf_&&(this.tech_.cancelVideoFrameCallback(this.rvf_),this.rvf_=void 0),this.tech_.off("timeupdate",this.timeupdateHandler)}addCue(e){let t=e;if(!("getCueAsHTML"in t)){t=new window.vttjs.VTTCue(e.startTime,e.endTime,e.text);for(const i in e)i in t||(t[i]=e[i]);t.id=e.id,t.originalCue_=e}var s=this.tech_.textTracks();for(let e=0;e<s.length;e++)s[e]!==this&&s[e].removeCue(t);this.cues_.push(t),this.cues.setCues_(this.cues_)}removeCue(e){let t=this.cues_.length;for(;t--;){var s=this.cues_[t];if(s===e||s.originalCue_&&s.originalCue_===e){this.cues_.splice(t,1),this.cues.setCues_(this.cues_);break}}}}fs.prototype.allowedEvents_={cuechange:"cuechange"};class bs extends es{constructor(e={}){e=h(e,{kind:Qt[e.kind]||""});super(e);let t=!1;Object.defineProperty(this,"enabled",{get(){return t},set(e){"boolean"==typeof e&&e!==t&&(t=e,this.trigger("enabledchange"))}}),e.enabled&&(this.enabled=e.enabled),this.loaded_=!0}}class Ts extends es{constructor(e={}){e=h(e,{kind:Yt[e.kind]||""});super(e);let t=!1;Object.defineProperty(this,"selected",{get(){return t},set(e){"boolean"==typeof e&&e!==t&&(t=e,this.trigger("selectedchange"))}}),e.selected&&(this.selected=e.selected)}}class ks extends i{constructor(e={}){super();let t;const s=new fs(e);this.kind=s.kind,this.src=s.src,this.srclang=s.language,this.label=s.label,this.default=s.default,Object.defineProperties(this,{readyState:{get(){return t}},track:{get(){return s}}}),t=ks.NONE,s.addEventListener("loadeddata",()=>{t=ks.LOADED,this.trigger({type:"load",target:this})})}}ks.prototype.allowedEvents_={load:"load"},ks.NONE=0,ks.LOADING=1,ks.LOADED=2,ks.ERROR=3;const S={audio:{ListClass:class extends Kt{constructor(t=[]){for(let e=t.length-1;0<=e;e--)if(t[e].enabled){Ut(t,t[e]);break}super(t),this.changing_=!1}addTrack(e){e.enabled&&Ut(this,e),super.addTrack(e),e.addEventListener&&(e.enabledChange_=()=>{this.changing_||(this.changing_=!0,Ut(this,e),this.changing_=!1,this.trigger("change"))},e.addEventListener("enabledchange",e.enabledChange_))}removeTrack(e){super.removeTrack(e),e.removeEventListener&&e.enabledChange_&&(e.removeEventListener("enabledchange",e.enabledChange_),e.enabledChange_=null)}},TrackClass:bs,capitalName:"Audio"},video:{ListClass:class extends Kt{constructor(t=[]){for(let e=t.length-1;0<=e;e--)if(t[e].selected){Wt(t,t[e]);break}super(t),this.changing_=!1,Object.defineProperty(this,"selectedIndex",{get(){for(let e=0;e<this.length;e++)if(this[e].selected)return e;return-1},set(){}})}addTrack(e){e.selected&&Wt(this,e),super.addTrack(e),e.addEventListener&&(e.selectedChange_=()=>{this.changing_||(this.changing_=!0,Wt(this,e),this.changing_=!1,this.trigger("change"))},e.addEventListener("selectedchange",e.selectedChange_))}removeTrack(e){super.removeTrack(e),e.removeEventListener&&e.selectedChange_&&(e.removeEventListener("selectedchange",e.selectedChange_),e.selectedChange_=null)}},TrackClass:Ts,capitalName:"Video"},text:{ListClass:Gt,TrackClass:fs,capitalName:"Text"}},Cs=(Object.keys(S).forEach(function(e){S[e].getterName=e+"Tracks",S[e].privateName=e+"Tracks_"}),{remoteText:{ListClass:Gt,TrackClass:fs,capitalName:"RemoteText",getterName:"remoteTextTracks",privateName:"remoteTextTracks_"},remoteTextEl:{ListClass:class{constructor(s=[]){this.trackElements_=[],Object.defineProperty(this,"length",{get(){return this.trackElements_.length}});for(let e=0,t=s.length;e<t;e++)this.addTrackElement_(s[e])}addTrackElement_(e){const t=this.trackElements_.length;""+t in this||Object.defineProperty(this,t,{get(){return this.trackElements_[t]}}),-1===this.trackElements_.indexOf(e)&&this.trackElements_.push(e)}getTrackElementByTrack_(s){let i;for(let e=0,t=this.trackElements_.length;e<t;e++)if(s===this.trackElements_[e].track){i=this.trackElements_[e];break}return i}removeTrackElement_(s){for(let e=0,t=this.trackElements_.length;e<t;e++)if(s===this.trackElements_[e]){this.trackElements_[e].track&&"function"==typeof this.trackElements_[e].track.off&&this.trackElements_[e].track.off(),"function"==typeof this.trackElements_[e].off&&this.trackElements_[e].off(),this.trackElements_.splice(e,1);break}}},TrackClass:ks,capitalName:"RemoteTextTrackEls",getterName:"remoteTextTrackEls",privateName:"remoteTextTrackEls_"}}),x=Object.assign({},S,Cs);Cs.names=Object.keys(Cs),S.names=Object.keys(S),x.names=[].concat(Cs.names).concat(S.names);var ws={};class j extends T{constructor(t={},e=function(){}){t.reportTouchActivity=!1,super(null,t,e),this.onDurationChange_=e=>this.onDurationChange(e),this.trackProgress_=e=>this.trackProgress(e),this.trackCurrentTime_=e=>this.trackCurrentTime(e),this.stopTrackingCurrentTime_=e=>this.stopTrackingCurrentTime(e),this.disposeSourceHandler_=e=>this.disposeSourceHandler(e),this.queuedHanders_=new Set,this.hasStarted_=!1,this.on("playing",function(){this.hasStarted_=!0}),this.on("loadstart",function(){this.hasStarted_=!1}),x.names.forEach(e=>{e=x[e];t&&t[e.getterName]&&(this[e.privateName]=t[e.getterName])}),this.featuresProgressEvents||this.manualProgressOn(),this.featuresTimeupdateEvents||this.manualTimeUpdatesOn(),["Text","Audio","Video"].forEach(e=>{!1===t[`native${e}Tracks`]&&(this[`featuresNative${e}Tracks`]=!1)}),!1===t.nativeCaptions||!1===t.nativeTextTracks?this.featuresNativeTextTracks=!1:!0!==t.nativeCaptions&&!0!==t.nativeTextTracks||(this.featuresNativeTextTracks=!0),this.featuresNativeTextTracks||this.emulateTextTracks(),this.preloadTextTracks=!1!==t.preloadTextTracks,this.autoRemoteTextTracks_=new x.text.ListClass,this.initTrackListeners(),t.nativeControlsForTouch||this.emitTapEvents(),this.constructor&&(this.name_=this.constructor.name||"Unknown Tech")}triggerSourceset(e){this.isReady_||this.one("ready",()=>this.setTimeout(()=>this.triggerSourceset(e),1)),this.trigger({src:e,type:"sourceset"})}manualProgressOn(){this.on("durationchange",this.onDurationChange_),this.manualProgress=!0,this.one("ready",this.trackProgress_)}manualProgressOff(){this.manualProgress=!1,this.stopTrackingProgress(),this.off("durationchange",this.onDurationChange_)}trackProgress(e){this.stopTrackingProgress(),this.progressInterval=this.setInterval(y(this,function(){var e=this.bufferedPercent();this.bufferedPercent_!==e&&this.trigger("progress"),1===(this.bufferedPercent_=e)&&this.stopTrackingProgress()}),500)}onDurationChange(e){this.duration_=this.duration()}buffered(){return k(0,0)}bufferedPercent(){return Bt(this.buffered(),this.duration_)}stopTrackingProgress(){this.clearInterval(this.progressInterval)}manualTimeUpdatesOn(){this.manualTimeUpdates=!0,this.on("play",this.trackCurrentTime_),this.on("pause",this.stopTrackingCurrentTime_)}manualTimeUpdatesOff(){this.manualTimeUpdates=!1,this.stopTrackingCurrentTime(),this.off("play",this.trackCurrentTime_),this.off("pause",this.stopTrackingCurrentTime_)}trackCurrentTime(){this.currentTimeInterval&&this.stopTrackingCurrentTime(),this.currentTimeInterval=this.setInterval(function(){this.trigger({type:"timeupdate",target:this,manuallyTriggered:!0})},250)}stopTrackingCurrentTime(){this.clearInterval(this.currentTimeInterval),this.trigger({type:"timeupdate",target:this,manuallyTriggered:!0})}dispose(){this.clearTracks(S.names),this.manualProgress&&this.manualProgressOff(),this.manualTimeUpdates&&this.manualTimeUpdatesOff(),super.dispose()}clearTracks(e){(e=[].concat(e)).forEach(e=>{var t=this[e+"Tracks"]()||[];let s=t.length;for(;s--;){var i=t[s];"text"===e&&this.removeRemoteTextTrack(i),t.removeTrack(i)}})}cleanupAutoTextTracks(){var e=this.autoRemoteTextTracks_||[];let t=e.length;for(;t--;){var s=e[t];this.removeRemoteTextTrack(s)}}reset(){}crossOrigin(){}setCrossOrigin(){}error(e){return void 0!==e&&(this.error_=new C(e),this.trigger("error")),this.error_}played(){return this.hasStarted_?k(0,0):k()}play(){}setScrubbing(e){}scrubbing(){}setCurrentTime(e){this.manualTimeUpdates&&this.trigger({type:"timeupdate",target:this,manuallyTriggered:!0})}initTrackListeners(){S.names.forEach(e=>{var t=S[e];const s=()=>{this.trigger(e+"trackchange")},i=this[t.getterName]();i.addEventListener("removetrack",s),i.addEventListener("addtrack",s),this.on("dispose",()=>{i.removeEventListener("removetrack",s),i.removeEventListener("addtrack",s)})})}addWebVttScript_(){if(!window.WebVTT)if(document.body.contains(this.el()))if(!this.options_["vtt.js"]&&G(ws)&&0<Object.keys(ws).length)this.trigger("vttjsloaded");else{const e=document.createElement("script");e.src=this.options_["vtt.js"]||"https://vjs.zencdn.net/vttjs/0.14.1/vtt.min.js",e.onload=()=>{this.trigger("vttjsloaded")},e.onerror=()=>{this.trigger("vttjserror")},this.on("dispose",()=>{e.onload=null,e.onerror=null}),window.WebVTT=!0,this.el().parentNode.appendChild(e)}else this.ready(this.addWebVttScript_)}emulateTextTracks(){const s=this.textTracks(),e=this.remoteTextTracks(),t=e=>s.addTrack(e.track),i=e=>s.removeTrack(e.track),r=(e.on("addtrack",t),e.on("removetrack",i),this.addWebVttScript_(),()=>this.trigger("texttrackchange")),n=()=>{r();for(let e=0;e<s.length;e++){var t=s[e];t.removeEventListener("cuechange",r),"showing"===t.mode&&t.addEventListener("cuechange",r)}};n(),s.addEventListener("change",n),s.addEventListener("addtrack",n),s.addEventListener("removetrack",n),this.on("dispose",function(){e.off("addtrack",t),e.off("removetrack",i),s.removeEventListener("change",n),s.removeEventListener("addtrack",n),s.removeEventListener("removetrack",n);for(let e=0;e<s.length;e++)s[e].removeEventListener("cuechange",r)})}addTextTrack(e,t,s){if(e)return e=e,t=t,s=s,r={},n=(i=this).textTracks(),r.kind=e,t&&(r.label=t),s&&(r.language=s),r.tech=i,e=new x.text.TrackClass(r),n.addTrack(e),e;throw new Error("TextTrack kind is required but was not provided");var i,r,n}createRemoteTextTrack(e){e=h(e,{tech:this});return new Cs.remoteTextEl.TrackClass(e)}addRemoteTextTrack(e={},t){const s=this.createRemoteTextTrack(e);return"boolean"!=typeof t&&(t=!1),this.remoteTextTrackEls().addTrackElement_(s),this.remoteTextTracks().addTrack(s.track),!1===t&&this.ready(()=>this.autoRemoteTextTracks_.addTrack(s.track)),s}removeRemoteTextTrack(e){var t=this.remoteTextTrackEls().getTrackElementByTrack_(e);this.remoteTextTrackEls().removeTrackElement_(t),this.remoteTextTracks().removeTrack(e),this.autoRemoteTextTracks_.removeTrack(e)}getVideoPlaybackQuality(){return{}}requestPictureInPicture(){return Promise.reject()}disablePictureInPicture(){return!0}setDisablePictureInPicture(){}requestVideoFrameCallback(e){const t=v++;return!this.isReady_||this.paused()?(this.queuedHanders_.add(t),this.one("playing",()=>{this.queuedHanders_.has(t)&&(this.queuedHanders_.delete(t),e())})):this.requestNamedAnimationFrame(t,e),t}cancelVideoFrameCallback(e){this.queuedHanders_.has(e)?this.queuedHanders_.delete(e):this.cancelNamedAnimationFrame(e)}setPoster(){}playsinline(){}setPlaysinline(){}overrideNativeAudioTracks(e){}overrideNativeVideoTracks(e){}canPlayType(e){return""}static canPlayType(e){return""}static canPlaySource(e,t){return j.canPlayType(e.type)}static isTech(e){return e.prototype instanceof j||e instanceof j||e===j}static registerTech(e,t){if(j.techs_||(j.techs_={}),!j.isTech(t))throw new Error(`Tech ${e} must be a Tech`);if(!j.canPlayType)throw new Error("Techs must have a static canPlayType method on them");if(j.canPlaySource)return e=f(e),j.techs_[e]=t,j.techs_[Et(e)]=t,"Tech"!==e&&j.defaultTechOrder_.push(e),t;throw new Error("Techs must have a static canPlaySource method on them")}static getTech(e){if(e)return j.techs_&&j.techs_[e]?j.techs_[e]:(e=f(e),window&&window.videojs&&window.videojs[e]?(l.warn(`The ${e} tech was added to the videojs object when it should be registered using videojs.registerTech(name, tech)`),window.videojs[e]):void 0)}}x.names.forEach(function(e){const t=x[e];j.prototype[t.getterName]=function(){return this[t.privateName]=this[t.privateName]||new t.ListClass,this[t.privateName]}}),j.prototype.featuresVolumeControl=!0,j.prototype.featuresMuteControl=!0,j.prototype.featuresFullscreenResize=!1,j.prototype.featuresPlaybackRate=!1,j.prototype.featuresProgressEvents=!1,j.prototype.featuresSourceset=!1,j.prototype.featuresTimeupdateEvents=!1,j.prototype.featuresNativeTextTracks=!1,j.prototype.featuresVideoFrameCallback=!1,j.withSourceHandlers=function(r){r.registerSourceHandler=function(e,t){let s=r.sourceHandlers;s=s||(r.sourceHandlers=[]),void 0===t&&(t=s.length),s.splice(t,0,e)},r.canPlayType=function(t){var s,i=r.sourceHandlers||[];for(let e=0;e<i.length;e++)if(s=i[e].canPlayType(t))return s;return""},r.selectSourceHandler=function(t,s){var i=r.sourceHandlers||[];for(let e=0;e<i.length;e++)if(i[e].canHandleSource(t,s))return i[e];return null},r.canPlaySource=function(e,t){var s=r.selectSourceHandler(e,t);return s?s.canHandleSource(e,t):""};["seekable","seeking","duration"].forEach(function(e){const t=this[e];"function"==typeof t&&(this[e]=function(){return this.sourceHandler_&&this.sourceHandler_[e]?this.sourceHandler_[e].apply(this.sourceHandler_,arguments):t.apply(this,arguments)})},r.prototype),r.prototype.setSource=function(e){let t=r.selectSourceHandler(e,this.options_);t||(r.nativeSourceHandler?t=r.nativeSourceHandler:l.error("No source handler found for the current source.")),this.disposeSourceHandler(),this.off("dispose",this.disposeSourceHandler_),t!==r.nativeSourceHandler&&(this.currentSource_=e),this.sourceHandler_=t.handleSource(e,this,this.options_),this.one("dispose",this.disposeSourceHandler_)},r.prototype.disposeSourceHandler=function(){this.currentSource_&&(this.clearTracks(["audio","video"]),this.currentSource_=null),this.cleanupAutoTextTracks(),this.sourceHandler_&&(this.sourceHandler_.dispose&&this.sourceHandler_.dispose(),this.sourceHandler_=null)}},T.registerComponent("Tech",j),j.registerTech("Tech",j),j.defaultTechOrder_=[];const Es={},Ss={},xs={};function js(e,t,s){e.setTimeout(()=>function s(i={},e=[],r,n,a=[],o=!1){const[t,...l]=e;if("string"==typeof t)s(i,Es[t],r,n,a,o);else if(t){const h=Ls(n,t);if(!h.setSource)return a.push(h),s(i,l,r,n,a,o);h.setSource(Object.assign({},i),function(e,t){if(e)return s(i,l,r,n,a,o);a.push(h),s(t,i.type===t.type?l:Es[t.type],r,n,a,o)})}else l.length?s(i,l,r,n,a,o):o?r(i,a):s(i,Es["*"],r,n,a,!0)}(t,Es[t.type],s,e),1)}function Ps(e,t,s,i=null){var r="call"+f(s),r=e.reduce(As(r),i),i=r===xs,t=i?null:t[s](r),n=e,a=s,o=t,l=i;for(let e=n.length-1;0<=e;e--){var h=n[e];h[a]&&h[a](l,o)}return t}const Is={buffered:1,currentTime:1,duration:1,muted:1,played:1,paused:1,seekable:1,volume:1,ended:1},Ms={setCurrentTime:1,setMuted:1,setVolume:1},Os={play:1,pause:1};function As(s){return(e,t)=>e===xs?xs:t[s]?t[s](e):e}function Ls(e,t){var s=Ss[e.id()];let i=null;if(null==s)i=t(e),Ss[e.id()]=[[t,i]];else{for(let e=0;e<s.length;e++){var[r,n]=s[e];r===t&&(i=n)}null===i&&(i=t(e),s.push([t,i]))}return i}function Ns(e){if(Array.isArray(e)){let t=[];e.forEach(function(e){e=Ns(e),Array.isArray(e)?t=t.concat(e):n(e)&&t.push(e)}),e=t}else e="string"==typeof e&&e.trim()?[Rs({src:e})]:n(e)&&"string"==typeof e.src&&e.src&&e.src.trim()?[Rs(e)]:[];return e}const Ds={opus:"video/ogg",ogv:"video/ogg",mp4:"video/mp4",mov:"video/mp4",m4v:"video/mp4",mkv:"video/x-matroska",m4a:"audio/mp4",mp3:"audio/mpeg",aac:"audio/aac",caf:"audio/x-caf",flac:"audio/flac",oga:"audio/ogg",wav:"audio/wav",m3u8:"application/x-mpegURL",mpd:"application/dash+xml",jpg:"image/jpeg",jpeg:"image/jpeg",gif:"image/gif",png:"image/png",svg:"image/svg+xml",webp:"image/webp"},Bs=function(e=""){e=rs(e);return Ds[e.toLowerCase()]||""};function Rs(e){var t;return e.type||(t=Bs(e.src))&&(e.type=t),e}class Fs extends T{constructor(i,e,t){if(super(i,h({createEl:!1},e),t),e.playerOptions.sources&&0!==e.playerOptions.sources.length)i.src(e.playerOptions.sources);else for(let t=0,s=e.playerOptions.techOrder;t<s.length;t++){var r=f(s[t]);let e=j.getTech(r);if((e=r?e:T.getComponent(r))&&e.isSupported()){i.loadTech_(r);break}}}}T.registerComponent("MediaLoader",Fs);class Hs extends T{constructor(e,t){super(e,t),this.options_.controlText&&this.controlText(this.options_.controlText),this.handleMouseOver_=e=>this.handleMouseOver(e),this.handleMouseOut_=e=>this.handleMouseOut(e),this.handleClick_=e=>this.handleClick(e),this.handleKeyDown_=e=>this.handleKeyDown(e),this.emitTapEvents(),this.enable()}createEl(e="div",t={},s={}){t=Object.assign({className:this.buildCSSClass(),tabIndex:0},t),"button"===e&&l.error(`Creating a ClickableComponent with an HTML element of ${e} is not supported; use a Button instead.`),s=Object.assign({role:"button"},s),this.tabIndex_=t.tabIndex;e=p(e,t,s);return this.player_.options_.experimentalSvgIcons||e.appendChild(p("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),this.createControlTextEl(e),e}dispose(){this.controlTextEl_=null,super.dispose()}createControlTextEl(e){return this.controlTextEl_=p("span",{className:"vjs-control-text"},{"aria-live":"polite"}),e&&e.appendChild(this.controlTextEl_),this.controlText(this.controlText_,e),this.controlTextEl_}controlText(e,t=this.el()){if(void 0===e)return this.controlText_||"Need Text";var s=this.localize(e);this.controlText_=e,Ce(this.controlTextEl_,s),this.nonIconControl||this.player_.options_.noUITitleAttributes||t.setAttribute("title",s)}buildCSSClass(){return"vjs-control vjs-button "+super.buildCSSClass()}enable(){this.enabled_||(this.enabled_=!0,this.removeClass("vjs-disabled"),this.el_.setAttribute("aria-disabled","false"),"undefined"!=typeof this.tabIndex_&&this.el_.setAttribute("tabIndex",this.tabIndex_),this.on(["tap","click"],this.handleClick_),this.on("keydown",this.handleKeyDown_))}disable(){this.enabled_=!1,this.addClass("vjs-disabled"),this.el_.setAttribute("aria-disabled","true"),"undefined"!=typeof this.tabIndex_&&this.el_.removeAttribute("tabIndex"),this.off("mouseover",this.handleMouseOver_),this.off("mouseout",this.handleMouseOut_),this.off(["tap","click"],this.handleClick_),this.off("keydown",this.handleKeyDown_)}handleLanguagechange(){this.controlText(this.controlText_)}handleClick(e){this.options_.clickHandler&&this.options_.clickHandler.call(this,arguments)}handleKeyDown(e){b.isEventKey(e,"Space")||b.isEventKey(e,"Enter")?(e.preventDefault(),e.stopPropagation(),this.trigger("click")):super.handleKeyDown(e)}}T.registerComponent("ClickableComponent",Hs);class zs extends Hs{constructor(e,t){super(e,t),this.update(),this.update_=e=>this.update(e),e.on("posterchange",this.update_)}dispose(){this.player().off("posterchange",this.update_),super.dispose()}createEl(){return p("div",{className:"vjs-poster"})}crossOrigin(e){if("undefined"==typeof e)return this.$("img")?this.$("img").crossOrigin:this.player_.tech_&&this.player_.tech_.isReady_?this.player_.crossOrigin():this.player_.options_.crossOrigin||this.player_.options_.crossorigin||null;null!==e&&"anonymous"!==e&&"use-credentials"!==e?this.player_.log.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${e}"`):this.$("img")&&(this.$("img").crossOrigin=e)}update(e){var t=this.player().poster();this.setSrc(t),t?this.show():this.hide()}setSrc(e){e?(this.$("img")||this.el_.appendChild(p("picture",{className:"vjs-poster",tabIndex:-1},{},p("img",{loading:"lazy",crossOrigin:this.crossOrigin()},{alt:""}))),this.$("img").src=e):this.el_.textContent=""}handleClick(e){this.player_.controls()&&(this.player_.tech(!0)&&this.player_.tech(!0).focus(),this.player_.paused()?w(this.player_.play()):this.player_.pause())}}zs.prototype.crossorigin=zs.prototype.crossOrigin,T.registerComponent("PosterImage",zs);const Vs={monospace:"monospace",sansSerif:"sans-serif",serif:"serif",monospaceSansSerif:'"Andale Mono", "Lucida Console", monospace',monospaceSerif:'"Courier New", monospace',proportionalSansSerif:"sans-serif",proportionalSerif:"serif",casual:'"Comic Sans MS", Impact, fantasy',script:'"Monotype Corsiva", cursive',smallcaps:'"Andale Mono", "Lucida Console", monospace, sans-serif'};function qs(e,t){let s;if(4===e.length)s=e[1]+e[1]+e[2]+e[2]+e[3]+e[3];else{if(7!==e.length)throw new Error("Invalid color code provided, "+e+"; must be formatted as e.g. #f0e or #f604e2.");s=e.slice(1)}return"rgba("+parseInt(s.slice(0,2),16)+","+parseInt(s.slice(2,4),16)+","+parseInt(s.slice(4,6),16)+","+t+")"}function $s(e,t,s){try{e.style[t]=s}catch(e){}}function Ks(e){return e?e+"px":""}class Us extends T{constructor(i,e,t){super(i,e,t);const r=e=>{this.updateDisplayOverlay(),this.updateDisplay(e)};i.on("loadstart",e=>this.toggleDisplay(e)),i.on("texttrackchange",e=>this.updateDisplay(e)),i.on("loadedmetadata",e=>{this.updateDisplayOverlay(),this.preselectTrack(e)}),i.ready(y(this,function(){if(i.tech_&&i.tech_.featuresNativeTextTracks)this.hide();else{i.on("fullscreenchange",r),i.on("playerresize",r);const e=window.screen.orientation||window,s=window.screen.orientation?"change":"orientationchange";e.addEventListener(s,r),i.on("dispose",()=>e.removeEventListener(s,r));var t=this.options_.playerOptions.tracks||[];for(let e=0;e<t.length;e++)this.player_.addRemoteTextTrack(t[e],!0);this.preselectTrack()}}))}preselectTrack(){var t={captions:1,subtitles:1},s=this.player_.textTracks(),i=this.player_.cache_.selectedLanguage;let r,n,a;for(let e=0;e<s.length;e++){var o=s[e];i&&i.enabled&&i.language&&i.language===o.language&&o.kind in t?a=o.kind!==i.kind&&a||o:i&&!i.enabled?(a=null,r=null,n=null):o.default&&("descriptions"!==o.kind||r?o.kind in t&&!n&&(n=o):r=o)}a?a.mode="showing":n?n.mode="showing":r&&(r.mode="showing")}toggleDisplay(){this.player_.tech_&&this.player_.tech_.featuresNativeTextTracks?this.hide():this.show()}createEl(){return super.createEl("div",{className:"vjs-text-track-display"},{translate:"yes","aria-live":"off","aria-atomic":"true"})}clearDisplay(){"function"==typeof window.WebVTT&&window.WebVTT.processCues(window,[],this.el_)}updateDisplay(){var i=this.player_.textTracks(),e=this.options_.allowMultipleShowingTracks;if(this.clearDisplay(),e){var t=[];for(let e=0;e<i.length;++e){var s=i[e];"showing"===s.mode&&t.push(s)}this.updateForTrack(t)}else{let e=null,t=null,s=i.length;for(;s--;){var r=i[s];"showing"===r.mode&&("descriptions"===r.kind?e=r:t=r)}t?("off"!==this.getAttribute("aria-live")&&this.setAttribute("aria-live","off"),this.updateForTrack(t)):e&&("assertive"!==this.getAttribute("aria-live")&&this.setAttribute("aria-live","assertive"),this.updateForTrack(e))}}updateDisplayOverlay(){if(this.player_.videoHeight()&&window.CSS.supports("inset-inline: 10px")){var s=this.player_.currentWidth(),i=this.player_.currentHeight(),r=s/i,n=this.player_.videoWidth()/this.player_.videoHeight();let e=0,t=0;.1<Math.abs(r-n)&&(n<r?e=Math.round((s-i*n)/2):t=Math.round((i-s/n)/2)),$s(this.el_,"insetInline",Ks(e)),$s(this.el_,"insetBlock",Ks(t))}}updateDisplayState(e){var t=this.player_.textTrackSettings.getValues(),s=e.activeCues;let i=s.length;for(;i--;){var r,n=s[i];n&&(n=n.displayState,t.color&&(n.firstChild.style.color=t.color),t.textOpacity&&$s(n.firstChild,"color",qs(t.color||"#fff",t.textOpacity)),t.backgroundColor&&(n.firstChild.style.backgroundColor=t.backgroundColor),t.backgroundOpacity&&$s(n.firstChild,"backgroundColor",qs(t.backgroundColor||"#000",t.backgroundOpacity)),t.windowColor&&(t.windowOpacity?$s(n,"backgroundColor",qs(t.windowColor,t.windowOpacity)):n.style.backgroundColor=t.windowColor),t.edgeStyle&&("dropshadow"===t.edgeStyle?n.firstChild.style.textShadow="2px 2px 3px #222, 2px 2px 4px #222, 2px 2px 5px #222":"raised"===t.edgeStyle?n.firstChild.style.textShadow="1px 1px #222, 2px 2px #222, 3px 3px #222":"depressed"===t.edgeStyle?n.firstChild.style.textShadow="1px 1px #ccc, 0 1px #ccc, -1px -1px #222, 0 -1px #222":"uniform"===t.edgeStyle&&(n.firstChild.style.textShadow="0 0 4px #222, 0 0 4px #222, 0 0 4px #222, 0 0 4px #222")),t.fontPercent&&1!==t.fontPercent&&(r=window.parseFloat(n.style.fontSize),n.style.fontSize=r*t.fontPercent+"px",n.style.height="auto",n.style.top="auto"),t.fontFamily)&&"default"!==t.fontFamily&&("small-caps"===t.fontFamily?n.firstChild.style.fontVariant="small-caps":n.firstChild.style.fontFamily=Vs[t.fontFamily])}}updateForTrack(s){if(Array.isArray(s)||(s=[s]),"function"==typeof window.WebVTT&&!s.every(e=>!e.activeCues)){var t=[];for(let e=0;e<s.length;++e){var i=s[e];for(let e=0;e<i.activeCues.length;++e)t.push(i.activeCues[e])}window.WebVTT.processCues(window,t,this.el_);for(let t=0;t<s.length;++t){var r=s[t];for(let e=0;e<r.activeCues.length;++e){var n=r.activeCues[e].displayState;Se(n,"vjs-text-track-cue","vjs-text-track-cue-"+(r.language||t)),r.language&&Oe(n,"lang",r.language)}this.player_.textTrackSettings&&this.updateDisplayState(r)}}}}T.registerComponent("TextTrackDisplay",Us);class Ws extends T{createEl(){var e=this.player_.isAudio(),e=this.localize(e?"Audio Player":"Video Player"),e=p("span",{className:"vjs-control-text",textContent:this.localize("{1} is loading.",[e])}),t=super.createEl("div",{className:"vjs-loading-spinner",dir:"ltr"});return t.appendChild(e),t}handleLanguagechange(){this.$(".vjs-control-text").textContent=this.localize("{1} is loading.",[this.player_.isAudio()?"Audio Player":"Video Player"])}}T.registerComponent("LoadingSpinner",Ws);class P extends Hs{createEl(e,t={},s={}){t=p("button",t=Object.assign({className:this.buildCSSClass()},t),s=Object.assign({type:"button"},s));return this.player_.options_.experimentalSvgIcons||t.appendChild(p("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),this.createControlTextEl(t),t}addChild(e,t={}){var s=this.constructor.name;return l.warn(`Adding an actionable (user controllable) child to a Button (${s}) is not supported; use a ClickableComponent instead.`),T.prototype.addChild.call(this,e,t)}enable(){super.enable(),this.el_.removeAttribute("disabled")}disable(){super.disable(),this.el_.setAttribute("disabled","disabled")}handleKeyDown(e){b.isEventKey(e,"Space")||b.isEventKey(e,"Enter")?e.stopPropagation():super.handleKeyDown(e)}}T.registerComponent("Button",P);class Gs extends P{constructor(e,t){super(e,t),this.mouseused_=!1,this.setIcon("play"),this.on("mousedown",e=>this.handleMouseDown(e))}buildCSSClass(){return"vjs-big-play-button"}handleClick(e){var t=this.player_.play();if(this.mouseused_&&"clientX"in e&&"clientY"in e)w(t),this.player_.tech(!0)&&this.player_.tech(!0).focus();else{var e=this.player_.getChild("controlBar");const s=e&&e.getChild("playToggle");s?(e=()=>s.focus(),Ft(t)?t.then(e,()=>{}):this.setTimeout(e,1)):this.player_.tech(!0).focus()}}handleKeyDown(e){this.mouseused_=!1,super.handleKeyDown(e)}handleMouseDown(e){this.mouseused_=!0}}Gs.prototype.controlText_="Play Video",T.registerComponent("BigPlayButton",Gs);P;T.registerComponent("CloseButton",class extends P{constructor(e,t){super(e,t),this.setIcon("cancel"),this.controlText(t&&t.controlText||this.localize("Close"))}buildCSSClass(){return"vjs-close-button "+super.buildCSSClass()}handleClick(e){this.trigger({type:"close",bubbles:!1})}handleKeyDown(e){b.isEventKey(e,"Esc")?(e.preventDefault(),e.stopPropagation(),this.trigger("click")):super.handleKeyDown(e)}});class Xs extends P{constructor(e,t={}){super(e,t),t.replay=void 0===t.replay||t.replay,this.setIcon("play"),this.on(e,"play",e=>this.handlePlay(e)),this.on(e,"pause",e=>this.handlePause(e)),t.replay&&this.on(e,"ended",e=>this.handleEnded(e))}buildCSSClass(){return"vjs-play-control "+super.buildCSSClass()}handleClick(e){this.player_.paused()?w(this.player_.play()):this.player_.pause()}handleSeeked(e){this.removeClass("vjs-ended"),this.player_.paused()?this.handlePause(e):this.handlePlay(e)}handlePlay(e){this.removeClass("vjs-ended","vjs-paused"),this.addClass("vjs-playing"),this.setIcon("pause"),this.controlText("Pause")}handlePause(e){this.removeClass("vjs-playing"),this.addClass("vjs-paused"),this.setIcon("play"),this.controlText("Play")}handleEnded(e){this.removeClass("vjs-playing"),this.addClass("vjs-ended"),this.setIcon("replay"),this.controlText("Replay"),this.one(this.player_,"seeked",e=>this.handleSeeked(e))}}Xs.prototype.controlText_="Play",T.registerComponent("PlayToggle",Xs);class Ys extends T{constructor(e,t){super(e,t),this.on(e,["timeupdate","ended","seeking"],e=>this.update(e)),this.updateTextNode_()}createEl(){var e=this.buildCSSClass(),t=super.createEl("div",{className:e+" vjs-time-control vjs-control"}),s=p("span",{className:"vjs-control-text",textContent:this.localize(this.labelText_)+" "},{role:"presentation"});return t.appendChild(s),this.contentEl_=p("span",{className:e+"-display"},{role:"presentation"}),t.appendChild(this.contentEl_),t}dispose(){this.contentEl_=null,this.textNode_=null,super.dispose()}update(e){!this.player_.options_.enableSmoothSeeking&&"seeking"===e.type||this.updateContent(e)}updateTextNode_(e=0){e=Nt(e),this.formattedTime_!==e&&(this.formattedTime_=e,this.requestNamedAnimationFrame("TimeDisplay#updateTextNode_",()=>{if(this.contentEl_){let e=this.textNode_;e&&this.contentEl_.firstChild!==e&&(e=null,l.warn("TimeDisplay#updateTextnode_: Prevented replacement of text node element since it was no longer a child of this node. Appending a new node instead.")),this.textNode_=document.createTextNode(this.formattedTime_),this.textNode_&&(e?this.contentEl_.replaceChild(this.textNode_,e):this.contentEl_.appendChild(this.textNode_))}}))}updateContent(e){}}Ys.prototype.labelText_="Time",Ys.prototype.controlText_="Time",T.registerComponent("TimeDisplay",Ys);class Qs extends Ys{buildCSSClass(){return"vjs-current-time"}updateContent(e){let t;t=this.player_.ended()?this.player_.duration():this.player_.scrubbing()?this.player_.getCache().currentTime:this.player_.currentTime(),this.updateTextNode_(t)}}Qs.prototype.labelText_="Current Time",Qs.prototype.controlText_="Current Time",T.registerComponent("CurrentTimeDisplay",Qs);class Js extends Ys{constructor(e,t){super(e,t);t=e=>this.updateContent(e);this.on(e,"durationchange",t),this.on(e,"loadstart",t),this.on(e,"loadedmetadata",t)}buildCSSClass(){return"vjs-duration"}updateContent(e){var t=this.player_.duration();this.updateTextNode_(t)}}Js.prototype.labelText_="Duration",Js.prototype.controlText_="Duration",T.registerComponent("DurationDisplay",Js);class Zs extends T{createEl(){var e=super.createEl("div",{className:"vjs-time-control vjs-time-divider"},{"aria-hidden":!0}),t=super.createEl("div"),s=super.createEl("span",{textContent:"/"});return t.appendChild(s),e.appendChild(t),e}}T.registerComponent("TimeDivider",Zs);class ei extends Ys{constructor(e,t){super(e,t),this.on(e,"durationchange",e=>this.updateContent(e))}buildCSSClass(){return"vjs-remaining-time"}createEl(){var e=super.createEl();return!1!==this.options_.displayNegative&&e.insertBefore(p("span",{},{"aria-hidden":!0},"-"),this.contentEl_),e}updateContent(e){if("number"==typeof this.player_.duration()){let e;e=this.player_.ended()?0:this.player_.remainingTimeDisplay?this.player_.remainingTimeDisplay():this.player_.remainingTime(),this.updateTextNode_(e)}}}ei.prototype.labelText_="Remaining Time",ei.prototype.controlText_="Remaining Time",T.registerComponent("RemainingTimeDisplay",ei);class ti extends T{constructor(e,t){super(e,t),this.updateShowing(),this.on(this.player(),"durationchange",e=>this.updateShowing(e))}createEl(){var e=super.createEl("div",{className:"vjs-live-control vjs-control"});return this.contentEl_=p("div",{className:"vjs-live-display"},{"aria-live":"off"}),this.contentEl_.appendChild(p("span",{className:"vjs-control-text",textContent:this.localize("Stream Type")+" "})),this.contentEl_.appendChild(document.createTextNode(this.localize("LIVE"))),e.appendChild(this.contentEl_),e}dispose(){this.contentEl_=null,super.dispose()}updateShowing(e){this.player().duration()===1/0?this.show():this.hide()}}T.registerComponent("LiveDisplay",ti);class si extends P{constructor(e,t){super(e,t),this.updateLiveEdgeStatus(),this.player_.liveTracker&&(this.updateLiveEdgeStatusHandler_=e=>this.updateLiveEdgeStatus(e),this.on(this.player_.liveTracker,"liveedgechange",this.updateLiveEdgeStatusHandler_))}createEl(){var e=super.createEl("button",{className:"vjs-seek-to-live-control vjs-control"});return this.setIcon("circle",e),this.textEl_=p("span",{className:"vjs-seek-to-live-text",textContent:this.localize("LIVE")},{"aria-hidden":"true"}),e.appendChild(this.textEl_),e}updateLiveEdgeStatus(){!this.player_.liveTracker||this.player_.liveTracker.atLiveEdge()?(this.setAttribute("aria-disabled",!0),this.addClass("vjs-at-live-edge"),this.controlText("Seek to live, currently playing live")):(this.setAttribute("aria-disabled",!1),this.removeClass("vjs-at-live-edge"),this.controlText("Seek to live, currently behind live"))}handleClick(){this.player_.liveTracker.seekToLiveEdge()}dispose(){this.player_.liveTracker&&this.off(this.player_.liveTracker,"liveedgechange",this.updateLiveEdgeStatusHandler_),this.textEl_=null,super.dispose()}}function ii(e,t,s){return e=Number(e),Math.min(s,Math.max(t,isNaN(e)?t:e))}si.prototype.controlText_="Seek to live, currently playing live",T.registerComponent("SeekToLive",si);t=Object.freeze({__proto__:null,clamp:ii});class ri extends T{constructor(e,t){super(e,t),this.handleMouseDown_=e=>this.handleMouseDown(e),this.handleMouseUp_=e=>this.handleMouseUp(e),this.handleKeyDown_=e=>this.handleKeyDown(e),this.handleClick_=e=>this.handleClick(e),this.handleMouseMove_=e=>this.handleMouseMove(e),this.update_=e=>this.update(e),this.bar=this.getChild(this.options_.barName),this.vertical(!!this.options_.vertical),this.enable()}enabled(){return this.enabled_}enable(){this.enabled()||(this.on("mousedown",this.handleMouseDown_),this.on("touchstart",this.handleMouseDown_),this.on("keydown",this.handleKeyDown_),this.on("click",this.handleClick_),this.on(this.player_,"controlsvisible",this.update),this.playerEvent&&this.on(this.player_,this.playerEvent,this.update),this.removeClass("disabled"),this.setAttribute("tabindex",0),this.enabled_=!0)}disable(){var e;this.enabled()&&(e=this.bar.el_.ownerDocument,this.off("mousedown",this.handleMouseDown_),this.off("touchstart",this.handleMouseDown_),this.off("keydown",this.handleKeyDown_),this.off("click",this.handleClick_),this.off(this.player_,"controlsvisible",this.update_),this.off(e,"mousemove",this.handleMouseMove_),this.off(e,"mouseup",this.handleMouseUp_),this.off(e,"touchmove",this.handleMouseMove_),this.off(e,"touchend",this.handleMouseUp_),this.removeAttribute("tabindex"),this.addClass("disabled"),this.playerEvent&&this.off(this.player_,this.playerEvent,this.update),this.enabled_=!1)}createEl(e,t={},s={}){return t.className=t.className+" vjs-slider",t=Object.assign({tabIndex:0},t),s=Object.assign({role:"slider","aria-valuenow":0,"aria-valuemin":0,"aria-valuemax":100},s),super.createEl(e,t,s)}handleMouseDown(e){var t=this.bar.el_.ownerDocument;"mousedown"===e.type&&e.preventDefault(),"touchstart"!==e.type||c||e.preventDefault(),Le(),this.addClass("vjs-sliding"),this.trigger("slideractive"),this.on(t,"mousemove",this.handleMouseMove_),this.on(t,"mouseup",this.handleMouseUp_),this.on(t,"touchmove",this.handleMouseMove_),this.on(t,"touchend",this.handleMouseUp_),this.handleMouseMove(e,!0)}handleMouseMove(e){}handleMouseUp(e){var t=this.bar.el_.ownerDocument;Ne(),this.removeClass("vjs-sliding"),this.trigger("sliderinactive"),this.off(t,"mousemove",this.handleMouseMove_),this.off(t,"mouseup",this.handleMouseUp_),this.off(t,"touchmove",this.handleMouseMove_),this.off(t,"touchend",this.handleMouseUp_),this.update()}update(){if(this.el_&&this.bar){const t=this.getProgress();return t!==this.progress_&&(this.progress_=t,this.requestNamedAnimationFrame("Slider#update",()=>{var e=this.vertical()?"height":"width";this.bar.el().style[e]=(100*t).toFixed(2)+"%"})),t}}getProgress(){return Number(ii(this.getPercent(),0,1).toFixed(4))}calculateDistance(e){e=Re(this.el_,e);return this.vertical()?e.y:e.x}handleKeyDown(e){b.isEventKey(e,"Left")||b.isEventKey(e,"Down")?(e.preventDefault(),e.stopPropagation(),this.stepBack()):b.isEventKey(e,"Right")||b.isEventKey(e,"Up")?(e.preventDefault(),e.stopPropagation(),this.stepForward()):super.handleKeyDown(e)}handleClick(e){e.stopPropagation(),e.preventDefault()}vertical(e){if(void 0===e)return this.vertical_||!1;this.vertical_=!!e,this.vertical_?this.addClass("vjs-slider-vertical"):this.addClass("vjs-slider-horizontal")}}T.registerComponent("Slider",ri);const ni=(e,t)=>ii(e/t*100,0,100).toFixed(2)+"%";class ai extends T{constructor(e,t){super(e,t),this.partEls_=[],this.on(e,"progress",e=>this.update(e))}createEl(){var e=super.createEl("div",{className:"vjs-load-progress"}),t=p("span",{className:"vjs-control-text"}),s=p("span",{textContent:this.localize("Loaded")}),i=document.createTextNode(": ");return this.percentageEl_=p("span",{className:"vjs-control-text-loaded-percentage",textContent:"0%"}),e.appendChild(t),t.appendChild(s),t.appendChild(i),t.appendChild(this.percentageEl_),e}dispose(){this.partEls_=null,this.percentageEl_=null,super.dispose()}update(e){this.requestNamedAnimationFrame("LoadProgressBar#update",()=>{var e=this.player_.liveTracker,s=this.player_.buffered(),e=e&&e.isLive()?e.seekableEnd():this.player_.duration(),i=this.player_.bufferedEnd(),r=this.partEls_,e=ni(i,e);this.percent_!==e&&(this.el_.style.width=e,Ce(this.percentageEl_,e),this.percent_=e);for(let t=0;t<s.length;t++){var n=s.start(t),a=s.end(t);let e=r[t];e||(e=this.el_.appendChild(p()),r[t]=e),e.dataset.start===n&&e.dataset.end===a||(e.dataset.start=n,e.dataset.end=a,e.style.left=ni(n,i),e.style.width=ni(a-n,i))}for(let e=r.length;e>s.length;e--)this.el_.removeChild(r[e-1]);r.length=s.length})}}T.registerComponent("LoadProgressBar",ai);class oi extends T{constructor(e,t){super(e,t),this.update=r(y(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-time-tooltip"},{"aria-hidden":"true"})}update(i,r,n){var a=Be(this.el_),o=De(this.player_.el()),r=i.width*r;if(o&&a){let e=i.left-o.left+r,t=i.width-r+(o.right-i.right),s=(t||(t=i.width-r,e=r),a.width/2);e<s?s+=s-e:t<s&&(s=t),s<0?s=0:s>a.width&&(s=a.width),s=Math.round(s),this.el_.style.right=`-${s}px`,this.write(n)}}write(e){Ce(this.el_,e)}updateTime(r,n,a,o){this.requestNamedAnimationFrame("TimeTooltip#updateTime",()=>{let e;var t,s,i=this.player_.duration();e=this.player_.liveTracker&&this.player_.liveTracker.isLive()?((s=(t=this.player_.liveTracker.liveWindow())-n*t)<1?"":"-")+Nt(s,t):Nt(a,i),this.update(r,n,e),o&&o()})}}T.registerComponent("TimeTooltip",oi);class li extends T{constructor(e,t){super(e,t),this.setIcon("circle"),this.update=r(y(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-play-progress vjs-slider-bar"},{"aria-hidden":"true"})}update(e,t){var s,i=this.getChild("timeTooltip");i&&(s=this.player_.scrubbing()?this.player_.getCache().currentTime:this.player_.currentTime(),i.updateTime(e,t,s))}}li.prototype.options_={children:[]},u||o||li.prototype.options_.children.push("timeTooltip"),T.registerComponent("PlayProgressBar",li);class hi extends T{constructor(e,t){super(e,t),this.update=r(y(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-mouse-display"})}update(e,t){var s=t*this.player_.duration();this.getChild("timeTooltip").updateTime(e,t,s,()=>{this.el_.style.left=e.width*t+"px"})}}hi.prototype.options_={children:["timeTooltip"]},T.registerComponent("MouseTimeDisplay",hi);class ci extends ri{constructor(e,t){super(e,t),this.setEventHandlers_()}setEventHandlers_(){this.update_=y(this,this.update),this.update=r(this.update_,30),this.on(this.player_,["ended","durationchange","timeupdate"],this.update),this.player_.liveTracker&&this.on(this.player_.liveTracker,"liveedgechange",this.update),this.updateInterval=null,this.enableIntervalHandler_=e=>this.enableInterval_(e),this.disableIntervalHandler_=e=>this.disableInterval_(e),this.on(this.player_,["playing"],this.enableIntervalHandler_),this.on(this.player_,["ended","pause","waiting"],this.disableIntervalHandler_),"hidden"in document&&"visibilityState"in document&&this.on(document,"visibilitychange",this.toggleVisibility_)}toggleVisibility_(e){"hidden"===document.visibilityState?(this.cancelNamedAnimationFrame("SeekBar#update"),this.cancelNamedAnimationFrame("Slider#update"),this.disableInterval_(e)):(this.player_.ended()||this.player_.paused()||this.enableInterval_(),this.update())}enableInterval_(){this.updateInterval||(this.updateInterval=this.setInterval(this.update,30))}disableInterval_(e){this.player_.liveTracker&&this.player_.liveTracker.isLive()&&e&&"ended"!==e.type||this.updateInterval&&(this.clearInterval(this.updateInterval),this.updateInterval=null)}createEl(){return super.createEl("div",{className:"vjs-progress-holder"},{"aria-label":this.localize("Progress Bar")})}update(e){if("hidden"!==document.visibilityState){const i=super.update();return this.requestNamedAnimationFrame("SeekBar#update",()=>{var e=this.player_.ended()?this.player_.duration():this.getCurrentTime_(),t=this.player_.liveTracker;let s=this.player_.duration();t&&t.isLive()&&(s=this.player_.liveTracker.liveCurrentTime()),this.percent_!==i&&(this.el_.setAttribute("aria-valuenow",(100*i).toFixed(2)),this.percent_=i),this.currentTime_===e&&this.duration_===s||(this.el_.setAttribute("aria-valuetext",this.localize("progress bar timing: currentTime={1} duration={2}",[Nt(e,s),Nt(s,s)],"{1} of {2}")),this.currentTime_=e,this.duration_=s),this.bar&&this.bar.update(De(this.el()),this.getProgress())}),i}}userSeek_(e){this.player_.liveTracker&&this.player_.liveTracker.isLive()&&this.player_.liveTracker.nextSeekedFromUser(),this.player_.currentTime(e)}getCurrentTime_(){return this.player_.scrubbing()?this.player_.getCache().currentTime:this.player_.currentTime()}getPercent(){var e=this.getCurrentTime_();let t;var s=this.player_.liveTracker;return s&&s.isLive()?(t=(e-s.seekableStart())/s.liveWindow(),s.atLiveEdge()&&(t=1)):t=e/this.player_.duration(),t}handleMouseDown(e){$e(e)&&(e.stopPropagation(),this.videoWasPlaying=!this.player_.paused(),this.player_.pause(),super.handleMouseDown(e))}handleMouseMove(t,s=!1){if($e(t)&&!isNaN(this.player_.duration())){s||this.player_.scrubbing()||this.player_.scrubbing(!0);let e;s=this.calculateDistance(t),t=this.player_.liveTracker;if(t&&t.isLive()){if(.99<=s)return void t.seekToLiveEdge();var i=t.seekableStart(),r=t.liveCurrentTime();if((e=(e=(e=i+s*t.liveWindow())>=r?r:e)<=i?i+.1:e)===1/0)return}else(e=s*this.player_.duration())===this.player_.duration()&&(e-=.1);this.userSeek_(e),this.player_.options_.enableSmoothSeeking&&this.update()}}enable(){super.enable();var e=this.getChild("mouseTimeDisplay");e&&e.show()}disable(){super.disable();var e=this.getChild("mouseTimeDisplay");e&&e.hide()}handleMouseUp(e){super.handleMouseUp(e),e&&e.stopPropagation(),this.player_.scrubbing(!1),this.player_.trigger({type:"timeupdate",target:this,manuallyTriggered:!0}),this.videoWasPlaying?w(this.player_.play()):this.update_()}stepForward(){this.userSeek_(this.player_.currentTime()+5)}stepBack(){this.userSeek_(this.player_.currentTime()-5)}handleAction(e){this.player_.paused()?this.player_.play():this.player_.pause()}handleKeyDown(e){var t,s=this.player_.liveTracker;b.isEventKey(e,"Space")||b.isEventKey(e,"Enter")?(e.preventDefault(),e.stopPropagation(),this.handleAction(e)):b.isEventKey(e,"Home")?(e.preventDefault(),e.stopPropagation(),this.userSeek_(0)):b.isEventKey(e,"End")?(e.preventDefault(),e.stopPropagation(),s&&s.isLive()?this.userSeek_(s.liveCurrentTime()):this.userSeek_(this.player_.duration())):/^[0-9]$/.test(b(e))?(e.preventDefault(),e.stopPropagation(),t=10*(b.codes[b(e)]-b.codes[0])/100,s&&s.isLive()?this.userSeek_(s.seekableStart()+s.liveWindow()*t):this.userSeek_(this.player_.duration()*t)):b.isEventKey(e,"PgDn")?(e.preventDefault(),e.stopPropagation(),this.userSeek_(this.player_.currentTime()-60)):b.isEventKey(e,"PgUp")?(e.preventDefault(),e.stopPropagation(),this.userSeek_(this.player_.currentTime()+60)):super.handleKeyDown(e)}dispose(){this.disableInterval_(),this.off(this.player_,["ended","durationchange","timeupdate"],this.update),this.player_.liveTracker&&this.off(this.player_.liveTracker,"liveedgechange",this.update),this.off(this.player_,["playing"],this.enableIntervalHandler_),this.off(this.player_,["ended","pause","waiting"],this.disableIntervalHandler_),"hidden"in document&&"visibilityState"in document&&this.off(document,"visibilitychange",this.toggleVisibility_),super.dispose()}}ci.prototype.options_={children:["loadProgressBar","playProgressBar"],barName:"playProgressBar"},u||o||ci.prototype.options_.children.splice(1,0,"mouseTimeDisplay"),T.registerComponent("SeekBar",ci);class di extends T{constructor(e,t){super(e,t),this.handleMouseMove=r(y(this,this.handleMouseMove),30),this.throttledHandleMouseSeek=r(y(this,this.handleMouseSeek),30),this.handleMouseUpHandler_=e=>this.handleMouseUp(e),this.handleMouseDownHandler_=e=>this.handleMouseDown(e),this.enable()}createEl(){return super.createEl("div",{className:"vjs-progress-control vjs-control"})}handleMouseMove(e){var t,s,i,r,n=this.getChild("seekBar");n&&(t=n.getChild("playProgressBar"),s=n.getChild("mouseTimeDisplay"),t||s)&&(i=Be(r=n.el()),r=ii(r=Re(r,e).x,0,1),s&&s.update(i,r),t)&&t.update(i,n.getProgress())}handleMouseSeek(e){var t=this.getChild("seekBar");t&&t.handleMouseMove(e)}enabled(){return this.enabled_}disable(){var e;this.children().forEach(e=>e.disable&&e.disable()),this.enabled()&&(this.off(["mousedown","touchstart"],this.handleMouseDownHandler_),this.off(this.el_,"mousemove",this.handleMouseMove),this.removeListenersAddedOnMousedownAndTouchstart(),this.addClass("disabled"),this.enabled_=!1,this.player_.scrubbing())&&(e=this.getChild("seekBar"),this.player_.scrubbing(!1),e.videoWasPlaying)&&w(this.player_.play())}enable(){this.children().forEach(e=>e.enable&&e.enable()),this.enabled()||(this.on(["mousedown","touchstart"],this.handleMouseDownHandler_),this.on(this.el_,"mousemove",this.handleMouseMove),this.removeClass("disabled"),this.enabled_=!0)}removeListenersAddedOnMousedownAndTouchstart(){var e=this.el_.ownerDocument;this.off(e,"mousemove",this.throttledHandleMouseSeek),this.off(e,"touchmove",this.throttledHandleMouseSeek),this.off(e,"mouseup",this.handleMouseUpHandler_),this.off(e,"touchend",this.handleMouseUpHandler_)}handleMouseDown(e){var t=this.el_.ownerDocument,s=this.getChild("seekBar");s&&s.handleMouseDown(e),this.on(t,"mousemove",this.throttledHandleMouseSeek),this.on(t,"touchmove",this.throttledHandleMouseSeek),this.on(t,"mouseup",this.handleMouseUpHandler_),this.on(t,"touchend",this.handleMouseUpHandler_)}handleMouseUp(e){var t=this.getChild("seekBar");t&&t.handleMouseUp(e),this.removeListenersAddedOnMousedownAndTouchstart()}}di.prototype.options_={children:["seekBar"]},T.registerComponent("ProgressControl",di);class ui extends P{constructor(e,t){super(e,t),this.setIcon("picture-in-picture-enter"),this.on(e,["enterpictureinpicture","leavepictureinpicture"],e=>this.handlePictureInPictureChange(e)),this.on(e,["disablepictureinpicturechanged","loadedmetadata"],e=>this.handlePictureInPictureEnabledChange(e)),this.on(e,["loadedmetadata","audioonlymodechange","audiopostermodechange"],()=>this.handlePictureInPictureAudioModeChange()),this.disable()}buildCSSClass(){return"vjs-picture-in-picture-control vjs-hidden "+super.buildCSSClass()}handlePictureInPictureAudioModeChange(){"audio"===this.player_.currentType().substring(0,5)||this.player_.audioPosterMode()||this.player_.audioOnlyMode()?(this.player_.isInPictureInPicture()&&this.player_.exitPictureInPicture(),this.hide()):this.show()}handlePictureInPictureEnabledChange(){document.pictureInPictureEnabled&&!1===this.player_.disablePictureInPicture()||this.player_.options_.enableDocumentPictureInPicture&&"documentPictureInPicture"in window?this.enable():this.disable()}handlePictureInPictureChange(e){this.player_.isInPictureInPicture()?(this.setIcon("picture-in-picture-exit"),this.controlText("Exit Picture-in-Picture")):(this.setIcon("picture-in-picture-enter"),this.controlText("Picture-in-Picture")),this.handlePictureInPictureEnabledChange()}handleClick(e){this.player_.isInPictureInPicture()?this.player_.exitPictureInPicture():this.player_.requestPictureInPicture()}show(){"function"==typeof document.exitPictureInPicture&&super.show()}}ui.prototype.controlText_="Picture-in-Picture",T.registerComponent("PictureInPictureToggle",ui);class pi extends P{constructor(e,t){super(e,t),this.setIcon("fullscreen-enter"),this.on(e,"fullscreenchange",e=>this.handleFullscreenChange(e)),!1===document[e.fsApi_.fullscreenEnabled]&&this.disable()}buildCSSClass(){return"vjs-fullscreen-control "+super.buildCSSClass()}handleFullscreenChange(e){this.player_.isFullscreen()?(this.controlText("Exit Fullscreen"),this.setIcon("fullscreen-exit")):(this.controlText("Fullscreen"),this.setIcon("fullscreen-enter"))}handleClick(e){this.player_.isFullscreen()?this.player_.exitFullscreen():this.player_.requestFullscreen()}}pi.prototype.controlText_="Fullscreen",T.registerComponent("FullscreenToggle",pi);class gi extends T{createEl(){var e=super.createEl("div",{className:"vjs-volume-level"});return this.setIcon("circle",e),e.appendChild(super.createEl("span",{className:"vjs-control-text"})),e}}T.registerComponent("VolumeLevel",gi);class vi extends T{constructor(e,t){super(e,t),this.update=r(y(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-volume-tooltip"},{"aria-hidden":"true"})}update(t,s,i,e){if(!i){var i=De(this.el_),r=De(this.player_.el()),s=t.width*s;if(!r||!i)return;var n=t.left-r.left+s,s=t.width-s+(r.right-t.right);let e=i.width/2;n<e?e+=e-n:s<e&&(e=s),e<0?e=0:e>i.width&&(e=i.width),this.el_.style.right=`-${e}px`}this.write(e+"%")}write(e){Ce(this.el_,e)}updateVolume(e,t,s,i,r){this.requestNamedAnimationFrame("VolumeLevelTooltip#updateVolume",()=>{this.update(e,t,s,i.toFixed(0)),r&&r()})}}T.registerComponent("VolumeLevelTooltip",vi);class mi extends T{constructor(e,t){super(e,t),this.update=r(y(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-mouse-display"})}update(e,t,s){var i=100*t;this.getChild("volumeLevelTooltip").updateVolume(e,t,s,i,()=>{s?this.el_.style.bottom=e.height*t+"px":this.el_.style.left=e.width*t+"px"})}}mi.prototype.options_={children:["volumeLevelTooltip"]},T.registerComponent("MouseVolumeLevelDisplay",mi);class _i extends ri{constructor(e,t){super(e,t),this.on("slideractive",e=>this.updateLastVolume_(e)),this.on(e,"volumechange",e=>this.updateARIAAttributes(e)),e.ready(()=>this.updateARIAAttributes())}createEl(){return super.createEl("div",{className:"vjs-volume-bar vjs-slider-bar"},{"aria-label":this.localize("Volume Level"),"aria-live":"polite"})}handleMouseDown(e){$e(e)&&super.handleMouseDown(e)}handleMouseMove(e){var t,s,i,r=this.getChild("mouseVolumeLevelDisplay");r&&(t=De(i=this.el()),s=this.vertical(),i=Re(i,e),i=ii(i=s?i.y:i.x,0,1),r.update(t,i,s)),$e(e)&&(this.checkMuted(),this.player_.volume(this.calculateDistance(e)))}checkMuted(){this.player_.muted()&&this.player_.muted(!1)}getPercent(){return this.player_.muted()?0:this.player_.volume()}stepForward(){this.checkMuted(),this.player_.volume(this.player_.volume()+.1)}stepBack(){this.checkMuted(),this.player_.volume(this.player_.volume()-.1)}updateARIAAttributes(e){var t=this.player_.muted()?0:this.volumeAsPercentage_();this.el_.setAttribute("aria-valuenow",t),this.el_.setAttribute("aria-valuetext",t+"%")}volumeAsPercentage_(){return Math.round(100*this.player_.volume())}updateLastVolume_(){const e=this.player_.volume();this.one("sliderinactive",()=>{0===this.player_.volume()&&this.player_.lastVolume_(e)})}}_i.prototype.options_={children:["volumeLevel"],barName:"volumeLevel"},u||o||_i.prototype.options_.children.splice(0,0,"mouseVolumeLevelDisplay"),_i.prototype.playerEvent="volumechange",T.registerComponent("VolumeBar",_i);class yi extends T{constructor(e,t={}){var s,i;t.vertical=t.vertical||!1,"undefined"!=typeof t.volumeBar&&!G(t.volumeBar)||(t.volumeBar=t.volumeBar||{},t.volumeBar.vertical=t.vertical),super(e,t),s=this,(i=e).tech_&&!i.tech_.featuresVolumeControl&&s.addClass("vjs-hidden"),s.on(i,"loadstart",function(){i.tech_.featuresVolumeControl?s.removeClass("vjs-hidden"):s.addClass("vjs-hidden")}),this.throttledHandleMouseMove=r(y(this,this.handleMouseMove),30),this.handleMouseUpHandler_=e=>this.handleMouseUp(e),this.on("mousedown",e=>this.handleMouseDown(e)),this.on("touchstart",e=>this.handleMouseDown(e)),this.on("mousemove",e=>this.handleMouseMove(e)),this.on(this.volumeBar,["focus","slideractive"],()=>{this.volumeBar.addClass("vjs-slider-active"),this.addClass("vjs-slider-active"),this.trigger("slideractive")}),this.on(this.volumeBar,["blur","sliderinactive"],()=>{this.volumeBar.removeClass("vjs-slider-active"),this.removeClass("vjs-slider-active"),this.trigger("sliderinactive")})}createEl(){let e="vjs-volume-horizontal";return this.options_.vertical&&(e="vjs-volume-vertical"),super.createEl("div",{className:"vjs-volume-control vjs-control "+e})}handleMouseDown(e){var t=this.el_.ownerDocument;this.on(t,"mousemove",this.throttledHandleMouseMove),this.on(t,"touchmove",this.throttledHandleMouseMove),this.on(t,"mouseup",this.handleMouseUpHandler_),this.on(t,"touchend",this.handleMouseUpHandler_)}handleMouseUp(e){var t=this.el_.ownerDocument;this.off(t,"mousemove",this.throttledHandleMouseMove),this.off(t,"touchmove",this.throttledHandleMouseMove),this.off(t,"mouseup",this.handleMouseUpHandler_),this.off(t,"touchend",this.handleMouseUpHandler_)}handleMouseMove(e){this.volumeBar.handleMouseMove(e)}}yi.prototype.options_={children:["volumeBar"]},T.registerComponent("VolumeControl",yi);class fi extends P{constructor(e,t){var s,i;super(e,t),s=this,(i=e).tech_&&!i.tech_.featuresMuteControl&&s.addClass("vjs-hidden"),s.on(i,"loadstart",function(){i.tech_.featuresMuteControl?s.removeClass("vjs-hidden"):s.addClass("vjs-hidden")}),this.on(e,["loadstart","volumechange"],e=>this.update(e))}buildCSSClass(){return"vjs-mute-control "+super.buildCSSClass()}handleClick(e){var t=this.player_.volume(),s=this.player_.lastVolume_();0===t?(this.player_.volume(s<.1?.1:s),this.player_.muted(!1)):this.player_.muted(!this.player_.muted())}update(e){this.updateIcon_(),this.updateControlText_()}updateIcon_(){var e=this.player_.volume();let t=3;this.setIcon("volume-high"),u&&this.player_.tech_&&this.player_.tech_.el_&&this.player_.muted(this.player_.tech_.el_.muted),0===e||this.player_.muted()?(this.setIcon("volume-mute"),t=0):e<.33?(this.setIcon("volume-low"),t=1):e<.67&&(this.setIcon("volume-medium"),t=2),xe(this.el_,[0,1,2,3].reduce((e,t)=>e+`${t?" ":""}vjs-vol-`+t,"")),Se(this.el_,"vjs-vol-"+t)}updateControlText_(){var e=this.player_.muted()||0===this.player_.volume()?"Unmute":"Mute";this.controlText()!==e&&this.controlText(e)}}fi.prototype.controlText_="Mute",T.registerComponent("MuteToggle",fi);class bi extends T{constructor(e,t={}){"undefined"!=typeof t.inline?t.inline=t.inline:t.inline=!0,"undefined"!=typeof t.volumeControl&&!G(t.volumeControl)||(t.volumeControl=t.volumeControl||{},t.volumeControl.vertical=!t.inline),super(e,t),this.handleKeyPressHandler_=e=>this.handleKeyPress(e),this.on(e,["loadstart"],e=>this.volumePanelState_(e)),this.on(this.muteToggle,"keyup",e=>this.handleKeyPress(e)),this.on(this.volumeControl,"keyup",e=>this.handleVolumeControlKeyUp(e)),this.on("keydown",e=>this.handleKeyPress(e)),this.on("mouseover",e=>this.handleMouseOver(e)),this.on("mouseout",e=>this.handleMouseOut(e)),this.on(this.volumeControl,["slideractive"],this.sliderActive_),this.on(this.volumeControl,["sliderinactive"],this.sliderInactive_)}sliderActive_(){this.addClass("vjs-slider-active")}sliderInactive_(){this.removeClass("vjs-slider-active")}volumePanelState_(){this.volumeControl.hasClass("vjs-hidden")&&this.muteToggle.hasClass("vjs-hidden")&&this.addClass("vjs-hidden"),this.volumeControl.hasClass("vjs-hidden")&&!this.muteToggle.hasClass("vjs-hidden")&&this.addClass("vjs-mute-toggle-only")}createEl(){let e="vjs-volume-panel-horizontal";return this.options_.inline||(e="vjs-volume-panel-vertical"),super.createEl("div",{className:"vjs-volume-panel vjs-control "+e})}dispose(){this.handleMouseOut(),super.dispose()}handleVolumeControlKeyUp(e){b.isEventKey(e,"Esc")&&this.muteToggle.focus()}handleMouseOver(e){this.addClass("vjs-hover"),m(document,"keyup",this.handleKeyPressHandler_)}handleMouseOut(e){this.removeClass("vjs-hover"),_(document,"keyup",this.handleKeyPressHandler_)}handleKeyPress(e){b.isEventKey(e,"Esc")&&this.handleMouseOut()}}bi.prototype.options_={children:["muteToggle","volumeControl"]},T.registerComponent("VolumePanel",bi);class Ti extends P{constructor(e,t){super(e,t),this.validOptions=[5,10,30],this.skipTime=this.getSkipForwardTime(),this.skipTime&&this.validOptions.includes(this.skipTime)?(this.setIcon("forward-"+this.skipTime),this.controlText(this.localize("Skip forward {1} seconds",[this.skipTime.toLocaleString(e.language())])),this.show()):this.hide()}getSkipForwardTime(){var e=this.options_.playerOptions;return e.controlBar&&e.controlBar.skipButtons&&e.controlBar.skipButtons.forward}buildCSSClass(){return`vjs-skip-forward-${this.getSkipForwardTime()} `+super.buildCSSClass()}handleClick(e){if(!isNaN(this.player_.duration())){var t=this.player_.currentTime(),s=this.player_.liveTracker,s=s&&s.isLive()?s.seekableEnd():this.player_.duration();let e;e=t+this.skipTime<=s?t+this.skipTime:s,this.player_.currentTime(e)}}handleLanguagechange(){this.controlText(this.localize("Skip forward {1} seconds",[this.skipTime]))}}Ti.prototype.controlText_="Skip Forward",T.registerComponent("SkipForward",Ti);class ki extends P{constructor(e,t){super(e,t),this.validOptions=[5,10,30],this.skipTime=this.getSkipBackwardTime(),this.skipTime&&this.validOptions.includes(this.skipTime)?(this.setIcon("replay-"+this.skipTime),this.controlText(this.localize("Skip backward {1} seconds",[this.skipTime.toLocaleString(e.language())])),this.show()):this.hide()}getSkipBackwardTime(){var e=this.options_.playerOptions;return e.controlBar&&e.controlBar.skipButtons&&e.controlBar.skipButtons.backward}buildCSSClass(){return`vjs-skip-backward-${this.getSkipBackwardTime()} `+super.buildCSSClass()}handleClick(e){var t=this.player_.currentTime(),s=this.player_.liveTracker,s=s&&s.isLive()&&s.seekableStart();let i;i=s&&t-this.skipTime<=s?s:t>=this.skipTime?t-this.skipTime:0,this.player_.currentTime(i)}handleLanguagechange(){this.controlText(this.localize("Skip backward {1} seconds",[this.skipTime]))}}ki.prototype.controlText_="Skip Backward",T.registerComponent("SkipBackward",ki);class Ci extends T{constructor(e,t){super(e,t),t&&(this.menuButton_=t.menuButton),this.focusedChild_=-1,this.on("keydown",e=>this.handleKeyDown(e)),this.boundHandleBlur_=e=>this.handleBlur(e),this.boundHandleTapClick_=e=>this.handleTapClick(e)}addEventListenerForItem(e){e instanceof T&&(this.on(e,"blur",this.boundHandleBlur_),this.on(e,["tap","click"],this.boundHandleTapClick_))}removeEventListenerForItem(e){e instanceof T&&(this.off(e,"blur",this.boundHandleBlur_),this.off(e,["tap","click"],this.boundHandleTapClick_))}removeChild(e){"string"==typeof e&&(e=this.getChild(e)),this.removeEventListenerForItem(e),super.removeChild(e)}addItem(e){e=this.addChild(e);e&&this.addEventListenerForItem(e)}createEl(){var e=this.options_.contentElType||"ul",e=(this.contentEl_=p(e,{className:"vjs-menu-content"}),this.contentEl_.setAttribute("role","menu"),super.createEl("div",{append:this.contentEl_,className:"vjs-menu"}));return e.appendChild(this.contentEl_),m(e,"click",function(e){e.preventDefault(),e.stopImmediatePropagation()}),e}dispose(){this.contentEl_=null,this.boundHandleBlur_=null,this.boundHandleTapClick_=null,super.dispose()}handleBlur(e){const t=e.relatedTarget||document.activeElement;this.children().some(e=>e.el()===t)||(e=this.menuButton_)&&e.buttonPressed_&&t!==e.el().firstChild&&e.unpressButton()}handleTapClick(t){var e;this.menuButton_&&(this.menuButton_.unpressButton(),e=this.children(),Array.isArray(e))&&(e=e.filter(e=>e.el()===t.target)[0])&&"CaptionSettingsMenuItem"!==e.name()&&this.menuButton_.focus()}handleKeyDown(e){b.isEventKey(e,"Left")||b.isEventKey(e,"Down")?(e.preventDefault(),e.stopPropagation(),this.stepForward()):(b.isEventKey(e,"Right")||b.isEventKey(e,"Up"))&&(e.preventDefault(),e.stopPropagation(),this.stepBack())}stepForward(){let e=0;void 0!==this.focusedChild_&&(e=this.focusedChild_+1),this.focus(e)}stepBack(){let e=0;void 0!==this.focusedChild_&&(e=this.focusedChild_-1),this.focus(e)}focus(e=0){var t=this.children().slice();t.length&&t[0].hasClass("vjs-menu-title")&&t.shift(),0<t.length&&(e<0?e=0:e>=t.length&&(e=t.length-1),t[this.focusedChild_=e].el_.focus())}}T.registerComponent("Menu",Ci);class wi extends T{constructor(e,t={}){super(e,t),this.menuButton_=new P(e,t),this.menuButton_.controlText(this.controlText_),this.menuButton_.el_.setAttribute("aria-haspopup","true");e=P.prototype.buildCSSClass(),this.menuButton_.el_.className=this.buildCSSClass()+" "+e,this.menuButton_.removeClass("vjs-control"),this.addChild(this.menuButton_),this.update(),this.enabled_=!0,t=e=>this.handleClick(e);this.handleMenuKeyUp_=e=>this.handleMenuKeyUp(e),this.on(this.menuButton_,"tap",t),this.on(this.menuButton_,"click",t),this.on(this.menuButton_,"keydown",e=>this.handleKeyDown(e)),this.on(this.menuButton_,"mouseenter",()=>{this.addClass("vjs-hover"),this.menu.show(),m(document,"keyup",this.handleMenuKeyUp_)}),this.on("mouseleave",e=>this.handleMouseLeave(e)),this.on("keydown",e=>this.handleSubmenuKeyDown(e))}update(){var e=this.createMenu();this.menu&&(this.menu.dispose(),this.removeChild(this.menu)),this.menu=e,this.addChild(e),this.buttonPressed_=!1,this.menuButton_.el_.setAttribute("aria-expanded","false"),this.items&&this.items.length<=this.hideThreshold_?(this.hide(),this.menu.contentEl_.removeAttribute("role")):(this.show(),this.menu.contentEl_.setAttribute("role","menu"))}createMenu(){var e,t=new Ci(this.player_,{menuButton:this});if(this.hideThreshold_=0,this.options_.title&&(e=p("li",{className:"vjs-menu-title",textContent:f(this.options_.title),tabIndex:-1}),e=new T(this.player_,{el:e}),t.addItem(e)),this.items=this.createItems(),this.items)for(let e=0;e<this.items.length;e++)t.addItem(this.items[e]);return t}createItems(){}createEl(){return super.createEl("div",{className:this.buildWrapperCSSClass()},{})}setIcon(e){super.setIcon(e,this.menuButton_.el_)}buildWrapperCSSClass(){let e="vjs-menu-button";!0===this.options_.inline?e+="-inline":e+="-popup";var t=P.prototype.buildCSSClass();return`vjs-menu-button ${e} ${t} `+super.buildCSSClass()}buildCSSClass(){let e="vjs-menu-button";return!0===this.options_.inline?e+="-inline":e+="-popup",`vjs-menu-button ${e} `+super.buildCSSClass()}controlText(e,t=this.menuButton_.el()){return this.menuButton_.controlText(e,t)}dispose(){this.handleMouseLeave(),super.dispose()}handleClick(e){this.buttonPressed_?this.unpressButton():this.pressButton()}handleMouseLeave(e){this.removeClass("vjs-hover"),_(document,"keyup",this.handleMenuKeyUp_)}focus(){this.menuButton_.focus()}blur(){this.menuButton_.blur()}handleKeyDown(e){b.isEventKey(e,"Esc")||b.isEventKey(e,"Tab")?(this.buttonPressed_&&this.unpressButton(),b.isEventKey(e,"Tab")||(e.preventDefault(),this.menuButton_.focus())):!b.isEventKey(e,"Up")&&!b.isEventKey(e,"Down")||this.buttonPressed_||(e.preventDefault(),this.pressButton())}handleMenuKeyUp(e){(b.isEventKey(e,"Esc")||b.isEventKey(e,"Tab"))&&this.removeClass("vjs-hover")}handleSubmenuKeyPress(e){this.handleSubmenuKeyDown(e)}handleSubmenuKeyDown(e){(b.isEventKey(e,"Esc")||b.isEventKey(e,"Tab"))&&(this.buttonPressed_&&this.unpressButton(),b.isEventKey(e,"Tab")||(e.preventDefault(),this.menuButton_.focus()))}pressButton(){this.enabled_&&(this.buttonPressed_=!0,this.menu.show(),this.menu.lockShowing(),this.menuButton_.el_.setAttribute("aria-expanded","true"),u&&Te()||this.menu.focus())}unpressButton(){this.enabled_&&(this.buttonPressed_=!1,this.menu.unlockShowing(),this.menu.hide(),this.menuButton_.el_.setAttribute("aria-expanded","false"))}disable(){this.unpressButton(),this.enabled_=!1,this.addClass("vjs-disabled"),this.menuButton_.disable()}enable(){this.enabled_=!0,this.removeClass("vjs-disabled"),this.menuButton_.enable()}}T.registerComponent("MenuButton",wi);class Ei extends wi{constructor(e,t){const s=t.tracks;if(super(e,t),this.items.length<=1&&this.hide(),s){const i=y(this,this.update);s.addEventListener("removetrack",i),s.addEventListener("addtrack",i),s.addEventListener("labelchange",i),this.player_.on("ready",i),this.player_.on("dispose",function(){s.removeEventListener("removetrack",i),s.removeEventListener("addtrack",i),s.removeEventListener("labelchange",i)})}}}T.registerComponent("TrackButton",Ei);const Si=["Tab","Esc","Up","Down","Right","Left"];class xi extends Hs{constructor(e,t){super(e,t),this.selectable=t.selectable,this.isSelected_=t.selected||!1,this.multiSelectable=t.multiSelectable,this.selected(this.isSelected_),this.selectable?this.multiSelectable?this.el_.setAttribute("role","menuitemcheckbox"):this.el_.setAttribute("role","menuitemradio"):this.el_.setAttribute("role","menuitem")}createEl(e,t,s){this.nonIconControl=!0;t=super.createEl("li",Object.assign({className:"vjs-menu-item",tabIndex:-1},t),s),s=p("span",{className:"vjs-menu-item-text",textContent:this.localize(this.options_.label)});return this.player_.options_.experimentalSvgIcons?t.appendChild(s):t.replaceChild(s,t.querySelector(".vjs-icon-placeholder")),t}handleKeyDown(t){Si.some(e=>b.isEventKey(t,e))||super.handleKeyDown(t)}handleClick(e){this.selected(!0)}selected(e){this.selectable&&(e?(this.addClass("vjs-selected"),this.el_.setAttribute("aria-checked","true"),this.controlText(", selected"),this.isSelected_=!0):(this.removeClass("vjs-selected"),this.el_.setAttribute("aria-checked","false"),this.controlText(""),this.isSelected_=!1))}}T.registerComponent("MenuItem",xi);class ji extends xi{constructor(e,t){var s=t.track;const i=e.textTracks(),r=(t.label=s.label||s.language||"Unknown",t.selected="showing"===s.mode,super(e,t),this.track=s,this.kinds=(t.kinds||[t.kind||this.track.kind]).filter(Boolean),(...e)=>{this.handleTracksChange.apply(this,e)}),n=(...e)=>{this.handleSelectedLanguageChange.apply(this,e)};if(e.on(["loadstart","texttrackchange"],r),i.addEventListener("change",r),i.addEventListener("selectedlanguagechange",n),this.on("dispose",function(){e.off(["loadstart","texttrackchange"],r),i.removeEventListener("change",r),i.removeEventListener("selectedlanguagechange",n)}),void 0===i.onchange){let e;this.on(["tap","click"],function(){if("object"!=typeof window.Event)try{e=new window.Event("change")}catch(e){}e||(e=document.createEvent("Event")).initEvent("change",!0,!0),i.dispatchEvent(e)})}this.handleTracksChange()}handleClick(e){var t=this.track,s=this.player_.textTracks();if(super.handleClick(e),s)for(let e=0;e<s.length;e++){var i=s[e];-1!==this.kinds.indexOf(i.kind)&&(i===t?"showing"!==i.mode&&(i.mode="showing"):"disabled"!==i.mode&&(i.mode="disabled"))}}handleTracksChange(e){var t="showing"===this.track.mode;t!==this.isSelected_&&this.selected(t)}handleSelectedLanguageChange(e){var t;"showing"!==this.track.mode||(t=this.player_.cache_.selectedLanguage)&&t.enabled&&t.language===this.track.language&&t.kind!==this.track.kind||(this.player_.cache_.selectedLanguage={enabled:!0,language:this.track.language,kind:this.track.kind})}dispose(){this.track=null,super.dispose()}}T.registerComponent("TextTrackMenuItem",ji);class Pi extends ji{constructor(e,t){t.track={player:e,kind:t.kind,kinds:t.kinds,default:!1,mode:"disabled"},t.kinds||(t.kinds=[t.kind]),t.label?t.track.label=t.label:t.track.label=t.kinds.join(" and ")+" off",t.selectable=!0,t.multiSelectable=!1,super(e,t)}handleTracksChange(e){var s=this.player().textTracks();let i=!0;for(let e=0,t=s.length;e<t;e++){var r=s[e];if(-1<this.options_.kinds.indexOf(r.kind)&&"showing"===r.mode){i=!1;break}}i!==this.isSelected_&&this.selected(i)}handleSelectedLanguageChange(e){var s=this.player().textTracks();let i=!0;for(let e=0,t=s.length;e<t;e++){var r=s[e];if(-1<["captions","descriptions","subtitles"].indexOf(r.kind)&&"showing"===r.mode){i=!1;break}}i&&(this.player_.cache_.selectedLanguage={enabled:!1})}handleLanguagechange(){this.$(".vjs-menu-item-text").textContent=this.player_.localize(this.options_.label),super.handleLanguagechange()}}T.registerComponent("OffTextTrackMenuItem",Pi);class Ii extends Ei{constructor(e,t={}){t.tracks=e.textTracks(),super(e,t)}createItems(t=[],s=ji){let e;this.label_&&(e=this.label_+" off"),t.push(new Pi(this.player_,{kinds:this.kinds_,kind:this.kind_,label:e})),this.hideThreshold_+=1;var i=this.player_.textTracks();Array.isArray(this.kinds_)||(this.kinds_=[this.kind_]);for(let e=0;e<i.length;e++){var r,n=i[e];-1<this.kinds_.indexOf(n.kind)&&((r=new s(this.player_,{track:n,kinds:this.kinds_,kind:this.kind_,selectable:!0,multiSelectable:!1})).addClass(`vjs-${n.kind}-menu-item`),t.push(r))}return t}}T.registerComponent("TextTrackButton",Ii);class Mi extends xi{constructor(e,t){var s=t.track,i=t.cue,r=e.currentTime();t.selectable=!0,t.multiSelectable=!1,t.label=i.text,t.selected=i.startTime<=r&&r<i.endTime,super(e,t),this.track=s,this.cue=i}handleClick(e){super.handleClick(),this.player_.currentTime(this.cue.startTime)}}T.registerComponent("ChaptersTrackMenuItem",Mi);class Oi extends Ii{constructor(e,t,s){super(e,t,s),this.setIcon("chapters"),this.selectCurrentItem_=()=>{this.items.forEach(e=>{e.selected(this.track_.activeCues[0]===e.cue)})}}buildCSSClass(){return"vjs-chapters-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-chapters-button "+super.buildWrapperCSSClass()}update(e){e&&e.track&&"chapters"!==e.track.kind||((e=this.findChaptersTrack())!==this.track_?(this.setTrack(e),super.update()):(!this.items||e&&e.cues&&e.cues.length!==this.items.length)&&super.update())}setTrack(e){var t;this.track_!==e&&(this.updateHandler_||(this.updateHandler_=this.update.bind(this)),this.track_&&((t=this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_))&&t.removeEventListener("load",this.updateHandler_),this.track_.removeEventListener("cuechange",this.selectCurrentItem_),this.track_=null),this.track_=e,this.track_)&&(this.track_.mode="hidden",(t=this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_))&&t.addEventListener("load",this.updateHandler_),this.track_.addEventListener("cuechange",this.selectCurrentItem_))}findChaptersTrack(){var t=this.player_.textTracks()||[];for(let e=t.length-1;0<=e;e--){var s=t[e];if(s.kind===this.kind_)return s}}getMenuCaption(){return this.track_&&this.track_.label?this.track_.label:this.localize(f(this.kind_))}createMenu(){return this.options_.title=this.getMenuCaption(),super.createMenu()}createItems(){var s=[];if(this.track_){var i=this.track_.cues;if(i)for(let e=0,t=i.length;e<t;e++){var r=i[e],r=new Mi(this.player_,{track:this.track_,cue:r});s.push(r)}}return s}}Oi.prototype.kind_="chapters",Oi.prototype.controlText_="Chapters",T.registerComponent("ChaptersButton",Oi);class Ai extends Ii{constructor(e,t,s){super(e,t,s),this.setIcon("audio-description");const i=e.textTracks(),r=y(this,this.handleTracksChange);i.addEventListener("change",r),this.on("dispose",function(){i.removeEventListener("change",r)})}handleTracksChange(e){var s=this.player().textTracks();let i=!1;for(let e=0,t=s.length;e<t;e++){var r=s[e];if(r.kind!==this.kind_&&"showing"===r.mode){i=!0;break}}i?this.disable():this.enable()}buildCSSClass(){return"vjs-descriptions-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-descriptions-button "+super.buildWrapperCSSClass()}}Ai.prototype.kind_="descriptions",Ai.prototype.controlText_="Descriptions",T.registerComponent("DescriptionsButton",Ai);class Li extends Ii{constructor(e,t,s){super(e,t,s),this.setIcon("subtitles")}buildCSSClass(){return"vjs-subtitles-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-subtitles-button "+super.buildWrapperCSSClass()}}Li.prototype.kind_="subtitles",Li.prototype.controlText_="Subtitles",T.registerComponent("SubtitlesButton",Li);class Ni extends ji{constructor(e,t){t.track={player:e,kind:t.kind,label:t.kind+" settings",selectable:!1,default:!1,mode:"disabled"},t.selectable=!1,t.name="CaptionSettingsMenuItem",super(e,t),this.addClass("vjs-texttrack-settings"),this.controlText(", opens "+t.kind+" settings dialog")}handleClick(e){this.player().getChild("textTrackSettings").open()}handleLanguagechange(){this.$(".vjs-menu-item-text").textContent=this.player_.localize(this.options_.kind+" settings"),super.handleLanguagechange()}}T.registerComponent("CaptionSettingsMenuItem",Ni);class Di extends Ii{constructor(e,t,s){super(e,t,s),this.setIcon("captions")}buildCSSClass(){return"vjs-captions-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-captions-button "+super.buildWrapperCSSClass()}createItems(){var e=[];return this.player().tech_&&this.player().tech_.featuresNativeTextTracks||!this.player().getChild("textTrackSettings")||(e.push(new Ni(this.player_,{kind:this.kind_})),this.hideThreshold_+=1),super.createItems(e)}}Di.prototype.kind_="captions",Di.prototype.controlText_="Captions",T.registerComponent("CaptionsButton",Di);class Bi extends ji{createEl(e,t,s){e=super.createEl(e,t,s),t=e.querySelector(".vjs-menu-item-text");return"captions"===this.options_.track.kind&&(this.player_.options_.experimentalSvgIcons?this.setIcon("captions",e):t.appendChild(p("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),t.appendChild(p("span",{className:"vjs-control-text",textContent:" "+this.localize("Captions")}))),e}}T.registerComponent("SubsCapsMenuItem",Bi);class Ri extends Ii{constructor(e,t={}){super(e,t),this.label_="subtitles",this.setIcon("subtitles"),-1<["en","en-us","en-ca","fr-ca"].indexOf(this.player_.language_)&&(this.label_="captions",this.setIcon("captions")),this.menuButton_.controlText(f(this.label_))}buildCSSClass(){return"vjs-subs-caps-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-subs-caps-button "+super.buildWrapperCSSClass()}createItems(){let e=[];return this.player().tech_&&this.player().tech_.featuresNativeTextTracks||!this.player().getChild("textTrackSettings")||(e.push(new Ni(this.player_,{kind:this.label_})),this.hideThreshold_+=1),e=super.createItems(e,Bi)}}Ri.prototype.kinds_=["captions","subtitles"],Ri.prototype.controlText_="Subtitles",T.registerComponent("SubsCapsButton",Ri);class Fi extends xi{constructor(e,t){var s=t.track;const i=e.audioTracks(),r=(t.label=s.label||s.language||"Unknown",t.selected=s.enabled,super(e,t),this.track=s,this.addClass(`vjs-${s.kind}-menu-item`),(...e)=>{this.handleTracksChange.apply(this,e)});i.addEventListener("change",r),this.on("dispose",()=>{i.removeEventListener("change",r)})}createEl(e,t,s){e=super.createEl(e,t,s),t=e.querySelector(".vjs-menu-item-text");return 0<=["main-desc","description"].indexOf(this.options_.track.kind)&&(t.appendChild(p("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),t.appendChild(p("span",{className:"vjs-control-text",textContent:" "+this.localize("Descriptions")}))),e}handleClick(e){if(super.handleClick(e),this.track.enabled=!0,this.player_.tech_.featuresNativeAudioTracks){var t=this.player_.audioTracks();for(let e=0;e<t.length;e++){var s=t[e];s!==this.track&&(s.enabled=s===this.track)}}}handleTracksChange(e){this.selected(this.track.enabled)}}T.registerComponent("AudioTrackMenuItem",Fi);class Hi extends Ei{constructor(e,t={}){t.tracks=e.audioTracks(),super(e,t),this.setIcon("audio")}buildCSSClass(){return"vjs-audio-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-audio-button "+super.buildWrapperCSSClass()}createItems(t=[]){this.hideThreshold_=1;var s=this.player_.audioTracks();for(let e=0;e<s.length;e++){var i=s[e];t.push(new Fi(this.player_,{track:i,selectable:!0,multiSelectable:!1}))}return t}}Hi.prototype.controlText_="Audio Track",T.registerComponent("AudioTrackButton",Hi);class zi extends xi{constructor(e,t){var s=t.rate,i=parseFloat(s,10);t.label=s,t.selected=i===e.playbackRate(),t.selectable=!0,t.multiSelectable=!1,super(e,t),this.label=s,this.rate=i,this.on(e,"ratechange",e=>this.update(e))}handleClick(e){super.handleClick(),this.player().playbackRate(this.rate)}update(e){this.selected(this.player().playbackRate()===this.rate)}}zi.prototype.contentElType="button",T.registerComponent("PlaybackRateMenuItem",zi);class Vi extends wi{constructor(e,t){super(e,t),this.menuButton_.el_.setAttribute("aria-describedby",this.labelElId_),this.updateVisibility(),this.updateLabel(),this.on(e,"loadstart",e=>this.updateVisibility(e)),this.on(e,"ratechange",e=>this.updateLabel(e)),this.on(e,"playbackrateschange",e=>this.handlePlaybackRateschange(e))}createEl(){var e=super.createEl();return this.labelElId_="vjs-playback-rate-value-label-"+this.id_,this.labelEl_=p("div",{className:"vjs-playback-rate-value",id:this.labelElId_,textContent:"1x"}),e.appendChild(this.labelEl_),e}dispose(){this.labelEl_=null,super.dispose()}buildCSSClass(){return"vjs-playback-rate "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-playback-rate "+super.buildWrapperCSSClass()}createItems(){var t=this.playbackRates(),s=[];for(let e=t.length-1;0<=e;e--)s.push(new zi(this.player(),{rate:t[e]+"x"}));return s}handlePlaybackRateschange(e){this.update()}playbackRates(){var e=this.player();return e.playbackRates&&e.playbackRates()||[]}playbackRateSupported(){return this.player().tech_&&this.player().tech_.featuresPlaybackRate&&this.playbackRates()&&0<this.playbackRates().length}updateVisibility(e){this.playbackRateSupported()?this.removeClass("vjs-hidden"):this.addClass("vjs-hidden")}updateLabel(e){this.playbackRateSupported()&&(this.labelEl_.textContent=this.player().playbackRate()+"x")}}Vi.prototype.controlText_="Playback Rate",T.registerComponent("PlaybackRateMenuButton",Vi);class qi extends T{buildCSSClass(){return"vjs-spacer "+super.buildCSSClass()}createEl(e="div",t={},s={}){return t.className||(t.className=this.buildCSSClass()),super.createEl(e,t,s)}}T.registerComponent("Spacer",qi);T.registerComponent("CustomControlSpacer",class extends qi{buildCSSClass(){return"vjs-custom-control-spacer "+super.buildCSSClass()}createEl(){return super.createEl("div",{className:this.buildCSSClass(),textContent:" "})}});class $i extends T{createEl(){return super.createEl("div",{className:"vjs-control-bar",dir:"ltr"})}}$i.prototype.options_={children:["playToggle","skipBackward","skipForward","volumePanel","currentTimeDisplay","timeDivider","durationDisplay","progressControl","liveDisplay","seekToLive","remainingTimeDisplay","customControlSpacer","playbackRateMenuButton","chaptersButton","descriptionsButton","subsCapsButton","audioTrackButton","pictureInPictureToggle","fullscreenToggle"]},T.registerComponent("ControlBar",$i);class Ki extends $t{constructor(e,t){super(e,t),this.on(e,"error",e=>{this.open(e)})}buildCSSClass(){return"vjs-error-display "+super.buildCSSClass()}content(){var e=this.player().error();return e?this.localize(e.message):""}}Ki.prototype.options_=Object.assign({},$t.prototype.options_,{pauseOnOpen:!1,fillAlways:!0,temporary:!1,uncloseable:!0}),T.registerComponent("ErrorDisplay",Ki);const Ui="vjs-text-track-settings";var Wi=["#000","Black"],Gi=["#00F","Blue"],Xi=["#0FF","Cyan"],Yi=["#0F0","Green"],Qi=["#F0F","Magenta"],Ji=["#F00","Red"],Zi=["#FFF","White"],er=["#FF0","Yellow"],tr=["1","Opaque"],sr=["0.5","Semi-Transparent"],ir=["0","Transparent"];const rr={backgroundColor:{selector:".vjs-bg-color > select",id:"captions-background-color-%s",label:"Color",options:[Wi,Zi,Ji,Yi,Gi,er,Qi,Xi]},backgroundOpacity:{selector:".vjs-bg-opacity > select",id:"captions-background-opacity-%s",label:"Opacity",options:[tr,sr,ir]},color:{selector:".vjs-text-color > select",id:"captions-foreground-color-%s",label:"Color",options:[Zi,Wi,Ji,Yi,Gi,er,Qi,Xi]},edgeStyle:{selector:".vjs-edge-style > select",id:"%s",label:"Text Edge Style",options:[["none","None"],["raised","Raised"],["depressed","Depressed"],["uniform","Uniform"],["dropshadow","Drop shadow"]]},fontFamily:{selector:".vjs-font-family > select",id:"captions-font-family-%s",label:"Font Family",options:[["proportionalSansSerif","Proportional Sans-Serif"],["monospaceSansSerif","Monospace Sans-Serif"],["proportionalSerif","Proportional Serif"],["monospaceSerif","Monospace Serif"],["casual","Casual"],["script","Script"],["small-caps","Small Caps"]]},fontPercent:{selector:".vjs-font-percent > select",id:"captions-font-size-%s",label:"Font Size",options:[["0.50","50%"],["0.75","75%"],["1.00","100%"],["1.25","125%"],["1.50","150%"],["1.75","175%"],["2.00","200%"],["3.00","300%"],["4.00","400%"]],default:2,parser:e=>"1.00"===e?null:Number(e)},textOpacity:{selector:".vjs-text-opacity > select",id:"captions-foreground-opacity-%s",label:"Opacity",options:[tr,sr]},windowColor:{selector:".vjs-window-color > select",id:"captions-window-color-%s",label:"Color"},windowOpacity:{selector:".vjs-window-opacity > select",id:"captions-window-opacity-%s",label:"Opacity",options:[ir,sr,tr]}};function nr(e,t){if((e=t?t(e):e)&&"none"!==e)return e}rr.windowColor.options=rr.backgroundColor.options;class ar extends $t{constructor(e,t){t.temporary=!1,super(e,t),this.updateDisplay=this.updateDisplay.bind(this),this.fill(),this.hasBeenOpened_=this.hasBeenFilled_=!0,this.endDialog=p("p",{className:"vjs-control-text",textContent:this.localize("End of dialog window.")}),this.el().appendChild(this.endDialog),this.setDefaults(),void 0===t.persistTextTrackSettings&&(this.options_.persistTextTrackSettings=this.options_.playerOptions.persistTextTrackSettings),this.on(this.$(".vjs-done-button"),"click",()=>{this.saveSettings(),this.close()}),this.on(this.$(".vjs-default-button"),"click",()=>{this.setDefaults(),this.updateDisplay()}),U(rr,e=>{this.on(this.$(e.selector),"change",this.updateDisplay)}),this.options_.persistTextTrackSettings&&this.restoreSettings()}dispose(){this.endDialog=null,super.dispose()}createElSelect_(e,t="",s="label"){e=rr[e];const i=e.id.replace("%s",this.id_),r=[t,i].join(" ").trim();t="vjs_select_"+v++;return[`<${s} id="${i}"${"label"===s?` for="${t}" class="vjs-label"`:""}>`,this.localize(e.label),`</${s}>`,`<select aria-labelledby="${r}" id="${t}">`].concat(e.options.map(e=>{var t=i+"-"+e[1].replace(/\W+/g,"");return[`<option id="${t}" value="${e[0]}" `,`aria-labelledby="${r} ${t}">`,this.localize(e[1]),"</option>"].join("")})).concat("</select>").join("")}createElFgColor_(){var e="captions-text-legend-"+this.id_;return['<fieldset class="vjs-fg vjs-track-setting">',`<legend id="${e}">`,this.localize("Text"),"</legend>",'<span class="vjs-text-color">',this.createElSelect_("color",e),"</span>",'<span class="vjs-text-opacity vjs-opacity">',this.createElSelect_("textOpacity",e),"</span>","</fieldset>"].join("")}createElBgColor_(){var e="captions-background-"+this.id_;return['<fieldset class="vjs-bg vjs-track-setting">',`<legend id="${e}">`,this.localize("Text Background"),"</legend>",'<span class="vjs-bg-color">',this.createElSelect_("backgroundColor",e),"</span>",'<span class="vjs-bg-opacity vjs-opacity">',this.createElSelect_("backgroundOpacity",e),"</span>","</fieldset>"].join("")}createElWinColor_(){var e="captions-window-"+this.id_;return['<fieldset class="vjs-window vjs-track-setting">',`<legend id="${e}">`,this.localize("Caption Area Background"),"</legend>",'<span class="vjs-window-color">',this.createElSelect_("windowColor",e),"</span>",'<span class="vjs-window-opacity vjs-opacity">',this.createElSelect_("windowOpacity",e),"</span>","</fieldset>"].join("")}createElColors_(){return p("div",{className:"vjs-track-settings-colors",innerHTML:[this.createElFgColor_(),this.createElBgColor_(),this.createElWinColor_()].join("")})}createElFont_(){return p("div",{className:"vjs-track-settings-font",innerHTML:['<fieldset class="vjs-font-percent vjs-track-setting">',this.createElSelect_("fontPercent","","legend"),"</fieldset>",'<fieldset class="vjs-edge-style vjs-track-setting">',this.createElSelect_("edgeStyle","","legend"),"</fieldset>",'<fieldset class="vjs-font-family vjs-track-setting">',this.createElSelect_("fontFamily","","legend"),"</fieldset>"].join("")})}createElControls_(){var e=this.localize("restore all settings to the default values");return p("div",{className:"vjs-track-settings-controls",innerHTML:[`<button type="button" class="vjs-default-button" title="${e}">`,this.localize("Reset"),`<span class="vjs-control-text"> ${e}</span>`,"</button>",`<button type="button" class="vjs-done-button">${this.localize("Done")}</button>`].join("")})}content(){return[this.createElColors_(),this.createElFont_(),this.createElControls_()]}label(){return this.localize("Caption Settings Dialog")}description(){return this.localize("Beginning of dialog window. Escape will cancel and close the window.")}buildCSSClass(){return super.buildCSSClass()+" vjs-text-track-settings"}getValues(){return W(rr,(e,t,s)=>{i=this.$(t.selector),t=t.parser;var i=nr(i.options[i.options.selectedIndex].value,t);return void 0!==i&&(e[s]=i),e},{})}setValues(n){U(rr,(e,t)=>{var s=this.$(e.selector),i=n[t],r=e.parser;if(i)for(let e=0;e<s.options.length;e++)if(nr(s.options[e].value,r)===i){s.selectedIndex=e;break}})}setDefaults(){U(rr,e=>{var t=e.hasOwnProperty("default")?e.default:0;this.$(e.selector).selectedIndex=t})}restoreSettings(){let e;try{e=JSON.parse(window.localStorage.getItem(Ui))}catch(e){l.warn(e)}e&&this.setValues(e)}saveSettings(){if(this.options_.persistTextTrackSettings){var e=this.getValues();try{Object.keys(e).length?window.localStorage.setItem(Ui,JSON.stringify(e)):window.localStorage.removeItem(Ui)}catch(e){l.warn(e)}}}updateDisplay(){var e=this.player_.getChild("textTrackDisplay");e&&e.updateDisplay()}conditionalBlur_(){this.previouslyActiveEl_=null;var e=this.player_.controlBar,t=e&&e.subsCapsButton,e=e&&e.captionsButton;t?t.focus():e&&e.focus()}handleLanguagechange(){this.fill()}}T.registerComponent("TextTrackSettings",ar);class or extends T{constructor(e,t){let s=t.ResizeObserver||window.ResizeObserver;super(e,h({createEl:!(s=null===t.ResizeObserver?!1:s),reportTouchActivity:!1},t)),this.ResizeObserver=t.ResizeObserver||window.ResizeObserver,this.loadListener_=null,this.resizeObserver_=null,this.debouncedHandler_=ut(()=>{this.resizeHandler()},100,!1,this),s?(this.resizeObserver_=new this.ResizeObserver(this.debouncedHandler_),this.resizeObserver_.observe(e.el())):(this.loadListener_=()=>{if(this.el_&&this.el_.contentWindow){const t=this.debouncedHandler_;let e=this.unloadListener_=function(){_(this,"resize",t),_(this,"unload",e),e=null};m(this.el_.contentWindow,"unload",e),m(this.el_.contentWindow,"resize",t)}},this.one("load",this.loadListener_))}createEl(){return super.createEl("iframe",{className:"vjs-resize-manager",tabIndex:-1,title:this.localize("No content")},{"aria-hidden":"true"})}resizeHandler(){this.player_&&this.player_.trigger&&this.player_.trigger("playerresize")}dispose(){this.debouncedHandler_&&this.debouncedHandler_.cancel(),this.resizeObserver_&&(this.player_.el()&&this.resizeObserver_.unobserve(this.player_.el()),this.resizeObserver_.disconnect()),this.loadListener_&&this.off("load",this.loadListener_),this.el_&&this.el_.contentWindow&&this.unloadListener_&&this.unloadListener_.call(this.el_.contentWindow),this.ResizeObserver=null,this.resizeObserver=null,this.debouncedHandler_=null,this.loadListener_=null,super.dispose()}}T.registerComponent("ResizeManager",or);const lr={trackingThreshold:20,liveTolerance:15};class hr extends T{constructor(e,t){super(e,h(lr,t,{createEl:!1})),this.trackLiveHandler_=()=>this.trackLive_(),this.handlePlay_=e=>this.handlePlay(e),this.handleFirstTimeupdate_=e=>this.handleFirstTimeupdate(e),this.handleSeeked_=e=>this.handleSeeked(e),this.seekToLiveEdge_=e=>this.seekToLiveEdge(e),this.reset_(),this.on(this.player_,"durationchange",e=>this.handleDurationchange(e)),this.on(this.player_,"canplay",()=>this.toggleTracking())}trackLive_(){var t=this.player_.seekable();if(t&&t.length){var t=Number(window.performance.now().toFixed(4)),s=-1===this.lastTime_?0:(t-this.lastTime_)/1e3,t=(this.lastTime_=t,this.pastSeekEnd_=this.pastSeekEnd()+s,this.liveCurrentTime()),s=this.player_.currentTime();let e=this.player_.paused()||this.seekedBehindLive_||Math.abs(t-s)>this.options_.liveTolerance;(e=this.timeupdateSeen_&&t!==1/0?e:!1)!==this.behindLiveEdge_&&(this.behindLiveEdge_=e,this.trigger("liveedgechange"))}}handleDurationchange(){this.toggleTracking()}toggleTracking(){this.player_.duration()===1/0&&this.liveWindow()>=this.options_.trackingThreshold?(this.player_.options_.liveui&&this.player_.addClass("vjs-liveui"),this.startTracking()):(this.player_.removeClass("vjs-liveui"),this.stopTracking())}startTracking(){this.isTracking()||(this.timeupdateSeen_||(this.timeupdateSeen_=this.player_.hasStarted()),this.trackingInterval_=this.setInterval(this.trackLiveHandler_,30),this.trackLive_(),this.on(this.player_,["play","pause"],this.trackLiveHandler_),this.timeupdateSeen_?this.on(this.player_,"seeked",this.handleSeeked_):(this.one(this.player_,"play",this.handlePlay_),this.one(this.player_,"timeupdate",this.handleFirstTimeupdate_)))}handleFirstTimeupdate(){this.timeupdateSeen_=!0,this.on(this.player_,"seeked",this.handleSeeked_)}handleSeeked(){var e=Math.abs(this.liveCurrentTime()-this.player_.currentTime());this.seekedBehindLive_=this.nextSeekedFromUser_&&2<e,this.nextSeekedFromUser_=!1,this.trackLive_()}handlePlay(){this.one(this.player_,"timeupdate",this.seekToLiveEdge_)}reset_(){this.lastTime_=-1,this.pastSeekEnd_=0,this.lastSeekEnd_=-1,this.behindLiveEdge_=!0,this.timeupdateSeen_=!1,this.seekedBehindLive_=!1,this.nextSeekedFromUser_=!1,this.clearInterval(this.trackingInterval_),this.trackingInterval_=null,this.off(this.player_,["play","pause"],this.trackLiveHandler_),this.off(this.player_,"seeked",this.handleSeeked_),this.off(this.player_,"play",this.handlePlay_),this.off(this.player_,"timeupdate",this.handleFirstTimeupdate_),this.off(this.player_,"timeupdate",this.seekToLiveEdge_)}nextSeekedFromUser(){this.nextSeekedFromUser_=!0}stopTracking(){this.isTracking()&&(this.reset_(),this.trigger("liveedgechange"))}seekableEnd(){var e=this.player_.seekable(),t=[];let s=e?e.length:0;for(;s--;)t.push(e.end(s));return t.length?t.sort()[t.length-1]:1/0}seekableStart(){var e=this.player_.seekable(),t=[];let s=e?e.length:0;for(;s--;)t.push(e.start(s));return t.length?t.sort()[0]:0}liveWindow(){var e=this.liveCurrentTime();return e===1/0?0:e-this.seekableStart()}isLive(){return this.isTracking()}atLiveEdge(){return!this.behindLiveEdge()}liveCurrentTime(){return this.pastSeekEnd()+this.seekableEnd()}pastSeekEnd(){var e=this.seekableEnd();return-1!==this.lastSeekEnd_&&e!==this.lastSeekEnd_&&(this.pastSeekEnd_=0),this.lastSeekEnd_=e,this.pastSeekEnd_}behindLiveEdge(){return this.behindLiveEdge_}isTracking(){return"number"==typeof this.trackingInterval_}seekToLiveEdge(){this.seekedBehindLive_=!1,this.atLiveEdge()||(this.nextSeekedFromUser_=!1,this.player_.currentTime(this.liveCurrentTime()))}dispose(){this.stopTracking(),super.dispose()}}T.registerComponent("LiveTracker",hr);class cr extends T{constructor(e,t){super(e,t),this.on("statechanged",e=>this.updateDom_()),this.updateDom_()}createEl(){return this.els={title:p("div",{className:"vjs-title-bar-title",id:"vjs-title-bar-title-"+v++}),description:p("div",{className:"vjs-title-bar-description",id:"vjs-title-bar-description-"+v++})},p("div",{className:"vjs-title-bar"},{},X(this.els))}updateDom_(){var e=this.player_.tech_;const i=e&&e.el_,r={title:"aria-labelledby",description:"aria-describedby"};["title","description"].forEach(e=>{var t=this.state[e],s=this.els[e],e=r[e];He(s),t&&Ce(s,t),i&&(i.removeAttribute(e),t)&&i.setAttribute(e,s.id)}),this.state.title||this.state.description?this.show():this.hide()}update(e){this.setState(e)}dispose(){var e=this.player_.tech_,e=e&&e.el_;e&&(e.removeAttribute("aria-labelledby"),e.removeAttribute("aria-describedby")),super.dispose(),this.els=null}}T.registerComponent("TitleBar",cr);function dr(s){const i=s.el();if(!i.resetSourceWatch_){const t={},e=mr(s),r=t=>(...e)=>{e=t.apply(i,e);return pr(s),e};["append","appendChild","insertAdjacentHTML"].forEach(e=>{i[e]&&(t[e]=i[e],i[e]=r(t[e]))}),Object.defineProperty(i,"innerHTML",h(e,{set:r(e.set)})),i.resetSourceWatch_=()=>{i.resetSourceWatch_=null,Object.keys(t).forEach(e=>{i[e]=t[e]}),Object.defineProperty(i,"innerHTML",e)},s.one("sourceset",i.resetSourceWatch_)}}function ur(s){if(s.featuresSourceset){const i=s.el();if(!i.resetSourceset_){e=s;const t=vr([e.el(),window.HTMLMediaElement.prototype,_r],"src");var e;const r=i.setAttribute,n=i.load;Object.defineProperty(i,"src",h(t,{set:e=>{e=t.set.call(i,e);return s.triggerSourceset(i.src),e}})),i.setAttribute=(e,t)=>{t=r.call(i,e,t);return/src/i.test(e)&&s.triggerSourceset(i.src),t},i.load=()=>{var e=n.call(i);return pr(s)||(s.triggerSourceset(""),dr(s)),e},i.currentSrc?s.triggerSourceset(i.currentSrc):pr(s)||dr(s),i.resetSourceset_=()=>{i.resetSourceset_=null,i.load=n,i.setAttribute=r,Object.defineProperty(i,"src",t),i.resetSourceWatch_&&i.resetSourceWatch_()}}}}const pr=t=>{var e=t.el();if(e.hasAttribute("src"))t.triggerSourceset(e.src);else{var s=t.$$("source"),i=[];let e="";if(!s.length)return!1;for(let e=0;e<s.length;e++){var r=s[e].src;r&&-1===i.indexOf(r)&&i.push(r)}if(!i.length)return!1;1===i.length&&(e=i[0]),t.triggerSourceset(e)}return!0},gr=Object.defineProperty({},"innerHTML",{get(){return this.cloneNode(!0).innerHTML},set(e){for(var t=document.createElement(this.nodeName.toLowerCase()),s=(t.innerHTML=e,document.createDocumentFragment());t.childNodes.length;)s.appendChild(t.childNodes[0]);return this.innerText="",window.Element.prototype.appendChild.call(this,s),this.innerHTML}}),vr=(t,s)=>{let i={};for(let e=0;e<t.length&&!((i=Object.getOwnPropertyDescriptor(t[e],s))&&i.set&&i.get);e++);return i.enumerable=!0,i.configurable=!0,i},mr=e=>vr([e.el(),window.HTMLMediaElement.prototype,window.Element.prototype,gr],"innerHTML"),_r=Object.defineProperty({},"src",{get(){return this.hasAttribute("src")?ss(window.Element.prototype.getAttribute.call(this,"src")):""},set(e){return window.Element.prototype.setAttribute.call(this,"src",e),e}});class I extends j{constructor(e,t){super(e,t);t=e.source;let s=!1;if(this.featuresVideoFrameCallback=this.featuresVideoFrameCallback&&"VIDEO"===this.el_.tagName,t&&(this.el_.currentSrc!==t.src||e.tag&&3===e.tag.initNetworkState_)?this.setSource(t):this.handleLateInit_(this.el_),e.enableSourceset&&this.setupSourcesetHandling_(),this.isScrubbing_=!1,this.el_.hasChildNodes()){var i=this.el_.childNodes;let e=i.length;for(var r=[];e--;){var n=i[e];"track"===n.nodeName.toLowerCase()&&(this.featuresNativeTextTracks?(this.remoteTextTrackEls().addTrackElement_(n),this.remoteTextTracks().addTrack(n.track),this.textTracks().addTrack(n.track),s||this.el_.hasAttribute("crossorigin")||!is(n.src)||(s=!0)):r.push(n))}for(let e=0;e<r.length;e++)this.el_.removeChild(r[e])}this.proxyNativeTracks_(),this.featuresNativeTextTracks&&s&&l.warn("Text Tracks are being loaded from another origin but the crossorigin attribute isn't used.\nThis may prevent text tracks from loading."),this.restoreMetadataTracksInIOSNativePlayer_(),(ge||ce)&&!0===e.nativeControlsForTouch&&this.setControls(!0),this.proxyWebkitFullscreen_(),this.triggerReady()}dispose(){this.el_&&this.el_.resetSourceset_&&this.el_.resetSourceset_(),I.disposeMediaElement(this.el_),this.options_=null,super.dispose()}setupSourcesetHandling_(){ur(this)}restoreMetadataTracksInIOSNativePlayer_(){const s=this.textTracks();let i;const e=()=>{i=[];for(let e=0;e<s.length;e++){var t=s[e];"metadata"===t.kind&&i.push({track:t,storedMode:t.mode})}},r=(e(),s.addEventListener("change",e),this.on("dispose",()=>s.removeEventListener("change",e)),()=>{for(let e=0;e<i.length;e++){var t=i[e];"disabled"===t.track.mode&&t.track.mode!==t.storedMode&&(t.track.mode=t.storedMode)}s.removeEventListener("change",r)});this.on("webkitbeginfullscreen",()=>{s.removeEventListener("change",e),s.removeEventListener("change",r),s.addEventListener("change",r)}),this.on("webkitendfullscreen",()=>{s.removeEventListener("change",e),s.addEventListener("change",e),s.removeEventListener("change",r)})}overrideNative_(e,t){if(t===this[`featuresNative${e}Tracks`]){const s=e.toLowerCase();this[s+"TracksListeners_"]&&Object.keys(this[s+"TracksListeners_"]).forEach(e=>{this.el()[s+"Tracks"].removeEventListener(e,this[s+"TracksListeners_"][e])}),this[`featuresNative${e}Tracks`]=!t,this[s+"TracksListeners_"]=null,this.proxyNativeTracksForType_(s)}}overrideNativeAudioTracks(e){this.overrideNative_("Audio",e)}overrideNativeVideoTracks(e){this.overrideNative_("Video",e)}proxyNativeTracksForType_(s){var e=S[s];const i=this.el()[e.getterName],r=this[e.getterName]();if(this[`featuresNative${e.capitalName}Tracks`]&&i&&i.addEventListener){const n={change:e=>{var t={type:"change",target:r,currentTarget:r,srcElement:r};r.trigger(t),"text"===s&&this[Cs.remoteText.getterName]().trigger(t)},addtrack(e){r.addTrack(e.track)},removetrack(e){r.removeTrack(e.track)}},t=function(){var e=[];for(let s=0;s<r.length;s++){let t=!1;for(let e=0;e<i.length;e++)if(i[e]===r[s]){t=!0;break}t||e.push(r[s])}for(;e.length;)r.removeTrack(e.shift())};this[e.getterName+"Listeners_"]=n,Object.keys(n).forEach(t=>{const s=n[t];i.addEventListener(t,s),this.on("dispose",e=>i.removeEventListener(t,s))}),this.on("loadstart",t),this.on("dispose",e=>this.off("loadstart",t))}}proxyNativeTracks_(){S.names.forEach(e=>{this.proxyNativeTracksForType_(e)})}createEl(){let t=this.options_.tag;t&&(this.options_.playerElIngest||this.movingMediaElementInDOM)||(t?(e=t.cloneNode(!0),t.parentNode&&t.parentNode.insertBefore(e,t),I.disposeMediaElement(t),t=e):(t=document.createElement("video"),e=h({},this.options_.tag&&Ie(this.options_.tag)),ge&&!0===this.options_.nativeControlsForTouch||delete e.controls,Pe(t,Object.assign(e,{id:this.options_.techId,class:"vjs-tech"}))),t.playerId=this.options_.playerId),"undefined"!=typeof this.options_.preload&&Oe(t,"preload",this.options_.preload),void 0!==this.options_.disablePictureInPicture&&(t.disablePictureInPicture=this.options_.disablePictureInPicture);var e,s=["loop","muted","playsinline","autoplay"];for(let e=0;e<s.length;e++){var i=s[e],r=this.options_[i];"undefined"!=typeof r&&(r?Oe(t,i,i):Ae(t,i),t[i]=r)}return t}handleLateInit_(e){if(0!==e.networkState&&3!==e.networkState)if(0===e.readyState){let e=!1;const t=function(){e=!0},s=(this.on("loadstart",t),function(){e||this.trigger("loadstart")});this.on("loadedmetadata",s),void this.ready(function(){this.off("loadstart",t),this.off("loadedmetadata",s),e||this.trigger("loadstart")})}else{const i=["loadstart"];i.push("loadedmetadata"),2<=e.readyState&&i.push("loadeddata"),3<=e.readyState&&i.push("canplay"),4<=e.readyState&&i.push("canplaythrough"),this.ready(function(){i.forEach(function(e){this.trigger(e)},this)})}}setScrubbing(e){this.isScrubbing_=e}scrubbing(){return this.isScrubbing_}setCurrentTime(e){try{this.isScrubbing_&&this.el_.fastSeek&&me?this.el_.fastSeek(e):this.el_.currentTime=e}catch(e){l(e,"Video is not ready. (Video.js)")}}duration(){if(this.el_.duration===1/0&&o&&c&&0===this.el_.currentTime){const e=()=>{0<this.el_.currentTime&&(this.el_.duration===1/0&&this.trigger("durationchange"),this.off("timeupdate",e))};return this.on("timeupdate",e),NaN}return this.el_.duration||NaN}width(){return this.el_.offsetWidth}height(){return this.el_.offsetHeight}proxyWebkitFullscreen_(){if("webkitDisplayingFullscreen"in this.el_){const e=function(){this.trigger("fullscreenchange",{isFullscreen:!1}),this.el_.controls&&!this.options_.nativeControlsForTouch&&this.controls()&&(this.el_.controls=!1)},t=function(){"webkitPresentationMode"in this.el_&&"picture-in-picture"!==this.el_.webkitPresentationMode&&(this.one("webkitendfullscreen",e),this.trigger("fullscreenchange",{isFullscreen:!0,nativeIOSFullscreen:!0}))};this.on("webkitbeginfullscreen",t),this.on("dispose",()=>{this.off("webkitbeginfullscreen",t),this.off("webkitendfullscreen",e)})}}supportsFullScreen(){return"function"==typeof this.el_.webkitEnterFullScreen}enterFullScreen(){const e=this.el_;if(e.paused&&e.networkState<=e.HAVE_METADATA)w(this.el_.play()),this.setTimeout(function(){e.pause();try{e.webkitEnterFullScreen()}catch(e){this.trigger("fullscreenerror",e)}},0);else try{e.webkitEnterFullScreen()}catch(e){this.trigger("fullscreenerror",e)}}exitFullScreen(){this.el_.webkitDisplayingFullscreen?this.el_.webkitExitFullScreen():this.trigger("fullscreenerror",new Error("The video is not fullscreen"))}requestPictureInPicture(){return this.el_.requestPictureInPicture()}requestVideoFrameCallback(e){return this.featuresVideoFrameCallback&&!this.el_.webkitKeys?this.el_.requestVideoFrameCallback(e):super.requestVideoFrameCallback(e)}cancelVideoFrameCallback(e){this.featuresVideoFrameCallback&&!this.el_.webkitKeys?this.el_.cancelVideoFrameCallback(e):super.cancelVideoFrameCallback(e)}src(e){if(void 0===e)return this.el_.src;this.setSrc(e)}reset(){I.resetMediaElement(this.el_)}currentSrc(){return this.currentSource_?this.currentSource_.src:this.el_.currentSrc}setControls(e){this.el_.controls=!!e}addTextTrack(e,t,s){return this.featuresNativeTextTracks?this.el_.addTextTrack(e,t,s):super.addTextTrack(e,t,s)}createRemoteTextTrack(e){var t;return this.featuresNativeTextTracks?(t=document.createElement("track"),e.kind&&(t.kind=e.kind),e.label&&(t.label=e.label),(e.language||e.srclang)&&(t.srclang=e.language||e.srclang),e.default&&(t.default=e.default),e.id&&(t.id=e.id),e.src&&(t.src=e.src),t):super.createRemoteTextTrack(e)}addRemoteTextTrack(e,t){e=super.addRemoteTextTrack(e,t);return this.featuresNativeTextTracks&&this.el().appendChild(e),e}removeRemoteTextTrack(t){if(super.removeRemoteTextTrack(t),this.featuresNativeTextTracks){var s=this.$$("track");let e=s.length;for(;e--;)t!==s[e]&&t!==s[e].track||this.el().removeChild(s[e])}}getVideoPlaybackQuality(){var e;return"function"==typeof this.el().getVideoPlaybackQuality?this.el().getVideoPlaybackQuality():(e={},"undefined"!=typeof this.el().webkitDroppedFrameCount&&"undefined"!=typeof this.el().webkitDecodedFrameCount&&(e.droppedVideoFrames=this.el().webkitDroppedFrameCount,e.totalVideoFrames=this.el().webkitDecodedFrameCount),window.performance&&(e.creationTime=window.performance.now()),e)}}Y(I,"TEST_VID",function(){var e,t;if(fe())return e=document.createElement("video"),(t=document.createElement("track")).kind="captions",t.srclang="en",t.label="English",e.appendChild(t),e}),I.isSupported=function(){try{I.TEST_VID.volume=.5}catch(e){return!1}return!(!I.TEST_VID||!I.TEST_VID.canPlayType)},I.canPlayType=function(e){return I.TEST_VID.canPlayType(e)},I.canPlaySource=function(e,t){return I.canPlayType(e.type)},I.canControlVolume=function(){try{const t=I.TEST_VID.volume;I.TEST_VID.volume=t/2+.1;var e=t!==I.TEST_VID.volume;return e&&u?(window.setTimeout(()=>{I&&I.prototype&&(I.prototype.featuresVolumeControl=t!==I.TEST_VID.volume)}),!1):e}catch(e){return!1}},I.canMuteVolume=function(){try{var e=I.TEST_VID.muted;return I.TEST_VID.muted=!e,I.TEST_VID.muted?Oe(I.TEST_VID,"muted","muted"):Ae(I.TEST_VID,"muted"),e!==I.TEST_VID.muted}catch(e){return!1}},I.canControlPlaybackRate=function(){if(o&&c&&ne<58)return!1;try{var e=I.TEST_VID.playbackRate;return I.TEST_VID.playbackRate=e/2+.1,e!==I.TEST_VID.playbackRate}catch(e){return!1}},I.canOverrideAttributes=function(){try{var e=()=>{};Object.defineProperty(document.createElement("video"),"src",{get:e,set:e}),Object.defineProperty(document.createElement("audio"),"src",{get:e,set:e}),Object.defineProperty(document.createElement("video"),"innerHTML",{get:e,set:e}),Object.defineProperty(document.createElement("audio"),"innerHTML",{get:e,set:e})}catch(e){return!1}return!0},I.supportsNativeTextTracks=function(){return me||u&&c},I.supportsNativeVideoTracks=function(){return!(!I.TEST_VID||!I.TEST_VID.videoTracks)},I.supportsNativeAudioTracks=function(){return!(!I.TEST_VID||!I.TEST_VID.audioTracks)},I.Events=["loadstart","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","ended","durationchange","timeupdate","progress","play","pause","ratechange","resize","volumechange"],[["featuresMuteControl","canMuteVolume"],["featuresPlaybackRate","canControlPlaybackRate"],["featuresSourceset","canOverrideAttributes"],["featuresNativeTextTracks","supportsNativeTextTracks"],["featuresNativeVideoTracks","supportsNativeVideoTracks"],["featuresNativeAudioTracks","supportsNativeAudioTracks"]].forEach(function([e,t]){Y(I.prototype,e,()=>I[t](),!0)}),I.prototype.featuresVolumeControl=I.canControlVolume(),I.prototype.movingMediaElementInDOM=!u,I.prototype.featuresFullscreenResize=!0,I.prototype.featuresProgressEvents=!0,I.prototype.featuresTimeupdateEvents=!0,I.prototype.featuresVideoFrameCallback=!(!I.TEST_VID||!I.TEST_VID.requestVideoFrameCallback),I.disposeMediaElement=function(e){if(e){for(e.parentNode&&e.parentNode.removeChild(e);e.hasChildNodes();)e.removeChild(e.firstChild);if(e.removeAttribute("src"),"function"==typeof e.load)try{e.load()}catch(e){}}},I.resetMediaElement=function(t){if(t){var s=t.querySelectorAll("source");let e=s.length;for(;e--;)t.removeChild(s[e]);if(t.removeAttribute("src"),"function"==typeof t.load)try{t.load()}catch(e){}}},["muted","defaultMuted","autoplay","controls","loop","playsinline"].forEach(function(e){I.prototype[e]=function(){return this.el_[e]||this.el_.hasAttribute(e)}}),["muted","defaultMuted","autoplay","loop","playsinline"].forEach(function(t){I.prototype["set"+f(t)]=function(e){(this.el_[t]=e)?this.el_.setAttribute(t,t):this.el_.removeAttribute(t)}}),["paused","currentTime","buffered","volume","poster","preload","error","seeking","seekable","ended","playbackRate","defaultPlaybackRate","disablePictureInPicture","played","networkState","readyState","videoWidth","videoHeight","crossOrigin"].forEach(function(e){I.prototype[e]=function(){return this.el_[e]}}),["volume","src","poster","preload","playbackRate","defaultPlaybackRate","disablePictureInPicture","crossOrigin"].forEach(function(t){I.prototype["set"+f(t)]=function(e){this.el_[t]=e}}),["pause","load","play"].forEach(function(e){I.prototype[e]=function(){return this.el_[e]()}}),j.withSourceHandlers(I),I.nativeSourceHandler={},I.nativeSourceHandler.canPlayType=function(e){try{return I.TEST_VID.canPlayType(e)}catch(e){return""}},I.nativeSourceHandler.canHandleSource=function(e,t){return e.type?I.nativeSourceHandler.canPlayType(e.type):e.src?(e=rs(e.src),I.nativeSourceHandler.canPlayType("video/"+e)):""},I.nativeSourceHandler.handleSource=function(e,t,s){t.setSrc(e.src)},I.nativeSourceHandler.dispose=function(){},I.registerSourceHandler(I.nativeSourceHandler),j.registerTech("Html5",I);const yr=["progress","abort","suspend","emptied","stalled","loadedmetadata","loadeddata","timeupdate","resize","volumechange","texttrackchange"],fr={canplay:"CanPlay",canplaythrough:"CanPlayThrough",playing:"Playing",seeked:"Seeked"},br=["tiny","xsmall","small","medium","large","xlarge","huge"],Tr={},kr=(br.forEach(e=>{var t="x"===e.charAt(0)?"x-"+e.substring(1):e;Tr[e]="vjs-layout-"+t}),{tiny:210,xsmall:320,small:425,medium:768,large:1440,xlarge:2560,huge:1/0});class M extends T{constructor(e,t,s){if(e.id=e.id||t.id||"vjs_video_"+v++,(t=Object.assign(M.getTagSettings(e),t)).initChildren=!1,t.createEl=!1,t.evented=!1,t.reportTouchActivity=!1,t.language||(i=e.closest("[lang]"))&&(t.language=i.getAttribute("lang")),super(null,t,s),this.boundDocumentFullscreenChange_=e=>this.documentFullscreenChange_(e),this.boundFullWindowOnEscKey_=e=>this.fullWindowOnEscKey(e),this.boundUpdateStyleEl_=e=>this.updateStyleEl_(e),this.boundApplyInitTime_=e=>this.applyInitTime_(e),this.boundUpdateCurrentBreakpoint_=e=>this.updateCurrentBreakpoint_(e),this.boundHandleTechClick_=e=>this.handleTechClick_(e),this.boundHandleTechDoubleClick_=e=>this.handleTechDoubleClick_(e),this.boundHandleTechTouchStart_=e=>this.handleTechTouchStart_(e),this.boundHandleTechTouchMove_=e=>this.handleTechTouchMove_(e),this.boundHandleTechTouchEnd_=e=>this.handleTechTouchEnd_(e),this.boundHandleTechTap_=e=>this.handleTechTap_(e),this.isFullscreen_=!1,this.log=$(this.id_),this.fsApi_=F,this.isPosterFromTech_=!1,this.queuedCallbacks_=[],this.isReady_=!1,this.hasStarted_=!1,this.userActive_=!1,this.debugEnabled_=!1,this.audioOnlyMode_=!1,this.audioPosterMode_=!1,this.audioOnlyCache_={playerHeight:null,hiddenChildren:[]},!this.options_||!this.options_.techOrder||!this.options_.techOrder.length)throw new Error("No techOrder specified. Did you overwrite videojs.options instead of just changing the properties you want to override?");if(this.tag=e,this.tagAttributes=e&&Ie(e),this.language(this.options_.language),t.languages){const r={};Object.getOwnPropertyNames(t.languages).forEach(function(e){r[e.toLowerCase()]=t.languages[e]}),this.languages_=r}else this.languages_=M.prototype.options_.languages;this.resetCache_(),this.poster_=t.poster||"",this.controls_=!!t.controls,e.controls=!1,e.removeAttribute("controls"),this.changingSrc_=!1,this.playCallbacks_=[],this.playTerminatedQueue_=[],e.hasAttribute("autoplay")?this.autoplay(!0):this.autoplay(this.options_.autoplay),t.plugins&&Object.keys(t.plugins).forEach(e=>{if("function"!=typeof this[e])throw new Error(`plugin "${e}" does not exist`)}),this.scrubbing_=!1,this.el_=this.createEl(),kt(this,{eventBusKey:"el_"}),this.fsApi_.requestFullscreen&&(m(document,this.fsApi_.fullscreenchange,this.boundDocumentFullscreenChange_),this.on(this.fsApi_.fullscreenchange,this.boundDocumentFullscreenChange_)),this.fluid_&&this.on(["playerreset","resize"],this.boundUpdateStyleEl_);var i=h(this.options_),s=(t.plugins&&Object.keys(t.plugins).forEach(e=>{this[e](t.plugins[e])}),t.debug&&this.debug(!0),this.options_.playerOptions=i,this.middleware_=[],this.playbackRates(t.playbackRates),t.experimentalSvgIcons&&((s=(new window.DOMParser).parseFromString('<svg xmlns="http://www.w3.org/2000/svg">\n  <defs>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-play">\n      <path d="M16 10v28l22-14z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-pause">\n      <path d="M12 38h8V10h-8v28zm16-28v28h8V10h-8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-audio">\n      <path d="M24 2C14.06 2 6 10.06 6 20v14c0 3.31 2.69 6 6 6h6V24h-8v-4c0-7.73 6.27-14 14-14s14 6.27 14 14v4h-8v16h6c3.31 0 6-2.69 6-6V20c0-9.94-8.06-18-18-18z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-captions">\n      <path d="M38 8H10c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM22 22h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2zm14 0h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-subtitles">\n      <path d="M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-fullscreen-enter">\n      <path d="M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-fullscreen-exit">\n      <path d="M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-play-circle">\n      <path d="M20 33l12-9-12-9v18zm4-29C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-mute">\n      <path d="M33 24c0-3.53-2.04-6.58-5-8.05v4.42l4.91 4.91c.06-.42.09-.85.09-1.28zm5 0c0 1.88-.41 3.65-1.08 5.28l3.03 3.03C41.25 29.82 42 27 42 24c0-8.56-5.99-15.72-14-17.54v4.13c5.78 1.72 10 7.07 10 13.41zM8.55 6L6 8.55 15.45 18H6v12h8l10 10V26.55l8.51 8.51c-1.34 1.03-2.85 1.86-4.51 2.36v4.13a17.94 17.94 0 0 0 7.37-3.62L39.45 42 42 39.45l-18-18L8.55 6zM24 8l-4.18 4.18L24 16.36V8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-low">\n      <path d="M14 18v12h8l10 10V8L22 18h-8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-medium">\n      <path d="M37 24c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zm-27-6v12h8l10 10V8L18 18h-8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-high">\n      <path d="M6 18v12h8l10 10V8L14 18H6zm27 6c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zM28 6.46v4.13c5.78 1.72 10 7.07 10 13.41s-4.22 11.69-10 13.41v4.13c8.01-1.82 14-8.97 14-17.54S36.01 8.28 28 6.46z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-spinner">\n      <path d="M18.8 21l9.53-16.51C26.94 4.18 25.49 4 24 4c-4.8 0-9.19 1.69-12.64 4.51l7.33 12.69.11-.2zm24.28-3c-1.84-5.85-6.3-10.52-11.99-12.68L23.77 18h19.31zm.52 2H28.62l.58 1 9.53 16.5C41.99 33.94 44 29.21 44 24c0-1.37-.14-2.71-.4-4zm-26.53 4l-7.8-13.5C6.01 14.06 4 18.79 4 24c0 1.37.14 2.71.4 4h14.98l-2.31-4zM4.92 30c1.84 5.85 6.3 10.52 11.99 12.68L24.23 30H4.92zm22.54 0l-7.8 13.51c1.4.31 2.85.49 4.34.49 4.8 0 9.19-1.69 12.64-4.51L29.31 26.8 27.46 30z"></path>\n    </symbol>\n    <symbol viewBox="0 0 24 24" id="vjs-icon-hd">\n      <path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-chapters">\n      <path d="M6 26h4v-4H6v4zm0 8h4v-4H6v4zm0-16h4v-4H6v4zm8 8h28v-4H14v4zm0 8h28v-4H14v4zm0-20v4h28v-4H14z"></path>\n    </symbol>\n    <symbol viewBox="0 0 40 40" id="vjs-icon-downloading">\n      <path d="M18.208 36.875q-3.208-.292-5.979-1.729-2.771-1.438-4.812-3.729-2.042-2.292-3.188-5.229-1.146-2.938-1.146-6.23 0-6.583 4.334-11.416 4.333-4.834 10.833-5.5v3.166q-5.167.75-8.583 4.646Q6.25 14.75 6.25 19.958q0 5.209 3.396 9.104 3.396 3.896 8.562 4.646zM20 28.417L11.542 20l2.083-2.083 4.917 4.916v-11.25h2.916v11.25l4.875-4.916L28.417 20zm1.792 8.458v-3.167q1.833-.25 3.541-.958 1.709-.708 3.167-1.875l2.333 2.292q-1.958 1.583-4.25 2.541-2.291.959-4.791 1.167zm6.791-27.792q-1.541-1.125-3.25-1.854-1.708-.729-3.541-1.021V3.042q2.5.25 4.77 1.208 2.271.958 4.271 2.5zm4.584 21.584l-2.25-2.25q1.166-1.5 1.854-3.209.687-1.708.937-3.541h3.209q-.292 2.5-1.229 4.791-.938 2.292-2.521 4.209zm.541-12.417q-.291-1.833-.958-3.562-.667-1.73-1.833-3.188l2.375-2.208q1.541 1.916 2.458 4.208.917 2.292 1.167 4.75z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-file-download">\n      <path d="M10.8 40.55q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h26.35v-7.7h3.4v7.7q0 1.4-1 2.4t-2.4 1zM24 32.1L13.9 22.05l2.45-2.45 5.95 5.95V7.15h3.4v18.4l5.95-5.95 2.45 2.45z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-file-download-done">\n      <path d="M9.8 40.5v-3.45h28.4v3.45zm9.2-9.05L7.4 19.85l2.45-2.35L19 26.65l19.2-19.2 2.4 2.4z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-file-download-off">\n      <path d="M4.9 4.75L43.25 43.1 41 45.3l-4.75-4.75q-.05.05-.075.025-.025-.025-.075-.025H10.8q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h22.05l-7-7-1.85 1.8L13.9 21.9l1.85-1.85L2.7 7zm26.75 14.7l2.45 2.45-3.75 3.8-2.45-2.5zM25.7 7.15V21.1l-3.4-3.45V7.15z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-share">\n      <path d="M36 32.17c-1.52 0-2.89.59-3.93 1.54L17.82 25.4c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31A5.83 5.83 0 1 0 36 32.17z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-cog">\n      <path d="M38.86 25.95c.08-.64.14-1.29.14-1.95s-.06-1.31-.14-1.95l4.23-3.31c.38-.3.49-.84.24-1.28l-4-6.93c-.25-.43-.77-.61-1.22-.43l-4.98 2.01c-1.03-.79-2.16-1.46-3.38-1.97L29 4.84c-.09-.47-.5-.84-1-.84h-8c-.5 0-.91.37-.99.84l-.75 5.3a14.8 14.8 0 0 0-3.38 1.97L9.9 10.1a1 1 0 0 0-1.22.43l-4 6.93c-.25.43-.14.97.24 1.28l4.22 3.31C9.06 22.69 9 23.34 9 24s.06 1.31.14 1.95l-4.22 3.31c-.38.3-.49.84-.24 1.28l4 6.93c.25.43.77.61 1.22.43l4.98-2.01c1.03.79 2.16 1.46 3.38 1.97l.75 5.3c.08.47.49.84.99.84h8c.5 0 .91-.37.99-.84l.75-5.3a14.8 14.8 0 0 0 3.38-1.97l4.98 2.01a1 1 0 0 0 1.22-.43l4-6.93c.25-.43.14-.97-.24-1.28l-4.22-3.31zM24 31c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-square">\n      <path d="M36 8H12c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H12V12h24v24z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-circle">\n      <circle cx="24" cy="24" r="20"></circle>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-circle-outline">\n      <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-circle-inner-circle">\n      <path d="M24 4C12.97 4 4 12.97 4 24s8.97 20 20 20 20-8.97 20-20S35.03 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm6-16c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6 6 2.69 6 6z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-cancel">\n      <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-replay">\n      <path d="M24 10V2L14 12l10 10v-8c6.63 0 12 5.37 12 12s-5.37 12-12 12-12-5.37-12-12H8c0 8.84 7.16 16 16 16s16-7.16 16-16-7.16-16-16-16z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-repeat">\n      <path d="M14 14h20v6l8-8-8-8v6H10v12h4v-8zm20 20H14v-6l-8 8 8 8v-6h24V26h-4v8z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-replay-5">\n      <path d="M17.689 98l-8.697 8.696 8.697 8.697 2.486-2.485-4.32-4.319h1.302c4.93 0 9.071 1.722 12.424 5.165 3.352 3.443 5.029 7.638 5.029 12.584h3.55c0-2.958-.553-5.73-1.658-8.313-1.104-2.583-2.622-4.841-4.555-6.774-1.932-1.932-4.19-3.45-6.773-4.555-2.584-1.104-5.355-1.657-8.313-1.657H15.5l4.615-4.615zm-8.08 21.659v13.861h11.357v5.008H9.609V143h12.7c.834 0 1.55-.298 2.146-.894.596-.597.895-1.31.895-2.145v-7.781c0-.835-.299-1.55-.895-2.147a2.929 2.929 0 0 0-2.147-.894h-8.227v-5.096H25.35v-4.384z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-replay-10">\n      <path d="M42.315 125.63c0-4.997-1.694-9.235-5.08-12.713-3.388-3.479-7.571-5.218-12.552-5.218h-1.315l4.363 4.363-2.51 2.51-8.787-8.786L25.221 97l2.45 2.45-4.662 4.663h1.375c2.988 0 5.788.557 8.397 1.673 2.61 1.116 4.892 2.65 6.844 4.602 1.953 1.953 3.487 4.234 4.602 6.844 1.116 2.61 1.674 5.41 1.674 8.398zM8.183 142v-19.657H3.176V117.8h9.643V142zm13.63 0c-1.156 0-2.127-.393-2.912-1.178-.778-.778-1.168-1.746-1.168-2.902v-16.04c0-1.156.393-2.127 1.178-2.912.779-.779 1.746-1.168 2.902-1.168h7.696c1.156 0 2.126.392 2.911 1.177.779.78 1.168 1.747 1.168 2.903v16.04c0 1.156-.392 2.127-1.177 2.912-.779.779-1.746 1.168-2.902 1.168zm.556-4.636h6.583v-15.02H22.37z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-replay-30">\n      <path d="M26.047 97l-8.733 8.732 8.733 8.733 2.496-2.494-4.336-4.338h1.307c4.95 0 9.108 1.73 12.474 5.187 3.367 3.458 5.051 7.668 5.051 12.635h3.565c0-2.97-.556-5.751-1.665-8.346-1.109-2.594-2.633-4.862-4.574-6.802-1.94-1.941-4.208-3.466-6.803-4.575-2.594-1.109-5.375-1.664-8.345-1.664H23.85l4.634-4.634zM2.555 117.531v4.688h10.297v5.25H5.873v4.687h6.979v5.156H2.555V142H13.36c1.061 0 1.95-.395 2.668-1.186.718-.79 1.076-1.772 1.076-2.94v-16.218c0-1.168-.358-2.149-1.076-2.94-.717-.79-1.607-1.185-2.668-1.185zm22.482.14c-1.149 0-2.11.39-2.885 1.165-.78.78-1.172 1.744-1.172 2.893v15.943c0 1.149.388 2.11 1.163 2.885.78.78 1.745 1.172 2.894 1.172h7.649c1.148 0 2.11-.388 2.884-1.163.78-.78 1.17-1.745 1.17-2.894v-15.943c0-1.15-.386-2.111-1.16-2.885-.78-.78-1.746-1.172-2.894-1.172zm.553 4.518h6.545v14.93H25.59z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-forward-5">\n      <path d="M29.508 97l-2.431 2.43 4.625 4.625h-1.364c-2.965 0-5.742.554-8.332 1.66-2.589 1.107-4.851 2.629-6.788 4.566-1.937 1.937-3.458 4.2-4.565 6.788-1.107 2.59-1.66 5.367-1.66 8.331h3.557c0-4.957 1.68-9.16 5.04-12.611 3.36-3.45 7.51-5.177 12.451-5.177h1.304l-4.326 4.33 2.49 2.49 8.715-8.716zm-9.783 21.61v13.89h11.382v5.018H19.725V142h12.727a2.93 2.93 0 0 0 2.15-.896 2.93 2.93 0 0 0 .896-2.15v-7.798c0-.837-.299-1.554-.896-2.152a2.93 2.93 0 0 0-2.15-.896h-8.245V123h11.29v-4.392z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-forward-10">\n      <path d="M23.119 97l-2.386 2.383 4.538 4.538h-1.339c-2.908 0-5.633.543-8.173 1.63-2.54 1.085-4.76 2.577-6.66 4.478-1.9 1.9-3.392 4.12-4.478 6.66-1.085 2.54-1.629 5.264-1.629 8.172h3.49c0-4.863 1.648-8.986 4.944-12.372 3.297-3.385 7.368-5.078 12.216-5.078h1.279l-4.245 4.247 2.443 2.442 8.55-8.55zm-9.52 21.45v4.42h4.871V142h4.513v-23.55zm18.136 0c-1.125 0-2.066.377-2.824 1.135-.764.764-1.148 1.709-1.148 2.834v15.612c0 1.124.38 2.066 1.139 2.824.764.764 1.708 1.145 2.833 1.145h7.489c1.125 0 2.066-.378 2.824-1.136.764-.764 1.145-1.709 1.145-2.833v-15.612c0-1.125-.378-2.067-1.136-2.825-.764-.764-1.708-1.145-2.833-1.145zm.54 4.42h6.408v14.617h-6.407z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-forward-30">\n      <path d="M25.549 97l-2.437 2.434 4.634 4.635H26.38c-2.97 0-5.753.555-8.347 1.664-2.594 1.109-4.861 2.633-6.802 4.574-1.94 1.94-3.465 4.207-4.574 6.802-1.109 2.594-1.664 5.377-1.664 8.347h3.565c0-4.967 1.683-9.178 5.05-12.636 3.366-3.458 7.525-5.187 12.475-5.187h1.307l-4.335 4.338 2.495 2.494 8.732-8.732zm-11.553 20.53v4.689h10.297v5.249h-6.978v4.688h6.978v5.156H13.996V142h10.808c1.06 0 1.948-.395 2.666-1.186.718-.79 1.077-1.771 1.077-2.94v-16.217c0-1.169-.36-2.15-1.077-2.94-.718-.79-1.605-1.186-2.666-1.186zm21.174.168c-1.149 0-2.11.389-2.884 1.163-.78.78-1.172 1.745-1.172 2.894v15.942c0 1.15.388 2.11 1.162 2.885.78.78 1.745 1.17 2.894 1.17h7.649c1.149 0 2.11-.386 2.885-1.16.78-.78 1.17-1.746 1.17-2.895v-15.942c0-1.15-.387-2.11-1.161-2.885-.78-.78-1.745-1.172-2.894-1.172zm.552 4.516h6.542v14.931h-6.542z"></path>\n    </symbol>\n    <symbol viewBox="0 0 512 512" id="vjs-icon-audio-description">\n      <g fill-rule="evenodd"><path d="M227.29 381.351V162.993c50.38-1.017 89.108-3.028 117.631 17.126 27.374 19.342 48.734 56.965 44.89 105.325-4.067 51.155-41.335 94.139-89.776 98.475-24.085 2.155-71.972 0-71.972 0s-.84-1.352-.773-2.568m48.755-54.804c31.43 1.26 53.208-16.633 56.495-45.386 4.403-38.51-21.188-63.552-58.041-60.796v103.612c-.036 1.466.575 2.22 1.546 2.57"></path><path d="M383.78 381.328c13.336 3.71 17.387-11.06 23.215-21.408 12.722-22.571 22.294-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.226 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894"></path><path d="M425.154 381.328c13.336 3.71 17.384-11.061 23.215-21.408 12.721-22.571 22.291-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.511c-.586 3.874 2.226 7.315 3.866 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894"></path><path d="M466.26 381.328c13.337 3.71 17.385-11.061 23.216-21.408 12.722-22.571 22.292-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.225 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894M4.477 383.005H72.58l18.573-28.484 64.169-.135s.065 19.413.065 28.62h48.756V160.307h-58.816c-5.653 9.537-140.85 222.697-140.85 222.697zm152.667-145.282v71.158l-40.453-.27 40.453-70.888z"></path></g>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-next-item">\n      <path d="M12 36l17-12-17-12v24zm20-24v24h4V12h-4z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-previous-item">\n      <path d="M12 12h4v24h-4zm7 12l17 12V12z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-shuffle">\n      <path d="M21.17 18.34L10.83 8 8 10.83l10.34 10.34 2.83-2.83zM29 8l4.09 4.09L8 37.17 10.83 40l25.09-25.09L40 19V8H29zm.66 18.83l-2.83 2.83 6.26 6.26L29 40h11V29l-4.09 4.09-6.25-6.26z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-cast">\n      <path d="M42 6H6c-2.21 0-4 1.79-4 4v6h4v-6h36v28H28v4h14c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4zM2 36v6h6c0-3.31-2.69-6-6-6zm0-8v4c5.52 0 10 4.48 10 10h4c0-7.73-6.27-14-14-14zm0-8v4c9.94 0 18 8.06 18 18h4c0-12.15-9.85-22-22-22z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-picture-in-picture-enter">\n      <path d="M38 22H22v11.99h16V22zm8 16V9.96C46 7.76 44.2 6 42 6H6C3.8 6 2 7.76 2 9.96V38c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4zm-4 .04H6V9.94h36v28.1z"></path>\n    </symbol>\n    <symbol viewBox="0 0 22 18" id="vjs-icon-picture-in-picture-exit">\n      <path d="M18 4H4v10h14V4zm4 12V1.98C22 .88 21.1 0 20 0H2C.9 0 0 .88 0 1.98V16c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H2V1.97h18v14.05z"></path>\n      <path fill="none" d="M-1-3h24v24H-1z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-facebook">\n      <path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759H734V905H479V609h255V391q0-186 104-288.5T1115 0q147 0 228 12z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-linkedin">\n      <path d="M477 625v991H147V625h330zm21-306q1 73-50.5 122T312 490h-2q-82 0-132-49t-50-122q0-74 51.5-122.5T314 148t133 48.5T498 319zm1166 729v568h-329v-530q0-105-40.5-164.5T1168 862q-63 0-105.5 34.5T999 982q-11 30-11 81v553H659q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5T1285 602q171 0 275 113.5t104 332.5z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-twitter">\n      <path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5T1369.5 1125 1185 1335.5t-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5T285 1033q33 5 61 5 43 0 85-11-112-23-185.5-111.5T172 710v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5T884 653q-8-38-8-74 0-134 94.5-228.5T1199 256q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-tumblr">\n      <path d="M1328 1329l80 237q-23 35-111 66t-177 32q-104 2-190.5-26T787 1564t-95-106-55.5-120-16.5-118V676H452V461q72-26 129-69.5t91-90 58-102 34-99T779 12q1-5 4.5-8.5T791 0h244v424h333v252h-334v518q0 30 6.5 56t22.5 52.5 49.5 41.5 81.5 14q78-2 134-29z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-pinterest">\n      <path d="M1664 896q0 209-103 385.5T1281.5 1561 896 1664q-111 0-218-32 59-93 78-164 9-34 54-211 20 39 73 67.5t114 28.5q121 0 216-68.5t147-188.5 52-270q0-114-59.5-214T1180 449t-255-63q-105 0-196 29t-154.5 77-109 110.5-67 129.5T377 866q0 104 40 183t117 111q30 12 38-20 2-7 8-31t8-30q6-23-11-43-51-61-51-151 0-151 104.5-259.5T904 517q151 0 235.5 82t84.5 213q0 170-68.5 289T980 1220q-61 0-98-43.5T859 1072q8-35 26.5-93.5t30-103T927 800q0-50-27-83t-77-33q-62 0-105 57t-43 142q0 73 25 122l-99 418q-17 70-13 177-206-91-333-281T128 896q0-209 103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z"></path>\n    </symbol>\n  </defs>\n</svg>',"image/svg+xml")).querySelector("parsererror")?(l.warn("Failed to load SVG Icons. Falling back to Font Icons."),this.options_.experimentalSvgIcons=null):((i=s.documentElement).style.display="none",this.el_.appendChild(i),this.addClass("vjs-svg-icons-enabled"))),this.initChildren(),this.isAudio("audio"===e.nodeName.toLowerCase()),this.controls()?this.addClass("vjs-controls-enabled"):this.addClass("vjs-controls-disabled"),this.el_.setAttribute("role","region"),this.isAudio()?this.el_.setAttribute("aria-label",this.localize("Audio Player")):this.el_.setAttribute("aria-label",this.localize("Video Player")),this.isAudio()&&this.addClass("vjs-audio"),ge&&this.addClass("vjs-touch-enabled"),u||this.addClass("vjs-workinghover"),M.players[this.id_]=this,D.split(".")[0]);this.addClass("vjs-v"+s),this.userActive(!0),this.reportUserActivity(),this.one("play",e=>this.listenForUserActivity_(e)),this.on("keydown",e=>this.handleKeyDown(e)),this.on("languagechange",e=>this.handleLanguagechange(e)),this.breakpoints(this.options_.breakpoints),this.responsive(this.options_.responsive),this.on("ready",()=>{this.audioPosterMode(this.options_.audioPosterMode),this.audioOnlyMode(this.options_.audioOnlyMode)})}dispose(){var e;this.trigger("dispose"),this.off("dispose"),_(document,this.fsApi_.fullscreenchange,this.boundDocumentFullscreenChange_),_(document,"keydown",this.boundFullWindowOnEscKey_),this.styleEl_&&this.styleEl_.parentNode&&(this.styleEl_.parentNode.removeChild(this.styleEl_),this.styleEl_=null),M.players[this.id_]=null,this.tag&&this.tag.player&&(this.tag.player=null),this.el_&&this.el_.player&&(this.el_.player=null),this.tech_&&(this.tech_.dispose(),this.isPosterFromTech_=!1,this.poster_=""),this.playerElIngest_&&(this.playerElIngest_=null),this.tag&&(this.tag=null),e=this,Ss[e.id()]=null,x.names.forEach(e=>{e=this[x[e].getterName]();e&&e.off&&e.off()}),super.dispose({restoreEl:this.options_.restoreEl})}createEl(){let t=this.tag,s,e=this.playerElIngest_=t.parentNode&&t.parentNode.hasAttribute&&t.parentNode.hasAttribute("data-vjs-player");const i="video-js"===this.tag.tagName.toLowerCase(),r=(e?s=this.el_=t.parentNode:i||(s=this.el_=super.createEl("div")),Ie(t));if(i){for(s=this.el_=t,t=this.tag=document.createElement("video");s.children.length;)t.appendChild(s.firstChild);Ee(s,"video-js")||Se(s,"video-js"),s.appendChild(t),e=this.playerElIngest_=s,Object.keys(s).forEach(e=>{try{t[e]=s[e]}catch(e){}})}t.setAttribute("tabindex","-1"),r.tabindex="-1",c&&le&&(t.setAttribute("role","application"),r.role="application"),t.removeAttribute("width"),t.removeAttribute("height"),"width"in r&&delete r.width,"height"in r&&delete r.height,Object.getOwnPropertyNames(r).forEach(function(e){i&&"class"===e||s.setAttribute(e,r[e]),i&&t.setAttribute(e,r[e])}),t.playerId=t.id,t.id+="_html5_api",t.className="vjs-tech",(t.player=s.player=this).addClass("vjs-paused");var n,a=["IS_SMART_TV","IS_TIZEN","IS_WEBOS","IS_ANDROID","IS_IPAD","IS_IPHONE"].filter(e=>_e[e]).map(e=>"vjs-device-"+e.substring(3).toLowerCase().replace(/\_/g,"-")),o=(this.addClass(...a),!0!==window.VIDEOJS_NO_DYNAMIC_STYLE&&(this.styleEl_=tt("vjs-styles-dimensions"),a=Ke(".vjs-styles-defaults"),(n=Ke("head")).insertBefore(this.styleEl_,a?a.nextSibling:n.firstChild)),this.fill_=!1,this.fluid_=!1,this.width(this.options_.width),this.height(this.options_.height),this.fill(this.options_.fill),this.fluid(this.options_.fluid),this.aspectRatio(this.options_.aspectRatio),this.crossOrigin(this.options_.crossOrigin||this.options_.crossorigin),t.getElementsByTagName("a"));for(let e=0;e<o.length;e++){var l=o.item(e);Se(l,"vjs-hidden"),l.setAttribute("hidden","hidden")}return t.initNetworkState_=t.networkState,t.parentNode&&!e&&t.parentNode.insertBefore(s,t),we(t,s),this.children_.unshift(t),this.el_.setAttribute("lang",this.language_),this.el_.setAttribute("translate","no"),this.el_=s}crossOrigin(e){if("undefined"==typeof e)return this.techGet_("crossOrigin");null!==e&&"anonymous"!==e&&"use-credentials"!==e?l.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${e}"`):(this.techCall_("setCrossOrigin",e),this.posterImage&&this.posterImage.crossOrigin(e))}width(e){return this.dimension("width",e)}height(e){return this.dimension("height",e)}dimension(e,t){var s,i=e+"_";if(void 0===t)return this[i]||0;""===t||"auto"===t?(this[i]=void 0,this.updateStyleEl_()):(s=parseFloat(t),isNaN(s)?l.error(`Improper value "${t}" supplied for for `+e):(this[i]=s,this.updateStyleEl_()))}fluid(e){if(void 0===e)return!!this.fluid_;var t;this.fluid_=!!e,a(this)&&this.off(["playerreset","resize"],this.boundUpdateStyleEl_),e?(this.addClass("vjs-fluid"),this.fill(!1),e=this,t=()=>{this.on(["playerreset","resize"],this.boundUpdateStyleEl_)},a(e)?t():(e.eventedCallbacks||(e.eventedCallbacks=[]),e.eventedCallbacks.push(t))):this.removeClass("vjs-fluid"),this.updateStyleEl_()}fill(e){if(void 0===e)return!!this.fill_;this.fill_=!!e,e?(this.addClass("vjs-fill"),this.fluid(!1)):this.removeClass("vjs-fill")}aspectRatio(e){if(void 0===e)return this.aspectRatio_;if(!/^\d+\:\d+$/.test(e))throw new Error("Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.");this.aspectRatio_=e,this.fluid(!0),this.updateStyleEl_()}updateStyleEl_(){if(!0===window.VIDEOJS_NO_DYNAMIC_STYLE){const e="number"==typeof this.width_?this.width_:this.options_.width,t="number"==typeof this.height_?this.height_:this.options_.height;var r=this.tech_&&this.tech_.el();void(r&&(0<=e&&(r.width=e),0<=t)&&(r.height=t))}else{let e,t,s,i;r=(s=void 0!==this.aspectRatio_&&"auto"!==this.aspectRatio_?this.aspectRatio_:0<this.videoWidth()?this.videoWidth()+":"+this.videoHeight():"16:9").split(":"),r=r[1]/r[0];e=void 0!==this.width_?this.width_:void 0!==this.height_?this.height_/r:this.videoWidth()||300,t=void 0!==this.height_?this.height_:e*r,i=/^[^a-zA-Z]/.test(this.id())?"dimensions-"+this.id():this.id()+"-dimensions",this.addClass(i),st(this.styleEl_,`
+      .${i} {
+        width: ${e}px;
+        height: ${t}px;
+      }
+
+      .${i}.vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: ${100*r}%;
+      }
+    `)}}loadTech_(e,t){this.tech_&&this.unloadTech_();var s=f(e),i=e.charAt(0).toLowerCase()+e.slice(1);"Html5"!==s&&this.tag&&(j.getTech("Html5").disposeMediaElement(this.tag),this.tag.player=null,this.tag=null),this.techName_=s,this.isReady_=!1;let r=this.autoplay();const n={source:t,autoplay:r="string"==typeof this.autoplay()||!0===this.autoplay()&&this.options_.normalizeAutoplay?!1:r,nativeControlsForTouch:this.options_.nativeControlsForTouch,playerId:this.id(),techId:this.id()+`_${i}_api`,playsinline:this.options_.playsinline,preload:this.options_.preload,loop:this.options_.loop,disablePictureInPicture:this.options_.disablePictureInPicture,muted:this.options_.muted,poster:this.poster(),language:this.language(),playerElIngest:this.playerElIngest_||!1,"vtt.js":this.options_["vtt.js"],canOverridePoster:!!this.options_.techCanOverridePoster,enableSourceset:this.options_.enableSourceset};x.names.forEach(e=>{e=x[e];n[e.getterName]=this[e.privateName]}),Object.assign(n,this.options_[s]),Object.assign(n,this.options_[i]),Object.assign(n,this.options_[e.toLowerCase()]),this.tag&&(n.tag=this.tag),t&&t.src===this.cache_.src&&0<this.cache_.currentTime&&(n.startTime=this.cache_.currentTime);i=j.getTech(e);if(!i)throw new Error(`No Tech named '${s}' exists! '${s}' should be registered using videojs.registerTech()'`);this.tech_=new i(n),this.tech_.ready(y(this,this.handleTechReady_),!0),Vt(this.textTracksJson_||[],this.tech_),yr.forEach(t=>{this.on(this.tech_,t,e=>this[`handleTech${f(t)}_`](e))}),Object.keys(fr).forEach(t=>{this.on(this.tech_,t,e=>{0===this.tech_.playbackRate()&&this.tech_.seeking()?this.queuedCallbacks_.push({callback:this[`handleTech${fr[t]}_`].bind(this),event:e}):this[`handleTech${fr[t]}_`](e)})}),this.on(this.tech_,"loadstart",e=>this.handleTechLoadStart_(e)),this.on(this.tech_,"sourceset",e=>this.handleTechSourceset_(e)),this.on(this.tech_,"waiting",e=>this.handleTechWaiting_(e)),this.on(this.tech_,"ended",e=>this.handleTechEnded_(e)),this.on(this.tech_,"seeking",e=>this.handleTechSeeking_(e)),this.on(this.tech_,"play",e=>this.handleTechPlay_(e)),this.on(this.tech_,"pause",e=>this.handleTechPause_(e)),this.on(this.tech_,"durationchange",e=>this.handleTechDurationChange_(e)),this.on(this.tech_,"fullscreenchange",(e,t)=>this.handleTechFullscreenChange_(e,t)),this.on(this.tech_,"fullscreenerror",(e,t)=>this.handleTechFullscreenError_(e,t)),this.on(this.tech_,"enterpictureinpicture",e=>this.handleTechEnterPictureInPicture_(e)),this.on(this.tech_,"leavepictureinpicture",e=>this.handleTechLeavePictureInPicture_(e)),this.on(this.tech_,"error",e=>this.handleTechError_(e)),this.on(this.tech_,"posterchange",e=>this.handleTechPosterChange_(e)),this.on(this.tech_,"textdata",e=>this.handleTechTextData_(e)),this.on(this.tech_,"ratechange",e=>this.handleTechRateChange_(e)),this.on(this.tech_,"loadedmetadata",this.boundUpdateStyleEl_),this.usingNativeControls(this.techGet_("controls")),this.controls()&&!this.usingNativeControls()&&this.addTechControlsListeners_(),this.tech_.el().parentNode===this.el()||"Html5"===s&&this.tag||we(this.tech_.el(),this.el()),this.tag&&(this.tag.player=null,this.tag=null)}unloadTech_(){x.names.forEach(e=>{e=x[e];this[e.privateName]=this[e.getterName]()}),this.textTracksJson_=zt(this.tech_),this.isReady_=!1,this.tech_.dispose(),this.tech_=!1,this.isPosterFromTech_&&(this.poster_="",this.trigger("posterchange")),this.isPosterFromTech_=!1}tech(e){return void 0===e&&l.warn("Using the tech directly can be dangerous. I hope you know what you're doing.\nSee https://github.com/videojs/video.js/issues/2617 for more info.\n"),this.tech_}version(){return{"video.js":D}}addTechControlsListeners_(){this.removeTechControlsListeners_(),this.on(this.tech_,"click",this.boundHandleTechClick_),this.on(this.tech_,"dblclick",this.boundHandleTechDoubleClick_),this.on(this.tech_,"touchstart",this.boundHandleTechTouchStart_),this.on(this.tech_,"touchmove",this.boundHandleTechTouchMove_),this.on(this.tech_,"touchend",this.boundHandleTechTouchEnd_),this.on(this.tech_,"tap",this.boundHandleTechTap_)}removeTechControlsListeners_(){this.off(this.tech_,"tap",this.boundHandleTechTap_),this.off(this.tech_,"touchstart",this.boundHandleTechTouchStart_),this.off(this.tech_,"touchmove",this.boundHandleTechTouchMove_),this.off(this.tech_,"touchend",this.boundHandleTechTouchEnd_),this.off(this.tech_,"click",this.boundHandleTechClick_),this.off(this.tech_,"dblclick",this.boundHandleTechDoubleClick_)}handleTechReady_(){this.triggerReady(),this.cache_.volume&&this.techCall_("setVolume",this.cache_.volume),this.handleTechPosterChange_(),this.handleTechDurationChange_()}handleTechLoadStart_(){this.removeClass("vjs-ended","vjs-seeking"),this.error(null),this.handleTechDurationChange_(),this.paused()&&this.hasStarted(!1),this.trigger("loadstart"),this.manualAutoplay_(!0===this.autoplay()&&this.options_.normalizeAutoplay?"play":this.autoplay())}manualAutoplay_(t){if(this.tech_&&"string"==typeof t){var s=()=>{const e=this.muted(),t=(this.muted(!0),()=>{this.muted(e)});this.playTerminatedQueue_.push(t);var s=this.play();if(Ft(s))return s.catch(e=>{throw t(),new Error("Rejection at manualAutoplay. Restoring muted value. "+(e||""))})};let e;if("any"!==t||this.muted()?e="muted"!==t||this.muted()?this.play():s():Ft(e=this.play())&&(e=e.catch(s)),Ft(e))return e.then(()=>{this.trigger({type:"autoplay-success",autoplay:t})}).catch(()=>{this.trigger({type:"autoplay-failure",autoplay:t})})}}updateSourceCaches_(e=""){let t=e,s="";"string"!=typeof t&&(t=e.src,s=e.type),this.cache_.source=this.cache_.source||{},this.cache_.sources=this.cache_.sources||[],t&&!s&&(s=((e,t)=>{if(!t)return"";if(e.cache_.source.src===t&&e.cache_.source.type)return e.cache_.source.type;var s=e.cache_.sources.filter(e=>e.src===t);if(s.length)return s[0].type;var i=e.$$("source");for(let e=0;e<i.length;e++){var r=i[e];if(r.type&&r.src&&r.src===t)return r.type}return Bs(t)})(this,t)),this.cache_.source=h({},e,{src:t,type:s});var e=this.cache_.sources.filter(e=>e.src&&e.src===t),i=[],r=this.$$("source"),n=[];for(let e=0;e<r.length;e++){var a=Ie(r[e]);i.push(a),a.src&&a.src===t&&n.push(a.src)}n.length&&!e.length?this.cache_.sources=i:e.length||(this.cache_.sources=[this.cache_.source]),this.cache_.src=t}handleTechSourceset_(t){if(!this.changingSrc_){let e=e=>this.updateSourceCaches_(e);var s=this.currentSource().src,i=t.src;(e=!s||/^blob:/.test(s)||!/^blob:/.test(i)||this.lastSource_&&(this.lastSource_.tech===i||this.lastSource_.player===s)?e:()=>{})(i),t.src||this.tech_.any(["sourceset","loadstart"],e=>{"sourceset"!==e.type&&(e=this.techGet_("currentSrc"),this.lastSource_.tech=e,this.updateSourceCaches_(e))})}this.lastSource_={player:this.currentSource().src,tech:t.src},this.trigger({src:t.src,type:"sourceset"})}hasStarted(e){if(void 0===e)return this.hasStarted_;e!==this.hasStarted_&&(this.hasStarted_=e,this.hasStarted_?this.addClass("vjs-has-started"):this.removeClass("vjs-has-started"))}handleTechPlay_(){this.removeClass("vjs-ended","vjs-paused"),this.addClass("vjs-playing"),this.hasStarted(!0),this.trigger("play")}handleTechRateChange_(){0<this.tech_.playbackRate()&&0===this.cache_.lastPlaybackRate&&(this.queuedCallbacks_.forEach(e=>e.callback(e.event)),this.queuedCallbacks_=[]),this.cache_.lastPlaybackRate=this.tech_.playbackRate(),this.trigger("ratechange")}handleTechWaiting_(){this.addClass("vjs-waiting"),this.trigger("waiting");const e=this.currentTime(),t=()=>{e!==this.currentTime()&&(this.removeClass("vjs-waiting"),this.off("timeupdate",t))};this.on("timeupdate",t)}handleTechCanPlay_(){this.removeClass("vjs-waiting"),this.trigger("canplay")}handleTechCanPlayThrough_(){this.removeClass("vjs-waiting"),this.trigger("canplaythrough")}handleTechPlaying_(){this.removeClass("vjs-waiting"),this.trigger("playing")}handleTechSeeking_(){this.addClass("vjs-seeking"),this.trigger("seeking")}handleTechSeeked_(){this.removeClass("vjs-seeking","vjs-ended"),this.trigger("seeked")}handleTechPause_(){this.removeClass("vjs-playing"),this.addClass("vjs-paused"),this.trigger("pause")}handleTechEnded_(){this.addClass("vjs-ended"),this.removeClass("vjs-waiting"),this.options_.loop?(this.currentTime(0),this.play()):this.paused()||this.pause(),this.trigger("ended")}handleTechDurationChange_(){this.duration(this.techGet_("duration"))}handleTechClick_(e){!this.controls_||void 0!==this.options_&&void 0!==this.options_.userActions&&void 0!==this.options_.userActions.click&&!1===this.options_.userActions.click||(void 0!==this.options_&&void 0!==this.options_.userActions&&"function"==typeof this.options_.userActions.click?this.options_.userActions.click.call(this,e):this.paused()?w(this.play()):this.pause())}handleTechDoubleClick_(t){!this.controls_||Array.prototype.some.call(this.$$(".vjs-control-bar, .vjs-modal-dialog"),e=>e.contains(t.target))||void 0!==this.options_&&void 0!==this.options_.userActions&&void 0!==this.options_.userActions.doubleClick&&!1===this.options_.userActions.doubleClick||(void 0!==this.options_&&void 0!==this.options_.userActions&&"function"==typeof this.options_.userActions.doubleClick?this.options_.userActions.doubleClick.call(this,t):this.isFullscreen()?this.exitFullscreen():this.requestFullscreen())}handleTechTap_(){this.userActive(!this.userActive())}handleTechTouchStart_(){this.userWasActive=this.userActive()}handleTechTouchMove_(){this.userWasActive&&this.reportUserActivity()}handleTechTouchEnd_(e){e.cancelable&&e.preventDefault()}toggleFullscreenClass_(){this.isFullscreen()?this.addClass("vjs-fullscreen"):this.removeClass("vjs-fullscreen")}documentFullscreenChange_(t){t=t.target.player;if(!t||t===this){t=this.el();let e=document[this.fsApi_.fullscreenElement]===t;!e&&t.matches&&(e=t.matches(":"+this.fsApi_.fullscreen)),this.isFullscreen(e)}}handleTechFullscreenChange_(e,t){t&&(t.nativeIOSFullscreen&&(this.addClass("vjs-ios-native-fs"),this.tech_.one("webkitendfullscreen",()=>{this.removeClass("vjs-ios-native-fs")})),this.isFullscreen(t.isFullscreen))}handleTechFullscreenError_(e,t){this.trigger("fullscreenerror",t)}togglePictureInPictureClass_(){this.isInPictureInPicture()?this.addClass("vjs-picture-in-picture"):this.removeClass("vjs-picture-in-picture")}handleTechEnterPictureInPicture_(e){this.isInPictureInPicture(!0)}handleTechLeavePictureInPicture_(e){this.isInPictureInPicture(!1)}handleTechError_(){var e=this.tech_.error();e&&this.error(e)}handleTechTextData_(){let e=1<arguments.length?arguments[1]:null;this.trigger("textdata",e)}getCache(){return this.cache_}resetCache_(){this.cache_={currentTime:0,initTime:0,inactivityTimeout:this.options_.inactivityTimeout,duration:NaN,lastVolume:1,lastPlaybackRate:this.defaultPlaybackRate(),media:null,src:"",source:{},sources:[],playbackRates:[],volume:1}}techCall_(t,s){this.ready(function(){if(t in Ms)return e=this.middleware_,this.tech_[t](e.reduce(As(t),s));if(t in Os)return Ps(this.middleware_,this.tech_,t,s);var e;try{this.tech_&&this.tech_[t](s)}catch(e){throw l(e),e}},!0)}techGet_(t){if(this.tech_&&this.tech_.isReady_){if(t in Is)return e=this.middleware_,s=this.tech_,e.reduceRight(As(t),s[t]());if(t in Os)return Ps(this.middleware_,this.tech_,t);var e,s;try{return this.tech_[t]()}catch(e){throw void 0===this.tech_[t]?l(`Video.js: ${t} method not defined for ${this.techName_} playback technology.`,e):"TypeError"===e.name?(l(`Video.js: ${t} unavailable on ${this.techName_} playback technology element.`,e),this.tech_.isReady_=!1):l(e),e}}}play(){return new Promise(e=>{this.play_(e)})}play_(e=w){this.playCallbacks_.push(e);var t,e=Boolean(!this.changingSrc_&&(this.src()||this.currentSrc())),s=Boolean(me||u);this.waitToPlay_&&(this.off(["ready","loadstart"],this.waitToPlay_),this.waitToPlay_=null),this.isReady_&&e?(t=this.techGet_("play"),s&&this.hasClass("vjs-ended")&&this.resetProgressBar_(),null===t?this.runPlayTerminatedQueue_():this.runPlayCallbacks_(t)):(this.waitToPlay_=e=>{this.play_()},this.one(["ready","loadstart"],this.waitToPlay_),!e&&s&&this.load())}runPlayTerminatedQueue_(){var e=this.playTerminatedQueue_.slice(0);this.playTerminatedQueue_=[],e.forEach(function(e){e()})}runPlayCallbacks_(t){var e=this.playCallbacks_.slice(0);this.playCallbacks_=[],this.playTerminatedQueue_=[],e.forEach(function(e){e(t)})}pause(){this.techCall_("pause")}paused(){return!1!==this.techGet_("paused")}played(){return this.techGet_("played")||k(0,0)}scrubbing(e){if("undefined"==typeof e)return this.scrubbing_;this.scrubbing_=!!e,this.techCall_("setScrubbing",this.scrubbing_),e?this.addClass("vjs-scrubbing"):this.removeClass("vjs-scrubbing")}currentTime(e){if(void 0===e)return this.cache_.currentTime=this.techGet_("currentTime")||0,this.cache_.currentTime;e<0&&(e=0),this.isReady_&&!this.changingSrc_&&this.tech_&&this.tech_.isReady_?(this.techCall_("setCurrentTime",e),this.cache_.initTime=0,isFinite(e)&&(this.cache_.currentTime=Number(e))):(this.cache_.initTime=e,this.off("canplay",this.boundApplyInitTime_),this.one("canplay",this.boundApplyInitTime_))}applyInitTime_(){this.currentTime(this.cache_.initTime)}duration(e){if(void 0===e)return void 0!==this.cache_.duration?this.cache_.duration:NaN;(e=(e=parseFloat(e))<0?1/0:e)!==this.cache_.duration&&((this.cache_.duration=e)===1/0?this.addClass("vjs-live"):this.removeClass("vjs-live"),isNaN(e)||this.trigger("durationchange"))}remainingTime(){return this.duration()-this.currentTime()}remainingTimeDisplay(){return Math.floor(this.duration())-Math.floor(this.currentTime())}buffered(){let e=this.techGet_("buffered");return e=e&&e.length?e:k(0,0)}seekable(){let e=this.techGet_("seekable");return e=e&&e.length?e:k(0,0)}seeking(){return this.techGet_("seeking")}ended(){return this.techGet_("ended")}networkState(){return this.techGet_("networkState")}readyState(){return this.techGet_("readyState")}bufferedPercent(){return Bt(this.buffered(),this.duration())}bufferedEnd(){var e=this.buffered(),t=this.duration();let s=e.end(e.length-1);return s=s>t?t:s}volume(e){let t;if(void 0===e)return t=parseFloat(this.techGet_("volume")),isNaN(t)?1:t;t=Math.max(0,Math.min(1,e)),this.cache_.volume=t,this.techCall_("setVolume",t),0<t&&this.lastVolume_(t)}muted(e){if(void 0===e)return this.techGet_("muted")||!1;this.techCall_("setMuted",e)}defaultMuted(e){return void 0!==e&&this.techCall_("setDefaultMuted",e),this.techGet_("defaultMuted")||!1}lastVolume_(e){if(void 0===e||0===e)return this.cache_.lastVolume;this.cache_.lastVolume=e}supportsFullScreen(){return this.techGet_("supportsFullScreen")||!1}isFullscreen(e){var t;if(void 0===e)return this.isFullscreen_;t=this.isFullscreen_,this.isFullscreen_=Boolean(e),this.isFullscreen_!==t&&this.fsApi_.prefixed&&this.trigger("fullscreenchange"),this.toggleFullscreenClass_()}requestFullscreen(a){this.isInPictureInPicture()&&this.exitPictureInPicture();const o=this;return new Promise((e,s)=>{function i(){o.off("fullscreenerror",r),o.off("fullscreenchange",t)}function t(){i(),e()}function r(e,t){i(),s(t)}o.one("fullscreenchange",t),o.one("fullscreenerror",r);var n=o.requestFullscreenHelper_(a);n&&(n.then(i,i),n.then(e,s))})}requestFullscreenHelper_(e){let t;if(this.fsApi_.prefixed||(t=this.options_.fullscreen&&this.options_.fullscreen.options||{},void 0!==e&&(t=e)),this.fsApi_.requestFullscreen)return(e=this.el_[this.fsApi_.requestFullscreen](t))&&e.then(()=>this.isFullscreen(!0),()=>this.isFullscreen(!1)),e;this.tech_.supportsFullScreen()&&!0==!this.options_.preferFullWindow?this.techCall_("enterFullScreen"):this.enterFullWindow()}exitFullscreen(){const a=this;return new Promise((e,s)=>{function i(){a.off("fullscreenerror",r),a.off("fullscreenchange",t)}function t(){i(),e()}function r(e,t){i(),s(t)}a.one("fullscreenchange",t),a.one("fullscreenerror",r);var n=a.exitFullscreenHelper_();n&&(n.then(i,i),n.then(e,s))})}exitFullscreenHelper_(){var e;if(this.fsApi_.requestFullscreen)return(e=document[this.fsApi_.exitFullscreen]())&&w(e.then(()=>this.isFullscreen(!1))),e;this.tech_.supportsFullScreen()&&!0==!this.options_.preferFullWindow?this.techCall_("exitFullScreen"):this.exitFullWindow()}enterFullWindow(){this.isFullscreen(!0),this.isFullWindow=!0,this.docOrigOverflow=document.documentElement.style.overflow,m(document,"keydown",this.boundFullWindowOnEscKey_),document.documentElement.style.overflow="hidden",Se(document.body,"vjs-full-window"),this.trigger("enterFullWindow")}fullWindowOnEscKey(e){b.isEventKey(e,"Esc")&&!0===this.isFullscreen()&&(this.isFullWindow?this.exitFullWindow():this.exitFullscreen())}exitFullWindow(){this.isFullscreen(!1),this.isFullWindow=!1,_(document,"keydown",this.boundFullWindowOnEscKey_),document.documentElement.style.overflow=this.docOrigOverflow,xe(document.body,"vjs-full-window"),this.trigger("exitFullWindow")}disablePictureInPicture(e){if(void 0===e)return this.techGet_("disablePictureInPicture");this.techCall_("setDisablePictureInPicture",e),this.options_.disablePictureInPicture=e,this.trigger("disablepictureinpicturechanged")}isInPictureInPicture(e){if(void 0===e)return!!this.isInPictureInPicture_;this.isInPictureInPicture_=!!e,this.togglePictureInPictureClass_()}requestPictureInPicture(){if(this.options_.enableDocumentPictureInPicture&&window.documentPictureInPicture){const t=document.createElement(this.el().tagName);return t.classList=this.el().classList,t.classList.add("vjs-pip-container"),this.posterImage&&t.appendChild(this.posterImage.el().cloneNode(!0)),this.titleBar&&t.appendChild(this.titleBar.el().cloneNode(!0)),t.appendChild(p("p",{className:"vjs-pip-text"},{},this.localize("Playing in picture-in-picture"))),window.documentPictureInPicture.requestWindow({width:this.videoWidth(),height:this.videoHeight()}).then(e=>(Ge(e),this.el_.parentNode.insertBefore(t,this.el_),e.document.body.appendChild(this.el_),e.document.body.classList.add("vjs-pip-window"),this.player_.isInPictureInPicture(!0),this.player_.trigger({type:"enterpictureinpicture",pipWindow:e}),e.addEventListener("pagehide",e=>{e=e.target.querySelector(".video-js");t.parentNode.replaceChild(e,t),this.player_.isInPictureInPicture(!1),this.player_.trigger("leavepictureinpicture")}),e))}return"pictureInPictureEnabled"in document&&!1===this.disablePictureInPicture()?this.techGet_("requestPictureInPicture"):Promise.reject("No PiP mode is available")}exitPictureInPicture(){return window.documentPictureInPicture&&window.documentPictureInPicture.window?(window.documentPictureInPicture.window.close(),Promise.resolve()):"pictureInPictureEnabled"in document?document.exitPictureInPicture():void 0}handleKeyDown(e){var t,s,i=this.options_["userActions"];i&&i.hotkeys&&(t=this.el_.ownerDocument.activeElement,s=t.tagName.toLowerCase(),t.isContentEditable||("input"===s?-1===["button","checkbox","hidden","radio","reset","submit"].indexOf(t.type):-1!==["textarea"].indexOf(s))||("function"==typeof i.hotkeys?i.hotkeys.call(this,e):this.handleHotkeys(e)))}handleHotkeys(e){var{fullscreenKey:t=e=>b.isEventKey(e,"f"),muteKey:s=e=>b.isEventKey(e,"m"),playPauseKey:i=e=>b.isEventKey(e,"k")||b.isEventKey(e,"Space")}=this.options_.userActions?this.options_.userActions.hotkeys:{};t.call(this,e)?(e.preventDefault(),e.stopPropagation(),t=T.getComponent("FullscreenToggle"),!1!==document[this.fsApi_.fullscreenEnabled]&&t.prototype.handleClick.call(this,e)):s.call(this,e)?(e.preventDefault(),e.stopPropagation(),T.getComponent("MuteToggle").prototype.handleClick.call(this,e)):i.call(this,e)&&(e.preventDefault(),e.stopPropagation(),T.getComponent("PlayToggle").prototype.handleClick.call(this,e))}canPlayType(i){var r;for(let t=0,s=this.options_.techOrder;t<s.length;t++){var n=s[t];let e=j.getTech(n);if(e=e||T.getComponent(n)){if(e.isSupported()&&(r=e.canPlayType(i)))return r}else l.error(`The "${n}" tech is undefined. Skipped browser support check for that tech.`)}return""}selectSource(e){function t(e,s,i){let r;return e.some(t=>s.some(e=>{if(r=i(t,e))return!0})),r}var s=this.options_.techOrder.map(e=>[e,j.getTech(e)]).filter(([e,t])=>t?t.isSupported():(l.error(`The "${e}" tech is undefined. Skipped browser support check for that tech.`),!1));let i;var r,n=([e,t],s)=>{if(t.canPlaySource(s,this.options_[e.toLowerCase()]))return{source:s,tech:e}};return(i=this.options_.sourceOrder?t(e,s,(r=n,(e,t)=>r(t,e))):t(s,e,n))||!1}handleSrc_(e,i){if("undefined"==typeof e)return this.cache_.src||"";this.resetRetryOnError_&&this.resetRetryOnError_();const r=Ns(e);if(r.length){if(this.changingSrc_=!0,i||(this.cache_.sources=r),this.updateSourceCaches_(r[0]),js(this,r[0],(e,t)=>{var s;if(this.middleware_=t,i||(this.cache_.sources=r),this.updateSourceCaches_(e),this.src_(e))return 1<r.length?this.handleSrc_(r.slice(1)):(this.changingSrc_=!1,this.setTimeout(function(){this.error({code:4,message:this.options_.notSupportedMessage})},0),void this.triggerReady());s=this.tech_,t.forEach(e=>e.setTech&&e.setTech(s))}),1<r.length){const t=()=>{this.error(null),this.handleSrc_(r.slice(1),!0)},s=()=>{this.off("error",t)};this.one("error",t),this.one("playing",s),this.resetRetryOnError_=()=>{this.off("error",t),this.off("playing",s)}}}else this.setTimeout(function(){this.error({code:4,message:this.options_.notSupportedMessage})},0)}src(e){return this.handleSrc_(e,!1)}src_(e){var t=this.selectSource([e]);return!t||(St(t.tech,this.techName_)?this.ready(function(){this.tech_.constructor.prototype.hasOwnProperty("setSource")?this.techCall_("setSource",e):this.techCall_("src",e.src),this.changingSrc_=!1},!0):(this.changingSrc_=!0,this.loadTech_(t.tech,t.source),this.tech_.ready(()=>{this.changingSrc_=!1})),!1)}load(){this.tech_&&this.tech_.vhs?this.src(this.currentSource()):this.techCall_("load")}reset(){this.paused()?this.doReset_():w(this.play().then(()=>this.doReset_()))}doReset_(){this.tech_&&this.tech_.clearTracks("text"),this.removeClass("vjs-playing"),this.addClass("vjs-paused"),this.resetCache_(),this.poster(""),this.loadTech_(this.options_.techOrder[0],null),this.techCall_("reset"),this.resetControlBarUI_(),this.error(null),this.titleBar&&this.titleBar.update({title:void 0,description:void 0}),a(this)&&this.trigger("playerreset")}resetControlBarUI_(){this.resetProgressBar_(),this.resetPlaybackRate_(),this.resetVolumeBar_()}resetProgressBar_(){this.currentTime(0);var{currentTimeDisplay:e,durationDisplay:t,progressControl:s,remainingTimeDisplay:i}=this.controlBar||{},s=(s||{})["seekBar"];e&&e.updateContent(),t&&t.updateContent(),i&&i.updateContent(),s&&(s.update(),s.loadProgressBar)&&s.loadProgressBar.update()}resetPlaybackRate_(){this.playbackRate(this.defaultPlaybackRate()),this.handleTechRateChange_()}resetVolumeBar_(){this.volume(1),this.trigger("volumechange")}currentSources(){var e=this.currentSource(),t=[];return 0!==Object.keys(e).length&&t.push(e),this.cache_.sources||t}currentSource(){return this.cache_.source||{}}currentSrc(){return this.currentSource()&&this.currentSource().src||""}currentType(){return this.currentSource()&&this.currentSource().type||""}preload(e){if(void 0===e)return this.techGet_("preload");this.techCall_("setPreload",e),this.options_.preload=e}autoplay(e){if(void 0===e)return this.options_.autoplay||!1;let t;"string"==typeof e&&/(any|play|muted)/.test(e)||!0===e&&this.options_.normalizeAutoplay?(this.options_.autoplay=e,this.manualAutoplay_("string"==typeof e?e:"play"),t=!1):this.options_.autoplay=!!e,t="undefined"==typeof t?this.options_.autoplay:t,this.tech_&&this.techCall_("setAutoplay",t)}playsinline(e){return void 0!==e&&(this.techCall_("setPlaysinline",e),this.options_.playsinline=e),this.techGet_("playsinline")}loop(e){if(void 0===e)return this.techGet_("loop");this.techCall_("setLoop",e),this.options_.loop=e}poster(e){if(void 0===e)return this.poster_;(e=e||"")!==this.poster_&&(this.poster_=e,this.techCall_("setPoster",e),this.isPosterFromTech_=!1,this.trigger("posterchange"))}handleTechPosterChange_(){var e;(!this.poster_||this.options_.techCanOverridePoster)&&this.tech_&&this.tech_.poster&&(e=this.tech_.poster()||"")!==this.poster_&&(this.poster_=e,this.isPosterFromTech_=!0,this.trigger("posterchange"))}controls(e){if(void 0===e)return!!this.controls_;this.controls_!==(e=!!e)&&(this.controls_=e,this.usingNativeControls()&&this.techCall_("setControls",e),this.controls_?(this.removeClass("vjs-controls-disabled"),this.addClass("vjs-controls-enabled"),this.trigger("controlsenabled"),this.usingNativeControls()||this.addTechControlsListeners_()):(this.removeClass("vjs-controls-enabled"),this.addClass("vjs-controls-disabled"),this.trigger("controlsdisabled"),this.usingNativeControls()||this.removeTechControlsListeners_()))}usingNativeControls(e){if(void 0===e)return!!this.usingNativeControls_;this.usingNativeControls_!==(e=!!e)&&(this.usingNativeControls_=e,this.usingNativeControls_?(this.addClass("vjs-using-native-controls"),this.trigger("usingnativecontrols")):(this.removeClass("vjs-using-native-controls"),this.trigger("usingcustomcontrols")))}error(t){if(void 0===t)return this.error_||null;if(B("beforeerror").forEach(e=>{e=e(this,t);n(e)&&!Array.isArray(e)||"string"==typeof e||"number"==typeof e||null===e?t=e:this.log.error("please return a value that MediaError expects in beforeerror hooks")}),this.options_.suppressNotSupportedError&&t&&4===t.code){const e=function(){this.error(t)};this.options_.suppressNotSupportedError=!1,this.any(["click","touchstart"],e),void this.one("loadstart",function(){this.off(["click","touchstart"],e)})}else null===t?(this.error_=null,this.removeClass("vjs-error"),this.errorDisplay&&this.errorDisplay.close()):(this.error_=new C(t),this.addClass("vjs-error"),l.error(`(CODE:${this.error_.code} ${C.errorTypes[this.error_.code]})`,this.error_.message,this.error_),this.trigger("error"),B("error").forEach(e=>e(this,this.error_)))}reportUserActivity(e){this.userActivity_=!0}userActive(e){if(void 0===e)return this.userActive_;(e=!!e)!==this.userActive_&&(this.userActive_=e,this.userActive_?(this.userActivity_=!0,this.removeClass("vjs-user-inactive"),this.addClass("vjs-user-active"),this.trigger("useractive")):(this.tech_&&this.tech_.one("mousemove",function(e){e.stopPropagation(),e.preventDefault()}),this.userActivity_=!1,this.removeClass("vjs-user-active"),this.addClass("vjs-user-inactive"),this.trigger("userinactive")))}listenForUserActivity_(){let t,s,i;const r=y(this,this.reportUserActivity);function e(e){r(),this.clearInterval(t)}this.on("mousedown",function(){r(),this.clearInterval(t),t=this.setInterval(r,250)}),this.on("mousemove",function(e){e.screenX===s&&e.screenY===i||(s=e.screenX,i=e.screenY,r())}),this.on("mouseup",e),this.on("mouseleave",e);var n=this.getChild("controlBar");!n||u||o||(n.on("mouseenter",function(e){0!==this.player().options_.inactivityTimeout&&(this.player().cache_.inactivityTimeout=this.player().options_.inactivityTimeout),this.player().options_.inactivityTimeout=0}),n.on("mouseleave",function(e){this.player().options_.inactivityTimeout=this.player().cache_.inactivityTimeout})),this.on("keydown",r),this.on("keyup",r);let a;this.setInterval(function(){var e;this.userActivity_&&(this.userActivity_=!1,this.userActive(!0),this.clearTimeout(a),(e=this.options_.inactivityTimeout)<=0||(a=this.setTimeout(function(){this.userActivity_||this.userActive(!1)},e)))},250)}playbackRate(e){if(void 0===e)return this.tech_&&this.tech_.featuresPlaybackRate?this.cache_.lastPlaybackRate||this.techGet_("playbackRate"):1;this.techCall_("setPlaybackRate",e)}defaultPlaybackRate(e){return void 0!==e?this.techCall_("setDefaultPlaybackRate",e):this.tech_&&this.tech_.featuresPlaybackRate?this.techGet_("defaultPlaybackRate"):1}isAudio(e){if(void 0===e)return!!this.isAudio_;this.isAudio_=!!e}enableAudioOnlyUI_(){this.addClass("vjs-audio-only-mode");var e=this.children();const t=this.getChild("ControlBar");var s=t&&t.currentHeight();e.forEach(e=>{e!==t&&e.el_&&!e.hasClass("vjs-hidden")&&(e.hide(),this.audioOnlyCache_.hiddenChildren.push(e))}),this.audioOnlyCache_.playerHeight=this.currentHeight(),this.height(s),this.trigger("audioonlymodechange")}disableAudioOnlyUI_(){this.removeClass("vjs-audio-only-mode"),this.audioOnlyCache_.hiddenChildren.forEach(e=>e.show()),this.height(this.audioOnlyCache_.playerHeight),this.trigger("audioonlymodechange")}audioOnlyMode(e){return"boolean"!=typeof e||e===this.audioOnlyMode_?this.audioOnlyMode_:(this.audioOnlyMode_=e)?(e=[],this.isInPictureInPicture()&&e.push(this.exitPictureInPicture()),this.isFullscreen()&&e.push(this.exitFullscreen()),this.audioPosterMode()&&e.push(this.audioPosterMode(!1)),Promise.all(e).then(()=>this.enableAudioOnlyUI_())):Promise.resolve().then(()=>this.disableAudioOnlyUI_())}enablePosterModeUI_(){(this.tech_&&this.tech_).hide(),this.addClass("vjs-audio-poster-mode"),this.trigger("audiopostermodechange")}disablePosterModeUI_(){(this.tech_&&this.tech_).show(),this.removeClass("vjs-audio-poster-mode"),this.trigger("audiopostermodechange")}audioPosterMode(e){return"boolean"!=typeof e||e===this.audioPosterMode_?this.audioPosterMode_:(this.audioPosterMode_=e)?(this.audioOnlyMode()?this.audioOnlyMode(!1):Promise.resolve()).then(()=>{this.enablePosterModeUI_()}):Promise.resolve().then(()=>{this.disablePosterModeUI_()})}addTextTrack(e,t,s){if(this.tech_)return this.tech_.addTextTrack(e,t,s)}addRemoteTextTrack(e,t){if(this.tech_)return this.tech_.addRemoteTextTrack(e,t)}removeRemoteTextTrack(e={}){let t=e["track"];if(t=t||e,this.tech_)return this.tech_.removeRemoteTextTrack(t)}getVideoPlaybackQuality(){return this.techGet_("getVideoPlaybackQuality")}videoWidth(){return this.tech_&&this.tech_.videoWidth&&this.tech_.videoWidth()||0}videoHeight(){return this.tech_&&this.tech_.videoHeight&&this.tech_.videoHeight()||0}language(e){if(void 0===e)return this.language_;this.language_!==String(e).toLowerCase()&&(this.language_=String(e).toLowerCase(),a(this))&&this.trigger("languagechange")}languages(){return h(M.prototype.options_.languages,this.languages_)}toJSON(){var t=h(this.options_),s=t.tracks;t.tracks=[];for(let e=0;e<s.length;e++){var i=s[e];(i=h(i)).player=void 0,t.tracks[e]=i}return t}createModal(e,t){(t=t||{}).content=e||"";const s=new $t(this,t);return this.addChild(s),s.on("dispose",()=>{this.removeChild(s)}),s.open(),s}updateCurrentBreakpoint_(){if(this.responsive()){var t=this.currentBreakpoint(),s=this.currentWidth();for(let e=0;e<br.length;e++){var i=br[e];if(s<=this.breakpoints_[i]){if(t===i)return;t&&this.removeClass(Tr[t]),this.addClass(Tr[i]),this.breakpoint_=i;break}}}}removeCurrentBreakpoint_(){var e=this.currentBreakpointClass();this.breakpoint_="",e&&this.removeClass(e)}breakpoints(e){return void 0!==e&&(this.breakpoint_="",this.breakpoints_=Object.assign({},kr,e),this.updateCurrentBreakpoint_()),Object.assign(this.breakpoints_)}responsive(e){return void 0===e?this.responsive_:(e=Boolean(e))!==this.responsive_?((this.responsive_=e)?(this.on("playerresize",this.boundUpdateCurrentBreakpoint_),this.updateCurrentBreakpoint_()):(this.off("playerresize",this.boundUpdateCurrentBreakpoint_),this.removeCurrentBreakpoint_()),e):void 0}currentBreakpoint(){return this.breakpoint_}currentBreakpointClass(){return Tr[this.breakpoint_]||""}loadMedia(e,t){var s,i,r,n,a,o,l;e&&"object"==typeof e&&(s=this.crossOrigin(),{artist:e,artwork:i,description:r,poster:n,src:a,textTracks:o,title:l}=(this.reset(),this.cache_.media=h(e),this.cache_.media),!i&&n&&(this.cache_.media.artwork=[{src:n,type:Bs(n)}]),s&&this.crossOrigin(s),a&&this.src(a),n&&this.poster(n),Array.isArray(o)&&o.forEach(e=>this.addRemoteTextTrack(e,!1)),this.titleBar&&this.titleBar.update({title:l,description:r||e||""}),this.ready(t))}getMedia(){var e,t;return this.cache_.media?h(this.cache_.media):(e=this.poster(),t={src:this.currentSources(),textTracks:Array.prototype.map.call(this.remoteTextTracks(),e=>({kind:e.kind,label:e.label,language:e.language,src:e.src}))},e&&(t.poster=e,t.artwork=[{src:t.poster,type:Bs(t.poster)}]),t)}static getTagSettings(e){var t,s={sources:[],tracks:[]},i=Ie(e),r=i["data-setup"];if(Ee(e,"vjs-fill")&&(i.fill=!0),Ee(e,"vjs-fluid")&&(i.fluid=!0),null!==r&&([r,t]=Rt(r||"{}"),r&&l.error(r),Object.assign(i,t)),Object.assign(s,i),e.hasChildNodes()){var n=e.childNodes;for(let e=0,t=n.length;e<t;e++){var a=n[e],o=a.nodeName.toLowerCase();"source"===o?s.sources.push(Ie(a)):"track"===o&&s.tracks.push(Ie(a))}}return s}debug(e){if(void 0===e)return this.debugEnabled_;e?(this.trigger("debugon"),this.previousLogLevel_=this.log.level,this.log.level("debug"),this.debugEnabled_=!0):(this.trigger("debugoff"),this.log.level(this.previousLogLevel_),this.previousLogLevel_=void 0,this.debugEnabled_=!1)}playbackRates(e){if(void 0===e)return this.cache_.playbackRates;Array.isArray(e)&&e.every(e=>"number"==typeof e)&&(this.cache_.playbackRates=e,this.trigger("playbackrateschange"))}}x.names.forEach(function(e){const t=x[e];M.prototype[t.getterName]=function(){return this.tech_?this.tech_[t.getterName]():(this[t.privateName]=this[t.privateName]||new t.ListClass,this[t.privateName])}}),M.prototype.crossorigin=M.prototype.crossOrigin,M.players={};Zi=window.navigator;M.prototype.options_={techOrder:j.defaultTechOrder_,html5:{},enableSourceset:!0,inactivityTimeout:2e3,playbackRates:[],liveui:!1,children:["mediaLoader","posterImage","titleBar","textTrackDisplay","loadingSpinner","bigPlayButton","liveTracker","controlBar","errorDisplay","textTrackSettings","resizeManager"],language:Zi&&(Zi.languages&&Zi.languages[0]||Zi.userLanguage||Zi.language)||"en",languages:{},notSupportedMessage:"No compatible source was found for this media.",normalizeAutoplay:!1,fullscreen:{options:{navigationUI:"hide"}},breakpoints:{},responsive:!1,audioOnlyMode:!1,audioPosterMode:!1,enableSmoothSeeking:!1},yr.forEach(function(e){M.prototype[`handleTech${f(e)}_`]=function(){return this.trigger(e)}}),T.registerComponent("Player",M);function Cr(t,s){function i(){Ir(this,{name:t,plugin:s,instance:null},!0);var e=s.apply(this,arguments);return Pr(this,t),Ir(this,{name:t,plugin:s,instance:e}),e}return Object.keys(s).forEach(function(e){i[e]=s[e]}),i}const wr="plugin",Er="activePlugins_",Sr={},xr=e=>Sr.hasOwnProperty(e),jr=e=>xr(e)?Sr[e]:void 0,Pr=(e,t)=>{e[Er]=e[Er]||{},e[Er][t]=!0},Ir=(e,t,s)=>{s=(s?"before":"")+"pluginsetup";e.trigger(s,t),e.trigger(s+":"+t.name,t)},Mr=(s,i)=>(i.prototype.name=s,function(...e){Ir(this,{name:s,plugin:i,instance:null},!0);const t=new i(this,...e);return this[s]=()=>t,Ir(this,t.getEventHash()),t});class O{constructor(e){if(this.constructor===O)throw new Error("Plugin must be sub-classed; not directly instantiated.");this.player=e,this.log||(this.log=this.player.log.createLogger(this.name)),kt(this),delete this.trigger,wt(this,this.constructor.defaultState),Pr(e,this.name),this.dispose=this.dispose.bind(this),e.on("dispose",this.dispose)}version(){return this.constructor.VERSION}getEventHash(e={}){return e.name=this.name,e.plugin=this.constructor,e.instance=this,e}trigger(e,t={}){return lt(this.eventBusEl_,e,this.getEventHash(t))}handleStateChanged(e){}dispose(){var{name:e,player:t}=this;this.trigger("dispose"),this.off(),t.off("dispose",this.dispose),t[Er][e]=!1,this.player=this.state=null,t[e]=Mr(e,Sr[e])}static isBasic(e){e="string"==typeof e?jr(e):e;return"function"==typeof e&&!O.prototype.isPrototypeOf(e.prototype)}static registerPlugin(e,t){if("string"!=typeof e)throw new Error(`Illegal plugin name, "${e}", must be a string, was ${typeof e}.`);if(xr(e))l.warn(`A plugin named "${e}" already exists. You may want to avoid re-registering plugins!`);else if(M.prototype.hasOwnProperty(e))throw new Error(`Illegal plugin name, "${e}", cannot share a name with an existing player method!`);if("function"!=typeof t)throw new Error(`Illegal plugin for "${e}", must be a function, was ${typeof t}.`);return Sr[e]=t,e!==wr&&(O.isBasic(t)?M.prototype[e]=Cr(e,t):M.prototype[e]=Mr(e,t)),t}static deregisterPlugin(e){if(e===wr)throw new Error("Cannot de-register base plugin.");xr(e)&&(delete Sr[e],delete M.prototype[e])}static getPlugins(e=Object.keys(Sr)){let s;return e.forEach(e=>{var t=jr(e);t&&((s=s||{})[e]=t)}),s}static getPluginVersion(e){e=jr(e);return e&&e.VERSION||""}}function A(e,s,i,r){{var n=s+` is deprecated and will be removed in ${e}.0; please use ${i} instead.`,a=r;let t=!1;return function(...e){return t||l.warn(n),t=!0,a.apply(this,e)}}}O.getPlugin=jr,O.BASE_PLUGIN_NAME=wr,O.registerPlugin(wr,O),M.prototype.usingPlugin=function(e){return!!this[Er]&&!0===this[Er][e]},M.prototype.hasPlugin=function(e){return!!xr(e)};const Or=e=>0===e.indexOf("#")?e.slice(1):e;function L(e,t,s){let i=L.getPlayer(e);if(i)t&&l.warn(`Player "${e}" is already initialised. Options will not be applied.`),s&&i.ready(s);else{const r="string"==typeof e?Ke("#"+Or(e)):e;if(!be(r))throw new TypeError("The element or ID supplied is not valid. (videojs)");e="getRootNode"in r&&r.getRootNode()instanceof window.ShadowRoot?r.getRootNode():r.ownerDocument.body,e=(r.ownerDocument.defaultView&&e.contains(r)||l.warn("The element supplied is not included in the DOM"),!0===(t=t||{}).restoreEl&&(t.restoreEl=(r.parentNode&&r.parentNode.hasAttribute("data-vjs-player")?r.parentNode:r).cloneNode(!0)),B("beforesetup").forEach(e=>{e=e(r,h(t));!n(e)||Array.isArray(e)?l.error("please return an object in beforesetup hooks"):t=h(t,e)}),T.getComponent("Player"));i=new e(r,t,s),B("setup").forEach(e=>e(i))}return i}return L.hooks_=s,L.hooks=B,L.hook=function(e,t){B(e,t)},L.hookOnce=function(i,e){B(i,[].concat(e).map(t=>{const s=(...e)=>(R(i,s),t(...e));return s}))},L.removeHook=R,!0!==window.VIDEOJS_NO_DYNAMIC_STYLE&&fe()&&!(Wi=Ke(".vjs-styles-defaults"))&&(Wi=tt("vjs-styles-defaults"),(Ji=Ke("head"))&&Ji.insertBefore(Wi,Ji.firstChild),st(Wi,`
+      .video-js {
+        width: 300px;
+        height: 150px;
+      }
+
+      .vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: 56.25%
+      }
+    `)),Ze(1,L),L.VERSION=D,L.options=M.prototype.options_,L.getPlayers=()=>M.players,L.getPlayer=e=>{var t=M.players;let s;if("string"==typeof e){var i=Or(e),r=t[i];if(r)return r;s=Ke("#"+i)}else s=e;if(be(s)){var{player:r,playerId:i}=s;if(r||t[i])return r||t[i]}},L.getAllPlayers=()=>Object.keys(M.players).map(e=>M.players[e]).filter(Boolean),L.players=M.players,L.getComponent=T.getComponent,L.registerComponent=(e,t)=>(j.isTech(t)&&l.warn(`The ${e} tech was registered as a component. It should instead be registered using videojs.registerTech(name, tech)`),T.registerComponent.call(T,e,t)),L.getTech=j.getTech,L.registerTech=j.registerTech,L.use=function(e,t){Es[e]=Es[e]||[],Es[e].push(t)},Object.defineProperty(L,"middleware",{value:{},writeable:!1,enumerable:!0}),Object.defineProperty(L.middleware,"TERMINATOR",{value:xs,writeable:!1,enumerable:!0}),L.browser=_e,L.obj=Q,L.mergeOptions=A(9,"videojs.mergeOptions","videojs.obj.merge",h),L.defineLazyProperty=A(9,"videojs.defineLazyProperty","videojs.obj.defineLazyProperty",Y),L.bind=A(9,"videojs.bind","native Function.prototype.bind",y),L.registerPlugin=O.registerPlugin,L.deregisterPlugin=O.deregisterPlugin,L.plugin=(e,t)=>(l.warn("videojs.plugin() is deprecated; use videojs.registerPlugin() instead"),O.registerPlugin(e,t)),L.getPlugins=O.getPlugins,L.getPlugin=O.getPlugin,L.getPluginVersion=O.getPluginVersion,L.addLanguage=function(e,t){return e=(""+e).toLowerCase(),L.options.languages=h(L.options.languages,{[e]:t}),L.options.languages[e]},L.log=l,L.createLogger=$,L.time=Dt,L.createTimeRange=A(9,"videojs.createTimeRange","videojs.time.createTimeRanges",k),L.createTimeRanges=A(9,"videojs.createTimeRanges","videojs.time.createTimeRanges",k),L.formatTime=A(9,"videojs.formatTime","videojs.time.formatTime",Nt),L.setFormatTime=A(9,"videojs.setFormatTime","videojs.time.setFormatTime",At),L.resetFormatTime=A(9,"videojs.resetFormatTime","videojs.time.resetFormatTime",Lt),L.parseUrl=A(9,"videojs.parseUrl","videojs.url.parseUrl",ts),L.isCrossOrigin=A(9,"videojs.isCrossOrigin","videojs.url.isCrossOrigin",is),L.EventTarget=i,L.any=ct,L.on=m,L.one=ht,L.off=_,L.trigger=lt,L.xhr=ds,L.TextTrack=fs,L.AudioTrack=bs,L.VideoTrack=Ts,["isEl","isTextNode","createEl","hasClass","addClass","removeClass","toggleClass","setAttributes","getAttributes","emptyEl","appendContent","insertContent"].forEach(e=>{L[e]=function(){return l.warn(`videojs.${e}() is deprecated; use videojs.dom.${e}() instead`),Xe[e].apply(null,arguments)}}),L.computedStyle=A(9,"videojs.computedStyle","videojs.dom.computedStyle",We),L.dom=Xe,L.fn=e,L.num=t,L.str=xt,L.url=ns,L.Error={UnsupportedSidxContainer:"unsupported-sidx-container-error",DashManifestSidxParsingError:"dash-manifest-sidx-parsing-error",HlsPlaylistRequestError:"hls-playlist-request-error",SegmentUnsupportedMediaFormat:"segment-unsupported-media-format-error",UnsupportedMediaInitialization:"unsupported-media-initialization-error",SegmentSwitchError:"segment-switch-error",SegmentExceedsSourceBufferQuota:"segment-exceeds-source-buffer-quota-error",SegmentAppendError:"segment-append-error",VttLoadError:"vtt-load-error",VttCueParsingError:"vtt-cue-parsing-error",AdsBeforePrerollError:"ads-before-preroll-error",AdsPrerollError:"ads-preroll-error",AdsMidrollError:"ads-midroll-error",AdsPostrollError:"ads-postroll-error",AdsMacroReplacementFailed:"ads-macro-replacement-failed",AdsResumeContentFailed:"ads-resume-content-failed",EMEFailedToRequestMediaKeySystemAccess:"eme-failed-request-media-key-system-access",EMEFailedToCreateMediaKeys:"eme-failed-create-media-keys",EMEFailedToAttachMediaKeysToVideoElement:"eme-failed-attach-media-keys-to-video",EMEFailedToCreateMediaKeySession:"eme-failed-create-media-key-session",EMEFailedToSetServerCertificate:"eme-failed-set-server-certificate",EMEFailedToGenerateLicenseRequest:"eme-failed-generate-license-request",EMEFailedToUpdateSessionWithReceivedLicenseKeys:"eme-failed-update-session",EMEFailedToCloseSession:"eme-failed-close-session",EMEFailedToRemoveKeysFromSession:"eme-failed-remove-keys",EMEFailedToLoadSessionBySessionId:"eme-failed-load-session"},L});
\ No newline at end of file
diff --git a/priv/static/video.js/alt/video.debug.js b/priv/static/video.js/alt/video.debug.js
new file mode 100644
index 0000000..0a687f7
--- /dev/null
+++ b/priv/static/video.js/alt/video.debug.js
@@ -0,0 +1,65227 @@
+/**
+ * @license
+ * Video.js 8.12.0 <http://videojs.com/>
+ * Copyright Brightcove, Inc. <https://www.brightcove.com/>
+ * Available under Apache License Version 2.0
+ * <https://github.com/videojs/video.js/blob/main/LICENSE>
+ *
+ * Includes vtt.js <https://github.com/mozilla/vtt.js>
+ * Available under Apache License Version 2.0
+ * <https://github.com/mozilla/vtt.js/blob/main/LICENSE>
+ */
+
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojs = factory());
+})(this, (function () { 'use strict';
+
+  var version$5 = "8.12.0";
+
+  /**
+   * An Object that contains lifecycle hooks as keys which point to an array
+   * of functions that are run when a lifecycle is triggered
+   *
+   * @private
+   */
+  const hooks_ = {};
+
+  /**
+   * Get a list of hooks for a specific lifecycle
+   *
+   * @param  {string} type
+   *         the lifecycle to get hooks from
+   *
+   * @param  {Function|Function[]} [fn]
+   *         Optionally add a hook (or hooks) to the lifecycle that your are getting.
+   *
+   * @return {Array}
+   *         an array of hooks, or an empty array if there are none.
+   */
+  const hooks = function (type, fn) {
+    hooks_[type] = hooks_[type] || [];
+    if (fn) {
+      hooks_[type] = hooks_[type].concat(fn);
+    }
+    return hooks_[type];
+  };
+
+  /**
+   * Add a function hook to a specific videojs lifecycle.
+   *
+   * @param {string} type
+   *        the lifecycle to hook the function to.
+   *
+   * @param {Function|Function[]}
+   *        The function or array of functions to attach.
+   */
+  const hook = function (type, fn) {
+    hooks(type, fn);
+  };
+
+  /**
+   * Remove a hook from a specific videojs lifecycle.
+   *
+   * @param  {string} type
+   *         the lifecycle that the function hooked to
+   *
+   * @param  {Function} fn
+   *         The hooked function to remove
+   *
+   * @return {boolean}
+   *         The function that was removed or undef
+   */
+  const removeHook = function (type, fn) {
+    const index = hooks(type).indexOf(fn);
+    if (index <= -1) {
+      return false;
+    }
+    hooks_[type] = hooks_[type].slice();
+    hooks_[type].splice(index, 1);
+    return true;
+  };
+
+  /**
+   * Add a function hook that will only run once to a specific videojs lifecycle.
+   *
+   * @param {string} type
+   *        the lifecycle to hook the function to.
+   *
+   * @param {Function|Function[]}
+   *        The function or array of functions to attach.
+   */
+  const hookOnce = function (type, fn) {
+    hooks(type, [].concat(fn).map(original => {
+      const wrapper = (...args) => {
+        removeHook(type, wrapper);
+        return original(...args);
+      };
+      return wrapper;
+    }));
+  };
+
+  /**
+   * @file fullscreen-api.js
+   * @module fullscreen-api
+   */
+
+  /**
+   * Store the browser-specific methods for the fullscreen API.
+   *
+   * @type {Object}
+   * @see [Specification]{@link https://fullscreen.spec.whatwg.org}
+   * @see [Map Approach From Screenfull.js]{@link https://github.com/sindresorhus/screenfull.js}
+   */
+  const FullscreenApi = {
+    prefixed: true
+  };
+
+  // browser API methods
+  const apiMap = [['requestFullscreen', 'exitFullscreen', 'fullscreenElement', 'fullscreenEnabled', 'fullscreenchange', 'fullscreenerror', 'fullscreen'],
+  // WebKit
+  ['webkitRequestFullscreen', 'webkitExitFullscreen', 'webkitFullscreenElement', 'webkitFullscreenEnabled', 'webkitfullscreenchange', 'webkitfullscreenerror', '-webkit-full-screen']];
+  const specApi = apiMap[0];
+  let browserApi;
+
+  // determine the supported set of functions
+  for (let i = 0; i < apiMap.length; i++) {
+    // check for exitFullscreen function
+    if (apiMap[i][1] in document) {
+      browserApi = apiMap[i];
+      break;
+    }
+  }
+
+  // map the browser API names to the spec API names
+  if (browserApi) {
+    for (let i = 0; i < browserApi.length; i++) {
+      FullscreenApi[specApi[i]] = browserApi[i];
+    }
+    FullscreenApi.prefixed = browserApi[0] !== specApi[0];
+  }
+
+  /**
+   * @file create-logger.js
+   * @module create-logger
+   */
+
+  // This is the private tracking variable for the logging history.
+  let history = [];
+
+  /**
+   * Log messages to the console and history based on the type of message
+   *
+   * @private
+   * @param  {string} name
+   *         The name of the console method to use.
+   *
+   * @param  {Object} log
+   *         The arguments to be passed to the matching console method.
+   *
+   * @param {string} [styles]
+   *        styles for name
+   */
+  const LogByTypeFactory = (name, log, styles) => (type, level, args) => {
+    const lvl = log.levels[level];
+    const lvlRegExp = new RegExp(`^(${lvl})$`);
+    let resultName = name;
+    if (type !== 'log') {
+      // Add the type to the front of the message when it's not "log".
+      args.unshift(type.toUpperCase() + ':');
+    }
+    if (styles) {
+      resultName = `%c${name}`;
+      args.unshift(styles);
+    }
+
+    // Add console prefix after adding to history.
+    args.unshift(resultName + ':');
+
+    // Add a clone of the args at this point to history.
+    if (history) {
+      history.push([].concat(args));
+
+      // only store 1000 history entries
+      const splice = history.length - 1000;
+      history.splice(0, splice > 0 ? splice : 0);
+    }
+
+    // If there's no console then don't try to output messages, but they will
+    // still be stored in history.
+    if (!window.console) {
+      return;
+    }
+
+    // Was setting these once outside of this function, but containing them
+    // in the function makes it easier to test cases where console doesn't exist
+    // when the module is executed.
+    let fn = window.console[type];
+    if (!fn && type === 'debug') {
+      // Certain browsers don't have support for console.debug. For those, we
+      // should default to the closest comparable log.
+      fn = window.console.info || window.console.log;
+    }
+
+    // Bail out if there's no console or if this type is not allowed by the
+    // current logging level.
+    if (!fn || !lvl || !lvlRegExp.test(type)) {
+      return;
+    }
+    fn[Array.isArray(args) ? 'apply' : 'call'](window.console, args);
+  };
+  function createLogger$1(name, delimiter = ':', styles = '') {
+    // This is the private tracking variable for logging level.
+    let level = 'info';
+
+    // the curried logByType bound to the specific log and history
+    let logByType;
+
+    /**
+     * Logs plain debug messages. Similar to `console.log`.
+     *
+     * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+     * of our JSDoc template, we cannot properly document this as both a function
+     * and a namespace, so its function signature is documented here.
+     *
+     * #### Arguments
+     * ##### *args
+     * *[]
+     *
+     * Any combination of values that could be passed to `console.log()`.
+     *
+     * #### Return Value
+     *
+     * `undefined`
+     *
+     * @namespace
+     * @param    {...*} args
+     *           One or more messages or objects that should be logged.
+     */
+    const log = function (...args) {
+      logByType('log', level, args);
+    };
+
+    // This is the logByType helper that the logging methods below use
+    logByType = LogByTypeFactory(name, log, styles);
+
+    /**
+     * Create a new subLogger which chains the old name to the new name.
+     *
+     * For example, doing `videojs.log.createLogger('player')` and then using that logger will log the following:
+     * ```js
+     *  mylogger('foo');
+     *  // > VIDEOJS: player: foo
+     * ```
+     *
+     * @param {string} subName
+     *        The name to add call the new logger
+     * @param {string} [subDelimiter]
+     *        Optional delimiter
+     * @param {string} [subStyles]
+     *        Optional styles
+     * @return {Object}
+     */
+    log.createLogger = (subName, subDelimiter, subStyles) => {
+      const resultDelimiter = subDelimiter !== undefined ? subDelimiter : delimiter;
+      const resultStyles = subStyles !== undefined ? subStyles : styles;
+      const resultName = `${name} ${resultDelimiter} ${subName}`;
+      return createLogger$1(resultName, resultDelimiter, resultStyles);
+    };
+
+    /**
+     * Create a new logger.
+     *
+     * @param {string} newName
+     *        The name for the new logger
+     * @param {string} [newDelimiter]
+     *        Optional delimiter
+     * @param {string} [newStyles]
+     *        Optional styles
+     * @return {Object}
+     */
+    log.createNewLogger = (newName, newDelimiter, newStyles) => {
+      return createLogger$1(newName, newDelimiter, newStyles);
+    };
+
+    /**
+     * Enumeration of available logging levels, where the keys are the level names
+     * and the values are `|`-separated strings containing logging methods allowed
+     * in that logging level. These strings are used to create a regular expression
+     * matching the function name being called.
+     *
+     * Levels provided by Video.js are:
+     *
+     * - `off`: Matches no calls. Any value that can be cast to `false` will have
+     *   this effect. The most restrictive.
+     * - `all`: Matches only Video.js-provided functions (`debug`, `log`,
+     *   `log.warn`, and `log.error`).
+     * - `debug`: Matches `log.debug`, `log`, `log.warn`, and `log.error` calls.
+     * - `info` (default): Matches `log`, `log.warn`, and `log.error` calls.
+     * - `warn`: Matches `log.warn` and `log.error` calls.
+     * - `error`: Matches only `log.error` calls.
+     *
+     * @type {Object}
+     */
+    log.levels = {
+      all: 'debug|log|warn|error',
+      off: '',
+      debug: 'debug|log|warn|error',
+      info: 'log|warn|error',
+      warn: 'warn|error',
+      error: 'error',
+      DEFAULT: level
+    };
+
+    /**
+     * Get or set the current logging level.
+     *
+     * If a string matching a key from {@link module:log.levels} is provided, acts
+     * as a setter.
+     *
+     * @param  {'all'|'debug'|'info'|'warn'|'error'|'off'} [lvl]
+     *         Pass a valid level to set a new logging level.
+     *
+     * @return {string}
+     *         The current logging level.
+     */
+    log.level = lvl => {
+      if (typeof lvl === 'string') {
+        if (!log.levels.hasOwnProperty(lvl)) {
+          throw new Error(`"${lvl}" in not a valid log level`);
+        }
+        level = lvl;
+      }
+      return level;
+    };
+
+    /**
+     * Returns an array containing everything that has been logged to the history.
+     *
+     * This array is a shallow clone of the internal history record. However, its
+     * contents are _not_ cloned; so, mutating objects inside this array will
+     * mutate them in history.
+     *
+     * @return {Array}
+     */
+    log.history = () => history ? [].concat(history) : [];
+
+    /**
+     * Allows you to filter the history by the given logger name
+     *
+     * @param {string} fname
+     *        The name to filter by
+     *
+     * @return {Array}
+     *         The filtered list to return
+     */
+    log.history.filter = fname => {
+      return (history || []).filter(historyItem => {
+        // if the first item in each historyItem includes `fname`, then it's a match
+        return new RegExp(`.*${fname}.*`).test(historyItem[0]);
+      });
+    };
+
+    /**
+     * Clears the internal history tracking, but does not prevent further history
+     * tracking.
+     */
+    log.history.clear = () => {
+      if (history) {
+        history.length = 0;
+      }
+    };
+
+    /**
+     * Disable history tracking if it is currently enabled.
+     */
+    log.history.disable = () => {
+      if (history !== null) {
+        history.length = 0;
+        history = null;
+      }
+    };
+
+    /**
+     * Enable history tracking if it is currently disabled.
+     */
+    log.history.enable = () => {
+      if (history === null) {
+        history = [];
+      }
+    };
+
+    /**
+     * Logs error messages. Similar to `console.error`.
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as an error
+     */
+    log.error = (...args) => logByType('error', level, args);
+
+    /**
+     * Logs warning messages. Similar to `console.warn`.
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as a warning.
+     */
+    log.warn = (...args) => logByType('warn', level, args);
+
+    /**
+     * Logs debug messages. Similar to `console.debug`, but may also act as a comparable
+     * log if `console.debug` is not available
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as debug.
+     */
+    log.debug = (...args) => logByType('debug', level, args);
+    return log;
+  }
+
+  /**
+   * @file log.js
+   * @module log
+   */
+  const log$1 = createLogger$1('VIDEOJS');
+  const createLogger = log$1.createLogger;
+
+  /**
+   * @file obj.js
+   * @module obj
+   */
+
+  /**
+   * @callback obj:EachCallback
+   *
+   * @param {*} value
+   *        The current key for the object that is being iterated over.
+   *
+   * @param {string} key
+   *        The current key-value for object that is being iterated over
+   */
+
+  /**
+   * @callback obj:ReduceCallback
+   *
+   * @param {*} accum
+   *        The value that is accumulating over the reduce loop.
+   *
+   * @param {*} value
+   *        The current key for the object that is being iterated over.
+   *
+   * @param {string} key
+   *        The current key-value for object that is being iterated over
+   *
+   * @return {*}
+   *         The new accumulated value.
+   */
+  const toString$1 = Object.prototype.toString;
+
+  /**
+   * Get the keys of an Object
+   *
+   * @param {Object}
+   *        The Object to get the keys from
+   *
+   * @return {string[]}
+   *         An array of the keys from the object. Returns an empty array if the
+   *         object passed in was invalid or had no keys.
+   *
+   * @private
+   */
+  const keys = function (object) {
+    return isObject$1(object) ? Object.keys(object) : [];
+  };
+
+  /**
+   * Array-like iteration for objects.
+   *
+   * @param {Object} object
+   *        The object to iterate over
+   *
+   * @param {obj:EachCallback} fn
+   *        The callback function which is called for each key in the object.
+   */
+  function each(object, fn) {
+    keys(object).forEach(key => fn(object[key], key));
+  }
+
+  /**
+   * Array-like reduce for objects.
+   *
+   * @param {Object} object
+   *        The Object that you want to reduce.
+   *
+   * @param {Function} fn
+   *         A callback function which is called for each key in the object. It
+   *         receives the accumulated value and the per-iteration value and key
+   *         as arguments.
+   *
+   * @param {*} [initial = 0]
+   *        Starting value
+   *
+   * @return {*}
+   *         The final accumulated value.
+   */
+  function reduce(object, fn, initial = 0) {
+    return keys(object).reduce((accum, key) => fn(accum, object[key], key), initial);
+  }
+
+  /**
+   * Returns whether a value is an object of any kind - including DOM nodes,
+   * arrays, regular expressions, etc. Not functions, though.
+   *
+   * This avoids the gotcha where using `typeof` on a `null` value
+   * results in `'object'`.
+   *
+   * @param  {Object} value
+   * @return {boolean}
+   */
+  function isObject$1(value) {
+    return !!value && typeof value === 'object';
+  }
+
+  /**
+   * Returns whether an object appears to be a "plain" object - that is, a
+   * direct instance of `Object`.
+   *
+   * @param  {Object} value
+   * @return {boolean}
+   */
+  function isPlain(value) {
+    return isObject$1(value) && toString$1.call(value) === '[object Object]' && value.constructor === Object;
+  }
+
+  /**
+   * Merge two objects recursively.
+   *
+   * Performs a deep merge like
+   * {@link https://lodash.com/docs/4.17.10#merge|lodash.merge}, but only merges
+   * plain objects (not arrays, elements, or anything else).
+   *
+   * Non-plain object values will be copied directly from the right-most
+   * argument.
+   *
+   * @param   {Object[]} sources
+   *          One or more objects to merge into a new object.
+   *
+   * @return {Object}
+   *          A new object that is the merged result of all sources.
+   */
+  function merge$2(...sources) {
+    const result = {};
+    sources.forEach(source => {
+      if (!source) {
+        return;
+      }
+      each(source, (value, key) => {
+        if (!isPlain(value)) {
+          result[key] = value;
+          return;
+        }
+        if (!isPlain(result[key])) {
+          result[key] = {};
+        }
+        result[key] = merge$2(result[key], value);
+      });
+    });
+    return result;
+  }
+
+  /**
+   * Returns an array of values for a given object
+   *
+   * @param  {Object} source - target object
+   * @return {Array<unknown>} - object values
+   */
+  function values$1(source = {}) {
+    const result = [];
+    for (const key in source) {
+      if (source.hasOwnProperty(key)) {
+        const value = source[key];
+        result.push(value);
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Object.defineProperty but "lazy", which means that the value is only set after
+   * it is retrieved the first time, rather than being set right away.
+   *
+   * @param {Object} obj the object to set the property on
+   * @param {string} key the key for the property to set
+   * @param {Function} getValue the function used to get the value when it is needed.
+   * @param {boolean} setter whether a setter should be allowed or not
+   */
+  function defineLazyProperty(obj, key, getValue, setter = true) {
+    const set = value => Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      writable: true
+    });
+    const options = {
+      configurable: true,
+      enumerable: true,
+      get() {
+        const value = getValue();
+        set(value);
+        return value;
+      }
+    };
+    if (setter) {
+      options.set = set;
+    }
+    return Object.defineProperty(obj, key, options);
+  }
+
+  var Obj = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    each: each,
+    reduce: reduce,
+    isObject: isObject$1,
+    isPlain: isPlain,
+    merge: merge$2,
+    values: values$1,
+    defineLazyProperty: defineLazyProperty
+  });
+
+  /**
+   * @file browser.js
+   * @module browser
+   */
+
+  /**
+   * Whether or not this device is an iPod.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_IPOD = false;
+
+  /**
+   * The detected iOS version - or `null`.
+   *
+   * @static
+   * @type {string|null}
+   */
+  let IOS_VERSION = null;
+
+  /**
+   * Whether or not this is an Android device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_ANDROID = false;
+
+  /**
+   * The detected Android version - or `null` if not Android or indeterminable.
+   *
+   * @static
+   * @type {number|string|null}
+   */
+  let ANDROID_VERSION;
+
+  /**
+   * Whether or not this is Mozilla Firefox.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_FIREFOX = false;
+
+  /**
+   * Whether or not this is Microsoft Edge.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_EDGE = false;
+
+  /**
+   * Whether or not this is any Chromium Browser
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_CHROMIUM = false;
+
+  /**
+   * Whether or not this is any Chromium browser that is not Edge.
+   *
+   * This will also be `true` for Chrome on iOS, which will have different support
+   * as it is actually Safari under the hood.
+   *
+   * Deprecated, as the behaviour to not match Edge was to prevent Legacy Edge's UA matching.
+   * IS_CHROMIUM should be used instead.
+   * "Chromium but not Edge" could be explicitly tested with IS_CHROMIUM && !IS_EDGE
+   *
+   * @static
+   * @deprecated
+   * @type {Boolean}
+   */
+  let IS_CHROME = false;
+
+  /**
+   * The detected Chromium version - or `null`.
+   *
+   * @static
+   * @type {number|null}
+   */
+  let CHROMIUM_VERSION = null;
+
+  /**
+   * The detected Google Chrome version - or `null`.
+   * This has always been the _Chromium_ version, i.e. would return on Chromium Edge.
+   * Deprecated, use CHROMIUM_VERSION instead.
+   *
+   * @static
+   * @deprecated
+   * @type {number|null}
+   */
+  let CHROME_VERSION = null;
+
+  /**
+   * The detected Internet Explorer version - or `null`.
+   *
+   * @static
+   * @deprecated
+   * @type {number|null}
+   */
+  let IE_VERSION = null;
+
+  /**
+   * Whether or not this is desktop Safari.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_SAFARI = false;
+
+  /**
+   * Whether or not this is a Windows machine.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_WINDOWS = false;
+
+  /**
+   * Whether or not this device is an iPad.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_IPAD = false;
+
+  /**
+   * Whether or not this device is an iPhone.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  // The Facebook app's UIWebView identifies as both an iPhone and iPad, so
+  // to identify iPhones, we need to exclude iPads.
+  // http://artsy.github.io/blog/2012/10/18/the-perils-of-ios-user-agent-sniffing/
+  let IS_IPHONE = false;
+
+  /**
+   * Whether or not this is a Tizen device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_TIZEN = false;
+
+  /**
+   * Whether or not this is a WebOS device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_WEBOS = false;
+
+  /**
+   * Whether or not this is a Smart TV (Tizen or WebOS) device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_SMART_TV = false;
+
+  /**
+   * Whether or not this device is touch-enabled.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const TOUCH_ENABLED = Boolean(isReal() && ('ontouchstart' in window || window.navigator.maxTouchPoints || window.DocumentTouch && window.document instanceof window.DocumentTouch));
+  const UAD = window.navigator && window.navigator.userAgentData;
+  if (UAD && UAD.platform && UAD.brands) {
+    // If userAgentData is present, use it instead of userAgent to avoid warnings
+    // Currently only implemented on Chromium
+    // userAgentData does not expose Android version, so ANDROID_VERSION remains `null`
+
+    IS_ANDROID = UAD.platform === 'Android';
+    IS_EDGE = Boolean(UAD.brands.find(b => b.brand === 'Microsoft Edge'));
+    IS_CHROMIUM = Boolean(UAD.brands.find(b => b.brand === 'Chromium'));
+    IS_CHROME = !IS_EDGE && IS_CHROMIUM;
+    CHROMIUM_VERSION = CHROME_VERSION = (UAD.brands.find(b => b.brand === 'Chromium') || {}).version || null;
+    IS_WINDOWS = UAD.platform === 'Windows';
+  }
+
+  // If the browser is not Chromium, either userAgentData is not present which could be an old Chromium browser,
+  //  or it's a browser that has added userAgentData since that we don't have tests for yet. In either case,
+  // the checks need to be made agiainst the regular userAgent string.
+  if (!IS_CHROMIUM) {
+    const USER_AGENT = window.navigator && window.navigator.userAgent || '';
+    IS_IPOD = /iPod/i.test(USER_AGENT);
+    IOS_VERSION = function () {
+      const match = USER_AGENT.match(/OS (\d+)_/i);
+      if (match && match[1]) {
+        return match[1];
+      }
+      return null;
+    }();
+    IS_ANDROID = /Android/i.test(USER_AGENT);
+    ANDROID_VERSION = function () {
+      // This matches Android Major.Minor.Patch versions
+      // ANDROID_VERSION is Major.Minor as a Number, if Minor isn't available, then only Major is returned
+      const match = USER_AGENT.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i);
+      if (!match) {
+        return null;
+      }
+      const major = match[1] && parseFloat(match[1]);
+      const minor = match[2] && parseFloat(match[2]);
+      if (major && minor) {
+        return parseFloat(match[1] + '.' + match[2]);
+      } else if (major) {
+        return major;
+      }
+      return null;
+    }();
+    IS_FIREFOX = /Firefox/i.test(USER_AGENT);
+    IS_EDGE = /Edg/i.test(USER_AGENT);
+    IS_CHROMIUM = /Chrome/i.test(USER_AGENT) || /CriOS/i.test(USER_AGENT);
+    IS_CHROME = !IS_EDGE && IS_CHROMIUM;
+    CHROMIUM_VERSION = CHROME_VERSION = function () {
+      const match = USER_AGENT.match(/(Chrome|CriOS)\/(\d+)/);
+      if (match && match[2]) {
+        return parseFloat(match[2]);
+      }
+      return null;
+    }();
+    IE_VERSION = function () {
+      const result = /MSIE\s(\d+)\.\d/.exec(USER_AGENT);
+      let version = result && parseFloat(result[1]);
+      if (!version && /Trident\/7.0/i.test(USER_AGENT) && /rv:11.0/.test(USER_AGENT)) {
+        // IE 11 has a different user agent string than other IE versions
+        version = 11.0;
+      }
+      return version;
+    }();
+    IS_TIZEN = /Tizen/i.test(USER_AGENT);
+    IS_WEBOS = /Web0S/i.test(USER_AGENT);
+    IS_SMART_TV = IS_TIZEN || IS_WEBOS;
+    IS_SAFARI = /Safari/i.test(USER_AGENT) && !IS_CHROME && !IS_ANDROID && !IS_EDGE && !IS_SMART_TV;
+    IS_WINDOWS = /Windows/i.test(USER_AGENT);
+    IS_IPAD = /iPad/i.test(USER_AGENT) || IS_SAFARI && TOUCH_ENABLED && !/iPhone/i.test(USER_AGENT);
+    IS_IPHONE = /iPhone/i.test(USER_AGENT) && !IS_IPAD;
+  }
+
+  /**
+   * Whether or not this is an iOS device.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const IS_IOS = IS_IPHONE || IS_IPAD || IS_IPOD;
+
+  /**
+   * Whether or not this is any flavor of Safari - including iOS.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const IS_ANY_SAFARI = (IS_SAFARI || IS_IOS) && !IS_CHROME;
+
+  var browser = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    get IS_IPOD () { return IS_IPOD; },
+    get IOS_VERSION () { return IOS_VERSION; },
+    get IS_ANDROID () { return IS_ANDROID; },
+    get ANDROID_VERSION () { return ANDROID_VERSION; },
+    get IS_FIREFOX () { return IS_FIREFOX; },
+    get IS_EDGE () { return IS_EDGE; },
+    get IS_CHROMIUM () { return IS_CHROMIUM; },
+    get IS_CHROME () { return IS_CHROME; },
+    get CHROMIUM_VERSION () { return CHROMIUM_VERSION; },
+    get CHROME_VERSION () { return CHROME_VERSION; },
+    get IE_VERSION () { return IE_VERSION; },
+    get IS_SAFARI () { return IS_SAFARI; },
+    get IS_WINDOWS () { return IS_WINDOWS; },
+    get IS_IPAD () { return IS_IPAD; },
+    get IS_IPHONE () { return IS_IPHONE; },
+    get IS_TIZEN () { return IS_TIZEN; },
+    get IS_WEBOS () { return IS_WEBOS; },
+    get IS_SMART_TV () { return IS_SMART_TV; },
+    TOUCH_ENABLED: TOUCH_ENABLED,
+    IS_IOS: IS_IOS,
+    IS_ANY_SAFARI: IS_ANY_SAFARI
+  });
+
+  /**
+   * @file dom.js
+   * @module dom
+   */
+
+  /**
+   * Detect if a value is a string with any non-whitespace characters.
+   *
+   * @private
+   * @param  {string} str
+   *         The string to check
+   *
+   * @return {boolean}
+   *         Will be `true` if the string is non-blank, `false` otherwise.
+   *
+   */
+  function isNonBlankString(str) {
+    // we use str.trim as it will trim any whitespace characters
+    // from the front or back of non-whitespace characters. aka
+    // Any string that contains non-whitespace characters will
+    // still contain them after `trim` but whitespace only strings
+    // will have a length of 0, failing this check.
+    return typeof str === 'string' && Boolean(str.trim());
+  }
+
+  /**
+   * Throws an error if the passed string has whitespace. This is used by
+   * class methods to be relatively consistent with the classList API.
+   *
+   * @private
+   * @param  {string} str
+   *         The string to check for whitespace.
+   *
+   * @throws {Error}
+   *         Throws an error if there is whitespace in the string.
+   */
+  function throwIfWhitespace(str) {
+    // str.indexOf instead of regex because str.indexOf is faster performance wise.
+    if (str.indexOf(' ') >= 0) {
+      throw new Error('class has illegal whitespace characters');
+    }
+  }
+
+  /**
+   * Whether the current DOM interface appears to be real (i.e. not simulated).
+   *
+   * @return {boolean}
+   *         Will be `true` if the DOM appears to be real, `false` otherwise.
+   */
+  function isReal() {
+    // Both document and window will never be undefined thanks to `global`.
+    return document === window.document;
+  }
+
+  /**
+   * Determines, via duck typing, whether or not a value is a DOM element.
+   *
+   * @param  {*} value
+   *         The value to check.
+   *
+   * @return {boolean}
+   *         Will be `true` if the value is a DOM element, `false` otherwise.
+   */
+  function isEl(value) {
+    return isObject$1(value) && value.nodeType === 1;
+  }
+
+  /**
+   * Determines if the current DOM is embedded in an iframe.
+   *
+   * @return {boolean}
+   *         Will be `true` if the DOM is embedded in an iframe, `false`
+   *         otherwise.
+   */
+  function isInFrame() {
+    // We need a try/catch here because Safari will throw errors when attempting
+    // to get either `parent` or `self`
+    try {
+      return window.parent !== window.self;
+    } catch (x) {
+      return true;
+    }
+  }
+
+  /**
+   * Creates functions to query the DOM using a given method.
+   *
+   * @private
+   * @param   {string} method
+   *          The method to create the query with.
+   *
+   * @return  {Function}
+   *          The query method
+   */
+  function createQuerier(method) {
+    return function (selector, context) {
+      if (!isNonBlankString(selector)) {
+        return document[method](null);
+      }
+      if (isNonBlankString(context)) {
+        context = document.querySelector(context);
+      }
+      const ctx = isEl(context) ? context : document;
+      return ctx[method] && ctx[method](selector);
+    };
+  }
+
+  /**
+   * Creates an element and applies properties, attributes, and inserts content.
+   *
+   * @param  {string} [tagName='div']
+   *         Name of tag to be created.
+   *
+   * @param  {Object} [properties={}]
+   *         Element properties to be applied.
+   *
+   * @param  {Object} [attributes={}]
+   *         Element attributes to be applied.
+   *
+   * @param {ContentDescriptor} [content]
+   *        A content descriptor object.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  function createEl(tagName = 'div', properties = {}, attributes = {}, content) {
+    const el = document.createElement(tagName);
+    Object.getOwnPropertyNames(properties).forEach(function (propName) {
+      const val = properties[propName];
+
+      // Handle textContent since it's not supported everywhere and we have a
+      // method for it.
+      if (propName === 'textContent') {
+        textContent(el, val);
+      } else if (el[propName] !== val || propName === 'tabIndex') {
+        el[propName] = val;
+      }
+    });
+    Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
+      el.setAttribute(attrName, attributes[attrName]);
+    });
+    if (content) {
+      appendContent(el, content);
+    }
+    return el;
+  }
+
+  /**
+   * Injects text into an element, replacing any existing contents entirely.
+   *
+   * @param  {HTMLElement} el
+   *         The element to add text content into
+   *
+   * @param  {string} text
+   *         The text content to add.
+   *
+   * @return {Element}
+   *         The element with added text content.
+   */
+  function textContent(el, text) {
+    if (typeof el.textContent === 'undefined') {
+      el.innerText = text;
+    } else {
+      el.textContent = text;
+    }
+    return el;
+  }
+
+  /**
+   * Insert an element as the first child node of another
+   *
+   * @param {Element} child
+   *        Element to insert
+   *
+   * @param {Element} parent
+   *        Element to insert child into
+   */
+  function prependTo(child, parent) {
+    if (parent.firstChild) {
+      parent.insertBefore(child, parent.firstChild);
+    } else {
+      parent.appendChild(child);
+    }
+  }
+
+  /**
+   * Check if an element has a class name.
+   *
+   * @param  {Element} element
+   *         Element to check
+   *
+   * @param  {string} classToCheck
+   *         Class name to check for
+   *
+   * @return {boolean}
+   *         Will be `true` if the element has a class, `false` otherwise.
+   *
+   * @throws {Error}
+   *         Throws an error if `classToCheck` has white space.
+   */
+  function hasClass(element, classToCheck) {
+    throwIfWhitespace(classToCheck);
+    return element.classList.contains(classToCheck);
+  }
+
+  /**
+   * Add a class name to an element.
+   *
+   * @param  {Element} element
+   *         Element to add class name to.
+   *
+   * @param  {...string} classesToAdd
+   *         One or more class name to add.
+   *
+   * @return {Element}
+   *         The DOM element with the added class name.
+   */
+  function addClass(element, ...classesToAdd) {
+    element.classList.add(...classesToAdd.reduce((prev, current) => prev.concat(current.split(/\s+/)), []));
+    return element;
+  }
+
+  /**
+   * Remove a class name from an element.
+   *
+   * @param  {Element} element
+   *         Element to remove a class name from.
+   *
+   * @param  {...string} classesToRemove
+   *         One or more class name to remove.
+   *
+   * @return {Element}
+   *         The DOM element with class name removed.
+   */
+  function removeClass(element, ...classesToRemove) {
+    // Protect in case the player gets disposed
+    if (!element) {
+      log$1.warn("removeClass was called with an element that doesn't exist");
+      return null;
+    }
+    element.classList.remove(...classesToRemove.reduce((prev, current) => prev.concat(current.split(/\s+/)), []));
+    return element;
+  }
+
+  /**
+   * The callback definition for toggleClass.
+   *
+   * @callback module:dom~PredicateCallback
+   * @param    {Element} element
+   *           The DOM element of the Component.
+   *
+   * @param    {string} classToToggle
+   *           The `className` that wants to be toggled
+   *
+   * @return   {boolean|undefined}
+   *           If `true` is returned, the `classToToggle` will be added to the
+   *           `element`. If `false`, the `classToToggle` will be removed from
+   *           the `element`. If `undefined`, the callback will be ignored.
+   */
+
+  /**
+   * Adds or removes a class name to/from an element depending on an optional
+   * condition or the presence/absence of the class name.
+   *
+   * @param  {Element} element
+   *         The element to toggle a class name on.
+   *
+   * @param  {string} classToToggle
+   *         The class that should be toggled.
+   *
+   * @param  {boolean|module:dom~PredicateCallback} [predicate]
+   *         See the return value for {@link module:dom~PredicateCallback}
+   *
+   * @return {Element}
+   *         The element with a class that has been toggled.
+   */
+  function toggleClass(element, classToToggle, predicate) {
+    if (typeof predicate === 'function') {
+      predicate = predicate(element, classToToggle);
+    }
+    if (typeof predicate !== 'boolean') {
+      predicate = undefined;
+    }
+    classToToggle.split(/\s+/).forEach(className => element.classList.toggle(className, predicate));
+    return element;
+  }
+
+  /**
+   * Apply attributes to an HTML element.
+   *
+   * @param {Element} el
+   *        Element to add attributes to.
+   *
+   * @param {Object} [attributes]
+   *        Attributes to be applied.
+   */
+  function setAttributes(el, attributes) {
+    Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
+      const attrValue = attributes[attrName];
+      if (attrValue === null || typeof attrValue === 'undefined' || attrValue === false) {
+        el.removeAttribute(attrName);
+      } else {
+        el.setAttribute(attrName, attrValue === true ? '' : attrValue);
+      }
+    });
+  }
+
+  /**
+   * Get an element's attribute values, as defined on the HTML tag.
+   *
+   * Attributes are not the same as properties. They're defined on the tag
+   * or with setAttribute.
+   *
+   * @param  {Element} tag
+   *         Element from which to get tag attributes.
+   *
+   * @return {Object}
+   *         All attributes of the element. Boolean attributes will be `true` or
+   *         `false`, others will be strings.
+   */
+  function getAttributes(tag) {
+    const obj = {};
+
+    // known boolean attributes
+    // we can check for matching boolean properties, but not all browsers
+    // and not all tags know about these attributes, so, we still want to check them manually
+    const knownBooleans = ['autoplay', 'controls', 'playsinline', 'loop', 'muted', 'default', 'defaultMuted'];
+    if (tag && tag.attributes && tag.attributes.length > 0) {
+      const attrs = tag.attributes;
+      for (let i = attrs.length - 1; i >= 0; i--) {
+        const attrName = attrs[i].name;
+        /** @type {boolean|string} */
+        let attrVal = attrs[i].value;
+
+        // check for known booleans
+        // the matching element property will return a value for typeof
+        if (knownBooleans.includes(attrName)) {
+          // the value of an included boolean attribute is typically an empty
+          // string ('') which would equal false if we just check for a false value.
+          // we also don't want support bad code like autoplay='false'
+          attrVal = attrVal !== null ? true : false;
+        }
+        obj[attrName] = attrVal;
+      }
+    }
+    return obj;
+  }
+
+  /**
+   * Get the value of an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to get the value of.
+   *
+   * @return {string}
+   *         The value of the attribute.
+   */
+  function getAttribute(el, attribute) {
+    return el.getAttribute(attribute);
+  }
+
+  /**
+   * Set the value of an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to set.
+   *
+   * @param {string} value
+   *        Value to set the attribute to.
+   */
+  function setAttribute(el, attribute, value) {
+    el.setAttribute(attribute, value);
+  }
+
+  /**
+   * Remove an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to remove.
+   */
+  function removeAttribute(el, attribute) {
+    el.removeAttribute(attribute);
+  }
+
+  /**
+   * Attempt to block the ability to select text.
+   */
+  function blockTextSelection() {
+    document.body.focus();
+    document.onselectstart = function () {
+      return false;
+    };
+  }
+
+  /**
+   * Turn off text selection blocking.
+   */
+  function unblockTextSelection() {
+    document.onselectstart = function () {
+      return true;
+    };
+  }
+
+  /**
+   * Identical to the native `getBoundingClientRect` function, but ensures that
+   * the method is supported at all (it is in all browsers we claim to support)
+   * and that the element is in the DOM before continuing.
+   *
+   * This wrapper function also shims properties which are not provided by some
+   * older browsers (namely, IE8).
+   *
+   * Additionally, some browsers do not support adding properties to a
+   * `ClientRect`/`DOMRect` object; so, we shallow-copy it with the standard
+   * properties (except `x` and `y` which are not widely supported). This helps
+   * avoid implementations where keys are non-enumerable.
+   *
+   * @param  {Element} el
+   *         Element whose `ClientRect` we want to calculate.
+   *
+   * @return {Object|undefined}
+   *         Always returns a plain object - or `undefined` if it cannot.
+   */
+  function getBoundingClientRect(el) {
+    if (el && el.getBoundingClientRect && el.parentNode) {
+      const rect = el.getBoundingClientRect();
+      const result = {};
+      ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach(k => {
+        if (rect[k] !== undefined) {
+          result[k] = rect[k];
+        }
+      });
+      if (!result.height) {
+        result.height = parseFloat(computedStyle(el, 'height'));
+      }
+      if (!result.width) {
+        result.width = parseFloat(computedStyle(el, 'width'));
+      }
+      return result;
+    }
+  }
+
+  /**
+   * Represents the position of a DOM element on the page.
+   *
+   * @typedef  {Object} module:dom~Position
+   *
+   * @property {number} left
+   *           Pixels to the left.
+   *
+   * @property {number} top
+   *           Pixels from the top.
+   */
+
+  /**
+   * Get the position of an element in the DOM.
+   *
+   * Uses `getBoundingClientRect` technique from John Resig.
+   *
+   * @see http://ejohn.org/blog/getboundingclientrect-is-awesome/
+   *
+   * @param  {Element} el
+   *         Element from which to get offset.
+   *
+   * @return {module:dom~Position}
+   *         The position of the element that was passed in.
+   */
+  function findPosition(el) {
+    if (!el || el && !el.offsetParent) {
+      return {
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0
+      };
+    }
+    const width = el.offsetWidth;
+    const height = el.offsetHeight;
+    let left = 0;
+    let top = 0;
+    while (el.offsetParent && el !== document[FullscreenApi.fullscreenElement]) {
+      left += el.offsetLeft;
+      top += el.offsetTop;
+      el = el.offsetParent;
+    }
+    return {
+      left,
+      top,
+      width,
+      height
+    };
+  }
+
+  /**
+   * Represents x and y coordinates for a DOM element or mouse pointer.
+   *
+   * @typedef  {Object} module:dom~Coordinates
+   *
+   * @property {number} x
+   *           x coordinate in pixels
+   *
+   * @property {number} y
+   *           y coordinate in pixels
+   */
+
+  /**
+   * Get the pointer position within an element.
+   *
+   * The base on the coordinates are the bottom left of the element.
+   *
+   * @param  {Element} el
+   *         Element on which to get the pointer position on.
+   *
+   * @param  {Event} event
+   *         Event object.
+   *
+   * @return {module:dom~Coordinates}
+   *         A coordinates object corresponding to the mouse position.
+   *
+   */
+  function getPointerPosition(el, event) {
+    const translated = {
+      x: 0,
+      y: 0
+    };
+    if (IS_IOS) {
+      let item = el;
+      while (item && item.nodeName.toLowerCase() !== 'html') {
+        const transform = computedStyle(item, 'transform');
+        if (/^matrix/.test(transform)) {
+          const values = transform.slice(7, -1).split(/,\s/).map(Number);
+          translated.x += values[4];
+          translated.y += values[5];
+        } else if (/^matrix3d/.test(transform)) {
+          const values = transform.slice(9, -1).split(/,\s/).map(Number);
+          translated.x += values[12];
+          translated.y += values[13];
+        }
+        item = item.parentNode;
+      }
+    }
+    const position = {};
+    const boxTarget = findPosition(event.target);
+    const box = findPosition(el);
+    const boxW = box.width;
+    const boxH = box.height;
+    let offsetY = event.offsetY - (box.top - boxTarget.top);
+    let offsetX = event.offsetX - (box.left - boxTarget.left);
+    if (event.changedTouches) {
+      offsetX = event.changedTouches[0].pageX - box.left;
+      offsetY = event.changedTouches[0].pageY + box.top;
+      if (IS_IOS) {
+        offsetX -= translated.x;
+        offsetY -= translated.y;
+      }
+    }
+    position.y = 1 - Math.max(0, Math.min(1, offsetY / boxH));
+    position.x = Math.max(0, Math.min(1, offsetX / boxW));
+    return position;
+  }
+
+  /**
+   * Determines, via duck typing, whether or not a value is a text node.
+   *
+   * @param  {*} value
+   *         Check if this value is a text node.
+   *
+   * @return {boolean}
+   *         Will be `true` if the value is a text node, `false` otherwise.
+   */
+  function isTextNode$1(value) {
+    return isObject$1(value) && value.nodeType === 3;
+  }
+
+  /**
+   * Empties the contents of an element.
+   *
+   * @param  {Element} el
+   *         The element to empty children from
+   *
+   * @return {Element}
+   *         The element with no children
+   */
+  function emptyEl(el) {
+    while (el.firstChild) {
+      el.removeChild(el.firstChild);
+    }
+    return el;
+  }
+
+  /**
+   * This is a mixed value that describes content to be injected into the DOM
+   * via some method. It can be of the following types:
+   *
+   * Type       | Description
+   * -----------|-------------
+   * `string`   | The value will be normalized into a text node.
+   * `Element`  | The value will be accepted as-is.
+   * `Text`     | A TextNode. The value will be accepted as-is.
+   * `Array`    | A one-dimensional array of strings, elements, text nodes, or functions. These functions should return a string, element, or text node (any other return value, like an array, will be ignored).
+   * `Function` | A function, which is expected to return a string, element, text node, or array - any of the other possible values described above. This means that a content descriptor could be a function that returns an array of functions, but those second-level functions must return strings, elements, or text nodes.
+   *
+   * @typedef {string|Element|Text|Array|Function} ContentDescriptor
+   */
+
+  /**
+   * Normalizes content for eventual insertion into the DOM.
+   *
+   * This allows a wide range of content definition methods, but helps protect
+   * from falling into the trap of simply writing to `innerHTML`, which could
+   * be an XSS concern.
+   *
+   * The content for an element can be passed in multiple types and
+   * combinations, whose behavior is as follows:
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Array}
+   *         All of the content that was passed in, normalized to an array of
+   *         elements or text nodes.
+   */
+  function normalizeContent(content) {
+    // First, invoke content if it is a function. If it produces an array,
+    // that needs to happen before normalization.
+    if (typeof content === 'function') {
+      content = content();
+    }
+
+    // Next up, normalize to an array, so one or many items can be normalized,
+    // filtered, and returned.
+    return (Array.isArray(content) ? content : [content]).map(value => {
+      // First, invoke value if it is a function to produce a new value,
+      // which will be subsequently normalized to a Node of some kind.
+      if (typeof value === 'function') {
+        value = value();
+      }
+      if (isEl(value) || isTextNode$1(value)) {
+        return value;
+      }
+      if (typeof value === 'string' && /\S/.test(value)) {
+        return document.createTextNode(value);
+      }
+    }).filter(value => value);
+  }
+
+  /**
+   * Normalizes and appends content to an element.
+   *
+   * @param  {Element} el
+   *         Element to append normalized content to.
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Element}
+   *         The element with appended normalized content.
+   */
+  function appendContent(el, content) {
+    normalizeContent(content).forEach(node => el.appendChild(node));
+    return el;
+  }
+
+  /**
+   * Normalizes and inserts content into an element; this is identical to
+   * `appendContent()`, except it empties the element first.
+   *
+   * @param {Element} el
+   *        Element to insert normalized content into.
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Element}
+   *         The element with inserted normalized content.
+   */
+  function insertContent(el, content) {
+    return appendContent(emptyEl(el), content);
+  }
+
+  /**
+   * Check if an event was a single left click.
+   *
+   * @param  {MouseEvent} event
+   *         Event object.
+   *
+   * @return {boolean}
+   *         Will be `true` if a single left click, `false` otherwise.
+   */
+  function isSingleLeftClick(event) {
+    // Note: if you create something draggable, be sure to
+    // call it on both `mousedown` and `mousemove` event,
+    // otherwise `mousedown` should be enough for a button
+
+    if (event.button === undefined && event.buttons === undefined) {
+      // Why do we need `buttons` ?
+      // Because, middle mouse sometimes have this:
+      // e.button === 0 and e.buttons === 4
+      // Furthermore, we want to prevent combination click, something like
+      // HOLD middlemouse then left click, that would be
+      // e.button === 0, e.buttons === 5
+      // just `button` is not gonna work
+
+      // Alright, then what this block does ?
+      // this is for chrome `simulate mobile devices`
+      // I want to support this as well
+
+      return true;
+    }
+    if (event.button === 0 && event.buttons === undefined) {
+      // Touch screen, sometimes on some specific device, `buttons`
+      // doesn't have anything (safari on ios, blackberry...)
+
+      return true;
+    }
+
+    // `mouseup` event on a single left click has
+    // `button` and `buttons` equal to 0
+    if (event.type === 'mouseup' && event.button === 0 && event.buttons === 0) {
+      return true;
+    }
+    if (event.button !== 0 || event.buttons !== 1) {
+      // This is the reason we have those if else block above
+      // if any special case we can catch and let it slide
+      // we do it above, when get to here, this definitely
+      // is-not-left-click
+
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * Finds a single DOM element matching `selector` within the optional
+   * `context` of another DOM element (defaulting to `document`).
+   *
+   * @param  {string} selector
+   *         A valid CSS selector, which will be passed to `querySelector`.
+   *
+   * @param  {Element|String} [context=document]
+   *         A DOM element within which to query. Can also be a selector
+   *         string in which case the first matching element will be used
+   *         as context. If missing (or no element matches selector), falls
+   *         back to `document`.
+   *
+   * @return {Element|null}
+   *         The element that was found or null.
+   */
+  const $ = createQuerier('querySelector');
+
+  /**
+   * Finds a all DOM elements matching `selector` within the optional
+   * `context` of another DOM element (defaulting to `document`).
+   *
+   * @param  {string} selector
+   *         A valid CSS selector, which will be passed to `querySelectorAll`.
+   *
+   * @param  {Element|String} [context=document]
+   *         A DOM element within which to query. Can also be a selector
+   *         string in which case the first matching element will be used
+   *         as context. If missing (or no element matches selector), falls
+   *         back to `document`.
+   *
+   * @return {NodeList}
+   *         A element list of elements that were found. Will be empty if none
+   *         were found.
+   *
+   */
+  const $$ = createQuerier('querySelectorAll');
+
+  /**
+   * A safe getComputedStyle.
+   *
+   * This is needed because in Firefox, if the player is loaded in an iframe with
+   * `display:none`, then `getComputedStyle` returns `null`, so, we do a
+   * null-check to make sure that the player doesn't break in these cases.
+   *
+   * @param    {Element} el
+   *           The element you want the computed style of
+   *
+   * @param    {string} prop
+   *           The property name you want
+   *
+   * @see      https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+   */
+  function computedStyle(el, prop) {
+    if (!el || !prop) {
+      return '';
+    }
+    if (typeof window.getComputedStyle === 'function') {
+      let computedStyleValue;
+      try {
+        computedStyleValue = window.getComputedStyle(el);
+      } catch (e) {
+        return '';
+      }
+      return computedStyleValue ? computedStyleValue.getPropertyValue(prop) || computedStyleValue[prop] : '';
+    }
+    return '';
+  }
+
+  /**
+   * Copy document style sheets to another window.
+   *
+   * @param    {Window} win
+   *           The window element you want to copy the document style sheets to.
+   *
+   */
+  function copyStyleSheetsToWindow(win) {
+    [...document.styleSheets].forEach(styleSheet => {
+      try {
+        const cssRules = [...styleSheet.cssRules].map(rule => rule.cssText).join('');
+        const style = document.createElement('style');
+        style.textContent = cssRules;
+        win.document.head.appendChild(style);
+      } catch (e) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.type = styleSheet.type;
+        // For older Safari this has to be the string; on other browsers setting the MediaList works
+        link.media = styleSheet.media.mediaText;
+        link.href = styleSheet.href;
+        win.document.head.appendChild(link);
+      }
+    });
+  }
+
+  var Dom = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    isReal: isReal,
+    isEl: isEl,
+    isInFrame: isInFrame,
+    createEl: createEl,
+    textContent: textContent,
+    prependTo: prependTo,
+    hasClass: hasClass,
+    addClass: addClass,
+    removeClass: removeClass,
+    toggleClass: toggleClass,
+    setAttributes: setAttributes,
+    getAttributes: getAttributes,
+    getAttribute: getAttribute,
+    setAttribute: setAttribute,
+    removeAttribute: removeAttribute,
+    blockTextSelection: blockTextSelection,
+    unblockTextSelection: unblockTextSelection,
+    getBoundingClientRect: getBoundingClientRect,
+    findPosition: findPosition,
+    getPointerPosition: getPointerPosition,
+    isTextNode: isTextNode$1,
+    emptyEl: emptyEl,
+    normalizeContent: normalizeContent,
+    appendContent: appendContent,
+    insertContent: insertContent,
+    isSingleLeftClick: isSingleLeftClick,
+    $: $,
+    $$: $$,
+    computedStyle: computedStyle,
+    copyStyleSheetsToWindow: copyStyleSheetsToWindow
+  });
+
+  /**
+   * @file setup.js - Functions for setting up a player without
+   * user interaction based on the data-setup `attribute` of the video tag.
+   *
+   * @module setup
+   */
+  let _windowLoaded = false;
+  let videojs$1;
+
+  /**
+   * Set up any tags that have a data-setup `attribute` when the player is started.
+   */
+  const autoSetup = function () {
+    if (videojs$1.options.autoSetup === false) {
+      return;
+    }
+    const vids = Array.prototype.slice.call(document.getElementsByTagName('video'));
+    const audios = Array.prototype.slice.call(document.getElementsByTagName('audio'));
+    const divs = Array.prototype.slice.call(document.getElementsByTagName('video-js'));
+    const mediaEls = vids.concat(audios, divs);
+
+    // Check if any media elements exist
+    if (mediaEls && mediaEls.length > 0) {
+      for (let i = 0, e = mediaEls.length; i < e; i++) {
+        const mediaEl = mediaEls[i];
+
+        // Check if element exists, has getAttribute func.
+        if (mediaEl && mediaEl.getAttribute) {
+          // Make sure this player hasn't already been set up.
+          if (mediaEl.player === undefined) {
+            const options = mediaEl.getAttribute('data-setup');
+
+            // Check if data-setup attr exists.
+            // We only auto-setup if they've added the data-setup attr.
+            if (options !== null) {
+              // Create new video.js instance.
+              videojs$1(mediaEl);
+            }
+          }
+
+          // If getAttribute isn't defined, we need to wait for the DOM.
+        } else {
+          autoSetupTimeout(1);
+          break;
+        }
+      }
+
+      // No videos were found, so keep looping unless page is finished loading.
+    } else if (!_windowLoaded) {
+      autoSetupTimeout(1);
+    }
+  };
+
+  /**
+   * Wait until the page is loaded before running autoSetup. This will be called in
+   * autoSetup if `hasLoaded` returns false.
+   *
+   * @param {number} wait
+   *        How long to wait in ms
+   *
+   * @param {module:videojs} [vjs]
+   *        The videojs library function
+   */
+  function autoSetupTimeout(wait, vjs) {
+    // Protect against breakage in non-browser environments
+    if (!isReal()) {
+      return;
+    }
+    if (vjs) {
+      videojs$1 = vjs;
+    }
+    window.setTimeout(autoSetup, wait);
+  }
+
+  /**
+   * Used to set the internal tracking of window loaded state to true.
+   *
+   * @private
+   */
+  function setWindowLoaded() {
+    _windowLoaded = true;
+    window.removeEventListener('load', setWindowLoaded);
+  }
+  if (isReal()) {
+    if (document.readyState === 'complete') {
+      setWindowLoaded();
+    } else {
+      /**
+       * Listen for the load event on window, and set _windowLoaded to true.
+       *
+       * We use a standard event listener here to avoid incrementing the GUID
+       * before any players are created.
+       *
+       * @listens load
+       */
+      window.addEventListener('load', setWindowLoaded);
+    }
+  }
+
+  /**
+   * @file stylesheet.js
+   * @module stylesheet
+   */
+
+  /**
+   * Create a DOM style element given a className for it.
+   *
+   * @param {string} className
+   *        The className to add to the created style element.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  const createStyleElement = function (className) {
+    const style = document.createElement('style');
+    style.className = className;
+    return style;
+  };
+
+  /**
+   * Add text to a DOM element.
+   *
+   * @param {Element} el
+   *        The Element to add text content to.
+   *
+   * @param {string} content
+   *        The text to add to the element.
+   */
+  const setTextContent = function (el, content) {
+    if (el.styleSheet) {
+      el.styleSheet.cssText = content;
+    } else {
+      el.textContent = content;
+    }
+  };
+
+  /**
+   * @file dom-data.js
+   * @module dom-data
+   */
+
+  /**
+   * Element Data Store.
+   *
+   * Allows for binding data to an element without putting it directly on the
+   * element. Ex. Event listeners are stored here.
+   * (also from jsninja.com, slightly modified and updated for closure compiler)
+   *
+   * @type {Object}
+   * @private
+   */
+  var DomData = new WeakMap();
+
+  /**
+   * @file guid.js
+   * @module guid
+   */
+
+  // Default value for GUIDs. This allows us to reset the GUID counter in tests.
+  //
+  // The initial GUID is 3 because some users have come to rely on the first
+  // default player ID ending up as `vjs_video_3`.
+  //
+  // See: https://github.com/videojs/video.js/pull/6216
+  const _initialGuid = 3;
+
+  /**
+   * Unique ID for an element or function
+   *
+   * @type {Number}
+   */
+  let _guid = _initialGuid;
+
+  /**
+   * Get a unique auto-incrementing ID by number that has not been returned before.
+   *
+   * @return {number}
+   *         A new unique ID.
+   */
+  function newGUID() {
+    return _guid++;
+  }
+
+  /**
+   * @file events.js. An Event System (John Resig - Secrets of a JS Ninja http://jsninja.com/)
+   * (Original book version wasn't completely usable, so fixed some things and made Closure Compiler compatible)
+   * This should work very similarly to jQuery's events, however it's based off the book version which isn't as
+   * robust as jquery's, so there's probably some differences.
+   *
+   * @file events.js
+   * @module events
+   */
+
+  /**
+   * Clean up the listener cache and dispatchers
+   *
+   * @param {Element|Object} elem
+   *        Element to clean up
+   *
+   * @param {string} type
+   *        Type of event to clean up
+   */
+  function _cleanUpEvents(elem, type) {
+    if (!DomData.has(elem)) {
+      return;
+    }
+    const data = DomData.get(elem);
+
+    // Remove the events of a particular type if there are none left
+    if (data.handlers[type].length === 0) {
+      delete data.handlers[type];
+      // data.handlers[type] = null;
+      // Setting to null was causing an error with data.handlers
+
+      // Remove the meta-handler from the element
+      if (elem.removeEventListener) {
+        elem.removeEventListener(type, data.dispatcher, false);
+      } else if (elem.detachEvent) {
+        elem.detachEvent('on' + type, data.dispatcher);
+      }
+    }
+
+    // Remove the events object if there are no types left
+    if (Object.getOwnPropertyNames(data.handlers).length <= 0) {
+      delete data.handlers;
+      delete data.dispatcher;
+      delete data.disabled;
+    }
+
+    // Finally remove the element data if there is no data left
+    if (Object.getOwnPropertyNames(data).length === 0) {
+      DomData.delete(elem);
+    }
+  }
+
+  /**
+   * Loops through an array of event types and calls the requested method for each type.
+   *
+   * @param {Function} fn
+   *        The event method we want to use.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind listeners to
+   *
+   * @param {string[]} types
+   *        Type of event to bind to.
+   *
+   * @param {Function} callback
+   *        Event listener.
+   */
+  function _handleMultipleEvents(fn, elem, types, callback) {
+    types.forEach(function (type) {
+      // Call the event method for each one of the types
+      fn(elem, type, callback);
+    });
+  }
+
+  /**
+   * Fix a native event to have standard property values
+   *
+   * @param {Object} event
+   *        Event object to fix.
+   *
+   * @return {Object}
+   *         Fixed event object.
+   */
+  function fixEvent(event) {
+    if (event.fixed_) {
+      return event;
+    }
+    function returnTrue() {
+      return true;
+    }
+    function returnFalse() {
+      return false;
+    }
+
+    // Test if fixing up is needed
+    // Used to check if !event.stopPropagation instead of isPropagationStopped
+    // But native events return true for stopPropagation, but don't have
+    // other expected methods like isPropagationStopped. Seems to be a problem
+    // with the Javascript Ninja code. So we're just overriding all events now.
+    if (!event || !event.isPropagationStopped || !event.isImmediatePropagationStopped) {
+      const old = event || window.event;
+      event = {};
+      // Clone the old object so that we can modify the values event = {};
+      // IE8 Doesn't like when you mess with native event properties
+      // Firefox returns false for event.hasOwnProperty('type') and other props
+      //  which makes copying more difficult.
+      // TODO: Probably best to create a whitelist of event props
+      for (const key in old) {
+        // Safari 6.0.3 warns you if you try to copy deprecated layerX/Y
+        // Chrome warns you if you try to copy deprecated keyboardEvent.keyLocation
+        // and webkitMovementX/Y
+        // Lighthouse complains if Event.path is copied
+        if (key !== 'layerX' && key !== 'layerY' && key !== 'keyLocation' && key !== 'webkitMovementX' && key !== 'webkitMovementY' && key !== 'path') {
+          // Chrome 32+ warns if you try to copy deprecated returnValue, but
+          // we still want to if preventDefault isn't supported (IE8).
+          if (!(key === 'returnValue' && old.preventDefault)) {
+            event[key] = old[key];
+          }
+        }
+      }
+
+      // The event occurred on this element
+      if (!event.target) {
+        event.target = event.srcElement || document;
+      }
+
+      // Handle which other element the event is related to
+      if (!event.relatedTarget) {
+        event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
+      }
+
+      // Stop the default browser action
+      event.preventDefault = function () {
+        if (old.preventDefault) {
+          old.preventDefault();
+        }
+        event.returnValue = false;
+        old.returnValue = false;
+        event.defaultPrevented = true;
+      };
+      event.defaultPrevented = false;
+
+      // Stop the event from bubbling
+      event.stopPropagation = function () {
+        if (old.stopPropagation) {
+          old.stopPropagation();
+        }
+        event.cancelBubble = true;
+        old.cancelBubble = true;
+        event.isPropagationStopped = returnTrue;
+      };
+      event.isPropagationStopped = returnFalse;
+
+      // Stop the event from bubbling and executing other handlers
+      event.stopImmediatePropagation = function () {
+        if (old.stopImmediatePropagation) {
+          old.stopImmediatePropagation();
+        }
+        event.isImmediatePropagationStopped = returnTrue;
+        event.stopPropagation();
+      };
+      event.isImmediatePropagationStopped = returnFalse;
+
+      // Handle mouse position
+      if (event.clientX !== null && event.clientX !== undefined) {
+        const doc = document.documentElement;
+        const body = document.body;
+        event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
+        event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
+      }
+
+      // Handle key presses
+      event.which = event.charCode || event.keyCode;
+
+      // Fix button for mouse clicks:
+      // 0 == left; 1 == middle; 2 == right
+      if (event.button !== null && event.button !== undefined) {
+        // The following is disabled because it does not pass videojs-standard
+        // and... yikes.
+        /* eslint-disable */
+        event.button = event.button & 1 ? 0 : event.button & 4 ? 1 : event.button & 2 ? 2 : 0;
+        /* eslint-enable */
+      }
+    }
+
+    event.fixed_ = true;
+    // Returns fixed-up instance
+    return event;
+  }
+
+  /**
+   * Whether passive event listeners are supported
+   */
+  let _supportsPassive;
+  const supportsPassive = function () {
+    if (typeof _supportsPassive !== 'boolean') {
+      _supportsPassive = false;
+      try {
+        const opts = Object.defineProperty({}, 'passive', {
+          get() {
+            _supportsPassive = true;
+          }
+        });
+        window.addEventListener('test', null, opts);
+        window.removeEventListener('test', null, opts);
+      } catch (e) {
+        // disregard
+      }
+    }
+    return _supportsPassive;
+  };
+
+  /**
+   * Touch events Chrome expects to be passive
+   */
+  const passiveEvents = ['touchstart', 'touchmove'];
+
+  /**
+   * Add an event listener to element
+   * It stores the handler function in a separate cache object
+   * and adds a generic handler to the element's event,
+   * along with a unique id (guid) to the element.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind listeners to
+   *
+   * @param {string|string[]} type
+   *        Type of event to bind to.
+   *
+   * @param {Function} fn
+   *        Event listener.
+   */
+  function on(elem, type, fn) {
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(on, elem, type, fn);
+    }
+    if (!DomData.has(elem)) {
+      DomData.set(elem, {});
+    }
+    const data = DomData.get(elem);
+
+    // We need a place to store all our handler data
+    if (!data.handlers) {
+      data.handlers = {};
+    }
+    if (!data.handlers[type]) {
+      data.handlers[type] = [];
+    }
+    if (!fn.guid) {
+      fn.guid = newGUID();
+    }
+    data.handlers[type].push(fn);
+    if (!data.dispatcher) {
+      data.disabled = false;
+      data.dispatcher = function (event, hash) {
+        if (data.disabled) {
+          return;
+        }
+        event = fixEvent(event);
+        const handlers = data.handlers[event.type];
+        if (handlers) {
+          // Copy handlers so if handlers are added/removed during the process it doesn't throw everything off.
+          const handlersCopy = handlers.slice(0);
+          for (let m = 0, n = handlersCopy.length; m < n; m++) {
+            if (event.isImmediatePropagationStopped()) {
+              break;
+            } else {
+              try {
+                handlersCopy[m].call(elem, event, hash);
+              } catch (e) {
+                log$1.error(e);
+              }
+            }
+          }
+        }
+      };
+    }
+    if (data.handlers[type].length === 1) {
+      if (elem.addEventListener) {
+        let options = false;
+        if (supportsPassive() && passiveEvents.indexOf(type) > -1) {
+          options = {
+            passive: true
+          };
+        }
+        elem.addEventListener(type, data.dispatcher, options);
+      } else if (elem.attachEvent) {
+        elem.attachEvent('on' + type, data.dispatcher);
+      }
+    }
+  }
+
+  /**
+   * Removes event listeners from an element
+   *
+   * @param {Element|Object} elem
+   *        Object to remove listeners from.
+   *
+   * @param {string|string[]} [type]
+   *        Type of listener to remove. Don't include to remove all events from element.
+   *
+   * @param {Function} [fn]
+   *        Specific listener to remove. Don't include to remove listeners for an event
+   *        type.
+   */
+  function off(elem, type, fn) {
+    // Don't want to add a cache object through getElData if not needed
+    if (!DomData.has(elem)) {
+      return;
+    }
+    const data = DomData.get(elem);
+
+    // If no events exist, nothing to unbind
+    if (!data.handlers) {
+      return;
+    }
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(off, elem, type, fn);
+    }
+
+    // Utility function
+    const removeType = function (el, t) {
+      data.handlers[t] = [];
+      _cleanUpEvents(el, t);
+    };
+
+    // Are we removing all bound events?
+    if (type === undefined) {
+      for (const t in data.handlers) {
+        if (Object.prototype.hasOwnProperty.call(data.handlers || {}, t)) {
+          removeType(elem, t);
+        }
+      }
+      return;
+    }
+    const handlers = data.handlers[type];
+
+    // If no handlers exist, nothing to unbind
+    if (!handlers) {
+      return;
+    }
+
+    // If no listener was provided, remove all listeners for type
+    if (!fn) {
+      removeType(elem, type);
+      return;
+    }
+
+    // We're only removing a single handler
+    if (fn.guid) {
+      for (let n = 0; n < handlers.length; n++) {
+        if (handlers[n].guid === fn.guid) {
+          handlers.splice(n--, 1);
+        }
+      }
+    }
+    _cleanUpEvents(elem, type);
+  }
+
+  /**
+   * Trigger an event for an element
+   *
+   * @param {Element|Object} elem
+   *        Element to trigger an event on
+   *
+   * @param {EventTarget~Event|string} event
+   *        A string (the type) or an event object with a type attribute
+   *
+   * @param {Object} [hash]
+   *        data hash to pass along with the event
+   *
+   * @return {boolean|undefined}
+   *         Returns the opposite of `defaultPrevented` if default was
+   *         prevented. Otherwise, returns `undefined`
+   */
+  function trigger(elem, event, hash) {
+    // Fetches element data and a reference to the parent (for bubbling).
+    // Don't want to add a data object to cache for every parent,
+    // so checking hasElData first.
+    const elemData = DomData.has(elem) ? DomData.get(elem) : {};
+    const parent = elem.parentNode || elem.ownerDocument;
+    // type = event.type || event,
+    // handler;
+
+    // If an event name was passed as a string, creates an event out of it
+    if (typeof event === 'string') {
+      event = {
+        type: event,
+        target: elem
+      };
+    } else if (!event.target) {
+      event.target = elem;
+    }
+
+    // Normalizes the event properties.
+    event = fixEvent(event);
+
+    // If the passed element has a dispatcher, executes the established handlers.
+    if (elemData.dispatcher) {
+      elemData.dispatcher.call(elem, event, hash);
+    }
+
+    // Unless explicitly stopped or the event does not bubble (e.g. media events)
+    // recursively calls this function to bubble the event up the DOM.
+    if (parent && !event.isPropagationStopped() && event.bubbles === true) {
+      trigger.call(null, parent, event, hash);
+
+      // If at the top of the DOM, triggers the default action unless disabled.
+    } else if (!parent && !event.defaultPrevented && event.target && event.target[event.type]) {
+      if (!DomData.has(event.target)) {
+        DomData.set(event.target, {});
+      }
+      const targetData = DomData.get(event.target);
+
+      // Checks if the target has a default action for this event.
+      if (event.target[event.type]) {
+        // Temporarily disables event dispatching on the target as we have already executed the handler.
+        targetData.disabled = true;
+        // Executes the default action.
+        if (typeof event.target[event.type] === 'function') {
+          event.target[event.type]();
+        }
+        // Re-enables event dispatching.
+        targetData.disabled = false;
+      }
+    }
+
+    // Inform the triggerer if the default was prevented by returning false
+    return !event.defaultPrevented;
+  }
+
+  /**
+   * Trigger a listener only once for an event.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind to.
+   *
+   * @param {string|string[]} type
+   *        Name/type of event
+   *
+   * @param {Event~EventListener} fn
+   *        Event listener function
+   */
+  function one(elem, type, fn) {
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(one, elem, type, fn);
+    }
+    const func = function () {
+      off(elem, type, func);
+      fn.apply(this, arguments);
+    };
+
+    // copy the guid to the new function so it can removed using the original function's ID
+    func.guid = fn.guid = fn.guid || newGUID();
+    on(elem, type, func);
+  }
+
+  /**
+   * Trigger a listener only once and then turn if off for all
+   * configured events
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind to.
+   *
+   * @param {string|string[]} type
+   *        Name/type of event
+   *
+   * @param {Event~EventListener} fn
+   *        Event listener function
+   */
+  function any(elem, type, fn) {
+    const func = function () {
+      off(elem, type, func);
+      fn.apply(this, arguments);
+    };
+
+    // copy the guid to the new function so it can removed using the original function's ID
+    func.guid = fn.guid = fn.guid || newGUID();
+
+    // multiple ons, but one off for everything
+    on(elem, type, func);
+  }
+
+  var Events = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    fixEvent: fixEvent,
+    on: on,
+    off: off,
+    trigger: trigger,
+    one: one,
+    any: any
+  });
+
+  /**
+   * @file fn.js
+   * @module fn
+   */
+  const UPDATE_REFRESH_INTERVAL = 30;
+
+  /**
+   * A private, internal-only function for changing the context of a function.
+   *
+   * It also stores a unique id on the function so it can be easily removed from
+   * events.
+   *
+   * @private
+   * @function
+   * @param    {*} context
+   *           The object to bind as scope.
+   *
+   * @param    {Function} fn
+   *           The function to be bound to a scope.
+   *
+   * @param    {number} [uid]
+   *           An optional unique ID for the function to be set
+   *
+   * @return   {Function}
+   *           The new function that will be bound into the context given
+   */
+  const bind_ = function (context, fn, uid) {
+    // Make sure the function has a unique ID
+    if (!fn.guid) {
+      fn.guid = newGUID();
+    }
+
+    // Create the new function that changes the context
+    const bound = fn.bind(context);
+
+    // Allow for the ability to individualize this function
+    // Needed in the case where multiple objects might share the same prototype
+    // IF both items add an event listener with the same function, then you try to remove just one
+    // it will remove both because they both have the same guid.
+    // when using this, you need to use the bind method when you remove the listener as well.
+    // currently used in text tracks
+    bound.guid = uid ? uid + '_' + fn.guid : fn.guid;
+    return bound;
+  };
+
+  /**
+   * Wraps the given function, `fn`, with a new function that only invokes `fn`
+   * at most once per every `wait` milliseconds.
+   *
+   * @function
+   * @param    {Function} fn
+   *           The function to be throttled.
+   *
+   * @param    {number}   wait
+   *           The number of milliseconds by which to throttle.
+   *
+   * @return   {Function}
+   */
+  const throttle = function (fn, wait) {
+    let last = window.performance.now();
+    const throttled = function (...args) {
+      const now = window.performance.now();
+      if (now - last >= wait) {
+        fn(...args);
+        last = now;
+      }
+    };
+    return throttled;
+  };
+
+  /**
+   * Creates a debounced function that delays invoking `func` until after `wait`
+   * milliseconds have elapsed since the last time the debounced function was
+   * invoked.
+   *
+   * Inspired by lodash and underscore implementations.
+   *
+   * @function
+   * @param    {Function} func
+   *           The function to wrap with debounce behavior.
+   *
+   * @param    {number} wait
+   *           The number of milliseconds to wait after the last invocation.
+   *
+   * @param    {boolean} [immediate]
+   *           Whether or not to invoke the function immediately upon creation.
+   *
+   * @param    {Object} [context=window]
+   *           The "context" in which the debounced function should debounce. For
+   *           example, if this function should be tied to a Video.js player,
+   *           the player can be passed here. Alternatively, defaults to the
+   *           global `window` object.
+   *
+   * @return   {Function}
+   *           A debounced function.
+   */
+  const debounce = function (func, wait, immediate, context = window) {
+    let timeout;
+    const cancel = () => {
+      context.clearTimeout(timeout);
+      timeout = null;
+    };
+
+    /* eslint-disable consistent-this */
+    const debounced = function () {
+      const self = this;
+      const args = arguments;
+      let later = function () {
+        timeout = null;
+        later = null;
+        if (!immediate) {
+          func.apply(self, args);
+        }
+      };
+      if (!timeout && immediate) {
+        func.apply(self, args);
+      }
+      context.clearTimeout(timeout);
+      timeout = context.setTimeout(later, wait);
+    };
+    /* eslint-enable consistent-this */
+
+    debounced.cancel = cancel;
+    return debounced;
+  };
+
+  var Fn = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UPDATE_REFRESH_INTERVAL: UPDATE_REFRESH_INTERVAL,
+    bind_: bind_,
+    throttle: throttle,
+    debounce: debounce
+  });
+
+  /**
+   * @file src/js/event-target.js
+   */
+  let EVENT_MAP;
+
+  /**
+   * `EventTarget` is a class that can have the same API as the DOM `EventTarget`. It
+   * adds shorthand functions that wrap around lengthy functions. For example:
+   * the `on` function is a wrapper around `addEventListener`.
+   *
+   * @see [EventTarget Spec]{@link https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget}
+   * @class EventTarget
+   */
+  class EventTarget$2 {
+    /**
+     * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+     * function that will get called when an event with a certain name gets triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to call with `EventTarget`s
+     */
+    on(type, fn) {
+      // Remove the addEventListener alias before calling Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      on(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+     * This makes it so that the `event listener` will no longer get called when the
+     * named event happens.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to remove.
+     */
+    off(type, fn) {
+      off(this, type, fn);
+    }
+    /**
+     * This function will add an `event listener` that gets triggered only once. After the
+     * first trigger it will get removed. This is like adding an `event listener`
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    one(type, fn) {
+      // Remove the addEventListener aliasing Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      one(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * This function will add an `event listener` that gets triggered only once and is
+     * removed from all events. This is like adding an array of `event listener`s
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+     * first time it is triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    any(type, fn) {
+      // Remove the addEventListener aliasing Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      any(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * This function causes an event to happen. This will then cause any `event listeners`
+     * that are waiting for that event, to get called. If there are no `event listeners`
+     * for an event then nothing will happen.
+     *
+     * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+     * Trigger will also call the `on` + `uppercaseEventName` function.
+     *
+     * Example:
+     * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+     * `onClick` if it exists.
+     *
+     * @param {string|EventTarget~Event|Object} event
+     *        The name of the event, an `Event`, or an object with a key of type set to
+     *        an event name.
+     */
+    trigger(event) {
+      const type = event.type || event;
+
+      // deprecation
+      // In a future version we should default target to `this`
+      // similar to how we default the target to `elem` in
+      // `Events.trigger`. Right now the default `target` will be
+      // `document` due to the `Event.fixEvent` call.
+      if (typeof event === 'string') {
+        event = {
+          type
+        };
+      }
+      event = fixEvent(event);
+      if (this.allowedEvents_[type] && this['on' + type]) {
+        this['on' + type](event);
+      }
+      trigger(this, event);
+    }
+    queueTrigger(event) {
+      // only set up EVENT_MAP if it'll be used
+      if (!EVENT_MAP) {
+        EVENT_MAP = new Map();
+      }
+      const type = event.type || event;
+      let map = EVENT_MAP.get(this);
+      if (!map) {
+        map = new Map();
+        EVENT_MAP.set(this, map);
+      }
+      const oldTimeout = map.get(type);
+      map.delete(type);
+      window.clearTimeout(oldTimeout);
+      const timeout = window.setTimeout(() => {
+        map.delete(type);
+        // if we cleared out all timeouts for the current target, delete its map
+        if (map.size === 0) {
+          map = null;
+          EVENT_MAP.delete(this);
+        }
+        this.trigger(event);
+      }, 0);
+      map.set(type, timeout);
+    }
+  }
+
+  /**
+   * A Custom DOM event.
+   *
+   * @typedef {CustomEvent} Event
+   * @see [Properties]{@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent}
+   */
+
+  /**
+   * All event listeners should follow the following format.
+   *
+   * @callback EventListener
+   * @this {EventTarget}
+   *
+   * @param {Event} event
+   *        the event that triggered this function
+   *
+   * @param {Object} [hash]
+   *        hash of data sent during the event
+   */
+
+  /**
+   * An object containing event names as keys and booleans as values.
+   *
+   * > NOTE: If an event name is set to a true value here {@link EventTarget#trigger}
+   *         will have extra functionality. See that function for more information.
+   *
+   * @property EventTarget.prototype.allowedEvents_
+   * @protected
+   */
+  EventTarget$2.prototype.allowedEvents_ = {};
+
+  /**
+   * An alias of {@link EventTarget#on}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#on}
+   */
+  EventTarget$2.prototype.addEventListener = EventTarget$2.prototype.on;
+
+  /**
+   * An alias of {@link EventTarget#off}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#off}
+   */
+  EventTarget$2.prototype.removeEventListener = EventTarget$2.prototype.off;
+
+  /**
+   * An alias of {@link EventTarget#trigger}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#trigger}
+   */
+  EventTarget$2.prototype.dispatchEvent = EventTarget$2.prototype.trigger;
+
+  /**
+   * @file mixins/evented.js
+   * @module evented
+   */
+  const objName = obj => {
+    if (typeof obj.name === 'function') {
+      return obj.name();
+    }
+    if (typeof obj.name === 'string') {
+      return obj.name;
+    }
+    if (obj.name_) {
+      return obj.name_;
+    }
+    if (obj.constructor && obj.constructor.name) {
+      return obj.constructor.name;
+    }
+    return typeof obj;
+  };
+
+  /**
+   * Returns whether or not an object has had the evented mixin applied.
+   *
+   * @param  {Object} object
+   *         An object to test.
+   *
+   * @return {boolean}
+   *         Whether or not the object appears to be evented.
+   */
+  const isEvented = object => object instanceof EventTarget$2 || !!object.eventBusEl_ && ['on', 'one', 'off', 'trigger'].every(k => typeof object[k] === 'function');
+
+  /**
+   * Adds a callback to run after the evented mixin applied.
+   *
+   * @param  {Object} target
+   *         An object to Add
+   * @param  {Function} callback
+   *         The callback to run.
+   */
+  const addEventedCallback = (target, callback) => {
+    if (isEvented(target)) {
+      callback();
+    } else {
+      if (!target.eventedCallbacks) {
+        target.eventedCallbacks = [];
+      }
+      target.eventedCallbacks.push(callback);
+    }
+  };
+
+  /**
+   * Whether a value is a valid event type - non-empty string or array.
+   *
+   * @private
+   * @param  {string|Array} type
+   *         The type value to test.
+   *
+   * @return {boolean}
+   *         Whether or not the type is a valid event type.
+   */
+  const isValidEventType = type =>
+  // The regex here verifies that the `type` contains at least one non-
+  // whitespace character.
+  typeof type === 'string' && /\S/.test(type) || Array.isArray(type) && !!type.length;
+
+  /**
+   * Validates a value to determine if it is a valid event target. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the target does not appear to be a valid event target.
+   *
+   * @param  {Object} target
+   *         The object to test.
+   *
+   * @param  {Object} obj
+   *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateTarget = (target, obj, fnName) => {
+    if (!target || !target.nodeName && !isEvented(target)) {
+      throw new Error(`Invalid target for ${objName(obj)}#${fnName}; must be a DOM node or evented object.`);
+    }
+  };
+
+  /**
+   * Validates a value to determine if it is a valid event target. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the type does not appear to be a valid event type.
+   *
+   * @param  {string|Array} type
+   *         The type to test.
+   *
+   * @param  {Object} obj
+  *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateEventType = (type, obj, fnName) => {
+    if (!isValidEventType(type)) {
+      throw new Error(`Invalid event type for ${objName(obj)}#${fnName}; must be a non-empty string or array.`);
+    }
+  };
+
+  /**
+   * Validates a value to determine if it is a valid listener. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the listener is not a function.
+   *
+   * @param  {Function} listener
+   *         The listener to test.
+   *
+   * @param  {Object} obj
+   *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateListener = (listener, obj, fnName) => {
+    if (typeof listener !== 'function') {
+      throw new Error(`Invalid listener for ${objName(obj)}#${fnName}; must be a function.`);
+    }
+  };
+
+  /**
+   * Takes an array of arguments given to `on()` or `one()`, validates them, and
+   * normalizes them into an object.
+   *
+   * @private
+   * @param  {Object} self
+   *         The evented object on which `on()` or `one()` was called. This
+   *         object will be bound as the `this` value for the listener.
+   *
+   * @param  {Array} args
+   *         An array of arguments passed to `on()` or `one()`.
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   *
+   * @return {Object}
+   *         An object containing useful values for `on()` or `one()` calls.
+   */
+  const normalizeListenArgs = (self, args, fnName) => {
+    // If the number of arguments is less than 3, the target is always the
+    // evented object itself.
+    const isTargetingSelf = args.length < 3 || args[0] === self || args[0] === self.eventBusEl_;
+    let target;
+    let type;
+    let listener;
+    if (isTargetingSelf) {
+      target = self.eventBusEl_;
+
+      // Deal with cases where we got 3 arguments, but we are still listening to
+      // the evented object itself.
+      if (args.length >= 3) {
+        args.shift();
+      }
+      [type, listener] = args;
+    } else {
+      [target, type, listener] = args;
+    }
+    validateTarget(target, self, fnName);
+    validateEventType(type, self, fnName);
+    validateListener(listener, self, fnName);
+    listener = bind_(self, listener);
+    return {
+      isTargetingSelf,
+      target,
+      type,
+      listener
+    };
+  };
+
+  /**
+   * Adds the listener to the event type(s) on the target, normalizing for
+   * the type of target.
+   *
+   * @private
+   * @param  {Element|Object} target
+   *         A DOM node or evented object.
+   *
+   * @param  {string} method
+   *         The event binding method to use ("on" or "one").
+   *
+   * @param  {string|Array} type
+   *         One or more event type(s).
+   *
+   * @param  {Function} listener
+   *         A listener function.
+   */
+  const listen = (target, method, type, listener) => {
+    validateTarget(target, target, method);
+    if (target.nodeName) {
+      Events[method](target, type, listener);
+    } else {
+      target[method](type, listener);
+    }
+  };
+
+  /**
+   * Contains methods that provide event capabilities to an object which is passed
+   * to {@link module:evented|evented}.
+   *
+   * @mixin EventedMixin
+   */
+  const EventedMixin = {
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    on(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'on');
+      listen(target, 'on', type, listener);
+
+      // If this object is listening to another evented object.
+      if (!isTargetingSelf) {
+        // If this object is disposed, remove the listener.
+        const removeListenerOnDispose = () => this.off(target, type, listener);
+
+        // Use the same function ID as the listener so we can remove it later it
+        // using the ID of the original listener.
+        removeListenerOnDispose.guid = listener.guid;
+
+        // Add a listener to the target's dispose event as well. This ensures
+        // that if the target is disposed BEFORE this object, we remove the
+        // removal listener that was just added. Otherwise, we create a memory leak.
+        const removeRemoverOnTargetDispose = () => this.off('dispose', removeListenerOnDispose);
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        removeRemoverOnTargetDispose.guid = listener.guid;
+        listen(this, 'on', 'dispose', removeListenerOnDispose);
+        listen(target, 'on', 'dispose', removeRemoverOnTargetDispose);
+      }
+    },
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object. The listener will be called once per event and then removed.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    one(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'one');
+
+      // Targeting this evented object.
+      if (isTargetingSelf) {
+        listen(target, 'one', type, listener);
+
+        // Targeting another evented object.
+      } else {
+        // TODO: This wrapper is incorrect! It should only
+        //       remove the wrapper for the event type that called it.
+        //       Instead all listeners are removed on the first trigger!
+        //       see https://github.com/videojs/video.js/issues/5962
+        const wrapper = (...largs) => {
+          this.off(target, type, wrapper);
+          listener.apply(null, largs);
+        };
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        wrapper.guid = listener.guid;
+        listen(target, 'one', type, wrapper);
+      }
+    },
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object. The listener will only be called once for the first event that is triggered
+     * then removed.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    any(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'any');
+
+      // Targeting this evented object.
+      if (isTargetingSelf) {
+        listen(target, 'any', type, listener);
+
+        // Targeting another evented object.
+      } else {
+        const wrapper = (...largs) => {
+          this.off(target, type, wrapper);
+          listener.apply(null, largs);
+        };
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        wrapper.guid = listener.guid;
+        listen(target, 'any', type, wrapper);
+      }
+    },
+    /**
+     * Removes listener(s) from event(s) on an evented object.
+     *
+     * @param  {string|Array|Element|Object} [targetOrType]
+     *         If this is a string or array, it represents the event type(s).
+     *
+     *         Another evented object can be passed here instead, in which case
+     *         ALL 3 arguments are _required_.
+     *
+     * @param  {string|Array|Function} [typeOrListener]
+     *         If the first argument was a string or array, this may be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function; otherwise, _all_ listeners bound to the
+     *         event type(s) will be removed.
+     */
+    off(targetOrType, typeOrListener, listener) {
+      // Targeting this evented object.
+      if (!targetOrType || isValidEventType(targetOrType)) {
+        off(this.eventBusEl_, targetOrType, typeOrListener);
+
+        // Targeting another evented object.
+      } else {
+        const target = targetOrType;
+        const type = typeOrListener;
+
+        // Fail fast and in a meaningful way!
+        validateTarget(target, this, 'off');
+        validateEventType(type, this, 'off');
+        validateListener(listener, this, 'off');
+
+        // Ensure there's at least a guid, even if the function hasn't been used
+        listener = bind_(this, listener);
+
+        // Remove the dispose listener on this evented object, which was given
+        // the same guid as the event listener in on().
+        this.off('dispose', listener);
+        if (target.nodeName) {
+          off(target, type, listener);
+          off(target, 'dispose', listener);
+        } else if (isEvented(target)) {
+          target.off(type, listener);
+          target.off('dispose', listener);
+        }
+      }
+    },
+    /**
+     * Fire an event on this evented object, causing its listeners to be called.
+     *
+     * @param   {string|Object} event
+     *          An event type or an object with a type property.
+     *
+     * @param   {Object} [hash]
+     *          An additional object to pass along to listeners.
+     *
+     * @return {boolean}
+     *          Whether or not the default behavior was prevented.
+     */
+    trigger(event, hash) {
+      validateTarget(this.eventBusEl_, this, 'trigger');
+      const type = event && typeof event !== 'string' ? event.type : event;
+      if (!isValidEventType(type)) {
+        throw new Error(`Invalid event type for ${objName(this)}#trigger; ` + 'must be a non-empty string or object with a type key that has a non-empty value.');
+      }
+      return trigger(this.eventBusEl_, event, hash);
+    }
+  };
+
+  /**
+   * Applies {@link module:evented~EventedMixin|EventedMixin} to a target object.
+   *
+   * @param  {Object} target
+   *         The object to which to add event methods.
+   *
+   * @param  {Object} [options={}]
+   *         Options for customizing the mixin behavior.
+   *
+   * @param  {string} [options.eventBusKey]
+   *         By default, adds a `eventBusEl_` DOM element to the target object,
+   *         which is used as an event bus. If the target object already has a
+   *         DOM element that should be used, pass its key here.
+   *
+   * @return {Object}
+   *         The target object.
+   */
+  function evented(target, options = {}) {
+    const {
+      eventBusKey
+    } = options;
+
+    // Set or create the eventBusEl_.
+    if (eventBusKey) {
+      if (!target[eventBusKey].nodeName) {
+        throw new Error(`The eventBusKey "${eventBusKey}" does not refer to an element.`);
+      }
+      target.eventBusEl_ = target[eventBusKey];
+    } else {
+      target.eventBusEl_ = createEl('span', {
+        className: 'vjs-event-bus'
+      });
+    }
+    Object.assign(target, EventedMixin);
+    if (target.eventedCallbacks) {
+      target.eventedCallbacks.forEach(callback => {
+        callback();
+      });
+    }
+
+    // When any evented object is disposed, it removes all its listeners.
+    target.on('dispose', () => {
+      target.off();
+      [target, target.el_, target.eventBusEl_].forEach(function (val) {
+        if (val && DomData.has(val)) {
+          DomData.delete(val);
+        }
+      });
+      window.setTimeout(() => {
+        target.eventBusEl_ = null;
+      }, 0);
+    });
+    return target;
+  }
+
+  /**
+   * @file mixins/stateful.js
+   * @module stateful
+   */
+
+  /**
+   * Contains methods that provide statefulness to an object which is passed
+   * to {@link module:stateful}.
+   *
+   * @mixin StatefulMixin
+   */
+  const StatefulMixin = {
+    /**
+     * A hash containing arbitrary keys and values representing the state of
+     * the object.
+     *
+     * @type {Object}
+     */
+    state: {},
+    /**
+     * Set the state of an object by mutating its
+     * {@link module:stateful~StatefulMixin.state|state} object in place.
+     *
+     * @fires   module:stateful~StatefulMixin#statechanged
+     * @param   {Object|Function} stateUpdates
+     *          A new set of properties to shallow-merge into the plugin state.
+     *          Can be a plain object or a function returning a plain object.
+     *
+     * @return {Object|undefined}
+     *          An object containing changes that occurred. If no changes
+     *          occurred, returns `undefined`.
+     */
+    setState(stateUpdates) {
+      // Support providing the `stateUpdates` state as a function.
+      if (typeof stateUpdates === 'function') {
+        stateUpdates = stateUpdates();
+      }
+      let changes;
+      each(stateUpdates, (value, key) => {
+        // Record the change if the value is different from what's in the
+        // current state.
+        if (this.state[key] !== value) {
+          changes = changes || {};
+          changes[key] = {
+            from: this.state[key],
+            to: value
+          };
+        }
+        this.state[key] = value;
+      });
+
+      // Only trigger "statechange" if there were changes AND we have a trigger
+      // function. This allows us to not require that the target object be an
+      // evented object.
+      if (changes && isEvented(this)) {
+        /**
+         * An event triggered on an object that is both
+         * {@link module:stateful|stateful} and {@link module:evented|evented}
+         * indicating that its state has changed.
+         *
+         * @event    module:stateful~StatefulMixin#statechanged
+         * @type     {Object}
+         * @property {Object} changes
+         *           A hash containing the properties that were changed and
+         *           the values they were changed `from` and `to`.
+         */
+        this.trigger({
+          changes,
+          type: 'statechanged'
+        });
+      }
+      return changes;
+    }
+  };
+
+  /**
+   * Applies {@link module:stateful~StatefulMixin|StatefulMixin} to a target
+   * object.
+   *
+   * If the target object is {@link module:evented|evented} and has a
+   * `handleStateChanged` method, that method will be automatically bound to the
+   * `statechanged` event on itself.
+   *
+   * @param   {Object} target
+   *          The object to be made stateful.
+   *
+   * @param   {Object} [defaultState]
+   *          A default set of properties to populate the newly-stateful object's
+   *          `state` property.
+   *
+   * @return {Object}
+   *          Returns the `target`.
+   */
+  function stateful(target, defaultState) {
+    Object.assign(target, StatefulMixin);
+
+    // This happens after the mixing-in because we need to replace the `state`
+    // added in that step.
+    target.state = Object.assign({}, target.state, defaultState);
+
+    // Auto-bind the `handleStateChanged` method of the target object if it exists.
+    if (typeof target.handleStateChanged === 'function' && isEvented(target)) {
+      target.on('statechanged', target.handleStateChanged);
+    }
+    return target;
+  }
+
+  /**
+   * @file str.js
+   * @module to-lower-case
+   */
+
+  /**
+   * Lowercase the first letter of a string.
+   *
+   * @param {string} string
+   *        String to be lowercased
+   *
+   * @return {string}
+   *         The string with a lowercased first letter
+   */
+  const toLowerCase = function (string) {
+    if (typeof string !== 'string') {
+      return string;
+    }
+    return string.replace(/./, w => w.toLowerCase());
+  };
+
+  /**
+   * Uppercase the first letter of a string.
+   *
+   * @param {string} string
+   *        String to be uppercased
+   *
+   * @return {string}
+   *         The string with an uppercased first letter
+   */
+  const toTitleCase$1 = function (string) {
+    if (typeof string !== 'string') {
+      return string;
+    }
+    return string.replace(/./, w => w.toUpperCase());
+  };
+
+  /**
+   * Compares the TitleCase versions of the two strings for equality.
+   *
+   * @param {string} str1
+   *        The first string to compare
+   *
+   * @param {string} str2
+   *        The second string to compare
+   *
+   * @return {boolean}
+   *         Whether the TitleCase versions of the strings are equal
+   */
+  const titleCaseEquals = function (str1, str2) {
+    return toTitleCase$1(str1) === toTitleCase$1(str2);
+  };
+
+  var Str = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    toLowerCase: toLowerCase,
+    toTitleCase: toTitleCase$1,
+    titleCaseEquals: titleCaseEquals
+  });
+
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+  function unwrapExports (x) {
+  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+  }
+
+  function createCommonjsModule(fn, module) {
+  	return module = { exports: {} }, fn(module, module.exports), module.exports;
+  }
+
+  var keycode = createCommonjsModule(function (module, exports) {
+    // Source: http://jsfiddle.net/vWx8V/
+    // http://stackoverflow.com/questions/5603195/full-list-of-javascript-keycodes
+
+    /**
+     * Conenience method returns corresponding value for given keyName or keyCode.
+     *
+     * @param {Mixed} keyCode {Number} or keyName {String}
+     * @return {Mixed}
+     * @api public
+     */
+
+    function keyCode(searchInput) {
+      // Keyboard Events
+      if (searchInput && 'object' === typeof searchInput) {
+        var hasKeyCode = searchInput.which || searchInput.keyCode || searchInput.charCode;
+        if (hasKeyCode) searchInput = hasKeyCode;
+      }
+
+      // Numbers
+      if ('number' === typeof searchInput) return names[searchInput];
+
+      // Everything else (cast to string)
+      var search = String(searchInput);
+
+      // check codes
+      var foundNamedKey = codes[search.toLowerCase()];
+      if (foundNamedKey) return foundNamedKey;
+
+      // check aliases
+      var foundNamedKey = aliases[search.toLowerCase()];
+      if (foundNamedKey) return foundNamedKey;
+
+      // weird character?
+      if (search.length === 1) return search.charCodeAt(0);
+      return undefined;
+    }
+
+    /**
+     * Compares a keyboard event with a given keyCode or keyName.
+     *
+     * @param {Event} event Keyboard event that should be tested
+     * @param {Mixed} keyCode {Number} or keyName {String}
+     * @return {Boolean}
+     * @api public
+     */
+    keyCode.isEventKey = function isEventKey(event, nameOrCode) {
+      if (event && 'object' === typeof event) {
+        var keyCode = event.which || event.keyCode || event.charCode;
+        if (keyCode === null || keyCode === undefined) {
+          return false;
+        }
+        if (typeof nameOrCode === 'string') {
+          // check codes
+          var foundNamedKey = codes[nameOrCode.toLowerCase()];
+          if (foundNamedKey) {
+            return foundNamedKey === keyCode;
+          }
+
+          // check aliases
+          var foundNamedKey = aliases[nameOrCode.toLowerCase()];
+          if (foundNamedKey) {
+            return foundNamedKey === keyCode;
+          }
+        } else if (typeof nameOrCode === 'number') {
+          return nameOrCode === keyCode;
+        }
+        return false;
+      }
+    };
+    exports = module.exports = keyCode;
+
+    /**
+     * Get by name
+     *
+     *   exports.code['enter'] // => 13
+     */
+
+    var codes = exports.code = exports.codes = {
+      'backspace': 8,
+      'tab': 9,
+      'enter': 13,
+      'shift': 16,
+      'ctrl': 17,
+      'alt': 18,
+      'pause/break': 19,
+      'caps lock': 20,
+      'esc': 27,
+      'space': 32,
+      'page up': 33,
+      'page down': 34,
+      'end': 35,
+      'home': 36,
+      'left': 37,
+      'up': 38,
+      'right': 39,
+      'down': 40,
+      'insert': 45,
+      'delete': 46,
+      'command': 91,
+      'left command': 91,
+      'right command': 93,
+      'numpad *': 106,
+      'numpad +': 107,
+      'numpad -': 109,
+      'numpad .': 110,
+      'numpad /': 111,
+      'num lock': 144,
+      'scroll lock': 145,
+      'my computer': 182,
+      'my calculator': 183,
+      ';': 186,
+      '=': 187,
+      ',': 188,
+      '-': 189,
+      '.': 190,
+      '/': 191,
+      '`': 192,
+      '[': 219,
+      '\\': 220,
+      ']': 221,
+      "'": 222
+    };
+
+    // Helper aliases
+
+    var aliases = exports.aliases = {
+      'windows': 91,
+      '⇧': 16,
+      '⌥': 18,
+      '⌃': 17,
+      '⌘': 91,
+      'ctl': 17,
+      'control': 17,
+      'option': 18,
+      'pause': 19,
+      'break': 19,
+      'caps': 20,
+      'return': 13,
+      'escape': 27,
+      'spc': 32,
+      'spacebar': 32,
+      'pgup': 33,
+      'pgdn': 34,
+      'ins': 45,
+      'del': 46,
+      'cmd': 91
+    };
+
+    /*!
+     * Programatically add the following
+     */
+
+    // lower case chars
+    for (i = 97; i < 123; i++) codes[String.fromCharCode(i)] = i - 32;
+
+    // numbers
+    for (var i = 48; i < 58; i++) codes[i - 48] = i;
+
+    // function keys
+    for (i = 1; i < 13; i++) codes['f' + i] = i + 111;
+
+    // numpad keys
+    for (i = 0; i < 10; i++) codes['numpad ' + i] = i + 96;
+
+    /**
+     * Get by code
+     *
+     *   exports.name[13] // => 'Enter'
+     */
+
+    var names = exports.names = exports.title = {}; // title for backward compat
+
+    // Create reverse mapping
+    for (i in codes) names[codes[i]] = i;
+
+    // Add aliases
+    for (var alias in aliases) {
+      codes[alias] = aliases[alias];
+    }
+  });
+  keycode.code;
+  keycode.codes;
+  keycode.aliases;
+  keycode.names;
+  keycode.title;
+
+  /**
+   * Player Component - Base class for all UI objects
+   *
+   * @file component.js
+   */
+
+  /**
+   * Base class for all UI Components.
+   * Components are UI objects which represent both a javascript object and an element
+   * in the DOM. They can be children of other components, and can have
+   * children themselves.
+   *
+   * Components can also use methods from {@link EventTarget}
+   */
+  class Component$1 {
+    /**
+     * A callback that is called when a component is ready. Does not have any
+     * parameters and any callback value will be ignored.
+     *
+     * @callback ReadyCallback
+     * @this Component
+     */
+
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of component options.
+     *
+     * @param {Object[]} [options.children]
+     *        An array of children objects to initialize this component with. Children objects have
+     *        a name property that will be used if more than one component of the same type needs to be
+     *        added.
+     *
+     * @param  {string} [options.className]
+     *         A class or space separated list of classes to add the component
+     *
+     * @param {ReadyCallback} [ready]
+     *        Function that gets called when the `Component` is ready.
+     */
+    constructor(player, options, ready) {
+      // The component might be the player itself and we can't pass `this` to super
+      if (!player && this.play) {
+        this.player_ = player = this; // eslint-disable-line
+      } else {
+        this.player_ = player;
+      }
+      this.isDisposed_ = false;
+
+      // Hold the reference to the parent component via `addChild` method
+      this.parentComponent_ = null;
+
+      // Make a copy of prototype.options_ to protect against overriding defaults
+      this.options_ = merge$2({}, this.options_);
+
+      // Updated options with supplied options
+      options = this.options_ = merge$2(this.options_, options);
+
+      // Get ID from options or options element if one is supplied
+      this.id_ = options.id || options.el && options.el.id;
+
+      // If there was no ID from the options, generate one
+      if (!this.id_) {
+        // Don't require the player ID function in the case of mock players
+        const id = player && player.id && player.id() || 'no_player';
+        this.id_ = `${id}_component_${newGUID()}`;
+      }
+      this.name_ = options.name || null;
+
+      // Create element if one wasn't provided in options
+      if (options.el) {
+        this.el_ = options.el;
+      } else if (options.createEl !== false) {
+        this.el_ = this.createEl();
+      }
+      if (options.className && this.el_) {
+        options.className.split(' ').forEach(c => this.addClass(c));
+      }
+
+      // Remove the placeholder event methods. If the component is evented, the
+      // real methods are added next
+      ['on', 'off', 'one', 'any', 'trigger'].forEach(fn => {
+        this[fn] = undefined;
+      });
+
+      // if evented is anything except false, we want to mixin in evented
+      if (options.evented !== false) {
+        // Make this an evented object and use `el_`, if available, as its event bus
+        evented(this, {
+          eventBusKey: this.el_ ? 'el_' : null
+        });
+        this.handleLanguagechange = this.handleLanguagechange.bind(this);
+        this.on(this.player_, 'languagechange', this.handleLanguagechange);
+      }
+      stateful(this, this.constructor.defaultState);
+      this.children_ = [];
+      this.childIndex_ = {};
+      this.childNameIndex_ = {};
+      this.setTimeoutIds_ = new Set();
+      this.setIntervalIds_ = new Set();
+      this.rafIds_ = new Set();
+      this.namedRafs_ = new Map();
+      this.clearingTimersOnDispose_ = false;
+
+      // Add any child components in options
+      if (options.initChildren !== false) {
+        this.initChildren();
+      }
+
+      // Don't want to trigger ready here or it will go before init is actually
+      // finished for all children that run this constructor
+      this.ready(ready);
+      if (options.reportTouchActivity !== false) {
+        this.enableTouchActivity();
+      }
+    }
+
+    // `on`, `off`, `one`, `any` and `trigger` are here so tsc includes them in definitions.
+    // They are replaced or removed in the constructor
+
+    /**
+     * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+     * function that will get called when an event with a certain name gets triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to call with `EventTarget`s
+     */
+    on(type, fn) {}
+
+    /**
+     * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+     * This makes it so that the `event listener` will no longer get called when the
+     * named event happens.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} [fn]
+     *        The function to remove. If not specified, all listeners managed by Video.js will be removed.
+     */
+    off(type, fn) {}
+
+    /**
+     * This function will add an `event listener` that gets triggered only once. After the
+     * first trigger it will get removed. This is like adding an `event listener`
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    one(type, fn) {}
+
+    /**
+     * This function will add an `event listener` that gets triggered only once and is
+     * removed from all events. This is like adding an array of `event listener`s
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+     * first time it is triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    any(type, fn) {}
+
+    /**
+     * This function causes an event to happen. This will then cause any `event listeners`
+     * that are waiting for that event, to get called. If there are no `event listeners`
+     * for an event then nothing will happen.
+     *
+     * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+     * Trigger will also call the `on` + `uppercaseEventName` function.
+     *
+     * Example:
+     * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+     * `onClick` if it exists.
+     *
+     * @param {string|Event|Object} event
+     *        The name of the event, an `Event`, or an object with a key of type set to
+     *        an event name.
+     *
+     * @param {Object} [hash]
+     *        Optionally extra argument to pass through to an event listener
+     */
+    trigger(event, hash) {}
+
+    /**
+     * Dispose of the `Component` and all child components.
+     *
+     * @fires Component#dispose
+     *
+     * @param {Object} options
+     * @param {Element} options.originalEl element with which to replace player element
+     */
+    dispose(options = {}) {
+      // Bail out if the component has already been disposed.
+      if (this.isDisposed_) {
+        return;
+      }
+      if (this.readyQueue_) {
+        this.readyQueue_.length = 0;
+      }
+
+      /**
+       * Triggered when a `Component` is disposed.
+       *
+       * @event Component#dispose
+       * @type {Event}
+       *
+       * @property {boolean} [bubbles=false]
+       *           set to false so that the dispose event does not
+       *           bubble up
+       */
+      this.trigger({
+        type: 'dispose',
+        bubbles: false
+      });
+      this.isDisposed_ = true;
+
+      // Dispose all children.
+      if (this.children_) {
+        for (let i = this.children_.length - 1; i >= 0; i--) {
+          if (this.children_[i].dispose) {
+            this.children_[i].dispose();
+          }
+        }
+      }
+
+      // Delete child references
+      this.children_ = null;
+      this.childIndex_ = null;
+      this.childNameIndex_ = null;
+      this.parentComponent_ = null;
+      if (this.el_) {
+        // Remove element from DOM
+        if (this.el_.parentNode) {
+          if (options.restoreEl) {
+            this.el_.parentNode.replaceChild(options.restoreEl, this.el_);
+          } else {
+            this.el_.parentNode.removeChild(this.el_);
+          }
+        }
+        this.el_ = null;
+      }
+
+      // remove reference to the player after disposing of the element
+      this.player_ = null;
+    }
+
+    /**
+     * Determine whether or not this component has been disposed.
+     *
+     * @return {boolean}
+     *         If the component has been disposed, will be `true`. Otherwise, `false`.
+     */
+    isDisposed() {
+      return Boolean(this.isDisposed_);
+    }
+
+    /**
+     * Return the {@link Player} that the `Component` has attached to.
+     *
+     * @return { import('./player').default }
+     *         The player that this `Component` has attached to.
+     */
+    player() {
+      return this.player_;
+    }
+
+    /**
+     * Deep merge of options objects with new options.
+     * > Note: When both `obj` and `options` contain properties whose values are objects.
+     *         The two properties get merged using {@link module:obj.merge}
+     *
+     * @param {Object} obj
+     *        The object that contains new options.
+     *
+     * @return {Object}
+     *         A new object of `this.options_` and `obj` merged together.
+     */
+    options(obj) {
+      if (!obj) {
+        return this.options_;
+      }
+      this.options_ = merge$2(this.options_, obj);
+      return this.options_;
+    }
+
+    /**
+     * Get the `Component`s DOM element
+     *
+     * @return {Element}
+     *         The DOM element for this `Component`.
+     */
+    el() {
+      return this.el_;
+    }
+
+    /**
+     * Create the `Component`s DOM element.
+     *
+     * @param {string} [tagName]
+     *        Element's DOM node type. e.g. 'div'
+     *
+     * @param {Object} [properties]
+     *        An object of properties that should be set.
+     *
+     * @param {Object} [attributes]
+     *        An object of attributes that should be set.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tagName, properties, attributes) {
+      return createEl(tagName, properties, attributes);
+    }
+
+    /**
+     * Localize a string given the string in english.
+     *
+     * If tokens are provided, it'll try and run a simple token replacement on the provided string.
+     * The tokens it looks for look like `{1}` with the index being 1-indexed into the tokens array.
+     *
+     * If a `defaultValue` is provided, it'll use that over `string`,
+     * if a value isn't found in provided language files.
+     * This is useful if you want to have a descriptive key for token replacement
+     * but have a succinct localized string and not require `en.json` to be included.
+     *
+     * Currently, it is used for the progress bar timing.
+     * ```js
+     * {
+     *   "progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
+     * }
+     * ```
+     * It is then used like so:
+     * ```js
+     * this.localize('progress bar timing: currentTime={1} duration{2}',
+     *               [this.player_.currentTime(), this.player_.duration()],
+     *               '{1} of {2}');
+     * ```
+     *
+     * Which outputs something like: `01:23 of 24:56`.
+     *
+     *
+     * @param {string} string
+     *        The string to localize and the key to lookup in the language files.
+     * @param {string[]} [tokens]
+     *        If the current item has token replacements, provide the tokens here.
+     * @param {string} [defaultValue]
+     *        Defaults to `string`. Can be a default value to use for token replacement
+     *        if the lookup key is needed to be separate.
+     *
+     * @return {string}
+     *         The localized string or if no localization exists the english string.
+     */
+    localize(string, tokens, defaultValue = string) {
+      const code = this.player_.language && this.player_.language();
+      const languages = this.player_.languages && this.player_.languages();
+      const language = languages && languages[code];
+      const primaryCode = code && code.split('-')[0];
+      const primaryLang = languages && languages[primaryCode];
+      let localizedString = defaultValue;
+      if (language && language[string]) {
+        localizedString = language[string];
+      } else if (primaryLang && primaryLang[string]) {
+        localizedString = primaryLang[string];
+      }
+      if (tokens) {
+        localizedString = localizedString.replace(/\{(\d+)\}/g, function (match, index) {
+          const value = tokens[index - 1];
+          let ret = value;
+          if (typeof value === 'undefined') {
+            ret = match;
+          }
+          return ret;
+        });
+      }
+      return localizedString;
+    }
+
+    /**
+     * Handles language change for the player in components. Should be overridden by sub-components.
+     *
+     * @abstract
+     */
+    handleLanguagechange() {}
+
+    /**
+     * Return the `Component`s DOM element. This is where children get inserted.
+     * This will usually be the the same as the element returned in {@link Component#el}.
+     *
+     * @return {Element}
+     *         The content element for this `Component`.
+     */
+    contentEl() {
+      return this.contentEl_ || this.el_;
+    }
+
+    /**
+     * Get this `Component`s ID
+     *
+     * @return {string}
+     *         The id of this `Component`
+     */
+    id() {
+      return this.id_;
+    }
+
+    /**
+     * Get the `Component`s name. The name gets used to reference the `Component`
+     * and is set during registration.
+     *
+     * @return {string}
+     *         The name of this `Component`.
+     */
+    name() {
+      return this.name_;
+    }
+
+    /**
+     * Get an array of all child components
+     *
+     * @return {Array}
+     *         The children
+     */
+    children() {
+      return this.children_;
+    }
+
+    /**
+     * Returns the child `Component` with the given `id`.
+     *
+     * @param {string} id
+     *        The id of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The child `Component` with the given `id` or undefined.
+     */
+    getChildById(id) {
+      return this.childIndex_[id];
+    }
+
+    /**
+     * Returns the child `Component` with the given `name`.
+     *
+     * @param {string} name
+     *        The name of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The child `Component` with the given `name` or undefined.
+     */
+    getChild(name) {
+      if (!name) {
+        return;
+      }
+      return this.childNameIndex_[name];
+    }
+
+    /**
+     * Returns the descendant `Component` following the givent
+     * descendant `names`. For instance ['foo', 'bar', 'baz'] would
+     * try to get 'foo' on the current component, 'bar' on the 'foo'
+     * component and 'baz' on the 'bar' component and return undefined
+     * if any of those don't exist.
+     *
+     * @param {...string[]|...string} names
+     *        The name of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The descendant `Component` following the given descendant
+     *         `names` or undefined.
+     */
+    getDescendant(...names) {
+      // flatten array argument into the main array
+      names = names.reduce((acc, n) => acc.concat(n), []);
+      let currentChild = this;
+      for (let i = 0; i < names.length; i++) {
+        currentChild = currentChild.getChild(names[i]);
+        if (!currentChild || !currentChild.getChild) {
+          return;
+        }
+      }
+      return currentChild;
+    }
+
+    /**
+     * Adds an SVG icon element to another element or component.
+     *
+     * @param {string} iconName
+     *        The name of icon. A list of all the icon names can be found at 'sandbox/svg-icons.html'
+     *
+     * @param {Element} [el=this.el()]
+     *        Element to set the title on. Defaults to the current Component's element.
+     *
+     * @return {Element}
+     *        The newly created icon element.
+     */
+    setIcon(iconName, el = this.el()) {
+      // TODO: In v9 of video.js, we will want to remove font icons entirely.
+      // This means this check, as well as the others throughout the code, and
+      // the unecessary CSS for font icons, will need to be removed.
+      // See https://github.com/videojs/video.js/pull/8260 as to which components
+      // need updating.
+      if (!this.player_.options_.experimentalSvgIcons) {
+        return;
+      }
+      const xmlnsURL = 'http://www.w3.org/2000/svg';
+
+      // The below creates an element in the format of:
+      // <span><svg><use>....</use></svg></span>
+      const iconContainer = createEl('span', {
+        className: 'vjs-icon-placeholder vjs-svg-icon'
+      }, {
+        'aria-hidden': 'true'
+      });
+      const svgEl = document.createElementNS(xmlnsURL, 'svg');
+      svgEl.setAttributeNS(null, 'viewBox', '0 0 512 512');
+      const useEl = document.createElementNS(xmlnsURL, 'use');
+      svgEl.appendChild(useEl);
+      useEl.setAttributeNS(null, 'href', `#vjs-icon-${iconName}`);
+      iconContainer.appendChild(svgEl);
+
+      // Replace a pre-existing icon if one exists.
+      if (this.iconIsSet_) {
+        el.replaceChild(iconContainer, el.querySelector('.vjs-icon-placeholder'));
+      } else {
+        el.appendChild(iconContainer);
+      }
+      this.iconIsSet_ = true;
+      return iconContainer;
+    }
+
+    /**
+     * Add a child `Component` inside the current `Component`.
+     *
+     * @param {string|Component} child
+     *        The name or instance of a child to add.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of options that will get passed to children of
+     *        the child.
+     *
+     * @param {number} [index=this.children_.length]
+     *        The index to attempt to add a child into.
+     *
+     *
+     * @return {Component}
+     *         The `Component` that gets added as a child. When using a string the
+     *         `Component` will get created by this process.
+     */
+    addChild(child, options = {}, index = this.children_.length) {
+      let component;
+      let componentName;
+
+      // If child is a string, create component with options
+      if (typeof child === 'string') {
+        componentName = toTitleCase$1(child);
+        const componentClassName = options.componentClass || componentName;
+
+        // Set name through options
+        options.name = componentName;
+
+        // Create a new object & element for this controls set
+        // If there's no .player_, this is a player
+        const ComponentClass = Component$1.getComponent(componentClassName);
+        if (!ComponentClass) {
+          throw new Error(`Component ${componentClassName} does not exist`);
+        }
+
+        // data stored directly on the videojs object may be
+        // misidentified as a component to retain
+        // backwards-compatibility with 4.x. check to make sure the
+        // component class can be instantiated.
+        if (typeof ComponentClass !== 'function') {
+          return null;
+        }
+        component = new ComponentClass(this.player_ || this, options);
+
+        // child is a component instance
+      } else {
+        component = child;
+      }
+      if (component.parentComponent_) {
+        component.parentComponent_.removeChild(component);
+      }
+      this.children_.splice(index, 0, component);
+      component.parentComponent_ = this;
+      if (typeof component.id === 'function') {
+        this.childIndex_[component.id()] = component;
+      }
+
+      // If a name wasn't used to create the component, check if we can use the
+      // name function of the component
+      componentName = componentName || component.name && toTitleCase$1(component.name());
+      if (componentName) {
+        this.childNameIndex_[componentName] = component;
+        this.childNameIndex_[toLowerCase(componentName)] = component;
+      }
+
+      // Add the UI object's element to the container div (box)
+      // Having an element is not required
+      if (typeof component.el === 'function' && component.el()) {
+        // If inserting before a component, insert before that component's element
+        let refNode = null;
+        if (this.children_[index + 1]) {
+          // Most children are components, but the video tech is an HTML element
+          if (this.children_[index + 1].el_) {
+            refNode = this.children_[index + 1].el_;
+          } else if (isEl(this.children_[index + 1])) {
+            refNode = this.children_[index + 1];
+          }
+        }
+        this.contentEl().insertBefore(component.el(), refNode);
+      }
+
+      // Return so it can stored on parent object if desired.
+      return component;
+    }
+
+    /**
+     * Remove a child `Component` from this `Component`s list of children. Also removes
+     * the child `Component`s element from this `Component`s element.
+     *
+     * @param {Component} component
+     *        The child `Component` to remove.
+     */
+    removeChild(component) {
+      if (typeof component === 'string') {
+        component = this.getChild(component);
+      }
+      if (!component || !this.children_) {
+        return;
+      }
+      let childFound = false;
+      for (let i = this.children_.length - 1; i >= 0; i--) {
+        if (this.children_[i] === component) {
+          childFound = true;
+          this.children_.splice(i, 1);
+          break;
+        }
+      }
+      if (!childFound) {
+        return;
+      }
+      component.parentComponent_ = null;
+      this.childIndex_[component.id()] = null;
+      this.childNameIndex_[toTitleCase$1(component.name())] = null;
+      this.childNameIndex_[toLowerCase(component.name())] = null;
+      const compEl = component.el();
+      if (compEl && compEl.parentNode === this.contentEl()) {
+        this.contentEl().removeChild(component.el());
+      }
+    }
+
+    /**
+     * Add and initialize default child `Component`s based upon options.
+     */
+    initChildren() {
+      const children = this.options_.children;
+      if (children) {
+        // `this` is `parent`
+        const parentOptions = this.options_;
+        const handleAdd = child => {
+          const name = child.name;
+          let opts = child.opts;
+
+          // Allow options for children to be set at the parent options
+          // e.g. videojs(id, { controlBar: false });
+          // instead of videojs(id, { children: { controlBar: false });
+          if (parentOptions[name] !== undefined) {
+            opts = parentOptions[name];
+          }
+
+          // Allow for disabling default components
+          // e.g. options['children']['posterImage'] = false
+          if (opts === false) {
+            return;
+          }
+
+          // Allow options to be passed as a simple boolean if no configuration
+          // is necessary.
+          if (opts === true) {
+            opts = {};
+          }
+
+          // We also want to pass the original player options
+          // to each component as well so they don't need to
+          // reach back into the player for options later.
+          opts.playerOptions = this.options_.playerOptions;
+
+          // Create and add the child component.
+          // Add a direct reference to the child by name on the parent instance.
+          // If two of the same component are used, different names should be supplied
+          // for each
+          const newChild = this.addChild(name, opts);
+          if (newChild) {
+            this[name] = newChild;
+          }
+        };
+
+        // Allow for an array of children details to passed in the options
+        let workingChildren;
+        const Tech = Component$1.getComponent('Tech');
+        if (Array.isArray(children)) {
+          workingChildren = children;
+        } else {
+          workingChildren = Object.keys(children);
+        }
+        workingChildren
+        // children that are in this.options_ but also in workingChildren  would
+        // give us extra children we do not want. So, we want to filter them out.
+        .concat(Object.keys(this.options_).filter(function (child) {
+          return !workingChildren.some(function (wchild) {
+            if (typeof wchild === 'string') {
+              return child === wchild;
+            }
+            return child === wchild.name;
+          });
+        })).map(child => {
+          let name;
+          let opts;
+          if (typeof child === 'string') {
+            name = child;
+            opts = children[name] || this.options_[name] || {};
+          } else {
+            name = child.name;
+            opts = child;
+          }
+          return {
+            name,
+            opts
+          };
+        }).filter(child => {
+          // we have to make sure that child.name isn't in the techOrder since
+          // techs are registered as Components but can't aren't compatible
+          // See https://github.com/videojs/video.js/issues/2772
+          const c = Component$1.getComponent(child.opts.componentClass || toTitleCase$1(child.name));
+          return c && !Tech.isTech(c);
+        }).forEach(handleAdd);
+      }
+    }
+
+    /**
+     * Builds the default DOM class name. Should be overridden by sub-components.
+     *
+     * @return {string}
+     *         The DOM class name for this object.
+     *
+     * @abstract
+     */
+    buildCSSClass() {
+      // Child classes can include a function that does:
+      // return 'CLASS NAME' + this._super();
+      return '';
+    }
+
+    /**
+     * Bind a listener to the component's ready state.
+     * Different from event listeners in that if the ready event has already happened
+     * it will trigger the function immediately.
+     *
+     * @param {ReadyCallback} fn
+     *        Function that gets called when the `Component` is ready.
+     *
+     * @return {Component}
+     *         Returns itself; method can be chained.
+     */
+    ready(fn, sync = false) {
+      if (!fn) {
+        return;
+      }
+      if (!this.isReady_) {
+        this.readyQueue_ = this.readyQueue_ || [];
+        this.readyQueue_.push(fn);
+        return;
+      }
+      if (sync) {
+        fn.call(this);
+      } else {
+        // Call the function asynchronously by default for consistency
+        this.setTimeout(fn, 1);
+      }
+    }
+
+    /**
+     * Trigger all the ready listeners for this `Component`.
+     *
+     * @fires Component#ready
+     */
+    triggerReady() {
+      this.isReady_ = true;
+
+      // Ensure ready is triggered asynchronously
+      this.setTimeout(function () {
+        const readyQueue = this.readyQueue_;
+
+        // Reset Ready Queue
+        this.readyQueue_ = [];
+        if (readyQueue && readyQueue.length > 0) {
+          readyQueue.forEach(function (fn) {
+            fn.call(this);
+          }, this);
+        }
+
+        // Allow for using event listeners also
+        /**
+         * Triggered when a `Component` is ready.
+         *
+         * @event Component#ready
+         * @type {Event}
+         */
+        this.trigger('ready');
+      }, 1);
+    }
+
+    /**
+     * Find a single DOM element matching a `selector`. This can be within the `Component`s
+     * `contentEl()` or another custom context.
+     *
+     * @param {string} selector
+     *        A valid CSS selector, which will be passed to `querySelector`.
+     *
+     * @param {Element|string} [context=this.contentEl()]
+     *        A DOM element within which to query. Can also be a selector string in
+     *        which case the first matching element will get used as context. If
+     *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+     *        nothing it falls back to `document`.
+     *
+     * @return {Element|null}
+     *         the dom element that was found, or null
+     *
+     * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+     */
+    $(selector, context) {
+      return $(selector, context || this.contentEl());
+    }
+
+    /**
+     * Finds all DOM element matching a `selector`. This can be within the `Component`s
+     * `contentEl()` or another custom context.
+     *
+     * @param {string} selector
+     *        A valid CSS selector, which will be passed to `querySelectorAll`.
+     *
+     * @param {Element|string} [context=this.contentEl()]
+     *        A DOM element within which to query. Can also be a selector string in
+     *        which case the first matching element will get used as context. If
+     *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+     *        nothing it falls back to `document`.
+     *
+     * @return {NodeList}
+     *         a list of dom elements that were found
+     *
+     * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+     */
+    $$(selector, context) {
+      return $$(selector, context || this.contentEl());
+    }
+
+    /**
+     * Check if a component's element has a CSS class name.
+     *
+     * @param {string} classToCheck
+     *        CSS class name to check.
+     *
+     * @return {boolean}
+     *         - True if the `Component` has the class.
+     *         - False if the `Component` does not have the class`
+     */
+    hasClass(classToCheck) {
+      return hasClass(this.el_, classToCheck);
+    }
+
+    /**
+     * Add a CSS class name to the `Component`s element.
+     *
+     * @param {...string} classesToAdd
+     *        One or more CSS class name to add.
+     */
+    addClass(...classesToAdd) {
+      addClass(this.el_, ...classesToAdd);
+    }
+
+    /**
+     * Remove a CSS class name from the `Component`s element.
+     *
+     * @param {...string} classesToRemove
+     *        One or more CSS class name to remove.
+     */
+    removeClass(...classesToRemove) {
+      removeClass(this.el_, ...classesToRemove);
+    }
+
+    /**
+     * Add or remove a CSS class name from the component's element.
+     * - `classToToggle` gets added when {@link Component#hasClass} would return false.
+     * - `classToToggle` gets removed when {@link Component#hasClass} would return true.
+     *
+     * @param  {string} classToToggle
+     *         The class to add or remove based on (@link Component#hasClass}
+     *
+     * @param  {boolean|Dom~predicate} [predicate]
+     *         An {@link Dom~predicate} function or a boolean
+     */
+    toggleClass(classToToggle, predicate) {
+      toggleClass(this.el_, classToToggle, predicate);
+    }
+
+    /**
+     * Show the `Component`s element if it is hidden by removing the
+     * 'vjs-hidden' class name from it.
+     */
+    show() {
+      this.removeClass('vjs-hidden');
+    }
+
+    /**
+     * Hide the `Component`s element if it is currently showing by adding the
+     * 'vjs-hidden` class name to it.
+     */
+    hide() {
+      this.addClass('vjs-hidden');
+    }
+
+    /**
+     * Lock a `Component`s element in its visible state by adding the 'vjs-lock-showing'
+     * class name to it. Used during fadeIn/fadeOut.
+     *
+     * @private
+     */
+    lockShowing() {
+      this.addClass('vjs-lock-showing');
+    }
+
+    /**
+     * Unlock a `Component`s element from its visible state by removing the 'vjs-lock-showing'
+     * class name from it. Used during fadeIn/fadeOut.
+     *
+     * @private
+     */
+    unlockShowing() {
+      this.removeClass('vjs-lock-showing');
+    }
+
+    /**
+     * Get the value of an attribute on the `Component`s element.
+     *
+     * @param {string} attribute
+     *        Name of the attribute to get the value from.
+     *
+     * @return {string|null}
+     *         - The value of the attribute that was asked for.
+     *         - Can be an empty string on some browsers if the attribute does not exist
+     *           or has no value
+     *         - Most browsers will return null if the attribute does not exist or has
+     *           no value.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute}
+     */
+    getAttribute(attribute) {
+      return getAttribute(this.el_, attribute);
+    }
+
+    /**
+     * Set the value of an attribute on the `Component`'s element
+     *
+     * @param {string} attribute
+     *        Name of the attribute to set.
+     *
+     * @param {string} value
+     *        Value to set the attribute to.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute}
+     */
+    setAttribute(attribute, value) {
+      setAttribute(this.el_, attribute, value);
+    }
+
+    /**
+     * Remove an attribute from the `Component`s element.
+     *
+     * @param {string} attribute
+     *        Name of the attribute to remove.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute}
+     */
+    removeAttribute(attribute) {
+      removeAttribute(this.el_, attribute);
+    }
+
+    /**
+     * Get or set the width of the component based upon the CSS styles.
+     * See {@link Component#dimension} for more detailed information.
+     *
+     * @param {number|string} [num]
+     *        The width that you want to set postfixed with '%', 'px' or nothing.
+     *
+     * @param {boolean} [skipListeners]
+     *        Skip the componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The width when getting, zero if there is no width
+     */
+    width(num, skipListeners) {
+      return this.dimension('width', num, skipListeners);
+    }
+
+    /**
+     * Get or set the height of the component based upon the CSS styles.
+     * See {@link Component#dimension} for more detailed information.
+     *
+     * @param {number|string} [num]
+     *        The height that you want to set postfixed with '%', 'px' or nothing.
+     *
+     * @param {boolean} [skipListeners]
+     *        Skip the componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The height when getting, zero if there is no height
+     */
+    height(num, skipListeners) {
+      return this.dimension('height', num, skipListeners);
+    }
+
+    /**
+     * Set both the width and height of the `Component` element at the same time.
+     *
+     * @param  {number|string} width
+     *         Width to set the `Component`s element to.
+     *
+     * @param  {number|string} height
+     *         Height to set the `Component`s element to.
+     */
+    dimensions(width, height) {
+      // Skip componentresize listeners on width for optimization
+      this.width(width, true);
+      this.height(height);
+    }
+
+    /**
+     * Get or set width or height of the `Component` element. This is the shared code
+     * for the {@link Component#width} and {@link Component#height}.
+     *
+     * Things to know:
+     * - If the width or height in an number this will return the number postfixed with 'px'.
+     * - If the width/height is a percent this will return the percent postfixed with '%'
+     * - Hidden elements have a width of 0 with `window.getComputedStyle`. This function
+     *   defaults to the `Component`s `style.width` and falls back to `window.getComputedStyle`.
+     *   See [this]{@link http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/}
+     *   for more information
+     * - If you want the computed style of the component, use {@link Component#currentWidth}
+     *   and {@link {Component#currentHeight}
+     *
+     * @fires Component#componentresize
+     *
+     * @param {string} widthOrHeight
+     8        'width' or 'height'
+     *
+     * @param  {number|string} [num]
+     8         New dimension
+     *
+     * @param  {boolean} [skipListeners]
+     *         Skip componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The dimension when getting or 0 if unset
+     */
+    dimension(widthOrHeight, num, skipListeners) {
+      if (num !== undefined) {
+        // Set to zero if null or literally NaN (NaN !== NaN)
+        if (num === null || num !== num) {
+          num = 0;
+        }
+
+        // Check if using css width/height (% or px) and adjust
+        if (('' + num).indexOf('%') !== -1 || ('' + num).indexOf('px') !== -1) {
+          this.el_.style[widthOrHeight] = num;
+        } else if (num === 'auto') {
+          this.el_.style[widthOrHeight] = '';
+        } else {
+          this.el_.style[widthOrHeight] = num + 'px';
+        }
+
+        // skipListeners allows us to avoid triggering the resize event when setting both width and height
+        if (!skipListeners) {
+          /**
+           * Triggered when a component is resized.
+           *
+           * @event Component#componentresize
+           * @type {Event}
+           */
+          this.trigger('componentresize');
+        }
+        return;
+      }
+
+      // Not setting a value, so getting it
+      // Make sure element exists
+      if (!this.el_) {
+        return 0;
+      }
+
+      // Get dimension value from style
+      const val = this.el_.style[widthOrHeight];
+      const pxIndex = val.indexOf('px');
+      if (pxIndex !== -1) {
+        // Return the pixel value with no 'px'
+        return parseInt(val.slice(0, pxIndex), 10);
+      }
+
+      // No px so using % or no style was set, so falling back to offsetWidth/height
+      // If component has display:none, offset will return 0
+      // TODO: handle display:none and no dimension style using px
+      return parseInt(this.el_['offset' + toTitleCase$1(widthOrHeight)], 10);
+    }
+
+    /**
+     * Get the computed width or the height of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @param {string} widthOrHeight
+     *        A string containing 'width' or 'height'. Whichever one you want to get.
+     *
+     * @return {number}
+     *         The dimension that gets asked for or 0 if nothing was set
+     *         for that dimension.
+     */
+    currentDimension(widthOrHeight) {
+      let computedWidthOrHeight = 0;
+      if (widthOrHeight !== 'width' && widthOrHeight !== 'height') {
+        throw new Error('currentDimension only accepts width or height value');
+      }
+      computedWidthOrHeight = computedStyle(this.el_, widthOrHeight);
+
+      // remove 'px' from variable and parse as integer
+      computedWidthOrHeight = parseFloat(computedWidthOrHeight);
+
+      // if the computed value is still 0, it's possible that the browser is lying
+      // and we want to check the offset values.
+      // This code also runs wherever getComputedStyle doesn't exist.
+      if (computedWidthOrHeight === 0 || isNaN(computedWidthOrHeight)) {
+        const rule = `offset${toTitleCase$1(widthOrHeight)}`;
+        computedWidthOrHeight = this.el_[rule];
+      }
+      return computedWidthOrHeight;
+    }
+
+    /**
+     * An object that contains width and height values of the `Component`s
+     * computed style. Uses `window.getComputedStyle`.
+     *
+     * @typedef {Object} Component~DimensionObject
+     *
+     * @property {number} width
+     *           The width of the `Component`s computed style.
+     *
+     * @property {number} height
+     *           The height of the `Component`s computed style.
+     */
+
+    /**
+     * Get an object that contains computed width and height values of the
+     * component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {Component~DimensionObject}
+     *         The computed dimensions of the component's element.
+     */
+    currentDimensions() {
+      return {
+        width: this.currentDimension('width'),
+        height: this.currentDimension('height')
+      };
+    }
+
+    /**
+     * Get the computed width of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {number}
+     *         The computed width of the component's element.
+     */
+    currentWidth() {
+      return this.currentDimension('width');
+    }
+
+    /**
+     * Get the computed height of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {number}
+     *         The computed height of the component's element.
+     */
+    currentHeight() {
+      return this.currentDimension('height');
+    }
+
+    /**
+     * Set the focus to this component
+     */
+    focus() {
+      this.el_.focus();
+    }
+
+    /**
+     * Remove the focus from this component
+     */
+    blur() {
+      this.el_.blur();
+    }
+
+    /**
+     * When this Component receives a `keydown` event which it does not process,
+     *  it passes the event to the Player for handling.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     */
+    handleKeyDown(event) {
+      if (this.player_) {
+        // We only stop propagation here because we want unhandled events to fall
+        // back to the browser. Exclude Tab for focus trapping.
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.stopPropagation();
+        }
+        this.player_.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Many components used to have a `handleKeyPress` method, which was poorly
+     * named because it listened to a `keydown` event. This method name now
+     * delegates to `handleKeyDown`. This means anyone calling `handleKeyPress`
+     * will not see their method calls stop working.
+     *
+     * @param {KeyboardEvent} event
+     *        The event that caused this function to be called.
+     */
+    handleKeyPress(event) {
+      this.handleKeyDown(event);
+    }
+
+    /**
+     * Emit a 'tap' events when touch event support gets detected. This gets used to
+     * support toggling the controls through a tap on the video. They get enabled
+     * because every sub-component would have extra overhead otherwise.
+     *
+     * @protected
+     * @fires Component#tap
+     * @listens Component#touchstart
+     * @listens Component#touchmove
+     * @listens Component#touchleave
+     * @listens Component#touchcancel
+     * @listens Component#touchend
+      */
+    emitTapEvents() {
+      // Track the start time so we can determine how long the touch lasted
+      let touchStart = 0;
+      let firstTouch = null;
+
+      // Maximum movement allowed during a touch event to still be considered a tap
+      // Other popular libs use anywhere from 2 (hammer.js) to 15,
+      // so 10 seems like a nice, round number.
+      const tapMovementThreshold = 10;
+
+      // The maximum length a touch can be while still being considered a tap
+      const touchTimeThreshold = 200;
+      let couldBeTap;
+      this.on('touchstart', function (event) {
+        // If more than one finger, don't consider treating this as a click
+        if (event.touches.length === 1) {
+          // Copy pageX/pageY from the object
+          firstTouch = {
+            pageX: event.touches[0].pageX,
+            pageY: event.touches[0].pageY
+          };
+          // Record start time so we can detect a tap vs. "touch and hold"
+          touchStart = window.performance.now();
+          // Reset couldBeTap tracking
+          couldBeTap = true;
+        }
+      });
+      this.on('touchmove', function (event) {
+        // If more than one finger, don't consider treating this as a click
+        if (event.touches.length > 1) {
+          couldBeTap = false;
+        } else if (firstTouch) {
+          // Some devices will throw touchmoves for all but the slightest of taps.
+          // So, if we moved only a small distance, this could still be a tap
+          const xdiff = event.touches[0].pageX - firstTouch.pageX;
+          const ydiff = event.touches[0].pageY - firstTouch.pageY;
+          const touchDistance = Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+          if (touchDistance > tapMovementThreshold) {
+            couldBeTap = false;
+          }
+        }
+      });
+      const noTap = function () {
+        couldBeTap = false;
+      };
+
+      // TODO: Listen to the original target. http://youtu.be/DujfpXOKUp8?t=13m8s
+      this.on('touchleave', noTap);
+      this.on('touchcancel', noTap);
+
+      // When the touch ends, measure how long it took and trigger the appropriate
+      // event
+      this.on('touchend', function (event) {
+        firstTouch = null;
+        // Proceed only if the touchmove/leave/cancel event didn't happen
+        if (couldBeTap === true) {
+          // Measure how long the touch lasted
+          const touchTime = window.performance.now() - touchStart;
+
+          // Make sure the touch was less than the threshold to be considered a tap
+          if (touchTime < touchTimeThreshold) {
+            // Don't let browser turn this into a click
+            event.preventDefault();
+            /**
+             * Triggered when a `Component` is tapped.
+             *
+             * @event Component#tap
+             * @type {MouseEvent}
+             */
+            this.trigger('tap');
+            // It may be good to copy the touchend event object and change the
+            // type to tap, if the other event properties aren't exact after
+            // Events.fixEvent runs (e.g. event.target)
+          }
+        }
+      });
+    }
+
+    /**
+     * This function reports user activity whenever touch events happen. This can get
+     * turned off by any sub-components that wants touch events to act another way.
+     *
+     * Report user touch activity when touch events occur. User activity gets used to
+     * determine when controls should show/hide. It is simple when it comes to mouse
+     * events, because any mouse event should show the controls. So we capture mouse
+     * events that bubble up to the player and report activity when that happens.
+     * With touch events it isn't as easy as `touchstart` and `touchend` toggle player
+     * controls. So touch events can't help us at the player level either.
+     *
+     * User activity gets checked asynchronously. So what could happen is a tap event
+     * on the video turns the controls off. Then the `touchend` event bubbles up to
+     * the player. Which, if it reported user activity, would turn the controls right
+     * back on. We also don't want to completely block touch events from bubbling up.
+     * Furthermore a `touchmove` event and anything other than a tap, should not turn
+     * controls back on.
+     *
+     * @listens Component#touchstart
+     * @listens Component#touchmove
+     * @listens Component#touchend
+     * @listens Component#touchcancel
+     */
+    enableTouchActivity() {
+      // Don't continue if the root player doesn't support reporting user activity
+      if (!this.player() || !this.player().reportUserActivity) {
+        return;
+      }
+
+      // listener for reporting that the user is active
+      const report = bind_(this.player(), this.player().reportUserActivity);
+      let touchHolding;
+      this.on('touchstart', function () {
+        report();
+        // For as long as the they are touching the device or have their mouse down,
+        // we consider them active even if they're not moving their finger or mouse.
+        // So we want to continue to update that they are active
+        this.clearInterval(touchHolding);
+        // report at the same interval as activityCheck
+        touchHolding = this.setInterval(report, 250);
+      });
+      const touchEnd = function (event) {
+        report();
+        // stop the interval that maintains activity if the touch is holding
+        this.clearInterval(touchHolding);
+      };
+      this.on('touchmove', report);
+      this.on('touchend', touchEnd);
+      this.on('touchcancel', touchEnd);
+    }
+
+    /**
+     * A callback that has no parameters and is bound into `Component`s context.
+     *
+     * @callback Component~GenericCallback
+     * @this Component
+     */
+
+    /**
+     * Creates a function that runs after an `x` millisecond timeout. This function is a
+     * wrapper around `window.setTimeout`. There are a few reasons to use this one
+     * instead though:
+     * 1. It gets cleared via  {@link Component#clearTimeout} when
+     *    {@link Component#dispose} gets called.
+     * 2. The function callback will gets turned into a {@link Component~GenericCallback}
+     *
+     * > Note: You can't use `window.clearTimeout` on the id returned by this function. This
+     *         will cause its dispose listener not to get cleaned up! Please use
+     *         {@link Component#clearTimeout} or {@link Component#dispose} instead.
+     *
+     * @param {Component~GenericCallback} fn
+     *        The function that will be run after `timeout`.
+     *
+     * @param {number} timeout
+     *        Timeout in milliseconds to delay before executing the specified function.
+     *
+     * @return {number}
+     *         Returns a timeout ID that gets used to identify the timeout. It can also
+     *         get used in {@link Component#clearTimeout} to clear the timeout that
+     *         was set.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout}
+     */
+    setTimeout(fn, timeout) {
+      // declare as variables so they are properly available in timeout function
+      // eslint-disable-next-line
+      var timeoutId;
+      fn = bind_(this, fn);
+      this.clearTimersOnDispose_();
+      timeoutId = window.setTimeout(() => {
+        if (this.setTimeoutIds_.has(timeoutId)) {
+          this.setTimeoutIds_.delete(timeoutId);
+        }
+        fn();
+      }, timeout);
+      this.setTimeoutIds_.add(timeoutId);
+      return timeoutId;
+    }
+
+    /**
+     * Clears a timeout that gets created via `window.setTimeout` or
+     * {@link Component#setTimeout}. If you set a timeout via {@link Component#setTimeout}
+     * use this function instead of `window.clearTimout`. If you don't your dispose
+     * listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} timeoutId
+     *        The id of the timeout to clear. The return value of
+     *        {@link Component#setTimeout} or `window.setTimeout`.
+     *
+     * @return {number}
+     *         Returns the timeout id that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout}
+     */
+    clearTimeout(timeoutId) {
+      if (this.setTimeoutIds_.has(timeoutId)) {
+        this.setTimeoutIds_.delete(timeoutId);
+        window.clearTimeout(timeoutId);
+      }
+      return timeoutId;
+    }
+
+    /**
+     * Creates a function that gets run every `x` milliseconds. This function is a wrapper
+     * around `window.setInterval`. There are a few reasons to use this one instead though.
+     * 1. It gets cleared via  {@link Component#clearInterval} when
+     *    {@link Component#dispose} gets called.
+     * 2. The function callback will be a {@link Component~GenericCallback}
+     *
+     * @param {Component~GenericCallback} fn
+     *        The function to run every `x` seconds.
+     *
+     * @param {number} interval
+     *        Execute the specified function every `x` milliseconds.
+     *
+     * @return {number}
+     *         Returns an id that can be used to identify the interval. It can also be be used in
+     *         {@link Component#clearInterval} to clear the interval.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval}
+     */
+    setInterval(fn, interval) {
+      fn = bind_(this, fn);
+      this.clearTimersOnDispose_();
+      const intervalId = window.setInterval(fn, interval);
+      this.setIntervalIds_.add(intervalId);
+      return intervalId;
+    }
+
+    /**
+     * Clears an interval that gets created via `window.setInterval` or
+     * {@link Component#setInterval}. If you set an interval via {@link Component#setInterval}
+     * use this function instead of `window.clearInterval`. If you don't your dispose
+     * listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} intervalId
+     *        The id of the interval to clear. The return value of
+     *        {@link Component#setInterval} or `window.setInterval`.
+     *
+     * @return {number}
+     *         Returns the interval id that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval}
+     */
+    clearInterval(intervalId) {
+      if (this.setIntervalIds_.has(intervalId)) {
+        this.setIntervalIds_.delete(intervalId);
+        window.clearInterval(intervalId);
+      }
+      return intervalId;
+    }
+
+    /**
+     * Queues up a callback to be passed to requestAnimationFrame (rAF), but
+     * with a few extra bonuses:
+     *
+     * - Supports browsers that do not support rAF by falling back to
+     *   {@link Component#setTimeout}.
+     *
+     * - The callback is turned into a {@link Component~GenericCallback} (i.e.
+     *   bound to the component).
+     *
+     * - Automatic cancellation of the rAF callback is handled if the component
+     *   is disposed before it is called.
+     *
+     * @param  {Component~GenericCallback} fn
+     *         A function that will be bound to this component and executed just
+     *         before the browser's next repaint.
+     *
+     * @return {number}
+     *         Returns an rAF ID that gets used to identify the timeout. It can
+     *         also be used in {@link Component#cancelAnimationFrame} to cancel
+     *         the animation frame callback.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame}
+     */
+    requestAnimationFrame(fn) {
+      this.clearTimersOnDispose_();
+
+      // declare as variables so they are properly available in rAF function
+      // eslint-disable-next-line
+      var id;
+      fn = bind_(this, fn);
+      id = window.requestAnimationFrame(() => {
+        if (this.rafIds_.has(id)) {
+          this.rafIds_.delete(id);
+        }
+        fn();
+      });
+      this.rafIds_.add(id);
+      return id;
+    }
+
+    /**
+     * Request an animation frame, but only one named animation
+     * frame will be queued. Another will never be added until
+     * the previous one finishes.
+     *
+     * @param {string} name
+     *        The name to give this requestAnimationFrame
+     *
+     * @param  {Component~GenericCallback} fn
+     *         A function that will be bound to this component and executed just
+     *         before the browser's next repaint.
+     */
+    requestNamedAnimationFrame(name, fn) {
+      if (this.namedRafs_.has(name)) {
+        return;
+      }
+      this.clearTimersOnDispose_();
+      fn = bind_(this, fn);
+      const id = this.requestAnimationFrame(() => {
+        fn();
+        if (this.namedRafs_.has(name)) {
+          this.namedRafs_.delete(name);
+        }
+      });
+      this.namedRafs_.set(name, id);
+      return name;
+    }
+
+    /**
+     * Cancels a current named animation frame if it exists.
+     *
+     * @param {string} name
+     *        The name of the requestAnimationFrame to cancel.
+     */
+    cancelNamedAnimationFrame(name) {
+      if (!this.namedRafs_.has(name)) {
+        return;
+      }
+      this.cancelAnimationFrame(this.namedRafs_.get(name));
+      this.namedRafs_.delete(name);
+    }
+
+    /**
+     * Cancels a queued callback passed to {@link Component#requestAnimationFrame}
+     * (rAF).
+     *
+     * If you queue an rAF callback via {@link Component#requestAnimationFrame},
+     * use this function instead of `window.cancelAnimationFrame`. If you don't,
+     * your dispose listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} id
+     *        The rAF ID to clear. The return value of {@link Component#requestAnimationFrame}.
+     *
+     * @return {number}
+     *         Returns the rAF ID that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/cancelAnimationFrame}
+     */
+    cancelAnimationFrame(id) {
+      if (this.rafIds_.has(id)) {
+        this.rafIds_.delete(id);
+        window.cancelAnimationFrame(id);
+      }
+      return id;
+    }
+
+    /**
+     * A function to setup `requestAnimationFrame`, `setTimeout`,
+     * and `setInterval`, clearing on dispose.
+     *
+     * > Previously each timer added and removed dispose listeners on it's own.
+     * For better performance it was decided to batch them all, and use `Set`s
+     * to track outstanding timer ids.
+     *
+     * @private
+     */
+    clearTimersOnDispose_() {
+      if (this.clearingTimersOnDispose_) {
+        return;
+      }
+      this.clearingTimersOnDispose_ = true;
+      this.one('dispose', () => {
+        [['namedRafs_', 'cancelNamedAnimationFrame'], ['rafIds_', 'cancelAnimationFrame'], ['setTimeoutIds_', 'clearTimeout'], ['setIntervalIds_', 'clearInterval']].forEach(([idName, cancelName]) => {
+          // for a `Set` key will actually be the value again
+          // so forEach((val, val) =>` but for maps we want to use
+          // the key.
+          this[idName].forEach((val, key) => this[cancelName](key));
+        });
+        this.clearingTimersOnDispose_ = false;
+      });
+    }
+
+    /**
+     * Register a `Component` with `videojs` given the name and the component.
+     *
+     * > NOTE: {@link Tech}s should not be registered as a `Component`. {@link Tech}s
+     *         should be registered using {@link Tech.registerTech} or
+     *         {@link videojs:videojs.registerTech}.
+     *
+     * > NOTE: This function can also be seen on videojs as
+     *         {@link videojs:videojs.registerComponent}.
+     *
+     * @param {string} name
+     *        The name of the `Component` to register.
+     *
+     * @param {Component} ComponentToRegister
+     *        The `Component` class to register.
+     *
+     * @return {Component}
+     *         The `Component` that was registered.
+     */
+    static registerComponent(name, ComponentToRegister) {
+      if (typeof name !== 'string' || !name) {
+        throw new Error(`Illegal component name, "${name}"; must be a non-empty string.`);
+      }
+      const Tech = Component$1.getComponent('Tech');
+
+      // We need to make sure this check is only done if Tech has been registered.
+      const isTech = Tech && Tech.isTech(ComponentToRegister);
+      const isComp = Component$1 === ComponentToRegister || Component$1.prototype.isPrototypeOf(ComponentToRegister.prototype);
+      if (isTech || !isComp) {
+        let reason;
+        if (isTech) {
+          reason = 'techs must be registered using Tech.registerTech()';
+        } else {
+          reason = 'must be a Component subclass';
+        }
+        throw new Error(`Illegal component, "${name}"; ${reason}.`);
+      }
+      name = toTitleCase$1(name);
+      if (!Component$1.components_) {
+        Component$1.components_ = {};
+      }
+      const Player = Component$1.getComponent('Player');
+      if (name === 'Player' && Player && Player.players) {
+        const players = Player.players;
+        const playerNames = Object.keys(players);
+
+        // If we have players that were disposed, then their name will still be
+        // in Players.players. So, we must loop through and verify that the value
+        // for each item is not null. This allows registration of the Player component
+        // after all players have been disposed or before any were created.
+        if (players && playerNames.length > 0 && playerNames.map(pname => players[pname]).every(Boolean)) {
+          throw new Error('Can not register Player component after player has been created.');
+        }
+      }
+      Component$1.components_[name] = ComponentToRegister;
+      Component$1.components_[toLowerCase(name)] = ComponentToRegister;
+      return ComponentToRegister;
+    }
+
+    /**
+     * Get a `Component` based on the name it was registered with.
+     *
+     * @param {string} name
+     *        The Name of the component to get.
+     *
+     * @return {typeof Component}
+     *         The `Component` that got registered under the given name.
+     */
+    static getComponent(name) {
+      if (!name || !Component$1.components_) {
+        return;
+      }
+      return Component$1.components_[name];
+    }
+  }
+  Component$1.registerComponent('Component', Component$1);
+
+  /**
+   * @file time.js
+   * @module time
+   */
+
+  /**
+   * Returns the time for the specified index at the start or end
+   * of a TimeRange object.
+   *
+   * @typedef    {Function} TimeRangeIndex
+   *
+   * @param      {number} [index=0]
+   *             The range number to return the time for.
+   *
+   * @return     {number}
+   *             The time offset at the specified index.
+   *
+   * @deprecated The index argument must be provided.
+   *             In the future, leaving it out will throw an error.
+   */
+
+  /**
+   * An object that contains ranges of time, which mimics {@link TimeRanges}.
+   *
+   * @typedef  {Object} TimeRange
+   *
+   * @property {number} length
+   *           The number of time ranges represented by this object.
+   *
+   * @property {module:time~TimeRangeIndex} start
+   *           Returns the time offset at which a specified time range begins.
+   *
+   * @property {module:time~TimeRangeIndex} end
+   *           Returns the time offset at which a specified time range ends.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges
+   */
+
+  /**
+   * Check if any of the time ranges are over the maximum index.
+   *
+   * @private
+   * @param   {string} fnName
+   *          The function name to use for logging
+   *
+   * @param   {number} index
+   *          The index to check
+   *
+   * @param   {number} maxIndex
+   *          The maximum possible index
+   *
+   * @throws  {Error} if the timeRanges provided are over the maxIndex
+   */
+  function rangeCheck(fnName, index, maxIndex) {
+    if (typeof index !== 'number' || index < 0 || index > maxIndex) {
+      throw new Error(`Failed to execute '${fnName}' on 'TimeRanges': The index provided (${index}) is non-numeric or out of bounds (0-${maxIndex}).`);
+    }
+  }
+
+  /**
+   * Get the time for the specified index at the start or end
+   * of a TimeRange object.
+   *
+   * @private
+   * @param      {string} fnName
+   *             The function name to use for logging
+   *
+   * @param      {string} valueIndex
+   *             The property that should be used to get the time. should be
+   *             'start' or 'end'
+   *
+   * @param      {Array} ranges
+   *             An array of time ranges
+   *
+   * @param      {Array} [rangeIndex=0]
+   *             The index to start the search at
+   *
+   * @return     {number}
+   *             The time that offset at the specified index.
+   *
+   * @deprecated rangeIndex must be set to a value, in the future this will throw an error.
+   * @throws     {Error} if rangeIndex is more than the length of ranges
+   */
+  function getRange(fnName, valueIndex, ranges, rangeIndex) {
+    rangeCheck(fnName, rangeIndex, ranges.length - 1);
+    return ranges[rangeIndex][valueIndex];
+  }
+
+  /**
+   * Create a time range object given ranges of time.
+   *
+   * @private
+   * @param   {Array} [ranges]
+   *          An array of time ranges.
+   *
+   * @return  {TimeRange}
+   */
+  function createTimeRangesObj(ranges) {
+    let timeRangesObj;
+    if (ranges === undefined || ranges.length === 0) {
+      timeRangesObj = {
+        length: 0,
+        start() {
+          throw new Error('This TimeRanges object is empty');
+        },
+        end() {
+          throw new Error('This TimeRanges object is empty');
+        }
+      };
+    } else {
+      timeRangesObj = {
+        length: ranges.length,
+        start: getRange.bind(null, 'start', 0, ranges),
+        end: getRange.bind(null, 'end', 1, ranges)
+      };
+    }
+    if (window.Symbol && window.Symbol.iterator) {
+      timeRangesObj[window.Symbol.iterator] = () => (ranges || []).values();
+    }
+    return timeRangesObj;
+  }
+
+  /**
+   * Create a `TimeRange` object which mimics an
+   * {@link https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges|HTML5 TimeRanges instance}.
+   *
+   * @param {number|Array[]} start
+   *        The start of a single range (a number) or an array of ranges (an
+   *        array of arrays of two numbers each).
+   *
+   * @param {number} end
+   *        The end of a single range. Cannot be used with the array form of
+   *        the `start` argument.
+   *
+   * @return {TimeRange}
+   */
+  function createTimeRanges$1(start, end) {
+    if (Array.isArray(start)) {
+      return createTimeRangesObj(start);
+    } else if (start === undefined || end === undefined) {
+      return createTimeRangesObj();
+    }
+    return createTimeRangesObj([[start, end]]);
+  }
+
+  /**
+   * Format seconds as a time string, H:MM:SS or M:SS. Supplying a guide (in
+   * seconds) will force a number of leading zeros to cover the length of the
+   * guide.
+   *
+   * @private
+   * @param  {number} seconds
+   *         Number of seconds to be turned into a string
+   *
+   * @param  {number} guide
+   *         Number (in seconds) to model the string after
+   *
+   * @return {string}
+   *         Time formatted as H:MM:SS or M:SS
+   */
+  const defaultImplementation = function (seconds, guide) {
+    seconds = seconds < 0 ? 0 : seconds;
+    let s = Math.floor(seconds % 60);
+    let m = Math.floor(seconds / 60 % 60);
+    let h = Math.floor(seconds / 3600);
+    const gm = Math.floor(guide / 60 % 60);
+    const gh = Math.floor(guide / 3600);
+
+    // handle invalid times
+    if (isNaN(seconds) || seconds === Infinity) {
+      // '-' is false for all relational operators (e.g. <, >=) so this setting
+      // will add the minimum number of fields specified by the guide
+      h = m = s = '-';
+    }
+
+    // Check if we need to show hours
+    h = h > 0 || gh > 0 ? h + ':' : '';
+
+    // If hours are showing, we may need to add a leading zero.
+    // Always show at least one digit of minutes.
+    m = ((h || gm >= 10) && m < 10 ? '0' + m : m) + ':';
+
+    // Check if leading zero is need for seconds
+    s = s < 10 ? '0' + s : s;
+    return h + m + s;
+  };
+
+  // Internal pointer to the current implementation.
+  let implementation = defaultImplementation;
+
+  /**
+   * Replaces the default formatTime implementation with a custom implementation.
+   *
+   * @param {Function} customImplementation
+   *        A function which will be used in place of the default formatTime
+   *        implementation. Will receive the current time in seconds and the
+   *        guide (in seconds) as arguments.
+   */
+  function setFormatTime(customImplementation) {
+    implementation = customImplementation;
+  }
+
+  /**
+   * Resets formatTime to the default implementation.
+   */
+  function resetFormatTime() {
+    implementation = defaultImplementation;
+  }
+
+  /**
+   * Delegates to either the default time formatting function or a custom
+   * function supplied via `setFormatTime`.
+   *
+   * Formats seconds as a time string (H:MM:SS or M:SS). Supplying a
+   * guide (in seconds) will force a number of leading zeros to cover the
+   * length of the guide.
+   *
+   * @example  formatTime(125, 600) === "02:05"
+   * @param    {number} seconds
+   *           Number of seconds to be turned into a string
+   *
+   * @param    {number} guide
+   *           Number (in seconds) to model the string after
+   *
+   * @return   {string}
+   *           Time formatted as H:MM:SS or M:SS
+   */
+  function formatTime(seconds, guide = seconds) {
+    return implementation(seconds, guide);
+  }
+
+  var Time = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    createTimeRanges: createTimeRanges$1,
+    createTimeRange: createTimeRanges$1,
+    setFormatTime: setFormatTime,
+    resetFormatTime: resetFormatTime,
+    formatTime: formatTime
+  });
+
+  /**
+   * @file buffer.js
+   * @module buffer
+   */
+
+  /**
+   * Compute the percentage of the media that has been buffered.
+   *
+   * @param { import('./time').TimeRange } buffered
+   *        The current `TimeRanges` object representing buffered time ranges
+   *
+   * @param {number} duration
+   *        Total duration of the media
+   *
+   * @return {number}
+   *         Percent buffered of the total duration in decimal form.
+   */
+  function bufferedPercent(buffered, duration) {
+    let bufferedDuration = 0;
+    let start;
+    let end;
+    if (!duration) {
+      return 0;
+    }
+    if (!buffered || !buffered.length) {
+      buffered = createTimeRanges$1(0, 0);
+    }
+    for (let i = 0; i < buffered.length; i++) {
+      start = buffered.start(i);
+      end = buffered.end(i);
+
+      // buffered end can be bigger than duration by a very small fraction
+      if (end > duration) {
+        end = duration;
+      }
+      bufferedDuration += end - start;
+    }
+    return bufferedDuration / duration;
+  }
+
+  /**
+   * @file media-error.js
+   */
+
+  /**
+   * A Custom `MediaError` class which mimics the standard HTML5 `MediaError` class.
+   *
+   * @param {number|string|Object|MediaError} value
+   *        This can be of multiple types:
+   *        - number: should be a standard error code
+   *        - string: an error message (the code will be 0)
+   *        - Object: arbitrary properties
+   *        - `MediaError` (native): used to populate a video.js `MediaError` object
+   *        - `MediaError` (video.js): will return itself if it's already a
+   *          video.js `MediaError` object.
+   *
+   * @see [MediaError Spec]{@link https://dev.w3.org/html5/spec-author-view/video.html#mediaerror}
+   * @see [Encrypted MediaError Spec]{@link https://www.w3.org/TR/2013/WD-encrypted-media-20130510/#error-codes}
+   *
+   * @class MediaError
+   */
+  function MediaError(value) {
+    // Allow redundant calls to this constructor to avoid having `instanceof`
+    // checks peppered around the code.
+    if (value instanceof MediaError) {
+      return value;
+    }
+    if (typeof value === 'number') {
+      this.code = value;
+    } else if (typeof value === 'string') {
+      // default code is zero, so this is a custom error
+      this.message = value;
+    } else if (isObject$1(value)) {
+      // We assign the `code` property manually because native `MediaError` objects
+      // do not expose it as an own/enumerable property of the object.
+      if (typeof value.code === 'number') {
+        this.code = value.code;
+      }
+      Object.assign(this, value);
+    }
+    if (!this.message) {
+      this.message = MediaError.defaultMessages[this.code] || '';
+    }
+  }
+
+  /**
+   * The error code that refers two one of the defined `MediaError` types
+   *
+   * @type {Number}
+   */
+  MediaError.prototype.code = 0;
+
+  /**
+   * An optional message that to show with the error. Message is not part of the HTML5
+   * video spec but allows for more informative custom errors.
+   *
+   * @type {String}
+   */
+  MediaError.prototype.message = '';
+
+  /**
+   * An optional status code that can be set by plugins to allow even more detail about
+   * the error. For example a plugin might provide a specific HTTP status code and an
+   * error message for that code. Then when the plugin gets that error this class will
+   * know how to display an error message for it. This allows a custom message to show
+   * up on the `Player` error overlay.
+   *
+   * @type {Array}
+   */
+  MediaError.prototype.status = null;
+
+  /**
+   * An object containing an error type, as well as other information regarding the error.
+   *
+   * @typedef {{errorType: string, [key: string]: any}} ErrorMetadata
+   */
+
+  /**
+   * An optional object to give more detail about the error. This can be used to give
+   * a higher level of specificity to an error versus the more generic MediaError codes.
+   * `metadata` expects an `errorType` string that should align with the values from videojs.Error.
+   *
+   * @type {ErrorMetadata}
+   */
+  MediaError.prototype.metadata = null;
+
+  /**
+   * Errors indexed by the W3C standard. The order **CANNOT CHANGE**! See the
+   * specification listed under {@link MediaError} for more information.
+   *
+   * @enum {array}
+   * @readonly
+   * @property {string} 0 - MEDIA_ERR_CUSTOM
+   * @property {string} 1 - MEDIA_ERR_ABORTED
+   * @property {string} 2 - MEDIA_ERR_NETWORK
+   * @property {string} 3 - MEDIA_ERR_DECODE
+   * @property {string} 4 - MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @property {string} 5 - MEDIA_ERR_ENCRYPTED
+   */
+  MediaError.errorTypes = ['MEDIA_ERR_CUSTOM', 'MEDIA_ERR_ABORTED', 'MEDIA_ERR_NETWORK', 'MEDIA_ERR_DECODE', 'MEDIA_ERR_SRC_NOT_SUPPORTED', 'MEDIA_ERR_ENCRYPTED'];
+
+  /**
+   * The default `MediaError` messages based on the {@link MediaError.errorTypes}.
+   *
+   * @type {Array}
+   * @constant
+   */
+  MediaError.defaultMessages = {
+    1: 'You aborted the media playback',
+    2: 'A network error caused the media download to fail part-way.',
+    3: 'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.',
+    4: 'The media could not be loaded, either because the server or network failed or because the format is not supported.',
+    5: 'The media is encrypted and we do not have the keys to decrypt it.'
+  };
+
+  /**
+   * W3C error code for any custom error.
+   *
+   * @member MediaError#MEDIA_ERR_CUSTOM
+   * @constant {number}
+   * @default 0
+   */
+  MediaError.MEDIA_ERR_CUSTOM = 0;
+
+  /**
+   * W3C error code for any custom error.
+   *
+   * @member MediaError.MEDIA_ERR_CUSTOM
+   * @constant {number}
+   * @default 0
+   */
+  MediaError.prototype.MEDIA_ERR_CUSTOM = 0;
+
+  /**
+   * W3C error code for media error aborted.
+   *
+   * @member MediaError#MEDIA_ERR_ABORTED
+   * @constant {number}
+   * @default 1
+   */
+  MediaError.MEDIA_ERR_ABORTED = 1;
+
+  /**
+   * W3C error code for media error aborted.
+   *
+   * @member MediaError.MEDIA_ERR_ABORTED
+   * @constant {number}
+   * @default 1
+   */
+  MediaError.prototype.MEDIA_ERR_ABORTED = 1;
+
+  /**
+   * W3C error code for any network error.
+   *
+   * @member MediaError#MEDIA_ERR_NETWORK
+   * @constant {number}
+   * @default 2
+   */
+  MediaError.MEDIA_ERR_NETWORK = 2;
+
+  /**
+   * W3C error code for any network error.
+   *
+   * @member MediaError.MEDIA_ERR_NETWORK
+   * @constant {number}
+   * @default 2
+   */
+  MediaError.prototype.MEDIA_ERR_NETWORK = 2;
+
+  /**
+   * W3C error code for any decoding error.
+   *
+   * @member MediaError#MEDIA_ERR_DECODE
+   * @constant {number}
+   * @default 3
+   */
+  MediaError.MEDIA_ERR_DECODE = 3;
+
+  /**
+   * W3C error code for any decoding error.
+   *
+   * @member MediaError.MEDIA_ERR_DECODE
+   * @constant {number}
+   * @default 3
+   */
+  MediaError.prototype.MEDIA_ERR_DECODE = 3;
+
+  /**
+   * W3C error code for any time that a source is not supported.
+   *
+   * @member MediaError#MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @constant {number}
+   * @default 4
+   */
+  MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+
+  /**
+   * W3C error code for any time that a source is not supported.
+   *
+   * @member MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @constant {number}
+   * @default 4
+   */
+  MediaError.prototype.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+
+  /**
+   * W3C error code for any time that a source is encrypted.
+   *
+   * @member MediaError#MEDIA_ERR_ENCRYPTED
+   * @constant {number}
+   * @default 5
+   */
+  MediaError.MEDIA_ERR_ENCRYPTED = 5;
+
+  /**
+   * W3C error code for any time that a source is encrypted.
+   *
+   * @member MediaError.MEDIA_ERR_ENCRYPTED
+   * @constant {number}
+   * @default 5
+   */
+  MediaError.prototype.MEDIA_ERR_ENCRYPTED = 5;
+
+  var tuple = SafeParseTuple;
+  function SafeParseTuple(obj, reviver) {
+    var json;
+    var error = null;
+    try {
+      json = JSON.parse(obj, reviver);
+    } catch (err) {
+      error = err;
+    }
+    return [error, json];
+  }
+
+  /**
+   * Returns whether an object is `Promise`-like (i.e. has a `then` method).
+   *
+   * @param  {Object}  value
+   *         An object that may or may not be `Promise`-like.
+   *
+   * @return {boolean}
+   *         Whether or not the object is `Promise`-like.
+   */
+  function isPromise(value) {
+    return value !== undefined && value !== null && typeof value.then === 'function';
+  }
+
+  /**
+   * Silence a Promise-like object.
+   *
+   * This is useful for avoiding non-harmful, but potentially confusing "uncaught
+   * play promise" rejection error messages.
+   *
+   * @param  {Object} value
+   *         An object that may or may not be `Promise`-like.
+   */
+  function silencePromise(value) {
+    if (isPromise(value)) {
+      value.then(null, e => {});
+    }
+  }
+
+  /**
+   * @file text-track-list-converter.js Utilities for capturing text track state and
+   * re-creating tracks based on a capture.
+   *
+   * @module text-track-list-converter
+   */
+
+  /**
+   * Examine a single {@link TextTrack} and return a JSON-compatible javascript object that
+   * represents the {@link TextTrack}'s state.
+   *
+   * @param {TextTrack} track
+   *        The text track to query.
+   *
+   * @return {Object}
+   *         A serializable javascript representation of the TextTrack.
+   * @private
+   */
+  const trackToJson_ = function (track) {
+    const ret = ['kind', 'label', 'language', 'id', 'inBandMetadataTrackDispatchType', 'mode', 'src'].reduce((acc, prop, i) => {
+      if (track[prop]) {
+        acc[prop] = track[prop];
+      }
+      return acc;
+    }, {
+      cues: track.cues && Array.prototype.map.call(track.cues, function (cue) {
+        return {
+          startTime: cue.startTime,
+          endTime: cue.endTime,
+          text: cue.text,
+          id: cue.id
+        };
+      })
+    });
+    return ret;
+  };
+
+  /**
+   * Examine a {@link Tech} and return a JSON-compatible javascript array that represents the
+   * state of all {@link TextTrack}s currently configured. The return array is compatible with
+   * {@link text-track-list-converter:jsonToTextTracks}.
+   *
+   * @param { import('../tech/tech').default } tech
+   *        The tech object to query
+   *
+   * @return {Array}
+   *         A serializable javascript representation of the {@link Tech}s
+   *         {@link TextTrackList}.
+   */
+  const textTracksToJson = function (tech) {
+    const trackEls = tech.$$('track');
+    const trackObjs = Array.prototype.map.call(trackEls, t => t.track);
+    const tracks = Array.prototype.map.call(trackEls, function (trackEl) {
+      const json = trackToJson_(trackEl.track);
+      if (trackEl.src) {
+        json.src = trackEl.src;
+      }
+      return json;
+    });
+    return tracks.concat(Array.prototype.filter.call(tech.textTracks(), function (track) {
+      return trackObjs.indexOf(track) === -1;
+    }).map(trackToJson_));
+  };
+
+  /**
+   * Create a set of remote {@link TextTrack}s on a {@link Tech} based on an array of javascript
+   * object {@link TextTrack} representations.
+   *
+   * @param {Array} json
+   *        An array of `TextTrack` representation objects, like those that would be
+   *        produced by `textTracksToJson`.
+   *
+   * @param {Tech} tech
+   *        The `Tech` to create the `TextTrack`s on.
+   */
+  const jsonToTextTracks = function (json, tech) {
+    json.forEach(function (track) {
+      const addedTrack = tech.addRemoteTextTrack(track).track;
+      if (!track.src && track.cues) {
+        track.cues.forEach(cue => addedTrack.addCue(cue));
+      }
+    });
+    return tech.textTracks();
+  };
+  var textTrackConverter = {
+    textTracksToJson,
+    jsonToTextTracks,
+    trackToJson_
+  };
+
+  /**
+   * @file modal-dialog.js
+   */
+  const MODAL_CLASS_NAME = 'vjs-modal-dialog';
+
+  /**
+   * The `ModalDialog` displays over the video and its controls, which blocks
+   * interaction with the player until it is closed.
+   *
+   * Modal dialogs include a "Close" button and will close when that button
+   * is activated - or when ESC is pressed anywhere.
+   *
+   * @extends Component
+   */
+  class ModalDialog extends Component$1 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param { import('./utils/dom').ContentDescriptor} [options.content=undefined]
+     *        Provide customized content for this modal.
+     *
+     * @param {string} [options.description]
+     *        A text description for the modal, primarily for accessibility.
+     *
+     * @param {boolean} [options.fillAlways=false]
+     *        Normally, modals are automatically filled only the first time
+     *        they open. This tells the modal to refresh its content
+     *        every time it opens.
+     *
+     * @param {string} [options.label]
+     *        A text label for the modal, primarily for accessibility.
+     *
+     * @param {boolean} [options.pauseOnOpen=true]
+     *        If `true`, playback will will be paused if playing when
+     *        the modal opens, and resumed when it closes.
+     *
+     * @param {boolean} [options.temporary=true]
+     *        If `true`, the modal can only be opened once; it will be
+     *        disposed as soon as it's closed.
+     *
+     * @param {boolean} [options.uncloseable=false]
+     *        If `true`, the user will not be able to close the modal
+     *        through the UI in the normal ways. Programmatic closing is
+     *        still possible.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.close_ = e => this.close(e);
+      this.opened_ = this.hasBeenOpened_ = this.hasBeenFilled_ = false;
+      this.closeable(!this.options_.uncloseable);
+      this.content(this.options_.content);
+
+      // Make sure the contentEl is defined AFTER any children are initialized
+      // because we only want the contents of the modal in the contentEl
+      // (not the UI elements like the close button).
+      this.contentEl_ = createEl('div', {
+        className: `${MODAL_CLASS_NAME}-content`
+      }, {
+        role: 'document'
+      });
+      this.descEl_ = createEl('p', {
+        className: `${MODAL_CLASS_NAME}-description vjs-control-text`,
+        id: this.el().getAttribute('aria-describedby')
+      });
+      textContent(this.descEl_, this.description());
+      this.el_.appendChild(this.descEl_);
+      this.el_.appendChild(this.contentEl_);
+    }
+
+    /**
+     * Create the `ModalDialog`'s DOM element
+     *
+     * @return {Element}
+     *         The DOM element that gets created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildCSSClass(),
+        tabIndex: -1
+      }, {
+        'aria-describedby': `${this.id()}_description`,
+        'aria-hidden': 'true',
+        'aria-label': this.label(),
+        'role': 'dialog',
+        'aria-live': 'polite'
+      });
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.descEl_ = null;
+      this.previouslyActiveEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `${MODAL_CLASS_NAME} vjs-hidden ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Returns the label string for this modal. Primarily used for accessibility.
+     *
+     * @return {string}
+     *         the localized or raw label of this modal.
+     */
+    label() {
+      return this.localize(this.options_.label || 'Modal Window');
+    }
+
+    /**
+     * Returns the description string for this modal. Primarily used for
+     * accessibility.
+     *
+     * @return {string}
+     *         The localized or raw description of this modal.
+     */
+    description() {
+      let desc = this.options_.description || this.localize('This is a modal window.');
+
+      // Append a universal closeability message if the modal is closeable.
+      if (this.closeable()) {
+        desc += ' ' + this.localize('This modal can be closed by pressing the Escape key or activating the close button.');
+      }
+      return desc;
+    }
+
+    /**
+     * Opens the modal.
+     *
+     * @fires ModalDialog#beforemodalopen
+     * @fires ModalDialog#modalopen
+     */
+    open() {
+      if (this.opened_) {
+        if (this.options_.fillAlways) {
+          this.fill();
+        }
+        return;
+      }
+      const player = this.player();
+
+      /**
+        * Fired just before a `ModalDialog` is opened.
+        *
+        * @event ModalDialog#beforemodalopen
+        * @type {Event}
+        */
+      this.trigger('beforemodalopen');
+      this.opened_ = true;
+
+      // Fill content if the modal has never opened before and
+      // never been filled.
+      if (this.options_.fillAlways || !this.hasBeenOpened_ && !this.hasBeenFilled_) {
+        this.fill();
+      }
+
+      // If the player was playing, pause it and take note of its previously
+      // playing state.
+      this.wasPlaying_ = !player.paused();
+      if (this.options_.pauseOnOpen && this.wasPlaying_) {
+        player.pause();
+      }
+      this.on('keydown', this.handleKeyDown_);
+
+      // Hide controls and note if they were enabled.
+      this.hadControls_ = player.controls();
+      player.controls(false);
+      this.show();
+      this.conditionalFocus_();
+      this.el().setAttribute('aria-hidden', 'false');
+
+      /**
+        * Fired just after a `ModalDialog` is opened.
+        *
+        * @event ModalDialog#modalopen
+        * @type {Event}
+        */
+      this.trigger('modalopen');
+      this.hasBeenOpened_ = true;
+    }
+
+    /**
+     * If the `ModalDialog` is currently open or closed.
+     *
+     * @param  {boolean} [value]
+     *         If given, it will open (`true`) or close (`false`) the modal.
+     *
+     * @return {boolean}
+     *         the current open state of the modaldialog
+     */
+    opened(value) {
+      if (typeof value === 'boolean') {
+        this[value ? 'open' : 'close']();
+      }
+      return this.opened_;
+    }
+
+    /**
+     * Closes the modal, does nothing if the `ModalDialog` is
+     * not open.
+     *
+     * @fires ModalDialog#beforemodalclose
+     * @fires ModalDialog#modalclose
+     */
+    close() {
+      if (!this.opened_) {
+        return;
+      }
+      const player = this.player();
+
+      /**
+        * Fired just before a `ModalDialog` is closed.
+        *
+        * @event ModalDialog#beforemodalclose
+        * @type {Event}
+        */
+      this.trigger('beforemodalclose');
+      this.opened_ = false;
+      if (this.wasPlaying_ && this.options_.pauseOnOpen) {
+        player.play();
+      }
+      this.off('keydown', this.handleKeyDown_);
+      if (this.hadControls_) {
+        player.controls(true);
+      }
+      this.hide();
+      this.el().setAttribute('aria-hidden', 'true');
+
+      /**
+        * Fired just after a `ModalDialog` is closed.
+        *
+        * @event ModalDialog#modalclose
+        * @type {Event}
+        */
+      this.trigger('modalclose');
+      this.conditionalBlur_();
+      if (this.options_.temporary) {
+        this.dispose();
+      }
+    }
+
+    /**
+     * Check to see if the `ModalDialog` is closeable via the UI.
+     *
+     * @param  {boolean} [value]
+     *         If given as a boolean, it will set the `closeable` option.
+     *
+     * @return {boolean}
+     *         Returns the final value of the closable option.
+     */
+    closeable(value) {
+      if (typeof value === 'boolean') {
+        const closeable = this.closeable_ = !!value;
+        let close = this.getChild('closeButton');
+
+        // If this is being made closeable and has no close button, add one.
+        if (closeable && !close) {
+          // The close button should be a child of the modal - not its
+          // content element, so temporarily change the content element.
+          const temp = this.contentEl_;
+          this.contentEl_ = this.el_;
+          close = this.addChild('closeButton', {
+            controlText: 'Close Modal Dialog'
+          });
+          this.contentEl_ = temp;
+          this.on(close, 'close', this.close_);
+        }
+
+        // If this is being made uncloseable and has a close button, remove it.
+        if (!closeable && close) {
+          this.off(close, 'close', this.close_);
+          this.removeChild(close);
+          close.dispose();
+        }
+      }
+      return this.closeable_;
+    }
+
+    /**
+     * Fill the modal's content element with the modal's "content" option.
+     * The content element will be emptied before this change takes place.
+     */
+    fill() {
+      this.fillWith(this.content());
+    }
+
+    /**
+     * Fill the modal's content element with arbitrary content.
+     * The content element will be emptied before this change takes place.
+     *
+     * @fires ModalDialog#beforemodalfill
+     * @fires ModalDialog#modalfill
+     *
+     * @param { import('./utils/dom').ContentDescriptor} [content]
+     *        The same rules apply to this as apply to the `content` option.
+     */
+    fillWith(content) {
+      const contentEl = this.contentEl();
+      const parentEl = contentEl.parentNode;
+      const nextSiblingEl = contentEl.nextSibling;
+
+      /**
+        * Fired just before a `ModalDialog` is filled with content.
+        *
+        * @event ModalDialog#beforemodalfill
+        * @type {Event}
+        */
+      this.trigger('beforemodalfill');
+      this.hasBeenFilled_ = true;
+
+      // Detach the content element from the DOM before performing
+      // manipulation to avoid modifying the live DOM multiple times.
+      parentEl.removeChild(contentEl);
+      this.empty();
+      insertContent(contentEl, content);
+      /**
+       * Fired just after a `ModalDialog` is filled with content.
+       *
+       * @event ModalDialog#modalfill
+       * @type {Event}
+       */
+      this.trigger('modalfill');
+
+      // Re-inject the re-filled content element.
+      if (nextSiblingEl) {
+        parentEl.insertBefore(contentEl, nextSiblingEl);
+      } else {
+        parentEl.appendChild(contentEl);
+      }
+
+      // make sure that the close button is last in the dialog DOM
+      const closeButton = this.getChild('closeButton');
+      if (closeButton) {
+        parentEl.appendChild(closeButton.el_);
+      }
+    }
+
+    /**
+     * Empties the content element. This happens anytime the modal is filled.
+     *
+     * @fires ModalDialog#beforemodalempty
+     * @fires ModalDialog#modalempty
+     */
+    empty() {
+      /**
+      * Fired just before a `ModalDialog` is emptied.
+      *
+      * @event ModalDialog#beforemodalempty
+      * @type {Event}
+      */
+      this.trigger('beforemodalempty');
+      emptyEl(this.contentEl());
+
+      /**
+      * Fired just after a `ModalDialog` is emptied.
+      *
+      * @event ModalDialog#modalempty
+      * @type {Event}
+      */
+      this.trigger('modalempty');
+    }
+
+    /**
+     * Gets or sets the modal content, which gets normalized before being
+     * rendered into the DOM.
+     *
+     * This does not update the DOM or fill the modal, but it is called during
+     * that process.
+     *
+     * @param  { import('./utils/dom').ContentDescriptor} [value]
+     *         If defined, sets the internal content value to be used on the
+     *         next call(s) to `fill`. This value is normalized before being
+     *         inserted. To "clear" the internal content value, pass `null`.
+     *
+     * @return { import('./utils/dom').ContentDescriptor}
+     *         The current content of the modal dialog
+     */
+    content(value) {
+      if (typeof value !== 'undefined') {
+        this.content_ = value;
+      }
+      return this.content_;
+    }
+
+    /**
+     * conditionally focus the modal dialog if focus was previously on the player.
+     *
+     * @private
+     */
+    conditionalFocus_() {
+      const activeEl = document.activeElement;
+      const playerEl = this.player_.el_;
+      this.previouslyActiveEl_ = null;
+      if (playerEl.contains(activeEl) || playerEl === activeEl) {
+        this.previouslyActiveEl_ = activeEl;
+        this.focus();
+      }
+    }
+
+    /**
+     * conditionally blur the element and refocus the last focused element
+     *
+     * @private
+     */
+    conditionalBlur_() {
+      if (this.previouslyActiveEl_) {
+        this.previouslyActiveEl_.focus();
+        this.previouslyActiveEl_ = null;
+      }
+    }
+
+    /**
+     * Keydown handler. Attached when modal is focused.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Do not allow keydowns to reach out of the modal dialog.
+      event.stopPropagation();
+      if (keycode.isEventKey(event, 'Escape') && this.closeable()) {
+        event.preventDefault();
+        this.close();
+        return;
+      }
+
+      // exit early if it isn't a tab key
+      if (!keycode.isEventKey(event, 'Tab')) {
+        return;
+      }
+      const focusableEls = this.focusableEls_();
+      const activeEl = this.el_.querySelector(':focus');
+      let focusIndex;
+      for (let i = 0; i < focusableEls.length; i++) {
+        if (activeEl === focusableEls[i]) {
+          focusIndex = i;
+          break;
+        }
+      }
+      if (document.activeElement === this.el_) {
+        focusIndex = 0;
+      }
+      if (event.shiftKey && focusIndex === 0) {
+        focusableEls[focusableEls.length - 1].focus();
+        event.preventDefault();
+      } else if (!event.shiftKey && focusIndex === focusableEls.length - 1) {
+        focusableEls[0].focus();
+        event.preventDefault();
+      }
+    }
+
+    /**
+     * get all focusable elements
+     *
+     * @private
+     */
+    focusableEls_() {
+      const allChildren = this.el_.querySelectorAll('*');
+      return Array.prototype.filter.call(allChildren, child => {
+        return (child instanceof window.HTMLAnchorElement || child instanceof window.HTMLAreaElement) && child.hasAttribute('href') || (child instanceof window.HTMLInputElement || child instanceof window.HTMLSelectElement || child instanceof window.HTMLTextAreaElement || child instanceof window.HTMLButtonElement) && !child.hasAttribute('disabled') || child instanceof window.HTMLIFrameElement || child instanceof window.HTMLObjectElement || child instanceof window.HTMLEmbedElement || child.hasAttribute('tabindex') && child.getAttribute('tabindex') !== -1 || child.hasAttribute('contenteditable');
+      });
+    }
+  }
+
+  /**
+   * Default options for `ModalDialog` default options.
+   *
+   * @type {Object}
+   * @private
+   */
+  ModalDialog.prototype.options_ = {
+    pauseOnOpen: true,
+    temporary: true
+  };
+  Component$1.registerComponent('ModalDialog', ModalDialog);
+
+  /**
+   * @file track-list.js
+   */
+
+  /**
+   * Common functionaliy between {@link TextTrackList}, {@link AudioTrackList}, and
+   * {@link VideoTrackList}
+   *
+   * @extends EventTarget
+   */
+  class TrackList extends EventTarget$2 {
+    /**
+     * Create an instance of this class
+     *
+     * @param { import('./track').default[] } tracks
+     *        A list of tracks to initialize the list with.
+     *
+     * @abstract
+     */
+    constructor(tracks = []) {
+      super();
+      this.tracks_ = [];
+
+      /**
+       * @memberof TrackList
+       * @member {number} length
+       *         The current number of `Track`s in the this Trackist.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.tracks_.length;
+        }
+      });
+      for (let i = 0; i < tracks.length; i++) {
+        this.addTrack(tracks[i]);
+      }
+    }
+
+    /**
+     * Add a {@link Track} to the `TrackList`
+     *
+     * @param { import('./track').default } track
+     *        The audio, video, or text track to add to the list.
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      const index = this.tracks_.length;
+      if (!('' + index in this)) {
+        Object.defineProperty(this, index, {
+          get() {
+            return this.tracks_[index];
+          }
+        });
+      }
+
+      // Do not add duplicate tracks
+      if (this.tracks_.indexOf(track) === -1) {
+        this.tracks_.push(track);
+        /**
+         * Triggered when a track is added to a track list.
+         *
+         * @event TrackList#addtrack
+         * @type {Event}
+         * @property {Track} track
+         *           A reference to track that was added.
+         */
+        this.trigger({
+          track,
+          type: 'addtrack',
+          target: this
+        });
+      }
+
+      /**
+       * Triggered when a track label is changed.
+       *
+       * @event TrackList#addtrack
+       * @type {Event}
+       * @property {Track} track
+       *           A reference to track that was added.
+       */
+      track.labelchange_ = () => {
+        this.trigger({
+          track,
+          type: 'labelchange',
+          target: this
+        });
+      };
+      if (isEvented(track)) {
+        track.addEventListener('labelchange', track.labelchange_);
+      }
+    }
+
+    /**
+     * Remove a {@link Track} from the `TrackList`
+     *
+     * @param { import('./track').default } rtrack
+     *        The audio, video, or text track to remove from the list.
+     *
+     * @fires TrackList#removetrack
+     */
+    removeTrack(rtrack) {
+      let track;
+      for (let i = 0, l = this.length; i < l; i++) {
+        if (this[i] === rtrack) {
+          track = this[i];
+          if (track.off) {
+            track.off();
+          }
+          this.tracks_.splice(i, 1);
+          break;
+        }
+      }
+      if (!track) {
+        return;
+      }
+
+      /**
+       * Triggered when a track is removed from track list.
+       *
+       * @event TrackList#removetrack
+       * @type {Event}
+       * @property {Track} track
+       *           A reference to track that was removed.
+       */
+      this.trigger({
+        track,
+        type: 'removetrack',
+        target: this
+      });
+    }
+
+    /**
+     * Get a Track from the TrackList by a tracks id
+     *
+     * @param {string} id - the id of the track to get
+     * @method getTrackById
+     * @return { import('./track').default }
+     * @private
+     */
+    getTrackById(id) {
+      let result = null;
+      for (let i = 0, l = this.length; i < l; i++) {
+        const track = this[i];
+        if (track.id === id) {
+          result = track;
+          break;
+        }
+      }
+      return result;
+    }
+  }
+
+  /**
+   * Triggered when a different track is selected/enabled.
+   *
+   * @event TrackList#change
+   * @type {Event}
+   */
+
+  /**
+   * Events that can be called with on + eventName. See {@link EventHandler}.
+   *
+   * @property {Object} TrackList#allowedEvents_
+   * @protected
+   */
+  TrackList.prototype.allowedEvents_ = {
+    change: 'change',
+    addtrack: 'addtrack',
+    removetrack: 'removetrack',
+    labelchange: 'labelchange'
+  };
+
+  // emulate attribute EventHandler support to allow for feature detection
+  for (const event in TrackList.prototype.allowedEvents_) {
+    TrackList.prototype['on' + event] = null;
+  }
+
+  /**
+   * @file audio-track-list.js
+   */
+
+  /**
+   * Anywhere we call this function we diverge from the spec
+   * as we only support one enabled audiotrack at a time
+   *
+   * @param {AudioTrackList} list
+   *        list to work on
+   *
+   * @param { import('./audio-track').default } track
+   *        The track to skip
+   *
+   * @private
+   */
+  const disableOthers$1 = function (list, track) {
+    for (let i = 0; i < list.length; i++) {
+      if (!Object.keys(list[i]).length || track.id === list[i].id) {
+        continue;
+      }
+      // another audio track is enabled, disable it
+      list[i].enabled = false;
+    }
+  };
+
+  /**
+   * The current list of {@link AudioTrack} for a media file.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist}
+   * @extends TrackList
+   */
+  class AudioTrackList extends TrackList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./audio-track').default[] } [tracks=[]]
+     *        A list of `AudioTrack` to instantiate the list with.
+     */
+    constructor(tracks = []) {
+      // make sure only 1 track is enabled
+      // sorted from last index to first index
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        if (tracks[i].enabled) {
+          disableOthers$1(tracks, tracks[i]);
+          break;
+        }
+      }
+      super(tracks);
+      this.changing_ = false;
+    }
+
+    /**
+     * Add an {@link AudioTrack} to the `AudioTrackList`.
+     *
+     * @param { import('./audio-track').default } track
+     *        The AudioTrack to add to the list
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      if (track.enabled) {
+        disableOthers$1(this, track);
+      }
+      super.addTrack(track);
+      // native tracks don't have this
+      if (!track.addEventListener) {
+        return;
+      }
+      track.enabledChange_ = () => {
+        // when we are disabling other tracks (since we don't support
+        // more than one track at a time) we will set changing_
+        // to true so that we don't trigger additional change events
+        if (this.changing_) {
+          return;
+        }
+        this.changing_ = true;
+        disableOthers$1(this, track);
+        this.changing_ = false;
+        this.trigger('change');
+      };
+
+      /**
+       * @listens AudioTrack#enabledchange
+       * @fires TrackList#change
+       */
+      track.addEventListener('enabledchange', track.enabledChange_);
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+      if (rtrack.removeEventListener && rtrack.enabledChange_) {
+        rtrack.removeEventListener('enabledchange', rtrack.enabledChange_);
+        rtrack.enabledChange_ = null;
+      }
+    }
+  }
+
+  /**
+   * @file video-track-list.js
+   */
+
+  /**
+   * Un-select all other {@link VideoTrack}s that are selected.
+   *
+   * @param {VideoTrackList} list
+   *        list to work on
+   *
+   * @param { import('./video-track').default } track
+   *        The track to skip
+   *
+   * @private
+   */
+  const disableOthers = function (list, track) {
+    for (let i = 0; i < list.length; i++) {
+      if (!Object.keys(list[i]).length || track.id === list[i].id) {
+        continue;
+      }
+      // another video track is enabled, disable it
+      list[i].selected = false;
+    }
+  };
+
+  /**
+   * The current list of {@link VideoTrack} for a video.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist}
+   * @extends TrackList
+   */
+  class VideoTrackList extends TrackList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {VideoTrack[]} [tracks=[]]
+     *        A list of `VideoTrack` to instantiate the list with.
+     */
+    constructor(tracks = []) {
+      // make sure only 1 track is enabled
+      // sorted from last index to first index
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        if (tracks[i].selected) {
+          disableOthers(tracks, tracks[i]);
+          break;
+        }
+      }
+      super(tracks);
+      this.changing_ = false;
+
+      /**
+       * @member {number} VideoTrackList#selectedIndex
+       *         The current index of the selected {@link VideoTrack`}.
+       */
+      Object.defineProperty(this, 'selectedIndex', {
+        get() {
+          for (let i = 0; i < this.length; i++) {
+            if (this[i].selected) {
+              return i;
+            }
+          }
+          return -1;
+        },
+        set() {}
+      });
+    }
+
+    /**
+     * Add a {@link VideoTrack} to the `VideoTrackList`.
+     *
+     * @param { import('./video-track').default } track
+     *        The VideoTrack to add to the list
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      if (track.selected) {
+        disableOthers(this, track);
+      }
+      super.addTrack(track);
+      // native tracks don't have this
+      if (!track.addEventListener) {
+        return;
+      }
+      track.selectedChange_ = () => {
+        if (this.changing_) {
+          return;
+        }
+        this.changing_ = true;
+        disableOthers(this, track);
+        this.changing_ = false;
+        this.trigger('change');
+      };
+
+      /**
+       * @listens VideoTrack#selectedchange
+       * @fires TrackList#change
+       */
+      track.addEventListener('selectedchange', track.selectedChange_);
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+      if (rtrack.removeEventListener && rtrack.selectedChange_) {
+        rtrack.removeEventListener('selectedchange', rtrack.selectedChange_);
+        rtrack.selectedChange_ = null;
+      }
+    }
+  }
+
+  /**
+   * @file text-track-list.js
+   */
+
+  /**
+   * The current list of {@link TextTrack} for a media file.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttracklist}
+   * @extends TrackList
+   */
+  class TextTrackList extends TrackList {
+    /**
+     * Add a {@link TextTrack} to the `TextTrackList`
+     *
+     * @param { import('./text-track').default } track
+     *        The text track to add to the list.
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      super.addTrack(track);
+      if (!this.queueChange_) {
+        this.queueChange_ = () => this.queueTrigger('change');
+      }
+      if (!this.triggerSelectedlanguagechange) {
+        this.triggerSelectedlanguagechange_ = () => this.trigger('selectedlanguagechange');
+      }
+
+      /**
+       * @listens TextTrack#modechange
+       * @fires TrackList#change
+       */
+      track.addEventListener('modechange', this.queueChange_);
+      const nonLanguageTextTrackKind = ['metadata', 'chapters'];
+      if (nonLanguageTextTrackKind.indexOf(track.kind) === -1) {
+        track.addEventListener('modechange', this.triggerSelectedlanguagechange_);
+      }
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+
+      // manually remove the event handlers we added
+      if (rtrack.removeEventListener) {
+        if (this.queueChange_) {
+          rtrack.removeEventListener('modechange', this.queueChange_);
+        }
+        if (this.selectedlanguagechange_) {
+          rtrack.removeEventListener('modechange', this.triggerSelectedlanguagechange_);
+        }
+      }
+    }
+  }
+
+  /**
+   * @file html-track-element-list.js
+   */
+
+  /**
+   * The current list of {@link HtmlTrackElement}s.
+   */
+  class HtmlTrackElementList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {HtmlTrackElement[]} [tracks=[]]
+     *        A list of `HtmlTrackElement` to instantiate the list with.
+     */
+    constructor(trackElements = []) {
+      this.trackElements_ = [];
+
+      /**
+       * @memberof HtmlTrackElementList
+       * @member {number} length
+       *         The current number of `Track`s in the this Trackist.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.trackElements_.length;
+        }
+      });
+      for (let i = 0, length = trackElements.length; i < length; i++) {
+        this.addTrackElement_(trackElements[i]);
+      }
+    }
+
+    /**
+     * Add an {@link HtmlTrackElement} to the `HtmlTrackElementList`
+     *
+     * @param {HtmlTrackElement} trackElement
+     *        The track element to add to the list.
+     *
+     * @private
+     */
+    addTrackElement_(trackElement) {
+      const index = this.trackElements_.length;
+      if (!('' + index in this)) {
+        Object.defineProperty(this, index, {
+          get() {
+            return this.trackElements_[index];
+          }
+        });
+      }
+
+      // Do not add duplicate elements
+      if (this.trackElements_.indexOf(trackElement) === -1) {
+        this.trackElements_.push(trackElement);
+      }
+    }
+
+    /**
+     * Get an {@link HtmlTrackElement} from the `HtmlTrackElementList` given an
+     * {@link TextTrack}.
+     *
+     * @param {TextTrack} track
+     *        The track associated with a track element.
+     *
+     * @return {HtmlTrackElement|undefined}
+     *         The track element that was found or undefined.
+     *
+     * @private
+     */
+    getTrackElementByTrack_(track) {
+      let trackElement_;
+      for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+        if (track === this.trackElements_[i].track) {
+          trackElement_ = this.trackElements_[i];
+          break;
+        }
+      }
+      return trackElement_;
+    }
+
+    /**
+     * Remove a {@link HtmlTrackElement} from the `HtmlTrackElementList`
+     *
+     * @param {HtmlTrackElement} trackElement
+     *        The track element to remove from the list.
+     *
+     * @private
+     */
+    removeTrackElement_(trackElement) {
+      for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+        if (trackElement === this.trackElements_[i]) {
+          if (this.trackElements_[i].track && typeof this.trackElements_[i].track.off === 'function') {
+            this.trackElements_[i].track.off();
+          }
+          if (typeof this.trackElements_[i].off === 'function') {
+            this.trackElements_[i].off();
+          }
+          this.trackElements_.splice(i, 1);
+          break;
+        }
+      }
+    }
+  }
+
+  /**
+   * @file text-track-cue-list.js
+   */
+
+  /**
+   * @typedef {Object} TextTrackCueList~TextTrackCue
+   *
+   * @property {string} id
+   *           The unique id for this text track cue
+   *
+   * @property {number} startTime
+   *           The start time for this text track cue
+   *
+   * @property {number} endTime
+   *           The end time for this text track cue
+   *
+   * @property {boolean} pauseOnExit
+   *           Pause when the end time is reached if true.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue}
+   */
+
+  /**
+   * A List of TextTrackCues.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcuelist}
+   */
+  class TextTrackCueList {
+    /**
+     * Create an instance of this class..
+     *
+     * @param {Array} cues
+     *        A list of cues to be initialized with
+     */
+    constructor(cues) {
+      TextTrackCueList.prototype.setCues_.call(this, cues);
+
+      /**
+       * @memberof TextTrackCueList
+       * @member {number} length
+       *         The current number of `TextTrackCue`s in the TextTrackCueList.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.length_;
+        }
+      });
+    }
+
+    /**
+     * A setter for cues in this list. Creates getters
+     * an an index for the cues.
+     *
+     * @param {Array} cues
+     *        An array of cues to set
+     *
+     * @private
+     */
+    setCues_(cues) {
+      const oldLength = this.length || 0;
+      let i = 0;
+      const l = cues.length;
+      this.cues_ = cues;
+      this.length_ = cues.length;
+      const defineProp = function (index) {
+        if (!('' + index in this)) {
+          Object.defineProperty(this, '' + index, {
+            get() {
+              return this.cues_[index];
+            }
+          });
+        }
+      };
+      if (oldLength < l) {
+        i = oldLength;
+        for (; i < l; i++) {
+          defineProp.call(this, i);
+        }
+      }
+    }
+
+    /**
+     * Get a `TextTrackCue` that is currently in the `TextTrackCueList` by id.
+     *
+     * @param {string} id
+     *        The id of the cue that should be searched for.
+     *
+     * @return {TextTrackCueList~TextTrackCue|null}
+     *         A single cue or null if none was found.
+     */
+    getCueById(id) {
+      let result = null;
+      for (let i = 0, l = this.length; i < l; i++) {
+        const cue = this[i];
+        if (cue.id === id) {
+          result = cue;
+          break;
+        }
+      }
+      return result;
+    }
+  }
+
+  /**
+   * @file track-kinds.js
+   */
+
+  /**
+   * All possible `VideoTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-videotrack-kind
+   * @typedef VideoTrack~Kind
+   * @enum
+   */
+  const VideoTrackKind = {
+    alternative: 'alternative',
+    captions: 'captions',
+    main: 'main',
+    sign: 'sign',
+    subtitles: 'subtitles',
+    commentary: 'commentary'
+  };
+
+  /**
+   * All possible `AudioTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-kind
+   * @typedef AudioTrack~Kind
+   * @enum
+   */
+  const AudioTrackKind = {
+    'alternative': 'alternative',
+    'descriptions': 'descriptions',
+    'main': 'main',
+    'main-desc': 'main-desc',
+    'translation': 'translation',
+    'commentary': 'commentary'
+  };
+
+  /**
+   * All possible `TextTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-texttrack-kind
+   * @typedef TextTrack~Kind
+   * @enum
+   */
+  const TextTrackKind = {
+    subtitles: 'subtitles',
+    captions: 'captions',
+    descriptions: 'descriptions',
+    chapters: 'chapters',
+    metadata: 'metadata'
+  };
+
+  /**
+   * All possible `TextTrackMode`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackmode
+   * @typedef TextTrack~Mode
+   * @enum
+   */
+  const TextTrackMode = {
+    disabled: 'disabled',
+    hidden: 'hidden',
+    showing: 'showing'
+  };
+
+  /**
+   * @file track.js
+   */
+
+  /**
+   * A Track class that contains all of the common functionality for {@link AudioTrack},
+   * {@link VideoTrack}, and {@link TextTrack}.
+   *
+   * > Note: This class should not be used directly
+   *
+   * @see {@link https://html.spec.whatwg.org/multipage/embedded-content.html}
+   * @extends EventTarget
+   * @abstract
+   */
+  class Track extends EventTarget$2 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {string} [options.kind='']
+     *        A valid kind for the track type you are creating.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @abstract
+     */
+    constructor(options = {}) {
+      super();
+      const trackProps = {
+        id: options.id || 'vjs_track_' + newGUID(),
+        kind: options.kind || '',
+        language: options.language || ''
+      };
+      let label = options.label || '';
+
+      /**
+       * @memberof Track
+       * @member {string} id
+       *         The id of this track. Cannot be changed after creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      /**
+       * @memberof Track
+       * @member {string} kind
+       *         The kind of track that this is. Cannot be changed after creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      /**
+       * @memberof Track
+       * @member {string} language
+       *         The two letter language code for this track. Cannot be changed after
+       *         creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      for (const key in trackProps) {
+        Object.defineProperty(this, key, {
+          get() {
+            return trackProps[key];
+          },
+          set() {}
+        });
+      }
+
+      /**
+       * @memberof Track
+       * @member {string} label
+       *         The label of this track. Cannot be changed after creation.
+       * @instance
+       *
+       * @fires Track#labelchange
+       */
+      Object.defineProperty(this, 'label', {
+        get() {
+          return label;
+        },
+        set(newLabel) {
+          if (newLabel !== label) {
+            label = newLabel;
+
+            /**
+             * An event that fires when label changes on this track.
+             *
+             * > Note: This is not part of the spec!
+             *
+             * @event Track#labelchange
+             * @type {Event}
+             */
+            this.trigger('labelchange');
+          }
+        }
+      });
+    }
+  }
+
+  /**
+   * @file url.js
+   * @module url
+   */
+
+  /**
+   * @typedef {Object} url:URLObject
+   *
+   * @property {string} protocol
+   *           The protocol of the url that was parsed.
+   *
+   * @property {string} hostname
+   *           The hostname of the url that was parsed.
+   *
+   * @property {string} port
+   *           The port of the url that was parsed.
+   *
+   * @property {string} pathname
+   *           The pathname of the url that was parsed.
+   *
+   * @property {string} search
+   *           The search query of the url that was parsed.
+   *
+   * @property {string} hash
+   *           The hash of the url that was parsed.
+   *
+   * @property {string} host
+   *           The host of the url that was parsed.
+   */
+
+  /**
+   * Resolve and parse the elements of a URL.
+   *
+   * @function
+   * @param    {String} url
+   *           The url to parse
+   *
+   * @return   {url:URLObject}
+   *           An object of url details
+   */
+  const parseUrl = function (url) {
+    // This entire method can be replace with URL once we are able to drop IE11
+
+    const props = ['protocol', 'hostname', 'port', 'pathname', 'search', 'hash', 'host'];
+
+    // add the url to an anchor and let the browser parse the URL
+    const a = document.createElement('a');
+    a.href = url;
+
+    // Copy the specific URL properties to a new object
+    // This is also needed for IE because the anchor loses its
+    // properties when it's removed from the dom
+    const details = {};
+    for (let i = 0; i < props.length; i++) {
+      details[props[i]] = a[props[i]];
+    }
+
+    // IE adds the port to the host property unlike everyone else. If
+    // a port identifier is added for standard ports, strip it.
+    if (details.protocol === 'http:') {
+      details.host = details.host.replace(/:80$/, '');
+    }
+    if (details.protocol === 'https:') {
+      details.host = details.host.replace(/:443$/, '');
+    }
+    if (!details.protocol) {
+      details.protocol = window.location.protocol;
+    }
+
+    /* istanbul ignore if */
+    if (!details.host) {
+      details.host = window.location.host;
+    }
+    return details;
+  };
+
+  /**
+   * Get absolute version of relative URL.
+   *
+   * @function
+   * @param    {string} url
+   *           URL to make absolute
+   *
+   * @return   {string}
+   *           Absolute URL
+   *
+   * @see      http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
+   */
+  const getAbsoluteURL = function (url) {
+    // Check if absolute URL
+    if (!url.match(/^https?:\/\//)) {
+      // Add the url to an anchor and let the browser parse it to convert to an absolute url
+      const a = document.createElement('a');
+      a.href = url;
+      url = a.href;
+    }
+    return url;
+  };
+
+  /**
+   * Returns the extension of the passed file name. It will return an empty string
+   * if passed an invalid path.
+   *
+   * @function
+   * @param    {string} path
+   *           The fileName path like '/path/to/file.mp4'
+   *
+   * @return  {string}
+   *           The extension in lower case or an empty string if no
+   *           extension could be found.
+   */
+  const getFileExtension = function (path) {
+    if (typeof path === 'string') {
+      const splitPathRe = /^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/;
+      const pathParts = splitPathRe.exec(path);
+      if (pathParts) {
+        return pathParts.pop().toLowerCase();
+      }
+    }
+    return '';
+  };
+
+  /**
+   * Returns whether the url passed is a cross domain request or not.
+   *
+   * @function
+   * @param    {string} url
+   *           The url to check.
+   *
+   * @param    {Object} [winLoc]
+   *           the domain to check the url against, defaults to window.location
+   *
+   * @param    {string} [winLoc.protocol]
+   *           The window location protocol defaults to window.location.protocol
+   *
+   * @param    {string} [winLoc.host]
+   *           The window location host defaults to window.location.host
+   *
+   * @return   {boolean}
+   *           Whether it is a cross domain request or not.
+   */
+  const isCrossOrigin = function (url, winLoc = window.location) {
+    const urlInfo = parseUrl(url);
+
+    // IE8 protocol relative urls will return ':' for protocol
+    const srcProtocol = urlInfo.protocol === ':' ? winLoc.protocol : urlInfo.protocol;
+
+    // Check if url is for another domain/origin
+    // IE8 doesn't know location.origin, so we won't rely on it here
+    const crossOrigin = srcProtocol + urlInfo.host !== winLoc.protocol + winLoc.host;
+    return crossOrigin;
+  };
+
+  var Url = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    parseUrl: parseUrl,
+    getAbsoluteURL: getAbsoluteURL,
+    getFileExtension: getFileExtension,
+    isCrossOrigin: isCrossOrigin
+  });
+
+  var win;
+  if (typeof window !== "undefined") {
+    win = window;
+  } else if (typeof commonjsGlobal !== "undefined") {
+    win = commonjsGlobal;
+  } else if (typeof self !== "undefined") {
+    win = self;
+  } else {
+    win = {};
+  }
+  var window_1 = win;
+
+  var _extends_1 = createCommonjsModule(function (module) {
+    function _extends() {
+      module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i];
+          for (var key in source) {
+            if (Object.prototype.hasOwnProperty.call(source, key)) {
+              target[key] = source[key];
+            }
+          }
+        }
+        return target;
+      }, module.exports.__esModule = true, module.exports["default"] = module.exports;
+      return _extends.apply(this, arguments);
+    }
+    module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+  var _extends$1 = unwrapExports(_extends_1);
+
+  var isFunction_1 = isFunction;
+  var toString = Object.prototype.toString;
+  function isFunction(fn) {
+    if (!fn) {
+      return false;
+    }
+    var string = toString.call(fn);
+    return string === '[object Function]' || typeof fn === 'function' && string !== '[object RegExp]' || typeof window !== 'undefined' && (
+    // IE8 and below
+    fn === window.setTimeout || fn === window.alert || fn === window.confirm || fn === window.prompt);
+  }
+
+  var httpResponseHandler = function httpResponseHandler(callback, decodeResponseBody) {
+    if (decodeResponseBody === void 0) {
+      decodeResponseBody = false;
+    }
+    return function (err, response, responseBody) {
+      // if the XHR failed, return that error
+      if (err) {
+        callback(err);
+        return;
+      } // if the HTTP status code is 4xx or 5xx, the request also failed
+
+      if (response.statusCode >= 400 && response.statusCode <= 599) {
+        var cause = responseBody;
+        if (decodeResponseBody) {
+          if (window_1.TextDecoder) {
+            var charset = getCharset(response.headers && response.headers['content-type']);
+            try {
+              cause = new TextDecoder(charset).decode(responseBody);
+            } catch (e) {}
+          } else {
+            cause = String.fromCharCode.apply(null, new Uint8Array(responseBody));
+          }
+        }
+        callback({
+          cause: cause
+        });
+        return;
+      } // otherwise, request succeeded
+
+      callback(null, responseBody);
+    };
+  };
+  function getCharset(contentTypeHeader) {
+    if (contentTypeHeader === void 0) {
+      contentTypeHeader = '';
+    }
+    return contentTypeHeader.toLowerCase().split(';').reduce(function (charset, contentType) {
+      var _contentType$split = contentType.split('='),
+        type = _contentType$split[0],
+        value = _contentType$split[1];
+      if (type.trim() === 'charset') {
+        return value.trim();
+      }
+      return charset;
+    }, 'utf-8');
+  }
+  var httpHandler = httpResponseHandler;
+
+  createXHR.httpHandler = httpHandler;
+  /**
+   * @license
+   * slighly modified parse-headers 2.0.2 <https://github.com/kesla/parse-headers/>
+   * Copyright (c) 2014 David Björklund
+   * Available under the MIT license
+   * <https://github.com/kesla/parse-headers/blob/master/LICENCE>
+   */
+
+  var parseHeaders = function parseHeaders(headers) {
+    var result = {};
+    if (!headers) {
+      return result;
+    }
+    headers.trim().split('\n').forEach(function (row) {
+      var index = row.indexOf(':');
+      var key = row.slice(0, index).trim().toLowerCase();
+      var value = row.slice(index + 1).trim();
+      if (typeof result[key] === 'undefined') {
+        result[key] = value;
+      } else if (Array.isArray(result[key])) {
+        result[key].push(value);
+      } else {
+        result[key] = [result[key], value];
+      }
+    });
+    return result;
+  };
+  var lib = createXHR; // Allow use of default import syntax in TypeScript
+
+  var default_1 = createXHR;
+  createXHR.XMLHttpRequest = window_1.XMLHttpRequest || noop$1;
+  createXHR.XDomainRequest = "withCredentials" in new createXHR.XMLHttpRequest() ? createXHR.XMLHttpRequest : window_1.XDomainRequest;
+  forEachArray(["get", "put", "post", "patch", "head", "delete"], function (method) {
+    createXHR[method === "delete" ? "del" : method] = function (uri, options, callback) {
+      options = initParams(uri, options, callback);
+      options.method = method.toUpperCase();
+      return _createXHR(options);
+    };
+  });
+  function forEachArray(array, iterator) {
+    for (var i = 0; i < array.length; i++) {
+      iterator(array[i]);
+    }
+  }
+  function isEmpty(obj) {
+    for (var i in obj) {
+      if (obj.hasOwnProperty(i)) return false;
+    }
+    return true;
+  }
+  function initParams(uri, options, callback) {
+    var params = uri;
+    if (isFunction_1(options)) {
+      callback = options;
+      if (typeof uri === "string") {
+        params = {
+          uri: uri
+        };
+      }
+    } else {
+      params = _extends_1({}, options, {
+        uri: uri
+      });
+    }
+    params.callback = callback;
+    return params;
+  }
+  function createXHR(uri, options, callback) {
+    options = initParams(uri, options, callback);
+    return _createXHR(options);
+  }
+  function _createXHR(options) {
+    if (typeof options.callback === "undefined") {
+      throw new Error("callback argument missing");
+    }
+    var called = false;
+    var callback = function cbOnce(err, response, body) {
+      if (!called) {
+        called = true;
+        options.callback(err, response, body);
+      }
+    };
+    function readystatechange() {
+      if (xhr.readyState === 4) {
+        setTimeout(loadFunc, 0);
+      }
+    }
+    function getBody() {
+      // Chrome with requestType=blob throws errors arround when even testing access to responseText
+      var body = undefined;
+      if (xhr.response) {
+        body = xhr.response;
+      } else {
+        body = xhr.responseText || getXml(xhr);
+      }
+      if (isJson) {
+        try {
+          body = JSON.parse(body);
+        } catch (e) {}
+      }
+      return body;
+    }
+    function errorFunc(evt) {
+      clearTimeout(timeoutTimer);
+      if (!(evt instanceof Error)) {
+        evt = new Error("" + (evt || "Unknown XMLHttpRequest Error"));
+      }
+      evt.statusCode = 0;
+      return callback(evt, failureResponse);
+    } // will load the data & process the response in a special response object
+
+    function loadFunc() {
+      if (aborted) return;
+      var status;
+      clearTimeout(timeoutTimer);
+      if (options.useXDR && xhr.status === undefined) {
+        //IE8 CORS GET successful response doesn't have a status field, but body is fine
+        status = 200;
+      } else {
+        status = xhr.status === 1223 ? 204 : xhr.status;
+      }
+      var response = failureResponse;
+      var err = null;
+      if (status !== 0) {
+        response = {
+          body: getBody(),
+          statusCode: status,
+          method: method,
+          headers: {},
+          url: uri,
+          rawRequest: xhr
+        };
+        if (xhr.getAllResponseHeaders) {
+          //remember xhr can in fact be XDR for CORS in IE
+          response.headers = parseHeaders(xhr.getAllResponseHeaders());
+        }
+      } else {
+        err = new Error("Internal XMLHttpRequest Error");
+      }
+      return callback(err, response, response.body);
+    }
+    var xhr = options.xhr || null;
+    if (!xhr) {
+      if (options.cors || options.useXDR) {
+        xhr = new createXHR.XDomainRequest();
+      } else {
+        xhr = new createXHR.XMLHttpRequest();
+      }
+    }
+    var key;
+    var aborted;
+    var uri = xhr.url = options.uri || options.url;
+    var method = xhr.method = options.method || "GET";
+    var body = options.body || options.data;
+    var headers = xhr.headers = options.headers || {};
+    var sync = !!options.sync;
+    var isJson = false;
+    var timeoutTimer;
+    var failureResponse = {
+      body: undefined,
+      headers: {},
+      statusCode: 0,
+      method: method,
+      url: uri,
+      rawRequest: xhr
+    };
+    if ("json" in options && options.json !== false) {
+      isJson = true;
+      headers["accept"] || headers["Accept"] || (headers["Accept"] = "application/json"); //Don't override existing accept header declared by user
+
+      if (method !== "GET" && method !== "HEAD") {
+        headers["content-type"] || headers["Content-Type"] || (headers["Content-Type"] = "application/json"); //Don't override existing accept header declared by user
+
+        body = JSON.stringify(options.json === true ? body : options.json);
+      }
+    }
+    xhr.onreadystatechange = readystatechange;
+    xhr.onload = loadFunc;
+    xhr.onerror = errorFunc; // IE9 must have onprogress be set to a unique function.
+
+    xhr.onprogress = function () {// IE must die
+    };
+    xhr.onabort = function () {
+      aborted = true;
+    };
+    xhr.ontimeout = errorFunc;
+    xhr.open(method, uri, !sync, options.username, options.password); //has to be after open
+
+    if (!sync) {
+      xhr.withCredentials = !!options.withCredentials;
+    } // Cannot set timeout with sync request
+    // not setting timeout on the xhr object, because of old webkits etc. not handling that correctly
+    // both npm's request and jquery 1.x use this kind of timeout, so this is being consistent
+
+    if (!sync && options.timeout > 0) {
+      timeoutTimer = setTimeout(function () {
+        if (aborted) return;
+        aborted = true; //IE9 may still call readystatechange
+
+        xhr.abort("timeout");
+        var e = new Error("XMLHttpRequest timeout");
+        e.code = "ETIMEDOUT";
+        errorFunc(e);
+      }, options.timeout);
+    }
+    if (xhr.setRequestHeader) {
+      for (key in headers) {
+        if (headers.hasOwnProperty(key)) {
+          xhr.setRequestHeader(key, headers[key]);
+        }
+      }
+    } else if (options.headers && !isEmpty(options.headers)) {
+      throw new Error("Headers cannot be set on an XDomainRequest object");
+    }
+    if ("responseType" in options) {
+      xhr.responseType = options.responseType;
+    }
+    if ("beforeSend" in options && typeof options.beforeSend === "function") {
+      options.beforeSend(xhr);
+    } // Microsoft Edge browser sends "undefined" when send is called with undefined value.
+    // XMLHttpRequest spec says to pass null as body to indicate no body
+    // See https://github.com/naugtur/xhr/issues/100.
+
+    xhr.send(body || null);
+    return xhr;
+  }
+  function getXml(xhr) {
+    // xhr.responseXML will throw Exception "InvalidStateError" or "DOMException"
+    // See https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseXML.
+    try {
+      if (xhr.responseType === "document") {
+        return xhr.responseXML;
+      }
+      var firefoxBugTakenEffect = xhr.responseXML && xhr.responseXML.documentElement.nodeName === "parsererror";
+      if (xhr.responseType === "" && !firefoxBugTakenEffect) {
+        return xhr.responseXML;
+      }
+    } catch (e) {}
+    return null;
+  }
+  function noop$1() {}
+  lib.default = default_1;
+
+  /**
+   * @file text-track.js
+   */
+
+  /**
+   * Takes a webvtt file contents and parses it into cues
+   *
+   * @param {string} srcContent
+   *        webVTT file contents
+   *
+   * @param {TextTrack} track
+   *        TextTrack to add cues to. Cues come from the srcContent.
+   *
+   * @private
+   */
+  const parseCues = function (srcContent, track) {
+    const parser = new window.WebVTT.Parser(window, window.vttjs, window.WebVTT.StringDecoder());
+    const errors = [];
+    parser.oncue = function (cue) {
+      track.addCue(cue);
+    };
+    parser.onparsingerror = function (error) {
+      errors.push(error);
+    };
+    parser.onflush = function () {
+      track.trigger({
+        type: 'loadeddata',
+        target: track
+      });
+    };
+    parser.parse(srcContent);
+    if (errors.length > 0) {
+      if (window.console && window.console.groupCollapsed) {
+        window.console.groupCollapsed(`Text Track parsing errors for ${track.src}`);
+      }
+      errors.forEach(error => log$1.error(error));
+      if (window.console && window.console.groupEnd) {
+        window.console.groupEnd();
+      }
+    }
+    parser.flush();
+  };
+
+  /**
+   * Load a `TextTrack` from a specified url.
+   *
+   * @param {string} src
+   *        Url to load track from.
+   *
+   * @param {TextTrack} track
+   *        Track to add cues to. Comes from the content at the end of `url`.
+   *
+   * @private
+   */
+  const loadTrack = function (src, track) {
+    const opts = {
+      uri: src
+    };
+    const crossOrigin = isCrossOrigin(src);
+    if (crossOrigin) {
+      opts.cors = crossOrigin;
+    }
+    const withCredentials = track.tech_.crossOrigin() === 'use-credentials';
+    if (withCredentials) {
+      opts.withCredentials = withCredentials;
+    }
+    lib(opts, bind_(this, function (err, response, responseBody) {
+      if (err) {
+        return log$1.error(err, response);
+      }
+      track.loaded_ = true;
+
+      // Make sure that vttjs has loaded, otherwise, wait till it finished loading
+      // NOTE: this is only used for the alt/video.novtt.js build
+      if (typeof window.WebVTT !== 'function') {
+        if (track.tech_) {
+          // to prevent use before define eslint error, we define loadHandler
+          // as a let here
+          track.tech_.any(['vttjsloaded', 'vttjserror'], event => {
+            if (event.type === 'vttjserror') {
+              log$1.error(`vttjs failed to load, stopping trying to process ${track.src}`);
+              return;
+            }
+            return parseCues(responseBody, track);
+          });
+        }
+      } else {
+        parseCues(responseBody, track);
+      }
+    }));
+  };
+
+  /**
+   * A representation of a single `TextTrack`.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrack}
+   * @extends Track
+   */
+  class TextTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} options={}
+     *        Object of option names and values
+     *
+     * @param { import('../tech/tech').default } options.tech
+     *        A reference to the tech that owns this TextTrack.
+     *
+     * @param {TextTrack~Kind} [options.kind='subtitles']
+     *        A valid text track kind.
+     *
+     * @param {TextTrack~Mode} [options.mode='disabled']
+     *        A valid text track mode.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this TextTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {string} [options.srclang='']
+     *        A valid two character language code. An alternative, but deprioritized
+     *        version of `options.language`
+     *
+     * @param {string} [options.src]
+     *        A url to TextTrack cues.
+     *
+     * @param {boolean} [options.default]
+     *        If this track should default to on or off.
+     */
+    constructor(options = {}) {
+      if (!options.tech) {
+        throw new Error('A tech was not provided.');
+      }
+      const settings = merge$2(options, {
+        kind: TextTrackKind[options.kind] || 'subtitles',
+        language: options.language || options.srclang || ''
+      });
+      let mode = TextTrackMode[settings.mode] || 'disabled';
+      const default_ = settings.default;
+      if (settings.kind === 'metadata' || settings.kind === 'chapters') {
+        mode = 'hidden';
+      }
+      super(settings);
+      this.tech_ = settings.tech;
+      this.cues_ = [];
+      this.activeCues_ = [];
+      this.preload_ = this.tech_.preloadTextTracks !== false;
+      const cues = new TextTrackCueList(this.cues_);
+      const activeCues = new TextTrackCueList(this.activeCues_);
+      let changed = false;
+      this.timeupdateHandler = bind_(this, function (event = {}) {
+        if (this.tech_.isDisposed()) {
+          return;
+        }
+        if (!this.tech_.isReady_) {
+          if (event.type !== 'timeupdate') {
+            this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+          }
+          return;
+        }
+
+        // Accessing this.activeCues for the side-effects of updating itself
+        // due to its nature as a getter function. Do not remove or cues will
+        // stop updating!
+        // Use the setter to prevent deletion from uglify (pure_getters rule)
+        this.activeCues = this.activeCues;
+        if (changed) {
+          this.trigger('cuechange');
+          changed = false;
+        }
+        if (event.type !== 'timeupdate') {
+          this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+        }
+      });
+      const disposeHandler = () => {
+        this.stopTracking();
+      };
+      this.tech_.one('dispose', disposeHandler);
+      if (mode !== 'disabled') {
+        this.startTracking();
+      }
+      Object.defineProperties(this, {
+        /**
+         * @memberof TextTrack
+         * @member {boolean} default
+         *         If this track was set to be on or off by default. Cannot be changed after
+         *         creation.
+         * @instance
+         *
+         * @readonly
+         */
+        default: {
+          get() {
+            return default_;
+          },
+          set() {}
+        },
+        /**
+         * @memberof TextTrack
+         * @member {string} mode
+         *         Set the mode of this TextTrack to a valid {@link TextTrack~Mode}. Will
+         *         not be set if setting to an invalid mode.
+         * @instance
+         *
+         * @fires TextTrack#modechange
+         */
+        mode: {
+          get() {
+            return mode;
+          },
+          set(newMode) {
+            if (!TextTrackMode[newMode]) {
+              return;
+            }
+            if (mode === newMode) {
+              return;
+            }
+            mode = newMode;
+            if (!this.preload_ && mode !== 'disabled' && this.cues.length === 0) {
+              // On-demand load.
+              loadTrack(this.src, this);
+            }
+            this.stopTracking();
+            if (mode !== 'disabled') {
+              this.startTracking();
+            }
+            /**
+             * An event that fires when mode changes on this track. This allows
+             * the TextTrackList that holds this track to act accordingly.
+             *
+             * > Note: This is not part of the spec!
+             *
+             * @event TextTrack#modechange
+             * @type {Event}
+             */
+            this.trigger('modechange');
+          }
+        },
+        /**
+         * @memberof TextTrack
+         * @member {TextTrackCueList} cues
+         *         The text track cue list for this TextTrack.
+         * @instance
+         */
+        cues: {
+          get() {
+            if (!this.loaded_) {
+              return null;
+            }
+            return cues;
+          },
+          set() {}
+        },
+        /**
+         * @memberof TextTrack
+         * @member {TextTrackCueList} activeCues
+         *         The list text track cues that are currently active for this TextTrack.
+         * @instance
+         */
+        activeCues: {
+          get() {
+            if (!this.loaded_) {
+              return null;
+            }
+
+            // nothing to do
+            if (this.cues.length === 0) {
+              return activeCues;
+            }
+            const ct = this.tech_.currentTime();
+            const active = [];
+            for (let i = 0, l = this.cues.length; i < l; i++) {
+              const cue = this.cues[i];
+              if (cue.startTime <= ct && cue.endTime >= ct) {
+                active.push(cue);
+              }
+            }
+            changed = false;
+            if (active.length !== this.activeCues_.length) {
+              changed = true;
+            } else {
+              for (let i = 0; i < active.length; i++) {
+                if (this.activeCues_.indexOf(active[i]) === -1) {
+                  changed = true;
+                }
+              }
+            }
+            this.activeCues_ = active;
+            activeCues.setCues_(this.activeCues_);
+            return activeCues;
+          },
+          // /!\ Keep this setter empty (see the timeupdate handler above)
+          set() {}
+        }
+      });
+      if (settings.src) {
+        this.src = settings.src;
+        if (!this.preload_) {
+          // Tracks will load on-demand.
+          // Act like we're loaded for other purposes.
+          this.loaded_ = true;
+        }
+        if (this.preload_ || settings.kind !== 'subtitles' && settings.kind !== 'captions') {
+          loadTrack(this.src, this);
+        }
+      } else {
+        this.loaded_ = true;
+      }
+    }
+    startTracking() {
+      // More precise cues based on requestVideoFrameCallback with a requestAnimationFram fallback
+      this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+      // Also listen to timeupdate in case rVFC/rAF stops (window in background, audio in video el)
+      this.tech_.on('timeupdate', this.timeupdateHandler);
+    }
+    stopTracking() {
+      if (this.rvf_) {
+        this.tech_.cancelVideoFrameCallback(this.rvf_);
+        this.rvf_ = undefined;
+      }
+      this.tech_.off('timeupdate', this.timeupdateHandler);
+    }
+
+    /**
+     * Add a cue to the internal list of cues.
+     *
+     * @param {TextTrack~Cue} cue
+     *        The cue to add to our internal list
+     */
+    addCue(originalCue) {
+      let cue = originalCue;
+
+      // Testing if the cue is a VTTCue in a way that survives minification
+      if (!('getCueAsHTML' in cue)) {
+        cue = new window.vttjs.VTTCue(originalCue.startTime, originalCue.endTime, originalCue.text);
+        for (const prop in originalCue) {
+          if (!(prop in cue)) {
+            cue[prop] = originalCue[prop];
+          }
+        }
+
+        // make sure that `id` is copied over
+        cue.id = originalCue.id;
+        cue.originalCue_ = originalCue;
+      }
+      const tracks = this.tech_.textTracks();
+      for (let i = 0; i < tracks.length; i++) {
+        if (tracks[i] !== this) {
+          tracks[i].removeCue(cue);
+        }
+      }
+      this.cues_.push(cue);
+      this.cues.setCues_(this.cues_);
+    }
+
+    /**
+     * Remove a cue from our internal list
+     *
+     * @param {TextTrack~Cue} removeCue
+     *        The cue to remove from our internal list
+     */
+    removeCue(removeCue) {
+      let i = this.cues_.length;
+      while (i--) {
+        const cue = this.cues_[i];
+        if (cue === removeCue || cue.originalCue_ && cue.originalCue_ === removeCue) {
+          this.cues_.splice(i, 1);
+          this.cues.setCues_(this.cues_);
+          break;
+        }
+      }
+    }
+  }
+
+  /**
+   * cuechange - One or more cues in the track have become active or stopped being active.
+   * @protected
+   */
+  TextTrack.prototype.allowedEvents_ = {
+    cuechange: 'cuechange'
+  };
+
+  /**
+   * A representation of a single `AudioTrack`. If it is part of an {@link AudioTrackList}
+   * only one `AudioTrack` in the list will be enabled at a time.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotrack}
+   * @extends Track
+   */
+  class AudioTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {AudioTrack~Kind} [options.kind='']
+     *        A valid audio track kind
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {boolean} [options.enabled]
+     *        If this track is the one that is currently playing. If this track is part of
+     *        an {@link AudioTrackList}, only one {@link AudioTrack} will be enabled.
+     */
+    constructor(options = {}) {
+      const settings = merge$2(options, {
+        kind: AudioTrackKind[options.kind] || ''
+      });
+      super(settings);
+      let enabled = false;
+
+      /**
+       * @memberof AudioTrack
+       * @member {boolean} enabled
+       *         If this `AudioTrack` is enabled or not. When setting this will
+       *         fire {@link AudioTrack#enabledchange} if the state of enabled is changed.
+       * @instance
+       *
+       * @fires VideoTrack#selectedchange
+       */
+      Object.defineProperty(this, 'enabled', {
+        get() {
+          return enabled;
+        },
+        set(newEnabled) {
+          // an invalid or unchanged value
+          if (typeof newEnabled !== 'boolean' || newEnabled === enabled) {
+            return;
+          }
+          enabled = newEnabled;
+
+          /**
+           * An event that fires when enabled changes on this track. This allows
+           * the AudioTrackList that holds this track to act accordingly.
+           *
+           * > Note: This is not part of the spec! Native tracks will do
+           *         this internally without an event.
+           *
+           * @event AudioTrack#enabledchange
+           * @type {Event}
+           */
+          this.trigger('enabledchange');
+        }
+      });
+
+      // if the user sets this track to selected then
+      // set selected to that true value otherwise
+      // we keep it false
+      if (settings.enabled) {
+        this.enabled = settings.enabled;
+      }
+      this.loaded_ = true;
+    }
+  }
+
+  /**
+   * A representation of a single `VideoTrack`.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotrack}
+   * @extends Track
+   */
+  class VideoTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {string} [options.kind='']
+     *        A valid {@link VideoTrack~Kind}
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {boolean} [options.selected]
+     *        If this track is the one that is currently playing.
+     */
+    constructor(options = {}) {
+      const settings = merge$2(options, {
+        kind: VideoTrackKind[options.kind] || ''
+      });
+      super(settings);
+      let selected = false;
+
+      /**
+       * @memberof VideoTrack
+       * @member {boolean} selected
+       *         If this `VideoTrack` is selected or not. When setting this will
+       *         fire {@link VideoTrack#selectedchange} if the state of selected changed.
+       * @instance
+       *
+       * @fires VideoTrack#selectedchange
+       */
+      Object.defineProperty(this, 'selected', {
+        get() {
+          return selected;
+        },
+        set(newSelected) {
+          // an invalid or unchanged value
+          if (typeof newSelected !== 'boolean' || newSelected === selected) {
+            return;
+          }
+          selected = newSelected;
+
+          /**
+           * An event that fires when selected changes on this track. This allows
+           * the VideoTrackList that holds this track to act accordingly.
+           *
+           * > Note: This is not part of the spec! Native tracks will do
+           *         this internally without an event.
+           *
+           * @event VideoTrack#selectedchange
+           * @type {Event}
+           */
+          this.trigger('selectedchange');
+        }
+      });
+
+      // if the user sets this track to selected then
+      // set selected to that true value otherwise
+      // we keep it false
+      if (settings.selected) {
+        this.selected = settings.selected;
+      }
+    }
+  }
+
+  /**
+   * @file html-track-element.js
+   */
+
+  /**
+   * A single track represented in the DOM.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#htmltrackelement}
+   * @extends EventTarget
+   */
+  class HTMLTrackElement extends EventTarget$2 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} options={}
+     *        Object of option names and values
+     *
+     * @param { import('../tech/tech').default } options.tech
+     *        A reference to the tech that owns this HTMLTrackElement.
+     *
+     * @param {TextTrack~Kind} [options.kind='subtitles']
+     *        A valid text track kind.
+     *
+     * @param {TextTrack~Mode} [options.mode='disabled']
+     *        A valid text track mode.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this TextTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {string} [options.srclang='']
+     *        A valid two character language code. An alternative, but deprioritized
+     *        version of `options.language`
+     *
+     * @param {string} [options.src]
+     *        A url to TextTrack cues.
+     *
+     * @param {boolean} [options.default]
+     *        If this track should default to on or off.
+     */
+    constructor(options = {}) {
+      super();
+      let readyState;
+      const track = new TextTrack(options);
+      this.kind = track.kind;
+      this.src = track.src;
+      this.srclang = track.language;
+      this.label = track.label;
+      this.default = track.default;
+      Object.defineProperties(this, {
+        /**
+         * @memberof HTMLTrackElement
+         * @member {HTMLTrackElement~ReadyState} readyState
+         *         The current ready state of the track element.
+         * @instance
+         */
+        readyState: {
+          get() {
+            return readyState;
+          }
+        },
+        /**
+         * @memberof HTMLTrackElement
+         * @member {TextTrack} track
+         *         The underlying TextTrack object.
+         * @instance
+         *
+         */
+        track: {
+          get() {
+            return track;
+          }
+        }
+      });
+      readyState = HTMLTrackElement.NONE;
+
+      /**
+       * @listens TextTrack#loadeddata
+       * @fires HTMLTrackElement#load
+       */
+      track.addEventListener('loadeddata', () => {
+        readyState = HTMLTrackElement.LOADED;
+        this.trigger({
+          type: 'load',
+          target: this
+        });
+      });
+    }
+  }
+
+  /**
+   * @protected
+   */
+  HTMLTrackElement.prototype.allowedEvents_ = {
+    load: 'load'
+  };
+
+  /**
+   * The text track not loaded state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.NONE = 0;
+
+  /**
+   * The text track loading state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.LOADING = 1;
+
+  /**
+   * The text track loaded state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.LOADED = 2;
+
+  /**
+   * The text track failed to load state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.ERROR = 3;
+
+  /*
+   * This file contains all track properties that are used in
+   * player.js, tech.js, html5.js and possibly other techs in the future.
+   */
+
+  const NORMAL = {
+    audio: {
+      ListClass: AudioTrackList,
+      TrackClass: AudioTrack,
+      capitalName: 'Audio'
+    },
+    video: {
+      ListClass: VideoTrackList,
+      TrackClass: VideoTrack,
+      capitalName: 'Video'
+    },
+    text: {
+      ListClass: TextTrackList,
+      TrackClass: TextTrack,
+      capitalName: 'Text'
+    }
+  };
+  Object.keys(NORMAL).forEach(function (type) {
+    NORMAL[type].getterName = `${type}Tracks`;
+    NORMAL[type].privateName = `${type}Tracks_`;
+  });
+  const REMOTE = {
+    remoteText: {
+      ListClass: TextTrackList,
+      TrackClass: TextTrack,
+      capitalName: 'RemoteText',
+      getterName: 'remoteTextTracks',
+      privateName: 'remoteTextTracks_'
+    },
+    remoteTextEl: {
+      ListClass: HtmlTrackElementList,
+      TrackClass: HTMLTrackElement,
+      capitalName: 'RemoteTextTrackEls',
+      getterName: 'remoteTextTrackEls',
+      privateName: 'remoteTextTrackEls_'
+    }
+  };
+  const ALL = Object.assign({}, NORMAL, REMOTE);
+  REMOTE.names = Object.keys(REMOTE);
+  NORMAL.names = Object.keys(NORMAL);
+  ALL.names = [].concat(REMOTE.names).concat(NORMAL.names);
+
+  var minDoc = {};
+
+  var topLevel = typeof commonjsGlobal !== 'undefined' ? commonjsGlobal : typeof window !== 'undefined' ? window : {};
+  var doccy;
+  if (typeof document !== 'undefined') {
+    doccy = document;
+  } else {
+    doccy = topLevel['__GLOBAL_DOCUMENT_CACHE@4'];
+    if (!doccy) {
+      doccy = topLevel['__GLOBAL_DOCUMENT_CACHE@4'] = minDoc;
+    }
+  }
+  var document_1 = doccy;
+
+  /**
+   * Copyright 2013 vtt.js Contributors
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *   http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+
+  /* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+  /* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+  var _objCreate = Object.create || function () {
+    function F() {}
+    return function (o) {
+      if (arguments.length !== 1) {
+        throw new Error('Object.create shim only accepts one parameter.');
+      }
+      F.prototype = o;
+      return new F();
+    };
+  }();
+
+  // Creates a new ParserError object from an errorData object. The errorData
+  // object should have default code and message properties. The default message
+  // property can be overriden by passing in a message parameter.
+  // See ParsingError.Errors below for acceptable errors.
+  function ParsingError(errorData, message) {
+    this.name = "ParsingError";
+    this.code = errorData.code;
+    this.message = message || errorData.message;
+  }
+  ParsingError.prototype = _objCreate(Error.prototype);
+  ParsingError.prototype.constructor = ParsingError;
+
+  // ParsingError metadata for acceptable ParsingErrors.
+  ParsingError.Errors = {
+    BadSignature: {
+      code: 0,
+      message: "Malformed WebVTT signature."
+    },
+    BadTimeStamp: {
+      code: 1,
+      message: "Malformed time stamp."
+    }
+  };
+
+  // Try to parse input as a time stamp.
+  function parseTimeStamp(input) {
+    function computeSeconds(h, m, s, f) {
+      return (h | 0) * 3600 + (m | 0) * 60 + (s | 0) + (f | 0) / 1000;
+    }
+    var m = input.match(/^(\d+):(\d{1,2})(:\d{1,2})?\.(\d{3})/);
+    if (!m) {
+      return null;
+    }
+    if (m[3]) {
+      // Timestamp takes the form of [hours]:[minutes]:[seconds].[milliseconds]
+      return computeSeconds(m[1], m[2], m[3].replace(":", ""), m[4]);
+    } else if (m[1] > 59) {
+      // Timestamp takes the form of [hours]:[minutes].[milliseconds]
+      // First position is hours as it's over 59.
+      return computeSeconds(m[1], m[2], 0, m[4]);
+    } else {
+      // Timestamp takes the form of [minutes]:[seconds].[milliseconds]
+      return computeSeconds(0, m[1], m[2], m[4]);
+    }
+  }
+
+  // A settings object holds key/value pairs and will ignore anything but the first
+  // assignment to a specific key.
+  function Settings() {
+    this.values = _objCreate(null);
+  }
+  Settings.prototype = {
+    // Only accept the first assignment to any key.
+    set: function (k, v) {
+      if (!this.get(k) && v !== "") {
+        this.values[k] = v;
+      }
+    },
+    // Return the value for a key, or a default value.
+    // If 'defaultKey' is passed then 'dflt' is assumed to be an object with
+    // a number of possible default values as properties where 'defaultKey' is
+    // the key of the property that will be chosen; otherwise it's assumed to be
+    // a single value.
+    get: function (k, dflt, defaultKey) {
+      if (defaultKey) {
+        return this.has(k) ? this.values[k] : dflt[defaultKey];
+      }
+      return this.has(k) ? this.values[k] : dflt;
+    },
+    // Check whether we have a value for a key.
+    has: function (k) {
+      return k in this.values;
+    },
+    // Accept a setting if its one of the given alternatives.
+    alt: function (k, v, a) {
+      for (var n = 0; n < a.length; ++n) {
+        if (v === a[n]) {
+          this.set(k, v);
+          break;
+        }
+      }
+    },
+    // Accept a setting if its a valid (signed) integer.
+    integer: function (k, v) {
+      if (/^-?\d+$/.test(v)) {
+        // integer
+        this.set(k, parseInt(v, 10));
+      }
+    },
+    // Accept a setting if its a valid percentage.
+    percent: function (k, v) {
+      if (v.match(/^([\d]{1,3})(\.[\d]*)?%$/)) {
+        v = parseFloat(v);
+        if (v >= 0 && v <= 100) {
+          this.set(k, v);
+          return true;
+        }
+      }
+      return false;
+    }
+  };
+
+  // Helper function to parse input into groups separated by 'groupDelim', and
+  // interprete each group as a key/value pair separated by 'keyValueDelim'.
+  function parseOptions(input, callback, keyValueDelim, groupDelim) {
+    var groups = groupDelim ? input.split(groupDelim) : [input];
+    for (var i in groups) {
+      if (typeof groups[i] !== "string") {
+        continue;
+      }
+      var kv = groups[i].split(keyValueDelim);
+      if (kv.length !== 2) {
+        continue;
+      }
+      var k = kv[0].trim();
+      var v = kv[1].trim();
+      callback(k, v);
+    }
+  }
+  function parseCue(input, cue, regionList) {
+    // Remember the original input if we need to throw an error.
+    var oInput = input;
+    // 4.1 WebVTT timestamp
+    function consumeTimeStamp() {
+      var ts = parseTimeStamp(input);
+      if (ts === null) {
+        throw new ParsingError(ParsingError.Errors.BadTimeStamp, "Malformed timestamp: " + oInput);
+      }
+      // Remove time stamp from input.
+      input = input.replace(/^[^\sa-zA-Z-]+/, "");
+      return ts;
+    }
+
+    // 4.4.2 WebVTT cue settings
+    function consumeCueSettings(input, cue) {
+      var settings = new Settings();
+      parseOptions(input, function (k, v) {
+        switch (k) {
+          case "region":
+            // Find the last region we parsed with the same region id.
+            for (var i = regionList.length - 1; i >= 0; i--) {
+              if (regionList[i].id === v) {
+                settings.set(k, regionList[i].region);
+                break;
+              }
+            }
+            break;
+          case "vertical":
+            settings.alt(k, v, ["rl", "lr"]);
+            break;
+          case "line":
+            var vals = v.split(","),
+              vals0 = vals[0];
+            settings.integer(k, vals0);
+            settings.percent(k, vals0) ? settings.set("snapToLines", false) : null;
+            settings.alt(k, vals0, ["auto"]);
+            if (vals.length === 2) {
+              settings.alt("lineAlign", vals[1], ["start", "center", "end"]);
+            }
+            break;
+          case "position":
+            vals = v.split(",");
+            settings.percent(k, vals[0]);
+            if (vals.length === 2) {
+              settings.alt("positionAlign", vals[1], ["start", "center", "end"]);
+            }
+            break;
+          case "size":
+            settings.percent(k, v);
+            break;
+          case "align":
+            settings.alt(k, v, ["start", "center", "end", "left", "right"]);
+            break;
+        }
+      }, /:/, /\s/);
+
+      // Apply default values for any missing fields.
+      cue.region = settings.get("region", null);
+      cue.vertical = settings.get("vertical", "");
+      try {
+        cue.line = settings.get("line", "auto");
+      } catch (e) {}
+      cue.lineAlign = settings.get("lineAlign", "start");
+      cue.snapToLines = settings.get("snapToLines", true);
+      cue.size = settings.get("size", 100);
+      // Safari still uses the old middle value and won't accept center
+      try {
+        cue.align = settings.get("align", "center");
+      } catch (e) {
+        cue.align = settings.get("align", "middle");
+      }
+      try {
+        cue.position = settings.get("position", "auto");
+      } catch (e) {
+        cue.position = settings.get("position", {
+          start: 0,
+          left: 0,
+          center: 50,
+          middle: 50,
+          end: 100,
+          right: 100
+        }, cue.align);
+      }
+      cue.positionAlign = settings.get("positionAlign", {
+        start: "start",
+        left: "start",
+        center: "center",
+        middle: "center",
+        end: "end",
+        right: "end"
+      }, cue.align);
+    }
+    function skipWhitespace() {
+      input = input.replace(/^\s+/, "");
+    }
+
+    // 4.1 WebVTT cue timings.
+    skipWhitespace();
+    cue.startTime = consumeTimeStamp(); // (1) collect cue start time
+    skipWhitespace();
+    if (input.substr(0, 3) !== "-->") {
+      // (3) next characters must match "-->"
+      throw new ParsingError(ParsingError.Errors.BadTimeStamp, "Malformed time stamp (time stamps must be separated by '-->'): " + oInput);
+    }
+    input = input.substr(3);
+    skipWhitespace();
+    cue.endTime = consumeTimeStamp(); // (5) collect cue end time
+
+    // 4.1 WebVTT cue settings list.
+    skipWhitespace();
+    consumeCueSettings(input, cue);
+  }
+
+  // When evaluating this file as part of a Webpack bundle for server
+  // side rendering, `document` is an empty object.
+  var TEXTAREA_ELEMENT = document_1.createElement && document_1.createElement("textarea");
+  var TAG_NAME = {
+    c: "span",
+    i: "i",
+    b: "b",
+    u: "u",
+    ruby: "ruby",
+    rt: "rt",
+    v: "span",
+    lang: "span"
+  };
+
+  // 5.1 default text color
+  // 5.2 default text background color is equivalent to text color with bg_ prefix
+  var DEFAULT_COLOR_CLASS = {
+    white: 'rgba(255,255,255,1)',
+    lime: 'rgba(0,255,0,1)',
+    cyan: 'rgba(0,255,255,1)',
+    red: 'rgba(255,0,0,1)',
+    yellow: 'rgba(255,255,0,1)',
+    magenta: 'rgba(255,0,255,1)',
+    blue: 'rgba(0,0,255,1)',
+    black: 'rgba(0,0,0,1)'
+  };
+  var TAG_ANNOTATION = {
+    v: "title",
+    lang: "lang"
+  };
+  var NEEDS_PARENT = {
+    rt: "ruby"
+  };
+
+  // Parse content into a document fragment.
+  function parseContent(window, input) {
+    function nextToken() {
+      // Check for end-of-string.
+      if (!input) {
+        return null;
+      }
+
+      // Consume 'n' characters from the input.
+      function consume(result) {
+        input = input.substr(result.length);
+        return result;
+      }
+      var m = input.match(/^([^<]*)(<[^>]*>?)?/);
+      // If there is some text before the next tag, return it, otherwise return
+      // the tag.
+      return consume(m[1] ? m[1] : m[2]);
+    }
+    function unescape(s) {
+      TEXTAREA_ELEMENT.innerHTML = s;
+      s = TEXTAREA_ELEMENT.textContent;
+      TEXTAREA_ELEMENT.textContent = "";
+      return s;
+    }
+    function shouldAdd(current, element) {
+      return !NEEDS_PARENT[element.localName] || NEEDS_PARENT[element.localName] === current.localName;
+    }
+
+    // Create an element for this tag.
+    function createElement(type, annotation) {
+      var tagName = TAG_NAME[type];
+      if (!tagName) {
+        return null;
+      }
+      var element = window.document.createElement(tagName);
+      var name = TAG_ANNOTATION[type];
+      if (name && annotation) {
+        element[name] = annotation.trim();
+      }
+      return element;
+    }
+    var rootDiv = window.document.createElement("div"),
+      current = rootDiv,
+      t,
+      tagStack = [];
+    while ((t = nextToken()) !== null) {
+      if (t[0] === '<') {
+        if (t[1] === "/") {
+          // If the closing tag matches, move back up to the parent node.
+          if (tagStack.length && tagStack[tagStack.length - 1] === t.substr(2).replace(">", "")) {
+            tagStack.pop();
+            current = current.parentNode;
+          }
+          // Otherwise just ignore the end tag.
+          continue;
+        }
+        var ts = parseTimeStamp(t.substr(1, t.length - 2));
+        var node;
+        if (ts) {
+          // Timestamps are lead nodes as well.
+          node = window.document.createProcessingInstruction("timestamp", ts);
+          current.appendChild(node);
+          continue;
+        }
+        var m = t.match(/^<([^.\s/0-9>]+)(\.[^\s\\>]+)?([^>\\]+)?(\\?)>?$/);
+        // If we can't parse the tag, skip to the next tag.
+        if (!m) {
+          continue;
+        }
+        // Try to construct an element, and ignore the tag if we couldn't.
+        node = createElement(m[1], m[3]);
+        if (!node) {
+          continue;
+        }
+        // Determine if the tag should be added based on the context of where it
+        // is placed in the cuetext.
+        if (!shouldAdd(current, node)) {
+          continue;
+        }
+        // Set the class list (as a list of classes, separated by space).
+        if (m[2]) {
+          var classes = m[2].split('.');
+          classes.forEach(function (cl) {
+            var bgColor = /^bg_/.test(cl);
+            // slice out `bg_` if it's a background color
+            var colorName = bgColor ? cl.slice(3) : cl;
+            if (DEFAULT_COLOR_CLASS.hasOwnProperty(colorName)) {
+              var propName = bgColor ? 'background-color' : 'color';
+              var propValue = DEFAULT_COLOR_CLASS[colorName];
+              node.style[propName] = propValue;
+            }
+          });
+          node.className = classes.join(' ');
+        }
+        // Append the node to the current node, and enter the scope of the new
+        // node.
+        tagStack.push(m[1]);
+        current.appendChild(node);
+        current = node;
+        continue;
+      }
+
+      // Text nodes are leaf nodes.
+      current.appendChild(window.document.createTextNode(unescape(t)));
+    }
+    return rootDiv;
+  }
+
+  // This is a list of all the Unicode characters that have a strong
+  // right-to-left category. What this means is that these characters are
+  // written right-to-left for sure. It was generated by pulling all the strong
+  // right-to-left characters out of the Unicode data table. That table can
+  // found at: http://www.unicode.org/Public/UNIDATA/UnicodeData.txt
+  var strongRTLRanges = [[0x5be, 0x5be], [0x5c0, 0x5c0], [0x5c3, 0x5c3], [0x5c6, 0x5c6], [0x5d0, 0x5ea], [0x5f0, 0x5f4], [0x608, 0x608], [0x60b, 0x60b], [0x60d, 0x60d], [0x61b, 0x61b], [0x61e, 0x64a], [0x66d, 0x66f], [0x671, 0x6d5], [0x6e5, 0x6e6], [0x6ee, 0x6ef], [0x6fa, 0x70d], [0x70f, 0x710], [0x712, 0x72f], [0x74d, 0x7a5], [0x7b1, 0x7b1], [0x7c0, 0x7ea], [0x7f4, 0x7f5], [0x7fa, 0x7fa], [0x800, 0x815], [0x81a, 0x81a], [0x824, 0x824], [0x828, 0x828], [0x830, 0x83e], [0x840, 0x858], [0x85e, 0x85e], [0x8a0, 0x8a0], [0x8a2, 0x8ac], [0x200f, 0x200f], [0xfb1d, 0xfb1d], [0xfb1f, 0xfb28], [0xfb2a, 0xfb36], [0xfb38, 0xfb3c], [0xfb3e, 0xfb3e], [0xfb40, 0xfb41], [0xfb43, 0xfb44], [0xfb46, 0xfbc1], [0xfbd3, 0xfd3d], [0xfd50, 0xfd8f], [0xfd92, 0xfdc7], [0xfdf0, 0xfdfc], [0xfe70, 0xfe74], [0xfe76, 0xfefc], [0x10800, 0x10805], [0x10808, 0x10808], [0x1080a, 0x10835], [0x10837, 0x10838], [0x1083c, 0x1083c], [0x1083f, 0x10855], [0x10857, 0x1085f], [0x10900, 0x1091b], [0x10920, 0x10939], [0x1093f, 0x1093f], [0x10980, 0x109b7], [0x109be, 0x109bf], [0x10a00, 0x10a00], [0x10a10, 0x10a13], [0x10a15, 0x10a17], [0x10a19, 0x10a33], [0x10a40, 0x10a47], [0x10a50, 0x10a58], [0x10a60, 0x10a7f], [0x10b00, 0x10b35], [0x10b40, 0x10b55], [0x10b58, 0x10b72], [0x10b78, 0x10b7f], [0x10c00, 0x10c48], [0x1ee00, 0x1ee03], [0x1ee05, 0x1ee1f], [0x1ee21, 0x1ee22], [0x1ee24, 0x1ee24], [0x1ee27, 0x1ee27], [0x1ee29, 0x1ee32], [0x1ee34, 0x1ee37], [0x1ee39, 0x1ee39], [0x1ee3b, 0x1ee3b], [0x1ee42, 0x1ee42], [0x1ee47, 0x1ee47], [0x1ee49, 0x1ee49], [0x1ee4b, 0x1ee4b], [0x1ee4d, 0x1ee4f], [0x1ee51, 0x1ee52], [0x1ee54, 0x1ee54], [0x1ee57, 0x1ee57], [0x1ee59, 0x1ee59], [0x1ee5b, 0x1ee5b], [0x1ee5d, 0x1ee5d], [0x1ee5f, 0x1ee5f], [0x1ee61, 0x1ee62], [0x1ee64, 0x1ee64], [0x1ee67, 0x1ee6a], [0x1ee6c, 0x1ee72], [0x1ee74, 0x1ee77], [0x1ee79, 0x1ee7c], [0x1ee7e, 0x1ee7e], [0x1ee80, 0x1ee89], [0x1ee8b, 0x1ee9b], [0x1eea1, 0x1eea3], [0x1eea5, 0x1eea9], [0x1eeab, 0x1eebb], [0x10fffd, 0x10fffd]];
+  function isStrongRTLChar(charCode) {
+    for (var i = 0; i < strongRTLRanges.length; i++) {
+      var currentRange = strongRTLRanges[i];
+      if (charCode >= currentRange[0] && charCode <= currentRange[1]) {
+        return true;
+      }
+    }
+    return false;
+  }
+  function determineBidi(cueDiv) {
+    var nodeStack = [],
+      text = "",
+      charCode;
+    if (!cueDiv || !cueDiv.childNodes) {
+      return "ltr";
+    }
+    function pushNodes(nodeStack, node) {
+      for (var i = node.childNodes.length - 1; i >= 0; i--) {
+        nodeStack.push(node.childNodes[i]);
+      }
+    }
+    function nextTextNode(nodeStack) {
+      if (!nodeStack || !nodeStack.length) {
+        return null;
+      }
+      var node = nodeStack.pop(),
+        text = node.textContent || node.innerText;
+      if (text) {
+        // TODO: This should match all unicode type B characters (paragraph
+        // separator characters). See issue #115.
+        var m = text.match(/^.*(\n|\r)/);
+        if (m) {
+          nodeStack.length = 0;
+          return m[0];
+        }
+        return text;
+      }
+      if (node.tagName === "ruby") {
+        return nextTextNode(nodeStack);
+      }
+      if (node.childNodes) {
+        pushNodes(nodeStack, node);
+        return nextTextNode(nodeStack);
+      }
+    }
+    pushNodes(nodeStack, cueDiv);
+    while (text = nextTextNode(nodeStack)) {
+      for (var i = 0; i < text.length; i++) {
+        charCode = text.charCodeAt(i);
+        if (isStrongRTLChar(charCode)) {
+          return "rtl";
+        }
+      }
+    }
+    return "ltr";
+  }
+  function computeLinePos(cue) {
+    if (typeof cue.line === "number" && (cue.snapToLines || cue.line >= 0 && cue.line <= 100)) {
+      return cue.line;
+    }
+    if (!cue.track || !cue.track.textTrackList || !cue.track.textTrackList.mediaElement) {
+      return -1;
+    }
+    var track = cue.track,
+      trackList = track.textTrackList,
+      count = 0;
+    for (var i = 0; i < trackList.length && trackList[i] !== track; i++) {
+      if (trackList[i].mode === "showing") {
+        count++;
+      }
+    }
+    return ++count * -1;
+  }
+  function StyleBox() {}
+
+  // Apply styles to a div. If there is no div passed then it defaults to the
+  // div on 'this'.
+  StyleBox.prototype.applyStyles = function (styles, div) {
+    div = div || this.div;
+    for (var prop in styles) {
+      if (styles.hasOwnProperty(prop)) {
+        div.style[prop] = styles[prop];
+      }
+    }
+  };
+  StyleBox.prototype.formatStyle = function (val, unit) {
+    return val === 0 ? 0 : val + unit;
+  };
+
+  // Constructs the computed display state of the cue (a div). Places the div
+  // into the overlay which should be a block level element (usually a div).
+  function CueStyleBox(window, cue, styleOptions) {
+    StyleBox.call(this);
+    this.cue = cue;
+
+    // Parse our cue's text into a DOM tree rooted at 'cueDiv'. This div will
+    // have inline positioning and will function as the cue background box.
+    this.cueDiv = parseContent(window, cue.text);
+    var styles = {
+      color: "rgba(255, 255, 255, 1)",
+      backgroundColor: "rgba(0, 0, 0, 0.8)",
+      position: "relative",
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      display: "inline",
+      writingMode: cue.vertical === "" ? "horizontal-tb" : cue.vertical === "lr" ? "vertical-lr" : "vertical-rl",
+      unicodeBidi: "plaintext"
+    };
+    this.applyStyles(styles, this.cueDiv);
+
+    // Create an absolutely positioned div that will be used to position the cue
+    // div. Note, all WebVTT cue-setting alignments are equivalent to the CSS
+    // mirrors of them except middle instead of center on Safari.
+    this.div = window.document.createElement("div");
+    styles = {
+      direction: determineBidi(this.cueDiv),
+      writingMode: cue.vertical === "" ? "horizontal-tb" : cue.vertical === "lr" ? "vertical-lr" : "vertical-rl",
+      unicodeBidi: "plaintext",
+      textAlign: cue.align === "middle" ? "center" : cue.align,
+      font: styleOptions.font,
+      whiteSpace: "pre-line",
+      position: "absolute"
+    };
+    this.applyStyles(styles);
+    this.div.appendChild(this.cueDiv);
+
+    // Calculate the distance from the reference edge of the viewport to the text
+    // position of the cue box. The reference edge will be resolved later when
+    // the box orientation styles are applied.
+    var textPos = 0;
+    switch (cue.positionAlign) {
+      case "start":
+      case "line-left":
+        textPos = cue.position;
+        break;
+      case "center":
+        textPos = cue.position - cue.size / 2;
+        break;
+      case "end":
+      case "line-right":
+        textPos = cue.position - cue.size;
+        break;
+    }
+
+    // Horizontal box orientation; textPos is the distance from the left edge of the
+    // area to the left edge of the box and cue.size is the distance extending to
+    // the right from there.
+    if (cue.vertical === "") {
+      this.applyStyles({
+        left: this.formatStyle(textPos, "%"),
+        width: this.formatStyle(cue.size, "%")
+      });
+      // Vertical box orientation; textPos is the distance from the top edge of the
+      // area to the top edge of the box and cue.size is the height extending
+      // downwards from there.
+    } else {
+      this.applyStyles({
+        top: this.formatStyle(textPos, "%"),
+        height: this.formatStyle(cue.size, "%")
+      });
+    }
+    this.move = function (box) {
+      this.applyStyles({
+        top: this.formatStyle(box.top, "px"),
+        bottom: this.formatStyle(box.bottom, "px"),
+        left: this.formatStyle(box.left, "px"),
+        right: this.formatStyle(box.right, "px"),
+        height: this.formatStyle(box.height, "px"),
+        width: this.formatStyle(box.width, "px")
+      });
+    };
+  }
+  CueStyleBox.prototype = _objCreate(StyleBox.prototype);
+  CueStyleBox.prototype.constructor = CueStyleBox;
+
+  // Represents the co-ordinates of an Element in a way that we can easily
+  // compute things with such as if it overlaps or intersects with another Element.
+  // Can initialize it with either a StyleBox or another BoxPosition.
+  function BoxPosition(obj) {
+    // Either a BoxPosition was passed in and we need to copy it, or a StyleBox
+    // was passed in and we need to copy the results of 'getBoundingClientRect'
+    // as the object returned is readonly. All co-ordinate values are in reference
+    // to the viewport origin (top left).
+    var lh, height, width, top;
+    if (obj.div) {
+      height = obj.div.offsetHeight;
+      width = obj.div.offsetWidth;
+      top = obj.div.offsetTop;
+      var rects = (rects = obj.div.childNodes) && (rects = rects[0]) && rects.getClientRects && rects.getClientRects();
+      obj = obj.div.getBoundingClientRect();
+      // In certain cases the outter div will be slightly larger then the sum of
+      // the inner div's lines. This could be due to bold text, etc, on some platforms.
+      // In this case we should get the average line height and use that. This will
+      // result in the desired behaviour.
+      lh = rects ? Math.max(rects[0] && rects[0].height || 0, obj.height / rects.length) : 0;
+    }
+    this.left = obj.left;
+    this.right = obj.right;
+    this.top = obj.top || top;
+    this.height = obj.height || height;
+    this.bottom = obj.bottom || top + (obj.height || height);
+    this.width = obj.width || width;
+    this.lineHeight = lh !== undefined ? lh : obj.lineHeight;
+  }
+
+  // Move the box along a particular axis. Optionally pass in an amount to move
+  // the box. If no amount is passed then the default is the line height of the
+  // box.
+  BoxPosition.prototype.move = function (axis, toMove) {
+    toMove = toMove !== undefined ? toMove : this.lineHeight;
+    switch (axis) {
+      case "+x":
+        this.left += toMove;
+        this.right += toMove;
+        break;
+      case "-x":
+        this.left -= toMove;
+        this.right -= toMove;
+        break;
+      case "+y":
+        this.top += toMove;
+        this.bottom += toMove;
+        break;
+      case "-y":
+        this.top -= toMove;
+        this.bottom -= toMove;
+        break;
+    }
+  };
+
+  // Check if this box overlaps another box, b2.
+  BoxPosition.prototype.overlaps = function (b2) {
+    return this.left < b2.right && this.right > b2.left && this.top < b2.bottom && this.bottom > b2.top;
+  };
+
+  // Check if this box overlaps any other boxes in boxes.
+  BoxPosition.prototype.overlapsAny = function (boxes) {
+    for (var i = 0; i < boxes.length; i++) {
+      if (this.overlaps(boxes[i])) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  // Check if this box is within another box.
+  BoxPosition.prototype.within = function (container) {
+    return this.top >= container.top && this.bottom <= container.bottom && this.left >= container.left && this.right <= container.right;
+  };
+
+  // Check if this box is entirely within the container or it is overlapping
+  // on the edge opposite of the axis direction passed. For example, if "+x" is
+  // passed and the box is overlapping on the left edge of the container, then
+  // return true.
+  BoxPosition.prototype.overlapsOppositeAxis = function (container, axis) {
+    switch (axis) {
+      case "+x":
+        return this.left < container.left;
+      case "-x":
+        return this.right > container.right;
+      case "+y":
+        return this.top < container.top;
+      case "-y":
+        return this.bottom > container.bottom;
+    }
+  };
+
+  // Find the percentage of the area that this box is overlapping with another
+  // box.
+  BoxPosition.prototype.intersectPercentage = function (b2) {
+    var x = Math.max(0, Math.min(this.right, b2.right) - Math.max(this.left, b2.left)),
+      y = Math.max(0, Math.min(this.bottom, b2.bottom) - Math.max(this.top, b2.top)),
+      intersectArea = x * y;
+    return intersectArea / (this.height * this.width);
+  };
+
+  // Convert the positions from this box to CSS compatible positions using
+  // the reference container's positions. This has to be done because this
+  // box's positions are in reference to the viewport origin, whereas, CSS
+  // values are in referecne to their respective edges.
+  BoxPosition.prototype.toCSSCompatValues = function (reference) {
+    return {
+      top: this.top - reference.top,
+      bottom: reference.bottom - this.bottom,
+      left: this.left - reference.left,
+      right: reference.right - this.right,
+      height: this.height,
+      width: this.width
+    };
+  };
+
+  // Get an object that represents the box's position without anything extra.
+  // Can pass a StyleBox, HTMLElement, or another BoxPositon.
+  BoxPosition.getSimpleBoxPosition = function (obj) {
+    var height = obj.div ? obj.div.offsetHeight : obj.tagName ? obj.offsetHeight : 0;
+    var width = obj.div ? obj.div.offsetWidth : obj.tagName ? obj.offsetWidth : 0;
+    var top = obj.div ? obj.div.offsetTop : obj.tagName ? obj.offsetTop : 0;
+    obj = obj.div ? obj.div.getBoundingClientRect() : obj.tagName ? obj.getBoundingClientRect() : obj;
+    var ret = {
+      left: obj.left,
+      right: obj.right,
+      top: obj.top || top,
+      height: obj.height || height,
+      bottom: obj.bottom || top + (obj.height || height),
+      width: obj.width || width
+    };
+    return ret;
+  };
+
+  // Move a StyleBox to its specified, or next best, position. The containerBox
+  // is the box that contains the StyleBox, such as a div. boxPositions are
+  // a list of other boxes that the styleBox can't overlap with.
+  function moveBoxToLinePosition(window, styleBox, containerBox, boxPositions) {
+    // Find the best position for a cue box, b, on the video. The axis parameter
+    // is a list of axis, the order of which, it will move the box along. For example:
+    // Passing ["+x", "-x"] will move the box first along the x axis in the positive
+    // direction. If it doesn't find a good position for it there it will then move
+    // it along the x axis in the negative direction.
+    function findBestPosition(b, axis) {
+      var bestPosition,
+        specifiedPosition = new BoxPosition(b),
+        percentage = 1; // Highest possible so the first thing we get is better.
+
+      for (var i = 0; i < axis.length; i++) {
+        while (b.overlapsOppositeAxis(containerBox, axis[i]) || b.within(containerBox) && b.overlapsAny(boxPositions)) {
+          b.move(axis[i]);
+        }
+        // We found a spot where we aren't overlapping anything. This is our
+        // best position.
+        if (b.within(containerBox)) {
+          return b;
+        }
+        var p = b.intersectPercentage(containerBox);
+        // If we're outside the container box less then we were on our last try
+        // then remember this position as the best position.
+        if (percentage > p) {
+          bestPosition = new BoxPosition(b);
+          percentage = p;
+        }
+        // Reset the box position to the specified position.
+        b = new BoxPosition(specifiedPosition);
+      }
+      return bestPosition || specifiedPosition;
+    }
+    var boxPosition = new BoxPosition(styleBox),
+      cue = styleBox.cue,
+      linePos = computeLinePos(cue),
+      axis = [];
+
+    // If we have a line number to align the cue to.
+    if (cue.snapToLines) {
+      var size;
+      switch (cue.vertical) {
+        case "":
+          axis = ["+y", "-y"];
+          size = "height";
+          break;
+        case "rl":
+          axis = ["+x", "-x"];
+          size = "width";
+          break;
+        case "lr":
+          axis = ["-x", "+x"];
+          size = "width";
+          break;
+      }
+      var step = boxPosition.lineHeight,
+        position = step * Math.round(linePos),
+        maxPosition = containerBox[size] + step,
+        initialAxis = axis[0];
+
+      // If the specified intial position is greater then the max position then
+      // clamp the box to the amount of steps it would take for the box to
+      // reach the max position.
+      if (Math.abs(position) > maxPosition) {
+        position = position < 0 ? -1 : 1;
+        position *= Math.ceil(maxPosition / step) * step;
+      }
+
+      // If computed line position returns negative then line numbers are
+      // relative to the bottom of the video instead of the top. Therefore, we
+      // need to increase our initial position by the length or width of the
+      // video, depending on the writing direction, and reverse our axis directions.
+      if (linePos < 0) {
+        position += cue.vertical === "" ? containerBox.height : containerBox.width;
+        axis = axis.reverse();
+      }
+
+      // Move the box to the specified position. This may not be its best
+      // position.
+      boxPosition.move(initialAxis, position);
+    } else {
+      // If we have a percentage line value for the cue.
+      var calculatedPercentage = boxPosition.lineHeight / containerBox.height * 100;
+      switch (cue.lineAlign) {
+        case "center":
+          linePos -= calculatedPercentage / 2;
+          break;
+        case "end":
+          linePos -= calculatedPercentage;
+          break;
+      }
+
+      // Apply initial line position to the cue box.
+      switch (cue.vertical) {
+        case "":
+          styleBox.applyStyles({
+            top: styleBox.formatStyle(linePos, "%")
+          });
+          break;
+        case "rl":
+          styleBox.applyStyles({
+            left: styleBox.formatStyle(linePos, "%")
+          });
+          break;
+        case "lr":
+          styleBox.applyStyles({
+            right: styleBox.formatStyle(linePos, "%")
+          });
+          break;
+      }
+      axis = ["+y", "-x", "+x", "-y"];
+
+      // Get the box position again after we've applied the specified positioning
+      // to it.
+      boxPosition = new BoxPosition(styleBox);
+    }
+    var bestPosition = findBestPosition(boxPosition, axis);
+    styleBox.move(bestPosition.toCSSCompatValues(containerBox));
+  }
+  function WebVTT$1() {
+    // Nothing
+  }
+
+  // Helper to allow strings to be decoded instead of the default binary utf8 data.
+  WebVTT$1.StringDecoder = function () {
+    return {
+      decode: function (data) {
+        if (!data) {
+          return "";
+        }
+        if (typeof data !== "string") {
+          throw new Error("Error - expected string data.");
+        }
+        return decodeURIComponent(encodeURIComponent(data));
+      }
+    };
+  };
+  WebVTT$1.convertCueToDOMTree = function (window, cuetext) {
+    if (!window || !cuetext) {
+      return null;
+    }
+    return parseContent(window, cuetext);
+  };
+  var FONT_SIZE_PERCENT = 0.05;
+  var FONT_STYLE = "sans-serif";
+  var CUE_BACKGROUND_PADDING = "1.5%";
+
+  // Runs the processing model over the cues and regions passed to it.
+  // @param overlay A block level element (usually a div) that the computed cues
+  //                and regions will be placed into.
+  WebVTT$1.processCues = function (window, cues, overlay) {
+    if (!window || !cues || !overlay) {
+      return null;
+    }
+
+    // Remove all previous children.
+    while (overlay.firstChild) {
+      overlay.removeChild(overlay.firstChild);
+    }
+    var paddedOverlay = window.document.createElement("div");
+    paddedOverlay.style.position = "absolute";
+    paddedOverlay.style.left = "0";
+    paddedOverlay.style.right = "0";
+    paddedOverlay.style.top = "0";
+    paddedOverlay.style.bottom = "0";
+    paddedOverlay.style.margin = CUE_BACKGROUND_PADDING;
+    overlay.appendChild(paddedOverlay);
+
+    // Determine if we need to compute the display states of the cues. This could
+    // be the case if a cue's state has been changed since the last computation or
+    // if it has not been computed yet.
+    function shouldCompute(cues) {
+      for (var i = 0; i < cues.length; i++) {
+        if (cues[i].hasBeenReset || !cues[i].displayState) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    // We don't need to recompute the cues' display states. Just reuse them.
+    if (!shouldCompute(cues)) {
+      for (var i = 0; i < cues.length; i++) {
+        paddedOverlay.appendChild(cues[i].displayState);
+      }
+      return;
+    }
+    var boxPositions = [],
+      containerBox = BoxPosition.getSimpleBoxPosition(paddedOverlay),
+      fontSize = Math.round(containerBox.height * FONT_SIZE_PERCENT * 100) / 100;
+    var styleOptions = {
+      font: fontSize + "px " + FONT_STYLE
+    };
+    (function () {
+      var styleBox, cue;
+      for (var i = 0; i < cues.length; i++) {
+        cue = cues[i];
+
+        // Compute the intial position and styles of the cue div.
+        styleBox = new CueStyleBox(window, cue, styleOptions);
+        paddedOverlay.appendChild(styleBox.div);
+
+        // Move the cue div to it's correct line position.
+        moveBoxToLinePosition(window, styleBox, containerBox, boxPositions);
+
+        // Remember the computed div so that we don't have to recompute it later
+        // if we don't have too.
+        cue.displayState = styleBox.div;
+        boxPositions.push(BoxPosition.getSimpleBoxPosition(styleBox));
+      }
+    })();
+  };
+  WebVTT$1.Parser = function (window, vttjs, decoder) {
+    if (!decoder) {
+      decoder = vttjs;
+      vttjs = {};
+    }
+    if (!vttjs) {
+      vttjs = {};
+    }
+    this.window = window;
+    this.vttjs = vttjs;
+    this.state = "INITIAL";
+    this.buffer = "";
+    this.decoder = decoder || new TextDecoder("utf8");
+    this.regionList = [];
+  };
+  WebVTT$1.Parser.prototype = {
+    // If the error is a ParsingError then report it to the consumer if
+    // possible. If it's not a ParsingError then throw it like normal.
+    reportOrThrowError: function (e) {
+      if (e instanceof ParsingError) {
+        this.onparsingerror && this.onparsingerror(e);
+      } else {
+        throw e;
+      }
+    },
+    parse: function (data) {
+      var self = this;
+
+      // If there is no data then we won't decode it, but will just try to parse
+      // whatever is in buffer already. This may occur in circumstances, for
+      // example when flush() is called.
+      if (data) {
+        // Try to decode the data that we received.
+        self.buffer += self.decoder.decode(data, {
+          stream: true
+        });
+      }
+      function collectNextLine() {
+        var buffer = self.buffer;
+        var pos = 0;
+        while (pos < buffer.length && buffer[pos] !== '\r' && buffer[pos] !== '\n') {
+          ++pos;
+        }
+        var line = buffer.substr(0, pos);
+        // Advance the buffer early in case we fail below.
+        if (buffer[pos] === '\r') {
+          ++pos;
+        }
+        if (buffer[pos] === '\n') {
+          ++pos;
+        }
+        self.buffer = buffer.substr(pos);
+        return line;
+      }
+
+      // 3.4 WebVTT region and WebVTT region settings syntax
+      function parseRegion(input) {
+        var settings = new Settings();
+        parseOptions(input, function (k, v) {
+          switch (k) {
+            case "id":
+              settings.set(k, v);
+              break;
+            case "width":
+              settings.percent(k, v);
+              break;
+            case "lines":
+              settings.integer(k, v);
+              break;
+            case "regionanchor":
+            case "viewportanchor":
+              var xy = v.split(',');
+              if (xy.length !== 2) {
+                break;
+              }
+              // We have to make sure both x and y parse, so use a temporary
+              // settings object here.
+              var anchor = new Settings();
+              anchor.percent("x", xy[0]);
+              anchor.percent("y", xy[1]);
+              if (!anchor.has("x") || !anchor.has("y")) {
+                break;
+              }
+              settings.set(k + "X", anchor.get("x"));
+              settings.set(k + "Y", anchor.get("y"));
+              break;
+            case "scroll":
+              settings.alt(k, v, ["up"]);
+              break;
+          }
+        }, /=/, /\s/);
+
+        // Create the region, using default values for any values that were not
+        // specified.
+        if (settings.has("id")) {
+          var region = new (self.vttjs.VTTRegion || self.window.VTTRegion)();
+          region.width = settings.get("width", 100);
+          region.lines = settings.get("lines", 3);
+          region.regionAnchorX = settings.get("regionanchorX", 0);
+          region.regionAnchorY = settings.get("regionanchorY", 100);
+          region.viewportAnchorX = settings.get("viewportanchorX", 0);
+          region.viewportAnchorY = settings.get("viewportanchorY", 100);
+          region.scroll = settings.get("scroll", "");
+          // Register the region.
+          self.onregion && self.onregion(region);
+          // Remember the VTTRegion for later in case we parse any VTTCues that
+          // reference it.
+          self.regionList.push({
+            id: settings.get("id"),
+            region: region
+          });
+        }
+      }
+
+      // draft-pantos-http-live-streaming-20
+      // https://tools.ietf.org/html/draft-pantos-http-live-streaming-20#section-3.5
+      // 3.5 WebVTT
+      function parseTimestampMap(input) {
+        var settings = new Settings();
+        parseOptions(input, function (k, v) {
+          switch (k) {
+            case "MPEGT":
+              settings.integer(k + 'S', v);
+              break;
+            case "LOCA":
+              settings.set(k + 'L', parseTimeStamp(v));
+              break;
+          }
+        }, /[^\d]:/, /,/);
+        self.ontimestampmap && self.ontimestampmap({
+          "MPEGTS": settings.get("MPEGTS"),
+          "LOCAL": settings.get("LOCAL")
+        });
+      }
+
+      // 3.2 WebVTT metadata header syntax
+      function parseHeader(input) {
+        if (input.match(/X-TIMESTAMP-MAP/)) {
+          // This line contains HLS X-TIMESTAMP-MAP metadata
+          parseOptions(input, function (k, v) {
+            switch (k) {
+              case "X-TIMESTAMP-MAP":
+                parseTimestampMap(v);
+                break;
+            }
+          }, /=/);
+        } else {
+          parseOptions(input, function (k, v) {
+            switch (k) {
+              case "Region":
+                // 3.3 WebVTT region metadata header syntax
+                parseRegion(v);
+                break;
+            }
+          }, /:/);
+        }
+      }
+
+      // 5.1 WebVTT file parsing.
+      try {
+        var line;
+        if (self.state === "INITIAL") {
+          // We can't start parsing until we have the first line.
+          if (!/\r\n|\n/.test(self.buffer)) {
+            return this;
+          }
+          line = collectNextLine();
+          var m = line.match(/^WEBVTT([ \t].*)?$/);
+          if (!m || !m[0]) {
+            throw new ParsingError(ParsingError.Errors.BadSignature);
+          }
+          self.state = "HEADER";
+        }
+        var alreadyCollectedLine = false;
+        while (self.buffer) {
+          // We can't parse a line until we have the full line.
+          if (!/\r\n|\n/.test(self.buffer)) {
+            return this;
+          }
+          if (!alreadyCollectedLine) {
+            line = collectNextLine();
+          } else {
+            alreadyCollectedLine = false;
+          }
+          switch (self.state) {
+            case "HEADER":
+              // 13-18 - Allow a header (metadata) under the WEBVTT line.
+              if (/:/.test(line)) {
+                parseHeader(line);
+              } else if (!line) {
+                // An empty line terminates the header and starts the body (cues).
+                self.state = "ID";
+              }
+              continue;
+            case "NOTE":
+              // Ignore NOTE blocks.
+              if (!line) {
+                self.state = "ID";
+              }
+              continue;
+            case "ID":
+              // Check for the start of NOTE blocks.
+              if (/^NOTE($|[ \t])/.test(line)) {
+                self.state = "NOTE";
+                break;
+              }
+              // 19-29 - Allow any number of line terminators, then initialize new cue values.
+              if (!line) {
+                continue;
+              }
+              self.cue = new (self.vttjs.VTTCue || self.window.VTTCue)(0, 0, "");
+              // Safari still uses the old middle value and won't accept center
+              try {
+                self.cue.align = "center";
+              } catch (e) {
+                self.cue.align = "middle";
+              }
+              self.state = "CUE";
+              // 30-39 - Check if self line contains an optional identifier or timing data.
+              if (line.indexOf("-->") === -1) {
+                self.cue.id = line;
+                continue;
+              }
+            // Process line as start of a cue.
+            /*falls through*/
+            case "CUE":
+              // 40 - Collect cue timings and settings.
+              try {
+                parseCue(line, self.cue, self.regionList);
+              } catch (e) {
+                self.reportOrThrowError(e);
+                // In case of an error ignore rest of the cue.
+                self.cue = null;
+                self.state = "BADCUE";
+                continue;
+              }
+              self.state = "CUETEXT";
+              continue;
+            case "CUETEXT":
+              var hasSubstring = line.indexOf("-->") !== -1;
+              // 34 - If we have an empty line then report the cue.
+              // 35 - If we have the special substring '-->' then report the cue,
+              // but do not collect the line as we need to process the current
+              // one as a new cue.
+              if (!line || hasSubstring && (alreadyCollectedLine = true)) {
+                // We are done parsing self cue.
+                self.oncue && self.oncue(self.cue);
+                self.cue = null;
+                self.state = "ID";
+                continue;
+              }
+              if (self.cue.text) {
+                self.cue.text += "\n";
+              }
+              self.cue.text += line.replace(/\u2028/g, '\n').replace(/u2029/g, '\n');
+              continue;
+            case "BADCUE":
+              // BADCUE
+              // 54-62 - Collect and discard the remaining cue.
+              if (!line) {
+                self.state = "ID";
+              }
+              continue;
+          }
+        }
+      } catch (e) {
+        self.reportOrThrowError(e);
+
+        // If we are currently parsing a cue, report what we have.
+        if (self.state === "CUETEXT" && self.cue && self.oncue) {
+          self.oncue(self.cue);
+        }
+        self.cue = null;
+        // Enter BADWEBVTT state if header was not parsed correctly otherwise
+        // another exception occurred so enter BADCUE state.
+        self.state = self.state === "INITIAL" ? "BADWEBVTT" : "BADCUE";
+      }
+      return this;
+    },
+    flush: function () {
+      var self = this;
+      try {
+        // Finish decoding the stream.
+        self.buffer += self.decoder.decode();
+        // Synthesize the end of the current cue or region.
+        if (self.cue || self.state === "HEADER") {
+          self.buffer += "\n\n";
+          self.parse();
+        }
+        // If we've flushed, parsed, and we're still on the INITIAL state then
+        // that means we don't have enough of the stream to parse the first
+        // line.
+        if (self.state === "INITIAL") {
+          throw new ParsingError(ParsingError.Errors.BadSignature);
+        }
+      } catch (e) {
+        self.reportOrThrowError(e);
+      }
+      self.onflush && self.onflush();
+      return this;
+    }
+  };
+  var vtt = WebVTT$1;
+
+  /**
+   * Copyright 2013 vtt.js Contributors
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *   http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+
+  var autoKeyword = "auto";
+  var directionSetting = {
+    "": 1,
+    "lr": 1,
+    "rl": 1
+  };
+  var alignSetting = {
+    "start": 1,
+    "center": 1,
+    "end": 1,
+    "left": 1,
+    "right": 1,
+    "auto": 1,
+    "line-left": 1,
+    "line-right": 1
+  };
+  function findDirectionSetting(value) {
+    if (typeof value !== "string") {
+      return false;
+    }
+    var dir = directionSetting[value.toLowerCase()];
+    return dir ? value.toLowerCase() : false;
+  }
+  function findAlignSetting(value) {
+    if (typeof value !== "string") {
+      return false;
+    }
+    var align = alignSetting[value.toLowerCase()];
+    return align ? value.toLowerCase() : false;
+  }
+  function VTTCue(startTime, endTime, text) {
+    /**
+     * Shim implementation specific properties. These properties are not in
+     * the spec.
+     */
+
+    // Lets us know when the VTTCue's data has changed in such a way that we need
+    // to recompute its display state. This lets us compute its display state
+    // lazily.
+    this.hasBeenReset = false;
+
+    /**
+     * VTTCue and TextTrackCue properties
+     * http://dev.w3.org/html5/webvtt/#vttcue-interface
+     */
+
+    var _id = "";
+    var _pauseOnExit = false;
+    var _startTime = startTime;
+    var _endTime = endTime;
+    var _text = text;
+    var _region = null;
+    var _vertical = "";
+    var _snapToLines = true;
+    var _line = "auto";
+    var _lineAlign = "start";
+    var _position = "auto";
+    var _positionAlign = "auto";
+    var _size = 100;
+    var _align = "center";
+    Object.defineProperties(this, {
+      "id": {
+        enumerable: true,
+        get: function () {
+          return _id;
+        },
+        set: function (value) {
+          _id = "" + value;
+        }
+      },
+      "pauseOnExit": {
+        enumerable: true,
+        get: function () {
+          return _pauseOnExit;
+        },
+        set: function (value) {
+          _pauseOnExit = !!value;
+        }
+      },
+      "startTime": {
+        enumerable: true,
+        get: function () {
+          return _startTime;
+        },
+        set: function (value) {
+          if (typeof value !== "number") {
+            throw new TypeError("Start time must be set to a number.");
+          }
+          _startTime = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "endTime": {
+        enumerable: true,
+        get: function () {
+          return _endTime;
+        },
+        set: function (value) {
+          if (typeof value !== "number") {
+            throw new TypeError("End time must be set to a number.");
+          }
+          _endTime = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "text": {
+        enumerable: true,
+        get: function () {
+          return _text;
+        },
+        set: function (value) {
+          _text = "" + value;
+          this.hasBeenReset = true;
+        }
+      },
+      "region": {
+        enumerable: true,
+        get: function () {
+          return _region;
+        },
+        set: function (value) {
+          _region = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "vertical": {
+        enumerable: true,
+        get: function () {
+          return _vertical;
+        },
+        set: function (value) {
+          var setting = findDirectionSetting(value);
+          // Have to check for false because the setting an be an empty string.
+          if (setting === false) {
+            throw new SyntaxError("Vertical: an invalid or illegal direction string was specified.");
+          }
+          _vertical = setting;
+          this.hasBeenReset = true;
+        }
+      },
+      "snapToLines": {
+        enumerable: true,
+        get: function () {
+          return _snapToLines;
+        },
+        set: function (value) {
+          _snapToLines = !!value;
+          this.hasBeenReset = true;
+        }
+      },
+      "line": {
+        enumerable: true,
+        get: function () {
+          return _line;
+        },
+        set: function (value) {
+          if (typeof value !== "number" && value !== autoKeyword) {
+            throw new SyntaxError("Line: an invalid number or illegal string was specified.");
+          }
+          _line = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "lineAlign": {
+        enumerable: true,
+        get: function () {
+          return _lineAlign;
+        },
+        set: function (value) {
+          var setting = findAlignSetting(value);
+          if (!setting) {
+            console.warn("lineAlign: an invalid or illegal string was specified.");
+          } else {
+            _lineAlign = setting;
+            this.hasBeenReset = true;
+          }
+        }
+      },
+      "position": {
+        enumerable: true,
+        get: function () {
+          return _position;
+        },
+        set: function (value) {
+          if (value < 0 || value > 100) {
+            throw new Error("Position must be between 0 and 100.");
+          }
+          _position = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "positionAlign": {
+        enumerable: true,
+        get: function () {
+          return _positionAlign;
+        },
+        set: function (value) {
+          var setting = findAlignSetting(value);
+          if (!setting) {
+            console.warn("positionAlign: an invalid or illegal string was specified.");
+          } else {
+            _positionAlign = setting;
+            this.hasBeenReset = true;
+          }
+        }
+      },
+      "size": {
+        enumerable: true,
+        get: function () {
+          return _size;
+        },
+        set: function (value) {
+          if (value < 0 || value > 100) {
+            throw new Error("Size must be between 0 and 100.");
+          }
+          _size = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "align": {
+        enumerable: true,
+        get: function () {
+          return _align;
+        },
+        set: function (value) {
+          var setting = findAlignSetting(value);
+          if (!setting) {
+            throw new SyntaxError("align: an invalid or illegal alignment string was specified.");
+          }
+          _align = setting;
+          this.hasBeenReset = true;
+        }
+      }
+    });
+
+    /**
+     * Other <track> spec defined properties
+     */
+
+    // http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#text-track-cue-display-state
+    this.displayState = undefined;
+  }
+
+  /**
+   * VTTCue methods
+   */
+
+  VTTCue.prototype.getCueAsHTML = function () {
+    // Assume WebVTT.convertCueToDOMTree is on the global.
+    return WebVTT.convertCueToDOMTree(window, this.text);
+  };
+  var vttcue = VTTCue;
+
+  /**
+   * Copyright 2013 vtt.js Contributors
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *   http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+
+  var scrollSetting = {
+    "": true,
+    "up": true
+  };
+  function findScrollSetting(value) {
+    if (typeof value !== "string") {
+      return false;
+    }
+    var scroll = scrollSetting[value.toLowerCase()];
+    return scroll ? value.toLowerCase() : false;
+  }
+  function isValidPercentValue(value) {
+    return typeof value === "number" && value >= 0 && value <= 100;
+  }
+
+  // VTTRegion shim http://dev.w3.org/html5/webvtt/#vttregion-interface
+  function VTTRegion() {
+    var _width = 100;
+    var _lines = 3;
+    var _regionAnchorX = 0;
+    var _regionAnchorY = 100;
+    var _viewportAnchorX = 0;
+    var _viewportAnchorY = 100;
+    var _scroll = "";
+    Object.defineProperties(this, {
+      "width": {
+        enumerable: true,
+        get: function () {
+          return _width;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("Width must be between 0 and 100.");
+          }
+          _width = value;
+        }
+      },
+      "lines": {
+        enumerable: true,
+        get: function () {
+          return _lines;
+        },
+        set: function (value) {
+          if (typeof value !== "number") {
+            throw new TypeError("Lines must be set to a number.");
+          }
+          _lines = value;
+        }
+      },
+      "regionAnchorY": {
+        enumerable: true,
+        get: function () {
+          return _regionAnchorY;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("RegionAnchorX must be between 0 and 100.");
+          }
+          _regionAnchorY = value;
+        }
+      },
+      "regionAnchorX": {
+        enumerable: true,
+        get: function () {
+          return _regionAnchorX;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("RegionAnchorY must be between 0 and 100.");
+          }
+          _regionAnchorX = value;
+        }
+      },
+      "viewportAnchorY": {
+        enumerable: true,
+        get: function () {
+          return _viewportAnchorY;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("ViewportAnchorY must be between 0 and 100.");
+          }
+          _viewportAnchorY = value;
+        }
+      },
+      "viewportAnchorX": {
+        enumerable: true,
+        get: function () {
+          return _viewportAnchorX;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("ViewportAnchorX must be between 0 and 100.");
+          }
+          _viewportAnchorX = value;
+        }
+      },
+      "scroll": {
+        enumerable: true,
+        get: function () {
+          return _scroll;
+        },
+        set: function (value) {
+          var setting = findScrollSetting(value);
+          // Have to check for false as an empty string is a legal value.
+          if (setting === false) {
+            console.warn("Scroll: an invalid or illegal string was specified.");
+          } else {
+            _scroll = setting;
+          }
+        }
+      }
+    });
+  }
+  var vttregion = VTTRegion;
+
+  var browserIndex = createCommonjsModule(function (module) {
+    /**
+     * Copyright 2013 vtt.js Contributors
+     *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *   http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+
+    // Default exports for Node. Export the extended versions of VTTCue and
+    // VTTRegion in Node since we likely want the capability to convert back and
+    // forth between JSON. If we don't then it's not that big of a deal since we're
+    // off browser.
+
+    var vttjs = module.exports = {
+      WebVTT: vtt,
+      VTTCue: vttcue,
+      VTTRegion: vttregion
+    };
+    window_1.vttjs = vttjs;
+    window_1.WebVTT = vttjs.WebVTT;
+    var cueShim = vttjs.VTTCue;
+    var regionShim = vttjs.VTTRegion;
+    var nativeVTTCue = window_1.VTTCue;
+    var nativeVTTRegion = window_1.VTTRegion;
+    vttjs.shim = function () {
+      window_1.VTTCue = cueShim;
+      window_1.VTTRegion = regionShim;
+    };
+    vttjs.restore = function () {
+      window_1.VTTCue = nativeVTTCue;
+      window_1.VTTRegion = nativeVTTRegion;
+    };
+    if (!window_1.VTTCue) {
+      vttjs.shim();
+    }
+  });
+  browserIndex.WebVTT;
+  browserIndex.VTTCue;
+  browserIndex.VTTRegion;
+
+  /**
+   * @file tech.js
+   */
+
+  /**
+   * An Object containing a structure like: `{src: 'url', type: 'mimetype'}` or string
+   * that just contains the src url alone.
+   * * `var SourceObject = {src: 'http://ex.com/video.mp4', type: 'video/mp4'};`
+     * `var SourceString = 'http://example.com/some-video.mp4';`
+   *
+   * @typedef {Object|string} SourceObject
+   *
+   * @property {string} src
+   *           The url to the source
+   *
+   * @property {string} type
+   *           The mime type of the source
+   */
+
+  /**
+   * A function used by {@link Tech} to create a new {@link TextTrack}.
+   *
+   * @private
+   *
+   * @param {Tech} self
+   *        An instance of the Tech class.
+   *
+   * @param {string} kind
+   *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+   *
+   * @param {string} [label]
+   *        Label to identify the text track
+   *
+   * @param {string} [language]
+   *        Two letter language abbreviation
+   *
+   * @param {Object} [options={}]
+   *        An object with additional text track options
+   *
+   * @return {TextTrack}
+   *          The text track that was created.
+   */
+  function createTrackHelper(self, kind, label, language, options = {}) {
+    const tracks = self.textTracks();
+    options.kind = kind;
+    if (label) {
+      options.label = label;
+    }
+    if (language) {
+      options.language = language;
+    }
+    options.tech = self;
+    const track = new ALL.text.TrackClass(options);
+    tracks.addTrack(track);
+    return track;
+  }
+
+  /**
+   * This is the base class for media playback technology controllers, such as
+   * {@link HTML5}
+   *
+   * @extends Component
+   */
+  class Tech extends Component$1 {
+    /**
+    * Create an instance of this Tech.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    *
+    * @param {Function} [ready]
+    *        Callback function to call when the `HTML5` Tech is ready.
+    */
+    constructor(options = {}, ready = function () {}) {
+      // we don't want the tech to report user activity automatically.
+      // This is done manually in addControlsListeners
+      options.reportTouchActivity = false;
+      super(null, options, ready);
+      this.onDurationChange_ = e => this.onDurationChange(e);
+      this.trackProgress_ = e => this.trackProgress(e);
+      this.trackCurrentTime_ = e => this.trackCurrentTime(e);
+      this.stopTrackingCurrentTime_ = e => this.stopTrackingCurrentTime(e);
+      this.disposeSourceHandler_ = e => this.disposeSourceHandler(e);
+      this.queuedHanders_ = new Set();
+
+      // keep track of whether the current source has played at all to
+      // implement a very limited played()
+      this.hasStarted_ = false;
+      this.on('playing', function () {
+        this.hasStarted_ = true;
+      });
+      this.on('loadstart', function () {
+        this.hasStarted_ = false;
+      });
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        if (options && options[props.getterName]) {
+          this[props.privateName] = options[props.getterName];
+        }
+      });
+
+      // Manually track progress in cases where the browser/tech doesn't report it.
+      if (!this.featuresProgressEvents) {
+        this.manualProgressOn();
+      }
+
+      // Manually track timeupdates in cases where the browser/tech doesn't report it.
+      if (!this.featuresTimeupdateEvents) {
+        this.manualTimeUpdatesOn();
+      }
+      ['Text', 'Audio', 'Video'].forEach(track => {
+        if (options[`native${track}Tracks`] === false) {
+          this[`featuresNative${track}Tracks`] = false;
+        }
+      });
+      if (options.nativeCaptions === false || options.nativeTextTracks === false) {
+        this.featuresNativeTextTracks = false;
+      } else if (options.nativeCaptions === true || options.nativeTextTracks === true) {
+        this.featuresNativeTextTracks = true;
+      }
+      if (!this.featuresNativeTextTracks) {
+        this.emulateTextTracks();
+      }
+      this.preloadTextTracks = options.preloadTextTracks !== false;
+      this.autoRemoteTextTracks_ = new ALL.text.ListClass();
+      this.initTrackListeners();
+
+      // Turn on component tap events only if not using native controls
+      if (!options.nativeControlsForTouch) {
+        this.emitTapEvents();
+      }
+      if (this.constructor) {
+        this.name_ = this.constructor.name || 'Unknown Tech';
+      }
+    }
+
+    /**
+     * A special function to trigger source set in a way that will allow player
+     * to re-trigger if the player or tech are not ready yet.
+     *
+     * @fires Tech#sourceset
+     * @param {string} src The source string at the time of the source changing.
+     */
+    triggerSourceset(src) {
+      if (!this.isReady_) {
+        // on initial ready we have to trigger source set
+        // 1ms after ready so that player can watch for it.
+        this.one('ready', () => this.setTimeout(() => this.triggerSourceset(src), 1));
+      }
+
+      /**
+       * Fired when the source is set on the tech causing the media element
+       * to reload.
+       *
+       * @see {@link Player#event:sourceset}
+       * @event Tech#sourceset
+       * @type {Event}
+       */
+      this.trigger({
+        src,
+        type: 'sourceset'
+      });
+    }
+
+    /* Fallbacks for unsupported event types
+    ================================================================================ */
+
+    /**
+     * Polyfill the `progress` event for browsers that don't support it natively.
+     *
+     * @see {@link Tech#trackProgress}
+     */
+    manualProgressOn() {
+      this.on('durationchange', this.onDurationChange_);
+      this.manualProgress = true;
+
+      // Trigger progress watching when a source begins loading
+      this.one('ready', this.trackProgress_);
+    }
+
+    /**
+     * Turn off the polyfill for `progress` events that was created in
+     * {@link Tech#manualProgressOn}
+     */
+    manualProgressOff() {
+      this.manualProgress = false;
+      this.stopTrackingProgress();
+      this.off('durationchange', this.onDurationChange_);
+    }
+
+    /**
+     * This is used to trigger a `progress` event when the buffered percent changes. It
+     * sets an interval function that will be called every 500 milliseconds to check if the
+     * buffer end percent has changed.
+     *
+     * > This function is called by {@link Tech#manualProgressOn}
+     *
+     * @param {Event} event
+     *        The `ready` event that caused this to run.
+     *
+     * @listens Tech#ready
+     * @fires Tech#progress
+     */
+    trackProgress(event) {
+      this.stopTrackingProgress();
+      this.progressInterval = this.setInterval(bind_(this, function () {
+        // Don't trigger unless buffered amount is greater than last time
+
+        const numBufferedPercent = this.bufferedPercent();
+        if (this.bufferedPercent_ !== numBufferedPercent) {
+          /**
+           * See {@link Player#progress}
+           *
+           * @event Tech#progress
+           * @type {Event}
+           */
+          this.trigger('progress');
+        }
+        this.bufferedPercent_ = numBufferedPercent;
+        if (numBufferedPercent === 1) {
+          this.stopTrackingProgress();
+        }
+      }), 500);
+    }
+
+    /**
+     * Update our internal duration on a `durationchange` event by calling
+     * {@link Tech#duration}.
+     *
+     * @param {Event} event
+     *        The `durationchange` event that caused this to run.
+     *
+     * @listens Tech#durationchange
+     */
+    onDurationChange(event) {
+      this.duration_ = this.duration();
+    }
+
+    /**
+     * Get and create a `TimeRange` object for buffering.
+     *
+     * @return { import('../utils/time').TimeRange }
+     *         The time range object that was created.
+     */
+    buffered() {
+      return createTimeRanges$1(0, 0);
+    }
+
+    /**
+     * Get the percentage of the current video that is currently buffered.
+     *
+     * @return {number}
+     *         A number from 0 to 1 that represents the decimal percentage of the
+     *         video that is buffered.
+     *
+     */
+    bufferedPercent() {
+      return bufferedPercent(this.buffered(), this.duration_);
+    }
+
+    /**
+     * Turn off the polyfill for `progress` events that was created in
+     * {@link Tech#manualProgressOn}
+     * Stop manually tracking progress events by clearing the interval that was set in
+     * {@link Tech#trackProgress}.
+     */
+    stopTrackingProgress() {
+      this.clearInterval(this.progressInterval);
+    }
+
+    /**
+     * Polyfill the `timeupdate` event for browsers that don't support it.
+     *
+     * @see {@link Tech#trackCurrentTime}
+     */
+    manualTimeUpdatesOn() {
+      this.manualTimeUpdates = true;
+      this.on('play', this.trackCurrentTime_);
+      this.on('pause', this.stopTrackingCurrentTime_);
+    }
+
+    /**
+     * Turn off the polyfill for `timeupdate` events that was created in
+     * {@link Tech#manualTimeUpdatesOn}
+     */
+    manualTimeUpdatesOff() {
+      this.manualTimeUpdates = false;
+      this.stopTrackingCurrentTime();
+      this.off('play', this.trackCurrentTime_);
+      this.off('pause', this.stopTrackingCurrentTime_);
+    }
+
+    /**
+     * Sets up an interval function to track current time and trigger `timeupdate` every
+     * 250 milliseconds.
+     *
+     * @listens Tech#play
+     * @triggers Tech#timeupdate
+     */
+    trackCurrentTime() {
+      if (this.currentTimeInterval) {
+        this.stopTrackingCurrentTime();
+      }
+      this.currentTimeInterval = this.setInterval(function () {
+        /**
+         * Triggered at an interval of 250ms to indicated that time is passing in the video.
+         *
+         * @event Tech#timeupdate
+         * @type {Event}
+         */
+        this.trigger({
+          type: 'timeupdate',
+          target: this,
+          manuallyTriggered: true
+        });
+
+        // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
+      }, 250);
+    }
+
+    /**
+     * Stop the interval function created in {@link Tech#trackCurrentTime} so that the
+     * `timeupdate` event is no longer triggered.
+     *
+     * @listens {Tech#pause}
+     */
+    stopTrackingCurrentTime() {
+      this.clearInterval(this.currentTimeInterval);
+
+      // #1002 - if the video ends right before the next timeupdate would happen,
+      // the progress bar won't make it all the way to the end
+      this.trigger({
+        type: 'timeupdate',
+        target: this,
+        manuallyTriggered: true
+      });
+    }
+
+    /**
+     * Turn off all event polyfills, clear the `Tech`s {@link AudioTrackList},
+     * {@link VideoTrackList}, and {@link TextTrackList}, and dispose of this Tech.
+     *
+     * @fires Component#dispose
+     */
+    dispose() {
+      // clear out all tracks because we can't reuse them between techs
+      this.clearTracks(NORMAL.names);
+
+      // Turn off any manual progress or timeupdate tracking
+      if (this.manualProgress) {
+        this.manualProgressOff();
+      }
+      if (this.manualTimeUpdates) {
+        this.manualTimeUpdatesOff();
+      }
+      super.dispose();
+    }
+
+    /**
+     * Clear out a single `TrackList` or an array of `TrackLists` given their names.
+     *
+     * > Note: Techs without source handlers should call this between sources for `video`
+     *         & `audio` tracks. You don't want to use them between tracks!
+     *
+     * @param {string[]|string} types
+     *        TrackList names to clear, valid names are `video`, `audio`, and
+     *        `text`.
+     */
+    clearTracks(types) {
+      types = [].concat(types);
+      // clear out all tracks because we can't reuse them between techs
+      types.forEach(type => {
+        const list = this[`${type}Tracks`]() || [];
+        let i = list.length;
+        while (i--) {
+          const track = list[i];
+          if (type === 'text') {
+            this.removeRemoteTextTrack(track);
+          }
+          list.removeTrack(track);
+        }
+      });
+    }
+
+    /**
+     * Remove any TextTracks added via addRemoteTextTrack that are
+     * flagged for automatic garbage collection
+     */
+    cleanupAutoTextTracks() {
+      const list = this.autoRemoteTextTracks_ || [];
+      let i = list.length;
+      while (i--) {
+        const track = list[i];
+        this.removeRemoteTextTrack(track);
+      }
+    }
+
+    /**
+     * Reset the tech, which will removes all sources and reset the internal readyState.
+     *
+     * @abstract
+     */
+    reset() {}
+
+    /**
+     * Get the value of `crossOrigin` from the tech.
+     *
+     * @abstract
+     *
+     * @see {Html5#crossOrigin}
+     */
+    crossOrigin() {}
+
+    /**
+     * Set the value of `crossOrigin` on the tech.
+     *
+     * @abstract
+     *
+     * @param {string} crossOrigin the crossOrigin value
+     * @see {Html5#setCrossOrigin}
+     */
+    setCrossOrigin() {}
+
+    /**
+     * Get or set an error on the Tech.
+     *
+     * @param {MediaError} [err]
+     *        Error to set on the Tech
+     *
+     * @return {MediaError|null}
+     *         The current error object on the tech, or null if there isn't one.
+     */
+    error(err) {
+      if (err !== undefined) {
+        this.error_ = new MediaError(err);
+        this.trigger('error');
+      }
+      return this.error_;
+    }
+
+    /**
+     * Returns the `TimeRange`s that have been played through for the current source.
+     *
+     * > NOTE: This implementation is incomplete. It does not track the played `TimeRange`.
+     *         It only checks whether the source has played at all or not.
+     *
+     * @return { import('../utils/time').TimeRange }
+     *         - A single time range if this video has played
+     *         - An empty set of ranges if not.
+     */
+    played() {
+      if (this.hasStarted_) {
+        return createTimeRanges$1(0, 0);
+      }
+      return createTimeRanges$1();
+    }
+
+    /**
+     * Start playback
+     *
+     * @abstract
+     *
+     * @see {Html5#play}
+     */
+    play() {}
+
+    /**
+     * Set whether we are scrubbing or not
+     *
+     * @abstract
+     * @param {boolean} _isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     *
+     * @see {Html5#setScrubbing}
+     */
+    setScrubbing(_isScrubbing) {}
+
+    /**
+     * Get whether we are scrubbing or not
+     *
+     * @abstract
+     *
+     * @see {Html5#scrubbing}
+     */
+    scrubbing() {}
+
+    /**
+     * Causes a manual time update to occur if {@link Tech#manualTimeUpdatesOn} was
+     * previously called.
+     *
+     * @param {number} _seconds
+     *        Set the current time of the media to this.
+     * @fires Tech#timeupdate
+     */
+    setCurrentTime(_seconds) {
+      // improve the accuracy of manual timeupdates
+      if (this.manualTimeUpdates) {
+        /**
+         * A manual `timeupdate` event.
+         *
+         * @event Tech#timeupdate
+         * @type {Event}
+         */
+        this.trigger({
+          type: 'timeupdate',
+          target: this,
+          manuallyTriggered: true
+        });
+      }
+    }
+
+    /**
+     * Turn on listeners for {@link VideoTrackList}, {@link {AudioTrackList}, and
+     * {@link TextTrackList} events.
+     *
+     * This adds {@link EventTarget~EventListeners} for `addtrack`, and  `removetrack`.
+     *
+     * @fires Tech#audiotrackchange
+     * @fires Tech#videotrackchange
+     * @fires Tech#texttrackchange
+     */
+    initTrackListeners() {
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link AudioTrackList}
+        *
+        * @event Tech#audiotrackchange
+        * @type {Event}
+        */
+
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link VideoTrackList}
+        *
+        * @event Tech#videotrackchange
+        * @type {Event}
+        */
+
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link TextTrackList}
+        *
+        * @event Tech#texttrackchange
+        * @type {Event}
+        */
+      NORMAL.names.forEach(name => {
+        const props = NORMAL[name];
+        const trackListChanges = () => {
+          this.trigger(`${name}trackchange`);
+        };
+        const tracks = this[props.getterName]();
+        tracks.addEventListener('removetrack', trackListChanges);
+        tracks.addEventListener('addtrack', trackListChanges);
+        this.on('dispose', () => {
+          tracks.removeEventListener('removetrack', trackListChanges);
+          tracks.removeEventListener('addtrack', trackListChanges);
+        });
+      });
+    }
+
+    /**
+     * Emulate TextTracks using vtt.js if necessary
+     *
+     * @fires Tech#vttjsloaded
+     * @fires Tech#vttjserror
+     */
+    addWebVttScript_() {
+      if (window.WebVTT) {
+        return;
+      }
+
+      // Initially, Tech.el_ is a child of a dummy-div wait until the Component system
+      // signals that the Tech is ready at which point Tech.el_ is part of the DOM
+      // before inserting the WebVTT script
+      if (document.body.contains(this.el())) {
+        // load via require if available and vtt.js script location was not passed in
+        // as an option. novtt builds will turn the above require call into an empty object
+        // which will cause this if check to always fail.
+        if (!this.options_['vtt.js'] && isPlain(browserIndex) && Object.keys(browserIndex).length > 0) {
+          this.trigger('vttjsloaded');
+          return;
+        }
+
+        // load vtt.js via the script location option or the cdn of no location was
+        // passed in
+        const script = document.createElement('script');
+        script.src = this.options_['vtt.js'] || 'https://vjs.zencdn.net/vttjs/0.14.1/vtt.min.js';
+        script.onload = () => {
+          /**
+           * Fired when vtt.js is loaded.
+           *
+           * @event Tech#vttjsloaded
+           * @type {Event}
+           */
+          this.trigger('vttjsloaded');
+        };
+        script.onerror = () => {
+          /**
+           * Fired when vtt.js was not loaded due to an error
+           *
+           * @event Tech#vttjsloaded
+           * @type {Event}
+           */
+          this.trigger('vttjserror');
+        };
+        this.on('dispose', () => {
+          script.onload = null;
+          script.onerror = null;
+        });
+        // but have not loaded yet and we set it to true before the inject so that
+        // we don't overwrite the injected window.WebVTT if it loads right away
+        window.WebVTT = true;
+        this.el().parentNode.appendChild(script);
+      } else {
+        this.ready(this.addWebVttScript_);
+      }
+    }
+
+    /**
+     * Emulate texttracks
+     *
+     */
+    emulateTextTracks() {
+      const tracks = this.textTracks();
+      const remoteTracks = this.remoteTextTracks();
+      const handleAddTrack = e => tracks.addTrack(e.track);
+      const handleRemoveTrack = e => tracks.removeTrack(e.track);
+      remoteTracks.on('addtrack', handleAddTrack);
+      remoteTracks.on('removetrack', handleRemoveTrack);
+      this.addWebVttScript_();
+      const updateDisplay = () => this.trigger('texttrackchange');
+      const textTracksChanges = () => {
+        updateDisplay();
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+          track.removeEventListener('cuechange', updateDisplay);
+          if (track.mode === 'showing') {
+            track.addEventListener('cuechange', updateDisplay);
+          }
+        }
+      };
+      textTracksChanges();
+      tracks.addEventListener('change', textTracksChanges);
+      tracks.addEventListener('addtrack', textTracksChanges);
+      tracks.addEventListener('removetrack', textTracksChanges);
+      this.on('dispose', function () {
+        remoteTracks.off('addtrack', handleAddTrack);
+        remoteTracks.off('removetrack', handleRemoveTrack);
+        tracks.removeEventListener('change', textTracksChanges);
+        tracks.removeEventListener('addtrack', textTracksChanges);
+        tracks.removeEventListener('removetrack', textTracksChanges);
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+          track.removeEventListener('cuechange', updateDisplay);
+        }
+      });
+    }
+
+    /**
+     * Create and returns a remote {@link TextTrack} object.
+     *
+     * @param {string} kind
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+     *
+     * @param {string} [label]
+     *        Label to identify the text track
+     *
+     * @param {string} [language]
+     *        Two letter language abbreviation
+     *
+     * @return {TextTrack}
+     *         The TextTrack that gets created.
+     */
+    addTextTrack(kind, label, language) {
+      if (!kind) {
+        throw new Error('TextTrack kind is required but was not provided');
+      }
+      return createTrackHelper(this, kind, label, language);
+    }
+
+    /**
+     * Create an emulated TextTrack for use by addRemoteTextTrack
+     *
+     * This is intended to be overridden by classes that inherit from
+     * Tech in order to create native or custom TextTracks.
+     *
+     * @param {Object} options
+     *        The object should contain the options to initialize the TextTrack with.
+     *
+     * @param {string} [options.kind]
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+     *
+     * @param {string} [options.label].
+     *        Label to identify the text track
+     *
+     * @param {string} [options.language]
+     *        Two letter language abbreviation.
+     *
+     * @return {HTMLTrackElement}
+     *         The track element that gets created.
+     */
+    createRemoteTextTrack(options) {
+      const track = merge$2(options, {
+        tech: this
+      });
+      return new REMOTE.remoteTextEl.TrackClass(track);
+    }
+
+    /**
+     * Creates a remote text track object and returns an html track element.
+     *
+     * > Note: This can be an emulated {@link HTMLTrackElement} or a native one.
+     *
+     * @param {Object} options
+     *        See {@link Tech#createRemoteTextTrack} for more detailed properties.
+     *
+     * @param {boolean} [manualCleanup=false]
+     *        - When false: the TextTrack will be automatically removed from the video
+     *          element whenever the source changes
+     *        - When True: The TextTrack will have to be cleaned up manually
+     *
+     * @return {HTMLTrackElement}
+     *         An Html Track Element.
+     *
+     */
+    addRemoteTextTrack(options = {}, manualCleanup) {
+      const htmlTrackElement = this.createRemoteTextTrack(options);
+      if (typeof manualCleanup !== 'boolean') {
+        manualCleanup = false;
+      }
+
+      // store HTMLTrackElement and TextTrack to remote list
+      this.remoteTextTrackEls().addTrackElement_(htmlTrackElement);
+      this.remoteTextTracks().addTrack(htmlTrackElement.track);
+      if (manualCleanup === false) {
+        // create the TextTrackList if it doesn't exist
+        this.ready(() => this.autoRemoteTextTracks_.addTrack(htmlTrackElement.track));
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Remove a remote text track from the remote `TextTrackList`.
+     *
+     * @param {TextTrack} track
+     *        `TextTrack` to remove from the `TextTrackList`
+     */
+    removeRemoteTextTrack(track) {
+      const trackElement = this.remoteTextTrackEls().getTrackElementByTrack_(track);
+
+      // remove HTMLTrackElement and TextTrack from remote list
+      this.remoteTextTrackEls().removeTrackElement_(trackElement);
+      this.remoteTextTracks().removeTrack(track);
+      this.autoRemoteTextTracks_.removeTrack(track);
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object}
+     *         An object with supported media playback quality metrics
+     *
+     * @abstract
+     */
+    getVideoPlaybackQuality() {
+      return {};
+    }
+
+    /**
+     * Attempt to create a floating video window always on top of other windows
+     * so that users may continue consuming media while they interact with other
+     * content sites, or applications on their device.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @return {Promise|undefined}
+     *         A promise with a Picture-in-Picture window if the browser supports
+     *         Promises (or one was passed in as an option). It returns undefined
+     *         otherwise.
+     *
+     * @abstract
+     */
+    requestPictureInPicture() {
+      return Promise.reject();
+    }
+
+    /**
+     * A method to check for the value of the 'disablePictureInPicture' <video> property.
+     * Defaults to true, as it should be considered disabled if the tech does not support pip
+     *
+     * @abstract
+     */
+    disablePictureInPicture() {
+      return true;
+    }
+
+    /**
+     * A method to set or unset the 'disablePictureInPicture' <video> property.
+     *
+     * @abstract
+     */
+    setDisablePictureInPicture() {}
+
+    /**
+     * A fallback implementation of requestVideoFrameCallback using requestAnimationFrame
+     *
+     * @param {function} cb
+     * @return {number} request id
+     */
+    requestVideoFrameCallback(cb) {
+      const id = newGUID();
+      if (!this.isReady_ || this.paused()) {
+        this.queuedHanders_.add(id);
+        this.one('playing', () => {
+          if (this.queuedHanders_.has(id)) {
+            this.queuedHanders_.delete(id);
+            cb();
+          }
+        });
+      } else {
+        this.requestNamedAnimationFrame(id, cb);
+      }
+      return id;
+    }
+
+    /**
+     * A fallback implementation of cancelVideoFrameCallback
+     *
+     * @param {number} id id of callback to be cancelled
+     */
+    cancelVideoFrameCallback(id) {
+      if (this.queuedHanders_.has(id)) {
+        this.queuedHanders_.delete(id);
+      } else {
+        this.cancelNamedAnimationFrame(id);
+      }
+    }
+
+    /**
+     * A method to set a poster from a `Tech`.
+     *
+     * @abstract
+     */
+    setPoster() {}
+
+    /**
+     * A method to check for the presence of the 'playsinline' <video> attribute.
+     *
+     * @abstract
+     */
+    playsinline() {}
+
+    /**
+     * A method to set or unset the 'playsinline' <video> attribute.
+     *
+     * @abstract
+     */
+    setPlaysinline() {}
+
+    /**
+     * Attempt to force override of native audio tracks.
+     *
+     * @param {boolean} override - If set to true native audio will be overridden,
+     * otherwise native audio will potentially be used.
+     *
+     * @abstract
+     */
+    overrideNativeAudioTracks(override) {}
+
+    /**
+     * Attempt to force override of native video tracks.
+     *
+     * @param {boolean} override - If set to true native video will be overridden,
+     * otherwise native video will potentially be used.
+     *
+     * @abstract
+     */
+    overrideNativeVideoTracks(override) {}
+
+    /**
+     * Check if the tech can support the given mime-type.
+     *
+     * The base tech does not support any type, but source handlers might
+     * overwrite this.
+     *
+     * @param  {string} _type
+     *         The mimetype to check for support
+     *
+     * @return {string}
+     *         'probably', 'maybe', or empty string
+     *
+     * @see [Spec]{@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType}
+     *
+     * @abstract
+     */
+    canPlayType(_type) {
+      return '';
+    }
+
+    /**
+     * Check if the type is supported by this tech.
+     *
+     * The base tech does not support any type, but source handlers might
+     * overwrite this.
+     *
+     * @param {string} _type
+     *        The media type to check
+     * @return {string} Returns the native video element's response
+     */
+    static canPlayType(_type) {
+      return '';
+    }
+
+    /**
+     * Check if the tech can support the given source
+     *
+     * @param {Object} srcObj
+     *        The source object
+     * @param {Object} options
+     *        The options passed to the tech
+     * @return {string} 'probably', 'maybe', or '' (empty string)
+     */
+    static canPlaySource(srcObj, options) {
+      return Tech.canPlayType(srcObj.type);
+    }
+
+    /*
+     * Return whether the argument is a Tech or not.
+     * Can be passed either a Class like `Html5` or a instance like `player.tech_`
+     *
+     * @param {Object} component
+     *        The item to check
+     *
+     * @return {boolean}
+     *         Whether it is a tech or not
+     *         - True if it is a tech
+     *         - False if it is not
+     */
+    static isTech(component) {
+      return component.prototype instanceof Tech || component instanceof Tech || component === Tech;
+    }
+
+    /**
+     * Registers a `Tech` into a shared list for videojs.
+     *
+     * @param {string} name
+     *        Name of the `Tech` to register.
+     *
+     * @param {Object} tech
+     *        The `Tech` class to register.
+     */
+    static registerTech(name, tech) {
+      if (!Tech.techs_) {
+        Tech.techs_ = {};
+      }
+      if (!Tech.isTech(tech)) {
+        throw new Error(`Tech ${name} must be a Tech`);
+      }
+      if (!Tech.canPlayType) {
+        throw new Error('Techs must have a static canPlayType method on them');
+      }
+      if (!Tech.canPlaySource) {
+        throw new Error('Techs must have a static canPlaySource method on them');
+      }
+      name = toTitleCase$1(name);
+      Tech.techs_[name] = tech;
+      Tech.techs_[toLowerCase(name)] = tech;
+      if (name !== 'Tech') {
+        // camel case the techName for use in techOrder
+        Tech.defaultTechOrder_.push(name);
+      }
+      return tech;
+    }
+
+    /**
+     * Get a `Tech` from the shared list by name.
+     *
+     * @param {string} name
+     *        `camelCase` or `TitleCase` name of the Tech to get
+     *
+     * @return {Tech|undefined}
+     *         The `Tech` or undefined if there was no tech with the name requested.
+     */
+    static getTech(name) {
+      if (!name) {
+        return;
+      }
+      if (Tech.techs_ && Tech.techs_[name]) {
+        return Tech.techs_[name];
+      }
+      name = toTitleCase$1(name);
+      if (window && window.videojs && window.videojs[name]) {
+        log$1.warn(`The ${name} tech was added to the videojs object when it should be registered using videojs.registerTech(name, tech)`);
+        return window.videojs[name];
+      }
+    }
+  }
+
+  /**
+   * Get the {@link VideoTrackList}
+   *
+   * @returns {VideoTrackList}
+   * @method Tech.prototype.videoTracks
+   */
+
+  /**
+   * Get the {@link AudioTrackList}
+   *
+   * @returns {AudioTrackList}
+   * @method Tech.prototype.audioTracks
+   */
+
+  /**
+   * Get the {@link TextTrackList}
+   *
+   * @returns {TextTrackList}
+   * @method Tech.prototype.textTracks
+   */
+
+  /**
+   * Get the remote element {@link TextTrackList}
+   *
+   * @returns {TextTrackList}
+   * @method Tech.prototype.remoteTextTracks
+   */
+
+  /**
+   * Get the remote element {@link HtmlTrackElementList}
+   *
+   * @returns {HtmlTrackElementList}
+   * @method Tech.prototype.remoteTextTrackEls
+   */
+
+  ALL.names.forEach(function (name) {
+    const props = ALL[name];
+    Tech.prototype[props.getterName] = function () {
+      this[props.privateName] = this[props.privateName] || new props.ListClass();
+      return this[props.privateName];
+    };
+  });
+
+  /**
+   * List of associated text tracks
+   *
+   * @type {TextTrackList}
+   * @private
+   * @property Tech#textTracks_
+   */
+
+  /**
+   * List of associated audio tracks.
+   *
+   * @type {AudioTrackList}
+   * @private
+   * @property Tech#audioTracks_
+   */
+
+  /**
+   * List of associated video tracks.
+   *
+   * @type {VideoTrackList}
+   * @private
+   * @property Tech#videoTracks_
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports volume control.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresVolumeControl = true;
+
+  /**
+   * Boolean indicating whether the `Tech` supports muting volume.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresMuteControl = true;
+
+  /**
+   * Boolean indicating whether the `Tech` supports fullscreen resize control.
+   * Resizing plugins using request fullscreen reloads the plugin
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresFullscreenResize = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports changing the speed at which the video
+   * plays. Examples:
+   *   - Set player to play 2x (twice) as fast
+   *   - Set player to play 0.5x (half) as fast
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresPlaybackRate = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `progress` event.
+   * This will be used to determine if {@link Tech#manualProgressOn} should be called.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresProgressEvents = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `sourceset` event.
+   *
+   * A tech should set this to `true` and then use {@link Tech#triggerSourceset}
+   * to trigger a {@link Tech#event:sourceset} at the earliest time after getting
+   * a new source.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresSourceset = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `timeupdate` event.
+   * This will be used to determine if {@link Tech#manualTimeUpdates} should be called.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresTimeupdateEvents = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the native `TextTrack`s.
+   * This will help us integrate with native `TextTrack`s if the browser supports them.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresNativeTextTracks = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports `requestVideoFrameCallback`.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresVideoFrameCallback = false;
+
+  /**
+   * A functional mixin for techs that want to use the Source Handler pattern.
+   * Source handlers are scripts for handling specific formats.
+   * The source handler pattern is used for adaptive formats (HLS, DASH) that
+   * manually load video data and feed it into a Source Buffer (Media Source Extensions)
+   * Example: `Tech.withSourceHandlers.call(MyTech);`
+   *
+   * @param {Tech} _Tech
+   *        The tech to add source handler functions to.
+   *
+   * @mixes Tech~SourceHandlerAdditions
+   */
+  Tech.withSourceHandlers = function (_Tech) {
+    /**
+     * Register a source handler
+     *
+     * @param {Function} handler
+     *        The source handler class
+     *
+     * @param {number} [index]
+     *        Register it at the following index
+     */
+    _Tech.registerSourceHandler = function (handler, index) {
+      let handlers = _Tech.sourceHandlers;
+      if (!handlers) {
+        handlers = _Tech.sourceHandlers = [];
+      }
+      if (index === undefined) {
+        // add to the end of the list
+        index = handlers.length;
+      }
+      handlers.splice(index, 0, handler);
+    };
+
+    /**
+     * Check if the tech can support the given type. Also checks the
+     * Techs sourceHandlers.
+     *
+     * @param {string} type
+     *         The mimetype to check.
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    _Tech.canPlayType = function (type) {
+      const handlers = _Tech.sourceHandlers || [];
+      let can;
+      for (let i = 0; i < handlers.length; i++) {
+        can = handlers[i].canPlayType(type);
+        if (can) {
+          return can;
+        }
+      }
+      return '';
+    };
+
+    /**
+     * Returns the first source handler that supports the source.
+     *
+     * TODO: Answer question: should 'probably' be prioritized over 'maybe'
+     *
+     * @param {SourceObject} source
+     *        The source object
+     *
+     * @param {Object} options
+     *        The options passed to the tech
+     *
+     * @return {SourceHandler|null}
+     *          The first source handler that supports the source or null if
+     *          no SourceHandler supports the source
+     */
+    _Tech.selectSourceHandler = function (source, options) {
+      const handlers = _Tech.sourceHandlers || [];
+      let can;
+      for (let i = 0; i < handlers.length; i++) {
+        can = handlers[i].canHandleSource(source, options);
+        if (can) {
+          return handlers[i];
+        }
+      }
+      return null;
+    };
+
+    /**
+     * Check if the tech can support the given source.
+     *
+     * @param {SourceObject} srcObj
+     *        The source object
+     *
+     * @param {Object} options
+     *        The options passed to the tech
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    _Tech.canPlaySource = function (srcObj, options) {
+      const sh = _Tech.selectSourceHandler(srcObj, options);
+      if (sh) {
+        return sh.canHandleSource(srcObj, options);
+      }
+      return '';
+    };
+
+    /**
+     * When using a source handler, prefer its implementation of
+     * any function normally provided by the tech.
+     */
+    const deferrable = ['seekable', 'seeking', 'duration'];
+
+    /**
+     * A wrapper around {@link Tech#seekable} that will call a `SourceHandler`s seekable
+     * function if it exists, with a fallback to the Techs seekable function.
+     *
+     * @method _Tech.seekable
+     */
+
+    /**
+     * A wrapper around {@link Tech#duration} that will call a `SourceHandler`s duration
+     * function if it exists, otherwise it will fallback to the techs duration function.
+     *
+     * @method _Tech.duration
+     */
+
+    deferrable.forEach(function (fnName) {
+      const originalFn = this[fnName];
+      if (typeof originalFn !== 'function') {
+        return;
+      }
+      this[fnName] = function () {
+        if (this.sourceHandler_ && this.sourceHandler_[fnName]) {
+          return this.sourceHandler_[fnName].apply(this.sourceHandler_, arguments);
+        }
+        return originalFn.apply(this, arguments);
+      };
+    }, _Tech.prototype);
+
+    /**
+     * Create a function for setting the source using a source object
+     * and source handlers.
+     * Should never be called unless a source handler was found.
+     *
+     * @param {SourceObject} source
+     *        A source object with src and type keys
+     */
+    _Tech.prototype.setSource = function (source) {
+      let sh = _Tech.selectSourceHandler(source, this.options_);
+      if (!sh) {
+        // Fall back to a native source handler when unsupported sources are
+        // deliberately set
+        if (_Tech.nativeSourceHandler) {
+          sh = _Tech.nativeSourceHandler;
+        } else {
+          log$1.error('No source handler found for the current source.');
+        }
+      }
+
+      // Dispose any existing source handler
+      this.disposeSourceHandler();
+      this.off('dispose', this.disposeSourceHandler_);
+      if (sh !== _Tech.nativeSourceHandler) {
+        this.currentSource_ = source;
+      }
+      this.sourceHandler_ = sh.handleSource(source, this, this.options_);
+      this.one('dispose', this.disposeSourceHandler_);
+    };
+
+    /**
+     * Clean up any existing SourceHandlers and listeners when the Tech is disposed.
+     *
+     * @listens Tech#dispose
+     */
+    _Tech.prototype.disposeSourceHandler = function () {
+      // if we have a source and get another one
+      // then we are loading something new
+      // than clear all of our current tracks
+      if (this.currentSource_) {
+        this.clearTracks(['audio', 'video']);
+        this.currentSource_ = null;
+      }
+
+      // always clean up auto-text tracks
+      this.cleanupAutoTextTracks();
+      if (this.sourceHandler_) {
+        if (this.sourceHandler_.dispose) {
+          this.sourceHandler_.dispose();
+        }
+        this.sourceHandler_ = null;
+      }
+    };
+  };
+
+  // The base Tech class needs to be registered as a Component. It is the only
+  // Tech that can be registered as a Component.
+  Component$1.registerComponent('Tech', Tech);
+  Tech.registerTech('Tech', Tech);
+
+  /**
+   * A list of techs that should be added to techOrder on Players
+   *
+   * @private
+   */
+  Tech.defaultTechOrder_ = [];
+
+  /**
+   * @file middleware.js
+   * @module middleware
+   */
+  const middlewares = {};
+  const middlewareInstances = {};
+  const TERMINATOR = {};
+
+  /**
+   * A middleware object is a plain JavaScript object that has methods that
+   * match the {@link Tech} methods found in the lists of allowed
+   * {@link module:middleware.allowedGetters|getters},
+   * {@link module:middleware.allowedSetters|setters}, and
+   * {@link module:middleware.allowedMediators|mediators}.
+   *
+   * @typedef {Object} MiddlewareObject
+   */
+
+  /**
+   * A middleware factory function that should return a
+   * {@link module:middleware~MiddlewareObject|MiddlewareObject}.
+   *
+   * This factory will be called for each player when needed, with the player
+   * passed in as an argument.
+   *
+   * @callback MiddlewareFactory
+   * @param { import('../player').default } player
+   *        A Video.js player.
+   */
+
+  /**
+   * Define a middleware that the player should use by way of a factory function
+   * that returns a middleware object.
+   *
+   * @param  {string} type
+   *         The MIME type to match or `"*"` for all MIME types.
+   *
+   * @param  {MiddlewareFactory} middleware
+   *         A middleware factory function that will be executed for
+   *         matching types.
+   */
+  function use(type, middleware) {
+    middlewares[type] = middlewares[type] || [];
+    middlewares[type].push(middleware);
+  }
+
+  /**
+   * Asynchronously sets a source using middleware by recursing through any
+   * matching middlewares and calling `setSource` on each, passing along the
+   * previous returned value each time.
+   *
+   * @param  { import('../player').default } player
+   *         A {@link Player} instance.
+   *
+   * @param  {Tech~SourceObject} src
+   *         A source object.
+   *
+   * @param  {Function}
+   *         The next middleware to run.
+   */
+  function setSource(player, src, next) {
+    player.setTimeout(() => setSourceHelper(src, middlewares[src.type], next, player), 1);
+  }
+
+  /**
+   * When the tech is set, passes the tech to each middleware's `setTech` method.
+   *
+   * @param {Object[]} middleware
+   *        An array of middleware instances.
+   *
+   * @param { import('../tech/tech').default } tech
+   *        A Video.js tech.
+   */
+  function setTech(middleware, tech) {
+    middleware.forEach(mw => mw.setTech && mw.setTech(tech));
+  }
+
+  /**
+   * Calls a getter on the tech first, through each middleware
+   * from right to left to the player.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @return {*}
+   *         The final value from the tech after middleware has intercepted it.
+   */
+  function get(middleware, tech, method) {
+    return middleware.reduceRight(middlewareIterator(method), tech[method]());
+  }
+
+  /**
+   * Takes the argument given to the player and calls the setter method on each
+   * middleware from left to right to the tech.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @param  {*} arg
+   *         The value to set on the tech.
+   *
+   * @return {*}
+   *         The return value of the `method` of the `tech`.
+   */
+  function set(middleware, tech, method, arg) {
+    return tech[method](middleware.reduce(middlewareIterator(method), arg));
+  }
+
+  /**
+   * Takes the argument given to the player and calls the `call` version of the
+   * method on each middleware from left to right.
+   *
+   * Then, call the passed in method on the tech and return the result unchanged
+   * back to the player, through middleware, this time from right to left.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @param  {*} arg
+   *         The value to set on the tech.
+   *
+   * @return {*}
+   *         The return value of the `method` of the `tech`, regardless of the
+   *         return values of middlewares.
+   */
+  function mediate(middleware, tech, method, arg = null) {
+    const callMethod = 'call' + toTitleCase$1(method);
+    const middlewareValue = middleware.reduce(middlewareIterator(callMethod), arg);
+    const terminated = middlewareValue === TERMINATOR;
+    // deprecated. The `null` return value should instead return TERMINATOR to
+    // prevent confusion if a techs method actually returns null.
+    const returnValue = terminated ? null : tech[method](middlewareValue);
+    executeRight(middleware, method, returnValue, terminated);
+    return returnValue;
+  }
+
+  /**
+   * Enumeration of allowed getters where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedGetters = {
+    buffered: 1,
+    currentTime: 1,
+    duration: 1,
+    muted: 1,
+    played: 1,
+    paused: 1,
+    seekable: 1,
+    volume: 1,
+    ended: 1
+  };
+
+  /**
+   * Enumeration of allowed setters where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedSetters = {
+    setCurrentTime: 1,
+    setMuted: 1,
+    setVolume: 1
+  };
+
+  /**
+   * Enumeration of allowed mediators where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedMediators = {
+    play: 1,
+    pause: 1
+  };
+  function middlewareIterator(method) {
+    return (value, mw) => {
+      // if the previous middleware terminated, pass along the termination
+      if (value === TERMINATOR) {
+        return TERMINATOR;
+      }
+      if (mw[method]) {
+        return mw[method](value);
+      }
+      return value;
+    };
+  }
+  function executeRight(mws, method, value, terminated) {
+    for (let i = mws.length - 1; i >= 0; i--) {
+      const mw = mws[i];
+      if (mw[method]) {
+        mw[method](terminated, value);
+      }
+    }
+  }
+
+  /**
+   * Clear the middleware cache for a player.
+   *
+   * @param  { import('../player').default } player
+   *         A {@link Player} instance.
+   */
+  function clearCacheForPlayer(player) {
+    middlewareInstances[player.id()] = null;
+  }
+
+  /**
+   * {
+   *  [playerId]: [[mwFactory, mwInstance], ...]
+   * }
+   *
+   * @private
+   */
+  function getOrCreateFactory(player, mwFactory) {
+    const mws = middlewareInstances[player.id()];
+    let mw = null;
+    if (mws === undefined || mws === null) {
+      mw = mwFactory(player);
+      middlewareInstances[player.id()] = [[mwFactory, mw]];
+      return mw;
+    }
+    for (let i = 0; i < mws.length; i++) {
+      const [mwf, mwi] = mws[i];
+      if (mwf !== mwFactory) {
+        continue;
+      }
+      mw = mwi;
+    }
+    if (mw === null) {
+      mw = mwFactory(player);
+      mws.push([mwFactory, mw]);
+    }
+    return mw;
+  }
+  function setSourceHelper(src = {}, middleware = [], next, player, acc = [], lastRun = false) {
+    const [mwFactory, ...mwrest] = middleware;
+
+    // if mwFactory is a string, then we're at a fork in the road
+    if (typeof mwFactory === 'string') {
+      setSourceHelper(src, middlewares[mwFactory], next, player, acc, lastRun);
+
+      // if we have an mwFactory, call it with the player to get the mw,
+      // then call the mw's setSource method
+    } else if (mwFactory) {
+      const mw = getOrCreateFactory(player, mwFactory);
+
+      // if setSource isn't present, implicitly select this middleware
+      if (!mw.setSource) {
+        acc.push(mw);
+        return setSourceHelper(src, mwrest, next, player, acc, lastRun);
+      }
+      mw.setSource(Object.assign({}, src), function (err, _src) {
+        // something happened, try the next middleware on the current level
+        // make sure to use the old src
+        if (err) {
+          return setSourceHelper(src, mwrest, next, player, acc, lastRun);
+        }
+
+        // we've succeeded, now we need to go deeper
+        acc.push(mw);
+
+        // if it's the same type, continue down the current chain
+        // otherwise, we want to go down the new chain
+        setSourceHelper(_src, src.type === _src.type ? mwrest : middlewares[_src.type], next, player, acc, lastRun);
+      });
+    } else if (mwrest.length) {
+      setSourceHelper(src, mwrest, next, player, acc, lastRun);
+    } else if (lastRun) {
+      next(src, acc);
+    } else {
+      setSourceHelper(src, middlewares['*'], next, player, acc, true);
+    }
+  }
+
+  /**
+   * Mimetypes
+   *
+   * @see https://www.iana.org/assignments/media-types/media-types.xhtml
+   * @typedef Mimetypes~Kind
+   * @enum
+   */
+  const MimetypesKind = {
+    opus: 'video/ogg',
+    ogv: 'video/ogg',
+    mp4: 'video/mp4',
+    mov: 'video/mp4',
+    m4v: 'video/mp4',
+    mkv: 'video/x-matroska',
+    m4a: 'audio/mp4',
+    mp3: 'audio/mpeg',
+    aac: 'audio/aac',
+    caf: 'audio/x-caf',
+    flac: 'audio/flac',
+    oga: 'audio/ogg',
+    wav: 'audio/wav',
+    m3u8: 'application/x-mpegURL',
+    mpd: 'application/dash+xml',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    gif: 'image/gif',
+    png: 'image/png',
+    svg: 'image/svg+xml',
+    webp: 'image/webp'
+  };
+
+  /**
+   * Get the mimetype of a given src url if possible
+   *
+   * @param {string} src
+   *        The url to the src
+   *
+   * @return {string}
+   *         return the mimetype if it was known or empty string otherwise
+   */
+  const getMimetype = function (src = '') {
+    const ext = getFileExtension(src);
+    const mimetype = MimetypesKind[ext.toLowerCase()];
+    return mimetype || '';
+  };
+
+  /**
+   * Find the mime type of a given source string if possible. Uses the player
+   * source cache.
+   *
+   * @param { import('../player').default } player
+   *        The player object
+   *
+   * @param {string} src
+   *        The source string
+   *
+   * @return {string}
+   *         The type that was found
+   */
+  const findMimetype = (player, src) => {
+    if (!src) {
+      return '';
+    }
+
+    // 1. check for the type in the `source` cache
+    if (player.cache_.source.src === src && player.cache_.source.type) {
+      return player.cache_.source.type;
+    }
+
+    // 2. see if we have this source in our `currentSources` cache
+    const matchingSources = player.cache_.sources.filter(s => s.src === src);
+    if (matchingSources.length) {
+      return matchingSources[0].type;
+    }
+
+    // 3. look for the src url in source elements and use the type there
+    const sources = player.$$('source');
+    for (let i = 0; i < sources.length; i++) {
+      const s = sources[i];
+      if (s.type && s.src && s.src === src) {
+        return s.type;
+      }
+    }
+
+    // 4. finally fallback to our list of mime types based on src url extension
+    return getMimetype(src);
+  };
+
+  /**
+   * @module filter-source
+   */
+
+  /**
+   * Filter out single bad source objects or multiple source objects in an
+   * array. Also flattens nested source object arrays into a 1 dimensional
+   * array of source objects.
+   *
+   * @param {Tech~SourceObject|Tech~SourceObject[]} src
+   *        The src object to filter
+   *
+   * @return {Tech~SourceObject[]}
+   *         An array of sourceobjects containing only valid sources
+   *
+   * @private
+   */
+  const filterSource = function (src) {
+    // traverse array
+    if (Array.isArray(src)) {
+      let newsrc = [];
+      src.forEach(function (srcobj) {
+        srcobj = filterSource(srcobj);
+        if (Array.isArray(srcobj)) {
+          newsrc = newsrc.concat(srcobj);
+        } else if (isObject$1(srcobj)) {
+          newsrc.push(srcobj);
+        }
+      });
+      src = newsrc;
+    } else if (typeof src === 'string' && src.trim()) {
+      // convert string into object
+      src = [fixSource({
+        src
+      })];
+    } else if (isObject$1(src) && typeof src.src === 'string' && src.src && src.src.trim()) {
+      // src is already valid
+      src = [fixSource(src)];
+    } else {
+      // invalid source, turn it into an empty array
+      src = [];
+    }
+    return src;
+  };
+
+  /**
+   * Checks src mimetype, adding it when possible
+   *
+   * @param {Tech~SourceObject} src
+   *        The src object to check
+   * @return {Tech~SourceObject}
+   *        src Object with known type
+   */
+  function fixSource(src) {
+    if (!src.type) {
+      const mimetype = getMimetype(src.src);
+      if (mimetype) {
+        src.type = mimetype;
+      }
+    }
+    return src;
+  }
+
+  var icons = "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-play\">\n      <path d=\"M16 10v28l22-14z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-pause\">\n      <path d=\"M12 38h8V10h-8v28zm16-28v28h8V10h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-audio\">\n      <path d=\"M24 2C14.06 2 6 10.06 6 20v14c0 3.31 2.69 6 6 6h6V24h-8v-4c0-7.73 6.27-14 14-14s14 6.27 14 14v4h-8v16h6c3.31 0 6-2.69 6-6V20c0-9.94-8.06-18-18-18z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-captions\">\n      <path d=\"M38 8H10c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM22 22h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2zm14 0h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-subtitles\">\n      <path d=\"M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-fullscreen-enter\">\n      <path d=\"M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-fullscreen-exit\">\n      <path d=\"M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-play-circle\">\n      <path d=\"M20 33l12-9-12-9v18zm4-29C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-mute\">\n      <path d=\"M33 24c0-3.53-2.04-6.58-5-8.05v4.42l4.91 4.91c.06-.42.09-.85.09-1.28zm5 0c0 1.88-.41 3.65-1.08 5.28l3.03 3.03C41.25 29.82 42 27 42 24c0-8.56-5.99-15.72-14-17.54v4.13c5.78 1.72 10 7.07 10 13.41zM8.55 6L6 8.55 15.45 18H6v12h8l10 10V26.55l8.51 8.51c-1.34 1.03-2.85 1.86-4.51 2.36v4.13a17.94 17.94 0 0 0 7.37-3.62L39.45 42 42 39.45l-18-18L8.55 6zM24 8l-4.18 4.18L24 16.36V8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-low\">\n      <path d=\"M14 18v12h8l10 10V8L22 18h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-medium\">\n      <path d=\"M37 24c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zm-27-6v12h8l10 10V8L18 18h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-high\">\n      <path d=\"M6 18v12h8l10 10V8L14 18H6zm27 6c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zM28 6.46v4.13c5.78 1.72 10 7.07 10 13.41s-4.22 11.69-10 13.41v4.13c8.01-1.82 14-8.97 14-17.54S36.01 8.28 28 6.46z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-spinner\">\n      <path d=\"M18.8 21l9.53-16.51C26.94 4.18 25.49 4 24 4c-4.8 0-9.19 1.69-12.64 4.51l7.33 12.69.11-.2zm24.28-3c-1.84-5.85-6.3-10.52-11.99-12.68L23.77 18h19.31zm.52 2H28.62l.58 1 9.53 16.5C41.99 33.94 44 29.21 44 24c0-1.37-.14-2.71-.4-4zm-26.53 4l-7.8-13.5C6.01 14.06 4 18.79 4 24c0 1.37.14 2.71.4 4h14.98l-2.31-4zM4.92 30c1.84 5.85 6.3 10.52 11.99 12.68L24.23 30H4.92zm22.54 0l-7.8 13.51c1.4.31 2.85.49 4.34.49 4.8 0 9.19-1.69 12.64-4.51L29.31 26.8 27.46 30z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 24 24\" id=\"vjs-icon-hd\">\n      <path d=\"M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-chapters\">\n      <path d=\"M6 26h4v-4H6v4zm0 8h4v-4H6v4zm0-16h4v-4H6v4zm8 8h28v-4H14v4zm0 8h28v-4H14v4zm0-20v4h28v-4H14z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 40 40\" id=\"vjs-icon-downloading\">\n      <path d=\"M18.208 36.875q-3.208-.292-5.979-1.729-2.771-1.438-4.812-3.729-2.042-2.292-3.188-5.229-1.146-2.938-1.146-6.23 0-6.583 4.334-11.416 4.333-4.834 10.833-5.5v3.166q-5.167.75-8.583 4.646Q6.25 14.75 6.25 19.958q0 5.209 3.396 9.104 3.396 3.896 8.562 4.646zM20 28.417L11.542 20l2.083-2.083 4.917 4.916v-11.25h2.916v11.25l4.875-4.916L28.417 20zm1.792 8.458v-3.167q1.833-.25 3.541-.958 1.709-.708 3.167-1.875l2.333 2.292q-1.958 1.583-4.25 2.541-2.291.959-4.791 1.167zm6.791-27.792q-1.541-1.125-3.25-1.854-1.708-.729-3.541-1.021V3.042q2.5.25 4.77 1.208 2.271.958 4.271 2.5zm4.584 21.584l-2.25-2.25q1.166-1.5 1.854-3.209.687-1.708.937-3.541h3.209q-.292 2.5-1.229 4.791-.938 2.292-2.521 4.209zm.541-12.417q-.291-1.833-.958-3.562-.667-1.73-1.833-3.188l2.375-2.208q1.541 1.916 2.458 4.208.917 2.292 1.167 4.75z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download\">\n      <path d=\"M10.8 40.55q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h26.35v-7.7h3.4v7.7q0 1.4-1 2.4t-2.4 1zM24 32.1L13.9 22.05l2.45-2.45 5.95 5.95V7.15h3.4v18.4l5.95-5.95 2.45 2.45z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download-done\">\n      <path d=\"M9.8 40.5v-3.45h28.4v3.45zm9.2-9.05L7.4 19.85l2.45-2.35L19 26.65l19.2-19.2 2.4 2.4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download-off\">\n      <path d=\"M4.9 4.75L43.25 43.1 41 45.3l-4.75-4.75q-.05.05-.075.025-.025-.025-.075-.025H10.8q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h22.05l-7-7-1.85 1.8L13.9 21.9l1.85-1.85L2.7 7zm26.75 14.7l2.45 2.45-3.75 3.8-2.45-2.5zM25.7 7.15V21.1l-3.4-3.45V7.15z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-share\">\n      <path d=\"M36 32.17c-1.52 0-2.89.59-3.93 1.54L17.82 25.4c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31A5.83 5.83 0 1 0 36 32.17z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cog\">\n      <path d=\"M38.86 25.95c.08-.64.14-1.29.14-1.95s-.06-1.31-.14-1.95l4.23-3.31c.38-.3.49-.84.24-1.28l-4-6.93c-.25-.43-.77-.61-1.22-.43l-4.98 2.01c-1.03-.79-2.16-1.46-3.38-1.97L29 4.84c-.09-.47-.5-.84-1-.84h-8c-.5 0-.91.37-.99.84l-.75 5.3a14.8 14.8 0 0 0-3.38 1.97L9.9 10.1a1 1 0 0 0-1.22.43l-4 6.93c-.25.43-.14.97.24 1.28l4.22 3.31C9.06 22.69 9 23.34 9 24s.06 1.31.14 1.95l-4.22 3.31c-.38.3-.49.84-.24 1.28l4 6.93c.25.43.77.61 1.22.43l4.98-2.01c1.03.79 2.16 1.46 3.38 1.97l.75 5.3c.08.47.49.84.99.84h8c.5 0 .91-.37.99-.84l.75-5.3a14.8 14.8 0 0 0 3.38-1.97l4.98 2.01a1 1 0 0 0 1.22-.43l4-6.93c.25-.43.14-.97-.24-1.28l-4.22-3.31zM24 31c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-square\">\n      <path d=\"M36 8H12c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H12V12h24v24z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle\">\n      <circle cx=\"24\" cy=\"24\" r=\"20\"></circle>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle-outline\">\n      <path d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle-inner-circle\">\n      <path d=\"M24 4C12.97 4 4 12.97 4 24s8.97 20 20 20 20-8.97 20-20S35.03 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm6-16c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6 6 2.69 6 6z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cancel\">\n      <path d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-replay\">\n      <path d=\"M24 10V2L14 12l10 10v-8c6.63 0 12 5.37 12 12s-5.37 12-12 12-12-5.37-12-12H8c0 8.84 7.16 16 16 16s16-7.16 16-16-7.16-16-16-16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-repeat\">\n      <path d=\"M14 14h20v6l8-8-8-8v6H10v12h4v-8zm20 20H14v-6l-8 8 8 8v-6h24V26h-4v8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-5\">\n      <path d=\"M17.689 98l-8.697 8.696 8.697 8.697 2.486-2.485-4.32-4.319h1.302c4.93 0 9.071 1.722 12.424 5.165 3.352 3.443 5.029 7.638 5.029 12.584h3.55c0-2.958-.553-5.73-1.658-8.313-1.104-2.583-2.622-4.841-4.555-6.774-1.932-1.932-4.19-3.45-6.773-4.555-2.584-1.104-5.355-1.657-8.313-1.657H15.5l4.615-4.615zm-8.08 21.659v13.861h11.357v5.008H9.609V143h12.7c.834 0 1.55-.298 2.146-.894.596-.597.895-1.31.895-2.145v-7.781c0-.835-.299-1.55-.895-2.147a2.929 2.929 0 0 0-2.147-.894h-8.227v-5.096H25.35v-4.384z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-10\">\n      <path d=\"M42.315 125.63c0-4.997-1.694-9.235-5.08-12.713-3.388-3.479-7.571-5.218-12.552-5.218h-1.315l4.363 4.363-2.51 2.51-8.787-8.786L25.221 97l2.45 2.45-4.662 4.663h1.375c2.988 0 5.788.557 8.397 1.673 2.61 1.116 4.892 2.65 6.844 4.602 1.953 1.953 3.487 4.234 4.602 6.844 1.116 2.61 1.674 5.41 1.674 8.398zM8.183 142v-19.657H3.176V117.8h9.643V142zm13.63 0c-1.156 0-2.127-.393-2.912-1.178-.778-.778-1.168-1.746-1.168-2.902v-16.04c0-1.156.393-2.127 1.178-2.912.779-.779 1.746-1.168 2.902-1.168h7.696c1.156 0 2.126.392 2.911 1.177.779.78 1.168 1.747 1.168 2.903v16.04c0 1.156-.392 2.127-1.177 2.912-.779.779-1.746 1.168-2.902 1.168zm.556-4.636h6.583v-15.02H22.37z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-30\">\n      <path d=\"M26.047 97l-8.733 8.732 8.733 8.733 2.496-2.494-4.336-4.338h1.307c4.95 0 9.108 1.73 12.474 5.187 3.367 3.458 5.051 7.668 5.051 12.635h3.565c0-2.97-.556-5.751-1.665-8.346-1.109-2.594-2.633-4.862-4.574-6.802-1.94-1.941-4.208-3.466-6.803-4.575-2.594-1.109-5.375-1.664-8.345-1.664H23.85l4.634-4.634zM2.555 117.531v4.688h10.297v5.25H5.873v4.687h6.979v5.156H2.555V142H13.36c1.061 0 1.95-.395 2.668-1.186.718-.79 1.076-1.772 1.076-2.94v-16.218c0-1.168-.358-2.149-1.076-2.94-.717-.79-1.607-1.185-2.668-1.185zm22.482.14c-1.149 0-2.11.39-2.885 1.165-.78.78-1.172 1.744-1.172 2.893v15.943c0 1.149.388 2.11 1.163 2.885.78.78 1.745 1.172 2.894 1.172h7.649c1.148 0 2.11-.388 2.884-1.163.78-.78 1.17-1.745 1.17-2.894v-15.943c0-1.15-.386-2.111-1.16-2.885-.78-.78-1.746-1.172-2.894-1.172zm.553 4.518h6.545v14.93H25.59z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-5\">\n      <path d=\"M29.508 97l-2.431 2.43 4.625 4.625h-1.364c-2.965 0-5.742.554-8.332 1.66-2.589 1.107-4.851 2.629-6.788 4.566-1.937 1.937-3.458 4.2-4.565 6.788-1.107 2.59-1.66 5.367-1.66 8.331h3.557c0-4.957 1.68-9.16 5.04-12.611 3.36-3.45 7.51-5.177 12.451-5.177h1.304l-4.326 4.33 2.49 2.49 8.715-8.716zm-9.783 21.61v13.89h11.382v5.018H19.725V142h12.727a2.93 2.93 0 0 0 2.15-.896 2.93 2.93 0 0 0 .896-2.15v-7.798c0-.837-.299-1.554-.896-2.152a2.93 2.93 0 0 0-2.15-.896h-8.245V123h11.29v-4.392z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-10\">\n      <path d=\"M23.119 97l-2.386 2.383 4.538 4.538h-1.339c-2.908 0-5.633.543-8.173 1.63-2.54 1.085-4.76 2.577-6.66 4.478-1.9 1.9-3.392 4.12-4.478 6.66-1.085 2.54-1.629 5.264-1.629 8.172h3.49c0-4.863 1.648-8.986 4.944-12.372 3.297-3.385 7.368-5.078 12.216-5.078h1.279l-4.245 4.247 2.443 2.442 8.55-8.55zm-9.52 21.45v4.42h4.871V142h4.513v-23.55zm18.136 0c-1.125 0-2.066.377-2.824 1.135-.764.764-1.148 1.709-1.148 2.834v15.612c0 1.124.38 2.066 1.139 2.824.764.764 1.708 1.145 2.833 1.145h7.489c1.125 0 2.066-.378 2.824-1.136.764-.764 1.145-1.709 1.145-2.833v-15.612c0-1.125-.378-2.067-1.136-2.825-.764-.764-1.708-1.145-2.833-1.145zm.54 4.42h6.408v14.617h-6.407z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-30\">\n      <path d=\"M25.549 97l-2.437 2.434 4.634 4.635H26.38c-2.97 0-5.753.555-8.347 1.664-2.594 1.109-4.861 2.633-6.802 4.574-1.94 1.94-3.465 4.207-4.574 6.802-1.109 2.594-1.664 5.377-1.664 8.347h3.565c0-4.967 1.683-9.178 5.05-12.636 3.366-3.458 7.525-5.187 12.475-5.187h1.307l-4.335 4.338 2.495 2.494 8.732-8.732zm-11.553 20.53v4.689h10.297v5.249h-6.978v4.688h6.978v5.156H13.996V142h10.808c1.06 0 1.948-.395 2.666-1.186.718-.79 1.077-1.771 1.077-2.94v-16.217c0-1.169-.36-2.15-1.077-2.94-.718-.79-1.605-1.186-2.666-1.186zm21.174.168c-1.149 0-2.11.389-2.884 1.163-.78.78-1.172 1.745-1.172 2.894v15.942c0 1.15.388 2.11 1.162 2.885.78.78 1.745 1.17 2.894 1.17h7.649c1.149 0 2.11-.386 2.885-1.16.78-.78 1.17-1.746 1.17-2.895v-15.942c0-1.15-.387-2.11-1.161-2.885-.78-.78-1.745-1.172-2.894-1.172zm.552 4.516h6.542v14.931h-6.542z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 512 512\" id=\"vjs-icon-audio-description\">\n      <g fill-rule=\"evenodd\"><path d=\"M227.29 381.351V162.993c50.38-1.017 89.108-3.028 117.631 17.126 27.374 19.342 48.734 56.965 44.89 105.325-4.067 51.155-41.335 94.139-89.776 98.475-24.085 2.155-71.972 0-71.972 0s-.84-1.352-.773-2.568m48.755-54.804c31.43 1.26 53.208-16.633 56.495-45.386 4.403-38.51-21.188-63.552-58.041-60.796v103.612c-.036 1.466.575 2.22 1.546 2.57\"></path><path d=\"M383.78 381.328c13.336 3.71 17.387-11.06 23.215-21.408 12.722-22.571 22.294-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.226 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894\"></path><path d=\"M425.154 381.328c13.336 3.71 17.384-11.061 23.215-21.408 12.721-22.571 22.291-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.511c-.586 3.874 2.226 7.315 3.866 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894\"></path><path d=\"M466.26 381.328c13.337 3.71 17.385-11.061 23.216-21.408 12.722-22.571 22.292-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.225 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894M4.477 383.005H72.58l18.573-28.484 64.169-.135s.065 19.413.065 28.62h48.756V160.307h-58.816c-5.653 9.537-140.85 222.697-140.85 222.697zm152.667-145.282v71.158l-40.453-.27 40.453-70.888z\"></path></g>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-next-item\">\n      <path d=\"M12 36l17-12-17-12v24zm20-24v24h4V12h-4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-previous-item\">\n      <path d=\"M12 12h4v24h-4zm7 12l17 12V12z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-shuffle\">\n      <path d=\"M21.17 18.34L10.83 8 8 10.83l10.34 10.34 2.83-2.83zM29 8l4.09 4.09L8 37.17 10.83 40l25.09-25.09L40 19V8H29zm.66 18.83l-2.83 2.83 6.26 6.26L29 40h11V29l-4.09 4.09-6.25-6.26z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cast\">\n      <path d=\"M42 6H6c-2.21 0-4 1.79-4 4v6h4v-6h36v28H28v4h14c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4zM2 36v6h6c0-3.31-2.69-6-6-6zm0-8v4c5.52 0 10 4.48 10 10h4c0-7.73-6.27-14-14-14zm0-8v4c9.94 0 18 8.06 18 18h4c0-12.15-9.85-22-22-22z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-picture-in-picture-enter\">\n      <path d=\"M38 22H22v11.99h16V22zm8 16V9.96C46 7.76 44.2 6 42 6H6C3.8 6 2 7.76 2 9.96V38c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4zm-4 .04H6V9.94h36v28.1z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 22 18\" id=\"vjs-icon-picture-in-picture-exit\">\n      <path d=\"M18 4H4v10h14V4zm4 12V1.98C22 .88 21.1 0 20 0H2C.9 0 0 .88 0 1.98V16c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H2V1.97h18v14.05z\"></path>\n      <path fill=\"none\" d=\"M-1-3h24v24H-1z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-facebook\">\n      <path d=\"M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759H734V905H479V609h255V391q0-186 104-288.5T1115 0q147 0 228 12z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-linkedin\">\n      <path d=\"M477 625v991H147V625h330zm21-306q1 73-50.5 122T312 490h-2q-82 0-132-49t-50-122q0-74 51.5-122.5T314 148t133 48.5T498 319zm1166 729v568h-329v-530q0-105-40.5-164.5T1168 862q-63 0-105.5 34.5T999 982q-11 30-11 81v553H659q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5T1285 602q171 0 275 113.5t104 332.5z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-twitter\">\n      <path d=\"M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5T1369.5 1125 1185 1335.5t-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5T285 1033q33 5 61 5 43 0 85-11-112-23-185.5-111.5T172 710v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5T884 653q-8-38-8-74 0-134 94.5-228.5T1199 256q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-tumblr\">\n      <path d=\"M1328 1329l80 237q-23 35-111 66t-177 32q-104 2-190.5-26T787 1564t-95-106-55.5-120-16.5-118V676H452V461q72-26 129-69.5t91-90 58-102 34-99T779 12q1-5 4.5-8.5T791 0h244v424h333v252h-334v518q0 30 6.5 56t22.5 52.5 49.5 41.5 81.5 14q78-2 134-29z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-pinterest\">\n      <path d=\"M1664 896q0 209-103 385.5T1281.5 1561 896 1664q-111 0-218-32 59-93 78-164 9-34 54-211 20 39 73 67.5t114 28.5q121 0 216-68.5t147-188.5 52-270q0-114-59.5-214T1180 449t-255-63q-105 0-196 29t-154.5 77-109 110.5-67 129.5T377 866q0 104 40 183t117 111q30 12 38-20 2-7 8-31t8-30q6-23-11-43-51-61-51-151 0-151 104.5-259.5T904 517q151 0 235.5 82t84.5 213q0 170-68.5 289T980 1220q-61 0-98-43.5T859 1072q8-35 26.5-93.5t30-103T927 800q0-50-27-83t-77-33q-62 0-105 57t-43 142q0 73 25 122l-99 418q-17 70-13 177-206-91-333-281T128 896q0-209 103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z\"></path>\n    </symbol>\n  </defs>\n</svg>";
+
+  /**
+   * @file loader.js
+   */
+
+  /**
+   * The `MediaLoader` is the `Component` that decides which playback technology to load
+   * when a player is initialized.
+   *
+   * @extends Component
+   */
+  class MediaLoader extends Component$1 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should attach to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function that is run when this component is ready.
+     */
+    constructor(player, options, ready) {
+      // MediaLoader has no element
+      const options_ = merge$2({
+        createEl: false
+      }, options);
+      super(player, options_, ready);
+
+      // If there are no sources when the player is initialized,
+      // load the first supported playback technology.
+
+      if (!options.playerOptions.sources || options.playerOptions.sources.length === 0) {
+        for (let i = 0, j = options.playerOptions.techOrder; i < j.length; i++) {
+          const techName = toTitleCase$1(j[i]);
+          let tech = Tech.getTech(techName);
+
+          // Support old behavior of techs being registered as components.
+          // Remove once that deprecated behavior is removed.
+          if (!techName) {
+            tech = Component$1.getComponent(techName);
+          }
+
+          // Check if the browser supports this technology
+          if (tech && tech.isSupported()) {
+            player.loadTech_(techName);
+            break;
+          }
+        }
+      } else {
+        // Loop through playback technologies (e.g. HTML5) and check for support.
+        // Then load the best source.
+        // A few assumptions here:
+        //   All playback technologies respect preload false.
+        player.src(options.playerOptions.sources);
+      }
+    }
+  }
+  Component$1.registerComponent('MediaLoader', MediaLoader);
+
+  /**
+   * @file clickable-component.js
+   */
+
+  /**
+   * Component which is clickable or keyboard actionable, but is not a
+   * native HTML button.
+   *
+   * @extends Component
+   */
+  class ClickableComponent extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  { import('./player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of component options.
+     *
+     * @param  {function} [options.clickHandler]
+     *         The function to call when the button is clicked / activated
+     *
+     * @param  {string} [options.controlText]
+     *         The text to set on the button
+     *
+     * @param  {string} [options.className]
+     *         A class or space separated list of classes to add the component
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      if (this.options_.controlText) {
+        this.controlText(this.options_.controlText);
+      }
+      this.handleMouseOver_ = e => this.handleMouseOver(e);
+      this.handleMouseOut_ = e => this.handleMouseOut(e);
+      this.handleClick_ = e => this.handleClick(e);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.emitTapEvents();
+      this.enable();
+    }
+
+    /**
+     * Create the `ClickableComponent`s DOM element.
+     *
+     * @param {string} [tag=div]
+     *        The element's node type.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element.
+     *
+     * @param {Object} [attributes={}]
+     *        An object of attributes that should be set on the element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tag = 'div', props = {}, attributes = {}) {
+      props = Object.assign({
+        className: this.buildCSSClass(),
+        tabIndex: 0
+      }, props);
+      if (tag === 'button') {
+        log$1.error(`Creating a ClickableComponent with an HTML element of ${tag} is not supported; use a Button instead.`);
+      }
+
+      // Add ARIA attributes for clickable element which is not a native HTML button
+      attributes = Object.assign({
+        role: 'button'
+      }, attributes);
+      this.tabIndex_ = props.tabIndex;
+      const el = createEl(tag, props, attributes);
+      if (!this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+      }
+      this.createControlTextEl(el);
+      return el;
+    }
+    dispose() {
+      // remove controlTextEl_ on dispose
+      this.controlTextEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Create a control text element on this `ClickableComponent`
+     *
+     * @param {Element} [el]
+     *        Parent element for the control text.
+     *
+     * @return {Element}
+     *         The control text element that gets created.
+     */
+    createControlTextEl(el) {
+      this.controlTextEl_ = createEl('span', {
+        className: 'vjs-control-text'
+      }, {
+        // let the screen reader user know that the text of the element may change
+        'aria-live': 'polite'
+      });
+      if (el) {
+        el.appendChild(this.controlTextEl_);
+      }
+      this.controlText(this.controlText_, el);
+      return this.controlTextEl_;
+    }
+
+    /**
+     * Get or set the localize text to use for the controls on the `ClickableComponent`.
+     *
+     * @param {string} [text]
+     *        Control text for element.
+     *
+     * @param {Element} [el=this.el()]
+     *        Element to set the title on.
+     *
+     * @return {string}
+     *         - The control text when getting
+     */
+    controlText(text, el = this.el()) {
+      if (text === undefined) {
+        return this.controlText_ || 'Need Text';
+      }
+      const localizedText = this.localize(text);
+
+      /** @protected */
+      this.controlText_ = text;
+      textContent(this.controlTextEl_, localizedText);
+      if (!this.nonIconControl && !this.player_.options_.noUITitleAttributes) {
+        // Set title attribute if only an icon is shown
+        el.setAttribute('title', localizedText);
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-control vjs-button ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Enable this `ClickableComponent`
+     */
+    enable() {
+      if (!this.enabled_) {
+        this.enabled_ = true;
+        this.removeClass('vjs-disabled');
+        this.el_.setAttribute('aria-disabled', 'false');
+        if (typeof this.tabIndex_ !== 'undefined') {
+          this.el_.setAttribute('tabIndex', this.tabIndex_);
+        }
+        this.on(['tap', 'click'], this.handleClick_);
+        this.on('keydown', this.handleKeyDown_);
+      }
+    }
+
+    /**
+     * Disable this `ClickableComponent`
+     */
+    disable() {
+      this.enabled_ = false;
+      this.addClass('vjs-disabled');
+      this.el_.setAttribute('aria-disabled', 'true');
+      if (typeof this.tabIndex_ !== 'undefined') {
+        this.el_.removeAttribute('tabIndex');
+      }
+      this.off('mouseover', this.handleMouseOver_);
+      this.off('mouseout', this.handleMouseOut_);
+      this.off(['tap', 'click'], this.handleClick_);
+      this.off('keydown', this.handleKeyDown_);
+    }
+
+    /**
+     * Handles language change in ClickableComponent for the player in components
+     *
+     *
+     */
+    handleLanguagechange() {
+      this.controlText(this.controlText_);
+    }
+
+    /**
+     * Event handler that is called when a `ClickableComponent` receives a
+     * `click` or `tap` event.
+     *
+     * @param {Event} event
+     *        The `tap` or `click` event that caused this function to be called.
+     *
+     * @listens tap
+     * @listens click
+     * @abstract
+     */
+    handleClick(event) {
+      if (this.options_.clickHandler) {
+        this.options_.clickHandler.call(this, arguments);
+      }
+    }
+
+    /**
+     * Event handler that is called when a `ClickableComponent` receives a
+     * `keydown` event.
+     *
+     * By default, if the key is Space or Enter, it will trigger a `click` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Support Space or Enter key operation to fire a click event. Also,
+      // prevent the event from propagating through the DOM and triggering
+      // Player hotkeys.
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.trigger('click');
+      } else {
+        // Pass keypress handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+  }
+  Component$1.registerComponent('ClickableComponent', ClickableComponent);
+
+  /**
+   * @file poster-image.js
+   */
+
+  /**
+   * A `ClickableComponent` that handles showing the poster image for the player.
+   *
+   * @extends ClickableComponent
+   */
+  class PosterImage extends ClickableComponent {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should attach to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update();
+      this.update_ = e => this.update(e);
+      player.on('posterchange', this.update_);
+    }
+
+    /**
+     * Clean up and dispose of the `PosterImage`.
+     */
+    dispose() {
+      this.player().off('posterchange', this.update_);
+      super.dispose();
+    }
+
+    /**
+     * Create the `PosterImage`s DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      // The el is an empty div to keep position in the DOM
+      // A picture and img el will be inserted when a source is set
+      return createEl('div', {
+        className: 'vjs-poster'
+      });
+    }
+
+    /**
+     * Get or set the `PosterImage`'s crossOrigin option.
+     *
+     * @param {string|null} [value]
+     *        The value to set the crossOrigin to. If an argument is
+     *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+     *
+     * @return {string|null}
+     *         - The current crossOrigin value of the `Player` when getting.
+     *         - undefined when setting
+     */
+    crossOrigin(value) {
+      // `null` can be set to unset a value
+      if (typeof value === 'undefined') {
+        if (this.$('img')) {
+          // If the poster's element exists, give its value
+          return this.$('img').crossOrigin;
+        } else if (this.player_.tech_ && this.player_.tech_.isReady_) {
+          // If not but the tech is ready, query the tech
+          return this.player_.crossOrigin();
+        }
+        // Otherwise check options as the  poster is usually set before the state of crossorigin
+        // can be retrieved by the getter
+        return this.player_.options_.crossOrigin || this.player_.options_.crossorigin || null;
+      }
+      if (value !== null && value !== 'anonymous' && value !== 'use-credentials') {
+        this.player_.log.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${value}"`);
+        return;
+      }
+      if (this.$('img')) {
+        this.$('img').crossOrigin = value;
+      }
+      return;
+    }
+
+    /**
+     * An {@link EventTarget~EventListener} for {@link Player#posterchange} events.
+     *
+     * @listens Player#posterchange
+     *
+     * @param {Event} [event]
+     *        The `Player#posterchange` event that triggered this function.
+     */
+    update(event) {
+      const url = this.player().poster();
+      this.setSrc(url);
+
+      // If there's no poster source we should display:none on this component
+      // so it's not still clickable or right-clickable
+      if (url) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+
+    /**
+     * Set the source of the `PosterImage` depending on the display method. (Re)creates
+     * the inner picture and img elementss when needed.
+     *
+     * @param {string} [url]
+     *        The URL to the source for the `PosterImage`. If not specified or falsy,
+     *        any source and ant inner picture/img are removed.
+     */
+    setSrc(url) {
+      if (!url) {
+        this.el_.textContent = '';
+        return;
+      }
+      if (!this.$('img')) {
+        this.el_.appendChild(createEl('picture', {
+          className: 'vjs-poster',
+          // Don't want poster to be tabbable.
+          tabIndex: -1
+        }, {}, createEl('img', {
+          loading: 'lazy',
+          crossOrigin: this.crossOrigin()
+        }, {
+          alt: ''
+        })));
+      }
+      this.$('img').src = url;
+    }
+
+    /**
+     * An {@link EventTarget~EventListener} for clicks on the `PosterImage`. See
+     * {@link ClickableComponent#handleClick} for instances where this will be triggered.
+     *
+     * @listens tap
+     * @listens click
+     * @listens keydown
+     *
+     * @param {Event} event
+     +        The `click`, `tap` or `keydown` event that caused this function to be called.
+     */
+    handleClick(event) {
+      // We don't want a click to trigger playback when controls are disabled
+      if (!this.player_.controls()) {
+        return;
+      }
+      if (this.player_.tech(true)) {
+        this.player_.tech(true).focus();
+      }
+      if (this.player_.paused()) {
+        silencePromise(this.player_.play());
+      } else {
+        this.player_.pause();
+      }
+    }
+  }
+
+  /**
+   * Get or set the `PosterImage`'s crossorigin option. For the HTML5 player, this
+   * sets the `crossOrigin` property on the `<img>` tag to control the CORS
+   * behavior.
+   *
+   * @param {string|null} [value]
+   *        The value to set the `PosterImages`'s crossorigin to. If an argument is
+   *        given, must be one of `anonymous` or `use-credentials`.
+   *
+   * @return {string|null|undefined}
+   *         - The current crossorigin value of the `Player` when getting.
+   *         - undefined when setting
+   */
+  PosterImage.prototype.crossorigin = PosterImage.prototype.crossOrigin;
+  Component$1.registerComponent('PosterImage', PosterImage);
+
+  /**
+   * @file text-track-display.js
+   */
+  const darkGray = '#222';
+  const lightGray = '#ccc';
+  const fontMap = {
+    monospace: 'monospace',
+    sansSerif: 'sans-serif',
+    serif: 'serif',
+    monospaceSansSerif: '"Andale Mono", "Lucida Console", monospace',
+    monospaceSerif: '"Courier New", monospace',
+    proportionalSansSerif: 'sans-serif',
+    proportionalSerif: 'serif',
+    casual: '"Comic Sans MS", Impact, fantasy',
+    script: '"Monotype Corsiva", cursive',
+    smallcaps: '"Andale Mono", "Lucida Console", monospace, sans-serif'
+  };
+
+  /**
+   * Construct an rgba color from a given hex color code.
+   *
+   * @param {number} color
+   *        Hex number for color, like #f0e or #f604e2.
+   *
+   * @param {number} opacity
+   *        Value for opacity, 0.0 - 1.0.
+   *
+   * @return {string}
+   *         The rgba color that was created, like 'rgba(255, 0, 0, 0.3)'.
+   */
+  function constructColor(color, opacity) {
+    let hex;
+    if (color.length === 4) {
+      // color looks like "#f0e"
+      hex = color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+    } else if (color.length === 7) {
+      // color looks like "#f604e2"
+      hex = color.slice(1);
+    } else {
+      throw new Error('Invalid color code provided, ' + color + '; must be formatted as e.g. #f0e or #f604e2.');
+    }
+    return 'rgba(' + parseInt(hex.slice(0, 2), 16) + ',' + parseInt(hex.slice(2, 4), 16) + ',' + parseInt(hex.slice(4, 6), 16) + ',' + opacity + ')';
+  }
+
+  /**
+   * Try to update the style of a DOM element. Some style changes will throw an error,
+   * particularly in IE8. Those should be noops.
+   *
+   * @param {Element} el
+   *        The DOM element to be styled.
+   *
+   * @param {string} style
+   *        The CSS property on the element that should be styled.
+   *
+   * @param {string} rule
+   *        The style rule that should be applied to the property.
+   *
+   * @private
+   */
+  function tryUpdateStyle(el, style, rule) {
+    try {
+      el.style[style] = rule;
+    } catch (e) {
+      // Satisfies linter.
+      return;
+    }
+  }
+
+  /**
+   * Converts the CSS top/right/bottom/left property numeric value to string in pixels.
+   *
+   * @param {number} position
+   *        The CSS top/right/bottom/left property value.
+   *
+   * @return {string}
+   *          The CSS property value that was created, like '10px'.
+   *
+   * @private
+   */
+  function getCSSPositionValue(position) {
+    return position ? `${position}px` : '';
+  }
+
+  /**
+   * The component for displaying text track cues.
+   *
+   * @extends Component
+   */
+  class TextTrackDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when `TextTrackDisplay` is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      const updateDisplayTextHandler = e => this.updateDisplay(e);
+      const updateDisplayHandler = e => {
+        this.updateDisplayOverlay();
+        this.updateDisplay(e);
+      };
+      player.on('loadstart', e => this.toggleDisplay(e));
+      player.on('texttrackchange', updateDisplayTextHandler);
+      player.on('loadedmetadata', e => {
+        this.updateDisplayOverlay();
+        this.preselectTrack(e);
+      });
+
+      // This used to be called during player init, but was causing an error
+      // if a track should show by default and the display hadn't loaded yet.
+      // Should probably be moved to an external track loader when we support
+      // tracks that don't need a display.
+      player.ready(bind_(this, function () {
+        if (player.tech_ && player.tech_.featuresNativeTextTracks) {
+          this.hide();
+          return;
+        }
+        player.on('fullscreenchange', updateDisplayHandler);
+        player.on('playerresize', updateDisplayHandler);
+        const screenOrientation = window.screen.orientation || window;
+        const changeOrientationEvent = window.screen.orientation ? 'change' : 'orientationchange';
+        screenOrientation.addEventListener(changeOrientationEvent, updateDisplayHandler);
+        player.on('dispose', () => screenOrientation.removeEventListener(changeOrientationEvent, updateDisplayHandler));
+        const tracks = this.options_.playerOptions.tracks || [];
+        for (let i = 0; i < tracks.length; i++) {
+          this.player_.addRemoteTextTrack(tracks[i], true);
+        }
+        this.preselectTrack();
+      }));
+    }
+
+    /**
+    * Preselect a track following this precedence:
+    * - matches the previously selected {@link TextTrack}'s language and kind
+    * - matches the previously selected {@link TextTrack}'s language only
+    * - is the first default captions track
+    * - is the first default descriptions track
+    *
+    * @listens Player#loadstart
+    */
+    preselectTrack() {
+      const modes = {
+        captions: 1,
+        subtitles: 1
+      };
+      const trackList = this.player_.textTracks();
+      const userPref = this.player_.cache_.selectedLanguage;
+      let firstDesc;
+      let firstCaptions;
+      let preferredTrack;
+      for (let i = 0; i < trackList.length; i++) {
+        const track = trackList[i];
+        if (userPref && userPref.enabled && userPref.language && userPref.language === track.language && track.kind in modes) {
+          // Always choose the track that matches both language and kind
+          if (track.kind === userPref.kind) {
+            preferredTrack = track;
+            // or choose the first track that matches language
+          } else if (!preferredTrack) {
+            preferredTrack = track;
+          }
+
+          // clear everything if offTextTrackMenuItem was clicked
+        } else if (userPref && !userPref.enabled) {
+          preferredTrack = null;
+          firstDesc = null;
+          firstCaptions = null;
+        } else if (track.default) {
+          if (track.kind === 'descriptions' && !firstDesc) {
+            firstDesc = track;
+          } else if (track.kind in modes && !firstCaptions) {
+            firstCaptions = track;
+          }
+        }
+      }
+
+      // The preferredTrack matches the user preference and takes
+      // precedence over all the other tracks.
+      // So, display the preferredTrack before the first default track
+      // and the subtitles/captions track before the descriptions track
+      if (preferredTrack) {
+        preferredTrack.mode = 'showing';
+      } else if (firstCaptions) {
+        firstCaptions.mode = 'showing';
+      } else if (firstDesc) {
+        firstDesc.mode = 'showing';
+      }
+    }
+
+    /**
+     * Turn display of {@link TextTrack}'s from the current state into the other state.
+     * There are only two states:
+     * - 'shown'
+     * - 'hidden'
+     *
+     * @listens Player#loadstart
+     */
+    toggleDisplay() {
+      if (this.player_.tech_ && this.player_.tech_.featuresNativeTextTracks) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+
+    /**
+     * Create the {@link Component}'s DOM element.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-text-track-display'
+      }, {
+        'translate': 'yes',
+        'aria-live': 'off',
+        'aria-atomic': 'true'
+      });
+    }
+
+    /**
+     * Clear all displayed {@link TextTrack}s.
+     */
+    clearDisplay() {
+      if (typeof window.WebVTT === 'function') {
+        window.WebVTT.processCues(window, [], this.el_);
+      }
+    }
+
+    /**
+     * Update the displayed TextTrack when a either a {@link Player#texttrackchange} or
+     * a {@link Player#fullscreenchange} is fired.
+     *
+     * @listens Player#texttrackchange
+     * @listens Player#fullscreenchange
+     */
+    updateDisplay() {
+      const tracks = this.player_.textTracks();
+      const allowMultipleShowingTracks = this.options_.allowMultipleShowingTracks;
+      this.clearDisplay();
+      if (allowMultipleShowingTracks) {
+        const showingTracks = [];
+        for (let i = 0; i < tracks.length; ++i) {
+          const track = tracks[i];
+          if (track.mode !== 'showing') {
+            continue;
+          }
+          showingTracks.push(track);
+        }
+        this.updateForTrack(showingTracks);
+        return;
+      }
+
+      //  Track display prioritization model: if multiple tracks are 'showing',
+      //  display the first 'subtitles' or 'captions' track which is 'showing',
+      //  otherwise display the first 'descriptions' track which is 'showing'
+
+      let descriptionsTrack = null;
+      let captionsSubtitlesTrack = null;
+      let i = tracks.length;
+      while (i--) {
+        const track = tracks[i];
+        if (track.mode === 'showing') {
+          if (track.kind === 'descriptions') {
+            descriptionsTrack = track;
+          } else {
+            captionsSubtitlesTrack = track;
+          }
+        }
+      }
+      if (captionsSubtitlesTrack) {
+        if (this.getAttribute('aria-live') !== 'off') {
+          this.setAttribute('aria-live', 'off');
+        }
+        this.updateForTrack(captionsSubtitlesTrack);
+      } else if (descriptionsTrack) {
+        if (this.getAttribute('aria-live') !== 'assertive') {
+          this.setAttribute('aria-live', 'assertive');
+        }
+        this.updateForTrack(descriptionsTrack);
+      }
+    }
+
+    /**
+     * Updates the displayed TextTrack to be sure it overlays the video when a either
+     * a {@link Player#texttrackchange} or a {@link Player#fullscreenchange} is fired.
+     */
+    updateDisplayOverlay() {
+      // inset-inline and inset-block are not supprted on old chrome, but these are
+      // only likely to be used on TV devices
+      if (!this.player_.videoHeight() || !window.CSS.supports('inset-inline: 10px')) {
+        return;
+      }
+      const playerWidth = this.player_.currentWidth();
+      const playerHeight = this.player_.currentHeight();
+      const playerAspectRatio = playerWidth / playerHeight;
+      const videoAspectRatio = this.player_.videoWidth() / this.player_.videoHeight();
+      let insetInlineMatch = 0;
+      let insetBlockMatch = 0;
+      if (Math.abs(playerAspectRatio - videoAspectRatio) > 0.1) {
+        if (playerAspectRatio > videoAspectRatio) {
+          insetInlineMatch = Math.round((playerWidth - playerHeight * videoAspectRatio) / 2);
+        } else {
+          insetBlockMatch = Math.round((playerHeight - playerWidth / videoAspectRatio) / 2);
+        }
+      }
+      tryUpdateStyle(this.el_, 'insetInline', getCSSPositionValue(insetInlineMatch));
+      tryUpdateStyle(this.el_, 'insetBlock', getCSSPositionValue(insetBlockMatch));
+    }
+
+    /**
+     * Style {@Link TextTrack} activeCues according to {@Link TextTrackSettings}.
+     *
+     * @param {TextTrack} track
+     *        Text track object containing active cues to style.
+     */
+    updateDisplayState(track) {
+      const overrides = this.player_.textTrackSettings.getValues();
+      const cues = track.activeCues;
+      let i = cues.length;
+      while (i--) {
+        const cue = cues[i];
+        if (!cue) {
+          continue;
+        }
+        const cueDiv = cue.displayState;
+        if (overrides.color) {
+          cueDiv.firstChild.style.color = overrides.color;
+        }
+        if (overrides.textOpacity) {
+          tryUpdateStyle(cueDiv.firstChild, 'color', constructColor(overrides.color || '#fff', overrides.textOpacity));
+        }
+        if (overrides.backgroundColor) {
+          cueDiv.firstChild.style.backgroundColor = overrides.backgroundColor;
+        }
+        if (overrides.backgroundOpacity) {
+          tryUpdateStyle(cueDiv.firstChild, 'backgroundColor', constructColor(overrides.backgroundColor || '#000', overrides.backgroundOpacity));
+        }
+        if (overrides.windowColor) {
+          if (overrides.windowOpacity) {
+            tryUpdateStyle(cueDiv, 'backgroundColor', constructColor(overrides.windowColor, overrides.windowOpacity));
+          } else {
+            cueDiv.style.backgroundColor = overrides.windowColor;
+          }
+        }
+        if (overrides.edgeStyle) {
+          if (overrides.edgeStyle === 'dropshadow') {
+            cueDiv.firstChild.style.textShadow = `2px 2px 3px ${darkGray}, 2px 2px 4px ${darkGray}, 2px 2px 5px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'raised') {
+            cueDiv.firstChild.style.textShadow = `1px 1px ${darkGray}, 2px 2px ${darkGray}, 3px 3px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'depressed') {
+            cueDiv.firstChild.style.textShadow = `1px 1px ${lightGray}, 0 1px ${lightGray}, -1px -1px ${darkGray}, 0 -1px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'uniform') {
+            cueDiv.firstChild.style.textShadow = `0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}`;
+          }
+        }
+        if (overrides.fontPercent && overrides.fontPercent !== 1) {
+          const fontSize = window.parseFloat(cueDiv.style.fontSize);
+          cueDiv.style.fontSize = fontSize * overrides.fontPercent + 'px';
+          cueDiv.style.height = 'auto';
+          cueDiv.style.top = 'auto';
+        }
+        if (overrides.fontFamily && overrides.fontFamily !== 'default') {
+          if (overrides.fontFamily === 'small-caps') {
+            cueDiv.firstChild.style.fontVariant = 'small-caps';
+          } else {
+            cueDiv.firstChild.style.fontFamily = fontMap[overrides.fontFamily];
+          }
+        }
+      }
+    }
+
+    /**
+     * Add an {@link TextTrack} to to the {@link Tech}s {@link TextTrackList}.
+     *
+     * @param {TextTrack|TextTrack[]} tracks
+     *        Text track object or text track array to be added to the list.
+     */
+    updateForTrack(tracks) {
+      if (!Array.isArray(tracks)) {
+        tracks = [tracks];
+      }
+      if (typeof window.WebVTT !== 'function' || tracks.every(track => {
+        return !track.activeCues;
+      })) {
+        return;
+      }
+      const cues = [];
+
+      // push all active track cues
+      for (let i = 0; i < tracks.length; ++i) {
+        const track = tracks[i];
+        for (let j = 0; j < track.activeCues.length; ++j) {
+          cues.push(track.activeCues[j]);
+        }
+      }
+
+      // removes all cues before it processes new ones
+      window.WebVTT.processCues(window, cues, this.el_);
+
+      // add unique class to each language text track & add settings styling if necessary
+      for (let i = 0; i < tracks.length; ++i) {
+        const track = tracks[i];
+        for (let j = 0; j < track.activeCues.length; ++j) {
+          const cueEl = track.activeCues[j].displayState;
+          addClass(cueEl, 'vjs-text-track-cue', 'vjs-text-track-cue-' + (track.language ? track.language : i));
+          if (track.language) {
+            setAttribute(cueEl, 'lang', track.language);
+          }
+        }
+        if (this.player_.textTrackSettings) {
+          this.updateDisplayState(track);
+        }
+      }
+    }
+  }
+  Component$1.registerComponent('TextTrackDisplay', TextTrackDisplay);
+
+  /**
+   * @file loading-spinner.js
+   */
+
+  /**
+   * A loading spinner for use during waiting/loading events.
+   *
+   * @extends Component
+   */
+  class LoadingSpinner extends Component$1 {
+    /**
+     * Create the `LoadingSpinner`s DOM element.
+     *
+     * @return {Element}
+     *         The dom element that gets created.
+     */
+    createEl() {
+      const isAudio = this.player_.isAudio();
+      const playerType = this.localize(isAudio ? 'Audio Player' : 'Video Player');
+      const controlText = createEl('span', {
+        className: 'vjs-control-text',
+        textContent: this.localize('{1} is loading.', [playerType])
+      });
+      const el = super.createEl('div', {
+        className: 'vjs-loading-spinner',
+        dir: 'ltr'
+      });
+      el.appendChild(controlText);
+      return el;
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-control-text').textContent = this.localize('{1} is loading.', [this.player_.isAudio() ? 'Audio Player' : 'Video Player']);
+    }
+  }
+  Component$1.registerComponent('LoadingSpinner', LoadingSpinner);
+
+  /**
+   * @file button.js
+   */
+
+  /**
+   * Base class for all buttons.
+   *
+   * @extends ClickableComponent
+   */
+  class Button extends ClickableComponent {
+    /**
+     * Create the `Button`s DOM element.
+     *
+     * @param {string} [tag="button"]
+     *        The element's node type. This argument is IGNORED: no matter what
+     *        is passed, it will always create a `button` element.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element.
+     *
+     * @param {Object} [attributes={}]
+     *        An object of attributes that should be set on the element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tag, props = {}, attributes = {}) {
+      tag = 'button';
+      props = Object.assign({
+        className: this.buildCSSClass()
+      }, props);
+
+      // Add attributes for button element
+      attributes = Object.assign({
+        // Necessary since the default button type is "submit"
+        type: 'button'
+      }, attributes);
+      const el = createEl(tag, props, attributes);
+      if (!this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+      }
+      this.createControlTextEl(el);
+      return el;
+    }
+
+    /**
+     * Add a child `Component` inside of this `Button`.
+     *
+     * @param {string|Component} child
+     *        The name or instance of a child to add.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of options that will get passed to children of
+     *        the child.
+     *
+     * @return {Component}
+     *         The `Component` that gets added as a child. When using a string the
+     *         `Component` will get created by this process.
+     *
+     * @deprecated since version 5
+     */
+    addChild(child, options = {}) {
+      const className = this.constructor.name;
+      log$1.warn(`Adding an actionable (user controllable) child to a Button (${className}) is not supported; use a ClickableComponent instead.`);
+
+      // Avoid the error message generated by ClickableComponent's addChild method
+      return Component$1.prototype.addChild.call(this, child, options);
+    }
+
+    /**
+     * Enable the `Button` element so that it can be activated or clicked. Use this with
+     * {@link Button#disable}.
+     */
+    enable() {
+      super.enable();
+      this.el_.removeAttribute('disabled');
+    }
+
+    /**
+     * Disable the `Button` element so that it cannot be activated or clicked. Use this with
+     * {@link Button#enable}.
+     */
+    disable() {
+      super.disable();
+      this.el_.setAttribute('disabled', 'disabled');
+    }
+
+    /**
+     * This gets called when a `Button` has focus and `keydown` is triggered via a key
+     * press.
+     *
+     * @param {KeyboardEvent} event
+     *        The event that caused this function to get called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Ignore Space or Enter key operation, which is handled by the browser for
+      // a button - though not for its super class, ClickableComponent. Also,
+      // prevent the event from propagating through the DOM and triggering Player
+      // hotkeys. We do not preventDefault here because we _want_ the browser to
+      // handle it.
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.stopPropagation();
+        return;
+      }
+
+      // Pass keypress handling up for unsupported keys
+      super.handleKeyDown(event);
+    }
+  }
+  Component$1.registerComponent('Button', Button);
+
+  /**
+   * @file big-play-button.js
+   */
+
+  /**
+   * The initial play button that shows before the video has played. The hiding of the
+   * `BigPlayButton` get done via CSS and `Player` states.
+   *
+   * @extends Button
+   */
+  class BigPlayButton extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.mouseused_ = false;
+      this.setIcon('play');
+      this.on('mousedown', e => this.handleMouseDown(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object. Always returns 'vjs-big-play-button'.
+     */
+    buildCSSClass() {
+      return 'vjs-big-play-button';
+    }
+
+    /**
+     * This gets called when a `BigPlayButton` "clicked". See {@link ClickableComponent}
+     * for more detailed information on what a click can be.
+     *
+     * @param {KeyboardEvent|MouseEvent|TouchEvent} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const playPromise = this.player_.play();
+
+      // exit early if clicked via the mouse
+      if (this.mouseused_ && 'clientX' in event && 'clientY' in event) {
+        silencePromise(playPromise);
+        if (this.player_.tech(true)) {
+          this.player_.tech(true).focus();
+        }
+        return;
+      }
+      const cb = this.player_.getChild('controlBar');
+      const playToggle = cb && cb.getChild('playToggle');
+      if (!playToggle) {
+        this.player_.tech(true).focus();
+        return;
+      }
+      const playFocus = () => playToggle.focus();
+      if (isPromise(playPromise)) {
+        playPromise.then(playFocus, () => {});
+      } else {
+        this.setTimeout(playFocus, 1);
+      }
+    }
+
+    /**
+     * Event handler that is called when a `BigPlayButton` receives a
+     * `keydown` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      this.mouseused_ = false;
+      super.handleKeyDown(event);
+    }
+
+    /**
+     * Handle `mousedown` events on the `BigPlayButton`.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      this.mouseused_ = true;
+    }
+  }
+
+  /**
+   * The text that should display over the `BigPlayButton`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  BigPlayButton.prototype.controlText_ = 'Play Video';
+  Component$1.registerComponent('BigPlayButton', BigPlayButton);
+
+  /**
+   * @file close-button.js
+   */
+
+  /**
+   * The `CloseButton` is a `{@link Button}` that fires a `close` event when
+   * it gets clicked.
+   *
+   * @extends Button
+   */
+  class CloseButton extends Button {
+    /**
+    * Creates an instance of the this class.
+    *
+    * @param  { import('./player').default } player
+    *         The `Player` that this class should be attached to.
+    *
+    * @param  {Object} [options]
+    *         The key/value store of player options.
+    */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('cancel');
+      this.controlText(options && options.controlText || this.localize('Close'));
+    }
+
+    /**
+    * Builds the default DOM `className`.
+    *
+    * @return {string}
+    *         The DOM `className` for this object.
+    */
+    buildCSSClass() {
+      return `vjs-close-button ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when a `CloseButton` gets clicked. See
+     * {@link ClickableComponent#handleClick} for more information on when
+     * this will be triggered
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     * @fires CloseButton#close
+     */
+    handleClick(event) {
+      /**
+       * Triggered when the a `CloseButton` is clicked.
+       *
+       * @event CloseButton#close
+       * @type {Event}
+       *
+       * @property {boolean} [bubbles=false]
+       *           set to false so that the close event does not
+       *           bubble up to parents if there is no listener
+       */
+      this.trigger({
+        type: 'close',
+        bubbles: false
+      });
+    }
+    /**
+     * Event handler that is called when a `CloseButton` receives a
+     * `keydown` event.
+     *
+     * By default, if the key is Esc, it will trigger a `click` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Esc button will trigger `click` event
+      if (keycode.isEventKey(event, 'Esc')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.trigger('click');
+      } else {
+        // Pass keypress handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+  }
+  Component$1.registerComponent('CloseButton', CloseButton);
+
+  /**
+   * @file play-toggle.js
+   */
+
+  /**
+   * Button to toggle between play and pause.
+   *
+   * @extends Button
+   */
+  class PlayToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+
+      // show or hide replay icon
+      options.replay = options.replay === undefined || options.replay;
+      this.setIcon('play');
+      this.on(player, 'play', e => this.handlePlay(e));
+      this.on(player, 'pause', e => this.handlePause(e));
+      if (options.replay) {
+        this.on(player, 'ended', e => this.handleEnded(e));
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-play-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when an `PlayToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (this.player_.paused()) {
+        silencePromise(this.player_.play());
+      } else {
+        this.player_.pause();
+      }
+    }
+
+    /**
+     * This gets called once after the video has ended and the user seeks so that
+     * we can change the replay button back to a play button.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#seeked
+     */
+    handleSeeked(event) {
+      this.removeClass('vjs-ended');
+      if (this.player_.paused()) {
+        this.handlePause(event);
+      } else {
+        this.handlePlay(event);
+      }
+    }
+
+    /**
+     * Add the vjs-playing class to the element so it can change appearance.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#play
+     */
+    handlePlay(event) {
+      this.removeClass('vjs-ended', 'vjs-paused');
+      this.addClass('vjs-playing');
+      // change the button text to "Pause"
+      this.setIcon('pause');
+      this.controlText('Pause');
+    }
+
+    /**
+     * Add the vjs-paused class to the element so it can change appearance.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#pause
+     */
+    handlePause(event) {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      // change the button text to "Play"
+      this.setIcon('play');
+      this.controlText('Play');
+    }
+
+    /**
+     * Add the vjs-ended class to the element so it can change appearance
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#ended
+     */
+    handleEnded(event) {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-ended');
+      // change the button text to "Replay"
+      this.setIcon('replay');
+      this.controlText('Replay');
+
+      // on the next seek remove the replay button
+      this.one(this.player_, 'seeked', e => this.handleSeeked(e));
+    }
+  }
+
+  /**
+   * The text that should display over the `PlayToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PlayToggle.prototype.controlText_ = 'Play';
+  Component$1.registerComponent('PlayToggle', PlayToggle);
+
+  /**
+   * @file time-display.js
+   */
+
+  /**
+   * Displays time information about the video
+   *
+   * @extends Component
+   */
+  class TimeDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, ['timeupdate', 'ended', 'seeking'], e => this.update(e));
+      this.updateTextNode_();
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const className = this.buildCSSClass();
+      const el = super.createEl('div', {
+        className: `${className} vjs-time-control vjs-control`
+      });
+      const span = createEl('span', {
+        className: 'vjs-control-text',
+        textContent: `${this.localize(this.labelText_)}\u00a0`
+      }, {
+        role: 'presentation'
+      });
+      el.appendChild(span);
+      this.contentEl_ = createEl('span', {
+        className: `${className}-display`
+      }, {
+        // span elements have no implicit role, but some screen readers (notably VoiceOver)
+        // treat them as a break between items in the DOM when using arrow keys
+        // (or left-to-right swipes on iOS) to read contents of a page. Using
+        // role='presentation' causes VoiceOver to NOT treat this span as a break.
+        role: 'presentation'
+      });
+      el.appendChild(this.contentEl_);
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.textNode_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Updates the displayed time according to the `updateContent` function which is defined in the child class.
+     *
+     * @param {Event} [event]
+     *          The `timeupdate`, `ended` or `seeking` (if enableSmoothSeeking is true) event that caused this function to be called.
+     */
+    update(event) {
+      if (!this.player_.options_.enableSmoothSeeking && event.type === 'seeking') {
+        return;
+      }
+      this.updateContent(event);
+    }
+
+    /**
+     * Updates the time display text node with a new time
+     *
+     * @param {number} [time=0] the time to update to
+     *
+     * @private
+     */
+    updateTextNode_(time = 0) {
+      time = formatTime(time);
+      if (this.formattedTime_ === time) {
+        return;
+      }
+      this.formattedTime_ = time;
+      this.requestNamedAnimationFrame('TimeDisplay#updateTextNode_', () => {
+        if (!this.contentEl_) {
+          return;
+        }
+        let oldNode = this.textNode_;
+        if (oldNode && this.contentEl_.firstChild !== oldNode) {
+          oldNode = null;
+          log$1.warn('TimeDisplay#updateTextnode_: Prevented replacement of text node element since it was no longer a child of this node. Appending a new node instead.');
+        }
+        this.textNode_ = document.createTextNode(this.formattedTime_);
+        if (!this.textNode_) {
+          return;
+        }
+        if (oldNode) {
+          this.contentEl_.replaceChild(this.textNode_, oldNode);
+        } else {
+          this.contentEl_.appendChild(this.textNode_);
+        }
+      });
+    }
+
+    /**
+     * To be filled out in the child class, should update the displayed time
+     * in accordance with the fact that the current time has changed.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate`  event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     */
+    updateContent(event) {}
+  }
+
+  /**
+   * The text that is added to the `TimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  TimeDisplay.prototype.labelText_ = 'Time';
+
+  /**
+   * The text that should display over the `TimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  TimeDisplay.prototype.controlText_ = 'Time';
+  Component$1.registerComponent('TimeDisplay', TimeDisplay);
+
+  /**
+   * @file current-time-display.js
+   */
+
+  /**
+   * Displays the current time
+   *
+   * @extends Component
+   */
+  class CurrentTimeDisplay extends TimeDisplay {
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-current-time';
+    }
+
+    /**
+     * Update current time display
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` event that caused this function to run.
+     *
+     * @listens Player#timeupdate
+     */
+    updateContent(event) {
+      // Allows for smooth scrubbing, when player can't keep up.
+      let time;
+      if (this.player_.ended()) {
+        time = this.player_.duration();
+      } else {
+        time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+      }
+      this.updateTextNode_(time);
+    }
+  }
+
+  /**
+   * The text that is added to the `CurrentTimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  CurrentTimeDisplay.prototype.labelText_ = 'Current Time';
+
+  /**
+   * The text that should display over the `CurrentTimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  CurrentTimeDisplay.prototype.controlText_ = 'Current Time';
+  Component$1.registerComponent('CurrentTimeDisplay', CurrentTimeDisplay);
+
+  /**
+   * @file duration-display.js
+   */
+
+  /**
+   * Displays the duration
+   *
+   * @extends Component
+   */
+  class DurationDisplay extends TimeDisplay {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      const updateContent = e => this.updateContent(e);
+
+      // we do not want to/need to throttle duration changes,
+      // as they should always display the changed duration as
+      // it has changed
+      this.on(player, 'durationchange', updateContent);
+
+      // Listen to loadstart because the player duration is reset when a new media element is loaded,
+      // but the durationchange on the user agent will not fire.
+      // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
+      this.on(player, 'loadstart', updateContent);
+
+      // Also listen for timeupdate (in the parent) and loadedmetadata because removing those
+      // listeners could have broken dependent applications/libraries. These
+      // can likely be removed for 7.0.
+      this.on(player, 'loadedmetadata', updateContent);
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-duration';
+    }
+
+    /**
+     * Update duration time display.
+     *
+     * @param {Event} [event]
+     *        The `durationchange`, `timeupdate`, or `loadedmetadata` event that caused
+     *        this function to be called.
+     *
+     * @listens Player#durationchange
+     * @listens Player#timeupdate
+     * @listens Player#loadedmetadata
+     */
+    updateContent(event) {
+      const duration = this.player_.duration();
+      this.updateTextNode_(duration);
+    }
+  }
+
+  /**
+   * The text that is added to the `DurationDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  DurationDisplay.prototype.labelText_ = 'Duration';
+
+  /**
+   * The text that should display over the `DurationDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  DurationDisplay.prototype.controlText_ = 'Duration';
+  Component$1.registerComponent('DurationDisplay', DurationDisplay);
+
+  /**
+   * @file time-divider.js
+   */
+
+  /**
+   * The separator between the current time and duration.
+   * Can be hidden if it's not needed in the design.
+   *
+   * @extends Component
+   */
+  class TimeDivider extends Component$1 {
+    /**
+     * Create the component's DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-time-control vjs-time-divider'
+      }, {
+        // this element and its contents can be hidden from assistive techs since
+        // it is made extraneous by the announcement of the control text
+        // for the current time and duration displays
+        'aria-hidden': true
+      });
+      const div = super.createEl('div');
+      const span = super.createEl('span', {
+        textContent: '/'
+      });
+      div.appendChild(span);
+      el.appendChild(div);
+      return el;
+    }
+  }
+  Component$1.registerComponent('TimeDivider', TimeDivider);
+
+  /**
+   * @file remaining-time-display.js
+   */
+
+  /**
+   * Displays the time left in the video
+   *
+   * @extends Component
+   */
+  class RemainingTimeDisplay extends TimeDisplay {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, 'durationchange', e => this.updateContent(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-remaining-time';
+    }
+
+    /**
+     * Create the `Component`'s DOM element with the "minus" character prepend to the time
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl();
+      if (this.options_.displayNegative !== false) {
+        el.insertBefore(createEl('span', {}, {
+          'aria-hidden': true
+        }, '-'), this.contentEl_);
+      }
+      return el;
+    }
+
+    /**
+     * Update remaining time display.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` or `durationchange` event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     * @listens Player#durationchange
+     */
+    updateContent(event) {
+      if (typeof this.player_.duration() !== 'number') {
+        return;
+      }
+      let time;
+
+      // @deprecated We should only use remainingTimeDisplay
+      // as of video.js 7
+      if (this.player_.ended()) {
+        time = 0;
+      } else if (this.player_.remainingTimeDisplay) {
+        time = this.player_.remainingTimeDisplay();
+      } else {
+        time = this.player_.remainingTime();
+      }
+      this.updateTextNode_(time);
+    }
+  }
+
+  /**
+   * The text that is added to the `RemainingTimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  RemainingTimeDisplay.prototype.labelText_ = 'Remaining Time';
+
+  /**
+   * The text that should display over the `RemainingTimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  RemainingTimeDisplay.prototype.controlText_ = 'Remaining Time';
+  Component$1.registerComponent('RemainingTimeDisplay', RemainingTimeDisplay);
+
+  /**
+   * @file live-display.js
+   */
+
+  // TODO - Future make it click to snap to live
+
+  /**
+   * Displays the live indicator when duration is Infinity.
+   *
+   * @extends Component
+   */
+  class LiveDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.updateShowing();
+      this.on(this.player(), 'durationchange', e => this.updateShowing(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-live-control vjs-control'
+      });
+      this.contentEl_ = createEl('div', {
+        className: 'vjs-live-display'
+      }, {
+        'aria-live': 'off'
+      });
+      this.contentEl_.appendChild(createEl('span', {
+        className: 'vjs-control-text',
+        textContent: `${this.localize('Stream Type')}\u00a0`
+      }));
+      this.contentEl_.appendChild(document.createTextNode(this.localize('LIVE')));
+      el.appendChild(this.contentEl_);
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Check the duration to see if the LiveDisplay should be showing or not. Then show/hide
+     * it accordingly
+     *
+     * @param {Event} [event]
+     *        The {@link Player#durationchange} event that caused this function to run.
+     *
+     * @listens Player#durationchange
+     */
+    updateShowing(event) {
+      if (this.player().duration() === Infinity) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }
+  Component$1.registerComponent('LiveDisplay', LiveDisplay);
+
+  /**
+   * @file seek-to-live.js
+   */
+
+  /**
+   * Displays the live indicator when duration is Infinity.
+   *
+   * @extends Component
+   */
+  class SeekToLive extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.updateLiveEdgeStatus();
+      if (this.player_.liveTracker) {
+        this.updateLiveEdgeStatusHandler_ = e => this.updateLiveEdgeStatus(e);
+        this.on(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
+      }
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('button', {
+        className: 'vjs-seek-to-live-control vjs-control'
+      });
+      this.setIcon('circle', el);
+      this.textEl_ = createEl('span', {
+        className: 'vjs-seek-to-live-text',
+        textContent: this.localize('LIVE')
+      }, {
+        'aria-hidden': 'true'
+      });
+      el.appendChild(this.textEl_);
+      return el;
+    }
+
+    /**
+     * Update the state of this button if we are at the live edge
+     * or not
+     */
+    updateLiveEdgeStatus() {
+      // default to live edge
+      if (!this.player_.liveTracker || this.player_.liveTracker.atLiveEdge()) {
+        this.setAttribute('aria-disabled', true);
+        this.addClass('vjs-at-live-edge');
+        this.controlText('Seek to live, currently playing live');
+      } else {
+        this.setAttribute('aria-disabled', false);
+        this.removeClass('vjs-at-live-edge');
+        this.controlText('Seek to live, currently behind live');
+      }
+    }
+
+    /**
+     * On click bring us as near to the live point as possible.
+     * This requires that we wait for the next `live-seekable-change`
+     * event which will happen every segment length seconds.
+     */
+    handleClick() {
+      this.player_.liveTracker.seekToLiveEdge();
+    }
+
+    /**
+     * Dispose of the element and stop tracking
+     */
+    dispose() {
+      if (this.player_.liveTracker) {
+        this.off(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
+      }
+      this.textEl_ = null;
+      super.dispose();
+    }
+  }
+  /**
+   * The text that should display over the `SeekToLive`s control. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  SeekToLive.prototype.controlText_ = 'Seek to live, currently playing live';
+  Component$1.registerComponent('SeekToLive', SeekToLive);
+
+  /**
+   * @file num.js
+   * @module num
+   */
+
+  /**
+   * Keep a number between a min and a max value
+   *
+   * @param {number} number
+   *        The number to clamp
+   *
+   * @param {number} min
+   *        The minimum value
+   * @param {number} max
+   *        The maximum value
+   *
+   * @return {number}
+   *         the clamped number
+   */
+  function clamp(number, min, max) {
+    number = Number(number);
+    return Math.min(max, Math.max(min, isNaN(number) ? min : number));
+  }
+
+  var Num = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    clamp: clamp
+  });
+
+  /**
+   * @file slider.js
+   */
+
+  /**
+   * The base functionality for a slider. Can be vertical or horizontal.
+   * For instance the volume bar or the seek bar on a video is a slider.
+   *
+   * @extends Component
+   */
+  class Slider extends Component$1 {
+    /**
+    * Create an instance of this class
+    *
+    * @param { import('../player').default } player
+    *        The `Player` that this class should be attached to.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    */
+    constructor(player, options) {
+      super(player, options);
+      this.handleMouseDown_ = e => this.handleMouseDown(e);
+      this.handleMouseUp_ = e => this.handleMouseUp(e);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.handleClick_ = e => this.handleClick(e);
+      this.handleMouseMove_ = e => this.handleMouseMove(e);
+      this.update_ = e => this.update(e);
+
+      // Set property names to bar to match with the child Slider class is looking for
+      this.bar = this.getChild(this.options_.barName);
+
+      // Set a horizontal or vertical class on the slider depending on the slider type
+      this.vertical(!!this.options_.vertical);
+      this.enable();
+    }
+
+    /**
+     * Are controls are currently enabled for this slider or not.
+     *
+     * @return {boolean}
+     *         true if controls are enabled, false otherwise
+     */
+    enabled() {
+      return this.enabled_;
+    }
+
+    /**
+     * Enable controls for this slider if they are disabled
+     */
+    enable() {
+      if (this.enabled()) {
+        return;
+      }
+      this.on('mousedown', this.handleMouseDown_);
+      this.on('touchstart', this.handleMouseDown_);
+      this.on('keydown', this.handleKeyDown_);
+      this.on('click', this.handleClick_);
+
+      // TODO: deprecated, controlsvisible does not seem to be fired
+      this.on(this.player_, 'controlsvisible', this.update);
+      if (this.playerEvent) {
+        this.on(this.player_, this.playerEvent, this.update);
+      }
+      this.removeClass('disabled');
+      this.setAttribute('tabindex', 0);
+      this.enabled_ = true;
+    }
+
+    /**
+     * Disable controls for this slider if they are enabled
+     */
+    disable() {
+      if (!this.enabled()) {
+        return;
+      }
+      const doc = this.bar.el_.ownerDocument;
+      this.off('mousedown', this.handleMouseDown_);
+      this.off('touchstart', this.handleMouseDown_);
+      this.off('keydown', this.handleKeyDown_);
+      this.off('click', this.handleClick_);
+      this.off(this.player_, 'controlsvisible', this.update_);
+      this.off(doc, 'mousemove', this.handleMouseMove_);
+      this.off(doc, 'mouseup', this.handleMouseUp_);
+      this.off(doc, 'touchmove', this.handleMouseMove_);
+      this.off(doc, 'touchend', this.handleMouseUp_);
+      this.removeAttribute('tabindex');
+      this.addClass('disabled');
+      if (this.playerEvent) {
+        this.off(this.player_, this.playerEvent, this.update);
+      }
+      this.enabled_ = false;
+    }
+
+    /**
+     * Create the `Slider`s DOM element.
+     *
+     * @param {string} type
+     *        Type of element to create.
+     *
+     * @param {Object} [props={}]
+     *        List of properties in Object form.
+     *
+     * @param {Object} [attributes={}]
+     *        list of attributes in Object form.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(type, props = {}, attributes = {}) {
+      // Add the slider element class to all sub classes
+      props.className = props.className + ' vjs-slider';
+      props = Object.assign({
+        tabIndex: 0
+      }, props);
+      attributes = Object.assign({
+        'role': 'slider',
+        'aria-valuenow': 0,
+        'aria-valuemin': 0,
+        'aria-valuemax': 100
+      }, attributes);
+      return super.createEl(type, props, attributes);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `Slider`.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     * @fires Slider#slideractive
+     */
+    handleMouseDown(event) {
+      const doc = this.bar.el_.ownerDocument;
+      if (event.type === 'mousedown') {
+        event.preventDefault();
+      }
+      // Do not call preventDefault() on touchstart in Chrome
+      // to avoid console warnings. Use a 'touch-action: none' style
+      // instead to prevent unintended scrolling.
+      // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+      if (event.type === 'touchstart' && !IS_CHROME) {
+        event.preventDefault();
+      }
+      blockTextSelection();
+      this.addClass('vjs-sliding');
+      /**
+       * Triggered when the slider is in an active state
+       *
+       * @event Slider#slideractive
+       * @type {MouseEvent}
+       */
+      this.trigger('slideractive');
+      this.on(doc, 'mousemove', this.handleMouseMove_);
+      this.on(doc, 'mouseup', this.handleMouseUp_);
+      this.on(doc, 'touchmove', this.handleMouseMove_);
+      this.on(doc, 'touchend', this.handleMouseUp_);
+      this.handleMouseMove(event, true);
+    }
+
+    /**
+     * Handle the `mousemove`, `touchmove`, and `mousedown` events on this `Slider`.
+     * The `mousemove` and `touchmove` events will only only trigger this function during
+     * `mousedown` and `touchstart`. This is due to {@link Slider#handleMouseDown} and
+     * {@link Slider#handleMouseUp}.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown`, `mousemove`, `touchstart`, or `touchmove` event that triggered
+     *        this function
+     * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false.
+     *
+     * @listens mousemove
+     * @listens touchmove
+     */
+    handleMouseMove(event) {}
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `Slider`.
+     *
+     * @param {MouseEvent} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     * @fires Slider#sliderinactive
+     */
+    handleMouseUp(event) {
+      const doc = this.bar.el_.ownerDocument;
+      unblockTextSelection();
+      this.removeClass('vjs-sliding');
+      /**
+       * Triggered when the slider is no longer in an active state.
+       *
+       * @event Slider#sliderinactive
+       * @type {Event}
+       */
+      this.trigger('sliderinactive');
+      this.off(doc, 'mousemove', this.handleMouseMove_);
+      this.off(doc, 'mouseup', this.handleMouseUp_);
+      this.off(doc, 'touchmove', this.handleMouseMove_);
+      this.off(doc, 'touchend', this.handleMouseUp_);
+      this.update();
+    }
+
+    /**
+     * Update the progress bar of the `Slider`.
+     *
+     * @return {number}
+     *          The percentage of progress the progress bar represents as a
+     *          number from 0 to 1.
+     */
+    update() {
+      // In VolumeBar init we have a setTimeout for update that pops and update
+      // to the end of the execution stack. The player is destroyed before then
+      // update will cause an error
+      // If there's no bar...
+      if (!this.el_ || !this.bar) {
+        return;
+      }
+
+      // clamp progress between 0 and 1
+      // and only round to four decimal places, as we round to two below
+      const progress = this.getProgress();
+      if (progress === this.progress_) {
+        return progress;
+      }
+      this.progress_ = progress;
+      this.requestNamedAnimationFrame('Slider#update', () => {
+        // Set the new bar width or height
+        const sizeKey = this.vertical() ? 'height' : 'width';
+
+        // Convert to a percentage for css value
+        this.bar.el().style[sizeKey] = (progress * 100).toFixed(2) + '%';
+      });
+      return progress;
+    }
+
+    /**
+     * Get the percentage of the bar that should be filled
+     * but clamped and rounded.
+     *
+     * @return {number}
+     *         percentage filled that the slider is
+     */
+    getProgress() {
+      return Number(clamp(this.getPercent(), 0, 1).toFixed(4));
+    }
+
+    /**
+     * Calculate distance for slider
+     *
+     * @param {Event} event
+     *        The event that caused this function to run.
+     *
+     * @return {number}
+     *         The current position of the Slider.
+     *         - position.x for vertical `Slider`s
+     *         - position.y for horizontal `Slider`s
+     */
+    calculateDistance(event) {
+      const position = getPointerPosition(this.el_, event);
+      if (this.vertical()) {
+        return position.y;
+      }
+      return position.x;
+    }
+
+    /**
+     * Handle a `keydown` event on the `Slider`. Watches for left, right, up, and down
+     * arrow keys. This function will only be called when the slider has focus. See
+     * {@link Slider#handleFocus} and {@link Slider#handleBlur}.
+     *
+     * @param {KeyboardEvent} event
+     *        the `keydown` event that caused this function to run.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Left and Down Arrows
+      if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepBack();
+
+        // Up and Right Arrows
+      } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepForward();
+      } else {
+        // Pass keydown handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Listener for click events on slider, used to prevent clicks
+     *   from bubbling up to parent elements like button menus.
+     *
+     * @param {Object} event
+     *        Event that caused this object to run
+     */
+    handleClick(event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+
+    /**
+     * Get/set if slider is horizontal for vertical
+     *
+     * @param {boolean} [bool]
+     *        - true if slider is vertical,
+     *        - false is horizontal
+     *
+     * @return {boolean}
+     *         - true if slider is vertical, and getting
+     *         - false if the slider is horizontal, and getting
+     */
+    vertical(bool) {
+      if (bool === undefined) {
+        return this.vertical_ || false;
+      }
+      this.vertical_ = !!bool;
+      if (this.vertical_) {
+        this.addClass('vjs-slider-vertical');
+      } else {
+        this.addClass('vjs-slider-horizontal');
+      }
+    }
+  }
+  Component$1.registerComponent('Slider', Slider);
+
+  /**
+   * @file load-progress-bar.js
+   */
+
+  // get the percent width of a time compared to the total end
+  const percentify = (time, end) => clamp(time / end * 100, 0, 100).toFixed(2) + '%';
+
+  /**
+   * Shows loading progress
+   *
+   * @extends Component
+   */
+  class LoadProgressBar extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.partEls_ = [];
+      this.on(player, 'progress', e => this.update(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-load-progress'
+      });
+      const wrapper = createEl('span', {
+        className: 'vjs-control-text'
+      });
+      const loadedText = createEl('span', {
+        textContent: this.localize('Loaded')
+      });
+      const separator = document.createTextNode(': ');
+      this.percentageEl_ = createEl('span', {
+        className: 'vjs-control-text-loaded-percentage',
+        textContent: '0%'
+      });
+      el.appendChild(wrapper);
+      wrapper.appendChild(loadedText);
+      wrapper.appendChild(separator);
+      wrapper.appendChild(this.percentageEl_);
+      return el;
+    }
+    dispose() {
+      this.partEls_ = null;
+      this.percentageEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Update progress bar
+     *
+     * @param {Event} [event]
+     *        The `progress` event that caused this function to run.
+     *
+     * @listens Player#progress
+     */
+    update(event) {
+      this.requestNamedAnimationFrame('LoadProgressBar#update', () => {
+        const liveTracker = this.player_.liveTracker;
+        const buffered = this.player_.buffered();
+        const duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
+        const bufferedEnd = this.player_.bufferedEnd();
+        const children = this.partEls_;
+        const percent = percentify(bufferedEnd, duration);
+        if (this.percent_ !== percent) {
+          // update the width of the progress bar
+          this.el_.style.width = percent;
+          // update the control-text
+          textContent(this.percentageEl_, percent);
+          this.percent_ = percent;
+        }
+
+        // add child elements to represent the individual buffered time ranges
+        for (let i = 0; i < buffered.length; i++) {
+          const start = buffered.start(i);
+          const end = buffered.end(i);
+          let part = children[i];
+          if (!part) {
+            part = this.el_.appendChild(createEl());
+            children[i] = part;
+          }
+
+          //  only update if changed
+          if (part.dataset.start === start && part.dataset.end === end) {
+            continue;
+          }
+          part.dataset.start = start;
+          part.dataset.end = end;
+
+          // set the percent based on the width of the progress bar (bufferedEnd)
+          part.style.left = percentify(start, bufferedEnd);
+          part.style.width = percentify(end - start, bufferedEnd);
+        }
+
+        // remove unused buffered range elements
+        for (let i = children.length; i > buffered.length; i--) {
+          this.el_.removeChild(children[i - 1]);
+        }
+        children.length = buffered.length;
+      });
+    }
+  }
+  Component$1.registerComponent('LoadProgressBar', LoadProgressBar);
+
+  /**
+   * @file time-tooltip.js
+   */
+
+  /**
+   * Time tooltips display a time above the progress bar.
+   *
+   * @extends Component
+   */
+  class TimeTooltip extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the time tooltip DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-time-tooltip'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Updates the position of the time tooltip relative to the `SeekBar`.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint, content) {
+      const tooltipRect = findPosition(this.el_);
+      const playerRect = getBoundingClientRect(this.player_.el());
+      const seekBarPointPx = seekBarRect.width * seekBarPoint;
+
+      // do nothing if either rect isn't available
+      // for example, if the player isn't in the DOM for testing
+      if (!playerRect || !tooltipRect) {
+        return;
+      }
+
+      // This is the space left of the `seekBarPoint` available within the bounds
+      // of the player. We calculate any gap between the left edge of the player
+      // and the left edge of the `SeekBar` and add the number of pixels in the
+      // `SeekBar` before hitting the `seekBarPoint`
+      let spaceLeftOfPoint = seekBarRect.left - playerRect.left + seekBarPointPx;
+
+      // This is the space right of the `seekBarPoint` available within the bounds
+      // of the player. We calculate the number of pixels from the `seekBarPoint`
+      // to the right edge of the `SeekBar` and add to that any gap between the
+      // right edge of the `SeekBar` and the player.
+      let spaceRightOfPoint = seekBarRect.width - seekBarPointPx + (playerRect.right - seekBarRect.right);
+
+      // spaceRightOfPoint is always NaN for mouse time display
+      // because the seekbarRect does not have a right property. This causes
+      // the mouse tool tip to be truncated when it's close to the right edge of the player.
+      // In such cases, we ignore the `playerRect.right - seekBarRect.right` value when calculating.
+      // For the sake of consistency, we ignore seekBarRect.left - playerRect.left for the left edge.
+      if (!spaceRightOfPoint) {
+        spaceRightOfPoint = seekBarRect.width - seekBarPointPx;
+        spaceLeftOfPoint = seekBarPointPx;
+      }
+      // This is the number of pixels by which the tooltip will need to be pulled
+      // further to the right to center it over the `seekBarPoint`.
+      let pullTooltipBy = tooltipRect.width / 2;
+
+      // Adjust the `pullTooltipBy` distance to the left or right depending on
+      // the results of the space calculations above.
+      if (spaceLeftOfPoint < pullTooltipBy) {
+        pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
+      } else if (spaceRightOfPoint < pullTooltipBy) {
+        pullTooltipBy = spaceRightOfPoint;
+      }
+
+      // Due to the imprecision of decimal/ratio based calculations and varying
+      // rounding behaviors, there are cases where the spacing adjustment is off
+      // by a pixel or two. This adds insurance to these calculations.
+      if (pullTooltipBy < 0) {
+        pullTooltipBy = 0;
+      } else if (pullTooltipBy > tooltipRect.width) {
+        pullTooltipBy = tooltipRect.width;
+      }
+
+      // prevent small width fluctuations within 0.4px from
+      // changing the value below.
+      // This really helps for live to prevent the play
+      // progress time tooltip from jittering
+      pullTooltipBy = Math.round(pullTooltipBy);
+      this.el_.style.right = `-${pullTooltipBy}px`;
+      this.write(content);
+    }
+
+    /**
+     * Write the time to the tooltip DOM element.
+     *
+     * @param {string} content
+     *        The formatted time for the tooltip.
+     */
+    write(content) {
+      textContent(this.el_, content);
+    }
+
+    /**
+     * Updates the position of the time tooltip relative to the `SeekBar`.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     *
+     * @param {number} time
+     *        The time to update the tooltip to, not used during live playback
+     *
+     * @param {Function} cb
+     *        A function that will be called during the request animation frame
+     *        for tooltips that need to do additional animations from the default
+     */
+    updateTime(seekBarRect, seekBarPoint, time, cb) {
+      this.requestNamedAnimationFrame('TimeTooltip#updateTime', () => {
+        let content;
+        const duration = this.player_.duration();
+        if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+          const liveWindow = this.player_.liveTracker.liveWindow();
+          const secondsBehind = liveWindow - seekBarPoint * liveWindow;
+          content = (secondsBehind < 1 ? '' : '-') + formatTime(secondsBehind, liveWindow);
+        } else {
+          content = formatTime(time, duration);
+        }
+        this.update(seekBarRect, seekBarPoint, content);
+        if (cb) {
+          cb();
+        }
+      });
+    }
+  }
+  Component$1.registerComponent('TimeTooltip', TimeTooltip);
+
+  /**
+   * @file play-progress-bar.js
+   */
+
+  /**
+   * Used by {@link SeekBar} to display media playback progress as part of the
+   * {@link ProgressControl}.
+   *
+   * @extends Component
+   */
+  class PlayProgressBar extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('circle');
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-play-progress vjs-slider-bar'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Enqueues updates to its own DOM as well as the DOM of its
+     * {@link TimeTooltip} child.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint) {
+      const timeTooltip = this.getChild('timeTooltip');
+      if (!timeTooltip) {
+        return;
+      }
+      const time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+      timeTooltip.updateTime(seekBarRect, seekBarPoint, time);
+    }
+  }
+
+  /**
+   * Default options for {@link PlayProgressBar}.
+   *
+   * @type {Object}
+   * @private
+   */
+  PlayProgressBar.prototype.options_ = {
+    children: []
+  };
+
+  // Time tooltips should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    PlayProgressBar.prototype.options_.children.push('timeTooltip');
+  }
+  Component$1.registerComponent('PlayProgressBar', PlayProgressBar);
+
+  /**
+   * @file mouse-time-display.js
+   */
+
+  /**
+   * The {@link MouseTimeDisplay} component tracks mouse movement over the
+   * {@link ProgressControl}. It displays an indicator and a {@link TimeTooltip}
+   * indicating the time which is represented by a given point in the
+   * {@link ProgressControl}.
+   *
+   * @extends Component
+   */
+  class MouseTimeDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-mouse-display'
+      });
+    }
+
+    /**
+     * Enqueues updates to its own DOM as well as the DOM of its
+     * {@link TimeTooltip} child.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint) {
+      const time = seekBarPoint * this.player_.duration();
+      this.getChild('timeTooltip').updateTime(seekBarRect, seekBarPoint, time, () => {
+        this.el_.style.left = `${seekBarRect.width * seekBarPoint}px`;
+      });
+    }
+  }
+
+  /**
+   * Default options for `MouseTimeDisplay`
+   *
+   * @type {Object}
+   * @private
+   */
+  MouseTimeDisplay.prototype.options_ = {
+    children: ['timeTooltip']
+  };
+  Component$1.registerComponent('MouseTimeDisplay', MouseTimeDisplay);
+
+  /**
+   * @file seek-bar.js
+   */
+
+  // The number of seconds the `step*` functions move the timeline.
+  const STEP_SECONDS = 5;
+
+  // The multiplier of STEP_SECONDS that PgUp/PgDown move the timeline.
+  const PAGE_KEY_MULTIPLIER = 12;
+
+  /**
+   * Seek bar and container for the progress bars. Uses {@link PlayProgressBar}
+   * as its `bar`.
+   *
+   * @extends Slider
+   */
+  class SeekBar extends Slider {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setEventHandlers_();
+    }
+
+    /**
+     * Sets the event handlers
+     *
+     * @private
+     */
+    setEventHandlers_() {
+      this.update_ = bind_(this, this.update);
+      this.update = throttle(this.update_, UPDATE_REFRESH_INTERVAL);
+      this.on(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
+      if (this.player_.liveTracker) {
+        this.on(this.player_.liveTracker, 'liveedgechange', this.update);
+      }
+
+      // when playing, let's ensure we smoothly update the play progress bar
+      // via an interval
+      this.updateInterval = null;
+      this.enableIntervalHandler_ = e => this.enableInterval_(e);
+      this.disableIntervalHandler_ = e => this.disableInterval_(e);
+      this.on(this.player_, ['playing'], this.enableIntervalHandler_);
+      this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
+
+      // we don't need to update the play progress if the document is hidden,
+      // also, this causes the CPU to spike and eventually crash the page on IE11.
+      if ('hidden' in document && 'visibilityState' in document) {
+        this.on(document, 'visibilitychange', this.toggleVisibility_);
+      }
+    }
+    toggleVisibility_(e) {
+      if (document.visibilityState === 'hidden') {
+        this.cancelNamedAnimationFrame('SeekBar#update');
+        this.cancelNamedAnimationFrame('Slider#update');
+        this.disableInterval_(e);
+      } else {
+        if (!this.player_.ended() && !this.player_.paused()) {
+          this.enableInterval_();
+        }
+
+        // we just switched back to the page and someone may be looking, so, update ASAP
+        this.update();
+      }
+    }
+    enableInterval_() {
+      if (this.updateInterval) {
+        return;
+      }
+      this.updateInterval = this.setInterval(this.update, UPDATE_REFRESH_INTERVAL);
+    }
+    disableInterval_(e) {
+      if (this.player_.liveTracker && this.player_.liveTracker.isLive() && e && e.type !== 'ended') {
+        return;
+      }
+      if (!this.updateInterval) {
+        return;
+      }
+      this.clearInterval(this.updateInterval);
+      this.updateInterval = null;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-progress-holder'
+      }, {
+        'aria-label': this.localize('Progress Bar')
+      });
+    }
+
+    /**
+     * This function updates the play progress bar and accessibility
+     * attributes to whatever is passed in.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` or `ended` event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     *
+     * @return {number}
+     *          The current percent at a number from 0-1
+     */
+    update(event) {
+      // ignore updates while the tab is hidden
+      if (document.visibilityState === 'hidden') {
+        return;
+      }
+      const percent = super.update();
+      this.requestNamedAnimationFrame('SeekBar#update', () => {
+        const currentTime = this.player_.ended() ? this.player_.duration() : this.getCurrentTime_();
+        const liveTracker = this.player_.liveTracker;
+        let duration = this.player_.duration();
+        if (liveTracker && liveTracker.isLive()) {
+          duration = this.player_.liveTracker.liveCurrentTime();
+        }
+        if (this.percent_ !== percent) {
+          // machine readable value of progress bar (percentage complete)
+          this.el_.setAttribute('aria-valuenow', (percent * 100).toFixed(2));
+          this.percent_ = percent;
+        }
+        if (this.currentTime_ !== currentTime || this.duration_ !== duration) {
+          // human readable value of progress bar (time complete)
+          this.el_.setAttribute('aria-valuetext', this.localize('progress bar timing: currentTime={1} duration={2}', [formatTime(currentTime, duration), formatTime(duration, duration)], '{1} of {2}'));
+          this.currentTime_ = currentTime;
+          this.duration_ = duration;
+        }
+
+        // update the progress bar time tooltip with the current time
+        if (this.bar) {
+          this.bar.update(getBoundingClientRect(this.el()), this.getProgress());
+        }
+      });
+      return percent;
+    }
+
+    /**
+     * Prevent liveThreshold from causing seeks to seem like they
+     * are not happening from a user perspective.
+     *
+     * @param {number} ct
+     *        current time to seek to
+     */
+    userSeek_(ct) {
+      if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+        this.player_.liveTracker.nextSeekedFromUser();
+      }
+      this.player_.currentTime(ct);
+    }
+
+    /**
+     * Get the value of current time but allows for smooth scrubbing,
+     * when player can't keep up.
+     *
+     * @return {number}
+     *         The current time value to display
+     *
+     * @private
+     */
+    getCurrentTime_() {
+      return this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+    }
+
+    /**
+     * Get the percentage of media played so far.
+     *
+     * @return {number}
+     *         The percentage of media played so far (0 to 1).
+     */
+    getPercent() {
+      const currentTime = this.getCurrentTime_();
+      let percent;
+      const liveTracker = this.player_.liveTracker;
+      if (liveTracker && liveTracker.isLive()) {
+        percent = (currentTime - liveTracker.seekableStart()) / liveTracker.liveWindow();
+
+        // prevent the percent from changing at the live edge
+        if (liveTracker.atLiveEdge()) {
+          percent = 1;
+        }
+      } else {
+        percent = currentTime / this.player_.duration();
+      }
+      return percent;
+    }
+
+    /**
+     * Handle mouse down on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mousedown` event that caused this to run.
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+
+      // Stop event propagation to prevent double fire in progress-control.js
+      event.stopPropagation();
+      this.videoWasPlaying = !this.player_.paused();
+      this.player_.pause();
+      super.handleMouseDown(event);
+    }
+
+    /**
+     * Handle mouse move on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mousemove` event that caused this to run.
+     * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false
+     *
+     * @listens mousemove
+     */
+    handleMouseMove(event, mouseDown = false) {
+      if (!isSingleLeftClick(event) || isNaN(this.player_.duration())) {
+        return;
+      }
+      if (!mouseDown && !this.player_.scrubbing()) {
+        this.player_.scrubbing(true);
+      }
+      let newTime;
+      const distance = this.calculateDistance(event);
+      const liveTracker = this.player_.liveTracker;
+      if (!liveTracker || !liveTracker.isLive()) {
+        newTime = distance * this.player_.duration();
+
+        // Don't let video end while scrubbing.
+        if (newTime === this.player_.duration()) {
+          newTime = newTime - 0.1;
+        }
+      } else {
+        if (distance >= 0.99) {
+          liveTracker.seekToLiveEdge();
+          return;
+        }
+        const seekableStart = liveTracker.seekableStart();
+        const seekableEnd = liveTracker.liveCurrentTime();
+        newTime = seekableStart + distance * liveTracker.liveWindow();
+
+        // Don't let video end while scrubbing.
+        if (newTime >= seekableEnd) {
+          newTime = seekableEnd;
+        }
+
+        // Compensate for precision differences so that currentTime is not less
+        // than seekable start
+        if (newTime <= seekableStart) {
+          newTime = seekableStart + 0.1;
+        }
+
+        // On android seekableEnd can be Infinity sometimes,
+        // this will cause newTime to be Infinity, which is
+        // not a valid currentTime.
+        if (newTime === Infinity) {
+          return;
+        }
+      }
+
+      // Set new time (tell player to seek to new time)
+      this.userSeek_(newTime);
+      if (this.player_.options_.enableSmoothSeeking) {
+        this.update();
+      }
+    }
+    enable() {
+      super.enable();
+      const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+      if (!mouseTimeDisplay) {
+        return;
+      }
+      mouseTimeDisplay.show();
+    }
+    disable() {
+      super.disable();
+      const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+      if (!mouseTimeDisplay) {
+        return;
+      }
+      mouseTimeDisplay.hide();
+    }
+
+    /**
+     * Handle mouse up on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mouseup` event that caused this to run.
+     *
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      super.handleMouseUp(event);
+
+      // Stop event propagation to prevent double fire in progress-control.js
+      if (event) {
+        event.stopPropagation();
+      }
+      this.player_.scrubbing(false);
+
+      /**
+       * Trigger timeupdate because we're done seeking and the time has changed.
+       * This is particularly useful for if the player is paused to time the time displays.
+       *
+       * @event Tech#timeupdate
+       * @type {Event}
+       */
+      this.player_.trigger({
+        type: 'timeupdate',
+        target: this,
+        manuallyTriggered: true
+      });
+      if (this.videoWasPlaying) {
+        silencePromise(this.player_.play());
+      } else {
+        // We're done seeking and the time has changed.
+        // If the player is paused, make sure we display the correct time on the seek bar.
+        this.update_();
+      }
+    }
+
+    /**
+     * Move more quickly fast forward for keyboard-only users
+     */
+    stepForward() {
+      this.userSeek_(this.player_.currentTime() + STEP_SECONDS);
+    }
+
+    /**
+     * Move more quickly rewind for keyboard-only users
+     */
+    stepBack() {
+      this.userSeek_(this.player_.currentTime() - STEP_SECONDS);
+    }
+
+    /**
+     * Toggles the playback state of the player
+     * This gets called when enter or space is used on the seekbar
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called
+     *
+     */
+    handleAction(event) {
+      if (this.player_.paused()) {
+        this.player_.play();
+      } else {
+        this.player_.pause();
+      }
+    }
+
+    /**
+     * Called when this SeekBar has focus and a key gets pressed down.
+     * Supports the following keys:
+     *
+     *   Space or Enter key fire a click event
+     *   Home key moves to start of the timeline
+     *   End key moves to end of the timeline
+     *   Digit "0" through "9" keys move to 0%, 10% ... 80%, 90% of the timeline
+     *   PageDown key moves back a larger step than ArrowDown
+     *   PageUp key moves forward a large step
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      const liveTracker = this.player_.liveTracker;
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.handleAction(event);
+      } else if (keycode.isEventKey(event, 'Home')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(0);
+      } else if (keycode.isEventKey(event, 'End')) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (liveTracker && liveTracker.isLive()) {
+          this.userSeek_(liveTracker.liveCurrentTime());
+        } else {
+          this.userSeek_(this.player_.duration());
+        }
+      } else if (/^[0-9]$/.test(keycode(event))) {
+        event.preventDefault();
+        event.stopPropagation();
+        const gotoFraction = (keycode.codes[keycode(event)] - keycode.codes['0']) * 10.0 / 100.0;
+        if (liveTracker && liveTracker.isLive()) {
+          this.userSeek_(liveTracker.seekableStart() + liveTracker.liveWindow() * gotoFraction);
+        } else {
+          this.userSeek_(this.player_.duration() * gotoFraction);
+        }
+      } else if (keycode.isEventKey(event, 'PgDn')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(this.player_.currentTime() - STEP_SECONDS * PAGE_KEY_MULTIPLIER);
+      } else if (keycode.isEventKey(event, 'PgUp')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(this.player_.currentTime() + STEP_SECONDS * PAGE_KEY_MULTIPLIER);
+      } else {
+        // Pass keydown handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+    dispose() {
+      this.disableInterval_();
+      this.off(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
+      if (this.player_.liveTracker) {
+        this.off(this.player_.liveTracker, 'liveedgechange', this.update);
+      }
+      this.off(this.player_, ['playing'], this.enableIntervalHandler_);
+      this.off(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
+
+      // we don't need to update the play progress if the document is hidden,
+      // also, this causes the CPU to spike and eventually crash the page on IE11.
+      if ('hidden' in document && 'visibilityState' in document) {
+        this.off(document, 'visibilitychange', this.toggleVisibility_);
+      }
+      super.dispose();
+    }
+  }
+
+  /**
+   * Default options for the `SeekBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  SeekBar.prototype.options_ = {
+    children: ['loadProgressBar', 'playProgressBar'],
+    barName: 'playProgressBar'
+  };
+
+  // MouseTimeDisplay tooltips should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    SeekBar.prototype.options_.children.splice(1, 0, 'mouseTimeDisplay');
+  }
+  Component$1.registerComponent('SeekBar', SeekBar);
+
+  /**
+   * @file progress-control.js
+   */
+
+  /**
+   * The Progress Control component contains the seek bar, load progress,
+   * and play progress.
+   *
+   * @extends Component
+   */
+  class ProgressControl extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.handleMouseMove = throttle(bind_(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+      this.throttledHandleMouseSeek = throttle(bind_(this, this.handleMouseSeek), UPDATE_REFRESH_INTERVAL);
+      this.handleMouseUpHandler_ = e => this.handleMouseUp(e);
+      this.handleMouseDownHandler_ = e => this.handleMouseDown(e);
+      this.enable();
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-progress-control vjs-control'
+      });
+    }
+
+    /**
+     * When the mouse moves over the `ProgressControl`, the pointer position
+     * gets passed down to the `MouseTimeDisplay` component.
+     *
+     * @param {Event} event
+     *        The `mousemove` event that caused this function to run.
+     *
+     * @listen mousemove
+     */
+    handleMouseMove(event) {
+      const seekBar = this.getChild('seekBar');
+      if (!seekBar) {
+        return;
+      }
+      const playProgressBar = seekBar.getChild('playProgressBar');
+      const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
+      if (!playProgressBar && !mouseTimeDisplay) {
+        return;
+      }
+      const seekBarEl = seekBar.el();
+      const seekBarRect = findPosition(seekBarEl);
+      let seekBarPoint = getPointerPosition(seekBarEl, event).x;
+
+      // The default skin has a gap on either side of the `SeekBar`. This means
+      // that it's possible to trigger this behavior outside the boundaries of
+      // the `SeekBar`. This ensures we stay within it at all times.
+      seekBarPoint = clamp(seekBarPoint, 0, 1);
+      if (mouseTimeDisplay) {
+        mouseTimeDisplay.update(seekBarRect, seekBarPoint);
+      }
+      if (playProgressBar) {
+        playProgressBar.update(seekBarRect, seekBar.getProgress());
+      }
+    }
+
+    /**
+     * A throttled version of the {@link ProgressControl#handleMouseSeek} listener.
+     *
+     * @method ProgressControl#throttledHandleMouseSeek
+     * @param {Event} event
+     *        The `mousemove` event that caused this function to run.
+     *
+     * @listen mousemove
+     * @listen touchmove
+     */
+
+    /**
+     * Handle `mousemove` or `touchmove` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousemove
+     * @listens touchmove
+     */
+    handleMouseSeek(event) {
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseMove(event);
+      }
+    }
+
+    /**
+     * Are controls are currently enabled for this progress control.
+     *
+     * @return {boolean}
+     *         true if controls are enabled, false otherwise
+     */
+    enabled() {
+      return this.enabled_;
+    }
+
+    /**
+     * Disable all controls on the progress control and its children
+     */
+    disable() {
+      this.children().forEach(child => child.disable && child.disable());
+      if (!this.enabled()) {
+        return;
+      }
+      this.off(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
+      this.off(this.el_, 'mousemove', this.handleMouseMove);
+      this.removeListenersAddedOnMousedownAndTouchstart();
+      this.addClass('disabled');
+      this.enabled_ = false;
+
+      // Restore normal playback state if controls are disabled while scrubbing
+      if (this.player_.scrubbing()) {
+        const seekBar = this.getChild('seekBar');
+        this.player_.scrubbing(false);
+        if (seekBar.videoWasPlaying) {
+          silencePromise(this.player_.play());
+        }
+      }
+    }
+
+    /**
+     * Enable all controls on the progress control and its children
+     */
+    enable() {
+      this.children().forEach(child => child.enable && child.enable());
+      if (this.enabled()) {
+        return;
+      }
+      this.on(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
+      this.on(this.el_, 'mousemove', this.handleMouseMove);
+      this.removeClass('disabled');
+      this.enabled_ = true;
+    }
+
+    /**
+     * Cleanup listeners after the user finishes interacting with the progress controls
+     */
+    removeListenersAddedOnMousedownAndTouchstart() {
+      const doc = this.el_.ownerDocument;
+      this.off(doc, 'mousemove', this.throttledHandleMouseSeek);
+      this.off(doc, 'touchmove', this.throttledHandleMouseSeek);
+      this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.off(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseDown(event) {
+      const doc = this.el_.ownerDocument;
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseDown(event);
+      }
+      this.on(doc, 'mousemove', this.throttledHandleMouseSeek);
+      this.on(doc, 'touchmove', this.throttledHandleMouseSeek);
+      this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.on(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseUp(event);
+      }
+      this.removeListenersAddedOnMousedownAndTouchstart();
+    }
+  }
+
+  /**
+   * Default options for `ProgressControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  ProgressControl.prototype.options_ = {
+    children: ['seekBar']
+  };
+  Component$1.registerComponent('ProgressControl', ProgressControl);
+
+  /**
+   * @file picture-in-picture-toggle.js
+   */
+
+  /**
+   * Toggle Picture-in-Picture mode
+   *
+   * @extends Button
+   */
+  class PictureInPictureToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @listens Player#enterpictureinpicture
+     * @listens Player#leavepictureinpicture
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('picture-in-picture-enter');
+      this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], e => this.handlePictureInPictureChange(e));
+      this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], e => this.handlePictureInPictureEnabledChange(e));
+      this.on(player, ['loadedmetadata', 'audioonlymodechange', 'audiopostermodechange'], () => this.handlePictureInPictureAudioModeChange());
+
+      // TODO: Deactivate button on player emptied event.
+      this.disable();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-picture-in-picture-control vjs-hidden ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Displays or hides the button depending on the audio mode detection.
+     * Exits picture-in-picture if it is enabled when switching to audio mode.
+     */
+    handlePictureInPictureAudioModeChange() {
+      // This audio detection will not detect HLS or DASH audio-only streams because there was no reliable way to detect them at the time
+      const isSourceAudio = this.player_.currentType().substring(0, 5) === 'audio';
+      const isAudioMode = isSourceAudio || this.player_.audioPosterMode() || this.player_.audioOnlyMode();
+      if (!isAudioMode) {
+        this.show();
+        return;
+      }
+      if (this.player_.isInPictureInPicture()) {
+        this.player_.exitPictureInPicture();
+      }
+      this.hide();
+    }
+
+    /**
+     * Enables or disables button based on availability of a Picture-In-Picture mode.
+     *
+     * Enabled if
+     * - `player.options().enableDocumentPictureInPicture` is true and
+     *   window.documentPictureInPicture is available; or
+     * - `player.disablePictureInPicture()` is false and
+     *   element.requestPictureInPicture is available
+     */
+    handlePictureInPictureEnabledChange() {
+      if (document.pictureInPictureEnabled && this.player_.disablePictureInPicture() === false || this.player_.options_.enableDocumentPictureInPicture && 'documentPictureInPicture' in window) {
+        this.enable();
+      } else {
+        this.disable();
+      }
+    }
+
+    /**
+     * Handles enterpictureinpicture and leavepictureinpicture on the player and change control text accordingly.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#enterpictureinpicture} or {@link Player#leavepictureinpicture} event that caused this function to be
+     *        called.
+     *
+     * @listens Player#enterpictureinpicture
+     * @listens Player#leavepictureinpicture
+     */
+    handlePictureInPictureChange(event) {
+      if (this.player_.isInPictureInPicture()) {
+        this.setIcon('picture-in-picture-exit');
+        this.controlText('Exit Picture-in-Picture');
+      } else {
+        this.setIcon('picture-in-picture-enter');
+        this.controlText('Picture-in-Picture');
+      }
+      this.handlePictureInPictureEnabledChange();
+    }
+
+    /**
+     * This gets called when an `PictureInPictureToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (!this.player_.isInPictureInPicture()) {
+        this.player_.requestPictureInPicture();
+      } else {
+        this.player_.exitPictureInPicture();
+      }
+    }
+
+    /**
+     * Show the `Component`s element if it is hidden by removing the
+     * 'vjs-hidden' class name from it only in browsers that support the Picture-in-Picture API.
+     */
+    show() {
+      // Does not allow to display the pictureInPictureToggle in browsers that do not support the Picture-in-Picture API, e.g. Firefox.
+      if (typeof document.exitPictureInPicture !== 'function') {
+        return;
+      }
+      super.show();
+    }
+  }
+
+  /**
+   * The text that should display over the `PictureInPictureToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PictureInPictureToggle.prototype.controlText_ = 'Picture-in-Picture';
+  Component$1.registerComponent('PictureInPictureToggle', PictureInPictureToggle);
+
+  /**
+   * @file fullscreen-toggle.js
+   */
+
+  /**
+   * Toggle fullscreen video
+   *
+   * @extends Button
+   */
+  class FullscreenToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('fullscreen-enter');
+      this.on(player, 'fullscreenchange', e => this.handleFullscreenChange(e));
+      if (document[player.fsApi_.fullscreenEnabled] === false) {
+        this.disable();
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-fullscreen-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Handles fullscreenchange on the player and change control text accordingly.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#fullscreenchange} event that caused this function to be
+     *        called.
+     *
+     * @listens Player#fullscreenchange
+     */
+    handleFullscreenChange(event) {
+      if (this.player_.isFullscreen()) {
+        this.controlText('Exit Fullscreen');
+        this.setIcon('fullscreen-exit');
+      } else {
+        this.controlText('Fullscreen');
+        this.setIcon('fullscreen-enter');
+      }
+    }
+
+    /**
+     * This gets called when an `FullscreenToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (!this.player_.isFullscreen()) {
+        this.player_.requestFullscreen();
+      } else {
+        this.player_.exitFullscreen();
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `FullscreenToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  FullscreenToggle.prototype.controlText_ = 'Fullscreen';
+  Component$1.registerComponent('FullscreenToggle', FullscreenToggle);
+
+  /**
+   * Check if volume control is supported and if it isn't hide the
+   * `Component` that was passed  using the `vjs-hidden` class.
+   *
+   * @param { import('../../component').default } self
+   *        The component that should be hidden if volume is unsupported
+   *
+   * @param { import('../../player').default } player
+   *        A reference to the player
+   *
+   * @private
+   */
+  const checkVolumeSupport = function (self, player) {
+    // hide volume controls when they're not supported by the current tech
+    if (player.tech_ && !player.tech_.featuresVolumeControl) {
+      self.addClass('vjs-hidden');
+    }
+    self.on(player, 'loadstart', function () {
+      if (!player.tech_.featuresVolumeControl) {
+        self.addClass('vjs-hidden');
+      } else {
+        self.removeClass('vjs-hidden');
+      }
+    });
+  };
+
+  /**
+   * @file volume-level.js
+   */
+
+  /**
+   * Shows volume level
+   *
+   * @extends Component
+   */
+  class VolumeLevel extends Component$1 {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-volume-level'
+      });
+      this.setIcon('circle', el);
+      el.appendChild(super.createEl('span', {
+        className: 'vjs-control-text'
+      }));
+      return el;
+    }
+  }
+  Component$1.registerComponent('VolumeLevel', VolumeLevel);
+
+  /**
+   * @file volume-level-tooltip.js
+   */
+
+  /**
+   * Volume level tooltips display a volume above or side by side the volume bar.
+   *
+   * @extends Component
+   */
+  class VolumeLevelTooltip extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the volume tooltip DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-volume-tooltip'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Updates the position of the tooltip relative to the `VolumeBar` and
+     * its content text.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     */
+    update(rangeBarRect, rangeBarPoint, vertical, content) {
+      if (!vertical) {
+        const tooltipRect = getBoundingClientRect(this.el_);
+        const playerRect = getBoundingClientRect(this.player_.el());
+        const volumeBarPointPx = rangeBarRect.width * rangeBarPoint;
+        if (!playerRect || !tooltipRect) {
+          return;
+        }
+        const spaceLeftOfPoint = rangeBarRect.left - playerRect.left + volumeBarPointPx;
+        const spaceRightOfPoint = rangeBarRect.width - volumeBarPointPx + (playerRect.right - rangeBarRect.right);
+        let pullTooltipBy = tooltipRect.width / 2;
+        if (spaceLeftOfPoint < pullTooltipBy) {
+          pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
+        } else if (spaceRightOfPoint < pullTooltipBy) {
+          pullTooltipBy = spaceRightOfPoint;
+        }
+        if (pullTooltipBy < 0) {
+          pullTooltipBy = 0;
+        } else if (pullTooltipBy > tooltipRect.width) {
+          pullTooltipBy = tooltipRect.width;
+        }
+        this.el_.style.right = `-${pullTooltipBy}px`;
+      }
+      this.write(`${content}%`);
+    }
+
+    /**
+     * Write the volume to the tooltip DOM element.
+     *
+     * @param {string} content
+     *        The formatted volume for the tooltip.
+     */
+    write(content) {
+      textContent(this.el_, content);
+    }
+
+    /**
+     * Updates the position of the volume tooltip relative to the `VolumeBar`.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     * @param {number} volume
+     *        The volume level to update the tooltip to
+     *
+     * @param {Function} cb
+     *        A function that will be called during the request animation frame
+     *        for tooltips that need to do additional animations from the default
+     */
+    updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, cb) {
+      this.requestNamedAnimationFrame('VolumeLevelTooltip#updateVolume', () => {
+        this.update(rangeBarRect, rangeBarPoint, vertical, volume.toFixed(0));
+        if (cb) {
+          cb();
+        }
+      });
+    }
+  }
+  Component$1.registerComponent('VolumeLevelTooltip', VolumeLevelTooltip);
+
+  /**
+   * @file mouse-volume-level-display.js
+   */
+
+  /**
+   * The {@link MouseVolumeLevelDisplay} component tracks mouse movement over the
+   * {@link VolumeControl}. It displays an indicator and a {@link VolumeLevelTooltip}
+   * indicating the volume level which is represented by a given point in the
+   * {@link VolumeBar}.
+   *
+   * @extends Component
+   */
+  class MouseVolumeLevelDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-mouse-display'
+      });
+    }
+
+    /**
+     * Enquires updates to its own DOM as well as the DOM of its
+     * {@link VolumeLevelTooltip} child.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     */
+    update(rangeBarRect, rangeBarPoint, vertical) {
+      const volume = 100 * rangeBarPoint;
+      this.getChild('volumeLevelTooltip').updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, () => {
+        if (vertical) {
+          this.el_.style.bottom = `${rangeBarRect.height * rangeBarPoint}px`;
+        } else {
+          this.el_.style.left = `${rangeBarRect.width * rangeBarPoint}px`;
+        }
+      });
+    }
+  }
+
+  /**
+   * Default options for `MouseVolumeLevelDisplay`
+   *
+   * @type {Object}
+   * @private
+   */
+  MouseVolumeLevelDisplay.prototype.options_ = {
+    children: ['volumeLevelTooltip']
+  };
+  Component$1.registerComponent('MouseVolumeLevelDisplay', MouseVolumeLevelDisplay);
+
+  /**
+   * @file volume-bar.js
+   */
+
+  /**
+   * The bar that contains the volume level and can be clicked on to adjust the level
+   *
+   * @extends Slider
+   */
+  class VolumeBar extends Slider {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on('slideractive', e => this.updateLastVolume_(e));
+      this.on(player, 'volumechange', e => this.updateARIAAttributes(e));
+      player.ready(() => this.updateARIAAttributes());
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-volume-bar vjs-slider-bar'
+      }, {
+        'aria-label': this.localize('Volume Level'),
+        'aria-live': 'polite'
+      });
+    }
+
+    /**
+     * Handle mouse down on volume bar
+     *
+     * @param {Event} event
+     *        The `mousedown` event that caused this to run.
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+      super.handleMouseDown(event);
+    }
+
+    /**
+     * Handle movement events on the {@link VolumeMenuButton}.
+     *
+     * @param {Event} event
+     *        The event that caused this function to run.
+     *
+     * @listens mousemove
+     */
+    handleMouseMove(event) {
+      const mouseVolumeLevelDisplay = this.getChild('mouseVolumeLevelDisplay');
+      if (mouseVolumeLevelDisplay) {
+        const volumeBarEl = this.el();
+        const volumeBarRect = getBoundingClientRect(volumeBarEl);
+        const vertical = this.vertical();
+        let volumeBarPoint = getPointerPosition(volumeBarEl, event);
+        volumeBarPoint = vertical ? volumeBarPoint.y : volumeBarPoint.x;
+        // The default skin has a gap on either side of the `VolumeBar`. This means
+        // that it's possible to trigger this behavior outside the boundaries of
+        // the `VolumeBar`. This ensures we stay within it at all times.
+        volumeBarPoint = clamp(volumeBarPoint, 0, 1);
+        mouseVolumeLevelDisplay.update(volumeBarRect, volumeBarPoint, vertical);
+      }
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+      this.checkMuted();
+      this.player_.volume(this.calculateDistance(event));
+    }
+
+    /**
+     * If the player is muted unmute it.
+     */
+    checkMuted() {
+      if (this.player_.muted()) {
+        this.player_.muted(false);
+      }
+    }
+
+    /**
+     * Get percent of volume level
+     *
+     * @return {number}
+     *         Volume level percent as a decimal number.
+     */
+    getPercent() {
+      if (this.player_.muted()) {
+        return 0;
+      }
+      return this.player_.volume();
+    }
+
+    /**
+     * Increase volume level for keyboard users
+     */
+    stepForward() {
+      this.checkMuted();
+      this.player_.volume(this.player_.volume() + 0.1);
+    }
+
+    /**
+     * Decrease volume level for keyboard users
+     */
+    stepBack() {
+      this.checkMuted();
+      this.player_.volume(this.player_.volume() - 0.1);
+    }
+
+    /**
+     * Update ARIA accessibility attributes
+     *
+     * @param {Event} [event]
+     *        The `volumechange` event that caused this function to run.
+     *
+     * @listens Player#volumechange
+     */
+    updateARIAAttributes(event) {
+      const ariaValue = this.player_.muted() ? 0 : this.volumeAsPercentage_();
+      this.el_.setAttribute('aria-valuenow', ariaValue);
+      this.el_.setAttribute('aria-valuetext', ariaValue + '%');
+    }
+
+    /**
+     * Returns the current value of the player volume as a percentage
+     *
+     * @private
+     */
+    volumeAsPercentage_() {
+      return Math.round(this.player_.volume() * 100);
+    }
+
+    /**
+     * When user starts dragging the VolumeBar, store the volume and listen for
+     * the end of the drag. When the drag ends, if the volume was set to zero,
+     * set lastVolume to the stored volume.
+     *
+     * @listens slideractive
+     * @private
+     */
+    updateLastVolume_() {
+      const volumeBeforeDrag = this.player_.volume();
+      this.one('sliderinactive', () => {
+        if (this.player_.volume() === 0) {
+          this.player_.lastVolume_(volumeBeforeDrag);
+        }
+      });
+    }
+  }
+
+  /**
+   * Default options for the `VolumeBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumeBar.prototype.options_ = {
+    children: ['volumeLevel'],
+    barName: 'volumeLevel'
+  };
+
+  // MouseVolumeLevelDisplay tooltip should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    VolumeBar.prototype.options_.children.splice(0, 0, 'mouseVolumeLevelDisplay');
+  }
+
+  /**
+   * Call the update event for this Slider when this event happens on the player.
+   *
+   * @type {string}
+   */
+  VolumeBar.prototype.playerEvent = 'volumechange';
+  Component$1.registerComponent('VolumeBar', VolumeBar);
+
+  /**
+   * @file volume-control.js
+   */
+
+  /**
+   * The component for controlling the volume level
+   *
+   * @extends Component
+   */
+  class VolumeControl extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.vertical = options.vertical || false;
+
+      // Pass the vertical option down to the VolumeBar if
+      // the VolumeBar is turned on.
+      if (typeof options.volumeBar === 'undefined' || isPlain(options.volumeBar)) {
+        options.volumeBar = options.volumeBar || {};
+        options.volumeBar.vertical = options.vertical;
+      }
+      super(player, options);
+
+      // hide this control if volume support is missing
+      checkVolumeSupport(this, player);
+      this.throttledHandleMouseMove = throttle(bind_(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+      this.handleMouseUpHandler_ = e => this.handleMouseUp(e);
+      this.on('mousedown', e => this.handleMouseDown(e));
+      this.on('touchstart', e => this.handleMouseDown(e));
+      this.on('mousemove', e => this.handleMouseMove(e));
+
+      // while the slider is active (the mouse has been pressed down and
+      // is dragging) or in focus we do not want to hide the VolumeBar
+      this.on(this.volumeBar, ['focus', 'slideractive'], () => {
+        this.volumeBar.addClass('vjs-slider-active');
+        this.addClass('vjs-slider-active');
+        this.trigger('slideractive');
+      });
+      this.on(this.volumeBar, ['blur', 'sliderinactive'], () => {
+        this.volumeBar.removeClass('vjs-slider-active');
+        this.removeClass('vjs-slider-active');
+        this.trigger('sliderinactive');
+      });
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      let orientationClass = 'vjs-volume-horizontal';
+      if (this.options_.vertical) {
+        orientationClass = 'vjs-volume-vertical';
+      }
+      return super.createEl('div', {
+        className: `vjs-volume-control vjs-control ${orientationClass}`
+      });
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseDown(event) {
+      const doc = this.el_.ownerDocument;
+      this.on(doc, 'mousemove', this.throttledHandleMouseMove);
+      this.on(doc, 'touchmove', this.throttledHandleMouseMove);
+      this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.on(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      const doc = this.el_.ownerDocument;
+      this.off(doc, 'mousemove', this.throttledHandleMouseMove);
+      this.off(doc, 'touchmove', this.throttledHandleMouseMove);
+      this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.off(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseMove(event) {
+      this.volumeBar.handleMouseMove(event);
+    }
+  }
+
+  /**
+   * Default options for the `VolumeControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumeControl.prototype.options_ = {
+    children: ['volumeBar']
+  };
+  Component$1.registerComponent('VolumeControl', VolumeControl);
+
+  /**
+   * Check if muting volume is supported and if it isn't hide the mute toggle
+   * button.
+   *
+   * @param { import('../../component').default } self
+   *        A reference to the mute toggle button
+   *
+   * @param { import('../../player').default } player
+   *        A reference to the player
+   *
+   * @private
+   */
+  const checkMuteSupport = function (self, player) {
+    // hide mute toggle button if it's not supported by the current tech
+    if (player.tech_ && !player.tech_.featuresMuteControl) {
+      self.addClass('vjs-hidden');
+    }
+    self.on(player, 'loadstart', function () {
+      if (!player.tech_.featuresMuteControl) {
+        self.addClass('vjs-hidden');
+      } else {
+        self.removeClass('vjs-hidden');
+      }
+    });
+  };
+
+  /**
+   * @file mute-toggle.js
+   */
+
+  /**
+   * A button component for muting the audio.
+   *
+   * @extends Button
+   */
+  class MuteToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+
+      // hide this control if volume support is missing
+      checkMuteSupport(this, player);
+      this.on(player, ['loadstart', 'volumechange'], e => this.update(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-mute-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when an `MuteToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const vol = this.player_.volume();
+      const lastVolume = this.player_.lastVolume_();
+      if (vol === 0) {
+        const volumeToSet = lastVolume < 0.1 ? 0.1 : lastVolume;
+        this.player_.volume(volumeToSet);
+        this.player_.muted(false);
+      } else {
+        this.player_.muted(this.player_.muted() ? false : true);
+      }
+    }
+
+    /**
+     * Update the `MuteToggle` button based on the state of `volume` and `muted`
+     * on the player.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#loadstart} event if this function was called
+     *        through an event.
+     *
+     * @listens Player#loadstart
+     * @listens Player#volumechange
+     */
+    update(event) {
+      this.updateIcon_();
+      this.updateControlText_();
+    }
+
+    /**
+     * Update the appearance of the `MuteToggle` icon.
+     *
+     * Possible states (given `level` variable below):
+     * - 0: crossed out
+     * - 1: zero bars of volume
+     * - 2: one bar of volume
+     * - 3: two bars of volume
+     *
+     * @private
+     */
+    updateIcon_() {
+      const vol = this.player_.volume();
+      let level = 3;
+      this.setIcon('volume-high');
+
+      // in iOS when a player is loaded with muted attribute
+      // and volume is changed with a native mute button
+      // we want to make sure muted state is updated
+      if (IS_IOS && this.player_.tech_ && this.player_.tech_.el_) {
+        this.player_.muted(this.player_.tech_.el_.muted);
+      }
+      if (vol === 0 || this.player_.muted()) {
+        this.setIcon('volume-mute');
+        level = 0;
+      } else if (vol < 0.33) {
+        this.setIcon('volume-low');
+        level = 1;
+      } else if (vol < 0.67) {
+        this.setIcon('volume-medium');
+        level = 2;
+      }
+      removeClass(this.el_, [0, 1, 2, 3].reduce((str, i) => str + `${i ? ' ' : ''}vjs-vol-${i}`, ''));
+      addClass(this.el_, `vjs-vol-${level}`);
+    }
+
+    /**
+     * If `muted` has changed on the player, update the control text
+     * (`title` attribute on `vjs-mute-control` element and content of
+     * `vjs-control-text` element).
+     *
+     * @private
+     */
+    updateControlText_() {
+      const soundOff = this.player_.muted() || this.player_.volume() === 0;
+      const text = soundOff ? 'Unmute' : 'Mute';
+      if (this.controlText() !== text) {
+        this.controlText(text);
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `MuteToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  MuteToggle.prototype.controlText_ = 'Mute';
+  Component$1.registerComponent('MuteToggle', MuteToggle);
+
+  /**
+   * @file volume-control.js
+   */
+
+  /**
+   * A Component to contain the MuteToggle and VolumeControl so that
+   * they can work together.
+   *
+   * @extends Component
+   */
+  class VolumePanel extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      if (typeof options.inline !== 'undefined') {
+        options.inline = options.inline;
+      } else {
+        options.inline = true;
+      }
+
+      // pass the inline option down to the VolumeControl as vertical if
+      // the VolumeControl is on.
+      if (typeof options.volumeControl === 'undefined' || isPlain(options.volumeControl)) {
+        options.volumeControl = options.volumeControl || {};
+        options.volumeControl.vertical = !options.inline;
+      }
+      super(player, options);
+
+      // this handler is used by mouse handler methods below
+      this.handleKeyPressHandler_ = e => this.handleKeyPress(e);
+      this.on(player, ['loadstart'], e => this.volumePanelState_(e));
+      this.on(this.muteToggle, 'keyup', e => this.handleKeyPress(e));
+      this.on(this.volumeControl, 'keyup', e => this.handleVolumeControlKeyUp(e));
+      this.on('keydown', e => this.handleKeyPress(e));
+      this.on('mouseover', e => this.handleMouseOver(e));
+      this.on('mouseout', e => this.handleMouseOut(e));
+
+      // while the slider is active (the mouse has been pressed down and
+      // is dragging) we do not want to hide the VolumeBar
+      this.on(this.volumeControl, ['slideractive'], this.sliderActive_);
+      this.on(this.volumeControl, ['sliderinactive'], this.sliderInactive_);
+    }
+
+    /**
+     * Add vjs-slider-active class to the VolumePanel
+     *
+     * @listens VolumeControl#slideractive
+     * @private
+     */
+    sliderActive_() {
+      this.addClass('vjs-slider-active');
+    }
+
+    /**
+     * Removes vjs-slider-active class to the VolumePanel
+     *
+     * @listens VolumeControl#sliderinactive
+     * @private
+     */
+    sliderInactive_() {
+      this.removeClass('vjs-slider-active');
+    }
+
+    /**
+     * Adds vjs-hidden or vjs-mute-toggle-only to the VolumePanel
+     * depending on MuteToggle and VolumeControl state
+     *
+     * @listens Player#loadstart
+     * @private
+     */
+    volumePanelState_() {
+      // hide volume panel if neither volume control or mute toggle
+      // are displayed
+      if (this.volumeControl.hasClass('vjs-hidden') && this.muteToggle.hasClass('vjs-hidden')) {
+        this.addClass('vjs-hidden');
+      }
+
+      // if only mute toggle is visible we don't want
+      // volume panel expanding when hovered or active
+      if (this.volumeControl.hasClass('vjs-hidden') && !this.muteToggle.hasClass('vjs-hidden')) {
+        this.addClass('vjs-mute-toggle-only');
+      }
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      let orientationClass = 'vjs-volume-panel-horizontal';
+      if (!this.options_.inline) {
+        orientationClass = 'vjs-volume-panel-vertical';
+      }
+      return super.createEl('div', {
+        className: `vjs-volume-panel vjs-control ${orientationClass}`
+      });
+    }
+
+    /**
+     * Dispose of the `volume-panel` and all child components.
+     */
+    dispose() {
+      this.handleMouseOut();
+      super.dispose();
+    }
+
+    /**
+     * Handles `keyup` events on the `VolumeControl`, looking for ESC, which closes
+     * the volume panel and sets focus on `MuteToggle`.
+     *
+     * @param {Event} event
+     *        The `keyup` event that caused this function to be called.
+     *
+     * @listens keyup
+     */
+    handleVolumeControlKeyUp(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        this.muteToggle.focus();
+      }
+    }
+
+    /**
+     * This gets called when a `VolumePanel` gains hover via a `mouseover` event.
+     * Turns on listening for `mouseover` event. When they happen it
+     * calls `this.handleMouseOver`.
+     *
+     * @param {Event} event
+     *        The `mouseover` event that caused this function to be called.
+     *
+     * @listens mouseover
+     */
+    handleMouseOver(event) {
+      this.addClass('vjs-hover');
+      on(document, 'keyup', this.handleKeyPressHandler_);
+    }
+
+    /**
+     * This gets called when a `VolumePanel` gains hover via a `mouseout` event.
+     * Turns on listening for `mouseout` event. When they happen it
+     * calls `this.handleMouseOut`.
+     *
+     * @param {Event} event
+     *        The `mouseout` event that caused this function to be called.
+     *
+     * @listens mouseout
+     */
+    handleMouseOut(event) {
+      this.removeClass('vjs-hover');
+      off(document, 'keyup', this.handleKeyPressHandler_);
+    }
+
+    /**
+     * Handles `keyup` event on the document or `keydown` event on the `VolumePanel`,
+     * looking for ESC, which hides the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        The keypress that triggered this event.
+     *
+     * @listens keydown | keyup
+     */
+    handleKeyPress(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        this.handleMouseOut();
+      }
+    }
+  }
+
+  /**
+   * Default options for the `VolumeControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumePanel.prototype.options_ = {
+    children: ['muteToggle', 'volumeControl']
+  };
+  Component$1.registerComponent('VolumePanel', VolumePanel);
+
+  /**
+   * Button to skip forward a configurable amount of time
+   * through a video. Renders in the control bar.
+   *
+   * e.g. options: {controlBar: {skipButtons: forward: 5}}
+   *
+   * @extends Button
+   */
+  class SkipForward extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.validOptions = [5, 10, 30];
+      this.skipTime = this.getSkipForwardTime();
+      if (this.skipTime && this.validOptions.includes(this.skipTime)) {
+        this.setIcon(`forward-${this.skipTime}`);
+        this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime.toLocaleString(player.language())]));
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+    getSkipForwardTime() {
+      const playerOptions = this.options_.playerOptions;
+      return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.forward;
+    }
+    buildCSSClass() {
+      return `vjs-skip-forward-${this.getSkipForwardTime()} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * On click, skips forward in the duration/seekable range by a configurable amount of seconds.
+     * If the time left in the duration/seekable range is less than the configured 'skip forward' time,
+     * skips to end of duration/seekable range.
+     *
+     * Handle a click on a `SkipForward` button
+     *
+     * @param {EventTarget~Event} event
+     *        The `click` event that caused this function
+     *        to be called
+     */
+    handleClick(event) {
+      if (isNaN(this.player_.duration())) {
+        return;
+      }
+      const currentVideoTime = this.player_.currentTime();
+      const liveTracker = this.player_.liveTracker;
+      const duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
+      let newTime;
+      if (currentVideoTime + this.skipTime <= duration) {
+        newTime = currentVideoTime + this.skipTime;
+      } else {
+        newTime = duration;
+      }
+      this.player_.currentTime(newTime);
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime]));
+    }
+  }
+  SkipForward.prototype.controlText_ = 'Skip Forward';
+  Component$1.registerComponent('SkipForward', SkipForward);
+
+  /**
+   * Button to skip backward a configurable amount of time
+   * through a video. Renders in the control bar.
+   *
+   *  * e.g. options: {controlBar: {skipButtons: backward: 5}}
+   *
+   * @extends Button
+   */
+  class SkipBackward extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.validOptions = [5, 10, 30];
+      this.skipTime = this.getSkipBackwardTime();
+      if (this.skipTime && this.validOptions.includes(this.skipTime)) {
+        this.setIcon(`replay-${this.skipTime}`);
+        this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime.toLocaleString(player.language())]));
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+    getSkipBackwardTime() {
+      const playerOptions = this.options_.playerOptions;
+      return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.backward;
+    }
+    buildCSSClass() {
+      return `vjs-skip-backward-${this.getSkipBackwardTime()} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * On click, skips backward in the video by a configurable amount of seconds.
+     * If the current time in the video is less than the configured 'skip backward' time,
+     * skips to beginning of video or seekable range.
+     *
+     * Handle a click on a `SkipBackward` button
+     *
+     * @param {EventTarget~Event} event
+     *        The `click` event that caused this function
+     *        to be called
+     */
+    handleClick(event) {
+      const currentVideoTime = this.player_.currentTime();
+      const liveTracker = this.player_.liveTracker;
+      const seekableStart = liveTracker && liveTracker.isLive() && liveTracker.seekableStart();
+      let newTime;
+      if (seekableStart && currentVideoTime - this.skipTime <= seekableStart) {
+        newTime = seekableStart;
+      } else if (currentVideoTime >= this.skipTime) {
+        newTime = currentVideoTime - this.skipTime;
+      } else {
+        newTime = 0;
+      }
+      this.player_.currentTime(newTime);
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime]));
+    }
+  }
+  SkipBackward.prototype.controlText_ = 'Skip Backward';
+  Component$1.registerComponent('SkipBackward', SkipBackward);
+
+  /**
+   * @file menu.js
+   */
+
+  /**
+   * The Menu component is used to build popup menus, including subtitle and
+   * captions selection menus.
+   *
+   * @extends Component
+   */
+  class Menu extends Component$1 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        the player that this component should attach to
+     *
+     * @param {Object} [options]
+     *        Object of option names and values
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      if (options) {
+        this.menuButton_ = options.menuButton;
+      }
+      this.focusedChild_ = -1;
+      this.on('keydown', e => this.handleKeyDown(e));
+
+      // All the menu item instances share the same blur handler provided by the menu container.
+      this.boundHandleBlur_ = e => this.handleBlur(e);
+      this.boundHandleTapClick_ = e => this.handleTapClick(e);
+    }
+
+    /**
+     * Add event listeners to the {@link MenuItem}.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem` to add listeners to.
+     *
+     */
+    addEventListenerForItem(component) {
+      if (!(component instanceof Component$1)) {
+        return;
+      }
+      this.on(component, 'blur', this.boundHandleBlur_);
+      this.on(component, ['tap', 'click'], this.boundHandleTapClick_);
+    }
+
+    /**
+     * Remove event listeners from the {@link MenuItem}.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem` to remove listeners.
+     *
+     */
+    removeEventListenerForItem(component) {
+      if (!(component instanceof Component$1)) {
+        return;
+      }
+      this.off(component, 'blur', this.boundHandleBlur_);
+      this.off(component, ['tap', 'click'], this.boundHandleTapClick_);
+    }
+
+    /**
+     * This method will be called indirectly when the component has been added
+     * before the component adds to the new menu instance by `addItem`.
+     * In this case, the original menu instance will remove the component
+     * by calling `removeChild`.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem`
+     */
+    removeChild(component) {
+      if (typeof component === 'string') {
+        component = this.getChild(component);
+      }
+      this.removeEventListenerForItem(component);
+      super.removeChild(component);
+    }
+
+    /**
+     * Add a {@link MenuItem} to the menu.
+     *
+     * @param {Object|string} component
+     *        The name or instance of the `MenuItem` to add.
+     *
+     */
+    addItem(component) {
+      const childComponent = this.addChild(component);
+      if (childComponent) {
+        this.addEventListenerForItem(childComponent);
+      }
+    }
+
+    /**
+     * Create the `Menu`s DOM element.
+     *
+     * @return {Element}
+     *         the element that was created
+     */
+    createEl() {
+      const contentElType = this.options_.contentElType || 'ul';
+      this.contentEl_ = createEl(contentElType, {
+        className: 'vjs-menu-content'
+      });
+      this.contentEl_.setAttribute('role', 'menu');
+      const el = super.createEl('div', {
+        append: this.contentEl_,
+        className: 'vjs-menu'
+      });
+      el.appendChild(this.contentEl_);
+
+      // Prevent clicks from bubbling up. Needed for Menu Buttons,
+      // where a click on the parent is significant
+      on(el, 'click', function (event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      });
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.boundHandleBlur_ = null;
+      this.boundHandleTapClick_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Called when a `MenuItem` loses focus.
+     *
+     * @param {Event} event
+     *        The `blur` event that caused this function to be called.
+     *
+     * @listens blur
+     */
+    handleBlur(event) {
+      const relatedTarget = event.relatedTarget || document.activeElement;
+
+      // Close menu popup when a user clicks outside the menu
+      if (!this.children().some(element => {
+        return element.el() === relatedTarget;
+      })) {
+        const btn = this.menuButton_;
+        if (btn && btn.buttonPressed_ && relatedTarget !== btn.el().firstChild) {
+          btn.unpressButton();
+        }
+      }
+    }
+
+    /**
+     * Called when a `MenuItem` gets clicked or tapped.
+     *
+     * @param {Event} event
+     *        The `click` or `tap` event that caused this function to be called.
+     *
+     * @listens click,tap
+     */
+    handleTapClick(event) {
+      // Unpress the associated MenuButton, and move focus back to it
+      if (this.menuButton_) {
+        this.menuButton_.unpressButton();
+        const childComponents = this.children();
+        if (!Array.isArray(childComponents)) {
+          return;
+        }
+        const foundComponent = childComponents.filter(component => component.el() === event.target)[0];
+        if (!foundComponent) {
+          return;
+        }
+
+        // don't focus menu button if item is a caption settings item
+        // because focus will move elsewhere
+        if (foundComponent.name() !== 'CaptionSettingsMenuItem') {
+          this.menuButton_.focus();
+        }
+      }
+    }
+
+    /**
+     * Handle a `keydown` event on this menu. This listener is added in the constructor.
+     *
+     * @param {KeyboardEvent} event
+     *        A `keydown` event that happened on the menu.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Left and Down Arrows
+      if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepForward();
+
+        // Up and Right Arrows
+      } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepBack();
+      }
+    }
+
+    /**
+     * Move to next (lower) menu item for keyboard users.
+     */
+    stepForward() {
+      let stepChild = 0;
+      if (this.focusedChild_ !== undefined) {
+        stepChild = this.focusedChild_ + 1;
+      }
+      this.focus(stepChild);
+    }
+
+    /**
+     * Move to previous (higher) menu item for keyboard users.
+     */
+    stepBack() {
+      let stepChild = 0;
+      if (this.focusedChild_ !== undefined) {
+        stepChild = this.focusedChild_ - 1;
+      }
+      this.focus(stepChild);
+    }
+
+    /**
+     * Set focus on a {@link MenuItem} in the `Menu`.
+     *
+     * @param {Object|string} [item=0]
+     *        Index of child item set focus on.
+     */
+    focus(item = 0) {
+      const children = this.children().slice();
+      const haveTitle = children.length && children[0].hasClass('vjs-menu-title');
+      if (haveTitle) {
+        children.shift();
+      }
+      if (children.length > 0) {
+        if (item < 0) {
+          item = 0;
+        } else if (item >= children.length) {
+          item = children.length - 1;
+        }
+        this.focusedChild_ = item;
+        children[item].el_.focus();
+      }
+    }
+  }
+  Component$1.registerComponent('Menu', Menu);
+
+  /**
+   * @file menu-button.js
+   */
+
+  /**
+   * A `MenuButton` class for any popup {@link Menu}.
+   *
+   * @extends Component
+   */
+  class MenuButton extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+      this.menuButton_ = new Button(player, options);
+      this.menuButton_.controlText(this.controlText_);
+      this.menuButton_.el_.setAttribute('aria-haspopup', 'true');
+
+      // Add buildCSSClass values to the button, not the wrapper
+      const buttonClass = Button.prototype.buildCSSClass();
+      this.menuButton_.el_.className = this.buildCSSClass() + ' ' + buttonClass;
+      this.menuButton_.removeClass('vjs-control');
+      this.addChild(this.menuButton_);
+      this.update();
+      this.enabled_ = true;
+      const handleClick = e => this.handleClick(e);
+      this.handleMenuKeyUp_ = e => this.handleMenuKeyUp(e);
+      this.on(this.menuButton_, 'tap', handleClick);
+      this.on(this.menuButton_, 'click', handleClick);
+      this.on(this.menuButton_, 'keydown', e => this.handleKeyDown(e));
+      this.on(this.menuButton_, 'mouseenter', () => {
+        this.addClass('vjs-hover');
+        this.menu.show();
+        on(document, 'keyup', this.handleMenuKeyUp_);
+      });
+      this.on('mouseleave', e => this.handleMouseLeave(e));
+      this.on('keydown', e => this.handleSubmenuKeyDown(e));
+    }
+
+    /**
+     * Update the menu based on the current state of its items.
+     */
+    update() {
+      const menu = this.createMenu();
+      if (this.menu) {
+        this.menu.dispose();
+        this.removeChild(this.menu);
+      }
+      this.menu = menu;
+      this.addChild(menu);
+
+      /**
+       * Track the state of the menu button
+       *
+       * @type {Boolean}
+       * @private
+       */
+      this.buttonPressed_ = false;
+      this.menuButton_.el_.setAttribute('aria-expanded', 'false');
+      if (this.items && this.items.length <= this.hideThreshold_) {
+        this.hide();
+        this.menu.contentEl_.removeAttribute('role');
+      } else {
+        this.show();
+        this.menu.contentEl_.setAttribute('role', 'menu');
+      }
+    }
+
+    /**
+     * Create the menu and add all items to it.
+     *
+     * @return {Menu}
+     *         The constructed menu
+     */
+    createMenu() {
+      const menu = new Menu(this.player_, {
+        menuButton: this
+      });
+
+      /**
+       * Hide the menu if the number of items is less than or equal to this threshold. This defaults
+       * to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list
+       * it here because every time we run `createMenu` we need to reset the value.
+       *
+       * @protected
+       * @type {Number}
+       */
+      this.hideThreshold_ = 0;
+
+      // Add a title list item to the top
+      if (this.options_.title) {
+        const titleEl = createEl('li', {
+          className: 'vjs-menu-title',
+          textContent: toTitleCase$1(this.options_.title),
+          tabIndex: -1
+        });
+        const titleComponent = new Component$1(this.player_, {
+          el: titleEl
+        });
+        menu.addItem(titleComponent);
+      }
+      this.items = this.createItems();
+      if (this.items) {
+        // Add menu items to the menu
+        for (let i = 0; i < this.items.length; i++) {
+          menu.addItem(this.items[i]);
+        }
+      }
+      return menu;
+    }
+
+    /**
+     * Create the list of menu items. Specific to each subclass.
+     *
+     * @abstract
+     */
+    createItems() {}
+
+    /**
+     * Create the `MenuButtons`s DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildWrapperCSSClass()
+      }, {});
+    }
+
+    /**
+     * Overwrites the `setIcon` method from `Component`.
+     * In this case, we want the icon to be appended to the menuButton.
+     *
+     * @param {string} name
+     *         The icon name to be added.
+     */
+    setIcon(name) {
+      super.setIcon(name, this.menuButton_.el_);
+    }
+
+    /**
+     * Allow sub components to stack CSS class names for the wrapper element
+     *
+     * @return {string}
+     *         The constructed wrapper DOM `className`
+     */
+    buildWrapperCSSClass() {
+      let menuButtonClass = 'vjs-menu-button';
+
+      // If the inline option is passed, we want to use different styles altogether.
+      if (this.options_.inline === true) {
+        menuButtonClass += '-inline';
+      } else {
+        menuButtonClass += '-popup';
+      }
+
+      // TODO: Fix the CSS so that this isn't necessary
+      const buttonClass = Button.prototype.buildCSSClass();
+      return `vjs-menu-button ${menuButtonClass} ${buttonClass} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      let menuButtonClass = 'vjs-menu-button';
+
+      // If the inline option is passed, we want to use different styles altogether.
+      if (this.options_.inline === true) {
+        menuButtonClass += '-inline';
+      } else {
+        menuButtonClass += '-popup';
+      }
+      return `vjs-menu-button ${menuButtonClass} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Get or set the localized control text that will be used for accessibility.
+     *
+     * > NOTE: This will come from the internal `menuButton_` element.
+     *
+     * @param {string} [text]
+     *        Control text for element.
+     *
+     * @param {Element} [el=this.menuButton_.el()]
+     *        Element to set the title on.
+     *
+     * @return {string}
+     *         - The control text when getting
+     */
+    controlText(text, el = this.menuButton_.el()) {
+      return this.menuButton_.controlText(text, el);
+    }
+
+    /**
+     * Dispose of the `menu-button` and all child components.
+     */
+    dispose() {
+      this.handleMouseLeave();
+      super.dispose();
+    }
+
+    /**
+     * Handle a click on a `MenuButton`.
+     * See {@link ClickableComponent#handleClick} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (this.buttonPressed_) {
+        this.unpressButton();
+      } else {
+        this.pressButton();
+      }
+    }
+
+    /**
+     * Handle `mouseleave` for `MenuButton`.
+     *
+     * @param {Event} event
+     *        The `mouseleave` event that caused this function to be called.
+     *
+     * @listens mouseleave
+     */
+    handleMouseLeave(event) {
+      this.removeClass('vjs-hover');
+      off(document, 'keyup', this.handleMenuKeyUp_);
+    }
+
+    /**
+     * Set the focus to the actual button, not to this element
+     */
+    focus() {
+      this.menuButton_.focus();
+    }
+
+    /**
+     * Remove the focus from the actual button, not this element
+     */
+    blur() {
+      this.menuButton_.blur();
+    }
+
+    /**
+     * Handle tab, escape, down arrow, and up arrow keys for `MenuButton`. See
+     * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Escape or Tab unpress the 'button'
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        if (this.buttonPressed_) {
+          this.unpressButton();
+        }
+
+        // Don't preventDefault for Tab key - we still want to lose focus
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.preventDefault();
+          // Set focus back to the menu button's button
+          this.menuButton_.focus();
+        }
+        // Up Arrow or Down Arrow also 'press' the button to open the menu
+      } else if (keycode.isEventKey(event, 'Up') || keycode.isEventKey(event, 'Down')) {
+        if (!this.buttonPressed_) {
+          event.preventDefault();
+          this.pressButton();
+        }
+      }
+    }
+
+    /**
+     * Handle a `keyup` event on a `MenuButton`. The listener for this is added in
+     * the constructor.
+     *
+     * @param {Event} event
+     *        Key press event
+     *
+     * @listens keyup
+     */
+    handleMenuKeyUp(event) {
+      // Escape hides popup menu
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        this.removeClass('vjs-hover');
+      }
+    }
+
+    /**
+     * This method name now delegates to `handleSubmenuKeyDown`. This means
+     * anyone calling `handleSubmenuKeyPress` will not see their method calls
+     * stop working.
+     *
+     * @param {Event} event
+     *        The event that caused this function to be called.
+     */
+    handleSubmenuKeyPress(event) {
+      this.handleSubmenuKeyDown(event);
+    }
+
+    /**
+     * Handle a `keydown` event on a sub-menu. The listener for this is added in
+     * the constructor.
+     *
+     * @param {Event} event
+     *        Key press event
+     *
+     * @listens keydown
+     */
+    handleSubmenuKeyDown(event) {
+      // Escape or Tab unpress the 'button'
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        if (this.buttonPressed_) {
+          this.unpressButton();
+        }
+        // Don't preventDefault for Tab key - we still want to lose focus
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.preventDefault();
+          // Set focus back to the menu button's button
+          this.menuButton_.focus();
+        }
+      }
+    }
+
+    /**
+     * Put the current `MenuButton` into a pressed state.
+     */
+    pressButton() {
+      if (this.enabled_) {
+        this.buttonPressed_ = true;
+        this.menu.show();
+        this.menu.lockShowing();
+        this.menuButton_.el_.setAttribute('aria-expanded', 'true');
+
+        // set the focus into the submenu, except on iOS where it is resulting in
+        // undesired scrolling behavior when the player is in an iframe
+        if (IS_IOS && isInFrame()) {
+          // Return early so that the menu isn't focused
+          return;
+        }
+        this.menu.focus();
+      }
+    }
+
+    /**
+     * Take the current `MenuButton` out of a pressed state.
+     */
+    unpressButton() {
+      if (this.enabled_) {
+        this.buttonPressed_ = false;
+        this.menu.unlockShowing();
+        this.menu.hide();
+        this.menuButton_.el_.setAttribute('aria-expanded', 'false');
+      }
+    }
+
+    /**
+     * Disable the `MenuButton`. Don't allow it to be clicked.
+     */
+    disable() {
+      this.unpressButton();
+      this.enabled_ = false;
+      this.addClass('vjs-disabled');
+      this.menuButton_.disable();
+    }
+
+    /**
+     * Enable the `MenuButton`. Allow it to be clicked.
+     */
+    enable() {
+      this.enabled_ = true;
+      this.removeClass('vjs-disabled');
+      this.menuButton_.enable();
+    }
+  }
+  Component$1.registerComponent('MenuButton', MenuButton);
+
+  /**
+   * @file track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific  track types (e.g. subtitles).
+   *
+   * @extends MenuButton
+   */
+  class TrackButton extends MenuButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const tracks = options.tracks;
+      super(player, options);
+      if (this.items.length <= 1) {
+        this.hide();
+      }
+      if (!tracks) {
+        return;
+      }
+      const updateHandler = bind_(this, this.update);
+      tracks.addEventListener('removetrack', updateHandler);
+      tracks.addEventListener('addtrack', updateHandler);
+      tracks.addEventListener('labelchange', updateHandler);
+      this.player_.on('ready', updateHandler);
+      this.player_.on('dispose', function () {
+        tracks.removeEventListener('removetrack', updateHandler);
+        tracks.removeEventListener('addtrack', updateHandler);
+        tracks.removeEventListener('labelchange', updateHandler);
+      });
+    }
+  }
+  Component$1.registerComponent('TrackButton', TrackButton);
+
+  /**
+   * @file menu-keys.js
+   */
+
+  /**
+    * All keys used for operation of a menu (`MenuButton`, `Menu`, and `MenuItem`)
+    * Note that 'Enter' and 'Space' are not included here (otherwise they would
+    * prevent the `MenuButton` and `MenuItem` from being keyboard-clickable)
+   *
+    * @typedef MenuKeys
+    * @array
+    */
+  const MenuKeys = ['Tab', 'Esc', 'Up', 'Down', 'Right', 'Left'];
+
+  /**
+   * @file menu-item.js
+   */
+
+  /**
+   * The component for a menu item. `<li>`
+   *
+   * @extends ClickableComponent
+   */
+  class MenuItem extends ClickableComponent {
+    /**
+     * Creates an instance of the this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.selectable = options.selectable;
+      this.isSelected_ = options.selected || false;
+      this.multiSelectable = options.multiSelectable;
+      this.selected(this.isSelected_);
+      if (this.selectable) {
+        if (this.multiSelectable) {
+          this.el_.setAttribute('role', 'menuitemcheckbox');
+        } else {
+          this.el_.setAttribute('role', 'menuitemradio');
+        }
+      } else {
+        this.el_.setAttribute('role', 'menuitem');
+      }
+    }
+
+    /**
+     * Create the `MenuItem's DOM element
+     *
+     * @param {string} [type=li]
+     *        Element's node type, not actually used, always set to `li`.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element
+     *
+     * @param {Object} [attrs={}]
+     *        An object of attributes that should be set on the element
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(type, props, attrs) {
+      // The control is textual, not just an icon
+      this.nonIconControl = true;
+      const el = super.createEl('li', Object.assign({
+        className: 'vjs-menu-item',
+        tabIndex: -1
+      }, props), attrs);
+
+      // swap icon with menu item text.
+      const menuItemEl = createEl('span', {
+        className: 'vjs-menu-item-text',
+        textContent: this.localize(this.options_.label)
+      });
+
+      // If using SVG icons, the element with vjs-icon-placeholder will be added separately.
+      if (this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(menuItemEl);
+      } else {
+        el.replaceChild(menuItemEl, el.querySelector('.vjs-icon-placeholder'));
+      }
+      return el;
+    }
+
+    /**
+     * Ignore keys which are used by the menu, but pass any other ones up. See
+     * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      if (!MenuKeys.some(key => keycode.isEventKey(event, key))) {
+        // Pass keydown handling up for unused keys
+        super.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Any click on a `MenuItem` puts it into the selected state.
+     * See {@link ClickableComponent#handleClick} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      this.selected(true);
+    }
+
+    /**
+     * Set the state for this menu item as selected or not.
+     *
+     * @param {boolean} selected
+     *        if the menu item is selected or not
+     */
+    selected(selected) {
+      if (this.selectable) {
+        if (selected) {
+          this.addClass('vjs-selected');
+          this.el_.setAttribute('aria-checked', 'true');
+          // aria-checked isn't fully supported by browsers/screen readers,
+          // so indicate selected state to screen reader in the control text.
+          this.controlText(', selected');
+          this.isSelected_ = true;
+        } else {
+          this.removeClass('vjs-selected');
+          this.el_.setAttribute('aria-checked', 'false');
+          // Indicate un-selected state to screen reader
+          this.controlText('');
+          this.isSelected_ = false;
+        }
+      }
+    }
+  }
+  Component$1.registerComponent('MenuItem', MenuItem);
+
+  /**
+   * @file text-track-menu-item.js
+   */
+
+  /**
+   * The specific menu item type for selecting a language within a text track kind
+   *
+   * @extends MenuItem
+   */
+  class TextTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const tracks = player.textTracks();
+
+      // Modify options for parent MenuItem class's init.
+      options.label = track.label || track.language || 'Unknown';
+      options.selected = track.mode === 'showing';
+      super(player, options);
+      this.track = track;
+      // Determine the relevant kind(s) of tracks for this component and filter
+      // out empty kinds.
+      this.kinds = (options.kinds || [options.kind || this.track.kind]).filter(Boolean);
+      const changeHandler = (...args) => {
+        this.handleTracksChange.apply(this, args);
+      };
+      const selectedLanguageChangeHandler = (...args) => {
+        this.handleSelectedLanguageChange.apply(this, args);
+      };
+      player.on(['loadstart', 'texttrackchange'], changeHandler);
+      tracks.addEventListener('change', changeHandler);
+      tracks.addEventListener('selectedlanguagechange', selectedLanguageChangeHandler);
+      this.on('dispose', function () {
+        player.off(['loadstart', 'texttrackchange'], changeHandler);
+        tracks.removeEventListener('change', changeHandler);
+        tracks.removeEventListener('selectedlanguagechange', selectedLanguageChangeHandler);
+      });
+
+      // iOS7 doesn't dispatch change events to TextTrackLists when an
+      // associated track's mode changes. Without something like
+      // Object.observe() (also not present on iOS7), it's not
+      // possible to detect changes to the mode attribute and polyfill
+      // the change event. As a poor substitute, we manually dispatch
+      // change events whenever the controls modify the mode.
+      if (tracks.onchange === undefined) {
+        let event;
+        this.on(['tap', 'click'], function () {
+          if (typeof window.Event !== 'object') {
+            // Android 2.3 throws an Illegal Constructor error for window.Event
+            try {
+              event = new window.Event('change');
+            } catch (err) {
+              // continue regardless of error
+            }
+          }
+          if (!event) {
+            event = document.createEvent('Event');
+            event.initEvent('change', true, true);
+          }
+          tracks.dispatchEvent(event);
+        });
+      }
+
+      // set the default state based on current tracks
+      this.handleTracksChange();
+    }
+
+    /**
+     * This gets called when an `TextTrackMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const referenceTrack = this.track;
+      const tracks = this.player_.textTracks();
+      super.handleClick(event);
+      if (!tracks) {
+        return;
+      }
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+
+        // If the track from the text tracks list is not of the right kind,
+        // skip it. We do not want to affect tracks of incompatible kind(s).
+        if (this.kinds.indexOf(track.kind) === -1) {
+          continue;
+        }
+
+        // If this text track is the component's track and it is not showing,
+        // set it to showing.
+        if (track === referenceTrack) {
+          if (track.mode !== 'showing') {
+            track.mode = 'showing';
+          }
+
+          // If this text track is not the component's track and it is not
+          // disabled, set it to disabled.
+        } else if (track.mode !== 'disabled') {
+          track.mode = 'disabled';
+        }
+      }
+    }
+
+    /**
+     * Handle text track list change
+     *
+     * @param {Event} event
+     *        The `change` event that caused this function to be called.
+     *
+     * @listens TextTrackList#change
+     */
+    handleTracksChange(event) {
+      const shouldBeSelected = this.track.mode === 'showing';
+
+      // Prevent redundant selected() calls because they may cause
+      // screen readers to read the appended control text unnecessarily
+      if (shouldBeSelected !== this.isSelected_) {
+        this.selected(shouldBeSelected);
+      }
+    }
+    handleSelectedLanguageChange(event) {
+      if (this.track.mode === 'showing') {
+        const selectedLanguage = this.player_.cache_.selectedLanguage;
+
+        // Don't replace the kind of track across the same language
+        if (selectedLanguage && selectedLanguage.enabled && selectedLanguage.language === this.track.language && selectedLanguage.kind !== this.track.kind) {
+          return;
+        }
+        this.player_.cache_.selectedLanguage = {
+          enabled: true,
+          language: this.track.language,
+          kind: this.track.kind
+        };
+      }
+    }
+    dispose() {
+      // remove reference to track object on dispose
+      this.track = null;
+      super.dispose();
+    }
+  }
+  Component$1.registerComponent('TextTrackMenuItem', TextTrackMenuItem);
+
+  /**
+   * @file off-text-track-menu-item.js
+   */
+
+  /**
+   * A special menu item for turning off a specific type of text track
+   *
+   * @extends TextTrackMenuItem
+   */
+  class OffTextTrackMenuItem extends TextTrackMenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      // Create pseudo track info
+      // Requires options['kind']
+      options.track = {
+        player,
+        // it is no longer necessary to store `kind` or `kinds` on the track itself
+        // since they are now stored in the `kinds` property of all instances of
+        // TextTrackMenuItem, but this will remain for backwards compatibility
+        kind: options.kind,
+        kinds: options.kinds,
+        default: false,
+        mode: 'disabled'
+      };
+      if (!options.kinds) {
+        options.kinds = [options.kind];
+      }
+      if (options.label) {
+        options.track.label = options.label;
+      } else {
+        options.track.label = options.kinds.join(' and ') + ' off';
+      }
+
+      // MenuItem is selectable
+      options.selectable = true;
+      // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+      options.multiSelectable = false;
+      super(player, options);
+    }
+
+    /**
+     * Handle text track change
+     *
+     * @param {Event} event
+     *        The event that caused this function to run
+     */
+    handleTracksChange(event) {
+      const tracks = this.player().textTracks();
+      let shouldBeSelected = true;
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (this.options_.kinds.indexOf(track.kind) > -1 && track.mode === 'showing') {
+          shouldBeSelected = false;
+          break;
+        }
+      }
+
+      // Prevent redundant selected() calls because they may cause
+      // screen readers to read the appended control text unnecessarily
+      if (shouldBeSelected !== this.isSelected_) {
+        this.selected(shouldBeSelected);
+      }
+    }
+    handleSelectedLanguageChange(event) {
+      const tracks = this.player().textTracks();
+      let allHidden = true;
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (['captions', 'descriptions', 'subtitles'].indexOf(track.kind) > -1 && track.mode === 'showing') {
+          allHidden = false;
+          break;
+        }
+      }
+      if (allHidden) {
+        this.player_.cache_.selectedLanguage = {
+          enabled: false
+        };
+      }
+    }
+
+    /**
+     * Update control text and label on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.label);
+      super.handleLanguagechange();
+    }
+  }
+  Component$1.registerComponent('OffTextTrackMenuItem', OffTextTrackMenuItem);
+
+  /**
+   * @file text-track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific text track types (e.g. subtitles)
+   *
+   * @extends MenuButton
+   */
+  class TextTrackButton extends TrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.tracks = player.textTracks();
+      super(player, options);
+    }
+
+    /**
+     * Create a menu item for each text track
+     *
+     * @param {TextTrackMenuItem[]} [items=[]]
+     *        Existing array of items to use during creation
+     *
+     * @return {TextTrackMenuItem[]}
+     *         Array of menu items that were created
+     */
+    createItems(items = [], TrackMenuItem = TextTrackMenuItem) {
+      // Label is an override for the [track] off label
+      // USed to localise captions/subtitles
+      let label;
+      if (this.label_) {
+        label = `${this.label_} off`;
+      }
+      // Add an OFF menu item to turn all tracks off
+      items.push(new OffTextTrackMenuItem(this.player_, {
+        kinds: this.kinds_,
+        kind: this.kind_,
+        label
+      }));
+      this.hideThreshold_ += 1;
+      const tracks = this.player_.textTracks();
+      if (!Array.isArray(this.kinds_)) {
+        this.kinds_ = [this.kind_];
+      }
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+
+        // only add tracks that are of an appropriate kind and have a label
+        if (this.kinds_.indexOf(track.kind) > -1) {
+          const item = new TrackMenuItem(this.player_, {
+            track,
+            kinds: this.kinds_,
+            kind: this.kind_,
+            // MenuItem is selectable
+            selectable: true,
+            // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+            multiSelectable: false
+          });
+          item.addClass(`vjs-${track.kind}-menu-item`);
+          items.push(item);
+        }
+      }
+      return items;
+    }
+  }
+  Component$1.registerComponent('TextTrackButton', TextTrackButton);
+
+  /**
+   * @file chapters-track-menu-item.js
+   */
+
+  /**
+   * The chapter track menu item
+   *
+   * @extends MenuItem
+   */
+  class ChaptersTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const cue = options.cue;
+      const currentTime = player.currentTime();
+
+      // Modify options for parent MenuItem class's init.
+      options.selectable = true;
+      options.multiSelectable = false;
+      options.label = cue.text;
+      options.selected = cue.startTime <= currentTime && currentTime < cue.endTime;
+      super(player, options);
+      this.track = track;
+      this.cue = cue;
+    }
+
+    /**
+     * This gets called when an `ChaptersTrackMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick();
+      this.player_.currentTime(this.cue.startTime);
+    }
+  }
+  Component$1.registerComponent('ChaptersTrackMenuItem', ChaptersTrackMenuItem);
+
+  /**
+   * @file chapters-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting chapters
+   * Chapters act much differently than other text tracks
+   * Cues are navigation vs. other tracks of alternative languages
+   *
+   * @extends TextTrackButton
+   */
+  class ChaptersButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this function is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('chapters');
+      this.selectCurrentItem_ = () => {
+        this.items.forEach(item => {
+          item.selected(this.track_.activeCues[0] === item.cue);
+        });
+      };
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-chapters-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-chapters-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Update the menu based on the current state of its items.
+     *
+     * @param {Event} [event]
+     *        An event that triggered this function to run.
+     *
+     * @listens TextTrackList#addtrack
+     * @listens TextTrackList#removetrack
+     * @listens TextTrackList#change
+     */
+    update(event) {
+      if (event && event.track && event.track.kind !== 'chapters') {
+        return;
+      }
+      const track = this.findChaptersTrack();
+      if (track !== this.track_) {
+        this.setTrack(track);
+        super.update();
+      } else if (!this.items || track && track.cues && track.cues.length !== this.items.length) {
+        // Update the menu initially or if the number of cues has changed since set
+        super.update();
+      }
+    }
+
+    /**
+     * Set the currently selected track for the chapters button.
+     *
+     * @param {TextTrack} track
+     *        The new track to select. Nothing will change if this is the currently selected
+     *        track.
+     */
+    setTrack(track) {
+      if (this.track_ === track) {
+        return;
+      }
+      if (!this.updateHandler_) {
+        this.updateHandler_ = this.update.bind(this);
+      }
+
+      // here this.track_ refers to the old track instance
+      if (this.track_) {
+        const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
+        if (remoteTextTrackEl) {
+          remoteTextTrackEl.removeEventListener('load', this.updateHandler_);
+        }
+        this.track_.removeEventListener('cuechange', this.selectCurrentItem_);
+        this.track_ = null;
+      }
+      this.track_ = track;
+
+      // here this.track_ refers to the new track instance
+      if (this.track_) {
+        this.track_.mode = 'hidden';
+        const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
+        if (remoteTextTrackEl) {
+          remoteTextTrackEl.addEventListener('load', this.updateHandler_);
+        }
+        this.track_.addEventListener('cuechange', this.selectCurrentItem_);
+      }
+    }
+
+    /**
+     * Find the track object that is currently in use by this ChaptersButton
+     *
+     * @return {TextTrack|undefined}
+     *         The current track or undefined if none was found.
+     */
+    findChaptersTrack() {
+      const tracks = this.player_.textTracks() || [];
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        // We will always choose the last track as our chaptersTrack
+        const track = tracks[i];
+        if (track.kind === this.kind_) {
+          return track;
+        }
+      }
+    }
+
+    /**
+     * Get the caption for the ChaptersButton based on the track label. This will also
+     * use the current tracks localized kind as a fallback if a label does not exist.
+     *
+     * @return {string}
+     *         The tracks current label or the localized track kind.
+     */
+    getMenuCaption() {
+      if (this.track_ && this.track_.label) {
+        return this.track_.label;
+      }
+      return this.localize(toTitleCase$1(this.kind_));
+    }
+
+    /**
+     * Create menu from chapter track
+     *
+     * @return { import('../../menu/menu').default }
+     *         New menu for the chapter buttons
+     */
+    createMenu() {
+      this.options_.title = this.getMenuCaption();
+      return super.createMenu();
+    }
+
+    /**
+     * Create a menu item for each text track
+     *
+     * @return  { import('./text-track-menu-item').default[] }
+     *         Array of menu items
+     */
+    createItems() {
+      const items = [];
+      if (!this.track_) {
+        return items;
+      }
+      const cues = this.track_.cues;
+      if (!cues) {
+        return items;
+      }
+      for (let i = 0, l = cues.length; i < l; i++) {
+        const cue = cues[i];
+        const mi = new ChaptersTrackMenuItem(this.player_, {
+          track: this.track_,
+          cue
+        });
+        items.push(mi);
+      }
+      return items;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  ChaptersButton.prototype.kind_ = 'chapters';
+
+  /**
+   * The text that should display over the `ChaptersButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  ChaptersButton.prototype.controlText_ = 'Chapters';
+  Component$1.registerComponent('ChaptersButton', ChaptersButton);
+
+  /**
+   * @file descriptions-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting descriptions
+   *
+   * @extends TextTrackButton
+   */
+  class DescriptionsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('audio-description');
+      const tracks = player.textTracks();
+      const changeHandler = bind_(this, this.handleTracksChange);
+      tracks.addEventListener('change', changeHandler);
+      this.on('dispose', function () {
+        tracks.removeEventListener('change', changeHandler);
+      });
+    }
+
+    /**
+     * Handle text track change
+     *
+     * @param {Event} event
+     *        The event that caused this function to run
+     *
+     * @listens TextTrackList#change
+     */
+    handleTracksChange(event) {
+      const tracks = this.player().textTracks();
+      let disabled = false;
+
+      // Check whether a track of a different kind is showing
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (track.kind !== this.kind_ && track.mode === 'showing') {
+          disabled = true;
+          break;
+        }
+      }
+
+      // If another track is showing, disable this menu button
+      if (disabled) {
+        this.disable();
+      } else {
+        this.enable();
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-descriptions-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-descriptions-button ${super.buildWrapperCSSClass()}`;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  DescriptionsButton.prototype.kind_ = 'descriptions';
+
+  /**
+   * The text that should display over the `DescriptionsButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  DescriptionsButton.prototype.controlText_ = 'Descriptions';
+  Component$1.registerComponent('DescriptionsButton', DescriptionsButton);
+
+  /**
+   * @file subtitles-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting subtitles
+   *
+   * @extends TextTrackButton
+   */
+  class SubtitlesButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('subtitles');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-subtitles-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-subtitles-button ${super.buildWrapperCSSClass()}`;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  SubtitlesButton.prototype.kind_ = 'subtitles';
+
+  /**
+   * The text that should display over the `SubtitlesButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  SubtitlesButton.prototype.controlText_ = 'Subtitles';
+  Component$1.registerComponent('SubtitlesButton', SubtitlesButton);
+
+  /**
+   * @file caption-settings-menu-item.js
+   */
+
+  /**
+   * The menu item for caption track settings menu
+   *
+   * @extends TextTrackMenuItem
+   */
+  class CaptionSettingsMenuItem extends TextTrackMenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      options.track = {
+        player,
+        kind: options.kind,
+        label: options.kind + ' settings',
+        selectable: false,
+        default: false,
+        mode: 'disabled'
+      };
+
+      // CaptionSettingsMenuItem has no concept of 'selected'
+      options.selectable = false;
+      options.name = 'CaptionSettingsMenuItem';
+      super(player, options);
+      this.addClass('vjs-texttrack-settings');
+      this.controlText(', opens ' + options.kind + ' settings dialog');
+    }
+
+    /**
+     * This gets called when an `CaptionSettingsMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      this.player().getChild('textTrackSettings').open();
+    }
+
+    /**
+     * Update control text and label on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.kind + ' settings');
+      super.handleLanguagechange();
+    }
+  }
+  Component$1.registerComponent('CaptionSettingsMenuItem', CaptionSettingsMenuItem);
+
+  /**
+   * @file captions-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting captions
+   *
+   * @extends TextTrackButton
+   */
+  class CaptionsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('captions');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-captions-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-captions-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create caption menu items
+     *
+     * @return {CaptionSettingsMenuItem[]}
+     *         The array of current menu items.
+     */
+    createItems() {
+      const items = [];
+      if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks) && this.player().getChild('textTrackSettings')) {
+        items.push(new CaptionSettingsMenuItem(this.player_, {
+          kind: this.kind_
+        }));
+        this.hideThreshold_ += 1;
+      }
+      return super.createItems(items);
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  CaptionsButton.prototype.kind_ = 'captions';
+
+  /**
+   * The text that should display over the `CaptionsButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  CaptionsButton.prototype.controlText_ = 'Captions';
+  Component$1.registerComponent('CaptionsButton', CaptionsButton);
+
+  /**
+   * @file subs-caps-menu-item.js
+   */
+
+  /**
+   * SubsCapsMenuItem has an [cc] icon to distinguish captions from subtitles
+   * in the SubsCapsMenu.
+   *
+   * @extends TextTrackMenuItem
+   */
+  class SubsCapsMenuItem extends TextTrackMenuItem {
+    createEl(type, props, attrs) {
+      const el = super.createEl(type, props, attrs);
+      const parentSpan = el.querySelector('.vjs-menu-item-text');
+      if (this.options_.track.kind === 'captions') {
+        if (this.player_.options_.experimentalSvgIcons) {
+          this.setIcon('captions', el);
+        } else {
+          parentSpan.appendChild(createEl('span', {
+            className: 'vjs-icon-placeholder'
+          }, {
+            'aria-hidden': true
+          }));
+        }
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-control-text',
+          // space added as the text will visually flow with the
+          // label
+          textContent: ` ${this.localize('Captions')}`
+        }));
+      }
+      return el;
+    }
+  }
+  Component$1.registerComponent('SubsCapsMenuItem', SubsCapsMenuItem);
+
+  /**
+   * @file sub-caps-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting captions and/or subtitles
+   *
+   * @extends TextTrackButton
+   */
+  class SubsCapsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+
+      // Although North America uses "captions" in most cases for
+      // "captions and subtitles" other locales use "subtitles"
+      this.label_ = 'subtitles';
+      this.setIcon('subtitles');
+      if (['en', 'en-us', 'en-ca', 'fr-ca'].indexOf(this.player_.language_) > -1) {
+        this.label_ = 'captions';
+        this.setIcon('captions');
+      }
+      this.menuButton_.controlText(toTitleCase$1(this.label_));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-subs-caps-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-subs-caps-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create caption/subtitles menu items
+     *
+     * @return {CaptionSettingsMenuItem[]}
+     *         The array of current menu items.
+     */
+    createItems() {
+      let items = [];
+      if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks) && this.player().getChild('textTrackSettings')) {
+        items.push(new CaptionSettingsMenuItem(this.player_, {
+          kind: this.label_
+        }));
+        this.hideThreshold_ += 1;
+      }
+      items = super.createItems(items, SubsCapsMenuItem);
+      return items;
+    }
+  }
+
+  /**
+   * `kind`s of TextTrack to look for to associate it with this menu.
+   *
+   * @type {array}
+   * @private
+   */
+  SubsCapsButton.prototype.kinds_ = ['captions', 'subtitles'];
+
+  /**
+   * The text that should display over the `SubsCapsButton`s controls.
+   *
+   *
+   * @type {string}
+   * @protected
+   */
+  SubsCapsButton.prototype.controlText_ = 'Subtitles';
+  Component$1.registerComponent('SubsCapsButton', SubsCapsButton);
+
+  /**
+   * @file audio-track-menu-item.js
+   */
+
+  /**
+   * An {@link AudioTrack} {@link MenuItem}
+   *
+   * @extends MenuItem
+   */
+  class AudioTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const tracks = player.audioTracks();
+
+      // Modify options for parent MenuItem class's init.
+      options.label = track.label || track.language || 'Unknown';
+      options.selected = track.enabled;
+      super(player, options);
+      this.track = track;
+      this.addClass(`vjs-${track.kind}-menu-item`);
+      const changeHandler = (...args) => {
+        this.handleTracksChange.apply(this, args);
+      };
+      tracks.addEventListener('change', changeHandler);
+      this.on('dispose', () => {
+        tracks.removeEventListener('change', changeHandler);
+      });
+    }
+    createEl(type, props, attrs) {
+      const el = super.createEl(type, props, attrs);
+      const parentSpan = el.querySelector('.vjs-menu-item-text');
+      if (['main-desc', 'description'].indexOf(this.options_.track.kind) >= 0) {
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-control-text',
+          textContent: ' ' + this.localize('Descriptions')
+        }));
+      }
+      return el;
+    }
+
+    /**
+     * This gets called when an `AudioTrackMenuItem is "clicked". See {@link ClickableComponent}
+     * for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick(event);
+
+      // the audio track list will automatically toggle other tracks
+      // off for us.
+      this.track.enabled = true;
+
+      // when native audio tracks are used, we want to make sure that other tracks are turned off
+      if (this.player_.tech_.featuresNativeAudioTracks) {
+        const tracks = this.player_.audioTracks();
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+
+          // skip the current track since we enabled it above
+          if (track === this.track) {
+            continue;
+          }
+          track.enabled = track === this.track;
+        }
+      }
+    }
+
+    /**
+     * Handle any {@link AudioTrack} change.
+     *
+     * @param {Event} [event]
+     *        The {@link AudioTrackList#change} event that caused this to run.
+     *
+     * @listens AudioTrackList#change
+     */
+    handleTracksChange(event) {
+      this.selected(this.track.enabled);
+    }
+  }
+  Component$1.registerComponent('AudioTrackMenuItem', AudioTrackMenuItem);
+
+  /**
+   * @file audio-track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific {@link AudioTrack} types.
+   *
+   * @extends TrackButton
+   */
+  class AudioTrackButton extends TrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param {Player} player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.tracks = player.audioTracks();
+      super(player, options);
+      this.setIcon('audio');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-audio-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-audio-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create a menu item for each audio track
+     *
+     * @param {AudioTrackMenuItem[]} [items=[]]
+     *        An array of existing menu items to use.
+     *
+     * @return {AudioTrackMenuItem[]}
+     *         An array of menu items
+     */
+    createItems(items = []) {
+      // if there's only one audio track, there no point in showing it
+      this.hideThreshold_ = 1;
+      const tracks = this.player_.audioTracks();
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        items.push(new AudioTrackMenuItem(this.player_, {
+          track,
+          // MenuItem is selectable
+          selectable: true,
+          // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+          multiSelectable: false
+        }));
+      }
+      return items;
+    }
+  }
+
+  /**
+   * The text that should display over the `AudioTrackButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  AudioTrackButton.prototype.controlText_ = 'Audio Track';
+  Component$1.registerComponent('AudioTrackButton', AudioTrackButton);
+
+  /**
+   * @file playback-rate-menu-item.js
+   */
+
+  /**
+   * The specific menu item type for selecting a playback rate.
+   *
+   * @extends MenuItem
+   */
+  class PlaybackRateMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const label = options.rate;
+      const rate = parseFloat(label, 10);
+
+      // Modify options for parent MenuItem class's init.
+      options.label = label;
+      options.selected = rate === player.playbackRate();
+      options.selectable = true;
+      options.multiSelectable = false;
+      super(player, options);
+      this.label = label;
+      this.rate = rate;
+      this.on(player, 'ratechange', e => this.update(e));
+    }
+
+    /**
+     * This gets called when an `PlaybackRateMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick();
+      this.player().playbackRate(this.rate);
+    }
+
+    /**
+     * Update the PlaybackRateMenuItem when the playbackrate changes.
+     *
+     * @param {Event} [event]
+     *        The `ratechange` event that caused this function to run.
+     *
+     * @listens Player#ratechange
+     */
+    update(event) {
+      this.selected(this.player().playbackRate() === this.rate);
+    }
+  }
+
+  /**
+   * The text that should display over the `PlaybackRateMenuItem`s controls. Added for localization.
+   *
+   * @type {string}
+   * @private
+   */
+  PlaybackRateMenuItem.prototype.contentElType = 'button';
+  Component$1.registerComponent('PlaybackRateMenuItem', PlaybackRateMenuItem);
+
+  /**
+   * @file playback-rate-menu-button.js
+   */
+
+  /**
+   * The component for controlling the playback rate.
+   *
+   * @extends MenuButton
+   */
+  class PlaybackRateMenuButton extends MenuButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);
+      this.updateVisibility();
+      this.updateLabel();
+      this.on(player, 'loadstart', e => this.updateVisibility(e));
+      this.on(player, 'ratechange', e => this.updateLabel(e));
+      this.on(player, 'playbackrateschange', e => this.handlePlaybackRateschange(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl();
+      this.labelElId_ = 'vjs-playback-rate-value-label-' + this.id_;
+      this.labelEl_ = createEl('div', {
+        className: 'vjs-playback-rate-value',
+        id: this.labelElId_,
+        textContent: '1x'
+      });
+      el.appendChild(this.labelEl_);
+      return el;
+    }
+    dispose() {
+      this.labelEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-playback-rate ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-playback-rate ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create the list of menu items. Specific to each subclass.
+     *
+     */
+    createItems() {
+      const rates = this.playbackRates();
+      const items = [];
+      for (let i = rates.length - 1; i >= 0; i--) {
+        items.push(new PlaybackRateMenuItem(this.player(), {
+          rate: rates[i] + 'x'
+        }));
+      }
+      return items;
+    }
+
+    /**
+     * On playbackrateschange, update the menu to account for the new items.
+     *
+     * @listens Player#playbackrateschange
+     */
+    handlePlaybackRateschange(event) {
+      this.update();
+    }
+
+    /**
+     * Get possible playback rates
+     *
+     * @return {Array}
+     *         All possible playback rates
+     */
+    playbackRates() {
+      const player = this.player();
+      return player.playbackRates && player.playbackRates() || [];
+    }
+
+    /**
+     * Get whether playback rates is supported by the tech
+     * and an array of playback rates exists
+     *
+     * @return {boolean}
+     *         Whether changing playback rate is supported
+     */
+    playbackRateSupported() {
+      return this.player().tech_ && this.player().tech_.featuresPlaybackRate && this.playbackRates() && this.playbackRates().length > 0;
+    }
+
+    /**
+     * Hide playback rate controls when they're no playback rate options to select
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#loadstart
+     */
+    updateVisibility(event) {
+      if (this.playbackRateSupported()) {
+        this.removeClass('vjs-hidden');
+      } else {
+        this.addClass('vjs-hidden');
+      }
+    }
+
+    /**
+     * Update button label when rate changed
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#ratechange
+     */
+    updateLabel(event) {
+      if (this.playbackRateSupported()) {
+        this.labelEl_.textContent = this.player().playbackRate() + 'x';
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `PlaybackRateMenuButton`s controls.
+   *
+   * Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PlaybackRateMenuButton.prototype.controlText_ = 'Playback Rate';
+  Component$1.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton);
+
+  /**
+   * @file spacer.js
+   */
+
+  /**
+   * Just an empty spacer element that can be used as an append point for plugins, etc.
+   * Also can be used to create space between elements when necessary.
+   *
+   * @extends Component
+   */
+  class Spacer extends Component$1 {
+    /**
+    * Builds the default DOM `className`.
+    *
+    * @return {string}
+    *         The DOM `className` for this object.
+    */
+    buildCSSClass() {
+      return `vjs-spacer ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(tag = 'div', props = {}, attributes = {}) {
+      if (!props.className) {
+        props.className = this.buildCSSClass();
+      }
+      return super.createEl(tag, props, attributes);
+    }
+  }
+  Component$1.registerComponent('Spacer', Spacer);
+
+  /**
+   * @file custom-control-spacer.js
+   */
+
+  /**
+   * Spacer specifically meant to be used as an insertion point for new plugins, etc.
+   *
+   * @extends Spacer
+   */
+  class CustomControlSpacer extends Spacer {
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-custom-control-spacer ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildCSSClass(),
+        // No-flex/table-cell mode requires there be some content
+        // in the cell to fill the remaining space of the table.
+        textContent: '\u00a0'
+      });
+    }
+  }
+  Component$1.registerComponent('CustomControlSpacer', CustomControlSpacer);
+
+  /**
+   * @file control-bar.js
+   */
+
+  /**
+   * Container of main controls.
+   *
+   * @extends Component
+   */
+  class ControlBar extends Component$1 {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-control-bar',
+        dir: 'ltr'
+      });
+    }
+  }
+
+  /**
+   * Default options for `ControlBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  ControlBar.prototype.options_ = {
+    children: ['playToggle', 'skipBackward', 'skipForward', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'seekToLive', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'pictureInPictureToggle', 'fullscreenToggle']
+  };
+  Component$1.registerComponent('ControlBar', ControlBar);
+
+  /**
+   * @file error-display.js
+   */
+
+  /**
+   * A display that indicates an error has occurred. This means that the video
+   * is unplayable.
+   *
+   * @extends ModalDialog
+   */
+  class ErrorDisplay extends ModalDialog {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  { import('./player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, 'error', e => {
+        this.open(e);
+      });
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     *
+     * @deprecated Since version 5.
+     */
+    buildCSSClass() {
+      return `vjs-error-display ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Gets the localized error message based on the `Player`s error.
+     *
+     * @return {string}
+     *         The `Player`s error message localized or an empty string.
+     */
+    content() {
+      const error = this.player().error();
+      return error ? this.localize(error.message) : '';
+    }
+  }
+
+  /**
+   * The default options for an `ErrorDisplay`.
+   *
+   * @private
+   */
+  ErrorDisplay.prototype.options_ = Object.assign({}, ModalDialog.prototype.options_, {
+    pauseOnOpen: false,
+    fillAlways: true,
+    temporary: false,
+    uncloseable: true
+  });
+  Component$1.registerComponent('ErrorDisplay', ErrorDisplay);
+
+  /**
+   * @file text-track-settings.js
+   */
+  const LOCAL_STORAGE_KEY$1 = 'vjs-text-track-settings';
+  const COLOR_BLACK = ['#000', 'Black'];
+  const COLOR_BLUE = ['#00F', 'Blue'];
+  const COLOR_CYAN = ['#0FF', 'Cyan'];
+  const COLOR_GREEN = ['#0F0', 'Green'];
+  const COLOR_MAGENTA = ['#F0F', 'Magenta'];
+  const COLOR_RED = ['#F00', 'Red'];
+  const COLOR_WHITE = ['#FFF', 'White'];
+  const COLOR_YELLOW = ['#FF0', 'Yellow'];
+  const OPACITY_OPAQUE = ['1', 'Opaque'];
+  const OPACITY_SEMI = ['0.5', 'Semi-Transparent'];
+  const OPACITY_TRANS = ['0', 'Transparent'];
+
+  // Configuration for the various <select> elements in the DOM of this component.
+  //
+  // Possible keys include:
+  //
+  // `default`:
+  //   The default option index. Only needs to be provided if not zero.
+  // `parser`:
+  //   A function which is used to parse the value from the selected option in
+  //   a customized way.
+  // `selector`:
+  //   The selector used to find the associated <select> element.
+  const selectConfigs = {
+    backgroundColor: {
+      selector: '.vjs-bg-color > select',
+      id: 'captions-background-color-%s',
+      label: 'Color',
+      options: [COLOR_BLACK, COLOR_WHITE, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
+    },
+    backgroundOpacity: {
+      selector: '.vjs-bg-opacity > select',
+      id: 'captions-background-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_OPAQUE, OPACITY_SEMI, OPACITY_TRANS]
+    },
+    color: {
+      selector: '.vjs-text-color > select',
+      id: 'captions-foreground-color-%s',
+      label: 'Color',
+      options: [COLOR_WHITE, COLOR_BLACK, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
+    },
+    edgeStyle: {
+      selector: '.vjs-edge-style > select',
+      id: '%s',
+      label: 'Text Edge Style',
+      options: [['none', 'None'], ['raised', 'Raised'], ['depressed', 'Depressed'], ['uniform', 'Uniform'], ['dropshadow', 'Drop shadow']]
+    },
+    fontFamily: {
+      selector: '.vjs-font-family > select',
+      id: 'captions-font-family-%s',
+      label: 'Font Family',
+      options: [['proportionalSansSerif', 'Proportional Sans-Serif'], ['monospaceSansSerif', 'Monospace Sans-Serif'], ['proportionalSerif', 'Proportional Serif'], ['monospaceSerif', 'Monospace Serif'], ['casual', 'Casual'], ['script', 'Script'], ['small-caps', 'Small Caps']]
+    },
+    fontPercent: {
+      selector: '.vjs-font-percent > select',
+      id: 'captions-font-size-%s',
+      label: 'Font Size',
+      options: [['0.50', '50%'], ['0.75', '75%'], ['1.00', '100%'], ['1.25', '125%'], ['1.50', '150%'], ['1.75', '175%'], ['2.00', '200%'], ['3.00', '300%'], ['4.00', '400%']],
+      default: 2,
+      parser: v => v === '1.00' ? null : Number(v)
+    },
+    textOpacity: {
+      selector: '.vjs-text-opacity > select',
+      id: 'captions-foreground-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_OPAQUE, OPACITY_SEMI]
+    },
+    // Options for this object are defined below.
+    windowColor: {
+      selector: '.vjs-window-color > select',
+      id: 'captions-window-color-%s',
+      label: 'Color'
+    },
+    // Options for this object are defined below.
+    windowOpacity: {
+      selector: '.vjs-window-opacity > select',
+      id: 'captions-window-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_TRANS, OPACITY_SEMI, OPACITY_OPAQUE]
+    }
+  };
+  selectConfigs.windowColor.options = selectConfigs.backgroundColor.options;
+
+  /**
+   * Get the actual value of an option.
+   *
+   * @param  {string} value
+   *         The value to get
+   *
+   * @param  {Function} [parser]
+   *         Optional function to adjust the value.
+   *
+   * @return {*}
+   *         - Will be `undefined` if no value exists
+   *         - Will be `undefined` if the given value is "none".
+   *         - Will be the actual value otherwise.
+   *
+   * @private
+   */
+  function parseOptionValue(value, parser) {
+    if (parser) {
+      value = parser(value);
+    }
+    if (value && value !== 'none') {
+      return value;
+    }
+  }
+
+  /**
+   * Gets the value of the selected <option> element within a <select> element.
+   *
+   * @param  {Element} el
+   *         the element to look in
+   *
+   * @param  {Function} [parser]
+   *         Optional function to adjust the value.
+   *
+   * @return {*}
+   *         - Will be `undefined` if no value exists
+   *         - Will be `undefined` if the given value is "none".
+   *         - Will be the actual value otherwise.
+   *
+   * @private
+   */
+  function getSelectedOptionValue(el, parser) {
+    const value = el.options[el.options.selectedIndex].value;
+    return parseOptionValue(value, parser);
+  }
+
+  /**
+   * Sets the selected <option> element within a <select> element based on a
+   * given value.
+   *
+   * @param {Element} el
+   *        The element to look in.
+   *
+   * @param {string} value
+   *        the property to look on.
+   *
+   * @param {Function} [parser]
+   *        Optional function to adjust the value before comparing.
+   *
+   * @private
+   */
+  function setSelectedOption(el, value, parser) {
+    if (!value) {
+      return;
+    }
+    for (let i = 0; i < el.options.length; i++) {
+      if (parseOptionValue(el.options[i].value, parser) === value) {
+        el.selectedIndex = i;
+        break;
+      }
+    }
+  }
+
+  /**
+   * Manipulate Text Tracks settings.
+   *
+   * @extends ModalDialog
+   */
+  class TextTrackSettings extends ModalDialog {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player, options) {
+      options.temporary = false;
+      super(player, options);
+      this.updateDisplay = this.updateDisplay.bind(this);
+
+      // fill the modal and pretend we have opened it
+      this.fill();
+      this.hasBeenOpened_ = this.hasBeenFilled_ = true;
+      this.endDialog = createEl('p', {
+        className: 'vjs-control-text',
+        textContent: this.localize('End of dialog window.')
+      });
+      this.el().appendChild(this.endDialog);
+      this.setDefaults();
+
+      // Grab `persistTextTrackSettings` from the player options if not passed in child options
+      if (options.persistTextTrackSettings === undefined) {
+        this.options_.persistTextTrackSettings = this.options_.playerOptions.persistTextTrackSettings;
+      }
+      this.on(this.$('.vjs-done-button'), 'click', () => {
+        this.saveSettings();
+        this.close();
+      });
+      this.on(this.$('.vjs-default-button'), 'click', () => {
+        this.setDefaults();
+        this.updateDisplay();
+      });
+      each(selectConfigs, config => {
+        this.on(this.$(config.selector), 'change', this.updateDisplay);
+      });
+      if (this.options_.persistTextTrackSettings) {
+        this.restoreSettings();
+      }
+    }
+    dispose() {
+      this.endDialog = null;
+      super.dispose();
+    }
+
+    /**
+     * Create a <select> element with configured options.
+     *
+     * @param {string} key
+     *        Configuration key to use during creation.
+     *
+     * @param {string} [legendId]
+     *        Id of associated <legend>.
+     *
+     * @param {string} [type=label]
+     *        Type of labelling element, `label` or `legend`
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElSelect_(key, legendId = '', type = 'label') {
+      const config = selectConfigs[key];
+      const id = config.id.replace('%s', this.id_);
+      const selectLabelledbyIds = [legendId, id].join(' ').trim();
+      const guid = `vjs_select_${newGUID()}`;
+      return [`<${type} id="${id}"${type === 'label' ? ` for="${guid}" class="vjs-label"` : ''}>`, this.localize(config.label), `</${type}>`, `<select aria-labelledby="${selectLabelledbyIds}" id="${guid}">`].concat(config.options.map(o => {
+        const optionId = id + '-' + o[1].replace(/\W+/g, '');
+        return [`<option id="${optionId}" value="${o[0]}" `, `aria-labelledby="${selectLabelledbyIds} ${optionId}">`, this.localize(o[1]), '</option>'].join('');
+      })).concat('</select>').join('');
+    }
+
+    /**
+     * Create foreground color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElFgColor_() {
+      const legendId = `captions-text-legend-${this.id_}`;
+      return ['<fieldset class="vjs-fg vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Text'), '</legend>', '<span class="vjs-text-color">', this.createElSelect_('color', legendId), '</span>', '<span class="vjs-text-opacity vjs-opacity">', this.createElSelect_('textOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create background color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElBgColor_() {
+      const legendId = `captions-background-${this.id_}`;
+      return ['<fieldset class="vjs-bg vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Text Background'), '</legend>', '<span class="vjs-bg-color">', this.createElSelect_('backgroundColor', legendId), '</span>', '<span class="vjs-bg-opacity vjs-opacity">', this.createElSelect_('backgroundOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create window color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElWinColor_() {
+      const legendId = `captions-window-${this.id_}`;
+      return ['<fieldset class="vjs-window vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Caption Area Background'), '</legend>', '<span class="vjs-window-color">', this.createElSelect_('windowColor', legendId), '</span>', '<span class="vjs-window-opacity vjs-opacity">', this.createElSelect_('windowOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create color elements for the component
+     *
+     * @return {Element}
+     *         The element that was created
+     *
+     * @private
+     */
+    createElColors_() {
+      return createEl('div', {
+        className: 'vjs-track-settings-colors',
+        innerHTML: [this.createElFgColor_(), this.createElBgColor_(), this.createElWinColor_()].join('')
+      });
+    }
+
+    /**
+     * Create font elements for the component
+     *
+     * @return {Element}
+     *         The element that was created.
+     *
+     * @private
+     */
+    createElFont_() {
+      return createEl('div', {
+        className: 'vjs-track-settings-font',
+        innerHTML: ['<fieldset class="vjs-font-percent vjs-track-setting">', this.createElSelect_('fontPercent', '', 'legend'), '</fieldset>', '<fieldset class="vjs-edge-style vjs-track-setting">', this.createElSelect_('edgeStyle', '', 'legend'), '</fieldset>', '<fieldset class="vjs-font-family vjs-track-setting">', this.createElSelect_('fontFamily', '', 'legend'), '</fieldset>'].join('')
+      });
+    }
+
+    /**
+     * Create controls for the component
+     *
+     * @return {Element}
+     *         The element that was created.
+     *
+     * @private
+     */
+    createElControls_() {
+      const defaultsDescription = this.localize('restore all settings to the default values');
+      return createEl('div', {
+        className: 'vjs-track-settings-controls',
+        innerHTML: [`<button type="button" class="vjs-default-button" title="${defaultsDescription}">`, this.localize('Reset'), `<span class="vjs-control-text"> ${defaultsDescription}</span>`, '</button>', `<button type="button" class="vjs-done-button">${this.localize('Done')}</button>`].join('')
+      });
+    }
+    content() {
+      return [this.createElColors_(), this.createElFont_(), this.createElControls_()];
+    }
+    label() {
+      return this.localize('Caption Settings Dialog');
+    }
+    description() {
+      return this.localize('Beginning of dialog window. Escape will cancel and close the window.');
+    }
+    buildCSSClass() {
+      return super.buildCSSClass() + ' vjs-text-track-settings';
+    }
+
+    /**
+     * Gets an object of text track settings (or null).
+     *
+     * @return {Object}
+     *         An object with config values parsed from the DOM or localStorage.
+     */
+    getValues() {
+      return reduce(selectConfigs, (accum, config, key) => {
+        const value = getSelectedOptionValue(this.$(config.selector), config.parser);
+        if (value !== undefined) {
+          accum[key] = value;
+        }
+        return accum;
+      }, {});
+    }
+
+    /**
+     * Sets text track settings from an object of values.
+     *
+     * @param {Object} values
+     *        An object with config values parsed from the DOM or localStorage.
+     */
+    setValues(values) {
+      each(selectConfigs, (config, key) => {
+        setSelectedOption(this.$(config.selector), values[key], config.parser);
+      });
+    }
+
+    /**
+     * Sets all `<select>` elements to their default values.
+     */
+    setDefaults() {
+      each(selectConfigs, config => {
+        const index = config.hasOwnProperty('default') ? config.default : 0;
+        this.$(config.selector).selectedIndex = index;
+      });
+    }
+
+    /**
+     * Restore texttrack settings from localStorage
+     */
+    restoreSettings() {
+      let values;
+      try {
+        values = JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_KEY$1));
+      } catch (err) {
+        log$1.warn(err);
+      }
+      if (values) {
+        this.setValues(values);
+      }
+    }
+
+    /**
+     * Save text track settings to localStorage
+     */
+    saveSettings() {
+      if (!this.options_.persistTextTrackSettings) {
+        return;
+      }
+      const values = this.getValues();
+      try {
+        if (Object.keys(values).length) {
+          window.localStorage.setItem(LOCAL_STORAGE_KEY$1, JSON.stringify(values));
+        } else {
+          window.localStorage.removeItem(LOCAL_STORAGE_KEY$1);
+        }
+      } catch (err) {
+        log$1.warn(err);
+      }
+    }
+
+    /**
+     * Update display of text track settings
+     */
+    updateDisplay() {
+      const ttDisplay = this.player_.getChild('textTrackDisplay');
+      if (ttDisplay) {
+        ttDisplay.updateDisplay();
+      }
+    }
+
+    /**
+     * conditionally blur the element and refocus the captions button
+     *
+     * @private
+     */
+    conditionalBlur_() {
+      this.previouslyActiveEl_ = null;
+      const cb = this.player_.controlBar;
+      const subsCapsBtn = cb && cb.subsCapsButton;
+      const ccBtn = cb && cb.captionsButton;
+      if (subsCapsBtn) {
+        subsCapsBtn.focus();
+      } else if (ccBtn) {
+        ccBtn.focus();
+      }
+    }
+
+    /**
+     * Repopulate dialog with new localizations on languagechange
+     */
+    handleLanguagechange() {
+      this.fill();
+    }
+  }
+  Component$1.registerComponent('TextTrackSettings', TextTrackSettings);
+
+  /**
+   * @file resize-manager.js
+   */
+
+  /**
+   * A Resize Manager. It is in charge of triggering `playerresize` on the player in the right conditions.
+   *
+   * It'll either create an iframe and use a debounced resize handler on it or use the new {@link https://wicg.github.io/ResizeObserver/|ResizeObserver}.
+   *
+   * If the ResizeObserver is available natively, it will be used. A polyfill can be passed in as an option.
+   * If a `playerresize` event is not needed, the ResizeManager component can be removed from the player, see the example below.
+   *
+   * @example <caption>How to disable the resize manager</caption>
+   * const player = videojs('#vid', {
+   *   resizeManager: false
+   * });
+   *
+   * @see {@link https://wicg.github.io/ResizeObserver/|ResizeObserver specification}
+   *
+   * @extends Component
+   */
+  class ResizeManager extends Component$1 {
+    /**
+     * Create the ResizeManager.
+     *
+     * @param {Object} player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of ResizeManager options.
+     *
+     * @param {Object} [options.ResizeObserver]
+     *        A polyfill for ResizeObserver can be passed in here.
+     *        If this is set to null it will ignore the native ResizeObserver and fall back to the iframe fallback.
+     */
+    constructor(player, options) {
+      let RESIZE_OBSERVER_AVAILABLE = options.ResizeObserver || window.ResizeObserver;
+
+      // if `null` was passed, we want to disable the ResizeObserver
+      if (options.ResizeObserver === null) {
+        RESIZE_OBSERVER_AVAILABLE = false;
+      }
+
+      // Only create an element when ResizeObserver isn't available
+      const options_ = merge$2({
+        createEl: !RESIZE_OBSERVER_AVAILABLE,
+        reportTouchActivity: false
+      }, options);
+      super(player, options_);
+      this.ResizeObserver = options.ResizeObserver || window.ResizeObserver;
+      this.loadListener_ = null;
+      this.resizeObserver_ = null;
+      this.debouncedHandler_ = debounce(() => {
+        this.resizeHandler();
+      }, 100, false, this);
+      if (RESIZE_OBSERVER_AVAILABLE) {
+        this.resizeObserver_ = new this.ResizeObserver(this.debouncedHandler_);
+        this.resizeObserver_.observe(player.el());
+      } else {
+        this.loadListener_ = () => {
+          if (!this.el_ || !this.el_.contentWindow) {
+            return;
+          }
+          const debouncedHandler_ = this.debouncedHandler_;
+          let unloadListener_ = this.unloadListener_ = function () {
+            off(this, 'resize', debouncedHandler_);
+            off(this, 'unload', unloadListener_);
+            unloadListener_ = null;
+          };
+
+          // safari and edge can unload the iframe before resizemanager dispose
+          // we have to dispose of event handlers correctly before that happens
+          on(this.el_.contentWindow, 'unload', unloadListener_);
+          on(this.el_.contentWindow, 'resize', debouncedHandler_);
+        };
+        this.one('load', this.loadListener_);
+      }
+    }
+    createEl() {
+      return super.createEl('iframe', {
+        className: 'vjs-resize-manager',
+        tabIndex: -1,
+        title: this.localize('No content')
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Called when a resize is triggered on the iframe or a resize is observed via the ResizeObserver
+     *
+     * @fires Player#playerresize
+     */
+    resizeHandler() {
+      /**
+       * Called when the player size has changed
+       *
+       * @event Player#playerresize
+       * @type {Event}
+       */
+      // make sure player is still around to trigger
+      // prevents this from causing an error after dispose
+      if (!this.player_ || !this.player_.trigger) {
+        return;
+      }
+      this.player_.trigger('playerresize');
+    }
+    dispose() {
+      if (this.debouncedHandler_) {
+        this.debouncedHandler_.cancel();
+      }
+      if (this.resizeObserver_) {
+        if (this.player_.el()) {
+          this.resizeObserver_.unobserve(this.player_.el());
+        }
+        this.resizeObserver_.disconnect();
+      }
+      if (this.loadListener_) {
+        this.off('load', this.loadListener_);
+      }
+      if (this.el_ && this.el_.contentWindow && this.unloadListener_) {
+        this.unloadListener_.call(this.el_.contentWindow);
+      }
+      this.ResizeObserver = null;
+      this.resizeObserver = null;
+      this.debouncedHandler_ = null;
+      this.loadListener_ = null;
+      super.dispose();
+    }
+  }
+  Component$1.registerComponent('ResizeManager', ResizeManager);
+
+  const defaults = {
+    trackingThreshold: 20,
+    liveTolerance: 15
+  };
+
+  /*
+    track when we are at the live edge, and other helpers for live playback */
+
+  /**
+   * A class for checking live current time and determining when the player
+   * is at or behind the live edge.
+   */
+  class LiveTracker extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {number} [options.trackingThreshold=20]
+     *        Number of seconds of live window (seekableEnd - seekableStart) that
+     *        media needs to have before the liveui will be shown.
+     *
+     * @param {number} [options.liveTolerance=15]
+     *        Number of seconds behind live that we have to be
+     *        before we will be considered non-live. Note that this will only
+     *        be used when playing at the live edge. This allows large seekable end
+     *        changes to not effect whether we are live or not.
+     */
+    constructor(player, options) {
+      // LiveTracker does not need an element
+      const options_ = merge$2(defaults, options, {
+        createEl: false
+      });
+      super(player, options_);
+      this.trackLiveHandler_ = () => this.trackLive_();
+      this.handlePlay_ = e => this.handlePlay(e);
+      this.handleFirstTimeupdate_ = e => this.handleFirstTimeupdate(e);
+      this.handleSeeked_ = e => this.handleSeeked(e);
+      this.seekToLiveEdge_ = e => this.seekToLiveEdge(e);
+      this.reset_();
+      this.on(this.player_, 'durationchange', e => this.handleDurationchange(e));
+      // we should try to toggle tracking on canplay as native playback engines, like Safari
+      // may not have the proper values for things like seekableEnd until then
+      this.on(this.player_, 'canplay', () => this.toggleTracking());
+    }
+
+    /**
+     * all the functionality for tracking when seek end changes
+     * and for tracking how far past seek end we should be
+     */
+    trackLive_() {
+      const seekable = this.player_.seekable();
+
+      // skip undefined seekable
+      if (!seekable || !seekable.length) {
+        return;
+      }
+      const newTime = Number(window.performance.now().toFixed(4));
+      const deltaTime = this.lastTime_ === -1 ? 0 : (newTime - this.lastTime_) / 1000;
+      this.lastTime_ = newTime;
+      this.pastSeekEnd_ = this.pastSeekEnd() + deltaTime;
+      const liveCurrentTime = this.liveCurrentTime();
+      const currentTime = this.player_.currentTime();
+
+      // we are behind live if any are true
+      // 1. the player is paused
+      // 2. the user seeked to a location 2 seconds away from live
+      // 3. the difference between live and current time is greater
+      //    liveTolerance which defaults to 15s
+      let isBehind = this.player_.paused() || this.seekedBehindLive_ || Math.abs(liveCurrentTime - currentTime) > this.options_.liveTolerance;
+
+      // we cannot be behind if
+      // 1. until we have not seen a timeupdate yet
+      // 2. liveCurrentTime is Infinity, which happens on Android and Native Safari
+      if (!this.timeupdateSeen_ || liveCurrentTime === Infinity) {
+        isBehind = false;
+      }
+      if (isBehind !== this.behindLiveEdge_) {
+        this.behindLiveEdge_ = isBehind;
+        this.trigger('liveedgechange');
+      }
+    }
+
+    /**
+     * handle a durationchange event on the player
+     * and start/stop tracking accordingly.
+     */
+    handleDurationchange() {
+      this.toggleTracking();
+    }
+
+    /**
+     * start/stop tracking
+     */
+    toggleTracking() {
+      if (this.player_.duration() === Infinity && this.liveWindow() >= this.options_.trackingThreshold) {
+        if (this.player_.options_.liveui) {
+          this.player_.addClass('vjs-liveui');
+        }
+        this.startTracking();
+      } else {
+        this.player_.removeClass('vjs-liveui');
+        this.stopTracking();
+      }
+    }
+
+    /**
+     * start tracking live playback
+     */
+    startTracking() {
+      if (this.isTracking()) {
+        return;
+      }
+
+      // If we haven't seen a timeupdate, we need to check whether playback
+      // began before this component started tracking. This can happen commonly
+      // when using autoplay.
+      if (!this.timeupdateSeen_) {
+        this.timeupdateSeen_ = this.player_.hasStarted();
+      }
+      this.trackingInterval_ = this.setInterval(this.trackLiveHandler_, UPDATE_REFRESH_INTERVAL);
+      this.trackLive_();
+      this.on(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+      if (!this.timeupdateSeen_) {
+        this.one(this.player_, 'play', this.handlePlay_);
+        this.one(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+      } else {
+        this.on(this.player_, 'seeked', this.handleSeeked_);
+      }
+    }
+
+    /**
+     * handle the first timeupdate on the player if it wasn't already playing
+     * when live tracker started tracking.
+     */
+    handleFirstTimeupdate() {
+      this.timeupdateSeen_ = true;
+      this.on(this.player_, 'seeked', this.handleSeeked_);
+    }
+
+    /**
+     * Keep track of what time a seek starts, and listen for seeked
+     * to find where a seek ends.
+     */
+    handleSeeked() {
+      const timeDiff = Math.abs(this.liveCurrentTime() - this.player_.currentTime());
+      this.seekedBehindLive_ = this.nextSeekedFromUser_ && timeDiff > 2;
+      this.nextSeekedFromUser_ = false;
+      this.trackLive_();
+    }
+
+    /**
+     * handle the first play on the player, and make sure that we seek
+     * right to the live edge.
+     */
+    handlePlay() {
+      this.one(this.player_, 'timeupdate', this.seekToLiveEdge_);
+    }
+
+    /**
+     * Stop tracking, and set all internal variables to
+     * their initial value.
+     */
+    reset_() {
+      this.lastTime_ = -1;
+      this.pastSeekEnd_ = 0;
+      this.lastSeekEnd_ = -1;
+      this.behindLiveEdge_ = true;
+      this.timeupdateSeen_ = false;
+      this.seekedBehindLive_ = false;
+      this.nextSeekedFromUser_ = false;
+      this.clearInterval(this.trackingInterval_);
+      this.trackingInterval_ = null;
+      this.off(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+      this.off(this.player_, 'seeked', this.handleSeeked_);
+      this.off(this.player_, 'play', this.handlePlay_);
+      this.off(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+      this.off(this.player_, 'timeupdate', this.seekToLiveEdge_);
+    }
+
+    /**
+     * The next seeked event is from the user. Meaning that any seek
+     * > 2s behind live will be considered behind live for real and
+     * liveTolerance will be ignored.
+     */
+    nextSeekedFromUser() {
+      this.nextSeekedFromUser_ = true;
+    }
+
+    /**
+     * stop tracking live playback
+     */
+    stopTracking() {
+      if (!this.isTracking()) {
+        return;
+      }
+      this.reset_();
+      this.trigger('liveedgechange');
+    }
+
+    /**
+     * A helper to get the player seekable end
+     * so that we don't have to null check everywhere
+     *
+     * @return {number}
+     *         The furthest seekable end or Infinity.
+     */
+    seekableEnd() {
+      const seekable = this.player_.seekable();
+      const seekableEnds = [];
+      let i = seekable ? seekable.length : 0;
+      while (i--) {
+        seekableEnds.push(seekable.end(i));
+      }
+
+      // grab the furthest seekable end after sorting, or if there are none
+      // default to Infinity
+      return seekableEnds.length ? seekableEnds.sort()[seekableEnds.length - 1] : Infinity;
+    }
+
+    /**
+     * A helper to get the player seekable start
+     * so that we don't have to null check everywhere
+     *
+     * @return {number}
+     *         The earliest seekable start or 0.
+     */
+    seekableStart() {
+      const seekable = this.player_.seekable();
+      const seekableStarts = [];
+      let i = seekable ? seekable.length : 0;
+      while (i--) {
+        seekableStarts.push(seekable.start(i));
+      }
+
+      // grab the first seekable start after sorting, or if there are none
+      // default to 0
+      return seekableStarts.length ? seekableStarts.sort()[0] : 0;
+    }
+
+    /**
+     * Get the live time window aka
+     * the amount of time between seekable start and
+     * live current time.
+     *
+     * @return {number}
+     *         The amount of seconds that are seekable in
+     *         the live video.
+     */
+    liveWindow() {
+      const liveCurrentTime = this.liveCurrentTime();
+
+      // if liveCurrenTime is Infinity then we don't have a liveWindow at all
+      if (liveCurrentTime === Infinity) {
+        return 0;
+      }
+      return liveCurrentTime - this.seekableStart();
+    }
+
+    /**
+     * Determines if the player is live, only checks if this component
+     * is tracking live playback or not
+     *
+     * @return {boolean}
+     *         Whether liveTracker is tracking
+     */
+    isLive() {
+      return this.isTracking();
+    }
+
+    /**
+     * Determines if currentTime is at the live edge and won't fall behind
+     * on each seekableendchange
+     *
+     * @return {boolean}
+     *         Whether playback is at the live edge
+     */
+    atLiveEdge() {
+      return !this.behindLiveEdge();
+    }
+
+    /**
+     * get what we expect the live current time to be
+     *
+     * @return {number}
+     *         The expected live current time
+     */
+    liveCurrentTime() {
+      return this.pastSeekEnd() + this.seekableEnd();
+    }
+
+    /**
+     * The number of seconds that have occurred after seekable end
+     * changed. This will be reset to 0 once seekable end changes.
+     *
+     * @return {number}
+     *         Seconds past the current seekable end
+     */
+    pastSeekEnd() {
+      const seekableEnd = this.seekableEnd();
+      if (this.lastSeekEnd_ !== -1 && seekableEnd !== this.lastSeekEnd_) {
+        this.pastSeekEnd_ = 0;
+      }
+      this.lastSeekEnd_ = seekableEnd;
+      return this.pastSeekEnd_;
+    }
+
+    /**
+     * If we are currently behind the live edge, aka currentTime will be
+     * behind on a seekableendchange
+     *
+     * @return {boolean}
+     *         If we are behind the live edge
+     */
+    behindLiveEdge() {
+      return this.behindLiveEdge_;
+    }
+
+    /**
+     * Whether live tracker is currently tracking or not.
+     */
+    isTracking() {
+      return typeof this.trackingInterval_ === 'number';
+    }
+
+    /**
+     * Seek to the live edge if we are behind the live edge
+     */
+    seekToLiveEdge() {
+      this.seekedBehindLive_ = false;
+      if (this.atLiveEdge()) {
+        return;
+      }
+      this.nextSeekedFromUser_ = false;
+      this.player_.currentTime(this.liveCurrentTime());
+    }
+
+    /**
+     * Dispose of liveTracker
+     */
+    dispose() {
+      this.stopTracking();
+      super.dispose();
+    }
+  }
+  Component$1.registerComponent('LiveTracker', LiveTracker);
+
+  /**
+   * Displays an element over the player which contains an optional title and
+   * description for the current content.
+   *
+   * Much of the code for this component originated in the now obsolete
+   * videojs-dock plugin: https://github.com/brightcove/videojs-dock/
+   *
+   * @extends Component
+   */
+  class TitleBar extends Component$1 {
+    constructor(player, options) {
+      super(player, options);
+      this.on('statechanged', e => this.updateDom_());
+      this.updateDom_();
+    }
+
+    /**
+     * Create the `TitleBar`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      this.els = {
+        title: createEl('div', {
+          className: 'vjs-title-bar-title',
+          id: `vjs-title-bar-title-${newGUID()}`
+        }),
+        description: createEl('div', {
+          className: 'vjs-title-bar-description',
+          id: `vjs-title-bar-description-${newGUID()}`
+        })
+      };
+      return createEl('div', {
+        className: 'vjs-title-bar'
+      }, {}, values$1(this.els));
+    }
+
+    /**
+     * Updates the DOM based on the component's state object.
+     */
+    updateDom_() {
+      const tech = this.player_.tech_;
+      const techEl = tech && tech.el_;
+      const techAriaAttrs = {
+        title: 'aria-labelledby',
+        description: 'aria-describedby'
+      };
+      ['title', 'description'].forEach(k => {
+        const value = this.state[k];
+        const el = this.els[k];
+        const techAriaAttr = techAriaAttrs[k];
+        emptyEl(el);
+        if (value) {
+          textContent(el, value);
+        }
+
+        // If there is a tech element available, update its ARIA attributes
+        // according to whether a title and/or description have been provided.
+        if (techEl) {
+          techEl.removeAttribute(techAriaAttr);
+          if (value) {
+            techEl.setAttribute(techAriaAttr, el.id);
+          }
+        }
+      });
+      if (this.state.title || this.state.description) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+
+    /**
+     * Update the contents of the title bar component with new title and
+     * description text.
+     *
+     * If both title and description are missing, the title bar will be hidden.
+     *
+     * If either title or description are present, the title bar will be visible.
+     *
+     * NOTE: Any previously set value will be preserved. To unset a previously
+     * set value, you must pass an empty string or null.
+     *
+     * For example:
+     *
+     * ```
+     * update({title: 'foo', description: 'bar'}) // title: 'foo', description: 'bar'
+     * update({description: 'bar2'}) // title: 'foo', description: 'bar2'
+     * update({title: ''}) // title: '', description: 'bar2'
+     * update({title: 'foo', description: null}) // title: 'foo', description: null
+     * ```
+     *
+     * @param  {Object} [options={}]
+     *         An options object. When empty, the title bar will be hidden.
+     *
+     * @param  {string} [options.title]
+     *         A title to display in the title bar.
+     *
+     * @param  {string} [options.description]
+     *         A description to display in the title bar.
+     */
+    update(options) {
+      this.setState(options);
+    }
+
+    /**
+     * Dispose the component.
+     */
+    dispose() {
+      const tech = this.player_.tech_;
+      const techEl = tech && tech.el_;
+      if (techEl) {
+        techEl.removeAttribute('aria-labelledby');
+        techEl.removeAttribute('aria-describedby');
+      }
+      super.dispose();
+      this.els = null;
+    }
+  }
+  Component$1.registerComponent('TitleBar', TitleBar);
+
+  /**
+   * This function is used to fire a sourceset when there is something
+   * similar to `mediaEl.load()` being called. It will try to find the source via
+   * the `src` attribute and then the `<source>` elements. It will then fire `sourceset`
+   * with the source that was found or empty string if we cannot know. If it cannot
+   * find a source then `sourceset` will not be fired.
+   *
+   * @param { import('./html5').default } tech
+   *        The tech object that sourceset was setup on
+   *
+   * @return {boolean}
+   *         returns false if the sourceset was not fired and true otherwise.
+   */
+  const sourcesetLoad = tech => {
+    const el = tech.el();
+
+    // if `el.src` is set, that source will be loaded.
+    if (el.hasAttribute('src')) {
+      tech.triggerSourceset(el.src);
+      return true;
+    }
+
+    /**
+     * Since there isn't a src property on the media element, source elements will be used for
+     * implementing the source selection algorithm. This happens asynchronously and
+     * for most cases were there is more than one source we cannot tell what source will
+     * be loaded, without re-implementing the source selection algorithm. At this time we are not
+     * going to do that. There are three special cases that we do handle here though:
+     *
+     * 1. If there are no sources, do not fire `sourceset`.
+     * 2. If there is only one `<source>` with a `src` property/attribute that is our `src`
+     * 3. If there is more than one `<source>` but all of them have the same `src` url.
+     *    That will be our src.
+     */
+    const sources = tech.$$('source');
+    const srcUrls = [];
+    let src = '';
+
+    // if there are no sources, do not fire sourceset
+    if (!sources.length) {
+      return false;
+    }
+
+    // only count valid/non-duplicate source elements
+    for (let i = 0; i < sources.length; i++) {
+      const url = sources[i].src;
+      if (url && srcUrls.indexOf(url) === -1) {
+        srcUrls.push(url);
+      }
+    }
+
+    // there were no valid sources
+    if (!srcUrls.length) {
+      return false;
+    }
+
+    // there is only one valid source element url
+    // use that
+    if (srcUrls.length === 1) {
+      src = srcUrls[0];
+    }
+    tech.triggerSourceset(src);
+    return true;
+  };
+
+  /**
+   * our implementation of an `innerHTML` descriptor for browsers
+   * that do not have one.
+   */
+  const innerHTMLDescriptorPolyfill = Object.defineProperty({}, 'innerHTML', {
+    get() {
+      return this.cloneNode(true).innerHTML;
+    },
+    set(v) {
+      // make a dummy node to use innerHTML on
+      const dummy = document.createElement(this.nodeName.toLowerCase());
+
+      // set innerHTML to the value provided
+      dummy.innerHTML = v;
+
+      // make a document fragment to hold the nodes from dummy
+      const docFrag = document.createDocumentFragment();
+
+      // copy all of the nodes created by the innerHTML on dummy
+      // to the document fragment
+      while (dummy.childNodes.length) {
+        docFrag.appendChild(dummy.childNodes[0]);
+      }
+
+      // remove content
+      this.innerText = '';
+
+      // now we add all of that html in one by appending the
+      // document fragment. This is how innerHTML does it.
+      window.Element.prototype.appendChild.call(this, docFrag);
+
+      // then return the result that innerHTML's setter would
+      return this.innerHTML;
+    }
+  });
+
+  /**
+   * Get a property descriptor given a list of priorities and the
+   * property to get.
+   */
+  const getDescriptor = (priority, prop) => {
+    let descriptor = {};
+    for (let i = 0; i < priority.length; i++) {
+      descriptor = Object.getOwnPropertyDescriptor(priority[i], prop);
+      if (descriptor && descriptor.set && descriptor.get) {
+        break;
+      }
+    }
+    descriptor.enumerable = true;
+    descriptor.configurable = true;
+    return descriptor;
+  };
+  const getInnerHTMLDescriptor = tech => getDescriptor([tech.el(), window.HTMLMediaElement.prototype, window.Element.prototype, innerHTMLDescriptorPolyfill], 'innerHTML');
+
+  /**
+   * Patches browser internal functions so that we can tell synchronously
+   * if a `<source>` was appended to the media element. For some reason this
+   * causes a `sourceset` if the the media element is ready and has no source.
+   * This happens when:
+   * - The page has just loaded and the media element does not have a source.
+   * - The media element was emptied of all sources, then `load()` was called.
+   *
+   * It does this by patching the following functions/properties when they are supported:
+   *
+   * - `append()` - can be used to add a `<source>` element to the media element
+   * - `appendChild()` - can be used to add a `<source>` element to the media element
+   * - `insertAdjacentHTML()` -  can be used to add a `<source>` element to the media element
+   * - `innerHTML` -  can be used to add a `<source>` element to the media element
+   *
+   * @param {Html5} tech
+   *        The tech object that sourceset is being setup on.
+   */
+  const firstSourceWatch = function (tech) {
+    const el = tech.el();
+
+    // make sure firstSourceWatch isn't setup twice.
+    if (el.resetSourceWatch_) {
+      return;
+    }
+    const old = {};
+    const innerDescriptor = getInnerHTMLDescriptor(tech);
+    const appendWrapper = appendFn => (...args) => {
+      const retval = appendFn.apply(el, args);
+      sourcesetLoad(tech);
+      return retval;
+    };
+    ['append', 'appendChild', 'insertAdjacentHTML'].forEach(k => {
+      if (!el[k]) {
+        return;
+      }
+
+      // store the old function
+      old[k] = el[k];
+
+      // call the old function with a sourceset if a source
+      // was loaded
+      el[k] = appendWrapper(old[k]);
+    });
+    Object.defineProperty(el, 'innerHTML', merge$2(innerDescriptor, {
+      set: appendWrapper(innerDescriptor.set)
+    }));
+    el.resetSourceWatch_ = () => {
+      el.resetSourceWatch_ = null;
+      Object.keys(old).forEach(k => {
+        el[k] = old[k];
+      });
+      Object.defineProperty(el, 'innerHTML', innerDescriptor);
+    };
+
+    // on the first sourceset, we need to revert our changes
+    tech.one('sourceset', el.resetSourceWatch_);
+  };
+
+  /**
+   * our implementation of a `src` descriptor for browsers
+   * that do not have one
+   */
+  const srcDescriptorPolyfill = Object.defineProperty({}, 'src', {
+    get() {
+      if (this.hasAttribute('src')) {
+        return getAbsoluteURL(window.Element.prototype.getAttribute.call(this, 'src'));
+      }
+      return '';
+    },
+    set(v) {
+      window.Element.prototype.setAttribute.call(this, 'src', v);
+      return v;
+    }
+  });
+  const getSrcDescriptor = tech => getDescriptor([tech.el(), window.HTMLMediaElement.prototype, srcDescriptorPolyfill], 'src');
+
+  /**
+   * setup `sourceset` handling on the `Html5` tech. This function
+   * patches the following element properties/functions:
+   *
+   * - `src` - to determine when `src` is set
+   * - `setAttribute()` - to determine when `src` is set
+   * - `load()` - this re-triggers the source selection algorithm, and can
+   *              cause a sourceset.
+   *
+   * If there is no source when we are adding `sourceset` support or during a `load()`
+   * we also patch the functions listed in `firstSourceWatch`.
+   *
+   * @param {Html5} tech
+   *        The tech to patch
+   */
+  const setupSourceset = function (tech) {
+    if (!tech.featuresSourceset) {
+      return;
+    }
+    const el = tech.el();
+
+    // make sure sourceset isn't setup twice.
+    if (el.resetSourceset_) {
+      return;
+    }
+    const srcDescriptor = getSrcDescriptor(tech);
+    const oldSetAttribute = el.setAttribute;
+    const oldLoad = el.load;
+    Object.defineProperty(el, 'src', merge$2(srcDescriptor, {
+      set: v => {
+        const retval = srcDescriptor.set.call(el, v);
+
+        // we use the getter here to get the actual value set on src
+        tech.triggerSourceset(el.src);
+        return retval;
+      }
+    }));
+    el.setAttribute = (n, v) => {
+      const retval = oldSetAttribute.call(el, n, v);
+      if (/src/i.test(n)) {
+        tech.triggerSourceset(el.src);
+      }
+      return retval;
+    };
+    el.load = () => {
+      const retval = oldLoad.call(el);
+
+      // if load was called, but there was no source to fire
+      // sourceset on. We have to watch for a source append
+      // as that can trigger a `sourceset` when the media element
+      // has no source
+      if (!sourcesetLoad(tech)) {
+        tech.triggerSourceset('');
+        firstSourceWatch(tech);
+      }
+      return retval;
+    };
+    if (el.currentSrc) {
+      tech.triggerSourceset(el.currentSrc);
+    } else if (!sourcesetLoad(tech)) {
+      firstSourceWatch(tech);
+    }
+    el.resetSourceset_ = () => {
+      el.resetSourceset_ = null;
+      el.load = oldLoad;
+      el.setAttribute = oldSetAttribute;
+      Object.defineProperty(el, 'src', srcDescriptor);
+      if (el.resetSourceWatch_) {
+        el.resetSourceWatch_();
+      }
+    };
+  };
+
+  /**
+   * @file html5.js
+   */
+
+  /**
+   * HTML5 Media Controller - Wrapper for HTML5 Media API
+   *
+   * @mixes Tech~SourceHandlerAdditions
+   * @extends Tech
+   */
+  class Html5 extends Tech {
+    /**
+    * Create an instance of this Tech.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    *
+    * @param {Function} [ready]
+    *        Callback function to call when the `HTML5` Tech is ready.
+    */
+    constructor(options, ready) {
+      super(options, ready);
+      const source = options.source;
+      let crossoriginTracks = false;
+      this.featuresVideoFrameCallback = this.featuresVideoFrameCallback && this.el_.tagName === 'VIDEO';
+
+      // Set the source if one is provided
+      // 1) Check if the source is new (if not, we want to keep the original so playback isn't interrupted)
+      // 2) Check to see if the network state of the tag was failed at init, and if so, reset the source
+      // anyway so the error gets fired.
+      if (source && (this.el_.currentSrc !== source.src || options.tag && options.tag.initNetworkState_ === 3)) {
+        this.setSource(source);
+      } else {
+        this.handleLateInit_(this.el_);
+      }
+
+      // setup sourceset after late sourceset/init
+      if (options.enableSourceset) {
+        this.setupSourcesetHandling_();
+      }
+      this.isScrubbing_ = false;
+      if (this.el_.hasChildNodes()) {
+        const nodes = this.el_.childNodes;
+        let nodesLength = nodes.length;
+        const removeNodes = [];
+        while (nodesLength--) {
+          const node = nodes[nodesLength];
+          const nodeName = node.nodeName.toLowerCase();
+          if (nodeName === 'track') {
+            if (!this.featuresNativeTextTracks) {
+              // Empty video tag tracks so the built-in player doesn't use them also.
+              // This may not be fast enough to stop HTML5 browsers from reading the tags
+              // so we'll need to turn off any default tracks if we're manually doing
+              // captions and subtitles. videoElement.textTracks
+              removeNodes.push(node);
+            } else {
+              // store HTMLTrackElement and TextTrack to remote list
+              this.remoteTextTrackEls().addTrackElement_(node);
+              this.remoteTextTracks().addTrack(node.track);
+              this.textTracks().addTrack(node.track);
+              if (!crossoriginTracks && !this.el_.hasAttribute('crossorigin') && isCrossOrigin(node.src)) {
+                crossoriginTracks = true;
+              }
+            }
+          }
+        }
+        for (let i = 0; i < removeNodes.length; i++) {
+          this.el_.removeChild(removeNodes[i]);
+        }
+      }
+      this.proxyNativeTracks_();
+      if (this.featuresNativeTextTracks && crossoriginTracks) {
+        log$1.warn('Text Tracks are being loaded from another origin but the crossorigin attribute isn\'t used.\n' + 'This may prevent text tracks from loading.');
+      }
+
+      // prevent iOS Safari from disabling metadata text tracks during native playback
+      this.restoreMetadataTracksInIOSNativePlayer_();
+
+      // Determine if native controls should be used
+      // Our goal should be to get the custom controls on mobile solid everywhere
+      // so we can remove this all together. Right now this will block custom
+      // controls on touch enabled laptops like the Chrome Pixel
+      if ((TOUCH_ENABLED || IS_IPHONE) && options.nativeControlsForTouch === true) {
+        this.setControls(true);
+      }
+
+      // on iOS, we want to proxy `webkitbeginfullscreen` and `webkitendfullscreen`
+      // into a `fullscreenchange` event
+      this.proxyWebkitFullscreen_();
+      this.triggerReady();
+    }
+
+    /**
+     * Dispose of `HTML5` media element and remove all tracks.
+     */
+    dispose() {
+      if (this.el_ && this.el_.resetSourceset_) {
+        this.el_.resetSourceset_();
+      }
+      Html5.disposeMediaElement(this.el_);
+      this.options_ = null;
+
+      // tech will handle clearing of the emulated track list
+      super.dispose();
+    }
+
+    /**
+     * Modify the media element so that we can detect when
+     * the source is changed. Fires `sourceset` just after the source has changed
+     */
+    setupSourcesetHandling_() {
+      setupSourceset(this);
+    }
+
+    /**
+     * When a captions track is enabled in the iOS Safari native player, all other
+     * tracks are disabled (including metadata tracks), which nulls all of their
+     * associated cue points. This will restore metadata tracks to their pre-fullscreen
+     * state in those cases so that cue points are not needlessly lost.
+     *
+     * @private
+     */
+    restoreMetadataTracksInIOSNativePlayer_() {
+      const textTracks = this.textTracks();
+      let metadataTracksPreFullscreenState;
+
+      // captures a snapshot of every metadata track's current state
+      const takeMetadataTrackSnapshot = () => {
+        metadataTracksPreFullscreenState = [];
+        for (let i = 0; i < textTracks.length; i++) {
+          const track = textTracks[i];
+          if (track.kind === 'metadata') {
+            metadataTracksPreFullscreenState.push({
+              track,
+              storedMode: track.mode
+            });
+          }
+        }
+      };
+
+      // snapshot each metadata track's initial state, and update the snapshot
+      // each time there is a track 'change' event
+      takeMetadataTrackSnapshot();
+      textTracks.addEventListener('change', takeMetadataTrackSnapshot);
+      this.on('dispose', () => textTracks.removeEventListener('change', takeMetadataTrackSnapshot));
+      const restoreTrackMode = () => {
+        for (let i = 0; i < metadataTracksPreFullscreenState.length; i++) {
+          const storedTrack = metadataTracksPreFullscreenState[i];
+          if (storedTrack.track.mode === 'disabled' && storedTrack.track.mode !== storedTrack.storedMode) {
+            storedTrack.track.mode = storedTrack.storedMode;
+          }
+        }
+        // we only want this handler to be executed on the first 'change' event
+        textTracks.removeEventListener('change', restoreTrackMode);
+      };
+
+      // when we enter fullscreen playback, stop updating the snapshot and
+      // restore all track modes to their pre-fullscreen state
+      this.on('webkitbeginfullscreen', () => {
+        textTracks.removeEventListener('change', takeMetadataTrackSnapshot);
+
+        // remove the listener before adding it just in case it wasn't previously removed
+        textTracks.removeEventListener('change', restoreTrackMode);
+        textTracks.addEventListener('change', restoreTrackMode);
+      });
+
+      // start updating the snapshot again after leaving fullscreen
+      this.on('webkitendfullscreen', () => {
+        // remove the listener before adding it just in case it wasn't previously removed
+        textTracks.removeEventListener('change', takeMetadataTrackSnapshot);
+        textTracks.addEventListener('change', takeMetadataTrackSnapshot);
+
+        // remove the restoreTrackMode handler in case it wasn't triggered during fullscreen playback
+        textTracks.removeEventListener('change', restoreTrackMode);
+      });
+    }
+
+    /**
+     * Attempt to force override of tracks for the given type
+     *
+     * @param {string} type - Track type to override, possible values include 'Audio',
+     * 'Video', and 'Text'.
+     * @param {boolean} override - If set to true native audio/video will be overridden,
+     * otherwise native audio/video will potentially be used.
+     * @private
+     */
+    overrideNative_(type, override) {
+      // If there is no behavioral change don't add/remove listeners
+      if (override !== this[`featuresNative${type}Tracks`]) {
+        return;
+      }
+      const lowerCaseType = type.toLowerCase();
+      if (this[`${lowerCaseType}TracksListeners_`]) {
+        Object.keys(this[`${lowerCaseType}TracksListeners_`]).forEach(eventName => {
+          const elTracks = this.el()[`${lowerCaseType}Tracks`];
+          elTracks.removeEventListener(eventName, this[`${lowerCaseType}TracksListeners_`][eventName]);
+        });
+      }
+      this[`featuresNative${type}Tracks`] = !override;
+      this[`${lowerCaseType}TracksListeners_`] = null;
+      this.proxyNativeTracksForType_(lowerCaseType);
+    }
+
+    /**
+     * Attempt to force override of native audio tracks.
+     *
+     * @param {boolean} override - If set to true native audio will be overridden,
+     * otherwise native audio will potentially be used.
+     */
+    overrideNativeAudioTracks(override) {
+      this.overrideNative_('Audio', override);
+    }
+
+    /**
+     * Attempt to force override of native video tracks.
+     *
+     * @param {boolean} override - If set to true native video will be overridden,
+     * otherwise native video will potentially be used.
+     */
+    overrideNativeVideoTracks(override) {
+      this.overrideNative_('Video', override);
+    }
+
+    /**
+     * Proxy native track list events for the given type to our track
+     * lists if the browser we are playing in supports that type of track list.
+     *
+     * @param {string} name - Track type; values include 'audio', 'video', and 'text'
+     * @private
+     */
+    proxyNativeTracksForType_(name) {
+      const props = NORMAL[name];
+      const elTracks = this.el()[props.getterName];
+      const techTracks = this[props.getterName]();
+      if (!this[`featuresNative${props.capitalName}Tracks`] || !elTracks || !elTracks.addEventListener) {
+        return;
+      }
+      const listeners = {
+        change: e => {
+          const event = {
+            type: 'change',
+            target: techTracks,
+            currentTarget: techTracks,
+            srcElement: techTracks
+          };
+          techTracks.trigger(event);
+
+          // if we are a text track change event, we should also notify the
+          // remote text track list. This can potentially cause a false positive
+          // if we were to get a change event on a non-remote track and
+          // we triggered the event on the remote text track list which doesn't
+          // contain that track. However, best practices mean looping through the
+          // list of tracks and searching for the appropriate mode value, so,
+          // this shouldn't pose an issue
+          if (name === 'text') {
+            this[REMOTE.remoteText.getterName]().trigger(event);
+          }
+        },
+        addtrack(e) {
+          techTracks.addTrack(e.track);
+        },
+        removetrack(e) {
+          techTracks.removeTrack(e.track);
+        }
+      };
+      const removeOldTracks = function () {
+        const removeTracks = [];
+        for (let i = 0; i < techTracks.length; i++) {
+          let found = false;
+          for (let j = 0; j < elTracks.length; j++) {
+            if (elTracks[j] === techTracks[i]) {
+              found = true;
+              break;
+            }
+          }
+          if (!found) {
+            removeTracks.push(techTracks[i]);
+          }
+        }
+        while (removeTracks.length) {
+          techTracks.removeTrack(removeTracks.shift());
+        }
+      };
+      this[props.getterName + 'Listeners_'] = listeners;
+      Object.keys(listeners).forEach(eventName => {
+        const listener = listeners[eventName];
+        elTracks.addEventListener(eventName, listener);
+        this.on('dispose', e => elTracks.removeEventListener(eventName, listener));
+      });
+
+      // Remove (native) tracks that are not used anymore
+      this.on('loadstart', removeOldTracks);
+      this.on('dispose', e => this.off('loadstart', removeOldTracks));
+    }
+
+    /**
+     * Proxy all native track list events to our track lists if the browser we are playing
+     * in supports that type of track list.
+     *
+     * @private
+     */
+    proxyNativeTracks_() {
+      NORMAL.names.forEach(name => {
+        this.proxyNativeTracksForType_(name);
+      });
+    }
+
+    /**
+     * Create the `Html5` Tech's DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      let el = this.options_.tag;
+
+      // Check if this browser supports moving the element into the box.
+      // On the iPhone video will break if you move the element,
+      // So we have to create a brand new element.
+      // If we ingested the player div, we do not need to move the media element.
+      if (!el || !(this.options_.playerElIngest || this.movingMediaElementInDOM)) {
+        // If the original tag is still there, clone and remove it.
+        if (el) {
+          const clone = el.cloneNode(true);
+          if (el.parentNode) {
+            el.parentNode.insertBefore(clone, el);
+          }
+          Html5.disposeMediaElement(el);
+          el = clone;
+        } else {
+          el = document.createElement('video');
+
+          // determine if native controls should be used
+          const tagAttributes = this.options_.tag && getAttributes(this.options_.tag);
+          const attributes = merge$2({}, tagAttributes);
+          if (!TOUCH_ENABLED || this.options_.nativeControlsForTouch !== true) {
+            delete attributes.controls;
+          }
+          setAttributes(el, Object.assign(attributes, {
+            id: this.options_.techId,
+            class: 'vjs-tech'
+          }));
+        }
+        el.playerId = this.options_.playerId;
+      }
+      if (typeof this.options_.preload !== 'undefined') {
+        setAttribute(el, 'preload', this.options_.preload);
+      }
+      if (this.options_.disablePictureInPicture !== undefined) {
+        el.disablePictureInPicture = this.options_.disablePictureInPicture;
+      }
+
+      // Update specific tag settings, in case they were overridden
+      // `autoplay` has to be *last* so that `muted` and `playsinline` are present
+      // when iOS/Safari or other browsers attempt to autoplay.
+      const settingsAttrs = ['loop', 'muted', 'playsinline', 'autoplay'];
+      for (let i = 0; i < settingsAttrs.length; i++) {
+        const attr = settingsAttrs[i];
+        const value = this.options_[attr];
+        if (typeof value !== 'undefined') {
+          if (value) {
+            setAttribute(el, attr, attr);
+          } else {
+            removeAttribute(el, attr);
+          }
+          el[attr] = value;
+        }
+      }
+      return el;
+    }
+
+    /**
+     * This will be triggered if the loadstart event has already fired, before videojs was
+     * ready. Two known examples of when this can happen are:
+     * 1. If we're loading the playback object after it has started loading
+     * 2. The media is already playing the (often with autoplay on) then
+     *
+     * This function will fire another loadstart so that videojs can catchup.
+     *
+     * @fires Tech#loadstart
+     *
+     * @return {undefined}
+     *         returns nothing.
+     */
+    handleLateInit_(el) {
+      if (el.networkState === 0 || el.networkState === 3) {
+        // The video element hasn't started loading the source yet
+        // or didn't find a source
+        return;
+      }
+      if (el.readyState === 0) {
+        // NetworkState is set synchronously BUT loadstart is fired at the
+        // end of the current stack, usually before setInterval(fn, 0).
+        // So at this point we know loadstart may have already fired or is
+        // about to fire, and either way the player hasn't seen it yet.
+        // We don't want to fire loadstart prematurely here and cause a
+        // double loadstart so we'll wait and see if it happens between now
+        // and the next loop, and fire it if not.
+        // HOWEVER, we also want to make sure it fires before loadedmetadata
+        // which could also happen between now and the next loop, so we'll
+        // watch for that also.
+        let loadstartFired = false;
+        const setLoadstartFired = function () {
+          loadstartFired = true;
+        };
+        this.on('loadstart', setLoadstartFired);
+        const triggerLoadstart = function () {
+          // We did miss the original loadstart. Make sure the player
+          // sees loadstart before loadedmetadata
+          if (!loadstartFired) {
+            this.trigger('loadstart');
+          }
+        };
+        this.on('loadedmetadata', triggerLoadstart);
+        this.ready(function () {
+          this.off('loadstart', setLoadstartFired);
+          this.off('loadedmetadata', triggerLoadstart);
+          if (!loadstartFired) {
+            // We did miss the original native loadstart. Fire it now.
+            this.trigger('loadstart');
+          }
+        });
+        return;
+      }
+
+      // From here on we know that loadstart already fired and we missed it.
+      // The other readyState events aren't as much of a problem if we double
+      // them, so not going to go to as much trouble as loadstart to prevent
+      // that unless we find reason to.
+      const eventsToTrigger = ['loadstart'];
+
+      // loadedmetadata: newly equal to HAVE_METADATA (1) or greater
+      eventsToTrigger.push('loadedmetadata');
+
+      // loadeddata: newly increased to HAVE_CURRENT_DATA (2) or greater
+      if (el.readyState >= 2) {
+        eventsToTrigger.push('loadeddata');
+      }
+
+      // canplay: newly increased to HAVE_FUTURE_DATA (3) or greater
+      if (el.readyState >= 3) {
+        eventsToTrigger.push('canplay');
+      }
+
+      // canplaythrough: newly equal to HAVE_ENOUGH_DATA (4)
+      if (el.readyState >= 4) {
+        eventsToTrigger.push('canplaythrough');
+      }
+
+      // We still need to give the player time to add event listeners
+      this.ready(function () {
+        eventsToTrigger.forEach(function (type) {
+          this.trigger(type);
+        }, this);
+      });
+    }
+
+    /**
+     * Set whether we are scrubbing or not.
+     * This is used to decide whether we should use `fastSeek` or not.
+     * `fastSeek` is used to provide trick play on Safari browsers.
+     *
+     * @param {boolean} isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     */
+    setScrubbing(isScrubbing) {
+      this.isScrubbing_ = isScrubbing;
+    }
+
+    /**
+     * Get whether we are scrubbing or not.
+     *
+     * @return {boolean} isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     */
+    scrubbing() {
+      return this.isScrubbing_;
+    }
+
+    /**
+     * Set current time for the `HTML5` tech.
+     *
+     * @param {number} seconds
+     *        Set the current time of the media to this.
+     */
+    setCurrentTime(seconds) {
+      try {
+        if (this.isScrubbing_ && this.el_.fastSeek && IS_ANY_SAFARI) {
+          this.el_.fastSeek(seconds);
+        } else {
+          this.el_.currentTime = seconds;
+        }
+      } catch (e) {
+        log$1(e, 'Video is not ready. (Video.js)');
+        // this.warning(VideoJS.warnings.videoNotReady);
+      }
+    }
+
+    /**
+     * Get the current duration of the HTML5 media element.
+     *
+     * @return {number}
+     *         The duration of the media or 0 if there is no duration.
+     */
+    duration() {
+      // Android Chrome will report duration as Infinity for VOD HLS until after
+      // playback has started, which triggers the live display erroneously.
+      // Return NaN if playback has not started and trigger a durationupdate once
+      // the duration can be reliably known.
+      if (this.el_.duration === Infinity && IS_ANDROID && IS_CHROME && this.el_.currentTime === 0) {
+        // Wait for the first `timeupdate` with currentTime > 0 - there may be
+        // several with 0
+        const checkProgress = () => {
+          if (this.el_.currentTime > 0) {
+            // Trigger durationchange for genuinely live video
+            if (this.el_.duration === Infinity) {
+              this.trigger('durationchange');
+            }
+            this.off('timeupdate', checkProgress);
+          }
+        };
+        this.on('timeupdate', checkProgress);
+        return NaN;
+      }
+      return this.el_.duration || NaN;
+    }
+
+    /**
+     * Get the current width of the HTML5 media element.
+     *
+     * @return {number}
+     *         The width of the HTML5 media element.
+     */
+    width() {
+      return this.el_.offsetWidth;
+    }
+
+    /**
+     * Get the current height of the HTML5 media element.
+     *
+     * @return {number}
+     *         The height of the HTML5 media element.
+     */
+    height() {
+      return this.el_.offsetHeight;
+    }
+
+    /**
+     * Proxy iOS `webkitbeginfullscreen` and `webkitendfullscreen` into
+     * `fullscreenchange` event.
+     *
+     * @private
+     * @fires fullscreenchange
+     * @listens webkitendfullscreen
+     * @listens webkitbeginfullscreen
+     * @listens webkitbeginfullscreen
+     */
+    proxyWebkitFullscreen_() {
+      if (!('webkitDisplayingFullscreen' in this.el_)) {
+        return;
+      }
+      const endFn = function () {
+        this.trigger('fullscreenchange', {
+          isFullscreen: false
+        });
+        // Safari will sometimes set controls on the videoelement when existing fullscreen.
+        if (this.el_.controls && !this.options_.nativeControlsForTouch && this.controls()) {
+          this.el_.controls = false;
+        }
+      };
+      const beginFn = function () {
+        if ('webkitPresentationMode' in this.el_ && this.el_.webkitPresentationMode !== 'picture-in-picture') {
+          this.one('webkitendfullscreen', endFn);
+          this.trigger('fullscreenchange', {
+            isFullscreen: true,
+            // set a flag in case another tech triggers fullscreenchange
+            nativeIOSFullscreen: true
+          });
+        }
+      };
+      this.on('webkitbeginfullscreen', beginFn);
+      this.on('dispose', () => {
+        this.off('webkitbeginfullscreen', beginFn);
+        this.off('webkitendfullscreen', endFn);
+      });
+    }
+
+    /**
+     * Check if fullscreen is supported on the video el.
+     *
+     * @return {boolean}
+     *         - True if fullscreen is supported.
+     *         - False if fullscreen is not supported.
+     */
+    supportsFullScreen() {
+      return typeof this.el_.webkitEnterFullScreen === 'function';
+    }
+
+    /**
+     * Request that the `HTML5` Tech enter fullscreen.
+     */
+    enterFullScreen() {
+      const video = this.el_;
+      if (video.paused && video.networkState <= video.HAVE_METADATA) {
+        // attempt to prime the video element for programmatic access
+        // this isn't necessary on the desktop but shouldn't hurt
+        silencePromise(this.el_.play());
+
+        // playing and pausing synchronously during the transition to fullscreen
+        // can get iOS ~6.1 devices into a play/pause loop
+        this.setTimeout(function () {
+          video.pause();
+          try {
+            video.webkitEnterFullScreen();
+          } catch (e) {
+            this.trigger('fullscreenerror', e);
+          }
+        }, 0);
+      } else {
+        try {
+          video.webkitEnterFullScreen();
+        } catch (e) {
+          this.trigger('fullscreenerror', e);
+        }
+      }
+    }
+
+    /**
+     * Request that the `HTML5` Tech exit fullscreen.
+     */
+    exitFullScreen() {
+      if (!this.el_.webkitDisplayingFullscreen) {
+        this.trigger('fullscreenerror', new Error('The video is not fullscreen'));
+        return;
+      }
+      this.el_.webkitExitFullScreen();
+    }
+
+    /**
+     * Create a floating video window always on top of other windows so that users may
+     * continue consuming media while they interact with other content sites, or
+     * applications on their device.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @return {Promise}
+     *         A promise with a Picture-in-Picture window.
+     */
+    requestPictureInPicture() {
+      return this.el_.requestPictureInPicture();
+    }
+
+    /**
+     * Native requestVideoFrameCallback if supported by browser/tech, or fallback
+     * Don't use rVCF on Safari when DRM is playing, as it doesn't fire
+     * Needs to be checked later than the constructor
+     * This will be a false positive for clear sources loaded after a Fairplay source
+     *
+     * @param {function} cb function to call
+     * @return {number} id of request
+     */
+    requestVideoFrameCallback(cb) {
+      if (this.featuresVideoFrameCallback && !this.el_.webkitKeys) {
+        return this.el_.requestVideoFrameCallback(cb);
+      }
+      return super.requestVideoFrameCallback(cb);
+    }
+
+    /**
+     * Native or fallback requestVideoFrameCallback
+     *
+     * @param {number} id request id to cancel
+     */
+    cancelVideoFrameCallback(id) {
+      if (this.featuresVideoFrameCallback && !this.el_.webkitKeys) {
+        this.el_.cancelVideoFrameCallback(id);
+      } else {
+        super.cancelVideoFrameCallback(id);
+      }
+    }
+
+    /**
+     * A getter/setter for the `Html5` Tech's source object.
+     * > Note: Please use {@link Html5#setSource}
+     *
+     * @param {Tech~SourceObject} [src]
+     *        The source object you want to set on the `HTML5` techs element.
+     *
+     * @return {Tech~SourceObject|undefined}
+     *         - The current source object when a source is not passed in.
+     *         - undefined when setting
+     *
+     * @deprecated Since version 5.
+     */
+    src(src) {
+      if (src === undefined) {
+        return this.el_.src;
+      }
+
+      // Setting src through `src` instead of `setSrc` will be deprecated
+      this.setSrc(src);
+    }
+
+    /**
+     * Reset the tech by removing all sources and then calling
+     * {@link Html5.resetMediaElement}.
+     */
+    reset() {
+      Html5.resetMediaElement(this.el_);
+    }
+
+    /**
+     * Get the current source on the `HTML5` Tech. Falls back to returning the source from
+     * the HTML5 media element.
+     *
+     * @return {Tech~SourceObject}
+     *         The current source object from the HTML5 tech. With a fallback to the
+     *         elements source.
+     */
+    currentSrc() {
+      if (this.currentSource_) {
+        return this.currentSource_.src;
+      }
+      return this.el_.currentSrc;
+    }
+
+    /**
+     * Set controls attribute for the HTML5 media Element.
+     *
+     * @param {string} val
+     *        Value to set the controls attribute to
+     */
+    setControls(val) {
+      this.el_.controls = !!val;
+    }
+
+    /**
+     * Create and returns a remote {@link TextTrack} object.
+     *
+     * @param {string} kind
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+     *
+     * @param {string} [label]
+     *        Label to identify the text track
+     *
+     * @param {string} [language]
+     *        Two letter language abbreviation
+     *
+     * @return {TextTrack}
+     *         The TextTrack that gets created.
+     */
+    addTextTrack(kind, label, language) {
+      if (!this.featuresNativeTextTracks) {
+        return super.addTextTrack(kind, label, language);
+      }
+      return this.el_.addTextTrack(kind, label, language);
+    }
+
+    /**
+     * Creates either native TextTrack or an emulated TextTrack depending
+     * on the value of `featuresNativeTextTracks`
+     *
+     * @param {Object} options
+     *        The object should contain the options to initialize the TextTrack with.
+     *
+     * @param {string} [options.kind]
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+     *
+     * @param {string} [options.label]
+     *        Label to identify the text track
+     *
+     * @param {string} [options.language]
+     *        Two letter language abbreviation.
+     *
+     * @param {boolean} [options.default]
+     *        Default this track to on.
+     *
+     * @param {string} [options.id]
+     *        The internal id to assign this track.
+     *
+     * @param {string} [options.src]
+     *        A source url for the track.
+     *
+     * @return {HTMLTrackElement}
+     *         The track element that gets created.
+     */
+    createRemoteTextTrack(options) {
+      if (!this.featuresNativeTextTracks) {
+        return super.createRemoteTextTrack(options);
+      }
+      const htmlTrackElement = document.createElement('track');
+      if (options.kind) {
+        htmlTrackElement.kind = options.kind;
+      }
+      if (options.label) {
+        htmlTrackElement.label = options.label;
+      }
+      if (options.language || options.srclang) {
+        htmlTrackElement.srclang = options.language || options.srclang;
+      }
+      if (options.default) {
+        htmlTrackElement.default = options.default;
+      }
+      if (options.id) {
+        htmlTrackElement.id = options.id;
+      }
+      if (options.src) {
+        htmlTrackElement.src = options.src;
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Creates a remote text track object and returns an html track element.
+     *
+     * @param {Object} options The object should contain values for
+     * kind, language, label, and src (location of the WebVTT file)
+     * @param {boolean} [manualCleanup=false] if set to true, the TextTrack
+     * will not be removed from the TextTrackList and HtmlTrackElementList
+     * after a source change
+     * @return {HTMLTrackElement} An Html Track Element.
+     * This can be an emulated {@link HTMLTrackElement} or a native one.
+     *
+     */
+    addRemoteTextTrack(options, manualCleanup) {
+      const htmlTrackElement = super.addRemoteTextTrack(options, manualCleanup);
+      if (this.featuresNativeTextTracks) {
+        this.el().appendChild(htmlTrackElement);
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Remove remote `TextTrack` from `TextTrackList` object
+     *
+     * @param {TextTrack} track
+     *        `TextTrack` object to remove
+     */
+    removeRemoteTextTrack(track) {
+      super.removeRemoteTextTrack(track);
+      if (this.featuresNativeTextTracks) {
+        const tracks = this.$$('track');
+        let i = tracks.length;
+        while (i--) {
+          if (track === tracks[i] || track === tracks[i].track) {
+            this.el().removeChild(tracks[i]);
+          }
+        }
+      }
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object}
+     *         An object with supported media playback quality metrics
+     */
+    getVideoPlaybackQuality() {
+      if (typeof this.el().getVideoPlaybackQuality === 'function') {
+        return this.el().getVideoPlaybackQuality();
+      }
+      const videoPlaybackQuality = {};
+      if (typeof this.el().webkitDroppedFrameCount !== 'undefined' && typeof this.el().webkitDecodedFrameCount !== 'undefined') {
+        videoPlaybackQuality.droppedVideoFrames = this.el().webkitDroppedFrameCount;
+        videoPlaybackQuality.totalVideoFrames = this.el().webkitDecodedFrameCount;
+      }
+      if (window.performance) {
+        videoPlaybackQuality.creationTime = window.performance.now();
+      }
+      return videoPlaybackQuality;
+    }
+  }
+
+  /* HTML5 Support Testing ---------------------------------------------------- */
+
+  /**
+   * Element for testing browser HTML5 media capabilities
+   *
+   * @type {Element}
+   * @constant
+   * @private
+   */
+  defineLazyProperty(Html5, 'TEST_VID', function () {
+    if (!isReal()) {
+      return;
+    }
+    const video = document.createElement('video');
+    const track = document.createElement('track');
+    track.kind = 'captions';
+    track.srclang = 'en';
+    track.label = 'English';
+    video.appendChild(track);
+    return video;
+  });
+
+  /**
+   * Check if HTML5 media is supported by this browser/device.
+   *
+   * @return {boolean}
+   *         - True if HTML5 media is supported.
+   *         - False if HTML5 media is not supported.
+   */
+  Html5.isSupported = function () {
+    // IE with no Media Player is a LIAR! (#984)
+    try {
+      Html5.TEST_VID.volume = 0.5;
+    } catch (e) {
+      return false;
+    }
+    return !!(Html5.TEST_VID && Html5.TEST_VID.canPlayType);
+  };
+
+  /**
+   * Check if the tech can support the given type
+   *
+   * @param {string} type
+   *        The mimetype to check
+   * @return {string} 'probably', 'maybe', or '' (empty string)
+   */
+  Html5.canPlayType = function (type) {
+    return Html5.TEST_VID.canPlayType(type);
+  };
+
+  /**
+   * Check if the tech can support the given source
+   *
+   * @param {Object} srcObj
+   *        The source object
+   * @param {Object} options
+   *        The options passed to the tech
+   * @return {string} 'probably', 'maybe', or '' (empty string)
+   */
+  Html5.canPlaySource = function (srcObj, options) {
+    return Html5.canPlayType(srcObj.type);
+  };
+
+  /**
+   * Check if the volume can be changed in this browser/device.
+   * Volume cannot be changed in a lot of mobile devices.
+   * Specifically, it can't be changed from 1 on iOS.
+   *
+   * @return {boolean}
+   *         - True if volume can be controlled
+   *         - False otherwise
+   */
+  Html5.canControlVolume = function () {
+    // IE will error if Windows Media Player not installed #3315
+    try {
+      const volume = Html5.TEST_VID.volume;
+      Html5.TEST_VID.volume = volume / 2 + 0.1;
+      const canControl = volume !== Html5.TEST_VID.volume;
+
+      // With the introduction of iOS 15, there are cases where the volume is read as
+      // changed but reverts back to its original state at the start of the next tick.
+      // To determine whether volume can be controlled on iOS,
+      // a timeout is set and the volume is checked asynchronously.
+      // Since `features` doesn't currently work asynchronously, the value is manually set.
+      if (canControl && IS_IOS) {
+        window.setTimeout(() => {
+          if (Html5 && Html5.prototype) {
+            Html5.prototype.featuresVolumeControl = volume !== Html5.TEST_VID.volume;
+          }
+        });
+
+        // default iOS to false, which will be updated in the timeout above.
+        return false;
+      }
+      return canControl;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if the volume can be muted in this browser/device.
+   * Some devices, e.g. iOS, don't allow changing volume
+   * but permits muting/unmuting.
+   *
+   * @return {boolean}
+   *      - True if volume can be muted
+   *      - False otherwise
+   */
+  Html5.canMuteVolume = function () {
+    try {
+      const muted = Html5.TEST_VID.muted;
+
+      // in some versions of iOS muted property doesn't always
+      // work, so we want to set both property and attribute
+      Html5.TEST_VID.muted = !muted;
+      if (Html5.TEST_VID.muted) {
+        setAttribute(Html5.TEST_VID, 'muted', 'muted');
+      } else {
+        removeAttribute(Html5.TEST_VID, 'muted', 'muted');
+      }
+      return muted !== Html5.TEST_VID.muted;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if the playback rate can be changed in this browser/device.
+   *
+   * @return {boolean}
+   *         - True if playback rate can be controlled
+   *         - False otherwise
+   */
+  Html5.canControlPlaybackRate = function () {
+    // Playback rate API is implemented in Android Chrome, but doesn't do anything
+    // https://github.com/videojs/video.js/issues/3180
+    if (IS_ANDROID && IS_CHROME && CHROME_VERSION < 58) {
+      return false;
+    }
+    // IE will error if Windows Media Player not installed #3315
+    try {
+      const playbackRate = Html5.TEST_VID.playbackRate;
+      Html5.TEST_VID.playbackRate = playbackRate / 2 + 0.1;
+      return playbackRate !== Html5.TEST_VID.playbackRate;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if we can override a video/audio elements attributes, with
+   * Object.defineProperty.
+   *
+   * @return {boolean}
+   *         - True if builtin attributes can be overridden
+   *         - False otherwise
+   */
+  Html5.canOverrideAttributes = function () {
+    // if we cannot overwrite the src/innerHTML property, there is no support
+    // iOS 7 safari for instance cannot do this.
+    try {
+      const noop = () => {};
+      Object.defineProperty(document.createElement('video'), 'src', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('audio'), 'src', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('video'), 'innerHTML', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('audio'), 'innerHTML', {
+        get: noop,
+        set: noop
+      });
+    } catch (e) {
+      return false;
+    }
+    return true;
+  };
+
+  /**
+   * Check to see if native `TextTrack`s are supported by this browser/device.
+   *
+   * @return {boolean}
+   *         - True if native `TextTrack`s are supported.
+   *         - False otherwise
+   */
+  Html5.supportsNativeTextTracks = function () {
+    return IS_ANY_SAFARI || IS_IOS && IS_CHROME;
+  };
+
+  /**
+   * Check to see if native `VideoTrack`s are supported by this browser/device
+   *
+   * @return {boolean}
+   *        - True if native `VideoTrack`s are supported.
+   *        - False otherwise
+   */
+  Html5.supportsNativeVideoTracks = function () {
+    return !!(Html5.TEST_VID && Html5.TEST_VID.videoTracks);
+  };
+
+  /**
+   * Check to see if native `AudioTrack`s are supported by this browser/device
+   *
+   * @return {boolean}
+   *        - True if native `AudioTrack`s are supported.
+   *        - False otherwise
+   */
+  Html5.supportsNativeAudioTracks = function () {
+    return !!(Html5.TEST_VID && Html5.TEST_VID.audioTracks);
+  };
+
+  /**
+   * An array of events available on the Html5 tech.
+   *
+   * @private
+   * @type {Array}
+   */
+  Html5.Events = ['loadstart', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'seeking', 'seeked', 'ended', 'durationchange', 'timeupdate', 'progress', 'play', 'pause', 'ratechange', 'resize', 'volumechange'];
+
+  /**
+   * Boolean indicating whether the `Tech` supports volume control.
+   *
+   * @type {boolean}
+   * @default {@link Html5.canControlVolume}
+   */
+  /**
+   * Boolean indicating whether the `Tech` supports muting volume.
+   *
+   * @type {boolean}
+   * @default {@link Html5.canMuteVolume}
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports changing the speed at which the media
+   * plays. Examples:
+   *   - Set player to play 2x (twice) as fast
+   *   - Set player to play 0.5x (half) as fast
+   *
+   * @type {boolean}
+   * @default {@link Html5.canControlPlaybackRate}
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `sourceset` event.
+   *
+   * @type {boolean}
+   * @default
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `TextTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeTextTracks}
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `VideoTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeVideoTracks}
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `AudioTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeAudioTracks}
+   */
+  [['featuresMuteControl', 'canMuteVolume'], ['featuresPlaybackRate', 'canControlPlaybackRate'], ['featuresSourceset', 'canOverrideAttributes'], ['featuresNativeTextTracks', 'supportsNativeTextTracks'], ['featuresNativeVideoTracks', 'supportsNativeVideoTracks'], ['featuresNativeAudioTracks', 'supportsNativeAudioTracks']].forEach(function ([key, fn]) {
+    defineLazyProperty(Html5.prototype, key, () => Html5[fn](), true);
+  });
+  Html5.prototype.featuresVolumeControl = Html5.canControlVolume();
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the media element
+   * moving in the DOM. iOS breaks if you move the media element, so this is set this to
+   * false there. Everywhere else this should be true.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.movingMediaElementInDOM = !IS_IOS;
+
+  // TODO: Previous comment: No longer appears to be used. Can probably be removed.
+  //       Is this true?
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports automatic media resize
+   * when going into fullscreen.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.featuresFullscreenResize = true;
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the progress event.
+   * If this is false, manual `progress` events will be triggered instead.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.featuresProgressEvents = true;
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the timeupdate event.
+   * If this is false, manual `timeupdate` events will be triggered instead.
+   *
+   * @default
+   */
+  Html5.prototype.featuresTimeupdateEvents = true;
+
+  /**
+   * Whether the HTML5 el supports `requestVideoFrameCallback`
+   *
+   * @type {boolean}
+   */
+  Html5.prototype.featuresVideoFrameCallback = !!(Html5.TEST_VID && Html5.TEST_VID.requestVideoFrameCallback);
+  Html5.disposeMediaElement = function (el) {
+    if (!el) {
+      return;
+    }
+    if (el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+
+    // remove any child track or source nodes to prevent their loading
+    while (el.hasChildNodes()) {
+      el.removeChild(el.firstChild);
+    }
+
+    // remove any src reference. not setting `src=''` because that causes a warning
+    // in firefox
+    el.removeAttribute('src');
+
+    // force the media element to update its loading state by calling load()
+    // however IE on Windows 7N has a bug that throws an error so need a try/catch (#793)
+    if (typeof el.load === 'function') {
+      // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+      (function () {
+        try {
+          el.load();
+        } catch (e) {
+          // not supported
+        }
+      })();
+    }
+  };
+  Html5.resetMediaElement = function (el) {
+    if (!el) {
+      return;
+    }
+    const sources = el.querySelectorAll('source');
+    let i = sources.length;
+    while (i--) {
+      el.removeChild(sources[i]);
+    }
+
+    // remove any src reference.
+    // not setting `src=''` because that throws an error
+    el.removeAttribute('src');
+    if (typeof el.load === 'function') {
+      // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+      (function () {
+        try {
+          el.load();
+        } catch (e) {
+          // satisfy linter
+        }
+      })();
+    }
+  };
+
+  /* Native HTML5 element property wrapping ----------------------------------- */
+  // Wrap native boolean attributes with getters that check both property and attribute
+  // The list is as followed:
+  // muted, defaultMuted, autoplay, controls, loop, playsinline
+  [
+  /**
+   * Get the value of `muted` from the media element. `muted` indicates
+   * that the volume for the media should be set to silent. This does not actually change
+   * the `volume` attribute.
+   *
+   * @method Html5#muted
+   * @return {boolean}
+   *         - True if the value of `volume` should be ignored and the audio set to silent.
+   *         - False if the value of `volume` should be used.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted}
+   */
+  'muted',
+  /**
+   * Get the value of `defaultMuted` from the media element. `defaultMuted` indicates
+   * whether the media should start muted or not. Only changes the default state of the
+   * media. `muted` and `defaultMuted` can have different values. {@link Html5#muted} indicates the
+   * current state.
+   *
+   * @method Html5#defaultMuted
+   * @return {boolean}
+   *         - The value of `defaultMuted` from the media element.
+   *         - True indicates that the media should start muted.
+   *         - False indicates that the media should not start muted
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted}
+   */
+  'defaultMuted',
+  /**
+   * Get the value of `autoplay` from the media element. `autoplay` indicates
+   * that the media should start to play as soon as the page is ready.
+   *
+   * @method Html5#autoplay
+   * @return {boolean}
+   *         - The value of `autoplay` from the media element.
+   *         - True indicates that the media should start as soon as the page loads.
+   *         - False indicates that the media should not start as soon as the page loads.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay}
+   */
+  'autoplay',
+  /**
+   * Get the value of `controls` from the media element. `controls` indicates
+   * whether the native media controls should be shown or hidden.
+   *
+   * @method Html5#controls
+   * @return {boolean}
+   *         - The value of `controls` from the media element.
+   *         - True indicates that native controls should be showing.
+   *         - False indicates that native controls should be hidden.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-controls}
+   */
+  'controls',
+  /**
+   * Get the value of `loop` from the media element. `loop` indicates
+   * that the media should return to the start of the media and continue playing once
+   * it reaches the end.
+   *
+   * @method Html5#loop
+   * @return {boolean}
+   *         - The value of `loop` from the media element.
+   *         - True indicates that playback should seek back to start once
+   *           the end of a media is reached.
+   *         - False indicates that playback should not loop back to the start when the
+   *           end of the media is reached.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop}
+   */
+  'loop',
+  /**
+   * Get the value of `playsinline` from the media element. `playsinline` indicates
+   * to the browser that non-fullscreen playback is preferred when fullscreen
+   * playback is the native default, such as in iOS Safari.
+   *
+   * @method Html5#playsinline
+   * @return {boolean}
+   *         - The value of `playsinline` from the media element.
+   *         - True indicates that the media should play inline.
+   *         - False indicates that the media should not play inline.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+   */
+  'playsinline'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop] || this.el_.hasAttribute(prop);
+    };
+  });
+
+  // Wrap native boolean attributes with setters that set both property and attribute
+  // The list is as followed:
+  // setMuted, setDefaultMuted, setAutoplay, setLoop, setPlaysinline
+  // setControls is special-cased above
+  [
+  /**
+   * Set the value of `muted` on the media element. `muted` indicates that the current
+   * audio level should be silent.
+   *
+   * @method Html5#setMuted
+   * @param {boolean} muted
+   *        - True if the audio should be set to silent
+   *        - False otherwise
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted}
+   */
+  'muted',
+  /**
+   * Set the value of `defaultMuted` on the media element. `defaultMuted` indicates that the current
+   * audio level should be silent, but will only effect the muted level on initial playback..
+   *
+   * @method Html5.prototype.setDefaultMuted
+   * @param {boolean} defaultMuted
+   *        - True if the audio should be set to silent
+   *        - False otherwise
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted}
+   */
+  'defaultMuted',
+  /**
+   * Set the value of `autoplay` on the media element. `autoplay` indicates
+   * that the media should start to play as soon as the page is ready.
+   *
+   * @method Html5#setAutoplay
+   * @param {boolean} autoplay
+   *         - True indicates that the media should start as soon as the page loads.
+   *         - False indicates that the media should not start as soon as the page loads.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay}
+   */
+  'autoplay',
+  /**
+   * Set the value of `loop` on the media element. `loop` indicates
+   * that the media should return to the start of the media and continue playing once
+   * it reaches the end.
+   *
+   * @method Html5#setLoop
+   * @param {boolean} loop
+   *         - True indicates that playback should seek back to start once
+   *           the end of a media is reached.
+   *         - False indicates that playback should not loop back to the start when the
+   *           end of the media is reached.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop}
+   */
+  'loop',
+  /**
+   * Set the value of `playsinline` from the media element. `playsinline` indicates
+   * to the browser that non-fullscreen playback is preferred when fullscreen
+   * playback is the native default, such as in iOS Safari.
+   *
+   * @method Html5#setPlaysinline
+   * @param {boolean} playsinline
+   *         - True indicates that the media should play inline.
+   *         - False indicates that the media should not play inline.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+   */
+  'playsinline'].forEach(function (prop) {
+    Html5.prototype['set' + toTitleCase$1(prop)] = function (v) {
+      this.el_[prop] = v;
+      if (v) {
+        this.el_.setAttribute(prop, prop);
+      } else {
+        this.el_.removeAttribute(prop);
+      }
+    };
+  });
+
+  // Wrap native properties with a getter
+  // The list is as followed
+  // paused, currentTime, buffered, volume, poster, preload, error, seeking
+  // seekable, ended, playbackRate, defaultPlaybackRate, disablePictureInPicture
+  // played, networkState, readyState, videoWidth, videoHeight, crossOrigin
+  [
+  /**
+   * Get the value of `paused` from the media element. `paused` indicates whether the media element
+   * is currently paused or not.
+   *
+   * @method Html5#paused
+   * @return {boolean}
+   *         The value of `paused` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-paused}
+   */
+  'paused',
+  /**
+   * Get the value of `currentTime` from the media element. `currentTime` indicates
+   * the current second that the media is at in playback.
+   *
+   * @method Html5#currentTime
+   * @return {number}
+   *         The value of `currentTime` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-currenttime}
+   */
+  'currentTime',
+  /**
+   * Get the value of `buffered` from the media element. `buffered` is a `TimeRange`
+   * object that represents the parts of the media that are already downloaded and
+   * available for playback.
+   *
+   * @method Html5#buffered
+   * @return {TimeRange}
+   *         The value of `buffered` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-buffered}
+   */
+  'buffered',
+  /**
+   * Get the value of `volume` from the media element. `volume` indicates
+   * the current playback volume of audio for a media. `volume` will be a value from 0
+   * (silent) to 1 (loudest and default).
+   *
+   * @method Html5#volume
+   * @return {number}
+   *         The value of `volume` from the media element. Value will be between 0-1.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume}
+   */
+  'volume',
+  /**
+   * Get the value of `poster` from the media element. `poster` indicates
+   * that the url of an image file that can/will be shown when no media data is available.
+   *
+   * @method Html5#poster
+   * @return {string}
+   *         The value of `poster` from the media element. Value will be a url to an
+   *         image.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-video-poster}
+   */
+  'poster',
+  /**
+   * Get the value of `preload` from the media element. `preload` indicates
+   * what should download before the media is interacted with. It can have the following
+   * values:
+   * - none: nothing should be downloaded
+   * - metadata: poster and the first few frames of the media may be downloaded to get
+   *   media dimensions and other metadata
+   * - auto: allow the media and metadata for the media to be downloaded before
+   *    interaction
+   *
+   * @method Html5#preload
+   * @return {string}
+   *         The value of `preload` from the media element. Will be 'none', 'metadata',
+   *         or 'auto'.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload}
+   */
+  'preload',
+  /**
+   * Get the value of the `error` from the media element. `error` indicates any
+   * MediaError that may have occurred during playback. If error returns null there is no
+   * current error.
+   *
+   * @method Html5#error
+   * @return {MediaError|null}
+   *         The value of `error` from the media element. Will be `MediaError` if there
+   *         is a current error and null otherwise.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-error}
+   */
+  'error',
+  /**
+   * Get the value of `seeking` from the media element. `seeking` indicates whether the
+   * media is currently seeking to a new position or not.
+   *
+   * @method Html5#seeking
+   * @return {boolean}
+   *         - The value of `seeking` from the media element.
+   *         - True indicates that the media is currently seeking to a new position.
+   *         - False indicates that the media is not seeking to a new position at this time.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seeking}
+   */
+  'seeking',
+  /**
+   * Get the value of `seekable` from the media element. `seekable` returns a
+   * `TimeRange` object indicating ranges of time that can currently be `seeked` to.
+   *
+   * @method Html5#seekable
+   * @return {TimeRange}
+   *         The value of `seekable` from the media element. A `TimeRange` object
+   *         indicating the current ranges of time that can be seeked to.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seekable}
+   */
+  'seekable',
+  /**
+   * Get the value of `ended` from the media element. `ended` indicates whether
+   * the media has reached the end or not.
+   *
+   * @method Html5#ended
+   * @return {boolean}
+   *         - The value of `ended` from the media element.
+   *         - True indicates that the media has ended.
+   *         - False indicates that the media has not ended.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-ended}
+   */
+  'ended',
+  /**
+   * Get the value of `playbackRate` from the media element. `playbackRate` indicates
+   * the rate at which the media is currently playing back. Examples:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5#playbackRate
+   * @return {number}
+   *         The value of `playbackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'playbackRate',
+  /**
+   * Get the value of `defaultPlaybackRate` from the media element. `defaultPlaybackRate` indicates
+   * the rate at which the media is currently playing back. This value will not indicate the current
+   * `playbackRate` after playback has started, use {@link Html5#playbackRate} for that.
+   *
+   * Examples:
+   *   - if defaultPlaybackRate is set to 2, media will play twice as fast.
+   *   - if defaultPlaybackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5.prototype.defaultPlaybackRate
+   * @return {number}
+   *         The value of `defaultPlaybackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'defaultPlaybackRate',
+  /**
+   * Get the value of 'disablePictureInPicture' from the video element.
+   *
+   * @method Html5#disablePictureInPicture
+   * @return {boolean} value
+   *         - The value of `disablePictureInPicture` from the video element.
+   *         - True indicates that the video can't be played in Picture-In-Picture mode
+   *         - False indicates that the video can be played in Picture-In-Picture mode
+   *
+   * @see [Spec]{@link https://w3c.github.io/picture-in-picture/#disable-pip}
+   */
+  'disablePictureInPicture',
+  /**
+   * Get the value of `played` from the media element. `played` returns a `TimeRange`
+   * object representing points in the media timeline that have been played.
+   *
+   * @method Html5#played
+   * @return {TimeRange}
+   *         The value of `played` from the media element. A `TimeRange` object indicating
+   *         the ranges of time that have been played.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-played}
+   */
+  'played',
+  /**
+   * Get the value of `networkState` from the media element. `networkState` indicates
+   * the current network state. It returns an enumeration from the following list:
+   * - 0: NETWORK_EMPTY
+   * - 1: NETWORK_IDLE
+   * - 2: NETWORK_LOADING
+   * - 3: NETWORK_NO_SOURCE
+   *
+   * @method Html5#networkState
+   * @return {number}
+   *         The value of `networkState` from the media element. This will be a number
+   *         from the list in the description.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-networkstate}
+   */
+  'networkState',
+  /**
+   * Get the value of `readyState` from the media element. `readyState` indicates
+   * the current state of the media element. It returns an enumeration from the
+   * following list:
+   * - 0: HAVE_NOTHING
+   * - 1: HAVE_METADATA
+   * - 2: HAVE_CURRENT_DATA
+   * - 3: HAVE_FUTURE_DATA
+   * - 4: HAVE_ENOUGH_DATA
+   *
+   * @method Html5#readyState
+   * @return {number}
+   *         The value of `readyState` from the media element. This will be a number
+   *         from the list in the description.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#ready-states}
+   */
+  'readyState',
+  /**
+   * Get the value of `videoWidth` from the video element. `videoWidth` indicates
+   * the current width of the video in css pixels.
+   *
+   * @method Html5#videoWidth
+   * @return {number}
+   *         The value of `videoWidth` from the video element. This will be a number
+   *         in css pixels.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth}
+   */
+  'videoWidth',
+  /**
+   * Get the value of `videoHeight` from the video element. `videoHeight` indicates
+   * the current height of the video in css pixels.
+   *
+   * @method Html5#videoHeight
+   * @return {number}
+   *         The value of `videoHeight` from the video element. This will be a number
+   *         in css pixels.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth}
+   */
+  'videoHeight',
+  /**
+   * Get the value of `crossOrigin` from the media element. `crossOrigin` indicates
+   * to the browser that should sent the cookies along with the requests for the
+   * different assets/playlists
+   *
+   * @method Html5#crossOrigin
+   * @return {string}
+   *         - anonymous indicates that the media should not sent cookies.
+   *         - use-credentials indicates that the media should sent cookies along the requests.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-media-crossorigin}
+   */
+  'crossOrigin'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop];
+    };
+  });
+
+  // Wrap native properties with a setter in this format:
+  // set + toTitleCase(name)
+  // The list is as follows:
+  // setVolume, setSrc, setPoster, setPreload, setPlaybackRate, setDefaultPlaybackRate,
+  // setDisablePictureInPicture, setCrossOrigin
+  [
+  /**
+   * Set the value of `volume` on the media element. `volume` indicates the current
+   * audio level as a percentage in decimal form. This means that 1 is 100%, 0.5 is 50%, and
+   * so on.
+   *
+   * @method Html5#setVolume
+   * @param {number} percentAsDecimal
+   *        The volume percent as a decimal. Valid range is from 0-1.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume}
+   */
+  'volume',
+  /**
+   * Set the value of `src` on the media element. `src` indicates the current
+   * {@link Tech~SourceObject} for the media.
+   *
+   * @method Html5#setSrc
+   * @param {Tech~SourceObject} src
+   *        The source object to set as the current source.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-src}
+   */
+  'src',
+  /**
+   * Set the value of `poster` on the media element. `poster` is the url to
+   * an image file that can/will be shown when no media data is available.
+   *
+   * @method Html5#setPoster
+   * @param {string} poster
+   *        The url to an image that should be used as the `poster` for the media
+   *        element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-poster}
+   */
+  'poster',
+  /**
+   * Set the value of `preload` on the media element. `preload` indicates
+   * what should download before the media is interacted with. It can have the following
+   * values:
+   * - none: nothing should be downloaded
+   * - metadata: poster and the first few frames of the media may be downloaded to get
+   *   media dimensions and other metadata
+   * - auto: allow the media and metadata for the media to be downloaded before
+   *    interaction
+   *
+   * @method Html5#setPreload
+   * @param {string} preload
+   *         The value of `preload` to set on the media element. Must be 'none', 'metadata',
+   *         or 'auto'.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload}
+   */
+  'preload',
+  /**
+   * Set the value of `playbackRate` on the media element. `playbackRate` indicates
+   * the rate at which the media should play back. Examples:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5#setPlaybackRate
+   * @return {number}
+   *         The value of `playbackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'playbackRate',
+  /**
+   * Set the value of `defaultPlaybackRate` on the media element. `defaultPlaybackRate` indicates
+   * the rate at which the media should play back upon initial startup. Changing this value
+   * after a video has started will do nothing. Instead you should used {@link Html5#setPlaybackRate}.
+   *
+   * Example Values:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5.prototype.setDefaultPlaybackRate
+   * @return {number}
+   *         The value of `defaultPlaybackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultplaybackrate}
+   */
+  'defaultPlaybackRate',
+  /**
+   * Prevents the browser from suggesting a Picture-in-Picture context menu
+   * or to request Picture-in-Picture automatically in some cases.
+   *
+   * @method Html5#setDisablePictureInPicture
+   * @param {boolean} value
+   *         The true value will disable Picture-in-Picture mode.
+   *
+   * @see [Spec]{@link https://w3c.github.io/picture-in-picture/#disable-pip}
+   */
+  'disablePictureInPicture',
+  /**
+   * Set the value of `crossOrigin` from the media element. `crossOrigin` indicates
+   * to the browser that should sent the cookies along with the requests for the
+   * different assets/playlists
+   *
+   * @method Html5#setCrossOrigin
+   * @param {string} crossOrigin
+   *         - anonymous indicates that the media should not sent cookies.
+   *         - use-credentials indicates that the media should sent cookies along the requests.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-media-crossorigin}
+   */
+  'crossOrigin'].forEach(function (prop) {
+    Html5.prototype['set' + toTitleCase$1(prop)] = function (v) {
+      this.el_[prop] = v;
+    };
+  });
+
+  // wrap native functions with a function
+  // The list is as follows:
+  // pause, load, play
+  [
+  /**
+   * A wrapper around the media elements `pause` function. This will call the `HTML5`
+   * media elements `pause` function.
+   *
+   * @method Html5#pause
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-pause}
+   */
+  'pause',
+  /**
+   * A wrapper around the media elements `load` function. This will call the `HTML5`s
+   * media element `load` function.
+   *
+   * @method Html5#load
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-load}
+   */
+  'load',
+  /**
+   * A wrapper around the media elements `play` function. This will call the `HTML5`s
+   * media element `play` function.
+   *
+   * @method Html5#play
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-play}
+   */
+  'play'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop]();
+    };
+  });
+  Tech.withSourceHandlers(Html5);
+
+  /**
+   * Native source handler for Html5, simply passes the source to the media element.
+   *
+   * @property {Tech~SourceObject} source
+   *        The source object
+   *
+   * @property {Html5} tech
+   *        The instance of the HTML5 tech.
+   */
+  Html5.nativeSourceHandler = {};
+
+  /**
+   * Check if the media element can play the given mime type.
+   *
+   * @param {string} type
+   *        The mimetype to check
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string)
+   */
+  Html5.nativeSourceHandler.canPlayType = function (type) {
+    // IE without MediaPlayer throws an error (#519)
+    try {
+      return Html5.TEST_VID.canPlayType(type);
+    } catch (e) {
+      return '';
+    }
+  };
+
+  /**
+   * Check if the media element can handle a source natively.
+   *
+   * @param {Tech~SourceObject} source
+   *         The source object
+   *
+   * @param {Object} [options]
+   *         Options to be passed to the tech.
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string).
+   */
+  Html5.nativeSourceHandler.canHandleSource = function (source, options) {
+    // If a type was provided we should rely on that
+    if (source.type) {
+      return Html5.nativeSourceHandler.canPlayType(source.type);
+
+      // If no type, fall back to checking 'video/[EXTENSION]'
+    } else if (source.src) {
+      const ext = getFileExtension(source.src);
+      return Html5.nativeSourceHandler.canPlayType(`video/${ext}`);
+    }
+    return '';
+  };
+
+  /**
+   * Pass the source to the native media element.
+   *
+   * @param {Tech~SourceObject} source
+   *        The source object
+   *
+   * @param {Html5} tech
+   *        The instance of the Html5 tech
+   *
+   * @param {Object} [options]
+   *        The options to pass to the source
+   */
+  Html5.nativeSourceHandler.handleSource = function (source, tech, options) {
+    tech.setSrc(source.src);
+  };
+
+  /**
+   * A noop for the native dispose function, as cleanup is not needed.
+   */
+  Html5.nativeSourceHandler.dispose = function () {};
+
+  // Register the native source handler
+  Html5.registerSourceHandler(Html5.nativeSourceHandler);
+  Tech.registerTech('Html5', Html5);
+
+  /**
+   * @file player.js
+   */
+
+  // The following tech events are simply re-triggered
+  // on the player when they happen
+  const TECH_EVENTS_RETRIGGER = [
+  /**
+   * Fired while the user agent is downloading media data.
+   *
+   * @event Player#progress
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `progress` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechProgress_
+   * @fires Player#progress
+   * @listens Tech#progress
+   */
+  'progress',
+  /**
+   * Fires when the loading of an audio/video is aborted.
+   *
+   * @event Player#abort
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `abort` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechAbort_
+   * @fires Player#abort
+   * @listens Tech#abort
+   */
+  'abort',
+  /**
+   * Fires when the browser is intentionally not getting media data.
+   *
+   * @event Player#suspend
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `suspend` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechSuspend_
+   * @fires Player#suspend
+   * @listens Tech#suspend
+   */
+  'suspend',
+  /**
+   * Fires when the current playlist is empty.
+   *
+   * @event Player#emptied
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `emptied` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechEmptied_
+   * @fires Player#emptied
+   * @listens Tech#emptied
+   */
+  'emptied',
+  /**
+   * Fires when the browser is trying to get media data, but data is not available.
+   *
+   * @event Player#stalled
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `stalled` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechStalled_
+   * @fires Player#stalled
+   * @listens Tech#stalled
+   */
+  'stalled',
+  /**
+   * Fires when the browser has loaded meta data for the audio/video.
+   *
+   * @event Player#loadedmetadata
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `loadedmetadata` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechLoadedmetadata_
+   * @fires Player#loadedmetadata
+   * @listens Tech#loadedmetadata
+   */
+  'loadedmetadata',
+  /**
+   * Fires when the browser has loaded the current frame of the audio/video.
+   *
+   * @event Player#loadeddata
+   * @type {event}
+   */
+  /**
+   * Retrigger the `loadeddata` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechLoaddeddata_
+   * @fires Player#loadeddata
+   * @listens Tech#loadeddata
+   */
+  'loadeddata',
+  /**
+   * Fires when the current playback position has changed.
+   *
+   * @event Player#timeupdate
+   * @type {event}
+   */
+  /**
+   * Retrigger the `timeupdate` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechTimeUpdate_
+   * @fires Player#timeupdate
+   * @listens Tech#timeupdate
+   */
+  'timeupdate',
+  /**
+   * Fires when the video's intrinsic dimensions change
+   *
+   * @event Player#resize
+   * @type {event}
+   */
+  /**
+   * Retrigger the `resize` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechResize_
+   * @fires Player#resize
+   * @listens Tech#resize
+   */
+  'resize',
+  /**
+   * Fires when the volume has been changed
+   *
+   * @event Player#volumechange
+   * @type {event}
+   */
+  /**
+   * Retrigger the `volumechange` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechVolumechange_
+   * @fires Player#volumechange
+   * @listens Tech#volumechange
+   */
+  'volumechange',
+  /**
+   * Fires when the text track has been changed
+   *
+   * @event Player#texttrackchange
+   * @type {event}
+   */
+  /**
+   * Retrigger the `texttrackchange` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechTexttrackchange_
+   * @fires Player#texttrackchange
+   * @listens Tech#texttrackchange
+   */
+  'texttrackchange'];
+
+  // events to queue when playback rate is zero
+  // this is a hash for the sole purpose of mapping non-camel-cased event names
+  // to camel-cased function names
+  const TECH_EVENTS_QUEUE = {
+    canplay: 'CanPlay',
+    canplaythrough: 'CanPlayThrough',
+    playing: 'Playing',
+    seeked: 'Seeked'
+  };
+  const BREAKPOINT_ORDER = ['tiny', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'huge'];
+  const BREAKPOINT_CLASSES = {};
+
+  // grep: vjs-layout-tiny
+  // grep: vjs-layout-x-small
+  // grep: vjs-layout-small
+  // grep: vjs-layout-medium
+  // grep: vjs-layout-large
+  // grep: vjs-layout-x-large
+  // grep: vjs-layout-huge
+  BREAKPOINT_ORDER.forEach(k => {
+    const v = k.charAt(0) === 'x' ? `x-${k.substring(1)}` : k;
+    BREAKPOINT_CLASSES[k] = `vjs-layout-${v}`;
+  });
+  const DEFAULT_BREAKPOINTS = {
+    tiny: 210,
+    xsmall: 320,
+    small: 425,
+    medium: 768,
+    large: 1440,
+    xlarge: 2560,
+    huge: Infinity
+  };
+
+  /**
+   * An instance of the `Player` class is created when any of the Video.js setup methods
+   * are used to initialize a video.
+   *
+   * After an instance has been created it can be accessed globally in three ways:
+   * 1. By calling `videojs.getPlayer('example_video_1');`
+   * 2. By calling `videojs('example_video_1');` (not recommended)
+   * 2. By using it directly via `videojs.players.example_video_1;`
+   *
+   * @extends Component
+   * @global
+   */
+  class Player extends Component$1 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Element} tag
+     *        The original video DOM element used for configuring options.
+     *
+     * @param {Object} [options]
+     *        Object of option names and values.
+     *
+     * @param {Function} [ready]
+     *        Ready callback function.
+     */
+    constructor(tag, options, ready) {
+      // Make sure tag ID exists
+      // also here.. probably better
+      tag.id = tag.id || options.id || `vjs_video_${newGUID()}`;
+
+      // Set Options
+      // The options argument overrides options set in the video tag
+      // which overrides globally set options.
+      // This latter part coincides with the load order
+      // (tag must exist before Player)
+      options = Object.assign(Player.getTagSettings(tag), options);
+
+      // Delay the initialization of children because we need to set up
+      // player properties first, and can't use `this` before `super()`
+      options.initChildren = false;
+
+      // Same with creating the element
+      options.createEl = false;
+
+      // don't auto mixin the evented mixin
+      options.evented = false;
+
+      // we don't want the player to report touch activity on itself
+      // see enableTouchActivity in Component
+      options.reportTouchActivity = false;
+
+      // If language is not set, get the closest lang attribute
+      if (!options.language) {
+        const closest = tag.closest('[lang]');
+        if (closest) {
+          options.language = closest.getAttribute('lang');
+        }
+      }
+
+      // Run base component initializing with new options
+      super(null, options, ready);
+
+      // Create bound methods for document listeners.
+      this.boundDocumentFullscreenChange_ = e => this.documentFullscreenChange_(e);
+      this.boundFullWindowOnEscKey_ = e => this.fullWindowOnEscKey(e);
+      this.boundUpdateStyleEl_ = e => this.updateStyleEl_(e);
+      this.boundApplyInitTime_ = e => this.applyInitTime_(e);
+      this.boundUpdateCurrentBreakpoint_ = e => this.updateCurrentBreakpoint_(e);
+      this.boundHandleTechClick_ = e => this.handleTechClick_(e);
+      this.boundHandleTechDoubleClick_ = e => this.handleTechDoubleClick_(e);
+      this.boundHandleTechTouchStart_ = e => this.handleTechTouchStart_(e);
+      this.boundHandleTechTouchMove_ = e => this.handleTechTouchMove_(e);
+      this.boundHandleTechTouchEnd_ = e => this.handleTechTouchEnd_(e);
+      this.boundHandleTechTap_ = e => this.handleTechTap_(e);
+
+      // default isFullscreen_ to false
+      this.isFullscreen_ = false;
+
+      // create logger
+      this.log = createLogger(this.id_);
+
+      // Hold our own reference to fullscreen api so it can be mocked in tests
+      this.fsApi_ = FullscreenApi;
+
+      // Tracks when a tech changes the poster
+      this.isPosterFromTech_ = false;
+
+      // Holds callback info that gets queued when playback rate is zero
+      // and a seek is happening
+      this.queuedCallbacks_ = [];
+
+      // Turn off API access because we're loading a new tech that might load asynchronously
+      this.isReady_ = false;
+
+      // Init state hasStarted_
+      this.hasStarted_ = false;
+
+      // Init state userActive_
+      this.userActive_ = false;
+
+      // Init debugEnabled_
+      this.debugEnabled_ = false;
+
+      // Init state audioOnlyMode_
+      this.audioOnlyMode_ = false;
+
+      // Init state audioPosterMode_
+      this.audioPosterMode_ = false;
+
+      // Init state audioOnlyCache_
+      this.audioOnlyCache_ = {
+        playerHeight: null,
+        hiddenChildren: []
+      };
+
+      // if the global option object was accidentally blown away by
+      // someone, bail early with an informative error
+      if (!this.options_ || !this.options_.techOrder || !this.options_.techOrder.length) {
+        throw new Error('No techOrder specified. Did you overwrite ' + 'videojs.options instead of just changing the ' + 'properties you want to override?');
+      }
+
+      // Store the original tag used to set options
+      this.tag = tag;
+
+      // Store the tag attributes used to restore html5 element
+      this.tagAttributes = tag && getAttributes(tag);
+
+      // Update current language
+      this.language(this.options_.language);
+
+      // Update Supported Languages
+      if (options.languages) {
+        // Normalise player option languages to lowercase
+        const languagesToLower = {};
+        Object.getOwnPropertyNames(options.languages).forEach(function (name) {
+          languagesToLower[name.toLowerCase()] = options.languages[name];
+        });
+        this.languages_ = languagesToLower;
+      } else {
+        this.languages_ = Player.prototype.options_.languages;
+      }
+      this.resetCache_();
+
+      // Set poster
+      /** @type string */
+      this.poster_ = options.poster || '';
+
+      // Set controls
+      /** @type {boolean} */
+      this.controls_ = !!options.controls;
+
+      // Original tag settings stored in options
+      // now remove immediately so native controls don't flash.
+      // May be turned back on by HTML5 tech if nativeControlsForTouch is true
+      tag.controls = false;
+      tag.removeAttribute('controls');
+      this.changingSrc_ = false;
+      this.playCallbacks_ = [];
+      this.playTerminatedQueue_ = [];
+
+      // the attribute overrides the option
+      if (tag.hasAttribute('autoplay')) {
+        this.autoplay(true);
+      } else {
+        // otherwise use the setter to validate and
+        // set the correct value.
+        this.autoplay(this.options_.autoplay);
+      }
+
+      // check plugins
+      if (options.plugins) {
+        Object.keys(options.plugins).forEach(name => {
+          if (typeof this[name] !== 'function') {
+            throw new Error(`plugin "${name}" does not exist`);
+          }
+        });
+      }
+
+      /*
+       * Store the internal state of scrubbing
+       *
+       * @private
+       * @return {Boolean} True if the user is scrubbing
+       */
+      this.scrubbing_ = false;
+      this.el_ = this.createEl();
+
+      // Make this an evented object and use `el_` as its event bus.
+      evented(this, {
+        eventBusKey: 'el_'
+      });
+
+      // listen to document and player fullscreenchange handlers so we receive those events
+      // before a user can receive them so we can update isFullscreen appropriately.
+      // make sure that we listen to fullscreenchange events before everything else to make sure that
+      // our isFullscreen method is updated properly for internal components as well as external.
+      if (this.fsApi_.requestFullscreen) {
+        on(document, this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+        this.on(this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+      }
+      if (this.fluid_) {
+        this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+      }
+      // We also want to pass the original player options to each component and plugin
+      // as well so they don't need to reach back into the player for options later.
+      // We also need to do another copy of this.options_ so we don't end up with
+      // an infinite loop.
+      const playerOptionsCopy = merge$2(this.options_);
+
+      // Load plugins
+      if (options.plugins) {
+        Object.keys(options.plugins).forEach(name => {
+          this[name](options.plugins[name]);
+        });
+      }
+
+      // Enable debug mode to fire debugon event for all plugins.
+      if (options.debug) {
+        this.debug(true);
+      }
+      this.options_.playerOptions = playerOptionsCopy;
+      this.middleware_ = [];
+      this.playbackRates(options.playbackRates);
+      if (options.experimentalSvgIcons) {
+        // Add SVG Sprite to the DOM
+        const parser = new window.DOMParser();
+        const parsedSVG = parser.parseFromString(icons, 'image/svg+xml');
+        const errorNode = parsedSVG.querySelector('parsererror');
+        if (errorNode) {
+          log$1.warn('Failed to load SVG Icons. Falling back to Font Icons.');
+          this.options_.experimentalSvgIcons = null;
+        } else {
+          const sprite = parsedSVG.documentElement;
+          sprite.style.display = 'none';
+          this.el_.appendChild(sprite);
+          this.addClass('vjs-svg-icons-enabled');
+        }
+      }
+      this.initChildren();
+
+      // Set isAudio based on whether or not an audio tag was used
+      this.isAudio(tag.nodeName.toLowerCase() === 'audio');
+
+      // Update controls className. Can't do this when the controls are initially
+      // set because the element doesn't exist yet.
+      if (this.controls()) {
+        this.addClass('vjs-controls-enabled');
+      } else {
+        this.addClass('vjs-controls-disabled');
+      }
+
+      // Set ARIA label and region role depending on player type
+      this.el_.setAttribute('role', 'region');
+      if (this.isAudio()) {
+        this.el_.setAttribute('aria-label', this.localize('Audio Player'));
+      } else {
+        this.el_.setAttribute('aria-label', this.localize('Video Player'));
+      }
+      if (this.isAudio()) {
+        this.addClass('vjs-audio');
+      }
+
+      // TODO: Make this smarter. Toggle user state between touching/mousing
+      // using events, since devices can have both touch and mouse events.
+      // TODO: Make this check be performed again when the window switches between monitors
+      // (See https://github.com/videojs/video.js/issues/5683)
+      if (TOUCH_ENABLED) {
+        this.addClass('vjs-touch-enabled');
+      }
+
+      // iOS Safari has broken hover handling
+      if (!IS_IOS) {
+        this.addClass('vjs-workinghover');
+      }
+
+      // Make player easily findable by ID
+      Player.players[this.id_] = this;
+
+      // Add a major version class to aid css in plugins
+      const majorVersion = version$5.split('.')[0];
+      this.addClass(`vjs-v${majorVersion}`);
+
+      // When the player is first initialized, trigger activity so components
+      // like the control bar show themselves if needed
+      this.userActive(true);
+      this.reportUserActivity();
+      this.one('play', e => this.listenForUserActivity_(e));
+      this.on('keydown', e => this.handleKeyDown(e));
+      this.on('languagechange', e => this.handleLanguagechange(e));
+      this.breakpoints(this.options_.breakpoints);
+      this.responsive(this.options_.responsive);
+
+      // Calling both the audio mode methods after the player is fully
+      // setup to be able to listen to the events triggered by them
+      this.on('ready', () => {
+        // Calling the audioPosterMode method first so that
+        // the audioOnlyMode can take precedence when both options are set to true
+        this.audioPosterMode(this.options_.audioPosterMode);
+        this.audioOnlyMode(this.options_.audioOnlyMode);
+      });
+    }
+
+    /**
+     * Destroys the video player and does any necessary cleanup.
+     *
+     * This is especially helpful if you are dynamically adding and removing videos
+     * to/from the DOM.
+     *
+     * @fires Player#dispose
+     */
+    dispose() {
+      /**
+       * Called when the player is being disposed of.
+       *
+       * @event Player#dispose
+       * @type {Event}
+       */
+      this.trigger('dispose');
+      // prevent dispose from being called twice
+      this.off('dispose');
+
+      // Make sure all player-specific document listeners are unbound. This is
+      off(document, this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+      off(document, 'keydown', this.boundFullWindowOnEscKey_);
+      if (this.styleEl_ && this.styleEl_.parentNode) {
+        this.styleEl_.parentNode.removeChild(this.styleEl_);
+        this.styleEl_ = null;
+      }
+
+      // Kill reference to this player
+      Player.players[this.id_] = null;
+      if (this.tag && this.tag.player) {
+        this.tag.player = null;
+      }
+      if (this.el_ && this.el_.player) {
+        this.el_.player = null;
+      }
+      if (this.tech_) {
+        this.tech_.dispose();
+        this.isPosterFromTech_ = false;
+        this.poster_ = '';
+      }
+      if (this.playerElIngest_) {
+        this.playerElIngest_ = null;
+      }
+      if (this.tag) {
+        this.tag = null;
+      }
+      clearCacheForPlayer(this);
+
+      // remove all event handlers for track lists
+      // all tracks and track listeners are removed on
+      // tech dispose
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        const list = this[props.getterName]();
+
+        // if it is not a native list
+        // we have to manually remove event listeners
+        if (list && list.off) {
+          list.off();
+        }
+      });
+
+      // the actual .el_ is removed here, or replaced if
+      super.dispose({
+        restoreEl: this.options_.restoreEl
+      });
+    }
+
+    /**
+     * Create the `Player`'s DOM element.
+     *
+     * @return {Element}
+     *         The DOM element that gets created.
+     */
+    createEl() {
+      let tag = this.tag;
+      let el;
+      let playerElIngest = this.playerElIngest_ = tag.parentNode && tag.parentNode.hasAttribute && tag.parentNode.hasAttribute('data-vjs-player');
+      const divEmbed = this.tag.tagName.toLowerCase() === 'video-js';
+      if (playerElIngest) {
+        el = this.el_ = tag.parentNode;
+      } else if (!divEmbed) {
+        el = this.el_ = super.createEl('div');
+      }
+
+      // Copy over all the attributes from the tag, including ID and class
+      // ID will now reference player box, not the video tag
+      const attrs = getAttributes(tag);
+      if (divEmbed) {
+        el = this.el_ = tag;
+        tag = this.tag = document.createElement('video');
+        while (el.children.length) {
+          tag.appendChild(el.firstChild);
+        }
+        if (!hasClass(el, 'video-js')) {
+          addClass(el, 'video-js');
+        }
+        el.appendChild(tag);
+        playerElIngest = this.playerElIngest_ = el;
+        // move properties over from our custom `video-js` element
+        // to our new `video` element. This will move things like
+        // `src` or `controls` that were set via js before the player
+        // was initialized.
+        Object.keys(el).forEach(k => {
+          try {
+            tag[k] = el[k];
+          } catch (e) {
+            // we got a a property like outerHTML which we can't actually copy, ignore it
+          }
+        });
+      }
+
+      // set tabindex to -1 to remove the video element from the focus order
+      tag.setAttribute('tabindex', '-1');
+      attrs.tabindex = '-1';
+
+      // Workaround for #4583 on Chrome (on Windows) with JAWS.
+      // See https://github.com/FreedomScientific/VFO-standards-support/issues/78
+      // Note that we can't detect if JAWS is being used, but this ARIA attribute
+      // doesn't change behavior of Chrome if JAWS is not being used
+      if (IS_CHROME && IS_WINDOWS) {
+        tag.setAttribute('role', 'application');
+        attrs.role = 'application';
+      }
+
+      // Remove width/height attrs from tag so CSS can make it 100% width/height
+      tag.removeAttribute('width');
+      tag.removeAttribute('height');
+      if ('width' in attrs) {
+        delete attrs.width;
+      }
+      if ('height' in attrs) {
+        delete attrs.height;
+      }
+      Object.getOwnPropertyNames(attrs).forEach(function (attr) {
+        // don't copy over the class attribute to the player element when we're in a div embed
+        // the class is already set up properly in the divEmbed case
+        // and we want to make sure that the `video-js` class doesn't get lost
+        if (!(divEmbed && attr === 'class')) {
+          el.setAttribute(attr, attrs[attr]);
+        }
+        if (divEmbed) {
+          tag.setAttribute(attr, attrs[attr]);
+        }
+      });
+
+      // Update tag id/class for use as HTML5 playback tech
+      // Might think we should do this after embedding in container so .vjs-tech class
+      // doesn't flash 100% width/height, but class only applies with .video-js parent
+      tag.playerId = tag.id;
+      tag.id += '_html5_api';
+      tag.className = 'vjs-tech';
+
+      // Make player findable on elements
+      tag.player = el.player = this;
+      // Default state of video is paused
+      this.addClass('vjs-paused');
+      const deviceClassNames = ['IS_SMART_TV', 'IS_TIZEN', 'IS_WEBOS', 'IS_ANDROID', 'IS_IPAD', 'IS_IPHONE'].filter(key => browser[key]).map(key => {
+        return 'vjs-device-' + key.substring(3).toLowerCase().replace(/\_/g, '-');
+      });
+      this.addClass(...deviceClassNames);
+
+      // Add a style element in the player that we'll use to set the width/height
+      // of the player in a way that's still overridable by CSS, just like the
+      // video element
+      if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true) {
+        this.styleEl_ = createStyleElement('vjs-styles-dimensions');
+        const defaultsStyleEl = $('.vjs-styles-defaults');
+        const head = $('head');
+        head.insertBefore(this.styleEl_, defaultsStyleEl ? defaultsStyleEl.nextSibling : head.firstChild);
+      }
+      this.fill_ = false;
+      this.fluid_ = false;
+
+      // Pass in the width/height/aspectRatio options which will update the style el
+      this.width(this.options_.width);
+      this.height(this.options_.height);
+      this.fill(this.options_.fill);
+      this.fluid(this.options_.fluid);
+      this.aspectRatio(this.options_.aspectRatio);
+      // support both crossOrigin and crossorigin to reduce confusion and issues around the name
+      this.crossOrigin(this.options_.crossOrigin || this.options_.crossorigin);
+
+      // Hide any links within the video/audio tag,
+      // because IE doesn't hide them completely from screen readers.
+      const links = tag.getElementsByTagName('a');
+      for (let i = 0; i < links.length; i++) {
+        const linkEl = links.item(i);
+        addClass(linkEl, 'vjs-hidden');
+        linkEl.setAttribute('hidden', 'hidden');
+      }
+
+      // insertElFirst seems to cause the networkState to flicker from 3 to 2, so
+      // keep track of the original for later so we can know if the source originally failed
+      tag.initNetworkState_ = tag.networkState;
+
+      // Wrap video tag in div (el/box) container
+      if (tag.parentNode && !playerElIngest) {
+        tag.parentNode.insertBefore(el, tag);
+      }
+
+      // insert the tag as the first child of the player element
+      // then manually add it to the children array so that this.addChild
+      // will work properly for other components
+      //
+      // Breaks iPhone, fixed in HTML5 setup.
+      prependTo(tag, el);
+      this.children_.unshift(tag);
+
+      // Set lang attr on player to ensure CSS :lang() in consistent with player
+      // if it's been set to something different to the doc
+      this.el_.setAttribute('lang', this.language_);
+      this.el_.setAttribute('translate', 'no');
+      this.el_ = el;
+      return el;
+    }
+
+    /**
+     * Get or set the `Player`'s crossOrigin option. For the HTML5 player, this
+     * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+     * behavior.
+     *
+     * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+     *
+     * @param {string|null} [value]
+     *        The value to set the `Player`'s crossOrigin to. If an argument is
+     *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+     *
+     * @return {string|null|undefined}
+     *         - The current crossOrigin value of the `Player` when getting.
+     *         - undefined when setting
+     */
+    crossOrigin(value) {
+      // `null` can be set to unset a value
+      if (typeof value === 'undefined') {
+        return this.techGet_('crossOrigin');
+      }
+      if (value !== null && value !== 'anonymous' && value !== 'use-credentials') {
+        log$1.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${value}"`);
+        return;
+      }
+      this.techCall_('setCrossOrigin', value);
+      if (this.posterImage) {
+        this.posterImage.crossOrigin(value);
+      }
+      return;
+    }
+
+    /**
+     * A getter/setter for the `Player`'s width. Returns the player's configured value.
+     * To get the current width use `currentWidth()`.
+     *
+     * @param {number|string} [value]
+     *        CSS value to set the `Player`'s width to.
+     *
+     * @return {number|undefined}
+     *         - The current width of the `Player` when getting.
+     *         - Nothing when setting
+     */
+    width(value) {
+      return this.dimension('width', value);
+    }
+
+    /**
+     * A getter/setter for the `Player`'s height. Returns the player's configured value.
+     * To get the current height use `currentheight()`.
+     *
+     * @param {number|string} [value]
+     *        CSS value to set the `Player`'s height to.
+     *
+     * @return {number|undefined}
+     *         - The current height of the `Player` when getting.
+     *         - Nothing when setting
+     */
+    height(value) {
+      return this.dimension('height', value);
+    }
+
+    /**
+     * A getter/setter for the `Player`'s width & height.
+     *
+     * @param {string} dimension
+     *        This string can be:
+     *        - 'width'
+     *        - 'height'
+     *
+     * @param {number|string} [value]
+     *        Value for dimension specified in the first argument.
+     *
+     * @return {number}
+     *         The dimension arguments value when getting (width/height).
+     */
+    dimension(dimension, value) {
+      const privDimension = dimension + '_';
+      if (value === undefined) {
+        return this[privDimension] || 0;
+      }
+      if (value === '' || value === 'auto') {
+        // If an empty string is given, reset the dimension to be automatic
+        this[privDimension] = undefined;
+        this.updateStyleEl_();
+        return;
+      }
+      const parsedVal = parseFloat(value);
+      if (isNaN(parsedVal)) {
+        log$1.error(`Improper value "${value}" supplied for for ${dimension}`);
+        return;
+      }
+      this[privDimension] = parsedVal;
+      this.updateStyleEl_();
+    }
+
+    /**
+     * A getter/setter/toggler for the vjs-fluid `className` on the `Player`.
+     *
+     * Turning this on will turn off fill mode.
+     *
+     * @param {boolean} [bool]
+     *        - A value of true adds the class.
+     *        - A value of false removes the class.
+     *        - No value will be a getter.
+     *
+     * @return {boolean|undefined}
+     *         - The value of fluid when getting.
+     *         - `undefined` when setting.
+     */
+    fluid(bool) {
+      if (bool === undefined) {
+        return !!this.fluid_;
+      }
+      this.fluid_ = !!bool;
+      if (isEvented(this)) {
+        this.off(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+      }
+      if (bool) {
+        this.addClass('vjs-fluid');
+        this.fill(false);
+        addEventedCallback(this, () => {
+          this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+        });
+      } else {
+        this.removeClass('vjs-fluid');
+      }
+      this.updateStyleEl_();
+    }
+
+    /**
+     * A getter/setter/toggler for the vjs-fill `className` on the `Player`.
+     *
+     * Turning this on will turn off fluid mode.
+     *
+     * @param {boolean} [bool]
+     *        - A value of true adds the class.
+     *        - A value of false removes the class.
+     *        - No value will be a getter.
+     *
+     * @return {boolean|undefined}
+     *         - The value of fluid when getting.
+     *         - `undefined` when setting.
+     */
+    fill(bool) {
+      if (bool === undefined) {
+        return !!this.fill_;
+      }
+      this.fill_ = !!bool;
+      if (bool) {
+        this.addClass('vjs-fill');
+        this.fluid(false);
+      } else {
+        this.removeClass('vjs-fill');
+      }
+    }
+
+    /**
+     * Get/Set the aspect ratio
+     *
+     * @param {string} [ratio]
+     *        Aspect ratio for player
+     *
+     * @return {string|undefined}
+     *         returns the current aspect ratio when getting
+     */
+
+    /**
+     * A getter/setter for the `Player`'s aspect ratio.
+     *
+     * @param {string} [ratio]
+     *        The value to set the `Player`'s aspect ratio to.
+     *
+     * @return {string|undefined}
+     *         - The current aspect ratio of the `Player` when getting.
+     *         - undefined when setting
+     */
+    aspectRatio(ratio) {
+      if (ratio === undefined) {
+        return this.aspectRatio_;
+      }
+
+      // Check for width:height format
+      if (!/^\d+\:\d+$/.test(ratio)) {
+        throw new Error('Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.');
+      }
+      this.aspectRatio_ = ratio;
+
+      // We're assuming if you set an aspect ratio you want fluid mode,
+      // because in fixed mode you could calculate width and height yourself.
+      this.fluid(true);
+      this.updateStyleEl_();
+    }
+
+    /**
+     * Update styles of the `Player` element (height, width and aspect ratio).
+     *
+     * @private
+     * @listens Tech#loadedmetadata
+     */
+    updateStyleEl_() {
+      if (window.VIDEOJS_NO_DYNAMIC_STYLE === true) {
+        const width = typeof this.width_ === 'number' ? this.width_ : this.options_.width;
+        const height = typeof this.height_ === 'number' ? this.height_ : this.options_.height;
+        const techEl = this.tech_ && this.tech_.el();
+        if (techEl) {
+          if (width >= 0) {
+            techEl.width = width;
+          }
+          if (height >= 0) {
+            techEl.height = height;
+          }
+        }
+        return;
+      }
+      let width;
+      let height;
+      let aspectRatio;
+      let idClass;
+
+      // The aspect ratio is either used directly or to calculate width and height.
+      if (this.aspectRatio_ !== undefined && this.aspectRatio_ !== 'auto') {
+        // Use any aspectRatio that's been specifically set
+        aspectRatio = this.aspectRatio_;
+      } else if (this.videoWidth() > 0) {
+        // Otherwise try to get the aspect ratio from the video metadata
+        aspectRatio = this.videoWidth() + ':' + this.videoHeight();
+      } else {
+        // Or use a default. The video element's is 2:1, but 16:9 is more common.
+        aspectRatio = '16:9';
+      }
+
+      // Get the ratio as a decimal we can use to calculate dimensions
+      const ratioParts = aspectRatio.split(':');
+      const ratioMultiplier = ratioParts[1] / ratioParts[0];
+      if (this.width_ !== undefined) {
+        // Use any width that's been specifically set
+        width = this.width_;
+      } else if (this.height_ !== undefined) {
+        // Or calculate the width from the aspect ratio if a height has been set
+        width = this.height_ / ratioMultiplier;
+      } else {
+        // Or use the video's metadata, or use the video el's default of 300
+        width = this.videoWidth() || 300;
+      }
+      if (this.height_ !== undefined) {
+        // Use any height that's been specifically set
+        height = this.height_;
+      } else {
+        // Otherwise calculate the height from the ratio and the width
+        height = width * ratioMultiplier;
+      }
+
+      // Ensure the CSS class is valid by starting with an alpha character
+      if (/^[^a-zA-Z]/.test(this.id())) {
+        idClass = 'dimensions-' + this.id();
+      } else {
+        idClass = this.id() + '-dimensions';
+      }
+
+      // Ensure the right class is still on the player for the style element
+      this.addClass(idClass);
+      setTextContent(this.styleEl_, `
+      .${idClass} {
+        width: ${width}px;
+        height: ${height}px;
+      }
+
+      .${idClass}.vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: ${ratioMultiplier * 100}%;
+      }
+    `);
+    }
+
+    /**
+     * Load/Create an instance of playback {@link Tech} including element
+     * and API methods. Then append the `Tech` element in `Player` as a child.
+     *
+     * @param {string} techName
+     *        name of the playback technology
+     *
+     * @param {string} source
+     *        video source
+     *
+     * @private
+     */
+    loadTech_(techName, source) {
+      // Pause and remove current playback technology
+      if (this.tech_) {
+        this.unloadTech_();
+      }
+      const titleTechName = toTitleCase$1(techName);
+      const camelTechName = techName.charAt(0).toLowerCase() + techName.slice(1);
+
+      // get rid of the HTML5 video tag as soon as we are using another tech
+      if (titleTechName !== 'Html5' && this.tag) {
+        Tech.getTech('Html5').disposeMediaElement(this.tag);
+        this.tag.player = null;
+        this.tag = null;
+      }
+      this.techName_ = titleTechName;
+
+      // Turn off API access because we're loading a new tech that might load asynchronously
+      this.isReady_ = false;
+      let autoplay = this.autoplay();
+
+      // if autoplay is a string (or `true` with normalizeAutoplay: true) we pass false to the tech
+      // because the player is going to handle autoplay on `loadstart`
+      if (typeof this.autoplay() === 'string' || this.autoplay() === true && this.options_.normalizeAutoplay) {
+        autoplay = false;
+      }
+
+      // Grab tech-specific options from player options and add source and parent element to use.
+      const techOptions = {
+        source,
+        autoplay,
+        'nativeControlsForTouch': this.options_.nativeControlsForTouch,
+        'playerId': this.id(),
+        'techId': `${this.id()}_${camelTechName}_api`,
+        'playsinline': this.options_.playsinline,
+        'preload': this.options_.preload,
+        'loop': this.options_.loop,
+        'disablePictureInPicture': this.options_.disablePictureInPicture,
+        'muted': this.options_.muted,
+        'poster': this.poster(),
+        'language': this.language(),
+        'playerElIngest': this.playerElIngest_ || false,
+        'vtt.js': this.options_['vtt.js'],
+        'canOverridePoster': !!this.options_.techCanOverridePoster,
+        'enableSourceset': this.options_.enableSourceset
+      };
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        techOptions[props.getterName] = this[props.privateName];
+      });
+      Object.assign(techOptions, this.options_[titleTechName]);
+      Object.assign(techOptions, this.options_[camelTechName]);
+      Object.assign(techOptions, this.options_[techName.toLowerCase()]);
+      if (this.tag) {
+        techOptions.tag = this.tag;
+      }
+      if (source && source.src === this.cache_.src && this.cache_.currentTime > 0) {
+        techOptions.startTime = this.cache_.currentTime;
+      }
+
+      // Initialize tech instance
+      const TechClass = Tech.getTech(techName);
+      if (!TechClass) {
+        throw new Error(`No Tech named '${titleTechName}' exists! '${titleTechName}' should be registered using videojs.registerTech()'`);
+      }
+      this.tech_ = new TechClass(techOptions);
+
+      // player.triggerReady is always async, so don't need this to be async
+      this.tech_.ready(bind_(this, this.handleTechReady_), true);
+      textTrackConverter.jsonToTextTracks(this.textTracksJson_ || [], this.tech_);
+
+      // Listen to all HTML5-defined events and trigger them on the player
+      TECH_EVENTS_RETRIGGER.forEach(event => {
+        this.on(this.tech_, event, e => this[`handleTech${toTitleCase$1(event)}_`](e));
+      });
+      Object.keys(TECH_EVENTS_QUEUE).forEach(event => {
+        this.on(this.tech_, event, eventObj => {
+          if (this.tech_.playbackRate() === 0 && this.tech_.seeking()) {
+            this.queuedCallbacks_.push({
+              callback: this[`handleTech${TECH_EVENTS_QUEUE[event]}_`].bind(this),
+              event: eventObj
+            });
+            return;
+          }
+          this[`handleTech${TECH_EVENTS_QUEUE[event]}_`](eventObj);
+        });
+      });
+      this.on(this.tech_, 'loadstart', e => this.handleTechLoadStart_(e));
+      this.on(this.tech_, 'sourceset', e => this.handleTechSourceset_(e));
+      this.on(this.tech_, 'waiting', e => this.handleTechWaiting_(e));
+      this.on(this.tech_, 'ended', e => this.handleTechEnded_(e));
+      this.on(this.tech_, 'seeking', e => this.handleTechSeeking_(e));
+      this.on(this.tech_, 'play', e => this.handleTechPlay_(e));
+      this.on(this.tech_, 'pause', e => this.handleTechPause_(e));
+      this.on(this.tech_, 'durationchange', e => this.handleTechDurationChange_(e));
+      this.on(this.tech_, 'fullscreenchange', (e, data) => this.handleTechFullscreenChange_(e, data));
+      this.on(this.tech_, 'fullscreenerror', (e, err) => this.handleTechFullscreenError_(e, err));
+      this.on(this.tech_, 'enterpictureinpicture', e => this.handleTechEnterPictureInPicture_(e));
+      this.on(this.tech_, 'leavepictureinpicture', e => this.handleTechLeavePictureInPicture_(e));
+      this.on(this.tech_, 'error', e => this.handleTechError_(e));
+      this.on(this.tech_, 'posterchange', e => this.handleTechPosterChange_(e));
+      this.on(this.tech_, 'textdata', e => this.handleTechTextData_(e));
+      this.on(this.tech_, 'ratechange', e => this.handleTechRateChange_(e));
+      this.on(this.tech_, 'loadedmetadata', this.boundUpdateStyleEl_);
+      this.usingNativeControls(this.techGet_('controls'));
+      if (this.controls() && !this.usingNativeControls()) {
+        this.addTechControlsListeners_();
+      }
+
+      // Add the tech element in the DOM if it was not already there
+      // Make sure to not insert the original video element if using Html5
+      if (this.tech_.el().parentNode !== this.el() && (titleTechName !== 'Html5' || !this.tag)) {
+        prependTo(this.tech_.el(), this.el());
+      }
+
+      // Get rid of the original video tag reference after the first tech is loaded
+      if (this.tag) {
+        this.tag.player = null;
+        this.tag = null;
+      }
+    }
+
+    /**
+     * Unload and dispose of the current playback {@link Tech}.
+     *
+     * @private
+     */
+    unloadTech_() {
+      // Save the current text tracks so that we can reuse the same text tracks with the next tech
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        this[props.privateName] = this[props.getterName]();
+      });
+      this.textTracksJson_ = textTrackConverter.textTracksToJson(this.tech_);
+      this.isReady_ = false;
+      this.tech_.dispose();
+      this.tech_ = false;
+      if (this.isPosterFromTech_) {
+        this.poster_ = '';
+        this.trigger('posterchange');
+      }
+      this.isPosterFromTech_ = false;
+    }
+
+    /**
+     * Return a reference to the current {@link Tech}.
+     * It will print a warning by default about the danger of using the tech directly
+     * but any argument that is passed in will silence the warning.
+     *
+     * @param {*} [safety]
+     *        Anything passed in to silence the warning
+     *
+     * @return {Tech}
+     *         The Tech
+     */
+    tech(safety) {
+      if (safety === undefined) {
+        log$1.warn('Using the tech directly can be dangerous. I hope you know what you\'re doing.\n' + 'See https://github.com/videojs/video.js/issues/2617 for more info.\n');
+      }
+      return this.tech_;
+    }
+
+    /**
+     * An object that contains Video.js version.
+     *
+     * @typedef {Object} PlayerVersion
+     *
+     * @property {string} 'video.js' - Video.js version
+     */
+
+    /**
+     * Returns an object with Video.js version.
+     *
+     * @return {PlayerVersion}
+     *          An object with Video.js version.
+     */
+    version() {
+      return {
+        'video.js': version$5
+      };
+    }
+
+    /**
+     * Set up click and touch listeners for the playback element
+     *
+     * - On desktops: a click on the video itself will toggle playback
+     * - On mobile devices: a click on the video toggles controls
+     *   which is done by toggling the user state between active and
+     *   inactive
+     * - A tap can signal that a user has become active or has become inactive
+     *   e.g. a quick tap on an iPhone movie should reveal the controls. Another
+     *   quick tap should hide them again (signaling the user is in an inactive
+     *   viewing state)
+     * - In addition to this, we still want the user to be considered inactive after
+     *   a few seconds of inactivity.
+     *
+     * > Note: the only part of iOS interaction we can't mimic with this setup
+     * is a touch and hold on the video element counting as activity in order to
+     * keep the controls showing, but that shouldn't be an issue. A touch and hold
+     * on any controls will still keep the user active
+     *
+     * @private
+     */
+    addTechControlsListeners_() {
+      // Make sure to remove all the previous listeners in case we are called multiple times.
+      this.removeTechControlsListeners_();
+      this.on(this.tech_, 'click', this.boundHandleTechClick_);
+      this.on(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
+
+      // If the controls were hidden we don't want that to change without a tap event
+      // so we'll check if the controls were already showing before reporting user
+      // activity
+      this.on(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+      this.on(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+      this.on(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+
+      // The tap listener needs to come after the touchend listener because the tap
+      // listener cancels out any reportedUserActivity when setting userActive(false)
+      this.on(this.tech_, 'tap', this.boundHandleTechTap_);
+    }
+
+    /**
+     * Remove the listeners used for click and tap controls. This is needed for
+     * toggling to controls disabled, where a tap/touch should do nothing.
+     *
+     * @private
+     */
+    removeTechControlsListeners_() {
+      // We don't want to just use `this.off()` because there might be other needed
+      // listeners added by techs that extend this.
+      this.off(this.tech_, 'tap', this.boundHandleTechTap_);
+      this.off(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+      this.off(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+      this.off(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+      this.off(this.tech_, 'click', this.boundHandleTechClick_);
+      this.off(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
+    }
+
+    /**
+     * Player waits for the tech to be ready
+     *
+     * @private
+     */
+    handleTechReady_() {
+      this.triggerReady();
+
+      // Keep the same volume as before
+      if (this.cache_.volume) {
+        this.techCall_('setVolume', this.cache_.volume);
+      }
+
+      // Look if the tech found a higher resolution poster while loading
+      this.handleTechPosterChange_();
+
+      // Update the duration if available
+      this.handleTechDurationChange_();
+    }
+
+    /**
+     * Retrigger the `loadstart` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#loadstart
+     * @listens Tech#loadstart
+     * @private
+     */
+    handleTechLoadStart_() {
+      // TODO: Update to use `emptied` event instead. See #1277.
+
+      this.removeClass('vjs-ended', 'vjs-seeking');
+
+      // reset the error state
+      this.error(null);
+
+      // Update the duration
+      this.handleTechDurationChange_();
+      if (!this.paused()) {
+        /**
+         * Fired when the user agent begins looking for media data
+         *
+         * @event Player#loadstart
+         * @type {Event}
+         */
+        this.trigger('loadstart');
+      } else {
+        // reset the hasStarted state
+        this.hasStarted(false);
+        this.trigger('loadstart');
+      }
+
+      // autoplay happens after loadstart for the browser,
+      // so we mimic that behavior
+      this.manualAutoplay_(this.autoplay() === true && this.options_.normalizeAutoplay ? 'play' : this.autoplay());
+    }
+
+    /**
+     * Handle autoplay string values, rather than the typical boolean
+     * values that should be handled by the tech. Note that this is not
+     * part of any specification. Valid values and what they do can be
+     * found on the autoplay getter at Player#autoplay()
+     */
+    manualAutoplay_(type) {
+      if (!this.tech_ || typeof type !== 'string') {
+        return;
+      }
+
+      // Save original muted() value, set muted to true, and attempt to play().
+      // On promise rejection, restore muted from saved value
+      const resolveMuted = () => {
+        const previouslyMuted = this.muted();
+        this.muted(true);
+        const restoreMuted = () => {
+          this.muted(previouslyMuted);
+        };
+
+        // restore muted on play terminatation
+        this.playTerminatedQueue_.push(restoreMuted);
+        const mutedPromise = this.play();
+        if (!isPromise(mutedPromise)) {
+          return;
+        }
+        return mutedPromise.catch(err => {
+          restoreMuted();
+          throw new Error(`Rejection at manualAutoplay. Restoring muted value. ${err ? err : ''}`);
+        });
+      };
+      let promise;
+
+      // if muted defaults to true
+      // the only thing we can do is call play
+      if (type === 'any' && !this.muted()) {
+        promise = this.play();
+        if (isPromise(promise)) {
+          promise = promise.catch(resolveMuted);
+        }
+      } else if (type === 'muted' && !this.muted()) {
+        promise = resolveMuted();
+      } else {
+        promise = this.play();
+      }
+      if (!isPromise(promise)) {
+        return;
+      }
+      return promise.then(() => {
+        this.trigger({
+          type: 'autoplay-success',
+          autoplay: type
+        });
+      }).catch(() => {
+        this.trigger({
+          type: 'autoplay-failure',
+          autoplay: type
+        });
+      });
+    }
+
+    /**
+     * Update the internal source caches so that we return the correct source from
+     * `src()`, `currentSource()`, and `currentSources()`.
+     *
+     * > Note: `currentSources` will not be updated if the source that is passed in exists
+     *         in the current `currentSources` cache.
+     *
+     *
+     * @param {Tech~SourceObject} srcObj
+     *        A string or object source to update our caches to.
+     */
+    updateSourceCaches_(srcObj = '') {
+      let src = srcObj;
+      let type = '';
+      if (typeof src !== 'string') {
+        src = srcObj.src;
+        type = srcObj.type;
+      }
+
+      // make sure all the caches are set to default values
+      // to prevent null checking
+      this.cache_.source = this.cache_.source || {};
+      this.cache_.sources = this.cache_.sources || [];
+
+      // try to get the type of the src that was passed in
+      if (src && !type) {
+        type = findMimetype(this, src);
+      }
+
+      // update `currentSource` cache always
+      this.cache_.source = merge$2({}, srcObj, {
+        src,
+        type
+      });
+      const matchingSources = this.cache_.sources.filter(s => s.src && s.src === src);
+      const sourceElSources = [];
+      const sourceEls = this.$$('source');
+      const matchingSourceEls = [];
+      for (let i = 0; i < sourceEls.length; i++) {
+        const sourceObj = getAttributes(sourceEls[i]);
+        sourceElSources.push(sourceObj);
+        if (sourceObj.src && sourceObj.src === src) {
+          matchingSourceEls.push(sourceObj.src);
+        }
+      }
+
+      // if we have matching source els but not matching sources
+      // the current source cache is not up to date
+      if (matchingSourceEls.length && !matchingSources.length) {
+        this.cache_.sources = sourceElSources;
+        // if we don't have matching source or source els set the
+        // sources cache to the `currentSource` cache
+      } else if (!matchingSources.length) {
+        this.cache_.sources = [this.cache_.source];
+      }
+
+      // update the tech `src` cache
+      this.cache_.src = src;
+    }
+
+    /**
+     * *EXPERIMENTAL* Fired when the source is set or changed on the {@link Tech}
+     * causing the media element to reload.
+     *
+     * It will fire for the initial source and each subsequent source.
+     * This event is a custom event from Video.js and is triggered by the {@link Tech}.
+     *
+     * The event object for this event contains a `src` property that will contain the source
+     * that was available when the event was triggered. This is generally only necessary if Video.js
+     * is switching techs while the source was being changed.
+     *
+     * It is also fired when `load` is called on the player (or media element)
+     * because the {@link https://html.spec.whatwg.org/multipage/media.html#dom-media-load|specification for `load`}
+     * says that the resource selection algorithm needs to be aborted and restarted.
+     * In this case, it is very likely that the `src` property will be set to the
+     * empty string `""` to indicate we do not know what the source will be but
+     * that it is changing.
+     *
+     * *This event is currently still experimental and may change in minor releases.*
+     * __To use this, pass `enableSourceset` option to the player.__
+     *
+     * @event Player#sourceset
+     * @type {Event}
+     * @prop {string} src
+     *                The source url available when the `sourceset` was triggered.
+     *                It will be an empty string if we cannot know what the source is
+     *                but know that the source will change.
+     */
+    /**
+     * Retrigger the `sourceset` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#sourceset
+     * @listens Tech#sourceset
+     * @private
+     */
+    handleTechSourceset_(event) {
+      // only update the source cache when the source
+      // was not updated using the player api
+      if (!this.changingSrc_) {
+        let updateSourceCaches = src => this.updateSourceCaches_(src);
+        const playerSrc = this.currentSource().src;
+        const eventSrc = event.src;
+
+        // if we have a playerSrc that is not a blob, and a tech src that is a blob
+        if (playerSrc && !/^blob:/.test(playerSrc) && /^blob:/.test(eventSrc)) {
+          // if both the tech source and the player source were updated we assume
+          // something like @videojs/http-streaming did the sourceset and skip updating the source cache.
+          if (!this.lastSource_ || this.lastSource_.tech !== eventSrc && this.lastSource_.player !== playerSrc) {
+            updateSourceCaches = () => {};
+          }
+        }
+
+        // update the source to the initial source right away
+        // in some cases this will be empty string
+        updateSourceCaches(eventSrc);
+
+        // if the `sourceset` `src` was an empty string
+        // wait for a `loadstart` to update the cache to `currentSrc`.
+        // If a sourceset happens before a `loadstart`, we reset the state
+        if (!event.src) {
+          this.tech_.any(['sourceset', 'loadstart'], e => {
+            // if a sourceset happens before a `loadstart` there
+            // is nothing to do as this `handleTechSourceset_`
+            // will be called again and this will be handled there.
+            if (e.type === 'sourceset') {
+              return;
+            }
+            const techSrc = this.techGet_('currentSrc');
+            this.lastSource_.tech = techSrc;
+            this.updateSourceCaches_(techSrc);
+          });
+        }
+      }
+      this.lastSource_ = {
+        player: this.currentSource().src,
+        tech: event.src
+      };
+      this.trigger({
+        src: event.src,
+        type: 'sourceset'
+      });
+    }
+
+    /**
+     * Add/remove the vjs-has-started class
+     *
+     *
+     * @param {boolean} request
+     *        - true: adds the class
+     *        - false: remove the class
+     *
+     * @return {boolean}
+     *         the boolean value of hasStarted_
+     */
+    hasStarted(request) {
+      if (request === undefined) {
+        // act as getter, if we have no request to change
+        return this.hasStarted_;
+      }
+      if (request === this.hasStarted_) {
+        return;
+      }
+      this.hasStarted_ = request;
+      if (this.hasStarted_) {
+        this.addClass('vjs-has-started');
+      } else {
+        this.removeClass('vjs-has-started');
+      }
+    }
+
+    /**
+     * Fired whenever the media begins or resumes playback
+     *
+     * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play}
+     * @fires Player#play
+     * @listens Tech#play
+     * @private
+     */
+    handleTechPlay_() {
+      this.removeClass('vjs-ended', 'vjs-paused');
+      this.addClass('vjs-playing');
+
+      // hide the poster when the user hits play
+      this.hasStarted(true);
+      /**
+       * Triggered whenever an {@link Tech#play} event happens. Indicates that
+       * playback has started or resumed.
+       *
+       * @event Player#play
+       * @type {Event}
+       */
+      this.trigger('play');
+    }
+
+    /**
+     * Retrigger the `ratechange` event that was triggered by the {@link Tech}.
+     *
+     * If there were any events queued while the playback rate was zero, fire
+     * those events now.
+     *
+     * @private
+     * @method Player#handleTechRateChange_
+     * @fires Player#ratechange
+     * @listens Tech#ratechange
+     */
+    handleTechRateChange_() {
+      if (this.tech_.playbackRate() > 0 && this.cache_.lastPlaybackRate === 0) {
+        this.queuedCallbacks_.forEach(queued => queued.callback(queued.event));
+        this.queuedCallbacks_ = [];
+      }
+      this.cache_.lastPlaybackRate = this.tech_.playbackRate();
+      /**
+       * Fires when the playing speed of the audio/video is changed
+       *
+       * @event Player#ratechange
+       * @type {event}
+       */
+      this.trigger('ratechange');
+    }
+
+    /**
+     * Retrigger the `waiting` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#waiting
+     * @listens Tech#waiting
+     * @private
+     */
+    handleTechWaiting_() {
+      this.addClass('vjs-waiting');
+      /**
+       * A readyState change on the DOM element has caused playback to stop.
+       *
+       * @event Player#waiting
+       * @type {Event}
+       */
+      this.trigger('waiting');
+
+      // Browsers may emit a timeupdate event after a waiting event. In order to prevent
+      // premature removal of the waiting class, wait for the time to change.
+      const timeWhenWaiting = this.currentTime();
+      const timeUpdateListener = () => {
+        if (timeWhenWaiting !== this.currentTime()) {
+          this.removeClass('vjs-waiting');
+          this.off('timeupdate', timeUpdateListener);
+        }
+      };
+      this.on('timeupdate', timeUpdateListener);
+    }
+
+    /**
+     * Retrigger the `canplay` event that was triggered by the {@link Tech}.
+     * > Note: This is not consistent between browsers. See #1351
+     *
+     * @fires Player#canplay
+     * @listens Tech#canplay
+     * @private
+     */
+    handleTechCanPlay_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media has a readyState of HAVE_FUTURE_DATA or greater.
+       *
+       * @event Player#canplay
+       * @type {Event}
+       */
+      this.trigger('canplay');
+    }
+
+    /**
+     * Retrigger the `canplaythrough` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#canplaythrough
+     * @listens Tech#canplaythrough
+     * @private
+     */
+    handleTechCanPlayThrough_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media has a readyState of HAVE_ENOUGH_DATA or greater. This means that the
+       * entire media file can be played without buffering.
+       *
+       * @event Player#canplaythrough
+       * @type {Event}
+       */
+      this.trigger('canplaythrough');
+    }
+
+    /**
+     * Retrigger the `playing` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#playing
+     * @listens Tech#playing
+     * @private
+     */
+    handleTechPlaying_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media is no longer blocked from playback, and has started playing.
+       *
+       * @event Player#playing
+       * @type {Event}
+       */
+      this.trigger('playing');
+    }
+
+    /**
+     * Retrigger the `seeking` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#seeking
+     * @listens Tech#seeking
+     * @private
+     */
+    handleTechSeeking_() {
+      this.addClass('vjs-seeking');
+      /**
+       * Fired whenever the player is jumping to a new time
+       *
+       * @event Player#seeking
+       * @type {Event}
+       */
+      this.trigger('seeking');
+    }
+
+    /**
+     * Retrigger the `seeked` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#seeked
+     * @listens Tech#seeked
+     * @private
+     */
+    handleTechSeeked_() {
+      this.removeClass('vjs-seeking', 'vjs-ended');
+      /**
+       * Fired when the player has finished jumping to a new time
+       *
+       * @event Player#seeked
+       * @type {Event}
+       */
+      this.trigger('seeked');
+    }
+
+    /**
+     * Retrigger the `pause` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#pause
+     * @listens Tech#pause
+     * @private
+     */
+    handleTechPause_() {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      /**
+       * Fired whenever the media has been paused
+       *
+       * @event Player#pause
+       * @type {Event}
+       */
+      this.trigger('pause');
+    }
+
+    /**
+     * Retrigger the `ended` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#ended
+     * @listens Tech#ended
+     * @private
+     */
+    handleTechEnded_() {
+      this.addClass('vjs-ended');
+      this.removeClass('vjs-waiting');
+      if (this.options_.loop) {
+        this.currentTime(0);
+        this.play();
+      } else if (!this.paused()) {
+        this.pause();
+      }
+
+      /**
+       * Fired when the end of the media resource is reached (currentTime == duration)
+       *
+       * @event Player#ended
+       * @type {Event}
+       */
+      this.trigger('ended');
+    }
+
+    /**
+     * Fired when the duration of the media resource is first known or changed
+     *
+     * @listens Tech#durationchange
+     * @private
+     */
+    handleTechDurationChange_() {
+      this.duration(this.techGet_('duration'));
+    }
+
+    /**
+     * Handle a click on the media element to play/pause
+     *
+     * @param {Event} event
+     *        the event that caused this function to trigger
+     *
+     * @listens Tech#click
+     * @private
+     */
+    handleTechClick_(event) {
+      // When controls are disabled a click should not toggle playback because
+      // the click is considered a control
+      if (!this.controls_) {
+        return;
+      }
+      if (this.options_ === undefined || this.options_.userActions === undefined || this.options_.userActions.click === undefined || this.options_.userActions.click !== false) {
+        if (this.options_ !== undefined && this.options_.userActions !== undefined && typeof this.options_.userActions.click === 'function') {
+          this.options_.userActions.click.call(this, event);
+        } else if (this.paused()) {
+          silencePromise(this.play());
+        } else {
+          this.pause();
+        }
+      }
+    }
+
+    /**
+     * Handle a double-click on the media element to enter/exit fullscreen
+     *
+     * @param {Event} event
+     *        the event that caused this function to trigger
+     *
+     * @listens Tech#dblclick
+     * @private
+     */
+    handleTechDoubleClick_(event) {
+      if (!this.controls_) {
+        return;
+      }
+
+      // we do not want to toggle fullscreen state
+      // when double-clicking inside a control bar or a modal
+      const inAllowedEls = Array.prototype.some.call(this.$$('.vjs-control-bar, .vjs-modal-dialog'), el => el.contains(event.target));
+      if (!inAllowedEls) {
+        /*
+         * options.userActions.doubleClick
+         *
+         * If `undefined` or `true`, double-click toggles fullscreen if controls are present
+         * Set to `false` to disable double-click handling
+         * Set to a function to substitute an external double-click handler
+         */
+        if (this.options_ === undefined || this.options_.userActions === undefined || this.options_.userActions.doubleClick === undefined || this.options_.userActions.doubleClick !== false) {
+          if (this.options_ !== undefined && this.options_.userActions !== undefined && typeof this.options_.userActions.doubleClick === 'function') {
+            this.options_.userActions.doubleClick.call(this, event);
+          } else if (this.isFullscreen()) {
+            this.exitFullscreen();
+          } else {
+            this.requestFullscreen();
+          }
+        }
+      }
+    }
+
+    /**
+     * Handle a tap on the media element. It will toggle the user
+     * activity state, which hides and shows the controls.
+     *
+     * @listens Tech#tap
+     * @private
+     */
+    handleTechTap_() {
+      this.userActive(!this.userActive());
+    }
+
+    /**
+     * Handle touch to start
+     *
+     * @listens Tech#touchstart
+     * @private
+     */
+    handleTechTouchStart_() {
+      this.userWasActive = this.userActive();
+    }
+
+    /**
+     * Handle touch to move
+     *
+     * @listens Tech#touchmove
+     * @private
+     */
+    handleTechTouchMove_() {
+      if (this.userWasActive) {
+        this.reportUserActivity();
+      }
+    }
+
+    /**
+     * Handle touch to end
+     *
+     * @param {Event} event
+     *        the touchend event that triggered
+     *        this function
+     *
+     * @listens Tech#touchend
+     * @private
+     */
+    handleTechTouchEnd_(event) {
+      // Stop the mouse events from also happening
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    }
+
+    /**
+     * @private
+     */
+    toggleFullscreenClass_() {
+      if (this.isFullscreen()) {
+        this.addClass('vjs-fullscreen');
+      } else {
+        this.removeClass('vjs-fullscreen');
+      }
+    }
+
+    /**
+     * when the document fschange event triggers it calls this
+     */
+    documentFullscreenChange_(e) {
+      const targetPlayer = e.target.player;
+
+      // if another player was fullscreen
+      // do a null check for targetPlayer because older firefox's would put document as e.target
+      if (targetPlayer && targetPlayer !== this) {
+        return;
+      }
+      const el = this.el();
+      let isFs = document[this.fsApi_.fullscreenElement] === el;
+      if (!isFs && el.matches) {
+        isFs = el.matches(':' + this.fsApi_.fullscreen);
+      }
+      this.isFullscreen(isFs);
+    }
+
+    /**
+     * Handle Tech Fullscreen Change
+     *
+     * @param {Event} event
+     *        the fullscreenchange event that triggered this function
+     *
+     * @param {Object} data
+     *        the data that was sent with the event
+     *
+     * @private
+     * @listens Tech#fullscreenchange
+     * @fires Player#fullscreenchange
+     */
+    handleTechFullscreenChange_(event, data) {
+      if (data) {
+        if (data.nativeIOSFullscreen) {
+          this.addClass('vjs-ios-native-fs');
+          this.tech_.one('webkitendfullscreen', () => {
+            this.removeClass('vjs-ios-native-fs');
+          });
+        }
+        this.isFullscreen(data.isFullscreen);
+      }
+    }
+    handleTechFullscreenError_(event, err) {
+      this.trigger('fullscreenerror', err);
+    }
+
+    /**
+     * @private
+     */
+    togglePictureInPictureClass_() {
+      if (this.isInPictureInPicture()) {
+        this.addClass('vjs-picture-in-picture');
+      } else {
+        this.removeClass('vjs-picture-in-picture');
+      }
+    }
+
+    /**
+     * Handle Tech Enter Picture-in-Picture.
+     *
+     * @param {Event} event
+     *        the enterpictureinpicture event that triggered this function
+     *
+     * @private
+     * @listens Tech#enterpictureinpicture
+     */
+    handleTechEnterPictureInPicture_(event) {
+      this.isInPictureInPicture(true);
+    }
+
+    /**
+     * Handle Tech Leave Picture-in-Picture.
+     *
+     * @param {Event} event
+     *        the leavepictureinpicture event that triggered this function
+     *
+     * @private
+     * @listens Tech#leavepictureinpicture
+     */
+    handleTechLeavePictureInPicture_(event) {
+      this.isInPictureInPicture(false);
+    }
+
+    /**
+     * Fires when an error occurred during the loading of an audio/video.
+     *
+     * @private
+     * @listens Tech#error
+     */
+    handleTechError_() {
+      const error = this.tech_.error();
+      if (error) {
+        this.error(error);
+      }
+    }
+
+    /**
+     * Retrigger the `textdata` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#textdata
+     * @listens Tech#textdata
+     * @private
+     */
+    handleTechTextData_() {
+      let data = null;
+      if (arguments.length > 1) {
+        data = arguments[1];
+      }
+
+      /**
+       * Fires when we get a textdata event from tech
+       *
+       * @event Player#textdata
+       * @type {Event}
+       */
+      this.trigger('textdata', data);
+    }
+
+    /**
+     * Get object for cached values.
+     *
+     * @return {Object}
+     *         get the current object cache
+     */
+    getCache() {
+      return this.cache_;
+    }
+
+    /**
+     * Resets the internal cache object.
+     *
+     * Using this function outside the player constructor or reset method may
+     * have unintended side-effects.
+     *
+     * @private
+     */
+    resetCache_() {
+      this.cache_ = {
+        // Right now, the currentTime is not _really_ cached because it is always
+        // retrieved from the tech (see: currentTime). However, for completeness,
+        // we set it to zero here to ensure that if we do start actually caching
+        // it, we reset it along with everything else.
+        currentTime: 0,
+        initTime: 0,
+        inactivityTimeout: this.options_.inactivityTimeout,
+        duration: NaN,
+        lastVolume: 1,
+        lastPlaybackRate: this.defaultPlaybackRate(),
+        media: null,
+        src: '',
+        source: {},
+        sources: [],
+        playbackRates: [],
+        volume: 1
+      };
+    }
+
+    /**
+     * Pass values to the playback tech
+     *
+     * @param {string} [method]
+     *        the method to call
+     *
+     * @param {Object} [arg]
+     *        the argument to pass
+     *
+     * @private
+     */
+    techCall_(method, arg) {
+      // If it's not ready yet, call method when it is
+
+      this.ready(function () {
+        if (method in allowedSetters) {
+          return set(this.middleware_, this.tech_, method, arg);
+        } else if (method in allowedMediators) {
+          return mediate(this.middleware_, this.tech_, method, arg);
+        }
+        try {
+          if (this.tech_) {
+            this.tech_[method](arg);
+          }
+        } catch (e) {
+          log$1(e);
+          throw e;
+        }
+      }, true);
+    }
+
+    /**
+     * Mediate attempt to call playback tech method
+     * and return the value of the method called.
+     *
+     * @param {string} method
+     *        Tech method
+     *
+     * @return {*}
+     *         Value returned by the tech method called, undefined if tech
+     *         is not ready or tech method is not present
+     *
+     * @private
+     */
+    techGet_(method) {
+      if (!this.tech_ || !this.tech_.isReady_) {
+        return;
+      }
+      if (method in allowedGetters) {
+        return get(this.middleware_, this.tech_, method);
+      } else if (method in allowedMediators) {
+        return mediate(this.middleware_, this.tech_, method);
+      }
+
+      // Log error when playback tech object is present but method
+      // is undefined or unavailable
+      try {
+        return this.tech_[method]();
+      } catch (e) {
+        // When building additional tech libs, an expected method may not be defined yet
+        if (this.tech_[method] === undefined) {
+          log$1(`Video.js: ${method} method not defined for ${this.techName_} playback technology.`, e);
+          throw e;
+        }
+
+        // When a method isn't available on the object it throws a TypeError
+        if (e.name === 'TypeError') {
+          log$1(`Video.js: ${method} unavailable on ${this.techName_} playback technology element.`, e);
+          this.tech_.isReady_ = false;
+          throw e;
+        }
+
+        // If error unknown, just log and throw
+        log$1(e);
+        throw e;
+      }
+    }
+
+    /**
+     * Attempt to begin playback at the first opportunity.
+     *
+     * @return {Promise|undefined}
+     *         Returns a promise if the browser supports Promises (or one
+     *         was passed in as an option). This promise will be resolved on
+     *         the return value of play. If this is undefined it will fulfill the
+     *         promise chain otherwise the promise chain will be fulfilled when
+     *         the promise from play is fulfilled.
+     */
+    play() {
+      return new Promise(resolve => {
+        this.play_(resolve);
+      });
+    }
+
+    /**
+     * The actual logic for play, takes a callback that will be resolved on the
+     * return value of play. This allows us to resolve to the play promise if there
+     * is one on modern browsers.
+     *
+     * @private
+     * @param {Function} [callback]
+     *        The callback that should be called when the techs play is actually called
+     */
+    play_(callback = silencePromise) {
+      this.playCallbacks_.push(callback);
+      const isSrcReady = Boolean(!this.changingSrc_ && (this.src() || this.currentSrc()));
+      const isSafariOrIOS = Boolean(IS_ANY_SAFARI || IS_IOS);
+
+      // treat calls to play_ somewhat like the `one` event function
+      if (this.waitToPlay_) {
+        this.off(['ready', 'loadstart'], this.waitToPlay_);
+        this.waitToPlay_ = null;
+      }
+
+      // if the player/tech is not ready or the src itself is not ready
+      // queue up a call to play on `ready` or `loadstart`
+      if (!this.isReady_ || !isSrcReady) {
+        this.waitToPlay_ = e => {
+          this.play_();
+        };
+        this.one(['ready', 'loadstart'], this.waitToPlay_);
+
+        // if we are in Safari, there is a high chance that loadstart will trigger after the gesture timeperiod
+        // in that case, we need to prime the video element by calling load so it'll be ready in time
+        if (!isSrcReady && isSafariOrIOS) {
+          this.load();
+        }
+        return;
+      }
+
+      // If the player/tech is ready and we have a source, we can attempt playback.
+      const val = this.techGet_('play');
+
+      // For native playback, reset the progress bar if we get a play call from a replay.
+      const isNativeReplay = isSafariOrIOS && this.hasClass('vjs-ended');
+      if (isNativeReplay) {
+        this.resetProgressBar_();
+      }
+      // play was terminated if the returned value is null
+      if (val === null) {
+        this.runPlayTerminatedQueue_();
+      } else {
+        this.runPlayCallbacks_(val);
+      }
+    }
+
+    /**
+     * These functions will be run when if play is terminated. If play
+     * runPlayCallbacks_ is run these function will not be run. This allows us
+     * to differentiate between a terminated play and an actual call to play.
+     */
+    runPlayTerminatedQueue_() {
+      const queue = this.playTerminatedQueue_.slice(0);
+      this.playTerminatedQueue_ = [];
+      queue.forEach(function (q) {
+        q();
+      });
+    }
+
+    /**
+     * When a callback to play is delayed we have to run these
+     * callbacks when play is actually called on the tech. This function
+     * runs the callbacks that were delayed and accepts the return value
+     * from the tech.
+     *
+     * @param {undefined|Promise} val
+     *        The return value from the tech.
+     */
+    runPlayCallbacks_(val) {
+      const callbacks = this.playCallbacks_.slice(0);
+      this.playCallbacks_ = [];
+      // clear play terminatedQueue since we finished a real play
+      this.playTerminatedQueue_ = [];
+      callbacks.forEach(function (cb) {
+        cb(val);
+      });
+    }
+
+    /**
+     * Pause the video playback
+     */
+    pause() {
+      this.techCall_('pause');
+    }
+
+    /**
+     * Check if the player is paused or has yet to play
+     *
+     * @return {boolean}
+     *         - false: if the media is currently playing
+     *         - true: if media is not currently playing
+     */
+    paused() {
+      // The initial state of paused should be true (in Safari it's actually false)
+      return this.techGet_('paused') === false ? false : true;
+    }
+
+    /**
+     * Get a TimeRange object representing the current ranges of time that the user
+     * has played.
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A time range object that represents all the increments of time that have
+     *         been played.
+     */
+    played() {
+      return this.techGet_('played') || createTimeRanges$1(0, 0);
+    }
+
+    /**
+     * Sets or returns whether or not the user is "scrubbing". Scrubbing is
+     * when the user has clicked the progress bar handle and is
+     * dragging it along the progress bar.
+     *
+     * @param {boolean} [isScrubbing]
+     *        whether the user is or is not scrubbing
+     *
+     * @return {boolean|undefined}
+     *         - The value of scrubbing when getting
+     *         - Nothing when setting
+     */
+    scrubbing(isScrubbing) {
+      if (typeof isScrubbing === 'undefined') {
+        return this.scrubbing_;
+      }
+      this.scrubbing_ = !!isScrubbing;
+      this.techCall_('setScrubbing', this.scrubbing_);
+      if (isScrubbing) {
+        this.addClass('vjs-scrubbing');
+      } else {
+        this.removeClass('vjs-scrubbing');
+      }
+    }
+
+    /**
+     * Get or set the current time (in seconds)
+     *
+     * @param {number|string} [seconds]
+     *        The time to seek to in seconds
+     *
+     * @return {number|undefined}
+     *         - the current time in seconds when getting
+     *         - Nothing when setting
+     */
+    currentTime(seconds) {
+      if (seconds === undefined) {
+        // cache last currentTime and return. default to 0 seconds
+        //
+        // Caching the currentTime is meant to prevent a massive amount of reads on the tech's
+        // currentTime when scrubbing, but may not provide much performance benefit after all.
+        // Should be tested. Also something has to read the actual current time or the cache will
+        // never get updated.
+        this.cache_.currentTime = this.techGet_('currentTime') || 0;
+        return this.cache_.currentTime;
+      }
+      if (seconds < 0) {
+        seconds = 0;
+      }
+      if (!this.isReady_ || this.changingSrc_ || !this.tech_ || !this.tech_.isReady_) {
+        this.cache_.initTime = seconds;
+        this.off('canplay', this.boundApplyInitTime_);
+        this.one('canplay', this.boundApplyInitTime_);
+        return;
+      }
+      this.techCall_('setCurrentTime', seconds);
+      this.cache_.initTime = 0;
+      if (isFinite(seconds)) {
+        this.cache_.currentTime = Number(seconds);
+      }
+    }
+
+    /**
+     * Apply the value of initTime stored in cache as currentTime.
+     *
+     * @private
+     */
+    applyInitTime_() {
+      this.currentTime(this.cache_.initTime);
+    }
+
+    /**
+     * Normally gets the length in time of the video in seconds;
+     * in all but the rarest use cases an argument will NOT be passed to the method
+     *
+     * > **NOTE**: The video must have started loading before the duration can be
+     * known, and depending on preload behaviour may not be known until the video starts
+     * playing.
+     *
+     * @fires Player#durationchange
+     *
+     * @param {number} [seconds]
+     *        The duration of the video to set in seconds
+     *
+     * @return {number|undefined}
+     *         - The duration of the video in seconds when getting
+     *         - Nothing when setting
+     */
+    duration(seconds) {
+      if (seconds === undefined) {
+        // return NaN if the duration is not known
+        return this.cache_.duration !== undefined ? this.cache_.duration : NaN;
+      }
+      seconds = parseFloat(seconds);
+
+      // Standardize on Infinity for signaling video is live
+      if (seconds < 0) {
+        seconds = Infinity;
+      }
+      if (seconds !== this.cache_.duration) {
+        // Cache the last set value for optimized scrubbing
+        this.cache_.duration = seconds;
+        if (seconds === Infinity) {
+          this.addClass('vjs-live');
+        } else {
+          this.removeClass('vjs-live');
+        }
+        if (!isNaN(seconds)) {
+          // Do not fire durationchange unless the duration value is known.
+          // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
+
+          /**
+           * @event Player#durationchange
+           * @type {Event}
+           */
+          this.trigger('durationchange');
+        }
+      }
+    }
+
+    /**
+     * Calculates how much time is left in the video. Not part
+     * of the native video API.
+     *
+     * @return {number}
+     *         The time remaining in seconds
+     */
+    remainingTime() {
+      return this.duration() - this.currentTime();
+    }
+
+    /**
+     * A remaining time function that is intended to be used when
+     * the time is to be displayed directly to the user.
+     *
+     * @return {number}
+     *         The rounded time remaining in seconds
+     */
+    remainingTimeDisplay() {
+      return Math.floor(this.duration()) - Math.floor(this.currentTime());
+    }
+
+    //
+    // Kind of like an array of portions of the video that have been downloaded.
+
+    /**
+     * Get a TimeRange object with an array of the times of the video
+     * that have been downloaded. If you just want the percent of the
+     * video that's been downloaded, use bufferedPercent.
+     *
+     * @see [Buffered Spec]{@link http://dev.w3.org/html5/spec/video.html#dom-media-buffered}
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A mock {@link TimeRanges} object (following HTML spec)
+     */
+    buffered() {
+      let buffered = this.techGet_('buffered');
+      if (!buffered || !buffered.length) {
+        buffered = createTimeRanges$1(0, 0);
+      }
+      return buffered;
+    }
+
+    /**
+     * Get the TimeRanges of the media that are currently available
+     * for seeking to.
+     *
+     * @see [Seekable Spec]{@link https://html.spec.whatwg.org/multipage/media.html#dom-media-seekable}
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A mock {@link TimeRanges} object (following HTML spec)
+     */
+    seekable() {
+      let seekable = this.techGet_('seekable');
+      if (!seekable || !seekable.length) {
+        seekable = createTimeRanges$1(0, 0);
+      }
+      return seekable;
+    }
+
+    /**
+     * Returns whether the player is in the "seeking" state.
+     *
+     * @return {boolean} True if the player is in the seeking state, false if not.
+     */
+    seeking() {
+      return this.techGet_('seeking');
+    }
+
+    /**
+     * Returns whether the player is in the "ended" state.
+     *
+     * @return {boolean} True if the player is in the ended state, false if not.
+     */
+    ended() {
+      return this.techGet_('ended');
+    }
+
+    /**
+     * Returns the current state of network activity for the element, from
+     * the codes in the list below.
+     * - NETWORK_EMPTY (numeric value 0)
+     *   The element has not yet been initialised. All attributes are in
+     *   their initial states.
+     * - NETWORK_IDLE (numeric value 1)
+     *   The element's resource selection algorithm is active and has
+     *   selected a resource, but it is not actually using the network at
+     *   this time.
+     * - NETWORK_LOADING (numeric value 2)
+     *   The user agent is actively trying to download data.
+     * - NETWORK_NO_SOURCE (numeric value 3)
+     *   The element's resource selection algorithm is active, but it has
+     *   not yet found a resource to use.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states
+     * @return {number} the current network activity state
+     */
+    networkState() {
+      return this.techGet_('networkState');
+    }
+
+    /**
+     * Returns a value that expresses the current state of the element
+     * with respect to rendering the current playback position, from the
+     * codes in the list below.
+     * - HAVE_NOTHING (numeric value 0)
+     *   No information regarding the media resource is available.
+     * - HAVE_METADATA (numeric value 1)
+     *   Enough of the resource has been obtained that the duration of the
+     *   resource is available.
+     * - HAVE_CURRENT_DATA (numeric value 2)
+     *   Data for the immediate current playback position is available.
+     * - HAVE_FUTURE_DATA (numeric value 3)
+     *   Data for the immediate current playback position is available, as
+     *   well as enough data for the user agent to advance the current
+     *   playback position in the direction of playback.
+     * - HAVE_ENOUGH_DATA (numeric value 4)
+     *   The user agent estimates that enough data is available for
+     *   playback to proceed uninterrupted.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate
+     * @return {number} the current playback rendering state
+     */
+    readyState() {
+      return this.techGet_('readyState');
+    }
+
+    /**
+     * Get the percent (as a decimal) of the video that's been downloaded.
+     * This method is not a part of the native HTML video API.
+     *
+     * @return {number}
+     *         A decimal between 0 and 1 representing the percent
+     *         that is buffered 0 being 0% and 1 being 100%
+     */
+    bufferedPercent() {
+      return bufferedPercent(this.buffered(), this.duration());
+    }
+
+    /**
+     * Get the ending time of the last buffered time range
+     * This is used in the progress bar to encapsulate all time ranges.
+     *
+     * @return {number}
+     *         The end of the last buffered time range
+     */
+    bufferedEnd() {
+      const buffered = this.buffered();
+      const duration = this.duration();
+      let end = buffered.end(buffered.length - 1);
+      if (end > duration) {
+        end = duration;
+      }
+      return end;
+    }
+
+    /**
+     * Get or set the current volume of the media
+     *
+     * @param  {number} [percentAsDecimal]
+     *         The new volume as a decimal percent:
+     *         - 0 is muted/0%/off
+     *         - 1.0 is 100%/full
+     *         - 0.5 is half volume or 50%
+     *
+     * @return {number|undefined}
+     *         The current volume as a percent when getting
+     */
+    volume(percentAsDecimal) {
+      let vol;
+      if (percentAsDecimal !== undefined) {
+        // Force value to between 0 and 1
+        vol = Math.max(0, Math.min(1, percentAsDecimal));
+        this.cache_.volume = vol;
+        this.techCall_('setVolume', vol);
+        if (vol > 0) {
+          this.lastVolume_(vol);
+        }
+        return;
+      }
+
+      // Default to 1 when returning current volume.
+      vol = parseFloat(this.techGet_('volume'));
+      return isNaN(vol) ? 1 : vol;
+    }
+
+    /**
+     * Get the current muted state, or turn mute on or off
+     *
+     * @param {boolean} [muted]
+     *        - true to mute
+     *        - false to unmute
+     *
+     * @return {boolean|undefined}
+     *         - true if mute is on and getting
+     *         - false if mute is off and getting
+     *         - nothing if setting
+     */
+    muted(muted) {
+      if (muted !== undefined) {
+        this.techCall_('setMuted', muted);
+        return;
+      }
+      return this.techGet_('muted') || false;
+    }
+
+    /**
+     * Get the current defaultMuted state, or turn defaultMuted on or off. defaultMuted
+     * indicates the state of muted on initial playback.
+     *
+     * ```js
+     *   var myPlayer = videojs('some-player-id');
+     *
+     *   myPlayer.src("http://www.example.com/path/to/video.mp4");
+     *
+     *   // get, should be false
+     *   console.log(myPlayer.defaultMuted());
+     *   // set to true
+     *   myPlayer.defaultMuted(true);
+     *   // get should be true
+     *   console.log(myPlayer.defaultMuted());
+     * ```
+     *
+     * @param {boolean} [defaultMuted]
+     *        - true to mute
+     *        - false to unmute
+     *
+     * @return {boolean|undefined}
+     *         - true if defaultMuted is on and getting
+     *         - false if defaultMuted is off and getting
+     *         - Nothing when setting
+     */
+    defaultMuted(defaultMuted) {
+      if (defaultMuted !== undefined) {
+        this.techCall_('setDefaultMuted', defaultMuted);
+      }
+      return this.techGet_('defaultMuted') || false;
+    }
+
+    /**
+     * Get the last volume, or set it
+     *
+     * @param  {number} [percentAsDecimal]
+     *         The new last volume as a decimal percent:
+     *         - 0 is muted/0%/off
+     *         - 1.0 is 100%/full
+     *         - 0.5 is half volume or 50%
+     *
+     * @return {number|undefined}
+     *         - The current value of lastVolume as a percent when getting
+     *         - Nothing when setting
+     *
+     * @private
+     */
+    lastVolume_(percentAsDecimal) {
+      if (percentAsDecimal !== undefined && percentAsDecimal !== 0) {
+        this.cache_.lastVolume = percentAsDecimal;
+        return;
+      }
+      return this.cache_.lastVolume;
+    }
+
+    /**
+     * Check if current tech can support native fullscreen
+     * (e.g. with built in controls like iOS)
+     *
+     * @return {boolean}
+     *         if native fullscreen is supported
+     */
+    supportsFullScreen() {
+      return this.techGet_('supportsFullScreen') || false;
+    }
+
+    /**
+     * Check if the player is in fullscreen mode or tell the player that it
+     * is or is not in fullscreen mode.
+     *
+     * > NOTE: As of the latest HTML5 spec, isFullscreen is no longer an official
+     * property and instead document.fullscreenElement is used. But isFullscreen is
+     * still a valuable property for internal player workings.
+     *
+     * @param  {boolean} [isFS]
+     *         Set the players current fullscreen state
+     *
+     * @return {boolean|undefined}
+     *         - true if fullscreen is on and getting
+     *         - false if fullscreen is off and getting
+     *         - Nothing when setting
+     */
+    isFullscreen(isFS) {
+      if (isFS !== undefined) {
+        const oldValue = this.isFullscreen_;
+        this.isFullscreen_ = Boolean(isFS);
+
+        // if we changed fullscreen state and we're in prefixed mode, trigger fullscreenchange
+        // this is the only place where we trigger fullscreenchange events for older browsers
+        // fullWindow mode is treated as a prefixed event and will get a fullscreenchange event as well
+        if (this.isFullscreen_ !== oldValue && this.fsApi_.prefixed) {
+          /**
+             * @event Player#fullscreenchange
+             * @type {Event}
+             */
+          this.trigger('fullscreenchange');
+        }
+        this.toggleFullscreenClass_();
+        return;
+      }
+      return this.isFullscreen_;
+    }
+
+    /**
+     * Increase the size of the video to full screen
+     * In some browsers, full screen is not supported natively, so it enters
+     * "full window mode", where the video fills the browser window.
+     * In browsers and devices that support native full screen, sometimes the
+     * browser's default controls will be shown, and not the Video.js custom skin.
+     * This includes most mobile devices (iOS, Android) and older versions of
+     * Safari.
+     *
+     * @param  {Object} [fullscreenOptions]
+     *         Override the player fullscreen options
+     *
+     * @fires Player#fullscreenchange
+     */
+    requestFullscreen(fullscreenOptions) {
+      if (this.isInPictureInPicture()) {
+        this.exitPictureInPicture();
+      }
+      const self = this;
+      return new Promise((resolve, reject) => {
+        function offHandler() {
+          self.off('fullscreenerror', errorHandler);
+          self.off('fullscreenchange', changeHandler);
+        }
+        function changeHandler() {
+          offHandler();
+          resolve();
+        }
+        function errorHandler(e, err) {
+          offHandler();
+          reject(err);
+        }
+        self.one('fullscreenchange', changeHandler);
+        self.one('fullscreenerror', errorHandler);
+        const promise = self.requestFullscreenHelper_(fullscreenOptions);
+        if (promise) {
+          promise.then(offHandler, offHandler);
+          promise.then(resolve, reject);
+        }
+      });
+    }
+    requestFullscreenHelper_(fullscreenOptions) {
+      let fsOptions;
+
+      // Only pass fullscreen options to requestFullscreen in spec-compliant browsers.
+      // Use defaults or player configured option unless passed directly to this method.
+      if (!this.fsApi_.prefixed) {
+        fsOptions = this.options_.fullscreen && this.options_.fullscreen.options || {};
+        if (fullscreenOptions !== undefined) {
+          fsOptions = fullscreenOptions;
+        }
+      }
+
+      // This method works as follows:
+      // 1. if a fullscreen api is available, use it
+      //   1. call requestFullscreen with potential options
+      //   2. if we got a promise from above, use it to update isFullscreen()
+      // 2. otherwise, if the tech supports fullscreen, call `enterFullScreen` on it.
+      //   This is particularly used for iPhone, older iPads, and non-safari browser on iOS.
+      // 3. otherwise, use "fullWindow" mode
+      if (this.fsApi_.requestFullscreen) {
+        const promise = this.el_[this.fsApi_.requestFullscreen](fsOptions);
+
+        // Even on browsers with promise support this may not return a promise
+        if (promise) {
+          promise.then(() => this.isFullscreen(true), () => this.isFullscreen(false));
+        }
+        return promise;
+      } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) {
+        // we can't take the video.js controls fullscreen but we can go fullscreen
+        // with native controls
+        this.techCall_('enterFullScreen');
+      } else {
+        // fullscreen isn't supported so we'll just stretch the video element to
+        // fill the viewport
+        this.enterFullWindow();
+      }
+    }
+
+    /**
+     * Return the video to its normal size after having been in full screen mode
+     *
+     * @fires Player#fullscreenchange
+     */
+    exitFullscreen() {
+      const self = this;
+      return new Promise((resolve, reject) => {
+        function offHandler() {
+          self.off('fullscreenerror', errorHandler);
+          self.off('fullscreenchange', changeHandler);
+        }
+        function changeHandler() {
+          offHandler();
+          resolve();
+        }
+        function errorHandler(e, err) {
+          offHandler();
+          reject(err);
+        }
+        self.one('fullscreenchange', changeHandler);
+        self.one('fullscreenerror', errorHandler);
+        const promise = self.exitFullscreenHelper_();
+        if (promise) {
+          promise.then(offHandler, offHandler);
+          // map the promise to our resolve/reject methods
+          promise.then(resolve, reject);
+        }
+      });
+    }
+    exitFullscreenHelper_() {
+      if (this.fsApi_.requestFullscreen) {
+        const promise = document[this.fsApi_.exitFullscreen]();
+
+        // Even on browsers with promise support this may not return a promise
+        if (promise) {
+          // we're splitting the promise here, so, we want to catch the
+          // potential error so that this chain doesn't have unhandled errors
+          silencePromise(promise.then(() => this.isFullscreen(false)));
+        }
+        return promise;
+      } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) {
+        this.techCall_('exitFullScreen');
+      } else {
+        this.exitFullWindow();
+      }
+    }
+
+    /**
+     * When fullscreen isn't supported we can stretch the
+     * video container to as wide as the browser will let us.
+     *
+     * @fires Player#enterFullWindow
+     */
+    enterFullWindow() {
+      this.isFullscreen(true);
+      this.isFullWindow = true;
+
+      // Storing original doc overflow value to return to when fullscreen is off
+      this.docOrigOverflow = document.documentElement.style.overflow;
+
+      // Add listener for esc key to exit fullscreen
+      on(document, 'keydown', this.boundFullWindowOnEscKey_);
+
+      // Hide any scroll bars
+      document.documentElement.style.overflow = 'hidden';
+
+      // Apply fullscreen styles
+      addClass(document.body, 'vjs-full-window');
+
+      /**
+       * @event Player#enterFullWindow
+       * @type {Event}
+       */
+      this.trigger('enterFullWindow');
+    }
+
+    /**
+     * Check for call to either exit full window or
+     * full screen on ESC key
+     *
+     * @param {string} event
+     *        Event to check for key press
+     */
+    fullWindowOnEscKey(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        if (this.isFullscreen() === true) {
+          if (!this.isFullWindow) {
+            this.exitFullscreen();
+          } else {
+            this.exitFullWindow();
+          }
+        }
+      }
+    }
+
+    /**
+     * Exit full window
+     *
+     * @fires Player#exitFullWindow
+     */
+    exitFullWindow() {
+      this.isFullscreen(false);
+      this.isFullWindow = false;
+      off(document, 'keydown', this.boundFullWindowOnEscKey_);
+
+      // Unhide scroll bars.
+      document.documentElement.style.overflow = this.docOrigOverflow;
+
+      // Remove fullscreen styles
+      removeClass(document.body, 'vjs-full-window');
+
+      // Resize the box, controller, and poster to original sizes
+      // this.positionAll();
+      /**
+       * @event Player#exitFullWindow
+       * @type {Event}
+       */
+      this.trigger('exitFullWindow');
+    }
+
+    /**
+     * Get or set disable Picture-in-Picture mode.
+     *
+     * @param {boolean} [value]
+     *                  - true will disable Picture-in-Picture mode
+     *                  - false will enable Picture-in-Picture mode
+     */
+    disablePictureInPicture(value) {
+      if (value === undefined) {
+        return this.techGet_('disablePictureInPicture');
+      }
+      this.techCall_('setDisablePictureInPicture', value);
+      this.options_.disablePictureInPicture = value;
+      this.trigger('disablepictureinpicturechanged');
+    }
+
+    /**
+     * Check if the player is in Picture-in-Picture mode or tell the player that it
+     * is or is not in Picture-in-Picture mode.
+     *
+     * @param  {boolean} [isPiP]
+     *         Set the players current Picture-in-Picture state
+     *
+     * @return {boolean|undefined}
+     *         - true if Picture-in-Picture is on and getting
+     *         - false if Picture-in-Picture is off and getting
+     *         - nothing if setting
+     */
+    isInPictureInPicture(isPiP) {
+      if (isPiP !== undefined) {
+        this.isInPictureInPicture_ = !!isPiP;
+        this.togglePictureInPictureClass_();
+        return;
+      }
+      return !!this.isInPictureInPicture_;
+    }
+
+    /**
+     * Create a floating video window always on top of other windows so that users may
+     * continue consuming media while they interact with other content sites, or
+     * applications on their device.
+     *
+     * This can use document picture-in-picture or element picture in picture
+     *
+     * Set `enableDocumentPictureInPicture` to `true` to use docPiP on a supported browser
+     * Else set `disablePictureInPicture` to `false` to disable elPiP on a supported browser
+     *
+     *
+     * @see [Spec]{@link https://w3c.github.io/picture-in-picture/}
+     * @see [Spec]{@link https://wicg.github.io/document-picture-in-picture/}
+     *
+     * @fires Player#enterpictureinpicture
+     *
+     * @return {Promise}
+     *         A promise with a Picture-in-Picture window.
+     */
+    requestPictureInPicture() {
+      if (this.options_.enableDocumentPictureInPicture && window.documentPictureInPicture) {
+        const pipContainer = document.createElement(this.el().tagName);
+        pipContainer.classList = this.el().classList;
+        pipContainer.classList.add('vjs-pip-container');
+        if (this.posterImage) {
+          pipContainer.appendChild(this.posterImage.el().cloneNode(true));
+        }
+        if (this.titleBar) {
+          pipContainer.appendChild(this.titleBar.el().cloneNode(true));
+        }
+        pipContainer.appendChild(createEl('p', {
+          className: 'vjs-pip-text'
+        }, {}, this.localize('Playing in picture-in-picture')));
+        return window.documentPictureInPicture.requestWindow({
+          // The aspect ratio won't be correct, Chrome bug https://crbug.com/1407629
+          width: this.videoWidth(),
+          height: this.videoHeight()
+        }).then(pipWindow => {
+          copyStyleSheetsToWindow(pipWindow);
+          this.el_.parentNode.insertBefore(pipContainer, this.el_);
+          pipWindow.document.body.appendChild(this.el_);
+          pipWindow.document.body.classList.add('vjs-pip-window');
+          this.player_.isInPictureInPicture(true);
+          this.player_.trigger({
+            type: 'enterpictureinpicture',
+            pipWindow
+          });
+
+          // Listen for the PiP closing event to move the video back.
+          pipWindow.addEventListener('pagehide', event => {
+            const pipVideo = event.target.querySelector('.video-js');
+            pipContainer.parentNode.replaceChild(pipVideo, pipContainer);
+            this.player_.isInPictureInPicture(false);
+            this.player_.trigger('leavepictureinpicture');
+          });
+          return pipWindow;
+        });
+      }
+      if ('pictureInPictureEnabled' in document && this.disablePictureInPicture() === false) {
+        /**
+         * This event fires when the player enters picture in picture mode
+         *
+         * @event Player#enterpictureinpicture
+         * @type {Event}
+         */
+        return this.techGet_('requestPictureInPicture');
+      }
+      return Promise.reject('No PiP mode is available');
+    }
+
+    /**
+     * Exit Picture-in-Picture mode.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @fires Player#leavepictureinpicture
+     *
+     * @return {Promise}
+     *         A promise.
+     */
+    exitPictureInPicture() {
+      if (window.documentPictureInPicture && window.documentPictureInPicture.window) {
+        // With documentPictureInPicture, Player#leavepictureinpicture is fired in the pagehide handler
+        window.documentPictureInPicture.window.close();
+        return Promise.resolve();
+      }
+      if ('pictureInPictureEnabled' in document) {
+        /**
+         * This event fires when the player leaves picture in picture mode
+         *
+         * @event Player#leavepictureinpicture
+         * @type {Event}
+         */
+        return document.exitPictureInPicture();
+      }
+    }
+
+    /**
+     * Called when this Player has focus and a key gets pressed down, or when
+     * any Component of this player receives a key press that it doesn't handle.
+     * This allows player-wide hotkeys (either as defined below, or optionally
+     * by an external function).
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      const {
+        userActions
+      } = this.options_;
+
+      // Bail out if hotkeys are not configured.
+      if (!userActions || !userActions.hotkeys) {
+        return;
+      }
+
+      // Function that determines whether or not to exclude an element from
+      // hotkeys handling.
+      const excludeElement = el => {
+        const tagName = el.tagName.toLowerCase();
+
+        // The first and easiest test is for `contenteditable` elements.
+        if (el.isContentEditable) {
+          return true;
+        }
+
+        // Inputs matching these types will still trigger hotkey handling as
+        // they are not text inputs.
+        const allowedInputTypes = ['button', 'checkbox', 'hidden', 'radio', 'reset', 'submit'];
+        if (tagName === 'input') {
+          return allowedInputTypes.indexOf(el.type) === -1;
+        }
+
+        // The final test is by tag name. These tags will be excluded entirely.
+        const excludedTags = ['textarea'];
+        return excludedTags.indexOf(tagName) !== -1;
+      };
+
+      // Bail out if the user is focused on an interactive form element.
+      if (excludeElement(this.el_.ownerDocument.activeElement)) {
+        return;
+      }
+      if (typeof userActions.hotkeys === 'function') {
+        userActions.hotkeys.call(this, event);
+      } else {
+        this.handleHotkeys(event);
+      }
+    }
+
+    /**
+     * Called when this Player receives a hotkey keydown event.
+     * Supported player-wide hotkeys are:
+     *
+     *   f          - toggle fullscreen
+     *   m          - toggle mute
+     *   k or Space - toggle play/pause
+     *
+     * @param {Event} event
+     *        The `keydown` event that caused this function to be called.
+     */
+    handleHotkeys(event) {
+      const hotkeys = this.options_.userActions ? this.options_.userActions.hotkeys : {};
+
+      // set fullscreenKey, muteKey, playPauseKey from `hotkeys`, use defaults if not set
+      const {
+        fullscreenKey = keydownEvent => keycode.isEventKey(keydownEvent, 'f'),
+        muteKey = keydownEvent => keycode.isEventKey(keydownEvent, 'm'),
+        playPauseKey = keydownEvent => keycode.isEventKey(keydownEvent, 'k') || keycode.isEventKey(keydownEvent, 'Space')
+      } = hotkeys;
+      if (fullscreenKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const FSToggle = Component$1.getComponent('FullscreenToggle');
+        if (document[this.fsApi_.fullscreenEnabled] !== false) {
+          FSToggle.prototype.handleClick.call(this, event);
+        }
+      } else if (muteKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const MuteToggle = Component$1.getComponent('MuteToggle');
+        MuteToggle.prototype.handleClick.call(this, event);
+      } else if (playPauseKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const PlayToggle = Component$1.getComponent('PlayToggle');
+        PlayToggle.prototype.handleClick.call(this, event);
+      }
+    }
+
+    /**
+     * Check whether the player can play a given mimetype
+     *
+     * @see https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype
+     *
+     * @param {string} type
+     *        The mimetype to check
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    canPlayType(type) {
+      let can;
+
+      // Loop through each playback technology in the options order
+      for (let i = 0, j = this.options_.techOrder; i < j.length; i++) {
+        const techName = j[i];
+        let tech = Tech.getTech(techName);
+
+        // Support old behavior of techs being registered as components.
+        // Remove once that deprecated behavior is removed.
+        if (!tech) {
+          tech = Component$1.getComponent(techName);
+        }
+
+        // Check if the current tech is defined before continuing
+        if (!tech) {
+          log$1.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+          continue;
+        }
+
+        // Check if the browser supports this technology
+        if (tech.isSupported()) {
+          can = tech.canPlayType(type);
+          if (can) {
+            return can;
+          }
+        }
+      }
+      return '';
+    }
+
+    /**
+     * Select source based on tech-order or source-order
+     * Uses source-order selection if `options.sourceOrder` is truthy. Otherwise,
+     * defaults to tech-order selection
+     *
+     * @param {Array} sources
+     *        The sources for a media asset
+     *
+     * @return {Object|boolean}
+     *         Object of source and tech order or false
+     */
+    selectSource(sources) {
+      // Get only the techs specified in `techOrder` that exist and are supported by the
+      // current platform
+      const techs = this.options_.techOrder.map(techName => {
+        return [techName, Tech.getTech(techName)];
+      }).filter(([techName, tech]) => {
+        // Check if the current tech is defined before continuing
+        if (tech) {
+          // Check if the browser supports this technology
+          return tech.isSupported();
+        }
+        log$1.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+        return false;
+      });
+
+      // Iterate over each `innerArray` element once per `outerArray` element and execute
+      // `tester` with both. If `tester` returns a non-falsy value, exit early and return
+      // that value.
+      const findFirstPassingTechSourcePair = function (outerArray, innerArray, tester) {
+        let found;
+        outerArray.some(outerChoice => {
+          return innerArray.some(innerChoice => {
+            found = tester(outerChoice, innerChoice);
+            if (found) {
+              return true;
+            }
+          });
+        });
+        return found;
+      };
+      let foundSourceAndTech;
+      const flip = fn => (a, b) => fn(b, a);
+      const finder = ([techName, tech], source) => {
+        if (tech.canPlaySource(source, this.options_[techName.toLowerCase()])) {
+          return {
+            source,
+            tech: techName
+          };
+        }
+      };
+
+      // Depending on the truthiness of `options.sourceOrder`, we swap the order of techs and sources
+      // to select from them based on their priority.
+      if (this.options_.sourceOrder) {
+        // Source-first ordering
+        foundSourceAndTech = findFirstPassingTechSourcePair(sources, techs, flip(finder));
+      } else {
+        // Tech-first ordering
+        foundSourceAndTech = findFirstPassingTechSourcePair(techs, sources, finder);
+      }
+      return foundSourceAndTech || false;
+    }
+
+    /**
+     * Executes source setting and getting logic
+     *
+     * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+     *        A SourceObject, an array of SourceObjects, or a string referencing
+     *        a URL to a media source. It is _highly recommended_ that an object
+     *        or array of objects is used here, so that source selection
+     *        algorithms can take the `type` into account.
+     *
+     *        If not provided, this method acts as a getter.
+     * @param {boolean} [isRetry]
+     *        Indicates whether this is being called internally as a result of a retry
+     *
+     * @return {string|undefined}
+     *         If the `source` argument is missing, returns the current source
+     *         URL. Otherwise, returns nothing/undefined.
+     */
+    handleSrc_(source, isRetry) {
+      // getter usage
+      if (typeof source === 'undefined') {
+        return this.cache_.src || '';
+      }
+
+      // Reset retry behavior for new source
+      if (this.resetRetryOnError_) {
+        this.resetRetryOnError_();
+      }
+
+      // filter out invalid sources and turn our source into
+      // an array of source objects
+      const sources = filterSource(source);
+
+      // if a source was passed in then it is invalid because
+      // it was filtered to a zero length Array. So we have to
+      // show an error
+      if (!sources.length) {
+        this.setTimeout(function () {
+          this.error({
+            code: 4,
+            message: this.options_.notSupportedMessage
+          });
+        }, 0);
+        return;
+      }
+
+      // initial sources
+      this.changingSrc_ = true;
+
+      // Only update the cached source list if we are not retrying a new source after error,
+      // since in that case we want to include the failed source(s) in the cache
+      if (!isRetry) {
+        this.cache_.sources = sources;
+      }
+      this.updateSourceCaches_(sources[0]);
+
+      // middlewareSource is the source after it has been changed by middleware
+      setSource(this, sources[0], (middlewareSource, mws) => {
+        this.middleware_ = mws;
+
+        // since sourceSet is async we have to update the cache again after we select a source since
+        // the source that is selected could be out of order from the cache update above this callback.
+        if (!isRetry) {
+          this.cache_.sources = sources;
+        }
+        this.updateSourceCaches_(middlewareSource);
+        const err = this.src_(middlewareSource);
+        if (err) {
+          if (sources.length > 1) {
+            return this.handleSrc_(sources.slice(1));
+          }
+          this.changingSrc_ = false;
+
+          // We need to wrap this in a timeout to give folks a chance to add error event handlers
+          this.setTimeout(function () {
+            this.error({
+              code: 4,
+              message: this.options_.notSupportedMessage
+            });
+          }, 0);
+
+          // we could not find an appropriate tech, but let's still notify the delegate that this is it
+          // this needs a better comment about why this is needed
+          this.triggerReady();
+          return;
+        }
+        setTech(mws, this.tech_);
+      });
+
+      // Try another available source if this one fails before playback.
+      if (sources.length > 1) {
+        const retry = () => {
+          // Remove the error modal
+          this.error(null);
+          this.handleSrc_(sources.slice(1), true);
+        };
+        const stopListeningForErrors = () => {
+          this.off('error', retry);
+        };
+        this.one('error', retry);
+        this.one('playing', stopListeningForErrors);
+        this.resetRetryOnError_ = () => {
+          this.off('error', retry);
+          this.off('playing', stopListeningForErrors);
+        };
+      }
+    }
+
+    /**
+     * Get or set the video source.
+     *
+     * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+     *        A SourceObject, an array of SourceObjects, or a string referencing
+     *        a URL to a media source. It is _highly recommended_ that an object
+     *        or array of objects is used here, so that source selection
+     *        algorithms can take the `type` into account.
+     *
+     *        If not provided, this method acts as a getter.
+     *
+     * @return {string|undefined}
+     *         If the `source` argument is missing, returns the current source
+     *         URL. Otherwise, returns nothing/undefined.
+     */
+    src(source) {
+      return this.handleSrc_(source, false);
+    }
+
+    /**
+     * Set the source object on the tech, returns a boolean that indicates whether
+     * there is a tech that can play the source or not
+     *
+     * @param {Tech~SourceObject} source
+     *        The source object to set on the Tech
+     *
+     * @return {boolean}
+     *         - True if there is no Tech to playback this source
+     *         - False otherwise
+     *
+     * @private
+     */
+    src_(source) {
+      const sourceTech = this.selectSource([source]);
+      if (!sourceTech) {
+        return true;
+      }
+      if (!titleCaseEquals(sourceTech.tech, this.techName_)) {
+        this.changingSrc_ = true;
+        // load this technology with the chosen source
+        this.loadTech_(sourceTech.tech, sourceTech.source);
+        this.tech_.ready(() => {
+          this.changingSrc_ = false;
+        });
+        return false;
+      }
+
+      // wait until the tech is ready to set the source
+      // and set it synchronously if possible (#2326)
+      this.ready(function () {
+        // The setSource tech method was added with source handlers
+        // so older techs won't support it
+        // We need to check the direct prototype for the case where subclasses
+        // of the tech do not support source handlers
+        if (this.tech_.constructor.prototype.hasOwnProperty('setSource')) {
+          this.techCall_('setSource', source);
+        } else {
+          this.techCall_('src', source.src);
+        }
+        this.changingSrc_ = false;
+      }, true);
+      return false;
+    }
+
+    /**
+     * Begin loading the src data.
+     */
+    load() {
+      // Workaround to use the load method with the VHS.
+      // Does not cover the case when the load method is called directly from the mediaElement.
+      if (this.tech_ && this.tech_.vhs) {
+        this.src(this.currentSource());
+        return;
+      }
+      this.techCall_('load');
+    }
+
+    /**
+     * Reset the player. Loads the first tech in the techOrder,
+     * removes all the text tracks in the existing `tech`,
+     * and calls `reset` on the `tech`.
+     */
+    reset() {
+      if (this.paused()) {
+        this.doReset_();
+      } else {
+        const playPromise = this.play();
+        silencePromise(playPromise.then(() => this.doReset_()));
+      }
+    }
+    doReset_() {
+      if (this.tech_) {
+        this.tech_.clearTracks('text');
+      }
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      this.resetCache_();
+      this.poster('');
+      this.loadTech_(this.options_.techOrder[0], null);
+      this.techCall_('reset');
+      this.resetControlBarUI_();
+      this.error(null);
+      if (this.titleBar) {
+        this.titleBar.update({
+          title: undefined,
+          description: undefined
+        });
+      }
+      if (isEvented(this)) {
+        this.trigger('playerreset');
+      }
+    }
+
+    /**
+     * Reset Control Bar's UI by calling sub-methods that reset
+     * all of Control Bar's components
+     */
+    resetControlBarUI_() {
+      this.resetProgressBar_();
+      this.resetPlaybackRate_();
+      this.resetVolumeBar_();
+    }
+
+    /**
+     * Reset tech's progress so progress bar is reset in the UI
+     */
+    resetProgressBar_() {
+      this.currentTime(0);
+      const {
+        currentTimeDisplay,
+        durationDisplay,
+        progressControl,
+        remainingTimeDisplay
+      } = this.controlBar || {};
+      const {
+        seekBar
+      } = progressControl || {};
+      if (currentTimeDisplay) {
+        currentTimeDisplay.updateContent();
+      }
+      if (durationDisplay) {
+        durationDisplay.updateContent();
+      }
+      if (remainingTimeDisplay) {
+        remainingTimeDisplay.updateContent();
+      }
+      if (seekBar) {
+        seekBar.update();
+        if (seekBar.loadProgressBar) {
+          seekBar.loadProgressBar.update();
+        }
+      }
+    }
+
+    /**
+     * Reset Playback ratio
+     */
+    resetPlaybackRate_() {
+      this.playbackRate(this.defaultPlaybackRate());
+      this.handleTechRateChange_();
+    }
+
+    /**
+     * Reset Volume bar
+     */
+    resetVolumeBar_() {
+      this.volume(1.0);
+      this.trigger('volumechange');
+    }
+
+    /**
+     * Returns all of the current source objects.
+     *
+     * @return {Tech~SourceObject[]}
+     *         The current source objects
+     */
+    currentSources() {
+      const source = this.currentSource();
+      const sources = [];
+
+      // assume `{}` or `{ src }`
+      if (Object.keys(source).length !== 0) {
+        sources.push(source);
+      }
+      return this.cache_.sources || sources;
+    }
+
+    /**
+     * Returns the current source object.
+     *
+     * @return {Tech~SourceObject}
+     *         The current source object
+     */
+    currentSource() {
+      return this.cache_.source || {};
+    }
+
+    /**
+     * Returns the fully qualified URL of the current source value e.g. http://mysite.com/video.mp4
+     * Can be used in conjunction with `currentType` to assist in rebuilding the current source object.
+     *
+     * @return {string}
+     *         The current source
+     */
+    currentSrc() {
+      return this.currentSource() && this.currentSource().src || '';
+    }
+
+    /**
+     * Get the current source type e.g. video/mp4
+     * This can allow you rebuild the current source object so that you could load the same
+     * source and tech later
+     *
+     * @return {string}
+     *         The source MIME type
+     */
+    currentType() {
+      return this.currentSource() && this.currentSource().type || '';
+    }
+
+    /**
+     * Get or set the preload attribute
+     *
+     * @param {'none'|'auto'|'metadata'} [value]
+     *        Preload mode to pass to tech
+     *
+     * @return {string|undefined}
+     *         - The preload attribute value when getting
+     *         - Nothing when setting
+     */
+    preload(value) {
+      if (value !== undefined) {
+        this.techCall_('setPreload', value);
+        this.options_.preload = value;
+        return;
+      }
+      return this.techGet_('preload');
+    }
+
+    /**
+     * Get or set the autoplay option. When this is a boolean it will
+     * modify the attribute on the tech. When this is a string the attribute on
+     * the tech will be removed and `Player` will handle autoplay on loadstarts.
+     *
+     * @param {boolean|'play'|'muted'|'any'} [value]
+     *        - true: autoplay using the browser behavior
+     *        - false: do not autoplay
+     *        - 'play': call play() on every loadstart
+     *        - 'muted': call muted() then play() on every loadstart
+     *        - 'any': call play() on every loadstart. if that fails call muted() then play().
+     *        - *: values other than those listed here will be set `autoplay` to true
+     *
+     * @return {boolean|string|undefined}
+     *         - The current value of autoplay when getting
+     *         - Nothing when setting
+     */
+    autoplay(value) {
+      // getter usage
+      if (value === undefined) {
+        return this.options_.autoplay || false;
+      }
+      let techAutoplay;
+
+      // if the value is a valid string set it to that, or normalize `true` to 'play', if need be
+      if (typeof value === 'string' && /(any|play|muted)/.test(value) || value === true && this.options_.normalizeAutoplay) {
+        this.options_.autoplay = value;
+        this.manualAutoplay_(typeof value === 'string' ? value : 'play');
+        techAutoplay = false;
+
+        // any falsy value sets autoplay to false in the browser,
+        // lets do the same
+      } else if (!value) {
+        this.options_.autoplay = false;
+
+        // any other value (ie truthy) sets autoplay to true
+      } else {
+        this.options_.autoplay = true;
+      }
+      techAutoplay = typeof techAutoplay === 'undefined' ? this.options_.autoplay : techAutoplay;
+
+      // if we don't have a tech then we do not queue up
+      // a setAutoplay call on tech ready. We do this because the
+      // autoplay option will be passed in the constructor and we
+      // do not need to set it twice
+      if (this.tech_) {
+        this.techCall_('setAutoplay', techAutoplay);
+      }
+    }
+
+    /**
+     * Set or unset the playsinline attribute.
+     * Playsinline tells the browser that non-fullscreen playback is preferred.
+     *
+     * @param {boolean} [value]
+     *        - true means that we should try to play inline by default
+     *        - false means that we should use the browser's default playback mode,
+     *          which in most cases is inline. iOS Safari is a notable exception
+     *          and plays fullscreen by default.
+     *
+     * @return {string|undefined}
+     *         - the current value of playsinline
+     *         - Nothing when setting
+     *
+     * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+     */
+    playsinline(value) {
+      if (value !== undefined) {
+        this.techCall_('setPlaysinline', value);
+        this.options_.playsinline = value;
+      }
+      return this.techGet_('playsinline');
+    }
+
+    /**
+     * Get or set the loop attribute on the video element.
+     *
+     * @param {boolean} [value]
+     *        - true means that we should loop the video
+     *        - false means that we should not loop the video
+     *
+     * @return {boolean|undefined}
+     *         - The current value of loop when getting
+     *         - Nothing when setting
+     */
+    loop(value) {
+      if (value !== undefined) {
+        this.techCall_('setLoop', value);
+        this.options_.loop = value;
+        return;
+      }
+      return this.techGet_('loop');
+    }
+
+    /**
+     * Get or set the poster image source url
+     *
+     * @fires Player#posterchange
+     *
+     * @param {string} [src]
+     *        Poster image source URL
+     *
+     * @return {string|undefined}
+     *         - The current value of poster when getting
+     *         - Nothing when setting
+     */
+    poster(src) {
+      if (src === undefined) {
+        return this.poster_;
+      }
+
+      // The correct way to remove a poster is to set as an empty string
+      // other falsey values will throw errors
+      if (!src) {
+        src = '';
+      }
+      if (src === this.poster_) {
+        return;
+      }
+
+      // update the internal poster variable
+      this.poster_ = src;
+
+      // update the tech's poster
+      this.techCall_('setPoster', src);
+      this.isPosterFromTech_ = false;
+
+      // alert components that the poster has been set
+      /**
+       * This event fires when the poster image is changed on the player.
+       *
+       * @event Player#posterchange
+       * @type {Event}
+       */
+      this.trigger('posterchange');
+    }
+
+    /**
+     * Some techs (e.g. YouTube) can provide a poster source in an
+     * asynchronous way. We want the poster component to use this
+     * poster source so that it covers up the tech's controls.
+     * (YouTube's play button). However we only want to use this
+     * source if the player user hasn't set a poster through
+     * the normal APIs.
+     *
+     * @fires Player#posterchange
+     * @listens Tech#posterchange
+     * @private
+     */
+    handleTechPosterChange_() {
+      if ((!this.poster_ || this.options_.techCanOverridePoster) && this.tech_ && this.tech_.poster) {
+        const newPoster = this.tech_.poster() || '';
+        if (newPoster !== this.poster_) {
+          this.poster_ = newPoster;
+          this.isPosterFromTech_ = true;
+
+          // Let components know the poster has changed
+          this.trigger('posterchange');
+        }
+      }
+    }
+
+    /**
+     * Get or set whether or not the controls are showing.
+     *
+     * @fires Player#controlsenabled
+     *
+     * @param {boolean} [bool]
+     *        - true to turn controls on
+     *        - false to turn controls off
+     *
+     * @return {boolean|undefined}
+     *         - The current value of controls when getting
+     *         - Nothing when setting
+     */
+    controls(bool) {
+      if (bool === undefined) {
+        return !!this.controls_;
+      }
+      bool = !!bool;
+
+      // Don't trigger a change event unless it actually changed
+      if (this.controls_ === bool) {
+        return;
+      }
+      this.controls_ = bool;
+      if (this.usingNativeControls()) {
+        this.techCall_('setControls', bool);
+      }
+      if (this.controls_) {
+        this.removeClass('vjs-controls-disabled');
+        this.addClass('vjs-controls-enabled');
+        /**
+         * @event Player#controlsenabled
+         * @type {Event}
+         */
+        this.trigger('controlsenabled');
+        if (!this.usingNativeControls()) {
+          this.addTechControlsListeners_();
+        }
+      } else {
+        this.removeClass('vjs-controls-enabled');
+        this.addClass('vjs-controls-disabled');
+        /**
+         * @event Player#controlsdisabled
+         * @type {Event}
+         */
+        this.trigger('controlsdisabled');
+        if (!this.usingNativeControls()) {
+          this.removeTechControlsListeners_();
+        }
+      }
+    }
+
+    /**
+     * Toggle native controls on/off. Native controls are the controls built into
+     * devices (e.g. default iPhone controls) or other techs
+     * (e.g. Vimeo Controls)
+     * **This should only be set by the current tech, because only the tech knows
+     * if it can support native controls**
+     *
+     * @fires Player#usingnativecontrols
+     * @fires Player#usingcustomcontrols
+     *
+     * @param {boolean} [bool]
+     *        - true to turn native controls on
+     *        - false to turn native controls off
+     *
+     * @return {boolean|undefined}
+     *         - The current value of native controls when getting
+     *         - Nothing when setting
+     */
+    usingNativeControls(bool) {
+      if (bool === undefined) {
+        return !!this.usingNativeControls_;
+      }
+      bool = !!bool;
+
+      // Don't trigger a change event unless it actually changed
+      if (this.usingNativeControls_ === bool) {
+        return;
+      }
+      this.usingNativeControls_ = bool;
+      if (this.usingNativeControls_) {
+        this.addClass('vjs-using-native-controls');
+
+        /**
+         * player is using the native device controls
+         *
+         * @event Player#usingnativecontrols
+         * @type {Event}
+         */
+        this.trigger('usingnativecontrols');
+      } else {
+        this.removeClass('vjs-using-native-controls');
+
+        /**
+         * player is using the custom HTML controls
+         *
+         * @event Player#usingcustomcontrols
+         * @type {Event}
+         */
+        this.trigger('usingcustomcontrols');
+      }
+    }
+
+    /**
+     * Set or get the current MediaError
+     *
+     * @fires Player#error
+     *
+     * @param  {MediaError|string|number} [err]
+     *         A MediaError or a string/number to be turned
+     *         into a MediaError
+     *
+     * @return {MediaError|null|undefined}
+     *         - The current MediaError when getting (or null)
+     *         - Nothing when setting
+     */
+    error(err) {
+      if (err === undefined) {
+        return this.error_ || null;
+      }
+
+      // allow hooks to modify error object
+      hooks('beforeerror').forEach(hookFunction => {
+        const newErr = hookFunction(this, err);
+        if (!(isObject$1(newErr) && !Array.isArray(newErr) || typeof newErr === 'string' || typeof newErr === 'number' || newErr === null)) {
+          this.log.error('please return a value that MediaError expects in beforeerror hooks');
+          return;
+        }
+        err = newErr;
+      });
+
+      // Suppress the first error message for no compatible source until
+      // user interaction
+      if (this.options_.suppressNotSupportedError && err && err.code === 4) {
+        const triggerSuppressedError = function () {
+          this.error(err);
+        };
+        this.options_.suppressNotSupportedError = false;
+        this.any(['click', 'touchstart'], triggerSuppressedError);
+        this.one('loadstart', function () {
+          this.off(['click', 'touchstart'], triggerSuppressedError);
+        });
+        return;
+      }
+
+      // restoring to default
+      if (err === null) {
+        this.error_ = null;
+        this.removeClass('vjs-error');
+        if (this.errorDisplay) {
+          this.errorDisplay.close();
+        }
+        return;
+      }
+      this.error_ = new MediaError(err);
+
+      // add the vjs-error classname to the player
+      this.addClass('vjs-error');
+
+      // log the name of the error type and any message
+      // IE11 logs "[object object]" and required you to expand message to see error object
+      log$1.error(`(CODE:${this.error_.code} ${MediaError.errorTypes[this.error_.code]})`, this.error_.message, this.error_);
+
+      /**
+       * @event Player#error
+       * @type {Event}
+       */
+      this.trigger('error');
+
+      // notify hooks of the per player error
+      hooks('error').forEach(hookFunction => hookFunction(this, this.error_));
+      return;
+    }
+
+    /**
+     * Report user activity
+     *
+     * @param {Object} event
+     *        Event object
+     */
+    reportUserActivity(event) {
+      this.userActivity_ = true;
+    }
+
+    /**
+     * Get/set if user is active
+     *
+     * @fires Player#useractive
+     * @fires Player#userinactive
+     *
+     * @param {boolean} [bool]
+     *        - true if the user is active
+     *        - false if the user is inactive
+     *
+     * @return {boolean|undefined}
+     *         - The current value of userActive when getting
+     *         - Nothing when setting
+     */
+    userActive(bool) {
+      if (bool === undefined) {
+        return this.userActive_;
+      }
+      bool = !!bool;
+      if (bool === this.userActive_) {
+        return;
+      }
+      this.userActive_ = bool;
+      if (this.userActive_) {
+        this.userActivity_ = true;
+        this.removeClass('vjs-user-inactive');
+        this.addClass('vjs-user-active');
+        /**
+         * @event Player#useractive
+         * @type {Event}
+         */
+        this.trigger('useractive');
+        return;
+      }
+
+      // Chrome/Safari/IE have bugs where when you change the cursor it can
+      // trigger a mousemove event. This causes an issue when you're hiding
+      // the cursor when the user is inactive, and a mousemove signals user
+      // activity. Making it impossible to go into inactive mode. Specifically
+      // this happens in fullscreen when we really need to hide the cursor.
+      //
+      // When this gets resolved in ALL browsers it can be removed
+      // https://code.google.com/p/chromium/issues/detail?id=103041
+      if (this.tech_) {
+        this.tech_.one('mousemove', function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+        });
+      }
+      this.userActivity_ = false;
+      this.removeClass('vjs-user-active');
+      this.addClass('vjs-user-inactive');
+      /**
+       * @event Player#userinactive
+       * @type {Event}
+       */
+      this.trigger('userinactive');
+    }
+
+    /**
+     * Listen for user activity based on timeout value
+     *
+     * @private
+     */
+    listenForUserActivity_() {
+      let mouseInProgress;
+      let lastMoveX;
+      let lastMoveY;
+      const handleActivity = bind_(this, this.reportUserActivity);
+      const handleMouseMove = function (e) {
+        // #1068 - Prevent mousemove spamming
+        // Chrome Bug: https://code.google.com/p/chromium/issues/detail?id=366970
+        if (e.screenX !== lastMoveX || e.screenY !== lastMoveY) {
+          lastMoveX = e.screenX;
+          lastMoveY = e.screenY;
+          handleActivity();
+        }
+      };
+      const handleMouseDown = function () {
+        handleActivity();
+        // For as long as the they are touching the device or have their mouse down,
+        // we consider them active even if they're not moving their finger or mouse.
+        // So we want to continue to update that they are active
+        this.clearInterval(mouseInProgress);
+        // Setting userActivity=true now and setting the interval to the same time
+        // as the activityCheck interval (250) should ensure we never miss the
+        // next activityCheck
+        mouseInProgress = this.setInterval(handleActivity, 250);
+      };
+      const handleMouseUpAndMouseLeave = function (event) {
+        handleActivity();
+        // Stop the interval that maintains activity if the mouse/touch is down
+        this.clearInterval(mouseInProgress);
+      };
+
+      // Any mouse movement will be considered user activity
+      this.on('mousedown', handleMouseDown);
+      this.on('mousemove', handleMouseMove);
+      this.on('mouseup', handleMouseUpAndMouseLeave);
+      this.on('mouseleave', handleMouseUpAndMouseLeave);
+      const controlBar = this.getChild('controlBar');
+
+      // Fixes bug on Android & iOS where when tapping progressBar (when control bar is displayed)
+      // controlBar would no longer be hidden by default timeout.
+      if (controlBar && !IS_IOS && !IS_ANDROID) {
+        controlBar.on('mouseenter', function (event) {
+          if (this.player().options_.inactivityTimeout !== 0) {
+            this.player().cache_.inactivityTimeout = this.player().options_.inactivityTimeout;
+          }
+          this.player().options_.inactivityTimeout = 0;
+        });
+        controlBar.on('mouseleave', function (event) {
+          this.player().options_.inactivityTimeout = this.player().cache_.inactivityTimeout;
+        });
+      }
+
+      // Listen for keyboard navigation
+      // Shouldn't need to use inProgress interval because of key repeat
+      this.on('keydown', handleActivity);
+      this.on('keyup', handleActivity);
+
+      // Run an interval every 250 milliseconds instead of stuffing everything into
+      // the mousemove/touchmove function itself, to prevent performance degradation.
+      // `this.reportUserActivity` simply sets this.userActivity_ to true, which
+      // then gets picked up by this loop
+      // http://ejohn.org/blog/learning-from-twitter/
+      let inactivityTimeout;
+
+      /** @this Player */
+      const activityCheck = function () {
+        // Check to see if mouse/touch activity has happened
+        if (!this.userActivity_) {
+          return;
+        }
+
+        // Reset the activity tracker
+        this.userActivity_ = false;
+
+        // If the user state was inactive, set the state to active
+        this.userActive(true);
+
+        // Clear any existing inactivity timeout to start the timer over
+        this.clearTimeout(inactivityTimeout);
+        const timeout = this.options_.inactivityTimeout;
+        if (timeout <= 0) {
+          return;
+        }
+
+        // In <timeout> milliseconds, if no more activity has occurred the
+        // user will be considered inactive
+        inactivityTimeout = this.setTimeout(function () {
+          // Protect against the case where the inactivityTimeout can trigger just
+          // before the next user activity is picked up by the activity check loop
+          // causing a flicker
+          if (!this.userActivity_) {
+            this.userActive(false);
+          }
+        }, timeout);
+      };
+      this.setInterval(activityCheck, 250);
+    }
+
+    /**
+     * Gets or sets the current playback rate. A playback rate of
+     * 1.0 represents normal speed and 0.5 would indicate half-speed
+     * playback, for instance.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-playbackrate
+     *
+     * @param {number} [rate]
+     *       New playback rate to set.
+     *
+     * @return {number|undefined}
+     *         - The current playback rate when getting or 1.0
+     *         - Nothing when setting
+     */
+    playbackRate(rate) {
+      if (rate !== undefined) {
+        // NOTE: this.cache_.lastPlaybackRate is set from the tech handler
+        // that is registered above
+        this.techCall_('setPlaybackRate', rate);
+        return;
+      }
+      if (this.tech_ && this.tech_.featuresPlaybackRate) {
+        return this.cache_.lastPlaybackRate || this.techGet_('playbackRate');
+      }
+      return 1.0;
+    }
+
+    /**
+     * Gets or sets the current default playback rate. A default playback rate of
+     * 1.0 represents normal speed and 0.5 would indicate half-speed playback, for instance.
+     * defaultPlaybackRate will only represent what the initial playbackRate of a video was, not
+     * not the current playbackRate.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-defaultplaybackrate
+     *
+     * @param {number} [rate]
+     *       New default playback rate to set.
+     *
+     * @return {number|undefined}
+     *         - The default playback rate when getting or 1.0
+     *         - Nothing when setting
+     */
+    defaultPlaybackRate(rate) {
+      if (rate !== undefined) {
+        return this.techCall_('setDefaultPlaybackRate', rate);
+      }
+      if (this.tech_ && this.tech_.featuresPlaybackRate) {
+        return this.techGet_('defaultPlaybackRate');
+      }
+      return 1.0;
+    }
+
+    /**
+     * Gets or sets the audio flag
+     *
+     * @param {boolean} [bool]
+     *        - true signals that this is an audio player
+     *        - false signals that this is not an audio player
+     *
+     * @return {boolean|undefined}
+     *         - The current value of isAudio when getting
+     *         - Nothing when setting
+     */
+    isAudio(bool) {
+      if (bool !== undefined) {
+        this.isAudio_ = !!bool;
+        return;
+      }
+      return !!this.isAudio_;
+    }
+    enableAudioOnlyUI_() {
+      // Update styling immediately to show the control bar so we can get its height
+      this.addClass('vjs-audio-only-mode');
+      const playerChildren = this.children();
+      const controlBar = this.getChild('ControlBar');
+      const controlBarHeight = controlBar && controlBar.currentHeight();
+
+      // Hide all player components except the control bar. Control bar components
+      // needed only for video are hidden with CSS
+      playerChildren.forEach(child => {
+        if (child === controlBar) {
+          return;
+        }
+        if (child.el_ && !child.hasClass('vjs-hidden')) {
+          child.hide();
+          this.audioOnlyCache_.hiddenChildren.push(child);
+        }
+      });
+      this.audioOnlyCache_.playerHeight = this.currentHeight();
+
+      // Set the player height the same as the control bar
+      this.height(controlBarHeight);
+      this.trigger('audioonlymodechange');
+    }
+    disableAudioOnlyUI_() {
+      this.removeClass('vjs-audio-only-mode');
+
+      // Show player components that were previously hidden
+      this.audioOnlyCache_.hiddenChildren.forEach(child => child.show());
+
+      // Reset player height
+      this.height(this.audioOnlyCache_.playerHeight);
+      this.trigger('audioonlymodechange');
+    }
+
+    /**
+     * Get the current audioOnlyMode state or set audioOnlyMode to true or false.
+     *
+     * Setting this to `true` will hide all player components except the control bar,
+     * as well as control bar components needed only for video.
+     *
+     * @param {boolean} [value]
+     *         The value to set audioOnlyMode to.
+     *
+     * @return {Promise|boolean}
+     *        A Promise is returned when setting the state, and a boolean when getting
+     *        the present state
+     */
+    audioOnlyMode(value) {
+      if (typeof value !== 'boolean' || value === this.audioOnlyMode_) {
+        return this.audioOnlyMode_;
+      }
+      this.audioOnlyMode_ = value;
+
+      // Enable Audio Only Mode
+      if (value) {
+        const exitPromises = [];
+
+        // Fullscreen and PiP are not supported in audioOnlyMode, so exit if we need to.
+        if (this.isInPictureInPicture()) {
+          exitPromises.push(this.exitPictureInPicture());
+        }
+        if (this.isFullscreen()) {
+          exitPromises.push(this.exitFullscreen());
+        }
+        if (this.audioPosterMode()) {
+          exitPromises.push(this.audioPosterMode(false));
+        }
+        return Promise.all(exitPromises).then(() => this.enableAudioOnlyUI_());
+      }
+
+      // Disable Audio Only Mode
+      return Promise.resolve().then(() => this.disableAudioOnlyUI_());
+    }
+    enablePosterModeUI_() {
+      // Hide the video element and show the poster image to enable posterModeUI
+      const tech = this.tech_ && this.tech_;
+      tech.hide();
+      this.addClass('vjs-audio-poster-mode');
+      this.trigger('audiopostermodechange');
+    }
+    disablePosterModeUI_() {
+      // Show the video element and hide the poster image to disable posterModeUI
+      const tech = this.tech_ && this.tech_;
+      tech.show();
+      this.removeClass('vjs-audio-poster-mode');
+      this.trigger('audiopostermodechange');
+    }
+
+    /**
+     * Get the current audioPosterMode state or set audioPosterMode to true or false
+     *
+     * @param {boolean} [value]
+     *         The value to set audioPosterMode to.
+     *
+     * @return {Promise|boolean}
+     *         A Promise is returned when setting the state, and a boolean when getting
+     *        the present state
+     */
+    audioPosterMode(value) {
+      if (typeof value !== 'boolean' || value === this.audioPosterMode_) {
+        return this.audioPosterMode_;
+      }
+      this.audioPosterMode_ = value;
+      if (value) {
+        if (this.audioOnlyMode()) {
+          const audioOnlyModePromise = this.audioOnlyMode(false);
+          return audioOnlyModePromise.then(() => {
+            // enable audio poster mode after audio only mode is disabled
+            this.enablePosterModeUI_();
+          });
+        }
+        return Promise.resolve().then(() => {
+          // enable audio poster mode
+          this.enablePosterModeUI_();
+        });
+      }
+      return Promise.resolve().then(() => {
+        // disable audio poster mode
+        this.disablePosterModeUI_();
+      });
+    }
+
+    /**
+     * A helper method for adding a {@link TextTrack} to our
+     * {@link TextTrackList}.
+     *
+     * In addition to the W3C settings we allow adding additional info through options.
+     *
+     * @see http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack
+     *
+     * @param {string} [kind]
+     *        the kind of TextTrack you are adding
+     *
+     * @param {string} [label]
+     *        the label to give the TextTrack label
+     *
+     * @param {string} [language]
+     *        the language to set on the TextTrack
+     *
+     * @return {TextTrack|undefined}
+     *         the TextTrack that was added or undefined
+     *         if there is no tech
+     */
+    addTextTrack(kind, label, language) {
+      if (this.tech_) {
+        return this.tech_.addTextTrack(kind, label, language);
+      }
+    }
+
+    /**
+     * Create a remote {@link TextTrack} and an {@link HTMLTrackElement}.
+     *
+     * @param {Object} options
+     *        Options to pass to {@link HTMLTrackElement} during creation. See
+     *        {@link HTMLTrackElement} for object properties that you should use.
+     *
+     * @param {boolean} [manualCleanup=false] if set to true, the TextTrack will not be removed
+     *                                        from the TextTrackList and HtmlTrackElementList
+     *                                        after a source change
+     *
+     * @return { import('./tracks/html-track-element').default }
+     *         the HTMLTrackElement that was created and added
+     *         to the HtmlTrackElementList and the remote
+     *         TextTrackList
+     *
+     */
+    addRemoteTextTrack(options, manualCleanup) {
+      if (this.tech_) {
+        return this.tech_.addRemoteTextTrack(options, manualCleanup);
+      }
+    }
+
+    /**
+     * Remove a remote {@link TextTrack} from the respective
+     * {@link TextTrackList} and {@link HtmlTrackElementList}.
+     *
+     * @param {Object} track
+     *        Remote {@link TextTrack} to remove
+     *
+     * @return {undefined}
+     *         does not return anything
+     */
+    removeRemoteTextTrack(obj = {}) {
+      let {
+        track
+      } = obj;
+      if (!track) {
+        track = obj;
+      }
+
+      // destructure the input into an object with a track argument, defaulting to arguments[0]
+      // default the whole argument to an empty object if nothing was passed in
+
+      if (this.tech_) {
+        return this.tech_.removeRemoteTextTrack(track);
+      }
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object|undefined}
+     *         An object with supported media playback quality metrics or undefined if there
+     *         is no tech or the tech does not support it.
+     */
+    getVideoPlaybackQuality() {
+      return this.techGet_('getVideoPlaybackQuality');
+    }
+
+    /**
+     * Get video width
+     *
+     * @return {number}
+     *         current video width
+     */
+    videoWidth() {
+      return this.tech_ && this.tech_.videoWidth && this.tech_.videoWidth() || 0;
+    }
+
+    /**
+     * Get video height
+     *
+     * @return {number}
+     *         current video height
+     */
+    videoHeight() {
+      return this.tech_ && this.tech_.videoHeight && this.tech_.videoHeight() || 0;
+    }
+
+    /**
+     * Set or get the player's language code.
+     *
+     * Changing the language will trigger
+     * [languagechange]{@link Player#event:languagechange}
+     * which Components can use to update control text.
+     * ClickableComponent will update its control text by default on
+     * [languagechange]{@link Player#event:languagechange}.
+     *
+     * @fires Player#languagechange
+     *
+     * @param {string} [code]
+     *        the language code to set the player to
+     *
+     * @return {string|undefined}
+     *         - The current language code when getting
+     *         - Nothing when setting
+     */
+    language(code) {
+      if (code === undefined) {
+        return this.language_;
+      }
+      if (this.language_ !== String(code).toLowerCase()) {
+        this.language_ = String(code).toLowerCase();
+
+        // during first init, it's possible some things won't be evented
+        if (isEvented(this)) {
+          /**
+          * fires when the player language change
+          *
+          * @event Player#languagechange
+          * @type {Event}
+          */
+          this.trigger('languagechange');
+        }
+      }
+    }
+
+    /**
+     * Get the player's language dictionary
+     * Merge every time, because a newly added plugin might call videojs.addLanguage() at any time
+     * Languages specified directly in the player options have precedence
+     *
+     * @return {Array}
+     *         An array of of supported languages
+     */
+    languages() {
+      return merge$2(Player.prototype.options_.languages, this.languages_);
+    }
+
+    /**
+     * returns a JavaScript object representing the current track
+     * information. **DOES not return it as JSON**
+     *
+     * @return {Object}
+     *         Object representing the current of track info
+     */
+    toJSON() {
+      const options = merge$2(this.options_);
+      const tracks = options.tracks;
+      options.tracks = [];
+      for (let i = 0; i < tracks.length; i++) {
+        let track = tracks[i];
+
+        // deep merge tracks and null out player so no circular references
+        track = merge$2(track);
+        track.player = undefined;
+        options.tracks[i] = track;
+      }
+      return options;
+    }
+
+    /**
+     * Creates a simple modal dialog (an instance of the {@link ModalDialog}
+     * component) that immediately overlays the player with arbitrary
+     * content and removes itself when closed.
+     *
+     * @param {string|Function|Element|Array|null} content
+     *        Same as {@link ModalDialog#content}'s param of the same name.
+     *        The most straight-forward usage is to provide a string or DOM
+     *        element.
+     *
+     * @param {Object} [options]
+     *        Extra options which will be passed on to the {@link ModalDialog}.
+     *
+     * @return {ModalDialog}
+     *         the {@link ModalDialog} that was created
+     */
+    createModal(content, options) {
+      options = options || {};
+      options.content = content || '';
+      const modal = new ModalDialog(this, options);
+      this.addChild(modal);
+      modal.on('dispose', () => {
+        this.removeChild(modal);
+      });
+      modal.open();
+      return modal;
+    }
+
+    /**
+     * Change breakpoint classes when the player resizes.
+     *
+     * @private
+     */
+    updateCurrentBreakpoint_() {
+      if (!this.responsive()) {
+        return;
+      }
+      const currentBreakpoint = this.currentBreakpoint();
+      const currentWidth = this.currentWidth();
+      for (let i = 0; i < BREAKPOINT_ORDER.length; i++) {
+        const candidateBreakpoint = BREAKPOINT_ORDER[i];
+        const maxWidth = this.breakpoints_[candidateBreakpoint];
+        if (currentWidth <= maxWidth) {
+          // The current breakpoint did not change, nothing to do.
+          if (currentBreakpoint === candidateBreakpoint) {
+            return;
+          }
+
+          // Only remove a class if there is a current breakpoint.
+          if (currentBreakpoint) {
+            this.removeClass(BREAKPOINT_CLASSES[currentBreakpoint]);
+          }
+          this.addClass(BREAKPOINT_CLASSES[candidateBreakpoint]);
+          this.breakpoint_ = candidateBreakpoint;
+          break;
+        }
+      }
+    }
+
+    /**
+     * Removes the current breakpoint.
+     *
+     * @private
+     */
+    removeCurrentBreakpoint_() {
+      const className = this.currentBreakpointClass();
+      this.breakpoint_ = '';
+      if (className) {
+        this.removeClass(className);
+      }
+    }
+
+    /**
+     * Get or set breakpoints on the player.
+     *
+     * Calling this method with an object or `true` will remove any previous
+     * custom breakpoints and start from the defaults again.
+     *
+     * @param  {Object|boolean} [breakpoints]
+     *         If an object is given, it can be used to provide custom
+     *         breakpoints. If `true` is given, will set default breakpoints.
+     *         If this argument is not given, will simply return the current
+     *         breakpoints.
+     *
+     * @param  {number} [breakpoints.tiny]
+     *         The maximum width for the "vjs-layout-tiny" class.
+     *
+     * @param  {number} [breakpoints.xsmall]
+     *         The maximum width for the "vjs-layout-x-small" class.
+     *
+     * @param  {number} [breakpoints.small]
+     *         The maximum width for the "vjs-layout-small" class.
+     *
+     * @param  {number} [breakpoints.medium]
+     *         The maximum width for the "vjs-layout-medium" class.
+     *
+     * @param  {number} [breakpoints.large]
+     *         The maximum width for the "vjs-layout-large" class.
+     *
+     * @param  {number} [breakpoints.xlarge]
+     *         The maximum width for the "vjs-layout-x-large" class.
+     *
+     * @param  {number} [breakpoints.huge]
+     *         The maximum width for the "vjs-layout-huge" class.
+     *
+     * @return {Object}
+     *         An object mapping breakpoint names to maximum width values.
+     */
+    breakpoints(breakpoints) {
+      // Used as a getter.
+      if (breakpoints === undefined) {
+        return Object.assign(this.breakpoints_);
+      }
+      this.breakpoint_ = '';
+      this.breakpoints_ = Object.assign({}, DEFAULT_BREAKPOINTS, breakpoints);
+
+      // When breakpoint definitions change, we need to update the currently
+      // selected breakpoint.
+      this.updateCurrentBreakpoint_();
+
+      // Clone the breakpoints before returning.
+      return Object.assign(this.breakpoints_);
+    }
+
+    /**
+     * Get or set a flag indicating whether or not this player should adjust
+     * its UI based on its dimensions.
+     *
+     * @param  {boolean} [value]
+     *         Should be `true` if the player should adjust its UI based on its
+     *         dimensions; otherwise, should be `false`.
+     *
+     * @return {boolean|undefined}
+     *         Will be `true` if this player should adjust its UI based on its
+     *         dimensions; otherwise, will be `false`.
+     *         Nothing if setting
+     */
+    responsive(value) {
+      // Used as a getter.
+      if (value === undefined) {
+        return this.responsive_;
+      }
+      value = Boolean(value);
+      const current = this.responsive_;
+
+      // Nothing changed.
+      if (value === current) {
+        return;
+      }
+
+      // The value actually changed, set it.
+      this.responsive_ = value;
+
+      // Start listening for breakpoints and set the initial breakpoint if the
+      // player is now responsive.
+      if (value) {
+        this.on('playerresize', this.boundUpdateCurrentBreakpoint_);
+        this.updateCurrentBreakpoint_();
+
+        // Stop listening for breakpoints if the player is no longer responsive.
+      } else {
+        this.off('playerresize', this.boundUpdateCurrentBreakpoint_);
+        this.removeCurrentBreakpoint_();
+      }
+      return value;
+    }
+
+    /**
+     * Get current breakpoint name, if any.
+     *
+     * @return {string}
+     *         If there is currently a breakpoint set, returns a the key from the
+     *         breakpoints object matching it. Otherwise, returns an empty string.
+     */
+    currentBreakpoint() {
+      return this.breakpoint_;
+    }
+
+    /**
+     * Get the current breakpoint class name.
+     *
+     * @return {string}
+     *         The matching class name (e.g. `"vjs-layout-tiny"` or
+     *         `"vjs-layout-large"`) for the current breakpoint. Empty string if
+     *         there is no current breakpoint.
+     */
+    currentBreakpointClass() {
+      return BREAKPOINT_CLASSES[this.breakpoint_] || '';
+    }
+
+    /**
+     * An object that describes a single piece of media.
+     *
+     * Properties that are not part of this type description will be retained; so,
+     * this can be viewed as a generic metadata storage mechanism as well.
+     *
+     * @see      {@link https://wicg.github.io/mediasession/#the-mediametadata-interface}
+     * @typedef  {Object} Player~MediaObject
+     *
+     * @property {string} [album]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {string} [artist]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {Object[]} [artwork]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API. If not specified, will be populated via the `poster`, if
+     *           available.
+     *
+     * @property {string} [poster]
+     *           URL to an image that will display before playback.
+     *
+     * @property {Tech~SourceObject|Tech~SourceObject[]|string} [src]
+     *           A single source object, an array of source objects, or a string
+     *           referencing a URL to a media source. It is _highly recommended_
+     *           that an object or array of objects is used here, so that source
+     *           selection algorithms can take the `type` into account.
+     *
+     * @property {string} [title]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {Object[]} [textTracks]
+     *           An array of objects to be used to create text tracks, following
+     *           the {@link https://www.w3.org/TR/html50/embedded-content-0.html#the-track-element|native track element format}.
+     *           For ease of removal, these will be created as "remote" text
+     *           tracks and set to automatically clean up on source changes.
+     *
+     *           These objects may have properties like `src`, `kind`, `label`,
+     *           and `language`, see {@link Tech#createRemoteTextTrack}.
+     */
+
+    /**
+     * Populate the player using a {@link Player~MediaObject|MediaObject}.
+     *
+     * @param  {Player~MediaObject} media
+     *         A media object.
+     *
+     * @param  {Function} ready
+     *         A callback to be called when the player is ready.
+     */
+    loadMedia(media, ready) {
+      if (!media || typeof media !== 'object') {
+        return;
+      }
+      const crossOrigin = this.crossOrigin();
+      this.reset();
+
+      // Clone the media object so it cannot be mutated from outside.
+      this.cache_.media = merge$2(media);
+      const {
+        artist,
+        artwork,
+        description,
+        poster,
+        src,
+        textTracks,
+        title
+      } = this.cache_.media;
+
+      // If `artwork` is not given, create it using `poster`.
+      if (!artwork && poster) {
+        this.cache_.media.artwork = [{
+          src: poster,
+          type: getMimetype(poster)
+        }];
+      }
+      if (crossOrigin) {
+        this.crossOrigin(crossOrigin);
+      }
+      if (src) {
+        this.src(src);
+      }
+      if (poster) {
+        this.poster(poster);
+      }
+      if (Array.isArray(textTracks)) {
+        textTracks.forEach(tt => this.addRemoteTextTrack(tt, false));
+      }
+      if (this.titleBar) {
+        this.titleBar.update({
+          title,
+          description: description || artist || ''
+        });
+      }
+      this.ready(ready);
+    }
+
+    /**
+     * Get a clone of the current {@link Player~MediaObject} for this player.
+     *
+     * If the `loadMedia` method has not been used, will attempt to return a
+     * {@link Player~MediaObject} based on the current state of the player.
+     *
+     * @return {Player~MediaObject}
+     */
+    getMedia() {
+      if (!this.cache_.media) {
+        const poster = this.poster();
+        const src = this.currentSources();
+        const textTracks = Array.prototype.map.call(this.remoteTextTracks(), tt => ({
+          kind: tt.kind,
+          label: tt.label,
+          language: tt.language,
+          src: tt.src
+        }));
+        const media = {
+          src,
+          textTracks
+        };
+        if (poster) {
+          media.poster = poster;
+          media.artwork = [{
+            src: media.poster,
+            type: getMimetype(media.poster)
+          }];
+        }
+        return media;
+      }
+      return merge$2(this.cache_.media);
+    }
+
+    /**
+     * Gets tag settings
+     *
+     * @param {Element} tag
+     *        The player tag
+     *
+     * @return {Object}
+     *         An object containing all of the settings
+     *         for a player tag
+     */
+    static getTagSettings(tag) {
+      const baseOptions = {
+        sources: [],
+        tracks: []
+      };
+      const tagOptions = getAttributes(tag);
+      const dataSetup = tagOptions['data-setup'];
+      if (hasClass(tag, 'vjs-fill')) {
+        tagOptions.fill = true;
+      }
+      if (hasClass(tag, 'vjs-fluid')) {
+        tagOptions.fluid = true;
+      }
+
+      // Check if data-setup attr exists.
+      if (dataSetup !== null) {
+        // Parse options JSON
+        // If empty string, make it a parsable json object.
+        const [err, data] = tuple(dataSetup || '{}');
+        if (err) {
+          log$1.error(err);
+        }
+        Object.assign(tagOptions, data);
+      }
+      Object.assign(baseOptions, tagOptions);
+
+      // Get tag children settings
+      if (tag.hasChildNodes()) {
+        const children = tag.childNodes;
+        for (let i = 0, j = children.length; i < j; i++) {
+          const child = children[i];
+          // Change case needed: http://ejohn.org/blog/nodename-case-sensitivity/
+          const childName = child.nodeName.toLowerCase();
+          if (childName === 'source') {
+            baseOptions.sources.push(getAttributes(child));
+          } else if (childName === 'track') {
+            baseOptions.tracks.push(getAttributes(child));
+          }
+        }
+      }
+      return baseOptions;
+    }
+
+    /**
+     * Set debug mode to enable/disable logs at info level.
+     *
+     * @param {boolean} enabled
+     * @fires Player#debugon
+     * @fires Player#debugoff
+     * @return {boolean|undefined}
+     */
+    debug(enabled) {
+      if (enabled === undefined) {
+        return this.debugEnabled_;
+      }
+      if (enabled) {
+        this.trigger('debugon');
+        this.previousLogLevel_ = this.log.level;
+        this.log.level('debug');
+        this.debugEnabled_ = true;
+      } else {
+        this.trigger('debugoff');
+        this.log.level(this.previousLogLevel_);
+        this.previousLogLevel_ = undefined;
+        this.debugEnabled_ = false;
+      }
+    }
+
+    /**
+     * Set or get current playback rates.
+     * Takes an array and updates the playback rates menu with the new items.
+     * Pass in an empty array to hide the menu.
+     * Values other than arrays are ignored.
+     *
+     * @fires Player#playbackrateschange
+     * @param {number[]} [newRates]
+     *                   The new rates that the playback rates menu should update to.
+     *                   An empty array will hide the menu
+     * @return {number[]} When used as a getter will return the current playback rates
+     */
+    playbackRates(newRates) {
+      if (newRates === undefined) {
+        return this.cache_.playbackRates;
+      }
+
+      // ignore any value that isn't an array
+      if (!Array.isArray(newRates)) {
+        return;
+      }
+
+      // ignore any arrays that don't only contain numbers
+      if (!newRates.every(rate => typeof rate === 'number')) {
+        return;
+      }
+      this.cache_.playbackRates = newRates;
+
+      /**
+      * fires when the playback rates in a player are changed
+      *
+      * @event Player#playbackrateschange
+      * @type {Event}
+      */
+      this.trigger('playbackrateschange');
+    }
+  }
+
+  /**
+   * Get the {@link VideoTrackList}
+   *
+   * @link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist
+   *
+   * @return {VideoTrackList}
+   *         the current video track list
+   *
+   * @method Player.prototype.videoTracks
+   */
+
+  /**
+   * Get the {@link AudioTrackList}
+   *
+   * @link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist
+   *
+   * @return {AudioTrackList}
+   *         the current audio track list
+   *
+   * @method Player.prototype.audioTracks
+   */
+
+  /**
+   * Get the {@link TextTrackList}
+   *
+   * @link http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-texttracks
+   *
+   * @return {TextTrackList}
+   *         the current text track list
+   *
+   * @method Player.prototype.textTracks
+   */
+
+  /**
+   * Get the remote {@link TextTrackList}
+   *
+   * @return {TextTrackList}
+   *         The current remote text track list
+   *
+   * @method Player.prototype.remoteTextTracks
+   */
+
+  /**
+   * Get the remote {@link HtmlTrackElementList} tracks.
+   *
+   * @return {HtmlTrackElementList}
+   *         The current remote text track element list
+   *
+   * @method Player.prototype.remoteTextTrackEls
+   */
+
+  ALL.names.forEach(function (name) {
+    const props = ALL[name];
+    Player.prototype[props.getterName] = function () {
+      if (this.tech_) {
+        return this.tech_[props.getterName]();
+      }
+
+      // if we have not yet loadTech_, we create {video,audio,text}Tracks_
+      // these will be passed to the tech during loading
+      this[props.privateName] = this[props.privateName] || new props.ListClass();
+      return this[props.privateName];
+    };
+  });
+
+  /**
+   * Get or set the `Player`'s crossorigin option. For the HTML5 player, this
+   * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+   * behavior.
+   *
+   * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+   *
+   * @param {string} [value]
+   *        The value to set the `Player`'s crossorigin to. If an argument is
+   *        given, must be one of `anonymous` or `use-credentials`.
+   *
+   * @return {string|undefined}
+   *         - The current crossorigin value of the `Player` when getting.
+   *         - undefined when setting
+   */
+  Player.prototype.crossorigin = Player.prototype.crossOrigin;
+
+  /**
+   * Global enumeration of players.
+   *
+   * The keys are the player IDs and the values are either the {@link Player}
+   * instance or `null` for disposed players.
+   *
+   * @type {Object}
+   */
+  Player.players = {};
+  const navigator = window.navigator;
+
+  /*
+   * Player instance options, surfaced using options
+   * options = Player.prototype.options_
+   * Make changes in options, not here.
+   *
+   * @type {Object}
+   * @private
+   */
+  Player.prototype.options_ = {
+    // Default order of fallback technology
+    techOrder: Tech.defaultTechOrder_,
+    html5: {},
+    // enable sourceset by default
+    enableSourceset: true,
+    // default inactivity timeout
+    inactivityTimeout: 2000,
+    // default playback rates
+    playbackRates: [],
+    // Add playback rate selection by adding rates
+    // 'playbackRates': [0.5, 1, 1.5, 2],
+    liveui: false,
+    // Included control sets
+    children: ['mediaLoader', 'posterImage', 'titleBar', 'textTrackDisplay', 'loadingSpinner', 'bigPlayButton', 'liveTracker', 'controlBar', 'errorDisplay', 'textTrackSettings', 'resizeManager'],
+    language: navigator && (navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language) || 'en',
+    // locales and their language translations
+    languages: {},
+    // Default message to show when a video cannot be played.
+    notSupportedMessage: 'No compatible source was found for this media.',
+    normalizeAutoplay: false,
+    fullscreen: {
+      options: {
+        navigationUI: 'hide'
+      }
+    },
+    breakpoints: {},
+    responsive: false,
+    audioOnlyMode: false,
+    audioPosterMode: false,
+    // Default smooth seeking to false
+    enableSmoothSeeking: false
+  };
+  TECH_EVENTS_RETRIGGER.forEach(function (event) {
+    Player.prototype[`handleTech${toTitleCase$1(event)}_`] = function () {
+      return this.trigger(event);
+    };
+  });
+
+  /**
+   * Fired when the player has initial duration and dimension information
+   *
+   * @event Player#loadedmetadata
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the player has downloaded data at the current playback position
+   *
+   * @event Player#loadeddata
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the current playback position has changed *
+   * During playback this is fired every 15-250 milliseconds, depending on the
+   * playback technology in use.
+   *
+   * @event Player#timeupdate
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the volume changes
+   *
+   * @event Player#volumechange
+   * @type {Event}
+   */
+
+  /**
+   * Reports whether or not a player has a plugin available.
+   *
+   * This does not report whether or not the plugin has ever been initialized
+   * on this player. For that, [usingPlugin]{@link Player#usingPlugin}.
+   *
+   * @method Player#hasPlugin
+   * @param  {string}  name
+   *         The name of a plugin.
+   *
+   * @return {boolean}
+   *         Whether or not this player has the requested plugin available.
+   */
+
+  /**
+   * Reports whether or not a player is using a plugin by name.
+   *
+   * For basic plugins, this only reports whether the plugin has _ever_ been
+   * initialized on this player.
+   *
+   * @method Player#usingPlugin
+   * @param  {string} name
+   *         The name of a plugin.
+   *
+   * @return {boolean}
+   *         Whether or not this player is using the requested plugin.
+   */
+
+  Component$1.registerComponent('Player', Player);
+
+  /**
+   * @file plugin.js
+   */
+
+  /**
+   * The base plugin name.
+   *
+   * @private
+   * @constant
+   * @type {string}
+   */
+  const BASE_PLUGIN_NAME = 'plugin';
+
+  /**
+   * The key on which a player's active plugins cache is stored.
+   *
+   * @private
+   * @constant
+   * @type     {string}
+   */
+  const PLUGIN_CACHE_KEY = 'activePlugins_';
+
+  /**
+   * Stores registered plugins in a private space.
+   *
+   * @private
+   * @type    {Object}
+   */
+  const pluginStorage = {};
+
+  /**
+   * Reports whether or not a plugin has been registered.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of a plugin.
+   *
+   * @return {boolean}
+   *          Whether or not the plugin has been registered.
+   */
+  const pluginExists = name => pluginStorage.hasOwnProperty(name);
+
+  /**
+   * Get a single registered plugin by name.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of a plugin.
+   *
+   * @return {typeof Plugin|Function|undefined}
+   *          The plugin (or undefined).
+   */
+  const getPlugin = name => pluginExists(name) ? pluginStorage[name] : undefined;
+
+  /**
+   * Marks a plugin as "active" on a player.
+   *
+   * Also, ensures that the player has an object for tracking active plugins.
+   *
+   * @private
+   * @param   {Player} player
+   *          A Video.js player instance.
+   *
+   * @param   {string} name
+   *          The name of a plugin.
+   */
+  const markPluginAsActive = (player, name) => {
+    player[PLUGIN_CACHE_KEY] = player[PLUGIN_CACHE_KEY] || {};
+    player[PLUGIN_CACHE_KEY][name] = true;
+  };
+
+  /**
+   * Triggers a pair of plugin setup events.
+   *
+   * @private
+   * @param  {Player} player
+   *         A Video.js player instance.
+   *
+   * @param  {PluginEventHash} hash
+   *         A plugin event hash.
+   *
+   * @param  {boolean} [before]
+   *         If true, prefixes the event name with "before". In other words,
+   *         use this to trigger "beforepluginsetup" instead of "pluginsetup".
+   */
+  const triggerSetupEvent = (player, hash, before) => {
+    const eventName = (before ? 'before' : '') + 'pluginsetup';
+    player.trigger(eventName, hash);
+    player.trigger(eventName + ':' + hash.name, hash);
+  };
+
+  /**
+   * Takes a basic plugin function and returns a wrapper function which marks
+   * on the player that the plugin has been activated.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of the plugin.
+   *
+   * @param   {Function} plugin
+   *          The basic plugin.
+   *
+   * @return {Function}
+   *          A wrapper function for the given plugin.
+   */
+  const createBasicPlugin = function (name, plugin) {
+    const basicPluginWrapper = function () {
+      // We trigger the "beforepluginsetup" and "pluginsetup" events on the player
+      // regardless, but we want the hash to be consistent with the hash provided
+      // for advanced plugins.
+      //
+      // The only potentially counter-intuitive thing here is the `instance` in
+      // the "pluginsetup" event is the value returned by the `plugin` function.
+      triggerSetupEvent(this, {
+        name,
+        plugin,
+        instance: null
+      }, true);
+      const instance = plugin.apply(this, arguments);
+      markPluginAsActive(this, name);
+      triggerSetupEvent(this, {
+        name,
+        plugin,
+        instance
+      });
+      return instance;
+    };
+    Object.keys(plugin).forEach(function (prop) {
+      basicPluginWrapper[prop] = plugin[prop];
+    });
+    return basicPluginWrapper;
+  };
+
+  /**
+   * Takes a plugin sub-class and returns a factory function for generating
+   * instances of it.
+   *
+   * This factory function will replace itself with an instance of the requested
+   * sub-class of Plugin.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of the plugin.
+   *
+   * @param   {Plugin} PluginSubClass
+   *          The advanced plugin.
+   *
+   * @return {Function}
+   */
+  const createPluginFactory = (name, PluginSubClass) => {
+    // Add a `name` property to the plugin prototype so that each plugin can
+    // refer to itself by name.
+    PluginSubClass.prototype.name = name;
+    return function (...args) {
+      triggerSetupEvent(this, {
+        name,
+        plugin: PluginSubClass,
+        instance: null
+      }, true);
+      const instance = new PluginSubClass(...[this, ...args]);
+
+      // The plugin is replaced by a function that returns the current instance.
+      this[name] = () => instance;
+      triggerSetupEvent(this, instance.getEventHash());
+      return instance;
+    };
+  };
+
+  /**
+   * Parent class for all advanced plugins.
+   *
+   * @mixes   module:evented~EventedMixin
+   * @mixes   module:stateful~StatefulMixin
+   * @fires   Player#beforepluginsetup
+   * @fires   Player#beforepluginsetup:$name
+   * @fires   Player#pluginsetup
+   * @fires   Player#pluginsetup:$name
+   * @listens Player#dispose
+   * @throws  {Error}
+   *          If attempting to instantiate the base {@link Plugin} class
+   *          directly instead of via a sub-class.
+   */
+  class Plugin {
+    /**
+     * Creates an instance of this class.
+     *
+     * Sub-classes should call `super` to ensure plugins are properly initialized.
+     *
+     * @param {Player} player
+     *        A Video.js player instance.
+     */
+    constructor(player) {
+      if (this.constructor === Plugin) {
+        throw new Error('Plugin must be sub-classed; not directly instantiated.');
+      }
+      this.player = player;
+      if (!this.log) {
+        this.log = this.player.log.createLogger(this.name);
+      }
+
+      // Make this object evented, but remove the added `trigger` method so we
+      // use the prototype version instead.
+      evented(this);
+      delete this.trigger;
+      stateful(this, this.constructor.defaultState);
+      markPluginAsActive(player, this.name);
+
+      // Auto-bind the dispose method so we can use it as a listener and unbind
+      // it later easily.
+      this.dispose = this.dispose.bind(this);
+
+      // If the player is disposed, dispose the plugin.
+      player.on('dispose', this.dispose);
+    }
+
+    /**
+     * Get the version of the plugin that was set on <pluginName>.VERSION
+     */
+    version() {
+      return this.constructor.VERSION;
+    }
+
+    /**
+     * Each event triggered by plugins includes a hash of additional data with
+     * conventional properties.
+     *
+     * This returns that object or mutates an existing hash.
+     *
+     * @param   {Object} [hash={}]
+     *          An object to be used as event an event hash.
+     *
+     * @return {PluginEventHash}
+     *          An event hash object with provided properties mixed-in.
+     */
+    getEventHash(hash = {}) {
+      hash.name = this.name;
+      hash.plugin = this.constructor;
+      hash.instance = this;
+      return hash;
+    }
+
+    /**
+     * Triggers an event on the plugin object and overrides
+     * {@link module:evented~EventedMixin.trigger|EventedMixin.trigger}.
+     *
+     * @param   {string|Object} event
+     *          An event type or an object with a type property.
+     *
+     * @param   {Object} [hash={}]
+     *          Additional data hash to merge with a
+     *          {@link PluginEventHash|PluginEventHash}.
+     *
+     * @return {boolean}
+     *          Whether or not default was prevented.
+     */
+    trigger(event, hash = {}) {
+      return trigger(this.eventBusEl_, event, this.getEventHash(hash));
+    }
+
+    /**
+     * Handles "statechanged" events on the plugin. No-op by default, override by
+     * subclassing.
+     *
+     * @abstract
+     * @param    {Event} e
+     *           An event object provided by a "statechanged" event.
+     *
+     * @param    {Object} e.changes
+     *           An object describing changes that occurred with the "statechanged"
+     *           event.
+     */
+    handleStateChanged(e) {}
+
+    /**
+     * Disposes a plugin.
+     *
+     * Subclasses can override this if they want, but for the sake of safety,
+     * it's probably best to subscribe the "dispose" event.
+     *
+     * @fires Plugin#dispose
+     */
+    dispose() {
+      const {
+        name,
+        player
+      } = this;
+
+      /**
+       * Signals that a advanced plugin is about to be disposed.
+       *
+       * @event Plugin#dispose
+       * @type  {Event}
+       */
+      this.trigger('dispose');
+      this.off();
+      player.off('dispose', this.dispose);
+
+      // Eliminate any possible sources of leaking memory by clearing up
+      // references between the player and the plugin instance and nulling out
+      // the plugin's state and replacing methods with a function that throws.
+      player[PLUGIN_CACHE_KEY][name] = false;
+      this.player = this.state = null;
+
+      // Finally, replace the plugin name on the player with a new factory
+      // function, so that the plugin is ready to be set up again.
+      player[name] = createPluginFactory(name, pluginStorage[name]);
+    }
+
+    /**
+     * Determines if a plugin is a basic plugin (i.e. not a sub-class of `Plugin`).
+     *
+     * @param   {string|Function} plugin
+     *          If a string, matches the name of a plugin. If a function, will be
+     *          tested directly.
+     *
+     * @return {boolean}
+     *          Whether or not a plugin is a basic plugin.
+     */
+    static isBasic(plugin) {
+      const p = typeof plugin === 'string' ? getPlugin(plugin) : plugin;
+      return typeof p === 'function' && !Plugin.prototype.isPrototypeOf(p.prototype);
+    }
+
+    /**
+     * Register a Video.js plugin.
+     *
+     * @param   {string} name
+     *          The name of the plugin to be registered. Must be a string and
+     *          must not match an existing plugin or a method on the `Player`
+     *          prototype.
+     *
+     * @param   {typeof Plugin|Function} plugin
+     *          A sub-class of `Plugin` or a function for basic plugins.
+     *
+     * @return {typeof Plugin|Function}
+     *          For advanced plugins, a factory function for that plugin. For
+     *          basic plugins, a wrapper function that initializes the plugin.
+     */
+    static registerPlugin(name, plugin) {
+      if (typeof name !== 'string') {
+        throw new Error(`Illegal plugin name, "${name}", must be a string, was ${typeof name}.`);
+      }
+      if (pluginExists(name)) {
+        log$1.warn(`A plugin named "${name}" already exists. You may want to avoid re-registering plugins!`);
+      } else if (Player.prototype.hasOwnProperty(name)) {
+        throw new Error(`Illegal plugin name, "${name}", cannot share a name with an existing player method!`);
+      }
+      if (typeof plugin !== 'function') {
+        throw new Error(`Illegal plugin for "${name}", must be a function, was ${typeof plugin}.`);
+      }
+      pluginStorage[name] = plugin;
+
+      // Add a player prototype method for all sub-classed plugins (but not for
+      // the base Plugin class).
+      if (name !== BASE_PLUGIN_NAME) {
+        if (Plugin.isBasic(plugin)) {
+          Player.prototype[name] = createBasicPlugin(name, plugin);
+        } else {
+          Player.prototype[name] = createPluginFactory(name, plugin);
+        }
+      }
+      return plugin;
+    }
+
+    /**
+     * De-register a Video.js plugin.
+     *
+     * @param  {string} name
+     *         The name of the plugin to be de-registered. Must be a string that
+     *         matches an existing plugin.
+     *
+     * @throws {Error}
+     *         If an attempt is made to de-register the base plugin.
+     */
+    static deregisterPlugin(name) {
+      if (name === BASE_PLUGIN_NAME) {
+        throw new Error('Cannot de-register base plugin.');
+      }
+      if (pluginExists(name)) {
+        delete pluginStorage[name];
+        delete Player.prototype[name];
+      }
+    }
+
+    /**
+     * Gets an object containing multiple Video.js plugins.
+     *
+     * @param   {Array} [names]
+     *          If provided, should be an array of plugin names. Defaults to _all_
+     *          plugin names.
+     *
+     * @return {Object|undefined}
+     *          An object containing plugin(s) associated with their name(s) or
+     *          `undefined` if no matching plugins exist).
+     */
+    static getPlugins(names = Object.keys(pluginStorage)) {
+      let result;
+      names.forEach(name => {
+        const plugin = getPlugin(name);
+        if (plugin) {
+          result = result || {};
+          result[name] = plugin;
+        }
+      });
+      return result;
+    }
+
+    /**
+     * Gets a plugin's version, if available
+     *
+     * @param   {string} name
+     *          The name of a plugin.
+     *
+     * @return {string}
+     *          The plugin's version or an empty string.
+     */
+    static getPluginVersion(name) {
+      const plugin = getPlugin(name);
+      return plugin && plugin.VERSION || '';
+    }
+  }
+
+  /**
+   * Gets a plugin by name if it exists.
+   *
+   * @static
+   * @method   getPlugin
+   * @memberOf Plugin
+   * @param    {string} name
+   *           The name of a plugin.
+   *
+   * @returns  {typeof Plugin|Function|undefined}
+   *           The plugin (or `undefined`).
+   */
+  Plugin.getPlugin = getPlugin;
+
+  /**
+   * The name of the base plugin class as it is registered.
+   *
+   * @type {string}
+   */
+  Plugin.BASE_PLUGIN_NAME = BASE_PLUGIN_NAME;
+  Plugin.registerPlugin(BASE_PLUGIN_NAME, Plugin);
+
+  /**
+   * Documented in player.js
+   *
+   * @ignore
+   */
+  Player.prototype.usingPlugin = function (name) {
+    return !!this[PLUGIN_CACHE_KEY] && this[PLUGIN_CACHE_KEY][name] === true;
+  };
+
+  /**
+   * Documented in player.js
+   *
+   * @ignore
+   */
+  Player.prototype.hasPlugin = function (name) {
+    return !!pluginExists(name);
+  };
+
+  /**
+   * Signals that a plugin is about to be set up on a player.
+   *
+   * @event    Player#beforepluginsetup
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin is about to be set up on a player - by name. The name
+   * is the name of the plugin.
+   *
+   * @event    Player#beforepluginsetup:$name
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin has just been set up on a player.
+   *
+   * @event    Player#pluginsetup
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin has just been set up on a player - by name. The name
+   * is the name of the plugin.
+   *
+   * @event    Player#pluginsetup:$name
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * @typedef  {Object} PluginEventHash
+   *
+   * @property {string} instance
+   *           For basic plugins, the return value of the plugin function. For
+   *           advanced plugins, the plugin instance on which the event is fired.
+   *
+   * @property {string} name
+   *           The name of the plugin.
+   *
+   * @property {string} plugin
+   *           For basic plugins, the plugin function. For advanced plugins, the
+   *           plugin class/constructor.
+   */
+
+  /**
+   * @file deprecate.js
+   * @module deprecate
+   */
+
+  /**
+   * Decorate a function with a deprecation message the first time it is called.
+   *
+   * @param  {string}   message
+   *         A deprecation message to log the first time the returned function
+   *         is called.
+   *
+   * @param  {Function} fn
+   *         The function to be deprecated.
+   *
+   * @return {Function}
+   *         A wrapper function that will log a deprecation warning the first
+   *         time it is called. The return value will be the return value of
+   *         the wrapped function.
+   */
+  function deprecate(message, fn) {
+    let warned = false;
+    return function (...args) {
+      if (!warned) {
+        log$1.warn(message);
+      }
+      warned = true;
+      return fn.apply(this, args);
+    };
+  }
+
+  /**
+   * Internal function used to mark a function as deprecated in the next major
+   * version with consistent messaging.
+   *
+   * @param  {number}   major   The major version where it will be removed
+   * @param  {string}   oldName The old function name
+   * @param  {string}   newName The new function name
+   * @param  {Function} fn      The function to deprecate
+   * @return {Function}         The decorated function
+   */
+  function deprecateForMajor(major, oldName, newName, fn) {
+    return deprecate(`${oldName} is deprecated and will be removed in ${major}.0; please use ${newName} instead.`, fn);
+  }
+
+  var VjsErrors = {
+    UnsupportedSidxContainer: 'unsupported-sidx-container-error',
+    DashManifestSidxParsingError: 'dash-manifest-sidx-parsing-error',
+    HlsPlaylistRequestError: 'hls-playlist-request-error',
+    SegmentUnsupportedMediaFormat: 'segment-unsupported-media-format-error',
+    UnsupportedMediaInitialization: 'unsupported-media-initialization-error',
+    SegmentSwitchError: 'segment-switch-error',
+    SegmentExceedsSourceBufferQuota: 'segment-exceeds-source-buffer-quota-error',
+    SegmentAppendError: 'segment-append-error',
+    VttLoadError: 'vtt-load-error',
+    VttCueParsingError: 'vtt-cue-parsing-error',
+    // Errors used in contrib-ads:
+    AdsBeforePrerollError: 'ads-before-preroll-error',
+    AdsPrerollError: 'ads-preroll-error',
+    AdsMidrollError: 'ads-midroll-error',
+    AdsPostrollError: 'ads-postroll-error',
+    AdsMacroReplacementFailed: 'ads-macro-replacement-failed',
+    AdsResumeContentFailed: 'ads-resume-content-failed',
+    // Errors used in contrib-eme:
+    EMEFailedToRequestMediaKeySystemAccess: 'eme-failed-request-media-key-system-access',
+    EMEFailedToCreateMediaKeys: 'eme-failed-create-media-keys',
+    EMEFailedToAttachMediaKeysToVideoElement: 'eme-failed-attach-media-keys-to-video',
+    EMEFailedToCreateMediaKeySession: 'eme-failed-create-media-key-session',
+    EMEFailedToSetServerCertificate: 'eme-failed-set-server-certificate',
+    EMEFailedToGenerateLicenseRequest: 'eme-failed-generate-license-request',
+    EMEFailedToUpdateSessionWithReceivedLicenseKeys: 'eme-failed-update-session',
+    EMEFailedToCloseSession: 'eme-failed-close-session',
+    EMEFailedToRemoveKeysFromSession: 'eme-failed-remove-keys',
+    EMEFailedToLoadSessionBySessionId: 'eme-failed-load-session'
+  };
+
+  /**
+   * @file video.js
+   * @module videojs
+   */
+
+  /**
+   * Normalize an `id` value by trimming off a leading `#`
+   *
+   * @private
+   * @param   {string} id
+   *          A string, maybe with a leading `#`.
+   *
+   * @return {string}
+   *          The string, without any leading `#`.
+   */
+  const normalizeId = id => id.indexOf('#') === 0 ? id.slice(1) : id;
+
+  /**
+   * A callback that is called when a component is ready. Does not have any
+   * parameters and any callback value will be ignored. See: {@link Component~ReadyCallback}
+   *
+   * @callback ReadyCallback
+   */
+
+  /**
+   * The `videojs()` function doubles as the main function for users to create a
+   * {@link Player} instance as well as the main library namespace.
+   *
+   * It can also be used as a getter for a pre-existing {@link Player} instance.
+   * However, we _strongly_ recommend using `videojs.getPlayer()` for this
+   * purpose because it avoids any potential for unintended initialization.
+   *
+   * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+   * of our JSDoc template, we cannot properly document this as both a function
+   * and a namespace, so its function signature is documented here.
+   *
+   * #### Arguments
+   * ##### id
+   * string|Element, **required**
+   *
+   * Video element or video element ID.
+   *
+   * ##### options
+   * Object, optional
+   *
+   * Options object for providing settings.
+   * See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+   *
+   * ##### ready
+   * {@link Component~ReadyCallback}, optional
+   *
+   * A function to be called when the {@link Player} and {@link Tech} are ready.
+   *
+   * #### Return Value
+   *
+   * The `videojs()` function returns a {@link Player} instance.
+   *
+   * @namespace
+   *
+   * @borrows AudioTrack as AudioTrack
+   * @borrows Component.getComponent as getComponent
+   * @borrows module:events.on as on
+   * @borrows module:events.one as one
+   * @borrows module:events.off as off
+   * @borrows module:events.trigger as trigger
+   * @borrows EventTarget as EventTarget
+   * @borrows module:middleware.use as use
+   * @borrows Player.players as players
+   * @borrows Plugin.registerPlugin as registerPlugin
+   * @borrows Plugin.deregisterPlugin as deregisterPlugin
+   * @borrows Plugin.getPlugins as getPlugins
+   * @borrows Plugin.getPlugin as getPlugin
+   * @borrows Plugin.getPluginVersion as getPluginVersion
+   * @borrows Tech.getTech as getTech
+   * @borrows Tech.registerTech as registerTech
+   * @borrows TextTrack as TextTrack
+   * @borrows VideoTrack as VideoTrack
+   *
+   * @param  {string|Element} id
+   *         Video element or video element ID.
+   *
+   * @param  {Object} [options]
+   *         Options object for providing settings.
+   *         See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+   *
+   * @param  {ReadyCallback} [ready]
+   *         A function to be called when the {@link Player} and {@link Tech} are
+   *         ready.
+   *
+   * @return {Player}
+   *         The `videojs()` function returns a {@link Player|Player} instance.
+   */
+  function videojs(id, options, ready) {
+    let player = videojs.getPlayer(id);
+    if (player) {
+      if (options) {
+        log$1.warn(`Player "${id}" is already initialised. Options will not be applied.`);
+      }
+      if (ready) {
+        player.ready(ready);
+      }
+      return player;
+    }
+    const el = typeof id === 'string' ? $('#' + normalizeId(id)) : id;
+    if (!isEl(el)) {
+      throw new TypeError('The element or ID supplied is not valid. (videojs)');
+    }
+
+    // document.body.contains(el) will only check if el is contained within that one document.
+    // This causes problems for elements in iframes.
+    // Instead, use the element's ownerDocument instead of the global document.
+    // This will make sure that the element is indeed in the dom of that document.
+    // Additionally, check that the document in question has a default view.
+    // If the document is no longer attached to the dom, the defaultView of the document will be null.
+    // If element is inside Shadow DOM (e.g. is part of a Custom element), ownerDocument.body
+    // always returns false. Instead, use the Shadow DOM root.
+    const inShadowDom = 'getRootNode' in el ? el.getRootNode() instanceof window.ShadowRoot : false;
+    const rootNode = inShadowDom ? el.getRootNode() : el.ownerDocument.body;
+    if (!el.ownerDocument.defaultView || !rootNode.contains(el)) {
+      log$1.warn('The element supplied is not included in the DOM');
+    }
+    options = options || {};
+
+    // Store a copy of the el before modification, if it is to be restored in destroy()
+    // If div ingest, store the parent div
+    if (options.restoreEl === true) {
+      options.restoreEl = (el.parentNode && el.parentNode.hasAttribute('data-vjs-player') ? el.parentNode : el).cloneNode(true);
+    }
+    hooks('beforesetup').forEach(hookFunction => {
+      const opts = hookFunction(el, merge$2(options));
+      if (!isObject$1(opts) || Array.isArray(opts)) {
+        log$1.error('please return an object in beforesetup hooks');
+        return;
+      }
+      options = merge$2(options, opts);
+    });
+
+    // We get the current "Player" component here in case an integration has
+    // replaced it with a custom player.
+    const PlayerComponent = Component$1.getComponent('Player');
+    player = new PlayerComponent(el, options, ready);
+    hooks('setup').forEach(hookFunction => hookFunction(player));
+    return player;
+  }
+  videojs.hooks_ = hooks_;
+  videojs.hooks = hooks;
+  videojs.hook = hook;
+  videojs.hookOnce = hookOnce;
+  videojs.removeHook = removeHook;
+
+  // Add default styles
+  if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true && isReal()) {
+    let style = $('.vjs-styles-defaults');
+    if (!style) {
+      style = createStyleElement('vjs-styles-defaults');
+      const head = $('head');
+      if (head) {
+        head.insertBefore(style, head.firstChild);
+      }
+      setTextContent(style, `
+      .video-js {
+        width: 300px;
+        height: 150px;
+      }
+
+      .vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: 56.25%
+      }
+    `);
+    }
+  }
+
+  // Run Auto-load players
+  // You have to wait at least once in case this script is loaded after your
+  // video in the DOM (weird behavior only with minified version)
+  autoSetupTimeout(1, videojs);
+
+  /**
+   * Current Video.js version. Follows [semantic versioning](https://semver.org/).
+   *
+   * @type {string}
+   */
+  videojs.VERSION = version$5;
+
+  /**
+   * The global options object. These are the settings that take effect
+   * if no overrides are specified when the player is created.
+   *
+   * @type {Object}
+   */
+  videojs.options = Player.prototype.options_;
+
+  /**
+   * Get an object with the currently created players, keyed by player ID
+   *
+   * @return {Object}
+   *         The created players
+   */
+  videojs.getPlayers = () => Player.players;
+
+  /**
+   * Get a single player based on an ID or DOM element.
+   *
+   * This is useful if you want to check if an element or ID has an associated
+   * Video.js player, but not create one if it doesn't.
+   *
+   * @param   {string|Element} id
+   *          An HTML element - `<video>`, `<audio>`, or `<video-js>` -
+   *          or a string matching the `id` of such an element.
+   *
+   * @return {Player|undefined}
+   *          A player instance or `undefined` if there is no player instance
+   *          matching the argument.
+   */
+  videojs.getPlayer = id => {
+    const players = Player.players;
+    let tag;
+    if (typeof id === 'string') {
+      const nId = normalizeId(id);
+      const player = players[nId];
+      if (player) {
+        return player;
+      }
+      tag = $('#' + nId);
+    } else {
+      tag = id;
+    }
+    if (isEl(tag)) {
+      const {
+        player,
+        playerId
+      } = tag;
+
+      // Element may have a `player` property referring to an already created
+      // player instance. If so, return that.
+      if (player || players[playerId]) {
+        return player || players[playerId];
+      }
+    }
+  };
+
+  /**
+   * Returns an array of all current players.
+   *
+   * @return {Array}
+   *         An array of all players. The array will be in the order that
+   *         `Object.keys` provides, which could potentially vary between
+   *         JavaScript engines.
+   *
+   */
+  videojs.getAllPlayers = () =>
+  // Disposed players leave a key with a `null` value, so we need to make sure
+  // we filter those out.
+  Object.keys(Player.players).map(k => Player.players[k]).filter(Boolean);
+  videojs.players = Player.players;
+  videojs.getComponent = Component$1.getComponent;
+
+  /**
+   * Register a component so it can referred to by name. Used when adding to other
+   * components, either through addChild `component.addChild('myComponent')` or through
+   * default children options  `{ children: ['myComponent'] }`.
+   *
+   * > NOTE: You could also just initialize the component before adding.
+   * `component.addChild(new MyComponent());`
+   *
+   * @param {string} name
+   *        The class name of the component
+   *
+   * @param {typeof Component} comp
+   *        The component class
+   *
+   * @return {typeof Component}
+   *         The newly registered component
+   */
+  videojs.registerComponent = (name, comp) => {
+    if (Tech.isTech(comp)) {
+      log$1.warn(`The ${name} tech was registered as a component. It should instead be registered using videojs.registerTech(name, tech)`);
+    }
+    return Component$1.registerComponent.call(Component$1, name, comp);
+  };
+  videojs.getTech = Tech.getTech;
+  videojs.registerTech = Tech.registerTech;
+  videojs.use = use;
+
+  /**
+   * An object that can be returned by a middleware to signify
+   * that the middleware is being terminated.
+   *
+   * @type {object}
+   * @property {object} middleware.TERMINATOR
+   */
+  Object.defineProperty(videojs, 'middleware', {
+    value: {},
+    writeable: false,
+    enumerable: true
+  });
+  Object.defineProperty(videojs.middleware, 'TERMINATOR', {
+    value: TERMINATOR,
+    writeable: false,
+    enumerable: true
+  });
+
+  /**
+   * A reference to the {@link module:browser|browser utility module} as an object.
+   *
+   * @type {Object}
+   * @see  {@link module:browser|browser}
+   */
+  videojs.browser = browser;
+
+  /**
+   * A reference to the {@link module:obj|obj utility module} as an object.
+   *
+   * @type {Object}
+   * @see  {@link module:obj|obj}
+   */
+  videojs.obj = Obj;
+
+  /**
+   * Deprecated reference to the {@link module:obj.merge|merge function}
+   *
+   * @type {Function}
+   * @see {@link module:obj.merge|merge}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.obj.merge instead.
+   */
+  videojs.mergeOptions = deprecateForMajor(9, 'videojs.mergeOptions', 'videojs.obj.merge', merge$2);
+
+  /**
+   * Deprecated reference to the {@link module:obj.defineLazyProperty|defineLazyProperty function}
+   *
+   * @type {Function}
+   * @see {@link module:obj.defineLazyProperty|defineLazyProperty}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.obj.defineLazyProperty instead.
+   */
+  videojs.defineLazyProperty = deprecateForMajor(9, 'videojs.defineLazyProperty', 'videojs.obj.defineLazyProperty', defineLazyProperty);
+
+  /**
+   * Deprecated reference to the {@link module:fn.bind_|fn.bind_ function}
+   *
+   * @type {Function}
+   * @see {@link module:fn.bind_|fn.bind_}
+   * @deprecated Deprecated and will be removed in 9.0. Please use native Function.prototype.bind instead.
+   */
+  videojs.bind = deprecateForMajor(9, 'videojs.bind', 'native Function.prototype.bind', bind_);
+  videojs.registerPlugin = Plugin.registerPlugin;
+  videojs.deregisterPlugin = Plugin.deregisterPlugin;
+
+  /**
+   * Deprecated method to register a plugin with Video.js
+   *
+   * @deprecated Deprecated and will be removed in 9.0. Use videojs.registerPlugin() instead.
+   *
+   * @param {string} name
+   *        The plugin name
+  *
+   * @param {typeof Plugin|Function} plugin
+   *         The plugin sub-class or function
+   *
+   * @return {typeof Plugin|Function}
+   */
+  videojs.plugin = (name, plugin) => {
+    log$1.warn('videojs.plugin() is deprecated; use videojs.registerPlugin() instead');
+    return Plugin.registerPlugin(name, plugin);
+  };
+  videojs.getPlugins = Plugin.getPlugins;
+  videojs.getPlugin = Plugin.getPlugin;
+  videojs.getPluginVersion = Plugin.getPluginVersion;
+
+  /**
+   * Adding languages so that they're available to all players.
+   * Example: `videojs.addLanguage('es', { 'Hello': 'Hola' });`
+   *
+   * @param {string} code
+   *        The language code or dictionary property
+   *
+   * @param {Object} data
+   *        The data values to be translated
+   *
+   * @return {Object}
+   *         The resulting language dictionary object
+   */
+  videojs.addLanguage = function (code, data) {
+    code = ('' + code).toLowerCase();
+    videojs.options.languages = merge$2(videojs.options.languages, {
+      [code]: data
+    });
+    return videojs.options.languages[code];
+  };
+
+  /**
+   * A reference to the {@link module:log|log utility module} as an object.
+   *
+   * @type {Function}
+   * @see  {@link module:log|log}
+   */
+  videojs.log = log$1;
+  videojs.createLogger = createLogger;
+
+  /**
+   * A reference to the {@link module:time|time utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:time|time}
+   */
+  videojs.time = Time;
+
+  /**
+   * Deprecated reference to the {@link module:time.createTimeRanges|createTimeRanges function}
+   *
+   * @type {Function}
+   * @see {@link module:time.createTimeRanges|createTimeRanges}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.createTimeRanges instead.
+   */
+  videojs.createTimeRange = deprecateForMajor(9, 'videojs.createTimeRange', 'videojs.time.createTimeRanges', createTimeRanges$1);
+
+  /**
+   * Deprecated reference to the {@link module:time.createTimeRanges|createTimeRanges function}
+   *
+   * @type {Function}
+   * @see {@link module:time.createTimeRanges|createTimeRanges}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.createTimeRanges instead.
+   */
+  videojs.createTimeRanges = deprecateForMajor(9, 'videojs.createTimeRanges', 'videojs.time.createTimeRanges', createTimeRanges$1);
+
+  /**
+   * Deprecated reference to the {@link module:time.formatTime|formatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.formatTime|formatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.format instead.
+   */
+  videojs.formatTime = deprecateForMajor(9, 'videojs.formatTime', 'videojs.time.formatTime', formatTime);
+
+  /**
+   * Deprecated reference to the {@link module:time.setFormatTime|setFormatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.setFormatTime|setFormatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.setFormat instead.
+   */
+  videojs.setFormatTime = deprecateForMajor(9, 'videojs.setFormatTime', 'videojs.time.setFormatTime', setFormatTime);
+
+  /**
+   * Deprecated reference to the {@link module:time.resetFormatTime|resetFormatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.resetFormatTime|resetFormatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.resetFormat instead.
+   */
+  videojs.resetFormatTime = deprecateForMajor(9, 'videojs.resetFormatTime', 'videojs.time.resetFormatTime', resetFormatTime);
+
+  /**
+   * Deprecated reference to the {@link module:url.parseUrl|Url.parseUrl function}
+   *
+   * @type {Function}
+   * @see {@link module:url.parseUrl|parseUrl}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.url.parseUrl instead.
+   */
+  videojs.parseUrl = deprecateForMajor(9, 'videojs.parseUrl', 'videojs.url.parseUrl', parseUrl);
+
+  /**
+   * Deprecated reference to the {@link module:url.isCrossOrigin|Url.isCrossOrigin function}
+   *
+   * @type {Function}
+   * @see {@link module:url.isCrossOrigin|isCrossOrigin}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.url.isCrossOrigin instead.
+   */
+  videojs.isCrossOrigin = deprecateForMajor(9, 'videojs.isCrossOrigin', 'videojs.url.isCrossOrigin', isCrossOrigin);
+  videojs.EventTarget = EventTarget$2;
+  videojs.any = any;
+  videojs.on = on;
+  videojs.one = one;
+  videojs.off = off;
+  videojs.trigger = trigger;
+
+  /**
+   * A cross-browser XMLHttpRequest wrapper.
+   *
+   * @function
+   * @param    {Object} options
+   *           Settings for the request.
+   *
+   * @return   {XMLHttpRequest|XDomainRequest}
+   *           The request object.
+   *
+   * @see      https://github.com/Raynos/xhr
+   */
+  videojs.xhr = lib;
+  videojs.TextTrack = TextTrack;
+  videojs.AudioTrack = AudioTrack;
+  videojs.VideoTrack = VideoTrack;
+  ['isEl', 'isTextNode', 'createEl', 'hasClass', 'addClass', 'removeClass', 'toggleClass', 'setAttributes', 'getAttributes', 'emptyEl', 'appendContent', 'insertContent'].forEach(k => {
+    videojs[k] = function () {
+      log$1.warn(`videojs.${k}() is deprecated; use videojs.dom.${k}() instead`);
+      return Dom[k].apply(null, arguments);
+    };
+  });
+  videojs.computedStyle = deprecateForMajor(9, 'videojs.computedStyle', 'videojs.dom.computedStyle', computedStyle);
+
+  /**
+   * A reference to the {@link module:dom|DOM utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:dom|dom}
+   */
+  videojs.dom = Dom;
+
+  /**
+   * A reference to the {@link module:fn|fn utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:fn|fn}
+   */
+  videojs.fn = Fn;
+
+  /**
+   * A reference to the {@link module:num|num utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:num|num}
+   */
+  videojs.num = Num;
+
+  /**
+   * A reference to the {@link module:str|str utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:str|str}
+   */
+  videojs.str = Str;
+
+  /**
+   * A reference to the {@link module:url|URL utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:url|url}
+   */
+  videojs.url = Url;
+
+  // The list of possible error types to occur in video.js
+  videojs.Error = VjsErrors;
+
+  createCommonjsModule(function (module, exports) {
+    /*! @name videojs-contrib-quality-levels @version 4.1.0 @license Apache-2.0 */
+    (function (global, factory) {
+      module.exports = factory(videojs) ;
+    })(commonjsGlobal, function (videojs) {
+
+      function _interopDefaultLegacy(e) {
+        return e && typeof e === 'object' && 'default' in e ? e : {
+          'default': e
+        };
+      }
+      var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
+
+      /**
+       * A single QualityLevel.
+       *
+       * interface QualityLevel {
+       *   readonly attribute DOMString id;
+       *            attribute DOMString label;
+       *   readonly attribute long width;
+       *   readonly attribute long height;
+       *   readonly attribute long bitrate;
+       *            attribute boolean enabled;
+       * };
+       *
+       * @class QualityLevel
+       */
+      class QualityLevel {
+        /**
+         * Creates a QualityLevel
+         *
+         * @param {Representation|Object} representation The representation of the quality level
+         * @param {string}   representation.id        Unique id of the QualityLevel
+         * @param {number=}  representation.width     Resolution width of the QualityLevel
+         * @param {number=}  representation.height    Resolution height of the QualityLevel
+         * @param {number}   representation.bandwidth Bitrate of the QualityLevel
+         * @param {number=}  representation.frameRate Frame-rate of the QualityLevel
+         * @param {Function} representation.enabled   Callback to enable/disable QualityLevel
+         */
+        constructor(representation) {
+          let level = this; // eslint-disable-line
+
+          level.id = representation.id;
+          level.label = level.id;
+          level.width = representation.width;
+          level.height = representation.height;
+          level.bitrate = representation.bandwidth;
+          level.frameRate = representation.frameRate;
+          level.enabled_ = representation.enabled;
+          Object.defineProperty(level, 'enabled', {
+            /**
+             * Get whether the QualityLevel is enabled.
+             *
+             * @return {boolean} True if the QualityLevel is enabled.
+             */
+            get() {
+              return level.enabled_();
+            },
+            /**
+             * Enable or disable the QualityLevel.
+             *
+             * @param {boolean} enable true to enable QualityLevel, false to disable.
+             */
+            set(enable) {
+              level.enabled_(enable);
+            }
+          });
+          return level;
+        }
+      }
+
+      /**
+       * A list of QualityLevels.
+       *
+       * interface QualityLevelList : EventTarget {
+       *   getter QualityLevel (unsigned long index);
+       *   readonly attribute unsigned long length;
+       *   readonly attribute long selectedIndex;
+       *
+       *   void addQualityLevel(QualityLevel qualityLevel)
+       *   void removeQualityLevel(QualityLevel remove)
+       *   QualityLevel? getQualityLevelById(DOMString id);
+       *
+       *   attribute EventHandler onchange;
+       *   attribute EventHandler onaddqualitylevel;
+       *   attribute EventHandler onremovequalitylevel;
+       * };
+       *
+       * @extends videojs.EventTarget
+       * @class QualityLevelList
+       */
+      class QualityLevelList extends videojs__default["default"].EventTarget {
+        /**
+         * Creates a QualityLevelList.
+         */
+        constructor() {
+          super();
+          let list = this; // eslint-disable-line
+
+          list.levels_ = [];
+          list.selectedIndex_ = -1;
+
+          /**
+           * Get the index of the currently selected QualityLevel.
+           *
+           * @returns {number} The index of the selected QualityLevel. -1 if none selected.
+           * @readonly
+           */
+          Object.defineProperty(list, 'selectedIndex', {
+            get() {
+              return list.selectedIndex_;
+            }
+          });
+
+          /**
+           * Get the length of the list of QualityLevels.
+           *
+           * @returns {number} The length of the list.
+           * @readonly
+           */
+          Object.defineProperty(list, 'length', {
+            get() {
+              return list.levels_.length;
+            }
+          });
+          list[Symbol.iterator] = () => list.levels_.values();
+          return list;
+        }
+
+        /**
+         * Adds a quality level to the list.
+         *
+         * @param {Representation|Object} representation The representation of the quality level
+         * @param {string}   representation.id        Unique id of the QualityLevel
+         * @param {number=}  representation.width     Resolution width of the QualityLevel
+         * @param {number=}  representation.height    Resolution height of the QualityLevel
+         * @param {number}   representation.bandwidth Bitrate of the QualityLevel
+         * @param {number=}  representation.frameRate Frame-rate of the QualityLevel
+         * @param {Function} representation.enabled   Callback to enable/disable QualityLevel
+         * @return {QualityLevel} the QualityLevel added to the list
+         * @method addQualityLevel
+         */
+        addQualityLevel(representation) {
+          let qualityLevel = this.getQualityLevelById(representation.id);
+
+          // Do not add duplicate quality levels
+          if (qualityLevel) {
+            return qualityLevel;
+          }
+          const index = this.levels_.length;
+          qualityLevel = new QualityLevel(representation);
+          if (!('' + index in this)) {
+            Object.defineProperty(this, index, {
+              get() {
+                return this.levels_[index];
+              }
+            });
+          }
+          this.levels_.push(qualityLevel);
+          this.trigger({
+            qualityLevel,
+            type: 'addqualitylevel'
+          });
+          return qualityLevel;
+        }
+
+        /**
+         * Removes a quality level from the list.
+         *
+         * @param {QualityLevel} qualityLevel The QualityLevel to remove from the list.
+         * @return {QualityLevel|null} the QualityLevel removed or null if nothing removed
+         * @method removeQualityLevel
+         */
+        removeQualityLevel(qualityLevel) {
+          let removed = null;
+          for (let i = 0, l = this.length; i < l; i++) {
+            if (this[i] === qualityLevel) {
+              removed = this.levels_.splice(i, 1)[0];
+              if (this.selectedIndex_ === i) {
+                this.selectedIndex_ = -1;
+              } else if (this.selectedIndex_ > i) {
+                this.selectedIndex_--;
+              }
+              break;
+            }
+          }
+          if (removed) {
+            this.trigger({
+              qualityLevel,
+              type: 'removequalitylevel'
+            });
+          }
+          return removed;
+        }
+
+        /**
+         * Searches for a QualityLevel with the given id.
+         *
+         * @param {string} id The id of the QualityLevel to find.
+         * @return {QualityLevel|null} The QualityLevel with id, or null if not found.
+         * @method getQualityLevelById
+         */
+        getQualityLevelById(id) {
+          for (let i = 0, l = this.length; i < l; i++) {
+            const level = this[i];
+            if (level.id === id) {
+              return level;
+            }
+          }
+          return null;
+        }
+
+        /**
+         * Resets the list of QualityLevels to empty
+         *
+         * @method dispose
+         */
+        dispose() {
+          this.selectedIndex_ = -1;
+          this.levels_.length = 0;
+        }
+      }
+
+      /**
+       * change - The selected QualityLevel has changed.
+       * addqualitylevel - A QualityLevel has been added to the QualityLevelList.
+       * removequalitylevel - A QualityLevel has been removed from the QualityLevelList.
+       */
+      QualityLevelList.prototype.allowedEvents_ = {
+        change: 'change',
+        addqualitylevel: 'addqualitylevel',
+        removequalitylevel: 'removequalitylevel'
+      };
+
+      // emulate attribute EventHandler support to allow for feature detection
+      for (const event in QualityLevelList.prototype.allowedEvents_) {
+        QualityLevelList.prototype['on' + event] = null;
+      }
+      var version = "4.1.0";
+
+      /**
+       * Initialization function for the qualityLevels plugin. Sets up the QualityLevelList and
+       * event handlers.
+       *
+       * @param {Player} player Player object.
+       * @param {Object} options Plugin options object.
+       * @return {QualityLevelList} a list of QualityLevels
+       */
+      const initPlugin = function (player, options) {
+        const originalPluginFn = player.qualityLevels;
+        const qualityLevelList = new QualityLevelList();
+        const disposeHandler = function () {
+          qualityLevelList.dispose();
+          player.qualityLevels = originalPluginFn;
+          player.off('dispose', disposeHandler);
+        };
+        player.on('dispose', disposeHandler);
+        player.qualityLevels = () => qualityLevelList;
+        player.qualityLevels.VERSION = version;
+        return qualityLevelList;
+      };
+
+      /**
+       * A video.js plugin.
+       *
+       * In the plugin function, the value of `this` is a video.js `Player`
+       * instance. You cannot rely on the player being in a "ready" state here,
+       * depending on how the plugin is invoked. This may or may not be important
+       * to you; if not, remove the wait for "ready"!
+       *
+       * @param {Object} options Plugin options object
+       * @return {QualityLevelList} a list of QualityLevels
+       */
+      const qualityLevels = function (options) {
+        return initPlugin(this, videojs__default["default"].obj.merge({}, options));
+      };
+
+      // Register the plugin with video.js.
+      videojs__default["default"].registerPlugin('qualityLevels', qualityLevels);
+
+      // Include the version number.
+      qualityLevels.VERSION = version;
+      return qualityLevels;
+    });
+  });
+
+  var urlToolkit = createCommonjsModule(function (module, exports) {
+    // see https://tools.ietf.org/html/rfc1808
+
+    (function (root) {
+      var URL_REGEX = /^(?=((?:[a-zA-Z0-9+\-.]+:)?))\1(?=((?:\/\/[^\/?#]*)?))\2(?=((?:(?:[^?#\/]*\/)*[^;?#\/]*)?))\3((?:;[^?#]*)?)(\?[^#]*)?(#[^]*)?$/;
+      var FIRST_SEGMENT_REGEX = /^(?=([^\/?#]*))\1([^]*)$/;
+      var SLASH_DOT_REGEX = /(?:\/|^)\.(?=\/)/g;
+      var SLASH_DOT_DOT_REGEX = /(?:\/|^)\.\.\/(?!\.\.\/)[^\/]*(?=\/)/g;
+      var URLToolkit = {
+        // If opts.alwaysNormalize is true then the path will always be normalized even when it starts with / or //
+        // E.g
+        // With opts.alwaysNormalize = false (default, spec compliant)
+        // http://a.com/b/cd + /e/f/../g => http://a.com/e/f/../g
+        // With opts.alwaysNormalize = true (not spec compliant)
+        // http://a.com/b/cd + /e/f/../g => http://a.com/e/g
+        buildAbsoluteURL: function (baseURL, relativeURL, opts) {
+          opts = opts || {};
+          // remove any remaining space and CRLF
+          baseURL = baseURL.trim();
+          relativeURL = relativeURL.trim();
+          if (!relativeURL) {
+            // 2a) If the embedded URL is entirely empty, it inherits the
+            // entire base URL (i.e., is set equal to the base URL)
+            // and we are done.
+            if (!opts.alwaysNormalize) {
+              return baseURL;
+            }
+            var basePartsForNormalise = URLToolkit.parseURL(baseURL);
+            if (!basePartsForNormalise) {
+              throw new Error('Error trying to parse base URL.');
+            }
+            basePartsForNormalise.path = URLToolkit.normalizePath(basePartsForNormalise.path);
+            return URLToolkit.buildURLFromParts(basePartsForNormalise);
+          }
+          var relativeParts = URLToolkit.parseURL(relativeURL);
+          if (!relativeParts) {
+            throw new Error('Error trying to parse relative URL.');
+          }
+          if (relativeParts.scheme) {
+            // 2b) If the embedded URL starts with a scheme name, it is
+            // interpreted as an absolute URL and we are done.
+            if (!opts.alwaysNormalize) {
+              return relativeURL;
+            }
+            relativeParts.path = URLToolkit.normalizePath(relativeParts.path);
+            return URLToolkit.buildURLFromParts(relativeParts);
+          }
+          var baseParts = URLToolkit.parseURL(baseURL);
+          if (!baseParts) {
+            throw new Error('Error trying to parse base URL.');
+          }
+          if (!baseParts.netLoc && baseParts.path && baseParts.path[0] !== '/') {
+            // If netLoc missing and path doesn't start with '/', assume everthing before the first '/' is the netLoc
+            // This causes 'example.com/a' to be handled as '//example.com/a' instead of '/example.com/a'
+            var pathParts = FIRST_SEGMENT_REGEX.exec(baseParts.path);
+            baseParts.netLoc = pathParts[1];
+            baseParts.path = pathParts[2];
+          }
+          if (baseParts.netLoc && !baseParts.path) {
+            baseParts.path = '/';
+          }
+          var builtParts = {
+            // 2c) Otherwise, the embedded URL inherits the scheme of
+            // the base URL.
+            scheme: baseParts.scheme,
+            netLoc: relativeParts.netLoc,
+            path: null,
+            params: relativeParts.params,
+            query: relativeParts.query,
+            fragment: relativeParts.fragment
+          };
+          if (!relativeParts.netLoc) {
+            // 3) If the embedded URL's <net_loc> is non-empty, we skip to
+            // Step 7.  Otherwise, the embedded URL inherits the <net_loc>
+            // (if any) of the base URL.
+            builtParts.netLoc = baseParts.netLoc;
+            // 4) If the embedded URL path is preceded by a slash "/", the
+            // path is not relative and we skip to Step 7.
+            if (relativeParts.path[0] !== '/') {
+              if (!relativeParts.path) {
+                // 5) If the embedded URL path is empty (and not preceded by a
+                // slash), then the embedded URL inherits the base URL path
+                builtParts.path = baseParts.path;
+                // 5a) if the embedded URL's <params> is non-empty, we skip to
+                // step 7; otherwise, it inherits the <params> of the base
+                // URL (if any) and
+                if (!relativeParts.params) {
+                  builtParts.params = baseParts.params;
+                  // 5b) if the embedded URL's <query> is non-empty, we skip to
+                  // step 7; otherwise, it inherits the <query> of the base
+                  // URL (if any) and we skip to step 7.
+                  if (!relativeParts.query) {
+                    builtParts.query = baseParts.query;
+                  }
+                }
+              } else {
+                // 6) The last segment of the base URL's path (anything
+                // following the rightmost slash "/", or the entire path if no
+                // slash is present) is removed and the embedded URL's path is
+                // appended in its place.
+                var baseURLPath = baseParts.path;
+                var newPath = baseURLPath.substring(0, baseURLPath.lastIndexOf('/') + 1) + relativeParts.path;
+                builtParts.path = URLToolkit.normalizePath(newPath);
+              }
+            }
+          }
+          if (builtParts.path === null) {
+            builtParts.path = opts.alwaysNormalize ? URLToolkit.normalizePath(relativeParts.path) : relativeParts.path;
+          }
+          return URLToolkit.buildURLFromParts(builtParts);
+        },
+        parseURL: function (url) {
+          var parts = URL_REGEX.exec(url);
+          if (!parts) {
+            return null;
+          }
+          return {
+            scheme: parts[1] || '',
+            netLoc: parts[2] || '',
+            path: parts[3] || '',
+            params: parts[4] || '',
+            query: parts[5] || '',
+            fragment: parts[6] || ''
+          };
+        },
+        normalizePath: function (path) {
+          // The following operations are
+          // then applied, in order, to the new path:
+          // 6a) All occurrences of "./", where "." is a complete path
+          // segment, are removed.
+          // 6b) If the path ends with "." as a complete path segment,
+          // that "." is removed.
+          path = path.split('').reverse().join('').replace(SLASH_DOT_REGEX, '');
+          // 6c) All occurrences of "<segment>/../", where <segment> is a
+          // complete path segment not equal to "..", are removed.
+          // Removal of these path segments is performed iteratively,
+          // removing the leftmost matching pattern on each iteration,
+          // until no matching pattern remains.
+          // 6d) If the path ends with "<segment>/..", where <segment> is a
+          // complete path segment not equal to "..", that
+          // "<segment>/.." is removed.
+          while (path.length !== (path = path.replace(SLASH_DOT_DOT_REGEX, '')).length) {}
+          return path.split('').reverse().join('');
+        },
+        buildURLFromParts: function (parts) {
+          return parts.scheme + parts.netLoc + parts.path + parts.params + parts.query + parts.fragment;
+        }
+      };
+      module.exports = URLToolkit;
+    })();
+  });
+
+  var DEFAULT_LOCATION = 'http://example.com';
+  var resolveUrl$1 = function resolveUrl(baseUrl, relativeUrl) {
+    // return early if we don't need to resolve
+    if (/^[a-z]+:/i.test(relativeUrl)) {
+      return relativeUrl;
+    } // if baseUrl is a data URI, ignore it and resolve everything relative to window.location
+
+    if (/^data:/.test(baseUrl)) {
+      baseUrl = window.location && window.location.href || '';
+    } // IE11 supports URL but not the URL constructor
+    // feature detect the behavior we want
+
+    var nativeURL = typeof window.URL === 'function';
+    var protocolLess = /^\/\//.test(baseUrl); // remove location if window.location isn't available (i.e. we're in node)
+    // and if baseUrl isn't an absolute url
+
+    var removeLocation = !window.location && !/\/\//i.test(baseUrl); // if the base URL is relative then combine with the current location
+
+    if (nativeURL) {
+      baseUrl = new window.URL(baseUrl, window.location || DEFAULT_LOCATION);
+    } else if (!/\/\//i.test(baseUrl)) {
+      baseUrl = urlToolkit.buildAbsoluteURL(window.location && window.location.href || '', baseUrl);
+    }
+    if (nativeURL) {
+      var newUrl = new URL(relativeUrl, baseUrl); // if we're a protocol-less url, remove the protocol
+      // and if we're location-less, remove the location
+      // otherwise, return the url unmodified
+
+      if (removeLocation) {
+        return newUrl.href.slice(DEFAULT_LOCATION.length);
+      } else if (protocolLess) {
+        return newUrl.href.slice(newUrl.protocol.length);
+      }
+      return newUrl.href;
+    }
+    return urlToolkit.buildAbsoluteURL(baseUrl, relativeUrl);
+  };
+
+  /**
+   * @file stream.js
+   */
+
+  /**
+   * A lightweight readable stream implemention that handles event dispatching.
+   *
+   * @class Stream
+   */
+  var Stream = /*#__PURE__*/function () {
+    function Stream() {
+      this.listeners = {};
+    }
+    /**
+     * Add a listener for a specified event type.
+     *
+     * @param {string} type the event name
+     * @param {Function} listener the callback to be invoked when an event of
+     * the specified type occurs
+     */
+
+    var _proto = Stream.prototype;
+    _proto.on = function on(type, listener) {
+      if (!this.listeners[type]) {
+        this.listeners[type] = [];
+      }
+      this.listeners[type].push(listener);
+    }
+    /**
+     * Remove a listener for a specified event type.
+     *
+     * @param {string} type the event name
+     * @param {Function} listener  a function previously registered for this
+     * type of event through `on`
+     * @return {boolean} if we could turn it off or not
+     */;
+
+    _proto.off = function off(type, listener) {
+      if (!this.listeners[type]) {
+        return false;
+      }
+      var index = this.listeners[type].indexOf(listener); // TODO: which is better?
+      // In Video.js we slice listener functions
+      // on trigger so that it does not mess up the order
+      // while we loop through.
+      //
+      // Here we slice on off so that the loop in trigger
+      // can continue using it's old reference to loop without
+      // messing up the order.
+
+      this.listeners[type] = this.listeners[type].slice(0);
+      this.listeners[type].splice(index, 1);
+      return index > -1;
+    }
+    /**
+     * Trigger an event of the specified type on this stream. Any additional
+     * arguments to this function are passed as parameters to event listeners.
+     *
+     * @param {string} type the event name
+     */;
+
+    _proto.trigger = function trigger(type) {
+      var callbacks = this.listeners[type];
+      if (!callbacks) {
+        return;
+      } // Slicing the arguments on every invocation of this method
+      // can add a significant amount of overhead. Avoid the
+      // intermediate object creation for the common case of a
+      // single callback argument
+
+      if (arguments.length === 2) {
+        var length = callbacks.length;
+        for (var i = 0; i < length; ++i) {
+          callbacks[i].call(this, arguments[1]);
+        }
+      } else {
+        var args = Array.prototype.slice.call(arguments, 1);
+        var _length = callbacks.length;
+        for (var _i = 0; _i < _length; ++_i) {
+          callbacks[_i].apply(this, args);
+        }
+      }
+    }
+    /**
+     * Destroys the stream and cleans up.
+     */;
+
+    _proto.dispose = function dispose() {
+      this.listeners = {};
+    }
+    /**
+     * Forwards all `data` events on this stream to the destination stream. The
+     * destination stream should provide a method `push` to receive the data
+     * events as they arrive.
+     *
+     * @param {Stream} destination the stream that will receive all `data` events
+     * @see http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options
+     */;
+
+    _proto.pipe = function pipe(destination) {
+      this.on('data', function (data) {
+        destination.push(data);
+      });
+    };
+    return Stream;
+  }();
+
+  var atob$1 = function atob(s) {
+    return window.atob ? window.atob(s) : Buffer.from(s, 'base64').toString('binary');
+  };
+  function decodeB64ToUint8Array$1(b64Text) {
+    var decodedString = atob$1(b64Text);
+    var array = new Uint8Array(decodedString.length);
+    for (var i = 0; i < decodedString.length; i++) {
+      array[i] = decodedString.charCodeAt(i);
+    }
+    return array;
+  }
+
+  /*! @name m3u8-parser @version 7.1.0 @license Apache-2.0 */
+
+  /**
+   * @file m3u8/line-stream.js
+   */
+  /**
+   * A stream that buffers string input and generates a `data` event for each
+   * line.
+   *
+   * @class LineStream
+   * @extends Stream
+   */
+
+  class LineStream extends Stream {
+    constructor() {
+      super();
+      this.buffer = '';
+    }
+    /**
+     * Add new data to be parsed.
+     *
+     * @param {string} data the text to process
+     */
+
+    push(data) {
+      let nextNewline;
+      this.buffer += data;
+      nextNewline = this.buffer.indexOf('\n');
+      for (; nextNewline > -1; nextNewline = this.buffer.indexOf('\n')) {
+        this.trigger('data', this.buffer.substring(0, nextNewline));
+        this.buffer = this.buffer.substring(nextNewline + 1);
+      }
+    }
+  }
+  const TAB = String.fromCharCode(0x09);
+  const parseByterange = function (byterangeString) {
+    // optionally match and capture 0+ digits before `@`
+    // optionally match and capture 0+ digits after `@`
+    const match = /([0-9.]*)?@?([0-9.]*)?/.exec(byterangeString || '');
+    const result = {};
+    if (match[1]) {
+      result.length = parseInt(match[1], 10);
+    }
+    if (match[2]) {
+      result.offset = parseInt(match[2], 10);
+    }
+    return result;
+  };
+  /**
+   * "forgiving" attribute list psuedo-grammar:
+   * attributes -> keyvalue (',' keyvalue)*
+   * keyvalue   -> key '=' value
+   * key        -> [^=]*
+   * value      -> '"' [^"]* '"' | [^,]*
+   */
+
+  const attributeSeparator = function () {
+    const key = '[^=]*';
+    const value = '"[^"]*"|[^,]*';
+    const keyvalue = '(?:' + key + ')=(?:' + value + ')';
+    return new RegExp('(?:^|,)(' + keyvalue + ')');
+  };
+  /**
+   * Parse attributes from a line given the separator
+   *
+   * @param {string} attributes the attribute line to parse
+   */
+
+  const parseAttributes$1 = function (attributes) {
+    const result = {};
+    if (!attributes) {
+      return result;
+    } // split the string using attributes as the separator
+
+    const attrs = attributes.split(attributeSeparator());
+    let i = attrs.length;
+    let attr;
+    while (i--) {
+      // filter out unmatched portions of the string
+      if (attrs[i] === '') {
+        continue;
+      } // split the key and value
+
+      attr = /([^=]*)=(.*)/.exec(attrs[i]).slice(1); // trim whitespace and remove optional quotes around the value
+
+      attr[0] = attr[0].replace(/^\s+|\s+$/g, '');
+      attr[1] = attr[1].replace(/^\s+|\s+$/g, '');
+      attr[1] = attr[1].replace(/^['"](.*)['"]$/g, '$1');
+      result[attr[0]] = attr[1];
+    }
+    return result;
+  };
+  /**
+   * A line-level M3U8 parser event stream. It expects to receive input one
+   * line at a time and performs a context-free parse of its contents. A stream
+   * interpretation of a manifest can be useful if the manifest is expected to
+   * be too large to fit comfortably into memory or the entirety of the input
+   * is not immediately available. Otherwise, it's probably much easier to work
+   * with a regular `Parser` object.
+   *
+   * Produces `data` events with an object that captures the parser's
+   * interpretation of the input. That object has a property `tag` that is one
+   * of `uri`, `comment`, or `tag`. URIs only have a single additional
+   * property, `line`, which captures the entirety of the input without
+   * interpretation. Comments similarly have a single additional property
+   * `text` which is the input without the leading `#`.
+   *
+   * Tags always have a property `tagType` which is the lower-cased version of
+   * the M3U8 directive without the `#EXT` or `#EXT-X-` prefix. For instance,
+   * `#EXT-X-MEDIA-SEQUENCE` becomes `media-sequence` when parsed. Unrecognized
+   * tags are given the tag type `unknown` and a single additional property
+   * `data` with the remainder of the input.
+   *
+   * @class ParseStream
+   * @extends Stream
+   */
+
+  class ParseStream extends Stream {
+    constructor() {
+      super();
+      this.customParsers = [];
+      this.tagMappers = [];
+    }
+    /**
+     * Parses an additional line of input.
+     *
+     * @param {string} line a single line of an M3U8 file to parse
+     */
+
+    push(line) {
+      let match;
+      let event; // strip whitespace
+
+      line = line.trim();
+      if (line.length === 0) {
+        // ignore empty lines
+        return;
+      } // URIs
+
+      if (line[0] !== '#') {
+        this.trigger('data', {
+          type: 'uri',
+          uri: line
+        });
+        return;
+      } // map tags
+
+      const newLines = this.tagMappers.reduce((acc, mapper) => {
+        const mappedLine = mapper(line); // skip if unchanged
+
+        if (mappedLine === line) {
+          return acc;
+        }
+        return acc.concat([mappedLine]);
+      }, [line]);
+      newLines.forEach(newLine => {
+        for (let i = 0; i < this.customParsers.length; i++) {
+          if (this.customParsers[i].call(this, newLine)) {
+            return;
+          }
+        } // Comments
+
+        if (newLine.indexOf('#EXT') !== 0) {
+          this.trigger('data', {
+            type: 'comment',
+            text: newLine.slice(1)
+          });
+          return;
+        } // strip off any carriage returns here so the regex matching
+        // doesn't have to account for them.
+
+        newLine = newLine.replace('\r', ''); // Tags
+
+        match = /^#EXTM3U/.exec(newLine);
+        if (match) {
+          this.trigger('data', {
+            type: 'tag',
+            tagType: 'm3u'
+          });
+          return;
+        }
+        match = /^#EXTINF:([0-9\.]*)?,?(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'inf'
+          };
+          if (match[1]) {
+            event.duration = parseFloat(match[1]);
+          }
+          if (match[2]) {
+            event.title = match[2];
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-TARGETDURATION:([0-9.]*)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'targetduration'
+          };
+          if (match[1]) {
+            event.duration = parseInt(match[1], 10);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-VERSION:([0-9.]*)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'version'
+          };
+          if (match[1]) {
+            event.version = parseInt(match[1], 10);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-MEDIA-SEQUENCE:(\-?[0-9.]*)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'media-sequence'
+          };
+          if (match[1]) {
+            event.number = parseInt(match[1], 10);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-DISCONTINUITY-SEQUENCE:(\-?[0-9.]*)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'discontinuity-sequence'
+          };
+          if (match[1]) {
+            event.number = parseInt(match[1], 10);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-PLAYLIST-TYPE:(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'playlist-type'
+          };
+          if (match[1]) {
+            event.playlistType = match[1];
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-BYTERANGE:(.*)?$/.exec(newLine);
+        if (match) {
+          event = _extends$1(parseByterange(match[1]), {
+            type: 'tag',
+            tagType: 'byterange'
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-ALLOW-CACHE:(YES|NO)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'allow-cache'
+          };
+          if (match[1]) {
+            event.allowed = !/NO/.test(match[1]);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-MAP:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'map'
+          };
+          if (match[1]) {
+            const attributes = parseAttributes$1(match[1]);
+            if (attributes.URI) {
+              event.uri = attributes.URI;
+            }
+            if (attributes.BYTERANGE) {
+              event.byterange = parseByterange(attributes.BYTERANGE);
+            }
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-STREAM-INF:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'stream-inf'
+          };
+          if (match[1]) {
+            event.attributes = parseAttributes$1(match[1]);
+            if (event.attributes.RESOLUTION) {
+              const split = event.attributes.RESOLUTION.split('x');
+              const resolution = {};
+              if (split[0]) {
+                resolution.width = parseInt(split[0], 10);
+              }
+              if (split[1]) {
+                resolution.height = parseInt(split[1], 10);
+              }
+              event.attributes.RESOLUTION = resolution;
+            }
+            if (event.attributes.BANDWIDTH) {
+              event.attributes.BANDWIDTH = parseInt(event.attributes.BANDWIDTH, 10);
+            }
+            if (event.attributes['FRAME-RATE']) {
+              event.attributes['FRAME-RATE'] = parseFloat(event.attributes['FRAME-RATE']);
+            }
+            if (event.attributes['PROGRAM-ID']) {
+              event.attributes['PROGRAM-ID'] = parseInt(event.attributes['PROGRAM-ID'], 10);
+            }
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-MEDIA:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'media'
+          };
+          if (match[1]) {
+            event.attributes = parseAttributes$1(match[1]);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-ENDLIST/.exec(newLine);
+        if (match) {
+          this.trigger('data', {
+            type: 'tag',
+            tagType: 'endlist'
+          });
+          return;
+        }
+        match = /^#EXT-X-DISCONTINUITY/.exec(newLine);
+        if (match) {
+          this.trigger('data', {
+            type: 'tag',
+            tagType: 'discontinuity'
+          });
+          return;
+        }
+        match = /^#EXT-X-PROGRAM-DATE-TIME:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'program-date-time'
+          };
+          if (match[1]) {
+            event.dateTimeString = match[1];
+            event.dateTimeObject = new Date(match[1]);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-KEY:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'key'
+          };
+          if (match[1]) {
+            event.attributes = parseAttributes$1(match[1]); // parse the IV string into a Uint32Array
+
+            if (event.attributes.IV) {
+              if (event.attributes.IV.substring(0, 2).toLowerCase() === '0x') {
+                event.attributes.IV = event.attributes.IV.substring(2);
+              }
+              event.attributes.IV = event.attributes.IV.match(/.{8}/g);
+              event.attributes.IV[0] = parseInt(event.attributes.IV[0], 16);
+              event.attributes.IV[1] = parseInt(event.attributes.IV[1], 16);
+              event.attributes.IV[2] = parseInt(event.attributes.IV[2], 16);
+              event.attributes.IV[3] = parseInt(event.attributes.IV[3], 16);
+              event.attributes.IV = new Uint32Array(event.attributes.IV);
+            }
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-START:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'start'
+          };
+          if (match[1]) {
+            event.attributes = parseAttributes$1(match[1]);
+            event.attributes['TIME-OFFSET'] = parseFloat(event.attributes['TIME-OFFSET']);
+            event.attributes.PRECISE = /YES/.test(event.attributes.PRECISE);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-CUE-OUT-CONT:(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'cue-out-cont'
+          };
+          if (match[1]) {
+            event.data = match[1];
+          } else {
+            event.data = '';
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-CUE-OUT:(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'cue-out'
+          };
+          if (match[1]) {
+            event.data = match[1];
+          } else {
+            event.data = '';
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-CUE-IN:(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'cue-in'
+          };
+          if (match[1]) {
+            event.data = match[1];
+          } else {
+            event.data = '';
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-SKIP:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'skip'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          if (event.attributes.hasOwnProperty('SKIPPED-SEGMENTS')) {
+            event.attributes['SKIPPED-SEGMENTS'] = parseInt(event.attributes['SKIPPED-SEGMENTS'], 10);
+          }
+          if (event.attributes.hasOwnProperty('RECENTLY-REMOVED-DATERANGES')) {
+            event.attributes['RECENTLY-REMOVED-DATERANGES'] = event.attributes['RECENTLY-REMOVED-DATERANGES'].split(TAB);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-PART:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'part'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['DURATION'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseFloat(event.attributes[key]);
+            }
+          });
+          ['INDEPENDENT', 'GAP'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = /YES/.test(event.attributes[key]);
+            }
+          });
+          if (event.attributes.hasOwnProperty('BYTERANGE')) {
+            event.attributes.byterange = parseByterange(event.attributes.BYTERANGE);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-SERVER-CONTROL:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'server-control'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['CAN-SKIP-UNTIL', 'PART-HOLD-BACK', 'HOLD-BACK'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseFloat(event.attributes[key]);
+            }
+          });
+          ['CAN-SKIP-DATERANGES', 'CAN-BLOCK-RELOAD'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = /YES/.test(event.attributes[key]);
+            }
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-PART-INF:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'part-inf'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['PART-TARGET'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseFloat(event.attributes[key]);
+            }
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-PRELOAD-HINT:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'preload-hint'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['BYTERANGE-START', 'BYTERANGE-LENGTH'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseInt(event.attributes[key], 10);
+              const subkey = key === 'BYTERANGE-LENGTH' ? 'length' : 'offset';
+              event.attributes.byterange = event.attributes.byterange || {};
+              event.attributes.byterange[subkey] = event.attributes[key]; // only keep the parsed byterange object.
+
+              delete event.attributes[key];
+            }
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-RENDITION-REPORT:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'rendition-report'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['LAST-MSN', 'LAST-PART'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseInt(event.attributes[key], 10);
+            }
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-DATERANGE:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'daterange'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['ID', 'CLASS'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = String(event.attributes[key]);
+            }
+          });
+          ['START-DATE', 'END-DATE'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = new Date(event.attributes[key]);
+            }
+          });
+          ['DURATION', 'PLANNED-DURATION'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseFloat(event.attributes[key]);
+            }
+          });
+          ['END-ON-NEXT'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = /YES/i.test(event.attributes[key]);
+            }
+          });
+          ['SCTE35-CMD', ' SCTE35-OUT', 'SCTE35-IN'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = event.attributes[key].toString(16);
+            }
+          });
+          const clientAttributePattern = /^X-([A-Z]+-)+[A-Z]+$/;
+          for (const key in event.attributes) {
+            if (!clientAttributePattern.test(key)) {
+              continue;
+            }
+            const isHexaDecimal = /[0-9A-Fa-f]{6}/g.test(event.attributes[key]);
+            const isDecimalFloating = /^\d+(\.\d+)?$/.test(event.attributes[key]);
+            event.attributes[key] = isHexaDecimal ? event.attributes[key].toString(16) : isDecimalFloating ? parseFloat(event.attributes[key]) : String(event.attributes[key]);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-INDEPENDENT-SEGMENTS/.exec(newLine);
+        if (match) {
+          this.trigger('data', {
+            type: 'tag',
+            tagType: 'independent-segments'
+          });
+          return;
+        }
+        match = /^#EXT-X-CONTENT-STEERING:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'content-steering'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          this.trigger('data', event);
+          return;
+        } // unknown tag type
+
+        this.trigger('data', {
+          type: 'tag',
+          data: newLine.slice(4)
+        });
+      });
+    }
+    /**
+     * Add a parser for custom headers
+     *
+     * @param {Object}   options              a map of options for the added parser
+     * @param {RegExp}   options.expression   a regular expression to match the custom header
+     * @param {string}   options.customType   the custom type to register to the output
+     * @param {Function} [options.dataParser] function to parse the line into an object
+     * @param {boolean}  [options.segment]    should tag data be attached to the segment object
+     */
+
+    addParser({
+      expression,
+      customType,
+      dataParser,
+      segment
+    }) {
+      if (typeof dataParser !== 'function') {
+        dataParser = line => line;
+      }
+      this.customParsers.push(line => {
+        const match = expression.exec(line);
+        if (match) {
+          this.trigger('data', {
+            type: 'custom',
+            data: dataParser(line),
+            customType,
+            segment
+          });
+          return true;
+        }
+      });
+    }
+    /**
+     * Add a custom header mapper
+     *
+     * @param {Object}   options
+     * @param {RegExp}   options.expression   a regular expression to match the custom header
+     * @param {Function} options.map          function to translate tag into a different tag
+     */
+
+    addTagMapper({
+      expression,
+      map
+    }) {
+      const mapFn = line => {
+        if (expression.test(line)) {
+          return map(line);
+        }
+        return line;
+      };
+      this.tagMappers.push(mapFn);
+    }
+  }
+  const camelCase = str => str.toLowerCase().replace(/-(\w)/g, a => a[1].toUpperCase());
+  const camelCaseKeys = function (attributes) {
+    const result = {};
+    Object.keys(attributes).forEach(function (key) {
+      result[camelCase(key)] = attributes[key];
+    });
+    return result;
+  }; // set SERVER-CONTROL hold back based upon targetDuration and partTargetDuration
+  // we need this helper because defaults are based upon targetDuration and
+  // partTargetDuration being set, but they may not be if SERVER-CONTROL appears before
+  // target durations are set.
+
+  const setHoldBack = function (manifest) {
+    const {
+      serverControl,
+      targetDuration,
+      partTargetDuration
+    } = manifest;
+    if (!serverControl) {
+      return;
+    }
+    const tag = '#EXT-X-SERVER-CONTROL';
+    const hb = 'holdBack';
+    const phb = 'partHoldBack';
+    const minTargetDuration = targetDuration && targetDuration * 3;
+    const minPartDuration = partTargetDuration && partTargetDuration * 2;
+    if (targetDuration && !serverControl.hasOwnProperty(hb)) {
+      serverControl[hb] = minTargetDuration;
+      this.trigger('info', {
+        message: `${tag} defaulting HOLD-BACK to targetDuration * 3 (${minTargetDuration}).`
+      });
+    }
+    if (minTargetDuration && serverControl[hb] < minTargetDuration) {
+      this.trigger('warn', {
+        message: `${tag} clamping HOLD-BACK (${serverControl[hb]}) to targetDuration * 3 (${minTargetDuration})`
+      });
+      serverControl[hb] = minTargetDuration;
+    } // default no part hold back to part target duration * 3
+
+    if (partTargetDuration && !serverControl.hasOwnProperty(phb)) {
+      serverControl[phb] = partTargetDuration * 3;
+      this.trigger('info', {
+        message: `${tag} defaulting PART-HOLD-BACK to partTargetDuration * 3 (${serverControl[phb]}).`
+      });
+    } // if part hold back is too small default it to part target duration * 2
+
+    if (partTargetDuration && serverControl[phb] < minPartDuration) {
+      this.trigger('warn', {
+        message: `${tag} clamping PART-HOLD-BACK (${serverControl[phb]}) to partTargetDuration * 2 (${minPartDuration}).`
+      });
+      serverControl[phb] = minPartDuration;
+    }
+  };
+  /**
+   * A parser for M3U8 files. The current interpretation of the input is
+   * exposed as a property `manifest` on parser objects. It's just two lines to
+   * create and parse a manifest once you have the contents available as a string:
+   *
+   * ```js
+   * var parser = new m3u8.Parser();
+   * parser.push(xhr.responseText);
+   * ```
+   *
+   * New input can later be applied to update the manifest object by calling
+   * `push` again.
+   *
+   * The parser attempts to create a usable manifest object even if the
+   * underlying input is somewhat nonsensical. It emits `info` and `warning`
+   * events during the parse if it encounters input that seems invalid or
+   * requires some property of the manifest object to be defaulted.
+   *
+   * @class Parser
+   * @extends Stream
+   */
+
+  class Parser extends Stream {
+    constructor() {
+      super();
+      this.lineStream = new LineStream();
+      this.parseStream = new ParseStream();
+      this.lineStream.pipe(this.parseStream);
+      this.lastProgramDateTime = null;
+      /* eslint-disable consistent-this */
+
+      const self = this;
+      /* eslint-enable consistent-this */
+
+      const uris = [];
+      let currentUri = {}; // if specified, the active EXT-X-MAP definition
+
+      let currentMap; // if specified, the active decryption key
+
+      let key;
+      let hasParts = false;
+      const noop = function () {};
+      const defaultMediaGroups = {
+        'AUDIO': {},
+        'VIDEO': {},
+        'CLOSED-CAPTIONS': {},
+        'SUBTITLES': {}
+      }; // This is the Widevine UUID from DASH IF IOP. The same exact string is
+      // used in MPDs with Widevine encrypted streams.
+
+      const widevineUuid = 'urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed'; // group segments into numbered timelines delineated by discontinuities
+
+      let currentTimeline = 0; // the manifest is empty until the parse stream begins delivering data
+
+      this.manifest = {
+        allowCache: true,
+        discontinuityStarts: [],
+        dateRanges: [],
+        segments: []
+      }; // keep track of the last seen segment's byte range end, as segments are not required
+      // to provide the offset, in which case it defaults to the next byte after the
+      // previous segment
+
+      let lastByterangeEnd = 0; // keep track of the last seen part's byte range end.
+
+      let lastPartByterangeEnd = 0;
+      const dateRangeTags = {};
+      this.on('end', () => {
+        // only add preloadSegment if we don't yet have a uri for it.
+        // and we actually have parts/preloadHints
+        if (currentUri.uri || !currentUri.parts && !currentUri.preloadHints) {
+          return;
+        }
+        if (!currentUri.map && currentMap) {
+          currentUri.map = currentMap;
+        }
+        if (!currentUri.key && key) {
+          currentUri.key = key;
+        }
+        if (!currentUri.timeline && typeof currentTimeline === 'number') {
+          currentUri.timeline = currentTimeline;
+        }
+        this.manifest.preloadSegment = currentUri;
+      }); // update the manifest with the m3u8 entry from the parse stream
+
+      this.parseStream.on('data', function (entry) {
+        let mediaGroup;
+        let rendition;
+        ({
+          tag() {
+            // switch based on the tag type
+            (({
+              version() {
+                if (entry.version) {
+                  this.manifest.version = entry.version;
+                }
+              },
+              'allow-cache'() {
+                this.manifest.allowCache = entry.allowed;
+                if (!('allowed' in entry)) {
+                  this.trigger('info', {
+                    message: 'defaulting allowCache to YES'
+                  });
+                  this.manifest.allowCache = true;
+                }
+              },
+              byterange() {
+                const byterange = {};
+                if ('length' in entry) {
+                  currentUri.byterange = byterange;
+                  byterange.length = entry.length;
+                  if (!('offset' in entry)) {
+                    /*
+                     * From the latest spec (as of this writing):
+                     * https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.2.2
+                     *
+                     * Same text since EXT-X-BYTERANGE's introduction in draft 7:
+                     * https://tools.ietf.org/html/draft-pantos-http-live-streaming-07#section-3.3.1)
+                     *
+                     * "If o [offset] is not present, the sub-range begins at the next byte
+                     * following the sub-range of the previous media segment."
+                     */
+                    entry.offset = lastByterangeEnd;
+                  }
+                }
+                if ('offset' in entry) {
+                  currentUri.byterange = byterange;
+                  byterange.offset = entry.offset;
+                }
+                lastByterangeEnd = byterange.offset + byterange.length;
+              },
+              endlist() {
+                this.manifest.endList = true;
+              },
+              inf() {
+                if (!('mediaSequence' in this.manifest)) {
+                  this.manifest.mediaSequence = 0;
+                  this.trigger('info', {
+                    message: 'defaulting media sequence to zero'
+                  });
+                }
+                if (!('discontinuitySequence' in this.manifest)) {
+                  this.manifest.discontinuitySequence = 0;
+                  this.trigger('info', {
+                    message: 'defaulting discontinuity sequence to zero'
+                  });
+                }
+                if (entry.title) {
+                  currentUri.title = entry.title;
+                }
+                if (entry.duration > 0) {
+                  currentUri.duration = entry.duration;
+                }
+                if (entry.duration === 0) {
+                  currentUri.duration = 0.01;
+                  this.trigger('info', {
+                    message: 'updating zero segment duration to a small value'
+                  });
+                }
+                this.manifest.segments = uris;
+              },
+              key() {
+                if (!entry.attributes) {
+                  this.trigger('warn', {
+                    message: 'ignoring key declaration without attribute list'
+                  });
+                  return;
+                } // clear the active encryption key
+
+                if (entry.attributes.METHOD === 'NONE') {
+                  key = null;
+                  return;
+                }
+                if (!entry.attributes.URI) {
+                  this.trigger('warn', {
+                    message: 'ignoring key declaration without URI'
+                  });
+                  return;
+                }
+                if (entry.attributes.KEYFORMAT === 'com.apple.streamingkeydelivery') {
+                  this.manifest.contentProtection = this.manifest.contentProtection || {}; // TODO: add full support for this.
+
+                  this.manifest.contentProtection['com.apple.fps.1_0'] = {
+                    attributes: entry.attributes
+                  };
+                  return;
+                }
+                if (entry.attributes.KEYFORMAT === 'com.microsoft.playready') {
+                  this.manifest.contentProtection = this.manifest.contentProtection || {}; // TODO: add full support for this.
+
+                  this.manifest.contentProtection['com.microsoft.playready'] = {
+                    uri: entry.attributes.URI
+                  };
+                  return;
+                } // check if the content is encrypted for Widevine
+                // Widevine/HLS spec: https://storage.googleapis.com/wvdocs/Widevine_DRM_HLS.pdf
+
+                if (entry.attributes.KEYFORMAT === widevineUuid) {
+                  const VALID_METHODS = ['SAMPLE-AES', 'SAMPLE-AES-CTR', 'SAMPLE-AES-CENC'];
+                  if (VALID_METHODS.indexOf(entry.attributes.METHOD) === -1) {
+                    this.trigger('warn', {
+                      message: 'invalid key method provided for Widevine'
+                    });
+                    return;
+                  }
+                  if (entry.attributes.METHOD === 'SAMPLE-AES-CENC') {
+                    this.trigger('warn', {
+                      message: 'SAMPLE-AES-CENC is deprecated, please use SAMPLE-AES-CTR instead'
+                    });
+                  }
+                  if (entry.attributes.URI.substring(0, 23) !== 'data:text/plain;base64,') {
+                    this.trigger('warn', {
+                      message: 'invalid key URI provided for Widevine'
+                    });
+                    return;
+                  }
+                  if (!(entry.attributes.KEYID && entry.attributes.KEYID.substring(0, 2) === '0x')) {
+                    this.trigger('warn', {
+                      message: 'invalid key ID provided for Widevine'
+                    });
+                    return;
+                  } // if Widevine key attributes are valid, store them as `contentProtection`
+                  // on the manifest to emulate Widevine tag structure in a DASH mpd
+
+                  this.manifest.contentProtection = this.manifest.contentProtection || {};
+                  this.manifest.contentProtection['com.widevine.alpha'] = {
+                    attributes: {
+                      schemeIdUri: entry.attributes.KEYFORMAT,
+                      // remove '0x' from the key id string
+                      keyId: entry.attributes.KEYID.substring(2)
+                    },
+                    // decode the base64-encoded PSSH box
+                    pssh: decodeB64ToUint8Array$1(entry.attributes.URI.split(',')[1])
+                  };
+                  return;
+                }
+                if (!entry.attributes.METHOD) {
+                  this.trigger('warn', {
+                    message: 'defaulting key method to AES-128'
+                  });
+                } // setup an encryption key for upcoming segments
+
+                key = {
+                  method: entry.attributes.METHOD || 'AES-128',
+                  uri: entry.attributes.URI
+                };
+                if (typeof entry.attributes.IV !== 'undefined') {
+                  key.iv = entry.attributes.IV;
+                }
+              },
+              'media-sequence'() {
+                if (!isFinite(entry.number)) {
+                  this.trigger('warn', {
+                    message: 'ignoring invalid media sequence: ' + entry.number
+                  });
+                  return;
+                }
+                this.manifest.mediaSequence = entry.number;
+              },
+              'discontinuity-sequence'() {
+                if (!isFinite(entry.number)) {
+                  this.trigger('warn', {
+                    message: 'ignoring invalid discontinuity sequence: ' + entry.number
+                  });
+                  return;
+                }
+                this.manifest.discontinuitySequence = entry.number;
+                currentTimeline = entry.number;
+              },
+              'playlist-type'() {
+                if (!/VOD|EVENT/.test(entry.playlistType)) {
+                  this.trigger('warn', {
+                    message: 'ignoring unknown playlist type: ' + entry.playlist
+                  });
+                  return;
+                }
+                this.manifest.playlistType = entry.playlistType;
+              },
+              map() {
+                currentMap = {};
+                if (entry.uri) {
+                  currentMap.uri = entry.uri;
+                }
+                if (entry.byterange) {
+                  currentMap.byterange = entry.byterange;
+                }
+                if (key) {
+                  currentMap.key = key;
+                }
+              },
+              'stream-inf'() {
+                this.manifest.playlists = uris;
+                this.manifest.mediaGroups = this.manifest.mediaGroups || defaultMediaGroups;
+                if (!entry.attributes) {
+                  this.trigger('warn', {
+                    message: 'ignoring empty stream-inf attributes'
+                  });
+                  return;
+                }
+                if (!currentUri.attributes) {
+                  currentUri.attributes = {};
+                }
+                _extends$1(currentUri.attributes, entry.attributes);
+              },
+              media() {
+                this.manifest.mediaGroups = this.manifest.mediaGroups || defaultMediaGroups;
+                if (!(entry.attributes && entry.attributes.TYPE && entry.attributes['GROUP-ID'] && entry.attributes.NAME)) {
+                  this.trigger('warn', {
+                    message: 'ignoring incomplete or missing media group'
+                  });
+                  return;
+                } // find the media group, creating defaults as necessary
+
+                const mediaGroupType = this.manifest.mediaGroups[entry.attributes.TYPE];
+                mediaGroupType[entry.attributes['GROUP-ID']] = mediaGroupType[entry.attributes['GROUP-ID']] || {};
+                mediaGroup = mediaGroupType[entry.attributes['GROUP-ID']]; // collect the rendition metadata
+
+                rendition = {
+                  default: /yes/i.test(entry.attributes.DEFAULT)
+                };
+                if (rendition.default) {
+                  rendition.autoselect = true;
+                } else {
+                  rendition.autoselect = /yes/i.test(entry.attributes.AUTOSELECT);
+                }
+                if (entry.attributes.LANGUAGE) {
+                  rendition.language = entry.attributes.LANGUAGE;
+                }
+                if (entry.attributes.URI) {
+                  rendition.uri = entry.attributes.URI;
+                }
+                if (entry.attributes['INSTREAM-ID']) {
+                  rendition.instreamId = entry.attributes['INSTREAM-ID'];
+                }
+                if (entry.attributes.CHARACTERISTICS) {
+                  rendition.characteristics = entry.attributes.CHARACTERISTICS;
+                }
+                if (entry.attributes.FORCED) {
+                  rendition.forced = /yes/i.test(entry.attributes.FORCED);
+                } // insert the new rendition
+
+                mediaGroup[entry.attributes.NAME] = rendition;
+              },
+              discontinuity() {
+                currentTimeline += 1;
+                currentUri.discontinuity = true;
+                this.manifest.discontinuityStarts.push(uris.length);
+              },
+              'program-date-time'() {
+                if (typeof this.manifest.dateTimeString === 'undefined') {
+                  // PROGRAM-DATE-TIME is a media-segment tag, but for backwards
+                  // compatibility, we add the first occurence of the PROGRAM-DATE-TIME tag
+                  // to the manifest object
+                  // TODO: Consider removing this in future major version
+                  this.manifest.dateTimeString = entry.dateTimeString;
+                  this.manifest.dateTimeObject = entry.dateTimeObject;
+                }
+                currentUri.dateTimeString = entry.dateTimeString;
+                currentUri.dateTimeObject = entry.dateTimeObject;
+                const {
+                  lastProgramDateTime
+                } = this;
+                this.lastProgramDateTime = new Date(entry.dateTimeString).getTime(); // We should extrapolate Program Date Time backward only during first program date time occurrence.
+                // Once we have at least one program date time point, we can always extrapolate it forward using lastProgramDateTime reference.
+
+                if (lastProgramDateTime === null) {
+                  // Extrapolate Program Date Time backward
+                  // Since it is first program date time occurrence we're assuming that
+                  // all this.manifest.segments have no program date time info
+                  this.manifest.segments.reduceRight((programDateTime, segment) => {
+                    segment.programDateTime = programDateTime - segment.duration * 1000;
+                    return segment.programDateTime;
+                  }, this.lastProgramDateTime);
+                }
+              },
+              targetduration() {
+                if (!isFinite(entry.duration) || entry.duration < 0) {
+                  this.trigger('warn', {
+                    message: 'ignoring invalid target duration: ' + entry.duration
+                  });
+                  return;
+                }
+                this.manifest.targetDuration = entry.duration;
+                setHoldBack.call(this, this.manifest);
+              },
+              start() {
+                if (!entry.attributes || isNaN(entry.attributes['TIME-OFFSET'])) {
+                  this.trigger('warn', {
+                    message: 'ignoring start declaration without appropriate attribute list'
+                  });
+                  return;
+                }
+                this.manifest.start = {
+                  timeOffset: entry.attributes['TIME-OFFSET'],
+                  precise: entry.attributes.PRECISE
+                };
+              },
+              'cue-out'() {
+                currentUri.cueOut = entry.data;
+              },
+              'cue-out-cont'() {
+                currentUri.cueOutCont = entry.data;
+              },
+              'cue-in'() {
+                currentUri.cueIn = entry.data;
+              },
+              'skip'() {
+                this.manifest.skip = camelCaseKeys(entry.attributes);
+                this.warnOnMissingAttributes_('#EXT-X-SKIP', entry.attributes, ['SKIPPED-SEGMENTS']);
+              },
+              'part'() {
+                hasParts = true; // parts are always specifed before a segment
+
+                const segmentIndex = this.manifest.segments.length;
+                const part = camelCaseKeys(entry.attributes);
+                currentUri.parts = currentUri.parts || [];
+                currentUri.parts.push(part);
+                if (part.byterange) {
+                  if (!part.byterange.hasOwnProperty('offset')) {
+                    part.byterange.offset = lastPartByterangeEnd;
+                  }
+                  lastPartByterangeEnd = part.byterange.offset + part.byterange.length;
+                }
+                const partIndex = currentUri.parts.length - 1;
+                this.warnOnMissingAttributes_(`#EXT-X-PART #${partIndex} for segment #${segmentIndex}`, entry.attributes, ['URI', 'DURATION']);
+                if (this.manifest.renditionReports) {
+                  this.manifest.renditionReports.forEach((r, i) => {
+                    if (!r.hasOwnProperty('lastPart')) {
+                      this.trigger('warn', {
+                        message: `#EXT-X-RENDITION-REPORT #${i} lacks required attribute(s): LAST-PART`
+                      });
+                    }
+                  });
+                }
+              },
+              'server-control'() {
+                const attrs = this.manifest.serverControl = camelCaseKeys(entry.attributes);
+                if (!attrs.hasOwnProperty('canBlockReload')) {
+                  attrs.canBlockReload = false;
+                  this.trigger('info', {
+                    message: '#EXT-X-SERVER-CONTROL defaulting CAN-BLOCK-RELOAD to false'
+                  });
+                }
+                setHoldBack.call(this, this.manifest);
+                if (attrs.canSkipDateranges && !attrs.hasOwnProperty('canSkipUntil')) {
+                  this.trigger('warn', {
+                    message: '#EXT-X-SERVER-CONTROL lacks required attribute CAN-SKIP-UNTIL which is required when CAN-SKIP-DATERANGES is set'
+                  });
+                }
+              },
+              'preload-hint'() {
+                // parts are always specifed before a segment
+                const segmentIndex = this.manifest.segments.length;
+                const hint = camelCaseKeys(entry.attributes);
+                const isPart = hint.type && hint.type === 'PART';
+                currentUri.preloadHints = currentUri.preloadHints || [];
+                currentUri.preloadHints.push(hint);
+                if (hint.byterange) {
+                  if (!hint.byterange.hasOwnProperty('offset')) {
+                    // use last part byterange end or zero if not a part.
+                    hint.byterange.offset = isPart ? lastPartByterangeEnd : 0;
+                    if (isPart) {
+                      lastPartByterangeEnd = hint.byterange.offset + hint.byterange.length;
+                    }
+                  }
+                }
+                const index = currentUri.preloadHints.length - 1;
+                this.warnOnMissingAttributes_(`#EXT-X-PRELOAD-HINT #${index} for segment #${segmentIndex}`, entry.attributes, ['TYPE', 'URI']);
+                if (!hint.type) {
+                  return;
+                } // search through all preload hints except for the current one for
+                // a duplicate type.
+
+                for (let i = 0; i < currentUri.preloadHints.length - 1; i++) {
+                  const otherHint = currentUri.preloadHints[i];
+                  if (!otherHint.type) {
+                    continue;
+                  }
+                  if (otherHint.type === hint.type) {
+                    this.trigger('warn', {
+                      message: `#EXT-X-PRELOAD-HINT #${index} for segment #${segmentIndex} has the same TYPE ${hint.type} as preload hint #${i}`
+                    });
+                  }
+                }
+              },
+              'rendition-report'() {
+                const report = camelCaseKeys(entry.attributes);
+                this.manifest.renditionReports = this.manifest.renditionReports || [];
+                this.manifest.renditionReports.push(report);
+                const index = this.manifest.renditionReports.length - 1;
+                const required = ['LAST-MSN', 'URI'];
+                if (hasParts) {
+                  required.push('LAST-PART');
+                }
+                this.warnOnMissingAttributes_(`#EXT-X-RENDITION-REPORT #${index}`, entry.attributes, required);
+              },
+              'part-inf'() {
+                this.manifest.partInf = camelCaseKeys(entry.attributes);
+                this.warnOnMissingAttributes_('#EXT-X-PART-INF', entry.attributes, ['PART-TARGET']);
+                if (this.manifest.partInf.partTarget) {
+                  this.manifest.partTargetDuration = this.manifest.partInf.partTarget;
+                }
+                setHoldBack.call(this, this.manifest);
+              },
+              'daterange'() {
+                this.manifest.dateRanges.push(camelCaseKeys(entry.attributes));
+                const index = this.manifest.dateRanges.length - 1;
+                this.warnOnMissingAttributes_(`#EXT-X-DATERANGE #${index}`, entry.attributes, ['ID', 'START-DATE']);
+                const dateRange = this.manifest.dateRanges[index];
+                if (dateRange.endDate && dateRange.startDate && new Date(dateRange.endDate) < new Date(dateRange.startDate)) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE END-DATE must be equal to or later than the value of the START-DATE'
+                  });
+                }
+                if (dateRange.duration && dateRange.duration < 0) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE DURATION must not be negative'
+                  });
+                }
+                if (dateRange.plannedDuration && dateRange.plannedDuration < 0) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE PLANNED-DURATION must not be negative'
+                  });
+                }
+                const endOnNextYes = !!dateRange.endOnNext;
+                if (endOnNextYes && !dateRange.class) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE with an END-ON-NEXT=YES attribute must have a CLASS attribute'
+                  });
+                }
+                if (endOnNextYes && (dateRange.duration || dateRange.endDate)) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE with an END-ON-NEXT=YES attribute must not contain DURATION or END-DATE attributes'
+                  });
+                }
+                if (dateRange.duration && dateRange.endDate) {
+                  const startDate = dateRange.startDate;
+                  const newDateInSeconds = startDate.getTime() + dateRange.duration * 1000;
+                  this.manifest.dateRanges[index].endDate = new Date(newDateInSeconds);
+                }
+                if (!dateRangeTags[dateRange.id]) {
+                  dateRangeTags[dateRange.id] = dateRange;
+                } else {
+                  for (const attribute in dateRangeTags[dateRange.id]) {
+                    if (!!dateRange[attribute] && JSON.stringify(dateRangeTags[dateRange.id][attribute]) !== JSON.stringify(dateRange[attribute])) {
+                      this.trigger('warn', {
+                        message: 'EXT-X-DATERANGE tags with the same ID in a playlist must have the same attributes values'
+                      });
+                      break;
+                    }
+                  } // if tags with the same ID do not have conflicting attributes, merge them
+
+                  const dateRangeWithSameId = this.manifest.dateRanges.findIndex(dateRangeToFind => dateRangeToFind.id === dateRange.id);
+                  this.manifest.dateRanges[dateRangeWithSameId] = _extends$1(this.manifest.dateRanges[dateRangeWithSameId], dateRange);
+                  dateRangeTags[dateRange.id] = _extends$1(dateRangeTags[dateRange.id], dateRange); // after merging, delete the duplicate dateRange that was added last
+
+                  this.manifest.dateRanges.pop();
+                }
+              },
+              'independent-segments'() {
+                this.manifest.independentSegments = true;
+              },
+              'content-steering'() {
+                this.manifest.contentSteering = camelCaseKeys(entry.attributes);
+                this.warnOnMissingAttributes_('#EXT-X-CONTENT-STEERING', entry.attributes, ['SERVER-URI']);
+              }
+            })[entry.tagType] || noop).call(self);
+          },
+          uri() {
+            currentUri.uri = entry.uri;
+            uris.push(currentUri); // if no explicit duration was declared, use the target duration
+
+            if (this.manifest.targetDuration && !('duration' in currentUri)) {
+              this.trigger('warn', {
+                message: 'defaulting segment duration to the target duration'
+              });
+              currentUri.duration = this.manifest.targetDuration;
+            } // annotate with encryption information, if necessary
+
+            if (key) {
+              currentUri.key = key;
+            }
+            currentUri.timeline = currentTimeline; // annotate with initialization segment information, if necessary
+
+            if (currentMap) {
+              currentUri.map = currentMap;
+            } // reset the last byterange end as it needs to be 0 between parts
+
+            lastPartByterangeEnd = 0; // Once we have at least one program date time we can always extrapolate it forward
+
+            if (this.lastProgramDateTime !== null) {
+              currentUri.programDateTime = this.lastProgramDateTime;
+              this.lastProgramDateTime += currentUri.duration * 1000;
+            } // prepare for the next URI
+
+            currentUri = {};
+          },
+          comment() {// comments are not important for playback
+          },
+          custom() {
+            // if this is segment-level data attach the output to the segment
+            if (entry.segment) {
+              currentUri.custom = currentUri.custom || {};
+              currentUri.custom[entry.customType] = entry.data; // if this is manifest-level data attach to the top level manifest object
+            } else {
+              this.manifest.custom = this.manifest.custom || {};
+              this.manifest.custom[entry.customType] = entry.data;
+            }
+          }
+        })[entry.type].call(self);
+      });
+    }
+    warnOnMissingAttributes_(identifier, attributes, required) {
+      const missing = [];
+      required.forEach(function (key) {
+        if (!attributes.hasOwnProperty(key)) {
+          missing.push(key);
+        }
+      });
+      if (missing.length) {
+        this.trigger('warn', {
+          message: `${identifier} lacks required attribute(s): ${missing.join(', ')}`
+        });
+      }
+    }
+    /**
+     * Parse the input string and update the manifest object.
+     *
+     * @param {string} chunk a potentially incomplete portion of the manifest
+     */
+
+    push(chunk) {
+      this.lineStream.push(chunk);
+    }
+    /**
+     * Flush any remaining input. This can be handy if the last line of an M3U8
+     * manifest did not contain a trailing newline but the file has been
+     * completely received.
+     */
+
+    end() {
+      // flush any buffered input
+      this.lineStream.push('\n');
+      if (this.manifest.dateRanges.length && this.lastProgramDateTime === null) {
+        this.trigger('warn', {
+          message: 'A playlist with EXT-X-DATERANGE tag must contain atleast one EXT-X-PROGRAM-DATE-TIME tag'
+        });
+      }
+      this.lastProgramDateTime = null;
+      this.trigger('end');
+    }
+    /**
+     * Add an additional parser for non-standard tags
+     *
+     * @param {Object}   options              a map of options for the added parser
+     * @param {RegExp}   options.expression   a regular expression to match the custom header
+     * @param {string}   options.customType   the custom type to register to the output
+     * @param {Function} [options.dataParser] function to parse the line into an object
+     * @param {boolean}  [options.segment]    should tag data be attached to the segment object
+     */
+
+    addParser(options) {
+      this.parseStream.addParser(options);
+    }
+    /**
+     * Add a custom header mapper
+     *
+     * @param {Object}   options
+     * @param {RegExp}   options.expression   a regular expression to match the custom header
+     * @param {Function} options.map          function to translate tag into a different tag
+     */
+
+    addTagMapper(options) {
+      this.parseStream.addTagMapper(options);
+    }
+  }
+
+  var regexs = {
+    // to determine mime types
+    mp4: /^(av0?1|avc0?[1234]|vp0?9|flac|opus|mp3|mp4a|mp4v|stpp.ttml.im1t)/,
+    webm: /^(vp0?[89]|av0?1|opus|vorbis)/,
+    ogg: /^(vp0?[89]|theora|flac|opus|vorbis)/,
+    // to determine if a codec is audio or video
+    video: /^(av0?1|avc0?[1234]|vp0?[89]|hvc1|hev1|theora|mp4v)/,
+    audio: /^(mp4a|flac|vorbis|opus|ac-[34]|ec-3|alac|mp3|speex|aac)/,
+    text: /^(stpp.ttml.im1t)/,
+    // mux.js support regex
+    muxerVideo: /^(avc0?1)/,
+    muxerAudio: /^(mp4a)/,
+    // match nothing as muxer does not support text right now.
+    // there cannot never be a character before the start of a string
+    // so this matches nothing.
+    muxerText: /a^/
+  };
+  var mediaTypes = ['video', 'audio', 'text'];
+  var upperMediaTypes = ['Video', 'Audio', 'Text'];
+  /**
+   * Replace the old apple-style `avc1.<dd>.<dd>` codec string with the standard
+   * `avc1.<hhhhhh>`
+   *
+   * @param {string} codec
+   *        Codec string to translate
+   * @return {string}
+   *         The translated codec string
+   */
+
+  var translateLegacyCodec = function translateLegacyCodec(codec) {
+    if (!codec) {
+      return codec;
+    }
+    return codec.replace(/avc1\.(\d+)\.(\d+)/i, function (orig, profile, avcLevel) {
+      var profileHex = ('00' + Number(profile).toString(16)).slice(-2);
+      var avcLevelHex = ('00' + Number(avcLevel).toString(16)).slice(-2);
+      return 'avc1.' + profileHex + '00' + avcLevelHex;
+    });
+  };
+  /**
+   * @typedef {Object} ParsedCodecInfo
+   * @property {number} codecCount
+   *           Number of codecs parsed
+   * @property {string} [videoCodec]
+   *           Parsed video codec (if found)
+   * @property {string} [videoObjectTypeIndicator]
+   *           Video object type indicator (if found)
+   * @property {string|null} audioProfile
+   *           Audio profile
+   */
+
+  /**
+   * Parses a codec string to retrieve the number of codecs specified, the video codec and
+   * object type indicator, and the audio profile.
+   *
+   * @param {string} [codecString]
+   *        The codec string to parse
+   * @return {ParsedCodecInfo}
+   *         Parsed codec info
+   */
+
+  var parseCodecs = function parseCodecs(codecString) {
+    if (codecString === void 0) {
+      codecString = '';
+    }
+    var codecs = codecString.split(',');
+    var result = [];
+    codecs.forEach(function (codec) {
+      codec = codec.trim();
+      var codecType;
+      mediaTypes.forEach(function (name) {
+        var match = regexs[name].exec(codec.toLowerCase());
+        if (!match || match.length <= 1) {
+          return;
+        }
+        codecType = name; // maintain codec case
+
+        var type = codec.substring(0, match[1].length);
+        var details = codec.replace(type, '');
+        result.push({
+          type: type,
+          details: details,
+          mediaType: name
+        });
+      });
+      if (!codecType) {
+        result.push({
+          type: codec,
+          details: '',
+          mediaType: 'unknown'
+        });
+      }
+    });
+    return result;
+  };
+  /**
+   * Returns a ParsedCodecInfo object for the default alternate audio playlist if there is
+   * a default alternate audio playlist for the provided audio group.
+   *
+   * @param {Object} master
+   *        The master playlist
+   * @param {string} audioGroupId
+   *        ID of the audio group for which to find the default codec info
+   * @return {ParsedCodecInfo}
+   *         Parsed codec info
+   */
+
+  var codecsFromDefault = function codecsFromDefault(master, audioGroupId) {
+    if (!master.mediaGroups.AUDIO || !audioGroupId) {
+      return null;
+    }
+    var audioGroup = master.mediaGroups.AUDIO[audioGroupId];
+    if (!audioGroup) {
+      return null;
+    }
+    for (var name in audioGroup) {
+      var audioType = audioGroup[name];
+      if (audioType.default && audioType.playlists) {
+        // codec should be the same for all playlists within the audio type
+        return parseCodecs(audioType.playlists[0].attributes.CODECS);
+      }
+    }
+    return null;
+  };
+  var isAudioCodec = function isAudioCodec(codec) {
+    if (codec === void 0) {
+      codec = '';
+    }
+    return regexs.audio.test(codec.trim().toLowerCase());
+  };
+  var isTextCodec = function isTextCodec(codec) {
+    if (codec === void 0) {
+      codec = '';
+    }
+    return regexs.text.test(codec.trim().toLowerCase());
+  };
+  var getMimeForCodec = function getMimeForCodec(codecString) {
+    if (!codecString || typeof codecString !== 'string') {
+      return;
+    }
+    var codecs = codecString.toLowerCase().split(',').map(function (c) {
+      return translateLegacyCodec(c.trim());
+    }); // default to video type
+
+    var type = 'video'; // only change to audio type if the only codec we have is
+    // audio
+
+    if (codecs.length === 1 && isAudioCodec(codecs[0])) {
+      type = 'audio';
+    } else if (codecs.length === 1 && isTextCodec(codecs[0])) {
+      // text uses application/<container> for now
+      type = 'application';
+    } // default the container to mp4
+
+    var container = 'mp4'; // every codec must be able to go into the container
+    // for that container to be the correct one
+
+    if (codecs.every(function (c) {
+      return regexs.mp4.test(c);
+    })) {
+      container = 'mp4';
+    } else if (codecs.every(function (c) {
+      return regexs.webm.test(c);
+    })) {
+      container = 'webm';
+    } else if (codecs.every(function (c) {
+      return regexs.ogg.test(c);
+    })) {
+      container = 'ogg';
+    }
+    return type + "/" + container + ";codecs=\"" + codecString + "\"";
+  };
+  var browserSupportsCodec = function browserSupportsCodec(codecString) {
+    if (codecString === void 0) {
+      codecString = '';
+    }
+    return window.MediaSource && window.MediaSource.isTypeSupported && window.MediaSource.isTypeSupported(getMimeForCodec(codecString)) || false;
+  };
+  var muxerSupportsCodec = function muxerSupportsCodec(codecString) {
+    if (codecString === void 0) {
+      codecString = '';
+    }
+    return codecString.toLowerCase().split(',').every(function (codec) {
+      codec = codec.trim(); // any match is supported.
+
+      for (var i = 0; i < upperMediaTypes.length; i++) {
+        var type = upperMediaTypes[i];
+        if (regexs["muxer" + type].test(codec)) {
+          return true;
+        }
+      }
+      return false;
+    });
+  };
+  var DEFAULT_AUDIO_CODEC = 'mp4a.40.2';
+  var DEFAULT_VIDEO_CODEC = 'avc1.4d400d';
+
+  var MPEGURL_REGEX = /^(audio|video|application)\/(x-|vnd\.apple\.)?mpegurl/i;
+  var DASH_REGEX = /^application\/dash\+xml/i;
+  /**
+   * Returns a string that describes the type of source based on a video source object's
+   * media type.
+   *
+   * @see {@link https://dev.w3.org/html5/pf-summary/video.html#dom-source-type|Source Type}
+   *
+   * @param {string} type
+   *        Video source object media type
+   * @return {('hls'|'dash'|'vhs-json'|null)}
+   *         VHS source type string
+   */
+
+  var simpleTypeFromSourceType = function simpleTypeFromSourceType(type) {
+    if (MPEGURL_REGEX.test(type)) {
+      return 'hls';
+    }
+    if (DASH_REGEX.test(type)) {
+      return 'dash';
+    } // Denotes the special case of a manifest object passed to http-streaming instead of a
+    // source URL.
+    //
+    // See https://en.wikipedia.org/wiki/Media_type for details on specifying media types.
+    //
+    // In this case, vnd stands for vendor, video.js for the organization, VHS for this
+    // project, and the +json suffix identifies the structure of the media type.
+
+    if (type === 'application/vnd.videojs.vhs+json') {
+      return 'vhs-json';
+    }
+    return null;
+  };
+
+  // const log2 = Math.log2 ? Math.log2 : (x) => (Math.log(x) / Math.log(2));
+  // we used to do this with log2 but BigInt does not support builtin math
+  // Math.ceil(log2(x));
+
+  var countBits = function countBits(x) {
+    return x.toString(2).length;
+  }; // count the number of whole bytes it would take to represent a number
+
+  var countBytes = function countBytes(x) {
+    return Math.ceil(countBits(x) / 8);
+  };
+  var isArrayBufferView = function isArrayBufferView(obj) {
+    if (ArrayBuffer.isView === 'function') {
+      return ArrayBuffer.isView(obj);
+    }
+    return obj && obj.buffer instanceof ArrayBuffer;
+  };
+  var isTypedArray = function isTypedArray(obj) {
+    return isArrayBufferView(obj);
+  };
+  var toUint8 = function toUint8(bytes) {
+    if (bytes instanceof Uint8Array) {
+      return bytes;
+    }
+    if (!Array.isArray(bytes) && !isTypedArray(bytes) && !(bytes instanceof ArrayBuffer)) {
+      // any non-number or NaN leads to empty uint8array
+      // eslint-disable-next-line
+      if (typeof bytes !== 'number' || typeof bytes === 'number' && bytes !== bytes) {
+        bytes = 0;
+      } else {
+        bytes = [bytes];
+      }
+    }
+    return new Uint8Array(bytes && bytes.buffer || bytes, bytes && bytes.byteOffset || 0, bytes && bytes.byteLength || 0);
+  };
+  var BigInt = window.BigInt || Number;
+  var BYTE_TABLE = [BigInt('0x1'), BigInt('0x100'), BigInt('0x10000'), BigInt('0x1000000'), BigInt('0x100000000'), BigInt('0x10000000000'), BigInt('0x1000000000000'), BigInt('0x100000000000000'), BigInt('0x10000000000000000')];
+  (function () {
+    var a = new Uint16Array([0xFFCC]);
+    var b = new Uint8Array(a.buffer, a.byteOffset, a.byteLength);
+    if (b[0] === 0xFF) {
+      return 'big';
+    }
+    if (b[0] === 0xCC) {
+      return 'little';
+    }
+    return 'unknown';
+  })();
+  var bytesToNumber = function bytesToNumber(bytes, _temp) {
+    var _ref = _temp === void 0 ? {} : _temp,
+      _ref$signed = _ref.signed,
+      signed = _ref$signed === void 0 ? false : _ref$signed,
+      _ref$le = _ref.le,
+      le = _ref$le === void 0 ? false : _ref$le;
+    bytes = toUint8(bytes);
+    var fn = le ? 'reduce' : 'reduceRight';
+    var obj = bytes[fn] ? bytes[fn] : Array.prototype[fn];
+    var number = obj.call(bytes, function (total, byte, i) {
+      var exponent = le ? i : Math.abs(i + 1 - bytes.length);
+      return total + BigInt(byte) * BYTE_TABLE[exponent];
+    }, BigInt(0));
+    if (signed) {
+      var max = BYTE_TABLE[bytes.length] / BigInt(2) - BigInt(1);
+      number = BigInt(number);
+      if (number > max) {
+        number -= max;
+        number -= max;
+        number -= BigInt(2);
+      }
+    }
+    return Number(number);
+  };
+  var numberToBytes = function numberToBytes(number, _temp2) {
+    var _ref2 = _temp2 === void 0 ? {} : _temp2,
+      _ref2$le = _ref2.le,
+      le = _ref2$le === void 0 ? false : _ref2$le;
+
+    // eslint-disable-next-line
+    if (typeof number !== 'bigint' && typeof number !== 'number' || typeof number === 'number' && number !== number) {
+      number = 0;
+    }
+    number = BigInt(number);
+    var byteCount = countBytes(number);
+    var bytes = new Uint8Array(new ArrayBuffer(byteCount));
+    for (var i = 0; i < byteCount; i++) {
+      var byteIndex = le ? i : Math.abs(i + 1 - bytes.length);
+      bytes[byteIndex] = Number(number / BYTE_TABLE[i] & BigInt(0xFF));
+      if (number < 0) {
+        bytes[byteIndex] = Math.abs(~bytes[byteIndex]);
+        bytes[byteIndex] -= i === 0 ? 1 : 2;
+      }
+    }
+    return bytes;
+  };
+  var stringToBytes = function stringToBytes(string, stringIsBytes) {
+    if (typeof string !== 'string' && string && typeof string.toString === 'function') {
+      string = string.toString();
+    }
+    if (typeof string !== 'string') {
+      return new Uint8Array();
+    } // If the string already is bytes, we don't have to do this
+    // otherwise we do this so that we split multi length characters
+    // into individual bytes
+
+    if (!stringIsBytes) {
+      string = unescape(encodeURIComponent(string));
+    }
+    var view = new Uint8Array(string.length);
+    for (var i = 0; i < string.length; i++) {
+      view[i] = string.charCodeAt(i);
+    }
+    return view;
+  };
+  var concatTypedArrays = function concatTypedArrays() {
+    for (var _len = arguments.length, buffers = new Array(_len), _key = 0; _key < _len; _key++) {
+      buffers[_key] = arguments[_key];
+    }
+    buffers = buffers.filter(function (b) {
+      return b && (b.byteLength || b.length) && typeof b !== 'string';
+    });
+    if (buffers.length <= 1) {
+      // for 0 length we will return empty uint8
+      // for 1 length we return the first uint8
+      return toUint8(buffers[0]);
+    }
+    var totalLen = buffers.reduce(function (total, buf, i) {
+      return total + (buf.byteLength || buf.length);
+    }, 0);
+    var tempBuffer = new Uint8Array(totalLen);
+    var offset = 0;
+    buffers.forEach(function (buf) {
+      buf = toUint8(buf);
+      tempBuffer.set(buf, offset);
+      offset += buf.byteLength;
+    });
+    return tempBuffer;
+  };
+  /**
+   * Check if the bytes "b" are contained within bytes "a".
+   *
+   * @param {Uint8Array|Array} a
+   *        Bytes to check in
+   *
+   * @param {Uint8Array|Array} b
+   *        Bytes to check for
+   *
+   * @param {Object} options
+   *        options
+   *
+   * @param {Array|Uint8Array} [offset=0]
+   *        offset to use when looking at bytes in a
+   *
+   * @param {Array|Uint8Array} [mask=[]]
+   *        mask to use on bytes before comparison.
+   *
+   * @return {boolean}
+   *         If all bytes in b are inside of a, taking into account
+   *         bit masks.
+   */
+
+  var bytesMatch = function bytesMatch(a, b, _temp3) {
+    var _ref3 = _temp3 === void 0 ? {} : _temp3,
+      _ref3$offset = _ref3.offset,
+      offset = _ref3$offset === void 0 ? 0 : _ref3$offset,
+      _ref3$mask = _ref3.mask,
+      mask = _ref3$mask === void 0 ? [] : _ref3$mask;
+    a = toUint8(a);
+    b = toUint8(b); // ie 11 does not support uint8 every
+
+    var fn = b.every ? b.every : Array.prototype.every;
+    return b.length && a.length - offset >= b.length &&
+    // ie 11 doesn't support every on uin8
+    fn.call(b, function (bByte, i) {
+      var aByte = mask[i] ? mask[i] & a[offset + i] : a[offset + i];
+      return bByte === aByte;
+    });
+  };
+
+  /**
+   * Loops through all supported media groups in master and calls the provided
+   * callback for each group
+   *
+   * @param {Object} master
+   *        The parsed master manifest object
+   * @param {string[]} groups
+   *        The media groups to call the callback for
+   * @param {Function} callback
+   *        Callback to call for each media group
+   */
+  var forEachMediaGroup$1 = function forEachMediaGroup(master, groups, callback) {
+    groups.forEach(function (mediaType) {
+      for (var groupKey in master.mediaGroups[mediaType]) {
+        for (var labelKey in master.mediaGroups[mediaType][groupKey]) {
+          var mediaProperties = master.mediaGroups[mediaType][groupKey][labelKey];
+          callback(mediaProperties, mediaType, groupKey, labelKey);
+        }
+      }
+    });
+  };
+
+  var atob = function atob(s) {
+    return window.atob ? window.atob(s) : Buffer.from(s, 'base64').toString('binary');
+  };
+  function decodeB64ToUint8Array(b64Text) {
+    var decodedString = atob(b64Text);
+    var array = new Uint8Array(decodedString.length);
+    for (var i = 0; i < decodedString.length; i++) {
+      array[i] = decodedString.charCodeAt(i);
+    }
+    return array;
+  }
+
+  /**
+   * Ponyfill for `Array.prototype.find` which is only available in ES6 runtimes.
+   *
+   * Works with anything that has a `length` property and index access properties, including NodeList.
+   *
+   * @template {unknown} T
+   * @param {Array<T> | ({length:number, [number]: T})} list
+   * @param {function (item: T, index: number, list:Array<T> | ({length:number, [number]: T})):boolean} predicate
+   * @param {Partial<Pick<ArrayConstructor['prototype'], 'find'>>?} ac `Array.prototype` by default,
+   * 				allows injecting a custom implementation in tests
+   * @returns {T | undefined}
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
+   * @see https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.find
+   */
+  function find$1(list, predicate, ac) {
+    if (ac === undefined) {
+      ac = Array.prototype;
+    }
+    if (list && typeof ac.find === 'function') {
+      return ac.find.call(list, predicate);
+    }
+    for (var i = 0; i < list.length; i++) {
+      if (Object.prototype.hasOwnProperty.call(list, i)) {
+        var item = list[i];
+        if (predicate.call(undefined, item, i, list)) {
+          return item;
+        }
+      }
+    }
+  }
+
+  /**
+   * "Shallow freezes" an object to render it immutable.
+   * Uses `Object.freeze` if available,
+   * otherwise the immutability is only in the type.
+   *
+   * Is used to create "enum like" objects.
+   *
+   * @template T
+   * @param {T} object the object to freeze
+   * @param {Pick<ObjectConstructor, 'freeze'> = Object} oc `Object` by default,
+   * 				allows to inject custom object constructor for tests
+   * @returns {Readonly<T>}
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
+   */
+  function freeze(object, oc) {
+    if (oc === undefined) {
+      oc = Object;
+    }
+    return oc && typeof oc.freeze === 'function' ? oc.freeze(object) : object;
+  }
+
+  /**
+   * Since we can not rely on `Object.assign` we provide a simplified version
+   * that is sufficient for our needs.
+   *
+   * @param {Object} target
+   * @param {Object | null | undefined} source
+   *
+   * @returns {Object} target
+   * @throws TypeError if target is not an object
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+   * @see https://tc39.es/ecma262/multipage/fundamental-objects.html#sec-object.assign
+   */
+  function assign(target, source) {
+    if (target === null || typeof target !== 'object') {
+      throw new TypeError('target is not an object');
+    }
+    for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+
+  /**
+   * All mime types that are allowed as input to `DOMParser.parseFromString`
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString#Argument02 MDN
+   * @see https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#domparsersupportedtype WHATWG HTML Spec
+   * @see DOMParser.prototype.parseFromString
+   */
+  var MIME_TYPE = freeze({
+    /**
+     * `text/html`, the only mime type that triggers treating an XML document as HTML.
+     *
+     * @see DOMParser.SupportedType.isHTML
+     * @see https://www.iana.org/assignments/media-types/text/html IANA MimeType registration
+     * @see https://en.wikipedia.org/wiki/HTML Wikipedia
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString MDN
+     * @see https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#dom-domparser-parsefromstring WHATWG HTML Spec
+     */
+    HTML: 'text/html',
+    /**
+     * Helper method to check a mime type if it indicates an HTML document
+     *
+     * @param {string} [value]
+     * @returns {boolean}
+     *
+     * @see https://www.iana.org/assignments/media-types/text/html IANA MimeType registration
+     * @see https://en.wikipedia.org/wiki/HTML Wikipedia
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString MDN
+     * @see https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#dom-domparser-parsefromstring 	 */
+    isHTML: function (value) {
+      return value === MIME_TYPE.HTML;
+    },
+    /**
+     * `application/xml`, the standard mime type for XML documents.
+     *
+     * @see https://www.iana.org/assignments/media-types/application/xml IANA MimeType registration
+     * @see https://tools.ietf.org/html/rfc7303#section-9.1 RFC 7303
+     * @see https://en.wikipedia.org/wiki/XML_and_MIME Wikipedia
+     */
+    XML_APPLICATION: 'application/xml',
+    /**
+     * `text/html`, an alias for `application/xml`.
+     *
+     * @see https://tools.ietf.org/html/rfc7303#section-9.2 RFC 7303
+     * @see https://www.iana.org/assignments/media-types/text/xml IANA MimeType registration
+     * @see https://en.wikipedia.org/wiki/XML_and_MIME Wikipedia
+     */
+    XML_TEXT: 'text/xml',
+    /**
+     * `application/xhtml+xml`, indicates an XML document that has the default HTML namespace,
+     * but is parsed as an XML document.
+     *
+     * @see https://www.iana.org/assignments/media-types/application/xhtml+xml IANA MimeType registration
+     * @see https://dom.spec.whatwg.org/#dom-domimplementation-createdocument WHATWG DOM Spec
+     * @see https://en.wikipedia.org/wiki/XHTML Wikipedia
+     */
+    XML_XHTML_APPLICATION: 'application/xhtml+xml',
+    /**
+     * `image/svg+xml`,
+     *
+     * @see https://www.iana.org/assignments/media-types/image/svg+xml IANA MimeType registration
+     * @see https://www.w3.org/TR/SVG11/ W3C SVG 1.1
+     * @see https://en.wikipedia.org/wiki/Scalable_Vector_Graphics Wikipedia
+     */
+    XML_SVG_IMAGE: 'image/svg+xml'
+  });
+
+  /**
+   * Namespaces that are used in this code base.
+   *
+   * @see http://www.w3.org/TR/REC-xml-names
+   */
+  var NAMESPACE$3 = freeze({
+    /**
+     * The XHTML namespace.
+     *
+     * @see http://www.w3.org/1999/xhtml
+     */
+    HTML: 'http://www.w3.org/1999/xhtml',
+    /**
+     * Checks if `uri` equals `NAMESPACE.HTML`.
+     *
+     * @param {string} [uri]
+     *
+     * @see NAMESPACE.HTML
+     */
+    isHTML: function (uri) {
+      return uri === NAMESPACE$3.HTML;
+    },
+    /**
+     * The SVG namespace.
+     *
+     * @see http://www.w3.org/2000/svg
+     */
+    SVG: 'http://www.w3.org/2000/svg',
+    /**
+     * The `xml:` namespace.
+     *
+     * @see http://www.w3.org/XML/1998/namespace
+     */
+    XML: 'http://www.w3.org/XML/1998/namespace',
+    /**
+     * The `xmlns:` namespace
+     *
+     * @see https://www.w3.org/2000/xmlns/
+     */
+    XMLNS: 'http://www.w3.org/2000/xmlns/'
+  });
+  var assign_1 = assign;
+  var find_1 = find$1;
+  var freeze_1 = freeze;
+  var MIME_TYPE_1 = MIME_TYPE;
+  var NAMESPACE_1 = NAMESPACE$3;
+  var conventions = {
+    assign: assign_1,
+    find: find_1,
+    freeze: freeze_1,
+    MIME_TYPE: MIME_TYPE_1,
+    NAMESPACE: NAMESPACE_1
+  };
+
+  var find = conventions.find;
+  var NAMESPACE$2 = conventions.NAMESPACE;
+
+  /**
+   * A prerequisite for `[].filter`, to drop elements that are empty
+   * @param {string} input
+   * @returns {boolean}
+   */
+  function notEmptyString(input) {
+    return input !== '';
+  }
+  /**
+   * @see https://infra.spec.whatwg.org/#split-on-ascii-whitespace
+   * @see https://infra.spec.whatwg.org/#ascii-whitespace
+   *
+   * @param {string} input
+   * @returns {string[]} (can be empty)
+   */
+  function splitOnASCIIWhitespace(input) {
+    // U+0009 TAB, U+000A LF, U+000C FF, U+000D CR, U+0020 SPACE
+    return input ? input.split(/[\t\n\f\r ]+/).filter(notEmptyString) : [];
+  }
+
+  /**
+   * Adds element as a key to current if it is not already present.
+   *
+   * @param {Record<string, boolean | undefined>} current
+   * @param {string} element
+   * @returns {Record<string, boolean | undefined>}
+   */
+  function orderedSetReducer(current, element) {
+    if (!current.hasOwnProperty(element)) {
+      current[element] = true;
+    }
+    return current;
+  }
+
+  /**
+   * @see https://infra.spec.whatwg.org/#ordered-set
+   * @param {string} input
+   * @returns {string[]}
+   */
+  function toOrderedSet(input) {
+    if (!input) return [];
+    var list = splitOnASCIIWhitespace(input);
+    return Object.keys(list.reduce(orderedSetReducer, {}));
+  }
+
+  /**
+   * Uses `list.indexOf` to implement something like `Array.prototype.includes`,
+   * which we can not rely on being available.
+   *
+   * @param {any[]} list
+   * @returns {function(any): boolean}
+   */
+  function arrayIncludes(list) {
+    return function (element) {
+      return list && list.indexOf(element) !== -1;
+    };
+  }
+  function copy(src, dest) {
+    for (var p in src) {
+      if (Object.prototype.hasOwnProperty.call(src, p)) {
+        dest[p] = src[p];
+      }
+    }
+  }
+
+  /**
+  ^\w+\.prototype\.([_\w]+)\s*=\s*((?:.*\{\s*?[\r\n][\s\S]*?^})|\S.*?(?=[;\r\n]));?
+  ^\w+\.prototype\.([_\w]+)\s*=\s*(\S.*?(?=[;\r\n]));?
+   */
+  function _extends(Class, Super) {
+    var pt = Class.prototype;
+    if (!(pt instanceof Super)) {
+      function t() {}
+      t.prototype = Super.prototype;
+      t = new t();
+      copy(pt, t);
+      Class.prototype = pt = t;
+    }
+    if (pt.constructor != Class) {
+      if (typeof Class != 'function') {
+        console.error("unknown Class:" + Class);
+      }
+      pt.constructor = Class;
+    }
+  }
+
+  // Node Types
+  var NodeType = {};
+  var ELEMENT_NODE = NodeType.ELEMENT_NODE = 1;
+  var ATTRIBUTE_NODE = NodeType.ATTRIBUTE_NODE = 2;
+  var TEXT_NODE = NodeType.TEXT_NODE = 3;
+  var CDATA_SECTION_NODE = NodeType.CDATA_SECTION_NODE = 4;
+  var ENTITY_REFERENCE_NODE = NodeType.ENTITY_REFERENCE_NODE = 5;
+  var ENTITY_NODE = NodeType.ENTITY_NODE = 6;
+  var PROCESSING_INSTRUCTION_NODE = NodeType.PROCESSING_INSTRUCTION_NODE = 7;
+  var COMMENT_NODE = NodeType.COMMENT_NODE = 8;
+  var DOCUMENT_NODE = NodeType.DOCUMENT_NODE = 9;
+  var DOCUMENT_TYPE_NODE = NodeType.DOCUMENT_TYPE_NODE = 10;
+  var DOCUMENT_FRAGMENT_NODE = NodeType.DOCUMENT_FRAGMENT_NODE = 11;
+  var NOTATION_NODE = NodeType.NOTATION_NODE = 12;
+
+  // ExceptionCode
+  var ExceptionCode = {};
+  var ExceptionMessage = {};
+  ExceptionCode.INDEX_SIZE_ERR = (ExceptionMessage[1] = "Index size error", 1);
+  ExceptionCode.DOMSTRING_SIZE_ERR = (ExceptionMessage[2] = "DOMString size error", 2);
+  var HIERARCHY_REQUEST_ERR = ExceptionCode.HIERARCHY_REQUEST_ERR = (ExceptionMessage[3] = "Hierarchy request error", 3);
+  ExceptionCode.WRONG_DOCUMENT_ERR = (ExceptionMessage[4] = "Wrong document", 4);
+  ExceptionCode.INVALID_CHARACTER_ERR = (ExceptionMessage[5] = "Invalid character", 5);
+  ExceptionCode.NO_DATA_ALLOWED_ERR = (ExceptionMessage[6] = "No data allowed", 6);
+  ExceptionCode.NO_MODIFICATION_ALLOWED_ERR = (ExceptionMessage[7] = "No modification allowed", 7);
+  var NOT_FOUND_ERR = ExceptionCode.NOT_FOUND_ERR = (ExceptionMessage[8] = "Not found", 8);
+  ExceptionCode.NOT_SUPPORTED_ERR = (ExceptionMessage[9] = "Not supported", 9);
+  var INUSE_ATTRIBUTE_ERR = ExceptionCode.INUSE_ATTRIBUTE_ERR = (ExceptionMessage[10] = "Attribute in use", 10);
+  //level2
+  ExceptionCode.INVALID_STATE_ERR = (ExceptionMessage[11] = "Invalid state", 11);
+  ExceptionCode.SYNTAX_ERR = (ExceptionMessage[12] = "Syntax error", 12);
+  ExceptionCode.INVALID_MODIFICATION_ERR = (ExceptionMessage[13] = "Invalid modification", 13);
+  ExceptionCode.NAMESPACE_ERR = (ExceptionMessage[14] = "Invalid namespace", 14);
+  ExceptionCode.INVALID_ACCESS_ERR = (ExceptionMessage[15] = "Invalid access", 15);
+
+  /**
+   * DOM Level 2
+   * Object DOMException
+   * @see http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/ecma-script-binding.html
+   * @see http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html
+   */
+  function DOMException(code, message) {
+    if (message instanceof Error) {
+      var error = message;
+    } else {
+      error = this;
+      Error.call(this, ExceptionMessage[code]);
+      this.message = ExceptionMessage[code];
+      if (Error.captureStackTrace) Error.captureStackTrace(this, DOMException);
+    }
+    error.code = code;
+    if (message) this.message = this.message + ": " + message;
+    return error;
+  }
+  DOMException.prototype = Error.prototype;
+  copy(ExceptionCode, DOMException);
+
+  /**
+   * @see http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-536297177
+   * The NodeList interface provides the abstraction of an ordered collection of nodes, without defining or constraining how this collection is implemented. NodeList objects in the DOM are live.
+   * The items in the NodeList are accessible via an integral index, starting from 0.
+   */
+  function NodeList() {}
+  NodeList.prototype = {
+    /**
+     * The number of nodes in the list. The range of valid child node indices is 0 to length-1 inclusive.
+     * @standard level1
+     */
+    length: 0,
+    /**
+     * Returns the indexth item in the collection. If index is greater than or equal to the number of nodes in the list, this returns null.
+     * @standard level1
+     * @param index  unsigned long
+     *   Index into the collection.
+     * @return Node
+     * 	The node at the indexth position in the NodeList, or null if that is not a valid index.
+     */
+    item: function (index) {
+      return index >= 0 && index < this.length ? this[index] : null;
+    },
+    toString: function (isHTML, nodeFilter) {
+      for (var buf = [], i = 0; i < this.length; i++) {
+        serializeToString(this[i], buf, isHTML, nodeFilter);
+      }
+      return buf.join('');
+    },
+    /**
+     * @private
+     * @param {function (Node):boolean} predicate
+     * @returns {Node[]}
+     */
+    filter: function (predicate) {
+      return Array.prototype.filter.call(this, predicate);
+    },
+    /**
+     * @private
+     * @param {Node} item
+     * @returns {number}
+     */
+    indexOf: function (item) {
+      return Array.prototype.indexOf.call(this, item);
+    }
+  };
+  function LiveNodeList(node, refresh) {
+    this._node = node;
+    this._refresh = refresh;
+    _updateLiveList(this);
+  }
+  function _updateLiveList(list) {
+    var inc = list._node._inc || list._node.ownerDocument._inc;
+    if (list._inc !== inc) {
+      var ls = list._refresh(list._node);
+      __set__(list, 'length', ls.length);
+      if (!list.$$length || ls.length < list.$$length) {
+        for (var i = ls.length; (i in list); i++) {
+          if (Object.prototype.hasOwnProperty.call(list, i)) {
+            delete list[i];
+          }
+        }
+      }
+      copy(ls, list);
+      list._inc = inc;
+    }
+  }
+  LiveNodeList.prototype.item = function (i) {
+    _updateLiveList(this);
+    return this[i] || null;
+  };
+  _extends(LiveNodeList, NodeList);
+
+  /**
+   * Objects implementing the NamedNodeMap interface are used
+   * to represent collections of nodes that can be accessed by name.
+   * Note that NamedNodeMap does not inherit from NodeList;
+   * NamedNodeMaps are not maintained in any particular order.
+   * Objects contained in an object implementing NamedNodeMap may also be accessed by an ordinal index,
+   * but this is simply to allow convenient enumeration of the contents of a NamedNodeMap,
+   * and does not imply that the DOM specifies an order to these Nodes.
+   * NamedNodeMap objects in the DOM are live.
+   * used for attributes or DocumentType entities
+   */
+  function NamedNodeMap() {}
+  function _findNodeIndex(list, node) {
+    var i = list.length;
+    while (i--) {
+      if (list[i] === node) {
+        return i;
+      }
+    }
+  }
+  function _addNamedNode(el, list, newAttr, oldAttr) {
+    if (oldAttr) {
+      list[_findNodeIndex(list, oldAttr)] = newAttr;
+    } else {
+      list[list.length++] = newAttr;
+    }
+    if (el) {
+      newAttr.ownerElement = el;
+      var doc = el.ownerDocument;
+      if (doc) {
+        oldAttr && _onRemoveAttribute(doc, el, oldAttr);
+        _onAddAttribute(doc, el, newAttr);
+      }
+    }
+  }
+  function _removeNamedNode(el, list, attr) {
+    //console.log('remove attr:'+attr)
+    var i = _findNodeIndex(list, attr);
+    if (i >= 0) {
+      var lastIndex = list.length - 1;
+      while (i < lastIndex) {
+        list[i] = list[++i];
+      }
+      list.length = lastIndex;
+      if (el) {
+        var doc = el.ownerDocument;
+        if (doc) {
+          _onRemoveAttribute(doc, el, attr);
+          attr.ownerElement = null;
+        }
+      }
+    } else {
+      throw new DOMException(NOT_FOUND_ERR, new Error(el.tagName + '@' + attr));
+    }
+  }
+  NamedNodeMap.prototype = {
+    length: 0,
+    item: NodeList.prototype.item,
+    getNamedItem: function (key) {
+      //		if(key.indexOf(':')>0 || key == 'xmlns'){
+      //			return null;
+      //		}
+      //console.log()
+      var i = this.length;
+      while (i--) {
+        var attr = this[i];
+        //console.log(attr.nodeName,key)
+        if (attr.nodeName == key) {
+          return attr;
+        }
+      }
+    },
+    setNamedItem: function (attr) {
+      var el = attr.ownerElement;
+      if (el && el != this._ownerElement) {
+        throw new DOMException(INUSE_ATTRIBUTE_ERR);
+      }
+      var oldAttr = this.getNamedItem(attr.nodeName);
+      _addNamedNode(this._ownerElement, this, attr, oldAttr);
+      return oldAttr;
+    },
+    /* returns Node */
+    setNamedItemNS: function (attr) {
+      // raises: WRONG_DOCUMENT_ERR,NO_MODIFICATION_ALLOWED_ERR,INUSE_ATTRIBUTE_ERR
+      var el = attr.ownerElement,
+        oldAttr;
+      if (el && el != this._ownerElement) {
+        throw new DOMException(INUSE_ATTRIBUTE_ERR);
+      }
+      oldAttr = this.getNamedItemNS(attr.namespaceURI, attr.localName);
+      _addNamedNode(this._ownerElement, this, attr, oldAttr);
+      return oldAttr;
+    },
+    /* returns Node */
+    removeNamedItem: function (key) {
+      var attr = this.getNamedItem(key);
+      _removeNamedNode(this._ownerElement, this, attr);
+      return attr;
+    },
+    // raises: NOT_FOUND_ERR,NO_MODIFICATION_ALLOWED_ERR
+
+    //for level2
+    removeNamedItemNS: function (namespaceURI, localName) {
+      var attr = this.getNamedItemNS(namespaceURI, localName);
+      _removeNamedNode(this._ownerElement, this, attr);
+      return attr;
+    },
+    getNamedItemNS: function (namespaceURI, localName) {
+      var i = this.length;
+      while (i--) {
+        var node = this[i];
+        if (node.localName == localName && node.namespaceURI == namespaceURI) {
+          return node;
+        }
+      }
+      return null;
+    }
+  };
+
+  /**
+   * The DOMImplementation interface represents an object providing methods
+   * which are not dependent on any particular document.
+   * Such an object is returned by the `Document.implementation` property.
+   *
+   * __The individual methods describe the differences compared to the specs.__
+   *
+   * @constructor
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation MDN
+   * @see https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-102161490 DOM Level 1 Core (Initial)
+   * @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490 DOM Level 2 Core
+   * @see https://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-102161490 DOM Level 3 Core
+   * @see https://dom.spec.whatwg.org/#domimplementation DOM Living Standard
+   */
+  function DOMImplementation$1() {}
+  DOMImplementation$1.prototype = {
+    /**
+     * The DOMImplementation.hasFeature() method returns a Boolean flag indicating if a given feature is supported.
+     * The different implementations fairly diverged in what kind of features were reported.
+     * The latest version of the spec settled to force this method to always return true, where the functionality was accurate and in use.
+     *
+     * @deprecated It is deprecated and modern browsers return true in all cases.
+     *
+     * @param {string} feature
+     * @param {string} [version]
+     * @returns {boolean} always true
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/hasFeature MDN
+     * @see https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-5CED94D7 DOM Level 1 Core
+     * @see https://dom.spec.whatwg.org/#dom-domimplementation-hasfeature DOM Living Standard
+     */
+    hasFeature: function (feature, version) {
+      return true;
+    },
+    /**
+     * Creates an XML Document object of the specified type with its document element.
+     *
+     * __It behaves slightly different from the description in the living standard__:
+     * - There is no interface/class `XMLDocument`, it returns a `Document` instance.
+     * - `contentType`, `encoding`, `mode`, `origin`, `url` fields are currently not declared.
+     * - this implementation is not validating names or qualified names
+     *   (when parsing XML strings, the SAX parser takes care of that)
+     *
+     * @param {string|null} namespaceURI
+     * @param {string} qualifiedName
+     * @param {DocumentType=null} doctype
+     * @returns {Document}
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createDocument MDN
+     * @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#Level-2-Core-DOM-createDocument DOM Level 2 Core (initial)
+     * @see https://dom.spec.whatwg.org/#dom-domimplementation-createdocument  DOM Level 2 Core
+     *
+     * @see https://dom.spec.whatwg.org/#validate-and-extract DOM: Validate and extract
+     * @see https://www.w3.org/TR/xml/#NT-NameStartChar XML Spec: Names
+     * @see https://www.w3.org/TR/xml-names/#ns-qualnames XML Namespaces: Qualified names
+     */
+    createDocument: function (namespaceURI, qualifiedName, doctype) {
+      var doc = new Document();
+      doc.implementation = this;
+      doc.childNodes = new NodeList();
+      doc.doctype = doctype || null;
+      if (doctype) {
+        doc.appendChild(doctype);
+      }
+      if (qualifiedName) {
+        var root = doc.createElementNS(namespaceURI, qualifiedName);
+        doc.appendChild(root);
+      }
+      return doc;
+    },
+    /**
+     * Returns a doctype, with the given `qualifiedName`, `publicId`, and `systemId`.
+     *
+     * __This behavior is slightly different from the in the specs__:
+     * - this implementation is not validating names or qualified names
+     *   (when parsing XML strings, the SAX parser takes care of that)
+     *
+     * @param {string} qualifiedName
+     * @param {string} [publicId]
+     * @param {string} [systemId]
+     * @returns {DocumentType} which can either be used with `DOMImplementation.createDocument` upon document creation
+     * 				  or can be put into the document via methods like `Node.insertBefore()` or `Node.replaceChild()`
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createDocumentType MDN
+     * @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#Level-2-Core-DOM-createDocType DOM Level 2 Core
+     * @see https://dom.spec.whatwg.org/#dom-domimplementation-createdocumenttype DOM Living Standard
+     *
+     * @see https://dom.spec.whatwg.org/#validate-and-extract DOM: Validate and extract
+     * @see https://www.w3.org/TR/xml/#NT-NameStartChar XML Spec: Names
+     * @see https://www.w3.org/TR/xml-names/#ns-qualnames XML Namespaces: Qualified names
+     */
+    createDocumentType: function (qualifiedName, publicId, systemId) {
+      var node = new DocumentType();
+      node.name = qualifiedName;
+      node.nodeName = qualifiedName;
+      node.publicId = publicId || '';
+      node.systemId = systemId || '';
+      return node;
+    }
+  };
+
+  /**
+   * @see http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1950641247
+   */
+
+  function Node() {}
+  Node.prototype = {
+    firstChild: null,
+    lastChild: null,
+    previousSibling: null,
+    nextSibling: null,
+    attributes: null,
+    parentNode: null,
+    childNodes: null,
+    ownerDocument: null,
+    nodeValue: null,
+    namespaceURI: null,
+    prefix: null,
+    localName: null,
+    // Modified in DOM Level 2:
+    insertBefore: function (newChild, refChild) {
+      //raises
+      return _insertBefore(this, newChild, refChild);
+    },
+    replaceChild: function (newChild, oldChild) {
+      //raises
+      _insertBefore(this, newChild, oldChild, assertPreReplacementValidityInDocument);
+      if (oldChild) {
+        this.removeChild(oldChild);
+      }
+    },
+    removeChild: function (oldChild) {
+      return _removeChild(this, oldChild);
+    },
+    appendChild: function (newChild) {
+      return this.insertBefore(newChild, null);
+    },
+    hasChildNodes: function () {
+      return this.firstChild != null;
+    },
+    cloneNode: function (deep) {
+      return cloneNode(this.ownerDocument || this, this, deep);
+    },
+    // Modified in DOM Level 2:
+    normalize: function () {
+      var child = this.firstChild;
+      while (child) {
+        var next = child.nextSibling;
+        if (next && next.nodeType == TEXT_NODE && child.nodeType == TEXT_NODE) {
+          this.removeChild(next);
+          child.appendData(next.data);
+        } else {
+          child.normalize();
+          child = next;
+        }
+      }
+    },
+    // Introduced in DOM Level 2:
+    isSupported: function (feature, version) {
+      return this.ownerDocument.implementation.hasFeature(feature, version);
+    },
+    // Introduced in DOM Level 2:
+    hasAttributes: function () {
+      return this.attributes.length > 0;
+    },
+    /**
+     * Look up the prefix associated to the given namespace URI, starting from this node.
+     * **The default namespace declarations are ignored by this method.**
+     * See Namespace Prefix Lookup for details on the algorithm used by this method.
+     *
+     * _Note: The implementation seems to be incomplete when compared to the algorithm described in the specs._
+     *
+     * @param {string | null} namespaceURI
+     * @returns {string | null}
+     * @see https://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix
+     * @see https://www.w3.org/TR/DOM-Level-3-Core/namespaces-algorithms.html#lookupNamespacePrefixAlgo
+     * @see https://dom.spec.whatwg.org/#dom-node-lookupprefix
+     * @see https://github.com/xmldom/xmldom/issues/322
+     */
+    lookupPrefix: function (namespaceURI) {
+      var el = this;
+      while (el) {
+        var map = el._nsMap;
+        //console.dir(map)
+        if (map) {
+          for (var n in map) {
+            if (Object.prototype.hasOwnProperty.call(map, n) && map[n] === namespaceURI) {
+              return n;
+            }
+          }
+        }
+        el = el.nodeType == ATTRIBUTE_NODE ? el.ownerDocument : el.parentNode;
+      }
+      return null;
+    },
+    // Introduced in DOM Level 3:
+    lookupNamespaceURI: function (prefix) {
+      var el = this;
+      while (el) {
+        var map = el._nsMap;
+        //console.dir(map)
+        if (map) {
+          if (Object.prototype.hasOwnProperty.call(map, prefix)) {
+            return map[prefix];
+          }
+        }
+        el = el.nodeType == ATTRIBUTE_NODE ? el.ownerDocument : el.parentNode;
+      }
+      return null;
+    },
+    // Introduced in DOM Level 3:
+    isDefaultNamespace: function (namespaceURI) {
+      var prefix = this.lookupPrefix(namespaceURI);
+      return prefix == null;
+    }
+  };
+  function _xmlEncoder(c) {
+    return c == '<' && '&lt;' || c == '>' && '&gt;' || c == '&' && '&amp;' || c == '"' && '&quot;' || '&#' + c.charCodeAt() + ';';
+  }
+  copy(NodeType, Node);
+  copy(NodeType, Node.prototype);
+
+  /**
+   * @param callback return true for continue,false for break
+   * @return boolean true: break visit;
+   */
+  function _visitNode(node, callback) {
+    if (callback(node)) {
+      return true;
+    }
+    if (node = node.firstChild) {
+      do {
+        if (_visitNode(node, callback)) {
+          return true;
+        }
+      } while (node = node.nextSibling);
+    }
+  }
+  function Document() {
+    this.ownerDocument = this;
+  }
+  function _onAddAttribute(doc, el, newAttr) {
+    doc && doc._inc++;
+    var ns = newAttr.namespaceURI;
+    if (ns === NAMESPACE$2.XMLNS) {
+      //update namespace
+      el._nsMap[newAttr.prefix ? newAttr.localName : ''] = newAttr.value;
+    }
+  }
+  function _onRemoveAttribute(doc, el, newAttr, remove) {
+    doc && doc._inc++;
+    var ns = newAttr.namespaceURI;
+    if (ns === NAMESPACE$2.XMLNS) {
+      //update namespace
+      delete el._nsMap[newAttr.prefix ? newAttr.localName : ''];
+    }
+  }
+
+  /**
+   * Updates `el.childNodes`, updating the indexed items and it's `length`.
+   * Passing `newChild` means it will be appended.
+   * Otherwise it's assumed that an item has been removed,
+   * and `el.firstNode` and it's `.nextSibling` are used
+   * to walk the current list of child nodes.
+   *
+   * @param {Document} doc
+   * @param {Node} el
+   * @param {Node} [newChild]
+   * @private
+   */
+  function _onUpdateChild(doc, el, newChild) {
+    if (doc && doc._inc) {
+      doc._inc++;
+      //update childNodes
+      var cs = el.childNodes;
+      if (newChild) {
+        cs[cs.length++] = newChild;
+      } else {
+        var child = el.firstChild;
+        var i = 0;
+        while (child) {
+          cs[i++] = child;
+          child = child.nextSibling;
+        }
+        cs.length = i;
+        delete cs[cs.length];
+      }
+    }
+  }
+
+  /**
+   * Removes the connections between `parentNode` and `child`
+   * and any existing `child.previousSibling` or `child.nextSibling`.
+   *
+   * @see https://github.com/xmldom/xmldom/issues/135
+   * @see https://github.com/xmldom/xmldom/issues/145
+   *
+   * @param {Node} parentNode
+   * @param {Node} child
+   * @returns {Node} the child that was removed.
+   * @private
+   */
+  function _removeChild(parentNode, child) {
+    var previous = child.previousSibling;
+    var next = child.nextSibling;
+    if (previous) {
+      previous.nextSibling = next;
+    } else {
+      parentNode.firstChild = next;
+    }
+    if (next) {
+      next.previousSibling = previous;
+    } else {
+      parentNode.lastChild = previous;
+    }
+    child.parentNode = null;
+    child.previousSibling = null;
+    child.nextSibling = null;
+    _onUpdateChild(parentNode.ownerDocument, parentNode);
+    return child;
+  }
+
+  /**
+   * Returns `true` if `node` can be a parent for insertion.
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function hasValidParentNodeType(node) {
+    return node && (node.nodeType === Node.DOCUMENT_NODE || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE || node.nodeType === Node.ELEMENT_NODE);
+  }
+
+  /**
+   * Returns `true` if `node` can be inserted according to it's `nodeType`.
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function hasInsertableNodeType(node) {
+    return node && (isElementNode(node) || isTextNode(node) || isDocTypeNode(node) || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE || node.nodeType === Node.COMMENT_NODE || node.nodeType === Node.PROCESSING_INSTRUCTION_NODE);
+  }
+
+  /**
+   * Returns true if `node` is a DOCTYPE node
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function isDocTypeNode(node) {
+    return node && node.nodeType === Node.DOCUMENT_TYPE_NODE;
+  }
+
+  /**
+   * Returns true if the node is an element
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function isElementNode(node) {
+    return node && node.nodeType === Node.ELEMENT_NODE;
+  }
+  /**
+   * Returns true if `node` is a text node
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function isTextNode(node) {
+    return node && node.nodeType === Node.TEXT_NODE;
+  }
+
+  /**
+   * Check if en element node can be inserted before `child`, or at the end if child is falsy,
+   * according to the presence and position of a doctype node on the same level.
+   *
+   * @param {Document} doc The document node
+   * @param {Node} child the node that would become the nextSibling if the element would be inserted
+   * @returns {boolean} `true` if an element can be inserted before child
+   * @private
+   * https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   */
+  function isElementInsertionPossible(doc, child) {
+    var parentChildNodes = doc.childNodes || [];
+    if (find(parentChildNodes, isElementNode) || isDocTypeNode(child)) {
+      return false;
+    }
+    var docTypeNode = find(parentChildNodes, isDocTypeNode);
+    return !(child && docTypeNode && parentChildNodes.indexOf(docTypeNode) > parentChildNodes.indexOf(child));
+  }
+
+  /**
+   * Check if en element node can be inserted before `child`, or at the end if child is falsy,
+   * according to the presence and position of a doctype node on the same level.
+   *
+   * @param {Node} doc The document node
+   * @param {Node} child the node that would become the nextSibling if the element would be inserted
+   * @returns {boolean} `true` if an element can be inserted before child
+   * @private
+   * https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   */
+  function isElementReplacementPossible(doc, child) {
+    var parentChildNodes = doc.childNodes || [];
+    function hasElementChildThatIsNotChild(node) {
+      return isElementNode(node) && node !== child;
+    }
+    if (find(parentChildNodes, hasElementChildThatIsNotChild)) {
+      return false;
+    }
+    var docTypeNode = find(parentChildNodes, isDocTypeNode);
+    return !(child && docTypeNode && parentChildNodes.indexOf(docTypeNode) > parentChildNodes.indexOf(child));
+  }
+
+  /**
+   * @private
+   * Steps 1-5 of the checks before inserting and before replacing a child are the same.
+   *
+   * @param {Node} parent the parent node to insert `node` into
+   * @param {Node} node the node to insert
+   * @param {Node=} child the node that should become the `nextSibling` of `node`
+   * @returns {Node}
+   * @throws DOMException for several node combinations that would create a DOM that is not well-formed.
+   * @throws DOMException if `child` is provided but is not a child of `parent`.
+   * @see https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   * @see https://dom.spec.whatwg.org/#concept-node-replace
+   */
+  function assertPreInsertionValidity1to5(parent, node, child) {
+    // 1. If `parent` is not a Document, DocumentFragment, or Element node, then throw a "HierarchyRequestError" DOMException.
+    if (!hasValidParentNodeType(parent)) {
+      throw new DOMException(HIERARCHY_REQUEST_ERR, 'Unexpected parent node type ' + parent.nodeType);
+    }
+    // 2. If `node` is a host-including inclusive ancestor of `parent`, then throw a "HierarchyRequestError" DOMException.
+    // not implemented!
+    // 3. If `child` is non-null and its parent is not `parent`, then throw a "NotFoundError" DOMException.
+    if (child && child.parentNode !== parent) {
+      throw new DOMException(NOT_FOUND_ERR, 'child not in parent');
+    }
+    if (
+    // 4. If `node` is not a DocumentFragment, DocumentType, Element, or CharacterData node, then throw a "HierarchyRequestError" DOMException.
+    !hasInsertableNodeType(node) ||
+    // 5. If either `node` is a Text node and `parent` is a document,
+    // the sax parser currently adds top level text nodes, this will be fixed in 0.9.0
+    // || (node.nodeType === Node.TEXT_NODE && parent.nodeType === Node.DOCUMENT_NODE)
+    // or `node` is a doctype and `parent` is not a document, then throw a "HierarchyRequestError" DOMException.
+    isDocTypeNode(node) && parent.nodeType !== Node.DOCUMENT_NODE) {
+      throw new DOMException(HIERARCHY_REQUEST_ERR, 'Unexpected node type ' + node.nodeType + ' for parent node type ' + parent.nodeType);
+    }
+  }
+
+  /**
+   * @private
+   * Step 6 of the checks before inserting and before replacing a child are different.
+   *
+   * @param {Document} parent the parent node to insert `node` into
+   * @param {Node} node the node to insert
+   * @param {Node | undefined} child the node that should become the `nextSibling` of `node`
+   * @returns {Node}
+   * @throws DOMException for several node combinations that would create a DOM that is not well-formed.
+   * @throws DOMException if `child` is provided but is not a child of `parent`.
+   * @see https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   * @see https://dom.spec.whatwg.org/#concept-node-replace
+   */
+  function assertPreInsertionValidityInDocument(parent, node, child) {
+    var parentChildNodes = parent.childNodes || [];
+    var nodeChildNodes = node.childNodes || [];
+
+    // DocumentFragment
+    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      var nodeChildElements = nodeChildNodes.filter(isElementNode);
+      // If node has more than one element child or has a Text node child.
+      if (nodeChildElements.length > 1 || find(nodeChildNodes, isTextNode)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'More than one element or text in fragment');
+      }
+      // Otherwise, if `node` has one element child and either `parent` has an element child,
+      // `child` is a doctype, or `child` is non-null and a doctype is following `child`.
+      if (nodeChildElements.length === 1 && !isElementInsertionPossible(parent, child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Element in fragment can not be inserted before doctype');
+      }
+    }
+    // Element
+    if (isElementNode(node)) {
+      // `parent` has an element child, `child` is a doctype,
+      // or `child` is non-null and a doctype is following `child`.
+      if (!isElementInsertionPossible(parent, child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Only one element can be added and only after doctype');
+      }
+    }
+    // DocumentType
+    if (isDocTypeNode(node)) {
+      // `parent` has a doctype child,
+      if (find(parentChildNodes, isDocTypeNode)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Only one doctype is allowed');
+      }
+      var parentElementChild = find(parentChildNodes, isElementNode);
+      // `child` is non-null and an element is preceding `child`,
+      if (child && parentChildNodes.indexOf(parentElementChild) < parentChildNodes.indexOf(child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Doctype can only be inserted before an element');
+      }
+      // or `child` is null and `parent` has an element child.
+      if (!child && parentElementChild) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Doctype can not be appended since element is present');
+      }
+    }
+  }
+
+  /**
+   * @private
+   * Step 6 of the checks before inserting and before replacing a child are different.
+   *
+   * @param {Document} parent the parent node to insert `node` into
+   * @param {Node} node the node to insert
+   * @param {Node | undefined} child the node that should become the `nextSibling` of `node`
+   * @returns {Node}
+   * @throws DOMException for several node combinations that would create a DOM that is not well-formed.
+   * @throws DOMException if `child` is provided but is not a child of `parent`.
+   * @see https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   * @see https://dom.spec.whatwg.org/#concept-node-replace
+   */
+  function assertPreReplacementValidityInDocument(parent, node, child) {
+    var parentChildNodes = parent.childNodes || [];
+    var nodeChildNodes = node.childNodes || [];
+
+    // DocumentFragment
+    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      var nodeChildElements = nodeChildNodes.filter(isElementNode);
+      // If `node` has more than one element child or has a Text node child.
+      if (nodeChildElements.length > 1 || find(nodeChildNodes, isTextNode)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'More than one element or text in fragment');
+      }
+      // Otherwise, if `node` has one element child and either `parent` has an element child that is not `child` or a doctype is following `child`.
+      if (nodeChildElements.length === 1 && !isElementReplacementPossible(parent, child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Element in fragment can not be inserted before doctype');
+      }
+    }
+    // Element
+    if (isElementNode(node)) {
+      // `parent` has an element child that is not `child` or a doctype is following `child`.
+      if (!isElementReplacementPossible(parent, child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Only one element can be added and only after doctype');
+      }
+    }
+    // DocumentType
+    if (isDocTypeNode(node)) {
+      function hasDoctypeChildThatIsNotChild(node) {
+        return isDocTypeNode(node) && node !== child;
+      }
+
+      // `parent` has a doctype child that is not `child`,
+      if (find(parentChildNodes, hasDoctypeChildThatIsNotChild)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Only one doctype is allowed');
+      }
+      var parentElementChild = find(parentChildNodes, isElementNode);
+      // or an element is preceding `child`.
+      if (child && parentChildNodes.indexOf(parentElementChild) < parentChildNodes.indexOf(child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Doctype can only be inserted before an element');
+      }
+    }
+  }
+
+  /**
+   * @private
+   * @param {Node} parent the parent node to insert `node` into
+   * @param {Node} node the node to insert
+   * @param {Node=} child the node that should become the `nextSibling` of `node`
+   * @returns {Node}
+   * @throws DOMException for several node combinations that would create a DOM that is not well-formed.
+   * @throws DOMException if `child` is provided but is not a child of `parent`.
+   * @see https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   */
+  function _insertBefore(parent, node, child, _inDocumentAssertion) {
+    // To ensure pre-insertion validity of a node into a parent before a child, run these steps:
+    assertPreInsertionValidity1to5(parent, node, child);
+
+    // If parent is a document, and any of the statements below, switched on the interface node implements,
+    // are true, then throw a "HierarchyRequestError" DOMException.
+    if (parent.nodeType === Node.DOCUMENT_NODE) {
+      (_inDocumentAssertion || assertPreInsertionValidityInDocument)(parent, node, child);
+    }
+    var cp = node.parentNode;
+    if (cp) {
+      cp.removeChild(node); //remove and update
+    }
+
+    if (node.nodeType === DOCUMENT_FRAGMENT_NODE) {
+      var newFirst = node.firstChild;
+      if (newFirst == null) {
+        return node;
+      }
+      var newLast = node.lastChild;
+    } else {
+      newFirst = newLast = node;
+    }
+    var pre = child ? child.previousSibling : parent.lastChild;
+    newFirst.previousSibling = pre;
+    newLast.nextSibling = child;
+    if (pre) {
+      pre.nextSibling = newFirst;
+    } else {
+      parent.firstChild = newFirst;
+    }
+    if (child == null) {
+      parent.lastChild = newLast;
+    } else {
+      child.previousSibling = newLast;
+    }
+    do {
+      newFirst.parentNode = parent;
+    } while (newFirst !== newLast && (newFirst = newFirst.nextSibling));
+    _onUpdateChild(parent.ownerDocument || parent, parent);
+    //console.log(parent.lastChild.nextSibling == null)
+    if (node.nodeType == DOCUMENT_FRAGMENT_NODE) {
+      node.firstChild = node.lastChild = null;
+    }
+    return node;
+  }
+
+  /**
+   * Appends `newChild` to `parentNode`.
+   * If `newChild` is already connected to a `parentNode` it is first removed from it.
+   *
+   * @see https://github.com/xmldom/xmldom/issues/135
+   * @see https://github.com/xmldom/xmldom/issues/145
+   * @param {Node} parentNode
+   * @param {Node} newChild
+   * @returns {Node}
+   * @private
+   */
+  function _appendSingleChild(parentNode, newChild) {
+    if (newChild.parentNode) {
+      newChild.parentNode.removeChild(newChild);
+    }
+    newChild.parentNode = parentNode;
+    newChild.previousSibling = parentNode.lastChild;
+    newChild.nextSibling = null;
+    if (newChild.previousSibling) {
+      newChild.previousSibling.nextSibling = newChild;
+    } else {
+      parentNode.firstChild = newChild;
+    }
+    parentNode.lastChild = newChild;
+    _onUpdateChild(parentNode.ownerDocument, parentNode, newChild);
+    return newChild;
+  }
+  Document.prototype = {
+    //implementation : null,
+    nodeName: '#document',
+    nodeType: DOCUMENT_NODE,
+    /**
+     * The DocumentType node of the document.
+     *
+     * @readonly
+     * @type DocumentType
+     */
+    doctype: null,
+    documentElement: null,
+    _inc: 1,
+    insertBefore: function (newChild, refChild) {
+      //raises
+      if (newChild.nodeType == DOCUMENT_FRAGMENT_NODE) {
+        var child = newChild.firstChild;
+        while (child) {
+          var next = child.nextSibling;
+          this.insertBefore(child, refChild);
+          child = next;
+        }
+        return newChild;
+      }
+      _insertBefore(this, newChild, refChild);
+      newChild.ownerDocument = this;
+      if (this.documentElement === null && newChild.nodeType === ELEMENT_NODE) {
+        this.documentElement = newChild;
+      }
+      return newChild;
+    },
+    removeChild: function (oldChild) {
+      if (this.documentElement == oldChild) {
+        this.documentElement = null;
+      }
+      return _removeChild(this, oldChild);
+    },
+    replaceChild: function (newChild, oldChild) {
+      //raises
+      _insertBefore(this, newChild, oldChild, assertPreReplacementValidityInDocument);
+      newChild.ownerDocument = this;
+      if (oldChild) {
+        this.removeChild(oldChild);
+      }
+      if (isElementNode(newChild)) {
+        this.documentElement = newChild;
+      }
+    },
+    // Introduced in DOM Level 2:
+    importNode: function (importedNode, deep) {
+      return importNode(this, importedNode, deep);
+    },
+    // Introduced in DOM Level 2:
+    getElementById: function (id) {
+      var rtv = null;
+      _visitNode(this.documentElement, function (node) {
+        if (node.nodeType == ELEMENT_NODE) {
+          if (node.getAttribute('id') == id) {
+            rtv = node;
+            return true;
+          }
+        }
+      });
+      return rtv;
+    },
+    /**
+     * The `getElementsByClassName` method of `Document` interface returns an array-like object
+     * of all child elements which have **all** of the given class name(s).
+     *
+     * Returns an empty list if `classeNames` is an empty string or only contains HTML white space characters.
+     *
+     *
+     * Warning: This is a live LiveNodeList.
+     * Changes in the DOM will reflect in the array as the changes occur.
+     * If an element selected by this array no longer qualifies for the selector,
+     * it will automatically be removed. Be aware of this for iteration purposes.
+     *
+     * @param {string} classNames is a string representing the class name(s) to match; multiple class names are separated by (ASCII-)whitespace
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
+     * @see https://dom.spec.whatwg.org/#concept-getelementsbyclassname
+     */
+    getElementsByClassName: function (classNames) {
+      var classNamesSet = toOrderedSet(classNames);
+      return new LiveNodeList(this, function (base) {
+        var ls = [];
+        if (classNamesSet.length > 0) {
+          _visitNode(base.documentElement, function (node) {
+            if (node !== base && node.nodeType === ELEMENT_NODE) {
+              var nodeClassNames = node.getAttribute('class');
+              // can be null if the attribute does not exist
+              if (nodeClassNames) {
+                // before splitting and iterating just compare them for the most common case
+                var matches = classNames === nodeClassNames;
+                if (!matches) {
+                  var nodeClassNamesSet = toOrderedSet(nodeClassNames);
+                  matches = classNamesSet.every(arrayIncludes(nodeClassNamesSet));
+                }
+                if (matches) {
+                  ls.push(node);
+                }
+              }
+            }
+          });
+        }
+        return ls;
+      });
+    },
+    //document factory method:
+    createElement: function (tagName) {
+      var node = new Element();
+      node.ownerDocument = this;
+      node.nodeName = tagName;
+      node.tagName = tagName;
+      node.localName = tagName;
+      node.childNodes = new NodeList();
+      var attrs = node.attributes = new NamedNodeMap();
+      attrs._ownerElement = node;
+      return node;
+    },
+    createDocumentFragment: function () {
+      var node = new DocumentFragment();
+      node.ownerDocument = this;
+      node.childNodes = new NodeList();
+      return node;
+    },
+    createTextNode: function (data) {
+      var node = new Text();
+      node.ownerDocument = this;
+      node.appendData(data);
+      return node;
+    },
+    createComment: function (data) {
+      var node = new Comment();
+      node.ownerDocument = this;
+      node.appendData(data);
+      return node;
+    },
+    createCDATASection: function (data) {
+      var node = new CDATASection();
+      node.ownerDocument = this;
+      node.appendData(data);
+      return node;
+    },
+    createProcessingInstruction: function (target, data) {
+      var node = new ProcessingInstruction();
+      node.ownerDocument = this;
+      node.tagName = node.nodeName = node.target = target;
+      node.nodeValue = node.data = data;
+      return node;
+    },
+    createAttribute: function (name) {
+      var node = new Attr();
+      node.ownerDocument = this;
+      node.name = name;
+      node.nodeName = name;
+      node.localName = name;
+      node.specified = true;
+      return node;
+    },
+    createEntityReference: function (name) {
+      var node = new EntityReference();
+      node.ownerDocument = this;
+      node.nodeName = name;
+      return node;
+    },
+    // Introduced in DOM Level 2:
+    createElementNS: function (namespaceURI, qualifiedName) {
+      var node = new Element();
+      var pl = qualifiedName.split(':');
+      var attrs = node.attributes = new NamedNodeMap();
+      node.childNodes = new NodeList();
+      node.ownerDocument = this;
+      node.nodeName = qualifiedName;
+      node.tagName = qualifiedName;
+      node.namespaceURI = namespaceURI;
+      if (pl.length == 2) {
+        node.prefix = pl[0];
+        node.localName = pl[1];
+      } else {
+        //el.prefix = null;
+        node.localName = qualifiedName;
+      }
+      attrs._ownerElement = node;
+      return node;
+    },
+    // Introduced in DOM Level 2:
+    createAttributeNS: function (namespaceURI, qualifiedName) {
+      var node = new Attr();
+      var pl = qualifiedName.split(':');
+      node.ownerDocument = this;
+      node.nodeName = qualifiedName;
+      node.name = qualifiedName;
+      node.namespaceURI = namespaceURI;
+      node.specified = true;
+      if (pl.length == 2) {
+        node.prefix = pl[0];
+        node.localName = pl[1];
+      } else {
+        //el.prefix = null;
+        node.localName = qualifiedName;
+      }
+      return node;
+    }
+  };
+  _extends(Document, Node);
+  function Element() {
+    this._nsMap = {};
+  }
+  Element.prototype = {
+    nodeType: ELEMENT_NODE,
+    hasAttribute: function (name) {
+      return this.getAttributeNode(name) != null;
+    },
+    getAttribute: function (name) {
+      var attr = this.getAttributeNode(name);
+      return attr && attr.value || '';
+    },
+    getAttributeNode: function (name) {
+      return this.attributes.getNamedItem(name);
+    },
+    setAttribute: function (name, value) {
+      var attr = this.ownerDocument.createAttribute(name);
+      attr.value = attr.nodeValue = "" + value;
+      this.setAttributeNode(attr);
+    },
+    removeAttribute: function (name) {
+      var attr = this.getAttributeNode(name);
+      attr && this.removeAttributeNode(attr);
+    },
+    //four real opeartion method
+    appendChild: function (newChild) {
+      if (newChild.nodeType === DOCUMENT_FRAGMENT_NODE) {
+        return this.insertBefore(newChild, null);
+      } else {
+        return _appendSingleChild(this, newChild);
+      }
+    },
+    setAttributeNode: function (newAttr) {
+      return this.attributes.setNamedItem(newAttr);
+    },
+    setAttributeNodeNS: function (newAttr) {
+      return this.attributes.setNamedItemNS(newAttr);
+    },
+    removeAttributeNode: function (oldAttr) {
+      //console.log(this == oldAttr.ownerElement)
+      return this.attributes.removeNamedItem(oldAttr.nodeName);
+    },
+    //get real attribute name,and remove it by removeAttributeNode
+    removeAttributeNS: function (namespaceURI, localName) {
+      var old = this.getAttributeNodeNS(namespaceURI, localName);
+      old && this.removeAttributeNode(old);
+    },
+    hasAttributeNS: function (namespaceURI, localName) {
+      return this.getAttributeNodeNS(namespaceURI, localName) != null;
+    },
+    getAttributeNS: function (namespaceURI, localName) {
+      var attr = this.getAttributeNodeNS(namespaceURI, localName);
+      return attr && attr.value || '';
+    },
+    setAttributeNS: function (namespaceURI, qualifiedName, value) {
+      var attr = this.ownerDocument.createAttributeNS(namespaceURI, qualifiedName);
+      attr.value = attr.nodeValue = "" + value;
+      this.setAttributeNode(attr);
+    },
+    getAttributeNodeNS: function (namespaceURI, localName) {
+      return this.attributes.getNamedItemNS(namespaceURI, localName);
+    },
+    getElementsByTagName: function (tagName) {
+      return new LiveNodeList(this, function (base) {
+        var ls = [];
+        _visitNode(base, function (node) {
+          if (node !== base && node.nodeType == ELEMENT_NODE && (tagName === '*' || node.tagName == tagName)) {
+            ls.push(node);
+          }
+        });
+        return ls;
+      });
+    },
+    getElementsByTagNameNS: function (namespaceURI, localName) {
+      return new LiveNodeList(this, function (base) {
+        var ls = [];
+        _visitNode(base, function (node) {
+          if (node !== base && node.nodeType === ELEMENT_NODE && (namespaceURI === '*' || node.namespaceURI === namespaceURI) && (localName === '*' || node.localName == localName)) {
+            ls.push(node);
+          }
+        });
+        return ls;
+      });
+    }
+  };
+  Document.prototype.getElementsByTagName = Element.prototype.getElementsByTagName;
+  Document.prototype.getElementsByTagNameNS = Element.prototype.getElementsByTagNameNS;
+  _extends(Element, Node);
+  function Attr() {}
+  Attr.prototype.nodeType = ATTRIBUTE_NODE;
+  _extends(Attr, Node);
+  function CharacterData() {}
+  CharacterData.prototype = {
+    data: '',
+    substringData: function (offset, count) {
+      return this.data.substring(offset, offset + count);
+    },
+    appendData: function (text) {
+      text = this.data + text;
+      this.nodeValue = this.data = text;
+      this.length = text.length;
+    },
+    insertData: function (offset, text) {
+      this.replaceData(offset, 0, text);
+    },
+    appendChild: function (newChild) {
+      throw new Error(ExceptionMessage[HIERARCHY_REQUEST_ERR]);
+    },
+    deleteData: function (offset, count) {
+      this.replaceData(offset, count, "");
+    },
+    replaceData: function (offset, count, text) {
+      var start = this.data.substring(0, offset);
+      var end = this.data.substring(offset + count);
+      text = start + text + end;
+      this.nodeValue = this.data = text;
+      this.length = text.length;
+    }
+  };
+  _extends(CharacterData, Node);
+  function Text() {}
+  Text.prototype = {
+    nodeName: "#text",
+    nodeType: TEXT_NODE,
+    splitText: function (offset) {
+      var text = this.data;
+      var newText = text.substring(offset);
+      text = text.substring(0, offset);
+      this.data = this.nodeValue = text;
+      this.length = text.length;
+      var newNode = this.ownerDocument.createTextNode(newText);
+      if (this.parentNode) {
+        this.parentNode.insertBefore(newNode, this.nextSibling);
+      }
+      return newNode;
+    }
+  };
+  _extends(Text, CharacterData);
+  function Comment() {}
+  Comment.prototype = {
+    nodeName: "#comment",
+    nodeType: COMMENT_NODE
+  };
+  _extends(Comment, CharacterData);
+  function CDATASection() {}
+  CDATASection.prototype = {
+    nodeName: "#cdata-section",
+    nodeType: CDATA_SECTION_NODE
+  };
+  _extends(CDATASection, CharacterData);
+  function DocumentType() {}
+  DocumentType.prototype.nodeType = DOCUMENT_TYPE_NODE;
+  _extends(DocumentType, Node);
+  function Notation() {}
+  Notation.prototype.nodeType = NOTATION_NODE;
+  _extends(Notation, Node);
+  function Entity() {}
+  Entity.prototype.nodeType = ENTITY_NODE;
+  _extends(Entity, Node);
+  function EntityReference() {}
+  EntityReference.prototype.nodeType = ENTITY_REFERENCE_NODE;
+  _extends(EntityReference, Node);
+  function DocumentFragment() {}
+  DocumentFragment.prototype.nodeName = "#document-fragment";
+  DocumentFragment.prototype.nodeType = DOCUMENT_FRAGMENT_NODE;
+  _extends(DocumentFragment, Node);
+  function ProcessingInstruction() {}
+  ProcessingInstruction.prototype.nodeType = PROCESSING_INSTRUCTION_NODE;
+  _extends(ProcessingInstruction, Node);
+  function XMLSerializer() {}
+  XMLSerializer.prototype.serializeToString = function (node, isHtml, nodeFilter) {
+    return nodeSerializeToString.call(node, isHtml, nodeFilter);
+  };
+  Node.prototype.toString = nodeSerializeToString;
+  function nodeSerializeToString(isHtml, nodeFilter) {
+    var buf = [];
+    var refNode = this.nodeType == 9 && this.documentElement || this;
+    var prefix = refNode.prefix;
+    var uri = refNode.namespaceURI;
+    if (uri && prefix == null) {
+      //console.log(prefix)
+      var prefix = refNode.lookupPrefix(uri);
+      if (prefix == null) {
+        //isHTML = true;
+        var visibleNamespaces = [{
+          namespace: uri,
+          prefix: null
+        }
+        //{namespace:uri,prefix:''}
+        ];
+      }
+    }
+
+    serializeToString(this, buf, isHtml, nodeFilter, visibleNamespaces);
+    //console.log('###',this.nodeType,uri,prefix,buf.join(''))
+    return buf.join('');
+  }
+  function needNamespaceDefine(node, isHTML, visibleNamespaces) {
+    var prefix = node.prefix || '';
+    var uri = node.namespaceURI;
+    // According to [Namespaces in XML 1.0](https://www.w3.org/TR/REC-xml-names/#ns-using) ,
+    // and more specifically https://www.w3.org/TR/REC-xml-names/#nsc-NoPrefixUndecl :
+    // > In a namespace declaration for a prefix [...], the attribute value MUST NOT be empty.
+    // in a similar manner [Namespaces in XML 1.1](https://www.w3.org/TR/xml-names11/#ns-using)
+    // and more specifically https://www.w3.org/TR/xml-names11/#nsc-NSDeclared :
+    // > [...] Furthermore, the attribute value [...] must not be an empty string.
+    // so serializing empty namespace value like xmlns:ds="" would produce an invalid XML document.
+    if (!uri) {
+      return false;
+    }
+    if (prefix === "xml" && uri === NAMESPACE$2.XML || uri === NAMESPACE$2.XMLNS) {
+      return false;
+    }
+    var i = visibleNamespaces.length;
+    while (i--) {
+      var ns = visibleNamespaces[i];
+      // get namespace prefix
+      if (ns.prefix === prefix) {
+        return ns.namespace !== uri;
+      }
+    }
+    return true;
+  }
+  /**
+   * Well-formed constraint: No < in Attribute Values
+   * > The replacement text of any entity referred to directly or indirectly
+   * > in an attribute value must not contain a <.
+   * @see https://www.w3.org/TR/xml11/#CleanAttrVals
+   * @see https://www.w3.org/TR/xml11/#NT-AttValue
+   *
+   * Literal whitespace other than space that appear in attribute values
+   * are serialized as their entity references, so they will be preserved.
+   * (In contrast to whitespace literals in the input which are normalized to spaces)
+   * @see https://www.w3.org/TR/xml11/#AVNormalize
+   * @see https://w3c.github.io/DOM-Parsing/#serializing-an-element-s-attributes
+   */
+  function addSerializedAttribute(buf, qualifiedName, value) {
+    buf.push(' ', qualifiedName, '="', value.replace(/[<>&"\t\n\r]/g, _xmlEncoder), '"');
+  }
+  function serializeToString(node, buf, isHTML, nodeFilter, visibleNamespaces) {
+    if (!visibleNamespaces) {
+      visibleNamespaces = [];
+    }
+    if (nodeFilter) {
+      node = nodeFilter(node);
+      if (node) {
+        if (typeof node == 'string') {
+          buf.push(node);
+          return;
+        }
+      } else {
+        return;
+      }
+      //buf.sort.apply(attrs, attributeSorter);
+    }
+
+    switch (node.nodeType) {
+      case ELEMENT_NODE:
+        var attrs = node.attributes;
+        var len = attrs.length;
+        var child = node.firstChild;
+        var nodeName = node.tagName;
+        isHTML = NAMESPACE$2.isHTML(node.namespaceURI) || isHTML;
+        var prefixedNodeName = nodeName;
+        if (!isHTML && !node.prefix && node.namespaceURI) {
+          var defaultNS;
+          // lookup current default ns from `xmlns` attribute
+          for (var ai = 0; ai < attrs.length; ai++) {
+            if (attrs.item(ai).name === 'xmlns') {
+              defaultNS = attrs.item(ai).value;
+              break;
+            }
+          }
+          if (!defaultNS) {
+            // lookup current default ns in visibleNamespaces
+            for (var nsi = visibleNamespaces.length - 1; nsi >= 0; nsi--) {
+              var namespace = visibleNamespaces[nsi];
+              if (namespace.prefix === '' && namespace.namespace === node.namespaceURI) {
+                defaultNS = namespace.namespace;
+                break;
+              }
+            }
+          }
+          if (defaultNS !== node.namespaceURI) {
+            for (var nsi = visibleNamespaces.length - 1; nsi >= 0; nsi--) {
+              var namespace = visibleNamespaces[nsi];
+              if (namespace.namespace === node.namespaceURI) {
+                if (namespace.prefix) {
+                  prefixedNodeName = namespace.prefix + ':' + nodeName;
+                }
+                break;
+              }
+            }
+          }
+        }
+        buf.push('<', prefixedNodeName);
+        for (var i = 0; i < len; i++) {
+          // add namespaces for attributes
+          var attr = attrs.item(i);
+          if (attr.prefix == 'xmlns') {
+            visibleNamespaces.push({
+              prefix: attr.localName,
+              namespace: attr.value
+            });
+          } else if (attr.nodeName == 'xmlns') {
+            visibleNamespaces.push({
+              prefix: '',
+              namespace: attr.value
+            });
+          }
+        }
+        for (var i = 0; i < len; i++) {
+          var attr = attrs.item(i);
+          if (needNamespaceDefine(attr, isHTML, visibleNamespaces)) {
+            var prefix = attr.prefix || '';
+            var uri = attr.namespaceURI;
+            addSerializedAttribute(buf, prefix ? 'xmlns:' + prefix : "xmlns", uri);
+            visibleNamespaces.push({
+              prefix: prefix,
+              namespace: uri
+            });
+          }
+          serializeToString(attr, buf, isHTML, nodeFilter, visibleNamespaces);
+        }
+
+        // add namespace for current node
+        if (nodeName === prefixedNodeName && needNamespaceDefine(node, isHTML, visibleNamespaces)) {
+          var prefix = node.prefix || '';
+          var uri = node.namespaceURI;
+          addSerializedAttribute(buf, prefix ? 'xmlns:' + prefix : "xmlns", uri);
+          visibleNamespaces.push({
+            prefix: prefix,
+            namespace: uri
+          });
+        }
+        if (child || isHTML && !/^(?:meta|link|img|br|hr|input)$/i.test(nodeName)) {
+          buf.push('>');
+          //if is cdata child node
+          if (isHTML && /^script$/i.test(nodeName)) {
+            while (child) {
+              if (child.data) {
+                buf.push(child.data);
+              } else {
+                serializeToString(child, buf, isHTML, nodeFilter, visibleNamespaces.slice());
+              }
+              child = child.nextSibling;
+            }
+          } else {
+            while (child) {
+              serializeToString(child, buf, isHTML, nodeFilter, visibleNamespaces.slice());
+              child = child.nextSibling;
+            }
+          }
+          buf.push('</', prefixedNodeName, '>');
+        } else {
+          buf.push('/>');
+        }
+        // remove added visible namespaces
+        //visibleNamespaces.length = startVisibleNamespaces;
+        return;
+      case DOCUMENT_NODE:
+      case DOCUMENT_FRAGMENT_NODE:
+        var child = node.firstChild;
+        while (child) {
+          serializeToString(child, buf, isHTML, nodeFilter, visibleNamespaces.slice());
+          child = child.nextSibling;
+        }
+        return;
+      case ATTRIBUTE_NODE:
+        return addSerializedAttribute(buf, node.name, node.value);
+      case TEXT_NODE:
+        /**
+         * The ampersand character (&) and the left angle bracket (<) must not appear in their literal form,
+         * except when used as markup delimiters, or within a comment, a processing instruction, or a CDATA section.
+         * If they are needed elsewhere, they must be escaped using either numeric character references or the strings
+         * `&amp;` and `&lt;` respectively.
+         * The right angle bracket (>) may be represented using the string " &gt; ", and must, for compatibility,
+         * be escaped using either `&gt;` or a character reference when it appears in the string `]]>` in content,
+         * when that string is not marking the end of a CDATA section.
+         *
+         * In the content of elements, character data is any string of characters
+         * which does not contain the start-delimiter of any markup
+         * and does not include the CDATA-section-close delimiter, `]]>`.
+         *
+         * @see https://www.w3.org/TR/xml/#NT-CharData
+         * @see https://w3c.github.io/DOM-Parsing/#xml-serializing-a-text-node
+         */
+        return buf.push(node.data.replace(/[<&>]/g, _xmlEncoder));
+      case CDATA_SECTION_NODE:
+        return buf.push('<![CDATA[', node.data, ']]>');
+      case COMMENT_NODE:
+        return buf.push("<!--", node.data, "-->");
+      case DOCUMENT_TYPE_NODE:
+        var pubid = node.publicId;
+        var sysid = node.systemId;
+        buf.push('<!DOCTYPE ', node.name);
+        if (pubid) {
+          buf.push(' PUBLIC ', pubid);
+          if (sysid && sysid != '.') {
+            buf.push(' ', sysid);
+          }
+          buf.push('>');
+        } else if (sysid && sysid != '.') {
+          buf.push(' SYSTEM ', sysid, '>');
+        } else {
+          var sub = node.internalSubset;
+          if (sub) {
+            buf.push(" [", sub, "]");
+          }
+          buf.push(">");
+        }
+        return;
+      case PROCESSING_INSTRUCTION_NODE:
+        return buf.push("<?", node.target, " ", node.data, "?>");
+      case ENTITY_REFERENCE_NODE:
+        return buf.push('&', node.nodeName, ';');
+      //case ENTITY_NODE:
+      //case NOTATION_NODE:
+      default:
+        buf.push('??', node.nodeName);
+    }
+  }
+  function importNode(doc, node, deep) {
+    var node2;
+    switch (node.nodeType) {
+      case ELEMENT_NODE:
+        node2 = node.cloneNode(false);
+        node2.ownerDocument = doc;
+      //var attrs = node2.attributes;
+      //var len = attrs.length;
+      //for(var i=0;i<len;i++){
+      //node2.setAttributeNodeNS(importNode(doc,attrs.item(i),deep));
+      //}
+      case DOCUMENT_FRAGMENT_NODE:
+        break;
+      case ATTRIBUTE_NODE:
+        deep = true;
+        break;
+      //case ENTITY_REFERENCE_NODE:
+      //case PROCESSING_INSTRUCTION_NODE:
+      ////case TEXT_NODE:
+      //case CDATA_SECTION_NODE:
+      //case COMMENT_NODE:
+      //	deep = false;
+      //	break;
+      //case DOCUMENT_NODE:
+      //case DOCUMENT_TYPE_NODE:
+      //cannot be imported.
+      //case ENTITY_NODE:
+      //case NOTATION_NODE：
+      //can not hit in level3
+      //default:throw e;
+    }
+
+    if (!node2) {
+      node2 = node.cloneNode(false); //false
+    }
+
+    node2.ownerDocument = doc;
+    node2.parentNode = null;
+    if (deep) {
+      var child = node.firstChild;
+      while (child) {
+        node2.appendChild(importNode(doc, child, deep));
+        child = child.nextSibling;
+      }
+    }
+    return node2;
+  }
+  //
+  //var _relationMap = {firstChild:1,lastChild:1,previousSibling:1,nextSibling:1,
+  //					attributes:1,childNodes:1,parentNode:1,documentElement:1,doctype,};
+  function cloneNode(doc, node, deep) {
+    var node2 = new node.constructor();
+    for (var n in node) {
+      if (Object.prototype.hasOwnProperty.call(node, n)) {
+        var v = node[n];
+        if (typeof v != "object") {
+          if (v != node2[n]) {
+            node2[n] = v;
+          }
+        }
+      }
+    }
+    if (node.childNodes) {
+      node2.childNodes = new NodeList();
+    }
+    node2.ownerDocument = doc;
+    switch (node2.nodeType) {
+      case ELEMENT_NODE:
+        var attrs = node.attributes;
+        var attrs2 = node2.attributes = new NamedNodeMap();
+        var len = attrs.length;
+        attrs2._ownerElement = node2;
+        for (var i = 0; i < len; i++) {
+          node2.setAttributeNode(cloneNode(doc, attrs.item(i), true));
+        }
+        break;
+      case ATTRIBUTE_NODE:
+        deep = true;
+    }
+    if (deep) {
+      var child = node.firstChild;
+      while (child) {
+        node2.appendChild(cloneNode(doc, child, deep));
+        child = child.nextSibling;
+      }
+    }
+    return node2;
+  }
+  function __set__(object, key, value) {
+    object[key] = value;
+  }
+  //do dynamic
+  try {
+    if (Object.defineProperty) {
+      Object.defineProperty(LiveNodeList.prototype, 'length', {
+        get: function () {
+          _updateLiveList(this);
+          return this.$$length;
+        }
+      });
+      Object.defineProperty(Node.prototype, 'textContent', {
+        get: function () {
+          return getTextContent(this);
+        },
+        set: function (data) {
+          switch (this.nodeType) {
+            case ELEMENT_NODE:
+            case DOCUMENT_FRAGMENT_NODE:
+              while (this.firstChild) {
+                this.removeChild(this.firstChild);
+              }
+              if (data || String(data)) {
+                this.appendChild(this.ownerDocument.createTextNode(data));
+              }
+              break;
+            default:
+              this.data = data;
+              this.value = data;
+              this.nodeValue = data;
+          }
+        }
+      });
+      function getTextContent(node) {
+        switch (node.nodeType) {
+          case ELEMENT_NODE:
+          case DOCUMENT_FRAGMENT_NODE:
+            var buf = [];
+            node = node.firstChild;
+            while (node) {
+              if (node.nodeType !== 7 && node.nodeType !== 8) {
+                buf.push(getTextContent(node));
+              }
+              node = node.nextSibling;
+            }
+            return buf.join('');
+          default:
+            return node.nodeValue;
+        }
+      }
+      __set__ = function (object, key, value) {
+        //console.log(value)
+        object['$$' + key] = value;
+      };
+    }
+  } catch (e) {//ie8
+  }
+
+  //if(typeof require == 'function'){
+  var DocumentType_1 = DocumentType;
+  var DOMException_1 = DOMException;
+  var DOMImplementation_1 = DOMImplementation$1;
+  var Element_1 = Element;
+  var Node_1 = Node;
+  var NodeList_1 = NodeList;
+  var XMLSerializer_1 = XMLSerializer;
+  //}
+
+  var dom = {
+    DocumentType: DocumentType_1,
+    DOMException: DOMException_1,
+    DOMImplementation: DOMImplementation_1,
+    Element: Element_1,
+    Node: Node_1,
+    NodeList: NodeList_1,
+    XMLSerializer: XMLSerializer_1
+  };
+
+  var entities = createCommonjsModule(function (module, exports) {
+
+    var freeze = conventions.freeze;
+
+    /**
+     * The entities that are predefined in every XML document.
+     *
+     * @see https://www.w3.org/TR/2006/REC-xml11-20060816/#sec-predefined-ent W3C XML 1.1
+     * @see https://www.w3.org/TR/2008/REC-xml-20081126/#sec-predefined-ent W3C XML 1.0
+     * @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Predefined_entities_in_XML Wikipedia
+     */
+    exports.XML_ENTITIES = freeze({
+      amp: '&',
+      apos: "'",
+      gt: '>',
+      lt: '<',
+      quot: '"'
+    });
+
+    /**
+     * A map of all entities that are detected in an HTML document.
+     * They contain all entries from `XML_ENTITIES`.
+     *
+     * @see XML_ENTITIES
+     * @see DOMParser.parseFromString
+     * @see DOMImplementation.prototype.createHTMLDocument
+     * @see https://html.spec.whatwg.org/#named-character-references WHATWG HTML(5) Spec
+     * @see https://html.spec.whatwg.org/entities.json JSON
+     * @see https://www.w3.org/TR/xml-entity-names/ W3C XML Entity Names
+     * @see https://www.w3.org/TR/html4/sgml/entities.html W3C HTML4/SGML
+     * @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Character_entity_references_in_HTML Wikipedia (HTML)
+     * @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Entities_representing_special_characters_in_XHTML Wikpedia (XHTML)
+     */
+    exports.HTML_ENTITIES = freeze({
+      Aacute: '\u00C1',
+      aacute: '\u00E1',
+      Abreve: '\u0102',
+      abreve: '\u0103',
+      ac: '\u223E',
+      acd: '\u223F',
+      acE: '\u223E\u0333',
+      Acirc: '\u00C2',
+      acirc: '\u00E2',
+      acute: '\u00B4',
+      Acy: '\u0410',
+      acy: '\u0430',
+      AElig: '\u00C6',
+      aelig: '\u00E6',
+      af: '\u2061',
+      Afr: '\uD835\uDD04',
+      afr: '\uD835\uDD1E',
+      Agrave: '\u00C0',
+      agrave: '\u00E0',
+      alefsym: '\u2135',
+      aleph: '\u2135',
+      Alpha: '\u0391',
+      alpha: '\u03B1',
+      Amacr: '\u0100',
+      amacr: '\u0101',
+      amalg: '\u2A3F',
+      AMP: '\u0026',
+      amp: '\u0026',
+      And: '\u2A53',
+      and: '\u2227',
+      andand: '\u2A55',
+      andd: '\u2A5C',
+      andslope: '\u2A58',
+      andv: '\u2A5A',
+      ang: '\u2220',
+      ange: '\u29A4',
+      angle: '\u2220',
+      angmsd: '\u2221',
+      angmsdaa: '\u29A8',
+      angmsdab: '\u29A9',
+      angmsdac: '\u29AA',
+      angmsdad: '\u29AB',
+      angmsdae: '\u29AC',
+      angmsdaf: '\u29AD',
+      angmsdag: '\u29AE',
+      angmsdah: '\u29AF',
+      angrt: '\u221F',
+      angrtvb: '\u22BE',
+      angrtvbd: '\u299D',
+      angsph: '\u2222',
+      angst: '\u00C5',
+      angzarr: '\u237C',
+      Aogon: '\u0104',
+      aogon: '\u0105',
+      Aopf: '\uD835\uDD38',
+      aopf: '\uD835\uDD52',
+      ap: '\u2248',
+      apacir: '\u2A6F',
+      apE: '\u2A70',
+      ape: '\u224A',
+      apid: '\u224B',
+      apos: '\u0027',
+      ApplyFunction: '\u2061',
+      approx: '\u2248',
+      approxeq: '\u224A',
+      Aring: '\u00C5',
+      aring: '\u00E5',
+      Ascr: '\uD835\uDC9C',
+      ascr: '\uD835\uDCB6',
+      Assign: '\u2254',
+      ast: '\u002A',
+      asymp: '\u2248',
+      asympeq: '\u224D',
+      Atilde: '\u00C3',
+      atilde: '\u00E3',
+      Auml: '\u00C4',
+      auml: '\u00E4',
+      awconint: '\u2233',
+      awint: '\u2A11',
+      backcong: '\u224C',
+      backepsilon: '\u03F6',
+      backprime: '\u2035',
+      backsim: '\u223D',
+      backsimeq: '\u22CD',
+      Backslash: '\u2216',
+      Barv: '\u2AE7',
+      barvee: '\u22BD',
+      Barwed: '\u2306',
+      barwed: '\u2305',
+      barwedge: '\u2305',
+      bbrk: '\u23B5',
+      bbrktbrk: '\u23B6',
+      bcong: '\u224C',
+      Bcy: '\u0411',
+      bcy: '\u0431',
+      bdquo: '\u201E',
+      becaus: '\u2235',
+      Because: '\u2235',
+      because: '\u2235',
+      bemptyv: '\u29B0',
+      bepsi: '\u03F6',
+      bernou: '\u212C',
+      Bernoullis: '\u212C',
+      Beta: '\u0392',
+      beta: '\u03B2',
+      beth: '\u2136',
+      between: '\u226C',
+      Bfr: '\uD835\uDD05',
+      bfr: '\uD835\uDD1F',
+      bigcap: '\u22C2',
+      bigcirc: '\u25EF',
+      bigcup: '\u22C3',
+      bigodot: '\u2A00',
+      bigoplus: '\u2A01',
+      bigotimes: '\u2A02',
+      bigsqcup: '\u2A06',
+      bigstar: '\u2605',
+      bigtriangledown: '\u25BD',
+      bigtriangleup: '\u25B3',
+      biguplus: '\u2A04',
+      bigvee: '\u22C1',
+      bigwedge: '\u22C0',
+      bkarow: '\u290D',
+      blacklozenge: '\u29EB',
+      blacksquare: '\u25AA',
+      blacktriangle: '\u25B4',
+      blacktriangledown: '\u25BE',
+      blacktriangleleft: '\u25C2',
+      blacktriangleright: '\u25B8',
+      blank: '\u2423',
+      blk12: '\u2592',
+      blk14: '\u2591',
+      blk34: '\u2593',
+      block: '\u2588',
+      bne: '\u003D\u20E5',
+      bnequiv: '\u2261\u20E5',
+      bNot: '\u2AED',
+      bnot: '\u2310',
+      Bopf: '\uD835\uDD39',
+      bopf: '\uD835\uDD53',
+      bot: '\u22A5',
+      bottom: '\u22A5',
+      bowtie: '\u22C8',
+      boxbox: '\u29C9',
+      boxDL: '\u2557',
+      boxDl: '\u2556',
+      boxdL: '\u2555',
+      boxdl: '\u2510',
+      boxDR: '\u2554',
+      boxDr: '\u2553',
+      boxdR: '\u2552',
+      boxdr: '\u250C',
+      boxH: '\u2550',
+      boxh: '\u2500',
+      boxHD: '\u2566',
+      boxHd: '\u2564',
+      boxhD: '\u2565',
+      boxhd: '\u252C',
+      boxHU: '\u2569',
+      boxHu: '\u2567',
+      boxhU: '\u2568',
+      boxhu: '\u2534',
+      boxminus: '\u229F',
+      boxplus: '\u229E',
+      boxtimes: '\u22A0',
+      boxUL: '\u255D',
+      boxUl: '\u255C',
+      boxuL: '\u255B',
+      boxul: '\u2518',
+      boxUR: '\u255A',
+      boxUr: '\u2559',
+      boxuR: '\u2558',
+      boxur: '\u2514',
+      boxV: '\u2551',
+      boxv: '\u2502',
+      boxVH: '\u256C',
+      boxVh: '\u256B',
+      boxvH: '\u256A',
+      boxvh: '\u253C',
+      boxVL: '\u2563',
+      boxVl: '\u2562',
+      boxvL: '\u2561',
+      boxvl: '\u2524',
+      boxVR: '\u2560',
+      boxVr: '\u255F',
+      boxvR: '\u255E',
+      boxvr: '\u251C',
+      bprime: '\u2035',
+      Breve: '\u02D8',
+      breve: '\u02D8',
+      brvbar: '\u00A6',
+      Bscr: '\u212C',
+      bscr: '\uD835\uDCB7',
+      bsemi: '\u204F',
+      bsim: '\u223D',
+      bsime: '\u22CD',
+      bsol: '\u005C',
+      bsolb: '\u29C5',
+      bsolhsub: '\u27C8',
+      bull: '\u2022',
+      bullet: '\u2022',
+      bump: '\u224E',
+      bumpE: '\u2AAE',
+      bumpe: '\u224F',
+      Bumpeq: '\u224E',
+      bumpeq: '\u224F',
+      Cacute: '\u0106',
+      cacute: '\u0107',
+      Cap: '\u22D2',
+      cap: '\u2229',
+      capand: '\u2A44',
+      capbrcup: '\u2A49',
+      capcap: '\u2A4B',
+      capcup: '\u2A47',
+      capdot: '\u2A40',
+      CapitalDifferentialD: '\u2145',
+      caps: '\u2229\uFE00',
+      caret: '\u2041',
+      caron: '\u02C7',
+      Cayleys: '\u212D',
+      ccaps: '\u2A4D',
+      Ccaron: '\u010C',
+      ccaron: '\u010D',
+      Ccedil: '\u00C7',
+      ccedil: '\u00E7',
+      Ccirc: '\u0108',
+      ccirc: '\u0109',
+      Cconint: '\u2230',
+      ccups: '\u2A4C',
+      ccupssm: '\u2A50',
+      Cdot: '\u010A',
+      cdot: '\u010B',
+      cedil: '\u00B8',
+      Cedilla: '\u00B8',
+      cemptyv: '\u29B2',
+      cent: '\u00A2',
+      CenterDot: '\u00B7',
+      centerdot: '\u00B7',
+      Cfr: '\u212D',
+      cfr: '\uD835\uDD20',
+      CHcy: '\u0427',
+      chcy: '\u0447',
+      check: '\u2713',
+      checkmark: '\u2713',
+      Chi: '\u03A7',
+      chi: '\u03C7',
+      cir: '\u25CB',
+      circ: '\u02C6',
+      circeq: '\u2257',
+      circlearrowleft: '\u21BA',
+      circlearrowright: '\u21BB',
+      circledast: '\u229B',
+      circledcirc: '\u229A',
+      circleddash: '\u229D',
+      CircleDot: '\u2299',
+      circledR: '\u00AE',
+      circledS: '\u24C8',
+      CircleMinus: '\u2296',
+      CirclePlus: '\u2295',
+      CircleTimes: '\u2297',
+      cirE: '\u29C3',
+      cire: '\u2257',
+      cirfnint: '\u2A10',
+      cirmid: '\u2AEF',
+      cirscir: '\u29C2',
+      ClockwiseContourIntegral: '\u2232',
+      CloseCurlyDoubleQuote: '\u201D',
+      CloseCurlyQuote: '\u2019',
+      clubs: '\u2663',
+      clubsuit: '\u2663',
+      Colon: '\u2237',
+      colon: '\u003A',
+      Colone: '\u2A74',
+      colone: '\u2254',
+      coloneq: '\u2254',
+      comma: '\u002C',
+      commat: '\u0040',
+      comp: '\u2201',
+      compfn: '\u2218',
+      complement: '\u2201',
+      complexes: '\u2102',
+      cong: '\u2245',
+      congdot: '\u2A6D',
+      Congruent: '\u2261',
+      Conint: '\u222F',
+      conint: '\u222E',
+      ContourIntegral: '\u222E',
+      Copf: '\u2102',
+      copf: '\uD835\uDD54',
+      coprod: '\u2210',
+      Coproduct: '\u2210',
+      COPY: '\u00A9',
+      copy: '\u00A9',
+      copysr: '\u2117',
+      CounterClockwiseContourIntegral: '\u2233',
+      crarr: '\u21B5',
+      Cross: '\u2A2F',
+      cross: '\u2717',
+      Cscr: '\uD835\uDC9E',
+      cscr: '\uD835\uDCB8',
+      csub: '\u2ACF',
+      csube: '\u2AD1',
+      csup: '\u2AD0',
+      csupe: '\u2AD2',
+      ctdot: '\u22EF',
+      cudarrl: '\u2938',
+      cudarrr: '\u2935',
+      cuepr: '\u22DE',
+      cuesc: '\u22DF',
+      cularr: '\u21B6',
+      cularrp: '\u293D',
+      Cup: '\u22D3',
+      cup: '\u222A',
+      cupbrcap: '\u2A48',
+      CupCap: '\u224D',
+      cupcap: '\u2A46',
+      cupcup: '\u2A4A',
+      cupdot: '\u228D',
+      cupor: '\u2A45',
+      cups: '\u222A\uFE00',
+      curarr: '\u21B7',
+      curarrm: '\u293C',
+      curlyeqprec: '\u22DE',
+      curlyeqsucc: '\u22DF',
+      curlyvee: '\u22CE',
+      curlywedge: '\u22CF',
+      curren: '\u00A4',
+      curvearrowleft: '\u21B6',
+      curvearrowright: '\u21B7',
+      cuvee: '\u22CE',
+      cuwed: '\u22CF',
+      cwconint: '\u2232',
+      cwint: '\u2231',
+      cylcty: '\u232D',
+      Dagger: '\u2021',
+      dagger: '\u2020',
+      daleth: '\u2138',
+      Darr: '\u21A1',
+      dArr: '\u21D3',
+      darr: '\u2193',
+      dash: '\u2010',
+      Dashv: '\u2AE4',
+      dashv: '\u22A3',
+      dbkarow: '\u290F',
+      dblac: '\u02DD',
+      Dcaron: '\u010E',
+      dcaron: '\u010F',
+      Dcy: '\u0414',
+      dcy: '\u0434',
+      DD: '\u2145',
+      dd: '\u2146',
+      ddagger: '\u2021',
+      ddarr: '\u21CA',
+      DDotrahd: '\u2911',
+      ddotseq: '\u2A77',
+      deg: '\u00B0',
+      Del: '\u2207',
+      Delta: '\u0394',
+      delta: '\u03B4',
+      demptyv: '\u29B1',
+      dfisht: '\u297F',
+      Dfr: '\uD835\uDD07',
+      dfr: '\uD835\uDD21',
+      dHar: '\u2965',
+      dharl: '\u21C3',
+      dharr: '\u21C2',
+      DiacriticalAcute: '\u00B4',
+      DiacriticalDot: '\u02D9',
+      DiacriticalDoubleAcute: '\u02DD',
+      DiacriticalGrave: '\u0060',
+      DiacriticalTilde: '\u02DC',
+      diam: '\u22C4',
+      Diamond: '\u22C4',
+      diamond: '\u22C4',
+      diamondsuit: '\u2666',
+      diams: '\u2666',
+      die: '\u00A8',
+      DifferentialD: '\u2146',
+      digamma: '\u03DD',
+      disin: '\u22F2',
+      div: '\u00F7',
+      divide: '\u00F7',
+      divideontimes: '\u22C7',
+      divonx: '\u22C7',
+      DJcy: '\u0402',
+      djcy: '\u0452',
+      dlcorn: '\u231E',
+      dlcrop: '\u230D',
+      dollar: '\u0024',
+      Dopf: '\uD835\uDD3B',
+      dopf: '\uD835\uDD55',
+      Dot: '\u00A8',
+      dot: '\u02D9',
+      DotDot: '\u20DC',
+      doteq: '\u2250',
+      doteqdot: '\u2251',
+      DotEqual: '\u2250',
+      dotminus: '\u2238',
+      dotplus: '\u2214',
+      dotsquare: '\u22A1',
+      doublebarwedge: '\u2306',
+      DoubleContourIntegral: '\u222F',
+      DoubleDot: '\u00A8',
+      DoubleDownArrow: '\u21D3',
+      DoubleLeftArrow: '\u21D0',
+      DoubleLeftRightArrow: '\u21D4',
+      DoubleLeftTee: '\u2AE4',
+      DoubleLongLeftArrow: '\u27F8',
+      DoubleLongLeftRightArrow: '\u27FA',
+      DoubleLongRightArrow: '\u27F9',
+      DoubleRightArrow: '\u21D2',
+      DoubleRightTee: '\u22A8',
+      DoubleUpArrow: '\u21D1',
+      DoubleUpDownArrow: '\u21D5',
+      DoubleVerticalBar: '\u2225',
+      DownArrow: '\u2193',
+      Downarrow: '\u21D3',
+      downarrow: '\u2193',
+      DownArrowBar: '\u2913',
+      DownArrowUpArrow: '\u21F5',
+      DownBreve: '\u0311',
+      downdownarrows: '\u21CA',
+      downharpoonleft: '\u21C3',
+      downharpoonright: '\u21C2',
+      DownLeftRightVector: '\u2950',
+      DownLeftTeeVector: '\u295E',
+      DownLeftVector: '\u21BD',
+      DownLeftVectorBar: '\u2956',
+      DownRightTeeVector: '\u295F',
+      DownRightVector: '\u21C1',
+      DownRightVectorBar: '\u2957',
+      DownTee: '\u22A4',
+      DownTeeArrow: '\u21A7',
+      drbkarow: '\u2910',
+      drcorn: '\u231F',
+      drcrop: '\u230C',
+      Dscr: '\uD835\uDC9F',
+      dscr: '\uD835\uDCB9',
+      DScy: '\u0405',
+      dscy: '\u0455',
+      dsol: '\u29F6',
+      Dstrok: '\u0110',
+      dstrok: '\u0111',
+      dtdot: '\u22F1',
+      dtri: '\u25BF',
+      dtrif: '\u25BE',
+      duarr: '\u21F5',
+      duhar: '\u296F',
+      dwangle: '\u29A6',
+      DZcy: '\u040F',
+      dzcy: '\u045F',
+      dzigrarr: '\u27FF',
+      Eacute: '\u00C9',
+      eacute: '\u00E9',
+      easter: '\u2A6E',
+      Ecaron: '\u011A',
+      ecaron: '\u011B',
+      ecir: '\u2256',
+      Ecirc: '\u00CA',
+      ecirc: '\u00EA',
+      ecolon: '\u2255',
+      Ecy: '\u042D',
+      ecy: '\u044D',
+      eDDot: '\u2A77',
+      Edot: '\u0116',
+      eDot: '\u2251',
+      edot: '\u0117',
+      ee: '\u2147',
+      efDot: '\u2252',
+      Efr: '\uD835\uDD08',
+      efr: '\uD835\uDD22',
+      eg: '\u2A9A',
+      Egrave: '\u00C8',
+      egrave: '\u00E8',
+      egs: '\u2A96',
+      egsdot: '\u2A98',
+      el: '\u2A99',
+      Element: '\u2208',
+      elinters: '\u23E7',
+      ell: '\u2113',
+      els: '\u2A95',
+      elsdot: '\u2A97',
+      Emacr: '\u0112',
+      emacr: '\u0113',
+      empty: '\u2205',
+      emptyset: '\u2205',
+      EmptySmallSquare: '\u25FB',
+      emptyv: '\u2205',
+      EmptyVerySmallSquare: '\u25AB',
+      emsp: '\u2003',
+      emsp13: '\u2004',
+      emsp14: '\u2005',
+      ENG: '\u014A',
+      eng: '\u014B',
+      ensp: '\u2002',
+      Eogon: '\u0118',
+      eogon: '\u0119',
+      Eopf: '\uD835\uDD3C',
+      eopf: '\uD835\uDD56',
+      epar: '\u22D5',
+      eparsl: '\u29E3',
+      eplus: '\u2A71',
+      epsi: '\u03B5',
+      Epsilon: '\u0395',
+      epsilon: '\u03B5',
+      epsiv: '\u03F5',
+      eqcirc: '\u2256',
+      eqcolon: '\u2255',
+      eqsim: '\u2242',
+      eqslantgtr: '\u2A96',
+      eqslantless: '\u2A95',
+      Equal: '\u2A75',
+      equals: '\u003D',
+      EqualTilde: '\u2242',
+      equest: '\u225F',
+      Equilibrium: '\u21CC',
+      equiv: '\u2261',
+      equivDD: '\u2A78',
+      eqvparsl: '\u29E5',
+      erarr: '\u2971',
+      erDot: '\u2253',
+      Escr: '\u2130',
+      escr: '\u212F',
+      esdot: '\u2250',
+      Esim: '\u2A73',
+      esim: '\u2242',
+      Eta: '\u0397',
+      eta: '\u03B7',
+      ETH: '\u00D0',
+      eth: '\u00F0',
+      Euml: '\u00CB',
+      euml: '\u00EB',
+      euro: '\u20AC',
+      excl: '\u0021',
+      exist: '\u2203',
+      Exists: '\u2203',
+      expectation: '\u2130',
+      ExponentialE: '\u2147',
+      exponentiale: '\u2147',
+      fallingdotseq: '\u2252',
+      Fcy: '\u0424',
+      fcy: '\u0444',
+      female: '\u2640',
+      ffilig: '\uFB03',
+      fflig: '\uFB00',
+      ffllig: '\uFB04',
+      Ffr: '\uD835\uDD09',
+      ffr: '\uD835\uDD23',
+      filig: '\uFB01',
+      FilledSmallSquare: '\u25FC',
+      FilledVerySmallSquare: '\u25AA',
+      fjlig: '\u0066\u006A',
+      flat: '\u266D',
+      fllig: '\uFB02',
+      fltns: '\u25B1',
+      fnof: '\u0192',
+      Fopf: '\uD835\uDD3D',
+      fopf: '\uD835\uDD57',
+      ForAll: '\u2200',
+      forall: '\u2200',
+      fork: '\u22D4',
+      forkv: '\u2AD9',
+      Fouriertrf: '\u2131',
+      fpartint: '\u2A0D',
+      frac12: '\u00BD',
+      frac13: '\u2153',
+      frac14: '\u00BC',
+      frac15: '\u2155',
+      frac16: '\u2159',
+      frac18: '\u215B',
+      frac23: '\u2154',
+      frac25: '\u2156',
+      frac34: '\u00BE',
+      frac35: '\u2157',
+      frac38: '\u215C',
+      frac45: '\u2158',
+      frac56: '\u215A',
+      frac58: '\u215D',
+      frac78: '\u215E',
+      frasl: '\u2044',
+      frown: '\u2322',
+      Fscr: '\u2131',
+      fscr: '\uD835\uDCBB',
+      gacute: '\u01F5',
+      Gamma: '\u0393',
+      gamma: '\u03B3',
+      Gammad: '\u03DC',
+      gammad: '\u03DD',
+      gap: '\u2A86',
+      Gbreve: '\u011E',
+      gbreve: '\u011F',
+      Gcedil: '\u0122',
+      Gcirc: '\u011C',
+      gcirc: '\u011D',
+      Gcy: '\u0413',
+      gcy: '\u0433',
+      Gdot: '\u0120',
+      gdot: '\u0121',
+      gE: '\u2267',
+      ge: '\u2265',
+      gEl: '\u2A8C',
+      gel: '\u22DB',
+      geq: '\u2265',
+      geqq: '\u2267',
+      geqslant: '\u2A7E',
+      ges: '\u2A7E',
+      gescc: '\u2AA9',
+      gesdot: '\u2A80',
+      gesdoto: '\u2A82',
+      gesdotol: '\u2A84',
+      gesl: '\u22DB\uFE00',
+      gesles: '\u2A94',
+      Gfr: '\uD835\uDD0A',
+      gfr: '\uD835\uDD24',
+      Gg: '\u22D9',
+      gg: '\u226B',
+      ggg: '\u22D9',
+      gimel: '\u2137',
+      GJcy: '\u0403',
+      gjcy: '\u0453',
+      gl: '\u2277',
+      gla: '\u2AA5',
+      glE: '\u2A92',
+      glj: '\u2AA4',
+      gnap: '\u2A8A',
+      gnapprox: '\u2A8A',
+      gnE: '\u2269',
+      gne: '\u2A88',
+      gneq: '\u2A88',
+      gneqq: '\u2269',
+      gnsim: '\u22E7',
+      Gopf: '\uD835\uDD3E',
+      gopf: '\uD835\uDD58',
+      grave: '\u0060',
+      GreaterEqual: '\u2265',
+      GreaterEqualLess: '\u22DB',
+      GreaterFullEqual: '\u2267',
+      GreaterGreater: '\u2AA2',
+      GreaterLess: '\u2277',
+      GreaterSlantEqual: '\u2A7E',
+      GreaterTilde: '\u2273',
+      Gscr: '\uD835\uDCA2',
+      gscr: '\u210A',
+      gsim: '\u2273',
+      gsime: '\u2A8E',
+      gsiml: '\u2A90',
+      Gt: '\u226B',
+      GT: '\u003E',
+      gt: '\u003E',
+      gtcc: '\u2AA7',
+      gtcir: '\u2A7A',
+      gtdot: '\u22D7',
+      gtlPar: '\u2995',
+      gtquest: '\u2A7C',
+      gtrapprox: '\u2A86',
+      gtrarr: '\u2978',
+      gtrdot: '\u22D7',
+      gtreqless: '\u22DB',
+      gtreqqless: '\u2A8C',
+      gtrless: '\u2277',
+      gtrsim: '\u2273',
+      gvertneqq: '\u2269\uFE00',
+      gvnE: '\u2269\uFE00',
+      Hacek: '\u02C7',
+      hairsp: '\u200A',
+      half: '\u00BD',
+      hamilt: '\u210B',
+      HARDcy: '\u042A',
+      hardcy: '\u044A',
+      hArr: '\u21D4',
+      harr: '\u2194',
+      harrcir: '\u2948',
+      harrw: '\u21AD',
+      Hat: '\u005E',
+      hbar: '\u210F',
+      Hcirc: '\u0124',
+      hcirc: '\u0125',
+      hearts: '\u2665',
+      heartsuit: '\u2665',
+      hellip: '\u2026',
+      hercon: '\u22B9',
+      Hfr: '\u210C',
+      hfr: '\uD835\uDD25',
+      HilbertSpace: '\u210B',
+      hksearow: '\u2925',
+      hkswarow: '\u2926',
+      hoarr: '\u21FF',
+      homtht: '\u223B',
+      hookleftarrow: '\u21A9',
+      hookrightarrow: '\u21AA',
+      Hopf: '\u210D',
+      hopf: '\uD835\uDD59',
+      horbar: '\u2015',
+      HorizontalLine: '\u2500',
+      Hscr: '\u210B',
+      hscr: '\uD835\uDCBD',
+      hslash: '\u210F',
+      Hstrok: '\u0126',
+      hstrok: '\u0127',
+      HumpDownHump: '\u224E',
+      HumpEqual: '\u224F',
+      hybull: '\u2043',
+      hyphen: '\u2010',
+      Iacute: '\u00CD',
+      iacute: '\u00ED',
+      ic: '\u2063',
+      Icirc: '\u00CE',
+      icirc: '\u00EE',
+      Icy: '\u0418',
+      icy: '\u0438',
+      Idot: '\u0130',
+      IEcy: '\u0415',
+      iecy: '\u0435',
+      iexcl: '\u00A1',
+      iff: '\u21D4',
+      Ifr: '\u2111',
+      ifr: '\uD835\uDD26',
+      Igrave: '\u00CC',
+      igrave: '\u00EC',
+      ii: '\u2148',
+      iiiint: '\u2A0C',
+      iiint: '\u222D',
+      iinfin: '\u29DC',
+      iiota: '\u2129',
+      IJlig: '\u0132',
+      ijlig: '\u0133',
+      Im: '\u2111',
+      Imacr: '\u012A',
+      imacr: '\u012B',
+      image: '\u2111',
+      ImaginaryI: '\u2148',
+      imagline: '\u2110',
+      imagpart: '\u2111',
+      imath: '\u0131',
+      imof: '\u22B7',
+      imped: '\u01B5',
+      Implies: '\u21D2',
+      in: '\u2208',
+      incare: '\u2105',
+      infin: '\u221E',
+      infintie: '\u29DD',
+      inodot: '\u0131',
+      Int: '\u222C',
+      int: '\u222B',
+      intcal: '\u22BA',
+      integers: '\u2124',
+      Integral: '\u222B',
+      intercal: '\u22BA',
+      Intersection: '\u22C2',
+      intlarhk: '\u2A17',
+      intprod: '\u2A3C',
+      InvisibleComma: '\u2063',
+      InvisibleTimes: '\u2062',
+      IOcy: '\u0401',
+      iocy: '\u0451',
+      Iogon: '\u012E',
+      iogon: '\u012F',
+      Iopf: '\uD835\uDD40',
+      iopf: '\uD835\uDD5A',
+      Iota: '\u0399',
+      iota: '\u03B9',
+      iprod: '\u2A3C',
+      iquest: '\u00BF',
+      Iscr: '\u2110',
+      iscr: '\uD835\uDCBE',
+      isin: '\u2208',
+      isindot: '\u22F5',
+      isinE: '\u22F9',
+      isins: '\u22F4',
+      isinsv: '\u22F3',
+      isinv: '\u2208',
+      it: '\u2062',
+      Itilde: '\u0128',
+      itilde: '\u0129',
+      Iukcy: '\u0406',
+      iukcy: '\u0456',
+      Iuml: '\u00CF',
+      iuml: '\u00EF',
+      Jcirc: '\u0134',
+      jcirc: '\u0135',
+      Jcy: '\u0419',
+      jcy: '\u0439',
+      Jfr: '\uD835\uDD0D',
+      jfr: '\uD835\uDD27',
+      jmath: '\u0237',
+      Jopf: '\uD835\uDD41',
+      jopf: '\uD835\uDD5B',
+      Jscr: '\uD835\uDCA5',
+      jscr: '\uD835\uDCBF',
+      Jsercy: '\u0408',
+      jsercy: '\u0458',
+      Jukcy: '\u0404',
+      jukcy: '\u0454',
+      Kappa: '\u039A',
+      kappa: '\u03BA',
+      kappav: '\u03F0',
+      Kcedil: '\u0136',
+      kcedil: '\u0137',
+      Kcy: '\u041A',
+      kcy: '\u043A',
+      Kfr: '\uD835\uDD0E',
+      kfr: '\uD835\uDD28',
+      kgreen: '\u0138',
+      KHcy: '\u0425',
+      khcy: '\u0445',
+      KJcy: '\u040C',
+      kjcy: '\u045C',
+      Kopf: '\uD835\uDD42',
+      kopf: '\uD835\uDD5C',
+      Kscr: '\uD835\uDCA6',
+      kscr: '\uD835\uDCC0',
+      lAarr: '\u21DA',
+      Lacute: '\u0139',
+      lacute: '\u013A',
+      laemptyv: '\u29B4',
+      lagran: '\u2112',
+      Lambda: '\u039B',
+      lambda: '\u03BB',
+      Lang: '\u27EA',
+      lang: '\u27E8',
+      langd: '\u2991',
+      langle: '\u27E8',
+      lap: '\u2A85',
+      Laplacetrf: '\u2112',
+      laquo: '\u00AB',
+      Larr: '\u219E',
+      lArr: '\u21D0',
+      larr: '\u2190',
+      larrb: '\u21E4',
+      larrbfs: '\u291F',
+      larrfs: '\u291D',
+      larrhk: '\u21A9',
+      larrlp: '\u21AB',
+      larrpl: '\u2939',
+      larrsim: '\u2973',
+      larrtl: '\u21A2',
+      lat: '\u2AAB',
+      lAtail: '\u291B',
+      latail: '\u2919',
+      late: '\u2AAD',
+      lates: '\u2AAD\uFE00',
+      lBarr: '\u290E',
+      lbarr: '\u290C',
+      lbbrk: '\u2772',
+      lbrace: '\u007B',
+      lbrack: '\u005B',
+      lbrke: '\u298B',
+      lbrksld: '\u298F',
+      lbrkslu: '\u298D',
+      Lcaron: '\u013D',
+      lcaron: '\u013E',
+      Lcedil: '\u013B',
+      lcedil: '\u013C',
+      lceil: '\u2308',
+      lcub: '\u007B',
+      Lcy: '\u041B',
+      lcy: '\u043B',
+      ldca: '\u2936',
+      ldquo: '\u201C',
+      ldquor: '\u201E',
+      ldrdhar: '\u2967',
+      ldrushar: '\u294B',
+      ldsh: '\u21B2',
+      lE: '\u2266',
+      le: '\u2264',
+      LeftAngleBracket: '\u27E8',
+      LeftArrow: '\u2190',
+      Leftarrow: '\u21D0',
+      leftarrow: '\u2190',
+      LeftArrowBar: '\u21E4',
+      LeftArrowRightArrow: '\u21C6',
+      leftarrowtail: '\u21A2',
+      LeftCeiling: '\u2308',
+      LeftDoubleBracket: '\u27E6',
+      LeftDownTeeVector: '\u2961',
+      LeftDownVector: '\u21C3',
+      LeftDownVectorBar: '\u2959',
+      LeftFloor: '\u230A',
+      leftharpoondown: '\u21BD',
+      leftharpoonup: '\u21BC',
+      leftleftarrows: '\u21C7',
+      LeftRightArrow: '\u2194',
+      Leftrightarrow: '\u21D4',
+      leftrightarrow: '\u2194',
+      leftrightarrows: '\u21C6',
+      leftrightharpoons: '\u21CB',
+      leftrightsquigarrow: '\u21AD',
+      LeftRightVector: '\u294E',
+      LeftTee: '\u22A3',
+      LeftTeeArrow: '\u21A4',
+      LeftTeeVector: '\u295A',
+      leftthreetimes: '\u22CB',
+      LeftTriangle: '\u22B2',
+      LeftTriangleBar: '\u29CF',
+      LeftTriangleEqual: '\u22B4',
+      LeftUpDownVector: '\u2951',
+      LeftUpTeeVector: '\u2960',
+      LeftUpVector: '\u21BF',
+      LeftUpVectorBar: '\u2958',
+      LeftVector: '\u21BC',
+      LeftVectorBar: '\u2952',
+      lEg: '\u2A8B',
+      leg: '\u22DA',
+      leq: '\u2264',
+      leqq: '\u2266',
+      leqslant: '\u2A7D',
+      les: '\u2A7D',
+      lescc: '\u2AA8',
+      lesdot: '\u2A7F',
+      lesdoto: '\u2A81',
+      lesdotor: '\u2A83',
+      lesg: '\u22DA\uFE00',
+      lesges: '\u2A93',
+      lessapprox: '\u2A85',
+      lessdot: '\u22D6',
+      lesseqgtr: '\u22DA',
+      lesseqqgtr: '\u2A8B',
+      LessEqualGreater: '\u22DA',
+      LessFullEqual: '\u2266',
+      LessGreater: '\u2276',
+      lessgtr: '\u2276',
+      LessLess: '\u2AA1',
+      lesssim: '\u2272',
+      LessSlantEqual: '\u2A7D',
+      LessTilde: '\u2272',
+      lfisht: '\u297C',
+      lfloor: '\u230A',
+      Lfr: '\uD835\uDD0F',
+      lfr: '\uD835\uDD29',
+      lg: '\u2276',
+      lgE: '\u2A91',
+      lHar: '\u2962',
+      lhard: '\u21BD',
+      lharu: '\u21BC',
+      lharul: '\u296A',
+      lhblk: '\u2584',
+      LJcy: '\u0409',
+      ljcy: '\u0459',
+      Ll: '\u22D8',
+      ll: '\u226A',
+      llarr: '\u21C7',
+      llcorner: '\u231E',
+      Lleftarrow: '\u21DA',
+      llhard: '\u296B',
+      lltri: '\u25FA',
+      Lmidot: '\u013F',
+      lmidot: '\u0140',
+      lmoust: '\u23B0',
+      lmoustache: '\u23B0',
+      lnap: '\u2A89',
+      lnapprox: '\u2A89',
+      lnE: '\u2268',
+      lne: '\u2A87',
+      lneq: '\u2A87',
+      lneqq: '\u2268',
+      lnsim: '\u22E6',
+      loang: '\u27EC',
+      loarr: '\u21FD',
+      lobrk: '\u27E6',
+      LongLeftArrow: '\u27F5',
+      Longleftarrow: '\u27F8',
+      longleftarrow: '\u27F5',
+      LongLeftRightArrow: '\u27F7',
+      Longleftrightarrow: '\u27FA',
+      longleftrightarrow: '\u27F7',
+      longmapsto: '\u27FC',
+      LongRightArrow: '\u27F6',
+      Longrightarrow: '\u27F9',
+      longrightarrow: '\u27F6',
+      looparrowleft: '\u21AB',
+      looparrowright: '\u21AC',
+      lopar: '\u2985',
+      Lopf: '\uD835\uDD43',
+      lopf: '\uD835\uDD5D',
+      loplus: '\u2A2D',
+      lotimes: '\u2A34',
+      lowast: '\u2217',
+      lowbar: '\u005F',
+      LowerLeftArrow: '\u2199',
+      LowerRightArrow: '\u2198',
+      loz: '\u25CA',
+      lozenge: '\u25CA',
+      lozf: '\u29EB',
+      lpar: '\u0028',
+      lparlt: '\u2993',
+      lrarr: '\u21C6',
+      lrcorner: '\u231F',
+      lrhar: '\u21CB',
+      lrhard: '\u296D',
+      lrm: '\u200E',
+      lrtri: '\u22BF',
+      lsaquo: '\u2039',
+      Lscr: '\u2112',
+      lscr: '\uD835\uDCC1',
+      Lsh: '\u21B0',
+      lsh: '\u21B0',
+      lsim: '\u2272',
+      lsime: '\u2A8D',
+      lsimg: '\u2A8F',
+      lsqb: '\u005B',
+      lsquo: '\u2018',
+      lsquor: '\u201A',
+      Lstrok: '\u0141',
+      lstrok: '\u0142',
+      Lt: '\u226A',
+      LT: '\u003C',
+      lt: '\u003C',
+      ltcc: '\u2AA6',
+      ltcir: '\u2A79',
+      ltdot: '\u22D6',
+      lthree: '\u22CB',
+      ltimes: '\u22C9',
+      ltlarr: '\u2976',
+      ltquest: '\u2A7B',
+      ltri: '\u25C3',
+      ltrie: '\u22B4',
+      ltrif: '\u25C2',
+      ltrPar: '\u2996',
+      lurdshar: '\u294A',
+      luruhar: '\u2966',
+      lvertneqq: '\u2268\uFE00',
+      lvnE: '\u2268\uFE00',
+      macr: '\u00AF',
+      male: '\u2642',
+      malt: '\u2720',
+      maltese: '\u2720',
+      Map: '\u2905',
+      map: '\u21A6',
+      mapsto: '\u21A6',
+      mapstodown: '\u21A7',
+      mapstoleft: '\u21A4',
+      mapstoup: '\u21A5',
+      marker: '\u25AE',
+      mcomma: '\u2A29',
+      Mcy: '\u041C',
+      mcy: '\u043C',
+      mdash: '\u2014',
+      mDDot: '\u223A',
+      measuredangle: '\u2221',
+      MediumSpace: '\u205F',
+      Mellintrf: '\u2133',
+      Mfr: '\uD835\uDD10',
+      mfr: '\uD835\uDD2A',
+      mho: '\u2127',
+      micro: '\u00B5',
+      mid: '\u2223',
+      midast: '\u002A',
+      midcir: '\u2AF0',
+      middot: '\u00B7',
+      minus: '\u2212',
+      minusb: '\u229F',
+      minusd: '\u2238',
+      minusdu: '\u2A2A',
+      MinusPlus: '\u2213',
+      mlcp: '\u2ADB',
+      mldr: '\u2026',
+      mnplus: '\u2213',
+      models: '\u22A7',
+      Mopf: '\uD835\uDD44',
+      mopf: '\uD835\uDD5E',
+      mp: '\u2213',
+      Mscr: '\u2133',
+      mscr: '\uD835\uDCC2',
+      mstpos: '\u223E',
+      Mu: '\u039C',
+      mu: '\u03BC',
+      multimap: '\u22B8',
+      mumap: '\u22B8',
+      nabla: '\u2207',
+      Nacute: '\u0143',
+      nacute: '\u0144',
+      nang: '\u2220\u20D2',
+      nap: '\u2249',
+      napE: '\u2A70\u0338',
+      napid: '\u224B\u0338',
+      napos: '\u0149',
+      napprox: '\u2249',
+      natur: '\u266E',
+      natural: '\u266E',
+      naturals: '\u2115',
+      nbsp: '\u00A0',
+      nbump: '\u224E\u0338',
+      nbumpe: '\u224F\u0338',
+      ncap: '\u2A43',
+      Ncaron: '\u0147',
+      ncaron: '\u0148',
+      Ncedil: '\u0145',
+      ncedil: '\u0146',
+      ncong: '\u2247',
+      ncongdot: '\u2A6D\u0338',
+      ncup: '\u2A42',
+      Ncy: '\u041D',
+      ncy: '\u043D',
+      ndash: '\u2013',
+      ne: '\u2260',
+      nearhk: '\u2924',
+      neArr: '\u21D7',
+      nearr: '\u2197',
+      nearrow: '\u2197',
+      nedot: '\u2250\u0338',
+      NegativeMediumSpace: '\u200B',
+      NegativeThickSpace: '\u200B',
+      NegativeThinSpace: '\u200B',
+      NegativeVeryThinSpace: '\u200B',
+      nequiv: '\u2262',
+      nesear: '\u2928',
+      nesim: '\u2242\u0338',
+      NestedGreaterGreater: '\u226B',
+      NestedLessLess: '\u226A',
+      NewLine: '\u000A',
+      nexist: '\u2204',
+      nexists: '\u2204',
+      Nfr: '\uD835\uDD11',
+      nfr: '\uD835\uDD2B',
+      ngE: '\u2267\u0338',
+      nge: '\u2271',
+      ngeq: '\u2271',
+      ngeqq: '\u2267\u0338',
+      ngeqslant: '\u2A7E\u0338',
+      nges: '\u2A7E\u0338',
+      nGg: '\u22D9\u0338',
+      ngsim: '\u2275',
+      nGt: '\u226B\u20D2',
+      ngt: '\u226F',
+      ngtr: '\u226F',
+      nGtv: '\u226B\u0338',
+      nhArr: '\u21CE',
+      nharr: '\u21AE',
+      nhpar: '\u2AF2',
+      ni: '\u220B',
+      nis: '\u22FC',
+      nisd: '\u22FA',
+      niv: '\u220B',
+      NJcy: '\u040A',
+      njcy: '\u045A',
+      nlArr: '\u21CD',
+      nlarr: '\u219A',
+      nldr: '\u2025',
+      nlE: '\u2266\u0338',
+      nle: '\u2270',
+      nLeftarrow: '\u21CD',
+      nleftarrow: '\u219A',
+      nLeftrightarrow: '\u21CE',
+      nleftrightarrow: '\u21AE',
+      nleq: '\u2270',
+      nleqq: '\u2266\u0338',
+      nleqslant: '\u2A7D\u0338',
+      nles: '\u2A7D\u0338',
+      nless: '\u226E',
+      nLl: '\u22D8\u0338',
+      nlsim: '\u2274',
+      nLt: '\u226A\u20D2',
+      nlt: '\u226E',
+      nltri: '\u22EA',
+      nltrie: '\u22EC',
+      nLtv: '\u226A\u0338',
+      nmid: '\u2224',
+      NoBreak: '\u2060',
+      NonBreakingSpace: '\u00A0',
+      Nopf: '\u2115',
+      nopf: '\uD835\uDD5F',
+      Not: '\u2AEC',
+      not: '\u00AC',
+      NotCongruent: '\u2262',
+      NotCupCap: '\u226D',
+      NotDoubleVerticalBar: '\u2226',
+      NotElement: '\u2209',
+      NotEqual: '\u2260',
+      NotEqualTilde: '\u2242\u0338',
+      NotExists: '\u2204',
+      NotGreater: '\u226F',
+      NotGreaterEqual: '\u2271',
+      NotGreaterFullEqual: '\u2267\u0338',
+      NotGreaterGreater: '\u226B\u0338',
+      NotGreaterLess: '\u2279',
+      NotGreaterSlantEqual: '\u2A7E\u0338',
+      NotGreaterTilde: '\u2275',
+      NotHumpDownHump: '\u224E\u0338',
+      NotHumpEqual: '\u224F\u0338',
+      notin: '\u2209',
+      notindot: '\u22F5\u0338',
+      notinE: '\u22F9\u0338',
+      notinva: '\u2209',
+      notinvb: '\u22F7',
+      notinvc: '\u22F6',
+      NotLeftTriangle: '\u22EA',
+      NotLeftTriangleBar: '\u29CF\u0338',
+      NotLeftTriangleEqual: '\u22EC',
+      NotLess: '\u226E',
+      NotLessEqual: '\u2270',
+      NotLessGreater: '\u2278',
+      NotLessLess: '\u226A\u0338',
+      NotLessSlantEqual: '\u2A7D\u0338',
+      NotLessTilde: '\u2274',
+      NotNestedGreaterGreater: '\u2AA2\u0338',
+      NotNestedLessLess: '\u2AA1\u0338',
+      notni: '\u220C',
+      notniva: '\u220C',
+      notnivb: '\u22FE',
+      notnivc: '\u22FD',
+      NotPrecedes: '\u2280',
+      NotPrecedesEqual: '\u2AAF\u0338',
+      NotPrecedesSlantEqual: '\u22E0',
+      NotReverseElement: '\u220C',
+      NotRightTriangle: '\u22EB',
+      NotRightTriangleBar: '\u29D0\u0338',
+      NotRightTriangleEqual: '\u22ED',
+      NotSquareSubset: '\u228F\u0338',
+      NotSquareSubsetEqual: '\u22E2',
+      NotSquareSuperset: '\u2290\u0338',
+      NotSquareSupersetEqual: '\u22E3',
+      NotSubset: '\u2282\u20D2',
+      NotSubsetEqual: '\u2288',
+      NotSucceeds: '\u2281',
+      NotSucceedsEqual: '\u2AB0\u0338',
+      NotSucceedsSlantEqual: '\u22E1',
+      NotSucceedsTilde: '\u227F\u0338',
+      NotSuperset: '\u2283\u20D2',
+      NotSupersetEqual: '\u2289',
+      NotTilde: '\u2241',
+      NotTildeEqual: '\u2244',
+      NotTildeFullEqual: '\u2247',
+      NotTildeTilde: '\u2249',
+      NotVerticalBar: '\u2224',
+      npar: '\u2226',
+      nparallel: '\u2226',
+      nparsl: '\u2AFD\u20E5',
+      npart: '\u2202\u0338',
+      npolint: '\u2A14',
+      npr: '\u2280',
+      nprcue: '\u22E0',
+      npre: '\u2AAF\u0338',
+      nprec: '\u2280',
+      npreceq: '\u2AAF\u0338',
+      nrArr: '\u21CF',
+      nrarr: '\u219B',
+      nrarrc: '\u2933\u0338',
+      nrarrw: '\u219D\u0338',
+      nRightarrow: '\u21CF',
+      nrightarrow: '\u219B',
+      nrtri: '\u22EB',
+      nrtrie: '\u22ED',
+      nsc: '\u2281',
+      nsccue: '\u22E1',
+      nsce: '\u2AB0\u0338',
+      Nscr: '\uD835\uDCA9',
+      nscr: '\uD835\uDCC3',
+      nshortmid: '\u2224',
+      nshortparallel: '\u2226',
+      nsim: '\u2241',
+      nsime: '\u2244',
+      nsimeq: '\u2244',
+      nsmid: '\u2224',
+      nspar: '\u2226',
+      nsqsube: '\u22E2',
+      nsqsupe: '\u22E3',
+      nsub: '\u2284',
+      nsubE: '\u2AC5\u0338',
+      nsube: '\u2288',
+      nsubset: '\u2282\u20D2',
+      nsubseteq: '\u2288',
+      nsubseteqq: '\u2AC5\u0338',
+      nsucc: '\u2281',
+      nsucceq: '\u2AB0\u0338',
+      nsup: '\u2285',
+      nsupE: '\u2AC6\u0338',
+      nsupe: '\u2289',
+      nsupset: '\u2283\u20D2',
+      nsupseteq: '\u2289',
+      nsupseteqq: '\u2AC6\u0338',
+      ntgl: '\u2279',
+      Ntilde: '\u00D1',
+      ntilde: '\u00F1',
+      ntlg: '\u2278',
+      ntriangleleft: '\u22EA',
+      ntrianglelefteq: '\u22EC',
+      ntriangleright: '\u22EB',
+      ntrianglerighteq: '\u22ED',
+      Nu: '\u039D',
+      nu: '\u03BD',
+      num: '\u0023',
+      numero: '\u2116',
+      numsp: '\u2007',
+      nvap: '\u224D\u20D2',
+      nVDash: '\u22AF',
+      nVdash: '\u22AE',
+      nvDash: '\u22AD',
+      nvdash: '\u22AC',
+      nvge: '\u2265\u20D2',
+      nvgt: '\u003E\u20D2',
+      nvHarr: '\u2904',
+      nvinfin: '\u29DE',
+      nvlArr: '\u2902',
+      nvle: '\u2264\u20D2',
+      nvlt: '\u003C\u20D2',
+      nvltrie: '\u22B4\u20D2',
+      nvrArr: '\u2903',
+      nvrtrie: '\u22B5\u20D2',
+      nvsim: '\u223C\u20D2',
+      nwarhk: '\u2923',
+      nwArr: '\u21D6',
+      nwarr: '\u2196',
+      nwarrow: '\u2196',
+      nwnear: '\u2927',
+      Oacute: '\u00D3',
+      oacute: '\u00F3',
+      oast: '\u229B',
+      ocir: '\u229A',
+      Ocirc: '\u00D4',
+      ocirc: '\u00F4',
+      Ocy: '\u041E',
+      ocy: '\u043E',
+      odash: '\u229D',
+      Odblac: '\u0150',
+      odblac: '\u0151',
+      odiv: '\u2A38',
+      odot: '\u2299',
+      odsold: '\u29BC',
+      OElig: '\u0152',
+      oelig: '\u0153',
+      ofcir: '\u29BF',
+      Ofr: '\uD835\uDD12',
+      ofr: '\uD835\uDD2C',
+      ogon: '\u02DB',
+      Ograve: '\u00D2',
+      ograve: '\u00F2',
+      ogt: '\u29C1',
+      ohbar: '\u29B5',
+      ohm: '\u03A9',
+      oint: '\u222E',
+      olarr: '\u21BA',
+      olcir: '\u29BE',
+      olcross: '\u29BB',
+      oline: '\u203E',
+      olt: '\u29C0',
+      Omacr: '\u014C',
+      omacr: '\u014D',
+      Omega: '\u03A9',
+      omega: '\u03C9',
+      Omicron: '\u039F',
+      omicron: '\u03BF',
+      omid: '\u29B6',
+      ominus: '\u2296',
+      Oopf: '\uD835\uDD46',
+      oopf: '\uD835\uDD60',
+      opar: '\u29B7',
+      OpenCurlyDoubleQuote: '\u201C',
+      OpenCurlyQuote: '\u2018',
+      operp: '\u29B9',
+      oplus: '\u2295',
+      Or: '\u2A54',
+      or: '\u2228',
+      orarr: '\u21BB',
+      ord: '\u2A5D',
+      order: '\u2134',
+      orderof: '\u2134',
+      ordf: '\u00AA',
+      ordm: '\u00BA',
+      origof: '\u22B6',
+      oror: '\u2A56',
+      orslope: '\u2A57',
+      orv: '\u2A5B',
+      oS: '\u24C8',
+      Oscr: '\uD835\uDCAA',
+      oscr: '\u2134',
+      Oslash: '\u00D8',
+      oslash: '\u00F8',
+      osol: '\u2298',
+      Otilde: '\u00D5',
+      otilde: '\u00F5',
+      Otimes: '\u2A37',
+      otimes: '\u2297',
+      otimesas: '\u2A36',
+      Ouml: '\u00D6',
+      ouml: '\u00F6',
+      ovbar: '\u233D',
+      OverBar: '\u203E',
+      OverBrace: '\u23DE',
+      OverBracket: '\u23B4',
+      OverParenthesis: '\u23DC',
+      par: '\u2225',
+      para: '\u00B6',
+      parallel: '\u2225',
+      parsim: '\u2AF3',
+      parsl: '\u2AFD',
+      part: '\u2202',
+      PartialD: '\u2202',
+      Pcy: '\u041F',
+      pcy: '\u043F',
+      percnt: '\u0025',
+      period: '\u002E',
+      permil: '\u2030',
+      perp: '\u22A5',
+      pertenk: '\u2031',
+      Pfr: '\uD835\uDD13',
+      pfr: '\uD835\uDD2D',
+      Phi: '\u03A6',
+      phi: '\u03C6',
+      phiv: '\u03D5',
+      phmmat: '\u2133',
+      phone: '\u260E',
+      Pi: '\u03A0',
+      pi: '\u03C0',
+      pitchfork: '\u22D4',
+      piv: '\u03D6',
+      planck: '\u210F',
+      planckh: '\u210E',
+      plankv: '\u210F',
+      plus: '\u002B',
+      plusacir: '\u2A23',
+      plusb: '\u229E',
+      pluscir: '\u2A22',
+      plusdo: '\u2214',
+      plusdu: '\u2A25',
+      pluse: '\u2A72',
+      PlusMinus: '\u00B1',
+      plusmn: '\u00B1',
+      plussim: '\u2A26',
+      plustwo: '\u2A27',
+      pm: '\u00B1',
+      Poincareplane: '\u210C',
+      pointint: '\u2A15',
+      Popf: '\u2119',
+      popf: '\uD835\uDD61',
+      pound: '\u00A3',
+      Pr: '\u2ABB',
+      pr: '\u227A',
+      prap: '\u2AB7',
+      prcue: '\u227C',
+      prE: '\u2AB3',
+      pre: '\u2AAF',
+      prec: '\u227A',
+      precapprox: '\u2AB7',
+      preccurlyeq: '\u227C',
+      Precedes: '\u227A',
+      PrecedesEqual: '\u2AAF',
+      PrecedesSlantEqual: '\u227C',
+      PrecedesTilde: '\u227E',
+      preceq: '\u2AAF',
+      precnapprox: '\u2AB9',
+      precneqq: '\u2AB5',
+      precnsim: '\u22E8',
+      precsim: '\u227E',
+      Prime: '\u2033',
+      prime: '\u2032',
+      primes: '\u2119',
+      prnap: '\u2AB9',
+      prnE: '\u2AB5',
+      prnsim: '\u22E8',
+      prod: '\u220F',
+      Product: '\u220F',
+      profalar: '\u232E',
+      profline: '\u2312',
+      profsurf: '\u2313',
+      prop: '\u221D',
+      Proportion: '\u2237',
+      Proportional: '\u221D',
+      propto: '\u221D',
+      prsim: '\u227E',
+      prurel: '\u22B0',
+      Pscr: '\uD835\uDCAB',
+      pscr: '\uD835\uDCC5',
+      Psi: '\u03A8',
+      psi: '\u03C8',
+      puncsp: '\u2008',
+      Qfr: '\uD835\uDD14',
+      qfr: '\uD835\uDD2E',
+      qint: '\u2A0C',
+      Qopf: '\u211A',
+      qopf: '\uD835\uDD62',
+      qprime: '\u2057',
+      Qscr: '\uD835\uDCAC',
+      qscr: '\uD835\uDCC6',
+      quaternions: '\u210D',
+      quatint: '\u2A16',
+      quest: '\u003F',
+      questeq: '\u225F',
+      QUOT: '\u0022',
+      quot: '\u0022',
+      rAarr: '\u21DB',
+      race: '\u223D\u0331',
+      Racute: '\u0154',
+      racute: '\u0155',
+      radic: '\u221A',
+      raemptyv: '\u29B3',
+      Rang: '\u27EB',
+      rang: '\u27E9',
+      rangd: '\u2992',
+      range: '\u29A5',
+      rangle: '\u27E9',
+      raquo: '\u00BB',
+      Rarr: '\u21A0',
+      rArr: '\u21D2',
+      rarr: '\u2192',
+      rarrap: '\u2975',
+      rarrb: '\u21E5',
+      rarrbfs: '\u2920',
+      rarrc: '\u2933',
+      rarrfs: '\u291E',
+      rarrhk: '\u21AA',
+      rarrlp: '\u21AC',
+      rarrpl: '\u2945',
+      rarrsim: '\u2974',
+      Rarrtl: '\u2916',
+      rarrtl: '\u21A3',
+      rarrw: '\u219D',
+      rAtail: '\u291C',
+      ratail: '\u291A',
+      ratio: '\u2236',
+      rationals: '\u211A',
+      RBarr: '\u2910',
+      rBarr: '\u290F',
+      rbarr: '\u290D',
+      rbbrk: '\u2773',
+      rbrace: '\u007D',
+      rbrack: '\u005D',
+      rbrke: '\u298C',
+      rbrksld: '\u298E',
+      rbrkslu: '\u2990',
+      Rcaron: '\u0158',
+      rcaron: '\u0159',
+      Rcedil: '\u0156',
+      rcedil: '\u0157',
+      rceil: '\u2309',
+      rcub: '\u007D',
+      Rcy: '\u0420',
+      rcy: '\u0440',
+      rdca: '\u2937',
+      rdldhar: '\u2969',
+      rdquo: '\u201D',
+      rdquor: '\u201D',
+      rdsh: '\u21B3',
+      Re: '\u211C',
+      real: '\u211C',
+      realine: '\u211B',
+      realpart: '\u211C',
+      reals: '\u211D',
+      rect: '\u25AD',
+      REG: '\u00AE',
+      reg: '\u00AE',
+      ReverseElement: '\u220B',
+      ReverseEquilibrium: '\u21CB',
+      ReverseUpEquilibrium: '\u296F',
+      rfisht: '\u297D',
+      rfloor: '\u230B',
+      Rfr: '\u211C',
+      rfr: '\uD835\uDD2F',
+      rHar: '\u2964',
+      rhard: '\u21C1',
+      rharu: '\u21C0',
+      rharul: '\u296C',
+      Rho: '\u03A1',
+      rho: '\u03C1',
+      rhov: '\u03F1',
+      RightAngleBracket: '\u27E9',
+      RightArrow: '\u2192',
+      Rightarrow: '\u21D2',
+      rightarrow: '\u2192',
+      RightArrowBar: '\u21E5',
+      RightArrowLeftArrow: '\u21C4',
+      rightarrowtail: '\u21A3',
+      RightCeiling: '\u2309',
+      RightDoubleBracket: '\u27E7',
+      RightDownTeeVector: '\u295D',
+      RightDownVector: '\u21C2',
+      RightDownVectorBar: '\u2955',
+      RightFloor: '\u230B',
+      rightharpoondown: '\u21C1',
+      rightharpoonup: '\u21C0',
+      rightleftarrows: '\u21C4',
+      rightleftharpoons: '\u21CC',
+      rightrightarrows: '\u21C9',
+      rightsquigarrow: '\u219D',
+      RightTee: '\u22A2',
+      RightTeeArrow: '\u21A6',
+      RightTeeVector: '\u295B',
+      rightthreetimes: '\u22CC',
+      RightTriangle: '\u22B3',
+      RightTriangleBar: '\u29D0',
+      RightTriangleEqual: '\u22B5',
+      RightUpDownVector: '\u294F',
+      RightUpTeeVector: '\u295C',
+      RightUpVector: '\u21BE',
+      RightUpVectorBar: '\u2954',
+      RightVector: '\u21C0',
+      RightVectorBar: '\u2953',
+      ring: '\u02DA',
+      risingdotseq: '\u2253',
+      rlarr: '\u21C4',
+      rlhar: '\u21CC',
+      rlm: '\u200F',
+      rmoust: '\u23B1',
+      rmoustache: '\u23B1',
+      rnmid: '\u2AEE',
+      roang: '\u27ED',
+      roarr: '\u21FE',
+      robrk: '\u27E7',
+      ropar: '\u2986',
+      Ropf: '\u211D',
+      ropf: '\uD835\uDD63',
+      roplus: '\u2A2E',
+      rotimes: '\u2A35',
+      RoundImplies: '\u2970',
+      rpar: '\u0029',
+      rpargt: '\u2994',
+      rppolint: '\u2A12',
+      rrarr: '\u21C9',
+      Rrightarrow: '\u21DB',
+      rsaquo: '\u203A',
+      Rscr: '\u211B',
+      rscr: '\uD835\uDCC7',
+      Rsh: '\u21B1',
+      rsh: '\u21B1',
+      rsqb: '\u005D',
+      rsquo: '\u2019',
+      rsquor: '\u2019',
+      rthree: '\u22CC',
+      rtimes: '\u22CA',
+      rtri: '\u25B9',
+      rtrie: '\u22B5',
+      rtrif: '\u25B8',
+      rtriltri: '\u29CE',
+      RuleDelayed: '\u29F4',
+      ruluhar: '\u2968',
+      rx: '\u211E',
+      Sacute: '\u015A',
+      sacute: '\u015B',
+      sbquo: '\u201A',
+      Sc: '\u2ABC',
+      sc: '\u227B',
+      scap: '\u2AB8',
+      Scaron: '\u0160',
+      scaron: '\u0161',
+      sccue: '\u227D',
+      scE: '\u2AB4',
+      sce: '\u2AB0',
+      Scedil: '\u015E',
+      scedil: '\u015F',
+      Scirc: '\u015C',
+      scirc: '\u015D',
+      scnap: '\u2ABA',
+      scnE: '\u2AB6',
+      scnsim: '\u22E9',
+      scpolint: '\u2A13',
+      scsim: '\u227F',
+      Scy: '\u0421',
+      scy: '\u0441',
+      sdot: '\u22C5',
+      sdotb: '\u22A1',
+      sdote: '\u2A66',
+      searhk: '\u2925',
+      seArr: '\u21D8',
+      searr: '\u2198',
+      searrow: '\u2198',
+      sect: '\u00A7',
+      semi: '\u003B',
+      seswar: '\u2929',
+      setminus: '\u2216',
+      setmn: '\u2216',
+      sext: '\u2736',
+      Sfr: '\uD835\uDD16',
+      sfr: '\uD835\uDD30',
+      sfrown: '\u2322',
+      sharp: '\u266F',
+      SHCHcy: '\u0429',
+      shchcy: '\u0449',
+      SHcy: '\u0428',
+      shcy: '\u0448',
+      ShortDownArrow: '\u2193',
+      ShortLeftArrow: '\u2190',
+      shortmid: '\u2223',
+      shortparallel: '\u2225',
+      ShortRightArrow: '\u2192',
+      ShortUpArrow: '\u2191',
+      shy: '\u00AD',
+      Sigma: '\u03A3',
+      sigma: '\u03C3',
+      sigmaf: '\u03C2',
+      sigmav: '\u03C2',
+      sim: '\u223C',
+      simdot: '\u2A6A',
+      sime: '\u2243',
+      simeq: '\u2243',
+      simg: '\u2A9E',
+      simgE: '\u2AA0',
+      siml: '\u2A9D',
+      simlE: '\u2A9F',
+      simne: '\u2246',
+      simplus: '\u2A24',
+      simrarr: '\u2972',
+      slarr: '\u2190',
+      SmallCircle: '\u2218',
+      smallsetminus: '\u2216',
+      smashp: '\u2A33',
+      smeparsl: '\u29E4',
+      smid: '\u2223',
+      smile: '\u2323',
+      smt: '\u2AAA',
+      smte: '\u2AAC',
+      smtes: '\u2AAC\uFE00',
+      SOFTcy: '\u042C',
+      softcy: '\u044C',
+      sol: '\u002F',
+      solb: '\u29C4',
+      solbar: '\u233F',
+      Sopf: '\uD835\uDD4A',
+      sopf: '\uD835\uDD64',
+      spades: '\u2660',
+      spadesuit: '\u2660',
+      spar: '\u2225',
+      sqcap: '\u2293',
+      sqcaps: '\u2293\uFE00',
+      sqcup: '\u2294',
+      sqcups: '\u2294\uFE00',
+      Sqrt: '\u221A',
+      sqsub: '\u228F',
+      sqsube: '\u2291',
+      sqsubset: '\u228F',
+      sqsubseteq: '\u2291',
+      sqsup: '\u2290',
+      sqsupe: '\u2292',
+      sqsupset: '\u2290',
+      sqsupseteq: '\u2292',
+      squ: '\u25A1',
+      Square: '\u25A1',
+      square: '\u25A1',
+      SquareIntersection: '\u2293',
+      SquareSubset: '\u228F',
+      SquareSubsetEqual: '\u2291',
+      SquareSuperset: '\u2290',
+      SquareSupersetEqual: '\u2292',
+      SquareUnion: '\u2294',
+      squarf: '\u25AA',
+      squf: '\u25AA',
+      srarr: '\u2192',
+      Sscr: '\uD835\uDCAE',
+      sscr: '\uD835\uDCC8',
+      ssetmn: '\u2216',
+      ssmile: '\u2323',
+      sstarf: '\u22C6',
+      Star: '\u22C6',
+      star: '\u2606',
+      starf: '\u2605',
+      straightepsilon: '\u03F5',
+      straightphi: '\u03D5',
+      strns: '\u00AF',
+      Sub: '\u22D0',
+      sub: '\u2282',
+      subdot: '\u2ABD',
+      subE: '\u2AC5',
+      sube: '\u2286',
+      subedot: '\u2AC3',
+      submult: '\u2AC1',
+      subnE: '\u2ACB',
+      subne: '\u228A',
+      subplus: '\u2ABF',
+      subrarr: '\u2979',
+      Subset: '\u22D0',
+      subset: '\u2282',
+      subseteq: '\u2286',
+      subseteqq: '\u2AC5',
+      SubsetEqual: '\u2286',
+      subsetneq: '\u228A',
+      subsetneqq: '\u2ACB',
+      subsim: '\u2AC7',
+      subsub: '\u2AD5',
+      subsup: '\u2AD3',
+      succ: '\u227B',
+      succapprox: '\u2AB8',
+      succcurlyeq: '\u227D',
+      Succeeds: '\u227B',
+      SucceedsEqual: '\u2AB0',
+      SucceedsSlantEqual: '\u227D',
+      SucceedsTilde: '\u227F',
+      succeq: '\u2AB0',
+      succnapprox: '\u2ABA',
+      succneqq: '\u2AB6',
+      succnsim: '\u22E9',
+      succsim: '\u227F',
+      SuchThat: '\u220B',
+      Sum: '\u2211',
+      sum: '\u2211',
+      sung: '\u266A',
+      Sup: '\u22D1',
+      sup: '\u2283',
+      sup1: '\u00B9',
+      sup2: '\u00B2',
+      sup3: '\u00B3',
+      supdot: '\u2ABE',
+      supdsub: '\u2AD8',
+      supE: '\u2AC6',
+      supe: '\u2287',
+      supedot: '\u2AC4',
+      Superset: '\u2283',
+      SupersetEqual: '\u2287',
+      suphsol: '\u27C9',
+      suphsub: '\u2AD7',
+      suplarr: '\u297B',
+      supmult: '\u2AC2',
+      supnE: '\u2ACC',
+      supne: '\u228B',
+      supplus: '\u2AC0',
+      Supset: '\u22D1',
+      supset: '\u2283',
+      supseteq: '\u2287',
+      supseteqq: '\u2AC6',
+      supsetneq: '\u228B',
+      supsetneqq: '\u2ACC',
+      supsim: '\u2AC8',
+      supsub: '\u2AD4',
+      supsup: '\u2AD6',
+      swarhk: '\u2926',
+      swArr: '\u21D9',
+      swarr: '\u2199',
+      swarrow: '\u2199',
+      swnwar: '\u292A',
+      szlig: '\u00DF',
+      Tab: '\u0009',
+      target: '\u2316',
+      Tau: '\u03A4',
+      tau: '\u03C4',
+      tbrk: '\u23B4',
+      Tcaron: '\u0164',
+      tcaron: '\u0165',
+      Tcedil: '\u0162',
+      tcedil: '\u0163',
+      Tcy: '\u0422',
+      tcy: '\u0442',
+      tdot: '\u20DB',
+      telrec: '\u2315',
+      Tfr: '\uD835\uDD17',
+      tfr: '\uD835\uDD31',
+      there4: '\u2234',
+      Therefore: '\u2234',
+      therefore: '\u2234',
+      Theta: '\u0398',
+      theta: '\u03B8',
+      thetasym: '\u03D1',
+      thetav: '\u03D1',
+      thickapprox: '\u2248',
+      thicksim: '\u223C',
+      ThickSpace: '\u205F\u200A',
+      thinsp: '\u2009',
+      ThinSpace: '\u2009',
+      thkap: '\u2248',
+      thksim: '\u223C',
+      THORN: '\u00DE',
+      thorn: '\u00FE',
+      Tilde: '\u223C',
+      tilde: '\u02DC',
+      TildeEqual: '\u2243',
+      TildeFullEqual: '\u2245',
+      TildeTilde: '\u2248',
+      times: '\u00D7',
+      timesb: '\u22A0',
+      timesbar: '\u2A31',
+      timesd: '\u2A30',
+      tint: '\u222D',
+      toea: '\u2928',
+      top: '\u22A4',
+      topbot: '\u2336',
+      topcir: '\u2AF1',
+      Topf: '\uD835\uDD4B',
+      topf: '\uD835\uDD65',
+      topfork: '\u2ADA',
+      tosa: '\u2929',
+      tprime: '\u2034',
+      TRADE: '\u2122',
+      trade: '\u2122',
+      triangle: '\u25B5',
+      triangledown: '\u25BF',
+      triangleleft: '\u25C3',
+      trianglelefteq: '\u22B4',
+      triangleq: '\u225C',
+      triangleright: '\u25B9',
+      trianglerighteq: '\u22B5',
+      tridot: '\u25EC',
+      trie: '\u225C',
+      triminus: '\u2A3A',
+      TripleDot: '\u20DB',
+      triplus: '\u2A39',
+      trisb: '\u29CD',
+      tritime: '\u2A3B',
+      trpezium: '\u23E2',
+      Tscr: '\uD835\uDCAF',
+      tscr: '\uD835\uDCC9',
+      TScy: '\u0426',
+      tscy: '\u0446',
+      TSHcy: '\u040B',
+      tshcy: '\u045B',
+      Tstrok: '\u0166',
+      tstrok: '\u0167',
+      twixt: '\u226C',
+      twoheadleftarrow: '\u219E',
+      twoheadrightarrow: '\u21A0',
+      Uacute: '\u00DA',
+      uacute: '\u00FA',
+      Uarr: '\u219F',
+      uArr: '\u21D1',
+      uarr: '\u2191',
+      Uarrocir: '\u2949',
+      Ubrcy: '\u040E',
+      ubrcy: '\u045E',
+      Ubreve: '\u016C',
+      ubreve: '\u016D',
+      Ucirc: '\u00DB',
+      ucirc: '\u00FB',
+      Ucy: '\u0423',
+      ucy: '\u0443',
+      udarr: '\u21C5',
+      Udblac: '\u0170',
+      udblac: '\u0171',
+      udhar: '\u296E',
+      ufisht: '\u297E',
+      Ufr: '\uD835\uDD18',
+      ufr: '\uD835\uDD32',
+      Ugrave: '\u00D9',
+      ugrave: '\u00F9',
+      uHar: '\u2963',
+      uharl: '\u21BF',
+      uharr: '\u21BE',
+      uhblk: '\u2580',
+      ulcorn: '\u231C',
+      ulcorner: '\u231C',
+      ulcrop: '\u230F',
+      ultri: '\u25F8',
+      Umacr: '\u016A',
+      umacr: '\u016B',
+      uml: '\u00A8',
+      UnderBar: '\u005F',
+      UnderBrace: '\u23DF',
+      UnderBracket: '\u23B5',
+      UnderParenthesis: '\u23DD',
+      Union: '\u22C3',
+      UnionPlus: '\u228E',
+      Uogon: '\u0172',
+      uogon: '\u0173',
+      Uopf: '\uD835\uDD4C',
+      uopf: '\uD835\uDD66',
+      UpArrow: '\u2191',
+      Uparrow: '\u21D1',
+      uparrow: '\u2191',
+      UpArrowBar: '\u2912',
+      UpArrowDownArrow: '\u21C5',
+      UpDownArrow: '\u2195',
+      Updownarrow: '\u21D5',
+      updownarrow: '\u2195',
+      UpEquilibrium: '\u296E',
+      upharpoonleft: '\u21BF',
+      upharpoonright: '\u21BE',
+      uplus: '\u228E',
+      UpperLeftArrow: '\u2196',
+      UpperRightArrow: '\u2197',
+      Upsi: '\u03D2',
+      upsi: '\u03C5',
+      upsih: '\u03D2',
+      Upsilon: '\u03A5',
+      upsilon: '\u03C5',
+      UpTee: '\u22A5',
+      UpTeeArrow: '\u21A5',
+      upuparrows: '\u21C8',
+      urcorn: '\u231D',
+      urcorner: '\u231D',
+      urcrop: '\u230E',
+      Uring: '\u016E',
+      uring: '\u016F',
+      urtri: '\u25F9',
+      Uscr: '\uD835\uDCB0',
+      uscr: '\uD835\uDCCA',
+      utdot: '\u22F0',
+      Utilde: '\u0168',
+      utilde: '\u0169',
+      utri: '\u25B5',
+      utrif: '\u25B4',
+      uuarr: '\u21C8',
+      Uuml: '\u00DC',
+      uuml: '\u00FC',
+      uwangle: '\u29A7',
+      vangrt: '\u299C',
+      varepsilon: '\u03F5',
+      varkappa: '\u03F0',
+      varnothing: '\u2205',
+      varphi: '\u03D5',
+      varpi: '\u03D6',
+      varpropto: '\u221D',
+      vArr: '\u21D5',
+      varr: '\u2195',
+      varrho: '\u03F1',
+      varsigma: '\u03C2',
+      varsubsetneq: '\u228A\uFE00',
+      varsubsetneqq: '\u2ACB\uFE00',
+      varsupsetneq: '\u228B\uFE00',
+      varsupsetneqq: '\u2ACC\uFE00',
+      vartheta: '\u03D1',
+      vartriangleleft: '\u22B2',
+      vartriangleright: '\u22B3',
+      Vbar: '\u2AEB',
+      vBar: '\u2AE8',
+      vBarv: '\u2AE9',
+      Vcy: '\u0412',
+      vcy: '\u0432',
+      VDash: '\u22AB',
+      Vdash: '\u22A9',
+      vDash: '\u22A8',
+      vdash: '\u22A2',
+      Vdashl: '\u2AE6',
+      Vee: '\u22C1',
+      vee: '\u2228',
+      veebar: '\u22BB',
+      veeeq: '\u225A',
+      vellip: '\u22EE',
+      Verbar: '\u2016',
+      verbar: '\u007C',
+      Vert: '\u2016',
+      vert: '\u007C',
+      VerticalBar: '\u2223',
+      VerticalLine: '\u007C',
+      VerticalSeparator: '\u2758',
+      VerticalTilde: '\u2240',
+      VeryThinSpace: '\u200A',
+      Vfr: '\uD835\uDD19',
+      vfr: '\uD835\uDD33',
+      vltri: '\u22B2',
+      vnsub: '\u2282\u20D2',
+      vnsup: '\u2283\u20D2',
+      Vopf: '\uD835\uDD4D',
+      vopf: '\uD835\uDD67',
+      vprop: '\u221D',
+      vrtri: '\u22B3',
+      Vscr: '\uD835\uDCB1',
+      vscr: '\uD835\uDCCB',
+      vsubnE: '\u2ACB\uFE00',
+      vsubne: '\u228A\uFE00',
+      vsupnE: '\u2ACC\uFE00',
+      vsupne: '\u228B\uFE00',
+      Vvdash: '\u22AA',
+      vzigzag: '\u299A',
+      Wcirc: '\u0174',
+      wcirc: '\u0175',
+      wedbar: '\u2A5F',
+      Wedge: '\u22C0',
+      wedge: '\u2227',
+      wedgeq: '\u2259',
+      weierp: '\u2118',
+      Wfr: '\uD835\uDD1A',
+      wfr: '\uD835\uDD34',
+      Wopf: '\uD835\uDD4E',
+      wopf: '\uD835\uDD68',
+      wp: '\u2118',
+      wr: '\u2240',
+      wreath: '\u2240',
+      Wscr: '\uD835\uDCB2',
+      wscr: '\uD835\uDCCC',
+      xcap: '\u22C2',
+      xcirc: '\u25EF',
+      xcup: '\u22C3',
+      xdtri: '\u25BD',
+      Xfr: '\uD835\uDD1B',
+      xfr: '\uD835\uDD35',
+      xhArr: '\u27FA',
+      xharr: '\u27F7',
+      Xi: '\u039E',
+      xi: '\u03BE',
+      xlArr: '\u27F8',
+      xlarr: '\u27F5',
+      xmap: '\u27FC',
+      xnis: '\u22FB',
+      xodot: '\u2A00',
+      Xopf: '\uD835\uDD4F',
+      xopf: '\uD835\uDD69',
+      xoplus: '\u2A01',
+      xotime: '\u2A02',
+      xrArr: '\u27F9',
+      xrarr: '\u27F6',
+      Xscr: '\uD835\uDCB3',
+      xscr: '\uD835\uDCCD',
+      xsqcup: '\u2A06',
+      xuplus: '\u2A04',
+      xutri: '\u25B3',
+      xvee: '\u22C1',
+      xwedge: '\u22C0',
+      Yacute: '\u00DD',
+      yacute: '\u00FD',
+      YAcy: '\u042F',
+      yacy: '\u044F',
+      Ycirc: '\u0176',
+      ycirc: '\u0177',
+      Ycy: '\u042B',
+      ycy: '\u044B',
+      yen: '\u00A5',
+      Yfr: '\uD835\uDD1C',
+      yfr: '\uD835\uDD36',
+      YIcy: '\u0407',
+      yicy: '\u0457',
+      Yopf: '\uD835\uDD50',
+      yopf: '\uD835\uDD6A',
+      Yscr: '\uD835\uDCB4',
+      yscr: '\uD835\uDCCE',
+      YUcy: '\u042E',
+      yucy: '\u044E',
+      Yuml: '\u0178',
+      yuml: '\u00FF',
+      Zacute: '\u0179',
+      zacute: '\u017A',
+      Zcaron: '\u017D',
+      zcaron: '\u017E',
+      Zcy: '\u0417',
+      zcy: '\u0437',
+      Zdot: '\u017B',
+      zdot: '\u017C',
+      zeetrf: '\u2128',
+      ZeroWidthSpace: '\u200B',
+      Zeta: '\u0396',
+      zeta: '\u03B6',
+      Zfr: '\u2128',
+      zfr: '\uD835\uDD37',
+      ZHcy: '\u0416',
+      zhcy: '\u0436',
+      zigrarr: '\u21DD',
+      Zopf: '\u2124',
+      zopf: '\uD835\uDD6B',
+      Zscr: '\uD835\uDCB5',
+      zscr: '\uD835\uDCCF',
+      zwj: '\u200D',
+      zwnj: '\u200C'
+    });
+
+    /**
+     * @deprecated use `HTML_ENTITIES` instead
+     * @see HTML_ENTITIES
+     */
+    exports.entityMap = exports.HTML_ENTITIES;
+  });
+  entities.XML_ENTITIES;
+  entities.HTML_ENTITIES;
+  entities.entityMap;
+
+  var NAMESPACE$1 = conventions.NAMESPACE;
+
+  //[4]   	NameStartChar	   ::=   	":" | [A-Z] | "_" | [a-z] | [#xC0-#xD6] | [#xD8-#xF6] | [#xF8-#x2FF] | [#x370-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | [#x2070-#x218F] | [#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] | [#x10000-#xEFFFF]
+  //[4a]   	NameChar	   ::=   	NameStartChar | "-" | "." | [0-9] | #xB7 | [#x0300-#x036F] | [#x203F-#x2040]
+  //[5]   	Name	   ::=   	NameStartChar (NameChar)*
+  var nameStartChar = /[A-Z_a-z\xC0-\xD6\xD8-\xF6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]/; //\u10000-\uEFFFF
+  var nameChar = new RegExp("[\\-\\.0-9" + nameStartChar.source.slice(1, -1) + "\\u00B7\\u0300-\\u036F\\u203F-\\u2040]");
+  var tagNamePattern = new RegExp('^' + nameStartChar.source + nameChar.source + '*(?:\:' + nameStartChar.source + nameChar.source + '*)?$');
+  //var tagNamePattern = /^[a-zA-Z_][\w\-\.]*(?:\:[a-zA-Z_][\w\-\.]*)?$/
+  //var handlers = 'resolveEntity,getExternalSubset,characters,endDocument,endElement,endPrefixMapping,ignorableWhitespace,processingInstruction,setDocumentLocator,skippedEntity,startDocument,startElement,startPrefixMapping,notationDecl,unparsedEntityDecl,error,fatalError,warning,attributeDecl,elementDecl,externalEntityDecl,internalEntityDecl,comment,endCDATA,endDTD,endEntity,startCDATA,startDTD,startEntity'.split(',')
+
+  //S_TAG,	S_ATTR,	S_EQ,	S_ATTR_NOQUOT_VALUE
+  //S_ATTR_SPACE,	S_ATTR_END,	S_TAG_SPACE, S_TAG_CLOSE
+  var S_TAG = 0; //tag name offerring
+  var S_ATTR = 1; //attr name offerring
+  var S_ATTR_SPACE = 2; //attr name end and space offer
+  var S_EQ = 3; //=space?
+  var S_ATTR_NOQUOT_VALUE = 4; //attr value(no quot value only)
+  var S_ATTR_END = 5; //attr value end and no space(quot end)
+  var S_TAG_SPACE = 6; //(attr value end || tag end ) && (space offer)
+  var S_TAG_CLOSE = 7; //closed el<el />
+
+  /**
+   * Creates an error that will not be caught by XMLReader aka the SAX parser.
+   *
+   * @param {string} message
+   * @param {any?} locator Optional, can provide details about the location in the source
+   * @constructor
+   */
+  function ParseError$1(message, locator) {
+    this.message = message;
+    this.locator = locator;
+    if (Error.captureStackTrace) Error.captureStackTrace(this, ParseError$1);
+  }
+  ParseError$1.prototype = new Error();
+  ParseError$1.prototype.name = ParseError$1.name;
+  function XMLReader$1() {}
+  XMLReader$1.prototype = {
+    parse: function (source, defaultNSMap, entityMap) {
+      var domBuilder = this.domBuilder;
+      domBuilder.startDocument();
+      _copy(defaultNSMap, defaultNSMap = {});
+      parse$1(source, defaultNSMap, entityMap, domBuilder, this.errorHandler);
+      domBuilder.endDocument();
+    }
+  };
+  function parse$1(source, defaultNSMapCopy, entityMap, domBuilder, errorHandler) {
+    function fixedFromCharCode(code) {
+      // String.prototype.fromCharCode does not supports
+      // > 2 bytes unicode chars directly
+      if (code > 0xffff) {
+        code -= 0x10000;
+        var surrogate1 = 0xd800 + (code >> 10),
+          surrogate2 = 0xdc00 + (code & 0x3ff);
+        return String.fromCharCode(surrogate1, surrogate2);
+      } else {
+        return String.fromCharCode(code);
+      }
+    }
+    function entityReplacer(a) {
+      var k = a.slice(1, -1);
+      if (Object.hasOwnProperty.call(entityMap, k)) {
+        return entityMap[k];
+      } else if (k.charAt(0) === '#') {
+        return fixedFromCharCode(parseInt(k.substr(1).replace('x', '0x')));
+      } else {
+        errorHandler.error('entity not found:' + a);
+        return a;
+      }
+    }
+    function appendText(end) {
+      //has some bugs
+      if (end > start) {
+        var xt = source.substring(start, end).replace(/&#?\w+;/g, entityReplacer);
+        locator && position(start);
+        domBuilder.characters(xt, 0, end - start);
+        start = end;
+      }
+    }
+    function position(p, m) {
+      while (p >= lineEnd && (m = linePattern.exec(source))) {
+        lineStart = m.index;
+        lineEnd = lineStart + m[0].length;
+        locator.lineNumber++;
+        //console.log('line++:',locator,startPos,endPos)
+      }
+
+      locator.columnNumber = p - lineStart + 1;
+    }
+    var lineStart = 0;
+    var lineEnd = 0;
+    var linePattern = /.*(?:\r\n?|\n)|.*$/g;
+    var locator = domBuilder.locator;
+    var parseStack = [{
+      currentNSMap: defaultNSMapCopy
+    }];
+    var closeMap = {};
+    var start = 0;
+    while (true) {
+      try {
+        var tagStart = source.indexOf('<', start);
+        if (tagStart < 0) {
+          if (!source.substr(start).match(/^\s*$/)) {
+            var doc = domBuilder.doc;
+            var text = doc.createTextNode(source.substr(start));
+            doc.appendChild(text);
+            domBuilder.currentElement = text;
+          }
+          return;
+        }
+        if (tagStart > start) {
+          appendText(tagStart);
+        }
+        switch (source.charAt(tagStart + 1)) {
+          case '/':
+            var end = source.indexOf('>', tagStart + 3);
+            var tagName = source.substring(tagStart + 2, end).replace(/[ \t\n\r]+$/g, '');
+            var config = parseStack.pop();
+            if (end < 0) {
+              tagName = source.substring(tagStart + 2).replace(/[\s<].*/, '');
+              errorHandler.error("end tag name: " + tagName + ' is not complete:' + config.tagName);
+              end = tagStart + 1 + tagName.length;
+            } else if (tagName.match(/\s</)) {
+              tagName = tagName.replace(/[\s<].*/, '');
+              errorHandler.error("end tag name: " + tagName + ' maybe not complete');
+              end = tagStart + 1 + tagName.length;
+            }
+            var localNSMap = config.localNSMap;
+            var endMatch = config.tagName == tagName;
+            var endIgnoreCaseMach = endMatch || config.tagName && config.tagName.toLowerCase() == tagName.toLowerCase();
+            if (endIgnoreCaseMach) {
+              domBuilder.endElement(config.uri, config.localName, tagName);
+              if (localNSMap) {
+                for (var prefix in localNSMap) {
+                  if (Object.prototype.hasOwnProperty.call(localNSMap, prefix)) {
+                    domBuilder.endPrefixMapping(prefix);
+                  }
+                }
+              }
+              if (!endMatch) {
+                errorHandler.fatalError("end tag name: " + tagName + ' is not match the current start tagName:' + config.tagName); // No known test case
+              }
+            } else {
+              parseStack.push(config);
+            }
+            end++;
+            break;
+          // end elment
+          case '?':
+            // <?...?>
+            locator && position(tagStart);
+            end = parseInstruction(source, tagStart, domBuilder);
+            break;
+          case '!':
+            // <!doctype,<![CDATA,<!--
+            locator && position(tagStart);
+            end = parseDCC(source, tagStart, domBuilder, errorHandler);
+            break;
+          default:
+            locator && position(tagStart);
+            var el = new ElementAttributes();
+            var currentNSMap = parseStack[parseStack.length - 1].currentNSMap;
+            //elStartEnd
+            var end = parseElementStartPart(source, tagStart, el, currentNSMap, entityReplacer, errorHandler);
+            var len = el.length;
+            if (!el.closed && fixSelfClosed(source, end, el.tagName, closeMap)) {
+              el.closed = true;
+              if (!entityMap.nbsp) {
+                errorHandler.warning('unclosed xml attribute');
+              }
+            }
+            if (locator && len) {
+              var locator2 = copyLocator(locator, {});
+              //try{//attribute position fixed
+              for (var i = 0; i < len; i++) {
+                var a = el[i];
+                position(a.offset);
+                a.locator = copyLocator(locator, {});
+              }
+              domBuilder.locator = locator2;
+              if (appendElement$1(el, domBuilder, currentNSMap)) {
+                parseStack.push(el);
+              }
+              domBuilder.locator = locator;
+            } else {
+              if (appendElement$1(el, domBuilder, currentNSMap)) {
+                parseStack.push(el);
+              }
+            }
+            if (NAMESPACE$1.isHTML(el.uri) && !el.closed) {
+              end = parseHtmlSpecialContent(source, end, el.tagName, entityReplacer, domBuilder);
+            } else {
+              end++;
+            }
+        }
+      } catch (e) {
+        if (e instanceof ParseError$1) {
+          throw e;
+        }
+        errorHandler.error('element parse error: ' + e);
+        end = -1;
+      }
+      if (end > start) {
+        start = end;
+      } else {
+        //TODO: 这里有可能sax回退，有位置错误风险
+        appendText(Math.max(tagStart, start) + 1);
+      }
+    }
+  }
+  function copyLocator(f, t) {
+    t.lineNumber = f.lineNumber;
+    t.columnNumber = f.columnNumber;
+    return t;
+  }
+
+  /**
+   * @see #appendElement(source,elStartEnd,el,selfClosed,entityReplacer,domBuilder,parseStack);
+   * @return end of the elementStartPart(end of elementEndPart for selfClosed el)
+   */
+  function parseElementStartPart(source, start, el, currentNSMap, entityReplacer, errorHandler) {
+    /**
+     * @param {string} qname
+     * @param {string} value
+     * @param {number} startIndex
+     */
+    function addAttribute(qname, value, startIndex) {
+      if (el.attributeNames.hasOwnProperty(qname)) {
+        errorHandler.fatalError('Attribute ' + qname + ' redefined');
+      }
+      el.addValue(qname,
+      // @see https://www.w3.org/TR/xml/#AVNormalize
+      // since the xmldom sax parser does not "interpret" DTD the following is not implemented:
+      // - recursive replacement of (DTD) entity references
+      // - trimming and collapsing multiple spaces into a single one for attributes that are not of type CDATA
+      value.replace(/[\t\n\r]/g, ' ').replace(/&#?\w+;/g, entityReplacer), startIndex);
+    }
+    var attrName;
+    var value;
+    var p = ++start;
+    var s = S_TAG; //status
+    while (true) {
+      var c = source.charAt(p);
+      switch (c) {
+        case '=':
+          if (s === S_ATTR) {
+            //attrName
+            attrName = source.slice(start, p);
+            s = S_EQ;
+          } else if (s === S_ATTR_SPACE) {
+            s = S_EQ;
+          } else {
+            //fatalError: equal must after attrName or space after attrName
+            throw new Error('attribute equal must after attrName'); // No known test case
+          }
+
+          break;
+        case '\'':
+        case '"':
+          if (s === S_EQ || s === S_ATTR //|| s == S_ATTR_SPACE
+          ) {
+            //equal
+            if (s === S_ATTR) {
+              errorHandler.warning('attribute value must after "="');
+              attrName = source.slice(start, p);
+            }
+            start = p + 1;
+            p = source.indexOf(c, start);
+            if (p > 0) {
+              value = source.slice(start, p);
+              addAttribute(attrName, value, start - 1);
+              s = S_ATTR_END;
+            } else {
+              //fatalError: no end quot match
+              throw new Error('attribute value no end \'' + c + '\' match');
+            }
+          } else if (s == S_ATTR_NOQUOT_VALUE) {
+            value = source.slice(start, p);
+            addAttribute(attrName, value, start);
+            errorHandler.warning('attribute "' + attrName + '" missed start quot(' + c + ')!!');
+            start = p + 1;
+            s = S_ATTR_END;
+          } else {
+            //fatalError: no equal before
+            throw new Error('attribute value must after "="'); // No known test case
+          }
+
+          break;
+        case '/':
+          switch (s) {
+            case S_TAG:
+              el.setTagName(source.slice(start, p));
+            case S_ATTR_END:
+            case S_TAG_SPACE:
+            case S_TAG_CLOSE:
+              s = S_TAG_CLOSE;
+              el.closed = true;
+            case S_ATTR_NOQUOT_VALUE:
+            case S_ATTR:
+              break;
+            case S_ATTR_SPACE:
+              el.closed = true;
+              break;
+            //case S_EQ:
+            default:
+              throw new Error("attribute invalid close char('/')");
+            // No known test case
+          }
+
+          break;
+        case '':
+          //end document
+          errorHandler.error('unexpected end of input');
+          if (s == S_TAG) {
+            el.setTagName(source.slice(start, p));
+          }
+          return p;
+        case '>':
+          switch (s) {
+            case S_TAG:
+              el.setTagName(source.slice(start, p));
+            case S_ATTR_END:
+            case S_TAG_SPACE:
+            case S_TAG_CLOSE:
+              break;
+            //normal
+            case S_ATTR_NOQUOT_VALUE: //Compatible state
+            case S_ATTR:
+              value = source.slice(start, p);
+              if (value.slice(-1) === '/') {
+                el.closed = true;
+                value = value.slice(0, -1);
+              }
+            case S_ATTR_SPACE:
+              if (s === S_ATTR_SPACE) {
+                value = attrName;
+              }
+              if (s == S_ATTR_NOQUOT_VALUE) {
+                errorHandler.warning('attribute "' + value + '" missed quot(")!');
+                addAttribute(attrName, value, start);
+              } else {
+                if (!NAMESPACE$1.isHTML(currentNSMap['']) || !value.match(/^(?:disabled|checked|selected)$/i)) {
+                  errorHandler.warning('attribute "' + value + '" missed value!! "' + value + '" instead!!');
+                }
+                addAttribute(value, value, start);
+              }
+              break;
+            case S_EQ:
+              throw new Error('attribute value missed!!');
+          }
+          //			console.log(tagName,tagNamePattern,tagNamePattern.test(tagName))
+          return p;
+        /*xml space '\x20' | #x9 | #xD | #xA; */
+        case '\u0080':
+          c = ' ';
+        default:
+          if (c <= ' ') {
+            //space
+            switch (s) {
+              case S_TAG:
+                el.setTagName(source.slice(start, p)); //tagName
+                s = S_TAG_SPACE;
+                break;
+              case S_ATTR:
+                attrName = source.slice(start, p);
+                s = S_ATTR_SPACE;
+                break;
+              case S_ATTR_NOQUOT_VALUE:
+                var value = source.slice(start, p);
+                errorHandler.warning('attribute "' + value + '" missed quot(")!!');
+                addAttribute(attrName, value, start);
+              case S_ATTR_END:
+                s = S_TAG_SPACE;
+                break;
+              //case S_TAG_SPACE:
+              //case S_EQ:
+              //case S_ATTR_SPACE:
+              //	void();break;
+              //case S_TAG_CLOSE:
+              //ignore warning
+            }
+          } else {
+            //not space
+            //S_TAG,	S_ATTR,	S_EQ,	S_ATTR_NOQUOT_VALUE
+            //S_ATTR_SPACE,	S_ATTR_END,	S_TAG_SPACE, S_TAG_CLOSE
+            switch (s) {
+              //case S_TAG:void();break;
+              //case S_ATTR:void();break;
+              //case S_ATTR_NOQUOT_VALUE:void();break;
+              case S_ATTR_SPACE:
+                el.tagName;
+                if (!NAMESPACE$1.isHTML(currentNSMap['']) || !attrName.match(/^(?:disabled|checked|selected)$/i)) {
+                  errorHandler.warning('attribute "' + attrName + '" missed value!! "' + attrName + '" instead2!!');
+                }
+                addAttribute(attrName, attrName, start);
+                start = p;
+                s = S_ATTR;
+                break;
+              case S_ATTR_END:
+                errorHandler.warning('attribute space is required"' + attrName + '"!!');
+              case S_TAG_SPACE:
+                s = S_ATTR;
+                start = p;
+                break;
+              case S_EQ:
+                s = S_ATTR_NOQUOT_VALUE;
+                start = p;
+                break;
+              case S_TAG_CLOSE:
+                throw new Error("elements closed character '/' and '>' must be connected to");
+            }
+          }
+      } //end outer switch
+      //console.log('p++',p)
+      p++;
+    }
+  }
+  /**
+   * @return true if has new namespace define
+   */
+  function appendElement$1(el, domBuilder, currentNSMap) {
+    var tagName = el.tagName;
+    var localNSMap = null;
+    //var currentNSMap = parseStack[parseStack.length-1].currentNSMap;
+    var i = el.length;
+    while (i--) {
+      var a = el[i];
+      var qName = a.qName;
+      var value = a.value;
+      var nsp = qName.indexOf(':');
+      if (nsp > 0) {
+        var prefix = a.prefix = qName.slice(0, nsp);
+        var localName = qName.slice(nsp + 1);
+        var nsPrefix = prefix === 'xmlns' && localName;
+      } else {
+        localName = qName;
+        prefix = null;
+        nsPrefix = qName === 'xmlns' && '';
+      }
+      //can not set prefix,because prefix !== ''
+      a.localName = localName;
+      //prefix == null for no ns prefix attribute
+      if (nsPrefix !== false) {
+        //hack!!
+        if (localNSMap == null) {
+          localNSMap = {};
+          //console.log(currentNSMap,0)
+          _copy(currentNSMap, currentNSMap = {});
+          //console.log(currentNSMap,1)
+        }
+
+        currentNSMap[nsPrefix] = localNSMap[nsPrefix] = value;
+        a.uri = NAMESPACE$1.XMLNS;
+        domBuilder.startPrefixMapping(nsPrefix, value);
+      }
+    }
+    var i = el.length;
+    while (i--) {
+      a = el[i];
+      var prefix = a.prefix;
+      if (prefix) {
+        //no prefix attribute has no namespace
+        if (prefix === 'xml') {
+          a.uri = NAMESPACE$1.XML;
+        }
+        if (prefix !== 'xmlns') {
+          a.uri = currentNSMap[prefix || ''];
+
+          //{console.log('###'+a.qName,domBuilder.locator.systemId+'',currentNSMap,a.uri)}
+        }
+      }
+    }
+
+    var nsp = tagName.indexOf(':');
+    if (nsp > 0) {
+      prefix = el.prefix = tagName.slice(0, nsp);
+      localName = el.localName = tagName.slice(nsp + 1);
+    } else {
+      prefix = null; //important!!
+      localName = el.localName = tagName;
+    }
+    //no prefix element has default namespace
+    var ns = el.uri = currentNSMap[prefix || ''];
+    domBuilder.startElement(ns, localName, tagName, el);
+    //endPrefixMapping and startPrefixMapping have not any help for dom builder
+    //localNSMap = null
+    if (el.closed) {
+      domBuilder.endElement(ns, localName, tagName);
+      if (localNSMap) {
+        for (prefix in localNSMap) {
+          if (Object.prototype.hasOwnProperty.call(localNSMap, prefix)) {
+            domBuilder.endPrefixMapping(prefix);
+          }
+        }
+      }
+    } else {
+      el.currentNSMap = currentNSMap;
+      el.localNSMap = localNSMap;
+      //parseStack.push(el);
+      return true;
+    }
+  }
+  function parseHtmlSpecialContent(source, elStartEnd, tagName, entityReplacer, domBuilder) {
+    if (/^(?:script|textarea)$/i.test(tagName)) {
+      var elEndStart = source.indexOf('</' + tagName + '>', elStartEnd);
+      var text = source.substring(elStartEnd + 1, elEndStart);
+      if (/[&<]/.test(text)) {
+        if (/^script$/i.test(tagName)) {
+          //if(!/\]\]>/.test(text)){
+          //lexHandler.startCDATA();
+          domBuilder.characters(text, 0, text.length);
+          //lexHandler.endCDATA();
+          return elEndStart;
+          //}
+        } //}else{//text area
+        text = text.replace(/&#?\w+;/g, entityReplacer);
+        domBuilder.characters(text, 0, text.length);
+        return elEndStart;
+        //}
+      }
+    }
+
+    return elStartEnd + 1;
+  }
+  function fixSelfClosed(source, elStartEnd, tagName, closeMap) {
+    //if(tagName in closeMap){
+    var pos = closeMap[tagName];
+    if (pos == null) {
+      //console.log(tagName)
+      pos = source.lastIndexOf('</' + tagName + '>');
+      if (pos < elStartEnd) {
+        //忘记闭合
+        pos = source.lastIndexOf('</' + tagName);
+      }
+      closeMap[tagName] = pos;
+    }
+    return pos < elStartEnd;
+    //}
+  }
+
+  function _copy(source, target) {
+    for (var n in source) {
+      if (Object.prototype.hasOwnProperty.call(source, n)) {
+        target[n] = source[n];
+      }
+    }
+  }
+  function parseDCC(source, start, domBuilder, errorHandler) {
+    //sure start with '<!'
+    var next = source.charAt(start + 2);
+    switch (next) {
+      case '-':
+        if (source.charAt(start + 3) === '-') {
+          var end = source.indexOf('-->', start + 4);
+          //append comment source.substring(4,end)//<!--
+          if (end > start) {
+            domBuilder.comment(source, start + 4, end - start - 4);
+            return end + 3;
+          } else {
+            errorHandler.error("Unclosed comment");
+            return -1;
+          }
+        } else {
+          //error
+          return -1;
+        }
+      default:
+        if (source.substr(start + 3, 6) == 'CDATA[') {
+          var end = source.indexOf(']]>', start + 9);
+          domBuilder.startCDATA();
+          domBuilder.characters(source, start + 9, end - start - 9);
+          domBuilder.endCDATA();
+          return end + 3;
+        }
+        //<!DOCTYPE
+        //startDTD(java.lang.String name, java.lang.String publicId, java.lang.String systemId)
+        var matchs = split(source, start);
+        var len = matchs.length;
+        if (len > 1 && /!doctype/i.test(matchs[0][0])) {
+          var name = matchs[1][0];
+          var pubid = false;
+          var sysid = false;
+          if (len > 3) {
+            if (/^public$/i.test(matchs[2][0])) {
+              pubid = matchs[3][0];
+              sysid = len > 4 && matchs[4][0];
+            } else if (/^system$/i.test(matchs[2][0])) {
+              sysid = matchs[3][0];
+            }
+          }
+          var lastMatch = matchs[len - 1];
+          domBuilder.startDTD(name, pubid, sysid);
+          domBuilder.endDTD();
+          return lastMatch.index + lastMatch[0].length;
+        }
+    }
+    return -1;
+  }
+  function parseInstruction(source, start, domBuilder) {
+    var end = source.indexOf('?>', start);
+    if (end) {
+      var match = source.substring(start, end).match(/^<\?(\S*)\s*([\s\S]*?)\s*$/);
+      if (match) {
+        match[0].length;
+        domBuilder.processingInstruction(match[1], match[2]);
+        return end + 2;
+      } else {
+        //error
+        return -1;
+      }
+    }
+    return -1;
+  }
+  function ElementAttributes() {
+    this.attributeNames = {};
+  }
+  ElementAttributes.prototype = {
+    setTagName: function (tagName) {
+      if (!tagNamePattern.test(tagName)) {
+        throw new Error('invalid tagName:' + tagName);
+      }
+      this.tagName = tagName;
+    },
+    addValue: function (qName, value, offset) {
+      if (!tagNamePattern.test(qName)) {
+        throw new Error('invalid attribute:' + qName);
+      }
+      this.attributeNames[qName] = this.length;
+      this[this.length++] = {
+        qName: qName,
+        value: value,
+        offset: offset
+      };
+    },
+    length: 0,
+    getLocalName: function (i) {
+      return this[i].localName;
+    },
+    getLocator: function (i) {
+      return this[i].locator;
+    },
+    getQName: function (i) {
+      return this[i].qName;
+    },
+    getURI: function (i) {
+      return this[i].uri;
+    },
+    getValue: function (i) {
+      return this[i].value;
+    }
+    //	,getIndex:function(uri, localName)){
+    //		if(localName){
+    //
+    //		}else{
+    //			var qName = uri
+    //		}
+    //	},
+    //	getValue:function(){return this.getValue(this.getIndex.apply(this,arguments))},
+    //	getType:function(uri,localName){}
+    //	getType:function(i){},
+  };
+
+  function split(source, start) {
+    var match;
+    var buf = [];
+    var reg = /'[^']+'|"[^"]+"|[^\s<>\/=]+=?|(\/?\s*>|<)/g;
+    reg.lastIndex = start;
+    reg.exec(source); //skip <
+    while (match = reg.exec(source)) {
+      buf.push(match);
+      if (match[1]) return buf;
+    }
+  }
+  var XMLReader_1 = XMLReader$1;
+  var ParseError_1 = ParseError$1;
+  var sax = {
+    XMLReader: XMLReader_1,
+    ParseError: ParseError_1
+  };
+
+  var DOMImplementation = dom.DOMImplementation;
+  var NAMESPACE = conventions.NAMESPACE;
+  var ParseError = sax.ParseError;
+  var XMLReader = sax.XMLReader;
+
+  /**
+   * Normalizes line ending according to https://www.w3.org/TR/xml11/#sec-line-ends:
+   *
+   * > XML parsed entities are often stored in computer files which,
+   * > for editing convenience, are organized into lines.
+   * > These lines are typically separated by some combination
+   * > of the characters CARRIAGE RETURN (#xD) and LINE FEED (#xA).
+   * >
+   * > To simplify the tasks of applications, the XML processor must behave
+   * > as if it normalized all line breaks in external parsed entities (including the document entity)
+   * > on input, before parsing, by translating all of the following to a single #xA character:
+   * >
+   * > 1. the two-character sequence #xD #xA
+   * > 2. the two-character sequence #xD #x85
+   * > 3. the single character #x85
+   * > 4. the single character #x2028
+   * > 5. any #xD character that is not immediately followed by #xA or #x85.
+   *
+   * @param {string} input
+   * @returns {string}
+   */
+  function normalizeLineEndings(input) {
+    return input.replace(/\r[\n\u0085]/g, '\n').replace(/[\r\u0085\u2028]/g, '\n');
+  }
+
+  /**
+   * @typedef Locator
+   * @property {number} [columnNumber]
+   * @property {number} [lineNumber]
+   */
+
+  /**
+   * @typedef DOMParserOptions
+   * @property {DOMHandler} [domBuilder]
+   * @property {Function} [errorHandler]
+   * @property {(string) => string} [normalizeLineEndings] used to replace line endings before parsing
+   * 						defaults to `normalizeLineEndings`
+   * @property {Locator} [locator]
+   * @property {Record<string, string>} [xmlns]
+   *
+   * @see normalizeLineEndings
+   */
+
+  /**
+   * The DOMParser interface provides the ability to parse XML or HTML source code
+   * from a string into a DOM `Document`.
+   *
+   * _xmldom is different from the spec in that it allows an `options` parameter,
+   * to override the default behavior._
+   *
+   * @param {DOMParserOptions} [options]
+   * @constructor
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
+   * @see https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#dom-parsing-and-serialization
+   */
+  function DOMParser$1(options) {
+    this.options = options || {
+      locator: {}
+    };
+  }
+  DOMParser$1.prototype.parseFromString = function (source, mimeType) {
+    var options = this.options;
+    var sax = new XMLReader();
+    var domBuilder = options.domBuilder || new DOMHandler(); //contentHandler and LexicalHandler
+    var errorHandler = options.errorHandler;
+    var locator = options.locator;
+    var defaultNSMap = options.xmlns || {};
+    var isHTML = /\/x?html?$/.test(mimeType); //mimeType.toLowerCase().indexOf('html') > -1;
+    var entityMap = isHTML ? entities.HTML_ENTITIES : entities.XML_ENTITIES;
+    if (locator) {
+      domBuilder.setDocumentLocator(locator);
+    }
+    sax.errorHandler = buildErrorHandler(errorHandler, domBuilder, locator);
+    sax.domBuilder = options.domBuilder || domBuilder;
+    if (isHTML) {
+      defaultNSMap[''] = NAMESPACE.HTML;
+    }
+    defaultNSMap.xml = defaultNSMap.xml || NAMESPACE.XML;
+    var normalize = options.normalizeLineEndings || normalizeLineEndings;
+    if (source && typeof source === 'string') {
+      sax.parse(normalize(source), defaultNSMap, entityMap);
+    } else {
+      sax.errorHandler.error('invalid doc source');
+    }
+    return domBuilder.doc;
+  };
+  function buildErrorHandler(errorImpl, domBuilder, locator) {
+    if (!errorImpl) {
+      if (domBuilder instanceof DOMHandler) {
+        return domBuilder;
+      }
+      errorImpl = domBuilder;
+    }
+    var errorHandler = {};
+    var isCallback = errorImpl instanceof Function;
+    locator = locator || {};
+    function build(key) {
+      var fn = errorImpl[key];
+      if (!fn && isCallback) {
+        fn = errorImpl.length == 2 ? function (msg) {
+          errorImpl(key, msg);
+        } : errorImpl;
+      }
+      errorHandler[key] = fn && function (msg) {
+        fn('[xmldom ' + key + ']\t' + msg + _locator(locator));
+      } || function () {};
+    }
+    build('warning');
+    build('error');
+    build('fatalError');
+    return errorHandler;
+  }
+
+  //console.log('#\n\n\n\n\n\n\n####')
+  /**
+   * +ContentHandler+ErrorHandler
+   * +LexicalHandler+EntityResolver2
+   * -DeclHandler-DTDHandler
+   *
+   * DefaultHandler:EntityResolver, DTDHandler, ContentHandler, ErrorHandler
+   * DefaultHandler2:DefaultHandler,LexicalHandler, DeclHandler, EntityResolver2
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/helpers/DefaultHandler.html
+   */
+  function DOMHandler() {
+    this.cdata = false;
+  }
+  function position(locator, node) {
+    node.lineNumber = locator.lineNumber;
+    node.columnNumber = locator.columnNumber;
+  }
+  /**
+   * @see org.xml.sax.ContentHandler#startDocument
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/ContentHandler.html
+   */
+  DOMHandler.prototype = {
+    startDocument: function () {
+      this.doc = new DOMImplementation().createDocument(null, null, null);
+      if (this.locator) {
+        this.doc.documentURI = this.locator.systemId;
+      }
+    },
+    startElement: function (namespaceURI, localName, qName, attrs) {
+      var doc = this.doc;
+      var el = doc.createElementNS(namespaceURI, qName || localName);
+      var len = attrs.length;
+      appendElement(this, el);
+      this.currentElement = el;
+      this.locator && position(this.locator, el);
+      for (var i = 0; i < len; i++) {
+        var namespaceURI = attrs.getURI(i);
+        var value = attrs.getValue(i);
+        var qName = attrs.getQName(i);
+        var attr = doc.createAttributeNS(namespaceURI, qName);
+        this.locator && position(attrs.getLocator(i), attr);
+        attr.value = attr.nodeValue = value;
+        el.setAttributeNode(attr);
+      }
+    },
+    endElement: function (namespaceURI, localName, qName) {
+      var current = this.currentElement;
+      current.tagName;
+      this.currentElement = current.parentNode;
+    },
+    startPrefixMapping: function (prefix, uri) {},
+    endPrefixMapping: function (prefix) {},
+    processingInstruction: function (target, data) {
+      var ins = this.doc.createProcessingInstruction(target, data);
+      this.locator && position(this.locator, ins);
+      appendElement(this, ins);
+    },
+    ignorableWhitespace: function (ch, start, length) {},
+    characters: function (chars, start, length) {
+      chars = _toString.apply(this, arguments);
+      //console.log(chars)
+      if (chars) {
+        if (this.cdata) {
+          var charNode = this.doc.createCDATASection(chars);
+        } else {
+          var charNode = this.doc.createTextNode(chars);
+        }
+        if (this.currentElement) {
+          this.currentElement.appendChild(charNode);
+        } else if (/^\s*$/.test(chars)) {
+          this.doc.appendChild(charNode);
+          //process xml
+        }
+
+        this.locator && position(this.locator, charNode);
+      }
+    },
+    skippedEntity: function (name) {},
+    endDocument: function () {
+      this.doc.normalize();
+    },
+    setDocumentLocator: function (locator) {
+      if (this.locator = locator) {
+        // && !('lineNumber' in locator)){
+        locator.lineNumber = 0;
+      }
+    },
+    //LexicalHandler
+    comment: function (chars, start, length) {
+      chars = _toString.apply(this, arguments);
+      var comm = this.doc.createComment(chars);
+      this.locator && position(this.locator, comm);
+      appendElement(this, comm);
+    },
+    startCDATA: function () {
+      //used in characters() methods
+      this.cdata = true;
+    },
+    endCDATA: function () {
+      this.cdata = false;
+    },
+    startDTD: function (name, publicId, systemId) {
+      var impl = this.doc.implementation;
+      if (impl && impl.createDocumentType) {
+        var dt = impl.createDocumentType(name, publicId, systemId);
+        this.locator && position(this.locator, dt);
+        appendElement(this, dt);
+        this.doc.doctype = dt;
+      }
+    },
+    /**
+     * @see org.xml.sax.ErrorHandler
+     * @link http://www.saxproject.org/apidoc/org/xml/sax/ErrorHandler.html
+     */
+    warning: function (error) {
+      console.warn('[xmldom warning]\t' + error, _locator(this.locator));
+    },
+    error: function (error) {
+      console.error('[xmldom error]\t' + error, _locator(this.locator));
+    },
+    fatalError: function (error) {
+      throw new ParseError(error, this.locator);
+    }
+  };
+  function _locator(l) {
+    if (l) {
+      return '\n@' + (l.systemId || '') + '#[line:' + l.lineNumber + ',col:' + l.columnNumber + ']';
+    }
+  }
+  function _toString(chars, start, length) {
+    if (typeof chars == 'string') {
+      return chars.substr(start, length);
+    } else {
+      //java sax connect width xmldom on rhino(what about: "? && !(chars instanceof String)")
+      if (chars.length >= start + length || start) {
+        return new java.lang.String(chars, start, length) + '';
+      }
+      return chars;
+    }
+  }
+
+  /*
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/ext/LexicalHandler.html
+   * used method of org.xml.sax.ext.LexicalHandler:
+   *  #comment(chars, start, length)
+   *  #startCDATA()
+   *  #endCDATA()
+   *  #startDTD(name, publicId, systemId)
+   *
+   *
+   * IGNORED method of org.xml.sax.ext.LexicalHandler:
+   *  #endDTD()
+   *  #startEntity(name)
+   *  #endEntity(name)
+   *
+   *
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/ext/DeclHandler.html
+   * IGNORED method of org.xml.sax.ext.DeclHandler
+   * 	#attributeDecl(eName, aName, type, mode, value)
+   *  #elementDecl(name, model)
+   *  #externalEntityDecl(name, publicId, systemId)
+   *  #internalEntityDecl(name, value)
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/ext/EntityResolver2.html
+   * IGNORED method of org.xml.sax.EntityResolver2
+   *  #resolveEntity(String name,String publicId,String baseURI,String systemId)
+   *  #resolveEntity(publicId, systemId)
+   *  #getExternalSubset(name, baseURI)
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/DTDHandler.html
+   * IGNORED method of org.xml.sax.DTDHandler
+   *  #notationDecl(name, publicId, systemId) {};
+   *  #unparsedEntityDecl(name, publicId, systemId, notationName) {};
+   */
+  "endDTD,startEntity,endEntity,attributeDecl,elementDecl,externalEntityDecl,internalEntityDecl,resolveEntity,getExternalSubset,notationDecl,unparsedEntityDecl".replace(/\w+/g, function (key) {
+    DOMHandler.prototype[key] = function () {
+      return null;
+    };
+  });
+
+  /* Private static helpers treated below as private instance methods, so don't need to add these to the public API; we might use a Relator to also get rid of non-standard public properties */
+  function appendElement(hander, node) {
+    if (!hander.currentElement) {
+      hander.doc.appendChild(node);
+    } else {
+      hander.currentElement.appendChild(node);
+    }
+  } //appendChild and setAttributeNS are preformance key
+
+  var __DOMHandler = DOMHandler;
+  var normalizeLineEndings_1 = normalizeLineEndings;
+  var DOMParser_1 = DOMParser$1;
+  var domParser = {
+    __DOMHandler: __DOMHandler,
+    normalizeLineEndings: normalizeLineEndings_1,
+    DOMParser: DOMParser_1
+  };
+
+  var DOMParser = domParser.DOMParser;
+
+  /*! @name mpd-parser @version 1.3.0 @license Apache-2.0 */
+  const isObject = obj => {
+    return !!obj && typeof obj === 'object';
+  };
+  const merge$1 = (...objects) => {
+    return objects.reduce((result, source) => {
+      if (typeof source !== 'object') {
+        return result;
+      }
+      Object.keys(source).forEach(key => {
+        if (Array.isArray(result[key]) && Array.isArray(source[key])) {
+          result[key] = result[key].concat(source[key]);
+        } else if (isObject(result[key]) && isObject(source[key])) {
+          result[key] = merge$1(result[key], source[key]);
+        } else {
+          result[key] = source[key];
+        }
+      });
+      return result;
+    }, {});
+  };
+  const values = o => Object.keys(o).map(k => o[k]);
+  const range = (start, end) => {
+    const result = [];
+    for (let i = start; i < end; i++) {
+      result.push(i);
+    }
+    return result;
+  };
+  const flatten = lists => lists.reduce((x, y) => x.concat(y), []);
+  const from = list => {
+    if (!list.length) {
+      return [];
+    }
+    const result = [];
+    for (let i = 0; i < list.length; i++) {
+      result.push(list[i]);
+    }
+    return result;
+  };
+  const findIndexes = (l, key) => l.reduce((a, e, i) => {
+    if (e[key]) {
+      a.push(i);
+    }
+    return a;
+  }, []);
+  /**
+   * Returns a union of the included lists provided each element can be identified by a key.
+   *
+   * @param {Array} list - list of lists to get the union of
+   * @param {Function} keyFunction - the function to use as a key for each element
+   *
+   * @return {Array} the union of the arrays
+   */
+
+  const union = (lists, keyFunction) => {
+    return values(lists.reduce((acc, list) => {
+      list.forEach(el => {
+        acc[keyFunction(el)] = el;
+      });
+      return acc;
+    }, {}));
+  };
+  var errors = {
+    INVALID_NUMBER_OF_PERIOD: 'INVALID_NUMBER_OF_PERIOD',
+    INVALID_NUMBER_OF_CONTENT_STEERING: 'INVALID_NUMBER_OF_CONTENT_STEERING',
+    DASH_EMPTY_MANIFEST: 'DASH_EMPTY_MANIFEST',
+    DASH_INVALID_XML: 'DASH_INVALID_XML',
+    NO_BASE_URL: 'NO_BASE_URL',
+    MISSING_SEGMENT_INFORMATION: 'MISSING_SEGMENT_INFORMATION',
+    SEGMENT_TIME_UNSPECIFIED: 'SEGMENT_TIME_UNSPECIFIED',
+    UNSUPPORTED_UTC_TIMING_SCHEME: 'UNSUPPORTED_UTC_TIMING_SCHEME'
+  };
+
+  /**
+   * @typedef {Object} SingleUri
+   * @property {string} uri - relative location of segment
+   * @property {string} resolvedUri - resolved location of segment
+   * @property {Object} byterange - Object containing information on how to make byte range
+   *   requests following byte-range-spec per RFC2616.
+   * @property {String} byterange.length - length of range request
+   * @property {String} byterange.offset - byte offset of range request
+   *
+   * @see https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.35.1
+   */
+
+  /**
+   * Converts a URLType node (5.3.9.2.3 Table 13) to a segment object
+   * that conforms to how m3u8-parser is structured
+   *
+   * @see https://github.com/videojs/m3u8-parser
+   *
+   * @param {string} baseUrl - baseUrl provided by <BaseUrl> nodes
+   * @param {string} source - source url for segment
+   * @param {string} range - optional range used for range calls,
+   *   follows  RFC 2616, Clause 14.35.1
+   * @return {SingleUri} full segment information transformed into a format similar
+   *   to m3u8-parser
+   */
+
+  const urlTypeToSegment = ({
+    baseUrl = '',
+    source = '',
+    range = '',
+    indexRange = ''
+  }) => {
+    const segment = {
+      uri: source,
+      resolvedUri: resolveUrl$1(baseUrl || '', source)
+    };
+    if (range || indexRange) {
+      const rangeStr = range ? range : indexRange;
+      const ranges = rangeStr.split('-'); // default to parsing this as a BigInt if possible
+
+      let startRange = window.BigInt ? window.BigInt(ranges[0]) : parseInt(ranges[0], 10);
+      let endRange = window.BigInt ? window.BigInt(ranges[1]) : parseInt(ranges[1], 10); // convert back to a number if less than MAX_SAFE_INTEGER
+
+      if (startRange < Number.MAX_SAFE_INTEGER && typeof startRange === 'bigint') {
+        startRange = Number(startRange);
+      }
+      if (endRange < Number.MAX_SAFE_INTEGER && typeof endRange === 'bigint') {
+        endRange = Number(endRange);
+      }
+      let length;
+      if (typeof endRange === 'bigint' || typeof startRange === 'bigint') {
+        length = window.BigInt(endRange) - window.BigInt(startRange) + window.BigInt(1);
+      } else {
+        length = endRange - startRange + 1;
+      }
+      if (typeof length === 'bigint' && length < Number.MAX_SAFE_INTEGER) {
+        length = Number(length);
+      } // byterange should be inclusive according to
+      // RFC 2616, Clause 14.35.1
+
+      segment.byterange = {
+        length,
+        offset: startRange
+      };
+    }
+    return segment;
+  };
+  const byteRangeToString = byterange => {
+    // `endRange` is one less than `offset + length` because the HTTP range
+    // header uses inclusive ranges
+    let endRange;
+    if (typeof byterange.offset === 'bigint' || typeof byterange.length === 'bigint') {
+      endRange = window.BigInt(byterange.offset) + window.BigInt(byterange.length) - window.BigInt(1);
+    } else {
+      endRange = byterange.offset + byterange.length - 1;
+    }
+    return `${byterange.offset}-${endRange}`;
+  };
+
+  /**
+   * parse the end number attribue that can be a string
+   * number, or undefined.
+   *
+   * @param {string|number|undefined} endNumber
+   *        The end number attribute.
+   *
+   * @return {number|null}
+   *          The result of parsing the end number.
+   */
+
+  const parseEndNumber = endNumber => {
+    if (endNumber && typeof endNumber !== 'number') {
+      endNumber = parseInt(endNumber, 10);
+    }
+    if (isNaN(endNumber)) {
+      return null;
+    }
+    return endNumber;
+  };
+  /**
+   * Functions for calculating the range of available segments in static and dynamic
+   * manifests.
+   */
+
+  const segmentRange = {
+    /**
+     * Returns the entire range of available segments for a static MPD
+     *
+     * @param {Object} attributes
+     *        Inheritied MPD attributes
+     * @return {{ start: number, end: number }}
+     *         The start and end numbers for available segments
+     */
+    static(attributes) {
+      const {
+        duration,
+        timescale = 1,
+        sourceDuration,
+        periodDuration
+      } = attributes;
+      const endNumber = parseEndNumber(attributes.endNumber);
+      const segmentDuration = duration / timescale;
+      if (typeof endNumber === 'number') {
+        return {
+          start: 0,
+          end: endNumber
+        };
+      }
+      if (typeof periodDuration === 'number') {
+        return {
+          start: 0,
+          end: periodDuration / segmentDuration
+        };
+      }
+      return {
+        start: 0,
+        end: sourceDuration / segmentDuration
+      };
+    },
+    /**
+     * Returns the current live window range of available segments for a dynamic MPD
+     *
+     * @param {Object} attributes
+     *        Inheritied MPD attributes
+     * @return {{ start: number, end: number }}
+     *         The start and end numbers for available segments
+     */
+    dynamic(attributes) {
+      const {
+        NOW,
+        clientOffset,
+        availabilityStartTime,
+        timescale = 1,
+        duration,
+        periodStart = 0,
+        minimumUpdatePeriod = 0,
+        timeShiftBufferDepth = Infinity
+      } = attributes;
+      const endNumber = parseEndNumber(attributes.endNumber); // clientOffset is passed in at the top level of mpd-parser and is an offset calculated
+      // after retrieving UTC server time.
+
+      const now = (NOW + clientOffset) / 1000; // WC stands for Wall Clock.
+      // Convert the period start time to EPOCH.
+
+      const periodStartWC = availabilityStartTime + periodStart; // Period end in EPOCH is manifest's retrieval time + time until next update.
+
+      const periodEndWC = now + minimumUpdatePeriod;
+      const periodDuration = periodEndWC - periodStartWC;
+      const segmentCount = Math.ceil(periodDuration * timescale / duration);
+      const availableStart = Math.floor((now - periodStartWC - timeShiftBufferDepth) * timescale / duration);
+      const availableEnd = Math.floor((now - periodStartWC) * timescale / duration);
+      return {
+        start: Math.max(0, availableStart),
+        end: typeof endNumber === 'number' ? endNumber : Math.min(segmentCount, availableEnd)
+      };
+    }
+  };
+  /**
+   * Maps a range of numbers to objects with information needed to build the corresponding
+   * segment list
+   *
+   * @name toSegmentsCallback
+   * @function
+   * @param {number} number
+   *        Number of the segment
+   * @param {number} index
+   *        Index of the number in the range list
+   * @return {{ number: Number, duration: Number, timeline: Number, time: Number }}
+   *         Object with segment timing and duration info
+   */
+
+  /**
+   * Returns a callback for Array.prototype.map for mapping a range of numbers to
+   * information needed to build the segment list.
+   *
+   * @param {Object} attributes
+   *        Inherited MPD attributes
+   * @return {toSegmentsCallback}
+   *         Callback map function
+   */
+
+  const toSegments = attributes => number => {
+    const {
+      duration,
+      timescale = 1,
+      periodStart,
+      startNumber = 1
+    } = attributes;
+    return {
+      number: startNumber + number,
+      duration: duration / timescale,
+      timeline: periodStart,
+      time: number * duration
+    };
+  };
+  /**
+   * Returns a list of objects containing segment timing and duration info used for
+   * building the list of segments. This uses the @duration attribute specified
+   * in the MPD manifest to derive the range of segments.
+   *
+   * @param {Object} attributes
+   *        Inherited MPD attributes
+   * @return {{number: number, duration: number, time: number, timeline: number}[]}
+   *         List of Objects with segment timing and duration info
+   */
+
+  const parseByDuration = attributes => {
+    const {
+      type,
+      duration,
+      timescale = 1,
+      periodDuration,
+      sourceDuration
+    } = attributes;
+    const {
+      start,
+      end
+    } = segmentRange[type](attributes);
+    const segments = range(start, end).map(toSegments(attributes));
+    if (type === 'static') {
+      const index = segments.length - 1; // section is either a period or the full source
+
+      const sectionDuration = typeof periodDuration === 'number' ? periodDuration : sourceDuration; // final segment may be less than full segment duration
+
+      segments[index].duration = sectionDuration - duration / timescale * index;
+    }
+    return segments;
+  };
+
+  /**
+   * Translates SegmentBase into a set of segments.
+   * (DASH SPEC Section 5.3.9.3.2) contains a set of <SegmentURL> nodes.  Each
+   * node should be translated into segment.
+   *
+   * @param {Object} attributes
+   *   Object containing all inherited attributes from parent elements with attribute
+   *   names as keys
+   * @return {Object.<Array>} list of segments
+   */
+
+  const segmentsFromBase = attributes => {
+    const {
+      baseUrl,
+      initialization = {},
+      sourceDuration,
+      indexRange = '',
+      periodStart,
+      presentationTime,
+      number = 0,
+      duration
+    } = attributes; // base url is required for SegmentBase to work, per spec (Section 5.3.9.2.1)
+
+    if (!baseUrl) {
+      throw new Error(errors.NO_BASE_URL);
+    }
+    const initSegment = urlTypeToSegment({
+      baseUrl,
+      source: initialization.sourceURL,
+      range: initialization.range
+    });
+    const segment = urlTypeToSegment({
+      baseUrl,
+      source: baseUrl,
+      indexRange
+    });
+    segment.map = initSegment; // If there is a duration, use it, otherwise use the given duration of the source
+    // (since SegmentBase is only for one total segment)
+
+    if (duration) {
+      const segmentTimeInfo = parseByDuration(attributes);
+      if (segmentTimeInfo.length) {
+        segment.duration = segmentTimeInfo[0].duration;
+        segment.timeline = segmentTimeInfo[0].timeline;
+      }
+    } else if (sourceDuration) {
+      segment.duration = sourceDuration;
+      segment.timeline = periodStart;
+    } // If presentation time is provided, these segments are being generated by SIDX
+    // references, and should use the time provided. For the general case of SegmentBase,
+    // there should only be one segment in the period, so its presentation time is the same
+    // as its period start.
+
+    segment.presentationTime = presentationTime || periodStart;
+    segment.number = number;
+    return [segment];
+  };
+  /**
+   * Given a playlist, a sidx box, and a baseUrl, update the segment list of the playlist
+   * according to the sidx information given.
+   *
+   * playlist.sidx has metadadata about the sidx where-as the sidx param
+   * is the parsed sidx box itself.
+   *
+   * @param {Object} playlist the playlist to update the sidx information for
+   * @param {Object} sidx the parsed sidx box
+   * @return {Object} the playlist object with the updated sidx information
+   */
+
+  const addSidxSegmentsToPlaylist$1 = (playlist, sidx, baseUrl) => {
+    // Retain init segment information
+    const initSegment = playlist.sidx.map ? playlist.sidx.map : null; // Retain source duration from initial main manifest parsing
+
+    const sourceDuration = playlist.sidx.duration; // Retain source timeline
+
+    const timeline = playlist.timeline || 0;
+    const sidxByteRange = playlist.sidx.byterange;
+    const sidxEnd = sidxByteRange.offset + sidxByteRange.length; // Retain timescale of the parsed sidx
+
+    const timescale = sidx.timescale; // referenceType 1 refers to other sidx boxes
+
+    const mediaReferences = sidx.references.filter(r => r.referenceType !== 1);
+    const segments = [];
+    const type = playlist.endList ? 'static' : 'dynamic';
+    const periodStart = playlist.sidx.timeline;
+    let presentationTime = periodStart;
+    let number = playlist.mediaSequence || 0; // firstOffset is the offset from the end of the sidx box
+
+    let startIndex; // eslint-disable-next-line
+
+    if (typeof sidx.firstOffset === 'bigint') {
+      startIndex = window.BigInt(sidxEnd) + sidx.firstOffset;
+    } else {
+      startIndex = sidxEnd + sidx.firstOffset;
+    }
+    for (let i = 0; i < mediaReferences.length; i++) {
+      const reference = sidx.references[i]; // size of the referenced (sub)segment
+
+      const size = reference.referencedSize; // duration of the referenced (sub)segment, in  the  timescale
+      // this will be converted to seconds when generating segments
+
+      const duration = reference.subsegmentDuration; // should be an inclusive range
+
+      let endIndex; // eslint-disable-next-line
+
+      if (typeof startIndex === 'bigint') {
+        endIndex = startIndex + window.BigInt(size) - window.BigInt(1);
+      } else {
+        endIndex = startIndex + size - 1;
+      }
+      const indexRange = `${startIndex}-${endIndex}`;
+      const attributes = {
+        baseUrl,
+        timescale,
+        timeline,
+        periodStart,
+        presentationTime,
+        number,
+        duration,
+        sourceDuration,
+        indexRange,
+        type
+      };
+      const segment = segmentsFromBase(attributes)[0];
+      if (initSegment) {
+        segment.map = initSegment;
+      }
+      segments.push(segment);
+      if (typeof startIndex === 'bigint') {
+        startIndex += window.BigInt(size);
+      } else {
+        startIndex += size;
+      }
+      presentationTime += duration / timescale;
+      number++;
+    }
+    playlist.segments = segments;
+    return playlist;
+  };
+  const SUPPORTED_MEDIA_TYPES = ['AUDIO', 'SUBTITLES']; // allow one 60fps frame as leniency (arbitrarily chosen)
+
+  const TIME_FUDGE = 1 / 60;
+  /**
+   * Given a list of timelineStarts, combines, dedupes, and sorts them.
+   *
+   * @param {TimelineStart[]} timelineStarts - list of timeline starts
+   *
+   * @return {TimelineStart[]} the combined and deduped timeline starts
+   */
+
+  const getUniqueTimelineStarts = timelineStarts => {
+    return union(timelineStarts, ({
+      timeline
+    }) => timeline).sort((a, b) => a.timeline > b.timeline ? 1 : -1);
+  };
+  /**
+   * Finds the playlist with the matching NAME attribute.
+   *
+   * @param {Array} playlists - playlists to search through
+   * @param {string} name - the NAME attribute to search for
+   *
+   * @return {Object|null} the matching playlist object, or null
+   */
+
+  const findPlaylistWithName = (playlists, name) => {
+    for (let i = 0; i < playlists.length; i++) {
+      if (playlists[i].attributes.NAME === name) {
+        return playlists[i];
+      }
+    }
+    return null;
+  };
+  /**
+   * Gets a flattened array of media group playlists.
+   *
+   * @param {Object} manifest - the main manifest object
+   *
+   * @return {Array} the media group playlists
+   */
+
+  const getMediaGroupPlaylists = manifest => {
+    let mediaGroupPlaylists = [];
+    forEachMediaGroup$1(manifest, SUPPORTED_MEDIA_TYPES, (properties, type, group, label) => {
+      mediaGroupPlaylists = mediaGroupPlaylists.concat(properties.playlists || []);
+    });
+    return mediaGroupPlaylists;
+  };
+  /**
+   * Updates the playlist's media sequence numbers.
+   *
+   * @param {Object} config - options object
+   * @param {Object} config.playlist - the playlist to update
+   * @param {number} config.mediaSequence - the mediaSequence number to start with
+   */
+
+  const updateMediaSequenceForPlaylist = ({
+    playlist,
+    mediaSequence
+  }) => {
+    playlist.mediaSequence = mediaSequence;
+    playlist.segments.forEach((segment, index) => {
+      segment.number = playlist.mediaSequence + index;
+    });
+  };
+  /**
+   * Updates the media and discontinuity sequence numbers of newPlaylists given oldPlaylists
+   * and a complete list of timeline starts.
+   *
+   * If no matching playlist is found, only the discontinuity sequence number of the playlist
+   * will be updated.
+   *
+   * Since early available timelines are not supported, at least one segment must be present.
+   *
+   * @param {Object} config - options object
+   * @param {Object[]} oldPlaylists - the old playlists to use as a reference
+   * @param {Object[]} newPlaylists - the new playlists to update
+   * @param {Object} timelineStarts - all timelineStarts seen in the stream to this point
+   */
+
+  const updateSequenceNumbers = ({
+    oldPlaylists,
+    newPlaylists,
+    timelineStarts
+  }) => {
+    newPlaylists.forEach(playlist => {
+      playlist.discontinuitySequence = timelineStarts.findIndex(function ({
+        timeline
+      }) {
+        return timeline === playlist.timeline;
+      }); // Playlists NAMEs come from DASH Representation IDs, which are mandatory
+      // (see ISO_23009-1-2012 5.3.5.2).
+      //
+      // If the same Representation existed in a prior Period, it will retain the same NAME.
+
+      const oldPlaylist = findPlaylistWithName(oldPlaylists, playlist.attributes.NAME);
+      if (!oldPlaylist) {
+        // Since this is a new playlist, the media sequence values can start from 0 without
+        // consequence.
+        return;
+      } // TODO better support for live SIDX
+      //
+      // As of this writing, mpd-parser does not support multiperiod SIDX (in live or VOD).
+      // This is evident by a playlist only having a single SIDX reference. In a multiperiod
+      // playlist there would need to be multiple SIDX references. In addition, live SIDX is
+      // not supported when the SIDX properties change on refreshes.
+      //
+      // In the future, if support needs to be added, the merging logic here can be called
+      // after SIDX references are resolved. For now, exit early to prevent exceptions being
+      // thrown due to undefined references.
+
+      if (playlist.sidx) {
+        return;
+      } // Since we don't yet support early available timelines, we don't need to support
+      // playlists with no segments.
+
+      const firstNewSegment = playlist.segments[0];
+      const oldMatchingSegmentIndex = oldPlaylist.segments.findIndex(function (oldSegment) {
+        return Math.abs(oldSegment.presentationTime - firstNewSegment.presentationTime) < TIME_FUDGE;
+      }); // No matching segment from the old playlist means the entire playlist was refreshed.
+      // In this case the media sequence should account for this update, and the new segments
+      // should be marked as discontinuous from the prior content, since the last prior
+      // timeline was removed.
+
+      if (oldMatchingSegmentIndex === -1) {
+        updateMediaSequenceForPlaylist({
+          playlist,
+          mediaSequence: oldPlaylist.mediaSequence + oldPlaylist.segments.length
+        });
+        playlist.segments[0].discontinuity = true;
+        playlist.discontinuityStarts.unshift(0); // No matching segment does not necessarily mean there's missing content.
+        //
+        // If the new playlist's timeline is the same as the last seen segment's timeline,
+        // then a discontinuity can be added to identify that there's potentially missing
+        // content. If there's no missing content, the discontinuity should still be rather
+        // harmless. It's possible that if segment durations are accurate enough, that the
+        // existence of a gap can be determined using the presentation times and durations,
+        // but if the segment timing info is off, it may introduce more problems than simply
+        // adding the discontinuity.
+        //
+        // If the new playlist's timeline is different from the last seen segment's timeline,
+        // then a discontinuity can be added to identify that this is the first seen segment
+        // of a new timeline. However, the logic at the start of this function that
+        // determined the disconinuity sequence by timeline index is now off by one (the
+        // discontinuity of the newest timeline hasn't yet fallen off the manifest...since
+        // we added it), so the disconinuity sequence must be decremented.
+        //
+        // A period may also have a duration of zero, so the case of no segments is handled
+        // here even though we don't yet support early available periods.
+
+        if (!oldPlaylist.segments.length && playlist.timeline > oldPlaylist.timeline || oldPlaylist.segments.length && playlist.timeline > oldPlaylist.segments[oldPlaylist.segments.length - 1].timeline) {
+          playlist.discontinuitySequence--;
+        }
+        return;
+      } // If the first segment matched with a prior segment on a discontinuity (it's matching
+      // on the first segment of a period), then the discontinuitySequence shouldn't be the
+      // timeline's matching one, but instead should be the one prior, and the first segment
+      // of the new manifest should be marked with a discontinuity.
+      //
+      // The reason for this special case is that discontinuity sequence shows how many
+      // discontinuities have fallen off of the playlist, and discontinuities are marked on
+      // the first segment of a new "timeline." Because of this, while DASH will retain that
+      // Period while the "timeline" exists, HLS keeps track of it via the discontinuity
+      // sequence, and that first segment is an indicator, but can be removed before that
+      // timeline is gone.
+
+      const oldMatchingSegment = oldPlaylist.segments[oldMatchingSegmentIndex];
+      if (oldMatchingSegment.discontinuity && !firstNewSegment.discontinuity) {
+        firstNewSegment.discontinuity = true;
+        playlist.discontinuityStarts.unshift(0);
+        playlist.discontinuitySequence--;
+      }
+      updateMediaSequenceForPlaylist({
+        playlist,
+        mediaSequence: oldPlaylist.segments[oldMatchingSegmentIndex].number
+      });
+    });
+  };
+  /**
+   * Given an old parsed manifest object and a new parsed manifest object, updates the
+   * sequence and timing values within the new manifest to ensure that it lines up with the
+   * old.
+   *
+   * @param {Array} oldManifest - the old main manifest object
+   * @param {Array} newManifest - the new main manifest object
+   *
+   * @return {Object} the updated new manifest object
+   */
+
+  const positionManifestOnTimeline = ({
+    oldManifest,
+    newManifest
+  }) => {
+    // Starting from v4.1.2 of the IOP, section 4.4.3.3 states:
+    //
+    // "MPD@availabilityStartTime and Period@start shall not be changed over MPD updates."
+    //
+    // This was added from https://github.com/Dash-Industry-Forum/DASH-IF-IOP/issues/160
+    //
+    // Because of this change, and the difficulty of supporting periods with changing start
+    // times, periods with changing start times are not supported. This makes the logic much
+    // simpler, since periods with the same start time can be considerred the same period
+    // across refreshes.
+    //
+    // To give an example as to the difficulty of handling periods where the start time may
+    // change, if a single period manifest is refreshed with another manifest with a single
+    // period, and both the start and end times are increased, then the only way to determine
+    // if it's a new period or an old one that has changed is to look through the segments of
+    // each playlist and determine the presentation time bounds to find a match. In addition,
+    // if the period start changed to exceed the old period end, then there would be no
+    // match, and it would not be possible to determine whether the refreshed period is a new
+    // one or the old one.
+    const oldPlaylists = oldManifest.playlists.concat(getMediaGroupPlaylists(oldManifest));
+    const newPlaylists = newManifest.playlists.concat(getMediaGroupPlaylists(newManifest)); // Save all seen timelineStarts to the new manifest. Although this potentially means that
+    // there's a "memory leak" in that it will never stop growing, in reality, only a couple
+    // of properties are saved for each seen Period. Even long running live streams won't
+    // generate too many Periods, unless the stream is watched for decades. In the future,
+    // this can be optimized by mapping to discontinuity sequence numbers for each timeline,
+    // but it may not become an issue, and the additional info can be useful for debugging.
+
+    newManifest.timelineStarts = getUniqueTimelineStarts([oldManifest.timelineStarts, newManifest.timelineStarts]);
+    updateSequenceNumbers({
+      oldPlaylists,
+      newPlaylists,
+      timelineStarts: newManifest.timelineStarts
+    });
+    return newManifest;
+  };
+  const generateSidxKey = sidx => sidx && sidx.uri + '-' + byteRangeToString(sidx.byterange);
+  const mergeDiscontiguousPlaylists = playlists => {
+    // Break out playlists into groups based on their baseUrl
+    const playlistsByBaseUrl = playlists.reduce(function (acc, cur) {
+      if (!acc[cur.attributes.baseUrl]) {
+        acc[cur.attributes.baseUrl] = [];
+      }
+      acc[cur.attributes.baseUrl].push(cur);
+      return acc;
+    }, {});
+    let allPlaylists = [];
+    Object.values(playlistsByBaseUrl).forEach(playlistGroup => {
+      const mergedPlaylists = values(playlistGroup.reduce((acc, playlist) => {
+        // assuming playlist IDs are the same across periods
+        // TODO: handle multiperiod where representation sets are not the same
+        // across periods
+        const name = playlist.attributes.id + (playlist.attributes.lang || '');
+        if (!acc[name]) {
+          // First Period
+          acc[name] = playlist;
+          acc[name].attributes.timelineStarts = [];
+        } else {
+          // Subsequent Periods
+          if (playlist.segments) {
+            // first segment of subsequent periods signal a discontinuity
+            if (playlist.segments[0]) {
+              playlist.segments[0].discontinuity = true;
+            }
+            acc[name].segments.push(...playlist.segments);
+          } // bubble up contentProtection, this assumes all DRM content
+          // has the same contentProtection
+
+          if (playlist.attributes.contentProtection) {
+            acc[name].attributes.contentProtection = playlist.attributes.contentProtection;
+          }
+        }
+        acc[name].attributes.timelineStarts.push({
+          // Although they represent the same number, it's important to have both to make it
+          // compatible with HLS potentially having a similar attribute.
+          start: playlist.attributes.periodStart,
+          timeline: playlist.attributes.periodStart
+        });
+        return acc;
+      }, {}));
+      allPlaylists = allPlaylists.concat(mergedPlaylists);
+    });
+    return allPlaylists.map(playlist => {
+      playlist.discontinuityStarts = findIndexes(playlist.segments || [], 'discontinuity');
+      return playlist;
+    });
+  };
+  const addSidxSegmentsToPlaylist = (playlist, sidxMapping) => {
+    const sidxKey = generateSidxKey(playlist.sidx);
+    const sidxMatch = sidxKey && sidxMapping[sidxKey] && sidxMapping[sidxKey].sidx;
+    if (sidxMatch) {
+      addSidxSegmentsToPlaylist$1(playlist, sidxMatch, playlist.sidx.resolvedUri);
+    }
+    return playlist;
+  };
+  const addSidxSegmentsToPlaylists = (playlists, sidxMapping = {}) => {
+    if (!Object.keys(sidxMapping).length) {
+      return playlists;
+    }
+    for (const i in playlists) {
+      playlists[i] = addSidxSegmentsToPlaylist(playlists[i], sidxMapping);
+    }
+    return playlists;
+  };
+  const formatAudioPlaylist = ({
+    attributes,
+    segments,
+    sidx,
+    mediaSequence,
+    discontinuitySequence,
+    discontinuityStarts
+  }, isAudioOnly) => {
+    const playlist = {
+      attributes: {
+        NAME: attributes.id,
+        BANDWIDTH: attributes.bandwidth,
+        CODECS: attributes.codecs,
+        ['PROGRAM-ID']: 1
+      },
+      uri: '',
+      endList: attributes.type === 'static',
+      timeline: attributes.periodStart,
+      resolvedUri: attributes.baseUrl || '',
+      targetDuration: attributes.duration,
+      discontinuitySequence,
+      discontinuityStarts,
+      timelineStarts: attributes.timelineStarts,
+      mediaSequence,
+      segments
+    };
+    if (attributes.contentProtection) {
+      playlist.contentProtection = attributes.contentProtection;
+    }
+    if (attributes.serviceLocation) {
+      playlist.attributes.serviceLocation = attributes.serviceLocation;
+    }
+    if (sidx) {
+      playlist.sidx = sidx;
+    }
+    if (isAudioOnly) {
+      playlist.attributes.AUDIO = 'audio';
+      playlist.attributes.SUBTITLES = 'subs';
+    }
+    return playlist;
+  };
+  const formatVttPlaylist = ({
+    attributes,
+    segments,
+    mediaSequence,
+    discontinuityStarts,
+    discontinuitySequence
+  }) => {
+    if (typeof segments === 'undefined') {
+      // vtt tracks may use single file in BaseURL
+      segments = [{
+        uri: attributes.baseUrl,
+        timeline: attributes.periodStart,
+        resolvedUri: attributes.baseUrl || '',
+        duration: attributes.sourceDuration,
+        number: 0
+      }]; // targetDuration should be the same duration as the only segment
+
+      attributes.duration = attributes.sourceDuration;
+    }
+    const m3u8Attributes = {
+      NAME: attributes.id,
+      BANDWIDTH: attributes.bandwidth,
+      ['PROGRAM-ID']: 1
+    };
+    if (attributes.codecs) {
+      m3u8Attributes.CODECS = attributes.codecs;
+    }
+    const vttPlaylist = {
+      attributes: m3u8Attributes,
+      uri: '',
+      endList: attributes.type === 'static',
+      timeline: attributes.periodStart,
+      resolvedUri: attributes.baseUrl || '',
+      targetDuration: attributes.duration,
+      timelineStarts: attributes.timelineStarts,
+      discontinuityStarts,
+      discontinuitySequence,
+      mediaSequence,
+      segments
+    };
+    if (attributes.serviceLocation) {
+      vttPlaylist.attributes.serviceLocation = attributes.serviceLocation;
+    }
+    return vttPlaylist;
+  };
+  const organizeAudioPlaylists = (playlists, sidxMapping = {}, isAudioOnly = false) => {
+    let mainPlaylist;
+    const formattedPlaylists = playlists.reduce((a, playlist) => {
+      const role = playlist.attributes.role && playlist.attributes.role.value || '';
+      const language = playlist.attributes.lang || '';
+      let label = playlist.attributes.label || 'main';
+      if (language && !playlist.attributes.label) {
+        const roleLabel = role ? ` (${role})` : '';
+        label = `${playlist.attributes.lang}${roleLabel}`;
+      }
+      if (!a[label]) {
+        a[label] = {
+          language,
+          autoselect: true,
+          default: role === 'main',
+          playlists: [],
+          uri: ''
+        };
+      }
+      const formatted = addSidxSegmentsToPlaylist(formatAudioPlaylist(playlist, isAudioOnly), sidxMapping);
+      a[label].playlists.push(formatted);
+      if (typeof mainPlaylist === 'undefined' && role === 'main') {
+        mainPlaylist = playlist;
+        mainPlaylist.default = true;
+      }
+      return a;
+    }, {}); // if no playlists have role "main", mark the first as main
+
+    if (!mainPlaylist) {
+      const firstLabel = Object.keys(formattedPlaylists)[0];
+      formattedPlaylists[firstLabel].default = true;
+    }
+    return formattedPlaylists;
+  };
+  const organizeVttPlaylists = (playlists, sidxMapping = {}) => {
+    return playlists.reduce((a, playlist) => {
+      const label = playlist.attributes.label || playlist.attributes.lang || 'text';
+      if (!a[label]) {
+        a[label] = {
+          language: label,
+          default: false,
+          autoselect: false,
+          playlists: [],
+          uri: ''
+        };
+      }
+      a[label].playlists.push(addSidxSegmentsToPlaylist(formatVttPlaylist(playlist), sidxMapping));
+      return a;
+    }, {});
+  };
+  const organizeCaptionServices = captionServices => captionServices.reduce((svcObj, svc) => {
+    if (!svc) {
+      return svcObj;
+    }
+    svc.forEach(service => {
+      const {
+        channel,
+        language
+      } = service;
+      svcObj[language] = {
+        autoselect: false,
+        default: false,
+        instreamId: channel,
+        language
+      };
+      if (service.hasOwnProperty('aspectRatio')) {
+        svcObj[language].aspectRatio = service.aspectRatio;
+      }
+      if (service.hasOwnProperty('easyReader')) {
+        svcObj[language].easyReader = service.easyReader;
+      }
+      if (service.hasOwnProperty('3D')) {
+        svcObj[language]['3D'] = service['3D'];
+      }
+    });
+    return svcObj;
+  }, {});
+  const formatVideoPlaylist = ({
+    attributes,
+    segments,
+    sidx,
+    discontinuityStarts
+  }) => {
+    const playlist = {
+      attributes: {
+        NAME: attributes.id,
+        AUDIO: 'audio',
+        SUBTITLES: 'subs',
+        RESOLUTION: {
+          width: attributes.width,
+          height: attributes.height
+        },
+        CODECS: attributes.codecs,
+        BANDWIDTH: attributes.bandwidth,
+        ['PROGRAM-ID']: 1
+      },
+      uri: '',
+      endList: attributes.type === 'static',
+      timeline: attributes.periodStart,
+      resolvedUri: attributes.baseUrl || '',
+      targetDuration: attributes.duration,
+      discontinuityStarts,
+      timelineStarts: attributes.timelineStarts,
+      segments
+    };
+    if (attributes.frameRate) {
+      playlist.attributes['FRAME-RATE'] = attributes.frameRate;
+    }
+    if (attributes.contentProtection) {
+      playlist.contentProtection = attributes.contentProtection;
+    }
+    if (attributes.serviceLocation) {
+      playlist.attributes.serviceLocation = attributes.serviceLocation;
+    }
+    if (sidx) {
+      playlist.sidx = sidx;
+    }
+    return playlist;
+  };
+  const videoOnly = ({
+    attributes
+  }) => attributes.mimeType === 'video/mp4' || attributes.mimeType === 'video/webm' || attributes.contentType === 'video';
+  const audioOnly = ({
+    attributes
+  }) => attributes.mimeType === 'audio/mp4' || attributes.mimeType === 'audio/webm' || attributes.contentType === 'audio';
+  const vttOnly = ({
+    attributes
+  }) => attributes.mimeType === 'text/vtt' || attributes.contentType === 'text';
+  /**
+   * Contains start and timeline properties denoting a timeline start. For DASH, these will
+   * be the same number.
+   *
+   * @typedef {Object} TimelineStart
+   * @property {number} start - the start time of the timeline
+   * @property {number} timeline - the timeline number
+   */
+
+  /**
+   * Adds appropriate media and discontinuity sequence values to the segments and playlists.
+   *
+   * Throughout mpd-parser, the `number` attribute is used in relation to `startNumber`, a
+   * DASH specific attribute used in constructing segment URI's from templates. However, from
+   * an HLS perspective, the `number` attribute on a segment would be its `mediaSequence`
+   * value, which should start at the original media sequence value (or 0) and increment by 1
+   * for each segment thereafter. Since DASH's `startNumber` values are independent per
+   * period, it doesn't make sense to use it for `number`. Instead, assume everything starts
+   * from a 0 mediaSequence value and increment from there.
+   *
+   * Note that VHS currently doesn't use the `number` property, but it can be helpful for
+   * debugging and making sense of the manifest.
+   *
+   * For live playlists, to account for values increasing in manifests when periods are
+   * removed on refreshes, merging logic should be used to update the numbers to their
+   * appropriate values (to ensure they're sequential and increasing).
+   *
+   * @param {Object[]} playlists - the playlists to update
+   * @param {TimelineStart[]} timelineStarts - the timeline starts for the manifest
+   */
+
+  const addMediaSequenceValues = (playlists, timelineStarts) => {
+    // increment all segments sequentially
+    playlists.forEach(playlist => {
+      playlist.mediaSequence = 0;
+      playlist.discontinuitySequence = timelineStarts.findIndex(function ({
+        timeline
+      }) {
+        return timeline === playlist.timeline;
+      });
+      if (!playlist.segments) {
+        return;
+      }
+      playlist.segments.forEach((segment, index) => {
+        segment.number = index;
+      });
+    });
+  };
+  /**
+   * Given a media group object, flattens all playlists within the media group into a single
+   * array.
+   *
+   * @param {Object} mediaGroupObject - the media group object
+   *
+   * @return {Object[]}
+   *         The media group playlists
+   */
+
+  const flattenMediaGroupPlaylists = mediaGroupObject => {
+    if (!mediaGroupObject) {
+      return [];
+    }
+    return Object.keys(mediaGroupObject).reduce((acc, label) => {
+      const labelContents = mediaGroupObject[label];
+      return acc.concat(labelContents.playlists);
+    }, []);
+  };
+  const toM3u8 = ({
+    dashPlaylists,
+    locations,
+    contentSteering,
+    sidxMapping = {},
+    previousManifest,
+    eventStream
+  }) => {
+    if (!dashPlaylists.length) {
+      return {};
+    } // grab all main manifest attributes
+
+    const {
+      sourceDuration: duration,
+      type,
+      suggestedPresentationDelay,
+      minimumUpdatePeriod
+    } = dashPlaylists[0].attributes;
+    const videoPlaylists = mergeDiscontiguousPlaylists(dashPlaylists.filter(videoOnly)).map(formatVideoPlaylist);
+    const audioPlaylists = mergeDiscontiguousPlaylists(dashPlaylists.filter(audioOnly));
+    const vttPlaylists = mergeDiscontiguousPlaylists(dashPlaylists.filter(vttOnly));
+    const captions = dashPlaylists.map(playlist => playlist.attributes.captionServices).filter(Boolean);
+    const manifest = {
+      allowCache: true,
+      discontinuityStarts: [],
+      segments: [],
+      endList: true,
+      mediaGroups: {
+        AUDIO: {},
+        VIDEO: {},
+        ['CLOSED-CAPTIONS']: {},
+        SUBTITLES: {}
+      },
+      uri: '',
+      duration,
+      playlists: addSidxSegmentsToPlaylists(videoPlaylists, sidxMapping)
+    };
+    if (minimumUpdatePeriod >= 0) {
+      manifest.minimumUpdatePeriod = minimumUpdatePeriod * 1000;
+    }
+    if (locations) {
+      manifest.locations = locations;
+    }
+    if (contentSteering) {
+      manifest.contentSteering = contentSteering;
+    }
+    if (type === 'dynamic') {
+      manifest.suggestedPresentationDelay = suggestedPresentationDelay;
+    }
+    if (eventStream && eventStream.length > 0) {
+      manifest.eventStream = eventStream;
+    }
+    const isAudioOnly = manifest.playlists.length === 0;
+    const organizedAudioGroup = audioPlaylists.length ? organizeAudioPlaylists(audioPlaylists, sidxMapping, isAudioOnly) : null;
+    const organizedVttGroup = vttPlaylists.length ? organizeVttPlaylists(vttPlaylists, sidxMapping) : null;
+    const formattedPlaylists = videoPlaylists.concat(flattenMediaGroupPlaylists(organizedAudioGroup), flattenMediaGroupPlaylists(organizedVttGroup));
+    const playlistTimelineStarts = formattedPlaylists.map(({
+      timelineStarts
+    }) => timelineStarts);
+    manifest.timelineStarts = getUniqueTimelineStarts(playlistTimelineStarts);
+    addMediaSequenceValues(formattedPlaylists, manifest.timelineStarts);
+    if (organizedAudioGroup) {
+      manifest.mediaGroups.AUDIO.audio = organizedAudioGroup;
+    }
+    if (organizedVttGroup) {
+      manifest.mediaGroups.SUBTITLES.subs = organizedVttGroup;
+    }
+    if (captions.length) {
+      manifest.mediaGroups['CLOSED-CAPTIONS'].cc = organizeCaptionServices(captions);
+    }
+    if (previousManifest) {
+      return positionManifestOnTimeline({
+        oldManifest: previousManifest,
+        newManifest: manifest
+      });
+    }
+    return manifest;
+  };
+
+  /**
+   * Calculates the R (repetition) value for a live stream (for the final segment
+   * in a manifest where the r value is negative 1)
+   *
+   * @param {Object} attributes
+   *        Object containing all inherited attributes from parent elements with attribute
+   *        names as keys
+   * @param {number} time
+   *        current time (typically the total time up until the final segment)
+   * @param {number} duration
+   *        duration property for the given <S />
+   *
+   * @return {number}
+   *        R value to reach the end of the given period
+   */
+  const getLiveRValue = (attributes, time, duration) => {
+    const {
+      NOW,
+      clientOffset,
+      availabilityStartTime,
+      timescale = 1,
+      periodStart = 0,
+      minimumUpdatePeriod = 0
+    } = attributes;
+    const now = (NOW + clientOffset) / 1000;
+    const periodStartWC = availabilityStartTime + periodStart;
+    const periodEndWC = now + minimumUpdatePeriod;
+    const periodDuration = periodEndWC - periodStartWC;
+    return Math.ceil((periodDuration * timescale - time) / duration);
+  };
+  /**
+   * Uses information provided by SegmentTemplate.SegmentTimeline to determine segment
+   * timing and duration
+   *
+   * @param {Object} attributes
+   *        Object containing all inherited attributes from parent elements with attribute
+   *        names as keys
+   * @param {Object[]} segmentTimeline
+   *        List of objects representing the attributes of each S element contained within
+   *
+   * @return {{number: number, duration: number, time: number, timeline: number}[]}
+   *         List of Objects with segment timing and duration info
+   */
+
+  const parseByTimeline = (attributes, segmentTimeline) => {
+    const {
+      type,
+      minimumUpdatePeriod = 0,
+      media = '',
+      sourceDuration,
+      timescale = 1,
+      startNumber = 1,
+      periodStart: timeline
+    } = attributes;
+    const segments = [];
+    let time = -1;
+    for (let sIndex = 0; sIndex < segmentTimeline.length; sIndex++) {
+      const S = segmentTimeline[sIndex];
+      const duration = S.d;
+      const repeat = S.r || 0;
+      const segmentTime = S.t || 0;
+      if (time < 0) {
+        // first segment
+        time = segmentTime;
+      }
+      if (segmentTime && segmentTime > time) {
+        // discontinuity
+        // TODO: How to handle this type of discontinuity
+        // timeline++ here would treat it like HLS discontuity and content would
+        // get appended without gap
+        // E.G.
+        //  <S t="0" d="1" />
+        //  <S d="1" />
+        //  <S d="1" />
+        //  <S t="5" d="1" />
+        // would have $Time$ values of [0, 1, 2, 5]
+        // should this be appened at time positions [0, 1, 2, 3],(#EXT-X-DISCONTINUITY)
+        // or [0, 1, 2, gap, gap, 5]? (#EXT-X-GAP)
+        // does the value of sourceDuration consider this when calculating arbitrary
+        // negative @r repeat value?
+        // E.G. Same elements as above with this added at the end
+        //  <S d="1" r="-1" />
+        //  with a sourceDuration of 10
+        // Would the 2 gaps be included in the time duration calculations resulting in
+        // 8 segments with $Time$ values of [0, 1, 2, 5, 6, 7, 8, 9] or 10 segments
+        // with $Time$ values of [0, 1, 2, 5, 6, 7, 8, 9, 10, 11] ?
+        time = segmentTime;
+      }
+      let count;
+      if (repeat < 0) {
+        const nextS = sIndex + 1;
+        if (nextS === segmentTimeline.length) {
+          // last segment
+          if (type === 'dynamic' && minimumUpdatePeriod > 0 && media.indexOf('$Number$') > 0) {
+            count = getLiveRValue(attributes, time, duration);
+          } else {
+            // TODO: This may be incorrect depending on conclusion of TODO above
+            count = (sourceDuration * timescale - time) / duration;
+          }
+        } else {
+          count = (segmentTimeline[nextS].t - time) / duration;
+        }
+      } else {
+        count = repeat + 1;
+      }
+      const end = startNumber + segments.length + count;
+      let number = startNumber + segments.length;
+      while (number < end) {
+        segments.push({
+          number,
+          duration: duration / timescale,
+          time,
+          timeline
+        });
+        time += duration;
+        number++;
+      }
+    }
+    return segments;
+  };
+  const identifierPattern = /\$([A-z]*)(?:(%0)([0-9]+)d)?\$/g;
+  /**
+   * Replaces template identifiers with corresponding values. To be used as the callback
+   * for String.prototype.replace
+   *
+   * @name replaceCallback
+   * @function
+   * @param {string} match
+   *        Entire match of identifier
+   * @param {string} identifier
+   *        Name of matched identifier
+   * @param {string} format
+   *        Format tag string. Its presence indicates that padding is expected
+   * @param {string} width
+   *        Desired length of the replaced value. Values less than this width shall be left
+   *        zero padded
+   * @return {string}
+   *         Replacement for the matched identifier
+   */
+
+  /**
+   * Returns a function to be used as a callback for String.prototype.replace to replace
+   * template identifiers
+   *
+   * @param {Obect} values
+   *        Object containing values that shall be used to replace known identifiers
+   * @param {number} values.RepresentationID
+   *        Value of the Representation@id attribute
+   * @param {number} values.Number
+   *        Number of the corresponding segment
+   * @param {number} values.Bandwidth
+   *        Value of the Representation@bandwidth attribute.
+   * @param {number} values.Time
+   *        Timestamp value of the corresponding segment
+   * @return {replaceCallback}
+   *         Callback to be used with String.prototype.replace to replace identifiers
+   */
+
+  const identifierReplacement = values => (match, identifier, format, width) => {
+    if (match === '$$') {
+      // escape sequence
+      return '$';
+    }
+    if (typeof values[identifier] === 'undefined') {
+      return match;
+    }
+    const value = '' + values[identifier];
+    if (identifier === 'RepresentationID') {
+      // Format tag shall not be present with RepresentationID
+      return value;
+    }
+    if (!format) {
+      width = 1;
+    } else {
+      width = parseInt(width, 10);
+    }
+    if (value.length >= width) {
+      return value;
+    }
+    return `${new Array(width - value.length + 1).join('0')}${value}`;
+  };
+  /**
+   * Constructs a segment url from a template string
+   *
+   * @param {string} url
+   *        Template string to construct url from
+   * @param {Obect} values
+   *        Object containing values that shall be used to replace known identifiers
+   * @param {number} values.RepresentationID
+   *        Value of the Representation@id attribute
+   * @param {number} values.Number
+   *        Number of the corresponding segment
+   * @param {number} values.Bandwidth
+   *        Value of the Representation@bandwidth attribute.
+   * @param {number} values.Time
+   *        Timestamp value of the corresponding segment
+   * @return {string}
+   *         Segment url with identifiers replaced
+   */
+
+  const constructTemplateUrl = (url, values) => url.replace(identifierPattern, identifierReplacement(values));
+  /**
+   * Generates a list of objects containing timing and duration information about each
+   * segment needed to generate segment uris and the complete segment object
+   *
+   * @param {Object} attributes
+   *        Object containing all inherited attributes from parent elements with attribute
+   *        names as keys
+   * @param {Object[]|undefined} segmentTimeline
+   *        List of objects representing the attributes of each S element contained within
+   *        the SegmentTimeline element
+   * @return {{number: number, duration: number, time: number, timeline: number}[]}
+   *         List of Objects with segment timing and duration info
+   */
+
+  const parseTemplateInfo = (attributes, segmentTimeline) => {
+    if (!attributes.duration && !segmentTimeline) {
+      // if neither @duration or SegmentTimeline are present, then there shall be exactly
+      // one media segment
+      return [{
+        number: attributes.startNumber || 1,
+        duration: attributes.sourceDuration,
+        time: 0,
+        timeline: attributes.periodStart
+      }];
+    }
+    if (attributes.duration) {
+      return parseByDuration(attributes);
+    }
+    return parseByTimeline(attributes, segmentTimeline);
+  };
+  /**
+   * Generates a list of segments using information provided by the SegmentTemplate element
+   *
+   * @param {Object} attributes
+   *        Object containing all inherited attributes from parent elements with attribute
+   *        names as keys
+   * @param {Object[]|undefined} segmentTimeline
+   *        List of objects representing the attributes of each S element contained within
+   *        the SegmentTimeline element
+   * @return {Object[]}
+   *         List of segment objects
+   */
+
+  const segmentsFromTemplate = (attributes, segmentTimeline) => {
+    const templateValues = {
+      RepresentationID: attributes.id,
+      Bandwidth: attributes.bandwidth || 0
+    };
+    const {
+      initialization = {
+        sourceURL: '',
+        range: ''
+      }
+    } = attributes;
+    const mapSegment = urlTypeToSegment({
+      baseUrl: attributes.baseUrl,
+      source: constructTemplateUrl(initialization.sourceURL, templateValues),
+      range: initialization.range
+    });
+    const segments = parseTemplateInfo(attributes, segmentTimeline);
+    return segments.map(segment => {
+      templateValues.Number = segment.number;
+      templateValues.Time = segment.time;
+      const uri = constructTemplateUrl(attributes.media || '', templateValues); // See DASH spec section 5.3.9.2.2
+      // - if timescale isn't present on any level, default to 1.
+
+      const timescale = attributes.timescale || 1; // - if presentationTimeOffset isn't present on any level, default to 0
+
+      const presentationTimeOffset = attributes.presentationTimeOffset || 0;
+      const presentationTime =
+      // Even if the @t attribute is not specified for the segment, segment.time is
+      // calculated in mpd-parser prior to this, so it's assumed to be available.
+      attributes.periodStart + (segment.time - presentationTimeOffset) / timescale;
+      const map = {
+        uri,
+        timeline: segment.timeline,
+        duration: segment.duration,
+        resolvedUri: resolveUrl$1(attributes.baseUrl || '', uri),
+        map: mapSegment,
+        number: segment.number,
+        presentationTime
+      };
+      return map;
+    });
+  };
+
+  /**
+   * Converts a <SegmentUrl> (of type URLType from the DASH spec 5.3.9.2 Table 14)
+   * to an object that matches the output of a segment in videojs/mpd-parser
+   *
+   * @param {Object} attributes
+   *   Object containing all inherited attributes from parent elements with attribute
+   *   names as keys
+   * @param {Object} segmentUrl
+   *   <SegmentURL> node to translate into a segment object
+   * @return {Object} translated segment object
+   */
+
+  const SegmentURLToSegmentObject = (attributes, segmentUrl) => {
+    const {
+      baseUrl,
+      initialization = {}
+    } = attributes;
+    const initSegment = urlTypeToSegment({
+      baseUrl,
+      source: initialization.sourceURL,
+      range: initialization.range
+    });
+    const segment = urlTypeToSegment({
+      baseUrl,
+      source: segmentUrl.media,
+      range: segmentUrl.mediaRange
+    });
+    segment.map = initSegment;
+    return segment;
+  };
+  /**
+   * Generates a list of segments using information provided by the SegmentList element
+   * SegmentList (DASH SPEC Section 5.3.9.3.2) contains a set of <SegmentURL> nodes.  Each
+   * node should be translated into segment.
+   *
+   * @param {Object} attributes
+   *   Object containing all inherited attributes from parent elements with attribute
+   *   names as keys
+   * @param {Object[]|undefined} segmentTimeline
+   *        List of objects representing the attributes of each S element contained within
+   *        the SegmentTimeline element
+   * @return {Object.<Array>} list of segments
+   */
+
+  const segmentsFromList = (attributes, segmentTimeline) => {
+    const {
+      duration,
+      segmentUrls = [],
+      periodStart
+    } = attributes; // Per spec (5.3.9.2.1) no way to determine segment duration OR
+    // if both SegmentTimeline and @duration are defined, it is outside of spec.
+
+    if (!duration && !segmentTimeline || duration && segmentTimeline) {
+      throw new Error(errors.SEGMENT_TIME_UNSPECIFIED);
+    }
+    const segmentUrlMap = segmentUrls.map(segmentUrlObject => SegmentURLToSegmentObject(attributes, segmentUrlObject));
+    let segmentTimeInfo;
+    if (duration) {
+      segmentTimeInfo = parseByDuration(attributes);
+    }
+    if (segmentTimeline) {
+      segmentTimeInfo = parseByTimeline(attributes, segmentTimeline);
+    }
+    const segments = segmentTimeInfo.map((segmentTime, index) => {
+      if (segmentUrlMap[index]) {
+        const segment = segmentUrlMap[index]; // See DASH spec section 5.3.9.2.2
+        // - if timescale isn't present on any level, default to 1.
+
+        const timescale = attributes.timescale || 1; // - if presentationTimeOffset isn't present on any level, default to 0
+
+        const presentationTimeOffset = attributes.presentationTimeOffset || 0;
+        segment.timeline = segmentTime.timeline;
+        segment.duration = segmentTime.duration;
+        segment.number = segmentTime.number;
+        segment.presentationTime = periodStart + (segmentTime.time - presentationTimeOffset) / timescale;
+        return segment;
+      } // Since we're mapping we should get rid of any blank segments (in case
+      // the given SegmentTimeline is handling for more elements than we have
+      // SegmentURLs for).
+    }).filter(segment => segment);
+    return segments;
+  };
+  const generateSegments = ({
+    attributes,
+    segmentInfo
+  }) => {
+    let segmentAttributes;
+    let segmentsFn;
+    if (segmentInfo.template) {
+      segmentsFn = segmentsFromTemplate;
+      segmentAttributes = merge$1(attributes, segmentInfo.template);
+    } else if (segmentInfo.base) {
+      segmentsFn = segmentsFromBase;
+      segmentAttributes = merge$1(attributes, segmentInfo.base);
+    } else if (segmentInfo.list) {
+      segmentsFn = segmentsFromList;
+      segmentAttributes = merge$1(attributes, segmentInfo.list);
+    }
+    const segmentsInfo = {
+      attributes
+    };
+    if (!segmentsFn) {
+      return segmentsInfo;
+    }
+    const segments = segmentsFn(segmentAttributes, segmentInfo.segmentTimeline); // The @duration attribute will be used to determin the playlist's targetDuration which
+    // must be in seconds. Since we've generated the segment list, we no longer need
+    // @duration to be in @timescale units, so we can convert it here.
+
+    if (segmentAttributes.duration) {
+      const {
+        duration,
+        timescale = 1
+      } = segmentAttributes;
+      segmentAttributes.duration = duration / timescale;
+    } else if (segments.length) {
+      // if there is no @duration attribute, use the largest segment duration as
+      // as target duration
+      segmentAttributes.duration = segments.reduce((max, segment) => {
+        return Math.max(max, Math.ceil(segment.duration));
+      }, 0);
+    } else {
+      segmentAttributes.duration = 0;
+    }
+    segmentsInfo.attributes = segmentAttributes;
+    segmentsInfo.segments = segments; // This is a sidx box without actual segment information
+
+    if (segmentInfo.base && segmentAttributes.indexRange) {
+      segmentsInfo.sidx = segments[0];
+      segmentsInfo.segments = [];
+    }
+    return segmentsInfo;
+  };
+  const toPlaylists = representations => representations.map(generateSegments);
+  const findChildren = (element, name) => from(element.childNodes).filter(({
+    tagName
+  }) => tagName === name);
+  const getContent = element => element.textContent.trim();
+
+  /**
+   * Converts the provided string that may contain a division operation to a number.
+   *
+   * @param {string} value - the provided string value
+   *
+   * @return {number} the parsed string value
+   */
+  const parseDivisionValue = value => {
+    return parseFloat(value.split('/').reduce((prev, current) => prev / current));
+  };
+  const parseDuration = str => {
+    const SECONDS_IN_YEAR = 365 * 24 * 60 * 60;
+    const SECONDS_IN_MONTH = 30 * 24 * 60 * 60;
+    const SECONDS_IN_DAY = 24 * 60 * 60;
+    const SECONDS_IN_HOUR = 60 * 60;
+    const SECONDS_IN_MIN = 60; // P10Y10M10DT10H10M10.1S
+
+    const durationRegex = /P(?:(\d*)Y)?(?:(\d*)M)?(?:(\d*)D)?(?:T(?:(\d*)H)?(?:(\d*)M)?(?:([\d.]*)S)?)?/;
+    const match = durationRegex.exec(str);
+    if (!match) {
+      return 0;
+    }
+    const [year, month, day, hour, minute, second] = match.slice(1);
+    return parseFloat(year || 0) * SECONDS_IN_YEAR + parseFloat(month || 0) * SECONDS_IN_MONTH + parseFloat(day || 0) * SECONDS_IN_DAY + parseFloat(hour || 0) * SECONDS_IN_HOUR + parseFloat(minute || 0) * SECONDS_IN_MIN + parseFloat(second || 0);
+  };
+  const parseDate = str => {
+    // Date format without timezone according to ISO 8601
+    // YYY-MM-DDThh:mm:ss.ssssss
+    const dateRegex = /^\d+-\d+-\d+T\d+:\d+:\d+(\.\d+)?$/; // If the date string does not specifiy a timezone, we must specifiy UTC. This is
+    // expressed by ending with 'Z'
+
+    if (dateRegex.test(str)) {
+      str += 'Z';
+    }
+    return Date.parse(str);
+  };
+  const parsers = {
+    /**
+     * Specifies the duration of the entire Media Presentation. Format is a duration string
+     * as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    mediaPresentationDuration(value) {
+      return parseDuration(value);
+    },
+    /**
+     * Specifies the Segment availability start time for all Segments referred to in this
+     * MPD. For a dynamic manifest, it specifies the anchor for the earliest availability
+     * time. Format is a date string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The date as seconds from unix epoch
+     */
+    availabilityStartTime(value) {
+      return parseDate(value) / 1000;
+    },
+    /**
+     * Specifies the smallest period between potential changes to the MPD. Format is a
+     * duration string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    minimumUpdatePeriod(value) {
+      return parseDuration(value);
+    },
+    /**
+     * Specifies the suggested presentation delay. Format is a
+     * duration string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    suggestedPresentationDelay(value) {
+      return parseDuration(value);
+    },
+    /**
+     * specifices the type of mpd. Can be either "static" or "dynamic"
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     *
+     * @return {string}
+     *         The type as a string
+     */
+    type(value) {
+      return value;
+    },
+    /**
+     * Specifies the duration of the smallest time shifting buffer for any Representation
+     * in the MPD. Format is a duration string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    timeShiftBufferDepth(value) {
+      return parseDuration(value);
+    },
+    /**
+     * Specifies the PeriodStart time of the Period relative to the availabilityStarttime.
+     * Format is a duration string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    start(value) {
+      return parseDuration(value);
+    },
+    /**
+     * Specifies the width of the visual presentation
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed width
+     */
+    width(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the height of the visual presentation
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed height
+     */
+    height(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the bitrate of the representation
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed bandwidth
+     */
+    bandwidth(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the frame rate of the representation
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed frame rate
+     */
+    frameRate(value) {
+      return parseDivisionValue(value);
+    },
+    /**
+     * Specifies the number of the first Media Segment in this Representation in the Period
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed number
+     */
+    startNumber(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the timescale in units per seconds
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed timescale
+     */
+    timescale(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the presentationTimeOffset.
+     *
+     * @param {string} value
+     *        value of the attribute as a string
+     *
+     * @return {number}
+     *         The parsed presentationTimeOffset
+     */
+    presentationTimeOffset(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the constant approximate Segment duration
+     * NOTE: The <Period> element also contains an @duration attribute. This duration
+     *       specifies the duration of the Period. This attribute is currently not
+     *       supported by the rest of the parser, however we still check for it to prevent
+     *       errors.
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed duration
+     */
+    duration(value) {
+      const parsedValue = parseInt(value, 10);
+      if (isNaN(parsedValue)) {
+        return parseDuration(value);
+      }
+      return parsedValue;
+    },
+    /**
+     * Specifies the Segment duration, in units of the value of the @timescale.
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed duration
+     */
+    d(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the MPD start time, in @timescale units, the first Segment in the series
+     * starts relative to the beginning of the Period
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed time
+     */
+    t(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the repeat count of the number of following contiguous Segments with the
+     * same duration expressed by the value of @d
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed number
+     */
+    r(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the presentationTime.
+     *
+     * @param {string} value
+     *        value of the attribute as a string
+     *
+     * @return {number}
+     *         The parsed presentationTime
+     */
+    presentationTime(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Default parser for all other attributes. Acts as a no-op and just returns the value
+     * as a string
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {string}
+     *         Unparsed value
+     */
+    DEFAULT(value) {
+      return value;
+    }
+  };
+  /**
+   * Gets all the attributes and values of the provided node, parses attributes with known
+   * types, and returns an object with attribute names mapped to values.
+   *
+   * @param {Node} el
+   *        The node to parse attributes from
+   * @return {Object}
+   *         Object with all attributes of el parsed
+   */
+
+  const parseAttributes = el => {
+    if (!(el && el.attributes)) {
+      return {};
+    }
+    return from(el.attributes).reduce((a, e) => {
+      const parseFn = parsers[e.name] || parsers.DEFAULT;
+      a[e.name] = parseFn(e.value);
+      return a;
+    }, {});
+  };
+  const keySystemsMap = {
+    'urn:uuid:1077efec-c0b2-4d02-ace3-3c1e52e2fb4b': 'org.w3.clearkey',
+    'urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed': 'com.widevine.alpha',
+    'urn:uuid:9a04f079-9840-4286-ab92-e65be0885f95': 'com.microsoft.playready',
+    'urn:uuid:f239e769-efa3-4850-9c16-a903c6932efb': 'com.adobe.primetime',
+    // ISO_IEC 23009-1_2022 5.8.5.2.2 The mp4 Protection Scheme
+    'urn:mpeg:dash:mp4protection:2011': 'mp4protection'
+  };
+  /**
+   * Builds a list of urls that is the product of the reference urls and BaseURL values
+   *
+   * @param {Object[]} references
+   *        List of objects containing the reference URL as well as its attributes
+   * @param {Node[]} baseUrlElements
+   *        List of BaseURL nodes from the mpd
+   * @return {Object[]}
+   *         List of objects with resolved urls and attributes
+   */
+
+  const buildBaseUrls = (references, baseUrlElements) => {
+    if (!baseUrlElements.length) {
+      return references;
+    }
+    return flatten(references.map(function (reference) {
+      return baseUrlElements.map(function (baseUrlElement) {
+        const initialBaseUrl = getContent(baseUrlElement);
+        const resolvedBaseUrl = resolveUrl$1(reference.baseUrl, initialBaseUrl);
+        const finalBaseUrl = merge$1(parseAttributes(baseUrlElement), {
+          baseUrl: resolvedBaseUrl
+        }); // If the URL is resolved, we want to get the serviceLocation from the reference
+        // assuming there is no serviceLocation on the initialBaseUrl
+
+        if (resolvedBaseUrl !== initialBaseUrl && !finalBaseUrl.serviceLocation && reference.serviceLocation) {
+          finalBaseUrl.serviceLocation = reference.serviceLocation;
+        }
+        return finalBaseUrl;
+      });
+    }));
+  };
+  /**
+   * Contains all Segment information for its containing AdaptationSet
+   *
+   * @typedef {Object} SegmentInformation
+   * @property {Object|undefined} template
+   *           Contains the attributes for the SegmentTemplate node
+   * @property {Object[]|undefined} segmentTimeline
+   *           Contains a list of atrributes for each S node within the SegmentTimeline node
+   * @property {Object|undefined} list
+   *           Contains the attributes for the SegmentList node
+   * @property {Object|undefined} base
+   *           Contains the attributes for the SegmentBase node
+   */
+
+  /**
+   * Returns all available Segment information contained within the AdaptationSet node
+   *
+   * @param {Node} adaptationSet
+   *        The AdaptationSet node to get Segment information from
+   * @return {SegmentInformation}
+   *         The Segment information contained within the provided AdaptationSet
+   */
+
+  const getSegmentInformation = adaptationSet => {
+    const segmentTemplate = findChildren(adaptationSet, 'SegmentTemplate')[0];
+    const segmentList = findChildren(adaptationSet, 'SegmentList')[0];
+    const segmentUrls = segmentList && findChildren(segmentList, 'SegmentURL').map(s => merge$1({
+      tag: 'SegmentURL'
+    }, parseAttributes(s)));
+    const segmentBase = findChildren(adaptationSet, 'SegmentBase')[0];
+    const segmentTimelineParentNode = segmentList || segmentTemplate;
+    const segmentTimeline = segmentTimelineParentNode && findChildren(segmentTimelineParentNode, 'SegmentTimeline')[0];
+    const segmentInitializationParentNode = segmentList || segmentBase || segmentTemplate;
+    const segmentInitialization = segmentInitializationParentNode && findChildren(segmentInitializationParentNode, 'Initialization')[0]; // SegmentTemplate is handled slightly differently, since it can have both
+    // @initialization and an <Initialization> node.  @initialization can be templated,
+    // while the node can have a url and range specified.  If the <SegmentTemplate> has
+    // both @initialization and an <Initialization> subelement we opt to override with
+    // the node, as this interaction is not defined in the spec.
+
+    const template = segmentTemplate && parseAttributes(segmentTemplate);
+    if (template && segmentInitialization) {
+      template.initialization = segmentInitialization && parseAttributes(segmentInitialization);
+    } else if (template && template.initialization) {
+      // If it is @initialization we convert it to an object since this is the format that
+      // later functions will rely on for the initialization segment.  This is only valid
+      // for <SegmentTemplate>
+      template.initialization = {
+        sourceURL: template.initialization
+      };
+    }
+    const segmentInfo = {
+      template,
+      segmentTimeline: segmentTimeline && findChildren(segmentTimeline, 'S').map(s => parseAttributes(s)),
+      list: segmentList && merge$1(parseAttributes(segmentList), {
+        segmentUrls,
+        initialization: parseAttributes(segmentInitialization)
+      }),
+      base: segmentBase && merge$1(parseAttributes(segmentBase), {
+        initialization: parseAttributes(segmentInitialization)
+      })
+    };
+    Object.keys(segmentInfo).forEach(key => {
+      if (!segmentInfo[key]) {
+        delete segmentInfo[key];
+      }
+    });
+    return segmentInfo;
+  };
+  /**
+   * Contains Segment information and attributes needed to construct a Playlist object
+   * from a Representation
+   *
+   * @typedef {Object} RepresentationInformation
+   * @property {SegmentInformation} segmentInfo
+   *           Segment information for this Representation
+   * @property {Object} attributes
+   *           Inherited attributes for this Representation
+   */
+
+  /**
+   * Maps a Representation node to an object containing Segment information and attributes
+   *
+   * @name inheritBaseUrlsCallback
+   * @function
+   * @param {Node} representation
+   *        Representation node from the mpd
+   * @return {RepresentationInformation}
+   *         Representation information needed to construct a Playlist object
+   */
+
+  /**
+   * Returns a callback for Array.prototype.map for mapping Representation nodes to
+   * Segment information and attributes using inherited BaseURL nodes.
+   *
+   * @param {Object} adaptationSetAttributes
+   *        Contains attributes inherited by the AdaptationSet
+   * @param {Object[]} adaptationSetBaseUrls
+   *        List of objects containing resolved base URLs and attributes
+   *        inherited by the AdaptationSet
+   * @param {SegmentInformation} adaptationSetSegmentInfo
+   *        Contains Segment information for the AdaptationSet
+   * @return {inheritBaseUrlsCallback}
+   *         Callback map function
+   */
+
+  const inheritBaseUrls = (adaptationSetAttributes, adaptationSetBaseUrls, adaptationSetSegmentInfo) => representation => {
+    const repBaseUrlElements = findChildren(representation, 'BaseURL');
+    const repBaseUrls = buildBaseUrls(adaptationSetBaseUrls, repBaseUrlElements);
+    const attributes = merge$1(adaptationSetAttributes, parseAttributes(representation));
+    const representationSegmentInfo = getSegmentInformation(representation);
+    return repBaseUrls.map(baseUrl => {
+      return {
+        segmentInfo: merge$1(adaptationSetSegmentInfo, representationSegmentInfo),
+        attributes: merge$1(attributes, baseUrl)
+      };
+    });
+  };
+  /**
+   * Tranforms a series of content protection nodes to
+   * an object containing pssh data by key system
+   *
+   * @param {Node[]} contentProtectionNodes
+   *        Content protection nodes
+   * @return {Object}
+   *        Object containing pssh data by key system
+   */
+
+  const generateKeySystemInformation = contentProtectionNodes => {
+    return contentProtectionNodes.reduce((acc, node) => {
+      const attributes = parseAttributes(node); // Although it could be argued that according to the UUID RFC spec the UUID string (a-f chars) should be generated
+      // as a lowercase string it also mentions it should be treated as case-insensitive on input. Since the key system
+      // UUIDs in the keySystemsMap are hardcoded as lowercase in the codebase there isn't any reason not to do
+      // .toLowerCase() on the input UUID string from the manifest (at least I could not think of one).
+
+      if (attributes.schemeIdUri) {
+        attributes.schemeIdUri = attributes.schemeIdUri.toLowerCase();
+      }
+      const keySystem = keySystemsMap[attributes.schemeIdUri];
+      if (keySystem) {
+        acc[keySystem] = {
+          attributes
+        };
+        const psshNode = findChildren(node, 'cenc:pssh')[0];
+        if (psshNode) {
+          const pssh = getContent(psshNode);
+          acc[keySystem].pssh = pssh && decodeB64ToUint8Array(pssh);
+        }
+      }
+      return acc;
+    }, {});
+  }; // defined in ANSI_SCTE 214-1 2016
+
+  const parseCaptionServiceMetadata = service => {
+    // 608 captions
+    if (service.schemeIdUri === 'urn:scte:dash:cc:cea-608:2015') {
+      const values = typeof service.value !== 'string' ? [] : service.value.split(';');
+      return values.map(value => {
+        let channel;
+        let language; // default language to value
+
+        language = value;
+        if (/^CC\d=/.test(value)) {
+          [channel, language] = value.split('=');
+        } else if (/^CC\d$/.test(value)) {
+          channel = value;
+        }
+        return {
+          channel,
+          language
+        };
+      });
+    } else if (service.schemeIdUri === 'urn:scte:dash:cc:cea-708:2015') {
+      const values = typeof service.value !== 'string' ? [] : service.value.split(';');
+      return values.map(value => {
+        const flags = {
+          // service or channel number 1-63
+          'channel': undefined,
+          // language is a 3ALPHA per ISO 639.2/B
+          // field is required
+          'language': undefined,
+          // BIT 1/0 or ?
+          // default value is 1, meaning 16:9 aspect ratio, 0 is 4:3, ? is unknown
+          'aspectRatio': 1,
+          // BIT 1/0
+          // easy reader flag indicated the text is tailed to the needs of beginning readers
+          // default 0, or off
+          'easyReader': 0,
+          // BIT 1/0
+          // If 3d metadata is present (CEA-708.1) then 1
+          // default 0
+          '3D': 0
+        };
+        if (/=/.test(value)) {
+          const [channel, opts = ''] = value.split('=');
+          flags.channel = channel;
+          flags.language = value;
+          opts.split(',').forEach(opt => {
+            const [name, val] = opt.split(':');
+            if (name === 'lang') {
+              flags.language = val; // er for easyReadery
+            } else if (name === 'er') {
+              flags.easyReader = Number(val); // war for wide aspect ratio
+            } else if (name === 'war') {
+              flags.aspectRatio = Number(val);
+            } else if (name === '3D') {
+              flags['3D'] = Number(val);
+            }
+          });
+        } else {
+          flags.language = value;
+        }
+        if (flags.channel) {
+          flags.channel = 'SERVICE' + flags.channel;
+        }
+        return flags;
+      });
+    }
+  };
+  /**
+   * A map callback that will parse all event stream data for a collection of periods
+   * DASH ISO_IEC_23009 5.10.2.2
+   * https://dashif-documents.azurewebsites.net/Events/master/event.html#mpd-event-timing
+   *
+   * @param {PeriodInformation} period object containing necessary period information
+   * @return a collection of parsed eventstream event objects
+   */
+
+  const toEventStream = period => {
+    // get and flatten all EventStreams tags and parse attributes and children
+    return flatten(findChildren(period.node, 'EventStream').map(eventStream => {
+      const eventStreamAttributes = parseAttributes(eventStream);
+      const schemeIdUri = eventStreamAttributes.schemeIdUri; // find all Events per EventStream tag and map to return objects
+
+      return findChildren(eventStream, 'Event').map(event => {
+        const eventAttributes = parseAttributes(event);
+        const presentationTime = eventAttributes.presentationTime || 0;
+        const timescale = eventStreamAttributes.timescale || 1;
+        const duration = eventAttributes.duration || 0;
+        const start = presentationTime / timescale + period.attributes.start;
+        return {
+          schemeIdUri,
+          value: eventStreamAttributes.value,
+          id: eventAttributes.id,
+          start,
+          end: start + duration / timescale,
+          messageData: getContent(event) || eventAttributes.messageData,
+          contentEncoding: eventStreamAttributes.contentEncoding,
+          presentationTimeOffset: eventStreamAttributes.presentationTimeOffset || 0
+        };
+      });
+    }));
+  };
+  /**
+   * Maps an AdaptationSet node to a list of Representation information objects
+   *
+   * @name toRepresentationsCallback
+   * @function
+   * @param {Node} adaptationSet
+   *        AdaptationSet node from the mpd
+   * @return {RepresentationInformation[]}
+   *         List of objects containing Representaion information
+   */
+
+  /**
+   * Returns a callback for Array.prototype.map for mapping AdaptationSet nodes to a list of
+   * Representation information objects
+   *
+   * @param {Object} periodAttributes
+   *        Contains attributes inherited by the Period
+   * @param {Object[]} periodBaseUrls
+   *        Contains list of objects with resolved base urls and attributes
+   *        inherited by the Period
+   * @param {string[]} periodSegmentInfo
+   *        Contains Segment Information at the period level
+   * @return {toRepresentationsCallback}
+   *         Callback map function
+   */
+
+  const toRepresentations = (periodAttributes, periodBaseUrls, periodSegmentInfo) => adaptationSet => {
+    const adaptationSetAttributes = parseAttributes(adaptationSet);
+    const adaptationSetBaseUrls = buildBaseUrls(periodBaseUrls, findChildren(adaptationSet, 'BaseURL'));
+    const role = findChildren(adaptationSet, 'Role')[0];
+    const roleAttributes = {
+      role: parseAttributes(role)
+    };
+    let attrs = merge$1(periodAttributes, adaptationSetAttributes, roleAttributes);
+    const accessibility = findChildren(adaptationSet, 'Accessibility')[0];
+    const captionServices = parseCaptionServiceMetadata(parseAttributes(accessibility));
+    if (captionServices) {
+      attrs = merge$1(attrs, {
+        captionServices
+      });
+    }
+    const label = findChildren(adaptationSet, 'Label')[0];
+    if (label && label.childNodes.length) {
+      const labelVal = label.childNodes[0].nodeValue.trim();
+      attrs = merge$1(attrs, {
+        label: labelVal
+      });
+    }
+    const contentProtection = generateKeySystemInformation(findChildren(adaptationSet, 'ContentProtection'));
+    if (Object.keys(contentProtection).length) {
+      attrs = merge$1(attrs, {
+        contentProtection
+      });
+    }
+    const segmentInfo = getSegmentInformation(adaptationSet);
+    const representations = findChildren(adaptationSet, 'Representation');
+    const adaptationSetSegmentInfo = merge$1(periodSegmentInfo, segmentInfo);
+    return flatten(representations.map(inheritBaseUrls(attrs, adaptationSetBaseUrls, adaptationSetSegmentInfo)));
+  };
+  /**
+   * Contains all period information for mapping nodes onto adaptation sets.
+   *
+   * @typedef {Object} PeriodInformation
+   * @property {Node} period.node
+   *           Period node from the mpd
+   * @property {Object} period.attributes
+   *           Parsed period attributes from node plus any added
+   */
+
+  /**
+   * Maps a PeriodInformation object to a list of Representation information objects for all
+   * AdaptationSet nodes contained within the Period.
+   *
+   * @name toAdaptationSetsCallback
+   * @function
+   * @param {PeriodInformation} period
+   *        Period object containing necessary period information
+   * @param {number} periodStart
+   *        Start time of the Period within the mpd
+   * @return {RepresentationInformation[]}
+   *         List of objects containing Representaion information
+   */
+
+  /**
+   * Returns a callback for Array.prototype.map for mapping Period nodes to a list of
+   * Representation information objects
+   *
+   * @param {Object} mpdAttributes
+   *        Contains attributes inherited by the mpd
+    * @param {Object[]} mpdBaseUrls
+   *        Contains list of objects with resolved base urls and attributes
+   *        inherited by the mpd
+   * @return {toAdaptationSetsCallback}
+   *         Callback map function
+   */
+
+  const toAdaptationSets = (mpdAttributes, mpdBaseUrls) => (period, index) => {
+    const periodBaseUrls = buildBaseUrls(mpdBaseUrls, findChildren(period.node, 'BaseURL'));
+    const periodAttributes = merge$1(mpdAttributes, {
+      periodStart: period.attributes.start
+    });
+    if (typeof period.attributes.duration === 'number') {
+      periodAttributes.periodDuration = period.attributes.duration;
+    }
+    const adaptationSets = findChildren(period.node, 'AdaptationSet');
+    const periodSegmentInfo = getSegmentInformation(period.node);
+    return flatten(adaptationSets.map(toRepresentations(periodAttributes, periodBaseUrls, periodSegmentInfo)));
+  };
+  /**
+   * Tranforms an array of content steering nodes into an object
+   * containing CDN content steering information from the MPD manifest.
+   *
+   * For more information on the DASH spec for Content Steering parsing, see:
+   * https://dashif.org/docs/DASH-IF-CTS-00XX-Content-Steering-Community-Review.pdf
+   *
+   * @param {Node[]} contentSteeringNodes
+   *        Content steering nodes
+   * @param {Function} eventHandler
+   *        The event handler passed into the parser options to handle warnings
+   * @return {Object}
+   *        Object containing content steering data
+   */
+
+  const generateContentSteeringInformation = (contentSteeringNodes, eventHandler) => {
+    // If there are more than one ContentSteering tags, throw an error
+    if (contentSteeringNodes.length > 1) {
+      eventHandler({
+        type: 'warn',
+        message: 'The MPD manifest should contain no more than one ContentSteering tag'
+      });
+    } // Return a null value if there are no ContentSteering tags
+
+    if (!contentSteeringNodes.length) {
+      return null;
+    }
+    const infoFromContentSteeringTag = merge$1({
+      serverURL: getContent(contentSteeringNodes[0])
+    }, parseAttributes(contentSteeringNodes[0])); // Converts `queryBeforeStart` to a boolean, as well as setting the default value
+    // to `false` if it doesn't exist
+
+    infoFromContentSteeringTag.queryBeforeStart = infoFromContentSteeringTag.queryBeforeStart === 'true';
+    return infoFromContentSteeringTag;
+  };
+  /**
+   * Gets Period@start property for a given period.
+   *
+   * @param {Object} options
+   *        Options object
+   * @param {Object} options.attributes
+   *        Period attributes
+   * @param {Object} [options.priorPeriodAttributes]
+   *        Prior period attributes (if prior period is available)
+   * @param {string} options.mpdType
+   *        The MPD@type these periods came from
+   * @return {number|null}
+   *         The period start, or null if it's an early available period or error
+   */
+
+  const getPeriodStart = ({
+    attributes,
+    priorPeriodAttributes,
+    mpdType
+  }) => {
+    // Summary of period start time calculation from DASH spec section 5.3.2.1
+    //
+    // A period's start is the first period's start + time elapsed after playing all
+    // prior periods to this one. Periods continue one after the other in time (without
+    // gaps) until the end of the presentation.
+    //
+    // The value of Period@start should be:
+    // 1. if Period@start is present: value of Period@start
+    // 2. if previous period exists and it has @duration: previous Period@start +
+    //    previous Period@duration
+    // 3. if this is first period and MPD@type is 'static': 0
+    // 4. in all other cases, consider the period an "early available period" (note: not
+    //    currently supported)
+    // (1)
+    if (typeof attributes.start === 'number') {
+      return attributes.start;
+    } // (2)
+
+    if (priorPeriodAttributes && typeof priorPeriodAttributes.start === 'number' && typeof priorPeriodAttributes.duration === 'number') {
+      return priorPeriodAttributes.start + priorPeriodAttributes.duration;
+    } // (3)
+
+    if (!priorPeriodAttributes && mpdType === 'static') {
+      return 0;
+    } // (4)
+    // There is currently no logic for calculating the Period@start value if there is
+    // no Period@start or prior Period@start and Period@duration available. This is not made
+    // explicit by the DASH interop guidelines or the DASH spec, however, since there's
+    // nothing about any other resolution strategies, it's implied. Thus, this case should
+    // be considered an early available period, or error, and null should suffice for both
+    // of those cases.
+
+    return null;
+  };
+  /**
+   * Traverses the mpd xml tree to generate a list of Representation information objects
+   * that have inherited attributes from parent nodes
+   *
+   * @param {Node} mpd
+   *        The root node of the mpd
+   * @param {Object} options
+   *        Available options for inheritAttributes
+   * @param {string} options.manifestUri
+   *        The uri source of the mpd
+   * @param {number} options.NOW
+   *        Current time per DASH IOP.  Default is current time in ms since epoch
+   * @param {number} options.clientOffset
+   *        Client time difference from NOW (in milliseconds)
+   * @return {RepresentationInformation[]}
+   *         List of objects containing Representation information
+   */
+
+  const inheritAttributes = (mpd, options = {}) => {
+    const {
+      manifestUri = '',
+      NOW = Date.now(),
+      clientOffset = 0,
+      // TODO: For now, we are expecting an eventHandler callback function
+      // to be passed into the mpd parser as an option.
+      // In the future, we should enable stream parsing by using the Stream class from vhs-utils.
+      // This will support new features including a standardized event handler.
+      // See the m3u8 parser for examples of how stream parsing is currently used for HLS parsing.
+      // https://github.com/videojs/vhs-utils/blob/88d6e10c631e57a5af02c5a62bc7376cd456b4f5/src/stream.js#L9
+      eventHandler = function () {}
+    } = options;
+    const periodNodes = findChildren(mpd, 'Period');
+    if (!periodNodes.length) {
+      throw new Error(errors.INVALID_NUMBER_OF_PERIOD);
+    }
+    const locations = findChildren(mpd, 'Location');
+    const mpdAttributes = parseAttributes(mpd);
+    const mpdBaseUrls = buildBaseUrls([{
+      baseUrl: manifestUri
+    }], findChildren(mpd, 'BaseURL'));
+    const contentSteeringNodes = findChildren(mpd, 'ContentSteering'); // See DASH spec section 5.3.1.2, Semantics of MPD element. Default type to 'static'.
+
+    mpdAttributes.type = mpdAttributes.type || 'static';
+    mpdAttributes.sourceDuration = mpdAttributes.mediaPresentationDuration || 0;
+    mpdAttributes.NOW = NOW;
+    mpdAttributes.clientOffset = clientOffset;
+    if (locations.length) {
+      mpdAttributes.locations = locations.map(getContent);
+    }
+    const periods = []; // Since toAdaptationSets acts on individual periods right now, the simplest approach to
+    // adding properties that require looking at prior periods is to parse attributes and add
+    // missing ones before toAdaptationSets is called. If more such properties are added, it
+    // may be better to refactor toAdaptationSets.
+
+    periodNodes.forEach((node, index) => {
+      const attributes = parseAttributes(node); // Use the last modified prior period, as it may contain added information necessary
+      // for this period.
+
+      const priorPeriod = periods[index - 1];
+      attributes.start = getPeriodStart({
+        attributes,
+        priorPeriodAttributes: priorPeriod ? priorPeriod.attributes : null,
+        mpdType: mpdAttributes.type
+      });
+      periods.push({
+        node,
+        attributes
+      });
+    });
+    return {
+      locations: mpdAttributes.locations,
+      contentSteeringInfo: generateContentSteeringInformation(contentSteeringNodes, eventHandler),
+      // TODO: There are occurences where this `representationInfo` array contains undesired
+      // duplicates. This generally occurs when there are multiple BaseURL nodes that are
+      // direct children of the MPD node. When we attempt to resolve URLs from a combination of the
+      // parent BaseURL and a child BaseURL, and the value does not resolve,
+      // we end up returning the child BaseURL multiple times.
+      // We need to determine a way to remove these duplicates in a safe way.
+      // See: https://github.com/videojs/mpd-parser/pull/17#discussion_r162750527
+      representationInfo: flatten(periods.map(toAdaptationSets(mpdAttributes, mpdBaseUrls))),
+      eventStream: flatten(periods.map(toEventStream))
+    };
+  };
+  const stringToMpdXml = manifestString => {
+    if (manifestString === '') {
+      throw new Error(errors.DASH_EMPTY_MANIFEST);
+    }
+    const parser = new DOMParser();
+    let xml;
+    let mpd;
+    try {
+      xml = parser.parseFromString(manifestString, 'application/xml');
+      mpd = xml && xml.documentElement.tagName === 'MPD' ? xml.documentElement : null;
+    } catch (e) {// ie 11 throws on invalid xml
+    }
+    if (!mpd || mpd && mpd.getElementsByTagName('parsererror').length > 0) {
+      throw new Error(errors.DASH_INVALID_XML);
+    }
+    return mpd;
+  };
+
+  /**
+   * Parses the manifest for a UTCTiming node, returning the nodes attributes if found
+   *
+   * @param {string} mpd
+   *        XML string of the MPD manifest
+   * @return {Object|null}
+   *         Attributes of UTCTiming node specified in the manifest. Null if none found
+   */
+
+  const parseUTCTimingScheme = mpd => {
+    const UTCTimingNode = findChildren(mpd, 'UTCTiming')[0];
+    if (!UTCTimingNode) {
+      return null;
+    }
+    const attributes = parseAttributes(UTCTimingNode);
+    switch (attributes.schemeIdUri) {
+      case 'urn:mpeg:dash:utc:http-head:2014':
+      case 'urn:mpeg:dash:utc:http-head:2012':
+        attributes.method = 'HEAD';
+        break;
+      case 'urn:mpeg:dash:utc:http-xsdate:2014':
+      case 'urn:mpeg:dash:utc:http-iso:2014':
+      case 'urn:mpeg:dash:utc:http-xsdate:2012':
+      case 'urn:mpeg:dash:utc:http-iso:2012':
+        attributes.method = 'GET';
+        break;
+      case 'urn:mpeg:dash:utc:direct:2014':
+      case 'urn:mpeg:dash:utc:direct:2012':
+        attributes.method = 'DIRECT';
+        attributes.value = Date.parse(attributes.value);
+        break;
+      case 'urn:mpeg:dash:utc:http-ntp:2014':
+      case 'urn:mpeg:dash:utc:ntp:2014':
+      case 'urn:mpeg:dash:utc:sntp:2014':
+      default:
+        throw new Error(errors.UNSUPPORTED_UTC_TIMING_SCHEME);
+    }
+    return attributes;
+  };
+  /*
+   * Given a DASH manifest string and options, parses the DASH manifest into an object in the
+   * form outputed by m3u8-parser and accepted by videojs/http-streaming.
+   *
+   * For live DASH manifests, if `previousManifest` is provided in options, then the newly
+   * parsed DASH manifest will have its media sequence and discontinuity sequence values
+   * updated to reflect its position relative to the prior manifest.
+   *
+   * @param {string} manifestString - the DASH manifest as a string
+   * @param {options} [options] - any options
+   *
+   * @return {Object} the manifest object
+   */
+
+  const parse = (manifestString, options = {}) => {
+    const parsedManifestInfo = inheritAttributes(stringToMpdXml(manifestString), options);
+    const playlists = toPlaylists(parsedManifestInfo.representationInfo);
+    return toM3u8({
+      dashPlaylists: playlists,
+      locations: parsedManifestInfo.locations,
+      contentSteering: parsedManifestInfo.contentSteeringInfo,
+      sidxMapping: options.sidxMapping,
+      previousManifest: options.previousManifest,
+      eventStream: parsedManifestInfo.eventStream
+    });
+  };
+  /**
+   * Parses the manifest for a UTCTiming node, returning the nodes attributes if found
+   *
+   * @param {string} manifestString
+   *        XML string of the MPD manifest
+   * @return {Object|null}
+   *         Attributes of UTCTiming node specified in the manifest. Null if none found
+   */
+
+  const parseUTCTiming = manifestString => parseUTCTimingScheme(stringToMpdXml(manifestString));
+
+  var MAX_UINT32 = Math.pow(2, 32);
+  var getUint64$1 = function (uint8) {
+    var dv = new DataView(uint8.buffer, uint8.byteOffset, uint8.byteLength);
+    var value;
+    if (dv.getBigUint64) {
+      value = dv.getBigUint64(0);
+      if (value < Number.MAX_SAFE_INTEGER) {
+        return Number(value);
+      }
+      return value;
+    }
+    return dv.getUint32(0) * MAX_UINT32 + dv.getUint32(4);
+  };
+  var numbers = {
+    getUint64: getUint64$1,
+    MAX_UINT32: MAX_UINT32
+  };
+
+  var getUint64 = numbers.getUint64;
+  var parseSidx = function (data) {
+    var view = new DataView(data.buffer, data.byteOffset, data.byteLength),
+      result = {
+        version: data[0],
+        flags: new Uint8Array(data.subarray(1, 4)),
+        references: [],
+        referenceId: view.getUint32(4),
+        timescale: view.getUint32(8)
+      },
+      i = 12;
+    if (result.version === 0) {
+      result.earliestPresentationTime = view.getUint32(i);
+      result.firstOffset = view.getUint32(i + 4);
+      i += 8;
+    } else {
+      // read 64 bits
+      result.earliestPresentationTime = getUint64(data.subarray(i));
+      result.firstOffset = getUint64(data.subarray(i + 8));
+      i += 16;
+    }
+    i += 2; // reserved
+
+    var referenceCount = view.getUint16(i);
+    i += 2; // start of references
+
+    for (; referenceCount > 0; i += 12, referenceCount--) {
+      result.references.push({
+        referenceType: (data[i] & 0x80) >>> 7,
+        referencedSize: view.getUint32(i) & 0x7FFFFFFF,
+        subsegmentDuration: view.getUint32(i + 4),
+        startsWithSap: !!(data[i + 8] & 0x80),
+        sapType: (data[i + 8] & 0x70) >>> 4,
+        sapDeltaTime: view.getUint32(i + 8) & 0x0FFFFFFF
+      });
+    }
+    return result;
+  };
+  var parseSidx_1 = parseSidx;
+
+  var ID3 = toUint8([0x49, 0x44, 0x33]);
+  var getId3Size = function getId3Size(bytes, offset) {
+    if (offset === void 0) {
+      offset = 0;
+    }
+    bytes = toUint8(bytes);
+    var flags = bytes[offset + 5];
+    var returnSize = bytes[offset + 6] << 21 | bytes[offset + 7] << 14 | bytes[offset + 8] << 7 | bytes[offset + 9];
+    var footerPresent = (flags & 16) >> 4;
+    if (footerPresent) {
+      return returnSize + 20;
+    }
+    return returnSize + 10;
+  };
+  var getId3Offset = function getId3Offset(bytes, offset) {
+    if (offset === void 0) {
+      offset = 0;
+    }
+    bytes = toUint8(bytes);
+    if (bytes.length - offset < 10 || !bytesMatch(bytes, ID3, {
+      offset: offset
+    })) {
+      return offset;
+    }
+    offset += getId3Size(bytes, offset); // recursive check for id3 tags as some files
+    // have multiple ID3 tag sections even though
+    // they should not.
+
+    return getId3Offset(bytes, offset);
+  };
+
+  var normalizePath$1 = function normalizePath(path) {
+    if (typeof path === 'string') {
+      return stringToBytes(path);
+    }
+    if (typeof path === 'number') {
+      return path;
+    }
+    return path;
+  };
+  var normalizePaths$1 = function normalizePaths(paths) {
+    if (!Array.isArray(paths)) {
+      return [normalizePath$1(paths)];
+    }
+    return paths.map(function (p) {
+      return normalizePath$1(p);
+    });
+  };
+  /**
+   * find any number of boxes by name given a path to it in an iso bmff
+   * such as mp4.
+   *
+   * @param {TypedArray} bytes
+   *        bytes for the iso bmff to search for boxes in
+   *
+   * @param {Uint8Array[]|string[]|string|Uint8Array} name
+   *        An array of paths or a single path representing the name
+   *        of boxes to search through in bytes. Paths may be
+   *        uint8 (character codes) or strings.
+   *
+   * @param {boolean} [complete=false]
+   *        Should we search only for complete boxes on the final path.
+   *        This is very useful when you do not want to get back partial boxes
+   *        in the case of streaming files.
+   *
+   * @return {Uint8Array[]}
+   *         An array of the end paths that we found.
+   */
+
+  var findBox = function findBox(bytes, paths, complete) {
+    if (complete === void 0) {
+      complete = false;
+    }
+    paths = normalizePaths$1(paths);
+    bytes = toUint8(bytes);
+    var results = [];
+    if (!paths.length) {
+      // short-circuit the search for empty paths
+      return results;
+    }
+    var i = 0;
+    while (i < bytes.length) {
+      var size = (bytes[i] << 24 | bytes[i + 1] << 16 | bytes[i + 2] << 8 | bytes[i + 3]) >>> 0;
+      var type = bytes.subarray(i + 4, i + 8); // invalid box format.
+
+      if (size === 0) {
+        break;
+      }
+      var end = i + size;
+      if (end > bytes.length) {
+        // this box is bigger than the number of bytes we have
+        // and complete is set, we cannot find any more boxes.
+        if (complete) {
+          break;
+        }
+        end = bytes.length;
+      }
+      var data = bytes.subarray(i + 8, end);
+      if (bytesMatch(type, paths[0])) {
+        if (paths.length === 1) {
+          // this is the end of the path and we've found the box we were
+          // looking for
+          results.push(data);
+        } else {
+          // recursively search for the next box along the path
+          results.push.apply(results, findBox(data, paths.slice(1), complete));
+        }
+      }
+      i = end;
+    } // we've finished searching all of bytes
+
+    return results;
+  };
+
+  // https://matroska-org.github.io/libebml/specs.html
+  // https://www.matroska.org/technical/elements.html
+  // https://www.webmproject.org/docs/container/
+
+  var EBML_TAGS = {
+    EBML: toUint8([0x1A, 0x45, 0xDF, 0xA3]),
+    DocType: toUint8([0x42, 0x82]),
+    Segment: toUint8([0x18, 0x53, 0x80, 0x67]),
+    SegmentInfo: toUint8([0x15, 0x49, 0xA9, 0x66]),
+    Tracks: toUint8([0x16, 0x54, 0xAE, 0x6B]),
+    Track: toUint8([0xAE]),
+    TrackNumber: toUint8([0xd7]),
+    DefaultDuration: toUint8([0x23, 0xe3, 0x83]),
+    TrackEntry: toUint8([0xAE]),
+    TrackType: toUint8([0x83]),
+    FlagDefault: toUint8([0x88]),
+    CodecID: toUint8([0x86]),
+    CodecPrivate: toUint8([0x63, 0xA2]),
+    VideoTrack: toUint8([0xe0]),
+    AudioTrack: toUint8([0xe1]),
+    // Not used yet, but will be used for live webm/mkv
+    // see https://www.matroska.org/technical/basics.html#block-structure
+    // see https://www.matroska.org/technical/basics.html#simpleblock-structure
+    Cluster: toUint8([0x1F, 0x43, 0xB6, 0x75]),
+    Timestamp: toUint8([0xE7]),
+    TimestampScale: toUint8([0x2A, 0xD7, 0xB1]),
+    BlockGroup: toUint8([0xA0]),
+    BlockDuration: toUint8([0x9B]),
+    Block: toUint8([0xA1]),
+    SimpleBlock: toUint8([0xA3])
+  };
+  /**
+   * This is a simple table to determine the length
+   * of things in ebml. The length is one based (starts at 1,
+   * rather than zero) and for every zero bit before a one bit
+   * we add one to length. We also need this table because in some
+   * case we have to xor all the length bits from another value.
+   */
+
+  var LENGTH_TABLE = [128, 64, 32, 16, 8, 4, 2, 1];
+  var getLength = function getLength(byte) {
+    var len = 1;
+    for (var i = 0; i < LENGTH_TABLE.length; i++) {
+      if (byte & LENGTH_TABLE[i]) {
+        break;
+      }
+      len++;
+    }
+    return len;
+  }; // length in ebml is stored in the first 4 to 8 bits
+  // of the first byte. 4 for the id length and 8 for the
+  // data size length. Length is measured by converting the number to binary
+  // then 1 + the number of zeros before a 1 is encountered starting
+  // from the left.
+
+  var getvint = function getvint(bytes, offset, removeLength, signed) {
+    if (removeLength === void 0) {
+      removeLength = true;
+    }
+    if (signed === void 0) {
+      signed = false;
+    }
+    var length = getLength(bytes[offset]);
+    var valueBytes = bytes.subarray(offset, offset + length); // NOTE that we do **not** subarray here because we need to copy these bytes
+    // as they will be modified below to remove the dataSizeLen bits and we do not
+    // want to modify the original data. normally we could just call slice on
+    // uint8array but ie 11 does not support that...
+
+    if (removeLength) {
+      valueBytes = Array.prototype.slice.call(bytes, offset, offset + length);
+      valueBytes[0] ^= LENGTH_TABLE[length - 1];
+    }
+    return {
+      length: length,
+      value: bytesToNumber(valueBytes, {
+        signed: signed
+      }),
+      bytes: valueBytes
+    };
+  };
+  var normalizePath = function normalizePath(path) {
+    if (typeof path === 'string') {
+      return path.match(/.{1,2}/g).map(function (p) {
+        return normalizePath(p);
+      });
+    }
+    if (typeof path === 'number') {
+      return numberToBytes(path);
+    }
+    return path;
+  };
+  var normalizePaths = function normalizePaths(paths) {
+    if (!Array.isArray(paths)) {
+      return [normalizePath(paths)];
+    }
+    return paths.map(function (p) {
+      return normalizePath(p);
+    });
+  };
+  var getInfinityDataSize = function getInfinityDataSize(id, bytes, offset) {
+    if (offset >= bytes.length) {
+      return bytes.length;
+    }
+    var innerid = getvint(bytes, offset, false);
+    if (bytesMatch(id.bytes, innerid.bytes)) {
+      return offset;
+    }
+    var dataHeader = getvint(bytes, offset + innerid.length);
+    return getInfinityDataSize(id, bytes, offset + dataHeader.length + dataHeader.value + innerid.length);
+  };
+  /**
+   * Notes on the EBLM format.
+   *
+   * EBLM uses "vints" tags. Every vint tag contains
+   * two parts
+   *
+   * 1. The length from the first byte. You get this by
+   *    converting the byte to binary and counting the zeros
+   *    before a 1. Then you add 1 to that. Examples
+   *    00011111 = length 4 because there are 3 zeros before a 1.
+   *    00100000 = length 3 because there are 2 zeros before a 1.
+   *    00000011 = length 7 because there are 6 zeros before a 1.
+   *
+   * 2. The bits used for length are removed from the first byte
+   *    Then all the bytes are merged into a value. NOTE: this
+   *    is not the case for id ebml tags as there id includes
+   *    length bits.
+   *
+   */
+
+  var findEbml = function findEbml(bytes, paths) {
+    paths = normalizePaths(paths);
+    bytes = toUint8(bytes);
+    var results = [];
+    if (!paths.length) {
+      return results;
+    }
+    var i = 0;
+    while (i < bytes.length) {
+      var id = getvint(bytes, i, false);
+      var dataHeader = getvint(bytes, i + id.length);
+      var dataStart = i + id.length + dataHeader.length; // dataSize is unknown or this is a live stream
+
+      if (dataHeader.value === 0x7f) {
+        dataHeader.value = getInfinityDataSize(id, bytes, dataStart);
+        if (dataHeader.value !== bytes.length) {
+          dataHeader.value -= dataStart;
+        }
+      }
+      var dataEnd = dataStart + dataHeader.value > bytes.length ? bytes.length : dataStart + dataHeader.value;
+      var data = bytes.subarray(dataStart, dataEnd);
+      if (bytesMatch(paths[0], id.bytes)) {
+        if (paths.length === 1) {
+          // this is the end of the paths and we've found the tag we were
+          // looking for
+          results.push(data);
+        } else {
+          // recursively search for the next tag inside of the data
+          // of this one
+          results = results.concat(findEbml(data, paths.slice(1)));
+        }
+      }
+      var totalLength = id.length + dataHeader.length + data.length; // move past this tag entirely, we are not looking for it
+
+      i += totalLength;
+    }
+    return results;
+  }; // see https://www.matroska.org/technical/basics.html#block-structure
+
+  var NAL_TYPE_ONE = toUint8([0x00, 0x00, 0x00, 0x01]);
+  var NAL_TYPE_TWO = toUint8([0x00, 0x00, 0x01]);
+  var EMULATION_PREVENTION = toUint8([0x00, 0x00, 0x03]);
+  /**
+   * Expunge any "Emulation Prevention" bytes from a "Raw Byte
+   * Sequence Payload"
+   *
+   * @param data {Uint8Array} the bytes of a RBSP from a NAL
+   * unit
+   * @return {Uint8Array} the RBSP without any Emulation
+   * Prevention Bytes
+   */
+
+  var discardEmulationPreventionBytes = function discardEmulationPreventionBytes(bytes) {
+    var positions = [];
+    var i = 1; // Find all `Emulation Prevention Bytes`
+
+    while (i < bytes.length - 2) {
+      if (bytesMatch(bytes.subarray(i, i + 3), EMULATION_PREVENTION)) {
+        positions.push(i + 2);
+        i++;
+      }
+      i++;
+    } // If no Emulation Prevention Bytes were found just return the original
+    // array
+
+    if (positions.length === 0) {
+      return bytes;
+    } // Create a new array to hold the NAL unit data
+
+    var newLength = bytes.length - positions.length;
+    var newData = new Uint8Array(newLength);
+    var sourceIndex = 0;
+    for (i = 0; i < newLength; sourceIndex++, i++) {
+      if (sourceIndex === positions[0]) {
+        // Skip this byte
+        sourceIndex++; // Remove this position index
+
+        positions.shift();
+      }
+      newData[i] = bytes[sourceIndex];
+    }
+    return newData;
+  };
+  var findNal = function findNal(bytes, dataType, types, nalLimit) {
+    if (nalLimit === void 0) {
+      nalLimit = Infinity;
+    }
+    bytes = toUint8(bytes);
+    types = [].concat(types);
+    var i = 0;
+    var nalStart;
+    var nalsFound = 0; // keep searching until:
+    // we reach the end of bytes
+    // we reach the maximum number of nals they want to seach
+    // NOTE: that we disregard nalLimit when we have found the start
+    // of the nal we want so that we can find the end of the nal we want.
+
+    while (i < bytes.length && (nalsFound < nalLimit || nalStart)) {
+      var nalOffset = void 0;
+      if (bytesMatch(bytes.subarray(i), NAL_TYPE_ONE)) {
+        nalOffset = 4;
+      } else if (bytesMatch(bytes.subarray(i), NAL_TYPE_TWO)) {
+        nalOffset = 3;
+      } // we are unsynced,
+      // find the next nal unit
+
+      if (!nalOffset) {
+        i++;
+        continue;
+      }
+      nalsFound++;
+      if (nalStart) {
+        return discardEmulationPreventionBytes(bytes.subarray(nalStart, i));
+      }
+      var nalType = void 0;
+      if (dataType === 'h264') {
+        nalType = bytes[i + nalOffset] & 0x1f;
+      } else if (dataType === 'h265') {
+        nalType = bytes[i + nalOffset] >> 1 & 0x3f;
+      }
+      if (types.indexOf(nalType) !== -1) {
+        nalStart = i + nalOffset;
+      } // nal header is 1 length for h264, and 2 for h265
+
+      i += nalOffset + (dataType === 'h264' ? 1 : 2);
+    }
+    return bytes.subarray(0, 0);
+  };
+  var findH264Nal = function findH264Nal(bytes, type, nalLimit) {
+    return findNal(bytes, 'h264', type, nalLimit);
+  };
+  var findH265Nal = function findH265Nal(bytes, type, nalLimit) {
+    return findNal(bytes, 'h265', type, nalLimit);
+  };
+
+  var CONSTANTS = {
+    // "webm" string literal in hex
+    'webm': toUint8([0x77, 0x65, 0x62, 0x6d]),
+    // "matroska" string literal in hex
+    'matroska': toUint8([0x6d, 0x61, 0x74, 0x72, 0x6f, 0x73, 0x6b, 0x61]),
+    // "fLaC" string literal in hex
+    'flac': toUint8([0x66, 0x4c, 0x61, 0x43]),
+    // "OggS" string literal in hex
+    'ogg': toUint8([0x4f, 0x67, 0x67, 0x53]),
+    // ac-3 sync byte, also works for ec-3 as that is simply a codec
+    // of ac-3
+    'ac3': toUint8([0x0b, 0x77]),
+    // "RIFF" string literal in hex used for wav and avi
+    'riff': toUint8([0x52, 0x49, 0x46, 0x46]),
+    // "AVI" string literal in hex
+    'avi': toUint8([0x41, 0x56, 0x49]),
+    // "WAVE" string literal in hex
+    'wav': toUint8([0x57, 0x41, 0x56, 0x45]),
+    // "ftyp3g" string literal in hex
+    '3gp': toUint8([0x66, 0x74, 0x79, 0x70, 0x33, 0x67]),
+    // "ftyp" string literal in hex
+    'mp4': toUint8([0x66, 0x74, 0x79, 0x70]),
+    // "styp" string literal in hex
+    'fmp4': toUint8([0x73, 0x74, 0x79, 0x70]),
+    // "ftypqt" string literal in hex
+    'mov': toUint8([0x66, 0x74, 0x79, 0x70, 0x71, 0x74]),
+    // moov string literal in hex
+    'moov': toUint8([0x6D, 0x6F, 0x6F, 0x76]),
+    // moof string literal in hex
+    'moof': toUint8([0x6D, 0x6F, 0x6F, 0x66])
+  };
+  var _isLikely = {
+    aac: function aac(bytes) {
+      var offset = getId3Offset(bytes);
+      return bytesMatch(bytes, [0xFF, 0x10], {
+        offset: offset,
+        mask: [0xFF, 0x16]
+      });
+    },
+    mp3: function mp3(bytes) {
+      var offset = getId3Offset(bytes);
+      return bytesMatch(bytes, [0xFF, 0x02], {
+        offset: offset,
+        mask: [0xFF, 0x06]
+      });
+    },
+    webm: function webm(bytes) {
+      var docType = findEbml(bytes, [EBML_TAGS.EBML, EBML_TAGS.DocType])[0]; // check if DocType EBML tag is webm
+
+      return bytesMatch(docType, CONSTANTS.webm);
+    },
+    mkv: function mkv(bytes) {
+      var docType = findEbml(bytes, [EBML_TAGS.EBML, EBML_TAGS.DocType])[0]; // check if DocType EBML tag is matroska
+
+      return bytesMatch(docType, CONSTANTS.matroska);
+    },
+    mp4: function mp4(bytes) {
+      // if this file is another base media file format, it is not mp4
+      if (_isLikely['3gp'](bytes) || _isLikely.mov(bytes)) {
+        return false;
+      } // if this file starts with a ftyp or styp box its mp4
+
+      if (bytesMatch(bytes, CONSTANTS.mp4, {
+        offset: 4
+      }) || bytesMatch(bytes, CONSTANTS.fmp4, {
+        offset: 4
+      })) {
+        return true;
+      } // if this file starts with a moof/moov box its mp4
+
+      if (bytesMatch(bytes, CONSTANTS.moof, {
+        offset: 4
+      }) || bytesMatch(bytes, CONSTANTS.moov, {
+        offset: 4
+      })) {
+        return true;
+      }
+    },
+    mov: function mov(bytes) {
+      return bytesMatch(bytes, CONSTANTS.mov, {
+        offset: 4
+      });
+    },
+    '3gp': function gp(bytes) {
+      return bytesMatch(bytes, CONSTANTS['3gp'], {
+        offset: 4
+      });
+    },
+    ac3: function ac3(bytes) {
+      var offset = getId3Offset(bytes);
+      return bytesMatch(bytes, CONSTANTS.ac3, {
+        offset: offset
+      });
+    },
+    ts: function ts(bytes) {
+      if (bytes.length < 189 && bytes.length >= 1) {
+        return bytes[0] === 0x47;
+      }
+      var i = 0; // check the first 376 bytes for two matching sync bytes
+
+      while (i + 188 < bytes.length && i < 188) {
+        if (bytes[i] === 0x47 && bytes[i + 188] === 0x47) {
+          return true;
+        }
+        i += 1;
+      }
+      return false;
+    },
+    flac: function flac(bytes) {
+      var offset = getId3Offset(bytes);
+      return bytesMatch(bytes, CONSTANTS.flac, {
+        offset: offset
+      });
+    },
+    ogg: function ogg(bytes) {
+      return bytesMatch(bytes, CONSTANTS.ogg);
+    },
+    avi: function avi(bytes) {
+      return bytesMatch(bytes, CONSTANTS.riff) && bytesMatch(bytes, CONSTANTS.avi, {
+        offset: 8
+      });
+    },
+    wav: function wav(bytes) {
+      return bytesMatch(bytes, CONSTANTS.riff) && bytesMatch(bytes, CONSTANTS.wav, {
+        offset: 8
+      });
+    },
+    'h264': function h264(bytes) {
+      // find seq_parameter_set_rbsp
+      return findH264Nal(bytes, 7, 3).length;
+    },
+    'h265': function h265(bytes) {
+      // find video_parameter_set_rbsp or seq_parameter_set_rbsp
+      return findH265Nal(bytes, [32, 33], 3).length;
+    }
+  }; // get all the isLikely functions
+  // but make sure 'ts' is above h264 and h265
+  // but below everything else as it is the least specific
+
+  var isLikelyTypes = Object.keys(_isLikely) // remove ts, h264, h265
+  .filter(function (t) {
+    return t !== 'ts' && t !== 'h264' && t !== 'h265';
+  }) // add it back to the bottom
+  .concat(['ts', 'h264', 'h265']); // make sure we are dealing with uint8 data.
+
+  isLikelyTypes.forEach(function (type) {
+    var isLikelyFn = _isLikely[type];
+    _isLikely[type] = function (bytes) {
+      return isLikelyFn(toUint8(bytes));
+    };
+  }); // export after wrapping
+
+  var isLikely = _isLikely; // A useful list of file signatures can be found here
+  // https://en.wikipedia.org/wiki/List_of_file_signatures
+
+  var detectContainerForBytes = function detectContainerForBytes(bytes) {
+    bytes = toUint8(bytes);
+    for (var i = 0; i < isLikelyTypes.length; i++) {
+      var type = isLikelyTypes[i];
+      if (isLikely[type](bytes)) {
+        return type;
+      }
+    }
+    return '';
+  }; // fmp4 is not a container
+
+  var isLikelyFmp4MediaSegment = function isLikelyFmp4MediaSegment(bytes) {
+    return findBox(bytes, ['moof']).length > 0;
+  };
+
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+  var ONE_SECOND_IN_TS = 90000,
+    // 90kHz clock
+    secondsToVideoTs,
+    secondsToAudioTs,
+    videoTsToSeconds,
+    audioTsToSeconds,
+    audioTsToVideoTs,
+    videoTsToAudioTs,
+    metadataTsToSeconds;
+  secondsToVideoTs = function (seconds) {
+    return seconds * ONE_SECOND_IN_TS;
+  };
+  secondsToAudioTs = function (seconds, sampleRate) {
+    return seconds * sampleRate;
+  };
+  videoTsToSeconds = function (timestamp) {
+    return timestamp / ONE_SECOND_IN_TS;
+  };
+  audioTsToSeconds = function (timestamp, sampleRate) {
+    return timestamp / sampleRate;
+  };
+  audioTsToVideoTs = function (timestamp, sampleRate) {
+    return secondsToVideoTs(audioTsToSeconds(timestamp, sampleRate));
+  };
+  videoTsToAudioTs = function (timestamp, sampleRate) {
+    return secondsToAudioTs(videoTsToSeconds(timestamp), sampleRate);
+  };
+
+  /**
+   * Adjust ID3 tag or caption timing information by the timeline pts values
+   * (if keepOriginalTimestamps is false) and convert to seconds
+   */
+  metadataTsToSeconds = function (timestamp, timelineStartPts, keepOriginalTimestamps) {
+    return videoTsToSeconds(keepOriginalTimestamps ? timestamp : timestamp - timelineStartPts);
+  };
+  var clock = {
+    ONE_SECOND_IN_TS: ONE_SECOND_IN_TS,
+    secondsToVideoTs: secondsToVideoTs,
+    secondsToAudioTs: secondsToAudioTs,
+    videoTsToSeconds: videoTsToSeconds,
+    audioTsToSeconds: audioTsToSeconds,
+    audioTsToVideoTs: audioTsToVideoTs,
+    videoTsToAudioTs: videoTsToAudioTs,
+    metadataTsToSeconds: metadataTsToSeconds
+  };
+  var clock_1 = clock.ONE_SECOND_IN_TS;
+
+  /*! @name @videojs/http-streaming @version 3.12.1 @license Apache-2.0 */
+
+  /**
+   * @file resolve-url.js - Handling how URLs are resolved and manipulated
+   */
+  const resolveUrl = resolveUrl$1;
+  /**
+   * If the xhr request was redirected, return the responseURL, otherwise,
+   * return the original url.
+   *
+   * @api private
+   *
+   * @param  {string} url - an url being requested
+   * @param  {XMLHttpRequest} req - xhr request result
+   *
+   * @return {string}
+   */
+
+  const resolveManifestRedirect = (url, req) => {
+    // To understand how the responseURL below is set and generated:
+    // - https://fetch.spec.whatwg.org/#concept-response-url
+    // - https://fetch.spec.whatwg.org/#atomic-http-redirect-handling
+    if (req && req.responseURL && url !== req.responseURL) {
+      return req.responseURL;
+    }
+    return url;
+  };
+  const logger = source => {
+    if (videojs.log.debug) {
+      return videojs.log.debug.bind(videojs, 'VHS:', `${source} >`);
+    }
+    return function () {};
+  };
+
+  /**
+   * Provides a compatibility layer between Video.js 7 and 8 API changes for VHS.
+   */
+  /**
+   * Delegates to videojs.obj.merge (Video.js 8) or
+   * videojs.mergeOptions (Video.js 7).
+   */
+
+  function merge(...args) {
+    const context = videojs.obj || videojs;
+    const fn = context.merge || context.mergeOptions;
+    return fn.apply(context, args);
+  }
+  /**
+   * Delegates to videojs.time.createTimeRanges (Video.js 8) or
+   * videojs.createTimeRanges (Video.js 7).
+   */
+
+  function createTimeRanges(...args) {
+    const context = videojs.time || videojs;
+    const fn = context.createTimeRanges || context.createTimeRanges;
+    return fn.apply(context, args);
+  }
+  /**
+   * Converts provided buffered ranges to a descriptive string
+   *
+   * @param {TimeRanges} buffered - received buffered time ranges
+   *
+   * @return {string} - descriptive string
+   */
+
+  function bufferedRangesToString(buffered) {
+    if (buffered.length === 0) {
+      return 'Buffered Ranges are empty';
+    }
+    let bufferedRangesStr = 'Buffered Ranges: \n';
+    for (let i = 0; i < buffered.length; i++) {
+      const start = buffered.start(i);
+      const end = buffered.end(i);
+      bufferedRangesStr += `${start} --> ${end}. Duration (${end - start})\n`;
+    }
+    return bufferedRangesStr;
+  }
+
+  /**
+   * ranges
+   *
+   * Utilities for working with TimeRanges.
+   *
+   */
+
+  const TIME_FUDGE_FACTOR = 1 / 30; // Comparisons between time values such as current time and the end of the buffered range
+  // can be misleading because of precision differences or when the current media has poorly
+  // aligned audio and video, which can cause values to be slightly off from what you would
+  // expect. This value is what we consider to be safe to use in such comparisons to account
+  // for these scenarios.
+
+  const SAFE_TIME_DELTA = TIME_FUDGE_FACTOR * 3;
+  const filterRanges = function (timeRanges, predicate) {
+    const results = [];
+    let i;
+    if (timeRanges && timeRanges.length) {
+      // Search for ranges that match the predicate
+      for (i = 0; i < timeRanges.length; i++) {
+        if (predicate(timeRanges.start(i), timeRanges.end(i))) {
+          results.push([timeRanges.start(i), timeRanges.end(i)]);
+        }
+      }
+    }
+    return createTimeRanges(results);
+  };
+  /**
+   * Attempts to find the buffered TimeRange that contains the specified
+   * time.
+   *
+   * @param {TimeRanges} buffered - the TimeRanges object to query
+   * @param {number} time  - the time to filter on.
+   * @return {TimeRanges} a new TimeRanges object
+   */
+
+  const findRange = function (buffered, time) {
+    return filterRanges(buffered, function (start, end) {
+      return start - SAFE_TIME_DELTA <= time && end + SAFE_TIME_DELTA >= time;
+    });
+  };
+  /**
+   * Returns the TimeRanges that begin later than the specified time.
+   *
+   * @param {TimeRanges} timeRanges - the TimeRanges object to query
+   * @param {number} time - the time to filter on.
+   * @return {TimeRanges} a new TimeRanges object.
+   */
+
+  const findNextRange = function (timeRanges, time) {
+    return filterRanges(timeRanges, function (start) {
+      return start - TIME_FUDGE_FACTOR >= time;
+    });
+  };
+  /**
+   * Returns gaps within a list of TimeRanges
+   *
+   * @param {TimeRanges} buffered - the TimeRanges object
+   * @return {TimeRanges} a TimeRanges object of gaps
+   */
+
+  const findGaps = function (buffered) {
+    if (buffered.length < 2) {
+      return createTimeRanges();
+    }
+    const ranges = [];
+    for (let i = 1; i < buffered.length; i++) {
+      const start = buffered.end(i - 1);
+      const end = buffered.start(i);
+      ranges.push([start, end]);
+    }
+    return createTimeRanges(ranges);
+  };
+  /**
+   * Calculate the intersection of two TimeRanges
+   *
+   * @param {TimeRanges} bufferA
+   * @param {TimeRanges} bufferB
+   * @return {TimeRanges} The interesection of `bufferA` with `bufferB`
+   */
+
+  const bufferIntersection = function (bufferA, bufferB) {
+    let start = null;
+    let end = null;
+    let arity = 0;
+    const extents = [];
+    const ranges = [];
+    if (!bufferA || !bufferA.length || !bufferB || !bufferB.length) {
+      return createTimeRanges();
+    } // Handle the case where we have both buffers and create an
+    // intersection of the two
+
+    let count = bufferA.length; // A) Gather up all start and end times
+
+    while (count--) {
+      extents.push({
+        time: bufferA.start(count),
+        type: 'start'
+      });
+      extents.push({
+        time: bufferA.end(count),
+        type: 'end'
+      });
+    }
+    count = bufferB.length;
+    while (count--) {
+      extents.push({
+        time: bufferB.start(count),
+        type: 'start'
+      });
+      extents.push({
+        time: bufferB.end(count),
+        type: 'end'
+      });
+    } // B) Sort them by time
+
+    extents.sort(function (a, b) {
+      return a.time - b.time;
+    }); // C) Go along one by one incrementing arity for start and decrementing
+    //    arity for ends
+
+    for (count = 0; count < extents.length; count++) {
+      if (extents[count].type === 'start') {
+        arity++; // D) If arity is ever incremented to 2 we are entering an
+        //    overlapping range
+
+        if (arity === 2) {
+          start = extents[count].time;
+        }
+      } else if (extents[count].type === 'end') {
+        arity--; // E) If arity is ever decremented to 1 we leaving an
+        //    overlapping range
+
+        if (arity === 1) {
+          end = extents[count].time;
+        }
+      } // F) Record overlapping ranges
+
+      if (start !== null && end !== null) {
+        ranges.push([start, end]);
+        start = null;
+        end = null;
+      }
+    }
+    return createTimeRanges(ranges);
+  };
+  /**
+   * Gets a human readable string for a TimeRange
+   *
+   * @param {TimeRange} range
+   * @return {string} a human readable string
+   */
+
+  const printableRange = range => {
+    const strArr = [];
+    if (!range || !range.length) {
+      return '';
+    }
+    for (let i = 0; i < range.length; i++) {
+      strArr.push(range.start(i) + ' => ' + range.end(i));
+    }
+    return strArr.join(', ');
+  };
+  /**
+   * Calculates the amount of time left in seconds until the player hits the end of the
+   * buffer and causes a rebuffer
+   *
+   * @param {TimeRange} buffered
+   *        The state of the buffer
+   * @param {Numnber} currentTime
+   *        The current time of the player
+   * @param {number} playbackRate
+   *        The current playback rate of the player. Defaults to 1.
+   * @return {number}
+   *         Time until the player has to start rebuffering in seconds.
+   * @function timeUntilRebuffer
+   */
+
+  const timeUntilRebuffer = function (buffered, currentTime, playbackRate = 1) {
+    const bufferedEnd = buffered.length ? buffered.end(buffered.length - 1) : 0;
+    return (bufferedEnd - currentTime) / playbackRate;
+  };
+  /**
+   * Converts a TimeRanges object into an array representation
+   *
+   * @param {TimeRanges} timeRanges
+   * @return {Array}
+   */
+
+  const timeRangesToArray = timeRanges => {
+    const timeRangesList = [];
+    for (let i = 0; i < timeRanges.length; i++) {
+      timeRangesList.push({
+        start: timeRanges.start(i),
+        end: timeRanges.end(i)
+      });
+    }
+    return timeRangesList;
+  };
+  /**
+   * Determines if two time range objects are different.
+   *
+   * @param {TimeRange} a
+   *        the first time range object to check
+   *
+   * @param {TimeRange} b
+   *        the second time range object to check
+   *
+   * @return {Boolean}
+   *         Whether the time range objects differ
+   */
+
+  const isRangeDifferent = function (a, b) {
+    // same object
+    if (a === b) {
+      return false;
+    } // one or the other is undefined
+
+    if (!a && b || !b && a) {
+      return true;
+    } // length is different
+
+    if (a.length !== b.length) {
+      return true;
+    } // see if any start/end pair is different
+
+    for (let i = 0; i < a.length; i++) {
+      if (a.start(i) !== b.start(i) || a.end(i) !== b.end(i)) {
+        return true;
+      }
+    } // if the length and every pair is the same
+    // this is the same time range
+
+    return false;
+  };
+  const lastBufferedEnd = function (a) {
+    if (!a || !a.length || !a.end) {
+      return;
+    }
+    return a.end(a.length - 1);
+  };
+  /**
+   * A utility function to add up the amount of time in a timeRange
+   * after a specified startTime.
+   * ie:[[0, 10], [20, 40], [50, 60]] with a startTime 0
+   *     would return 40 as there are 40s seconds after 0 in the timeRange
+   *
+   * @param {TimeRange} range
+   *        The range to check against
+   * @param {number} startTime
+   *        The time in the time range that you should start counting from
+   *
+   * @return {number}
+   *          The number of seconds in the buffer passed the specified time.
+   */
+
+  const timeAheadOf = function (range, startTime) {
+    let time = 0;
+    if (!range || !range.length) {
+      return time;
+    }
+    for (let i = 0; i < range.length; i++) {
+      const start = range.start(i);
+      const end = range.end(i); // startTime is after this range entirely
+
+      if (startTime > end) {
+        continue;
+      } // startTime is within this range
+
+      if (startTime > start && startTime <= end) {
+        time += end - startTime;
+        continue;
+      } // startTime is before this range.
+
+      time += end - start;
+    }
+    return time;
+  };
+
+  /**
+   * @file playlist.js
+   *
+   * Playlist related utilities.
+   */
+  /**
+   * Get the duration of a segment, with special cases for
+   * llhls segments that do not have a duration yet.
+   *
+   * @param {Object} playlist
+   *        the playlist that the segment belongs to.
+   * @param {Object} segment
+   *        the segment to get a duration for.
+   *
+   * @return {number}
+   *          the segment duration
+   */
+
+  const segmentDurationWithParts = (playlist, segment) => {
+    // if this isn't a preload segment
+    // then we will have a segment duration that is accurate.
+    if (!segment.preload) {
+      return segment.duration;
+    } // otherwise we have to add up parts and preload hints
+    // to get an up to date duration.
+
+    let result = 0;
+    (segment.parts || []).forEach(function (p) {
+      result += p.duration;
+    }); // for preload hints we have to use partTargetDuration
+    // as they won't even have a duration yet.
+
+    (segment.preloadHints || []).forEach(function (p) {
+      if (p.type === 'PART') {
+        result += playlist.partTargetDuration;
+      }
+    });
+    return result;
+  };
+  /**
+   * A function to get a combined list of parts and segments with durations
+   * and indexes.
+   *
+   * @param {Playlist} playlist the playlist to get the list for.
+   *
+   * @return {Array} The part/segment list.
+   */
+
+  const getPartsAndSegments = playlist => (playlist.segments || []).reduce((acc, segment, si) => {
+    if (segment.parts) {
+      segment.parts.forEach(function (part, pi) {
+        acc.push({
+          duration: part.duration,
+          segmentIndex: si,
+          partIndex: pi,
+          part,
+          segment
+        });
+      });
+    } else {
+      acc.push({
+        duration: segment.duration,
+        segmentIndex: si,
+        partIndex: null,
+        segment,
+        part: null
+      });
+    }
+    return acc;
+  }, []);
+  const getLastParts = media => {
+    const lastSegment = media.segments && media.segments.length && media.segments[media.segments.length - 1];
+    return lastSegment && lastSegment.parts || [];
+  };
+  const getKnownPartCount = ({
+    preloadSegment
+  }) => {
+    if (!preloadSegment) {
+      return;
+    }
+    const {
+      parts,
+      preloadHints
+    } = preloadSegment;
+    let partCount = (preloadHints || []).reduce((count, hint) => count + (hint.type === 'PART' ? 1 : 0), 0);
+    partCount += parts && parts.length ? parts.length : 0;
+    return partCount;
+  };
+  /**
+   * Get the number of seconds to delay from the end of a
+   * live playlist.
+   *
+   * @param {Playlist} main the main playlist
+   * @param {Playlist} media the media playlist
+   * @return {number} the hold back in seconds.
+   */
+
+  const liveEdgeDelay = (main, media) => {
+    if (media.endList) {
+      return 0;
+    } // dash suggestedPresentationDelay trumps everything
+
+    if (main && main.suggestedPresentationDelay) {
+      return main.suggestedPresentationDelay;
+    }
+    const hasParts = getLastParts(media).length > 0; // look for "part" delays from ll-hls first
+
+    if (hasParts && media.serverControl && media.serverControl.partHoldBack) {
+      return media.serverControl.partHoldBack;
+    } else if (hasParts && media.partTargetDuration) {
+      return media.partTargetDuration * 3; // finally look for full segment delays
+    } else if (media.serverControl && media.serverControl.holdBack) {
+      return media.serverControl.holdBack;
+    } else if (media.targetDuration) {
+      return media.targetDuration * 3;
+    }
+    return 0;
+  };
+  /**
+   * walk backward until we find a duration we can use
+   * or return a failure
+   *
+   * @param {Playlist} playlist the playlist to walk through
+   * @param {Number} endSequence the mediaSequence to stop walking on
+   */
+
+  const backwardDuration = function (playlist, endSequence) {
+    let result = 0;
+    let i = endSequence - playlist.mediaSequence; // if a start time is available for segment immediately following
+    // the interval, use it
+
+    let segment = playlist.segments[i]; // Walk backward until we find the latest segment with timeline
+    // information that is earlier than endSequence
+
+    if (segment) {
+      if (typeof segment.start !== 'undefined') {
+        return {
+          result: segment.start,
+          precise: true
+        };
+      }
+      if (typeof segment.end !== 'undefined') {
+        return {
+          result: segment.end - segment.duration,
+          precise: true
+        };
+      }
+    }
+    while (i--) {
+      segment = playlist.segments[i];
+      if (typeof segment.end !== 'undefined') {
+        return {
+          result: result + segment.end,
+          precise: true
+        };
+      }
+      result += segmentDurationWithParts(playlist, segment);
+      if (typeof segment.start !== 'undefined') {
+        return {
+          result: result + segment.start,
+          precise: true
+        };
+      }
+    }
+    return {
+      result,
+      precise: false
+    };
+  };
+  /**
+   * walk forward until we find a duration we can use
+   * or return a failure
+   *
+   * @param {Playlist} playlist the playlist to walk through
+   * @param {number} endSequence the mediaSequence to stop walking on
+   */
+
+  const forwardDuration = function (playlist, endSequence) {
+    let result = 0;
+    let segment;
+    let i = endSequence - playlist.mediaSequence; // Walk forward until we find the earliest segment with timeline
+    // information
+
+    for (; i < playlist.segments.length; i++) {
+      segment = playlist.segments[i];
+      if (typeof segment.start !== 'undefined') {
+        return {
+          result: segment.start - result,
+          precise: true
+        };
+      }
+      result += segmentDurationWithParts(playlist, segment);
+      if (typeof segment.end !== 'undefined') {
+        return {
+          result: segment.end - result,
+          precise: true
+        };
+      }
+    } // indicate we didn't find a useful duration estimate
+
+    return {
+      result: -1,
+      precise: false
+    };
+  };
+  /**
+    * Calculate the media duration from the segments associated with a
+    * playlist. The duration of a subinterval of the available segments
+    * may be calculated by specifying an end index.
+    *
+    * @param {Object} playlist a media playlist object
+    * @param {number=} endSequence an exclusive upper boundary
+    * for the playlist.  Defaults to playlist length.
+    * @param {number} expired the amount of time that has dropped
+    * off the front of the playlist in a live scenario
+    * @return {number} the duration between the first available segment
+    * and end index.
+    */
+
+  const intervalDuration = function (playlist, endSequence, expired) {
+    if (typeof endSequence === 'undefined') {
+      endSequence = playlist.mediaSequence + playlist.segments.length;
+    }
+    if (endSequence < playlist.mediaSequence) {
+      return 0;
+    } // do a backward walk to estimate the duration
+
+    const backward = backwardDuration(playlist, endSequence);
+    if (backward.precise) {
+      // if we were able to base our duration estimate on timing
+      // information provided directly from the Media Source, return
+      // it
+      return backward.result;
+    } // walk forward to see if a precise duration estimate can be made
+    // that way
+
+    const forward = forwardDuration(playlist, endSequence);
+    if (forward.precise) {
+      // we found a segment that has been buffered and so it's
+      // position is known precisely
+      return forward.result;
+    } // return the less-precise, playlist-based duration estimate
+
+    return backward.result + expired;
+  };
+  /**
+    * Calculates the duration of a playlist. If a start and end index
+    * are specified, the duration will be for the subset of the media
+    * timeline between those two indices. The total duration for live
+    * playlists is always Infinity.
+    *
+    * @param {Object} playlist a media playlist object
+    * @param {number=} endSequence an exclusive upper
+    * boundary for the playlist. Defaults to the playlist media
+    * sequence number plus its length.
+    * @param {number=} expired the amount of time that has
+    * dropped off the front of the playlist in a live scenario
+    * @return {number} the duration between the start index and end
+    * index.
+    */
+
+  const duration = function (playlist, endSequence, expired) {
+    if (!playlist) {
+      return 0;
+    }
+    if (typeof expired !== 'number') {
+      expired = 0;
+    } // if a slice of the total duration is not requested, use
+    // playlist-level duration indicators when they're present
+
+    if (typeof endSequence === 'undefined') {
+      // if present, use the duration specified in the playlist
+      if (playlist.totalDuration) {
+        return playlist.totalDuration;
+      } // duration should be Infinity for live playlists
+
+      if (!playlist.endList) {
+        return window.Infinity;
+      }
+    } // calculate the total duration based on the segment durations
+
+    return intervalDuration(playlist, endSequence, expired);
+  };
+  /**
+    * Calculate the time between two indexes in the current playlist
+    * neight the start- nor the end-index need to be within the current
+    * playlist in which case, the targetDuration of the playlist is used
+    * to approximate the durations of the segments
+    *
+    * @param {Array} options.durationList list to iterate over for durations.
+    * @param {number} options.defaultDuration duration to use for elements before or after the durationList
+    * @param {number} options.startIndex partsAndSegments index to start
+    * @param {number} options.endIndex partsAndSegments index to end.
+    * @return {number} the number of seconds between startIndex and endIndex
+    */
+
+  const sumDurations = function ({
+    defaultDuration,
+    durationList,
+    startIndex,
+    endIndex
+  }) {
+    let durations = 0;
+    if (startIndex > endIndex) {
+      [startIndex, endIndex] = [endIndex, startIndex];
+    }
+    if (startIndex < 0) {
+      for (let i = startIndex; i < Math.min(0, endIndex); i++) {
+        durations += defaultDuration;
+      }
+      startIndex = 0;
+    }
+    for (let i = startIndex; i < endIndex; i++) {
+      durations += durationList[i].duration;
+    }
+    return durations;
+  };
+  /**
+   * Calculates the playlist end time
+   *
+   * @param {Object} playlist a media playlist object
+   * @param {number=} expired the amount of time that has
+   *                  dropped off the front of the playlist in a live scenario
+   * @param {boolean|false} useSafeLiveEnd a boolean value indicating whether or not the
+   *                        playlist end calculation should consider the safe live end
+   *                        (truncate the playlist end by three segments). This is normally
+   *                        used for calculating the end of the playlist's seekable range.
+   *                        This takes into account the value of liveEdgePadding.
+   *                        Setting liveEdgePadding to 0 is equivalent to setting this to false.
+   * @param {number} liveEdgePadding a number indicating how far from the end of the playlist we should be in seconds.
+   *                 If this is provided, it is used in the safe live end calculation.
+   *                 Setting useSafeLiveEnd=false or liveEdgePadding=0 are equivalent.
+   *                 Corresponds to suggestedPresentationDelay in DASH manifests.
+   * @return {number} the end time of playlist
+   * @function playlistEnd
+   */
+
+  const playlistEnd = function (playlist, expired, useSafeLiveEnd, liveEdgePadding) {
+    if (!playlist || !playlist.segments) {
+      return null;
+    }
+    if (playlist.endList) {
+      return duration(playlist);
+    }
+    if (expired === null) {
+      return null;
+    }
+    expired = expired || 0;
+    let lastSegmentEndTime = intervalDuration(playlist, playlist.mediaSequence + playlist.segments.length, expired);
+    if (useSafeLiveEnd) {
+      liveEdgePadding = typeof liveEdgePadding === 'number' ? liveEdgePadding : liveEdgeDelay(null, playlist);
+      lastSegmentEndTime -= liveEdgePadding;
+    } // don't return a time less than zero
+
+    return Math.max(0, lastSegmentEndTime);
+  };
+  /**
+    * Calculates the interval of time that is currently seekable in a
+    * playlist. The returned time ranges are relative to the earliest
+    * moment in the specified playlist that is still available. A full
+    * seekable implementation for live streams would need to offset
+    * these values by the duration of content that has expired from the
+    * stream.
+    *
+    * @param {Object} playlist a media playlist object
+    * dropped off the front of the playlist in a live scenario
+    * @param {number=} expired the amount of time that has
+    * dropped off the front of the playlist in a live scenario
+    * @param {number} liveEdgePadding how far from the end of the playlist we should be in seconds.
+    *        Corresponds to suggestedPresentationDelay in DASH manifests.
+    * @return {TimeRanges} the periods of time that are valid targets
+    * for seeking
+    */
+
+  const seekable = function (playlist, expired, liveEdgePadding) {
+    const useSafeLiveEnd = true;
+    const seekableStart = expired || 0;
+    let seekableEnd = playlistEnd(playlist, expired, useSafeLiveEnd, liveEdgePadding);
+    if (seekableEnd === null) {
+      return createTimeRanges();
+    } // Clamp seekable end since it can not be less than the seekable start
+
+    if (seekableEnd < seekableStart) {
+      seekableEnd = seekableStart;
+    }
+    return createTimeRanges(seekableStart, seekableEnd);
+  };
+  /**
+   * Determine the index and estimated starting time of the segment that
+   * contains a specified playback position in a media playlist.
+   *
+   * @param {Object} options.playlist the media playlist to query
+   * @param {number} options.currentTime The number of seconds since the earliest
+   * possible position to determine the containing segment for
+   * @param {number} options.startTime the time when the segment/part starts
+   * @param {number} options.startingSegmentIndex the segment index to start looking at.
+   * @param {number?} [options.startingPartIndex] the part index to look at within the segment.
+   *
+   * @return {Object} an object with partIndex, segmentIndex, and startTime.
+   */
+
+  const getMediaInfoForTime = function ({
+    playlist,
+    currentTime,
+    startingSegmentIndex,
+    startingPartIndex,
+    startTime,
+    exactManifestTimings
+  }) {
+    let time = currentTime - startTime;
+    const partsAndSegments = getPartsAndSegments(playlist);
+    let startIndex = 0;
+    for (let i = 0; i < partsAndSegments.length; i++) {
+      const partAndSegment = partsAndSegments[i];
+      if (startingSegmentIndex !== partAndSegment.segmentIndex) {
+        continue;
+      } // skip this if part index does not match.
+
+      if (typeof startingPartIndex === 'number' && typeof partAndSegment.partIndex === 'number' && startingPartIndex !== partAndSegment.partIndex) {
+        continue;
+      }
+      startIndex = i;
+      break;
+    }
+    if (time < 0) {
+      // Walk backward from startIndex in the playlist, adding durations
+      // until we find a segment that contains `time` and return it
+      if (startIndex > 0) {
+        for (let i = startIndex - 1; i >= 0; i--) {
+          const partAndSegment = partsAndSegments[i];
+          time += partAndSegment.duration;
+          if (exactManifestTimings) {
+            if (time < 0) {
+              continue;
+            }
+          } else if (time + TIME_FUDGE_FACTOR <= 0) {
+            continue;
+          }
+          return {
+            partIndex: partAndSegment.partIndex,
+            segmentIndex: partAndSegment.segmentIndex,
+            startTime: startTime - sumDurations({
+              defaultDuration: playlist.targetDuration,
+              durationList: partsAndSegments,
+              startIndex,
+              endIndex: i
+            })
+          };
+        }
+      } // We were unable to find a good segment within the playlist
+      // so select the first segment
+
+      return {
+        partIndex: partsAndSegments[0] && partsAndSegments[0].partIndex || null,
+        segmentIndex: partsAndSegments[0] && partsAndSegments[0].segmentIndex || 0,
+        startTime: currentTime
+      };
+    } // When startIndex is negative, we first walk forward to first segment
+    // adding target durations. If we "run out of time" before getting to
+    // the first segment, return the first segment
+
+    if (startIndex < 0) {
+      for (let i = startIndex; i < 0; i++) {
+        time -= playlist.targetDuration;
+        if (time < 0) {
+          return {
+            partIndex: partsAndSegments[0] && partsAndSegments[0].partIndex || null,
+            segmentIndex: partsAndSegments[0] && partsAndSegments[0].segmentIndex || 0,
+            startTime: currentTime
+          };
+        }
+      }
+      startIndex = 0;
+    } // Walk forward from startIndex in the playlist, subtracting durations
+    // until we find a segment that contains `time` and return it
+
+    for (let i = startIndex; i < partsAndSegments.length; i++) {
+      const partAndSegment = partsAndSegments[i];
+      time -= partAndSegment.duration;
+      const canUseFudgeFactor = partAndSegment.duration > TIME_FUDGE_FACTOR;
+      const isExactlyAtTheEnd = time === 0;
+      const isExtremelyCloseToTheEnd = canUseFudgeFactor && time + TIME_FUDGE_FACTOR >= 0;
+      if (isExactlyAtTheEnd || isExtremelyCloseToTheEnd) {
+        // 1) We are exactly at the end of the current segment.
+        // 2) We are extremely close to the end of the current segment (The difference is less than  1 / 30).
+        //    We may encounter this situation when
+        //    we don't have exact match between segment duration info in the manifest and the actual duration of the segment
+        //    For example:
+        //    We appended 3 segments 10 seconds each, meaning we should have 30 sec buffered,
+        //    but we the actual buffered is 29.99999
+        //
+        // In both cases:
+        // if we passed current time -> it means that we already played current segment
+        // if we passed buffered.end -> it means that this segment is already loaded and buffered
+        // we should select the next segment if we have one:
+        if (i !== partsAndSegments.length - 1) {
+          continue;
+        }
+      }
+      if (exactManifestTimings) {
+        if (time > 0) {
+          continue;
+        }
+      } else if (time - TIME_FUDGE_FACTOR >= 0) {
+        continue;
+      }
+      return {
+        partIndex: partAndSegment.partIndex,
+        segmentIndex: partAndSegment.segmentIndex,
+        startTime: startTime + sumDurations({
+          defaultDuration: playlist.targetDuration,
+          durationList: partsAndSegments,
+          startIndex,
+          endIndex: i
+        })
+      };
+    } // We are out of possible candidates so load the last one...
+
+    return {
+      segmentIndex: partsAndSegments[partsAndSegments.length - 1].segmentIndex,
+      partIndex: partsAndSegments[partsAndSegments.length - 1].partIndex,
+      startTime: currentTime
+    };
+  };
+  /**
+   * Check whether the playlist is excluded or not.
+   *
+   * @param {Object} playlist the media playlist object
+   * @return {boolean} whether the playlist is excluded or not
+   * @function isExcluded
+   */
+
+  const isExcluded = function (playlist) {
+    return playlist.excludeUntil && playlist.excludeUntil > Date.now();
+  };
+  /**
+   * Check whether the playlist is compatible with current playback configuration or has
+   * been excluded permanently for being incompatible.
+   *
+   * @param {Object} playlist the media playlist object
+   * @return {boolean} whether the playlist is incompatible or not
+   * @function isIncompatible
+   */
+
+  const isIncompatible = function (playlist) {
+    return playlist.excludeUntil && playlist.excludeUntil === Infinity;
+  };
+  /**
+   * Check whether the playlist is enabled or not.
+   *
+   * @param {Object} playlist the media playlist object
+   * @return {boolean} whether the playlist is enabled or not
+   * @function isEnabled
+   */
+
+  const isEnabled = function (playlist) {
+    const excluded = isExcluded(playlist);
+    return !playlist.disabled && !excluded;
+  };
+  /**
+   * Check whether the playlist has been manually disabled through the representations api.
+   *
+   * @param {Object} playlist the media playlist object
+   * @return {boolean} whether the playlist is disabled manually or not
+   * @function isDisabled
+   */
+
+  const isDisabled = function (playlist) {
+    return playlist.disabled;
+  };
+  /**
+   * Returns whether the current playlist is an AES encrypted HLS stream
+   *
+   * @return {boolean} true if it's an AES encrypted HLS stream
+   */
+
+  const isAes = function (media) {
+    for (let i = 0; i < media.segments.length; i++) {
+      if (media.segments[i].key) {
+        return true;
+      }
+    }
+    return false;
+  };
+  /**
+   * Checks if the playlist has a value for the specified attribute
+   *
+   * @param {string} attr
+   *        Attribute to check for
+   * @param {Object} playlist
+   *        The media playlist object
+   * @return {boolean}
+   *         Whether the playlist contains a value for the attribute or not
+   * @function hasAttribute
+   */
+
+  const hasAttribute = function (attr, playlist) {
+    return playlist.attributes && playlist.attributes[attr];
+  };
+  /**
+   * Estimates the time required to complete a segment download from the specified playlist
+   *
+   * @param {number} segmentDuration
+   *        Duration of requested segment
+   * @param {number} bandwidth
+   *        Current measured bandwidth of the player
+   * @param {Object} playlist
+   *        The media playlist object
+   * @param {number=} bytesReceived
+   *        Number of bytes already received for the request. Defaults to 0
+   * @return {number|NaN}
+   *         The estimated time to request the segment. NaN if bandwidth information for
+   *         the given playlist is unavailable
+   * @function estimateSegmentRequestTime
+   */
+
+  const estimateSegmentRequestTime = function (segmentDuration, bandwidth, playlist, bytesReceived = 0) {
+    if (!hasAttribute('BANDWIDTH', playlist)) {
+      return NaN;
+    }
+    const size = segmentDuration * playlist.attributes.BANDWIDTH;
+    return (size - bytesReceived * 8) / bandwidth;
+  };
+  /*
+   * Returns whether the current playlist is the lowest rendition
+   *
+   * @return {Boolean} true if on lowest rendition
+   */
+
+  const isLowestEnabledRendition = (main, media) => {
+    if (main.playlists.length === 1) {
+      return true;
+    }
+    const currentBandwidth = media.attributes.BANDWIDTH || Number.MAX_VALUE;
+    return main.playlists.filter(playlist => {
+      if (!isEnabled(playlist)) {
+        return false;
+      }
+      return (playlist.attributes.BANDWIDTH || 0) < currentBandwidth;
+    }).length === 0;
+  };
+  const playlistMatch = (a, b) => {
+    // both playlits are null
+    // or only one playlist is non-null
+    // no match
+    if (!a && !b || !a && b || a && !b) {
+      return false;
+    } // playlist objects are the same, match
+
+    if (a === b) {
+      return true;
+    } // first try to use id as it should be the most
+    // accurate
+
+    if (a.id && b.id && a.id === b.id) {
+      return true;
+    } // next try to use reslovedUri as it should be the
+    // second most accurate.
+
+    if (a.resolvedUri && b.resolvedUri && a.resolvedUri === b.resolvedUri) {
+      return true;
+    } // finally try to use uri as it should be accurate
+    // but might miss a few cases for relative uris
+
+    if (a.uri && b.uri && a.uri === b.uri) {
+      return true;
+    }
+    return false;
+  };
+  const someAudioVariant = function (main, callback) {
+    const AUDIO = main && main.mediaGroups && main.mediaGroups.AUDIO || {};
+    let found = false;
+    for (const groupName in AUDIO) {
+      for (const label in AUDIO[groupName]) {
+        found = callback(AUDIO[groupName][label]);
+        if (found) {
+          break;
+        }
+      }
+      if (found) {
+        break;
+      }
+    }
+    return !!found;
+  };
+  const isAudioOnly = main => {
+    // we are audio only if we have no main playlists but do
+    // have media group playlists.
+    if (!main || !main.playlists || !main.playlists.length) {
+      // without audio variants or playlists this
+      // is not an audio only main.
+      const found = someAudioVariant(main, variant => variant.playlists && variant.playlists.length || variant.uri);
+      return found;
+    } // if every playlist has only an audio codec it is audio only
+
+    for (let i = 0; i < main.playlists.length; i++) {
+      const playlist = main.playlists[i];
+      const CODECS = playlist.attributes && playlist.attributes.CODECS; // all codecs are audio, this is an audio playlist.
+
+      if (CODECS && CODECS.split(',').every(c => isAudioCodec(c))) {
+        continue;
+      } // playlist is in an audio group it is audio only
+
+      const found = someAudioVariant(main, variant => playlistMatch(playlist, variant));
+      if (found) {
+        continue;
+      } // if we make it here this playlist isn't audio and we
+      // are not audio only
+
+      return false;
+    } // if we make it past every playlist without returning, then
+    // this is an audio only playlist.
+
+    return true;
+  }; // exports
+
+  var Playlist = {
+    liveEdgeDelay,
+    duration,
+    seekable,
+    getMediaInfoForTime,
+    isEnabled,
+    isDisabled,
+    isExcluded,
+    isIncompatible,
+    playlistEnd,
+    isAes,
+    hasAttribute,
+    estimateSegmentRequestTime,
+    isLowestEnabledRendition,
+    isAudioOnly,
+    playlistMatch,
+    segmentDurationWithParts
+  };
+  const {
+    log
+  } = videojs;
+  const createPlaylistID = (index, uri) => {
+    return `${index}-${uri}`;
+  }; // default function for creating a group id
+
+  const groupID = (type, group, label) => {
+    return `placeholder-uri-${type}-${group}-${label}`;
+  };
+  /**
+   * Parses a given m3u8 playlist
+   *
+   * @param {Function} [onwarn]
+   *        a function to call when the parser triggers a warning event.
+   * @param {Function} [oninfo]
+   *        a function to call when the parser triggers an info event.
+   * @param {string} manifestString
+   *        The downloaded manifest string
+   * @param {Object[]} [customTagParsers]
+   *        An array of custom tag parsers for the m3u8-parser instance
+   * @param {Object[]} [customTagMappers]
+   *        An array of custom tag mappers for the m3u8-parser instance
+   * @param {boolean} [llhls]
+   *        Whether to keep ll-hls features in the manifest after parsing.
+   * @return {Object}
+   *         The manifest object
+   */
+
+  const parseManifest = ({
+    onwarn,
+    oninfo,
+    manifestString,
+    customTagParsers = [],
+    customTagMappers = [],
+    llhls
+  }) => {
+    const parser = new Parser();
+    if (onwarn) {
+      parser.on('warn', onwarn);
+    }
+    if (oninfo) {
+      parser.on('info', oninfo);
+    }
+    customTagParsers.forEach(customParser => parser.addParser(customParser));
+    customTagMappers.forEach(mapper => parser.addTagMapper(mapper));
+    parser.push(manifestString);
+    parser.end();
+    const manifest = parser.manifest; // remove llhls features from the parsed manifest
+    // if we don't want llhls support.
+
+    if (!llhls) {
+      ['preloadSegment', 'skip', 'serverControl', 'renditionReports', 'partInf', 'partTargetDuration'].forEach(function (k) {
+        if (manifest.hasOwnProperty(k)) {
+          delete manifest[k];
+        }
+      });
+      if (manifest.segments) {
+        manifest.segments.forEach(function (segment) {
+          ['parts', 'preloadHints'].forEach(function (k) {
+            if (segment.hasOwnProperty(k)) {
+              delete segment[k];
+            }
+          });
+        });
+      }
+    }
+    if (!manifest.targetDuration) {
+      let targetDuration = 10;
+      if (manifest.segments && manifest.segments.length) {
+        targetDuration = manifest.segments.reduce((acc, s) => Math.max(acc, s.duration), 0);
+      }
+      if (onwarn) {
+        onwarn({
+          message: `manifest has no targetDuration defaulting to ${targetDuration}`
+        });
+      }
+      manifest.targetDuration = targetDuration;
+    }
+    const parts = getLastParts(manifest);
+    if (parts.length && !manifest.partTargetDuration) {
+      const partTargetDuration = parts.reduce((acc, p) => Math.max(acc, p.duration), 0);
+      if (onwarn) {
+        onwarn({
+          message: `manifest has no partTargetDuration defaulting to ${partTargetDuration}`
+        });
+        log.error('LL-HLS manifest has parts but lacks required #EXT-X-PART-INF:PART-TARGET value. See https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis-09#section-4.4.3.7. Playback is not guaranteed.');
+      }
+      manifest.partTargetDuration = partTargetDuration;
+    }
+    return manifest;
+  };
+  /**
+   * Loops through all supported media groups in main and calls the provided
+   * callback for each group
+   *
+   * @param {Object} main
+   *        The parsed main manifest object
+   * @param {Function} callback
+   *        Callback to call for each media group
+   */
+
+  const forEachMediaGroup = (main, callback) => {
+    if (!main.mediaGroups) {
+      return;
+    }
+    ['AUDIO', 'SUBTITLES'].forEach(mediaType => {
+      if (!main.mediaGroups[mediaType]) {
+        return;
+      }
+      for (const groupKey in main.mediaGroups[mediaType]) {
+        for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+          const mediaProperties = main.mediaGroups[mediaType][groupKey][labelKey];
+          callback(mediaProperties, mediaType, groupKey, labelKey);
+        }
+      }
+    });
+  };
+  /**
+   * Adds properties and attributes to the playlist to keep consistent functionality for
+   * playlists throughout VHS.
+   *
+   * @param {Object} config
+   *        Arguments object
+   * @param {Object} config.playlist
+   *        The media playlist
+   * @param {string} [config.uri]
+   *        The uri to the media playlist (if media playlist is not from within a main
+   *        playlist)
+   * @param {string} id
+   *        ID to use for the playlist
+   */
+
+  const setupMediaPlaylist = ({
+    playlist,
+    uri,
+    id
+  }) => {
+    playlist.id = id;
+    playlist.playlistErrors_ = 0;
+    if (uri) {
+      // For media playlists, m3u8-parser does not have access to a URI, as HLS media
+      // playlists do not contain their own source URI, but one is needed for consistency in
+      // VHS.
+      playlist.uri = uri;
+    } // For HLS main playlists, even though certain attributes MUST be defined, the
+    // stream may still be played without them.
+    // For HLS media playlists, m3u8-parser does not attach an attributes object to the
+    // manifest.
+    //
+    // To avoid undefined reference errors through the project, and make the code easier
+    // to write/read, add an empty attributes object for these cases.
+
+    playlist.attributes = playlist.attributes || {};
+  };
+  /**
+   * Adds ID, resolvedUri, and attributes properties to each playlist of the main, where
+   * necessary. In addition, creates playlist IDs for each playlist and adds playlist ID to
+   * playlist references to the playlists array.
+   *
+   * @param {Object} main
+   *        The main playlist
+   */
+
+  const setupMediaPlaylists = main => {
+    let i = main.playlists.length;
+    while (i--) {
+      const playlist = main.playlists[i];
+      setupMediaPlaylist({
+        playlist,
+        id: createPlaylistID(i, playlist.uri)
+      });
+      playlist.resolvedUri = resolveUrl(main.uri, playlist.uri);
+      main.playlists[playlist.id] = playlist; // URI reference added for backwards compatibility
+
+      main.playlists[playlist.uri] = playlist; // Although the spec states an #EXT-X-STREAM-INF tag MUST have a BANDWIDTH attribute,
+      // the stream can be played without it. Although an attributes property may have been
+      // added to the playlist to prevent undefined references, issue a warning to fix the
+      // manifest.
+
+      if (!playlist.attributes.BANDWIDTH) {
+        log.warn('Invalid playlist STREAM-INF detected. Missing BANDWIDTH attribute.');
+      }
+    }
+  };
+  /**
+   * Adds resolvedUri properties to each media group.
+   *
+   * @param {Object} main
+   *        The main playlist
+   */
+
+  const resolveMediaGroupUris = main => {
+    forEachMediaGroup(main, properties => {
+      if (properties.uri) {
+        properties.resolvedUri = resolveUrl(main.uri, properties.uri);
+      }
+    });
+  };
+  /**
+   * Creates a main playlist wrapper to insert a sole media playlist into.
+   *
+   * @param {Object} media
+   *        Media playlist
+   * @param {string} uri
+   *        The media URI
+   *
+   * @return {Object}
+   *         main playlist
+   */
+
+  const mainForMedia = (media, uri) => {
+    const id = createPlaylistID(0, uri);
+    const main = {
+      mediaGroups: {
+        'AUDIO': {},
+        'VIDEO': {},
+        'CLOSED-CAPTIONS': {},
+        'SUBTITLES': {}
+      },
+      uri: window.location.href,
+      resolvedUri: window.location.href,
+      playlists: [{
+        uri,
+        id,
+        resolvedUri: uri,
+        // m3u8-parser does not attach an attributes property to media playlists so make
+        // sure that the property is attached to avoid undefined reference errors
+        attributes: {}
+      }]
+    }; // set up ID reference
+
+    main.playlists[id] = main.playlists[0]; // URI reference added for backwards compatibility
+
+    main.playlists[uri] = main.playlists[0];
+    return main;
+  };
+  /**
+   * Does an in-place update of the main manifest to add updated playlist URI references
+   * as well as other properties needed by VHS that aren't included by the parser.
+   *
+   * @param {Object} main
+   *        main manifest object
+   * @param {string} uri
+   *        The source URI
+   * @param {function} createGroupID
+   *        A function to determine how to create the groupID for mediaGroups
+   */
+
+  const addPropertiesToMain = (main, uri, createGroupID = groupID) => {
+    main.uri = uri;
+    for (let i = 0; i < main.playlists.length; i++) {
+      if (!main.playlists[i].uri) {
+        // Set up phony URIs for the playlists since playlists are referenced by their URIs
+        // throughout VHS, but some formats (e.g., DASH) don't have external URIs
+        // TODO: consider adding dummy URIs in mpd-parser
+        const phonyUri = `placeholder-uri-${i}`;
+        main.playlists[i].uri = phonyUri;
+      }
+    }
+    const audioOnlyMain = isAudioOnly(main);
+    forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+      // add a playlist array under properties
+      if (!properties.playlists || !properties.playlists.length) {
+        // If the manifest is audio only and this media group does not have a uri, check
+        // if the media group is located in the main list of playlists. If it is, don't add
+        // placeholder properties as it shouldn't be considered an alternate audio track.
+        if (audioOnlyMain && mediaType === 'AUDIO' && !properties.uri) {
+          for (let i = 0; i < main.playlists.length; i++) {
+            const p = main.playlists[i];
+            if (p.attributes && p.attributes.AUDIO && p.attributes.AUDIO === groupKey) {
+              return;
+            }
+          }
+        }
+        properties.playlists = [_extends$1({}, properties)];
+      }
+      properties.playlists.forEach(function (p, i) {
+        const groupId = createGroupID(mediaType, groupKey, labelKey, p);
+        const id = createPlaylistID(i, groupId);
+        if (p.uri) {
+          p.resolvedUri = p.resolvedUri || resolveUrl(main.uri, p.uri);
+        } else {
+          // DEPRECATED, this has been added to prevent a breaking change.
+          // previously we only ever had a single media group playlist, so
+          // we mark the first playlist uri without prepending the index as we used to
+          // ideally we would do all of the playlists the same way.
+          p.uri = i === 0 ? groupId : id; // don't resolve a placeholder uri to an absolute url, just use
+          // the placeholder again
+
+          p.resolvedUri = p.uri;
+        }
+        p.id = p.id || id; // add an empty attributes object, all playlists are
+        // expected to have this.
+
+        p.attributes = p.attributes || {}; // setup ID and URI references (URI for backwards compatibility)
+
+        main.playlists[p.id] = p;
+        main.playlists[p.uri] = p;
+      });
+    });
+    setupMediaPlaylists(main);
+    resolveMediaGroupUris(main);
+  };
+  class DateRangesStorage {
+    constructor() {
+      this.offset_ = null;
+      this.pendingDateRanges_ = new Map();
+      this.processedDateRanges_ = new Map();
+    }
+    setOffset(segments = []) {
+      // already set
+      if (this.offset_ !== null) {
+        return;
+      } // no segment to process
+
+      if (!segments.length) {
+        return;
+      }
+      const [firstSegment] = segments; // no program date time
+
+      if (firstSegment.programDateTime === undefined) {
+        return;
+      } // Set offset as ProgramDateTime for the very first segment of the very first playlist load:
+
+      this.offset_ = firstSegment.programDateTime / 1000;
+    }
+    setPendingDateRanges(dateRanges = []) {
+      if (!dateRanges.length) {
+        return;
+      }
+      const [dateRange] = dateRanges;
+      const startTime = dateRange.startDate.getTime();
+      this.trimProcessedDateRanges_(startTime);
+      this.pendingDateRanges_ = dateRanges.reduce((map, pendingDateRange) => {
+        map.set(pendingDateRange.id, pendingDateRange);
+        return map;
+      }, new Map());
+    }
+    processDateRange(dateRange) {
+      this.pendingDateRanges_.delete(dateRange.id);
+      this.processedDateRanges_.set(dateRange.id, dateRange);
+    }
+    getDateRangesToProcess() {
+      if (this.offset_ === null) {
+        return [];
+      }
+      const dateRangeClasses = {};
+      const dateRangesToProcess = [];
+      this.pendingDateRanges_.forEach((dateRange, id) => {
+        if (this.processedDateRanges_.has(id)) {
+          return;
+        }
+        dateRange.startTime = dateRange.startDate.getTime() / 1000 - this.offset_;
+        dateRange.processDateRange = () => this.processDateRange(dateRange);
+        dateRangesToProcess.push(dateRange);
+        if (!dateRange.class) {
+          return;
+        }
+        if (dateRangeClasses[dateRange.class]) {
+          const length = dateRangeClasses[dateRange.class].push(dateRange);
+          dateRange.classListIndex = length - 1;
+        } else {
+          dateRangeClasses[dateRange.class] = [dateRange];
+          dateRange.classListIndex = 0;
+        }
+      });
+      for (const dateRange of dateRangesToProcess) {
+        const classList = dateRangeClasses[dateRange.class] || [];
+        if (dateRange.endDate) {
+          dateRange.endTime = dateRange.endDate.getTime() / 1000 - this.offset_;
+        } else if (dateRange.endOnNext && classList[dateRange.classListIndex + 1]) {
+          dateRange.endTime = classList[dateRange.classListIndex + 1].startTime;
+        } else if (dateRange.duration) {
+          dateRange.endTime = dateRange.startTime + dateRange.duration;
+        } else if (dateRange.plannedDuration) {
+          dateRange.endTime = dateRange.startTime + dateRange.plannedDuration;
+        } else {
+          dateRange.endTime = dateRange.startTime;
+        }
+      }
+      return dateRangesToProcess;
+    }
+    trimProcessedDateRanges_(startTime) {
+      const copy = new Map(this.processedDateRanges_);
+      copy.forEach((dateRange, id) => {
+        if (dateRange.startDate.getTime() < startTime) {
+          this.processedDateRanges_.delete(id);
+        }
+      });
+    }
+  }
+  const {
+    EventTarget: EventTarget$1
+  } = videojs;
+  const addLLHLSQueryDirectives = (uri, media) => {
+    if (media.endList || !media.serverControl) {
+      return uri;
+    }
+    const parameters = {};
+    if (media.serverControl.canBlockReload) {
+      const {
+        preloadSegment
+      } = media; // next msn is a zero based value, length is not.
+
+      let nextMSN = media.mediaSequence + media.segments.length; // If preload segment has parts then it is likely
+      // that we are going to request a part of that preload segment.
+      // the logic below is used to determine that.
+
+      if (preloadSegment) {
+        const parts = preloadSegment.parts || []; // _HLS_part is a zero based index
+
+        const nextPart = getKnownPartCount(media) - 1; // if nextPart is > -1 and not equal to just the
+        // length of parts, then we know we had part preload hints
+        // and we need to add the _HLS_part= query
+
+        if (nextPart > -1 && nextPart !== parts.length - 1) {
+          // add existing parts to our preload hints
+          // eslint-disable-next-line
+          parameters._HLS_part = nextPart;
+        } // this if statement makes sure that we request the msn
+        // of the preload segment if:
+        // 1. the preload segment had parts (and was not yet a full segment)
+        //    but was added to our segments array
+        // 2. the preload segment had preload hints for parts that are not in
+        //    the manifest yet.
+        // in all other cases we want the segment after the preload segment
+        // which will be given by using media.segments.length because it is 1 based
+        // rather than 0 based.
+
+        if (nextPart > -1 || parts.length) {
+          nextMSN--;
+        }
+      } // add _HLS_msn= in front of any _HLS_part query
+      // eslint-disable-next-line
+
+      parameters._HLS_msn = nextMSN;
+    }
+    if (media.serverControl && media.serverControl.canSkipUntil) {
+      // add _HLS_skip= infront of all other queries.
+      // eslint-disable-next-line
+      parameters._HLS_skip = media.serverControl.canSkipDateranges ? 'v2' : 'YES';
+    }
+    if (Object.keys(parameters).length) {
+      const parsedUri = new window.URL(uri);
+      ['_HLS_skip', '_HLS_msn', '_HLS_part'].forEach(function (name) {
+        if (!parameters.hasOwnProperty(name)) {
+          return;
+        }
+        parsedUri.searchParams.set(name, parameters[name]);
+      });
+      uri = parsedUri.toString();
+    }
+    return uri;
+  };
+  /**
+   * Returns a new segment object with properties and
+   * the parts array merged.
+   *
+   * @param {Object} a the old segment
+   * @param {Object} b the new segment
+   *
+   * @return {Object} the merged segment
+   */
+
+  const updateSegment = (a, b) => {
+    if (!a) {
+      return b;
+    }
+    const result = merge(a, b); // if only the old segment has preload hints
+    // and the new one does not, remove preload hints.
+
+    if (a.preloadHints && !b.preloadHints) {
+      delete result.preloadHints;
+    } // if only the old segment has parts
+    // then the parts are no longer valid
+
+    if (a.parts && !b.parts) {
+      delete result.parts; // if both segments have parts
+      // copy part propeties from the old segment
+      // to the new one.
+    } else if (a.parts && b.parts) {
+      for (let i = 0; i < b.parts.length; i++) {
+        if (a.parts && a.parts[i]) {
+          result.parts[i] = merge(a.parts[i], b.parts[i]);
+        }
+      }
+    } // set skipped to false for segments that have
+    // have had information merged from the old segment.
+
+    if (!a.skipped && b.skipped) {
+      result.skipped = false;
+    } // set preload to false for segments that have
+    // had information added in the new segment.
+
+    if (a.preload && !b.preload) {
+      result.preload = false;
+    }
+    return result;
+  };
+  /**
+   * Returns a new array of segments that is the result of merging
+   * properties from an older list of segments onto an updated
+   * list. No properties on the updated playlist will be ovewritten.
+   *
+   * @param {Array} original the outdated list of segments
+   * @param {Array} update the updated list of segments
+   * @param {number=} offset the index of the first update
+   * segment in the original segment list. For non-live playlists,
+   * this should always be zero and does not need to be
+   * specified. For live playlists, it should be the difference
+   * between the media sequence numbers in the original and updated
+   * playlists.
+   * @return {Array} a list of merged segment objects
+   */
+
+  const updateSegments = (original, update, offset) => {
+    const oldSegments = original.slice();
+    const newSegments = update.slice();
+    offset = offset || 0;
+    const result = [];
+    let currentMap;
+    for (let newIndex = 0; newIndex < newSegments.length; newIndex++) {
+      const oldSegment = oldSegments[newIndex + offset];
+      const newSegment = newSegments[newIndex];
+      if (oldSegment) {
+        currentMap = oldSegment.map || currentMap;
+        result.push(updateSegment(oldSegment, newSegment));
+      } else {
+        // carry over map to new segment if it is missing
+        if (currentMap && !newSegment.map) {
+          newSegment.map = currentMap;
+        }
+        result.push(newSegment);
+      }
+    }
+    return result;
+  };
+  const resolveSegmentUris = (segment, baseUri) => {
+    // preloadSegment will not have a uri at all
+    // as the segment isn't actually in the manifest yet, only parts
+    if (!segment.resolvedUri && segment.uri) {
+      segment.resolvedUri = resolveUrl(baseUri, segment.uri);
+    }
+    if (segment.key && !segment.key.resolvedUri) {
+      segment.key.resolvedUri = resolveUrl(baseUri, segment.key.uri);
+    }
+    if (segment.map && !segment.map.resolvedUri) {
+      segment.map.resolvedUri = resolveUrl(baseUri, segment.map.uri);
+    }
+    if (segment.map && segment.map.key && !segment.map.key.resolvedUri) {
+      segment.map.key.resolvedUri = resolveUrl(baseUri, segment.map.key.uri);
+    }
+    if (segment.parts && segment.parts.length) {
+      segment.parts.forEach(p => {
+        if (p.resolvedUri) {
+          return;
+        }
+        p.resolvedUri = resolveUrl(baseUri, p.uri);
+      });
+    }
+    if (segment.preloadHints && segment.preloadHints.length) {
+      segment.preloadHints.forEach(p => {
+        if (p.resolvedUri) {
+          return;
+        }
+        p.resolvedUri = resolveUrl(baseUri, p.uri);
+      });
+    }
+  };
+  const getAllSegments = function (media) {
+    const segments = media.segments || [];
+    const preloadSegment = media.preloadSegment; // a preloadSegment with only preloadHints is not currently
+    // a usable segment, only include a preloadSegment that has
+    // parts.
+
+    if (preloadSegment && preloadSegment.parts && preloadSegment.parts.length) {
+      // if preloadHints has a MAP that means that the
+      // init segment is going to change. We cannot use any of the parts
+      // from this preload segment.
+      if (preloadSegment.preloadHints) {
+        for (let i = 0; i < preloadSegment.preloadHints.length; i++) {
+          if (preloadSegment.preloadHints[i].type === 'MAP') {
+            return segments;
+          }
+        }
+      } // set the duration for our preload segment to target duration.
+
+      preloadSegment.duration = media.targetDuration;
+      preloadSegment.preload = true;
+      segments.push(preloadSegment);
+    }
+    return segments;
+  }; // consider the playlist unchanged if the playlist object is the same or
+  // the number of segments is equal, the media sequence number is unchanged,
+  // and this playlist hasn't become the end of the playlist
+
+  const isPlaylistUnchanged = (a, b) => a === b || a.segments && b.segments && a.segments.length === b.segments.length && a.endList === b.endList && a.mediaSequence === b.mediaSequence && a.preloadSegment === b.preloadSegment;
+  /**
+    * Returns a new main playlist that is the result of merging an
+    * updated media playlist into the original version. If the
+    * updated media playlist does not match any of the playlist
+    * entries in the original main playlist, null is returned.
+    *
+    * @param {Object} main a parsed main M3U8 object
+    * @param {Object} media a parsed media M3U8 object
+    * @return {Object} a new object that represents the original
+    * main playlist with the updated media playlist merged in, or
+    * null if the merge produced no change.
+    */
+
+  const updateMain$1 = (main, newMedia, unchangedCheck = isPlaylistUnchanged) => {
+    const result = merge(main, {});
+    const oldMedia = result.playlists[newMedia.id];
+    if (!oldMedia) {
+      return null;
+    }
+    if (unchangedCheck(oldMedia, newMedia)) {
+      return null;
+    }
+    newMedia.segments = getAllSegments(newMedia);
+    const mergedPlaylist = merge(oldMedia, newMedia); // always use the new media's preload segment
+
+    if (mergedPlaylist.preloadSegment && !newMedia.preloadSegment) {
+      delete mergedPlaylist.preloadSegment;
+    } // if the update could overlap existing segment information, merge the two segment lists
+
+    if (oldMedia.segments) {
+      if (newMedia.skip) {
+        newMedia.segments = newMedia.segments || []; // add back in objects for skipped segments, so that we merge
+        // old properties into the new segments
+
+        for (let i = 0; i < newMedia.skip.skippedSegments; i++) {
+          newMedia.segments.unshift({
+            skipped: true
+          });
+        }
+      }
+      mergedPlaylist.segments = updateSegments(oldMedia.segments, newMedia.segments, newMedia.mediaSequence - oldMedia.mediaSequence);
+    } // resolve any segment URIs to prevent us from having to do it later
+
+    mergedPlaylist.segments.forEach(segment => {
+      resolveSegmentUris(segment, mergedPlaylist.resolvedUri);
+    }); // TODO Right now in the playlists array there are two references to each playlist, one
+    // that is referenced by index, and one by URI. The index reference may no longer be
+    // necessary.
+
+    for (let i = 0; i < result.playlists.length; i++) {
+      if (result.playlists[i].id === newMedia.id) {
+        result.playlists[i] = mergedPlaylist;
+      }
+    }
+    result.playlists[newMedia.id] = mergedPlaylist; // URI reference added for backwards compatibility
+
+    result.playlists[newMedia.uri] = mergedPlaylist; // update media group playlist references.
+
+    forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+      if (!properties.playlists) {
+        return;
+      }
+      for (let i = 0; i < properties.playlists.length; i++) {
+        if (newMedia.id === properties.playlists[i].id) {
+          properties.playlists[i] = mergedPlaylist;
+        }
+      }
+    });
+    return result;
+  };
+  /**
+   * Calculates the time to wait before refreshing a live playlist
+   *
+   * @param {Object} media
+   *        The current media
+   * @param {boolean} update
+   *        True if there were any updates from the last refresh, false otherwise
+   * @return {number}
+   *         The time in ms to wait before refreshing the live playlist
+   */
+
+  const refreshDelay = (media, update) => {
+    const segments = media.segments || [];
+    const lastSegment = segments[segments.length - 1];
+    const lastPart = lastSegment && lastSegment.parts && lastSegment.parts[lastSegment.parts.length - 1];
+    const lastDuration = lastPart && lastPart.duration || lastSegment && lastSegment.duration;
+    if (update && lastDuration) {
+      return lastDuration * 1000;
+    } // if the playlist is unchanged since the last reload or last segment duration
+    // cannot be determined, try again after half the target duration
+
+    return (media.partTargetDuration || media.targetDuration || 10) * 500;
+  };
+  /**
+   * Load a playlist from a remote location
+   *
+   * @class PlaylistLoader
+   * @extends Stream
+   * @param {string|Object} src url or object of manifest
+   * @param {boolean} withCredentials the withCredentials xhr option
+   * @class
+   */
+
+  class PlaylistLoader extends EventTarget$1 {
+    constructor(src, vhs, options = {}) {
+      super();
+      if (!src) {
+        throw new Error('A non-empty playlist URL or object is required');
+      }
+      this.logger_ = logger('PlaylistLoader');
+      const {
+        withCredentials = false
+      } = options;
+      this.src = src;
+      this.vhs_ = vhs;
+      this.withCredentials = withCredentials;
+      this.addDateRangesToTextTrack_ = options.addDateRangesToTextTrack;
+      const vhsOptions = vhs.options_;
+      this.customTagParsers = vhsOptions && vhsOptions.customTagParsers || [];
+      this.customTagMappers = vhsOptions && vhsOptions.customTagMappers || [];
+      this.llhls = vhsOptions && vhsOptions.llhls;
+      this.dateRangesStorage_ = new DateRangesStorage(); // initialize the loader state
+
+      this.state = 'HAVE_NOTHING'; // live playlist staleness timeout
+
+      this.handleMediaupdatetimeout_ = this.handleMediaupdatetimeout_.bind(this);
+      this.on('mediaupdatetimeout', this.handleMediaupdatetimeout_);
+      this.on('loadedplaylist', this.handleLoadedPlaylist_.bind(this));
+    }
+    handleLoadedPlaylist_() {
+      const mediaPlaylist = this.media();
+      if (!mediaPlaylist) {
+        return;
+      }
+      this.dateRangesStorage_.setOffset(mediaPlaylist.segments);
+      this.dateRangesStorage_.setPendingDateRanges(mediaPlaylist.dateRanges);
+      const availableDateRanges = this.dateRangesStorage_.getDateRangesToProcess();
+      if (!availableDateRanges.length || !this.addDateRangesToTextTrack_) {
+        return;
+      }
+      this.addDateRangesToTextTrack_(availableDateRanges);
+    }
+    handleMediaupdatetimeout_() {
+      if (this.state !== 'HAVE_METADATA') {
+        // only refresh the media playlist if no other activity is going on
+        return;
+      }
+      const media = this.media();
+      let uri = resolveUrl(this.main.uri, media.uri);
+      if (this.llhls) {
+        uri = addLLHLSQueryDirectives(uri, media);
+      }
+      this.state = 'HAVE_CURRENT_METADATA';
+      this.request = this.vhs_.xhr({
+        uri,
+        withCredentials: this.withCredentials,
+        requestType: 'hls-playlist'
+      }, (error, req) => {
+        // disposed
+        if (!this.request) {
+          return;
+        }
+        if (error) {
+          return this.playlistRequestError(this.request, this.media(), 'HAVE_METADATA');
+        }
+        this.haveMetadata({
+          playlistString: this.request.responseText,
+          url: this.media().uri,
+          id: this.media().id
+        });
+      });
+    }
+    playlistRequestError(xhr, playlist, startingState) {
+      const {
+        uri,
+        id
+      } = playlist; // any in-flight request is now finished
+
+      this.request = null;
+      if (startingState) {
+        this.state = startingState;
+      }
+      this.error = {
+        playlist: this.main.playlists[id],
+        status: xhr.status,
+        message: `HLS playlist request error at URL: ${uri}.`,
+        responseText: xhr.responseText,
+        code: xhr.status >= 500 ? 4 : 2,
+        metadata: {
+          errorType: videojs.Error.HlsPlaylistRequestError
+        }
+      };
+      this.trigger('error');
+    }
+    parseManifest_({
+      url,
+      manifestString
+    }) {
+      return parseManifest({
+        onwarn: ({
+          message
+        }) => this.logger_(`m3u8-parser warn for ${url}: ${message}`),
+        oninfo: ({
+          message
+        }) => this.logger_(`m3u8-parser info for ${url}: ${message}`),
+        manifestString,
+        customTagParsers: this.customTagParsers,
+        customTagMappers: this.customTagMappers,
+        llhls: this.llhls
+      });
+    }
+    /**
+     * Update the playlist loader's state in response to a new or updated playlist.
+     *
+     * @param {string} [playlistString]
+     *        Playlist string (if playlistObject is not provided)
+     * @param {Object} [playlistObject]
+     *        Playlist object (if playlistString is not provided)
+     * @param {string} url
+     *        URL of playlist
+     * @param {string} id
+     *        ID to use for playlist
+     */
+
+    haveMetadata({
+      playlistString,
+      playlistObject,
+      url,
+      id
+    }) {
+      // any in-flight request is now finished
+      this.request = null;
+      this.state = 'HAVE_METADATA';
+      const playlist = playlistObject || this.parseManifest_({
+        url,
+        manifestString: playlistString
+      });
+      playlist.lastRequest = Date.now();
+      setupMediaPlaylist({
+        playlist,
+        uri: url,
+        id
+      }); // merge this playlist into the main manifest
+
+      const update = updateMain$1(this.main, playlist);
+      this.targetDuration = playlist.partTargetDuration || playlist.targetDuration;
+      this.pendingMedia_ = null;
+      if (update) {
+        this.main = update;
+        this.media_ = this.main.playlists[id];
+      } else {
+        this.trigger('playlistunchanged');
+      }
+      this.updateMediaUpdateTimeout_(refreshDelay(this.media(), !!update));
+      this.trigger('loadedplaylist');
+    }
+    /**
+      * Abort any outstanding work and clean up.
+      */
+
+    dispose() {
+      this.trigger('dispose');
+      this.stopRequest();
+      window.clearTimeout(this.mediaUpdateTimeout);
+      window.clearTimeout(this.finalRenditionTimeout);
+      this.dateRangesStorage_ = new DateRangesStorage();
+      this.off();
+    }
+    stopRequest() {
+      if (this.request) {
+        const oldRequest = this.request;
+        this.request = null;
+        oldRequest.onreadystatechange = null;
+        oldRequest.abort();
+      }
+    }
+    /**
+      * When called without any arguments, returns the currently
+      * active media playlist. When called with a single argument,
+      * triggers the playlist loader to asynchronously switch to the
+      * specified media playlist. Calling this method while the
+      * loader is in the HAVE_NOTHING causes an error to be emitted
+      * but otherwise has no effect.
+      *
+      * @param {Object=} playlist the parsed media playlist
+      * object to switch to
+      * @param {boolean=} shouldDelay whether we should delay the request by half target duration
+      *
+      * @return {Playlist} the current loaded media
+      */
+
+    media(playlist, shouldDelay) {
+      // getter
+      if (!playlist) {
+        return this.media_;
+      } // setter
+
+      if (this.state === 'HAVE_NOTHING') {
+        throw new Error('Cannot switch media playlist from ' + this.state);
+      } // find the playlist object if the target playlist has been
+      // specified by URI
+
+      if (typeof playlist === 'string') {
+        if (!this.main.playlists[playlist]) {
+          throw new Error('Unknown playlist URI: ' + playlist);
+        }
+        playlist = this.main.playlists[playlist];
+      }
+      window.clearTimeout(this.finalRenditionTimeout);
+      if (shouldDelay) {
+        const delay = (playlist.partTargetDuration || playlist.targetDuration) / 2 * 1000 || 5 * 1000;
+        this.finalRenditionTimeout = window.setTimeout(this.media.bind(this, playlist, false), delay);
+        return;
+      }
+      const startingState = this.state;
+      const mediaChange = !this.media_ || playlist.id !== this.media_.id;
+      const mainPlaylistRef = this.main.playlists[playlist.id]; // switch to fully loaded playlists immediately
+
+      if (mainPlaylistRef && mainPlaylistRef.endList ||
+      // handle the case of a playlist object (e.g., if using vhs-json with a resolved
+      // media playlist or, for the case of demuxed audio, a resolved audio media group)
+      playlist.endList && playlist.segments.length) {
+        // abort outstanding playlist requests
+        if (this.request) {
+          this.request.onreadystatechange = null;
+          this.request.abort();
+          this.request = null;
+        }
+        this.state = 'HAVE_METADATA';
+        this.media_ = playlist; // trigger media change if the active media has been updated
+
+        if (mediaChange) {
+          this.trigger('mediachanging');
+          if (startingState === 'HAVE_MAIN_MANIFEST') {
+            // The initial playlist was a main manifest, and the first media selected was
+            // also provided (in the form of a resolved playlist object) as part of the
+            // source object (rather than just a URL). Therefore, since the media playlist
+            // doesn't need to be requested, loadedmetadata won't trigger as part of the
+            // normal flow, and needs an explicit trigger here.
+            this.trigger('loadedmetadata');
+          } else {
+            this.trigger('mediachange');
+          }
+        }
+        return;
+      } // We update/set the timeout here so that live playlists
+      // that are not a media change will "start" the loader as expected.
+      // We expect that this function will start the media update timeout
+      // cycle again. This also prevents a playlist switch failure from
+      // causing us to stall during live.
+
+      this.updateMediaUpdateTimeout_(refreshDelay(playlist, true)); // switching to the active playlist is a no-op
+
+      if (!mediaChange) {
+        return;
+      }
+      this.state = 'SWITCHING_MEDIA'; // there is already an outstanding playlist request
+
+      if (this.request) {
+        if (playlist.resolvedUri === this.request.url) {
+          // requesting to switch to the same playlist multiple times
+          // has no effect after the first
+          return;
+        }
+        this.request.onreadystatechange = null;
+        this.request.abort();
+        this.request = null;
+      } // request the new playlist
+
+      if (this.media_) {
+        this.trigger('mediachanging');
+      }
+      this.pendingMedia_ = playlist;
+      this.request = this.vhs_.xhr({
+        uri: playlist.resolvedUri,
+        withCredentials: this.withCredentials,
+        requestType: 'hls-playlist'
+      }, (error, req) => {
+        // disposed
+        if (!this.request) {
+          return;
+        }
+        playlist.lastRequest = Date.now();
+        playlist.resolvedUri = resolveManifestRedirect(playlist.resolvedUri, req);
+        if (error) {
+          return this.playlistRequestError(this.request, playlist, startingState);
+        }
+        this.haveMetadata({
+          playlistString: req.responseText,
+          url: playlist.uri,
+          id: playlist.id
+        }); // fire loadedmetadata the first time a media playlist is loaded
+
+        if (startingState === 'HAVE_MAIN_MANIFEST') {
+          this.trigger('loadedmetadata');
+        } else {
+          this.trigger('mediachange');
+        }
+      });
+    }
+    /**
+     * pause loading of the playlist
+     */
+
+    pause() {
+      if (this.mediaUpdateTimeout) {
+        window.clearTimeout(this.mediaUpdateTimeout);
+        this.mediaUpdateTimeout = null;
+      }
+      this.stopRequest();
+      if (this.state === 'HAVE_NOTHING') {
+        // If we pause the loader before any data has been retrieved, its as if we never
+        // started, so reset to an unstarted state.
+        this.started = false;
+      } // Need to restore state now that no activity is happening
+
+      if (this.state === 'SWITCHING_MEDIA') {
+        // if the loader was in the process of switching media, it should either return to
+        // HAVE_MAIN_MANIFEST or HAVE_METADATA depending on if the loader has loaded a media
+        // playlist yet. This is determined by the existence of loader.media_
+        if (this.media_) {
+          this.state = 'HAVE_METADATA';
+        } else {
+          this.state = 'HAVE_MAIN_MANIFEST';
+        }
+      } else if (this.state === 'HAVE_CURRENT_METADATA') {
+        this.state = 'HAVE_METADATA';
+      }
+    }
+    /**
+     * start loading of the playlist
+     */
+
+    load(shouldDelay) {
+      if (this.mediaUpdateTimeout) {
+        window.clearTimeout(this.mediaUpdateTimeout);
+        this.mediaUpdateTimeout = null;
+      }
+      const media = this.media();
+      if (shouldDelay) {
+        const delay = media ? (media.partTargetDuration || media.targetDuration) / 2 * 1000 : 5 * 1000;
+        this.mediaUpdateTimeout = window.setTimeout(() => {
+          this.mediaUpdateTimeout = null;
+          this.load();
+        }, delay);
+        return;
+      }
+      if (!this.started) {
+        this.start();
+        return;
+      }
+      if (media && !media.endList) {
+        this.trigger('mediaupdatetimeout');
+      } else {
+        this.trigger('loadedplaylist');
+      }
+    }
+    updateMediaUpdateTimeout_(delay) {
+      if (this.mediaUpdateTimeout) {
+        window.clearTimeout(this.mediaUpdateTimeout);
+        this.mediaUpdateTimeout = null;
+      } // we only have use mediaupdatetimeout for live playlists.
+
+      if (!this.media() || this.media().endList) {
+        return;
+      }
+      this.mediaUpdateTimeout = window.setTimeout(() => {
+        this.mediaUpdateTimeout = null;
+        this.trigger('mediaupdatetimeout');
+        this.updateMediaUpdateTimeout_(delay);
+      }, delay);
+    }
+    /**
+     * start loading of the playlist
+     */
+
+    start() {
+      this.started = true;
+      if (typeof this.src === 'object') {
+        // in the case of an entirely constructed manifest object (meaning there's no actual
+        // manifest on a server), default the uri to the page's href
+        if (!this.src.uri) {
+          this.src.uri = window.location.href;
+        } // resolvedUri is added on internally after the initial request. Since there's no
+        // request for pre-resolved manifests, add on resolvedUri here.
+
+        this.src.resolvedUri = this.src.uri; // Since a manifest object was passed in as the source (instead of a URL), the first
+        // request can be skipped (since the top level of the manifest, at a minimum, is
+        // already available as a parsed manifest object). However, if the manifest object
+        // represents a main playlist, some media playlists may need to be resolved before
+        // the starting segment list is available. Therefore, go directly to setup of the
+        // initial playlist, and let the normal flow continue from there.
+        //
+        // Note that the call to setup is asynchronous, as other sections of VHS may assume
+        // that the first request is asynchronous.
+
+        setTimeout(() => {
+          this.setupInitialPlaylist(this.src);
+        }, 0);
+        return;
+      } // request the specified URL
+
+      this.request = this.vhs_.xhr({
+        uri: this.src,
+        withCredentials: this.withCredentials,
+        requestType: 'hls-playlist'
+      }, (error, req) => {
+        // disposed
+        if (!this.request) {
+          return;
+        } // clear the loader's request reference
+
+        this.request = null;
+        if (error) {
+          this.error = {
+            status: req.status,
+            message: `HLS playlist request error at URL: ${this.src}.`,
+            responseText: req.responseText,
+            // MEDIA_ERR_NETWORK
+            code: 2,
+            metadata: {
+              errorType: videojs.Error.HlsPlaylistRequestError
+            }
+          };
+          if (this.state === 'HAVE_NOTHING') {
+            this.started = false;
+          }
+          return this.trigger('error');
+        }
+        this.src = resolveManifestRedirect(this.src, req);
+        const manifest = this.parseManifest_({
+          manifestString: req.responseText,
+          url: this.src
+        });
+        this.setupInitialPlaylist(manifest);
+      });
+    }
+    srcUri() {
+      return typeof this.src === 'string' ? this.src : this.src.uri;
+    }
+    /**
+     * Given a manifest object that's either a main or media playlist, trigger the proper
+     * events and set the state of the playlist loader.
+     *
+     * If the manifest object represents a main playlist, `loadedplaylist` will be
+     * triggered to allow listeners to select a playlist. If none is selected, the loader
+     * will default to the first one in the playlists array.
+     *
+     * If the manifest object represents a media playlist, `loadedplaylist` will be
+     * triggered followed by `loadedmetadata`, as the only available playlist is loaded.
+     *
+     * In the case of a media playlist, a main playlist object wrapper with one playlist
+     * will be created so that all logic can handle playlists in the same fashion (as an
+     * assumed manifest object schema).
+     *
+     * @param {Object} manifest
+     *        The parsed manifest object
+     */
+
+    setupInitialPlaylist(manifest) {
+      this.state = 'HAVE_MAIN_MANIFEST';
+      if (manifest.playlists) {
+        this.main = manifest;
+        addPropertiesToMain(this.main, this.srcUri()); // If the initial main playlist has playlists wtih segments already resolved,
+        // then resolve URIs in advance, as they are usually done after a playlist request,
+        // which may not happen if the playlist is resolved.
+
+        manifest.playlists.forEach(playlist => {
+          playlist.segments = getAllSegments(playlist);
+          playlist.segments.forEach(segment => {
+            resolveSegmentUris(segment, playlist.resolvedUri);
+          });
+        });
+        this.trigger('loadedplaylist');
+        if (!this.request) {
+          // no media playlist was specifically selected so start
+          // from the first listed one
+          this.media(this.main.playlists[0]);
+        }
+        return;
+      } // In order to support media playlists passed in as vhs-json, the case where the uri
+      // is not provided as part of the manifest should be considered, and an appropriate
+      // default used.
+
+      const uri = this.srcUri() || window.location.href;
+      this.main = mainForMedia(manifest, uri);
+      this.haveMetadata({
+        playlistObject: manifest,
+        url: uri,
+        id: this.main.playlists[0].id
+      });
+      this.trigger('loadedmetadata');
+    }
+    /**
+     * Updates or deletes a preexisting pathway clone.
+     * Ensures that all playlists related to the old pathway clone are
+     * either updated or deleted.
+     *
+     * @param {Object} clone On update, the pathway clone object for the newly updated pathway clone.
+     *        On delete, the old pathway clone object to be deleted.
+     * @param {boolean} isUpdate True if the pathway is to be updated,
+     *        false if it is meant to be deleted.
+     */
+
+    updateOrDeleteClone(clone, isUpdate) {
+      const main = this.main;
+      const pathway = clone.ID;
+      let i = main.playlists.length; // Iterate backwards through the playlist so we can remove playlists if necessary.
+
+      while (i--) {
+        const p = main.playlists[i];
+        if (p.attributes['PATHWAY-ID'] === pathway) {
+          const oldPlaylistUri = p.resolvedUri;
+          const oldPlaylistId = p.id; // update the indexed playlist and add new playlists by ID and URI
+
+          if (isUpdate) {
+            const newPlaylistUri = this.createCloneURI_(p.resolvedUri, clone);
+            const newPlaylistId = createPlaylistID(pathway, newPlaylistUri);
+            const attributes = this.createCloneAttributes_(pathway, p.attributes);
+            const updatedPlaylist = this.createClonePlaylist_(p, newPlaylistId, clone, attributes);
+            main.playlists[i] = updatedPlaylist;
+            main.playlists[newPlaylistId] = updatedPlaylist;
+            main.playlists[newPlaylistUri] = updatedPlaylist;
+          } else {
+            // Remove the indexed playlist.
+            main.playlists.splice(i, 1);
+          } // Remove playlists by the old ID and URI.
+
+          delete main.playlists[oldPlaylistId];
+          delete main.playlists[oldPlaylistUri];
+        }
+      }
+      this.updateOrDeleteCloneMedia(clone, isUpdate);
+    }
+    /**
+     * Updates or deletes media data based on the pathway clone object.
+     * Due to the complexity of the media groups and playlists, in all cases
+     * we remove all of the old media groups and playlists.
+     * On updates, we then create new media groups and playlists based on the
+     * new pathway clone object.
+     *
+     * @param {Object} clone The pathway clone object for the newly updated pathway clone.
+     * @param {boolean} isUpdate True if the pathway is to be updated,
+     *        false if it is meant to be deleted.
+     */
+
+    updateOrDeleteCloneMedia(clone, isUpdate) {
+      const main = this.main;
+      const id = clone.ID;
+      ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+        if (!main.mediaGroups[mediaType] || !main.mediaGroups[mediaType][id]) {
+          return;
+        }
+        for (const groupKey in main.mediaGroups[mediaType]) {
+          // Remove all media playlists for the media group for this pathway clone.
+          if (groupKey === id) {
+            for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+              const oldMedia = main.mediaGroups[mediaType][groupKey][labelKey];
+              oldMedia.playlists.forEach((p, i) => {
+                const oldMediaPlaylist = main.playlists[p.id];
+                const oldPlaylistId = oldMediaPlaylist.id;
+                const oldPlaylistUri = oldMediaPlaylist.resolvedUri;
+                delete main.playlists[oldPlaylistId];
+                delete main.playlists[oldPlaylistUri];
+              });
+            } // Delete the old media group.
+
+            delete main.mediaGroups[mediaType][groupKey];
+          }
+        }
+      }); // Create the new media groups and playlists if there is an update.
+
+      if (isUpdate) {
+        this.createClonedMediaGroups_(clone);
+      }
+    }
+    /**
+     * Given a pathway clone object, clones all necessary playlists.
+     *
+     * @param {Object} clone The pathway clone object.
+     * @param {Object} basePlaylist The original playlist to clone from.
+     */
+
+    addClonePathway(clone, basePlaylist = {}) {
+      const main = this.main;
+      const index = main.playlists.length;
+      const uri = this.createCloneURI_(basePlaylist.resolvedUri, clone);
+      const playlistId = createPlaylistID(clone.ID, uri);
+      const attributes = this.createCloneAttributes_(clone.ID, basePlaylist.attributes);
+      const playlist = this.createClonePlaylist_(basePlaylist, playlistId, clone, attributes);
+      main.playlists[index] = playlist; // add playlist by ID and URI
+
+      main.playlists[playlistId] = playlist;
+      main.playlists[uri] = playlist;
+      this.createClonedMediaGroups_(clone);
+    }
+    /**
+     * Given a pathway clone object we create clones of all media.
+     * In this function, all necessary information and updated playlists
+     * are added to the `mediaGroup` object.
+     * Playlists are also added to the `playlists` array so the media groups
+     * will be properly linked.
+     *
+     * @param {Object} clone The pathway clone object.
+     */
+
+    createClonedMediaGroups_(clone) {
+      const id = clone.ID;
+      const baseID = clone['BASE-ID'];
+      const main = this.main;
+      ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+        // If the media type doesn't exist, or there is already a clone, skip
+        // to the next media type.
+        if (!main.mediaGroups[mediaType] || main.mediaGroups[mediaType][id]) {
+          return;
+        }
+        for (const groupKey in main.mediaGroups[mediaType]) {
+          if (groupKey === baseID) {
+            // Create the group.
+            main.mediaGroups[mediaType][id] = {};
+          } else {
+            // There is no need to iterate over label keys in this case.
+            continue;
+          }
+          for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+            const oldMedia = main.mediaGroups[mediaType][groupKey][labelKey];
+            main.mediaGroups[mediaType][id][labelKey] = _extends$1({}, oldMedia);
+            const newMedia = main.mediaGroups[mediaType][id][labelKey]; // update URIs on the media
+
+            const newUri = this.createCloneURI_(oldMedia.resolvedUri, clone);
+            newMedia.resolvedUri = newUri;
+            newMedia.uri = newUri; // Reset playlists in the new media group.
+
+            newMedia.playlists = []; // Create new playlists in the newly cloned media group.
+
+            oldMedia.playlists.forEach((p, i) => {
+              const oldMediaPlaylist = main.playlists[p.id];
+              const group = groupID(mediaType, id, labelKey);
+              const newPlaylistID = createPlaylistID(id, group); // Check to see if it already exists
+
+              if (oldMediaPlaylist && !main.playlists[newPlaylistID]) {
+                const newMediaPlaylist = this.createClonePlaylist_(oldMediaPlaylist, newPlaylistID, clone);
+                const newPlaylistUri = newMediaPlaylist.resolvedUri;
+                main.playlists[newPlaylistID] = newMediaPlaylist;
+                main.playlists[newPlaylistUri] = newMediaPlaylist;
+              }
+              newMedia.playlists[i] = this.createClonePlaylist_(p, newPlaylistID, clone);
+            });
+          }
+        }
+      });
+    }
+    /**
+     * Using the original playlist to be cloned, and the pathway clone object
+     * information, we create a new playlist.
+     *
+     * @param {Object} basePlaylist  The original playlist to be cloned from.
+     * @param {string} id The desired id of the newly cloned playlist.
+     * @param {Object} clone The pathway clone object.
+     * @param {Object} attributes An optional object to populate the `attributes` property in the playlist.
+     *
+     * @return {Object} The combined cloned playlist.
+     */
+
+    createClonePlaylist_(basePlaylist, id, clone, attributes) {
+      const uri = this.createCloneURI_(basePlaylist.resolvedUri, clone);
+      const newProps = {
+        resolvedUri: uri,
+        uri,
+        id
+      }; // Remove all segments from previous playlist in the clone.
+
+      if (basePlaylist.segments) {
+        newProps.segments = [];
+      }
+      if (attributes) {
+        newProps.attributes = attributes;
+      }
+      return merge(basePlaylist, newProps);
+    }
+    /**
+     * Generates an updated URI for a cloned pathway based on the original
+     * pathway's URI and the paramaters from the pathway clone object in the
+     * content steering server response.
+     *
+     * @param {string} baseUri URI to be updated in the cloned pathway.
+     * @param {Object} clone The pathway clone object.
+     *
+     * @return {string} The updated URI for the cloned pathway.
+     */
+
+    createCloneURI_(baseURI, clone) {
+      const uri = new URL(baseURI);
+      uri.hostname = clone['URI-REPLACEMENT'].HOST;
+      const params = clone['URI-REPLACEMENT'].PARAMS; // Add params to the cloned URL.
+
+      for (const key of Object.keys(params)) {
+        uri.searchParams.set(key, params[key]);
+      }
+      return uri.href;
+    }
+    /**
+     * Helper function to create the attributes needed for the new clone.
+     * This mainly adds the necessary media attributes.
+     *
+     * @param {string} id The pathway clone object ID.
+     * @param {Object} oldAttributes The old attributes to compare to.
+     * @return {Object} The new attributes to add to the playlist.
+     */
+
+    createCloneAttributes_(id, oldAttributes) {
+      const attributes = {
+        ['PATHWAY-ID']: id
+      };
+      ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+        if (oldAttributes[mediaType]) {
+          attributes[mediaType] = id;
+        }
+      });
+      return attributes;
+    }
+    /**
+     * Returns the key ID set from a playlist
+     *
+     * @param {playlist} playlist to fetch the key ID set from.
+     * @return a Set of 32 digit hex strings that represent the unique keyIds for that playlist.
+     */
+
+    getKeyIdSet(playlist) {
+      if (playlist.contentProtection) {
+        const keyIds = new Set();
+        for (const keysystem in playlist.contentProtection) {
+          const keyId = playlist.contentProtection[keysystem].attributes.keyId;
+          if (keyId) {
+            keyIds.add(keyId.toLowerCase());
+          }
+        }
+        return keyIds;
+      }
+    }
+  }
+
+  /**
+   * @file xhr.js
+   */
+
+  const callbackWrapper = function (request, error, response, callback) {
+    const reqResponse = request.responseType === 'arraybuffer' ? request.response : request.responseText;
+    if (!error && reqResponse) {
+      request.responseTime = Date.now();
+      request.roundTripTime = request.responseTime - request.requestTime;
+      request.bytesReceived = reqResponse.byteLength || reqResponse.length;
+      if (!request.bandwidth) {
+        request.bandwidth = Math.floor(request.bytesReceived / request.roundTripTime * 8 * 1000);
+      }
+    }
+    if (response.headers) {
+      request.responseHeaders = response.headers;
+    } // videojs.xhr now uses a specific code on the error
+    // object to signal that a request has timed out instead
+    // of setting a boolean on the request object
+
+    if (error && error.code === 'ETIMEDOUT') {
+      request.timedout = true;
+    } // videojs.xhr no longer considers status codes outside of 200 and 0
+    // (for file uris) to be errors, but the old XHR did, so emulate that
+    // behavior. Status 206 may be used in response to byterange requests.
+
+    if (!error && !request.aborted && response.statusCode !== 200 && response.statusCode !== 206 && response.statusCode !== 0) {
+      error = new Error('XHR Failed with a response of: ' + (request && (reqResponse || request.responseText)));
+    }
+    callback(error, request);
+  };
+  /**
+   * Iterates over the request hooks Set and calls them in order
+   *
+   * @param {Set} hooks the hook Set to iterate over
+   * @param {Object} options the request options to pass to the xhr wrapper
+   * @return the callback hook function return value, the modified or new options Object.
+   */
+
+  const callAllRequestHooks = (requestSet, options) => {
+    if (!requestSet || !requestSet.size) {
+      return;
+    }
+    let newOptions = options;
+    requestSet.forEach(requestCallback => {
+      newOptions = requestCallback(newOptions);
+    });
+    return newOptions;
+  };
+  /**
+   * Iterates over the response hooks Set and calls them in order.
+   *
+   * @param {Set} hooks the hook Set to iterate over
+   * @param {Object} request the xhr request object
+   * @param {Object} error the xhr error object
+   * @param {Object} response the xhr response object
+   */
+
+  const callAllResponseHooks = (responseSet, request, error, response) => {
+    if (!responseSet || !responseSet.size) {
+      return;
+    }
+    responseSet.forEach(responseCallback => {
+      responseCallback(request, error, response);
+    });
+  };
+  const xhrFactory = function () {
+    const xhr = function XhrFunction(options, callback) {
+      // Add a default timeout
+      options = merge({
+        timeout: 45e3
+      }, options); // Allow an optional user-specified function to modify the option
+      // object before we construct the xhr request
+      // TODO: Remove beforeRequest in the next major release.
+
+      const beforeRequest = XhrFunction.beforeRequest || videojs.Vhs.xhr.beforeRequest; // onRequest and onResponse hooks as a Set, at either the player or global level.
+      // TODO: new Set added here for beforeRequest alias. Remove this when beforeRequest is removed.
+
+      const _requestCallbackSet = XhrFunction._requestCallbackSet || videojs.Vhs.xhr._requestCallbackSet || new Set();
+      const _responseCallbackSet = XhrFunction._responseCallbackSet || videojs.Vhs.xhr._responseCallbackSet;
+      if (beforeRequest && typeof beforeRequest === 'function') {
+        videojs.log.warn('beforeRequest is deprecated, use onRequest instead.');
+        _requestCallbackSet.add(beforeRequest);
+      } // Use the standard videojs.xhr() method unless `videojs.Vhs.xhr` has been overriden
+      // TODO: switch back to videojs.Vhs.xhr.name === 'XhrFunction' when we drop IE11
+
+      const xhrMethod = videojs.Vhs.xhr.original === true ? videojs.xhr : videojs.Vhs.xhr; // call all registered onRequest hooks, assign new options.
+
+      const beforeRequestOptions = callAllRequestHooks(_requestCallbackSet, options); // Remove the beforeRequest function from the hooks set so stale beforeRequest functions are not called.
+
+      _requestCallbackSet.delete(beforeRequest); // xhrMethod will call XMLHttpRequest.open and XMLHttpRequest.send
+
+      const request = xhrMethod(beforeRequestOptions || options, function (error, response) {
+        // call all registered onResponse hooks
+        callAllResponseHooks(_responseCallbackSet, request, error, response);
+        return callbackWrapper(request, error, response, callback);
+      });
+      const originalAbort = request.abort;
+      request.abort = function () {
+        request.aborted = true;
+        return originalAbort.apply(request, arguments);
+      };
+      request.uri = options.uri;
+      request.requestTime = Date.now();
+      return request;
+    };
+    xhr.original = true;
+    return xhr;
+  };
+  /**
+   * Turns segment byterange into a string suitable for use in
+   * HTTP Range requests
+   *
+   * @param {Object} byterange - an object with two values defining the start and end
+   *                             of a byte-range
+   */
+
+  const byterangeStr = function (byterange) {
+    // `byterangeEnd` is one less than `offset + length` because the HTTP range
+    // header uses inclusive ranges
+    let byterangeEnd;
+    const byterangeStart = byterange.offset;
+    if (typeof byterange.offset === 'bigint' || typeof byterange.length === 'bigint') {
+      byterangeEnd = window.BigInt(byterange.offset) + window.BigInt(byterange.length) - window.BigInt(1);
+    } else {
+      byterangeEnd = byterange.offset + byterange.length - 1;
+    }
+    return 'bytes=' + byterangeStart + '-' + byterangeEnd;
+  };
+  /**
+   * Defines headers for use in the xhr request for a particular segment.
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   */
+
+  const segmentXhrHeaders = function (segment) {
+    const headers = {};
+    if (segment.byterange) {
+      headers.Range = byterangeStr(segment.byterange);
+    }
+    return headers;
+  };
+
+  /**
+   * @file bin-utils.js
+   */
+
+  /**
+   * convert a TimeRange to text
+   *
+   * @param {TimeRange} range the timerange to use for conversion
+   * @param {number} i the iterator on the range to convert
+   * @return {string} the range in string format
+   */
+
+  const textRange = function (range, i) {
+    return range.start(i) + '-' + range.end(i);
+  };
+  /**
+   * format a number as hex string
+   *
+   * @param {number} e The number
+   * @param {number} i the iterator
+   * @return {string} the hex formatted number as a string
+   */
+
+  const formatHexString = function (e, i) {
+    const value = e.toString(16);
+    return '00'.substring(0, 2 - value.length) + value + (i % 2 ? ' ' : '');
+  };
+  const formatAsciiString = function (e) {
+    if (e >= 0x20 && e < 0x7e) {
+      return String.fromCharCode(e);
+    }
+    return '.';
+  };
+  /**
+   * Creates an object for sending to a web worker modifying properties that are TypedArrays
+   * into a new object with seperated properties for the buffer, byteOffset, and byteLength.
+   *
+   * @param {Object} message
+   *        Object of properties and values to send to the web worker
+   * @return {Object}
+   *         Modified message with TypedArray values expanded
+   * @function createTransferableMessage
+   */
+
+  const createTransferableMessage = function (message) {
+    const transferable = {};
+    Object.keys(message).forEach(key => {
+      const value = message[key];
+      if (isArrayBufferView(value)) {
+        transferable[key] = {
+          bytes: value.buffer,
+          byteOffset: value.byteOffset,
+          byteLength: value.byteLength
+        };
+      } else {
+        transferable[key] = value;
+      }
+    });
+    return transferable;
+  };
+  /**
+   * Returns a unique string identifier for a media initialization
+   * segment.
+   *
+   * @param {Object} initSegment
+   *        the init segment object.
+   *
+   * @return {string} the generated init segment id
+   */
+
+  const initSegmentId = function (initSegment) {
+    const byterange = initSegment.byterange || {
+      length: Infinity,
+      offset: 0
+    };
+    return [byterange.length, byterange.offset, initSegment.resolvedUri].join(',');
+  };
+  /**
+   * Returns a unique string identifier for a media segment key.
+   *
+   * @param {Object} key the encryption key
+   * @return {string} the unique id for the media segment key.
+   */
+
+  const segmentKeyId = function (key) {
+    return key.resolvedUri;
+  };
+  /**
+   * utils to help dump binary data to the console
+   *
+   * @param {Array|TypedArray} data
+   *        data to dump to a string
+   *
+   * @return {string} the data as a hex string.
+   */
+
+  const hexDump = data => {
+    const bytes = Array.prototype.slice.call(data);
+    const step = 16;
+    let result = '';
+    let hex;
+    let ascii;
+    for (let j = 0; j < bytes.length / step; j++) {
+      hex = bytes.slice(j * step, j * step + step).map(formatHexString).join('');
+      ascii = bytes.slice(j * step, j * step + step).map(formatAsciiString).join('');
+      result += hex + ' ' + ascii + '\n';
+    }
+    return result;
+  };
+  const tagDump = ({
+    bytes
+  }) => hexDump(bytes);
+  const textRanges = ranges => {
+    let result = '';
+    let i;
+    for (i = 0; i < ranges.length; i++) {
+      result += textRange(ranges, i) + ' ';
+    }
+    return result;
+  };
+  var utils = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    createTransferableMessage: createTransferableMessage,
+    initSegmentId: initSegmentId,
+    segmentKeyId: segmentKeyId,
+    hexDump: hexDump,
+    tagDump: tagDump,
+    textRanges: textRanges
+  });
+
+  // TODO handle fmp4 case where the timing info is accurate and doesn't involve transmux
+  // 25% was arbitrarily chosen, and may need to be refined over time.
+
+  const SEGMENT_END_FUDGE_PERCENT = 0.25;
+  /**
+   * Converts a player time (any time that can be gotten/set from player.currentTime(),
+   * e.g., any time within player.seekable().start(0) to player.seekable().end(0)) to a
+   * program time (any time referencing the real world (e.g., EXT-X-PROGRAM-DATE-TIME)).
+   *
+   * The containing segment is required as the EXT-X-PROGRAM-DATE-TIME serves as an "anchor
+   * point" (a point where we have a mapping from program time to player time, with player
+   * time being the post transmux start of the segment).
+   *
+   * For more details, see [this doc](../../docs/program-time-from-player-time.md).
+   *
+   * @param {number} playerTime the player time
+   * @param {Object} segment the segment which contains the player time
+   * @return {Date} program time
+   */
+
+  const playerTimeToProgramTime = (playerTime, segment) => {
+    if (!segment.dateTimeObject) {
+      // Can't convert without an "anchor point" for the program time (i.e., a time that can
+      // be used to map the start of a segment with a real world time).
+      return null;
+    }
+    const transmuxerPrependedSeconds = segment.videoTimingInfo.transmuxerPrependedSeconds;
+    const transmuxedStart = segment.videoTimingInfo.transmuxedPresentationStart; // get the start of the content from before old content is prepended
+
+    const startOfSegment = transmuxedStart + transmuxerPrependedSeconds;
+    const offsetFromSegmentStart = playerTime - startOfSegment;
+    return new Date(segment.dateTimeObject.getTime() + offsetFromSegmentStart * 1000);
+  };
+  const originalSegmentVideoDuration = videoTimingInfo => {
+    return videoTimingInfo.transmuxedPresentationEnd - videoTimingInfo.transmuxedPresentationStart - videoTimingInfo.transmuxerPrependedSeconds;
+  };
+  /**
+   * Finds a segment that contains the time requested given as an ISO-8601 string. The
+   * returned segment might be an estimate or an accurate match.
+   *
+   * @param {string} programTime The ISO-8601 programTime to find a match for
+   * @param {Object} playlist A playlist object to search within
+   */
+
+  const findSegmentForProgramTime = (programTime, playlist) => {
+    // Assumptions:
+    //  - verifyProgramDateTimeTags has already been run
+    //  - live streams have been started
+    let dateTimeObject;
+    try {
+      dateTimeObject = new Date(programTime);
+    } catch (e) {
+      return null;
+    }
+    if (!playlist || !playlist.segments || playlist.segments.length === 0) {
+      return null;
+    }
+    let segment = playlist.segments[0];
+    if (dateTimeObject < new Date(segment.dateTimeObject)) {
+      // Requested time is before stream start.
+      return null;
+    }
+    for (let i = 0; i < playlist.segments.length - 1; i++) {
+      segment = playlist.segments[i];
+      const nextSegmentStart = new Date(playlist.segments[i + 1].dateTimeObject);
+      if (dateTimeObject < nextSegmentStart) {
+        break;
+      }
+    }
+    const lastSegment = playlist.segments[playlist.segments.length - 1];
+    const lastSegmentStart = lastSegment.dateTimeObject;
+    const lastSegmentDuration = lastSegment.videoTimingInfo ? originalSegmentVideoDuration(lastSegment.videoTimingInfo) : lastSegment.duration + lastSegment.duration * SEGMENT_END_FUDGE_PERCENT;
+    const lastSegmentEnd = new Date(lastSegmentStart.getTime() + lastSegmentDuration * 1000);
+    if (dateTimeObject > lastSegmentEnd) {
+      // Beyond the end of the stream, or our best guess of the end of the stream.
+      return null;
+    }
+    if (dateTimeObject > new Date(lastSegmentStart)) {
+      segment = lastSegment;
+    }
+    return {
+      segment,
+      estimatedStart: segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationStart : Playlist.duration(playlist, playlist.mediaSequence + playlist.segments.indexOf(segment)),
+      // Although, given that all segments have accurate date time objects, the segment
+      // selected should be accurate, unless the video has been transmuxed at some point
+      // (determined by the presence of the videoTimingInfo object), the segment's "player
+      // time" (the start time in the player) can't be considered accurate.
+      type: segment.videoTimingInfo ? 'accurate' : 'estimate'
+    };
+  };
+  /**
+   * Finds a segment that contains the given player time(in seconds).
+   *
+   * @param {number} time The player time to find a match for
+   * @param {Object} playlist A playlist object to search within
+   */
+
+  const findSegmentForPlayerTime = (time, playlist) => {
+    // Assumptions:
+    // - there will always be a segment.duration
+    // - we can start from zero
+    // - segments are in time order
+    if (!playlist || !playlist.segments || playlist.segments.length === 0) {
+      return null;
+    }
+    let segmentEnd = 0;
+    let segment;
+    for (let i = 0; i < playlist.segments.length; i++) {
+      segment = playlist.segments[i]; // videoTimingInfo is set after the segment is downloaded and transmuxed, and
+      // should contain the most accurate values we have for the segment's player times.
+      //
+      // Use the accurate transmuxedPresentationEnd value if it is available, otherwise fall
+      // back to an estimate based on the manifest derived (inaccurate) segment.duration, to
+      // calculate an end value.
+
+      segmentEnd = segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationEnd : segmentEnd + segment.duration;
+      if (time <= segmentEnd) {
+        break;
+      }
+    }
+    const lastSegment = playlist.segments[playlist.segments.length - 1];
+    if (lastSegment.videoTimingInfo && lastSegment.videoTimingInfo.transmuxedPresentationEnd < time) {
+      // The time requested is beyond the stream end.
+      return null;
+    }
+    if (time > segmentEnd) {
+      // The time is within or beyond the last segment.
+      //
+      // Check to see if the time is beyond a reasonable guess of the end of the stream.
+      if (time > segmentEnd + lastSegment.duration * SEGMENT_END_FUDGE_PERCENT) {
+        // Technically, because the duration value is only an estimate, the time may still
+        // exist in the last segment, however, there isn't enough information to make even
+        // a reasonable estimate.
+        return null;
+      }
+      segment = lastSegment;
+    }
+    return {
+      segment,
+      estimatedStart: segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationStart : segmentEnd - segment.duration,
+      // Because videoTimingInfo is only set after transmux, it is the only way to get
+      // accurate timing values.
+      type: segment.videoTimingInfo ? 'accurate' : 'estimate'
+    };
+  };
+  /**
+   * Gives the offset of the comparisonTimestamp from the programTime timestamp in seconds.
+   * If the offset returned is positive, the programTime occurs after the
+   * comparisonTimestamp.
+   * If the offset is negative, the programTime occurs before the comparisonTimestamp.
+   *
+   * @param {string} comparisonTimeStamp An ISO-8601 timestamp to compare against
+   * @param {string} programTime The programTime as an ISO-8601 string
+   * @return {number} offset
+   */
+
+  const getOffsetFromTimestamp = (comparisonTimeStamp, programTime) => {
+    let segmentDateTime;
+    let programDateTime;
+    try {
+      segmentDateTime = new Date(comparisonTimeStamp);
+      programDateTime = new Date(programTime);
+    } catch (e) {// TODO handle error
+    }
+    const segmentTimeEpoch = segmentDateTime.getTime();
+    const programTimeEpoch = programDateTime.getTime();
+    return (programTimeEpoch - segmentTimeEpoch) / 1000;
+  };
+  /**
+   * Checks that all segments in this playlist have programDateTime tags.
+   *
+   * @param {Object} playlist A playlist object
+   */
+
+  const verifyProgramDateTimeTags = playlist => {
+    if (!playlist.segments || playlist.segments.length === 0) {
+      return false;
+    }
+    for (let i = 0; i < playlist.segments.length; i++) {
+      const segment = playlist.segments[i];
+      if (!segment.dateTimeObject) {
+        return false;
+      }
+    }
+    return true;
+  };
+  /**
+   * Returns the programTime of the media given a playlist and a playerTime.
+   * The playlist must have programDateTime tags for a programDateTime tag to be returned.
+   * If the segments containing the time requested have not been buffered yet, an estimate
+   * may be returned to the callback.
+   *
+   * @param {Object} args
+   * @param {Object} args.playlist A playlist object to search within
+   * @param {number} time A playerTime in seconds
+   * @param {Function} callback(err, programTime)
+   * @return {string} err.message A detailed error message
+   * @return {Object} programTime
+   * @return {number} programTime.mediaSeconds The streamTime in seconds
+   * @return {string} programTime.programDateTime The programTime as an ISO-8601 String
+   */
+
+  const getProgramTime = ({
+    playlist,
+    time = undefined,
+    callback
+  }) => {
+    if (!callback) {
+      throw new Error('getProgramTime: callback must be provided');
+    }
+    if (!playlist || time === undefined) {
+      return callback({
+        message: 'getProgramTime: playlist and time must be provided'
+      });
+    }
+    const matchedSegment = findSegmentForPlayerTime(time, playlist);
+    if (!matchedSegment) {
+      return callback({
+        message: 'valid programTime was not found'
+      });
+    }
+    if (matchedSegment.type === 'estimate') {
+      return callback({
+        message: 'Accurate programTime could not be determined.' + ' Please seek to e.seekTime and try again',
+        seekTime: matchedSegment.estimatedStart
+      });
+    }
+    const programTimeObject = {
+      mediaSeconds: time
+    };
+    const programTime = playerTimeToProgramTime(time, matchedSegment.segment);
+    if (programTime) {
+      programTimeObject.programDateTime = programTime.toISOString();
+    }
+    return callback(null, programTimeObject);
+  };
+  /**
+   * Seeks in the player to a time that matches the given programTime ISO-8601 string.
+   *
+   * @param {Object} args
+   * @param {string} args.programTime A programTime to seek to as an ISO-8601 String
+   * @param {Object} args.playlist A playlist to look within
+   * @param {number} args.retryCount The number of times to try for an accurate seek. Default is 2.
+   * @param {Function} args.seekTo A method to perform a seek
+   * @param {boolean} args.pauseAfterSeek Whether to end in a paused state after seeking. Default is true.
+   * @param {Object} args.tech The tech to seek on
+   * @param {Function} args.callback(err, newTime) A callback to return the new time to
+   * @return {string} err.message A detailed error message
+   * @return {number} newTime The exact time that was seeked to in seconds
+   */
+
+  const seekToProgramTime = ({
+    programTime,
+    playlist,
+    retryCount = 2,
+    seekTo,
+    pauseAfterSeek = true,
+    tech,
+    callback
+  }) => {
+    if (!callback) {
+      throw new Error('seekToProgramTime: callback must be provided');
+    }
+    if (typeof programTime === 'undefined' || !playlist || !seekTo) {
+      return callback({
+        message: 'seekToProgramTime: programTime, seekTo and playlist must be provided'
+      });
+    }
+    if (!playlist.endList && !tech.hasStarted_) {
+      return callback({
+        message: 'player must be playing a live stream to start buffering'
+      });
+    }
+    if (!verifyProgramDateTimeTags(playlist)) {
+      return callback({
+        message: 'programDateTime tags must be provided in the manifest ' + playlist.resolvedUri
+      });
+    }
+    const matchedSegment = findSegmentForProgramTime(programTime, playlist); // no match
+
+    if (!matchedSegment) {
+      return callback({
+        message: `${programTime} was not found in the stream`
+      });
+    }
+    const segment = matchedSegment.segment;
+    const mediaOffset = getOffsetFromTimestamp(segment.dateTimeObject, programTime);
+    if (matchedSegment.type === 'estimate') {
+      // we've run out of retries
+      if (retryCount === 0) {
+        return callback({
+          message: `${programTime} is not buffered yet. Try again`
+        });
+      }
+      seekTo(matchedSegment.estimatedStart + mediaOffset);
+      tech.one('seeked', () => {
+        seekToProgramTime({
+          programTime,
+          playlist,
+          retryCount: retryCount - 1,
+          seekTo,
+          pauseAfterSeek,
+          tech,
+          callback
+        });
+      });
+      return;
+    } // Since the segment.start value is determined from the buffered end or ending time
+    // of the prior segment, the seekToTime doesn't need to account for any transmuxer
+    // modifications.
+
+    const seekToTime = segment.start + mediaOffset;
+    const seekedCallback = () => {
+      return callback(null, tech.currentTime());
+    }; // listen for seeked event
+
+    tech.one('seeked', seekedCallback); // pause before seeking as video.js will restore this state
+
+    if (pauseAfterSeek) {
+      tech.pause();
+    }
+    seekTo(seekToTime);
+  };
+
+  // which will only happen if the request is complete.
+
+  const callbackOnCompleted = (request, cb) => {
+    if (request.readyState === 4) {
+      return cb();
+    }
+    return;
+  };
+  const containerRequest = (uri, xhr, cb) => {
+    let bytes = [];
+    let id3Offset;
+    let finished = false;
+    const endRequestAndCallback = function (err, req, type, _bytes) {
+      req.abort();
+      finished = true;
+      return cb(err, req, type, _bytes);
+    };
+    const progressListener = function (error, request) {
+      if (finished) {
+        return;
+      }
+      if (error) {
+        return endRequestAndCallback(error, request, '', bytes);
+      } // grap the new part of content that was just downloaded
+
+      const newPart = request.responseText.substring(bytes && bytes.byteLength || 0, request.responseText.length); // add that onto bytes
+
+      bytes = concatTypedArrays(bytes, stringToBytes(newPart, true));
+      id3Offset = id3Offset || getId3Offset(bytes); // we need at least 10 bytes to determine a type
+      // or we need at least two bytes after an id3Offset
+
+      if (bytes.length < 10 || id3Offset && bytes.length < id3Offset + 2) {
+        return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+      }
+      const type = detectContainerForBytes(bytes); // if this looks like a ts segment but we don't have enough data
+      // to see the second sync byte, wait until we have enough data
+      // before declaring it ts
+
+      if (type === 'ts' && bytes.length < 188) {
+        return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+      } // this may be an unsynced ts segment
+      // wait for 376 bytes before detecting no container
+
+      if (!type && bytes.length < 376) {
+        return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+      }
+      return endRequestAndCallback(null, request, type, bytes);
+    };
+    const options = {
+      uri,
+      beforeSend(request) {
+        // this forces the browser to pass the bytes to us unprocessed
+        request.overrideMimeType('text/plain; charset=x-user-defined');
+        request.addEventListener('progress', function ({
+          total,
+          loaded
+        }) {
+          return callbackWrapper(request, null, {
+            statusCode: request.status
+          }, progressListener);
+        });
+      }
+    };
+    const request = xhr(options, function (error, response) {
+      return callbackWrapper(request, error, response, progressListener);
+    });
+    return request;
+  };
+  const {
+    EventTarget
+  } = videojs;
+  const dashPlaylistUnchanged = function (a, b) {
+    if (!isPlaylistUnchanged(a, b)) {
+      return false;
+    } // for dash the above check will often return true in scenarios where
+    // the playlist actually has changed because mediaSequence isn't a
+    // dash thing, and we often set it to 1. So if the playlists have the same amount
+    // of segments we return true.
+    // So for dash we need to make sure that the underlying segments are different.
+    // if sidx changed then the playlists are different.
+
+    if (a.sidx && b.sidx && (a.sidx.offset !== b.sidx.offset || a.sidx.length !== b.sidx.length)) {
+      return false;
+    } else if (!a.sidx && b.sidx || a.sidx && !b.sidx) {
+      return false;
+    } // one or the other does not have segments
+    // there was a change.
+
+    if (a.segments && !b.segments || !a.segments && b.segments) {
+      return false;
+    } // neither has segments nothing changed
+
+    if (!a.segments && !b.segments) {
+      return true;
+    } // check segments themselves
+
+    for (let i = 0; i < a.segments.length; i++) {
+      const aSegment = a.segments[i];
+      const bSegment = b.segments[i]; // if uris are different between segments there was a change
+
+      if (aSegment.uri !== bSegment.uri) {
+        return false;
+      } // neither segment has a byterange, there will be no byterange change.
+
+      if (!aSegment.byterange && !bSegment.byterange) {
+        continue;
+      }
+      const aByterange = aSegment.byterange;
+      const bByterange = bSegment.byterange; // if byterange only exists on one of the segments, there was a change.
+
+      if (aByterange && !bByterange || !aByterange && bByterange) {
+        return false;
+      } // if both segments have byterange with different offsets, there was a change.
+
+      if (aByterange.offset !== bByterange.offset || aByterange.length !== bByterange.length) {
+        return false;
+      }
+    } // if everything was the same with segments, this is the same playlist.
+
+    return true;
+  };
+  /**
+   * Use the representation IDs from the mpd object to create groupIDs, the NAME is set to mandatory representation
+   * ID in the parser. This allows for continuous playout across periods with the same representation IDs
+   * (continuous periods as defined in DASH-IF 3.2.12). This is assumed in the mpd-parser as well. If we want to support
+   * periods without continuous playback this function may need modification as well as the parser.
+   */
+
+  const dashGroupId = (type, group, label, playlist) => {
+    // If the manifest somehow does not have an ID (non-dash compliant), use the label.
+    const playlistId = playlist.attributes.NAME || label;
+    return `placeholder-uri-${type}-${group}-${playlistId}`;
+  };
+  /**
+   * Parses the main XML string and updates playlist URI references.
+   *
+   * @param {Object} config
+   *        Object of arguments
+   * @param {string} config.mainXml
+   *        The mpd XML
+   * @param {string} config.srcUrl
+   *        The mpd URL
+   * @param {Date} config.clientOffset
+   *         A time difference between server and client
+   * @param {Object} config.sidxMapping
+   *        SIDX mappings for moof/mdat URIs and byte ranges
+   * @return {Object}
+   *         The parsed mpd manifest object
+   */
+
+  const parseMainXml = ({
+    mainXml,
+    srcUrl,
+    clientOffset,
+    sidxMapping,
+    previousManifest
+  }) => {
+    const manifest = parse(mainXml, {
+      manifestUri: srcUrl,
+      clientOffset,
+      sidxMapping,
+      previousManifest
+    });
+    addPropertiesToMain(manifest, srcUrl, dashGroupId);
+    return manifest;
+  };
+  /**
+   * Removes any mediaGroup labels that no longer exist in the newMain
+   *
+   * @param {Object} update
+   *         The previous mpd object being updated
+   * @param {Object} newMain
+   *         The new mpd object
+   */
+
+  const removeOldMediaGroupLabels = (update, newMain) => {
+    forEachMediaGroup(update, (properties, type, group, label) => {
+      if (!(label in newMain.mediaGroups[type][group])) {
+        delete update.mediaGroups[type][group][label];
+      }
+    });
+  };
+  /**
+   * Returns a new main manifest that is the result of merging an updated main manifest
+   * into the original version.
+   *
+   * @param {Object} oldMain
+   *        The old parsed mpd object
+   * @param {Object} newMain
+   *        The updated parsed mpd object
+   * @return {Object}
+   *         A new object representing the original main manifest with the updated media
+   *         playlists merged in
+   */
+
+  const updateMain = (oldMain, newMain, sidxMapping) => {
+    let noChanges = true;
+    let update = merge(oldMain, {
+      // These are top level properties that can be updated
+      duration: newMain.duration,
+      minimumUpdatePeriod: newMain.minimumUpdatePeriod,
+      timelineStarts: newMain.timelineStarts
+    }); // First update the playlists in playlist list
+
+    for (let i = 0; i < newMain.playlists.length; i++) {
+      const playlist = newMain.playlists[i];
+      if (playlist.sidx) {
+        const sidxKey = generateSidxKey(playlist.sidx); // add sidx segments to the playlist if we have all the sidx info already
+
+        if (sidxMapping && sidxMapping[sidxKey] && sidxMapping[sidxKey].sidx) {
+          addSidxSegmentsToPlaylist$1(playlist, sidxMapping[sidxKey].sidx, playlist.sidx.resolvedUri);
+        }
+      }
+      const playlistUpdate = updateMain$1(update, playlist, dashPlaylistUnchanged);
+      if (playlistUpdate) {
+        update = playlistUpdate;
+        noChanges = false;
+      }
+    } // Then update media group playlists
+
+    forEachMediaGroup(newMain, (properties, type, group, label) => {
+      if (properties.playlists && properties.playlists.length) {
+        const id = properties.playlists[0].id;
+        const playlistUpdate = updateMain$1(update, properties.playlists[0], dashPlaylistUnchanged);
+        if (playlistUpdate) {
+          update = playlistUpdate; // add new mediaGroup label if it doesn't exist and assign the new mediaGroup.
+
+          if (!(label in update.mediaGroups[type][group])) {
+            update.mediaGroups[type][group][label] = properties;
+          } // update the playlist reference within media groups
+
+          update.mediaGroups[type][group][label].playlists[0] = update.playlists[id];
+          noChanges = false;
+        }
+      }
+    }); // remove mediaGroup labels and references that no longer exist in the newMain
+
+    removeOldMediaGroupLabels(update, newMain);
+    if (newMain.minimumUpdatePeriod !== oldMain.minimumUpdatePeriod) {
+      noChanges = false;
+    }
+    if (noChanges) {
+      return null;
+    }
+    return update;
+  }; // SIDX should be equivalent if the URI and byteranges of the SIDX match.
+  // If the SIDXs have maps, the two maps should match,
+  // both `a` and `b` missing SIDXs is considered matching.
+  // If `a` or `b` but not both have a map, they aren't matching.
+
+  const equivalentSidx = (a, b) => {
+    const neitherMap = Boolean(!a.map && !b.map);
+    const equivalentMap = neitherMap || Boolean(a.map && b.map && a.map.byterange.offset === b.map.byterange.offset && a.map.byterange.length === b.map.byterange.length);
+    return equivalentMap && a.uri === b.uri && a.byterange.offset === b.byterange.offset && a.byterange.length === b.byterange.length;
+  }; // exported for testing
+
+  const compareSidxEntry = (playlists, oldSidxMapping) => {
+    const newSidxMapping = {};
+    for (const id in playlists) {
+      const playlist = playlists[id];
+      const currentSidxInfo = playlist.sidx;
+      if (currentSidxInfo) {
+        const key = generateSidxKey(currentSidxInfo);
+        if (!oldSidxMapping[key]) {
+          break;
+        }
+        const savedSidxInfo = oldSidxMapping[key].sidxInfo;
+        if (equivalentSidx(savedSidxInfo, currentSidxInfo)) {
+          newSidxMapping[key] = oldSidxMapping[key];
+        }
+      }
+    }
+    return newSidxMapping;
+  };
+  /**
+   *  A function that filters out changed items as they need to be requested separately.
+   *
+   *  The method is exported for testing
+   *
+   *  @param {Object} main the parsed mpd XML returned via mpd-parser
+   *  @param {Object} oldSidxMapping the SIDX to compare against
+   */
+
+  const filterChangedSidxMappings = (main, oldSidxMapping) => {
+    const videoSidx = compareSidxEntry(main.playlists, oldSidxMapping);
+    let mediaGroupSidx = videoSidx;
+    forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+      if (properties.playlists && properties.playlists.length) {
+        const playlists = properties.playlists;
+        mediaGroupSidx = merge(mediaGroupSidx, compareSidxEntry(playlists, oldSidxMapping));
+      }
+    });
+    return mediaGroupSidx;
+  };
+  class DashPlaylistLoader extends EventTarget {
+    // DashPlaylistLoader must accept either a src url or a playlist because subsequent
+    // playlist loader setups from media groups will expect to be able to pass a playlist
+    // (since there aren't external URLs to media playlists with DASH)
+    constructor(srcUrlOrPlaylist, vhs, options = {}, mainPlaylistLoader) {
+      super();
+      this.mainPlaylistLoader_ = mainPlaylistLoader || this;
+      if (!mainPlaylistLoader) {
+        this.isMain_ = true;
+      }
+      const {
+        withCredentials = false
+      } = options;
+      this.vhs_ = vhs;
+      this.withCredentials = withCredentials;
+      this.addMetadataToTextTrack = options.addMetadataToTextTrack;
+      if (!srcUrlOrPlaylist) {
+        throw new Error('A non-empty playlist URL or object is required');
+      } // event naming?
+
+      this.on('minimumUpdatePeriod', () => {
+        this.refreshXml_();
+      }); // live playlist staleness timeout
+
+      this.on('mediaupdatetimeout', () => {
+        this.refreshMedia_(this.media().id);
+      });
+      this.state = 'HAVE_NOTHING';
+      this.loadedPlaylists_ = {};
+      this.logger_ = logger('DashPlaylistLoader'); // initialize the loader state
+      // The mainPlaylistLoader will be created with a string
+
+      if (this.isMain_) {
+        this.mainPlaylistLoader_.srcUrl = srcUrlOrPlaylist; // TODO: reset sidxMapping between period changes
+        // once multi-period is refactored
+
+        this.mainPlaylistLoader_.sidxMapping_ = {};
+      } else {
+        this.childPlaylist_ = srcUrlOrPlaylist;
+      }
+    }
+    requestErrored_(err, request, startingState) {
+      // disposed
+      if (!this.request) {
+        return true;
+      } // pending request is cleared
+
+      this.request = null;
+      if (err) {
+        // use the provided error object or create one
+        // based on the request/response
+        this.error = typeof err === 'object' && !(err instanceof Error) ? err : {
+          status: request.status,
+          message: 'DASH request error at URL: ' + request.uri,
+          response: request.response,
+          // MEDIA_ERR_NETWORK
+          code: 2,
+          metadata: err.metadata
+        };
+        if (startingState) {
+          this.state = startingState;
+        }
+        this.trigger('error');
+        return true;
+      }
+    }
+    /**
+     * Verify that the container of the sidx segment can be parsed
+     * and if it can, get and parse that segment.
+     */
+
+    addSidxSegments_(playlist, startingState, cb) {
+      const sidxKey = playlist.sidx && generateSidxKey(playlist.sidx); // playlist lacks sidx or sidx segments were added to this playlist already.
+
+      if (!playlist.sidx || !sidxKey || this.mainPlaylistLoader_.sidxMapping_[sidxKey]) {
+        // keep this function async
+        this.mediaRequest_ = window.setTimeout(() => cb(false), 0);
+        return;
+      } // resolve the segment URL relative to the playlist
+
+      const uri = resolveManifestRedirect(playlist.sidx.resolvedUri);
+      const fin = (err, request) => {
+        // TODO: add error metdata here once we create an error type in video.js
+        if (this.requestErrored_(err, request, startingState)) {
+          return;
+        }
+        const sidxMapping = this.mainPlaylistLoader_.sidxMapping_;
+        let sidx;
+        try {
+          sidx = parseSidx_1(toUint8(request.response).subarray(8));
+        } catch (e) {
+          e.metadata = {
+            errorType: videojs.Error.DashManifestSidxParsingError
+          }; // sidx parsing failed.
+
+          this.requestErrored_(e, request, startingState);
+          return;
+        }
+        sidxMapping[sidxKey] = {
+          sidxInfo: playlist.sidx,
+          sidx
+        };
+        addSidxSegmentsToPlaylist$1(playlist, sidx, playlist.sidx.resolvedUri);
+        return cb(true);
+      };
+      this.request = containerRequest(uri, this.vhs_.xhr, (err, request, container, bytes) => {
+        if (err) {
+          return fin(err, request);
+        }
+        if (!container || container !== 'mp4') {
+          const sidxContainer = container || 'unknown';
+          return fin({
+            status: request.status,
+            message: `Unsupported ${sidxContainer} container type for sidx segment at URL: ${uri}`,
+            // response is just bytes in this case
+            // but we really don't want to return that.
+            response: '',
+            playlist,
+            internal: true,
+            playlistExclusionDuration: Infinity,
+            // MEDIA_ERR_NETWORK
+            code: 2,
+            metadata: {
+              errorType: videojs.Error.UnsupportedSidxContainer,
+              sidxContainer
+            }
+          }, request);
+        } // if we already downloaded the sidx bytes in the container request, use them
+
+        const {
+          offset,
+          length
+        } = playlist.sidx.byterange;
+        if (bytes.length >= length + offset) {
+          return fin(err, {
+            response: bytes.subarray(offset, offset + length),
+            status: request.status,
+            uri: request.uri
+          });
+        } // otherwise request sidx bytes
+
+        this.request = this.vhs_.xhr({
+          uri,
+          responseType: 'arraybuffer',
+          headers: segmentXhrHeaders({
+            byterange: playlist.sidx.byterange
+          })
+        }, fin);
+      });
+    }
+    dispose() {
+      this.trigger('dispose');
+      this.stopRequest();
+      this.loadedPlaylists_ = {};
+      window.clearTimeout(this.minimumUpdatePeriodTimeout_);
+      window.clearTimeout(this.mediaRequest_);
+      window.clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+      this.mediaRequest_ = null;
+      this.minimumUpdatePeriodTimeout_ = null;
+      if (this.mainPlaylistLoader_.createMupOnMedia_) {
+        this.off('loadedmetadata', this.mainPlaylistLoader_.createMupOnMedia_);
+        this.mainPlaylistLoader_.createMupOnMedia_ = null;
+      }
+      this.off();
+    }
+    hasPendingRequest() {
+      return this.request || this.mediaRequest_;
+    }
+    stopRequest() {
+      if (this.request) {
+        const oldRequest = this.request;
+        this.request = null;
+        oldRequest.onreadystatechange = null;
+        oldRequest.abort();
+      }
+    }
+    media(playlist) {
+      // getter
+      if (!playlist) {
+        return this.media_;
+      } // setter
+
+      if (this.state === 'HAVE_NOTHING') {
+        throw new Error('Cannot switch media playlist from ' + this.state);
+      }
+      const startingState = this.state; // find the playlist object if the target playlist has been specified by URI
+
+      if (typeof playlist === 'string') {
+        if (!this.mainPlaylistLoader_.main.playlists[playlist]) {
+          throw new Error('Unknown playlist URI: ' + playlist);
+        }
+        playlist = this.mainPlaylistLoader_.main.playlists[playlist];
+      }
+      const mediaChange = !this.media_ || playlist.id !== this.media_.id; // switch to previously loaded playlists immediately
+
+      if (mediaChange && this.loadedPlaylists_[playlist.id] && this.loadedPlaylists_[playlist.id].endList) {
+        this.state = 'HAVE_METADATA';
+        this.media_ = playlist; // trigger media change if the active media has been updated
+
+        if (mediaChange) {
+          this.trigger('mediachanging');
+          this.trigger('mediachange');
+        }
+        return;
+      } // switching to the active playlist is a no-op
+
+      if (!mediaChange) {
+        return;
+      } // switching from an already loaded playlist
+
+      if (this.media_) {
+        this.trigger('mediachanging');
+      }
+      this.addSidxSegments_(playlist, startingState, sidxChanged => {
+        // everything is ready just continue to haveMetadata
+        this.haveMetadata({
+          startingState,
+          playlist
+        });
+      });
+    }
+    haveMetadata({
+      startingState,
+      playlist
+    }) {
+      this.state = 'HAVE_METADATA';
+      this.loadedPlaylists_[playlist.id] = playlist;
+      this.mediaRequest_ = null; // This will trigger loadedplaylist
+
+      this.refreshMedia_(playlist.id); // fire loadedmetadata the first time a media playlist is loaded
+      // to resolve setup of media groups
+
+      if (startingState === 'HAVE_MAIN_MANIFEST') {
+        this.trigger('loadedmetadata');
+      } else {
+        // trigger media change if the active media has been updated
+        this.trigger('mediachange');
+      }
+    }
+    pause() {
+      if (this.mainPlaylistLoader_.createMupOnMedia_) {
+        this.off('loadedmetadata', this.mainPlaylistLoader_.createMupOnMedia_);
+        this.mainPlaylistLoader_.createMupOnMedia_ = null;
+      }
+      this.stopRequest();
+      window.clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+      if (this.isMain_) {
+        window.clearTimeout(this.mainPlaylistLoader_.minimumUpdatePeriodTimeout_);
+        this.mainPlaylistLoader_.minimumUpdatePeriodTimeout_ = null;
+      }
+      if (this.state === 'HAVE_NOTHING') {
+        // If we pause the loader before any data has been retrieved, its as if we never
+        // started, so reset to an unstarted state.
+        this.started = false;
+      }
+    }
+    load(isFinalRendition) {
+      window.clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+      const media = this.media();
+      if (isFinalRendition) {
+        const delay = media ? media.targetDuration / 2 * 1000 : 5 * 1000;
+        this.mediaUpdateTimeout = window.setTimeout(() => this.load(), delay);
+        return;
+      } // because the playlists are internal to the manifest, load should either load the
+      // main manifest, or do nothing but trigger an event
+
+      if (!this.started) {
+        this.start();
+        return;
+      }
+      if (media && !media.endList) {
+        // Check to see if this is the main loader and the MUP was cleared (this happens
+        // when the loader was paused). `media` should be set at this point since one is always
+        // set during `start()`.
+        if (this.isMain_ && !this.minimumUpdatePeriodTimeout_) {
+          // Trigger minimumUpdatePeriod to refresh the main manifest
+          this.trigger('minimumUpdatePeriod'); // Since there was no prior minimumUpdatePeriodTimeout it should be recreated
+
+          this.updateMinimumUpdatePeriodTimeout_();
+        }
+        this.trigger('mediaupdatetimeout');
+      } else {
+        this.trigger('loadedplaylist');
+      }
+    }
+    start() {
+      this.started = true; // We don't need to request the main manifest again
+      // Call this asynchronously to match the xhr request behavior below
+
+      if (!this.isMain_) {
+        this.mediaRequest_ = window.setTimeout(() => this.haveMain_(), 0);
+        return;
+      }
+      this.requestMain_((req, mainChanged) => {
+        this.haveMain_();
+        if (!this.hasPendingRequest() && !this.media_) {
+          this.media(this.mainPlaylistLoader_.main.playlists[0]);
+        }
+      });
+    }
+    requestMain_(cb) {
+      this.request = this.vhs_.xhr({
+        uri: this.mainPlaylistLoader_.srcUrl,
+        withCredentials: this.withCredentials,
+        requestType: 'dash-manifest'
+      }, (error, req) => {
+        if (this.requestErrored_(error, req)) {
+          if (this.state === 'HAVE_NOTHING') {
+            this.started = false;
+          }
+          return;
+        }
+        const mainChanged = req.responseText !== this.mainPlaylistLoader_.mainXml_;
+        this.mainPlaylistLoader_.mainXml_ = req.responseText;
+        if (req.responseHeaders && req.responseHeaders.date) {
+          this.mainLoaded_ = Date.parse(req.responseHeaders.date);
+        } else {
+          this.mainLoaded_ = Date.now();
+        }
+        this.mainPlaylistLoader_.srcUrl = resolveManifestRedirect(this.mainPlaylistLoader_.srcUrl, req);
+        if (mainChanged) {
+          this.handleMain_();
+          this.syncClientServerClock_(() => {
+            return cb(req, mainChanged);
+          });
+          return;
+        }
+        return cb(req, mainChanged);
+      });
+    }
+    /**
+     * Parses the main xml for UTCTiming node to sync the client clock to the server
+     * clock. If the UTCTiming node requires a HEAD or GET request, that request is made.
+     *
+     * @param {Function} done
+     *        Function to call when clock sync has completed
+     */
+
+    syncClientServerClock_(done) {
+      const utcTiming = parseUTCTiming(this.mainPlaylistLoader_.mainXml_); // No UTCTiming element found in the mpd. Use Date header from mpd request as the
+      // server clock
+
+      if (utcTiming === null) {
+        this.mainPlaylistLoader_.clientOffset_ = this.mainLoaded_ - Date.now();
+        return done();
+      }
+      if (utcTiming.method === 'DIRECT') {
+        this.mainPlaylistLoader_.clientOffset_ = utcTiming.value - Date.now();
+        return done();
+      }
+      this.request = this.vhs_.xhr({
+        uri: resolveUrl(this.mainPlaylistLoader_.srcUrl, utcTiming.value),
+        method: utcTiming.method,
+        withCredentials: this.withCredentials,
+        requestType: 'dash-clock-sync'
+      }, (error, req) => {
+        // disposed
+        if (!this.request) {
+          return;
+        }
+        if (error) {
+          // sync request failed, fall back to using date header from mpd
+          // TODO: log warning
+          this.mainPlaylistLoader_.clientOffset_ = this.mainLoaded_ - Date.now();
+          return done();
+        }
+        let serverTime;
+        if (utcTiming.method === 'HEAD') {
+          if (!req.responseHeaders || !req.responseHeaders.date) {
+            // expected date header not preset, fall back to using date header from mpd
+            // TODO: log warning
+            serverTime = this.mainLoaded_;
+          } else {
+            serverTime = Date.parse(req.responseHeaders.date);
+          }
+        } else {
+          serverTime = Date.parse(req.responseText);
+        }
+        this.mainPlaylistLoader_.clientOffset_ = serverTime - Date.now();
+        done();
+      });
+    }
+    haveMain_() {
+      this.state = 'HAVE_MAIN_MANIFEST';
+      if (this.isMain_) {
+        // We have the main playlist at this point, so
+        // trigger this to allow PlaylistController
+        // to make an initial playlist selection
+        this.trigger('loadedplaylist');
+      } else if (!this.media_) {
+        // no media playlist was specifically selected so select
+        // the one the child playlist loader was created with
+        this.media(this.childPlaylist_);
+      }
+    }
+    handleMain_() {
+      // clear media request
+      this.mediaRequest_ = null;
+      const oldMain = this.mainPlaylistLoader_.main;
+      let newMain = parseMainXml({
+        mainXml: this.mainPlaylistLoader_.mainXml_,
+        srcUrl: this.mainPlaylistLoader_.srcUrl,
+        clientOffset: this.mainPlaylistLoader_.clientOffset_,
+        sidxMapping: this.mainPlaylistLoader_.sidxMapping_,
+        previousManifest: oldMain
+      }); // if we have an old main to compare the new main against
+
+      if (oldMain) {
+        newMain = updateMain(oldMain, newMain, this.mainPlaylistLoader_.sidxMapping_);
+      } // only update main if we have a new main
+
+      this.mainPlaylistLoader_.main = newMain ? newMain : oldMain;
+      const location = this.mainPlaylistLoader_.main.locations && this.mainPlaylistLoader_.main.locations[0];
+      if (location && location !== this.mainPlaylistLoader_.srcUrl) {
+        this.mainPlaylistLoader_.srcUrl = location;
+      }
+      if (!oldMain || newMain && newMain.minimumUpdatePeriod !== oldMain.minimumUpdatePeriod) {
+        this.updateMinimumUpdatePeriodTimeout_();
+      }
+      this.addEventStreamToMetadataTrack_(newMain);
+      return Boolean(newMain);
+    }
+    updateMinimumUpdatePeriodTimeout_() {
+      const mpl = this.mainPlaylistLoader_; // cancel any pending creation of mup on media
+      // a new one will be added if needed.
+
+      if (mpl.createMupOnMedia_) {
+        mpl.off('loadedmetadata', mpl.createMupOnMedia_);
+        mpl.createMupOnMedia_ = null;
+      } // clear any pending timeouts
+
+      if (mpl.minimumUpdatePeriodTimeout_) {
+        window.clearTimeout(mpl.minimumUpdatePeriodTimeout_);
+        mpl.minimumUpdatePeriodTimeout_ = null;
+      }
+      let mup = mpl.main && mpl.main.minimumUpdatePeriod; // If the minimumUpdatePeriod has a value of 0, that indicates that the current
+      // MPD has no future validity, so a new one will need to be acquired when new
+      // media segments are to be made available. Thus, we use the target duration
+      // in this case
+
+      if (mup === 0) {
+        if (mpl.media()) {
+          mup = mpl.media().targetDuration * 1000;
+        } else {
+          mpl.createMupOnMedia_ = mpl.updateMinimumUpdatePeriodTimeout_;
+          mpl.one('loadedmetadata', mpl.createMupOnMedia_);
+        }
+      } // if minimumUpdatePeriod is invalid or <= zero, which
+      // can happen when a live video becomes VOD. skip timeout
+      // creation.
+
+      if (typeof mup !== 'number' || mup <= 0) {
+        if (mup < 0) {
+          this.logger_(`found invalid minimumUpdatePeriod of ${mup}, not setting a timeout`);
+        }
+        return;
+      }
+      this.createMUPTimeout_(mup);
+    }
+    createMUPTimeout_(mup) {
+      const mpl = this.mainPlaylistLoader_;
+      mpl.minimumUpdatePeriodTimeout_ = window.setTimeout(() => {
+        mpl.minimumUpdatePeriodTimeout_ = null;
+        mpl.trigger('minimumUpdatePeriod');
+        mpl.createMUPTimeout_(mup);
+      }, mup);
+    }
+    /**
+     * Sends request to refresh the main xml and updates the parsed main manifest
+     */
+
+    refreshXml_() {
+      this.requestMain_((req, mainChanged) => {
+        if (!mainChanged) {
+          return;
+        }
+        if (this.media_) {
+          this.media_ = this.mainPlaylistLoader_.main.playlists[this.media_.id];
+        } // This will filter out updated sidx info from the mapping
+
+        this.mainPlaylistLoader_.sidxMapping_ = filterChangedSidxMappings(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.sidxMapping_);
+        this.addSidxSegments_(this.media(), this.state, sidxChanged => {
+          // TODO: do we need to reload the current playlist?
+          this.refreshMedia_(this.media().id);
+        });
+      });
+    }
+    /**
+     * Refreshes the media playlist by re-parsing the main xml and updating playlist
+     * references. If this is an alternate loader, the updated parsed manifest is retrieved
+     * from the main loader.
+     */
+
+    refreshMedia_(mediaID) {
+      if (!mediaID) {
+        throw new Error('refreshMedia_ must take a media id');
+      } // for main we have to reparse the main xml
+      // to re-create segments based on current timing values
+      // which may change media. We only skip updating the main manifest
+      // if this is the first time this.media_ is being set.
+      // as main was just parsed in that case.
+
+      if (this.media_ && this.isMain_) {
+        this.handleMain_();
+      }
+      const playlists = this.mainPlaylistLoader_.main.playlists;
+      const mediaChanged = !this.media_ || this.media_ !== playlists[mediaID];
+      if (mediaChanged) {
+        this.media_ = playlists[mediaID];
+      } else {
+        this.trigger('playlistunchanged');
+      }
+      if (!this.mediaUpdateTimeout) {
+        const createMediaUpdateTimeout = () => {
+          if (this.media().endList) {
+            return;
+          }
+          this.mediaUpdateTimeout = window.setTimeout(() => {
+            this.trigger('mediaupdatetimeout');
+            createMediaUpdateTimeout();
+          }, refreshDelay(this.media(), Boolean(mediaChanged)));
+        };
+        createMediaUpdateTimeout();
+      }
+      this.trigger('loadedplaylist');
+    }
+    /**
+     * Takes eventstream data from a parsed DASH manifest and adds it to the metadata text track.
+     *
+     * @param {manifest} newMain the newly parsed manifest
+     */
+
+    addEventStreamToMetadataTrack_(newMain) {
+      // Only add new event stream metadata if we have a new manifest.
+      if (newMain && this.mainPlaylistLoader_.main.eventStream) {
+        // convert EventStream to ID3-like data.
+        const metadataArray = this.mainPlaylistLoader_.main.eventStream.map(eventStreamNode => {
+          return {
+            cueTime: eventStreamNode.start,
+            frames: [{
+              data: eventStreamNode.messageData
+            }]
+          };
+        });
+        this.addMetadataToTextTrack('EventStream', metadataArray, this.mainPlaylistLoader_.main.duration);
+      }
+    }
+    /**
+     * Returns the key ID set from a playlist
+     *
+     * @param {playlist} playlist to fetch the key ID set from.
+     * @return a Set of 32 digit hex strings that represent the unique keyIds for that playlist.
+     */
+
+    getKeyIdSet(playlist) {
+      if (playlist.contentProtection) {
+        const keyIds = new Set();
+        for (const keysystem in playlist.contentProtection) {
+          const defaultKID = playlist.contentProtection[keysystem].attributes['cenc:default_KID'];
+          if (defaultKID) {
+            // DASH keyIds are separated by dashes.
+            keyIds.add(defaultKID.replace(/-/g, '').toLowerCase());
+          }
+        }
+        return keyIds;
+      }
+    }
+  }
+  var Config = {
+    GOAL_BUFFER_LENGTH: 30,
+    MAX_GOAL_BUFFER_LENGTH: 60,
+    BACK_BUFFER_LENGTH: 30,
+    GOAL_BUFFER_LENGTH_RATE: 1,
+    // 0.5 MB/s
+    INITIAL_BANDWIDTH: 4194304,
+    // A fudge factor to apply to advertised playlist bitrates to account for
+    // temporary flucations in client bandwidth
+    BANDWIDTH_VARIANCE: 1.2,
+    // How much of the buffer must be filled before we consider upswitching
+    BUFFER_LOW_WATER_LINE: 0,
+    MAX_BUFFER_LOW_WATER_LINE: 30,
+    // TODO: Remove this when experimentalBufferBasedABR is removed
+    EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE: 16,
+    BUFFER_LOW_WATER_LINE_RATE: 1,
+    // If the buffer is greater than the high water line, we won't switch down
+    BUFFER_HIGH_WATER_LINE: 30
+  };
+  const stringToArrayBuffer = string => {
+    const view = new Uint8Array(new ArrayBuffer(string.length));
+    for (let i = 0; i < string.length; i++) {
+      view[i] = string.charCodeAt(i);
+    }
+    return view.buffer;
+  };
+
+  /* global Blob, BlobBuilder, Worker */
+  // unify worker interface
+  const browserWorkerPolyFill = function (workerObj) {
+    // node only supports on/off
+    workerObj.on = workerObj.addEventListener;
+    workerObj.off = workerObj.removeEventListener;
+    return workerObj;
+  };
+  const createObjectURL = function (str) {
+    try {
+      return URL.createObjectURL(new Blob([str], {
+        type: 'application/javascript'
+      }));
+    } catch (e) {
+      const blob = new BlobBuilder();
+      blob.append(str);
+      return URL.createObjectURL(blob.getBlob());
+    }
+  };
+  const factory = function (code) {
+    return function () {
+      const objectUrl = createObjectURL(code);
+      const worker = browserWorkerPolyFill(new Worker(objectUrl));
+      worker.objURL = objectUrl;
+      const terminate = worker.terminate;
+      worker.on = worker.addEventListener;
+      worker.off = worker.removeEventListener;
+      worker.terminate = function () {
+        URL.revokeObjectURL(objectUrl);
+        return terminate.call(this);
+      };
+      return worker;
+    };
+  };
+  const transform = function (code) {
+    return `var browserWorkerPolyFill = ${browserWorkerPolyFill.toString()};\n` + 'browserWorkerPolyFill(self);\n' + code;
+  };
+  const getWorkerString = function (fn) {
+    return fn.toString().replace(/^function.+?{/, '').slice(0, -1);
+  };
+
+  /* rollup-plugin-worker-factory start for worker!/home/runner/work/http-streaming/http-streaming/src/transmuxer-worker.js */
+  const workerCode$1 = transform(getWorkerString(function () {
+    var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * A lightweight readable stream implemention that handles event dispatching.
+     * Objects that inherit from streams should call init in their constructors.
+     */
+
+    var Stream$8 = function () {
+      this.init = function () {
+        var listeners = {};
+        /**
+         * Add a listener for a specified event type.
+         * @param type {string} the event name
+         * @param listener {function} the callback to be invoked when an event of
+         * the specified type occurs
+         */
+
+        this.on = function (type, listener) {
+          if (!listeners[type]) {
+            listeners[type] = [];
+          }
+          listeners[type] = listeners[type].concat(listener);
+        };
+        /**
+         * Remove a listener for a specified event type.
+         * @param type {string} the event name
+         * @param listener {function} a function previously registered for this
+         * type of event through `on`
+         */
+
+        this.off = function (type, listener) {
+          var index;
+          if (!listeners[type]) {
+            return false;
+          }
+          index = listeners[type].indexOf(listener);
+          listeners[type] = listeners[type].slice();
+          listeners[type].splice(index, 1);
+          return index > -1;
+        };
+        /**
+         * Trigger an event of the specified type on this stream. Any additional
+         * arguments to this function are passed as parameters to event listeners.
+         * @param type {string} the event name
+         */
+
+        this.trigger = function (type) {
+          var callbacks, i, length, args;
+          callbacks = listeners[type];
+          if (!callbacks) {
+            return;
+          } // Slicing the arguments on every invocation of this method
+          // can add a significant amount of overhead. Avoid the
+          // intermediate object creation for the common case of a
+          // single callback argument
+
+          if (arguments.length === 2) {
+            length = callbacks.length;
+            for (i = 0; i < length; ++i) {
+              callbacks[i].call(this, arguments[1]);
+            }
+          } else {
+            args = [];
+            i = arguments.length;
+            for (i = 1; i < arguments.length; ++i) {
+              args.push(arguments[i]);
+            }
+            length = callbacks.length;
+            for (i = 0; i < length; ++i) {
+              callbacks[i].apply(this, args);
+            }
+          }
+        };
+        /**
+         * Destroys the stream and cleans up.
+         */
+
+        this.dispose = function () {
+          listeners = {};
+        };
+      };
+    };
+    /**
+     * Forwards all `data` events on this stream to the destination stream. The
+     * destination stream should provide a method `push` to receive the data
+     * events as they arrive.
+     * @param destination {stream} the stream that will receive all `data` events
+     * @param autoFlush {boolean} if false, we will not call `flush` on the destination
+     *                            when the current stream emits a 'done' event
+     * @see http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options
+     */
+
+    Stream$8.prototype.pipe = function (destination) {
+      this.on('data', function (data) {
+        destination.push(data);
+      });
+      this.on('done', function (flushSource) {
+        destination.flush(flushSource);
+      });
+      this.on('partialdone', function (flushSource) {
+        destination.partialFlush(flushSource);
+      });
+      this.on('endedtimeline', function (flushSource) {
+        destination.endTimeline(flushSource);
+      });
+      this.on('reset', function (flushSource) {
+        destination.reset(flushSource);
+      });
+      return destination;
+    }; // Default stream functions that are expected to be overridden to perform
+    // actual work. These are provided by the prototype as a sort of no-op
+    // implementation so that we don't have to check for their existence in the
+    // `pipe` function above.
+
+    Stream$8.prototype.push = function (data) {
+      this.trigger('data', data);
+    };
+    Stream$8.prototype.flush = function (flushSource) {
+      this.trigger('done', flushSource);
+    };
+    Stream$8.prototype.partialFlush = function (flushSource) {
+      this.trigger('partialdone', flushSource);
+    };
+    Stream$8.prototype.endTimeline = function (flushSource) {
+      this.trigger('endedtimeline', flushSource);
+    };
+    Stream$8.prototype.reset = function (flushSource) {
+      this.trigger('reset', flushSource);
+    };
+    var stream = Stream$8;
+    var MAX_UINT32$1 = Math.pow(2, 32);
+    var getUint64$3 = function (uint8) {
+      var dv = new DataView(uint8.buffer, uint8.byteOffset, uint8.byteLength);
+      var value;
+      if (dv.getBigUint64) {
+        value = dv.getBigUint64(0);
+        if (value < Number.MAX_SAFE_INTEGER) {
+          return Number(value);
+        }
+        return value;
+      }
+      return dv.getUint32(0) * MAX_UINT32$1 + dv.getUint32(4);
+    };
+    var numbers = {
+      getUint64: getUint64$3,
+      MAX_UINT32: MAX_UINT32$1
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Functions that generate fragmented MP4s suitable for use with Media
+     * Source Extensions.
+     */
+
+    var MAX_UINT32 = numbers.MAX_UINT32;
+    var box, dinf, esds, ftyp, mdat, mfhd, minf, moof, moov, mvex, mvhd, trak, tkhd, mdia, mdhd, hdlr, sdtp, stbl, stsd, traf, trex, trun$1, types, MAJOR_BRAND, MINOR_VERSION, AVC1_BRAND, VIDEO_HDLR, AUDIO_HDLR, HDLR_TYPES, VMHD, SMHD, DREF, STCO, STSC, STSZ, STTS; // pre-calculate constants
+
+    (function () {
+      var i;
+      types = {
+        avc1: [],
+        // codingname
+        avcC: [],
+        btrt: [],
+        dinf: [],
+        dref: [],
+        esds: [],
+        ftyp: [],
+        hdlr: [],
+        mdat: [],
+        mdhd: [],
+        mdia: [],
+        mfhd: [],
+        minf: [],
+        moof: [],
+        moov: [],
+        mp4a: [],
+        // codingname
+        mvex: [],
+        mvhd: [],
+        pasp: [],
+        sdtp: [],
+        smhd: [],
+        stbl: [],
+        stco: [],
+        stsc: [],
+        stsd: [],
+        stsz: [],
+        stts: [],
+        styp: [],
+        tfdt: [],
+        tfhd: [],
+        traf: [],
+        trak: [],
+        trun: [],
+        trex: [],
+        tkhd: [],
+        vmhd: []
+      }; // In environments where Uint8Array is undefined (e.g., IE8), skip set up so that we
+      // don't throw an error
+
+      if (typeof Uint8Array === 'undefined') {
+        return;
+      }
+      for (i in types) {
+        if (types.hasOwnProperty(i)) {
+          types[i] = [i.charCodeAt(0), i.charCodeAt(1), i.charCodeAt(2), i.charCodeAt(3)];
+        }
+      }
+      MAJOR_BRAND = new Uint8Array(['i'.charCodeAt(0), 's'.charCodeAt(0), 'o'.charCodeAt(0), 'm'.charCodeAt(0)]);
+      AVC1_BRAND = new Uint8Array(['a'.charCodeAt(0), 'v'.charCodeAt(0), 'c'.charCodeAt(0), '1'.charCodeAt(0)]);
+      MINOR_VERSION = new Uint8Array([0, 0, 0, 1]);
+      VIDEO_HDLR = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x00,
+      // pre_defined
+      0x76, 0x69, 0x64, 0x65,
+      // handler_type: 'vide'
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x56, 0x69, 0x64, 0x65, 0x6f, 0x48, 0x61, 0x6e, 0x64, 0x6c, 0x65, 0x72, 0x00 // name: 'VideoHandler'
+      ]);
+
+      AUDIO_HDLR = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x00,
+      // pre_defined
+      0x73, 0x6f, 0x75, 0x6e,
+      // handler_type: 'soun'
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x53, 0x6f, 0x75, 0x6e, 0x64, 0x48, 0x61, 0x6e, 0x64, 0x6c, 0x65, 0x72, 0x00 // name: 'SoundHandler'
+      ]);
+
+      HDLR_TYPES = {
+        video: VIDEO_HDLR,
+        audio: AUDIO_HDLR
+      };
+      DREF = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x01,
+      // entry_count
+      0x00, 0x00, 0x00, 0x0c,
+      // entry_size
+      0x75, 0x72, 0x6c, 0x20,
+      // 'url' type
+      0x00,
+      // version 0
+      0x00, 0x00, 0x01 // entry_flags
+      ]);
+
+      SMHD = new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00,
+      // balance, 0 means centered
+      0x00, 0x00 // reserved
+      ]);
+
+      STCO = new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x00 // entry_count
+      ]);
+
+      STSC = STCO;
+      STSZ = new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x00,
+      // sample_size
+      0x00, 0x00, 0x00, 0x00 // sample_count
+      ]);
+
+      STTS = STCO;
+      VMHD = new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x01,
+      // flags
+      0x00, 0x00,
+      // graphicsmode
+      0x00, 0x00, 0x00, 0x00, 0x00, 0x00 // opcolor
+      ]);
+    })();
+
+    box = function (type) {
+      var payload = [],
+        size = 0,
+        i,
+        result,
+        view;
+      for (i = 1; i < arguments.length; i++) {
+        payload.push(arguments[i]);
+      }
+      i = payload.length; // calculate the total size we need to allocate
+
+      while (i--) {
+        size += payload[i].byteLength;
+      }
+      result = new Uint8Array(size + 8);
+      view = new DataView(result.buffer, result.byteOffset, result.byteLength);
+      view.setUint32(0, result.byteLength);
+      result.set(type, 4); // copy the payload into the result
+
+      for (i = 0, size = 8; i < payload.length; i++) {
+        result.set(payload[i], size);
+        size += payload[i].byteLength;
+      }
+      return result;
+    };
+    dinf = function () {
+      return box(types.dinf, box(types.dref, DREF));
+    };
+    esds = function (track) {
+      return box(types.esds, new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x00,
+      // flags
+      // ES_Descriptor
+      0x03,
+      // tag, ES_DescrTag
+      0x19,
+      // length
+      0x00, 0x00,
+      // ES_ID
+      0x00,
+      // streamDependenceFlag, URL_flag, reserved, streamPriority
+      // DecoderConfigDescriptor
+      0x04,
+      // tag, DecoderConfigDescrTag
+      0x11,
+      // length
+      0x40,
+      // object type
+      0x15,
+      // streamType
+      0x00, 0x06, 0x00,
+      // bufferSizeDB
+      0x00, 0x00, 0xda, 0xc0,
+      // maxBitrate
+      0x00, 0x00, 0xda, 0xc0,
+      // avgBitrate
+      // DecoderSpecificInfo
+      0x05,
+      // tag, DecoderSpecificInfoTag
+      0x02,
+      // length
+      // ISO/IEC 14496-3, AudioSpecificConfig
+      // for samplingFrequencyIndex see ISO/IEC 13818-7:2006, 8.1.3.2.2, Table 35
+      track.audioobjecttype << 3 | track.samplingfrequencyindex >>> 1, track.samplingfrequencyindex << 7 | track.channelcount << 3, 0x06, 0x01, 0x02 // GASpecificConfig
+      ]));
+    };
+
+    ftyp = function () {
+      return box(types.ftyp, MAJOR_BRAND, MINOR_VERSION, MAJOR_BRAND, AVC1_BRAND);
+    };
+    hdlr = function (type) {
+      return box(types.hdlr, HDLR_TYPES[type]);
+    };
+    mdat = function (data) {
+      return box(types.mdat, data);
+    };
+    mdhd = function (track) {
+      var result = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x02,
+      // creation_time
+      0x00, 0x00, 0x00, 0x03,
+      // modification_time
+      0x00, 0x01, 0x5f, 0x90,
+      // timescale, 90,000 "ticks" per second
+      track.duration >>> 24 & 0xFF, track.duration >>> 16 & 0xFF, track.duration >>> 8 & 0xFF, track.duration & 0xFF,
+      // duration
+      0x55, 0xc4,
+      // 'und' language (undetermined)
+      0x00, 0x00]); // Use the sample rate from the track metadata, when it is
+      // defined. The sample rate can be parsed out of an ADTS header, for
+      // instance.
+
+      if (track.samplerate) {
+        result[12] = track.samplerate >>> 24 & 0xFF;
+        result[13] = track.samplerate >>> 16 & 0xFF;
+        result[14] = track.samplerate >>> 8 & 0xFF;
+        result[15] = track.samplerate & 0xFF;
+      }
+      return box(types.mdhd, result);
+    };
+    mdia = function (track) {
+      return box(types.mdia, mdhd(track), hdlr(track.type), minf(track));
+    };
+    mfhd = function (sequenceNumber) {
+      return box(types.mfhd, new Uint8Array([0x00, 0x00, 0x00, 0x00,
+      // flags
+      (sequenceNumber & 0xFF000000) >> 24, (sequenceNumber & 0xFF0000) >> 16, (sequenceNumber & 0xFF00) >> 8, sequenceNumber & 0xFF // sequence_number
+      ]));
+    };
+
+    minf = function (track) {
+      return box(types.minf, track.type === 'video' ? box(types.vmhd, VMHD) : box(types.smhd, SMHD), dinf(), stbl(track));
+    };
+    moof = function (sequenceNumber, tracks) {
+      var trackFragments = [],
+        i = tracks.length; // build traf boxes for each track fragment
+
+      while (i--) {
+        trackFragments[i] = traf(tracks[i]);
+      }
+      return box.apply(null, [types.moof, mfhd(sequenceNumber)].concat(trackFragments));
+    };
+    /**
+     * Returns a movie box.
+     * @param tracks {array} the tracks associated with this movie
+     * @see ISO/IEC 14496-12:2012(E), section 8.2.1
+     */
+
+    moov = function (tracks) {
+      var i = tracks.length,
+        boxes = [];
+      while (i--) {
+        boxes[i] = trak(tracks[i]);
+      }
+      return box.apply(null, [types.moov, mvhd(0xffffffff)].concat(boxes).concat(mvex(tracks)));
+    };
+    mvex = function (tracks) {
+      var i = tracks.length,
+        boxes = [];
+      while (i--) {
+        boxes[i] = trex(tracks[i]);
+      }
+      return box.apply(null, [types.mvex].concat(boxes));
+    };
+    mvhd = function (duration) {
+      var bytes = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x01,
+      // creation_time
+      0x00, 0x00, 0x00, 0x02,
+      // modification_time
+      0x00, 0x01, 0x5f, 0x90,
+      // timescale, 90,000 "ticks" per second
+      (duration & 0xFF000000) >> 24, (duration & 0xFF0000) >> 16, (duration & 0xFF00) >> 8, duration & 0xFF,
+      // duration
+      0x00, 0x01, 0x00, 0x00,
+      // 1.0 rate
+      0x01, 0x00,
+      // 1.0 volume
+      0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x00,
+      // transformation: unity matrix
+      0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      // pre_defined
+      0xff, 0xff, 0xff, 0xff // next_track_ID
+      ]);
+
+      return box(types.mvhd, bytes);
+    };
+    sdtp = function (track) {
+      var samples = track.samples || [],
+        bytes = new Uint8Array(4 + samples.length),
+        flags,
+        i; // leave the full box header (4 bytes) all zero
+      // write the sample table
+
+      for (i = 0; i < samples.length; i++) {
+        flags = samples[i].flags;
+        bytes[i + 4] = flags.dependsOn << 4 | flags.isDependedOn << 2 | flags.hasRedundancy;
+      }
+      return box(types.sdtp, bytes);
+    };
+    stbl = function (track) {
+      return box(types.stbl, stsd(track), box(types.stts, STTS), box(types.stsc, STSC), box(types.stsz, STSZ), box(types.stco, STCO));
+    };
+    (function () {
+      var videoSample, audioSample;
+      stsd = function (track) {
+        return box(types.stsd, new Uint8Array([0x00,
+        // version 0
+        0x00, 0x00, 0x00,
+        // flags
+        0x00, 0x00, 0x00, 0x01]), track.type === 'video' ? videoSample(track) : audioSample(track));
+      };
+      videoSample = function (track) {
+        var sps = track.sps || [],
+          pps = track.pps || [],
+          sequenceParameterSets = [],
+          pictureParameterSets = [],
+          i,
+          avc1Box; // assemble the SPSs
+
+        for (i = 0; i < sps.length; i++) {
+          sequenceParameterSets.push((sps[i].byteLength & 0xFF00) >>> 8);
+          sequenceParameterSets.push(sps[i].byteLength & 0xFF); // sequenceParameterSetLength
+
+          sequenceParameterSets = sequenceParameterSets.concat(Array.prototype.slice.call(sps[i])); // SPS
+        } // assemble the PPSs
+
+        for (i = 0; i < pps.length; i++) {
+          pictureParameterSets.push((pps[i].byteLength & 0xFF00) >>> 8);
+          pictureParameterSets.push(pps[i].byteLength & 0xFF);
+          pictureParameterSets = pictureParameterSets.concat(Array.prototype.slice.call(pps[i]));
+        }
+        avc1Box = [types.avc1, new Uint8Array([0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        // reserved
+        0x00, 0x01,
+        // data_reference_index
+        0x00, 0x00,
+        // pre_defined
+        0x00, 0x00,
+        // reserved
+        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        // pre_defined
+        (track.width & 0xff00) >> 8, track.width & 0xff,
+        // width
+        (track.height & 0xff00) >> 8, track.height & 0xff,
+        // height
+        0x00, 0x48, 0x00, 0x00,
+        // horizresolution
+        0x00, 0x48, 0x00, 0x00,
+        // vertresolution
+        0x00, 0x00, 0x00, 0x00,
+        // reserved
+        0x00, 0x01,
+        // frame_count
+        0x13, 0x76, 0x69, 0x64, 0x65, 0x6f, 0x6a, 0x73, 0x2d, 0x63, 0x6f, 0x6e, 0x74, 0x72, 0x69, 0x62, 0x2d, 0x68, 0x6c, 0x73, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        // compressorname
+        0x00, 0x18,
+        // depth = 24
+        0x11, 0x11 // pre_defined = -1
+        ]), box(types.avcC, new Uint8Array([0x01,
+        // configurationVersion
+        track.profileIdc,
+        // AVCProfileIndication
+        track.profileCompatibility,
+        // profile_compatibility
+        track.levelIdc,
+        // AVCLevelIndication
+        0xff // lengthSizeMinusOne, hard-coded to 4 bytes
+        ].concat([sps.length],
+        // numOfSequenceParameterSets
+        sequenceParameterSets,
+        // "SPS"
+        [pps.length],
+        // numOfPictureParameterSets
+        pictureParameterSets // "PPS"
+        ))), box(types.btrt, new Uint8Array([0x00, 0x1c, 0x9c, 0x80,
+        // bufferSizeDB
+        0x00, 0x2d, 0xc6, 0xc0,
+        // maxBitrate
+        0x00, 0x2d, 0xc6, 0xc0 // avgBitrate
+        ]))];
+
+        if (track.sarRatio) {
+          var hSpacing = track.sarRatio[0],
+            vSpacing = track.sarRatio[1];
+          avc1Box.push(box(types.pasp, new Uint8Array([(hSpacing & 0xFF000000) >> 24, (hSpacing & 0xFF0000) >> 16, (hSpacing & 0xFF00) >> 8, hSpacing & 0xFF, (vSpacing & 0xFF000000) >> 24, (vSpacing & 0xFF0000) >> 16, (vSpacing & 0xFF00) >> 8, vSpacing & 0xFF])));
+        }
+        return box.apply(null, avc1Box);
+      };
+      audioSample = function (track) {
+        return box(types.mp4a, new Uint8Array([
+        // SampleEntry, ISO/IEC 14496-12
+        0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        // reserved
+        0x00, 0x01,
+        // data_reference_index
+        // AudioSampleEntry, ISO/IEC 14496-12
+        0x00, 0x00, 0x00, 0x00,
+        // reserved
+        0x00, 0x00, 0x00, 0x00,
+        // reserved
+        (track.channelcount & 0xff00) >> 8, track.channelcount & 0xff,
+        // channelcount
+        (track.samplesize & 0xff00) >> 8, track.samplesize & 0xff,
+        // samplesize
+        0x00, 0x00,
+        // pre_defined
+        0x00, 0x00,
+        // reserved
+        (track.samplerate & 0xff00) >> 8, track.samplerate & 0xff, 0x00, 0x00 // samplerate, 16.16
+        // MP4AudioSampleEntry, ISO/IEC 14496-14
+        ]), esds(track));
+      };
+    })();
+    tkhd = function (track) {
+      var result = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x07,
+      // flags
+      0x00, 0x00, 0x00, 0x00,
+      // creation_time
+      0x00, 0x00, 0x00, 0x00,
+      // modification_time
+      (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+      // track_ID
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      (track.duration & 0xFF000000) >> 24, (track.duration & 0xFF0000) >> 16, (track.duration & 0xFF00) >> 8, track.duration & 0xFF,
+      // duration
+      0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00,
+      // layer
+      0x00, 0x00,
+      // alternate_group
+      0x01, 0x00,
+      // non-audio track volume
+      0x00, 0x00,
+      // reserved
+      0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x00,
+      // transformation: unity matrix
+      (track.width & 0xFF00) >> 8, track.width & 0xFF, 0x00, 0x00,
+      // width
+      (track.height & 0xFF00) >> 8, track.height & 0xFF, 0x00, 0x00 // height
+      ]);
+
+      return box(types.tkhd, result);
+    };
+    /**
+     * Generate a track fragment (traf) box. A traf box collects metadata
+     * about tracks in a movie fragment (moof) box.
+     */
+
+    traf = function (track) {
+      var trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun, sampleDependencyTable, dataOffset, upperWordBaseMediaDecodeTime, lowerWordBaseMediaDecodeTime;
+      trackFragmentHeader = box(types.tfhd, new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x3a,
+      // flags
+      (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+      // track_ID
+      0x00, 0x00, 0x00, 0x01,
+      // sample_description_index
+      0x00, 0x00, 0x00, 0x00,
+      // default_sample_duration
+      0x00, 0x00, 0x00, 0x00,
+      // default_sample_size
+      0x00, 0x00, 0x00, 0x00 // default_sample_flags
+      ]));
+
+      upperWordBaseMediaDecodeTime = Math.floor(track.baseMediaDecodeTime / MAX_UINT32);
+      lowerWordBaseMediaDecodeTime = Math.floor(track.baseMediaDecodeTime % MAX_UINT32);
+      trackFragmentDecodeTime = box(types.tfdt, new Uint8Array([0x01,
+      // version 1
+      0x00, 0x00, 0x00,
+      // flags
+      // baseMediaDecodeTime
+      upperWordBaseMediaDecodeTime >>> 24 & 0xFF, upperWordBaseMediaDecodeTime >>> 16 & 0xFF, upperWordBaseMediaDecodeTime >>> 8 & 0xFF, upperWordBaseMediaDecodeTime & 0xFF, lowerWordBaseMediaDecodeTime >>> 24 & 0xFF, lowerWordBaseMediaDecodeTime >>> 16 & 0xFF, lowerWordBaseMediaDecodeTime >>> 8 & 0xFF, lowerWordBaseMediaDecodeTime & 0xFF])); // the data offset specifies the number of bytes from the start of
+      // the containing moof to the first payload byte of the associated
+      // mdat
+
+      dataOffset = 32 +
+      // tfhd
+      20 +
+      // tfdt
+      8 +
+      // traf header
+      16 +
+      // mfhd
+      8 +
+      // moof header
+      8; // mdat header
+      // audio tracks require less metadata
+
+      if (track.type === 'audio') {
+        trackFragmentRun = trun$1(track, dataOffset);
+        return box(types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun);
+      } // video tracks should contain an independent and disposable samples
+      // box (sdtp)
+      // generate one and adjust offsets to match
+
+      sampleDependencyTable = sdtp(track);
+      trackFragmentRun = trun$1(track, sampleDependencyTable.length + dataOffset);
+      return box(types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun, sampleDependencyTable);
+    };
+    /**
+     * Generate a track box.
+     * @param track {object} a track definition
+     * @return {Uint8Array} the track box
+     */
+
+    trak = function (track) {
+      track.duration = track.duration || 0xffffffff;
+      return box(types.trak, tkhd(track), mdia(track));
+    };
+    trex = function (track) {
+      var result = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+      // track_ID
+      0x00, 0x00, 0x00, 0x01,
+      // default_sample_description_index
+      0x00, 0x00, 0x00, 0x00,
+      // default_sample_duration
+      0x00, 0x00, 0x00, 0x00,
+      // default_sample_size
+      0x00, 0x01, 0x00, 0x01 // default_sample_flags
+      ]); // the last two bytes of default_sample_flags is the sample
+      // degradation priority, a hint about the importance of this sample
+      // relative to others. Lower the degradation priority for all sample
+      // types other than video.
+
+      if (track.type !== 'video') {
+        result[result.length - 1] = 0x00;
+      }
+      return box(types.trex, result);
+    };
+    (function () {
+      var audioTrun, videoTrun, trunHeader; // This method assumes all samples are uniform. That is, if a
+      // duration is present for the first sample, it will be present for
+      // all subsequent samples.
+      // see ISO/IEC 14496-12:2012, Section 8.8.8.1
+
+      trunHeader = function (samples, offset) {
+        var durationPresent = 0,
+          sizePresent = 0,
+          flagsPresent = 0,
+          compositionTimeOffset = 0; // trun flag constants
+
+        if (samples.length) {
+          if (samples[0].duration !== undefined) {
+            durationPresent = 0x1;
+          }
+          if (samples[0].size !== undefined) {
+            sizePresent = 0x2;
+          }
+          if (samples[0].flags !== undefined) {
+            flagsPresent = 0x4;
+          }
+          if (samples[0].compositionTimeOffset !== undefined) {
+            compositionTimeOffset = 0x8;
+          }
+        }
+        return [0x00,
+        // version 0
+        0x00, durationPresent | sizePresent | flagsPresent | compositionTimeOffset, 0x01,
+        // flags
+        (samples.length & 0xFF000000) >>> 24, (samples.length & 0xFF0000) >>> 16, (samples.length & 0xFF00) >>> 8, samples.length & 0xFF,
+        // sample_count
+        (offset & 0xFF000000) >>> 24, (offset & 0xFF0000) >>> 16, (offset & 0xFF00) >>> 8, offset & 0xFF // data_offset
+        ];
+      };
+
+      videoTrun = function (track, offset) {
+        var bytesOffest, bytes, header, samples, sample, i;
+        samples = track.samples || [];
+        offset += 8 + 12 + 16 * samples.length;
+        header = trunHeader(samples, offset);
+        bytes = new Uint8Array(header.length + samples.length * 16);
+        bytes.set(header);
+        bytesOffest = header.length;
+        for (i = 0; i < samples.length; i++) {
+          sample = samples[i];
+          bytes[bytesOffest++] = (sample.duration & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.duration & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.duration & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.duration & 0xFF; // sample_duration
+
+          bytes[bytesOffest++] = (sample.size & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.size & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.size & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.size & 0xFF; // sample_size
+
+          bytes[bytesOffest++] = sample.flags.isLeading << 2 | sample.flags.dependsOn;
+          bytes[bytesOffest++] = sample.flags.isDependedOn << 6 | sample.flags.hasRedundancy << 4 | sample.flags.paddingValue << 1 | sample.flags.isNonSyncSample;
+          bytes[bytesOffest++] = sample.flags.degradationPriority & 0xF0 << 8;
+          bytes[bytesOffest++] = sample.flags.degradationPriority & 0x0F; // sample_flags
+
+          bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.compositionTimeOffset & 0xFF; // sample_composition_time_offset
+        }
+
+        return box(types.trun, bytes);
+      };
+      audioTrun = function (track, offset) {
+        var bytes, bytesOffest, header, samples, sample, i;
+        samples = track.samples || [];
+        offset += 8 + 12 + 8 * samples.length;
+        header = trunHeader(samples, offset);
+        bytes = new Uint8Array(header.length + samples.length * 8);
+        bytes.set(header);
+        bytesOffest = header.length;
+        for (i = 0; i < samples.length; i++) {
+          sample = samples[i];
+          bytes[bytesOffest++] = (sample.duration & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.duration & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.duration & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.duration & 0xFF; // sample_duration
+
+          bytes[bytesOffest++] = (sample.size & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.size & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.size & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.size & 0xFF; // sample_size
+        }
+
+        return box(types.trun, bytes);
+      };
+      trun$1 = function (track, offset) {
+        if (track.type === 'audio') {
+          return audioTrun(track, offset);
+        }
+        return videoTrun(track, offset);
+      };
+    })();
+    var mp4Generator = {
+      ftyp: ftyp,
+      mdat: mdat,
+      moof: moof,
+      moov: moov,
+      initSegment: function (tracks) {
+        var fileType = ftyp(),
+          movie = moov(tracks),
+          result;
+        result = new Uint8Array(fileType.byteLength + movie.byteLength);
+        result.set(fileType);
+        result.set(movie, fileType.byteLength);
+        return result;
+      }
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+    // composed of the nal units that make up that frame
+    // Also keep track of cummulative data about the frame from the nal units such
+    // as the frame duration, starting pts, etc.
+
+    var groupNalsIntoFrames = function (nalUnits) {
+      var i,
+        currentNal,
+        currentFrame = [],
+        frames = []; // TODO added for LHLS, make sure this is OK
+
+      frames.byteLength = 0;
+      frames.nalCount = 0;
+      frames.duration = 0;
+      currentFrame.byteLength = 0;
+      for (i = 0; i < nalUnits.length; i++) {
+        currentNal = nalUnits[i]; // Split on 'aud'-type nal units
+
+        if (currentNal.nalUnitType === 'access_unit_delimiter_rbsp') {
+          // Since the very first nal unit is expected to be an AUD
+          // only push to the frames array when currentFrame is not empty
+          if (currentFrame.length) {
+            currentFrame.duration = currentNal.dts - currentFrame.dts; // TODO added for LHLS, make sure this is OK
+
+            frames.byteLength += currentFrame.byteLength;
+            frames.nalCount += currentFrame.length;
+            frames.duration += currentFrame.duration;
+            frames.push(currentFrame);
+          }
+          currentFrame = [currentNal];
+          currentFrame.byteLength = currentNal.data.byteLength;
+          currentFrame.pts = currentNal.pts;
+          currentFrame.dts = currentNal.dts;
+        } else {
+          // Specifically flag key frames for ease of use later
+          if (currentNal.nalUnitType === 'slice_layer_without_partitioning_rbsp_idr') {
+            currentFrame.keyFrame = true;
+          }
+          currentFrame.duration = currentNal.dts - currentFrame.dts;
+          currentFrame.byteLength += currentNal.data.byteLength;
+          currentFrame.push(currentNal);
+        }
+      } // For the last frame, use the duration of the previous frame if we
+      // have nothing better to go on
+
+      if (frames.length && (!currentFrame.duration || currentFrame.duration <= 0)) {
+        currentFrame.duration = frames[frames.length - 1].duration;
+      } // Push the final frame
+      // TODO added for LHLS, make sure this is OK
+
+      frames.byteLength += currentFrame.byteLength;
+      frames.nalCount += currentFrame.length;
+      frames.duration += currentFrame.duration;
+      frames.push(currentFrame);
+      return frames;
+    }; // Convert an array of frames into an array of Gop with each Gop being composed
+    // of the frames that make up that Gop
+    // Also keep track of cummulative data about the Gop from the frames such as the
+    // Gop duration, starting pts, etc.
+
+    var groupFramesIntoGops = function (frames) {
+      var i,
+        currentFrame,
+        currentGop = [],
+        gops = []; // We must pre-set some of the values on the Gop since we
+      // keep running totals of these values
+
+      currentGop.byteLength = 0;
+      currentGop.nalCount = 0;
+      currentGop.duration = 0;
+      currentGop.pts = frames[0].pts;
+      currentGop.dts = frames[0].dts; // store some metadata about all the Gops
+
+      gops.byteLength = 0;
+      gops.nalCount = 0;
+      gops.duration = 0;
+      gops.pts = frames[0].pts;
+      gops.dts = frames[0].dts;
+      for (i = 0; i < frames.length; i++) {
+        currentFrame = frames[i];
+        if (currentFrame.keyFrame) {
+          // Since the very first frame is expected to be an keyframe
+          // only push to the gops array when currentGop is not empty
+          if (currentGop.length) {
+            gops.push(currentGop);
+            gops.byteLength += currentGop.byteLength;
+            gops.nalCount += currentGop.nalCount;
+            gops.duration += currentGop.duration;
+          }
+          currentGop = [currentFrame];
+          currentGop.nalCount = currentFrame.length;
+          currentGop.byteLength = currentFrame.byteLength;
+          currentGop.pts = currentFrame.pts;
+          currentGop.dts = currentFrame.dts;
+          currentGop.duration = currentFrame.duration;
+        } else {
+          currentGop.duration += currentFrame.duration;
+          currentGop.nalCount += currentFrame.length;
+          currentGop.byteLength += currentFrame.byteLength;
+          currentGop.push(currentFrame);
+        }
+      }
+      if (gops.length && currentGop.duration <= 0) {
+        currentGop.duration = gops[gops.length - 1].duration;
+      }
+      gops.byteLength += currentGop.byteLength;
+      gops.nalCount += currentGop.nalCount;
+      gops.duration += currentGop.duration; // push the final Gop
+
+      gops.push(currentGop);
+      return gops;
+    };
+    /*
+     * Search for the first keyframe in the GOPs and throw away all frames
+     * until that keyframe. Then extend the duration of the pulled keyframe
+     * and pull the PTS and DTS of the keyframe so that it covers the time
+     * range of the frames that were disposed.
+     *
+     * @param {Array} gops video GOPs
+     * @returns {Array} modified video GOPs
+     */
+
+    var extendFirstKeyFrame = function (gops) {
+      var currentGop;
+      if (!gops[0][0].keyFrame && gops.length > 1) {
+        // Remove the first GOP
+        currentGop = gops.shift();
+        gops.byteLength -= currentGop.byteLength;
+        gops.nalCount -= currentGop.nalCount; // Extend the first frame of what is now the
+        // first gop to cover the time period of the
+        // frames we just removed
+
+        gops[0][0].dts = currentGop.dts;
+        gops[0][0].pts = currentGop.pts;
+        gops[0][0].duration += currentGop.duration;
+      }
+      return gops;
+    };
+    /**
+     * Default sample object
+     * see ISO/IEC 14496-12:2012, section 8.6.4.3
+     */
+
+    var createDefaultSample = function () {
+      return {
+        size: 0,
+        flags: {
+          isLeading: 0,
+          dependsOn: 1,
+          isDependedOn: 0,
+          hasRedundancy: 0,
+          degradationPriority: 0,
+          isNonSyncSample: 1
+        }
+      };
+    };
+    /*
+     * Collates information from a video frame into an object for eventual
+     * entry into an MP4 sample table.
+     *
+     * @param {Object} frame the video frame
+     * @param {Number} dataOffset the byte offset to position the sample
+     * @return {Object} object containing sample table info for a frame
+     */
+
+    var sampleForFrame = function (frame, dataOffset) {
+      var sample = createDefaultSample();
+      sample.dataOffset = dataOffset;
+      sample.compositionTimeOffset = frame.pts - frame.dts;
+      sample.duration = frame.duration;
+      sample.size = 4 * frame.length; // Space for nal unit size
+
+      sample.size += frame.byteLength;
+      if (frame.keyFrame) {
+        sample.flags.dependsOn = 2;
+        sample.flags.isNonSyncSample = 0;
+      }
+      return sample;
+    }; // generate the track's sample table from an array of gops
+
+    var generateSampleTable$1 = function (gops, baseDataOffset) {
+      var h,
+        i,
+        sample,
+        currentGop,
+        currentFrame,
+        dataOffset = baseDataOffset || 0,
+        samples = [];
+      for (h = 0; h < gops.length; h++) {
+        currentGop = gops[h];
+        for (i = 0; i < currentGop.length; i++) {
+          currentFrame = currentGop[i];
+          sample = sampleForFrame(currentFrame, dataOffset);
+          dataOffset += sample.size;
+          samples.push(sample);
+        }
+      }
+      return samples;
+    }; // generate the track's raw mdat data from an array of gops
+
+    var concatenateNalData = function (gops) {
+      var h,
+        i,
+        j,
+        currentGop,
+        currentFrame,
+        currentNal,
+        dataOffset = 0,
+        nalsByteLength = gops.byteLength,
+        numberOfNals = gops.nalCount,
+        totalByteLength = nalsByteLength + 4 * numberOfNals,
+        data = new Uint8Array(totalByteLength),
+        view = new DataView(data.buffer); // For each Gop..
+
+      for (h = 0; h < gops.length; h++) {
+        currentGop = gops[h]; // For each Frame..
+
+        for (i = 0; i < currentGop.length; i++) {
+          currentFrame = currentGop[i]; // For each NAL..
+
+          for (j = 0; j < currentFrame.length; j++) {
+            currentNal = currentFrame[j];
+            view.setUint32(dataOffset, currentNal.data.byteLength);
+            dataOffset += 4;
+            data.set(currentNal.data, dataOffset);
+            dataOffset += currentNal.data.byteLength;
+          }
+        }
+      }
+      return data;
+    }; // generate the track's sample table from a frame
+
+    var generateSampleTableForFrame = function (frame, baseDataOffset) {
+      var sample,
+        dataOffset = baseDataOffset || 0,
+        samples = [];
+      sample = sampleForFrame(frame, dataOffset);
+      samples.push(sample);
+      return samples;
+    }; // generate the track's raw mdat data from a frame
+
+    var concatenateNalDataForFrame = function (frame) {
+      var i,
+        currentNal,
+        dataOffset = 0,
+        nalsByteLength = frame.byteLength,
+        numberOfNals = frame.length,
+        totalByteLength = nalsByteLength + 4 * numberOfNals,
+        data = new Uint8Array(totalByteLength),
+        view = new DataView(data.buffer); // For each NAL..
+
+      for (i = 0; i < frame.length; i++) {
+        currentNal = frame[i];
+        view.setUint32(dataOffset, currentNal.data.byteLength);
+        dataOffset += 4;
+        data.set(currentNal.data, dataOffset);
+        dataOffset += currentNal.data.byteLength;
+      }
+      return data;
+    };
+    var frameUtils$1 = {
+      groupNalsIntoFrames: groupNalsIntoFrames,
+      groupFramesIntoGops: groupFramesIntoGops,
+      extendFirstKeyFrame: extendFirstKeyFrame,
+      generateSampleTable: generateSampleTable$1,
+      concatenateNalData: concatenateNalData,
+      generateSampleTableForFrame: generateSampleTableForFrame,
+      concatenateNalDataForFrame: concatenateNalDataForFrame
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var highPrefix = [33, 16, 5, 32, 164, 27];
+    var lowPrefix = [33, 65, 108, 84, 1, 2, 4, 8, 168, 2, 4, 8, 17, 191, 252];
+    var zeroFill = function (count) {
+      var a = [];
+      while (count--) {
+        a.push(0);
+      }
+      return a;
+    };
+    var makeTable = function (metaTable) {
+      return Object.keys(metaTable).reduce(function (obj, key) {
+        obj[key] = new Uint8Array(metaTable[key].reduce(function (arr, part) {
+          return arr.concat(part);
+        }, []));
+        return obj;
+      }, {});
+    };
+    var silence;
+    var silence_1 = function () {
+      if (!silence) {
+        // Frames-of-silence to use for filling in missing AAC frames
+        var coneOfSilence = {
+          96000: [highPrefix, [227, 64], zeroFill(154), [56]],
+          88200: [highPrefix, [231], zeroFill(170), [56]],
+          64000: [highPrefix, [248, 192], zeroFill(240), [56]],
+          48000: [highPrefix, [255, 192], zeroFill(268), [55, 148, 128], zeroFill(54), [112]],
+          44100: [highPrefix, [255, 192], zeroFill(268), [55, 163, 128], zeroFill(84), [112]],
+          32000: [highPrefix, [255, 192], zeroFill(268), [55, 234], zeroFill(226), [112]],
+          24000: [highPrefix, [255, 192], zeroFill(268), [55, 255, 128], zeroFill(268), [111, 112], zeroFill(126), [224]],
+          16000: [highPrefix, [255, 192], zeroFill(268), [55, 255, 128], zeroFill(268), [111, 255], zeroFill(269), [223, 108], zeroFill(195), [1, 192]],
+          12000: [lowPrefix, zeroFill(268), [3, 127, 248], zeroFill(268), [6, 255, 240], zeroFill(268), [13, 255, 224], zeroFill(268), [27, 253, 128], zeroFill(259), [56]],
+          11025: [lowPrefix, zeroFill(268), [3, 127, 248], zeroFill(268), [6, 255, 240], zeroFill(268), [13, 255, 224], zeroFill(268), [27, 255, 192], zeroFill(268), [55, 175, 128], zeroFill(108), [112]],
+          8000: [lowPrefix, zeroFill(268), [3, 121, 16], zeroFill(47), [7]]
+        };
+        silence = makeTable(coneOfSilence);
+      }
+      return silence;
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var ONE_SECOND_IN_TS$4 = 90000,
+      // 90kHz clock
+      secondsToVideoTs,
+      secondsToAudioTs,
+      videoTsToSeconds,
+      audioTsToSeconds,
+      audioTsToVideoTs,
+      videoTsToAudioTs,
+      metadataTsToSeconds;
+    secondsToVideoTs = function (seconds) {
+      return seconds * ONE_SECOND_IN_TS$4;
+    };
+    secondsToAudioTs = function (seconds, sampleRate) {
+      return seconds * sampleRate;
+    };
+    videoTsToSeconds = function (timestamp) {
+      return timestamp / ONE_SECOND_IN_TS$4;
+    };
+    audioTsToSeconds = function (timestamp, sampleRate) {
+      return timestamp / sampleRate;
+    };
+    audioTsToVideoTs = function (timestamp, sampleRate) {
+      return secondsToVideoTs(audioTsToSeconds(timestamp, sampleRate));
+    };
+    videoTsToAudioTs = function (timestamp, sampleRate) {
+      return secondsToAudioTs(videoTsToSeconds(timestamp), sampleRate);
+    };
+    /**
+     * Adjust ID3 tag or caption timing information by the timeline pts values
+     * (if keepOriginalTimestamps is false) and convert to seconds
+     */
+
+    metadataTsToSeconds = function (timestamp, timelineStartPts, keepOriginalTimestamps) {
+      return videoTsToSeconds(keepOriginalTimestamps ? timestamp : timestamp - timelineStartPts);
+    };
+    var clock$2 = {
+      ONE_SECOND_IN_TS: ONE_SECOND_IN_TS$4,
+      secondsToVideoTs: secondsToVideoTs,
+      secondsToAudioTs: secondsToAudioTs,
+      videoTsToSeconds: videoTsToSeconds,
+      audioTsToSeconds: audioTsToSeconds,
+      audioTsToVideoTs: audioTsToVideoTs,
+      videoTsToAudioTs: videoTsToAudioTs,
+      metadataTsToSeconds: metadataTsToSeconds
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var coneOfSilence = silence_1;
+    var clock$1 = clock$2;
+    /**
+     * Sum the `byteLength` properties of the data in each AAC frame
+     */
+
+    var sumFrameByteLengths = function (array) {
+      var i,
+        currentObj,
+        sum = 0; // sum the byteLength's all each nal unit in the frame
+
+      for (i = 0; i < array.length; i++) {
+        currentObj = array[i];
+        sum += currentObj.data.byteLength;
+      }
+      return sum;
+    }; // Possibly pad (prefix) the audio track with silence if appending this track
+    // would lead to the introduction of a gap in the audio buffer
+
+    var prefixWithSilence = function (track, frames, audioAppendStartTs, videoBaseMediaDecodeTime) {
+      var baseMediaDecodeTimeTs,
+        frameDuration = 0,
+        audioGapDuration = 0,
+        audioFillFrameCount = 0,
+        audioFillDuration = 0,
+        silentFrame,
+        i,
+        firstFrame;
+      if (!frames.length) {
+        return;
+      }
+      baseMediaDecodeTimeTs = clock$1.audioTsToVideoTs(track.baseMediaDecodeTime, track.samplerate); // determine frame clock duration based on sample rate, round up to avoid overfills
+
+      frameDuration = Math.ceil(clock$1.ONE_SECOND_IN_TS / (track.samplerate / 1024));
+      if (audioAppendStartTs && videoBaseMediaDecodeTime) {
+        // insert the shortest possible amount (audio gap or audio to video gap)
+        audioGapDuration = baseMediaDecodeTimeTs - Math.max(audioAppendStartTs, videoBaseMediaDecodeTime); // number of full frames in the audio gap
+
+        audioFillFrameCount = Math.floor(audioGapDuration / frameDuration);
+        audioFillDuration = audioFillFrameCount * frameDuration;
+      } // don't attempt to fill gaps smaller than a single frame or larger
+      // than a half second
+
+      if (audioFillFrameCount < 1 || audioFillDuration > clock$1.ONE_SECOND_IN_TS / 2) {
+        return;
+      }
+      silentFrame = coneOfSilence()[track.samplerate];
+      if (!silentFrame) {
+        // we don't have a silent frame pregenerated for the sample rate, so use a frame
+        // from the content instead
+        silentFrame = frames[0].data;
+      }
+      for (i = 0; i < audioFillFrameCount; i++) {
+        firstFrame = frames[0];
+        frames.splice(0, 0, {
+          data: silentFrame,
+          dts: firstFrame.dts - frameDuration,
+          pts: firstFrame.pts - frameDuration
+        });
+      }
+      track.baseMediaDecodeTime -= Math.floor(clock$1.videoTsToAudioTs(audioFillDuration, track.samplerate));
+      return audioFillDuration;
+    }; // If the audio segment extends before the earliest allowed dts
+    // value, remove AAC frames until starts at or after the earliest
+    // allowed DTS so that we don't end up with a negative baseMedia-
+    // DecodeTime for the audio track
+
+    var trimAdtsFramesByEarliestDts = function (adtsFrames, track, earliestAllowedDts) {
+      if (track.minSegmentDts >= earliestAllowedDts) {
+        return adtsFrames;
+      } // We will need to recalculate the earliest segment Dts
+
+      track.minSegmentDts = Infinity;
+      return adtsFrames.filter(function (currentFrame) {
+        // If this is an allowed frame, keep it and record it's Dts
+        if (currentFrame.dts >= earliestAllowedDts) {
+          track.minSegmentDts = Math.min(track.minSegmentDts, currentFrame.dts);
+          track.minSegmentPts = track.minSegmentDts;
+          return true;
+        } // Otherwise, discard it
+
+        return false;
+      });
+    }; // generate the track's raw mdat data from an array of frames
+
+    var generateSampleTable = function (frames) {
+      var i,
+        currentFrame,
+        samples = [];
+      for (i = 0; i < frames.length; i++) {
+        currentFrame = frames[i];
+        samples.push({
+          size: currentFrame.data.byteLength,
+          duration: 1024 // For AAC audio, all samples contain 1024 samples
+        });
+      }
+
+      return samples;
+    }; // generate the track's sample table from an array of frames
+
+    var concatenateFrameData = function (frames) {
+      var i,
+        currentFrame,
+        dataOffset = 0,
+        data = new Uint8Array(sumFrameByteLengths(frames));
+      for (i = 0; i < frames.length; i++) {
+        currentFrame = frames[i];
+        data.set(currentFrame.data, dataOffset);
+        dataOffset += currentFrame.data.byteLength;
+      }
+      return data;
+    };
+    var audioFrameUtils$1 = {
+      prefixWithSilence: prefixWithSilence,
+      trimAdtsFramesByEarliestDts: trimAdtsFramesByEarliestDts,
+      generateSampleTable: generateSampleTable,
+      concatenateFrameData: concatenateFrameData
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var ONE_SECOND_IN_TS$3 = clock$2.ONE_SECOND_IN_TS;
+    /**
+     * Store information about the start and end of the track and the
+     * duration for each frame/sample we process in order to calculate
+     * the baseMediaDecodeTime
+     */
+
+    var collectDtsInfo = function (track, data) {
+      if (typeof data.pts === 'number') {
+        if (track.timelineStartInfo.pts === undefined) {
+          track.timelineStartInfo.pts = data.pts;
+        }
+        if (track.minSegmentPts === undefined) {
+          track.minSegmentPts = data.pts;
+        } else {
+          track.minSegmentPts = Math.min(track.minSegmentPts, data.pts);
+        }
+        if (track.maxSegmentPts === undefined) {
+          track.maxSegmentPts = data.pts;
+        } else {
+          track.maxSegmentPts = Math.max(track.maxSegmentPts, data.pts);
+        }
+      }
+      if (typeof data.dts === 'number') {
+        if (track.timelineStartInfo.dts === undefined) {
+          track.timelineStartInfo.dts = data.dts;
+        }
+        if (track.minSegmentDts === undefined) {
+          track.minSegmentDts = data.dts;
+        } else {
+          track.minSegmentDts = Math.min(track.minSegmentDts, data.dts);
+        }
+        if (track.maxSegmentDts === undefined) {
+          track.maxSegmentDts = data.dts;
+        } else {
+          track.maxSegmentDts = Math.max(track.maxSegmentDts, data.dts);
+        }
+      }
+    };
+    /**
+     * Clear values used to calculate the baseMediaDecodeTime between
+     * tracks
+     */
+
+    var clearDtsInfo = function (track) {
+      delete track.minSegmentDts;
+      delete track.maxSegmentDts;
+      delete track.minSegmentPts;
+      delete track.maxSegmentPts;
+    };
+    /**
+     * Calculate the track's baseMediaDecodeTime based on the earliest
+     * DTS the transmuxer has ever seen and the minimum DTS for the
+     * current track
+     * @param track {object} track metadata configuration
+     * @param keepOriginalTimestamps {boolean} If true, keep the timestamps
+     *        in the source; false to adjust the first segment to start at 0.
+     */
+
+    var calculateTrackBaseMediaDecodeTime = function (track, keepOriginalTimestamps) {
+      var baseMediaDecodeTime,
+        scale,
+        minSegmentDts = track.minSegmentDts; // Optionally adjust the time so the first segment starts at zero.
+
+      if (!keepOriginalTimestamps) {
+        minSegmentDts -= track.timelineStartInfo.dts;
+      } // track.timelineStartInfo.baseMediaDecodeTime is the location, in time, where
+      // we want the start of the first segment to be placed
+
+      baseMediaDecodeTime = track.timelineStartInfo.baseMediaDecodeTime; // Add to that the distance this segment is from the very first
+
+      baseMediaDecodeTime += minSegmentDts; // baseMediaDecodeTime must not become negative
+
+      baseMediaDecodeTime = Math.max(0, baseMediaDecodeTime);
+      if (track.type === 'audio') {
+        // Audio has a different clock equal to the sampling_rate so we need to
+        // scale the PTS values into the clock rate of the track
+        scale = track.samplerate / ONE_SECOND_IN_TS$3;
+        baseMediaDecodeTime *= scale;
+        baseMediaDecodeTime = Math.floor(baseMediaDecodeTime);
+      }
+      return baseMediaDecodeTime;
+    };
+    var trackDecodeInfo$1 = {
+      clearDtsInfo: clearDtsInfo,
+      calculateTrackBaseMediaDecodeTime: calculateTrackBaseMediaDecodeTime,
+      collectDtsInfo: collectDtsInfo
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Reads in-band caption information from a video elementary
+     * stream. Captions must follow the CEA-708 standard for injection
+     * into an MPEG-2 transport streams.
+     * @see https://en.wikipedia.org/wiki/CEA-708
+     * @see https://www.gpo.gov/fdsys/pkg/CFR-2007-title47-vol1/pdf/CFR-2007-title47-vol1-sec15-119.pdf
+     */
+    // payload type field to indicate how they are to be
+    // interpreted. CEAS-708 caption content is always transmitted with
+    // payload type 0x04.
+
+    var USER_DATA_REGISTERED_ITU_T_T35 = 4,
+      RBSP_TRAILING_BITS = 128;
+    /**
+      * Parse a supplemental enhancement information (SEI) NAL unit.
+      * Stops parsing once a message of type ITU T T35 has been found.
+      *
+      * @param bytes {Uint8Array} the bytes of a SEI NAL unit
+      * @return {object} the parsed SEI payload
+      * @see Rec. ITU-T H.264, 7.3.2.3.1
+      */
+
+    var parseSei = function (bytes) {
+      var i = 0,
+        result = {
+          payloadType: -1,
+          payloadSize: 0
+        },
+        payloadType = 0,
+        payloadSize = 0; // go through the sei_rbsp parsing each each individual sei_message
+
+      while (i < bytes.byteLength) {
+        // stop once we have hit the end of the sei_rbsp
+        if (bytes[i] === RBSP_TRAILING_BITS) {
+          break;
+        } // Parse payload type
+
+        while (bytes[i] === 0xFF) {
+          payloadType += 255;
+          i++;
+        }
+        payloadType += bytes[i++]; // Parse payload size
+
+        while (bytes[i] === 0xFF) {
+          payloadSize += 255;
+          i++;
+        }
+        payloadSize += bytes[i++]; // this sei_message is a 608/708 caption so save it and break
+        // there can only ever be one caption message in a frame's sei
+
+        if (!result.payload && payloadType === USER_DATA_REGISTERED_ITU_T_T35) {
+          var userIdentifier = String.fromCharCode(bytes[i + 3], bytes[i + 4], bytes[i + 5], bytes[i + 6]);
+          if (userIdentifier === 'GA94') {
+            result.payloadType = payloadType;
+            result.payloadSize = payloadSize;
+            result.payload = bytes.subarray(i, i + payloadSize);
+            break;
+          } else {
+            result.payload = void 0;
+          }
+        } // skip the payload and parse the next message
+
+        i += payloadSize;
+        payloadType = 0;
+        payloadSize = 0;
+      }
+      return result;
+    }; // see ANSI/SCTE 128-1 (2013), section 8.1
+
+    var parseUserData = function (sei) {
+      // itu_t_t35_contry_code must be 181 (United States) for
+      // captions
+      if (sei.payload[0] !== 181) {
+        return null;
+      } // itu_t_t35_provider_code should be 49 (ATSC) for captions
+
+      if ((sei.payload[1] << 8 | sei.payload[2]) !== 49) {
+        return null;
+      } // the user_identifier should be "GA94" to indicate ATSC1 data
+
+      if (String.fromCharCode(sei.payload[3], sei.payload[4], sei.payload[5], sei.payload[6]) !== 'GA94') {
+        return null;
+      } // finally, user_data_type_code should be 0x03 for caption data
+
+      if (sei.payload[7] !== 0x03) {
+        return null;
+      } // return the user_data_type_structure and strip the trailing
+      // marker bits
+
+      return sei.payload.subarray(8, sei.payload.length - 1);
+    }; // see CEA-708-D, section 4.4
+
+    var parseCaptionPackets = function (pts, userData) {
+      var results = [],
+        i,
+        count,
+        offset,
+        data; // if this is just filler, return immediately
+
+      if (!(userData[0] & 0x40)) {
+        return results;
+      } // parse out the cc_data_1 and cc_data_2 fields
+
+      count = userData[0] & 0x1f;
+      for (i = 0; i < count; i++) {
+        offset = i * 3;
+        data = {
+          type: userData[offset + 2] & 0x03,
+          pts: pts
+        }; // capture cc data when cc_valid is 1
+
+        if (userData[offset + 2] & 0x04) {
+          data.ccData = userData[offset + 3] << 8 | userData[offset + 4];
+          results.push(data);
+        }
+      }
+      return results;
+    };
+    var discardEmulationPreventionBytes$1 = function (data) {
+      var length = data.byteLength,
+        emulationPreventionBytesPositions = [],
+        i = 1,
+        newLength,
+        newData; // Find all `Emulation Prevention Bytes`
+
+      while (i < length - 2) {
+        if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0x03) {
+          emulationPreventionBytesPositions.push(i + 2);
+          i += 2;
+        } else {
+          i++;
+        }
+      } // If no Emulation Prevention Bytes were found just return the original
+      // array
+
+      if (emulationPreventionBytesPositions.length === 0) {
+        return data;
+      } // Create a new array to hold the NAL unit data
+
+      newLength = length - emulationPreventionBytesPositions.length;
+      newData = new Uint8Array(newLength);
+      var sourceIndex = 0;
+      for (i = 0; i < newLength; sourceIndex++, i++) {
+        if (sourceIndex === emulationPreventionBytesPositions[0]) {
+          // Skip this byte
+          sourceIndex++; // Remove this position index
+
+          emulationPreventionBytesPositions.shift();
+        }
+        newData[i] = data[sourceIndex];
+      }
+      return newData;
+    }; // exports
+
+    var captionPacketParser = {
+      parseSei: parseSei,
+      parseUserData: parseUserData,
+      parseCaptionPackets: parseCaptionPackets,
+      discardEmulationPreventionBytes: discardEmulationPreventionBytes$1,
+      USER_DATA_REGISTERED_ITU_T_T35: USER_DATA_REGISTERED_ITU_T_T35
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Reads in-band caption information from a video elementary
+     * stream. Captions must follow the CEA-708 standard for injection
+     * into an MPEG-2 transport streams.
+     * @see https://en.wikipedia.org/wiki/CEA-708
+     * @see https://www.gpo.gov/fdsys/pkg/CFR-2007-title47-vol1/pdf/CFR-2007-title47-vol1-sec15-119.pdf
+     */
+    // Link To Transport
+    // -----------------
+
+    var Stream$7 = stream;
+    var cea708Parser = captionPacketParser;
+    var CaptionStream$2 = function (options) {
+      options = options || {};
+      CaptionStream$2.prototype.init.call(this); // parse708captions flag, default to true
+
+      this.parse708captions_ = typeof options.parse708captions === 'boolean' ? options.parse708captions : true;
+      this.captionPackets_ = [];
+      this.ccStreams_ = [new Cea608Stream(0, 0),
+      // eslint-disable-line no-use-before-define
+      new Cea608Stream(0, 1),
+      // eslint-disable-line no-use-before-define
+      new Cea608Stream(1, 0),
+      // eslint-disable-line no-use-before-define
+      new Cea608Stream(1, 1) // eslint-disable-line no-use-before-define
+      ];
+
+      if (this.parse708captions_) {
+        this.cc708Stream_ = new Cea708Stream({
+          captionServices: options.captionServices
+        }); // eslint-disable-line no-use-before-define
+      }
+
+      this.reset(); // forward data and done events from CCs to this CaptionStream
+
+      this.ccStreams_.forEach(function (cc) {
+        cc.on('data', this.trigger.bind(this, 'data'));
+        cc.on('partialdone', this.trigger.bind(this, 'partialdone'));
+        cc.on('done', this.trigger.bind(this, 'done'));
+      }, this);
+      if (this.parse708captions_) {
+        this.cc708Stream_.on('data', this.trigger.bind(this, 'data'));
+        this.cc708Stream_.on('partialdone', this.trigger.bind(this, 'partialdone'));
+        this.cc708Stream_.on('done', this.trigger.bind(this, 'done'));
+      }
+    };
+    CaptionStream$2.prototype = new Stream$7();
+    CaptionStream$2.prototype.push = function (event) {
+      var sei, userData, newCaptionPackets; // only examine SEI NALs
+
+      if (event.nalUnitType !== 'sei_rbsp') {
+        return;
+      } // parse the sei
+
+      sei = cea708Parser.parseSei(event.escapedRBSP); // no payload data, skip
+
+      if (!sei.payload) {
+        return;
+      } // ignore everything but user_data_registered_itu_t_t35
+
+      if (sei.payloadType !== cea708Parser.USER_DATA_REGISTERED_ITU_T_T35) {
+        return;
+      } // parse out the user data payload
+
+      userData = cea708Parser.parseUserData(sei); // ignore unrecognized userData
+
+      if (!userData) {
+        return;
+      } // Sometimes, the same segment # will be downloaded twice. To stop the
+      // caption data from being processed twice, we track the latest dts we've
+      // received and ignore everything with a dts before that. However, since
+      // data for a specific dts can be split across packets on either side of
+      // a segment boundary, we need to make sure we *don't* ignore the packets
+      // from the *next* segment that have dts === this.latestDts_. By constantly
+      // tracking the number of packets received with dts === this.latestDts_, we
+      // know how many should be ignored once we start receiving duplicates.
+
+      if (event.dts < this.latestDts_) {
+        // We've started getting older data, so set the flag.
+        this.ignoreNextEqualDts_ = true;
+        return;
+      } else if (event.dts === this.latestDts_ && this.ignoreNextEqualDts_) {
+        this.numSameDts_--;
+        if (!this.numSameDts_) {
+          // We've received the last duplicate packet, time to start processing again
+          this.ignoreNextEqualDts_ = false;
+        }
+        return;
+      } // parse out CC data packets and save them for later
+
+      newCaptionPackets = cea708Parser.parseCaptionPackets(event.pts, userData);
+      this.captionPackets_ = this.captionPackets_.concat(newCaptionPackets);
+      if (this.latestDts_ !== event.dts) {
+        this.numSameDts_ = 0;
+      }
+      this.numSameDts_++;
+      this.latestDts_ = event.dts;
+    };
+    CaptionStream$2.prototype.flushCCStreams = function (flushType) {
+      this.ccStreams_.forEach(function (cc) {
+        return flushType === 'flush' ? cc.flush() : cc.partialFlush();
+      }, this);
+    };
+    CaptionStream$2.prototype.flushStream = function (flushType) {
+      // make sure we actually parsed captions before proceeding
+      if (!this.captionPackets_.length) {
+        this.flushCCStreams(flushType);
+        return;
+      } // In Chrome, the Array#sort function is not stable so add a
+      // presortIndex that we can use to ensure we get a stable-sort
+
+      this.captionPackets_.forEach(function (elem, idx) {
+        elem.presortIndex = idx;
+      }); // sort caption byte-pairs based on their PTS values
+
+      this.captionPackets_.sort(function (a, b) {
+        if (a.pts === b.pts) {
+          return a.presortIndex - b.presortIndex;
+        }
+        return a.pts - b.pts;
+      });
+      this.captionPackets_.forEach(function (packet) {
+        if (packet.type < 2) {
+          // Dispatch packet to the right Cea608Stream
+          this.dispatchCea608Packet(packet);
+        } else {
+          // Dispatch packet to the Cea708Stream
+          this.dispatchCea708Packet(packet);
+        }
+      }, this);
+      this.captionPackets_.length = 0;
+      this.flushCCStreams(flushType);
+    };
+    CaptionStream$2.prototype.flush = function () {
+      return this.flushStream('flush');
+    }; // Only called if handling partial data
+
+    CaptionStream$2.prototype.partialFlush = function () {
+      return this.flushStream('partialFlush');
+    };
+    CaptionStream$2.prototype.reset = function () {
+      this.latestDts_ = null;
+      this.ignoreNextEqualDts_ = false;
+      this.numSameDts_ = 0;
+      this.activeCea608Channel_ = [null, null];
+      this.ccStreams_.forEach(function (ccStream) {
+        ccStream.reset();
+      });
+    }; // From the CEA-608 spec:
+
+    /*
+     * When XDS sub-packets are interleaved with other services, the end of each sub-packet shall be followed
+     * by a control pair to change to a different service. When any of the control codes from 0x10 to 0x1F is
+     * used to begin a control code pair, it indicates the return to captioning or Text data. The control code pair
+     * and subsequent data should then be processed according to the FCC rules. It may be necessary for the
+     * line 21 data encoder to automatically insert a control code pair (i.e. RCL, RU2, RU3, RU4, RDC, or RTD)
+     * to switch to captioning or Text.
+    */
+    // With that in mind, we ignore any data between an XDS control code and a
+    // subsequent closed-captioning control code.
+
+    CaptionStream$2.prototype.dispatchCea608Packet = function (packet) {
+      // NOTE: packet.type is the CEA608 field
+      if (this.setsTextOrXDSActive(packet)) {
+        this.activeCea608Channel_[packet.type] = null;
+      } else if (this.setsChannel1Active(packet)) {
+        this.activeCea608Channel_[packet.type] = 0;
+      } else if (this.setsChannel2Active(packet)) {
+        this.activeCea608Channel_[packet.type] = 1;
+      }
+      if (this.activeCea608Channel_[packet.type] === null) {
+        // If we haven't received anything to set the active channel, or the
+        // packets are Text/XDS data, discard the data; we don't want jumbled
+        // captions
+        return;
+      }
+      this.ccStreams_[(packet.type << 1) + this.activeCea608Channel_[packet.type]].push(packet);
+    };
+    CaptionStream$2.prototype.setsChannel1Active = function (packet) {
+      return (packet.ccData & 0x7800) === 0x1000;
+    };
+    CaptionStream$2.prototype.setsChannel2Active = function (packet) {
+      return (packet.ccData & 0x7800) === 0x1800;
+    };
+    CaptionStream$2.prototype.setsTextOrXDSActive = function (packet) {
+      return (packet.ccData & 0x7100) === 0x0100 || (packet.ccData & 0x78fe) === 0x102a || (packet.ccData & 0x78fe) === 0x182a;
+    };
+    CaptionStream$2.prototype.dispatchCea708Packet = function (packet) {
+      if (this.parse708captions_) {
+        this.cc708Stream_.push(packet);
+      }
+    }; // ----------------------
+    // Session to Application
+    // ----------------------
+    // This hash maps special and extended character codes to their
+    // proper Unicode equivalent. The first one-byte key is just a
+    // non-standard character code. The two-byte keys that follow are
+    // the extended CEA708 character codes, along with the preceding
+    // 0x10 extended character byte to distinguish these codes from
+    // non-extended character codes. Every CEA708 character code that
+    // is not in this object maps directly to a standard unicode
+    // character code.
+    // The transparent space and non-breaking transparent space are
+    // technically not fully supported since there is no code to
+    // make them transparent, so they have normal non-transparent
+    // stand-ins.
+    // The special closed caption (CC) character isn't a standard
+    // unicode character, so a fairly similar unicode character was
+    // chosen in it's place.
+
+    var CHARACTER_TRANSLATION_708 = {
+      0x7f: 0x266a,
+      // ♪
+      0x1020: 0x20,
+      // Transparent Space
+      0x1021: 0xa0,
+      // Nob-breaking Transparent Space
+      0x1025: 0x2026,
+      // …
+      0x102a: 0x0160,
+      // Š
+      0x102c: 0x0152,
+      // Œ
+      0x1030: 0x2588,
+      // █
+      0x1031: 0x2018,
+      // ‘
+      0x1032: 0x2019,
+      // ’
+      0x1033: 0x201c,
+      // “
+      0x1034: 0x201d,
+      // ”
+      0x1035: 0x2022,
+      // •
+      0x1039: 0x2122,
+      // ™
+      0x103a: 0x0161,
+      // š
+      0x103c: 0x0153,
+      // œ
+      0x103d: 0x2120,
+      // ℠
+      0x103f: 0x0178,
+      // Ÿ
+      0x1076: 0x215b,
+      // ⅛
+      0x1077: 0x215c,
+      // ⅜
+      0x1078: 0x215d,
+      // ⅝
+      0x1079: 0x215e,
+      // ⅞
+      0x107a: 0x23d0,
+      // ⏐
+      0x107b: 0x23a4,
+      // ⎤
+      0x107c: 0x23a3,
+      // ⎣
+      0x107d: 0x23af,
+      // ⎯
+      0x107e: 0x23a6,
+      // ⎦
+      0x107f: 0x23a1,
+      // ⎡
+      0x10a0: 0x3138 // ㄸ (CC char)
+    };
+
+    var get708CharFromCode = function (code) {
+      var newCode = CHARACTER_TRANSLATION_708[code] || code;
+      if (code & 0x1000 && code === newCode) {
+        // Invalid extended code
+        return '';
+      }
+      return String.fromCharCode(newCode);
+    };
+    var within708TextBlock = function (b) {
+      return 0x20 <= b && b <= 0x7f || 0xa0 <= b && b <= 0xff;
+    };
+    var Cea708Window = function (windowNum) {
+      this.windowNum = windowNum;
+      this.reset();
+    };
+    Cea708Window.prototype.reset = function () {
+      this.clearText();
+      this.pendingNewLine = false;
+      this.winAttr = {};
+      this.penAttr = {};
+      this.penLoc = {};
+      this.penColor = {}; // These default values are arbitrary,
+      // defineWindow will usually override them
+
+      this.visible = 0;
+      this.rowLock = 0;
+      this.columnLock = 0;
+      this.priority = 0;
+      this.relativePositioning = 0;
+      this.anchorVertical = 0;
+      this.anchorHorizontal = 0;
+      this.anchorPoint = 0;
+      this.rowCount = 1;
+      this.virtualRowCount = this.rowCount + 1;
+      this.columnCount = 41;
+      this.windowStyle = 0;
+      this.penStyle = 0;
+    };
+    Cea708Window.prototype.getText = function () {
+      return this.rows.join('\n');
+    };
+    Cea708Window.prototype.clearText = function () {
+      this.rows = [''];
+      this.rowIdx = 0;
+    };
+    Cea708Window.prototype.newLine = function (pts) {
+      if (this.rows.length >= this.virtualRowCount && typeof this.beforeRowOverflow === 'function') {
+        this.beforeRowOverflow(pts);
+      }
+      if (this.rows.length > 0) {
+        this.rows.push('');
+        this.rowIdx++;
+      } // Show all virtual rows since there's no visible scrolling
+
+      while (this.rows.length > this.virtualRowCount) {
+        this.rows.shift();
+        this.rowIdx--;
+      }
+    };
+    Cea708Window.prototype.isEmpty = function () {
+      if (this.rows.length === 0) {
+        return true;
+      } else if (this.rows.length === 1) {
+        return this.rows[0] === '';
+      }
+      return false;
+    };
+    Cea708Window.prototype.addText = function (text) {
+      this.rows[this.rowIdx] += text;
+    };
+    Cea708Window.prototype.backspace = function () {
+      if (!this.isEmpty()) {
+        var row = this.rows[this.rowIdx];
+        this.rows[this.rowIdx] = row.substr(0, row.length - 1);
+      }
+    };
+    var Cea708Service = function (serviceNum, encoding, stream) {
+      this.serviceNum = serviceNum;
+      this.text = '';
+      this.currentWindow = new Cea708Window(-1);
+      this.windows = [];
+      this.stream = stream; // Try to setup a TextDecoder if an `encoding` value was provided
+
+      if (typeof encoding === 'string') {
+        this.createTextDecoder(encoding);
+      }
+    };
+    /**
+     * Initialize service windows
+     * Must be run before service use
+     *
+     * @param  {Integer}  pts               PTS value
+     * @param  {Function} beforeRowOverflow Function to execute before row overflow of a window
+     */
+
+    Cea708Service.prototype.init = function (pts, beforeRowOverflow) {
+      this.startPts = pts;
+      for (var win = 0; win < 8; win++) {
+        this.windows[win] = new Cea708Window(win);
+        if (typeof beforeRowOverflow === 'function') {
+          this.windows[win].beforeRowOverflow = beforeRowOverflow;
+        }
+      }
+    };
+    /**
+     * Set current window of service to be affected by commands
+     *
+     * @param  {Integer} windowNum Window number
+     */
+
+    Cea708Service.prototype.setCurrentWindow = function (windowNum) {
+      this.currentWindow = this.windows[windowNum];
+    };
+    /**
+     * Try to create a TextDecoder if it is natively supported
+     */
+
+    Cea708Service.prototype.createTextDecoder = function (encoding) {
+      if (typeof TextDecoder === 'undefined') {
+        this.stream.trigger('log', {
+          level: 'warn',
+          message: 'The `encoding` option is unsupported without TextDecoder support'
+        });
+      } else {
+        try {
+          this.textDecoder_ = new TextDecoder(encoding);
+        } catch (error) {
+          this.stream.trigger('log', {
+            level: 'warn',
+            message: 'TextDecoder could not be created with ' + encoding + ' encoding. ' + error
+          });
+        }
+      }
+    };
+    var Cea708Stream = function (options) {
+      options = options || {};
+      Cea708Stream.prototype.init.call(this);
+      var self = this;
+      var captionServices = options.captionServices || {};
+      var captionServiceEncodings = {};
+      var serviceProps; // Get service encodings from captionServices option block
+
+      Object.keys(captionServices).forEach(serviceName => {
+        serviceProps = captionServices[serviceName];
+        if (/^SERVICE/.test(serviceName)) {
+          captionServiceEncodings[serviceName] = serviceProps.encoding;
+        }
+      });
+      this.serviceEncodings = captionServiceEncodings;
+      this.current708Packet = null;
+      this.services = {};
+      this.push = function (packet) {
+        if (packet.type === 3) {
+          // 708 packet start
+          self.new708Packet();
+          self.add708Bytes(packet);
+        } else {
+          if (self.current708Packet === null) {
+            // This should only happen at the start of a file if there's no packet start.
+            self.new708Packet();
+          }
+          self.add708Bytes(packet);
+        }
+      };
+    };
+    Cea708Stream.prototype = new Stream$7();
+    /**
+     * Push current 708 packet, create new 708 packet.
+     */
+
+    Cea708Stream.prototype.new708Packet = function () {
+      if (this.current708Packet !== null) {
+        this.push708Packet();
+      }
+      this.current708Packet = {
+        data: [],
+        ptsVals: []
+      };
+    };
+    /**
+     * Add pts and both bytes from packet into current 708 packet.
+     */
+
+    Cea708Stream.prototype.add708Bytes = function (packet) {
+      var data = packet.ccData;
+      var byte0 = data >>> 8;
+      var byte1 = data & 0xff; // I would just keep a list of packets instead of bytes, but it isn't clear in the spec
+      // that service blocks will always line up with byte pairs.
+
+      this.current708Packet.ptsVals.push(packet.pts);
+      this.current708Packet.data.push(byte0);
+      this.current708Packet.data.push(byte1);
+    };
+    /**
+     * Parse completed 708 packet into service blocks and push each service block.
+     */
+
+    Cea708Stream.prototype.push708Packet = function () {
+      var packet708 = this.current708Packet;
+      var packetData = packet708.data;
+      var serviceNum = null;
+      var blockSize = null;
+      var i = 0;
+      var b = packetData[i++];
+      packet708.seq = b >> 6;
+      packet708.sizeCode = b & 0x3f; // 0b00111111;
+
+      for (; i < packetData.length; i++) {
+        b = packetData[i++];
+        serviceNum = b >> 5;
+        blockSize = b & 0x1f; // 0b00011111
+
+        if (serviceNum === 7 && blockSize > 0) {
+          // Extended service num
+          b = packetData[i++];
+          serviceNum = b;
+        }
+        this.pushServiceBlock(serviceNum, i, blockSize);
+        if (blockSize > 0) {
+          i += blockSize - 1;
+        }
+      }
+    };
+    /**
+     * Parse service block, execute commands, read text.
+     *
+     * Note: While many of these commands serve important purposes,
+     * many others just parse out the parameters or attributes, but
+     * nothing is done with them because this is not a full and complete
+     * implementation of the entire 708 spec.
+     *
+     * @param  {Integer} serviceNum Service number
+     * @param  {Integer} start      Start index of the 708 packet data
+     * @param  {Integer} size       Block size
+     */
+
+    Cea708Stream.prototype.pushServiceBlock = function (serviceNum, start, size) {
+      var b;
+      var i = start;
+      var packetData = this.current708Packet.data;
+      var service = this.services[serviceNum];
+      if (!service) {
+        service = this.initService(serviceNum, i);
+      }
+      for (; i < start + size && i < packetData.length; i++) {
+        b = packetData[i];
+        if (within708TextBlock(b)) {
+          i = this.handleText(i, service);
+        } else if (b === 0x18) {
+          i = this.multiByteCharacter(i, service);
+        } else if (b === 0x10) {
+          i = this.extendedCommands(i, service);
+        } else if (0x80 <= b && b <= 0x87) {
+          i = this.setCurrentWindow(i, service);
+        } else if (0x98 <= b && b <= 0x9f) {
+          i = this.defineWindow(i, service);
+        } else if (b === 0x88) {
+          i = this.clearWindows(i, service);
+        } else if (b === 0x8c) {
+          i = this.deleteWindows(i, service);
+        } else if (b === 0x89) {
+          i = this.displayWindows(i, service);
+        } else if (b === 0x8a) {
+          i = this.hideWindows(i, service);
+        } else if (b === 0x8b) {
+          i = this.toggleWindows(i, service);
+        } else if (b === 0x97) {
+          i = this.setWindowAttributes(i, service);
+        } else if (b === 0x90) {
+          i = this.setPenAttributes(i, service);
+        } else if (b === 0x91) {
+          i = this.setPenColor(i, service);
+        } else if (b === 0x92) {
+          i = this.setPenLocation(i, service);
+        } else if (b === 0x8f) {
+          service = this.reset(i, service);
+        } else if (b === 0x08) {
+          // BS: Backspace
+          service.currentWindow.backspace();
+        } else if (b === 0x0c) {
+          // FF: Form feed
+          service.currentWindow.clearText();
+        } else if (b === 0x0d) {
+          // CR: Carriage return
+          service.currentWindow.pendingNewLine = true;
+        } else if (b === 0x0e) {
+          // HCR: Horizontal carriage return
+          service.currentWindow.clearText();
+        } else if (b === 0x8d) {
+          // DLY: Delay, nothing to do
+          i++;
+        } else ;
+      }
+    };
+    /**
+     * Execute an extended command
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.extendedCommands = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      if (within708TextBlock(b)) {
+        i = this.handleText(i, service, {
+          isExtended: true
+        });
+      }
+      return i;
+    };
+    /**
+     * Get PTS value of a given byte index
+     *
+     * @param  {Integer} byteIndex  Index of the byte
+     * @return {Integer}            PTS
+     */
+
+    Cea708Stream.prototype.getPts = function (byteIndex) {
+      // There's 1 pts value per 2 bytes
+      return this.current708Packet.ptsVals[Math.floor(byteIndex / 2)];
+    };
+    /**
+     * Initializes a service
+     *
+     * @param  {Integer} serviceNum Service number
+     * @return {Service}            Initialized service object
+     */
+
+    Cea708Stream.prototype.initService = function (serviceNum, i) {
+      var serviceName = 'SERVICE' + serviceNum;
+      var self = this;
+      var serviceName;
+      var encoding;
+      if (serviceName in this.serviceEncodings) {
+        encoding = this.serviceEncodings[serviceName];
+      }
+      this.services[serviceNum] = new Cea708Service(serviceNum, encoding, self);
+      this.services[serviceNum].init(this.getPts(i), function (pts) {
+        self.flushDisplayed(pts, self.services[serviceNum]);
+      });
+      return this.services[serviceNum];
+    };
+    /**
+     * Execute text writing to current window
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.handleText = function (i, service, options) {
+      var isExtended = options && options.isExtended;
+      var isMultiByte = options && options.isMultiByte;
+      var packetData = this.current708Packet.data;
+      var extended = isExtended ? 0x1000 : 0x0000;
+      var currentByte = packetData[i];
+      var nextByte = packetData[i + 1];
+      var win = service.currentWindow;
+      var char;
+      var charCodeArray; // Converts an array of bytes to a unicode hex string.
+
+      function toHexString(byteArray) {
+        return byteArray.map(byte => {
+          return ('0' + (byte & 0xFF).toString(16)).slice(-2);
+        }).join('');
+      }
+      if (isMultiByte) {
+        charCodeArray = [currentByte, nextByte];
+        i++;
+      } else {
+        charCodeArray = [currentByte];
+      } // Use the TextDecoder if one was created for this service
+
+      if (service.textDecoder_ && !isExtended) {
+        char = service.textDecoder_.decode(new Uint8Array(charCodeArray));
+      } else {
+        // We assume any multi-byte char without a decoder is unicode.
+        if (isMultiByte) {
+          const unicode = toHexString(charCodeArray); // Takes a unicode hex string and creates a single character.
+
+          char = String.fromCharCode(parseInt(unicode, 16));
+        } else {
+          char = get708CharFromCode(extended | currentByte);
+        }
+      }
+      if (win.pendingNewLine && !win.isEmpty()) {
+        win.newLine(this.getPts(i));
+      }
+      win.pendingNewLine = false;
+      win.addText(char);
+      return i;
+    };
+    /**
+     * Handle decoding of multibyte character
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.multiByteCharacter = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var firstByte = packetData[i + 1];
+      var secondByte = packetData[i + 2];
+      if (within708TextBlock(firstByte) && within708TextBlock(secondByte)) {
+        i = this.handleText(++i, service, {
+          isMultiByte: true
+        });
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the CW# command.
+     *
+     * Set the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setCurrentWindow = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var windowNum = b & 0x07;
+      service.setCurrentWindow(windowNum);
+      return i;
+    };
+    /**
+     * Parse and execute the DF# command.
+     *
+     * Define a window and set it as the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.defineWindow = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var windowNum = b & 0x07;
+      service.setCurrentWindow(windowNum);
+      var win = service.currentWindow;
+      b = packetData[++i];
+      win.visible = (b & 0x20) >> 5; // v
+
+      win.rowLock = (b & 0x10) >> 4; // rl
+
+      win.columnLock = (b & 0x08) >> 3; // cl
+
+      win.priority = b & 0x07; // p
+
+      b = packetData[++i];
+      win.relativePositioning = (b & 0x80) >> 7; // rp
+
+      win.anchorVertical = b & 0x7f; // av
+
+      b = packetData[++i];
+      win.anchorHorizontal = b; // ah
+
+      b = packetData[++i];
+      win.anchorPoint = (b & 0xf0) >> 4; // ap
+
+      win.rowCount = b & 0x0f; // rc
+
+      b = packetData[++i];
+      win.columnCount = b & 0x3f; // cc
+
+      b = packetData[++i];
+      win.windowStyle = (b & 0x38) >> 3; // ws
+
+      win.penStyle = b & 0x07; // ps
+      // The spec says there are (rowCount+1) "virtual rows"
+
+      win.virtualRowCount = win.rowCount + 1;
+      return i;
+    };
+    /**
+     * Parse and execute the SWA command.
+     *
+     * Set attributes of the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setWindowAttributes = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var winAttr = service.currentWindow.winAttr;
+      b = packetData[++i];
+      winAttr.fillOpacity = (b & 0xc0) >> 6; // fo
+
+      winAttr.fillRed = (b & 0x30) >> 4; // fr
+
+      winAttr.fillGreen = (b & 0x0c) >> 2; // fg
+
+      winAttr.fillBlue = b & 0x03; // fb
+
+      b = packetData[++i];
+      winAttr.borderType = (b & 0xc0) >> 6; // bt
+
+      winAttr.borderRed = (b & 0x30) >> 4; // br
+
+      winAttr.borderGreen = (b & 0x0c) >> 2; // bg
+
+      winAttr.borderBlue = b & 0x03; // bb
+
+      b = packetData[++i];
+      winAttr.borderType += (b & 0x80) >> 5; // bt
+
+      winAttr.wordWrap = (b & 0x40) >> 6; // ww
+
+      winAttr.printDirection = (b & 0x30) >> 4; // pd
+
+      winAttr.scrollDirection = (b & 0x0c) >> 2; // sd
+
+      winAttr.justify = b & 0x03; // j
+
+      b = packetData[++i];
+      winAttr.effectSpeed = (b & 0xf0) >> 4; // es
+
+      winAttr.effectDirection = (b & 0x0c) >> 2; // ed
+
+      winAttr.displayEffect = b & 0x03; // de
+
+      return i;
+    };
+    /**
+     * Gather text from all displayed windows and push a caption to output.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     */
+
+    Cea708Stream.prototype.flushDisplayed = function (pts, service) {
+      var displayedText = []; // TODO: Positioning not supported, displaying multiple windows will not necessarily
+      // display text in the correct order, but sample files so far have not shown any issue.
+
+      for (var winId = 0; winId < 8; winId++) {
+        if (service.windows[winId].visible && !service.windows[winId].isEmpty()) {
+          displayedText.push(service.windows[winId].getText());
+        }
+      }
+      service.endPts = pts;
+      service.text = displayedText.join('\n\n');
+      this.pushCaption(service);
+      service.startPts = pts;
+    };
+    /**
+     * Push a caption to output if the caption contains text.
+     *
+     * @param  {Service} service  The service object to be affected
+     */
+
+    Cea708Stream.prototype.pushCaption = function (service) {
+      if (service.text !== '') {
+        this.trigger('data', {
+          startPts: service.startPts,
+          endPts: service.endPts,
+          text: service.text,
+          stream: 'cc708_' + service.serviceNum
+        });
+        service.text = '';
+        service.startPts = service.endPts;
+      }
+    };
+    /**
+     * Parse and execute the DSW command.
+     *
+     * Set visible property of windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.displayWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].visible = 1;
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the HDW command.
+     *
+     * Set visible property of windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.hideWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].visible = 0;
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the TGW command.
+     *
+     * Set visible property of windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.toggleWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].visible ^= 1;
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the CLW command.
+     *
+     * Clear text of windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.clearWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].clearText();
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the DLW command.
+     *
+     * Re-initialize windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.deleteWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].reset();
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the SPA command.
+     *
+     * Set pen attributes of the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setPenAttributes = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var penAttr = service.currentWindow.penAttr;
+      b = packetData[++i];
+      penAttr.textTag = (b & 0xf0) >> 4; // tt
+
+      penAttr.offset = (b & 0x0c) >> 2; // o
+
+      penAttr.penSize = b & 0x03; // s
+
+      b = packetData[++i];
+      penAttr.italics = (b & 0x80) >> 7; // i
+
+      penAttr.underline = (b & 0x40) >> 6; // u
+
+      penAttr.edgeType = (b & 0x38) >> 3; // et
+
+      penAttr.fontStyle = b & 0x07; // fs
+
+      return i;
+    };
+    /**
+     * Parse and execute the SPC command.
+     *
+     * Set pen color of the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setPenColor = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var penColor = service.currentWindow.penColor;
+      b = packetData[++i];
+      penColor.fgOpacity = (b & 0xc0) >> 6; // fo
+
+      penColor.fgRed = (b & 0x30) >> 4; // fr
+
+      penColor.fgGreen = (b & 0x0c) >> 2; // fg
+
+      penColor.fgBlue = b & 0x03; // fb
+
+      b = packetData[++i];
+      penColor.bgOpacity = (b & 0xc0) >> 6; // bo
+
+      penColor.bgRed = (b & 0x30) >> 4; // br
+
+      penColor.bgGreen = (b & 0x0c) >> 2; // bg
+
+      penColor.bgBlue = b & 0x03; // bb
+
+      b = packetData[++i];
+      penColor.edgeRed = (b & 0x30) >> 4; // er
+
+      penColor.edgeGreen = (b & 0x0c) >> 2; // eg
+
+      penColor.edgeBlue = b & 0x03; // eb
+
+      return i;
+    };
+    /**
+     * Parse and execute the SPL command.
+     *
+     * Set pen location of the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setPenLocation = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var penLoc = service.currentWindow.penLoc; // Positioning isn't really supported at the moment, so this essentially just inserts a linebreak
+
+      service.currentWindow.pendingNewLine = true;
+      b = packetData[++i];
+      penLoc.row = b & 0x0f; // r
+
+      b = packetData[++i];
+      penLoc.column = b & 0x3f; // c
+
+      return i;
+    };
+    /**
+     * Execute the RST command.
+     *
+     * Reset service to a clean slate. Re-initialize.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Service}          Re-initialized service
+     */
+
+    Cea708Stream.prototype.reset = function (i, service) {
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      return this.initService(service.serviceNum, i);
+    }; // This hash maps non-ASCII, special, and extended character codes to their
+    // proper Unicode equivalent. The first keys that are only a single byte
+    // are the non-standard ASCII characters, which simply map the CEA608 byte
+    // to the standard ASCII/Unicode. The two-byte keys that follow are the CEA608
+    // character codes, but have their MSB bitmasked with 0x03 so that a lookup
+    // can be performed regardless of the field and data channel on which the
+    // character code was received.
+
+    var CHARACTER_TRANSLATION = {
+      0x2a: 0xe1,
+      // á
+      0x5c: 0xe9,
+      // é
+      0x5e: 0xed,
+      // í
+      0x5f: 0xf3,
+      // ó
+      0x60: 0xfa,
+      // ú
+      0x7b: 0xe7,
+      // ç
+      0x7c: 0xf7,
+      // ÷
+      0x7d: 0xd1,
+      // Ñ
+      0x7e: 0xf1,
+      // ñ
+      0x7f: 0x2588,
+      // █
+      0x0130: 0xae,
+      // ®
+      0x0131: 0xb0,
+      // °
+      0x0132: 0xbd,
+      // ½
+      0x0133: 0xbf,
+      // ¿
+      0x0134: 0x2122,
+      // ™
+      0x0135: 0xa2,
+      // ¢
+      0x0136: 0xa3,
+      // £
+      0x0137: 0x266a,
+      // ♪
+      0x0138: 0xe0,
+      // à
+      0x0139: 0xa0,
+      //
+      0x013a: 0xe8,
+      // è
+      0x013b: 0xe2,
+      // â
+      0x013c: 0xea,
+      // ê
+      0x013d: 0xee,
+      // î
+      0x013e: 0xf4,
+      // ô
+      0x013f: 0xfb,
+      // û
+      0x0220: 0xc1,
+      // Á
+      0x0221: 0xc9,
+      // É
+      0x0222: 0xd3,
+      // Ó
+      0x0223: 0xda,
+      // Ú
+      0x0224: 0xdc,
+      // Ü
+      0x0225: 0xfc,
+      // ü
+      0x0226: 0x2018,
+      // ‘
+      0x0227: 0xa1,
+      // ¡
+      0x0228: 0x2a,
+      // *
+      0x0229: 0x27,
+      // '
+      0x022a: 0x2014,
+      // —
+      0x022b: 0xa9,
+      // ©
+      0x022c: 0x2120,
+      // ℠
+      0x022d: 0x2022,
+      // •
+      0x022e: 0x201c,
+      // “
+      0x022f: 0x201d,
+      // ”
+      0x0230: 0xc0,
+      // À
+      0x0231: 0xc2,
+      // Â
+      0x0232: 0xc7,
+      // Ç
+      0x0233: 0xc8,
+      // È
+      0x0234: 0xca,
+      // Ê
+      0x0235: 0xcb,
+      // Ë
+      0x0236: 0xeb,
+      // ë
+      0x0237: 0xce,
+      // Î
+      0x0238: 0xcf,
+      // Ï
+      0x0239: 0xef,
+      // ï
+      0x023a: 0xd4,
+      // Ô
+      0x023b: 0xd9,
+      // Ù
+      0x023c: 0xf9,
+      // ù
+      0x023d: 0xdb,
+      // Û
+      0x023e: 0xab,
+      // «
+      0x023f: 0xbb,
+      // »
+      0x0320: 0xc3,
+      // Ã
+      0x0321: 0xe3,
+      // ã
+      0x0322: 0xcd,
+      // Í
+      0x0323: 0xcc,
+      // Ì
+      0x0324: 0xec,
+      // ì
+      0x0325: 0xd2,
+      // Ò
+      0x0326: 0xf2,
+      // ò
+      0x0327: 0xd5,
+      // Õ
+      0x0328: 0xf5,
+      // õ
+      0x0329: 0x7b,
+      // {
+      0x032a: 0x7d,
+      // }
+      0x032b: 0x5c,
+      // \
+      0x032c: 0x5e,
+      // ^
+      0x032d: 0x5f,
+      // _
+      0x032e: 0x7c,
+      // |
+      0x032f: 0x7e,
+      // ~
+      0x0330: 0xc4,
+      // Ä
+      0x0331: 0xe4,
+      // ä
+      0x0332: 0xd6,
+      // Ö
+      0x0333: 0xf6,
+      // ö
+      0x0334: 0xdf,
+      // ß
+      0x0335: 0xa5,
+      // ¥
+      0x0336: 0xa4,
+      // ¤
+      0x0337: 0x2502,
+      // │
+      0x0338: 0xc5,
+      // Å
+      0x0339: 0xe5,
+      // å
+      0x033a: 0xd8,
+      // Ø
+      0x033b: 0xf8,
+      // ø
+      0x033c: 0x250c,
+      // ┌
+      0x033d: 0x2510,
+      // ┐
+      0x033e: 0x2514,
+      // └
+      0x033f: 0x2518 // ┘
+    };
+
+    var getCharFromCode = function (code) {
+      if (code === null) {
+        return '';
+      }
+      code = CHARACTER_TRANSLATION[code] || code;
+      return String.fromCharCode(code);
+    }; // the index of the last row in a CEA-608 display buffer
+
+    var BOTTOM_ROW = 14; // This array is used for mapping PACs -> row #, since there's no way of
+    // getting it through bit logic.
+
+    var ROWS = [0x1100, 0x1120, 0x1200, 0x1220, 0x1500, 0x1520, 0x1600, 0x1620, 0x1700, 0x1720, 0x1000, 0x1300, 0x1320, 0x1400, 0x1420]; // CEA-608 captions are rendered onto a 34x15 matrix of character
+    // cells. The "bottom" row is the last element in the outer array.
+    // We keep track of positioning information as we go by storing the
+    // number of indentations and the tab offset in this buffer.
+
+    var createDisplayBuffer = function () {
+      var result = [],
+        i = BOTTOM_ROW + 1;
+      while (i--) {
+        result.push({
+          text: '',
+          indent: 0,
+          offset: 0
+        });
+      }
+      return result;
+    };
+    var Cea608Stream = function (field, dataChannel) {
+      Cea608Stream.prototype.init.call(this);
+      this.field_ = field || 0;
+      this.dataChannel_ = dataChannel || 0;
+      this.name_ = 'CC' + ((this.field_ << 1 | this.dataChannel_) + 1);
+      this.setConstants();
+      this.reset();
+      this.push = function (packet) {
+        var data, swap, char0, char1, text; // remove the parity bits
+
+        data = packet.ccData & 0x7f7f; // ignore duplicate control codes; the spec demands they're sent twice
+
+        if (data === this.lastControlCode_) {
+          this.lastControlCode_ = null;
+          return;
+        } // Store control codes
+
+        if ((data & 0xf000) === 0x1000) {
+          this.lastControlCode_ = data;
+        } else if (data !== this.PADDING_) {
+          this.lastControlCode_ = null;
+        }
+        char0 = data >>> 8;
+        char1 = data & 0xff;
+        if (data === this.PADDING_) {
+          return;
+        } else if (data === this.RESUME_CAPTION_LOADING_) {
+          this.mode_ = 'popOn';
+        } else if (data === this.END_OF_CAPTION_) {
+          // If an EOC is received while in paint-on mode, the displayed caption
+          // text should be swapped to non-displayed memory as if it was a pop-on
+          // caption. Because of that, we should explicitly switch back to pop-on
+          // mode
+          this.mode_ = 'popOn';
+          this.clearFormatting(packet.pts); // if a caption was being displayed, it's gone now
+
+          this.flushDisplayed(packet.pts); // flip memory
+
+          swap = this.displayed_;
+          this.displayed_ = this.nonDisplayed_;
+          this.nonDisplayed_ = swap; // start measuring the time to display the caption
+
+          this.startPts_ = packet.pts;
+        } else if (data === this.ROLL_UP_2_ROWS_) {
+          this.rollUpRows_ = 2;
+          this.setRollUp(packet.pts);
+        } else if (data === this.ROLL_UP_3_ROWS_) {
+          this.rollUpRows_ = 3;
+          this.setRollUp(packet.pts);
+        } else if (data === this.ROLL_UP_4_ROWS_) {
+          this.rollUpRows_ = 4;
+          this.setRollUp(packet.pts);
+        } else if (data === this.CARRIAGE_RETURN_) {
+          this.clearFormatting(packet.pts);
+          this.flushDisplayed(packet.pts);
+          this.shiftRowsUp_();
+          this.startPts_ = packet.pts;
+        } else if (data === this.BACKSPACE_) {
+          if (this.mode_ === 'popOn') {
+            this.nonDisplayed_[this.row_].text = this.nonDisplayed_[this.row_].text.slice(0, -1);
+          } else {
+            this.displayed_[this.row_].text = this.displayed_[this.row_].text.slice(0, -1);
+          }
+        } else if (data === this.ERASE_DISPLAYED_MEMORY_) {
+          this.flushDisplayed(packet.pts);
+          this.displayed_ = createDisplayBuffer();
+        } else if (data === this.ERASE_NON_DISPLAYED_MEMORY_) {
+          this.nonDisplayed_ = createDisplayBuffer();
+        } else if (data === this.RESUME_DIRECT_CAPTIONING_) {
+          if (this.mode_ !== 'paintOn') {
+            // NOTE: This should be removed when proper caption positioning is
+            // implemented
+            this.flushDisplayed(packet.pts);
+            this.displayed_ = createDisplayBuffer();
+          }
+          this.mode_ = 'paintOn';
+          this.startPts_ = packet.pts; // Append special characters to caption text
+        } else if (this.isSpecialCharacter(char0, char1)) {
+          // Bitmask char0 so that we can apply character transformations
+          // regardless of field and data channel.
+          // Then byte-shift to the left and OR with char1 so we can pass the
+          // entire character code to `getCharFromCode`.
+          char0 = (char0 & 0x03) << 8;
+          text = getCharFromCode(char0 | char1);
+          this[this.mode_](packet.pts, text);
+          this.column_++; // Append extended characters to caption text
+        } else if (this.isExtCharacter(char0, char1)) {
+          // Extended characters always follow their "non-extended" equivalents.
+          // IE if a "è" is desired, you'll always receive "eè"; non-compliant
+          // decoders are supposed to drop the "è", while compliant decoders
+          // backspace the "e" and insert "è".
+          // Delete the previous character
+          if (this.mode_ === 'popOn') {
+            this.nonDisplayed_[this.row_].text = this.nonDisplayed_[this.row_].text.slice(0, -1);
+          } else {
+            this.displayed_[this.row_].text = this.displayed_[this.row_].text.slice(0, -1);
+          } // Bitmask char0 so that we can apply character transformations
+          // regardless of field and data channel.
+          // Then byte-shift to the left and OR with char1 so we can pass the
+          // entire character code to `getCharFromCode`.
+
+          char0 = (char0 & 0x03) << 8;
+          text = getCharFromCode(char0 | char1);
+          this[this.mode_](packet.pts, text);
+          this.column_++; // Process mid-row codes
+        } else if (this.isMidRowCode(char0, char1)) {
+          // Attributes are not additive, so clear all formatting
+          this.clearFormatting(packet.pts); // According to the standard, mid-row codes
+          // should be replaced with spaces, so add one now
+
+          this[this.mode_](packet.pts, ' ');
+          this.column_++;
+          if ((char1 & 0xe) === 0xe) {
+            this.addFormatting(packet.pts, ['i']);
+          }
+          if ((char1 & 0x1) === 0x1) {
+            this.addFormatting(packet.pts, ['u']);
+          } // Detect offset control codes and adjust cursor
+        } else if (this.isOffsetControlCode(char0, char1)) {
+          // Cursor position is set by indent PAC (see below) in 4-column
+          // increments, with an additional offset code of 1-3 to reach any
+          // of the 32 columns specified by CEA-608. So all we need to do
+          // here is increment the column cursor by the given offset.
+          const offset = char1 & 0x03; // For an offest value 1-3, set the offset for that caption
+          // in the non-displayed array.
+
+          this.nonDisplayed_[this.row_].offset = offset;
+          this.column_ += offset; // Detect PACs (Preamble Address Codes)
+        } else if (this.isPAC(char0, char1)) {
+          // There's no logic for PAC -> row mapping, so we have to just
+          // find the row code in an array and use its index :(
+          var row = ROWS.indexOf(data & 0x1f20); // Configure the caption window if we're in roll-up mode
+
+          if (this.mode_ === 'rollUp') {
+            // This implies that the base row is incorrectly set.
+            // As per the recommendation in CEA-608(Base Row Implementation), defer to the number
+            // of roll-up rows set.
+            if (row - this.rollUpRows_ + 1 < 0) {
+              row = this.rollUpRows_ - 1;
+            }
+            this.setRollUp(packet.pts, row);
+          } // Ensure the row is between 0 and 14, otherwise use the most
+          // recent or default row.
+
+          if (row !== this.row_ && row >= 0 && row <= 14) {
+            // formatting is only persistent for current row
+            this.clearFormatting(packet.pts);
+            this.row_ = row;
+          } // All PACs can apply underline, so detect and apply
+          // (All odd-numbered second bytes set underline)
+
+          if (char1 & 0x1 && this.formatting_.indexOf('u') === -1) {
+            this.addFormatting(packet.pts, ['u']);
+          }
+          if ((data & 0x10) === 0x10) {
+            // We've got an indent level code. Each successive even number
+            // increments the column cursor by 4, so we can get the desired
+            // column position by bit-shifting to the right (to get n/2)
+            // and multiplying by 4.
+            const indentations = (data & 0xe) >> 1;
+            this.column_ = indentations * 4; // add to the number of indentations for positioning
+
+            this.nonDisplayed_[this.row_].indent += indentations;
+          }
+          if (this.isColorPAC(char1)) {
+            // it's a color code, though we only support white, which
+            // can be either normal or italicized. white italics can be
+            // either 0x4e or 0x6e depending on the row, so we just
+            // bitwise-and with 0xe to see if italics should be turned on
+            if ((char1 & 0xe) === 0xe) {
+              this.addFormatting(packet.pts, ['i']);
+            }
+          } // We have a normal character in char0, and possibly one in char1
+        } else if (this.isNormalChar(char0)) {
+          if (char1 === 0x00) {
+            char1 = null;
+          }
+          text = getCharFromCode(char0);
+          text += getCharFromCode(char1);
+          this[this.mode_](packet.pts, text);
+          this.column_ += text.length;
+        } // finish data processing
+      };
+    };
+
+    Cea608Stream.prototype = new Stream$7(); // Trigger a cue point that captures the current state of the
+    // display buffer
+
+    Cea608Stream.prototype.flushDisplayed = function (pts) {
+      const logWarning = index => {
+        this.trigger('log', {
+          level: 'warn',
+          message: 'Skipping a malformed 608 caption at index ' + index + '.'
+        });
+      };
+      const content = [];
+      this.displayed_.forEach((row, i) => {
+        if (row && row.text && row.text.length) {
+          try {
+            // remove spaces from the start and end of the string
+            row.text = row.text.trim();
+          } catch (e) {
+            // Ordinarily, this shouldn't happen. However, caption
+            // parsing errors should not throw exceptions and
+            // break playback.
+            logWarning(i);
+          } // See the below link for more details on the following fields:
+          // https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#positioning-in-cea-608
+
+          if (row.text.length) {
+            content.push({
+              // The text to be displayed in the caption from this specific row, with whitespace removed.
+              text: row.text,
+              // Value between 1 and 15 representing the PAC row used to calculate line height.
+              line: i + 1,
+              // A number representing the indent position by percentage (CEA-608 PAC indent code).
+              // The value will be a number between 10 and 80. Offset is used to add an aditional
+              // value to the position if necessary.
+              position: 10 + Math.min(70, row.indent * 10) + row.offset * 2.5
+            });
+          }
+        } else if (row === undefined || row === null) {
+          logWarning(i);
+        }
+      });
+      if (content.length) {
+        this.trigger('data', {
+          startPts: this.startPts_,
+          endPts: pts,
+          content,
+          stream: this.name_
+        });
+      }
+    };
+    /**
+     * Zero out the data, used for startup and on seek
+     */
+
+    Cea608Stream.prototype.reset = function () {
+      this.mode_ = 'popOn'; // When in roll-up mode, the index of the last row that will
+      // actually display captions. If a caption is shifted to a row
+      // with a lower index than this, it is cleared from the display
+      // buffer
+
+      this.topRow_ = 0;
+      this.startPts_ = 0;
+      this.displayed_ = createDisplayBuffer();
+      this.nonDisplayed_ = createDisplayBuffer();
+      this.lastControlCode_ = null; // Track row and column for proper line-breaking and spacing
+
+      this.column_ = 0;
+      this.row_ = BOTTOM_ROW;
+      this.rollUpRows_ = 2; // This variable holds currently-applied formatting
+
+      this.formatting_ = [];
+    };
+    /**
+     * Sets up control code and related constants for this instance
+     */
+
+    Cea608Stream.prototype.setConstants = function () {
+      // The following attributes have these uses:
+      // ext_ :    char0 for mid-row codes, and the base for extended
+      //           chars (ext_+0, ext_+1, and ext_+2 are char0s for
+      //           extended codes)
+      // control_: char0 for control codes, except byte-shifted to the
+      //           left so that we can do this.control_ | CONTROL_CODE
+      // offset_:  char0 for tab offset codes
+      //
+      // It's also worth noting that control codes, and _only_ control codes,
+      // differ between field 1 and field2. Field 2 control codes are always
+      // their field 1 value plus 1. That's why there's the "| field" on the
+      // control value.
+      if (this.dataChannel_ === 0) {
+        this.BASE_ = 0x10;
+        this.EXT_ = 0x11;
+        this.CONTROL_ = (0x14 | this.field_) << 8;
+        this.OFFSET_ = 0x17;
+      } else if (this.dataChannel_ === 1) {
+        this.BASE_ = 0x18;
+        this.EXT_ = 0x19;
+        this.CONTROL_ = (0x1c | this.field_) << 8;
+        this.OFFSET_ = 0x1f;
+      } // Constants for the LSByte command codes recognized by Cea608Stream. This
+      // list is not exhaustive. For a more comprehensive listing and semantics see
+      // http://www.gpo.gov/fdsys/pkg/CFR-2010-title47-vol1/pdf/CFR-2010-title47-vol1-sec15-119.pdf
+      // Padding
+
+      this.PADDING_ = 0x0000; // Pop-on Mode
+
+      this.RESUME_CAPTION_LOADING_ = this.CONTROL_ | 0x20;
+      this.END_OF_CAPTION_ = this.CONTROL_ | 0x2f; // Roll-up Mode
+
+      this.ROLL_UP_2_ROWS_ = this.CONTROL_ | 0x25;
+      this.ROLL_UP_3_ROWS_ = this.CONTROL_ | 0x26;
+      this.ROLL_UP_4_ROWS_ = this.CONTROL_ | 0x27;
+      this.CARRIAGE_RETURN_ = this.CONTROL_ | 0x2d; // paint-on mode
+
+      this.RESUME_DIRECT_CAPTIONING_ = this.CONTROL_ | 0x29; // Erasure
+
+      this.BACKSPACE_ = this.CONTROL_ | 0x21;
+      this.ERASE_DISPLAYED_MEMORY_ = this.CONTROL_ | 0x2c;
+      this.ERASE_NON_DISPLAYED_MEMORY_ = this.CONTROL_ | 0x2e;
+    };
+    /**
+     * Detects if the 2-byte packet data is a special character
+     *
+     * Special characters have a second byte in the range 0x30 to 0x3f,
+     * with the first byte being 0x11 (for data channel 1) or 0x19 (for
+     * data channel 2).
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are an special character
+     */
+
+    Cea608Stream.prototype.isSpecialCharacter = function (char0, char1) {
+      return char0 === this.EXT_ && char1 >= 0x30 && char1 <= 0x3f;
+    };
+    /**
+     * Detects if the 2-byte packet data is an extended character
+     *
+     * Extended characters have a second byte in the range 0x20 to 0x3f,
+     * with the first byte being 0x12 or 0x13 (for data channel 1) or
+     * 0x1a or 0x1b (for data channel 2).
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are an extended character
+     */
+
+    Cea608Stream.prototype.isExtCharacter = function (char0, char1) {
+      return (char0 === this.EXT_ + 1 || char0 === this.EXT_ + 2) && char1 >= 0x20 && char1 <= 0x3f;
+    };
+    /**
+     * Detects if the 2-byte packet is a mid-row code
+     *
+     * Mid-row codes have a second byte in the range 0x20 to 0x2f, with
+     * the first byte being 0x11 (for data channel 1) or 0x19 (for data
+     * channel 2).
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are a mid-row code
+     */
+
+    Cea608Stream.prototype.isMidRowCode = function (char0, char1) {
+      return char0 === this.EXT_ && char1 >= 0x20 && char1 <= 0x2f;
+    };
+    /**
+     * Detects if the 2-byte packet is an offset control code
+     *
+     * Offset control codes have a second byte in the range 0x21 to 0x23,
+     * with the first byte being 0x17 (for data channel 1) or 0x1f (for
+     * data channel 2).
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are an offset control code
+     */
+
+    Cea608Stream.prototype.isOffsetControlCode = function (char0, char1) {
+      return char0 === this.OFFSET_ && char1 >= 0x21 && char1 <= 0x23;
+    };
+    /**
+     * Detects if the 2-byte packet is a Preamble Address Code
+     *
+     * PACs have a first byte in the range 0x10 to 0x17 (for data channel 1)
+     * or 0x18 to 0x1f (for data channel 2), with the second byte in the
+     * range 0x40 to 0x7f.
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are a PAC
+     */
+
+    Cea608Stream.prototype.isPAC = function (char0, char1) {
+      return char0 >= this.BASE_ && char0 < this.BASE_ + 8 && char1 >= 0x40 && char1 <= 0x7f;
+    };
+    /**
+     * Detects if a packet's second byte is in the range of a PAC color code
+     *
+     * PAC color codes have the second byte be in the range 0x40 to 0x4f, or
+     * 0x60 to 0x6f.
+     *
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the byte is a color PAC
+     */
+
+    Cea608Stream.prototype.isColorPAC = function (char1) {
+      return char1 >= 0x40 && char1 <= 0x4f || char1 >= 0x60 && char1 <= 0x7f;
+    };
+    /**
+     * Detects if a single byte is in the range of a normal character
+     *
+     * Normal text bytes are in the range 0x20 to 0x7f.
+     *
+     * @param  {Integer} char  The byte
+     * @return {Boolean}       Whether the byte is a normal character
+     */
+
+    Cea608Stream.prototype.isNormalChar = function (char) {
+      return char >= 0x20 && char <= 0x7f;
+    };
+    /**
+     * Configures roll-up
+     *
+     * @param  {Integer} pts         Current PTS
+     * @param  {Integer} newBaseRow  Used by PACs to slide the current window to
+     *                               a new position
+     */
+
+    Cea608Stream.prototype.setRollUp = function (pts, newBaseRow) {
+      // Reset the base row to the bottom row when switching modes
+      if (this.mode_ !== 'rollUp') {
+        this.row_ = BOTTOM_ROW;
+        this.mode_ = 'rollUp'; // Spec says to wipe memories when switching to roll-up
+
+        this.flushDisplayed(pts);
+        this.nonDisplayed_ = createDisplayBuffer();
+        this.displayed_ = createDisplayBuffer();
+      }
+      if (newBaseRow !== undefined && newBaseRow !== this.row_) {
+        // move currently displayed captions (up or down) to the new base row
+        for (var i = 0; i < this.rollUpRows_; i++) {
+          this.displayed_[newBaseRow - i] = this.displayed_[this.row_ - i];
+          this.displayed_[this.row_ - i] = {
+            text: '',
+            indent: 0,
+            offset: 0
+          };
+        }
+      }
+      if (newBaseRow === undefined) {
+        newBaseRow = this.row_;
+      }
+      this.topRow_ = newBaseRow - this.rollUpRows_ + 1;
+    }; // Adds the opening HTML tag for the passed character to the caption text,
+    // and keeps track of it for later closing
+
+    Cea608Stream.prototype.addFormatting = function (pts, format) {
+      this.formatting_ = this.formatting_.concat(format);
+      var text = format.reduce(function (text, format) {
+        return text + '<' + format + '>';
+      }, '');
+      this[this.mode_](pts, text);
+    }; // Adds HTML closing tags for current formatting to caption text and
+    // clears remembered formatting
+
+    Cea608Stream.prototype.clearFormatting = function (pts) {
+      if (!this.formatting_.length) {
+        return;
+      }
+      var text = this.formatting_.reverse().reduce(function (text, format) {
+        return text + '</' + format + '>';
+      }, '');
+      this.formatting_ = [];
+      this[this.mode_](pts, text);
+    }; // Mode Implementations
+
+    Cea608Stream.prototype.popOn = function (pts, text) {
+      var baseRow = this.nonDisplayed_[this.row_].text; // buffer characters
+
+      baseRow += text;
+      this.nonDisplayed_[this.row_].text = baseRow;
+    };
+    Cea608Stream.prototype.rollUp = function (pts, text) {
+      var baseRow = this.displayed_[this.row_].text;
+      baseRow += text;
+      this.displayed_[this.row_].text = baseRow;
+    };
+    Cea608Stream.prototype.shiftRowsUp_ = function () {
+      var i; // clear out inactive rows
+
+      for (i = 0; i < this.topRow_; i++) {
+        this.displayed_[i] = {
+          text: '',
+          indent: 0,
+          offset: 0
+        };
+      }
+      for (i = this.row_ + 1; i < BOTTOM_ROW + 1; i++) {
+        this.displayed_[i] = {
+          text: '',
+          indent: 0,
+          offset: 0
+        };
+      } // shift displayed rows up
+
+      for (i = this.topRow_; i < this.row_; i++) {
+        this.displayed_[i] = this.displayed_[i + 1];
+      } // clear out the bottom row
+
+      this.displayed_[this.row_] = {
+        text: '',
+        indent: 0,
+        offset: 0
+      };
+    };
+    Cea608Stream.prototype.paintOn = function (pts, text) {
+      var baseRow = this.displayed_[this.row_].text;
+      baseRow += text;
+      this.displayed_[this.row_].text = baseRow;
+    }; // exports
+
+    var captionStream = {
+      CaptionStream: CaptionStream$2,
+      Cea608Stream: Cea608Stream,
+      Cea708Stream: Cea708Stream
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var streamTypes = {
+      H264_STREAM_TYPE: 0x1B,
+      ADTS_STREAM_TYPE: 0x0F,
+      METADATA_STREAM_TYPE: 0x15
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Accepts program elementary stream (PES) data events and corrects
+     * decode and presentation time stamps to account for a rollover
+     * of the 33 bit value.
+     */
+
+    var Stream$6 = stream;
+    var MAX_TS = 8589934592;
+    var RO_THRESH = 4294967296;
+    var TYPE_SHARED = 'shared';
+    var handleRollover$1 = function (value, reference) {
+      var direction = 1;
+      if (value > reference) {
+        // If the current timestamp value is greater than our reference timestamp and we detect a
+        // timestamp rollover, this means the roll over is happening in the opposite direction.
+        // Example scenario: Enter a long stream/video just after a rollover occurred. The reference
+        // point will be set to a small number, e.g. 1. The user then seeks backwards over the
+        // rollover point. In loading this segment, the timestamp values will be very large,
+        // e.g. 2^33 - 1. Since this comes before the data we loaded previously, we want to adjust
+        // the time stamp to be `value - 2^33`.
+        direction = -1;
+      } // Note: A seek forwards or back that is greater than the RO_THRESH (2^32, ~13 hours) will
+      // cause an incorrect adjustment.
+
+      while (Math.abs(reference - value) > RO_THRESH) {
+        value += direction * MAX_TS;
+      }
+      return value;
+    };
+    var TimestampRolloverStream$1 = function (type) {
+      var lastDTS, referenceDTS;
+      TimestampRolloverStream$1.prototype.init.call(this); // The "shared" type is used in cases where a stream will contain muxed
+      // video and audio. We could use `undefined` here, but having a string
+      // makes debugging a little clearer.
+
+      this.type_ = type || TYPE_SHARED;
+      this.push = function (data) {
+        /**
+         * Rollover stream expects data from elementary stream.
+         * Elementary stream can push forward 2 types of data
+         * - Parsed Video/Audio/Timed-metadata PES (packetized elementary stream) packets
+         * - Tracks metadata from PMT (Program Map Table)
+         * Rollover stream expects pts/dts info to be available, since it stores lastDTS
+         * We should ignore non-PES packets since they may override lastDTS to undefined.
+         * lastDTS is important to signal the next segments
+         * about rollover from the previous segments.
+         */
+        if (data.type === 'metadata') {
+          this.trigger('data', data);
+          return;
+        } // Any "shared" rollover streams will accept _all_ data. Otherwise,
+        // streams will only accept data that matches their type.
+
+        if (this.type_ !== TYPE_SHARED && data.type !== this.type_) {
+          return;
+        }
+        if (referenceDTS === undefined) {
+          referenceDTS = data.dts;
+        }
+        data.dts = handleRollover$1(data.dts, referenceDTS);
+        data.pts = handleRollover$1(data.pts, referenceDTS);
+        lastDTS = data.dts;
+        this.trigger('data', data);
+      };
+      this.flush = function () {
+        referenceDTS = lastDTS;
+        this.trigger('done');
+      };
+      this.endTimeline = function () {
+        this.flush();
+        this.trigger('endedtimeline');
+      };
+      this.discontinuity = function () {
+        referenceDTS = void 0;
+        lastDTS = void 0;
+      };
+      this.reset = function () {
+        this.discontinuity();
+        this.trigger('reset');
+      };
+    };
+    TimestampRolloverStream$1.prototype = new Stream$6();
+    var timestampRolloverStream = {
+      TimestampRolloverStream: TimestampRolloverStream$1,
+      handleRollover: handleRollover$1
+    }; // Once IE11 support is dropped, this function should be removed.
+
+    var typedArrayIndexOf$1 = (typedArray, element, fromIndex) => {
+      if (!typedArray) {
+        return -1;
+      }
+      var currentIndex = fromIndex;
+      for (; currentIndex < typedArray.length; currentIndex++) {
+        if (typedArray[currentIndex] === element) {
+          return currentIndex;
+        }
+      }
+      return -1;
+    };
+    var typedArray = {
+      typedArrayIndexOf: typedArrayIndexOf$1
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Tools for parsing ID3 frame data
+     * @see http://id3.org/id3v2.3.0
+     */
+
+    var typedArrayIndexOf = typedArray.typedArrayIndexOf,
+      // Frames that allow different types of text encoding contain a text
+      // encoding description byte [ID3v2.4.0 section 4.]
+      textEncodingDescriptionByte = {
+        Iso88591: 0x00,
+        // ISO-8859-1, terminated with \0.
+        Utf16: 0x01,
+        // UTF-16 encoded Unicode BOM, terminated with \0\0
+        Utf16be: 0x02,
+        // UTF-16BE encoded Unicode, without BOM, terminated with \0\0
+        Utf8: 0x03 // UTF-8 encoded Unicode, terminated with \0
+      },
+      // return a percent-encoded representation of the specified byte range
+      // @see http://en.wikipedia.org/wiki/Percent-encoding 
+      percentEncode$1 = function (bytes, start, end) {
+        var i,
+          result = '';
+        for (i = start; i < end; i++) {
+          result += '%' + ('00' + bytes[i].toString(16)).slice(-2);
+        }
+        return result;
+      },
+      // return the string representation of the specified byte range,
+      // interpreted as UTf-8.
+      parseUtf8 = function (bytes, start, end) {
+        return decodeURIComponent(percentEncode$1(bytes, start, end));
+      },
+      // return the string representation of the specified byte range,
+      // interpreted as ISO-8859-1.
+      parseIso88591$1 = function (bytes, start, end) {
+        return unescape(percentEncode$1(bytes, start, end)); // jshint ignore:line
+      },
+      parseSyncSafeInteger$1 = function (data) {
+        return data[0] << 21 | data[1] << 14 | data[2] << 7 | data[3];
+      },
+      frameParsers = {
+        'APIC': function (frame) {
+          var i = 1,
+            mimeTypeEndIndex,
+            descriptionEndIndex,
+            LINK_MIME_TYPE = '-->';
+          if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+            // ignore frames with unrecognized character encodings
+            return;
+          } // parsing fields [ID3v2.4.0 section 4.14.]
+
+          mimeTypeEndIndex = typedArrayIndexOf(frame.data, 0, i);
+          if (mimeTypeEndIndex < 0) {
+            // malformed frame
+            return;
+          } // parsing Mime type field (terminated with \0)
+
+          frame.mimeType = parseIso88591$1(frame.data, i, mimeTypeEndIndex);
+          i = mimeTypeEndIndex + 1; // parsing 1-byte Picture Type field
+
+          frame.pictureType = frame.data[i];
+          i++;
+          descriptionEndIndex = typedArrayIndexOf(frame.data, 0, i);
+          if (descriptionEndIndex < 0) {
+            // malformed frame
+            return;
+          } // parsing Description field (terminated with \0)
+
+          frame.description = parseUtf8(frame.data, i, descriptionEndIndex);
+          i = descriptionEndIndex + 1;
+          if (frame.mimeType === LINK_MIME_TYPE) {
+            // parsing Picture Data field as URL (always represented as ISO-8859-1 [ID3v2.4.0 section 4.])
+            frame.url = parseIso88591$1(frame.data, i, frame.data.length);
+          } else {
+            // parsing Picture Data field as binary data
+            frame.pictureData = frame.data.subarray(i, frame.data.length);
+          }
+        },
+        'T*': function (frame) {
+          if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+            // ignore frames with unrecognized character encodings
+            return;
+          } // parse text field, do not include null terminator in the frame value
+          // frames that allow different types of encoding contain terminated text [ID3v2.4.0 section 4.]
+
+          frame.value = parseUtf8(frame.data, 1, frame.data.length).replace(/\0*$/, ''); // text information frames supports multiple strings, stored as a terminator separated list [ID3v2.4.0 section 4.2.]
+
+          frame.values = frame.value.split('\0');
+        },
+        'TXXX': function (frame) {
+          var descriptionEndIndex;
+          if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+            // ignore frames with unrecognized character encodings
+            return;
+          }
+          descriptionEndIndex = typedArrayIndexOf(frame.data, 0, 1);
+          if (descriptionEndIndex === -1) {
+            return;
+          } // parse the text fields
+
+          frame.description = parseUtf8(frame.data, 1, descriptionEndIndex); // do not include the null terminator in the tag value
+          // frames that allow different types of encoding contain terminated text
+          // [ID3v2.4.0 section 4.]
+
+          frame.value = parseUtf8(frame.data, descriptionEndIndex + 1, frame.data.length).replace(/\0*$/, '');
+          frame.data = frame.value;
+        },
+        'W*': function (frame) {
+          // parse URL field; URL fields are always represented as ISO-8859-1 [ID3v2.4.0 section 4.]
+          // if the value is followed by a string termination all the following information should be ignored [ID3v2.4.0 section 4.3]
+          frame.url = parseIso88591$1(frame.data, 0, frame.data.length).replace(/\0.*$/, '');
+        },
+        'WXXX': function (frame) {
+          var descriptionEndIndex;
+          if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+            // ignore frames with unrecognized character encodings
+            return;
+          }
+          descriptionEndIndex = typedArrayIndexOf(frame.data, 0, 1);
+          if (descriptionEndIndex === -1) {
+            return;
+          } // parse the description and URL fields
+
+          frame.description = parseUtf8(frame.data, 1, descriptionEndIndex); // URL fields are always represented as ISO-8859-1 [ID3v2.4.0 section 4.]
+          // if the value is followed by a string termination all the following information
+          // should be ignored [ID3v2.4.0 section 4.3]
+
+          frame.url = parseIso88591$1(frame.data, descriptionEndIndex + 1, frame.data.length).replace(/\0.*$/, '');
+        },
+        'PRIV': function (frame) {
+          var i;
+          for (i = 0; i < frame.data.length; i++) {
+            if (frame.data[i] === 0) {
+              // parse the description and URL fields
+              frame.owner = parseIso88591$1(frame.data, 0, i);
+              break;
+            }
+          }
+          frame.privateData = frame.data.subarray(i + 1);
+          frame.data = frame.privateData;
+        }
+      };
+    var parseId3Frames$1 = function (data) {
+      var frameSize,
+        frameHeader,
+        frameStart = 10,
+        tagSize = 0,
+        frames = []; // If we don't have enough data for a header, 10 bytes, 
+      // or 'ID3' in the first 3 bytes this is not a valid ID3 tag.
+
+      if (data.length < 10 || data[0] !== 'I'.charCodeAt(0) || data[1] !== 'D'.charCodeAt(0) || data[2] !== '3'.charCodeAt(0)) {
+        return;
+      } // the frame size is transmitted as a 28-bit integer in the
+      // last four bytes of the ID3 header.
+      // The most significant bit of each byte is dropped and the
+      // results concatenated to recover the actual value.
+
+      tagSize = parseSyncSafeInteger$1(data.subarray(6, 10)); // ID3 reports the tag size excluding the header but it's more
+      // convenient for our comparisons to include it
+
+      tagSize += 10; // check bit 6 of byte 5 for the extended header flag.
+
+      var hasExtendedHeader = data[5] & 0x40;
+      if (hasExtendedHeader) {
+        // advance the frame start past the extended header
+        frameStart += 4; // header size field
+
+        frameStart += parseSyncSafeInteger$1(data.subarray(10, 14));
+        tagSize -= parseSyncSafeInteger$1(data.subarray(16, 20)); // clip any padding off the end
+      } // parse one or more ID3 frames
+      // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+      do {
+        // determine the number of bytes in this frame
+        frameSize = parseSyncSafeInteger$1(data.subarray(frameStart + 4, frameStart + 8));
+        if (frameSize < 1) {
+          break;
+        }
+        frameHeader = String.fromCharCode(data[frameStart], data[frameStart + 1], data[frameStart + 2], data[frameStart + 3]);
+        var frame = {
+          id: frameHeader,
+          data: data.subarray(frameStart + 10, frameStart + frameSize + 10)
+        };
+        frame.key = frame.id; // parse frame values
+
+        if (frameParsers[frame.id]) {
+          // use frame specific parser
+          frameParsers[frame.id](frame);
+        } else if (frame.id[0] === 'T') {
+          // use text frame generic parser
+          frameParsers['T*'](frame);
+        } else if (frame.id[0] === 'W') {
+          // use URL link frame generic parser
+          frameParsers['W*'](frame);
+        }
+        frames.push(frame);
+        frameStart += 10; // advance past the frame header
+
+        frameStart += frameSize; // advance past the frame body
+      } while (frameStart < tagSize);
+      return frames;
+    };
+    var parseId3 = {
+      parseId3Frames: parseId3Frames$1,
+      parseSyncSafeInteger: parseSyncSafeInteger$1,
+      frameParsers: frameParsers
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Accepts program elementary stream (PES) data events and parses out
+     * ID3 metadata from them, if present.
+     * @see http://id3.org/id3v2.3.0
+     */
+
+    var Stream$5 = stream,
+      StreamTypes$3 = streamTypes,
+      id3 = parseId3,
+      MetadataStream;
+    MetadataStream = function (options) {
+      var settings = {
+          // the bytes of the program-level descriptor field in MP2T
+          // see ISO/IEC 13818-1:2013 (E), section 2.6 "Program and
+          // program element descriptors"
+          descriptor: options && options.descriptor
+        },
+        // the total size in bytes of the ID3 tag being parsed
+        tagSize = 0,
+        // tag data that is not complete enough to be parsed
+        buffer = [],
+        // the total number of bytes currently in the buffer
+        bufferSize = 0,
+        i;
+      MetadataStream.prototype.init.call(this); // calculate the text track in-band metadata track dispatch type
+      // https://html.spec.whatwg.org/multipage/embedded-content.html#steps-to-expose-a-media-resource-specific-text-track
+
+      this.dispatchType = StreamTypes$3.METADATA_STREAM_TYPE.toString(16);
+      if (settings.descriptor) {
+        for (i = 0; i < settings.descriptor.length; i++) {
+          this.dispatchType += ('00' + settings.descriptor[i].toString(16)).slice(-2);
+        }
+      }
+      this.push = function (chunk) {
+        var tag, frameStart, frameSize, frame, i, frameHeader;
+        if (chunk.type !== 'timed-metadata') {
+          return;
+        } // if data_alignment_indicator is set in the PES header,
+        // we must have the start of a new ID3 tag. Assume anything
+        // remaining in the buffer was malformed and throw it out
+
+        if (chunk.dataAlignmentIndicator) {
+          bufferSize = 0;
+          buffer.length = 0;
+        } // ignore events that don't look like ID3 data
+
+        if (buffer.length === 0 && (chunk.data.length < 10 || chunk.data[0] !== 'I'.charCodeAt(0) || chunk.data[1] !== 'D'.charCodeAt(0) || chunk.data[2] !== '3'.charCodeAt(0))) {
+          this.trigger('log', {
+            level: 'warn',
+            message: 'Skipping unrecognized metadata packet'
+          });
+          return;
+        } // add this chunk to the data we've collected so far
+
+        buffer.push(chunk);
+        bufferSize += chunk.data.byteLength; // grab the size of the entire frame from the ID3 header
+
+        if (buffer.length === 1) {
+          // the frame size is transmitted as a 28-bit integer in the
+          // last four bytes of the ID3 header.
+          // The most significant bit of each byte is dropped and the
+          // results concatenated to recover the actual value.
+          tagSize = id3.parseSyncSafeInteger(chunk.data.subarray(6, 10)); // ID3 reports the tag size excluding the header but it's more
+          // convenient for our comparisons to include it
+
+          tagSize += 10;
+        } // if the entire frame has not arrived, wait for more data
+
+        if (bufferSize < tagSize) {
+          return;
+        } // collect the entire frame so it can be parsed
+
+        tag = {
+          data: new Uint8Array(tagSize),
+          frames: [],
+          pts: buffer[0].pts,
+          dts: buffer[0].dts
+        };
+        for (i = 0; i < tagSize;) {
+          tag.data.set(buffer[0].data.subarray(0, tagSize - i), i);
+          i += buffer[0].data.byteLength;
+          bufferSize -= buffer[0].data.byteLength;
+          buffer.shift();
+        } // find the start of the first frame and the end of the tag
+
+        frameStart = 10;
+        if (tag.data[5] & 0x40) {
+          // advance the frame start past the extended header
+          frameStart += 4; // header size field
+
+          frameStart += id3.parseSyncSafeInteger(tag.data.subarray(10, 14)); // clip any padding off the end
+
+          tagSize -= id3.parseSyncSafeInteger(tag.data.subarray(16, 20));
+        } // parse one or more ID3 frames
+        // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+        do {
+          // determine the number of bytes in this frame
+          frameSize = id3.parseSyncSafeInteger(tag.data.subarray(frameStart + 4, frameStart + 8));
+          if (frameSize < 1) {
+            this.trigger('log', {
+              level: 'warn',
+              message: 'Malformed ID3 frame encountered. Skipping remaining metadata parsing.'
+            }); // If the frame is malformed, don't parse any further frames but allow previous valid parsed frames
+            // to be sent along.
+
+            break;
+          }
+          frameHeader = String.fromCharCode(tag.data[frameStart], tag.data[frameStart + 1], tag.data[frameStart + 2], tag.data[frameStart + 3]);
+          frame = {
+            id: frameHeader,
+            data: tag.data.subarray(frameStart + 10, frameStart + frameSize + 10)
+          };
+          frame.key = frame.id; // parse frame values
+
+          if (id3.frameParsers[frame.id]) {
+            // use frame specific parser
+            id3.frameParsers[frame.id](frame);
+          } else if (frame.id[0] === 'T') {
+            // use text frame generic parser
+            id3.frameParsers['T*'](frame);
+          } else if (frame.id[0] === 'W') {
+            // use URL link frame generic parser
+            id3.frameParsers['W*'](frame);
+          } // handle the special PRIV frame used to indicate the start
+          // time for raw AAC data
+
+          if (frame.owner === 'com.apple.streaming.transportStreamTimestamp') {
+            var d = frame.data,
+              size = (d[3] & 0x01) << 30 | d[4] << 22 | d[5] << 14 | d[6] << 6 | d[7] >>> 2;
+            size *= 4;
+            size += d[7] & 0x03;
+            frame.timeStamp = size; // in raw AAC, all subsequent data will be timestamped based
+            // on the value of this frame
+            // we couldn't have known the appropriate pts and dts before
+            // parsing this ID3 tag so set those values now
+
+            if (tag.pts === undefined && tag.dts === undefined) {
+              tag.pts = frame.timeStamp;
+              tag.dts = frame.timeStamp;
+            }
+            this.trigger('timestamp', frame);
+          }
+          tag.frames.push(frame);
+          frameStart += 10; // advance past the frame header
+
+          frameStart += frameSize; // advance past the frame body
+        } while (frameStart < tagSize);
+        this.trigger('data', tag);
+      };
+    };
+    MetadataStream.prototype = new Stream$5();
+    var metadataStream = MetadataStream;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * A stream-based mp2t to mp4 converter. This utility can be used to
+     * deliver mp4s to a SourceBuffer on platforms that support native
+     * Media Source Extensions.
+     */
+
+    var Stream$4 = stream,
+      CaptionStream$1 = captionStream,
+      StreamTypes$2 = streamTypes,
+      TimestampRolloverStream = timestampRolloverStream.TimestampRolloverStream; // object types
+
+    var TransportPacketStream, TransportParseStream, ElementaryStream; // constants
+
+    var MP2T_PACKET_LENGTH$1 = 188,
+      // bytes
+      SYNC_BYTE$1 = 0x47;
+    /**
+     * Splits an incoming stream of binary data into MPEG-2 Transport
+     * Stream packets.
+     */
+
+    TransportPacketStream = function () {
+      var buffer = new Uint8Array(MP2T_PACKET_LENGTH$1),
+        bytesInBuffer = 0;
+      TransportPacketStream.prototype.init.call(this); // Deliver new bytes to the stream.
+
+      /**
+       * Split a stream of data into M2TS packets
+      **/
+
+      this.push = function (bytes) {
+        var startIndex = 0,
+          endIndex = MP2T_PACKET_LENGTH$1,
+          everything; // If there are bytes remaining from the last segment, prepend them to the
+        // bytes that were pushed in
+
+        if (bytesInBuffer) {
+          everything = new Uint8Array(bytes.byteLength + bytesInBuffer);
+          everything.set(buffer.subarray(0, bytesInBuffer));
+          everything.set(bytes, bytesInBuffer);
+          bytesInBuffer = 0;
+        } else {
+          everything = bytes;
+        } // While we have enough data for a packet
+
+        while (endIndex < everything.byteLength) {
+          // Look for a pair of start and end sync bytes in the data..
+          if (everything[startIndex] === SYNC_BYTE$1 && everything[endIndex] === SYNC_BYTE$1) {
+            // We found a packet so emit it and jump one whole packet forward in
+            // the stream
+            this.trigger('data', everything.subarray(startIndex, endIndex));
+            startIndex += MP2T_PACKET_LENGTH$1;
+            endIndex += MP2T_PACKET_LENGTH$1;
+            continue;
+          } // If we get here, we have somehow become de-synchronized and we need to step
+          // forward one byte at a time until we find a pair of sync bytes that denote
+          // a packet
+
+          startIndex++;
+          endIndex++;
+        } // If there was some data left over at the end of the segment that couldn't
+        // possibly be a whole packet, keep it because it might be the start of a packet
+        // that continues in the next segment
+
+        if (startIndex < everything.byteLength) {
+          buffer.set(everything.subarray(startIndex), 0);
+          bytesInBuffer = everything.byteLength - startIndex;
+        }
+      };
+      /**
+       * Passes identified M2TS packets to the TransportParseStream to be parsed
+      **/
+
+      this.flush = function () {
+        // If the buffer contains a whole packet when we are being flushed, emit it
+        // and empty the buffer. Otherwise hold onto the data because it may be
+        // important for decoding the next segment
+        if (bytesInBuffer === MP2T_PACKET_LENGTH$1 && buffer[0] === SYNC_BYTE$1) {
+          this.trigger('data', buffer);
+          bytesInBuffer = 0;
+        }
+        this.trigger('done');
+      };
+      this.endTimeline = function () {
+        this.flush();
+        this.trigger('endedtimeline');
+      };
+      this.reset = function () {
+        bytesInBuffer = 0;
+        this.trigger('reset');
+      };
+    };
+    TransportPacketStream.prototype = new Stream$4();
+    /**
+     * Accepts an MP2T TransportPacketStream and emits data events with parsed
+     * forms of the individual transport stream packets.
+     */
+
+    TransportParseStream = function () {
+      var parsePsi, parsePat, parsePmt, self;
+      TransportParseStream.prototype.init.call(this);
+      self = this;
+      this.packetsWaitingForPmt = [];
+      this.programMapTable = undefined;
+      parsePsi = function (payload, psi) {
+        var offset = 0; // PSI packets may be split into multiple sections and those
+        // sections may be split into multiple packets. If a PSI
+        // section starts in this packet, the payload_unit_start_indicator
+        // will be true and the first byte of the payload will indicate
+        // the offset from the current position to the start of the
+        // section.
+
+        if (psi.payloadUnitStartIndicator) {
+          offset += payload[offset] + 1;
+        }
+        if (psi.type === 'pat') {
+          parsePat(payload.subarray(offset), psi);
+        } else {
+          parsePmt(payload.subarray(offset), psi);
+        }
+      };
+      parsePat = function (payload, pat) {
+        pat.section_number = payload[7]; // eslint-disable-line camelcase
+
+        pat.last_section_number = payload[8]; // eslint-disable-line camelcase
+        // skip the PSI header and parse the first PMT entry
+
+        self.pmtPid = (payload[10] & 0x1F) << 8 | payload[11];
+        pat.pmtPid = self.pmtPid;
+      };
+      /**
+       * Parse out the relevant fields of a Program Map Table (PMT).
+       * @param payload {Uint8Array} the PMT-specific portion of an MP2T
+       * packet. The first byte in this array should be the table_id
+       * field.
+       * @param pmt {object} the object that should be decorated with
+       * fields parsed from the PMT.
+       */
+
+      parsePmt = function (payload, pmt) {
+        var sectionLength, tableEnd, programInfoLength, offset; // PMTs can be sent ahead of the time when they should actually
+        // take effect. We don't believe this should ever be the case
+        // for HLS but we'll ignore "forward" PMT declarations if we see
+        // them. Future PMT declarations have the current_next_indicator
+        // set to zero.
+
+        if (!(payload[5] & 0x01)) {
+          return;
+        } // overwrite any existing program map table
+
+        self.programMapTable = {
+          video: null,
+          audio: null,
+          'timed-metadata': {}
+        }; // the mapping table ends at the end of the current section
+
+        sectionLength = (payload[1] & 0x0f) << 8 | payload[2];
+        tableEnd = 3 + sectionLength - 4; // to determine where the table is, we have to figure out how
+        // long the program info descriptors are
+
+        programInfoLength = (payload[10] & 0x0f) << 8 | payload[11]; // advance the offset to the first entry in the mapping table
+
+        offset = 12 + programInfoLength;
+        while (offset < tableEnd) {
+          var streamType = payload[offset];
+          var pid = (payload[offset + 1] & 0x1F) << 8 | payload[offset + 2]; // only map a single elementary_pid for audio and video stream types
+          // TODO: should this be done for metadata too? for now maintain behavior of
+          //       multiple metadata streams
+
+          if (streamType === StreamTypes$2.H264_STREAM_TYPE && self.programMapTable.video === null) {
+            self.programMapTable.video = pid;
+          } else if (streamType === StreamTypes$2.ADTS_STREAM_TYPE && self.programMapTable.audio === null) {
+            self.programMapTable.audio = pid;
+          } else if (streamType === StreamTypes$2.METADATA_STREAM_TYPE) {
+            // map pid to stream type for metadata streams
+            self.programMapTable['timed-metadata'][pid] = streamType;
+          } // move to the next table entry
+          // skip past the elementary stream descriptors, if present
+
+          offset += ((payload[offset + 3] & 0x0F) << 8 | payload[offset + 4]) + 5;
+        } // record the map on the packet as well
+
+        pmt.programMapTable = self.programMapTable;
+      };
+      /**
+       * Deliver a new MP2T packet to the next stream in the pipeline.
+       */
+
+      this.push = function (packet) {
+        var result = {},
+          offset = 4;
+        result.payloadUnitStartIndicator = !!(packet[1] & 0x40); // pid is a 13-bit field starting at the last bit of packet[1]
+
+        result.pid = packet[1] & 0x1f;
+        result.pid <<= 8;
+        result.pid |= packet[2]; // if an adaption field is present, its length is specified by the
+        // fifth byte of the TS packet header. The adaptation field is
+        // used to add stuffing to PES packets that don't fill a complete
+        // TS packet, and to specify some forms of timing and control data
+        // that we do not currently use.
+
+        if ((packet[3] & 0x30) >>> 4 > 0x01) {
+          offset += packet[offset] + 1;
+        } // parse the rest of the packet based on the type
+
+        if (result.pid === 0) {
+          result.type = 'pat';
+          parsePsi(packet.subarray(offset), result);
+          this.trigger('data', result);
+        } else if (result.pid === this.pmtPid) {
+          result.type = 'pmt';
+          parsePsi(packet.subarray(offset), result);
+          this.trigger('data', result); // if there are any packets waiting for a PMT to be found, process them now
+
+          while (this.packetsWaitingForPmt.length) {
+            this.processPes_.apply(this, this.packetsWaitingForPmt.shift());
+          }
+        } else if (this.programMapTable === undefined) {
+          // When we have not seen a PMT yet, defer further processing of
+          // PES packets until one has been parsed
+          this.packetsWaitingForPmt.push([packet, offset, result]);
+        } else {
+          this.processPes_(packet, offset, result);
+        }
+      };
+      this.processPes_ = function (packet, offset, result) {
+        // set the appropriate stream type
+        if (result.pid === this.programMapTable.video) {
+          result.streamType = StreamTypes$2.H264_STREAM_TYPE;
+        } else if (result.pid === this.programMapTable.audio) {
+          result.streamType = StreamTypes$2.ADTS_STREAM_TYPE;
+        } else {
+          // if not video or audio, it is timed-metadata or unknown
+          // if unknown, streamType will be undefined
+          result.streamType = this.programMapTable['timed-metadata'][result.pid];
+        }
+        result.type = 'pes';
+        result.data = packet.subarray(offset);
+        this.trigger('data', result);
+      };
+    };
+    TransportParseStream.prototype = new Stream$4();
+    TransportParseStream.STREAM_TYPES = {
+      h264: 0x1b,
+      adts: 0x0f
+    };
+    /**
+     * Reconsistutes program elementary stream (PES) packets from parsed
+     * transport stream packets. That is, if you pipe an
+     * mp2t.TransportParseStream into a mp2t.ElementaryStream, the output
+     * events will be events which capture the bytes for individual PES
+     * packets plus relevant metadata that has been extracted from the
+     * container.
+     */
+
+    ElementaryStream = function () {
+      var self = this,
+        segmentHadPmt = false,
+        // PES packet fragments
+        video = {
+          data: [],
+          size: 0
+        },
+        audio = {
+          data: [],
+          size: 0
+        },
+        timedMetadata = {
+          data: [],
+          size: 0
+        },
+        programMapTable,
+        parsePes = function (payload, pes) {
+          var ptsDtsFlags;
+          const startPrefix = payload[0] << 16 | payload[1] << 8 | payload[2]; // default to an empty array
+
+          pes.data = new Uint8Array(); // In certain live streams, the start of a TS fragment has ts packets
+          // that are frame data that is continuing from the previous fragment. This
+          // is to check that the pes data is the start of a new pes payload
+
+          if (startPrefix !== 1) {
+            return;
+          } // get the packet length, this will be 0 for video
+
+          pes.packetLength = 6 + (payload[4] << 8 | payload[5]); // find out if this packets starts a new keyframe
+
+          pes.dataAlignmentIndicator = (payload[6] & 0x04) !== 0; // PES packets may be annotated with a PTS value, or a PTS value
+          // and a DTS value. Determine what combination of values is
+          // available to work with.
+
+          ptsDtsFlags = payload[7]; // PTS and DTS are normally stored as a 33-bit number.  Javascript
+          // performs all bitwise operations on 32-bit integers but javascript
+          // supports a much greater range (52-bits) of integer using standard
+          // mathematical operations.
+          // We construct a 31-bit value using bitwise operators over the 31
+          // most significant bits and then multiply by 4 (equal to a left-shift
+          // of 2) before we add the final 2 least significant bits of the
+          // timestamp (equal to an OR.)
+
+          if (ptsDtsFlags & 0xC0) {
+            // the PTS and DTS are not written out directly. For information
+            // on how they are encoded, see
+            // http://dvd.sourceforge.net/dvdinfo/pes-hdr.html
+            pes.pts = (payload[9] & 0x0E) << 27 | (payload[10] & 0xFF) << 20 | (payload[11] & 0xFE) << 12 | (payload[12] & 0xFF) << 5 | (payload[13] & 0xFE) >>> 3;
+            pes.pts *= 4; // Left shift by 2
+
+            pes.pts += (payload[13] & 0x06) >>> 1; // OR by the two LSBs
+
+            pes.dts = pes.pts;
+            if (ptsDtsFlags & 0x40) {
+              pes.dts = (payload[14] & 0x0E) << 27 | (payload[15] & 0xFF) << 20 | (payload[16] & 0xFE) << 12 | (payload[17] & 0xFF) << 5 | (payload[18] & 0xFE) >>> 3;
+              pes.dts *= 4; // Left shift by 2
+
+              pes.dts += (payload[18] & 0x06) >>> 1; // OR by the two LSBs
+            }
+          } // the data section starts immediately after the PES header.
+          // pes_header_data_length specifies the number of header bytes
+          // that follow the last byte of the field.
+
+          pes.data = payload.subarray(9 + payload[8]);
+        },
+        /**
+          * Pass completely parsed PES packets to the next stream in the pipeline
+         **/
+        flushStream = function (stream, type, forceFlush) {
+          var packetData = new Uint8Array(stream.size),
+            event = {
+              type: type
+            },
+            i = 0,
+            offset = 0,
+            packetFlushable = false,
+            fragment; // do nothing if there is not enough buffered data for a complete
+          // PES header
+
+          if (!stream.data.length || stream.size < 9) {
+            return;
+          }
+          event.trackId = stream.data[0].pid; // reassemble the packet
+
+          for (i = 0; i < stream.data.length; i++) {
+            fragment = stream.data[i];
+            packetData.set(fragment.data, offset);
+            offset += fragment.data.byteLength;
+          } // parse assembled packet's PES header
+
+          parsePes(packetData, event); // non-video PES packets MUST have a non-zero PES_packet_length
+          // check that there is enough stream data to fill the packet
+
+          packetFlushable = type === 'video' || event.packetLength <= stream.size; // flush pending packets if the conditions are right
+
+          if (forceFlush || packetFlushable) {
+            stream.size = 0;
+            stream.data.length = 0;
+          } // only emit packets that are complete. this is to avoid assembling
+          // incomplete PES packets due to poor segmentation
+
+          if (packetFlushable) {
+            self.trigger('data', event);
+          }
+        };
+      ElementaryStream.prototype.init.call(this);
+      /**
+       * Identifies M2TS packet types and parses PES packets using metadata
+       * parsed from the PMT
+       **/
+
+      this.push = function (data) {
+        ({
+          pat: function () {// we have to wait for the PMT to arrive as well before we
+            // have any meaningful metadata
+          },
+          pes: function () {
+            var stream, streamType;
+            switch (data.streamType) {
+              case StreamTypes$2.H264_STREAM_TYPE:
+                stream = video;
+                streamType = 'video';
+                break;
+              case StreamTypes$2.ADTS_STREAM_TYPE:
+                stream = audio;
+                streamType = 'audio';
+                break;
+              case StreamTypes$2.METADATA_STREAM_TYPE:
+                stream = timedMetadata;
+                streamType = 'timed-metadata';
+                break;
+              default:
+                // ignore unknown stream types
+                return;
+            } // if a new packet is starting, we can flush the completed
+            // packet
+
+            if (data.payloadUnitStartIndicator) {
+              flushStream(stream, streamType, true);
+            } // buffer this fragment until we are sure we've received the
+            // complete payload
+
+            stream.data.push(data);
+            stream.size += data.data.byteLength;
+          },
+          pmt: function () {
+            var event = {
+              type: 'metadata',
+              tracks: []
+            };
+            programMapTable = data.programMapTable; // translate audio and video streams to tracks
+
+            if (programMapTable.video !== null) {
+              event.tracks.push({
+                timelineStartInfo: {
+                  baseMediaDecodeTime: 0
+                },
+                id: +programMapTable.video,
+                codec: 'avc',
+                type: 'video'
+              });
+            }
+            if (programMapTable.audio !== null) {
+              event.tracks.push({
+                timelineStartInfo: {
+                  baseMediaDecodeTime: 0
+                },
+                id: +programMapTable.audio,
+                codec: 'adts',
+                type: 'audio'
+              });
+            }
+            segmentHadPmt = true;
+            self.trigger('data', event);
+          }
+        })[data.type]();
+      };
+      this.reset = function () {
+        video.size = 0;
+        video.data.length = 0;
+        audio.size = 0;
+        audio.data.length = 0;
+        this.trigger('reset');
+      };
+      /**
+       * Flush any remaining input. Video PES packets may be of variable
+       * length. Normally, the start of a new video packet can trigger the
+       * finalization of the previous packet. That is not possible if no
+       * more video is forthcoming, however. In that case, some other
+       * mechanism (like the end of the file) has to be employed. When it is
+       * clear that no additional data is forthcoming, calling this method
+       * will flush the buffered packets.
+       */
+
+      this.flushStreams_ = function () {
+        // !!THIS ORDER IS IMPORTANT!!
+        // video first then audio
+        flushStream(video, 'video');
+        flushStream(audio, 'audio');
+        flushStream(timedMetadata, 'timed-metadata');
+      };
+      this.flush = function () {
+        // if on flush we haven't had a pmt emitted
+        // and we have a pmt to emit. emit the pmt
+        // so that we trigger a trackinfo downstream.
+        if (!segmentHadPmt && programMapTable) {
+          var pmt = {
+            type: 'metadata',
+            tracks: []
+          }; // translate audio and video streams to tracks
+
+          if (programMapTable.video !== null) {
+            pmt.tracks.push({
+              timelineStartInfo: {
+                baseMediaDecodeTime: 0
+              },
+              id: +programMapTable.video,
+              codec: 'avc',
+              type: 'video'
+            });
+          }
+          if (programMapTable.audio !== null) {
+            pmt.tracks.push({
+              timelineStartInfo: {
+                baseMediaDecodeTime: 0
+              },
+              id: +programMapTable.audio,
+              codec: 'adts',
+              type: 'audio'
+            });
+          }
+          self.trigger('data', pmt);
+        }
+        segmentHadPmt = false;
+        this.flushStreams_();
+        this.trigger('done');
+      };
+    };
+    ElementaryStream.prototype = new Stream$4();
+    var m2ts$1 = {
+      PAT_PID: 0x0000,
+      MP2T_PACKET_LENGTH: MP2T_PACKET_LENGTH$1,
+      TransportPacketStream: TransportPacketStream,
+      TransportParseStream: TransportParseStream,
+      ElementaryStream: ElementaryStream,
+      TimestampRolloverStream: TimestampRolloverStream,
+      CaptionStream: CaptionStream$1.CaptionStream,
+      Cea608Stream: CaptionStream$1.Cea608Stream,
+      Cea708Stream: CaptionStream$1.Cea708Stream,
+      MetadataStream: metadataStream
+    };
+    for (var type in StreamTypes$2) {
+      if (StreamTypes$2.hasOwnProperty(type)) {
+        m2ts$1[type] = StreamTypes$2[type];
+      }
+    }
+    var m2ts_1 = m2ts$1;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var Stream$3 = stream;
+    var ONE_SECOND_IN_TS$2 = clock$2.ONE_SECOND_IN_TS;
+    var AdtsStream$1;
+    var ADTS_SAMPLING_FREQUENCIES$1 = [96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350];
+    /*
+     * Accepts a ElementaryStream and emits data events with parsed
+     * AAC Audio Frames of the individual packets. Input audio in ADTS
+     * format is unpacked and re-emitted as AAC frames.
+     *
+     * @see http://wiki.multimedia.cx/index.php?title=ADTS
+     * @see http://wiki.multimedia.cx/?title=Understanding_AAC
+     */
+
+    AdtsStream$1 = function (handlePartialSegments) {
+      var buffer,
+        frameNum = 0;
+      AdtsStream$1.prototype.init.call(this);
+      this.skipWarn_ = function (start, end) {
+        this.trigger('log', {
+          level: 'warn',
+          message: `adts skiping bytes ${start} to ${end} in frame ${frameNum} outside syncword`
+        });
+      };
+      this.push = function (packet) {
+        var i = 0,
+          frameLength,
+          protectionSkipBytes,
+          oldBuffer,
+          sampleCount,
+          adtsFrameDuration;
+        if (!handlePartialSegments) {
+          frameNum = 0;
+        }
+        if (packet.type !== 'audio') {
+          // ignore non-audio data
+          return;
+        } // Prepend any data in the buffer to the input data so that we can parse
+        // aac frames the cross a PES packet boundary
+
+        if (buffer && buffer.length) {
+          oldBuffer = buffer;
+          buffer = new Uint8Array(oldBuffer.byteLength + packet.data.byteLength);
+          buffer.set(oldBuffer);
+          buffer.set(packet.data, oldBuffer.byteLength);
+        } else {
+          buffer = packet.data;
+        } // unpack any ADTS frames which have been fully received
+        // for details on the ADTS header, see http://wiki.multimedia.cx/index.php?title=ADTS
+
+        var skip; // We use i + 7 here because we want to be able to parse the entire header.
+        // If we don't have enough bytes to do that, then we definitely won't have a full frame.
+
+        while (i + 7 < buffer.length) {
+          // Look for the start of an ADTS header..
+          if (buffer[i] !== 0xFF || (buffer[i + 1] & 0xF6) !== 0xF0) {
+            if (typeof skip !== 'number') {
+              skip = i;
+            } // If a valid header was not found,  jump one forward and attempt to
+            // find a valid ADTS header starting at the next byte
+
+            i++;
+            continue;
+          }
+          if (typeof skip === 'number') {
+            this.skipWarn_(skip, i);
+            skip = null;
+          } // The protection skip bit tells us if we have 2 bytes of CRC data at the
+          // end of the ADTS header
+
+          protectionSkipBytes = (~buffer[i + 1] & 0x01) * 2; // Frame length is a 13 bit integer starting 16 bits from the
+          // end of the sync sequence
+          // NOTE: frame length includes the size of the header
+
+          frameLength = (buffer[i + 3] & 0x03) << 11 | buffer[i + 4] << 3 | (buffer[i + 5] & 0xe0) >> 5;
+          sampleCount = ((buffer[i + 6] & 0x03) + 1) * 1024;
+          adtsFrameDuration = sampleCount * ONE_SECOND_IN_TS$2 / ADTS_SAMPLING_FREQUENCIES$1[(buffer[i + 2] & 0x3c) >>> 2]; // If we don't have enough data to actually finish this ADTS frame,
+          // then we have to wait for more data
+
+          if (buffer.byteLength - i < frameLength) {
+            break;
+          } // Otherwise, deliver the complete AAC frame
+
+          this.trigger('data', {
+            pts: packet.pts + frameNum * adtsFrameDuration,
+            dts: packet.dts + frameNum * adtsFrameDuration,
+            sampleCount: sampleCount,
+            audioobjecttype: (buffer[i + 2] >>> 6 & 0x03) + 1,
+            channelcount: (buffer[i + 2] & 1) << 2 | (buffer[i + 3] & 0xc0) >>> 6,
+            samplerate: ADTS_SAMPLING_FREQUENCIES$1[(buffer[i + 2] & 0x3c) >>> 2],
+            samplingfrequencyindex: (buffer[i + 2] & 0x3c) >>> 2,
+            // assume ISO/IEC 14496-12 AudioSampleEntry default of 16
+            samplesize: 16,
+            // data is the frame without it's header
+            data: buffer.subarray(i + 7 + protectionSkipBytes, i + frameLength)
+          });
+          frameNum++;
+          i += frameLength;
+        }
+        if (typeof skip === 'number') {
+          this.skipWarn_(skip, i);
+          skip = null;
+        } // remove processed bytes from the buffer.
+
+        buffer = buffer.subarray(i);
+      };
+      this.flush = function () {
+        frameNum = 0;
+        this.trigger('done');
+      };
+      this.reset = function () {
+        buffer = void 0;
+        this.trigger('reset');
+      };
+      this.endTimeline = function () {
+        buffer = void 0;
+        this.trigger('endedtimeline');
+      };
+    };
+    AdtsStream$1.prototype = new Stream$3();
+    var adts = AdtsStream$1;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var ExpGolomb$1;
+    /**
+     * Parser for exponential Golomb codes, a variable-bitwidth number encoding
+     * scheme used by h264.
+     */
+
+    ExpGolomb$1 = function (workingData) {
+      var
+        // the number of bytes left to examine in workingData
+        workingBytesAvailable = workingData.byteLength,
+        // the current word being examined
+        workingWord = 0,
+        // :uint
+        // the number of bits left to examine in the current word
+        workingBitsAvailable = 0; // :uint;
+      // ():uint
+
+      this.length = function () {
+        return 8 * workingBytesAvailable;
+      }; // ():uint
+
+      this.bitsAvailable = function () {
+        return 8 * workingBytesAvailable + workingBitsAvailable;
+      }; // ():void
+
+      this.loadWord = function () {
+        var position = workingData.byteLength - workingBytesAvailable,
+          workingBytes = new Uint8Array(4),
+          availableBytes = Math.min(4, workingBytesAvailable);
+        if (availableBytes === 0) {
+          throw new Error('no bytes available');
+        }
+        workingBytes.set(workingData.subarray(position, position + availableBytes));
+        workingWord = new DataView(workingBytes.buffer).getUint32(0); // track the amount of workingData that has been processed
+
+        workingBitsAvailable = availableBytes * 8;
+        workingBytesAvailable -= availableBytes;
+      }; // (count:int):void
+
+      this.skipBits = function (count) {
+        var skipBytes; // :int
+
+        if (workingBitsAvailable > count) {
+          workingWord <<= count;
+          workingBitsAvailable -= count;
+        } else {
+          count -= workingBitsAvailable;
+          skipBytes = Math.floor(count / 8);
+          count -= skipBytes * 8;
+          workingBytesAvailable -= skipBytes;
+          this.loadWord();
+          workingWord <<= count;
+          workingBitsAvailable -= count;
+        }
+      }; // (size:int):uint
+
+      this.readBits = function (size) {
+        var bits = Math.min(workingBitsAvailable, size),
+          // :uint
+          valu = workingWord >>> 32 - bits; // :uint
+        // if size > 31, handle error
+
+        workingBitsAvailable -= bits;
+        if (workingBitsAvailable > 0) {
+          workingWord <<= bits;
+        } else if (workingBytesAvailable > 0) {
+          this.loadWord();
+        }
+        bits = size - bits;
+        if (bits > 0) {
+          return valu << bits | this.readBits(bits);
+        }
+        return valu;
+      }; // ():uint
+
+      this.skipLeadingZeros = function () {
+        var leadingZeroCount; // :uint
+
+        for (leadingZeroCount = 0; leadingZeroCount < workingBitsAvailable; ++leadingZeroCount) {
+          if ((workingWord & 0x80000000 >>> leadingZeroCount) !== 0) {
+            // the first bit of working word is 1
+            workingWord <<= leadingZeroCount;
+            workingBitsAvailable -= leadingZeroCount;
+            return leadingZeroCount;
+          }
+        } // we exhausted workingWord and still have not found a 1
+
+        this.loadWord();
+        return leadingZeroCount + this.skipLeadingZeros();
+      }; // ():void
+
+      this.skipUnsignedExpGolomb = function () {
+        this.skipBits(1 + this.skipLeadingZeros());
+      }; // ():void
+
+      this.skipExpGolomb = function () {
+        this.skipBits(1 + this.skipLeadingZeros());
+      }; // ():uint
+
+      this.readUnsignedExpGolomb = function () {
+        var clz = this.skipLeadingZeros(); // :uint
+
+        return this.readBits(clz + 1) - 1;
+      }; // ():int
+
+      this.readExpGolomb = function () {
+        var valu = this.readUnsignedExpGolomb(); // :int
+
+        if (0x01 & valu) {
+          // the number is odd if the low order bit is set
+          return 1 + valu >>> 1; // add 1 to make it even, and divide by 2
+        }
+
+        return -1 * (valu >>> 1); // divide by two then make it negative
+      }; // Some convenience functions
+      // :Boolean
+
+      this.readBoolean = function () {
+        return this.readBits(1) === 1;
+      }; // ():int
+
+      this.readUnsignedByte = function () {
+        return this.readBits(8);
+      };
+      this.loadWord();
+    };
+    var expGolomb = ExpGolomb$1;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var Stream$2 = stream;
+    var ExpGolomb = expGolomb;
+    var H264Stream$1, NalByteStream;
+    var PROFILES_WITH_OPTIONAL_SPS_DATA;
+    /**
+     * Accepts a NAL unit byte stream and unpacks the embedded NAL units.
+     */
+
+    NalByteStream = function () {
+      var syncPoint = 0,
+        i,
+        buffer;
+      NalByteStream.prototype.init.call(this);
+      /*
+       * Scans a byte stream and triggers a data event with the NAL units found.
+       * @param {Object} data Event received from H264Stream
+       * @param {Uint8Array} data.data The h264 byte stream to be scanned
+       *
+       * @see H264Stream.push
+       */
+
+      this.push = function (data) {
+        var swapBuffer;
+        if (!buffer) {
+          buffer = data.data;
+        } else {
+          swapBuffer = new Uint8Array(buffer.byteLength + data.data.byteLength);
+          swapBuffer.set(buffer);
+          swapBuffer.set(data.data, buffer.byteLength);
+          buffer = swapBuffer;
+        }
+        var len = buffer.byteLength; // Rec. ITU-T H.264, Annex B
+        // scan for NAL unit boundaries
+        // a match looks like this:
+        // 0 0 1 .. NAL .. 0 0 1
+        // ^ sync point        ^ i
+        // or this:
+        // 0 0 1 .. NAL .. 0 0 0
+        // ^ sync point        ^ i
+        // advance the sync point to a NAL start, if necessary
+
+        for (; syncPoint < len - 3; syncPoint++) {
+          if (buffer[syncPoint + 2] === 1) {
+            // the sync point is properly aligned
+            i = syncPoint + 5;
+            break;
+          }
+        }
+        while (i < len) {
+          // look at the current byte to determine if we've hit the end of
+          // a NAL unit boundary
+          switch (buffer[i]) {
+            case 0:
+              // skip past non-sync sequences
+              if (buffer[i - 1] !== 0) {
+                i += 2;
+                break;
+              } else if (buffer[i - 2] !== 0) {
+                i++;
+                break;
+              } // deliver the NAL unit if it isn't empty
+
+              if (syncPoint + 3 !== i - 2) {
+                this.trigger('data', buffer.subarray(syncPoint + 3, i - 2));
+              } // drop trailing zeroes
+
+              do {
+                i++;
+              } while (buffer[i] !== 1 && i < len);
+              syncPoint = i - 2;
+              i += 3;
+              break;
+            case 1:
+              // skip past non-sync sequences
+              if (buffer[i - 1] !== 0 || buffer[i - 2] !== 0) {
+                i += 3;
+                break;
+              } // deliver the NAL unit
+
+              this.trigger('data', buffer.subarray(syncPoint + 3, i - 2));
+              syncPoint = i - 2;
+              i += 3;
+              break;
+            default:
+              // the current byte isn't a one or zero, so it cannot be part
+              // of a sync sequence
+              i += 3;
+              break;
+          }
+        } // filter out the NAL units that were delivered
+
+        buffer = buffer.subarray(syncPoint);
+        i -= syncPoint;
+        syncPoint = 0;
+      };
+      this.reset = function () {
+        buffer = null;
+        syncPoint = 0;
+        this.trigger('reset');
+      };
+      this.flush = function () {
+        // deliver the last buffered NAL unit
+        if (buffer && buffer.byteLength > 3) {
+          this.trigger('data', buffer.subarray(syncPoint + 3));
+        } // reset the stream state
+
+        buffer = null;
+        syncPoint = 0;
+        this.trigger('done');
+      };
+      this.endTimeline = function () {
+        this.flush();
+        this.trigger('endedtimeline');
+      };
+    };
+    NalByteStream.prototype = new Stream$2(); // values of profile_idc that indicate additional fields are included in the SPS
+    // see Recommendation ITU-T H.264 (4/2013),
+    // 7.3.2.1.1 Sequence parameter set data syntax
+
+    PROFILES_WITH_OPTIONAL_SPS_DATA = {
+      100: true,
+      110: true,
+      122: true,
+      244: true,
+      44: true,
+      83: true,
+      86: true,
+      118: true,
+      128: true,
+      // TODO: the three profiles below don't
+      // appear to have sps data in the specificiation anymore?
+      138: true,
+      139: true,
+      134: true
+    };
+    /**
+     * Accepts input from a ElementaryStream and produces H.264 NAL unit data
+     * events.
+     */
+
+    H264Stream$1 = function () {
+      var nalByteStream = new NalByteStream(),
+        self,
+        trackId,
+        currentPts,
+        currentDts,
+        discardEmulationPreventionBytes,
+        readSequenceParameterSet,
+        skipScalingList;
+      H264Stream$1.prototype.init.call(this);
+      self = this;
+      /*
+       * Pushes a packet from a stream onto the NalByteStream
+       *
+       * @param {Object} packet - A packet received from a stream
+       * @param {Uint8Array} packet.data - The raw bytes of the packet
+       * @param {Number} packet.dts - Decode timestamp of the packet
+       * @param {Number} packet.pts - Presentation timestamp of the packet
+       * @param {Number} packet.trackId - The id of the h264 track this packet came from
+       * @param {('video'|'audio')} packet.type - The type of packet
+       *
+       */
+
+      this.push = function (packet) {
+        if (packet.type !== 'video') {
+          return;
+        }
+        trackId = packet.trackId;
+        currentPts = packet.pts;
+        currentDts = packet.dts;
+        nalByteStream.push(packet);
+      };
+      /*
+       * Identify NAL unit types and pass on the NALU, trackId, presentation and decode timestamps
+       * for the NALUs to the next stream component.
+       * Also, preprocess caption and sequence parameter NALUs.
+       *
+       * @param {Uint8Array} data - A NAL unit identified by `NalByteStream.push`
+       * @see NalByteStream.push
+       */
+
+      nalByteStream.on('data', function (data) {
+        var event = {
+          trackId: trackId,
+          pts: currentPts,
+          dts: currentDts,
+          data: data,
+          nalUnitTypeCode: data[0] & 0x1f
+        };
+        switch (event.nalUnitTypeCode) {
+          case 0x05:
+            event.nalUnitType = 'slice_layer_without_partitioning_rbsp_idr';
+            break;
+          case 0x06:
+            event.nalUnitType = 'sei_rbsp';
+            event.escapedRBSP = discardEmulationPreventionBytes(data.subarray(1));
+            break;
+          case 0x07:
+            event.nalUnitType = 'seq_parameter_set_rbsp';
+            event.escapedRBSP = discardEmulationPreventionBytes(data.subarray(1));
+            event.config = readSequenceParameterSet(event.escapedRBSP);
+            break;
+          case 0x08:
+            event.nalUnitType = 'pic_parameter_set_rbsp';
+            break;
+          case 0x09:
+            event.nalUnitType = 'access_unit_delimiter_rbsp';
+            break;
+        } // This triggers data on the H264Stream
+
+        self.trigger('data', event);
+      });
+      nalByteStream.on('done', function () {
+        self.trigger('done');
+      });
+      nalByteStream.on('partialdone', function () {
+        self.trigger('partialdone');
+      });
+      nalByteStream.on('reset', function () {
+        self.trigger('reset');
+      });
+      nalByteStream.on('endedtimeline', function () {
+        self.trigger('endedtimeline');
+      });
+      this.flush = function () {
+        nalByteStream.flush();
+      };
+      this.partialFlush = function () {
+        nalByteStream.partialFlush();
+      };
+      this.reset = function () {
+        nalByteStream.reset();
+      };
+      this.endTimeline = function () {
+        nalByteStream.endTimeline();
+      };
+      /**
+       * Advance the ExpGolomb decoder past a scaling list. The scaling
+       * list is optionally transmitted as part of a sequence parameter
+       * set and is not relevant to transmuxing.
+       * @param count {number} the number of entries in this scaling list
+       * @param expGolombDecoder {object} an ExpGolomb pointed to the
+       * start of a scaling list
+       * @see Recommendation ITU-T H.264, Section 7.3.2.1.1.1
+       */
+
+      skipScalingList = function (count, expGolombDecoder) {
+        var lastScale = 8,
+          nextScale = 8,
+          j,
+          deltaScale;
+        for (j = 0; j < count; j++) {
+          if (nextScale !== 0) {
+            deltaScale = expGolombDecoder.readExpGolomb();
+            nextScale = (lastScale + deltaScale + 256) % 256;
+          }
+          lastScale = nextScale === 0 ? lastScale : nextScale;
+        }
+      };
+      /**
+       * Expunge any "Emulation Prevention" bytes from a "Raw Byte
+       * Sequence Payload"
+       * @param data {Uint8Array} the bytes of a RBSP from a NAL
+       * unit
+       * @return {Uint8Array} the RBSP without any Emulation
+       * Prevention Bytes
+       */
+
+      discardEmulationPreventionBytes = function (data) {
+        var length = data.byteLength,
+          emulationPreventionBytesPositions = [],
+          i = 1,
+          newLength,
+          newData; // Find all `Emulation Prevention Bytes`
+
+        while (i < length - 2) {
+          if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0x03) {
+            emulationPreventionBytesPositions.push(i + 2);
+            i += 2;
+          } else {
+            i++;
+          }
+        } // If no Emulation Prevention Bytes were found just return the original
+        // array
+
+        if (emulationPreventionBytesPositions.length === 0) {
+          return data;
+        } // Create a new array to hold the NAL unit data
+
+        newLength = length - emulationPreventionBytesPositions.length;
+        newData = new Uint8Array(newLength);
+        var sourceIndex = 0;
+        for (i = 0; i < newLength; sourceIndex++, i++) {
+          if (sourceIndex === emulationPreventionBytesPositions[0]) {
+            // Skip this byte
+            sourceIndex++; // Remove this position index
+
+            emulationPreventionBytesPositions.shift();
+          }
+          newData[i] = data[sourceIndex];
+        }
+        return newData;
+      };
+      /**
+       * Read a sequence parameter set and return some interesting video
+       * properties. A sequence parameter set is the H264 metadata that
+       * describes the properties of upcoming video frames.
+       * @param data {Uint8Array} the bytes of a sequence parameter set
+       * @return {object} an object with configuration parsed from the
+       * sequence parameter set, including the dimensions of the
+       * associated video frames.
+       */
+
+      readSequenceParameterSet = function (data) {
+        var frameCropLeftOffset = 0,
+          frameCropRightOffset = 0,
+          frameCropTopOffset = 0,
+          frameCropBottomOffset = 0,
+          expGolombDecoder,
+          profileIdc,
+          levelIdc,
+          profileCompatibility,
+          chromaFormatIdc,
+          picOrderCntType,
+          numRefFramesInPicOrderCntCycle,
+          picWidthInMbsMinus1,
+          picHeightInMapUnitsMinus1,
+          frameMbsOnlyFlag,
+          scalingListCount,
+          sarRatio = [1, 1],
+          aspectRatioIdc,
+          i;
+        expGolombDecoder = new ExpGolomb(data);
+        profileIdc = expGolombDecoder.readUnsignedByte(); // profile_idc
+
+        profileCompatibility = expGolombDecoder.readUnsignedByte(); // constraint_set[0-5]_flag
+
+        levelIdc = expGolombDecoder.readUnsignedByte(); // level_idc u(8)
+
+        expGolombDecoder.skipUnsignedExpGolomb(); // seq_parameter_set_id
+        // some profiles have more optional data we don't need
+
+        if (PROFILES_WITH_OPTIONAL_SPS_DATA[profileIdc]) {
+          chromaFormatIdc = expGolombDecoder.readUnsignedExpGolomb();
+          if (chromaFormatIdc === 3) {
+            expGolombDecoder.skipBits(1); // separate_colour_plane_flag
+          }
+
+          expGolombDecoder.skipUnsignedExpGolomb(); // bit_depth_luma_minus8
+
+          expGolombDecoder.skipUnsignedExpGolomb(); // bit_depth_chroma_minus8
+
+          expGolombDecoder.skipBits(1); // qpprime_y_zero_transform_bypass_flag
+
+          if (expGolombDecoder.readBoolean()) {
+            // seq_scaling_matrix_present_flag
+            scalingListCount = chromaFormatIdc !== 3 ? 8 : 12;
+            for (i = 0; i < scalingListCount; i++) {
+              if (expGolombDecoder.readBoolean()) {
+                // seq_scaling_list_present_flag[ i ]
+                if (i < 6) {
+                  skipScalingList(16, expGolombDecoder);
+                } else {
+                  skipScalingList(64, expGolombDecoder);
+                }
+              }
+            }
+          }
+        }
+        expGolombDecoder.skipUnsignedExpGolomb(); // log2_max_frame_num_minus4
+
+        picOrderCntType = expGolombDecoder.readUnsignedExpGolomb();
+        if (picOrderCntType === 0) {
+          expGolombDecoder.readUnsignedExpGolomb(); // log2_max_pic_order_cnt_lsb_minus4
+        } else if (picOrderCntType === 1) {
+          expGolombDecoder.skipBits(1); // delta_pic_order_always_zero_flag
+
+          expGolombDecoder.skipExpGolomb(); // offset_for_non_ref_pic
+
+          expGolombDecoder.skipExpGolomb(); // offset_for_top_to_bottom_field
+
+          numRefFramesInPicOrderCntCycle = expGolombDecoder.readUnsignedExpGolomb();
+          for (i = 0; i < numRefFramesInPicOrderCntCycle; i++) {
+            expGolombDecoder.skipExpGolomb(); // offset_for_ref_frame[ i ]
+          }
+        }
+
+        expGolombDecoder.skipUnsignedExpGolomb(); // max_num_ref_frames
+
+        expGolombDecoder.skipBits(1); // gaps_in_frame_num_value_allowed_flag
+
+        picWidthInMbsMinus1 = expGolombDecoder.readUnsignedExpGolomb();
+        picHeightInMapUnitsMinus1 = expGolombDecoder.readUnsignedExpGolomb();
+        frameMbsOnlyFlag = expGolombDecoder.readBits(1);
+        if (frameMbsOnlyFlag === 0) {
+          expGolombDecoder.skipBits(1); // mb_adaptive_frame_field_flag
+        }
+
+        expGolombDecoder.skipBits(1); // direct_8x8_inference_flag
+
+        if (expGolombDecoder.readBoolean()) {
+          // frame_cropping_flag
+          frameCropLeftOffset = expGolombDecoder.readUnsignedExpGolomb();
+          frameCropRightOffset = expGolombDecoder.readUnsignedExpGolomb();
+          frameCropTopOffset = expGolombDecoder.readUnsignedExpGolomb();
+          frameCropBottomOffset = expGolombDecoder.readUnsignedExpGolomb();
+        }
+        if (expGolombDecoder.readBoolean()) {
+          // vui_parameters_present_flag
+          if (expGolombDecoder.readBoolean()) {
+            // aspect_ratio_info_present_flag
+            aspectRatioIdc = expGolombDecoder.readUnsignedByte();
+            switch (aspectRatioIdc) {
+              case 1:
+                sarRatio = [1, 1];
+                break;
+              case 2:
+                sarRatio = [12, 11];
+                break;
+              case 3:
+                sarRatio = [10, 11];
+                break;
+              case 4:
+                sarRatio = [16, 11];
+                break;
+              case 5:
+                sarRatio = [40, 33];
+                break;
+              case 6:
+                sarRatio = [24, 11];
+                break;
+              case 7:
+                sarRatio = [20, 11];
+                break;
+              case 8:
+                sarRatio = [32, 11];
+                break;
+              case 9:
+                sarRatio = [80, 33];
+                break;
+              case 10:
+                sarRatio = [18, 11];
+                break;
+              case 11:
+                sarRatio = [15, 11];
+                break;
+              case 12:
+                sarRatio = [64, 33];
+                break;
+              case 13:
+                sarRatio = [160, 99];
+                break;
+              case 14:
+                sarRatio = [4, 3];
+                break;
+              case 15:
+                sarRatio = [3, 2];
+                break;
+              case 16:
+                sarRatio = [2, 1];
+                break;
+              case 255:
+                {
+                  sarRatio = [expGolombDecoder.readUnsignedByte() << 8 | expGolombDecoder.readUnsignedByte(), expGolombDecoder.readUnsignedByte() << 8 | expGolombDecoder.readUnsignedByte()];
+                  break;
+                }
+            }
+            if (sarRatio) {
+              sarRatio[0] / sarRatio[1];
+            }
+          }
+        }
+        return {
+          profileIdc: profileIdc,
+          levelIdc: levelIdc,
+          profileCompatibility: profileCompatibility,
+          width: (picWidthInMbsMinus1 + 1) * 16 - frameCropLeftOffset * 2 - frameCropRightOffset * 2,
+          height: (2 - frameMbsOnlyFlag) * (picHeightInMapUnitsMinus1 + 1) * 16 - frameCropTopOffset * 2 - frameCropBottomOffset * 2,
+          // sar is sample aspect ratio
+          sarRatio: sarRatio
+        };
+      };
+    };
+    H264Stream$1.prototype = new Stream$2();
+    var h264 = {
+      H264Stream: H264Stream$1,
+      NalByteStream: NalByteStream
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Utilities to detect basic properties and metadata about Aac data.
+     */
+
+    var ADTS_SAMPLING_FREQUENCIES = [96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350];
+    var parseId3TagSize = function (header, byteIndex) {
+      var returnSize = header[byteIndex + 6] << 21 | header[byteIndex + 7] << 14 | header[byteIndex + 8] << 7 | header[byteIndex + 9],
+        flags = header[byteIndex + 5],
+        footerPresent = (flags & 16) >> 4; // if we get a negative returnSize clamp it to 0
+
+      returnSize = returnSize >= 0 ? returnSize : 0;
+      if (footerPresent) {
+        return returnSize + 20;
+      }
+      return returnSize + 10;
+    };
+    var getId3Offset = function (data, offset) {
+      if (data.length - offset < 10 || data[offset] !== 'I'.charCodeAt(0) || data[offset + 1] !== 'D'.charCodeAt(0) || data[offset + 2] !== '3'.charCodeAt(0)) {
+        return offset;
+      }
+      offset += parseId3TagSize(data, offset);
+      return getId3Offset(data, offset);
+    }; // TODO: use vhs-utils
+
+    var isLikelyAacData$1 = function (data) {
+      var offset = getId3Offset(data, 0);
+      return data.length >= offset + 2 && (data[offset] & 0xFF) === 0xFF && (data[offset + 1] & 0xF0) === 0xF0 &&
+      // verify that the 2 layer bits are 0, aka this
+      // is not mp3 data but aac data.
+      (data[offset + 1] & 0x16) === 0x10;
+    };
+    var parseSyncSafeInteger = function (data) {
+      return data[0] << 21 | data[1] << 14 | data[2] << 7 | data[3];
+    }; // return a percent-encoded representation of the specified byte range
+    // @see http://en.wikipedia.org/wiki/Percent-encoding
+
+    var percentEncode = function (bytes, start, end) {
+      var i,
+        result = '';
+      for (i = start; i < end; i++) {
+        result += '%' + ('00' + bytes[i].toString(16)).slice(-2);
+      }
+      return result;
+    }; // return the string representation of the specified byte range,
+    // interpreted as ISO-8859-1.
+
+    var parseIso88591 = function (bytes, start, end) {
+      return unescape(percentEncode(bytes, start, end)); // jshint ignore:line
+    };
+
+    var parseAdtsSize = function (header, byteIndex) {
+      var lowThree = (header[byteIndex + 5] & 0xE0) >> 5,
+        middle = header[byteIndex + 4] << 3,
+        highTwo = header[byteIndex + 3] & 0x3 << 11;
+      return highTwo | middle | lowThree;
+    };
+    var parseType$4 = function (header, byteIndex) {
+      if (header[byteIndex] === 'I'.charCodeAt(0) && header[byteIndex + 1] === 'D'.charCodeAt(0) && header[byteIndex + 2] === '3'.charCodeAt(0)) {
+        return 'timed-metadata';
+      } else if (header[byteIndex] & 0xff === 0xff && (header[byteIndex + 1] & 0xf0) === 0xf0) {
+        return 'audio';
+      }
+      return null;
+    };
+    var parseSampleRate = function (packet) {
+      var i = 0;
+      while (i + 5 < packet.length) {
+        if (packet[i] !== 0xFF || (packet[i + 1] & 0xF6) !== 0xF0) {
+          // If a valid header was not found,  jump one forward and attempt to
+          // find a valid ADTS header starting at the next byte
+          i++;
+          continue;
+        }
+        return ADTS_SAMPLING_FREQUENCIES[(packet[i + 2] & 0x3c) >>> 2];
+      }
+      return null;
+    };
+    var parseAacTimestamp = function (packet) {
+      var frameStart, frameSize, frame, frameHeader; // find the start of the first frame and the end of the tag
+
+      frameStart = 10;
+      if (packet[5] & 0x40) {
+        // advance the frame start past the extended header
+        frameStart += 4; // header size field
+
+        frameStart += parseSyncSafeInteger(packet.subarray(10, 14));
+      } // parse one or more ID3 frames
+      // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+      do {
+        // determine the number of bytes in this frame
+        frameSize = parseSyncSafeInteger(packet.subarray(frameStart + 4, frameStart + 8));
+        if (frameSize < 1) {
+          return null;
+        }
+        frameHeader = String.fromCharCode(packet[frameStart], packet[frameStart + 1], packet[frameStart + 2], packet[frameStart + 3]);
+        if (frameHeader === 'PRIV') {
+          frame = packet.subarray(frameStart + 10, frameStart + frameSize + 10);
+          for (var i = 0; i < frame.byteLength; i++) {
+            if (frame[i] === 0) {
+              var owner = parseIso88591(frame, 0, i);
+              if (owner === 'com.apple.streaming.transportStreamTimestamp') {
+                var d = frame.subarray(i + 1);
+                var size = (d[3] & 0x01) << 30 | d[4] << 22 | d[5] << 14 | d[6] << 6 | d[7] >>> 2;
+                size *= 4;
+                size += d[7] & 0x03;
+                return size;
+              }
+              break;
+            }
+          }
+        }
+        frameStart += 10; // advance past the frame header
+
+        frameStart += frameSize; // advance past the frame body
+      } while (frameStart < packet.byteLength);
+      return null;
+    };
+    var utils = {
+      isLikelyAacData: isLikelyAacData$1,
+      parseId3TagSize: parseId3TagSize,
+      parseAdtsSize: parseAdtsSize,
+      parseType: parseType$4,
+      parseSampleRate: parseSampleRate,
+      parseAacTimestamp: parseAacTimestamp
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * A stream-based aac to mp4 converter. This utility can be used to
+     * deliver mp4s to a SourceBuffer on platforms that support native
+     * Media Source Extensions.
+     */
+
+    var Stream$1 = stream;
+    var aacUtils = utils; // Constants
+
+    var AacStream$1;
+    /**
+     * Splits an incoming stream of binary data into ADTS and ID3 Frames.
+     */
+
+    AacStream$1 = function () {
+      var everything = new Uint8Array(),
+        timeStamp = 0;
+      AacStream$1.prototype.init.call(this);
+      this.setTimestamp = function (timestamp) {
+        timeStamp = timestamp;
+      };
+      this.push = function (bytes) {
+        var frameSize = 0,
+          byteIndex = 0,
+          bytesLeft,
+          chunk,
+          packet,
+          tempLength; // If there are bytes remaining from the last segment, prepend them to the
+        // bytes that were pushed in
+
+        if (everything.length) {
+          tempLength = everything.length;
+          everything = new Uint8Array(bytes.byteLength + tempLength);
+          everything.set(everything.subarray(0, tempLength));
+          everything.set(bytes, tempLength);
+        } else {
+          everything = bytes;
+        }
+        while (everything.length - byteIndex >= 3) {
+          if (everything[byteIndex] === 'I'.charCodeAt(0) && everything[byteIndex + 1] === 'D'.charCodeAt(0) && everything[byteIndex + 2] === '3'.charCodeAt(0)) {
+            // Exit early because we don't have enough to parse
+            // the ID3 tag header
+            if (everything.length - byteIndex < 10) {
+              break;
+            } // check framesize
+
+            frameSize = aacUtils.parseId3TagSize(everything, byteIndex); // Exit early if we don't have enough in the buffer
+            // to emit a full packet
+            // Add to byteIndex to support multiple ID3 tags in sequence
+
+            if (byteIndex + frameSize > everything.length) {
+              break;
+            }
+            chunk = {
+              type: 'timed-metadata',
+              data: everything.subarray(byteIndex, byteIndex + frameSize)
+            };
+            this.trigger('data', chunk);
+            byteIndex += frameSize;
+            continue;
+          } else if ((everything[byteIndex] & 0xff) === 0xff && (everything[byteIndex + 1] & 0xf0) === 0xf0) {
+            // Exit early because we don't have enough to parse
+            // the ADTS frame header
+            if (everything.length - byteIndex < 7) {
+              break;
+            }
+            frameSize = aacUtils.parseAdtsSize(everything, byteIndex); // Exit early if we don't have enough in the buffer
+            // to emit a full packet
+
+            if (byteIndex + frameSize > everything.length) {
+              break;
+            }
+            packet = {
+              type: 'audio',
+              data: everything.subarray(byteIndex, byteIndex + frameSize),
+              pts: timeStamp,
+              dts: timeStamp
+            };
+            this.trigger('data', packet);
+            byteIndex += frameSize;
+            continue;
+          }
+          byteIndex++;
+        }
+        bytesLeft = everything.length - byteIndex;
+        if (bytesLeft > 0) {
+          everything = everything.subarray(byteIndex);
+        } else {
+          everything = new Uint8Array();
+        }
+      };
+      this.reset = function () {
+        everything = new Uint8Array();
+        this.trigger('reset');
+      };
+      this.endTimeline = function () {
+        everything = new Uint8Array();
+        this.trigger('endedtimeline');
+      };
+    };
+    AacStream$1.prototype = new Stream$1();
+    var aac = AacStream$1;
+    var AUDIO_PROPERTIES$1 = ['audioobjecttype', 'channelcount', 'samplerate', 'samplingfrequencyindex', 'samplesize'];
+    var audioProperties = AUDIO_PROPERTIES$1;
+    var VIDEO_PROPERTIES$1 = ['width', 'height', 'profileIdc', 'levelIdc', 'profileCompatibility', 'sarRatio'];
+    var videoProperties = VIDEO_PROPERTIES$1;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * A stream-based mp2t to mp4 converter. This utility can be used to
+     * deliver mp4s to a SourceBuffer on platforms that support native
+     * Media Source Extensions.
+     */
+
+    var Stream = stream;
+    var mp4 = mp4Generator;
+    var frameUtils = frameUtils$1;
+    var audioFrameUtils = audioFrameUtils$1;
+    var trackDecodeInfo = trackDecodeInfo$1;
+    var m2ts = m2ts_1;
+    var clock = clock$2;
+    var AdtsStream = adts;
+    var H264Stream = h264.H264Stream;
+    var AacStream = aac;
+    var isLikelyAacData = utils.isLikelyAacData;
+    var ONE_SECOND_IN_TS$1 = clock$2.ONE_SECOND_IN_TS;
+    var AUDIO_PROPERTIES = audioProperties;
+    var VIDEO_PROPERTIES = videoProperties; // object types
+
+    var VideoSegmentStream, AudioSegmentStream, Transmuxer, CoalesceStream;
+    var retriggerForStream = function (key, event) {
+      event.stream = key;
+      this.trigger('log', event);
+    };
+    var addPipelineLogRetriggers = function (transmuxer, pipeline) {
+      var keys = Object.keys(pipeline);
+      for (var i = 0; i < keys.length; i++) {
+        var key = keys[i]; // skip non-stream keys and headOfPipeline
+        // which is just a duplicate
+
+        if (key === 'headOfPipeline' || !pipeline[key].on) {
+          continue;
+        }
+        pipeline[key].on('log', retriggerForStream.bind(transmuxer, key));
+      }
+    };
+    /**
+     * Compare two arrays (even typed) for same-ness
+     */
+
+    var arrayEquals = function (a, b) {
+      var i;
+      if (a.length !== b.length) {
+        return false;
+      } // compare the value of each element in the array
+
+      for (i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) {
+          return false;
+        }
+      }
+      return true;
+    };
+    var generateSegmentTimingInfo = function (baseMediaDecodeTime, startDts, startPts, endDts, endPts, prependedContentDuration) {
+      var ptsOffsetFromDts = startPts - startDts,
+        decodeDuration = endDts - startDts,
+        presentationDuration = endPts - startPts; // The PTS and DTS values are based on the actual stream times from the segment,
+      // however, the player time values will reflect a start from the baseMediaDecodeTime.
+      // In order to provide relevant values for the player times, base timing info on the
+      // baseMediaDecodeTime and the DTS and PTS durations of the segment.
+
+      return {
+        start: {
+          dts: baseMediaDecodeTime,
+          pts: baseMediaDecodeTime + ptsOffsetFromDts
+        },
+        end: {
+          dts: baseMediaDecodeTime + decodeDuration,
+          pts: baseMediaDecodeTime + presentationDuration
+        },
+        prependedContentDuration: prependedContentDuration,
+        baseMediaDecodeTime: baseMediaDecodeTime
+      };
+    };
+    /**
+     * Constructs a single-track, ISO BMFF media segment from AAC data
+     * events. The output of this stream can be fed to a SourceBuffer
+     * configured with a suitable initialization segment.
+     * @param track {object} track metadata configuration
+     * @param options {object} transmuxer options object
+     * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+     *        in the source; false to adjust the first segment to start at 0.
+     */
+
+    AudioSegmentStream = function (track, options) {
+      var adtsFrames = [],
+        sequenceNumber,
+        earliestAllowedDts = 0,
+        audioAppendStartTs = 0,
+        videoBaseMediaDecodeTime = Infinity;
+      options = options || {};
+      sequenceNumber = options.firstSequenceNumber || 0;
+      AudioSegmentStream.prototype.init.call(this);
+      this.push = function (data) {
+        trackDecodeInfo.collectDtsInfo(track, data);
+        if (track) {
+          AUDIO_PROPERTIES.forEach(function (prop) {
+            track[prop] = data[prop];
+          });
+        } // buffer audio data until end() is called
+
+        adtsFrames.push(data);
+      };
+      this.setEarliestDts = function (earliestDts) {
+        earliestAllowedDts = earliestDts;
+      };
+      this.setVideoBaseMediaDecodeTime = function (baseMediaDecodeTime) {
+        videoBaseMediaDecodeTime = baseMediaDecodeTime;
+      };
+      this.setAudioAppendStart = function (timestamp) {
+        audioAppendStartTs = timestamp;
+      };
+      this.flush = function () {
+        var frames, moof, mdat, boxes, frameDuration, segmentDuration, videoClockCyclesOfSilencePrefixed; // return early if no audio data has been observed
+
+        if (adtsFrames.length === 0) {
+          this.trigger('done', 'AudioSegmentStream');
+          return;
+        }
+        frames = audioFrameUtils.trimAdtsFramesByEarliestDts(adtsFrames, track, earliestAllowedDts);
+        track.baseMediaDecodeTime = trackDecodeInfo.calculateTrackBaseMediaDecodeTime(track, options.keepOriginalTimestamps); // amount of audio filled but the value is in video clock rather than audio clock
+
+        videoClockCyclesOfSilencePrefixed = audioFrameUtils.prefixWithSilence(track, frames, audioAppendStartTs, videoBaseMediaDecodeTime); // we have to build the index from byte locations to
+        // samples (that is, adts frames) in the audio data
+
+        track.samples = audioFrameUtils.generateSampleTable(frames); // concatenate the audio data to constuct the mdat
+
+        mdat = mp4.mdat(audioFrameUtils.concatenateFrameData(frames));
+        adtsFrames = [];
+        moof = mp4.moof(sequenceNumber, [track]);
+        boxes = new Uint8Array(moof.byteLength + mdat.byteLength); // bump the sequence number for next time
+
+        sequenceNumber++;
+        boxes.set(moof);
+        boxes.set(mdat, moof.byteLength);
+        trackDecodeInfo.clearDtsInfo(track);
+        frameDuration = Math.ceil(ONE_SECOND_IN_TS$1 * 1024 / track.samplerate); // TODO this check was added to maintain backwards compatibility (particularly with
+        // tests) on adding the timingInfo event. However, it seems unlikely that there's a
+        // valid use-case where an init segment/data should be triggered without associated
+        // frames. Leaving for now, but should be looked into.
+
+        if (frames.length) {
+          segmentDuration = frames.length * frameDuration;
+          this.trigger('segmentTimingInfo', generateSegmentTimingInfo(
+          // The audio track's baseMediaDecodeTime is in audio clock cycles, but the
+          // frame info is in video clock cycles. Convert to match expectation of
+          // listeners (that all timestamps will be based on video clock cycles).
+          clock.audioTsToVideoTs(track.baseMediaDecodeTime, track.samplerate),
+          // frame times are already in video clock, as is segment duration
+          frames[0].dts, frames[0].pts, frames[0].dts + segmentDuration, frames[0].pts + segmentDuration, videoClockCyclesOfSilencePrefixed || 0));
+          this.trigger('timingInfo', {
+            start: frames[0].pts,
+            end: frames[0].pts + segmentDuration
+          });
+        }
+        this.trigger('data', {
+          track: track,
+          boxes: boxes
+        });
+        this.trigger('done', 'AudioSegmentStream');
+      };
+      this.reset = function () {
+        trackDecodeInfo.clearDtsInfo(track);
+        adtsFrames = [];
+        this.trigger('reset');
+      };
+    };
+    AudioSegmentStream.prototype = new Stream();
+    /**
+     * Constructs a single-track, ISO BMFF media segment from H264 data
+     * events. The output of this stream can be fed to a SourceBuffer
+     * configured with a suitable initialization segment.
+     * @param track {object} track metadata configuration
+     * @param options {object} transmuxer options object
+     * @param options.alignGopsAtEnd {boolean} If true, start from the end of the
+     *        gopsToAlignWith list when attempting to align gop pts
+     * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+     *        in the source; false to adjust the first segment to start at 0.
+     */
+
+    VideoSegmentStream = function (track, options) {
+      var sequenceNumber,
+        nalUnits = [],
+        gopsToAlignWith = [],
+        config,
+        pps;
+      options = options || {};
+      sequenceNumber = options.firstSequenceNumber || 0;
+      VideoSegmentStream.prototype.init.call(this);
+      delete track.minPTS;
+      this.gopCache_ = [];
+      /**
+        * Constructs a ISO BMFF segment given H264 nalUnits
+        * @param {Object} nalUnit A data event representing a nalUnit
+        * @param {String} nalUnit.nalUnitType
+        * @param {Object} nalUnit.config Properties for a mp4 track
+        * @param {Uint8Array} nalUnit.data The nalUnit bytes
+        * @see lib/codecs/h264.js
+       **/
+
+      this.push = function (nalUnit) {
+        trackDecodeInfo.collectDtsInfo(track, nalUnit); // record the track config
+
+        if (nalUnit.nalUnitType === 'seq_parameter_set_rbsp' && !config) {
+          config = nalUnit.config;
+          track.sps = [nalUnit.data];
+          VIDEO_PROPERTIES.forEach(function (prop) {
+            track[prop] = config[prop];
+          }, this);
+        }
+        if (nalUnit.nalUnitType === 'pic_parameter_set_rbsp' && !pps) {
+          pps = nalUnit.data;
+          track.pps = [nalUnit.data];
+        } // buffer video until flush() is called
+
+        nalUnits.push(nalUnit);
+      };
+      /**
+        * Pass constructed ISO BMFF track and boxes on to the
+        * next stream in the pipeline
+       **/
+
+      this.flush = function () {
+        var frames,
+          gopForFusion,
+          gops,
+          moof,
+          mdat,
+          boxes,
+          prependedContentDuration = 0,
+          firstGop,
+          lastGop; // Throw away nalUnits at the start of the byte stream until
+        // we find the first AUD
+
+        while (nalUnits.length) {
+          if (nalUnits[0].nalUnitType === 'access_unit_delimiter_rbsp') {
+            break;
+          }
+          nalUnits.shift();
+        } // Return early if no video data has been observed
+
+        if (nalUnits.length === 0) {
+          this.resetStream_();
+          this.trigger('done', 'VideoSegmentStream');
+          return;
+        } // Organize the raw nal-units into arrays that represent
+        // higher-level constructs such as frames and gops
+        // (group-of-pictures)
+
+        frames = frameUtils.groupNalsIntoFrames(nalUnits);
+        gops = frameUtils.groupFramesIntoGops(frames); // If the first frame of this fragment is not a keyframe we have
+        // a problem since MSE (on Chrome) requires a leading keyframe.
+        //
+        // We have two approaches to repairing this situation:
+        // 1) GOP-FUSION:
+        //    This is where we keep track of the GOPS (group-of-pictures)
+        //    from previous fragments and attempt to find one that we can
+        //    prepend to the current fragment in order to create a valid
+        //    fragment.
+        // 2) KEYFRAME-PULLING:
+        //    Here we search for the first keyframe in the fragment and
+        //    throw away all the frames between the start of the fragment
+        //    and that keyframe. We then extend the duration and pull the
+        //    PTS of the keyframe forward so that it covers the time range
+        //    of the frames that were disposed of.
+        //
+        // #1 is far prefereable over #2 which can cause "stuttering" but
+        // requires more things to be just right.
+
+        if (!gops[0][0].keyFrame) {
+          // Search for a gop for fusion from our gopCache
+          gopForFusion = this.getGopForFusion_(nalUnits[0], track);
+          if (gopForFusion) {
+            // in order to provide more accurate timing information about the segment, save
+            // the number of seconds prepended to the original segment due to GOP fusion
+            prependedContentDuration = gopForFusion.duration;
+            gops.unshift(gopForFusion); // Adjust Gops' metadata to account for the inclusion of the
+            // new gop at the beginning
+
+            gops.byteLength += gopForFusion.byteLength;
+            gops.nalCount += gopForFusion.nalCount;
+            gops.pts = gopForFusion.pts;
+            gops.dts = gopForFusion.dts;
+            gops.duration += gopForFusion.duration;
+          } else {
+            // If we didn't find a candidate gop fall back to keyframe-pulling
+            gops = frameUtils.extendFirstKeyFrame(gops);
+          }
+        } // Trim gops to align with gopsToAlignWith
+
+        if (gopsToAlignWith.length) {
+          var alignedGops;
+          if (options.alignGopsAtEnd) {
+            alignedGops = this.alignGopsAtEnd_(gops);
+          } else {
+            alignedGops = this.alignGopsAtStart_(gops);
+          }
+          if (!alignedGops) {
+            // save all the nals in the last GOP into the gop cache
+            this.gopCache_.unshift({
+              gop: gops.pop(),
+              pps: track.pps,
+              sps: track.sps
+            }); // Keep a maximum of 6 GOPs in the cache
+
+            this.gopCache_.length = Math.min(6, this.gopCache_.length); // Clear nalUnits
+
+            nalUnits = []; // return early no gops can be aligned with desired gopsToAlignWith
+
+            this.resetStream_();
+            this.trigger('done', 'VideoSegmentStream');
+            return;
+          } // Some gops were trimmed. clear dts info so minSegmentDts and pts are correct
+          // when recalculated before sending off to CoalesceStream
+
+          trackDecodeInfo.clearDtsInfo(track);
+          gops = alignedGops;
+        }
+        trackDecodeInfo.collectDtsInfo(track, gops); // First, we have to build the index from byte locations to
+        // samples (that is, frames) in the video data
+
+        track.samples = frameUtils.generateSampleTable(gops); // Concatenate the video data and construct the mdat
+
+        mdat = mp4.mdat(frameUtils.concatenateNalData(gops));
+        track.baseMediaDecodeTime = trackDecodeInfo.calculateTrackBaseMediaDecodeTime(track, options.keepOriginalTimestamps);
+        this.trigger('processedGopsInfo', gops.map(function (gop) {
+          return {
+            pts: gop.pts,
+            dts: gop.dts,
+            byteLength: gop.byteLength
+          };
+        }));
+        firstGop = gops[0];
+        lastGop = gops[gops.length - 1];
+        this.trigger('segmentTimingInfo', generateSegmentTimingInfo(track.baseMediaDecodeTime, firstGop.dts, firstGop.pts, lastGop.dts + lastGop.duration, lastGop.pts + lastGop.duration, prependedContentDuration));
+        this.trigger('timingInfo', {
+          start: gops[0].pts,
+          end: gops[gops.length - 1].pts + gops[gops.length - 1].duration
+        }); // save all the nals in the last GOP into the gop cache
+
+        this.gopCache_.unshift({
+          gop: gops.pop(),
+          pps: track.pps,
+          sps: track.sps
+        }); // Keep a maximum of 6 GOPs in the cache
+
+        this.gopCache_.length = Math.min(6, this.gopCache_.length); // Clear nalUnits
+
+        nalUnits = [];
+        this.trigger('baseMediaDecodeTime', track.baseMediaDecodeTime);
+        this.trigger('timelineStartInfo', track.timelineStartInfo);
+        moof = mp4.moof(sequenceNumber, [track]); // it would be great to allocate this array up front instead of
+        // throwing away hundreds of media segment fragments
+
+        boxes = new Uint8Array(moof.byteLength + mdat.byteLength); // Bump the sequence number for next time
+
+        sequenceNumber++;
+        boxes.set(moof);
+        boxes.set(mdat, moof.byteLength);
+        this.trigger('data', {
+          track: track,
+          boxes: boxes
+        });
+        this.resetStream_(); // Continue with the flush process now
+
+        this.trigger('done', 'VideoSegmentStream');
+      };
+      this.reset = function () {
+        this.resetStream_();
+        nalUnits = [];
+        this.gopCache_.length = 0;
+        gopsToAlignWith.length = 0;
+        this.trigger('reset');
+      };
+      this.resetStream_ = function () {
+        trackDecodeInfo.clearDtsInfo(track); // reset config and pps because they may differ across segments
+        // for instance, when we are rendition switching
+
+        config = undefined;
+        pps = undefined;
+      }; // Search for a candidate Gop for gop-fusion from the gop cache and
+      // return it or return null if no good candidate was found
+
+      this.getGopForFusion_ = function (nalUnit) {
+        var halfSecond = 45000,
+          // Half-a-second in a 90khz clock
+          allowableOverlap = 10000,
+          // About 3 frames @ 30fps
+          nearestDistance = Infinity,
+          dtsDistance,
+          nearestGopObj,
+          currentGop,
+          currentGopObj,
+          i; // Search for the GOP nearest to the beginning of this nal unit
+
+        for (i = 0; i < this.gopCache_.length; i++) {
+          currentGopObj = this.gopCache_[i];
+          currentGop = currentGopObj.gop; // Reject Gops with different SPS or PPS
+
+          if (!(track.pps && arrayEquals(track.pps[0], currentGopObj.pps[0])) || !(track.sps && arrayEquals(track.sps[0], currentGopObj.sps[0]))) {
+            continue;
+          } // Reject Gops that would require a negative baseMediaDecodeTime
+
+          if (currentGop.dts < track.timelineStartInfo.dts) {
+            continue;
+          } // The distance between the end of the gop and the start of the nalUnit
+
+          dtsDistance = nalUnit.dts - currentGop.dts - currentGop.duration; // Only consider GOPS that start before the nal unit and end within
+          // a half-second of the nal unit
+
+          if (dtsDistance >= -allowableOverlap && dtsDistance <= halfSecond) {
+            // Always use the closest GOP we found if there is more than
+            // one candidate
+            if (!nearestGopObj || nearestDistance > dtsDistance) {
+              nearestGopObj = currentGopObj;
+              nearestDistance = dtsDistance;
+            }
+          }
+        }
+        if (nearestGopObj) {
+          return nearestGopObj.gop;
+        }
+        return null;
+      }; // trim gop list to the first gop found that has a matching pts with a gop in the list
+      // of gopsToAlignWith starting from the START of the list
+
+      this.alignGopsAtStart_ = function (gops) {
+        var alignIndex, gopIndex, align, gop, byteLength, nalCount, duration, alignedGops;
+        byteLength = gops.byteLength;
+        nalCount = gops.nalCount;
+        duration = gops.duration;
+        alignIndex = gopIndex = 0;
+        while (alignIndex < gopsToAlignWith.length && gopIndex < gops.length) {
+          align = gopsToAlignWith[alignIndex];
+          gop = gops[gopIndex];
+          if (align.pts === gop.pts) {
+            break;
+          }
+          if (gop.pts > align.pts) {
+            // this current gop starts after the current gop we want to align on, so increment
+            // align index
+            alignIndex++;
+            continue;
+          } // current gop starts before the current gop we want to align on. so increment gop
+          // index
+
+          gopIndex++;
+          byteLength -= gop.byteLength;
+          nalCount -= gop.nalCount;
+          duration -= gop.duration;
+        }
+        if (gopIndex === 0) {
+          // no gops to trim
+          return gops;
+        }
+        if (gopIndex === gops.length) {
+          // all gops trimmed, skip appending all gops
+          return null;
+        }
+        alignedGops = gops.slice(gopIndex);
+        alignedGops.byteLength = byteLength;
+        alignedGops.duration = duration;
+        alignedGops.nalCount = nalCount;
+        alignedGops.pts = alignedGops[0].pts;
+        alignedGops.dts = alignedGops[0].dts;
+        return alignedGops;
+      }; // trim gop list to the first gop found that has a matching pts with a gop in the list
+      // of gopsToAlignWith starting from the END of the list
+
+      this.alignGopsAtEnd_ = function (gops) {
+        var alignIndex, gopIndex, align, gop, alignEndIndex, matchFound;
+        alignIndex = gopsToAlignWith.length - 1;
+        gopIndex = gops.length - 1;
+        alignEndIndex = null;
+        matchFound = false;
+        while (alignIndex >= 0 && gopIndex >= 0) {
+          align = gopsToAlignWith[alignIndex];
+          gop = gops[gopIndex];
+          if (align.pts === gop.pts) {
+            matchFound = true;
+            break;
+          }
+          if (align.pts > gop.pts) {
+            alignIndex--;
+            continue;
+          }
+          if (alignIndex === gopsToAlignWith.length - 1) {
+            // gop.pts is greater than the last alignment candidate. If no match is found
+            // by the end of this loop, we still want to append gops that come after this
+            // point
+            alignEndIndex = gopIndex;
+          }
+          gopIndex--;
+        }
+        if (!matchFound && alignEndIndex === null) {
+          return null;
+        }
+        var trimIndex;
+        if (matchFound) {
+          trimIndex = gopIndex;
+        } else {
+          trimIndex = alignEndIndex;
+        }
+        if (trimIndex === 0) {
+          return gops;
+        }
+        var alignedGops = gops.slice(trimIndex);
+        var metadata = alignedGops.reduce(function (total, gop) {
+          total.byteLength += gop.byteLength;
+          total.duration += gop.duration;
+          total.nalCount += gop.nalCount;
+          return total;
+        }, {
+          byteLength: 0,
+          duration: 0,
+          nalCount: 0
+        });
+        alignedGops.byteLength = metadata.byteLength;
+        alignedGops.duration = metadata.duration;
+        alignedGops.nalCount = metadata.nalCount;
+        alignedGops.pts = alignedGops[0].pts;
+        alignedGops.dts = alignedGops[0].dts;
+        return alignedGops;
+      };
+      this.alignGopsWith = function (newGopsToAlignWith) {
+        gopsToAlignWith = newGopsToAlignWith;
+      };
+    };
+    VideoSegmentStream.prototype = new Stream();
+    /**
+     * A Stream that can combine multiple streams (ie. audio & video)
+     * into a single output segment for MSE. Also supports audio-only
+     * and video-only streams.
+     * @param options {object} transmuxer options object
+     * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+     *        in the source; false to adjust the first segment to start at media timeline start.
+     */
+
+    CoalesceStream = function (options, metadataStream) {
+      // Number of Tracks per output segment
+      // If greater than 1, we combine multiple
+      // tracks into a single segment
+      this.numberOfTracks = 0;
+      this.metadataStream = metadataStream;
+      options = options || {};
+      if (typeof options.remux !== 'undefined') {
+        this.remuxTracks = !!options.remux;
+      } else {
+        this.remuxTracks = true;
+      }
+      if (typeof options.keepOriginalTimestamps === 'boolean') {
+        this.keepOriginalTimestamps = options.keepOriginalTimestamps;
+      } else {
+        this.keepOriginalTimestamps = false;
+      }
+      this.pendingTracks = [];
+      this.videoTrack = null;
+      this.pendingBoxes = [];
+      this.pendingCaptions = [];
+      this.pendingMetadata = [];
+      this.pendingBytes = 0;
+      this.emittedTracks = 0;
+      CoalesceStream.prototype.init.call(this); // Take output from multiple
+
+      this.push = function (output) {
+        // buffer incoming captions until the associated video segment
+        // finishes
+        if (output.content || output.text) {
+          return this.pendingCaptions.push(output);
+        } // buffer incoming id3 tags until the final flush
+
+        if (output.frames) {
+          return this.pendingMetadata.push(output);
+        } // Add this track to the list of pending tracks and store
+        // important information required for the construction of
+        // the final segment
+
+        this.pendingTracks.push(output.track);
+        this.pendingBytes += output.boxes.byteLength; // TODO: is there an issue for this against chrome?
+        // We unshift audio and push video because
+        // as of Chrome 75 when switching from
+        // one init segment to another if the video
+        // mdat does not appear after the audio mdat
+        // only audio will play for the duration of our transmux.
+
+        if (output.track.type === 'video') {
+          this.videoTrack = output.track;
+          this.pendingBoxes.push(output.boxes);
+        }
+        if (output.track.type === 'audio') {
+          this.audioTrack = output.track;
+          this.pendingBoxes.unshift(output.boxes);
+        }
+      };
+    };
+    CoalesceStream.prototype = new Stream();
+    CoalesceStream.prototype.flush = function (flushSource) {
+      var offset = 0,
+        event = {
+          captions: [],
+          captionStreams: {},
+          metadata: [],
+          info: {}
+        },
+        caption,
+        id3,
+        initSegment,
+        timelineStartPts = 0,
+        i;
+      if (this.pendingTracks.length < this.numberOfTracks) {
+        if (flushSource !== 'VideoSegmentStream' && flushSource !== 'AudioSegmentStream') {
+          // Return because we haven't received a flush from a data-generating
+          // portion of the segment (meaning that we have only recieved meta-data
+          // or captions.)
+          return;
+        } else if (this.remuxTracks) {
+          // Return until we have enough tracks from the pipeline to remux (if we
+          // are remuxing audio and video into a single MP4)
+          return;
+        } else if (this.pendingTracks.length === 0) {
+          // In the case where we receive a flush without any data having been
+          // received we consider it an emitted track for the purposes of coalescing
+          // `done` events.
+          // We do this for the case where there is an audio and video track in the
+          // segment but no audio data. (seen in several playlists with alternate
+          // audio tracks and no audio present in the main TS segments.)
+          this.emittedTracks++;
+          if (this.emittedTracks >= this.numberOfTracks) {
+            this.trigger('done');
+            this.emittedTracks = 0;
+          }
+          return;
+        }
+      }
+      if (this.videoTrack) {
+        timelineStartPts = this.videoTrack.timelineStartInfo.pts;
+        VIDEO_PROPERTIES.forEach(function (prop) {
+          event.info[prop] = this.videoTrack[prop];
+        }, this);
+      } else if (this.audioTrack) {
+        timelineStartPts = this.audioTrack.timelineStartInfo.pts;
+        AUDIO_PROPERTIES.forEach(function (prop) {
+          event.info[prop] = this.audioTrack[prop];
+        }, this);
+      }
+      if (this.videoTrack || this.audioTrack) {
+        if (this.pendingTracks.length === 1) {
+          event.type = this.pendingTracks[0].type;
+        } else {
+          event.type = 'combined';
+        }
+        this.emittedTracks += this.pendingTracks.length;
+        initSegment = mp4.initSegment(this.pendingTracks); // Create a new typed array to hold the init segment
+
+        event.initSegment = new Uint8Array(initSegment.byteLength); // Create an init segment containing a moov
+        // and track definitions
+
+        event.initSegment.set(initSegment); // Create a new typed array to hold the moof+mdats
+
+        event.data = new Uint8Array(this.pendingBytes); // Append each moof+mdat (one per track) together
+
+        for (i = 0; i < this.pendingBoxes.length; i++) {
+          event.data.set(this.pendingBoxes[i], offset);
+          offset += this.pendingBoxes[i].byteLength;
+        } // Translate caption PTS times into second offsets to match the
+        // video timeline for the segment, and add track info
+
+        for (i = 0; i < this.pendingCaptions.length; i++) {
+          caption = this.pendingCaptions[i];
+          caption.startTime = clock.metadataTsToSeconds(caption.startPts, timelineStartPts, this.keepOriginalTimestamps);
+          caption.endTime = clock.metadataTsToSeconds(caption.endPts, timelineStartPts, this.keepOriginalTimestamps);
+          event.captionStreams[caption.stream] = true;
+          event.captions.push(caption);
+        } // Translate ID3 frame PTS times into second offsets to match the
+        // video timeline for the segment
+
+        for (i = 0; i < this.pendingMetadata.length; i++) {
+          id3 = this.pendingMetadata[i];
+          id3.cueTime = clock.metadataTsToSeconds(id3.pts, timelineStartPts, this.keepOriginalTimestamps);
+          event.metadata.push(id3);
+        } // We add this to every single emitted segment even though we only need
+        // it for the first
+
+        event.metadata.dispatchType = this.metadataStream.dispatchType; // Reset stream state
+
+        this.pendingTracks.length = 0;
+        this.videoTrack = null;
+        this.pendingBoxes.length = 0;
+        this.pendingCaptions.length = 0;
+        this.pendingBytes = 0;
+        this.pendingMetadata.length = 0; // Emit the built segment
+        // We include captions and ID3 tags for backwards compatibility,
+        // ideally we should send only video and audio in the data event
+
+        this.trigger('data', event); // Emit each caption to the outside world
+        // Ideally, this would happen immediately on parsing captions,
+        // but we need to ensure that video data is sent back first
+        // so that caption timing can be adjusted to match video timing
+
+        for (i = 0; i < event.captions.length; i++) {
+          caption = event.captions[i];
+          this.trigger('caption', caption);
+        } // Emit each id3 tag to the outside world
+        // Ideally, this would happen immediately on parsing the tag,
+        // but we need to ensure that video data is sent back first
+        // so that ID3 frame timing can be adjusted to match video timing
+
+        for (i = 0; i < event.metadata.length; i++) {
+          id3 = event.metadata[i];
+          this.trigger('id3Frame', id3);
+        }
+      } // Only emit `done` if all tracks have been flushed and emitted
+
+      if (this.emittedTracks >= this.numberOfTracks) {
+        this.trigger('done');
+        this.emittedTracks = 0;
+      }
+    };
+    CoalesceStream.prototype.setRemux = function (val) {
+      this.remuxTracks = val;
+    };
+    /**
+     * A Stream that expects MP2T binary data as input and produces
+     * corresponding media segments, suitable for use with Media Source
+     * Extension (MSE) implementations that support the ISO BMFF byte
+     * stream format, like Chrome.
+     */
+
+    Transmuxer = function (options) {
+      var self = this,
+        hasFlushed = true,
+        videoTrack,
+        audioTrack;
+      Transmuxer.prototype.init.call(this);
+      options = options || {};
+      this.baseMediaDecodeTime = options.baseMediaDecodeTime || 0;
+      this.transmuxPipeline_ = {};
+      this.setupAacPipeline = function () {
+        var pipeline = {};
+        this.transmuxPipeline_ = pipeline;
+        pipeline.type = 'aac';
+        pipeline.metadataStream = new m2ts.MetadataStream(); // set up the parsing pipeline
+
+        pipeline.aacStream = new AacStream();
+        pipeline.audioTimestampRolloverStream = new m2ts.TimestampRolloverStream('audio');
+        pipeline.timedMetadataTimestampRolloverStream = new m2ts.TimestampRolloverStream('timed-metadata');
+        pipeline.adtsStream = new AdtsStream();
+        pipeline.coalesceStream = new CoalesceStream(options, pipeline.metadataStream);
+        pipeline.headOfPipeline = pipeline.aacStream;
+        pipeline.aacStream.pipe(pipeline.audioTimestampRolloverStream).pipe(pipeline.adtsStream);
+        pipeline.aacStream.pipe(pipeline.timedMetadataTimestampRolloverStream).pipe(pipeline.metadataStream).pipe(pipeline.coalesceStream);
+        pipeline.metadataStream.on('timestamp', function (frame) {
+          pipeline.aacStream.setTimestamp(frame.timeStamp);
+        });
+        pipeline.aacStream.on('data', function (data) {
+          if (data.type !== 'timed-metadata' && data.type !== 'audio' || pipeline.audioSegmentStream) {
+            return;
+          }
+          audioTrack = audioTrack || {
+            timelineStartInfo: {
+              baseMediaDecodeTime: self.baseMediaDecodeTime
+            },
+            codec: 'adts',
+            type: 'audio'
+          }; // hook up the audio segment stream to the first track with aac data
+
+          pipeline.coalesceStream.numberOfTracks++;
+          pipeline.audioSegmentStream = new AudioSegmentStream(audioTrack, options);
+          pipeline.audioSegmentStream.on('log', self.getLogTrigger_('audioSegmentStream'));
+          pipeline.audioSegmentStream.on('timingInfo', self.trigger.bind(self, 'audioTimingInfo')); // Set up the final part of the audio pipeline
+
+          pipeline.adtsStream.pipe(pipeline.audioSegmentStream).pipe(pipeline.coalesceStream); // emit pmt info
+
+          self.trigger('trackinfo', {
+            hasAudio: !!audioTrack,
+            hasVideo: !!videoTrack
+          });
+        }); // Re-emit any data coming from the coalesce stream to the outside world
+
+        pipeline.coalesceStream.on('data', this.trigger.bind(this, 'data')); // Let the consumer know we have finished flushing the entire pipeline
+
+        pipeline.coalesceStream.on('done', this.trigger.bind(this, 'done'));
+        addPipelineLogRetriggers(this, pipeline);
+      };
+      this.setupTsPipeline = function () {
+        var pipeline = {};
+        this.transmuxPipeline_ = pipeline;
+        pipeline.type = 'ts';
+        pipeline.metadataStream = new m2ts.MetadataStream(); // set up the parsing pipeline
+
+        pipeline.packetStream = new m2ts.TransportPacketStream();
+        pipeline.parseStream = new m2ts.TransportParseStream();
+        pipeline.elementaryStream = new m2ts.ElementaryStream();
+        pipeline.timestampRolloverStream = new m2ts.TimestampRolloverStream();
+        pipeline.adtsStream = new AdtsStream();
+        pipeline.h264Stream = new H264Stream();
+        pipeline.captionStream = new m2ts.CaptionStream(options);
+        pipeline.coalesceStream = new CoalesceStream(options, pipeline.metadataStream);
+        pipeline.headOfPipeline = pipeline.packetStream; // disassemble MPEG2-TS packets into elementary streams
+
+        pipeline.packetStream.pipe(pipeline.parseStream).pipe(pipeline.elementaryStream).pipe(pipeline.timestampRolloverStream); // !!THIS ORDER IS IMPORTANT!!
+        // demux the streams
+
+        pipeline.timestampRolloverStream.pipe(pipeline.h264Stream);
+        pipeline.timestampRolloverStream.pipe(pipeline.adtsStream);
+        pipeline.timestampRolloverStream.pipe(pipeline.metadataStream).pipe(pipeline.coalesceStream); // Hook up CEA-608/708 caption stream
+
+        pipeline.h264Stream.pipe(pipeline.captionStream).pipe(pipeline.coalesceStream);
+        pipeline.elementaryStream.on('data', function (data) {
+          var i;
+          if (data.type === 'metadata') {
+            i = data.tracks.length; // scan the tracks listed in the metadata
+
+            while (i--) {
+              if (!videoTrack && data.tracks[i].type === 'video') {
+                videoTrack = data.tracks[i];
+                videoTrack.timelineStartInfo.baseMediaDecodeTime = self.baseMediaDecodeTime;
+              } else if (!audioTrack && data.tracks[i].type === 'audio') {
+                audioTrack = data.tracks[i];
+                audioTrack.timelineStartInfo.baseMediaDecodeTime = self.baseMediaDecodeTime;
+              }
+            } // hook up the video segment stream to the first track with h264 data
+
+            if (videoTrack && !pipeline.videoSegmentStream) {
+              pipeline.coalesceStream.numberOfTracks++;
+              pipeline.videoSegmentStream = new VideoSegmentStream(videoTrack, options);
+              pipeline.videoSegmentStream.on('log', self.getLogTrigger_('videoSegmentStream'));
+              pipeline.videoSegmentStream.on('timelineStartInfo', function (timelineStartInfo) {
+                // When video emits timelineStartInfo data after a flush, we forward that
+                // info to the AudioSegmentStream, if it exists, because video timeline
+                // data takes precedence.  Do not do this if keepOriginalTimestamps is set,
+                // because this is a particularly subtle form of timestamp alteration.
+                if (audioTrack && !options.keepOriginalTimestamps) {
+                  audioTrack.timelineStartInfo = timelineStartInfo; // On the first segment we trim AAC frames that exist before the
+                  // very earliest DTS we have seen in video because Chrome will
+                  // interpret any video track with a baseMediaDecodeTime that is
+                  // non-zero as a gap.
+
+                  pipeline.audioSegmentStream.setEarliestDts(timelineStartInfo.dts - self.baseMediaDecodeTime);
+                }
+              });
+              pipeline.videoSegmentStream.on('processedGopsInfo', self.trigger.bind(self, 'gopInfo'));
+              pipeline.videoSegmentStream.on('segmentTimingInfo', self.trigger.bind(self, 'videoSegmentTimingInfo'));
+              pipeline.videoSegmentStream.on('baseMediaDecodeTime', function (baseMediaDecodeTime) {
+                if (audioTrack) {
+                  pipeline.audioSegmentStream.setVideoBaseMediaDecodeTime(baseMediaDecodeTime);
+                }
+              });
+              pipeline.videoSegmentStream.on('timingInfo', self.trigger.bind(self, 'videoTimingInfo')); // Set up the final part of the video pipeline
+
+              pipeline.h264Stream.pipe(pipeline.videoSegmentStream).pipe(pipeline.coalesceStream);
+            }
+            if (audioTrack && !pipeline.audioSegmentStream) {
+              // hook up the audio segment stream to the first track with aac data
+              pipeline.coalesceStream.numberOfTracks++;
+              pipeline.audioSegmentStream = new AudioSegmentStream(audioTrack, options);
+              pipeline.audioSegmentStream.on('log', self.getLogTrigger_('audioSegmentStream'));
+              pipeline.audioSegmentStream.on('timingInfo', self.trigger.bind(self, 'audioTimingInfo'));
+              pipeline.audioSegmentStream.on('segmentTimingInfo', self.trigger.bind(self, 'audioSegmentTimingInfo')); // Set up the final part of the audio pipeline
+
+              pipeline.adtsStream.pipe(pipeline.audioSegmentStream).pipe(pipeline.coalesceStream);
+            } // emit pmt info
+
+            self.trigger('trackinfo', {
+              hasAudio: !!audioTrack,
+              hasVideo: !!videoTrack
+            });
+          }
+        }); // Re-emit any data coming from the coalesce stream to the outside world
+
+        pipeline.coalesceStream.on('data', this.trigger.bind(this, 'data'));
+        pipeline.coalesceStream.on('id3Frame', function (id3Frame) {
+          id3Frame.dispatchType = pipeline.metadataStream.dispatchType;
+          self.trigger('id3Frame', id3Frame);
+        });
+        pipeline.coalesceStream.on('caption', this.trigger.bind(this, 'caption')); // Let the consumer know we have finished flushing the entire pipeline
+
+        pipeline.coalesceStream.on('done', this.trigger.bind(this, 'done'));
+        addPipelineLogRetriggers(this, pipeline);
+      }; // hook up the segment streams once track metadata is delivered
+
+      this.setBaseMediaDecodeTime = function (baseMediaDecodeTime) {
+        var pipeline = this.transmuxPipeline_;
+        if (!options.keepOriginalTimestamps) {
+          this.baseMediaDecodeTime = baseMediaDecodeTime;
+        }
+        if (audioTrack) {
+          audioTrack.timelineStartInfo.dts = undefined;
+          audioTrack.timelineStartInfo.pts = undefined;
+          trackDecodeInfo.clearDtsInfo(audioTrack);
+          if (pipeline.audioTimestampRolloverStream) {
+            pipeline.audioTimestampRolloverStream.discontinuity();
+          }
+        }
+        if (videoTrack) {
+          if (pipeline.videoSegmentStream) {
+            pipeline.videoSegmentStream.gopCache_ = [];
+          }
+          videoTrack.timelineStartInfo.dts = undefined;
+          videoTrack.timelineStartInfo.pts = undefined;
+          trackDecodeInfo.clearDtsInfo(videoTrack);
+          pipeline.captionStream.reset();
+        }
+        if (pipeline.timestampRolloverStream) {
+          pipeline.timestampRolloverStream.discontinuity();
+        }
+      };
+      this.setAudioAppendStart = function (timestamp) {
+        if (audioTrack) {
+          this.transmuxPipeline_.audioSegmentStream.setAudioAppendStart(timestamp);
+        }
+      };
+      this.setRemux = function (val) {
+        var pipeline = this.transmuxPipeline_;
+        options.remux = val;
+        if (pipeline && pipeline.coalesceStream) {
+          pipeline.coalesceStream.setRemux(val);
+        }
+      };
+      this.alignGopsWith = function (gopsToAlignWith) {
+        if (videoTrack && this.transmuxPipeline_.videoSegmentStream) {
+          this.transmuxPipeline_.videoSegmentStream.alignGopsWith(gopsToAlignWith);
+        }
+      };
+      this.getLogTrigger_ = function (key) {
+        var self = this;
+        return function (event) {
+          event.stream = key;
+          self.trigger('log', event);
+        };
+      }; // feed incoming data to the front of the parsing pipeline
+
+      this.push = function (data) {
+        if (hasFlushed) {
+          var isAac = isLikelyAacData(data);
+          if (isAac && this.transmuxPipeline_.type !== 'aac') {
+            this.setupAacPipeline();
+          } else if (!isAac && this.transmuxPipeline_.type !== 'ts') {
+            this.setupTsPipeline();
+          }
+          hasFlushed = false;
+        }
+        this.transmuxPipeline_.headOfPipeline.push(data);
+      }; // flush any buffered data
+
+      this.flush = function () {
+        hasFlushed = true; // Start at the top of the pipeline and flush all pending work
+
+        this.transmuxPipeline_.headOfPipeline.flush();
+      };
+      this.endTimeline = function () {
+        this.transmuxPipeline_.headOfPipeline.endTimeline();
+      };
+      this.reset = function () {
+        if (this.transmuxPipeline_.headOfPipeline) {
+          this.transmuxPipeline_.headOfPipeline.reset();
+        }
+      }; // Caption data has to be reset when seeking outside buffered range
+
+      this.resetCaptions = function () {
+        if (this.transmuxPipeline_.captionStream) {
+          this.transmuxPipeline_.captionStream.reset();
+        }
+      };
+    };
+    Transmuxer.prototype = new Stream();
+    var transmuxer = {
+      Transmuxer: Transmuxer,
+      VideoSegmentStream: VideoSegmentStream,
+      AudioSegmentStream: AudioSegmentStream,
+      AUDIO_PROPERTIES: AUDIO_PROPERTIES,
+      VIDEO_PROPERTIES: VIDEO_PROPERTIES,
+      // exported for testing
+      generateSegmentTimingInfo: generateSegmentTimingInfo
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var toUnsigned$3 = function (value) {
+      return value >>> 0;
+    };
+    var toHexString$1 = function (value) {
+      return ('00' + value.toString(16)).slice(-2);
+    };
+    var bin = {
+      toUnsigned: toUnsigned$3,
+      toHexString: toHexString$1
+    };
+    var parseType$3 = function (buffer) {
+      var result = '';
+      result += String.fromCharCode(buffer[0]);
+      result += String.fromCharCode(buffer[1]);
+      result += String.fromCharCode(buffer[2]);
+      result += String.fromCharCode(buffer[3]);
+      return result;
+    };
+    var parseType_1 = parseType$3;
+    var toUnsigned$2 = bin.toUnsigned;
+    var parseType$2 = parseType_1;
+    var findBox$2 = function (data, path) {
+      var results = [],
+        i,
+        size,
+        type,
+        end,
+        subresults;
+      if (!path.length) {
+        // short-circuit the search for empty paths
+        return null;
+      }
+      for (i = 0; i < data.byteLength;) {
+        size = toUnsigned$2(data[i] << 24 | data[i + 1] << 16 | data[i + 2] << 8 | data[i + 3]);
+        type = parseType$2(data.subarray(i + 4, i + 8));
+        end = size > 1 ? i + size : data.byteLength;
+        if (type === path[0]) {
+          if (path.length === 1) {
+            // this is the end of the path and we've found the box we were
+            // looking for
+            results.push(data.subarray(i + 8, end));
+          } else {
+            // recursively search for the next box along the path
+            subresults = findBox$2(data.subarray(i + 8, end), path.slice(1));
+            if (subresults.length) {
+              results = results.concat(subresults);
+            }
+          }
+        }
+        i = end;
+      } // we've finished searching all of data
+
+      return results;
+    };
+    var findBox_1 = findBox$2;
+    var toUnsigned$1 = bin.toUnsigned;
+    var getUint64$2 = numbers.getUint64;
+    var tfdt = function (data) {
+      var result = {
+        version: data[0],
+        flags: new Uint8Array(data.subarray(1, 4))
+      };
+      if (result.version === 1) {
+        result.baseMediaDecodeTime = getUint64$2(data.subarray(4));
+      } else {
+        result.baseMediaDecodeTime = toUnsigned$1(data[4] << 24 | data[5] << 16 | data[6] << 8 | data[7]);
+      }
+      return result;
+    };
+    var parseTfdt$2 = tfdt;
+    var parseSampleFlags$1 = function (flags) {
+      return {
+        isLeading: (flags[0] & 0x0c) >>> 2,
+        dependsOn: flags[0] & 0x03,
+        isDependedOn: (flags[1] & 0xc0) >>> 6,
+        hasRedundancy: (flags[1] & 0x30) >>> 4,
+        paddingValue: (flags[1] & 0x0e) >>> 1,
+        isNonSyncSample: flags[1] & 0x01,
+        degradationPriority: flags[2] << 8 | flags[3]
+      };
+    };
+    var parseSampleFlags_1 = parseSampleFlags$1;
+    var parseSampleFlags = parseSampleFlags_1;
+    var trun = function (data) {
+      var result = {
+          version: data[0],
+          flags: new Uint8Array(data.subarray(1, 4)),
+          samples: []
+        },
+        view = new DataView(data.buffer, data.byteOffset, data.byteLength),
+        // Flag interpretation
+        dataOffsetPresent = result.flags[2] & 0x01,
+        // compare with 2nd byte of 0x1
+        firstSampleFlagsPresent = result.flags[2] & 0x04,
+        // compare with 2nd byte of 0x4
+        sampleDurationPresent = result.flags[1] & 0x01,
+        // compare with 2nd byte of 0x100
+        sampleSizePresent = result.flags[1] & 0x02,
+        // compare with 2nd byte of 0x200
+        sampleFlagsPresent = result.flags[1] & 0x04,
+        // compare with 2nd byte of 0x400
+        sampleCompositionTimeOffsetPresent = result.flags[1] & 0x08,
+        // compare with 2nd byte of 0x800
+        sampleCount = view.getUint32(4),
+        offset = 8,
+        sample;
+      if (dataOffsetPresent) {
+        // 32 bit signed integer
+        result.dataOffset = view.getInt32(offset);
+        offset += 4;
+      } // Overrides the flags for the first sample only. The order of
+      // optional values will be: duration, size, compositionTimeOffset
+
+      if (firstSampleFlagsPresent && sampleCount) {
+        sample = {
+          flags: parseSampleFlags(data.subarray(offset, offset + 4))
+        };
+        offset += 4;
+        if (sampleDurationPresent) {
+          sample.duration = view.getUint32(offset);
+          offset += 4;
+        }
+        if (sampleSizePresent) {
+          sample.size = view.getUint32(offset);
+          offset += 4;
+        }
+        if (sampleCompositionTimeOffsetPresent) {
+          if (result.version === 1) {
+            sample.compositionTimeOffset = view.getInt32(offset);
+          } else {
+            sample.compositionTimeOffset = view.getUint32(offset);
+          }
+          offset += 4;
+        }
+        result.samples.push(sample);
+        sampleCount--;
+      }
+      while (sampleCount--) {
+        sample = {};
+        if (sampleDurationPresent) {
+          sample.duration = view.getUint32(offset);
+          offset += 4;
+        }
+        if (sampleSizePresent) {
+          sample.size = view.getUint32(offset);
+          offset += 4;
+        }
+        if (sampleFlagsPresent) {
+          sample.flags = parseSampleFlags(data.subarray(offset, offset + 4));
+          offset += 4;
+        }
+        if (sampleCompositionTimeOffsetPresent) {
+          if (result.version === 1) {
+            sample.compositionTimeOffset = view.getInt32(offset);
+          } else {
+            sample.compositionTimeOffset = view.getUint32(offset);
+          }
+          offset += 4;
+        }
+        result.samples.push(sample);
+      }
+      return result;
+    };
+    var parseTrun$2 = trun;
+    var tfhd = function (data) {
+      var view = new DataView(data.buffer, data.byteOffset, data.byteLength),
+        result = {
+          version: data[0],
+          flags: new Uint8Array(data.subarray(1, 4)),
+          trackId: view.getUint32(4)
+        },
+        baseDataOffsetPresent = result.flags[2] & 0x01,
+        sampleDescriptionIndexPresent = result.flags[2] & 0x02,
+        defaultSampleDurationPresent = result.flags[2] & 0x08,
+        defaultSampleSizePresent = result.flags[2] & 0x10,
+        defaultSampleFlagsPresent = result.flags[2] & 0x20,
+        durationIsEmpty = result.flags[0] & 0x010000,
+        defaultBaseIsMoof = result.flags[0] & 0x020000,
+        i;
+      i = 8;
+      if (baseDataOffsetPresent) {
+        i += 4; // truncate top 4 bytes
+        // FIXME: should we read the full 64 bits?
+
+        result.baseDataOffset = view.getUint32(12);
+        i += 4;
+      }
+      if (sampleDescriptionIndexPresent) {
+        result.sampleDescriptionIndex = view.getUint32(i);
+        i += 4;
+      }
+      if (defaultSampleDurationPresent) {
+        result.defaultSampleDuration = view.getUint32(i);
+        i += 4;
+      }
+      if (defaultSampleSizePresent) {
+        result.defaultSampleSize = view.getUint32(i);
+        i += 4;
+      }
+      if (defaultSampleFlagsPresent) {
+        result.defaultSampleFlags = view.getUint32(i);
+      }
+      if (durationIsEmpty) {
+        result.durationIsEmpty = true;
+      }
+      if (!baseDataOffsetPresent && defaultBaseIsMoof) {
+        result.baseDataOffsetIsMoof = true;
+      }
+      return result;
+    };
+    var parseTfhd$2 = tfhd;
+    var win;
+    if (typeof window !== "undefined") {
+      win = window;
+    } else if (typeof commonjsGlobal !== "undefined") {
+      win = commonjsGlobal;
+    } else if (typeof self !== "undefined") {
+      win = self;
+    } else {
+      win = {};
+    }
+    var window_1 = win;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Reads in-band CEA-708 captions out of FMP4 segments.
+     * @see https://en.wikipedia.org/wiki/CEA-708
+     */
+
+    var discardEmulationPreventionBytes = captionPacketParser.discardEmulationPreventionBytes;
+    var CaptionStream = captionStream.CaptionStream;
+    var findBox$1 = findBox_1;
+    var parseTfdt$1 = parseTfdt$2;
+    var parseTrun$1 = parseTrun$2;
+    var parseTfhd$1 = parseTfhd$2;
+    var window$2 = window_1;
+    /**
+      * Maps an offset in the mdat to a sample based on the the size of the samples.
+      * Assumes that `parseSamples` has been called first.
+      *
+      * @param {Number} offset - The offset into the mdat
+      * @param {Object[]} samples - An array of samples, parsed using `parseSamples`
+      * @return {?Object} The matching sample, or null if no match was found.
+      *
+      * @see ISO-BMFF-12/2015, Section 8.8.8
+     **/
+
+    var mapToSample = function (offset, samples) {
+      var approximateOffset = offset;
+      for (var i = 0; i < samples.length; i++) {
+        var sample = samples[i];
+        if (approximateOffset < sample.size) {
+          return sample;
+        }
+        approximateOffset -= sample.size;
+      }
+      return null;
+    };
+    /**
+      * Finds SEI nal units contained in a Media Data Box.
+      * Assumes that `parseSamples` has been called first.
+      *
+      * @param {Uint8Array} avcStream - The bytes of the mdat
+      * @param {Object[]} samples - The samples parsed out by `parseSamples`
+      * @param {Number} trackId - The trackId of this video track
+      * @return {Object[]} seiNals - the parsed SEI NALUs found.
+      *   The contents of the seiNal should match what is expected by
+      *   CaptionStream.push (nalUnitType, size, data, escapedRBSP, pts, dts)
+      *
+      * @see ISO-BMFF-12/2015, Section 8.1.1
+      * @see Rec. ITU-T H.264, 7.3.2.3.1
+     **/
+
+    var findSeiNals = function (avcStream, samples, trackId) {
+      var avcView = new DataView(avcStream.buffer, avcStream.byteOffset, avcStream.byteLength),
+        result = {
+          logs: [],
+          seiNals: []
+        },
+        seiNal,
+        i,
+        length,
+        lastMatchedSample;
+      for (i = 0; i + 4 < avcStream.length; i += length) {
+        length = avcView.getUint32(i);
+        i += 4; // Bail if this doesn't appear to be an H264 stream
+
+        if (length <= 0) {
+          continue;
+        }
+        switch (avcStream[i] & 0x1F) {
+          case 0x06:
+            var data = avcStream.subarray(i + 1, i + 1 + length);
+            var matchingSample = mapToSample(i, samples);
+            seiNal = {
+              nalUnitType: 'sei_rbsp',
+              size: length,
+              data: data,
+              escapedRBSP: discardEmulationPreventionBytes(data),
+              trackId: trackId
+            };
+            if (matchingSample) {
+              seiNal.pts = matchingSample.pts;
+              seiNal.dts = matchingSample.dts;
+              lastMatchedSample = matchingSample;
+            } else if (lastMatchedSample) {
+              // If a matching sample cannot be found, use the last
+              // sample's values as they should be as close as possible
+              seiNal.pts = lastMatchedSample.pts;
+              seiNal.dts = lastMatchedSample.dts;
+            } else {
+              result.logs.push({
+                level: 'warn',
+                message: 'We\'ve encountered a nal unit without data at ' + i + ' for trackId ' + trackId + '. See mux.js#223.'
+              });
+              break;
+            }
+            result.seiNals.push(seiNal);
+            break;
+        }
+      }
+      return result;
+    };
+    /**
+      * Parses sample information out of Track Run Boxes and calculates
+      * the absolute presentation and decode timestamps of each sample.
+      *
+      * @param {Array<Uint8Array>} truns - The Trun Run boxes to be parsed
+      * @param {Number|BigInt} baseMediaDecodeTime - base media decode time from tfdt
+          @see ISO-BMFF-12/2015, Section 8.8.12
+      * @param {Object} tfhd - The parsed Track Fragment Header
+      *   @see inspect.parseTfhd
+      * @return {Object[]} the parsed samples
+      *
+      * @see ISO-BMFF-12/2015, Section 8.8.8
+     **/
+
+    var parseSamples = function (truns, baseMediaDecodeTime, tfhd) {
+      var currentDts = baseMediaDecodeTime;
+      var defaultSampleDuration = tfhd.defaultSampleDuration || 0;
+      var defaultSampleSize = tfhd.defaultSampleSize || 0;
+      var trackId = tfhd.trackId;
+      var allSamples = [];
+      truns.forEach(function (trun) {
+        // Note: We currently do not parse the sample table as well
+        // as the trun. It's possible some sources will require this.
+        // moov > trak > mdia > minf > stbl
+        var trackRun = parseTrun$1(trun);
+        var samples = trackRun.samples;
+        samples.forEach(function (sample) {
+          if (sample.duration === undefined) {
+            sample.duration = defaultSampleDuration;
+          }
+          if (sample.size === undefined) {
+            sample.size = defaultSampleSize;
+          }
+          sample.trackId = trackId;
+          sample.dts = currentDts;
+          if (sample.compositionTimeOffset === undefined) {
+            sample.compositionTimeOffset = 0;
+          }
+          if (typeof currentDts === 'bigint') {
+            sample.pts = currentDts + window$2.BigInt(sample.compositionTimeOffset);
+            currentDts += window$2.BigInt(sample.duration);
+          } else {
+            sample.pts = currentDts + sample.compositionTimeOffset;
+            currentDts += sample.duration;
+          }
+        });
+        allSamples = allSamples.concat(samples);
+      });
+      return allSamples;
+    };
+    /**
+      * Parses out caption nals from an FMP4 segment's video tracks.
+      *
+      * @param {Uint8Array} segment - The bytes of a single segment
+      * @param {Number} videoTrackId - The trackId of a video track in the segment
+      * @return {Object.<Number, Object[]>} A mapping of video trackId to
+      *   a list of seiNals found in that track
+     **/
+
+    var parseCaptionNals = function (segment, videoTrackId) {
+      // To get the samples
+      var trafs = findBox$1(segment, ['moof', 'traf']); // To get SEI NAL units
+
+      var mdats = findBox$1(segment, ['mdat']);
+      var captionNals = {};
+      var mdatTrafPairs = []; // Pair up each traf with a mdat as moofs and mdats are in pairs
+
+      mdats.forEach(function (mdat, index) {
+        var matchingTraf = trafs[index];
+        mdatTrafPairs.push({
+          mdat: mdat,
+          traf: matchingTraf
+        });
+      });
+      mdatTrafPairs.forEach(function (pair) {
+        var mdat = pair.mdat;
+        var traf = pair.traf;
+        var tfhd = findBox$1(traf, ['tfhd']); // Exactly 1 tfhd per traf
+
+        var headerInfo = parseTfhd$1(tfhd[0]);
+        var trackId = headerInfo.trackId;
+        var tfdt = findBox$1(traf, ['tfdt']); // Either 0 or 1 tfdt per traf
+
+        var baseMediaDecodeTime = tfdt.length > 0 ? parseTfdt$1(tfdt[0]).baseMediaDecodeTime : 0;
+        var truns = findBox$1(traf, ['trun']);
+        var samples;
+        var result; // Only parse video data for the chosen video track
+
+        if (videoTrackId === trackId && truns.length > 0) {
+          samples = parseSamples(truns, baseMediaDecodeTime, headerInfo);
+          result = findSeiNals(mdat, samples, trackId);
+          if (!captionNals[trackId]) {
+            captionNals[trackId] = {
+              seiNals: [],
+              logs: []
+            };
+          }
+          captionNals[trackId].seiNals = captionNals[trackId].seiNals.concat(result.seiNals);
+          captionNals[trackId].logs = captionNals[trackId].logs.concat(result.logs);
+        }
+      });
+      return captionNals;
+    };
+    /**
+      * Parses out inband captions from an MP4 container and returns
+      * caption objects that can be used by WebVTT and the TextTrack API.
+      * @see https://developer.mozilla.org/en-US/docs/Web/API/VTTCue
+      * @see https://developer.mozilla.org/en-US/docs/Web/API/TextTrack
+      * Assumes that `probe.getVideoTrackIds` and `probe.timescale` have been called first
+      *
+      * @param {Uint8Array} segment - The fmp4 segment containing embedded captions
+      * @param {Number} trackId - The id of the video track to parse
+      * @param {Number} timescale - The timescale for the video track from the init segment
+      *
+      * @return {?Object[]} parsedCaptions - A list of captions or null if no video tracks
+      * @return {Number} parsedCaptions[].startTime - The time to show the caption in seconds
+      * @return {Number} parsedCaptions[].endTime - The time to stop showing the caption in seconds
+      * @return {Object[]} parsedCaptions[].content - A list of individual caption segments
+      * @return {String} parsedCaptions[].content.text - The visible content of the caption segment
+      * @return {Number} parsedCaptions[].content.line - The line height from 1-15 for positioning of the caption segment
+      * @return {Number} parsedCaptions[].content.position - The column indent percentage for cue positioning from 10-80
+     **/
+
+    var parseEmbeddedCaptions = function (segment, trackId, timescale) {
+      var captionNals; // the ISO-BMFF spec says that trackId can't be zero, but there's some broken content out there
+
+      if (trackId === null) {
+        return null;
+      }
+      captionNals = parseCaptionNals(segment, trackId);
+      var trackNals = captionNals[trackId] || {};
+      return {
+        seiNals: trackNals.seiNals,
+        logs: trackNals.logs,
+        timescale: timescale
+      };
+    };
+    /**
+      * Converts SEI NALUs into captions that can be used by video.js
+     **/
+
+    var CaptionParser = function () {
+      var isInitialized = false;
+      var captionStream; // Stores segments seen before trackId and timescale are set
+
+      var segmentCache; // Stores video track ID of the track being parsed
+
+      var trackId; // Stores the timescale of the track being parsed
+
+      var timescale; // Stores captions parsed so far
+
+      var parsedCaptions; // Stores whether we are receiving partial data or not
+
+      var parsingPartial;
+      /**
+        * A method to indicate whether a CaptionParser has been initalized
+        * @returns {Boolean}
+       **/
+
+      this.isInitialized = function () {
+        return isInitialized;
+      };
+      /**
+        * Initializes the underlying CaptionStream, SEI NAL parsing
+        * and management, and caption collection
+       **/
+
+      this.init = function (options) {
+        captionStream = new CaptionStream();
+        isInitialized = true;
+        parsingPartial = options ? options.isPartial : false; // Collect dispatched captions
+
+        captionStream.on('data', function (event) {
+          // Convert to seconds in the source's timescale
+          event.startTime = event.startPts / timescale;
+          event.endTime = event.endPts / timescale;
+          parsedCaptions.captions.push(event);
+          parsedCaptions.captionStreams[event.stream] = true;
+        });
+        captionStream.on('log', function (log) {
+          parsedCaptions.logs.push(log);
+        });
+      };
+      /**
+        * Determines if a new video track will be selected
+        * or if the timescale changed
+        * @return {Boolean}
+       **/
+
+      this.isNewInit = function (videoTrackIds, timescales) {
+        if (videoTrackIds && videoTrackIds.length === 0 || timescales && typeof timescales === 'object' && Object.keys(timescales).length === 0) {
+          return false;
+        }
+        return trackId !== videoTrackIds[0] || timescale !== timescales[trackId];
+      };
+      /**
+        * Parses out SEI captions and interacts with underlying
+        * CaptionStream to return dispatched captions
+        *
+        * @param {Uint8Array} segment - The fmp4 segment containing embedded captions
+        * @param {Number[]} videoTrackIds - A list of video tracks found in the init segment
+        * @param {Object.<Number, Number>} timescales - The timescales found in the init segment
+        * @see parseEmbeddedCaptions
+        * @see m2ts/caption-stream.js
+       **/
+
+      this.parse = function (segment, videoTrackIds, timescales) {
+        var parsedData;
+        if (!this.isInitialized()) {
+          return null; // This is not likely to be a video segment
+        } else if (!videoTrackIds || !timescales) {
+          return null;
+        } else if (this.isNewInit(videoTrackIds, timescales)) {
+          // Use the first video track only as there is no
+          // mechanism to switch to other video tracks
+          trackId = videoTrackIds[0];
+          timescale = timescales[trackId]; // If an init segment has not been seen yet, hold onto segment
+          // data until we have one.
+          // the ISO-BMFF spec says that trackId can't be zero, but there's some broken content out there
+        } else if (trackId === null || !timescale) {
+          segmentCache.push(segment);
+          return null;
+        } // Now that a timescale and trackId is set, parse cached segments
+
+        while (segmentCache.length > 0) {
+          var cachedSegment = segmentCache.shift();
+          this.parse(cachedSegment, videoTrackIds, timescales);
+        }
+        parsedData = parseEmbeddedCaptions(segment, trackId, timescale);
+        if (parsedData && parsedData.logs) {
+          parsedCaptions.logs = parsedCaptions.logs.concat(parsedData.logs);
+        }
+        if (parsedData === null || !parsedData.seiNals) {
+          if (parsedCaptions.logs.length) {
+            return {
+              logs: parsedCaptions.logs,
+              captions: [],
+              captionStreams: []
+            };
+          }
+          return null;
+        }
+        this.pushNals(parsedData.seiNals); // Force the parsed captions to be dispatched
+
+        this.flushStream();
+        return parsedCaptions;
+      };
+      /**
+        * Pushes SEI NALUs onto CaptionStream
+        * @param {Object[]} nals - A list of SEI nals parsed using `parseCaptionNals`
+        * Assumes that `parseCaptionNals` has been called first
+        * @see m2ts/caption-stream.js
+        **/
+
+      this.pushNals = function (nals) {
+        if (!this.isInitialized() || !nals || nals.length === 0) {
+          return null;
+        }
+        nals.forEach(function (nal) {
+          captionStream.push(nal);
+        });
+      };
+      /**
+        * Flushes underlying CaptionStream to dispatch processed, displayable captions
+        * @see m2ts/caption-stream.js
+       **/
+
+      this.flushStream = function () {
+        if (!this.isInitialized()) {
+          return null;
+        }
+        if (!parsingPartial) {
+          captionStream.flush();
+        } else {
+          captionStream.partialFlush();
+        }
+      };
+      /**
+        * Reset caption buckets for new data
+       **/
+
+      this.clearParsedCaptions = function () {
+        parsedCaptions.captions = [];
+        parsedCaptions.captionStreams = {};
+        parsedCaptions.logs = [];
+      };
+      /**
+        * Resets underlying CaptionStream
+        * @see m2ts/caption-stream.js
+       **/
+
+      this.resetCaptionStream = function () {
+        if (!this.isInitialized()) {
+          return null;
+        }
+        captionStream.reset();
+      };
+      /**
+        * Convenience method to clear all captions flushed from the
+        * CaptionStream and still being parsed
+        * @see m2ts/caption-stream.js
+       **/
+
+      this.clearAllCaptions = function () {
+        this.clearParsedCaptions();
+        this.resetCaptionStream();
+      };
+      /**
+        * Reset caption parser
+       **/
+
+      this.reset = function () {
+        segmentCache = [];
+        trackId = null;
+        timescale = null;
+        if (!parsedCaptions) {
+          parsedCaptions = {
+            captions: [],
+            // CC1, CC2, CC3, CC4
+            captionStreams: {},
+            logs: []
+          };
+        } else {
+          this.clearParsedCaptions();
+        }
+        this.resetCaptionStream();
+      };
+      this.reset();
+    };
+    var captionParser = CaptionParser;
+    /**
+     * Returns the first string in the data array ending with a null char '\0'
+     * @param {UInt8} data 
+     * @returns the string with the null char
+     */
+
+    var uint8ToCString$1 = function (data) {
+      var index = 0;
+      var curChar = String.fromCharCode(data[index]);
+      var retString = '';
+      while (curChar !== '\0') {
+        retString += curChar;
+        index++;
+        curChar = String.fromCharCode(data[index]);
+      } // Add nullChar
+
+      retString += curChar;
+      return retString;
+    };
+    var string = {
+      uint8ToCString: uint8ToCString$1
+    };
+    var uint8ToCString = string.uint8ToCString;
+    var getUint64$1 = numbers.getUint64;
+    /**
+     * Based on: ISO/IEC 23009 Section: 5.10.3.3
+     * References:
+     * https://dashif-documents.azurewebsites.net/Events/master/event.html#emsg-format
+     * https://aomediacodec.github.io/id3-emsg/
+     * 
+     * Takes emsg box data as a uint8 array and returns a emsg box object
+     * @param {UInt8Array} boxData data from emsg box
+     * @returns A parsed emsg box object
+     */
+
+    var parseEmsgBox = function (boxData) {
+      // version + flags
+      var offset = 4;
+      var version = boxData[0];
+      var scheme_id_uri, value, timescale, presentation_time, presentation_time_delta, event_duration, id, message_data;
+      if (version === 0) {
+        scheme_id_uri = uint8ToCString(boxData.subarray(offset));
+        offset += scheme_id_uri.length;
+        value = uint8ToCString(boxData.subarray(offset));
+        offset += value.length;
+        var dv = new DataView(boxData.buffer);
+        timescale = dv.getUint32(offset);
+        offset += 4;
+        presentation_time_delta = dv.getUint32(offset);
+        offset += 4;
+        event_duration = dv.getUint32(offset);
+        offset += 4;
+        id = dv.getUint32(offset);
+        offset += 4;
+      } else if (version === 1) {
+        var dv = new DataView(boxData.buffer);
+        timescale = dv.getUint32(offset);
+        offset += 4;
+        presentation_time = getUint64$1(boxData.subarray(offset));
+        offset += 8;
+        event_duration = dv.getUint32(offset);
+        offset += 4;
+        id = dv.getUint32(offset);
+        offset += 4;
+        scheme_id_uri = uint8ToCString(boxData.subarray(offset));
+        offset += scheme_id_uri.length;
+        value = uint8ToCString(boxData.subarray(offset));
+        offset += value.length;
+      }
+      message_data = new Uint8Array(boxData.subarray(offset, boxData.byteLength));
+      var emsgBox = {
+        scheme_id_uri,
+        value,
+        // if timescale is undefined or 0 set to 1 
+        timescale: timescale ? timescale : 1,
+        presentation_time,
+        presentation_time_delta,
+        event_duration,
+        id,
+        message_data
+      };
+      return isValidEmsgBox(version, emsgBox) ? emsgBox : undefined;
+    };
+    /**
+     * Scales a presentation time or time delta with an offset with a provided timescale
+     * @param {number} presentationTime 
+     * @param {number} timescale 
+     * @param {number} timeDelta 
+     * @param {number} offset 
+     * @returns the scaled time as a number
+     */
+
+    var scaleTime = function (presentationTime, timescale, timeDelta, offset) {
+      return presentationTime || presentationTime === 0 ? presentationTime / timescale : offset + timeDelta / timescale;
+    };
+    /**
+     * Checks the emsg box data for validity based on the version
+     * @param {number} version of the emsg box to validate
+     * @param {Object} emsg the emsg data to validate
+     * @returns if the box is valid as a boolean
+     */
+
+    var isValidEmsgBox = function (version, emsg) {
+      var hasScheme = emsg.scheme_id_uri !== '\0';
+      var isValidV0Box = version === 0 && isDefined(emsg.presentation_time_delta) && hasScheme;
+      var isValidV1Box = version === 1 && isDefined(emsg.presentation_time) && hasScheme; // Only valid versions of emsg are 0 and 1
+
+      return !(version > 1) && isValidV0Box || isValidV1Box;
+    }; // Utility function to check if an object is defined
+
+    var isDefined = function (data) {
+      return data !== undefined || data !== null;
+    };
+    var emsg$1 = {
+      parseEmsgBox: parseEmsgBox,
+      scaleTime: scaleTime
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Utilities to detect basic properties and metadata about MP4s.
+     */
+
+    var toUnsigned = bin.toUnsigned;
+    var toHexString = bin.toHexString;
+    var findBox = findBox_1;
+    var parseType$1 = parseType_1;
+    var emsg = emsg$1;
+    var parseTfhd = parseTfhd$2;
+    var parseTrun = parseTrun$2;
+    var parseTfdt = parseTfdt$2;
+    var getUint64 = numbers.getUint64;
+    var timescale, startTime, compositionStartTime, getVideoTrackIds, getTracks, getTimescaleFromMediaHeader, getEmsgID3;
+    var window$1 = window_1;
+    var parseId3Frames = parseId3.parseId3Frames;
+    /**
+     * Parses an MP4 initialization segment and extracts the timescale
+     * values for any declared tracks. Timescale values indicate the
+     * number of clock ticks per second to assume for time-based values
+     * elsewhere in the MP4.
+     *
+     * To determine the start time of an MP4, you need two pieces of
+     * information: the timescale unit and the earliest base media decode
+     * time. Multiple timescales can be specified within an MP4 but the
+     * base media decode time is always expressed in the timescale from
+     * the media header box for the track:
+     * ```
+     * moov > trak > mdia > mdhd.timescale
+     * ```
+     * @param init {Uint8Array} the bytes of the init segment
+     * @return {object} a hash of track ids to timescale values or null if
+     * the init segment is malformed.
+     */
+
+    timescale = function (init) {
+      var result = {},
+        traks = findBox(init, ['moov', 'trak']); // mdhd timescale
+
+      return traks.reduce(function (result, trak) {
+        var tkhd, version, index, id, mdhd;
+        tkhd = findBox(trak, ['tkhd'])[0];
+        if (!tkhd) {
+          return null;
+        }
+        version = tkhd[0];
+        index = version === 0 ? 12 : 20;
+        id = toUnsigned(tkhd[index] << 24 | tkhd[index + 1] << 16 | tkhd[index + 2] << 8 | tkhd[index + 3]);
+        mdhd = findBox(trak, ['mdia', 'mdhd'])[0];
+        if (!mdhd) {
+          return null;
+        }
+        version = mdhd[0];
+        index = version === 0 ? 12 : 20;
+        result[id] = toUnsigned(mdhd[index] << 24 | mdhd[index + 1] << 16 | mdhd[index + 2] << 8 | mdhd[index + 3]);
+        return result;
+      }, result);
+    };
+    /**
+     * Determine the base media decode start time, in seconds, for an MP4
+     * fragment. If multiple fragments are specified, the earliest time is
+     * returned.
+     *
+     * The base media decode time can be parsed from track fragment
+     * metadata:
+     * ```
+     * moof > traf > tfdt.baseMediaDecodeTime
+     * ```
+     * It requires the timescale value from the mdhd to interpret.
+     *
+     * @param timescale {object} a hash of track ids to timescale values.
+     * @return {number} the earliest base media decode start time for the
+     * fragment, in seconds
+     */
+
+    startTime = function (timescale, fragment) {
+      var trafs; // we need info from two childrend of each track fragment box
+
+      trafs = findBox(fragment, ['moof', 'traf']); // determine the start times for each track
+
+      var lowestTime = trafs.reduce(function (acc, traf) {
+        var tfhd = findBox(traf, ['tfhd'])[0]; // get the track id from the tfhd
+
+        var id = toUnsigned(tfhd[4] << 24 | tfhd[5] << 16 | tfhd[6] << 8 | tfhd[7]); // assume a 90kHz clock if no timescale was specified
+
+        var scale = timescale[id] || 90e3; // get the base media decode time from the tfdt
+
+        var tfdt = findBox(traf, ['tfdt'])[0];
+        var dv = new DataView(tfdt.buffer, tfdt.byteOffset, tfdt.byteLength);
+        var baseTime; // version 1 is 64 bit
+
+        if (tfdt[0] === 1) {
+          baseTime = getUint64(tfdt.subarray(4, 12));
+        } else {
+          baseTime = dv.getUint32(4);
+        } // convert base time to seconds if it is a valid number.
+
+        let seconds;
+        if (typeof baseTime === 'bigint') {
+          seconds = baseTime / window$1.BigInt(scale);
+        } else if (typeof baseTime === 'number' && !isNaN(baseTime)) {
+          seconds = baseTime / scale;
+        }
+        if (seconds < Number.MAX_SAFE_INTEGER) {
+          seconds = Number(seconds);
+        }
+        if (seconds < acc) {
+          acc = seconds;
+        }
+        return acc;
+      }, Infinity);
+      return typeof lowestTime === 'bigint' || isFinite(lowestTime) ? lowestTime : 0;
+    };
+    /**
+     * Determine the composition start, in seconds, for an MP4
+     * fragment.
+     *
+     * The composition start time of a fragment can be calculated using the base
+     * media decode time, composition time offset, and timescale, as follows:
+     *
+     * compositionStartTime = (baseMediaDecodeTime + compositionTimeOffset) / timescale
+     *
+     * All of the aforementioned information is contained within a media fragment's
+     * `traf` box, except for timescale info, which comes from the initialization
+     * segment, so a track id (also contained within a `traf`) is also necessary to
+     * associate it with a timescale
+     *
+     *
+     * @param timescales {object} - a hash of track ids to timescale values.
+     * @param fragment {Unit8Array} - the bytes of a media segment
+     * @return {number} the composition start time for the fragment, in seconds
+     **/
+
+    compositionStartTime = function (timescales, fragment) {
+      var trafBoxes = findBox(fragment, ['moof', 'traf']);
+      var baseMediaDecodeTime = 0;
+      var compositionTimeOffset = 0;
+      var trackId;
+      if (trafBoxes && trafBoxes.length) {
+        // The spec states that track run samples contained within a `traf` box are contiguous, but
+        // it does not explicitly state whether the `traf` boxes themselves are contiguous.
+        // We will assume that they are, so we only need the first to calculate start time.
+        var tfhd = findBox(trafBoxes[0], ['tfhd'])[0];
+        var trun = findBox(trafBoxes[0], ['trun'])[0];
+        var tfdt = findBox(trafBoxes[0], ['tfdt'])[0];
+        if (tfhd) {
+          var parsedTfhd = parseTfhd(tfhd);
+          trackId = parsedTfhd.trackId;
+        }
+        if (tfdt) {
+          var parsedTfdt = parseTfdt(tfdt);
+          baseMediaDecodeTime = parsedTfdt.baseMediaDecodeTime;
+        }
+        if (trun) {
+          var parsedTrun = parseTrun(trun);
+          if (parsedTrun.samples && parsedTrun.samples.length) {
+            compositionTimeOffset = parsedTrun.samples[0].compositionTimeOffset || 0;
+          }
+        }
+      } // Get timescale for this specific track. Assume a 90kHz clock if no timescale was
+      // specified.
+
+      var timescale = timescales[trackId] || 90e3; // return the composition start time, in seconds
+
+      if (typeof baseMediaDecodeTime === 'bigint') {
+        compositionTimeOffset = window$1.BigInt(compositionTimeOffset);
+        timescale = window$1.BigInt(timescale);
+      }
+      var result = (baseMediaDecodeTime + compositionTimeOffset) / timescale;
+      if (typeof result === 'bigint' && result < Number.MAX_SAFE_INTEGER) {
+        result = Number(result);
+      }
+      return result;
+    };
+    /**
+      * Find the trackIds of the video tracks in this source.
+      * Found by parsing the Handler Reference and Track Header Boxes:
+      *   moov > trak > mdia > hdlr
+      *   moov > trak > tkhd
+      *
+      * @param {Uint8Array} init - The bytes of the init segment for this source
+      * @return {Number[]} A list of trackIds
+      *
+      * @see ISO-BMFF-12/2015, Section 8.4.3
+     **/
+
+    getVideoTrackIds = function (init) {
+      var traks = findBox(init, ['moov', 'trak']);
+      var videoTrackIds = [];
+      traks.forEach(function (trak) {
+        var hdlrs = findBox(trak, ['mdia', 'hdlr']);
+        var tkhds = findBox(trak, ['tkhd']);
+        hdlrs.forEach(function (hdlr, index) {
+          var handlerType = parseType$1(hdlr.subarray(8, 12));
+          var tkhd = tkhds[index];
+          var view;
+          var version;
+          var trackId;
+          if (handlerType === 'vide') {
+            view = new DataView(tkhd.buffer, tkhd.byteOffset, tkhd.byteLength);
+            version = view.getUint8(0);
+            trackId = version === 0 ? view.getUint32(12) : view.getUint32(20);
+            videoTrackIds.push(trackId);
+          }
+        });
+      });
+      return videoTrackIds;
+    };
+    getTimescaleFromMediaHeader = function (mdhd) {
+      // mdhd is a FullBox, meaning it will have its own version as the first byte
+      var version = mdhd[0];
+      var index = version === 0 ? 12 : 20;
+      return toUnsigned(mdhd[index] << 24 | mdhd[index + 1] << 16 | mdhd[index + 2] << 8 | mdhd[index + 3]);
+    };
+    /**
+     * Get all the video, audio, and hint tracks from a non fragmented
+     * mp4 segment
+     */
+
+    getTracks = function (init) {
+      var traks = findBox(init, ['moov', 'trak']);
+      var tracks = [];
+      traks.forEach(function (trak) {
+        var track = {};
+        var tkhd = findBox(trak, ['tkhd'])[0];
+        var view, tkhdVersion; // id
+
+        if (tkhd) {
+          view = new DataView(tkhd.buffer, tkhd.byteOffset, tkhd.byteLength);
+          tkhdVersion = view.getUint8(0);
+          track.id = tkhdVersion === 0 ? view.getUint32(12) : view.getUint32(20);
+        }
+        var hdlr = findBox(trak, ['mdia', 'hdlr'])[0]; // type
+
+        if (hdlr) {
+          var type = parseType$1(hdlr.subarray(8, 12));
+          if (type === 'vide') {
+            track.type = 'video';
+          } else if (type === 'soun') {
+            track.type = 'audio';
+          } else {
+            track.type = type;
+          }
+        } // codec
+
+        var stsd = findBox(trak, ['mdia', 'minf', 'stbl', 'stsd'])[0];
+        if (stsd) {
+          var sampleDescriptions = stsd.subarray(8); // gives the codec type string
+
+          track.codec = parseType$1(sampleDescriptions.subarray(4, 8));
+          var codecBox = findBox(sampleDescriptions, [track.codec])[0];
+          var codecConfig, codecConfigType;
+          if (codecBox) {
+            // https://tools.ietf.org/html/rfc6381#section-3.3
+            if (/^[asm]vc[1-9]$/i.test(track.codec)) {
+              // we don't need anything but the "config" parameter of the
+              // avc1 codecBox
+              codecConfig = codecBox.subarray(78);
+              codecConfigType = parseType$1(codecConfig.subarray(4, 8));
+              if (codecConfigType === 'avcC' && codecConfig.length > 11) {
+                track.codec += '.'; // left padded with zeroes for single digit hex
+                // profile idc
+
+                track.codec += toHexString(codecConfig[9]); // the byte containing the constraint_set flags
+
+                track.codec += toHexString(codecConfig[10]); // level idc
+
+                track.codec += toHexString(codecConfig[11]);
+              } else {
+                // TODO: show a warning that we couldn't parse the codec
+                // and are using the default
+                track.codec = 'avc1.4d400d';
+              }
+            } else if (/^mp4[a,v]$/i.test(track.codec)) {
+              // we do not need anything but the streamDescriptor of the mp4a codecBox
+              codecConfig = codecBox.subarray(28);
+              codecConfigType = parseType$1(codecConfig.subarray(4, 8));
+              if (codecConfigType === 'esds' && codecConfig.length > 20 && codecConfig[19] !== 0) {
+                track.codec += '.' + toHexString(codecConfig[19]); // this value is only a single digit
+
+                track.codec += '.' + toHexString(codecConfig[20] >>> 2 & 0x3f).replace(/^0/, '');
+              } else {
+                // TODO: show a warning that we couldn't parse the codec
+                // and are using the default
+                track.codec = 'mp4a.40.2';
+              }
+            } else {
+              // flac, opus, etc
+              track.codec = track.codec.toLowerCase();
+            }
+          }
+        }
+        var mdhd = findBox(trak, ['mdia', 'mdhd'])[0];
+        if (mdhd) {
+          track.timescale = getTimescaleFromMediaHeader(mdhd);
+        }
+        tracks.push(track);
+      });
+      return tracks;
+    };
+    /**
+     * Returns an array of emsg ID3 data from the provided segmentData.
+     * An offset can also be provided as the Latest Arrival Time to calculate 
+     * the Event Start Time of v0 EMSG boxes. 
+     * See: https://dashif-documents.azurewebsites.net/Events/master/event.html#Inband-event-timing
+     * 
+     * @param {Uint8Array} segmentData the segment byte array.
+     * @param {number} offset the segment start time or Latest Arrival Time, 
+     * @return {Object[]} an array of ID3 parsed from EMSG boxes
+     */
+
+    getEmsgID3 = function (segmentData, offset = 0) {
+      var emsgBoxes = findBox(segmentData, ['emsg']);
+      return emsgBoxes.map(data => {
+        var parsedBox = emsg.parseEmsgBox(new Uint8Array(data));
+        var parsedId3Frames = parseId3Frames(parsedBox.message_data);
+        return {
+          cueTime: emsg.scaleTime(parsedBox.presentation_time, parsedBox.timescale, parsedBox.presentation_time_delta, offset),
+          duration: emsg.scaleTime(parsedBox.event_duration, parsedBox.timescale),
+          frames: parsedId3Frames
+        };
+      });
+    };
+    var probe$2 = {
+      // export mp4 inspector's findBox and parseType for backwards compatibility
+      findBox: findBox,
+      parseType: parseType$1,
+      timescale: timescale,
+      startTime: startTime,
+      compositionStartTime: compositionStartTime,
+      videoTrackIds: getVideoTrackIds,
+      tracks: getTracks,
+      getTimescaleFromMediaHeader: getTimescaleFromMediaHeader,
+      getEmsgID3: getEmsgID3
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Utilities to detect basic properties and metadata about TS Segments.
+     */
+
+    var StreamTypes$1 = streamTypes;
+    var parsePid = function (packet) {
+      var pid = packet[1] & 0x1f;
+      pid <<= 8;
+      pid |= packet[2];
+      return pid;
+    };
+    var parsePayloadUnitStartIndicator = function (packet) {
+      return !!(packet[1] & 0x40);
+    };
+    var parseAdaptionField = function (packet) {
+      var offset = 0; // if an adaption field is present, its length is specified by the
+      // fifth byte of the TS packet header. The adaptation field is
+      // used to add stuffing to PES packets that don't fill a complete
+      // TS packet, and to specify some forms of timing and control data
+      // that we do not currently use.
+
+      if ((packet[3] & 0x30) >>> 4 > 0x01) {
+        offset += packet[4] + 1;
+      }
+      return offset;
+    };
+    var parseType = function (packet, pmtPid) {
+      var pid = parsePid(packet);
+      if (pid === 0) {
+        return 'pat';
+      } else if (pid === pmtPid) {
+        return 'pmt';
+      } else if (pmtPid) {
+        return 'pes';
+      }
+      return null;
+    };
+    var parsePat = function (packet) {
+      var pusi = parsePayloadUnitStartIndicator(packet);
+      var offset = 4 + parseAdaptionField(packet);
+      if (pusi) {
+        offset += packet[offset] + 1;
+      }
+      return (packet[offset + 10] & 0x1f) << 8 | packet[offset + 11];
+    };
+    var parsePmt = function (packet) {
+      var programMapTable = {};
+      var pusi = parsePayloadUnitStartIndicator(packet);
+      var payloadOffset = 4 + parseAdaptionField(packet);
+      if (pusi) {
+        payloadOffset += packet[payloadOffset] + 1;
+      } // PMTs can be sent ahead of the time when they should actually
+      // take effect. We don't believe this should ever be the case
+      // for HLS but we'll ignore "forward" PMT declarations if we see
+      // them. Future PMT declarations have the current_next_indicator
+      // set to zero.
+
+      if (!(packet[payloadOffset + 5] & 0x01)) {
+        return;
+      }
+      var sectionLength, tableEnd, programInfoLength; // the mapping table ends at the end of the current section
+
+      sectionLength = (packet[payloadOffset + 1] & 0x0f) << 8 | packet[payloadOffset + 2];
+      tableEnd = 3 + sectionLength - 4; // to determine where the table is, we have to figure out how
+      // long the program info descriptors are
+
+      programInfoLength = (packet[payloadOffset + 10] & 0x0f) << 8 | packet[payloadOffset + 11]; // advance the offset to the first entry in the mapping table
+
+      var offset = 12 + programInfoLength;
+      while (offset < tableEnd) {
+        var i = payloadOffset + offset; // add an entry that maps the elementary_pid to the stream_type
+
+        programMapTable[(packet[i + 1] & 0x1F) << 8 | packet[i + 2]] = packet[i]; // move to the next table entry
+        // skip past the elementary stream descriptors, if present
+
+        offset += ((packet[i + 3] & 0x0F) << 8 | packet[i + 4]) + 5;
+      }
+      return programMapTable;
+    };
+    var parsePesType = function (packet, programMapTable) {
+      var pid = parsePid(packet);
+      var type = programMapTable[pid];
+      switch (type) {
+        case StreamTypes$1.H264_STREAM_TYPE:
+          return 'video';
+        case StreamTypes$1.ADTS_STREAM_TYPE:
+          return 'audio';
+        case StreamTypes$1.METADATA_STREAM_TYPE:
+          return 'timed-metadata';
+        default:
+          return null;
+      }
+    };
+    var parsePesTime = function (packet) {
+      var pusi = parsePayloadUnitStartIndicator(packet);
+      if (!pusi) {
+        return null;
+      }
+      var offset = 4 + parseAdaptionField(packet);
+      if (offset >= packet.byteLength) {
+        // From the H 222.0 MPEG-TS spec
+        // "For transport stream packets carrying PES packets, stuffing is needed when there
+        //  is insufficient PES packet data to completely fill the transport stream packet
+        //  payload bytes. Stuffing is accomplished by defining an adaptation field longer than
+        //  the sum of the lengths of the data elements in it, so that the payload bytes
+        //  remaining after the adaptation field exactly accommodates the available PES packet
+        //  data."
+        //
+        // If the offset is >= the length of the packet, then the packet contains no data
+        // and instead is just adaption field stuffing bytes
+        return null;
+      }
+      var pes = null;
+      var ptsDtsFlags; // PES packets may be annotated with a PTS value, or a PTS value
+      // and a DTS value. Determine what combination of values is
+      // available to work with.
+
+      ptsDtsFlags = packet[offset + 7]; // PTS and DTS are normally stored as a 33-bit number.  Javascript
+      // performs all bitwise operations on 32-bit integers but javascript
+      // supports a much greater range (52-bits) of integer using standard
+      // mathematical operations.
+      // We construct a 31-bit value using bitwise operators over the 31
+      // most significant bits and then multiply by 4 (equal to a left-shift
+      // of 2) before we add the final 2 least significant bits of the
+      // timestamp (equal to an OR.)
+
+      if (ptsDtsFlags & 0xC0) {
+        pes = {}; // the PTS and DTS are not written out directly. For information
+        // on how they are encoded, see
+        // http://dvd.sourceforge.net/dvdinfo/pes-hdr.html
+
+        pes.pts = (packet[offset + 9] & 0x0E) << 27 | (packet[offset + 10] & 0xFF) << 20 | (packet[offset + 11] & 0xFE) << 12 | (packet[offset + 12] & 0xFF) << 5 | (packet[offset + 13] & 0xFE) >>> 3;
+        pes.pts *= 4; // Left shift by 2
+
+        pes.pts += (packet[offset + 13] & 0x06) >>> 1; // OR by the two LSBs
+
+        pes.dts = pes.pts;
+        if (ptsDtsFlags & 0x40) {
+          pes.dts = (packet[offset + 14] & 0x0E) << 27 | (packet[offset + 15] & 0xFF) << 20 | (packet[offset + 16] & 0xFE) << 12 | (packet[offset + 17] & 0xFF) << 5 | (packet[offset + 18] & 0xFE) >>> 3;
+          pes.dts *= 4; // Left shift by 2
+
+          pes.dts += (packet[offset + 18] & 0x06) >>> 1; // OR by the two LSBs
+        }
+      }
+
+      return pes;
+    };
+    var parseNalUnitType = function (type) {
+      switch (type) {
+        case 0x05:
+          return 'slice_layer_without_partitioning_rbsp_idr';
+        case 0x06:
+          return 'sei_rbsp';
+        case 0x07:
+          return 'seq_parameter_set_rbsp';
+        case 0x08:
+          return 'pic_parameter_set_rbsp';
+        case 0x09:
+          return 'access_unit_delimiter_rbsp';
+        default:
+          return null;
+      }
+    };
+    var videoPacketContainsKeyFrame = function (packet) {
+      var offset = 4 + parseAdaptionField(packet);
+      var frameBuffer = packet.subarray(offset);
+      var frameI = 0;
+      var frameSyncPoint = 0;
+      var foundKeyFrame = false;
+      var nalType; // advance the sync point to a NAL start, if necessary
+
+      for (; frameSyncPoint < frameBuffer.byteLength - 3; frameSyncPoint++) {
+        if (frameBuffer[frameSyncPoint + 2] === 1) {
+          // the sync point is properly aligned
+          frameI = frameSyncPoint + 5;
+          break;
+        }
+      }
+      while (frameI < frameBuffer.byteLength) {
+        // look at the current byte to determine if we've hit the end of
+        // a NAL unit boundary
+        switch (frameBuffer[frameI]) {
+          case 0:
+            // skip past non-sync sequences
+            if (frameBuffer[frameI - 1] !== 0) {
+              frameI += 2;
+              break;
+            } else if (frameBuffer[frameI - 2] !== 0) {
+              frameI++;
+              break;
+            }
+            if (frameSyncPoint + 3 !== frameI - 2) {
+              nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+              if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+                foundKeyFrame = true;
+              }
+            } // drop trailing zeroes
+
+            do {
+              frameI++;
+            } while (frameBuffer[frameI] !== 1 && frameI < frameBuffer.length);
+            frameSyncPoint = frameI - 2;
+            frameI += 3;
+            break;
+          case 1:
+            // skip past non-sync sequences
+            if (frameBuffer[frameI - 1] !== 0 || frameBuffer[frameI - 2] !== 0) {
+              frameI += 3;
+              break;
+            }
+            nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+            if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+              foundKeyFrame = true;
+            }
+            frameSyncPoint = frameI - 2;
+            frameI += 3;
+            break;
+          default:
+            // the current byte isn't a one or zero, so it cannot be part
+            // of a sync sequence
+            frameI += 3;
+            break;
+        }
+      }
+      frameBuffer = frameBuffer.subarray(frameSyncPoint);
+      frameI -= frameSyncPoint;
+      frameSyncPoint = 0; // parse the final nal
+
+      if (frameBuffer && frameBuffer.byteLength > 3) {
+        nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+        if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+          foundKeyFrame = true;
+        }
+      }
+      return foundKeyFrame;
+    };
+    var probe$1 = {
+      parseType: parseType,
+      parsePat: parsePat,
+      parsePmt: parsePmt,
+      parsePayloadUnitStartIndicator: parsePayloadUnitStartIndicator,
+      parsePesType: parsePesType,
+      parsePesTime: parsePesTime,
+      videoPacketContainsKeyFrame: videoPacketContainsKeyFrame
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Parse mpeg2 transport stream packets to extract basic timing information
+     */
+
+    var StreamTypes = streamTypes;
+    var handleRollover = timestampRolloverStream.handleRollover;
+    var probe = {};
+    probe.ts = probe$1;
+    probe.aac = utils;
+    var ONE_SECOND_IN_TS = clock$2.ONE_SECOND_IN_TS;
+    var MP2T_PACKET_LENGTH = 188,
+      // bytes
+      SYNC_BYTE = 0x47;
+    /**
+     * walks through segment data looking for pat and pmt packets to parse out
+     * program map table information
+     */
+
+    var parsePsi_ = function (bytes, pmt) {
+      var startIndex = 0,
+        endIndex = MP2T_PACKET_LENGTH,
+        packet,
+        type;
+      while (endIndex < bytes.byteLength) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pat':
+              pmt.pid = probe.ts.parsePat(packet);
+              break;
+            case 'pmt':
+              var table = probe.ts.parsePmt(packet);
+              pmt.table = pmt.table || {};
+              Object.keys(table).forEach(function (key) {
+                pmt.table[key] = table[key];
+              });
+              break;
+          }
+          startIndex += MP2T_PACKET_LENGTH;
+          endIndex += MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex++;
+        endIndex++;
+      }
+    };
+    /**
+     * walks through the segment data from the start and end to get timing information
+     * for the first and last audio pes packets
+     */
+
+    var parseAudioPes_ = function (bytes, pmt, result) {
+      var startIndex = 0,
+        endIndex = MP2T_PACKET_LENGTH,
+        packet,
+        type,
+        pesType,
+        pusi,
+        parsed;
+      var endLoop = false; // Start walking from start of segment to get first audio packet
+
+      while (endIndex <= bytes.byteLength) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && (bytes[endIndex] === SYNC_BYTE || endIndex === bytes.byteLength)) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pes':
+              pesType = probe.ts.parsePesType(packet, pmt.table);
+              pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+              if (pesType === 'audio' && pusi) {
+                parsed = probe.ts.parsePesTime(packet);
+                if (parsed) {
+                  parsed.type = 'audio';
+                  result.audio.push(parsed);
+                  endLoop = true;
+                }
+              }
+              break;
+          }
+          if (endLoop) {
+            break;
+          }
+          startIndex += MP2T_PACKET_LENGTH;
+          endIndex += MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex++;
+        endIndex++;
+      } // Start walking from end of segment to get last audio packet
+
+      endIndex = bytes.byteLength;
+      startIndex = endIndex - MP2T_PACKET_LENGTH;
+      endLoop = false;
+      while (startIndex >= 0) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && (bytes[endIndex] === SYNC_BYTE || endIndex === bytes.byteLength)) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pes':
+              pesType = probe.ts.parsePesType(packet, pmt.table);
+              pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+              if (pesType === 'audio' && pusi) {
+                parsed = probe.ts.parsePesTime(packet);
+                if (parsed) {
+                  parsed.type = 'audio';
+                  result.audio.push(parsed);
+                  endLoop = true;
+                }
+              }
+              break;
+          }
+          if (endLoop) {
+            break;
+          }
+          startIndex -= MP2T_PACKET_LENGTH;
+          endIndex -= MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex--;
+        endIndex--;
+      }
+    };
+    /**
+     * walks through the segment data from the start and end to get timing information
+     * for the first and last video pes packets as well as timing information for the first
+     * key frame.
+     */
+
+    var parseVideoPes_ = function (bytes, pmt, result) {
+      var startIndex = 0,
+        endIndex = MP2T_PACKET_LENGTH,
+        packet,
+        type,
+        pesType,
+        pusi,
+        parsed,
+        frame,
+        i,
+        pes;
+      var endLoop = false;
+      var currentFrame = {
+        data: [],
+        size: 0
+      }; // Start walking from start of segment to get first video packet
+
+      while (endIndex < bytes.byteLength) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pes':
+              pesType = probe.ts.parsePesType(packet, pmt.table);
+              pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+              if (pesType === 'video') {
+                if (pusi && !endLoop) {
+                  parsed = probe.ts.parsePesTime(packet);
+                  if (parsed) {
+                    parsed.type = 'video';
+                    result.video.push(parsed);
+                    endLoop = true;
+                  }
+                }
+                if (!result.firstKeyFrame) {
+                  if (pusi) {
+                    if (currentFrame.size !== 0) {
+                      frame = new Uint8Array(currentFrame.size);
+                      i = 0;
+                      while (currentFrame.data.length) {
+                        pes = currentFrame.data.shift();
+                        frame.set(pes, i);
+                        i += pes.byteLength;
+                      }
+                      if (probe.ts.videoPacketContainsKeyFrame(frame)) {
+                        var firstKeyFrame = probe.ts.parsePesTime(frame); // PTS/DTS may not be available. Simply *not* setting
+                        // the keyframe seems to work fine with HLS playback
+                        // and definitely preferable to a crash with TypeError...
+
+                        if (firstKeyFrame) {
+                          result.firstKeyFrame = firstKeyFrame;
+                          result.firstKeyFrame.type = 'video';
+                        } else {
+                          // eslint-disable-next-line
+                          console.warn('Failed to extract PTS/DTS from PES at first keyframe. ' + 'This could be an unusual TS segment, or else mux.js did not ' + 'parse your TS segment correctly. If you know your TS ' + 'segments do contain PTS/DTS on keyframes please file a bug ' + 'report! You can try ffprobe to double check for yourself.');
+                        }
+                      }
+                      currentFrame.size = 0;
+                    }
+                  }
+                  currentFrame.data.push(packet);
+                  currentFrame.size += packet.byteLength;
+                }
+              }
+              break;
+          }
+          if (endLoop && result.firstKeyFrame) {
+            break;
+          }
+          startIndex += MP2T_PACKET_LENGTH;
+          endIndex += MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex++;
+        endIndex++;
+      } // Start walking from end of segment to get last video packet
+
+      endIndex = bytes.byteLength;
+      startIndex = endIndex - MP2T_PACKET_LENGTH;
+      endLoop = false;
+      while (startIndex >= 0) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pes':
+              pesType = probe.ts.parsePesType(packet, pmt.table);
+              pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+              if (pesType === 'video' && pusi) {
+                parsed = probe.ts.parsePesTime(packet);
+                if (parsed) {
+                  parsed.type = 'video';
+                  result.video.push(parsed);
+                  endLoop = true;
+                }
+              }
+              break;
+          }
+          if (endLoop) {
+            break;
+          }
+          startIndex -= MP2T_PACKET_LENGTH;
+          endIndex -= MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex--;
+        endIndex--;
+      }
+    };
+    /**
+     * Adjusts the timestamp information for the segment to account for
+     * rollover and convert to seconds based on pes packet timescale (90khz clock)
+     */
+
+    var adjustTimestamp_ = function (segmentInfo, baseTimestamp) {
+      if (segmentInfo.audio && segmentInfo.audio.length) {
+        var audioBaseTimestamp = baseTimestamp;
+        if (typeof audioBaseTimestamp === 'undefined' || isNaN(audioBaseTimestamp)) {
+          audioBaseTimestamp = segmentInfo.audio[0].dts;
+        }
+        segmentInfo.audio.forEach(function (info) {
+          info.dts = handleRollover(info.dts, audioBaseTimestamp);
+          info.pts = handleRollover(info.pts, audioBaseTimestamp); // time in seconds
+
+          info.dtsTime = info.dts / ONE_SECOND_IN_TS;
+          info.ptsTime = info.pts / ONE_SECOND_IN_TS;
+        });
+      }
+      if (segmentInfo.video && segmentInfo.video.length) {
+        var videoBaseTimestamp = baseTimestamp;
+        if (typeof videoBaseTimestamp === 'undefined' || isNaN(videoBaseTimestamp)) {
+          videoBaseTimestamp = segmentInfo.video[0].dts;
+        }
+        segmentInfo.video.forEach(function (info) {
+          info.dts = handleRollover(info.dts, videoBaseTimestamp);
+          info.pts = handleRollover(info.pts, videoBaseTimestamp); // time in seconds
+
+          info.dtsTime = info.dts / ONE_SECOND_IN_TS;
+          info.ptsTime = info.pts / ONE_SECOND_IN_TS;
+        });
+        if (segmentInfo.firstKeyFrame) {
+          var frame = segmentInfo.firstKeyFrame;
+          frame.dts = handleRollover(frame.dts, videoBaseTimestamp);
+          frame.pts = handleRollover(frame.pts, videoBaseTimestamp); // time in seconds
+
+          frame.dtsTime = frame.dts / ONE_SECOND_IN_TS;
+          frame.ptsTime = frame.pts / ONE_SECOND_IN_TS;
+        }
+      }
+    };
+    /**
+     * inspects the aac data stream for start and end time information
+     */
+
+    var inspectAac_ = function (bytes) {
+      var endLoop = false,
+        audioCount = 0,
+        sampleRate = null,
+        timestamp = null,
+        frameSize = 0,
+        byteIndex = 0,
+        packet;
+      while (bytes.length - byteIndex >= 3) {
+        var type = probe.aac.parseType(bytes, byteIndex);
+        switch (type) {
+          case 'timed-metadata':
+            // Exit early because we don't have enough to parse
+            // the ID3 tag header
+            if (bytes.length - byteIndex < 10) {
+              endLoop = true;
+              break;
+            }
+            frameSize = probe.aac.parseId3TagSize(bytes, byteIndex); // Exit early if we don't have enough in the buffer
+            // to emit a full packet
+
+            if (frameSize > bytes.length) {
+              endLoop = true;
+              break;
+            }
+            if (timestamp === null) {
+              packet = bytes.subarray(byteIndex, byteIndex + frameSize);
+              timestamp = probe.aac.parseAacTimestamp(packet);
+            }
+            byteIndex += frameSize;
+            break;
+          case 'audio':
+            // Exit early because we don't have enough to parse
+            // the ADTS frame header
+            if (bytes.length - byteIndex < 7) {
+              endLoop = true;
+              break;
+            }
+            frameSize = probe.aac.parseAdtsSize(bytes, byteIndex); // Exit early if we don't have enough in the buffer
+            // to emit a full packet
+
+            if (frameSize > bytes.length) {
+              endLoop = true;
+              break;
+            }
+            if (sampleRate === null) {
+              packet = bytes.subarray(byteIndex, byteIndex + frameSize);
+              sampleRate = probe.aac.parseSampleRate(packet);
+            }
+            audioCount++;
+            byteIndex += frameSize;
+            break;
+          default:
+            byteIndex++;
+            break;
+        }
+        if (endLoop) {
+          return null;
+        }
+      }
+      if (sampleRate === null || timestamp === null) {
+        return null;
+      }
+      var audioTimescale = ONE_SECOND_IN_TS / sampleRate;
+      var result = {
+        audio: [{
+          type: 'audio',
+          dts: timestamp,
+          pts: timestamp
+        }, {
+          type: 'audio',
+          dts: timestamp + audioCount * 1024 * audioTimescale,
+          pts: timestamp + audioCount * 1024 * audioTimescale
+        }]
+      };
+      return result;
+    };
+    /**
+     * inspects the transport stream segment data for start and end time information
+     * of the audio and video tracks (when present) as well as the first key frame's
+     * start time.
+     */
+
+    var inspectTs_ = function (bytes) {
+      var pmt = {
+        pid: null,
+        table: null
+      };
+      var result = {};
+      parsePsi_(bytes, pmt);
+      for (var pid in pmt.table) {
+        if (pmt.table.hasOwnProperty(pid)) {
+          var type = pmt.table[pid];
+          switch (type) {
+            case StreamTypes.H264_STREAM_TYPE:
+              result.video = [];
+              parseVideoPes_(bytes, pmt, result);
+              if (result.video.length === 0) {
+                delete result.video;
+              }
+              break;
+            case StreamTypes.ADTS_STREAM_TYPE:
+              result.audio = [];
+              parseAudioPes_(bytes, pmt, result);
+              if (result.audio.length === 0) {
+                delete result.audio;
+              }
+              break;
+          }
+        }
+      }
+      return result;
+    };
+    /**
+     * Inspects segment byte data and returns an object with start and end timing information
+     *
+     * @param {Uint8Array} bytes The segment byte data
+     * @param {Number} baseTimestamp Relative reference timestamp used when adjusting frame
+     *  timestamps for rollover. This value must be in 90khz clock.
+     * @return {Object} Object containing start and end frame timing info of segment.
+     */
+
+    var inspect = function (bytes, baseTimestamp) {
+      var isAacData = probe.aac.isLikelyAacData(bytes);
+      var result;
+      if (isAacData) {
+        result = inspectAac_(bytes);
+      } else {
+        result = inspectTs_(bytes);
+      }
+      if (!result || !result.audio && !result.video) {
+        return null;
+      }
+      adjustTimestamp_(result, baseTimestamp);
+      return result;
+    };
+    var tsInspector = {
+      inspect: inspect,
+      parseAudioPes_: parseAudioPes_
+    };
+    /* global self */
+
+    /**
+     * Re-emits transmuxer events by converting them into messages to the
+     * world outside the worker.
+     *
+     * @param {Object} transmuxer the transmuxer to wire events on
+     * @private
+     */
+
+    const wireTransmuxerEvents = function (self, transmuxer) {
+      transmuxer.on('data', function (segment) {
+        // transfer ownership of the underlying ArrayBuffer
+        // instead of doing a copy to save memory
+        // ArrayBuffers are transferable but generic TypedArrays are not
+        // @link https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Passing_data_by_transferring_ownership_(transferable_objects)
+        const initArray = segment.initSegment;
+        segment.initSegment = {
+          data: initArray.buffer,
+          byteOffset: initArray.byteOffset,
+          byteLength: initArray.byteLength
+        };
+        const typedArray = segment.data;
+        segment.data = typedArray.buffer;
+        self.postMessage({
+          action: 'data',
+          segment,
+          byteOffset: typedArray.byteOffset,
+          byteLength: typedArray.byteLength
+        }, [segment.data]);
+      });
+      transmuxer.on('done', function (data) {
+        self.postMessage({
+          action: 'done'
+        });
+      });
+      transmuxer.on('gopInfo', function (gopInfo) {
+        self.postMessage({
+          action: 'gopInfo',
+          gopInfo
+        });
+      });
+      transmuxer.on('videoSegmentTimingInfo', function (timingInfo) {
+        const videoSegmentTimingInfo = {
+          start: {
+            decode: clock$2.videoTsToSeconds(timingInfo.start.dts),
+            presentation: clock$2.videoTsToSeconds(timingInfo.start.pts)
+          },
+          end: {
+            decode: clock$2.videoTsToSeconds(timingInfo.end.dts),
+            presentation: clock$2.videoTsToSeconds(timingInfo.end.pts)
+          },
+          baseMediaDecodeTime: clock$2.videoTsToSeconds(timingInfo.baseMediaDecodeTime)
+        };
+        if (timingInfo.prependedContentDuration) {
+          videoSegmentTimingInfo.prependedContentDuration = clock$2.videoTsToSeconds(timingInfo.prependedContentDuration);
+        }
+        self.postMessage({
+          action: 'videoSegmentTimingInfo',
+          videoSegmentTimingInfo
+        });
+      });
+      transmuxer.on('audioSegmentTimingInfo', function (timingInfo) {
+        // Note that all times for [audio/video]SegmentTimingInfo events are in video clock
+        const audioSegmentTimingInfo = {
+          start: {
+            decode: clock$2.videoTsToSeconds(timingInfo.start.dts),
+            presentation: clock$2.videoTsToSeconds(timingInfo.start.pts)
+          },
+          end: {
+            decode: clock$2.videoTsToSeconds(timingInfo.end.dts),
+            presentation: clock$2.videoTsToSeconds(timingInfo.end.pts)
+          },
+          baseMediaDecodeTime: clock$2.videoTsToSeconds(timingInfo.baseMediaDecodeTime)
+        };
+        if (timingInfo.prependedContentDuration) {
+          audioSegmentTimingInfo.prependedContentDuration = clock$2.videoTsToSeconds(timingInfo.prependedContentDuration);
+        }
+        self.postMessage({
+          action: 'audioSegmentTimingInfo',
+          audioSegmentTimingInfo
+        });
+      });
+      transmuxer.on('id3Frame', function (id3Frame) {
+        self.postMessage({
+          action: 'id3Frame',
+          id3Frame
+        });
+      });
+      transmuxer.on('caption', function (caption) {
+        self.postMessage({
+          action: 'caption',
+          caption
+        });
+      });
+      transmuxer.on('trackinfo', function (trackInfo) {
+        self.postMessage({
+          action: 'trackinfo',
+          trackInfo
+        });
+      });
+      transmuxer.on('audioTimingInfo', function (audioTimingInfo) {
+        // convert to video TS since we prioritize video time over audio
+        self.postMessage({
+          action: 'audioTimingInfo',
+          audioTimingInfo: {
+            start: clock$2.videoTsToSeconds(audioTimingInfo.start),
+            end: clock$2.videoTsToSeconds(audioTimingInfo.end)
+          }
+        });
+      });
+      transmuxer.on('videoTimingInfo', function (videoTimingInfo) {
+        self.postMessage({
+          action: 'videoTimingInfo',
+          videoTimingInfo: {
+            start: clock$2.videoTsToSeconds(videoTimingInfo.start),
+            end: clock$2.videoTsToSeconds(videoTimingInfo.end)
+          }
+        });
+      });
+      transmuxer.on('log', function (log) {
+        self.postMessage({
+          action: 'log',
+          log
+        });
+      });
+    };
+    /**
+     * All incoming messages route through this hash. If no function exists
+     * to handle an incoming message, then we ignore the message.
+     *
+     * @class MessageHandlers
+     * @param {Object} options the options to initialize with
+     */
+
+    class MessageHandlers {
+      constructor(self, options) {
+        this.options = options || {};
+        this.self = self;
+        this.init();
+      }
+      /**
+       * initialize our web worker and wire all the events.
+       */
+
+      init() {
+        if (this.transmuxer) {
+          this.transmuxer.dispose();
+        }
+        this.transmuxer = new transmuxer.Transmuxer(this.options);
+        wireTransmuxerEvents(this.self, this.transmuxer);
+      }
+      pushMp4Captions(data) {
+        if (!this.captionParser) {
+          this.captionParser = new captionParser();
+          this.captionParser.init();
+        }
+        const segment = new Uint8Array(data.data, data.byteOffset, data.byteLength);
+        const parsed = this.captionParser.parse(segment, data.trackIds, data.timescales);
+        this.self.postMessage({
+          action: 'mp4Captions',
+          captions: parsed && parsed.captions || [],
+          logs: parsed && parsed.logs || [],
+          data: segment.buffer
+        }, [segment.buffer]);
+      }
+      probeMp4StartTime({
+        timescales,
+        data
+      }) {
+        const startTime = probe$2.startTime(timescales, data);
+        this.self.postMessage({
+          action: 'probeMp4StartTime',
+          startTime,
+          data
+        }, [data.buffer]);
+      }
+      probeMp4Tracks({
+        data
+      }) {
+        const tracks = probe$2.tracks(data);
+        this.self.postMessage({
+          action: 'probeMp4Tracks',
+          tracks,
+          data
+        }, [data.buffer]);
+      }
+      /**
+       * Probes an mp4 segment for EMSG boxes containing ID3 data.
+       * https://aomediacodec.github.io/id3-emsg/
+       *
+       * @param {Uint8Array} data segment data
+       * @param {number} offset segment start time
+       * @return {Object[]} an array of ID3 frames
+       */
+
+      probeEmsgID3({
+        data,
+        offset
+      }) {
+        const id3Frames = probe$2.getEmsgID3(data, offset);
+        this.self.postMessage({
+          action: 'probeEmsgID3',
+          id3Frames,
+          emsgData: data
+        }, [data.buffer]);
+      }
+      /**
+       * Probe an mpeg2-ts segment to determine the start time of the segment in it's
+       * internal "media time," as well as whether it contains video and/or audio.
+       *
+       * @private
+       * @param {Uint8Array} bytes - segment bytes
+       * @param {number} baseStartTime
+       *        Relative reference timestamp used when adjusting frame timestamps for rollover.
+       *        This value should be in seconds, as it's converted to a 90khz clock within the
+       *        function body.
+       * @return {Object} The start time of the current segment in "media time" as well as
+       *                  whether it contains video and/or audio
+       */
+
+      probeTs({
+        data,
+        baseStartTime
+      }) {
+        const tsStartTime = typeof baseStartTime === 'number' && !isNaN(baseStartTime) ? baseStartTime * clock$2.ONE_SECOND_IN_TS : void 0;
+        const timeInfo = tsInspector.inspect(data, tsStartTime);
+        let result = null;
+        if (timeInfo) {
+          result = {
+            // each type's time info comes back as an array of 2 times, start and end
+            hasVideo: timeInfo.video && timeInfo.video.length === 2 || false,
+            hasAudio: timeInfo.audio && timeInfo.audio.length === 2 || false
+          };
+          if (result.hasVideo) {
+            result.videoStart = timeInfo.video[0].ptsTime;
+          }
+          if (result.hasAudio) {
+            result.audioStart = timeInfo.audio[0].ptsTime;
+          }
+        }
+        this.self.postMessage({
+          action: 'probeTs',
+          result,
+          data
+        }, [data.buffer]);
+      }
+      clearAllMp4Captions() {
+        if (this.captionParser) {
+          this.captionParser.clearAllCaptions();
+        }
+      }
+      clearParsedMp4Captions() {
+        if (this.captionParser) {
+          this.captionParser.clearParsedCaptions();
+        }
+      }
+      /**
+       * Adds data (a ts segment) to the start of the transmuxer pipeline for
+       * processing.
+       *
+       * @param {ArrayBuffer} data data to push into the muxer
+       */
+
+      push(data) {
+        // Cast array buffer to correct type for transmuxer
+        const segment = new Uint8Array(data.data, data.byteOffset, data.byteLength);
+        this.transmuxer.push(segment);
+      }
+      /**
+       * Recreate the transmuxer so that the next segment added via `push`
+       * start with a fresh transmuxer.
+       */
+
+      reset() {
+        this.transmuxer.reset();
+      }
+      /**
+       * Set the value that will be used as the `baseMediaDecodeTime` time for the
+       * next segment pushed in. Subsequent segments will have their `baseMediaDecodeTime`
+       * set relative to the first based on the PTS values.
+       *
+       * @param {Object} data used to set the timestamp offset in the muxer
+       */
+
+      setTimestampOffset(data) {
+        const timestampOffset = data.timestampOffset || 0;
+        this.transmuxer.setBaseMediaDecodeTime(Math.round(clock$2.secondsToVideoTs(timestampOffset)));
+      }
+      setAudioAppendStart(data) {
+        this.transmuxer.setAudioAppendStart(Math.ceil(clock$2.secondsToVideoTs(data.appendStart)));
+      }
+      setRemux(data) {
+        this.transmuxer.setRemux(data.remux);
+      }
+      /**
+       * Forces the pipeline to finish processing the last segment and emit it's
+       * results.
+       *
+       * @param {Object} data event data, not really used
+       */
+
+      flush(data) {
+        this.transmuxer.flush(); // transmuxed done action is fired after both audio/video pipelines are flushed
+
+        self.postMessage({
+          action: 'done',
+          type: 'transmuxed'
+        });
+      }
+      endTimeline() {
+        this.transmuxer.endTimeline(); // transmuxed endedtimeline action is fired after both audio/video pipelines end their
+        // timelines
+
+        self.postMessage({
+          action: 'endedtimeline',
+          type: 'transmuxed'
+        });
+      }
+      alignGopsWith(data) {
+        this.transmuxer.alignGopsWith(data.gopsToAlignWith.slice());
+      }
+    }
+    /**
+     * Our web worker interface so that things can talk to mux.js
+     * that will be running in a web worker. the scope is passed to this by
+     * webworkify.
+     *
+     * @param {Object} self the scope for the web worker
+     */
+
+    self.onmessage = function (event) {
+      if (event.data.action === 'init' && event.data.options) {
+        this.messageHandlers = new MessageHandlers(self, event.data.options);
+        return;
+      }
+      if (!this.messageHandlers) {
+        this.messageHandlers = new MessageHandlers(self);
+      }
+      if (event.data && event.data.action && event.data.action !== 'init') {
+        if (this.messageHandlers[event.data.action]) {
+          this.messageHandlers[event.data.action](event.data);
+        }
+      }
+    };
+  }));
+  var TransmuxWorker = factory(workerCode$1);
+  /* rollup-plugin-worker-factory end for worker!/home/runner/work/http-streaming/http-streaming/src/transmuxer-worker.js */
+
+  const handleData_ = (event, transmuxedData, callback) => {
+    const {
+      type,
+      initSegment,
+      captions,
+      captionStreams,
+      metadata,
+      videoFrameDtsTime,
+      videoFramePtsTime
+    } = event.data.segment;
+    transmuxedData.buffer.push({
+      captions,
+      captionStreams,
+      metadata
+    });
+    const boxes = event.data.segment.boxes || {
+      data: event.data.segment.data
+    };
+    const result = {
+      type,
+      // cast ArrayBuffer to TypedArray
+      data: new Uint8Array(boxes.data, boxes.data.byteOffset, boxes.data.byteLength),
+      initSegment: new Uint8Array(initSegment.data, initSegment.byteOffset, initSegment.byteLength)
+    };
+    if (typeof videoFrameDtsTime !== 'undefined') {
+      result.videoFrameDtsTime = videoFrameDtsTime;
+    }
+    if (typeof videoFramePtsTime !== 'undefined') {
+      result.videoFramePtsTime = videoFramePtsTime;
+    }
+    callback(result);
+  };
+  const handleDone_ = ({
+    transmuxedData,
+    callback
+  }) => {
+    // Previously we only returned data on data events,
+    // not on done events. Clear out the buffer to keep that consistent.
+    transmuxedData.buffer = []; // all buffers should have been flushed from the muxer, so start processing anything we
+    // have received
+
+    callback(transmuxedData);
+  };
+  const handleGopInfo_ = (event, transmuxedData) => {
+    transmuxedData.gopInfo = event.data.gopInfo;
+  };
+  const processTransmux = options => {
+    const {
+      transmuxer,
+      bytes,
+      audioAppendStart,
+      gopsToAlignWith,
+      remux,
+      onData,
+      onTrackInfo,
+      onAudioTimingInfo,
+      onVideoTimingInfo,
+      onVideoSegmentTimingInfo,
+      onAudioSegmentTimingInfo,
+      onId3,
+      onCaptions,
+      onDone,
+      onEndedTimeline,
+      onTransmuxerLog,
+      isEndOfTimeline
+    } = options;
+    const transmuxedData = {
+      buffer: []
+    };
+    let waitForEndedTimelineEvent = isEndOfTimeline;
+    const handleMessage = event => {
+      if (transmuxer.currentTransmux !== options) {
+        // disposed
+        return;
+      }
+      if (event.data.action === 'data') {
+        handleData_(event, transmuxedData, onData);
+      }
+      if (event.data.action === 'trackinfo') {
+        onTrackInfo(event.data.trackInfo);
+      }
+      if (event.data.action === 'gopInfo') {
+        handleGopInfo_(event, transmuxedData);
+      }
+      if (event.data.action === 'audioTimingInfo') {
+        onAudioTimingInfo(event.data.audioTimingInfo);
+      }
+      if (event.data.action === 'videoTimingInfo') {
+        onVideoTimingInfo(event.data.videoTimingInfo);
+      }
+      if (event.data.action === 'videoSegmentTimingInfo') {
+        onVideoSegmentTimingInfo(event.data.videoSegmentTimingInfo);
+      }
+      if (event.data.action === 'audioSegmentTimingInfo') {
+        onAudioSegmentTimingInfo(event.data.audioSegmentTimingInfo);
+      }
+      if (event.data.action === 'id3Frame') {
+        onId3([event.data.id3Frame], event.data.id3Frame.dispatchType);
+      }
+      if (event.data.action === 'caption') {
+        onCaptions(event.data.caption);
+      }
+      if (event.data.action === 'endedtimeline') {
+        waitForEndedTimelineEvent = false;
+        onEndedTimeline();
+      }
+      if (event.data.action === 'log') {
+        onTransmuxerLog(event.data.log);
+      } // wait for the transmuxed event since we may have audio and video
+
+      if (event.data.type !== 'transmuxed') {
+        return;
+      } // If the "endedtimeline" event has not yet fired, and this segment represents the end
+      // of a timeline, that means there may still be data events before the segment
+      // processing can be considerred complete. In that case, the final event should be
+      // an "endedtimeline" event with the type "transmuxed."
+
+      if (waitForEndedTimelineEvent) {
+        return;
+      }
+      transmuxer.onmessage = null;
+      handleDone_({
+        transmuxedData,
+        callback: onDone
+      });
+      /* eslint-disable no-use-before-define */
+
+      dequeue(transmuxer);
+      /* eslint-enable */
+    };
+
+    transmuxer.onmessage = handleMessage;
+    if (audioAppendStart) {
+      transmuxer.postMessage({
+        action: 'setAudioAppendStart',
+        appendStart: audioAppendStart
+      });
+    } // allow empty arrays to be passed to clear out GOPs
+
+    if (Array.isArray(gopsToAlignWith)) {
+      transmuxer.postMessage({
+        action: 'alignGopsWith',
+        gopsToAlignWith
+      });
+    }
+    if (typeof remux !== 'undefined') {
+      transmuxer.postMessage({
+        action: 'setRemux',
+        remux
+      });
+    }
+    if (bytes.byteLength) {
+      const buffer = bytes instanceof ArrayBuffer ? bytes : bytes.buffer;
+      const byteOffset = bytes instanceof ArrayBuffer ? 0 : bytes.byteOffset;
+      transmuxer.postMessage({
+        action: 'push',
+        // Send the typed-array of data as an ArrayBuffer so that
+        // it can be sent as a "Transferable" and avoid the costly
+        // memory copy
+        data: buffer,
+        // To recreate the original typed-array, we need information
+        // about what portion of the ArrayBuffer it was a view into
+        byteOffset,
+        byteLength: bytes.byteLength
+      }, [buffer]);
+    }
+    if (isEndOfTimeline) {
+      transmuxer.postMessage({
+        action: 'endTimeline'
+      });
+    } // even if we didn't push any bytes, we have to make sure we flush in case we reached
+    // the end of the segment
+
+    transmuxer.postMessage({
+      action: 'flush'
+    });
+  };
+  const dequeue = transmuxer => {
+    transmuxer.currentTransmux = null;
+    if (transmuxer.transmuxQueue.length) {
+      transmuxer.currentTransmux = transmuxer.transmuxQueue.shift();
+      if (typeof transmuxer.currentTransmux === 'function') {
+        transmuxer.currentTransmux();
+      } else {
+        processTransmux(transmuxer.currentTransmux);
+      }
+    }
+  };
+  const processAction = (transmuxer, action) => {
+    transmuxer.postMessage({
+      action
+    });
+    dequeue(transmuxer);
+  };
+  const enqueueAction = (action, transmuxer) => {
+    if (!transmuxer.currentTransmux) {
+      transmuxer.currentTransmux = action;
+      processAction(transmuxer, action);
+      return;
+    }
+    transmuxer.transmuxQueue.push(processAction.bind(null, transmuxer, action));
+  };
+  const reset = transmuxer => {
+    enqueueAction('reset', transmuxer);
+  };
+  const endTimeline = transmuxer => {
+    enqueueAction('endTimeline', transmuxer);
+  };
+  const transmux = options => {
+    if (!options.transmuxer.currentTransmux) {
+      options.transmuxer.currentTransmux = options;
+      processTransmux(options);
+      return;
+    }
+    options.transmuxer.transmuxQueue.push(options);
+  };
+  const createTransmuxer = options => {
+    const transmuxer = new TransmuxWorker();
+    transmuxer.currentTransmux = null;
+    transmuxer.transmuxQueue = [];
+    const term = transmuxer.terminate;
+    transmuxer.terminate = () => {
+      transmuxer.currentTransmux = null;
+      transmuxer.transmuxQueue.length = 0;
+      return term.call(transmuxer);
+    };
+    transmuxer.postMessage({
+      action: 'init',
+      options
+    });
+    return transmuxer;
+  };
+  var segmentTransmuxer = {
+    reset,
+    endTimeline,
+    transmux,
+    createTransmuxer
+  };
+  const workerCallback = function (options) {
+    const transmuxer = options.transmuxer;
+    const endAction = options.endAction || options.action;
+    const callback = options.callback;
+    const message = _extends$1({}, options, {
+      endAction: null,
+      transmuxer: null,
+      callback: null
+    });
+    const listenForEndEvent = event => {
+      if (event.data.action !== endAction) {
+        return;
+      }
+      transmuxer.removeEventListener('message', listenForEndEvent); // transfer ownership of bytes back to us.
+
+      if (event.data.data) {
+        event.data.data = new Uint8Array(event.data.data, options.byteOffset || 0, options.byteLength || event.data.data.byteLength);
+        if (options.data) {
+          options.data = event.data.data;
+        }
+      }
+      callback(event.data);
+    };
+    transmuxer.addEventListener('message', listenForEndEvent);
+    if (options.data) {
+      const isArrayBuffer = options.data instanceof ArrayBuffer;
+      message.byteOffset = isArrayBuffer ? 0 : options.data.byteOffset;
+      message.byteLength = options.data.byteLength;
+      const transfers = [isArrayBuffer ? options.data : options.data.buffer];
+      transmuxer.postMessage(message, transfers);
+    } else {
+      transmuxer.postMessage(message);
+    }
+  };
+  const REQUEST_ERRORS = {
+    FAILURE: 2,
+    TIMEOUT: -101,
+    ABORTED: -102
+  };
+  /**
+   * Abort all requests
+   *
+   * @param {Object} activeXhrs - an object that tracks all XHR requests
+   */
+
+  const abortAll = activeXhrs => {
+    activeXhrs.forEach(xhr => {
+      xhr.abort();
+    });
+  };
+  /**
+   * Gather important bandwidth stats once a request has completed
+   *
+   * @param {Object} request - the XHR request from which to gather stats
+   */
+
+  const getRequestStats = request => {
+    return {
+      bandwidth: request.bandwidth,
+      bytesReceived: request.bytesReceived || 0,
+      roundTripTime: request.roundTripTime || 0
+    };
+  };
+  /**
+   * If possible gather bandwidth stats as a request is in
+   * progress
+   *
+   * @param {Event} progressEvent - an event object from an XHR's progress event
+   */
+
+  const getProgressStats = progressEvent => {
+    const request = progressEvent.target;
+    const roundTripTime = Date.now() - request.requestTime;
+    const stats = {
+      bandwidth: Infinity,
+      bytesReceived: 0,
+      roundTripTime: roundTripTime || 0
+    };
+    stats.bytesReceived = progressEvent.loaded; // This can result in Infinity if stats.roundTripTime is 0 but that is ok
+    // because we should only use bandwidth stats on progress to determine when
+    // abort a request early due to insufficient bandwidth
+
+    stats.bandwidth = Math.floor(stats.bytesReceived / stats.roundTripTime * 8 * 1000);
+    return stats;
+  };
+  /**
+   * Handle all error conditions in one place and return an object
+   * with all the information
+   *
+   * @param {Error|null} error - if non-null signals an error occured with the XHR
+   * @param {Object} request -  the XHR request that possibly generated the error
+   */
+
+  const handleErrors = (error, request) => {
+    if (request.timedout) {
+      return {
+        status: request.status,
+        message: 'HLS request timed-out at URL: ' + request.uri,
+        code: REQUEST_ERRORS.TIMEOUT,
+        xhr: request
+      };
+    }
+    if (request.aborted) {
+      return {
+        status: request.status,
+        message: 'HLS request aborted at URL: ' + request.uri,
+        code: REQUEST_ERRORS.ABORTED,
+        xhr: request
+      };
+    }
+    if (error) {
+      return {
+        status: request.status,
+        message: 'HLS request errored at URL: ' + request.uri,
+        code: REQUEST_ERRORS.FAILURE,
+        xhr: request
+      };
+    }
+    if (request.responseType === 'arraybuffer' && request.response.byteLength === 0) {
+      return {
+        status: request.status,
+        message: 'Empty HLS response at URL: ' + request.uri,
+        code: REQUEST_ERRORS.FAILURE,
+        xhr: request
+      };
+    }
+    return null;
+  };
+  /**
+   * Handle responses for key data and convert the key data to the correct format
+   * for the decryption step later
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Array} objects - objects to add the key bytes to.
+   * @param {Function} finishProcessingFn - a callback to execute to continue processing
+   *                                        this request
+   */
+
+  const handleKeyResponse = (segment, objects, finishProcessingFn) => (error, request) => {
+    const response = request.response;
+    const errorObj = handleErrors(error, request);
+    if (errorObj) {
+      return finishProcessingFn(errorObj, segment);
+    }
+    if (response.byteLength !== 16) {
+      return finishProcessingFn({
+        status: request.status,
+        message: 'Invalid HLS key at URL: ' + request.uri,
+        code: REQUEST_ERRORS.FAILURE,
+        xhr: request
+      }, segment);
+    }
+    const view = new DataView(response);
+    const bytes = new Uint32Array([view.getUint32(0), view.getUint32(4), view.getUint32(8), view.getUint32(12)]);
+    for (let i = 0; i < objects.length; i++) {
+      objects[i].bytes = bytes;
+    }
+    return finishProcessingFn(null, segment);
+  };
+  const parseInitSegment = (segment, callback) => {
+    const type = detectContainerForBytes(segment.map.bytes); // TODO: We should also handle ts init segments here, but we
+    // only know how to parse mp4 init segments at the moment
+
+    if (type !== 'mp4') {
+      const uri = segment.map.resolvedUri || segment.map.uri;
+      const mediaType = type || 'unknown';
+      return callback({
+        internal: true,
+        message: `Found unsupported ${mediaType} container for initialization segment at URL: ${uri}`,
+        code: REQUEST_ERRORS.FAILURE,
+        metadata: {
+          errorType: videojs.Error.UnsupportedMediaInitialization,
+          mediaType
+        }
+      });
+    }
+    workerCallback({
+      action: 'probeMp4Tracks',
+      data: segment.map.bytes,
+      transmuxer: segment.transmuxer,
+      callback: ({
+        tracks,
+        data
+      }) => {
+        // transfer bytes back to us
+        segment.map.bytes = data;
+        tracks.forEach(function (track) {
+          segment.map.tracks = segment.map.tracks || {}; // only support one track of each type for now
+
+          if (segment.map.tracks[track.type]) {
+            return;
+          }
+          segment.map.tracks[track.type] = track;
+          if (typeof track.id === 'number' && track.timescale) {
+            segment.map.timescales = segment.map.timescales || {};
+            segment.map.timescales[track.id] = track.timescale;
+          }
+        });
+        return callback(null);
+      }
+    });
+  };
+  /**
+   * Handle init-segment responses
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} finishProcessingFn - a callback to execute to continue processing
+   *                                        this request
+   */
+
+  const handleInitSegmentResponse = ({
+    segment,
+    finishProcessingFn
+  }) => (error, request) => {
+    const errorObj = handleErrors(error, request);
+    if (errorObj) {
+      return finishProcessingFn(errorObj, segment);
+    }
+    const bytes = new Uint8Array(request.response); // init segment is encypted, we will have to wait
+    // until the key request is done to decrypt.
+
+    if (segment.map.key) {
+      segment.map.encryptedBytes = bytes;
+      return finishProcessingFn(null, segment);
+    }
+    segment.map.bytes = bytes;
+    parseInitSegment(segment, function (parseError) {
+      if (parseError) {
+        parseError.xhr = request;
+        parseError.status = request.status;
+        return finishProcessingFn(parseError, segment);
+      }
+      finishProcessingFn(null, segment);
+    });
+  };
+  /**
+   * Response handler for segment-requests being sure to set the correct
+   * property depending on whether the segment is encryped or not
+   * Also records and keeps track of stats that are used for ABR purposes
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} finishProcessingFn - a callback to execute to continue processing
+   *                                        this request
+   */
+
+  const handleSegmentResponse = ({
+    segment,
+    finishProcessingFn,
+    responseType
+  }) => (error, request) => {
+    const errorObj = handleErrors(error, request);
+    if (errorObj) {
+      return finishProcessingFn(errorObj, segment);
+    }
+    const newBytes =
+    // although responseText "should" exist, this guard serves to prevent an error being
+    // thrown for two primary cases:
+    // 1. the mime type override stops working, or is not implemented for a specific
+    //    browser
+    // 2. when using mock XHR libraries like sinon that do not allow the override behavior
+    responseType === 'arraybuffer' || !request.responseText ? request.response : stringToArrayBuffer(request.responseText.substring(segment.lastReachedChar || 0));
+    segment.stats = getRequestStats(request);
+    if (segment.key) {
+      segment.encryptedBytes = new Uint8Array(newBytes);
+    } else {
+      segment.bytes = new Uint8Array(newBytes);
+    }
+    return finishProcessingFn(null, segment);
+  };
+  const transmuxAndNotify = ({
+    segment,
+    bytes,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    const fmp4Tracks = segment.map && segment.map.tracks || {};
+    const isMuxed = Boolean(fmp4Tracks.audio && fmp4Tracks.video); // Keep references to each function so we can null them out after we're done with them.
+    // One reason for this is that in the case of full segments, we want to trust start
+    // times from the probe, rather than the transmuxer.
+
+    let audioStartFn = timingInfoFn.bind(null, segment, 'audio', 'start');
+    const audioEndFn = timingInfoFn.bind(null, segment, 'audio', 'end');
+    let videoStartFn = timingInfoFn.bind(null, segment, 'video', 'start');
+    const videoEndFn = timingInfoFn.bind(null, segment, 'video', 'end');
+    const finish = () => transmux({
+      bytes,
+      transmuxer: segment.transmuxer,
+      audioAppendStart: segment.audioAppendStart,
+      gopsToAlignWith: segment.gopsToAlignWith,
+      remux: isMuxed,
+      onData: result => {
+        result.type = result.type === 'combined' ? 'video' : result.type;
+        dataFn(segment, result);
+      },
+      onTrackInfo: trackInfo => {
+        if (trackInfoFn) {
+          if (isMuxed) {
+            trackInfo.isMuxed = true;
+          }
+          trackInfoFn(segment, trackInfo);
+        }
+      },
+      onAudioTimingInfo: audioTimingInfo => {
+        // we only want the first start value we encounter
+        if (audioStartFn && typeof audioTimingInfo.start !== 'undefined') {
+          audioStartFn(audioTimingInfo.start);
+          audioStartFn = null;
+        } // we want to continually update the end time
+
+        if (audioEndFn && typeof audioTimingInfo.end !== 'undefined') {
+          audioEndFn(audioTimingInfo.end);
+        }
+      },
+      onVideoTimingInfo: videoTimingInfo => {
+        // we only want the first start value we encounter
+        if (videoStartFn && typeof videoTimingInfo.start !== 'undefined') {
+          videoStartFn(videoTimingInfo.start);
+          videoStartFn = null;
+        } // we want to continually update the end time
+
+        if (videoEndFn && typeof videoTimingInfo.end !== 'undefined') {
+          videoEndFn(videoTimingInfo.end);
+        }
+      },
+      onVideoSegmentTimingInfo: videoSegmentTimingInfo => {
+        videoSegmentTimingInfoFn(videoSegmentTimingInfo);
+      },
+      onAudioSegmentTimingInfo: audioSegmentTimingInfo => {
+        audioSegmentTimingInfoFn(audioSegmentTimingInfo);
+      },
+      onId3: (id3Frames, dispatchType) => {
+        id3Fn(segment, id3Frames, dispatchType);
+      },
+      onCaptions: captions => {
+        captionsFn(segment, [captions]);
+      },
+      isEndOfTimeline,
+      onEndedTimeline: () => {
+        endedTimelineFn();
+      },
+      onTransmuxerLog,
+      onDone: result => {
+        if (!doneFn) {
+          return;
+        }
+        result.type = result.type === 'combined' ? 'video' : result.type;
+        doneFn(null, segment, result);
+      }
+    }); // In the transmuxer, we don't yet have the ability to extract a "proper" start time.
+    // Meaning cached frame data may corrupt our notion of where this segment
+    // really starts. To get around this, probe for the info needed.
+
+    workerCallback({
+      action: 'probeTs',
+      transmuxer: segment.transmuxer,
+      data: bytes,
+      baseStartTime: segment.baseStartTime,
+      callback: data => {
+        segment.bytes = bytes = data.data;
+        const probeResult = data.result;
+        if (probeResult) {
+          trackInfoFn(segment, {
+            hasAudio: probeResult.hasAudio,
+            hasVideo: probeResult.hasVideo,
+            isMuxed
+          });
+          trackInfoFn = null;
+        }
+        finish();
+      }
+    });
+  };
+  const handleSegmentBytes = ({
+    segment,
+    bytes,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    let bytesAsUint8Array = new Uint8Array(bytes); // TODO:
+    // We should have a handler that fetches the number of bytes required
+    // to check if something is fmp4. This will allow us to save bandwidth
+    // because we can only exclude a playlist and abort requests
+    // by codec after trackinfo triggers.
+
+    if (isLikelyFmp4MediaSegment(bytesAsUint8Array)) {
+      segment.isFmp4 = true;
+      const {
+        tracks
+      } = segment.map;
+      const trackInfo = {
+        isFmp4: true,
+        hasVideo: !!tracks.video,
+        hasAudio: !!tracks.audio
+      }; // if we have a audio track, with a codec that is not set to
+      // encrypted audio
+
+      if (tracks.audio && tracks.audio.codec && tracks.audio.codec !== 'enca') {
+        trackInfo.audioCodec = tracks.audio.codec;
+      } // if we have a video track, with a codec that is not set to
+      // encrypted video
+
+      if (tracks.video && tracks.video.codec && tracks.video.codec !== 'encv') {
+        trackInfo.videoCodec = tracks.video.codec;
+      }
+      if (tracks.video && tracks.audio) {
+        trackInfo.isMuxed = true;
+      } // since we don't support appending fmp4 data on progress, we know we have the full
+      // segment here
+
+      trackInfoFn(segment, trackInfo); // The probe doesn't provide the segment end time, so only callback with the start
+      // time. The end time can be roughly calculated by the receiver using the duration.
+      //
+      // Note that the start time returned by the probe reflects the baseMediaDecodeTime, as
+      // that is the true start of the segment (where the playback engine should begin
+      // decoding).
+
+      const finishLoading = (captions, id3Frames) => {
+        // if the track still has audio at this point it is only possible
+        // for it to be audio only. See `tracks.video && tracks.audio` if statement
+        // above.
+        // we make sure to use segment.bytes here as that
+        dataFn(segment, {
+          data: bytesAsUint8Array,
+          type: trackInfo.hasAudio && !trackInfo.isMuxed ? 'audio' : 'video'
+        });
+        if (id3Frames && id3Frames.length) {
+          id3Fn(segment, id3Frames);
+        }
+        if (captions && captions.length) {
+          captionsFn(segment, captions);
+        }
+        doneFn(null, segment, {});
+      };
+      workerCallback({
+        action: 'probeMp4StartTime',
+        timescales: segment.map.timescales,
+        data: bytesAsUint8Array,
+        transmuxer: segment.transmuxer,
+        callback: ({
+          data,
+          startTime
+        }) => {
+          // transfer bytes back to us
+          bytes = data.buffer;
+          segment.bytes = bytesAsUint8Array = data;
+          if (trackInfo.hasAudio && !trackInfo.isMuxed) {
+            timingInfoFn(segment, 'audio', 'start', startTime);
+          }
+          if (trackInfo.hasVideo) {
+            timingInfoFn(segment, 'video', 'start', startTime);
+          }
+          workerCallback({
+            action: 'probeEmsgID3',
+            data: bytesAsUint8Array,
+            transmuxer: segment.transmuxer,
+            offset: startTime,
+            callback: ({
+              emsgData,
+              id3Frames
+            }) => {
+              // transfer bytes back to us
+              bytes = emsgData.buffer;
+              segment.bytes = bytesAsUint8Array = emsgData; // Run through the CaptionParser in case there are captions.
+              // Initialize CaptionParser if it hasn't been yet
+
+              if (!tracks.video || !emsgData.byteLength || !segment.transmuxer) {
+                finishLoading(undefined, id3Frames);
+                return;
+              }
+              workerCallback({
+                action: 'pushMp4Captions',
+                endAction: 'mp4Captions',
+                transmuxer: segment.transmuxer,
+                data: bytesAsUint8Array,
+                timescales: segment.map.timescales,
+                trackIds: [tracks.video.id],
+                callback: message => {
+                  // transfer bytes back to us
+                  bytes = message.data.buffer;
+                  segment.bytes = bytesAsUint8Array = message.data;
+                  message.logs.forEach(function (log) {
+                    onTransmuxerLog(merge(log, {
+                      stream: 'mp4CaptionParser'
+                    }));
+                  });
+                  finishLoading(message.captions, id3Frames);
+                }
+              });
+            }
+          });
+        }
+      });
+      return;
+    } // VTT or other segments that don't need processing
+
+    if (!segment.transmuxer) {
+      doneFn(null, segment, {});
+      return;
+    }
+    if (typeof segment.container === 'undefined') {
+      segment.container = detectContainerForBytes(bytesAsUint8Array);
+    }
+    if (segment.container !== 'ts' && segment.container !== 'aac') {
+      trackInfoFn(segment, {
+        hasAudio: false,
+        hasVideo: false
+      });
+      doneFn(null, segment, {});
+      return;
+    } // ts or aac
+
+    transmuxAndNotify({
+      segment,
+      bytes,
+      trackInfoFn,
+      timingInfoFn,
+      videoSegmentTimingInfoFn,
+      audioSegmentTimingInfoFn,
+      id3Fn,
+      captionsFn,
+      isEndOfTimeline,
+      endedTimelineFn,
+      dataFn,
+      doneFn,
+      onTransmuxerLog
+    });
+  };
+  const decrypt = function ({
+    id,
+    key,
+    encryptedBytes,
+    decryptionWorker
+  }, callback) {
+    const decryptionHandler = event => {
+      if (event.data.source === id) {
+        decryptionWorker.removeEventListener('message', decryptionHandler);
+        const decrypted = event.data.decrypted;
+        callback(new Uint8Array(decrypted.bytes, decrypted.byteOffset, decrypted.byteLength));
+      }
+    };
+    decryptionWorker.addEventListener('message', decryptionHandler);
+    let keyBytes;
+    if (key.bytes.slice) {
+      keyBytes = key.bytes.slice();
+    } else {
+      keyBytes = new Uint32Array(Array.prototype.slice.call(key.bytes));
+    } // incrementally decrypt the bytes
+
+    decryptionWorker.postMessage(createTransferableMessage({
+      source: id,
+      encrypted: encryptedBytes,
+      key: keyBytes,
+      iv: key.iv
+    }), [encryptedBytes.buffer, keyBytes.buffer]);
+  };
+  /**
+   * Decrypt the segment via the decryption web worker
+   *
+   * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128 decryption
+   *                                       routines
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} trackInfoFn - a callback that receives track info
+   * @param {Function} timingInfoFn - a callback that receives timing info
+   * @param {Function} videoSegmentTimingInfoFn
+   *                   a callback that receives video timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} audioSegmentTimingInfoFn
+   *                   a callback that receives audio timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {boolean}  isEndOfTimeline
+   *                   true if this segment represents the last segment in a timeline
+   * @param {Function} endedTimelineFn
+   *                   a callback made when a timeline is ended, will only be called if
+   *                   isEndOfTimeline is true
+   * @param {Function} dataFn - a callback that is executed when segment bytes are available
+   *                            and ready to use
+   * @param {Function} doneFn - a callback that is executed after decryption has completed
+   */
+
+  const decryptSegment = ({
+    decryptionWorker,
+    segment,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    decrypt({
+      id: segment.requestId,
+      key: segment.key,
+      encryptedBytes: segment.encryptedBytes,
+      decryptionWorker
+    }, decryptedBytes => {
+      segment.bytes = decryptedBytes;
+      handleSegmentBytes({
+        segment,
+        bytes: segment.bytes,
+        trackInfoFn,
+        timingInfoFn,
+        videoSegmentTimingInfoFn,
+        audioSegmentTimingInfoFn,
+        id3Fn,
+        captionsFn,
+        isEndOfTimeline,
+        endedTimelineFn,
+        dataFn,
+        doneFn,
+        onTransmuxerLog
+      });
+    });
+  };
+  /**
+   * This function waits for all XHRs to finish (with either success or failure)
+   * before continueing processing via it's callback. The function gathers errors
+   * from each request into a single errors array so that the error status for
+   * each request can be examined later.
+   *
+   * @param {Object} activeXhrs - an object that tracks all XHR requests
+   * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128 decryption
+   *                                       routines
+   * @param {Function} trackInfoFn - a callback that receives track info
+   * @param {Function} timingInfoFn - a callback that receives timing info
+   * @param {Function} videoSegmentTimingInfoFn
+   *                   a callback that receives video timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} audioSegmentTimingInfoFn
+   *                   a callback that receives audio timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} id3Fn - a callback that receives ID3 metadata
+   * @param {Function} captionsFn - a callback that receives captions
+   * @param {boolean}  isEndOfTimeline
+   *                   true if this segment represents the last segment in a timeline
+   * @param {Function} endedTimelineFn
+   *                   a callback made when a timeline is ended, will only be called if
+   *                   isEndOfTimeline is true
+   * @param {Function} dataFn - a callback that is executed when segment bytes are available
+   *                            and ready to use
+   * @param {Function} doneFn - a callback that is executed after all resources have been
+   *                            downloaded and any decryption completed
+   */
+
+  const waitForCompletion = ({
+    activeXhrs,
+    decryptionWorker,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    let count = 0;
+    let didError = false;
+    return (error, segment) => {
+      if (didError) {
+        return;
+      }
+      if (error) {
+        didError = true; // If there are errors, we have to abort any outstanding requests
+
+        abortAll(activeXhrs); // Even though the requests above are aborted, and in theory we could wait until we
+        // handle the aborted events from those requests, there are some cases where we may
+        // never get an aborted event. For instance, if the network connection is lost and
+        // there were two requests, the first may have triggered an error immediately, while
+        // the second request remains unsent. In that case, the aborted algorithm will not
+        // trigger an abort: see https://xhr.spec.whatwg.org/#the-abort()-method
+        //
+        // We also can't rely on the ready state of the XHR, since the request that
+        // triggered the connection error may also show as a ready state of 0 (unsent).
+        // Therefore, we have to finish this group of requests immediately after the first
+        // seen error.
+
+        return doneFn(error, segment);
+      }
+      count += 1;
+      if (count === activeXhrs.length) {
+        const segmentFinish = function () {
+          if (segment.encryptedBytes) {
+            return decryptSegment({
+              decryptionWorker,
+              segment,
+              trackInfoFn,
+              timingInfoFn,
+              videoSegmentTimingInfoFn,
+              audioSegmentTimingInfoFn,
+              id3Fn,
+              captionsFn,
+              isEndOfTimeline,
+              endedTimelineFn,
+              dataFn,
+              doneFn,
+              onTransmuxerLog
+            });
+          } // Otherwise, everything is ready just continue
+
+          handleSegmentBytes({
+            segment,
+            bytes: segment.bytes,
+            trackInfoFn,
+            timingInfoFn,
+            videoSegmentTimingInfoFn,
+            audioSegmentTimingInfoFn,
+            id3Fn,
+            captionsFn,
+            isEndOfTimeline,
+            endedTimelineFn,
+            dataFn,
+            doneFn,
+            onTransmuxerLog
+          });
+        }; // Keep track of when *all* of the requests have completed
+
+        segment.endOfAllRequests = Date.now();
+        if (segment.map && segment.map.encryptedBytes && !segment.map.bytes) {
+          return decrypt({
+            decryptionWorker,
+            // add -init to the "id" to differentiate between segment
+            // and init segment decryption, just in case they happen
+            // at the same time at some point in the future.
+            id: segment.requestId + '-init',
+            encryptedBytes: segment.map.encryptedBytes,
+            key: segment.map.key
+          }, decryptedBytes => {
+            segment.map.bytes = decryptedBytes;
+            parseInitSegment(segment, parseError => {
+              if (parseError) {
+                abortAll(activeXhrs);
+                return doneFn(parseError, segment);
+              }
+              segmentFinish();
+            });
+          });
+        }
+        segmentFinish();
+      }
+    };
+  };
+  /**
+   * Calls the abort callback if any request within the batch was aborted. Will only call
+   * the callback once per batch of requests, even if multiple were aborted.
+   *
+   * @param {Object} loadendState - state to check to see if the abort function was called
+   * @param {Function} abortFn - callback to call for abort
+   */
+
+  const handleLoadEnd = ({
+    loadendState,
+    abortFn
+  }) => event => {
+    const request = event.target;
+    if (request.aborted && abortFn && !loadendState.calledAbortFn) {
+      abortFn();
+      loadendState.calledAbortFn = true;
+    }
+  };
+  /**
+   * Simple progress event callback handler that gathers some stats before
+   * executing a provided callback with the `segment` object
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} progressFn - a callback that is executed each time a progress event
+   *                                is received
+   * @param {Function} trackInfoFn - a callback that receives track info
+   * @param {Function} timingInfoFn - a callback that receives timing info
+   * @param {Function} videoSegmentTimingInfoFn
+   *                   a callback that receives video timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} audioSegmentTimingInfoFn
+   *                   a callback that receives audio timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {boolean}  isEndOfTimeline
+   *                   true if this segment represents the last segment in a timeline
+   * @param {Function} endedTimelineFn
+   *                   a callback made when a timeline is ended, will only be called if
+   *                   isEndOfTimeline is true
+   * @param {Function} dataFn - a callback that is executed when segment bytes are available
+   *                            and ready to use
+   * @param {Event} event - the progress event object from XMLHttpRequest
+   */
+
+  const handleProgress = ({
+    segment,
+    progressFn,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn
+  }) => event => {
+    const request = event.target;
+    if (request.aborted) {
+      return;
+    }
+    segment.stats = merge(segment.stats, getProgressStats(event)); // record the time that we receive the first byte of data
+
+    if (!segment.stats.firstBytesReceivedAt && segment.stats.bytesReceived) {
+      segment.stats.firstBytesReceivedAt = Date.now();
+    }
+    return progressFn(event, segment);
+  };
+  /**
+   * Load all resources and does any processing necessary for a media-segment
+   *
+   * Features:
+   *   decrypts the media-segment if it has a key uri and an iv
+   *   aborts *all* requests if *any* one request fails
+   *
+   * The segment object, at minimum, has the following format:
+   * {
+   *   resolvedUri: String,
+   *   [transmuxer]: Object,
+   *   [byterange]: {
+   *     offset: Number,
+   *     length: Number
+   *   },
+   *   [key]: {
+   *     resolvedUri: String
+   *     [byterange]: {
+   *       offset: Number,
+   *       length: Number
+   *     },
+   *     iv: {
+   *       bytes: Uint32Array
+   *     }
+   *   },
+   *   [map]: {
+   *     resolvedUri: String,
+   *     [byterange]: {
+   *       offset: Number,
+   *       length: Number
+   *     },
+   *     [bytes]: Uint8Array
+   *   }
+   * }
+   * ...where [name] denotes optional properties
+   *
+   * @param {Function} xhr - an instance of the xhr wrapper in xhr.js
+   * @param {Object} xhrOptions - the base options to provide to all xhr requests
+   * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128
+   *                                       decryption routines
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} abortFn - a callback called (only once) if any piece of a request was
+   *                             aborted
+   * @param {Function} progressFn - a callback that receives progress events from the main
+   *                                segment's xhr request
+   * @param {Function} trackInfoFn - a callback that receives track info
+   * @param {Function} timingInfoFn - a callback that receives timing info
+   * @param {Function} videoSegmentTimingInfoFn
+   *                   a callback that receives video timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} audioSegmentTimingInfoFn
+   *                   a callback that receives audio timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} id3Fn - a callback that receives ID3 metadata
+   * @param {Function} captionsFn - a callback that receives captions
+   * @param {boolean}  isEndOfTimeline
+   *                   true if this segment represents the last segment in a timeline
+   * @param {Function} endedTimelineFn
+   *                   a callback made when a timeline is ended, will only be called if
+   *                   isEndOfTimeline is true
+   * @param {Function} dataFn - a callback that receives data from the main segment's xhr
+   *                            request, transmuxed if needed
+   * @param {Function} doneFn - a callback that is executed only once all requests have
+   *                            succeeded or failed
+   * @return {Function} a function that, when invoked, immediately aborts all
+   *                     outstanding requests
+   */
+
+  const mediaSegmentRequest = ({
+    xhr,
+    xhrOptions,
+    decryptionWorker,
+    segment,
+    abortFn,
+    progressFn,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    const activeXhrs = [];
+    const finishProcessingFn = waitForCompletion({
+      activeXhrs,
+      decryptionWorker,
+      trackInfoFn,
+      timingInfoFn,
+      videoSegmentTimingInfoFn,
+      audioSegmentTimingInfoFn,
+      id3Fn,
+      captionsFn,
+      isEndOfTimeline,
+      endedTimelineFn,
+      dataFn,
+      doneFn,
+      onTransmuxerLog
+    }); // optionally, request the decryption key
+
+    if (segment.key && !segment.key.bytes) {
+      const objects = [segment.key];
+      if (segment.map && !segment.map.bytes && segment.map.key && segment.map.key.resolvedUri === segment.key.resolvedUri) {
+        objects.push(segment.map.key);
+      }
+      const keyRequestOptions = merge(xhrOptions, {
+        uri: segment.key.resolvedUri,
+        responseType: 'arraybuffer',
+        requestType: 'segment-key'
+      });
+      const keyRequestCallback = handleKeyResponse(segment, objects, finishProcessingFn);
+      const keyXhr = xhr(keyRequestOptions, keyRequestCallback);
+      activeXhrs.push(keyXhr);
+    } // optionally, request the associated media init segment
+
+    if (segment.map && !segment.map.bytes) {
+      const differentMapKey = segment.map.key && (!segment.key || segment.key.resolvedUri !== segment.map.key.resolvedUri);
+      if (differentMapKey) {
+        const mapKeyRequestOptions = merge(xhrOptions, {
+          uri: segment.map.key.resolvedUri,
+          responseType: 'arraybuffer',
+          requestType: 'segment-key'
+        });
+        const mapKeyRequestCallback = handleKeyResponse(segment, [segment.map.key], finishProcessingFn);
+        const mapKeyXhr = xhr(mapKeyRequestOptions, mapKeyRequestCallback);
+        activeXhrs.push(mapKeyXhr);
+      }
+      const initSegmentOptions = merge(xhrOptions, {
+        uri: segment.map.resolvedUri,
+        responseType: 'arraybuffer',
+        headers: segmentXhrHeaders(segment.map),
+        requestType: 'segment-media-initialization'
+      });
+      const initSegmentRequestCallback = handleInitSegmentResponse({
+        segment,
+        finishProcessingFn
+      });
+      const initSegmentXhr = xhr(initSegmentOptions, initSegmentRequestCallback);
+      activeXhrs.push(initSegmentXhr);
+    }
+    const segmentRequestOptions = merge(xhrOptions, {
+      uri: segment.part && segment.part.resolvedUri || segment.resolvedUri,
+      responseType: 'arraybuffer',
+      headers: segmentXhrHeaders(segment),
+      requestType: 'segment'
+    });
+    const segmentRequestCallback = handleSegmentResponse({
+      segment,
+      finishProcessingFn,
+      responseType: segmentRequestOptions.responseType
+    });
+    const segmentXhr = xhr(segmentRequestOptions, segmentRequestCallback);
+    segmentXhr.addEventListener('progress', handleProgress({
+      segment,
+      progressFn,
+      trackInfoFn,
+      timingInfoFn,
+      videoSegmentTimingInfoFn,
+      audioSegmentTimingInfoFn,
+      id3Fn,
+      captionsFn,
+      isEndOfTimeline,
+      endedTimelineFn,
+      dataFn
+    }));
+    activeXhrs.push(segmentXhr); // since all parts of the request must be considered, but should not make callbacks
+    // multiple times, provide a shared state object
+
+    const loadendState = {};
+    activeXhrs.forEach(activeXhr => {
+      activeXhr.addEventListener('loadend', handleLoadEnd({
+        loadendState,
+        abortFn
+      }));
+    });
+    return () => abortAll(activeXhrs);
+  };
+
+  /**
+   * @file - codecs.js - Handles tasks regarding codec strings such as translating them to
+   * codec strings, or translating codec strings into objects that can be examined.
+   */
+  const logFn$1 = logger('CodecUtils');
+  /**
+   * Returns a set of codec strings parsed from the playlist or the default
+   * codec strings if no codecs were specified in the playlist
+   *
+   * @param {Playlist} media the current media playlist
+   * @return {Object} an object with the video and audio codecs
+   */
+
+  const getCodecs = function (media) {
+    // if the codecs were explicitly specified, use them instead of the
+    // defaults
+    const mediaAttributes = media.attributes || {};
+    if (mediaAttributes.CODECS) {
+      return parseCodecs(mediaAttributes.CODECS);
+    }
+  };
+  const isMaat = (main, media) => {
+    const mediaAttributes = media.attributes || {};
+    return main && main.mediaGroups && main.mediaGroups.AUDIO && mediaAttributes.AUDIO && main.mediaGroups.AUDIO[mediaAttributes.AUDIO];
+  };
+  const isMuxed = (main, media) => {
+    if (!isMaat(main, media)) {
+      return true;
+    }
+    const mediaAttributes = media.attributes || {};
+    const audioGroup = main.mediaGroups.AUDIO[mediaAttributes.AUDIO];
+    for (const groupId in audioGroup) {
+      // If an audio group has a URI (the case for HLS, as HLS will use external playlists),
+      // or there are listed playlists (the case for DASH, as the manifest will have already
+      // provided all of the details necessary to generate the audio playlist, as opposed to
+      // HLS' externally requested playlists), then the content is demuxed.
+      if (!audioGroup[groupId].uri && !audioGroup[groupId].playlists) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const unwrapCodecList = function (codecList) {
+    const codecs = {};
+    codecList.forEach(({
+      mediaType,
+      type,
+      details
+    }) => {
+      codecs[mediaType] = codecs[mediaType] || [];
+      codecs[mediaType].push(translateLegacyCodec(`${type}${details}`));
+    });
+    Object.keys(codecs).forEach(function (mediaType) {
+      if (codecs[mediaType].length > 1) {
+        logFn$1(`multiple ${mediaType} codecs found as attributes: ${codecs[mediaType].join(', ')}. Setting playlist codecs to null so that we wait for mux.js to probe segments for real codecs.`);
+        codecs[mediaType] = null;
+        return;
+      }
+      codecs[mediaType] = codecs[mediaType][0];
+    });
+    return codecs;
+  };
+  const codecCount = function (codecObj) {
+    let count = 0;
+    if (codecObj.audio) {
+      count++;
+    }
+    if (codecObj.video) {
+      count++;
+    }
+    return count;
+  };
+  /**
+   * Calculates the codec strings for a working configuration of
+   * SourceBuffers to play variant streams in a main playlist. If
+   * there is no possible working configuration, an empty object will be
+   * returned.
+   *
+   * @param main {Object} the m3u8 object for the main playlist
+   * @param media {Object} the m3u8 object for the variant playlist
+   * @return {Object} the codec strings.
+   *
+   * @private
+   */
+
+  const codecsForPlaylist = function (main, media) {
+    const mediaAttributes = media.attributes || {};
+    const codecInfo = unwrapCodecList(getCodecs(media) || []); // HLS with multiple-audio tracks must always get an audio codec.
+    // Put another way, there is no way to have a video-only multiple-audio HLS!
+
+    if (isMaat(main, media) && !codecInfo.audio) {
+      if (!isMuxed(main, media)) {
+        // It is possible for codecs to be specified on the audio media group playlist but
+        // not on the rendition playlist. This is mostly the case for DASH, where audio and
+        // video are always separate (and separately specified).
+        const defaultCodecs = unwrapCodecList(codecsFromDefault(main, mediaAttributes.AUDIO) || []);
+        if (defaultCodecs.audio) {
+          codecInfo.audio = defaultCodecs.audio;
+        }
+      }
+    }
+    return codecInfo;
+  };
+  const logFn = logger('PlaylistSelector');
+  const representationToString = function (representation) {
+    if (!representation || !representation.playlist) {
+      return;
+    }
+    const playlist = representation.playlist;
+    return JSON.stringify({
+      id: playlist.id,
+      bandwidth: representation.bandwidth,
+      width: representation.width,
+      height: representation.height,
+      codecs: playlist.attributes && playlist.attributes.CODECS || ''
+    });
+  }; // Utilities
+
+  /**
+   * Returns the CSS value for the specified property on an element
+   * using `getComputedStyle`. Firefox has a long-standing issue where
+   * getComputedStyle() may return null when running in an iframe with
+   * `display: none`.
+   *
+   * @see https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+   * @param {HTMLElement} el the htmlelement to work on
+   * @param {string} the proprety to get the style for
+   */
+
+  const safeGetComputedStyle = function (el, property) {
+    if (!el) {
+      return '';
+    }
+    const result = window.getComputedStyle(el);
+    if (!result) {
+      return '';
+    }
+    return result[property];
+  };
+  /**
+   * Resuable stable sort function
+   *
+   * @param {Playlists} array
+   * @param {Function} sortFn Different comparators
+   * @function stableSort
+   */
+
+  const stableSort = function (array, sortFn) {
+    const newArray = array.slice();
+    array.sort(function (left, right) {
+      const cmp = sortFn(left, right);
+      if (cmp === 0) {
+        return newArray.indexOf(left) - newArray.indexOf(right);
+      }
+      return cmp;
+    });
+  };
+  /**
+   * A comparator function to sort two playlist object by bandwidth.
+   *
+   * @param {Object} left a media playlist object
+   * @param {Object} right a media playlist object
+   * @return {number} Greater than zero if the bandwidth attribute of
+   * left is greater than the corresponding attribute of right. Less
+   * than zero if the bandwidth of right is greater than left and
+   * exactly zero if the two are equal.
+   */
+
+  const comparePlaylistBandwidth = function (left, right) {
+    let leftBandwidth;
+    let rightBandwidth;
+    if (left.attributes.BANDWIDTH) {
+      leftBandwidth = left.attributes.BANDWIDTH;
+    }
+    leftBandwidth = leftBandwidth || window.Number.MAX_VALUE;
+    if (right.attributes.BANDWIDTH) {
+      rightBandwidth = right.attributes.BANDWIDTH;
+    }
+    rightBandwidth = rightBandwidth || window.Number.MAX_VALUE;
+    return leftBandwidth - rightBandwidth;
+  };
+  /**
+   * A comparator function to sort two playlist object by resolution (width).
+   *
+   * @param {Object} left a media playlist object
+   * @param {Object} right a media playlist object
+   * @return {number} Greater than zero if the resolution.width attribute of
+   * left is greater than the corresponding attribute of right. Less
+   * than zero if the resolution.width of right is greater than left and
+   * exactly zero if the two are equal.
+   */
+
+  const comparePlaylistResolution = function (left, right) {
+    let leftWidth;
+    let rightWidth;
+    if (left.attributes.RESOLUTION && left.attributes.RESOLUTION.width) {
+      leftWidth = left.attributes.RESOLUTION.width;
+    }
+    leftWidth = leftWidth || window.Number.MAX_VALUE;
+    if (right.attributes.RESOLUTION && right.attributes.RESOLUTION.width) {
+      rightWidth = right.attributes.RESOLUTION.width;
+    }
+    rightWidth = rightWidth || window.Number.MAX_VALUE; // NOTE - Fallback to bandwidth sort as appropriate in cases where multiple renditions
+    // have the same media dimensions/ resolution
+
+    if (leftWidth === rightWidth && left.attributes.BANDWIDTH && right.attributes.BANDWIDTH) {
+      return left.attributes.BANDWIDTH - right.attributes.BANDWIDTH;
+    }
+    return leftWidth - rightWidth;
+  };
+  /**
+   * Chooses the appropriate media playlist based on bandwidth and player size
+   *
+   * @param {Object} main
+   *        Object representation of the main manifest
+   * @param {number} playerBandwidth
+   *        Current calculated bandwidth of the player
+   * @param {number} playerWidth
+   *        Current width of the player element (should account for the device pixel ratio)
+   * @param {number} playerHeight
+   *        Current height of the player element (should account for the device pixel ratio)
+   * @param {boolean} limitRenditionByPlayerDimensions
+   *        True if the player width and height should be used during the selection, false otherwise
+   * @param {Object} playlistController
+   *        the current playlistController object
+   * @return {Playlist} the highest bitrate playlist less than the
+   * currently detected bandwidth, accounting for some amount of
+   * bandwidth variance
+   */
+
+  let simpleSelector = function (main, playerBandwidth, playerWidth, playerHeight, limitRenditionByPlayerDimensions, playlistController) {
+    // If we end up getting called before `main` is available, exit early
+    if (!main) {
+      return;
+    }
+    const options = {
+      bandwidth: playerBandwidth,
+      width: playerWidth,
+      height: playerHeight,
+      limitRenditionByPlayerDimensions
+    };
+    let playlists = main.playlists; // if playlist is audio only, select between currently active audio group playlists.
+
+    if (Playlist.isAudioOnly(main)) {
+      playlists = playlistController.getAudioTrackPlaylists_(); // add audioOnly to options so that we log audioOnly: true
+      // at the buttom of this function for debugging.
+
+      options.audioOnly = true;
+    } // convert the playlists to an intermediary representation to make comparisons easier
+
+    let sortedPlaylistReps = playlists.map(playlist => {
+      let bandwidth;
+      const width = playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.width;
+      const height = playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.height;
+      bandwidth = playlist.attributes && playlist.attributes.BANDWIDTH;
+      bandwidth = bandwidth || window.Number.MAX_VALUE;
+      return {
+        bandwidth,
+        width,
+        height,
+        playlist
+      };
+    });
+    stableSort(sortedPlaylistReps, (left, right) => left.bandwidth - right.bandwidth); // filter out any playlists that have been excluded due to
+    // incompatible configurations
+
+    sortedPlaylistReps = sortedPlaylistReps.filter(rep => !Playlist.isIncompatible(rep.playlist)); // filter out any playlists that have been disabled manually through the representations
+    // api or excluded temporarily due to playback errors.
+
+    let enabledPlaylistReps = sortedPlaylistReps.filter(rep => Playlist.isEnabled(rep.playlist));
+    if (!enabledPlaylistReps.length) {
+      // if there are no enabled playlists, then they have all been excluded or disabled
+      // by the user through the representations api. In this case, ignore exclusion and
+      // fallback to what the user wants by using playlists the user has not disabled.
+      enabledPlaylistReps = sortedPlaylistReps.filter(rep => !Playlist.isDisabled(rep.playlist));
+    } // filter out any variant that has greater effective bitrate
+    // than the current estimated bandwidth
+
+    const bandwidthPlaylistReps = enabledPlaylistReps.filter(rep => rep.bandwidth * Config.BANDWIDTH_VARIANCE < playerBandwidth);
+    let highestRemainingBandwidthRep = bandwidthPlaylistReps[bandwidthPlaylistReps.length - 1]; // get all of the renditions with the same (highest) bandwidth
+    // and then taking the very first element
+
+    const bandwidthBestRep = bandwidthPlaylistReps.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0]; // if we're not going to limit renditions by player size, make an early decision.
+
+    if (limitRenditionByPlayerDimensions === false) {
+      const chosenRep = bandwidthBestRep || enabledPlaylistReps[0] || sortedPlaylistReps[0];
+      if (chosenRep && chosenRep.playlist) {
+        let type = 'sortedPlaylistReps';
+        if (bandwidthBestRep) {
+          type = 'bandwidthBestRep';
+        }
+        if (enabledPlaylistReps[0]) {
+          type = 'enabledPlaylistReps';
+        }
+        logFn(`choosing ${representationToString(chosenRep)} using ${type} with options`, options);
+        return chosenRep.playlist;
+      }
+      logFn('could not choose a playlist with options', options);
+      return null;
+    } // filter out playlists without resolution information
+
+    const haveResolution = bandwidthPlaylistReps.filter(rep => rep.width && rep.height); // sort variants by resolution
+
+    stableSort(haveResolution, (left, right) => left.width - right.width); // if we have the exact resolution as the player use it
+
+    const resolutionBestRepList = haveResolution.filter(rep => rep.width === playerWidth && rep.height === playerHeight);
+    highestRemainingBandwidthRep = resolutionBestRepList[resolutionBestRepList.length - 1]; // ensure that we pick the highest bandwidth variant that have exact resolution
+
+    const resolutionBestRep = resolutionBestRepList.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0];
+    let resolutionPlusOneList;
+    let resolutionPlusOneSmallest;
+    let resolutionPlusOneRep; // find the smallest variant that is larger than the player
+    // if there is no match of exact resolution
+
+    if (!resolutionBestRep) {
+      resolutionPlusOneList = haveResolution.filter(rep => rep.width > playerWidth || rep.height > playerHeight); // find all the variants have the same smallest resolution
+
+      resolutionPlusOneSmallest = resolutionPlusOneList.filter(rep => rep.width === resolutionPlusOneList[0].width && rep.height === resolutionPlusOneList[0].height); // ensure that we also pick the highest bandwidth variant that
+      // is just-larger-than the video player
+
+      highestRemainingBandwidthRep = resolutionPlusOneSmallest[resolutionPlusOneSmallest.length - 1];
+      resolutionPlusOneRep = resolutionPlusOneSmallest.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0];
+    }
+    let leastPixelDiffRep; // If this selector proves to be better than others,
+    // resolutionPlusOneRep and resolutionBestRep and all
+    // the code involving them should be removed.
+
+    if (playlistController.leastPixelDiffSelector) {
+      // find the variant that is closest to the player's pixel size
+      const leastPixelDiffList = haveResolution.map(rep => {
+        rep.pixelDiff = Math.abs(rep.width - playerWidth) + Math.abs(rep.height - playerHeight);
+        return rep;
+      }); // get the highest bandwidth, closest resolution playlist
+
+      stableSort(leastPixelDiffList, (left, right) => {
+        // sort by highest bandwidth if pixelDiff is the same
+        if (left.pixelDiff === right.pixelDiff) {
+          return right.bandwidth - left.bandwidth;
+        }
+        return left.pixelDiff - right.pixelDiff;
+      });
+      leastPixelDiffRep = leastPixelDiffList[0];
+    } // fallback chain of variants
+
+    const chosenRep = leastPixelDiffRep || resolutionPlusOneRep || resolutionBestRep || bandwidthBestRep || enabledPlaylistReps[0] || sortedPlaylistReps[0];
+    if (chosenRep && chosenRep.playlist) {
+      let type = 'sortedPlaylistReps';
+      if (leastPixelDiffRep) {
+        type = 'leastPixelDiffRep';
+      } else if (resolutionPlusOneRep) {
+        type = 'resolutionPlusOneRep';
+      } else if (resolutionBestRep) {
+        type = 'resolutionBestRep';
+      } else if (bandwidthBestRep) {
+        type = 'bandwidthBestRep';
+      } else if (enabledPlaylistReps[0]) {
+        type = 'enabledPlaylistReps';
+      }
+      logFn(`choosing ${representationToString(chosenRep)} using ${type} with options`, options);
+      return chosenRep.playlist;
+    }
+    logFn('could not choose a playlist with options', options);
+    return null;
+  };
+
+  /**
+   * Chooses the appropriate media playlist based on the most recent
+   * bandwidth estimate and the player size.
+   *
+   * Expects to be called within the context of an instance of VhsHandler
+   *
+   * @return {Playlist} the highest bitrate playlist less than the
+   * currently detected bandwidth, accounting for some amount of
+   * bandwidth variance
+   */
+
+  const lastBandwidthSelector = function () {
+    let pixelRatio = this.useDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
+    if (!isNaN(this.customPixelRatio)) {
+      pixelRatio = this.customPixelRatio;
+    }
+    return simpleSelector(this.playlists.main, this.systemBandwidth, parseInt(safeGetComputedStyle(this.tech_.el(), 'width'), 10) * pixelRatio, parseInt(safeGetComputedStyle(this.tech_.el(), 'height'), 10) * pixelRatio, this.limitRenditionByPlayerDimensions, this.playlistController_);
+  };
+  /**
+   * Chooses the appropriate media playlist based on an
+   * exponential-weighted moving average of the bandwidth after
+   * filtering for player size.
+   *
+   * Expects to be called within the context of an instance of VhsHandler
+   *
+   * @param {number} decay - a number between 0 and 1. Higher values of
+   * this parameter will cause previous bandwidth estimates to lose
+   * significance more quickly.
+   * @return {Function} a function which can be invoked to create a new
+   * playlist selector function.
+   * @see https://en.wikipedia.org/wiki/Moving_average#Exponential_moving_average
+   */
+
+  const movingAverageBandwidthSelector = function (decay) {
+    let average = -1;
+    let lastSystemBandwidth = -1;
+    if (decay < 0 || decay > 1) {
+      throw new Error('Moving average bandwidth decay must be between 0 and 1.');
+    }
+    return function () {
+      let pixelRatio = this.useDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
+      if (!isNaN(this.customPixelRatio)) {
+        pixelRatio = this.customPixelRatio;
+      }
+      if (average < 0) {
+        average = this.systemBandwidth;
+        lastSystemBandwidth = this.systemBandwidth;
+      } // stop the average value from decaying for every 250ms
+      // when the systemBandwidth is constant
+      // and
+      // stop average from setting to a very low value when the
+      // systemBandwidth becomes 0 in case of chunk cancellation
+
+      if (this.systemBandwidth > 0 && this.systemBandwidth !== lastSystemBandwidth) {
+        average = decay * this.systemBandwidth + (1 - decay) * average;
+        lastSystemBandwidth = this.systemBandwidth;
+      }
+      return simpleSelector(this.playlists.main, average, parseInt(safeGetComputedStyle(this.tech_.el(), 'width'), 10) * pixelRatio, parseInt(safeGetComputedStyle(this.tech_.el(), 'height'), 10) * pixelRatio, this.limitRenditionByPlayerDimensions, this.playlistController_);
+    };
+  };
+  /**
+   * Chooses the appropriate media playlist based on the potential to rebuffer
+   *
+   * @param {Object} settings
+   *        Object of information required to use this selector
+   * @param {Object} settings.main
+   *        Object representation of the main manifest
+   * @param {number} settings.currentTime
+   *        The current time of the player
+   * @param {number} settings.bandwidth
+   *        Current measured bandwidth
+   * @param {number} settings.duration
+   *        Duration of the media
+   * @param {number} settings.segmentDuration
+   *        Segment duration to be used in round trip time calculations
+   * @param {number} settings.timeUntilRebuffer
+   *        Time left in seconds until the player has to rebuffer
+   * @param {number} settings.currentTimeline
+   *        The current timeline segments are being loaded from
+   * @param {SyncController} settings.syncController
+   *        SyncController for determining if we have a sync point for a given playlist
+   * @return {Object|null}
+   *         {Object} return.playlist
+   *         The highest bandwidth playlist with the least amount of rebuffering
+   *         {Number} return.rebufferingImpact
+   *         The amount of time in seconds switching to this playlist will rebuffer. A
+   *         negative value means that switching will cause zero rebuffering.
+   */
+
+  const minRebufferMaxBandwidthSelector = function (settings) {
+    const {
+      main,
+      currentTime,
+      bandwidth,
+      duration,
+      segmentDuration,
+      timeUntilRebuffer,
+      currentTimeline,
+      syncController
+    } = settings; // filter out any playlists that have been excluded due to
+    // incompatible configurations
+
+    const compatiblePlaylists = main.playlists.filter(playlist => !Playlist.isIncompatible(playlist)); // filter out any playlists that have been disabled manually through the representations
+    // api or excluded temporarily due to playback errors.
+
+    let enabledPlaylists = compatiblePlaylists.filter(Playlist.isEnabled);
+    if (!enabledPlaylists.length) {
+      // if there are no enabled playlists, then they have all been excluded or disabled
+      // by the user through the representations api. In this case, ignore exclusion and
+      // fallback to what the user wants by using playlists the user has not disabled.
+      enabledPlaylists = compatiblePlaylists.filter(playlist => !Playlist.isDisabled(playlist));
+    }
+    const bandwidthPlaylists = enabledPlaylists.filter(Playlist.hasAttribute.bind(null, 'BANDWIDTH'));
+    const rebufferingEstimates = bandwidthPlaylists.map(playlist => {
+      const syncPoint = syncController.getSyncPoint(playlist, duration, currentTimeline, currentTime); // If there is no sync point for this playlist, switching to it will require a
+      // sync request first. This will double the request time
+
+      const numRequests = syncPoint ? 1 : 2;
+      const requestTimeEstimate = Playlist.estimateSegmentRequestTime(segmentDuration, bandwidth, playlist);
+      const rebufferingImpact = requestTimeEstimate * numRequests - timeUntilRebuffer;
+      return {
+        playlist,
+        rebufferingImpact
+      };
+    });
+    const noRebufferingPlaylists = rebufferingEstimates.filter(estimate => estimate.rebufferingImpact <= 0); // Sort by bandwidth DESC
+
+    stableSort(noRebufferingPlaylists, (a, b) => comparePlaylistBandwidth(b.playlist, a.playlist));
+    if (noRebufferingPlaylists.length) {
+      return noRebufferingPlaylists[0];
+    }
+    stableSort(rebufferingEstimates, (a, b) => a.rebufferingImpact - b.rebufferingImpact);
+    return rebufferingEstimates[0] || null;
+  };
+  /**
+   * Chooses the appropriate media playlist, which in this case is the lowest bitrate
+   * one with video.  If no renditions with video exist, return the lowest audio rendition.
+   *
+   * Expects to be called within the context of an instance of VhsHandler
+   *
+   * @return {Object|null}
+   *         {Object} return.playlist
+   *         The lowest bitrate playlist that contains a video codec.  If no such rendition
+   *         exists pick the lowest audio rendition.
+   */
+
+  const lowestBitrateCompatibleVariantSelector = function () {
+    // filter out any playlists that have been excluded due to
+    // incompatible configurations or playback errors
+    const playlists = this.playlists.main.playlists.filter(Playlist.isEnabled); // Sort ascending by bitrate
+
+    stableSort(playlists, (a, b) => comparePlaylistBandwidth(a, b)); // Parse and assume that playlists with no video codec have no video
+    // (this is not necessarily true, although it is generally true).
+    //
+    // If an entire manifest has no valid videos everything will get filtered
+    // out.
+
+    const playlistsWithVideo = playlists.filter(playlist => !!codecsForPlaylist(this.playlists.main, playlist).video);
+    return playlistsWithVideo[0] || null;
+  };
+
+  /**
+   * Combine all segments into a single Uint8Array
+   *
+   * @param {Object} segmentObj
+   * @return {Uint8Array} concatenated bytes
+   * @private
+   */
+  const concatSegments = segmentObj => {
+    let offset = 0;
+    let tempBuffer;
+    if (segmentObj.bytes) {
+      tempBuffer = new Uint8Array(segmentObj.bytes); // combine the individual segments into one large typed-array
+
+      segmentObj.segments.forEach(segment => {
+        tempBuffer.set(segment, offset);
+        offset += segment.byteLength;
+      });
+    }
+    return tempBuffer;
+  };
+  /**
+   * Example:
+   * https://host.com/path1/path2/path3/segment.ts?arg1=val1
+   * -->
+   * path3/segment.ts
+   *
+   * @param resolvedUri
+   * @return {string}
+   */
+
+  function compactSegmentUrlDescription(resolvedUri) {
+    try {
+      return new URL(resolvedUri).pathname.split('/').slice(-2).join('/');
+    } catch (e) {
+      return '';
+    }
+  }
+
+  /**
+   * @file text-tracks.js
+   */
+  /**
+   * Create captions text tracks on video.js if they do not exist
+   *
+   * @param {Object} inbandTextTracks a reference to current inbandTextTracks
+   * @param {Object} tech the video.js tech
+   * @param {Object} captionStream the caption stream to create
+   * @private
+   */
+
+  const createCaptionsTrackIfNotExists = function (inbandTextTracks, tech, captionStream) {
+    if (!inbandTextTracks[captionStream]) {
+      tech.trigger({
+        type: 'usage',
+        name: 'vhs-608'
+      });
+      let instreamId = captionStream; // we need to translate SERVICEn for 708 to how mux.js currently labels them
+
+      if (/^cc708_/.test(captionStream)) {
+        instreamId = 'SERVICE' + captionStream.split('_')[1];
+      }
+      const track = tech.textTracks().getTrackById(instreamId);
+      if (track) {
+        // Resuse an existing track with a CC# id because this was
+        // very likely created by videojs-contrib-hls from information
+        // in the m3u8 for us to use
+        inbandTextTracks[captionStream] = track;
+      } else {
+        // This section gets called when we have caption services that aren't specified in the manifest.
+        // Manifest level caption services are handled in media-groups.js under CLOSED-CAPTIONS.
+        const captionServices = tech.options_.vhs && tech.options_.vhs.captionServices || {};
+        let label = captionStream;
+        let language = captionStream;
+        let def = false;
+        const captionService = captionServices[instreamId];
+        if (captionService) {
+          label = captionService.label;
+          language = captionService.language;
+          def = captionService.default;
+        } // Otherwise, create a track with the default `CC#` label and
+        // without a language
+
+        inbandTextTracks[captionStream] = tech.addRemoteTextTrack({
+          kind: 'captions',
+          id: instreamId,
+          // TODO: investigate why this doesn't seem to turn the caption on by default
+          default: def,
+          label,
+          language
+        }, false).track;
+      }
+    }
+  };
+  /**
+   * Add caption text track data to a source handler given an array of captions
+   *
+   * @param {Object}
+   *   @param {Object} inbandTextTracks the inband text tracks
+   *   @param {number} timestampOffset the timestamp offset of the source buffer
+   *   @param {Array} captionArray an array of caption data
+   * @private
+   */
+
+  const addCaptionData = function ({
+    inbandTextTracks,
+    captionArray,
+    timestampOffset
+  }) {
+    if (!captionArray) {
+      return;
+    }
+    const Cue = window.WebKitDataCue || window.VTTCue;
+    captionArray.forEach(caption => {
+      const track = caption.stream; // in CEA 608 captions, video.js/mux.js sends a content array
+      // with positioning data
+
+      if (caption.content) {
+        caption.content.forEach(value => {
+          const cue = new Cue(caption.startTime + timestampOffset, caption.endTime + timestampOffset, value.text);
+          cue.line = value.line;
+          cue.align = 'left';
+          cue.position = value.position;
+          cue.positionAlign = 'line-left';
+          inbandTextTracks[track].addCue(cue);
+        });
+      } else {
+        // otherwise, a text value with combined captions is sent
+        inbandTextTracks[track].addCue(new Cue(caption.startTime + timestampOffset, caption.endTime + timestampOffset, caption.text));
+      }
+    });
+  };
+  /**
+   * Define properties on a cue for backwards compatability,
+   * but warn the user that the way that they are using it
+   * is depricated and will be removed at a later date.
+   *
+   * @param {Cue} cue the cue to add the properties on
+   * @private
+   */
+
+  const deprecateOldCue = function (cue) {
+    Object.defineProperties(cue.frame, {
+      id: {
+        get() {
+          videojs.log.warn('cue.frame.id is deprecated. Use cue.value.key instead.');
+          return cue.value.key;
+        }
+      },
+      value: {
+        get() {
+          videojs.log.warn('cue.frame.value is deprecated. Use cue.value.data instead.');
+          return cue.value.data;
+        }
+      },
+      privateData: {
+        get() {
+          videojs.log.warn('cue.frame.privateData is deprecated. Use cue.value.data instead.');
+          return cue.value.data;
+        }
+      }
+    });
+  };
+  /**
+   * Add metadata text track data to a source handler given an array of metadata
+   *
+   * @param {Object}
+   *   @param {Object} inbandTextTracks the inband text tracks
+   *   @param {Array} metadataArray an array of meta data
+   *   @param {number} timestampOffset the timestamp offset of the source buffer
+   *   @param {number} videoDuration the duration of the video
+   * @private
+   */
+
+  const addMetadata = ({
+    inbandTextTracks,
+    metadataArray,
+    timestampOffset,
+    videoDuration
+  }) => {
+    if (!metadataArray) {
+      return;
+    }
+    const Cue = window.WebKitDataCue || window.VTTCue;
+    const metadataTrack = inbandTextTracks.metadataTrack_;
+    if (!metadataTrack) {
+      return;
+    }
+    metadataArray.forEach(metadata => {
+      const time = metadata.cueTime + timestampOffset; // if time isn't a finite number between 0 and Infinity, like NaN,
+      // ignore this bit of metadata.
+      // This likely occurs when you have an non-timed ID3 tag like TIT2,
+      // which is the "Title/Songname/Content description" frame
+
+      if (typeof time !== 'number' || window.isNaN(time) || time < 0 || !(time < Infinity)) {
+        return;
+      } // If we have no frames, we can't create a cue.
+
+      if (!metadata.frames || !metadata.frames.length) {
+        return;
+      }
+      metadata.frames.forEach(frame => {
+        const cue = new Cue(time, time, frame.value || frame.url || frame.data || '');
+        cue.frame = frame;
+        cue.value = frame;
+        deprecateOldCue(cue);
+        metadataTrack.addCue(cue);
+      });
+    });
+    if (!metadataTrack.cues || !metadataTrack.cues.length) {
+      return;
+    } // Updating the metadeta cues so that
+    // the endTime of each cue is the startTime of the next cue
+    // the endTime of last cue is the duration of the video
+
+    const cues = metadataTrack.cues;
+    const cuesArray = []; // Create a copy of the TextTrackCueList...
+    // ...disregarding cues with a falsey value
+
+    for (let i = 0; i < cues.length; i++) {
+      if (cues[i]) {
+        cuesArray.push(cues[i]);
+      }
+    } // Group cues by their startTime value
+
+    const cuesGroupedByStartTime = cuesArray.reduce((obj, cue) => {
+      const timeSlot = obj[cue.startTime] || [];
+      timeSlot.push(cue);
+      obj[cue.startTime] = timeSlot;
+      return obj;
+    }, {}); // Sort startTimes by ascending order
+
+    const sortedStartTimes = Object.keys(cuesGroupedByStartTime).sort((a, b) => Number(a) - Number(b)); // Map each cue group's endTime to the next group's startTime
+
+    sortedStartTimes.forEach((startTime, idx) => {
+      const cueGroup = cuesGroupedByStartTime[startTime];
+      const finiteDuration = isFinite(videoDuration) ? videoDuration : startTime;
+      const nextTime = Number(sortedStartTimes[idx + 1]) || finiteDuration; // Map each cue's endTime the next group's startTime
+
+      cueGroup.forEach(cue => {
+        cue.endTime = nextTime;
+      });
+    });
+  }; // object for mapping daterange attributes
+
+  const dateRangeAttr = {
+    id: 'ID',
+    class: 'CLASS',
+    startDate: 'START-DATE',
+    duration: 'DURATION',
+    endDate: 'END-DATE',
+    endOnNext: 'END-ON-NEXT',
+    plannedDuration: 'PLANNED-DURATION',
+    scte35Out: 'SCTE35-OUT',
+    scte35In: 'SCTE35-IN'
+  };
+  const dateRangeKeysToOmit = new Set(['id', 'class', 'startDate', 'duration', 'endDate', 'endOnNext', 'startTime', 'endTime', 'processDateRange']);
+  /**
+   * Add DateRange metadata text track to a source handler given an array of metadata
+   *
+   * @param {Object}
+   *   @param {Object} inbandTextTracks the inband text tracks
+   *   @param {Array} dateRanges parsed media playlist
+   * @private
+   */
+
+  const addDateRangeMetadata = ({
+    inbandTextTracks,
+    dateRanges
+  }) => {
+    const metadataTrack = inbandTextTracks.metadataTrack_;
+    if (!metadataTrack) {
+      return;
+    }
+    const Cue = window.WebKitDataCue || window.VTTCue;
+    dateRanges.forEach(dateRange => {
+      // we generate multiple cues for each date range with different attributes
+      for (const key of Object.keys(dateRange)) {
+        if (dateRangeKeysToOmit.has(key)) {
+          continue;
+        }
+        const cue = new Cue(dateRange.startTime, dateRange.endTime, '');
+        cue.id = dateRange.id;
+        cue.type = 'com.apple.quicktime.HLS';
+        cue.value = {
+          key: dateRangeAttr[key],
+          data: dateRange[key]
+        };
+        if (key === 'scte35Out' || key === 'scte35In') {
+          cue.value.data = new Uint8Array(cue.value.data.match(/[\da-f]{2}/gi)).buffer;
+        }
+        metadataTrack.addCue(cue);
+      }
+      dateRange.processDateRange();
+    });
+  };
+  /**
+   * Create metadata text track on video.js if it does not exist
+   *
+   * @param {Object} inbandTextTracks a reference to current inbandTextTracks
+   * @param {string} dispatchType the inband metadata track dispatch type
+   * @param {Object} tech the video.js tech
+   * @private
+   */
+
+  const createMetadataTrackIfNotExists = (inbandTextTracks, dispatchType, tech) => {
+    if (inbandTextTracks.metadataTrack_) {
+      return;
+    }
+    inbandTextTracks.metadataTrack_ = tech.addRemoteTextTrack({
+      kind: 'metadata',
+      label: 'Timed Metadata'
+    }, false).track;
+    if (!videojs.browser.IS_ANY_SAFARI) {
+      inbandTextTracks.metadataTrack_.inBandMetadataTrackDispatchType = dispatchType;
+    }
+  };
+  /**
+   * Remove cues from a track on video.js.
+   *
+   * @param {Double} start start of where we should remove the cue
+   * @param {Double} end end of where the we should remove the cue
+   * @param {Object} track the text track to remove the cues from
+   * @private
+   */
+
+  const removeCuesFromTrack = function (start, end, track) {
+    let i;
+    let cue;
+    if (!track) {
+      return;
+    }
+    if (!track.cues) {
+      return;
+    }
+    i = track.cues.length;
+    while (i--) {
+      cue = track.cues[i]; // Remove any cue within the provided start and end time
+
+      if (cue.startTime >= start && cue.endTime <= end) {
+        track.removeCue(cue);
+      }
+    }
+  };
+  /**
+   * Remove duplicate cues from a track on video.js (a cue is considered a
+   * duplicate if it has the same time interval and text as another)
+   *
+   * @param {Object} track the text track to remove the duplicate cues from
+   * @private
+   */
+
+  const removeDuplicateCuesFromTrack = function (track) {
+    const cues = track.cues;
+    if (!cues) {
+      return;
+    }
+    const uniqueCues = {};
+    for (let i = cues.length - 1; i >= 0; i--) {
+      const cue = cues[i];
+      const cueKey = `${cue.startTime}-${cue.endTime}-${cue.text}`;
+      if (uniqueCues[cueKey]) {
+        track.removeCue(cue);
+      } else {
+        uniqueCues[cueKey] = cue;
+      }
+    }
+  };
+
+  /**
+   * Returns a list of gops in the buffer that have a pts value of 3 seconds or more in
+   * front of current time.
+   *
+   * @param {Array} buffer
+   *        The current buffer of gop information
+   * @param {number} currentTime
+   *        The current time
+   * @param {Double} mapping
+   *        Offset to map display time to stream presentation time
+   * @return {Array}
+   *         List of gops considered safe to append over
+   */
+
+  const gopsSafeToAlignWith = (buffer, currentTime, mapping) => {
+    if (typeof currentTime === 'undefined' || currentTime === null || !buffer.length) {
+      return [];
+    } // pts value for current time + 3 seconds to give a bit more wiggle room
+
+    const currentTimePts = Math.ceil((currentTime - mapping + 3) * clock_1);
+    let i;
+    for (i = 0; i < buffer.length; i++) {
+      if (buffer[i].pts > currentTimePts) {
+        break;
+      }
+    }
+    return buffer.slice(i);
+  };
+  /**
+   * Appends gop information (timing and byteLength) received by the transmuxer for the
+   * gops appended in the last call to appendBuffer
+   *
+   * @param {Array} buffer
+   *        The current buffer of gop information
+   * @param {Array} gops
+   *        List of new gop information
+   * @param {boolean} replace
+   *        If true, replace the buffer with the new gop information. If false, append the
+   *        new gop information to the buffer in the right location of time.
+   * @return {Array}
+   *         Updated list of gop information
+   */
+
+  const updateGopBuffer = (buffer, gops, replace) => {
+    if (!gops.length) {
+      return buffer;
+    }
+    if (replace) {
+      // If we are in safe append mode, then completely overwrite the gop buffer
+      // with the most recent appeneded data. This will make sure that when appending
+      // future segments, we only try to align with gops that are both ahead of current
+      // time and in the last segment appended.
+      return gops.slice();
+    }
+    const start = gops[0].pts;
+    let i = 0;
+    for (i; i < buffer.length; i++) {
+      if (buffer[i].pts >= start) {
+        break;
+      }
+    }
+    return buffer.slice(0, i).concat(gops);
+  };
+  /**
+   * Removes gop information in buffer that overlaps with provided start and end
+   *
+   * @param {Array} buffer
+   *        The current buffer of gop information
+   * @param {Double} start
+   *        position to start the remove at
+   * @param {Double} end
+   *        position to end the remove at
+   * @param {Double} mapping
+   *        Offset to map display time to stream presentation time
+   */
+
+  const removeGopBuffer = (buffer, start, end, mapping) => {
+    const startPts = Math.ceil((start - mapping) * clock_1);
+    const endPts = Math.ceil((end - mapping) * clock_1);
+    const updatedBuffer = buffer.slice();
+    let i = buffer.length;
+    while (i--) {
+      if (buffer[i].pts <= endPts) {
+        break;
+      }
+    }
+    if (i === -1) {
+      // no removal because end of remove range is before start of buffer
+      return updatedBuffer;
+    }
+    let j = i + 1;
+    while (j--) {
+      if (buffer[j].pts <= startPts) {
+        break;
+      }
+    } // clamp remove range start to 0 index
+
+    j = Math.max(j, 0);
+    updatedBuffer.splice(j, i - j + 1);
+    return updatedBuffer;
+  };
+  const shallowEqual = function (a, b) {
+    // if both are undefined
+    // or one or the other is undefined
+    // they are not equal
+    if (!a && !b || !a && b || a && !b) {
+      return false;
+    } // they are the same object and thus, equal
+
+    if (a === b) {
+      return true;
+    } // sort keys so we can make sure they have
+    // all the same keys later.
+
+    const akeys = Object.keys(a).sort();
+    const bkeys = Object.keys(b).sort(); // different number of keys, not equal
+
+    if (akeys.length !== bkeys.length) {
+      return false;
+    }
+    for (let i = 0; i < akeys.length; i++) {
+      const key = akeys[i]; // different sorted keys, not equal
+
+      if (key !== bkeys[i]) {
+        return false;
+      } // different values, not equal
+
+      if (a[key] !== b[key]) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  // https://www.w3.org/TR/WebIDL-1/#quotaexceedederror
+  const QUOTA_EXCEEDED_ERR = 22;
+
+  /**
+   * The segment loader has no recourse except to fetch a segment in the
+   * current playlist and use the internal timestamps in that segment to
+   * generate a syncPoint. This function returns a good candidate index
+   * for that process.
+   *
+   * @param {Array} segments - the segments array from a playlist.
+   * @return {number} An index of a segment from the playlist to load
+   */
+
+  const getSyncSegmentCandidate = function (currentTimeline, segments, targetTime) {
+    segments = segments || [];
+    const timelineSegments = [];
+    let time = 0;
+    for (let i = 0; i < segments.length; i++) {
+      const segment = segments[i];
+      if (currentTimeline === segment.timeline) {
+        timelineSegments.push(i);
+        time += segment.duration;
+        if (time > targetTime) {
+          return i;
+        }
+      }
+    }
+    if (timelineSegments.length === 0) {
+      return 0;
+    } // default to the last timeline segment
+
+    return timelineSegments[timelineSegments.length - 1];
+  }; // In the event of a quota exceeded error, keep at least one second of back buffer. This
+  // number was arbitrarily chosen and may be updated in the future, but seemed reasonable
+  // as a start to prevent any potential issues with removing content too close to the
+  // playhead.
+
+  const MIN_BACK_BUFFER = 1; // in ms
+
+  const CHECK_BUFFER_DELAY = 500;
+  const finite = num => typeof num === 'number' && isFinite(num); // With most content hovering around 30fps, if a segment has a duration less than a half
+  // frame at 30fps or one frame at 60fps, the bandwidth and throughput calculations will
+  // not accurately reflect the rest of the content.
+
+  const MIN_SEGMENT_DURATION_TO_SAVE_STATS = 1 / 60;
+  const illegalMediaSwitch = (loaderType, startingMedia, trackInfo) => {
+    // Although these checks should most likely cover non 'main' types, for now it narrows
+    // the scope of our checks.
+    if (loaderType !== 'main' || !startingMedia || !trackInfo) {
+      return null;
+    }
+    if (!trackInfo.hasAudio && !trackInfo.hasVideo) {
+      return 'Neither audio nor video found in segment.';
+    }
+    if (startingMedia.hasVideo && !trackInfo.hasVideo) {
+      return 'Only audio found in segment when we expected video.' + ' We can\'t switch to audio only from a stream that had video.' + ' To get rid of this message, please add codec information to the manifest.';
+    }
+    if (!startingMedia.hasVideo && trackInfo.hasVideo) {
+      return 'Video found in segment when we expected only audio.' + ' We can\'t switch to a stream with video from an audio only stream.' + ' To get rid of this message, please add codec information to the manifest.';
+    }
+    return null;
+  };
+  /**
+   * Calculates a time value that is safe to remove from the back buffer without interrupting
+   * playback.
+   *
+   * @param {TimeRange} seekable
+   *        The current seekable range
+   * @param {number} currentTime
+   *        The current time of the player
+   * @param {number} targetDuration
+   *        The target duration of the current playlist
+   * @return {number}
+   *         Time that is safe to remove from the back buffer without interrupting playback
+   */
+
+  const safeBackBufferTrimTime = (seekable, currentTime, targetDuration) => {
+    // 30 seconds before the playhead provides a safe default for trimming.
+    //
+    // Choosing a reasonable default is particularly important for high bitrate content and
+    // VOD videos/live streams with large windows, as the buffer may end up overfilled and
+    // throw an APPEND_BUFFER_ERR.
+    let trimTime = currentTime - Config.BACK_BUFFER_LENGTH;
+    if (seekable.length) {
+      // Some live playlists may have a shorter window of content than the full allowed back
+      // buffer. For these playlists, don't save content that's no longer within the window.
+      trimTime = Math.max(trimTime, seekable.start(0));
+    } // Don't remove within target duration of the current time to avoid the possibility of
+    // removing the GOP currently being played, as removing it can cause playback stalls.
+
+    const maxTrimTime = currentTime - targetDuration;
+    return Math.min(maxTrimTime, trimTime);
+  };
+  const segmentInfoString = segmentInfo => {
+    const {
+      startOfSegment,
+      duration,
+      segment,
+      part,
+      playlist: {
+        mediaSequence: seq,
+        id,
+        segments = []
+      },
+      mediaIndex: index,
+      partIndex,
+      timeline
+    } = segmentInfo;
+    const segmentLen = segments.length - 1;
+    let selection = 'mediaIndex/partIndex increment';
+    if (segmentInfo.getMediaInfoForTime) {
+      selection = `getMediaInfoForTime (${segmentInfo.getMediaInfoForTime})`;
+    } else if (segmentInfo.isSyncRequest) {
+      selection = 'getSyncSegmentCandidate (isSyncRequest)';
+    }
+    if (segmentInfo.independent) {
+      selection += ` with independent ${segmentInfo.independent}`;
+    }
+    const hasPartIndex = typeof partIndex === 'number';
+    const name = segmentInfo.segment.uri ? 'segment' : 'pre-segment';
+    const zeroBasedPartCount = hasPartIndex ? getKnownPartCount({
+      preloadSegment: segment
+    }) - 1 : 0;
+    return `${name} [${seq + index}/${seq + segmentLen}]` + (hasPartIndex ? ` part [${partIndex}/${zeroBasedPartCount}]` : '') + ` segment start/end [${segment.start} => ${segment.end}]` + (hasPartIndex ? ` part start/end [${part.start} => ${part.end}]` : '') + ` startOfSegment [${startOfSegment}]` + ` duration [${duration}]` + ` timeline [${timeline}]` + ` selected by [${selection}]` + ` playlist [${id}]`;
+  };
+  const timingInfoPropertyForMedia = mediaType => `${mediaType}TimingInfo`;
+  /**
+   * Returns the timestamp offset to use for the segment.
+   *
+   * @param {number} segmentTimeline
+   *        The timeline of the segment
+   * @param {number} currentTimeline
+   *        The timeline currently being followed by the loader
+   * @param {number} startOfSegment
+   *        The estimated segment start
+   * @param {TimeRange[]} buffered
+   *        The loader's buffer
+   * @param {boolean} overrideCheck
+   *        If true, no checks are made to see if the timestamp offset value should be set,
+   *        but sets it directly to a value.
+   *
+   * @return {number|null}
+   *         Either a number representing a new timestamp offset, or null if the segment is
+   *         part of the same timeline
+   */
+
+  const timestampOffsetForSegment = ({
+    segmentTimeline,
+    currentTimeline,
+    startOfSegment,
+    buffered,
+    overrideCheck
+  }) => {
+    // Check to see if we are crossing a discontinuity to see if we need to set the
+    // timestamp offset on the transmuxer and source buffer.
+    //
+    // Previously, we changed the timestampOffset if the start of this segment was less than
+    // the currently set timestampOffset, but this isn't desirable as it can produce bad
+    // behavior, especially around long running live streams.
+    if (!overrideCheck && segmentTimeline === currentTimeline) {
+      return null;
+    } // When changing renditions, it's possible to request a segment on an older timeline. For
+    // instance, given two renditions with the following:
+    //
+    // #EXTINF:10
+    // segment1
+    // #EXT-X-DISCONTINUITY
+    // #EXTINF:10
+    // segment2
+    // #EXTINF:10
+    // segment3
+    //
+    // And the current player state:
+    //
+    // current time: 8
+    // buffer: 0 => 20
+    //
+    // The next segment on the current rendition would be segment3, filling the buffer from
+    // 20s onwards. However, if a rendition switch happens after segment2 was requested,
+    // then the next segment to be requested will be segment1 from the new rendition in
+    // order to fill time 8 and onwards. Using the buffered end would result in repeated
+    // content (since it would position segment1 of the new rendition starting at 20s). This
+    // case can be identified when the new segment's timeline is a prior value. Instead of
+    // using the buffered end, the startOfSegment can be used, which, hopefully, will be
+    // more accurate to the actual start time of the segment.
+
+    if (segmentTimeline < currentTimeline) {
+      return startOfSegment;
+    } // segmentInfo.startOfSegment used to be used as the timestamp offset, however, that
+    // value uses the end of the last segment if it is available. While this value
+    // should often be correct, it's better to rely on the buffered end, as the new
+    // content post discontinuity should line up with the buffered end as if it were
+    // time 0 for the new content.
+
+    return buffered.length ? buffered.end(buffered.length - 1) : startOfSegment;
+  };
+  /**
+   * Returns whether or not the loader should wait for a timeline change from the timeline
+   * change controller before processing the segment.
+   *
+   * Primary timing in VHS goes by video. This is different from most media players, as
+   * audio is more often used as the primary timing source. For the foreseeable future, VHS
+   * will continue to use video as the primary timing source, due to the current logic and
+   * expectations built around it.
+
+   * Since the timing follows video, in order to maintain sync, the video loader is
+   * responsible for setting both audio and video source buffer timestamp offsets.
+   *
+   * Setting different values for audio and video source buffers could lead to
+   * desyncing. The following examples demonstrate some of the situations where this
+   * distinction is important. Note that all of these cases involve demuxed content. When
+   * content is muxed, the audio and video are packaged together, therefore syncing
+   * separate media playlists is not an issue.
+   *
+   * CASE 1: Audio prepares to load a new timeline before video:
+   *
+   * Timeline:       0                 1
+   * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Audio Loader:                     ^
+   * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Video Loader              ^
+   *
+   * In the above example, the audio loader is preparing to load the 6th segment, the first
+   * after a discontinuity, while the video loader is still loading the 5th segment, before
+   * the discontinuity.
+   *
+   * If the audio loader goes ahead and loads and appends the 6th segment before the video
+   * loader crosses the discontinuity, then when appended, the 6th audio segment will use
+   * the timestamp offset from timeline 0. This will likely lead to desyncing. In addition,
+   * the audio loader must provide the audioAppendStart value to trim the content in the
+   * transmuxer, and that value relies on the audio timestamp offset. Since the audio
+   * timestamp offset is set by the video (main) loader, the audio loader shouldn't load the
+   * segment until that value is provided.
+   *
+   * CASE 2: Video prepares to load a new timeline before audio:
+   *
+   * Timeline:       0                 1
+   * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Audio Loader:             ^
+   * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Video Loader                      ^
+   *
+   * In the above example, the video loader is preparing to load the 6th segment, the first
+   * after a discontinuity, while the audio loader is still loading the 5th segment, before
+   * the discontinuity.
+   *
+   * If the video loader goes ahead and loads and appends the 6th segment, then once the
+   * segment is loaded and processed, both the video and audio timestamp offsets will be
+   * set, since video is used as the primary timing source. This is to ensure content lines
+   * up appropriately, as any modifications to the video timing are reflected by audio when
+   * the video loader sets the audio and video timestamp offsets to the same value. However,
+   * setting the timestamp offset for audio before audio has had a chance to change
+   * timelines will likely lead to desyncing, as the audio loader will append segment 5 with
+   * a timestamp intended to apply to segments from timeline 1 rather than timeline 0.
+   *
+   * CASE 3: When seeking, audio prepares to load a new timeline before video
+   *
+   * Timeline:       0                 1
+   * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Audio Loader:           ^
+   * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Video Loader            ^
+   *
+   * In the above example, both audio and video loaders are loading segments from timeline
+   * 0, but imagine that the seek originated from timeline 1.
+   *
+   * When seeking to a new timeline, the timestamp offset will be set based on the expected
+   * segment start of the loaded video segment. In order to maintain sync, the audio loader
+   * must wait for the video loader to load its segment and update both the audio and video
+   * timestamp offsets before it may load and append its own segment. This is the case
+   * whether the seek results in a mismatched segment request (e.g., the audio loader
+   * chooses to load segment 3 and the video loader chooses to load segment 4) or the
+   * loaders choose to load the same segment index from each playlist, as the segments may
+   * not be aligned perfectly, even for matching segment indexes.
+   *
+   * @param {Object} timelinechangeController
+   * @param {number} currentTimeline
+   *        The timeline currently being followed by the loader
+   * @param {number} segmentTimeline
+   *        The timeline of the segment being loaded
+   * @param {('main'|'audio')} loaderType
+   *        The loader type
+   * @param {boolean} audioDisabled
+   *        Whether the audio is disabled for the loader. This should only be true when the
+   *        loader may have muxed audio in its segment, but should not append it, e.g., for
+   *        the main loader when an alternate audio playlist is active.
+   *
+   * @return {boolean}
+   *         Whether the loader should wait for a timeline change from the timeline change
+   *         controller before processing the segment
+   */
+
+  const shouldWaitForTimelineChange = ({
+    timelineChangeController,
+    currentTimeline,
+    segmentTimeline,
+    loaderType,
+    audioDisabled
+  }) => {
+    if (currentTimeline === segmentTimeline) {
+      return false;
+    }
+    if (loaderType === 'audio') {
+      const lastMainTimelineChange = timelineChangeController.lastTimelineChange({
+        type: 'main'
+      }); // Audio loader should wait if:
+      //
+      // * main hasn't had a timeline change yet (thus has not loaded its first segment)
+      // * main hasn't yet changed to the timeline audio is looking to load
+
+      return !lastMainTimelineChange || lastMainTimelineChange.to !== segmentTimeline;
+    } // The main loader only needs to wait for timeline changes if there's demuxed audio.
+    // Otherwise, there's nothing to wait for, since audio would be muxed into the main
+    // loader's segments (or the content is audio/video only and handled by the main
+    // loader).
+
+    if (loaderType === 'main' && audioDisabled) {
+      const pendingAudioTimelineChange = timelineChangeController.pendingTimelineChange({
+        type: 'audio'
+      }); // Main loader should wait for the audio loader if audio is not pending a timeline
+      // change to the current timeline.
+      //
+      // Since the main loader is responsible for setting the timestamp offset for both
+      // audio and video, the main loader must wait for audio to be about to change to its
+      // timeline before setting the offset, otherwise, if audio is behind in loading,
+      // segments from the previous timeline would be adjusted by the new timestamp offset.
+      //
+      // This requirement means that video will not cross a timeline until the audio is
+      // about to cross to it, so that way audio and video will always cross the timeline
+      // together.
+      //
+      // In addition to normal timeline changes, these rules also apply to the start of a
+      // stream (going from a non-existent timeline, -1, to timeline 0). It's important
+      // that these rules apply to the first timeline change because if they did not, it's
+      // possible that the main loader will cross two timelines before the audio loader has
+      // crossed one. Logic may be implemented to handle the startup as a special case, but
+      // it's easier to simply treat all timeline changes the same.
+
+      if (pendingAudioTimelineChange && pendingAudioTimelineChange.to === segmentTimeline) {
+        return false;
+      }
+      return true;
+    }
+    return false;
+  };
+  const mediaDuration = timingInfos => {
+    let maxDuration = 0;
+    ['video', 'audio'].forEach(function (type) {
+      const typeTimingInfo = timingInfos[`${type}TimingInfo`];
+      if (!typeTimingInfo) {
+        return;
+      }
+      const {
+        start,
+        end
+      } = typeTimingInfo;
+      let duration;
+      if (typeof start === 'bigint' || typeof end === 'bigint') {
+        duration = window.BigInt(end) - window.BigInt(start);
+      } else if (typeof start === 'number' && typeof end === 'number') {
+        duration = end - start;
+      }
+      if (typeof duration !== 'undefined' && duration > maxDuration) {
+        maxDuration = duration;
+      }
+    }); // convert back to a number if it is lower than MAX_SAFE_INTEGER
+    // as we only need BigInt when we are above that.
+
+    if (typeof maxDuration === 'bigint' && maxDuration < Number.MAX_SAFE_INTEGER) {
+      maxDuration = Number(maxDuration);
+    }
+    return maxDuration;
+  };
+  const segmentTooLong = ({
+    segmentDuration,
+    maxDuration
+  }) => {
+    // 0 duration segments are most likely due to metadata only segments or a lack of
+    // information.
+    if (!segmentDuration) {
+      return false;
+    } // For HLS:
+    //
+    // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.3.1
+    // The EXTINF duration of each Media Segment in the Playlist
+    // file, when rounded to the nearest integer, MUST be less than or equal
+    // to the target duration; longer segments can trigger playback stalls
+    // or other errors.
+    //
+    // For DASH, the mpd-parser uses the largest reported segment duration as the target
+    // duration. Although that reported duration is occasionally approximate (i.e., not
+    // exact), a strict check may report that a segment is too long more often in DASH.
+
+    return Math.round(segmentDuration) > maxDuration + TIME_FUDGE_FACTOR;
+  };
+  const getTroublesomeSegmentDurationMessage = (segmentInfo, sourceType) => {
+    // Right now we aren't following DASH's timing model exactly, so only perform
+    // this check for HLS content.
+    if (sourceType !== 'hls') {
+      return null;
+    }
+    const segmentDuration = mediaDuration({
+      audioTimingInfo: segmentInfo.audioTimingInfo,
+      videoTimingInfo: segmentInfo.videoTimingInfo
+    }); // Don't report if we lack information.
+    //
+    // If the segment has a duration of 0 it is either a lack of information or a
+    // metadata only segment and shouldn't be reported here.
+
+    if (!segmentDuration) {
+      return null;
+    }
+    const targetDuration = segmentInfo.playlist.targetDuration;
+    const isSegmentWayTooLong = segmentTooLong({
+      segmentDuration,
+      maxDuration: targetDuration * 2
+    });
+    const isSegmentSlightlyTooLong = segmentTooLong({
+      segmentDuration,
+      maxDuration: targetDuration
+    });
+    const segmentTooLongMessage = `Segment with index ${segmentInfo.mediaIndex} ` + `from playlist ${segmentInfo.playlist.id} ` + `has a duration of ${segmentDuration} ` + `when the reported duration is ${segmentInfo.duration} ` + `and the target duration is ${targetDuration}. ` + 'For HLS content, a duration in excess of the target duration may result in ' + 'playback issues. See the HLS specification section on EXT-X-TARGETDURATION for ' + 'more details: ' + 'https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.3.1';
+    if (isSegmentWayTooLong || isSegmentSlightlyTooLong) {
+      return {
+        severity: isSegmentWayTooLong ? 'warn' : 'info',
+        message: segmentTooLongMessage
+      };
+    }
+    return null;
+  };
+  /**
+   * An object that manages segment loading and appending.
+   *
+   * @class SegmentLoader
+   * @param {Object} options required and optional options
+   * @extends videojs.EventTarget
+   */
+
+  class SegmentLoader extends videojs.EventTarget {
+    constructor(settings, options = {}) {
+      super(); // check pre-conditions
+
+      if (!settings) {
+        throw new TypeError('Initialization settings are required');
+      }
+      if (typeof settings.currentTime !== 'function') {
+        throw new TypeError('No currentTime getter specified');
+      }
+      if (!settings.mediaSource) {
+        throw new TypeError('No MediaSource specified');
+      } // public properties
+
+      this.bandwidth = settings.bandwidth;
+      this.throughput = {
+        rate: 0,
+        count: 0
+      };
+      this.roundTrip = NaN;
+      this.resetStats_();
+      this.mediaIndex = null;
+      this.partIndex = null; // private settings
+
+      this.hasPlayed_ = settings.hasPlayed;
+      this.currentTime_ = settings.currentTime;
+      this.seekable_ = settings.seekable;
+      this.seeking_ = settings.seeking;
+      this.duration_ = settings.duration;
+      this.mediaSource_ = settings.mediaSource;
+      this.vhs_ = settings.vhs;
+      this.loaderType_ = settings.loaderType;
+      this.currentMediaInfo_ = void 0;
+      this.startingMediaInfo_ = void 0;
+      this.segmentMetadataTrack_ = settings.segmentMetadataTrack;
+      this.goalBufferLength_ = settings.goalBufferLength;
+      this.sourceType_ = settings.sourceType;
+      this.sourceUpdater_ = settings.sourceUpdater;
+      this.inbandTextTracks_ = settings.inbandTextTracks;
+      this.state_ = 'INIT';
+      this.timelineChangeController_ = settings.timelineChangeController;
+      this.shouldSaveSegmentTimingInfo_ = true;
+      this.parse708captions_ = settings.parse708captions;
+      this.useDtsForTimestampOffset_ = settings.useDtsForTimestampOffset;
+      this.captionServices_ = settings.captionServices;
+      this.exactManifestTimings = settings.exactManifestTimings;
+      this.addMetadataToTextTrack = settings.addMetadataToTextTrack; // private instance variables
+
+      this.checkBufferTimeout_ = null;
+      this.error_ = void 0;
+      this.currentTimeline_ = -1;
+      this.shouldForceTimestampOffsetAfterResync_ = false;
+      this.pendingSegment_ = null;
+      this.xhrOptions_ = null;
+      this.pendingSegments_ = [];
+      this.audioDisabled_ = false;
+      this.isPendingTimestampOffset_ = false; // TODO possibly move gopBuffer and timeMapping info to a separate controller
+
+      this.gopBuffer_ = [];
+      this.timeMapping_ = 0;
+      this.safeAppend_ = false;
+      this.appendInitSegment_ = {
+        audio: true,
+        video: true
+      };
+      this.playlistOfLastInitSegment_ = {
+        audio: null,
+        video: null
+      };
+      this.callQueue_ = []; // If the segment loader prepares to load a segment, but does not have enough
+      // information yet to start the loading process (e.g., if the audio loader wants to
+      // load a segment from the next timeline but the main loader hasn't yet crossed that
+      // timeline), then the load call will be added to the queue until it is ready to be
+      // processed.
+
+      this.loadQueue_ = [];
+      this.metadataQueue_ = {
+        id3: [],
+        caption: []
+      };
+      this.waitingOnRemove_ = false;
+      this.quotaExceededErrorRetryTimeout_ = null; // Fragmented mp4 playback
+
+      this.activeInitSegmentId_ = null;
+      this.initSegments_ = {}; // HLSe playback
+
+      this.cacheEncryptionKeys_ = settings.cacheEncryptionKeys;
+      this.keyCache_ = {};
+      this.decrypter_ = settings.decrypter; // Manages the tracking and generation of sync-points, mappings
+      // between a time in the display time and a segment index within
+      // a playlist
+
+      this.syncController_ = settings.syncController;
+      this.syncPoint_ = {
+        segmentIndex: 0,
+        time: 0
+      };
+      this.transmuxer_ = this.createTransmuxer_();
+      this.triggerSyncInfoUpdate_ = () => this.trigger('syncinfoupdate');
+      this.syncController_.on('syncinfoupdate', this.triggerSyncInfoUpdate_);
+      this.mediaSource_.addEventListener('sourceopen', () => {
+        if (!this.isEndOfStream_()) {
+          this.ended_ = false;
+        }
+      }); // ...for determining the fetch location
+
+      this.fetchAtBuffer_ = false;
+      this.logger_ = logger(`SegmentLoader[${this.loaderType_}]`);
+      Object.defineProperty(this, 'state', {
+        get() {
+          return this.state_;
+        },
+        set(newState) {
+          if (newState !== this.state_) {
+            this.logger_(`${this.state_} -> ${newState}`);
+            this.state_ = newState;
+            this.trigger('statechange');
+          }
+        }
+      });
+      this.sourceUpdater_.on('ready', () => {
+        if (this.hasEnoughInfoToAppend_()) {
+          this.processCallQueue_();
+        }
+      }); // Only the main loader needs to listen for pending timeline changes, as the main
+      // loader should wait for audio to be ready to change its timeline so that both main
+      // and audio timelines change together. For more details, see the
+      // shouldWaitForTimelineChange function.
+
+      if (this.loaderType_ === 'main') {
+        this.timelineChangeController_.on('pendingtimelinechange', () => {
+          if (this.hasEnoughInfoToAppend_()) {
+            this.processCallQueue_();
+          }
+        });
+      } // The main loader only listens on pending timeline changes, but the audio loader,
+      // since its loads follow main, needs to listen on timeline changes. For more details,
+      // see the shouldWaitForTimelineChange function.
+
+      if (this.loaderType_ === 'audio') {
+        this.timelineChangeController_.on('timelinechange', () => {
+          if (this.hasEnoughInfoToLoad_()) {
+            this.processLoadQueue_();
+          }
+          if (this.hasEnoughInfoToAppend_()) {
+            this.processCallQueue_();
+          }
+        });
+      }
+    }
+    /**
+     * TODO: Current sync controller consists of many hls-specific strategies
+     * media sequence sync is also hls-specific, and we would like to be protocol-agnostic on this level
+     * this should be a part of the sync-controller and sync controller should expect different strategy list based on the protocol.
+     *
+     * @return {MediaSequenceSync|null}
+     * @private
+     */
+
+    get mediaSequenceSync_() {
+      return this.syncController_.getMediaSequenceSync(this.loaderType_);
+    }
+    createTransmuxer_() {
+      return segmentTransmuxer.createTransmuxer({
+        remux: false,
+        alignGopsAtEnd: this.safeAppend_,
+        keepOriginalTimestamps: true,
+        parse708captions: this.parse708captions_,
+        captionServices: this.captionServices_
+      });
+    }
+    /**
+     * reset all of our media stats
+     *
+     * @private
+     */
+
+    resetStats_() {
+      this.mediaBytesTransferred = 0;
+      this.mediaRequests = 0;
+      this.mediaRequestsAborted = 0;
+      this.mediaRequestsTimedout = 0;
+      this.mediaRequestsErrored = 0;
+      this.mediaTransferDuration = 0;
+      this.mediaSecondsLoaded = 0;
+      this.mediaAppends = 0;
+    }
+    /**
+     * dispose of the SegmentLoader and reset to the default state
+     */
+
+    dispose() {
+      this.trigger('dispose');
+      this.state = 'DISPOSED';
+      this.pause();
+      this.abort_();
+      if (this.transmuxer_) {
+        this.transmuxer_.terminate();
+      }
+      this.resetStats_();
+      if (this.checkBufferTimeout_) {
+        window.clearTimeout(this.checkBufferTimeout_);
+      }
+      if (this.syncController_ && this.triggerSyncInfoUpdate_) {
+        this.syncController_.off('syncinfoupdate', this.triggerSyncInfoUpdate_);
+      }
+      this.off();
+    }
+    setAudio(enable) {
+      this.audioDisabled_ = !enable;
+      if (enable) {
+        this.appendInitSegment_.audio = true;
+      } else {
+        // remove current track audio if it gets disabled
+        this.sourceUpdater_.removeAudio(0, this.duration_());
+      }
+    }
+    /**
+     * abort anything that is currently doing on with the SegmentLoader
+     * and reset to a default state
+     */
+
+    abort() {
+      if (this.state !== 'WAITING') {
+        if (this.pendingSegment_) {
+          this.pendingSegment_ = null;
+        }
+        return;
+      }
+      this.abort_(); // We aborted the requests we were waiting on, so reset the loader's state to READY
+      // since we are no longer "waiting" on any requests. XHR callback is not always run
+      // when the request is aborted. This will prevent the loader from being stuck in the
+      // WAITING state indefinitely.
+
+      this.state = 'READY'; // don't wait for buffer check timeouts to begin fetching the
+      // next segment
+
+      if (!this.paused()) {
+        this.monitorBuffer_();
+      }
+    }
+    /**
+     * abort all pending xhr requests and null any pending segements
+     *
+     * @private
+     */
+
+    abort_() {
+      if (this.pendingSegment_ && this.pendingSegment_.abortRequests) {
+        this.pendingSegment_.abortRequests();
+      } // clear out the segment being processed
+
+      this.pendingSegment_ = null;
+      this.callQueue_ = [];
+      this.loadQueue_ = [];
+      this.metadataQueue_.id3 = [];
+      this.metadataQueue_.caption = [];
+      this.timelineChangeController_.clearPendingTimelineChange(this.loaderType_);
+      this.waitingOnRemove_ = false;
+      window.clearTimeout(this.quotaExceededErrorRetryTimeout_);
+      this.quotaExceededErrorRetryTimeout_ = null;
+    }
+    checkForAbort_(requestId) {
+      // If the state is APPENDING, then aborts will not modify the state, meaning the first
+      // callback that happens should reset the state to READY so that loading can continue.
+      if (this.state === 'APPENDING' && !this.pendingSegment_) {
+        this.state = 'READY';
+        return true;
+      }
+      if (!this.pendingSegment_ || this.pendingSegment_.requestId !== requestId) {
+        return true;
+      }
+      return false;
+    }
+    /**
+     * set an error on the segment loader and null out any pending segements
+     *
+     * @param {Error} error the error to set on the SegmentLoader
+     * @return {Error} the error that was set or that is currently set
+     */
+
+    error(error) {
+      if (typeof error !== 'undefined') {
+        this.logger_('error occurred:', error);
+        this.error_ = error;
+      }
+      this.pendingSegment_ = null;
+      return this.error_;
+    }
+    endOfStream() {
+      this.ended_ = true;
+      if (this.transmuxer_) {
+        // need to clear out any cached data to prepare for the new segment
+        segmentTransmuxer.reset(this.transmuxer_);
+      }
+      this.gopBuffer_.length = 0;
+      this.pause();
+      this.trigger('ended');
+    }
+    /**
+     * Indicates which time ranges are buffered
+     *
+     * @return {TimeRange}
+     *         TimeRange object representing the current buffered ranges
+     */
+
+    buffered_() {
+      const trackInfo = this.getMediaInfo_();
+      if (!this.sourceUpdater_ || !trackInfo) {
+        return createTimeRanges();
+      }
+      if (this.loaderType_ === 'main') {
+        const {
+          hasAudio,
+          hasVideo,
+          isMuxed
+        } = trackInfo;
+        if (hasVideo && hasAudio && !this.audioDisabled_ && !isMuxed) {
+          return this.sourceUpdater_.buffered();
+        }
+        if (hasVideo) {
+          return this.sourceUpdater_.videoBuffered();
+        }
+      } // One case that can be ignored for now is audio only with alt audio,
+      // as we don't yet have proper support for that.
+
+      return this.sourceUpdater_.audioBuffered();
+    }
+    /**
+     * Gets and sets init segment for the provided map
+     *
+     * @param {Object} map
+     *        The map object representing the init segment to get or set
+     * @param {boolean=} set
+     *        If true, the init segment for the provided map should be saved
+     * @return {Object}
+     *         map object for desired init segment
+     */
+
+    initSegmentForMap(map, set = false) {
+      if (!map) {
+        return null;
+      }
+      const id = initSegmentId(map);
+      let storedMap = this.initSegments_[id];
+      if (set && !storedMap && map.bytes) {
+        this.initSegments_[id] = storedMap = {
+          resolvedUri: map.resolvedUri,
+          byterange: map.byterange,
+          bytes: map.bytes,
+          tracks: map.tracks,
+          timescales: map.timescales
+        };
+      }
+      return storedMap || map;
+    }
+    /**
+     * Gets and sets key for the provided key
+     *
+     * @param {Object} key
+     *        The key object representing the key to get or set
+     * @param {boolean=} set
+     *        If true, the key for the provided key should be saved
+     * @return {Object}
+     *         Key object for desired key
+     */
+
+    segmentKey(key, set = false) {
+      if (!key) {
+        return null;
+      }
+      const id = segmentKeyId(key);
+      let storedKey = this.keyCache_[id]; // TODO: We should use the HTTP Expires header to invalidate our cache per
+      // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-6.2.3
+
+      if (this.cacheEncryptionKeys_ && set && !storedKey && key.bytes) {
+        this.keyCache_[id] = storedKey = {
+          resolvedUri: key.resolvedUri,
+          bytes: key.bytes
+        };
+      }
+      const result = {
+        resolvedUri: (storedKey || key).resolvedUri
+      };
+      if (storedKey) {
+        result.bytes = storedKey.bytes;
+      }
+      return result;
+    }
+    /**
+     * Returns true if all configuration required for loading is present, otherwise false.
+     *
+     * @return {boolean} True if the all configuration is ready for loading
+     * @private
+     */
+
+    couldBeginLoading_() {
+      return this.playlist_ && !this.paused();
+    }
+    /**
+     * load a playlist and start to fill the buffer
+     */
+
+    load() {
+      // un-pause
+      this.monitorBuffer_(); // if we don't have a playlist yet, keep waiting for one to be
+      // specified
+
+      if (!this.playlist_) {
+        return;
+      } // if all the configuration is ready, initialize and begin loading
+
+      if (this.state === 'INIT' && this.couldBeginLoading_()) {
+        return this.init_();
+      } // if we're in the middle of processing a segment already, don't
+      // kick off an additional segment request
+
+      if (!this.couldBeginLoading_() || this.state !== 'READY' && this.state !== 'INIT') {
+        return;
+      }
+      this.state = 'READY';
+    }
+    /**
+     * Once all the starting parameters have been specified, begin
+     * operation. This method should only be invoked from the INIT
+     * state.
+     *
+     * @private
+     */
+
+    init_() {
+      this.state = 'READY'; // if this is the audio segment loader, and it hasn't been inited before, then any old
+      // audio data from the muxed content should be removed
+
+      this.resetEverything();
+      return this.monitorBuffer_();
+    }
+    /**
+     * set a playlist on the segment loader
+     *
+     * @param {PlaylistLoader} media the playlist to set on the segment loader
+     */
+
+    playlist(newPlaylist, options = {}) {
+      if (!newPlaylist) {
+        return;
+      }
+      const oldPlaylist = this.playlist_;
+      const segmentInfo = this.pendingSegment_;
+      this.playlist_ = newPlaylist;
+      this.xhrOptions_ = options; // when we haven't started playing yet, the start of a live playlist
+      // is always our zero-time so force a sync update each time the playlist
+      // is refreshed from the server
+      //
+      // Use the INIT state to determine if playback has started, as the playlist sync info
+      // should be fixed once requests begin (as sync points are generated based on sync
+      // info), but not before then.
+
+      if (this.state === 'INIT') {
+        newPlaylist.syncInfo = {
+          mediaSequence: newPlaylist.mediaSequence,
+          time: 0
+        }; // Setting the date time mapping means mapping the program date time (if available)
+        // to time 0 on the player's timeline. The playlist's syncInfo serves a similar
+        // purpose, mapping the initial mediaSequence to time zero. Since the syncInfo can
+        // be updated as the playlist is refreshed before the loader starts loading, the
+        // program date time mapping needs to be updated as well.
+        //
+        // This mapping is only done for the main loader because a program date time should
+        // map equivalently between playlists.
+
+        if (this.loaderType_ === 'main') {
+          this.syncController_.setDateTimeMappingForStart(newPlaylist);
+        }
+      }
+      let oldId = null;
+      if (oldPlaylist) {
+        if (oldPlaylist.id) {
+          oldId = oldPlaylist.id;
+        } else if (oldPlaylist.uri) {
+          oldId = oldPlaylist.uri;
+        }
+      }
+      this.logger_(`playlist update [${oldId} => ${newPlaylist.id || newPlaylist.uri}]`);
+      if (this.mediaSequenceSync_) {
+        this.mediaSequenceSync_.update(newPlaylist, this.currentTime_());
+        this.logger_(`Playlist update:
+currentTime: ${this.currentTime_()}
+bufferedEnd: ${lastBufferedEnd(this.buffered_())}
+`, this.mediaSequenceSync_.diagnostics);
+      } // in VOD, this is always a rendition switch (or we updated our syncInfo above)
+      // in LIVE, we always want to update with new playlists (including refreshes)
+
+      this.trigger('syncinfoupdate'); // if we were unpaused but waiting for a playlist, start
+      // buffering now
+
+      if (this.state === 'INIT' && this.couldBeginLoading_()) {
+        return this.init_();
+      }
+      if (!oldPlaylist || oldPlaylist.uri !== newPlaylist.uri) {
+        if (this.mediaIndex !== null) {
+          // we must reset/resync the segment loader when we switch renditions and
+          // the segment loader is already synced to the previous rendition
+          // We only want to reset the loader here for LLHLS playback, as resetLoader sets fetchAtBuffer_
+          // to false, resulting in fetching segments at currentTime and causing repeated
+          // same-segment requests on playlist change. This erroneously drives up the playback watcher
+          // stalled segment count, as re-requesting segments at the currentTime or browser cached segments
+          // will not change the buffer.
+          // Reference for LLHLS fixes: https://github.com/videojs/http-streaming/pull/1201
+          const isLLHLS = !newPlaylist.endList && typeof newPlaylist.partTargetDuration === 'number';
+          if (isLLHLS) {
+            this.resetLoader();
+          } else {
+            this.resyncLoader();
+          }
+        }
+        this.currentMediaInfo_ = void 0;
+        this.trigger('playlistupdate'); // the rest of this function depends on `oldPlaylist` being defined
+
+        return;
+      } // we reloaded the same playlist so we are in a live scenario
+      // and we will likely need to adjust the mediaIndex
+
+      const mediaSequenceDiff = newPlaylist.mediaSequence - oldPlaylist.mediaSequence;
+      this.logger_(`live window shift [${mediaSequenceDiff}]`); // update the mediaIndex on the SegmentLoader
+      // this is important because we can abort a request and this value must be
+      // equal to the last appended mediaIndex
+
+      if (this.mediaIndex !== null) {
+        this.mediaIndex -= mediaSequenceDiff; // this can happen if we are going to load the first segment, but get a playlist
+        // update during that. mediaIndex would go from 0 to -1 if mediaSequence in the
+        // new playlist was incremented by 1.
+
+        if (this.mediaIndex < 0) {
+          this.mediaIndex = null;
+          this.partIndex = null;
+        } else {
+          const segment = this.playlist_.segments[this.mediaIndex]; // partIndex should remain the same for the same segment
+          // unless parts fell off of the playlist for this segment.
+          // In that case we need to reset partIndex and resync
+
+          if (this.partIndex && (!segment.parts || !segment.parts.length || !segment.parts[this.partIndex])) {
+            const mediaIndex = this.mediaIndex;
+            this.logger_(`currently processing part (index ${this.partIndex}) no longer exists.`);
+            this.resetLoader(); // We want to throw away the partIndex and the data associated with it,
+            // as the part was dropped from our current playlists segment.
+            // The mediaIndex will still be valid so keep that around.
+
+            this.mediaIndex = mediaIndex;
+          }
+        }
+      } // update the mediaIndex on the SegmentInfo object
+      // this is important because we will update this.mediaIndex with this value
+      // in `handleAppendsDone_` after the segment has been successfully appended
+
+      if (segmentInfo) {
+        segmentInfo.mediaIndex -= mediaSequenceDiff;
+        if (segmentInfo.mediaIndex < 0) {
+          segmentInfo.mediaIndex = null;
+          segmentInfo.partIndex = null;
+        } else {
+          // we need to update the referenced segment so that timing information is
+          // saved for the new playlist's segment, however, if the segment fell off the
+          // playlist, we can leave the old reference and just lose the timing info
+          if (segmentInfo.mediaIndex >= 0) {
+            segmentInfo.segment = newPlaylist.segments[segmentInfo.mediaIndex];
+          }
+          if (segmentInfo.partIndex >= 0 && segmentInfo.segment.parts) {
+            segmentInfo.part = segmentInfo.segment.parts[segmentInfo.partIndex];
+          }
+        }
+      }
+      this.syncController_.saveExpiredSegmentInfo(oldPlaylist, newPlaylist);
+    }
+    /**
+     * Prevent the loader from fetching additional segments. If there
+     * is a segment request outstanding, it will finish processing
+     * before the loader halts. A segment loader can be unpaused by
+     * calling load().
+     */
+
+    pause() {
+      if (this.checkBufferTimeout_) {
+        window.clearTimeout(this.checkBufferTimeout_);
+        this.checkBufferTimeout_ = null;
+      }
+    }
+    /**
+     * Returns whether the segment loader is fetching additional
+     * segments when given the opportunity. This property can be
+     * modified through calls to pause() and load().
+     */
+
+    paused() {
+      return this.checkBufferTimeout_ === null;
+    }
+    /**
+     * Delete all the buffered data and reset the SegmentLoader
+     *
+     * @param {Function} [done] an optional callback to be executed when the remove
+     * operation is complete
+     */
+
+    resetEverything(done) {
+      this.ended_ = false;
+      this.activeInitSegmentId_ = null;
+      this.appendInitSegment_ = {
+        audio: true,
+        video: true
+      };
+      this.resetLoader(); // remove from 0, the earliest point, to Infinity, to signify removal of everything.
+      // VTT Segment Loader doesn't need to do anything but in the regular SegmentLoader,
+      // we then clamp the value to duration if necessary.
+
+      this.remove(0, Infinity, done); // clears fmp4 captions
+
+      if (this.transmuxer_) {
+        this.transmuxer_.postMessage({
+          action: 'clearAllMp4Captions'
+        }); // reset the cache in the transmuxer
+
+        this.transmuxer_.postMessage({
+          action: 'reset'
+        });
+      }
+    }
+    /**
+     * Force the SegmentLoader to resync and start loading around the currentTime instead
+     * of starting at the end of the buffer
+     *
+     * Useful for fast quality changes
+     */
+
+    resetLoader() {
+      this.fetchAtBuffer_ = false;
+      if (this.mediaSequenceSync_) {
+        this.mediaSequenceSync_.resetAppendedStatus();
+      }
+      this.resyncLoader();
+    }
+    /**
+     * Force the SegmentLoader to restart synchronization and make a conservative guess
+     * before returning to the simple walk-forward method
+     */
+
+    resyncLoader() {
+      if (this.transmuxer_) {
+        // need to clear out any cached data to prepare for the new segment
+        segmentTransmuxer.reset(this.transmuxer_);
+      }
+      this.mediaIndex = null;
+      this.partIndex = null;
+      this.syncPoint_ = null;
+      this.isPendingTimestampOffset_ = false; // this is mainly to sync timing-info when switching between renditions with and without timestamp-rollover,
+      // so we don't want it for DASH or fragmented mp4 segments.
+
+      const isFmp4 = this.currentMediaInfo_ && this.currentMediaInfo_.isFmp4;
+      const isHlsTs = this.sourceType_ === 'hls' && !isFmp4;
+      if (isHlsTs) {
+        this.shouldForceTimestampOffsetAfterResync_ = true;
+      }
+      this.callQueue_ = [];
+      this.loadQueue_ = [];
+      this.metadataQueue_.id3 = [];
+      this.metadataQueue_.caption = [];
+      this.abort();
+      if (this.transmuxer_) {
+        this.transmuxer_.postMessage({
+          action: 'clearParsedMp4Captions'
+        });
+      }
+    }
+    /**
+     * Remove any data in the source buffer between start and end times
+     *
+     * @param {number} start - the start time of the region to remove from the buffer
+     * @param {number} end - the end time of the region to remove from the buffer
+     * @param {Function} [done] - an optional callback to be executed when the remove
+     * @param {boolean} force - force all remove operations to happen
+     * operation is complete
+     */
+
+    remove(start, end, done = () => {}, force = false) {
+      // clamp end to duration if we need to remove everything.
+      // This is due to a browser bug that causes issues if we remove to Infinity.
+      // videojs/videojs-contrib-hls#1225
+      if (end === Infinity) {
+        end = this.duration_();
+      } // skip removes that would throw an error
+      // commonly happens during a rendition switch at the start of a video
+      // from start 0 to end 0
+
+      if (end <= start) {
+        this.logger_('skipping remove because end ${end} is <= start ${start}');
+        return;
+      }
+      if (!this.sourceUpdater_ || !this.getMediaInfo_()) {
+        this.logger_('skipping remove because no source updater or starting media info'); // nothing to remove if we haven't processed any media
+
+        return;
+      } // set it to one to complete this function's removes
+
+      let removesRemaining = 1;
+      const removeFinished = () => {
+        removesRemaining--;
+        if (removesRemaining === 0) {
+          done();
+        }
+      };
+      if (force || !this.audioDisabled_) {
+        removesRemaining++;
+        this.sourceUpdater_.removeAudio(start, end, removeFinished);
+      } // While it would be better to only remove video if the main loader has video, this
+      // should be safe with audio only as removeVideo will call back even if there's no
+      // video buffer.
+      //
+      // In theory we can check to see if there's video before calling the remove, but in
+      // the event that we're switching between renditions and from video to audio only
+      // (when we add support for that), we may need to clear the video contents despite
+      // what the new media will contain.
+
+      if (force || this.loaderType_ === 'main') {
+        this.gopBuffer_ = removeGopBuffer(this.gopBuffer_, start, end, this.timeMapping_);
+        removesRemaining++;
+        this.sourceUpdater_.removeVideo(start, end, removeFinished);
+      } // remove any captions and ID3 tags
+
+      for (const track in this.inbandTextTracks_) {
+        removeCuesFromTrack(start, end, this.inbandTextTracks_[track]);
+      }
+      removeCuesFromTrack(start, end, this.segmentMetadataTrack_); // finished this function's removes
+
+      removeFinished();
+    }
+    /**
+     * (re-)schedule monitorBufferTick_ to run as soon as possible
+     *
+     * @private
+     */
+
+    monitorBuffer_() {
+      if (this.checkBufferTimeout_) {
+        window.clearTimeout(this.checkBufferTimeout_);
+      }
+      this.checkBufferTimeout_ = window.setTimeout(this.monitorBufferTick_.bind(this), 1);
+    }
+    /**
+     * As long as the SegmentLoader is in the READY state, periodically
+     * invoke fillBuffer_().
+     *
+     * @private
+     */
+
+    monitorBufferTick_() {
+      if (this.state === 'READY') {
+        this.fillBuffer_();
+      }
+      if (this.checkBufferTimeout_) {
+        window.clearTimeout(this.checkBufferTimeout_);
+      }
+      this.checkBufferTimeout_ = window.setTimeout(this.monitorBufferTick_.bind(this), CHECK_BUFFER_DELAY);
+    }
+    /**
+     * fill the buffer with segements unless the sourceBuffers are
+     * currently updating
+     *
+     * Note: this function should only ever be called by monitorBuffer_
+     * and never directly
+     *
+     * @private
+     */
+
+    fillBuffer_() {
+      // TODO since the source buffer maintains a queue, and we shouldn't call this function
+      // except when we're ready for the next segment, this check can most likely be removed
+      if (this.sourceUpdater_.updating()) {
+        return;
+      } // see if we need to begin loading immediately
+
+      const segmentInfo = this.chooseNextRequest_();
+      if (!segmentInfo) {
+        return;
+      }
+      if (typeof segmentInfo.timestampOffset === 'number') {
+        this.isPendingTimestampOffset_ = false;
+        this.timelineChangeController_.pendingTimelineChange({
+          type: this.loaderType_,
+          from: this.currentTimeline_,
+          to: segmentInfo.timeline
+        });
+      }
+      this.loadSegment_(segmentInfo);
+    }
+    /**
+     * Determines if we should call endOfStream on the media source based
+     * on the state of the buffer or if appened segment was the final
+     * segment in the playlist.
+     *
+     * @param {number} [mediaIndex] the media index of segment we last appended
+     * @param {Object} [playlist] a media playlist object
+     * @return {boolean} do we need to call endOfStream on the MediaSource
+     */
+
+    isEndOfStream_(mediaIndex = this.mediaIndex, playlist = this.playlist_, partIndex = this.partIndex) {
+      if (!playlist || !this.mediaSource_) {
+        return false;
+      }
+      const segment = typeof mediaIndex === 'number' && playlist.segments[mediaIndex]; // mediaIndex is zero based but length is 1 based
+
+      const appendedLastSegment = mediaIndex + 1 === playlist.segments.length; // true if there are no parts, or this is the last part.
+
+      const appendedLastPart = !segment || !segment.parts || partIndex + 1 === segment.parts.length; // if we've buffered to the end of the video, we need to call endOfStream
+      // so that MediaSources can trigger the `ended` event when it runs out of
+      // buffered data instead of waiting for me
+
+      return playlist.endList && this.mediaSource_.readyState === 'open' && appendedLastSegment && appendedLastPart;
+    }
+    /**
+     * Determines what request should be made given current segment loader state.
+     *
+     * @return {Object} a request object that describes the segment/part to load
+     */
+
+    chooseNextRequest_() {
+      const buffered = this.buffered_();
+      const bufferedEnd = lastBufferedEnd(buffered) || 0;
+      const bufferedTime = timeAheadOf(buffered, this.currentTime_());
+      const preloaded = !this.hasPlayed_() && bufferedTime >= 1;
+      const haveEnoughBuffer = bufferedTime >= this.goalBufferLength_();
+      const segments = this.playlist_.segments; // return no segment if:
+      // 1. we don't have segments
+      // 2. The video has not yet played and we already downloaded a segment
+      // 3. we already have enough buffered time
+
+      if (!segments.length || preloaded || haveEnoughBuffer) {
+        return null;
+      }
+      this.syncPoint_ = this.syncPoint_ || this.syncController_.getSyncPoint(this.playlist_, this.duration_(), this.currentTimeline_, this.currentTime_(), this.loaderType_);
+      const next = {
+        partIndex: null,
+        mediaIndex: null,
+        startOfSegment: null,
+        playlist: this.playlist_,
+        isSyncRequest: Boolean(!this.syncPoint_)
+      };
+      if (next.isSyncRequest) {
+        next.mediaIndex = getSyncSegmentCandidate(this.currentTimeline_, segments, bufferedEnd);
+        this.logger_(`choose next request. Can not find sync point. Fallback to media Index: ${next.mediaIndex}`);
+      } else if (this.mediaIndex !== null) {
+        const segment = segments[this.mediaIndex];
+        const partIndex = typeof this.partIndex === 'number' ? this.partIndex : -1;
+        next.startOfSegment = segment.end ? segment.end : bufferedEnd;
+        if (segment.parts && segment.parts[partIndex + 1]) {
+          next.mediaIndex = this.mediaIndex;
+          next.partIndex = partIndex + 1;
+        } else {
+          next.mediaIndex = this.mediaIndex + 1;
+        }
+      } else {
+        let segmentIndex;
+        let partIndex;
+        let startTime;
+        const targetTime = this.fetchAtBuffer_ ? bufferedEnd : this.currentTime_();
+        if (this.mediaSequenceSync_) {
+          this.logger_(`chooseNextRequest_ request after Quality Switch:
+For TargetTime: ${targetTime}.
+CurrentTime: ${this.currentTime_()}
+BufferedEnd: ${bufferedEnd}
+Fetch At Buffer: ${this.fetchAtBuffer_}
+`, this.mediaSequenceSync_.diagnostics);
+        }
+        if (this.mediaSequenceSync_ && this.mediaSequenceSync_.isReliable) {
+          const syncInfo = this.getSyncInfoFromMediaSequenceSync_(targetTime);
+          if (!syncInfo) {
+            this.logger_('chooseNextRequest_ - no sync info found using media sequence sync'); // no match
+
+            return null;
+          }
+          this.logger_(`chooseNextRequest_ mediaSequence syncInfo (${syncInfo.start} --> ${syncInfo.end})`);
+          segmentIndex = syncInfo.segmentIndex;
+          partIndex = syncInfo.partIndex;
+          startTime = syncInfo.start;
+        } else {
+          this.logger_('chooseNextRequest_ - fallback to a regular segment selection algorithm, based on a syncPoint.'); // fallback
+
+          const mediaInfoForTime = Playlist.getMediaInfoForTime({
+            exactManifestTimings: this.exactManifestTimings,
+            playlist: this.playlist_,
+            currentTime: targetTime,
+            startingPartIndex: this.syncPoint_.partIndex,
+            startingSegmentIndex: this.syncPoint_.segmentIndex,
+            startTime: this.syncPoint_.time
+          });
+          segmentIndex = mediaInfoForTime.segmentIndex;
+          partIndex = mediaInfoForTime.partIndex;
+          startTime = mediaInfoForTime.startTime;
+        }
+        next.getMediaInfoForTime = this.fetchAtBuffer_ ? `bufferedEnd ${targetTime}` : `currentTime ${targetTime}`;
+        next.mediaIndex = segmentIndex;
+        next.startOfSegment = startTime;
+        next.partIndex = partIndex;
+        this.logger_(`choose next request. Playlist switched and we have a sync point. Media Index: ${next.mediaIndex} `);
+      }
+      const nextSegment = segments[next.mediaIndex];
+      let nextPart = nextSegment && typeof next.partIndex === 'number' && nextSegment.parts && nextSegment.parts[next.partIndex]; // if the next segment index is invalid or
+      // the next partIndex is invalid do not choose a next segment.
+
+      if (!nextSegment || typeof next.partIndex === 'number' && !nextPart) {
+        return null;
+      } // if the next segment has parts, and we don't have a partIndex.
+      // Set partIndex to 0
+
+      if (typeof next.partIndex !== 'number' && nextSegment.parts) {
+        next.partIndex = 0;
+        nextPart = nextSegment.parts[0];
+      } // independentSegments applies to every segment in a playlist. If independentSegments appears in a main playlist,
+      // it applies to each segment in each media playlist.
+      // https://datatracker.ietf.org/doc/html/draft-pantos-http-live-streaming-23#section-4.3.5.1
+
+      const hasIndependentSegments = this.vhs_.playlists && this.vhs_.playlists.main && this.vhs_.playlists.main.independentSegments || this.playlist_.independentSegments; // if we have no buffered data then we need to make sure
+      // that the next part we append is "independent" if possible.
+      // So we check if the previous part is independent, and request
+      // it if it is.
+
+      if (!bufferedTime && nextPart && !hasIndependentSegments && !nextPart.independent) {
+        if (next.partIndex === 0) {
+          const lastSegment = segments[next.mediaIndex - 1];
+          const lastSegmentLastPart = lastSegment.parts && lastSegment.parts.length && lastSegment.parts[lastSegment.parts.length - 1];
+          if (lastSegmentLastPart && lastSegmentLastPart.independent) {
+            next.mediaIndex -= 1;
+            next.partIndex = lastSegment.parts.length - 1;
+            next.independent = 'previous segment';
+          }
+        } else if (nextSegment.parts[next.partIndex - 1].independent) {
+          next.partIndex -= 1;
+          next.independent = 'previous part';
+        }
+      }
+      const ended = this.mediaSource_ && this.mediaSource_.readyState === 'ended'; // do not choose a next segment if all of the following:
+      // 1. this is the last segment in the playlist
+      // 2. end of stream has been called on the media source already
+      // 3. the player is not seeking
+
+      if (next.mediaIndex >= segments.length - 1 && ended && !this.seeking_()) {
+        return null;
+      }
+      if (this.shouldForceTimestampOffsetAfterResync_) {
+        this.shouldForceTimestampOffsetAfterResync_ = false;
+        next.forceTimestampOffset = true;
+        this.logger_('choose next request. Force timestamp offset after loader resync');
+      }
+      return this.generateSegmentInfo_(next);
+    }
+    getSyncInfoFromMediaSequenceSync_(targetTime) {
+      if (!this.mediaSequenceSync_) {
+        return null;
+      } // we should pull the target time to the least available time if we drop out of sync for any reason
+
+      const finalTargetTime = Math.max(targetTime, this.mediaSequenceSync_.start);
+      if (targetTime !== finalTargetTime) {
+        this.logger_(`getSyncInfoFromMediaSequenceSync_. Pulled target time from ${targetTime} to ${finalTargetTime}`);
+      }
+      const mediaSequenceSyncInfo = this.mediaSequenceSync_.getSyncInfoForTime(finalTargetTime);
+      if (!mediaSequenceSyncInfo) {
+        // no match at all
+        return null;
+      }
+      if (!mediaSequenceSyncInfo.isAppended) {
+        // has a perfect match
+        return mediaSequenceSyncInfo;
+      } // has match, but segment was already appended.
+      // attempt to auto-advance to the nearest next segment:
+
+      const nextMediaSequenceSyncInfo = this.mediaSequenceSync_.getSyncInfoForTime(mediaSequenceSyncInfo.end);
+      if (!nextMediaSequenceSyncInfo) {
+        // no match at all
+        return null;
+      }
+      if (nextMediaSequenceSyncInfo.isAppended) {
+        this.logger_('getSyncInfoFromMediaSequenceSync_: We encounter unexpected scenario where next media sequence sync info is also appended!');
+      } // got match with the nearest next segment
+
+      return nextMediaSequenceSyncInfo;
+    }
+    generateSegmentInfo_(options) {
+      const {
+        independent,
+        playlist,
+        mediaIndex,
+        startOfSegment,
+        isSyncRequest,
+        partIndex,
+        forceTimestampOffset,
+        getMediaInfoForTime
+      } = options;
+      const segment = playlist.segments[mediaIndex];
+      const part = typeof partIndex === 'number' && segment.parts[partIndex];
+      const segmentInfo = {
+        requestId: 'segment-loader-' + Math.random(),
+        // resolve the segment URL relative to the playlist
+        uri: part && part.resolvedUri || segment.resolvedUri,
+        // the segment's mediaIndex at the time it was requested
+        mediaIndex,
+        partIndex: part ? partIndex : null,
+        // whether or not to update the SegmentLoader's state with this
+        // segment's mediaIndex
+        isSyncRequest,
+        startOfSegment,
+        // the segment's playlist
+        playlist,
+        // unencrypted bytes of the segment
+        bytes: null,
+        // when a key is defined for this segment, the encrypted bytes
+        encryptedBytes: null,
+        // The target timestampOffset for this segment when we append it
+        // to the source buffer
+        timestampOffset: null,
+        // The timeline that the segment is in
+        timeline: segment.timeline,
+        // The expected duration of the segment in seconds
+        duration: part && part.duration || segment.duration,
+        // retain the segment in case the playlist updates while doing an async process
+        segment,
+        part,
+        byteLength: 0,
+        transmuxer: this.transmuxer_,
+        // type of getMediaInfoForTime that was used to get this segment
+        getMediaInfoForTime,
+        independent
+      };
+      const overrideCheck = typeof forceTimestampOffset !== 'undefined' ? forceTimestampOffset : this.isPendingTimestampOffset_;
+      segmentInfo.timestampOffset = this.timestampOffsetForSegment_({
+        segmentTimeline: segment.timeline,
+        currentTimeline: this.currentTimeline_,
+        startOfSegment,
+        buffered: this.buffered_(),
+        overrideCheck
+      });
+      const audioBufferedEnd = lastBufferedEnd(this.sourceUpdater_.audioBuffered());
+      if (typeof audioBufferedEnd === 'number') {
+        // since the transmuxer is using the actual timing values, but the buffer is
+        // adjusted by the timestamp offset, we must adjust the value here
+        segmentInfo.audioAppendStart = audioBufferedEnd - this.sourceUpdater_.audioTimestampOffset();
+      }
+      if (this.sourceUpdater_.videoBuffered().length) {
+        segmentInfo.gopsToAlignWith = gopsSafeToAlignWith(this.gopBuffer_,
+        // since the transmuxer is using the actual timing values, but the time is
+        // adjusted by the timestmap offset, we must adjust the value here
+        this.currentTime_() - this.sourceUpdater_.videoTimestampOffset(), this.timeMapping_);
+      }
+      return segmentInfo;
+    } // get the timestampoffset for a segment,
+    // added so that vtt segment loader can override and prevent
+    // adding timestamp offsets.
+
+    timestampOffsetForSegment_(options) {
+      return timestampOffsetForSegment(options);
+    }
+    /**
+     * Determines if the network has enough bandwidth to complete the current segment
+     * request in a timely manner. If not, the request will be aborted early and bandwidth
+     * updated to trigger a playlist switch.
+     *
+     * @param {Object} stats
+     *        Object containing stats about the request timing and size
+     * @private
+     */
+
+    earlyAbortWhenNeeded_(stats) {
+      if (this.vhs_.tech_.paused() ||
+      // Don't abort if the current playlist is on the lowestEnabledRendition
+      // TODO: Replace using timeout with a boolean indicating whether this playlist is
+      //       the lowestEnabledRendition.
+      !this.xhrOptions_.timeout ||
+      // Don't abort if we have no bandwidth information to estimate segment sizes
+      !this.playlist_.attributes.BANDWIDTH) {
+        return;
+      } // Wait at least 1 second since the first byte of data has been received before
+      // using the calculated bandwidth from the progress event to allow the bitrate
+      // to stabilize
+
+      if (Date.now() - (stats.firstBytesReceivedAt || Date.now()) < 1000) {
+        return;
+      }
+      const currentTime = this.currentTime_();
+      const measuredBandwidth = stats.bandwidth;
+      const segmentDuration = this.pendingSegment_.duration;
+      const requestTimeRemaining = Playlist.estimateSegmentRequestTime(segmentDuration, measuredBandwidth, this.playlist_, stats.bytesReceived); // Subtract 1 from the timeUntilRebuffer so we still consider an early abort
+      // if we are only left with less than 1 second when the request completes.
+      // A negative timeUntilRebuffering indicates we are already rebuffering
+
+      const timeUntilRebuffer$1 = timeUntilRebuffer(this.buffered_(), currentTime, this.vhs_.tech_.playbackRate()) - 1; // Only consider aborting early if the estimated time to finish the download
+      // is larger than the estimated time until the player runs out of forward buffer
+
+      if (requestTimeRemaining <= timeUntilRebuffer$1) {
+        return;
+      }
+      const switchCandidate = minRebufferMaxBandwidthSelector({
+        main: this.vhs_.playlists.main,
+        currentTime,
+        bandwidth: measuredBandwidth,
+        duration: this.duration_(),
+        segmentDuration,
+        timeUntilRebuffer: timeUntilRebuffer$1,
+        currentTimeline: this.currentTimeline_,
+        syncController: this.syncController_
+      });
+      if (!switchCandidate) {
+        return;
+      }
+      const rebufferingImpact = requestTimeRemaining - timeUntilRebuffer$1;
+      const timeSavedBySwitching = rebufferingImpact - switchCandidate.rebufferingImpact;
+      let minimumTimeSaving = 0.5; // If we are already rebuffering, increase the amount of variance we add to the
+      // potential round trip time of the new request so that we are not too aggressive
+      // with switching to a playlist that might save us a fraction of a second.
+
+      if (timeUntilRebuffer$1 <= TIME_FUDGE_FACTOR) {
+        minimumTimeSaving = 1;
+      }
+      if (!switchCandidate.playlist || switchCandidate.playlist.uri === this.playlist_.uri || timeSavedBySwitching < minimumTimeSaving) {
+        return;
+      } // set the bandwidth to that of the desired playlist being sure to scale by
+      // BANDWIDTH_VARIANCE and add one so the playlist selector does not exclude it
+      // don't trigger a bandwidthupdate as the bandwidth is artifial
+
+      this.bandwidth = switchCandidate.playlist.attributes.BANDWIDTH * Config.BANDWIDTH_VARIANCE + 1;
+      this.trigger('earlyabort');
+    }
+    handleAbort_(segmentInfo) {
+      this.logger_(`Aborting ${segmentInfoString(segmentInfo)}`);
+      this.mediaRequestsAborted += 1;
+    }
+    /**
+     * XHR `progress` event handler
+     *
+     * @param {Event}
+     *        The XHR `progress` event
+     * @param {Object} simpleSegment
+     *        A simplified segment object copy
+     * @private
+     */
+
+    handleProgress_(event, simpleSegment) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      }
+      this.trigger('progress');
+    }
+    handleTrackInfo_(simpleSegment, trackInfo) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      }
+      if (this.checkForIllegalMediaSwitch(trackInfo)) {
+        return;
+      }
+      trackInfo = trackInfo || {}; // When we have track info, determine what media types this loader is dealing with.
+      // Guard against cases where we're not getting track info at all until we are
+      // certain that all streams will provide it.
+
+      if (!shallowEqual(this.currentMediaInfo_, trackInfo)) {
+        this.appendInitSegment_ = {
+          audio: true,
+          video: true
+        };
+        this.startingMediaInfo_ = trackInfo;
+        this.currentMediaInfo_ = trackInfo;
+        this.logger_('trackinfo update', trackInfo);
+        this.trigger('trackinfo');
+      } // trackinfo may cause an abort if the trackinfo
+      // causes a codec change to an unsupported codec.
+
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      } // set trackinfo on the pending segment so that
+      // it can append.
+
+      this.pendingSegment_.trackInfo = trackInfo; // check if any calls were waiting on the track info
+
+      if (this.hasEnoughInfoToAppend_()) {
+        this.processCallQueue_();
+      }
+    }
+    handleTimingInfo_(simpleSegment, mediaType, timeType, time) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      }
+      const segmentInfo = this.pendingSegment_;
+      const timingInfoProperty = timingInfoPropertyForMedia(mediaType);
+      segmentInfo[timingInfoProperty] = segmentInfo[timingInfoProperty] || {};
+      segmentInfo[timingInfoProperty][timeType] = time;
+      this.logger_(`timinginfo: ${mediaType} - ${timeType} - ${time}`); // check if any calls were waiting on the timing info
+
+      if (this.hasEnoughInfoToAppend_()) {
+        this.processCallQueue_();
+      }
+    }
+    handleCaptions_(simpleSegment, captionData) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      } // This could only happen with fmp4 segments, but
+      // should still not happen in general
+
+      if (captionData.length === 0) {
+        this.logger_('SegmentLoader received no captions from a caption event');
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // Wait until we have some video data so that caption timing
+      // can be adjusted by the timestamp offset
+
+      if (!segmentInfo.hasAppendedData_) {
+        this.metadataQueue_.caption.push(this.handleCaptions_.bind(this, simpleSegment, captionData));
+        return;
+      }
+      const timestampOffset = this.sourceUpdater_.videoTimestampOffset() === null ? this.sourceUpdater_.audioTimestampOffset() : this.sourceUpdater_.videoTimestampOffset();
+      const captionTracks = {}; // get total start/end and captions for each track/stream
+
+      captionData.forEach(caption => {
+        // caption.stream is actually a track name...
+        // set to the existing values in tracks or default values
+        captionTracks[caption.stream] = captionTracks[caption.stream] || {
+          // Infinity, as any other value will be less than this
+          startTime: Infinity,
+          captions: [],
+          // 0 as an other value will be more than this
+          endTime: 0
+        };
+        const captionTrack = captionTracks[caption.stream];
+        captionTrack.startTime = Math.min(captionTrack.startTime, caption.startTime + timestampOffset);
+        captionTrack.endTime = Math.max(captionTrack.endTime, caption.endTime + timestampOffset);
+        captionTrack.captions.push(caption);
+      });
+      Object.keys(captionTracks).forEach(trackName => {
+        const {
+          startTime,
+          endTime,
+          captions
+        } = captionTracks[trackName];
+        const inbandTextTracks = this.inbandTextTracks_;
+        this.logger_(`adding cues from ${startTime} -> ${endTime} for ${trackName}`);
+        createCaptionsTrackIfNotExists(inbandTextTracks, this.vhs_.tech_, trackName); // clear out any cues that start and end at the same time period for the same track.
+        // We do this because a rendition change that also changes the timescale for captions
+        // will result in captions being re-parsed for certain segments. If we add them again
+        // without clearing we will have two of the same captions visible.
+
+        removeCuesFromTrack(startTime, endTime, inbandTextTracks[trackName]);
+        addCaptionData({
+          captionArray: captions,
+          inbandTextTracks,
+          timestampOffset
+        });
+      }); // Reset stored captions since we added parsed
+      // captions to a text track at this point
+
+      if (this.transmuxer_) {
+        this.transmuxer_.postMessage({
+          action: 'clearParsedMp4Captions'
+        });
+      }
+    }
+    handleId3_(simpleSegment, id3Frames, dispatchType) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // we need to have appended data in order for the timestamp offset to be set
+
+      if (!segmentInfo.hasAppendedData_) {
+        this.metadataQueue_.id3.push(this.handleId3_.bind(this, simpleSegment, id3Frames, dispatchType));
+        return;
+      }
+      this.addMetadataToTextTrack(dispatchType, id3Frames, this.duration_());
+    }
+    processMetadataQueue_() {
+      this.metadataQueue_.id3.forEach(fn => fn());
+      this.metadataQueue_.caption.forEach(fn => fn());
+      this.metadataQueue_.id3 = [];
+      this.metadataQueue_.caption = [];
+    }
+    processCallQueue_() {
+      const callQueue = this.callQueue_; // Clear out the queue before the queued functions are run, since some of the
+      // functions may check the length of the load queue and default to pushing themselves
+      // back onto the queue.
+
+      this.callQueue_ = [];
+      callQueue.forEach(fun => fun());
+    }
+    processLoadQueue_() {
+      const loadQueue = this.loadQueue_; // Clear out the queue before the queued functions are run, since some of the
+      // functions may check the length of the load queue and default to pushing themselves
+      // back onto the queue.
+
+      this.loadQueue_ = [];
+      loadQueue.forEach(fun => fun());
+    }
+    /**
+     * Determines whether the loader has enough info to load the next segment.
+     *
+     * @return {boolean}
+     *         Whether or not the loader has enough info to load the next segment
+     */
+
+    hasEnoughInfoToLoad_() {
+      // Since primary timing goes by video, only the audio loader potentially needs to wait
+      // to load.
+      if (this.loaderType_ !== 'audio') {
+        return true;
+      }
+      const segmentInfo = this.pendingSegment_; // A fill buffer must have already run to establish a pending segment before there's
+      // enough info to load.
+
+      if (!segmentInfo) {
+        return false;
+      } // The first segment can and should be loaded immediately so that source buffers are
+      // created together (before appending). Source buffer creation uses the presence of
+      // audio and video data to determine whether to create audio/video source buffers, and
+      // uses processed (transmuxed or parsed) media to determine the types required.
+
+      if (!this.getCurrentMediaInfo_()) {
+        return true;
+      }
+      if (
+      // Technically, instead of waiting to load a segment on timeline changes, a segment
+      // can be requested and downloaded and only wait before it is transmuxed or parsed.
+      // But in practice, there are a few reasons why it is better to wait until a loader
+      // is ready to append that segment before requesting and downloading:
+      //
+      // 1. Because audio and main loaders cross discontinuities together, if this loader
+      //    is waiting for the other to catch up, then instead of requesting another
+      //    segment and using up more bandwidth, by not yet loading, more bandwidth is
+      //    allotted to the loader currently behind.
+      // 2. media-segment-request doesn't have to have logic to consider whether a segment
+      // is ready to be processed or not, isolating the queueing behavior to the loader.
+      // 3. The audio loader bases some of its segment properties on timing information
+      //    provided by the main loader, meaning that, if the logic for waiting on
+      //    processing was in media-segment-request, then it would also need to know how
+      //    to re-generate the segment information after the main loader caught up.
+      shouldWaitForTimelineChange({
+        timelineChangeController: this.timelineChangeController_,
+        currentTimeline: this.currentTimeline_,
+        segmentTimeline: segmentInfo.timeline,
+        loaderType: this.loaderType_,
+        audioDisabled: this.audioDisabled_
+      })) {
+        return false;
+      }
+      return true;
+    }
+    getCurrentMediaInfo_(segmentInfo = this.pendingSegment_) {
+      return segmentInfo && segmentInfo.trackInfo || this.currentMediaInfo_;
+    }
+    getMediaInfo_(segmentInfo = this.pendingSegment_) {
+      return this.getCurrentMediaInfo_(segmentInfo) || this.startingMediaInfo_;
+    }
+    getPendingSegmentPlaylist() {
+      return this.pendingSegment_ ? this.pendingSegment_.playlist : null;
+    }
+    hasEnoughInfoToAppend_() {
+      if (!this.sourceUpdater_.ready()) {
+        return false;
+      } // If content needs to be removed or the loader is waiting on an append reattempt,
+      // then no additional content should be appended until the prior append is resolved.
+
+      if (this.waitingOnRemove_ || this.quotaExceededErrorRetryTimeout_) {
+        return false;
+      }
+      const segmentInfo = this.pendingSegment_;
+      const trackInfo = this.getCurrentMediaInfo_(); // no segment to append any data for or
+      // we do not have information on this specific
+      // segment yet
+
+      if (!segmentInfo || !trackInfo) {
+        return false;
+      }
+      const {
+        hasAudio,
+        hasVideo,
+        isMuxed
+      } = trackInfo;
+      if (hasVideo && !segmentInfo.videoTimingInfo) {
+        return false;
+      } // muxed content only relies on video timing information for now.
+
+      if (hasAudio && !this.audioDisabled_ && !isMuxed && !segmentInfo.audioTimingInfo) {
+        return false;
+      }
+      if (shouldWaitForTimelineChange({
+        timelineChangeController: this.timelineChangeController_,
+        currentTimeline: this.currentTimeline_,
+        segmentTimeline: segmentInfo.timeline,
+        loaderType: this.loaderType_,
+        audioDisabled: this.audioDisabled_
+      })) {
+        return false;
+      }
+      return true;
+    }
+    handleData_(simpleSegment, result) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      } // If there's anything in the call queue, then this data came later and should be
+      // executed after the calls currently queued.
+
+      if (this.callQueue_.length || !this.hasEnoughInfoToAppend_()) {
+        this.callQueue_.push(this.handleData_.bind(this, simpleSegment, result));
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // update the time mapping so we can translate from display time to media time
+
+      this.setTimeMapping_(segmentInfo.timeline); // for tracking overall stats
+
+      this.updateMediaSecondsLoaded_(segmentInfo.part || segmentInfo.segment); // Note that the state isn't changed from loading to appending. This is because abort
+      // logic may change behavior depending on the state, and changing state too early may
+      // inflate our estimates of bandwidth. In the future this should be re-examined to
+      // note more granular states.
+      // don't process and append data if the mediaSource is closed
+
+      if (this.mediaSource_.readyState === 'closed') {
+        return;
+      } // if this request included an initialization segment, save that data
+      // to the initSegment cache
+
+      if (simpleSegment.map) {
+        simpleSegment.map = this.initSegmentForMap(simpleSegment.map, true); // move over init segment properties to media request
+
+        segmentInfo.segment.map = simpleSegment.map;
+      } // if this request included a segment key, save that data in the cache
+
+      if (simpleSegment.key) {
+        this.segmentKey(simpleSegment.key, true);
+      }
+      segmentInfo.isFmp4 = simpleSegment.isFmp4;
+      segmentInfo.timingInfo = segmentInfo.timingInfo || {};
+      if (segmentInfo.isFmp4) {
+        this.trigger('fmp4');
+        segmentInfo.timingInfo.start = segmentInfo[timingInfoPropertyForMedia(result.type)].start;
+      } else {
+        const trackInfo = this.getCurrentMediaInfo_();
+        const useVideoTimingInfo = this.loaderType_ === 'main' && trackInfo && trackInfo.hasVideo;
+        let firstVideoFrameTimeForData;
+        if (useVideoTimingInfo) {
+          firstVideoFrameTimeForData = segmentInfo.videoTimingInfo.start;
+        } // Segment loader knows more about segment timing than the transmuxer (in certain
+        // aspects), so make any changes required for a more accurate start time.
+        // Don't set the end time yet, as the segment may not be finished processing.
+
+        segmentInfo.timingInfo.start = this.trueSegmentStart_({
+          currentStart: segmentInfo.timingInfo.start,
+          playlist: segmentInfo.playlist,
+          mediaIndex: segmentInfo.mediaIndex,
+          currentVideoTimestampOffset: this.sourceUpdater_.videoTimestampOffset(),
+          useVideoTimingInfo,
+          firstVideoFrameTimeForData,
+          videoTimingInfo: segmentInfo.videoTimingInfo,
+          audioTimingInfo: segmentInfo.audioTimingInfo
+        });
+      } // Init segments for audio and video only need to be appended in certain cases. Now
+      // that data is about to be appended, we can check the final cases to determine
+      // whether we should append an init segment.
+
+      this.updateAppendInitSegmentStatus(segmentInfo, result.type); // Timestamp offset should be updated once we get new data and have its timing info,
+      // as we use the start of the segment to offset the best guess (playlist provided)
+      // timestamp offset.
+
+      this.updateSourceBufferTimestampOffset_(segmentInfo); // if this is a sync request we need to determine whether it should
+      // be appended or not.
+
+      if (segmentInfo.isSyncRequest) {
+        // first save/update our timing info for this segment.
+        // this is what allows us to choose an accurate segment
+        // and the main reason we make a sync request.
+        this.updateTimingInfoEnd_(segmentInfo);
+        this.syncController_.saveSegmentTimingInfo({
+          segmentInfo,
+          shouldSaveTimelineMapping: this.loaderType_ === 'main'
+        });
+        const next = this.chooseNextRequest_(); // If the sync request isn't the segment that would be requested next
+        // after taking into account its timing info, do not append it.
+
+        if (next.mediaIndex !== segmentInfo.mediaIndex || next.partIndex !== segmentInfo.partIndex) {
+          this.logger_('sync segment was incorrect, not appending');
+          return;
+        } // otherwise append it like any other segment as our guess was correct.
+
+        this.logger_('sync segment was correct, appending');
+      } // Save some state so that in the future anything waiting on first append (and/or
+      // timestamp offset(s)) can process immediately. While the extra state isn't optimal,
+      // we need some notion of whether the timestamp offset or other relevant information
+      // has had a chance to be set.
+
+      segmentInfo.hasAppendedData_ = true; // Now that the timestamp offset should be set, we can append any waiting ID3 tags.
+
+      this.processMetadataQueue_();
+      this.appendData_(segmentInfo, result);
+    }
+    updateAppendInitSegmentStatus(segmentInfo, type) {
+      // alt audio doesn't manage timestamp offset
+      if (this.loaderType_ === 'main' && typeof segmentInfo.timestampOffset === 'number' &&
+      // in the case that we're handling partial data, we don't want to append an init
+      // segment for each chunk
+      !segmentInfo.changedTimestampOffset) {
+        // if the timestamp offset changed, the timeline may have changed, so we have to re-
+        // append init segments
+        this.appendInitSegment_ = {
+          audio: true,
+          video: true
+        };
+      }
+      if (this.playlistOfLastInitSegment_[type] !== segmentInfo.playlist) {
+        // make sure we append init segment on playlist changes, in case the media config
+        // changed
+        this.appendInitSegment_[type] = true;
+      }
+    }
+    getInitSegmentAndUpdateState_({
+      type,
+      initSegment,
+      map,
+      playlist
+    }) {
+      // "The EXT-X-MAP tag specifies how to obtain the Media Initialization Section
+      // (Section 3) required to parse the applicable Media Segments.  It applies to every
+      // Media Segment that appears after it in the Playlist until the next EXT-X-MAP tag
+      // or until the end of the playlist."
+      // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.2.5
+      if (map) {
+        const id = initSegmentId(map);
+        if (this.activeInitSegmentId_ === id) {
+          // don't need to re-append the init segment if the ID matches
+          return null;
+        } // a map-specified init segment takes priority over any transmuxed (or otherwise
+        // obtained) init segment
+        //
+        // this also caches the init segment for later use
+
+        initSegment = this.initSegmentForMap(map, true).bytes;
+        this.activeInitSegmentId_ = id;
+      } // We used to always prepend init segments for video, however, that shouldn't be
+      // necessary. Instead, we should only append on changes, similar to what we've always
+      // done for audio. This is more important (though may not be that important) for
+      // frame-by-frame appending for LHLS, simply because of the increased quantity of
+      // appends.
+
+      if (initSegment && this.appendInitSegment_[type]) {
+        // Make sure we track the playlist that we last used for the init segment, so that
+        // we can re-append the init segment in the event that we get data from a new
+        // playlist. Discontinuities and track changes are handled in other sections.
+        this.playlistOfLastInitSegment_[type] = playlist; // Disable future init segment appends for this type. Until a change is necessary.
+
+        this.appendInitSegment_[type] = false; // we need to clear out the fmp4 active init segment id, since
+        // we are appending the muxer init segment
+
+        this.activeInitSegmentId_ = null;
+        return initSegment;
+      }
+      return null;
+    }
+    handleQuotaExceededError_({
+      segmentInfo,
+      type,
+      bytes
+    }, error) {
+      const audioBuffered = this.sourceUpdater_.audioBuffered();
+      const videoBuffered = this.sourceUpdater_.videoBuffered(); // For now we're ignoring any notion of gaps in the buffer, but they, in theory,
+      // should be cleared out during the buffer removals. However, log in case it helps
+      // debug.
+
+      if (audioBuffered.length > 1) {
+        this.logger_('On QUOTA_EXCEEDED_ERR, found gaps in the audio buffer: ' + timeRangesToArray(audioBuffered).join(', '));
+      }
+      if (videoBuffered.length > 1) {
+        this.logger_('On QUOTA_EXCEEDED_ERR, found gaps in the video buffer: ' + timeRangesToArray(videoBuffered).join(', '));
+      }
+      const audioBufferStart = audioBuffered.length ? audioBuffered.start(0) : 0;
+      const audioBufferEnd = audioBuffered.length ? audioBuffered.end(audioBuffered.length - 1) : 0;
+      const videoBufferStart = videoBuffered.length ? videoBuffered.start(0) : 0;
+      const videoBufferEnd = videoBuffered.length ? videoBuffered.end(videoBuffered.length - 1) : 0;
+      if (audioBufferEnd - audioBufferStart <= MIN_BACK_BUFFER && videoBufferEnd - videoBufferStart <= MIN_BACK_BUFFER) {
+        // Can't remove enough buffer to make room for new segment (or the browser doesn't
+        // allow for appends of segments this size). In the future, it may be possible to
+        // split up the segment and append in pieces, but for now, error out this playlist
+        // in an attempt to switch to a more manageable rendition.
+        this.logger_('On QUOTA_EXCEEDED_ERR, single segment too large to append to ' + 'buffer, triggering an error. ' + `Appended byte length: ${bytes.byteLength}, ` + `audio buffer: ${timeRangesToArray(audioBuffered).join(', ')}, ` + `video buffer: ${timeRangesToArray(videoBuffered).join(', ')}, `);
+        this.error({
+          message: 'Quota exceeded error with append of a single segment of content',
+          excludeUntil: Infinity,
+          metadata: {
+            errorType: videojs.Error.SegmentExceedsSourceBufferQuota
+          }
+        });
+        this.trigger('error');
+        return;
+      } // To try to resolve the quota exceeded error, clear back buffer and retry. This means
+      // that the segment-loader should block on future events until this one is handled, so
+      // that it doesn't keep moving onto further segments. Adding the call to the call
+      // queue will prevent further appends until waitingOnRemove_ and
+      // quotaExceededErrorRetryTimeout_ are cleared.
+      //
+      // Note that this will only block the current loader. In the case of demuxed content,
+      // the other load may keep filling as fast as possible. In practice, this should be
+      // OK, as it is a rare case when either audio has a high enough bitrate to fill up a
+      // source buffer, or video fills without enough room for audio to append (and without
+      // the availability of clearing out seconds of back buffer to make room for audio).
+      // But it might still be good to handle this case in the future as a TODO.
+
+      this.waitingOnRemove_ = true;
+      this.callQueue_.push(this.appendToSourceBuffer_.bind(this, {
+        segmentInfo,
+        type,
+        bytes
+      }));
+      const currentTime = this.currentTime_(); // Try to remove as much audio and video as possible to make room for new content
+      // before retrying.
+
+      const timeToRemoveUntil = currentTime - MIN_BACK_BUFFER;
+      this.logger_(`On QUOTA_EXCEEDED_ERR, removing audio/video from 0 to ${timeToRemoveUntil}`);
+      this.remove(0, timeToRemoveUntil, () => {
+        this.logger_(`On QUOTA_EXCEEDED_ERR, retrying append in ${MIN_BACK_BUFFER}s`);
+        this.waitingOnRemove_ = false; // wait the length of time alotted in the back buffer to prevent wasted
+        // attempts (since we can't clear less than the minimum)
+
+        this.quotaExceededErrorRetryTimeout_ = window.setTimeout(() => {
+          this.logger_('On QUOTA_EXCEEDED_ERR, re-processing call queue');
+          this.quotaExceededErrorRetryTimeout_ = null;
+          this.processCallQueue_();
+        }, MIN_BACK_BUFFER * 1000);
+      }, true);
+    }
+    handleAppendError_({
+      segmentInfo,
+      type,
+      bytes
+    }, error) {
+      // if there's no error, nothing to do
+      if (!error) {
+        return;
+      }
+      if (error.code === QUOTA_EXCEEDED_ERR) {
+        this.handleQuotaExceededError_({
+          segmentInfo,
+          type,
+          bytes
+        }); // A quota exceeded error should be recoverable with a future re-append, so no need
+        // to trigger an append error.
+
+        return;
+      }
+      this.logger_('Received non QUOTA_EXCEEDED_ERR on append', error); // If an append errors, we often can't recover.
+      // (see https://w3c.github.io/media-source/#sourcebuffer-append-error).
+      //
+      // Trigger a special error so that it can be handled separately from normal,
+      // recoverable errors.
+
+      this.error({
+        message: `${type} append of ${bytes.length}b failed for segment ` + `#${segmentInfo.mediaIndex} in playlist ${segmentInfo.playlist.id}`,
+        metadata: {
+          errorType: videojs.Error.SegmentAppendError
+        }
+      });
+      this.trigger('appenderror');
+    }
+    appendToSourceBuffer_({
+      segmentInfo,
+      type,
+      initSegment,
+      data,
+      bytes
+    }) {
+      // If this is a re-append, bytes were already created and don't need to be recreated
+      if (!bytes) {
+        const segments = [data];
+        let byteLength = data.byteLength;
+        if (initSegment) {
+          // if the media initialization segment is changing, append it before the content
+          // segment
+          segments.unshift(initSegment);
+          byteLength += initSegment.byteLength;
+        } // Technically we should be OK appending the init segment separately, however, we
+        // haven't yet tested that, and prepending is how we have always done things.
+
+        bytes = concatSegments({
+          bytes: byteLength,
+          segments
+        });
+      }
+      this.sourceUpdater_.appendBuffer({
+        segmentInfo,
+        type,
+        bytes
+      }, this.handleAppendError_.bind(this, {
+        segmentInfo,
+        type,
+        bytes
+      }));
+    }
+    handleSegmentTimingInfo_(type, requestId, segmentTimingInfo) {
+      if (!this.pendingSegment_ || requestId !== this.pendingSegment_.requestId) {
+        return;
+      }
+      const segment = this.pendingSegment_.segment;
+      const timingInfoProperty = `${type}TimingInfo`;
+      if (!segment[timingInfoProperty]) {
+        segment[timingInfoProperty] = {};
+      }
+      segment[timingInfoProperty].transmuxerPrependedSeconds = segmentTimingInfo.prependedContentDuration || 0;
+      segment[timingInfoProperty].transmuxedPresentationStart = segmentTimingInfo.start.presentation;
+      segment[timingInfoProperty].transmuxedDecodeStart = segmentTimingInfo.start.decode;
+      segment[timingInfoProperty].transmuxedPresentationEnd = segmentTimingInfo.end.presentation;
+      segment[timingInfoProperty].transmuxedDecodeEnd = segmentTimingInfo.end.decode; // mainly used as a reference for debugging
+
+      segment[timingInfoProperty].baseMediaDecodeTime = segmentTimingInfo.baseMediaDecodeTime;
+    }
+    appendData_(segmentInfo, result) {
+      const {
+        type,
+        data
+      } = result;
+      if (!data || !data.byteLength) {
+        return;
+      }
+      if (type === 'audio' && this.audioDisabled_) {
+        return;
+      }
+      const initSegment = this.getInitSegmentAndUpdateState_({
+        type,
+        initSegment: result.initSegment,
+        playlist: segmentInfo.playlist,
+        map: segmentInfo.isFmp4 ? segmentInfo.segment.map : null
+      });
+      this.appendToSourceBuffer_({
+        segmentInfo,
+        type,
+        initSegment,
+        data
+      });
+    }
+    /**
+     * load a specific segment from a request into the buffer
+     *
+     * @private
+     */
+
+    loadSegment_(segmentInfo) {
+      this.state = 'WAITING';
+      this.pendingSegment_ = segmentInfo;
+      this.trimBackBuffer_(segmentInfo);
+      if (typeof segmentInfo.timestampOffset === 'number') {
+        if (this.transmuxer_) {
+          this.transmuxer_.postMessage({
+            action: 'clearAllMp4Captions'
+          });
+        }
+      }
+      if (!this.hasEnoughInfoToLoad_()) {
+        this.loadQueue_.push(() => {
+          // regenerate the audioAppendStart, timestampOffset, etc as they
+          // may have changed since this function was added to the queue.
+          const options = _extends$1({}, segmentInfo, {
+            forceTimestampOffset: true
+          });
+          _extends$1(segmentInfo, this.generateSegmentInfo_(options));
+          this.isPendingTimestampOffset_ = false;
+          this.updateTransmuxerAndRequestSegment_(segmentInfo);
+        });
+        return;
+      }
+      this.updateTransmuxerAndRequestSegment_(segmentInfo);
+    }
+    updateTransmuxerAndRequestSegment_(segmentInfo) {
+      // We'll update the source buffer's timestamp offset once we have transmuxed data, but
+      // the transmuxer still needs to be updated before then.
+      //
+      // Even though keepOriginalTimestamps is set to true for the transmuxer, timestamp
+      // offset must be passed to the transmuxer for stream correcting adjustments.
+      if (this.shouldUpdateTransmuxerTimestampOffset_(segmentInfo.timestampOffset)) {
+        this.gopBuffer_.length = 0; // gopsToAlignWith was set before the GOP buffer was cleared
+
+        segmentInfo.gopsToAlignWith = [];
+        this.timeMapping_ = 0; // reset values in the transmuxer since a discontinuity should start fresh
+
+        this.transmuxer_.postMessage({
+          action: 'reset'
+        });
+        this.transmuxer_.postMessage({
+          action: 'setTimestampOffset',
+          timestampOffset: segmentInfo.timestampOffset
+        });
+      }
+      const simpleSegment = this.createSimplifiedSegmentObj_(segmentInfo);
+      const isEndOfStream = this.isEndOfStream_(segmentInfo.mediaIndex, segmentInfo.playlist, segmentInfo.partIndex);
+      const isWalkingForward = this.mediaIndex !== null;
+      const isDiscontinuity = segmentInfo.timeline !== this.currentTimeline_ &&
+      // currentTimeline starts at -1, so we shouldn't end the timeline switching to 0,
+      // the first timeline
+      segmentInfo.timeline > 0;
+      const isEndOfTimeline = isEndOfStream || isWalkingForward && isDiscontinuity;
+      this.logger_(`Requesting
+${compactSegmentUrlDescription(segmentInfo.uri)}
+${segmentInfoString(segmentInfo)}`); // If there's an init segment associated with this segment, but it is not cached (identified by a lack of bytes),
+      // then this init segment has never been seen before and should be appended.
+      //
+      // At this point the content type (audio/video or both) is not yet known, but it should be safe to set
+      // both to true and leave the decision of whether to append the init segment to append time.
+
+      if (simpleSegment.map && !simpleSegment.map.bytes) {
+        this.logger_('going to request init segment.');
+        this.appendInitSegment_ = {
+          video: true,
+          audio: true
+        };
+      }
+      segmentInfo.abortRequests = mediaSegmentRequest({
+        xhr: this.vhs_.xhr,
+        xhrOptions: this.xhrOptions_,
+        decryptionWorker: this.decrypter_,
+        segment: simpleSegment,
+        abortFn: this.handleAbort_.bind(this, segmentInfo),
+        progressFn: this.handleProgress_.bind(this),
+        trackInfoFn: this.handleTrackInfo_.bind(this),
+        timingInfoFn: this.handleTimingInfo_.bind(this),
+        videoSegmentTimingInfoFn: this.handleSegmentTimingInfo_.bind(this, 'video', segmentInfo.requestId),
+        audioSegmentTimingInfoFn: this.handleSegmentTimingInfo_.bind(this, 'audio', segmentInfo.requestId),
+        captionsFn: this.handleCaptions_.bind(this),
+        isEndOfTimeline,
+        endedTimelineFn: () => {
+          this.logger_('received endedtimeline callback');
+        },
+        id3Fn: this.handleId3_.bind(this),
+        dataFn: this.handleData_.bind(this),
+        doneFn: this.segmentRequestFinished_.bind(this),
+        onTransmuxerLog: ({
+          message,
+          level,
+          stream
+        }) => {
+          this.logger_(`${segmentInfoString(segmentInfo)} logged from transmuxer stream ${stream} as a ${level}: ${message}`);
+        }
+      });
+    }
+    /**
+     * trim the back buffer so that we don't have too much data
+     * in the source buffer
+     *
+     * @private
+     *
+     * @param {Object} segmentInfo - the current segment
+     */
+
+    trimBackBuffer_(segmentInfo) {
+      const removeToTime = safeBackBufferTrimTime(this.seekable_(), this.currentTime_(), this.playlist_.targetDuration || 10); // Chrome has a hard limit of 150MB of
+      // buffer and a very conservative "garbage collector"
+      // We manually clear out the old buffer to ensure
+      // we don't trigger the QuotaExceeded error
+      // on the source buffer during subsequent appends
+
+      if (removeToTime > 0) {
+        this.remove(0, removeToTime);
+      }
+    }
+    /**
+     * created a simplified copy of the segment object with just the
+     * information necessary to perform the XHR and decryption
+     *
+     * @private
+     *
+     * @param {Object} segmentInfo - the current segment
+     * @return {Object} a simplified segment object copy
+     */
+
+    createSimplifiedSegmentObj_(segmentInfo) {
+      const segment = segmentInfo.segment;
+      const part = segmentInfo.part;
+      const simpleSegment = {
+        resolvedUri: part ? part.resolvedUri : segment.resolvedUri,
+        byterange: part ? part.byterange : segment.byterange,
+        requestId: segmentInfo.requestId,
+        transmuxer: segmentInfo.transmuxer,
+        audioAppendStart: segmentInfo.audioAppendStart,
+        gopsToAlignWith: segmentInfo.gopsToAlignWith,
+        part: segmentInfo.part
+      };
+      const previousSegment = segmentInfo.playlist.segments[segmentInfo.mediaIndex - 1];
+      if (previousSegment && previousSegment.timeline === segment.timeline) {
+        // The baseStartTime of a segment is used to handle rollover when probing the TS
+        // segment to retrieve timing information. Since the probe only looks at the media's
+        // times (e.g., PTS and DTS values of the segment), and doesn't consider the
+        // player's time (e.g., player.currentTime()), baseStartTime should reflect the
+        // media time as well. transmuxedDecodeEnd represents the end time of a segment, in
+        // seconds of media time, so should be used here. The previous segment is used since
+        // the end of the previous segment should represent the beginning of the current
+        // segment, so long as they are on the same timeline.
+        if (previousSegment.videoTimingInfo) {
+          simpleSegment.baseStartTime = previousSegment.videoTimingInfo.transmuxedDecodeEnd;
+        } else if (previousSegment.audioTimingInfo) {
+          simpleSegment.baseStartTime = previousSegment.audioTimingInfo.transmuxedDecodeEnd;
+        }
+      }
+      if (segment.key) {
+        // if the media sequence is greater than 2^32, the IV will be incorrect
+        // assuming 10s segments, that would be about 1300 years
+        const iv = segment.key.iv || new Uint32Array([0, 0, 0, segmentInfo.mediaIndex + segmentInfo.playlist.mediaSequence]);
+        simpleSegment.key = this.segmentKey(segment.key);
+        simpleSegment.key.iv = iv;
+      }
+      if (segment.map) {
+        simpleSegment.map = this.initSegmentForMap(segment.map);
+      }
+      return simpleSegment;
+    }
+    saveTransferStats_(stats) {
+      // every request counts as a media request even if it has been aborted
+      // or canceled due to a timeout
+      this.mediaRequests += 1;
+      if (stats) {
+        this.mediaBytesTransferred += stats.bytesReceived;
+        this.mediaTransferDuration += stats.roundTripTime;
+      }
+    }
+    saveBandwidthRelatedStats_(duration, stats) {
+      // byteLength will be used for throughput, and should be based on bytes receieved,
+      // which we only know at the end of the request and should reflect total bytes
+      // downloaded rather than just bytes processed from components of the segment
+      this.pendingSegment_.byteLength = stats.bytesReceived;
+      if (duration < MIN_SEGMENT_DURATION_TO_SAVE_STATS) {
+        this.logger_(`Ignoring segment's bandwidth because its duration of ${duration}` + ` is less than the min to record ${MIN_SEGMENT_DURATION_TO_SAVE_STATS}`);
+        return;
+      }
+      this.bandwidth = stats.bandwidth;
+      this.roundTrip = stats.roundTripTime;
+    }
+    handleTimeout_() {
+      // although the VTT segment loader bandwidth isn't really used, it's good to
+      // maintain functinality between segment loaders
+      this.mediaRequestsTimedout += 1;
+      this.bandwidth = 1;
+      this.roundTrip = NaN;
+      this.trigger('bandwidthupdate');
+      this.trigger('timeout');
+    }
+    /**
+     * Handle the callback from the segmentRequest function and set the
+     * associated SegmentLoader state and errors if necessary
+     *
+     * @private
+     */
+
+    segmentRequestFinished_(error, simpleSegment, result) {
+      // TODO handle special cases, e.g., muxed audio/video but only audio in the segment
+      // check the call queue directly since this function doesn't need to deal with any
+      // data, and can continue even if the source buffers are not set up and we didn't get
+      // any data from the segment
+      if (this.callQueue_.length) {
+        this.callQueue_.push(this.segmentRequestFinished_.bind(this, error, simpleSegment, result));
+        return;
+      }
+      this.saveTransferStats_(simpleSegment.stats); // The request was aborted and the SegmentLoader has already been reset
+
+      if (!this.pendingSegment_) {
+        return;
+      } // the request was aborted and the SegmentLoader has already started
+      // another request. this can happen when the timeout for an aborted
+      // request triggers due to a limitation in the XHR library
+      // do not count this as any sort of request or we risk double-counting
+
+      if (simpleSegment.requestId !== this.pendingSegment_.requestId) {
+        return;
+      } // an error occurred from the active pendingSegment_ so reset everything
+
+      if (error) {
+        this.pendingSegment_ = null;
+        this.state = 'READY'; // aborts are not a true error condition and nothing corrective needs to be done
+
+        if (error.code === REQUEST_ERRORS.ABORTED) {
+          return;
+        }
+        this.pause(); // the error is really just that at least one of the requests timed-out
+        // set the bandwidth to a very low value and trigger an ABR switch to
+        // take emergency action
+
+        if (error.code === REQUEST_ERRORS.TIMEOUT) {
+          this.handleTimeout_();
+          return;
+        } // if control-flow has arrived here, then the error is real
+        // emit an error event to exclude the current playlist
+
+        this.mediaRequestsErrored += 1;
+        this.error(error);
+        this.trigger('error');
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // the response was a success so set any bandwidth stats the request
+      // generated for ABR purposes
+
+      this.saveBandwidthRelatedStats_(segmentInfo.duration, simpleSegment.stats);
+      segmentInfo.endOfAllRequests = simpleSegment.endOfAllRequests;
+      if (result.gopInfo) {
+        this.gopBuffer_ = updateGopBuffer(this.gopBuffer_, result.gopInfo, this.safeAppend_);
+      } // Although we may have already started appending on progress, we shouldn't switch the
+      // state away from loading until we are officially done loading the segment data.
+
+      this.state = 'APPENDING'; // used for testing
+
+      this.trigger('appending');
+      this.waitForAppendsToComplete_(segmentInfo);
+    }
+    setTimeMapping_(timeline) {
+      const timelineMapping = this.syncController_.mappingForTimeline(timeline);
+      if (timelineMapping !== null) {
+        this.timeMapping_ = timelineMapping;
+      }
+    }
+    updateMediaSecondsLoaded_(segment) {
+      if (typeof segment.start === 'number' && typeof segment.end === 'number') {
+        this.mediaSecondsLoaded += segment.end - segment.start;
+      } else {
+        this.mediaSecondsLoaded += segment.duration;
+      }
+    }
+    shouldUpdateTransmuxerTimestampOffset_(timestampOffset) {
+      if (timestampOffset === null) {
+        return false;
+      } // note that we're potentially using the same timestamp offset for both video and
+      // audio
+
+      if (this.loaderType_ === 'main' && timestampOffset !== this.sourceUpdater_.videoTimestampOffset()) {
+        return true;
+      }
+      if (!this.audioDisabled_ && timestampOffset !== this.sourceUpdater_.audioTimestampOffset()) {
+        return true;
+      }
+      return false;
+    }
+    trueSegmentStart_({
+      currentStart,
+      playlist,
+      mediaIndex,
+      firstVideoFrameTimeForData,
+      currentVideoTimestampOffset,
+      useVideoTimingInfo,
+      videoTimingInfo,
+      audioTimingInfo
+    }) {
+      if (typeof currentStart !== 'undefined') {
+        // if start was set once, keep using it
+        return currentStart;
+      }
+      if (!useVideoTimingInfo) {
+        return audioTimingInfo.start;
+      }
+      const previousSegment = playlist.segments[mediaIndex - 1]; // The start of a segment should be the start of the first full frame contained
+      // within that segment. Since the transmuxer maintains a cache of incomplete data
+      // from and/or the last frame seen, the start time may reflect a frame that starts
+      // in the previous segment. Check for that case and ensure the start time is
+      // accurate for the segment.
+
+      if (mediaIndex === 0 || !previousSegment || typeof previousSegment.start === 'undefined' || previousSegment.end !== firstVideoFrameTimeForData + currentVideoTimestampOffset) {
+        return firstVideoFrameTimeForData;
+      }
+      return videoTimingInfo.start;
+    }
+    waitForAppendsToComplete_(segmentInfo) {
+      const trackInfo = this.getCurrentMediaInfo_(segmentInfo);
+      if (!trackInfo) {
+        this.error({
+          message: 'No starting media returned, likely due to an unsupported media format.',
+          playlistExclusionDuration: Infinity,
+          metadata: {
+            errorType: videojs.Error.SegmentUnsupportedMediaFormat
+          }
+        });
+        this.trigger('error');
+        return;
+      } // Although transmuxing is done, appends may not yet be finished. Throw a marker
+      // on each queue this loader is responsible for to ensure that the appends are
+      // complete.
+
+      const {
+        hasAudio,
+        hasVideo,
+        isMuxed
+      } = trackInfo;
+      const waitForVideo = this.loaderType_ === 'main' && hasVideo;
+      const waitForAudio = !this.audioDisabled_ && hasAudio && !isMuxed;
+      segmentInfo.waitingOnAppends = 0; // segments with no data
+
+      if (!segmentInfo.hasAppendedData_) {
+        if (!segmentInfo.timingInfo && typeof segmentInfo.timestampOffset === 'number') {
+          // When there's no audio or video data in the segment, there's no audio or video
+          // timing information.
+          //
+          // If there's no audio or video timing information, then the timestamp offset
+          // can't be adjusted to the appropriate value for the transmuxer and source
+          // buffers.
+          //
+          // Therefore, the next segment should be used to set the timestamp offset.
+          this.isPendingTimestampOffset_ = true;
+        } // override settings for metadata only segments
+
+        segmentInfo.timingInfo = {
+          start: 0
+        };
+        segmentInfo.waitingOnAppends++;
+        if (!this.isPendingTimestampOffset_) {
+          // update the timestampoffset
+          this.updateSourceBufferTimestampOffset_(segmentInfo); // make sure the metadata queue is processed even though we have
+          // no video/audio data.
+
+          this.processMetadataQueue_();
+        } // append is "done" instantly with no data.
+
+        this.checkAppendsDone_(segmentInfo);
+        return;
+      } // Since source updater could call back synchronously, do the increments first.
+
+      if (waitForVideo) {
+        segmentInfo.waitingOnAppends++;
+      }
+      if (waitForAudio) {
+        segmentInfo.waitingOnAppends++;
+      }
+      if (waitForVideo) {
+        this.sourceUpdater_.videoQueueCallback(this.checkAppendsDone_.bind(this, segmentInfo));
+      }
+      if (waitForAudio) {
+        this.sourceUpdater_.audioQueueCallback(this.checkAppendsDone_.bind(this, segmentInfo));
+      }
+    }
+    checkAppendsDone_(segmentInfo) {
+      if (this.checkForAbort_(segmentInfo.requestId)) {
+        return;
+      }
+      segmentInfo.waitingOnAppends--;
+      if (segmentInfo.waitingOnAppends === 0) {
+        this.handleAppendsDone_();
+      }
+    }
+    checkForIllegalMediaSwitch(trackInfo) {
+      const illegalMediaSwitchError = illegalMediaSwitch(this.loaderType_, this.getCurrentMediaInfo_(), trackInfo);
+      if (illegalMediaSwitchError) {
+        this.error({
+          message: illegalMediaSwitchError,
+          playlistExclusionDuration: Infinity,
+          metadata: {
+            errorType: videojs.Error.SegmentSwitchError
+          }
+        });
+        this.trigger('error');
+        return true;
+      }
+      return false;
+    }
+    updateSourceBufferTimestampOffset_(segmentInfo) {
+      if (segmentInfo.timestampOffset === null ||
+      // we don't yet have the start for whatever media type (video or audio) has
+      // priority, timing-wise, so we must wait
+      typeof segmentInfo.timingInfo.start !== 'number' ||
+      // already updated the timestamp offset for this segment
+      segmentInfo.changedTimestampOffset ||
+      // the alt audio loader should not be responsible for setting the timestamp offset
+      this.loaderType_ !== 'main') {
+        return;
+      }
+      let didChange = false; // Primary timing goes by video, and audio is trimmed in the transmuxer, meaning that
+      // the timing info here comes from video. In the event that the audio is longer than
+      // the video, this will trim the start of the audio.
+      // This also trims any offset from 0 at the beginning of the media
+
+      segmentInfo.timestampOffset -= this.getSegmentStartTimeForTimestampOffsetCalculation_({
+        videoTimingInfo: segmentInfo.segment.videoTimingInfo,
+        audioTimingInfo: segmentInfo.segment.audioTimingInfo,
+        timingInfo: segmentInfo.timingInfo
+      }); // In the event that there are part segment downloads, each will try to update the
+      // timestamp offset. Retaining this bit of state prevents us from updating in the
+      // future (within the same segment), however, there may be a better way to handle it.
+
+      segmentInfo.changedTimestampOffset = true;
+      if (segmentInfo.timestampOffset !== this.sourceUpdater_.videoTimestampOffset()) {
+        this.sourceUpdater_.videoTimestampOffset(segmentInfo.timestampOffset);
+        didChange = true;
+      }
+      if (segmentInfo.timestampOffset !== this.sourceUpdater_.audioTimestampOffset()) {
+        this.sourceUpdater_.audioTimestampOffset(segmentInfo.timestampOffset);
+        didChange = true;
+      }
+      if (didChange) {
+        this.trigger('timestampoffset');
+      }
+    }
+    getSegmentStartTimeForTimestampOffsetCalculation_({
+      videoTimingInfo,
+      audioTimingInfo,
+      timingInfo
+    }) {
+      if (!this.useDtsForTimestampOffset_) {
+        return timingInfo.start;
+      }
+      if (videoTimingInfo && typeof videoTimingInfo.transmuxedDecodeStart === 'number') {
+        return videoTimingInfo.transmuxedDecodeStart;
+      } // handle audio only
+
+      if (audioTimingInfo && typeof audioTimingInfo.transmuxedDecodeStart === 'number') {
+        return audioTimingInfo.transmuxedDecodeStart;
+      } // handle content not transmuxed (e.g., MP4)
+
+      return timingInfo.start;
+    }
+    updateTimingInfoEnd_(segmentInfo) {
+      segmentInfo.timingInfo = segmentInfo.timingInfo || {};
+      const trackInfo = this.getMediaInfo_();
+      const useVideoTimingInfo = this.loaderType_ === 'main' && trackInfo && trackInfo.hasVideo;
+      const prioritizedTimingInfo = useVideoTimingInfo && segmentInfo.videoTimingInfo ? segmentInfo.videoTimingInfo : segmentInfo.audioTimingInfo;
+      if (!prioritizedTimingInfo) {
+        return;
+      }
+      segmentInfo.timingInfo.end = typeof prioritizedTimingInfo.end === 'number' ?
+      // End time may not exist in a case where we aren't parsing the full segment (one
+      // current example is the case of fmp4), so use the rough duration to calculate an
+      // end time.
+      prioritizedTimingInfo.end : prioritizedTimingInfo.start + segmentInfo.duration;
+    }
+    /**
+     * callback to run when appendBuffer is finished. detects if we are
+     * in a good state to do things with the data we got, or if we need
+     * to wait for more
+     *
+     * @private
+     */
+
+    handleAppendsDone_() {
+      // appendsdone can cause an abort
+      if (this.pendingSegment_) {
+        this.trigger('appendsdone');
+      }
+      if (!this.pendingSegment_) {
+        this.state = 'READY'; // TODO should this move into this.checkForAbort to speed up requests post abort in
+        // all appending cases?
+
+        if (!this.paused()) {
+          this.monitorBuffer_();
+        }
+        return;
+      }
+      const segmentInfo = this.pendingSegment_;
+      if (segmentInfo.part && segmentInfo.part.syncInfo) {
+        // low-latency flow
+        segmentInfo.part.syncInfo.markAppended();
+      } else if (segmentInfo.segment.syncInfo) {
+        // normal flow
+        segmentInfo.segment.syncInfo.markAppended();
+      } // Now that the end of the segment has been reached, we can set the end time. It's
+      // best to wait until all appends are done so we're sure that the primary media is
+      // finished (and we have its end time).
+
+      this.updateTimingInfoEnd_(segmentInfo);
+      if (this.shouldSaveSegmentTimingInfo_) {
+        // Timeline mappings should only be saved for the main loader. This is for multiple
+        // reasons:
+        //
+        // 1) Only one mapping is saved per timeline, meaning that if both the audio loader
+        //    and the main loader try to save the timeline mapping, whichever comes later
+        //    will overwrite the first. In theory this is OK, as the mappings should be the
+        //    same, however, it breaks for (2)
+        // 2) In the event of a live stream, the initial live point will make for a somewhat
+        //    arbitrary mapping. If audio and video streams are not perfectly in-sync, then
+        //    the mapping will be off for one of the streams, dependent on which one was
+        //    first saved (see (1)).
+        // 3) Primary timing goes by video in VHS, so the mapping should be video.
+        //
+        // Since the audio loader will wait for the main loader to load the first segment,
+        // the main loader will save the first timeline mapping, and ensure that there won't
+        // be a case where audio loads two segments without saving a mapping (thus leading
+        // to missing segment timing info).
+        this.syncController_.saveSegmentTimingInfo({
+          segmentInfo,
+          shouldSaveTimelineMapping: this.loaderType_ === 'main'
+        });
+      }
+      const segmentDurationMessage = getTroublesomeSegmentDurationMessage(segmentInfo, this.sourceType_);
+      if (segmentDurationMessage) {
+        if (segmentDurationMessage.severity === 'warn') {
+          videojs.log.warn(segmentDurationMessage.message);
+        } else {
+          this.logger_(segmentDurationMessage.message);
+        }
+      }
+      this.recordThroughput_(segmentInfo);
+      this.pendingSegment_ = null;
+      this.state = 'READY';
+      if (segmentInfo.isSyncRequest) {
+        this.trigger('syncinfoupdate'); // if the sync request was not appended
+        // then it was not the correct segment.
+        // throw it away and use the data it gave us
+        // to get the correct one.
+
+        if (!segmentInfo.hasAppendedData_) {
+          this.logger_(`Throwing away un-appended sync request ${segmentInfoString(segmentInfo)}`);
+          return;
+        }
+      }
+      this.logger_(`Appended ${segmentInfoString(segmentInfo)}`);
+      this.addSegmentMetadataCue_(segmentInfo);
+      this.fetchAtBuffer_ = true;
+      if (this.currentTimeline_ !== segmentInfo.timeline) {
+        this.timelineChangeController_.lastTimelineChange({
+          type: this.loaderType_,
+          from: this.currentTimeline_,
+          to: segmentInfo.timeline
+        }); // If audio is not disabled, the main segment loader is responsible for updating
+        // the audio timeline as well. If the content is video only, this won't have any
+        // impact.
+
+        if (this.loaderType_ === 'main' && !this.audioDisabled_) {
+          this.timelineChangeController_.lastTimelineChange({
+            type: 'audio',
+            from: this.currentTimeline_,
+            to: segmentInfo.timeline
+          });
+        }
+      }
+      this.currentTimeline_ = segmentInfo.timeline; // We must update the syncinfo to recalculate the seekable range before
+      // the following conditional otherwise it may consider this a bad "guess"
+      // and attempt to resync when the post-update seekable window and live
+      // point would mean that this was the perfect segment to fetch
+
+      this.trigger('syncinfoupdate');
+      const segment = segmentInfo.segment;
+      const part = segmentInfo.part;
+      const badSegmentGuess = segment.end && this.currentTime_() - segment.end > segmentInfo.playlist.targetDuration * 3;
+      const badPartGuess = part && part.end && this.currentTime_() - part.end > segmentInfo.playlist.partTargetDuration * 3; // If we previously appended a segment/part that ends more than 3 part/targetDurations before
+      // the currentTime_ that means that our conservative guess was too conservative.
+      // In that case, reset the loader state so that we try to use any information gained
+      // from the previous request to create a new, more accurate, sync-point.
+
+      if (badSegmentGuess || badPartGuess) {
+        this.logger_(`bad ${badSegmentGuess ? 'segment' : 'part'} ${segmentInfoString(segmentInfo)}`);
+        this.resetEverything();
+        return;
+      }
+      const isWalkingForward = this.mediaIndex !== null; // Don't do a rendition switch unless we have enough time to get a sync segment
+      // and conservatively guess
+
+      if (isWalkingForward) {
+        this.trigger('bandwidthupdate');
+      }
+      this.trigger('progress');
+      this.mediaIndex = segmentInfo.mediaIndex;
+      this.partIndex = segmentInfo.partIndex; // any time an update finishes and the last segment is in the
+      // buffer, end the stream. this ensures the "ended" event will
+      // fire if playback reaches that point.
+
+      if (this.isEndOfStream_(segmentInfo.mediaIndex, segmentInfo.playlist, segmentInfo.partIndex)) {
+        this.endOfStream();
+      } // used for testing
+
+      this.trigger('appended');
+      if (segmentInfo.hasAppendedData_) {
+        this.mediaAppends++;
+      }
+      if (!this.paused()) {
+        this.monitorBuffer_();
+      }
+    }
+    /**
+     * Records the current throughput of the decrypt, transmux, and append
+     * portion of the semgment pipeline. `throughput.rate` is a the cumulative
+     * moving average of the throughput. `throughput.count` is the number of
+     * data points in the average.
+     *
+     * @private
+     * @param {Object} segmentInfo the object returned by loadSegment
+     */
+
+    recordThroughput_(segmentInfo) {
+      if (segmentInfo.duration < MIN_SEGMENT_DURATION_TO_SAVE_STATS) {
+        this.logger_(`Ignoring segment's throughput because its duration of ${segmentInfo.duration}` + ` is less than the min to record ${MIN_SEGMENT_DURATION_TO_SAVE_STATS}`);
+        return;
+      }
+      const rate = this.throughput.rate; // Add one to the time to ensure that we don't accidentally attempt to divide
+      // by zero in the case where the throughput is ridiculously high
+
+      const segmentProcessingTime = Date.now() - segmentInfo.endOfAllRequests + 1; // Multiply by 8000 to convert from bytes/millisecond to bits/second
+
+      const segmentProcessingThroughput = Math.floor(segmentInfo.byteLength / segmentProcessingTime * 8 * 1000); // This is just a cumulative moving average calculation:
+      //   newAvg = oldAvg + (sample - oldAvg) / (sampleCount + 1)
+
+      this.throughput.rate += (segmentProcessingThroughput - rate) / ++this.throughput.count;
+    }
+    /**
+     * Adds a cue to the segment-metadata track with some metadata information about the
+     * segment
+     *
+     * @private
+     * @param {Object} segmentInfo
+     *        the object returned by loadSegment
+     * @method addSegmentMetadataCue_
+     */
+
+    addSegmentMetadataCue_(segmentInfo) {
+      if (!this.segmentMetadataTrack_) {
+        return;
+      }
+      const segment = segmentInfo.segment;
+      const start = segment.start;
+      const end = segment.end; // Do not try adding the cue if the start and end times are invalid.
+
+      if (!finite(start) || !finite(end)) {
+        return;
+      }
+      removeCuesFromTrack(start, end, this.segmentMetadataTrack_);
+      const Cue = window.WebKitDataCue || window.VTTCue;
+      const value = {
+        custom: segment.custom,
+        dateTimeObject: segment.dateTimeObject,
+        dateTimeString: segment.dateTimeString,
+        programDateTime: segment.programDateTime,
+        bandwidth: segmentInfo.playlist.attributes.BANDWIDTH,
+        resolution: segmentInfo.playlist.attributes.RESOLUTION,
+        codecs: segmentInfo.playlist.attributes.CODECS,
+        byteLength: segmentInfo.byteLength,
+        uri: segmentInfo.uri,
+        timeline: segmentInfo.timeline,
+        playlist: segmentInfo.playlist.id,
+        start,
+        end
+      };
+      const data = JSON.stringify(value);
+      const cue = new Cue(start, end, data); // Attach the metadata to the value property of the cue to keep consistency between
+      // the differences of WebKitDataCue in safari and VTTCue in other browsers
+
+      cue.value = value;
+      this.segmentMetadataTrack_.addCue(cue);
+    }
+  }
+  function noop() {}
+  const toTitleCase = function (string) {
+    if (typeof string !== 'string') {
+      return string;
+    }
+    return string.replace(/./, w => w.toUpperCase());
+  };
+
+  /**
+   * @file source-updater.js
+   */
+  const bufferTypes = ['video', 'audio'];
+  const updating = (type, sourceUpdater) => {
+    const sourceBuffer = sourceUpdater[`${type}Buffer`];
+    return sourceBuffer && sourceBuffer.updating || sourceUpdater.queuePending[type];
+  };
+  const nextQueueIndexOfType = (type, queue) => {
+    for (let i = 0; i < queue.length; i++) {
+      const queueEntry = queue[i];
+      if (queueEntry.type === 'mediaSource') {
+        // If the next entry is a media source entry (uses multiple source buffers), block
+        // processing to allow it to go through first.
+        return null;
+      }
+      if (queueEntry.type === type) {
+        return i;
+      }
+    }
+    return null;
+  };
+  const shiftQueue = (type, sourceUpdater) => {
+    if (sourceUpdater.queue.length === 0) {
+      return;
+    }
+    let queueIndex = 0;
+    let queueEntry = sourceUpdater.queue[queueIndex];
+    if (queueEntry.type === 'mediaSource') {
+      if (!sourceUpdater.updating() && sourceUpdater.mediaSource.readyState !== 'closed') {
+        sourceUpdater.queue.shift();
+        queueEntry.action(sourceUpdater);
+        if (queueEntry.doneFn) {
+          queueEntry.doneFn();
+        } // Only specific source buffer actions must wait for async updateend events. Media
+        // Source actions process synchronously. Therefore, both audio and video source
+        // buffers are now clear to process the next queue entries.
+
+        shiftQueue('audio', sourceUpdater);
+        shiftQueue('video', sourceUpdater);
+      } // Media Source actions require both source buffers, so if the media source action
+      // couldn't process yet (because one or both source buffers are busy), block other
+      // queue actions until both are available and the media source action can process.
+
+      return;
+    }
+    if (type === 'mediaSource') {
+      // If the queue was shifted by a media source action (this happens when pushing a
+      // media source action onto the queue), then it wasn't from an updateend event from an
+      // audio or video source buffer, so there's no change from previous state, and no
+      // processing should be done.
+      return;
+    } // Media source queue entries don't need to consider whether the source updater is
+    // started (i.e., source buffers are created) as they don't need the source buffers, but
+    // source buffer queue entries do.
+
+    if (!sourceUpdater.ready() || sourceUpdater.mediaSource.readyState === 'closed' || updating(type, sourceUpdater)) {
+      return;
+    }
+    if (queueEntry.type !== type) {
+      queueIndex = nextQueueIndexOfType(type, sourceUpdater.queue);
+      if (queueIndex === null) {
+        // Either there's no queue entry that uses this source buffer type in the queue, or
+        // there's a media source queue entry before the next entry of this type, in which
+        // case wait for that action to process first.
+        return;
+      }
+      queueEntry = sourceUpdater.queue[queueIndex];
+    }
+    sourceUpdater.queue.splice(queueIndex, 1); // Keep a record that this source buffer type is in use.
+    //
+    // The queue pending operation must be set before the action is performed in the event
+    // that the action results in a synchronous event that is acted upon. For instance, if
+    // an exception is thrown that can be handled, it's possible that new actions will be
+    // appended to an empty queue and immediately executed, but would not have the correct
+    // pending information if this property was set after the action was performed.
+
+    sourceUpdater.queuePending[type] = queueEntry;
+    queueEntry.action(type, sourceUpdater);
+    if (!queueEntry.doneFn) {
+      // synchronous operation, process next entry
+      sourceUpdater.queuePending[type] = null;
+      shiftQueue(type, sourceUpdater);
+      return;
+    }
+  };
+  const cleanupBuffer = (type, sourceUpdater) => {
+    const buffer = sourceUpdater[`${type}Buffer`];
+    const titleType = toTitleCase(type);
+    if (!buffer) {
+      return;
+    }
+    buffer.removeEventListener('updateend', sourceUpdater[`on${titleType}UpdateEnd_`]);
+    buffer.removeEventListener('error', sourceUpdater[`on${titleType}Error_`]);
+    sourceUpdater.codecs[type] = null;
+    sourceUpdater[`${type}Buffer`] = null;
+  };
+  const inSourceBuffers = (mediaSource, sourceBuffer) => mediaSource && sourceBuffer && Array.prototype.indexOf.call(mediaSource.sourceBuffers, sourceBuffer) !== -1;
+  const actions = {
+    appendBuffer: (bytes, segmentInfo, onError) => (type, sourceUpdater) => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`Appending segment ${segmentInfo.mediaIndex}'s ${bytes.length} bytes to ${type}Buffer`);
+      try {
+        sourceBuffer.appendBuffer(bytes);
+      } catch (e) {
+        sourceUpdater.logger_(`Error with code ${e.code} ` + (e.code === QUOTA_EXCEEDED_ERR ? '(QUOTA_EXCEEDED_ERR) ' : '') + `when appending segment ${segmentInfo.mediaIndex} to ${type}Buffer`);
+        sourceUpdater.queuePending[type] = null;
+        onError(e);
+      }
+    },
+    remove: (start, end) => (type, sourceUpdater) => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`Removing ${start} to ${end} from ${type}Buffer`);
+      try {
+        sourceBuffer.remove(start, end);
+      } catch (e) {
+        sourceUpdater.logger_(`Remove ${start} to ${end} from ${type}Buffer failed`);
+      }
+    },
+    timestampOffset: offset => (type, sourceUpdater) => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`Setting ${type}timestampOffset to ${offset}`);
+      sourceBuffer.timestampOffset = offset;
+    },
+    callback: callback => (type, sourceUpdater) => {
+      callback();
+    },
+    endOfStream: error => sourceUpdater => {
+      if (sourceUpdater.mediaSource.readyState !== 'open') {
+        return;
+      }
+      sourceUpdater.logger_(`Calling mediaSource endOfStream(${error || ''})`);
+      try {
+        sourceUpdater.mediaSource.endOfStream(error);
+      } catch (e) {
+        videojs.log.warn('Failed to call media source endOfStream', e);
+      }
+    },
+    duration: duration => sourceUpdater => {
+      sourceUpdater.logger_(`Setting mediaSource duration to ${duration}`);
+      try {
+        sourceUpdater.mediaSource.duration = duration;
+      } catch (e) {
+        videojs.log.warn('Failed to set media source duration', e);
+      }
+    },
+    abort: () => (type, sourceUpdater) => {
+      if (sourceUpdater.mediaSource.readyState !== 'open') {
+        return;
+      }
+      const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`calling abort on ${type}Buffer`);
+      try {
+        sourceBuffer.abort();
+      } catch (e) {
+        videojs.log.warn(`Failed to abort on ${type}Buffer`, e);
+      }
+    },
+    addSourceBuffer: (type, codec) => sourceUpdater => {
+      const titleType = toTitleCase(type);
+      const mime = getMimeForCodec(codec);
+      sourceUpdater.logger_(`Adding ${type}Buffer with codec ${codec} to mediaSource`);
+      const sourceBuffer = sourceUpdater.mediaSource.addSourceBuffer(mime);
+      sourceBuffer.addEventListener('updateend', sourceUpdater[`on${titleType}UpdateEnd_`]);
+      sourceBuffer.addEventListener('error', sourceUpdater[`on${titleType}Error_`]);
+      sourceUpdater.codecs[type] = codec;
+      sourceUpdater[`${type}Buffer`] = sourceBuffer;
+    },
+    removeSourceBuffer: type => sourceUpdater => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`];
+      cleanupBuffer(type, sourceUpdater); // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`Removing ${type}Buffer with codec ${sourceUpdater.codecs[type]} from mediaSource`);
+      try {
+        sourceUpdater.mediaSource.removeSourceBuffer(sourceBuffer);
+      } catch (e) {
+        videojs.log.warn(`Failed to removeSourceBuffer ${type}Buffer`, e);
+      }
+    },
+    changeType: codec => (type, sourceUpdater) => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`];
+      const mime = getMimeForCodec(codec); // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      } // do not update codec if we don't need to.
+      // Only update if we change the codec base.
+      // For example, going from avc1.640028 to avc1.64001f does not require a changeType call.
+
+      const newCodecBase = codec.substring(0, codec.indexOf('.'));
+      const oldCodec = sourceUpdater.codecs[type];
+      const oldCodecBase = oldCodec.substring(0, oldCodec.indexOf('.'));
+      if (oldCodecBase === newCodecBase) {
+        return;
+      }
+      sourceUpdater.logger_(`changing ${type}Buffer codec from ${sourceUpdater.codecs[type]} to ${codec}`); // check if change to the provided type is supported
+
+      try {
+        sourceBuffer.changeType(mime);
+        sourceUpdater.codecs[type] = codec;
+      } catch (e) {
+        videojs.log.warn(`Failed to changeType on ${type}Buffer`, e);
+      }
+    }
+  };
+  const pushQueue = ({
+    type,
+    sourceUpdater,
+    action,
+    doneFn,
+    name
+  }) => {
+    sourceUpdater.queue.push({
+      type,
+      action,
+      doneFn,
+      name
+    });
+    shiftQueue(type, sourceUpdater);
+  };
+  const onUpdateend = (type, sourceUpdater) => e => {
+    // Although there should, in theory, be a pending action for any updateend receieved,
+    // there are some actions that may trigger updateend events without set definitions in
+    // the w3c spec. For instance, setting the duration on the media source may trigger
+    // updateend events on source buffers. This does not appear to be in the spec. As such,
+    // if we encounter an updateend without a corresponding pending action from our queue
+    // for that source buffer type, process the next action.
+    const bufferedRangesForType = sourceUpdater[`${type}Buffered`]();
+    const descriptiveString = bufferedRangesToString(bufferedRangesForType);
+    sourceUpdater.logger_(`received "updateend" event for ${type} Source Buffer: `, descriptiveString);
+    if (sourceUpdater.queuePending[type]) {
+      const doneFn = sourceUpdater.queuePending[type].doneFn;
+      sourceUpdater.queuePending[type] = null;
+      if (doneFn) {
+        // if there's an error, report it
+        doneFn(sourceUpdater[`${type}Error_`]);
+      }
+    }
+    shiftQueue(type, sourceUpdater);
+  };
+  /**
+   * A queue of callbacks to be serialized and applied when a
+   * MediaSource and its associated SourceBuffers are not in the
+   * updating state. It is used by the segment loader to update the
+   * underlying SourceBuffers when new data is loaded, for instance.
+   *
+   * @class SourceUpdater
+   * @param {MediaSource} mediaSource the MediaSource to create the SourceBuffer from
+   * @param {string} mimeType the desired MIME type of the underlying SourceBuffer
+   */
+
+  class SourceUpdater extends videojs.EventTarget {
+    constructor(mediaSource) {
+      super();
+      this.mediaSource = mediaSource;
+      this.sourceopenListener_ = () => shiftQueue('mediaSource', this);
+      this.mediaSource.addEventListener('sourceopen', this.sourceopenListener_);
+      this.logger_ = logger('SourceUpdater'); // initial timestamp offset is 0
+
+      this.audioTimestampOffset_ = 0;
+      this.videoTimestampOffset_ = 0;
+      this.queue = [];
+      this.queuePending = {
+        audio: null,
+        video: null
+      };
+      this.delayedAudioAppendQueue_ = [];
+      this.videoAppendQueued_ = false;
+      this.codecs = {};
+      this.onVideoUpdateEnd_ = onUpdateend('video', this);
+      this.onAudioUpdateEnd_ = onUpdateend('audio', this);
+      this.onVideoError_ = e => {
+        // used for debugging
+        this.videoError_ = e;
+      };
+      this.onAudioError_ = e => {
+        // used for debugging
+        this.audioError_ = e;
+      };
+      this.createdSourceBuffers_ = false;
+      this.initializedEme_ = false;
+      this.triggeredReady_ = false;
+    }
+    initializedEme() {
+      this.initializedEme_ = true;
+      this.triggerReady();
+    }
+    hasCreatedSourceBuffers() {
+      // if false, likely waiting on one of the segment loaders to get enough data to create
+      // source buffers
+      return this.createdSourceBuffers_;
+    }
+    hasInitializedAnyEme() {
+      return this.initializedEme_;
+    }
+    ready() {
+      return this.hasCreatedSourceBuffers() && this.hasInitializedAnyEme();
+    }
+    createSourceBuffers(codecs) {
+      if (this.hasCreatedSourceBuffers()) {
+        // already created them before
+        return;
+      } // the intial addOrChangeSourceBuffers will always be
+      // two add buffers.
+
+      this.addOrChangeSourceBuffers(codecs);
+      this.createdSourceBuffers_ = true;
+      this.trigger('createdsourcebuffers');
+      this.triggerReady();
+    }
+    triggerReady() {
+      // only allow ready to be triggered once, this prevents the case
+      // where:
+      // 1. we trigger createdsourcebuffers
+      // 2. ie 11 synchronously initializates eme
+      // 3. the synchronous initialization causes us to trigger ready
+      // 4. We go back to the ready check in createSourceBuffers and ready is triggered again.
+      if (this.ready() && !this.triggeredReady_) {
+        this.triggeredReady_ = true;
+        this.trigger('ready');
+      }
+    }
+    /**
+     * Add a type of source buffer to the media source.
+     *
+     * @param {string} type
+     *        The type of source buffer to add.
+     *
+     * @param {string} codec
+     *        The codec to add the source buffer with.
+     */
+
+    addSourceBuffer(type, codec) {
+      pushQueue({
+        type: 'mediaSource',
+        sourceUpdater: this,
+        action: actions.addSourceBuffer(type, codec),
+        name: 'addSourceBuffer'
+      });
+    }
+    /**
+     * call abort on a source buffer.
+     *
+     * @param {string} type
+     *        The type of source buffer to call abort on.
+     */
+
+    abort(type) {
+      pushQueue({
+        type,
+        sourceUpdater: this,
+        action: actions.abort(type),
+        name: 'abort'
+      });
+    }
+    /**
+     * Call removeSourceBuffer and remove a specific type
+     * of source buffer on the mediaSource.
+     *
+     * @param {string} type
+     *        The type of source buffer to remove.
+     */
+
+    removeSourceBuffer(type) {
+      if (!this.canRemoveSourceBuffer()) {
+        videojs.log.error('removeSourceBuffer is not supported!');
+        return;
+      }
+      pushQueue({
+        type: 'mediaSource',
+        sourceUpdater: this,
+        action: actions.removeSourceBuffer(type),
+        name: 'removeSourceBuffer'
+      });
+    }
+    /**
+     * Whether or not the removeSourceBuffer function is supported
+     * on the mediaSource.
+     *
+     * @return {boolean}
+     *          if removeSourceBuffer can be called.
+     */
+
+    canRemoveSourceBuffer() {
+      // As of Firefox 83 removeSourceBuffer
+      // throws errors, so we report that it does not support this.
+      return !videojs.browser.IS_FIREFOX && window.MediaSource && window.MediaSource.prototype && typeof window.MediaSource.prototype.removeSourceBuffer === 'function';
+    }
+    /**
+     * Whether or not the changeType function is supported
+     * on our SourceBuffers.
+     *
+     * @return {boolean}
+     *         if changeType can be called.
+     */
+
+    static canChangeType() {
+      return window.SourceBuffer && window.SourceBuffer.prototype && typeof window.SourceBuffer.prototype.changeType === 'function';
+    }
+    /**
+     * Whether or not the changeType function is supported
+     * on our SourceBuffers.
+     *
+     * @return {boolean}
+     *         if changeType can be called.
+     */
+
+    canChangeType() {
+      return this.constructor.canChangeType();
+    }
+    /**
+     * Call the changeType function on a source buffer, given the code and type.
+     *
+     * @param {string} type
+     *        The type of source buffer to call changeType on.
+     *
+     * @param {string} codec
+     *        The codec string to change type with on the source buffer.
+     */
+
+    changeType(type, codec) {
+      if (!this.canChangeType()) {
+        videojs.log.error('changeType is not supported!');
+        return;
+      }
+      pushQueue({
+        type,
+        sourceUpdater: this,
+        action: actions.changeType(codec),
+        name: 'changeType'
+      });
+    }
+    /**
+     * Add source buffers with a codec or, if they are already created,
+     * call changeType on source buffers using changeType.
+     *
+     * @param {Object} codecs
+     *        Codecs to switch to
+     */
+
+    addOrChangeSourceBuffers(codecs) {
+      if (!codecs || typeof codecs !== 'object' || Object.keys(codecs).length === 0) {
+        throw new Error('Cannot addOrChangeSourceBuffers to undefined codecs');
+      }
+      Object.keys(codecs).forEach(type => {
+        const codec = codecs[type];
+        if (!this.hasCreatedSourceBuffers()) {
+          return this.addSourceBuffer(type, codec);
+        }
+        if (this.canChangeType()) {
+          this.changeType(type, codec);
+        }
+      });
+    }
+    /**
+     * Queue an update to append an ArrayBuffer.
+     *
+     * @param {MediaObject} object containing audioBytes and/or videoBytes
+     * @param {Function} done the function to call when done
+     * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-appendBuffer-void-ArrayBuffer-data
+     */
+
+    appendBuffer(options, doneFn) {
+      const {
+        segmentInfo,
+        type,
+        bytes
+      } = options;
+      this.processedAppend_ = true;
+      if (type === 'audio' && this.videoBuffer && !this.videoAppendQueued_) {
+        this.delayedAudioAppendQueue_.push([options, doneFn]);
+        this.logger_(`delayed audio append of ${bytes.length} until video append`);
+        return;
+      } // In the case of certain errors, for instance, QUOTA_EXCEEDED_ERR, updateend will
+      // not be fired. This means that the queue will be blocked until the next action
+      // taken by the segment-loader. Provide a mechanism for segment-loader to handle
+      // these errors by calling the doneFn with the specific error.
+
+      const onError = doneFn;
+      pushQueue({
+        type,
+        sourceUpdater: this,
+        action: actions.appendBuffer(bytes, segmentInfo || {
+          mediaIndex: -1
+        }, onError),
+        doneFn,
+        name: 'appendBuffer'
+      });
+      if (type === 'video') {
+        this.videoAppendQueued_ = true;
+        if (!this.delayedAudioAppendQueue_.length) {
+          return;
+        }
+        const queue = this.delayedAudioAppendQueue_.slice();
+        this.logger_(`queuing delayed audio ${queue.length} appendBuffers`);
+        this.delayedAudioAppendQueue_.length = 0;
+        queue.forEach(que => {
+          this.appendBuffer.apply(this, que);
+        });
+      }
+    }
+    /**
+     * Get the audio buffer's buffered timerange.
+     *
+     * @return {TimeRange}
+     *         The audio buffer's buffered time range
+     */
+
+    audioBuffered() {
+      // no media source/source buffer or it isn't in the media sources
+      // source buffer list
+      if (!inSourceBuffers(this.mediaSource, this.audioBuffer)) {
+        return createTimeRanges();
+      }
+      return this.audioBuffer.buffered ? this.audioBuffer.buffered : createTimeRanges();
+    }
+    /**
+     * Get the video buffer's buffered timerange.
+     *
+     * @return {TimeRange}
+     *         The video buffer's buffered time range
+     */
+
+    videoBuffered() {
+      // no media source/source buffer or it isn't in the media sources
+      // source buffer list
+      if (!inSourceBuffers(this.mediaSource, this.videoBuffer)) {
+        return createTimeRanges();
+      }
+      return this.videoBuffer.buffered ? this.videoBuffer.buffered : createTimeRanges();
+    }
+    /**
+     * Get a combined video/audio buffer's buffered timerange.
+     *
+     * @return {TimeRange}
+     *         the combined time range
+     */
+
+    buffered() {
+      const video = inSourceBuffers(this.mediaSource, this.videoBuffer) ? this.videoBuffer : null;
+      const audio = inSourceBuffers(this.mediaSource, this.audioBuffer) ? this.audioBuffer : null;
+      if (audio && !video) {
+        return this.audioBuffered();
+      }
+      if (video && !audio) {
+        return this.videoBuffered();
+      }
+      return bufferIntersection(this.audioBuffered(), this.videoBuffered());
+    }
+    /**
+     * Add a callback to the queue that will set duration on the mediaSource.
+     *
+     * @param {number} duration
+     *        The duration to set
+     *
+     * @param {Function} [doneFn]
+     *        function to run after duration has been set.
+     */
+
+    setDuration(duration, doneFn = noop) {
+      // In order to set the duration on the media source, it's necessary to wait for all
+      // source buffers to no longer be updating. "If the updating attribute equals true on
+      // any SourceBuffer in sourceBuffers, then throw an InvalidStateError exception and
+      // abort these steps." (source: https://www.w3.org/TR/media-source/#attributes).
+      pushQueue({
+        type: 'mediaSource',
+        sourceUpdater: this,
+        action: actions.duration(duration),
+        name: 'duration',
+        doneFn
+      });
+    }
+    /**
+     * Add a mediaSource endOfStream call to the queue
+     *
+     * @param {Error} [error]
+     *        Call endOfStream with an error
+     *
+     * @param {Function} [doneFn]
+     *        A function that should be called when the
+     *        endOfStream call has finished.
+     */
+
+    endOfStream(error = null, doneFn = noop) {
+      if (typeof error !== 'string') {
+        error = undefined;
+      } // In order to set the duration on the media source, it's necessary to wait for all
+      // source buffers to no longer be updating. "If the updating attribute equals true on
+      // any SourceBuffer in sourceBuffers, then throw an InvalidStateError exception and
+      // abort these steps." (source: https://www.w3.org/TR/media-source/#attributes).
+
+      pushQueue({
+        type: 'mediaSource',
+        sourceUpdater: this,
+        action: actions.endOfStream(error),
+        name: 'endOfStream',
+        doneFn
+      });
+    }
+    /**
+     * Queue an update to remove a time range from the buffer.
+     *
+     * @param {number} start where to start the removal
+     * @param {number} end where to end the removal
+     * @param {Function} [done=noop] optional callback to be executed when the remove
+     * operation is complete
+     * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end
+     */
+
+    removeAudio(start, end, done = noop) {
+      if (!this.audioBuffered().length || this.audioBuffered().end(0) === 0) {
+        done();
+        return;
+      }
+      pushQueue({
+        type: 'audio',
+        sourceUpdater: this,
+        action: actions.remove(start, end),
+        doneFn: done,
+        name: 'remove'
+      });
+    }
+    /**
+     * Queue an update to remove a time range from the buffer.
+     *
+     * @param {number} start where to start the removal
+     * @param {number} end where to end the removal
+     * @param {Function} [done=noop] optional callback to be executed when the remove
+     * operation is complete
+     * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end
+     */
+
+    removeVideo(start, end, done = noop) {
+      if (!this.videoBuffered().length || this.videoBuffered().end(0) === 0) {
+        done();
+        return;
+      }
+      pushQueue({
+        type: 'video',
+        sourceUpdater: this,
+        action: actions.remove(start, end),
+        doneFn: done,
+        name: 'remove'
+      });
+    }
+    /**
+     * Whether the underlying sourceBuffer is updating or not
+     *
+     * @return {boolean} the updating status of the SourceBuffer
+     */
+
+    updating() {
+      // the audio/video source buffer is updating
+      if (updating('audio', this) || updating('video', this)) {
+        return true;
+      }
+      return false;
+    }
+    /**
+     * Set/get the timestampoffset on the audio SourceBuffer
+     *
+     * @return {number} the timestamp offset
+     */
+
+    audioTimestampOffset(offset) {
+      if (typeof offset !== 'undefined' && this.audioBuffer &&
+      // no point in updating if it's the same
+      this.audioTimestampOffset_ !== offset) {
+        pushQueue({
+          type: 'audio',
+          sourceUpdater: this,
+          action: actions.timestampOffset(offset),
+          name: 'timestampOffset'
+        });
+        this.audioTimestampOffset_ = offset;
+      }
+      return this.audioTimestampOffset_;
+    }
+    /**
+     * Set/get the timestampoffset on the video SourceBuffer
+     *
+     * @return {number} the timestamp offset
+     */
+
+    videoTimestampOffset(offset) {
+      if (typeof offset !== 'undefined' && this.videoBuffer &&
+      // no point in updating if it's the same
+      this.videoTimestampOffset !== offset) {
+        pushQueue({
+          type: 'video',
+          sourceUpdater: this,
+          action: actions.timestampOffset(offset),
+          name: 'timestampOffset'
+        });
+        this.videoTimestampOffset_ = offset;
+      }
+      return this.videoTimestampOffset_;
+    }
+    /**
+     * Add a function to the queue that will be called
+     * when it is its turn to run in the audio queue.
+     *
+     * @param {Function} callback
+     *        The callback to queue.
+     */
+
+    audioQueueCallback(callback) {
+      if (!this.audioBuffer) {
+        return;
+      }
+      pushQueue({
+        type: 'audio',
+        sourceUpdater: this,
+        action: actions.callback(callback),
+        name: 'callback'
+      });
+    }
+    /**
+     * Add a function to the queue that will be called
+     * when it is its turn to run in the video queue.
+     *
+     * @param {Function} callback
+     *        The callback to queue.
+     */
+
+    videoQueueCallback(callback) {
+      if (!this.videoBuffer) {
+        return;
+      }
+      pushQueue({
+        type: 'video',
+        sourceUpdater: this,
+        action: actions.callback(callback),
+        name: 'callback'
+      });
+    }
+    /**
+     * dispose of the source updater and the underlying sourceBuffer
+     */
+
+    dispose() {
+      this.trigger('dispose');
+      bufferTypes.forEach(type => {
+        this.abort(type);
+        if (this.canRemoveSourceBuffer()) {
+          this.removeSourceBuffer(type);
+        } else {
+          this[`${type}QueueCallback`](() => cleanupBuffer(type, this));
+        }
+      });
+      this.videoAppendQueued_ = false;
+      this.delayedAudioAppendQueue_.length = 0;
+      if (this.sourceopenListener_) {
+        this.mediaSource.removeEventListener('sourceopen', this.sourceopenListener_);
+      }
+      this.off();
+    }
+  }
+  const uint8ToUtf8 = uintArray => decodeURIComponent(escape(String.fromCharCode.apply(null, uintArray)));
+  const bufferToHexString = buffer => {
+    const uInt8Buffer = new Uint8Array(buffer);
+    return Array.from(uInt8Buffer).map(byte => byte.toString(16).padStart(2, '0')).join('');
+  };
+
+  /**
+   * @file vtt-segment-loader.js
+   */
+  const VTT_LINE_TERMINATORS = new Uint8Array('\n\n'.split('').map(char => char.charCodeAt(0)));
+  class NoVttJsError extends Error {
+    constructor() {
+      super('Trying to parse received VTT cues, but there is no WebVTT. Make sure vtt.js is loaded.');
+    }
+  }
+  /**
+   * An object that manages segment loading and appending.
+   *
+   * @class VTTSegmentLoader
+   * @param {Object} options required and optional options
+   * @extends videojs.EventTarget
+   */
+
+  class VTTSegmentLoader extends SegmentLoader {
+    constructor(settings, options = {}) {
+      super(settings, options); // SegmentLoader requires a MediaSource be specified or it will throw an error;
+      // however, VTTSegmentLoader has no need of a media source, so delete the reference
+
+      this.mediaSource_ = null;
+      this.subtitlesTrack_ = null;
+      this.featuresNativeTextTracks_ = settings.featuresNativeTextTracks;
+      this.loadVttJs = settings.loadVttJs; // The VTT segment will have its own time mappings. Saving VTT segment timing info in
+      // the sync controller leads to improper behavior.
+
+      this.shouldSaveSegmentTimingInfo_ = false;
+    }
+    createTransmuxer_() {
+      // don't need to transmux any subtitles
+      return null;
+    }
+    /**
+     * Indicates which time ranges are buffered
+     *
+     * @return {TimeRange}
+     *         TimeRange object representing the current buffered ranges
+     */
+
+    buffered_() {
+      if (!this.subtitlesTrack_ || !this.subtitlesTrack_.cues || !this.subtitlesTrack_.cues.length) {
+        return createTimeRanges();
+      }
+      const cues = this.subtitlesTrack_.cues;
+      const start = cues[0].startTime;
+      const end = cues[cues.length - 1].startTime;
+      return createTimeRanges([[start, end]]);
+    }
+    /**
+     * Gets and sets init segment for the provided map
+     *
+     * @param {Object} map
+     *        The map object representing the init segment to get or set
+     * @param {boolean=} set
+     *        If true, the init segment for the provided map should be saved
+     * @return {Object}
+     *         map object for desired init segment
+     */
+
+    initSegmentForMap(map, set = false) {
+      if (!map) {
+        return null;
+      }
+      const id = initSegmentId(map);
+      let storedMap = this.initSegments_[id];
+      if (set && !storedMap && map.bytes) {
+        // append WebVTT line terminators to the media initialization segment if it exists
+        // to follow the WebVTT spec (https://w3c.github.io/webvtt/#file-structure) that
+        // requires two or more WebVTT line terminators between the WebVTT header and the
+        // rest of the file
+        const combinedByteLength = VTT_LINE_TERMINATORS.byteLength + map.bytes.byteLength;
+        const combinedSegment = new Uint8Array(combinedByteLength);
+        combinedSegment.set(map.bytes);
+        combinedSegment.set(VTT_LINE_TERMINATORS, map.bytes.byteLength);
+        this.initSegments_[id] = storedMap = {
+          resolvedUri: map.resolvedUri,
+          byterange: map.byterange,
+          bytes: combinedSegment
+        };
+      }
+      return storedMap || map;
+    }
+    /**
+     * Returns true if all configuration required for loading is present, otherwise false.
+     *
+     * @return {boolean} True if the all configuration is ready for loading
+     * @private
+     */
+
+    couldBeginLoading_() {
+      return this.playlist_ && this.subtitlesTrack_ && !this.paused();
+    }
+    /**
+     * Once all the starting parameters have been specified, begin
+     * operation. This method should only be invoked from the INIT
+     * state.
+     *
+     * @private
+     */
+
+    init_() {
+      this.state = 'READY';
+      this.resetEverything();
+      return this.monitorBuffer_();
+    }
+    /**
+     * Set a subtitle track on the segment loader to add subtitles to
+     *
+     * @param {TextTrack=} track
+     *        The text track to add loaded subtitles to
+     * @return {TextTrack}
+     *        Returns the subtitles track
+     */
+
+    track(track) {
+      if (typeof track === 'undefined') {
+        return this.subtitlesTrack_;
+      }
+      this.subtitlesTrack_ = track; // if we were unpaused but waiting for a sourceUpdater, start
+      // buffering now
+
+      if (this.state === 'INIT' && this.couldBeginLoading_()) {
+        this.init_();
+      }
+      return this.subtitlesTrack_;
+    }
+    /**
+     * Remove any data in the source buffer between start and end times
+     *
+     * @param {number} start - the start time of the region to remove from the buffer
+     * @param {number} end - the end time of the region to remove from the buffer
+     */
+
+    remove(start, end) {
+      removeCuesFromTrack(start, end, this.subtitlesTrack_);
+    }
+    /**
+     * fill the buffer with segements unless the sourceBuffers are
+     * currently updating
+     *
+     * Note: this function should only ever be called by monitorBuffer_
+     * and never directly
+     *
+     * @private
+     */
+
+    fillBuffer_() {
+      // see if we need to begin loading immediately
+      const segmentInfo = this.chooseNextRequest_();
+      if (!segmentInfo) {
+        return;
+      }
+      if (this.syncController_.timestampOffsetForTimeline(segmentInfo.timeline) === null) {
+        // We don't have the timestamp offset that we need to sync subtitles.
+        // Rerun on a timestamp offset or user interaction.
+        const checkTimestampOffset = () => {
+          this.state = 'READY';
+          if (!this.paused()) {
+            // if not paused, queue a buffer check as soon as possible
+            this.monitorBuffer_();
+          }
+        };
+        this.syncController_.one('timestampoffset', checkTimestampOffset);
+        this.state = 'WAITING_ON_TIMELINE';
+        return;
+      }
+      this.loadSegment_(segmentInfo);
+    } // never set a timestamp offset for vtt segments.
+
+    timestampOffsetForSegment_() {
+      return null;
+    }
+    chooseNextRequest_() {
+      return this.skipEmptySegments_(super.chooseNextRequest_());
+    }
+    /**
+     * Prevents the segment loader from requesting segments we know contain no subtitles
+     * by walking forward until we find the next segment that we don't know whether it is
+     * empty or not.
+     *
+     * @param {Object} segmentInfo
+     *        a segment info object that describes the current segment
+     * @return {Object}
+     *         a segment info object that describes the current segment
+     */
+
+    skipEmptySegments_(segmentInfo) {
+      while (segmentInfo && segmentInfo.segment.empty) {
+        // stop at the last possible segmentInfo
+        if (segmentInfo.mediaIndex + 1 >= segmentInfo.playlist.segments.length) {
+          segmentInfo = null;
+          break;
+        }
+        segmentInfo = this.generateSegmentInfo_({
+          playlist: segmentInfo.playlist,
+          mediaIndex: segmentInfo.mediaIndex + 1,
+          startOfSegment: segmentInfo.startOfSegment + segmentInfo.duration,
+          isSyncRequest: segmentInfo.isSyncRequest
+        });
+      }
+      return segmentInfo;
+    }
+    stopForError(error) {
+      this.error(error);
+      this.state = 'READY';
+      this.pause();
+      this.trigger('error');
+    }
+    /**
+     * append a decrypted segement to the SourceBuffer through a SourceUpdater
+     *
+     * @private
+     */
+
+    segmentRequestFinished_(error, simpleSegment, result) {
+      if (!this.subtitlesTrack_) {
+        this.state = 'READY';
+        return;
+      }
+      this.saveTransferStats_(simpleSegment.stats); // the request was aborted
+
+      if (!this.pendingSegment_) {
+        this.state = 'READY';
+        this.mediaRequestsAborted += 1;
+        return;
+      }
+      if (error) {
+        if (error.code === REQUEST_ERRORS.TIMEOUT) {
+          this.handleTimeout_();
+        }
+        if (error.code === REQUEST_ERRORS.ABORTED) {
+          this.mediaRequestsAborted += 1;
+        } else {
+          this.mediaRequestsErrored += 1;
+        }
+        this.stopForError(error);
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // although the VTT segment loader bandwidth isn't really used, it's good to
+      // maintain functionality between segment loaders
+
+      this.saveBandwidthRelatedStats_(segmentInfo.duration, simpleSegment.stats); // if this request included a segment key, save that data in the cache
+
+      if (simpleSegment.key) {
+        this.segmentKey(simpleSegment.key, true);
+      }
+      this.state = 'APPENDING'; // used for tests
+
+      this.trigger('appending');
+      const segment = segmentInfo.segment;
+      if (segment.map) {
+        segment.map.bytes = simpleSegment.map.bytes;
+      }
+      segmentInfo.bytes = simpleSegment.bytes; // Make sure that vttjs has loaded, otherwise, load it and wait till it finished loading
+
+      if (typeof window.WebVTT !== 'function' && typeof this.loadVttJs === 'function') {
+        this.state = 'WAITING_ON_VTTJS'; // should be fine to call multiple times
+        // script will be loaded once but multiple listeners will be added to the queue, which is expected.
+
+        this.loadVttJs().then(() => this.segmentRequestFinished_(error, simpleSegment, result), () => this.stopForError({
+          message: 'Error loading vtt.js',
+          metadata: {
+            errorType: videojs.Error.VttLoadError
+          }
+        }));
+        return;
+      }
+      segment.requested = true;
+      try {
+        this.parseVTTCues_(segmentInfo);
+      } catch (e) {
+        this.stopForError({
+          message: e.message,
+          metadata: {
+            errorType: videojs.Error.VttCueParsingError
+          }
+        });
+        return;
+      }
+      this.updateTimeMapping_(segmentInfo, this.syncController_.timelines[segmentInfo.timeline], this.playlist_);
+      if (segmentInfo.cues.length) {
+        segmentInfo.timingInfo = {
+          start: segmentInfo.cues[0].startTime,
+          end: segmentInfo.cues[segmentInfo.cues.length - 1].endTime
+        };
+      } else {
+        segmentInfo.timingInfo = {
+          start: segmentInfo.startOfSegment,
+          end: segmentInfo.startOfSegment + segmentInfo.duration
+        };
+      }
+      if (segmentInfo.isSyncRequest) {
+        this.trigger('syncinfoupdate');
+        this.pendingSegment_ = null;
+        this.state = 'READY';
+        return;
+      }
+      segmentInfo.byteLength = segmentInfo.bytes.byteLength;
+      this.mediaSecondsLoaded += segment.duration; // Create VTTCue instances for each cue in the new segment and add them to
+      // the subtitle track
+
+      segmentInfo.cues.forEach(cue => {
+        this.subtitlesTrack_.addCue(this.featuresNativeTextTracks_ ? new window.VTTCue(cue.startTime, cue.endTime, cue.text) : cue);
+      }); // Remove any duplicate cues from the subtitle track. The WebVTT spec allows
+      // cues to have identical time-intervals, but if the text is also identical
+      // we can safely assume it is a duplicate that can be removed (ex. when a cue
+      // "overlaps" VTT segments)
+
+      removeDuplicateCuesFromTrack(this.subtitlesTrack_);
+      this.handleAppendsDone_();
+    }
+    handleData_() {// noop as we shouldn't be getting video/audio data captions
+      // that we do not support here.
+    }
+    updateTimingInfoEnd_() {// noop
+    }
+    /**
+     * Uses the WebVTT parser to parse the segment response
+     *
+     * @throws NoVttJsError
+     *
+     * @param {Object} segmentInfo
+     *        a segment info object that describes the current segment
+     * @private
+     */
+
+    parseVTTCues_(segmentInfo) {
+      let decoder;
+      let decodeBytesToString = false;
+      if (typeof window.WebVTT !== 'function') {
+        // caller is responsible for exception handling.
+        throw new NoVttJsError();
+      }
+      if (typeof window.TextDecoder === 'function') {
+        decoder = new window.TextDecoder('utf8');
+      } else {
+        decoder = window.WebVTT.StringDecoder();
+        decodeBytesToString = true;
+      }
+      const parser = new window.WebVTT.Parser(window, window.vttjs, decoder);
+      segmentInfo.cues = [];
+      segmentInfo.timestampmap = {
+        MPEGTS: 0,
+        LOCAL: 0
+      };
+      parser.oncue = segmentInfo.cues.push.bind(segmentInfo.cues);
+      parser.ontimestampmap = map => {
+        segmentInfo.timestampmap = map;
+      };
+      parser.onparsingerror = error => {
+        videojs.log.warn('Error encountered when parsing cues: ' + error.message);
+      };
+      if (segmentInfo.segment.map) {
+        let mapData = segmentInfo.segment.map.bytes;
+        if (decodeBytesToString) {
+          mapData = uint8ToUtf8(mapData);
+        }
+        parser.parse(mapData);
+      }
+      let segmentData = segmentInfo.bytes;
+      if (decodeBytesToString) {
+        segmentData = uint8ToUtf8(segmentData);
+      }
+      parser.parse(segmentData);
+      parser.flush();
+    }
+    /**
+     * Updates the start and end times of any cues parsed by the WebVTT parser using
+     * the information parsed from the X-TIMESTAMP-MAP header and a TS to media time mapping
+     * from the SyncController
+     *
+     * @param {Object} segmentInfo
+     *        a segment info object that describes the current segment
+     * @param {Object} mappingObj
+     *        object containing a mapping from TS to media time
+     * @param {Object} playlist
+     *        the playlist object containing the segment
+     * @private
+     */
+
+    updateTimeMapping_(segmentInfo, mappingObj, playlist) {
+      const segment = segmentInfo.segment;
+      if (!mappingObj) {
+        // If the sync controller does not have a mapping of TS to Media Time for the
+        // timeline, then we don't have enough information to update the cue
+        // start/end times
+        return;
+      }
+      if (!segmentInfo.cues.length) {
+        // If there are no cues, we also do not have enough information to figure out
+        // segment timing. Mark that the segment contains no cues so we don't re-request
+        // an empty segment.
+        segment.empty = true;
+        return;
+      }
+      const {
+        MPEGTS,
+        LOCAL
+      } = segmentInfo.timestampmap;
+      /**
+       * From the spec:
+       * The MPEGTS media timestamp MUST use a 90KHz timescale,
+       * even when non-WebVTT Media Segments use a different timescale.
+       */
+
+      const mpegTsInSeconds = MPEGTS / clock_1;
+      const diff = mpegTsInSeconds - LOCAL + mappingObj.mapping;
+      segmentInfo.cues.forEach(cue => {
+        const duration = cue.endTime - cue.startTime;
+        const startTime = MPEGTS === 0 ? cue.startTime + diff : this.handleRollover_(cue.startTime + diff, mappingObj.time);
+        cue.startTime = Math.max(startTime, 0);
+        cue.endTime = Math.max(startTime + duration, 0);
+      });
+      if (!playlist.syncInfo) {
+        const firstStart = segmentInfo.cues[0].startTime;
+        const lastStart = segmentInfo.cues[segmentInfo.cues.length - 1].startTime;
+        playlist.syncInfo = {
+          mediaSequence: playlist.mediaSequence + segmentInfo.mediaIndex,
+          time: Math.min(firstStart, lastStart - segment.duration)
+        };
+      }
+    }
+    /**
+     * MPEG-TS PES timestamps are limited to 2^33.
+     * Once they reach 2^33, they roll over to 0.
+     * mux.js handles PES timestamp rollover for the following scenarios:
+     * [forward rollover(right)] ->
+     *    PES timestamps monotonically increase, and once they reach 2^33, they roll over to 0
+     * [backward rollover(left)] -->
+     *    we seek back to position before rollover.
+     *
+     * According to the HLS SPEC:
+     * When synchronizing WebVTT with PES timestamps, clients SHOULD account
+     * for cases where the 33-bit PES timestamps have wrapped and the WebVTT
+     * cue times have not.  When the PES timestamp wraps, the WebVTT Segment
+     * SHOULD have a X-TIMESTAMP-MAP header that maps the current WebVTT
+     * time to the new (low valued) PES timestamp.
+     *
+     * So we want to handle rollover here and align VTT Cue start/end time to the player's time.
+     */
+
+    handleRollover_(value, reference) {
+      if (reference === null) {
+        return value;
+      }
+      let valueIn90khz = value * clock_1;
+      const referenceIn90khz = reference * clock_1;
+      let offset;
+      if (referenceIn90khz < valueIn90khz) {
+        // - 2^33
+        offset = -8589934592;
+      } else {
+        // + 2^33
+        offset = 8589934592;
+      } // distance(value - reference) > 2^32
+
+      while (Math.abs(valueIn90khz - referenceIn90khz) > 4294967296) {
+        valueIn90khz += offset;
+      }
+      return valueIn90khz / clock_1;
+    }
+  }
+
+  /**
+   * @file ad-cue-tags.js
+   */
+  /**
+   * Searches for an ad cue that overlaps with the given mediaTime
+   *
+   * @param {Object} track
+   *        the track to find the cue for
+   *
+   * @param {number} mediaTime
+   *        the time to find the cue at
+   *
+   * @return {Object|null}
+   *         the found cue or null
+   */
+
+  const findAdCue = function (track, mediaTime) {
+    const cues = track.cues;
+    for (let i = 0; i < cues.length; i++) {
+      const cue = cues[i];
+      if (mediaTime >= cue.adStartTime && mediaTime <= cue.adEndTime) {
+        return cue;
+      }
+    }
+    return null;
+  };
+  const updateAdCues = function (media, track, offset = 0) {
+    if (!media.segments) {
+      return;
+    }
+    let mediaTime = offset;
+    let cue;
+    for (let i = 0; i < media.segments.length; i++) {
+      const segment = media.segments[i];
+      if (!cue) {
+        // Since the cues will span for at least the segment duration, adding a fudge
+        // factor of half segment duration will prevent duplicate cues from being
+        // created when timing info is not exact (e.g. cue start time initialized
+        // at 10.006677, but next call mediaTime is 10.003332 )
+        cue = findAdCue(track, mediaTime + segment.duration / 2);
+      }
+      if (cue) {
+        if ('cueIn' in segment) {
+          // Found a CUE-IN so end the cue
+          cue.endTime = mediaTime;
+          cue.adEndTime = mediaTime;
+          mediaTime += segment.duration;
+          cue = null;
+          continue;
+        }
+        if (mediaTime < cue.endTime) {
+          // Already processed this mediaTime for this cue
+          mediaTime += segment.duration;
+          continue;
+        } // otherwise extend cue until a CUE-IN is found
+
+        cue.endTime += segment.duration;
+      } else {
+        if ('cueOut' in segment) {
+          cue = new window.VTTCue(mediaTime, mediaTime + segment.duration, segment.cueOut);
+          cue.adStartTime = mediaTime; // Assumes tag format to be
+          // #EXT-X-CUE-OUT:30
+
+          cue.adEndTime = mediaTime + parseFloat(segment.cueOut);
+          track.addCue(cue);
+        }
+        if ('cueOutCont' in segment) {
+          // Entered into the middle of an ad cue
+          // Assumes tag formate to be
+          // #EXT-X-CUE-OUT-CONT:10/30
+          const [adOffset, adTotal] = segment.cueOutCont.split('/').map(parseFloat);
+          cue = new window.VTTCue(mediaTime, mediaTime + segment.duration, '');
+          cue.adStartTime = mediaTime - adOffset;
+          cue.adEndTime = cue.adStartTime + adTotal;
+          track.addCue(cue);
+        }
+      }
+      mediaTime += segment.duration;
+    }
+  };
+  class SyncInfo {
+    /**
+     * @param {number} start - media sequence start
+     * @param {number} end - media sequence end
+     * @param {number} segmentIndex - index for associated segment
+     * @param {number|null} [partIndex] - index for associated part
+     * @param {boolean} [appended] - appended indicator
+     *
+     */
+    constructor({
+      start,
+      end,
+      segmentIndex,
+      partIndex = null,
+      appended = false
+    }) {
+      this.start_ = start;
+      this.end_ = end;
+      this.segmentIndex_ = segmentIndex;
+      this.partIndex_ = partIndex;
+      this.appended_ = appended;
+    }
+    isInRange(targetTime) {
+      return targetTime >= this.start && targetTime < this.end;
+    }
+    markAppended() {
+      this.appended_ = true;
+    }
+    resetAppendedStatus() {
+      this.appended_ = false;
+    }
+    get isAppended() {
+      return this.appended_;
+    }
+    get start() {
+      return this.start_;
+    }
+    get end() {
+      return this.end_;
+    }
+    get segmentIndex() {
+      return this.segmentIndex_;
+    }
+    get partIndex() {
+      return this.partIndex_;
+    }
+  }
+  class SyncInfoData {
+    /**
+     *
+     * @param {SyncInfo} segmentSyncInfo - sync info for a given segment
+     * @param {Array<SyncInfo>} [partsSyncInfo] - sync infos for a list of parts for a given segment
+     */
+    constructor(segmentSyncInfo, partsSyncInfo = []) {
+      this.segmentSyncInfo_ = segmentSyncInfo;
+      this.partsSyncInfo_ = partsSyncInfo;
+    }
+    get segmentSyncInfo() {
+      return this.segmentSyncInfo_;
+    }
+    get partsSyncInfo() {
+      return this.partsSyncInfo_;
+    }
+    get hasPartsSyncInfo() {
+      return this.partsSyncInfo_.length > 0;
+    }
+    resetAppendStatus() {
+      this.segmentSyncInfo_.resetAppendedStatus();
+      this.partsSyncInfo_.forEach(partSyncInfo => partSyncInfo.resetAppendedStatus());
+    }
+  }
+  class MediaSequenceSync {
+    constructor() {
+      /**
+       * @type {Map<number, SyncInfoData>}
+       * @private
+       */
+      this.storage_ = new Map();
+      this.diagnostics_ = '';
+      this.isReliable_ = false;
+      this.start_ = -Infinity;
+      this.end_ = Infinity;
+    }
+    get start() {
+      return this.start_;
+    }
+    get end() {
+      return this.end_;
+    }
+    get diagnostics() {
+      return this.diagnostics_;
+    }
+    get isReliable() {
+      return this.isReliable_;
+    }
+    resetAppendedStatus() {
+      this.storage_.forEach(syncInfoData => syncInfoData.resetAppendStatus());
+    }
+    /**
+     * update sync storage
+     *
+     * @param {Object} playlist
+     * @param {number} currentTime
+     *
+     * @return {void}
+     */
+
+    update(playlist, currentTime) {
+      const {
+        mediaSequence,
+        segments
+      } = playlist;
+      this.isReliable_ = this.isReliablePlaylist_(mediaSequence, segments);
+      if (!this.isReliable_) {
+        return;
+      }
+      return this.updateStorage_(segments, mediaSequence, this.calculateBaseTime_(mediaSequence, currentTime));
+    }
+    /**
+     * @param {number} targetTime
+     * @return {SyncInfo|null}
+     */
+
+    getSyncInfoForTime(targetTime) {
+      for (const {
+        segmentSyncInfo,
+        partsSyncInfo
+      } of this.storage_.values()) {
+        // Normal segment flow:
+        if (!partsSyncInfo.length) {
+          if (segmentSyncInfo.isInRange(targetTime)) {
+            return segmentSyncInfo;
+          }
+        } else {
+          // Low latency flow:
+          for (const partSyncInfo of partsSyncInfo) {
+            if (partSyncInfo.isInRange(targetTime)) {
+              return partSyncInfo;
+            }
+          }
+        }
+      }
+      return null;
+    }
+    updateStorage_(segments, startingMediaSequence, startingTime) {
+      const newStorage = new Map();
+      let newDiagnostics = '\n';
+      let currentStart = startingTime;
+      let currentMediaSequence = startingMediaSequence;
+      this.start_ = currentStart;
+      segments.forEach((segment, segmentIndex) => {
+        const prevSyncInfoData = this.storage_.get(currentMediaSequence);
+        const segmentStart = currentStart;
+        const segmentEnd = segmentStart + segment.duration;
+        const segmentIsAppended = Boolean(prevSyncInfoData && prevSyncInfoData.segmentSyncInfo && prevSyncInfoData.segmentSyncInfo.isAppended);
+        const segmentSyncInfo = new SyncInfo({
+          start: segmentStart,
+          end: segmentEnd,
+          appended: segmentIsAppended,
+          segmentIndex
+        });
+        segment.syncInfo = segmentSyncInfo;
+        let currentPartStart = currentStart;
+        const partsSyncInfo = (segment.parts || []).map((part, partIndex) => {
+          const partStart = currentPartStart;
+          const partEnd = currentPartStart + part.duration;
+          const partIsAppended = Boolean(prevSyncInfoData && prevSyncInfoData.partsSyncInfo && prevSyncInfoData.partsSyncInfo[partIndex] && prevSyncInfoData.partsSyncInfo[partIndex].isAppended);
+          const partSyncInfo = new SyncInfo({
+            start: partStart,
+            end: partEnd,
+            appended: partIsAppended,
+            segmentIndex,
+            partIndex
+          });
+          currentPartStart = partEnd;
+          newDiagnostics += `Media Sequence: ${currentMediaSequence}.${partIndex} | Range: ${partStart} --> ${partEnd} | Appended: ${partIsAppended}\n`;
+          part.syncInfo = partSyncInfo;
+          return partSyncInfo;
+        });
+        newStorage.set(currentMediaSequence, new SyncInfoData(segmentSyncInfo, partsSyncInfo));
+        newDiagnostics += `${compactSegmentUrlDescription(segment.resolvedUri)} | Media Sequence: ${currentMediaSequence} | Range: ${segmentStart} --> ${segmentEnd} | Appended: ${segmentIsAppended}\n`;
+        currentMediaSequence++;
+        currentStart = segmentEnd;
+      });
+      this.end_ = currentStart;
+      this.storage_ = newStorage;
+      this.diagnostics_ = newDiagnostics;
+    }
+    calculateBaseTime_(mediaSequence, fallback) {
+      if (!this.storage_.size) {
+        // Initial setup flow.
+        return 0;
+      }
+      if (this.storage_.has(mediaSequence)) {
+        // Normal flow.
+        return this.storage_.get(mediaSequence).segmentSyncInfo.start;
+      } // Fallback flow.
+      // There is a gap between last recorded playlist and a new one received.
+
+      return fallback;
+    }
+    isReliablePlaylist_(mediaSequence, segments) {
+      return mediaSequence !== undefined && mediaSequence !== null && Array.isArray(segments) && segments.length;
+    }
+  }
+
+  /**
+   * @file sync-controller.js
+   */
+  // synchronize expired playlist segments.
+  // the max media sequence diff is 48 hours of live stream
+  // content with two second segments. Anything larger than that
+  // will likely be invalid.
+
+  const MAX_MEDIA_SEQUENCE_DIFF_FOR_SYNC = 86400;
+  const syncPointStrategies = [
+  // Stategy "VOD": Handle the VOD-case where the sync-point is *always*
+  //                the equivalence display-time 0 === segment-index 0
+  {
+    name: 'VOD',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      if (duration !== Infinity) {
+        const syncPoint = {
+          time: 0,
+          segmentIndex: 0,
+          partIndex: null
+        };
+        return syncPoint;
+      }
+      return null;
+    }
+  }, {
+    name: 'MediaSequence',
+    /**
+     * run media sequence strategy
+     *
+     * @param {SyncController} syncController
+     * @param {Object} playlist
+     * @param {number} duration
+     * @param {number} currentTimeline
+     * @param {number} currentTime
+     * @param {string} type
+     */
+    run: (syncController, playlist, duration, currentTimeline, currentTime, type) => {
+      const mediaSequenceSync = syncController.getMediaSequenceSync(type);
+      if (!mediaSequenceSync) {
+        return null;
+      }
+      if (!mediaSequenceSync.isReliable) {
+        return null;
+      }
+      const syncInfo = mediaSequenceSync.getSyncInfoForTime(currentTime);
+      if (!syncInfo) {
+        return null;
+      }
+      return {
+        time: syncInfo.start,
+        partIndex: syncInfo.partIndex,
+        segmentIndex: syncInfo.segmentIndex
+      };
+    }
+  },
+  // Stategy "ProgramDateTime": We have a program-date-time tag in this playlist
+  {
+    name: 'ProgramDateTime',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      if (!Object.keys(syncController.timelineToDatetimeMappings).length) {
+        return null;
+      }
+      let syncPoint = null;
+      let lastDistance = null;
+      const partsAndSegments = getPartsAndSegments(playlist);
+      currentTime = currentTime || 0;
+      for (let i = 0; i < partsAndSegments.length; i++) {
+        // start from the end and loop backwards for live
+        // or start from the front and loop forwards for non-live
+        const index = playlist.endList || currentTime === 0 ? i : partsAndSegments.length - (i + 1);
+        const partAndSegment = partsAndSegments[index];
+        const segment = partAndSegment.segment;
+        const datetimeMapping = syncController.timelineToDatetimeMappings[segment.timeline];
+        if (!datetimeMapping || !segment.dateTimeObject) {
+          continue;
+        }
+        const segmentTime = segment.dateTimeObject.getTime() / 1000;
+        let start = segmentTime + datetimeMapping; // take part duration into account.
+
+        if (segment.parts && typeof partAndSegment.partIndex === 'number') {
+          for (let z = 0; z < partAndSegment.partIndex; z++) {
+            start += segment.parts[z].duration;
+          }
+        }
+        const distance = Math.abs(currentTime - start); // Once the distance begins to increase, or if distance is 0, we have passed
+        // currentTime and can stop looking for better candidates
+
+        if (lastDistance !== null && (distance === 0 || lastDistance < distance)) {
+          break;
+        }
+        lastDistance = distance;
+        syncPoint = {
+          time: start,
+          segmentIndex: partAndSegment.segmentIndex,
+          partIndex: partAndSegment.partIndex
+        };
+      }
+      return syncPoint;
+    }
+  },
+  // Stategy "Segment": We have a known time mapping for a timeline and a
+  //                    segment in the current timeline with timing data
+  {
+    name: 'Segment',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      let syncPoint = null;
+      let lastDistance = null;
+      currentTime = currentTime || 0;
+      const partsAndSegments = getPartsAndSegments(playlist);
+      for (let i = 0; i < partsAndSegments.length; i++) {
+        // start from the end and loop backwards for live
+        // or start from the front and loop forwards for non-live
+        const index = playlist.endList || currentTime === 0 ? i : partsAndSegments.length - (i + 1);
+        const partAndSegment = partsAndSegments[index];
+        const segment = partAndSegment.segment;
+        const start = partAndSegment.part && partAndSegment.part.start || segment && segment.start;
+        if (segment.timeline === currentTimeline && typeof start !== 'undefined') {
+          const distance = Math.abs(currentTime - start); // Once the distance begins to increase, we have passed
+          // currentTime and can stop looking for better candidates
+
+          if (lastDistance !== null && lastDistance < distance) {
+            break;
+          }
+          if (!syncPoint || lastDistance === null || lastDistance >= distance) {
+            lastDistance = distance;
+            syncPoint = {
+              time: start,
+              segmentIndex: partAndSegment.segmentIndex,
+              partIndex: partAndSegment.partIndex
+            };
+          }
+        }
+      }
+      return syncPoint;
+    }
+  },
+  // Stategy "Discontinuity": We have a discontinuity with a known
+  //                          display-time
+  {
+    name: 'Discontinuity',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      let syncPoint = null;
+      currentTime = currentTime || 0;
+      if (playlist.discontinuityStarts && playlist.discontinuityStarts.length) {
+        let lastDistance = null;
+        for (let i = 0; i < playlist.discontinuityStarts.length; i++) {
+          const segmentIndex = playlist.discontinuityStarts[i];
+          const discontinuity = playlist.discontinuitySequence + i + 1;
+          const discontinuitySync = syncController.discontinuities[discontinuity];
+          if (discontinuitySync) {
+            const distance = Math.abs(currentTime - discontinuitySync.time); // Once the distance begins to increase, we have passed
+            // currentTime and can stop looking for better candidates
+
+            if (lastDistance !== null && lastDistance < distance) {
+              break;
+            }
+            if (!syncPoint || lastDistance === null || lastDistance >= distance) {
+              lastDistance = distance;
+              syncPoint = {
+                time: discontinuitySync.time,
+                segmentIndex,
+                partIndex: null
+              };
+            }
+          }
+        }
+      }
+      return syncPoint;
+    }
+  },
+  // Stategy "Playlist": We have a playlist with a known mapping of
+  //                     segment index to display time
+  {
+    name: 'Playlist',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      if (playlist.syncInfo) {
+        const syncPoint = {
+          time: playlist.syncInfo.time,
+          segmentIndex: playlist.syncInfo.mediaSequence - playlist.mediaSequence,
+          partIndex: null
+        };
+        return syncPoint;
+      }
+      return null;
+    }
+  }];
+  class SyncController extends videojs.EventTarget {
+    constructor(options = {}) {
+      super(); // ...for synching across variants
+
+      this.timelines = [];
+      this.discontinuities = [];
+      this.timelineToDatetimeMappings = {}; // TODO: this map should be only available for HLS. Since only HLS has MediaSequence.
+      //  For some reason this map helps with syncing between quality switch for MPEG-DASH as well.
+      //  Moreover if we disable this map for MPEG-DASH - quality switch will be broken.
+      //  MPEG-DASH should have its own separate sync strategy
+
+      this.mediaSequenceStorage_ = {
+        main: new MediaSequenceSync(),
+        audio: new MediaSequenceSync(),
+        vtt: new MediaSequenceSync()
+      };
+      this.logger_ = logger('SyncController');
+    }
+    /**
+     *
+     * @param {string} loaderType
+     * @return {MediaSequenceSync|null}
+     */
+
+    getMediaSequenceSync(loaderType) {
+      return this.mediaSequenceStorage_[loaderType] || null;
+    }
+    /**
+     * Find a sync-point for the playlist specified
+     *
+     * A sync-point is defined as a known mapping from display-time to
+     * a segment-index in the current playlist.
+     *
+     * @param {Playlist} playlist
+     *        The playlist that needs a sync-point
+     * @param {number} duration
+     *        Duration of the MediaSource (Infinite if playing a live source)
+     * @param {number} currentTimeline
+     *        The last timeline from which a segment was loaded
+     * @param {number} currentTime
+     *        Current player's time
+     * @param {string} type
+     *        Segment loader type
+     * @return {Object}
+     *          A sync-point object
+     */
+
+    getSyncPoint(playlist, duration, currentTimeline, currentTime, type) {
+      // Always use VOD sync point for VOD
+      if (duration !== Infinity) {
+        const vodSyncPointStrategy = syncPointStrategies.find(({
+          name
+        }) => name === 'VOD');
+        return vodSyncPointStrategy.run(this, playlist, duration);
+      }
+      const syncPoints = this.runStrategies_(playlist, duration, currentTimeline, currentTime, type);
+      if (!syncPoints.length) {
+        // Signal that we need to attempt to get a sync-point manually
+        // by fetching a segment in the playlist and constructing
+        // a sync-point from that information
+        return null;
+      } // If we have exact match just return it instead of finding the nearest distance
+
+      for (const syncPointInfo of syncPoints) {
+        const {
+          syncPoint,
+          strategy
+        } = syncPointInfo;
+        const {
+          segmentIndex,
+          time
+        } = syncPoint;
+        if (segmentIndex < 0) {
+          continue;
+        }
+        const selectedSegment = playlist.segments[segmentIndex];
+        const start = time;
+        const end = start + selectedSegment.duration;
+        this.logger_(`Strategy: ${strategy}. Current time: ${currentTime}. selected segment: ${segmentIndex}. Time: [${start} -> ${end}]}`);
+        if (currentTime >= start && currentTime < end) {
+          this.logger_('Found sync point with exact match: ', syncPoint);
+          return syncPoint;
+        }
+      } // Now find the sync-point that is closest to the currentTime because
+      // that should result in the most accurate guess about which segment
+      // to fetch
+
+      return this.selectSyncPoint_(syncPoints, {
+        key: 'time',
+        value: currentTime
+      });
+    }
+    /**
+     * Calculate the amount of time that has expired off the playlist during playback
+     *
+     * @param {Playlist} playlist
+     *        Playlist object to calculate expired from
+     * @param {number} duration
+     *        Duration of the MediaSource (Infinity if playling a live source)
+     * @return {number|null}
+     *          The amount of time that has expired off the playlist during playback. Null
+     *          if no sync-points for the playlist can be found.
+     */
+
+    getExpiredTime(playlist, duration) {
+      if (!playlist || !playlist.segments) {
+        return null;
+      }
+      const syncPoints = this.runStrategies_(playlist, duration, playlist.discontinuitySequence, 0); // Without sync-points, there is not enough information to determine the expired time
+
+      if (!syncPoints.length) {
+        return null;
+      }
+      const syncPoint = this.selectSyncPoint_(syncPoints, {
+        key: 'segmentIndex',
+        value: 0
+      }); // If the sync-point is beyond the start of the playlist, we want to subtract the
+      // duration from index 0 to syncPoint.segmentIndex instead of adding.
+
+      if (syncPoint.segmentIndex > 0) {
+        syncPoint.time *= -1;
+      }
+      return Math.abs(syncPoint.time + sumDurations({
+        defaultDuration: playlist.targetDuration,
+        durationList: playlist.segments,
+        startIndex: syncPoint.segmentIndex,
+        endIndex: 0
+      }));
+    }
+    /**
+     * Runs each sync-point strategy and returns a list of sync-points returned by the
+     * strategies
+     *
+     * @private
+     * @param {Playlist} playlist
+     *        The playlist that needs a sync-point
+     * @param {number} duration
+     *        Duration of the MediaSource (Infinity if playing a live source)
+     * @param {number} currentTimeline
+     *        The last timeline from which a segment was loaded
+     * @param {number} currentTime
+     *        Current player's time
+     * @param {string} type
+     *        Segment loader type
+     * @return {Array}
+     *          A list of sync-point objects
+     */
+
+    runStrategies_(playlist, duration, currentTimeline, currentTime, type) {
+      const syncPoints = []; // Try to find a sync-point in by utilizing various strategies...
+
+      for (let i = 0; i < syncPointStrategies.length; i++) {
+        const strategy = syncPointStrategies[i];
+        const syncPoint = strategy.run(this, playlist, duration, currentTimeline, currentTime, type);
+        if (syncPoint) {
+          syncPoint.strategy = strategy.name;
+          syncPoints.push({
+            strategy: strategy.name,
+            syncPoint
+          });
+        }
+      }
+      return syncPoints;
+    }
+    /**
+     * Selects the sync-point nearest the specified target
+     *
+     * @private
+     * @param {Array} syncPoints
+     *        List of sync-points to select from
+     * @param {Object} target
+     *        Object specifying the property and value we are targeting
+     * @param {string} target.key
+     *        Specifies the property to target. Must be either 'time' or 'segmentIndex'
+     * @param {number} target.value
+     *        The value to target for the specified key.
+     * @return {Object}
+     *          The sync-point nearest the target
+     */
+
+    selectSyncPoint_(syncPoints, target) {
+      let bestSyncPoint = syncPoints[0].syncPoint;
+      let bestDistance = Math.abs(syncPoints[0].syncPoint[target.key] - target.value);
+      let bestStrategy = syncPoints[0].strategy;
+      for (let i = 1; i < syncPoints.length; i++) {
+        const newDistance = Math.abs(syncPoints[i].syncPoint[target.key] - target.value);
+        if (newDistance < bestDistance) {
+          bestDistance = newDistance;
+          bestSyncPoint = syncPoints[i].syncPoint;
+          bestStrategy = syncPoints[i].strategy;
+        }
+      }
+      this.logger_(`syncPoint for [${target.key}: ${target.value}] chosen with strategy` + ` [${bestStrategy}]: [time:${bestSyncPoint.time},` + ` segmentIndex:${bestSyncPoint.segmentIndex}` + (typeof bestSyncPoint.partIndex === 'number' ? `,partIndex:${bestSyncPoint.partIndex}` : '') + ']');
+      return bestSyncPoint;
+    }
+    /**
+     * Save any meta-data present on the segments when segments leave
+     * the live window to the playlist to allow for synchronization at the
+     * playlist level later.
+     *
+     * @param {Playlist} oldPlaylist - The previous active playlist
+     * @param {Playlist} newPlaylist - The updated and most current playlist
+     */
+
+    saveExpiredSegmentInfo(oldPlaylist, newPlaylist) {
+      const mediaSequenceDiff = newPlaylist.mediaSequence - oldPlaylist.mediaSequence; // Ignore large media sequence gaps
+
+      if (mediaSequenceDiff > MAX_MEDIA_SEQUENCE_DIFF_FOR_SYNC) {
+        videojs.log.warn(`Not saving expired segment info. Media sequence gap ${mediaSequenceDiff} is too large.`);
+        return;
+      } // When a segment expires from the playlist and it has a start time
+      // save that information as a possible sync-point reference in future
+
+      for (let i = mediaSequenceDiff - 1; i >= 0; i--) {
+        const lastRemovedSegment = oldPlaylist.segments[i];
+        if (lastRemovedSegment && typeof lastRemovedSegment.start !== 'undefined') {
+          newPlaylist.syncInfo = {
+            mediaSequence: oldPlaylist.mediaSequence + i,
+            time: lastRemovedSegment.start
+          };
+          this.logger_(`playlist refresh sync: [time:${newPlaylist.syncInfo.time},` + ` mediaSequence: ${newPlaylist.syncInfo.mediaSequence}]`);
+          this.trigger('syncinfoupdate');
+          break;
+        }
+      }
+    }
+    /**
+     * Save the mapping from playlist's ProgramDateTime to display. This should only happen
+     * before segments start to load.
+     *
+     * @param {Playlist} playlist - The currently active playlist
+     */
+
+    setDateTimeMappingForStart(playlist) {
+      // It's possible for the playlist to be updated before playback starts, meaning time
+      // zero is not yet set. If, during these playlist refreshes, a discontinuity is
+      // crossed, then the old time zero mapping (for the prior timeline) would be retained
+      // unless the mappings are cleared.
+      this.timelineToDatetimeMappings = {};
+      if (playlist.segments && playlist.segments.length && playlist.segments[0].dateTimeObject) {
+        const firstSegment = playlist.segments[0];
+        const playlistTimestamp = firstSegment.dateTimeObject.getTime() / 1000;
+        this.timelineToDatetimeMappings[firstSegment.timeline] = -playlistTimestamp;
+      }
+    }
+    /**
+     * Calculates and saves timeline mappings, playlist sync info, and segment timing values
+     * based on the latest timing information.
+     *
+     * @param {Object} options
+     *        Options object
+     * @param {SegmentInfo} options.segmentInfo
+     *        The current active request information
+     * @param {boolean} options.shouldSaveTimelineMapping
+     *        If there's a timeline change, determines if the timeline mapping should be
+     *        saved for timeline mapping and program date time mappings.
+     */
+
+    saveSegmentTimingInfo({
+      segmentInfo,
+      shouldSaveTimelineMapping
+    }) {
+      const didCalculateSegmentTimeMapping = this.calculateSegmentTimeMapping_(segmentInfo, segmentInfo.timingInfo, shouldSaveTimelineMapping);
+      const segment = segmentInfo.segment;
+      if (didCalculateSegmentTimeMapping) {
+        this.saveDiscontinuitySyncInfo_(segmentInfo); // If the playlist does not have sync information yet, record that information
+        // now with segment timing information
+
+        if (!segmentInfo.playlist.syncInfo) {
+          segmentInfo.playlist.syncInfo = {
+            mediaSequence: segmentInfo.playlist.mediaSequence + segmentInfo.mediaIndex,
+            time: segment.start
+          };
+        }
+      }
+      const dateTime = segment.dateTimeObject;
+      if (segment.discontinuity && shouldSaveTimelineMapping && dateTime) {
+        this.timelineToDatetimeMappings[segment.timeline] = -(dateTime.getTime() / 1000);
+      }
+    }
+    timestampOffsetForTimeline(timeline) {
+      if (typeof this.timelines[timeline] === 'undefined') {
+        return null;
+      }
+      return this.timelines[timeline].time;
+    }
+    mappingForTimeline(timeline) {
+      if (typeof this.timelines[timeline] === 'undefined') {
+        return null;
+      }
+      return this.timelines[timeline].mapping;
+    }
+    /**
+     * Use the "media time" for a segment to generate a mapping to "display time" and
+     * save that display time to the segment.
+     *
+     * @private
+     * @param {SegmentInfo} segmentInfo
+     *        The current active request information
+     * @param {Object} timingInfo
+     *        The start and end time of the current segment in "media time"
+     * @param {boolean} shouldSaveTimelineMapping
+     *        If there's a timeline change, determines if the timeline mapping should be
+     *        saved in timelines.
+     * @return {boolean}
+     *          Returns false if segment time mapping could not be calculated
+     */
+
+    calculateSegmentTimeMapping_(segmentInfo, timingInfo, shouldSaveTimelineMapping) {
+      // TODO: remove side effects
+      const segment = segmentInfo.segment;
+      const part = segmentInfo.part;
+      let mappingObj = this.timelines[segmentInfo.timeline];
+      let start;
+      let end;
+      if (typeof segmentInfo.timestampOffset === 'number') {
+        mappingObj = {
+          time: segmentInfo.startOfSegment,
+          mapping: segmentInfo.startOfSegment - timingInfo.start
+        };
+        if (shouldSaveTimelineMapping) {
+          this.timelines[segmentInfo.timeline] = mappingObj;
+          this.trigger('timestampoffset');
+          this.logger_(`time mapping for timeline ${segmentInfo.timeline}: ` + `[time: ${mappingObj.time}] [mapping: ${mappingObj.mapping}]`);
+        }
+        start = segmentInfo.startOfSegment;
+        end = timingInfo.end + mappingObj.mapping;
+      } else if (mappingObj) {
+        start = timingInfo.start + mappingObj.mapping;
+        end = timingInfo.end + mappingObj.mapping;
+      } else {
+        return false;
+      }
+      if (part) {
+        part.start = start;
+        part.end = end;
+      } // If we don't have a segment start yet or the start value we got
+      // is less than our current segment.start value, save a new start value.
+      // We have to do this because parts will have segment timing info saved
+      // multiple times and we want segment start to be the earliest part start
+      // value for that segment.
+
+      if (!segment.start || start < segment.start) {
+        segment.start = start;
+      }
+      segment.end = end;
+      return true;
+    }
+    /**
+     * Each time we have discontinuity in the playlist, attempt to calculate the location
+     * in display of the start of the discontinuity and save that. We also save an accuracy
+     * value so that we save values with the most accuracy (closest to 0.)
+     *
+     * @private
+     * @param {SegmentInfo} segmentInfo - The current active request information
+     */
+
+    saveDiscontinuitySyncInfo_(segmentInfo) {
+      const playlist = segmentInfo.playlist;
+      const segment = segmentInfo.segment; // If the current segment is a discontinuity then we know exactly where
+      // the start of the range and it's accuracy is 0 (greater accuracy values
+      // mean more approximation)
+
+      if (segment.discontinuity) {
+        this.discontinuities[segment.timeline] = {
+          time: segment.start,
+          accuracy: 0
+        };
+      } else if (playlist.discontinuityStarts && playlist.discontinuityStarts.length) {
+        // Search for future discontinuities that we can provide better timing
+        // information for and save that information for sync purposes
+        for (let i = 0; i < playlist.discontinuityStarts.length; i++) {
+          const segmentIndex = playlist.discontinuityStarts[i];
+          const discontinuity = playlist.discontinuitySequence + i + 1;
+          const mediaIndexDiff = segmentIndex - segmentInfo.mediaIndex;
+          const accuracy = Math.abs(mediaIndexDiff);
+          if (!this.discontinuities[discontinuity] || this.discontinuities[discontinuity].accuracy > accuracy) {
+            let time;
+            if (mediaIndexDiff < 0) {
+              time = segment.start - sumDurations({
+                defaultDuration: playlist.targetDuration,
+                durationList: playlist.segments,
+                startIndex: segmentInfo.mediaIndex,
+                endIndex: segmentIndex
+              });
+            } else {
+              time = segment.end + sumDurations({
+                defaultDuration: playlist.targetDuration,
+                durationList: playlist.segments,
+                startIndex: segmentInfo.mediaIndex + 1,
+                endIndex: segmentIndex
+              });
+            }
+            this.discontinuities[discontinuity] = {
+              time,
+              accuracy
+            };
+          }
+        }
+      }
+    }
+    dispose() {
+      this.trigger('dispose');
+      this.off();
+    }
+  }
+
+  /**
+   * The TimelineChangeController acts as a source for segment loaders to listen for and
+   * keep track of latest and pending timeline changes. This is useful to ensure proper
+   * sync, as each loader may need to make a consideration for what timeline the other
+   * loader is on before making changes which could impact the other loader's media.
+   *
+   * @class TimelineChangeController
+   * @extends videojs.EventTarget
+   */
+
+  class TimelineChangeController extends videojs.EventTarget {
+    constructor() {
+      super();
+      this.pendingTimelineChanges_ = {};
+      this.lastTimelineChanges_ = {};
+    }
+    clearPendingTimelineChange(type) {
+      this.pendingTimelineChanges_[type] = null;
+      this.trigger('pendingtimelinechange');
+    }
+    pendingTimelineChange({
+      type,
+      from,
+      to
+    }) {
+      if (typeof from === 'number' && typeof to === 'number') {
+        this.pendingTimelineChanges_[type] = {
+          type,
+          from,
+          to
+        };
+        this.trigger('pendingtimelinechange');
+      }
+      return this.pendingTimelineChanges_[type];
+    }
+    lastTimelineChange({
+      type,
+      from,
+      to
+    }) {
+      if (typeof from === 'number' && typeof to === 'number') {
+        this.lastTimelineChanges_[type] = {
+          type,
+          from,
+          to
+        };
+        delete this.pendingTimelineChanges_[type];
+        this.trigger('timelinechange');
+      }
+      return this.lastTimelineChanges_[type];
+    }
+    dispose() {
+      this.trigger('dispose');
+      this.pendingTimelineChanges_ = {};
+      this.lastTimelineChanges_ = {};
+      this.off();
+    }
+  }
+
+  /* rollup-plugin-worker-factory start for worker!/home/runner/work/http-streaming/http-streaming/src/decrypter-worker.js */
+  const workerCode = transform(getWorkerString(function () {
+    /**
+     * @file stream.js
+     */
+
+    /**
+     * A lightweight readable stream implemention that handles event dispatching.
+     *
+     * @class Stream
+     */
+
+    var Stream = /*#__PURE__*/function () {
+      function Stream() {
+        this.listeners = {};
+      }
+      /**
+       * Add a listener for a specified event type.
+       *
+       * @param {string} type the event name
+       * @param {Function} listener the callback to be invoked when an event of
+       * the specified type occurs
+       */
+
+      var _proto = Stream.prototype;
+      _proto.on = function on(type, listener) {
+        if (!this.listeners[type]) {
+          this.listeners[type] = [];
+        }
+        this.listeners[type].push(listener);
+      }
+      /**
+       * Remove a listener for a specified event type.
+       *
+       * @param {string} type the event name
+       * @param {Function} listener  a function previously registered for this
+       * type of event through `on`
+       * @return {boolean} if we could turn it off or not
+       */;
+
+      _proto.off = function off(type, listener) {
+        if (!this.listeners[type]) {
+          return false;
+        }
+        var index = this.listeners[type].indexOf(listener); // TODO: which is better?
+        // In Video.js we slice listener functions
+        // on trigger so that it does not mess up the order
+        // while we loop through.
+        //
+        // Here we slice on off so that the loop in trigger
+        // can continue using it's old reference to loop without
+        // messing up the order.
+
+        this.listeners[type] = this.listeners[type].slice(0);
+        this.listeners[type].splice(index, 1);
+        return index > -1;
+      }
+      /**
+       * Trigger an event of the specified type on this stream. Any additional
+       * arguments to this function are passed as parameters to event listeners.
+       *
+       * @param {string} type the event name
+       */;
+
+      _proto.trigger = function trigger(type) {
+        var callbacks = this.listeners[type];
+        if (!callbacks) {
+          return;
+        } // Slicing the arguments on every invocation of this method
+        // can add a significant amount of overhead. Avoid the
+        // intermediate object creation for the common case of a
+        // single callback argument
+
+        if (arguments.length === 2) {
+          var length = callbacks.length;
+          for (var i = 0; i < length; ++i) {
+            callbacks[i].call(this, arguments[1]);
+          }
+        } else {
+          var args = Array.prototype.slice.call(arguments, 1);
+          var _length = callbacks.length;
+          for (var _i = 0; _i < _length; ++_i) {
+            callbacks[_i].apply(this, args);
+          }
+        }
+      }
+      /**
+       * Destroys the stream and cleans up.
+       */;
+
+      _proto.dispose = function dispose() {
+        this.listeners = {};
+      }
+      /**
+       * Forwards all `data` events on this stream to the destination stream. The
+       * destination stream should provide a method `push` to receive the data
+       * events as they arrive.
+       *
+       * @param {Stream} destination the stream that will receive all `data` events
+       * @see http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options
+       */;
+
+      _proto.pipe = function pipe(destination) {
+        this.on('data', function (data) {
+          destination.push(data);
+        });
+      };
+      return Stream;
+    }();
+    /*! @name pkcs7 @version 1.0.4 @license Apache-2.0 */
+
+    /**
+     * Returns the subarray of a Uint8Array without PKCS#7 padding.
+     *
+     * @param padded {Uint8Array} unencrypted bytes that have been padded
+     * @return {Uint8Array} the unpadded bytes
+     * @see http://tools.ietf.org/html/rfc5652
+     */
+
+    function unpad(padded) {
+      return padded.subarray(0, padded.byteLength - padded[padded.byteLength - 1]);
+    }
+    /*! @name aes-decrypter @version 4.0.1 @license Apache-2.0 */
+
+    /**
+     * @file aes.js
+     *
+     * This file contains an adaptation of the AES decryption algorithm
+     * from the Standford Javascript Cryptography Library. That work is
+     * covered by the following copyright and permissions notice:
+     *
+     * Copyright 2009-2010 Emily Stark, Mike Hamburg, Dan Boneh.
+     * All rights reserved.
+     *
+     * Redistribution and use in source and binary forms, with or without
+     * modification, are permitted provided that the following conditions are
+     * met:
+     *
+     * 1. Redistributions of source code must retain the above copyright
+     *    notice, this list of conditions and the following disclaimer.
+     *
+     * 2. Redistributions in binary form must reproduce the above
+     *    copyright notice, this list of conditions and the following
+     *    disclaimer in the documentation and/or other materials provided
+     *    with the distribution.
+     *
+     * THIS SOFTWARE IS PROVIDED BY THE AUTHORS ``AS IS'' AND ANY EXPRESS OR
+     * IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+     * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+     * DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> OR CONTRIBUTORS BE
+     * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+     * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+     * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
+     * BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+     * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
+     * OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN
+     * IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+     *
+     * The views and conclusions contained in the software and documentation
+     * are those of the authors and should not be interpreted as representing
+     * official policies, either expressed or implied, of the authors.
+     */
+
+    /**
+     * Expand the S-box tables.
+     *
+     * @private
+     */
+
+    const precompute = function () {
+      const tables = [[[], [], [], [], []], [[], [], [], [], []]];
+      const encTable = tables[0];
+      const decTable = tables[1];
+      const sbox = encTable[4];
+      const sboxInv = decTable[4];
+      let i;
+      let x;
+      let xInv;
+      const d = [];
+      const th = [];
+      let x2;
+      let x4;
+      let x8;
+      let s;
+      let tEnc;
+      let tDec; // Compute double and third tables
+
+      for (i = 0; i < 256; i++) {
+        th[(d[i] = i << 1 ^ (i >> 7) * 283) ^ i] = i;
+      }
+      for (x = xInv = 0; !sbox[x]; x ^= x2 || 1, xInv = th[xInv] || 1) {
+        // Compute sbox
+        s = xInv ^ xInv << 1 ^ xInv << 2 ^ xInv << 3 ^ xInv << 4;
+        s = s >> 8 ^ s & 255 ^ 99;
+        sbox[x] = s;
+        sboxInv[s] = x; // Compute MixColumns
+
+        x8 = d[x4 = d[x2 = d[x]]];
+        tDec = x8 * 0x1010101 ^ x4 * 0x10001 ^ x2 * 0x101 ^ x * 0x1010100;
+        tEnc = d[s] * 0x101 ^ s * 0x1010100;
+        for (i = 0; i < 4; i++) {
+          encTable[i][x] = tEnc = tEnc << 24 ^ tEnc >>> 8;
+          decTable[i][s] = tDec = tDec << 24 ^ tDec >>> 8;
+        }
+      } // Compactify. Considerable speedup on Firefox.
+
+      for (i = 0; i < 5; i++) {
+        encTable[i] = encTable[i].slice(0);
+        decTable[i] = decTable[i].slice(0);
+      }
+      return tables;
+    };
+    let aesTables = null;
+    /**
+     * Schedule out an AES key for both encryption and decryption. This
+     * is a low-level class. Use a cipher mode to do bulk encryption.
+     *
+     * @class AES
+     * @param key {Array} The key as an array of 4, 6 or 8 words.
+     */
+
+    class AES {
+      constructor(key) {
+        /**
+        * The expanded S-box and inverse S-box tables. These will be computed
+        * on the client so that we don't have to send them down the wire.
+        *
+        * There are two tables, _tables[0] is for encryption and
+        * _tables[1] is for decryption.
+        *
+        * The first 4 sub-tables are the expanded S-box with MixColumns. The
+        * last (_tables[01][4]) is the S-box itself.
+        *
+        * @private
+        */
+        // if we have yet to precompute the S-box tables
+        // do so now
+        if (!aesTables) {
+          aesTables = precompute();
+        } // then make a copy of that object for use
+
+        this._tables = [[aesTables[0][0].slice(), aesTables[0][1].slice(), aesTables[0][2].slice(), aesTables[0][3].slice(), aesTables[0][4].slice()], [aesTables[1][0].slice(), aesTables[1][1].slice(), aesTables[1][2].slice(), aesTables[1][3].slice(), aesTables[1][4].slice()]];
+        let i;
+        let j;
+        let tmp;
+        const sbox = this._tables[0][4];
+        const decTable = this._tables[1];
+        const keyLen = key.length;
+        let rcon = 1;
+        if (keyLen !== 4 && keyLen !== 6 && keyLen !== 8) {
+          throw new Error('Invalid aes key size');
+        }
+        const encKey = key.slice(0);
+        const decKey = [];
+        this._key = [encKey, decKey]; // schedule encryption keys
+
+        for (i = keyLen; i < 4 * keyLen + 28; i++) {
+          tmp = encKey[i - 1]; // apply sbox
+
+          if (i % keyLen === 0 || keyLen === 8 && i % keyLen === 4) {
+            tmp = sbox[tmp >>> 24] << 24 ^ sbox[tmp >> 16 & 255] << 16 ^ sbox[tmp >> 8 & 255] << 8 ^ sbox[tmp & 255]; // shift rows and add rcon
+
+            if (i % keyLen === 0) {
+              tmp = tmp << 8 ^ tmp >>> 24 ^ rcon << 24;
+              rcon = rcon << 1 ^ (rcon >> 7) * 283;
+            }
+          }
+          encKey[i] = encKey[i - keyLen] ^ tmp;
+        } // schedule decryption keys
+
+        for (j = 0; i; j++, i--) {
+          tmp = encKey[j & 3 ? i : i - 4];
+          if (i <= 4 || j < 4) {
+            decKey[j] = tmp;
+          } else {
+            decKey[j] = decTable[0][sbox[tmp >>> 24]] ^ decTable[1][sbox[tmp >> 16 & 255]] ^ decTable[2][sbox[tmp >> 8 & 255]] ^ decTable[3][sbox[tmp & 255]];
+          }
+        }
+      }
+      /**
+       * Decrypt 16 bytes, specified as four 32-bit words.
+       *
+       * @param {number} encrypted0 the first word to decrypt
+       * @param {number} encrypted1 the second word to decrypt
+       * @param {number} encrypted2 the third word to decrypt
+       * @param {number} encrypted3 the fourth word to decrypt
+       * @param {Int32Array} out the array to write the decrypted words
+       * into
+       * @param {number} offset the offset into the output array to start
+       * writing results
+       * @return {Array} The plaintext.
+       */
+
+      decrypt(encrypted0, encrypted1, encrypted2, encrypted3, out, offset) {
+        const key = this._key[1]; // state variables a,b,c,d are loaded with pre-whitened data
+
+        let a = encrypted0 ^ key[0];
+        let b = encrypted3 ^ key[1];
+        let c = encrypted2 ^ key[2];
+        let d = encrypted1 ^ key[3];
+        let a2;
+        let b2;
+        let c2; // key.length === 2 ?
+
+        const nInnerRounds = key.length / 4 - 2;
+        let i;
+        let kIndex = 4;
+        const table = this._tables[1]; // load up the tables
+
+        const table0 = table[0];
+        const table1 = table[1];
+        const table2 = table[2];
+        const table3 = table[3];
+        const sbox = table[4]; // Inner rounds. Cribbed from OpenSSL.
+
+        for (i = 0; i < nInnerRounds; i++) {
+          a2 = table0[a >>> 24] ^ table1[b >> 16 & 255] ^ table2[c >> 8 & 255] ^ table3[d & 255] ^ key[kIndex];
+          b2 = table0[b >>> 24] ^ table1[c >> 16 & 255] ^ table2[d >> 8 & 255] ^ table3[a & 255] ^ key[kIndex + 1];
+          c2 = table0[c >>> 24] ^ table1[d >> 16 & 255] ^ table2[a >> 8 & 255] ^ table3[b & 255] ^ key[kIndex + 2];
+          d = table0[d >>> 24] ^ table1[a >> 16 & 255] ^ table2[b >> 8 & 255] ^ table3[c & 255] ^ key[kIndex + 3];
+          kIndex += 4;
+          a = a2;
+          b = b2;
+          c = c2;
+        } // Last round.
+
+        for (i = 0; i < 4; i++) {
+          out[(3 & -i) + offset] = sbox[a >>> 24] << 24 ^ sbox[b >> 16 & 255] << 16 ^ sbox[c >> 8 & 255] << 8 ^ sbox[d & 255] ^ key[kIndex++];
+          a2 = a;
+          a = b;
+          b = c;
+          c = d;
+          d = a2;
+        }
+      }
+    }
+    /**
+     * @file async-stream.js
+     */
+
+    /**
+     * A wrapper around the Stream class to use setTimeout
+     * and run stream "jobs" Asynchronously
+     *
+     * @class AsyncStream
+     * @extends Stream
+     */
+
+    class AsyncStream extends Stream {
+      constructor() {
+        super(Stream);
+        this.jobs = [];
+        this.delay = 1;
+        this.timeout_ = null;
+      }
+      /**
+       * process an async job
+       *
+       * @private
+       */
+
+      processJob_() {
+        this.jobs.shift()();
+        if (this.jobs.length) {
+          this.timeout_ = setTimeout(this.processJob_.bind(this), this.delay);
+        } else {
+          this.timeout_ = null;
+        }
+      }
+      /**
+       * push a job into the stream
+       *
+       * @param {Function} job the job to push into the stream
+       */
+
+      push(job) {
+        this.jobs.push(job);
+        if (!this.timeout_) {
+          this.timeout_ = setTimeout(this.processJob_.bind(this), this.delay);
+        }
+      }
+    }
+    /**
+     * @file decrypter.js
+     *
+     * An asynchronous implementation of AES-128 CBC decryption with
+     * PKCS#7 padding.
+     */
+
+    /**
+     * Convert network-order (big-endian) bytes into their little-endian
+     * representation.
+     */
+
+    const ntoh = function (word) {
+      return word << 24 | (word & 0xff00) << 8 | (word & 0xff0000) >> 8 | word >>> 24;
+    };
+    /**
+     * Decrypt bytes using AES-128 with CBC and PKCS#7 padding.
+     *
+     * @param {Uint8Array} encrypted the encrypted bytes
+     * @param {Uint32Array} key the bytes of the decryption key
+     * @param {Uint32Array} initVector the initialization vector (IV) to
+     * use for the first round of CBC.
+     * @return {Uint8Array} the decrypted bytes
+     *
+     * @see http://en.wikipedia.org/wiki/Advanced_Encryption_Standard
+     * @see http://en.wikipedia.org/wiki/Block_cipher_mode_of_operation#Cipher_Block_Chaining_.28CBC.29
+     * @see https://tools.ietf.org/html/rfc2315
+     */
+
+    const decrypt = function (encrypted, key, initVector) {
+      // word-level access to the encrypted bytes
+      const encrypted32 = new Int32Array(encrypted.buffer, encrypted.byteOffset, encrypted.byteLength >> 2);
+      const decipher = new AES(Array.prototype.slice.call(key)); // byte and word-level access for the decrypted output
+
+      const decrypted = new Uint8Array(encrypted.byteLength);
+      const decrypted32 = new Int32Array(decrypted.buffer); // temporary variables for working with the IV, encrypted, and
+      // decrypted data
+
+      let init0;
+      let init1;
+      let init2;
+      let init3;
+      let encrypted0;
+      let encrypted1;
+      let encrypted2;
+      let encrypted3; // iteration variable
+
+      let wordIx; // pull out the words of the IV to ensure we don't modify the
+      // passed-in reference and easier access
+
+      init0 = initVector[0];
+      init1 = initVector[1];
+      init2 = initVector[2];
+      init3 = initVector[3]; // decrypt four word sequences, applying cipher-block chaining (CBC)
+      // to each decrypted block
+
+      for (wordIx = 0; wordIx < encrypted32.length; wordIx += 4) {
+        // convert big-endian (network order) words into little-endian
+        // (javascript order)
+        encrypted0 = ntoh(encrypted32[wordIx]);
+        encrypted1 = ntoh(encrypted32[wordIx + 1]);
+        encrypted2 = ntoh(encrypted32[wordIx + 2]);
+        encrypted3 = ntoh(encrypted32[wordIx + 3]); // decrypt the block
+
+        decipher.decrypt(encrypted0, encrypted1, encrypted2, encrypted3, decrypted32, wordIx); // XOR with the IV, and restore network byte-order to obtain the
+        // plaintext
+
+        decrypted32[wordIx] = ntoh(decrypted32[wordIx] ^ init0);
+        decrypted32[wordIx + 1] = ntoh(decrypted32[wordIx + 1] ^ init1);
+        decrypted32[wordIx + 2] = ntoh(decrypted32[wordIx + 2] ^ init2);
+        decrypted32[wordIx + 3] = ntoh(decrypted32[wordIx + 3] ^ init3); // setup the IV for the next round
+
+        init0 = encrypted0;
+        init1 = encrypted1;
+        init2 = encrypted2;
+        init3 = encrypted3;
+      }
+      return decrypted;
+    };
+    /**
+     * The `Decrypter` class that manages decryption of AES
+     * data through `AsyncStream` objects and the `decrypt`
+     * function
+     *
+     * @param {Uint8Array} encrypted the encrypted bytes
+     * @param {Uint32Array} key the bytes of the decryption key
+     * @param {Uint32Array} initVector the initialization vector (IV) to
+     * @param {Function} done the function to run when done
+     * @class Decrypter
+     */
+
+    class Decrypter {
+      constructor(encrypted, key, initVector, done) {
+        const step = Decrypter.STEP;
+        const encrypted32 = new Int32Array(encrypted.buffer);
+        const decrypted = new Uint8Array(encrypted.byteLength);
+        let i = 0;
+        this.asyncStream_ = new AsyncStream(); // split up the encryption job and do the individual chunks asynchronously
+
+        this.asyncStream_.push(this.decryptChunk_(encrypted32.subarray(i, i + step), key, initVector, decrypted));
+        for (i = step; i < encrypted32.length; i += step) {
+          initVector = new Uint32Array([ntoh(encrypted32[i - 4]), ntoh(encrypted32[i - 3]), ntoh(encrypted32[i - 2]), ntoh(encrypted32[i - 1])]);
+          this.asyncStream_.push(this.decryptChunk_(encrypted32.subarray(i, i + step), key, initVector, decrypted));
+        } // invoke the done() callback when everything is finished
+
+        this.asyncStream_.push(function () {
+          // remove pkcs#7 padding from the decrypted bytes
+          done(null, unpad(decrypted));
+        });
+      }
+      /**
+       * a getter for step the maximum number of bytes to process at one time
+       *
+       * @return {number} the value of step 32000
+       */
+
+      static get STEP() {
+        // 4 * 8000;
+        return 32000;
+      }
+      /**
+       * @private
+       */
+
+      decryptChunk_(encrypted, key, initVector, decrypted) {
+        return function () {
+          const bytes = decrypt(encrypted, key, initVector);
+          decrypted.set(bytes, encrypted.byteOffset);
+        };
+      }
+    }
+    var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+    var win;
+    if (typeof window !== "undefined") {
+      win = window;
+    } else if (typeof commonjsGlobal !== "undefined") {
+      win = commonjsGlobal;
+    } else if (typeof self !== "undefined") {
+      win = self;
+    } else {
+      win = {};
+    }
+    var window_1 = win;
+    var isArrayBufferView = function isArrayBufferView(obj) {
+      if (ArrayBuffer.isView === 'function') {
+        return ArrayBuffer.isView(obj);
+      }
+      return obj && obj.buffer instanceof ArrayBuffer;
+    };
+    var BigInt = window_1.BigInt || Number;
+    [BigInt('0x1'), BigInt('0x100'), BigInt('0x10000'), BigInt('0x1000000'), BigInt('0x100000000'), BigInt('0x10000000000'), BigInt('0x1000000000000'), BigInt('0x100000000000000'), BigInt('0x10000000000000000')];
+    (function () {
+      var a = new Uint16Array([0xFFCC]);
+      var b = new Uint8Array(a.buffer, a.byteOffset, a.byteLength);
+      if (b[0] === 0xFF) {
+        return 'big';
+      }
+      if (b[0] === 0xCC) {
+        return 'little';
+      }
+      return 'unknown';
+    })();
+    /**
+     * Creates an object for sending to a web worker modifying properties that are TypedArrays
+     * into a new object with seperated properties for the buffer, byteOffset, and byteLength.
+     *
+     * @param {Object} message
+     *        Object of properties and values to send to the web worker
+     * @return {Object}
+     *         Modified message with TypedArray values expanded
+     * @function createTransferableMessage
+     */
+
+    const createTransferableMessage = function (message) {
+      const transferable = {};
+      Object.keys(message).forEach(key => {
+        const value = message[key];
+        if (isArrayBufferView(value)) {
+          transferable[key] = {
+            bytes: value.buffer,
+            byteOffset: value.byteOffset,
+            byteLength: value.byteLength
+          };
+        } else {
+          transferable[key] = value;
+        }
+      });
+      return transferable;
+    };
+    /* global self */
+
+    /**
+     * Our web worker interface so that things can talk to aes-decrypter
+     * that will be running in a web worker. the scope is passed to this by
+     * webworkify.
+     */
+
+    self.onmessage = function (event) {
+      const data = event.data;
+      const encrypted = new Uint8Array(data.encrypted.bytes, data.encrypted.byteOffset, data.encrypted.byteLength);
+      const key = new Uint32Array(data.key.bytes, data.key.byteOffset, data.key.byteLength / 4);
+      const iv = new Uint32Array(data.iv.bytes, data.iv.byteOffset, data.iv.byteLength / 4);
+      /* eslint-disable no-new, handle-callback-err */
+
+      new Decrypter(encrypted, key, iv, function (err, bytes) {
+        self.postMessage(createTransferableMessage({
+          source: data.source,
+          decrypted: bytes
+        }), [bytes.buffer]);
+      });
+      /* eslint-enable */
+    };
+  }));
+
+  var Decrypter = factory(workerCode);
+  /* rollup-plugin-worker-factory end for worker!/home/runner/work/http-streaming/http-streaming/src/decrypter-worker.js */
+
+  /**
+   * Convert the properties of an HLS track into an audioTrackKind.
+   *
+   * @private
+   */
+
+  const audioTrackKind_ = properties => {
+    let kind = properties.default ? 'main' : 'alternative';
+    if (properties.characteristics && properties.characteristics.indexOf('public.accessibility.describes-video') >= 0) {
+      kind = 'main-desc';
+    }
+    return kind;
+  };
+  /**
+   * Pause provided segment loader and playlist loader if active
+   *
+   * @param {SegmentLoader} segmentLoader
+   *        SegmentLoader to pause
+   * @param {Object} mediaType
+   *        Active media type
+   * @function stopLoaders
+   */
+
+  const stopLoaders = (segmentLoader, mediaType) => {
+    segmentLoader.abort();
+    segmentLoader.pause();
+    if (mediaType && mediaType.activePlaylistLoader) {
+      mediaType.activePlaylistLoader.pause();
+      mediaType.activePlaylistLoader = null;
+    }
+  };
+  /**
+   * Start loading provided segment loader and playlist loader
+   *
+   * @param {PlaylistLoader} playlistLoader
+   *        PlaylistLoader to start loading
+   * @param {Object} mediaType
+   *        Active media type
+   * @function startLoaders
+   */
+
+  const startLoaders = (playlistLoader, mediaType) => {
+    // Segment loader will be started after `loadedmetadata` or `loadedplaylist` from the
+    // playlist loader
+    mediaType.activePlaylistLoader = playlistLoader;
+    playlistLoader.load();
+  };
+  /**
+   * Returns a function to be called when the media group changes. It performs a
+   * non-destructive (preserve the buffer) resync of the SegmentLoader. This is because a
+   * change of group is merely a rendition switch of the same content at another encoding,
+   * rather than a change of content, such as switching audio from English to Spanish.
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Handler for a non-destructive resync of SegmentLoader when the active media
+   *         group changes.
+   * @function onGroupChanged
+   */
+
+  const onGroupChanged = (type, settings) => () => {
+    const {
+      segmentLoaders: {
+        [type]: segmentLoader,
+        main: mainSegmentLoader
+      },
+      mediaTypes: {
+        [type]: mediaType
+      }
+    } = settings;
+    const activeTrack = mediaType.activeTrack();
+    const activeGroup = mediaType.getActiveGroup();
+    const previousActiveLoader = mediaType.activePlaylistLoader;
+    const lastGroup = mediaType.lastGroup_; // the group did not change do nothing
+
+    if (activeGroup && lastGroup && activeGroup.id === lastGroup.id) {
+      return;
+    }
+    mediaType.lastGroup_ = activeGroup;
+    mediaType.lastTrack_ = activeTrack;
+    stopLoaders(segmentLoader, mediaType);
+    if (!activeGroup || activeGroup.isMainPlaylist) {
+      // there is no group active or active group is a main playlist and won't change
+      return;
+    }
+    if (!activeGroup.playlistLoader) {
+      if (previousActiveLoader) {
+        // The previous group had a playlist loader but the new active group does not
+        // this means we are switching from demuxed to muxed audio. In this case we want to
+        // do a destructive reset of the main segment loader and not restart the audio
+        // loaders.
+        mainSegmentLoader.resetEverything();
+      }
+      return;
+    } // Non-destructive resync
+
+    segmentLoader.resyncLoader();
+    startLoaders(activeGroup.playlistLoader, mediaType);
+  };
+  const onGroupChanging = (type, settings) => () => {
+    const {
+      segmentLoaders: {
+        [type]: segmentLoader
+      },
+      mediaTypes: {
+        [type]: mediaType
+      }
+    } = settings;
+    mediaType.lastGroup_ = null;
+    segmentLoader.abort();
+    segmentLoader.pause();
+  };
+  /**
+   * Returns a function to be called when the media track changes. It performs a
+   * destructive reset of the SegmentLoader to ensure we start loading as close to
+   * currentTime as possible.
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Handler for a destructive reset of SegmentLoader when the active media
+   *         track changes.
+   * @function onTrackChanged
+   */
+
+  const onTrackChanged = (type, settings) => () => {
+    const {
+      mainPlaylistLoader,
+      segmentLoaders: {
+        [type]: segmentLoader,
+        main: mainSegmentLoader
+      },
+      mediaTypes: {
+        [type]: mediaType
+      }
+    } = settings;
+    const activeTrack = mediaType.activeTrack();
+    const activeGroup = mediaType.getActiveGroup();
+    const previousActiveLoader = mediaType.activePlaylistLoader;
+    const lastTrack = mediaType.lastTrack_; // track did not change, do nothing
+
+    if (lastTrack && activeTrack && lastTrack.id === activeTrack.id) {
+      return;
+    }
+    mediaType.lastGroup_ = activeGroup;
+    mediaType.lastTrack_ = activeTrack;
+    stopLoaders(segmentLoader, mediaType);
+    if (!activeGroup) {
+      // there is no group active so we do not want to restart loaders
+      return;
+    }
+    if (activeGroup.isMainPlaylist) {
+      // track did not change, do nothing
+      if (!activeTrack || !lastTrack || activeTrack.id === lastTrack.id) {
+        return;
+      }
+      const pc = settings.vhs.playlistController_;
+      const newPlaylist = pc.selectPlaylist(); // media will not change do nothing
+
+      if (pc.media() === newPlaylist) {
+        return;
+      }
+      mediaType.logger_(`track change. Switching main audio from ${lastTrack.id} to ${activeTrack.id}`);
+      mainPlaylistLoader.pause();
+      mainSegmentLoader.resetEverything();
+      pc.fastQualityChange_(newPlaylist);
+      return;
+    }
+    if (type === 'AUDIO') {
+      if (!activeGroup.playlistLoader) {
+        // when switching from demuxed audio/video to muxed audio/video (noted by no
+        // playlist loader for the audio group), we want to do a destructive reset of the
+        // main segment loader and not restart the audio loaders
+        mainSegmentLoader.setAudio(true); // don't have to worry about disabling the audio of the audio segment loader since
+        // it should be stopped
+
+        mainSegmentLoader.resetEverything();
+        return;
+      } // although the segment loader is an audio segment loader, call the setAudio
+      // function to ensure it is prepared to re-append the init segment (or handle other
+      // config changes)
+
+      segmentLoader.setAudio(true);
+      mainSegmentLoader.setAudio(false);
+    }
+    if (previousActiveLoader === activeGroup.playlistLoader) {
+      // Nothing has actually changed. This can happen because track change events can fire
+      // multiple times for a "single" change. One for enabling the new active track, and
+      // one for disabling the track that was active
+      startLoaders(activeGroup.playlistLoader, mediaType);
+      return;
+    }
+    if (segmentLoader.track) {
+      // For WebVTT, set the new text track in the segmentloader
+      segmentLoader.track(activeTrack);
+    } // destructive reset
+
+    segmentLoader.resetEverything();
+    startLoaders(activeGroup.playlistLoader, mediaType);
+  };
+  const onError = {
+    /**
+     * Returns a function to be called when a SegmentLoader or PlaylistLoader encounters
+     * an error.
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @return {Function}
+     *         Error handler. Logs warning (or error if the playlist is excluded) to
+     *         console and switches back to default audio track.
+     * @function onError.AUDIO
+     */
+    AUDIO: (type, settings) => () => {
+      const {
+        mediaTypes: {
+          [type]: mediaType
+        },
+        excludePlaylist
+      } = settings; // switch back to default audio track
+
+      const activeTrack = mediaType.activeTrack();
+      const activeGroup = mediaType.activeGroup();
+      const id = (activeGroup.filter(group => group.default)[0] || activeGroup[0]).id;
+      const defaultTrack = mediaType.tracks[id];
+      if (activeTrack === defaultTrack) {
+        // Default track encountered an error. All we can do now is exclude the current
+        // rendition and hope another will switch audio groups
+        excludePlaylist({
+          error: {
+            message: 'Problem encountered loading the default audio track.'
+          }
+        });
+        return;
+      }
+      videojs.log.warn('Problem encountered loading the alternate audio track.' + 'Switching back to default.');
+      for (const trackId in mediaType.tracks) {
+        mediaType.tracks[trackId].enabled = mediaType.tracks[trackId] === defaultTrack;
+      }
+      mediaType.onTrackChanged();
+    },
+    /**
+     * Returns a function to be called when a SegmentLoader or PlaylistLoader encounters
+     * an error.
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @return {Function}
+     *         Error handler. Logs warning to console and disables the active subtitle track
+     * @function onError.SUBTITLES
+     */
+    SUBTITLES: (type, settings) => () => {
+      const {
+        mediaTypes: {
+          [type]: mediaType
+        }
+      } = settings;
+      videojs.log.warn('Problem encountered loading the subtitle track.' + 'Disabling subtitle track.');
+      const track = mediaType.activeTrack();
+      if (track) {
+        track.mode = 'disabled';
+      }
+      mediaType.onTrackChanged();
+    }
+  };
+  const setupListeners = {
+    /**
+     * Setup event listeners for audio playlist loader
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {PlaylistLoader|null} playlistLoader
+     *        PlaylistLoader to register listeners on
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function setupListeners.AUDIO
+     */
+    AUDIO: (type, playlistLoader, settings) => {
+      if (!playlistLoader) {
+        // no playlist loader means audio will be muxed with the video
+        return;
+      }
+      const {
+        tech,
+        requestOptions,
+        segmentLoaders: {
+          [type]: segmentLoader
+        }
+      } = settings;
+      playlistLoader.on('loadedmetadata', () => {
+        const media = playlistLoader.media();
+        segmentLoader.playlist(media, requestOptions); // if the video is already playing, or if this isn't a live video and preload
+        // permits, start downloading segments
+
+        if (!tech.paused() || media.endList && tech.preload() !== 'none') {
+          segmentLoader.load();
+        }
+      });
+      playlistLoader.on('loadedplaylist', () => {
+        segmentLoader.playlist(playlistLoader.media(), requestOptions); // If the player isn't paused, ensure that the segment loader is running
+
+        if (!tech.paused()) {
+          segmentLoader.load();
+        }
+      });
+      playlistLoader.on('error', onError[type](type, settings));
+    },
+    /**
+     * Setup event listeners for subtitle playlist loader
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {PlaylistLoader|null} playlistLoader
+     *        PlaylistLoader to register listeners on
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function setupListeners.SUBTITLES
+     */
+    SUBTITLES: (type, playlistLoader, settings) => {
+      const {
+        tech,
+        requestOptions,
+        segmentLoaders: {
+          [type]: segmentLoader
+        },
+        mediaTypes: {
+          [type]: mediaType
+        }
+      } = settings;
+      playlistLoader.on('loadedmetadata', () => {
+        const media = playlistLoader.media();
+        segmentLoader.playlist(media, requestOptions);
+        segmentLoader.track(mediaType.activeTrack()); // if the video is already playing, or if this isn't a live video and preload
+        // permits, start downloading segments
+
+        if (!tech.paused() || media.endList && tech.preload() !== 'none') {
+          segmentLoader.load();
+        }
+      });
+      playlistLoader.on('loadedplaylist', () => {
+        segmentLoader.playlist(playlistLoader.media(), requestOptions); // If the player isn't paused, ensure that the segment loader is running
+
+        if (!tech.paused()) {
+          segmentLoader.load();
+        }
+      });
+      playlistLoader.on('error', onError[type](type, settings));
+    }
+  };
+  const initialize = {
+    /**
+     * Setup PlaylistLoaders and AudioTracks for the audio groups
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function initialize.AUDIO
+     */
+    'AUDIO': (type, settings) => {
+      const {
+        vhs,
+        sourceType,
+        segmentLoaders: {
+          [type]: segmentLoader
+        },
+        requestOptions,
+        main: {
+          mediaGroups
+        },
+        mediaTypes: {
+          [type]: {
+            groups,
+            tracks,
+            logger_
+          }
+        },
+        mainPlaylistLoader
+      } = settings;
+      const audioOnlyMain = isAudioOnly(mainPlaylistLoader.main); // force a default if we have none
+
+      if (!mediaGroups[type] || Object.keys(mediaGroups[type]).length === 0) {
+        mediaGroups[type] = {
+          main: {
+            default: {
+              default: true
+            }
+          }
+        };
+        if (audioOnlyMain) {
+          mediaGroups[type].main.default.playlists = mainPlaylistLoader.main.playlists;
+        }
+      }
+      for (const groupId in mediaGroups[type]) {
+        if (!groups[groupId]) {
+          groups[groupId] = [];
+        }
+        for (const variantLabel in mediaGroups[type][groupId]) {
+          let properties = mediaGroups[type][groupId][variantLabel];
+          let playlistLoader;
+          if (audioOnlyMain) {
+            logger_(`AUDIO group '${groupId}' label '${variantLabel}' is a main playlist`);
+            properties.isMainPlaylist = true;
+            playlistLoader = null; // if vhs-json was provided as the source, and the media playlist was resolved,
+            // use the resolved media playlist object
+          } else if (sourceType === 'vhs-json' && properties.playlists) {
+            playlistLoader = new PlaylistLoader(properties.playlists[0], vhs, requestOptions);
+          } else if (properties.resolvedUri) {
+            playlistLoader = new PlaylistLoader(properties.resolvedUri, vhs, requestOptions); // TODO: dash isn't the only type with properties.playlists
+            // should we even have properties.playlists in this check.
+          } else if (properties.playlists && sourceType === 'dash') {
+            playlistLoader = new DashPlaylistLoader(properties.playlists[0], vhs, requestOptions, mainPlaylistLoader);
+          } else {
+            // no resolvedUri means the audio is muxed with the video when using this
+            // audio track
+            playlistLoader = null;
+          }
+          properties = merge({
+            id: variantLabel,
+            playlistLoader
+          }, properties);
+          setupListeners[type](type, properties.playlistLoader, settings);
+          groups[groupId].push(properties);
+          if (typeof tracks[variantLabel] === 'undefined') {
+            const track = new videojs.AudioTrack({
+              id: variantLabel,
+              kind: audioTrackKind_(properties),
+              enabled: false,
+              language: properties.language,
+              default: properties.default,
+              label: variantLabel
+            });
+            tracks[variantLabel] = track;
+          }
+        }
+      } // setup single error event handler for the segment loader
+
+      segmentLoader.on('error', onError[type](type, settings));
+    },
+    /**
+     * Setup PlaylistLoaders and TextTracks for the subtitle groups
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function initialize.SUBTITLES
+     */
+    'SUBTITLES': (type, settings) => {
+      const {
+        tech,
+        vhs,
+        sourceType,
+        segmentLoaders: {
+          [type]: segmentLoader
+        },
+        requestOptions,
+        main: {
+          mediaGroups
+        },
+        mediaTypes: {
+          [type]: {
+            groups,
+            tracks
+          }
+        },
+        mainPlaylistLoader
+      } = settings;
+      for (const groupId in mediaGroups[type]) {
+        if (!groups[groupId]) {
+          groups[groupId] = [];
+        }
+        for (const variantLabel in mediaGroups[type][groupId]) {
+          if (!vhs.options_.useForcedSubtitles && mediaGroups[type][groupId][variantLabel].forced) {
+            // Subtitle playlists with the forced attribute are not selectable in Safari.
+            // According to Apple's HLS Authoring Specification:
+            //   If content has forced subtitles and regular subtitles in a given language,
+            //   the regular subtitles track in that language MUST contain both the forced
+            //   subtitles and the regular subtitles for that language.
+            // Because of this requirement and that Safari does not add forced subtitles,
+            // forced subtitles are skipped here to maintain consistent experience across
+            // all platforms
+            continue;
+          }
+          let properties = mediaGroups[type][groupId][variantLabel];
+          let playlistLoader;
+          if (sourceType === 'hls') {
+            playlistLoader = new PlaylistLoader(properties.resolvedUri, vhs, requestOptions);
+          } else if (sourceType === 'dash') {
+            const playlists = properties.playlists.filter(p => p.excludeUntil !== Infinity);
+            if (!playlists.length) {
+              return;
+            }
+            playlistLoader = new DashPlaylistLoader(properties.playlists[0], vhs, requestOptions, mainPlaylistLoader);
+          } else if (sourceType === 'vhs-json') {
+            playlistLoader = new PlaylistLoader(
+            // if the vhs-json object included the media playlist, use the media playlist
+            // as provided, otherwise use the resolved URI to load the playlist
+            properties.playlists ? properties.playlists[0] : properties.resolvedUri, vhs, requestOptions);
+          }
+          properties = merge({
+            id: variantLabel,
+            playlistLoader
+          }, properties);
+          setupListeners[type](type, properties.playlistLoader, settings);
+          groups[groupId].push(properties);
+          if (typeof tracks[variantLabel] === 'undefined') {
+            const track = tech.addRemoteTextTrack({
+              id: variantLabel,
+              kind: 'subtitles',
+              default: properties.default && properties.autoselect,
+              language: properties.language,
+              label: variantLabel
+            }, false).track;
+            tracks[variantLabel] = track;
+          }
+        }
+      } // setup single error event handler for the segment loader
+
+      segmentLoader.on('error', onError[type](type, settings));
+    },
+    /**
+     * Setup TextTracks for the closed-caption groups
+     *
+     * @param {String} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function initialize['CLOSED-CAPTIONS']
+     */
+    'CLOSED-CAPTIONS': (type, settings) => {
+      const {
+        tech,
+        main: {
+          mediaGroups
+        },
+        mediaTypes: {
+          [type]: {
+            groups,
+            tracks
+          }
+        }
+      } = settings;
+      for (const groupId in mediaGroups[type]) {
+        if (!groups[groupId]) {
+          groups[groupId] = [];
+        }
+        for (const variantLabel in mediaGroups[type][groupId]) {
+          const properties = mediaGroups[type][groupId][variantLabel]; // Look for either 608 (CCn) or 708 (SERVICEn) caption services
+
+          if (!/^(?:CC|SERVICE)/.test(properties.instreamId)) {
+            continue;
+          }
+          const captionServices = tech.options_.vhs && tech.options_.vhs.captionServices || {};
+          let newProps = {
+            label: variantLabel,
+            language: properties.language,
+            instreamId: properties.instreamId,
+            default: properties.default && properties.autoselect
+          };
+          if (captionServices[newProps.instreamId]) {
+            newProps = merge(newProps, captionServices[newProps.instreamId]);
+          }
+          if (newProps.default === undefined) {
+            delete newProps.default;
+          } // No PlaylistLoader is required for Closed-Captions because the captions are
+          // embedded within the video stream
+
+          groups[groupId].push(merge({
+            id: variantLabel
+          }, properties));
+          if (typeof tracks[variantLabel] === 'undefined') {
+            const track = tech.addRemoteTextTrack({
+              id: newProps.instreamId,
+              kind: 'captions',
+              default: newProps.default,
+              language: newProps.language,
+              label: newProps.label
+            }, false).track;
+            tracks[variantLabel] = track;
+          }
+        }
+      }
+    }
+  };
+  const groupMatch = (list, media) => {
+    for (let i = 0; i < list.length; i++) {
+      if (playlistMatch(media, list[i])) {
+        return true;
+      }
+      if (list[i].playlists && groupMatch(list[i].playlists, media)) {
+        return true;
+      }
+    }
+    return false;
+  };
+  /**
+   * Returns a function used to get the active group of the provided type
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Function that returns the active media group for the provided type. Takes an
+   *         optional parameter {TextTrack} track. If no track is provided, a list of all
+   *         variants in the group, otherwise the variant corresponding to the provided
+   *         track is returned.
+   * @function activeGroup
+   */
+
+  const activeGroup = (type, settings) => track => {
+    const {
+      mainPlaylistLoader,
+      mediaTypes: {
+        [type]: {
+          groups
+        }
+      }
+    } = settings;
+    const media = mainPlaylistLoader.media();
+    if (!media) {
+      return null;
+    }
+    let variants = null; // set to variants to main media active group
+
+    if (media.attributes[type]) {
+      variants = groups[media.attributes[type]];
+    }
+    const groupKeys = Object.keys(groups);
+    if (!variants) {
+      // find the mainPlaylistLoader media
+      // that is in a media group if we are dealing
+      // with audio only
+      if (type === 'AUDIO' && groupKeys.length > 1 && isAudioOnly(settings.main)) {
+        for (let i = 0; i < groupKeys.length; i++) {
+          const groupPropertyList = groups[groupKeys[i]];
+          if (groupMatch(groupPropertyList, media)) {
+            variants = groupPropertyList;
+            break;
+          }
+        } // use the main group if it exists
+      } else if (groups.main) {
+        variants = groups.main; // only one group, use that one
+      } else if (groupKeys.length === 1) {
+        variants = groups[groupKeys[0]];
+      }
+    }
+    if (typeof track === 'undefined') {
+      return variants;
+    }
+    if (track === null || !variants) {
+      // An active track was specified so a corresponding group is expected. track === null
+      // means no track is currently active so there is no corresponding group
+      return null;
+    }
+    return variants.filter(props => props.id === track.id)[0] || null;
+  };
+  const activeTrack = {
+    /**
+     * Returns a function used to get the active track of type provided
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @return {Function}
+     *         Function that returns the active media track for the provided type. Returns
+     *         null if no track is active
+     * @function activeTrack.AUDIO
+     */
+    AUDIO: (type, settings) => () => {
+      const {
+        mediaTypes: {
+          [type]: {
+            tracks
+          }
+        }
+      } = settings;
+      for (const id in tracks) {
+        if (tracks[id].enabled) {
+          return tracks[id];
+        }
+      }
+      return null;
+    },
+    /**
+     * Returns a function used to get the active track of type provided
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @return {Function}
+     *         Function that returns the active media track for the provided type. Returns
+     *         null if no track is active
+     * @function activeTrack.SUBTITLES
+     */
+    SUBTITLES: (type, settings) => () => {
+      const {
+        mediaTypes: {
+          [type]: {
+            tracks
+          }
+        }
+      } = settings;
+      for (const id in tracks) {
+        if (tracks[id].mode === 'showing' || tracks[id].mode === 'hidden') {
+          return tracks[id];
+        }
+      }
+      return null;
+    }
+  };
+  const getActiveGroup = (type, {
+    mediaTypes
+  }) => () => {
+    const activeTrack_ = mediaTypes[type].activeTrack();
+    if (!activeTrack_) {
+      return null;
+    }
+    return mediaTypes[type].activeGroup(activeTrack_);
+  };
+  /**
+   * Setup PlaylistLoaders and Tracks for media groups (Audio, Subtitles,
+   * Closed-Captions) specified in the main manifest.
+   *
+   * @param {Object} settings
+   *        Object containing required information for setting up the media groups
+   * @param {Tech} settings.tech
+   *        The tech of the player
+   * @param {Object} settings.requestOptions
+   *        XHR request options used by the segment loaders
+   * @param {PlaylistLoader} settings.mainPlaylistLoader
+   *        PlaylistLoader for the main source
+   * @param {VhsHandler} settings.vhs
+   *        VHS SourceHandler
+   * @param {Object} settings.main
+   *        The parsed main manifest
+   * @param {Object} settings.mediaTypes
+   *        Object to store the loaders, tracks, and utility methods for each media type
+   * @param {Function} settings.excludePlaylist
+   *        Excludes the current rendition and forces a rendition switch.
+   * @function setupMediaGroups
+   */
+
+  const setupMediaGroups = settings => {
+    ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+      initialize[type](type, settings);
+    });
+    const {
+      mediaTypes,
+      mainPlaylistLoader,
+      tech,
+      vhs,
+      segmentLoaders: {
+        ['AUDIO']: audioSegmentLoader,
+        main: mainSegmentLoader
+      }
+    } = settings; // setup active group and track getters and change event handlers
+
+    ['AUDIO', 'SUBTITLES'].forEach(type => {
+      mediaTypes[type].activeGroup = activeGroup(type, settings);
+      mediaTypes[type].activeTrack = activeTrack[type](type, settings);
+      mediaTypes[type].onGroupChanged = onGroupChanged(type, settings);
+      mediaTypes[type].onGroupChanging = onGroupChanging(type, settings);
+      mediaTypes[type].onTrackChanged = onTrackChanged(type, settings);
+      mediaTypes[type].getActiveGroup = getActiveGroup(type, settings);
+    }); // DO NOT enable the default subtitle or caption track.
+    // DO enable the default audio track
+
+    const audioGroup = mediaTypes.AUDIO.activeGroup();
+    if (audioGroup) {
+      const groupId = (audioGroup.filter(group => group.default)[0] || audioGroup[0]).id;
+      mediaTypes.AUDIO.tracks[groupId].enabled = true;
+      mediaTypes.AUDIO.onGroupChanged();
+      mediaTypes.AUDIO.onTrackChanged();
+      const activeAudioGroup = mediaTypes.AUDIO.getActiveGroup(); // a similar check for handling setAudio on each loader is run again each time the
+      // track is changed, but needs to be handled here since the track may not be considered
+      // changed on the first call to onTrackChanged
+
+      if (!activeAudioGroup.playlistLoader) {
+        // either audio is muxed with video or the stream is audio only
+        mainSegmentLoader.setAudio(true);
+      } else {
+        // audio is demuxed
+        mainSegmentLoader.setAudio(false);
+        audioSegmentLoader.setAudio(true);
+      }
+    }
+    mainPlaylistLoader.on('mediachange', () => {
+      ['AUDIO', 'SUBTITLES'].forEach(type => mediaTypes[type].onGroupChanged());
+    });
+    mainPlaylistLoader.on('mediachanging', () => {
+      ['AUDIO', 'SUBTITLES'].forEach(type => mediaTypes[type].onGroupChanging());
+    }); // custom audio track change event handler for usage event
+
+    const onAudioTrackChanged = () => {
+      mediaTypes.AUDIO.onTrackChanged();
+      tech.trigger({
+        type: 'usage',
+        name: 'vhs-audio-change'
+      });
+    };
+    tech.audioTracks().addEventListener('change', onAudioTrackChanged);
+    tech.remoteTextTracks().addEventListener('change', mediaTypes.SUBTITLES.onTrackChanged);
+    vhs.on('dispose', () => {
+      tech.audioTracks().removeEventListener('change', onAudioTrackChanged);
+      tech.remoteTextTracks().removeEventListener('change', mediaTypes.SUBTITLES.onTrackChanged);
+    }); // clear existing audio tracks and add the ones we just created
+
+    tech.clearTracks('audio');
+    for (const id in mediaTypes.AUDIO.tracks) {
+      tech.audioTracks().addTrack(mediaTypes.AUDIO.tracks[id]);
+    }
+  };
+  /**
+   * Creates skeleton object used to store the loaders, tracks, and utility methods for each
+   * media type
+   *
+   * @return {Object}
+   *         Object to store the loaders, tracks, and utility methods for each media type
+   * @function createMediaTypes
+   */
+
+  const createMediaTypes = () => {
+    const mediaTypes = {};
+    ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+      mediaTypes[type] = {
+        groups: {},
+        tracks: {},
+        activePlaylistLoader: null,
+        activeGroup: noop,
+        activeTrack: noop,
+        getActiveGroup: noop,
+        onGroupChanged: noop,
+        onTrackChanged: noop,
+        lastTrack_: null,
+        logger_: logger(`MediaGroups[${type}]`)
+      };
+    });
+    return mediaTypes;
+  };
+
+  /**
+   * A utility class for setting properties and maintaining the state of the content steering manifest.
+   *
+   * Content Steering manifest format:
+   * VERSION: number (required) currently only version 1 is supported.
+   * TTL: number in seconds (optional) until the next content steering manifest reload.
+   * RELOAD-URI: string (optional) uri to fetch the next content steering manifest.
+   * SERVICE-LOCATION-PRIORITY or PATHWAY-PRIORITY a non empty array of unique string values.
+   * PATHWAY-CLONES: array (optional) (HLS only) pathway clone objects to copy from other playlists.
+   */
+
+  class SteeringManifest {
+    constructor() {
+      this.priority_ = [];
+      this.pathwayClones_ = new Map();
+    }
+    set version(number) {
+      // Only version 1 is currently supported for both DASH and HLS.
+      if (number === 1) {
+        this.version_ = number;
+      }
+    }
+    set ttl(seconds) {
+      // TTL = time-to-live, default = 300 seconds.
+      this.ttl_ = seconds || 300;
+    }
+    set reloadUri(uri) {
+      if (uri) {
+        // reload URI can be relative to the previous reloadUri.
+        this.reloadUri_ = resolveUrl(this.reloadUri_, uri);
+      }
+    }
+    set priority(array) {
+      // priority must be non-empty and unique values.
+      if (array && array.length) {
+        this.priority_ = array;
+      }
+    }
+    set pathwayClones(array) {
+      // pathwayClones must be non-empty.
+      if (array && array.length) {
+        this.pathwayClones_ = new Map(array.map(clone => [clone.ID, clone]));
+      }
+    }
+    get version() {
+      return this.version_;
+    }
+    get ttl() {
+      return this.ttl_;
+    }
+    get reloadUri() {
+      return this.reloadUri_;
+    }
+    get priority() {
+      return this.priority_;
+    }
+    get pathwayClones() {
+      return this.pathwayClones_;
+    }
+  }
+  /**
+   * This class represents a content steering manifest and associated state. See both HLS and DASH specifications.
+   * HLS: https://developer.apple.com/streaming/HLSContentSteeringSpecification.pdf and
+   * https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/ section 4.4.6.6.
+   * DASH: https://dashif.org/docs/DASH-IF-CTS-00XX-Content-Steering-Community-Review.pdf
+   *
+   * @param {function} xhr for making a network request from the browser.
+   * @param {function} bandwidth for fetching the current bandwidth from the main segment loader.
+   */
+
+  class ContentSteeringController extends videojs.EventTarget {
+    constructor(xhr, bandwidth) {
+      super();
+      this.currentPathway = null;
+      this.defaultPathway = null;
+      this.queryBeforeStart = false;
+      this.availablePathways_ = new Set();
+      this.steeringManifest = new SteeringManifest();
+      this.proxyServerUrl_ = null;
+      this.manifestType_ = null;
+      this.ttlTimeout_ = null;
+      this.request_ = null;
+      this.currentPathwayClones = new Map();
+      this.nextPathwayClones = new Map();
+      this.excludedSteeringManifestURLs = new Set();
+      this.logger_ = logger('Content Steering');
+      this.xhr_ = xhr;
+      this.getBandwidth_ = bandwidth;
+    }
+    /**
+     * Assigns the content steering tag properties to the steering controller
+     *
+     * @param {string} baseUrl the baseURL from the main manifest for resolving the steering manifest url
+     * @param {Object} steeringTag the content steering tag from the main manifest
+     */
+
+    assignTagProperties(baseUrl, steeringTag) {
+      this.manifestType_ = steeringTag.serverUri ? 'HLS' : 'DASH'; // serverUri is HLS serverURL is DASH
+
+      const steeringUri = steeringTag.serverUri || steeringTag.serverURL;
+      if (!steeringUri) {
+        this.logger_(`steering manifest URL is ${steeringUri}, cannot request steering manifest.`);
+        this.trigger('error');
+        return;
+      } // Content steering manifests can be encoded as a data URI. We can decode, parse and return early if that's the case.
+
+      if (steeringUri.startsWith('data:')) {
+        this.decodeDataUriManifest_(steeringUri.substring(steeringUri.indexOf(',') + 1));
+        return;
+      } // reloadUri is the resolution of the main manifest URL and steering URL.
+
+      this.steeringManifest.reloadUri = resolveUrl(baseUrl, steeringUri); // pathwayId is HLS defaultServiceLocation is DASH
+
+      this.defaultPathway = steeringTag.pathwayId || steeringTag.defaultServiceLocation; // currently only DASH supports the following properties on <ContentSteering> tags.
+
+      this.queryBeforeStart = steeringTag.queryBeforeStart;
+      this.proxyServerUrl_ = steeringTag.proxyServerURL; // trigger a steering event if we have a pathway from the content steering tag.
+      // this tells VHS which segment pathway to start with.
+      // If queryBeforeStart is true we need to wait for the steering manifest response.
+
+      if (this.defaultPathway && !this.queryBeforeStart) {
+        this.trigger('content-steering');
+      }
+    }
+    /**
+     * Requests the content steering manifest and parse the response. This should only be called after
+     * assignTagProperties was called with a content steering tag.
+     *
+     * @param {string} initialUri The optional uri to make the request with.
+     *    If set, the request should be made with exactly what is passed in this variable.
+     *    This scenario should only happen once on initalization.
+     */
+
+    requestSteeringManifest(initial) {
+      const reloadUri = this.steeringManifest.reloadUri;
+      if (!reloadUri) {
+        return;
+      } // We currently don't support passing MPD query parameters directly to the content steering URL as this requires
+      // ExtUrlQueryInfo tag support. See the DASH content steering spec section 8.1.
+      // This request URI accounts for manifest URIs that have been excluded.
+
+      const uri = initial ? reloadUri : this.getRequestURI(reloadUri); // If there are no valid manifest URIs, we should stop content steering.
+
+      if (!uri) {
+        this.logger_('No valid content steering manifest URIs. Stopping content steering.');
+        this.trigger('error');
+        this.dispose();
+        return;
+      }
+      this.request_ = this.xhr_({
+        uri,
+        requestType: 'content-steering-manifest'
+      }, (error, errorInfo) => {
+        if (error) {
+          // If the client receives HTTP 410 Gone in response to a manifest request,
+          // it MUST NOT issue another request for that URI for the remainder of the
+          // playback session. It MAY continue to use the most-recently obtained set
+          // of Pathways.
+          if (errorInfo.status === 410) {
+            this.logger_(`manifest request 410 ${error}.`);
+            this.logger_(`There will be no more content steering requests to ${uri} this session.`);
+            this.excludedSteeringManifestURLs.add(uri);
+            return;
+          } // If the client receives HTTP 429 Too Many Requests with a Retry-After
+          // header in response to a manifest request, it SHOULD wait until the time
+          // specified by the Retry-After header to reissue the request.
+
+          if (errorInfo.status === 429) {
+            const retrySeconds = errorInfo.responseHeaders['retry-after'];
+            this.logger_(`manifest request 429 ${error}.`);
+            this.logger_(`content steering will retry in ${retrySeconds} seconds.`);
+            this.startTTLTimeout_(parseInt(retrySeconds, 10));
+            return;
+          } // If the Steering Manifest cannot be loaded and parsed correctly, the
+          // client SHOULD continue to use the previous values and attempt to reload
+          // it after waiting for the previously-specified TTL (or 5 minutes if
+          // none).
+
+          this.logger_(`manifest failed to load ${error}.`);
+          this.startTTLTimeout_();
+          return;
+        }
+        const steeringManifestJson = JSON.parse(this.request_.responseText);
+        this.assignSteeringProperties_(steeringManifestJson);
+        this.startTTLTimeout_();
+      });
+    }
+    /**
+     * Set the proxy server URL and add the steering manifest url as a URI encoded parameter.
+     *
+     * @param {string} steeringUrl the steering manifest url
+     * @return the steering manifest url to a proxy server with all parameters set
+     */
+
+    setProxyServerUrl_(steeringUrl) {
+      const steeringUrlObject = new window.URL(steeringUrl);
+      const proxyServerUrlObject = new window.URL(this.proxyServerUrl_);
+      proxyServerUrlObject.searchParams.set('url', encodeURI(steeringUrlObject.toString()));
+      return this.setSteeringParams_(proxyServerUrlObject.toString());
+    }
+    /**
+     * Decodes and parses the data uri encoded steering manifest
+     *
+     * @param {string} dataUri the data uri to be decoded and parsed.
+     */
+
+    decodeDataUriManifest_(dataUri) {
+      const steeringManifestJson = JSON.parse(window.atob(dataUri));
+      this.assignSteeringProperties_(steeringManifestJson);
+    }
+    /**
+     * Set the HLS or DASH content steering manifest request query parameters. For example:
+     * _HLS_pathway="<CURRENT-PATHWAY-ID>" and _HLS_throughput=<THROUGHPUT>
+     * _DASH_pathway and _DASH_throughput
+     *
+     * @param {string} uri to add content steering server parameters to.
+     * @return a new uri as a string with the added steering query parameters.
+     */
+
+    setSteeringParams_(url) {
+      const urlObject = new window.URL(url);
+      const path = this.getPathway();
+      const networkThroughput = this.getBandwidth_();
+      if (path) {
+        const pathwayKey = `_${this.manifestType_}_pathway`;
+        urlObject.searchParams.set(pathwayKey, path);
+      }
+      if (networkThroughput) {
+        const throughputKey = `_${this.manifestType_}_throughput`;
+        urlObject.searchParams.set(throughputKey, networkThroughput);
+      }
+      return urlObject.toString();
+    }
+    /**
+     * Assigns the current steering manifest properties and to the SteeringManifest object
+     *
+     * @param {Object} steeringJson the raw JSON steering manifest
+     */
+
+    assignSteeringProperties_(steeringJson) {
+      this.steeringManifest.version = steeringJson.VERSION;
+      if (!this.steeringManifest.version) {
+        this.logger_(`manifest version is ${steeringJson.VERSION}, which is not supported.`);
+        this.trigger('error');
+        return;
+      }
+      this.steeringManifest.ttl = steeringJson.TTL;
+      this.steeringManifest.reloadUri = steeringJson['RELOAD-URI']; // HLS = PATHWAY-PRIORITY required. DASH = SERVICE-LOCATION-PRIORITY optional
+
+      this.steeringManifest.priority = steeringJson['PATHWAY-PRIORITY'] || steeringJson['SERVICE-LOCATION-PRIORITY']; // Pathway clones to be created/updated in HLS.
+      // See section 7.2 https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/
+
+      this.steeringManifest.pathwayClones = steeringJson['PATHWAY-CLONES'];
+      this.nextPathwayClones = this.steeringManifest.pathwayClones; // 1. apply first pathway from the array.
+      // 2. if first pathway doesn't exist in manifest, try next pathway.
+      //    a. if all pathways are exhausted, ignore the steering manifest priority.
+      // 3. if segments fail from an established pathway, try all variants/renditions, then exclude the failed pathway.
+      //    a. exclude a pathway for a minimum of the last TTL duration. Meaning, from the next steering response,
+      //       the excluded pathway will be ignored.
+      //       See excludePathway usage in excludePlaylist().
+      // If there are no available pathways, we need to stop content steering.
+
+      if (!this.availablePathways_.size) {
+        this.logger_('There are no available pathways for content steering. Ending content steering.');
+        this.trigger('error');
+        this.dispose();
+      }
+      const chooseNextPathway = pathwaysByPriority => {
+        for (const path of pathwaysByPriority) {
+          if (this.availablePathways_.has(path)) {
+            return path;
+          }
+        } // If no pathway matches, ignore the manifest and choose the first available.
+
+        return [...this.availablePathways_][0];
+      };
+      const nextPathway = chooseNextPathway(this.steeringManifest.priority);
+      if (this.currentPathway !== nextPathway) {
+        this.currentPathway = nextPathway;
+        this.trigger('content-steering');
+      }
+    }
+    /**
+     * Returns the pathway to use for steering decisions
+     *
+     * @return {string} returns the current pathway or the default
+     */
+
+    getPathway() {
+      return this.currentPathway || this.defaultPathway;
+    }
+    /**
+     * Chooses the manifest request URI based on proxy URIs and server URLs.
+     * Also accounts for exclusion on certain manifest URIs.
+     *
+     * @param {string} reloadUri the base uri before parameters
+     *
+     * @return {string} the final URI for the request to the manifest server.
+     */
+
+    getRequestURI(reloadUri) {
+      if (!reloadUri) {
+        return null;
+      }
+      const isExcluded = uri => this.excludedSteeringManifestURLs.has(uri);
+      if (this.proxyServerUrl_) {
+        const proxyURI = this.setProxyServerUrl_(reloadUri);
+        if (!isExcluded(proxyURI)) {
+          return proxyURI;
+        }
+      }
+      const steeringURI = this.setSteeringParams_(reloadUri);
+      if (!isExcluded(steeringURI)) {
+        return steeringURI;
+      } // Return nothing if all valid manifest URIs are excluded.
+
+      return null;
+    }
+    /**
+     * Start the timeout for re-requesting the steering manifest at the TTL interval.
+     *
+     * @param {number} ttl time in seconds of the timeout. Defaults to the
+     *        ttl interval in the steering manifest
+     */
+
+    startTTLTimeout_(ttl = this.steeringManifest.ttl) {
+      // 300 (5 minutes) is the default value.
+      const ttlMS = ttl * 1000;
+      this.ttlTimeout_ = window.setTimeout(() => {
+        this.requestSteeringManifest();
+      }, ttlMS);
+    }
+    /**
+     * Clear the TTL timeout if necessary.
+     */
+
+    clearTTLTimeout_() {
+      window.clearTimeout(this.ttlTimeout_);
+      this.ttlTimeout_ = null;
+    }
+    /**
+     * aborts any current steering xhr and sets the current request object to null
+     */
+
+    abort() {
+      if (this.request_) {
+        this.request_.abort();
+      }
+      this.request_ = null;
+    }
+    /**
+     * aborts steering requests clears the ttl timeout and resets all properties.
+     */
+
+    dispose() {
+      this.off('content-steering');
+      this.off('error');
+      this.abort();
+      this.clearTTLTimeout_();
+      this.currentPathway = null;
+      this.defaultPathway = null;
+      this.queryBeforeStart = null;
+      this.proxyServerUrl_ = null;
+      this.manifestType_ = null;
+      this.ttlTimeout_ = null;
+      this.request_ = null;
+      this.excludedSteeringManifestURLs = new Set();
+      this.availablePathways_ = new Set();
+      this.steeringManifest = new SteeringManifest();
+    }
+    /**
+     * adds a pathway to the available pathways set
+     *
+     * @param {string} pathway the pathway string to add
+     */
+
+    addAvailablePathway(pathway) {
+      if (pathway) {
+        this.availablePathways_.add(pathway);
+      }
+    }
+    /**
+     * Clears all pathways from the available pathways set
+     */
+
+    clearAvailablePathways() {
+      this.availablePathways_.clear();
+    }
+    /**
+     * Removes a pathway from the available pathways set.
+     */
+
+    excludePathway(pathway) {
+      return this.availablePathways_.delete(pathway);
+    }
+    /**
+     * Checks the refreshed DASH manifest content steering tag for changes.
+     *
+     * @param {string} baseURL new steering tag on DASH manifest refresh
+     * @param {Object} newTag the new tag to check for changes
+     * @return a true or false whether the new tag has different values
+     */
+
+    didDASHTagChange(baseURL, newTag) {
+      return !newTag && this.steeringManifest.reloadUri || newTag && (resolveUrl(baseURL, newTag.serverURL) !== this.steeringManifest.reloadUri || newTag.defaultServiceLocation !== this.defaultPathway || newTag.queryBeforeStart !== this.queryBeforeStart || newTag.proxyServerURL !== this.proxyServerUrl_);
+    }
+    getAvailablePathways() {
+      return this.availablePathways_;
+    }
+  }
+
+  /**
+   * @file playlist-controller.js
+   */
+  const ABORT_EARLY_EXCLUSION_SECONDS = 10;
+  let Vhs$1; // SegmentLoader stats that need to have each loader's
+  // values summed to calculate the final value
+
+  const loaderStats = ['mediaRequests', 'mediaRequestsAborted', 'mediaRequestsTimedout', 'mediaRequestsErrored', 'mediaTransferDuration', 'mediaBytesTransferred', 'mediaAppends'];
+  const sumLoaderStat = function (stat) {
+    return this.audioSegmentLoader_[stat] + this.mainSegmentLoader_[stat];
+  };
+  const shouldSwitchToMedia = function ({
+    currentPlaylist,
+    buffered,
+    currentTime,
+    nextPlaylist,
+    bufferLowWaterLine,
+    bufferHighWaterLine,
+    duration,
+    bufferBasedABR,
+    log
+  }) {
+    // we have no other playlist to switch to
+    if (!nextPlaylist) {
+      videojs.log.warn('We received no playlist to switch to. Please check your stream.');
+      return false;
+    }
+    const sharedLogLine = `allowing switch ${currentPlaylist && currentPlaylist.id || 'null'} -> ${nextPlaylist.id}`;
+    if (!currentPlaylist) {
+      log(`${sharedLogLine} as current playlist is not set`);
+      return true;
+    } // no need to switch if playlist is the same
+
+    if (nextPlaylist.id === currentPlaylist.id) {
+      return false;
+    } // determine if current time is in a buffered range.
+
+    const isBuffered = Boolean(findRange(buffered, currentTime).length); // If the playlist is live, then we want to not take low water line into account.
+    // This is because in LIVE, the player plays 3 segments from the end of the
+    // playlist, and if `BUFFER_LOW_WATER_LINE` is greater than the duration availble
+    // in those segments, a viewer will never experience a rendition upswitch.
+
+    if (!currentPlaylist.endList) {
+      // For LLHLS live streams, don't switch renditions before playback has started, as it almost
+      // doubles the time to first playback.
+      if (!isBuffered && typeof currentPlaylist.partTargetDuration === 'number') {
+        log(`not ${sharedLogLine} as current playlist is live llhls, but currentTime isn't in buffered.`);
+        return false;
+      }
+      log(`${sharedLogLine} as current playlist is live`);
+      return true;
+    }
+    const forwardBuffer = timeAheadOf(buffered, currentTime);
+    const maxBufferLowWaterLine = bufferBasedABR ? Config.EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE : Config.MAX_BUFFER_LOW_WATER_LINE; // For the same reason as LIVE, we ignore the low water line when the VOD
+    // duration is below the max potential low water line
+
+    if (duration < maxBufferLowWaterLine) {
+      log(`${sharedLogLine} as duration < max low water line (${duration} < ${maxBufferLowWaterLine})`);
+      return true;
+    }
+    const nextBandwidth = nextPlaylist.attributes.BANDWIDTH;
+    const currBandwidth = currentPlaylist.attributes.BANDWIDTH; // when switching down, if our buffer is lower than the high water line,
+    // we can switch down
+
+    if (nextBandwidth < currBandwidth && (!bufferBasedABR || forwardBuffer < bufferHighWaterLine)) {
+      let logLine = `${sharedLogLine} as next bandwidth < current bandwidth (${nextBandwidth} < ${currBandwidth})`;
+      if (bufferBasedABR) {
+        logLine += ` and forwardBuffer < bufferHighWaterLine (${forwardBuffer} < ${bufferHighWaterLine})`;
+      }
+      log(logLine);
+      return true;
+    } // and if our buffer is higher than the low water line,
+    // we can switch up
+
+    if ((!bufferBasedABR || nextBandwidth > currBandwidth) && forwardBuffer >= bufferLowWaterLine) {
+      let logLine = `${sharedLogLine} as forwardBuffer >= bufferLowWaterLine (${forwardBuffer} >= ${bufferLowWaterLine})`;
+      if (bufferBasedABR) {
+        logLine += ` and next bandwidth > current bandwidth (${nextBandwidth} > ${currBandwidth})`;
+      }
+      log(logLine);
+      return true;
+    }
+    log(`not ${sharedLogLine} as no switching criteria met`);
+    return false;
+  };
+  /**
+   * the main playlist controller controller all interactons
+   * between playlists and segmentloaders. At this time this mainly
+   * involves a main playlist and a series of audio playlists
+   * if they are available
+   *
+   * @class PlaylistController
+   * @extends videojs.EventTarget
+   */
+
+  class PlaylistController extends videojs.EventTarget {
+    constructor(options) {
+      super();
+      const {
+        src,
+        withCredentials,
+        tech,
+        bandwidth,
+        externVhs,
+        useCueTags,
+        playlistExclusionDuration,
+        enableLowInitialPlaylist,
+        sourceType,
+        cacheEncryptionKeys,
+        bufferBasedABR,
+        leastPixelDiffSelector,
+        captionServices
+      } = options;
+      if (!src) {
+        throw new Error('A non-empty playlist URL or JSON manifest string is required');
+      }
+      let {
+        maxPlaylistRetries
+      } = options;
+      if (maxPlaylistRetries === null || typeof maxPlaylistRetries === 'undefined') {
+        maxPlaylistRetries = Infinity;
+      }
+      Vhs$1 = externVhs;
+      this.bufferBasedABR = Boolean(bufferBasedABR);
+      this.leastPixelDiffSelector = Boolean(leastPixelDiffSelector);
+      this.withCredentials = withCredentials;
+      this.tech_ = tech;
+      this.vhs_ = tech.vhs;
+      this.sourceType_ = sourceType;
+      this.useCueTags_ = useCueTags;
+      this.playlistExclusionDuration = playlistExclusionDuration;
+      this.maxPlaylistRetries = maxPlaylistRetries;
+      this.enableLowInitialPlaylist = enableLowInitialPlaylist;
+      if (this.useCueTags_) {
+        this.cueTagsTrack_ = this.tech_.addTextTrack('metadata', 'ad-cues');
+        this.cueTagsTrack_.inBandMetadataTrackDispatchType = '';
+      }
+      this.requestOptions_ = {
+        withCredentials,
+        maxPlaylistRetries,
+        timeout: null
+      };
+      this.on('error', this.pauseLoading);
+      this.mediaTypes_ = createMediaTypes();
+      this.mediaSource = new window.MediaSource();
+      this.handleDurationChange_ = this.handleDurationChange_.bind(this);
+      this.handleSourceOpen_ = this.handleSourceOpen_.bind(this);
+      this.handleSourceEnded_ = this.handleSourceEnded_.bind(this);
+      this.mediaSource.addEventListener('durationchange', this.handleDurationChange_); // load the media source into the player
+
+      this.mediaSource.addEventListener('sourceopen', this.handleSourceOpen_);
+      this.mediaSource.addEventListener('sourceended', this.handleSourceEnded_); // we don't have to handle sourceclose since dispose will handle termination of
+      // everything, and the MediaSource should not be detached without a proper disposal
+
+      this.seekable_ = createTimeRanges();
+      this.hasPlayed_ = false;
+      this.syncController_ = new SyncController(options);
+      this.segmentMetadataTrack_ = tech.addRemoteTextTrack({
+        kind: 'metadata',
+        label: 'segment-metadata'
+      }, false).track;
+      this.decrypter_ = new Decrypter();
+      this.sourceUpdater_ = new SourceUpdater(this.mediaSource);
+      this.inbandTextTracks_ = {};
+      this.timelineChangeController_ = new TimelineChangeController();
+      this.keyStatusMap_ = new Map();
+      const segmentLoaderSettings = {
+        vhs: this.vhs_,
+        parse708captions: options.parse708captions,
+        useDtsForTimestampOffset: options.useDtsForTimestampOffset,
+        captionServices,
+        mediaSource: this.mediaSource,
+        currentTime: this.tech_.currentTime.bind(this.tech_),
+        seekable: () => this.seekable(),
+        seeking: () => this.tech_.seeking(),
+        duration: () => this.duration(),
+        hasPlayed: () => this.hasPlayed_,
+        goalBufferLength: () => this.goalBufferLength(),
+        bandwidth,
+        syncController: this.syncController_,
+        decrypter: this.decrypter_,
+        sourceType: this.sourceType_,
+        inbandTextTracks: this.inbandTextTracks_,
+        cacheEncryptionKeys,
+        sourceUpdater: this.sourceUpdater_,
+        timelineChangeController: this.timelineChangeController_,
+        exactManifestTimings: options.exactManifestTimings,
+        addMetadataToTextTrack: this.addMetadataToTextTrack.bind(this)
+      }; // The source type check not only determines whether a special DASH playlist loader
+      // should be used, but also covers the case where the provided src is a vhs-json
+      // manifest object (instead of a URL). In the case of vhs-json, the default
+      // PlaylistLoader should be used.
+
+      this.mainPlaylistLoader_ = this.sourceType_ === 'dash' ? new DashPlaylistLoader(src, this.vhs_, merge(this.requestOptions_, {
+        addMetadataToTextTrack: this.addMetadataToTextTrack.bind(this)
+      })) : new PlaylistLoader(src, this.vhs_, merge(this.requestOptions_, {
+        addDateRangesToTextTrack: this.addDateRangesToTextTrack_.bind(this)
+      }));
+      this.setupMainPlaylistLoaderListeners_(); // setup segment loaders
+      // combined audio/video or just video when alternate audio track is selected
+
+      this.mainSegmentLoader_ = new SegmentLoader(merge(segmentLoaderSettings, {
+        segmentMetadataTrack: this.segmentMetadataTrack_,
+        loaderType: 'main'
+      }), options); // alternate audio track
+
+      this.audioSegmentLoader_ = new SegmentLoader(merge(segmentLoaderSettings, {
+        loaderType: 'audio'
+      }), options);
+      this.subtitleSegmentLoader_ = new VTTSegmentLoader(merge(segmentLoaderSettings, {
+        loaderType: 'vtt',
+        featuresNativeTextTracks: this.tech_.featuresNativeTextTracks,
+        loadVttJs: () => new Promise((resolve, reject) => {
+          function onLoad() {
+            tech.off('vttjserror', onError);
+            resolve();
+          }
+          function onError() {
+            tech.off('vttjsloaded', onLoad);
+            reject();
+          }
+          tech.one('vttjsloaded', onLoad);
+          tech.one('vttjserror', onError); // safe to call multiple times, script will be loaded only once:
+
+          tech.addWebVttScript_();
+        })
+      }), options);
+      const getBandwidth = () => {
+        return this.mainSegmentLoader_.bandwidth;
+      };
+      this.contentSteeringController_ = new ContentSteeringController(this.vhs_.xhr, getBandwidth);
+      this.setupSegmentLoaderListeners_();
+      if (this.bufferBasedABR) {
+        this.mainPlaylistLoader_.one('loadedplaylist', () => this.startABRTimer_());
+        this.tech_.on('pause', () => this.stopABRTimer_());
+        this.tech_.on('play', () => this.startABRTimer_());
+      } // Create SegmentLoader stat-getters
+      // mediaRequests_
+      // mediaRequestsAborted_
+      // mediaRequestsTimedout_
+      // mediaRequestsErrored_
+      // mediaTransferDuration_
+      // mediaBytesTransferred_
+      // mediaAppends_
+
+      loaderStats.forEach(stat => {
+        this[stat + '_'] = sumLoaderStat.bind(this, stat);
+      });
+      this.logger_ = logger('pc');
+      this.triggeredFmp4Usage = false;
+      if (this.tech_.preload() === 'none') {
+        this.loadOnPlay_ = () => {
+          this.loadOnPlay_ = null;
+          this.mainPlaylistLoader_.load();
+        };
+        this.tech_.one('play', this.loadOnPlay_);
+      } else {
+        this.mainPlaylistLoader_.load();
+      }
+      this.timeToLoadedData__ = -1;
+      this.mainAppendsToLoadedData__ = -1;
+      this.audioAppendsToLoadedData__ = -1;
+      const event = this.tech_.preload() === 'none' ? 'play' : 'loadstart'; // start the first frame timer on loadstart or play (for preload none)
+
+      this.tech_.one(event, () => {
+        const timeToLoadedDataStart = Date.now();
+        this.tech_.one('loadeddata', () => {
+          this.timeToLoadedData__ = Date.now() - timeToLoadedDataStart;
+          this.mainAppendsToLoadedData__ = this.mainSegmentLoader_.mediaAppends;
+          this.audioAppendsToLoadedData__ = this.audioSegmentLoader_.mediaAppends;
+        });
+      });
+    }
+    mainAppendsToLoadedData_() {
+      return this.mainAppendsToLoadedData__;
+    }
+    audioAppendsToLoadedData_() {
+      return this.audioAppendsToLoadedData__;
+    }
+    appendsToLoadedData_() {
+      const main = this.mainAppendsToLoadedData_();
+      const audio = this.audioAppendsToLoadedData_();
+      if (main === -1 || audio === -1) {
+        return -1;
+      }
+      return main + audio;
+    }
+    timeToLoadedData_() {
+      return this.timeToLoadedData__;
+    }
+    /**
+     * Run selectPlaylist and switch to the new playlist if we should
+     *
+     * @param {string} [reason=abr] a reason for why the ABR check is made
+     * @private
+     */
+
+    checkABR_(reason = 'abr') {
+      const nextPlaylist = this.selectPlaylist();
+      if (nextPlaylist && this.shouldSwitchToMedia_(nextPlaylist)) {
+        this.switchMedia_(nextPlaylist, reason);
+      }
+    }
+    switchMedia_(playlist, cause, delay) {
+      const oldMedia = this.media();
+      const oldId = oldMedia && (oldMedia.id || oldMedia.uri);
+      const newId = playlist && (playlist.id || playlist.uri);
+      if (oldId && oldId !== newId) {
+        this.logger_(`switch media ${oldId} -> ${newId} from ${cause}`);
+        this.tech_.trigger({
+          type: 'usage',
+          name: `vhs-rendition-change-${cause}`
+        });
+      }
+      this.mainPlaylistLoader_.media(playlist, delay);
+    }
+    /**
+     * A function that ensures we switch our playlists inside of `mediaTypes`
+     * to match the current `serviceLocation` provided by the contentSteering controller.
+     * We want to check media types of `AUDIO`, `SUBTITLES`, and `CLOSED-CAPTIONS`.
+     *
+     * This should only be called on a DASH playback scenario while using content steering.
+     * This is necessary due to differences in how media in HLS manifests are generally tied to
+     * a video playlist, where in DASH that is not always the case.
+     */
+
+    switchMediaForDASHContentSteering_() {
+      ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+        const mediaType = this.mediaTypes_[type];
+        const activeGroup = mediaType ? mediaType.activeGroup() : null;
+        const pathway = this.contentSteeringController_.getPathway();
+        if (activeGroup && pathway) {
+          // activeGroup can be an array or a single group
+          const mediaPlaylists = activeGroup.length ? activeGroup[0].playlists : activeGroup.playlists;
+          const dashMediaPlaylists = mediaPlaylists.filter(p => p.attributes.serviceLocation === pathway); // Switch the current active playlist to the correct CDN
+
+          if (dashMediaPlaylists.length) {
+            this.mediaTypes_[type].activePlaylistLoader.media(dashMediaPlaylists[0]);
+          }
+        }
+      });
+    }
+    /**
+     * Start a timer that periodically calls checkABR_
+     *
+     * @private
+     */
+
+    startABRTimer_() {
+      this.stopABRTimer_();
+      this.abrTimer_ = window.setInterval(() => this.checkABR_(), 250);
+    }
+    /**
+     * Stop the timer that periodically calls checkABR_
+     *
+     * @private
+     */
+
+    stopABRTimer_() {
+      // if we're scrubbing, we don't need to pause.
+      // This getter will be added to Video.js in version 7.11.
+      if (this.tech_.scrubbing && this.tech_.scrubbing()) {
+        return;
+      }
+      window.clearInterval(this.abrTimer_);
+      this.abrTimer_ = null;
+    }
+    /**
+     * Get a list of playlists for the currently selected audio playlist
+     *
+     * @return {Array} the array of audio playlists
+     */
+
+    getAudioTrackPlaylists_() {
+      const main = this.main();
+      const defaultPlaylists = main && main.playlists || []; // if we don't have any audio groups then we can only
+      // assume that the audio tracks are contained in main
+      // playlist array, use that or an empty array.
+
+      if (!main || !main.mediaGroups || !main.mediaGroups.AUDIO) {
+        return defaultPlaylists;
+      }
+      const AUDIO = main.mediaGroups.AUDIO;
+      const groupKeys = Object.keys(AUDIO);
+      let track; // get the current active track
+
+      if (Object.keys(this.mediaTypes_.AUDIO.groups).length) {
+        track = this.mediaTypes_.AUDIO.activeTrack(); // or get the default track from main if mediaTypes_ isn't setup yet
+      } else {
+        // default group is `main` or just the first group.
+        const defaultGroup = AUDIO.main || groupKeys.length && AUDIO[groupKeys[0]];
+        for (const label in defaultGroup) {
+          if (defaultGroup[label].default) {
+            track = {
+              label
+            };
+            break;
+          }
+        }
+      } // no active track no playlists.
+
+      if (!track) {
+        return defaultPlaylists;
+      }
+      const playlists = []; // get all of the playlists that are possible for the
+      // active track.
+
+      for (const group in AUDIO) {
+        if (AUDIO[group][track.label]) {
+          const properties = AUDIO[group][track.label];
+          if (properties.playlists && properties.playlists.length) {
+            playlists.push.apply(playlists, properties.playlists);
+          } else if (properties.uri) {
+            playlists.push(properties);
+          } else if (main.playlists.length) {
+            // if an audio group does not have a uri
+            // see if we have main playlists that use it as a group.
+            // if we do then add those to the playlists list.
+            for (let i = 0; i < main.playlists.length; i++) {
+              const playlist = main.playlists[i];
+              if (playlist.attributes && playlist.attributes.AUDIO && playlist.attributes.AUDIO === group) {
+                playlists.push(playlist);
+              }
+            }
+          }
+        }
+      }
+      if (!playlists.length) {
+        return defaultPlaylists;
+      }
+      return playlists;
+    }
+    /**
+     * Register event handlers on the main playlist loader. A helper
+     * function for construction time.
+     *
+     * @private
+     */
+
+    setupMainPlaylistLoaderListeners_() {
+      this.mainPlaylistLoader_.on('loadedmetadata', () => {
+        const media = this.mainPlaylistLoader_.media();
+        const requestTimeout = media.targetDuration * 1.5 * 1000; // If we don't have any more available playlists, we don't want to
+        // timeout the request.
+
+        if (isLowestEnabledRendition(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.media())) {
+          this.requestOptions_.timeout = 0;
+        } else {
+          this.requestOptions_.timeout = requestTimeout;
+        } // if this isn't a live video and preload permits, start
+        // downloading segments
+
+        if (media.endList && this.tech_.preload() !== 'none') {
+          this.mainSegmentLoader_.playlist(media, this.requestOptions_);
+          this.mainSegmentLoader_.load();
+        }
+        setupMediaGroups({
+          sourceType: this.sourceType_,
+          segmentLoaders: {
+            AUDIO: this.audioSegmentLoader_,
+            SUBTITLES: this.subtitleSegmentLoader_,
+            main: this.mainSegmentLoader_
+          },
+          tech: this.tech_,
+          requestOptions: this.requestOptions_,
+          mainPlaylistLoader: this.mainPlaylistLoader_,
+          vhs: this.vhs_,
+          main: this.main(),
+          mediaTypes: this.mediaTypes_,
+          excludePlaylist: this.excludePlaylist.bind(this)
+        });
+        this.triggerPresenceUsage_(this.main(), media);
+        this.setupFirstPlay();
+        if (!this.mediaTypes_.AUDIO.activePlaylistLoader || this.mediaTypes_.AUDIO.activePlaylistLoader.media()) {
+          this.trigger('selectedinitialmedia');
+        } else {
+          // We must wait for the active audio playlist loader to
+          // finish setting up before triggering this event so the
+          // representations API and EME setup is correct
+          this.mediaTypes_.AUDIO.activePlaylistLoader.one('loadedmetadata', () => {
+            this.trigger('selectedinitialmedia');
+          });
+        }
+      });
+      this.mainPlaylistLoader_.on('loadedplaylist', () => {
+        if (this.loadOnPlay_) {
+          this.tech_.off('play', this.loadOnPlay_);
+        }
+        let updatedPlaylist = this.mainPlaylistLoader_.media();
+        if (!updatedPlaylist) {
+          // Add content steering listeners on first load and init.
+          this.attachContentSteeringListeners_();
+          this.initContentSteeringController_(); // exclude any variants that are not supported by the browser before selecting
+          // an initial media as the playlist selectors do not consider browser support
+
+          this.excludeUnsupportedVariants_();
+          let selectedMedia;
+          if (this.enableLowInitialPlaylist) {
+            selectedMedia = this.selectInitialPlaylist();
+          }
+          if (!selectedMedia) {
+            selectedMedia = this.selectPlaylist();
+          }
+          if (!selectedMedia || !this.shouldSwitchToMedia_(selectedMedia)) {
+            return;
+          }
+          this.initialMedia_ = selectedMedia;
+          this.switchMedia_(this.initialMedia_, 'initial'); // Under the standard case where a source URL is provided, loadedplaylist will
+          // fire again since the playlist will be requested. In the case of vhs-json
+          // (where the manifest object is provided as the source), when the media
+          // playlist's `segments` list is already available, a media playlist won't be
+          // requested, and loadedplaylist won't fire again, so the playlist handler must be
+          // called on its own here.
+
+          const haveJsonSource = this.sourceType_ === 'vhs-json' && this.initialMedia_.segments;
+          if (!haveJsonSource) {
+            return;
+          }
+          updatedPlaylist = this.initialMedia_;
+        }
+        this.handleUpdatedMediaPlaylist(updatedPlaylist);
+      });
+      this.mainPlaylistLoader_.on('error', () => {
+        const error = this.mainPlaylistLoader_.error;
+        this.excludePlaylist({
+          playlistToExclude: error.playlist,
+          error
+        });
+      });
+      this.mainPlaylistLoader_.on('mediachanging', () => {
+        this.mainSegmentLoader_.abort();
+        this.mainSegmentLoader_.pause();
+      });
+      this.mainPlaylistLoader_.on('mediachange', () => {
+        const media = this.mainPlaylistLoader_.media();
+        const requestTimeout = media.targetDuration * 1.5 * 1000; // If we don't have any more available playlists, we don't want to
+        // timeout the request.
+
+        if (isLowestEnabledRendition(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.media())) {
+          this.requestOptions_.timeout = 0;
+        } else {
+          this.requestOptions_.timeout = requestTimeout;
+        }
+        if (this.sourceType_ === 'dash') {
+          // we don't want to re-request the same hls playlist right after it was changed
+          this.mainPlaylistLoader_.load();
+        } // TODO: Create a new event on the PlaylistLoader that signals
+        // that the segments have changed in some way and use that to
+        // update the SegmentLoader instead of doing it twice here and
+        // on `loadedplaylist`
+
+        this.mainSegmentLoader_.pause();
+        this.mainSegmentLoader_.playlist(media, this.requestOptions_);
+        if (this.waitingForFastQualityPlaylistReceived_) {
+          this.runFastQualitySwitch_();
+        } else {
+          this.mainSegmentLoader_.load();
+        }
+        this.tech_.trigger({
+          type: 'mediachange',
+          bubbles: true
+        });
+      });
+      this.mainPlaylistLoader_.on('playlistunchanged', () => {
+        const updatedPlaylist = this.mainPlaylistLoader_.media(); // ignore unchanged playlists that have already been
+        // excluded for not-changing. We likely just have a really slowly updating
+        // playlist.
+
+        if (updatedPlaylist.lastExcludeReason_ === 'playlist-unchanged') {
+          return;
+        }
+        const playlistOutdated = this.stuckAtPlaylistEnd_(updatedPlaylist);
+        if (playlistOutdated) {
+          // Playlist has stopped updating and we're stuck at its end. Try to
+          // exclude it and switch to another playlist in the hope that that
+          // one is updating (and give the player a chance to re-adjust to the
+          // safe live point).
+          this.excludePlaylist({
+            error: {
+              message: 'Playlist no longer updating.',
+              reason: 'playlist-unchanged'
+            }
+          }); // useful for monitoring QoS
+
+          this.tech_.trigger('playliststuck');
+        }
+      });
+      this.mainPlaylistLoader_.on('renditiondisabled', () => {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-rendition-disabled'
+        });
+      });
+      this.mainPlaylistLoader_.on('renditionenabled', () => {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-rendition-enabled'
+        });
+      });
+    }
+    /**
+     * Given an updated media playlist (whether it was loaded for the first time, or
+     * refreshed for live playlists), update any relevant properties and state to reflect
+     * changes in the media that should be accounted for (e.g., cues and duration).
+     *
+     * @param {Object} updatedPlaylist the updated media playlist object
+     *
+     * @private
+     */
+
+    handleUpdatedMediaPlaylist(updatedPlaylist) {
+      if (this.useCueTags_) {
+        this.updateAdCues_(updatedPlaylist);
+      } // TODO: Create a new event on the PlaylistLoader that signals
+      // that the segments have changed in some way and use that to
+      // update the SegmentLoader instead of doing it twice here and
+      // on `mediachange`
+
+      this.mainSegmentLoader_.pause();
+      this.mainSegmentLoader_.playlist(updatedPlaylist, this.requestOptions_);
+      if (this.waitingForFastQualityPlaylistReceived_) {
+        this.runFastQualitySwitch_();
+      }
+      this.updateDuration(!updatedPlaylist.endList); // If the player isn't paused, ensure that the segment loader is running,
+      // as it is possible that it was temporarily stopped while waiting for
+      // a playlist (e.g., in case the playlist errored and we re-requested it).
+
+      if (!this.tech_.paused()) {
+        this.mainSegmentLoader_.load();
+        if (this.audioSegmentLoader_) {
+          this.audioSegmentLoader_.load();
+        }
+      }
+    }
+    /**
+     * A helper function for triggerring presence usage events once per source
+     *
+     * @private
+     */
+
+    triggerPresenceUsage_(main, media) {
+      const mediaGroups = main.mediaGroups || {};
+      let defaultDemuxed = true;
+      const audioGroupKeys = Object.keys(mediaGroups.AUDIO);
+      for (const mediaGroup in mediaGroups.AUDIO) {
+        for (const label in mediaGroups.AUDIO[mediaGroup]) {
+          const properties = mediaGroups.AUDIO[mediaGroup][label];
+          if (!properties.uri) {
+            defaultDemuxed = false;
+          }
+        }
+      }
+      if (defaultDemuxed) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-demuxed'
+        });
+      }
+      if (Object.keys(mediaGroups.SUBTITLES).length) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-webvtt'
+        });
+      }
+      if (Vhs$1.Playlist.isAes(media)) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-aes'
+        });
+      }
+      if (audioGroupKeys.length && Object.keys(mediaGroups.AUDIO[audioGroupKeys[0]]).length > 1) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-alternate-audio'
+        });
+      }
+      if (this.useCueTags_) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-playlist-cue-tags'
+        });
+      }
+    }
+    shouldSwitchToMedia_(nextPlaylist) {
+      const currentPlaylist = this.mainPlaylistLoader_.media() || this.mainPlaylistLoader_.pendingMedia_;
+      const currentTime = this.tech_.currentTime();
+      const bufferLowWaterLine = this.bufferLowWaterLine();
+      const bufferHighWaterLine = this.bufferHighWaterLine();
+      const buffered = this.tech_.buffered();
+      return shouldSwitchToMedia({
+        buffered,
+        currentTime,
+        currentPlaylist,
+        nextPlaylist,
+        bufferLowWaterLine,
+        bufferHighWaterLine,
+        duration: this.duration(),
+        bufferBasedABR: this.bufferBasedABR,
+        log: this.logger_
+      });
+    }
+    /**
+     * Register event handlers on the segment loaders. A helper function
+     * for construction time.
+     *
+     * @private
+     */
+
+    setupSegmentLoaderListeners_() {
+      this.mainSegmentLoader_.on('bandwidthupdate', () => {
+        // Whether or not buffer based ABR or another ABR is used, on a bandwidth change it's
+        // useful to check to see if a rendition switch should be made.
+        this.checkABR_('bandwidthupdate');
+        this.tech_.trigger('bandwidthupdate');
+      });
+      this.mainSegmentLoader_.on('timeout', () => {
+        if (this.bufferBasedABR) {
+          // If a rendition change is needed, then it would've be done on `bandwidthupdate`.
+          // Here the only consideration is that for buffer based ABR there's no guarantee
+          // of an immediate switch (since the bandwidth is averaged with a timeout
+          // bandwidth value of 1), so force a load on the segment loader to keep it going.
+          this.mainSegmentLoader_.load();
+        }
+      }); // `progress` events are not reliable enough of a bandwidth measure to trigger buffer
+      // based ABR.
+
+      if (!this.bufferBasedABR) {
+        this.mainSegmentLoader_.on('progress', () => {
+          this.trigger('progress');
+        });
+      }
+      this.mainSegmentLoader_.on('error', () => {
+        const error = this.mainSegmentLoader_.error();
+        this.excludePlaylist({
+          playlistToExclude: error.playlist,
+          error
+        });
+      });
+      this.mainSegmentLoader_.on('appenderror', () => {
+        this.error = this.mainSegmentLoader_.error_;
+        this.trigger('error');
+      });
+      this.mainSegmentLoader_.on('syncinfoupdate', () => {
+        this.onSyncInfoUpdate_();
+      });
+      this.mainSegmentLoader_.on('timestampoffset', () => {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-timestamp-offset'
+        });
+      });
+      this.audioSegmentLoader_.on('syncinfoupdate', () => {
+        this.onSyncInfoUpdate_();
+      });
+      this.audioSegmentLoader_.on('appenderror', () => {
+        this.error = this.audioSegmentLoader_.error_;
+        this.trigger('error');
+      });
+      this.mainSegmentLoader_.on('ended', () => {
+        this.logger_('main segment loader ended');
+        this.onEndOfStream();
+      });
+      this.mainSegmentLoader_.on('earlyabort', event => {
+        // never try to early abort with the new ABR algorithm
+        if (this.bufferBasedABR) {
+          return;
+        }
+        this.delegateLoaders_('all', ['abort']);
+        this.excludePlaylist({
+          error: {
+            message: 'Aborted early because there isn\'t enough bandwidth to complete ' + 'the request without rebuffering.'
+          },
+          playlistExclusionDuration: ABORT_EARLY_EXCLUSION_SECONDS
+        });
+      });
+      const updateCodecs = () => {
+        if (!this.sourceUpdater_.hasCreatedSourceBuffers()) {
+          return this.tryToCreateSourceBuffers_();
+        }
+        const codecs = this.getCodecsOrExclude_(); // no codecs means that the playlist was excluded
+
+        if (!codecs) {
+          return;
+        }
+        this.sourceUpdater_.addOrChangeSourceBuffers(codecs);
+      };
+      this.mainSegmentLoader_.on('trackinfo', updateCodecs);
+      this.audioSegmentLoader_.on('trackinfo', updateCodecs);
+      this.mainSegmentLoader_.on('fmp4', () => {
+        if (!this.triggeredFmp4Usage) {
+          this.tech_.trigger({
+            type: 'usage',
+            name: 'vhs-fmp4'
+          });
+          this.triggeredFmp4Usage = true;
+        }
+      });
+      this.audioSegmentLoader_.on('fmp4', () => {
+        if (!this.triggeredFmp4Usage) {
+          this.tech_.trigger({
+            type: 'usage',
+            name: 'vhs-fmp4'
+          });
+          this.triggeredFmp4Usage = true;
+        }
+      });
+      this.audioSegmentLoader_.on('ended', () => {
+        this.logger_('audioSegmentLoader ended');
+        this.onEndOfStream();
+      });
+    }
+    mediaSecondsLoaded_() {
+      return Math.max(this.audioSegmentLoader_.mediaSecondsLoaded + this.mainSegmentLoader_.mediaSecondsLoaded);
+    }
+    /**
+     * Call load on our SegmentLoaders
+     */
+
+    load() {
+      this.mainSegmentLoader_.load();
+      if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+        this.audioSegmentLoader_.load();
+      }
+      if (this.mediaTypes_.SUBTITLES.activePlaylistLoader) {
+        this.subtitleSegmentLoader_.load();
+      }
+    }
+    /**
+     * Re-tune playback quality level for the current player
+     * conditions. This method will perform destructive actions like removing
+     * already buffered content in order to readjust the currently active
+     * playlist quickly. This is good for manual quality changes
+     *
+     * @private
+     */
+
+    fastQualityChange_(media = this.selectPlaylist()) {
+      if (media && media === this.mainPlaylistLoader_.media()) {
+        this.logger_('skipping fastQualityChange because new media is same as old');
+        return;
+      }
+      this.switchMedia_(media, 'fast-quality'); // we would like to avoid race condition when we call fastQuality,
+      // reset everything and start loading segments from prev segments instead of new because new playlist is not received yet
+
+      this.waitingForFastQualityPlaylistReceived_ = true;
+    }
+    runFastQualitySwitch_() {
+      this.waitingForFastQualityPlaylistReceived_ = false; // Delete all buffered data to allow an immediate quality switch, then seek to give
+      // the browser a kick to remove any cached frames from the previous rendtion (.04 seconds
+      // ahead was roughly the minimum that will accomplish this across a variety of content
+      // in IE and Edge, but seeking in place is sufficient on all other browsers)
+      // Edge/IE bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14600375/
+      // Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=651904
+
+      this.mainSegmentLoader_.pause();
+      this.mainSegmentLoader_.resetEverything(() => {
+        this.tech_.setCurrentTime(this.tech_.currentTime());
+      }); // don't need to reset audio as it is reset when media changes
+    }
+    /**
+     * Begin playback.
+     */
+
+    play() {
+      if (this.setupFirstPlay()) {
+        return;
+      }
+      if (this.tech_.ended()) {
+        this.tech_.setCurrentTime(0);
+      }
+      if (this.hasPlayed_) {
+        this.load();
+      }
+      const seekable = this.tech_.seekable(); // if the viewer has paused and we fell out of the live window,
+      // seek forward to the live point
+
+      if (this.tech_.duration() === Infinity) {
+        if (this.tech_.currentTime() < seekable.start(0)) {
+          return this.tech_.setCurrentTime(seekable.end(seekable.length - 1));
+        }
+      }
+    }
+    /**
+     * Seek to the latest media position if this is a live video and the
+     * player and video are loaded and initialized.
+     */
+
+    setupFirstPlay() {
+      const media = this.mainPlaylistLoader_.media(); // Check that everything is ready to begin buffering for the first call to play
+      //  If 1) there is no active media
+      //     2) the player is paused
+      //     3) the first play has already been setup
+      // then exit early
+
+      if (!media || this.tech_.paused() || this.hasPlayed_) {
+        return false;
+      } // when the video is a live stream and/or has a start time
+
+      if (!media.endList || media.start) {
+        const seekable = this.seekable();
+        if (!seekable.length) {
+          // without a seekable range, the player cannot seek to begin buffering at the
+          // live or start point
+          return false;
+        }
+        const seekableEnd = seekable.end(0);
+        let startPoint = seekableEnd;
+        if (media.start) {
+          const offset = media.start.timeOffset;
+          if (offset < 0) {
+            startPoint = Math.max(seekableEnd + offset, seekable.start(0));
+          } else {
+            startPoint = Math.min(seekableEnd, offset);
+          }
+        } // trigger firstplay to inform the source handler to ignore the next seek event
+
+        this.trigger('firstplay'); // seek to the live point
+
+        this.tech_.setCurrentTime(startPoint);
+      }
+      this.hasPlayed_ = true; // we can begin loading now that everything is ready
+
+      this.load();
+      return true;
+    }
+    /**
+     * handle the sourceopen event on the MediaSource
+     *
+     * @private
+     */
+
+    handleSourceOpen_() {
+      // Only attempt to create the source buffer if none already exist.
+      // handleSourceOpen is also called when we are "re-opening" a source buffer
+      // after `endOfStream` has been called (in response to a seek for instance)
+      this.tryToCreateSourceBuffers_(); // if autoplay is enabled, begin playback. This is duplicative of
+      // code in video.js but is required because play() must be invoked
+      // *after* the media source has opened.
+
+      if (this.tech_.autoplay()) {
+        const playPromise = this.tech_.play(); // Catch/silence error when a pause interrupts a play request
+        // on browsers which return a promise
+
+        if (typeof playPromise !== 'undefined' && typeof playPromise.then === 'function') {
+          playPromise.then(null, e => {});
+        }
+      }
+      this.trigger('sourceopen');
+    }
+    /**
+     * handle the sourceended event on the MediaSource
+     *
+     * @private
+     */
+
+    handleSourceEnded_() {
+      if (!this.inbandTextTracks_.metadataTrack_) {
+        return;
+      }
+      const cues = this.inbandTextTracks_.metadataTrack_.cues;
+      if (!cues || !cues.length) {
+        return;
+      }
+      const duration = this.duration();
+      cues[cues.length - 1].endTime = isNaN(duration) || Math.abs(duration) === Infinity ? Number.MAX_VALUE : duration;
+    }
+    /**
+     * handle the durationchange event on the MediaSource
+     *
+     * @private
+     */
+
+    handleDurationChange_() {
+      this.tech_.trigger('durationchange');
+    }
+    /**
+     * Calls endOfStream on the media source when all active stream types have called
+     * endOfStream
+     *
+     * @param {string} streamType
+     *        Stream type of the segment loader that called endOfStream
+     * @private
+     */
+
+    onEndOfStream() {
+      let isEndOfStream = this.mainSegmentLoader_.ended_;
+      if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+        const mainMediaInfo = this.mainSegmentLoader_.getCurrentMediaInfo_(); // if the audio playlist loader exists, then alternate audio is active
+
+        if (!mainMediaInfo || mainMediaInfo.hasVideo) {
+          // if we do not know if the main segment loader contains video yet or if we
+          // definitively know the main segment loader contains video, then we need to wait
+          // for both main and audio segment loaders to call endOfStream
+          isEndOfStream = isEndOfStream && this.audioSegmentLoader_.ended_;
+        } else {
+          // otherwise just rely on the audio loader
+          isEndOfStream = this.audioSegmentLoader_.ended_;
+        }
+      }
+      if (!isEndOfStream) {
+        return;
+      }
+      this.stopABRTimer_();
+      this.sourceUpdater_.endOfStream();
+    }
+    /**
+     * Check if a playlist has stopped being updated
+     *
+     * @param {Object} playlist the media playlist object
+     * @return {boolean} whether the playlist has stopped being updated or not
+     */
+
+    stuckAtPlaylistEnd_(playlist) {
+      const seekable = this.seekable();
+      if (!seekable.length) {
+        // playlist doesn't have enough information to determine whether we are stuck
+        return false;
+      }
+      const expired = this.syncController_.getExpiredTime(playlist, this.duration());
+      if (expired === null) {
+        return false;
+      } // does not use the safe live end to calculate playlist end, since we
+      // don't want to say we are stuck while there is still content
+
+      const absolutePlaylistEnd = Vhs$1.Playlist.playlistEnd(playlist, expired);
+      const currentTime = this.tech_.currentTime();
+      const buffered = this.tech_.buffered();
+      if (!buffered.length) {
+        // return true if the playhead reached the absolute end of the playlist
+        return absolutePlaylistEnd - currentTime <= SAFE_TIME_DELTA;
+      }
+      const bufferedEnd = buffered.end(buffered.length - 1); // return true if there is too little buffer left and buffer has reached absolute
+      // end of playlist
+
+      return bufferedEnd - currentTime <= SAFE_TIME_DELTA && absolutePlaylistEnd - bufferedEnd <= SAFE_TIME_DELTA;
+    }
+    /**
+     * Exclude a playlist for a set amount of time, making it unavailable for selection by
+     * the rendition selection algorithm, then force a new playlist (rendition) selection.
+     *
+     * @param {Object=} playlistToExclude
+     *                  the playlist to exclude, defaults to the currently selected playlist
+     * @param {Object=} error
+     *                  an optional error
+     * @param {number=} playlistExclusionDuration
+     *                  an optional number of seconds to exclude the playlist
+     */
+
+    excludePlaylist({
+      playlistToExclude = this.mainPlaylistLoader_.media(),
+      error = {},
+      playlistExclusionDuration
+    }) {
+      // If the `error` was generated by the playlist loader, it will contain
+      // the playlist we were trying to load (but failed) and that should be
+      // excluded instead of the currently selected playlist which is likely
+      // out-of-date in this scenario
+      playlistToExclude = playlistToExclude || this.mainPlaylistLoader_.media();
+      playlistExclusionDuration = playlistExclusionDuration || error.playlistExclusionDuration || this.playlistExclusionDuration; // If there is no current playlist, then an error occurred while we were
+      // trying to load the main OR while we were disposing of the tech
+
+      if (!playlistToExclude) {
+        this.error = error;
+        if (this.mediaSource.readyState !== 'open') {
+          this.trigger('error');
+        } else {
+          this.sourceUpdater_.endOfStream('network');
+        }
+        return;
+      }
+      playlistToExclude.playlistErrors_++;
+      const playlists = this.mainPlaylistLoader_.main.playlists;
+      const enabledPlaylists = playlists.filter(isEnabled);
+      const isFinalRendition = enabledPlaylists.length === 1 && enabledPlaylists[0] === playlistToExclude; // Don't exclude the only playlist unless it was excluded
+      // forever
+
+      if (playlists.length === 1 && playlistExclusionDuration !== Infinity) {
+        videojs.log.warn(`Problem encountered with playlist ${playlistToExclude.id}. ` + 'Trying again since it is the only playlist.');
+        this.tech_.trigger('retryplaylist'); // if this is a final rendition, we should delay
+
+        return this.mainPlaylistLoader_.load(isFinalRendition);
+      }
+      if (isFinalRendition) {
+        // If we're content steering, try other pathways.
+        if (this.main().contentSteering) {
+          const pathway = this.pathwayAttribute_(playlistToExclude); // Ignore at least 1 steering manifest refresh.
+
+          const reIncludeDelay = this.contentSteeringController_.steeringManifest.ttl * 1000;
+          this.contentSteeringController_.excludePathway(pathway);
+          this.excludeThenChangePathway_();
+          setTimeout(() => {
+            this.contentSteeringController_.addAvailablePathway(pathway);
+          }, reIncludeDelay);
+          return;
+        } // Since we're on the final non-excluded playlist, and we're about to exclude
+        // it, instead of erring the player or retrying this playlist, clear out the current
+        // exclusion list. This allows other playlists to be attempted in case any have been
+        // fixed.
+
+        let reincluded = false;
+        playlists.forEach(playlist => {
+          // skip current playlist which is about to be excluded
+          if (playlist === playlistToExclude) {
+            return;
+          }
+          const excludeUntil = playlist.excludeUntil; // a playlist cannot be reincluded if it wasn't excluded to begin with.
+
+          if (typeof excludeUntil !== 'undefined' && excludeUntil !== Infinity) {
+            reincluded = true;
+            delete playlist.excludeUntil;
+          }
+        });
+        if (reincluded) {
+          videojs.log.warn('Removing other playlists from the exclusion list because the last ' + 'rendition is about to be excluded.'); // Technically we are retrying a playlist, in that we are simply retrying a previous
+          // playlist. This is needed for users relying on the retryplaylist event to catch a
+          // case where the player might be stuck and looping through "dead" playlists.
+
+          this.tech_.trigger('retryplaylist');
+        }
+      } // Exclude this playlist
+
+      let excludeUntil;
+      if (playlistToExclude.playlistErrors_ > this.maxPlaylistRetries) {
+        excludeUntil = Infinity;
+      } else {
+        excludeUntil = Date.now() + playlistExclusionDuration * 1000;
+      }
+      playlistToExclude.excludeUntil = excludeUntil;
+      if (error.reason) {
+        playlistToExclude.lastExcludeReason_ = error.reason;
+      }
+      this.tech_.trigger('excludeplaylist');
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-rendition-excluded'
+      }); // TODO: only load a new playlist if we're excluding the current playlist
+      // If this function was called with a playlist that's not the current active playlist
+      // (e.g., media().id !== playlistToExclude.id),
+      // then a new playlist should not be selected and loaded, as there's nothing wrong with the current playlist.
+
+      const nextPlaylist = this.selectPlaylist();
+      if (!nextPlaylist) {
+        this.error = 'Playback cannot continue. No available working or supported playlists.';
+        this.trigger('error');
+        return;
+      }
+      const logFn = error.internal ? this.logger_ : videojs.log.warn;
+      const errorMessage = error.message ? ' ' + error.message : '';
+      logFn(`${error.internal ? 'Internal problem' : 'Problem'} encountered with playlist ${playlistToExclude.id}.` + `${errorMessage} Switching to playlist ${nextPlaylist.id}.`); // if audio group changed reset audio loaders
+
+      if (nextPlaylist.attributes.AUDIO !== playlistToExclude.attributes.AUDIO) {
+        this.delegateLoaders_('audio', ['abort', 'pause']);
+      } // if subtitle group changed reset subtitle loaders
+
+      if (nextPlaylist.attributes.SUBTITLES !== playlistToExclude.attributes.SUBTITLES) {
+        this.delegateLoaders_('subtitle', ['abort', 'pause']);
+      }
+      this.delegateLoaders_('main', ['abort', 'pause']);
+      const delayDuration = nextPlaylist.targetDuration / 2 * 1000 || 5 * 1000;
+      const shouldDelay = typeof nextPlaylist.lastRequest === 'number' && Date.now() - nextPlaylist.lastRequest <= delayDuration; // delay if it's a final rendition or if the last refresh is sooner than half targetDuration
+
+      return this.switchMedia_(nextPlaylist, 'exclude', isFinalRendition || shouldDelay);
+    }
+    /**
+     * Pause all segment/playlist loaders
+     */
+
+    pauseLoading() {
+      this.delegateLoaders_('all', ['abort', 'pause']);
+      this.stopABRTimer_();
+    }
+    /**
+     * Call a set of functions in order on playlist loaders, segment loaders,
+     * or both types of loaders.
+     *
+     * @param {string} filter
+     *        Filter loaders that should call fnNames using a string. Can be:
+     *        * all - run on all loaders
+     *        * audio - run on all audio loaders
+     *        * subtitle - run on all subtitle loaders
+     *        * main - run on the main loaders
+     *
+     * @param {Array|string} fnNames
+     *        A string or array of function names to call.
+     */
+
+    delegateLoaders_(filter, fnNames) {
+      const loaders = [];
+      const dontFilterPlaylist = filter === 'all';
+      if (dontFilterPlaylist || filter === 'main') {
+        loaders.push(this.mainPlaylistLoader_);
+      }
+      const mediaTypes = [];
+      if (dontFilterPlaylist || filter === 'audio') {
+        mediaTypes.push('AUDIO');
+      }
+      if (dontFilterPlaylist || filter === 'subtitle') {
+        mediaTypes.push('CLOSED-CAPTIONS');
+        mediaTypes.push('SUBTITLES');
+      }
+      mediaTypes.forEach(mediaType => {
+        const loader = this.mediaTypes_[mediaType] && this.mediaTypes_[mediaType].activePlaylistLoader;
+        if (loader) {
+          loaders.push(loader);
+        }
+      });
+      ['main', 'audio', 'subtitle'].forEach(name => {
+        const loader = this[`${name}SegmentLoader_`];
+        if (loader && (filter === name || filter === 'all')) {
+          loaders.push(loader);
+        }
+      });
+      loaders.forEach(loader => fnNames.forEach(fnName => {
+        if (typeof loader[fnName] === 'function') {
+          loader[fnName]();
+        }
+      }));
+    }
+    /**
+     * set the current time on all segment loaders
+     *
+     * @param {TimeRange} currentTime the current time to set
+     * @return {TimeRange} the current time
+     */
+
+    setCurrentTime(currentTime) {
+      const buffered = findRange(this.tech_.buffered(), currentTime);
+      if (!(this.mainPlaylistLoader_ && this.mainPlaylistLoader_.media())) {
+        // return immediately if the metadata is not ready yet
+        return 0;
+      } // it's clearly an edge-case but don't thrown an error if asked to
+      // seek within an empty playlist
+
+      if (!this.mainPlaylistLoader_.media().segments) {
+        return 0;
+      } // if the seek location is already buffered, continue buffering as usual
+
+      if (buffered && buffered.length) {
+        return currentTime;
+      } // cancel outstanding requests so we begin buffering at the new
+      // location
+
+      this.mainSegmentLoader_.pause();
+      this.mainSegmentLoader_.resetEverything();
+      if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+        this.audioSegmentLoader_.pause();
+        this.audioSegmentLoader_.resetEverything();
+      }
+      if (this.mediaTypes_.SUBTITLES.activePlaylistLoader) {
+        this.subtitleSegmentLoader_.pause();
+        this.subtitleSegmentLoader_.resetEverything();
+      } // start segment loader loading in case they are paused
+
+      this.load();
+    }
+    /**
+     * get the current duration
+     *
+     * @return {TimeRange} the duration
+     */
+
+    duration() {
+      if (!this.mainPlaylistLoader_) {
+        return 0;
+      }
+      const media = this.mainPlaylistLoader_.media();
+      if (!media) {
+        // no playlists loaded yet, so can't determine a duration
+        return 0;
+      } // Don't rely on the media source for duration in the case of a live playlist since
+      // setting the native MediaSource's duration to infinity ends up with consequences to
+      // seekable behavior. See https://github.com/w3c/media-source/issues/5 for details.
+      //
+      // This is resolved in the spec by https://github.com/w3c/media-source/pull/92,
+      // however, few browsers have support for setLiveSeekableRange()
+      // https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/setLiveSeekableRange
+      //
+      // Until a time when the duration of the media source can be set to infinity, and a
+      // seekable range specified across browsers, just return Infinity.
+
+      if (!media.endList) {
+        return Infinity;
+      } // Since this is a VOD video, it is safe to rely on the media source's duration (if
+      // available). If it's not available, fall back to a playlist-calculated estimate.
+
+      if (this.mediaSource) {
+        return this.mediaSource.duration;
+      }
+      return Vhs$1.Playlist.duration(media);
+    }
+    /**
+     * check the seekable range
+     *
+     * @return {TimeRange} the seekable range
+     */
+
+    seekable() {
+      return this.seekable_;
+    }
+    onSyncInfoUpdate_() {
+      let audioSeekable; // TODO check for creation of both source buffers before updating seekable
+      //
+      // A fix was made to this function where a check for
+      // this.sourceUpdater_.hasCreatedSourceBuffers
+      // was added to ensure that both source buffers were created before seekable was
+      // updated. However, it originally had a bug where it was checking for a true and
+      // returning early instead of checking for false. Setting it to check for false to
+      // return early though created other issues. A call to play() would check for seekable
+      // end without verifying that a seekable range was present. In addition, even checking
+      // for that didn't solve some issues, as handleFirstPlay is sometimes worked around
+      // due to a media update calling load on the segment loaders, skipping a seek to live,
+      // thereby starting live streams at the beginning of the stream rather than at the end.
+      //
+      // This conditional should be fixed to wait for the creation of two source buffers at
+      // the same time as the other sections of code are fixed to properly seek to live and
+      // not throw an error due to checking for a seekable end when no seekable range exists.
+      //
+      // For now, fall back to the older behavior, with the understanding that the seekable
+      // range may not be completely correct, leading to a suboptimal initial live point.
+
+      if (!this.mainPlaylistLoader_) {
+        return;
+      }
+      let media = this.mainPlaylistLoader_.media();
+      if (!media) {
+        return;
+      }
+      let expired = this.syncController_.getExpiredTime(media, this.duration());
+      if (expired === null) {
+        // not enough information to update seekable
+        return;
+      }
+      const main = this.mainPlaylistLoader_.main;
+      const mainSeekable = Vhs$1.Playlist.seekable(media, expired, Vhs$1.Playlist.liveEdgeDelay(main, media));
+      if (mainSeekable.length === 0) {
+        return;
+      }
+      if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+        media = this.mediaTypes_.AUDIO.activePlaylistLoader.media();
+        expired = this.syncController_.getExpiredTime(media, this.duration());
+        if (expired === null) {
+          return;
+        }
+        audioSeekable = Vhs$1.Playlist.seekable(media, expired, Vhs$1.Playlist.liveEdgeDelay(main, media));
+        if (audioSeekable.length === 0) {
+          return;
+        }
+      }
+      let oldEnd;
+      let oldStart;
+      if (this.seekable_ && this.seekable_.length) {
+        oldEnd = this.seekable_.end(0);
+        oldStart = this.seekable_.start(0);
+      }
+      if (!audioSeekable) {
+        // seekable has been calculated based on buffering video data so it
+        // can be returned directly
+        this.seekable_ = mainSeekable;
+      } else if (audioSeekable.start(0) > mainSeekable.end(0) || mainSeekable.start(0) > audioSeekable.end(0)) {
+        // seekables are pretty far off, rely on main
+        this.seekable_ = mainSeekable;
+      } else {
+        this.seekable_ = createTimeRanges([[audioSeekable.start(0) > mainSeekable.start(0) ? audioSeekable.start(0) : mainSeekable.start(0), audioSeekable.end(0) < mainSeekable.end(0) ? audioSeekable.end(0) : mainSeekable.end(0)]]);
+      } // seekable is the same as last time
+
+      if (this.seekable_ && this.seekable_.length) {
+        if (this.seekable_.end(0) === oldEnd && this.seekable_.start(0) === oldStart) {
+          return;
+        }
+      }
+      this.logger_(`seekable updated [${printableRange(this.seekable_)}]`);
+      this.tech_.trigger('seekablechanged');
+    }
+    /**
+     * Update the player duration
+     */
+
+    updateDuration(isLive) {
+      if (this.updateDuration_) {
+        this.mediaSource.removeEventListener('sourceopen', this.updateDuration_);
+        this.updateDuration_ = null;
+      }
+      if (this.mediaSource.readyState !== 'open') {
+        this.updateDuration_ = this.updateDuration.bind(this, isLive);
+        this.mediaSource.addEventListener('sourceopen', this.updateDuration_);
+        return;
+      }
+      if (isLive) {
+        const seekable = this.seekable();
+        if (!seekable.length) {
+          return;
+        } // Even in the case of a live playlist, the native MediaSource's duration should not
+        // be set to Infinity (even though this would be expected for a live playlist), since
+        // setting the native MediaSource's duration to infinity ends up with consequences to
+        // seekable behavior. See https://github.com/w3c/media-source/issues/5 for details.
+        //
+        // This is resolved in the spec by https://github.com/w3c/media-source/pull/92,
+        // however, few browsers have support for setLiveSeekableRange()
+        // https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/setLiveSeekableRange
+        //
+        // Until a time when the duration of the media source can be set to infinity, and a
+        // seekable range specified across browsers, the duration should be greater than or
+        // equal to the last possible seekable value.
+        // MediaSource duration starts as NaN
+        // It is possible (and probable) that this case will never be reached for many
+        // sources, since the MediaSource reports duration as the highest value without
+        // accounting for timestamp offset. For example, if the timestamp offset is -100 and
+        // we buffered times 0 to 100 with real times of 100 to 200, even though current
+        // time will be between 0 and 100, the native media source may report the duration
+        // as 200. However, since we report duration separate from the media source (as
+        // Infinity), and as long as the native media source duration value is greater than
+        // our reported seekable range, seeks will work as expected. The large number as
+        // duration for live is actually a strategy used by some players to work around the
+        // issue of live seekable ranges cited above.
+
+        if (isNaN(this.mediaSource.duration) || this.mediaSource.duration < seekable.end(seekable.length - 1)) {
+          this.sourceUpdater_.setDuration(seekable.end(seekable.length - 1));
+        }
+        return;
+      }
+      const buffered = this.tech_.buffered();
+      let duration = Vhs$1.Playlist.duration(this.mainPlaylistLoader_.media());
+      if (buffered.length > 0) {
+        duration = Math.max(duration, buffered.end(buffered.length - 1));
+      }
+      if (this.mediaSource.duration !== duration) {
+        this.sourceUpdater_.setDuration(duration);
+      }
+    }
+    /**
+     * dispose of the PlaylistController and everything
+     * that it controls
+     */
+
+    dispose() {
+      this.trigger('dispose');
+      this.decrypter_.terminate();
+      this.mainPlaylistLoader_.dispose();
+      this.mainSegmentLoader_.dispose();
+      this.contentSteeringController_.dispose();
+      this.keyStatusMap_.clear();
+      if (this.loadOnPlay_) {
+        this.tech_.off('play', this.loadOnPlay_);
+      }
+      ['AUDIO', 'SUBTITLES'].forEach(type => {
+        const groups = this.mediaTypes_[type].groups;
+        for (const id in groups) {
+          groups[id].forEach(group => {
+            if (group.playlistLoader) {
+              group.playlistLoader.dispose();
+            }
+          });
+        }
+      });
+      this.audioSegmentLoader_.dispose();
+      this.subtitleSegmentLoader_.dispose();
+      this.sourceUpdater_.dispose();
+      this.timelineChangeController_.dispose();
+      this.stopABRTimer_();
+      if (this.updateDuration_) {
+        this.mediaSource.removeEventListener('sourceopen', this.updateDuration_);
+      }
+      this.mediaSource.removeEventListener('durationchange', this.handleDurationChange_); // load the media source into the player
+
+      this.mediaSource.removeEventListener('sourceopen', this.handleSourceOpen_);
+      this.mediaSource.removeEventListener('sourceended', this.handleSourceEnded_);
+      this.off();
+    }
+    /**
+     * return the main playlist object if we have one
+     *
+     * @return {Object} the main playlist object that we parsed
+     */
+
+    main() {
+      return this.mainPlaylistLoader_.main;
+    }
+    /**
+     * return the currently selected playlist
+     *
+     * @return {Object} the currently selected playlist object that we parsed
+     */
+
+    media() {
+      // playlist loader will not return media if it has not been fully loaded
+      return this.mainPlaylistLoader_.media() || this.initialMedia_;
+    }
+    areMediaTypesKnown_() {
+      const usingAudioLoader = !!this.mediaTypes_.AUDIO.activePlaylistLoader;
+      const hasMainMediaInfo = !!this.mainSegmentLoader_.getCurrentMediaInfo_(); // if we are not using an audio loader, then we have audio media info
+      // otherwise check on the segment loader.
+
+      const hasAudioMediaInfo = !usingAudioLoader ? true : !!this.audioSegmentLoader_.getCurrentMediaInfo_(); // one or both loaders has not loaded sufficently to get codecs
+
+      if (!hasMainMediaInfo || !hasAudioMediaInfo) {
+        return false;
+      }
+      return true;
+    }
+    getCodecsOrExclude_() {
+      const media = {
+        main: this.mainSegmentLoader_.getCurrentMediaInfo_() || {},
+        audio: this.audioSegmentLoader_.getCurrentMediaInfo_() || {}
+      };
+      const playlist = this.mainSegmentLoader_.getPendingSegmentPlaylist() || this.media(); // set "main" media equal to video
+
+      media.video = media.main;
+      const playlistCodecs = codecsForPlaylist(this.main(), playlist);
+      const codecs = {};
+      const usingAudioLoader = !!this.mediaTypes_.AUDIO.activePlaylistLoader;
+      if (media.main.hasVideo) {
+        codecs.video = playlistCodecs.video || media.main.videoCodec || DEFAULT_VIDEO_CODEC;
+      }
+      if (media.main.isMuxed) {
+        codecs.video += `,${playlistCodecs.audio || media.main.audioCodec || DEFAULT_AUDIO_CODEC}`;
+      }
+      if (media.main.hasAudio && !media.main.isMuxed || media.audio.hasAudio || usingAudioLoader) {
+        codecs.audio = playlistCodecs.audio || media.main.audioCodec || media.audio.audioCodec || DEFAULT_AUDIO_CODEC; // set audio isFmp4 so we use the correct "supports" function below
+
+        media.audio.isFmp4 = media.main.hasAudio && !media.main.isMuxed ? media.main.isFmp4 : media.audio.isFmp4;
+      } // no codecs, no playback.
+
+      if (!codecs.audio && !codecs.video) {
+        this.excludePlaylist({
+          playlistToExclude: playlist,
+          error: {
+            message: 'Could not determine codecs for playlist.'
+          },
+          playlistExclusionDuration: Infinity
+        });
+        return;
+      } // fmp4 relies on browser support, while ts relies on muxer support
+
+      const supportFunction = (isFmp4, codec) => isFmp4 ? browserSupportsCodec(codec) : muxerSupportsCodec(codec);
+      const unsupportedCodecs = {};
+      let unsupportedAudio;
+      ['video', 'audio'].forEach(function (type) {
+        if (codecs.hasOwnProperty(type) && !supportFunction(media[type].isFmp4, codecs[type])) {
+          const supporter = media[type].isFmp4 ? 'browser' : 'muxer';
+          unsupportedCodecs[supporter] = unsupportedCodecs[supporter] || [];
+          unsupportedCodecs[supporter].push(codecs[type]);
+          if (type === 'audio') {
+            unsupportedAudio = supporter;
+          }
+        }
+      });
+      if (usingAudioLoader && unsupportedAudio && playlist.attributes.AUDIO) {
+        const audioGroup = playlist.attributes.AUDIO;
+        this.main().playlists.forEach(variant => {
+          const variantAudioGroup = variant.attributes && variant.attributes.AUDIO;
+          if (variantAudioGroup === audioGroup && variant !== playlist) {
+            variant.excludeUntil = Infinity;
+          }
+        });
+        this.logger_(`excluding audio group ${audioGroup} as ${unsupportedAudio} does not support codec(s): "${codecs.audio}"`);
+      } // if we have any unsupported codecs exclude this playlist.
+
+      if (Object.keys(unsupportedCodecs).length) {
+        const message = Object.keys(unsupportedCodecs).reduce((acc, supporter) => {
+          if (acc) {
+            acc += ', ';
+          }
+          acc += `${supporter} does not support codec(s): "${unsupportedCodecs[supporter].join(',')}"`;
+          return acc;
+        }, '') + '.';
+        this.excludePlaylist({
+          playlistToExclude: playlist,
+          error: {
+            internal: true,
+            message
+          },
+          playlistExclusionDuration: Infinity
+        });
+        return;
+      } // check if codec switching is happening
+
+      if (this.sourceUpdater_.hasCreatedSourceBuffers() && !this.sourceUpdater_.canChangeType()) {
+        const switchMessages = [];
+        ['video', 'audio'].forEach(type => {
+          const newCodec = (parseCodecs(this.sourceUpdater_.codecs[type] || '')[0] || {}).type;
+          const oldCodec = (parseCodecs(codecs[type] || '')[0] || {}).type;
+          if (newCodec && oldCodec && newCodec.toLowerCase() !== oldCodec.toLowerCase()) {
+            switchMessages.push(`"${this.sourceUpdater_.codecs[type]}" -> "${codecs[type]}"`);
+          }
+        });
+        if (switchMessages.length) {
+          this.excludePlaylist({
+            playlistToExclude: playlist,
+            error: {
+              message: `Codec switching not supported: ${switchMessages.join(', ')}.`,
+              internal: true
+            },
+            playlistExclusionDuration: Infinity
+          });
+          return;
+        }
+      } // TODO: when using the muxer shouldn't we just return
+      // the codecs that the muxer outputs?
+
+      return codecs;
+    }
+    /**
+     * Create source buffers and exlude any incompatible renditions.
+     *
+     * @private
+     */
+
+    tryToCreateSourceBuffers_() {
+      // media source is not ready yet or sourceBuffers are already
+      // created.
+      if (this.mediaSource.readyState !== 'open' || this.sourceUpdater_.hasCreatedSourceBuffers()) {
+        return;
+      }
+      if (!this.areMediaTypesKnown_()) {
+        return;
+      }
+      const codecs = this.getCodecsOrExclude_(); // no codecs means that the playlist was excluded
+
+      if (!codecs) {
+        return;
+      }
+      this.sourceUpdater_.createSourceBuffers(codecs);
+      const codecString = [codecs.video, codecs.audio].filter(Boolean).join(',');
+      this.excludeIncompatibleVariants_(codecString);
+    }
+    /**
+     * Excludes playlists with codecs that are unsupported by the muxer and browser.
+     */
+
+    excludeUnsupportedVariants_() {
+      const playlists = this.main().playlists;
+      const ids = []; // TODO: why don't we have a property to loop through all
+      // playlist? Why did we ever mix indexes and keys?
+
+      Object.keys(playlists).forEach(key => {
+        const variant = playlists[key]; // check if we already processed this playlist.
+
+        if (ids.indexOf(variant.id) !== -1) {
+          return;
+        }
+        ids.push(variant.id);
+        const codecs = codecsForPlaylist(this.main, variant);
+        const unsupported = [];
+        if (codecs.audio && !muxerSupportsCodec(codecs.audio) && !browserSupportsCodec(codecs.audio)) {
+          unsupported.push(`audio codec ${codecs.audio}`);
+        }
+        if (codecs.video && !muxerSupportsCodec(codecs.video) && !browserSupportsCodec(codecs.video)) {
+          unsupported.push(`video codec ${codecs.video}`);
+        }
+        if (codecs.text && codecs.text === 'stpp.ttml.im1t') {
+          unsupported.push(`text codec ${codecs.text}`);
+        }
+        if (unsupported.length) {
+          variant.excludeUntil = Infinity;
+          this.logger_(`excluding ${variant.id} for unsupported: ${unsupported.join(', ')}`);
+        }
+      });
+    }
+    /**
+     * Exclude playlists that are known to be codec or
+     * stream-incompatible with the SourceBuffer configuration. For
+     * instance, Media Source Extensions would cause the video element to
+     * stall waiting for video data if you switched from a variant with
+     * video and audio to an audio-only one.
+     *
+     * @param {Object} media a media playlist compatible with the current
+     * set of SourceBuffers. Variants in the current main playlist that
+     * do not appear to have compatible codec or stream configurations
+     * will be excluded from the default playlist selection algorithm
+     * indefinitely.
+     * @private
+     */
+
+    excludeIncompatibleVariants_(codecString) {
+      const ids = [];
+      const playlists = this.main().playlists;
+      const codecs = unwrapCodecList(parseCodecs(codecString));
+      const codecCount_ = codecCount(codecs);
+      const videoDetails = codecs.video && parseCodecs(codecs.video)[0] || null;
+      const audioDetails = codecs.audio && parseCodecs(codecs.audio)[0] || null;
+      Object.keys(playlists).forEach(key => {
+        const variant = playlists[key]; // check if we already processed this playlist.
+        // or it if it is already excluded forever.
+
+        if (ids.indexOf(variant.id) !== -1 || variant.excludeUntil === Infinity) {
+          return;
+        }
+        ids.push(variant.id);
+        const exclusionReasons = []; // get codecs from the playlist for this variant
+
+        const variantCodecs = codecsForPlaylist(this.mainPlaylistLoader_.main, variant);
+        const variantCodecCount = codecCount(variantCodecs); // if no codecs are listed, we cannot determine that this
+        // variant is incompatible. Wait for mux.js to probe
+
+        if (!variantCodecs.audio && !variantCodecs.video) {
+          return;
+        } // TODO: we can support this by removing the
+        // old media source and creating a new one, but it will take some work.
+        // The number of streams cannot change
+
+        if (variantCodecCount !== codecCount_) {
+          exclusionReasons.push(`codec count "${variantCodecCount}" !== "${codecCount_}"`);
+        } // only exclude playlists by codec change, if codecs cannot switch
+        // during playback.
+
+        if (!this.sourceUpdater_.canChangeType()) {
+          const variantVideoDetails = variantCodecs.video && parseCodecs(variantCodecs.video)[0] || null;
+          const variantAudioDetails = variantCodecs.audio && parseCodecs(variantCodecs.audio)[0] || null; // the video codec cannot change
+
+          if (variantVideoDetails && videoDetails && variantVideoDetails.type.toLowerCase() !== videoDetails.type.toLowerCase()) {
+            exclusionReasons.push(`video codec "${variantVideoDetails.type}" !== "${videoDetails.type}"`);
+          } // the audio codec cannot change
+
+          if (variantAudioDetails && audioDetails && variantAudioDetails.type.toLowerCase() !== audioDetails.type.toLowerCase()) {
+            exclusionReasons.push(`audio codec "${variantAudioDetails.type}" !== "${audioDetails.type}"`);
+          }
+        }
+        if (exclusionReasons.length) {
+          variant.excludeUntil = Infinity;
+          this.logger_(`excluding ${variant.id}: ${exclusionReasons.join(' && ')}`);
+        }
+      });
+    }
+    updateAdCues_(media) {
+      let offset = 0;
+      const seekable = this.seekable();
+      if (seekable.length) {
+        offset = seekable.start(0);
+      }
+      updateAdCues(media, this.cueTagsTrack_, offset);
+    }
+    /**
+     * Calculates the desired forward buffer length based on current time
+     *
+     * @return {number} Desired forward buffer length in seconds
+     */
+
+    goalBufferLength() {
+      const currentTime = this.tech_.currentTime();
+      const initial = Config.GOAL_BUFFER_LENGTH;
+      const rate = Config.GOAL_BUFFER_LENGTH_RATE;
+      const max = Math.max(initial, Config.MAX_GOAL_BUFFER_LENGTH);
+      return Math.min(initial + currentTime * rate, max);
+    }
+    /**
+     * Calculates the desired buffer low water line based on current time
+     *
+     * @return {number} Desired buffer low water line in seconds
+     */
+
+    bufferLowWaterLine() {
+      const currentTime = this.tech_.currentTime();
+      const initial = Config.BUFFER_LOW_WATER_LINE;
+      const rate = Config.BUFFER_LOW_WATER_LINE_RATE;
+      const max = Math.max(initial, Config.MAX_BUFFER_LOW_WATER_LINE);
+      const newMax = Math.max(initial, Config.EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE);
+      return Math.min(initial + currentTime * rate, this.bufferBasedABR ? newMax : max);
+    }
+    bufferHighWaterLine() {
+      return Config.BUFFER_HIGH_WATER_LINE;
+    }
+    addDateRangesToTextTrack_(dateRanges) {
+      createMetadataTrackIfNotExists(this.inbandTextTracks_, 'com.apple.streaming', this.tech_);
+      addDateRangeMetadata({
+        inbandTextTracks: this.inbandTextTracks_,
+        dateRanges
+      });
+    }
+    addMetadataToTextTrack(dispatchType, metadataArray, videoDuration) {
+      const timestampOffset = this.sourceUpdater_.videoBuffer ? this.sourceUpdater_.videoTimestampOffset() : this.sourceUpdater_.audioTimestampOffset(); // There's potentially an issue where we could double add metadata if there's a muxed
+      // audio/video source with a metadata track, and an alt audio with a metadata track.
+      // However, this probably won't happen, and if it does it can be handled then.
+
+      createMetadataTrackIfNotExists(this.inbandTextTracks_, dispatchType, this.tech_);
+      addMetadata({
+        inbandTextTracks: this.inbandTextTracks_,
+        metadataArray,
+        timestampOffset,
+        videoDuration
+      });
+    }
+    /**
+     * Utility for getting the pathway or service location from an HLS or DASH playlist.
+     *
+     * @param {Object} playlist for getting pathway from.
+     * @return the pathway attribute of a playlist
+     */
+
+    pathwayAttribute_(playlist) {
+      return playlist.attributes['PATHWAY-ID'] || playlist.attributes.serviceLocation;
+    }
+    /**
+     * Initialize available pathways and apply the tag properties.
+     */
+
+    initContentSteeringController_() {
+      const main = this.main();
+      if (!main.contentSteering) {
+        return;
+      }
+      for (const playlist of main.playlists) {
+        this.contentSteeringController_.addAvailablePathway(this.pathwayAttribute_(playlist));
+      }
+      this.contentSteeringController_.assignTagProperties(main.uri, main.contentSteering); // request the steering manifest immediately if queryBeforeStart is set.
+
+      if (this.contentSteeringController_.queryBeforeStart) {
+        // When queryBeforeStart is true, initial request should omit steering parameters.
+        this.contentSteeringController_.requestSteeringManifest(true);
+        return;
+      } // otherwise start content steering after playback starts
+
+      this.tech_.one('canplay', () => {
+        this.contentSteeringController_.requestSteeringManifest();
+      });
+    }
+    /**
+     * Reset the content steering controller and re-init.
+     */
+
+    resetContentSteeringController_() {
+      this.contentSteeringController_.clearAvailablePathways();
+      this.contentSteeringController_.dispose();
+      this.initContentSteeringController_();
+    }
+    /**
+     * Attaches the listeners for content steering.
+     */
+
+    attachContentSteeringListeners_() {
+      this.contentSteeringController_.on('content-steering', this.excludeThenChangePathway_.bind(this));
+      if (this.sourceType_ === 'dash') {
+        this.mainPlaylistLoader_.on('loadedplaylist', () => {
+          const main = this.main(); // check if steering tag or pathways changed.
+
+          const didDashTagChange = this.contentSteeringController_.didDASHTagChange(main.uri, main.contentSteering);
+          const didPathwaysChange = () => {
+            const availablePathways = this.contentSteeringController_.getAvailablePathways();
+            const newPathways = [];
+            for (const playlist of main.playlists) {
+              const serviceLocation = playlist.attributes.serviceLocation;
+              if (serviceLocation) {
+                newPathways.push(serviceLocation);
+                if (!availablePathways.has(serviceLocation)) {
+                  return true;
+                }
+              }
+            } // If we have no new serviceLocations and previously had availablePathways
+
+            if (!newPathways.length && availablePathways.size) {
+              return true;
+            }
+            return false;
+          };
+          if (didDashTagChange || didPathwaysChange()) {
+            this.resetContentSteeringController_();
+          }
+        });
+      }
+    }
+    /**
+     * Simple exclude and change playlist logic for content steering.
+     */
+
+    excludeThenChangePathway_() {
+      const currentPathway = this.contentSteeringController_.getPathway();
+      if (!currentPathway) {
+        return;
+      }
+      this.handlePathwayClones_();
+      const main = this.main();
+      const playlists = main.playlists;
+      const ids = new Set();
+      let didEnablePlaylists = false;
+      Object.keys(playlists).forEach(key => {
+        const variant = playlists[key];
+        const pathwayId = this.pathwayAttribute_(variant);
+        const differentPathwayId = pathwayId && currentPathway !== pathwayId;
+        const steeringExclusion = variant.excludeUntil === Infinity && variant.lastExcludeReason_ === 'content-steering';
+        if (steeringExclusion && !differentPathwayId) {
+          delete variant.excludeUntil;
+          delete variant.lastExcludeReason_;
+          didEnablePlaylists = true;
+        }
+        const noExcludeUntil = !variant.excludeUntil && variant.excludeUntil !== Infinity;
+        const shouldExclude = !ids.has(variant.id) && differentPathwayId && noExcludeUntil;
+        if (!shouldExclude) {
+          return;
+        }
+        ids.add(variant.id);
+        variant.excludeUntil = Infinity;
+        variant.lastExcludeReason_ = 'content-steering'; // TODO: kind of spammy, maybe move this.
+
+        this.logger_(`excluding ${variant.id} for ${variant.lastExcludeReason_}`);
+      });
+      if (this.contentSteeringController_.manifestType_ === 'DASH') {
+        Object.keys(this.mediaTypes_).forEach(key => {
+          const type = this.mediaTypes_[key];
+          if (type.activePlaylistLoader) {
+            const currentPlaylist = type.activePlaylistLoader.media_; // Check if the current media playlist matches the current CDN
+
+            if (currentPlaylist && currentPlaylist.attributes.serviceLocation !== currentPathway) {
+              didEnablePlaylists = true;
+            }
+          }
+        });
+      }
+      if (didEnablePlaylists) {
+        this.changeSegmentPathway_();
+      }
+    }
+    /**
+     * Add, update, or delete playlists and media groups for
+     * the pathway clones for HLS Content Steering.
+     *
+     * See https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/
+     *
+     * NOTE: Pathway cloning does not currently support the `PER_VARIANT_URIS` and
+     * `PER_RENDITION_URIS` as we do not handle `STABLE-VARIANT-ID` or
+     * `STABLE-RENDITION-ID` values.
+     */
+
+    handlePathwayClones_() {
+      const main = this.main();
+      const playlists = main.playlists;
+      const currentPathwayClones = this.contentSteeringController_.currentPathwayClones;
+      const nextPathwayClones = this.contentSteeringController_.nextPathwayClones;
+      const hasClones = currentPathwayClones && currentPathwayClones.size || nextPathwayClones && nextPathwayClones.size;
+      if (!hasClones) {
+        return;
+      }
+      for (const [id, clone] of currentPathwayClones.entries()) {
+        const newClone = nextPathwayClones.get(id); // Delete the old pathway clone.
+
+        if (!newClone) {
+          this.mainPlaylistLoader_.updateOrDeleteClone(clone);
+          this.contentSteeringController_.excludePathway(id);
+        }
+      }
+      for (const [id, clone] of nextPathwayClones.entries()) {
+        const oldClone = currentPathwayClones.get(id); // Create a new pathway if it is a new pathway clone object.
+
+        if (!oldClone) {
+          const playlistsToClone = playlists.filter(p => {
+            return p.attributes['PATHWAY-ID'] === clone['BASE-ID'];
+          });
+          playlistsToClone.forEach(p => {
+            this.mainPlaylistLoader_.addClonePathway(clone, p);
+          });
+          this.contentSteeringController_.addAvailablePathway(id);
+          continue;
+        } // There have not been changes to the pathway clone object, so skip.
+
+        if (this.equalPathwayClones_(oldClone, clone)) {
+          continue;
+        } // Update a preexisting cloned pathway.
+        // True is set for the update flag.
+
+        this.mainPlaylistLoader_.updateOrDeleteClone(clone, true);
+        this.contentSteeringController_.addAvailablePathway(id);
+      } // Deep copy contents of next to current pathways.
+
+      this.contentSteeringController_.currentPathwayClones = new Map(JSON.parse(JSON.stringify([...nextPathwayClones])));
+    }
+    /**
+     * Determines whether two pathway clone objects are equivalent.
+     *
+     * @param {Object} a The first pathway clone object.
+     * @param {Object} b The second pathway clone object.
+     * @return {boolean} True if the pathway clone objects are equal, false otherwise.
+     */
+
+    equalPathwayClones_(a, b) {
+      if (a['BASE-ID'] !== b['BASE-ID'] || a.ID !== b.ID || a['URI-REPLACEMENT'].HOST !== b['URI-REPLACEMENT'].HOST) {
+        return false;
+      }
+      const aParams = a['URI-REPLACEMENT'].PARAMS;
+      const bParams = b['URI-REPLACEMENT'].PARAMS; // We need to iterate through both lists of params because one could be
+      // missing a parameter that the other has.
+
+      for (const p in aParams) {
+        if (aParams[p] !== bParams[p]) {
+          return false;
+        }
+      }
+      for (const p in bParams) {
+        if (aParams[p] !== bParams[p]) {
+          return false;
+        }
+      }
+      return true;
+    }
+    /**
+     * Changes the current playlists for audio, video and subtitles after a new pathway
+     * is chosen from content steering.
+     */
+
+    changeSegmentPathway_() {
+      const nextPlaylist = this.selectPlaylist();
+      this.pauseLoading(); // Switch audio and text track playlists if necessary in DASH
+
+      if (this.contentSteeringController_.manifestType_ === 'DASH') {
+        this.switchMediaForDASHContentSteering_();
+      }
+      this.switchMedia_(nextPlaylist, 'content-steering');
+    }
+    /**
+     * Iterates through playlists and check their keyId set and compare with the
+     * keyStatusMap, only enable playlists that have a usable key. If the playlist
+     * has no keyId leave it enabled by default.
+     */
+
+    excludeNonUsablePlaylistsByKeyId_() {
+      if (!this.mainPlaylistLoader_ || !this.mainPlaylistLoader_.main) {
+        return;
+      }
+      let nonUsableKeyStatusCount = 0;
+      const NON_USABLE = 'non-usable';
+      this.mainPlaylistLoader_.main.playlists.forEach(playlist => {
+        const keyIdSet = this.mainPlaylistLoader_.getKeyIdSet(playlist); // If the playlist doesn't have keyIDs lets not exclude it.
+
+        if (!keyIdSet || !keyIdSet.size) {
+          return;
+        }
+        keyIdSet.forEach(key => {
+          const USABLE = 'usable';
+          const hasUsableKeyStatus = this.keyStatusMap_.has(key) && this.keyStatusMap_.get(key) === USABLE;
+          const nonUsableExclusion = playlist.lastExcludeReason_ === NON_USABLE && playlist.excludeUntil === Infinity;
+          if (!hasUsableKeyStatus) {
+            // Only exclude playlists that haven't already been excluded as non-usable.
+            if (playlist.excludeUntil !== Infinity && playlist.lastExcludeReason_ !== NON_USABLE) {
+              playlist.excludeUntil = Infinity;
+              playlist.lastExcludeReason_ = NON_USABLE;
+              this.logger_(`excluding playlist ${playlist.id} because the key ID ${key} doesn't exist in the keyStatusMap or is not ${USABLE}`);
+            } // count all nonUsableKeyStatus
+
+            nonUsableKeyStatusCount++;
+          } else if (hasUsableKeyStatus && nonUsableExclusion) {
+            delete playlist.excludeUntil;
+            delete playlist.lastExcludeReason_;
+            this.logger_(`enabling playlist ${playlist.id} because key ID ${key} is ${USABLE}`);
+          }
+        });
+      }); // If for whatever reason every playlist has a non usable key status. Lets try re-including the SD renditions as a failsafe.
+
+      if (nonUsableKeyStatusCount >= this.mainPlaylistLoader_.main.playlists.length) {
+        this.mainPlaylistLoader_.main.playlists.forEach(playlist => {
+          const isNonHD = playlist && playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.height < 720;
+          const excludedForNonUsableKey = playlist.excludeUntil === Infinity && playlist.lastExcludeReason_ === NON_USABLE;
+          if (isNonHD && excludedForNonUsableKey) {
+            // Only delete the excludeUntil so we don't try and re-exclude these playlists.
+            delete playlist.excludeUntil;
+            videojs.log.warn(`enabling non-HD playlist ${playlist.id} because all playlists were excluded due to ${NON_USABLE} key IDs`);
+          }
+        });
+      }
+    }
+    /**
+     * Adds a keystatus to the keystatus map, tries to convert to string if necessary.
+     *
+     * @param {any} keyId the keyId to add a status for
+     * @param {string} status the status of the keyId
+     */
+
+    addKeyStatus_(keyId, status) {
+      const isString = typeof keyId === 'string';
+      const keyIdHexString = isString ? keyId : bufferToHexString(keyId);
+      const formattedKeyIdString = keyIdHexString.slice(0, 32).toLowerCase();
+      this.logger_(`KeyStatus '${status}' with key ID ${formattedKeyIdString} added to the keyStatusMap`);
+      this.keyStatusMap_.set(formattedKeyIdString, status);
+    }
+    /**
+     * Utility function for adding key status to the keyStatusMap and filtering usable encrypted playlists.
+     *
+     * @param {any} keyId the keyId from the keystatuschange event
+     * @param {string} status the key status string
+     */
+
+    updatePlaylistByKeyStatus(keyId, status) {
+      this.addKeyStatus_(keyId, status);
+      if (!this.waitingForFastQualityPlaylistReceived_) {
+        this.excludeNonUsableThenChangePlaylist_();
+      } // Listen to loadedplaylist with a single listener and check for new contentProtection elements when a playlist is updated.
+
+      this.mainPlaylistLoader_.off('loadedplaylist', this.excludeNonUsableThenChangePlaylist_.bind(this));
+      this.mainPlaylistLoader_.on('loadedplaylist', this.excludeNonUsableThenChangePlaylist_.bind(this));
+    }
+    excludeNonUsableThenChangePlaylist_() {
+      this.excludeNonUsablePlaylistsByKeyId_();
+      this.fastQualityChange_();
+    }
+  }
+
+  /**
+   * Returns a function that acts as the Enable/disable playlist function.
+   *
+   * @param {PlaylistLoader} loader - The main playlist loader
+   * @param {string} playlistID - id of the playlist
+   * @param {Function} changePlaylistFn - A function to be called after a
+   * playlist's enabled-state has been changed. Will NOT be called if a
+   * playlist's enabled-state is unchanged
+   * @param {boolean=} enable - Value to set the playlist enabled-state to
+   * or if undefined returns the current enabled-state for the playlist
+   * @return {Function} Function for setting/getting enabled
+   */
+
+  const enableFunction = (loader, playlistID, changePlaylistFn) => enable => {
+    const playlist = loader.main.playlists[playlistID];
+    const incompatible = isIncompatible(playlist);
+    const currentlyEnabled = isEnabled(playlist);
+    if (typeof enable === 'undefined') {
+      return currentlyEnabled;
+    }
+    if (enable) {
+      delete playlist.disabled;
+    } else {
+      playlist.disabled = true;
+    }
+    if (enable !== currentlyEnabled && !incompatible) {
+      // Ensure the outside world knows about our changes
+      changePlaylistFn(playlist);
+      if (enable) {
+        loader.trigger('renditionenabled');
+      } else {
+        loader.trigger('renditiondisabled');
+      }
+    }
+    return enable;
+  };
+  /**
+   * The representation object encapsulates the publicly visible information
+   * in a media playlist along with a setter/getter-type function (enabled)
+   * for changing the enabled-state of a particular playlist entry
+   *
+   * @class Representation
+   */
+
+  class Representation {
+    constructor(vhsHandler, playlist, id) {
+      const {
+        playlistController_: pc
+      } = vhsHandler;
+      const qualityChangeFunction = pc.fastQualityChange_.bind(pc); // some playlist attributes are optional
+
+      if (playlist.attributes) {
+        const resolution = playlist.attributes.RESOLUTION;
+        this.width = resolution && resolution.width;
+        this.height = resolution && resolution.height;
+        this.bandwidth = playlist.attributes.BANDWIDTH;
+        this.frameRate = playlist.attributes['FRAME-RATE'];
+      }
+      this.codecs = codecsForPlaylist(pc.main(), playlist);
+      this.playlist = playlist; // The id is simply the ordinality of the media playlist
+      // within the main playlist
+
+      this.id = id; // Partially-apply the enableFunction to create a playlist-
+      // specific variant
+
+      this.enabled = enableFunction(vhsHandler.playlists, playlist.id, qualityChangeFunction);
+    }
+  }
+  /**
+   * A mixin function that adds the `representations` api to an instance
+   * of the VhsHandler class
+   *
+   * @param {VhsHandler} vhsHandler - An instance of VhsHandler to add the
+   * representation API into
+   */
+
+  const renditionSelectionMixin = function (vhsHandler) {
+    // Add a single API-specific function to the VhsHandler instance
+    vhsHandler.representations = () => {
+      const main = vhsHandler.playlistController_.main();
+      const playlists = isAudioOnly(main) ? vhsHandler.playlistController_.getAudioTrackPlaylists_() : main.playlists;
+      if (!playlists) {
+        return [];
+      }
+      return playlists.filter(media => !isIncompatible(media)).map((e, i) => new Representation(vhsHandler, e, e.id));
+    };
+  };
+
+  /**
+   * @file playback-watcher.js
+   *
+   * Playback starts, and now my watch begins. It shall not end until my death. I shall
+   * take no wait, hold no uncleared timeouts, father no bad seeks. I shall wear no crowns
+   * and win no glory. I shall live and die at my post. I am the corrector of the underflow.
+   * I am the watcher of gaps. I am the shield that guards the realms of seekable. I pledge
+   * my life and honor to the Playback Watch, for this Player and all the Players to come.
+   */
+
+  const timerCancelEvents = ['seeking', 'seeked', 'pause', 'playing', 'error'];
+  /**
+   * @class PlaybackWatcher
+   */
+
+  class PlaybackWatcher {
+    /**
+     * Represents an PlaybackWatcher object.
+     *
+     * @class
+     * @param {Object} options an object that includes the tech and settings
+     */
+    constructor(options) {
+      this.playlistController_ = options.playlistController;
+      this.tech_ = options.tech;
+      this.seekable = options.seekable;
+      this.allowSeeksWithinUnsafeLiveWindow = options.allowSeeksWithinUnsafeLiveWindow;
+      this.liveRangeSafeTimeDelta = options.liveRangeSafeTimeDelta;
+      this.media = options.media;
+      this.consecutiveUpdates = 0;
+      this.lastRecordedTime = null;
+      this.checkCurrentTimeTimeout_ = null;
+      this.logger_ = logger('PlaybackWatcher');
+      this.logger_('initialize');
+      const playHandler = () => this.monitorCurrentTime_();
+      const canPlayHandler = () => this.monitorCurrentTime_();
+      const waitingHandler = () => this.techWaiting_();
+      const cancelTimerHandler = () => this.resetTimeUpdate_();
+      const pc = this.playlistController_;
+      const loaderTypes = ['main', 'subtitle', 'audio'];
+      const loaderChecks = {};
+      loaderTypes.forEach(type => {
+        loaderChecks[type] = {
+          reset: () => this.resetSegmentDownloads_(type),
+          updateend: () => this.checkSegmentDownloads_(type)
+        };
+        pc[`${type}SegmentLoader_`].on('appendsdone', loaderChecks[type].updateend); // If a rendition switch happens during a playback stall where the buffer
+        // isn't changing we want to reset. We cannot assume that the new rendition
+        // will also be stalled, until after new appends.
+
+        pc[`${type}SegmentLoader_`].on('playlistupdate', loaderChecks[type].reset); // Playback stalls should not be detected right after seeking.
+        // This prevents one segment playlists (single vtt or single segment content)
+        // from being detected as stalling. As the buffer will not change in those cases, since
+        // the buffer is the entire video duration.
+
+        this.tech_.on(['seeked', 'seeking'], loaderChecks[type].reset);
+      });
+      /**
+       * We check if a seek was into a gap through the following steps:
+       * 1. We get a seeking event and we do not get a seeked event. This means that
+       *    a seek was attempted but not completed.
+       * 2. We run `fixesBadSeeks_` on segment loader appends. This means that we already
+       *    removed everything from our buffer and appended a segment, and should be ready
+       *    to check for gaps.
+       */
+
+      const setSeekingHandlers = fn => {
+        ['main', 'audio'].forEach(type => {
+          pc[`${type}SegmentLoader_`][fn]('appended', this.seekingAppendCheck_);
+        });
+      };
+      this.seekingAppendCheck_ = () => {
+        if (this.fixesBadSeeks_()) {
+          this.consecutiveUpdates = 0;
+          this.lastRecordedTime = this.tech_.currentTime();
+          setSeekingHandlers('off');
+        }
+      };
+      this.clearSeekingAppendCheck_ = () => setSeekingHandlers('off');
+      this.watchForBadSeeking_ = () => {
+        this.clearSeekingAppendCheck_();
+        setSeekingHandlers('on');
+      };
+      this.tech_.on('seeked', this.clearSeekingAppendCheck_);
+      this.tech_.on('seeking', this.watchForBadSeeking_);
+      this.tech_.on('waiting', waitingHandler);
+      this.tech_.on(timerCancelEvents, cancelTimerHandler);
+      this.tech_.on('canplay', canPlayHandler);
+      /*
+        An edge case exists that results in gaps not being skipped when they exist at the beginning of a stream. This case
+        is surfaced in one of two ways:
+         1)  The `waiting` event is fired before the player has buffered content, making it impossible
+            to find or skip the gap. The `waiting` event is followed by a `play` event. On first play
+            we can check if playback is stalled due to a gap, and skip the gap if necessary.
+        2)  A source with a gap at the beginning of the stream is loaded programatically while the player
+            is in a playing state. To catch this case, it's important that our one-time play listener is setup
+            even if the player is in a playing state
+      */
+
+      this.tech_.one('play', playHandler); // Define the dispose function to clean up our events
+
+      this.dispose = () => {
+        this.clearSeekingAppendCheck_();
+        this.logger_('dispose');
+        this.tech_.off('waiting', waitingHandler);
+        this.tech_.off(timerCancelEvents, cancelTimerHandler);
+        this.tech_.off('canplay', canPlayHandler);
+        this.tech_.off('play', playHandler);
+        this.tech_.off('seeking', this.watchForBadSeeking_);
+        this.tech_.off('seeked', this.clearSeekingAppendCheck_);
+        loaderTypes.forEach(type => {
+          pc[`${type}SegmentLoader_`].off('appendsdone', loaderChecks[type].updateend);
+          pc[`${type}SegmentLoader_`].off('playlistupdate', loaderChecks[type].reset);
+          this.tech_.off(['seeked', 'seeking'], loaderChecks[type].reset);
+        });
+        if (this.checkCurrentTimeTimeout_) {
+          window.clearTimeout(this.checkCurrentTimeTimeout_);
+        }
+        this.resetTimeUpdate_();
+      };
+    }
+    /**
+     * Periodically check current time to see if playback stopped
+     *
+     * @private
+     */
+
+    monitorCurrentTime_() {
+      this.checkCurrentTime_();
+      if (this.checkCurrentTimeTimeout_) {
+        window.clearTimeout(this.checkCurrentTimeTimeout_);
+      } // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
+
+      this.checkCurrentTimeTimeout_ = window.setTimeout(this.monitorCurrentTime_.bind(this), 250);
+    }
+    /**
+     * Reset stalled download stats for a specific type of loader
+     *
+     * @param {string} type
+     *        The segment loader type to check.
+     *
+     * @listens SegmentLoader#playlistupdate
+     * @listens Tech#seeking
+     * @listens Tech#seeked
+     */
+
+    resetSegmentDownloads_(type) {
+      const loader = this.playlistController_[`${type}SegmentLoader_`];
+      if (this[`${type}StalledDownloads_`] > 0) {
+        this.logger_(`resetting possible stalled download count for ${type} loader`);
+      }
+      this[`${type}StalledDownloads_`] = 0;
+      this[`${type}Buffered_`] = loader.buffered_();
+    }
+    /**
+     * Checks on every segment `appendsdone` to see
+     * if segment appends are making progress. If they are not
+     * and we are still downloading bytes. We exclude the playlist.
+     *
+     * @param {string} type
+     *        The segment loader type to check.
+     *
+     * @listens SegmentLoader#appendsdone
+     */
+
+    checkSegmentDownloads_(type) {
+      const pc = this.playlistController_;
+      const loader = pc[`${type}SegmentLoader_`];
+      const buffered = loader.buffered_();
+      const isBufferedDifferent = isRangeDifferent(this[`${type}Buffered_`], buffered);
+      this[`${type}Buffered_`] = buffered; // if another watcher is going to fix the issue or
+      // the buffered value for this loader changed
+      // appends are working
+
+      if (isBufferedDifferent) {
+        this.resetSegmentDownloads_(type);
+        return;
+      }
+      this[`${type}StalledDownloads_`]++;
+      this.logger_(`found #${this[`${type}StalledDownloads_`]} ${type} appends that did not increase buffer (possible stalled download)`, {
+        playlistId: loader.playlist_ && loader.playlist_.id,
+        buffered: timeRangesToArray(buffered)
+      }); // after 10 possibly stalled appends with no reset, exclude
+
+      if (this[`${type}StalledDownloads_`] < 10) {
+        return;
+      }
+      this.logger_(`${type} loader stalled download exclusion`);
+      this.resetSegmentDownloads_(type);
+      this.tech_.trigger({
+        type: 'usage',
+        name: `vhs-${type}-download-exclusion`
+      });
+      if (type === 'subtitle') {
+        return;
+      } // TODO: should we exclude audio tracks rather than main tracks
+      // when type is audio?
+
+      pc.excludePlaylist({
+        error: {
+          message: `Excessive ${type} segment downloading detected.`
+        },
+        playlistExclusionDuration: Infinity
+      });
+    }
+    /**
+     * The purpose of this function is to emulate the "waiting" event on
+     * browsers that do not emit it when they are waiting for more
+     * data to continue playback
+     *
+     * @private
+     */
+
+    checkCurrentTime_() {
+      if (this.tech_.paused() || this.tech_.seeking()) {
+        return;
+      }
+      const currentTime = this.tech_.currentTime();
+      const buffered = this.tech_.buffered();
+      if (this.lastRecordedTime === currentTime && (!buffered.length || currentTime + SAFE_TIME_DELTA >= buffered.end(buffered.length - 1))) {
+        // If current time is at the end of the final buffered region, then any playback
+        // stall is most likely caused by buffering in a low bandwidth environment. The tech
+        // should fire a `waiting` event in this scenario, but due to browser and tech
+        // inconsistencies. Calling `techWaiting_` here allows us to simulate
+        // responding to a native `waiting` event when the tech fails to emit one.
+        return this.techWaiting_();
+      }
+      if (this.consecutiveUpdates >= 5 && currentTime === this.lastRecordedTime) {
+        this.consecutiveUpdates++;
+        this.waiting_();
+      } else if (currentTime === this.lastRecordedTime) {
+        this.consecutiveUpdates++;
+      } else {
+        this.consecutiveUpdates = 0;
+        this.lastRecordedTime = currentTime;
+      }
+    }
+    /**
+     * Resets the 'timeupdate' mechanism designed to detect that we are stalled
+     *
+     * @private
+     */
+
+    resetTimeUpdate_() {
+      this.consecutiveUpdates = 0;
+    }
+    /**
+     * Fixes situations where there's a bad seek
+     *
+     * @return {boolean} whether an action was taken to fix the seek
+     * @private
+     */
+
+    fixesBadSeeks_() {
+      const seeking = this.tech_.seeking();
+      if (!seeking) {
+        return false;
+      } // TODO: It's possible that these seekable checks should be moved out of this function
+      // and into a function that runs on seekablechange. It's also possible that we only need
+      // afterSeekableWindow as the buffered check at the bottom is good enough to handle before
+      // seekable range.
+
+      const seekable = this.seekable();
+      const currentTime = this.tech_.currentTime();
+      const isAfterSeekableRange = this.afterSeekableWindow_(seekable, currentTime, this.media(), this.allowSeeksWithinUnsafeLiveWindow);
+      let seekTo;
+      if (isAfterSeekableRange) {
+        const seekableEnd = seekable.end(seekable.length - 1); // sync to live point (if VOD, our seekable was updated and we're simply adjusting)
+
+        seekTo = seekableEnd;
+      }
+      if (this.beforeSeekableWindow_(seekable, currentTime)) {
+        const seekableStart = seekable.start(0); // sync to the beginning of the live window
+        // provide a buffer of .1 seconds to handle rounding/imprecise numbers
+
+        seekTo = seekableStart + (
+        // if the playlist is too short and the seekable range is an exact time (can
+        // happen in live with a 3 segment playlist), then don't use a time delta
+        seekableStart === seekable.end(0) ? 0 : SAFE_TIME_DELTA);
+      }
+      if (typeof seekTo !== 'undefined') {
+        this.logger_(`Trying to seek outside of seekable at time ${currentTime} with ` + `seekable range ${printableRange(seekable)}. Seeking to ` + `${seekTo}.`);
+        this.tech_.setCurrentTime(seekTo);
+        return true;
+      }
+      const sourceUpdater = this.playlistController_.sourceUpdater_;
+      const buffered = this.tech_.buffered();
+      const audioBuffered = sourceUpdater.audioBuffer ? sourceUpdater.audioBuffered() : null;
+      const videoBuffered = sourceUpdater.videoBuffer ? sourceUpdater.videoBuffered() : null;
+      const media = this.media(); // verify that at least two segment durations or one part duration have been
+      // appended before checking for a gap.
+
+      const minAppendedDuration = media.partTargetDuration ? media.partTargetDuration : (media.targetDuration - TIME_FUDGE_FACTOR) * 2; // verify that at least two segment durations have been
+      // appended before checking for a gap.
+
+      const bufferedToCheck = [audioBuffered, videoBuffered];
+      for (let i = 0; i < bufferedToCheck.length; i++) {
+        // skip null buffered
+        if (!bufferedToCheck[i]) {
+          continue;
+        }
+        const timeAhead = timeAheadOf(bufferedToCheck[i], currentTime); // if we are less than two video/audio segment durations or one part
+        // duration behind we haven't appended enough to call this a bad seek.
+
+        if (timeAhead < minAppendedDuration) {
+          return false;
+        }
+      }
+      const nextRange = findNextRange(buffered, currentTime); // we have appended enough content, but we don't have anything buffered
+      // to seek over the gap
+
+      if (nextRange.length === 0) {
+        return false;
+      }
+      seekTo = nextRange.start(0) + SAFE_TIME_DELTA;
+      this.logger_(`Buffered region starts (${nextRange.start(0)}) ` + ` just beyond seek point (${currentTime}). Seeking to ${seekTo}.`);
+      this.tech_.setCurrentTime(seekTo);
+      return true;
+    }
+    /**
+     * Handler for situations when we determine the player is waiting.
+     *
+     * @private
+     */
+
+    waiting_() {
+      if (this.techWaiting_()) {
+        return;
+      } // All tech waiting checks failed. Use last resort correction
+
+      const currentTime = this.tech_.currentTime();
+      const buffered = this.tech_.buffered();
+      const currentRange = findRange(buffered, currentTime); // Sometimes the player can stall for unknown reasons within a contiguous buffered
+      // region with no indication that anything is amiss (seen in Firefox). Seeking to
+      // currentTime is usually enough to kickstart the player. This checks that the player
+      // is currently within a buffered region before attempting a corrective seek.
+      // Chrome does not appear to continue `timeupdate` events after a `waiting` event
+      // until there is ~ 3 seconds of forward buffer available. PlaybackWatcher should also
+      // make sure there is ~3 seconds of forward buffer before taking any corrective action
+      // to avoid triggering an `unknownwaiting` event when the network is slow.
+
+      if (currentRange.length && currentTime + 3 <= currentRange.end(0)) {
+        this.resetTimeUpdate_();
+        this.tech_.setCurrentTime(currentTime);
+        this.logger_(`Stopped at ${currentTime} while inside a buffered region ` + `[${currentRange.start(0)} -> ${currentRange.end(0)}]. Attempting to resume ` + 'playback by seeking to the current time.'); // unknown waiting corrections may be useful for monitoring QoS
+
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-unknown-waiting'
+        });
+        return;
+      }
+    }
+    /**
+     * Handler for situations when the tech fires a `waiting` event
+     *
+     * @return {boolean}
+     *         True if an action (or none) was needed to correct the waiting. False if no
+     *         checks passed
+     * @private
+     */
+
+    techWaiting_() {
+      const seekable = this.seekable();
+      const currentTime = this.tech_.currentTime();
+      if (this.tech_.seeking()) {
+        // Tech is seeking or already waiting on another action, no action needed
+        return true;
+      }
+      if (this.beforeSeekableWindow_(seekable, currentTime)) {
+        const livePoint = seekable.end(seekable.length - 1);
+        this.logger_(`Fell out of live window at time ${currentTime}. Seeking to ` + `live point (seekable end) ${livePoint}`);
+        this.resetTimeUpdate_();
+        this.tech_.setCurrentTime(livePoint); // live window resyncs may be useful for monitoring QoS
+
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-live-resync'
+        });
+        return true;
+      }
+      const sourceUpdater = this.tech_.vhs.playlistController_.sourceUpdater_;
+      const buffered = this.tech_.buffered();
+      const videoUnderflow = this.videoUnderflow_({
+        audioBuffered: sourceUpdater.audioBuffered(),
+        videoBuffered: sourceUpdater.videoBuffered(),
+        currentTime
+      });
+      if (videoUnderflow) {
+        // Even though the video underflowed and was stuck in a gap, the audio overplayed
+        // the gap, leading currentTime into a buffered range. Seeking to currentTime
+        // allows the video to catch up to the audio position without losing any audio
+        // (only suffering ~3 seconds of frozen video and a pause in audio playback).
+        this.resetTimeUpdate_();
+        this.tech_.setCurrentTime(currentTime); // video underflow may be useful for monitoring QoS
+
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-video-underflow'
+        });
+        return true;
+      }
+      const nextRange = findNextRange(buffered, currentTime); // check for gap
+
+      if (nextRange.length > 0) {
+        this.logger_(`Stopped at ${currentTime} and seeking to ${nextRange.start(0)}`);
+        this.resetTimeUpdate_();
+        this.skipTheGap_(currentTime);
+        return true;
+      } // All checks failed. Returning false to indicate failure to correct waiting
+
+      return false;
+    }
+    afterSeekableWindow_(seekable, currentTime, playlist, allowSeeksWithinUnsafeLiveWindow = false) {
+      if (!seekable.length) {
+        // we can't make a solid case if there's no seekable, default to false
+        return false;
+      }
+      let allowedEnd = seekable.end(seekable.length - 1) + SAFE_TIME_DELTA;
+      const isLive = !playlist.endList;
+      const isLLHLS = typeof playlist.partTargetDuration === 'number';
+      if (isLive && (isLLHLS || allowSeeksWithinUnsafeLiveWindow)) {
+        allowedEnd = seekable.end(seekable.length - 1) + playlist.targetDuration * 3;
+      }
+      if (currentTime > allowedEnd) {
+        return true;
+      }
+      return false;
+    }
+    beforeSeekableWindow_(seekable, currentTime) {
+      if (seekable.length &&
+      // can't fall before 0 and 0 seekable start identifies VOD stream
+      seekable.start(0) > 0 && currentTime < seekable.start(0) - this.liveRangeSafeTimeDelta) {
+        return true;
+      }
+      return false;
+    }
+    videoUnderflow_({
+      videoBuffered,
+      audioBuffered,
+      currentTime
+    }) {
+      // audio only content will not have video underflow :)
+      if (!videoBuffered) {
+        return;
+      }
+      let gap; // find a gap in demuxed content.
+
+      if (videoBuffered.length && audioBuffered.length) {
+        // in Chrome audio will continue to play for ~3s when we run out of video
+        // so we have to check that the video buffer did have some buffer in the
+        // past.
+        const lastVideoRange = findRange(videoBuffered, currentTime - 3);
+        const videoRange = findRange(videoBuffered, currentTime);
+        const audioRange = findRange(audioBuffered, currentTime);
+        if (audioRange.length && !videoRange.length && lastVideoRange.length) {
+          gap = {
+            start: lastVideoRange.end(0),
+            end: audioRange.end(0)
+          };
+        } // find a gap in muxed content.
+      } else {
+        const nextRange = findNextRange(videoBuffered, currentTime); // Even if there is no available next range, there is still a possibility we are
+        // stuck in a gap due to video underflow.
+
+        if (!nextRange.length) {
+          gap = this.gapFromVideoUnderflow_(videoBuffered, currentTime);
+        }
+      }
+      if (gap) {
+        this.logger_(`Encountered a gap in video from ${gap.start} to ${gap.end}. ` + `Seeking to current time ${currentTime}`);
+        return true;
+      }
+      return false;
+    }
+    /**
+     * Timer callback. If playback still has not proceeded, then we seek
+     * to the start of the next buffered region.
+     *
+     * @private
+     */
+
+    skipTheGap_(scheduledCurrentTime) {
+      const buffered = this.tech_.buffered();
+      const currentTime = this.tech_.currentTime();
+      const nextRange = findNextRange(buffered, currentTime);
+      this.resetTimeUpdate_();
+      if (nextRange.length === 0 || currentTime !== scheduledCurrentTime) {
+        return;
+      }
+      this.logger_('skipTheGap_:', 'currentTime:', currentTime, 'scheduled currentTime:', scheduledCurrentTime, 'nextRange start:', nextRange.start(0)); // only seek if we still have not played
+
+      this.tech_.setCurrentTime(nextRange.start(0) + TIME_FUDGE_FACTOR);
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-gap-skip'
+      });
+    }
+    gapFromVideoUnderflow_(buffered, currentTime) {
+      // At least in Chrome, if there is a gap in the video buffer, the audio will continue
+      // playing for ~3 seconds after the video gap starts. This is done to account for
+      // video buffer underflow/underrun (note that this is not done when there is audio
+      // buffer underflow/underrun -- in that case the video will stop as soon as it
+      // encounters the gap, as audio stalls are more noticeable/jarring to a user than
+      // video stalls). The player's time will reflect the playthrough of audio, so the
+      // time will appear as if we are in a buffered region, even if we are stuck in a
+      // "gap."
+      //
+      // Example:
+      // video buffer:   0 => 10.1, 10.2 => 20
+      // audio buffer:   0 => 20
+      // overall buffer: 0 => 10.1, 10.2 => 20
+      // current time: 13
+      //
+      // Chrome's video froze at 10 seconds, where the video buffer encountered the gap,
+      // however, the audio continued playing until it reached ~3 seconds past the gap
+      // (13 seconds), at which point it stops as well. Since current time is past the
+      // gap, findNextRange will return no ranges.
+      //
+      // To check for this issue, we see if there is a gap that starts somewhere within
+      // a 3 second range (3 seconds +/- 1 second) back from our current time.
+      const gaps = findGaps(buffered);
+      for (let i = 0; i < gaps.length; i++) {
+        const start = gaps.start(i);
+        const end = gaps.end(i); // gap is starts no more than 4 seconds back
+
+        if (currentTime - start < 4 && currentTime - start > 2) {
+          return {
+            start,
+            end
+          };
+        }
+      }
+      return null;
+    }
+  }
+  const defaultOptions = {
+    errorInterval: 30,
+    getSource(next) {
+      const tech = this.tech({
+        IWillNotUseThisInPlugins: true
+      });
+      const sourceObj = tech.currentSource_ || this.currentSource();
+      return next(sourceObj);
+    }
+  };
+  /**
+   * Main entry point for the plugin
+   *
+   * @param {Player} player a reference to a videojs Player instance
+   * @param {Object} [options] an object with plugin options
+   * @private
+   */
+
+  const initPlugin = function (player, options) {
+    let lastCalled = 0;
+    let seekTo = 0;
+    const localOptions = merge(defaultOptions, options);
+    player.ready(() => {
+      player.trigger({
+        type: 'usage',
+        name: 'vhs-error-reload-initialized'
+      });
+    });
+    /**
+     * Player modifications to perform that must wait until `loadedmetadata`
+     * has been triggered
+     *
+     * @private
+     */
+
+    const loadedMetadataHandler = function () {
+      if (seekTo) {
+        player.currentTime(seekTo);
+      }
+    };
+    /**
+     * Set the source on the player element, play, and seek if necessary
+     *
+     * @param {Object} sourceObj An object specifying the source url and mime-type to play
+     * @private
+     */
+
+    const setSource = function (sourceObj) {
+      if (sourceObj === null || sourceObj === undefined) {
+        return;
+      }
+      seekTo = player.duration() !== Infinity && player.currentTime() || 0;
+      player.one('loadedmetadata', loadedMetadataHandler);
+      player.src(sourceObj);
+      player.trigger({
+        type: 'usage',
+        name: 'vhs-error-reload'
+      });
+      player.play();
+    };
+    /**
+     * Attempt to get a source from either the built-in getSource function
+     * or a custom function provided via the options
+     *
+     * @private
+     */
+
+    const errorHandler = function () {
+      // Do not attempt to reload the source if a source-reload occurred before
+      // 'errorInterval' time has elapsed since the last source-reload
+      if (Date.now() - lastCalled < localOptions.errorInterval * 1000) {
+        player.trigger({
+          type: 'usage',
+          name: 'vhs-error-reload-canceled'
+        });
+        return;
+      }
+      if (!localOptions.getSource || typeof localOptions.getSource !== 'function') {
+        videojs.log.error('ERROR: reloadSourceOnError - The option getSource must be a function!');
+        return;
+      }
+      lastCalled = Date.now();
+      return localOptions.getSource.call(player, setSource);
+    };
+    /**
+     * Unbind any event handlers that were bound by the plugin
+     *
+     * @private
+     */
+
+    const cleanupEvents = function () {
+      player.off('loadedmetadata', loadedMetadataHandler);
+      player.off('error', errorHandler);
+      player.off('dispose', cleanupEvents);
+    };
+    /**
+     * Cleanup before re-initializing the plugin
+     *
+     * @param {Object} [newOptions] an object with plugin options
+     * @private
+     */
+
+    const reinitPlugin = function (newOptions) {
+      cleanupEvents();
+      initPlugin(player, newOptions);
+    };
+    player.on('error', errorHandler);
+    player.on('dispose', cleanupEvents); // Overwrite the plugin function so that we can correctly cleanup before
+    // initializing the plugin
+
+    player.reloadSourceOnError = reinitPlugin;
+  };
+  /**
+   * Reload the source when an error is detected as long as there
+   * wasn't an error previously within the last 30 seconds
+   *
+   * @param {Object} [options] an object with plugin options
+   */
+
+  const reloadSourceOnError = function (options) {
+    initPlugin(this, options);
+  };
+  var version$4 = "3.12.1";
+  var version$3 = "7.0.3";
+  var version$2 = "1.3.0";
+  var version$1 = "7.1.0";
+  var version = "4.0.1";
+
+  /**
+   * @file videojs-http-streaming.js
+   *
+   * The main file for the VHS project.
+   * License: https://github.com/videojs/videojs-http-streaming/blob/main/LICENSE
+   */
+  const Vhs = {
+    PlaylistLoader,
+    Playlist,
+    utils,
+    STANDARD_PLAYLIST_SELECTOR: lastBandwidthSelector,
+    INITIAL_PLAYLIST_SELECTOR: lowestBitrateCompatibleVariantSelector,
+    lastBandwidthSelector,
+    movingAverageBandwidthSelector,
+    comparePlaylistBandwidth,
+    comparePlaylistResolution,
+    xhr: xhrFactory()
+  }; // Define getter/setters for config properties
+
+  Object.keys(Config).forEach(prop => {
+    Object.defineProperty(Vhs, prop, {
+      get() {
+        videojs.log.warn(`using Vhs.${prop} is UNSAFE be sure you know what you are doing`);
+        return Config[prop];
+      },
+      set(value) {
+        videojs.log.warn(`using Vhs.${prop} is UNSAFE be sure you know what you are doing`);
+        if (typeof value !== 'number' || value < 0) {
+          videojs.log.warn(`value of Vhs.${prop} must be greater than or equal to 0`);
+          return;
+        }
+        Config[prop] = value;
+      }
+    });
+  });
+  const LOCAL_STORAGE_KEY = 'videojs-vhs';
+  /**
+   * Updates the selectedIndex of the QualityLevelList when a mediachange happens in vhs.
+   *
+   * @param {QualityLevelList} qualityLevels The QualityLevelList to update.
+   * @param {PlaylistLoader} playlistLoader PlaylistLoader containing the new media info.
+   * @function handleVhsMediaChange
+   */
+
+  const handleVhsMediaChange = function (qualityLevels, playlistLoader) {
+    const newPlaylist = playlistLoader.media();
+    let selectedIndex = -1;
+    for (let i = 0; i < qualityLevels.length; i++) {
+      if (qualityLevels[i].id === newPlaylist.id) {
+        selectedIndex = i;
+        break;
+      }
+    }
+    qualityLevels.selectedIndex_ = selectedIndex;
+    qualityLevels.trigger({
+      selectedIndex,
+      type: 'change'
+    });
+  };
+  /**
+   * Adds quality levels to list once playlist metadata is available
+   *
+   * @param {QualityLevelList} qualityLevels The QualityLevelList to attach events to.
+   * @param {Object} vhs Vhs object to listen to for media events.
+   * @function handleVhsLoadedMetadata
+   */
+
+  const handleVhsLoadedMetadata = function (qualityLevels, vhs) {
+    vhs.representations().forEach(rep => {
+      qualityLevels.addQualityLevel(rep);
+    });
+    handleVhsMediaChange(qualityLevels, vhs.playlists);
+  }; // VHS is a source handler, not a tech. Make sure attempts to use it
+  // as one do not cause exceptions.
+
+  Vhs.canPlaySource = function () {
+    return videojs.log.warn('VHS is no longer a tech. Please remove it from ' + 'your player\'s techOrder.');
+  };
+  const emeKeySystems = (keySystemOptions, mainPlaylist, audioPlaylist) => {
+    if (!keySystemOptions) {
+      return keySystemOptions;
+    }
+    let codecs = {};
+    if (mainPlaylist && mainPlaylist.attributes && mainPlaylist.attributes.CODECS) {
+      codecs = unwrapCodecList(parseCodecs(mainPlaylist.attributes.CODECS));
+    }
+    if (audioPlaylist && audioPlaylist.attributes && audioPlaylist.attributes.CODECS) {
+      codecs.audio = audioPlaylist.attributes.CODECS;
+    }
+    const videoContentType = getMimeForCodec(codecs.video);
+    const audioContentType = getMimeForCodec(codecs.audio); // upsert the content types based on the selected playlist
+
+    const keySystemContentTypes = {};
+    for (const keySystem in keySystemOptions) {
+      keySystemContentTypes[keySystem] = {};
+      if (audioContentType) {
+        keySystemContentTypes[keySystem].audioContentType = audioContentType;
+      }
+      if (videoContentType) {
+        keySystemContentTypes[keySystem].videoContentType = videoContentType;
+      } // Default to using the video playlist's PSSH even though they may be different, as
+      // videojs-contrib-eme will only accept one in the options.
+      //
+      // This shouldn't be an issue for most cases as early intialization will handle all
+      // unique PSSH values, and if they aren't, then encrypted events should have the
+      // specific information needed for the unique license.
+
+      if (mainPlaylist.contentProtection && mainPlaylist.contentProtection[keySystem] && mainPlaylist.contentProtection[keySystem].pssh) {
+        keySystemContentTypes[keySystem].pssh = mainPlaylist.contentProtection[keySystem].pssh;
+      } // videojs-contrib-eme accepts the option of specifying: 'com.some.cdm': 'url'
+      // so we need to prevent overwriting the URL entirely
+
+      if (typeof keySystemOptions[keySystem] === 'string') {
+        keySystemContentTypes[keySystem].url = keySystemOptions[keySystem];
+      }
+    }
+    return merge(keySystemOptions, keySystemContentTypes);
+  };
+  /**
+   * @typedef {Object} KeySystems
+   *
+   * keySystems configuration for https://github.com/videojs/videojs-contrib-eme
+   * Note: not all options are listed here.
+   *
+   * @property {Uint8Array} [pssh]
+   *           Protection System Specific Header
+   */
+
+  /**
+   * Goes through all the playlists and collects an array of KeySystems options objects
+   * containing each playlist's keySystems and their pssh values, if available.
+   *
+   * @param {Object[]} playlists
+   *        The playlists to look through
+   * @param {string[]} keySystems
+   *        The keySystems to collect pssh values for
+   *
+   * @return {KeySystems[]}
+   *         An array of KeySystems objects containing available key systems and their
+   *         pssh values
+   */
+
+  const getAllPsshKeySystemsOptions = (playlists, keySystems) => {
+    return playlists.reduce((keySystemsArr, playlist) => {
+      if (!playlist.contentProtection) {
+        return keySystemsArr;
+      }
+      const keySystemsOptions = keySystems.reduce((keySystemsObj, keySystem) => {
+        const keySystemOptions = playlist.contentProtection[keySystem];
+        if (keySystemOptions && keySystemOptions.pssh) {
+          keySystemsObj[keySystem] = {
+            pssh: keySystemOptions.pssh
+          };
+        }
+        return keySystemsObj;
+      }, {});
+      if (Object.keys(keySystemsOptions).length) {
+        keySystemsArr.push(keySystemsOptions);
+      }
+      return keySystemsArr;
+    }, []);
+  };
+  /**
+   * Returns a promise that waits for the
+   * [eme plugin](https://github.com/videojs/videojs-contrib-eme) to create a key session.
+   *
+   * Works around https://bugs.chromium.org/p/chromium/issues/detail?id=895449 in non-IE11
+   * browsers.
+   *
+   * As per the above ticket, this is particularly important for Chrome, where, if
+   * unencrypted content is appended before encrypted content and the key session has not
+   * been created, a MEDIA_ERR_DECODE will be thrown once the encrypted content is reached
+   * during playback.
+   *
+   * @param {Object} player
+   *        The player instance
+   * @param {Object[]} sourceKeySystems
+   *        The key systems options from the player source
+   * @param {Object} [audioMedia]
+   *        The active audio media playlist (optional)
+   * @param {Object[]} mainPlaylists
+   *        The playlists found on the main playlist object
+   *
+   * @return {Object}
+   *         Promise that resolves when the key session has been created
+   */
+
+  const waitForKeySessionCreation = ({
+    player,
+    sourceKeySystems,
+    audioMedia,
+    mainPlaylists
+  }) => {
+    if (!player.eme.initializeMediaKeys) {
+      return Promise.resolve();
+    } // TODO should all audio PSSH values be initialized for DRM?
+    //
+    // All unique video rendition pssh values are initialized for DRM, but here only
+    // the initial audio playlist license is initialized. In theory, an encrypted
+    // event should be fired if the user switches to an alternative audio playlist
+    // where a license is required, but this case hasn't yet been tested. In addition, there
+    // may be many alternate audio playlists unlikely to be used (e.g., multiple different
+    // languages).
+
+    const playlists = audioMedia ? mainPlaylists.concat([audioMedia]) : mainPlaylists;
+    const keySystemsOptionsArr = getAllPsshKeySystemsOptions(playlists, Object.keys(sourceKeySystems));
+    const initializationFinishedPromises = [];
+    const keySessionCreatedPromises = []; // Since PSSH values are interpreted as initData, EME will dedupe any duplicates. The
+    // only place where it should not be deduped is for ms-prefixed APIs, but
+    // the existence of modern EME APIs in addition to
+    // ms-prefixed APIs on Edge should prevent this from being a concern.
+    // initializeMediaKeys also won't use the webkit-prefixed APIs.
+
+    keySystemsOptionsArr.forEach(keySystemsOptions => {
+      keySessionCreatedPromises.push(new Promise((resolve, reject) => {
+        player.tech_.one('keysessioncreated', resolve);
+      }));
+      initializationFinishedPromises.push(new Promise((resolve, reject) => {
+        player.eme.initializeMediaKeys({
+          keySystems: keySystemsOptions
+        }, err => {
+          if (err) {
+            reject(err);
+            return;
+          }
+          resolve();
+        });
+      }));
+    }); // The reasons Promise.race is chosen over Promise.any:
+    //
+    // * Promise.any is only available in Safari 14+.
+    // * None of these promises are expected to reject. If they do reject, it might be
+    //   better here for the race to surface the rejection, rather than mask it by using
+    //   Promise.any.
+
+    return Promise.race([
+    // If a session was previously created, these will all finish resolving without
+    // creating a new session, otherwise it will take until the end of all license
+    // requests, which is why the key session check is used (to make setup much faster).
+    Promise.all(initializationFinishedPromises),
+    // Once a single session is created, the browser knows DRM will be used.
+    Promise.race(keySessionCreatedPromises)]);
+  };
+  /**
+   * If the [eme](https://github.com/videojs/videojs-contrib-eme) plugin is available, and
+   * there are keySystems on the source, sets up source options to prepare the source for
+   * eme.
+   *
+   * @param {Object} player
+   *        The player instance
+   * @param {Object[]} sourceKeySystems
+   *        The key systems options from the player source
+   * @param {Object} media
+   *        The active media playlist
+   * @param {Object} [audioMedia]
+   *        The active audio media playlist (optional)
+   *
+   * @return {boolean}
+   *         Whether or not options were configured and EME is available
+   */
+
+  const setupEmeOptions = ({
+    player,
+    sourceKeySystems,
+    media,
+    audioMedia
+  }) => {
+    const sourceOptions = emeKeySystems(sourceKeySystems, media, audioMedia);
+    if (!sourceOptions) {
+      return false;
+    }
+    player.currentSource().keySystems = sourceOptions; // eme handles the rest of the setup, so if it is missing
+    // do nothing.
+
+    if (sourceOptions && !player.eme) {
+      videojs.log.warn('DRM encrypted source cannot be decrypted without a DRM plugin');
+      return false;
+    }
+    return true;
+  };
+  const getVhsLocalStorage = () => {
+    if (!window.localStorage) {
+      return null;
+    }
+    const storedObject = window.localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (!storedObject) {
+      return null;
+    }
+    try {
+      return JSON.parse(storedObject);
+    } catch (e) {
+      // someone may have tampered with the value
+      return null;
+    }
+  };
+  const updateVhsLocalStorage = options => {
+    if (!window.localStorage) {
+      return false;
+    }
+    let objectToStore = getVhsLocalStorage();
+    objectToStore = objectToStore ? merge(objectToStore, options) : options;
+    try {
+      window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(objectToStore));
+    } catch (e) {
+      // Throws if storage is full (e.g., always on iOS 5+ Safari private mode, where
+      // storage is set to 0).
+      // https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem#Exceptions
+      // No need to perform any operation.
+      return false;
+    }
+    return objectToStore;
+  };
+  /**
+   * Parses VHS-supported media types from data URIs. See
+   * https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
+   * for information on data URIs.
+   *
+   * @param {string} dataUri
+   *        The data URI
+   *
+   * @return {string|Object}
+   *         The parsed object/string, or the original string if no supported media type
+   *         was found
+   */
+
+  const expandDataUri = dataUri => {
+    if (dataUri.toLowerCase().indexOf('data:application/vnd.videojs.vhs+json,') === 0) {
+      return JSON.parse(dataUri.substring(dataUri.indexOf(',') + 1));
+    } // no known case for this data URI, return the string as-is
+
+    return dataUri;
+  };
+  /**
+   * Adds a request hook to an xhr object
+   *
+   * @param {Object} xhr object to add the onRequest hook to
+   * @param {function} callback hook function for an xhr request
+   */
+
+  const addOnRequestHook = (xhr, callback) => {
+    if (!xhr._requestCallbackSet) {
+      xhr._requestCallbackSet = new Set();
+    }
+    xhr._requestCallbackSet.add(callback);
+  };
+  /**
+   * Adds a response hook to an xhr object
+   *
+   * @param {Object} xhr object to add the onResponse hook to
+   * @param {function} callback hook function for an xhr response
+   */
+
+  const addOnResponseHook = (xhr, callback) => {
+    if (!xhr._responseCallbackSet) {
+      xhr._responseCallbackSet = new Set();
+    }
+    xhr._responseCallbackSet.add(callback);
+  };
+  /**
+   * Removes a request hook on an xhr object, deletes the onRequest set if empty.
+   *
+   * @param {Object} xhr object to remove the onRequest hook from
+   * @param {function} callback hook function to remove
+   */
+
+  const removeOnRequestHook = (xhr, callback) => {
+    if (!xhr._requestCallbackSet) {
+      return;
+    }
+    xhr._requestCallbackSet.delete(callback);
+    if (!xhr._requestCallbackSet.size) {
+      delete xhr._requestCallbackSet;
+    }
+  };
+  /**
+   * Removes a response hook on an xhr object, deletes the onResponse set if empty.
+   *
+   * @param {Object} xhr object to remove the onResponse hook from
+   * @param {function} callback hook function to remove
+   */
+
+  const removeOnResponseHook = (xhr, callback) => {
+    if (!xhr._responseCallbackSet) {
+      return;
+    }
+    xhr._responseCallbackSet.delete(callback);
+    if (!xhr._responseCallbackSet.size) {
+      delete xhr._responseCallbackSet;
+    }
+  };
+  /**
+   * Whether the browser has built-in HLS support.
+   */
+
+  Vhs.supportsNativeHls = function () {
+    if (!document || !document.createElement) {
+      return false;
+    }
+    const video = document.createElement('video'); // native HLS is definitely not supported if HTML5 video isn't
+
+    if (!videojs.getTech('Html5').isSupported()) {
+      return false;
+    } // HLS manifests can go by many mime-types
+
+    const canPlay = [
+    // Apple santioned
+    'application/vnd.apple.mpegurl',
+    // Apple sanctioned for backwards compatibility
+    'audio/mpegurl',
+    // Very common
+    'audio/x-mpegurl',
+    // Very common
+    'application/x-mpegurl',
+    // Included for completeness
+    'video/x-mpegurl', 'video/mpegurl', 'application/mpegurl'];
+    return canPlay.some(function (canItPlay) {
+      return /maybe|probably/i.test(video.canPlayType(canItPlay));
+    });
+  }();
+  Vhs.supportsNativeDash = function () {
+    if (!document || !document.createElement || !videojs.getTech('Html5').isSupported()) {
+      return false;
+    }
+    return /maybe|probably/i.test(document.createElement('video').canPlayType('application/dash+xml'));
+  }();
+  Vhs.supportsTypeNatively = type => {
+    if (type === 'hls') {
+      return Vhs.supportsNativeHls;
+    }
+    if (type === 'dash') {
+      return Vhs.supportsNativeDash;
+    }
+    return false;
+  };
+  /**
+   * VHS is a source handler, not a tech. Make sure attempts to use it
+   * as one do not cause exceptions.
+   */
+
+  Vhs.isSupported = function () {
+    return videojs.log.warn('VHS is no longer a tech. Please remove it from ' + 'your player\'s techOrder.');
+  };
+  /**
+   * A global function for setting an onRequest hook
+   *
+   * @param {function} callback for request modifiction
+   */
+
+  Vhs.xhr.onRequest = function (callback) {
+    addOnRequestHook(Vhs.xhr, callback);
+  };
+  /**
+   * A global function for setting an onResponse hook
+   *
+   * @param {callback} callback for response data retrieval
+   */
+
+  Vhs.xhr.onResponse = function (callback) {
+    addOnResponseHook(Vhs.xhr, callback);
+  };
+  /**
+   * Deletes a global onRequest callback if it exists
+   *
+   * @param {function} callback to delete from the global set
+   */
+
+  Vhs.xhr.offRequest = function (callback) {
+    removeOnRequestHook(Vhs.xhr, callback);
+  };
+  /**
+   * Deletes a global onResponse callback if it exists
+   *
+   * @param {function} callback to delete from the global set
+   */
+
+  Vhs.xhr.offResponse = function (callback) {
+    removeOnResponseHook(Vhs.xhr, callback);
+  };
+  const Component = videojs.getComponent('Component');
+  /**
+   * The Vhs Handler object, where we orchestrate all of the parts
+   * of VHS to interact with video.js
+   *
+   * @class VhsHandler
+   * @extends videojs.Component
+   * @param {Object} source the soruce object
+   * @param {Tech} tech the parent tech object
+   * @param {Object} options optional and required options
+   */
+
+  class VhsHandler extends Component {
+    constructor(source, tech, options) {
+      super(tech, options.vhs); // if a tech level `initialBandwidth` option was passed
+      // use that over the VHS level `bandwidth` option
+
+      if (typeof options.initialBandwidth === 'number') {
+        this.options_.bandwidth = options.initialBandwidth;
+      }
+      this.logger_ = logger('VhsHandler'); // we need access to the player in some cases,
+      // so, get it from Video.js via the `playerId`
+
+      if (tech.options_ && tech.options_.playerId) {
+        const _player = videojs.getPlayer(tech.options_.playerId);
+        this.player_ = _player;
+      }
+      this.tech_ = tech;
+      this.source_ = source;
+      this.stats = {};
+      this.ignoreNextSeekingEvent_ = false;
+      this.setOptions_();
+      if (this.options_.overrideNative && tech.overrideNativeAudioTracks && tech.overrideNativeVideoTracks) {
+        tech.overrideNativeAudioTracks(true);
+        tech.overrideNativeVideoTracks(true);
+      } else if (this.options_.overrideNative && (tech.featuresNativeVideoTracks || tech.featuresNativeAudioTracks)) {
+        // overriding native VHS only works if audio tracks have been emulated
+        // error early if we're misconfigured
+        throw new Error('Overriding native VHS requires emulated tracks. ' + 'See https://git.io/vMpjB');
+      } // listen for fullscreenchange events for this player so that we
+      // can adjust our quality selection quickly
+
+      this.on(document, ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'], event => {
+        const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+        if (fullscreenElement && fullscreenElement.contains(this.tech_.el())) {
+          this.playlistController_.fastQualityChange_();
+        } else {
+          // When leaving fullscreen, since the in page pixel dimensions should be smaller
+          // than full screen, see if there should be a rendition switch down to preserve
+          // bandwidth.
+          this.playlistController_.checkABR_();
+        }
+      });
+      this.on(this.tech_, 'seeking', function () {
+        if (this.ignoreNextSeekingEvent_) {
+          this.ignoreNextSeekingEvent_ = false;
+          return;
+        }
+        this.setCurrentTime(this.tech_.currentTime());
+      });
+      this.on(this.tech_, 'error', function () {
+        // verify that the error was real and we are loaded
+        // enough to have pc loaded.
+        if (this.tech_.error() && this.playlistController_) {
+          this.playlistController_.pauseLoading();
+        }
+      });
+      this.on(this.tech_, 'play', this.play);
+    }
+    /**
+     * Set VHS options based on options from configuration, as well as partial
+     * options to be passed at a later time.
+     *
+     * @param {Object} options A partial chunk of config options
+     */
+
+    setOptions_(options = {}) {
+      this.options_ = merge(this.options_, options); // defaults
+
+      this.options_.withCredentials = this.options_.withCredentials || false;
+      this.options_.limitRenditionByPlayerDimensions = this.options_.limitRenditionByPlayerDimensions === false ? false : true;
+      this.options_.useDevicePixelRatio = this.options_.useDevicePixelRatio || false;
+      this.options_.useBandwidthFromLocalStorage = typeof this.source_.useBandwidthFromLocalStorage !== 'undefined' ? this.source_.useBandwidthFromLocalStorage : this.options_.useBandwidthFromLocalStorage || false;
+      this.options_.useForcedSubtitles = this.options_.useForcedSubtitles || false;
+      this.options_.useNetworkInformationApi = this.options_.useNetworkInformationApi || false;
+      this.options_.useDtsForTimestampOffset = this.options_.useDtsForTimestampOffset || false;
+      this.options_.customTagParsers = this.options_.customTagParsers || [];
+      this.options_.customTagMappers = this.options_.customTagMappers || [];
+      this.options_.cacheEncryptionKeys = this.options_.cacheEncryptionKeys || false;
+      this.options_.llhls = this.options_.llhls === false ? false : true;
+      this.options_.bufferBasedABR = this.options_.bufferBasedABR || false;
+      if (typeof this.options_.playlistExclusionDuration !== 'number') {
+        this.options_.playlistExclusionDuration = 60;
+      }
+      if (typeof this.options_.bandwidth !== 'number') {
+        if (this.options_.useBandwidthFromLocalStorage) {
+          const storedObject = getVhsLocalStorage();
+          if (storedObject && storedObject.bandwidth) {
+            this.options_.bandwidth = storedObject.bandwidth;
+            this.tech_.trigger({
+              type: 'usage',
+              name: 'vhs-bandwidth-from-local-storage'
+            });
+          }
+          if (storedObject && storedObject.throughput) {
+            this.options_.throughput = storedObject.throughput;
+            this.tech_.trigger({
+              type: 'usage',
+              name: 'vhs-throughput-from-local-storage'
+            });
+          }
+        }
+      } // if bandwidth was not set by options or pulled from local storage, start playlist
+      // selection at a reasonable bandwidth
+
+      if (typeof this.options_.bandwidth !== 'number') {
+        this.options_.bandwidth = Config.INITIAL_BANDWIDTH;
+      } // If the bandwidth number is unchanged from the initial setting
+      // then this takes precedence over the enableLowInitialPlaylist option
+
+      this.options_.enableLowInitialPlaylist = this.options_.enableLowInitialPlaylist && this.options_.bandwidth === Config.INITIAL_BANDWIDTH; // grab options passed to player.src
+
+      ['withCredentials', 'useDevicePixelRatio', 'customPixelRatio', 'limitRenditionByPlayerDimensions', 'bandwidth', 'customTagParsers', 'customTagMappers', 'cacheEncryptionKeys', 'playlistSelector', 'initialPlaylistSelector', 'bufferBasedABR', 'liveRangeSafeTimeDelta', 'llhls', 'useForcedSubtitles', 'useNetworkInformationApi', 'useDtsForTimestampOffset', 'exactManifestTimings', 'leastPixelDiffSelector'].forEach(option => {
+        if (typeof this.source_[option] !== 'undefined') {
+          this.options_[option] = this.source_[option];
+        }
+      });
+      this.limitRenditionByPlayerDimensions = this.options_.limitRenditionByPlayerDimensions;
+      this.useDevicePixelRatio = this.options_.useDevicePixelRatio;
+      const customPixelRatio = this.options_.customPixelRatio; // Ensure the custom pixel ratio is a number greater than or equal to 0
+
+      if (typeof customPixelRatio === 'number' && customPixelRatio >= 0) {
+        this.customPixelRatio = customPixelRatio;
+      }
+    } // alias for public method to set options
+
+    setOptions(options = {}) {
+      this.setOptions_(options);
+    }
+    /**
+     * called when player.src gets called, handle a new source
+     *
+     * @param {Object} src the source object to handle
+     */
+
+    src(src, type) {
+      // do nothing if the src is falsey
+      if (!src) {
+        return;
+      }
+      this.setOptions_(); // add main playlist controller options
+
+      this.options_.src = expandDataUri(this.source_.src);
+      this.options_.tech = this.tech_;
+      this.options_.externVhs = Vhs;
+      this.options_.sourceType = simpleTypeFromSourceType(type); // Whenever we seek internally, we should update the tech
+
+      this.options_.seekTo = time => {
+        this.tech_.setCurrentTime(time);
+      };
+      this.playlistController_ = new PlaylistController(this.options_);
+      const playbackWatcherOptions = merge({
+        liveRangeSafeTimeDelta: SAFE_TIME_DELTA
+      }, this.options_, {
+        seekable: () => this.seekable(),
+        media: () => this.playlistController_.media(),
+        playlistController: this.playlistController_
+      });
+      this.playbackWatcher_ = new PlaybackWatcher(playbackWatcherOptions);
+      this.playlistController_.on('error', () => {
+        const player = videojs.players[this.tech_.options_.playerId];
+        let error = this.playlistController_.error;
+        if (typeof error === 'object' && !error.code) {
+          error.code = 3;
+        } else if (typeof error === 'string') {
+          error = {
+            message: error,
+            code: 3
+          };
+        }
+        player.error(error);
+      });
+      const defaultSelector = this.options_.bufferBasedABR ? Vhs.movingAverageBandwidthSelector(0.55) : Vhs.STANDARD_PLAYLIST_SELECTOR; // `this` in selectPlaylist should be the VhsHandler for backwards
+      // compatibility with < v2
+
+      this.playlistController_.selectPlaylist = this.selectPlaylist ? this.selectPlaylist.bind(this) : defaultSelector.bind(this);
+      this.playlistController_.selectInitialPlaylist = Vhs.INITIAL_PLAYLIST_SELECTOR.bind(this); // re-expose some internal objects for backwards compatibility with < v2
+
+      this.playlists = this.playlistController_.mainPlaylistLoader_;
+      this.mediaSource = this.playlistController_.mediaSource; // Proxy assignment of some properties to the main playlist
+      // controller. Using a custom property for backwards compatibility
+      // with < v2
+
+      Object.defineProperties(this, {
+        selectPlaylist: {
+          get() {
+            return this.playlistController_.selectPlaylist;
+          },
+          set(selectPlaylist) {
+            this.playlistController_.selectPlaylist = selectPlaylist.bind(this);
+          }
+        },
+        throughput: {
+          get() {
+            return this.playlistController_.mainSegmentLoader_.throughput.rate;
+          },
+          set(throughput) {
+            this.playlistController_.mainSegmentLoader_.throughput.rate = throughput; // By setting `count` to 1 the throughput value becomes the starting value
+            // for the cumulative average
+
+            this.playlistController_.mainSegmentLoader_.throughput.count = 1;
+          }
+        },
+        bandwidth: {
+          get() {
+            let playerBandwidthEst = this.playlistController_.mainSegmentLoader_.bandwidth;
+            const networkInformation = window.navigator.connection || window.navigator.mozConnection || window.navigator.webkitConnection;
+            const tenMbpsAsBitsPerSecond = 10e6;
+            if (this.options_.useNetworkInformationApi && networkInformation) {
+              // downlink returns Mbps
+              // https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/downlink
+              const networkInfoBandwidthEstBitsPerSec = networkInformation.downlink * 1000 * 1000; // downlink maxes out at 10 Mbps. In the event that both networkInformationApi and the player
+              // estimate a bandwidth greater than 10 Mbps, use the larger of the two estimates to ensure that
+              // high quality streams are not filtered out.
+
+              if (networkInfoBandwidthEstBitsPerSec >= tenMbpsAsBitsPerSecond && playerBandwidthEst >= tenMbpsAsBitsPerSecond) {
+                playerBandwidthEst = Math.max(playerBandwidthEst, networkInfoBandwidthEstBitsPerSec);
+              } else {
+                playerBandwidthEst = networkInfoBandwidthEstBitsPerSec;
+              }
+            }
+            return playerBandwidthEst;
+          },
+          set(bandwidth) {
+            this.playlistController_.mainSegmentLoader_.bandwidth = bandwidth; // setting the bandwidth manually resets the throughput counter
+            // `count` is set to zero that current value of `rate` isn't included
+            // in the cumulative average
+
+            this.playlistController_.mainSegmentLoader_.throughput = {
+              rate: 0,
+              count: 0
+            };
+          }
+        },
+        /**
+         * `systemBandwidth` is a combination of two serial processes bit-rates. The first
+         * is the network bitrate provided by `bandwidth` and the second is the bitrate of
+         * the entire process after that - decryption, transmuxing, and appending - provided
+         * by `throughput`.
+         *
+         * Since the two process are serial, the overall system bandwidth is given by:
+         *   sysBandwidth = 1 / (1 / bandwidth + 1 / throughput)
+         */
+        systemBandwidth: {
+          get() {
+            const invBandwidth = 1 / (this.bandwidth || 1);
+            let invThroughput;
+            if (this.throughput > 0) {
+              invThroughput = 1 / this.throughput;
+            } else {
+              invThroughput = 0;
+            }
+            const systemBitrate = Math.floor(1 / (invBandwidth + invThroughput));
+            return systemBitrate;
+          },
+          set() {
+            videojs.log.error('The "systemBandwidth" property is read-only');
+          }
+        }
+      });
+      if (this.options_.bandwidth) {
+        this.bandwidth = this.options_.bandwidth;
+      }
+      if (this.options_.throughput) {
+        this.throughput = this.options_.throughput;
+      }
+      Object.defineProperties(this.stats, {
+        bandwidth: {
+          get: () => this.bandwidth || 0,
+          enumerable: true
+        },
+        mediaRequests: {
+          get: () => this.playlistController_.mediaRequests_() || 0,
+          enumerable: true
+        },
+        mediaRequestsAborted: {
+          get: () => this.playlistController_.mediaRequestsAborted_() || 0,
+          enumerable: true
+        },
+        mediaRequestsTimedout: {
+          get: () => this.playlistController_.mediaRequestsTimedout_() || 0,
+          enumerable: true
+        },
+        mediaRequestsErrored: {
+          get: () => this.playlistController_.mediaRequestsErrored_() || 0,
+          enumerable: true
+        },
+        mediaTransferDuration: {
+          get: () => this.playlistController_.mediaTransferDuration_() || 0,
+          enumerable: true
+        },
+        mediaBytesTransferred: {
+          get: () => this.playlistController_.mediaBytesTransferred_() || 0,
+          enumerable: true
+        },
+        mediaSecondsLoaded: {
+          get: () => this.playlistController_.mediaSecondsLoaded_() || 0,
+          enumerable: true
+        },
+        mediaAppends: {
+          get: () => this.playlistController_.mediaAppends_() || 0,
+          enumerable: true
+        },
+        mainAppendsToLoadedData: {
+          get: () => this.playlistController_.mainAppendsToLoadedData_() || 0,
+          enumerable: true
+        },
+        audioAppendsToLoadedData: {
+          get: () => this.playlistController_.audioAppendsToLoadedData_() || 0,
+          enumerable: true
+        },
+        appendsToLoadedData: {
+          get: () => this.playlistController_.appendsToLoadedData_() || 0,
+          enumerable: true
+        },
+        timeToLoadedData: {
+          get: () => this.playlistController_.timeToLoadedData_() || 0,
+          enumerable: true
+        },
+        buffered: {
+          get: () => timeRangesToArray(this.tech_.buffered()),
+          enumerable: true
+        },
+        currentTime: {
+          get: () => this.tech_.currentTime(),
+          enumerable: true
+        },
+        currentSource: {
+          get: () => this.tech_.currentSource_,
+          enumerable: true
+        },
+        currentTech: {
+          get: () => this.tech_.name_,
+          enumerable: true
+        },
+        duration: {
+          get: () => this.tech_.duration(),
+          enumerable: true
+        },
+        main: {
+          get: () => this.playlists.main,
+          enumerable: true
+        },
+        playerDimensions: {
+          get: () => this.tech_.currentDimensions(),
+          enumerable: true
+        },
+        seekable: {
+          get: () => timeRangesToArray(this.tech_.seekable()),
+          enumerable: true
+        },
+        timestamp: {
+          get: () => Date.now(),
+          enumerable: true
+        },
+        videoPlaybackQuality: {
+          get: () => this.tech_.getVideoPlaybackQuality(),
+          enumerable: true
+        }
+      });
+      this.tech_.one('canplay', this.playlistController_.setupFirstPlay.bind(this.playlistController_));
+      this.tech_.on('bandwidthupdate', () => {
+        if (this.options_.useBandwidthFromLocalStorage) {
+          updateVhsLocalStorage({
+            bandwidth: this.bandwidth,
+            throughput: Math.round(this.throughput)
+          });
+        }
+      });
+      this.playlistController_.on('selectedinitialmedia', () => {
+        // Add the manual rendition mix-in to VhsHandler
+        renditionSelectionMixin(this);
+      });
+      this.playlistController_.sourceUpdater_.on('createdsourcebuffers', () => {
+        this.setupEme_();
+      }); // the bandwidth of the primary segment loader is our best
+      // estimate of overall bandwidth
+
+      this.on(this.playlistController_, 'progress', function () {
+        this.tech_.trigger('progress');
+      }); // In the live case, we need to ignore the very first `seeking` event since
+      // that will be the result of the seek-to-live behavior
+
+      this.on(this.playlistController_, 'firstplay', function () {
+        this.ignoreNextSeekingEvent_ = true;
+      });
+      this.setupQualityLevels_(); // do nothing if the tech has been disposed already
+      // this can occur if someone sets the src in player.ready(), for instance
+
+      if (!this.tech_.el()) {
+        return;
+      }
+      this.mediaSourceUrl_ = window.URL.createObjectURL(this.playlistController_.mediaSource);
+      this.tech_.src(this.mediaSourceUrl_);
+    }
+    createKeySessions_() {
+      const audioPlaylistLoader = this.playlistController_.mediaTypes_.AUDIO.activePlaylistLoader;
+      this.logger_('waiting for EME key session creation');
+      waitForKeySessionCreation({
+        player: this.player_,
+        sourceKeySystems: this.source_.keySystems,
+        audioMedia: audioPlaylistLoader && audioPlaylistLoader.media(),
+        mainPlaylists: this.playlists.main.playlists
+      }).then(() => {
+        this.logger_('created EME key session');
+        this.playlistController_.sourceUpdater_.initializedEme();
+      }).catch(err => {
+        this.logger_('error while creating EME key session', err);
+        this.player_.error({
+          message: 'Failed to initialize media keys for EME',
+          code: 3,
+          metadata: {
+            errorType: videojs.Error.EMEKeySessionCreationError
+          }
+        });
+      });
+    }
+    handleWaitingForKey_() {
+      // If waitingforkey is fired, it's possible that the data that's necessary to retrieve
+      // the key is in the manifest. While this should've happened on initial source load, it
+      // may happen again in live streams where the keys change, and the manifest info
+      // reflects the update.
+      //
+      // Because videojs-contrib-eme compares the PSSH data we send to that of PSSH data it's
+      // already requested keys for, we don't have to worry about this generating extraneous
+      // requests.
+      this.logger_('waitingforkey fired, attempting to create any new key sessions');
+      this.createKeySessions_();
+    }
+    /**
+     * If necessary and EME is available, sets up EME options and waits for key session
+     * creation.
+     *
+     * This function also updates the source updater so taht it can be used, as for some
+     * browsers, EME must be configured before content is appended (if appending unencrypted
+     * content before encrypted content).
+     */
+
+    setupEme_() {
+      const audioPlaylistLoader = this.playlistController_.mediaTypes_.AUDIO.activePlaylistLoader;
+      const didSetupEmeOptions = setupEmeOptions({
+        player: this.player_,
+        sourceKeySystems: this.source_.keySystems,
+        media: this.playlists.media(),
+        audioMedia: audioPlaylistLoader && audioPlaylistLoader.media()
+      });
+      this.player_.tech_.on('keystatuschange', e => {
+        this.playlistController_.updatePlaylistByKeyStatus(e.keyId, e.status);
+      });
+      this.handleWaitingForKey_ = this.handleWaitingForKey_.bind(this);
+      this.player_.tech_.on('waitingforkey', this.handleWaitingForKey_);
+      if (!didSetupEmeOptions) {
+        // If EME options were not set up, we've done all we could to initialize EME.
+        this.playlistController_.sourceUpdater_.initializedEme();
+        return;
+      }
+      this.createKeySessions_();
+    }
+    /**
+     * Initializes the quality levels and sets listeners to update them.
+     *
+     * @method setupQualityLevels_
+     * @private
+     */
+
+    setupQualityLevels_() {
+      const player = videojs.players[this.tech_.options_.playerId]; // if there isn't a player or there isn't a qualityLevels plugin
+      // or qualityLevels_ listeners have already been setup, do nothing.
+
+      if (!player || !player.qualityLevels || this.qualityLevels_) {
+        return;
+      }
+      this.qualityLevels_ = player.qualityLevels();
+      this.playlistController_.on('selectedinitialmedia', () => {
+        handleVhsLoadedMetadata(this.qualityLevels_, this);
+      });
+      this.playlists.on('mediachange', () => {
+        handleVhsMediaChange(this.qualityLevels_, this.playlists);
+      });
+    }
+    /**
+     * return the version
+     */
+
+    static version() {
+      return {
+        '@videojs/http-streaming': version$4,
+        'mux.js': version$3,
+        'mpd-parser': version$2,
+        'm3u8-parser': version$1,
+        'aes-decrypter': version
+      };
+    }
+    /**
+     * return the version
+     */
+
+    version() {
+      return this.constructor.version();
+    }
+    canChangeType() {
+      return SourceUpdater.canChangeType();
+    }
+    /**
+     * Begin playing the video.
+     */
+
+    play() {
+      this.playlistController_.play();
+    }
+    /**
+     * a wrapper around the function in PlaylistController
+     */
+
+    setCurrentTime(currentTime) {
+      this.playlistController_.setCurrentTime(currentTime);
+    }
+    /**
+     * a wrapper around the function in PlaylistController
+     */
+
+    duration() {
+      return this.playlistController_.duration();
+    }
+    /**
+     * a wrapper around the function in PlaylistController
+     */
+
+    seekable() {
+      return this.playlistController_.seekable();
+    }
+    /**
+     * Abort all outstanding work and cleanup.
+     */
+
+    dispose() {
+      if (this.playbackWatcher_) {
+        this.playbackWatcher_.dispose();
+      }
+      if (this.playlistController_) {
+        this.playlistController_.dispose();
+      }
+      if (this.qualityLevels_) {
+        this.qualityLevels_.dispose();
+      }
+      if (this.tech_ && this.tech_.vhs) {
+        delete this.tech_.vhs;
+      }
+      if (this.mediaSourceUrl_ && window.URL.revokeObjectURL) {
+        window.URL.revokeObjectURL(this.mediaSourceUrl_);
+        this.mediaSourceUrl_ = null;
+      }
+      if (this.tech_) {
+        this.tech_.off('waitingforkey', this.handleWaitingForKey_);
+      }
+      super.dispose();
+    }
+    convertToProgramTime(time, callback) {
+      return getProgramTime({
+        playlist: this.playlistController_.media(),
+        time,
+        callback
+      });
+    } // the player must be playing before calling this
+
+    seekToProgramTime(programTime, callback, pauseAfterSeek = true, retryCount = 2) {
+      return seekToProgramTime({
+        programTime,
+        playlist: this.playlistController_.media(),
+        retryCount,
+        pauseAfterSeek,
+        seekTo: this.options_.seekTo,
+        tech: this.options_.tech,
+        callback
+      });
+    }
+    /**
+     * Adds the onRequest, onResponse, offRequest and offResponse functions
+     * to the VhsHandler xhr Object.
+     */
+
+    setupXhrHooks_() {
+      /**
+       * A player function for setting an onRequest hook
+       *
+       * @param {function} callback for request modifiction
+       */
+      this.xhr.onRequest = callback => {
+        addOnRequestHook(this.xhr, callback);
+      };
+      /**
+       * A player function for setting an onResponse hook
+       *
+       * @param {callback} callback for response data retrieval
+       */
+
+      this.xhr.onResponse = callback => {
+        addOnResponseHook(this.xhr, callback);
+      };
+      /**
+       * Deletes a player onRequest callback if it exists
+       *
+       * @param {function} callback to delete from the player set
+       */
+
+      this.xhr.offRequest = callback => {
+        removeOnRequestHook(this.xhr, callback);
+      };
+      /**
+       * Deletes a player onResponse callback if it exists
+       *
+       * @param {function} callback to delete from the player set
+       */
+
+      this.xhr.offResponse = callback => {
+        removeOnResponseHook(this.xhr, callback);
+      }; // Trigger an event on the player to notify the user that vhs is ready to set xhr hooks.
+      // This allows hooks to be set before the source is set to vhs when handleSource is called.
+
+      this.player_.trigger('xhr-hooks-ready');
+    }
+  }
+  /**
+   * The Source Handler object, which informs video.js what additional
+   * MIME types are supported and sets up playback. It is registered
+   * automatically to the appropriate tech based on the capabilities of
+   * the browser it is running in. It is not necessary to use or modify
+   * this object in normal usage.
+   */
+
+  const VhsSourceHandler = {
+    name: 'videojs-http-streaming',
+    VERSION: version$4,
+    canHandleSource(srcObj, options = {}) {
+      const localOptions = merge(videojs.options, options);
+      return VhsSourceHandler.canPlayType(srcObj.type, localOptions);
+    },
+    handleSource(source, tech, options = {}) {
+      const localOptions = merge(videojs.options, options);
+      tech.vhs = new VhsHandler(source, tech, localOptions);
+      tech.vhs.xhr = xhrFactory();
+      tech.vhs.setupXhrHooks_();
+      tech.vhs.src(source.src, source.type);
+      return tech.vhs;
+    },
+    canPlayType(type, options) {
+      const simpleType = simpleTypeFromSourceType(type);
+      if (!simpleType) {
+        return '';
+      }
+      const overrideNative = VhsSourceHandler.getOverrideNative(options);
+      const supportsTypeNatively = Vhs.supportsTypeNatively(simpleType);
+      const canUseMsePlayback = !supportsTypeNatively || overrideNative;
+      return canUseMsePlayback ? 'maybe' : '';
+    },
+    getOverrideNative(options = {}) {
+      const {
+        vhs = {}
+      } = options;
+      const defaultOverrideNative = !(videojs.browser.IS_ANY_SAFARI || videojs.browser.IS_IOS);
+      const {
+        overrideNative = defaultOverrideNative
+      } = vhs;
+      return overrideNative;
+    }
+  };
+  /**
+   * Check to see if the native MediaSource object exists and supports
+   * an MP4 container with both H.264 video and AAC-LC audio.
+   *
+   * @return {boolean} if  native media sources are supported
+   */
+
+  const supportsNativeMediaSources = () => {
+    return browserSupportsCodec('avc1.4d400d,mp4a.40.2');
+  }; // register source handlers with the appropriate techs
+
+  if (supportsNativeMediaSources()) {
+    videojs.getTech('Html5').registerSourceHandler(VhsSourceHandler, 0);
+  }
+  videojs.VhsHandler = VhsHandler;
+  videojs.VhsSourceHandler = VhsSourceHandler;
+  videojs.Vhs = Vhs;
+  if (!videojs.use) {
+    videojs.registerComponent('Vhs', Vhs);
+  }
+  videojs.options.vhs = videojs.options.vhs || {};
+  if (!videojs.getPlugin || !videojs.getPlugin('reloadSourceOnError')) {
+    videojs.registerPlugin('reloadSourceOnError', reloadSourceOnError);
+  }
+
+  videojs.DomData = DomData;
+  videojs.log.level('debug');
+
+  return videojs;
+
+}));
diff --git a/priv/static/video.js/alt/video.novtt.js b/priv/static/video.js/alt/video.novtt.js
new file mode 100644
index 0000000..7404ca8
--- /dev/null
+++ b/priv/static/video.js/alt/video.novtt.js
@@ -0,0 +1,63522 @@
+/**
+ * @license
+ * Video.js 8.12.0 <http://videojs.com/>
+ * Copyright Brightcove, Inc. <https://www.brightcove.com/>
+ * Available under Apache License Version 2.0
+ * <https://github.com/videojs/video.js/blob/main/LICENSE>
+ *
+ * Includes vtt.js <https://github.com/mozilla/vtt.js>
+ * Available under Apache License Version 2.0
+ * <https://github.com/mozilla/vtt.js/blob/main/LICENSE>
+ */
+
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojs = factory());
+})(this, (function () { 'use strict';
+
+  var version$5 = "8.12.0";
+
+  /**
+   * An Object that contains lifecycle hooks as keys which point to an array
+   * of functions that are run when a lifecycle is triggered
+   *
+   * @private
+   */
+  const hooks_ = {};
+
+  /**
+   * Get a list of hooks for a specific lifecycle
+   *
+   * @param  {string} type
+   *         the lifecycle to get hooks from
+   *
+   * @param  {Function|Function[]} [fn]
+   *         Optionally add a hook (or hooks) to the lifecycle that your are getting.
+   *
+   * @return {Array}
+   *         an array of hooks, or an empty array if there are none.
+   */
+  const hooks = function (type, fn) {
+    hooks_[type] = hooks_[type] || [];
+    if (fn) {
+      hooks_[type] = hooks_[type].concat(fn);
+    }
+    return hooks_[type];
+  };
+
+  /**
+   * Add a function hook to a specific videojs lifecycle.
+   *
+   * @param {string} type
+   *        the lifecycle to hook the function to.
+   *
+   * @param {Function|Function[]}
+   *        The function or array of functions to attach.
+   */
+  const hook = function (type, fn) {
+    hooks(type, fn);
+  };
+
+  /**
+   * Remove a hook from a specific videojs lifecycle.
+   *
+   * @param  {string} type
+   *         the lifecycle that the function hooked to
+   *
+   * @param  {Function} fn
+   *         The hooked function to remove
+   *
+   * @return {boolean}
+   *         The function that was removed or undef
+   */
+  const removeHook = function (type, fn) {
+    const index = hooks(type).indexOf(fn);
+    if (index <= -1) {
+      return false;
+    }
+    hooks_[type] = hooks_[type].slice();
+    hooks_[type].splice(index, 1);
+    return true;
+  };
+
+  /**
+   * Add a function hook that will only run once to a specific videojs lifecycle.
+   *
+   * @param {string} type
+   *        the lifecycle to hook the function to.
+   *
+   * @param {Function|Function[]}
+   *        The function or array of functions to attach.
+   */
+  const hookOnce = function (type, fn) {
+    hooks(type, [].concat(fn).map(original => {
+      const wrapper = (...args) => {
+        removeHook(type, wrapper);
+        return original(...args);
+      };
+      return wrapper;
+    }));
+  };
+
+  /**
+   * @file fullscreen-api.js
+   * @module fullscreen-api
+   */
+
+  /**
+   * Store the browser-specific methods for the fullscreen API.
+   *
+   * @type {Object}
+   * @see [Specification]{@link https://fullscreen.spec.whatwg.org}
+   * @see [Map Approach From Screenfull.js]{@link https://github.com/sindresorhus/screenfull.js}
+   */
+  const FullscreenApi = {
+    prefixed: true
+  };
+
+  // browser API methods
+  const apiMap = [['requestFullscreen', 'exitFullscreen', 'fullscreenElement', 'fullscreenEnabled', 'fullscreenchange', 'fullscreenerror', 'fullscreen'],
+  // WebKit
+  ['webkitRequestFullscreen', 'webkitExitFullscreen', 'webkitFullscreenElement', 'webkitFullscreenEnabled', 'webkitfullscreenchange', 'webkitfullscreenerror', '-webkit-full-screen']];
+  const specApi = apiMap[0];
+  let browserApi;
+
+  // determine the supported set of functions
+  for (let i = 0; i < apiMap.length; i++) {
+    // check for exitFullscreen function
+    if (apiMap[i][1] in document) {
+      browserApi = apiMap[i];
+      break;
+    }
+  }
+
+  // map the browser API names to the spec API names
+  if (browserApi) {
+    for (let i = 0; i < browserApi.length; i++) {
+      FullscreenApi[specApi[i]] = browserApi[i];
+    }
+    FullscreenApi.prefixed = browserApi[0] !== specApi[0];
+  }
+
+  /**
+   * @file create-logger.js
+   * @module create-logger
+   */
+
+  // This is the private tracking variable for the logging history.
+  let history = [];
+
+  /**
+   * Log messages to the console and history based on the type of message
+   *
+   * @private
+   * @param  {string} name
+   *         The name of the console method to use.
+   *
+   * @param  {Object} log
+   *         The arguments to be passed to the matching console method.
+   *
+   * @param {string} [styles]
+   *        styles for name
+   */
+  const LogByTypeFactory = (name, log, styles) => (type, level, args) => {
+    const lvl = log.levels[level];
+    const lvlRegExp = new RegExp(`^(${lvl})$`);
+    let resultName = name;
+    if (type !== 'log') {
+      // Add the type to the front of the message when it's not "log".
+      args.unshift(type.toUpperCase() + ':');
+    }
+    if (styles) {
+      resultName = `%c${name}`;
+      args.unshift(styles);
+    }
+
+    // Add console prefix after adding to history.
+    args.unshift(resultName + ':');
+
+    // Add a clone of the args at this point to history.
+    if (history) {
+      history.push([].concat(args));
+
+      // only store 1000 history entries
+      const splice = history.length - 1000;
+      history.splice(0, splice > 0 ? splice : 0);
+    }
+
+    // If there's no console then don't try to output messages, but they will
+    // still be stored in history.
+    if (!window.console) {
+      return;
+    }
+
+    // Was setting these once outside of this function, but containing them
+    // in the function makes it easier to test cases where console doesn't exist
+    // when the module is executed.
+    let fn = window.console[type];
+    if (!fn && type === 'debug') {
+      // Certain browsers don't have support for console.debug. For those, we
+      // should default to the closest comparable log.
+      fn = window.console.info || window.console.log;
+    }
+
+    // Bail out if there's no console or if this type is not allowed by the
+    // current logging level.
+    if (!fn || !lvl || !lvlRegExp.test(type)) {
+      return;
+    }
+    fn[Array.isArray(args) ? 'apply' : 'call'](window.console, args);
+  };
+  function createLogger$1(name, delimiter = ':', styles = '') {
+    // This is the private tracking variable for logging level.
+    let level = 'info';
+
+    // the curried logByType bound to the specific log and history
+    let logByType;
+
+    /**
+     * Logs plain debug messages. Similar to `console.log`.
+     *
+     * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+     * of our JSDoc template, we cannot properly document this as both a function
+     * and a namespace, so its function signature is documented here.
+     *
+     * #### Arguments
+     * ##### *args
+     * *[]
+     *
+     * Any combination of values that could be passed to `console.log()`.
+     *
+     * #### Return Value
+     *
+     * `undefined`
+     *
+     * @namespace
+     * @param    {...*} args
+     *           One or more messages or objects that should be logged.
+     */
+    const log = function (...args) {
+      logByType('log', level, args);
+    };
+
+    // This is the logByType helper that the logging methods below use
+    logByType = LogByTypeFactory(name, log, styles);
+
+    /**
+     * Create a new subLogger which chains the old name to the new name.
+     *
+     * For example, doing `videojs.log.createLogger('player')` and then using that logger will log the following:
+     * ```js
+     *  mylogger('foo');
+     *  // > VIDEOJS: player: foo
+     * ```
+     *
+     * @param {string} subName
+     *        The name to add call the new logger
+     * @param {string} [subDelimiter]
+     *        Optional delimiter
+     * @param {string} [subStyles]
+     *        Optional styles
+     * @return {Object}
+     */
+    log.createLogger = (subName, subDelimiter, subStyles) => {
+      const resultDelimiter = subDelimiter !== undefined ? subDelimiter : delimiter;
+      const resultStyles = subStyles !== undefined ? subStyles : styles;
+      const resultName = `${name} ${resultDelimiter} ${subName}`;
+      return createLogger$1(resultName, resultDelimiter, resultStyles);
+    };
+
+    /**
+     * Create a new logger.
+     *
+     * @param {string} newName
+     *        The name for the new logger
+     * @param {string} [newDelimiter]
+     *        Optional delimiter
+     * @param {string} [newStyles]
+     *        Optional styles
+     * @return {Object}
+     */
+    log.createNewLogger = (newName, newDelimiter, newStyles) => {
+      return createLogger$1(newName, newDelimiter, newStyles);
+    };
+
+    /**
+     * Enumeration of available logging levels, where the keys are the level names
+     * and the values are `|`-separated strings containing logging methods allowed
+     * in that logging level. These strings are used to create a regular expression
+     * matching the function name being called.
+     *
+     * Levels provided by Video.js are:
+     *
+     * - `off`: Matches no calls. Any value that can be cast to `false` will have
+     *   this effect. The most restrictive.
+     * - `all`: Matches only Video.js-provided functions (`debug`, `log`,
+     *   `log.warn`, and `log.error`).
+     * - `debug`: Matches `log.debug`, `log`, `log.warn`, and `log.error` calls.
+     * - `info` (default): Matches `log`, `log.warn`, and `log.error` calls.
+     * - `warn`: Matches `log.warn` and `log.error` calls.
+     * - `error`: Matches only `log.error` calls.
+     *
+     * @type {Object}
+     */
+    log.levels = {
+      all: 'debug|log|warn|error',
+      off: '',
+      debug: 'debug|log|warn|error',
+      info: 'log|warn|error',
+      warn: 'warn|error',
+      error: 'error',
+      DEFAULT: level
+    };
+
+    /**
+     * Get or set the current logging level.
+     *
+     * If a string matching a key from {@link module:log.levels} is provided, acts
+     * as a setter.
+     *
+     * @param  {'all'|'debug'|'info'|'warn'|'error'|'off'} [lvl]
+     *         Pass a valid level to set a new logging level.
+     *
+     * @return {string}
+     *         The current logging level.
+     */
+    log.level = lvl => {
+      if (typeof lvl === 'string') {
+        if (!log.levels.hasOwnProperty(lvl)) {
+          throw new Error(`"${lvl}" in not a valid log level`);
+        }
+        level = lvl;
+      }
+      return level;
+    };
+
+    /**
+     * Returns an array containing everything that has been logged to the history.
+     *
+     * This array is a shallow clone of the internal history record. However, its
+     * contents are _not_ cloned; so, mutating objects inside this array will
+     * mutate them in history.
+     *
+     * @return {Array}
+     */
+    log.history = () => history ? [].concat(history) : [];
+
+    /**
+     * Allows you to filter the history by the given logger name
+     *
+     * @param {string} fname
+     *        The name to filter by
+     *
+     * @return {Array}
+     *         The filtered list to return
+     */
+    log.history.filter = fname => {
+      return (history || []).filter(historyItem => {
+        // if the first item in each historyItem includes `fname`, then it's a match
+        return new RegExp(`.*${fname}.*`).test(historyItem[0]);
+      });
+    };
+
+    /**
+     * Clears the internal history tracking, but does not prevent further history
+     * tracking.
+     */
+    log.history.clear = () => {
+      if (history) {
+        history.length = 0;
+      }
+    };
+
+    /**
+     * Disable history tracking if it is currently enabled.
+     */
+    log.history.disable = () => {
+      if (history !== null) {
+        history.length = 0;
+        history = null;
+      }
+    };
+
+    /**
+     * Enable history tracking if it is currently disabled.
+     */
+    log.history.enable = () => {
+      if (history === null) {
+        history = [];
+      }
+    };
+
+    /**
+     * Logs error messages. Similar to `console.error`.
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as an error
+     */
+    log.error = (...args) => logByType('error', level, args);
+
+    /**
+     * Logs warning messages. Similar to `console.warn`.
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as a warning.
+     */
+    log.warn = (...args) => logByType('warn', level, args);
+
+    /**
+     * Logs debug messages. Similar to `console.debug`, but may also act as a comparable
+     * log if `console.debug` is not available
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as debug.
+     */
+    log.debug = (...args) => logByType('debug', level, args);
+    return log;
+  }
+
+  /**
+   * @file log.js
+   * @module log
+   */
+  const log$1 = createLogger$1('VIDEOJS');
+  const createLogger = log$1.createLogger;
+
+  /**
+   * @file obj.js
+   * @module obj
+   */
+
+  /**
+   * @callback obj:EachCallback
+   *
+   * @param {*} value
+   *        The current key for the object that is being iterated over.
+   *
+   * @param {string} key
+   *        The current key-value for object that is being iterated over
+   */
+
+  /**
+   * @callback obj:ReduceCallback
+   *
+   * @param {*} accum
+   *        The value that is accumulating over the reduce loop.
+   *
+   * @param {*} value
+   *        The current key for the object that is being iterated over.
+   *
+   * @param {string} key
+   *        The current key-value for object that is being iterated over
+   *
+   * @return {*}
+   *         The new accumulated value.
+   */
+  const toString$1 = Object.prototype.toString;
+
+  /**
+   * Get the keys of an Object
+   *
+   * @param {Object}
+   *        The Object to get the keys from
+   *
+   * @return {string[]}
+   *         An array of the keys from the object. Returns an empty array if the
+   *         object passed in was invalid or had no keys.
+   *
+   * @private
+   */
+  const keys = function (object) {
+    return isObject$1(object) ? Object.keys(object) : [];
+  };
+
+  /**
+   * Array-like iteration for objects.
+   *
+   * @param {Object} object
+   *        The object to iterate over
+   *
+   * @param {obj:EachCallback} fn
+   *        The callback function which is called for each key in the object.
+   */
+  function each(object, fn) {
+    keys(object).forEach(key => fn(object[key], key));
+  }
+
+  /**
+   * Array-like reduce for objects.
+   *
+   * @param {Object} object
+   *        The Object that you want to reduce.
+   *
+   * @param {Function} fn
+   *         A callback function which is called for each key in the object. It
+   *         receives the accumulated value and the per-iteration value and key
+   *         as arguments.
+   *
+   * @param {*} [initial = 0]
+   *        Starting value
+   *
+   * @return {*}
+   *         The final accumulated value.
+   */
+  function reduce(object, fn, initial = 0) {
+    return keys(object).reduce((accum, key) => fn(accum, object[key], key), initial);
+  }
+
+  /**
+   * Returns whether a value is an object of any kind - including DOM nodes,
+   * arrays, regular expressions, etc. Not functions, though.
+   *
+   * This avoids the gotcha where using `typeof` on a `null` value
+   * results in `'object'`.
+   *
+   * @param  {Object} value
+   * @return {boolean}
+   */
+  function isObject$1(value) {
+    return !!value && typeof value === 'object';
+  }
+
+  /**
+   * Returns whether an object appears to be a "plain" object - that is, a
+   * direct instance of `Object`.
+   *
+   * @param  {Object} value
+   * @return {boolean}
+   */
+  function isPlain(value) {
+    return isObject$1(value) && toString$1.call(value) === '[object Object]' && value.constructor === Object;
+  }
+
+  /**
+   * Merge two objects recursively.
+   *
+   * Performs a deep merge like
+   * {@link https://lodash.com/docs/4.17.10#merge|lodash.merge}, but only merges
+   * plain objects (not arrays, elements, or anything else).
+   *
+   * Non-plain object values will be copied directly from the right-most
+   * argument.
+   *
+   * @param   {Object[]} sources
+   *          One or more objects to merge into a new object.
+   *
+   * @return {Object}
+   *          A new object that is the merged result of all sources.
+   */
+  function merge$2(...sources) {
+    const result = {};
+    sources.forEach(source => {
+      if (!source) {
+        return;
+      }
+      each(source, (value, key) => {
+        if (!isPlain(value)) {
+          result[key] = value;
+          return;
+        }
+        if (!isPlain(result[key])) {
+          result[key] = {};
+        }
+        result[key] = merge$2(result[key], value);
+      });
+    });
+    return result;
+  }
+
+  /**
+   * Returns an array of values for a given object
+   *
+   * @param  {Object} source - target object
+   * @return {Array<unknown>} - object values
+   */
+  function values$1(source = {}) {
+    const result = [];
+    for (const key in source) {
+      if (source.hasOwnProperty(key)) {
+        const value = source[key];
+        result.push(value);
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Object.defineProperty but "lazy", which means that the value is only set after
+   * it is retrieved the first time, rather than being set right away.
+   *
+   * @param {Object} obj the object to set the property on
+   * @param {string} key the key for the property to set
+   * @param {Function} getValue the function used to get the value when it is needed.
+   * @param {boolean} setter whether a setter should be allowed or not
+   */
+  function defineLazyProperty(obj, key, getValue, setter = true) {
+    const set = value => Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      writable: true
+    });
+    const options = {
+      configurable: true,
+      enumerable: true,
+      get() {
+        const value = getValue();
+        set(value);
+        return value;
+      }
+    };
+    if (setter) {
+      options.set = set;
+    }
+    return Object.defineProperty(obj, key, options);
+  }
+
+  var Obj = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    each: each,
+    reduce: reduce,
+    isObject: isObject$1,
+    isPlain: isPlain,
+    merge: merge$2,
+    values: values$1,
+    defineLazyProperty: defineLazyProperty
+  });
+
+  /**
+   * @file browser.js
+   * @module browser
+   */
+
+  /**
+   * Whether or not this device is an iPod.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_IPOD = false;
+
+  /**
+   * The detected iOS version - or `null`.
+   *
+   * @static
+   * @type {string|null}
+   */
+  let IOS_VERSION = null;
+
+  /**
+   * Whether or not this is an Android device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_ANDROID = false;
+
+  /**
+   * The detected Android version - or `null` if not Android or indeterminable.
+   *
+   * @static
+   * @type {number|string|null}
+   */
+  let ANDROID_VERSION;
+
+  /**
+   * Whether or not this is Mozilla Firefox.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_FIREFOX = false;
+
+  /**
+   * Whether or not this is Microsoft Edge.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_EDGE = false;
+
+  /**
+   * Whether or not this is any Chromium Browser
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_CHROMIUM = false;
+
+  /**
+   * Whether or not this is any Chromium browser that is not Edge.
+   *
+   * This will also be `true` for Chrome on iOS, which will have different support
+   * as it is actually Safari under the hood.
+   *
+   * Deprecated, as the behaviour to not match Edge was to prevent Legacy Edge's UA matching.
+   * IS_CHROMIUM should be used instead.
+   * "Chromium but not Edge" could be explicitly tested with IS_CHROMIUM && !IS_EDGE
+   *
+   * @static
+   * @deprecated
+   * @type {Boolean}
+   */
+  let IS_CHROME = false;
+
+  /**
+   * The detected Chromium version - or `null`.
+   *
+   * @static
+   * @type {number|null}
+   */
+  let CHROMIUM_VERSION = null;
+
+  /**
+   * The detected Google Chrome version - or `null`.
+   * This has always been the _Chromium_ version, i.e. would return on Chromium Edge.
+   * Deprecated, use CHROMIUM_VERSION instead.
+   *
+   * @static
+   * @deprecated
+   * @type {number|null}
+   */
+  let CHROME_VERSION = null;
+
+  /**
+   * The detected Internet Explorer version - or `null`.
+   *
+   * @static
+   * @deprecated
+   * @type {number|null}
+   */
+  let IE_VERSION = null;
+
+  /**
+   * Whether or not this is desktop Safari.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_SAFARI = false;
+
+  /**
+   * Whether or not this is a Windows machine.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_WINDOWS = false;
+
+  /**
+   * Whether or not this device is an iPad.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_IPAD = false;
+
+  /**
+   * Whether or not this device is an iPhone.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  // The Facebook app's UIWebView identifies as both an iPhone and iPad, so
+  // to identify iPhones, we need to exclude iPads.
+  // http://artsy.github.io/blog/2012/10/18/the-perils-of-ios-user-agent-sniffing/
+  let IS_IPHONE = false;
+
+  /**
+   * Whether or not this is a Tizen device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_TIZEN = false;
+
+  /**
+   * Whether or not this is a WebOS device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_WEBOS = false;
+
+  /**
+   * Whether or not this is a Smart TV (Tizen or WebOS) device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_SMART_TV = false;
+
+  /**
+   * Whether or not this device is touch-enabled.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const TOUCH_ENABLED = Boolean(isReal() && ('ontouchstart' in window || window.navigator.maxTouchPoints || window.DocumentTouch && window.document instanceof window.DocumentTouch));
+  const UAD = window.navigator && window.navigator.userAgentData;
+  if (UAD && UAD.platform && UAD.brands) {
+    // If userAgentData is present, use it instead of userAgent to avoid warnings
+    // Currently only implemented on Chromium
+    // userAgentData does not expose Android version, so ANDROID_VERSION remains `null`
+
+    IS_ANDROID = UAD.platform === 'Android';
+    IS_EDGE = Boolean(UAD.brands.find(b => b.brand === 'Microsoft Edge'));
+    IS_CHROMIUM = Boolean(UAD.brands.find(b => b.brand === 'Chromium'));
+    IS_CHROME = !IS_EDGE && IS_CHROMIUM;
+    CHROMIUM_VERSION = CHROME_VERSION = (UAD.brands.find(b => b.brand === 'Chromium') || {}).version || null;
+    IS_WINDOWS = UAD.platform === 'Windows';
+  }
+
+  // If the browser is not Chromium, either userAgentData is not present which could be an old Chromium browser,
+  //  or it's a browser that has added userAgentData since that we don't have tests for yet. In either case,
+  // the checks need to be made agiainst the regular userAgent string.
+  if (!IS_CHROMIUM) {
+    const USER_AGENT = window.navigator && window.navigator.userAgent || '';
+    IS_IPOD = /iPod/i.test(USER_AGENT);
+    IOS_VERSION = function () {
+      const match = USER_AGENT.match(/OS (\d+)_/i);
+      if (match && match[1]) {
+        return match[1];
+      }
+      return null;
+    }();
+    IS_ANDROID = /Android/i.test(USER_AGENT);
+    ANDROID_VERSION = function () {
+      // This matches Android Major.Minor.Patch versions
+      // ANDROID_VERSION is Major.Minor as a Number, if Minor isn't available, then only Major is returned
+      const match = USER_AGENT.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i);
+      if (!match) {
+        return null;
+      }
+      const major = match[1] && parseFloat(match[1]);
+      const minor = match[2] && parseFloat(match[2]);
+      if (major && minor) {
+        return parseFloat(match[1] + '.' + match[2]);
+      } else if (major) {
+        return major;
+      }
+      return null;
+    }();
+    IS_FIREFOX = /Firefox/i.test(USER_AGENT);
+    IS_EDGE = /Edg/i.test(USER_AGENT);
+    IS_CHROMIUM = /Chrome/i.test(USER_AGENT) || /CriOS/i.test(USER_AGENT);
+    IS_CHROME = !IS_EDGE && IS_CHROMIUM;
+    CHROMIUM_VERSION = CHROME_VERSION = function () {
+      const match = USER_AGENT.match(/(Chrome|CriOS)\/(\d+)/);
+      if (match && match[2]) {
+        return parseFloat(match[2]);
+      }
+      return null;
+    }();
+    IE_VERSION = function () {
+      const result = /MSIE\s(\d+)\.\d/.exec(USER_AGENT);
+      let version = result && parseFloat(result[1]);
+      if (!version && /Trident\/7.0/i.test(USER_AGENT) && /rv:11.0/.test(USER_AGENT)) {
+        // IE 11 has a different user agent string than other IE versions
+        version = 11.0;
+      }
+      return version;
+    }();
+    IS_TIZEN = /Tizen/i.test(USER_AGENT);
+    IS_WEBOS = /Web0S/i.test(USER_AGENT);
+    IS_SMART_TV = IS_TIZEN || IS_WEBOS;
+    IS_SAFARI = /Safari/i.test(USER_AGENT) && !IS_CHROME && !IS_ANDROID && !IS_EDGE && !IS_SMART_TV;
+    IS_WINDOWS = /Windows/i.test(USER_AGENT);
+    IS_IPAD = /iPad/i.test(USER_AGENT) || IS_SAFARI && TOUCH_ENABLED && !/iPhone/i.test(USER_AGENT);
+    IS_IPHONE = /iPhone/i.test(USER_AGENT) && !IS_IPAD;
+  }
+
+  /**
+   * Whether or not this is an iOS device.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const IS_IOS = IS_IPHONE || IS_IPAD || IS_IPOD;
+
+  /**
+   * Whether or not this is any flavor of Safari - including iOS.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const IS_ANY_SAFARI = (IS_SAFARI || IS_IOS) && !IS_CHROME;
+
+  var browser = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    get IS_IPOD () { return IS_IPOD; },
+    get IOS_VERSION () { return IOS_VERSION; },
+    get IS_ANDROID () { return IS_ANDROID; },
+    get ANDROID_VERSION () { return ANDROID_VERSION; },
+    get IS_FIREFOX () { return IS_FIREFOX; },
+    get IS_EDGE () { return IS_EDGE; },
+    get IS_CHROMIUM () { return IS_CHROMIUM; },
+    get IS_CHROME () { return IS_CHROME; },
+    get CHROMIUM_VERSION () { return CHROMIUM_VERSION; },
+    get CHROME_VERSION () { return CHROME_VERSION; },
+    get IE_VERSION () { return IE_VERSION; },
+    get IS_SAFARI () { return IS_SAFARI; },
+    get IS_WINDOWS () { return IS_WINDOWS; },
+    get IS_IPAD () { return IS_IPAD; },
+    get IS_IPHONE () { return IS_IPHONE; },
+    get IS_TIZEN () { return IS_TIZEN; },
+    get IS_WEBOS () { return IS_WEBOS; },
+    get IS_SMART_TV () { return IS_SMART_TV; },
+    TOUCH_ENABLED: TOUCH_ENABLED,
+    IS_IOS: IS_IOS,
+    IS_ANY_SAFARI: IS_ANY_SAFARI
+  });
+
+  /**
+   * @file dom.js
+   * @module dom
+   */
+
+  /**
+   * Detect if a value is a string with any non-whitespace characters.
+   *
+   * @private
+   * @param  {string} str
+   *         The string to check
+   *
+   * @return {boolean}
+   *         Will be `true` if the string is non-blank, `false` otherwise.
+   *
+   */
+  function isNonBlankString(str) {
+    // we use str.trim as it will trim any whitespace characters
+    // from the front or back of non-whitespace characters. aka
+    // Any string that contains non-whitespace characters will
+    // still contain them after `trim` but whitespace only strings
+    // will have a length of 0, failing this check.
+    return typeof str === 'string' && Boolean(str.trim());
+  }
+
+  /**
+   * Throws an error if the passed string has whitespace. This is used by
+   * class methods to be relatively consistent with the classList API.
+   *
+   * @private
+   * @param  {string} str
+   *         The string to check for whitespace.
+   *
+   * @throws {Error}
+   *         Throws an error if there is whitespace in the string.
+   */
+  function throwIfWhitespace(str) {
+    // str.indexOf instead of regex because str.indexOf is faster performance wise.
+    if (str.indexOf(' ') >= 0) {
+      throw new Error('class has illegal whitespace characters');
+    }
+  }
+
+  /**
+   * Whether the current DOM interface appears to be real (i.e. not simulated).
+   *
+   * @return {boolean}
+   *         Will be `true` if the DOM appears to be real, `false` otherwise.
+   */
+  function isReal() {
+    // Both document and window will never be undefined thanks to `global`.
+    return document === window.document;
+  }
+
+  /**
+   * Determines, via duck typing, whether or not a value is a DOM element.
+   *
+   * @param  {*} value
+   *         The value to check.
+   *
+   * @return {boolean}
+   *         Will be `true` if the value is a DOM element, `false` otherwise.
+   */
+  function isEl(value) {
+    return isObject$1(value) && value.nodeType === 1;
+  }
+
+  /**
+   * Determines if the current DOM is embedded in an iframe.
+   *
+   * @return {boolean}
+   *         Will be `true` if the DOM is embedded in an iframe, `false`
+   *         otherwise.
+   */
+  function isInFrame() {
+    // We need a try/catch here because Safari will throw errors when attempting
+    // to get either `parent` or `self`
+    try {
+      return window.parent !== window.self;
+    } catch (x) {
+      return true;
+    }
+  }
+
+  /**
+   * Creates functions to query the DOM using a given method.
+   *
+   * @private
+   * @param   {string} method
+   *          The method to create the query with.
+   *
+   * @return  {Function}
+   *          The query method
+   */
+  function createQuerier(method) {
+    return function (selector, context) {
+      if (!isNonBlankString(selector)) {
+        return document[method](null);
+      }
+      if (isNonBlankString(context)) {
+        context = document.querySelector(context);
+      }
+      const ctx = isEl(context) ? context : document;
+      return ctx[method] && ctx[method](selector);
+    };
+  }
+
+  /**
+   * Creates an element and applies properties, attributes, and inserts content.
+   *
+   * @param  {string} [tagName='div']
+   *         Name of tag to be created.
+   *
+   * @param  {Object} [properties={}]
+   *         Element properties to be applied.
+   *
+   * @param  {Object} [attributes={}]
+   *         Element attributes to be applied.
+   *
+   * @param {ContentDescriptor} [content]
+   *        A content descriptor object.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  function createEl(tagName = 'div', properties = {}, attributes = {}, content) {
+    const el = document.createElement(tagName);
+    Object.getOwnPropertyNames(properties).forEach(function (propName) {
+      const val = properties[propName];
+
+      // Handle textContent since it's not supported everywhere and we have a
+      // method for it.
+      if (propName === 'textContent') {
+        textContent(el, val);
+      } else if (el[propName] !== val || propName === 'tabIndex') {
+        el[propName] = val;
+      }
+    });
+    Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
+      el.setAttribute(attrName, attributes[attrName]);
+    });
+    if (content) {
+      appendContent(el, content);
+    }
+    return el;
+  }
+
+  /**
+   * Injects text into an element, replacing any existing contents entirely.
+   *
+   * @param  {HTMLElement} el
+   *         The element to add text content into
+   *
+   * @param  {string} text
+   *         The text content to add.
+   *
+   * @return {Element}
+   *         The element with added text content.
+   */
+  function textContent(el, text) {
+    if (typeof el.textContent === 'undefined') {
+      el.innerText = text;
+    } else {
+      el.textContent = text;
+    }
+    return el;
+  }
+
+  /**
+   * Insert an element as the first child node of another
+   *
+   * @param {Element} child
+   *        Element to insert
+   *
+   * @param {Element} parent
+   *        Element to insert child into
+   */
+  function prependTo(child, parent) {
+    if (parent.firstChild) {
+      parent.insertBefore(child, parent.firstChild);
+    } else {
+      parent.appendChild(child);
+    }
+  }
+
+  /**
+   * Check if an element has a class name.
+   *
+   * @param  {Element} element
+   *         Element to check
+   *
+   * @param  {string} classToCheck
+   *         Class name to check for
+   *
+   * @return {boolean}
+   *         Will be `true` if the element has a class, `false` otherwise.
+   *
+   * @throws {Error}
+   *         Throws an error if `classToCheck` has white space.
+   */
+  function hasClass(element, classToCheck) {
+    throwIfWhitespace(classToCheck);
+    return element.classList.contains(classToCheck);
+  }
+
+  /**
+   * Add a class name to an element.
+   *
+   * @param  {Element} element
+   *         Element to add class name to.
+   *
+   * @param  {...string} classesToAdd
+   *         One or more class name to add.
+   *
+   * @return {Element}
+   *         The DOM element with the added class name.
+   */
+  function addClass(element, ...classesToAdd) {
+    element.classList.add(...classesToAdd.reduce((prev, current) => prev.concat(current.split(/\s+/)), []));
+    return element;
+  }
+
+  /**
+   * Remove a class name from an element.
+   *
+   * @param  {Element} element
+   *         Element to remove a class name from.
+   *
+   * @param  {...string} classesToRemove
+   *         One or more class name to remove.
+   *
+   * @return {Element}
+   *         The DOM element with class name removed.
+   */
+  function removeClass(element, ...classesToRemove) {
+    // Protect in case the player gets disposed
+    if (!element) {
+      log$1.warn("removeClass was called with an element that doesn't exist");
+      return null;
+    }
+    element.classList.remove(...classesToRemove.reduce((prev, current) => prev.concat(current.split(/\s+/)), []));
+    return element;
+  }
+
+  /**
+   * The callback definition for toggleClass.
+   *
+   * @callback module:dom~PredicateCallback
+   * @param    {Element} element
+   *           The DOM element of the Component.
+   *
+   * @param    {string} classToToggle
+   *           The `className` that wants to be toggled
+   *
+   * @return   {boolean|undefined}
+   *           If `true` is returned, the `classToToggle` will be added to the
+   *           `element`. If `false`, the `classToToggle` will be removed from
+   *           the `element`. If `undefined`, the callback will be ignored.
+   */
+
+  /**
+   * Adds or removes a class name to/from an element depending on an optional
+   * condition or the presence/absence of the class name.
+   *
+   * @param  {Element} element
+   *         The element to toggle a class name on.
+   *
+   * @param  {string} classToToggle
+   *         The class that should be toggled.
+   *
+   * @param  {boolean|module:dom~PredicateCallback} [predicate]
+   *         See the return value for {@link module:dom~PredicateCallback}
+   *
+   * @return {Element}
+   *         The element with a class that has been toggled.
+   */
+  function toggleClass(element, classToToggle, predicate) {
+    if (typeof predicate === 'function') {
+      predicate = predicate(element, classToToggle);
+    }
+    if (typeof predicate !== 'boolean') {
+      predicate = undefined;
+    }
+    classToToggle.split(/\s+/).forEach(className => element.classList.toggle(className, predicate));
+    return element;
+  }
+
+  /**
+   * Apply attributes to an HTML element.
+   *
+   * @param {Element} el
+   *        Element to add attributes to.
+   *
+   * @param {Object} [attributes]
+   *        Attributes to be applied.
+   */
+  function setAttributes(el, attributes) {
+    Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
+      const attrValue = attributes[attrName];
+      if (attrValue === null || typeof attrValue === 'undefined' || attrValue === false) {
+        el.removeAttribute(attrName);
+      } else {
+        el.setAttribute(attrName, attrValue === true ? '' : attrValue);
+      }
+    });
+  }
+
+  /**
+   * Get an element's attribute values, as defined on the HTML tag.
+   *
+   * Attributes are not the same as properties. They're defined on the tag
+   * or with setAttribute.
+   *
+   * @param  {Element} tag
+   *         Element from which to get tag attributes.
+   *
+   * @return {Object}
+   *         All attributes of the element. Boolean attributes will be `true` or
+   *         `false`, others will be strings.
+   */
+  function getAttributes(tag) {
+    const obj = {};
+
+    // known boolean attributes
+    // we can check for matching boolean properties, but not all browsers
+    // and not all tags know about these attributes, so, we still want to check them manually
+    const knownBooleans = ['autoplay', 'controls', 'playsinline', 'loop', 'muted', 'default', 'defaultMuted'];
+    if (tag && tag.attributes && tag.attributes.length > 0) {
+      const attrs = tag.attributes;
+      for (let i = attrs.length - 1; i >= 0; i--) {
+        const attrName = attrs[i].name;
+        /** @type {boolean|string} */
+        let attrVal = attrs[i].value;
+
+        // check for known booleans
+        // the matching element property will return a value for typeof
+        if (knownBooleans.includes(attrName)) {
+          // the value of an included boolean attribute is typically an empty
+          // string ('') which would equal false if we just check for a false value.
+          // we also don't want support bad code like autoplay='false'
+          attrVal = attrVal !== null ? true : false;
+        }
+        obj[attrName] = attrVal;
+      }
+    }
+    return obj;
+  }
+
+  /**
+   * Get the value of an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to get the value of.
+   *
+   * @return {string}
+   *         The value of the attribute.
+   */
+  function getAttribute(el, attribute) {
+    return el.getAttribute(attribute);
+  }
+
+  /**
+   * Set the value of an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to set.
+   *
+   * @param {string} value
+   *        Value to set the attribute to.
+   */
+  function setAttribute(el, attribute, value) {
+    el.setAttribute(attribute, value);
+  }
+
+  /**
+   * Remove an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to remove.
+   */
+  function removeAttribute(el, attribute) {
+    el.removeAttribute(attribute);
+  }
+
+  /**
+   * Attempt to block the ability to select text.
+   */
+  function blockTextSelection() {
+    document.body.focus();
+    document.onselectstart = function () {
+      return false;
+    };
+  }
+
+  /**
+   * Turn off text selection blocking.
+   */
+  function unblockTextSelection() {
+    document.onselectstart = function () {
+      return true;
+    };
+  }
+
+  /**
+   * Identical to the native `getBoundingClientRect` function, but ensures that
+   * the method is supported at all (it is in all browsers we claim to support)
+   * and that the element is in the DOM before continuing.
+   *
+   * This wrapper function also shims properties which are not provided by some
+   * older browsers (namely, IE8).
+   *
+   * Additionally, some browsers do not support adding properties to a
+   * `ClientRect`/`DOMRect` object; so, we shallow-copy it with the standard
+   * properties (except `x` and `y` which are not widely supported). This helps
+   * avoid implementations where keys are non-enumerable.
+   *
+   * @param  {Element} el
+   *         Element whose `ClientRect` we want to calculate.
+   *
+   * @return {Object|undefined}
+   *         Always returns a plain object - or `undefined` if it cannot.
+   */
+  function getBoundingClientRect(el) {
+    if (el && el.getBoundingClientRect && el.parentNode) {
+      const rect = el.getBoundingClientRect();
+      const result = {};
+      ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach(k => {
+        if (rect[k] !== undefined) {
+          result[k] = rect[k];
+        }
+      });
+      if (!result.height) {
+        result.height = parseFloat(computedStyle(el, 'height'));
+      }
+      if (!result.width) {
+        result.width = parseFloat(computedStyle(el, 'width'));
+      }
+      return result;
+    }
+  }
+
+  /**
+   * Represents the position of a DOM element on the page.
+   *
+   * @typedef  {Object} module:dom~Position
+   *
+   * @property {number} left
+   *           Pixels to the left.
+   *
+   * @property {number} top
+   *           Pixels from the top.
+   */
+
+  /**
+   * Get the position of an element in the DOM.
+   *
+   * Uses `getBoundingClientRect` technique from John Resig.
+   *
+   * @see http://ejohn.org/blog/getboundingclientrect-is-awesome/
+   *
+   * @param  {Element} el
+   *         Element from which to get offset.
+   *
+   * @return {module:dom~Position}
+   *         The position of the element that was passed in.
+   */
+  function findPosition(el) {
+    if (!el || el && !el.offsetParent) {
+      return {
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0
+      };
+    }
+    const width = el.offsetWidth;
+    const height = el.offsetHeight;
+    let left = 0;
+    let top = 0;
+    while (el.offsetParent && el !== document[FullscreenApi.fullscreenElement]) {
+      left += el.offsetLeft;
+      top += el.offsetTop;
+      el = el.offsetParent;
+    }
+    return {
+      left,
+      top,
+      width,
+      height
+    };
+  }
+
+  /**
+   * Represents x and y coordinates for a DOM element or mouse pointer.
+   *
+   * @typedef  {Object} module:dom~Coordinates
+   *
+   * @property {number} x
+   *           x coordinate in pixels
+   *
+   * @property {number} y
+   *           y coordinate in pixels
+   */
+
+  /**
+   * Get the pointer position within an element.
+   *
+   * The base on the coordinates are the bottom left of the element.
+   *
+   * @param  {Element} el
+   *         Element on which to get the pointer position on.
+   *
+   * @param  {Event} event
+   *         Event object.
+   *
+   * @return {module:dom~Coordinates}
+   *         A coordinates object corresponding to the mouse position.
+   *
+   */
+  function getPointerPosition(el, event) {
+    const translated = {
+      x: 0,
+      y: 0
+    };
+    if (IS_IOS) {
+      let item = el;
+      while (item && item.nodeName.toLowerCase() !== 'html') {
+        const transform = computedStyle(item, 'transform');
+        if (/^matrix/.test(transform)) {
+          const values = transform.slice(7, -1).split(/,\s/).map(Number);
+          translated.x += values[4];
+          translated.y += values[5];
+        } else if (/^matrix3d/.test(transform)) {
+          const values = transform.slice(9, -1).split(/,\s/).map(Number);
+          translated.x += values[12];
+          translated.y += values[13];
+        }
+        item = item.parentNode;
+      }
+    }
+    const position = {};
+    const boxTarget = findPosition(event.target);
+    const box = findPosition(el);
+    const boxW = box.width;
+    const boxH = box.height;
+    let offsetY = event.offsetY - (box.top - boxTarget.top);
+    let offsetX = event.offsetX - (box.left - boxTarget.left);
+    if (event.changedTouches) {
+      offsetX = event.changedTouches[0].pageX - box.left;
+      offsetY = event.changedTouches[0].pageY + box.top;
+      if (IS_IOS) {
+        offsetX -= translated.x;
+        offsetY -= translated.y;
+      }
+    }
+    position.y = 1 - Math.max(0, Math.min(1, offsetY / boxH));
+    position.x = Math.max(0, Math.min(1, offsetX / boxW));
+    return position;
+  }
+
+  /**
+   * Determines, via duck typing, whether or not a value is a text node.
+   *
+   * @param  {*} value
+   *         Check if this value is a text node.
+   *
+   * @return {boolean}
+   *         Will be `true` if the value is a text node, `false` otherwise.
+   */
+  function isTextNode$1(value) {
+    return isObject$1(value) && value.nodeType === 3;
+  }
+
+  /**
+   * Empties the contents of an element.
+   *
+   * @param  {Element} el
+   *         The element to empty children from
+   *
+   * @return {Element}
+   *         The element with no children
+   */
+  function emptyEl(el) {
+    while (el.firstChild) {
+      el.removeChild(el.firstChild);
+    }
+    return el;
+  }
+
+  /**
+   * This is a mixed value that describes content to be injected into the DOM
+   * via some method. It can be of the following types:
+   *
+   * Type       | Description
+   * -----------|-------------
+   * `string`   | The value will be normalized into a text node.
+   * `Element`  | The value will be accepted as-is.
+   * `Text`     | A TextNode. The value will be accepted as-is.
+   * `Array`    | A one-dimensional array of strings, elements, text nodes, or functions. These functions should return a string, element, or text node (any other return value, like an array, will be ignored).
+   * `Function` | A function, which is expected to return a string, element, text node, or array - any of the other possible values described above. This means that a content descriptor could be a function that returns an array of functions, but those second-level functions must return strings, elements, or text nodes.
+   *
+   * @typedef {string|Element|Text|Array|Function} ContentDescriptor
+   */
+
+  /**
+   * Normalizes content for eventual insertion into the DOM.
+   *
+   * This allows a wide range of content definition methods, but helps protect
+   * from falling into the trap of simply writing to `innerHTML`, which could
+   * be an XSS concern.
+   *
+   * The content for an element can be passed in multiple types and
+   * combinations, whose behavior is as follows:
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Array}
+   *         All of the content that was passed in, normalized to an array of
+   *         elements or text nodes.
+   */
+  function normalizeContent(content) {
+    // First, invoke content if it is a function. If it produces an array,
+    // that needs to happen before normalization.
+    if (typeof content === 'function') {
+      content = content();
+    }
+
+    // Next up, normalize to an array, so one or many items can be normalized,
+    // filtered, and returned.
+    return (Array.isArray(content) ? content : [content]).map(value => {
+      // First, invoke value if it is a function to produce a new value,
+      // which will be subsequently normalized to a Node of some kind.
+      if (typeof value === 'function') {
+        value = value();
+      }
+      if (isEl(value) || isTextNode$1(value)) {
+        return value;
+      }
+      if (typeof value === 'string' && /\S/.test(value)) {
+        return document.createTextNode(value);
+      }
+    }).filter(value => value);
+  }
+
+  /**
+   * Normalizes and appends content to an element.
+   *
+   * @param  {Element} el
+   *         Element to append normalized content to.
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Element}
+   *         The element with appended normalized content.
+   */
+  function appendContent(el, content) {
+    normalizeContent(content).forEach(node => el.appendChild(node));
+    return el;
+  }
+
+  /**
+   * Normalizes and inserts content into an element; this is identical to
+   * `appendContent()`, except it empties the element first.
+   *
+   * @param {Element} el
+   *        Element to insert normalized content into.
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Element}
+   *         The element with inserted normalized content.
+   */
+  function insertContent(el, content) {
+    return appendContent(emptyEl(el), content);
+  }
+
+  /**
+   * Check if an event was a single left click.
+   *
+   * @param  {MouseEvent} event
+   *         Event object.
+   *
+   * @return {boolean}
+   *         Will be `true` if a single left click, `false` otherwise.
+   */
+  function isSingleLeftClick(event) {
+    // Note: if you create something draggable, be sure to
+    // call it on both `mousedown` and `mousemove` event,
+    // otherwise `mousedown` should be enough for a button
+
+    if (event.button === undefined && event.buttons === undefined) {
+      // Why do we need `buttons` ?
+      // Because, middle mouse sometimes have this:
+      // e.button === 0 and e.buttons === 4
+      // Furthermore, we want to prevent combination click, something like
+      // HOLD middlemouse then left click, that would be
+      // e.button === 0, e.buttons === 5
+      // just `button` is not gonna work
+
+      // Alright, then what this block does ?
+      // this is for chrome `simulate mobile devices`
+      // I want to support this as well
+
+      return true;
+    }
+    if (event.button === 0 && event.buttons === undefined) {
+      // Touch screen, sometimes on some specific device, `buttons`
+      // doesn't have anything (safari on ios, blackberry...)
+
+      return true;
+    }
+
+    // `mouseup` event on a single left click has
+    // `button` and `buttons` equal to 0
+    if (event.type === 'mouseup' && event.button === 0 && event.buttons === 0) {
+      return true;
+    }
+    if (event.button !== 0 || event.buttons !== 1) {
+      // This is the reason we have those if else block above
+      // if any special case we can catch and let it slide
+      // we do it above, when get to here, this definitely
+      // is-not-left-click
+
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * Finds a single DOM element matching `selector` within the optional
+   * `context` of another DOM element (defaulting to `document`).
+   *
+   * @param  {string} selector
+   *         A valid CSS selector, which will be passed to `querySelector`.
+   *
+   * @param  {Element|String} [context=document]
+   *         A DOM element within which to query. Can also be a selector
+   *         string in which case the first matching element will be used
+   *         as context. If missing (or no element matches selector), falls
+   *         back to `document`.
+   *
+   * @return {Element|null}
+   *         The element that was found or null.
+   */
+  const $ = createQuerier('querySelector');
+
+  /**
+   * Finds a all DOM elements matching `selector` within the optional
+   * `context` of another DOM element (defaulting to `document`).
+   *
+   * @param  {string} selector
+   *         A valid CSS selector, which will be passed to `querySelectorAll`.
+   *
+   * @param  {Element|String} [context=document]
+   *         A DOM element within which to query. Can also be a selector
+   *         string in which case the first matching element will be used
+   *         as context. If missing (or no element matches selector), falls
+   *         back to `document`.
+   *
+   * @return {NodeList}
+   *         A element list of elements that were found. Will be empty if none
+   *         were found.
+   *
+   */
+  const $$ = createQuerier('querySelectorAll');
+
+  /**
+   * A safe getComputedStyle.
+   *
+   * This is needed because in Firefox, if the player is loaded in an iframe with
+   * `display:none`, then `getComputedStyle` returns `null`, so, we do a
+   * null-check to make sure that the player doesn't break in these cases.
+   *
+   * @param    {Element} el
+   *           The element you want the computed style of
+   *
+   * @param    {string} prop
+   *           The property name you want
+   *
+   * @see      https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+   */
+  function computedStyle(el, prop) {
+    if (!el || !prop) {
+      return '';
+    }
+    if (typeof window.getComputedStyle === 'function') {
+      let computedStyleValue;
+      try {
+        computedStyleValue = window.getComputedStyle(el);
+      } catch (e) {
+        return '';
+      }
+      return computedStyleValue ? computedStyleValue.getPropertyValue(prop) || computedStyleValue[prop] : '';
+    }
+    return '';
+  }
+
+  /**
+   * Copy document style sheets to another window.
+   *
+   * @param    {Window} win
+   *           The window element you want to copy the document style sheets to.
+   *
+   */
+  function copyStyleSheetsToWindow(win) {
+    [...document.styleSheets].forEach(styleSheet => {
+      try {
+        const cssRules = [...styleSheet.cssRules].map(rule => rule.cssText).join('');
+        const style = document.createElement('style');
+        style.textContent = cssRules;
+        win.document.head.appendChild(style);
+      } catch (e) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.type = styleSheet.type;
+        // For older Safari this has to be the string; on other browsers setting the MediaList works
+        link.media = styleSheet.media.mediaText;
+        link.href = styleSheet.href;
+        win.document.head.appendChild(link);
+      }
+    });
+  }
+
+  var Dom = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    isReal: isReal,
+    isEl: isEl,
+    isInFrame: isInFrame,
+    createEl: createEl,
+    textContent: textContent,
+    prependTo: prependTo,
+    hasClass: hasClass,
+    addClass: addClass,
+    removeClass: removeClass,
+    toggleClass: toggleClass,
+    setAttributes: setAttributes,
+    getAttributes: getAttributes,
+    getAttribute: getAttribute,
+    setAttribute: setAttribute,
+    removeAttribute: removeAttribute,
+    blockTextSelection: blockTextSelection,
+    unblockTextSelection: unblockTextSelection,
+    getBoundingClientRect: getBoundingClientRect,
+    findPosition: findPosition,
+    getPointerPosition: getPointerPosition,
+    isTextNode: isTextNode$1,
+    emptyEl: emptyEl,
+    normalizeContent: normalizeContent,
+    appendContent: appendContent,
+    insertContent: insertContent,
+    isSingleLeftClick: isSingleLeftClick,
+    $: $,
+    $$: $$,
+    computedStyle: computedStyle,
+    copyStyleSheetsToWindow: copyStyleSheetsToWindow
+  });
+
+  /**
+   * @file setup.js - Functions for setting up a player without
+   * user interaction based on the data-setup `attribute` of the video tag.
+   *
+   * @module setup
+   */
+  let _windowLoaded = false;
+  let videojs$1;
+
+  /**
+   * Set up any tags that have a data-setup `attribute` when the player is started.
+   */
+  const autoSetup = function () {
+    if (videojs$1.options.autoSetup === false) {
+      return;
+    }
+    const vids = Array.prototype.slice.call(document.getElementsByTagName('video'));
+    const audios = Array.prototype.slice.call(document.getElementsByTagName('audio'));
+    const divs = Array.prototype.slice.call(document.getElementsByTagName('video-js'));
+    const mediaEls = vids.concat(audios, divs);
+
+    // Check if any media elements exist
+    if (mediaEls && mediaEls.length > 0) {
+      for (let i = 0, e = mediaEls.length; i < e; i++) {
+        const mediaEl = mediaEls[i];
+
+        // Check if element exists, has getAttribute func.
+        if (mediaEl && mediaEl.getAttribute) {
+          // Make sure this player hasn't already been set up.
+          if (mediaEl.player === undefined) {
+            const options = mediaEl.getAttribute('data-setup');
+
+            // Check if data-setup attr exists.
+            // We only auto-setup if they've added the data-setup attr.
+            if (options !== null) {
+              // Create new video.js instance.
+              videojs$1(mediaEl);
+            }
+          }
+
+          // If getAttribute isn't defined, we need to wait for the DOM.
+        } else {
+          autoSetupTimeout(1);
+          break;
+        }
+      }
+
+      // No videos were found, so keep looping unless page is finished loading.
+    } else if (!_windowLoaded) {
+      autoSetupTimeout(1);
+    }
+  };
+
+  /**
+   * Wait until the page is loaded before running autoSetup. This will be called in
+   * autoSetup if `hasLoaded` returns false.
+   *
+   * @param {number} wait
+   *        How long to wait in ms
+   *
+   * @param {module:videojs} [vjs]
+   *        The videojs library function
+   */
+  function autoSetupTimeout(wait, vjs) {
+    // Protect against breakage in non-browser environments
+    if (!isReal()) {
+      return;
+    }
+    if (vjs) {
+      videojs$1 = vjs;
+    }
+    window.setTimeout(autoSetup, wait);
+  }
+
+  /**
+   * Used to set the internal tracking of window loaded state to true.
+   *
+   * @private
+   */
+  function setWindowLoaded() {
+    _windowLoaded = true;
+    window.removeEventListener('load', setWindowLoaded);
+  }
+  if (isReal()) {
+    if (document.readyState === 'complete') {
+      setWindowLoaded();
+    } else {
+      /**
+       * Listen for the load event on window, and set _windowLoaded to true.
+       *
+       * We use a standard event listener here to avoid incrementing the GUID
+       * before any players are created.
+       *
+       * @listens load
+       */
+      window.addEventListener('load', setWindowLoaded);
+    }
+  }
+
+  /**
+   * @file stylesheet.js
+   * @module stylesheet
+   */
+
+  /**
+   * Create a DOM style element given a className for it.
+   *
+   * @param {string} className
+   *        The className to add to the created style element.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  const createStyleElement = function (className) {
+    const style = document.createElement('style');
+    style.className = className;
+    return style;
+  };
+
+  /**
+   * Add text to a DOM element.
+   *
+   * @param {Element} el
+   *        The Element to add text content to.
+   *
+   * @param {string} content
+   *        The text to add to the element.
+   */
+  const setTextContent = function (el, content) {
+    if (el.styleSheet) {
+      el.styleSheet.cssText = content;
+    } else {
+      el.textContent = content;
+    }
+  };
+
+  /**
+   * @file dom-data.js
+   * @module dom-data
+   */
+
+  /**
+   * Element Data Store.
+   *
+   * Allows for binding data to an element without putting it directly on the
+   * element. Ex. Event listeners are stored here.
+   * (also from jsninja.com, slightly modified and updated for closure compiler)
+   *
+   * @type {Object}
+   * @private
+   */
+  var DomData = new WeakMap();
+
+  /**
+   * @file guid.js
+   * @module guid
+   */
+
+  // Default value for GUIDs. This allows us to reset the GUID counter in tests.
+  //
+  // The initial GUID is 3 because some users have come to rely on the first
+  // default player ID ending up as `vjs_video_3`.
+  //
+  // See: https://github.com/videojs/video.js/pull/6216
+  const _initialGuid = 3;
+
+  /**
+   * Unique ID for an element or function
+   *
+   * @type {Number}
+   */
+  let _guid = _initialGuid;
+
+  /**
+   * Get a unique auto-incrementing ID by number that has not been returned before.
+   *
+   * @return {number}
+   *         A new unique ID.
+   */
+  function newGUID() {
+    return _guid++;
+  }
+
+  /**
+   * @file events.js. An Event System (John Resig - Secrets of a JS Ninja http://jsninja.com/)
+   * (Original book version wasn't completely usable, so fixed some things and made Closure Compiler compatible)
+   * This should work very similarly to jQuery's events, however it's based off the book version which isn't as
+   * robust as jquery's, so there's probably some differences.
+   *
+   * @file events.js
+   * @module events
+   */
+
+  /**
+   * Clean up the listener cache and dispatchers
+   *
+   * @param {Element|Object} elem
+   *        Element to clean up
+   *
+   * @param {string} type
+   *        Type of event to clean up
+   */
+  function _cleanUpEvents(elem, type) {
+    if (!DomData.has(elem)) {
+      return;
+    }
+    const data = DomData.get(elem);
+
+    // Remove the events of a particular type if there are none left
+    if (data.handlers[type].length === 0) {
+      delete data.handlers[type];
+      // data.handlers[type] = null;
+      // Setting to null was causing an error with data.handlers
+
+      // Remove the meta-handler from the element
+      if (elem.removeEventListener) {
+        elem.removeEventListener(type, data.dispatcher, false);
+      } else if (elem.detachEvent) {
+        elem.detachEvent('on' + type, data.dispatcher);
+      }
+    }
+
+    // Remove the events object if there are no types left
+    if (Object.getOwnPropertyNames(data.handlers).length <= 0) {
+      delete data.handlers;
+      delete data.dispatcher;
+      delete data.disabled;
+    }
+
+    // Finally remove the element data if there is no data left
+    if (Object.getOwnPropertyNames(data).length === 0) {
+      DomData.delete(elem);
+    }
+  }
+
+  /**
+   * Loops through an array of event types and calls the requested method for each type.
+   *
+   * @param {Function} fn
+   *        The event method we want to use.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind listeners to
+   *
+   * @param {string[]} types
+   *        Type of event to bind to.
+   *
+   * @param {Function} callback
+   *        Event listener.
+   */
+  function _handleMultipleEvents(fn, elem, types, callback) {
+    types.forEach(function (type) {
+      // Call the event method for each one of the types
+      fn(elem, type, callback);
+    });
+  }
+
+  /**
+   * Fix a native event to have standard property values
+   *
+   * @param {Object} event
+   *        Event object to fix.
+   *
+   * @return {Object}
+   *         Fixed event object.
+   */
+  function fixEvent(event) {
+    if (event.fixed_) {
+      return event;
+    }
+    function returnTrue() {
+      return true;
+    }
+    function returnFalse() {
+      return false;
+    }
+
+    // Test if fixing up is needed
+    // Used to check if !event.stopPropagation instead of isPropagationStopped
+    // But native events return true for stopPropagation, but don't have
+    // other expected methods like isPropagationStopped. Seems to be a problem
+    // with the Javascript Ninja code. So we're just overriding all events now.
+    if (!event || !event.isPropagationStopped || !event.isImmediatePropagationStopped) {
+      const old = event || window.event;
+      event = {};
+      // Clone the old object so that we can modify the values event = {};
+      // IE8 Doesn't like when you mess with native event properties
+      // Firefox returns false for event.hasOwnProperty('type') and other props
+      //  which makes copying more difficult.
+      // TODO: Probably best to create a whitelist of event props
+      for (const key in old) {
+        // Safari 6.0.3 warns you if you try to copy deprecated layerX/Y
+        // Chrome warns you if you try to copy deprecated keyboardEvent.keyLocation
+        // and webkitMovementX/Y
+        // Lighthouse complains if Event.path is copied
+        if (key !== 'layerX' && key !== 'layerY' && key !== 'keyLocation' && key !== 'webkitMovementX' && key !== 'webkitMovementY' && key !== 'path') {
+          // Chrome 32+ warns if you try to copy deprecated returnValue, but
+          // we still want to if preventDefault isn't supported (IE8).
+          if (!(key === 'returnValue' && old.preventDefault)) {
+            event[key] = old[key];
+          }
+        }
+      }
+
+      // The event occurred on this element
+      if (!event.target) {
+        event.target = event.srcElement || document;
+      }
+
+      // Handle which other element the event is related to
+      if (!event.relatedTarget) {
+        event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
+      }
+
+      // Stop the default browser action
+      event.preventDefault = function () {
+        if (old.preventDefault) {
+          old.preventDefault();
+        }
+        event.returnValue = false;
+        old.returnValue = false;
+        event.defaultPrevented = true;
+      };
+      event.defaultPrevented = false;
+
+      // Stop the event from bubbling
+      event.stopPropagation = function () {
+        if (old.stopPropagation) {
+          old.stopPropagation();
+        }
+        event.cancelBubble = true;
+        old.cancelBubble = true;
+        event.isPropagationStopped = returnTrue;
+      };
+      event.isPropagationStopped = returnFalse;
+
+      // Stop the event from bubbling and executing other handlers
+      event.stopImmediatePropagation = function () {
+        if (old.stopImmediatePropagation) {
+          old.stopImmediatePropagation();
+        }
+        event.isImmediatePropagationStopped = returnTrue;
+        event.stopPropagation();
+      };
+      event.isImmediatePropagationStopped = returnFalse;
+
+      // Handle mouse position
+      if (event.clientX !== null && event.clientX !== undefined) {
+        const doc = document.documentElement;
+        const body = document.body;
+        event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
+        event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
+      }
+
+      // Handle key presses
+      event.which = event.charCode || event.keyCode;
+
+      // Fix button for mouse clicks:
+      // 0 == left; 1 == middle; 2 == right
+      if (event.button !== null && event.button !== undefined) {
+        // The following is disabled because it does not pass videojs-standard
+        // and... yikes.
+        /* eslint-disable */
+        event.button = event.button & 1 ? 0 : event.button & 4 ? 1 : event.button & 2 ? 2 : 0;
+        /* eslint-enable */
+      }
+    }
+
+    event.fixed_ = true;
+    // Returns fixed-up instance
+    return event;
+  }
+
+  /**
+   * Whether passive event listeners are supported
+   */
+  let _supportsPassive;
+  const supportsPassive = function () {
+    if (typeof _supportsPassive !== 'boolean') {
+      _supportsPassive = false;
+      try {
+        const opts = Object.defineProperty({}, 'passive', {
+          get() {
+            _supportsPassive = true;
+          }
+        });
+        window.addEventListener('test', null, opts);
+        window.removeEventListener('test', null, opts);
+      } catch (e) {
+        // disregard
+      }
+    }
+    return _supportsPassive;
+  };
+
+  /**
+   * Touch events Chrome expects to be passive
+   */
+  const passiveEvents = ['touchstart', 'touchmove'];
+
+  /**
+   * Add an event listener to element
+   * It stores the handler function in a separate cache object
+   * and adds a generic handler to the element's event,
+   * along with a unique id (guid) to the element.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind listeners to
+   *
+   * @param {string|string[]} type
+   *        Type of event to bind to.
+   *
+   * @param {Function} fn
+   *        Event listener.
+   */
+  function on(elem, type, fn) {
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(on, elem, type, fn);
+    }
+    if (!DomData.has(elem)) {
+      DomData.set(elem, {});
+    }
+    const data = DomData.get(elem);
+
+    // We need a place to store all our handler data
+    if (!data.handlers) {
+      data.handlers = {};
+    }
+    if (!data.handlers[type]) {
+      data.handlers[type] = [];
+    }
+    if (!fn.guid) {
+      fn.guid = newGUID();
+    }
+    data.handlers[type].push(fn);
+    if (!data.dispatcher) {
+      data.disabled = false;
+      data.dispatcher = function (event, hash) {
+        if (data.disabled) {
+          return;
+        }
+        event = fixEvent(event);
+        const handlers = data.handlers[event.type];
+        if (handlers) {
+          // Copy handlers so if handlers are added/removed during the process it doesn't throw everything off.
+          const handlersCopy = handlers.slice(0);
+          for (let m = 0, n = handlersCopy.length; m < n; m++) {
+            if (event.isImmediatePropagationStopped()) {
+              break;
+            } else {
+              try {
+                handlersCopy[m].call(elem, event, hash);
+              } catch (e) {
+                log$1.error(e);
+              }
+            }
+          }
+        }
+      };
+    }
+    if (data.handlers[type].length === 1) {
+      if (elem.addEventListener) {
+        let options = false;
+        if (supportsPassive() && passiveEvents.indexOf(type) > -1) {
+          options = {
+            passive: true
+          };
+        }
+        elem.addEventListener(type, data.dispatcher, options);
+      } else if (elem.attachEvent) {
+        elem.attachEvent('on' + type, data.dispatcher);
+      }
+    }
+  }
+
+  /**
+   * Removes event listeners from an element
+   *
+   * @param {Element|Object} elem
+   *        Object to remove listeners from.
+   *
+   * @param {string|string[]} [type]
+   *        Type of listener to remove. Don't include to remove all events from element.
+   *
+   * @param {Function} [fn]
+   *        Specific listener to remove. Don't include to remove listeners for an event
+   *        type.
+   */
+  function off(elem, type, fn) {
+    // Don't want to add a cache object through getElData if not needed
+    if (!DomData.has(elem)) {
+      return;
+    }
+    const data = DomData.get(elem);
+
+    // If no events exist, nothing to unbind
+    if (!data.handlers) {
+      return;
+    }
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(off, elem, type, fn);
+    }
+
+    // Utility function
+    const removeType = function (el, t) {
+      data.handlers[t] = [];
+      _cleanUpEvents(el, t);
+    };
+
+    // Are we removing all bound events?
+    if (type === undefined) {
+      for (const t in data.handlers) {
+        if (Object.prototype.hasOwnProperty.call(data.handlers || {}, t)) {
+          removeType(elem, t);
+        }
+      }
+      return;
+    }
+    const handlers = data.handlers[type];
+
+    // If no handlers exist, nothing to unbind
+    if (!handlers) {
+      return;
+    }
+
+    // If no listener was provided, remove all listeners for type
+    if (!fn) {
+      removeType(elem, type);
+      return;
+    }
+
+    // We're only removing a single handler
+    if (fn.guid) {
+      for (let n = 0; n < handlers.length; n++) {
+        if (handlers[n].guid === fn.guid) {
+          handlers.splice(n--, 1);
+        }
+      }
+    }
+    _cleanUpEvents(elem, type);
+  }
+
+  /**
+   * Trigger an event for an element
+   *
+   * @param {Element|Object} elem
+   *        Element to trigger an event on
+   *
+   * @param {EventTarget~Event|string} event
+   *        A string (the type) or an event object with a type attribute
+   *
+   * @param {Object} [hash]
+   *        data hash to pass along with the event
+   *
+   * @return {boolean|undefined}
+   *         Returns the opposite of `defaultPrevented` if default was
+   *         prevented. Otherwise, returns `undefined`
+   */
+  function trigger(elem, event, hash) {
+    // Fetches element data and a reference to the parent (for bubbling).
+    // Don't want to add a data object to cache for every parent,
+    // so checking hasElData first.
+    const elemData = DomData.has(elem) ? DomData.get(elem) : {};
+    const parent = elem.parentNode || elem.ownerDocument;
+    // type = event.type || event,
+    // handler;
+
+    // If an event name was passed as a string, creates an event out of it
+    if (typeof event === 'string') {
+      event = {
+        type: event,
+        target: elem
+      };
+    } else if (!event.target) {
+      event.target = elem;
+    }
+
+    // Normalizes the event properties.
+    event = fixEvent(event);
+
+    // If the passed element has a dispatcher, executes the established handlers.
+    if (elemData.dispatcher) {
+      elemData.dispatcher.call(elem, event, hash);
+    }
+
+    // Unless explicitly stopped or the event does not bubble (e.g. media events)
+    // recursively calls this function to bubble the event up the DOM.
+    if (parent && !event.isPropagationStopped() && event.bubbles === true) {
+      trigger.call(null, parent, event, hash);
+
+      // If at the top of the DOM, triggers the default action unless disabled.
+    } else if (!parent && !event.defaultPrevented && event.target && event.target[event.type]) {
+      if (!DomData.has(event.target)) {
+        DomData.set(event.target, {});
+      }
+      const targetData = DomData.get(event.target);
+
+      // Checks if the target has a default action for this event.
+      if (event.target[event.type]) {
+        // Temporarily disables event dispatching on the target as we have already executed the handler.
+        targetData.disabled = true;
+        // Executes the default action.
+        if (typeof event.target[event.type] === 'function') {
+          event.target[event.type]();
+        }
+        // Re-enables event dispatching.
+        targetData.disabled = false;
+      }
+    }
+
+    // Inform the triggerer if the default was prevented by returning false
+    return !event.defaultPrevented;
+  }
+
+  /**
+   * Trigger a listener only once for an event.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind to.
+   *
+   * @param {string|string[]} type
+   *        Name/type of event
+   *
+   * @param {Event~EventListener} fn
+   *        Event listener function
+   */
+  function one(elem, type, fn) {
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(one, elem, type, fn);
+    }
+    const func = function () {
+      off(elem, type, func);
+      fn.apply(this, arguments);
+    };
+
+    // copy the guid to the new function so it can removed using the original function's ID
+    func.guid = fn.guid = fn.guid || newGUID();
+    on(elem, type, func);
+  }
+
+  /**
+   * Trigger a listener only once and then turn if off for all
+   * configured events
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind to.
+   *
+   * @param {string|string[]} type
+   *        Name/type of event
+   *
+   * @param {Event~EventListener} fn
+   *        Event listener function
+   */
+  function any(elem, type, fn) {
+    const func = function () {
+      off(elem, type, func);
+      fn.apply(this, arguments);
+    };
+
+    // copy the guid to the new function so it can removed using the original function's ID
+    func.guid = fn.guid = fn.guid || newGUID();
+
+    // multiple ons, but one off for everything
+    on(elem, type, func);
+  }
+
+  var Events = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    fixEvent: fixEvent,
+    on: on,
+    off: off,
+    trigger: trigger,
+    one: one,
+    any: any
+  });
+
+  /**
+   * @file fn.js
+   * @module fn
+   */
+  const UPDATE_REFRESH_INTERVAL = 30;
+
+  /**
+   * A private, internal-only function for changing the context of a function.
+   *
+   * It also stores a unique id on the function so it can be easily removed from
+   * events.
+   *
+   * @private
+   * @function
+   * @param    {*} context
+   *           The object to bind as scope.
+   *
+   * @param    {Function} fn
+   *           The function to be bound to a scope.
+   *
+   * @param    {number} [uid]
+   *           An optional unique ID for the function to be set
+   *
+   * @return   {Function}
+   *           The new function that will be bound into the context given
+   */
+  const bind_ = function (context, fn, uid) {
+    // Make sure the function has a unique ID
+    if (!fn.guid) {
+      fn.guid = newGUID();
+    }
+
+    // Create the new function that changes the context
+    const bound = fn.bind(context);
+
+    // Allow for the ability to individualize this function
+    // Needed in the case where multiple objects might share the same prototype
+    // IF both items add an event listener with the same function, then you try to remove just one
+    // it will remove both because they both have the same guid.
+    // when using this, you need to use the bind method when you remove the listener as well.
+    // currently used in text tracks
+    bound.guid = uid ? uid + '_' + fn.guid : fn.guid;
+    return bound;
+  };
+
+  /**
+   * Wraps the given function, `fn`, with a new function that only invokes `fn`
+   * at most once per every `wait` milliseconds.
+   *
+   * @function
+   * @param    {Function} fn
+   *           The function to be throttled.
+   *
+   * @param    {number}   wait
+   *           The number of milliseconds by which to throttle.
+   *
+   * @return   {Function}
+   */
+  const throttle = function (fn, wait) {
+    let last = window.performance.now();
+    const throttled = function (...args) {
+      const now = window.performance.now();
+      if (now - last >= wait) {
+        fn(...args);
+        last = now;
+      }
+    };
+    return throttled;
+  };
+
+  /**
+   * Creates a debounced function that delays invoking `func` until after `wait`
+   * milliseconds have elapsed since the last time the debounced function was
+   * invoked.
+   *
+   * Inspired by lodash and underscore implementations.
+   *
+   * @function
+   * @param    {Function} func
+   *           The function to wrap with debounce behavior.
+   *
+   * @param    {number} wait
+   *           The number of milliseconds to wait after the last invocation.
+   *
+   * @param    {boolean} [immediate]
+   *           Whether or not to invoke the function immediately upon creation.
+   *
+   * @param    {Object} [context=window]
+   *           The "context" in which the debounced function should debounce. For
+   *           example, if this function should be tied to a Video.js player,
+   *           the player can be passed here. Alternatively, defaults to the
+   *           global `window` object.
+   *
+   * @return   {Function}
+   *           A debounced function.
+   */
+  const debounce = function (func, wait, immediate, context = window) {
+    let timeout;
+    const cancel = () => {
+      context.clearTimeout(timeout);
+      timeout = null;
+    };
+
+    /* eslint-disable consistent-this */
+    const debounced = function () {
+      const self = this;
+      const args = arguments;
+      let later = function () {
+        timeout = null;
+        later = null;
+        if (!immediate) {
+          func.apply(self, args);
+        }
+      };
+      if (!timeout && immediate) {
+        func.apply(self, args);
+      }
+      context.clearTimeout(timeout);
+      timeout = context.setTimeout(later, wait);
+    };
+    /* eslint-enable consistent-this */
+
+    debounced.cancel = cancel;
+    return debounced;
+  };
+
+  var Fn = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UPDATE_REFRESH_INTERVAL: UPDATE_REFRESH_INTERVAL,
+    bind_: bind_,
+    throttle: throttle,
+    debounce: debounce
+  });
+
+  /**
+   * @file src/js/event-target.js
+   */
+  let EVENT_MAP;
+
+  /**
+   * `EventTarget` is a class that can have the same API as the DOM `EventTarget`. It
+   * adds shorthand functions that wrap around lengthy functions. For example:
+   * the `on` function is a wrapper around `addEventListener`.
+   *
+   * @see [EventTarget Spec]{@link https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget}
+   * @class EventTarget
+   */
+  class EventTarget$2 {
+    /**
+     * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+     * function that will get called when an event with a certain name gets triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to call with `EventTarget`s
+     */
+    on(type, fn) {
+      // Remove the addEventListener alias before calling Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      on(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+     * This makes it so that the `event listener` will no longer get called when the
+     * named event happens.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to remove.
+     */
+    off(type, fn) {
+      off(this, type, fn);
+    }
+    /**
+     * This function will add an `event listener` that gets triggered only once. After the
+     * first trigger it will get removed. This is like adding an `event listener`
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    one(type, fn) {
+      // Remove the addEventListener aliasing Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      one(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * This function will add an `event listener` that gets triggered only once and is
+     * removed from all events. This is like adding an array of `event listener`s
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+     * first time it is triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    any(type, fn) {
+      // Remove the addEventListener aliasing Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      any(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * This function causes an event to happen. This will then cause any `event listeners`
+     * that are waiting for that event, to get called. If there are no `event listeners`
+     * for an event then nothing will happen.
+     *
+     * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+     * Trigger will also call the `on` + `uppercaseEventName` function.
+     *
+     * Example:
+     * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+     * `onClick` if it exists.
+     *
+     * @param {string|EventTarget~Event|Object} event
+     *        The name of the event, an `Event`, or an object with a key of type set to
+     *        an event name.
+     */
+    trigger(event) {
+      const type = event.type || event;
+
+      // deprecation
+      // In a future version we should default target to `this`
+      // similar to how we default the target to `elem` in
+      // `Events.trigger`. Right now the default `target` will be
+      // `document` due to the `Event.fixEvent` call.
+      if (typeof event === 'string') {
+        event = {
+          type
+        };
+      }
+      event = fixEvent(event);
+      if (this.allowedEvents_[type] && this['on' + type]) {
+        this['on' + type](event);
+      }
+      trigger(this, event);
+    }
+    queueTrigger(event) {
+      // only set up EVENT_MAP if it'll be used
+      if (!EVENT_MAP) {
+        EVENT_MAP = new Map();
+      }
+      const type = event.type || event;
+      let map = EVENT_MAP.get(this);
+      if (!map) {
+        map = new Map();
+        EVENT_MAP.set(this, map);
+      }
+      const oldTimeout = map.get(type);
+      map.delete(type);
+      window.clearTimeout(oldTimeout);
+      const timeout = window.setTimeout(() => {
+        map.delete(type);
+        // if we cleared out all timeouts for the current target, delete its map
+        if (map.size === 0) {
+          map = null;
+          EVENT_MAP.delete(this);
+        }
+        this.trigger(event);
+      }, 0);
+      map.set(type, timeout);
+    }
+  }
+
+  /**
+   * A Custom DOM event.
+   *
+   * @typedef {CustomEvent} Event
+   * @see [Properties]{@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent}
+   */
+
+  /**
+   * All event listeners should follow the following format.
+   *
+   * @callback EventListener
+   * @this {EventTarget}
+   *
+   * @param {Event} event
+   *        the event that triggered this function
+   *
+   * @param {Object} [hash]
+   *        hash of data sent during the event
+   */
+
+  /**
+   * An object containing event names as keys and booleans as values.
+   *
+   * > NOTE: If an event name is set to a true value here {@link EventTarget#trigger}
+   *         will have extra functionality. See that function for more information.
+   *
+   * @property EventTarget.prototype.allowedEvents_
+   * @protected
+   */
+  EventTarget$2.prototype.allowedEvents_ = {};
+
+  /**
+   * An alias of {@link EventTarget#on}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#on}
+   */
+  EventTarget$2.prototype.addEventListener = EventTarget$2.prototype.on;
+
+  /**
+   * An alias of {@link EventTarget#off}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#off}
+   */
+  EventTarget$2.prototype.removeEventListener = EventTarget$2.prototype.off;
+
+  /**
+   * An alias of {@link EventTarget#trigger}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#trigger}
+   */
+  EventTarget$2.prototype.dispatchEvent = EventTarget$2.prototype.trigger;
+
+  /**
+   * @file mixins/evented.js
+   * @module evented
+   */
+  const objName = obj => {
+    if (typeof obj.name === 'function') {
+      return obj.name();
+    }
+    if (typeof obj.name === 'string') {
+      return obj.name;
+    }
+    if (obj.name_) {
+      return obj.name_;
+    }
+    if (obj.constructor && obj.constructor.name) {
+      return obj.constructor.name;
+    }
+    return typeof obj;
+  };
+
+  /**
+   * Returns whether or not an object has had the evented mixin applied.
+   *
+   * @param  {Object} object
+   *         An object to test.
+   *
+   * @return {boolean}
+   *         Whether or not the object appears to be evented.
+   */
+  const isEvented = object => object instanceof EventTarget$2 || !!object.eventBusEl_ && ['on', 'one', 'off', 'trigger'].every(k => typeof object[k] === 'function');
+
+  /**
+   * Adds a callback to run after the evented mixin applied.
+   *
+   * @param  {Object} target
+   *         An object to Add
+   * @param  {Function} callback
+   *         The callback to run.
+   */
+  const addEventedCallback = (target, callback) => {
+    if (isEvented(target)) {
+      callback();
+    } else {
+      if (!target.eventedCallbacks) {
+        target.eventedCallbacks = [];
+      }
+      target.eventedCallbacks.push(callback);
+    }
+  };
+
+  /**
+   * Whether a value is a valid event type - non-empty string or array.
+   *
+   * @private
+   * @param  {string|Array} type
+   *         The type value to test.
+   *
+   * @return {boolean}
+   *         Whether or not the type is a valid event type.
+   */
+  const isValidEventType = type =>
+  // The regex here verifies that the `type` contains at least one non-
+  // whitespace character.
+  typeof type === 'string' && /\S/.test(type) || Array.isArray(type) && !!type.length;
+
+  /**
+   * Validates a value to determine if it is a valid event target. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the target does not appear to be a valid event target.
+   *
+   * @param  {Object} target
+   *         The object to test.
+   *
+   * @param  {Object} obj
+   *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateTarget = (target, obj, fnName) => {
+    if (!target || !target.nodeName && !isEvented(target)) {
+      throw new Error(`Invalid target for ${objName(obj)}#${fnName}; must be a DOM node or evented object.`);
+    }
+  };
+
+  /**
+   * Validates a value to determine if it is a valid event target. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the type does not appear to be a valid event type.
+   *
+   * @param  {string|Array} type
+   *         The type to test.
+   *
+   * @param  {Object} obj
+  *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateEventType = (type, obj, fnName) => {
+    if (!isValidEventType(type)) {
+      throw new Error(`Invalid event type for ${objName(obj)}#${fnName}; must be a non-empty string or array.`);
+    }
+  };
+
+  /**
+   * Validates a value to determine if it is a valid listener. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the listener is not a function.
+   *
+   * @param  {Function} listener
+   *         The listener to test.
+   *
+   * @param  {Object} obj
+   *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateListener = (listener, obj, fnName) => {
+    if (typeof listener !== 'function') {
+      throw new Error(`Invalid listener for ${objName(obj)}#${fnName}; must be a function.`);
+    }
+  };
+
+  /**
+   * Takes an array of arguments given to `on()` or `one()`, validates them, and
+   * normalizes them into an object.
+   *
+   * @private
+   * @param  {Object} self
+   *         The evented object on which `on()` or `one()` was called. This
+   *         object will be bound as the `this` value for the listener.
+   *
+   * @param  {Array} args
+   *         An array of arguments passed to `on()` or `one()`.
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   *
+   * @return {Object}
+   *         An object containing useful values for `on()` or `one()` calls.
+   */
+  const normalizeListenArgs = (self, args, fnName) => {
+    // If the number of arguments is less than 3, the target is always the
+    // evented object itself.
+    const isTargetingSelf = args.length < 3 || args[0] === self || args[0] === self.eventBusEl_;
+    let target;
+    let type;
+    let listener;
+    if (isTargetingSelf) {
+      target = self.eventBusEl_;
+
+      // Deal with cases where we got 3 arguments, but we are still listening to
+      // the evented object itself.
+      if (args.length >= 3) {
+        args.shift();
+      }
+      [type, listener] = args;
+    } else {
+      [target, type, listener] = args;
+    }
+    validateTarget(target, self, fnName);
+    validateEventType(type, self, fnName);
+    validateListener(listener, self, fnName);
+    listener = bind_(self, listener);
+    return {
+      isTargetingSelf,
+      target,
+      type,
+      listener
+    };
+  };
+
+  /**
+   * Adds the listener to the event type(s) on the target, normalizing for
+   * the type of target.
+   *
+   * @private
+   * @param  {Element|Object} target
+   *         A DOM node or evented object.
+   *
+   * @param  {string} method
+   *         The event binding method to use ("on" or "one").
+   *
+   * @param  {string|Array} type
+   *         One or more event type(s).
+   *
+   * @param  {Function} listener
+   *         A listener function.
+   */
+  const listen = (target, method, type, listener) => {
+    validateTarget(target, target, method);
+    if (target.nodeName) {
+      Events[method](target, type, listener);
+    } else {
+      target[method](type, listener);
+    }
+  };
+
+  /**
+   * Contains methods that provide event capabilities to an object which is passed
+   * to {@link module:evented|evented}.
+   *
+   * @mixin EventedMixin
+   */
+  const EventedMixin = {
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    on(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'on');
+      listen(target, 'on', type, listener);
+
+      // If this object is listening to another evented object.
+      if (!isTargetingSelf) {
+        // If this object is disposed, remove the listener.
+        const removeListenerOnDispose = () => this.off(target, type, listener);
+
+        // Use the same function ID as the listener so we can remove it later it
+        // using the ID of the original listener.
+        removeListenerOnDispose.guid = listener.guid;
+
+        // Add a listener to the target's dispose event as well. This ensures
+        // that if the target is disposed BEFORE this object, we remove the
+        // removal listener that was just added. Otherwise, we create a memory leak.
+        const removeRemoverOnTargetDispose = () => this.off('dispose', removeListenerOnDispose);
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        removeRemoverOnTargetDispose.guid = listener.guid;
+        listen(this, 'on', 'dispose', removeListenerOnDispose);
+        listen(target, 'on', 'dispose', removeRemoverOnTargetDispose);
+      }
+    },
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object. The listener will be called once per event and then removed.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    one(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'one');
+
+      // Targeting this evented object.
+      if (isTargetingSelf) {
+        listen(target, 'one', type, listener);
+
+        // Targeting another evented object.
+      } else {
+        // TODO: This wrapper is incorrect! It should only
+        //       remove the wrapper for the event type that called it.
+        //       Instead all listeners are removed on the first trigger!
+        //       see https://github.com/videojs/video.js/issues/5962
+        const wrapper = (...largs) => {
+          this.off(target, type, wrapper);
+          listener.apply(null, largs);
+        };
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        wrapper.guid = listener.guid;
+        listen(target, 'one', type, wrapper);
+      }
+    },
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object. The listener will only be called once for the first event that is triggered
+     * then removed.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    any(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'any');
+
+      // Targeting this evented object.
+      if (isTargetingSelf) {
+        listen(target, 'any', type, listener);
+
+        // Targeting another evented object.
+      } else {
+        const wrapper = (...largs) => {
+          this.off(target, type, wrapper);
+          listener.apply(null, largs);
+        };
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        wrapper.guid = listener.guid;
+        listen(target, 'any', type, wrapper);
+      }
+    },
+    /**
+     * Removes listener(s) from event(s) on an evented object.
+     *
+     * @param  {string|Array|Element|Object} [targetOrType]
+     *         If this is a string or array, it represents the event type(s).
+     *
+     *         Another evented object can be passed here instead, in which case
+     *         ALL 3 arguments are _required_.
+     *
+     * @param  {string|Array|Function} [typeOrListener]
+     *         If the first argument was a string or array, this may be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function; otherwise, _all_ listeners bound to the
+     *         event type(s) will be removed.
+     */
+    off(targetOrType, typeOrListener, listener) {
+      // Targeting this evented object.
+      if (!targetOrType || isValidEventType(targetOrType)) {
+        off(this.eventBusEl_, targetOrType, typeOrListener);
+
+        // Targeting another evented object.
+      } else {
+        const target = targetOrType;
+        const type = typeOrListener;
+
+        // Fail fast and in a meaningful way!
+        validateTarget(target, this, 'off');
+        validateEventType(type, this, 'off');
+        validateListener(listener, this, 'off');
+
+        // Ensure there's at least a guid, even if the function hasn't been used
+        listener = bind_(this, listener);
+
+        // Remove the dispose listener on this evented object, which was given
+        // the same guid as the event listener in on().
+        this.off('dispose', listener);
+        if (target.nodeName) {
+          off(target, type, listener);
+          off(target, 'dispose', listener);
+        } else if (isEvented(target)) {
+          target.off(type, listener);
+          target.off('dispose', listener);
+        }
+      }
+    },
+    /**
+     * Fire an event on this evented object, causing its listeners to be called.
+     *
+     * @param   {string|Object} event
+     *          An event type or an object with a type property.
+     *
+     * @param   {Object} [hash]
+     *          An additional object to pass along to listeners.
+     *
+     * @return {boolean}
+     *          Whether or not the default behavior was prevented.
+     */
+    trigger(event, hash) {
+      validateTarget(this.eventBusEl_, this, 'trigger');
+      const type = event && typeof event !== 'string' ? event.type : event;
+      if (!isValidEventType(type)) {
+        throw new Error(`Invalid event type for ${objName(this)}#trigger; ` + 'must be a non-empty string or object with a type key that has a non-empty value.');
+      }
+      return trigger(this.eventBusEl_, event, hash);
+    }
+  };
+
+  /**
+   * Applies {@link module:evented~EventedMixin|EventedMixin} to a target object.
+   *
+   * @param  {Object} target
+   *         The object to which to add event methods.
+   *
+   * @param  {Object} [options={}]
+   *         Options for customizing the mixin behavior.
+   *
+   * @param  {string} [options.eventBusKey]
+   *         By default, adds a `eventBusEl_` DOM element to the target object,
+   *         which is used as an event bus. If the target object already has a
+   *         DOM element that should be used, pass its key here.
+   *
+   * @return {Object}
+   *         The target object.
+   */
+  function evented(target, options = {}) {
+    const {
+      eventBusKey
+    } = options;
+
+    // Set or create the eventBusEl_.
+    if (eventBusKey) {
+      if (!target[eventBusKey].nodeName) {
+        throw new Error(`The eventBusKey "${eventBusKey}" does not refer to an element.`);
+      }
+      target.eventBusEl_ = target[eventBusKey];
+    } else {
+      target.eventBusEl_ = createEl('span', {
+        className: 'vjs-event-bus'
+      });
+    }
+    Object.assign(target, EventedMixin);
+    if (target.eventedCallbacks) {
+      target.eventedCallbacks.forEach(callback => {
+        callback();
+      });
+    }
+
+    // When any evented object is disposed, it removes all its listeners.
+    target.on('dispose', () => {
+      target.off();
+      [target, target.el_, target.eventBusEl_].forEach(function (val) {
+        if (val && DomData.has(val)) {
+          DomData.delete(val);
+        }
+      });
+      window.setTimeout(() => {
+        target.eventBusEl_ = null;
+      }, 0);
+    });
+    return target;
+  }
+
+  /**
+   * @file mixins/stateful.js
+   * @module stateful
+   */
+
+  /**
+   * Contains methods that provide statefulness to an object which is passed
+   * to {@link module:stateful}.
+   *
+   * @mixin StatefulMixin
+   */
+  const StatefulMixin = {
+    /**
+     * A hash containing arbitrary keys and values representing the state of
+     * the object.
+     *
+     * @type {Object}
+     */
+    state: {},
+    /**
+     * Set the state of an object by mutating its
+     * {@link module:stateful~StatefulMixin.state|state} object in place.
+     *
+     * @fires   module:stateful~StatefulMixin#statechanged
+     * @param   {Object|Function} stateUpdates
+     *          A new set of properties to shallow-merge into the plugin state.
+     *          Can be a plain object or a function returning a plain object.
+     *
+     * @return {Object|undefined}
+     *          An object containing changes that occurred. If no changes
+     *          occurred, returns `undefined`.
+     */
+    setState(stateUpdates) {
+      // Support providing the `stateUpdates` state as a function.
+      if (typeof stateUpdates === 'function') {
+        stateUpdates = stateUpdates();
+      }
+      let changes;
+      each(stateUpdates, (value, key) => {
+        // Record the change if the value is different from what's in the
+        // current state.
+        if (this.state[key] !== value) {
+          changes = changes || {};
+          changes[key] = {
+            from: this.state[key],
+            to: value
+          };
+        }
+        this.state[key] = value;
+      });
+
+      // Only trigger "statechange" if there were changes AND we have a trigger
+      // function. This allows us to not require that the target object be an
+      // evented object.
+      if (changes && isEvented(this)) {
+        /**
+         * An event triggered on an object that is both
+         * {@link module:stateful|stateful} and {@link module:evented|evented}
+         * indicating that its state has changed.
+         *
+         * @event    module:stateful~StatefulMixin#statechanged
+         * @type     {Object}
+         * @property {Object} changes
+         *           A hash containing the properties that were changed and
+         *           the values they were changed `from` and `to`.
+         */
+        this.trigger({
+          changes,
+          type: 'statechanged'
+        });
+      }
+      return changes;
+    }
+  };
+
+  /**
+   * Applies {@link module:stateful~StatefulMixin|StatefulMixin} to a target
+   * object.
+   *
+   * If the target object is {@link module:evented|evented} and has a
+   * `handleStateChanged` method, that method will be automatically bound to the
+   * `statechanged` event on itself.
+   *
+   * @param   {Object} target
+   *          The object to be made stateful.
+   *
+   * @param   {Object} [defaultState]
+   *          A default set of properties to populate the newly-stateful object's
+   *          `state` property.
+   *
+   * @return {Object}
+   *          Returns the `target`.
+   */
+  function stateful(target, defaultState) {
+    Object.assign(target, StatefulMixin);
+
+    // This happens after the mixing-in because we need to replace the `state`
+    // added in that step.
+    target.state = Object.assign({}, target.state, defaultState);
+
+    // Auto-bind the `handleStateChanged` method of the target object if it exists.
+    if (typeof target.handleStateChanged === 'function' && isEvented(target)) {
+      target.on('statechanged', target.handleStateChanged);
+    }
+    return target;
+  }
+
+  /**
+   * @file str.js
+   * @module to-lower-case
+   */
+
+  /**
+   * Lowercase the first letter of a string.
+   *
+   * @param {string} string
+   *        String to be lowercased
+   *
+   * @return {string}
+   *         The string with a lowercased first letter
+   */
+  const toLowerCase = function (string) {
+    if (typeof string !== 'string') {
+      return string;
+    }
+    return string.replace(/./, w => w.toLowerCase());
+  };
+
+  /**
+   * Uppercase the first letter of a string.
+   *
+   * @param {string} string
+   *        String to be uppercased
+   *
+   * @return {string}
+   *         The string with an uppercased first letter
+   */
+  const toTitleCase$1 = function (string) {
+    if (typeof string !== 'string') {
+      return string;
+    }
+    return string.replace(/./, w => w.toUpperCase());
+  };
+
+  /**
+   * Compares the TitleCase versions of the two strings for equality.
+   *
+   * @param {string} str1
+   *        The first string to compare
+   *
+   * @param {string} str2
+   *        The second string to compare
+   *
+   * @return {boolean}
+   *         Whether the TitleCase versions of the strings are equal
+   */
+  const titleCaseEquals = function (str1, str2) {
+    return toTitleCase$1(str1) === toTitleCase$1(str2);
+  };
+
+  var Str = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    toLowerCase: toLowerCase,
+    toTitleCase: toTitleCase$1,
+    titleCaseEquals: titleCaseEquals
+  });
+
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+  function unwrapExports (x) {
+  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+  }
+
+  function createCommonjsModule(fn, module) {
+  	return module = { exports: {} }, fn(module, module.exports), module.exports;
+  }
+
+  var keycode = createCommonjsModule(function (module, exports) {
+    // Source: http://jsfiddle.net/vWx8V/
+    // http://stackoverflow.com/questions/5603195/full-list-of-javascript-keycodes
+
+    /**
+     * Conenience method returns corresponding value for given keyName or keyCode.
+     *
+     * @param {Mixed} keyCode {Number} or keyName {String}
+     * @return {Mixed}
+     * @api public
+     */
+
+    function keyCode(searchInput) {
+      // Keyboard Events
+      if (searchInput && 'object' === typeof searchInput) {
+        var hasKeyCode = searchInput.which || searchInput.keyCode || searchInput.charCode;
+        if (hasKeyCode) searchInput = hasKeyCode;
+      }
+
+      // Numbers
+      if ('number' === typeof searchInput) return names[searchInput];
+
+      // Everything else (cast to string)
+      var search = String(searchInput);
+
+      // check codes
+      var foundNamedKey = codes[search.toLowerCase()];
+      if (foundNamedKey) return foundNamedKey;
+
+      // check aliases
+      var foundNamedKey = aliases[search.toLowerCase()];
+      if (foundNamedKey) return foundNamedKey;
+
+      // weird character?
+      if (search.length === 1) return search.charCodeAt(0);
+      return undefined;
+    }
+
+    /**
+     * Compares a keyboard event with a given keyCode or keyName.
+     *
+     * @param {Event} event Keyboard event that should be tested
+     * @param {Mixed} keyCode {Number} or keyName {String}
+     * @return {Boolean}
+     * @api public
+     */
+    keyCode.isEventKey = function isEventKey(event, nameOrCode) {
+      if (event && 'object' === typeof event) {
+        var keyCode = event.which || event.keyCode || event.charCode;
+        if (keyCode === null || keyCode === undefined) {
+          return false;
+        }
+        if (typeof nameOrCode === 'string') {
+          // check codes
+          var foundNamedKey = codes[nameOrCode.toLowerCase()];
+          if (foundNamedKey) {
+            return foundNamedKey === keyCode;
+          }
+
+          // check aliases
+          var foundNamedKey = aliases[nameOrCode.toLowerCase()];
+          if (foundNamedKey) {
+            return foundNamedKey === keyCode;
+          }
+        } else if (typeof nameOrCode === 'number') {
+          return nameOrCode === keyCode;
+        }
+        return false;
+      }
+    };
+    exports = module.exports = keyCode;
+
+    /**
+     * Get by name
+     *
+     *   exports.code['enter'] // => 13
+     */
+
+    var codes = exports.code = exports.codes = {
+      'backspace': 8,
+      'tab': 9,
+      'enter': 13,
+      'shift': 16,
+      'ctrl': 17,
+      'alt': 18,
+      'pause/break': 19,
+      'caps lock': 20,
+      'esc': 27,
+      'space': 32,
+      'page up': 33,
+      'page down': 34,
+      'end': 35,
+      'home': 36,
+      'left': 37,
+      'up': 38,
+      'right': 39,
+      'down': 40,
+      'insert': 45,
+      'delete': 46,
+      'command': 91,
+      'left command': 91,
+      'right command': 93,
+      'numpad *': 106,
+      'numpad +': 107,
+      'numpad -': 109,
+      'numpad .': 110,
+      'numpad /': 111,
+      'num lock': 144,
+      'scroll lock': 145,
+      'my computer': 182,
+      'my calculator': 183,
+      ';': 186,
+      '=': 187,
+      ',': 188,
+      '-': 189,
+      '.': 190,
+      '/': 191,
+      '`': 192,
+      '[': 219,
+      '\\': 220,
+      ']': 221,
+      "'": 222
+    };
+
+    // Helper aliases
+
+    var aliases = exports.aliases = {
+      'windows': 91,
+      '⇧': 16,
+      '⌥': 18,
+      '⌃': 17,
+      '⌘': 91,
+      'ctl': 17,
+      'control': 17,
+      'option': 18,
+      'pause': 19,
+      'break': 19,
+      'caps': 20,
+      'return': 13,
+      'escape': 27,
+      'spc': 32,
+      'spacebar': 32,
+      'pgup': 33,
+      'pgdn': 34,
+      'ins': 45,
+      'del': 46,
+      'cmd': 91
+    };
+
+    /*!
+     * Programatically add the following
+     */
+
+    // lower case chars
+    for (i = 97; i < 123; i++) codes[String.fromCharCode(i)] = i - 32;
+
+    // numbers
+    for (var i = 48; i < 58; i++) codes[i - 48] = i;
+
+    // function keys
+    for (i = 1; i < 13; i++) codes['f' + i] = i + 111;
+
+    // numpad keys
+    for (i = 0; i < 10; i++) codes['numpad ' + i] = i + 96;
+
+    /**
+     * Get by code
+     *
+     *   exports.name[13] // => 'Enter'
+     */
+
+    var names = exports.names = exports.title = {}; // title for backward compat
+
+    // Create reverse mapping
+    for (i in codes) names[codes[i]] = i;
+
+    // Add aliases
+    for (var alias in aliases) {
+      codes[alias] = aliases[alias];
+    }
+  });
+  keycode.code;
+  keycode.codes;
+  keycode.aliases;
+  keycode.names;
+  keycode.title;
+
+  /**
+   * Player Component - Base class for all UI objects
+   *
+   * @file component.js
+   */
+
+  /**
+   * Base class for all UI Components.
+   * Components are UI objects which represent both a javascript object and an element
+   * in the DOM. They can be children of other components, and can have
+   * children themselves.
+   *
+   * Components can also use methods from {@link EventTarget}
+   */
+  class Component$1 {
+    /**
+     * A callback that is called when a component is ready. Does not have any
+     * parameters and any callback value will be ignored.
+     *
+     * @callback ReadyCallback
+     * @this Component
+     */
+
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of component options.
+     *
+     * @param {Object[]} [options.children]
+     *        An array of children objects to initialize this component with. Children objects have
+     *        a name property that will be used if more than one component of the same type needs to be
+     *        added.
+     *
+     * @param  {string} [options.className]
+     *         A class or space separated list of classes to add the component
+     *
+     * @param {ReadyCallback} [ready]
+     *        Function that gets called when the `Component` is ready.
+     */
+    constructor(player, options, ready) {
+      // The component might be the player itself and we can't pass `this` to super
+      if (!player && this.play) {
+        this.player_ = player = this; // eslint-disable-line
+      } else {
+        this.player_ = player;
+      }
+      this.isDisposed_ = false;
+
+      // Hold the reference to the parent component via `addChild` method
+      this.parentComponent_ = null;
+
+      // Make a copy of prototype.options_ to protect against overriding defaults
+      this.options_ = merge$2({}, this.options_);
+
+      // Updated options with supplied options
+      options = this.options_ = merge$2(this.options_, options);
+
+      // Get ID from options or options element if one is supplied
+      this.id_ = options.id || options.el && options.el.id;
+
+      // If there was no ID from the options, generate one
+      if (!this.id_) {
+        // Don't require the player ID function in the case of mock players
+        const id = player && player.id && player.id() || 'no_player';
+        this.id_ = `${id}_component_${newGUID()}`;
+      }
+      this.name_ = options.name || null;
+
+      // Create element if one wasn't provided in options
+      if (options.el) {
+        this.el_ = options.el;
+      } else if (options.createEl !== false) {
+        this.el_ = this.createEl();
+      }
+      if (options.className && this.el_) {
+        options.className.split(' ').forEach(c => this.addClass(c));
+      }
+
+      // Remove the placeholder event methods. If the component is evented, the
+      // real methods are added next
+      ['on', 'off', 'one', 'any', 'trigger'].forEach(fn => {
+        this[fn] = undefined;
+      });
+
+      // if evented is anything except false, we want to mixin in evented
+      if (options.evented !== false) {
+        // Make this an evented object and use `el_`, if available, as its event bus
+        evented(this, {
+          eventBusKey: this.el_ ? 'el_' : null
+        });
+        this.handleLanguagechange = this.handleLanguagechange.bind(this);
+        this.on(this.player_, 'languagechange', this.handleLanguagechange);
+      }
+      stateful(this, this.constructor.defaultState);
+      this.children_ = [];
+      this.childIndex_ = {};
+      this.childNameIndex_ = {};
+      this.setTimeoutIds_ = new Set();
+      this.setIntervalIds_ = new Set();
+      this.rafIds_ = new Set();
+      this.namedRafs_ = new Map();
+      this.clearingTimersOnDispose_ = false;
+
+      // Add any child components in options
+      if (options.initChildren !== false) {
+        this.initChildren();
+      }
+
+      // Don't want to trigger ready here or it will go before init is actually
+      // finished for all children that run this constructor
+      this.ready(ready);
+      if (options.reportTouchActivity !== false) {
+        this.enableTouchActivity();
+      }
+    }
+
+    // `on`, `off`, `one`, `any` and `trigger` are here so tsc includes them in definitions.
+    // They are replaced or removed in the constructor
+
+    /**
+     * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+     * function that will get called when an event with a certain name gets triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to call with `EventTarget`s
+     */
+    on(type, fn) {}
+
+    /**
+     * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+     * This makes it so that the `event listener` will no longer get called when the
+     * named event happens.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} [fn]
+     *        The function to remove. If not specified, all listeners managed by Video.js will be removed.
+     */
+    off(type, fn) {}
+
+    /**
+     * This function will add an `event listener` that gets triggered only once. After the
+     * first trigger it will get removed. This is like adding an `event listener`
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    one(type, fn) {}
+
+    /**
+     * This function will add an `event listener` that gets triggered only once and is
+     * removed from all events. This is like adding an array of `event listener`s
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+     * first time it is triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    any(type, fn) {}
+
+    /**
+     * This function causes an event to happen. This will then cause any `event listeners`
+     * that are waiting for that event, to get called. If there are no `event listeners`
+     * for an event then nothing will happen.
+     *
+     * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+     * Trigger will also call the `on` + `uppercaseEventName` function.
+     *
+     * Example:
+     * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+     * `onClick` if it exists.
+     *
+     * @param {string|Event|Object} event
+     *        The name of the event, an `Event`, or an object with a key of type set to
+     *        an event name.
+     *
+     * @param {Object} [hash]
+     *        Optionally extra argument to pass through to an event listener
+     */
+    trigger(event, hash) {}
+
+    /**
+     * Dispose of the `Component` and all child components.
+     *
+     * @fires Component#dispose
+     *
+     * @param {Object} options
+     * @param {Element} options.originalEl element with which to replace player element
+     */
+    dispose(options = {}) {
+      // Bail out if the component has already been disposed.
+      if (this.isDisposed_) {
+        return;
+      }
+      if (this.readyQueue_) {
+        this.readyQueue_.length = 0;
+      }
+
+      /**
+       * Triggered when a `Component` is disposed.
+       *
+       * @event Component#dispose
+       * @type {Event}
+       *
+       * @property {boolean} [bubbles=false]
+       *           set to false so that the dispose event does not
+       *           bubble up
+       */
+      this.trigger({
+        type: 'dispose',
+        bubbles: false
+      });
+      this.isDisposed_ = true;
+
+      // Dispose all children.
+      if (this.children_) {
+        for (let i = this.children_.length - 1; i >= 0; i--) {
+          if (this.children_[i].dispose) {
+            this.children_[i].dispose();
+          }
+        }
+      }
+
+      // Delete child references
+      this.children_ = null;
+      this.childIndex_ = null;
+      this.childNameIndex_ = null;
+      this.parentComponent_ = null;
+      if (this.el_) {
+        // Remove element from DOM
+        if (this.el_.parentNode) {
+          if (options.restoreEl) {
+            this.el_.parentNode.replaceChild(options.restoreEl, this.el_);
+          } else {
+            this.el_.parentNode.removeChild(this.el_);
+          }
+        }
+        this.el_ = null;
+      }
+
+      // remove reference to the player after disposing of the element
+      this.player_ = null;
+    }
+
+    /**
+     * Determine whether or not this component has been disposed.
+     *
+     * @return {boolean}
+     *         If the component has been disposed, will be `true`. Otherwise, `false`.
+     */
+    isDisposed() {
+      return Boolean(this.isDisposed_);
+    }
+
+    /**
+     * Return the {@link Player} that the `Component` has attached to.
+     *
+     * @return { import('./player').default }
+     *         The player that this `Component` has attached to.
+     */
+    player() {
+      return this.player_;
+    }
+
+    /**
+     * Deep merge of options objects with new options.
+     * > Note: When both `obj` and `options` contain properties whose values are objects.
+     *         The two properties get merged using {@link module:obj.merge}
+     *
+     * @param {Object} obj
+     *        The object that contains new options.
+     *
+     * @return {Object}
+     *         A new object of `this.options_` and `obj` merged together.
+     */
+    options(obj) {
+      if (!obj) {
+        return this.options_;
+      }
+      this.options_ = merge$2(this.options_, obj);
+      return this.options_;
+    }
+
+    /**
+     * Get the `Component`s DOM element
+     *
+     * @return {Element}
+     *         The DOM element for this `Component`.
+     */
+    el() {
+      return this.el_;
+    }
+
+    /**
+     * Create the `Component`s DOM element.
+     *
+     * @param {string} [tagName]
+     *        Element's DOM node type. e.g. 'div'
+     *
+     * @param {Object} [properties]
+     *        An object of properties that should be set.
+     *
+     * @param {Object} [attributes]
+     *        An object of attributes that should be set.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tagName, properties, attributes) {
+      return createEl(tagName, properties, attributes);
+    }
+
+    /**
+     * Localize a string given the string in english.
+     *
+     * If tokens are provided, it'll try and run a simple token replacement on the provided string.
+     * The tokens it looks for look like `{1}` with the index being 1-indexed into the tokens array.
+     *
+     * If a `defaultValue` is provided, it'll use that over `string`,
+     * if a value isn't found in provided language files.
+     * This is useful if you want to have a descriptive key for token replacement
+     * but have a succinct localized string and not require `en.json` to be included.
+     *
+     * Currently, it is used for the progress bar timing.
+     * ```js
+     * {
+     *   "progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
+     * }
+     * ```
+     * It is then used like so:
+     * ```js
+     * this.localize('progress bar timing: currentTime={1} duration{2}',
+     *               [this.player_.currentTime(), this.player_.duration()],
+     *               '{1} of {2}');
+     * ```
+     *
+     * Which outputs something like: `01:23 of 24:56`.
+     *
+     *
+     * @param {string} string
+     *        The string to localize and the key to lookup in the language files.
+     * @param {string[]} [tokens]
+     *        If the current item has token replacements, provide the tokens here.
+     * @param {string} [defaultValue]
+     *        Defaults to `string`. Can be a default value to use for token replacement
+     *        if the lookup key is needed to be separate.
+     *
+     * @return {string}
+     *         The localized string or if no localization exists the english string.
+     */
+    localize(string, tokens, defaultValue = string) {
+      const code = this.player_.language && this.player_.language();
+      const languages = this.player_.languages && this.player_.languages();
+      const language = languages && languages[code];
+      const primaryCode = code && code.split('-')[0];
+      const primaryLang = languages && languages[primaryCode];
+      let localizedString = defaultValue;
+      if (language && language[string]) {
+        localizedString = language[string];
+      } else if (primaryLang && primaryLang[string]) {
+        localizedString = primaryLang[string];
+      }
+      if (tokens) {
+        localizedString = localizedString.replace(/\{(\d+)\}/g, function (match, index) {
+          const value = tokens[index - 1];
+          let ret = value;
+          if (typeof value === 'undefined') {
+            ret = match;
+          }
+          return ret;
+        });
+      }
+      return localizedString;
+    }
+
+    /**
+     * Handles language change for the player in components. Should be overridden by sub-components.
+     *
+     * @abstract
+     */
+    handleLanguagechange() {}
+
+    /**
+     * Return the `Component`s DOM element. This is where children get inserted.
+     * This will usually be the the same as the element returned in {@link Component#el}.
+     *
+     * @return {Element}
+     *         The content element for this `Component`.
+     */
+    contentEl() {
+      return this.contentEl_ || this.el_;
+    }
+
+    /**
+     * Get this `Component`s ID
+     *
+     * @return {string}
+     *         The id of this `Component`
+     */
+    id() {
+      return this.id_;
+    }
+
+    /**
+     * Get the `Component`s name. The name gets used to reference the `Component`
+     * and is set during registration.
+     *
+     * @return {string}
+     *         The name of this `Component`.
+     */
+    name() {
+      return this.name_;
+    }
+
+    /**
+     * Get an array of all child components
+     *
+     * @return {Array}
+     *         The children
+     */
+    children() {
+      return this.children_;
+    }
+
+    /**
+     * Returns the child `Component` with the given `id`.
+     *
+     * @param {string} id
+     *        The id of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The child `Component` with the given `id` or undefined.
+     */
+    getChildById(id) {
+      return this.childIndex_[id];
+    }
+
+    /**
+     * Returns the child `Component` with the given `name`.
+     *
+     * @param {string} name
+     *        The name of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The child `Component` with the given `name` or undefined.
+     */
+    getChild(name) {
+      if (!name) {
+        return;
+      }
+      return this.childNameIndex_[name];
+    }
+
+    /**
+     * Returns the descendant `Component` following the givent
+     * descendant `names`. For instance ['foo', 'bar', 'baz'] would
+     * try to get 'foo' on the current component, 'bar' on the 'foo'
+     * component and 'baz' on the 'bar' component and return undefined
+     * if any of those don't exist.
+     *
+     * @param {...string[]|...string} names
+     *        The name of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The descendant `Component` following the given descendant
+     *         `names` or undefined.
+     */
+    getDescendant(...names) {
+      // flatten array argument into the main array
+      names = names.reduce((acc, n) => acc.concat(n), []);
+      let currentChild = this;
+      for (let i = 0; i < names.length; i++) {
+        currentChild = currentChild.getChild(names[i]);
+        if (!currentChild || !currentChild.getChild) {
+          return;
+        }
+      }
+      return currentChild;
+    }
+
+    /**
+     * Adds an SVG icon element to another element or component.
+     *
+     * @param {string} iconName
+     *        The name of icon. A list of all the icon names can be found at 'sandbox/svg-icons.html'
+     *
+     * @param {Element} [el=this.el()]
+     *        Element to set the title on. Defaults to the current Component's element.
+     *
+     * @return {Element}
+     *        The newly created icon element.
+     */
+    setIcon(iconName, el = this.el()) {
+      // TODO: In v9 of video.js, we will want to remove font icons entirely.
+      // This means this check, as well as the others throughout the code, and
+      // the unecessary CSS for font icons, will need to be removed.
+      // See https://github.com/videojs/video.js/pull/8260 as to which components
+      // need updating.
+      if (!this.player_.options_.experimentalSvgIcons) {
+        return;
+      }
+      const xmlnsURL = 'http://www.w3.org/2000/svg';
+
+      // The below creates an element in the format of:
+      // <span><svg><use>....</use></svg></span>
+      const iconContainer = createEl('span', {
+        className: 'vjs-icon-placeholder vjs-svg-icon'
+      }, {
+        'aria-hidden': 'true'
+      });
+      const svgEl = document.createElementNS(xmlnsURL, 'svg');
+      svgEl.setAttributeNS(null, 'viewBox', '0 0 512 512');
+      const useEl = document.createElementNS(xmlnsURL, 'use');
+      svgEl.appendChild(useEl);
+      useEl.setAttributeNS(null, 'href', `#vjs-icon-${iconName}`);
+      iconContainer.appendChild(svgEl);
+
+      // Replace a pre-existing icon if one exists.
+      if (this.iconIsSet_) {
+        el.replaceChild(iconContainer, el.querySelector('.vjs-icon-placeholder'));
+      } else {
+        el.appendChild(iconContainer);
+      }
+      this.iconIsSet_ = true;
+      return iconContainer;
+    }
+
+    /**
+     * Add a child `Component` inside the current `Component`.
+     *
+     * @param {string|Component} child
+     *        The name or instance of a child to add.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of options that will get passed to children of
+     *        the child.
+     *
+     * @param {number} [index=this.children_.length]
+     *        The index to attempt to add a child into.
+     *
+     *
+     * @return {Component}
+     *         The `Component` that gets added as a child. When using a string the
+     *         `Component` will get created by this process.
+     */
+    addChild(child, options = {}, index = this.children_.length) {
+      let component;
+      let componentName;
+
+      // If child is a string, create component with options
+      if (typeof child === 'string') {
+        componentName = toTitleCase$1(child);
+        const componentClassName = options.componentClass || componentName;
+
+        // Set name through options
+        options.name = componentName;
+
+        // Create a new object & element for this controls set
+        // If there's no .player_, this is a player
+        const ComponentClass = Component$1.getComponent(componentClassName);
+        if (!ComponentClass) {
+          throw new Error(`Component ${componentClassName} does not exist`);
+        }
+
+        // data stored directly on the videojs object may be
+        // misidentified as a component to retain
+        // backwards-compatibility with 4.x. check to make sure the
+        // component class can be instantiated.
+        if (typeof ComponentClass !== 'function') {
+          return null;
+        }
+        component = new ComponentClass(this.player_ || this, options);
+
+        // child is a component instance
+      } else {
+        component = child;
+      }
+      if (component.parentComponent_) {
+        component.parentComponent_.removeChild(component);
+      }
+      this.children_.splice(index, 0, component);
+      component.parentComponent_ = this;
+      if (typeof component.id === 'function') {
+        this.childIndex_[component.id()] = component;
+      }
+
+      // If a name wasn't used to create the component, check if we can use the
+      // name function of the component
+      componentName = componentName || component.name && toTitleCase$1(component.name());
+      if (componentName) {
+        this.childNameIndex_[componentName] = component;
+        this.childNameIndex_[toLowerCase(componentName)] = component;
+      }
+
+      // Add the UI object's element to the container div (box)
+      // Having an element is not required
+      if (typeof component.el === 'function' && component.el()) {
+        // If inserting before a component, insert before that component's element
+        let refNode = null;
+        if (this.children_[index + 1]) {
+          // Most children are components, but the video tech is an HTML element
+          if (this.children_[index + 1].el_) {
+            refNode = this.children_[index + 1].el_;
+          } else if (isEl(this.children_[index + 1])) {
+            refNode = this.children_[index + 1];
+          }
+        }
+        this.contentEl().insertBefore(component.el(), refNode);
+      }
+
+      // Return so it can stored on parent object if desired.
+      return component;
+    }
+
+    /**
+     * Remove a child `Component` from this `Component`s list of children. Also removes
+     * the child `Component`s element from this `Component`s element.
+     *
+     * @param {Component} component
+     *        The child `Component` to remove.
+     */
+    removeChild(component) {
+      if (typeof component === 'string') {
+        component = this.getChild(component);
+      }
+      if (!component || !this.children_) {
+        return;
+      }
+      let childFound = false;
+      for (let i = this.children_.length - 1; i >= 0; i--) {
+        if (this.children_[i] === component) {
+          childFound = true;
+          this.children_.splice(i, 1);
+          break;
+        }
+      }
+      if (!childFound) {
+        return;
+      }
+      component.parentComponent_ = null;
+      this.childIndex_[component.id()] = null;
+      this.childNameIndex_[toTitleCase$1(component.name())] = null;
+      this.childNameIndex_[toLowerCase(component.name())] = null;
+      const compEl = component.el();
+      if (compEl && compEl.parentNode === this.contentEl()) {
+        this.contentEl().removeChild(component.el());
+      }
+    }
+
+    /**
+     * Add and initialize default child `Component`s based upon options.
+     */
+    initChildren() {
+      const children = this.options_.children;
+      if (children) {
+        // `this` is `parent`
+        const parentOptions = this.options_;
+        const handleAdd = child => {
+          const name = child.name;
+          let opts = child.opts;
+
+          // Allow options for children to be set at the parent options
+          // e.g. videojs(id, { controlBar: false });
+          // instead of videojs(id, { children: { controlBar: false });
+          if (parentOptions[name] !== undefined) {
+            opts = parentOptions[name];
+          }
+
+          // Allow for disabling default components
+          // e.g. options['children']['posterImage'] = false
+          if (opts === false) {
+            return;
+          }
+
+          // Allow options to be passed as a simple boolean if no configuration
+          // is necessary.
+          if (opts === true) {
+            opts = {};
+          }
+
+          // We also want to pass the original player options
+          // to each component as well so they don't need to
+          // reach back into the player for options later.
+          opts.playerOptions = this.options_.playerOptions;
+
+          // Create and add the child component.
+          // Add a direct reference to the child by name on the parent instance.
+          // If two of the same component are used, different names should be supplied
+          // for each
+          const newChild = this.addChild(name, opts);
+          if (newChild) {
+            this[name] = newChild;
+          }
+        };
+
+        // Allow for an array of children details to passed in the options
+        let workingChildren;
+        const Tech = Component$1.getComponent('Tech');
+        if (Array.isArray(children)) {
+          workingChildren = children;
+        } else {
+          workingChildren = Object.keys(children);
+        }
+        workingChildren
+        // children that are in this.options_ but also in workingChildren  would
+        // give us extra children we do not want. So, we want to filter them out.
+        .concat(Object.keys(this.options_).filter(function (child) {
+          return !workingChildren.some(function (wchild) {
+            if (typeof wchild === 'string') {
+              return child === wchild;
+            }
+            return child === wchild.name;
+          });
+        })).map(child => {
+          let name;
+          let opts;
+          if (typeof child === 'string') {
+            name = child;
+            opts = children[name] || this.options_[name] || {};
+          } else {
+            name = child.name;
+            opts = child;
+          }
+          return {
+            name,
+            opts
+          };
+        }).filter(child => {
+          // we have to make sure that child.name isn't in the techOrder since
+          // techs are registered as Components but can't aren't compatible
+          // See https://github.com/videojs/video.js/issues/2772
+          const c = Component$1.getComponent(child.opts.componentClass || toTitleCase$1(child.name));
+          return c && !Tech.isTech(c);
+        }).forEach(handleAdd);
+      }
+    }
+
+    /**
+     * Builds the default DOM class name. Should be overridden by sub-components.
+     *
+     * @return {string}
+     *         The DOM class name for this object.
+     *
+     * @abstract
+     */
+    buildCSSClass() {
+      // Child classes can include a function that does:
+      // return 'CLASS NAME' + this._super();
+      return '';
+    }
+
+    /**
+     * Bind a listener to the component's ready state.
+     * Different from event listeners in that if the ready event has already happened
+     * it will trigger the function immediately.
+     *
+     * @param {ReadyCallback} fn
+     *        Function that gets called when the `Component` is ready.
+     *
+     * @return {Component}
+     *         Returns itself; method can be chained.
+     */
+    ready(fn, sync = false) {
+      if (!fn) {
+        return;
+      }
+      if (!this.isReady_) {
+        this.readyQueue_ = this.readyQueue_ || [];
+        this.readyQueue_.push(fn);
+        return;
+      }
+      if (sync) {
+        fn.call(this);
+      } else {
+        // Call the function asynchronously by default for consistency
+        this.setTimeout(fn, 1);
+      }
+    }
+
+    /**
+     * Trigger all the ready listeners for this `Component`.
+     *
+     * @fires Component#ready
+     */
+    triggerReady() {
+      this.isReady_ = true;
+
+      // Ensure ready is triggered asynchronously
+      this.setTimeout(function () {
+        const readyQueue = this.readyQueue_;
+
+        // Reset Ready Queue
+        this.readyQueue_ = [];
+        if (readyQueue && readyQueue.length > 0) {
+          readyQueue.forEach(function (fn) {
+            fn.call(this);
+          }, this);
+        }
+
+        // Allow for using event listeners also
+        /**
+         * Triggered when a `Component` is ready.
+         *
+         * @event Component#ready
+         * @type {Event}
+         */
+        this.trigger('ready');
+      }, 1);
+    }
+
+    /**
+     * Find a single DOM element matching a `selector`. This can be within the `Component`s
+     * `contentEl()` or another custom context.
+     *
+     * @param {string} selector
+     *        A valid CSS selector, which will be passed to `querySelector`.
+     *
+     * @param {Element|string} [context=this.contentEl()]
+     *        A DOM element within which to query. Can also be a selector string in
+     *        which case the first matching element will get used as context. If
+     *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+     *        nothing it falls back to `document`.
+     *
+     * @return {Element|null}
+     *         the dom element that was found, or null
+     *
+     * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+     */
+    $(selector, context) {
+      return $(selector, context || this.contentEl());
+    }
+
+    /**
+     * Finds all DOM element matching a `selector`. This can be within the `Component`s
+     * `contentEl()` or another custom context.
+     *
+     * @param {string} selector
+     *        A valid CSS selector, which will be passed to `querySelectorAll`.
+     *
+     * @param {Element|string} [context=this.contentEl()]
+     *        A DOM element within which to query. Can also be a selector string in
+     *        which case the first matching element will get used as context. If
+     *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+     *        nothing it falls back to `document`.
+     *
+     * @return {NodeList}
+     *         a list of dom elements that were found
+     *
+     * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+     */
+    $$(selector, context) {
+      return $$(selector, context || this.contentEl());
+    }
+
+    /**
+     * Check if a component's element has a CSS class name.
+     *
+     * @param {string} classToCheck
+     *        CSS class name to check.
+     *
+     * @return {boolean}
+     *         - True if the `Component` has the class.
+     *         - False if the `Component` does not have the class`
+     */
+    hasClass(classToCheck) {
+      return hasClass(this.el_, classToCheck);
+    }
+
+    /**
+     * Add a CSS class name to the `Component`s element.
+     *
+     * @param {...string} classesToAdd
+     *        One or more CSS class name to add.
+     */
+    addClass(...classesToAdd) {
+      addClass(this.el_, ...classesToAdd);
+    }
+
+    /**
+     * Remove a CSS class name from the `Component`s element.
+     *
+     * @param {...string} classesToRemove
+     *        One or more CSS class name to remove.
+     */
+    removeClass(...classesToRemove) {
+      removeClass(this.el_, ...classesToRemove);
+    }
+
+    /**
+     * Add or remove a CSS class name from the component's element.
+     * - `classToToggle` gets added when {@link Component#hasClass} would return false.
+     * - `classToToggle` gets removed when {@link Component#hasClass} would return true.
+     *
+     * @param  {string} classToToggle
+     *         The class to add or remove based on (@link Component#hasClass}
+     *
+     * @param  {boolean|Dom~predicate} [predicate]
+     *         An {@link Dom~predicate} function or a boolean
+     */
+    toggleClass(classToToggle, predicate) {
+      toggleClass(this.el_, classToToggle, predicate);
+    }
+
+    /**
+     * Show the `Component`s element if it is hidden by removing the
+     * 'vjs-hidden' class name from it.
+     */
+    show() {
+      this.removeClass('vjs-hidden');
+    }
+
+    /**
+     * Hide the `Component`s element if it is currently showing by adding the
+     * 'vjs-hidden` class name to it.
+     */
+    hide() {
+      this.addClass('vjs-hidden');
+    }
+
+    /**
+     * Lock a `Component`s element in its visible state by adding the 'vjs-lock-showing'
+     * class name to it. Used during fadeIn/fadeOut.
+     *
+     * @private
+     */
+    lockShowing() {
+      this.addClass('vjs-lock-showing');
+    }
+
+    /**
+     * Unlock a `Component`s element from its visible state by removing the 'vjs-lock-showing'
+     * class name from it. Used during fadeIn/fadeOut.
+     *
+     * @private
+     */
+    unlockShowing() {
+      this.removeClass('vjs-lock-showing');
+    }
+
+    /**
+     * Get the value of an attribute on the `Component`s element.
+     *
+     * @param {string} attribute
+     *        Name of the attribute to get the value from.
+     *
+     * @return {string|null}
+     *         - The value of the attribute that was asked for.
+     *         - Can be an empty string on some browsers if the attribute does not exist
+     *           or has no value
+     *         - Most browsers will return null if the attribute does not exist or has
+     *           no value.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute}
+     */
+    getAttribute(attribute) {
+      return getAttribute(this.el_, attribute);
+    }
+
+    /**
+     * Set the value of an attribute on the `Component`'s element
+     *
+     * @param {string} attribute
+     *        Name of the attribute to set.
+     *
+     * @param {string} value
+     *        Value to set the attribute to.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute}
+     */
+    setAttribute(attribute, value) {
+      setAttribute(this.el_, attribute, value);
+    }
+
+    /**
+     * Remove an attribute from the `Component`s element.
+     *
+     * @param {string} attribute
+     *        Name of the attribute to remove.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute}
+     */
+    removeAttribute(attribute) {
+      removeAttribute(this.el_, attribute);
+    }
+
+    /**
+     * Get or set the width of the component based upon the CSS styles.
+     * See {@link Component#dimension} for more detailed information.
+     *
+     * @param {number|string} [num]
+     *        The width that you want to set postfixed with '%', 'px' or nothing.
+     *
+     * @param {boolean} [skipListeners]
+     *        Skip the componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The width when getting, zero if there is no width
+     */
+    width(num, skipListeners) {
+      return this.dimension('width', num, skipListeners);
+    }
+
+    /**
+     * Get or set the height of the component based upon the CSS styles.
+     * See {@link Component#dimension} for more detailed information.
+     *
+     * @param {number|string} [num]
+     *        The height that you want to set postfixed with '%', 'px' or nothing.
+     *
+     * @param {boolean} [skipListeners]
+     *        Skip the componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The height when getting, zero if there is no height
+     */
+    height(num, skipListeners) {
+      return this.dimension('height', num, skipListeners);
+    }
+
+    /**
+     * Set both the width and height of the `Component` element at the same time.
+     *
+     * @param  {number|string} width
+     *         Width to set the `Component`s element to.
+     *
+     * @param  {number|string} height
+     *         Height to set the `Component`s element to.
+     */
+    dimensions(width, height) {
+      // Skip componentresize listeners on width for optimization
+      this.width(width, true);
+      this.height(height);
+    }
+
+    /**
+     * Get or set width or height of the `Component` element. This is the shared code
+     * for the {@link Component#width} and {@link Component#height}.
+     *
+     * Things to know:
+     * - If the width or height in an number this will return the number postfixed with 'px'.
+     * - If the width/height is a percent this will return the percent postfixed with '%'
+     * - Hidden elements have a width of 0 with `window.getComputedStyle`. This function
+     *   defaults to the `Component`s `style.width` and falls back to `window.getComputedStyle`.
+     *   See [this]{@link http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/}
+     *   for more information
+     * - If you want the computed style of the component, use {@link Component#currentWidth}
+     *   and {@link {Component#currentHeight}
+     *
+     * @fires Component#componentresize
+     *
+     * @param {string} widthOrHeight
+     8        'width' or 'height'
+     *
+     * @param  {number|string} [num]
+     8         New dimension
+     *
+     * @param  {boolean} [skipListeners]
+     *         Skip componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The dimension when getting or 0 if unset
+     */
+    dimension(widthOrHeight, num, skipListeners) {
+      if (num !== undefined) {
+        // Set to zero if null or literally NaN (NaN !== NaN)
+        if (num === null || num !== num) {
+          num = 0;
+        }
+
+        // Check if using css width/height (% or px) and adjust
+        if (('' + num).indexOf('%') !== -1 || ('' + num).indexOf('px') !== -1) {
+          this.el_.style[widthOrHeight] = num;
+        } else if (num === 'auto') {
+          this.el_.style[widthOrHeight] = '';
+        } else {
+          this.el_.style[widthOrHeight] = num + 'px';
+        }
+
+        // skipListeners allows us to avoid triggering the resize event when setting both width and height
+        if (!skipListeners) {
+          /**
+           * Triggered when a component is resized.
+           *
+           * @event Component#componentresize
+           * @type {Event}
+           */
+          this.trigger('componentresize');
+        }
+        return;
+      }
+
+      // Not setting a value, so getting it
+      // Make sure element exists
+      if (!this.el_) {
+        return 0;
+      }
+
+      // Get dimension value from style
+      const val = this.el_.style[widthOrHeight];
+      const pxIndex = val.indexOf('px');
+      if (pxIndex !== -1) {
+        // Return the pixel value with no 'px'
+        return parseInt(val.slice(0, pxIndex), 10);
+      }
+
+      // No px so using % or no style was set, so falling back to offsetWidth/height
+      // If component has display:none, offset will return 0
+      // TODO: handle display:none and no dimension style using px
+      return parseInt(this.el_['offset' + toTitleCase$1(widthOrHeight)], 10);
+    }
+
+    /**
+     * Get the computed width or the height of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @param {string} widthOrHeight
+     *        A string containing 'width' or 'height'. Whichever one you want to get.
+     *
+     * @return {number}
+     *         The dimension that gets asked for or 0 if nothing was set
+     *         for that dimension.
+     */
+    currentDimension(widthOrHeight) {
+      let computedWidthOrHeight = 0;
+      if (widthOrHeight !== 'width' && widthOrHeight !== 'height') {
+        throw new Error('currentDimension only accepts width or height value');
+      }
+      computedWidthOrHeight = computedStyle(this.el_, widthOrHeight);
+
+      // remove 'px' from variable and parse as integer
+      computedWidthOrHeight = parseFloat(computedWidthOrHeight);
+
+      // if the computed value is still 0, it's possible that the browser is lying
+      // and we want to check the offset values.
+      // This code also runs wherever getComputedStyle doesn't exist.
+      if (computedWidthOrHeight === 0 || isNaN(computedWidthOrHeight)) {
+        const rule = `offset${toTitleCase$1(widthOrHeight)}`;
+        computedWidthOrHeight = this.el_[rule];
+      }
+      return computedWidthOrHeight;
+    }
+
+    /**
+     * An object that contains width and height values of the `Component`s
+     * computed style. Uses `window.getComputedStyle`.
+     *
+     * @typedef {Object} Component~DimensionObject
+     *
+     * @property {number} width
+     *           The width of the `Component`s computed style.
+     *
+     * @property {number} height
+     *           The height of the `Component`s computed style.
+     */
+
+    /**
+     * Get an object that contains computed width and height values of the
+     * component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {Component~DimensionObject}
+     *         The computed dimensions of the component's element.
+     */
+    currentDimensions() {
+      return {
+        width: this.currentDimension('width'),
+        height: this.currentDimension('height')
+      };
+    }
+
+    /**
+     * Get the computed width of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {number}
+     *         The computed width of the component's element.
+     */
+    currentWidth() {
+      return this.currentDimension('width');
+    }
+
+    /**
+     * Get the computed height of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {number}
+     *         The computed height of the component's element.
+     */
+    currentHeight() {
+      return this.currentDimension('height');
+    }
+
+    /**
+     * Set the focus to this component
+     */
+    focus() {
+      this.el_.focus();
+    }
+
+    /**
+     * Remove the focus from this component
+     */
+    blur() {
+      this.el_.blur();
+    }
+
+    /**
+     * When this Component receives a `keydown` event which it does not process,
+     *  it passes the event to the Player for handling.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     */
+    handleKeyDown(event) {
+      if (this.player_) {
+        // We only stop propagation here because we want unhandled events to fall
+        // back to the browser. Exclude Tab for focus trapping.
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.stopPropagation();
+        }
+        this.player_.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Many components used to have a `handleKeyPress` method, which was poorly
+     * named because it listened to a `keydown` event. This method name now
+     * delegates to `handleKeyDown`. This means anyone calling `handleKeyPress`
+     * will not see their method calls stop working.
+     *
+     * @param {KeyboardEvent} event
+     *        The event that caused this function to be called.
+     */
+    handleKeyPress(event) {
+      this.handleKeyDown(event);
+    }
+
+    /**
+     * Emit a 'tap' events when touch event support gets detected. This gets used to
+     * support toggling the controls through a tap on the video. They get enabled
+     * because every sub-component would have extra overhead otherwise.
+     *
+     * @protected
+     * @fires Component#tap
+     * @listens Component#touchstart
+     * @listens Component#touchmove
+     * @listens Component#touchleave
+     * @listens Component#touchcancel
+     * @listens Component#touchend
+      */
+    emitTapEvents() {
+      // Track the start time so we can determine how long the touch lasted
+      let touchStart = 0;
+      let firstTouch = null;
+
+      // Maximum movement allowed during a touch event to still be considered a tap
+      // Other popular libs use anywhere from 2 (hammer.js) to 15,
+      // so 10 seems like a nice, round number.
+      const tapMovementThreshold = 10;
+
+      // The maximum length a touch can be while still being considered a tap
+      const touchTimeThreshold = 200;
+      let couldBeTap;
+      this.on('touchstart', function (event) {
+        // If more than one finger, don't consider treating this as a click
+        if (event.touches.length === 1) {
+          // Copy pageX/pageY from the object
+          firstTouch = {
+            pageX: event.touches[0].pageX,
+            pageY: event.touches[0].pageY
+          };
+          // Record start time so we can detect a tap vs. "touch and hold"
+          touchStart = window.performance.now();
+          // Reset couldBeTap tracking
+          couldBeTap = true;
+        }
+      });
+      this.on('touchmove', function (event) {
+        // If more than one finger, don't consider treating this as a click
+        if (event.touches.length > 1) {
+          couldBeTap = false;
+        } else if (firstTouch) {
+          // Some devices will throw touchmoves for all but the slightest of taps.
+          // So, if we moved only a small distance, this could still be a tap
+          const xdiff = event.touches[0].pageX - firstTouch.pageX;
+          const ydiff = event.touches[0].pageY - firstTouch.pageY;
+          const touchDistance = Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+          if (touchDistance > tapMovementThreshold) {
+            couldBeTap = false;
+          }
+        }
+      });
+      const noTap = function () {
+        couldBeTap = false;
+      };
+
+      // TODO: Listen to the original target. http://youtu.be/DujfpXOKUp8?t=13m8s
+      this.on('touchleave', noTap);
+      this.on('touchcancel', noTap);
+
+      // When the touch ends, measure how long it took and trigger the appropriate
+      // event
+      this.on('touchend', function (event) {
+        firstTouch = null;
+        // Proceed only if the touchmove/leave/cancel event didn't happen
+        if (couldBeTap === true) {
+          // Measure how long the touch lasted
+          const touchTime = window.performance.now() - touchStart;
+
+          // Make sure the touch was less than the threshold to be considered a tap
+          if (touchTime < touchTimeThreshold) {
+            // Don't let browser turn this into a click
+            event.preventDefault();
+            /**
+             * Triggered when a `Component` is tapped.
+             *
+             * @event Component#tap
+             * @type {MouseEvent}
+             */
+            this.trigger('tap');
+            // It may be good to copy the touchend event object and change the
+            // type to tap, if the other event properties aren't exact after
+            // Events.fixEvent runs (e.g. event.target)
+          }
+        }
+      });
+    }
+
+    /**
+     * This function reports user activity whenever touch events happen. This can get
+     * turned off by any sub-components that wants touch events to act another way.
+     *
+     * Report user touch activity when touch events occur. User activity gets used to
+     * determine when controls should show/hide. It is simple when it comes to mouse
+     * events, because any mouse event should show the controls. So we capture mouse
+     * events that bubble up to the player and report activity when that happens.
+     * With touch events it isn't as easy as `touchstart` and `touchend` toggle player
+     * controls. So touch events can't help us at the player level either.
+     *
+     * User activity gets checked asynchronously. So what could happen is a tap event
+     * on the video turns the controls off. Then the `touchend` event bubbles up to
+     * the player. Which, if it reported user activity, would turn the controls right
+     * back on. We also don't want to completely block touch events from bubbling up.
+     * Furthermore a `touchmove` event and anything other than a tap, should not turn
+     * controls back on.
+     *
+     * @listens Component#touchstart
+     * @listens Component#touchmove
+     * @listens Component#touchend
+     * @listens Component#touchcancel
+     */
+    enableTouchActivity() {
+      // Don't continue if the root player doesn't support reporting user activity
+      if (!this.player() || !this.player().reportUserActivity) {
+        return;
+      }
+
+      // listener for reporting that the user is active
+      const report = bind_(this.player(), this.player().reportUserActivity);
+      let touchHolding;
+      this.on('touchstart', function () {
+        report();
+        // For as long as the they are touching the device or have their mouse down,
+        // we consider them active even if they're not moving their finger or mouse.
+        // So we want to continue to update that they are active
+        this.clearInterval(touchHolding);
+        // report at the same interval as activityCheck
+        touchHolding = this.setInterval(report, 250);
+      });
+      const touchEnd = function (event) {
+        report();
+        // stop the interval that maintains activity if the touch is holding
+        this.clearInterval(touchHolding);
+      };
+      this.on('touchmove', report);
+      this.on('touchend', touchEnd);
+      this.on('touchcancel', touchEnd);
+    }
+
+    /**
+     * A callback that has no parameters and is bound into `Component`s context.
+     *
+     * @callback Component~GenericCallback
+     * @this Component
+     */
+
+    /**
+     * Creates a function that runs after an `x` millisecond timeout. This function is a
+     * wrapper around `window.setTimeout`. There are a few reasons to use this one
+     * instead though:
+     * 1. It gets cleared via  {@link Component#clearTimeout} when
+     *    {@link Component#dispose} gets called.
+     * 2. The function callback will gets turned into a {@link Component~GenericCallback}
+     *
+     * > Note: You can't use `window.clearTimeout` on the id returned by this function. This
+     *         will cause its dispose listener not to get cleaned up! Please use
+     *         {@link Component#clearTimeout} or {@link Component#dispose} instead.
+     *
+     * @param {Component~GenericCallback} fn
+     *        The function that will be run after `timeout`.
+     *
+     * @param {number} timeout
+     *        Timeout in milliseconds to delay before executing the specified function.
+     *
+     * @return {number}
+     *         Returns a timeout ID that gets used to identify the timeout. It can also
+     *         get used in {@link Component#clearTimeout} to clear the timeout that
+     *         was set.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout}
+     */
+    setTimeout(fn, timeout) {
+      // declare as variables so they are properly available in timeout function
+      // eslint-disable-next-line
+      var timeoutId;
+      fn = bind_(this, fn);
+      this.clearTimersOnDispose_();
+      timeoutId = window.setTimeout(() => {
+        if (this.setTimeoutIds_.has(timeoutId)) {
+          this.setTimeoutIds_.delete(timeoutId);
+        }
+        fn();
+      }, timeout);
+      this.setTimeoutIds_.add(timeoutId);
+      return timeoutId;
+    }
+
+    /**
+     * Clears a timeout that gets created via `window.setTimeout` or
+     * {@link Component#setTimeout}. If you set a timeout via {@link Component#setTimeout}
+     * use this function instead of `window.clearTimout`. If you don't your dispose
+     * listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} timeoutId
+     *        The id of the timeout to clear. The return value of
+     *        {@link Component#setTimeout} or `window.setTimeout`.
+     *
+     * @return {number}
+     *         Returns the timeout id that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout}
+     */
+    clearTimeout(timeoutId) {
+      if (this.setTimeoutIds_.has(timeoutId)) {
+        this.setTimeoutIds_.delete(timeoutId);
+        window.clearTimeout(timeoutId);
+      }
+      return timeoutId;
+    }
+
+    /**
+     * Creates a function that gets run every `x` milliseconds. This function is a wrapper
+     * around `window.setInterval`. There are a few reasons to use this one instead though.
+     * 1. It gets cleared via  {@link Component#clearInterval} when
+     *    {@link Component#dispose} gets called.
+     * 2. The function callback will be a {@link Component~GenericCallback}
+     *
+     * @param {Component~GenericCallback} fn
+     *        The function to run every `x` seconds.
+     *
+     * @param {number} interval
+     *        Execute the specified function every `x` milliseconds.
+     *
+     * @return {number}
+     *         Returns an id that can be used to identify the interval. It can also be be used in
+     *         {@link Component#clearInterval} to clear the interval.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval}
+     */
+    setInterval(fn, interval) {
+      fn = bind_(this, fn);
+      this.clearTimersOnDispose_();
+      const intervalId = window.setInterval(fn, interval);
+      this.setIntervalIds_.add(intervalId);
+      return intervalId;
+    }
+
+    /**
+     * Clears an interval that gets created via `window.setInterval` or
+     * {@link Component#setInterval}. If you set an interval via {@link Component#setInterval}
+     * use this function instead of `window.clearInterval`. If you don't your dispose
+     * listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} intervalId
+     *        The id of the interval to clear. The return value of
+     *        {@link Component#setInterval} or `window.setInterval`.
+     *
+     * @return {number}
+     *         Returns the interval id that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval}
+     */
+    clearInterval(intervalId) {
+      if (this.setIntervalIds_.has(intervalId)) {
+        this.setIntervalIds_.delete(intervalId);
+        window.clearInterval(intervalId);
+      }
+      return intervalId;
+    }
+
+    /**
+     * Queues up a callback to be passed to requestAnimationFrame (rAF), but
+     * with a few extra bonuses:
+     *
+     * - Supports browsers that do not support rAF by falling back to
+     *   {@link Component#setTimeout}.
+     *
+     * - The callback is turned into a {@link Component~GenericCallback} (i.e.
+     *   bound to the component).
+     *
+     * - Automatic cancellation of the rAF callback is handled if the component
+     *   is disposed before it is called.
+     *
+     * @param  {Component~GenericCallback} fn
+     *         A function that will be bound to this component and executed just
+     *         before the browser's next repaint.
+     *
+     * @return {number}
+     *         Returns an rAF ID that gets used to identify the timeout. It can
+     *         also be used in {@link Component#cancelAnimationFrame} to cancel
+     *         the animation frame callback.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame}
+     */
+    requestAnimationFrame(fn) {
+      this.clearTimersOnDispose_();
+
+      // declare as variables so they are properly available in rAF function
+      // eslint-disable-next-line
+      var id;
+      fn = bind_(this, fn);
+      id = window.requestAnimationFrame(() => {
+        if (this.rafIds_.has(id)) {
+          this.rafIds_.delete(id);
+        }
+        fn();
+      });
+      this.rafIds_.add(id);
+      return id;
+    }
+
+    /**
+     * Request an animation frame, but only one named animation
+     * frame will be queued. Another will never be added until
+     * the previous one finishes.
+     *
+     * @param {string} name
+     *        The name to give this requestAnimationFrame
+     *
+     * @param  {Component~GenericCallback} fn
+     *         A function that will be bound to this component and executed just
+     *         before the browser's next repaint.
+     */
+    requestNamedAnimationFrame(name, fn) {
+      if (this.namedRafs_.has(name)) {
+        return;
+      }
+      this.clearTimersOnDispose_();
+      fn = bind_(this, fn);
+      const id = this.requestAnimationFrame(() => {
+        fn();
+        if (this.namedRafs_.has(name)) {
+          this.namedRafs_.delete(name);
+        }
+      });
+      this.namedRafs_.set(name, id);
+      return name;
+    }
+
+    /**
+     * Cancels a current named animation frame if it exists.
+     *
+     * @param {string} name
+     *        The name of the requestAnimationFrame to cancel.
+     */
+    cancelNamedAnimationFrame(name) {
+      if (!this.namedRafs_.has(name)) {
+        return;
+      }
+      this.cancelAnimationFrame(this.namedRafs_.get(name));
+      this.namedRafs_.delete(name);
+    }
+
+    /**
+     * Cancels a queued callback passed to {@link Component#requestAnimationFrame}
+     * (rAF).
+     *
+     * If you queue an rAF callback via {@link Component#requestAnimationFrame},
+     * use this function instead of `window.cancelAnimationFrame`. If you don't,
+     * your dispose listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} id
+     *        The rAF ID to clear. The return value of {@link Component#requestAnimationFrame}.
+     *
+     * @return {number}
+     *         Returns the rAF ID that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/cancelAnimationFrame}
+     */
+    cancelAnimationFrame(id) {
+      if (this.rafIds_.has(id)) {
+        this.rafIds_.delete(id);
+        window.cancelAnimationFrame(id);
+      }
+      return id;
+    }
+
+    /**
+     * A function to setup `requestAnimationFrame`, `setTimeout`,
+     * and `setInterval`, clearing on dispose.
+     *
+     * > Previously each timer added and removed dispose listeners on it's own.
+     * For better performance it was decided to batch them all, and use `Set`s
+     * to track outstanding timer ids.
+     *
+     * @private
+     */
+    clearTimersOnDispose_() {
+      if (this.clearingTimersOnDispose_) {
+        return;
+      }
+      this.clearingTimersOnDispose_ = true;
+      this.one('dispose', () => {
+        [['namedRafs_', 'cancelNamedAnimationFrame'], ['rafIds_', 'cancelAnimationFrame'], ['setTimeoutIds_', 'clearTimeout'], ['setIntervalIds_', 'clearInterval']].forEach(([idName, cancelName]) => {
+          // for a `Set` key will actually be the value again
+          // so forEach((val, val) =>` but for maps we want to use
+          // the key.
+          this[idName].forEach((val, key) => this[cancelName](key));
+        });
+        this.clearingTimersOnDispose_ = false;
+      });
+    }
+
+    /**
+     * Register a `Component` with `videojs` given the name and the component.
+     *
+     * > NOTE: {@link Tech}s should not be registered as a `Component`. {@link Tech}s
+     *         should be registered using {@link Tech.registerTech} or
+     *         {@link videojs:videojs.registerTech}.
+     *
+     * > NOTE: This function can also be seen on videojs as
+     *         {@link videojs:videojs.registerComponent}.
+     *
+     * @param {string} name
+     *        The name of the `Component` to register.
+     *
+     * @param {Component} ComponentToRegister
+     *        The `Component` class to register.
+     *
+     * @return {Component}
+     *         The `Component` that was registered.
+     */
+    static registerComponent(name, ComponentToRegister) {
+      if (typeof name !== 'string' || !name) {
+        throw new Error(`Illegal component name, "${name}"; must be a non-empty string.`);
+      }
+      const Tech = Component$1.getComponent('Tech');
+
+      // We need to make sure this check is only done if Tech has been registered.
+      const isTech = Tech && Tech.isTech(ComponentToRegister);
+      const isComp = Component$1 === ComponentToRegister || Component$1.prototype.isPrototypeOf(ComponentToRegister.prototype);
+      if (isTech || !isComp) {
+        let reason;
+        if (isTech) {
+          reason = 'techs must be registered using Tech.registerTech()';
+        } else {
+          reason = 'must be a Component subclass';
+        }
+        throw new Error(`Illegal component, "${name}"; ${reason}.`);
+      }
+      name = toTitleCase$1(name);
+      if (!Component$1.components_) {
+        Component$1.components_ = {};
+      }
+      const Player = Component$1.getComponent('Player');
+      if (name === 'Player' && Player && Player.players) {
+        const players = Player.players;
+        const playerNames = Object.keys(players);
+
+        // If we have players that were disposed, then their name will still be
+        // in Players.players. So, we must loop through and verify that the value
+        // for each item is not null. This allows registration of the Player component
+        // after all players have been disposed or before any were created.
+        if (players && playerNames.length > 0 && playerNames.map(pname => players[pname]).every(Boolean)) {
+          throw new Error('Can not register Player component after player has been created.');
+        }
+      }
+      Component$1.components_[name] = ComponentToRegister;
+      Component$1.components_[toLowerCase(name)] = ComponentToRegister;
+      return ComponentToRegister;
+    }
+
+    /**
+     * Get a `Component` based on the name it was registered with.
+     *
+     * @param {string} name
+     *        The Name of the component to get.
+     *
+     * @return {typeof Component}
+     *         The `Component` that got registered under the given name.
+     */
+    static getComponent(name) {
+      if (!name || !Component$1.components_) {
+        return;
+      }
+      return Component$1.components_[name];
+    }
+  }
+  Component$1.registerComponent('Component', Component$1);
+
+  /**
+   * @file time.js
+   * @module time
+   */
+
+  /**
+   * Returns the time for the specified index at the start or end
+   * of a TimeRange object.
+   *
+   * @typedef    {Function} TimeRangeIndex
+   *
+   * @param      {number} [index=0]
+   *             The range number to return the time for.
+   *
+   * @return     {number}
+   *             The time offset at the specified index.
+   *
+   * @deprecated The index argument must be provided.
+   *             In the future, leaving it out will throw an error.
+   */
+
+  /**
+   * An object that contains ranges of time, which mimics {@link TimeRanges}.
+   *
+   * @typedef  {Object} TimeRange
+   *
+   * @property {number} length
+   *           The number of time ranges represented by this object.
+   *
+   * @property {module:time~TimeRangeIndex} start
+   *           Returns the time offset at which a specified time range begins.
+   *
+   * @property {module:time~TimeRangeIndex} end
+   *           Returns the time offset at which a specified time range ends.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges
+   */
+
+  /**
+   * Check if any of the time ranges are over the maximum index.
+   *
+   * @private
+   * @param   {string} fnName
+   *          The function name to use for logging
+   *
+   * @param   {number} index
+   *          The index to check
+   *
+   * @param   {number} maxIndex
+   *          The maximum possible index
+   *
+   * @throws  {Error} if the timeRanges provided are over the maxIndex
+   */
+  function rangeCheck(fnName, index, maxIndex) {
+    if (typeof index !== 'number' || index < 0 || index > maxIndex) {
+      throw new Error(`Failed to execute '${fnName}' on 'TimeRanges': The index provided (${index}) is non-numeric or out of bounds (0-${maxIndex}).`);
+    }
+  }
+
+  /**
+   * Get the time for the specified index at the start or end
+   * of a TimeRange object.
+   *
+   * @private
+   * @param      {string} fnName
+   *             The function name to use for logging
+   *
+   * @param      {string} valueIndex
+   *             The property that should be used to get the time. should be
+   *             'start' or 'end'
+   *
+   * @param      {Array} ranges
+   *             An array of time ranges
+   *
+   * @param      {Array} [rangeIndex=0]
+   *             The index to start the search at
+   *
+   * @return     {number}
+   *             The time that offset at the specified index.
+   *
+   * @deprecated rangeIndex must be set to a value, in the future this will throw an error.
+   * @throws     {Error} if rangeIndex is more than the length of ranges
+   */
+  function getRange(fnName, valueIndex, ranges, rangeIndex) {
+    rangeCheck(fnName, rangeIndex, ranges.length - 1);
+    return ranges[rangeIndex][valueIndex];
+  }
+
+  /**
+   * Create a time range object given ranges of time.
+   *
+   * @private
+   * @param   {Array} [ranges]
+   *          An array of time ranges.
+   *
+   * @return  {TimeRange}
+   */
+  function createTimeRangesObj(ranges) {
+    let timeRangesObj;
+    if (ranges === undefined || ranges.length === 0) {
+      timeRangesObj = {
+        length: 0,
+        start() {
+          throw new Error('This TimeRanges object is empty');
+        },
+        end() {
+          throw new Error('This TimeRanges object is empty');
+        }
+      };
+    } else {
+      timeRangesObj = {
+        length: ranges.length,
+        start: getRange.bind(null, 'start', 0, ranges),
+        end: getRange.bind(null, 'end', 1, ranges)
+      };
+    }
+    if (window.Symbol && window.Symbol.iterator) {
+      timeRangesObj[window.Symbol.iterator] = () => (ranges || []).values();
+    }
+    return timeRangesObj;
+  }
+
+  /**
+   * Create a `TimeRange` object which mimics an
+   * {@link https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges|HTML5 TimeRanges instance}.
+   *
+   * @param {number|Array[]} start
+   *        The start of a single range (a number) or an array of ranges (an
+   *        array of arrays of two numbers each).
+   *
+   * @param {number} end
+   *        The end of a single range. Cannot be used with the array form of
+   *        the `start` argument.
+   *
+   * @return {TimeRange}
+   */
+  function createTimeRanges$1(start, end) {
+    if (Array.isArray(start)) {
+      return createTimeRangesObj(start);
+    } else if (start === undefined || end === undefined) {
+      return createTimeRangesObj();
+    }
+    return createTimeRangesObj([[start, end]]);
+  }
+
+  /**
+   * Format seconds as a time string, H:MM:SS or M:SS. Supplying a guide (in
+   * seconds) will force a number of leading zeros to cover the length of the
+   * guide.
+   *
+   * @private
+   * @param  {number} seconds
+   *         Number of seconds to be turned into a string
+   *
+   * @param  {number} guide
+   *         Number (in seconds) to model the string after
+   *
+   * @return {string}
+   *         Time formatted as H:MM:SS or M:SS
+   */
+  const defaultImplementation = function (seconds, guide) {
+    seconds = seconds < 0 ? 0 : seconds;
+    let s = Math.floor(seconds % 60);
+    let m = Math.floor(seconds / 60 % 60);
+    let h = Math.floor(seconds / 3600);
+    const gm = Math.floor(guide / 60 % 60);
+    const gh = Math.floor(guide / 3600);
+
+    // handle invalid times
+    if (isNaN(seconds) || seconds === Infinity) {
+      // '-' is false for all relational operators (e.g. <, >=) so this setting
+      // will add the minimum number of fields specified by the guide
+      h = m = s = '-';
+    }
+
+    // Check if we need to show hours
+    h = h > 0 || gh > 0 ? h + ':' : '';
+
+    // If hours are showing, we may need to add a leading zero.
+    // Always show at least one digit of minutes.
+    m = ((h || gm >= 10) && m < 10 ? '0' + m : m) + ':';
+
+    // Check if leading zero is need for seconds
+    s = s < 10 ? '0' + s : s;
+    return h + m + s;
+  };
+
+  // Internal pointer to the current implementation.
+  let implementation = defaultImplementation;
+
+  /**
+   * Replaces the default formatTime implementation with a custom implementation.
+   *
+   * @param {Function} customImplementation
+   *        A function which will be used in place of the default formatTime
+   *        implementation. Will receive the current time in seconds and the
+   *        guide (in seconds) as arguments.
+   */
+  function setFormatTime(customImplementation) {
+    implementation = customImplementation;
+  }
+
+  /**
+   * Resets formatTime to the default implementation.
+   */
+  function resetFormatTime() {
+    implementation = defaultImplementation;
+  }
+
+  /**
+   * Delegates to either the default time formatting function or a custom
+   * function supplied via `setFormatTime`.
+   *
+   * Formats seconds as a time string (H:MM:SS or M:SS). Supplying a
+   * guide (in seconds) will force a number of leading zeros to cover the
+   * length of the guide.
+   *
+   * @example  formatTime(125, 600) === "02:05"
+   * @param    {number} seconds
+   *           Number of seconds to be turned into a string
+   *
+   * @param    {number} guide
+   *           Number (in seconds) to model the string after
+   *
+   * @return   {string}
+   *           Time formatted as H:MM:SS or M:SS
+   */
+  function formatTime(seconds, guide = seconds) {
+    return implementation(seconds, guide);
+  }
+
+  var Time = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    createTimeRanges: createTimeRanges$1,
+    createTimeRange: createTimeRanges$1,
+    setFormatTime: setFormatTime,
+    resetFormatTime: resetFormatTime,
+    formatTime: formatTime
+  });
+
+  /**
+   * @file buffer.js
+   * @module buffer
+   */
+
+  /**
+   * Compute the percentage of the media that has been buffered.
+   *
+   * @param { import('./time').TimeRange } buffered
+   *        The current `TimeRanges` object representing buffered time ranges
+   *
+   * @param {number} duration
+   *        Total duration of the media
+   *
+   * @return {number}
+   *         Percent buffered of the total duration in decimal form.
+   */
+  function bufferedPercent(buffered, duration) {
+    let bufferedDuration = 0;
+    let start;
+    let end;
+    if (!duration) {
+      return 0;
+    }
+    if (!buffered || !buffered.length) {
+      buffered = createTimeRanges$1(0, 0);
+    }
+    for (let i = 0; i < buffered.length; i++) {
+      start = buffered.start(i);
+      end = buffered.end(i);
+
+      // buffered end can be bigger than duration by a very small fraction
+      if (end > duration) {
+        end = duration;
+      }
+      bufferedDuration += end - start;
+    }
+    return bufferedDuration / duration;
+  }
+
+  /**
+   * @file media-error.js
+   */
+
+  /**
+   * A Custom `MediaError` class which mimics the standard HTML5 `MediaError` class.
+   *
+   * @param {number|string|Object|MediaError} value
+   *        This can be of multiple types:
+   *        - number: should be a standard error code
+   *        - string: an error message (the code will be 0)
+   *        - Object: arbitrary properties
+   *        - `MediaError` (native): used to populate a video.js `MediaError` object
+   *        - `MediaError` (video.js): will return itself if it's already a
+   *          video.js `MediaError` object.
+   *
+   * @see [MediaError Spec]{@link https://dev.w3.org/html5/spec-author-view/video.html#mediaerror}
+   * @see [Encrypted MediaError Spec]{@link https://www.w3.org/TR/2013/WD-encrypted-media-20130510/#error-codes}
+   *
+   * @class MediaError
+   */
+  function MediaError(value) {
+    // Allow redundant calls to this constructor to avoid having `instanceof`
+    // checks peppered around the code.
+    if (value instanceof MediaError) {
+      return value;
+    }
+    if (typeof value === 'number') {
+      this.code = value;
+    } else if (typeof value === 'string') {
+      // default code is zero, so this is a custom error
+      this.message = value;
+    } else if (isObject$1(value)) {
+      // We assign the `code` property manually because native `MediaError` objects
+      // do not expose it as an own/enumerable property of the object.
+      if (typeof value.code === 'number') {
+        this.code = value.code;
+      }
+      Object.assign(this, value);
+    }
+    if (!this.message) {
+      this.message = MediaError.defaultMessages[this.code] || '';
+    }
+  }
+
+  /**
+   * The error code that refers two one of the defined `MediaError` types
+   *
+   * @type {Number}
+   */
+  MediaError.prototype.code = 0;
+
+  /**
+   * An optional message that to show with the error. Message is not part of the HTML5
+   * video spec but allows for more informative custom errors.
+   *
+   * @type {String}
+   */
+  MediaError.prototype.message = '';
+
+  /**
+   * An optional status code that can be set by plugins to allow even more detail about
+   * the error. For example a plugin might provide a specific HTTP status code and an
+   * error message for that code. Then when the plugin gets that error this class will
+   * know how to display an error message for it. This allows a custom message to show
+   * up on the `Player` error overlay.
+   *
+   * @type {Array}
+   */
+  MediaError.prototype.status = null;
+
+  /**
+   * An object containing an error type, as well as other information regarding the error.
+   *
+   * @typedef {{errorType: string, [key: string]: any}} ErrorMetadata
+   */
+
+  /**
+   * An optional object to give more detail about the error. This can be used to give
+   * a higher level of specificity to an error versus the more generic MediaError codes.
+   * `metadata` expects an `errorType` string that should align with the values from videojs.Error.
+   *
+   * @type {ErrorMetadata}
+   */
+  MediaError.prototype.metadata = null;
+
+  /**
+   * Errors indexed by the W3C standard. The order **CANNOT CHANGE**! See the
+   * specification listed under {@link MediaError} for more information.
+   *
+   * @enum {array}
+   * @readonly
+   * @property {string} 0 - MEDIA_ERR_CUSTOM
+   * @property {string} 1 - MEDIA_ERR_ABORTED
+   * @property {string} 2 - MEDIA_ERR_NETWORK
+   * @property {string} 3 - MEDIA_ERR_DECODE
+   * @property {string} 4 - MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @property {string} 5 - MEDIA_ERR_ENCRYPTED
+   */
+  MediaError.errorTypes = ['MEDIA_ERR_CUSTOM', 'MEDIA_ERR_ABORTED', 'MEDIA_ERR_NETWORK', 'MEDIA_ERR_DECODE', 'MEDIA_ERR_SRC_NOT_SUPPORTED', 'MEDIA_ERR_ENCRYPTED'];
+
+  /**
+   * The default `MediaError` messages based on the {@link MediaError.errorTypes}.
+   *
+   * @type {Array}
+   * @constant
+   */
+  MediaError.defaultMessages = {
+    1: 'You aborted the media playback',
+    2: 'A network error caused the media download to fail part-way.',
+    3: 'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.',
+    4: 'The media could not be loaded, either because the server or network failed or because the format is not supported.',
+    5: 'The media is encrypted and we do not have the keys to decrypt it.'
+  };
+
+  /**
+   * W3C error code for any custom error.
+   *
+   * @member MediaError#MEDIA_ERR_CUSTOM
+   * @constant {number}
+   * @default 0
+   */
+  MediaError.MEDIA_ERR_CUSTOM = 0;
+
+  /**
+   * W3C error code for any custom error.
+   *
+   * @member MediaError.MEDIA_ERR_CUSTOM
+   * @constant {number}
+   * @default 0
+   */
+  MediaError.prototype.MEDIA_ERR_CUSTOM = 0;
+
+  /**
+   * W3C error code for media error aborted.
+   *
+   * @member MediaError#MEDIA_ERR_ABORTED
+   * @constant {number}
+   * @default 1
+   */
+  MediaError.MEDIA_ERR_ABORTED = 1;
+
+  /**
+   * W3C error code for media error aborted.
+   *
+   * @member MediaError.MEDIA_ERR_ABORTED
+   * @constant {number}
+   * @default 1
+   */
+  MediaError.prototype.MEDIA_ERR_ABORTED = 1;
+
+  /**
+   * W3C error code for any network error.
+   *
+   * @member MediaError#MEDIA_ERR_NETWORK
+   * @constant {number}
+   * @default 2
+   */
+  MediaError.MEDIA_ERR_NETWORK = 2;
+
+  /**
+   * W3C error code for any network error.
+   *
+   * @member MediaError.MEDIA_ERR_NETWORK
+   * @constant {number}
+   * @default 2
+   */
+  MediaError.prototype.MEDIA_ERR_NETWORK = 2;
+
+  /**
+   * W3C error code for any decoding error.
+   *
+   * @member MediaError#MEDIA_ERR_DECODE
+   * @constant {number}
+   * @default 3
+   */
+  MediaError.MEDIA_ERR_DECODE = 3;
+
+  /**
+   * W3C error code for any decoding error.
+   *
+   * @member MediaError.MEDIA_ERR_DECODE
+   * @constant {number}
+   * @default 3
+   */
+  MediaError.prototype.MEDIA_ERR_DECODE = 3;
+
+  /**
+   * W3C error code for any time that a source is not supported.
+   *
+   * @member MediaError#MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @constant {number}
+   * @default 4
+   */
+  MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+
+  /**
+   * W3C error code for any time that a source is not supported.
+   *
+   * @member MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @constant {number}
+   * @default 4
+   */
+  MediaError.prototype.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+
+  /**
+   * W3C error code for any time that a source is encrypted.
+   *
+   * @member MediaError#MEDIA_ERR_ENCRYPTED
+   * @constant {number}
+   * @default 5
+   */
+  MediaError.MEDIA_ERR_ENCRYPTED = 5;
+
+  /**
+   * W3C error code for any time that a source is encrypted.
+   *
+   * @member MediaError.MEDIA_ERR_ENCRYPTED
+   * @constant {number}
+   * @default 5
+   */
+  MediaError.prototype.MEDIA_ERR_ENCRYPTED = 5;
+
+  var tuple = SafeParseTuple;
+  function SafeParseTuple(obj, reviver) {
+    var json;
+    var error = null;
+    try {
+      json = JSON.parse(obj, reviver);
+    } catch (err) {
+      error = err;
+    }
+    return [error, json];
+  }
+
+  /**
+   * Returns whether an object is `Promise`-like (i.e. has a `then` method).
+   *
+   * @param  {Object}  value
+   *         An object that may or may not be `Promise`-like.
+   *
+   * @return {boolean}
+   *         Whether or not the object is `Promise`-like.
+   */
+  function isPromise(value) {
+    return value !== undefined && value !== null && typeof value.then === 'function';
+  }
+
+  /**
+   * Silence a Promise-like object.
+   *
+   * This is useful for avoiding non-harmful, but potentially confusing "uncaught
+   * play promise" rejection error messages.
+   *
+   * @param  {Object} value
+   *         An object that may or may not be `Promise`-like.
+   */
+  function silencePromise(value) {
+    if (isPromise(value)) {
+      value.then(null, e => {});
+    }
+  }
+
+  /**
+   * @file text-track-list-converter.js Utilities for capturing text track state and
+   * re-creating tracks based on a capture.
+   *
+   * @module text-track-list-converter
+   */
+
+  /**
+   * Examine a single {@link TextTrack} and return a JSON-compatible javascript object that
+   * represents the {@link TextTrack}'s state.
+   *
+   * @param {TextTrack} track
+   *        The text track to query.
+   *
+   * @return {Object}
+   *         A serializable javascript representation of the TextTrack.
+   * @private
+   */
+  const trackToJson_ = function (track) {
+    const ret = ['kind', 'label', 'language', 'id', 'inBandMetadataTrackDispatchType', 'mode', 'src'].reduce((acc, prop, i) => {
+      if (track[prop]) {
+        acc[prop] = track[prop];
+      }
+      return acc;
+    }, {
+      cues: track.cues && Array.prototype.map.call(track.cues, function (cue) {
+        return {
+          startTime: cue.startTime,
+          endTime: cue.endTime,
+          text: cue.text,
+          id: cue.id
+        };
+      })
+    });
+    return ret;
+  };
+
+  /**
+   * Examine a {@link Tech} and return a JSON-compatible javascript array that represents the
+   * state of all {@link TextTrack}s currently configured. The return array is compatible with
+   * {@link text-track-list-converter:jsonToTextTracks}.
+   *
+   * @param { import('../tech/tech').default } tech
+   *        The tech object to query
+   *
+   * @return {Array}
+   *         A serializable javascript representation of the {@link Tech}s
+   *         {@link TextTrackList}.
+   */
+  const textTracksToJson = function (tech) {
+    const trackEls = tech.$$('track');
+    const trackObjs = Array.prototype.map.call(trackEls, t => t.track);
+    const tracks = Array.prototype.map.call(trackEls, function (trackEl) {
+      const json = trackToJson_(trackEl.track);
+      if (trackEl.src) {
+        json.src = trackEl.src;
+      }
+      return json;
+    });
+    return tracks.concat(Array.prototype.filter.call(tech.textTracks(), function (track) {
+      return trackObjs.indexOf(track) === -1;
+    }).map(trackToJson_));
+  };
+
+  /**
+   * Create a set of remote {@link TextTrack}s on a {@link Tech} based on an array of javascript
+   * object {@link TextTrack} representations.
+   *
+   * @param {Array} json
+   *        An array of `TextTrack` representation objects, like those that would be
+   *        produced by `textTracksToJson`.
+   *
+   * @param {Tech} tech
+   *        The `Tech` to create the `TextTrack`s on.
+   */
+  const jsonToTextTracks = function (json, tech) {
+    json.forEach(function (track) {
+      const addedTrack = tech.addRemoteTextTrack(track).track;
+      if (!track.src && track.cues) {
+        track.cues.forEach(cue => addedTrack.addCue(cue));
+      }
+    });
+    return tech.textTracks();
+  };
+  var textTrackConverter = {
+    textTracksToJson,
+    jsonToTextTracks,
+    trackToJson_
+  };
+
+  /**
+   * @file modal-dialog.js
+   */
+  const MODAL_CLASS_NAME = 'vjs-modal-dialog';
+
+  /**
+   * The `ModalDialog` displays over the video and its controls, which blocks
+   * interaction with the player until it is closed.
+   *
+   * Modal dialogs include a "Close" button and will close when that button
+   * is activated - or when ESC is pressed anywhere.
+   *
+   * @extends Component
+   */
+  class ModalDialog extends Component$1 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param { import('./utils/dom').ContentDescriptor} [options.content=undefined]
+     *        Provide customized content for this modal.
+     *
+     * @param {string} [options.description]
+     *        A text description for the modal, primarily for accessibility.
+     *
+     * @param {boolean} [options.fillAlways=false]
+     *        Normally, modals are automatically filled only the first time
+     *        they open. This tells the modal to refresh its content
+     *        every time it opens.
+     *
+     * @param {string} [options.label]
+     *        A text label for the modal, primarily for accessibility.
+     *
+     * @param {boolean} [options.pauseOnOpen=true]
+     *        If `true`, playback will will be paused if playing when
+     *        the modal opens, and resumed when it closes.
+     *
+     * @param {boolean} [options.temporary=true]
+     *        If `true`, the modal can only be opened once; it will be
+     *        disposed as soon as it's closed.
+     *
+     * @param {boolean} [options.uncloseable=false]
+     *        If `true`, the user will not be able to close the modal
+     *        through the UI in the normal ways. Programmatic closing is
+     *        still possible.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.close_ = e => this.close(e);
+      this.opened_ = this.hasBeenOpened_ = this.hasBeenFilled_ = false;
+      this.closeable(!this.options_.uncloseable);
+      this.content(this.options_.content);
+
+      // Make sure the contentEl is defined AFTER any children are initialized
+      // because we only want the contents of the modal in the contentEl
+      // (not the UI elements like the close button).
+      this.contentEl_ = createEl('div', {
+        className: `${MODAL_CLASS_NAME}-content`
+      }, {
+        role: 'document'
+      });
+      this.descEl_ = createEl('p', {
+        className: `${MODAL_CLASS_NAME}-description vjs-control-text`,
+        id: this.el().getAttribute('aria-describedby')
+      });
+      textContent(this.descEl_, this.description());
+      this.el_.appendChild(this.descEl_);
+      this.el_.appendChild(this.contentEl_);
+    }
+
+    /**
+     * Create the `ModalDialog`'s DOM element
+     *
+     * @return {Element}
+     *         The DOM element that gets created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildCSSClass(),
+        tabIndex: -1
+      }, {
+        'aria-describedby': `${this.id()}_description`,
+        'aria-hidden': 'true',
+        'aria-label': this.label(),
+        'role': 'dialog',
+        'aria-live': 'polite'
+      });
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.descEl_ = null;
+      this.previouslyActiveEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `${MODAL_CLASS_NAME} vjs-hidden ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Returns the label string for this modal. Primarily used for accessibility.
+     *
+     * @return {string}
+     *         the localized or raw label of this modal.
+     */
+    label() {
+      return this.localize(this.options_.label || 'Modal Window');
+    }
+
+    /**
+     * Returns the description string for this modal. Primarily used for
+     * accessibility.
+     *
+     * @return {string}
+     *         The localized or raw description of this modal.
+     */
+    description() {
+      let desc = this.options_.description || this.localize('This is a modal window.');
+
+      // Append a universal closeability message if the modal is closeable.
+      if (this.closeable()) {
+        desc += ' ' + this.localize('This modal can be closed by pressing the Escape key or activating the close button.');
+      }
+      return desc;
+    }
+
+    /**
+     * Opens the modal.
+     *
+     * @fires ModalDialog#beforemodalopen
+     * @fires ModalDialog#modalopen
+     */
+    open() {
+      if (this.opened_) {
+        if (this.options_.fillAlways) {
+          this.fill();
+        }
+        return;
+      }
+      const player = this.player();
+
+      /**
+        * Fired just before a `ModalDialog` is opened.
+        *
+        * @event ModalDialog#beforemodalopen
+        * @type {Event}
+        */
+      this.trigger('beforemodalopen');
+      this.opened_ = true;
+
+      // Fill content if the modal has never opened before and
+      // never been filled.
+      if (this.options_.fillAlways || !this.hasBeenOpened_ && !this.hasBeenFilled_) {
+        this.fill();
+      }
+
+      // If the player was playing, pause it and take note of its previously
+      // playing state.
+      this.wasPlaying_ = !player.paused();
+      if (this.options_.pauseOnOpen && this.wasPlaying_) {
+        player.pause();
+      }
+      this.on('keydown', this.handleKeyDown_);
+
+      // Hide controls and note if they were enabled.
+      this.hadControls_ = player.controls();
+      player.controls(false);
+      this.show();
+      this.conditionalFocus_();
+      this.el().setAttribute('aria-hidden', 'false');
+
+      /**
+        * Fired just after a `ModalDialog` is opened.
+        *
+        * @event ModalDialog#modalopen
+        * @type {Event}
+        */
+      this.trigger('modalopen');
+      this.hasBeenOpened_ = true;
+    }
+
+    /**
+     * If the `ModalDialog` is currently open or closed.
+     *
+     * @param  {boolean} [value]
+     *         If given, it will open (`true`) or close (`false`) the modal.
+     *
+     * @return {boolean}
+     *         the current open state of the modaldialog
+     */
+    opened(value) {
+      if (typeof value === 'boolean') {
+        this[value ? 'open' : 'close']();
+      }
+      return this.opened_;
+    }
+
+    /**
+     * Closes the modal, does nothing if the `ModalDialog` is
+     * not open.
+     *
+     * @fires ModalDialog#beforemodalclose
+     * @fires ModalDialog#modalclose
+     */
+    close() {
+      if (!this.opened_) {
+        return;
+      }
+      const player = this.player();
+
+      /**
+        * Fired just before a `ModalDialog` is closed.
+        *
+        * @event ModalDialog#beforemodalclose
+        * @type {Event}
+        */
+      this.trigger('beforemodalclose');
+      this.opened_ = false;
+      if (this.wasPlaying_ && this.options_.pauseOnOpen) {
+        player.play();
+      }
+      this.off('keydown', this.handleKeyDown_);
+      if (this.hadControls_) {
+        player.controls(true);
+      }
+      this.hide();
+      this.el().setAttribute('aria-hidden', 'true');
+
+      /**
+        * Fired just after a `ModalDialog` is closed.
+        *
+        * @event ModalDialog#modalclose
+        * @type {Event}
+        */
+      this.trigger('modalclose');
+      this.conditionalBlur_();
+      if (this.options_.temporary) {
+        this.dispose();
+      }
+    }
+
+    /**
+     * Check to see if the `ModalDialog` is closeable via the UI.
+     *
+     * @param  {boolean} [value]
+     *         If given as a boolean, it will set the `closeable` option.
+     *
+     * @return {boolean}
+     *         Returns the final value of the closable option.
+     */
+    closeable(value) {
+      if (typeof value === 'boolean') {
+        const closeable = this.closeable_ = !!value;
+        let close = this.getChild('closeButton');
+
+        // If this is being made closeable and has no close button, add one.
+        if (closeable && !close) {
+          // The close button should be a child of the modal - not its
+          // content element, so temporarily change the content element.
+          const temp = this.contentEl_;
+          this.contentEl_ = this.el_;
+          close = this.addChild('closeButton', {
+            controlText: 'Close Modal Dialog'
+          });
+          this.contentEl_ = temp;
+          this.on(close, 'close', this.close_);
+        }
+
+        // If this is being made uncloseable and has a close button, remove it.
+        if (!closeable && close) {
+          this.off(close, 'close', this.close_);
+          this.removeChild(close);
+          close.dispose();
+        }
+      }
+      return this.closeable_;
+    }
+
+    /**
+     * Fill the modal's content element with the modal's "content" option.
+     * The content element will be emptied before this change takes place.
+     */
+    fill() {
+      this.fillWith(this.content());
+    }
+
+    /**
+     * Fill the modal's content element with arbitrary content.
+     * The content element will be emptied before this change takes place.
+     *
+     * @fires ModalDialog#beforemodalfill
+     * @fires ModalDialog#modalfill
+     *
+     * @param { import('./utils/dom').ContentDescriptor} [content]
+     *        The same rules apply to this as apply to the `content` option.
+     */
+    fillWith(content) {
+      const contentEl = this.contentEl();
+      const parentEl = contentEl.parentNode;
+      const nextSiblingEl = contentEl.nextSibling;
+
+      /**
+        * Fired just before a `ModalDialog` is filled with content.
+        *
+        * @event ModalDialog#beforemodalfill
+        * @type {Event}
+        */
+      this.trigger('beforemodalfill');
+      this.hasBeenFilled_ = true;
+
+      // Detach the content element from the DOM before performing
+      // manipulation to avoid modifying the live DOM multiple times.
+      parentEl.removeChild(contentEl);
+      this.empty();
+      insertContent(contentEl, content);
+      /**
+       * Fired just after a `ModalDialog` is filled with content.
+       *
+       * @event ModalDialog#modalfill
+       * @type {Event}
+       */
+      this.trigger('modalfill');
+
+      // Re-inject the re-filled content element.
+      if (nextSiblingEl) {
+        parentEl.insertBefore(contentEl, nextSiblingEl);
+      } else {
+        parentEl.appendChild(contentEl);
+      }
+
+      // make sure that the close button is last in the dialog DOM
+      const closeButton = this.getChild('closeButton');
+      if (closeButton) {
+        parentEl.appendChild(closeButton.el_);
+      }
+    }
+
+    /**
+     * Empties the content element. This happens anytime the modal is filled.
+     *
+     * @fires ModalDialog#beforemodalempty
+     * @fires ModalDialog#modalempty
+     */
+    empty() {
+      /**
+      * Fired just before a `ModalDialog` is emptied.
+      *
+      * @event ModalDialog#beforemodalempty
+      * @type {Event}
+      */
+      this.trigger('beforemodalempty');
+      emptyEl(this.contentEl());
+
+      /**
+      * Fired just after a `ModalDialog` is emptied.
+      *
+      * @event ModalDialog#modalempty
+      * @type {Event}
+      */
+      this.trigger('modalempty');
+    }
+
+    /**
+     * Gets or sets the modal content, which gets normalized before being
+     * rendered into the DOM.
+     *
+     * This does not update the DOM or fill the modal, but it is called during
+     * that process.
+     *
+     * @param  { import('./utils/dom').ContentDescriptor} [value]
+     *         If defined, sets the internal content value to be used on the
+     *         next call(s) to `fill`. This value is normalized before being
+     *         inserted. To "clear" the internal content value, pass `null`.
+     *
+     * @return { import('./utils/dom').ContentDescriptor}
+     *         The current content of the modal dialog
+     */
+    content(value) {
+      if (typeof value !== 'undefined') {
+        this.content_ = value;
+      }
+      return this.content_;
+    }
+
+    /**
+     * conditionally focus the modal dialog if focus was previously on the player.
+     *
+     * @private
+     */
+    conditionalFocus_() {
+      const activeEl = document.activeElement;
+      const playerEl = this.player_.el_;
+      this.previouslyActiveEl_ = null;
+      if (playerEl.contains(activeEl) || playerEl === activeEl) {
+        this.previouslyActiveEl_ = activeEl;
+        this.focus();
+      }
+    }
+
+    /**
+     * conditionally blur the element and refocus the last focused element
+     *
+     * @private
+     */
+    conditionalBlur_() {
+      if (this.previouslyActiveEl_) {
+        this.previouslyActiveEl_.focus();
+        this.previouslyActiveEl_ = null;
+      }
+    }
+
+    /**
+     * Keydown handler. Attached when modal is focused.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Do not allow keydowns to reach out of the modal dialog.
+      event.stopPropagation();
+      if (keycode.isEventKey(event, 'Escape') && this.closeable()) {
+        event.preventDefault();
+        this.close();
+        return;
+      }
+
+      // exit early if it isn't a tab key
+      if (!keycode.isEventKey(event, 'Tab')) {
+        return;
+      }
+      const focusableEls = this.focusableEls_();
+      const activeEl = this.el_.querySelector(':focus');
+      let focusIndex;
+      for (let i = 0; i < focusableEls.length; i++) {
+        if (activeEl === focusableEls[i]) {
+          focusIndex = i;
+          break;
+        }
+      }
+      if (document.activeElement === this.el_) {
+        focusIndex = 0;
+      }
+      if (event.shiftKey && focusIndex === 0) {
+        focusableEls[focusableEls.length - 1].focus();
+        event.preventDefault();
+      } else if (!event.shiftKey && focusIndex === focusableEls.length - 1) {
+        focusableEls[0].focus();
+        event.preventDefault();
+      }
+    }
+
+    /**
+     * get all focusable elements
+     *
+     * @private
+     */
+    focusableEls_() {
+      const allChildren = this.el_.querySelectorAll('*');
+      return Array.prototype.filter.call(allChildren, child => {
+        return (child instanceof window.HTMLAnchorElement || child instanceof window.HTMLAreaElement) && child.hasAttribute('href') || (child instanceof window.HTMLInputElement || child instanceof window.HTMLSelectElement || child instanceof window.HTMLTextAreaElement || child instanceof window.HTMLButtonElement) && !child.hasAttribute('disabled') || child instanceof window.HTMLIFrameElement || child instanceof window.HTMLObjectElement || child instanceof window.HTMLEmbedElement || child.hasAttribute('tabindex') && child.getAttribute('tabindex') !== -1 || child.hasAttribute('contenteditable');
+      });
+    }
+  }
+
+  /**
+   * Default options for `ModalDialog` default options.
+   *
+   * @type {Object}
+   * @private
+   */
+  ModalDialog.prototype.options_ = {
+    pauseOnOpen: true,
+    temporary: true
+  };
+  Component$1.registerComponent('ModalDialog', ModalDialog);
+
+  /**
+   * @file track-list.js
+   */
+
+  /**
+   * Common functionaliy between {@link TextTrackList}, {@link AudioTrackList}, and
+   * {@link VideoTrackList}
+   *
+   * @extends EventTarget
+   */
+  class TrackList extends EventTarget$2 {
+    /**
+     * Create an instance of this class
+     *
+     * @param { import('./track').default[] } tracks
+     *        A list of tracks to initialize the list with.
+     *
+     * @abstract
+     */
+    constructor(tracks = []) {
+      super();
+      this.tracks_ = [];
+
+      /**
+       * @memberof TrackList
+       * @member {number} length
+       *         The current number of `Track`s in the this Trackist.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.tracks_.length;
+        }
+      });
+      for (let i = 0; i < tracks.length; i++) {
+        this.addTrack(tracks[i]);
+      }
+    }
+
+    /**
+     * Add a {@link Track} to the `TrackList`
+     *
+     * @param { import('./track').default } track
+     *        The audio, video, or text track to add to the list.
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      const index = this.tracks_.length;
+      if (!('' + index in this)) {
+        Object.defineProperty(this, index, {
+          get() {
+            return this.tracks_[index];
+          }
+        });
+      }
+
+      // Do not add duplicate tracks
+      if (this.tracks_.indexOf(track) === -1) {
+        this.tracks_.push(track);
+        /**
+         * Triggered when a track is added to a track list.
+         *
+         * @event TrackList#addtrack
+         * @type {Event}
+         * @property {Track} track
+         *           A reference to track that was added.
+         */
+        this.trigger({
+          track,
+          type: 'addtrack',
+          target: this
+        });
+      }
+
+      /**
+       * Triggered when a track label is changed.
+       *
+       * @event TrackList#addtrack
+       * @type {Event}
+       * @property {Track} track
+       *           A reference to track that was added.
+       */
+      track.labelchange_ = () => {
+        this.trigger({
+          track,
+          type: 'labelchange',
+          target: this
+        });
+      };
+      if (isEvented(track)) {
+        track.addEventListener('labelchange', track.labelchange_);
+      }
+    }
+
+    /**
+     * Remove a {@link Track} from the `TrackList`
+     *
+     * @param { import('./track').default } rtrack
+     *        The audio, video, or text track to remove from the list.
+     *
+     * @fires TrackList#removetrack
+     */
+    removeTrack(rtrack) {
+      let track;
+      for (let i = 0, l = this.length; i < l; i++) {
+        if (this[i] === rtrack) {
+          track = this[i];
+          if (track.off) {
+            track.off();
+          }
+          this.tracks_.splice(i, 1);
+          break;
+        }
+      }
+      if (!track) {
+        return;
+      }
+
+      /**
+       * Triggered when a track is removed from track list.
+       *
+       * @event TrackList#removetrack
+       * @type {Event}
+       * @property {Track} track
+       *           A reference to track that was removed.
+       */
+      this.trigger({
+        track,
+        type: 'removetrack',
+        target: this
+      });
+    }
+
+    /**
+     * Get a Track from the TrackList by a tracks id
+     *
+     * @param {string} id - the id of the track to get
+     * @method getTrackById
+     * @return { import('./track').default }
+     * @private
+     */
+    getTrackById(id) {
+      let result = null;
+      for (let i = 0, l = this.length; i < l; i++) {
+        const track = this[i];
+        if (track.id === id) {
+          result = track;
+          break;
+        }
+      }
+      return result;
+    }
+  }
+
+  /**
+   * Triggered when a different track is selected/enabled.
+   *
+   * @event TrackList#change
+   * @type {Event}
+   */
+
+  /**
+   * Events that can be called with on + eventName. See {@link EventHandler}.
+   *
+   * @property {Object} TrackList#allowedEvents_
+   * @protected
+   */
+  TrackList.prototype.allowedEvents_ = {
+    change: 'change',
+    addtrack: 'addtrack',
+    removetrack: 'removetrack',
+    labelchange: 'labelchange'
+  };
+
+  // emulate attribute EventHandler support to allow for feature detection
+  for (const event in TrackList.prototype.allowedEvents_) {
+    TrackList.prototype['on' + event] = null;
+  }
+
+  /**
+   * @file audio-track-list.js
+   */
+
+  /**
+   * Anywhere we call this function we diverge from the spec
+   * as we only support one enabled audiotrack at a time
+   *
+   * @param {AudioTrackList} list
+   *        list to work on
+   *
+   * @param { import('./audio-track').default } track
+   *        The track to skip
+   *
+   * @private
+   */
+  const disableOthers$1 = function (list, track) {
+    for (let i = 0; i < list.length; i++) {
+      if (!Object.keys(list[i]).length || track.id === list[i].id) {
+        continue;
+      }
+      // another audio track is enabled, disable it
+      list[i].enabled = false;
+    }
+  };
+
+  /**
+   * The current list of {@link AudioTrack} for a media file.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist}
+   * @extends TrackList
+   */
+  class AudioTrackList extends TrackList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./audio-track').default[] } [tracks=[]]
+     *        A list of `AudioTrack` to instantiate the list with.
+     */
+    constructor(tracks = []) {
+      // make sure only 1 track is enabled
+      // sorted from last index to first index
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        if (tracks[i].enabled) {
+          disableOthers$1(tracks, tracks[i]);
+          break;
+        }
+      }
+      super(tracks);
+      this.changing_ = false;
+    }
+
+    /**
+     * Add an {@link AudioTrack} to the `AudioTrackList`.
+     *
+     * @param { import('./audio-track').default } track
+     *        The AudioTrack to add to the list
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      if (track.enabled) {
+        disableOthers$1(this, track);
+      }
+      super.addTrack(track);
+      // native tracks don't have this
+      if (!track.addEventListener) {
+        return;
+      }
+      track.enabledChange_ = () => {
+        // when we are disabling other tracks (since we don't support
+        // more than one track at a time) we will set changing_
+        // to true so that we don't trigger additional change events
+        if (this.changing_) {
+          return;
+        }
+        this.changing_ = true;
+        disableOthers$1(this, track);
+        this.changing_ = false;
+        this.trigger('change');
+      };
+
+      /**
+       * @listens AudioTrack#enabledchange
+       * @fires TrackList#change
+       */
+      track.addEventListener('enabledchange', track.enabledChange_);
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+      if (rtrack.removeEventListener && rtrack.enabledChange_) {
+        rtrack.removeEventListener('enabledchange', rtrack.enabledChange_);
+        rtrack.enabledChange_ = null;
+      }
+    }
+  }
+
+  /**
+   * @file video-track-list.js
+   */
+
+  /**
+   * Un-select all other {@link VideoTrack}s that are selected.
+   *
+   * @param {VideoTrackList} list
+   *        list to work on
+   *
+   * @param { import('./video-track').default } track
+   *        The track to skip
+   *
+   * @private
+   */
+  const disableOthers = function (list, track) {
+    for (let i = 0; i < list.length; i++) {
+      if (!Object.keys(list[i]).length || track.id === list[i].id) {
+        continue;
+      }
+      // another video track is enabled, disable it
+      list[i].selected = false;
+    }
+  };
+
+  /**
+   * The current list of {@link VideoTrack} for a video.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist}
+   * @extends TrackList
+   */
+  class VideoTrackList extends TrackList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {VideoTrack[]} [tracks=[]]
+     *        A list of `VideoTrack` to instantiate the list with.
+     */
+    constructor(tracks = []) {
+      // make sure only 1 track is enabled
+      // sorted from last index to first index
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        if (tracks[i].selected) {
+          disableOthers(tracks, tracks[i]);
+          break;
+        }
+      }
+      super(tracks);
+      this.changing_ = false;
+
+      /**
+       * @member {number} VideoTrackList#selectedIndex
+       *         The current index of the selected {@link VideoTrack`}.
+       */
+      Object.defineProperty(this, 'selectedIndex', {
+        get() {
+          for (let i = 0; i < this.length; i++) {
+            if (this[i].selected) {
+              return i;
+            }
+          }
+          return -1;
+        },
+        set() {}
+      });
+    }
+
+    /**
+     * Add a {@link VideoTrack} to the `VideoTrackList`.
+     *
+     * @param { import('./video-track').default } track
+     *        The VideoTrack to add to the list
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      if (track.selected) {
+        disableOthers(this, track);
+      }
+      super.addTrack(track);
+      // native tracks don't have this
+      if (!track.addEventListener) {
+        return;
+      }
+      track.selectedChange_ = () => {
+        if (this.changing_) {
+          return;
+        }
+        this.changing_ = true;
+        disableOthers(this, track);
+        this.changing_ = false;
+        this.trigger('change');
+      };
+
+      /**
+       * @listens VideoTrack#selectedchange
+       * @fires TrackList#change
+       */
+      track.addEventListener('selectedchange', track.selectedChange_);
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+      if (rtrack.removeEventListener && rtrack.selectedChange_) {
+        rtrack.removeEventListener('selectedchange', rtrack.selectedChange_);
+        rtrack.selectedChange_ = null;
+      }
+    }
+  }
+
+  /**
+   * @file text-track-list.js
+   */
+
+  /**
+   * The current list of {@link TextTrack} for a media file.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttracklist}
+   * @extends TrackList
+   */
+  class TextTrackList extends TrackList {
+    /**
+     * Add a {@link TextTrack} to the `TextTrackList`
+     *
+     * @param { import('./text-track').default } track
+     *        The text track to add to the list.
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      super.addTrack(track);
+      if (!this.queueChange_) {
+        this.queueChange_ = () => this.queueTrigger('change');
+      }
+      if (!this.triggerSelectedlanguagechange) {
+        this.triggerSelectedlanguagechange_ = () => this.trigger('selectedlanguagechange');
+      }
+
+      /**
+       * @listens TextTrack#modechange
+       * @fires TrackList#change
+       */
+      track.addEventListener('modechange', this.queueChange_);
+      const nonLanguageTextTrackKind = ['metadata', 'chapters'];
+      if (nonLanguageTextTrackKind.indexOf(track.kind) === -1) {
+        track.addEventListener('modechange', this.triggerSelectedlanguagechange_);
+      }
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+
+      // manually remove the event handlers we added
+      if (rtrack.removeEventListener) {
+        if (this.queueChange_) {
+          rtrack.removeEventListener('modechange', this.queueChange_);
+        }
+        if (this.selectedlanguagechange_) {
+          rtrack.removeEventListener('modechange', this.triggerSelectedlanguagechange_);
+        }
+      }
+    }
+  }
+
+  /**
+   * @file html-track-element-list.js
+   */
+
+  /**
+   * The current list of {@link HtmlTrackElement}s.
+   */
+  class HtmlTrackElementList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {HtmlTrackElement[]} [tracks=[]]
+     *        A list of `HtmlTrackElement` to instantiate the list with.
+     */
+    constructor(trackElements = []) {
+      this.trackElements_ = [];
+
+      /**
+       * @memberof HtmlTrackElementList
+       * @member {number} length
+       *         The current number of `Track`s in the this Trackist.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.trackElements_.length;
+        }
+      });
+      for (let i = 0, length = trackElements.length; i < length; i++) {
+        this.addTrackElement_(trackElements[i]);
+      }
+    }
+
+    /**
+     * Add an {@link HtmlTrackElement} to the `HtmlTrackElementList`
+     *
+     * @param {HtmlTrackElement} trackElement
+     *        The track element to add to the list.
+     *
+     * @private
+     */
+    addTrackElement_(trackElement) {
+      const index = this.trackElements_.length;
+      if (!('' + index in this)) {
+        Object.defineProperty(this, index, {
+          get() {
+            return this.trackElements_[index];
+          }
+        });
+      }
+
+      // Do not add duplicate elements
+      if (this.trackElements_.indexOf(trackElement) === -1) {
+        this.trackElements_.push(trackElement);
+      }
+    }
+
+    /**
+     * Get an {@link HtmlTrackElement} from the `HtmlTrackElementList` given an
+     * {@link TextTrack}.
+     *
+     * @param {TextTrack} track
+     *        The track associated with a track element.
+     *
+     * @return {HtmlTrackElement|undefined}
+     *         The track element that was found or undefined.
+     *
+     * @private
+     */
+    getTrackElementByTrack_(track) {
+      let trackElement_;
+      for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+        if (track === this.trackElements_[i].track) {
+          trackElement_ = this.trackElements_[i];
+          break;
+        }
+      }
+      return trackElement_;
+    }
+
+    /**
+     * Remove a {@link HtmlTrackElement} from the `HtmlTrackElementList`
+     *
+     * @param {HtmlTrackElement} trackElement
+     *        The track element to remove from the list.
+     *
+     * @private
+     */
+    removeTrackElement_(trackElement) {
+      for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+        if (trackElement === this.trackElements_[i]) {
+          if (this.trackElements_[i].track && typeof this.trackElements_[i].track.off === 'function') {
+            this.trackElements_[i].track.off();
+          }
+          if (typeof this.trackElements_[i].off === 'function') {
+            this.trackElements_[i].off();
+          }
+          this.trackElements_.splice(i, 1);
+          break;
+        }
+      }
+    }
+  }
+
+  /**
+   * @file text-track-cue-list.js
+   */
+
+  /**
+   * @typedef {Object} TextTrackCueList~TextTrackCue
+   *
+   * @property {string} id
+   *           The unique id for this text track cue
+   *
+   * @property {number} startTime
+   *           The start time for this text track cue
+   *
+   * @property {number} endTime
+   *           The end time for this text track cue
+   *
+   * @property {boolean} pauseOnExit
+   *           Pause when the end time is reached if true.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue}
+   */
+
+  /**
+   * A List of TextTrackCues.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcuelist}
+   */
+  class TextTrackCueList {
+    /**
+     * Create an instance of this class..
+     *
+     * @param {Array} cues
+     *        A list of cues to be initialized with
+     */
+    constructor(cues) {
+      TextTrackCueList.prototype.setCues_.call(this, cues);
+
+      /**
+       * @memberof TextTrackCueList
+       * @member {number} length
+       *         The current number of `TextTrackCue`s in the TextTrackCueList.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.length_;
+        }
+      });
+    }
+
+    /**
+     * A setter for cues in this list. Creates getters
+     * an an index for the cues.
+     *
+     * @param {Array} cues
+     *        An array of cues to set
+     *
+     * @private
+     */
+    setCues_(cues) {
+      const oldLength = this.length || 0;
+      let i = 0;
+      const l = cues.length;
+      this.cues_ = cues;
+      this.length_ = cues.length;
+      const defineProp = function (index) {
+        if (!('' + index in this)) {
+          Object.defineProperty(this, '' + index, {
+            get() {
+              return this.cues_[index];
+            }
+          });
+        }
+      };
+      if (oldLength < l) {
+        i = oldLength;
+        for (; i < l; i++) {
+          defineProp.call(this, i);
+        }
+      }
+    }
+
+    /**
+     * Get a `TextTrackCue` that is currently in the `TextTrackCueList` by id.
+     *
+     * @param {string} id
+     *        The id of the cue that should be searched for.
+     *
+     * @return {TextTrackCueList~TextTrackCue|null}
+     *         A single cue or null if none was found.
+     */
+    getCueById(id) {
+      let result = null;
+      for (let i = 0, l = this.length; i < l; i++) {
+        const cue = this[i];
+        if (cue.id === id) {
+          result = cue;
+          break;
+        }
+      }
+      return result;
+    }
+  }
+
+  /**
+   * @file track-kinds.js
+   */
+
+  /**
+   * All possible `VideoTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-videotrack-kind
+   * @typedef VideoTrack~Kind
+   * @enum
+   */
+  const VideoTrackKind = {
+    alternative: 'alternative',
+    captions: 'captions',
+    main: 'main',
+    sign: 'sign',
+    subtitles: 'subtitles',
+    commentary: 'commentary'
+  };
+
+  /**
+   * All possible `AudioTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-kind
+   * @typedef AudioTrack~Kind
+   * @enum
+   */
+  const AudioTrackKind = {
+    'alternative': 'alternative',
+    'descriptions': 'descriptions',
+    'main': 'main',
+    'main-desc': 'main-desc',
+    'translation': 'translation',
+    'commentary': 'commentary'
+  };
+
+  /**
+   * All possible `TextTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-texttrack-kind
+   * @typedef TextTrack~Kind
+   * @enum
+   */
+  const TextTrackKind = {
+    subtitles: 'subtitles',
+    captions: 'captions',
+    descriptions: 'descriptions',
+    chapters: 'chapters',
+    metadata: 'metadata'
+  };
+
+  /**
+   * All possible `TextTrackMode`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackmode
+   * @typedef TextTrack~Mode
+   * @enum
+   */
+  const TextTrackMode = {
+    disabled: 'disabled',
+    hidden: 'hidden',
+    showing: 'showing'
+  };
+
+  /**
+   * @file track.js
+   */
+
+  /**
+   * A Track class that contains all of the common functionality for {@link AudioTrack},
+   * {@link VideoTrack}, and {@link TextTrack}.
+   *
+   * > Note: This class should not be used directly
+   *
+   * @see {@link https://html.spec.whatwg.org/multipage/embedded-content.html}
+   * @extends EventTarget
+   * @abstract
+   */
+  class Track extends EventTarget$2 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {string} [options.kind='']
+     *        A valid kind for the track type you are creating.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @abstract
+     */
+    constructor(options = {}) {
+      super();
+      const trackProps = {
+        id: options.id || 'vjs_track_' + newGUID(),
+        kind: options.kind || '',
+        language: options.language || ''
+      };
+      let label = options.label || '';
+
+      /**
+       * @memberof Track
+       * @member {string} id
+       *         The id of this track. Cannot be changed after creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      /**
+       * @memberof Track
+       * @member {string} kind
+       *         The kind of track that this is. Cannot be changed after creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      /**
+       * @memberof Track
+       * @member {string} language
+       *         The two letter language code for this track. Cannot be changed after
+       *         creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      for (const key in trackProps) {
+        Object.defineProperty(this, key, {
+          get() {
+            return trackProps[key];
+          },
+          set() {}
+        });
+      }
+
+      /**
+       * @memberof Track
+       * @member {string} label
+       *         The label of this track. Cannot be changed after creation.
+       * @instance
+       *
+       * @fires Track#labelchange
+       */
+      Object.defineProperty(this, 'label', {
+        get() {
+          return label;
+        },
+        set(newLabel) {
+          if (newLabel !== label) {
+            label = newLabel;
+
+            /**
+             * An event that fires when label changes on this track.
+             *
+             * > Note: This is not part of the spec!
+             *
+             * @event Track#labelchange
+             * @type {Event}
+             */
+            this.trigger('labelchange');
+          }
+        }
+      });
+    }
+  }
+
+  /**
+   * @file url.js
+   * @module url
+   */
+
+  /**
+   * @typedef {Object} url:URLObject
+   *
+   * @property {string} protocol
+   *           The protocol of the url that was parsed.
+   *
+   * @property {string} hostname
+   *           The hostname of the url that was parsed.
+   *
+   * @property {string} port
+   *           The port of the url that was parsed.
+   *
+   * @property {string} pathname
+   *           The pathname of the url that was parsed.
+   *
+   * @property {string} search
+   *           The search query of the url that was parsed.
+   *
+   * @property {string} hash
+   *           The hash of the url that was parsed.
+   *
+   * @property {string} host
+   *           The host of the url that was parsed.
+   */
+
+  /**
+   * Resolve and parse the elements of a URL.
+   *
+   * @function
+   * @param    {String} url
+   *           The url to parse
+   *
+   * @return   {url:URLObject}
+   *           An object of url details
+   */
+  const parseUrl = function (url) {
+    // This entire method can be replace with URL once we are able to drop IE11
+
+    const props = ['protocol', 'hostname', 'port', 'pathname', 'search', 'hash', 'host'];
+
+    // add the url to an anchor and let the browser parse the URL
+    const a = document.createElement('a');
+    a.href = url;
+
+    // Copy the specific URL properties to a new object
+    // This is also needed for IE because the anchor loses its
+    // properties when it's removed from the dom
+    const details = {};
+    for (let i = 0; i < props.length; i++) {
+      details[props[i]] = a[props[i]];
+    }
+
+    // IE adds the port to the host property unlike everyone else. If
+    // a port identifier is added for standard ports, strip it.
+    if (details.protocol === 'http:') {
+      details.host = details.host.replace(/:80$/, '');
+    }
+    if (details.protocol === 'https:') {
+      details.host = details.host.replace(/:443$/, '');
+    }
+    if (!details.protocol) {
+      details.protocol = window.location.protocol;
+    }
+
+    /* istanbul ignore if */
+    if (!details.host) {
+      details.host = window.location.host;
+    }
+    return details;
+  };
+
+  /**
+   * Get absolute version of relative URL.
+   *
+   * @function
+   * @param    {string} url
+   *           URL to make absolute
+   *
+   * @return   {string}
+   *           Absolute URL
+   *
+   * @see      http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
+   */
+  const getAbsoluteURL = function (url) {
+    // Check if absolute URL
+    if (!url.match(/^https?:\/\//)) {
+      // Add the url to an anchor and let the browser parse it to convert to an absolute url
+      const a = document.createElement('a');
+      a.href = url;
+      url = a.href;
+    }
+    return url;
+  };
+
+  /**
+   * Returns the extension of the passed file name. It will return an empty string
+   * if passed an invalid path.
+   *
+   * @function
+   * @param    {string} path
+   *           The fileName path like '/path/to/file.mp4'
+   *
+   * @return  {string}
+   *           The extension in lower case or an empty string if no
+   *           extension could be found.
+   */
+  const getFileExtension = function (path) {
+    if (typeof path === 'string') {
+      const splitPathRe = /^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/;
+      const pathParts = splitPathRe.exec(path);
+      if (pathParts) {
+        return pathParts.pop().toLowerCase();
+      }
+    }
+    return '';
+  };
+
+  /**
+   * Returns whether the url passed is a cross domain request or not.
+   *
+   * @function
+   * @param    {string} url
+   *           The url to check.
+   *
+   * @param    {Object} [winLoc]
+   *           the domain to check the url against, defaults to window.location
+   *
+   * @param    {string} [winLoc.protocol]
+   *           The window location protocol defaults to window.location.protocol
+   *
+   * @param    {string} [winLoc.host]
+   *           The window location host defaults to window.location.host
+   *
+   * @return   {boolean}
+   *           Whether it is a cross domain request or not.
+   */
+  const isCrossOrigin = function (url, winLoc = window.location) {
+    const urlInfo = parseUrl(url);
+
+    // IE8 protocol relative urls will return ':' for protocol
+    const srcProtocol = urlInfo.protocol === ':' ? winLoc.protocol : urlInfo.protocol;
+
+    // Check if url is for another domain/origin
+    // IE8 doesn't know location.origin, so we won't rely on it here
+    const crossOrigin = srcProtocol + urlInfo.host !== winLoc.protocol + winLoc.host;
+    return crossOrigin;
+  };
+
+  var Url = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    parseUrl: parseUrl,
+    getAbsoluteURL: getAbsoluteURL,
+    getFileExtension: getFileExtension,
+    isCrossOrigin: isCrossOrigin
+  });
+
+  var win;
+  if (typeof window !== "undefined") {
+    win = window;
+  } else if (typeof commonjsGlobal !== "undefined") {
+    win = commonjsGlobal;
+  } else if (typeof self !== "undefined") {
+    win = self;
+  } else {
+    win = {};
+  }
+  var window_1 = win;
+
+  var _extends_1 = createCommonjsModule(function (module) {
+    function _extends() {
+      module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i];
+          for (var key in source) {
+            if (Object.prototype.hasOwnProperty.call(source, key)) {
+              target[key] = source[key];
+            }
+          }
+        }
+        return target;
+      }, module.exports.__esModule = true, module.exports["default"] = module.exports;
+      return _extends.apply(this, arguments);
+    }
+    module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+  var _extends$1 = unwrapExports(_extends_1);
+
+  var isFunction_1 = isFunction;
+  var toString = Object.prototype.toString;
+  function isFunction(fn) {
+    if (!fn) {
+      return false;
+    }
+    var string = toString.call(fn);
+    return string === '[object Function]' || typeof fn === 'function' && string !== '[object RegExp]' || typeof window !== 'undefined' && (
+    // IE8 and below
+    fn === window.setTimeout || fn === window.alert || fn === window.confirm || fn === window.prompt);
+  }
+
+  var httpResponseHandler = function httpResponseHandler(callback, decodeResponseBody) {
+    if (decodeResponseBody === void 0) {
+      decodeResponseBody = false;
+    }
+    return function (err, response, responseBody) {
+      // if the XHR failed, return that error
+      if (err) {
+        callback(err);
+        return;
+      } // if the HTTP status code is 4xx or 5xx, the request also failed
+
+      if (response.statusCode >= 400 && response.statusCode <= 599) {
+        var cause = responseBody;
+        if (decodeResponseBody) {
+          if (window_1.TextDecoder) {
+            var charset = getCharset(response.headers && response.headers['content-type']);
+            try {
+              cause = new TextDecoder(charset).decode(responseBody);
+            } catch (e) {}
+          } else {
+            cause = String.fromCharCode.apply(null, new Uint8Array(responseBody));
+          }
+        }
+        callback({
+          cause: cause
+        });
+        return;
+      } // otherwise, request succeeded
+
+      callback(null, responseBody);
+    };
+  };
+  function getCharset(contentTypeHeader) {
+    if (contentTypeHeader === void 0) {
+      contentTypeHeader = '';
+    }
+    return contentTypeHeader.toLowerCase().split(';').reduce(function (charset, contentType) {
+      var _contentType$split = contentType.split('='),
+        type = _contentType$split[0],
+        value = _contentType$split[1];
+      if (type.trim() === 'charset') {
+        return value.trim();
+      }
+      return charset;
+    }, 'utf-8');
+  }
+  var httpHandler = httpResponseHandler;
+
+  createXHR.httpHandler = httpHandler;
+  /**
+   * @license
+   * slighly modified parse-headers 2.0.2 <https://github.com/kesla/parse-headers/>
+   * Copyright (c) 2014 David Björklund
+   * Available under the MIT license
+   * <https://github.com/kesla/parse-headers/blob/master/LICENCE>
+   */
+
+  var parseHeaders = function parseHeaders(headers) {
+    var result = {};
+    if (!headers) {
+      return result;
+    }
+    headers.trim().split('\n').forEach(function (row) {
+      var index = row.indexOf(':');
+      var key = row.slice(0, index).trim().toLowerCase();
+      var value = row.slice(index + 1).trim();
+      if (typeof result[key] === 'undefined') {
+        result[key] = value;
+      } else if (Array.isArray(result[key])) {
+        result[key].push(value);
+      } else {
+        result[key] = [result[key], value];
+      }
+    });
+    return result;
+  };
+  var lib = createXHR; // Allow use of default import syntax in TypeScript
+
+  var default_1 = createXHR;
+  createXHR.XMLHttpRequest = window_1.XMLHttpRequest || noop$1;
+  createXHR.XDomainRequest = "withCredentials" in new createXHR.XMLHttpRequest() ? createXHR.XMLHttpRequest : window_1.XDomainRequest;
+  forEachArray(["get", "put", "post", "patch", "head", "delete"], function (method) {
+    createXHR[method === "delete" ? "del" : method] = function (uri, options, callback) {
+      options = initParams(uri, options, callback);
+      options.method = method.toUpperCase();
+      return _createXHR(options);
+    };
+  });
+  function forEachArray(array, iterator) {
+    for (var i = 0; i < array.length; i++) {
+      iterator(array[i]);
+    }
+  }
+  function isEmpty(obj) {
+    for (var i in obj) {
+      if (obj.hasOwnProperty(i)) return false;
+    }
+    return true;
+  }
+  function initParams(uri, options, callback) {
+    var params = uri;
+    if (isFunction_1(options)) {
+      callback = options;
+      if (typeof uri === "string") {
+        params = {
+          uri: uri
+        };
+      }
+    } else {
+      params = _extends_1({}, options, {
+        uri: uri
+      });
+    }
+    params.callback = callback;
+    return params;
+  }
+  function createXHR(uri, options, callback) {
+    options = initParams(uri, options, callback);
+    return _createXHR(options);
+  }
+  function _createXHR(options) {
+    if (typeof options.callback === "undefined") {
+      throw new Error("callback argument missing");
+    }
+    var called = false;
+    var callback = function cbOnce(err, response, body) {
+      if (!called) {
+        called = true;
+        options.callback(err, response, body);
+      }
+    };
+    function readystatechange() {
+      if (xhr.readyState === 4) {
+        setTimeout(loadFunc, 0);
+      }
+    }
+    function getBody() {
+      // Chrome with requestType=blob throws errors arround when even testing access to responseText
+      var body = undefined;
+      if (xhr.response) {
+        body = xhr.response;
+      } else {
+        body = xhr.responseText || getXml(xhr);
+      }
+      if (isJson) {
+        try {
+          body = JSON.parse(body);
+        } catch (e) {}
+      }
+      return body;
+    }
+    function errorFunc(evt) {
+      clearTimeout(timeoutTimer);
+      if (!(evt instanceof Error)) {
+        evt = new Error("" + (evt || "Unknown XMLHttpRequest Error"));
+      }
+      evt.statusCode = 0;
+      return callback(evt, failureResponse);
+    } // will load the data & process the response in a special response object
+
+    function loadFunc() {
+      if (aborted) return;
+      var status;
+      clearTimeout(timeoutTimer);
+      if (options.useXDR && xhr.status === undefined) {
+        //IE8 CORS GET successful response doesn't have a status field, but body is fine
+        status = 200;
+      } else {
+        status = xhr.status === 1223 ? 204 : xhr.status;
+      }
+      var response = failureResponse;
+      var err = null;
+      if (status !== 0) {
+        response = {
+          body: getBody(),
+          statusCode: status,
+          method: method,
+          headers: {},
+          url: uri,
+          rawRequest: xhr
+        };
+        if (xhr.getAllResponseHeaders) {
+          //remember xhr can in fact be XDR for CORS in IE
+          response.headers = parseHeaders(xhr.getAllResponseHeaders());
+        }
+      } else {
+        err = new Error("Internal XMLHttpRequest Error");
+      }
+      return callback(err, response, response.body);
+    }
+    var xhr = options.xhr || null;
+    if (!xhr) {
+      if (options.cors || options.useXDR) {
+        xhr = new createXHR.XDomainRequest();
+      } else {
+        xhr = new createXHR.XMLHttpRequest();
+      }
+    }
+    var key;
+    var aborted;
+    var uri = xhr.url = options.uri || options.url;
+    var method = xhr.method = options.method || "GET";
+    var body = options.body || options.data;
+    var headers = xhr.headers = options.headers || {};
+    var sync = !!options.sync;
+    var isJson = false;
+    var timeoutTimer;
+    var failureResponse = {
+      body: undefined,
+      headers: {},
+      statusCode: 0,
+      method: method,
+      url: uri,
+      rawRequest: xhr
+    };
+    if ("json" in options && options.json !== false) {
+      isJson = true;
+      headers["accept"] || headers["Accept"] || (headers["Accept"] = "application/json"); //Don't override existing accept header declared by user
+
+      if (method !== "GET" && method !== "HEAD") {
+        headers["content-type"] || headers["Content-Type"] || (headers["Content-Type"] = "application/json"); //Don't override existing accept header declared by user
+
+        body = JSON.stringify(options.json === true ? body : options.json);
+      }
+    }
+    xhr.onreadystatechange = readystatechange;
+    xhr.onload = loadFunc;
+    xhr.onerror = errorFunc; // IE9 must have onprogress be set to a unique function.
+
+    xhr.onprogress = function () {// IE must die
+    };
+    xhr.onabort = function () {
+      aborted = true;
+    };
+    xhr.ontimeout = errorFunc;
+    xhr.open(method, uri, !sync, options.username, options.password); //has to be after open
+
+    if (!sync) {
+      xhr.withCredentials = !!options.withCredentials;
+    } // Cannot set timeout with sync request
+    // not setting timeout on the xhr object, because of old webkits etc. not handling that correctly
+    // both npm's request and jquery 1.x use this kind of timeout, so this is being consistent
+
+    if (!sync && options.timeout > 0) {
+      timeoutTimer = setTimeout(function () {
+        if (aborted) return;
+        aborted = true; //IE9 may still call readystatechange
+
+        xhr.abort("timeout");
+        var e = new Error("XMLHttpRequest timeout");
+        e.code = "ETIMEDOUT";
+        errorFunc(e);
+      }, options.timeout);
+    }
+    if (xhr.setRequestHeader) {
+      for (key in headers) {
+        if (headers.hasOwnProperty(key)) {
+          xhr.setRequestHeader(key, headers[key]);
+        }
+      }
+    } else if (options.headers && !isEmpty(options.headers)) {
+      throw new Error("Headers cannot be set on an XDomainRequest object");
+    }
+    if ("responseType" in options) {
+      xhr.responseType = options.responseType;
+    }
+    if ("beforeSend" in options && typeof options.beforeSend === "function") {
+      options.beforeSend(xhr);
+    } // Microsoft Edge browser sends "undefined" when send is called with undefined value.
+    // XMLHttpRequest spec says to pass null as body to indicate no body
+    // See https://github.com/naugtur/xhr/issues/100.
+
+    xhr.send(body || null);
+    return xhr;
+  }
+  function getXml(xhr) {
+    // xhr.responseXML will throw Exception "InvalidStateError" or "DOMException"
+    // See https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseXML.
+    try {
+      if (xhr.responseType === "document") {
+        return xhr.responseXML;
+      }
+      var firefoxBugTakenEffect = xhr.responseXML && xhr.responseXML.documentElement.nodeName === "parsererror";
+      if (xhr.responseType === "" && !firefoxBugTakenEffect) {
+        return xhr.responseXML;
+      }
+    } catch (e) {}
+    return null;
+  }
+  function noop$1() {}
+  lib.default = default_1;
+
+  /**
+   * @file text-track.js
+   */
+
+  /**
+   * Takes a webvtt file contents and parses it into cues
+   *
+   * @param {string} srcContent
+   *        webVTT file contents
+   *
+   * @param {TextTrack} track
+   *        TextTrack to add cues to. Cues come from the srcContent.
+   *
+   * @private
+   */
+  const parseCues = function (srcContent, track) {
+    const parser = new window.WebVTT.Parser(window, window.vttjs, window.WebVTT.StringDecoder());
+    const errors = [];
+    parser.oncue = function (cue) {
+      track.addCue(cue);
+    };
+    parser.onparsingerror = function (error) {
+      errors.push(error);
+    };
+    parser.onflush = function () {
+      track.trigger({
+        type: 'loadeddata',
+        target: track
+      });
+    };
+    parser.parse(srcContent);
+    if (errors.length > 0) {
+      if (window.console && window.console.groupCollapsed) {
+        window.console.groupCollapsed(`Text Track parsing errors for ${track.src}`);
+      }
+      errors.forEach(error => log$1.error(error));
+      if (window.console && window.console.groupEnd) {
+        window.console.groupEnd();
+      }
+    }
+    parser.flush();
+  };
+
+  /**
+   * Load a `TextTrack` from a specified url.
+   *
+   * @param {string} src
+   *        Url to load track from.
+   *
+   * @param {TextTrack} track
+   *        Track to add cues to. Comes from the content at the end of `url`.
+   *
+   * @private
+   */
+  const loadTrack = function (src, track) {
+    const opts = {
+      uri: src
+    };
+    const crossOrigin = isCrossOrigin(src);
+    if (crossOrigin) {
+      opts.cors = crossOrigin;
+    }
+    const withCredentials = track.tech_.crossOrigin() === 'use-credentials';
+    if (withCredentials) {
+      opts.withCredentials = withCredentials;
+    }
+    lib(opts, bind_(this, function (err, response, responseBody) {
+      if (err) {
+        return log$1.error(err, response);
+      }
+      track.loaded_ = true;
+
+      // Make sure that vttjs has loaded, otherwise, wait till it finished loading
+      // NOTE: this is only used for the alt/video.novtt.js build
+      if (typeof window.WebVTT !== 'function') {
+        if (track.tech_) {
+          // to prevent use before define eslint error, we define loadHandler
+          // as a let here
+          track.tech_.any(['vttjsloaded', 'vttjserror'], event => {
+            if (event.type === 'vttjserror') {
+              log$1.error(`vttjs failed to load, stopping trying to process ${track.src}`);
+              return;
+            }
+            return parseCues(responseBody, track);
+          });
+        }
+      } else {
+        parseCues(responseBody, track);
+      }
+    }));
+  };
+
+  /**
+   * A representation of a single `TextTrack`.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrack}
+   * @extends Track
+   */
+  class TextTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} options={}
+     *        Object of option names and values
+     *
+     * @param { import('../tech/tech').default } options.tech
+     *        A reference to the tech that owns this TextTrack.
+     *
+     * @param {TextTrack~Kind} [options.kind='subtitles']
+     *        A valid text track kind.
+     *
+     * @param {TextTrack~Mode} [options.mode='disabled']
+     *        A valid text track mode.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this TextTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {string} [options.srclang='']
+     *        A valid two character language code. An alternative, but deprioritized
+     *        version of `options.language`
+     *
+     * @param {string} [options.src]
+     *        A url to TextTrack cues.
+     *
+     * @param {boolean} [options.default]
+     *        If this track should default to on or off.
+     */
+    constructor(options = {}) {
+      if (!options.tech) {
+        throw new Error('A tech was not provided.');
+      }
+      const settings = merge$2(options, {
+        kind: TextTrackKind[options.kind] || 'subtitles',
+        language: options.language || options.srclang || ''
+      });
+      let mode = TextTrackMode[settings.mode] || 'disabled';
+      const default_ = settings.default;
+      if (settings.kind === 'metadata' || settings.kind === 'chapters') {
+        mode = 'hidden';
+      }
+      super(settings);
+      this.tech_ = settings.tech;
+      this.cues_ = [];
+      this.activeCues_ = [];
+      this.preload_ = this.tech_.preloadTextTracks !== false;
+      const cues = new TextTrackCueList(this.cues_);
+      const activeCues = new TextTrackCueList(this.activeCues_);
+      let changed = false;
+      this.timeupdateHandler = bind_(this, function (event = {}) {
+        if (this.tech_.isDisposed()) {
+          return;
+        }
+        if (!this.tech_.isReady_) {
+          if (event.type !== 'timeupdate') {
+            this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+          }
+          return;
+        }
+
+        // Accessing this.activeCues for the side-effects of updating itself
+        // due to its nature as a getter function. Do not remove or cues will
+        // stop updating!
+        // Use the setter to prevent deletion from uglify (pure_getters rule)
+        this.activeCues = this.activeCues;
+        if (changed) {
+          this.trigger('cuechange');
+          changed = false;
+        }
+        if (event.type !== 'timeupdate') {
+          this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+        }
+      });
+      const disposeHandler = () => {
+        this.stopTracking();
+      };
+      this.tech_.one('dispose', disposeHandler);
+      if (mode !== 'disabled') {
+        this.startTracking();
+      }
+      Object.defineProperties(this, {
+        /**
+         * @memberof TextTrack
+         * @member {boolean} default
+         *         If this track was set to be on or off by default. Cannot be changed after
+         *         creation.
+         * @instance
+         *
+         * @readonly
+         */
+        default: {
+          get() {
+            return default_;
+          },
+          set() {}
+        },
+        /**
+         * @memberof TextTrack
+         * @member {string} mode
+         *         Set the mode of this TextTrack to a valid {@link TextTrack~Mode}. Will
+         *         not be set if setting to an invalid mode.
+         * @instance
+         *
+         * @fires TextTrack#modechange
+         */
+        mode: {
+          get() {
+            return mode;
+          },
+          set(newMode) {
+            if (!TextTrackMode[newMode]) {
+              return;
+            }
+            if (mode === newMode) {
+              return;
+            }
+            mode = newMode;
+            if (!this.preload_ && mode !== 'disabled' && this.cues.length === 0) {
+              // On-demand load.
+              loadTrack(this.src, this);
+            }
+            this.stopTracking();
+            if (mode !== 'disabled') {
+              this.startTracking();
+            }
+            /**
+             * An event that fires when mode changes on this track. This allows
+             * the TextTrackList that holds this track to act accordingly.
+             *
+             * > Note: This is not part of the spec!
+             *
+             * @event TextTrack#modechange
+             * @type {Event}
+             */
+            this.trigger('modechange');
+          }
+        },
+        /**
+         * @memberof TextTrack
+         * @member {TextTrackCueList} cues
+         *         The text track cue list for this TextTrack.
+         * @instance
+         */
+        cues: {
+          get() {
+            if (!this.loaded_) {
+              return null;
+            }
+            return cues;
+          },
+          set() {}
+        },
+        /**
+         * @memberof TextTrack
+         * @member {TextTrackCueList} activeCues
+         *         The list text track cues that are currently active for this TextTrack.
+         * @instance
+         */
+        activeCues: {
+          get() {
+            if (!this.loaded_) {
+              return null;
+            }
+
+            // nothing to do
+            if (this.cues.length === 0) {
+              return activeCues;
+            }
+            const ct = this.tech_.currentTime();
+            const active = [];
+            for (let i = 0, l = this.cues.length; i < l; i++) {
+              const cue = this.cues[i];
+              if (cue.startTime <= ct && cue.endTime >= ct) {
+                active.push(cue);
+              }
+            }
+            changed = false;
+            if (active.length !== this.activeCues_.length) {
+              changed = true;
+            } else {
+              for (let i = 0; i < active.length; i++) {
+                if (this.activeCues_.indexOf(active[i]) === -1) {
+                  changed = true;
+                }
+              }
+            }
+            this.activeCues_ = active;
+            activeCues.setCues_(this.activeCues_);
+            return activeCues;
+          },
+          // /!\ Keep this setter empty (see the timeupdate handler above)
+          set() {}
+        }
+      });
+      if (settings.src) {
+        this.src = settings.src;
+        if (!this.preload_) {
+          // Tracks will load on-demand.
+          // Act like we're loaded for other purposes.
+          this.loaded_ = true;
+        }
+        if (this.preload_ || settings.kind !== 'subtitles' && settings.kind !== 'captions') {
+          loadTrack(this.src, this);
+        }
+      } else {
+        this.loaded_ = true;
+      }
+    }
+    startTracking() {
+      // More precise cues based on requestVideoFrameCallback with a requestAnimationFram fallback
+      this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+      // Also listen to timeupdate in case rVFC/rAF stops (window in background, audio in video el)
+      this.tech_.on('timeupdate', this.timeupdateHandler);
+    }
+    stopTracking() {
+      if (this.rvf_) {
+        this.tech_.cancelVideoFrameCallback(this.rvf_);
+        this.rvf_ = undefined;
+      }
+      this.tech_.off('timeupdate', this.timeupdateHandler);
+    }
+
+    /**
+     * Add a cue to the internal list of cues.
+     *
+     * @param {TextTrack~Cue} cue
+     *        The cue to add to our internal list
+     */
+    addCue(originalCue) {
+      let cue = originalCue;
+
+      // Testing if the cue is a VTTCue in a way that survives minification
+      if (!('getCueAsHTML' in cue)) {
+        cue = new window.vttjs.VTTCue(originalCue.startTime, originalCue.endTime, originalCue.text);
+        for (const prop in originalCue) {
+          if (!(prop in cue)) {
+            cue[prop] = originalCue[prop];
+          }
+        }
+
+        // make sure that `id` is copied over
+        cue.id = originalCue.id;
+        cue.originalCue_ = originalCue;
+      }
+      const tracks = this.tech_.textTracks();
+      for (let i = 0; i < tracks.length; i++) {
+        if (tracks[i] !== this) {
+          tracks[i].removeCue(cue);
+        }
+      }
+      this.cues_.push(cue);
+      this.cues.setCues_(this.cues_);
+    }
+
+    /**
+     * Remove a cue from our internal list
+     *
+     * @param {TextTrack~Cue} removeCue
+     *        The cue to remove from our internal list
+     */
+    removeCue(removeCue) {
+      let i = this.cues_.length;
+      while (i--) {
+        const cue = this.cues_[i];
+        if (cue === removeCue || cue.originalCue_ && cue.originalCue_ === removeCue) {
+          this.cues_.splice(i, 1);
+          this.cues.setCues_(this.cues_);
+          break;
+        }
+      }
+    }
+  }
+
+  /**
+   * cuechange - One or more cues in the track have become active or stopped being active.
+   * @protected
+   */
+  TextTrack.prototype.allowedEvents_ = {
+    cuechange: 'cuechange'
+  };
+
+  /**
+   * A representation of a single `AudioTrack`. If it is part of an {@link AudioTrackList}
+   * only one `AudioTrack` in the list will be enabled at a time.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotrack}
+   * @extends Track
+   */
+  class AudioTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {AudioTrack~Kind} [options.kind='']
+     *        A valid audio track kind
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {boolean} [options.enabled]
+     *        If this track is the one that is currently playing. If this track is part of
+     *        an {@link AudioTrackList}, only one {@link AudioTrack} will be enabled.
+     */
+    constructor(options = {}) {
+      const settings = merge$2(options, {
+        kind: AudioTrackKind[options.kind] || ''
+      });
+      super(settings);
+      let enabled = false;
+
+      /**
+       * @memberof AudioTrack
+       * @member {boolean} enabled
+       *         If this `AudioTrack` is enabled or not. When setting this will
+       *         fire {@link AudioTrack#enabledchange} if the state of enabled is changed.
+       * @instance
+       *
+       * @fires VideoTrack#selectedchange
+       */
+      Object.defineProperty(this, 'enabled', {
+        get() {
+          return enabled;
+        },
+        set(newEnabled) {
+          // an invalid or unchanged value
+          if (typeof newEnabled !== 'boolean' || newEnabled === enabled) {
+            return;
+          }
+          enabled = newEnabled;
+
+          /**
+           * An event that fires when enabled changes on this track. This allows
+           * the AudioTrackList that holds this track to act accordingly.
+           *
+           * > Note: This is not part of the spec! Native tracks will do
+           *         this internally without an event.
+           *
+           * @event AudioTrack#enabledchange
+           * @type {Event}
+           */
+          this.trigger('enabledchange');
+        }
+      });
+
+      // if the user sets this track to selected then
+      // set selected to that true value otherwise
+      // we keep it false
+      if (settings.enabled) {
+        this.enabled = settings.enabled;
+      }
+      this.loaded_ = true;
+    }
+  }
+
+  /**
+   * A representation of a single `VideoTrack`.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotrack}
+   * @extends Track
+   */
+  class VideoTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {string} [options.kind='']
+     *        A valid {@link VideoTrack~Kind}
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {boolean} [options.selected]
+     *        If this track is the one that is currently playing.
+     */
+    constructor(options = {}) {
+      const settings = merge$2(options, {
+        kind: VideoTrackKind[options.kind] || ''
+      });
+      super(settings);
+      let selected = false;
+
+      /**
+       * @memberof VideoTrack
+       * @member {boolean} selected
+       *         If this `VideoTrack` is selected or not. When setting this will
+       *         fire {@link VideoTrack#selectedchange} if the state of selected changed.
+       * @instance
+       *
+       * @fires VideoTrack#selectedchange
+       */
+      Object.defineProperty(this, 'selected', {
+        get() {
+          return selected;
+        },
+        set(newSelected) {
+          // an invalid or unchanged value
+          if (typeof newSelected !== 'boolean' || newSelected === selected) {
+            return;
+          }
+          selected = newSelected;
+
+          /**
+           * An event that fires when selected changes on this track. This allows
+           * the VideoTrackList that holds this track to act accordingly.
+           *
+           * > Note: This is not part of the spec! Native tracks will do
+           *         this internally without an event.
+           *
+           * @event VideoTrack#selectedchange
+           * @type {Event}
+           */
+          this.trigger('selectedchange');
+        }
+      });
+
+      // if the user sets this track to selected then
+      // set selected to that true value otherwise
+      // we keep it false
+      if (settings.selected) {
+        this.selected = settings.selected;
+      }
+    }
+  }
+
+  /**
+   * @file html-track-element.js
+   */
+
+  /**
+   * A single track represented in the DOM.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#htmltrackelement}
+   * @extends EventTarget
+   */
+  class HTMLTrackElement extends EventTarget$2 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} options={}
+     *        Object of option names and values
+     *
+     * @param { import('../tech/tech').default } options.tech
+     *        A reference to the tech that owns this HTMLTrackElement.
+     *
+     * @param {TextTrack~Kind} [options.kind='subtitles']
+     *        A valid text track kind.
+     *
+     * @param {TextTrack~Mode} [options.mode='disabled']
+     *        A valid text track mode.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this TextTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {string} [options.srclang='']
+     *        A valid two character language code. An alternative, but deprioritized
+     *        version of `options.language`
+     *
+     * @param {string} [options.src]
+     *        A url to TextTrack cues.
+     *
+     * @param {boolean} [options.default]
+     *        If this track should default to on or off.
+     */
+    constructor(options = {}) {
+      super();
+      let readyState;
+      const track = new TextTrack(options);
+      this.kind = track.kind;
+      this.src = track.src;
+      this.srclang = track.language;
+      this.label = track.label;
+      this.default = track.default;
+      Object.defineProperties(this, {
+        /**
+         * @memberof HTMLTrackElement
+         * @member {HTMLTrackElement~ReadyState} readyState
+         *         The current ready state of the track element.
+         * @instance
+         */
+        readyState: {
+          get() {
+            return readyState;
+          }
+        },
+        /**
+         * @memberof HTMLTrackElement
+         * @member {TextTrack} track
+         *         The underlying TextTrack object.
+         * @instance
+         *
+         */
+        track: {
+          get() {
+            return track;
+          }
+        }
+      });
+      readyState = HTMLTrackElement.NONE;
+
+      /**
+       * @listens TextTrack#loadeddata
+       * @fires HTMLTrackElement#load
+       */
+      track.addEventListener('loadeddata', () => {
+        readyState = HTMLTrackElement.LOADED;
+        this.trigger({
+          type: 'load',
+          target: this
+        });
+      });
+    }
+  }
+
+  /**
+   * @protected
+   */
+  HTMLTrackElement.prototype.allowedEvents_ = {
+    load: 'load'
+  };
+
+  /**
+   * The text track not loaded state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.NONE = 0;
+
+  /**
+   * The text track loading state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.LOADING = 1;
+
+  /**
+   * The text track loaded state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.LOADED = 2;
+
+  /**
+   * The text track failed to load state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.ERROR = 3;
+
+  /*
+   * This file contains all track properties that are used in
+   * player.js, tech.js, html5.js and possibly other techs in the future.
+   */
+
+  const NORMAL = {
+    audio: {
+      ListClass: AudioTrackList,
+      TrackClass: AudioTrack,
+      capitalName: 'Audio'
+    },
+    video: {
+      ListClass: VideoTrackList,
+      TrackClass: VideoTrack,
+      capitalName: 'Video'
+    },
+    text: {
+      ListClass: TextTrackList,
+      TrackClass: TextTrack,
+      capitalName: 'Text'
+    }
+  };
+  Object.keys(NORMAL).forEach(function (type) {
+    NORMAL[type].getterName = `${type}Tracks`;
+    NORMAL[type].privateName = `${type}Tracks_`;
+  });
+  const REMOTE = {
+    remoteText: {
+      ListClass: TextTrackList,
+      TrackClass: TextTrack,
+      capitalName: 'RemoteText',
+      getterName: 'remoteTextTracks',
+      privateName: 'remoteTextTracks_'
+    },
+    remoteTextEl: {
+      ListClass: HtmlTrackElementList,
+      TrackClass: HTMLTrackElement,
+      capitalName: 'RemoteTextTrackEls',
+      getterName: 'remoteTextTrackEls',
+      privateName: 'remoteTextTrackEls_'
+    }
+  };
+  const ALL = Object.assign({}, NORMAL, REMOTE);
+  REMOTE.names = Object.keys(REMOTE);
+  NORMAL.names = Object.keys(NORMAL);
+  ALL.names = [].concat(REMOTE.names).concat(NORMAL.names);
+
+  var vtt = {};
+
+  /**
+   * @file tech.js
+   */
+
+  /**
+   * An Object containing a structure like: `{src: 'url', type: 'mimetype'}` or string
+   * that just contains the src url alone.
+   * * `var SourceObject = {src: 'http://ex.com/video.mp4', type: 'video/mp4'};`
+     * `var SourceString = 'http://example.com/some-video.mp4';`
+   *
+   * @typedef {Object|string} SourceObject
+   *
+   * @property {string} src
+   *           The url to the source
+   *
+   * @property {string} type
+   *           The mime type of the source
+   */
+
+  /**
+   * A function used by {@link Tech} to create a new {@link TextTrack}.
+   *
+   * @private
+   *
+   * @param {Tech} self
+   *        An instance of the Tech class.
+   *
+   * @param {string} kind
+   *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+   *
+   * @param {string} [label]
+   *        Label to identify the text track
+   *
+   * @param {string} [language]
+   *        Two letter language abbreviation
+   *
+   * @param {Object} [options={}]
+   *        An object with additional text track options
+   *
+   * @return {TextTrack}
+   *          The text track that was created.
+   */
+  function createTrackHelper(self, kind, label, language, options = {}) {
+    const tracks = self.textTracks();
+    options.kind = kind;
+    if (label) {
+      options.label = label;
+    }
+    if (language) {
+      options.language = language;
+    }
+    options.tech = self;
+    const track = new ALL.text.TrackClass(options);
+    tracks.addTrack(track);
+    return track;
+  }
+
+  /**
+   * This is the base class for media playback technology controllers, such as
+   * {@link HTML5}
+   *
+   * @extends Component
+   */
+  class Tech extends Component$1 {
+    /**
+    * Create an instance of this Tech.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    *
+    * @param {Function} [ready]
+    *        Callback function to call when the `HTML5` Tech is ready.
+    */
+    constructor(options = {}, ready = function () {}) {
+      // we don't want the tech to report user activity automatically.
+      // This is done manually in addControlsListeners
+      options.reportTouchActivity = false;
+      super(null, options, ready);
+      this.onDurationChange_ = e => this.onDurationChange(e);
+      this.trackProgress_ = e => this.trackProgress(e);
+      this.trackCurrentTime_ = e => this.trackCurrentTime(e);
+      this.stopTrackingCurrentTime_ = e => this.stopTrackingCurrentTime(e);
+      this.disposeSourceHandler_ = e => this.disposeSourceHandler(e);
+      this.queuedHanders_ = new Set();
+
+      // keep track of whether the current source has played at all to
+      // implement a very limited played()
+      this.hasStarted_ = false;
+      this.on('playing', function () {
+        this.hasStarted_ = true;
+      });
+      this.on('loadstart', function () {
+        this.hasStarted_ = false;
+      });
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        if (options && options[props.getterName]) {
+          this[props.privateName] = options[props.getterName];
+        }
+      });
+
+      // Manually track progress in cases where the browser/tech doesn't report it.
+      if (!this.featuresProgressEvents) {
+        this.manualProgressOn();
+      }
+
+      // Manually track timeupdates in cases where the browser/tech doesn't report it.
+      if (!this.featuresTimeupdateEvents) {
+        this.manualTimeUpdatesOn();
+      }
+      ['Text', 'Audio', 'Video'].forEach(track => {
+        if (options[`native${track}Tracks`] === false) {
+          this[`featuresNative${track}Tracks`] = false;
+        }
+      });
+      if (options.nativeCaptions === false || options.nativeTextTracks === false) {
+        this.featuresNativeTextTracks = false;
+      } else if (options.nativeCaptions === true || options.nativeTextTracks === true) {
+        this.featuresNativeTextTracks = true;
+      }
+      if (!this.featuresNativeTextTracks) {
+        this.emulateTextTracks();
+      }
+      this.preloadTextTracks = options.preloadTextTracks !== false;
+      this.autoRemoteTextTracks_ = new ALL.text.ListClass();
+      this.initTrackListeners();
+
+      // Turn on component tap events only if not using native controls
+      if (!options.nativeControlsForTouch) {
+        this.emitTapEvents();
+      }
+      if (this.constructor) {
+        this.name_ = this.constructor.name || 'Unknown Tech';
+      }
+    }
+
+    /**
+     * A special function to trigger source set in a way that will allow player
+     * to re-trigger if the player or tech are not ready yet.
+     *
+     * @fires Tech#sourceset
+     * @param {string} src The source string at the time of the source changing.
+     */
+    triggerSourceset(src) {
+      if (!this.isReady_) {
+        // on initial ready we have to trigger source set
+        // 1ms after ready so that player can watch for it.
+        this.one('ready', () => this.setTimeout(() => this.triggerSourceset(src), 1));
+      }
+
+      /**
+       * Fired when the source is set on the tech causing the media element
+       * to reload.
+       *
+       * @see {@link Player#event:sourceset}
+       * @event Tech#sourceset
+       * @type {Event}
+       */
+      this.trigger({
+        src,
+        type: 'sourceset'
+      });
+    }
+
+    /* Fallbacks for unsupported event types
+    ================================================================================ */
+
+    /**
+     * Polyfill the `progress` event for browsers that don't support it natively.
+     *
+     * @see {@link Tech#trackProgress}
+     */
+    manualProgressOn() {
+      this.on('durationchange', this.onDurationChange_);
+      this.manualProgress = true;
+
+      // Trigger progress watching when a source begins loading
+      this.one('ready', this.trackProgress_);
+    }
+
+    /**
+     * Turn off the polyfill for `progress` events that was created in
+     * {@link Tech#manualProgressOn}
+     */
+    manualProgressOff() {
+      this.manualProgress = false;
+      this.stopTrackingProgress();
+      this.off('durationchange', this.onDurationChange_);
+    }
+
+    /**
+     * This is used to trigger a `progress` event when the buffered percent changes. It
+     * sets an interval function that will be called every 500 milliseconds to check if the
+     * buffer end percent has changed.
+     *
+     * > This function is called by {@link Tech#manualProgressOn}
+     *
+     * @param {Event} event
+     *        The `ready` event that caused this to run.
+     *
+     * @listens Tech#ready
+     * @fires Tech#progress
+     */
+    trackProgress(event) {
+      this.stopTrackingProgress();
+      this.progressInterval = this.setInterval(bind_(this, function () {
+        // Don't trigger unless buffered amount is greater than last time
+
+        const numBufferedPercent = this.bufferedPercent();
+        if (this.bufferedPercent_ !== numBufferedPercent) {
+          /**
+           * See {@link Player#progress}
+           *
+           * @event Tech#progress
+           * @type {Event}
+           */
+          this.trigger('progress');
+        }
+        this.bufferedPercent_ = numBufferedPercent;
+        if (numBufferedPercent === 1) {
+          this.stopTrackingProgress();
+        }
+      }), 500);
+    }
+
+    /**
+     * Update our internal duration on a `durationchange` event by calling
+     * {@link Tech#duration}.
+     *
+     * @param {Event} event
+     *        The `durationchange` event that caused this to run.
+     *
+     * @listens Tech#durationchange
+     */
+    onDurationChange(event) {
+      this.duration_ = this.duration();
+    }
+
+    /**
+     * Get and create a `TimeRange` object for buffering.
+     *
+     * @return { import('../utils/time').TimeRange }
+     *         The time range object that was created.
+     */
+    buffered() {
+      return createTimeRanges$1(0, 0);
+    }
+
+    /**
+     * Get the percentage of the current video that is currently buffered.
+     *
+     * @return {number}
+     *         A number from 0 to 1 that represents the decimal percentage of the
+     *         video that is buffered.
+     *
+     */
+    bufferedPercent() {
+      return bufferedPercent(this.buffered(), this.duration_);
+    }
+
+    /**
+     * Turn off the polyfill for `progress` events that was created in
+     * {@link Tech#manualProgressOn}
+     * Stop manually tracking progress events by clearing the interval that was set in
+     * {@link Tech#trackProgress}.
+     */
+    stopTrackingProgress() {
+      this.clearInterval(this.progressInterval);
+    }
+
+    /**
+     * Polyfill the `timeupdate` event for browsers that don't support it.
+     *
+     * @see {@link Tech#trackCurrentTime}
+     */
+    manualTimeUpdatesOn() {
+      this.manualTimeUpdates = true;
+      this.on('play', this.trackCurrentTime_);
+      this.on('pause', this.stopTrackingCurrentTime_);
+    }
+
+    /**
+     * Turn off the polyfill for `timeupdate` events that was created in
+     * {@link Tech#manualTimeUpdatesOn}
+     */
+    manualTimeUpdatesOff() {
+      this.manualTimeUpdates = false;
+      this.stopTrackingCurrentTime();
+      this.off('play', this.trackCurrentTime_);
+      this.off('pause', this.stopTrackingCurrentTime_);
+    }
+
+    /**
+     * Sets up an interval function to track current time and trigger `timeupdate` every
+     * 250 milliseconds.
+     *
+     * @listens Tech#play
+     * @triggers Tech#timeupdate
+     */
+    trackCurrentTime() {
+      if (this.currentTimeInterval) {
+        this.stopTrackingCurrentTime();
+      }
+      this.currentTimeInterval = this.setInterval(function () {
+        /**
+         * Triggered at an interval of 250ms to indicated that time is passing in the video.
+         *
+         * @event Tech#timeupdate
+         * @type {Event}
+         */
+        this.trigger({
+          type: 'timeupdate',
+          target: this,
+          manuallyTriggered: true
+        });
+
+        // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
+      }, 250);
+    }
+
+    /**
+     * Stop the interval function created in {@link Tech#trackCurrentTime} so that the
+     * `timeupdate` event is no longer triggered.
+     *
+     * @listens {Tech#pause}
+     */
+    stopTrackingCurrentTime() {
+      this.clearInterval(this.currentTimeInterval);
+
+      // #1002 - if the video ends right before the next timeupdate would happen,
+      // the progress bar won't make it all the way to the end
+      this.trigger({
+        type: 'timeupdate',
+        target: this,
+        manuallyTriggered: true
+      });
+    }
+
+    /**
+     * Turn off all event polyfills, clear the `Tech`s {@link AudioTrackList},
+     * {@link VideoTrackList}, and {@link TextTrackList}, and dispose of this Tech.
+     *
+     * @fires Component#dispose
+     */
+    dispose() {
+      // clear out all tracks because we can't reuse them between techs
+      this.clearTracks(NORMAL.names);
+
+      // Turn off any manual progress or timeupdate tracking
+      if (this.manualProgress) {
+        this.manualProgressOff();
+      }
+      if (this.manualTimeUpdates) {
+        this.manualTimeUpdatesOff();
+      }
+      super.dispose();
+    }
+
+    /**
+     * Clear out a single `TrackList` or an array of `TrackLists` given their names.
+     *
+     * > Note: Techs without source handlers should call this between sources for `video`
+     *         & `audio` tracks. You don't want to use them between tracks!
+     *
+     * @param {string[]|string} types
+     *        TrackList names to clear, valid names are `video`, `audio`, and
+     *        `text`.
+     */
+    clearTracks(types) {
+      types = [].concat(types);
+      // clear out all tracks because we can't reuse them between techs
+      types.forEach(type => {
+        const list = this[`${type}Tracks`]() || [];
+        let i = list.length;
+        while (i--) {
+          const track = list[i];
+          if (type === 'text') {
+            this.removeRemoteTextTrack(track);
+          }
+          list.removeTrack(track);
+        }
+      });
+    }
+
+    /**
+     * Remove any TextTracks added via addRemoteTextTrack that are
+     * flagged for automatic garbage collection
+     */
+    cleanupAutoTextTracks() {
+      const list = this.autoRemoteTextTracks_ || [];
+      let i = list.length;
+      while (i--) {
+        const track = list[i];
+        this.removeRemoteTextTrack(track);
+      }
+    }
+
+    /**
+     * Reset the tech, which will removes all sources and reset the internal readyState.
+     *
+     * @abstract
+     */
+    reset() {}
+
+    /**
+     * Get the value of `crossOrigin` from the tech.
+     *
+     * @abstract
+     *
+     * @see {Html5#crossOrigin}
+     */
+    crossOrigin() {}
+
+    /**
+     * Set the value of `crossOrigin` on the tech.
+     *
+     * @abstract
+     *
+     * @param {string} crossOrigin the crossOrigin value
+     * @see {Html5#setCrossOrigin}
+     */
+    setCrossOrigin() {}
+
+    /**
+     * Get or set an error on the Tech.
+     *
+     * @param {MediaError} [err]
+     *        Error to set on the Tech
+     *
+     * @return {MediaError|null}
+     *         The current error object on the tech, or null if there isn't one.
+     */
+    error(err) {
+      if (err !== undefined) {
+        this.error_ = new MediaError(err);
+        this.trigger('error');
+      }
+      return this.error_;
+    }
+
+    /**
+     * Returns the `TimeRange`s that have been played through for the current source.
+     *
+     * > NOTE: This implementation is incomplete. It does not track the played `TimeRange`.
+     *         It only checks whether the source has played at all or not.
+     *
+     * @return { import('../utils/time').TimeRange }
+     *         - A single time range if this video has played
+     *         - An empty set of ranges if not.
+     */
+    played() {
+      if (this.hasStarted_) {
+        return createTimeRanges$1(0, 0);
+      }
+      return createTimeRanges$1();
+    }
+
+    /**
+     * Start playback
+     *
+     * @abstract
+     *
+     * @see {Html5#play}
+     */
+    play() {}
+
+    /**
+     * Set whether we are scrubbing or not
+     *
+     * @abstract
+     * @param {boolean} _isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     *
+     * @see {Html5#setScrubbing}
+     */
+    setScrubbing(_isScrubbing) {}
+
+    /**
+     * Get whether we are scrubbing or not
+     *
+     * @abstract
+     *
+     * @see {Html5#scrubbing}
+     */
+    scrubbing() {}
+
+    /**
+     * Causes a manual time update to occur if {@link Tech#manualTimeUpdatesOn} was
+     * previously called.
+     *
+     * @param {number} _seconds
+     *        Set the current time of the media to this.
+     * @fires Tech#timeupdate
+     */
+    setCurrentTime(_seconds) {
+      // improve the accuracy of manual timeupdates
+      if (this.manualTimeUpdates) {
+        /**
+         * A manual `timeupdate` event.
+         *
+         * @event Tech#timeupdate
+         * @type {Event}
+         */
+        this.trigger({
+          type: 'timeupdate',
+          target: this,
+          manuallyTriggered: true
+        });
+      }
+    }
+
+    /**
+     * Turn on listeners for {@link VideoTrackList}, {@link {AudioTrackList}, and
+     * {@link TextTrackList} events.
+     *
+     * This adds {@link EventTarget~EventListeners} for `addtrack`, and  `removetrack`.
+     *
+     * @fires Tech#audiotrackchange
+     * @fires Tech#videotrackchange
+     * @fires Tech#texttrackchange
+     */
+    initTrackListeners() {
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link AudioTrackList}
+        *
+        * @event Tech#audiotrackchange
+        * @type {Event}
+        */
+
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link VideoTrackList}
+        *
+        * @event Tech#videotrackchange
+        * @type {Event}
+        */
+
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link TextTrackList}
+        *
+        * @event Tech#texttrackchange
+        * @type {Event}
+        */
+      NORMAL.names.forEach(name => {
+        const props = NORMAL[name];
+        const trackListChanges = () => {
+          this.trigger(`${name}trackchange`);
+        };
+        const tracks = this[props.getterName]();
+        tracks.addEventListener('removetrack', trackListChanges);
+        tracks.addEventListener('addtrack', trackListChanges);
+        this.on('dispose', () => {
+          tracks.removeEventListener('removetrack', trackListChanges);
+          tracks.removeEventListener('addtrack', trackListChanges);
+        });
+      });
+    }
+
+    /**
+     * Emulate TextTracks using vtt.js if necessary
+     *
+     * @fires Tech#vttjsloaded
+     * @fires Tech#vttjserror
+     */
+    addWebVttScript_() {
+      if (window.WebVTT) {
+        return;
+      }
+
+      // Initially, Tech.el_ is a child of a dummy-div wait until the Component system
+      // signals that the Tech is ready at which point Tech.el_ is part of the DOM
+      // before inserting the WebVTT script
+      if (document.body.contains(this.el())) {
+        // load via require if available and vtt.js script location was not passed in
+        // as an option. novtt builds will turn the above require call into an empty object
+        // which will cause this if check to always fail.
+        if (!this.options_['vtt.js'] && isPlain(vtt) && Object.keys(vtt).length > 0) {
+          this.trigger('vttjsloaded');
+          return;
+        }
+
+        // load vtt.js via the script location option or the cdn of no location was
+        // passed in
+        const script = document.createElement('script');
+        script.src = this.options_['vtt.js'] || 'https://vjs.zencdn.net/vttjs/0.14.1/vtt.min.js';
+        script.onload = () => {
+          /**
+           * Fired when vtt.js is loaded.
+           *
+           * @event Tech#vttjsloaded
+           * @type {Event}
+           */
+          this.trigger('vttjsloaded');
+        };
+        script.onerror = () => {
+          /**
+           * Fired when vtt.js was not loaded due to an error
+           *
+           * @event Tech#vttjsloaded
+           * @type {Event}
+           */
+          this.trigger('vttjserror');
+        };
+        this.on('dispose', () => {
+          script.onload = null;
+          script.onerror = null;
+        });
+        // but have not loaded yet and we set it to true before the inject so that
+        // we don't overwrite the injected window.WebVTT if it loads right away
+        window.WebVTT = true;
+        this.el().parentNode.appendChild(script);
+      } else {
+        this.ready(this.addWebVttScript_);
+      }
+    }
+
+    /**
+     * Emulate texttracks
+     *
+     */
+    emulateTextTracks() {
+      const tracks = this.textTracks();
+      const remoteTracks = this.remoteTextTracks();
+      const handleAddTrack = e => tracks.addTrack(e.track);
+      const handleRemoveTrack = e => tracks.removeTrack(e.track);
+      remoteTracks.on('addtrack', handleAddTrack);
+      remoteTracks.on('removetrack', handleRemoveTrack);
+      this.addWebVttScript_();
+      const updateDisplay = () => this.trigger('texttrackchange');
+      const textTracksChanges = () => {
+        updateDisplay();
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+          track.removeEventListener('cuechange', updateDisplay);
+          if (track.mode === 'showing') {
+            track.addEventListener('cuechange', updateDisplay);
+          }
+        }
+      };
+      textTracksChanges();
+      tracks.addEventListener('change', textTracksChanges);
+      tracks.addEventListener('addtrack', textTracksChanges);
+      tracks.addEventListener('removetrack', textTracksChanges);
+      this.on('dispose', function () {
+        remoteTracks.off('addtrack', handleAddTrack);
+        remoteTracks.off('removetrack', handleRemoveTrack);
+        tracks.removeEventListener('change', textTracksChanges);
+        tracks.removeEventListener('addtrack', textTracksChanges);
+        tracks.removeEventListener('removetrack', textTracksChanges);
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+          track.removeEventListener('cuechange', updateDisplay);
+        }
+      });
+    }
+
+    /**
+     * Create and returns a remote {@link TextTrack} object.
+     *
+     * @param {string} kind
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+     *
+     * @param {string} [label]
+     *        Label to identify the text track
+     *
+     * @param {string} [language]
+     *        Two letter language abbreviation
+     *
+     * @return {TextTrack}
+     *         The TextTrack that gets created.
+     */
+    addTextTrack(kind, label, language) {
+      if (!kind) {
+        throw new Error('TextTrack kind is required but was not provided');
+      }
+      return createTrackHelper(this, kind, label, language);
+    }
+
+    /**
+     * Create an emulated TextTrack for use by addRemoteTextTrack
+     *
+     * This is intended to be overridden by classes that inherit from
+     * Tech in order to create native or custom TextTracks.
+     *
+     * @param {Object} options
+     *        The object should contain the options to initialize the TextTrack with.
+     *
+     * @param {string} [options.kind]
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+     *
+     * @param {string} [options.label].
+     *        Label to identify the text track
+     *
+     * @param {string} [options.language]
+     *        Two letter language abbreviation.
+     *
+     * @return {HTMLTrackElement}
+     *         The track element that gets created.
+     */
+    createRemoteTextTrack(options) {
+      const track = merge$2(options, {
+        tech: this
+      });
+      return new REMOTE.remoteTextEl.TrackClass(track);
+    }
+
+    /**
+     * Creates a remote text track object and returns an html track element.
+     *
+     * > Note: This can be an emulated {@link HTMLTrackElement} or a native one.
+     *
+     * @param {Object} options
+     *        See {@link Tech#createRemoteTextTrack} for more detailed properties.
+     *
+     * @param {boolean} [manualCleanup=false]
+     *        - When false: the TextTrack will be automatically removed from the video
+     *          element whenever the source changes
+     *        - When True: The TextTrack will have to be cleaned up manually
+     *
+     * @return {HTMLTrackElement}
+     *         An Html Track Element.
+     *
+     */
+    addRemoteTextTrack(options = {}, manualCleanup) {
+      const htmlTrackElement = this.createRemoteTextTrack(options);
+      if (typeof manualCleanup !== 'boolean') {
+        manualCleanup = false;
+      }
+
+      // store HTMLTrackElement and TextTrack to remote list
+      this.remoteTextTrackEls().addTrackElement_(htmlTrackElement);
+      this.remoteTextTracks().addTrack(htmlTrackElement.track);
+      if (manualCleanup === false) {
+        // create the TextTrackList if it doesn't exist
+        this.ready(() => this.autoRemoteTextTracks_.addTrack(htmlTrackElement.track));
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Remove a remote text track from the remote `TextTrackList`.
+     *
+     * @param {TextTrack} track
+     *        `TextTrack` to remove from the `TextTrackList`
+     */
+    removeRemoteTextTrack(track) {
+      const trackElement = this.remoteTextTrackEls().getTrackElementByTrack_(track);
+
+      // remove HTMLTrackElement and TextTrack from remote list
+      this.remoteTextTrackEls().removeTrackElement_(trackElement);
+      this.remoteTextTracks().removeTrack(track);
+      this.autoRemoteTextTracks_.removeTrack(track);
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object}
+     *         An object with supported media playback quality metrics
+     *
+     * @abstract
+     */
+    getVideoPlaybackQuality() {
+      return {};
+    }
+
+    /**
+     * Attempt to create a floating video window always on top of other windows
+     * so that users may continue consuming media while they interact with other
+     * content sites, or applications on their device.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @return {Promise|undefined}
+     *         A promise with a Picture-in-Picture window if the browser supports
+     *         Promises (or one was passed in as an option). It returns undefined
+     *         otherwise.
+     *
+     * @abstract
+     */
+    requestPictureInPicture() {
+      return Promise.reject();
+    }
+
+    /**
+     * A method to check for the value of the 'disablePictureInPicture' <video> property.
+     * Defaults to true, as it should be considered disabled if the tech does not support pip
+     *
+     * @abstract
+     */
+    disablePictureInPicture() {
+      return true;
+    }
+
+    /**
+     * A method to set or unset the 'disablePictureInPicture' <video> property.
+     *
+     * @abstract
+     */
+    setDisablePictureInPicture() {}
+
+    /**
+     * A fallback implementation of requestVideoFrameCallback using requestAnimationFrame
+     *
+     * @param {function} cb
+     * @return {number} request id
+     */
+    requestVideoFrameCallback(cb) {
+      const id = newGUID();
+      if (!this.isReady_ || this.paused()) {
+        this.queuedHanders_.add(id);
+        this.one('playing', () => {
+          if (this.queuedHanders_.has(id)) {
+            this.queuedHanders_.delete(id);
+            cb();
+          }
+        });
+      } else {
+        this.requestNamedAnimationFrame(id, cb);
+      }
+      return id;
+    }
+
+    /**
+     * A fallback implementation of cancelVideoFrameCallback
+     *
+     * @param {number} id id of callback to be cancelled
+     */
+    cancelVideoFrameCallback(id) {
+      if (this.queuedHanders_.has(id)) {
+        this.queuedHanders_.delete(id);
+      } else {
+        this.cancelNamedAnimationFrame(id);
+      }
+    }
+
+    /**
+     * A method to set a poster from a `Tech`.
+     *
+     * @abstract
+     */
+    setPoster() {}
+
+    /**
+     * A method to check for the presence of the 'playsinline' <video> attribute.
+     *
+     * @abstract
+     */
+    playsinline() {}
+
+    /**
+     * A method to set or unset the 'playsinline' <video> attribute.
+     *
+     * @abstract
+     */
+    setPlaysinline() {}
+
+    /**
+     * Attempt to force override of native audio tracks.
+     *
+     * @param {boolean} override - If set to true native audio will be overridden,
+     * otherwise native audio will potentially be used.
+     *
+     * @abstract
+     */
+    overrideNativeAudioTracks(override) {}
+
+    /**
+     * Attempt to force override of native video tracks.
+     *
+     * @param {boolean} override - If set to true native video will be overridden,
+     * otherwise native video will potentially be used.
+     *
+     * @abstract
+     */
+    overrideNativeVideoTracks(override) {}
+
+    /**
+     * Check if the tech can support the given mime-type.
+     *
+     * The base tech does not support any type, but source handlers might
+     * overwrite this.
+     *
+     * @param  {string} _type
+     *         The mimetype to check for support
+     *
+     * @return {string}
+     *         'probably', 'maybe', or empty string
+     *
+     * @see [Spec]{@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType}
+     *
+     * @abstract
+     */
+    canPlayType(_type) {
+      return '';
+    }
+
+    /**
+     * Check if the type is supported by this tech.
+     *
+     * The base tech does not support any type, but source handlers might
+     * overwrite this.
+     *
+     * @param {string} _type
+     *        The media type to check
+     * @return {string} Returns the native video element's response
+     */
+    static canPlayType(_type) {
+      return '';
+    }
+
+    /**
+     * Check if the tech can support the given source
+     *
+     * @param {Object} srcObj
+     *        The source object
+     * @param {Object} options
+     *        The options passed to the tech
+     * @return {string} 'probably', 'maybe', or '' (empty string)
+     */
+    static canPlaySource(srcObj, options) {
+      return Tech.canPlayType(srcObj.type);
+    }
+
+    /*
+     * Return whether the argument is a Tech or not.
+     * Can be passed either a Class like `Html5` or a instance like `player.tech_`
+     *
+     * @param {Object} component
+     *        The item to check
+     *
+     * @return {boolean}
+     *         Whether it is a tech or not
+     *         - True if it is a tech
+     *         - False if it is not
+     */
+    static isTech(component) {
+      return component.prototype instanceof Tech || component instanceof Tech || component === Tech;
+    }
+
+    /**
+     * Registers a `Tech` into a shared list for videojs.
+     *
+     * @param {string} name
+     *        Name of the `Tech` to register.
+     *
+     * @param {Object} tech
+     *        The `Tech` class to register.
+     */
+    static registerTech(name, tech) {
+      if (!Tech.techs_) {
+        Tech.techs_ = {};
+      }
+      if (!Tech.isTech(tech)) {
+        throw new Error(`Tech ${name} must be a Tech`);
+      }
+      if (!Tech.canPlayType) {
+        throw new Error('Techs must have a static canPlayType method on them');
+      }
+      if (!Tech.canPlaySource) {
+        throw new Error('Techs must have a static canPlaySource method on them');
+      }
+      name = toTitleCase$1(name);
+      Tech.techs_[name] = tech;
+      Tech.techs_[toLowerCase(name)] = tech;
+      if (name !== 'Tech') {
+        // camel case the techName for use in techOrder
+        Tech.defaultTechOrder_.push(name);
+      }
+      return tech;
+    }
+
+    /**
+     * Get a `Tech` from the shared list by name.
+     *
+     * @param {string} name
+     *        `camelCase` or `TitleCase` name of the Tech to get
+     *
+     * @return {Tech|undefined}
+     *         The `Tech` or undefined if there was no tech with the name requested.
+     */
+    static getTech(name) {
+      if (!name) {
+        return;
+      }
+      if (Tech.techs_ && Tech.techs_[name]) {
+        return Tech.techs_[name];
+      }
+      name = toTitleCase$1(name);
+      if (window && window.videojs && window.videojs[name]) {
+        log$1.warn(`The ${name} tech was added to the videojs object when it should be registered using videojs.registerTech(name, tech)`);
+        return window.videojs[name];
+      }
+    }
+  }
+
+  /**
+   * Get the {@link VideoTrackList}
+   *
+   * @returns {VideoTrackList}
+   * @method Tech.prototype.videoTracks
+   */
+
+  /**
+   * Get the {@link AudioTrackList}
+   *
+   * @returns {AudioTrackList}
+   * @method Tech.prototype.audioTracks
+   */
+
+  /**
+   * Get the {@link TextTrackList}
+   *
+   * @returns {TextTrackList}
+   * @method Tech.prototype.textTracks
+   */
+
+  /**
+   * Get the remote element {@link TextTrackList}
+   *
+   * @returns {TextTrackList}
+   * @method Tech.prototype.remoteTextTracks
+   */
+
+  /**
+   * Get the remote element {@link HtmlTrackElementList}
+   *
+   * @returns {HtmlTrackElementList}
+   * @method Tech.prototype.remoteTextTrackEls
+   */
+
+  ALL.names.forEach(function (name) {
+    const props = ALL[name];
+    Tech.prototype[props.getterName] = function () {
+      this[props.privateName] = this[props.privateName] || new props.ListClass();
+      return this[props.privateName];
+    };
+  });
+
+  /**
+   * List of associated text tracks
+   *
+   * @type {TextTrackList}
+   * @private
+   * @property Tech#textTracks_
+   */
+
+  /**
+   * List of associated audio tracks.
+   *
+   * @type {AudioTrackList}
+   * @private
+   * @property Tech#audioTracks_
+   */
+
+  /**
+   * List of associated video tracks.
+   *
+   * @type {VideoTrackList}
+   * @private
+   * @property Tech#videoTracks_
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports volume control.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresVolumeControl = true;
+
+  /**
+   * Boolean indicating whether the `Tech` supports muting volume.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresMuteControl = true;
+
+  /**
+   * Boolean indicating whether the `Tech` supports fullscreen resize control.
+   * Resizing plugins using request fullscreen reloads the plugin
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresFullscreenResize = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports changing the speed at which the video
+   * plays. Examples:
+   *   - Set player to play 2x (twice) as fast
+   *   - Set player to play 0.5x (half) as fast
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresPlaybackRate = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `progress` event.
+   * This will be used to determine if {@link Tech#manualProgressOn} should be called.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresProgressEvents = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `sourceset` event.
+   *
+   * A tech should set this to `true` and then use {@link Tech#triggerSourceset}
+   * to trigger a {@link Tech#event:sourceset} at the earliest time after getting
+   * a new source.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresSourceset = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `timeupdate` event.
+   * This will be used to determine if {@link Tech#manualTimeUpdates} should be called.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresTimeupdateEvents = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the native `TextTrack`s.
+   * This will help us integrate with native `TextTrack`s if the browser supports them.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresNativeTextTracks = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports `requestVideoFrameCallback`.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresVideoFrameCallback = false;
+
+  /**
+   * A functional mixin for techs that want to use the Source Handler pattern.
+   * Source handlers are scripts for handling specific formats.
+   * The source handler pattern is used for adaptive formats (HLS, DASH) that
+   * manually load video data and feed it into a Source Buffer (Media Source Extensions)
+   * Example: `Tech.withSourceHandlers.call(MyTech);`
+   *
+   * @param {Tech} _Tech
+   *        The tech to add source handler functions to.
+   *
+   * @mixes Tech~SourceHandlerAdditions
+   */
+  Tech.withSourceHandlers = function (_Tech) {
+    /**
+     * Register a source handler
+     *
+     * @param {Function} handler
+     *        The source handler class
+     *
+     * @param {number} [index]
+     *        Register it at the following index
+     */
+    _Tech.registerSourceHandler = function (handler, index) {
+      let handlers = _Tech.sourceHandlers;
+      if (!handlers) {
+        handlers = _Tech.sourceHandlers = [];
+      }
+      if (index === undefined) {
+        // add to the end of the list
+        index = handlers.length;
+      }
+      handlers.splice(index, 0, handler);
+    };
+
+    /**
+     * Check if the tech can support the given type. Also checks the
+     * Techs sourceHandlers.
+     *
+     * @param {string} type
+     *         The mimetype to check.
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    _Tech.canPlayType = function (type) {
+      const handlers = _Tech.sourceHandlers || [];
+      let can;
+      for (let i = 0; i < handlers.length; i++) {
+        can = handlers[i].canPlayType(type);
+        if (can) {
+          return can;
+        }
+      }
+      return '';
+    };
+
+    /**
+     * Returns the first source handler that supports the source.
+     *
+     * TODO: Answer question: should 'probably' be prioritized over 'maybe'
+     *
+     * @param {SourceObject} source
+     *        The source object
+     *
+     * @param {Object} options
+     *        The options passed to the tech
+     *
+     * @return {SourceHandler|null}
+     *          The first source handler that supports the source or null if
+     *          no SourceHandler supports the source
+     */
+    _Tech.selectSourceHandler = function (source, options) {
+      const handlers = _Tech.sourceHandlers || [];
+      let can;
+      for (let i = 0; i < handlers.length; i++) {
+        can = handlers[i].canHandleSource(source, options);
+        if (can) {
+          return handlers[i];
+        }
+      }
+      return null;
+    };
+
+    /**
+     * Check if the tech can support the given source.
+     *
+     * @param {SourceObject} srcObj
+     *        The source object
+     *
+     * @param {Object} options
+     *        The options passed to the tech
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    _Tech.canPlaySource = function (srcObj, options) {
+      const sh = _Tech.selectSourceHandler(srcObj, options);
+      if (sh) {
+        return sh.canHandleSource(srcObj, options);
+      }
+      return '';
+    };
+
+    /**
+     * When using a source handler, prefer its implementation of
+     * any function normally provided by the tech.
+     */
+    const deferrable = ['seekable', 'seeking', 'duration'];
+
+    /**
+     * A wrapper around {@link Tech#seekable} that will call a `SourceHandler`s seekable
+     * function if it exists, with a fallback to the Techs seekable function.
+     *
+     * @method _Tech.seekable
+     */
+
+    /**
+     * A wrapper around {@link Tech#duration} that will call a `SourceHandler`s duration
+     * function if it exists, otherwise it will fallback to the techs duration function.
+     *
+     * @method _Tech.duration
+     */
+
+    deferrable.forEach(function (fnName) {
+      const originalFn = this[fnName];
+      if (typeof originalFn !== 'function') {
+        return;
+      }
+      this[fnName] = function () {
+        if (this.sourceHandler_ && this.sourceHandler_[fnName]) {
+          return this.sourceHandler_[fnName].apply(this.sourceHandler_, arguments);
+        }
+        return originalFn.apply(this, arguments);
+      };
+    }, _Tech.prototype);
+
+    /**
+     * Create a function for setting the source using a source object
+     * and source handlers.
+     * Should never be called unless a source handler was found.
+     *
+     * @param {SourceObject} source
+     *        A source object with src and type keys
+     */
+    _Tech.prototype.setSource = function (source) {
+      let sh = _Tech.selectSourceHandler(source, this.options_);
+      if (!sh) {
+        // Fall back to a native source handler when unsupported sources are
+        // deliberately set
+        if (_Tech.nativeSourceHandler) {
+          sh = _Tech.nativeSourceHandler;
+        } else {
+          log$1.error('No source handler found for the current source.');
+        }
+      }
+
+      // Dispose any existing source handler
+      this.disposeSourceHandler();
+      this.off('dispose', this.disposeSourceHandler_);
+      if (sh !== _Tech.nativeSourceHandler) {
+        this.currentSource_ = source;
+      }
+      this.sourceHandler_ = sh.handleSource(source, this, this.options_);
+      this.one('dispose', this.disposeSourceHandler_);
+    };
+
+    /**
+     * Clean up any existing SourceHandlers and listeners when the Tech is disposed.
+     *
+     * @listens Tech#dispose
+     */
+    _Tech.prototype.disposeSourceHandler = function () {
+      // if we have a source and get another one
+      // then we are loading something new
+      // than clear all of our current tracks
+      if (this.currentSource_) {
+        this.clearTracks(['audio', 'video']);
+        this.currentSource_ = null;
+      }
+
+      // always clean up auto-text tracks
+      this.cleanupAutoTextTracks();
+      if (this.sourceHandler_) {
+        if (this.sourceHandler_.dispose) {
+          this.sourceHandler_.dispose();
+        }
+        this.sourceHandler_ = null;
+      }
+    };
+  };
+
+  // The base Tech class needs to be registered as a Component. It is the only
+  // Tech that can be registered as a Component.
+  Component$1.registerComponent('Tech', Tech);
+  Tech.registerTech('Tech', Tech);
+
+  /**
+   * A list of techs that should be added to techOrder on Players
+   *
+   * @private
+   */
+  Tech.defaultTechOrder_ = [];
+
+  /**
+   * @file middleware.js
+   * @module middleware
+   */
+  const middlewares = {};
+  const middlewareInstances = {};
+  const TERMINATOR = {};
+
+  /**
+   * A middleware object is a plain JavaScript object that has methods that
+   * match the {@link Tech} methods found in the lists of allowed
+   * {@link module:middleware.allowedGetters|getters},
+   * {@link module:middleware.allowedSetters|setters}, and
+   * {@link module:middleware.allowedMediators|mediators}.
+   *
+   * @typedef {Object} MiddlewareObject
+   */
+
+  /**
+   * A middleware factory function that should return a
+   * {@link module:middleware~MiddlewareObject|MiddlewareObject}.
+   *
+   * This factory will be called for each player when needed, with the player
+   * passed in as an argument.
+   *
+   * @callback MiddlewareFactory
+   * @param { import('../player').default } player
+   *        A Video.js player.
+   */
+
+  /**
+   * Define a middleware that the player should use by way of a factory function
+   * that returns a middleware object.
+   *
+   * @param  {string} type
+   *         The MIME type to match or `"*"` for all MIME types.
+   *
+   * @param  {MiddlewareFactory} middleware
+   *         A middleware factory function that will be executed for
+   *         matching types.
+   */
+  function use(type, middleware) {
+    middlewares[type] = middlewares[type] || [];
+    middlewares[type].push(middleware);
+  }
+
+  /**
+   * Asynchronously sets a source using middleware by recursing through any
+   * matching middlewares and calling `setSource` on each, passing along the
+   * previous returned value each time.
+   *
+   * @param  { import('../player').default } player
+   *         A {@link Player} instance.
+   *
+   * @param  {Tech~SourceObject} src
+   *         A source object.
+   *
+   * @param  {Function}
+   *         The next middleware to run.
+   */
+  function setSource(player, src, next) {
+    player.setTimeout(() => setSourceHelper(src, middlewares[src.type], next, player), 1);
+  }
+
+  /**
+   * When the tech is set, passes the tech to each middleware's `setTech` method.
+   *
+   * @param {Object[]} middleware
+   *        An array of middleware instances.
+   *
+   * @param { import('../tech/tech').default } tech
+   *        A Video.js tech.
+   */
+  function setTech(middleware, tech) {
+    middleware.forEach(mw => mw.setTech && mw.setTech(tech));
+  }
+
+  /**
+   * Calls a getter on the tech first, through each middleware
+   * from right to left to the player.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @return {*}
+   *         The final value from the tech after middleware has intercepted it.
+   */
+  function get(middleware, tech, method) {
+    return middleware.reduceRight(middlewareIterator(method), tech[method]());
+  }
+
+  /**
+   * Takes the argument given to the player and calls the setter method on each
+   * middleware from left to right to the tech.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @param  {*} arg
+   *         The value to set on the tech.
+   *
+   * @return {*}
+   *         The return value of the `method` of the `tech`.
+   */
+  function set(middleware, tech, method, arg) {
+    return tech[method](middleware.reduce(middlewareIterator(method), arg));
+  }
+
+  /**
+   * Takes the argument given to the player and calls the `call` version of the
+   * method on each middleware from left to right.
+   *
+   * Then, call the passed in method on the tech and return the result unchanged
+   * back to the player, through middleware, this time from right to left.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @param  {*} arg
+   *         The value to set on the tech.
+   *
+   * @return {*}
+   *         The return value of the `method` of the `tech`, regardless of the
+   *         return values of middlewares.
+   */
+  function mediate(middleware, tech, method, arg = null) {
+    const callMethod = 'call' + toTitleCase$1(method);
+    const middlewareValue = middleware.reduce(middlewareIterator(callMethod), arg);
+    const terminated = middlewareValue === TERMINATOR;
+    // deprecated. The `null` return value should instead return TERMINATOR to
+    // prevent confusion if a techs method actually returns null.
+    const returnValue = terminated ? null : tech[method](middlewareValue);
+    executeRight(middleware, method, returnValue, terminated);
+    return returnValue;
+  }
+
+  /**
+   * Enumeration of allowed getters where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedGetters = {
+    buffered: 1,
+    currentTime: 1,
+    duration: 1,
+    muted: 1,
+    played: 1,
+    paused: 1,
+    seekable: 1,
+    volume: 1,
+    ended: 1
+  };
+
+  /**
+   * Enumeration of allowed setters where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedSetters = {
+    setCurrentTime: 1,
+    setMuted: 1,
+    setVolume: 1
+  };
+
+  /**
+   * Enumeration of allowed mediators where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedMediators = {
+    play: 1,
+    pause: 1
+  };
+  function middlewareIterator(method) {
+    return (value, mw) => {
+      // if the previous middleware terminated, pass along the termination
+      if (value === TERMINATOR) {
+        return TERMINATOR;
+      }
+      if (mw[method]) {
+        return mw[method](value);
+      }
+      return value;
+    };
+  }
+  function executeRight(mws, method, value, terminated) {
+    for (let i = mws.length - 1; i >= 0; i--) {
+      const mw = mws[i];
+      if (mw[method]) {
+        mw[method](terminated, value);
+      }
+    }
+  }
+
+  /**
+   * Clear the middleware cache for a player.
+   *
+   * @param  { import('../player').default } player
+   *         A {@link Player} instance.
+   */
+  function clearCacheForPlayer(player) {
+    middlewareInstances[player.id()] = null;
+  }
+
+  /**
+   * {
+   *  [playerId]: [[mwFactory, mwInstance], ...]
+   * }
+   *
+   * @private
+   */
+  function getOrCreateFactory(player, mwFactory) {
+    const mws = middlewareInstances[player.id()];
+    let mw = null;
+    if (mws === undefined || mws === null) {
+      mw = mwFactory(player);
+      middlewareInstances[player.id()] = [[mwFactory, mw]];
+      return mw;
+    }
+    for (let i = 0; i < mws.length; i++) {
+      const [mwf, mwi] = mws[i];
+      if (mwf !== mwFactory) {
+        continue;
+      }
+      mw = mwi;
+    }
+    if (mw === null) {
+      mw = mwFactory(player);
+      mws.push([mwFactory, mw]);
+    }
+    return mw;
+  }
+  function setSourceHelper(src = {}, middleware = [], next, player, acc = [], lastRun = false) {
+    const [mwFactory, ...mwrest] = middleware;
+
+    // if mwFactory is a string, then we're at a fork in the road
+    if (typeof mwFactory === 'string') {
+      setSourceHelper(src, middlewares[mwFactory], next, player, acc, lastRun);
+
+      // if we have an mwFactory, call it with the player to get the mw,
+      // then call the mw's setSource method
+    } else if (mwFactory) {
+      const mw = getOrCreateFactory(player, mwFactory);
+
+      // if setSource isn't present, implicitly select this middleware
+      if (!mw.setSource) {
+        acc.push(mw);
+        return setSourceHelper(src, mwrest, next, player, acc, lastRun);
+      }
+      mw.setSource(Object.assign({}, src), function (err, _src) {
+        // something happened, try the next middleware on the current level
+        // make sure to use the old src
+        if (err) {
+          return setSourceHelper(src, mwrest, next, player, acc, lastRun);
+        }
+
+        // we've succeeded, now we need to go deeper
+        acc.push(mw);
+
+        // if it's the same type, continue down the current chain
+        // otherwise, we want to go down the new chain
+        setSourceHelper(_src, src.type === _src.type ? mwrest : middlewares[_src.type], next, player, acc, lastRun);
+      });
+    } else if (mwrest.length) {
+      setSourceHelper(src, mwrest, next, player, acc, lastRun);
+    } else if (lastRun) {
+      next(src, acc);
+    } else {
+      setSourceHelper(src, middlewares['*'], next, player, acc, true);
+    }
+  }
+
+  /**
+   * Mimetypes
+   *
+   * @see https://www.iana.org/assignments/media-types/media-types.xhtml
+   * @typedef Mimetypes~Kind
+   * @enum
+   */
+  const MimetypesKind = {
+    opus: 'video/ogg',
+    ogv: 'video/ogg',
+    mp4: 'video/mp4',
+    mov: 'video/mp4',
+    m4v: 'video/mp4',
+    mkv: 'video/x-matroska',
+    m4a: 'audio/mp4',
+    mp3: 'audio/mpeg',
+    aac: 'audio/aac',
+    caf: 'audio/x-caf',
+    flac: 'audio/flac',
+    oga: 'audio/ogg',
+    wav: 'audio/wav',
+    m3u8: 'application/x-mpegURL',
+    mpd: 'application/dash+xml',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    gif: 'image/gif',
+    png: 'image/png',
+    svg: 'image/svg+xml',
+    webp: 'image/webp'
+  };
+
+  /**
+   * Get the mimetype of a given src url if possible
+   *
+   * @param {string} src
+   *        The url to the src
+   *
+   * @return {string}
+   *         return the mimetype if it was known or empty string otherwise
+   */
+  const getMimetype = function (src = '') {
+    const ext = getFileExtension(src);
+    const mimetype = MimetypesKind[ext.toLowerCase()];
+    return mimetype || '';
+  };
+
+  /**
+   * Find the mime type of a given source string if possible. Uses the player
+   * source cache.
+   *
+   * @param { import('../player').default } player
+   *        The player object
+   *
+   * @param {string} src
+   *        The source string
+   *
+   * @return {string}
+   *         The type that was found
+   */
+  const findMimetype = (player, src) => {
+    if (!src) {
+      return '';
+    }
+
+    // 1. check for the type in the `source` cache
+    if (player.cache_.source.src === src && player.cache_.source.type) {
+      return player.cache_.source.type;
+    }
+
+    // 2. see if we have this source in our `currentSources` cache
+    const matchingSources = player.cache_.sources.filter(s => s.src === src);
+    if (matchingSources.length) {
+      return matchingSources[0].type;
+    }
+
+    // 3. look for the src url in source elements and use the type there
+    const sources = player.$$('source');
+    for (let i = 0; i < sources.length; i++) {
+      const s = sources[i];
+      if (s.type && s.src && s.src === src) {
+        return s.type;
+      }
+    }
+
+    // 4. finally fallback to our list of mime types based on src url extension
+    return getMimetype(src);
+  };
+
+  /**
+   * @module filter-source
+   */
+
+  /**
+   * Filter out single bad source objects or multiple source objects in an
+   * array. Also flattens nested source object arrays into a 1 dimensional
+   * array of source objects.
+   *
+   * @param {Tech~SourceObject|Tech~SourceObject[]} src
+   *        The src object to filter
+   *
+   * @return {Tech~SourceObject[]}
+   *         An array of sourceobjects containing only valid sources
+   *
+   * @private
+   */
+  const filterSource = function (src) {
+    // traverse array
+    if (Array.isArray(src)) {
+      let newsrc = [];
+      src.forEach(function (srcobj) {
+        srcobj = filterSource(srcobj);
+        if (Array.isArray(srcobj)) {
+          newsrc = newsrc.concat(srcobj);
+        } else if (isObject$1(srcobj)) {
+          newsrc.push(srcobj);
+        }
+      });
+      src = newsrc;
+    } else if (typeof src === 'string' && src.trim()) {
+      // convert string into object
+      src = [fixSource({
+        src
+      })];
+    } else if (isObject$1(src) && typeof src.src === 'string' && src.src && src.src.trim()) {
+      // src is already valid
+      src = [fixSource(src)];
+    } else {
+      // invalid source, turn it into an empty array
+      src = [];
+    }
+    return src;
+  };
+
+  /**
+   * Checks src mimetype, adding it when possible
+   *
+   * @param {Tech~SourceObject} src
+   *        The src object to check
+   * @return {Tech~SourceObject}
+   *        src Object with known type
+   */
+  function fixSource(src) {
+    if (!src.type) {
+      const mimetype = getMimetype(src.src);
+      if (mimetype) {
+        src.type = mimetype;
+      }
+    }
+    return src;
+  }
+
+  var icons = "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-play\">\n      <path d=\"M16 10v28l22-14z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-pause\">\n      <path d=\"M12 38h8V10h-8v28zm16-28v28h8V10h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-audio\">\n      <path d=\"M24 2C14.06 2 6 10.06 6 20v14c0 3.31 2.69 6 6 6h6V24h-8v-4c0-7.73 6.27-14 14-14s14 6.27 14 14v4h-8v16h6c3.31 0 6-2.69 6-6V20c0-9.94-8.06-18-18-18z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-captions\">\n      <path d=\"M38 8H10c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM22 22h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2zm14 0h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-subtitles\">\n      <path d=\"M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-fullscreen-enter\">\n      <path d=\"M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-fullscreen-exit\">\n      <path d=\"M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-play-circle\">\n      <path d=\"M20 33l12-9-12-9v18zm4-29C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-mute\">\n      <path d=\"M33 24c0-3.53-2.04-6.58-5-8.05v4.42l4.91 4.91c.06-.42.09-.85.09-1.28zm5 0c0 1.88-.41 3.65-1.08 5.28l3.03 3.03C41.25 29.82 42 27 42 24c0-8.56-5.99-15.72-14-17.54v4.13c5.78 1.72 10 7.07 10 13.41zM8.55 6L6 8.55 15.45 18H6v12h8l10 10V26.55l8.51 8.51c-1.34 1.03-2.85 1.86-4.51 2.36v4.13a17.94 17.94 0 0 0 7.37-3.62L39.45 42 42 39.45l-18-18L8.55 6zM24 8l-4.18 4.18L24 16.36V8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-low\">\n      <path d=\"M14 18v12h8l10 10V8L22 18h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-medium\">\n      <path d=\"M37 24c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zm-27-6v12h8l10 10V8L18 18h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-high\">\n      <path d=\"M6 18v12h8l10 10V8L14 18H6zm27 6c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zM28 6.46v4.13c5.78 1.72 10 7.07 10 13.41s-4.22 11.69-10 13.41v4.13c8.01-1.82 14-8.97 14-17.54S36.01 8.28 28 6.46z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-spinner\">\n      <path d=\"M18.8 21l9.53-16.51C26.94 4.18 25.49 4 24 4c-4.8 0-9.19 1.69-12.64 4.51l7.33 12.69.11-.2zm24.28-3c-1.84-5.85-6.3-10.52-11.99-12.68L23.77 18h19.31zm.52 2H28.62l.58 1 9.53 16.5C41.99 33.94 44 29.21 44 24c0-1.37-.14-2.71-.4-4zm-26.53 4l-7.8-13.5C6.01 14.06 4 18.79 4 24c0 1.37.14 2.71.4 4h14.98l-2.31-4zM4.92 30c1.84 5.85 6.3 10.52 11.99 12.68L24.23 30H4.92zm22.54 0l-7.8 13.51c1.4.31 2.85.49 4.34.49 4.8 0 9.19-1.69 12.64-4.51L29.31 26.8 27.46 30z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 24 24\" id=\"vjs-icon-hd\">\n      <path d=\"M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-chapters\">\n      <path d=\"M6 26h4v-4H6v4zm0 8h4v-4H6v4zm0-16h4v-4H6v4zm8 8h28v-4H14v4zm0 8h28v-4H14v4zm0-20v4h28v-4H14z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 40 40\" id=\"vjs-icon-downloading\">\n      <path d=\"M18.208 36.875q-3.208-.292-5.979-1.729-2.771-1.438-4.812-3.729-2.042-2.292-3.188-5.229-1.146-2.938-1.146-6.23 0-6.583 4.334-11.416 4.333-4.834 10.833-5.5v3.166q-5.167.75-8.583 4.646Q6.25 14.75 6.25 19.958q0 5.209 3.396 9.104 3.396 3.896 8.562 4.646zM20 28.417L11.542 20l2.083-2.083 4.917 4.916v-11.25h2.916v11.25l4.875-4.916L28.417 20zm1.792 8.458v-3.167q1.833-.25 3.541-.958 1.709-.708 3.167-1.875l2.333 2.292q-1.958 1.583-4.25 2.541-2.291.959-4.791 1.167zm6.791-27.792q-1.541-1.125-3.25-1.854-1.708-.729-3.541-1.021V3.042q2.5.25 4.77 1.208 2.271.958 4.271 2.5zm4.584 21.584l-2.25-2.25q1.166-1.5 1.854-3.209.687-1.708.937-3.541h3.209q-.292 2.5-1.229 4.791-.938 2.292-2.521 4.209zm.541-12.417q-.291-1.833-.958-3.562-.667-1.73-1.833-3.188l2.375-2.208q1.541 1.916 2.458 4.208.917 2.292 1.167 4.75z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download\">\n      <path d=\"M10.8 40.55q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h26.35v-7.7h3.4v7.7q0 1.4-1 2.4t-2.4 1zM24 32.1L13.9 22.05l2.45-2.45 5.95 5.95V7.15h3.4v18.4l5.95-5.95 2.45 2.45z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download-done\">\n      <path d=\"M9.8 40.5v-3.45h28.4v3.45zm9.2-9.05L7.4 19.85l2.45-2.35L19 26.65l19.2-19.2 2.4 2.4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download-off\">\n      <path d=\"M4.9 4.75L43.25 43.1 41 45.3l-4.75-4.75q-.05.05-.075.025-.025-.025-.075-.025H10.8q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h22.05l-7-7-1.85 1.8L13.9 21.9l1.85-1.85L2.7 7zm26.75 14.7l2.45 2.45-3.75 3.8-2.45-2.5zM25.7 7.15V21.1l-3.4-3.45V7.15z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-share\">\n      <path d=\"M36 32.17c-1.52 0-2.89.59-3.93 1.54L17.82 25.4c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31A5.83 5.83 0 1 0 36 32.17z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cog\">\n      <path d=\"M38.86 25.95c.08-.64.14-1.29.14-1.95s-.06-1.31-.14-1.95l4.23-3.31c.38-.3.49-.84.24-1.28l-4-6.93c-.25-.43-.77-.61-1.22-.43l-4.98 2.01c-1.03-.79-2.16-1.46-3.38-1.97L29 4.84c-.09-.47-.5-.84-1-.84h-8c-.5 0-.91.37-.99.84l-.75 5.3a14.8 14.8 0 0 0-3.38 1.97L9.9 10.1a1 1 0 0 0-1.22.43l-4 6.93c-.25.43-.14.97.24 1.28l4.22 3.31C9.06 22.69 9 23.34 9 24s.06 1.31.14 1.95l-4.22 3.31c-.38.3-.49.84-.24 1.28l4 6.93c.25.43.77.61 1.22.43l4.98-2.01c1.03.79 2.16 1.46 3.38 1.97l.75 5.3c.08.47.49.84.99.84h8c.5 0 .91-.37.99-.84l.75-5.3a14.8 14.8 0 0 0 3.38-1.97l4.98 2.01a1 1 0 0 0 1.22-.43l4-6.93c.25-.43.14-.97-.24-1.28l-4.22-3.31zM24 31c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-square\">\n      <path d=\"M36 8H12c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H12V12h24v24z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle\">\n      <circle cx=\"24\" cy=\"24\" r=\"20\"></circle>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle-outline\">\n      <path d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle-inner-circle\">\n      <path d=\"M24 4C12.97 4 4 12.97 4 24s8.97 20 20 20 20-8.97 20-20S35.03 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm6-16c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6 6 2.69 6 6z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cancel\">\n      <path d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-replay\">\n      <path d=\"M24 10V2L14 12l10 10v-8c6.63 0 12 5.37 12 12s-5.37 12-12 12-12-5.37-12-12H8c0 8.84 7.16 16 16 16s16-7.16 16-16-7.16-16-16-16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-repeat\">\n      <path d=\"M14 14h20v6l8-8-8-8v6H10v12h4v-8zm20 20H14v-6l-8 8 8 8v-6h24V26h-4v8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-5\">\n      <path d=\"M17.689 98l-8.697 8.696 8.697 8.697 2.486-2.485-4.32-4.319h1.302c4.93 0 9.071 1.722 12.424 5.165 3.352 3.443 5.029 7.638 5.029 12.584h3.55c0-2.958-.553-5.73-1.658-8.313-1.104-2.583-2.622-4.841-4.555-6.774-1.932-1.932-4.19-3.45-6.773-4.555-2.584-1.104-5.355-1.657-8.313-1.657H15.5l4.615-4.615zm-8.08 21.659v13.861h11.357v5.008H9.609V143h12.7c.834 0 1.55-.298 2.146-.894.596-.597.895-1.31.895-2.145v-7.781c0-.835-.299-1.55-.895-2.147a2.929 2.929 0 0 0-2.147-.894h-8.227v-5.096H25.35v-4.384z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-10\">\n      <path d=\"M42.315 125.63c0-4.997-1.694-9.235-5.08-12.713-3.388-3.479-7.571-5.218-12.552-5.218h-1.315l4.363 4.363-2.51 2.51-8.787-8.786L25.221 97l2.45 2.45-4.662 4.663h1.375c2.988 0 5.788.557 8.397 1.673 2.61 1.116 4.892 2.65 6.844 4.602 1.953 1.953 3.487 4.234 4.602 6.844 1.116 2.61 1.674 5.41 1.674 8.398zM8.183 142v-19.657H3.176V117.8h9.643V142zm13.63 0c-1.156 0-2.127-.393-2.912-1.178-.778-.778-1.168-1.746-1.168-2.902v-16.04c0-1.156.393-2.127 1.178-2.912.779-.779 1.746-1.168 2.902-1.168h7.696c1.156 0 2.126.392 2.911 1.177.779.78 1.168 1.747 1.168 2.903v16.04c0 1.156-.392 2.127-1.177 2.912-.779.779-1.746 1.168-2.902 1.168zm.556-4.636h6.583v-15.02H22.37z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-30\">\n      <path d=\"M26.047 97l-8.733 8.732 8.733 8.733 2.496-2.494-4.336-4.338h1.307c4.95 0 9.108 1.73 12.474 5.187 3.367 3.458 5.051 7.668 5.051 12.635h3.565c0-2.97-.556-5.751-1.665-8.346-1.109-2.594-2.633-4.862-4.574-6.802-1.94-1.941-4.208-3.466-6.803-4.575-2.594-1.109-5.375-1.664-8.345-1.664H23.85l4.634-4.634zM2.555 117.531v4.688h10.297v5.25H5.873v4.687h6.979v5.156H2.555V142H13.36c1.061 0 1.95-.395 2.668-1.186.718-.79 1.076-1.772 1.076-2.94v-16.218c0-1.168-.358-2.149-1.076-2.94-.717-.79-1.607-1.185-2.668-1.185zm22.482.14c-1.149 0-2.11.39-2.885 1.165-.78.78-1.172 1.744-1.172 2.893v15.943c0 1.149.388 2.11 1.163 2.885.78.78 1.745 1.172 2.894 1.172h7.649c1.148 0 2.11-.388 2.884-1.163.78-.78 1.17-1.745 1.17-2.894v-15.943c0-1.15-.386-2.111-1.16-2.885-.78-.78-1.746-1.172-2.894-1.172zm.553 4.518h6.545v14.93H25.59z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-5\">\n      <path d=\"M29.508 97l-2.431 2.43 4.625 4.625h-1.364c-2.965 0-5.742.554-8.332 1.66-2.589 1.107-4.851 2.629-6.788 4.566-1.937 1.937-3.458 4.2-4.565 6.788-1.107 2.59-1.66 5.367-1.66 8.331h3.557c0-4.957 1.68-9.16 5.04-12.611 3.36-3.45 7.51-5.177 12.451-5.177h1.304l-4.326 4.33 2.49 2.49 8.715-8.716zm-9.783 21.61v13.89h11.382v5.018H19.725V142h12.727a2.93 2.93 0 0 0 2.15-.896 2.93 2.93 0 0 0 .896-2.15v-7.798c0-.837-.299-1.554-.896-2.152a2.93 2.93 0 0 0-2.15-.896h-8.245V123h11.29v-4.392z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-10\">\n      <path d=\"M23.119 97l-2.386 2.383 4.538 4.538h-1.339c-2.908 0-5.633.543-8.173 1.63-2.54 1.085-4.76 2.577-6.66 4.478-1.9 1.9-3.392 4.12-4.478 6.66-1.085 2.54-1.629 5.264-1.629 8.172h3.49c0-4.863 1.648-8.986 4.944-12.372 3.297-3.385 7.368-5.078 12.216-5.078h1.279l-4.245 4.247 2.443 2.442 8.55-8.55zm-9.52 21.45v4.42h4.871V142h4.513v-23.55zm18.136 0c-1.125 0-2.066.377-2.824 1.135-.764.764-1.148 1.709-1.148 2.834v15.612c0 1.124.38 2.066 1.139 2.824.764.764 1.708 1.145 2.833 1.145h7.489c1.125 0 2.066-.378 2.824-1.136.764-.764 1.145-1.709 1.145-2.833v-15.612c0-1.125-.378-2.067-1.136-2.825-.764-.764-1.708-1.145-2.833-1.145zm.54 4.42h6.408v14.617h-6.407z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-30\">\n      <path d=\"M25.549 97l-2.437 2.434 4.634 4.635H26.38c-2.97 0-5.753.555-8.347 1.664-2.594 1.109-4.861 2.633-6.802 4.574-1.94 1.94-3.465 4.207-4.574 6.802-1.109 2.594-1.664 5.377-1.664 8.347h3.565c0-4.967 1.683-9.178 5.05-12.636 3.366-3.458 7.525-5.187 12.475-5.187h1.307l-4.335 4.338 2.495 2.494 8.732-8.732zm-11.553 20.53v4.689h10.297v5.249h-6.978v4.688h6.978v5.156H13.996V142h10.808c1.06 0 1.948-.395 2.666-1.186.718-.79 1.077-1.771 1.077-2.94v-16.217c0-1.169-.36-2.15-1.077-2.94-.718-.79-1.605-1.186-2.666-1.186zm21.174.168c-1.149 0-2.11.389-2.884 1.163-.78.78-1.172 1.745-1.172 2.894v15.942c0 1.15.388 2.11 1.162 2.885.78.78 1.745 1.17 2.894 1.17h7.649c1.149 0 2.11-.386 2.885-1.16.78-.78 1.17-1.746 1.17-2.895v-15.942c0-1.15-.387-2.11-1.161-2.885-.78-.78-1.745-1.172-2.894-1.172zm.552 4.516h6.542v14.931h-6.542z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 512 512\" id=\"vjs-icon-audio-description\">\n      <g fill-rule=\"evenodd\"><path d=\"M227.29 381.351V162.993c50.38-1.017 89.108-3.028 117.631 17.126 27.374 19.342 48.734 56.965 44.89 105.325-4.067 51.155-41.335 94.139-89.776 98.475-24.085 2.155-71.972 0-71.972 0s-.84-1.352-.773-2.568m48.755-54.804c31.43 1.26 53.208-16.633 56.495-45.386 4.403-38.51-21.188-63.552-58.041-60.796v103.612c-.036 1.466.575 2.22 1.546 2.57\"></path><path d=\"M383.78 381.328c13.336 3.71 17.387-11.06 23.215-21.408 12.722-22.571 22.294-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.226 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894\"></path><path d=\"M425.154 381.328c13.336 3.71 17.384-11.061 23.215-21.408 12.721-22.571 22.291-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.511c-.586 3.874 2.226 7.315 3.866 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894\"></path><path d=\"M466.26 381.328c13.337 3.71 17.385-11.061 23.216-21.408 12.722-22.571 22.292-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.225 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894M4.477 383.005H72.58l18.573-28.484 64.169-.135s.065 19.413.065 28.62h48.756V160.307h-58.816c-5.653 9.537-140.85 222.697-140.85 222.697zm152.667-145.282v71.158l-40.453-.27 40.453-70.888z\"></path></g>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-next-item\">\n      <path d=\"M12 36l17-12-17-12v24zm20-24v24h4V12h-4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-previous-item\">\n      <path d=\"M12 12h4v24h-4zm7 12l17 12V12z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-shuffle\">\n      <path d=\"M21.17 18.34L10.83 8 8 10.83l10.34 10.34 2.83-2.83zM29 8l4.09 4.09L8 37.17 10.83 40l25.09-25.09L40 19V8H29zm.66 18.83l-2.83 2.83 6.26 6.26L29 40h11V29l-4.09 4.09-6.25-6.26z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cast\">\n      <path d=\"M42 6H6c-2.21 0-4 1.79-4 4v6h4v-6h36v28H28v4h14c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4zM2 36v6h6c0-3.31-2.69-6-6-6zm0-8v4c5.52 0 10 4.48 10 10h4c0-7.73-6.27-14-14-14zm0-8v4c9.94 0 18 8.06 18 18h4c0-12.15-9.85-22-22-22z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-picture-in-picture-enter\">\n      <path d=\"M38 22H22v11.99h16V22zm8 16V9.96C46 7.76 44.2 6 42 6H6C3.8 6 2 7.76 2 9.96V38c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4zm-4 .04H6V9.94h36v28.1z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 22 18\" id=\"vjs-icon-picture-in-picture-exit\">\n      <path d=\"M18 4H4v10h14V4zm4 12V1.98C22 .88 21.1 0 20 0H2C.9 0 0 .88 0 1.98V16c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H2V1.97h18v14.05z\"></path>\n      <path fill=\"none\" d=\"M-1-3h24v24H-1z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-facebook\">\n      <path d=\"M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759H734V905H479V609h255V391q0-186 104-288.5T1115 0q147 0 228 12z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-linkedin\">\n      <path d=\"M477 625v991H147V625h330zm21-306q1 73-50.5 122T312 490h-2q-82 0-132-49t-50-122q0-74 51.5-122.5T314 148t133 48.5T498 319zm1166 729v568h-329v-530q0-105-40.5-164.5T1168 862q-63 0-105.5 34.5T999 982q-11 30-11 81v553H659q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5T1285 602q171 0 275 113.5t104 332.5z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-twitter\">\n      <path d=\"M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5T1369.5 1125 1185 1335.5t-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5T285 1033q33 5 61 5 43 0 85-11-112-23-185.5-111.5T172 710v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5T884 653q-8-38-8-74 0-134 94.5-228.5T1199 256q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-tumblr\">\n      <path d=\"M1328 1329l80 237q-23 35-111 66t-177 32q-104 2-190.5-26T787 1564t-95-106-55.5-120-16.5-118V676H452V461q72-26 129-69.5t91-90 58-102 34-99T779 12q1-5 4.5-8.5T791 0h244v424h333v252h-334v518q0 30 6.5 56t22.5 52.5 49.5 41.5 81.5 14q78-2 134-29z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-pinterest\">\n      <path d=\"M1664 896q0 209-103 385.5T1281.5 1561 896 1664q-111 0-218-32 59-93 78-164 9-34 54-211 20 39 73 67.5t114 28.5q121 0 216-68.5t147-188.5 52-270q0-114-59.5-214T1180 449t-255-63q-105 0-196 29t-154.5 77-109 110.5-67 129.5T377 866q0 104 40 183t117 111q30 12 38-20 2-7 8-31t8-30q6-23-11-43-51-61-51-151 0-151 104.5-259.5T904 517q151 0 235.5 82t84.5 213q0 170-68.5 289T980 1220q-61 0-98-43.5T859 1072q8-35 26.5-93.5t30-103T927 800q0-50-27-83t-77-33q-62 0-105 57t-43 142q0 73 25 122l-99 418q-17 70-13 177-206-91-333-281T128 896q0-209 103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z\"></path>\n    </symbol>\n  </defs>\n</svg>";
+
+  /**
+   * @file loader.js
+   */
+
+  /**
+   * The `MediaLoader` is the `Component` that decides which playback technology to load
+   * when a player is initialized.
+   *
+   * @extends Component
+   */
+  class MediaLoader extends Component$1 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should attach to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function that is run when this component is ready.
+     */
+    constructor(player, options, ready) {
+      // MediaLoader has no element
+      const options_ = merge$2({
+        createEl: false
+      }, options);
+      super(player, options_, ready);
+
+      // If there are no sources when the player is initialized,
+      // load the first supported playback technology.
+
+      if (!options.playerOptions.sources || options.playerOptions.sources.length === 0) {
+        for (let i = 0, j = options.playerOptions.techOrder; i < j.length; i++) {
+          const techName = toTitleCase$1(j[i]);
+          let tech = Tech.getTech(techName);
+
+          // Support old behavior of techs being registered as components.
+          // Remove once that deprecated behavior is removed.
+          if (!techName) {
+            tech = Component$1.getComponent(techName);
+          }
+
+          // Check if the browser supports this technology
+          if (tech && tech.isSupported()) {
+            player.loadTech_(techName);
+            break;
+          }
+        }
+      } else {
+        // Loop through playback technologies (e.g. HTML5) and check for support.
+        // Then load the best source.
+        // A few assumptions here:
+        //   All playback technologies respect preload false.
+        player.src(options.playerOptions.sources);
+      }
+    }
+  }
+  Component$1.registerComponent('MediaLoader', MediaLoader);
+
+  /**
+   * @file clickable-component.js
+   */
+
+  /**
+   * Component which is clickable or keyboard actionable, but is not a
+   * native HTML button.
+   *
+   * @extends Component
+   */
+  class ClickableComponent extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  { import('./player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of component options.
+     *
+     * @param  {function} [options.clickHandler]
+     *         The function to call when the button is clicked / activated
+     *
+     * @param  {string} [options.controlText]
+     *         The text to set on the button
+     *
+     * @param  {string} [options.className]
+     *         A class or space separated list of classes to add the component
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      if (this.options_.controlText) {
+        this.controlText(this.options_.controlText);
+      }
+      this.handleMouseOver_ = e => this.handleMouseOver(e);
+      this.handleMouseOut_ = e => this.handleMouseOut(e);
+      this.handleClick_ = e => this.handleClick(e);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.emitTapEvents();
+      this.enable();
+    }
+
+    /**
+     * Create the `ClickableComponent`s DOM element.
+     *
+     * @param {string} [tag=div]
+     *        The element's node type.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element.
+     *
+     * @param {Object} [attributes={}]
+     *        An object of attributes that should be set on the element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tag = 'div', props = {}, attributes = {}) {
+      props = Object.assign({
+        className: this.buildCSSClass(),
+        tabIndex: 0
+      }, props);
+      if (tag === 'button') {
+        log$1.error(`Creating a ClickableComponent with an HTML element of ${tag} is not supported; use a Button instead.`);
+      }
+
+      // Add ARIA attributes for clickable element which is not a native HTML button
+      attributes = Object.assign({
+        role: 'button'
+      }, attributes);
+      this.tabIndex_ = props.tabIndex;
+      const el = createEl(tag, props, attributes);
+      if (!this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+      }
+      this.createControlTextEl(el);
+      return el;
+    }
+    dispose() {
+      // remove controlTextEl_ on dispose
+      this.controlTextEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Create a control text element on this `ClickableComponent`
+     *
+     * @param {Element} [el]
+     *        Parent element for the control text.
+     *
+     * @return {Element}
+     *         The control text element that gets created.
+     */
+    createControlTextEl(el) {
+      this.controlTextEl_ = createEl('span', {
+        className: 'vjs-control-text'
+      }, {
+        // let the screen reader user know that the text of the element may change
+        'aria-live': 'polite'
+      });
+      if (el) {
+        el.appendChild(this.controlTextEl_);
+      }
+      this.controlText(this.controlText_, el);
+      return this.controlTextEl_;
+    }
+
+    /**
+     * Get or set the localize text to use for the controls on the `ClickableComponent`.
+     *
+     * @param {string} [text]
+     *        Control text for element.
+     *
+     * @param {Element} [el=this.el()]
+     *        Element to set the title on.
+     *
+     * @return {string}
+     *         - The control text when getting
+     */
+    controlText(text, el = this.el()) {
+      if (text === undefined) {
+        return this.controlText_ || 'Need Text';
+      }
+      const localizedText = this.localize(text);
+
+      /** @protected */
+      this.controlText_ = text;
+      textContent(this.controlTextEl_, localizedText);
+      if (!this.nonIconControl && !this.player_.options_.noUITitleAttributes) {
+        // Set title attribute if only an icon is shown
+        el.setAttribute('title', localizedText);
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-control vjs-button ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Enable this `ClickableComponent`
+     */
+    enable() {
+      if (!this.enabled_) {
+        this.enabled_ = true;
+        this.removeClass('vjs-disabled');
+        this.el_.setAttribute('aria-disabled', 'false');
+        if (typeof this.tabIndex_ !== 'undefined') {
+          this.el_.setAttribute('tabIndex', this.tabIndex_);
+        }
+        this.on(['tap', 'click'], this.handleClick_);
+        this.on('keydown', this.handleKeyDown_);
+      }
+    }
+
+    /**
+     * Disable this `ClickableComponent`
+     */
+    disable() {
+      this.enabled_ = false;
+      this.addClass('vjs-disabled');
+      this.el_.setAttribute('aria-disabled', 'true');
+      if (typeof this.tabIndex_ !== 'undefined') {
+        this.el_.removeAttribute('tabIndex');
+      }
+      this.off('mouseover', this.handleMouseOver_);
+      this.off('mouseout', this.handleMouseOut_);
+      this.off(['tap', 'click'], this.handleClick_);
+      this.off('keydown', this.handleKeyDown_);
+    }
+
+    /**
+     * Handles language change in ClickableComponent for the player in components
+     *
+     *
+     */
+    handleLanguagechange() {
+      this.controlText(this.controlText_);
+    }
+
+    /**
+     * Event handler that is called when a `ClickableComponent` receives a
+     * `click` or `tap` event.
+     *
+     * @param {Event} event
+     *        The `tap` or `click` event that caused this function to be called.
+     *
+     * @listens tap
+     * @listens click
+     * @abstract
+     */
+    handleClick(event) {
+      if (this.options_.clickHandler) {
+        this.options_.clickHandler.call(this, arguments);
+      }
+    }
+
+    /**
+     * Event handler that is called when a `ClickableComponent` receives a
+     * `keydown` event.
+     *
+     * By default, if the key is Space or Enter, it will trigger a `click` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Support Space or Enter key operation to fire a click event. Also,
+      // prevent the event from propagating through the DOM and triggering
+      // Player hotkeys.
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.trigger('click');
+      } else {
+        // Pass keypress handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+  }
+  Component$1.registerComponent('ClickableComponent', ClickableComponent);
+
+  /**
+   * @file poster-image.js
+   */
+
+  /**
+   * A `ClickableComponent` that handles showing the poster image for the player.
+   *
+   * @extends ClickableComponent
+   */
+  class PosterImage extends ClickableComponent {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should attach to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update();
+      this.update_ = e => this.update(e);
+      player.on('posterchange', this.update_);
+    }
+
+    /**
+     * Clean up and dispose of the `PosterImage`.
+     */
+    dispose() {
+      this.player().off('posterchange', this.update_);
+      super.dispose();
+    }
+
+    /**
+     * Create the `PosterImage`s DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      // The el is an empty div to keep position in the DOM
+      // A picture and img el will be inserted when a source is set
+      return createEl('div', {
+        className: 'vjs-poster'
+      });
+    }
+
+    /**
+     * Get or set the `PosterImage`'s crossOrigin option.
+     *
+     * @param {string|null} [value]
+     *        The value to set the crossOrigin to. If an argument is
+     *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+     *
+     * @return {string|null}
+     *         - The current crossOrigin value of the `Player` when getting.
+     *         - undefined when setting
+     */
+    crossOrigin(value) {
+      // `null` can be set to unset a value
+      if (typeof value === 'undefined') {
+        if (this.$('img')) {
+          // If the poster's element exists, give its value
+          return this.$('img').crossOrigin;
+        } else if (this.player_.tech_ && this.player_.tech_.isReady_) {
+          // If not but the tech is ready, query the tech
+          return this.player_.crossOrigin();
+        }
+        // Otherwise check options as the  poster is usually set before the state of crossorigin
+        // can be retrieved by the getter
+        return this.player_.options_.crossOrigin || this.player_.options_.crossorigin || null;
+      }
+      if (value !== null && value !== 'anonymous' && value !== 'use-credentials') {
+        this.player_.log.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${value}"`);
+        return;
+      }
+      if (this.$('img')) {
+        this.$('img').crossOrigin = value;
+      }
+      return;
+    }
+
+    /**
+     * An {@link EventTarget~EventListener} for {@link Player#posterchange} events.
+     *
+     * @listens Player#posterchange
+     *
+     * @param {Event} [event]
+     *        The `Player#posterchange` event that triggered this function.
+     */
+    update(event) {
+      const url = this.player().poster();
+      this.setSrc(url);
+
+      // If there's no poster source we should display:none on this component
+      // so it's not still clickable or right-clickable
+      if (url) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+
+    /**
+     * Set the source of the `PosterImage` depending on the display method. (Re)creates
+     * the inner picture and img elementss when needed.
+     *
+     * @param {string} [url]
+     *        The URL to the source for the `PosterImage`. If not specified or falsy,
+     *        any source and ant inner picture/img are removed.
+     */
+    setSrc(url) {
+      if (!url) {
+        this.el_.textContent = '';
+        return;
+      }
+      if (!this.$('img')) {
+        this.el_.appendChild(createEl('picture', {
+          className: 'vjs-poster',
+          // Don't want poster to be tabbable.
+          tabIndex: -1
+        }, {}, createEl('img', {
+          loading: 'lazy',
+          crossOrigin: this.crossOrigin()
+        }, {
+          alt: ''
+        })));
+      }
+      this.$('img').src = url;
+    }
+
+    /**
+     * An {@link EventTarget~EventListener} for clicks on the `PosterImage`. See
+     * {@link ClickableComponent#handleClick} for instances where this will be triggered.
+     *
+     * @listens tap
+     * @listens click
+     * @listens keydown
+     *
+     * @param {Event} event
+     +        The `click`, `tap` or `keydown` event that caused this function to be called.
+     */
+    handleClick(event) {
+      // We don't want a click to trigger playback when controls are disabled
+      if (!this.player_.controls()) {
+        return;
+      }
+      if (this.player_.tech(true)) {
+        this.player_.tech(true).focus();
+      }
+      if (this.player_.paused()) {
+        silencePromise(this.player_.play());
+      } else {
+        this.player_.pause();
+      }
+    }
+  }
+
+  /**
+   * Get or set the `PosterImage`'s crossorigin option. For the HTML5 player, this
+   * sets the `crossOrigin` property on the `<img>` tag to control the CORS
+   * behavior.
+   *
+   * @param {string|null} [value]
+   *        The value to set the `PosterImages`'s crossorigin to. If an argument is
+   *        given, must be one of `anonymous` or `use-credentials`.
+   *
+   * @return {string|null|undefined}
+   *         - The current crossorigin value of the `Player` when getting.
+   *         - undefined when setting
+   */
+  PosterImage.prototype.crossorigin = PosterImage.prototype.crossOrigin;
+  Component$1.registerComponent('PosterImage', PosterImage);
+
+  /**
+   * @file text-track-display.js
+   */
+  const darkGray = '#222';
+  const lightGray = '#ccc';
+  const fontMap = {
+    monospace: 'monospace',
+    sansSerif: 'sans-serif',
+    serif: 'serif',
+    monospaceSansSerif: '"Andale Mono", "Lucida Console", monospace',
+    monospaceSerif: '"Courier New", monospace',
+    proportionalSansSerif: 'sans-serif',
+    proportionalSerif: 'serif',
+    casual: '"Comic Sans MS", Impact, fantasy',
+    script: '"Monotype Corsiva", cursive',
+    smallcaps: '"Andale Mono", "Lucida Console", monospace, sans-serif'
+  };
+
+  /**
+   * Construct an rgba color from a given hex color code.
+   *
+   * @param {number} color
+   *        Hex number for color, like #f0e or #f604e2.
+   *
+   * @param {number} opacity
+   *        Value for opacity, 0.0 - 1.0.
+   *
+   * @return {string}
+   *         The rgba color that was created, like 'rgba(255, 0, 0, 0.3)'.
+   */
+  function constructColor(color, opacity) {
+    let hex;
+    if (color.length === 4) {
+      // color looks like "#f0e"
+      hex = color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+    } else if (color.length === 7) {
+      // color looks like "#f604e2"
+      hex = color.slice(1);
+    } else {
+      throw new Error('Invalid color code provided, ' + color + '; must be formatted as e.g. #f0e or #f604e2.');
+    }
+    return 'rgba(' + parseInt(hex.slice(0, 2), 16) + ',' + parseInt(hex.slice(2, 4), 16) + ',' + parseInt(hex.slice(4, 6), 16) + ',' + opacity + ')';
+  }
+
+  /**
+   * Try to update the style of a DOM element. Some style changes will throw an error,
+   * particularly in IE8. Those should be noops.
+   *
+   * @param {Element} el
+   *        The DOM element to be styled.
+   *
+   * @param {string} style
+   *        The CSS property on the element that should be styled.
+   *
+   * @param {string} rule
+   *        The style rule that should be applied to the property.
+   *
+   * @private
+   */
+  function tryUpdateStyle(el, style, rule) {
+    try {
+      el.style[style] = rule;
+    } catch (e) {
+      // Satisfies linter.
+      return;
+    }
+  }
+
+  /**
+   * Converts the CSS top/right/bottom/left property numeric value to string in pixels.
+   *
+   * @param {number} position
+   *        The CSS top/right/bottom/left property value.
+   *
+   * @return {string}
+   *          The CSS property value that was created, like '10px'.
+   *
+   * @private
+   */
+  function getCSSPositionValue(position) {
+    return position ? `${position}px` : '';
+  }
+
+  /**
+   * The component for displaying text track cues.
+   *
+   * @extends Component
+   */
+  class TextTrackDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when `TextTrackDisplay` is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      const updateDisplayTextHandler = e => this.updateDisplay(e);
+      const updateDisplayHandler = e => {
+        this.updateDisplayOverlay();
+        this.updateDisplay(e);
+      };
+      player.on('loadstart', e => this.toggleDisplay(e));
+      player.on('texttrackchange', updateDisplayTextHandler);
+      player.on('loadedmetadata', e => {
+        this.updateDisplayOverlay();
+        this.preselectTrack(e);
+      });
+
+      // This used to be called during player init, but was causing an error
+      // if a track should show by default and the display hadn't loaded yet.
+      // Should probably be moved to an external track loader when we support
+      // tracks that don't need a display.
+      player.ready(bind_(this, function () {
+        if (player.tech_ && player.tech_.featuresNativeTextTracks) {
+          this.hide();
+          return;
+        }
+        player.on('fullscreenchange', updateDisplayHandler);
+        player.on('playerresize', updateDisplayHandler);
+        const screenOrientation = window.screen.orientation || window;
+        const changeOrientationEvent = window.screen.orientation ? 'change' : 'orientationchange';
+        screenOrientation.addEventListener(changeOrientationEvent, updateDisplayHandler);
+        player.on('dispose', () => screenOrientation.removeEventListener(changeOrientationEvent, updateDisplayHandler));
+        const tracks = this.options_.playerOptions.tracks || [];
+        for (let i = 0; i < tracks.length; i++) {
+          this.player_.addRemoteTextTrack(tracks[i], true);
+        }
+        this.preselectTrack();
+      }));
+    }
+
+    /**
+    * Preselect a track following this precedence:
+    * - matches the previously selected {@link TextTrack}'s language and kind
+    * - matches the previously selected {@link TextTrack}'s language only
+    * - is the first default captions track
+    * - is the first default descriptions track
+    *
+    * @listens Player#loadstart
+    */
+    preselectTrack() {
+      const modes = {
+        captions: 1,
+        subtitles: 1
+      };
+      const trackList = this.player_.textTracks();
+      const userPref = this.player_.cache_.selectedLanguage;
+      let firstDesc;
+      let firstCaptions;
+      let preferredTrack;
+      for (let i = 0; i < trackList.length; i++) {
+        const track = trackList[i];
+        if (userPref && userPref.enabled && userPref.language && userPref.language === track.language && track.kind in modes) {
+          // Always choose the track that matches both language and kind
+          if (track.kind === userPref.kind) {
+            preferredTrack = track;
+            // or choose the first track that matches language
+          } else if (!preferredTrack) {
+            preferredTrack = track;
+          }
+
+          // clear everything if offTextTrackMenuItem was clicked
+        } else if (userPref && !userPref.enabled) {
+          preferredTrack = null;
+          firstDesc = null;
+          firstCaptions = null;
+        } else if (track.default) {
+          if (track.kind === 'descriptions' && !firstDesc) {
+            firstDesc = track;
+          } else if (track.kind in modes && !firstCaptions) {
+            firstCaptions = track;
+          }
+        }
+      }
+
+      // The preferredTrack matches the user preference and takes
+      // precedence over all the other tracks.
+      // So, display the preferredTrack before the first default track
+      // and the subtitles/captions track before the descriptions track
+      if (preferredTrack) {
+        preferredTrack.mode = 'showing';
+      } else if (firstCaptions) {
+        firstCaptions.mode = 'showing';
+      } else if (firstDesc) {
+        firstDesc.mode = 'showing';
+      }
+    }
+
+    /**
+     * Turn display of {@link TextTrack}'s from the current state into the other state.
+     * There are only two states:
+     * - 'shown'
+     * - 'hidden'
+     *
+     * @listens Player#loadstart
+     */
+    toggleDisplay() {
+      if (this.player_.tech_ && this.player_.tech_.featuresNativeTextTracks) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+
+    /**
+     * Create the {@link Component}'s DOM element.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-text-track-display'
+      }, {
+        'translate': 'yes',
+        'aria-live': 'off',
+        'aria-atomic': 'true'
+      });
+    }
+
+    /**
+     * Clear all displayed {@link TextTrack}s.
+     */
+    clearDisplay() {
+      if (typeof window.WebVTT === 'function') {
+        window.WebVTT.processCues(window, [], this.el_);
+      }
+    }
+
+    /**
+     * Update the displayed TextTrack when a either a {@link Player#texttrackchange} or
+     * a {@link Player#fullscreenchange} is fired.
+     *
+     * @listens Player#texttrackchange
+     * @listens Player#fullscreenchange
+     */
+    updateDisplay() {
+      const tracks = this.player_.textTracks();
+      const allowMultipleShowingTracks = this.options_.allowMultipleShowingTracks;
+      this.clearDisplay();
+      if (allowMultipleShowingTracks) {
+        const showingTracks = [];
+        for (let i = 0; i < tracks.length; ++i) {
+          const track = tracks[i];
+          if (track.mode !== 'showing') {
+            continue;
+          }
+          showingTracks.push(track);
+        }
+        this.updateForTrack(showingTracks);
+        return;
+      }
+
+      //  Track display prioritization model: if multiple tracks are 'showing',
+      //  display the first 'subtitles' or 'captions' track which is 'showing',
+      //  otherwise display the first 'descriptions' track which is 'showing'
+
+      let descriptionsTrack = null;
+      let captionsSubtitlesTrack = null;
+      let i = tracks.length;
+      while (i--) {
+        const track = tracks[i];
+        if (track.mode === 'showing') {
+          if (track.kind === 'descriptions') {
+            descriptionsTrack = track;
+          } else {
+            captionsSubtitlesTrack = track;
+          }
+        }
+      }
+      if (captionsSubtitlesTrack) {
+        if (this.getAttribute('aria-live') !== 'off') {
+          this.setAttribute('aria-live', 'off');
+        }
+        this.updateForTrack(captionsSubtitlesTrack);
+      } else if (descriptionsTrack) {
+        if (this.getAttribute('aria-live') !== 'assertive') {
+          this.setAttribute('aria-live', 'assertive');
+        }
+        this.updateForTrack(descriptionsTrack);
+      }
+    }
+
+    /**
+     * Updates the displayed TextTrack to be sure it overlays the video when a either
+     * a {@link Player#texttrackchange} or a {@link Player#fullscreenchange} is fired.
+     */
+    updateDisplayOverlay() {
+      // inset-inline and inset-block are not supprted on old chrome, but these are
+      // only likely to be used on TV devices
+      if (!this.player_.videoHeight() || !window.CSS.supports('inset-inline: 10px')) {
+        return;
+      }
+      const playerWidth = this.player_.currentWidth();
+      const playerHeight = this.player_.currentHeight();
+      const playerAspectRatio = playerWidth / playerHeight;
+      const videoAspectRatio = this.player_.videoWidth() / this.player_.videoHeight();
+      let insetInlineMatch = 0;
+      let insetBlockMatch = 0;
+      if (Math.abs(playerAspectRatio - videoAspectRatio) > 0.1) {
+        if (playerAspectRatio > videoAspectRatio) {
+          insetInlineMatch = Math.round((playerWidth - playerHeight * videoAspectRatio) / 2);
+        } else {
+          insetBlockMatch = Math.round((playerHeight - playerWidth / videoAspectRatio) / 2);
+        }
+      }
+      tryUpdateStyle(this.el_, 'insetInline', getCSSPositionValue(insetInlineMatch));
+      tryUpdateStyle(this.el_, 'insetBlock', getCSSPositionValue(insetBlockMatch));
+    }
+
+    /**
+     * Style {@Link TextTrack} activeCues according to {@Link TextTrackSettings}.
+     *
+     * @param {TextTrack} track
+     *        Text track object containing active cues to style.
+     */
+    updateDisplayState(track) {
+      const overrides = this.player_.textTrackSettings.getValues();
+      const cues = track.activeCues;
+      let i = cues.length;
+      while (i--) {
+        const cue = cues[i];
+        if (!cue) {
+          continue;
+        }
+        const cueDiv = cue.displayState;
+        if (overrides.color) {
+          cueDiv.firstChild.style.color = overrides.color;
+        }
+        if (overrides.textOpacity) {
+          tryUpdateStyle(cueDiv.firstChild, 'color', constructColor(overrides.color || '#fff', overrides.textOpacity));
+        }
+        if (overrides.backgroundColor) {
+          cueDiv.firstChild.style.backgroundColor = overrides.backgroundColor;
+        }
+        if (overrides.backgroundOpacity) {
+          tryUpdateStyle(cueDiv.firstChild, 'backgroundColor', constructColor(overrides.backgroundColor || '#000', overrides.backgroundOpacity));
+        }
+        if (overrides.windowColor) {
+          if (overrides.windowOpacity) {
+            tryUpdateStyle(cueDiv, 'backgroundColor', constructColor(overrides.windowColor, overrides.windowOpacity));
+          } else {
+            cueDiv.style.backgroundColor = overrides.windowColor;
+          }
+        }
+        if (overrides.edgeStyle) {
+          if (overrides.edgeStyle === 'dropshadow') {
+            cueDiv.firstChild.style.textShadow = `2px 2px 3px ${darkGray}, 2px 2px 4px ${darkGray}, 2px 2px 5px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'raised') {
+            cueDiv.firstChild.style.textShadow = `1px 1px ${darkGray}, 2px 2px ${darkGray}, 3px 3px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'depressed') {
+            cueDiv.firstChild.style.textShadow = `1px 1px ${lightGray}, 0 1px ${lightGray}, -1px -1px ${darkGray}, 0 -1px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'uniform') {
+            cueDiv.firstChild.style.textShadow = `0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}`;
+          }
+        }
+        if (overrides.fontPercent && overrides.fontPercent !== 1) {
+          const fontSize = window.parseFloat(cueDiv.style.fontSize);
+          cueDiv.style.fontSize = fontSize * overrides.fontPercent + 'px';
+          cueDiv.style.height = 'auto';
+          cueDiv.style.top = 'auto';
+        }
+        if (overrides.fontFamily && overrides.fontFamily !== 'default') {
+          if (overrides.fontFamily === 'small-caps') {
+            cueDiv.firstChild.style.fontVariant = 'small-caps';
+          } else {
+            cueDiv.firstChild.style.fontFamily = fontMap[overrides.fontFamily];
+          }
+        }
+      }
+    }
+
+    /**
+     * Add an {@link TextTrack} to to the {@link Tech}s {@link TextTrackList}.
+     *
+     * @param {TextTrack|TextTrack[]} tracks
+     *        Text track object or text track array to be added to the list.
+     */
+    updateForTrack(tracks) {
+      if (!Array.isArray(tracks)) {
+        tracks = [tracks];
+      }
+      if (typeof window.WebVTT !== 'function' || tracks.every(track => {
+        return !track.activeCues;
+      })) {
+        return;
+      }
+      const cues = [];
+
+      // push all active track cues
+      for (let i = 0; i < tracks.length; ++i) {
+        const track = tracks[i];
+        for (let j = 0; j < track.activeCues.length; ++j) {
+          cues.push(track.activeCues[j]);
+        }
+      }
+
+      // removes all cues before it processes new ones
+      window.WebVTT.processCues(window, cues, this.el_);
+
+      // add unique class to each language text track & add settings styling if necessary
+      for (let i = 0; i < tracks.length; ++i) {
+        const track = tracks[i];
+        for (let j = 0; j < track.activeCues.length; ++j) {
+          const cueEl = track.activeCues[j].displayState;
+          addClass(cueEl, 'vjs-text-track-cue', 'vjs-text-track-cue-' + (track.language ? track.language : i));
+          if (track.language) {
+            setAttribute(cueEl, 'lang', track.language);
+          }
+        }
+        if (this.player_.textTrackSettings) {
+          this.updateDisplayState(track);
+        }
+      }
+    }
+  }
+  Component$1.registerComponent('TextTrackDisplay', TextTrackDisplay);
+
+  /**
+   * @file loading-spinner.js
+   */
+
+  /**
+   * A loading spinner for use during waiting/loading events.
+   *
+   * @extends Component
+   */
+  class LoadingSpinner extends Component$1 {
+    /**
+     * Create the `LoadingSpinner`s DOM element.
+     *
+     * @return {Element}
+     *         The dom element that gets created.
+     */
+    createEl() {
+      const isAudio = this.player_.isAudio();
+      const playerType = this.localize(isAudio ? 'Audio Player' : 'Video Player');
+      const controlText = createEl('span', {
+        className: 'vjs-control-text',
+        textContent: this.localize('{1} is loading.', [playerType])
+      });
+      const el = super.createEl('div', {
+        className: 'vjs-loading-spinner',
+        dir: 'ltr'
+      });
+      el.appendChild(controlText);
+      return el;
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-control-text').textContent = this.localize('{1} is loading.', [this.player_.isAudio() ? 'Audio Player' : 'Video Player']);
+    }
+  }
+  Component$1.registerComponent('LoadingSpinner', LoadingSpinner);
+
+  /**
+   * @file button.js
+   */
+
+  /**
+   * Base class for all buttons.
+   *
+   * @extends ClickableComponent
+   */
+  class Button extends ClickableComponent {
+    /**
+     * Create the `Button`s DOM element.
+     *
+     * @param {string} [tag="button"]
+     *        The element's node type. This argument is IGNORED: no matter what
+     *        is passed, it will always create a `button` element.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element.
+     *
+     * @param {Object} [attributes={}]
+     *        An object of attributes that should be set on the element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tag, props = {}, attributes = {}) {
+      tag = 'button';
+      props = Object.assign({
+        className: this.buildCSSClass()
+      }, props);
+
+      // Add attributes for button element
+      attributes = Object.assign({
+        // Necessary since the default button type is "submit"
+        type: 'button'
+      }, attributes);
+      const el = createEl(tag, props, attributes);
+      if (!this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+      }
+      this.createControlTextEl(el);
+      return el;
+    }
+
+    /**
+     * Add a child `Component` inside of this `Button`.
+     *
+     * @param {string|Component} child
+     *        The name or instance of a child to add.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of options that will get passed to children of
+     *        the child.
+     *
+     * @return {Component}
+     *         The `Component` that gets added as a child. When using a string the
+     *         `Component` will get created by this process.
+     *
+     * @deprecated since version 5
+     */
+    addChild(child, options = {}) {
+      const className = this.constructor.name;
+      log$1.warn(`Adding an actionable (user controllable) child to a Button (${className}) is not supported; use a ClickableComponent instead.`);
+
+      // Avoid the error message generated by ClickableComponent's addChild method
+      return Component$1.prototype.addChild.call(this, child, options);
+    }
+
+    /**
+     * Enable the `Button` element so that it can be activated or clicked. Use this with
+     * {@link Button#disable}.
+     */
+    enable() {
+      super.enable();
+      this.el_.removeAttribute('disabled');
+    }
+
+    /**
+     * Disable the `Button` element so that it cannot be activated or clicked. Use this with
+     * {@link Button#enable}.
+     */
+    disable() {
+      super.disable();
+      this.el_.setAttribute('disabled', 'disabled');
+    }
+
+    /**
+     * This gets called when a `Button` has focus and `keydown` is triggered via a key
+     * press.
+     *
+     * @param {KeyboardEvent} event
+     *        The event that caused this function to get called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Ignore Space or Enter key operation, which is handled by the browser for
+      // a button - though not for its super class, ClickableComponent. Also,
+      // prevent the event from propagating through the DOM and triggering Player
+      // hotkeys. We do not preventDefault here because we _want_ the browser to
+      // handle it.
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.stopPropagation();
+        return;
+      }
+
+      // Pass keypress handling up for unsupported keys
+      super.handleKeyDown(event);
+    }
+  }
+  Component$1.registerComponent('Button', Button);
+
+  /**
+   * @file big-play-button.js
+   */
+
+  /**
+   * The initial play button that shows before the video has played. The hiding of the
+   * `BigPlayButton` get done via CSS and `Player` states.
+   *
+   * @extends Button
+   */
+  class BigPlayButton extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.mouseused_ = false;
+      this.setIcon('play');
+      this.on('mousedown', e => this.handleMouseDown(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object. Always returns 'vjs-big-play-button'.
+     */
+    buildCSSClass() {
+      return 'vjs-big-play-button';
+    }
+
+    /**
+     * This gets called when a `BigPlayButton` "clicked". See {@link ClickableComponent}
+     * for more detailed information on what a click can be.
+     *
+     * @param {KeyboardEvent|MouseEvent|TouchEvent} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const playPromise = this.player_.play();
+
+      // exit early if clicked via the mouse
+      if (this.mouseused_ && 'clientX' in event && 'clientY' in event) {
+        silencePromise(playPromise);
+        if (this.player_.tech(true)) {
+          this.player_.tech(true).focus();
+        }
+        return;
+      }
+      const cb = this.player_.getChild('controlBar');
+      const playToggle = cb && cb.getChild('playToggle');
+      if (!playToggle) {
+        this.player_.tech(true).focus();
+        return;
+      }
+      const playFocus = () => playToggle.focus();
+      if (isPromise(playPromise)) {
+        playPromise.then(playFocus, () => {});
+      } else {
+        this.setTimeout(playFocus, 1);
+      }
+    }
+
+    /**
+     * Event handler that is called when a `BigPlayButton` receives a
+     * `keydown` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      this.mouseused_ = false;
+      super.handleKeyDown(event);
+    }
+
+    /**
+     * Handle `mousedown` events on the `BigPlayButton`.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      this.mouseused_ = true;
+    }
+  }
+
+  /**
+   * The text that should display over the `BigPlayButton`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  BigPlayButton.prototype.controlText_ = 'Play Video';
+  Component$1.registerComponent('BigPlayButton', BigPlayButton);
+
+  /**
+   * @file close-button.js
+   */
+
+  /**
+   * The `CloseButton` is a `{@link Button}` that fires a `close` event when
+   * it gets clicked.
+   *
+   * @extends Button
+   */
+  class CloseButton extends Button {
+    /**
+    * Creates an instance of the this class.
+    *
+    * @param  { import('./player').default } player
+    *         The `Player` that this class should be attached to.
+    *
+    * @param  {Object} [options]
+    *         The key/value store of player options.
+    */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('cancel');
+      this.controlText(options && options.controlText || this.localize('Close'));
+    }
+
+    /**
+    * Builds the default DOM `className`.
+    *
+    * @return {string}
+    *         The DOM `className` for this object.
+    */
+    buildCSSClass() {
+      return `vjs-close-button ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when a `CloseButton` gets clicked. See
+     * {@link ClickableComponent#handleClick} for more information on when
+     * this will be triggered
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     * @fires CloseButton#close
+     */
+    handleClick(event) {
+      /**
+       * Triggered when the a `CloseButton` is clicked.
+       *
+       * @event CloseButton#close
+       * @type {Event}
+       *
+       * @property {boolean} [bubbles=false]
+       *           set to false so that the close event does not
+       *           bubble up to parents if there is no listener
+       */
+      this.trigger({
+        type: 'close',
+        bubbles: false
+      });
+    }
+    /**
+     * Event handler that is called when a `CloseButton` receives a
+     * `keydown` event.
+     *
+     * By default, if the key is Esc, it will trigger a `click` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Esc button will trigger `click` event
+      if (keycode.isEventKey(event, 'Esc')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.trigger('click');
+      } else {
+        // Pass keypress handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+  }
+  Component$1.registerComponent('CloseButton', CloseButton);
+
+  /**
+   * @file play-toggle.js
+   */
+
+  /**
+   * Button to toggle between play and pause.
+   *
+   * @extends Button
+   */
+  class PlayToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+
+      // show or hide replay icon
+      options.replay = options.replay === undefined || options.replay;
+      this.setIcon('play');
+      this.on(player, 'play', e => this.handlePlay(e));
+      this.on(player, 'pause', e => this.handlePause(e));
+      if (options.replay) {
+        this.on(player, 'ended', e => this.handleEnded(e));
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-play-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when an `PlayToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (this.player_.paused()) {
+        silencePromise(this.player_.play());
+      } else {
+        this.player_.pause();
+      }
+    }
+
+    /**
+     * This gets called once after the video has ended and the user seeks so that
+     * we can change the replay button back to a play button.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#seeked
+     */
+    handleSeeked(event) {
+      this.removeClass('vjs-ended');
+      if (this.player_.paused()) {
+        this.handlePause(event);
+      } else {
+        this.handlePlay(event);
+      }
+    }
+
+    /**
+     * Add the vjs-playing class to the element so it can change appearance.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#play
+     */
+    handlePlay(event) {
+      this.removeClass('vjs-ended', 'vjs-paused');
+      this.addClass('vjs-playing');
+      // change the button text to "Pause"
+      this.setIcon('pause');
+      this.controlText('Pause');
+    }
+
+    /**
+     * Add the vjs-paused class to the element so it can change appearance.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#pause
+     */
+    handlePause(event) {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      // change the button text to "Play"
+      this.setIcon('play');
+      this.controlText('Play');
+    }
+
+    /**
+     * Add the vjs-ended class to the element so it can change appearance
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#ended
+     */
+    handleEnded(event) {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-ended');
+      // change the button text to "Replay"
+      this.setIcon('replay');
+      this.controlText('Replay');
+
+      // on the next seek remove the replay button
+      this.one(this.player_, 'seeked', e => this.handleSeeked(e));
+    }
+  }
+
+  /**
+   * The text that should display over the `PlayToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PlayToggle.prototype.controlText_ = 'Play';
+  Component$1.registerComponent('PlayToggle', PlayToggle);
+
+  /**
+   * @file time-display.js
+   */
+
+  /**
+   * Displays time information about the video
+   *
+   * @extends Component
+   */
+  class TimeDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, ['timeupdate', 'ended', 'seeking'], e => this.update(e));
+      this.updateTextNode_();
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const className = this.buildCSSClass();
+      const el = super.createEl('div', {
+        className: `${className} vjs-time-control vjs-control`
+      });
+      const span = createEl('span', {
+        className: 'vjs-control-text',
+        textContent: `${this.localize(this.labelText_)}\u00a0`
+      }, {
+        role: 'presentation'
+      });
+      el.appendChild(span);
+      this.contentEl_ = createEl('span', {
+        className: `${className}-display`
+      }, {
+        // span elements have no implicit role, but some screen readers (notably VoiceOver)
+        // treat them as a break between items in the DOM when using arrow keys
+        // (or left-to-right swipes on iOS) to read contents of a page. Using
+        // role='presentation' causes VoiceOver to NOT treat this span as a break.
+        role: 'presentation'
+      });
+      el.appendChild(this.contentEl_);
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.textNode_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Updates the displayed time according to the `updateContent` function which is defined in the child class.
+     *
+     * @param {Event} [event]
+     *          The `timeupdate`, `ended` or `seeking` (if enableSmoothSeeking is true) event that caused this function to be called.
+     */
+    update(event) {
+      if (!this.player_.options_.enableSmoothSeeking && event.type === 'seeking') {
+        return;
+      }
+      this.updateContent(event);
+    }
+
+    /**
+     * Updates the time display text node with a new time
+     *
+     * @param {number} [time=0] the time to update to
+     *
+     * @private
+     */
+    updateTextNode_(time = 0) {
+      time = formatTime(time);
+      if (this.formattedTime_ === time) {
+        return;
+      }
+      this.formattedTime_ = time;
+      this.requestNamedAnimationFrame('TimeDisplay#updateTextNode_', () => {
+        if (!this.contentEl_) {
+          return;
+        }
+        let oldNode = this.textNode_;
+        if (oldNode && this.contentEl_.firstChild !== oldNode) {
+          oldNode = null;
+          log$1.warn('TimeDisplay#updateTextnode_: Prevented replacement of text node element since it was no longer a child of this node. Appending a new node instead.');
+        }
+        this.textNode_ = document.createTextNode(this.formattedTime_);
+        if (!this.textNode_) {
+          return;
+        }
+        if (oldNode) {
+          this.contentEl_.replaceChild(this.textNode_, oldNode);
+        } else {
+          this.contentEl_.appendChild(this.textNode_);
+        }
+      });
+    }
+
+    /**
+     * To be filled out in the child class, should update the displayed time
+     * in accordance with the fact that the current time has changed.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate`  event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     */
+    updateContent(event) {}
+  }
+
+  /**
+   * The text that is added to the `TimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  TimeDisplay.prototype.labelText_ = 'Time';
+
+  /**
+   * The text that should display over the `TimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  TimeDisplay.prototype.controlText_ = 'Time';
+  Component$1.registerComponent('TimeDisplay', TimeDisplay);
+
+  /**
+   * @file current-time-display.js
+   */
+
+  /**
+   * Displays the current time
+   *
+   * @extends Component
+   */
+  class CurrentTimeDisplay extends TimeDisplay {
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-current-time';
+    }
+
+    /**
+     * Update current time display
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` event that caused this function to run.
+     *
+     * @listens Player#timeupdate
+     */
+    updateContent(event) {
+      // Allows for smooth scrubbing, when player can't keep up.
+      let time;
+      if (this.player_.ended()) {
+        time = this.player_.duration();
+      } else {
+        time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+      }
+      this.updateTextNode_(time);
+    }
+  }
+
+  /**
+   * The text that is added to the `CurrentTimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  CurrentTimeDisplay.prototype.labelText_ = 'Current Time';
+
+  /**
+   * The text that should display over the `CurrentTimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  CurrentTimeDisplay.prototype.controlText_ = 'Current Time';
+  Component$1.registerComponent('CurrentTimeDisplay', CurrentTimeDisplay);
+
+  /**
+   * @file duration-display.js
+   */
+
+  /**
+   * Displays the duration
+   *
+   * @extends Component
+   */
+  class DurationDisplay extends TimeDisplay {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      const updateContent = e => this.updateContent(e);
+
+      // we do not want to/need to throttle duration changes,
+      // as they should always display the changed duration as
+      // it has changed
+      this.on(player, 'durationchange', updateContent);
+
+      // Listen to loadstart because the player duration is reset when a new media element is loaded,
+      // but the durationchange on the user agent will not fire.
+      // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
+      this.on(player, 'loadstart', updateContent);
+
+      // Also listen for timeupdate (in the parent) and loadedmetadata because removing those
+      // listeners could have broken dependent applications/libraries. These
+      // can likely be removed for 7.0.
+      this.on(player, 'loadedmetadata', updateContent);
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-duration';
+    }
+
+    /**
+     * Update duration time display.
+     *
+     * @param {Event} [event]
+     *        The `durationchange`, `timeupdate`, or `loadedmetadata` event that caused
+     *        this function to be called.
+     *
+     * @listens Player#durationchange
+     * @listens Player#timeupdate
+     * @listens Player#loadedmetadata
+     */
+    updateContent(event) {
+      const duration = this.player_.duration();
+      this.updateTextNode_(duration);
+    }
+  }
+
+  /**
+   * The text that is added to the `DurationDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  DurationDisplay.prototype.labelText_ = 'Duration';
+
+  /**
+   * The text that should display over the `DurationDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  DurationDisplay.prototype.controlText_ = 'Duration';
+  Component$1.registerComponent('DurationDisplay', DurationDisplay);
+
+  /**
+   * @file time-divider.js
+   */
+
+  /**
+   * The separator between the current time and duration.
+   * Can be hidden if it's not needed in the design.
+   *
+   * @extends Component
+   */
+  class TimeDivider extends Component$1 {
+    /**
+     * Create the component's DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-time-control vjs-time-divider'
+      }, {
+        // this element and its contents can be hidden from assistive techs since
+        // it is made extraneous by the announcement of the control text
+        // for the current time and duration displays
+        'aria-hidden': true
+      });
+      const div = super.createEl('div');
+      const span = super.createEl('span', {
+        textContent: '/'
+      });
+      div.appendChild(span);
+      el.appendChild(div);
+      return el;
+    }
+  }
+  Component$1.registerComponent('TimeDivider', TimeDivider);
+
+  /**
+   * @file remaining-time-display.js
+   */
+
+  /**
+   * Displays the time left in the video
+   *
+   * @extends Component
+   */
+  class RemainingTimeDisplay extends TimeDisplay {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, 'durationchange', e => this.updateContent(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-remaining-time';
+    }
+
+    /**
+     * Create the `Component`'s DOM element with the "minus" character prepend to the time
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl();
+      if (this.options_.displayNegative !== false) {
+        el.insertBefore(createEl('span', {}, {
+          'aria-hidden': true
+        }, '-'), this.contentEl_);
+      }
+      return el;
+    }
+
+    /**
+     * Update remaining time display.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` or `durationchange` event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     * @listens Player#durationchange
+     */
+    updateContent(event) {
+      if (typeof this.player_.duration() !== 'number') {
+        return;
+      }
+      let time;
+
+      // @deprecated We should only use remainingTimeDisplay
+      // as of video.js 7
+      if (this.player_.ended()) {
+        time = 0;
+      } else if (this.player_.remainingTimeDisplay) {
+        time = this.player_.remainingTimeDisplay();
+      } else {
+        time = this.player_.remainingTime();
+      }
+      this.updateTextNode_(time);
+    }
+  }
+
+  /**
+   * The text that is added to the `RemainingTimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  RemainingTimeDisplay.prototype.labelText_ = 'Remaining Time';
+
+  /**
+   * The text that should display over the `RemainingTimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  RemainingTimeDisplay.prototype.controlText_ = 'Remaining Time';
+  Component$1.registerComponent('RemainingTimeDisplay', RemainingTimeDisplay);
+
+  /**
+   * @file live-display.js
+   */
+
+  // TODO - Future make it click to snap to live
+
+  /**
+   * Displays the live indicator when duration is Infinity.
+   *
+   * @extends Component
+   */
+  class LiveDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.updateShowing();
+      this.on(this.player(), 'durationchange', e => this.updateShowing(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-live-control vjs-control'
+      });
+      this.contentEl_ = createEl('div', {
+        className: 'vjs-live-display'
+      }, {
+        'aria-live': 'off'
+      });
+      this.contentEl_.appendChild(createEl('span', {
+        className: 'vjs-control-text',
+        textContent: `${this.localize('Stream Type')}\u00a0`
+      }));
+      this.contentEl_.appendChild(document.createTextNode(this.localize('LIVE')));
+      el.appendChild(this.contentEl_);
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Check the duration to see if the LiveDisplay should be showing or not. Then show/hide
+     * it accordingly
+     *
+     * @param {Event} [event]
+     *        The {@link Player#durationchange} event that caused this function to run.
+     *
+     * @listens Player#durationchange
+     */
+    updateShowing(event) {
+      if (this.player().duration() === Infinity) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }
+  Component$1.registerComponent('LiveDisplay', LiveDisplay);
+
+  /**
+   * @file seek-to-live.js
+   */
+
+  /**
+   * Displays the live indicator when duration is Infinity.
+   *
+   * @extends Component
+   */
+  class SeekToLive extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.updateLiveEdgeStatus();
+      if (this.player_.liveTracker) {
+        this.updateLiveEdgeStatusHandler_ = e => this.updateLiveEdgeStatus(e);
+        this.on(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
+      }
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('button', {
+        className: 'vjs-seek-to-live-control vjs-control'
+      });
+      this.setIcon('circle', el);
+      this.textEl_ = createEl('span', {
+        className: 'vjs-seek-to-live-text',
+        textContent: this.localize('LIVE')
+      }, {
+        'aria-hidden': 'true'
+      });
+      el.appendChild(this.textEl_);
+      return el;
+    }
+
+    /**
+     * Update the state of this button if we are at the live edge
+     * or not
+     */
+    updateLiveEdgeStatus() {
+      // default to live edge
+      if (!this.player_.liveTracker || this.player_.liveTracker.atLiveEdge()) {
+        this.setAttribute('aria-disabled', true);
+        this.addClass('vjs-at-live-edge');
+        this.controlText('Seek to live, currently playing live');
+      } else {
+        this.setAttribute('aria-disabled', false);
+        this.removeClass('vjs-at-live-edge');
+        this.controlText('Seek to live, currently behind live');
+      }
+    }
+
+    /**
+     * On click bring us as near to the live point as possible.
+     * This requires that we wait for the next `live-seekable-change`
+     * event which will happen every segment length seconds.
+     */
+    handleClick() {
+      this.player_.liveTracker.seekToLiveEdge();
+    }
+
+    /**
+     * Dispose of the element and stop tracking
+     */
+    dispose() {
+      if (this.player_.liveTracker) {
+        this.off(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
+      }
+      this.textEl_ = null;
+      super.dispose();
+    }
+  }
+  /**
+   * The text that should display over the `SeekToLive`s control. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  SeekToLive.prototype.controlText_ = 'Seek to live, currently playing live';
+  Component$1.registerComponent('SeekToLive', SeekToLive);
+
+  /**
+   * @file num.js
+   * @module num
+   */
+
+  /**
+   * Keep a number between a min and a max value
+   *
+   * @param {number} number
+   *        The number to clamp
+   *
+   * @param {number} min
+   *        The minimum value
+   * @param {number} max
+   *        The maximum value
+   *
+   * @return {number}
+   *         the clamped number
+   */
+  function clamp(number, min, max) {
+    number = Number(number);
+    return Math.min(max, Math.max(min, isNaN(number) ? min : number));
+  }
+
+  var Num = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    clamp: clamp
+  });
+
+  /**
+   * @file slider.js
+   */
+
+  /**
+   * The base functionality for a slider. Can be vertical or horizontal.
+   * For instance the volume bar or the seek bar on a video is a slider.
+   *
+   * @extends Component
+   */
+  class Slider extends Component$1 {
+    /**
+    * Create an instance of this class
+    *
+    * @param { import('../player').default } player
+    *        The `Player` that this class should be attached to.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    */
+    constructor(player, options) {
+      super(player, options);
+      this.handleMouseDown_ = e => this.handleMouseDown(e);
+      this.handleMouseUp_ = e => this.handleMouseUp(e);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.handleClick_ = e => this.handleClick(e);
+      this.handleMouseMove_ = e => this.handleMouseMove(e);
+      this.update_ = e => this.update(e);
+
+      // Set property names to bar to match with the child Slider class is looking for
+      this.bar = this.getChild(this.options_.barName);
+
+      // Set a horizontal or vertical class on the slider depending on the slider type
+      this.vertical(!!this.options_.vertical);
+      this.enable();
+    }
+
+    /**
+     * Are controls are currently enabled for this slider or not.
+     *
+     * @return {boolean}
+     *         true if controls are enabled, false otherwise
+     */
+    enabled() {
+      return this.enabled_;
+    }
+
+    /**
+     * Enable controls for this slider if they are disabled
+     */
+    enable() {
+      if (this.enabled()) {
+        return;
+      }
+      this.on('mousedown', this.handleMouseDown_);
+      this.on('touchstart', this.handleMouseDown_);
+      this.on('keydown', this.handleKeyDown_);
+      this.on('click', this.handleClick_);
+
+      // TODO: deprecated, controlsvisible does not seem to be fired
+      this.on(this.player_, 'controlsvisible', this.update);
+      if (this.playerEvent) {
+        this.on(this.player_, this.playerEvent, this.update);
+      }
+      this.removeClass('disabled');
+      this.setAttribute('tabindex', 0);
+      this.enabled_ = true;
+    }
+
+    /**
+     * Disable controls for this slider if they are enabled
+     */
+    disable() {
+      if (!this.enabled()) {
+        return;
+      }
+      const doc = this.bar.el_.ownerDocument;
+      this.off('mousedown', this.handleMouseDown_);
+      this.off('touchstart', this.handleMouseDown_);
+      this.off('keydown', this.handleKeyDown_);
+      this.off('click', this.handleClick_);
+      this.off(this.player_, 'controlsvisible', this.update_);
+      this.off(doc, 'mousemove', this.handleMouseMove_);
+      this.off(doc, 'mouseup', this.handleMouseUp_);
+      this.off(doc, 'touchmove', this.handleMouseMove_);
+      this.off(doc, 'touchend', this.handleMouseUp_);
+      this.removeAttribute('tabindex');
+      this.addClass('disabled');
+      if (this.playerEvent) {
+        this.off(this.player_, this.playerEvent, this.update);
+      }
+      this.enabled_ = false;
+    }
+
+    /**
+     * Create the `Slider`s DOM element.
+     *
+     * @param {string} type
+     *        Type of element to create.
+     *
+     * @param {Object} [props={}]
+     *        List of properties in Object form.
+     *
+     * @param {Object} [attributes={}]
+     *        list of attributes in Object form.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(type, props = {}, attributes = {}) {
+      // Add the slider element class to all sub classes
+      props.className = props.className + ' vjs-slider';
+      props = Object.assign({
+        tabIndex: 0
+      }, props);
+      attributes = Object.assign({
+        'role': 'slider',
+        'aria-valuenow': 0,
+        'aria-valuemin': 0,
+        'aria-valuemax': 100
+      }, attributes);
+      return super.createEl(type, props, attributes);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `Slider`.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     * @fires Slider#slideractive
+     */
+    handleMouseDown(event) {
+      const doc = this.bar.el_.ownerDocument;
+      if (event.type === 'mousedown') {
+        event.preventDefault();
+      }
+      // Do not call preventDefault() on touchstart in Chrome
+      // to avoid console warnings. Use a 'touch-action: none' style
+      // instead to prevent unintended scrolling.
+      // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+      if (event.type === 'touchstart' && !IS_CHROME) {
+        event.preventDefault();
+      }
+      blockTextSelection();
+      this.addClass('vjs-sliding');
+      /**
+       * Triggered when the slider is in an active state
+       *
+       * @event Slider#slideractive
+       * @type {MouseEvent}
+       */
+      this.trigger('slideractive');
+      this.on(doc, 'mousemove', this.handleMouseMove_);
+      this.on(doc, 'mouseup', this.handleMouseUp_);
+      this.on(doc, 'touchmove', this.handleMouseMove_);
+      this.on(doc, 'touchend', this.handleMouseUp_);
+      this.handleMouseMove(event, true);
+    }
+
+    /**
+     * Handle the `mousemove`, `touchmove`, and `mousedown` events on this `Slider`.
+     * The `mousemove` and `touchmove` events will only only trigger this function during
+     * `mousedown` and `touchstart`. This is due to {@link Slider#handleMouseDown} and
+     * {@link Slider#handleMouseUp}.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown`, `mousemove`, `touchstart`, or `touchmove` event that triggered
+     *        this function
+     * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false.
+     *
+     * @listens mousemove
+     * @listens touchmove
+     */
+    handleMouseMove(event) {}
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `Slider`.
+     *
+     * @param {MouseEvent} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     * @fires Slider#sliderinactive
+     */
+    handleMouseUp(event) {
+      const doc = this.bar.el_.ownerDocument;
+      unblockTextSelection();
+      this.removeClass('vjs-sliding');
+      /**
+       * Triggered when the slider is no longer in an active state.
+       *
+       * @event Slider#sliderinactive
+       * @type {Event}
+       */
+      this.trigger('sliderinactive');
+      this.off(doc, 'mousemove', this.handleMouseMove_);
+      this.off(doc, 'mouseup', this.handleMouseUp_);
+      this.off(doc, 'touchmove', this.handleMouseMove_);
+      this.off(doc, 'touchend', this.handleMouseUp_);
+      this.update();
+    }
+
+    /**
+     * Update the progress bar of the `Slider`.
+     *
+     * @return {number}
+     *          The percentage of progress the progress bar represents as a
+     *          number from 0 to 1.
+     */
+    update() {
+      // In VolumeBar init we have a setTimeout for update that pops and update
+      // to the end of the execution stack. The player is destroyed before then
+      // update will cause an error
+      // If there's no bar...
+      if (!this.el_ || !this.bar) {
+        return;
+      }
+
+      // clamp progress between 0 and 1
+      // and only round to four decimal places, as we round to two below
+      const progress = this.getProgress();
+      if (progress === this.progress_) {
+        return progress;
+      }
+      this.progress_ = progress;
+      this.requestNamedAnimationFrame('Slider#update', () => {
+        // Set the new bar width or height
+        const sizeKey = this.vertical() ? 'height' : 'width';
+
+        // Convert to a percentage for css value
+        this.bar.el().style[sizeKey] = (progress * 100).toFixed(2) + '%';
+      });
+      return progress;
+    }
+
+    /**
+     * Get the percentage of the bar that should be filled
+     * but clamped and rounded.
+     *
+     * @return {number}
+     *         percentage filled that the slider is
+     */
+    getProgress() {
+      return Number(clamp(this.getPercent(), 0, 1).toFixed(4));
+    }
+
+    /**
+     * Calculate distance for slider
+     *
+     * @param {Event} event
+     *        The event that caused this function to run.
+     *
+     * @return {number}
+     *         The current position of the Slider.
+     *         - position.x for vertical `Slider`s
+     *         - position.y for horizontal `Slider`s
+     */
+    calculateDistance(event) {
+      const position = getPointerPosition(this.el_, event);
+      if (this.vertical()) {
+        return position.y;
+      }
+      return position.x;
+    }
+
+    /**
+     * Handle a `keydown` event on the `Slider`. Watches for left, right, up, and down
+     * arrow keys. This function will only be called when the slider has focus. See
+     * {@link Slider#handleFocus} and {@link Slider#handleBlur}.
+     *
+     * @param {KeyboardEvent} event
+     *        the `keydown` event that caused this function to run.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Left and Down Arrows
+      if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepBack();
+
+        // Up and Right Arrows
+      } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepForward();
+      } else {
+        // Pass keydown handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Listener for click events on slider, used to prevent clicks
+     *   from bubbling up to parent elements like button menus.
+     *
+     * @param {Object} event
+     *        Event that caused this object to run
+     */
+    handleClick(event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+
+    /**
+     * Get/set if slider is horizontal for vertical
+     *
+     * @param {boolean} [bool]
+     *        - true if slider is vertical,
+     *        - false is horizontal
+     *
+     * @return {boolean}
+     *         - true if slider is vertical, and getting
+     *         - false if the slider is horizontal, and getting
+     */
+    vertical(bool) {
+      if (bool === undefined) {
+        return this.vertical_ || false;
+      }
+      this.vertical_ = !!bool;
+      if (this.vertical_) {
+        this.addClass('vjs-slider-vertical');
+      } else {
+        this.addClass('vjs-slider-horizontal');
+      }
+    }
+  }
+  Component$1.registerComponent('Slider', Slider);
+
+  /**
+   * @file load-progress-bar.js
+   */
+
+  // get the percent width of a time compared to the total end
+  const percentify = (time, end) => clamp(time / end * 100, 0, 100).toFixed(2) + '%';
+
+  /**
+   * Shows loading progress
+   *
+   * @extends Component
+   */
+  class LoadProgressBar extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.partEls_ = [];
+      this.on(player, 'progress', e => this.update(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-load-progress'
+      });
+      const wrapper = createEl('span', {
+        className: 'vjs-control-text'
+      });
+      const loadedText = createEl('span', {
+        textContent: this.localize('Loaded')
+      });
+      const separator = document.createTextNode(': ');
+      this.percentageEl_ = createEl('span', {
+        className: 'vjs-control-text-loaded-percentage',
+        textContent: '0%'
+      });
+      el.appendChild(wrapper);
+      wrapper.appendChild(loadedText);
+      wrapper.appendChild(separator);
+      wrapper.appendChild(this.percentageEl_);
+      return el;
+    }
+    dispose() {
+      this.partEls_ = null;
+      this.percentageEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Update progress bar
+     *
+     * @param {Event} [event]
+     *        The `progress` event that caused this function to run.
+     *
+     * @listens Player#progress
+     */
+    update(event) {
+      this.requestNamedAnimationFrame('LoadProgressBar#update', () => {
+        const liveTracker = this.player_.liveTracker;
+        const buffered = this.player_.buffered();
+        const duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
+        const bufferedEnd = this.player_.bufferedEnd();
+        const children = this.partEls_;
+        const percent = percentify(bufferedEnd, duration);
+        if (this.percent_ !== percent) {
+          // update the width of the progress bar
+          this.el_.style.width = percent;
+          // update the control-text
+          textContent(this.percentageEl_, percent);
+          this.percent_ = percent;
+        }
+
+        // add child elements to represent the individual buffered time ranges
+        for (let i = 0; i < buffered.length; i++) {
+          const start = buffered.start(i);
+          const end = buffered.end(i);
+          let part = children[i];
+          if (!part) {
+            part = this.el_.appendChild(createEl());
+            children[i] = part;
+          }
+
+          //  only update if changed
+          if (part.dataset.start === start && part.dataset.end === end) {
+            continue;
+          }
+          part.dataset.start = start;
+          part.dataset.end = end;
+
+          // set the percent based on the width of the progress bar (bufferedEnd)
+          part.style.left = percentify(start, bufferedEnd);
+          part.style.width = percentify(end - start, bufferedEnd);
+        }
+
+        // remove unused buffered range elements
+        for (let i = children.length; i > buffered.length; i--) {
+          this.el_.removeChild(children[i - 1]);
+        }
+        children.length = buffered.length;
+      });
+    }
+  }
+  Component$1.registerComponent('LoadProgressBar', LoadProgressBar);
+
+  /**
+   * @file time-tooltip.js
+   */
+
+  /**
+   * Time tooltips display a time above the progress bar.
+   *
+   * @extends Component
+   */
+  class TimeTooltip extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the time tooltip DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-time-tooltip'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Updates the position of the time tooltip relative to the `SeekBar`.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint, content) {
+      const tooltipRect = findPosition(this.el_);
+      const playerRect = getBoundingClientRect(this.player_.el());
+      const seekBarPointPx = seekBarRect.width * seekBarPoint;
+
+      // do nothing if either rect isn't available
+      // for example, if the player isn't in the DOM for testing
+      if (!playerRect || !tooltipRect) {
+        return;
+      }
+
+      // This is the space left of the `seekBarPoint` available within the bounds
+      // of the player. We calculate any gap between the left edge of the player
+      // and the left edge of the `SeekBar` and add the number of pixels in the
+      // `SeekBar` before hitting the `seekBarPoint`
+      let spaceLeftOfPoint = seekBarRect.left - playerRect.left + seekBarPointPx;
+
+      // This is the space right of the `seekBarPoint` available within the bounds
+      // of the player. We calculate the number of pixels from the `seekBarPoint`
+      // to the right edge of the `SeekBar` and add to that any gap between the
+      // right edge of the `SeekBar` and the player.
+      let spaceRightOfPoint = seekBarRect.width - seekBarPointPx + (playerRect.right - seekBarRect.right);
+
+      // spaceRightOfPoint is always NaN for mouse time display
+      // because the seekbarRect does not have a right property. This causes
+      // the mouse tool tip to be truncated when it's close to the right edge of the player.
+      // In such cases, we ignore the `playerRect.right - seekBarRect.right` value when calculating.
+      // For the sake of consistency, we ignore seekBarRect.left - playerRect.left for the left edge.
+      if (!spaceRightOfPoint) {
+        spaceRightOfPoint = seekBarRect.width - seekBarPointPx;
+        spaceLeftOfPoint = seekBarPointPx;
+      }
+      // This is the number of pixels by which the tooltip will need to be pulled
+      // further to the right to center it over the `seekBarPoint`.
+      let pullTooltipBy = tooltipRect.width / 2;
+
+      // Adjust the `pullTooltipBy` distance to the left or right depending on
+      // the results of the space calculations above.
+      if (spaceLeftOfPoint < pullTooltipBy) {
+        pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
+      } else if (spaceRightOfPoint < pullTooltipBy) {
+        pullTooltipBy = spaceRightOfPoint;
+      }
+
+      // Due to the imprecision of decimal/ratio based calculations and varying
+      // rounding behaviors, there are cases where the spacing adjustment is off
+      // by a pixel or two. This adds insurance to these calculations.
+      if (pullTooltipBy < 0) {
+        pullTooltipBy = 0;
+      } else if (pullTooltipBy > tooltipRect.width) {
+        pullTooltipBy = tooltipRect.width;
+      }
+
+      // prevent small width fluctuations within 0.4px from
+      // changing the value below.
+      // This really helps for live to prevent the play
+      // progress time tooltip from jittering
+      pullTooltipBy = Math.round(pullTooltipBy);
+      this.el_.style.right = `-${pullTooltipBy}px`;
+      this.write(content);
+    }
+
+    /**
+     * Write the time to the tooltip DOM element.
+     *
+     * @param {string} content
+     *        The formatted time for the tooltip.
+     */
+    write(content) {
+      textContent(this.el_, content);
+    }
+
+    /**
+     * Updates the position of the time tooltip relative to the `SeekBar`.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     *
+     * @param {number} time
+     *        The time to update the tooltip to, not used during live playback
+     *
+     * @param {Function} cb
+     *        A function that will be called during the request animation frame
+     *        for tooltips that need to do additional animations from the default
+     */
+    updateTime(seekBarRect, seekBarPoint, time, cb) {
+      this.requestNamedAnimationFrame('TimeTooltip#updateTime', () => {
+        let content;
+        const duration = this.player_.duration();
+        if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+          const liveWindow = this.player_.liveTracker.liveWindow();
+          const secondsBehind = liveWindow - seekBarPoint * liveWindow;
+          content = (secondsBehind < 1 ? '' : '-') + formatTime(secondsBehind, liveWindow);
+        } else {
+          content = formatTime(time, duration);
+        }
+        this.update(seekBarRect, seekBarPoint, content);
+        if (cb) {
+          cb();
+        }
+      });
+    }
+  }
+  Component$1.registerComponent('TimeTooltip', TimeTooltip);
+
+  /**
+   * @file play-progress-bar.js
+   */
+
+  /**
+   * Used by {@link SeekBar} to display media playback progress as part of the
+   * {@link ProgressControl}.
+   *
+   * @extends Component
+   */
+  class PlayProgressBar extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('circle');
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-play-progress vjs-slider-bar'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Enqueues updates to its own DOM as well as the DOM of its
+     * {@link TimeTooltip} child.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint) {
+      const timeTooltip = this.getChild('timeTooltip');
+      if (!timeTooltip) {
+        return;
+      }
+      const time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+      timeTooltip.updateTime(seekBarRect, seekBarPoint, time);
+    }
+  }
+
+  /**
+   * Default options for {@link PlayProgressBar}.
+   *
+   * @type {Object}
+   * @private
+   */
+  PlayProgressBar.prototype.options_ = {
+    children: []
+  };
+
+  // Time tooltips should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    PlayProgressBar.prototype.options_.children.push('timeTooltip');
+  }
+  Component$1.registerComponent('PlayProgressBar', PlayProgressBar);
+
+  /**
+   * @file mouse-time-display.js
+   */
+
+  /**
+   * The {@link MouseTimeDisplay} component tracks mouse movement over the
+   * {@link ProgressControl}. It displays an indicator and a {@link TimeTooltip}
+   * indicating the time which is represented by a given point in the
+   * {@link ProgressControl}.
+   *
+   * @extends Component
+   */
+  class MouseTimeDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-mouse-display'
+      });
+    }
+
+    /**
+     * Enqueues updates to its own DOM as well as the DOM of its
+     * {@link TimeTooltip} child.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint) {
+      const time = seekBarPoint * this.player_.duration();
+      this.getChild('timeTooltip').updateTime(seekBarRect, seekBarPoint, time, () => {
+        this.el_.style.left = `${seekBarRect.width * seekBarPoint}px`;
+      });
+    }
+  }
+
+  /**
+   * Default options for `MouseTimeDisplay`
+   *
+   * @type {Object}
+   * @private
+   */
+  MouseTimeDisplay.prototype.options_ = {
+    children: ['timeTooltip']
+  };
+  Component$1.registerComponent('MouseTimeDisplay', MouseTimeDisplay);
+
+  /**
+   * @file seek-bar.js
+   */
+
+  // The number of seconds the `step*` functions move the timeline.
+  const STEP_SECONDS = 5;
+
+  // The multiplier of STEP_SECONDS that PgUp/PgDown move the timeline.
+  const PAGE_KEY_MULTIPLIER = 12;
+
+  /**
+   * Seek bar and container for the progress bars. Uses {@link PlayProgressBar}
+   * as its `bar`.
+   *
+   * @extends Slider
+   */
+  class SeekBar extends Slider {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setEventHandlers_();
+    }
+
+    /**
+     * Sets the event handlers
+     *
+     * @private
+     */
+    setEventHandlers_() {
+      this.update_ = bind_(this, this.update);
+      this.update = throttle(this.update_, UPDATE_REFRESH_INTERVAL);
+      this.on(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
+      if (this.player_.liveTracker) {
+        this.on(this.player_.liveTracker, 'liveedgechange', this.update);
+      }
+
+      // when playing, let's ensure we smoothly update the play progress bar
+      // via an interval
+      this.updateInterval = null;
+      this.enableIntervalHandler_ = e => this.enableInterval_(e);
+      this.disableIntervalHandler_ = e => this.disableInterval_(e);
+      this.on(this.player_, ['playing'], this.enableIntervalHandler_);
+      this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
+
+      // we don't need to update the play progress if the document is hidden,
+      // also, this causes the CPU to spike and eventually crash the page on IE11.
+      if ('hidden' in document && 'visibilityState' in document) {
+        this.on(document, 'visibilitychange', this.toggleVisibility_);
+      }
+    }
+    toggleVisibility_(e) {
+      if (document.visibilityState === 'hidden') {
+        this.cancelNamedAnimationFrame('SeekBar#update');
+        this.cancelNamedAnimationFrame('Slider#update');
+        this.disableInterval_(e);
+      } else {
+        if (!this.player_.ended() && !this.player_.paused()) {
+          this.enableInterval_();
+        }
+
+        // we just switched back to the page and someone may be looking, so, update ASAP
+        this.update();
+      }
+    }
+    enableInterval_() {
+      if (this.updateInterval) {
+        return;
+      }
+      this.updateInterval = this.setInterval(this.update, UPDATE_REFRESH_INTERVAL);
+    }
+    disableInterval_(e) {
+      if (this.player_.liveTracker && this.player_.liveTracker.isLive() && e && e.type !== 'ended') {
+        return;
+      }
+      if (!this.updateInterval) {
+        return;
+      }
+      this.clearInterval(this.updateInterval);
+      this.updateInterval = null;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-progress-holder'
+      }, {
+        'aria-label': this.localize('Progress Bar')
+      });
+    }
+
+    /**
+     * This function updates the play progress bar and accessibility
+     * attributes to whatever is passed in.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` or `ended` event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     *
+     * @return {number}
+     *          The current percent at a number from 0-1
+     */
+    update(event) {
+      // ignore updates while the tab is hidden
+      if (document.visibilityState === 'hidden') {
+        return;
+      }
+      const percent = super.update();
+      this.requestNamedAnimationFrame('SeekBar#update', () => {
+        const currentTime = this.player_.ended() ? this.player_.duration() : this.getCurrentTime_();
+        const liveTracker = this.player_.liveTracker;
+        let duration = this.player_.duration();
+        if (liveTracker && liveTracker.isLive()) {
+          duration = this.player_.liveTracker.liveCurrentTime();
+        }
+        if (this.percent_ !== percent) {
+          // machine readable value of progress bar (percentage complete)
+          this.el_.setAttribute('aria-valuenow', (percent * 100).toFixed(2));
+          this.percent_ = percent;
+        }
+        if (this.currentTime_ !== currentTime || this.duration_ !== duration) {
+          // human readable value of progress bar (time complete)
+          this.el_.setAttribute('aria-valuetext', this.localize('progress bar timing: currentTime={1} duration={2}', [formatTime(currentTime, duration), formatTime(duration, duration)], '{1} of {2}'));
+          this.currentTime_ = currentTime;
+          this.duration_ = duration;
+        }
+
+        // update the progress bar time tooltip with the current time
+        if (this.bar) {
+          this.bar.update(getBoundingClientRect(this.el()), this.getProgress());
+        }
+      });
+      return percent;
+    }
+
+    /**
+     * Prevent liveThreshold from causing seeks to seem like they
+     * are not happening from a user perspective.
+     *
+     * @param {number} ct
+     *        current time to seek to
+     */
+    userSeek_(ct) {
+      if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+        this.player_.liveTracker.nextSeekedFromUser();
+      }
+      this.player_.currentTime(ct);
+    }
+
+    /**
+     * Get the value of current time but allows for smooth scrubbing,
+     * when player can't keep up.
+     *
+     * @return {number}
+     *         The current time value to display
+     *
+     * @private
+     */
+    getCurrentTime_() {
+      return this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+    }
+
+    /**
+     * Get the percentage of media played so far.
+     *
+     * @return {number}
+     *         The percentage of media played so far (0 to 1).
+     */
+    getPercent() {
+      const currentTime = this.getCurrentTime_();
+      let percent;
+      const liveTracker = this.player_.liveTracker;
+      if (liveTracker && liveTracker.isLive()) {
+        percent = (currentTime - liveTracker.seekableStart()) / liveTracker.liveWindow();
+
+        // prevent the percent from changing at the live edge
+        if (liveTracker.atLiveEdge()) {
+          percent = 1;
+        }
+      } else {
+        percent = currentTime / this.player_.duration();
+      }
+      return percent;
+    }
+
+    /**
+     * Handle mouse down on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mousedown` event that caused this to run.
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+
+      // Stop event propagation to prevent double fire in progress-control.js
+      event.stopPropagation();
+      this.videoWasPlaying = !this.player_.paused();
+      this.player_.pause();
+      super.handleMouseDown(event);
+    }
+
+    /**
+     * Handle mouse move on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mousemove` event that caused this to run.
+     * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false
+     *
+     * @listens mousemove
+     */
+    handleMouseMove(event, mouseDown = false) {
+      if (!isSingleLeftClick(event) || isNaN(this.player_.duration())) {
+        return;
+      }
+      if (!mouseDown && !this.player_.scrubbing()) {
+        this.player_.scrubbing(true);
+      }
+      let newTime;
+      const distance = this.calculateDistance(event);
+      const liveTracker = this.player_.liveTracker;
+      if (!liveTracker || !liveTracker.isLive()) {
+        newTime = distance * this.player_.duration();
+
+        // Don't let video end while scrubbing.
+        if (newTime === this.player_.duration()) {
+          newTime = newTime - 0.1;
+        }
+      } else {
+        if (distance >= 0.99) {
+          liveTracker.seekToLiveEdge();
+          return;
+        }
+        const seekableStart = liveTracker.seekableStart();
+        const seekableEnd = liveTracker.liveCurrentTime();
+        newTime = seekableStart + distance * liveTracker.liveWindow();
+
+        // Don't let video end while scrubbing.
+        if (newTime >= seekableEnd) {
+          newTime = seekableEnd;
+        }
+
+        // Compensate for precision differences so that currentTime is not less
+        // than seekable start
+        if (newTime <= seekableStart) {
+          newTime = seekableStart + 0.1;
+        }
+
+        // On android seekableEnd can be Infinity sometimes,
+        // this will cause newTime to be Infinity, which is
+        // not a valid currentTime.
+        if (newTime === Infinity) {
+          return;
+        }
+      }
+
+      // Set new time (tell player to seek to new time)
+      this.userSeek_(newTime);
+      if (this.player_.options_.enableSmoothSeeking) {
+        this.update();
+      }
+    }
+    enable() {
+      super.enable();
+      const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+      if (!mouseTimeDisplay) {
+        return;
+      }
+      mouseTimeDisplay.show();
+    }
+    disable() {
+      super.disable();
+      const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+      if (!mouseTimeDisplay) {
+        return;
+      }
+      mouseTimeDisplay.hide();
+    }
+
+    /**
+     * Handle mouse up on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mouseup` event that caused this to run.
+     *
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      super.handleMouseUp(event);
+
+      // Stop event propagation to prevent double fire in progress-control.js
+      if (event) {
+        event.stopPropagation();
+      }
+      this.player_.scrubbing(false);
+
+      /**
+       * Trigger timeupdate because we're done seeking and the time has changed.
+       * This is particularly useful for if the player is paused to time the time displays.
+       *
+       * @event Tech#timeupdate
+       * @type {Event}
+       */
+      this.player_.trigger({
+        type: 'timeupdate',
+        target: this,
+        manuallyTriggered: true
+      });
+      if (this.videoWasPlaying) {
+        silencePromise(this.player_.play());
+      } else {
+        // We're done seeking and the time has changed.
+        // If the player is paused, make sure we display the correct time on the seek bar.
+        this.update_();
+      }
+    }
+
+    /**
+     * Move more quickly fast forward for keyboard-only users
+     */
+    stepForward() {
+      this.userSeek_(this.player_.currentTime() + STEP_SECONDS);
+    }
+
+    /**
+     * Move more quickly rewind for keyboard-only users
+     */
+    stepBack() {
+      this.userSeek_(this.player_.currentTime() - STEP_SECONDS);
+    }
+
+    /**
+     * Toggles the playback state of the player
+     * This gets called when enter or space is used on the seekbar
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called
+     *
+     */
+    handleAction(event) {
+      if (this.player_.paused()) {
+        this.player_.play();
+      } else {
+        this.player_.pause();
+      }
+    }
+
+    /**
+     * Called when this SeekBar has focus and a key gets pressed down.
+     * Supports the following keys:
+     *
+     *   Space or Enter key fire a click event
+     *   Home key moves to start of the timeline
+     *   End key moves to end of the timeline
+     *   Digit "0" through "9" keys move to 0%, 10% ... 80%, 90% of the timeline
+     *   PageDown key moves back a larger step than ArrowDown
+     *   PageUp key moves forward a large step
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      const liveTracker = this.player_.liveTracker;
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.handleAction(event);
+      } else if (keycode.isEventKey(event, 'Home')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(0);
+      } else if (keycode.isEventKey(event, 'End')) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (liveTracker && liveTracker.isLive()) {
+          this.userSeek_(liveTracker.liveCurrentTime());
+        } else {
+          this.userSeek_(this.player_.duration());
+        }
+      } else if (/^[0-9]$/.test(keycode(event))) {
+        event.preventDefault();
+        event.stopPropagation();
+        const gotoFraction = (keycode.codes[keycode(event)] - keycode.codes['0']) * 10.0 / 100.0;
+        if (liveTracker && liveTracker.isLive()) {
+          this.userSeek_(liveTracker.seekableStart() + liveTracker.liveWindow() * gotoFraction);
+        } else {
+          this.userSeek_(this.player_.duration() * gotoFraction);
+        }
+      } else if (keycode.isEventKey(event, 'PgDn')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(this.player_.currentTime() - STEP_SECONDS * PAGE_KEY_MULTIPLIER);
+      } else if (keycode.isEventKey(event, 'PgUp')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(this.player_.currentTime() + STEP_SECONDS * PAGE_KEY_MULTIPLIER);
+      } else {
+        // Pass keydown handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+    dispose() {
+      this.disableInterval_();
+      this.off(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
+      if (this.player_.liveTracker) {
+        this.off(this.player_.liveTracker, 'liveedgechange', this.update);
+      }
+      this.off(this.player_, ['playing'], this.enableIntervalHandler_);
+      this.off(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
+
+      // we don't need to update the play progress if the document is hidden,
+      // also, this causes the CPU to spike and eventually crash the page on IE11.
+      if ('hidden' in document && 'visibilityState' in document) {
+        this.off(document, 'visibilitychange', this.toggleVisibility_);
+      }
+      super.dispose();
+    }
+  }
+
+  /**
+   * Default options for the `SeekBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  SeekBar.prototype.options_ = {
+    children: ['loadProgressBar', 'playProgressBar'],
+    barName: 'playProgressBar'
+  };
+
+  // MouseTimeDisplay tooltips should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    SeekBar.prototype.options_.children.splice(1, 0, 'mouseTimeDisplay');
+  }
+  Component$1.registerComponent('SeekBar', SeekBar);
+
+  /**
+   * @file progress-control.js
+   */
+
+  /**
+   * The Progress Control component contains the seek bar, load progress,
+   * and play progress.
+   *
+   * @extends Component
+   */
+  class ProgressControl extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.handleMouseMove = throttle(bind_(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+      this.throttledHandleMouseSeek = throttle(bind_(this, this.handleMouseSeek), UPDATE_REFRESH_INTERVAL);
+      this.handleMouseUpHandler_ = e => this.handleMouseUp(e);
+      this.handleMouseDownHandler_ = e => this.handleMouseDown(e);
+      this.enable();
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-progress-control vjs-control'
+      });
+    }
+
+    /**
+     * When the mouse moves over the `ProgressControl`, the pointer position
+     * gets passed down to the `MouseTimeDisplay` component.
+     *
+     * @param {Event} event
+     *        The `mousemove` event that caused this function to run.
+     *
+     * @listen mousemove
+     */
+    handleMouseMove(event) {
+      const seekBar = this.getChild('seekBar');
+      if (!seekBar) {
+        return;
+      }
+      const playProgressBar = seekBar.getChild('playProgressBar');
+      const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
+      if (!playProgressBar && !mouseTimeDisplay) {
+        return;
+      }
+      const seekBarEl = seekBar.el();
+      const seekBarRect = findPosition(seekBarEl);
+      let seekBarPoint = getPointerPosition(seekBarEl, event).x;
+
+      // The default skin has a gap on either side of the `SeekBar`. This means
+      // that it's possible to trigger this behavior outside the boundaries of
+      // the `SeekBar`. This ensures we stay within it at all times.
+      seekBarPoint = clamp(seekBarPoint, 0, 1);
+      if (mouseTimeDisplay) {
+        mouseTimeDisplay.update(seekBarRect, seekBarPoint);
+      }
+      if (playProgressBar) {
+        playProgressBar.update(seekBarRect, seekBar.getProgress());
+      }
+    }
+
+    /**
+     * A throttled version of the {@link ProgressControl#handleMouseSeek} listener.
+     *
+     * @method ProgressControl#throttledHandleMouseSeek
+     * @param {Event} event
+     *        The `mousemove` event that caused this function to run.
+     *
+     * @listen mousemove
+     * @listen touchmove
+     */
+
+    /**
+     * Handle `mousemove` or `touchmove` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousemove
+     * @listens touchmove
+     */
+    handleMouseSeek(event) {
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseMove(event);
+      }
+    }
+
+    /**
+     * Are controls are currently enabled for this progress control.
+     *
+     * @return {boolean}
+     *         true if controls are enabled, false otherwise
+     */
+    enabled() {
+      return this.enabled_;
+    }
+
+    /**
+     * Disable all controls on the progress control and its children
+     */
+    disable() {
+      this.children().forEach(child => child.disable && child.disable());
+      if (!this.enabled()) {
+        return;
+      }
+      this.off(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
+      this.off(this.el_, 'mousemove', this.handleMouseMove);
+      this.removeListenersAddedOnMousedownAndTouchstart();
+      this.addClass('disabled');
+      this.enabled_ = false;
+
+      // Restore normal playback state if controls are disabled while scrubbing
+      if (this.player_.scrubbing()) {
+        const seekBar = this.getChild('seekBar');
+        this.player_.scrubbing(false);
+        if (seekBar.videoWasPlaying) {
+          silencePromise(this.player_.play());
+        }
+      }
+    }
+
+    /**
+     * Enable all controls on the progress control and its children
+     */
+    enable() {
+      this.children().forEach(child => child.enable && child.enable());
+      if (this.enabled()) {
+        return;
+      }
+      this.on(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
+      this.on(this.el_, 'mousemove', this.handleMouseMove);
+      this.removeClass('disabled');
+      this.enabled_ = true;
+    }
+
+    /**
+     * Cleanup listeners after the user finishes interacting with the progress controls
+     */
+    removeListenersAddedOnMousedownAndTouchstart() {
+      const doc = this.el_.ownerDocument;
+      this.off(doc, 'mousemove', this.throttledHandleMouseSeek);
+      this.off(doc, 'touchmove', this.throttledHandleMouseSeek);
+      this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.off(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseDown(event) {
+      const doc = this.el_.ownerDocument;
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseDown(event);
+      }
+      this.on(doc, 'mousemove', this.throttledHandleMouseSeek);
+      this.on(doc, 'touchmove', this.throttledHandleMouseSeek);
+      this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.on(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseUp(event);
+      }
+      this.removeListenersAddedOnMousedownAndTouchstart();
+    }
+  }
+
+  /**
+   * Default options for `ProgressControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  ProgressControl.prototype.options_ = {
+    children: ['seekBar']
+  };
+  Component$1.registerComponent('ProgressControl', ProgressControl);
+
+  /**
+   * @file picture-in-picture-toggle.js
+   */
+
+  /**
+   * Toggle Picture-in-Picture mode
+   *
+   * @extends Button
+   */
+  class PictureInPictureToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @listens Player#enterpictureinpicture
+     * @listens Player#leavepictureinpicture
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('picture-in-picture-enter');
+      this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], e => this.handlePictureInPictureChange(e));
+      this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], e => this.handlePictureInPictureEnabledChange(e));
+      this.on(player, ['loadedmetadata', 'audioonlymodechange', 'audiopostermodechange'], () => this.handlePictureInPictureAudioModeChange());
+
+      // TODO: Deactivate button on player emptied event.
+      this.disable();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-picture-in-picture-control vjs-hidden ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Displays or hides the button depending on the audio mode detection.
+     * Exits picture-in-picture if it is enabled when switching to audio mode.
+     */
+    handlePictureInPictureAudioModeChange() {
+      // This audio detection will not detect HLS or DASH audio-only streams because there was no reliable way to detect them at the time
+      const isSourceAudio = this.player_.currentType().substring(0, 5) === 'audio';
+      const isAudioMode = isSourceAudio || this.player_.audioPosterMode() || this.player_.audioOnlyMode();
+      if (!isAudioMode) {
+        this.show();
+        return;
+      }
+      if (this.player_.isInPictureInPicture()) {
+        this.player_.exitPictureInPicture();
+      }
+      this.hide();
+    }
+
+    /**
+     * Enables or disables button based on availability of a Picture-In-Picture mode.
+     *
+     * Enabled if
+     * - `player.options().enableDocumentPictureInPicture` is true and
+     *   window.documentPictureInPicture is available; or
+     * - `player.disablePictureInPicture()` is false and
+     *   element.requestPictureInPicture is available
+     */
+    handlePictureInPictureEnabledChange() {
+      if (document.pictureInPictureEnabled && this.player_.disablePictureInPicture() === false || this.player_.options_.enableDocumentPictureInPicture && 'documentPictureInPicture' in window) {
+        this.enable();
+      } else {
+        this.disable();
+      }
+    }
+
+    /**
+     * Handles enterpictureinpicture and leavepictureinpicture on the player and change control text accordingly.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#enterpictureinpicture} or {@link Player#leavepictureinpicture} event that caused this function to be
+     *        called.
+     *
+     * @listens Player#enterpictureinpicture
+     * @listens Player#leavepictureinpicture
+     */
+    handlePictureInPictureChange(event) {
+      if (this.player_.isInPictureInPicture()) {
+        this.setIcon('picture-in-picture-exit');
+        this.controlText('Exit Picture-in-Picture');
+      } else {
+        this.setIcon('picture-in-picture-enter');
+        this.controlText('Picture-in-Picture');
+      }
+      this.handlePictureInPictureEnabledChange();
+    }
+
+    /**
+     * This gets called when an `PictureInPictureToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (!this.player_.isInPictureInPicture()) {
+        this.player_.requestPictureInPicture();
+      } else {
+        this.player_.exitPictureInPicture();
+      }
+    }
+
+    /**
+     * Show the `Component`s element if it is hidden by removing the
+     * 'vjs-hidden' class name from it only in browsers that support the Picture-in-Picture API.
+     */
+    show() {
+      // Does not allow to display the pictureInPictureToggle in browsers that do not support the Picture-in-Picture API, e.g. Firefox.
+      if (typeof document.exitPictureInPicture !== 'function') {
+        return;
+      }
+      super.show();
+    }
+  }
+
+  /**
+   * The text that should display over the `PictureInPictureToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PictureInPictureToggle.prototype.controlText_ = 'Picture-in-Picture';
+  Component$1.registerComponent('PictureInPictureToggle', PictureInPictureToggle);
+
+  /**
+   * @file fullscreen-toggle.js
+   */
+
+  /**
+   * Toggle fullscreen video
+   *
+   * @extends Button
+   */
+  class FullscreenToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('fullscreen-enter');
+      this.on(player, 'fullscreenchange', e => this.handleFullscreenChange(e));
+      if (document[player.fsApi_.fullscreenEnabled] === false) {
+        this.disable();
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-fullscreen-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Handles fullscreenchange on the player and change control text accordingly.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#fullscreenchange} event that caused this function to be
+     *        called.
+     *
+     * @listens Player#fullscreenchange
+     */
+    handleFullscreenChange(event) {
+      if (this.player_.isFullscreen()) {
+        this.controlText('Exit Fullscreen');
+        this.setIcon('fullscreen-exit');
+      } else {
+        this.controlText('Fullscreen');
+        this.setIcon('fullscreen-enter');
+      }
+    }
+
+    /**
+     * This gets called when an `FullscreenToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (!this.player_.isFullscreen()) {
+        this.player_.requestFullscreen();
+      } else {
+        this.player_.exitFullscreen();
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `FullscreenToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  FullscreenToggle.prototype.controlText_ = 'Fullscreen';
+  Component$1.registerComponent('FullscreenToggle', FullscreenToggle);
+
+  /**
+   * Check if volume control is supported and if it isn't hide the
+   * `Component` that was passed  using the `vjs-hidden` class.
+   *
+   * @param { import('../../component').default } self
+   *        The component that should be hidden if volume is unsupported
+   *
+   * @param { import('../../player').default } player
+   *        A reference to the player
+   *
+   * @private
+   */
+  const checkVolumeSupport = function (self, player) {
+    // hide volume controls when they're not supported by the current tech
+    if (player.tech_ && !player.tech_.featuresVolumeControl) {
+      self.addClass('vjs-hidden');
+    }
+    self.on(player, 'loadstart', function () {
+      if (!player.tech_.featuresVolumeControl) {
+        self.addClass('vjs-hidden');
+      } else {
+        self.removeClass('vjs-hidden');
+      }
+    });
+  };
+
+  /**
+   * @file volume-level.js
+   */
+
+  /**
+   * Shows volume level
+   *
+   * @extends Component
+   */
+  class VolumeLevel extends Component$1 {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-volume-level'
+      });
+      this.setIcon('circle', el);
+      el.appendChild(super.createEl('span', {
+        className: 'vjs-control-text'
+      }));
+      return el;
+    }
+  }
+  Component$1.registerComponent('VolumeLevel', VolumeLevel);
+
+  /**
+   * @file volume-level-tooltip.js
+   */
+
+  /**
+   * Volume level tooltips display a volume above or side by side the volume bar.
+   *
+   * @extends Component
+   */
+  class VolumeLevelTooltip extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the volume tooltip DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-volume-tooltip'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Updates the position of the tooltip relative to the `VolumeBar` and
+     * its content text.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     */
+    update(rangeBarRect, rangeBarPoint, vertical, content) {
+      if (!vertical) {
+        const tooltipRect = getBoundingClientRect(this.el_);
+        const playerRect = getBoundingClientRect(this.player_.el());
+        const volumeBarPointPx = rangeBarRect.width * rangeBarPoint;
+        if (!playerRect || !tooltipRect) {
+          return;
+        }
+        const spaceLeftOfPoint = rangeBarRect.left - playerRect.left + volumeBarPointPx;
+        const spaceRightOfPoint = rangeBarRect.width - volumeBarPointPx + (playerRect.right - rangeBarRect.right);
+        let pullTooltipBy = tooltipRect.width / 2;
+        if (spaceLeftOfPoint < pullTooltipBy) {
+          pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
+        } else if (spaceRightOfPoint < pullTooltipBy) {
+          pullTooltipBy = spaceRightOfPoint;
+        }
+        if (pullTooltipBy < 0) {
+          pullTooltipBy = 0;
+        } else if (pullTooltipBy > tooltipRect.width) {
+          pullTooltipBy = tooltipRect.width;
+        }
+        this.el_.style.right = `-${pullTooltipBy}px`;
+      }
+      this.write(`${content}%`);
+    }
+
+    /**
+     * Write the volume to the tooltip DOM element.
+     *
+     * @param {string} content
+     *        The formatted volume for the tooltip.
+     */
+    write(content) {
+      textContent(this.el_, content);
+    }
+
+    /**
+     * Updates the position of the volume tooltip relative to the `VolumeBar`.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     * @param {number} volume
+     *        The volume level to update the tooltip to
+     *
+     * @param {Function} cb
+     *        A function that will be called during the request animation frame
+     *        for tooltips that need to do additional animations from the default
+     */
+    updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, cb) {
+      this.requestNamedAnimationFrame('VolumeLevelTooltip#updateVolume', () => {
+        this.update(rangeBarRect, rangeBarPoint, vertical, volume.toFixed(0));
+        if (cb) {
+          cb();
+        }
+      });
+    }
+  }
+  Component$1.registerComponent('VolumeLevelTooltip', VolumeLevelTooltip);
+
+  /**
+   * @file mouse-volume-level-display.js
+   */
+
+  /**
+   * The {@link MouseVolumeLevelDisplay} component tracks mouse movement over the
+   * {@link VolumeControl}. It displays an indicator and a {@link VolumeLevelTooltip}
+   * indicating the volume level which is represented by a given point in the
+   * {@link VolumeBar}.
+   *
+   * @extends Component
+   */
+  class MouseVolumeLevelDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-mouse-display'
+      });
+    }
+
+    /**
+     * Enquires updates to its own DOM as well as the DOM of its
+     * {@link VolumeLevelTooltip} child.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     */
+    update(rangeBarRect, rangeBarPoint, vertical) {
+      const volume = 100 * rangeBarPoint;
+      this.getChild('volumeLevelTooltip').updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, () => {
+        if (vertical) {
+          this.el_.style.bottom = `${rangeBarRect.height * rangeBarPoint}px`;
+        } else {
+          this.el_.style.left = `${rangeBarRect.width * rangeBarPoint}px`;
+        }
+      });
+    }
+  }
+
+  /**
+   * Default options for `MouseVolumeLevelDisplay`
+   *
+   * @type {Object}
+   * @private
+   */
+  MouseVolumeLevelDisplay.prototype.options_ = {
+    children: ['volumeLevelTooltip']
+  };
+  Component$1.registerComponent('MouseVolumeLevelDisplay', MouseVolumeLevelDisplay);
+
+  /**
+   * @file volume-bar.js
+   */
+
+  /**
+   * The bar that contains the volume level and can be clicked on to adjust the level
+   *
+   * @extends Slider
+   */
+  class VolumeBar extends Slider {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on('slideractive', e => this.updateLastVolume_(e));
+      this.on(player, 'volumechange', e => this.updateARIAAttributes(e));
+      player.ready(() => this.updateARIAAttributes());
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-volume-bar vjs-slider-bar'
+      }, {
+        'aria-label': this.localize('Volume Level'),
+        'aria-live': 'polite'
+      });
+    }
+
+    /**
+     * Handle mouse down on volume bar
+     *
+     * @param {Event} event
+     *        The `mousedown` event that caused this to run.
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+      super.handleMouseDown(event);
+    }
+
+    /**
+     * Handle movement events on the {@link VolumeMenuButton}.
+     *
+     * @param {Event} event
+     *        The event that caused this function to run.
+     *
+     * @listens mousemove
+     */
+    handleMouseMove(event) {
+      const mouseVolumeLevelDisplay = this.getChild('mouseVolumeLevelDisplay');
+      if (mouseVolumeLevelDisplay) {
+        const volumeBarEl = this.el();
+        const volumeBarRect = getBoundingClientRect(volumeBarEl);
+        const vertical = this.vertical();
+        let volumeBarPoint = getPointerPosition(volumeBarEl, event);
+        volumeBarPoint = vertical ? volumeBarPoint.y : volumeBarPoint.x;
+        // The default skin has a gap on either side of the `VolumeBar`. This means
+        // that it's possible to trigger this behavior outside the boundaries of
+        // the `VolumeBar`. This ensures we stay within it at all times.
+        volumeBarPoint = clamp(volumeBarPoint, 0, 1);
+        mouseVolumeLevelDisplay.update(volumeBarRect, volumeBarPoint, vertical);
+      }
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+      this.checkMuted();
+      this.player_.volume(this.calculateDistance(event));
+    }
+
+    /**
+     * If the player is muted unmute it.
+     */
+    checkMuted() {
+      if (this.player_.muted()) {
+        this.player_.muted(false);
+      }
+    }
+
+    /**
+     * Get percent of volume level
+     *
+     * @return {number}
+     *         Volume level percent as a decimal number.
+     */
+    getPercent() {
+      if (this.player_.muted()) {
+        return 0;
+      }
+      return this.player_.volume();
+    }
+
+    /**
+     * Increase volume level for keyboard users
+     */
+    stepForward() {
+      this.checkMuted();
+      this.player_.volume(this.player_.volume() + 0.1);
+    }
+
+    /**
+     * Decrease volume level for keyboard users
+     */
+    stepBack() {
+      this.checkMuted();
+      this.player_.volume(this.player_.volume() - 0.1);
+    }
+
+    /**
+     * Update ARIA accessibility attributes
+     *
+     * @param {Event} [event]
+     *        The `volumechange` event that caused this function to run.
+     *
+     * @listens Player#volumechange
+     */
+    updateARIAAttributes(event) {
+      const ariaValue = this.player_.muted() ? 0 : this.volumeAsPercentage_();
+      this.el_.setAttribute('aria-valuenow', ariaValue);
+      this.el_.setAttribute('aria-valuetext', ariaValue + '%');
+    }
+
+    /**
+     * Returns the current value of the player volume as a percentage
+     *
+     * @private
+     */
+    volumeAsPercentage_() {
+      return Math.round(this.player_.volume() * 100);
+    }
+
+    /**
+     * When user starts dragging the VolumeBar, store the volume and listen for
+     * the end of the drag. When the drag ends, if the volume was set to zero,
+     * set lastVolume to the stored volume.
+     *
+     * @listens slideractive
+     * @private
+     */
+    updateLastVolume_() {
+      const volumeBeforeDrag = this.player_.volume();
+      this.one('sliderinactive', () => {
+        if (this.player_.volume() === 0) {
+          this.player_.lastVolume_(volumeBeforeDrag);
+        }
+      });
+    }
+  }
+
+  /**
+   * Default options for the `VolumeBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumeBar.prototype.options_ = {
+    children: ['volumeLevel'],
+    barName: 'volumeLevel'
+  };
+
+  // MouseVolumeLevelDisplay tooltip should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    VolumeBar.prototype.options_.children.splice(0, 0, 'mouseVolumeLevelDisplay');
+  }
+
+  /**
+   * Call the update event for this Slider when this event happens on the player.
+   *
+   * @type {string}
+   */
+  VolumeBar.prototype.playerEvent = 'volumechange';
+  Component$1.registerComponent('VolumeBar', VolumeBar);
+
+  /**
+   * @file volume-control.js
+   */
+
+  /**
+   * The component for controlling the volume level
+   *
+   * @extends Component
+   */
+  class VolumeControl extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.vertical = options.vertical || false;
+
+      // Pass the vertical option down to the VolumeBar if
+      // the VolumeBar is turned on.
+      if (typeof options.volumeBar === 'undefined' || isPlain(options.volumeBar)) {
+        options.volumeBar = options.volumeBar || {};
+        options.volumeBar.vertical = options.vertical;
+      }
+      super(player, options);
+
+      // hide this control if volume support is missing
+      checkVolumeSupport(this, player);
+      this.throttledHandleMouseMove = throttle(bind_(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+      this.handleMouseUpHandler_ = e => this.handleMouseUp(e);
+      this.on('mousedown', e => this.handleMouseDown(e));
+      this.on('touchstart', e => this.handleMouseDown(e));
+      this.on('mousemove', e => this.handleMouseMove(e));
+
+      // while the slider is active (the mouse has been pressed down and
+      // is dragging) or in focus we do not want to hide the VolumeBar
+      this.on(this.volumeBar, ['focus', 'slideractive'], () => {
+        this.volumeBar.addClass('vjs-slider-active');
+        this.addClass('vjs-slider-active');
+        this.trigger('slideractive');
+      });
+      this.on(this.volumeBar, ['blur', 'sliderinactive'], () => {
+        this.volumeBar.removeClass('vjs-slider-active');
+        this.removeClass('vjs-slider-active');
+        this.trigger('sliderinactive');
+      });
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      let orientationClass = 'vjs-volume-horizontal';
+      if (this.options_.vertical) {
+        orientationClass = 'vjs-volume-vertical';
+      }
+      return super.createEl('div', {
+        className: `vjs-volume-control vjs-control ${orientationClass}`
+      });
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseDown(event) {
+      const doc = this.el_.ownerDocument;
+      this.on(doc, 'mousemove', this.throttledHandleMouseMove);
+      this.on(doc, 'touchmove', this.throttledHandleMouseMove);
+      this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.on(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      const doc = this.el_.ownerDocument;
+      this.off(doc, 'mousemove', this.throttledHandleMouseMove);
+      this.off(doc, 'touchmove', this.throttledHandleMouseMove);
+      this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.off(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseMove(event) {
+      this.volumeBar.handleMouseMove(event);
+    }
+  }
+
+  /**
+   * Default options for the `VolumeControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumeControl.prototype.options_ = {
+    children: ['volumeBar']
+  };
+  Component$1.registerComponent('VolumeControl', VolumeControl);
+
+  /**
+   * Check if muting volume is supported and if it isn't hide the mute toggle
+   * button.
+   *
+   * @param { import('../../component').default } self
+   *        A reference to the mute toggle button
+   *
+   * @param { import('../../player').default } player
+   *        A reference to the player
+   *
+   * @private
+   */
+  const checkMuteSupport = function (self, player) {
+    // hide mute toggle button if it's not supported by the current tech
+    if (player.tech_ && !player.tech_.featuresMuteControl) {
+      self.addClass('vjs-hidden');
+    }
+    self.on(player, 'loadstart', function () {
+      if (!player.tech_.featuresMuteControl) {
+        self.addClass('vjs-hidden');
+      } else {
+        self.removeClass('vjs-hidden');
+      }
+    });
+  };
+
+  /**
+   * @file mute-toggle.js
+   */
+
+  /**
+   * A button component for muting the audio.
+   *
+   * @extends Button
+   */
+  class MuteToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+
+      // hide this control if volume support is missing
+      checkMuteSupport(this, player);
+      this.on(player, ['loadstart', 'volumechange'], e => this.update(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-mute-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when an `MuteToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const vol = this.player_.volume();
+      const lastVolume = this.player_.lastVolume_();
+      if (vol === 0) {
+        const volumeToSet = lastVolume < 0.1 ? 0.1 : lastVolume;
+        this.player_.volume(volumeToSet);
+        this.player_.muted(false);
+      } else {
+        this.player_.muted(this.player_.muted() ? false : true);
+      }
+    }
+
+    /**
+     * Update the `MuteToggle` button based on the state of `volume` and `muted`
+     * on the player.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#loadstart} event if this function was called
+     *        through an event.
+     *
+     * @listens Player#loadstart
+     * @listens Player#volumechange
+     */
+    update(event) {
+      this.updateIcon_();
+      this.updateControlText_();
+    }
+
+    /**
+     * Update the appearance of the `MuteToggle` icon.
+     *
+     * Possible states (given `level` variable below):
+     * - 0: crossed out
+     * - 1: zero bars of volume
+     * - 2: one bar of volume
+     * - 3: two bars of volume
+     *
+     * @private
+     */
+    updateIcon_() {
+      const vol = this.player_.volume();
+      let level = 3;
+      this.setIcon('volume-high');
+
+      // in iOS when a player is loaded with muted attribute
+      // and volume is changed with a native mute button
+      // we want to make sure muted state is updated
+      if (IS_IOS && this.player_.tech_ && this.player_.tech_.el_) {
+        this.player_.muted(this.player_.tech_.el_.muted);
+      }
+      if (vol === 0 || this.player_.muted()) {
+        this.setIcon('volume-mute');
+        level = 0;
+      } else if (vol < 0.33) {
+        this.setIcon('volume-low');
+        level = 1;
+      } else if (vol < 0.67) {
+        this.setIcon('volume-medium');
+        level = 2;
+      }
+      removeClass(this.el_, [0, 1, 2, 3].reduce((str, i) => str + `${i ? ' ' : ''}vjs-vol-${i}`, ''));
+      addClass(this.el_, `vjs-vol-${level}`);
+    }
+
+    /**
+     * If `muted` has changed on the player, update the control text
+     * (`title` attribute on `vjs-mute-control` element and content of
+     * `vjs-control-text` element).
+     *
+     * @private
+     */
+    updateControlText_() {
+      const soundOff = this.player_.muted() || this.player_.volume() === 0;
+      const text = soundOff ? 'Unmute' : 'Mute';
+      if (this.controlText() !== text) {
+        this.controlText(text);
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `MuteToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  MuteToggle.prototype.controlText_ = 'Mute';
+  Component$1.registerComponent('MuteToggle', MuteToggle);
+
+  /**
+   * @file volume-control.js
+   */
+
+  /**
+   * A Component to contain the MuteToggle and VolumeControl so that
+   * they can work together.
+   *
+   * @extends Component
+   */
+  class VolumePanel extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      if (typeof options.inline !== 'undefined') {
+        options.inline = options.inline;
+      } else {
+        options.inline = true;
+      }
+
+      // pass the inline option down to the VolumeControl as vertical if
+      // the VolumeControl is on.
+      if (typeof options.volumeControl === 'undefined' || isPlain(options.volumeControl)) {
+        options.volumeControl = options.volumeControl || {};
+        options.volumeControl.vertical = !options.inline;
+      }
+      super(player, options);
+
+      // this handler is used by mouse handler methods below
+      this.handleKeyPressHandler_ = e => this.handleKeyPress(e);
+      this.on(player, ['loadstart'], e => this.volumePanelState_(e));
+      this.on(this.muteToggle, 'keyup', e => this.handleKeyPress(e));
+      this.on(this.volumeControl, 'keyup', e => this.handleVolumeControlKeyUp(e));
+      this.on('keydown', e => this.handleKeyPress(e));
+      this.on('mouseover', e => this.handleMouseOver(e));
+      this.on('mouseout', e => this.handleMouseOut(e));
+
+      // while the slider is active (the mouse has been pressed down and
+      // is dragging) we do not want to hide the VolumeBar
+      this.on(this.volumeControl, ['slideractive'], this.sliderActive_);
+      this.on(this.volumeControl, ['sliderinactive'], this.sliderInactive_);
+    }
+
+    /**
+     * Add vjs-slider-active class to the VolumePanel
+     *
+     * @listens VolumeControl#slideractive
+     * @private
+     */
+    sliderActive_() {
+      this.addClass('vjs-slider-active');
+    }
+
+    /**
+     * Removes vjs-slider-active class to the VolumePanel
+     *
+     * @listens VolumeControl#sliderinactive
+     * @private
+     */
+    sliderInactive_() {
+      this.removeClass('vjs-slider-active');
+    }
+
+    /**
+     * Adds vjs-hidden or vjs-mute-toggle-only to the VolumePanel
+     * depending on MuteToggle and VolumeControl state
+     *
+     * @listens Player#loadstart
+     * @private
+     */
+    volumePanelState_() {
+      // hide volume panel if neither volume control or mute toggle
+      // are displayed
+      if (this.volumeControl.hasClass('vjs-hidden') && this.muteToggle.hasClass('vjs-hidden')) {
+        this.addClass('vjs-hidden');
+      }
+
+      // if only mute toggle is visible we don't want
+      // volume panel expanding when hovered or active
+      if (this.volumeControl.hasClass('vjs-hidden') && !this.muteToggle.hasClass('vjs-hidden')) {
+        this.addClass('vjs-mute-toggle-only');
+      }
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      let orientationClass = 'vjs-volume-panel-horizontal';
+      if (!this.options_.inline) {
+        orientationClass = 'vjs-volume-panel-vertical';
+      }
+      return super.createEl('div', {
+        className: `vjs-volume-panel vjs-control ${orientationClass}`
+      });
+    }
+
+    /**
+     * Dispose of the `volume-panel` and all child components.
+     */
+    dispose() {
+      this.handleMouseOut();
+      super.dispose();
+    }
+
+    /**
+     * Handles `keyup` events on the `VolumeControl`, looking for ESC, which closes
+     * the volume panel and sets focus on `MuteToggle`.
+     *
+     * @param {Event} event
+     *        The `keyup` event that caused this function to be called.
+     *
+     * @listens keyup
+     */
+    handleVolumeControlKeyUp(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        this.muteToggle.focus();
+      }
+    }
+
+    /**
+     * This gets called when a `VolumePanel` gains hover via a `mouseover` event.
+     * Turns on listening for `mouseover` event. When they happen it
+     * calls `this.handleMouseOver`.
+     *
+     * @param {Event} event
+     *        The `mouseover` event that caused this function to be called.
+     *
+     * @listens mouseover
+     */
+    handleMouseOver(event) {
+      this.addClass('vjs-hover');
+      on(document, 'keyup', this.handleKeyPressHandler_);
+    }
+
+    /**
+     * This gets called when a `VolumePanel` gains hover via a `mouseout` event.
+     * Turns on listening for `mouseout` event. When they happen it
+     * calls `this.handleMouseOut`.
+     *
+     * @param {Event} event
+     *        The `mouseout` event that caused this function to be called.
+     *
+     * @listens mouseout
+     */
+    handleMouseOut(event) {
+      this.removeClass('vjs-hover');
+      off(document, 'keyup', this.handleKeyPressHandler_);
+    }
+
+    /**
+     * Handles `keyup` event on the document or `keydown` event on the `VolumePanel`,
+     * looking for ESC, which hides the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        The keypress that triggered this event.
+     *
+     * @listens keydown | keyup
+     */
+    handleKeyPress(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        this.handleMouseOut();
+      }
+    }
+  }
+
+  /**
+   * Default options for the `VolumeControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumePanel.prototype.options_ = {
+    children: ['muteToggle', 'volumeControl']
+  };
+  Component$1.registerComponent('VolumePanel', VolumePanel);
+
+  /**
+   * Button to skip forward a configurable amount of time
+   * through a video. Renders in the control bar.
+   *
+   * e.g. options: {controlBar: {skipButtons: forward: 5}}
+   *
+   * @extends Button
+   */
+  class SkipForward extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.validOptions = [5, 10, 30];
+      this.skipTime = this.getSkipForwardTime();
+      if (this.skipTime && this.validOptions.includes(this.skipTime)) {
+        this.setIcon(`forward-${this.skipTime}`);
+        this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime.toLocaleString(player.language())]));
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+    getSkipForwardTime() {
+      const playerOptions = this.options_.playerOptions;
+      return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.forward;
+    }
+    buildCSSClass() {
+      return `vjs-skip-forward-${this.getSkipForwardTime()} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * On click, skips forward in the duration/seekable range by a configurable amount of seconds.
+     * If the time left in the duration/seekable range is less than the configured 'skip forward' time,
+     * skips to end of duration/seekable range.
+     *
+     * Handle a click on a `SkipForward` button
+     *
+     * @param {EventTarget~Event} event
+     *        The `click` event that caused this function
+     *        to be called
+     */
+    handleClick(event) {
+      if (isNaN(this.player_.duration())) {
+        return;
+      }
+      const currentVideoTime = this.player_.currentTime();
+      const liveTracker = this.player_.liveTracker;
+      const duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
+      let newTime;
+      if (currentVideoTime + this.skipTime <= duration) {
+        newTime = currentVideoTime + this.skipTime;
+      } else {
+        newTime = duration;
+      }
+      this.player_.currentTime(newTime);
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime]));
+    }
+  }
+  SkipForward.prototype.controlText_ = 'Skip Forward';
+  Component$1.registerComponent('SkipForward', SkipForward);
+
+  /**
+   * Button to skip backward a configurable amount of time
+   * through a video. Renders in the control bar.
+   *
+   *  * e.g. options: {controlBar: {skipButtons: backward: 5}}
+   *
+   * @extends Button
+   */
+  class SkipBackward extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.validOptions = [5, 10, 30];
+      this.skipTime = this.getSkipBackwardTime();
+      if (this.skipTime && this.validOptions.includes(this.skipTime)) {
+        this.setIcon(`replay-${this.skipTime}`);
+        this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime.toLocaleString(player.language())]));
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+    getSkipBackwardTime() {
+      const playerOptions = this.options_.playerOptions;
+      return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.backward;
+    }
+    buildCSSClass() {
+      return `vjs-skip-backward-${this.getSkipBackwardTime()} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * On click, skips backward in the video by a configurable amount of seconds.
+     * If the current time in the video is less than the configured 'skip backward' time,
+     * skips to beginning of video or seekable range.
+     *
+     * Handle a click on a `SkipBackward` button
+     *
+     * @param {EventTarget~Event} event
+     *        The `click` event that caused this function
+     *        to be called
+     */
+    handleClick(event) {
+      const currentVideoTime = this.player_.currentTime();
+      const liveTracker = this.player_.liveTracker;
+      const seekableStart = liveTracker && liveTracker.isLive() && liveTracker.seekableStart();
+      let newTime;
+      if (seekableStart && currentVideoTime - this.skipTime <= seekableStart) {
+        newTime = seekableStart;
+      } else if (currentVideoTime >= this.skipTime) {
+        newTime = currentVideoTime - this.skipTime;
+      } else {
+        newTime = 0;
+      }
+      this.player_.currentTime(newTime);
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime]));
+    }
+  }
+  SkipBackward.prototype.controlText_ = 'Skip Backward';
+  Component$1.registerComponent('SkipBackward', SkipBackward);
+
+  /**
+   * @file menu.js
+   */
+
+  /**
+   * The Menu component is used to build popup menus, including subtitle and
+   * captions selection menus.
+   *
+   * @extends Component
+   */
+  class Menu extends Component$1 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        the player that this component should attach to
+     *
+     * @param {Object} [options]
+     *        Object of option names and values
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      if (options) {
+        this.menuButton_ = options.menuButton;
+      }
+      this.focusedChild_ = -1;
+      this.on('keydown', e => this.handleKeyDown(e));
+
+      // All the menu item instances share the same blur handler provided by the menu container.
+      this.boundHandleBlur_ = e => this.handleBlur(e);
+      this.boundHandleTapClick_ = e => this.handleTapClick(e);
+    }
+
+    /**
+     * Add event listeners to the {@link MenuItem}.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem` to add listeners to.
+     *
+     */
+    addEventListenerForItem(component) {
+      if (!(component instanceof Component$1)) {
+        return;
+      }
+      this.on(component, 'blur', this.boundHandleBlur_);
+      this.on(component, ['tap', 'click'], this.boundHandleTapClick_);
+    }
+
+    /**
+     * Remove event listeners from the {@link MenuItem}.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem` to remove listeners.
+     *
+     */
+    removeEventListenerForItem(component) {
+      if (!(component instanceof Component$1)) {
+        return;
+      }
+      this.off(component, 'blur', this.boundHandleBlur_);
+      this.off(component, ['tap', 'click'], this.boundHandleTapClick_);
+    }
+
+    /**
+     * This method will be called indirectly when the component has been added
+     * before the component adds to the new menu instance by `addItem`.
+     * In this case, the original menu instance will remove the component
+     * by calling `removeChild`.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem`
+     */
+    removeChild(component) {
+      if (typeof component === 'string') {
+        component = this.getChild(component);
+      }
+      this.removeEventListenerForItem(component);
+      super.removeChild(component);
+    }
+
+    /**
+     * Add a {@link MenuItem} to the menu.
+     *
+     * @param {Object|string} component
+     *        The name or instance of the `MenuItem` to add.
+     *
+     */
+    addItem(component) {
+      const childComponent = this.addChild(component);
+      if (childComponent) {
+        this.addEventListenerForItem(childComponent);
+      }
+    }
+
+    /**
+     * Create the `Menu`s DOM element.
+     *
+     * @return {Element}
+     *         the element that was created
+     */
+    createEl() {
+      const contentElType = this.options_.contentElType || 'ul';
+      this.contentEl_ = createEl(contentElType, {
+        className: 'vjs-menu-content'
+      });
+      this.contentEl_.setAttribute('role', 'menu');
+      const el = super.createEl('div', {
+        append: this.contentEl_,
+        className: 'vjs-menu'
+      });
+      el.appendChild(this.contentEl_);
+
+      // Prevent clicks from bubbling up. Needed for Menu Buttons,
+      // where a click on the parent is significant
+      on(el, 'click', function (event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      });
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.boundHandleBlur_ = null;
+      this.boundHandleTapClick_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Called when a `MenuItem` loses focus.
+     *
+     * @param {Event} event
+     *        The `blur` event that caused this function to be called.
+     *
+     * @listens blur
+     */
+    handleBlur(event) {
+      const relatedTarget = event.relatedTarget || document.activeElement;
+
+      // Close menu popup when a user clicks outside the menu
+      if (!this.children().some(element => {
+        return element.el() === relatedTarget;
+      })) {
+        const btn = this.menuButton_;
+        if (btn && btn.buttonPressed_ && relatedTarget !== btn.el().firstChild) {
+          btn.unpressButton();
+        }
+      }
+    }
+
+    /**
+     * Called when a `MenuItem` gets clicked or tapped.
+     *
+     * @param {Event} event
+     *        The `click` or `tap` event that caused this function to be called.
+     *
+     * @listens click,tap
+     */
+    handleTapClick(event) {
+      // Unpress the associated MenuButton, and move focus back to it
+      if (this.menuButton_) {
+        this.menuButton_.unpressButton();
+        const childComponents = this.children();
+        if (!Array.isArray(childComponents)) {
+          return;
+        }
+        const foundComponent = childComponents.filter(component => component.el() === event.target)[0];
+        if (!foundComponent) {
+          return;
+        }
+
+        // don't focus menu button if item is a caption settings item
+        // because focus will move elsewhere
+        if (foundComponent.name() !== 'CaptionSettingsMenuItem') {
+          this.menuButton_.focus();
+        }
+      }
+    }
+
+    /**
+     * Handle a `keydown` event on this menu. This listener is added in the constructor.
+     *
+     * @param {KeyboardEvent} event
+     *        A `keydown` event that happened on the menu.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Left and Down Arrows
+      if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepForward();
+
+        // Up and Right Arrows
+      } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepBack();
+      }
+    }
+
+    /**
+     * Move to next (lower) menu item for keyboard users.
+     */
+    stepForward() {
+      let stepChild = 0;
+      if (this.focusedChild_ !== undefined) {
+        stepChild = this.focusedChild_ + 1;
+      }
+      this.focus(stepChild);
+    }
+
+    /**
+     * Move to previous (higher) menu item for keyboard users.
+     */
+    stepBack() {
+      let stepChild = 0;
+      if (this.focusedChild_ !== undefined) {
+        stepChild = this.focusedChild_ - 1;
+      }
+      this.focus(stepChild);
+    }
+
+    /**
+     * Set focus on a {@link MenuItem} in the `Menu`.
+     *
+     * @param {Object|string} [item=0]
+     *        Index of child item set focus on.
+     */
+    focus(item = 0) {
+      const children = this.children().slice();
+      const haveTitle = children.length && children[0].hasClass('vjs-menu-title');
+      if (haveTitle) {
+        children.shift();
+      }
+      if (children.length > 0) {
+        if (item < 0) {
+          item = 0;
+        } else if (item >= children.length) {
+          item = children.length - 1;
+        }
+        this.focusedChild_ = item;
+        children[item].el_.focus();
+      }
+    }
+  }
+  Component$1.registerComponent('Menu', Menu);
+
+  /**
+   * @file menu-button.js
+   */
+
+  /**
+   * A `MenuButton` class for any popup {@link Menu}.
+   *
+   * @extends Component
+   */
+  class MenuButton extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+      this.menuButton_ = new Button(player, options);
+      this.menuButton_.controlText(this.controlText_);
+      this.menuButton_.el_.setAttribute('aria-haspopup', 'true');
+
+      // Add buildCSSClass values to the button, not the wrapper
+      const buttonClass = Button.prototype.buildCSSClass();
+      this.menuButton_.el_.className = this.buildCSSClass() + ' ' + buttonClass;
+      this.menuButton_.removeClass('vjs-control');
+      this.addChild(this.menuButton_);
+      this.update();
+      this.enabled_ = true;
+      const handleClick = e => this.handleClick(e);
+      this.handleMenuKeyUp_ = e => this.handleMenuKeyUp(e);
+      this.on(this.menuButton_, 'tap', handleClick);
+      this.on(this.menuButton_, 'click', handleClick);
+      this.on(this.menuButton_, 'keydown', e => this.handleKeyDown(e));
+      this.on(this.menuButton_, 'mouseenter', () => {
+        this.addClass('vjs-hover');
+        this.menu.show();
+        on(document, 'keyup', this.handleMenuKeyUp_);
+      });
+      this.on('mouseleave', e => this.handleMouseLeave(e));
+      this.on('keydown', e => this.handleSubmenuKeyDown(e));
+    }
+
+    /**
+     * Update the menu based on the current state of its items.
+     */
+    update() {
+      const menu = this.createMenu();
+      if (this.menu) {
+        this.menu.dispose();
+        this.removeChild(this.menu);
+      }
+      this.menu = menu;
+      this.addChild(menu);
+
+      /**
+       * Track the state of the menu button
+       *
+       * @type {Boolean}
+       * @private
+       */
+      this.buttonPressed_ = false;
+      this.menuButton_.el_.setAttribute('aria-expanded', 'false');
+      if (this.items && this.items.length <= this.hideThreshold_) {
+        this.hide();
+        this.menu.contentEl_.removeAttribute('role');
+      } else {
+        this.show();
+        this.menu.contentEl_.setAttribute('role', 'menu');
+      }
+    }
+
+    /**
+     * Create the menu and add all items to it.
+     *
+     * @return {Menu}
+     *         The constructed menu
+     */
+    createMenu() {
+      const menu = new Menu(this.player_, {
+        menuButton: this
+      });
+
+      /**
+       * Hide the menu if the number of items is less than or equal to this threshold. This defaults
+       * to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list
+       * it here because every time we run `createMenu` we need to reset the value.
+       *
+       * @protected
+       * @type {Number}
+       */
+      this.hideThreshold_ = 0;
+
+      // Add a title list item to the top
+      if (this.options_.title) {
+        const titleEl = createEl('li', {
+          className: 'vjs-menu-title',
+          textContent: toTitleCase$1(this.options_.title),
+          tabIndex: -1
+        });
+        const titleComponent = new Component$1(this.player_, {
+          el: titleEl
+        });
+        menu.addItem(titleComponent);
+      }
+      this.items = this.createItems();
+      if (this.items) {
+        // Add menu items to the menu
+        for (let i = 0; i < this.items.length; i++) {
+          menu.addItem(this.items[i]);
+        }
+      }
+      return menu;
+    }
+
+    /**
+     * Create the list of menu items. Specific to each subclass.
+     *
+     * @abstract
+     */
+    createItems() {}
+
+    /**
+     * Create the `MenuButtons`s DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildWrapperCSSClass()
+      }, {});
+    }
+
+    /**
+     * Overwrites the `setIcon` method from `Component`.
+     * In this case, we want the icon to be appended to the menuButton.
+     *
+     * @param {string} name
+     *         The icon name to be added.
+     */
+    setIcon(name) {
+      super.setIcon(name, this.menuButton_.el_);
+    }
+
+    /**
+     * Allow sub components to stack CSS class names for the wrapper element
+     *
+     * @return {string}
+     *         The constructed wrapper DOM `className`
+     */
+    buildWrapperCSSClass() {
+      let menuButtonClass = 'vjs-menu-button';
+
+      // If the inline option is passed, we want to use different styles altogether.
+      if (this.options_.inline === true) {
+        menuButtonClass += '-inline';
+      } else {
+        menuButtonClass += '-popup';
+      }
+
+      // TODO: Fix the CSS so that this isn't necessary
+      const buttonClass = Button.prototype.buildCSSClass();
+      return `vjs-menu-button ${menuButtonClass} ${buttonClass} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      let menuButtonClass = 'vjs-menu-button';
+
+      // If the inline option is passed, we want to use different styles altogether.
+      if (this.options_.inline === true) {
+        menuButtonClass += '-inline';
+      } else {
+        menuButtonClass += '-popup';
+      }
+      return `vjs-menu-button ${menuButtonClass} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Get or set the localized control text that will be used for accessibility.
+     *
+     * > NOTE: This will come from the internal `menuButton_` element.
+     *
+     * @param {string} [text]
+     *        Control text for element.
+     *
+     * @param {Element} [el=this.menuButton_.el()]
+     *        Element to set the title on.
+     *
+     * @return {string}
+     *         - The control text when getting
+     */
+    controlText(text, el = this.menuButton_.el()) {
+      return this.menuButton_.controlText(text, el);
+    }
+
+    /**
+     * Dispose of the `menu-button` and all child components.
+     */
+    dispose() {
+      this.handleMouseLeave();
+      super.dispose();
+    }
+
+    /**
+     * Handle a click on a `MenuButton`.
+     * See {@link ClickableComponent#handleClick} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (this.buttonPressed_) {
+        this.unpressButton();
+      } else {
+        this.pressButton();
+      }
+    }
+
+    /**
+     * Handle `mouseleave` for `MenuButton`.
+     *
+     * @param {Event} event
+     *        The `mouseleave` event that caused this function to be called.
+     *
+     * @listens mouseleave
+     */
+    handleMouseLeave(event) {
+      this.removeClass('vjs-hover');
+      off(document, 'keyup', this.handleMenuKeyUp_);
+    }
+
+    /**
+     * Set the focus to the actual button, not to this element
+     */
+    focus() {
+      this.menuButton_.focus();
+    }
+
+    /**
+     * Remove the focus from the actual button, not this element
+     */
+    blur() {
+      this.menuButton_.blur();
+    }
+
+    /**
+     * Handle tab, escape, down arrow, and up arrow keys for `MenuButton`. See
+     * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Escape or Tab unpress the 'button'
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        if (this.buttonPressed_) {
+          this.unpressButton();
+        }
+
+        // Don't preventDefault for Tab key - we still want to lose focus
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.preventDefault();
+          // Set focus back to the menu button's button
+          this.menuButton_.focus();
+        }
+        // Up Arrow or Down Arrow also 'press' the button to open the menu
+      } else if (keycode.isEventKey(event, 'Up') || keycode.isEventKey(event, 'Down')) {
+        if (!this.buttonPressed_) {
+          event.preventDefault();
+          this.pressButton();
+        }
+      }
+    }
+
+    /**
+     * Handle a `keyup` event on a `MenuButton`. The listener for this is added in
+     * the constructor.
+     *
+     * @param {Event} event
+     *        Key press event
+     *
+     * @listens keyup
+     */
+    handleMenuKeyUp(event) {
+      // Escape hides popup menu
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        this.removeClass('vjs-hover');
+      }
+    }
+
+    /**
+     * This method name now delegates to `handleSubmenuKeyDown`. This means
+     * anyone calling `handleSubmenuKeyPress` will not see their method calls
+     * stop working.
+     *
+     * @param {Event} event
+     *        The event that caused this function to be called.
+     */
+    handleSubmenuKeyPress(event) {
+      this.handleSubmenuKeyDown(event);
+    }
+
+    /**
+     * Handle a `keydown` event on a sub-menu. The listener for this is added in
+     * the constructor.
+     *
+     * @param {Event} event
+     *        Key press event
+     *
+     * @listens keydown
+     */
+    handleSubmenuKeyDown(event) {
+      // Escape or Tab unpress the 'button'
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        if (this.buttonPressed_) {
+          this.unpressButton();
+        }
+        // Don't preventDefault for Tab key - we still want to lose focus
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.preventDefault();
+          // Set focus back to the menu button's button
+          this.menuButton_.focus();
+        }
+      }
+    }
+
+    /**
+     * Put the current `MenuButton` into a pressed state.
+     */
+    pressButton() {
+      if (this.enabled_) {
+        this.buttonPressed_ = true;
+        this.menu.show();
+        this.menu.lockShowing();
+        this.menuButton_.el_.setAttribute('aria-expanded', 'true');
+
+        // set the focus into the submenu, except on iOS where it is resulting in
+        // undesired scrolling behavior when the player is in an iframe
+        if (IS_IOS && isInFrame()) {
+          // Return early so that the menu isn't focused
+          return;
+        }
+        this.menu.focus();
+      }
+    }
+
+    /**
+     * Take the current `MenuButton` out of a pressed state.
+     */
+    unpressButton() {
+      if (this.enabled_) {
+        this.buttonPressed_ = false;
+        this.menu.unlockShowing();
+        this.menu.hide();
+        this.menuButton_.el_.setAttribute('aria-expanded', 'false');
+      }
+    }
+
+    /**
+     * Disable the `MenuButton`. Don't allow it to be clicked.
+     */
+    disable() {
+      this.unpressButton();
+      this.enabled_ = false;
+      this.addClass('vjs-disabled');
+      this.menuButton_.disable();
+    }
+
+    /**
+     * Enable the `MenuButton`. Allow it to be clicked.
+     */
+    enable() {
+      this.enabled_ = true;
+      this.removeClass('vjs-disabled');
+      this.menuButton_.enable();
+    }
+  }
+  Component$1.registerComponent('MenuButton', MenuButton);
+
+  /**
+   * @file track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific  track types (e.g. subtitles).
+   *
+   * @extends MenuButton
+   */
+  class TrackButton extends MenuButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const tracks = options.tracks;
+      super(player, options);
+      if (this.items.length <= 1) {
+        this.hide();
+      }
+      if (!tracks) {
+        return;
+      }
+      const updateHandler = bind_(this, this.update);
+      tracks.addEventListener('removetrack', updateHandler);
+      tracks.addEventListener('addtrack', updateHandler);
+      tracks.addEventListener('labelchange', updateHandler);
+      this.player_.on('ready', updateHandler);
+      this.player_.on('dispose', function () {
+        tracks.removeEventListener('removetrack', updateHandler);
+        tracks.removeEventListener('addtrack', updateHandler);
+        tracks.removeEventListener('labelchange', updateHandler);
+      });
+    }
+  }
+  Component$1.registerComponent('TrackButton', TrackButton);
+
+  /**
+   * @file menu-keys.js
+   */
+
+  /**
+    * All keys used for operation of a menu (`MenuButton`, `Menu`, and `MenuItem`)
+    * Note that 'Enter' and 'Space' are not included here (otherwise they would
+    * prevent the `MenuButton` and `MenuItem` from being keyboard-clickable)
+   *
+    * @typedef MenuKeys
+    * @array
+    */
+  const MenuKeys = ['Tab', 'Esc', 'Up', 'Down', 'Right', 'Left'];
+
+  /**
+   * @file menu-item.js
+   */
+
+  /**
+   * The component for a menu item. `<li>`
+   *
+   * @extends ClickableComponent
+   */
+  class MenuItem extends ClickableComponent {
+    /**
+     * Creates an instance of the this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.selectable = options.selectable;
+      this.isSelected_ = options.selected || false;
+      this.multiSelectable = options.multiSelectable;
+      this.selected(this.isSelected_);
+      if (this.selectable) {
+        if (this.multiSelectable) {
+          this.el_.setAttribute('role', 'menuitemcheckbox');
+        } else {
+          this.el_.setAttribute('role', 'menuitemradio');
+        }
+      } else {
+        this.el_.setAttribute('role', 'menuitem');
+      }
+    }
+
+    /**
+     * Create the `MenuItem's DOM element
+     *
+     * @param {string} [type=li]
+     *        Element's node type, not actually used, always set to `li`.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element
+     *
+     * @param {Object} [attrs={}]
+     *        An object of attributes that should be set on the element
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(type, props, attrs) {
+      // The control is textual, not just an icon
+      this.nonIconControl = true;
+      const el = super.createEl('li', Object.assign({
+        className: 'vjs-menu-item',
+        tabIndex: -1
+      }, props), attrs);
+
+      // swap icon with menu item text.
+      const menuItemEl = createEl('span', {
+        className: 'vjs-menu-item-text',
+        textContent: this.localize(this.options_.label)
+      });
+
+      // If using SVG icons, the element with vjs-icon-placeholder will be added separately.
+      if (this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(menuItemEl);
+      } else {
+        el.replaceChild(menuItemEl, el.querySelector('.vjs-icon-placeholder'));
+      }
+      return el;
+    }
+
+    /**
+     * Ignore keys which are used by the menu, but pass any other ones up. See
+     * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      if (!MenuKeys.some(key => keycode.isEventKey(event, key))) {
+        // Pass keydown handling up for unused keys
+        super.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Any click on a `MenuItem` puts it into the selected state.
+     * See {@link ClickableComponent#handleClick} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      this.selected(true);
+    }
+
+    /**
+     * Set the state for this menu item as selected or not.
+     *
+     * @param {boolean} selected
+     *        if the menu item is selected or not
+     */
+    selected(selected) {
+      if (this.selectable) {
+        if (selected) {
+          this.addClass('vjs-selected');
+          this.el_.setAttribute('aria-checked', 'true');
+          // aria-checked isn't fully supported by browsers/screen readers,
+          // so indicate selected state to screen reader in the control text.
+          this.controlText(', selected');
+          this.isSelected_ = true;
+        } else {
+          this.removeClass('vjs-selected');
+          this.el_.setAttribute('aria-checked', 'false');
+          // Indicate un-selected state to screen reader
+          this.controlText('');
+          this.isSelected_ = false;
+        }
+      }
+    }
+  }
+  Component$1.registerComponent('MenuItem', MenuItem);
+
+  /**
+   * @file text-track-menu-item.js
+   */
+
+  /**
+   * The specific menu item type for selecting a language within a text track kind
+   *
+   * @extends MenuItem
+   */
+  class TextTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const tracks = player.textTracks();
+
+      // Modify options for parent MenuItem class's init.
+      options.label = track.label || track.language || 'Unknown';
+      options.selected = track.mode === 'showing';
+      super(player, options);
+      this.track = track;
+      // Determine the relevant kind(s) of tracks for this component and filter
+      // out empty kinds.
+      this.kinds = (options.kinds || [options.kind || this.track.kind]).filter(Boolean);
+      const changeHandler = (...args) => {
+        this.handleTracksChange.apply(this, args);
+      };
+      const selectedLanguageChangeHandler = (...args) => {
+        this.handleSelectedLanguageChange.apply(this, args);
+      };
+      player.on(['loadstart', 'texttrackchange'], changeHandler);
+      tracks.addEventListener('change', changeHandler);
+      tracks.addEventListener('selectedlanguagechange', selectedLanguageChangeHandler);
+      this.on('dispose', function () {
+        player.off(['loadstart', 'texttrackchange'], changeHandler);
+        tracks.removeEventListener('change', changeHandler);
+        tracks.removeEventListener('selectedlanguagechange', selectedLanguageChangeHandler);
+      });
+
+      // iOS7 doesn't dispatch change events to TextTrackLists when an
+      // associated track's mode changes. Without something like
+      // Object.observe() (also not present on iOS7), it's not
+      // possible to detect changes to the mode attribute and polyfill
+      // the change event. As a poor substitute, we manually dispatch
+      // change events whenever the controls modify the mode.
+      if (tracks.onchange === undefined) {
+        let event;
+        this.on(['tap', 'click'], function () {
+          if (typeof window.Event !== 'object') {
+            // Android 2.3 throws an Illegal Constructor error for window.Event
+            try {
+              event = new window.Event('change');
+            } catch (err) {
+              // continue regardless of error
+            }
+          }
+          if (!event) {
+            event = document.createEvent('Event');
+            event.initEvent('change', true, true);
+          }
+          tracks.dispatchEvent(event);
+        });
+      }
+
+      // set the default state based on current tracks
+      this.handleTracksChange();
+    }
+
+    /**
+     * This gets called when an `TextTrackMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const referenceTrack = this.track;
+      const tracks = this.player_.textTracks();
+      super.handleClick(event);
+      if (!tracks) {
+        return;
+      }
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+
+        // If the track from the text tracks list is not of the right kind,
+        // skip it. We do not want to affect tracks of incompatible kind(s).
+        if (this.kinds.indexOf(track.kind) === -1) {
+          continue;
+        }
+
+        // If this text track is the component's track and it is not showing,
+        // set it to showing.
+        if (track === referenceTrack) {
+          if (track.mode !== 'showing') {
+            track.mode = 'showing';
+          }
+
+          // If this text track is not the component's track and it is not
+          // disabled, set it to disabled.
+        } else if (track.mode !== 'disabled') {
+          track.mode = 'disabled';
+        }
+      }
+    }
+
+    /**
+     * Handle text track list change
+     *
+     * @param {Event} event
+     *        The `change` event that caused this function to be called.
+     *
+     * @listens TextTrackList#change
+     */
+    handleTracksChange(event) {
+      const shouldBeSelected = this.track.mode === 'showing';
+
+      // Prevent redundant selected() calls because they may cause
+      // screen readers to read the appended control text unnecessarily
+      if (shouldBeSelected !== this.isSelected_) {
+        this.selected(shouldBeSelected);
+      }
+    }
+    handleSelectedLanguageChange(event) {
+      if (this.track.mode === 'showing') {
+        const selectedLanguage = this.player_.cache_.selectedLanguage;
+
+        // Don't replace the kind of track across the same language
+        if (selectedLanguage && selectedLanguage.enabled && selectedLanguage.language === this.track.language && selectedLanguage.kind !== this.track.kind) {
+          return;
+        }
+        this.player_.cache_.selectedLanguage = {
+          enabled: true,
+          language: this.track.language,
+          kind: this.track.kind
+        };
+      }
+    }
+    dispose() {
+      // remove reference to track object on dispose
+      this.track = null;
+      super.dispose();
+    }
+  }
+  Component$1.registerComponent('TextTrackMenuItem', TextTrackMenuItem);
+
+  /**
+   * @file off-text-track-menu-item.js
+   */
+
+  /**
+   * A special menu item for turning off a specific type of text track
+   *
+   * @extends TextTrackMenuItem
+   */
+  class OffTextTrackMenuItem extends TextTrackMenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      // Create pseudo track info
+      // Requires options['kind']
+      options.track = {
+        player,
+        // it is no longer necessary to store `kind` or `kinds` on the track itself
+        // since they are now stored in the `kinds` property of all instances of
+        // TextTrackMenuItem, but this will remain for backwards compatibility
+        kind: options.kind,
+        kinds: options.kinds,
+        default: false,
+        mode: 'disabled'
+      };
+      if (!options.kinds) {
+        options.kinds = [options.kind];
+      }
+      if (options.label) {
+        options.track.label = options.label;
+      } else {
+        options.track.label = options.kinds.join(' and ') + ' off';
+      }
+
+      // MenuItem is selectable
+      options.selectable = true;
+      // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+      options.multiSelectable = false;
+      super(player, options);
+    }
+
+    /**
+     * Handle text track change
+     *
+     * @param {Event} event
+     *        The event that caused this function to run
+     */
+    handleTracksChange(event) {
+      const tracks = this.player().textTracks();
+      let shouldBeSelected = true;
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (this.options_.kinds.indexOf(track.kind) > -1 && track.mode === 'showing') {
+          shouldBeSelected = false;
+          break;
+        }
+      }
+
+      // Prevent redundant selected() calls because they may cause
+      // screen readers to read the appended control text unnecessarily
+      if (shouldBeSelected !== this.isSelected_) {
+        this.selected(shouldBeSelected);
+      }
+    }
+    handleSelectedLanguageChange(event) {
+      const tracks = this.player().textTracks();
+      let allHidden = true;
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (['captions', 'descriptions', 'subtitles'].indexOf(track.kind) > -1 && track.mode === 'showing') {
+          allHidden = false;
+          break;
+        }
+      }
+      if (allHidden) {
+        this.player_.cache_.selectedLanguage = {
+          enabled: false
+        };
+      }
+    }
+
+    /**
+     * Update control text and label on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.label);
+      super.handleLanguagechange();
+    }
+  }
+  Component$1.registerComponent('OffTextTrackMenuItem', OffTextTrackMenuItem);
+
+  /**
+   * @file text-track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific text track types (e.g. subtitles)
+   *
+   * @extends MenuButton
+   */
+  class TextTrackButton extends TrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.tracks = player.textTracks();
+      super(player, options);
+    }
+
+    /**
+     * Create a menu item for each text track
+     *
+     * @param {TextTrackMenuItem[]} [items=[]]
+     *        Existing array of items to use during creation
+     *
+     * @return {TextTrackMenuItem[]}
+     *         Array of menu items that were created
+     */
+    createItems(items = [], TrackMenuItem = TextTrackMenuItem) {
+      // Label is an override for the [track] off label
+      // USed to localise captions/subtitles
+      let label;
+      if (this.label_) {
+        label = `${this.label_} off`;
+      }
+      // Add an OFF menu item to turn all tracks off
+      items.push(new OffTextTrackMenuItem(this.player_, {
+        kinds: this.kinds_,
+        kind: this.kind_,
+        label
+      }));
+      this.hideThreshold_ += 1;
+      const tracks = this.player_.textTracks();
+      if (!Array.isArray(this.kinds_)) {
+        this.kinds_ = [this.kind_];
+      }
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+
+        // only add tracks that are of an appropriate kind and have a label
+        if (this.kinds_.indexOf(track.kind) > -1) {
+          const item = new TrackMenuItem(this.player_, {
+            track,
+            kinds: this.kinds_,
+            kind: this.kind_,
+            // MenuItem is selectable
+            selectable: true,
+            // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+            multiSelectable: false
+          });
+          item.addClass(`vjs-${track.kind}-menu-item`);
+          items.push(item);
+        }
+      }
+      return items;
+    }
+  }
+  Component$1.registerComponent('TextTrackButton', TextTrackButton);
+
+  /**
+   * @file chapters-track-menu-item.js
+   */
+
+  /**
+   * The chapter track menu item
+   *
+   * @extends MenuItem
+   */
+  class ChaptersTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const cue = options.cue;
+      const currentTime = player.currentTime();
+
+      // Modify options for parent MenuItem class's init.
+      options.selectable = true;
+      options.multiSelectable = false;
+      options.label = cue.text;
+      options.selected = cue.startTime <= currentTime && currentTime < cue.endTime;
+      super(player, options);
+      this.track = track;
+      this.cue = cue;
+    }
+
+    /**
+     * This gets called when an `ChaptersTrackMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick();
+      this.player_.currentTime(this.cue.startTime);
+    }
+  }
+  Component$1.registerComponent('ChaptersTrackMenuItem', ChaptersTrackMenuItem);
+
+  /**
+   * @file chapters-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting chapters
+   * Chapters act much differently than other text tracks
+   * Cues are navigation vs. other tracks of alternative languages
+   *
+   * @extends TextTrackButton
+   */
+  class ChaptersButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this function is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('chapters');
+      this.selectCurrentItem_ = () => {
+        this.items.forEach(item => {
+          item.selected(this.track_.activeCues[0] === item.cue);
+        });
+      };
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-chapters-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-chapters-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Update the menu based on the current state of its items.
+     *
+     * @param {Event} [event]
+     *        An event that triggered this function to run.
+     *
+     * @listens TextTrackList#addtrack
+     * @listens TextTrackList#removetrack
+     * @listens TextTrackList#change
+     */
+    update(event) {
+      if (event && event.track && event.track.kind !== 'chapters') {
+        return;
+      }
+      const track = this.findChaptersTrack();
+      if (track !== this.track_) {
+        this.setTrack(track);
+        super.update();
+      } else if (!this.items || track && track.cues && track.cues.length !== this.items.length) {
+        // Update the menu initially or if the number of cues has changed since set
+        super.update();
+      }
+    }
+
+    /**
+     * Set the currently selected track for the chapters button.
+     *
+     * @param {TextTrack} track
+     *        The new track to select. Nothing will change if this is the currently selected
+     *        track.
+     */
+    setTrack(track) {
+      if (this.track_ === track) {
+        return;
+      }
+      if (!this.updateHandler_) {
+        this.updateHandler_ = this.update.bind(this);
+      }
+
+      // here this.track_ refers to the old track instance
+      if (this.track_) {
+        const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
+        if (remoteTextTrackEl) {
+          remoteTextTrackEl.removeEventListener('load', this.updateHandler_);
+        }
+        this.track_.removeEventListener('cuechange', this.selectCurrentItem_);
+        this.track_ = null;
+      }
+      this.track_ = track;
+
+      // here this.track_ refers to the new track instance
+      if (this.track_) {
+        this.track_.mode = 'hidden';
+        const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
+        if (remoteTextTrackEl) {
+          remoteTextTrackEl.addEventListener('load', this.updateHandler_);
+        }
+        this.track_.addEventListener('cuechange', this.selectCurrentItem_);
+      }
+    }
+
+    /**
+     * Find the track object that is currently in use by this ChaptersButton
+     *
+     * @return {TextTrack|undefined}
+     *         The current track or undefined if none was found.
+     */
+    findChaptersTrack() {
+      const tracks = this.player_.textTracks() || [];
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        // We will always choose the last track as our chaptersTrack
+        const track = tracks[i];
+        if (track.kind === this.kind_) {
+          return track;
+        }
+      }
+    }
+
+    /**
+     * Get the caption for the ChaptersButton based on the track label. This will also
+     * use the current tracks localized kind as a fallback if a label does not exist.
+     *
+     * @return {string}
+     *         The tracks current label or the localized track kind.
+     */
+    getMenuCaption() {
+      if (this.track_ && this.track_.label) {
+        return this.track_.label;
+      }
+      return this.localize(toTitleCase$1(this.kind_));
+    }
+
+    /**
+     * Create menu from chapter track
+     *
+     * @return { import('../../menu/menu').default }
+     *         New menu for the chapter buttons
+     */
+    createMenu() {
+      this.options_.title = this.getMenuCaption();
+      return super.createMenu();
+    }
+
+    /**
+     * Create a menu item for each text track
+     *
+     * @return  { import('./text-track-menu-item').default[] }
+     *         Array of menu items
+     */
+    createItems() {
+      const items = [];
+      if (!this.track_) {
+        return items;
+      }
+      const cues = this.track_.cues;
+      if (!cues) {
+        return items;
+      }
+      for (let i = 0, l = cues.length; i < l; i++) {
+        const cue = cues[i];
+        const mi = new ChaptersTrackMenuItem(this.player_, {
+          track: this.track_,
+          cue
+        });
+        items.push(mi);
+      }
+      return items;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  ChaptersButton.prototype.kind_ = 'chapters';
+
+  /**
+   * The text that should display over the `ChaptersButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  ChaptersButton.prototype.controlText_ = 'Chapters';
+  Component$1.registerComponent('ChaptersButton', ChaptersButton);
+
+  /**
+   * @file descriptions-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting descriptions
+   *
+   * @extends TextTrackButton
+   */
+  class DescriptionsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('audio-description');
+      const tracks = player.textTracks();
+      const changeHandler = bind_(this, this.handleTracksChange);
+      tracks.addEventListener('change', changeHandler);
+      this.on('dispose', function () {
+        tracks.removeEventListener('change', changeHandler);
+      });
+    }
+
+    /**
+     * Handle text track change
+     *
+     * @param {Event} event
+     *        The event that caused this function to run
+     *
+     * @listens TextTrackList#change
+     */
+    handleTracksChange(event) {
+      const tracks = this.player().textTracks();
+      let disabled = false;
+
+      // Check whether a track of a different kind is showing
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (track.kind !== this.kind_ && track.mode === 'showing') {
+          disabled = true;
+          break;
+        }
+      }
+
+      // If another track is showing, disable this menu button
+      if (disabled) {
+        this.disable();
+      } else {
+        this.enable();
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-descriptions-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-descriptions-button ${super.buildWrapperCSSClass()}`;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  DescriptionsButton.prototype.kind_ = 'descriptions';
+
+  /**
+   * The text that should display over the `DescriptionsButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  DescriptionsButton.prototype.controlText_ = 'Descriptions';
+  Component$1.registerComponent('DescriptionsButton', DescriptionsButton);
+
+  /**
+   * @file subtitles-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting subtitles
+   *
+   * @extends TextTrackButton
+   */
+  class SubtitlesButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('subtitles');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-subtitles-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-subtitles-button ${super.buildWrapperCSSClass()}`;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  SubtitlesButton.prototype.kind_ = 'subtitles';
+
+  /**
+   * The text that should display over the `SubtitlesButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  SubtitlesButton.prototype.controlText_ = 'Subtitles';
+  Component$1.registerComponent('SubtitlesButton', SubtitlesButton);
+
+  /**
+   * @file caption-settings-menu-item.js
+   */
+
+  /**
+   * The menu item for caption track settings menu
+   *
+   * @extends TextTrackMenuItem
+   */
+  class CaptionSettingsMenuItem extends TextTrackMenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      options.track = {
+        player,
+        kind: options.kind,
+        label: options.kind + ' settings',
+        selectable: false,
+        default: false,
+        mode: 'disabled'
+      };
+
+      // CaptionSettingsMenuItem has no concept of 'selected'
+      options.selectable = false;
+      options.name = 'CaptionSettingsMenuItem';
+      super(player, options);
+      this.addClass('vjs-texttrack-settings');
+      this.controlText(', opens ' + options.kind + ' settings dialog');
+    }
+
+    /**
+     * This gets called when an `CaptionSettingsMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      this.player().getChild('textTrackSettings').open();
+    }
+
+    /**
+     * Update control text and label on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.kind + ' settings');
+      super.handleLanguagechange();
+    }
+  }
+  Component$1.registerComponent('CaptionSettingsMenuItem', CaptionSettingsMenuItem);
+
+  /**
+   * @file captions-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting captions
+   *
+   * @extends TextTrackButton
+   */
+  class CaptionsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('captions');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-captions-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-captions-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create caption menu items
+     *
+     * @return {CaptionSettingsMenuItem[]}
+     *         The array of current menu items.
+     */
+    createItems() {
+      const items = [];
+      if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks) && this.player().getChild('textTrackSettings')) {
+        items.push(new CaptionSettingsMenuItem(this.player_, {
+          kind: this.kind_
+        }));
+        this.hideThreshold_ += 1;
+      }
+      return super.createItems(items);
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  CaptionsButton.prototype.kind_ = 'captions';
+
+  /**
+   * The text that should display over the `CaptionsButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  CaptionsButton.prototype.controlText_ = 'Captions';
+  Component$1.registerComponent('CaptionsButton', CaptionsButton);
+
+  /**
+   * @file subs-caps-menu-item.js
+   */
+
+  /**
+   * SubsCapsMenuItem has an [cc] icon to distinguish captions from subtitles
+   * in the SubsCapsMenu.
+   *
+   * @extends TextTrackMenuItem
+   */
+  class SubsCapsMenuItem extends TextTrackMenuItem {
+    createEl(type, props, attrs) {
+      const el = super.createEl(type, props, attrs);
+      const parentSpan = el.querySelector('.vjs-menu-item-text');
+      if (this.options_.track.kind === 'captions') {
+        if (this.player_.options_.experimentalSvgIcons) {
+          this.setIcon('captions', el);
+        } else {
+          parentSpan.appendChild(createEl('span', {
+            className: 'vjs-icon-placeholder'
+          }, {
+            'aria-hidden': true
+          }));
+        }
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-control-text',
+          // space added as the text will visually flow with the
+          // label
+          textContent: ` ${this.localize('Captions')}`
+        }));
+      }
+      return el;
+    }
+  }
+  Component$1.registerComponent('SubsCapsMenuItem', SubsCapsMenuItem);
+
+  /**
+   * @file sub-caps-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting captions and/or subtitles
+   *
+   * @extends TextTrackButton
+   */
+  class SubsCapsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+
+      // Although North America uses "captions" in most cases for
+      // "captions and subtitles" other locales use "subtitles"
+      this.label_ = 'subtitles';
+      this.setIcon('subtitles');
+      if (['en', 'en-us', 'en-ca', 'fr-ca'].indexOf(this.player_.language_) > -1) {
+        this.label_ = 'captions';
+        this.setIcon('captions');
+      }
+      this.menuButton_.controlText(toTitleCase$1(this.label_));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-subs-caps-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-subs-caps-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create caption/subtitles menu items
+     *
+     * @return {CaptionSettingsMenuItem[]}
+     *         The array of current menu items.
+     */
+    createItems() {
+      let items = [];
+      if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks) && this.player().getChild('textTrackSettings')) {
+        items.push(new CaptionSettingsMenuItem(this.player_, {
+          kind: this.label_
+        }));
+        this.hideThreshold_ += 1;
+      }
+      items = super.createItems(items, SubsCapsMenuItem);
+      return items;
+    }
+  }
+
+  /**
+   * `kind`s of TextTrack to look for to associate it with this menu.
+   *
+   * @type {array}
+   * @private
+   */
+  SubsCapsButton.prototype.kinds_ = ['captions', 'subtitles'];
+
+  /**
+   * The text that should display over the `SubsCapsButton`s controls.
+   *
+   *
+   * @type {string}
+   * @protected
+   */
+  SubsCapsButton.prototype.controlText_ = 'Subtitles';
+  Component$1.registerComponent('SubsCapsButton', SubsCapsButton);
+
+  /**
+   * @file audio-track-menu-item.js
+   */
+
+  /**
+   * An {@link AudioTrack} {@link MenuItem}
+   *
+   * @extends MenuItem
+   */
+  class AudioTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const tracks = player.audioTracks();
+
+      // Modify options for parent MenuItem class's init.
+      options.label = track.label || track.language || 'Unknown';
+      options.selected = track.enabled;
+      super(player, options);
+      this.track = track;
+      this.addClass(`vjs-${track.kind}-menu-item`);
+      const changeHandler = (...args) => {
+        this.handleTracksChange.apply(this, args);
+      };
+      tracks.addEventListener('change', changeHandler);
+      this.on('dispose', () => {
+        tracks.removeEventListener('change', changeHandler);
+      });
+    }
+    createEl(type, props, attrs) {
+      const el = super.createEl(type, props, attrs);
+      const parentSpan = el.querySelector('.vjs-menu-item-text');
+      if (['main-desc', 'description'].indexOf(this.options_.track.kind) >= 0) {
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-control-text',
+          textContent: ' ' + this.localize('Descriptions')
+        }));
+      }
+      return el;
+    }
+
+    /**
+     * This gets called when an `AudioTrackMenuItem is "clicked". See {@link ClickableComponent}
+     * for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick(event);
+
+      // the audio track list will automatically toggle other tracks
+      // off for us.
+      this.track.enabled = true;
+
+      // when native audio tracks are used, we want to make sure that other tracks are turned off
+      if (this.player_.tech_.featuresNativeAudioTracks) {
+        const tracks = this.player_.audioTracks();
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+
+          // skip the current track since we enabled it above
+          if (track === this.track) {
+            continue;
+          }
+          track.enabled = track === this.track;
+        }
+      }
+    }
+
+    /**
+     * Handle any {@link AudioTrack} change.
+     *
+     * @param {Event} [event]
+     *        The {@link AudioTrackList#change} event that caused this to run.
+     *
+     * @listens AudioTrackList#change
+     */
+    handleTracksChange(event) {
+      this.selected(this.track.enabled);
+    }
+  }
+  Component$1.registerComponent('AudioTrackMenuItem', AudioTrackMenuItem);
+
+  /**
+   * @file audio-track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific {@link AudioTrack} types.
+   *
+   * @extends TrackButton
+   */
+  class AudioTrackButton extends TrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param {Player} player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.tracks = player.audioTracks();
+      super(player, options);
+      this.setIcon('audio');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-audio-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-audio-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create a menu item for each audio track
+     *
+     * @param {AudioTrackMenuItem[]} [items=[]]
+     *        An array of existing menu items to use.
+     *
+     * @return {AudioTrackMenuItem[]}
+     *         An array of menu items
+     */
+    createItems(items = []) {
+      // if there's only one audio track, there no point in showing it
+      this.hideThreshold_ = 1;
+      const tracks = this.player_.audioTracks();
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        items.push(new AudioTrackMenuItem(this.player_, {
+          track,
+          // MenuItem is selectable
+          selectable: true,
+          // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+          multiSelectable: false
+        }));
+      }
+      return items;
+    }
+  }
+
+  /**
+   * The text that should display over the `AudioTrackButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  AudioTrackButton.prototype.controlText_ = 'Audio Track';
+  Component$1.registerComponent('AudioTrackButton', AudioTrackButton);
+
+  /**
+   * @file playback-rate-menu-item.js
+   */
+
+  /**
+   * The specific menu item type for selecting a playback rate.
+   *
+   * @extends MenuItem
+   */
+  class PlaybackRateMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const label = options.rate;
+      const rate = parseFloat(label, 10);
+
+      // Modify options for parent MenuItem class's init.
+      options.label = label;
+      options.selected = rate === player.playbackRate();
+      options.selectable = true;
+      options.multiSelectable = false;
+      super(player, options);
+      this.label = label;
+      this.rate = rate;
+      this.on(player, 'ratechange', e => this.update(e));
+    }
+
+    /**
+     * This gets called when an `PlaybackRateMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick();
+      this.player().playbackRate(this.rate);
+    }
+
+    /**
+     * Update the PlaybackRateMenuItem when the playbackrate changes.
+     *
+     * @param {Event} [event]
+     *        The `ratechange` event that caused this function to run.
+     *
+     * @listens Player#ratechange
+     */
+    update(event) {
+      this.selected(this.player().playbackRate() === this.rate);
+    }
+  }
+
+  /**
+   * The text that should display over the `PlaybackRateMenuItem`s controls. Added for localization.
+   *
+   * @type {string}
+   * @private
+   */
+  PlaybackRateMenuItem.prototype.contentElType = 'button';
+  Component$1.registerComponent('PlaybackRateMenuItem', PlaybackRateMenuItem);
+
+  /**
+   * @file playback-rate-menu-button.js
+   */
+
+  /**
+   * The component for controlling the playback rate.
+   *
+   * @extends MenuButton
+   */
+  class PlaybackRateMenuButton extends MenuButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);
+      this.updateVisibility();
+      this.updateLabel();
+      this.on(player, 'loadstart', e => this.updateVisibility(e));
+      this.on(player, 'ratechange', e => this.updateLabel(e));
+      this.on(player, 'playbackrateschange', e => this.handlePlaybackRateschange(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl();
+      this.labelElId_ = 'vjs-playback-rate-value-label-' + this.id_;
+      this.labelEl_ = createEl('div', {
+        className: 'vjs-playback-rate-value',
+        id: this.labelElId_,
+        textContent: '1x'
+      });
+      el.appendChild(this.labelEl_);
+      return el;
+    }
+    dispose() {
+      this.labelEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-playback-rate ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-playback-rate ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create the list of menu items. Specific to each subclass.
+     *
+     */
+    createItems() {
+      const rates = this.playbackRates();
+      const items = [];
+      for (let i = rates.length - 1; i >= 0; i--) {
+        items.push(new PlaybackRateMenuItem(this.player(), {
+          rate: rates[i] + 'x'
+        }));
+      }
+      return items;
+    }
+
+    /**
+     * On playbackrateschange, update the menu to account for the new items.
+     *
+     * @listens Player#playbackrateschange
+     */
+    handlePlaybackRateschange(event) {
+      this.update();
+    }
+
+    /**
+     * Get possible playback rates
+     *
+     * @return {Array}
+     *         All possible playback rates
+     */
+    playbackRates() {
+      const player = this.player();
+      return player.playbackRates && player.playbackRates() || [];
+    }
+
+    /**
+     * Get whether playback rates is supported by the tech
+     * and an array of playback rates exists
+     *
+     * @return {boolean}
+     *         Whether changing playback rate is supported
+     */
+    playbackRateSupported() {
+      return this.player().tech_ && this.player().tech_.featuresPlaybackRate && this.playbackRates() && this.playbackRates().length > 0;
+    }
+
+    /**
+     * Hide playback rate controls when they're no playback rate options to select
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#loadstart
+     */
+    updateVisibility(event) {
+      if (this.playbackRateSupported()) {
+        this.removeClass('vjs-hidden');
+      } else {
+        this.addClass('vjs-hidden');
+      }
+    }
+
+    /**
+     * Update button label when rate changed
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#ratechange
+     */
+    updateLabel(event) {
+      if (this.playbackRateSupported()) {
+        this.labelEl_.textContent = this.player().playbackRate() + 'x';
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `PlaybackRateMenuButton`s controls.
+   *
+   * Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PlaybackRateMenuButton.prototype.controlText_ = 'Playback Rate';
+  Component$1.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton);
+
+  /**
+   * @file spacer.js
+   */
+
+  /**
+   * Just an empty spacer element that can be used as an append point for plugins, etc.
+   * Also can be used to create space between elements when necessary.
+   *
+   * @extends Component
+   */
+  class Spacer extends Component$1 {
+    /**
+    * Builds the default DOM `className`.
+    *
+    * @return {string}
+    *         The DOM `className` for this object.
+    */
+    buildCSSClass() {
+      return `vjs-spacer ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(tag = 'div', props = {}, attributes = {}) {
+      if (!props.className) {
+        props.className = this.buildCSSClass();
+      }
+      return super.createEl(tag, props, attributes);
+    }
+  }
+  Component$1.registerComponent('Spacer', Spacer);
+
+  /**
+   * @file custom-control-spacer.js
+   */
+
+  /**
+   * Spacer specifically meant to be used as an insertion point for new plugins, etc.
+   *
+   * @extends Spacer
+   */
+  class CustomControlSpacer extends Spacer {
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-custom-control-spacer ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildCSSClass(),
+        // No-flex/table-cell mode requires there be some content
+        // in the cell to fill the remaining space of the table.
+        textContent: '\u00a0'
+      });
+    }
+  }
+  Component$1.registerComponent('CustomControlSpacer', CustomControlSpacer);
+
+  /**
+   * @file control-bar.js
+   */
+
+  /**
+   * Container of main controls.
+   *
+   * @extends Component
+   */
+  class ControlBar extends Component$1 {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-control-bar',
+        dir: 'ltr'
+      });
+    }
+  }
+
+  /**
+   * Default options for `ControlBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  ControlBar.prototype.options_ = {
+    children: ['playToggle', 'skipBackward', 'skipForward', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'seekToLive', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'pictureInPictureToggle', 'fullscreenToggle']
+  };
+  Component$1.registerComponent('ControlBar', ControlBar);
+
+  /**
+   * @file error-display.js
+   */
+
+  /**
+   * A display that indicates an error has occurred. This means that the video
+   * is unplayable.
+   *
+   * @extends ModalDialog
+   */
+  class ErrorDisplay extends ModalDialog {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  { import('./player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, 'error', e => {
+        this.open(e);
+      });
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     *
+     * @deprecated Since version 5.
+     */
+    buildCSSClass() {
+      return `vjs-error-display ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Gets the localized error message based on the `Player`s error.
+     *
+     * @return {string}
+     *         The `Player`s error message localized or an empty string.
+     */
+    content() {
+      const error = this.player().error();
+      return error ? this.localize(error.message) : '';
+    }
+  }
+
+  /**
+   * The default options for an `ErrorDisplay`.
+   *
+   * @private
+   */
+  ErrorDisplay.prototype.options_ = Object.assign({}, ModalDialog.prototype.options_, {
+    pauseOnOpen: false,
+    fillAlways: true,
+    temporary: false,
+    uncloseable: true
+  });
+  Component$1.registerComponent('ErrorDisplay', ErrorDisplay);
+
+  /**
+   * @file text-track-settings.js
+   */
+  const LOCAL_STORAGE_KEY$1 = 'vjs-text-track-settings';
+  const COLOR_BLACK = ['#000', 'Black'];
+  const COLOR_BLUE = ['#00F', 'Blue'];
+  const COLOR_CYAN = ['#0FF', 'Cyan'];
+  const COLOR_GREEN = ['#0F0', 'Green'];
+  const COLOR_MAGENTA = ['#F0F', 'Magenta'];
+  const COLOR_RED = ['#F00', 'Red'];
+  const COLOR_WHITE = ['#FFF', 'White'];
+  const COLOR_YELLOW = ['#FF0', 'Yellow'];
+  const OPACITY_OPAQUE = ['1', 'Opaque'];
+  const OPACITY_SEMI = ['0.5', 'Semi-Transparent'];
+  const OPACITY_TRANS = ['0', 'Transparent'];
+
+  // Configuration for the various <select> elements in the DOM of this component.
+  //
+  // Possible keys include:
+  //
+  // `default`:
+  //   The default option index. Only needs to be provided if not zero.
+  // `parser`:
+  //   A function which is used to parse the value from the selected option in
+  //   a customized way.
+  // `selector`:
+  //   The selector used to find the associated <select> element.
+  const selectConfigs = {
+    backgroundColor: {
+      selector: '.vjs-bg-color > select',
+      id: 'captions-background-color-%s',
+      label: 'Color',
+      options: [COLOR_BLACK, COLOR_WHITE, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
+    },
+    backgroundOpacity: {
+      selector: '.vjs-bg-opacity > select',
+      id: 'captions-background-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_OPAQUE, OPACITY_SEMI, OPACITY_TRANS]
+    },
+    color: {
+      selector: '.vjs-text-color > select',
+      id: 'captions-foreground-color-%s',
+      label: 'Color',
+      options: [COLOR_WHITE, COLOR_BLACK, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
+    },
+    edgeStyle: {
+      selector: '.vjs-edge-style > select',
+      id: '%s',
+      label: 'Text Edge Style',
+      options: [['none', 'None'], ['raised', 'Raised'], ['depressed', 'Depressed'], ['uniform', 'Uniform'], ['dropshadow', 'Drop shadow']]
+    },
+    fontFamily: {
+      selector: '.vjs-font-family > select',
+      id: 'captions-font-family-%s',
+      label: 'Font Family',
+      options: [['proportionalSansSerif', 'Proportional Sans-Serif'], ['monospaceSansSerif', 'Monospace Sans-Serif'], ['proportionalSerif', 'Proportional Serif'], ['monospaceSerif', 'Monospace Serif'], ['casual', 'Casual'], ['script', 'Script'], ['small-caps', 'Small Caps']]
+    },
+    fontPercent: {
+      selector: '.vjs-font-percent > select',
+      id: 'captions-font-size-%s',
+      label: 'Font Size',
+      options: [['0.50', '50%'], ['0.75', '75%'], ['1.00', '100%'], ['1.25', '125%'], ['1.50', '150%'], ['1.75', '175%'], ['2.00', '200%'], ['3.00', '300%'], ['4.00', '400%']],
+      default: 2,
+      parser: v => v === '1.00' ? null : Number(v)
+    },
+    textOpacity: {
+      selector: '.vjs-text-opacity > select',
+      id: 'captions-foreground-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_OPAQUE, OPACITY_SEMI]
+    },
+    // Options for this object are defined below.
+    windowColor: {
+      selector: '.vjs-window-color > select',
+      id: 'captions-window-color-%s',
+      label: 'Color'
+    },
+    // Options for this object are defined below.
+    windowOpacity: {
+      selector: '.vjs-window-opacity > select',
+      id: 'captions-window-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_TRANS, OPACITY_SEMI, OPACITY_OPAQUE]
+    }
+  };
+  selectConfigs.windowColor.options = selectConfigs.backgroundColor.options;
+
+  /**
+   * Get the actual value of an option.
+   *
+   * @param  {string} value
+   *         The value to get
+   *
+   * @param  {Function} [parser]
+   *         Optional function to adjust the value.
+   *
+   * @return {*}
+   *         - Will be `undefined` if no value exists
+   *         - Will be `undefined` if the given value is "none".
+   *         - Will be the actual value otherwise.
+   *
+   * @private
+   */
+  function parseOptionValue(value, parser) {
+    if (parser) {
+      value = parser(value);
+    }
+    if (value && value !== 'none') {
+      return value;
+    }
+  }
+
+  /**
+   * Gets the value of the selected <option> element within a <select> element.
+   *
+   * @param  {Element} el
+   *         the element to look in
+   *
+   * @param  {Function} [parser]
+   *         Optional function to adjust the value.
+   *
+   * @return {*}
+   *         - Will be `undefined` if no value exists
+   *         - Will be `undefined` if the given value is "none".
+   *         - Will be the actual value otherwise.
+   *
+   * @private
+   */
+  function getSelectedOptionValue(el, parser) {
+    const value = el.options[el.options.selectedIndex].value;
+    return parseOptionValue(value, parser);
+  }
+
+  /**
+   * Sets the selected <option> element within a <select> element based on a
+   * given value.
+   *
+   * @param {Element} el
+   *        The element to look in.
+   *
+   * @param {string} value
+   *        the property to look on.
+   *
+   * @param {Function} [parser]
+   *        Optional function to adjust the value before comparing.
+   *
+   * @private
+   */
+  function setSelectedOption(el, value, parser) {
+    if (!value) {
+      return;
+    }
+    for (let i = 0; i < el.options.length; i++) {
+      if (parseOptionValue(el.options[i].value, parser) === value) {
+        el.selectedIndex = i;
+        break;
+      }
+    }
+  }
+
+  /**
+   * Manipulate Text Tracks settings.
+   *
+   * @extends ModalDialog
+   */
+  class TextTrackSettings extends ModalDialog {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player, options) {
+      options.temporary = false;
+      super(player, options);
+      this.updateDisplay = this.updateDisplay.bind(this);
+
+      // fill the modal and pretend we have opened it
+      this.fill();
+      this.hasBeenOpened_ = this.hasBeenFilled_ = true;
+      this.endDialog = createEl('p', {
+        className: 'vjs-control-text',
+        textContent: this.localize('End of dialog window.')
+      });
+      this.el().appendChild(this.endDialog);
+      this.setDefaults();
+
+      // Grab `persistTextTrackSettings` from the player options if not passed in child options
+      if (options.persistTextTrackSettings === undefined) {
+        this.options_.persistTextTrackSettings = this.options_.playerOptions.persistTextTrackSettings;
+      }
+      this.on(this.$('.vjs-done-button'), 'click', () => {
+        this.saveSettings();
+        this.close();
+      });
+      this.on(this.$('.vjs-default-button'), 'click', () => {
+        this.setDefaults();
+        this.updateDisplay();
+      });
+      each(selectConfigs, config => {
+        this.on(this.$(config.selector), 'change', this.updateDisplay);
+      });
+      if (this.options_.persistTextTrackSettings) {
+        this.restoreSettings();
+      }
+    }
+    dispose() {
+      this.endDialog = null;
+      super.dispose();
+    }
+
+    /**
+     * Create a <select> element with configured options.
+     *
+     * @param {string} key
+     *        Configuration key to use during creation.
+     *
+     * @param {string} [legendId]
+     *        Id of associated <legend>.
+     *
+     * @param {string} [type=label]
+     *        Type of labelling element, `label` or `legend`
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElSelect_(key, legendId = '', type = 'label') {
+      const config = selectConfigs[key];
+      const id = config.id.replace('%s', this.id_);
+      const selectLabelledbyIds = [legendId, id].join(' ').trim();
+      const guid = `vjs_select_${newGUID()}`;
+      return [`<${type} id="${id}"${type === 'label' ? ` for="${guid}" class="vjs-label"` : ''}>`, this.localize(config.label), `</${type}>`, `<select aria-labelledby="${selectLabelledbyIds}" id="${guid}">`].concat(config.options.map(o => {
+        const optionId = id + '-' + o[1].replace(/\W+/g, '');
+        return [`<option id="${optionId}" value="${o[0]}" `, `aria-labelledby="${selectLabelledbyIds} ${optionId}">`, this.localize(o[1]), '</option>'].join('');
+      })).concat('</select>').join('');
+    }
+
+    /**
+     * Create foreground color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElFgColor_() {
+      const legendId = `captions-text-legend-${this.id_}`;
+      return ['<fieldset class="vjs-fg vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Text'), '</legend>', '<span class="vjs-text-color">', this.createElSelect_('color', legendId), '</span>', '<span class="vjs-text-opacity vjs-opacity">', this.createElSelect_('textOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create background color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElBgColor_() {
+      const legendId = `captions-background-${this.id_}`;
+      return ['<fieldset class="vjs-bg vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Text Background'), '</legend>', '<span class="vjs-bg-color">', this.createElSelect_('backgroundColor', legendId), '</span>', '<span class="vjs-bg-opacity vjs-opacity">', this.createElSelect_('backgroundOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create window color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElWinColor_() {
+      const legendId = `captions-window-${this.id_}`;
+      return ['<fieldset class="vjs-window vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Caption Area Background'), '</legend>', '<span class="vjs-window-color">', this.createElSelect_('windowColor', legendId), '</span>', '<span class="vjs-window-opacity vjs-opacity">', this.createElSelect_('windowOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create color elements for the component
+     *
+     * @return {Element}
+     *         The element that was created
+     *
+     * @private
+     */
+    createElColors_() {
+      return createEl('div', {
+        className: 'vjs-track-settings-colors',
+        innerHTML: [this.createElFgColor_(), this.createElBgColor_(), this.createElWinColor_()].join('')
+      });
+    }
+
+    /**
+     * Create font elements for the component
+     *
+     * @return {Element}
+     *         The element that was created.
+     *
+     * @private
+     */
+    createElFont_() {
+      return createEl('div', {
+        className: 'vjs-track-settings-font',
+        innerHTML: ['<fieldset class="vjs-font-percent vjs-track-setting">', this.createElSelect_('fontPercent', '', 'legend'), '</fieldset>', '<fieldset class="vjs-edge-style vjs-track-setting">', this.createElSelect_('edgeStyle', '', 'legend'), '</fieldset>', '<fieldset class="vjs-font-family vjs-track-setting">', this.createElSelect_('fontFamily', '', 'legend'), '</fieldset>'].join('')
+      });
+    }
+
+    /**
+     * Create controls for the component
+     *
+     * @return {Element}
+     *         The element that was created.
+     *
+     * @private
+     */
+    createElControls_() {
+      const defaultsDescription = this.localize('restore all settings to the default values');
+      return createEl('div', {
+        className: 'vjs-track-settings-controls',
+        innerHTML: [`<button type="button" class="vjs-default-button" title="${defaultsDescription}">`, this.localize('Reset'), `<span class="vjs-control-text"> ${defaultsDescription}</span>`, '</button>', `<button type="button" class="vjs-done-button">${this.localize('Done')}</button>`].join('')
+      });
+    }
+    content() {
+      return [this.createElColors_(), this.createElFont_(), this.createElControls_()];
+    }
+    label() {
+      return this.localize('Caption Settings Dialog');
+    }
+    description() {
+      return this.localize('Beginning of dialog window. Escape will cancel and close the window.');
+    }
+    buildCSSClass() {
+      return super.buildCSSClass() + ' vjs-text-track-settings';
+    }
+
+    /**
+     * Gets an object of text track settings (or null).
+     *
+     * @return {Object}
+     *         An object with config values parsed from the DOM or localStorage.
+     */
+    getValues() {
+      return reduce(selectConfigs, (accum, config, key) => {
+        const value = getSelectedOptionValue(this.$(config.selector), config.parser);
+        if (value !== undefined) {
+          accum[key] = value;
+        }
+        return accum;
+      }, {});
+    }
+
+    /**
+     * Sets text track settings from an object of values.
+     *
+     * @param {Object} values
+     *        An object with config values parsed from the DOM or localStorage.
+     */
+    setValues(values) {
+      each(selectConfigs, (config, key) => {
+        setSelectedOption(this.$(config.selector), values[key], config.parser);
+      });
+    }
+
+    /**
+     * Sets all `<select>` elements to their default values.
+     */
+    setDefaults() {
+      each(selectConfigs, config => {
+        const index = config.hasOwnProperty('default') ? config.default : 0;
+        this.$(config.selector).selectedIndex = index;
+      });
+    }
+
+    /**
+     * Restore texttrack settings from localStorage
+     */
+    restoreSettings() {
+      let values;
+      try {
+        values = JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_KEY$1));
+      } catch (err) {
+        log$1.warn(err);
+      }
+      if (values) {
+        this.setValues(values);
+      }
+    }
+
+    /**
+     * Save text track settings to localStorage
+     */
+    saveSettings() {
+      if (!this.options_.persistTextTrackSettings) {
+        return;
+      }
+      const values = this.getValues();
+      try {
+        if (Object.keys(values).length) {
+          window.localStorage.setItem(LOCAL_STORAGE_KEY$1, JSON.stringify(values));
+        } else {
+          window.localStorage.removeItem(LOCAL_STORAGE_KEY$1);
+        }
+      } catch (err) {
+        log$1.warn(err);
+      }
+    }
+
+    /**
+     * Update display of text track settings
+     */
+    updateDisplay() {
+      const ttDisplay = this.player_.getChild('textTrackDisplay');
+      if (ttDisplay) {
+        ttDisplay.updateDisplay();
+      }
+    }
+
+    /**
+     * conditionally blur the element and refocus the captions button
+     *
+     * @private
+     */
+    conditionalBlur_() {
+      this.previouslyActiveEl_ = null;
+      const cb = this.player_.controlBar;
+      const subsCapsBtn = cb && cb.subsCapsButton;
+      const ccBtn = cb && cb.captionsButton;
+      if (subsCapsBtn) {
+        subsCapsBtn.focus();
+      } else if (ccBtn) {
+        ccBtn.focus();
+      }
+    }
+
+    /**
+     * Repopulate dialog with new localizations on languagechange
+     */
+    handleLanguagechange() {
+      this.fill();
+    }
+  }
+  Component$1.registerComponent('TextTrackSettings', TextTrackSettings);
+
+  /**
+   * @file resize-manager.js
+   */
+
+  /**
+   * A Resize Manager. It is in charge of triggering `playerresize` on the player in the right conditions.
+   *
+   * It'll either create an iframe and use a debounced resize handler on it or use the new {@link https://wicg.github.io/ResizeObserver/|ResizeObserver}.
+   *
+   * If the ResizeObserver is available natively, it will be used. A polyfill can be passed in as an option.
+   * If a `playerresize` event is not needed, the ResizeManager component can be removed from the player, see the example below.
+   *
+   * @example <caption>How to disable the resize manager</caption>
+   * const player = videojs('#vid', {
+   *   resizeManager: false
+   * });
+   *
+   * @see {@link https://wicg.github.io/ResizeObserver/|ResizeObserver specification}
+   *
+   * @extends Component
+   */
+  class ResizeManager extends Component$1 {
+    /**
+     * Create the ResizeManager.
+     *
+     * @param {Object} player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of ResizeManager options.
+     *
+     * @param {Object} [options.ResizeObserver]
+     *        A polyfill for ResizeObserver can be passed in here.
+     *        If this is set to null it will ignore the native ResizeObserver and fall back to the iframe fallback.
+     */
+    constructor(player, options) {
+      let RESIZE_OBSERVER_AVAILABLE = options.ResizeObserver || window.ResizeObserver;
+
+      // if `null` was passed, we want to disable the ResizeObserver
+      if (options.ResizeObserver === null) {
+        RESIZE_OBSERVER_AVAILABLE = false;
+      }
+
+      // Only create an element when ResizeObserver isn't available
+      const options_ = merge$2({
+        createEl: !RESIZE_OBSERVER_AVAILABLE,
+        reportTouchActivity: false
+      }, options);
+      super(player, options_);
+      this.ResizeObserver = options.ResizeObserver || window.ResizeObserver;
+      this.loadListener_ = null;
+      this.resizeObserver_ = null;
+      this.debouncedHandler_ = debounce(() => {
+        this.resizeHandler();
+      }, 100, false, this);
+      if (RESIZE_OBSERVER_AVAILABLE) {
+        this.resizeObserver_ = new this.ResizeObserver(this.debouncedHandler_);
+        this.resizeObserver_.observe(player.el());
+      } else {
+        this.loadListener_ = () => {
+          if (!this.el_ || !this.el_.contentWindow) {
+            return;
+          }
+          const debouncedHandler_ = this.debouncedHandler_;
+          let unloadListener_ = this.unloadListener_ = function () {
+            off(this, 'resize', debouncedHandler_);
+            off(this, 'unload', unloadListener_);
+            unloadListener_ = null;
+          };
+
+          // safari and edge can unload the iframe before resizemanager dispose
+          // we have to dispose of event handlers correctly before that happens
+          on(this.el_.contentWindow, 'unload', unloadListener_);
+          on(this.el_.contentWindow, 'resize', debouncedHandler_);
+        };
+        this.one('load', this.loadListener_);
+      }
+    }
+    createEl() {
+      return super.createEl('iframe', {
+        className: 'vjs-resize-manager',
+        tabIndex: -1,
+        title: this.localize('No content')
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Called when a resize is triggered on the iframe or a resize is observed via the ResizeObserver
+     *
+     * @fires Player#playerresize
+     */
+    resizeHandler() {
+      /**
+       * Called when the player size has changed
+       *
+       * @event Player#playerresize
+       * @type {Event}
+       */
+      // make sure player is still around to trigger
+      // prevents this from causing an error after dispose
+      if (!this.player_ || !this.player_.trigger) {
+        return;
+      }
+      this.player_.trigger('playerresize');
+    }
+    dispose() {
+      if (this.debouncedHandler_) {
+        this.debouncedHandler_.cancel();
+      }
+      if (this.resizeObserver_) {
+        if (this.player_.el()) {
+          this.resizeObserver_.unobserve(this.player_.el());
+        }
+        this.resizeObserver_.disconnect();
+      }
+      if (this.loadListener_) {
+        this.off('load', this.loadListener_);
+      }
+      if (this.el_ && this.el_.contentWindow && this.unloadListener_) {
+        this.unloadListener_.call(this.el_.contentWindow);
+      }
+      this.ResizeObserver = null;
+      this.resizeObserver = null;
+      this.debouncedHandler_ = null;
+      this.loadListener_ = null;
+      super.dispose();
+    }
+  }
+  Component$1.registerComponent('ResizeManager', ResizeManager);
+
+  const defaults = {
+    trackingThreshold: 20,
+    liveTolerance: 15
+  };
+
+  /*
+    track when we are at the live edge, and other helpers for live playback */
+
+  /**
+   * A class for checking live current time and determining when the player
+   * is at or behind the live edge.
+   */
+  class LiveTracker extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {number} [options.trackingThreshold=20]
+     *        Number of seconds of live window (seekableEnd - seekableStart) that
+     *        media needs to have before the liveui will be shown.
+     *
+     * @param {number} [options.liveTolerance=15]
+     *        Number of seconds behind live that we have to be
+     *        before we will be considered non-live. Note that this will only
+     *        be used when playing at the live edge. This allows large seekable end
+     *        changes to not effect whether we are live or not.
+     */
+    constructor(player, options) {
+      // LiveTracker does not need an element
+      const options_ = merge$2(defaults, options, {
+        createEl: false
+      });
+      super(player, options_);
+      this.trackLiveHandler_ = () => this.trackLive_();
+      this.handlePlay_ = e => this.handlePlay(e);
+      this.handleFirstTimeupdate_ = e => this.handleFirstTimeupdate(e);
+      this.handleSeeked_ = e => this.handleSeeked(e);
+      this.seekToLiveEdge_ = e => this.seekToLiveEdge(e);
+      this.reset_();
+      this.on(this.player_, 'durationchange', e => this.handleDurationchange(e));
+      // we should try to toggle tracking on canplay as native playback engines, like Safari
+      // may not have the proper values for things like seekableEnd until then
+      this.on(this.player_, 'canplay', () => this.toggleTracking());
+    }
+
+    /**
+     * all the functionality for tracking when seek end changes
+     * and for tracking how far past seek end we should be
+     */
+    trackLive_() {
+      const seekable = this.player_.seekable();
+
+      // skip undefined seekable
+      if (!seekable || !seekable.length) {
+        return;
+      }
+      const newTime = Number(window.performance.now().toFixed(4));
+      const deltaTime = this.lastTime_ === -1 ? 0 : (newTime - this.lastTime_) / 1000;
+      this.lastTime_ = newTime;
+      this.pastSeekEnd_ = this.pastSeekEnd() + deltaTime;
+      const liveCurrentTime = this.liveCurrentTime();
+      const currentTime = this.player_.currentTime();
+
+      // we are behind live if any are true
+      // 1. the player is paused
+      // 2. the user seeked to a location 2 seconds away from live
+      // 3. the difference between live and current time is greater
+      //    liveTolerance which defaults to 15s
+      let isBehind = this.player_.paused() || this.seekedBehindLive_ || Math.abs(liveCurrentTime - currentTime) > this.options_.liveTolerance;
+
+      // we cannot be behind if
+      // 1. until we have not seen a timeupdate yet
+      // 2. liveCurrentTime is Infinity, which happens on Android and Native Safari
+      if (!this.timeupdateSeen_ || liveCurrentTime === Infinity) {
+        isBehind = false;
+      }
+      if (isBehind !== this.behindLiveEdge_) {
+        this.behindLiveEdge_ = isBehind;
+        this.trigger('liveedgechange');
+      }
+    }
+
+    /**
+     * handle a durationchange event on the player
+     * and start/stop tracking accordingly.
+     */
+    handleDurationchange() {
+      this.toggleTracking();
+    }
+
+    /**
+     * start/stop tracking
+     */
+    toggleTracking() {
+      if (this.player_.duration() === Infinity && this.liveWindow() >= this.options_.trackingThreshold) {
+        if (this.player_.options_.liveui) {
+          this.player_.addClass('vjs-liveui');
+        }
+        this.startTracking();
+      } else {
+        this.player_.removeClass('vjs-liveui');
+        this.stopTracking();
+      }
+    }
+
+    /**
+     * start tracking live playback
+     */
+    startTracking() {
+      if (this.isTracking()) {
+        return;
+      }
+
+      // If we haven't seen a timeupdate, we need to check whether playback
+      // began before this component started tracking. This can happen commonly
+      // when using autoplay.
+      if (!this.timeupdateSeen_) {
+        this.timeupdateSeen_ = this.player_.hasStarted();
+      }
+      this.trackingInterval_ = this.setInterval(this.trackLiveHandler_, UPDATE_REFRESH_INTERVAL);
+      this.trackLive_();
+      this.on(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+      if (!this.timeupdateSeen_) {
+        this.one(this.player_, 'play', this.handlePlay_);
+        this.one(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+      } else {
+        this.on(this.player_, 'seeked', this.handleSeeked_);
+      }
+    }
+
+    /**
+     * handle the first timeupdate on the player if it wasn't already playing
+     * when live tracker started tracking.
+     */
+    handleFirstTimeupdate() {
+      this.timeupdateSeen_ = true;
+      this.on(this.player_, 'seeked', this.handleSeeked_);
+    }
+
+    /**
+     * Keep track of what time a seek starts, and listen for seeked
+     * to find where a seek ends.
+     */
+    handleSeeked() {
+      const timeDiff = Math.abs(this.liveCurrentTime() - this.player_.currentTime());
+      this.seekedBehindLive_ = this.nextSeekedFromUser_ && timeDiff > 2;
+      this.nextSeekedFromUser_ = false;
+      this.trackLive_();
+    }
+
+    /**
+     * handle the first play on the player, and make sure that we seek
+     * right to the live edge.
+     */
+    handlePlay() {
+      this.one(this.player_, 'timeupdate', this.seekToLiveEdge_);
+    }
+
+    /**
+     * Stop tracking, and set all internal variables to
+     * their initial value.
+     */
+    reset_() {
+      this.lastTime_ = -1;
+      this.pastSeekEnd_ = 0;
+      this.lastSeekEnd_ = -1;
+      this.behindLiveEdge_ = true;
+      this.timeupdateSeen_ = false;
+      this.seekedBehindLive_ = false;
+      this.nextSeekedFromUser_ = false;
+      this.clearInterval(this.trackingInterval_);
+      this.trackingInterval_ = null;
+      this.off(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+      this.off(this.player_, 'seeked', this.handleSeeked_);
+      this.off(this.player_, 'play', this.handlePlay_);
+      this.off(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+      this.off(this.player_, 'timeupdate', this.seekToLiveEdge_);
+    }
+
+    /**
+     * The next seeked event is from the user. Meaning that any seek
+     * > 2s behind live will be considered behind live for real and
+     * liveTolerance will be ignored.
+     */
+    nextSeekedFromUser() {
+      this.nextSeekedFromUser_ = true;
+    }
+
+    /**
+     * stop tracking live playback
+     */
+    stopTracking() {
+      if (!this.isTracking()) {
+        return;
+      }
+      this.reset_();
+      this.trigger('liveedgechange');
+    }
+
+    /**
+     * A helper to get the player seekable end
+     * so that we don't have to null check everywhere
+     *
+     * @return {number}
+     *         The furthest seekable end or Infinity.
+     */
+    seekableEnd() {
+      const seekable = this.player_.seekable();
+      const seekableEnds = [];
+      let i = seekable ? seekable.length : 0;
+      while (i--) {
+        seekableEnds.push(seekable.end(i));
+      }
+
+      // grab the furthest seekable end after sorting, or if there are none
+      // default to Infinity
+      return seekableEnds.length ? seekableEnds.sort()[seekableEnds.length - 1] : Infinity;
+    }
+
+    /**
+     * A helper to get the player seekable start
+     * so that we don't have to null check everywhere
+     *
+     * @return {number}
+     *         The earliest seekable start or 0.
+     */
+    seekableStart() {
+      const seekable = this.player_.seekable();
+      const seekableStarts = [];
+      let i = seekable ? seekable.length : 0;
+      while (i--) {
+        seekableStarts.push(seekable.start(i));
+      }
+
+      // grab the first seekable start after sorting, or if there are none
+      // default to 0
+      return seekableStarts.length ? seekableStarts.sort()[0] : 0;
+    }
+
+    /**
+     * Get the live time window aka
+     * the amount of time between seekable start and
+     * live current time.
+     *
+     * @return {number}
+     *         The amount of seconds that are seekable in
+     *         the live video.
+     */
+    liveWindow() {
+      const liveCurrentTime = this.liveCurrentTime();
+
+      // if liveCurrenTime is Infinity then we don't have a liveWindow at all
+      if (liveCurrentTime === Infinity) {
+        return 0;
+      }
+      return liveCurrentTime - this.seekableStart();
+    }
+
+    /**
+     * Determines if the player is live, only checks if this component
+     * is tracking live playback or not
+     *
+     * @return {boolean}
+     *         Whether liveTracker is tracking
+     */
+    isLive() {
+      return this.isTracking();
+    }
+
+    /**
+     * Determines if currentTime is at the live edge and won't fall behind
+     * on each seekableendchange
+     *
+     * @return {boolean}
+     *         Whether playback is at the live edge
+     */
+    atLiveEdge() {
+      return !this.behindLiveEdge();
+    }
+
+    /**
+     * get what we expect the live current time to be
+     *
+     * @return {number}
+     *         The expected live current time
+     */
+    liveCurrentTime() {
+      return this.pastSeekEnd() + this.seekableEnd();
+    }
+
+    /**
+     * The number of seconds that have occurred after seekable end
+     * changed. This will be reset to 0 once seekable end changes.
+     *
+     * @return {number}
+     *         Seconds past the current seekable end
+     */
+    pastSeekEnd() {
+      const seekableEnd = this.seekableEnd();
+      if (this.lastSeekEnd_ !== -1 && seekableEnd !== this.lastSeekEnd_) {
+        this.pastSeekEnd_ = 0;
+      }
+      this.lastSeekEnd_ = seekableEnd;
+      return this.pastSeekEnd_;
+    }
+
+    /**
+     * If we are currently behind the live edge, aka currentTime will be
+     * behind on a seekableendchange
+     *
+     * @return {boolean}
+     *         If we are behind the live edge
+     */
+    behindLiveEdge() {
+      return this.behindLiveEdge_;
+    }
+
+    /**
+     * Whether live tracker is currently tracking or not.
+     */
+    isTracking() {
+      return typeof this.trackingInterval_ === 'number';
+    }
+
+    /**
+     * Seek to the live edge if we are behind the live edge
+     */
+    seekToLiveEdge() {
+      this.seekedBehindLive_ = false;
+      if (this.atLiveEdge()) {
+        return;
+      }
+      this.nextSeekedFromUser_ = false;
+      this.player_.currentTime(this.liveCurrentTime());
+    }
+
+    /**
+     * Dispose of liveTracker
+     */
+    dispose() {
+      this.stopTracking();
+      super.dispose();
+    }
+  }
+  Component$1.registerComponent('LiveTracker', LiveTracker);
+
+  /**
+   * Displays an element over the player which contains an optional title and
+   * description for the current content.
+   *
+   * Much of the code for this component originated in the now obsolete
+   * videojs-dock plugin: https://github.com/brightcove/videojs-dock/
+   *
+   * @extends Component
+   */
+  class TitleBar extends Component$1 {
+    constructor(player, options) {
+      super(player, options);
+      this.on('statechanged', e => this.updateDom_());
+      this.updateDom_();
+    }
+
+    /**
+     * Create the `TitleBar`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      this.els = {
+        title: createEl('div', {
+          className: 'vjs-title-bar-title',
+          id: `vjs-title-bar-title-${newGUID()}`
+        }),
+        description: createEl('div', {
+          className: 'vjs-title-bar-description',
+          id: `vjs-title-bar-description-${newGUID()}`
+        })
+      };
+      return createEl('div', {
+        className: 'vjs-title-bar'
+      }, {}, values$1(this.els));
+    }
+
+    /**
+     * Updates the DOM based on the component's state object.
+     */
+    updateDom_() {
+      const tech = this.player_.tech_;
+      const techEl = tech && tech.el_;
+      const techAriaAttrs = {
+        title: 'aria-labelledby',
+        description: 'aria-describedby'
+      };
+      ['title', 'description'].forEach(k => {
+        const value = this.state[k];
+        const el = this.els[k];
+        const techAriaAttr = techAriaAttrs[k];
+        emptyEl(el);
+        if (value) {
+          textContent(el, value);
+        }
+
+        // If there is a tech element available, update its ARIA attributes
+        // according to whether a title and/or description have been provided.
+        if (techEl) {
+          techEl.removeAttribute(techAriaAttr);
+          if (value) {
+            techEl.setAttribute(techAriaAttr, el.id);
+          }
+        }
+      });
+      if (this.state.title || this.state.description) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+
+    /**
+     * Update the contents of the title bar component with new title and
+     * description text.
+     *
+     * If both title and description are missing, the title bar will be hidden.
+     *
+     * If either title or description are present, the title bar will be visible.
+     *
+     * NOTE: Any previously set value will be preserved. To unset a previously
+     * set value, you must pass an empty string or null.
+     *
+     * For example:
+     *
+     * ```
+     * update({title: 'foo', description: 'bar'}) // title: 'foo', description: 'bar'
+     * update({description: 'bar2'}) // title: 'foo', description: 'bar2'
+     * update({title: ''}) // title: '', description: 'bar2'
+     * update({title: 'foo', description: null}) // title: 'foo', description: null
+     * ```
+     *
+     * @param  {Object} [options={}]
+     *         An options object. When empty, the title bar will be hidden.
+     *
+     * @param  {string} [options.title]
+     *         A title to display in the title bar.
+     *
+     * @param  {string} [options.description]
+     *         A description to display in the title bar.
+     */
+    update(options) {
+      this.setState(options);
+    }
+
+    /**
+     * Dispose the component.
+     */
+    dispose() {
+      const tech = this.player_.tech_;
+      const techEl = tech && tech.el_;
+      if (techEl) {
+        techEl.removeAttribute('aria-labelledby');
+        techEl.removeAttribute('aria-describedby');
+      }
+      super.dispose();
+      this.els = null;
+    }
+  }
+  Component$1.registerComponent('TitleBar', TitleBar);
+
+  /**
+   * This function is used to fire a sourceset when there is something
+   * similar to `mediaEl.load()` being called. It will try to find the source via
+   * the `src` attribute and then the `<source>` elements. It will then fire `sourceset`
+   * with the source that was found or empty string if we cannot know. If it cannot
+   * find a source then `sourceset` will not be fired.
+   *
+   * @param { import('./html5').default } tech
+   *        The tech object that sourceset was setup on
+   *
+   * @return {boolean}
+   *         returns false if the sourceset was not fired and true otherwise.
+   */
+  const sourcesetLoad = tech => {
+    const el = tech.el();
+
+    // if `el.src` is set, that source will be loaded.
+    if (el.hasAttribute('src')) {
+      tech.triggerSourceset(el.src);
+      return true;
+    }
+
+    /**
+     * Since there isn't a src property on the media element, source elements will be used for
+     * implementing the source selection algorithm. This happens asynchronously and
+     * for most cases were there is more than one source we cannot tell what source will
+     * be loaded, without re-implementing the source selection algorithm. At this time we are not
+     * going to do that. There are three special cases that we do handle here though:
+     *
+     * 1. If there are no sources, do not fire `sourceset`.
+     * 2. If there is only one `<source>` with a `src` property/attribute that is our `src`
+     * 3. If there is more than one `<source>` but all of them have the same `src` url.
+     *    That will be our src.
+     */
+    const sources = tech.$$('source');
+    const srcUrls = [];
+    let src = '';
+
+    // if there are no sources, do not fire sourceset
+    if (!sources.length) {
+      return false;
+    }
+
+    // only count valid/non-duplicate source elements
+    for (let i = 0; i < sources.length; i++) {
+      const url = sources[i].src;
+      if (url && srcUrls.indexOf(url) === -1) {
+        srcUrls.push(url);
+      }
+    }
+
+    // there were no valid sources
+    if (!srcUrls.length) {
+      return false;
+    }
+
+    // there is only one valid source element url
+    // use that
+    if (srcUrls.length === 1) {
+      src = srcUrls[0];
+    }
+    tech.triggerSourceset(src);
+    return true;
+  };
+
+  /**
+   * our implementation of an `innerHTML` descriptor for browsers
+   * that do not have one.
+   */
+  const innerHTMLDescriptorPolyfill = Object.defineProperty({}, 'innerHTML', {
+    get() {
+      return this.cloneNode(true).innerHTML;
+    },
+    set(v) {
+      // make a dummy node to use innerHTML on
+      const dummy = document.createElement(this.nodeName.toLowerCase());
+
+      // set innerHTML to the value provided
+      dummy.innerHTML = v;
+
+      // make a document fragment to hold the nodes from dummy
+      const docFrag = document.createDocumentFragment();
+
+      // copy all of the nodes created by the innerHTML on dummy
+      // to the document fragment
+      while (dummy.childNodes.length) {
+        docFrag.appendChild(dummy.childNodes[0]);
+      }
+
+      // remove content
+      this.innerText = '';
+
+      // now we add all of that html in one by appending the
+      // document fragment. This is how innerHTML does it.
+      window.Element.prototype.appendChild.call(this, docFrag);
+
+      // then return the result that innerHTML's setter would
+      return this.innerHTML;
+    }
+  });
+
+  /**
+   * Get a property descriptor given a list of priorities and the
+   * property to get.
+   */
+  const getDescriptor = (priority, prop) => {
+    let descriptor = {};
+    for (let i = 0; i < priority.length; i++) {
+      descriptor = Object.getOwnPropertyDescriptor(priority[i], prop);
+      if (descriptor && descriptor.set && descriptor.get) {
+        break;
+      }
+    }
+    descriptor.enumerable = true;
+    descriptor.configurable = true;
+    return descriptor;
+  };
+  const getInnerHTMLDescriptor = tech => getDescriptor([tech.el(), window.HTMLMediaElement.prototype, window.Element.prototype, innerHTMLDescriptorPolyfill], 'innerHTML');
+
+  /**
+   * Patches browser internal functions so that we can tell synchronously
+   * if a `<source>` was appended to the media element. For some reason this
+   * causes a `sourceset` if the the media element is ready and has no source.
+   * This happens when:
+   * - The page has just loaded and the media element does not have a source.
+   * - The media element was emptied of all sources, then `load()` was called.
+   *
+   * It does this by patching the following functions/properties when they are supported:
+   *
+   * - `append()` - can be used to add a `<source>` element to the media element
+   * - `appendChild()` - can be used to add a `<source>` element to the media element
+   * - `insertAdjacentHTML()` -  can be used to add a `<source>` element to the media element
+   * - `innerHTML` -  can be used to add a `<source>` element to the media element
+   *
+   * @param {Html5} tech
+   *        The tech object that sourceset is being setup on.
+   */
+  const firstSourceWatch = function (tech) {
+    const el = tech.el();
+
+    // make sure firstSourceWatch isn't setup twice.
+    if (el.resetSourceWatch_) {
+      return;
+    }
+    const old = {};
+    const innerDescriptor = getInnerHTMLDescriptor(tech);
+    const appendWrapper = appendFn => (...args) => {
+      const retval = appendFn.apply(el, args);
+      sourcesetLoad(tech);
+      return retval;
+    };
+    ['append', 'appendChild', 'insertAdjacentHTML'].forEach(k => {
+      if (!el[k]) {
+        return;
+      }
+
+      // store the old function
+      old[k] = el[k];
+
+      // call the old function with a sourceset if a source
+      // was loaded
+      el[k] = appendWrapper(old[k]);
+    });
+    Object.defineProperty(el, 'innerHTML', merge$2(innerDescriptor, {
+      set: appendWrapper(innerDescriptor.set)
+    }));
+    el.resetSourceWatch_ = () => {
+      el.resetSourceWatch_ = null;
+      Object.keys(old).forEach(k => {
+        el[k] = old[k];
+      });
+      Object.defineProperty(el, 'innerHTML', innerDescriptor);
+    };
+
+    // on the first sourceset, we need to revert our changes
+    tech.one('sourceset', el.resetSourceWatch_);
+  };
+
+  /**
+   * our implementation of a `src` descriptor for browsers
+   * that do not have one
+   */
+  const srcDescriptorPolyfill = Object.defineProperty({}, 'src', {
+    get() {
+      if (this.hasAttribute('src')) {
+        return getAbsoluteURL(window.Element.prototype.getAttribute.call(this, 'src'));
+      }
+      return '';
+    },
+    set(v) {
+      window.Element.prototype.setAttribute.call(this, 'src', v);
+      return v;
+    }
+  });
+  const getSrcDescriptor = tech => getDescriptor([tech.el(), window.HTMLMediaElement.prototype, srcDescriptorPolyfill], 'src');
+
+  /**
+   * setup `sourceset` handling on the `Html5` tech. This function
+   * patches the following element properties/functions:
+   *
+   * - `src` - to determine when `src` is set
+   * - `setAttribute()` - to determine when `src` is set
+   * - `load()` - this re-triggers the source selection algorithm, and can
+   *              cause a sourceset.
+   *
+   * If there is no source when we are adding `sourceset` support or during a `load()`
+   * we also patch the functions listed in `firstSourceWatch`.
+   *
+   * @param {Html5} tech
+   *        The tech to patch
+   */
+  const setupSourceset = function (tech) {
+    if (!tech.featuresSourceset) {
+      return;
+    }
+    const el = tech.el();
+
+    // make sure sourceset isn't setup twice.
+    if (el.resetSourceset_) {
+      return;
+    }
+    const srcDescriptor = getSrcDescriptor(tech);
+    const oldSetAttribute = el.setAttribute;
+    const oldLoad = el.load;
+    Object.defineProperty(el, 'src', merge$2(srcDescriptor, {
+      set: v => {
+        const retval = srcDescriptor.set.call(el, v);
+
+        // we use the getter here to get the actual value set on src
+        tech.triggerSourceset(el.src);
+        return retval;
+      }
+    }));
+    el.setAttribute = (n, v) => {
+      const retval = oldSetAttribute.call(el, n, v);
+      if (/src/i.test(n)) {
+        tech.triggerSourceset(el.src);
+      }
+      return retval;
+    };
+    el.load = () => {
+      const retval = oldLoad.call(el);
+
+      // if load was called, but there was no source to fire
+      // sourceset on. We have to watch for a source append
+      // as that can trigger a `sourceset` when the media element
+      // has no source
+      if (!sourcesetLoad(tech)) {
+        tech.triggerSourceset('');
+        firstSourceWatch(tech);
+      }
+      return retval;
+    };
+    if (el.currentSrc) {
+      tech.triggerSourceset(el.currentSrc);
+    } else if (!sourcesetLoad(tech)) {
+      firstSourceWatch(tech);
+    }
+    el.resetSourceset_ = () => {
+      el.resetSourceset_ = null;
+      el.load = oldLoad;
+      el.setAttribute = oldSetAttribute;
+      Object.defineProperty(el, 'src', srcDescriptor);
+      if (el.resetSourceWatch_) {
+        el.resetSourceWatch_();
+      }
+    };
+  };
+
+  /**
+   * @file html5.js
+   */
+
+  /**
+   * HTML5 Media Controller - Wrapper for HTML5 Media API
+   *
+   * @mixes Tech~SourceHandlerAdditions
+   * @extends Tech
+   */
+  class Html5 extends Tech {
+    /**
+    * Create an instance of this Tech.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    *
+    * @param {Function} [ready]
+    *        Callback function to call when the `HTML5` Tech is ready.
+    */
+    constructor(options, ready) {
+      super(options, ready);
+      const source = options.source;
+      let crossoriginTracks = false;
+      this.featuresVideoFrameCallback = this.featuresVideoFrameCallback && this.el_.tagName === 'VIDEO';
+
+      // Set the source if one is provided
+      // 1) Check if the source is new (if not, we want to keep the original so playback isn't interrupted)
+      // 2) Check to see if the network state of the tag was failed at init, and if so, reset the source
+      // anyway so the error gets fired.
+      if (source && (this.el_.currentSrc !== source.src || options.tag && options.tag.initNetworkState_ === 3)) {
+        this.setSource(source);
+      } else {
+        this.handleLateInit_(this.el_);
+      }
+
+      // setup sourceset after late sourceset/init
+      if (options.enableSourceset) {
+        this.setupSourcesetHandling_();
+      }
+      this.isScrubbing_ = false;
+      if (this.el_.hasChildNodes()) {
+        const nodes = this.el_.childNodes;
+        let nodesLength = nodes.length;
+        const removeNodes = [];
+        while (nodesLength--) {
+          const node = nodes[nodesLength];
+          const nodeName = node.nodeName.toLowerCase();
+          if (nodeName === 'track') {
+            if (!this.featuresNativeTextTracks) {
+              // Empty video tag tracks so the built-in player doesn't use them also.
+              // This may not be fast enough to stop HTML5 browsers from reading the tags
+              // so we'll need to turn off any default tracks if we're manually doing
+              // captions and subtitles. videoElement.textTracks
+              removeNodes.push(node);
+            } else {
+              // store HTMLTrackElement and TextTrack to remote list
+              this.remoteTextTrackEls().addTrackElement_(node);
+              this.remoteTextTracks().addTrack(node.track);
+              this.textTracks().addTrack(node.track);
+              if (!crossoriginTracks && !this.el_.hasAttribute('crossorigin') && isCrossOrigin(node.src)) {
+                crossoriginTracks = true;
+              }
+            }
+          }
+        }
+        for (let i = 0; i < removeNodes.length; i++) {
+          this.el_.removeChild(removeNodes[i]);
+        }
+      }
+      this.proxyNativeTracks_();
+      if (this.featuresNativeTextTracks && crossoriginTracks) {
+        log$1.warn('Text Tracks are being loaded from another origin but the crossorigin attribute isn\'t used.\n' + 'This may prevent text tracks from loading.');
+      }
+
+      // prevent iOS Safari from disabling metadata text tracks during native playback
+      this.restoreMetadataTracksInIOSNativePlayer_();
+
+      // Determine if native controls should be used
+      // Our goal should be to get the custom controls on mobile solid everywhere
+      // so we can remove this all together. Right now this will block custom
+      // controls on touch enabled laptops like the Chrome Pixel
+      if ((TOUCH_ENABLED || IS_IPHONE) && options.nativeControlsForTouch === true) {
+        this.setControls(true);
+      }
+
+      // on iOS, we want to proxy `webkitbeginfullscreen` and `webkitendfullscreen`
+      // into a `fullscreenchange` event
+      this.proxyWebkitFullscreen_();
+      this.triggerReady();
+    }
+
+    /**
+     * Dispose of `HTML5` media element and remove all tracks.
+     */
+    dispose() {
+      if (this.el_ && this.el_.resetSourceset_) {
+        this.el_.resetSourceset_();
+      }
+      Html5.disposeMediaElement(this.el_);
+      this.options_ = null;
+
+      // tech will handle clearing of the emulated track list
+      super.dispose();
+    }
+
+    /**
+     * Modify the media element so that we can detect when
+     * the source is changed. Fires `sourceset` just after the source has changed
+     */
+    setupSourcesetHandling_() {
+      setupSourceset(this);
+    }
+
+    /**
+     * When a captions track is enabled in the iOS Safari native player, all other
+     * tracks are disabled (including metadata tracks), which nulls all of their
+     * associated cue points. This will restore metadata tracks to their pre-fullscreen
+     * state in those cases so that cue points are not needlessly lost.
+     *
+     * @private
+     */
+    restoreMetadataTracksInIOSNativePlayer_() {
+      const textTracks = this.textTracks();
+      let metadataTracksPreFullscreenState;
+
+      // captures a snapshot of every metadata track's current state
+      const takeMetadataTrackSnapshot = () => {
+        metadataTracksPreFullscreenState = [];
+        for (let i = 0; i < textTracks.length; i++) {
+          const track = textTracks[i];
+          if (track.kind === 'metadata') {
+            metadataTracksPreFullscreenState.push({
+              track,
+              storedMode: track.mode
+            });
+          }
+        }
+      };
+
+      // snapshot each metadata track's initial state, and update the snapshot
+      // each time there is a track 'change' event
+      takeMetadataTrackSnapshot();
+      textTracks.addEventListener('change', takeMetadataTrackSnapshot);
+      this.on('dispose', () => textTracks.removeEventListener('change', takeMetadataTrackSnapshot));
+      const restoreTrackMode = () => {
+        for (let i = 0; i < metadataTracksPreFullscreenState.length; i++) {
+          const storedTrack = metadataTracksPreFullscreenState[i];
+          if (storedTrack.track.mode === 'disabled' && storedTrack.track.mode !== storedTrack.storedMode) {
+            storedTrack.track.mode = storedTrack.storedMode;
+          }
+        }
+        // we only want this handler to be executed on the first 'change' event
+        textTracks.removeEventListener('change', restoreTrackMode);
+      };
+
+      // when we enter fullscreen playback, stop updating the snapshot and
+      // restore all track modes to their pre-fullscreen state
+      this.on('webkitbeginfullscreen', () => {
+        textTracks.removeEventListener('change', takeMetadataTrackSnapshot);
+
+        // remove the listener before adding it just in case it wasn't previously removed
+        textTracks.removeEventListener('change', restoreTrackMode);
+        textTracks.addEventListener('change', restoreTrackMode);
+      });
+
+      // start updating the snapshot again after leaving fullscreen
+      this.on('webkitendfullscreen', () => {
+        // remove the listener before adding it just in case it wasn't previously removed
+        textTracks.removeEventListener('change', takeMetadataTrackSnapshot);
+        textTracks.addEventListener('change', takeMetadataTrackSnapshot);
+
+        // remove the restoreTrackMode handler in case it wasn't triggered during fullscreen playback
+        textTracks.removeEventListener('change', restoreTrackMode);
+      });
+    }
+
+    /**
+     * Attempt to force override of tracks for the given type
+     *
+     * @param {string} type - Track type to override, possible values include 'Audio',
+     * 'Video', and 'Text'.
+     * @param {boolean} override - If set to true native audio/video will be overridden,
+     * otherwise native audio/video will potentially be used.
+     * @private
+     */
+    overrideNative_(type, override) {
+      // If there is no behavioral change don't add/remove listeners
+      if (override !== this[`featuresNative${type}Tracks`]) {
+        return;
+      }
+      const lowerCaseType = type.toLowerCase();
+      if (this[`${lowerCaseType}TracksListeners_`]) {
+        Object.keys(this[`${lowerCaseType}TracksListeners_`]).forEach(eventName => {
+          const elTracks = this.el()[`${lowerCaseType}Tracks`];
+          elTracks.removeEventListener(eventName, this[`${lowerCaseType}TracksListeners_`][eventName]);
+        });
+      }
+      this[`featuresNative${type}Tracks`] = !override;
+      this[`${lowerCaseType}TracksListeners_`] = null;
+      this.proxyNativeTracksForType_(lowerCaseType);
+    }
+
+    /**
+     * Attempt to force override of native audio tracks.
+     *
+     * @param {boolean} override - If set to true native audio will be overridden,
+     * otherwise native audio will potentially be used.
+     */
+    overrideNativeAudioTracks(override) {
+      this.overrideNative_('Audio', override);
+    }
+
+    /**
+     * Attempt to force override of native video tracks.
+     *
+     * @param {boolean} override - If set to true native video will be overridden,
+     * otherwise native video will potentially be used.
+     */
+    overrideNativeVideoTracks(override) {
+      this.overrideNative_('Video', override);
+    }
+
+    /**
+     * Proxy native track list events for the given type to our track
+     * lists if the browser we are playing in supports that type of track list.
+     *
+     * @param {string} name - Track type; values include 'audio', 'video', and 'text'
+     * @private
+     */
+    proxyNativeTracksForType_(name) {
+      const props = NORMAL[name];
+      const elTracks = this.el()[props.getterName];
+      const techTracks = this[props.getterName]();
+      if (!this[`featuresNative${props.capitalName}Tracks`] || !elTracks || !elTracks.addEventListener) {
+        return;
+      }
+      const listeners = {
+        change: e => {
+          const event = {
+            type: 'change',
+            target: techTracks,
+            currentTarget: techTracks,
+            srcElement: techTracks
+          };
+          techTracks.trigger(event);
+
+          // if we are a text track change event, we should also notify the
+          // remote text track list. This can potentially cause a false positive
+          // if we were to get a change event on a non-remote track and
+          // we triggered the event on the remote text track list which doesn't
+          // contain that track. However, best practices mean looping through the
+          // list of tracks and searching for the appropriate mode value, so,
+          // this shouldn't pose an issue
+          if (name === 'text') {
+            this[REMOTE.remoteText.getterName]().trigger(event);
+          }
+        },
+        addtrack(e) {
+          techTracks.addTrack(e.track);
+        },
+        removetrack(e) {
+          techTracks.removeTrack(e.track);
+        }
+      };
+      const removeOldTracks = function () {
+        const removeTracks = [];
+        for (let i = 0; i < techTracks.length; i++) {
+          let found = false;
+          for (let j = 0; j < elTracks.length; j++) {
+            if (elTracks[j] === techTracks[i]) {
+              found = true;
+              break;
+            }
+          }
+          if (!found) {
+            removeTracks.push(techTracks[i]);
+          }
+        }
+        while (removeTracks.length) {
+          techTracks.removeTrack(removeTracks.shift());
+        }
+      };
+      this[props.getterName + 'Listeners_'] = listeners;
+      Object.keys(listeners).forEach(eventName => {
+        const listener = listeners[eventName];
+        elTracks.addEventListener(eventName, listener);
+        this.on('dispose', e => elTracks.removeEventListener(eventName, listener));
+      });
+
+      // Remove (native) tracks that are not used anymore
+      this.on('loadstart', removeOldTracks);
+      this.on('dispose', e => this.off('loadstart', removeOldTracks));
+    }
+
+    /**
+     * Proxy all native track list events to our track lists if the browser we are playing
+     * in supports that type of track list.
+     *
+     * @private
+     */
+    proxyNativeTracks_() {
+      NORMAL.names.forEach(name => {
+        this.proxyNativeTracksForType_(name);
+      });
+    }
+
+    /**
+     * Create the `Html5` Tech's DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      let el = this.options_.tag;
+
+      // Check if this browser supports moving the element into the box.
+      // On the iPhone video will break if you move the element,
+      // So we have to create a brand new element.
+      // If we ingested the player div, we do not need to move the media element.
+      if (!el || !(this.options_.playerElIngest || this.movingMediaElementInDOM)) {
+        // If the original tag is still there, clone and remove it.
+        if (el) {
+          const clone = el.cloneNode(true);
+          if (el.parentNode) {
+            el.parentNode.insertBefore(clone, el);
+          }
+          Html5.disposeMediaElement(el);
+          el = clone;
+        } else {
+          el = document.createElement('video');
+
+          // determine if native controls should be used
+          const tagAttributes = this.options_.tag && getAttributes(this.options_.tag);
+          const attributes = merge$2({}, tagAttributes);
+          if (!TOUCH_ENABLED || this.options_.nativeControlsForTouch !== true) {
+            delete attributes.controls;
+          }
+          setAttributes(el, Object.assign(attributes, {
+            id: this.options_.techId,
+            class: 'vjs-tech'
+          }));
+        }
+        el.playerId = this.options_.playerId;
+      }
+      if (typeof this.options_.preload !== 'undefined') {
+        setAttribute(el, 'preload', this.options_.preload);
+      }
+      if (this.options_.disablePictureInPicture !== undefined) {
+        el.disablePictureInPicture = this.options_.disablePictureInPicture;
+      }
+
+      // Update specific tag settings, in case they were overridden
+      // `autoplay` has to be *last* so that `muted` and `playsinline` are present
+      // when iOS/Safari or other browsers attempt to autoplay.
+      const settingsAttrs = ['loop', 'muted', 'playsinline', 'autoplay'];
+      for (let i = 0; i < settingsAttrs.length; i++) {
+        const attr = settingsAttrs[i];
+        const value = this.options_[attr];
+        if (typeof value !== 'undefined') {
+          if (value) {
+            setAttribute(el, attr, attr);
+          } else {
+            removeAttribute(el, attr);
+          }
+          el[attr] = value;
+        }
+      }
+      return el;
+    }
+
+    /**
+     * This will be triggered if the loadstart event has already fired, before videojs was
+     * ready. Two known examples of when this can happen are:
+     * 1. If we're loading the playback object after it has started loading
+     * 2. The media is already playing the (often with autoplay on) then
+     *
+     * This function will fire another loadstart so that videojs can catchup.
+     *
+     * @fires Tech#loadstart
+     *
+     * @return {undefined}
+     *         returns nothing.
+     */
+    handleLateInit_(el) {
+      if (el.networkState === 0 || el.networkState === 3) {
+        // The video element hasn't started loading the source yet
+        // or didn't find a source
+        return;
+      }
+      if (el.readyState === 0) {
+        // NetworkState is set synchronously BUT loadstart is fired at the
+        // end of the current stack, usually before setInterval(fn, 0).
+        // So at this point we know loadstart may have already fired or is
+        // about to fire, and either way the player hasn't seen it yet.
+        // We don't want to fire loadstart prematurely here and cause a
+        // double loadstart so we'll wait and see if it happens between now
+        // and the next loop, and fire it if not.
+        // HOWEVER, we also want to make sure it fires before loadedmetadata
+        // which could also happen between now and the next loop, so we'll
+        // watch for that also.
+        let loadstartFired = false;
+        const setLoadstartFired = function () {
+          loadstartFired = true;
+        };
+        this.on('loadstart', setLoadstartFired);
+        const triggerLoadstart = function () {
+          // We did miss the original loadstart. Make sure the player
+          // sees loadstart before loadedmetadata
+          if (!loadstartFired) {
+            this.trigger('loadstart');
+          }
+        };
+        this.on('loadedmetadata', triggerLoadstart);
+        this.ready(function () {
+          this.off('loadstart', setLoadstartFired);
+          this.off('loadedmetadata', triggerLoadstart);
+          if (!loadstartFired) {
+            // We did miss the original native loadstart. Fire it now.
+            this.trigger('loadstart');
+          }
+        });
+        return;
+      }
+
+      // From here on we know that loadstart already fired and we missed it.
+      // The other readyState events aren't as much of a problem if we double
+      // them, so not going to go to as much trouble as loadstart to prevent
+      // that unless we find reason to.
+      const eventsToTrigger = ['loadstart'];
+
+      // loadedmetadata: newly equal to HAVE_METADATA (1) or greater
+      eventsToTrigger.push('loadedmetadata');
+
+      // loadeddata: newly increased to HAVE_CURRENT_DATA (2) or greater
+      if (el.readyState >= 2) {
+        eventsToTrigger.push('loadeddata');
+      }
+
+      // canplay: newly increased to HAVE_FUTURE_DATA (3) or greater
+      if (el.readyState >= 3) {
+        eventsToTrigger.push('canplay');
+      }
+
+      // canplaythrough: newly equal to HAVE_ENOUGH_DATA (4)
+      if (el.readyState >= 4) {
+        eventsToTrigger.push('canplaythrough');
+      }
+
+      // We still need to give the player time to add event listeners
+      this.ready(function () {
+        eventsToTrigger.forEach(function (type) {
+          this.trigger(type);
+        }, this);
+      });
+    }
+
+    /**
+     * Set whether we are scrubbing or not.
+     * This is used to decide whether we should use `fastSeek` or not.
+     * `fastSeek` is used to provide trick play on Safari browsers.
+     *
+     * @param {boolean} isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     */
+    setScrubbing(isScrubbing) {
+      this.isScrubbing_ = isScrubbing;
+    }
+
+    /**
+     * Get whether we are scrubbing or not.
+     *
+     * @return {boolean} isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     */
+    scrubbing() {
+      return this.isScrubbing_;
+    }
+
+    /**
+     * Set current time for the `HTML5` tech.
+     *
+     * @param {number} seconds
+     *        Set the current time of the media to this.
+     */
+    setCurrentTime(seconds) {
+      try {
+        if (this.isScrubbing_ && this.el_.fastSeek && IS_ANY_SAFARI) {
+          this.el_.fastSeek(seconds);
+        } else {
+          this.el_.currentTime = seconds;
+        }
+      } catch (e) {
+        log$1(e, 'Video is not ready. (Video.js)');
+        // this.warning(VideoJS.warnings.videoNotReady);
+      }
+    }
+
+    /**
+     * Get the current duration of the HTML5 media element.
+     *
+     * @return {number}
+     *         The duration of the media or 0 if there is no duration.
+     */
+    duration() {
+      // Android Chrome will report duration as Infinity for VOD HLS until after
+      // playback has started, which triggers the live display erroneously.
+      // Return NaN if playback has not started and trigger a durationupdate once
+      // the duration can be reliably known.
+      if (this.el_.duration === Infinity && IS_ANDROID && IS_CHROME && this.el_.currentTime === 0) {
+        // Wait for the first `timeupdate` with currentTime > 0 - there may be
+        // several with 0
+        const checkProgress = () => {
+          if (this.el_.currentTime > 0) {
+            // Trigger durationchange for genuinely live video
+            if (this.el_.duration === Infinity) {
+              this.trigger('durationchange');
+            }
+            this.off('timeupdate', checkProgress);
+          }
+        };
+        this.on('timeupdate', checkProgress);
+        return NaN;
+      }
+      return this.el_.duration || NaN;
+    }
+
+    /**
+     * Get the current width of the HTML5 media element.
+     *
+     * @return {number}
+     *         The width of the HTML5 media element.
+     */
+    width() {
+      return this.el_.offsetWidth;
+    }
+
+    /**
+     * Get the current height of the HTML5 media element.
+     *
+     * @return {number}
+     *         The height of the HTML5 media element.
+     */
+    height() {
+      return this.el_.offsetHeight;
+    }
+
+    /**
+     * Proxy iOS `webkitbeginfullscreen` and `webkitendfullscreen` into
+     * `fullscreenchange` event.
+     *
+     * @private
+     * @fires fullscreenchange
+     * @listens webkitendfullscreen
+     * @listens webkitbeginfullscreen
+     * @listens webkitbeginfullscreen
+     */
+    proxyWebkitFullscreen_() {
+      if (!('webkitDisplayingFullscreen' in this.el_)) {
+        return;
+      }
+      const endFn = function () {
+        this.trigger('fullscreenchange', {
+          isFullscreen: false
+        });
+        // Safari will sometimes set controls on the videoelement when existing fullscreen.
+        if (this.el_.controls && !this.options_.nativeControlsForTouch && this.controls()) {
+          this.el_.controls = false;
+        }
+      };
+      const beginFn = function () {
+        if ('webkitPresentationMode' in this.el_ && this.el_.webkitPresentationMode !== 'picture-in-picture') {
+          this.one('webkitendfullscreen', endFn);
+          this.trigger('fullscreenchange', {
+            isFullscreen: true,
+            // set a flag in case another tech triggers fullscreenchange
+            nativeIOSFullscreen: true
+          });
+        }
+      };
+      this.on('webkitbeginfullscreen', beginFn);
+      this.on('dispose', () => {
+        this.off('webkitbeginfullscreen', beginFn);
+        this.off('webkitendfullscreen', endFn);
+      });
+    }
+
+    /**
+     * Check if fullscreen is supported on the video el.
+     *
+     * @return {boolean}
+     *         - True if fullscreen is supported.
+     *         - False if fullscreen is not supported.
+     */
+    supportsFullScreen() {
+      return typeof this.el_.webkitEnterFullScreen === 'function';
+    }
+
+    /**
+     * Request that the `HTML5` Tech enter fullscreen.
+     */
+    enterFullScreen() {
+      const video = this.el_;
+      if (video.paused && video.networkState <= video.HAVE_METADATA) {
+        // attempt to prime the video element for programmatic access
+        // this isn't necessary on the desktop but shouldn't hurt
+        silencePromise(this.el_.play());
+
+        // playing and pausing synchronously during the transition to fullscreen
+        // can get iOS ~6.1 devices into a play/pause loop
+        this.setTimeout(function () {
+          video.pause();
+          try {
+            video.webkitEnterFullScreen();
+          } catch (e) {
+            this.trigger('fullscreenerror', e);
+          }
+        }, 0);
+      } else {
+        try {
+          video.webkitEnterFullScreen();
+        } catch (e) {
+          this.trigger('fullscreenerror', e);
+        }
+      }
+    }
+
+    /**
+     * Request that the `HTML5` Tech exit fullscreen.
+     */
+    exitFullScreen() {
+      if (!this.el_.webkitDisplayingFullscreen) {
+        this.trigger('fullscreenerror', new Error('The video is not fullscreen'));
+        return;
+      }
+      this.el_.webkitExitFullScreen();
+    }
+
+    /**
+     * Create a floating video window always on top of other windows so that users may
+     * continue consuming media while they interact with other content sites, or
+     * applications on their device.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @return {Promise}
+     *         A promise with a Picture-in-Picture window.
+     */
+    requestPictureInPicture() {
+      return this.el_.requestPictureInPicture();
+    }
+
+    /**
+     * Native requestVideoFrameCallback if supported by browser/tech, or fallback
+     * Don't use rVCF on Safari when DRM is playing, as it doesn't fire
+     * Needs to be checked later than the constructor
+     * This will be a false positive for clear sources loaded after a Fairplay source
+     *
+     * @param {function} cb function to call
+     * @return {number} id of request
+     */
+    requestVideoFrameCallback(cb) {
+      if (this.featuresVideoFrameCallback && !this.el_.webkitKeys) {
+        return this.el_.requestVideoFrameCallback(cb);
+      }
+      return super.requestVideoFrameCallback(cb);
+    }
+
+    /**
+     * Native or fallback requestVideoFrameCallback
+     *
+     * @param {number} id request id to cancel
+     */
+    cancelVideoFrameCallback(id) {
+      if (this.featuresVideoFrameCallback && !this.el_.webkitKeys) {
+        this.el_.cancelVideoFrameCallback(id);
+      } else {
+        super.cancelVideoFrameCallback(id);
+      }
+    }
+
+    /**
+     * A getter/setter for the `Html5` Tech's source object.
+     * > Note: Please use {@link Html5#setSource}
+     *
+     * @param {Tech~SourceObject} [src]
+     *        The source object you want to set on the `HTML5` techs element.
+     *
+     * @return {Tech~SourceObject|undefined}
+     *         - The current source object when a source is not passed in.
+     *         - undefined when setting
+     *
+     * @deprecated Since version 5.
+     */
+    src(src) {
+      if (src === undefined) {
+        return this.el_.src;
+      }
+
+      // Setting src through `src` instead of `setSrc` will be deprecated
+      this.setSrc(src);
+    }
+
+    /**
+     * Reset the tech by removing all sources and then calling
+     * {@link Html5.resetMediaElement}.
+     */
+    reset() {
+      Html5.resetMediaElement(this.el_);
+    }
+
+    /**
+     * Get the current source on the `HTML5` Tech. Falls back to returning the source from
+     * the HTML5 media element.
+     *
+     * @return {Tech~SourceObject}
+     *         The current source object from the HTML5 tech. With a fallback to the
+     *         elements source.
+     */
+    currentSrc() {
+      if (this.currentSource_) {
+        return this.currentSource_.src;
+      }
+      return this.el_.currentSrc;
+    }
+
+    /**
+     * Set controls attribute for the HTML5 media Element.
+     *
+     * @param {string} val
+     *        Value to set the controls attribute to
+     */
+    setControls(val) {
+      this.el_.controls = !!val;
+    }
+
+    /**
+     * Create and returns a remote {@link TextTrack} object.
+     *
+     * @param {string} kind
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+     *
+     * @param {string} [label]
+     *        Label to identify the text track
+     *
+     * @param {string} [language]
+     *        Two letter language abbreviation
+     *
+     * @return {TextTrack}
+     *         The TextTrack that gets created.
+     */
+    addTextTrack(kind, label, language) {
+      if (!this.featuresNativeTextTracks) {
+        return super.addTextTrack(kind, label, language);
+      }
+      return this.el_.addTextTrack(kind, label, language);
+    }
+
+    /**
+     * Creates either native TextTrack or an emulated TextTrack depending
+     * on the value of `featuresNativeTextTracks`
+     *
+     * @param {Object} options
+     *        The object should contain the options to initialize the TextTrack with.
+     *
+     * @param {string} [options.kind]
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+     *
+     * @param {string} [options.label]
+     *        Label to identify the text track
+     *
+     * @param {string} [options.language]
+     *        Two letter language abbreviation.
+     *
+     * @param {boolean} [options.default]
+     *        Default this track to on.
+     *
+     * @param {string} [options.id]
+     *        The internal id to assign this track.
+     *
+     * @param {string} [options.src]
+     *        A source url for the track.
+     *
+     * @return {HTMLTrackElement}
+     *         The track element that gets created.
+     */
+    createRemoteTextTrack(options) {
+      if (!this.featuresNativeTextTracks) {
+        return super.createRemoteTextTrack(options);
+      }
+      const htmlTrackElement = document.createElement('track');
+      if (options.kind) {
+        htmlTrackElement.kind = options.kind;
+      }
+      if (options.label) {
+        htmlTrackElement.label = options.label;
+      }
+      if (options.language || options.srclang) {
+        htmlTrackElement.srclang = options.language || options.srclang;
+      }
+      if (options.default) {
+        htmlTrackElement.default = options.default;
+      }
+      if (options.id) {
+        htmlTrackElement.id = options.id;
+      }
+      if (options.src) {
+        htmlTrackElement.src = options.src;
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Creates a remote text track object and returns an html track element.
+     *
+     * @param {Object} options The object should contain values for
+     * kind, language, label, and src (location of the WebVTT file)
+     * @param {boolean} [manualCleanup=false] if set to true, the TextTrack
+     * will not be removed from the TextTrackList and HtmlTrackElementList
+     * after a source change
+     * @return {HTMLTrackElement} An Html Track Element.
+     * This can be an emulated {@link HTMLTrackElement} or a native one.
+     *
+     */
+    addRemoteTextTrack(options, manualCleanup) {
+      const htmlTrackElement = super.addRemoteTextTrack(options, manualCleanup);
+      if (this.featuresNativeTextTracks) {
+        this.el().appendChild(htmlTrackElement);
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Remove remote `TextTrack` from `TextTrackList` object
+     *
+     * @param {TextTrack} track
+     *        `TextTrack` object to remove
+     */
+    removeRemoteTextTrack(track) {
+      super.removeRemoteTextTrack(track);
+      if (this.featuresNativeTextTracks) {
+        const tracks = this.$$('track');
+        let i = tracks.length;
+        while (i--) {
+          if (track === tracks[i] || track === tracks[i].track) {
+            this.el().removeChild(tracks[i]);
+          }
+        }
+      }
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object}
+     *         An object with supported media playback quality metrics
+     */
+    getVideoPlaybackQuality() {
+      if (typeof this.el().getVideoPlaybackQuality === 'function') {
+        return this.el().getVideoPlaybackQuality();
+      }
+      const videoPlaybackQuality = {};
+      if (typeof this.el().webkitDroppedFrameCount !== 'undefined' && typeof this.el().webkitDecodedFrameCount !== 'undefined') {
+        videoPlaybackQuality.droppedVideoFrames = this.el().webkitDroppedFrameCount;
+        videoPlaybackQuality.totalVideoFrames = this.el().webkitDecodedFrameCount;
+      }
+      if (window.performance) {
+        videoPlaybackQuality.creationTime = window.performance.now();
+      }
+      return videoPlaybackQuality;
+    }
+  }
+
+  /* HTML5 Support Testing ---------------------------------------------------- */
+
+  /**
+   * Element for testing browser HTML5 media capabilities
+   *
+   * @type {Element}
+   * @constant
+   * @private
+   */
+  defineLazyProperty(Html5, 'TEST_VID', function () {
+    if (!isReal()) {
+      return;
+    }
+    const video = document.createElement('video');
+    const track = document.createElement('track');
+    track.kind = 'captions';
+    track.srclang = 'en';
+    track.label = 'English';
+    video.appendChild(track);
+    return video;
+  });
+
+  /**
+   * Check if HTML5 media is supported by this browser/device.
+   *
+   * @return {boolean}
+   *         - True if HTML5 media is supported.
+   *         - False if HTML5 media is not supported.
+   */
+  Html5.isSupported = function () {
+    // IE with no Media Player is a LIAR! (#984)
+    try {
+      Html5.TEST_VID.volume = 0.5;
+    } catch (e) {
+      return false;
+    }
+    return !!(Html5.TEST_VID && Html5.TEST_VID.canPlayType);
+  };
+
+  /**
+   * Check if the tech can support the given type
+   *
+   * @param {string} type
+   *        The mimetype to check
+   * @return {string} 'probably', 'maybe', or '' (empty string)
+   */
+  Html5.canPlayType = function (type) {
+    return Html5.TEST_VID.canPlayType(type);
+  };
+
+  /**
+   * Check if the tech can support the given source
+   *
+   * @param {Object} srcObj
+   *        The source object
+   * @param {Object} options
+   *        The options passed to the tech
+   * @return {string} 'probably', 'maybe', or '' (empty string)
+   */
+  Html5.canPlaySource = function (srcObj, options) {
+    return Html5.canPlayType(srcObj.type);
+  };
+
+  /**
+   * Check if the volume can be changed in this browser/device.
+   * Volume cannot be changed in a lot of mobile devices.
+   * Specifically, it can't be changed from 1 on iOS.
+   *
+   * @return {boolean}
+   *         - True if volume can be controlled
+   *         - False otherwise
+   */
+  Html5.canControlVolume = function () {
+    // IE will error if Windows Media Player not installed #3315
+    try {
+      const volume = Html5.TEST_VID.volume;
+      Html5.TEST_VID.volume = volume / 2 + 0.1;
+      const canControl = volume !== Html5.TEST_VID.volume;
+
+      // With the introduction of iOS 15, there are cases where the volume is read as
+      // changed but reverts back to its original state at the start of the next tick.
+      // To determine whether volume can be controlled on iOS,
+      // a timeout is set and the volume is checked asynchronously.
+      // Since `features` doesn't currently work asynchronously, the value is manually set.
+      if (canControl && IS_IOS) {
+        window.setTimeout(() => {
+          if (Html5 && Html5.prototype) {
+            Html5.prototype.featuresVolumeControl = volume !== Html5.TEST_VID.volume;
+          }
+        });
+
+        // default iOS to false, which will be updated in the timeout above.
+        return false;
+      }
+      return canControl;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if the volume can be muted in this browser/device.
+   * Some devices, e.g. iOS, don't allow changing volume
+   * but permits muting/unmuting.
+   *
+   * @return {boolean}
+   *      - True if volume can be muted
+   *      - False otherwise
+   */
+  Html5.canMuteVolume = function () {
+    try {
+      const muted = Html5.TEST_VID.muted;
+
+      // in some versions of iOS muted property doesn't always
+      // work, so we want to set both property and attribute
+      Html5.TEST_VID.muted = !muted;
+      if (Html5.TEST_VID.muted) {
+        setAttribute(Html5.TEST_VID, 'muted', 'muted');
+      } else {
+        removeAttribute(Html5.TEST_VID, 'muted', 'muted');
+      }
+      return muted !== Html5.TEST_VID.muted;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if the playback rate can be changed in this browser/device.
+   *
+   * @return {boolean}
+   *         - True if playback rate can be controlled
+   *         - False otherwise
+   */
+  Html5.canControlPlaybackRate = function () {
+    // Playback rate API is implemented in Android Chrome, but doesn't do anything
+    // https://github.com/videojs/video.js/issues/3180
+    if (IS_ANDROID && IS_CHROME && CHROME_VERSION < 58) {
+      return false;
+    }
+    // IE will error if Windows Media Player not installed #3315
+    try {
+      const playbackRate = Html5.TEST_VID.playbackRate;
+      Html5.TEST_VID.playbackRate = playbackRate / 2 + 0.1;
+      return playbackRate !== Html5.TEST_VID.playbackRate;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if we can override a video/audio elements attributes, with
+   * Object.defineProperty.
+   *
+   * @return {boolean}
+   *         - True if builtin attributes can be overridden
+   *         - False otherwise
+   */
+  Html5.canOverrideAttributes = function () {
+    // if we cannot overwrite the src/innerHTML property, there is no support
+    // iOS 7 safari for instance cannot do this.
+    try {
+      const noop = () => {};
+      Object.defineProperty(document.createElement('video'), 'src', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('audio'), 'src', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('video'), 'innerHTML', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('audio'), 'innerHTML', {
+        get: noop,
+        set: noop
+      });
+    } catch (e) {
+      return false;
+    }
+    return true;
+  };
+
+  /**
+   * Check to see if native `TextTrack`s are supported by this browser/device.
+   *
+   * @return {boolean}
+   *         - True if native `TextTrack`s are supported.
+   *         - False otherwise
+   */
+  Html5.supportsNativeTextTracks = function () {
+    return IS_ANY_SAFARI || IS_IOS && IS_CHROME;
+  };
+
+  /**
+   * Check to see if native `VideoTrack`s are supported by this browser/device
+   *
+   * @return {boolean}
+   *        - True if native `VideoTrack`s are supported.
+   *        - False otherwise
+   */
+  Html5.supportsNativeVideoTracks = function () {
+    return !!(Html5.TEST_VID && Html5.TEST_VID.videoTracks);
+  };
+
+  /**
+   * Check to see if native `AudioTrack`s are supported by this browser/device
+   *
+   * @return {boolean}
+   *        - True if native `AudioTrack`s are supported.
+   *        - False otherwise
+   */
+  Html5.supportsNativeAudioTracks = function () {
+    return !!(Html5.TEST_VID && Html5.TEST_VID.audioTracks);
+  };
+
+  /**
+   * An array of events available on the Html5 tech.
+   *
+   * @private
+   * @type {Array}
+   */
+  Html5.Events = ['loadstart', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'seeking', 'seeked', 'ended', 'durationchange', 'timeupdate', 'progress', 'play', 'pause', 'ratechange', 'resize', 'volumechange'];
+
+  /**
+   * Boolean indicating whether the `Tech` supports volume control.
+   *
+   * @type {boolean}
+   * @default {@link Html5.canControlVolume}
+   */
+  /**
+   * Boolean indicating whether the `Tech` supports muting volume.
+   *
+   * @type {boolean}
+   * @default {@link Html5.canMuteVolume}
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports changing the speed at which the media
+   * plays. Examples:
+   *   - Set player to play 2x (twice) as fast
+   *   - Set player to play 0.5x (half) as fast
+   *
+   * @type {boolean}
+   * @default {@link Html5.canControlPlaybackRate}
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `sourceset` event.
+   *
+   * @type {boolean}
+   * @default
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `TextTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeTextTracks}
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `VideoTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeVideoTracks}
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `AudioTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeAudioTracks}
+   */
+  [['featuresMuteControl', 'canMuteVolume'], ['featuresPlaybackRate', 'canControlPlaybackRate'], ['featuresSourceset', 'canOverrideAttributes'], ['featuresNativeTextTracks', 'supportsNativeTextTracks'], ['featuresNativeVideoTracks', 'supportsNativeVideoTracks'], ['featuresNativeAudioTracks', 'supportsNativeAudioTracks']].forEach(function ([key, fn]) {
+    defineLazyProperty(Html5.prototype, key, () => Html5[fn](), true);
+  });
+  Html5.prototype.featuresVolumeControl = Html5.canControlVolume();
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the media element
+   * moving in the DOM. iOS breaks if you move the media element, so this is set this to
+   * false there. Everywhere else this should be true.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.movingMediaElementInDOM = !IS_IOS;
+
+  // TODO: Previous comment: No longer appears to be used. Can probably be removed.
+  //       Is this true?
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports automatic media resize
+   * when going into fullscreen.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.featuresFullscreenResize = true;
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the progress event.
+   * If this is false, manual `progress` events will be triggered instead.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.featuresProgressEvents = true;
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the timeupdate event.
+   * If this is false, manual `timeupdate` events will be triggered instead.
+   *
+   * @default
+   */
+  Html5.prototype.featuresTimeupdateEvents = true;
+
+  /**
+   * Whether the HTML5 el supports `requestVideoFrameCallback`
+   *
+   * @type {boolean}
+   */
+  Html5.prototype.featuresVideoFrameCallback = !!(Html5.TEST_VID && Html5.TEST_VID.requestVideoFrameCallback);
+  Html5.disposeMediaElement = function (el) {
+    if (!el) {
+      return;
+    }
+    if (el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+
+    // remove any child track or source nodes to prevent their loading
+    while (el.hasChildNodes()) {
+      el.removeChild(el.firstChild);
+    }
+
+    // remove any src reference. not setting `src=''` because that causes a warning
+    // in firefox
+    el.removeAttribute('src');
+
+    // force the media element to update its loading state by calling load()
+    // however IE on Windows 7N has a bug that throws an error so need a try/catch (#793)
+    if (typeof el.load === 'function') {
+      // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+      (function () {
+        try {
+          el.load();
+        } catch (e) {
+          // not supported
+        }
+      })();
+    }
+  };
+  Html5.resetMediaElement = function (el) {
+    if (!el) {
+      return;
+    }
+    const sources = el.querySelectorAll('source');
+    let i = sources.length;
+    while (i--) {
+      el.removeChild(sources[i]);
+    }
+
+    // remove any src reference.
+    // not setting `src=''` because that throws an error
+    el.removeAttribute('src');
+    if (typeof el.load === 'function') {
+      // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+      (function () {
+        try {
+          el.load();
+        } catch (e) {
+          // satisfy linter
+        }
+      })();
+    }
+  };
+
+  /* Native HTML5 element property wrapping ----------------------------------- */
+  // Wrap native boolean attributes with getters that check both property and attribute
+  // The list is as followed:
+  // muted, defaultMuted, autoplay, controls, loop, playsinline
+  [
+  /**
+   * Get the value of `muted` from the media element. `muted` indicates
+   * that the volume for the media should be set to silent. This does not actually change
+   * the `volume` attribute.
+   *
+   * @method Html5#muted
+   * @return {boolean}
+   *         - True if the value of `volume` should be ignored and the audio set to silent.
+   *         - False if the value of `volume` should be used.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted}
+   */
+  'muted',
+  /**
+   * Get the value of `defaultMuted` from the media element. `defaultMuted` indicates
+   * whether the media should start muted or not. Only changes the default state of the
+   * media. `muted` and `defaultMuted` can have different values. {@link Html5#muted} indicates the
+   * current state.
+   *
+   * @method Html5#defaultMuted
+   * @return {boolean}
+   *         - The value of `defaultMuted` from the media element.
+   *         - True indicates that the media should start muted.
+   *         - False indicates that the media should not start muted
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted}
+   */
+  'defaultMuted',
+  /**
+   * Get the value of `autoplay` from the media element. `autoplay` indicates
+   * that the media should start to play as soon as the page is ready.
+   *
+   * @method Html5#autoplay
+   * @return {boolean}
+   *         - The value of `autoplay` from the media element.
+   *         - True indicates that the media should start as soon as the page loads.
+   *         - False indicates that the media should not start as soon as the page loads.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay}
+   */
+  'autoplay',
+  /**
+   * Get the value of `controls` from the media element. `controls` indicates
+   * whether the native media controls should be shown or hidden.
+   *
+   * @method Html5#controls
+   * @return {boolean}
+   *         - The value of `controls` from the media element.
+   *         - True indicates that native controls should be showing.
+   *         - False indicates that native controls should be hidden.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-controls}
+   */
+  'controls',
+  /**
+   * Get the value of `loop` from the media element. `loop` indicates
+   * that the media should return to the start of the media and continue playing once
+   * it reaches the end.
+   *
+   * @method Html5#loop
+   * @return {boolean}
+   *         - The value of `loop` from the media element.
+   *         - True indicates that playback should seek back to start once
+   *           the end of a media is reached.
+   *         - False indicates that playback should not loop back to the start when the
+   *           end of the media is reached.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop}
+   */
+  'loop',
+  /**
+   * Get the value of `playsinline` from the media element. `playsinline` indicates
+   * to the browser that non-fullscreen playback is preferred when fullscreen
+   * playback is the native default, such as in iOS Safari.
+   *
+   * @method Html5#playsinline
+   * @return {boolean}
+   *         - The value of `playsinline` from the media element.
+   *         - True indicates that the media should play inline.
+   *         - False indicates that the media should not play inline.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+   */
+  'playsinline'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop] || this.el_.hasAttribute(prop);
+    };
+  });
+
+  // Wrap native boolean attributes with setters that set both property and attribute
+  // The list is as followed:
+  // setMuted, setDefaultMuted, setAutoplay, setLoop, setPlaysinline
+  // setControls is special-cased above
+  [
+  /**
+   * Set the value of `muted` on the media element. `muted` indicates that the current
+   * audio level should be silent.
+   *
+   * @method Html5#setMuted
+   * @param {boolean} muted
+   *        - True if the audio should be set to silent
+   *        - False otherwise
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted}
+   */
+  'muted',
+  /**
+   * Set the value of `defaultMuted` on the media element. `defaultMuted` indicates that the current
+   * audio level should be silent, but will only effect the muted level on initial playback..
+   *
+   * @method Html5.prototype.setDefaultMuted
+   * @param {boolean} defaultMuted
+   *        - True if the audio should be set to silent
+   *        - False otherwise
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted}
+   */
+  'defaultMuted',
+  /**
+   * Set the value of `autoplay` on the media element. `autoplay` indicates
+   * that the media should start to play as soon as the page is ready.
+   *
+   * @method Html5#setAutoplay
+   * @param {boolean} autoplay
+   *         - True indicates that the media should start as soon as the page loads.
+   *         - False indicates that the media should not start as soon as the page loads.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay}
+   */
+  'autoplay',
+  /**
+   * Set the value of `loop` on the media element. `loop` indicates
+   * that the media should return to the start of the media and continue playing once
+   * it reaches the end.
+   *
+   * @method Html5#setLoop
+   * @param {boolean} loop
+   *         - True indicates that playback should seek back to start once
+   *           the end of a media is reached.
+   *         - False indicates that playback should not loop back to the start when the
+   *           end of the media is reached.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop}
+   */
+  'loop',
+  /**
+   * Set the value of `playsinline` from the media element. `playsinline` indicates
+   * to the browser that non-fullscreen playback is preferred when fullscreen
+   * playback is the native default, such as in iOS Safari.
+   *
+   * @method Html5#setPlaysinline
+   * @param {boolean} playsinline
+   *         - True indicates that the media should play inline.
+   *         - False indicates that the media should not play inline.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+   */
+  'playsinline'].forEach(function (prop) {
+    Html5.prototype['set' + toTitleCase$1(prop)] = function (v) {
+      this.el_[prop] = v;
+      if (v) {
+        this.el_.setAttribute(prop, prop);
+      } else {
+        this.el_.removeAttribute(prop);
+      }
+    };
+  });
+
+  // Wrap native properties with a getter
+  // The list is as followed
+  // paused, currentTime, buffered, volume, poster, preload, error, seeking
+  // seekable, ended, playbackRate, defaultPlaybackRate, disablePictureInPicture
+  // played, networkState, readyState, videoWidth, videoHeight, crossOrigin
+  [
+  /**
+   * Get the value of `paused` from the media element. `paused` indicates whether the media element
+   * is currently paused or not.
+   *
+   * @method Html5#paused
+   * @return {boolean}
+   *         The value of `paused` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-paused}
+   */
+  'paused',
+  /**
+   * Get the value of `currentTime` from the media element. `currentTime` indicates
+   * the current second that the media is at in playback.
+   *
+   * @method Html5#currentTime
+   * @return {number}
+   *         The value of `currentTime` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-currenttime}
+   */
+  'currentTime',
+  /**
+   * Get the value of `buffered` from the media element. `buffered` is a `TimeRange`
+   * object that represents the parts of the media that are already downloaded and
+   * available for playback.
+   *
+   * @method Html5#buffered
+   * @return {TimeRange}
+   *         The value of `buffered` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-buffered}
+   */
+  'buffered',
+  /**
+   * Get the value of `volume` from the media element. `volume` indicates
+   * the current playback volume of audio for a media. `volume` will be a value from 0
+   * (silent) to 1 (loudest and default).
+   *
+   * @method Html5#volume
+   * @return {number}
+   *         The value of `volume` from the media element. Value will be between 0-1.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume}
+   */
+  'volume',
+  /**
+   * Get the value of `poster` from the media element. `poster` indicates
+   * that the url of an image file that can/will be shown when no media data is available.
+   *
+   * @method Html5#poster
+   * @return {string}
+   *         The value of `poster` from the media element. Value will be a url to an
+   *         image.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-video-poster}
+   */
+  'poster',
+  /**
+   * Get the value of `preload` from the media element. `preload` indicates
+   * what should download before the media is interacted with. It can have the following
+   * values:
+   * - none: nothing should be downloaded
+   * - metadata: poster and the first few frames of the media may be downloaded to get
+   *   media dimensions and other metadata
+   * - auto: allow the media and metadata for the media to be downloaded before
+   *    interaction
+   *
+   * @method Html5#preload
+   * @return {string}
+   *         The value of `preload` from the media element. Will be 'none', 'metadata',
+   *         or 'auto'.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload}
+   */
+  'preload',
+  /**
+   * Get the value of the `error` from the media element. `error` indicates any
+   * MediaError that may have occurred during playback. If error returns null there is no
+   * current error.
+   *
+   * @method Html5#error
+   * @return {MediaError|null}
+   *         The value of `error` from the media element. Will be `MediaError` if there
+   *         is a current error and null otherwise.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-error}
+   */
+  'error',
+  /**
+   * Get the value of `seeking` from the media element. `seeking` indicates whether the
+   * media is currently seeking to a new position or not.
+   *
+   * @method Html5#seeking
+   * @return {boolean}
+   *         - The value of `seeking` from the media element.
+   *         - True indicates that the media is currently seeking to a new position.
+   *         - False indicates that the media is not seeking to a new position at this time.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seeking}
+   */
+  'seeking',
+  /**
+   * Get the value of `seekable` from the media element. `seekable` returns a
+   * `TimeRange` object indicating ranges of time that can currently be `seeked` to.
+   *
+   * @method Html5#seekable
+   * @return {TimeRange}
+   *         The value of `seekable` from the media element. A `TimeRange` object
+   *         indicating the current ranges of time that can be seeked to.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seekable}
+   */
+  'seekable',
+  /**
+   * Get the value of `ended` from the media element. `ended` indicates whether
+   * the media has reached the end or not.
+   *
+   * @method Html5#ended
+   * @return {boolean}
+   *         - The value of `ended` from the media element.
+   *         - True indicates that the media has ended.
+   *         - False indicates that the media has not ended.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-ended}
+   */
+  'ended',
+  /**
+   * Get the value of `playbackRate` from the media element. `playbackRate` indicates
+   * the rate at which the media is currently playing back. Examples:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5#playbackRate
+   * @return {number}
+   *         The value of `playbackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'playbackRate',
+  /**
+   * Get the value of `defaultPlaybackRate` from the media element. `defaultPlaybackRate` indicates
+   * the rate at which the media is currently playing back. This value will not indicate the current
+   * `playbackRate` after playback has started, use {@link Html5#playbackRate} for that.
+   *
+   * Examples:
+   *   - if defaultPlaybackRate is set to 2, media will play twice as fast.
+   *   - if defaultPlaybackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5.prototype.defaultPlaybackRate
+   * @return {number}
+   *         The value of `defaultPlaybackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'defaultPlaybackRate',
+  /**
+   * Get the value of 'disablePictureInPicture' from the video element.
+   *
+   * @method Html5#disablePictureInPicture
+   * @return {boolean} value
+   *         - The value of `disablePictureInPicture` from the video element.
+   *         - True indicates that the video can't be played in Picture-In-Picture mode
+   *         - False indicates that the video can be played in Picture-In-Picture mode
+   *
+   * @see [Spec]{@link https://w3c.github.io/picture-in-picture/#disable-pip}
+   */
+  'disablePictureInPicture',
+  /**
+   * Get the value of `played` from the media element. `played` returns a `TimeRange`
+   * object representing points in the media timeline that have been played.
+   *
+   * @method Html5#played
+   * @return {TimeRange}
+   *         The value of `played` from the media element. A `TimeRange` object indicating
+   *         the ranges of time that have been played.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-played}
+   */
+  'played',
+  /**
+   * Get the value of `networkState` from the media element. `networkState` indicates
+   * the current network state. It returns an enumeration from the following list:
+   * - 0: NETWORK_EMPTY
+   * - 1: NETWORK_IDLE
+   * - 2: NETWORK_LOADING
+   * - 3: NETWORK_NO_SOURCE
+   *
+   * @method Html5#networkState
+   * @return {number}
+   *         The value of `networkState` from the media element. This will be a number
+   *         from the list in the description.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-networkstate}
+   */
+  'networkState',
+  /**
+   * Get the value of `readyState` from the media element. `readyState` indicates
+   * the current state of the media element. It returns an enumeration from the
+   * following list:
+   * - 0: HAVE_NOTHING
+   * - 1: HAVE_METADATA
+   * - 2: HAVE_CURRENT_DATA
+   * - 3: HAVE_FUTURE_DATA
+   * - 4: HAVE_ENOUGH_DATA
+   *
+   * @method Html5#readyState
+   * @return {number}
+   *         The value of `readyState` from the media element. This will be a number
+   *         from the list in the description.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#ready-states}
+   */
+  'readyState',
+  /**
+   * Get the value of `videoWidth` from the video element. `videoWidth` indicates
+   * the current width of the video in css pixels.
+   *
+   * @method Html5#videoWidth
+   * @return {number}
+   *         The value of `videoWidth` from the video element. This will be a number
+   *         in css pixels.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth}
+   */
+  'videoWidth',
+  /**
+   * Get the value of `videoHeight` from the video element. `videoHeight` indicates
+   * the current height of the video in css pixels.
+   *
+   * @method Html5#videoHeight
+   * @return {number}
+   *         The value of `videoHeight` from the video element. This will be a number
+   *         in css pixels.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth}
+   */
+  'videoHeight',
+  /**
+   * Get the value of `crossOrigin` from the media element. `crossOrigin` indicates
+   * to the browser that should sent the cookies along with the requests for the
+   * different assets/playlists
+   *
+   * @method Html5#crossOrigin
+   * @return {string}
+   *         - anonymous indicates that the media should not sent cookies.
+   *         - use-credentials indicates that the media should sent cookies along the requests.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-media-crossorigin}
+   */
+  'crossOrigin'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop];
+    };
+  });
+
+  // Wrap native properties with a setter in this format:
+  // set + toTitleCase(name)
+  // The list is as follows:
+  // setVolume, setSrc, setPoster, setPreload, setPlaybackRate, setDefaultPlaybackRate,
+  // setDisablePictureInPicture, setCrossOrigin
+  [
+  /**
+   * Set the value of `volume` on the media element. `volume` indicates the current
+   * audio level as a percentage in decimal form. This means that 1 is 100%, 0.5 is 50%, and
+   * so on.
+   *
+   * @method Html5#setVolume
+   * @param {number} percentAsDecimal
+   *        The volume percent as a decimal. Valid range is from 0-1.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume}
+   */
+  'volume',
+  /**
+   * Set the value of `src` on the media element. `src` indicates the current
+   * {@link Tech~SourceObject} for the media.
+   *
+   * @method Html5#setSrc
+   * @param {Tech~SourceObject} src
+   *        The source object to set as the current source.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-src}
+   */
+  'src',
+  /**
+   * Set the value of `poster` on the media element. `poster` is the url to
+   * an image file that can/will be shown when no media data is available.
+   *
+   * @method Html5#setPoster
+   * @param {string} poster
+   *        The url to an image that should be used as the `poster` for the media
+   *        element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-poster}
+   */
+  'poster',
+  /**
+   * Set the value of `preload` on the media element. `preload` indicates
+   * what should download before the media is interacted with. It can have the following
+   * values:
+   * - none: nothing should be downloaded
+   * - metadata: poster and the first few frames of the media may be downloaded to get
+   *   media dimensions and other metadata
+   * - auto: allow the media and metadata for the media to be downloaded before
+   *    interaction
+   *
+   * @method Html5#setPreload
+   * @param {string} preload
+   *         The value of `preload` to set on the media element. Must be 'none', 'metadata',
+   *         or 'auto'.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload}
+   */
+  'preload',
+  /**
+   * Set the value of `playbackRate` on the media element. `playbackRate` indicates
+   * the rate at which the media should play back. Examples:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5#setPlaybackRate
+   * @return {number}
+   *         The value of `playbackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'playbackRate',
+  /**
+   * Set the value of `defaultPlaybackRate` on the media element. `defaultPlaybackRate` indicates
+   * the rate at which the media should play back upon initial startup. Changing this value
+   * after a video has started will do nothing. Instead you should used {@link Html5#setPlaybackRate}.
+   *
+   * Example Values:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5.prototype.setDefaultPlaybackRate
+   * @return {number}
+   *         The value of `defaultPlaybackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultplaybackrate}
+   */
+  'defaultPlaybackRate',
+  /**
+   * Prevents the browser from suggesting a Picture-in-Picture context menu
+   * or to request Picture-in-Picture automatically in some cases.
+   *
+   * @method Html5#setDisablePictureInPicture
+   * @param {boolean} value
+   *         The true value will disable Picture-in-Picture mode.
+   *
+   * @see [Spec]{@link https://w3c.github.io/picture-in-picture/#disable-pip}
+   */
+  'disablePictureInPicture',
+  /**
+   * Set the value of `crossOrigin` from the media element. `crossOrigin` indicates
+   * to the browser that should sent the cookies along with the requests for the
+   * different assets/playlists
+   *
+   * @method Html5#setCrossOrigin
+   * @param {string} crossOrigin
+   *         - anonymous indicates that the media should not sent cookies.
+   *         - use-credentials indicates that the media should sent cookies along the requests.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-media-crossorigin}
+   */
+  'crossOrigin'].forEach(function (prop) {
+    Html5.prototype['set' + toTitleCase$1(prop)] = function (v) {
+      this.el_[prop] = v;
+    };
+  });
+
+  // wrap native functions with a function
+  // The list is as follows:
+  // pause, load, play
+  [
+  /**
+   * A wrapper around the media elements `pause` function. This will call the `HTML5`
+   * media elements `pause` function.
+   *
+   * @method Html5#pause
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-pause}
+   */
+  'pause',
+  /**
+   * A wrapper around the media elements `load` function. This will call the `HTML5`s
+   * media element `load` function.
+   *
+   * @method Html5#load
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-load}
+   */
+  'load',
+  /**
+   * A wrapper around the media elements `play` function. This will call the `HTML5`s
+   * media element `play` function.
+   *
+   * @method Html5#play
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-play}
+   */
+  'play'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop]();
+    };
+  });
+  Tech.withSourceHandlers(Html5);
+
+  /**
+   * Native source handler for Html5, simply passes the source to the media element.
+   *
+   * @property {Tech~SourceObject} source
+   *        The source object
+   *
+   * @property {Html5} tech
+   *        The instance of the HTML5 tech.
+   */
+  Html5.nativeSourceHandler = {};
+
+  /**
+   * Check if the media element can play the given mime type.
+   *
+   * @param {string} type
+   *        The mimetype to check
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string)
+   */
+  Html5.nativeSourceHandler.canPlayType = function (type) {
+    // IE without MediaPlayer throws an error (#519)
+    try {
+      return Html5.TEST_VID.canPlayType(type);
+    } catch (e) {
+      return '';
+    }
+  };
+
+  /**
+   * Check if the media element can handle a source natively.
+   *
+   * @param {Tech~SourceObject} source
+   *         The source object
+   *
+   * @param {Object} [options]
+   *         Options to be passed to the tech.
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string).
+   */
+  Html5.nativeSourceHandler.canHandleSource = function (source, options) {
+    // If a type was provided we should rely on that
+    if (source.type) {
+      return Html5.nativeSourceHandler.canPlayType(source.type);
+
+      // If no type, fall back to checking 'video/[EXTENSION]'
+    } else if (source.src) {
+      const ext = getFileExtension(source.src);
+      return Html5.nativeSourceHandler.canPlayType(`video/${ext}`);
+    }
+    return '';
+  };
+
+  /**
+   * Pass the source to the native media element.
+   *
+   * @param {Tech~SourceObject} source
+   *        The source object
+   *
+   * @param {Html5} tech
+   *        The instance of the Html5 tech
+   *
+   * @param {Object} [options]
+   *        The options to pass to the source
+   */
+  Html5.nativeSourceHandler.handleSource = function (source, tech, options) {
+    tech.setSrc(source.src);
+  };
+
+  /**
+   * A noop for the native dispose function, as cleanup is not needed.
+   */
+  Html5.nativeSourceHandler.dispose = function () {};
+
+  // Register the native source handler
+  Html5.registerSourceHandler(Html5.nativeSourceHandler);
+  Tech.registerTech('Html5', Html5);
+
+  /**
+   * @file player.js
+   */
+
+  // The following tech events are simply re-triggered
+  // on the player when they happen
+  const TECH_EVENTS_RETRIGGER = [
+  /**
+   * Fired while the user agent is downloading media data.
+   *
+   * @event Player#progress
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `progress` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechProgress_
+   * @fires Player#progress
+   * @listens Tech#progress
+   */
+  'progress',
+  /**
+   * Fires when the loading of an audio/video is aborted.
+   *
+   * @event Player#abort
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `abort` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechAbort_
+   * @fires Player#abort
+   * @listens Tech#abort
+   */
+  'abort',
+  /**
+   * Fires when the browser is intentionally not getting media data.
+   *
+   * @event Player#suspend
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `suspend` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechSuspend_
+   * @fires Player#suspend
+   * @listens Tech#suspend
+   */
+  'suspend',
+  /**
+   * Fires when the current playlist is empty.
+   *
+   * @event Player#emptied
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `emptied` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechEmptied_
+   * @fires Player#emptied
+   * @listens Tech#emptied
+   */
+  'emptied',
+  /**
+   * Fires when the browser is trying to get media data, but data is not available.
+   *
+   * @event Player#stalled
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `stalled` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechStalled_
+   * @fires Player#stalled
+   * @listens Tech#stalled
+   */
+  'stalled',
+  /**
+   * Fires when the browser has loaded meta data for the audio/video.
+   *
+   * @event Player#loadedmetadata
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `loadedmetadata` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechLoadedmetadata_
+   * @fires Player#loadedmetadata
+   * @listens Tech#loadedmetadata
+   */
+  'loadedmetadata',
+  /**
+   * Fires when the browser has loaded the current frame of the audio/video.
+   *
+   * @event Player#loadeddata
+   * @type {event}
+   */
+  /**
+   * Retrigger the `loadeddata` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechLoaddeddata_
+   * @fires Player#loadeddata
+   * @listens Tech#loadeddata
+   */
+  'loadeddata',
+  /**
+   * Fires when the current playback position has changed.
+   *
+   * @event Player#timeupdate
+   * @type {event}
+   */
+  /**
+   * Retrigger the `timeupdate` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechTimeUpdate_
+   * @fires Player#timeupdate
+   * @listens Tech#timeupdate
+   */
+  'timeupdate',
+  /**
+   * Fires when the video's intrinsic dimensions change
+   *
+   * @event Player#resize
+   * @type {event}
+   */
+  /**
+   * Retrigger the `resize` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechResize_
+   * @fires Player#resize
+   * @listens Tech#resize
+   */
+  'resize',
+  /**
+   * Fires when the volume has been changed
+   *
+   * @event Player#volumechange
+   * @type {event}
+   */
+  /**
+   * Retrigger the `volumechange` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechVolumechange_
+   * @fires Player#volumechange
+   * @listens Tech#volumechange
+   */
+  'volumechange',
+  /**
+   * Fires when the text track has been changed
+   *
+   * @event Player#texttrackchange
+   * @type {event}
+   */
+  /**
+   * Retrigger the `texttrackchange` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechTexttrackchange_
+   * @fires Player#texttrackchange
+   * @listens Tech#texttrackchange
+   */
+  'texttrackchange'];
+
+  // events to queue when playback rate is zero
+  // this is a hash for the sole purpose of mapping non-camel-cased event names
+  // to camel-cased function names
+  const TECH_EVENTS_QUEUE = {
+    canplay: 'CanPlay',
+    canplaythrough: 'CanPlayThrough',
+    playing: 'Playing',
+    seeked: 'Seeked'
+  };
+  const BREAKPOINT_ORDER = ['tiny', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'huge'];
+  const BREAKPOINT_CLASSES = {};
+
+  // grep: vjs-layout-tiny
+  // grep: vjs-layout-x-small
+  // grep: vjs-layout-small
+  // grep: vjs-layout-medium
+  // grep: vjs-layout-large
+  // grep: vjs-layout-x-large
+  // grep: vjs-layout-huge
+  BREAKPOINT_ORDER.forEach(k => {
+    const v = k.charAt(0) === 'x' ? `x-${k.substring(1)}` : k;
+    BREAKPOINT_CLASSES[k] = `vjs-layout-${v}`;
+  });
+  const DEFAULT_BREAKPOINTS = {
+    tiny: 210,
+    xsmall: 320,
+    small: 425,
+    medium: 768,
+    large: 1440,
+    xlarge: 2560,
+    huge: Infinity
+  };
+
+  /**
+   * An instance of the `Player` class is created when any of the Video.js setup methods
+   * are used to initialize a video.
+   *
+   * After an instance has been created it can be accessed globally in three ways:
+   * 1. By calling `videojs.getPlayer('example_video_1');`
+   * 2. By calling `videojs('example_video_1');` (not recommended)
+   * 2. By using it directly via `videojs.players.example_video_1;`
+   *
+   * @extends Component
+   * @global
+   */
+  class Player extends Component$1 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Element} tag
+     *        The original video DOM element used for configuring options.
+     *
+     * @param {Object} [options]
+     *        Object of option names and values.
+     *
+     * @param {Function} [ready]
+     *        Ready callback function.
+     */
+    constructor(tag, options, ready) {
+      // Make sure tag ID exists
+      // also here.. probably better
+      tag.id = tag.id || options.id || `vjs_video_${newGUID()}`;
+
+      // Set Options
+      // The options argument overrides options set in the video tag
+      // which overrides globally set options.
+      // This latter part coincides with the load order
+      // (tag must exist before Player)
+      options = Object.assign(Player.getTagSettings(tag), options);
+
+      // Delay the initialization of children because we need to set up
+      // player properties first, and can't use `this` before `super()`
+      options.initChildren = false;
+
+      // Same with creating the element
+      options.createEl = false;
+
+      // don't auto mixin the evented mixin
+      options.evented = false;
+
+      // we don't want the player to report touch activity on itself
+      // see enableTouchActivity in Component
+      options.reportTouchActivity = false;
+
+      // If language is not set, get the closest lang attribute
+      if (!options.language) {
+        const closest = tag.closest('[lang]');
+        if (closest) {
+          options.language = closest.getAttribute('lang');
+        }
+      }
+
+      // Run base component initializing with new options
+      super(null, options, ready);
+
+      // Create bound methods for document listeners.
+      this.boundDocumentFullscreenChange_ = e => this.documentFullscreenChange_(e);
+      this.boundFullWindowOnEscKey_ = e => this.fullWindowOnEscKey(e);
+      this.boundUpdateStyleEl_ = e => this.updateStyleEl_(e);
+      this.boundApplyInitTime_ = e => this.applyInitTime_(e);
+      this.boundUpdateCurrentBreakpoint_ = e => this.updateCurrentBreakpoint_(e);
+      this.boundHandleTechClick_ = e => this.handleTechClick_(e);
+      this.boundHandleTechDoubleClick_ = e => this.handleTechDoubleClick_(e);
+      this.boundHandleTechTouchStart_ = e => this.handleTechTouchStart_(e);
+      this.boundHandleTechTouchMove_ = e => this.handleTechTouchMove_(e);
+      this.boundHandleTechTouchEnd_ = e => this.handleTechTouchEnd_(e);
+      this.boundHandleTechTap_ = e => this.handleTechTap_(e);
+
+      // default isFullscreen_ to false
+      this.isFullscreen_ = false;
+
+      // create logger
+      this.log = createLogger(this.id_);
+
+      // Hold our own reference to fullscreen api so it can be mocked in tests
+      this.fsApi_ = FullscreenApi;
+
+      // Tracks when a tech changes the poster
+      this.isPosterFromTech_ = false;
+
+      // Holds callback info that gets queued when playback rate is zero
+      // and a seek is happening
+      this.queuedCallbacks_ = [];
+
+      // Turn off API access because we're loading a new tech that might load asynchronously
+      this.isReady_ = false;
+
+      // Init state hasStarted_
+      this.hasStarted_ = false;
+
+      // Init state userActive_
+      this.userActive_ = false;
+
+      // Init debugEnabled_
+      this.debugEnabled_ = false;
+
+      // Init state audioOnlyMode_
+      this.audioOnlyMode_ = false;
+
+      // Init state audioPosterMode_
+      this.audioPosterMode_ = false;
+
+      // Init state audioOnlyCache_
+      this.audioOnlyCache_ = {
+        playerHeight: null,
+        hiddenChildren: []
+      };
+
+      // if the global option object was accidentally blown away by
+      // someone, bail early with an informative error
+      if (!this.options_ || !this.options_.techOrder || !this.options_.techOrder.length) {
+        throw new Error('No techOrder specified. Did you overwrite ' + 'videojs.options instead of just changing the ' + 'properties you want to override?');
+      }
+
+      // Store the original tag used to set options
+      this.tag = tag;
+
+      // Store the tag attributes used to restore html5 element
+      this.tagAttributes = tag && getAttributes(tag);
+
+      // Update current language
+      this.language(this.options_.language);
+
+      // Update Supported Languages
+      if (options.languages) {
+        // Normalise player option languages to lowercase
+        const languagesToLower = {};
+        Object.getOwnPropertyNames(options.languages).forEach(function (name) {
+          languagesToLower[name.toLowerCase()] = options.languages[name];
+        });
+        this.languages_ = languagesToLower;
+      } else {
+        this.languages_ = Player.prototype.options_.languages;
+      }
+      this.resetCache_();
+
+      // Set poster
+      /** @type string */
+      this.poster_ = options.poster || '';
+
+      // Set controls
+      /** @type {boolean} */
+      this.controls_ = !!options.controls;
+
+      // Original tag settings stored in options
+      // now remove immediately so native controls don't flash.
+      // May be turned back on by HTML5 tech if nativeControlsForTouch is true
+      tag.controls = false;
+      tag.removeAttribute('controls');
+      this.changingSrc_ = false;
+      this.playCallbacks_ = [];
+      this.playTerminatedQueue_ = [];
+
+      // the attribute overrides the option
+      if (tag.hasAttribute('autoplay')) {
+        this.autoplay(true);
+      } else {
+        // otherwise use the setter to validate and
+        // set the correct value.
+        this.autoplay(this.options_.autoplay);
+      }
+
+      // check plugins
+      if (options.plugins) {
+        Object.keys(options.plugins).forEach(name => {
+          if (typeof this[name] !== 'function') {
+            throw new Error(`plugin "${name}" does not exist`);
+          }
+        });
+      }
+
+      /*
+       * Store the internal state of scrubbing
+       *
+       * @private
+       * @return {Boolean} True if the user is scrubbing
+       */
+      this.scrubbing_ = false;
+      this.el_ = this.createEl();
+
+      // Make this an evented object and use `el_` as its event bus.
+      evented(this, {
+        eventBusKey: 'el_'
+      });
+
+      // listen to document and player fullscreenchange handlers so we receive those events
+      // before a user can receive them so we can update isFullscreen appropriately.
+      // make sure that we listen to fullscreenchange events before everything else to make sure that
+      // our isFullscreen method is updated properly for internal components as well as external.
+      if (this.fsApi_.requestFullscreen) {
+        on(document, this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+        this.on(this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+      }
+      if (this.fluid_) {
+        this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+      }
+      // We also want to pass the original player options to each component and plugin
+      // as well so they don't need to reach back into the player for options later.
+      // We also need to do another copy of this.options_ so we don't end up with
+      // an infinite loop.
+      const playerOptionsCopy = merge$2(this.options_);
+
+      // Load plugins
+      if (options.plugins) {
+        Object.keys(options.plugins).forEach(name => {
+          this[name](options.plugins[name]);
+        });
+      }
+
+      // Enable debug mode to fire debugon event for all plugins.
+      if (options.debug) {
+        this.debug(true);
+      }
+      this.options_.playerOptions = playerOptionsCopy;
+      this.middleware_ = [];
+      this.playbackRates(options.playbackRates);
+      if (options.experimentalSvgIcons) {
+        // Add SVG Sprite to the DOM
+        const parser = new window.DOMParser();
+        const parsedSVG = parser.parseFromString(icons, 'image/svg+xml');
+        const errorNode = parsedSVG.querySelector('parsererror');
+        if (errorNode) {
+          log$1.warn('Failed to load SVG Icons. Falling back to Font Icons.');
+          this.options_.experimentalSvgIcons = null;
+        } else {
+          const sprite = parsedSVG.documentElement;
+          sprite.style.display = 'none';
+          this.el_.appendChild(sprite);
+          this.addClass('vjs-svg-icons-enabled');
+        }
+      }
+      this.initChildren();
+
+      // Set isAudio based on whether or not an audio tag was used
+      this.isAudio(tag.nodeName.toLowerCase() === 'audio');
+
+      // Update controls className. Can't do this when the controls are initially
+      // set because the element doesn't exist yet.
+      if (this.controls()) {
+        this.addClass('vjs-controls-enabled');
+      } else {
+        this.addClass('vjs-controls-disabled');
+      }
+
+      // Set ARIA label and region role depending on player type
+      this.el_.setAttribute('role', 'region');
+      if (this.isAudio()) {
+        this.el_.setAttribute('aria-label', this.localize('Audio Player'));
+      } else {
+        this.el_.setAttribute('aria-label', this.localize('Video Player'));
+      }
+      if (this.isAudio()) {
+        this.addClass('vjs-audio');
+      }
+
+      // TODO: Make this smarter. Toggle user state between touching/mousing
+      // using events, since devices can have both touch and mouse events.
+      // TODO: Make this check be performed again when the window switches between monitors
+      // (See https://github.com/videojs/video.js/issues/5683)
+      if (TOUCH_ENABLED) {
+        this.addClass('vjs-touch-enabled');
+      }
+
+      // iOS Safari has broken hover handling
+      if (!IS_IOS) {
+        this.addClass('vjs-workinghover');
+      }
+
+      // Make player easily findable by ID
+      Player.players[this.id_] = this;
+
+      // Add a major version class to aid css in plugins
+      const majorVersion = version$5.split('.')[0];
+      this.addClass(`vjs-v${majorVersion}`);
+
+      // When the player is first initialized, trigger activity so components
+      // like the control bar show themselves if needed
+      this.userActive(true);
+      this.reportUserActivity();
+      this.one('play', e => this.listenForUserActivity_(e));
+      this.on('keydown', e => this.handleKeyDown(e));
+      this.on('languagechange', e => this.handleLanguagechange(e));
+      this.breakpoints(this.options_.breakpoints);
+      this.responsive(this.options_.responsive);
+
+      // Calling both the audio mode methods after the player is fully
+      // setup to be able to listen to the events triggered by them
+      this.on('ready', () => {
+        // Calling the audioPosterMode method first so that
+        // the audioOnlyMode can take precedence when both options are set to true
+        this.audioPosterMode(this.options_.audioPosterMode);
+        this.audioOnlyMode(this.options_.audioOnlyMode);
+      });
+    }
+
+    /**
+     * Destroys the video player and does any necessary cleanup.
+     *
+     * This is especially helpful if you are dynamically adding and removing videos
+     * to/from the DOM.
+     *
+     * @fires Player#dispose
+     */
+    dispose() {
+      /**
+       * Called when the player is being disposed of.
+       *
+       * @event Player#dispose
+       * @type {Event}
+       */
+      this.trigger('dispose');
+      // prevent dispose from being called twice
+      this.off('dispose');
+
+      // Make sure all player-specific document listeners are unbound. This is
+      off(document, this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+      off(document, 'keydown', this.boundFullWindowOnEscKey_);
+      if (this.styleEl_ && this.styleEl_.parentNode) {
+        this.styleEl_.parentNode.removeChild(this.styleEl_);
+        this.styleEl_ = null;
+      }
+
+      // Kill reference to this player
+      Player.players[this.id_] = null;
+      if (this.tag && this.tag.player) {
+        this.tag.player = null;
+      }
+      if (this.el_ && this.el_.player) {
+        this.el_.player = null;
+      }
+      if (this.tech_) {
+        this.tech_.dispose();
+        this.isPosterFromTech_ = false;
+        this.poster_ = '';
+      }
+      if (this.playerElIngest_) {
+        this.playerElIngest_ = null;
+      }
+      if (this.tag) {
+        this.tag = null;
+      }
+      clearCacheForPlayer(this);
+
+      // remove all event handlers for track lists
+      // all tracks and track listeners are removed on
+      // tech dispose
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        const list = this[props.getterName]();
+
+        // if it is not a native list
+        // we have to manually remove event listeners
+        if (list && list.off) {
+          list.off();
+        }
+      });
+
+      // the actual .el_ is removed here, or replaced if
+      super.dispose({
+        restoreEl: this.options_.restoreEl
+      });
+    }
+
+    /**
+     * Create the `Player`'s DOM element.
+     *
+     * @return {Element}
+     *         The DOM element that gets created.
+     */
+    createEl() {
+      let tag = this.tag;
+      let el;
+      let playerElIngest = this.playerElIngest_ = tag.parentNode && tag.parentNode.hasAttribute && tag.parentNode.hasAttribute('data-vjs-player');
+      const divEmbed = this.tag.tagName.toLowerCase() === 'video-js';
+      if (playerElIngest) {
+        el = this.el_ = tag.parentNode;
+      } else if (!divEmbed) {
+        el = this.el_ = super.createEl('div');
+      }
+
+      // Copy over all the attributes from the tag, including ID and class
+      // ID will now reference player box, not the video tag
+      const attrs = getAttributes(tag);
+      if (divEmbed) {
+        el = this.el_ = tag;
+        tag = this.tag = document.createElement('video');
+        while (el.children.length) {
+          tag.appendChild(el.firstChild);
+        }
+        if (!hasClass(el, 'video-js')) {
+          addClass(el, 'video-js');
+        }
+        el.appendChild(tag);
+        playerElIngest = this.playerElIngest_ = el;
+        // move properties over from our custom `video-js` element
+        // to our new `video` element. This will move things like
+        // `src` or `controls` that were set via js before the player
+        // was initialized.
+        Object.keys(el).forEach(k => {
+          try {
+            tag[k] = el[k];
+          } catch (e) {
+            // we got a a property like outerHTML which we can't actually copy, ignore it
+          }
+        });
+      }
+
+      // set tabindex to -1 to remove the video element from the focus order
+      tag.setAttribute('tabindex', '-1');
+      attrs.tabindex = '-1';
+
+      // Workaround for #4583 on Chrome (on Windows) with JAWS.
+      // See https://github.com/FreedomScientific/VFO-standards-support/issues/78
+      // Note that we can't detect if JAWS is being used, but this ARIA attribute
+      // doesn't change behavior of Chrome if JAWS is not being used
+      if (IS_CHROME && IS_WINDOWS) {
+        tag.setAttribute('role', 'application');
+        attrs.role = 'application';
+      }
+
+      // Remove width/height attrs from tag so CSS can make it 100% width/height
+      tag.removeAttribute('width');
+      tag.removeAttribute('height');
+      if ('width' in attrs) {
+        delete attrs.width;
+      }
+      if ('height' in attrs) {
+        delete attrs.height;
+      }
+      Object.getOwnPropertyNames(attrs).forEach(function (attr) {
+        // don't copy over the class attribute to the player element when we're in a div embed
+        // the class is already set up properly in the divEmbed case
+        // and we want to make sure that the `video-js` class doesn't get lost
+        if (!(divEmbed && attr === 'class')) {
+          el.setAttribute(attr, attrs[attr]);
+        }
+        if (divEmbed) {
+          tag.setAttribute(attr, attrs[attr]);
+        }
+      });
+
+      // Update tag id/class for use as HTML5 playback tech
+      // Might think we should do this after embedding in container so .vjs-tech class
+      // doesn't flash 100% width/height, but class only applies with .video-js parent
+      tag.playerId = tag.id;
+      tag.id += '_html5_api';
+      tag.className = 'vjs-tech';
+
+      // Make player findable on elements
+      tag.player = el.player = this;
+      // Default state of video is paused
+      this.addClass('vjs-paused');
+      const deviceClassNames = ['IS_SMART_TV', 'IS_TIZEN', 'IS_WEBOS', 'IS_ANDROID', 'IS_IPAD', 'IS_IPHONE'].filter(key => browser[key]).map(key => {
+        return 'vjs-device-' + key.substring(3).toLowerCase().replace(/\_/g, '-');
+      });
+      this.addClass(...deviceClassNames);
+
+      // Add a style element in the player that we'll use to set the width/height
+      // of the player in a way that's still overridable by CSS, just like the
+      // video element
+      if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true) {
+        this.styleEl_ = createStyleElement('vjs-styles-dimensions');
+        const defaultsStyleEl = $('.vjs-styles-defaults');
+        const head = $('head');
+        head.insertBefore(this.styleEl_, defaultsStyleEl ? defaultsStyleEl.nextSibling : head.firstChild);
+      }
+      this.fill_ = false;
+      this.fluid_ = false;
+
+      // Pass in the width/height/aspectRatio options which will update the style el
+      this.width(this.options_.width);
+      this.height(this.options_.height);
+      this.fill(this.options_.fill);
+      this.fluid(this.options_.fluid);
+      this.aspectRatio(this.options_.aspectRatio);
+      // support both crossOrigin and crossorigin to reduce confusion and issues around the name
+      this.crossOrigin(this.options_.crossOrigin || this.options_.crossorigin);
+
+      // Hide any links within the video/audio tag,
+      // because IE doesn't hide them completely from screen readers.
+      const links = tag.getElementsByTagName('a');
+      for (let i = 0; i < links.length; i++) {
+        const linkEl = links.item(i);
+        addClass(linkEl, 'vjs-hidden');
+        linkEl.setAttribute('hidden', 'hidden');
+      }
+
+      // insertElFirst seems to cause the networkState to flicker from 3 to 2, so
+      // keep track of the original for later so we can know if the source originally failed
+      tag.initNetworkState_ = tag.networkState;
+
+      // Wrap video tag in div (el/box) container
+      if (tag.parentNode && !playerElIngest) {
+        tag.parentNode.insertBefore(el, tag);
+      }
+
+      // insert the tag as the first child of the player element
+      // then manually add it to the children array so that this.addChild
+      // will work properly for other components
+      //
+      // Breaks iPhone, fixed in HTML5 setup.
+      prependTo(tag, el);
+      this.children_.unshift(tag);
+
+      // Set lang attr on player to ensure CSS :lang() in consistent with player
+      // if it's been set to something different to the doc
+      this.el_.setAttribute('lang', this.language_);
+      this.el_.setAttribute('translate', 'no');
+      this.el_ = el;
+      return el;
+    }
+
+    /**
+     * Get or set the `Player`'s crossOrigin option. For the HTML5 player, this
+     * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+     * behavior.
+     *
+     * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+     *
+     * @param {string|null} [value]
+     *        The value to set the `Player`'s crossOrigin to. If an argument is
+     *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+     *
+     * @return {string|null|undefined}
+     *         - The current crossOrigin value of the `Player` when getting.
+     *         - undefined when setting
+     */
+    crossOrigin(value) {
+      // `null` can be set to unset a value
+      if (typeof value === 'undefined') {
+        return this.techGet_('crossOrigin');
+      }
+      if (value !== null && value !== 'anonymous' && value !== 'use-credentials') {
+        log$1.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${value}"`);
+        return;
+      }
+      this.techCall_('setCrossOrigin', value);
+      if (this.posterImage) {
+        this.posterImage.crossOrigin(value);
+      }
+      return;
+    }
+
+    /**
+     * A getter/setter for the `Player`'s width. Returns the player's configured value.
+     * To get the current width use `currentWidth()`.
+     *
+     * @param {number|string} [value]
+     *        CSS value to set the `Player`'s width to.
+     *
+     * @return {number|undefined}
+     *         - The current width of the `Player` when getting.
+     *         - Nothing when setting
+     */
+    width(value) {
+      return this.dimension('width', value);
+    }
+
+    /**
+     * A getter/setter for the `Player`'s height. Returns the player's configured value.
+     * To get the current height use `currentheight()`.
+     *
+     * @param {number|string} [value]
+     *        CSS value to set the `Player`'s height to.
+     *
+     * @return {number|undefined}
+     *         - The current height of the `Player` when getting.
+     *         - Nothing when setting
+     */
+    height(value) {
+      return this.dimension('height', value);
+    }
+
+    /**
+     * A getter/setter for the `Player`'s width & height.
+     *
+     * @param {string} dimension
+     *        This string can be:
+     *        - 'width'
+     *        - 'height'
+     *
+     * @param {number|string} [value]
+     *        Value for dimension specified in the first argument.
+     *
+     * @return {number}
+     *         The dimension arguments value when getting (width/height).
+     */
+    dimension(dimension, value) {
+      const privDimension = dimension + '_';
+      if (value === undefined) {
+        return this[privDimension] || 0;
+      }
+      if (value === '' || value === 'auto') {
+        // If an empty string is given, reset the dimension to be automatic
+        this[privDimension] = undefined;
+        this.updateStyleEl_();
+        return;
+      }
+      const parsedVal = parseFloat(value);
+      if (isNaN(parsedVal)) {
+        log$1.error(`Improper value "${value}" supplied for for ${dimension}`);
+        return;
+      }
+      this[privDimension] = parsedVal;
+      this.updateStyleEl_();
+    }
+
+    /**
+     * A getter/setter/toggler for the vjs-fluid `className` on the `Player`.
+     *
+     * Turning this on will turn off fill mode.
+     *
+     * @param {boolean} [bool]
+     *        - A value of true adds the class.
+     *        - A value of false removes the class.
+     *        - No value will be a getter.
+     *
+     * @return {boolean|undefined}
+     *         - The value of fluid when getting.
+     *         - `undefined` when setting.
+     */
+    fluid(bool) {
+      if (bool === undefined) {
+        return !!this.fluid_;
+      }
+      this.fluid_ = !!bool;
+      if (isEvented(this)) {
+        this.off(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+      }
+      if (bool) {
+        this.addClass('vjs-fluid');
+        this.fill(false);
+        addEventedCallback(this, () => {
+          this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+        });
+      } else {
+        this.removeClass('vjs-fluid');
+      }
+      this.updateStyleEl_();
+    }
+
+    /**
+     * A getter/setter/toggler for the vjs-fill `className` on the `Player`.
+     *
+     * Turning this on will turn off fluid mode.
+     *
+     * @param {boolean} [bool]
+     *        - A value of true adds the class.
+     *        - A value of false removes the class.
+     *        - No value will be a getter.
+     *
+     * @return {boolean|undefined}
+     *         - The value of fluid when getting.
+     *         - `undefined` when setting.
+     */
+    fill(bool) {
+      if (bool === undefined) {
+        return !!this.fill_;
+      }
+      this.fill_ = !!bool;
+      if (bool) {
+        this.addClass('vjs-fill');
+        this.fluid(false);
+      } else {
+        this.removeClass('vjs-fill');
+      }
+    }
+
+    /**
+     * Get/Set the aspect ratio
+     *
+     * @param {string} [ratio]
+     *        Aspect ratio for player
+     *
+     * @return {string|undefined}
+     *         returns the current aspect ratio when getting
+     */
+
+    /**
+     * A getter/setter for the `Player`'s aspect ratio.
+     *
+     * @param {string} [ratio]
+     *        The value to set the `Player`'s aspect ratio to.
+     *
+     * @return {string|undefined}
+     *         - The current aspect ratio of the `Player` when getting.
+     *         - undefined when setting
+     */
+    aspectRatio(ratio) {
+      if (ratio === undefined) {
+        return this.aspectRatio_;
+      }
+
+      // Check for width:height format
+      if (!/^\d+\:\d+$/.test(ratio)) {
+        throw new Error('Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.');
+      }
+      this.aspectRatio_ = ratio;
+
+      // We're assuming if you set an aspect ratio you want fluid mode,
+      // because in fixed mode you could calculate width and height yourself.
+      this.fluid(true);
+      this.updateStyleEl_();
+    }
+
+    /**
+     * Update styles of the `Player` element (height, width and aspect ratio).
+     *
+     * @private
+     * @listens Tech#loadedmetadata
+     */
+    updateStyleEl_() {
+      if (window.VIDEOJS_NO_DYNAMIC_STYLE === true) {
+        const width = typeof this.width_ === 'number' ? this.width_ : this.options_.width;
+        const height = typeof this.height_ === 'number' ? this.height_ : this.options_.height;
+        const techEl = this.tech_ && this.tech_.el();
+        if (techEl) {
+          if (width >= 0) {
+            techEl.width = width;
+          }
+          if (height >= 0) {
+            techEl.height = height;
+          }
+        }
+        return;
+      }
+      let width;
+      let height;
+      let aspectRatio;
+      let idClass;
+
+      // The aspect ratio is either used directly or to calculate width and height.
+      if (this.aspectRatio_ !== undefined && this.aspectRatio_ !== 'auto') {
+        // Use any aspectRatio that's been specifically set
+        aspectRatio = this.aspectRatio_;
+      } else if (this.videoWidth() > 0) {
+        // Otherwise try to get the aspect ratio from the video metadata
+        aspectRatio = this.videoWidth() + ':' + this.videoHeight();
+      } else {
+        // Or use a default. The video element's is 2:1, but 16:9 is more common.
+        aspectRatio = '16:9';
+      }
+
+      // Get the ratio as a decimal we can use to calculate dimensions
+      const ratioParts = aspectRatio.split(':');
+      const ratioMultiplier = ratioParts[1] / ratioParts[0];
+      if (this.width_ !== undefined) {
+        // Use any width that's been specifically set
+        width = this.width_;
+      } else if (this.height_ !== undefined) {
+        // Or calculate the width from the aspect ratio if a height has been set
+        width = this.height_ / ratioMultiplier;
+      } else {
+        // Or use the video's metadata, or use the video el's default of 300
+        width = this.videoWidth() || 300;
+      }
+      if (this.height_ !== undefined) {
+        // Use any height that's been specifically set
+        height = this.height_;
+      } else {
+        // Otherwise calculate the height from the ratio and the width
+        height = width * ratioMultiplier;
+      }
+
+      // Ensure the CSS class is valid by starting with an alpha character
+      if (/^[^a-zA-Z]/.test(this.id())) {
+        idClass = 'dimensions-' + this.id();
+      } else {
+        idClass = this.id() + '-dimensions';
+      }
+
+      // Ensure the right class is still on the player for the style element
+      this.addClass(idClass);
+      setTextContent(this.styleEl_, `
+      .${idClass} {
+        width: ${width}px;
+        height: ${height}px;
+      }
+
+      .${idClass}.vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: ${ratioMultiplier * 100}%;
+      }
+    `);
+    }
+
+    /**
+     * Load/Create an instance of playback {@link Tech} including element
+     * and API methods. Then append the `Tech` element in `Player` as a child.
+     *
+     * @param {string} techName
+     *        name of the playback technology
+     *
+     * @param {string} source
+     *        video source
+     *
+     * @private
+     */
+    loadTech_(techName, source) {
+      // Pause and remove current playback technology
+      if (this.tech_) {
+        this.unloadTech_();
+      }
+      const titleTechName = toTitleCase$1(techName);
+      const camelTechName = techName.charAt(0).toLowerCase() + techName.slice(1);
+
+      // get rid of the HTML5 video tag as soon as we are using another tech
+      if (titleTechName !== 'Html5' && this.tag) {
+        Tech.getTech('Html5').disposeMediaElement(this.tag);
+        this.tag.player = null;
+        this.tag = null;
+      }
+      this.techName_ = titleTechName;
+
+      // Turn off API access because we're loading a new tech that might load asynchronously
+      this.isReady_ = false;
+      let autoplay = this.autoplay();
+
+      // if autoplay is a string (or `true` with normalizeAutoplay: true) we pass false to the tech
+      // because the player is going to handle autoplay on `loadstart`
+      if (typeof this.autoplay() === 'string' || this.autoplay() === true && this.options_.normalizeAutoplay) {
+        autoplay = false;
+      }
+
+      // Grab tech-specific options from player options and add source and parent element to use.
+      const techOptions = {
+        source,
+        autoplay,
+        'nativeControlsForTouch': this.options_.nativeControlsForTouch,
+        'playerId': this.id(),
+        'techId': `${this.id()}_${camelTechName}_api`,
+        'playsinline': this.options_.playsinline,
+        'preload': this.options_.preload,
+        'loop': this.options_.loop,
+        'disablePictureInPicture': this.options_.disablePictureInPicture,
+        'muted': this.options_.muted,
+        'poster': this.poster(),
+        'language': this.language(),
+        'playerElIngest': this.playerElIngest_ || false,
+        'vtt.js': this.options_['vtt.js'],
+        'canOverridePoster': !!this.options_.techCanOverridePoster,
+        'enableSourceset': this.options_.enableSourceset
+      };
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        techOptions[props.getterName] = this[props.privateName];
+      });
+      Object.assign(techOptions, this.options_[titleTechName]);
+      Object.assign(techOptions, this.options_[camelTechName]);
+      Object.assign(techOptions, this.options_[techName.toLowerCase()]);
+      if (this.tag) {
+        techOptions.tag = this.tag;
+      }
+      if (source && source.src === this.cache_.src && this.cache_.currentTime > 0) {
+        techOptions.startTime = this.cache_.currentTime;
+      }
+
+      // Initialize tech instance
+      const TechClass = Tech.getTech(techName);
+      if (!TechClass) {
+        throw new Error(`No Tech named '${titleTechName}' exists! '${titleTechName}' should be registered using videojs.registerTech()'`);
+      }
+      this.tech_ = new TechClass(techOptions);
+
+      // player.triggerReady is always async, so don't need this to be async
+      this.tech_.ready(bind_(this, this.handleTechReady_), true);
+      textTrackConverter.jsonToTextTracks(this.textTracksJson_ || [], this.tech_);
+
+      // Listen to all HTML5-defined events and trigger them on the player
+      TECH_EVENTS_RETRIGGER.forEach(event => {
+        this.on(this.tech_, event, e => this[`handleTech${toTitleCase$1(event)}_`](e));
+      });
+      Object.keys(TECH_EVENTS_QUEUE).forEach(event => {
+        this.on(this.tech_, event, eventObj => {
+          if (this.tech_.playbackRate() === 0 && this.tech_.seeking()) {
+            this.queuedCallbacks_.push({
+              callback: this[`handleTech${TECH_EVENTS_QUEUE[event]}_`].bind(this),
+              event: eventObj
+            });
+            return;
+          }
+          this[`handleTech${TECH_EVENTS_QUEUE[event]}_`](eventObj);
+        });
+      });
+      this.on(this.tech_, 'loadstart', e => this.handleTechLoadStart_(e));
+      this.on(this.tech_, 'sourceset', e => this.handleTechSourceset_(e));
+      this.on(this.tech_, 'waiting', e => this.handleTechWaiting_(e));
+      this.on(this.tech_, 'ended', e => this.handleTechEnded_(e));
+      this.on(this.tech_, 'seeking', e => this.handleTechSeeking_(e));
+      this.on(this.tech_, 'play', e => this.handleTechPlay_(e));
+      this.on(this.tech_, 'pause', e => this.handleTechPause_(e));
+      this.on(this.tech_, 'durationchange', e => this.handleTechDurationChange_(e));
+      this.on(this.tech_, 'fullscreenchange', (e, data) => this.handleTechFullscreenChange_(e, data));
+      this.on(this.tech_, 'fullscreenerror', (e, err) => this.handleTechFullscreenError_(e, err));
+      this.on(this.tech_, 'enterpictureinpicture', e => this.handleTechEnterPictureInPicture_(e));
+      this.on(this.tech_, 'leavepictureinpicture', e => this.handleTechLeavePictureInPicture_(e));
+      this.on(this.tech_, 'error', e => this.handleTechError_(e));
+      this.on(this.tech_, 'posterchange', e => this.handleTechPosterChange_(e));
+      this.on(this.tech_, 'textdata', e => this.handleTechTextData_(e));
+      this.on(this.tech_, 'ratechange', e => this.handleTechRateChange_(e));
+      this.on(this.tech_, 'loadedmetadata', this.boundUpdateStyleEl_);
+      this.usingNativeControls(this.techGet_('controls'));
+      if (this.controls() && !this.usingNativeControls()) {
+        this.addTechControlsListeners_();
+      }
+
+      // Add the tech element in the DOM if it was not already there
+      // Make sure to not insert the original video element if using Html5
+      if (this.tech_.el().parentNode !== this.el() && (titleTechName !== 'Html5' || !this.tag)) {
+        prependTo(this.tech_.el(), this.el());
+      }
+
+      // Get rid of the original video tag reference after the first tech is loaded
+      if (this.tag) {
+        this.tag.player = null;
+        this.tag = null;
+      }
+    }
+
+    /**
+     * Unload and dispose of the current playback {@link Tech}.
+     *
+     * @private
+     */
+    unloadTech_() {
+      // Save the current text tracks so that we can reuse the same text tracks with the next tech
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        this[props.privateName] = this[props.getterName]();
+      });
+      this.textTracksJson_ = textTrackConverter.textTracksToJson(this.tech_);
+      this.isReady_ = false;
+      this.tech_.dispose();
+      this.tech_ = false;
+      if (this.isPosterFromTech_) {
+        this.poster_ = '';
+        this.trigger('posterchange');
+      }
+      this.isPosterFromTech_ = false;
+    }
+
+    /**
+     * Return a reference to the current {@link Tech}.
+     * It will print a warning by default about the danger of using the tech directly
+     * but any argument that is passed in will silence the warning.
+     *
+     * @param {*} [safety]
+     *        Anything passed in to silence the warning
+     *
+     * @return {Tech}
+     *         The Tech
+     */
+    tech(safety) {
+      if (safety === undefined) {
+        log$1.warn('Using the tech directly can be dangerous. I hope you know what you\'re doing.\n' + 'See https://github.com/videojs/video.js/issues/2617 for more info.\n');
+      }
+      return this.tech_;
+    }
+
+    /**
+     * An object that contains Video.js version.
+     *
+     * @typedef {Object} PlayerVersion
+     *
+     * @property {string} 'video.js' - Video.js version
+     */
+
+    /**
+     * Returns an object with Video.js version.
+     *
+     * @return {PlayerVersion}
+     *          An object with Video.js version.
+     */
+    version() {
+      return {
+        'video.js': version$5
+      };
+    }
+
+    /**
+     * Set up click and touch listeners for the playback element
+     *
+     * - On desktops: a click on the video itself will toggle playback
+     * - On mobile devices: a click on the video toggles controls
+     *   which is done by toggling the user state between active and
+     *   inactive
+     * - A tap can signal that a user has become active or has become inactive
+     *   e.g. a quick tap on an iPhone movie should reveal the controls. Another
+     *   quick tap should hide them again (signaling the user is in an inactive
+     *   viewing state)
+     * - In addition to this, we still want the user to be considered inactive after
+     *   a few seconds of inactivity.
+     *
+     * > Note: the only part of iOS interaction we can't mimic with this setup
+     * is a touch and hold on the video element counting as activity in order to
+     * keep the controls showing, but that shouldn't be an issue. A touch and hold
+     * on any controls will still keep the user active
+     *
+     * @private
+     */
+    addTechControlsListeners_() {
+      // Make sure to remove all the previous listeners in case we are called multiple times.
+      this.removeTechControlsListeners_();
+      this.on(this.tech_, 'click', this.boundHandleTechClick_);
+      this.on(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
+
+      // If the controls were hidden we don't want that to change without a tap event
+      // so we'll check if the controls were already showing before reporting user
+      // activity
+      this.on(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+      this.on(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+      this.on(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+
+      // The tap listener needs to come after the touchend listener because the tap
+      // listener cancels out any reportedUserActivity when setting userActive(false)
+      this.on(this.tech_, 'tap', this.boundHandleTechTap_);
+    }
+
+    /**
+     * Remove the listeners used for click and tap controls. This is needed for
+     * toggling to controls disabled, where a tap/touch should do nothing.
+     *
+     * @private
+     */
+    removeTechControlsListeners_() {
+      // We don't want to just use `this.off()` because there might be other needed
+      // listeners added by techs that extend this.
+      this.off(this.tech_, 'tap', this.boundHandleTechTap_);
+      this.off(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+      this.off(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+      this.off(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+      this.off(this.tech_, 'click', this.boundHandleTechClick_);
+      this.off(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
+    }
+
+    /**
+     * Player waits for the tech to be ready
+     *
+     * @private
+     */
+    handleTechReady_() {
+      this.triggerReady();
+
+      // Keep the same volume as before
+      if (this.cache_.volume) {
+        this.techCall_('setVolume', this.cache_.volume);
+      }
+
+      // Look if the tech found a higher resolution poster while loading
+      this.handleTechPosterChange_();
+
+      // Update the duration if available
+      this.handleTechDurationChange_();
+    }
+
+    /**
+     * Retrigger the `loadstart` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#loadstart
+     * @listens Tech#loadstart
+     * @private
+     */
+    handleTechLoadStart_() {
+      // TODO: Update to use `emptied` event instead. See #1277.
+
+      this.removeClass('vjs-ended', 'vjs-seeking');
+
+      // reset the error state
+      this.error(null);
+
+      // Update the duration
+      this.handleTechDurationChange_();
+      if (!this.paused()) {
+        /**
+         * Fired when the user agent begins looking for media data
+         *
+         * @event Player#loadstart
+         * @type {Event}
+         */
+        this.trigger('loadstart');
+      } else {
+        // reset the hasStarted state
+        this.hasStarted(false);
+        this.trigger('loadstart');
+      }
+
+      // autoplay happens after loadstart for the browser,
+      // so we mimic that behavior
+      this.manualAutoplay_(this.autoplay() === true && this.options_.normalizeAutoplay ? 'play' : this.autoplay());
+    }
+
+    /**
+     * Handle autoplay string values, rather than the typical boolean
+     * values that should be handled by the tech. Note that this is not
+     * part of any specification. Valid values and what they do can be
+     * found on the autoplay getter at Player#autoplay()
+     */
+    manualAutoplay_(type) {
+      if (!this.tech_ || typeof type !== 'string') {
+        return;
+      }
+
+      // Save original muted() value, set muted to true, and attempt to play().
+      // On promise rejection, restore muted from saved value
+      const resolveMuted = () => {
+        const previouslyMuted = this.muted();
+        this.muted(true);
+        const restoreMuted = () => {
+          this.muted(previouslyMuted);
+        };
+
+        // restore muted on play terminatation
+        this.playTerminatedQueue_.push(restoreMuted);
+        const mutedPromise = this.play();
+        if (!isPromise(mutedPromise)) {
+          return;
+        }
+        return mutedPromise.catch(err => {
+          restoreMuted();
+          throw new Error(`Rejection at manualAutoplay. Restoring muted value. ${err ? err : ''}`);
+        });
+      };
+      let promise;
+
+      // if muted defaults to true
+      // the only thing we can do is call play
+      if (type === 'any' && !this.muted()) {
+        promise = this.play();
+        if (isPromise(promise)) {
+          promise = promise.catch(resolveMuted);
+        }
+      } else if (type === 'muted' && !this.muted()) {
+        promise = resolveMuted();
+      } else {
+        promise = this.play();
+      }
+      if (!isPromise(promise)) {
+        return;
+      }
+      return promise.then(() => {
+        this.trigger({
+          type: 'autoplay-success',
+          autoplay: type
+        });
+      }).catch(() => {
+        this.trigger({
+          type: 'autoplay-failure',
+          autoplay: type
+        });
+      });
+    }
+
+    /**
+     * Update the internal source caches so that we return the correct source from
+     * `src()`, `currentSource()`, and `currentSources()`.
+     *
+     * > Note: `currentSources` will not be updated if the source that is passed in exists
+     *         in the current `currentSources` cache.
+     *
+     *
+     * @param {Tech~SourceObject} srcObj
+     *        A string or object source to update our caches to.
+     */
+    updateSourceCaches_(srcObj = '') {
+      let src = srcObj;
+      let type = '';
+      if (typeof src !== 'string') {
+        src = srcObj.src;
+        type = srcObj.type;
+      }
+
+      // make sure all the caches are set to default values
+      // to prevent null checking
+      this.cache_.source = this.cache_.source || {};
+      this.cache_.sources = this.cache_.sources || [];
+
+      // try to get the type of the src that was passed in
+      if (src && !type) {
+        type = findMimetype(this, src);
+      }
+
+      // update `currentSource` cache always
+      this.cache_.source = merge$2({}, srcObj, {
+        src,
+        type
+      });
+      const matchingSources = this.cache_.sources.filter(s => s.src && s.src === src);
+      const sourceElSources = [];
+      const sourceEls = this.$$('source');
+      const matchingSourceEls = [];
+      for (let i = 0; i < sourceEls.length; i++) {
+        const sourceObj = getAttributes(sourceEls[i]);
+        sourceElSources.push(sourceObj);
+        if (sourceObj.src && sourceObj.src === src) {
+          matchingSourceEls.push(sourceObj.src);
+        }
+      }
+
+      // if we have matching source els but not matching sources
+      // the current source cache is not up to date
+      if (matchingSourceEls.length && !matchingSources.length) {
+        this.cache_.sources = sourceElSources;
+        // if we don't have matching source or source els set the
+        // sources cache to the `currentSource` cache
+      } else if (!matchingSources.length) {
+        this.cache_.sources = [this.cache_.source];
+      }
+
+      // update the tech `src` cache
+      this.cache_.src = src;
+    }
+
+    /**
+     * *EXPERIMENTAL* Fired when the source is set or changed on the {@link Tech}
+     * causing the media element to reload.
+     *
+     * It will fire for the initial source and each subsequent source.
+     * This event is a custom event from Video.js and is triggered by the {@link Tech}.
+     *
+     * The event object for this event contains a `src` property that will contain the source
+     * that was available when the event was triggered. This is generally only necessary if Video.js
+     * is switching techs while the source was being changed.
+     *
+     * It is also fired when `load` is called on the player (or media element)
+     * because the {@link https://html.spec.whatwg.org/multipage/media.html#dom-media-load|specification for `load`}
+     * says that the resource selection algorithm needs to be aborted and restarted.
+     * In this case, it is very likely that the `src` property will be set to the
+     * empty string `""` to indicate we do not know what the source will be but
+     * that it is changing.
+     *
+     * *This event is currently still experimental and may change in minor releases.*
+     * __To use this, pass `enableSourceset` option to the player.__
+     *
+     * @event Player#sourceset
+     * @type {Event}
+     * @prop {string} src
+     *                The source url available when the `sourceset` was triggered.
+     *                It will be an empty string if we cannot know what the source is
+     *                but know that the source will change.
+     */
+    /**
+     * Retrigger the `sourceset` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#sourceset
+     * @listens Tech#sourceset
+     * @private
+     */
+    handleTechSourceset_(event) {
+      // only update the source cache when the source
+      // was not updated using the player api
+      if (!this.changingSrc_) {
+        let updateSourceCaches = src => this.updateSourceCaches_(src);
+        const playerSrc = this.currentSource().src;
+        const eventSrc = event.src;
+
+        // if we have a playerSrc that is not a blob, and a tech src that is a blob
+        if (playerSrc && !/^blob:/.test(playerSrc) && /^blob:/.test(eventSrc)) {
+          // if both the tech source and the player source were updated we assume
+          // something like @videojs/http-streaming did the sourceset and skip updating the source cache.
+          if (!this.lastSource_ || this.lastSource_.tech !== eventSrc && this.lastSource_.player !== playerSrc) {
+            updateSourceCaches = () => {};
+          }
+        }
+
+        // update the source to the initial source right away
+        // in some cases this will be empty string
+        updateSourceCaches(eventSrc);
+
+        // if the `sourceset` `src` was an empty string
+        // wait for a `loadstart` to update the cache to `currentSrc`.
+        // If a sourceset happens before a `loadstart`, we reset the state
+        if (!event.src) {
+          this.tech_.any(['sourceset', 'loadstart'], e => {
+            // if a sourceset happens before a `loadstart` there
+            // is nothing to do as this `handleTechSourceset_`
+            // will be called again and this will be handled there.
+            if (e.type === 'sourceset') {
+              return;
+            }
+            const techSrc = this.techGet_('currentSrc');
+            this.lastSource_.tech = techSrc;
+            this.updateSourceCaches_(techSrc);
+          });
+        }
+      }
+      this.lastSource_ = {
+        player: this.currentSource().src,
+        tech: event.src
+      };
+      this.trigger({
+        src: event.src,
+        type: 'sourceset'
+      });
+    }
+
+    /**
+     * Add/remove the vjs-has-started class
+     *
+     *
+     * @param {boolean} request
+     *        - true: adds the class
+     *        - false: remove the class
+     *
+     * @return {boolean}
+     *         the boolean value of hasStarted_
+     */
+    hasStarted(request) {
+      if (request === undefined) {
+        // act as getter, if we have no request to change
+        return this.hasStarted_;
+      }
+      if (request === this.hasStarted_) {
+        return;
+      }
+      this.hasStarted_ = request;
+      if (this.hasStarted_) {
+        this.addClass('vjs-has-started');
+      } else {
+        this.removeClass('vjs-has-started');
+      }
+    }
+
+    /**
+     * Fired whenever the media begins or resumes playback
+     *
+     * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play}
+     * @fires Player#play
+     * @listens Tech#play
+     * @private
+     */
+    handleTechPlay_() {
+      this.removeClass('vjs-ended', 'vjs-paused');
+      this.addClass('vjs-playing');
+
+      // hide the poster when the user hits play
+      this.hasStarted(true);
+      /**
+       * Triggered whenever an {@link Tech#play} event happens. Indicates that
+       * playback has started or resumed.
+       *
+       * @event Player#play
+       * @type {Event}
+       */
+      this.trigger('play');
+    }
+
+    /**
+     * Retrigger the `ratechange` event that was triggered by the {@link Tech}.
+     *
+     * If there were any events queued while the playback rate was zero, fire
+     * those events now.
+     *
+     * @private
+     * @method Player#handleTechRateChange_
+     * @fires Player#ratechange
+     * @listens Tech#ratechange
+     */
+    handleTechRateChange_() {
+      if (this.tech_.playbackRate() > 0 && this.cache_.lastPlaybackRate === 0) {
+        this.queuedCallbacks_.forEach(queued => queued.callback(queued.event));
+        this.queuedCallbacks_ = [];
+      }
+      this.cache_.lastPlaybackRate = this.tech_.playbackRate();
+      /**
+       * Fires when the playing speed of the audio/video is changed
+       *
+       * @event Player#ratechange
+       * @type {event}
+       */
+      this.trigger('ratechange');
+    }
+
+    /**
+     * Retrigger the `waiting` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#waiting
+     * @listens Tech#waiting
+     * @private
+     */
+    handleTechWaiting_() {
+      this.addClass('vjs-waiting');
+      /**
+       * A readyState change on the DOM element has caused playback to stop.
+       *
+       * @event Player#waiting
+       * @type {Event}
+       */
+      this.trigger('waiting');
+
+      // Browsers may emit a timeupdate event after a waiting event. In order to prevent
+      // premature removal of the waiting class, wait for the time to change.
+      const timeWhenWaiting = this.currentTime();
+      const timeUpdateListener = () => {
+        if (timeWhenWaiting !== this.currentTime()) {
+          this.removeClass('vjs-waiting');
+          this.off('timeupdate', timeUpdateListener);
+        }
+      };
+      this.on('timeupdate', timeUpdateListener);
+    }
+
+    /**
+     * Retrigger the `canplay` event that was triggered by the {@link Tech}.
+     * > Note: This is not consistent between browsers. See #1351
+     *
+     * @fires Player#canplay
+     * @listens Tech#canplay
+     * @private
+     */
+    handleTechCanPlay_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media has a readyState of HAVE_FUTURE_DATA or greater.
+       *
+       * @event Player#canplay
+       * @type {Event}
+       */
+      this.trigger('canplay');
+    }
+
+    /**
+     * Retrigger the `canplaythrough` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#canplaythrough
+     * @listens Tech#canplaythrough
+     * @private
+     */
+    handleTechCanPlayThrough_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media has a readyState of HAVE_ENOUGH_DATA or greater. This means that the
+       * entire media file can be played without buffering.
+       *
+       * @event Player#canplaythrough
+       * @type {Event}
+       */
+      this.trigger('canplaythrough');
+    }
+
+    /**
+     * Retrigger the `playing` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#playing
+     * @listens Tech#playing
+     * @private
+     */
+    handleTechPlaying_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media is no longer blocked from playback, and has started playing.
+       *
+       * @event Player#playing
+       * @type {Event}
+       */
+      this.trigger('playing');
+    }
+
+    /**
+     * Retrigger the `seeking` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#seeking
+     * @listens Tech#seeking
+     * @private
+     */
+    handleTechSeeking_() {
+      this.addClass('vjs-seeking');
+      /**
+       * Fired whenever the player is jumping to a new time
+       *
+       * @event Player#seeking
+       * @type {Event}
+       */
+      this.trigger('seeking');
+    }
+
+    /**
+     * Retrigger the `seeked` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#seeked
+     * @listens Tech#seeked
+     * @private
+     */
+    handleTechSeeked_() {
+      this.removeClass('vjs-seeking', 'vjs-ended');
+      /**
+       * Fired when the player has finished jumping to a new time
+       *
+       * @event Player#seeked
+       * @type {Event}
+       */
+      this.trigger('seeked');
+    }
+
+    /**
+     * Retrigger the `pause` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#pause
+     * @listens Tech#pause
+     * @private
+     */
+    handleTechPause_() {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      /**
+       * Fired whenever the media has been paused
+       *
+       * @event Player#pause
+       * @type {Event}
+       */
+      this.trigger('pause');
+    }
+
+    /**
+     * Retrigger the `ended` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#ended
+     * @listens Tech#ended
+     * @private
+     */
+    handleTechEnded_() {
+      this.addClass('vjs-ended');
+      this.removeClass('vjs-waiting');
+      if (this.options_.loop) {
+        this.currentTime(0);
+        this.play();
+      } else if (!this.paused()) {
+        this.pause();
+      }
+
+      /**
+       * Fired when the end of the media resource is reached (currentTime == duration)
+       *
+       * @event Player#ended
+       * @type {Event}
+       */
+      this.trigger('ended');
+    }
+
+    /**
+     * Fired when the duration of the media resource is first known or changed
+     *
+     * @listens Tech#durationchange
+     * @private
+     */
+    handleTechDurationChange_() {
+      this.duration(this.techGet_('duration'));
+    }
+
+    /**
+     * Handle a click on the media element to play/pause
+     *
+     * @param {Event} event
+     *        the event that caused this function to trigger
+     *
+     * @listens Tech#click
+     * @private
+     */
+    handleTechClick_(event) {
+      // When controls are disabled a click should not toggle playback because
+      // the click is considered a control
+      if (!this.controls_) {
+        return;
+      }
+      if (this.options_ === undefined || this.options_.userActions === undefined || this.options_.userActions.click === undefined || this.options_.userActions.click !== false) {
+        if (this.options_ !== undefined && this.options_.userActions !== undefined && typeof this.options_.userActions.click === 'function') {
+          this.options_.userActions.click.call(this, event);
+        } else if (this.paused()) {
+          silencePromise(this.play());
+        } else {
+          this.pause();
+        }
+      }
+    }
+
+    /**
+     * Handle a double-click on the media element to enter/exit fullscreen
+     *
+     * @param {Event} event
+     *        the event that caused this function to trigger
+     *
+     * @listens Tech#dblclick
+     * @private
+     */
+    handleTechDoubleClick_(event) {
+      if (!this.controls_) {
+        return;
+      }
+
+      // we do not want to toggle fullscreen state
+      // when double-clicking inside a control bar or a modal
+      const inAllowedEls = Array.prototype.some.call(this.$$('.vjs-control-bar, .vjs-modal-dialog'), el => el.contains(event.target));
+      if (!inAllowedEls) {
+        /*
+         * options.userActions.doubleClick
+         *
+         * If `undefined` or `true`, double-click toggles fullscreen if controls are present
+         * Set to `false` to disable double-click handling
+         * Set to a function to substitute an external double-click handler
+         */
+        if (this.options_ === undefined || this.options_.userActions === undefined || this.options_.userActions.doubleClick === undefined || this.options_.userActions.doubleClick !== false) {
+          if (this.options_ !== undefined && this.options_.userActions !== undefined && typeof this.options_.userActions.doubleClick === 'function') {
+            this.options_.userActions.doubleClick.call(this, event);
+          } else if (this.isFullscreen()) {
+            this.exitFullscreen();
+          } else {
+            this.requestFullscreen();
+          }
+        }
+      }
+    }
+
+    /**
+     * Handle a tap on the media element. It will toggle the user
+     * activity state, which hides and shows the controls.
+     *
+     * @listens Tech#tap
+     * @private
+     */
+    handleTechTap_() {
+      this.userActive(!this.userActive());
+    }
+
+    /**
+     * Handle touch to start
+     *
+     * @listens Tech#touchstart
+     * @private
+     */
+    handleTechTouchStart_() {
+      this.userWasActive = this.userActive();
+    }
+
+    /**
+     * Handle touch to move
+     *
+     * @listens Tech#touchmove
+     * @private
+     */
+    handleTechTouchMove_() {
+      if (this.userWasActive) {
+        this.reportUserActivity();
+      }
+    }
+
+    /**
+     * Handle touch to end
+     *
+     * @param {Event} event
+     *        the touchend event that triggered
+     *        this function
+     *
+     * @listens Tech#touchend
+     * @private
+     */
+    handleTechTouchEnd_(event) {
+      // Stop the mouse events from also happening
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    }
+
+    /**
+     * @private
+     */
+    toggleFullscreenClass_() {
+      if (this.isFullscreen()) {
+        this.addClass('vjs-fullscreen');
+      } else {
+        this.removeClass('vjs-fullscreen');
+      }
+    }
+
+    /**
+     * when the document fschange event triggers it calls this
+     */
+    documentFullscreenChange_(e) {
+      const targetPlayer = e.target.player;
+
+      // if another player was fullscreen
+      // do a null check for targetPlayer because older firefox's would put document as e.target
+      if (targetPlayer && targetPlayer !== this) {
+        return;
+      }
+      const el = this.el();
+      let isFs = document[this.fsApi_.fullscreenElement] === el;
+      if (!isFs && el.matches) {
+        isFs = el.matches(':' + this.fsApi_.fullscreen);
+      }
+      this.isFullscreen(isFs);
+    }
+
+    /**
+     * Handle Tech Fullscreen Change
+     *
+     * @param {Event} event
+     *        the fullscreenchange event that triggered this function
+     *
+     * @param {Object} data
+     *        the data that was sent with the event
+     *
+     * @private
+     * @listens Tech#fullscreenchange
+     * @fires Player#fullscreenchange
+     */
+    handleTechFullscreenChange_(event, data) {
+      if (data) {
+        if (data.nativeIOSFullscreen) {
+          this.addClass('vjs-ios-native-fs');
+          this.tech_.one('webkitendfullscreen', () => {
+            this.removeClass('vjs-ios-native-fs');
+          });
+        }
+        this.isFullscreen(data.isFullscreen);
+      }
+    }
+    handleTechFullscreenError_(event, err) {
+      this.trigger('fullscreenerror', err);
+    }
+
+    /**
+     * @private
+     */
+    togglePictureInPictureClass_() {
+      if (this.isInPictureInPicture()) {
+        this.addClass('vjs-picture-in-picture');
+      } else {
+        this.removeClass('vjs-picture-in-picture');
+      }
+    }
+
+    /**
+     * Handle Tech Enter Picture-in-Picture.
+     *
+     * @param {Event} event
+     *        the enterpictureinpicture event that triggered this function
+     *
+     * @private
+     * @listens Tech#enterpictureinpicture
+     */
+    handleTechEnterPictureInPicture_(event) {
+      this.isInPictureInPicture(true);
+    }
+
+    /**
+     * Handle Tech Leave Picture-in-Picture.
+     *
+     * @param {Event} event
+     *        the leavepictureinpicture event that triggered this function
+     *
+     * @private
+     * @listens Tech#leavepictureinpicture
+     */
+    handleTechLeavePictureInPicture_(event) {
+      this.isInPictureInPicture(false);
+    }
+
+    /**
+     * Fires when an error occurred during the loading of an audio/video.
+     *
+     * @private
+     * @listens Tech#error
+     */
+    handleTechError_() {
+      const error = this.tech_.error();
+      if (error) {
+        this.error(error);
+      }
+    }
+
+    /**
+     * Retrigger the `textdata` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#textdata
+     * @listens Tech#textdata
+     * @private
+     */
+    handleTechTextData_() {
+      let data = null;
+      if (arguments.length > 1) {
+        data = arguments[1];
+      }
+
+      /**
+       * Fires when we get a textdata event from tech
+       *
+       * @event Player#textdata
+       * @type {Event}
+       */
+      this.trigger('textdata', data);
+    }
+
+    /**
+     * Get object for cached values.
+     *
+     * @return {Object}
+     *         get the current object cache
+     */
+    getCache() {
+      return this.cache_;
+    }
+
+    /**
+     * Resets the internal cache object.
+     *
+     * Using this function outside the player constructor or reset method may
+     * have unintended side-effects.
+     *
+     * @private
+     */
+    resetCache_() {
+      this.cache_ = {
+        // Right now, the currentTime is not _really_ cached because it is always
+        // retrieved from the tech (see: currentTime). However, for completeness,
+        // we set it to zero here to ensure that if we do start actually caching
+        // it, we reset it along with everything else.
+        currentTime: 0,
+        initTime: 0,
+        inactivityTimeout: this.options_.inactivityTimeout,
+        duration: NaN,
+        lastVolume: 1,
+        lastPlaybackRate: this.defaultPlaybackRate(),
+        media: null,
+        src: '',
+        source: {},
+        sources: [],
+        playbackRates: [],
+        volume: 1
+      };
+    }
+
+    /**
+     * Pass values to the playback tech
+     *
+     * @param {string} [method]
+     *        the method to call
+     *
+     * @param {Object} [arg]
+     *        the argument to pass
+     *
+     * @private
+     */
+    techCall_(method, arg) {
+      // If it's not ready yet, call method when it is
+
+      this.ready(function () {
+        if (method in allowedSetters) {
+          return set(this.middleware_, this.tech_, method, arg);
+        } else if (method in allowedMediators) {
+          return mediate(this.middleware_, this.tech_, method, arg);
+        }
+        try {
+          if (this.tech_) {
+            this.tech_[method](arg);
+          }
+        } catch (e) {
+          log$1(e);
+          throw e;
+        }
+      }, true);
+    }
+
+    /**
+     * Mediate attempt to call playback tech method
+     * and return the value of the method called.
+     *
+     * @param {string} method
+     *        Tech method
+     *
+     * @return {*}
+     *         Value returned by the tech method called, undefined if tech
+     *         is not ready or tech method is not present
+     *
+     * @private
+     */
+    techGet_(method) {
+      if (!this.tech_ || !this.tech_.isReady_) {
+        return;
+      }
+      if (method in allowedGetters) {
+        return get(this.middleware_, this.tech_, method);
+      } else if (method in allowedMediators) {
+        return mediate(this.middleware_, this.tech_, method);
+      }
+
+      // Log error when playback tech object is present but method
+      // is undefined or unavailable
+      try {
+        return this.tech_[method]();
+      } catch (e) {
+        // When building additional tech libs, an expected method may not be defined yet
+        if (this.tech_[method] === undefined) {
+          log$1(`Video.js: ${method} method not defined for ${this.techName_} playback technology.`, e);
+          throw e;
+        }
+
+        // When a method isn't available on the object it throws a TypeError
+        if (e.name === 'TypeError') {
+          log$1(`Video.js: ${method} unavailable on ${this.techName_} playback technology element.`, e);
+          this.tech_.isReady_ = false;
+          throw e;
+        }
+
+        // If error unknown, just log and throw
+        log$1(e);
+        throw e;
+      }
+    }
+
+    /**
+     * Attempt to begin playback at the first opportunity.
+     *
+     * @return {Promise|undefined}
+     *         Returns a promise if the browser supports Promises (or one
+     *         was passed in as an option). This promise will be resolved on
+     *         the return value of play. If this is undefined it will fulfill the
+     *         promise chain otherwise the promise chain will be fulfilled when
+     *         the promise from play is fulfilled.
+     */
+    play() {
+      return new Promise(resolve => {
+        this.play_(resolve);
+      });
+    }
+
+    /**
+     * The actual logic for play, takes a callback that will be resolved on the
+     * return value of play. This allows us to resolve to the play promise if there
+     * is one on modern browsers.
+     *
+     * @private
+     * @param {Function} [callback]
+     *        The callback that should be called when the techs play is actually called
+     */
+    play_(callback = silencePromise) {
+      this.playCallbacks_.push(callback);
+      const isSrcReady = Boolean(!this.changingSrc_ && (this.src() || this.currentSrc()));
+      const isSafariOrIOS = Boolean(IS_ANY_SAFARI || IS_IOS);
+
+      // treat calls to play_ somewhat like the `one` event function
+      if (this.waitToPlay_) {
+        this.off(['ready', 'loadstart'], this.waitToPlay_);
+        this.waitToPlay_ = null;
+      }
+
+      // if the player/tech is not ready or the src itself is not ready
+      // queue up a call to play on `ready` or `loadstart`
+      if (!this.isReady_ || !isSrcReady) {
+        this.waitToPlay_ = e => {
+          this.play_();
+        };
+        this.one(['ready', 'loadstart'], this.waitToPlay_);
+
+        // if we are in Safari, there is a high chance that loadstart will trigger after the gesture timeperiod
+        // in that case, we need to prime the video element by calling load so it'll be ready in time
+        if (!isSrcReady && isSafariOrIOS) {
+          this.load();
+        }
+        return;
+      }
+
+      // If the player/tech is ready and we have a source, we can attempt playback.
+      const val = this.techGet_('play');
+
+      // For native playback, reset the progress bar if we get a play call from a replay.
+      const isNativeReplay = isSafariOrIOS && this.hasClass('vjs-ended');
+      if (isNativeReplay) {
+        this.resetProgressBar_();
+      }
+      // play was terminated if the returned value is null
+      if (val === null) {
+        this.runPlayTerminatedQueue_();
+      } else {
+        this.runPlayCallbacks_(val);
+      }
+    }
+
+    /**
+     * These functions will be run when if play is terminated. If play
+     * runPlayCallbacks_ is run these function will not be run. This allows us
+     * to differentiate between a terminated play and an actual call to play.
+     */
+    runPlayTerminatedQueue_() {
+      const queue = this.playTerminatedQueue_.slice(0);
+      this.playTerminatedQueue_ = [];
+      queue.forEach(function (q) {
+        q();
+      });
+    }
+
+    /**
+     * When a callback to play is delayed we have to run these
+     * callbacks when play is actually called on the tech. This function
+     * runs the callbacks that were delayed and accepts the return value
+     * from the tech.
+     *
+     * @param {undefined|Promise} val
+     *        The return value from the tech.
+     */
+    runPlayCallbacks_(val) {
+      const callbacks = this.playCallbacks_.slice(0);
+      this.playCallbacks_ = [];
+      // clear play terminatedQueue since we finished a real play
+      this.playTerminatedQueue_ = [];
+      callbacks.forEach(function (cb) {
+        cb(val);
+      });
+    }
+
+    /**
+     * Pause the video playback
+     */
+    pause() {
+      this.techCall_('pause');
+    }
+
+    /**
+     * Check if the player is paused or has yet to play
+     *
+     * @return {boolean}
+     *         - false: if the media is currently playing
+     *         - true: if media is not currently playing
+     */
+    paused() {
+      // The initial state of paused should be true (in Safari it's actually false)
+      return this.techGet_('paused') === false ? false : true;
+    }
+
+    /**
+     * Get a TimeRange object representing the current ranges of time that the user
+     * has played.
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A time range object that represents all the increments of time that have
+     *         been played.
+     */
+    played() {
+      return this.techGet_('played') || createTimeRanges$1(0, 0);
+    }
+
+    /**
+     * Sets or returns whether or not the user is "scrubbing". Scrubbing is
+     * when the user has clicked the progress bar handle and is
+     * dragging it along the progress bar.
+     *
+     * @param {boolean} [isScrubbing]
+     *        whether the user is or is not scrubbing
+     *
+     * @return {boolean|undefined}
+     *         - The value of scrubbing when getting
+     *         - Nothing when setting
+     */
+    scrubbing(isScrubbing) {
+      if (typeof isScrubbing === 'undefined') {
+        return this.scrubbing_;
+      }
+      this.scrubbing_ = !!isScrubbing;
+      this.techCall_('setScrubbing', this.scrubbing_);
+      if (isScrubbing) {
+        this.addClass('vjs-scrubbing');
+      } else {
+        this.removeClass('vjs-scrubbing');
+      }
+    }
+
+    /**
+     * Get or set the current time (in seconds)
+     *
+     * @param {number|string} [seconds]
+     *        The time to seek to in seconds
+     *
+     * @return {number|undefined}
+     *         - the current time in seconds when getting
+     *         - Nothing when setting
+     */
+    currentTime(seconds) {
+      if (seconds === undefined) {
+        // cache last currentTime and return. default to 0 seconds
+        //
+        // Caching the currentTime is meant to prevent a massive amount of reads on the tech's
+        // currentTime when scrubbing, but may not provide much performance benefit after all.
+        // Should be tested. Also something has to read the actual current time or the cache will
+        // never get updated.
+        this.cache_.currentTime = this.techGet_('currentTime') || 0;
+        return this.cache_.currentTime;
+      }
+      if (seconds < 0) {
+        seconds = 0;
+      }
+      if (!this.isReady_ || this.changingSrc_ || !this.tech_ || !this.tech_.isReady_) {
+        this.cache_.initTime = seconds;
+        this.off('canplay', this.boundApplyInitTime_);
+        this.one('canplay', this.boundApplyInitTime_);
+        return;
+      }
+      this.techCall_('setCurrentTime', seconds);
+      this.cache_.initTime = 0;
+      if (isFinite(seconds)) {
+        this.cache_.currentTime = Number(seconds);
+      }
+    }
+
+    /**
+     * Apply the value of initTime stored in cache as currentTime.
+     *
+     * @private
+     */
+    applyInitTime_() {
+      this.currentTime(this.cache_.initTime);
+    }
+
+    /**
+     * Normally gets the length in time of the video in seconds;
+     * in all but the rarest use cases an argument will NOT be passed to the method
+     *
+     * > **NOTE**: The video must have started loading before the duration can be
+     * known, and depending on preload behaviour may not be known until the video starts
+     * playing.
+     *
+     * @fires Player#durationchange
+     *
+     * @param {number} [seconds]
+     *        The duration of the video to set in seconds
+     *
+     * @return {number|undefined}
+     *         - The duration of the video in seconds when getting
+     *         - Nothing when setting
+     */
+    duration(seconds) {
+      if (seconds === undefined) {
+        // return NaN if the duration is not known
+        return this.cache_.duration !== undefined ? this.cache_.duration : NaN;
+      }
+      seconds = parseFloat(seconds);
+
+      // Standardize on Infinity for signaling video is live
+      if (seconds < 0) {
+        seconds = Infinity;
+      }
+      if (seconds !== this.cache_.duration) {
+        // Cache the last set value for optimized scrubbing
+        this.cache_.duration = seconds;
+        if (seconds === Infinity) {
+          this.addClass('vjs-live');
+        } else {
+          this.removeClass('vjs-live');
+        }
+        if (!isNaN(seconds)) {
+          // Do not fire durationchange unless the duration value is known.
+          // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
+
+          /**
+           * @event Player#durationchange
+           * @type {Event}
+           */
+          this.trigger('durationchange');
+        }
+      }
+    }
+
+    /**
+     * Calculates how much time is left in the video. Not part
+     * of the native video API.
+     *
+     * @return {number}
+     *         The time remaining in seconds
+     */
+    remainingTime() {
+      return this.duration() - this.currentTime();
+    }
+
+    /**
+     * A remaining time function that is intended to be used when
+     * the time is to be displayed directly to the user.
+     *
+     * @return {number}
+     *         The rounded time remaining in seconds
+     */
+    remainingTimeDisplay() {
+      return Math.floor(this.duration()) - Math.floor(this.currentTime());
+    }
+
+    //
+    // Kind of like an array of portions of the video that have been downloaded.
+
+    /**
+     * Get a TimeRange object with an array of the times of the video
+     * that have been downloaded. If you just want the percent of the
+     * video that's been downloaded, use bufferedPercent.
+     *
+     * @see [Buffered Spec]{@link http://dev.w3.org/html5/spec/video.html#dom-media-buffered}
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A mock {@link TimeRanges} object (following HTML spec)
+     */
+    buffered() {
+      let buffered = this.techGet_('buffered');
+      if (!buffered || !buffered.length) {
+        buffered = createTimeRanges$1(0, 0);
+      }
+      return buffered;
+    }
+
+    /**
+     * Get the TimeRanges of the media that are currently available
+     * for seeking to.
+     *
+     * @see [Seekable Spec]{@link https://html.spec.whatwg.org/multipage/media.html#dom-media-seekable}
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A mock {@link TimeRanges} object (following HTML spec)
+     */
+    seekable() {
+      let seekable = this.techGet_('seekable');
+      if (!seekable || !seekable.length) {
+        seekable = createTimeRanges$1(0, 0);
+      }
+      return seekable;
+    }
+
+    /**
+     * Returns whether the player is in the "seeking" state.
+     *
+     * @return {boolean} True if the player is in the seeking state, false if not.
+     */
+    seeking() {
+      return this.techGet_('seeking');
+    }
+
+    /**
+     * Returns whether the player is in the "ended" state.
+     *
+     * @return {boolean} True if the player is in the ended state, false if not.
+     */
+    ended() {
+      return this.techGet_('ended');
+    }
+
+    /**
+     * Returns the current state of network activity for the element, from
+     * the codes in the list below.
+     * - NETWORK_EMPTY (numeric value 0)
+     *   The element has not yet been initialised. All attributes are in
+     *   their initial states.
+     * - NETWORK_IDLE (numeric value 1)
+     *   The element's resource selection algorithm is active and has
+     *   selected a resource, but it is not actually using the network at
+     *   this time.
+     * - NETWORK_LOADING (numeric value 2)
+     *   The user agent is actively trying to download data.
+     * - NETWORK_NO_SOURCE (numeric value 3)
+     *   The element's resource selection algorithm is active, but it has
+     *   not yet found a resource to use.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states
+     * @return {number} the current network activity state
+     */
+    networkState() {
+      return this.techGet_('networkState');
+    }
+
+    /**
+     * Returns a value that expresses the current state of the element
+     * with respect to rendering the current playback position, from the
+     * codes in the list below.
+     * - HAVE_NOTHING (numeric value 0)
+     *   No information regarding the media resource is available.
+     * - HAVE_METADATA (numeric value 1)
+     *   Enough of the resource has been obtained that the duration of the
+     *   resource is available.
+     * - HAVE_CURRENT_DATA (numeric value 2)
+     *   Data for the immediate current playback position is available.
+     * - HAVE_FUTURE_DATA (numeric value 3)
+     *   Data for the immediate current playback position is available, as
+     *   well as enough data for the user agent to advance the current
+     *   playback position in the direction of playback.
+     * - HAVE_ENOUGH_DATA (numeric value 4)
+     *   The user agent estimates that enough data is available for
+     *   playback to proceed uninterrupted.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate
+     * @return {number} the current playback rendering state
+     */
+    readyState() {
+      return this.techGet_('readyState');
+    }
+
+    /**
+     * Get the percent (as a decimal) of the video that's been downloaded.
+     * This method is not a part of the native HTML video API.
+     *
+     * @return {number}
+     *         A decimal between 0 and 1 representing the percent
+     *         that is buffered 0 being 0% and 1 being 100%
+     */
+    bufferedPercent() {
+      return bufferedPercent(this.buffered(), this.duration());
+    }
+
+    /**
+     * Get the ending time of the last buffered time range
+     * This is used in the progress bar to encapsulate all time ranges.
+     *
+     * @return {number}
+     *         The end of the last buffered time range
+     */
+    bufferedEnd() {
+      const buffered = this.buffered();
+      const duration = this.duration();
+      let end = buffered.end(buffered.length - 1);
+      if (end > duration) {
+        end = duration;
+      }
+      return end;
+    }
+
+    /**
+     * Get or set the current volume of the media
+     *
+     * @param  {number} [percentAsDecimal]
+     *         The new volume as a decimal percent:
+     *         - 0 is muted/0%/off
+     *         - 1.0 is 100%/full
+     *         - 0.5 is half volume or 50%
+     *
+     * @return {number|undefined}
+     *         The current volume as a percent when getting
+     */
+    volume(percentAsDecimal) {
+      let vol;
+      if (percentAsDecimal !== undefined) {
+        // Force value to between 0 and 1
+        vol = Math.max(0, Math.min(1, percentAsDecimal));
+        this.cache_.volume = vol;
+        this.techCall_('setVolume', vol);
+        if (vol > 0) {
+          this.lastVolume_(vol);
+        }
+        return;
+      }
+
+      // Default to 1 when returning current volume.
+      vol = parseFloat(this.techGet_('volume'));
+      return isNaN(vol) ? 1 : vol;
+    }
+
+    /**
+     * Get the current muted state, or turn mute on or off
+     *
+     * @param {boolean} [muted]
+     *        - true to mute
+     *        - false to unmute
+     *
+     * @return {boolean|undefined}
+     *         - true if mute is on and getting
+     *         - false if mute is off and getting
+     *         - nothing if setting
+     */
+    muted(muted) {
+      if (muted !== undefined) {
+        this.techCall_('setMuted', muted);
+        return;
+      }
+      return this.techGet_('muted') || false;
+    }
+
+    /**
+     * Get the current defaultMuted state, or turn defaultMuted on or off. defaultMuted
+     * indicates the state of muted on initial playback.
+     *
+     * ```js
+     *   var myPlayer = videojs('some-player-id');
+     *
+     *   myPlayer.src("http://www.example.com/path/to/video.mp4");
+     *
+     *   // get, should be false
+     *   console.log(myPlayer.defaultMuted());
+     *   // set to true
+     *   myPlayer.defaultMuted(true);
+     *   // get should be true
+     *   console.log(myPlayer.defaultMuted());
+     * ```
+     *
+     * @param {boolean} [defaultMuted]
+     *        - true to mute
+     *        - false to unmute
+     *
+     * @return {boolean|undefined}
+     *         - true if defaultMuted is on and getting
+     *         - false if defaultMuted is off and getting
+     *         - Nothing when setting
+     */
+    defaultMuted(defaultMuted) {
+      if (defaultMuted !== undefined) {
+        this.techCall_('setDefaultMuted', defaultMuted);
+      }
+      return this.techGet_('defaultMuted') || false;
+    }
+
+    /**
+     * Get the last volume, or set it
+     *
+     * @param  {number} [percentAsDecimal]
+     *         The new last volume as a decimal percent:
+     *         - 0 is muted/0%/off
+     *         - 1.0 is 100%/full
+     *         - 0.5 is half volume or 50%
+     *
+     * @return {number|undefined}
+     *         - The current value of lastVolume as a percent when getting
+     *         - Nothing when setting
+     *
+     * @private
+     */
+    lastVolume_(percentAsDecimal) {
+      if (percentAsDecimal !== undefined && percentAsDecimal !== 0) {
+        this.cache_.lastVolume = percentAsDecimal;
+        return;
+      }
+      return this.cache_.lastVolume;
+    }
+
+    /**
+     * Check if current tech can support native fullscreen
+     * (e.g. with built in controls like iOS)
+     *
+     * @return {boolean}
+     *         if native fullscreen is supported
+     */
+    supportsFullScreen() {
+      return this.techGet_('supportsFullScreen') || false;
+    }
+
+    /**
+     * Check if the player is in fullscreen mode or tell the player that it
+     * is or is not in fullscreen mode.
+     *
+     * > NOTE: As of the latest HTML5 spec, isFullscreen is no longer an official
+     * property and instead document.fullscreenElement is used. But isFullscreen is
+     * still a valuable property for internal player workings.
+     *
+     * @param  {boolean} [isFS]
+     *         Set the players current fullscreen state
+     *
+     * @return {boolean|undefined}
+     *         - true if fullscreen is on and getting
+     *         - false if fullscreen is off and getting
+     *         - Nothing when setting
+     */
+    isFullscreen(isFS) {
+      if (isFS !== undefined) {
+        const oldValue = this.isFullscreen_;
+        this.isFullscreen_ = Boolean(isFS);
+
+        // if we changed fullscreen state and we're in prefixed mode, trigger fullscreenchange
+        // this is the only place where we trigger fullscreenchange events for older browsers
+        // fullWindow mode is treated as a prefixed event and will get a fullscreenchange event as well
+        if (this.isFullscreen_ !== oldValue && this.fsApi_.prefixed) {
+          /**
+             * @event Player#fullscreenchange
+             * @type {Event}
+             */
+          this.trigger('fullscreenchange');
+        }
+        this.toggleFullscreenClass_();
+        return;
+      }
+      return this.isFullscreen_;
+    }
+
+    /**
+     * Increase the size of the video to full screen
+     * In some browsers, full screen is not supported natively, so it enters
+     * "full window mode", where the video fills the browser window.
+     * In browsers and devices that support native full screen, sometimes the
+     * browser's default controls will be shown, and not the Video.js custom skin.
+     * This includes most mobile devices (iOS, Android) and older versions of
+     * Safari.
+     *
+     * @param  {Object} [fullscreenOptions]
+     *         Override the player fullscreen options
+     *
+     * @fires Player#fullscreenchange
+     */
+    requestFullscreen(fullscreenOptions) {
+      if (this.isInPictureInPicture()) {
+        this.exitPictureInPicture();
+      }
+      const self = this;
+      return new Promise((resolve, reject) => {
+        function offHandler() {
+          self.off('fullscreenerror', errorHandler);
+          self.off('fullscreenchange', changeHandler);
+        }
+        function changeHandler() {
+          offHandler();
+          resolve();
+        }
+        function errorHandler(e, err) {
+          offHandler();
+          reject(err);
+        }
+        self.one('fullscreenchange', changeHandler);
+        self.one('fullscreenerror', errorHandler);
+        const promise = self.requestFullscreenHelper_(fullscreenOptions);
+        if (promise) {
+          promise.then(offHandler, offHandler);
+          promise.then(resolve, reject);
+        }
+      });
+    }
+    requestFullscreenHelper_(fullscreenOptions) {
+      let fsOptions;
+
+      // Only pass fullscreen options to requestFullscreen in spec-compliant browsers.
+      // Use defaults or player configured option unless passed directly to this method.
+      if (!this.fsApi_.prefixed) {
+        fsOptions = this.options_.fullscreen && this.options_.fullscreen.options || {};
+        if (fullscreenOptions !== undefined) {
+          fsOptions = fullscreenOptions;
+        }
+      }
+
+      // This method works as follows:
+      // 1. if a fullscreen api is available, use it
+      //   1. call requestFullscreen with potential options
+      //   2. if we got a promise from above, use it to update isFullscreen()
+      // 2. otherwise, if the tech supports fullscreen, call `enterFullScreen` on it.
+      //   This is particularly used for iPhone, older iPads, and non-safari browser on iOS.
+      // 3. otherwise, use "fullWindow" mode
+      if (this.fsApi_.requestFullscreen) {
+        const promise = this.el_[this.fsApi_.requestFullscreen](fsOptions);
+
+        // Even on browsers with promise support this may not return a promise
+        if (promise) {
+          promise.then(() => this.isFullscreen(true), () => this.isFullscreen(false));
+        }
+        return promise;
+      } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) {
+        // we can't take the video.js controls fullscreen but we can go fullscreen
+        // with native controls
+        this.techCall_('enterFullScreen');
+      } else {
+        // fullscreen isn't supported so we'll just stretch the video element to
+        // fill the viewport
+        this.enterFullWindow();
+      }
+    }
+
+    /**
+     * Return the video to its normal size after having been in full screen mode
+     *
+     * @fires Player#fullscreenchange
+     */
+    exitFullscreen() {
+      const self = this;
+      return new Promise((resolve, reject) => {
+        function offHandler() {
+          self.off('fullscreenerror', errorHandler);
+          self.off('fullscreenchange', changeHandler);
+        }
+        function changeHandler() {
+          offHandler();
+          resolve();
+        }
+        function errorHandler(e, err) {
+          offHandler();
+          reject(err);
+        }
+        self.one('fullscreenchange', changeHandler);
+        self.one('fullscreenerror', errorHandler);
+        const promise = self.exitFullscreenHelper_();
+        if (promise) {
+          promise.then(offHandler, offHandler);
+          // map the promise to our resolve/reject methods
+          promise.then(resolve, reject);
+        }
+      });
+    }
+    exitFullscreenHelper_() {
+      if (this.fsApi_.requestFullscreen) {
+        const promise = document[this.fsApi_.exitFullscreen]();
+
+        // Even on browsers with promise support this may not return a promise
+        if (promise) {
+          // we're splitting the promise here, so, we want to catch the
+          // potential error so that this chain doesn't have unhandled errors
+          silencePromise(promise.then(() => this.isFullscreen(false)));
+        }
+        return promise;
+      } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) {
+        this.techCall_('exitFullScreen');
+      } else {
+        this.exitFullWindow();
+      }
+    }
+
+    /**
+     * When fullscreen isn't supported we can stretch the
+     * video container to as wide as the browser will let us.
+     *
+     * @fires Player#enterFullWindow
+     */
+    enterFullWindow() {
+      this.isFullscreen(true);
+      this.isFullWindow = true;
+
+      // Storing original doc overflow value to return to when fullscreen is off
+      this.docOrigOverflow = document.documentElement.style.overflow;
+
+      // Add listener for esc key to exit fullscreen
+      on(document, 'keydown', this.boundFullWindowOnEscKey_);
+
+      // Hide any scroll bars
+      document.documentElement.style.overflow = 'hidden';
+
+      // Apply fullscreen styles
+      addClass(document.body, 'vjs-full-window');
+
+      /**
+       * @event Player#enterFullWindow
+       * @type {Event}
+       */
+      this.trigger('enterFullWindow');
+    }
+
+    /**
+     * Check for call to either exit full window or
+     * full screen on ESC key
+     *
+     * @param {string} event
+     *        Event to check for key press
+     */
+    fullWindowOnEscKey(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        if (this.isFullscreen() === true) {
+          if (!this.isFullWindow) {
+            this.exitFullscreen();
+          } else {
+            this.exitFullWindow();
+          }
+        }
+      }
+    }
+
+    /**
+     * Exit full window
+     *
+     * @fires Player#exitFullWindow
+     */
+    exitFullWindow() {
+      this.isFullscreen(false);
+      this.isFullWindow = false;
+      off(document, 'keydown', this.boundFullWindowOnEscKey_);
+
+      // Unhide scroll bars.
+      document.documentElement.style.overflow = this.docOrigOverflow;
+
+      // Remove fullscreen styles
+      removeClass(document.body, 'vjs-full-window');
+
+      // Resize the box, controller, and poster to original sizes
+      // this.positionAll();
+      /**
+       * @event Player#exitFullWindow
+       * @type {Event}
+       */
+      this.trigger('exitFullWindow');
+    }
+
+    /**
+     * Get or set disable Picture-in-Picture mode.
+     *
+     * @param {boolean} [value]
+     *                  - true will disable Picture-in-Picture mode
+     *                  - false will enable Picture-in-Picture mode
+     */
+    disablePictureInPicture(value) {
+      if (value === undefined) {
+        return this.techGet_('disablePictureInPicture');
+      }
+      this.techCall_('setDisablePictureInPicture', value);
+      this.options_.disablePictureInPicture = value;
+      this.trigger('disablepictureinpicturechanged');
+    }
+
+    /**
+     * Check if the player is in Picture-in-Picture mode or tell the player that it
+     * is or is not in Picture-in-Picture mode.
+     *
+     * @param  {boolean} [isPiP]
+     *         Set the players current Picture-in-Picture state
+     *
+     * @return {boolean|undefined}
+     *         - true if Picture-in-Picture is on and getting
+     *         - false if Picture-in-Picture is off and getting
+     *         - nothing if setting
+     */
+    isInPictureInPicture(isPiP) {
+      if (isPiP !== undefined) {
+        this.isInPictureInPicture_ = !!isPiP;
+        this.togglePictureInPictureClass_();
+        return;
+      }
+      return !!this.isInPictureInPicture_;
+    }
+
+    /**
+     * Create a floating video window always on top of other windows so that users may
+     * continue consuming media while they interact with other content sites, or
+     * applications on their device.
+     *
+     * This can use document picture-in-picture or element picture in picture
+     *
+     * Set `enableDocumentPictureInPicture` to `true` to use docPiP on a supported browser
+     * Else set `disablePictureInPicture` to `false` to disable elPiP on a supported browser
+     *
+     *
+     * @see [Spec]{@link https://w3c.github.io/picture-in-picture/}
+     * @see [Spec]{@link https://wicg.github.io/document-picture-in-picture/}
+     *
+     * @fires Player#enterpictureinpicture
+     *
+     * @return {Promise}
+     *         A promise with a Picture-in-Picture window.
+     */
+    requestPictureInPicture() {
+      if (this.options_.enableDocumentPictureInPicture && window.documentPictureInPicture) {
+        const pipContainer = document.createElement(this.el().tagName);
+        pipContainer.classList = this.el().classList;
+        pipContainer.classList.add('vjs-pip-container');
+        if (this.posterImage) {
+          pipContainer.appendChild(this.posterImage.el().cloneNode(true));
+        }
+        if (this.titleBar) {
+          pipContainer.appendChild(this.titleBar.el().cloneNode(true));
+        }
+        pipContainer.appendChild(createEl('p', {
+          className: 'vjs-pip-text'
+        }, {}, this.localize('Playing in picture-in-picture')));
+        return window.documentPictureInPicture.requestWindow({
+          // The aspect ratio won't be correct, Chrome bug https://crbug.com/1407629
+          width: this.videoWidth(),
+          height: this.videoHeight()
+        }).then(pipWindow => {
+          copyStyleSheetsToWindow(pipWindow);
+          this.el_.parentNode.insertBefore(pipContainer, this.el_);
+          pipWindow.document.body.appendChild(this.el_);
+          pipWindow.document.body.classList.add('vjs-pip-window');
+          this.player_.isInPictureInPicture(true);
+          this.player_.trigger({
+            type: 'enterpictureinpicture',
+            pipWindow
+          });
+
+          // Listen for the PiP closing event to move the video back.
+          pipWindow.addEventListener('pagehide', event => {
+            const pipVideo = event.target.querySelector('.video-js');
+            pipContainer.parentNode.replaceChild(pipVideo, pipContainer);
+            this.player_.isInPictureInPicture(false);
+            this.player_.trigger('leavepictureinpicture');
+          });
+          return pipWindow;
+        });
+      }
+      if ('pictureInPictureEnabled' in document && this.disablePictureInPicture() === false) {
+        /**
+         * This event fires when the player enters picture in picture mode
+         *
+         * @event Player#enterpictureinpicture
+         * @type {Event}
+         */
+        return this.techGet_('requestPictureInPicture');
+      }
+      return Promise.reject('No PiP mode is available');
+    }
+
+    /**
+     * Exit Picture-in-Picture mode.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @fires Player#leavepictureinpicture
+     *
+     * @return {Promise}
+     *         A promise.
+     */
+    exitPictureInPicture() {
+      if (window.documentPictureInPicture && window.documentPictureInPicture.window) {
+        // With documentPictureInPicture, Player#leavepictureinpicture is fired in the pagehide handler
+        window.documentPictureInPicture.window.close();
+        return Promise.resolve();
+      }
+      if ('pictureInPictureEnabled' in document) {
+        /**
+         * This event fires when the player leaves picture in picture mode
+         *
+         * @event Player#leavepictureinpicture
+         * @type {Event}
+         */
+        return document.exitPictureInPicture();
+      }
+    }
+
+    /**
+     * Called when this Player has focus and a key gets pressed down, or when
+     * any Component of this player receives a key press that it doesn't handle.
+     * This allows player-wide hotkeys (either as defined below, or optionally
+     * by an external function).
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      const {
+        userActions
+      } = this.options_;
+
+      // Bail out if hotkeys are not configured.
+      if (!userActions || !userActions.hotkeys) {
+        return;
+      }
+
+      // Function that determines whether or not to exclude an element from
+      // hotkeys handling.
+      const excludeElement = el => {
+        const tagName = el.tagName.toLowerCase();
+
+        // The first and easiest test is for `contenteditable` elements.
+        if (el.isContentEditable) {
+          return true;
+        }
+
+        // Inputs matching these types will still trigger hotkey handling as
+        // they are not text inputs.
+        const allowedInputTypes = ['button', 'checkbox', 'hidden', 'radio', 'reset', 'submit'];
+        if (tagName === 'input') {
+          return allowedInputTypes.indexOf(el.type) === -1;
+        }
+
+        // The final test is by tag name. These tags will be excluded entirely.
+        const excludedTags = ['textarea'];
+        return excludedTags.indexOf(tagName) !== -1;
+      };
+
+      // Bail out if the user is focused on an interactive form element.
+      if (excludeElement(this.el_.ownerDocument.activeElement)) {
+        return;
+      }
+      if (typeof userActions.hotkeys === 'function') {
+        userActions.hotkeys.call(this, event);
+      } else {
+        this.handleHotkeys(event);
+      }
+    }
+
+    /**
+     * Called when this Player receives a hotkey keydown event.
+     * Supported player-wide hotkeys are:
+     *
+     *   f          - toggle fullscreen
+     *   m          - toggle mute
+     *   k or Space - toggle play/pause
+     *
+     * @param {Event} event
+     *        The `keydown` event that caused this function to be called.
+     */
+    handleHotkeys(event) {
+      const hotkeys = this.options_.userActions ? this.options_.userActions.hotkeys : {};
+
+      // set fullscreenKey, muteKey, playPauseKey from `hotkeys`, use defaults if not set
+      const {
+        fullscreenKey = keydownEvent => keycode.isEventKey(keydownEvent, 'f'),
+        muteKey = keydownEvent => keycode.isEventKey(keydownEvent, 'm'),
+        playPauseKey = keydownEvent => keycode.isEventKey(keydownEvent, 'k') || keycode.isEventKey(keydownEvent, 'Space')
+      } = hotkeys;
+      if (fullscreenKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const FSToggle = Component$1.getComponent('FullscreenToggle');
+        if (document[this.fsApi_.fullscreenEnabled] !== false) {
+          FSToggle.prototype.handleClick.call(this, event);
+        }
+      } else if (muteKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const MuteToggle = Component$1.getComponent('MuteToggle');
+        MuteToggle.prototype.handleClick.call(this, event);
+      } else if (playPauseKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const PlayToggle = Component$1.getComponent('PlayToggle');
+        PlayToggle.prototype.handleClick.call(this, event);
+      }
+    }
+
+    /**
+     * Check whether the player can play a given mimetype
+     *
+     * @see https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype
+     *
+     * @param {string} type
+     *        The mimetype to check
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    canPlayType(type) {
+      let can;
+
+      // Loop through each playback technology in the options order
+      for (let i = 0, j = this.options_.techOrder; i < j.length; i++) {
+        const techName = j[i];
+        let tech = Tech.getTech(techName);
+
+        // Support old behavior of techs being registered as components.
+        // Remove once that deprecated behavior is removed.
+        if (!tech) {
+          tech = Component$1.getComponent(techName);
+        }
+
+        // Check if the current tech is defined before continuing
+        if (!tech) {
+          log$1.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+          continue;
+        }
+
+        // Check if the browser supports this technology
+        if (tech.isSupported()) {
+          can = tech.canPlayType(type);
+          if (can) {
+            return can;
+          }
+        }
+      }
+      return '';
+    }
+
+    /**
+     * Select source based on tech-order or source-order
+     * Uses source-order selection if `options.sourceOrder` is truthy. Otherwise,
+     * defaults to tech-order selection
+     *
+     * @param {Array} sources
+     *        The sources for a media asset
+     *
+     * @return {Object|boolean}
+     *         Object of source and tech order or false
+     */
+    selectSource(sources) {
+      // Get only the techs specified in `techOrder` that exist and are supported by the
+      // current platform
+      const techs = this.options_.techOrder.map(techName => {
+        return [techName, Tech.getTech(techName)];
+      }).filter(([techName, tech]) => {
+        // Check if the current tech is defined before continuing
+        if (tech) {
+          // Check if the browser supports this technology
+          return tech.isSupported();
+        }
+        log$1.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+        return false;
+      });
+
+      // Iterate over each `innerArray` element once per `outerArray` element and execute
+      // `tester` with both. If `tester` returns a non-falsy value, exit early and return
+      // that value.
+      const findFirstPassingTechSourcePair = function (outerArray, innerArray, tester) {
+        let found;
+        outerArray.some(outerChoice => {
+          return innerArray.some(innerChoice => {
+            found = tester(outerChoice, innerChoice);
+            if (found) {
+              return true;
+            }
+          });
+        });
+        return found;
+      };
+      let foundSourceAndTech;
+      const flip = fn => (a, b) => fn(b, a);
+      const finder = ([techName, tech], source) => {
+        if (tech.canPlaySource(source, this.options_[techName.toLowerCase()])) {
+          return {
+            source,
+            tech: techName
+          };
+        }
+      };
+
+      // Depending on the truthiness of `options.sourceOrder`, we swap the order of techs and sources
+      // to select from them based on their priority.
+      if (this.options_.sourceOrder) {
+        // Source-first ordering
+        foundSourceAndTech = findFirstPassingTechSourcePair(sources, techs, flip(finder));
+      } else {
+        // Tech-first ordering
+        foundSourceAndTech = findFirstPassingTechSourcePair(techs, sources, finder);
+      }
+      return foundSourceAndTech || false;
+    }
+
+    /**
+     * Executes source setting and getting logic
+     *
+     * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+     *        A SourceObject, an array of SourceObjects, or a string referencing
+     *        a URL to a media source. It is _highly recommended_ that an object
+     *        or array of objects is used here, so that source selection
+     *        algorithms can take the `type` into account.
+     *
+     *        If not provided, this method acts as a getter.
+     * @param {boolean} [isRetry]
+     *        Indicates whether this is being called internally as a result of a retry
+     *
+     * @return {string|undefined}
+     *         If the `source` argument is missing, returns the current source
+     *         URL. Otherwise, returns nothing/undefined.
+     */
+    handleSrc_(source, isRetry) {
+      // getter usage
+      if (typeof source === 'undefined') {
+        return this.cache_.src || '';
+      }
+
+      // Reset retry behavior for new source
+      if (this.resetRetryOnError_) {
+        this.resetRetryOnError_();
+      }
+
+      // filter out invalid sources and turn our source into
+      // an array of source objects
+      const sources = filterSource(source);
+
+      // if a source was passed in then it is invalid because
+      // it was filtered to a zero length Array. So we have to
+      // show an error
+      if (!sources.length) {
+        this.setTimeout(function () {
+          this.error({
+            code: 4,
+            message: this.options_.notSupportedMessage
+          });
+        }, 0);
+        return;
+      }
+
+      // initial sources
+      this.changingSrc_ = true;
+
+      // Only update the cached source list if we are not retrying a new source after error,
+      // since in that case we want to include the failed source(s) in the cache
+      if (!isRetry) {
+        this.cache_.sources = sources;
+      }
+      this.updateSourceCaches_(sources[0]);
+
+      // middlewareSource is the source after it has been changed by middleware
+      setSource(this, sources[0], (middlewareSource, mws) => {
+        this.middleware_ = mws;
+
+        // since sourceSet is async we have to update the cache again after we select a source since
+        // the source that is selected could be out of order from the cache update above this callback.
+        if (!isRetry) {
+          this.cache_.sources = sources;
+        }
+        this.updateSourceCaches_(middlewareSource);
+        const err = this.src_(middlewareSource);
+        if (err) {
+          if (sources.length > 1) {
+            return this.handleSrc_(sources.slice(1));
+          }
+          this.changingSrc_ = false;
+
+          // We need to wrap this in a timeout to give folks a chance to add error event handlers
+          this.setTimeout(function () {
+            this.error({
+              code: 4,
+              message: this.options_.notSupportedMessage
+            });
+          }, 0);
+
+          // we could not find an appropriate tech, but let's still notify the delegate that this is it
+          // this needs a better comment about why this is needed
+          this.triggerReady();
+          return;
+        }
+        setTech(mws, this.tech_);
+      });
+
+      // Try another available source if this one fails before playback.
+      if (sources.length > 1) {
+        const retry = () => {
+          // Remove the error modal
+          this.error(null);
+          this.handleSrc_(sources.slice(1), true);
+        };
+        const stopListeningForErrors = () => {
+          this.off('error', retry);
+        };
+        this.one('error', retry);
+        this.one('playing', stopListeningForErrors);
+        this.resetRetryOnError_ = () => {
+          this.off('error', retry);
+          this.off('playing', stopListeningForErrors);
+        };
+      }
+    }
+
+    /**
+     * Get or set the video source.
+     *
+     * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+     *        A SourceObject, an array of SourceObjects, or a string referencing
+     *        a URL to a media source. It is _highly recommended_ that an object
+     *        or array of objects is used here, so that source selection
+     *        algorithms can take the `type` into account.
+     *
+     *        If not provided, this method acts as a getter.
+     *
+     * @return {string|undefined}
+     *         If the `source` argument is missing, returns the current source
+     *         URL. Otherwise, returns nothing/undefined.
+     */
+    src(source) {
+      return this.handleSrc_(source, false);
+    }
+
+    /**
+     * Set the source object on the tech, returns a boolean that indicates whether
+     * there is a tech that can play the source or not
+     *
+     * @param {Tech~SourceObject} source
+     *        The source object to set on the Tech
+     *
+     * @return {boolean}
+     *         - True if there is no Tech to playback this source
+     *         - False otherwise
+     *
+     * @private
+     */
+    src_(source) {
+      const sourceTech = this.selectSource([source]);
+      if (!sourceTech) {
+        return true;
+      }
+      if (!titleCaseEquals(sourceTech.tech, this.techName_)) {
+        this.changingSrc_ = true;
+        // load this technology with the chosen source
+        this.loadTech_(sourceTech.tech, sourceTech.source);
+        this.tech_.ready(() => {
+          this.changingSrc_ = false;
+        });
+        return false;
+      }
+
+      // wait until the tech is ready to set the source
+      // and set it synchronously if possible (#2326)
+      this.ready(function () {
+        // The setSource tech method was added with source handlers
+        // so older techs won't support it
+        // We need to check the direct prototype for the case where subclasses
+        // of the tech do not support source handlers
+        if (this.tech_.constructor.prototype.hasOwnProperty('setSource')) {
+          this.techCall_('setSource', source);
+        } else {
+          this.techCall_('src', source.src);
+        }
+        this.changingSrc_ = false;
+      }, true);
+      return false;
+    }
+
+    /**
+     * Begin loading the src data.
+     */
+    load() {
+      // Workaround to use the load method with the VHS.
+      // Does not cover the case when the load method is called directly from the mediaElement.
+      if (this.tech_ && this.tech_.vhs) {
+        this.src(this.currentSource());
+        return;
+      }
+      this.techCall_('load');
+    }
+
+    /**
+     * Reset the player. Loads the first tech in the techOrder,
+     * removes all the text tracks in the existing `tech`,
+     * and calls `reset` on the `tech`.
+     */
+    reset() {
+      if (this.paused()) {
+        this.doReset_();
+      } else {
+        const playPromise = this.play();
+        silencePromise(playPromise.then(() => this.doReset_()));
+      }
+    }
+    doReset_() {
+      if (this.tech_) {
+        this.tech_.clearTracks('text');
+      }
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      this.resetCache_();
+      this.poster('');
+      this.loadTech_(this.options_.techOrder[0], null);
+      this.techCall_('reset');
+      this.resetControlBarUI_();
+      this.error(null);
+      if (this.titleBar) {
+        this.titleBar.update({
+          title: undefined,
+          description: undefined
+        });
+      }
+      if (isEvented(this)) {
+        this.trigger('playerreset');
+      }
+    }
+
+    /**
+     * Reset Control Bar's UI by calling sub-methods that reset
+     * all of Control Bar's components
+     */
+    resetControlBarUI_() {
+      this.resetProgressBar_();
+      this.resetPlaybackRate_();
+      this.resetVolumeBar_();
+    }
+
+    /**
+     * Reset tech's progress so progress bar is reset in the UI
+     */
+    resetProgressBar_() {
+      this.currentTime(0);
+      const {
+        currentTimeDisplay,
+        durationDisplay,
+        progressControl,
+        remainingTimeDisplay
+      } = this.controlBar || {};
+      const {
+        seekBar
+      } = progressControl || {};
+      if (currentTimeDisplay) {
+        currentTimeDisplay.updateContent();
+      }
+      if (durationDisplay) {
+        durationDisplay.updateContent();
+      }
+      if (remainingTimeDisplay) {
+        remainingTimeDisplay.updateContent();
+      }
+      if (seekBar) {
+        seekBar.update();
+        if (seekBar.loadProgressBar) {
+          seekBar.loadProgressBar.update();
+        }
+      }
+    }
+
+    /**
+     * Reset Playback ratio
+     */
+    resetPlaybackRate_() {
+      this.playbackRate(this.defaultPlaybackRate());
+      this.handleTechRateChange_();
+    }
+
+    /**
+     * Reset Volume bar
+     */
+    resetVolumeBar_() {
+      this.volume(1.0);
+      this.trigger('volumechange');
+    }
+
+    /**
+     * Returns all of the current source objects.
+     *
+     * @return {Tech~SourceObject[]}
+     *         The current source objects
+     */
+    currentSources() {
+      const source = this.currentSource();
+      const sources = [];
+
+      // assume `{}` or `{ src }`
+      if (Object.keys(source).length !== 0) {
+        sources.push(source);
+      }
+      return this.cache_.sources || sources;
+    }
+
+    /**
+     * Returns the current source object.
+     *
+     * @return {Tech~SourceObject}
+     *         The current source object
+     */
+    currentSource() {
+      return this.cache_.source || {};
+    }
+
+    /**
+     * Returns the fully qualified URL of the current source value e.g. http://mysite.com/video.mp4
+     * Can be used in conjunction with `currentType` to assist in rebuilding the current source object.
+     *
+     * @return {string}
+     *         The current source
+     */
+    currentSrc() {
+      return this.currentSource() && this.currentSource().src || '';
+    }
+
+    /**
+     * Get the current source type e.g. video/mp4
+     * This can allow you rebuild the current source object so that you could load the same
+     * source and tech later
+     *
+     * @return {string}
+     *         The source MIME type
+     */
+    currentType() {
+      return this.currentSource() && this.currentSource().type || '';
+    }
+
+    /**
+     * Get or set the preload attribute
+     *
+     * @param {'none'|'auto'|'metadata'} [value]
+     *        Preload mode to pass to tech
+     *
+     * @return {string|undefined}
+     *         - The preload attribute value when getting
+     *         - Nothing when setting
+     */
+    preload(value) {
+      if (value !== undefined) {
+        this.techCall_('setPreload', value);
+        this.options_.preload = value;
+        return;
+      }
+      return this.techGet_('preload');
+    }
+
+    /**
+     * Get or set the autoplay option. When this is a boolean it will
+     * modify the attribute on the tech. When this is a string the attribute on
+     * the tech will be removed and `Player` will handle autoplay on loadstarts.
+     *
+     * @param {boolean|'play'|'muted'|'any'} [value]
+     *        - true: autoplay using the browser behavior
+     *        - false: do not autoplay
+     *        - 'play': call play() on every loadstart
+     *        - 'muted': call muted() then play() on every loadstart
+     *        - 'any': call play() on every loadstart. if that fails call muted() then play().
+     *        - *: values other than those listed here will be set `autoplay` to true
+     *
+     * @return {boolean|string|undefined}
+     *         - The current value of autoplay when getting
+     *         - Nothing when setting
+     */
+    autoplay(value) {
+      // getter usage
+      if (value === undefined) {
+        return this.options_.autoplay || false;
+      }
+      let techAutoplay;
+
+      // if the value is a valid string set it to that, or normalize `true` to 'play', if need be
+      if (typeof value === 'string' && /(any|play|muted)/.test(value) || value === true && this.options_.normalizeAutoplay) {
+        this.options_.autoplay = value;
+        this.manualAutoplay_(typeof value === 'string' ? value : 'play');
+        techAutoplay = false;
+
+        // any falsy value sets autoplay to false in the browser,
+        // lets do the same
+      } else if (!value) {
+        this.options_.autoplay = false;
+
+        // any other value (ie truthy) sets autoplay to true
+      } else {
+        this.options_.autoplay = true;
+      }
+      techAutoplay = typeof techAutoplay === 'undefined' ? this.options_.autoplay : techAutoplay;
+
+      // if we don't have a tech then we do not queue up
+      // a setAutoplay call on tech ready. We do this because the
+      // autoplay option will be passed in the constructor and we
+      // do not need to set it twice
+      if (this.tech_) {
+        this.techCall_('setAutoplay', techAutoplay);
+      }
+    }
+
+    /**
+     * Set or unset the playsinline attribute.
+     * Playsinline tells the browser that non-fullscreen playback is preferred.
+     *
+     * @param {boolean} [value]
+     *        - true means that we should try to play inline by default
+     *        - false means that we should use the browser's default playback mode,
+     *          which in most cases is inline. iOS Safari is a notable exception
+     *          and plays fullscreen by default.
+     *
+     * @return {string|undefined}
+     *         - the current value of playsinline
+     *         - Nothing when setting
+     *
+     * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+     */
+    playsinline(value) {
+      if (value !== undefined) {
+        this.techCall_('setPlaysinline', value);
+        this.options_.playsinline = value;
+      }
+      return this.techGet_('playsinline');
+    }
+
+    /**
+     * Get or set the loop attribute on the video element.
+     *
+     * @param {boolean} [value]
+     *        - true means that we should loop the video
+     *        - false means that we should not loop the video
+     *
+     * @return {boolean|undefined}
+     *         - The current value of loop when getting
+     *         - Nothing when setting
+     */
+    loop(value) {
+      if (value !== undefined) {
+        this.techCall_('setLoop', value);
+        this.options_.loop = value;
+        return;
+      }
+      return this.techGet_('loop');
+    }
+
+    /**
+     * Get or set the poster image source url
+     *
+     * @fires Player#posterchange
+     *
+     * @param {string} [src]
+     *        Poster image source URL
+     *
+     * @return {string|undefined}
+     *         - The current value of poster when getting
+     *         - Nothing when setting
+     */
+    poster(src) {
+      if (src === undefined) {
+        return this.poster_;
+      }
+
+      // The correct way to remove a poster is to set as an empty string
+      // other falsey values will throw errors
+      if (!src) {
+        src = '';
+      }
+      if (src === this.poster_) {
+        return;
+      }
+
+      // update the internal poster variable
+      this.poster_ = src;
+
+      // update the tech's poster
+      this.techCall_('setPoster', src);
+      this.isPosterFromTech_ = false;
+
+      // alert components that the poster has been set
+      /**
+       * This event fires when the poster image is changed on the player.
+       *
+       * @event Player#posterchange
+       * @type {Event}
+       */
+      this.trigger('posterchange');
+    }
+
+    /**
+     * Some techs (e.g. YouTube) can provide a poster source in an
+     * asynchronous way. We want the poster component to use this
+     * poster source so that it covers up the tech's controls.
+     * (YouTube's play button). However we only want to use this
+     * source if the player user hasn't set a poster through
+     * the normal APIs.
+     *
+     * @fires Player#posterchange
+     * @listens Tech#posterchange
+     * @private
+     */
+    handleTechPosterChange_() {
+      if ((!this.poster_ || this.options_.techCanOverridePoster) && this.tech_ && this.tech_.poster) {
+        const newPoster = this.tech_.poster() || '';
+        if (newPoster !== this.poster_) {
+          this.poster_ = newPoster;
+          this.isPosterFromTech_ = true;
+
+          // Let components know the poster has changed
+          this.trigger('posterchange');
+        }
+      }
+    }
+
+    /**
+     * Get or set whether or not the controls are showing.
+     *
+     * @fires Player#controlsenabled
+     *
+     * @param {boolean} [bool]
+     *        - true to turn controls on
+     *        - false to turn controls off
+     *
+     * @return {boolean|undefined}
+     *         - The current value of controls when getting
+     *         - Nothing when setting
+     */
+    controls(bool) {
+      if (bool === undefined) {
+        return !!this.controls_;
+      }
+      bool = !!bool;
+
+      // Don't trigger a change event unless it actually changed
+      if (this.controls_ === bool) {
+        return;
+      }
+      this.controls_ = bool;
+      if (this.usingNativeControls()) {
+        this.techCall_('setControls', bool);
+      }
+      if (this.controls_) {
+        this.removeClass('vjs-controls-disabled');
+        this.addClass('vjs-controls-enabled');
+        /**
+         * @event Player#controlsenabled
+         * @type {Event}
+         */
+        this.trigger('controlsenabled');
+        if (!this.usingNativeControls()) {
+          this.addTechControlsListeners_();
+        }
+      } else {
+        this.removeClass('vjs-controls-enabled');
+        this.addClass('vjs-controls-disabled');
+        /**
+         * @event Player#controlsdisabled
+         * @type {Event}
+         */
+        this.trigger('controlsdisabled');
+        if (!this.usingNativeControls()) {
+          this.removeTechControlsListeners_();
+        }
+      }
+    }
+
+    /**
+     * Toggle native controls on/off. Native controls are the controls built into
+     * devices (e.g. default iPhone controls) or other techs
+     * (e.g. Vimeo Controls)
+     * **This should only be set by the current tech, because only the tech knows
+     * if it can support native controls**
+     *
+     * @fires Player#usingnativecontrols
+     * @fires Player#usingcustomcontrols
+     *
+     * @param {boolean} [bool]
+     *        - true to turn native controls on
+     *        - false to turn native controls off
+     *
+     * @return {boolean|undefined}
+     *         - The current value of native controls when getting
+     *         - Nothing when setting
+     */
+    usingNativeControls(bool) {
+      if (bool === undefined) {
+        return !!this.usingNativeControls_;
+      }
+      bool = !!bool;
+
+      // Don't trigger a change event unless it actually changed
+      if (this.usingNativeControls_ === bool) {
+        return;
+      }
+      this.usingNativeControls_ = bool;
+      if (this.usingNativeControls_) {
+        this.addClass('vjs-using-native-controls');
+
+        /**
+         * player is using the native device controls
+         *
+         * @event Player#usingnativecontrols
+         * @type {Event}
+         */
+        this.trigger('usingnativecontrols');
+      } else {
+        this.removeClass('vjs-using-native-controls');
+
+        /**
+         * player is using the custom HTML controls
+         *
+         * @event Player#usingcustomcontrols
+         * @type {Event}
+         */
+        this.trigger('usingcustomcontrols');
+      }
+    }
+
+    /**
+     * Set or get the current MediaError
+     *
+     * @fires Player#error
+     *
+     * @param  {MediaError|string|number} [err]
+     *         A MediaError or a string/number to be turned
+     *         into a MediaError
+     *
+     * @return {MediaError|null|undefined}
+     *         - The current MediaError when getting (or null)
+     *         - Nothing when setting
+     */
+    error(err) {
+      if (err === undefined) {
+        return this.error_ || null;
+      }
+
+      // allow hooks to modify error object
+      hooks('beforeerror').forEach(hookFunction => {
+        const newErr = hookFunction(this, err);
+        if (!(isObject$1(newErr) && !Array.isArray(newErr) || typeof newErr === 'string' || typeof newErr === 'number' || newErr === null)) {
+          this.log.error('please return a value that MediaError expects in beforeerror hooks');
+          return;
+        }
+        err = newErr;
+      });
+
+      // Suppress the first error message for no compatible source until
+      // user interaction
+      if (this.options_.suppressNotSupportedError && err && err.code === 4) {
+        const triggerSuppressedError = function () {
+          this.error(err);
+        };
+        this.options_.suppressNotSupportedError = false;
+        this.any(['click', 'touchstart'], triggerSuppressedError);
+        this.one('loadstart', function () {
+          this.off(['click', 'touchstart'], triggerSuppressedError);
+        });
+        return;
+      }
+
+      // restoring to default
+      if (err === null) {
+        this.error_ = null;
+        this.removeClass('vjs-error');
+        if (this.errorDisplay) {
+          this.errorDisplay.close();
+        }
+        return;
+      }
+      this.error_ = new MediaError(err);
+
+      // add the vjs-error classname to the player
+      this.addClass('vjs-error');
+
+      // log the name of the error type and any message
+      // IE11 logs "[object object]" and required you to expand message to see error object
+      log$1.error(`(CODE:${this.error_.code} ${MediaError.errorTypes[this.error_.code]})`, this.error_.message, this.error_);
+
+      /**
+       * @event Player#error
+       * @type {Event}
+       */
+      this.trigger('error');
+
+      // notify hooks of the per player error
+      hooks('error').forEach(hookFunction => hookFunction(this, this.error_));
+      return;
+    }
+
+    /**
+     * Report user activity
+     *
+     * @param {Object} event
+     *        Event object
+     */
+    reportUserActivity(event) {
+      this.userActivity_ = true;
+    }
+
+    /**
+     * Get/set if user is active
+     *
+     * @fires Player#useractive
+     * @fires Player#userinactive
+     *
+     * @param {boolean} [bool]
+     *        - true if the user is active
+     *        - false if the user is inactive
+     *
+     * @return {boolean|undefined}
+     *         - The current value of userActive when getting
+     *         - Nothing when setting
+     */
+    userActive(bool) {
+      if (bool === undefined) {
+        return this.userActive_;
+      }
+      bool = !!bool;
+      if (bool === this.userActive_) {
+        return;
+      }
+      this.userActive_ = bool;
+      if (this.userActive_) {
+        this.userActivity_ = true;
+        this.removeClass('vjs-user-inactive');
+        this.addClass('vjs-user-active');
+        /**
+         * @event Player#useractive
+         * @type {Event}
+         */
+        this.trigger('useractive');
+        return;
+      }
+
+      // Chrome/Safari/IE have bugs where when you change the cursor it can
+      // trigger a mousemove event. This causes an issue when you're hiding
+      // the cursor when the user is inactive, and a mousemove signals user
+      // activity. Making it impossible to go into inactive mode. Specifically
+      // this happens in fullscreen when we really need to hide the cursor.
+      //
+      // When this gets resolved in ALL browsers it can be removed
+      // https://code.google.com/p/chromium/issues/detail?id=103041
+      if (this.tech_) {
+        this.tech_.one('mousemove', function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+        });
+      }
+      this.userActivity_ = false;
+      this.removeClass('vjs-user-active');
+      this.addClass('vjs-user-inactive');
+      /**
+       * @event Player#userinactive
+       * @type {Event}
+       */
+      this.trigger('userinactive');
+    }
+
+    /**
+     * Listen for user activity based on timeout value
+     *
+     * @private
+     */
+    listenForUserActivity_() {
+      let mouseInProgress;
+      let lastMoveX;
+      let lastMoveY;
+      const handleActivity = bind_(this, this.reportUserActivity);
+      const handleMouseMove = function (e) {
+        // #1068 - Prevent mousemove spamming
+        // Chrome Bug: https://code.google.com/p/chromium/issues/detail?id=366970
+        if (e.screenX !== lastMoveX || e.screenY !== lastMoveY) {
+          lastMoveX = e.screenX;
+          lastMoveY = e.screenY;
+          handleActivity();
+        }
+      };
+      const handleMouseDown = function () {
+        handleActivity();
+        // For as long as the they are touching the device or have their mouse down,
+        // we consider them active even if they're not moving their finger or mouse.
+        // So we want to continue to update that they are active
+        this.clearInterval(mouseInProgress);
+        // Setting userActivity=true now and setting the interval to the same time
+        // as the activityCheck interval (250) should ensure we never miss the
+        // next activityCheck
+        mouseInProgress = this.setInterval(handleActivity, 250);
+      };
+      const handleMouseUpAndMouseLeave = function (event) {
+        handleActivity();
+        // Stop the interval that maintains activity if the mouse/touch is down
+        this.clearInterval(mouseInProgress);
+      };
+
+      // Any mouse movement will be considered user activity
+      this.on('mousedown', handleMouseDown);
+      this.on('mousemove', handleMouseMove);
+      this.on('mouseup', handleMouseUpAndMouseLeave);
+      this.on('mouseleave', handleMouseUpAndMouseLeave);
+      const controlBar = this.getChild('controlBar');
+
+      // Fixes bug on Android & iOS where when tapping progressBar (when control bar is displayed)
+      // controlBar would no longer be hidden by default timeout.
+      if (controlBar && !IS_IOS && !IS_ANDROID) {
+        controlBar.on('mouseenter', function (event) {
+          if (this.player().options_.inactivityTimeout !== 0) {
+            this.player().cache_.inactivityTimeout = this.player().options_.inactivityTimeout;
+          }
+          this.player().options_.inactivityTimeout = 0;
+        });
+        controlBar.on('mouseleave', function (event) {
+          this.player().options_.inactivityTimeout = this.player().cache_.inactivityTimeout;
+        });
+      }
+
+      // Listen for keyboard navigation
+      // Shouldn't need to use inProgress interval because of key repeat
+      this.on('keydown', handleActivity);
+      this.on('keyup', handleActivity);
+
+      // Run an interval every 250 milliseconds instead of stuffing everything into
+      // the mousemove/touchmove function itself, to prevent performance degradation.
+      // `this.reportUserActivity` simply sets this.userActivity_ to true, which
+      // then gets picked up by this loop
+      // http://ejohn.org/blog/learning-from-twitter/
+      let inactivityTimeout;
+
+      /** @this Player */
+      const activityCheck = function () {
+        // Check to see if mouse/touch activity has happened
+        if (!this.userActivity_) {
+          return;
+        }
+
+        // Reset the activity tracker
+        this.userActivity_ = false;
+
+        // If the user state was inactive, set the state to active
+        this.userActive(true);
+
+        // Clear any existing inactivity timeout to start the timer over
+        this.clearTimeout(inactivityTimeout);
+        const timeout = this.options_.inactivityTimeout;
+        if (timeout <= 0) {
+          return;
+        }
+
+        // In <timeout> milliseconds, if no more activity has occurred the
+        // user will be considered inactive
+        inactivityTimeout = this.setTimeout(function () {
+          // Protect against the case where the inactivityTimeout can trigger just
+          // before the next user activity is picked up by the activity check loop
+          // causing a flicker
+          if (!this.userActivity_) {
+            this.userActive(false);
+          }
+        }, timeout);
+      };
+      this.setInterval(activityCheck, 250);
+    }
+
+    /**
+     * Gets or sets the current playback rate. A playback rate of
+     * 1.0 represents normal speed and 0.5 would indicate half-speed
+     * playback, for instance.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-playbackrate
+     *
+     * @param {number} [rate]
+     *       New playback rate to set.
+     *
+     * @return {number|undefined}
+     *         - The current playback rate when getting or 1.0
+     *         - Nothing when setting
+     */
+    playbackRate(rate) {
+      if (rate !== undefined) {
+        // NOTE: this.cache_.lastPlaybackRate is set from the tech handler
+        // that is registered above
+        this.techCall_('setPlaybackRate', rate);
+        return;
+      }
+      if (this.tech_ && this.tech_.featuresPlaybackRate) {
+        return this.cache_.lastPlaybackRate || this.techGet_('playbackRate');
+      }
+      return 1.0;
+    }
+
+    /**
+     * Gets or sets the current default playback rate. A default playback rate of
+     * 1.0 represents normal speed and 0.5 would indicate half-speed playback, for instance.
+     * defaultPlaybackRate will only represent what the initial playbackRate of a video was, not
+     * not the current playbackRate.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-defaultplaybackrate
+     *
+     * @param {number} [rate]
+     *       New default playback rate to set.
+     *
+     * @return {number|undefined}
+     *         - The default playback rate when getting or 1.0
+     *         - Nothing when setting
+     */
+    defaultPlaybackRate(rate) {
+      if (rate !== undefined) {
+        return this.techCall_('setDefaultPlaybackRate', rate);
+      }
+      if (this.tech_ && this.tech_.featuresPlaybackRate) {
+        return this.techGet_('defaultPlaybackRate');
+      }
+      return 1.0;
+    }
+
+    /**
+     * Gets or sets the audio flag
+     *
+     * @param {boolean} [bool]
+     *        - true signals that this is an audio player
+     *        - false signals that this is not an audio player
+     *
+     * @return {boolean|undefined}
+     *         - The current value of isAudio when getting
+     *         - Nothing when setting
+     */
+    isAudio(bool) {
+      if (bool !== undefined) {
+        this.isAudio_ = !!bool;
+        return;
+      }
+      return !!this.isAudio_;
+    }
+    enableAudioOnlyUI_() {
+      // Update styling immediately to show the control bar so we can get its height
+      this.addClass('vjs-audio-only-mode');
+      const playerChildren = this.children();
+      const controlBar = this.getChild('ControlBar');
+      const controlBarHeight = controlBar && controlBar.currentHeight();
+
+      // Hide all player components except the control bar. Control bar components
+      // needed only for video are hidden with CSS
+      playerChildren.forEach(child => {
+        if (child === controlBar) {
+          return;
+        }
+        if (child.el_ && !child.hasClass('vjs-hidden')) {
+          child.hide();
+          this.audioOnlyCache_.hiddenChildren.push(child);
+        }
+      });
+      this.audioOnlyCache_.playerHeight = this.currentHeight();
+
+      // Set the player height the same as the control bar
+      this.height(controlBarHeight);
+      this.trigger('audioonlymodechange');
+    }
+    disableAudioOnlyUI_() {
+      this.removeClass('vjs-audio-only-mode');
+
+      // Show player components that were previously hidden
+      this.audioOnlyCache_.hiddenChildren.forEach(child => child.show());
+
+      // Reset player height
+      this.height(this.audioOnlyCache_.playerHeight);
+      this.trigger('audioonlymodechange');
+    }
+
+    /**
+     * Get the current audioOnlyMode state or set audioOnlyMode to true or false.
+     *
+     * Setting this to `true` will hide all player components except the control bar,
+     * as well as control bar components needed only for video.
+     *
+     * @param {boolean} [value]
+     *         The value to set audioOnlyMode to.
+     *
+     * @return {Promise|boolean}
+     *        A Promise is returned when setting the state, and a boolean when getting
+     *        the present state
+     */
+    audioOnlyMode(value) {
+      if (typeof value !== 'boolean' || value === this.audioOnlyMode_) {
+        return this.audioOnlyMode_;
+      }
+      this.audioOnlyMode_ = value;
+
+      // Enable Audio Only Mode
+      if (value) {
+        const exitPromises = [];
+
+        // Fullscreen and PiP are not supported in audioOnlyMode, so exit if we need to.
+        if (this.isInPictureInPicture()) {
+          exitPromises.push(this.exitPictureInPicture());
+        }
+        if (this.isFullscreen()) {
+          exitPromises.push(this.exitFullscreen());
+        }
+        if (this.audioPosterMode()) {
+          exitPromises.push(this.audioPosterMode(false));
+        }
+        return Promise.all(exitPromises).then(() => this.enableAudioOnlyUI_());
+      }
+
+      // Disable Audio Only Mode
+      return Promise.resolve().then(() => this.disableAudioOnlyUI_());
+    }
+    enablePosterModeUI_() {
+      // Hide the video element and show the poster image to enable posterModeUI
+      const tech = this.tech_ && this.tech_;
+      tech.hide();
+      this.addClass('vjs-audio-poster-mode');
+      this.trigger('audiopostermodechange');
+    }
+    disablePosterModeUI_() {
+      // Show the video element and hide the poster image to disable posterModeUI
+      const tech = this.tech_ && this.tech_;
+      tech.show();
+      this.removeClass('vjs-audio-poster-mode');
+      this.trigger('audiopostermodechange');
+    }
+
+    /**
+     * Get the current audioPosterMode state or set audioPosterMode to true or false
+     *
+     * @param {boolean} [value]
+     *         The value to set audioPosterMode to.
+     *
+     * @return {Promise|boolean}
+     *         A Promise is returned when setting the state, and a boolean when getting
+     *        the present state
+     */
+    audioPosterMode(value) {
+      if (typeof value !== 'boolean' || value === this.audioPosterMode_) {
+        return this.audioPosterMode_;
+      }
+      this.audioPosterMode_ = value;
+      if (value) {
+        if (this.audioOnlyMode()) {
+          const audioOnlyModePromise = this.audioOnlyMode(false);
+          return audioOnlyModePromise.then(() => {
+            // enable audio poster mode after audio only mode is disabled
+            this.enablePosterModeUI_();
+          });
+        }
+        return Promise.resolve().then(() => {
+          // enable audio poster mode
+          this.enablePosterModeUI_();
+        });
+      }
+      return Promise.resolve().then(() => {
+        // disable audio poster mode
+        this.disablePosterModeUI_();
+      });
+    }
+
+    /**
+     * A helper method for adding a {@link TextTrack} to our
+     * {@link TextTrackList}.
+     *
+     * In addition to the W3C settings we allow adding additional info through options.
+     *
+     * @see http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack
+     *
+     * @param {string} [kind]
+     *        the kind of TextTrack you are adding
+     *
+     * @param {string} [label]
+     *        the label to give the TextTrack label
+     *
+     * @param {string} [language]
+     *        the language to set on the TextTrack
+     *
+     * @return {TextTrack|undefined}
+     *         the TextTrack that was added or undefined
+     *         if there is no tech
+     */
+    addTextTrack(kind, label, language) {
+      if (this.tech_) {
+        return this.tech_.addTextTrack(kind, label, language);
+      }
+    }
+
+    /**
+     * Create a remote {@link TextTrack} and an {@link HTMLTrackElement}.
+     *
+     * @param {Object} options
+     *        Options to pass to {@link HTMLTrackElement} during creation. See
+     *        {@link HTMLTrackElement} for object properties that you should use.
+     *
+     * @param {boolean} [manualCleanup=false] if set to true, the TextTrack will not be removed
+     *                                        from the TextTrackList and HtmlTrackElementList
+     *                                        after a source change
+     *
+     * @return { import('./tracks/html-track-element').default }
+     *         the HTMLTrackElement that was created and added
+     *         to the HtmlTrackElementList and the remote
+     *         TextTrackList
+     *
+     */
+    addRemoteTextTrack(options, manualCleanup) {
+      if (this.tech_) {
+        return this.tech_.addRemoteTextTrack(options, manualCleanup);
+      }
+    }
+
+    /**
+     * Remove a remote {@link TextTrack} from the respective
+     * {@link TextTrackList} and {@link HtmlTrackElementList}.
+     *
+     * @param {Object} track
+     *        Remote {@link TextTrack} to remove
+     *
+     * @return {undefined}
+     *         does not return anything
+     */
+    removeRemoteTextTrack(obj = {}) {
+      let {
+        track
+      } = obj;
+      if (!track) {
+        track = obj;
+      }
+
+      // destructure the input into an object with a track argument, defaulting to arguments[0]
+      // default the whole argument to an empty object if nothing was passed in
+
+      if (this.tech_) {
+        return this.tech_.removeRemoteTextTrack(track);
+      }
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object|undefined}
+     *         An object with supported media playback quality metrics or undefined if there
+     *         is no tech or the tech does not support it.
+     */
+    getVideoPlaybackQuality() {
+      return this.techGet_('getVideoPlaybackQuality');
+    }
+
+    /**
+     * Get video width
+     *
+     * @return {number}
+     *         current video width
+     */
+    videoWidth() {
+      return this.tech_ && this.tech_.videoWidth && this.tech_.videoWidth() || 0;
+    }
+
+    /**
+     * Get video height
+     *
+     * @return {number}
+     *         current video height
+     */
+    videoHeight() {
+      return this.tech_ && this.tech_.videoHeight && this.tech_.videoHeight() || 0;
+    }
+
+    /**
+     * Set or get the player's language code.
+     *
+     * Changing the language will trigger
+     * [languagechange]{@link Player#event:languagechange}
+     * which Components can use to update control text.
+     * ClickableComponent will update its control text by default on
+     * [languagechange]{@link Player#event:languagechange}.
+     *
+     * @fires Player#languagechange
+     *
+     * @param {string} [code]
+     *        the language code to set the player to
+     *
+     * @return {string|undefined}
+     *         - The current language code when getting
+     *         - Nothing when setting
+     */
+    language(code) {
+      if (code === undefined) {
+        return this.language_;
+      }
+      if (this.language_ !== String(code).toLowerCase()) {
+        this.language_ = String(code).toLowerCase();
+
+        // during first init, it's possible some things won't be evented
+        if (isEvented(this)) {
+          /**
+          * fires when the player language change
+          *
+          * @event Player#languagechange
+          * @type {Event}
+          */
+          this.trigger('languagechange');
+        }
+      }
+    }
+
+    /**
+     * Get the player's language dictionary
+     * Merge every time, because a newly added plugin might call videojs.addLanguage() at any time
+     * Languages specified directly in the player options have precedence
+     *
+     * @return {Array}
+     *         An array of of supported languages
+     */
+    languages() {
+      return merge$2(Player.prototype.options_.languages, this.languages_);
+    }
+
+    /**
+     * returns a JavaScript object representing the current track
+     * information. **DOES not return it as JSON**
+     *
+     * @return {Object}
+     *         Object representing the current of track info
+     */
+    toJSON() {
+      const options = merge$2(this.options_);
+      const tracks = options.tracks;
+      options.tracks = [];
+      for (let i = 0; i < tracks.length; i++) {
+        let track = tracks[i];
+
+        // deep merge tracks and null out player so no circular references
+        track = merge$2(track);
+        track.player = undefined;
+        options.tracks[i] = track;
+      }
+      return options;
+    }
+
+    /**
+     * Creates a simple modal dialog (an instance of the {@link ModalDialog}
+     * component) that immediately overlays the player with arbitrary
+     * content and removes itself when closed.
+     *
+     * @param {string|Function|Element|Array|null} content
+     *        Same as {@link ModalDialog#content}'s param of the same name.
+     *        The most straight-forward usage is to provide a string or DOM
+     *        element.
+     *
+     * @param {Object} [options]
+     *        Extra options which will be passed on to the {@link ModalDialog}.
+     *
+     * @return {ModalDialog}
+     *         the {@link ModalDialog} that was created
+     */
+    createModal(content, options) {
+      options = options || {};
+      options.content = content || '';
+      const modal = new ModalDialog(this, options);
+      this.addChild(modal);
+      modal.on('dispose', () => {
+        this.removeChild(modal);
+      });
+      modal.open();
+      return modal;
+    }
+
+    /**
+     * Change breakpoint classes when the player resizes.
+     *
+     * @private
+     */
+    updateCurrentBreakpoint_() {
+      if (!this.responsive()) {
+        return;
+      }
+      const currentBreakpoint = this.currentBreakpoint();
+      const currentWidth = this.currentWidth();
+      for (let i = 0; i < BREAKPOINT_ORDER.length; i++) {
+        const candidateBreakpoint = BREAKPOINT_ORDER[i];
+        const maxWidth = this.breakpoints_[candidateBreakpoint];
+        if (currentWidth <= maxWidth) {
+          // The current breakpoint did not change, nothing to do.
+          if (currentBreakpoint === candidateBreakpoint) {
+            return;
+          }
+
+          // Only remove a class if there is a current breakpoint.
+          if (currentBreakpoint) {
+            this.removeClass(BREAKPOINT_CLASSES[currentBreakpoint]);
+          }
+          this.addClass(BREAKPOINT_CLASSES[candidateBreakpoint]);
+          this.breakpoint_ = candidateBreakpoint;
+          break;
+        }
+      }
+    }
+
+    /**
+     * Removes the current breakpoint.
+     *
+     * @private
+     */
+    removeCurrentBreakpoint_() {
+      const className = this.currentBreakpointClass();
+      this.breakpoint_ = '';
+      if (className) {
+        this.removeClass(className);
+      }
+    }
+
+    /**
+     * Get or set breakpoints on the player.
+     *
+     * Calling this method with an object or `true` will remove any previous
+     * custom breakpoints and start from the defaults again.
+     *
+     * @param  {Object|boolean} [breakpoints]
+     *         If an object is given, it can be used to provide custom
+     *         breakpoints. If `true` is given, will set default breakpoints.
+     *         If this argument is not given, will simply return the current
+     *         breakpoints.
+     *
+     * @param  {number} [breakpoints.tiny]
+     *         The maximum width for the "vjs-layout-tiny" class.
+     *
+     * @param  {number} [breakpoints.xsmall]
+     *         The maximum width for the "vjs-layout-x-small" class.
+     *
+     * @param  {number} [breakpoints.small]
+     *         The maximum width for the "vjs-layout-small" class.
+     *
+     * @param  {number} [breakpoints.medium]
+     *         The maximum width for the "vjs-layout-medium" class.
+     *
+     * @param  {number} [breakpoints.large]
+     *         The maximum width for the "vjs-layout-large" class.
+     *
+     * @param  {number} [breakpoints.xlarge]
+     *         The maximum width for the "vjs-layout-x-large" class.
+     *
+     * @param  {number} [breakpoints.huge]
+     *         The maximum width for the "vjs-layout-huge" class.
+     *
+     * @return {Object}
+     *         An object mapping breakpoint names to maximum width values.
+     */
+    breakpoints(breakpoints) {
+      // Used as a getter.
+      if (breakpoints === undefined) {
+        return Object.assign(this.breakpoints_);
+      }
+      this.breakpoint_ = '';
+      this.breakpoints_ = Object.assign({}, DEFAULT_BREAKPOINTS, breakpoints);
+
+      // When breakpoint definitions change, we need to update the currently
+      // selected breakpoint.
+      this.updateCurrentBreakpoint_();
+
+      // Clone the breakpoints before returning.
+      return Object.assign(this.breakpoints_);
+    }
+
+    /**
+     * Get or set a flag indicating whether or not this player should adjust
+     * its UI based on its dimensions.
+     *
+     * @param  {boolean} [value]
+     *         Should be `true` if the player should adjust its UI based on its
+     *         dimensions; otherwise, should be `false`.
+     *
+     * @return {boolean|undefined}
+     *         Will be `true` if this player should adjust its UI based on its
+     *         dimensions; otherwise, will be `false`.
+     *         Nothing if setting
+     */
+    responsive(value) {
+      // Used as a getter.
+      if (value === undefined) {
+        return this.responsive_;
+      }
+      value = Boolean(value);
+      const current = this.responsive_;
+
+      // Nothing changed.
+      if (value === current) {
+        return;
+      }
+
+      // The value actually changed, set it.
+      this.responsive_ = value;
+
+      // Start listening for breakpoints and set the initial breakpoint if the
+      // player is now responsive.
+      if (value) {
+        this.on('playerresize', this.boundUpdateCurrentBreakpoint_);
+        this.updateCurrentBreakpoint_();
+
+        // Stop listening for breakpoints if the player is no longer responsive.
+      } else {
+        this.off('playerresize', this.boundUpdateCurrentBreakpoint_);
+        this.removeCurrentBreakpoint_();
+      }
+      return value;
+    }
+
+    /**
+     * Get current breakpoint name, if any.
+     *
+     * @return {string}
+     *         If there is currently a breakpoint set, returns a the key from the
+     *         breakpoints object matching it. Otherwise, returns an empty string.
+     */
+    currentBreakpoint() {
+      return this.breakpoint_;
+    }
+
+    /**
+     * Get the current breakpoint class name.
+     *
+     * @return {string}
+     *         The matching class name (e.g. `"vjs-layout-tiny"` or
+     *         `"vjs-layout-large"`) for the current breakpoint. Empty string if
+     *         there is no current breakpoint.
+     */
+    currentBreakpointClass() {
+      return BREAKPOINT_CLASSES[this.breakpoint_] || '';
+    }
+
+    /**
+     * An object that describes a single piece of media.
+     *
+     * Properties that are not part of this type description will be retained; so,
+     * this can be viewed as a generic metadata storage mechanism as well.
+     *
+     * @see      {@link https://wicg.github.io/mediasession/#the-mediametadata-interface}
+     * @typedef  {Object} Player~MediaObject
+     *
+     * @property {string} [album]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {string} [artist]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {Object[]} [artwork]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API. If not specified, will be populated via the `poster`, if
+     *           available.
+     *
+     * @property {string} [poster]
+     *           URL to an image that will display before playback.
+     *
+     * @property {Tech~SourceObject|Tech~SourceObject[]|string} [src]
+     *           A single source object, an array of source objects, or a string
+     *           referencing a URL to a media source. It is _highly recommended_
+     *           that an object or array of objects is used here, so that source
+     *           selection algorithms can take the `type` into account.
+     *
+     * @property {string} [title]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {Object[]} [textTracks]
+     *           An array of objects to be used to create text tracks, following
+     *           the {@link https://www.w3.org/TR/html50/embedded-content-0.html#the-track-element|native track element format}.
+     *           For ease of removal, these will be created as "remote" text
+     *           tracks and set to automatically clean up on source changes.
+     *
+     *           These objects may have properties like `src`, `kind`, `label`,
+     *           and `language`, see {@link Tech#createRemoteTextTrack}.
+     */
+
+    /**
+     * Populate the player using a {@link Player~MediaObject|MediaObject}.
+     *
+     * @param  {Player~MediaObject} media
+     *         A media object.
+     *
+     * @param  {Function} ready
+     *         A callback to be called when the player is ready.
+     */
+    loadMedia(media, ready) {
+      if (!media || typeof media !== 'object') {
+        return;
+      }
+      const crossOrigin = this.crossOrigin();
+      this.reset();
+
+      // Clone the media object so it cannot be mutated from outside.
+      this.cache_.media = merge$2(media);
+      const {
+        artist,
+        artwork,
+        description,
+        poster,
+        src,
+        textTracks,
+        title
+      } = this.cache_.media;
+
+      // If `artwork` is not given, create it using `poster`.
+      if (!artwork && poster) {
+        this.cache_.media.artwork = [{
+          src: poster,
+          type: getMimetype(poster)
+        }];
+      }
+      if (crossOrigin) {
+        this.crossOrigin(crossOrigin);
+      }
+      if (src) {
+        this.src(src);
+      }
+      if (poster) {
+        this.poster(poster);
+      }
+      if (Array.isArray(textTracks)) {
+        textTracks.forEach(tt => this.addRemoteTextTrack(tt, false));
+      }
+      if (this.titleBar) {
+        this.titleBar.update({
+          title,
+          description: description || artist || ''
+        });
+      }
+      this.ready(ready);
+    }
+
+    /**
+     * Get a clone of the current {@link Player~MediaObject} for this player.
+     *
+     * If the `loadMedia` method has not been used, will attempt to return a
+     * {@link Player~MediaObject} based on the current state of the player.
+     *
+     * @return {Player~MediaObject}
+     */
+    getMedia() {
+      if (!this.cache_.media) {
+        const poster = this.poster();
+        const src = this.currentSources();
+        const textTracks = Array.prototype.map.call(this.remoteTextTracks(), tt => ({
+          kind: tt.kind,
+          label: tt.label,
+          language: tt.language,
+          src: tt.src
+        }));
+        const media = {
+          src,
+          textTracks
+        };
+        if (poster) {
+          media.poster = poster;
+          media.artwork = [{
+            src: media.poster,
+            type: getMimetype(media.poster)
+          }];
+        }
+        return media;
+      }
+      return merge$2(this.cache_.media);
+    }
+
+    /**
+     * Gets tag settings
+     *
+     * @param {Element} tag
+     *        The player tag
+     *
+     * @return {Object}
+     *         An object containing all of the settings
+     *         for a player tag
+     */
+    static getTagSettings(tag) {
+      const baseOptions = {
+        sources: [],
+        tracks: []
+      };
+      const tagOptions = getAttributes(tag);
+      const dataSetup = tagOptions['data-setup'];
+      if (hasClass(tag, 'vjs-fill')) {
+        tagOptions.fill = true;
+      }
+      if (hasClass(tag, 'vjs-fluid')) {
+        tagOptions.fluid = true;
+      }
+
+      // Check if data-setup attr exists.
+      if (dataSetup !== null) {
+        // Parse options JSON
+        // If empty string, make it a parsable json object.
+        const [err, data] = tuple(dataSetup || '{}');
+        if (err) {
+          log$1.error(err);
+        }
+        Object.assign(tagOptions, data);
+      }
+      Object.assign(baseOptions, tagOptions);
+
+      // Get tag children settings
+      if (tag.hasChildNodes()) {
+        const children = tag.childNodes;
+        for (let i = 0, j = children.length; i < j; i++) {
+          const child = children[i];
+          // Change case needed: http://ejohn.org/blog/nodename-case-sensitivity/
+          const childName = child.nodeName.toLowerCase();
+          if (childName === 'source') {
+            baseOptions.sources.push(getAttributes(child));
+          } else if (childName === 'track') {
+            baseOptions.tracks.push(getAttributes(child));
+          }
+        }
+      }
+      return baseOptions;
+    }
+
+    /**
+     * Set debug mode to enable/disable logs at info level.
+     *
+     * @param {boolean} enabled
+     * @fires Player#debugon
+     * @fires Player#debugoff
+     * @return {boolean|undefined}
+     */
+    debug(enabled) {
+      if (enabled === undefined) {
+        return this.debugEnabled_;
+      }
+      if (enabled) {
+        this.trigger('debugon');
+        this.previousLogLevel_ = this.log.level;
+        this.log.level('debug');
+        this.debugEnabled_ = true;
+      } else {
+        this.trigger('debugoff');
+        this.log.level(this.previousLogLevel_);
+        this.previousLogLevel_ = undefined;
+        this.debugEnabled_ = false;
+      }
+    }
+
+    /**
+     * Set or get current playback rates.
+     * Takes an array and updates the playback rates menu with the new items.
+     * Pass in an empty array to hide the menu.
+     * Values other than arrays are ignored.
+     *
+     * @fires Player#playbackrateschange
+     * @param {number[]} [newRates]
+     *                   The new rates that the playback rates menu should update to.
+     *                   An empty array will hide the menu
+     * @return {number[]} When used as a getter will return the current playback rates
+     */
+    playbackRates(newRates) {
+      if (newRates === undefined) {
+        return this.cache_.playbackRates;
+      }
+
+      // ignore any value that isn't an array
+      if (!Array.isArray(newRates)) {
+        return;
+      }
+
+      // ignore any arrays that don't only contain numbers
+      if (!newRates.every(rate => typeof rate === 'number')) {
+        return;
+      }
+      this.cache_.playbackRates = newRates;
+
+      /**
+      * fires when the playback rates in a player are changed
+      *
+      * @event Player#playbackrateschange
+      * @type {Event}
+      */
+      this.trigger('playbackrateschange');
+    }
+  }
+
+  /**
+   * Get the {@link VideoTrackList}
+   *
+   * @link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist
+   *
+   * @return {VideoTrackList}
+   *         the current video track list
+   *
+   * @method Player.prototype.videoTracks
+   */
+
+  /**
+   * Get the {@link AudioTrackList}
+   *
+   * @link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist
+   *
+   * @return {AudioTrackList}
+   *         the current audio track list
+   *
+   * @method Player.prototype.audioTracks
+   */
+
+  /**
+   * Get the {@link TextTrackList}
+   *
+   * @link http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-texttracks
+   *
+   * @return {TextTrackList}
+   *         the current text track list
+   *
+   * @method Player.prototype.textTracks
+   */
+
+  /**
+   * Get the remote {@link TextTrackList}
+   *
+   * @return {TextTrackList}
+   *         The current remote text track list
+   *
+   * @method Player.prototype.remoteTextTracks
+   */
+
+  /**
+   * Get the remote {@link HtmlTrackElementList} tracks.
+   *
+   * @return {HtmlTrackElementList}
+   *         The current remote text track element list
+   *
+   * @method Player.prototype.remoteTextTrackEls
+   */
+
+  ALL.names.forEach(function (name) {
+    const props = ALL[name];
+    Player.prototype[props.getterName] = function () {
+      if (this.tech_) {
+        return this.tech_[props.getterName]();
+      }
+
+      // if we have not yet loadTech_, we create {video,audio,text}Tracks_
+      // these will be passed to the tech during loading
+      this[props.privateName] = this[props.privateName] || new props.ListClass();
+      return this[props.privateName];
+    };
+  });
+
+  /**
+   * Get or set the `Player`'s crossorigin option. For the HTML5 player, this
+   * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+   * behavior.
+   *
+   * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+   *
+   * @param {string} [value]
+   *        The value to set the `Player`'s crossorigin to. If an argument is
+   *        given, must be one of `anonymous` or `use-credentials`.
+   *
+   * @return {string|undefined}
+   *         - The current crossorigin value of the `Player` when getting.
+   *         - undefined when setting
+   */
+  Player.prototype.crossorigin = Player.prototype.crossOrigin;
+
+  /**
+   * Global enumeration of players.
+   *
+   * The keys are the player IDs and the values are either the {@link Player}
+   * instance or `null` for disposed players.
+   *
+   * @type {Object}
+   */
+  Player.players = {};
+  const navigator = window.navigator;
+
+  /*
+   * Player instance options, surfaced using options
+   * options = Player.prototype.options_
+   * Make changes in options, not here.
+   *
+   * @type {Object}
+   * @private
+   */
+  Player.prototype.options_ = {
+    // Default order of fallback technology
+    techOrder: Tech.defaultTechOrder_,
+    html5: {},
+    // enable sourceset by default
+    enableSourceset: true,
+    // default inactivity timeout
+    inactivityTimeout: 2000,
+    // default playback rates
+    playbackRates: [],
+    // Add playback rate selection by adding rates
+    // 'playbackRates': [0.5, 1, 1.5, 2],
+    liveui: false,
+    // Included control sets
+    children: ['mediaLoader', 'posterImage', 'titleBar', 'textTrackDisplay', 'loadingSpinner', 'bigPlayButton', 'liveTracker', 'controlBar', 'errorDisplay', 'textTrackSettings', 'resizeManager'],
+    language: navigator && (navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language) || 'en',
+    // locales and their language translations
+    languages: {},
+    // Default message to show when a video cannot be played.
+    notSupportedMessage: 'No compatible source was found for this media.',
+    normalizeAutoplay: false,
+    fullscreen: {
+      options: {
+        navigationUI: 'hide'
+      }
+    },
+    breakpoints: {},
+    responsive: false,
+    audioOnlyMode: false,
+    audioPosterMode: false,
+    // Default smooth seeking to false
+    enableSmoothSeeking: false
+  };
+  TECH_EVENTS_RETRIGGER.forEach(function (event) {
+    Player.prototype[`handleTech${toTitleCase$1(event)}_`] = function () {
+      return this.trigger(event);
+    };
+  });
+
+  /**
+   * Fired when the player has initial duration and dimension information
+   *
+   * @event Player#loadedmetadata
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the player has downloaded data at the current playback position
+   *
+   * @event Player#loadeddata
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the current playback position has changed *
+   * During playback this is fired every 15-250 milliseconds, depending on the
+   * playback technology in use.
+   *
+   * @event Player#timeupdate
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the volume changes
+   *
+   * @event Player#volumechange
+   * @type {Event}
+   */
+
+  /**
+   * Reports whether or not a player has a plugin available.
+   *
+   * This does not report whether or not the plugin has ever been initialized
+   * on this player. For that, [usingPlugin]{@link Player#usingPlugin}.
+   *
+   * @method Player#hasPlugin
+   * @param  {string}  name
+   *         The name of a plugin.
+   *
+   * @return {boolean}
+   *         Whether or not this player has the requested plugin available.
+   */
+
+  /**
+   * Reports whether or not a player is using a plugin by name.
+   *
+   * For basic plugins, this only reports whether the plugin has _ever_ been
+   * initialized on this player.
+   *
+   * @method Player#usingPlugin
+   * @param  {string} name
+   *         The name of a plugin.
+   *
+   * @return {boolean}
+   *         Whether or not this player is using the requested plugin.
+   */
+
+  Component$1.registerComponent('Player', Player);
+
+  /**
+   * @file plugin.js
+   */
+
+  /**
+   * The base plugin name.
+   *
+   * @private
+   * @constant
+   * @type {string}
+   */
+  const BASE_PLUGIN_NAME = 'plugin';
+
+  /**
+   * The key on which a player's active plugins cache is stored.
+   *
+   * @private
+   * @constant
+   * @type     {string}
+   */
+  const PLUGIN_CACHE_KEY = 'activePlugins_';
+
+  /**
+   * Stores registered plugins in a private space.
+   *
+   * @private
+   * @type    {Object}
+   */
+  const pluginStorage = {};
+
+  /**
+   * Reports whether or not a plugin has been registered.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of a plugin.
+   *
+   * @return {boolean}
+   *          Whether or not the plugin has been registered.
+   */
+  const pluginExists = name => pluginStorage.hasOwnProperty(name);
+
+  /**
+   * Get a single registered plugin by name.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of a plugin.
+   *
+   * @return {typeof Plugin|Function|undefined}
+   *          The plugin (or undefined).
+   */
+  const getPlugin = name => pluginExists(name) ? pluginStorage[name] : undefined;
+
+  /**
+   * Marks a plugin as "active" on a player.
+   *
+   * Also, ensures that the player has an object for tracking active plugins.
+   *
+   * @private
+   * @param   {Player} player
+   *          A Video.js player instance.
+   *
+   * @param   {string} name
+   *          The name of a plugin.
+   */
+  const markPluginAsActive = (player, name) => {
+    player[PLUGIN_CACHE_KEY] = player[PLUGIN_CACHE_KEY] || {};
+    player[PLUGIN_CACHE_KEY][name] = true;
+  };
+
+  /**
+   * Triggers a pair of plugin setup events.
+   *
+   * @private
+   * @param  {Player} player
+   *         A Video.js player instance.
+   *
+   * @param  {PluginEventHash} hash
+   *         A plugin event hash.
+   *
+   * @param  {boolean} [before]
+   *         If true, prefixes the event name with "before". In other words,
+   *         use this to trigger "beforepluginsetup" instead of "pluginsetup".
+   */
+  const triggerSetupEvent = (player, hash, before) => {
+    const eventName = (before ? 'before' : '') + 'pluginsetup';
+    player.trigger(eventName, hash);
+    player.trigger(eventName + ':' + hash.name, hash);
+  };
+
+  /**
+   * Takes a basic plugin function and returns a wrapper function which marks
+   * on the player that the plugin has been activated.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of the plugin.
+   *
+   * @param   {Function} plugin
+   *          The basic plugin.
+   *
+   * @return {Function}
+   *          A wrapper function for the given plugin.
+   */
+  const createBasicPlugin = function (name, plugin) {
+    const basicPluginWrapper = function () {
+      // We trigger the "beforepluginsetup" and "pluginsetup" events on the player
+      // regardless, but we want the hash to be consistent with the hash provided
+      // for advanced plugins.
+      //
+      // The only potentially counter-intuitive thing here is the `instance` in
+      // the "pluginsetup" event is the value returned by the `plugin` function.
+      triggerSetupEvent(this, {
+        name,
+        plugin,
+        instance: null
+      }, true);
+      const instance = plugin.apply(this, arguments);
+      markPluginAsActive(this, name);
+      triggerSetupEvent(this, {
+        name,
+        plugin,
+        instance
+      });
+      return instance;
+    };
+    Object.keys(plugin).forEach(function (prop) {
+      basicPluginWrapper[prop] = plugin[prop];
+    });
+    return basicPluginWrapper;
+  };
+
+  /**
+   * Takes a plugin sub-class and returns a factory function for generating
+   * instances of it.
+   *
+   * This factory function will replace itself with an instance of the requested
+   * sub-class of Plugin.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of the plugin.
+   *
+   * @param   {Plugin} PluginSubClass
+   *          The advanced plugin.
+   *
+   * @return {Function}
+   */
+  const createPluginFactory = (name, PluginSubClass) => {
+    // Add a `name` property to the plugin prototype so that each plugin can
+    // refer to itself by name.
+    PluginSubClass.prototype.name = name;
+    return function (...args) {
+      triggerSetupEvent(this, {
+        name,
+        plugin: PluginSubClass,
+        instance: null
+      }, true);
+      const instance = new PluginSubClass(...[this, ...args]);
+
+      // The plugin is replaced by a function that returns the current instance.
+      this[name] = () => instance;
+      triggerSetupEvent(this, instance.getEventHash());
+      return instance;
+    };
+  };
+
+  /**
+   * Parent class for all advanced plugins.
+   *
+   * @mixes   module:evented~EventedMixin
+   * @mixes   module:stateful~StatefulMixin
+   * @fires   Player#beforepluginsetup
+   * @fires   Player#beforepluginsetup:$name
+   * @fires   Player#pluginsetup
+   * @fires   Player#pluginsetup:$name
+   * @listens Player#dispose
+   * @throws  {Error}
+   *          If attempting to instantiate the base {@link Plugin} class
+   *          directly instead of via a sub-class.
+   */
+  class Plugin {
+    /**
+     * Creates an instance of this class.
+     *
+     * Sub-classes should call `super` to ensure plugins are properly initialized.
+     *
+     * @param {Player} player
+     *        A Video.js player instance.
+     */
+    constructor(player) {
+      if (this.constructor === Plugin) {
+        throw new Error('Plugin must be sub-classed; not directly instantiated.');
+      }
+      this.player = player;
+      if (!this.log) {
+        this.log = this.player.log.createLogger(this.name);
+      }
+
+      // Make this object evented, but remove the added `trigger` method so we
+      // use the prototype version instead.
+      evented(this);
+      delete this.trigger;
+      stateful(this, this.constructor.defaultState);
+      markPluginAsActive(player, this.name);
+
+      // Auto-bind the dispose method so we can use it as a listener and unbind
+      // it later easily.
+      this.dispose = this.dispose.bind(this);
+
+      // If the player is disposed, dispose the plugin.
+      player.on('dispose', this.dispose);
+    }
+
+    /**
+     * Get the version of the plugin that was set on <pluginName>.VERSION
+     */
+    version() {
+      return this.constructor.VERSION;
+    }
+
+    /**
+     * Each event triggered by plugins includes a hash of additional data with
+     * conventional properties.
+     *
+     * This returns that object or mutates an existing hash.
+     *
+     * @param   {Object} [hash={}]
+     *          An object to be used as event an event hash.
+     *
+     * @return {PluginEventHash}
+     *          An event hash object with provided properties mixed-in.
+     */
+    getEventHash(hash = {}) {
+      hash.name = this.name;
+      hash.plugin = this.constructor;
+      hash.instance = this;
+      return hash;
+    }
+
+    /**
+     * Triggers an event on the plugin object and overrides
+     * {@link module:evented~EventedMixin.trigger|EventedMixin.trigger}.
+     *
+     * @param   {string|Object} event
+     *          An event type or an object with a type property.
+     *
+     * @param   {Object} [hash={}]
+     *          Additional data hash to merge with a
+     *          {@link PluginEventHash|PluginEventHash}.
+     *
+     * @return {boolean}
+     *          Whether or not default was prevented.
+     */
+    trigger(event, hash = {}) {
+      return trigger(this.eventBusEl_, event, this.getEventHash(hash));
+    }
+
+    /**
+     * Handles "statechanged" events on the plugin. No-op by default, override by
+     * subclassing.
+     *
+     * @abstract
+     * @param    {Event} e
+     *           An event object provided by a "statechanged" event.
+     *
+     * @param    {Object} e.changes
+     *           An object describing changes that occurred with the "statechanged"
+     *           event.
+     */
+    handleStateChanged(e) {}
+
+    /**
+     * Disposes a plugin.
+     *
+     * Subclasses can override this if they want, but for the sake of safety,
+     * it's probably best to subscribe the "dispose" event.
+     *
+     * @fires Plugin#dispose
+     */
+    dispose() {
+      const {
+        name,
+        player
+      } = this;
+
+      /**
+       * Signals that a advanced plugin is about to be disposed.
+       *
+       * @event Plugin#dispose
+       * @type  {Event}
+       */
+      this.trigger('dispose');
+      this.off();
+      player.off('dispose', this.dispose);
+
+      // Eliminate any possible sources of leaking memory by clearing up
+      // references between the player and the plugin instance and nulling out
+      // the plugin's state and replacing methods with a function that throws.
+      player[PLUGIN_CACHE_KEY][name] = false;
+      this.player = this.state = null;
+
+      // Finally, replace the plugin name on the player with a new factory
+      // function, so that the plugin is ready to be set up again.
+      player[name] = createPluginFactory(name, pluginStorage[name]);
+    }
+
+    /**
+     * Determines if a plugin is a basic plugin (i.e. not a sub-class of `Plugin`).
+     *
+     * @param   {string|Function} plugin
+     *          If a string, matches the name of a plugin. If a function, will be
+     *          tested directly.
+     *
+     * @return {boolean}
+     *          Whether or not a plugin is a basic plugin.
+     */
+    static isBasic(plugin) {
+      const p = typeof plugin === 'string' ? getPlugin(plugin) : plugin;
+      return typeof p === 'function' && !Plugin.prototype.isPrototypeOf(p.prototype);
+    }
+
+    /**
+     * Register a Video.js plugin.
+     *
+     * @param   {string} name
+     *          The name of the plugin to be registered. Must be a string and
+     *          must not match an existing plugin or a method on the `Player`
+     *          prototype.
+     *
+     * @param   {typeof Plugin|Function} plugin
+     *          A sub-class of `Plugin` or a function for basic plugins.
+     *
+     * @return {typeof Plugin|Function}
+     *          For advanced plugins, a factory function for that plugin. For
+     *          basic plugins, a wrapper function that initializes the plugin.
+     */
+    static registerPlugin(name, plugin) {
+      if (typeof name !== 'string') {
+        throw new Error(`Illegal plugin name, "${name}", must be a string, was ${typeof name}.`);
+      }
+      if (pluginExists(name)) {
+        log$1.warn(`A plugin named "${name}" already exists. You may want to avoid re-registering plugins!`);
+      } else if (Player.prototype.hasOwnProperty(name)) {
+        throw new Error(`Illegal plugin name, "${name}", cannot share a name with an existing player method!`);
+      }
+      if (typeof plugin !== 'function') {
+        throw new Error(`Illegal plugin for "${name}", must be a function, was ${typeof plugin}.`);
+      }
+      pluginStorage[name] = plugin;
+
+      // Add a player prototype method for all sub-classed plugins (but not for
+      // the base Plugin class).
+      if (name !== BASE_PLUGIN_NAME) {
+        if (Plugin.isBasic(plugin)) {
+          Player.prototype[name] = createBasicPlugin(name, plugin);
+        } else {
+          Player.prototype[name] = createPluginFactory(name, plugin);
+        }
+      }
+      return plugin;
+    }
+
+    /**
+     * De-register a Video.js plugin.
+     *
+     * @param  {string} name
+     *         The name of the plugin to be de-registered. Must be a string that
+     *         matches an existing plugin.
+     *
+     * @throws {Error}
+     *         If an attempt is made to de-register the base plugin.
+     */
+    static deregisterPlugin(name) {
+      if (name === BASE_PLUGIN_NAME) {
+        throw new Error('Cannot de-register base plugin.');
+      }
+      if (pluginExists(name)) {
+        delete pluginStorage[name];
+        delete Player.prototype[name];
+      }
+    }
+
+    /**
+     * Gets an object containing multiple Video.js plugins.
+     *
+     * @param   {Array} [names]
+     *          If provided, should be an array of plugin names. Defaults to _all_
+     *          plugin names.
+     *
+     * @return {Object|undefined}
+     *          An object containing plugin(s) associated with their name(s) or
+     *          `undefined` if no matching plugins exist).
+     */
+    static getPlugins(names = Object.keys(pluginStorage)) {
+      let result;
+      names.forEach(name => {
+        const plugin = getPlugin(name);
+        if (plugin) {
+          result = result || {};
+          result[name] = plugin;
+        }
+      });
+      return result;
+    }
+
+    /**
+     * Gets a plugin's version, if available
+     *
+     * @param   {string} name
+     *          The name of a plugin.
+     *
+     * @return {string}
+     *          The plugin's version or an empty string.
+     */
+    static getPluginVersion(name) {
+      const plugin = getPlugin(name);
+      return plugin && plugin.VERSION || '';
+    }
+  }
+
+  /**
+   * Gets a plugin by name if it exists.
+   *
+   * @static
+   * @method   getPlugin
+   * @memberOf Plugin
+   * @param    {string} name
+   *           The name of a plugin.
+   *
+   * @returns  {typeof Plugin|Function|undefined}
+   *           The plugin (or `undefined`).
+   */
+  Plugin.getPlugin = getPlugin;
+
+  /**
+   * The name of the base plugin class as it is registered.
+   *
+   * @type {string}
+   */
+  Plugin.BASE_PLUGIN_NAME = BASE_PLUGIN_NAME;
+  Plugin.registerPlugin(BASE_PLUGIN_NAME, Plugin);
+
+  /**
+   * Documented in player.js
+   *
+   * @ignore
+   */
+  Player.prototype.usingPlugin = function (name) {
+    return !!this[PLUGIN_CACHE_KEY] && this[PLUGIN_CACHE_KEY][name] === true;
+  };
+
+  /**
+   * Documented in player.js
+   *
+   * @ignore
+   */
+  Player.prototype.hasPlugin = function (name) {
+    return !!pluginExists(name);
+  };
+
+  /**
+   * Signals that a plugin is about to be set up on a player.
+   *
+   * @event    Player#beforepluginsetup
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin is about to be set up on a player - by name. The name
+   * is the name of the plugin.
+   *
+   * @event    Player#beforepluginsetup:$name
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin has just been set up on a player.
+   *
+   * @event    Player#pluginsetup
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin has just been set up on a player - by name. The name
+   * is the name of the plugin.
+   *
+   * @event    Player#pluginsetup:$name
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * @typedef  {Object} PluginEventHash
+   *
+   * @property {string} instance
+   *           For basic plugins, the return value of the plugin function. For
+   *           advanced plugins, the plugin instance on which the event is fired.
+   *
+   * @property {string} name
+   *           The name of the plugin.
+   *
+   * @property {string} plugin
+   *           For basic plugins, the plugin function. For advanced plugins, the
+   *           plugin class/constructor.
+   */
+
+  /**
+   * @file deprecate.js
+   * @module deprecate
+   */
+
+  /**
+   * Decorate a function with a deprecation message the first time it is called.
+   *
+   * @param  {string}   message
+   *         A deprecation message to log the first time the returned function
+   *         is called.
+   *
+   * @param  {Function} fn
+   *         The function to be deprecated.
+   *
+   * @return {Function}
+   *         A wrapper function that will log a deprecation warning the first
+   *         time it is called. The return value will be the return value of
+   *         the wrapped function.
+   */
+  function deprecate(message, fn) {
+    let warned = false;
+    return function (...args) {
+      if (!warned) {
+        log$1.warn(message);
+      }
+      warned = true;
+      return fn.apply(this, args);
+    };
+  }
+
+  /**
+   * Internal function used to mark a function as deprecated in the next major
+   * version with consistent messaging.
+   *
+   * @param  {number}   major   The major version where it will be removed
+   * @param  {string}   oldName The old function name
+   * @param  {string}   newName The new function name
+   * @param  {Function} fn      The function to deprecate
+   * @return {Function}         The decorated function
+   */
+  function deprecateForMajor(major, oldName, newName, fn) {
+    return deprecate(`${oldName} is deprecated and will be removed in ${major}.0; please use ${newName} instead.`, fn);
+  }
+
+  var VjsErrors = {
+    UnsupportedSidxContainer: 'unsupported-sidx-container-error',
+    DashManifestSidxParsingError: 'dash-manifest-sidx-parsing-error',
+    HlsPlaylistRequestError: 'hls-playlist-request-error',
+    SegmentUnsupportedMediaFormat: 'segment-unsupported-media-format-error',
+    UnsupportedMediaInitialization: 'unsupported-media-initialization-error',
+    SegmentSwitchError: 'segment-switch-error',
+    SegmentExceedsSourceBufferQuota: 'segment-exceeds-source-buffer-quota-error',
+    SegmentAppendError: 'segment-append-error',
+    VttLoadError: 'vtt-load-error',
+    VttCueParsingError: 'vtt-cue-parsing-error',
+    // Errors used in contrib-ads:
+    AdsBeforePrerollError: 'ads-before-preroll-error',
+    AdsPrerollError: 'ads-preroll-error',
+    AdsMidrollError: 'ads-midroll-error',
+    AdsPostrollError: 'ads-postroll-error',
+    AdsMacroReplacementFailed: 'ads-macro-replacement-failed',
+    AdsResumeContentFailed: 'ads-resume-content-failed',
+    // Errors used in contrib-eme:
+    EMEFailedToRequestMediaKeySystemAccess: 'eme-failed-request-media-key-system-access',
+    EMEFailedToCreateMediaKeys: 'eme-failed-create-media-keys',
+    EMEFailedToAttachMediaKeysToVideoElement: 'eme-failed-attach-media-keys-to-video',
+    EMEFailedToCreateMediaKeySession: 'eme-failed-create-media-key-session',
+    EMEFailedToSetServerCertificate: 'eme-failed-set-server-certificate',
+    EMEFailedToGenerateLicenseRequest: 'eme-failed-generate-license-request',
+    EMEFailedToUpdateSessionWithReceivedLicenseKeys: 'eme-failed-update-session',
+    EMEFailedToCloseSession: 'eme-failed-close-session',
+    EMEFailedToRemoveKeysFromSession: 'eme-failed-remove-keys',
+    EMEFailedToLoadSessionBySessionId: 'eme-failed-load-session'
+  };
+
+  /**
+   * @file video.js
+   * @module videojs
+   */
+
+  /**
+   * Normalize an `id` value by trimming off a leading `#`
+   *
+   * @private
+   * @param   {string} id
+   *          A string, maybe with a leading `#`.
+   *
+   * @return {string}
+   *          The string, without any leading `#`.
+   */
+  const normalizeId = id => id.indexOf('#') === 0 ? id.slice(1) : id;
+
+  /**
+   * A callback that is called when a component is ready. Does not have any
+   * parameters and any callback value will be ignored. See: {@link Component~ReadyCallback}
+   *
+   * @callback ReadyCallback
+   */
+
+  /**
+   * The `videojs()` function doubles as the main function for users to create a
+   * {@link Player} instance as well as the main library namespace.
+   *
+   * It can also be used as a getter for a pre-existing {@link Player} instance.
+   * However, we _strongly_ recommend using `videojs.getPlayer()` for this
+   * purpose because it avoids any potential for unintended initialization.
+   *
+   * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+   * of our JSDoc template, we cannot properly document this as both a function
+   * and a namespace, so its function signature is documented here.
+   *
+   * #### Arguments
+   * ##### id
+   * string|Element, **required**
+   *
+   * Video element or video element ID.
+   *
+   * ##### options
+   * Object, optional
+   *
+   * Options object for providing settings.
+   * See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+   *
+   * ##### ready
+   * {@link Component~ReadyCallback}, optional
+   *
+   * A function to be called when the {@link Player} and {@link Tech} are ready.
+   *
+   * #### Return Value
+   *
+   * The `videojs()` function returns a {@link Player} instance.
+   *
+   * @namespace
+   *
+   * @borrows AudioTrack as AudioTrack
+   * @borrows Component.getComponent as getComponent
+   * @borrows module:events.on as on
+   * @borrows module:events.one as one
+   * @borrows module:events.off as off
+   * @borrows module:events.trigger as trigger
+   * @borrows EventTarget as EventTarget
+   * @borrows module:middleware.use as use
+   * @borrows Player.players as players
+   * @borrows Plugin.registerPlugin as registerPlugin
+   * @borrows Plugin.deregisterPlugin as deregisterPlugin
+   * @borrows Plugin.getPlugins as getPlugins
+   * @borrows Plugin.getPlugin as getPlugin
+   * @borrows Plugin.getPluginVersion as getPluginVersion
+   * @borrows Tech.getTech as getTech
+   * @borrows Tech.registerTech as registerTech
+   * @borrows TextTrack as TextTrack
+   * @borrows VideoTrack as VideoTrack
+   *
+   * @param  {string|Element} id
+   *         Video element or video element ID.
+   *
+   * @param  {Object} [options]
+   *         Options object for providing settings.
+   *         See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+   *
+   * @param  {ReadyCallback} [ready]
+   *         A function to be called when the {@link Player} and {@link Tech} are
+   *         ready.
+   *
+   * @return {Player}
+   *         The `videojs()` function returns a {@link Player|Player} instance.
+   */
+  function videojs(id, options, ready) {
+    let player = videojs.getPlayer(id);
+    if (player) {
+      if (options) {
+        log$1.warn(`Player "${id}" is already initialised. Options will not be applied.`);
+      }
+      if (ready) {
+        player.ready(ready);
+      }
+      return player;
+    }
+    const el = typeof id === 'string' ? $('#' + normalizeId(id)) : id;
+    if (!isEl(el)) {
+      throw new TypeError('The element or ID supplied is not valid. (videojs)');
+    }
+
+    // document.body.contains(el) will only check if el is contained within that one document.
+    // This causes problems for elements in iframes.
+    // Instead, use the element's ownerDocument instead of the global document.
+    // This will make sure that the element is indeed in the dom of that document.
+    // Additionally, check that the document in question has a default view.
+    // If the document is no longer attached to the dom, the defaultView of the document will be null.
+    // If element is inside Shadow DOM (e.g. is part of a Custom element), ownerDocument.body
+    // always returns false. Instead, use the Shadow DOM root.
+    const inShadowDom = 'getRootNode' in el ? el.getRootNode() instanceof window.ShadowRoot : false;
+    const rootNode = inShadowDom ? el.getRootNode() : el.ownerDocument.body;
+    if (!el.ownerDocument.defaultView || !rootNode.contains(el)) {
+      log$1.warn('The element supplied is not included in the DOM');
+    }
+    options = options || {};
+
+    // Store a copy of the el before modification, if it is to be restored in destroy()
+    // If div ingest, store the parent div
+    if (options.restoreEl === true) {
+      options.restoreEl = (el.parentNode && el.parentNode.hasAttribute('data-vjs-player') ? el.parentNode : el).cloneNode(true);
+    }
+    hooks('beforesetup').forEach(hookFunction => {
+      const opts = hookFunction(el, merge$2(options));
+      if (!isObject$1(opts) || Array.isArray(opts)) {
+        log$1.error('please return an object in beforesetup hooks');
+        return;
+      }
+      options = merge$2(options, opts);
+    });
+
+    // We get the current "Player" component here in case an integration has
+    // replaced it with a custom player.
+    const PlayerComponent = Component$1.getComponent('Player');
+    player = new PlayerComponent(el, options, ready);
+    hooks('setup').forEach(hookFunction => hookFunction(player));
+    return player;
+  }
+  videojs.hooks_ = hooks_;
+  videojs.hooks = hooks;
+  videojs.hook = hook;
+  videojs.hookOnce = hookOnce;
+  videojs.removeHook = removeHook;
+
+  // Add default styles
+  if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true && isReal()) {
+    let style = $('.vjs-styles-defaults');
+    if (!style) {
+      style = createStyleElement('vjs-styles-defaults');
+      const head = $('head');
+      if (head) {
+        head.insertBefore(style, head.firstChild);
+      }
+      setTextContent(style, `
+      .video-js {
+        width: 300px;
+        height: 150px;
+      }
+
+      .vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: 56.25%
+      }
+    `);
+    }
+  }
+
+  // Run Auto-load players
+  // You have to wait at least once in case this script is loaded after your
+  // video in the DOM (weird behavior only with minified version)
+  autoSetupTimeout(1, videojs);
+
+  /**
+   * Current Video.js version. Follows [semantic versioning](https://semver.org/).
+   *
+   * @type {string}
+   */
+  videojs.VERSION = version$5;
+
+  /**
+   * The global options object. These are the settings that take effect
+   * if no overrides are specified when the player is created.
+   *
+   * @type {Object}
+   */
+  videojs.options = Player.prototype.options_;
+
+  /**
+   * Get an object with the currently created players, keyed by player ID
+   *
+   * @return {Object}
+   *         The created players
+   */
+  videojs.getPlayers = () => Player.players;
+
+  /**
+   * Get a single player based on an ID or DOM element.
+   *
+   * This is useful if you want to check if an element or ID has an associated
+   * Video.js player, but not create one if it doesn't.
+   *
+   * @param   {string|Element} id
+   *          An HTML element - `<video>`, `<audio>`, or `<video-js>` -
+   *          or a string matching the `id` of such an element.
+   *
+   * @return {Player|undefined}
+   *          A player instance or `undefined` if there is no player instance
+   *          matching the argument.
+   */
+  videojs.getPlayer = id => {
+    const players = Player.players;
+    let tag;
+    if (typeof id === 'string') {
+      const nId = normalizeId(id);
+      const player = players[nId];
+      if (player) {
+        return player;
+      }
+      tag = $('#' + nId);
+    } else {
+      tag = id;
+    }
+    if (isEl(tag)) {
+      const {
+        player,
+        playerId
+      } = tag;
+
+      // Element may have a `player` property referring to an already created
+      // player instance. If so, return that.
+      if (player || players[playerId]) {
+        return player || players[playerId];
+      }
+    }
+  };
+
+  /**
+   * Returns an array of all current players.
+   *
+   * @return {Array}
+   *         An array of all players. The array will be in the order that
+   *         `Object.keys` provides, which could potentially vary between
+   *         JavaScript engines.
+   *
+   */
+  videojs.getAllPlayers = () =>
+  // Disposed players leave a key with a `null` value, so we need to make sure
+  // we filter those out.
+  Object.keys(Player.players).map(k => Player.players[k]).filter(Boolean);
+  videojs.players = Player.players;
+  videojs.getComponent = Component$1.getComponent;
+
+  /**
+   * Register a component so it can referred to by name. Used when adding to other
+   * components, either through addChild `component.addChild('myComponent')` or through
+   * default children options  `{ children: ['myComponent'] }`.
+   *
+   * > NOTE: You could also just initialize the component before adding.
+   * `component.addChild(new MyComponent());`
+   *
+   * @param {string} name
+   *        The class name of the component
+   *
+   * @param {typeof Component} comp
+   *        The component class
+   *
+   * @return {typeof Component}
+   *         The newly registered component
+   */
+  videojs.registerComponent = (name, comp) => {
+    if (Tech.isTech(comp)) {
+      log$1.warn(`The ${name} tech was registered as a component. It should instead be registered using videojs.registerTech(name, tech)`);
+    }
+    return Component$1.registerComponent.call(Component$1, name, comp);
+  };
+  videojs.getTech = Tech.getTech;
+  videojs.registerTech = Tech.registerTech;
+  videojs.use = use;
+
+  /**
+   * An object that can be returned by a middleware to signify
+   * that the middleware is being terminated.
+   *
+   * @type {object}
+   * @property {object} middleware.TERMINATOR
+   */
+  Object.defineProperty(videojs, 'middleware', {
+    value: {},
+    writeable: false,
+    enumerable: true
+  });
+  Object.defineProperty(videojs.middleware, 'TERMINATOR', {
+    value: TERMINATOR,
+    writeable: false,
+    enumerable: true
+  });
+
+  /**
+   * A reference to the {@link module:browser|browser utility module} as an object.
+   *
+   * @type {Object}
+   * @see  {@link module:browser|browser}
+   */
+  videojs.browser = browser;
+
+  /**
+   * A reference to the {@link module:obj|obj utility module} as an object.
+   *
+   * @type {Object}
+   * @see  {@link module:obj|obj}
+   */
+  videojs.obj = Obj;
+
+  /**
+   * Deprecated reference to the {@link module:obj.merge|merge function}
+   *
+   * @type {Function}
+   * @see {@link module:obj.merge|merge}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.obj.merge instead.
+   */
+  videojs.mergeOptions = deprecateForMajor(9, 'videojs.mergeOptions', 'videojs.obj.merge', merge$2);
+
+  /**
+   * Deprecated reference to the {@link module:obj.defineLazyProperty|defineLazyProperty function}
+   *
+   * @type {Function}
+   * @see {@link module:obj.defineLazyProperty|defineLazyProperty}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.obj.defineLazyProperty instead.
+   */
+  videojs.defineLazyProperty = deprecateForMajor(9, 'videojs.defineLazyProperty', 'videojs.obj.defineLazyProperty', defineLazyProperty);
+
+  /**
+   * Deprecated reference to the {@link module:fn.bind_|fn.bind_ function}
+   *
+   * @type {Function}
+   * @see {@link module:fn.bind_|fn.bind_}
+   * @deprecated Deprecated and will be removed in 9.0. Please use native Function.prototype.bind instead.
+   */
+  videojs.bind = deprecateForMajor(9, 'videojs.bind', 'native Function.prototype.bind', bind_);
+  videojs.registerPlugin = Plugin.registerPlugin;
+  videojs.deregisterPlugin = Plugin.deregisterPlugin;
+
+  /**
+   * Deprecated method to register a plugin with Video.js
+   *
+   * @deprecated Deprecated and will be removed in 9.0. Use videojs.registerPlugin() instead.
+   *
+   * @param {string} name
+   *        The plugin name
+  *
+   * @param {typeof Plugin|Function} plugin
+   *         The plugin sub-class or function
+   *
+   * @return {typeof Plugin|Function}
+   */
+  videojs.plugin = (name, plugin) => {
+    log$1.warn('videojs.plugin() is deprecated; use videojs.registerPlugin() instead');
+    return Plugin.registerPlugin(name, plugin);
+  };
+  videojs.getPlugins = Plugin.getPlugins;
+  videojs.getPlugin = Plugin.getPlugin;
+  videojs.getPluginVersion = Plugin.getPluginVersion;
+
+  /**
+   * Adding languages so that they're available to all players.
+   * Example: `videojs.addLanguage('es', { 'Hello': 'Hola' });`
+   *
+   * @param {string} code
+   *        The language code or dictionary property
+   *
+   * @param {Object} data
+   *        The data values to be translated
+   *
+   * @return {Object}
+   *         The resulting language dictionary object
+   */
+  videojs.addLanguage = function (code, data) {
+    code = ('' + code).toLowerCase();
+    videojs.options.languages = merge$2(videojs.options.languages, {
+      [code]: data
+    });
+    return videojs.options.languages[code];
+  };
+
+  /**
+   * A reference to the {@link module:log|log utility module} as an object.
+   *
+   * @type {Function}
+   * @see  {@link module:log|log}
+   */
+  videojs.log = log$1;
+  videojs.createLogger = createLogger;
+
+  /**
+   * A reference to the {@link module:time|time utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:time|time}
+   */
+  videojs.time = Time;
+
+  /**
+   * Deprecated reference to the {@link module:time.createTimeRanges|createTimeRanges function}
+   *
+   * @type {Function}
+   * @see {@link module:time.createTimeRanges|createTimeRanges}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.createTimeRanges instead.
+   */
+  videojs.createTimeRange = deprecateForMajor(9, 'videojs.createTimeRange', 'videojs.time.createTimeRanges', createTimeRanges$1);
+
+  /**
+   * Deprecated reference to the {@link module:time.createTimeRanges|createTimeRanges function}
+   *
+   * @type {Function}
+   * @see {@link module:time.createTimeRanges|createTimeRanges}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.createTimeRanges instead.
+   */
+  videojs.createTimeRanges = deprecateForMajor(9, 'videojs.createTimeRanges', 'videojs.time.createTimeRanges', createTimeRanges$1);
+
+  /**
+   * Deprecated reference to the {@link module:time.formatTime|formatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.formatTime|formatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.format instead.
+   */
+  videojs.formatTime = deprecateForMajor(9, 'videojs.formatTime', 'videojs.time.formatTime', formatTime);
+
+  /**
+   * Deprecated reference to the {@link module:time.setFormatTime|setFormatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.setFormatTime|setFormatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.setFormat instead.
+   */
+  videojs.setFormatTime = deprecateForMajor(9, 'videojs.setFormatTime', 'videojs.time.setFormatTime', setFormatTime);
+
+  /**
+   * Deprecated reference to the {@link module:time.resetFormatTime|resetFormatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.resetFormatTime|resetFormatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.resetFormat instead.
+   */
+  videojs.resetFormatTime = deprecateForMajor(9, 'videojs.resetFormatTime', 'videojs.time.resetFormatTime', resetFormatTime);
+
+  /**
+   * Deprecated reference to the {@link module:url.parseUrl|Url.parseUrl function}
+   *
+   * @type {Function}
+   * @see {@link module:url.parseUrl|parseUrl}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.url.parseUrl instead.
+   */
+  videojs.parseUrl = deprecateForMajor(9, 'videojs.parseUrl', 'videojs.url.parseUrl', parseUrl);
+
+  /**
+   * Deprecated reference to the {@link module:url.isCrossOrigin|Url.isCrossOrigin function}
+   *
+   * @type {Function}
+   * @see {@link module:url.isCrossOrigin|isCrossOrigin}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.url.isCrossOrigin instead.
+   */
+  videojs.isCrossOrigin = deprecateForMajor(9, 'videojs.isCrossOrigin', 'videojs.url.isCrossOrigin', isCrossOrigin);
+  videojs.EventTarget = EventTarget$2;
+  videojs.any = any;
+  videojs.on = on;
+  videojs.one = one;
+  videojs.off = off;
+  videojs.trigger = trigger;
+
+  /**
+   * A cross-browser XMLHttpRequest wrapper.
+   *
+   * @function
+   * @param    {Object} options
+   *           Settings for the request.
+   *
+   * @return   {XMLHttpRequest|XDomainRequest}
+   *           The request object.
+   *
+   * @see      https://github.com/Raynos/xhr
+   */
+  videojs.xhr = lib;
+  videojs.TextTrack = TextTrack;
+  videojs.AudioTrack = AudioTrack;
+  videojs.VideoTrack = VideoTrack;
+  ['isEl', 'isTextNode', 'createEl', 'hasClass', 'addClass', 'removeClass', 'toggleClass', 'setAttributes', 'getAttributes', 'emptyEl', 'appendContent', 'insertContent'].forEach(k => {
+    videojs[k] = function () {
+      log$1.warn(`videojs.${k}() is deprecated; use videojs.dom.${k}() instead`);
+      return Dom[k].apply(null, arguments);
+    };
+  });
+  videojs.computedStyle = deprecateForMajor(9, 'videojs.computedStyle', 'videojs.dom.computedStyle', computedStyle);
+
+  /**
+   * A reference to the {@link module:dom|DOM utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:dom|dom}
+   */
+  videojs.dom = Dom;
+
+  /**
+   * A reference to the {@link module:fn|fn utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:fn|fn}
+   */
+  videojs.fn = Fn;
+
+  /**
+   * A reference to the {@link module:num|num utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:num|num}
+   */
+  videojs.num = Num;
+
+  /**
+   * A reference to the {@link module:str|str utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:str|str}
+   */
+  videojs.str = Str;
+
+  /**
+   * A reference to the {@link module:url|URL utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:url|url}
+   */
+  videojs.url = Url;
+
+  // The list of possible error types to occur in video.js
+  videojs.Error = VjsErrors;
+
+  createCommonjsModule(function (module, exports) {
+    /*! @name videojs-contrib-quality-levels @version 4.1.0 @license Apache-2.0 */
+    (function (global, factory) {
+      module.exports = factory(videojs) ;
+    })(commonjsGlobal, function (videojs) {
+
+      function _interopDefaultLegacy(e) {
+        return e && typeof e === 'object' && 'default' in e ? e : {
+          'default': e
+        };
+      }
+      var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
+
+      /**
+       * A single QualityLevel.
+       *
+       * interface QualityLevel {
+       *   readonly attribute DOMString id;
+       *            attribute DOMString label;
+       *   readonly attribute long width;
+       *   readonly attribute long height;
+       *   readonly attribute long bitrate;
+       *            attribute boolean enabled;
+       * };
+       *
+       * @class QualityLevel
+       */
+      class QualityLevel {
+        /**
+         * Creates a QualityLevel
+         *
+         * @param {Representation|Object} representation The representation of the quality level
+         * @param {string}   representation.id        Unique id of the QualityLevel
+         * @param {number=}  representation.width     Resolution width of the QualityLevel
+         * @param {number=}  representation.height    Resolution height of the QualityLevel
+         * @param {number}   representation.bandwidth Bitrate of the QualityLevel
+         * @param {number=}  representation.frameRate Frame-rate of the QualityLevel
+         * @param {Function} representation.enabled   Callback to enable/disable QualityLevel
+         */
+        constructor(representation) {
+          let level = this; // eslint-disable-line
+
+          level.id = representation.id;
+          level.label = level.id;
+          level.width = representation.width;
+          level.height = representation.height;
+          level.bitrate = representation.bandwidth;
+          level.frameRate = representation.frameRate;
+          level.enabled_ = representation.enabled;
+          Object.defineProperty(level, 'enabled', {
+            /**
+             * Get whether the QualityLevel is enabled.
+             *
+             * @return {boolean} True if the QualityLevel is enabled.
+             */
+            get() {
+              return level.enabled_();
+            },
+            /**
+             * Enable or disable the QualityLevel.
+             *
+             * @param {boolean} enable true to enable QualityLevel, false to disable.
+             */
+            set(enable) {
+              level.enabled_(enable);
+            }
+          });
+          return level;
+        }
+      }
+
+      /**
+       * A list of QualityLevels.
+       *
+       * interface QualityLevelList : EventTarget {
+       *   getter QualityLevel (unsigned long index);
+       *   readonly attribute unsigned long length;
+       *   readonly attribute long selectedIndex;
+       *
+       *   void addQualityLevel(QualityLevel qualityLevel)
+       *   void removeQualityLevel(QualityLevel remove)
+       *   QualityLevel? getQualityLevelById(DOMString id);
+       *
+       *   attribute EventHandler onchange;
+       *   attribute EventHandler onaddqualitylevel;
+       *   attribute EventHandler onremovequalitylevel;
+       * };
+       *
+       * @extends videojs.EventTarget
+       * @class QualityLevelList
+       */
+      class QualityLevelList extends videojs__default["default"].EventTarget {
+        /**
+         * Creates a QualityLevelList.
+         */
+        constructor() {
+          super();
+          let list = this; // eslint-disable-line
+
+          list.levels_ = [];
+          list.selectedIndex_ = -1;
+
+          /**
+           * Get the index of the currently selected QualityLevel.
+           *
+           * @returns {number} The index of the selected QualityLevel. -1 if none selected.
+           * @readonly
+           */
+          Object.defineProperty(list, 'selectedIndex', {
+            get() {
+              return list.selectedIndex_;
+            }
+          });
+
+          /**
+           * Get the length of the list of QualityLevels.
+           *
+           * @returns {number} The length of the list.
+           * @readonly
+           */
+          Object.defineProperty(list, 'length', {
+            get() {
+              return list.levels_.length;
+            }
+          });
+          list[Symbol.iterator] = () => list.levels_.values();
+          return list;
+        }
+
+        /**
+         * Adds a quality level to the list.
+         *
+         * @param {Representation|Object} representation The representation of the quality level
+         * @param {string}   representation.id        Unique id of the QualityLevel
+         * @param {number=}  representation.width     Resolution width of the QualityLevel
+         * @param {number=}  representation.height    Resolution height of the QualityLevel
+         * @param {number}   representation.bandwidth Bitrate of the QualityLevel
+         * @param {number=}  representation.frameRate Frame-rate of the QualityLevel
+         * @param {Function} representation.enabled   Callback to enable/disable QualityLevel
+         * @return {QualityLevel} the QualityLevel added to the list
+         * @method addQualityLevel
+         */
+        addQualityLevel(representation) {
+          let qualityLevel = this.getQualityLevelById(representation.id);
+
+          // Do not add duplicate quality levels
+          if (qualityLevel) {
+            return qualityLevel;
+          }
+          const index = this.levels_.length;
+          qualityLevel = new QualityLevel(representation);
+          if (!('' + index in this)) {
+            Object.defineProperty(this, index, {
+              get() {
+                return this.levels_[index];
+              }
+            });
+          }
+          this.levels_.push(qualityLevel);
+          this.trigger({
+            qualityLevel,
+            type: 'addqualitylevel'
+          });
+          return qualityLevel;
+        }
+
+        /**
+         * Removes a quality level from the list.
+         *
+         * @param {QualityLevel} qualityLevel The QualityLevel to remove from the list.
+         * @return {QualityLevel|null} the QualityLevel removed or null if nothing removed
+         * @method removeQualityLevel
+         */
+        removeQualityLevel(qualityLevel) {
+          let removed = null;
+          for (let i = 0, l = this.length; i < l; i++) {
+            if (this[i] === qualityLevel) {
+              removed = this.levels_.splice(i, 1)[0];
+              if (this.selectedIndex_ === i) {
+                this.selectedIndex_ = -1;
+              } else if (this.selectedIndex_ > i) {
+                this.selectedIndex_--;
+              }
+              break;
+            }
+          }
+          if (removed) {
+            this.trigger({
+              qualityLevel,
+              type: 'removequalitylevel'
+            });
+          }
+          return removed;
+        }
+
+        /**
+         * Searches for a QualityLevel with the given id.
+         *
+         * @param {string} id The id of the QualityLevel to find.
+         * @return {QualityLevel|null} The QualityLevel with id, or null if not found.
+         * @method getQualityLevelById
+         */
+        getQualityLevelById(id) {
+          for (let i = 0, l = this.length; i < l; i++) {
+            const level = this[i];
+            if (level.id === id) {
+              return level;
+            }
+          }
+          return null;
+        }
+
+        /**
+         * Resets the list of QualityLevels to empty
+         *
+         * @method dispose
+         */
+        dispose() {
+          this.selectedIndex_ = -1;
+          this.levels_.length = 0;
+        }
+      }
+
+      /**
+       * change - The selected QualityLevel has changed.
+       * addqualitylevel - A QualityLevel has been added to the QualityLevelList.
+       * removequalitylevel - A QualityLevel has been removed from the QualityLevelList.
+       */
+      QualityLevelList.prototype.allowedEvents_ = {
+        change: 'change',
+        addqualitylevel: 'addqualitylevel',
+        removequalitylevel: 'removequalitylevel'
+      };
+
+      // emulate attribute EventHandler support to allow for feature detection
+      for (const event in QualityLevelList.prototype.allowedEvents_) {
+        QualityLevelList.prototype['on' + event] = null;
+      }
+      var version = "4.1.0";
+
+      /**
+       * Initialization function for the qualityLevels plugin. Sets up the QualityLevelList and
+       * event handlers.
+       *
+       * @param {Player} player Player object.
+       * @param {Object} options Plugin options object.
+       * @return {QualityLevelList} a list of QualityLevels
+       */
+      const initPlugin = function (player, options) {
+        const originalPluginFn = player.qualityLevels;
+        const qualityLevelList = new QualityLevelList();
+        const disposeHandler = function () {
+          qualityLevelList.dispose();
+          player.qualityLevels = originalPluginFn;
+          player.off('dispose', disposeHandler);
+        };
+        player.on('dispose', disposeHandler);
+        player.qualityLevels = () => qualityLevelList;
+        player.qualityLevels.VERSION = version;
+        return qualityLevelList;
+      };
+
+      /**
+       * A video.js plugin.
+       *
+       * In the plugin function, the value of `this` is a video.js `Player`
+       * instance. You cannot rely on the player being in a "ready" state here,
+       * depending on how the plugin is invoked. This may or may not be important
+       * to you; if not, remove the wait for "ready"!
+       *
+       * @param {Object} options Plugin options object
+       * @return {QualityLevelList} a list of QualityLevels
+       */
+      const qualityLevels = function (options) {
+        return initPlugin(this, videojs__default["default"].obj.merge({}, options));
+      };
+
+      // Register the plugin with video.js.
+      videojs__default["default"].registerPlugin('qualityLevels', qualityLevels);
+
+      // Include the version number.
+      qualityLevels.VERSION = version;
+      return qualityLevels;
+    });
+  });
+
+  var urlToolkit = createCommonjsModule(function (module, exports) {
+    // see https://tools.ietf.org/html/rfc1808
+
+    (function (root) {
+      var URL_REGEX = /^(?=((?:[a-zA-Z0-9+\-.]+:)?))\1(?=((?:\/\/[^\/?#]*)?))\2(?=((?:(?:[^?#\/]*\/)*[^;?#\/]*)?))\3((?:;[^?#]*)?)(\?[^#]*)?(#[^]*)?$/;
+      var FIRST_SEGMENT_REGEX = /^(?=([^\/?#]*))\1([^]*)$/;
+      var SLASH_DOT_REGEX = /(?:\/|^)\.(?=\/)/g;
+      var SLASH_DOT_DOT_REGEX = /(?:\/|^)\.\.\/(?!\.\.\/)[^\/]*(?=\/)/g;
+      var URLToolkit = {
+        // If opts.alwaysNormalize is true then the path will always be normalized even when it starts with / or //
+        // E.g
+        // With opts.alwaysNormalize = false (default, spec compliant)
+        // http://a.com/b/cd + /e/f/../g => http://a.com/e/f/../g
+        // With opts.alwaysNormalize = true (not spec compliant)
+        // http://a.com/b/cd + /e/f/../g => http://a.com/e/g
+        buildAbsoluteURL: function (baseURL, relativeURL, opts) {
+          opts = opts || {};
+          // remove any remaining space and CRLF
+          baseURL = baseURL.trim();
+          relativeURL = relativeURL.trim();
+          if (!relativeURL) {
+            // 2a) If the embedded URL is entirely empty, it inherits the
+            // entire base URL (i.e., is set equal to the base URL)
+            // and we are done.
+            if (!opts.alwaysNormalize) {
+              return baseURL;
+            }
+            var basePartsForNormalise = URLToolkit.parseURL(baseURL);
+            if (!basePartsForNormalise) {
+              throw new Error('Error trying to parse base URL.');
+            }
+            basePartsForNormalise.path = URLToolkit.normalizePath(basePartsForNormalise.path);
+            return URLToolkit.buildURLFromParts(basePartsForNormalise);
+          }
+          var relativeParts = URLToolkit.parseURL(relativeURL);
+          if (!relativeParts) {
+            throw new Error('Error trying to parse relative URL.');
+          }
+          if (relativeParts.scheme) {
+            // 2b) If the embedded URL starts with a scheme name, it is
+            // interpreted as an absolute URL and we are done.
+            if (!opts.alwaysNormalize) {
+              return relativeURL;
+            }
+            relativeParts.path = URLToolkit.normalizePath(relativeParts.path);
+            return URLToolkit.buildURLFromParts(relativeParts);
+          }
+          var baseParts = URLToolkit.parseURL(baseURL);
+          if (!baseParts) {
+            throw new Error('Error trying to parse base URL.');
+          }
+          if (!baseParts.netLoc && baseParts.path && baseParts.path[0] !== '/') {
+            // If netLoc missing and path doesn't start with '/', assume everthing before the first '/' is the netLoc
+            // This causes 'example.com/a' to be handled as '//example.com/a' instead of '/example.com/a'
+            var pathParts = FIRST_SEGMENT_REGEX.exec(baseParts.path);
+            baseParts.netLoc = pathParts[1];
+            baseParts.path = pathParts[2];
+          }
+          if (baseParts.netLoc && !baseParts.path) {
+            baseParts.path = '/';
+          }
+          var builtParts = {
+            // 2c) Otherwise, the embedded URL inherits the scheme of
+            // the base URL.
+            scheme: baseParts.scheme,
+            netLoc: relativeParts.netLoc,
+            path: null,
+            params: relativeParts.params,
+            query: relativeParts.query,
+            fragment: relativeParts.fragment
+          };
+          if (!relativeParts.netLoc) {
+            // 3) If the embedded URL's <net_loc> is non-empty, we skip to
+            // Step 7.  Otherwise, the embedded URL inherits the <net_loc>
+            // (if any) of the base URL.
+            builtParts.netLoc = baseParts.netLoc;
+            // 4) If the embedded URL path is preceded by a slash "/", the
+            // path is not relative and we skip to Step 7.
+            if (relativeParts.path[0] !== '/') {
+              if (!relativeParts.path) {
+                // 5) If the embedded URL path is empty (and not preceded by a
+                // slash), then the embedded URL inherits the base URL path
+                builtParts.path = baseParts.path;
+                // 5a) if the embedded URL's <params> is non-empty, we skip to
+                // step 7; otherwise, it inherits the <params> of the base
+                // URL (if any) and
+                if (!relativeParts.params) {
+                  builtParts.params = baseParts.params;
+                  // 5b) if the embedded URL's <query> is non-empty, we skip to
+                  // step 7; otherwise, it inherits the <query> of the base
+                  // URL (if any) and we skip to step 7.
+                  if (!relativeParts.query) {
+                    builtParts.query = baseParts.query;
+                  }
+                }
+              } else {
+                // 6) The last segment of the base URL's path (anything
+                // following the rightmost slash "/", or the entire path if no
+                // slash is present) is removed and the embedded URL's path is
+                // appended in its place.
+                var baseURLPath = baseParts.path;
+                var newPath = baseURLPath.substring(0, baseURLPath.lastIndexOf('/') + 1) + relativeParts.path;
+                builtParts.path = URLToolkit.normalizePath(newPath);
+              }
+            }
+          }
+          if (builtParts.path === null) {
+            builtParts.path = opts.alwaysNormalize ? URLToolkit.normalizePath(relativeParts.path) : relativeParts.path;
+          }
+          return URLToolkit.buildURLFromParts(builtParts);
+        },
+        parseURL: function (url) {
+          var parts = URL_REGEX.exec(url);
+          if (!parts) {
+            return null;
+          }
+          return {
+            scheme: parts[1] || '',
+            netLoc: parts[2] || '',
+            path: parts[3] || '',
+            params: parts[4] || '',
+            query: parts[5] || '',
+            fragment: parts[6] || ''
+          };
+        },
+        normalizePath: function (path) {
+          // The following operations are
+          // then applied, in order, to the new path:
+          // 6a) All occurrences of "./", where "." is a complete path
+          // segment, are removed.
+          // 6b) If the path ends with "." as a complete path segment,
+          // that "." is removed.
+          path = path.split('').reverse().join('').replace(SLASH_DOT_REGEX, '');
+          // 6c) All occurrences of "<segment>/../", where <segment> is a
+          // complete path segment not equal to "..", are removed.
+          // Removal of these path segments is performed iteratively,
+          // removing the leftmost matching pattern on each iteration,
+          // until no matching pattern remains.
+          // 6d) If the path ends with "<segment>/..", where <segment> is a
+          // complete path segment not equal to "..", that
+          // "<segment>/.." is removed.
+          while (path.length !== (path = path.replace(SLASH_DOT_DOT_REGEX, '')).length) {}
+          return path.split('').reverse().join('');
+        },
+        buildURLFromParts: function (parts) {
+          return parts.scheme + parts.netLoc + parts.path + parts.params + parts.query + parts.fragment;
+        }
+      };
+      module.exports = URLToolkit;
+    })();
+  });
+
+  var DEFAULT_LOCATION = 'http://example.com';
+  var resolveUrl$1 = function resolveUrl(baseUrl, relativeUrl) {
+    // return early if we don't need to resolve
+    if (/^[a-z]+:/i.test(relativeUrl)) {
+      return relativeUrl;
+    } // if baseUrl is a data URI, ignore it and resolve everything relative to window.location
+
+    if (/^data:/.test(baseUrl)) {
+      baseUrl = window.location && window.location.href || '';
+    } // IE11 supports URL but not the URL constructor
+    // feature detect the behavior we want
+
+    var nativeURL = typeof window.URL === 'function';
+    var protocolLess = /^\/\//.test(baseUrl); // remove location if window.location isn't available (i.e. we're in node)
+    // and if baseUrl isn't an absolute url
+
+    var removeLocation = !window.location && !/\/\//i.test(baseUrl); // if the base URL is relative then combine with the current location
+
+    if (nativeURL) {
+      baseUrl = new window.URL(baseUrl, window.location || DEFAULT_LOCATION);
+    } else if (!/\/\//i.test(baseUrl)) {
+      baseUrl = urlToolkit.buildAbsoluteURL(window.location && window.location.href || '', baseUrl);
+    }
+    if (nativeURL) {
+      var newUrl = new URL(relativeUrl, baseUrl); // if we're a protocol-less url, remove the protocol
+      // and if we're location-less, remove the location
+      // otherwise, return the url unmodified
+
+      if (removeLocation) {
+        return newUrl.href.slice(DEFAULT_LOCATION.length);
+      } else if (protocolLess) {
+        return newUrl.href.slice(newUrl.protocol.length);
+      }
+      return newUrl.href;
+    }
+    return urlToolkit.buildAbsoluteURL(baseUrl, relativeUrl);
+  };
+
+  /**
+   * @file stream.js
+   */
+
+  /**
+   * A lightweight readable stream implemention that handles event dispatching.
+   *
+   * @class Stream
+   */
+  var Stream = /*#__PURE__*/function () {
+    function Stream() {
+      this.listeners = {};
+    }
+    /**
+     * Add a listener for a specified event type.
+     *
+     * @param {string} type the event name
+     * @param {Function} listener the callback to be invoked when an event of
+     * the specified type occurs
+     */
+
+    var _proto = Stream.prototype;
+    _proto.on = function on(type, listener) {
+      if (!this.listeners[type]) {
+        this.listeners[type] = [];
+      }
+      this.listeners[type].push(listener);
+    }
+    /**
+     * Remove a listener for a specified event type.
+     *
+     * @param {string} type the event name
+     * @param {Function} listener  a function previously registered for this
+     * type of event through `on`
+     * @return {boolean} if we could turn it off or not
+     */;
+
+    _proto.off = function off(type, listener) {
+      if (!this.listeners[type]) {
+        return false;
+      }
+      var index = this.listeners[type].indexOf(listener); // TODO: which is better?
+      // In Video.js we slice listener functions
+      // on trigger so that it does not mess up the order
+      // while we loop through.
+      //
+      // Here we slice on off so that the loop in trigger
+      // can continue using it's old reference to loop without
+      // messing up the order.
+
+      this.listeners[type] = this.listeners[type].slice(0);
+      this.listeners[type].splice(index, 1);
+      return index > -1;
+    }
+    /**
+     * Trigger an event of the specified type on this stream. Any additional
+     * arguments to this function are passed as parameters to event listeners.
+     *
+     * @param {string} type the event name
+     */;
+
+    _proto.trigger = function trigger(type) {
+      var callbacks = this.listeners[type];
+      if (!callbacks) {
+        return;
+      } // Slicing the arguments on every invocation of this method
+      // can add a significant amount of overhead. Avoid the
+      // intermediate object creation for the common case of a
+      // single callback argument
+
+      if (arguments.length === 2) {
+        var length = callbacks.length;
+        for (var i = 0; i < length; ++i) {
+          callbacks[i].call(this, arguments[1]);
+        }
+      } else {
+        var args = Array.prototype.slice.call(arguments, 1);
+        var _length = callbacks.length;
+        for (var _i = 0; _i < _length; ++_i) {
+          callbacks[_i].apply(this, args);
+        }
+      }
+    }
+    /**
+     * Destroys the stream and cleans up.
+     */;
+
+    _proto.dispose = function dispose() {
+      this.listeners = {};
+    }
+    /**
+     * Forwards all `data` events on this stream to the destination stream. The
+     * destination stream should provide a method `push` to receive the data
+     * events as they arrive.
+     *
+     * @param {Stream} destination the stream that will receive all `data` events
+     * @see http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options
+     */;
+
+    _proto.pipe = function pipe(destination) {
+      this.on('data', function (data) {
+        destination.push(data);
+      });
+    };
+    return Stream;
+  }();
+
+  var atob$1 = function atob(s) {
+    return window.atob ? window.atob(s) : Buffer.from(s, 'base64').toString('binary');
+  };
+  function decodeB64ToUint8Array$1(b64Text) {
+    var decodedString = atob$1(b64Text);
+    var array = new Uint8Array(decodedString.length);
+    for (var i = 0; i < decodedString.length; i++) {
+      array[i] = decodedString.charCodeAt(i);
+    }
+    return array;
+  }
+
+  /*! @name m3u8-parser @version 7.1.0 @license Apache-2.0 */
+
+  /**
+   * @file m3u8/line-stream.js
+   */
+  /**
+   * A stream that buffers string input and generates a `data` event for each
+   * line.
+   *
+   * @class LineStream
+   * @extends Stream
+   */
+
+  class LineStream extends Stream {
+    constructor() {
+      super();
+      this.buffer = '';
+    }
+    /**
+     * Add new data to be parsed.
+     *
+     * @param {string} data the text to process
+     */
+
+    push(data) {
+      let nextNewline;
+      this.buffer += data;
+      nextNewline = this.buffer.indexOf('\n');
+      for (; nextNewline > -1; nextNewline = this.buffer.indexOf('\n')) {
+        this.trigger('data', this.buffer.substring(0, nextNewline));
+        this.buffer = this.buffer.substring(nextNewline + 1);
+      }
+    }
+  }
+  const TAB = String.fromCharCode(0x09);
+  const parseByterange = function (byterangeString) {
+    // optionally match and capture 0+ digits before `@`
+    // optionally match and capture 0+ digits after `@`
+    const match = /([0-9.]*)?@?([0-9.]*)?/.exec(byterangeString || '');
+    const result = {};
+    if (match[1]) {
+      result.length = parseInt(match[1], 10);
+    }
+    if (match[2]) {
+      result.offset = parseInt(match[2], 10);
+    }
+    return result;
+  };
+  /**
+   * "forgiving" attribute list psuedo-grammar:
+   * attributes -> keyvalue (',' keyvalue)*
+   * keyvalue   -> key '=' value
+   * key        -> [^=]*
+   * value      -> '"' [^"]* '"' | [^,]*
+   */
+
+  const attributeSeparator = function () {
+    const key = '[^=]*';
+    const value = '"[^"]*"|[^,]*';
+    const keyvalue = '(?:' + key + ')=(?:' + value + ')';
+    return new RegExp('(?:^|,)(' + keyvalue + ')');
+  };
+  /**
+   * Parse attributes from a line given the separator
+   *
+   * @param {string} attributes the attribute line to parse
+   */
+
+  const parseAttributes$1 = function (attributes) {
+    const result = {};
+    if (!attributes) {
+      return result;
+    } // split the string using attributes as the separator
+
+    const attrs = attributes.split(attributeSeparator());
+    let i = attrs.length;
+    let attr;
+    while (i--) {
+      // filter out unmatched portions of the string
+      if (attrs[i] === '') {
+        continue;
+      } // split the key and value
+
+      attr = /([^=]*)=(.*)/.exec(attrs[i]).slice(1); // trim whitespace and remove optional quotes around the value
+
+      attr[0] = attr[0].replace(/^\s+|\s+$/g, '');
+      attr[1] = attr[1].replace(/^\s+|\s+$/g, '');
+      attr[1] = attr[1].replace(/^['"](.*)['"]$/g, '$1');
+      result[attr[0]] = attr[1];
+    }
+    return result;
+  };
+  /**
+   * A line-level M3U8 parser event stream. It expects to receive input one
+   * line at a time and performs a context-free parse of its contents. A stream
+   * interpretation of a manifest can be useful if the manifest is expected to
+   * be too large to fit comfortably into memory or the entirety of the input
+   * is not immediately available. Otherwise, it's probably much easier to work
+   * with a regular `Parser` object.
+   *
+   * Produces `data` events with an object that captures the parser's
+   * interpretation of the input. That object has a property `tag` that is one
+   * of `uri`, `comment`, or `tag`. URIs only have a single additional
+   * property, `line`, which captures the entirety of the input without
+   * interpretation. Comments similarly have a single additional property
+   * `text` which is the input without the leading `#`.
+   *
+   * Tags always have a property `tagType` which is the lower-cased version of
+   * the M3U8 directive without the `#EXT` or `#EXT-X-` prefix. For instance,
+   * `#EXT-X-MEDIA-SEQUENCE` becomes `media-sequence` when parsed. Unrecognized
+   * tags are given the tag type `unknown` and a single additional property
+   * `data` with the remainder of the input.
+   *
+   * @class ParseStream
+   * @extends Stream
+   */
+
+  class ParseStream extends Stream {
+    constructor() {
+      super();
+      this.customParsers = [];
+      this.tagMappers = [];
+    }
+    /**
+     * Parses an additional line of input.
+     *
+     * @param {string} line a single line of an M3U8 file to parse
+     */
+
+    push(line) {
+      let match;
+      let event; // strip whitespace
+
+      line = line.trim();
+      if (line.length === 0) {
+        // ignore empty lines
+        return;
+      } // URIs
+
+      if (line[0] !== '#') {
+        this.trigger('data', {
+          type: 'uri',
+          uri: line
+        });
+        return;
+      } // map tags
+
+      const newLines = this.tagMappers.reduce((acc, mapper) => {
+        const mappedLine = mapper(line); // skip if unchanged
+
+        if (mappedLine === line) {
+          return acc;
+        }
+        return acc.concat([mappedLine]);
+      }, [line]);
+      newLines.forEach(newLine => {
+        for (let i = 0; i < this.customParsers.length; i++) {
+          if (this.customParsers[i].call(this, newLine)) {
+            return;
+          }
+        } // Comments
+
+        if (newLine.indexOf('#EXT') !== 0) {
+          this.trigger('data', {
+            type: 'comment',
+            text: newLine.slice(1)
+          });
+          return;
+        } // strip off any carriage returns here so the regex matching
+        // doesn't have to account for them.
+
+        newLine = newLine.replace('\r', ''); // Tags
+
+        match = /^#EXTM3U/.exec(newLine);
+        if (match) {
+          this.trigger('data', {
+            type: 'tag',
+            tagType: 'm3u'
+          });
+          return;
+        }
+        match = /^#EXTINF:([0-9\.]*)?,?(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'inf'
+          };
+          if (match[1]) {
+            event.duration = parseFloat(match[1]);
+          }
+          if (match[2]) {
+            event.title = match[2];
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-TARGETDURATION:([0-9.]*)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'targetduration'
+          };
+          if (match[1]) {
+            event.duration = parseInt(match[1], 10);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-VERSION:([0-9.]*)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'version'
+          };
+          if (match[1]) {
+            event.version = parseInt(match[1], 10);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-MEDIA-SEQUENCE:(\-?[0-9.]*)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'media-sequence'
+          };
+          if (match[1]) {
+            event.number = parseInt(match[1], 10);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-DISCONTINUITY-SEQUENCE:(\-?[0-9.]*)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'discontinuity-sequence'
+          };
+          if (match[1]) {
+            event.number = parseInt(match[1], 10);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-PLAYLIST-TYPE:(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'playlist-type'
+          };
+          if (match[1]) {
+            event.playlistType = match[1];
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-BYTERANGE:(.*)?$/.exec(newLine);
+        if (match) {
+          event = _extends$1(parseByterange(match[1]), {
+            type: 'tag',
+            tagType: 'byterange'
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-ALLOW-CACHE:(YES|NO)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'allow-cache'
+          };
+          if (match[1]) {
+            event.allowed = !/NO/.test(match[1]);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-MAP:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'map'
+          };
+          if (match[1]) {
+            const attributes = parseAttributes$1(match[1]);
+            if (attributes.URI) {
+              event.uri = attributes.URI;
+            }
+            if (attributes.BYTERANGE) {
+              event.byterange = parseByterange(attributes.BYTERANGE);
+            }
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-STREAM-INF:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'stream-inf'
+          };
+          if (match[1]) {
+            event.attributes = parseAttributes$1(match[1]);
+            if (event.attributes.RESOLUTION) {
+              const split = event.attributes.RESOLUTION.split('x');
+              const resolution = {};
+              if (split[0]) {
+                resolution.width = parseInt(split[0], 10);
+              }
+              if (split[1]) {
+                resolution.height = parseInt(split[1], 10);
+              }
+              event.attributes.RESOLUTION = resolution;
+            }
+            if (event.attributes.BANDWIDTH) {
+              event.attributes.BANDWIDTH = parseInt(event.attributes.BANDWIDTH, 10);
+            }
+            if (event.attributes['FRAME-RATE']) {
+              event.attributes['FRAME-RATE'] = parseFloat(event.attributes['FRAME-RATE']);
+            }
+            if (event.attributes['PROGRAM-ID']) {
+              event.attributes['PROGRAM-ID'] = parseInt(event.attributes['PROGRAM-ID'], 10);
+            }
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-MEDIA:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'media'
+          };
+          if (match[1]) {
+            event.attributes = parseAttributes$1(match[1]);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-ENDLIST/.exec(newLine);
+        if (match) {
+          this.trigger('data', {
+            type: 'tag',
+            tagType: 'endlist'
+          });
+          return;
+        }
+        match = /^#EXT-X-DISCONTINUITY/.exec(newLine);
+        if (match) {
+          this.trigger('data', {
+            type: 'tag',
+            tagType: 'discontinuity'
+          });
+          return;
+        }
+        match = /^#EXT-X-PROGRAM-DATE-TIME:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'program-date-time'
+          };
+          if (match[1]) {
+            event.dateTimeString = match[1];
+            event.dateTimeObject = new Date(match[1]);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-KEY:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'key'
+          };
+          if (match[1]) {
+            event.attributes = parseAttributes$1(match[1]); // parse the IV string into a Uint32Array
+
+            if (event.attributes.IV) {
+              if (event.attributes.IV.substring(0, 2).toLowerCase() === '0x') {
+                event.attributes.IV = event.attributes.IV.substring(2);
+              }
+              event.attributes.IV = event.attributes.IV.match(/.{8}/g);
+              event.attributes.IV[0] = parseInt(event.attributes.IV[0], 16);
+              event.attributes.IV[1] = parseInt(event.attributes.IV[1], 16);
+              event.attributes.IV[2] = parseInt(event.attributes.IV[2], 16);
+              event.attributes.IV[3] = parseInt(event.attributes.IV[3], 16);
+              event.attributes.IV = new Uint32Array(event.attributes.IV);
+            }
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-START:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'start'
+          };
+          if (match[1]) {
+            event.attributes = parseAttributes$1(match[1]);
+            event.attributes['TIME-OFFSET'] = parseFloat(event.attributes['TIME-OFFSET']);
+            event.attributes.PRECISE = /YES/.test(event.attributes.PRECISE);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-CUE-OUT-CONT:(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'cue-out-cont'
+          };
+          if (match[1]) {
+            event.data = match[1];
+          } else {
+            event.data = '';
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-CUE-OUT:(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'cue-out'
+          };
+          if (match[1]) {
+            event.data = match[1];
+          } else {
+            event.data = '';
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-CUE-IN:(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'cue-in'
+          };
+          if (match[1]) {
+            event.data = match[1];
+          } else {
+            event.data = '';
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-SKIP:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'skip'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          if (event.attributes.hasOwnProperty('SKIPPED-SEGMENTS')) {
+            event.attributes['SKIPPED-SEGMENTS'] = parseInt(event.attributes['SKIPPED-SEGMENTS'], 10);
+          }
+          if (event.attributes.hasOwnProperty('RECENTLY-REMOVED-DATERANGES')) {
+            event.attributes['RECENTLY-REMOVED-DATERANGES'] = event.attributes['RECENTLY-REMOVED-DATERANGES'].split(TAB);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-PART:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'part'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['DURATION'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseFloat(event.attributes[key]);
+            }
+          });
+          ['INDEPENDENT', 'GAP'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = /YES/.test(event.attributes[key]);
+            }
+          });
+          if (event.attributes.hasOwnProperty('BYTERANGE')) {
+            event.attributes.byterange = parseByterange(event.attributes.BYTERANGE);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-SERVER-CONTROL:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'server-control'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['CAN-SKIP-UNTIL', 'PART-HOLD-BACK', 'HOLD-BACK'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseFloat(event.attributes[key]);
+            }
+          });
+          ['CAN-SKIP-DATERANGES', 'CAN-BLOCK-RELOAD'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = /YES/.test(event.attributes[key]);
+            }
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-PART-INF:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'part-inf'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['PART-TARGET'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseFloat(event.attributes[key]);
+            }
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-PRELOAD-HINT:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'preload-hint'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['BYTERANGE-START', 'BYTERANGE-LENGTH'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseInt(event.attributes[key], 10);
+              const subkey = key === 'BYTERANGE-LENGTH' ? 'length' : 'offset';
+              event.attributes.byterange = event.attributes.byterange || {};
+              event.attributes.byterange[subkey] = event.attributes[key]; // only keep the parsed byterange object.
+
+              delete event.attributes[key];
+            }
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-RENDITION-REPORT:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'rendition-report'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['LAST-MSN', 'LAST-PART'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseInt(event.attributes[key], 10);
+            }
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-DATERANGE:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'daterange'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['ID', 'CLASS'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = String(event.attributes[key]);
+            }
+          });
+          ['START-DATE', 'END-DATE'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = new Date(event.attributes[key]);
+            }
+          });
+          ['DURATION', 'PLANNED-DURATION'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseFloat(event.attributes[key]);
+            }
+          });
+          ['END-ON-NEXT'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = /YES/i.test(event.attributes[key]);
+            }
+          });
+          ['SCTE35-CMD', ' SCTE35-OUT', 'SCTE35-IN'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = event.attributes[key].toString(16);
+            }
+          });
+          const clientAttributePattern = /^X-([A-Z]+-)+[A-Z]+$/;
+          for (const key in event.attributes) {
+            if (!clientAttributePattern.test(key)) {
+              continue;
+            }
+            const isHexaDecimal = /[0-9A-Fa-f]{6}/g.test(event.attributes[key]);
+            const isDecimalFloating = /^\d+(\.\d+)?$/.test(event.attributes[key]);
+            event.attributes[key] = isHexaDecimal ? event.attributes[key].toString(16) : isDecimalFloating ? parseFloat(event.attributes[key]) : String(event.attributes[key]);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-INDEPENDENT-SEGMENTS/.exec(newLine);
+        if (match) {
+          this.trigger('data', {
+            type: 'tag',
+            tagType: 'independent-segments'
+          });
+          return;
+        }
+        match = /^#EXT-X-CONTENT-STEERING:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'content-steering'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          this.trigger('data', event);
+          return;
+        } // unknown tag type
+
+        this.trigger('data', {
+          type: 'tag',
+          data: newLine.slice(4)
+        });
+      });
+    }
+    /**
+     * Add a parser for custom headers
+     *
+     * @param {Object}   options              a map of options for the added parser
+     * @param {RegExp}   options.expression   a regular expression to match the custom header
+     * @param {string}   options.customType   the custom type to register to the output
+     * @param {Function} [options.dataParser] function to parse the line into an object
+     * @param {boolean}  [options.segment]    should tag data be attached to the segment object
+     */
+
+    addParser({
+      expression,
+      customType,
+      dataParser,
+      segment
+    }) {
+      if (typeof dataParser !== 'function') {
+        dataParser = line => line;
+      }
+      this.customParsers.push(line => {
+        const match = expression.exec(line);
+        if (match) {
+          this.trigger('data', {
+            type: 'custom',
+            data: dataParser(line),
+            customType,
+            segment
+          });
+          return true;
+        }
+      });
+    }
+    /**
+     * Add a custom header mapper
+     *
+     * @param {Object}   options
+     * @param {RegExp}   options.expression   a regular expression to match the custom header
+     * @param {Function} options.map          function to translate tag into a different tag
+     */
+
+    addTagMapper({
+      expression,
+      map
+    }) {
+      const mapFn = line => {
+        if (expression.test(line)) {
+          return map(line);
+        }
+        return line;
+      };
+      this.tagMappers.push(mapFn);
+    }
+  }
+  const camelCase = str => str.toLowerCase().replace(/-(\w)/g, a => a[1].toUpperCase());
+  const camelCaseKeys = function (attributes) {
+    const result = {};
+    Object.keys(attributes).forEach(function (key) {
+      result[camelCase(key)] = attributes[key];
+    });
+    return result;
+  }; // set SERVER-CONTROL hold back based upon targetDuration and partTargetDuration
+  // we need this helper because defaults are based upon targetDuration and
+  // partTargetDuration being set, but they may not be if SERVER-CONTROL appears before
+  // target durations are set.
+
+  const setHoldBack = function (manifest) {
+    const {
+      serverControl,
+      targetDuration,
+      partTargetDuration
+    } = manifest;
+    if (!serverControl) {
+      return;
+    }
+    const tag = '#EXT-X-SERVER-CONTROL';
+    const hb = 'holdBack';
+    const phb = 'partHoldBack';
+    const minTargetDuration = targetDuration && targetDuration * 3;
+    const minPartDuration = partTargetDuration && partTargetDuration * 2;
+    if (targetDuration && !serverControl.hasOwnProperty(hb)) {
+      serverControl[hb] = minTargetDuration;
+      this.trigger('info', {
+        message: `${tag} defaulting HOLD-BACK to targetDuration * 3 (${minTargetDuration}).`
+      });
+    }
+    if (minTargetDuration && serverControl[hb] < minTargetDuration) {
+      this.trigger('warn', {
+        message: `${tag} clamping HOLD-BACK (${serverControl[hb]}) to targetDuration * 3 (${minTargetDuration})`
+      });
+      serverControl[hb] = minTargetDuration;
+    } // default no part hold back to part target duration * 3
+
+    if (partTargetDuration && !serverControl.hasOwnProperty(phb)) {
+      serverControl[phb] = partTargetDuration * 3;
+      this.trigger('info', {
+        message: `${tag} defaulting PART-HOLD-BACK to partTargetDuration * 3 (${serverControl[phb]}).`
+      });
+    } // if part hold back is too small default it to part target duration * 2
+
+    if (partTargetDuration && serverControl[phb] < minPartDuration) {
+      this.trigger('warn', {
+        message: `${tag} clamping PART-HOLD-BACK (${serverControl[phb]}) to partTargetDuration * 2 (${minPartDuration}).`
+      });
+      serverControl[phb] = minPartDuration;
+    }
+  };
+  /**
+   * A parser for M3U8 files. The current interpretation of the input is
+   * exposed as a property `manifest` on parser objects. It's just two lines to
+   * create and parse a manifest once you have the contents available as a string:
+   *
+   * ```js
+   * var parser = new m3u8.Parser();
+   * parser.push(xhr.responseText);
+   * ```
+   *
+   * New input can later be applied to update the manifest object by calling
+   * `push` again.
+   *
+   * The parser attempts to create a usable manifest object even if the
+   * underlying input is somewhat nonsensical. It emits `info` and `warning`
+   * events during the parse if it encounters input that seems invalid or
+   * requires some property of the manifest object to be defaulted.
+   *
+   * @class Parser
+   * @extends Stream
+   */
+
+  class Parser extends Stream {
+    constructor() {
+      super();
+      this.lineStream = new LineStream();
+      this.parseStream = new ParseStream();
+      this.lineStream.pipe(this.parseStream);
+      this.lastProgramDateTime = null;
+      /* eslint-disable consistent-this */
+
+      const self = this;
+      /* eslint-enable consistent-this */
+
+      const uris = [];
+      let currentUri = {}; // if specified, the active EXT-X-MAP definition
+
+      let currentMap; // if specified, the active decryption key
+
+      let key;
+      let hasParts = false;
+      const noop = function () {};
+      const defaultMediaGroups = {
+        'AUDIO': {},
+        'VIDEO': {},
+        'CLOSED-CAPTIONS': {},
+        'SUBTITLES': {}
+      }; // This is the Widevine UUID from DASH IF IOP. The same exact string is
+      // used in MPDs with Widevine encrypted streams.
+
+      const widevineUuid = 'urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed'; // group segments into numbered timelines delineated by discontinuities
+
+      let currentTimeline = 0; // the manifest is empty until the parse stream begins delivering data
+
+      this.manifest = {
+        allowCache: true,
+        discontinuityStarts: [],
+        dateRanges: [],
+        segments: []
+      }; // keep track of the last seen segment's byte range end, as segments are not required
+      // to provide the offset, in which case it defaults to the next byte after the
+      // previous segment
+
+      let lastByterangeEnd = 0; // keep track of the last seen part's byte range end.
+
+      let lastPartByterangeEnd = 0;
+      const dateRangeTags = {};
+      this.on('end', () => {
+        // only add preloadSegment if we don't yet have a uri for it.
+        // and we actually have parts/preloadHints
+        if (currentUri.uri || !currentUri.parts && !currentUri.preloadHints) {
+          return;
+        }
+        if (!currentUri.map && currentMap) {
+          currentUri.map = currentMap;
+        }
+        if (!currentUri.key && key) {
+          currentUri.key = key;
+        }
+        if (!currentUri.timeline && typeof currentTimeline === 'number') {
+          currentUri.timeline = currentTimeline;
+        }
+        this.manifest.preloadSegment = currentUri;
+      }); // update the manifest with the m3u8 entry from the parse stream
+
+      this.parseStream.on('data', function (entry) {
+        let mediaGroup;
+        let rendition;
+        ({
+          tag() {
+            // switch based on the tag type
+            (({
+              version() {
+                if (entry.version) {
+                  this.manifest.version = entry.version;
+                }
+              },
+              'allow-cache'() {
+                this.manifest.allowCache = entry.allowed;
+                if (!('allowed' in entry)) {
+                  this.trigger('info', {
+                    message: 'defaulting allowCache to YES'
+                  });
+                  this.manifest.allowCache = true;
+                }
+              },
+              byterange() {
+                const byterange = {};
+                if ('length' in entry) {
+                  currentUri.byterange = byterange;
+                  byterange.length = entry.length;
+                  if (!('offset' in entry)) {
+                    /*
+                     * From the latest spec (as of this writing):
+                     * https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.2.2
+                     *
+                     * Same text since EXT-X-BYTERANGE's introduction in draft 7:
+                     * https://tools.ietf.org/html/draft-pantos-http-live-streaming-07#section-3.3.1)
+                     *
+                     * "If o [offset] is not present, the sub-range begins at the next byte
+                     * following the sub-range of the previous media segment."
+                     */
+                    entry.offset = lastByterangeEnd;
+                  }
+                }
+                if ('offset' in entry) {
+                  currentUri.byterange = byterange;
+                  byterange.offset = entry.offset;
+                }
+                lastByterangeEnd = byterange.offset + byterange.length;
+              },
+              endlist() {
+                this.manifest.endList = true;
+              },
+              inf() {
+                if (!('mediaSequence' in this.manifest)) {
+                  this.manifest.mediaSequence = 0;
+                  this.trigger('info', {
+                    message: 'defaulting media sequence to zero'
+                  });
+                }
+                if (!('discontinuitySequence' in this.manifest)) {
+                  this.manifest.discontinuitySequence = 0;
+                  this.trigger('info', {
+                    message: 'defaulting discontinuity sequence to zero'
+                  });
+                }
+                if (entry.title) {
+                  currentUri.title = entry.title;
+                }
+                if (entry.duration > 0) {
+                  currentUri.duration = entry.duration;
+                }
+                if (entry.duration === 0) {
+                  currentUri.duration = 0.01;
+                  this.trigger('info', {
+                    message: 'updating zero segment duration to a small value'
+                  });
+                }
+                this.manifest.segments = uris;
+              },
+              key() {
+                if (!entry.attributes) {
+                  this.trigger('warn', {
+                    message: 'ignoring key declaration without attribute list'
+                  });
+                  return;
+                } // clear the active encryption key
+
+                if (entry.attributes.METHOD === 'NONE') {
+                  key = null;
+                  return;
+                }
+                if (!entry.attributes.URI) {
+                  this.trigger('warn', {
+                    message: 'ignoring key declaration without URI'
+                  });
+                  return;
+                }
+                if (entry.attributes.KEYFORMAT === 'com.apple.streamingkeydelivery') {
+                  this.manifest.contentProtection = this.manifest.contentProtection || {}; // TODO: add full support for this.
+
+                  this.manifest.contentProtection['com.apple.fps.1_0'] = {
+                    attributes: entry.attributes
+                  };
+                  return;
+                }
+                if (entry.attributes.KEYFORMAT === 'com.microsoft.playready') {
+                  this.manifest.contentProtection = this.manifest.contentProtection || {}; // TODO: add full support for this.
+
+                  this.manifest.contentProtection['com.microsoft.playready'] = {
+                    uri: entry.attributes.URI
+                  };
+                  return;
+                } // check if the content is encrypted for Widevine
+                // Widevine/HLS spec: https://storage.googleapis.com/wvdocs/Widevine_DRM_HLS.pdf
+
+                if (entry.attributes.KEYFORMAT === widevineUuid) {
+                  const VALID_METHODS = ['SAMPLE-AES', 'SAMPLE-AES-CTR', 'SAMPLE-AES-CENC'];
+                  if (VALID_METHODS.indexOf(entry.attributes.METHOD) === -1) {
+                    this.trigger('warn', {
+                      message: 'invalid key method provided for Widevine'
+                    });
+                    return;
+                  }
+                  if (entry.attributes.METHOD === 'SAMPLE-AES-CENC') {
+                    this.trigger('warn', {
+                      message: 'SAMPLE-AES-CENC is deprecated, please use SAMPLE-AES-CTR instead'
+                    });
+                  }
+                  if (entry.attributes.URI.substring(0, 23) !== 'data:text/plain;base64,') {
+                    this.trigger('warn', {
+                      message: 'invalid key URI provided for Widevine'
+                    });
+                    return;
+                  }
+                  if (!(entry.attributes.KEYID && entry.attributes.KEYID.substring(0, 2) === '0x')) {
+                    this.trigger('warn', {
+                      message: 'invalid key ID provided for Widevine'
+                    });
+                    return;
+                  } // if Widevine key attributes are valid, store them as `contentProtection`
+                  // on the manifest to emulate Widevine tag structure in a DASH mpd
+
+                  this.manifest.contentProtection = this.manifest.contentProtection || {};
+                  this.manifest.contentProtection['com.widevine.alpha'] = {
+                    attributes: {
+                      schemeIdUri: entry.attributes.KEYFORMAT,
+                      // remove '0x' from the key id string
+                      keyId: entry.attributes.KEYID.substring(2)
+                    },
+                    // decode the base64-encoded PSSH box
+                    pssh: decodeB64ToUint8Array$1(entry.attributes.URI.split(',')[1])
+                  };
+                  return;
+                }
+                if (!entry.attributes.METHOD) {
+                  this.trigger('warn', {
+                    message: 'defaulting key method to AES-128'
+                  });
+                } // setup an encryption key for upcoming segments
+
+                key = {
+                  method: entry.attributes.METHOD || 'AES-128',
+                  uri: entry.attributes.URI
+                };
+                if (typeof entry.attributes.IV !== 'undefined') {
+                  key.iv = entry.attributes.IV;
+                }
+              },
+              'media-sequence'() {
+                if (!isFinite(entry.number)) {
+                  this.trigger('warn', {
+                    message: 'ignoring invalid media sequence: ' + entry.number
+                  });
+                  return;
+                }
+                this.manifest.mediaSequence = entry.number;
+              },
+              'discontinuity-sequence'() {
+                if (!isFinite(entry.number)) {
+                  this.trigger('warn', {
+                    message: 'ignoring invalid discontinuity sequence: ' + entry.number
+                  });
+                  return;
+                }
+                this.manifest.discontinuitySequence = entry.number;
+                currentTimeline = entry.number;
+              },
+              'playlist-type'() {
+                if (!/VOD|EVENT/.test(entry.playlistType)) {
+                  this.trigger('warn', {
+                    message: 'ignoring unknown playlist type: ' + entry.playlist
+                  });
+                  return;
+                }
+                this.manifest.playlistType = entry.playlistType;
+              },
+              map() {
+                currentMap = {};
+                if (entry.uri) {
+                  currentMap.uri = entry.uri;
+                }
+                if (entry.byterange) {
+                  currentMap.byterange = entry.byterange;
+                }
+                if (key) {
+                  currentMap.key = key;
+                }
+              },
+              'stream-inf'() {
+                this.manifest.playlists = uris;
+                this.manifest.mediaGroups = this.manifest.mediaGroups || defaultMediaGroups;
+                if (!entry.attributes) {
+                  this.trigger('warn', {
+                    message: 'ignoring empty stream-inf attributes'
+                  });
+                  return;
+                }
+                if (!currentUri.attributes) {
+                  currentUri.attributes = {};
+                }
+                _extends$1(currentUri.attributes, entry.attributes);
+              },
+              media() {
+                this.manifest.mediaGroups = this.manifest.mediaGroups || defaultMediaGroups;
+                if (!(entry.attributes && entry.attributes.TYPE && entry.attributes['GROUP-ID'] && entry.attributes.NAME)) {
+                  this.trigger('warn', {
+                    message: 'ignoring incomplete or missing media group'
+                  });
+                  return;
+                } // find the media group, creating defaults as necessary
+
+                const mediaGroupType = this.manifest.mediaGroups[entry.attributes.TYPE];
+                mediaGroupType[entry.attributes['GROUP-ID']] = mediaGroupType[entry.attributes['GROUP-ID']] || {};
+                mediaGroup = mediaGroupType[entry.attributes['GROUP-ID']]; // collect the rendition metadata
+
+                rendition = {
+                  default: /yes/i.test(entry.attributes.DEFAULT)
+                };
+                if (rendition.default) {
+                  rendition.autoselect = true;
+                } else {
+                  rendition.autoselect = /yes/i.test(entry.attributes.AUTOSELECT);
+                }
+                if (entry.attributes.LANGUAGE) {
+                  rendition.language = entry.attributes.LANGUAGE;
+                }
+                if (entry.attributes.URI) {
+                  rendition.uri = entry.attributes.URI;
+                }
+                if (entry.attributes['INSTREAM-ID']) {
+                  rendition.instreamId = entry.attributes['INSTREAM-ID'];
+                }
+                if (entry.attributes.CHARACTERISTICS) {
+                  rendition.characteristics = entry.attributes.CHARACTERISTICS;
+                }
+                if (entry.attributes.FORCED) {
+                  rendition.forced = /yes/i.test(entry.attributes.FORCED);
+                } // insert the new rendition
+
+                mediaGroup[entry.attributes.NAME] = rendition;
+              },
+              discontinuity() {
+                currentTimeline += 1;
+                currentUri.discontinuity = true;
+                this.manifest.discontinuityStarts.push(uris.length);
+              },
+              'program-date-time'() {
+                if (typeof this.manifest.dateTimeString === 'undefined') {
+                  // PROGRAM-DATE-TIME is a media-segment tag, but for backwards
+                  // compatibility, we add the first occurence of the PROGRAM-DATE-TIME tag
+                  // to the manifest object
+                  // TODO: Consider removing this in future major version
+                  this.manifest.dateTimeString = entry.dateTimeString;
+                  this.manifest.dateTimeObject = entry.dateTimeObject;
+                }
+                currentUri.dateTimeString = entry.dateTimeString;
+                currentUri.dateTimeObject = entry.dateTimeObject;
+                const {
+                  lastProgramDateTime
+                } = this;
+                this.lastProgramDateTime = new Date(entry.dateTimeString).getTime(); // We should extrapolate Program Date Time backward only during first program date time occurrence.
+                // Once we have at least one program date time point, we can always extrapolate it forward using lastProgramDateTime reference.
+
+                if (lastProgramDateTime === null) {
+                  // Extrapolate Program Date Time backward
+                  // Since it is first program date time occurrence we're assuming that
+                  // all this.manifest.segments have no program date time info
+                  this.manifest.segments.reduceRight((programDateTime, segment) => {
+                    segment.programDateTime = programDateTime - segment.duration * 1000;
+                    return segment.programDateTime;
+                  }, this.lastProgramDateTime);
+                }
+              },
+              targetduration() {
+                if (!isFinite(entry.duration) || entry.duration < 0) {
+                  this.trigger('warn', {
+                    message: 'ignoring invalid target duration: ' + entry.duration
+                  });
+                  return;
+                }
+                this.manifest.targetDuration = entry.duration;
+                setHoldBack.call(this, this.manifest);
+              },
+              start() {
+                if (!entry.attributes || isNaN(entry.attributes['TIME-OFFSET'])) {
+                  this.trigger('warn', {
+                    message: 'ignoring start declaration without appropriate attribute list'
+                  });
+                  return;
+                }
+                this.manifest.start = {
+                  timeOffset: entry.attributes['TIME-OFFSET'],
+                  precise: entry.attributes.PRECISE
+                };
+              },
+              'cue-out'() {
+                currentUri.cueOut = entry.data;
+              },
+              'cue-out-cont'() {
+                currentUri.cueOutCont = entry.data;
+              },
+              'cue-in'() {
+                currentUri.cueIn = entry.data;
+              },
+              'skip'() {
+                this.manifest.skip = camelCaseKeys(entry.attributes);
+                this.warnOnMissingAttributes_('#EXT-X-SKIP', entry.attributes, ['SKIPPED-SEGMENTS']);
+              },
+              'part'() {
+                hasParts = true; // parts are always specifed before a segment
+
+                const segmentIndex = this.manifest.segments.length;
+                const part = camelCaseKeys(entry.attributes);
+                currentUri.parts = currentUri.parts || [];
+                currentUri.parts.push(part);
+                if (part.byterange) {
+                  if (!part.byterange.hasOwnProperty('offset')) {
+                    part.byterange.offset = lastPartByterangeEnd;
+                  }
+                  lastPartByterangeEnd = part.byterange.offset + part.byterange.length;
+                }
+                const partIndex = currentUri.parts.length - 1;
+                this.warnOnMissingAttributes_(`#EXT-X-PART #${partIndex} for segment #${segmentIndex}`, entry.attributes, ['URI', 'DURATION']);
+                if (this.manifest.renditionReports) {
+                  this.manifest.renditionReports.forEach((r, i) => {
+                    if (!r.hasOwnProperty('lastPart')) {
+                      this.trigger('warn', {
+                        message: `#EXT-X-RENDITION-REPORT #${i} lacks required attribute(s): LAST-PART`
+                      });
+                    }
+                  });
+                }
+              },
+              'server-control'() {
+                const attrs = this.manifest.serverControl = camelCaseKeys(entry.attributes);
+                if (!attrs.hasOwnProperty('canBlockReload')) {
+                  attrs.canBlockReload = false;
+                  this.trigger('info', {
+                    message: '#EXT-X-SERVER-CONTROL defaulting CAN-BLOCK-RELOAD to false'
+                  });
+                }
+                setHoldBack.call(this, this.manifest);
+                if (attrs.canSkipDateranges && !attrs.hasOwnProperty('canSkipUntil')) {
+                  this.trigger('warn', {
+                    message: '#EXT-X-SERVER-CONTROL lacks required attribute CAN-SKIP-UNTIL which is required when CAN-SKIP-DATERANGES is set'
+                  });
+                }
+              },
+              'preload-hint'() {
+                // parts are always specifed before a segment
+                const segmentIndex = this.manifest.segments.length;
+                const hint = camelCaseKeys(entry.attributes);
+                const isPart = hint.type && hint.type === 'PART';
+                currentUri.preloadHints = currentUri.preloadHints || [];
+                currentUri.preloadHints.push(hint);
+                if (hint.byterange) {
+                  if (!hint.byterange.hasOwnProperty('offset')) {
+                    // use last part byterange end or zero if not a part.
+                    hint.byterange.offset = isPart ? lastPartByterangeEnd : 0;
+                    if (isPart) {
+                      lastPartByterangeEnd = hint.byterange.offset + hint.byterange.length;
+                    }
+                  }
+                }
+                const index = currentUri.preloadHints.length - 1;
+                this.warnOnMissingAttributes_(`#EXT-X-PRELOAD-HINT #${index} for segment #${segmentIndex}`, entry.attributes, ['TYPE', 'URI']);
+                if (!hint.type) {
+                  return;
+                } // search through all preload hints except for the current one for
+                // a duplicate type.
+
+                for (let i = 0; i < currentUri.preloadHints.length - 1; i++) {
+                  const otherHint = currentUri.preloadHints[i];
+                  if (!otherHint.type) {
+                    continue;
+                  }
+                  if (otherHint.type === hint.type) {
+                    this.trigger('warn', {
+                      message: `#EXT-X-PRELOAD-HINT #${index} for segment #${segmentIndex} has the same TYPE ${hint.type} as preload hint #${i}`
+                    });
+                  }
+                }
+              },
+              'rendition-report'() {
+                const report = camelCaseKeys(entry.attributes);
+                this.manifest.renditionReports = this.manifest.renditionReports || [];
+                this.manifest.renditionReports.push(report);
+                const index = this.manifest.renditionReports.length - 1;
+                const required = ['LAST-MSN', 'URI'];
+                if (hasParts) {
+                  required.push('LAST-PART');
+                }
+                this.warnOnMissingAttributes_(`#EXT-X-RENDITION-REPORT #${index}`, entry.attributes, required);
+              },
+              'part-inf'() {
+                this.manifest.partInf = camelCaseKeys(entry.attributes);
+                this.warnOnMissingAttributes_('#EXT-X-PART-INF', entry.attributes, ['PART-TARGET']);
+                if (this.manifest.partInf.partTarget) {
+                  this.manifest.partTargetDuration = this.manifest.partInf.partTarget;
+                }
+                setHoldBack.call(this, this.manifest);
+              },
+              'daterange'() {
+                this.manifest.dateRanges.push(camelCaseKeys(entry.attributes));
+                const index = this.manifest.dateRanges.length - 1;
+                this.warnOnMissingAttributes_(`#EXT-X-DATERANGE #${index}`, entry.attributes, ['ID', 'START-DATE']);
+                const dateRange = this.manifest.dateRanges[index];
+                if (dateRange.endDate && dateRange.startDate && new Date(dateRange.endDate) < new Date(dateRange.startDate)) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE END-DATE must be equal to or later than the value of the START-DATE'
+                  });
+                }
+                if (dateRange.duration && dateRange.duration < 0) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE DURATION must not be negative'
+                  });
+                }
+                if (dateRange.plannedDuration && dateRange.plannedDuration < 0) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE PLANNED-DURATION must not be negative'
+                  });
+                }
+                const endOnNextYes = !!dateRange.endOnNext;
+                if (endOnNextYes && !dateRange.class) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE with an END-ON-NEXT=YES attribute must have a CLASS attribute'
+                  });
+                }
+                if (endOnNextYes && (dateRange.duration || dateRange.endDate)) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE with an END-ON-NEXT=YES attribute must not contain DURATION or END-DATE attributes'
+                  });
+                }
+                if (dateRange.duration && dateRange.endDate) {
+                  const startDate = dateRange.startDate;
+                  const newDateInSeconds = startDate.getTime() + dateRange.duration * 1000;
+                  this.manifest.dateRanges[index].endDate = new Date(newDateInSeconds);
+                }
+                if (!dateRangeTags[dateRange.id]) {
+                  dateRangeTags[dateRange.id] = dateRange;
+                } else {
+                  for (const attribute in dateRangeTags[dateRange.id]) {
+                    if (!!dateRange[attribute] && JSON.stringify(dateRangeTags[dateRange.id][attribute]) !== JSON.stringify(dateRange[attribute])) {
+                      this.trigger('warn', {
+                        message: 'EXT-X-DATERANGE tags with the same ID in a playlist must have the same attributes values'
+                      });
+                      break;
+                    }
+                  } // if tags with the same ID do not have conflicting attributes, merge them
+
+                  const dateRangeWithSameId = this.manifest.dateRanges.findIndex(dateRangeToFind => dateRangeToFind.id === dateRange.id);
+                  this.manifest.dateRanges[dateRangeWithSameId] = _extends$1(this.manifest.dateRanges[dateRangeWithSameId], dateRange);
+                  dateRangeTags[dateRange.id] = _extends$1(dateRangeTags[dateRange.id], dateRange); // after merging, delete the duplicate dateRange that was added last
+
+                  this.manifest.dateRanges.pop();
+                }
+              },
+              'independent-segments'() {
+                this.manifest.independentSegments = true;
+              },
+              'content-steering'() {
+                this.manifest.contentSteering = camelCaseKeys(entry.attributes);
+                this.warnOnMissingAttributes_('#EXT-X-CONTENT-STEERING', entry.attributes, ['SERVER-URI']);
+              }
+            })[entry.tagType] || noop).call(self);
+          },
+          uri() {
+            currentUri.uri = entry.uri;
+            uris.push(currentUri); // if no explicit duration was declared, use the target duration
+
+            if (this.manifest.targetDuration && !('duration' in currentUri)) {
+              this.trigger('warn', {
+                message: 'defaulting segment duration to the target duration'
+              });
+              currentUri.duration = this.manifest.targetDuration;
+            } // annotate with encryption information, if necessary
+
+            if (key) {
+              currentUri.key = key;
+            }
+            currentUri.timeline = currentTimeline; // annotate with initialization segment information, if necessary
+
+            if (currentMap) {
+              currentUri.map = currentMap;
+            } // reset the last byterange end as it needs to be 0 between parts
+
+            lastPartByterangeEnd = 0; // Once we have at least one program date time we can always extrapolate it forward
+
+            if (this.lastProgramDateTime !== null) {
+              currentUri.programDateTime = this.lastProgramDateTime;
+              this.lastProgramDateTime += currentUri.duration * 1000;
+            } // prepare for the next URI
+
+            currentUri = {};
+          },
+          comment() {// comments are not important for playback
+          },
+          custom() {
+            // if this is segment-level data attach the output to the segment
+            if (entry.segment) {
+              currentUri.custom = currentUri.custom || {};
+              currentUri.custom[entry.customType] = entry.data; // if this is manifest-level data attach to the top level manifest object
+            } else {
+              this.manifest.custom = this.manifest.custom || {};
+              this.manifest.custom[entry.customType] = entry.data;
+            }
+          }
+        })[entry.type].call(self);
+      });
+    }
+    warnOnMissingAttributes_(identifier, attributes, required) {
+      const missing = [];
+      required.forEach(function (key) {
+        if (!attributes.hasOwnProperty(key)) {
+          missing.push(key);
+        }
+      });
+      if (missing.length) {
+        this.trigger('warn', {
+          message: `${identifier} lacks required attribute(s): ${missing.join(', ')}`
+        });
+      }
+    }
+    /**
+     * Parse the input string and update the manifest object.
+     *
+     * @param {string} chunk a potentially incomplete portion of the manifest
+     */
+
+    push(chunk) {
+      this.lineStream.push(chunk);
+    }
+    /**
+     * Flush any remaining input. This can be handy if the last line of an M3U8
+     * manifest did not contain a trailing newline but the file has been
+     * completely received.
+     */
+
+    end() {
+      // flush any buffered input
+      this.lineStream.push('\n');
+      if (this.manifest.dateRanges.length && this.lastProgramDateTime === null) {
+        this.trigger('warn', {
+          message: 'A playlist with EXT-X-DATERANGE tag must contain atleast one EXT-X-PROGRAM-DATE-TIME tag'
+        });
+      }
+      this.lastProgramDateTime = null;
+      this.trigger('end');
+    }
+    /**
+     * Add an additional parser for non-standard tags
+     *
+     * @param {Object}   options              a map of options for the added parser
+     * @param {RegExp}   options.expression   a regular expression to match the custom header
+     * @param {string}   options.customType   the custom type to register to the output
+     * @param {Function} [options.dataParser] function to parse the line into an object
+     * @param {boolean}  [options.segment]    should tag data be attached to the segment object
+     */
+
+    addParser(options) {
+      this.parseStream.addParser(options);
+    }
+    /**
+     * Add a custom header mapper
+     *
+     * @param {Object}   options
+     * @param {RegExp}   options.expression   a regular expression to match the custom header
+     * @param {Function} options.map          function to translate tag into a different tag
+     */
+
+    addTagMapper(options) {
+      this.parseStream.addTagMapper(options);
+    }
+  }
+
+  var regexs = {
+    // to determine mime types
+    mp4: /^(av0?1|avc0?[1234]|vp0?9|flac|opus|mp3|mp4a|mp4v|stpp.ttml.im1t)/,
+    webm: /^(vp0?[89]|av0?1|opus|vorbis)/,
+    ogg: /^(vp0?[89]|theora|flac|opus|vorbis)/,
+    // to determine if a codec is audio or video
+    video: /^(av0?1|avc0?[1234]|vp0?[89]|hvc1|hev1|theora|mp4v)/,
+    audio: /^(mp4a|flac|vorbis|opus|ac-[34]|ec-3|alac|mp3|speex|aac)/,
+    text: /^(stpp.ttml.im1t)/,
+    // mux.js support regex
+    muxerVideo: /^(avc0?1)/,
+    muxerAudio: /^(mp4a)/,
+    // match nothing as muxer does not support text right now.
+    // there cannot never be a character before the start of a string
+    // so this matches nothing.
+    muxerText: /a^/
+  };
+  var mediaTypes = ['video', 'audio', 'text'];
+  var upperMediaTypes = ['Video', 'Audio', 'Text'];
+  /**
+   * Replace the old apple-style `avc1.<dd>.<dd>` codec string with the standard
+   * `avc1.<hhhhhh>`
+   *
+   * @param {string} codec
+   *        Codec string to translate
+   * @return {string}
+   *         The translated codec string
+   */
+
+  var translateLegacyCodec = function translateLegacyCodec(codec) {
+    if (!codec) {
+      return codec;
+    }
+    return codec.replace(/avc1\.(\d+)\.(\d+)/i, function (orig, profile, avcLevel) {
+      var profileHex = ('00' + Number(profile).toString(16)).slice(-2);
+      var avcLevelHex = ('00' + Number(avcLevel).toString(16)).slice(-2);
+      return 'avc1.' + profileHex + '00' + avcLevelHex;
+    });
+  };
+  /**
+   * @typedef {Object} ParsedCodecInfo
+   * @property {number} codecCount
+   *           Number of codecs parsed
+   * @property {string} [videoCodec]
+   *           Parsed video codec (if found)
+   * @property {string} [videoObjectTypeIndicator]
+   *           Video object type indicator (if found)
+   * @property {string|null} audioProfile
+   *           Audio profile
+   */
+
+  /**
+   * Parses a codec string to retrieve the number of codecs specified, the video codec and
+   * object type indicator, and the audio profile.
+   *
+   * @param {string} [codecString]
+   *        The codec string to parse
+   * @return {ParsedCodecInfo}
+   *         Parsed codec info
+   */
+
+  var parseCodecs = function parseCodecs(codecString) {
+    if (codecString === void 0) {
+      codecString = '';
+    }
+    var codecs = codecString.split(',');
+    var result = [];
+    codecs.forEach(function (codec) {
+      codec = codec.trim();
+      var codecType;
+      mediaTypes.forEach(function (name) {
+        var match = regexs[name].exec(codec.toLowerCase());
+        if (!match || match.length <= 1) {
+          return;
+        }
+        codecType = name; // maintain codec case
+
+        var type = codec.substring(0, match[1].length);
+        var details = codec.replace(type, '');
+        result.push({
+          type: type,
+          details: details,
+          mediaType: name
+        });
+      });
+      if (!codecType) {
+        result.push({
+          type: codec,
+          details: '',
+          mediaType: 'unknown'
+        });
+      }
+    });
+    return result;
+  };
+  /**
+   * Returns a ParsedCodecInfo object for the default alternate audio playlist if there is
+   * a default alternate audio playlist for the provided audio group.
+   *
+   * @param {Object} master
+   *        The master playlist
+   * @param {string} audioGroupId
+   *        ID of the audio group for which to find the default codec info
+   * @return {ParsedCodecInfo}
+   *         Parsed codec info
+   */
+
+  var codecsFromDefault = function codecsFromDefault(master, audioGroupId) {
+    if (!master.mediaGroups.AUDIO || !audioGroupId) {
+      return null;
+    }
+    var audioGroup = master.mediaGroups.AUDIO[audioGroupId];
+    if (!audioGroup) {
+      return null;
+    }
+    for (var name in audioGroup) {
+      var audioType = audioGroup[name];
+      if (audioType.default && audioType.playlists) {
+        // codec should be the same for all playlists within the audio type
+        return parseCodecs(audioType.playlists[0].attributes.CODECS);
+      }
+    }
+    return null;
+  };
+  var isAudioCodec = function isAudioCodec(codec) {
+    if (codec === void 0) {
+      codec = '';
+    }
+    return regexs.audio.test(codec.trim().toLowerCase());
+  };
+  var isTextCodec = function isTextCodec(codec) {
+    if (codec === void 0) {
+      codec = '';
+    }
+    return regexs.text.test(codec.trim().toLowerCase());
+  };
+  var getMimeForCodec = function getMimeForCodec(codecString) {
+    if (!codecString || typeof codecString !== 'string') {
+      return;
+    }
+    var codecs = codecString.toLowerCase().split(',').map(function (c) {
+      return translateLegacyCodec(c.trim());
+    }); // default to video type
+
+    var type = 'video'; // only change to audio type if the only codec we have is
+    // audio
+
+    if (codecs.length === 1 && isAudioCodec(codecs[0])) {
+      type = 'audio';
+    } else if (codecs.length === 1 && isTextCodec(codecs[0])) {
+      // text uses application/<container> for now
+      type = 'application';
+    } // default the container to mp4
+
+    var container = 'mp4'; // every codec must be able to go into the container
+    // for that container to be the correct one
+
+    if (codecs.every(function (c) {
+      return regexs.mp4.test(c);
+    })) {
+      container = 'mp4';
+    } else if (codecs.every(function (c) {
+      return regexs.webm.test(c);
+    })) {
+      container = 'webm';
+    } else if (codecs.every(function (c) {
+      return regexs.ogg.test(c);
+    })) {
+      container = 'ogg';
+    }
+    return type + "/" + container + ";codecs=\"" + codecString + "\"";
+  };
+  var browserSupportsCodec = function browserSupportsCodec(codecString) {
+    if (codecString === void 0) {
+      codecString = '';
+    }
+    return window.MediaSource && window.MediaSource.isTypeSupported && window.MediaSource.isTypeSupported(getMimeForCodec(codecString)) || false;
+  };
+  var muxerSupportsCodec = function muxerSupportsCodec(codecString) {
+    if (codecString === void 0) {
+      codecString = '';
+    }
+    return codecString.toLowerCase().split(',').every(function (codec) {
+      codec = codec.trim(); // any match is supported.
+
+      for (var i = 0; i < upperMediaTypes.length; i++) {
+        var type = upperMediaTypes[i];
+        if (regexs["muxer" + type].test(codec)) {
+          return true;
+        }
+      }
+      return false;
+    });
+  };
+  var DEFAULT_AUDIO_CODEC = 'mp4a.40.2';
+  var DEFAULT_VIDEO_CODEC = 'avc1.4d400d';
+
+  var MPEGURL_REGEX = /^(audio|video|application)\/(x-|vnd\.apple\.)?mpegurl/i;
+  var DASH_REGEX = /^application\/dash\+xml/i;
+  /**
+   * Returns a string that describes the type of source based on a video source object's
+   * media type.
+   *
+   * @see {@link https://dev.w3.org/html5/pf-summary/video.html#dom-source-type|Source Type}
+   *
+   * @param {string} type
+   *        Video source object media type
+   * @return {('hls'|'dash'|'vhs-json'|null)}
+   *         VHS source type string
+   */
+
+  var simpleTypeFromSourceType = function simpleTypeFromSourceType(type) {
+    if (MPEGURL_REGEX.test(type)) {
+      return 'hls';
+    }
+    if (DASH_REGEX.test(type)) {
+      return 'dash';
+    } // Denotes the special case of a manifest object passed to http-streaming instead of a
+    // source URL.
+    //
+    // See https://en.wikipedia.org/wiki/Media_type for details on specifying media types.
+    //
+    // In this case, vnd stands for vendor, video.js for the organization, VHS for this
+    // project, and the +json suffix identifies the structure of the media type.
+
+    if (type === 'application/vnd.videojs.vhs+json') {
+      return 'vhs-json';
+    }
+    return null;
+  };
+
+  // const log2 = Math.log2 ? Math.log2 : (x) => (Math.log(x) / Math.log(2));
+  // we used to do this with log2 but BigInt does not support builtin math
+  // Math.ceil(log2(x));
+
+  var countBits = function countBits(x) {
+    return x.toString(2).length;
+  }; // count the number of whole bytes it would take to represent a number
+
+  var countBytes = function countBytes(x) {
+    return Math.ceil(countBits(x) / 8);
+  };
+  var isArrayBufferView = function isArrayBufferView(obj) {
+    if (ArrayBuffer.isView === 'function') {
+      return ArrayBuffer.isView(obj);
+    }
+    return obj && obj.buffer instanceof ArrayBuffer;
+  };
+  var isTypedArray = function isTypedArray(obj) {
+    return isArrayBufferView(obj);
+  };
+  var toUint8 = function toUint8(bytes) {
+    if (bytes instanceof Uint8Array) {
+      return bytes;
+    }
+    if (!Array.isArray(bytes) && !isTypedArray(bytes) && !(bytes instanceof ArrayBuffer)) {
+      // any non-number or NaN leads to empty uint8array
+      // eslint-disable-next-line
+      if (typeof bytes !== 'number' || typeof bytes === 'number' && bytes !== bytes) {
+        bytes = 0;
+      } else {
+        bytes = [bytes];
+      }
+    }
+    return new Uint8Array(bytes && bytes.buffer || bytes, bytes && bytes.byteOffset || 0, bytes && bytes.byteLength || 0);
+  };
+  var BigInt = window.BigInt || Number;
+  var BYTE_TABLE = [BigInt('0x1'), BigInt('0x100'), BigInt('0x10000'), BigInt('0x1000000'), BigInt('0x100000000'), BigInt('0x10000000000'), BigInt('0x1000000000000'), BigInt('0x100000000000000'), BigInt('0x10000000000000000')];
+  (function () {
+    var a = new Uint16Array([0xFFCC]);
+    var b = new Uint8Array(a.buffer, a.byteOffset, a.byteLength);
+    if (b[0] === 0xFF) {
+      return 'big';
+    }
+    if (b[0] === 0xCC) {
+      return 'little';
+    }
+    return 'unknown';
+  })();
+  var bytesToNumber = function bytesToNumber(bytes, _temp) {
+    var _ref = _temp === void 0 ? {} : _temp,
+      _ref$signed = _ref.signed,
+      signed = _ref$signed === void 0 ? false : _ref$signed,
+      _ref$le = _ref.le,
+      le = _ref$le === void 0 ? false : _ref$le;
+    bytes = toUint8(bytes);
+    var fn = le ? 'reduce' : 'reduceRight';
+    var obj = bytes[fn] ? bytes[fn] : Array.prototype[fn];
+    var number = obj.call(bytes, function (total, byte, i) {
+      var exponent = le ? i : Math.abs(i + 1 - bytes.length);
+      return total + BigInt(byte) * BYTE_TABLE[exponent];
+    }, BigInt(0));
+    if (signed) {
+      var max = BYTE_TABLE[bytes.length] / BigInt(2) - BigInt(1);
+      number = BigInt(number);
+      if (number > max) {
+        number -= max;
+        number -= max;
+        number -= BigInt(2);
+      }
+    }
+    return Number(number);
+  };
+  var numberToBytes = function numberToBytes(number, _temp2) {
+    var _ref2 = _temp2 === void 0 ? {} : _temp2,
+      _ref2$le = _ref2.le,
+      le = _ref2$le === void 0 ? false : _ref2$le;
+
+    // eslint-disable-next-line
+    if (typeof number !== 'bigint' && typeof number !== 'number' || typeof number === 'number' && number !== number) {
+      number = 0;
+    }
+    number = BigInt(number);
+    var byteCount = countBytes(number);
+    var bytes = new Uint8Array(new ArrayBuffer(byteCount));
+    for (var i = 0; i < byteCount; i++) {
+      var byteIndex = le ? i : Math.abs(i + 1 - bytes.length);
+      bytes[byteIndex] = Number(number / BYTE_TABLE[i] & BigInt(0xFF));
+      if (number < 0) {
+        bytes[byteIndex] = Math.abs(~bytes[byteIndex]);
+        bytes[byteIndex] -= i === 0 ? 1 : 2;
+      }
+    }
+    return bytes;
+  };
+  var stringToBytes = function stringToBytes(string, stringIsBytes) {
+    if (typeof string !== 'string' && string && typeof string.toString === 'function') {
+      string = string.toString();
+    }
+    if (typeof string !== 'string') {
+      return new Uint8Array();
+    } // If the string already is bytes, we don't have to do this
+    // otherwise we do this so that we split multi length characters
+    // into individual bytes
+
+    if (!stringIsBytes) {
+      string = unescape(encodeURIComponent(string));
+    }
+    var view = new Uint8Array(string.length);
+    for (var i = 0; i < string.length; i++) {
+      view[i] = string.charCodeAt(i);
+    }
+    return view;
+  };
+  var concatTypedArrays = function concatTypedArrays() {
+    for (var _len = arguments.length, buffers = new Array(_len), _key = 0; _key < _len; _key++) {
+      buffers[_key] = arguments[_key];
+    }
+    buffers = buffers.filter(function (b) {
+      return b && (b.byteLength || b.length) && typeof b !== 'string';
+    });
+    if (buffers.length <= 1) {
+      // for 0 length we will return empty uint8
+      // for 1 length we return the first uint8
+      return toUint8(buffers[0]);
+    }
+    var totalLen = buffers.reduce(function (total, buf, i) {
+      return total + (buf.byteLength || buf.length);
+    }, 0);
+    var tempBuffer = new Uint8Array(totalLen);
+    var offset = 0;
+    buffers.forEach(function (buf) {
+      buf = toUint8(buf);
+      tempBuffer.set(buf, offset);
+      offset += buf.byteLength;
+    });
+    return tempBuffer;
+  };
+  /**
+   * Check if the bytes "b" are contained within bytes "a".
+   *
+   * @param {Uint8Array|Array} a
+   *        Bytes to check in
+   *
+   * @param {Uint8Array|Array} b
+   *        Bytes to check for
+   *
+   * @param {Object} options
+   *        options
+   *
+   * @param {Array|Uint8Array} [offset=0]
+   *        offset to use when looking at bytes in a
+   *
+   * @param {Array|Uint8Array} [mask=[]]
+   *        mask to use on bytes before comparison.
+   *
+   * @return {boolean}
+   *         If all bytes in b are inside of a, taking into account
+   *         bit masks.
+   */
+
+  var bytesMatch = function bytesMatch(a, b, _temp3) {
+    var _ref3 = _temp3 === void 0 ? {} : _temp3,
+      _ref3$offset = _ref3.offset,
+      offset = _ref3$offset === void 0 ? 0 : _ref3$offset,
+      _ref3$mask = _ref3.mask,
+      mask = _ref3$mask === void 0 ? [] : _ref3$mask;
+    a = toUint8(a);
+    b = toUint8(b); // ie 11 does not support uint8 every
+
+    var fn = b.every ? b.every : Array.prototype.every;
+    return b.length && a.length - offset >= b.length &&
+    // ie 11 doesn't support every on uin8
+    fn.call(b, function (bByte, i) {
+      var aByte = mask[i] ? mask[i] & a[offset + i] : a[offset + i];
+      return bByte === aByte;
+    });
+  };
+
+  /**
+   * Loops through all supported media groups in master and calls the provided
+   * callback for each group
+   *
+   * @param {Object} master
+   *        The parsed master manifest object
+   * @param {string[]} groups
+   *        The media groups to call the callback for
+   * @param {Function} callback
+   *        Callback to call for each media group
+   */
+  var forEachMediaGroup$1 = function forEachMediaGroup(master, groups, callback) {
+    groups.forEach(function (mediaType) {
+      for (var groupKey in master.mediaGroups[mediaType]) {
+        for (var labelKey in master.mediaGroups[mediaType][groupKey]) {
+          var mediaProperties = master.mediaGroups[mediaType][groupKey][labelKey];
+          callback(mediaProperties, mediaType, groupKey, labelKey);
+        }
+      }
+    });
+  };
+
+  var atob = function atob(s) {
+    return window.atob ? window.atob(s) : Buffer.from(s, 'base64').toString('binary');
+  };
+  function decodeB64ToUint8Array(b64Text) {
+    var decodedString = atob(b64Text);
+    var array = new Uint8Array(decodedString.length);
+    for (var i = 0; i < decodedString.length; i++) {
+      array[i] = decodedString.charCodeAt(i);
+    }
+    return array;
+  }
+
+  /**
+   * Ponyfill for `Array.prototype.find` which is only available in ES6 runtimes.
+   *
+   * Works with anything that has a `length` property and index access properties, including NodeList.
+   *
+   * @template {unknown} T
+   * @param {Array<T> | ({length:number, [number]: T})} list
+   * @param {function (item: T, index: number, list:Array<T> | ({length:number, [number]: T})):boolean} predicate
+   * @param {Partial<Pick<ArrayConstructor['prototype'], 'find'>>?} ac `Array.prototype` by default,
+   * 				allows injecting a custom implementation in tests
+   * @returns {T | undefined}
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
+   * @see https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.find
+   */
+  function find$1(list, predicate, ac) {
+    if (ac === undefined) {
+      ac = Array.prototype;
+    }
+    if (list && typeof ac.find === 'function') {
+      return ac.find.call(list, predicate);
+    }
+    for (var i = 0; i < list.length; i++) {
+      if (Object.prototype.hasOwnProperty.call(list, i)) {
+        var item = list[i];
+        if (predicate.call(undefined, item, i, list)) {
+          return item;
+        }
+      }
+    }
+  }
+
+  /**
+   * "Shallow freezes" an object to render it immutable.
+   * Uses `Object.freeze` if available,
+   * otherwise the immutability is only in the type.
+   *
+   * Is used to create "enum like" objects.
+   *
+   * @template T
+   * @param {T} object the object to freeze
+   * @param {Pick<ObjectConstructor, 'freeze'> = Object} oc `Object` by default,
+   * 				allows to inject custom object constructor for tests
+   * @returns {Readonly<T>}
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
+   */
+  function freeze(object, oc) {
+    if (oc === undefined) {
+      oc = Object;
+    }
+    return oc && typeof oc.freeze === 'function' ? oc.freeze(object) : object;
+  }
+
+  /**
+   * Since we can not rely on `Object.assign` we provide a simplified version
+   * that is sufficient for our needs.
+   *
+   * @param {Object} target
+   * @param {Object | null | undefined} source
+   *
+   * @returns {Object} target
+   * @throws TypeError if target is not an object
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+   * @see https://tc39.es/ecma262/multipage/fundamental-objects.html#sec-object.assign
+   */
+  function assign(target, source) {
+    if (target === null || typeof target !== 'object') {
+      throw new TypeError('target is not an object');
+    }
+    for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+
+  /**
+   * All mime types that are allowed as input to `DOMParser.parseFromString`
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString#Argument02 MDN
+   * @see https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#domparsersupportedtype WHATWG HTML Spec
+   * @see DOMParser.prototype.parseFromString
+   */
+  var MIME_TYPE = freeze({
+    /**
+     * `text/html`, the only mime type that triggers treating an XML document as HTML.
+     *
+     * @see DOMParser.SupportedType.isHTML
+     * @see https://www.iana.org/assignments/media-types/text/html IANA MimeType registration
+     * @see https://en.wikipedia.org/wiki/HTML Wikipedia
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString MDN
+     * @see https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#dom-domparser-parsefromstring WHATWG HTML Spec
+     */
+    HTML: 'text/html',
+    /**
+     * Helper method to check a mime type if it indicates an HTML document
+     *
+     * @param {string} [value]
+     * @returns {boolean}
+     *
+     * @see https://www.iana.org/assignments/media-types/text/html IANA MimeType registration
+     * @see https://en.wikipedia.org/wiki/HTML Wikipedia
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString MDN
+     * @see https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#dom-domparser-parsefromstring 	 */
+    isHTML: function (value) {
+      return value === MIME_TYPE.HTML;
+    },
+    /**
+     * `application/xml`, the standard mime type for XML documents.
+     *
+     * @see https://www.iana.org/assignments/media-types/application/xml IANA MimeType registration
+     * @see https://tools.ietf.org/html/rfc7303#section-9.1 RFC 7303
+     * @see https://en.wikipedia.org/wiki/XML_and_MIME Wikipedia
+     */
+    XML_APPLICATION: 'application/xml',
+    /**
+     * `text/html`, an alias for `application/xml`.
+     *
+     * @see https://tools.ietf.org/html/rfc7303#section-9.2 RFC 7303
+     * @see https://www.iana.org/assignments/media-types/text/xml IANA MimeType registration
+     * @see https://en.wikipedia.org/wiki/XML_and_MIME Wikipedia
+     */
+    XML_TEXT: 'text/xml',
+    /**
+     * `application/xhtml+xml`, indicates an XML document that has the default HTML namespace,
+     * but is parsed as an XML document.
+     *
+     * @see https://www.iana.org/assignments/media-types/application/xhtml+xml IANA MimeType registration
+     * @see https://dom.spec.whatwg.org/#dom-domimplementation-createdocument WHATWG DOM Spec
+     * @see https://en.wikipedia.org/wiki/XHTML Wikipedia
+     */
+    XML_XHTML_APPLICATION: 'application/xhtml+xml',
+    /**
+     * `image/svg+xml`,
+     *
+     * @see https://www.iana.org/assignments/media-types/image/svg+xml IANA MimeType registration
+     * @see https://www.w3.org/TR/SVG11/ W3C SVG 1.1
+     * @see https://en.wikipedia.org/wiki/Scalable_Vector_Graphics Wikipedia
+     */
+    XML_SVG_IMAGE: 'image/svg+xml'
+  });
+
+  /**
+   * Namespaces that are used in this code base.
+   *
+   * @see http://www.w3.org/TR/REC-xml-names
+   */
+  var NAMESPACE$3 = freeze({
+    /**
+     * The XHTML namespace.
+     *
+     * @see http://www.w3.org/1999/xhtml
+     */
+    HTML: 'http://www.w3.org/1999/xhtml',
+    /**
+     * Checks if `uri` equals `NAMESPACE.HTML`.
+     *
+     * @param {string} [uri]
+     *
+     * @see NAMESPACE.HTML
+     */
+    isHTML: function (uri) {
+      return uri === NAMESPACE$3.HTML;
+    },
+    /**
+     * The SVG namespace.
+     *
+     * @see http://www.w3.org/2000/svg
+     */
+    SVG: 'http://www.w3.org/2000/svg',
+    /**
+     * The `xml:` namespace.
+     *
+     * @see http://www.w3.org/XML/1998/namespace
+     */
+    XML: 'http://www.w3.org/XML/1998/namespace',
+    /**
+     * The `xmlns:` namespace
+     *
+     * @see https://www.w3.org/2000/xmlns/
+     */
+    XMLNS: 'http://www.w3.org/2000/xmlns/'
+  });
+  var assign_1 = assign;
+  var find_1 = find$1;
+  var freeze_1 = freeze;
+  var MIME_TYPE_1 = MIME_TYPE;
+  var NAMESPACE_1 = NAMESPACE$3;
+  var conventions = {
+    assign: assign_1,
+    find: find_1,
+    freeze: freeze_1,
+    MIME_TYPE: MIME_TYPE_1,
+    NAMESPACE: NAMESPACE_1
+  };
+
+  var find = conventions.find;
+  var NAMESPACE$2 = conventions.NAMESPACE;
+
+  /**
+   * A prerequisite for `[].filter`, to drop elements that are empty
+   * @param {string} input
+   * @returns {boolean}
+   */
+  function notEmptyString(input) {
+    return input !== '';
+  }
+  /**
+   * @see https://infra.spec.whatwg.org/#split-on-ascii-whitespace
+   * @see https://infra.spec.whatwg.org/#ascii-whitespace
+   *
+   * @param {string} input
+   * @returns {string[]} (can be empty)
+   */
+  function splitOnASCIIWhitespace(input) {
+    // U+0009 TAB, U+000A LF, U+000C FF, U+000D CR, U+0020 SPACE
+    return input ? input.split(/[\t\n\f\r ]+/).filter(notEmptyString) : [];
+  }
+
+  /**
+   * Adds element as a key to current if it is not already present.
+   *
+   * @param {Record<string, boolean | undefined>} current
+   * @param {string} element
+   * @returns {Record<string, boolean | undefined>}
+   */
+  function orderedSetReducer(current, element) {
+    if (!current.hasOwnProperty(element)) {
+      current[element] = true;
+    }
+    return current;
+  }
+
+  /**
+   * @see https://infra.spec.whatwg.org/#ordered-set
+   * @param {string} input
+   * @returns {string[]}
+   */
+  function toOrderedSet(input) {
+    if (!input) return [];
+    var list = splitOnASCIIWhitespace(input);
+    return Object.keys(list.reduce(orderedSetReducer, {}));
+  }
+
+  /**
+   * Uses `list.indexOf` to implement something like `Array.prototype.includes`,
+   * which we can not rely on being available.
+   *
+   * @param {any[]} list
+   * @returns {function(any): boolean}
+   */
+  function arrayIncludes(list) {
+    return function (element) {
+      return list && list.indexOf(element) !== -1;
+    };
+  }
+  function copy(src, dest) {
+    for (var p in src) {
+      if (Object.prototype.hasOwnProperty.call(src, p)) {
+        dest[p] = src[p];
+      }
+    }
+  }
+
+  /**
+  ^\w+\.prototype\.([_\w]+)\s*=\s*((?:.*\{\s*?[\r\n][\s\S]*?^})|\S.*?(?=[;\r\n]));?
+  ^\w+\.prototype\.([_\w]+)\s*=\s*(\S.*?(?=[;\r\n]));?
+   */
+  function _extends(Class, Super) {
+    var pt = Class.prototype;
+    if (!(pt instanceof Super)) {
+      function t() {}
+      t.prototype = Super.prototype;
+      t = new t();
+      copy(pt, t);
+      Class.prototype = pt = t;
+    }
+    if (pt.constructor != Class) {
+      if (typeof Class != 'function') {
+        console.error("unknown Class:" + Class);
+      }
+      pt.constructor = Class;
+    }
+  }
+
+  // Node Types
+  var NodeType = {};
+  var ELEMENT_NODE = NodeType.ELEMENT_NODE = 1;
+  var ATTRIBUTE_NODE = NodeType.ATTRIBUTE_NODE = 2;
+  var TEXT_NODE = NodeType.TEXT_NODE = 3;
+  var CDATA_SECTION_NODE = NodeType.CDATA_SECTION_NODE = 4;
+  var ENTITY_REFERENCE_NODE = NodeType.ENTITY_REFERENCE_NODE = 5;
+  var ENTITY_NODE = NodeType.ENTITY_NODE = 6;
+  var PROCESSING_INSTRUCTION_NODE = NodeType.PROCESSING_INSTRUCTION_NODE = 7;
+  var COMMENT_NODE = NodeType.COMMENT_NODE = 8;
+  var DOCUMENT_NODE = NodeType.DOCUMENT_NODE = 9;
+  var DOCUMENT_TYPE_NODE = NodeType.DOCUMENT_TYPE_NODE = 10;
+  var DOCUMENT_FRAGMENT_NODE = NodeType.DOCUMENT_FRAGMENT_NODE = 11;
+  var NOTATION_NODE = NodeType.NOTATION_NODE = 12;
+
+  // ExceptionCode
+  var ExceptionCode = {};
+  var ExceptionMessage = {};
+  ExceptionCode.INDEX_SIZE_ERR = (ExceptionMessage[1] = "Index size error", 1);
+  ExceptionCode.DOMSTRING_SIZE_ERR = (ExceptionMessage[2] = "DOMString size error", 2);
+  var HIERARCHY_REQUEST_ERR = ExceptionCode.HIERARCHY_REQUEST_ERR = (ExceptionMessage[3] = "Hierarchy request error", 3);
+  ExceptionCode.WRONG_DOCUMENT_ERR = (ExceptionMessage[4] = "Wrong document", 4);
+  ExceptionCode.INVALID_CHARACTER_ERR = (ExceptionMessage[5] = "Invalid character", 5);
+  ExceptionCode.NO_DATA_ALLOWED_ERR = (ExceptionMessage[6] = "No data allowed", 6);
+  ExceptionCode.NO_MODIFICATION_ALLOWED_ERR = (ExceptionMessage[7] = "No modification allowed", 7);
+  var NOT_FOUND_ERR = ExceptionCode.NOT_FOUND_ERR = (ExceptionMessage[8] = "Not found", 8);
+  ExceptionCode.NOT_SUPPORTED_ERR = (ExceptionMessage[9] = "Not supported", 9);
+  var INUSE_ATTRIBUTE_ERR = ExceptionCode.INUSE_ATTRIBUTE_ERR = (ExceptionMessage[10] = "Attribute in use", 10);
+  //level2
+  ExceptionCode.INVALID_STATE_ERR = (ExceptionMessage[11] = "Invalid state", 11);
+  ExceptionCode.SYNTAX_ERR = (ExceptionMessage[12] = "Syntax error", 12);
+  ExceptionCode.INVALID_MODIFICATION_ERR = (ExceptionMessage[13] = "Invalid modification", 13);
+  ExceptionCode.NAMESPACE_ERR = (ExceptionMessage[14] = "Invalid namespace", 14);
+  ExceptionCode.INVALID_ACCESS_ERR = (ExceptionMessage[15] = "Invalid access", 15);
+
+  /**
+   * DOM Level 2
+   * Object DOMException
+   * @see http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/ecma-script-binding.html
+   * @see http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html
+   */
+  function DOMException(code, message) {
+    if (message instanceof Error) {
+      var error = message;
+    } else {
+      error = this;
+      Error.call(this, ExceptionMessage[code]);
+      this.message = ExceptionMessage[code];
+      if (Error.captureStackTrace) Error.captureStackTrace(this, DOMException);
+    }
+    error.code = code;
+    if (message) this.message = this.message + ": " + message;
+    return error;
+  }
+  DOMException.prototype = Error.prototype;
+  copy(ExceptionCode, DOMException);
+
+  /**
+   * @see http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-536297177
+   * The NodeList interface provides the abstraction of an ordered collection of nodes, without defining or constraining how this collection is implemented. NodeList objects in the DOM are live.
+   * The items in the NodeList are accessible via an integral index, starting from 0.
+   */
+  function NodeList() {}
+  NodeList.prototype = {
+    /**
+     * The number of nodes in the list. The range of valid child node indices is 0 to length-1 inclusive.
+     * @standard level1
+     */
+    length: 0,
+    /**
+     * Returns the indexth item in the collection. If index is greater than or equal to the number of nodes in the list, this returns null.
+     * @standard level1
+     * @param index  unsigned long
+     *   Index into the collection.
+     * @return Node
+     * 	The node at the indexth position in the NodeList, or null if that is not a valid index.
+     */
+    item: function (index) {
+      return index >= 0 && index < this.length ? this[index] : null;
+    },
+    toString: function (isHTML, nodeFilter) {
+      for (var buf = [], i = 0; i < this.length; i++) {
+        serializeToString(this[i], buf, isHTML, nodeFilter);
+      }
+      return buf.join('');
+    },
+    /**
+     * @private
+     * @param {function (Node):boolean} predicate
+     * @returns {Node[]}
+     */
+    filter: function (predicate) {
+      return Array.prototype.filter.call(this, predicate);
+    },
+    /**
+     * @private
+     * @param {Node} item
+     * @returns {number}
+     */
+    indexOf: function (item) {
+      return Array.prototype.indexOf.call(this, item);
+    }
+  };
+  function LiveNodeList(node, refresh) {
+    this._node = node;
+    this._refresh = refresh;
+    _updateLiveList(this);
+  }
+  function _updateLiveList(list) {
+    var inc = list._node._inc || list._node.ownerDocument._inc;
+    if (list._inc !== inc) {
+      var ls = list._refresh(list._node);
+      __set__(list, 'length', ls.length);
+      if (!list.$$length || ls.length < list.$$length) {
+        for (var i = ls.length; (i in list); i++) {
+          if (Object.prototype.hasOwnProperty.call(list, i)) {
+            delete list[i];
+          }
+        }
+      }
+      copy(ls, list);
+      list._inc = inc;
+    }
+  }
+  LiveNodeList.prototype.item = function (i) {
+    _updateLiveList(this);
+    return this[i] || null;
+  };
+  _extends(LiveNodeList, NodeList);
+
+  /**
+   * Objects implementing the NamedNodeMap interface are used
+   * to represent collections of nodes that can be accessed by name.
+   * Note that NamedNodeMap does not inherit from NodeList;
+   * NamedNodeMaps are not maintained in any particular order.
+   * Objects contained in an object implementing NamedNodeMap may also be accessed by an ordinal index,
+   * but this is simply to allow convenient enumeration of the contents of a NamedNodeMap,
+   * and does not imply that the DOM specifies an order to these Nodes.
+   * NamedNodeMap objects in the DOM are live.
+   * used for attributes or DocumentType entities
+   */
+  function NamedNodeMap() {}
+  function _findNodeIndex(list, node) {
+    var i = list.length;
+    while (i--) {
+      if (list[i] === node) {
+        return i;
+      }
+    }
+  }
+  function _addNamedNode(el, list, newAttr, oldAttr) {
+    if (oldAttr) {
+      list[_findNodeIndex(list, oldAttr)] = newAttr;
+    } else {
+      list[list.length++] = newAttr;
+    }
+    if (el) {
+      newAttr.ownerElement = el;
+      var doc = el.ownerDocument;
+      if (doc) {
+        oldAttr && _onRemoveAttribute(doc, el, oldAttr);
+        _onAddAttribute(doc, el, newAttr);
+      }
+    }
+  }
+  function _removeNamedNode(el, list, attr) {
+    //console.log('remove attr:'+attr)
+    var i = _findNodeIndex(list, attr);
+    if (i >= 0) {
+      var lastIndex = list.length - 1;
+      while (i < lastIndex) {
+        list[i] = list[++i];
+      }
+      list.length = lastIndex;
+      if (el) {
+        var doc = el.ownerDocument;
+        if (doc) {
+          _onRemoveAttribute(doc, el, attr);
+          attr.ownerElement = null;
+        }
+      }
+    } else {
+      throw new DOMException(NOT_FOUND_ERR, new Error(el.tagName + '@' + attr));
+    }
+  }
+  NamedNodeMap.prototype = {
+    length: 0,
+    item: NodeList.prototype.item,
+    getNamedItem: function (key) {
+      //		if(key.indexOf(':')>0 || key == 'xmlns'){
+      //			return null;
+      //		}
+      //console.log()
+      var i = this.length;
+      while (i--) {
+        var attr = this[i];
+        //console.log(attr.nodeName,key)
+        if (attr.nodeName == key) {
+          return attr;
+        }
+      }
+    },
+    setNamedItem: function (attr) {
+      var el = attr.ownerElement;
+      if (el && el != this._ownerElement) {
+        throw new DOMException(INUSE_ATTRIBUTE_ERR);
+      }
+      var oldAttr = this.getNamedItem(attr.nodeName);
+      _addNamedNode(this._ownerElement, this, attr, oldAttr);
+      return oldAttr;
+    },
+    /* returns Node */
+    setNamedItemNS: function (attr) {
+      // raises: WRONG_DOCUMENT_ERR,NO_MODIFICATION_ALLOWED_ERR,INUSE_ATTRIBUTE_ERR
+      var el = attr.ownerElement,
+        oldAttr;
+      if (el && el != this._ownerElement) {
+        throw new DOMException(INUSE_ATTRIBUTE_ERR);
+      }
+      oldAttr = this.getNamedItemNS(attr.namespaceURI, attr.localName);
+      _addNamedNode(this._ownerElement, this, attr, oldAttr);
+      return oldAttr;
+    },
+    /* returns Node */
+    removeNamedItem: function (key) {
+      var attr = this.getNamedItem(key);
+      _removeNamedNode(this._ownerElement, this, attr);
+      return attr;
+    },
+    // raises: NOT_FOUND_ERR,NO_MODIFICATION_ALLOWED_ERR
+
+    //for level2
+    removeNamedItemNS: function (namespaceURI, localName) {
+      var attr = this.getNamedItemNS(namespaceURI, localName);
+      _removeNamedNode(this._ownerElement, this, attr);
+      return attr;
+    },
+    getNamedItemNS: function (namespaceURI, localName) {
+      var i = this.length;
+      while (i--) {
+        var node = this[i];
+        if (node.localName == localName && node.namespaceURI == namespaceURI) {
+          return node;
+        }
+      }
+      return null;
+    }
+  };
+
+  /**
+   * The DOMImplementation interface represents an object providing methods
+   * which are not dependent on any particular document.
+   * Such an object is returned by the `Document.implementation` property.
+   *
+   * __The individual methods describe the differences compared to the specs.__
+   *
+   * @constructor
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation MDN
+   * @see https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-102161490 DOM Level 1 Core (Initial)
+   * @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490 DOM Level 2 Core
+   * @see https://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-102161490 DOM Level 3 Core
+   * @see https://dom.spec.whatwg.org/#domimplementation DOM Living Standard
+   */
+  function DOMImplementation$1() {}
+  DOMImplementation$1.prototype = {
+    /**
+     * The DOMImplementation.hasFeature() method returns a Boolean flag indicating if a given feature is supported.
+     * The different implementations fairly diverged in what kind of features were reported.
+     * The latest version of the spec settled to force this method to always return true, where the functionality was accurate and in use.
+     *
+     * @deprecated It is deprecated and modern browsers return true in all cases.
+     *
+     * @param {string} feature
+     * @param {string} [version]
+     * @returns {boolean} always true
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/hasFeature MDN
+     * @see https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-5CED94D7 DOM Level 1 Core
+     * @see https://dom.spec.whatwg.org/#dom-domimplementation-hasfeature DOM Living Standard
+     */
+    hasFeature: function (feature, version) {
+      return true;
+    },
+    /**
+     * Creates an XML Document object of the specified type with its document element.
+     *
+     * __It behaves slightly different from the description in the living standard__:
+     * - There is no interface/class `XMLDocument`, it returns a `Document` instance.
+     * - `contentType`, `encoding`, `mode`, `origin`, `url` fields are currently not declared.
+     * - this implementation is not validating names or qualified names
+     *   (when parsing XML strings, the SAX parser takes care of that)
+     *
+     * @param {string|null} namespaceURI
+     * @param {string} qualifiedName
+     * @param {DocumentType=null} doctype
+     * @returns {Document}
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createDocument MDN
+     * @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#Level-2-Core-DOM-createDocument DOM Level 2 Core (initial)
+     * @see https://dom.spec.whatwg.org/#dom-domimplementation-createdocument  DOM Level 2 Core
+     *
+     * @see https://dom.spec.whatwg.org/#validate-and-extract DOM: Validate and extract
+     * @see https://www.w3.org/TR/xml/#NT-NameStartChar XML Spec: Names
+     * @see https://www.w3.org/TR/xml-names/#ns-qualnames XML Namespaces: Qualified names
+     */
+    createDocument: function (namespaceURI, qualifiedName, doctype) {
+      var doc = new Document();
+      doc.implementation = this;
+      doc.childNodes = new NodeList();
+      doc.doctype = doctype || null;
+      if (doctype) {
+        doc.appendChild(doctype);
+      }
+      if (qualifiedName) {
+        var root = doc.createElementNS(namespaceURI, qualifiedName);
+        doc.appendChild(root);
+      }
+      return doc;
+    },
+    /**
+     * Returns a doctype, with the given `qualifiedName`, `publicId`, and `systemId`.
+     *
+     * __This behavior is slightly different from the in the specs__:
+     * - this implementation is not validating names or qualified names
+     *   (when parsing XML strings, the SAX parser takes care of that)
+     *
+     * @param {string} qualifiedName
+     * @param {string} [publicId]
+     * @param {string} [systemId]
+     * @returns {DocumentType} which can either be used with `DOMImplementation.createDocument` upon document creation
+     * 				  or can be put into the document via methods like `Node.insertBefore()` or `Node.replaceChild()`
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createDocumentType MDN
+     * @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#Level-2-Core-DOM-createDocType DOM Level 2 Core
+     * @see https://dom.spec.whatwg.org/#dom-domimplementation-createdocumenttype DOM Living Standard
+     *
+     * @see https://dom.spec.whatwg.org/#validate-and-extract DOM: Validate and extract
+     * @see https://www.w3.org/TR/xml/#NT-NameStartChar XML Spec: Names
+     * @see https://www.w3.org/TR/xml-names/#ns-qualnames XML Namespaces: Qualified names
+     */
+    createDocumentType: function (qualifiedName, publicId, systemId) {
+      var node = new DocumentType();
+      node.name = qualifiedName;
+      node.nodeName = qualifiedName;
+      node.publicId = publicId || '';
+      node.systemId = systemId || '';
+      return node;
+    }
+  };
+
+  /**
+   * @see http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1950641247
+   */
+
+  function Node() {}
+  Node.prototype = {
+    firstChild: null,
+    lastChild: null,
+    previousSibling: null,
+    nextSibling: null,
+    attributes: null,
+    parentNode: null,
+    childNodes: null,
+    ownerDocument: null,
+    nodeValue: null,
+    namespaceURI: null,
+    prefix: null,
+    localName: null,
+    // Modified in DOM Level 2:
+    insertBefore: function (newChild, refChild) {
+      //raises
+      return _insertBefore(this, newChild, refChild);
+    },
+    replaceChild: function (newChild, oldChild) {
+      //raises
+      _insertBefore(this, newChild, oldChild, assertPreReplacementValidityInDocument);
+      if (oldChild) {
+        this.removeChild(oldChild);
+      }
+    },
+    removeChild: function (oldChild) {
+      return _removeChild(this, oldChild);
+    },
+    appendChild: function (newChild) {
+      return this.insertBefore(newChild, null);
+    },
+    hasChildNodes: function () {
+      return this.firstChild != null;
+    },
+    cloneNode: function (deep) {
+      return cloneNode(this.ownerDocument || this, this, deep);
+    },
+    // Modified in DOM Level 2:
+    normalize: function () {
+      var child = this.firstChild;
+      while (child) {
+        var next = child.nextSibling;
+        if (next && next.nodeType == TEXT_NODE && child.nodeType == TEXT_NODE) {
+          this.removeChild(next);
+          child.appendData(next.data);
+        } else {
+          child.normalize();
+          child = next;
+        }
+      }
+    },
+    // Introduced in DOM Level 2:
+    isSupported: function (feature, version) {
+      return this.ownerDocument.implementation.hasFeature(feature, version);
+    },
+    // Introduced in DOM Level 2:
+    hasAttributes: function () {
+      return this.attributes.length > 0;
+    },
+    /**
+     * Look up the prefix associated to the given namespace URI, starting from this node.
+     * **The default namespace declarations are ignored by this method.**
+     * See Namespace Prefix Lookup for details on the algorithm used by this method.
+     *
+     * _Note: The implementation seems to be incomplete when compared to the algorithm described in the specs._
+     *
+     * @param {string | null} namespaceURI
+     * @returns {string | null}
+     * @see https://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix
+     * @see https://www.w3.org/TR/DOM-Level-3-Core/namespaces-algorithms.html#lookupNamespacePrefixAlgo
+     * @see https://dom.spec.whatwg.org/#dom-node-lookupprefix
+     * @see https://github.com/xmldom/xmldom/issues/322
+     */
+    lookupPrefix: function (namespaceURI) {
+      var el = this;
+      while (el) {
+        var map = el._nsMap;
+        //console.dir(map)
+        if (map) {
+          for (var n in map) {
+            if (Object.prototype.hasOwnProperty.call(map, n) && map[n] === namespaceURI) {
+              return n;
+            }
+          }
+        }
+        el = el.nodeType == ATTRIBUTE_NODE ? el.ownerDocument : el.parentNode;
+      }
+      return null;
+    },
+    // Introduced in DOM Level 3:
+    lookupNamespaceURI: function (prefix) {
+      var el = this;
+      while (el) {
+        var map = el._nsMap;
+        //console.dir(map)
+        if (map) {
+          if (Object.prototype.hasOwnProperty.call(map, prefix)) {
+            return map[prefix];
+          }
+        }
+        el = el.nodeType == ATTRIBUTE_NODE ? el.ownerDocument : el.parentNode;
+      }
+      return null;
+    },
+    // Introduced in DOM Level 3:
+    isDefaultNamespace: function (namespaceURI) {
+      var prefix = this.lookupPrefix(namespaceURI);
+      return prefix == null;
+    }
+  };
+  function _xmlEncoder(c) {
+    return c == '<' && '&lt;' || c == '>' && '&gt;' || c == '&' && '&amp;' || c == '"' && '&quot;' || '&#' + c.charCodeAt() + ';';
+  }
+  copy(NodeType, Node);
+  copy(NodeType, Node.prototype);
+
+  /**
+   * @param callback return true for continue,false for break
+   * @return boolean true: break visit;
+   */
+  function _visitNode(node, callback) {
+    if (callback(node)) {
+      return true;
+    }
+    if (node = node.firstChild) {
+      do {
+        if (_visitNode(node, callback)) {
+          return true;
+        }
+      } while (node = node.nextSibling);
+    }
+  }
+  function Document() {
+    this.ownerDocument = this;
+  }
+  function _onAddAttribute(doc, el, newAttr) {
+    doc && doc._inc++;
+    var ns = newAttr.namespaceURI;
+    if (ns === NAMESPACE$2.XMLNS) {
+      //update namespace
+      el._nsMap[newAttr.prefix ? newAttr.localName : ''] = newAttr.value;
+    }
+  }
+  function _onRemoveAttribute(doc, el, newAttr, remove) {
+    doc && doc._inc++;
+    var ns = newAttr.namespaceURI;
+    if (ns === NAMESPACE$2.XMLNS) {
+      //update namespace
+      delete el._nsMap[newAttr.prefix ? newAttr.localName : ''];
+    }
+  }
+
+  /**
+   * Updates `el.childNodes`, updating the indexed items and it's `length`.
+   * Passing `newChild` means it will be appended.
+   * Otherwise it's assumed that an item has been removed,
+   * and `el.firstNode` and it's `.nextSibling` are used
+   * to walk the current list of child nodes.
+   *
+   * @param {Document} doc
+   * @param {Node} el
+   * @param {Node} [newChild]
+   * @private
+   */
+  function _onUpdateChild(doc, el, newChild) {
+    if (doc && doc._inc) {
+      doc._inc++;
+      //update childNodes
+      var cs = el.childNodes;
+      if (newChild) {
+        cs[cs.length++] = newChild;
+      } else {
+        var child = el.firstChild;
+        var i = 0;
+        while (child) {
+          cs[i++] = child;
+          child = child.nextSibling;
+        }
+        cs.length = i;
+        delete cs[cs.length];
+      }
+    }
+  }
+
+  /**
+   * Removes the connections between `parentNode` and `child`
+   * and any existing `child.previousSibling` or `child.nextSibling`.
+   *
+   * @see https://github.com/xmldom/xmldom/issues/135
+   * @see https://github.com/xmldom/xmldom/issues/145
+   *
+   * @param {Node} parentNode
+   * @param {Node} child
+   * @returns {Node} the child that was removed.
+   * @private
+   */
+  function _removeChild(parentNode, child) {
+    var previous = child.previousSibling;
+    var next = child.nextSibling;
+    if (previous) {
+      previous.nextSibling = next;
+    } else {
+      parentNode.firstChild = next;
+    }
+    if (next) {
+      next.previousSibling = previous;
+    } else {
+      parentNode.lastChild = previous;
+    }
+    child.parentNode = null;
+    child.previousSibling = null;
+    child.nextSibling = null;
+    _onUpdateChild(parentNode.ownerDocument, parentNode);
+    return child;
+  }
+
+  /**
+   * Returns `true` if `node` can be a parent for insertion.
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function hasValidParentNodeType(node) {
+    return node && (node.nodeType === Node.DOCUMENT_NODE || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE || node.nodeType === Node.ELEMENT_NODE);
+  }
+
+  /**
+   * Returns `true` if `node` can be inserted according to it's `nodeType`.
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function hasInsertableNodeType(node) {
+    return node && (isElementNode(node) || isTextNode(node) || isDocTypeNode(node) || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE || node.nodeType === Node.COMMENT_NODE || node.nodeType === Node.PROCESSING_INSTRUCTION_NODE);
+  }
+
+  /**
+   * Returns true if `node` is a DOCTYPE node
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function isDocTypeNode(node) {
+    return node && node.nodeType === Node.DOCUMENT_TYPE_NODE;
+  }
+
+  /**
+   * Returns true if the node is an element
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function isElementNode(node) {
+    return node && node.nodeType === Node.ELEMENT_NODE;
+  }
+  /**
+   * Returns true if `node` is a text node
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function isTextNode(node) {
+    return node && node.nodeType === Node.TEXT_NODE;
+  }
+
+  /**
+   * Check if en element node can be inserted before `child`, or at the end if child is falsy,
+   * according to the presence and position of a doctype node on the same level.
+   *
+   * @param {Document} doc The document node
+   * @param {Node} child the node that would become the nextSibling if the element would be inserted
+   * @returns {boolean} `true` if an element can be inserted before child
+   * @private
+   * https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   */
+  function isElementInsertionPossible(doc, child) {
+    var parentChildNodes = doc.childNodes || [];
+    if (find(parentChildNodes, isElementNode) || isDocTypeNode(child)) {
+      return false;
+    }
+    var docTypeNode = find(parentChildNodes, isDocTypeNode);
+    return !(child && docTypeNode && parentChildNodes.indexOf(docTypeNode) > parentChildNodes.indexOf(child));
+  }
+
+  /**
+   * Check if en element node can be inserted before `child`, or at the end if child is falsy,
+   * according to the presence and position of a doctype node on the same level.
+   *
+   * @param {Node} doc The document node
+   * @param {Node} child the node that would become the nextSibling if the element would be inserted
+   * @returns {boolean} `true` if an element can be inserted before child
+   * @private
+   * https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   */
+  function isElementReplacementPossible(doc, child) {
+    var parentChildNodes = doc.childNodes || [];
+    function hasElementChildThatIsNotChild(node) {
+      return isElementNode(node) && node !== child;
+    }
+    if (find(parentChildNodes, hasElementChildThatIsNotChild)) {
+      return false;
+    }
+    var docTypeNode = find(parentChildNodes, isDocTypeNode);
+    return !(child && docTypeNode && parentChildNodes.indexOf(docTypeNode) > parentChildNodes.indexOf(child));
+  }
+
+  /**
+   * @private
+   * Steps 1-5 of the checks before inserting and before replacing a child are the same.
+   *
+   * @param {Node} parent the parent node to insert `node` into
+   * @param {Node} node the node to insert
+   * @param {Node=} child the node that should become the `nextSibling` of `node`
+   * @returns {Node}
+   * @throws DOMException for several node combinations that would create a DOM that is not well-formed.
+   * @throws DOMException if `child` is provided but is not a child of `parent`.
+   * @see https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   * @see https://dom.spec.whatwg.org/#concept-node-replace
+   */
+  function assertPreInsertionValidity1to5(parent, node, child) {
+    // 1. If `parent` is not a Document, DocumentFragment, or Element node, then throw a "HierarchyRequestError" DOMException.
+    if (!hasValidParentNodeType(parent)) {
+      throw new DOMException(HIERARCHY_REQUEST_ERR, 'Unexpected parent node type ' + parent.nodeType);
+    }
+    // 2. If `node` is a host-including inclusive ancestor of `parent`, then throw a "HierarchyRequestError" DOMException.
+    // not implemented!
+    // 3. If `child` is non-null and its parent is not `parent`, then throw a "NotFoundError" DOMException.
+    if (child && child.parentNode !== parent) {
+      throw new DOMException(NOT_FOUND_ERR, 'child not in parent');
+    }
+    if (
+    // 4. If `node` is not a DocumentFragment, DocumentType, Element, or CharacterData node, then throw a "HierarchyRequestError" DOMException.
+    !hasInsertableNodeType(node) ||
+    // 5. If either `node` is a Text node and `parent` is a document,
+    // the sax parser currently adds top level text nodes, this will be fixed in 0.9.0
+    // || (node.nodeType === Node.TEXT_NODE && parent.nodeType === Node.DOCUMENT_NODE)
+    // or `node` is a doctype and `parent` is not a document, then throw a "HierarchyRequestError" DOMException.
+    isDocTypeNode(node) && parent.nodeType !== Node.DOCUMENT_NODE) {
+      throw new DOMException(HIERARCHY_REQUEST_ERR, 'Unexpected node type ' + node.nodeType + ' for parent node type ' + parent.nodeType);
+    }
+  }
+
+  /**
+   * @private
+   * Step 6 of the checks before inserting and before replacing a child are different.
+   *
+   * @param {Document} parent the parent node to insert `node` into
+   * @param {Node} node the node to insert
+   * @param {Node | undefined} child the node that should become the `nextSibling` of `node`
+   * @returns {Node}
+   * @throws DOMException for several node combinations that would create a DOM that is not well-formed.
+   * @throws DOMException if `child` is provided but is not a child of `parent`.
+   * @see https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   * @see https://dom.spec.whatwg.org/#concept-node-replace
+   */
+  function assertPreInsertionValidityInDocument(parent, node, child) {
+    var parentChildNodes = parent.childNodes || [];
+    var nodeChildNodes = node.childNodes || [];
+
+    // DocumentFragment
+    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      var nodeChildElements = nodeChildNodes.filter(isElementNode);
+      // If node has more than one element child or has a Text node child.
+      if (nodeChildElements.length > 1 || find(nodeChildNodes, isTextNode)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'More than one element or text in fragment');
+      }
+      // Otherwise, if `node` has one element child and either `parent` has an element child,
+      // `child` is a doctype, or `child` is non-null and a doctype is following `child`.
+      if (nodeChildElements.length === 1 && !isElementInsertionPossible(parent, child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Element in fragment can not be inserted before doctype');
+      }
+    }
+    // Element
+    if (isElementNode(node)) {
+      // `parent` has an element child, `child` is a doctype,
+      // or `child` is non-null and a doctype is following `child`.
+      if (!isElementInsertionPossible(parent, child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Only one element can be added and only after doctype');
+      }
+    }
+    // DocumentType
+    if (isDocTypeNode(node)) {
+      // `parent` has a doctype child,
+      if (find(parentChildNodes, isDocTypeNode)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Only one doctype is allowed');
+      }
+      var parentElementChild = find(parentChildNodes, isElementNode);
+      // `child` is non-null and an element is preceding `child`,
+      if (child && parentChildNodes.indexOf(parentElementChild) < parentChildNodes.indexOf(child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Doctype can only be inserted before an element');
+      }
+      // or `child` is null and `parent` has an element child.
+      if (!child && parentElementChild) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Doctype can not be appended since element is present');
+      }
+    }
+  }
+
+  /**
+   * @private
+   * Step 6 of the checks before inserting and before replacing a child are different.
+   *
+   * @param {Document} parent the parent node to insert `node` into
+   * @param {Node} node the node to insert
+   * @param {Node | undefined} child the node that should become the `nextSibling` of `node`
+   * @returns {Node}
+   * @throws DOMException for several node combinations that would create a DOM that is not well-formed.
+   * @throws DOMException if `child` is provided but is not a child of `parent`.
+   * @see https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   * @see https://dom.spec.whatwg.org/#concept-node-replace
+   */
+  function assertPreReplacementValidityInDocument(parent, node, child) {
+    var parentChildNodes = parent.childNodes || [];
+    var nodeChildNodes = node.childNodes || [];
+
+    // DocumentFragment
+    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      var nodeChildElements = nodeChildNodes.filter(isElementNode);
+      // If `node` has more than one element child or has a Text node child.
+      if (nodeChildElements.length > 1 || find(nodeChildNodes, isTextNode)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'More than one element or text in fragment');
+      }
+      // Otherwise, if `node` has one element child and either `parent` has an element child that is not `child` or a doctype is following `child`.
+      if (nodeChildElements.length === 1 && !isElementReplacementPossible(parent, child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Element in fragment can not be inserted before doctype');
+      }
+    }
+    // Element
+    if (isElementNode(node)) {
+      // `parent` has an element child that is not `child` or a doctype is following `child`.
+      if (!isElementReplacementPossible(parent, child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Only one element can be added and only after doctype');
+      }
+    }
+    // DocumentType
+    if (isDocTypeNode(node)) {
+      function hasDoctypeChildThatIsNotChild(node) {
+        return isDocTypeNode(node) && node !== child;
+      }
+
+      // `parent` has a doctype child that is not `child`,
+      if (find(parentChildNodes, hasDoctypeChildThatIsNotChild)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Only one doctype is allowed');
+      }
+      var parentElementChild = find(parentChildNodes, isElementNode);
+      // or an element is preceding `child`.
+      if (child && parentChildNodes.indexOf(parentElementChild) < parentChildNodes.indexOf(child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Doctype can only be inserted before an element');
+      }
+    }
+  }
+
+  /**
+   * @private
+   * @param {Node} parent the parent node to insert `node` into
+   * @param {Node} node the node to insert
+   * @param {Node=} child the node that should become the `nextSibling` of `node`
+   * @returns {Node}
+   * @throws DOMException for several node combinations that would create a DOM that is not well-formed.
+   * @throws DOMException if `child` is provided but is not a child of `parent`.
+   * @see https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   */
+  function _insertBefore(parent, node, child, _inDocumentAssertion) {
+    // To ensure pre-insertion validity of a node into a parent before a child, run these steps:
+    assertPreInsertionValidity1to5(parent, node, child);
+
+    // If parent is a document, and any of the statements below, switched on the interface node implements,
+    // are true, then throw a "HierarchyRequestError" DOMException.
+    if (parent.nodeType === Node.DOCUMENT_NODE) {
+      (_inDocumentAssertion || assertPreInsertionValidityInDocument)(parent, node, child);
+    }
+    var cp = node.parentNode;
+    if (cp) {
+      cp.removeChild(node); //remove and update
+    }
+
+    if (node.nodeType === DOCUMENT_FRAGMENT_NODE) {
+      var newFirst = node.firstChild;
+      if (newFirst == null) {
+        return node;
+      }
+      var newLast = node.lastChild;
+    } else {
+      newFirst = newLast = node;
+    }
+    var pre = child ? child.previousSibling : parent.lastChild;
+    newFirst.previousSibling = pre;
+    newLast.nextSibling = child;
+    if (pre) {
+      pre.nextSibling = newFirst;
+    } else {
+      parent.firstChild = newFirst;
+    }
+    if (child == null) {
+      parent.lastChild = newLast;
+    } else {
+      child.previousSibling = newLast;
+    }
+    do {
+      newFirst.parentNode = parent;
+    } while (newFirst !== newLast && (newFirst = newFirst.nextSibling));
+    _onUpdateChild(parent.ownerDocument || parent, parent);
+    //console.log(parent.lastChild.nextSibling == null)
+    if (node.nodeType == DOCUMENT_FRAGMENT_NODE) {
+      node.firstChild = node.lastChild = null;
+    }
+    return node;
+  }
+
+  /**
+   * Appends `newChild` to `parentNode`.
+   * If `newChild` is already connected to a `parentNode` it is first removed from it.
+   *
+   * @see https://github.com/xmldom/xmldom/issues/135
+   * @see https://github.com/xmldom/xmldom/issues/145
+   * @param {Node} parentNode
+   * @param {Node} newChild
+   * @returns {Node}
+   * @private
+   */
+  function _appendSingleChild(parentNode, newChild) {
+    if (newChild.parentNode) {
+      newChild.parentNode.removeChild(newChild);
+    }
+    newChild.parentNode = parentNode;
+    newChild.previousSibling = parentNode.lastChild;
+    newChild.nextSibling = null;
+    if (newChild.previousSibling) {
+      newChild.previousSibling.nextSibling = newChild;
+    } else {
+      parentNode.firstChild = newChild;
+    }
+    parentNode.lastChild = newChild;
+    _onUpdateChild(parentNode.ownerDocument, parentNode, newChild);
+    return newChild;
+  }
+  Document.prototype = {
+    //implementation : null,
+    nodeName: '#document',
+    nodeType: DOCUMENT_NODE,
+    /**
+     * The DocumentType node of the document.
+     *
+     * @readonly
+     * @type DocumentType
+     */
+    doctype: null,
+    documentElement: null,
+    _inc: 1,
+    insertBefore: function (newChild, refChild) {
+      //raises
+      if (newChild.nodeType == DOCUMENT_FRAGMENT_NODE) {
+        var child = newChild.firstChild;
+        while (child) {
+          var next = child.nextSibling;
+          this.insertBefore(child, refChild);
+          child = next;
+        }
+        return newChild;
+      }
+      _insertBefore(this, newChild, refChild);
+      newChild.ownerDocument = this;
+      if (this.documentElement === null && newChild.nodeType === ELEMENT_NODE) {
+        this.documentElement = newChild;
+      }
+      return newChild;
+    },
+    removeChild: function (oldChild) {
+      if (this.documentElement == oldChild) {
+        this.documentElement = null;
+      }
+      return _removeChild(this, oldChild);
+    },
+    replaceChild: function (newChild, oldChild) {
+      //raises
+      _insertBefore(this, newChild, oldChild, assertPreReplacementValidityInDocument);
+      newChild.ownerDocument = this;
+      if (oldChild) {
+        this.removeChild(oldChild);
+      }
+      if (isElementNode(newChild)) {
+        this.documentElement = newChild;
+      }
+    },
+    // Introduced in DOM Level 2:
+    importNode: function (importedNode, deep) {
+      return importNode(this, importedNode, deep);
+    },
+    // Introduced in DOM Level 2:
+    getElementById: function (id) {
+      var rtv = null;
+      _visitNode(this.documentElement, function (node) {
+        if (node.nodeType == ELEMENT_NODE) {
+          if (node.getAttribute('id') == id) {
+            rtv = node;
+            return true;
+          }
+        }
+      });
+      return rtv;
+    },
+    /**
+     * The `getElementsByClassName` method of `Document` interface returns an array-like object
+     * of all child elements which have **all** of the given class name(s).
+     *
+     * Returns an empty list if `classeNames` is an empty string or only contains HTML white space characters.
+     *
+     *
+     * Warning: This is a live LiveNodeList.
+     * Changes in the DOM will reflect in the array as the changes occur.
+     * If an element selected by this array no longer qualifies for the selector,
+     * it will automatically be removed. Be aware of this for iteration purposes.
+     *
+     * @param {string} classNames is a string representing the class name(s) to match; multiple class names are separated by (ASCII-)whitespace
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
+     * @see https://dom.spec.whatwg.org/#concept-getelementsbyclassname
+     */
+    getElementsByClassName: function (classNames) {
+      var classNamesSet = toOrderedSet(classNames);
+      return new LiveNodeList(this, function (base) {
+        var ls = [];
+        if (classNamesSet.length > 0) {
+          _visitNode(base.documentElement, function (node) {
+            if (node !== base && node.nodeType === ELEMENT_NODE) {
+              var nodeClassNames = node.getAttribute('class');
+              // can be null if the attribute does not exist
+              if (nodeClassNames) {
+                // before splitting and iterating just compare them for the most common case
+                var matches = classNames === nodeClassNames;
+                if (!matches) {
+                  var nodeClassNamesSet = toOrderedSet(nodeClassNames);
+                  matches = classNamesSet.every(arrayIncludes(nodeClassNamesSet));
+                }
+                if (matches) {
+                  ls.push(node);
+                }
+              }
+            }
+          });
+        }
+        return ls;
+      });
+    },
+    //document factory method:
+    createElement: function (tagName) {
+      var node = new Element();
+      node.ownerDocument = this;
+      node.nodeName = tagName;
+      node.tagName = tagName;
+      node.localName = tagName;
+      node.childNodes = new NodeList();
+      var attrs = node.attributes = new NamedNodeMap();
+      attrs._ownerElement = node;
+      return node;
+    },
+    createDocumentFragment: function () {
+      var node = new DocumentFragment();
+      node.ownerDocument = this;
+      node.childNodes = new NodeList();
+      return node;
+    },
+    createTextNode: function (data) {
+      var node = new Text();
+      node.ownerDocument = this;
+      node.appendData(data);
+      return node;
+    },
+    createComment: function (data) {
+      var node = new Comment();
+      node.ownerDocument = this;
+      node.appendData(data);
+      return node;
+    },
+    createCDATASection: function (data) {
+      var node = new CDATASection();
+      node.ownerDocument = this;
+      node.appendData(data);
+      return node;
+    },
+    createProcessingInstruction: function (target, data) {
+      var node = new ProcessingInstruction();
+      node.ownerDocument = this;
+      node.tagName = node.nodeName = node.target = target;
+      node.nodeValue = node.data = data;
+      return node;
+    },
+    createAttribute: function (name) {
+      var node = new Attr();
+      node.ownerDocument = this;
+      node.name = name;
+      node.nodeName = name;
+      node.localName = name;
+      node.specified = true;
+      return node;
+    },
+    createEntityReference: function (name) {
+      var node = new EntityReference();
+      node.ownerDocument = this;
+      node.nodeName = name;
+      return node;
+    },
+    // Introduced in DOM Level 2:
+    createElementNS: function (namespaceURI, qualifiedName) {
+      var node = new Element();
+      var pl = qualifiedName.split(':');
+      var attrs = node.attributes = new NamedNodeMap();
+      node.childNodes = new NodeList();
+      node.ownerDocument = this;
+      node.nodeName = qualifiedName;
+      node.tagName = qualifiedName;
+      node.namespaceURI = namespaceURI;
+      if (pl.length == 2) {
+        node.prefix = pl[0];
+        node.localName = pl[1];
+      } else {
+        //el.prefix = null;
+        node.localName = qualifiedName;
+      }
+      attrs._ownerElement = node;
+      return node;
+    },
+    // Introduced in DOM Level 2:
+    createAttributeNS: function (namespaceURI, qualifiedName) {
+      var node = new Attr();
+      var pl = qualifiedName.split(':');
+      node.ownerDocument = this;
+      node.nodeName = qualifiedName;
+      node.name = qualifiedName;
+      node.namespaceURI = namespaceURI;
+      node.specified = true;
+      if (pl.length == 2) {
+        node.prefix = pl[0];
+        node.localName = pl[1];
+      } else {
+        //el.prefix = null;
+        node.localName = qualifiedName;
+      }
+      return node;
+    }
+  };
+  _extends(Document, Node);
+  function Element() {
+    this._nsMap = {};
+  }
+  Element.prototype = {
+    nodeType: ELEMENT_NODE,
+    hasAttribute: function (name) {
+      return this.getAttributeNode(name) != null;
+    },
+    getAttribute: function (name) {
+      var attr = this.getAttributeNode(name);
+      return attr && attr.value || '';
+    },
+    getAttributeNode: function (name) {
+      return this.attributes.getNamedItem(name);
+    },
+    setAttribute: function (name, value) {
+      var attr = this.ownerDocument.createAttribute(name);
+      attr.value = attr.nodeValue = "" + value;
+      this.setAttributeNode(attr);
+    },
+    removeAttribute: function (name) {
+      var attr = this.getAttributeNode(name);
+      attr && this.removeAttributeNode(attr);
+    },
+    //four real opeartion method
+    appendChild: function (newChild) {
+      if (newChild.nodeType === DOCUMENT_FRAGMENT_NODE) {
+        return this.insertBefore(newChild, null);
+      } else {
+        return _appendSingleChild(this, newChild);
+      }
+    },
+    setAttributeNode: function (newAttr) {
+      return this.attributes.setNamedItem(newAttr);
+    },
+    setAttributeNodeNS: function (newAttr) {
+      return this.attributes.setNamedItemNS(newAttr);
+    },
+    removeAttributeNode: function (oldAttr) {
+      //console.log(this == oldAttr.ownerElement)
+      return this.attributes.removeNamedItem(oldAttr.nodeName);
+    },
+    //get real attribute name,and remove it by removeAttributeNode
+    removeAttributeNS: function (namespaceURI, localName) {
+      var old = this.getAttributeNodeNS(namespaceURI, localName);
+      old && this.removeAttributeNode(old);
+    },
+    hasAttributeNS: function (namespaceURI, localName) {
+      return this.getAttributeNodeNS(namespaceURI, localName) != null;
+    },
+    getAttributeNS: function (namespaceURI, localName) {
+      var attr = this.getAttributeNodeNS(namespaceURI, localName);
+      return attr && attr.value || '';
+    },
+    setAttributeNS: function (namespaceURI, qualifiedName, value) {
+      var attr = this.ownerDocument.createAttributeNS(namespaceURI, qualifiedName);
+      attr.value = attr.nodeValue = "" + value;
+      this.setAttributeNode(attr);
+    },
+    getAttributeNodeNS: function (namespaceURI, localName) {
+      return this.attributes.getNamedItemNS(namespaceURI, localName);
+    },
+    getElementsByTagName: function (tagName) {
+      return new LiveNodeList(this, function (base) {
+        var ls = [];
+        _visitNode(base, function (node) {
+          if (node !== base && node.nodeType == ELEMENT_NODE && (tagName === '*' || node.tagName == tagName)) {
+            ls.push(node);
+          }
+        });
+        return ls;
+      });
+    },
+    getElementsByTagNameNS: function (namespaceURI, localName) {
+      return new LiveNodeList(this, function (base) {
+        var ls = [];
+        _visitNode(base, function (node) {
+          if (node !== base && node.nodeType === ELEMENT_NODE && (namespaceURI === '*' || node.namespaceURI === namespaceURI) && (localName === '*' || node.localName == localName)) {
+            ls.push(node);
+          }
+        });
+        return ls;
+      });
+    }
+  };
+  Document.prototype.getElementsByTagName = Element.prototype.getElementsByTagName;
+  Document.prototype.getElementsByTagNameNS = Element.prototype.getElementsByTagNameNS;
+  _extends(Element, Node);
+  function Attr() {}
+  Attr.prototype.nodeType = ATTRIBUTE_NODE;
+  _extends(Attr, Node);
+  function CharacterData() {}
+  CharacterData.prototype = {
+    data: '',
+    substringData: function (offset, count) {
+      return this.data.substring(offset, offset + count);
+    },
+    appendData: function (text) {
+      text = this.data + text;
+      this.nodeValue = this.data = text;
+      this.length = text.length;
+    },
+    insertData: function (offset, text) {
+      this.replaceData(offset, 0, text);
+    },
+    appendChild: function (newChild) {
+      throw new Error(ExceptionMessage[HIERARCHY_REQUEST_ERR]);
+    },
+    deleteData: function (offset, count) {
+      this.replaceData(offset, count, "");
+    },
+    replaceData: function (offset, count, text) {
+      var start = this.data.substring(0, offset);
+      var end = this.data.substring(offset + count);
+      text = start + text + end;
+      this.nodeValue = this.data = text;
+      this.length = text.length;
+    }
+  };
+  _extends(CharacterData, Node);
+  function Text() {}
+  Text.prototype = {
+    nodeName: "#text",
+    nodeType: TEXT_NODE,
+    splitText: function (offset) {
+      var text = this.data;
+      var newText = text.substring(offset);
+      text = text.substring(0, offset);
+      this.data = this.nodeValue = text;
+      this.length = text.length;
+      var newNode = this.ownerDocument.createTextNode(newText);
+      if (this.parentNode) {
+        this.parentNode.insertBefore(newNode, this.nextSibling);
+      }
+      return newNode;
+    }
+  };
+  _extends(Text, CharacterData);
+  function Comment() {}
+  Comment.prototype = {
+    nodeName: "#comment",
+    nodeType: COMMENT_NODE
+  };
+  _extends(Comment, CharacterData);
+  function CDATASection() {}
+  CDATASection.prototype = {
+    nodeName: "#cdata-section",
+    nodeType: CDATA_SECTION_NODE
+  };
+  _extends(CDATASection, CharacterData);
+  function DocumentType() {}
+  DocumentType.prototype.nodeType = DOCUMENT_TYPE_NODE;
+  _extends(DocumentType, Node);
+  function Notation() {}
+  Notation.prototype.nodeType = NOTATION_NODE;
+  _extends(Notation, Node);
+  function Entity() {}
+  Entity.prototype.nodeType = ENTITY_NODE;
+  _extends(Entity, Node);
+  function EntityReference() {}
+  EntityReference.prototype.nodeType = ENTITY_REFERENCE_NODE;
+  _extends(EntityReference, Node);
+  function DocumentFragment() {}
+  DocumentFragment.prototype.nodeName = "#document-fragment";
+  DocumentFragment.prototype.nodeType = DOCUMENT_FRAGMENT_NODE;
+  _extends(DocumentFragment, Node);
+  function ProcessingInstruction() {}
+  ProcessingInstruction.prototype.nodeType = PROCESSING_INSTRUCTION_NODE;
+  _extends(ProcessingInstruction, Node);
+  function XMLSerializer() {}
+  XMLSerializer.prototype.serializeToString = function (node, isHtml, nodeFilter) {
+    return nodeSerializeToString.call(node, isHtml, nodeFilter);
+  };
+  Node.prototype.toString = nodeSerializeToString;
+  function nodeSerializeToString(isHtml, nodeFilter) {
+    var buf = [];
+    var refNode = this.nodeType == 9 && this.documentElement || this;
+    var prefix = refNode.prefix;
+    var uri = refNode.namespaceURI;
+    if (uri && prefix == null) {
+      //console.log(prefix)
+      var prefix = refNode.lookupPrefix(uri);
+      if (prefix == null) {
+        //isHTML = true;
+        var visibleNamespaces = [{
+          namespace: uri,
+          prefix: null
+        }
+        //{namespace:uri,prefix:''}
+        ];
+      }
+    }
+
+    serializeToString(this, buf, isHtml, nodeFilter, visibleNamespaces);
+    //console.log('###',this.nodeType,uri,prefix,buf.join(''))
+    return buf.join('');
+  }
+  function needNamespaceDefine(node, isHTML, visibleNamespaces) {
+    var prefix = node.prefix || '';
+    var uri = node.namespaceURI;
+    // According to [Namespaces in XML 1.0](https://www.w3.org/TR/REC-xml-names/#ns-using) ,
+    // and more specifically https://www.w3.org/TR/REC-xml-names/#nsc-NoPrefixUndecl :
+    // > In a namespace declaration for a prefix [...], the attribute value MUST NOT be empty.
+    // in a similar manner [Namespaces in XML 1.1](https://www.w3.org/TR/xml-names11/#ns-using)
+    // and more specifically https://www.w3.org/TR/xml-names11/#nsc-NSDeclared :
+    // > [...] Furthermore, the attribute value [...] must not be an empty string.
+    // so serializing empty namespace value like xmlns:ds="" would produce an invalid XML document.
+    if (!uri) {
+      return false;
+    }
+    if (prefix === "xml" && uri === NAMESPACE$2.XML || uri === NAMESPACE$2.XMLNS) {
+      return false;
+    }
+    var i = visibleNamespaces.length;
+    while (i--) {
+      var ns = visibleNamespaces[i];
+      // get namespace prefix
+      if (ns.prefix === prefix) {
+        return ns.namespace !== uri;
+      }
+    }
+    return true;
+  }
+  /**
+   * Well-formed constraint: No < in Attribute Values
+   * > The replacement text of any entity referred to directly or indirectly
+   * > in an attribute value must not contain a <.
+   * @see https://www.w3.org/TR/xml11/#CleanAttrVals
+   * @see https://www.w3.org/TR/xml11/#NT-AttValue
+   *
+   * Literal whitespace other than space that appear in attribute values
+   * are serialized as their entity references, so they will be preserved.
+   * (In contrast to whitespace literals in the input which are normalized to spaces)
+   * @see https://www.w3.org/TR/xml11/#AVNormalize
+   * @see https://w3c.github.io/DOM-Parsing/#serializing-an-element-s-attributes
+   */
+  function addSerializedAttribute(buf, qualifiedName, value) {
+    buf.push(' ', qualifiedName, '="', value.replace(/[<>&"\t\n\r]/g, _xmlEncoder), '"');
+  }
+  function serializeToString(node, buf, isHTML, nodeFilter, visibleNamespaces) {
+    if (!visibleNamespaces) {
+      visibleNamespaces = [];
+    }
+    if (nodeFilter) {
+      node = nodeFilter(node);
+      if (node) {
+        if (typeof node == 'string') {
+          buf.push(node);
+          return;
+        }
+      } else {
+        return;
+      }
+      //buf.sort.apply(attrs, attributeSorter);
+    }
+
+    switch (node.nodeType) {
+      case ELEMENT_NODE:
+        var attrs = node.attributes;
+        var len = attrs.length;
+        var child = node.firstChild;
+        var nodeName = node.tagName;
+        isHTML = NAMESPACE$2.isHTML(node.namespaceURI) || isHTML;
+        var prefixedNodeName = nodeName;
+        if (!isHTML && !node.prefix && node.namespaceURI) {
+          var defaultNS;
+          // lookup current default ns from `xmlns` attribute
+          for (var ai = 0; ai < attrs.length; ai++) {
+            if (attrs.item(ai).name === 'xmlns') {
+              defaultNS = attrs.item(ai).value;
+              break;
+            }
+          }
+          if (!defaultNS) {
+            // lookup current default ns in visibleNamespaces
+            for (var nsi = visibleNamespaces.length - 1; nsi >= 0; nsi--) {
+              var namespace = visibleNamespaces[nsi];
+              if (namespace.prefix === '' && namespace.namespace === node.namespaceURI) {
+                defaultNS = namespace.namespace;
+                break;
+              }
+            }
+          }
+          if (defaultNS !== node.namespaceURI) {
+            for (var nsi = visibleNamespaces.length - 1; nsi >= 0; nsi--) {
+              var namespace = visibleNamespaces[nsi];
+              if (namespace.namespace === node.namespaceURI) {
+                if (namespace.prefix) {
+                  prefixedNodeName = namespace.prefix + ':' + nodeName;
+                }
+                break;
+              }
+            }
+          }
+        }
+        buf.push('<', prefixedNodeName);
+        for (var i = 0; i < len; i++) {
+          // add namespaces for attributes
+          var attr = attrs.item(i);
+          if (attr.prefix == 'xmlns') {
+            visibleNamespaces.push({
+              prefix: attr.localName,
+              namespace: attr.value
+            });
+          } else if (attr.nodeName == 'xmlns') {
+            visibleNamespaces.push({
+              prefix: '',
+              namespace: attr.value
+            });
+          }
+        }
+        for (var i = 0; i < len; i++) {
+          var attr = attrs.item(i);
+          if (needNamespaceDefine(attr, isHTML, visibleNamespaces)) {
+            var prefix = attr.prefix || '';
+            var uri = attr.namespaceURI;
+            addSerializedAttribute(buf, prefix ? 'xmlns:' + prefix : "xmlns", uri);
+            visibleNamespaces.push({
+              prefix: prefix,
+              namespace: uri
+            });
+          }
+          serializeToString(attr, buf, isHTML, nodeFilter, visibleNamespaces);
+        }
+
+        // add namespace for current node
+        if (nodeName === prefixedNodeName && needNamespaceDefine(node, isHTML, visibleNamespaces)) {
+          var prefix = node.prefix || '';
+          var uri = node.namespaceURI;
+          addSerializedAttribute(buf, prefix ? 'xmlns:' + prefix : "xmlns", uri);
+          visibleNamespaces.push({
+            prefix: prefix,
+            namespace: uri
+          });
+        }
+        if (child || isHTML && !/^(?:meta|link|img|br|hr|input)$/i.test(nodeName)) {
+          buf.push('>');
+          //if is cdata child node
+          if (isHTML && /^script$/i.test(nodeName)) {
+            while (child) {
+              if (child.data) {
+                buf.push(child.data);
+              } else {
+                serializeToString(child, buf, isHTML, nodeFilter, visibleNamespaces.slice());
+              }
+              child = child.nextSibling;
+            }
+          } else {
+            while (child) {
+              serializeToString(child, buf, isHTML, nodeFilter, visibleNamespaces.slice());
+              child = child.nextSibling;
+            }
+          }
+          buf.push('</', prefixedNodeName, '>');
+        } else {
+          buf.push('/>');
+        }
+        // remove added visible namespaces
+        //visibleNamespaces.length = startVisibleNamespaces;
+        return;
+      case DOCUMENT_NODE:
+      case DOCUMENT_FRAGMENT_NODE:
+        var child = node.firstChild;
+        while (child) {
+          serializeToString(child, buf, isHTML, nodeFilter, visibleNamespaces.slice());
+          child = child.nextSibling;
+        }
+        return;
+      case ATTRIBUTE_NODE:
+        return addSerializedAttribute(buf, node.name, node.value);
+      case TEXT_NODE:
+        /**
+         * The ampersand character (&) and the left angle bracket (<) must not appear in their literal form,
+         * except when used as markup delimiters, or within a comment, a processing instruction, or a CDATA section.
+         * If they are needed elsewhere, they must be escaped using either numeric character references or the strings
+         * `&amp;` and `&lt;` respectively.
+         * The right angle bracket (>) may be represented using the string " &gt; ", and must, for compatibility,
+         * be escaped using either `&gt;` or a character reference when it appears in the string `]]>` in content,
+         * when that string is not marking the end of a CDATA section.
+         *
+         * In the content of elements, character data is any string of characters
+         * which does not contain the start-delimiter of any markup
+         * and does not include the CDATA-section-close delimiter, `]]>`.
+         *
+         * @see https://www.w3.org/TR/xml/#NT-CharData
+         * @see https://w3c.github.io/DOM-Parsing/#xml-serializing-a-text-node
+         */
+        return buf.push(node.data.replace(/[<&>]/g, _xmlEncoder));
+      case CDATA_SECTION_NODE:
+        return buf.push('<![CDATA[', node.data, ']]>');
+      case COMMENT_NODE:
+        return buf.push("<!--", node.data, "-->");
+      case DOCUMENT_TYPE_NODE:
+        var pubid = node.publicId;
+        var sysid = node.systemId;
+        buf.push('<!DOCTYPE ', node.name);
+        if (pubid) {
+          buf.push(' PUBLIC ', pubid);
+          if (sysid && sysid != '.') {
+            buf.push(' ', sysid);
+          }
+          buf.push('>');
+        } else if (sysid && sysid != '.') {
+          buf.push(' SYSTEM ', sysid, '>');
+        } else {
+          var sub = node.internalSubset;
+          if (sub) {
+            buf.push(" [", sub, "]");
+          }
+          buf.push(">");
+        }
+        return;
+      case PROCESSING_INSTRUCTION_NODE:
+        return buf.push("<?", node.target, " ", node.data, "?>");
+      case ENTITY_REFERENCE_NODE:
+        return buf.push('&', node.nodeName, ';');
+      //case ENTITY_NODE:
+      //case NOTATION_NODE:
+      default:
+        buf.push('??', node.nodeName);
+    }
+  }
+  function importNode(doc, node, deep) {
+    var node2;
+    switch (node.nodeType) {
+      case ELEMENT_NODE:
+        node2 = node.cloneNode(false);
+        node2.ownerDocument = doc;
+      //var attrs = node2.attributes;
+      //var len = attrs.length;
+      //for(var i=0;i<len;i++){
+      //node2.setAttributeNodeNS(importNode(doc,attrs.item(i),deep));
+      //}
+      case DOCUMENT_FRAGMENT_NODE:
+        break;
+      case ATTRIBUTE_NODE:
+        deep = true;
+        break;
+      //case ENTITY_REFERENCE_NODE:
+      //case PROCESSING_INSTRUCTION_NODE:
+      ////case TEXT_NODE:
+      //case CDATA_SECTION_NODE:
+      //case COMMENT_NODE:
+      //	deep = false;
+      //	break;
+      //case DOCUMENT_NODE:
+      //case DOCUMENT_TYPE_NODE:
+      //cannot be imported.
+      //case ENTITY_NODE:
+      //case NOTATION_NODE：
+      //can not hit in level3
+      //default:throw e;
+    }
+
+    if (!node2) {
+      node2 = node.cloneNode(false); //false
+    }
+
+    node2.ownerDocument = doc;
+    node2.parentNode = null;
+    if (deep) {
+      var child = node.firstChild;
+      while (child) {
+        node2.appendChild(importNode(doc, child, deep));
+        child = child.nextSibling;
+      }
+    }
+    return node2;
+  }
+  //
+  //var _relationMap = {firstChild:1,lastChild:1,previousSibling:1,nextSibling:1,
+  //					attributes:1,childNodes:1,parentNode:1,documentElement:1,doctype,};
+  function cloneNode(doc, node, deep) {
+    var node2 = new node.constructor();
+    for (var n in node) {
+      if (Object.prototype.hasOwnProperty.call(node, n)) {
+        var v = node[n];
+        if (typeof v != "object") {
+          if (v != node2[n]) {
+            node2[n] = v;
+          }
+        }
+      }
+    }
+    if (node.childNodes) {
+      node2.childNodes = new NodeList();
+    }
+    node2.ownerDocument = doc;
+    switch (node2.nodeType) {
+      case ELEMENT_NODE:
+        var attrs = node.attributes;
+        var attrs2 = node2.attributes = new NamedNodeMap();
+        var len = attrs.length;
+        attrs2._ownerElement = node2;
+        for (var i = 0; i < len; i++) {
+          node2.setAttributeNode(cloneNode(doc, attrs.item(i), true));
+        }
+        break;
+      case ATTRIBUTE_NODE:
+        deep = true;
+    }
+    if (deep) {
+      var child = node.firstChild;
+      while (child) {
+        node2.appendChild(cloneNode(doc, child, deep));
+        child = child.nextSibling;
+      }
+    }
+    return node2;
+  }
+  function __set__(object, key, value) {
+    object[key] = value;
+  }
+  //do dynamic
+  try {
+    if (Object.defineProperty) {
+      Object.defineProperty(LiveNodeList.prototype, 'length', {
+        get: function () {
+          _updateLiveList(this);
+          return this.$$length;
+        }
+      });
+      Object.defineProperty(Node.prototype, 'textContent', {
+        get: function () {
+          return getTextContent(this);
+        },
+        set: function (data) {
+          switch (this.nodeType) {
+            case ELEMENT_NODE:
+            case DOCUMENT_FRAGMENT_NODE:
+              while (this.firstChild) {
+                this.removeChild(this.firstChild);
+              }
+              if (data || String(data)) {
+                this.appendChild(this.ownerDocument.createTextNode(data));
+              }
+              break;
+            default:
+              this.data = data;
+              this.value = data;
+              this.nodeValue = data;
+          }
+        }
+      });
+      function getTextContent(node) {
+        switch (node.nodeType) {
+          case ELEMENT_NODE:
+          case DOCUMENT_FRAGMENT_NODE:
+            var buf = [];
+            node = node.firstChild;
+            while (node) {
+              if (node.nodeType !== 7 && node.nodeType !== 8) {
+                buf.push(getTextContent(node));
+              }
+              node = node.nextSibling;
+            }
+            return buf.join('');
+          default:
+            return node.nodeValue;
+        }
+      }
+      __set__ = function (object, key, value) {
+        //console.log(value)
+        object['$$' + key] = value;
+      };
+    }
+  } catch (e) {//ie8
+  }
+
+  //if(typeof require == 'function'){
+  var DocumentType_1 = DocumentType;
+  var DOMException_1 = DOMException;
+  var DOMImplementation_1 = DOMImplementation$1;
+  var Element_1 = Element;
+  var Node_1 = Node;
+  var NodeList_1 = NodeList;
+  var XMLSerializer_1 = XMLSerializer;
+  //}
+
+  var dom = {
+    DocumentType: DocumentType_1,
+    DOMException: DOMException_1,
+    DOMImplementation: DOMImplementation_1,
+    Element: Element_1,
+    Node: Node_1,
+    NodeList: NodeList_1,
+    XMLSerializer: XMLSerializer_1
+  };
+
+  var entities = createCommonjsModule(function (module, exports) {
+
+    var freeze = conventions.freeze;
+
+    /**
+     * The entities that are predefined in every XML document.
+     *
+     * @see https://www.w3.org/TR/2006/REC-xml11-20060816/#sec-predefined-ent W3C XML 1.1
+     * @see https://www.w3.org/TR/2008/REC-xml-20081126/#sec-predefined-ent W3C XML 1.0
+     * @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Predefined_entities_in_XML Wikipedia
+     */
+    exports.XML_ENTITIES = freeze({
+      amp: '&',
+      apos: "'",
+      gt: '>',
+      lt: '<',
+      quot: '"'
+    });
+
+    /**
+     * A map of all entities that are detected in an HTML document.
+     * They contain all entries from `XML_ENTITIES`.
+     *
+     * @see XML_ENTITIES
+     * @see DOMParser.parseFromString
+     * @see DOMImplementation.prototype.createHTMLDocument
+     * @see https://html.spec.whatwg.org/#named-character-references WHATWG HTML(5) Spec
+     * @see https://html.spec.whatwg.org/entities.json JSON
+     * @see https://www.w3.org/TR/xml-entity-names/ W3C XML Entity Names
+     * @see https://www.w3.org/TR/html4/sgml/entities.html W3C HTML4/SGML
+     * @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Character_entity_references_in_HTML Wikipedia (HTML)
+     * @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Entities_representing_special_characters_in_XHTML Wikpedia (XHTML)
+     */
+    exports.HTML_ENTITIES = freeze({
+      Aacute: '\u00C1',
+      aacute: '\u00E1',
+      Abreve: '\u0102',
+      abreve: '\u0103',
+      ac: '\u223E',
+      acd: '\u223F',
+      acE: '\u223E\u0333',
+      Acirc: '\u00C2',
+      acirc: '\u00E2',
+      acute: '\u00B4',
+      Acy: '\u0410',
+      acy: '\u0430',
+      AElig: '\u00C6',
+      aelig: '\u00E6',
+      af: '\u2061',
+      Afr: '\uD835\uDD04',
+      afr: '\uD835\uDD1E',
+      Agrave: '\u00C0',
+      agrave: '\u00E0',
+      alefsym: '\u2135',
+      aleph: '\u2135',
+      Alpha: '\u0391',
+      alpha: '\u03B1',
+      Amacr: '\u0100',
+      amacr: '\u0101',
+      amalg: '\u2A3F',
+      AMP: '\u0026',
+      amp: '\u0026',
+      And: '\u2A53',
+      and: '\u2227',
+      andand: '\u2A55',
+      andd: '\u2A5C',
+      andslope: '\u2A58',
+      andv: '\u2A5A',
+      ang: '\u2220',
+      ange: '\u29A4',
+      angle: '\u2220',
+      angmsd: '\u2221',
+      angmsdaa: '\u29A8',
+      angmsdab: '\u29A9',
+      angmsdac: '\u29AA',
+      angmsdad: '\u29AB',
+      angmsdae: '\u29AC',
+      angmsdaf: '\u29AD',
+      angmsdag: '\u29AE',
+      angmsdah: '\u29AF',
+      angrt: '\u221F',
+      angrtvb: '\u22BE',
+      angrtvbd: '\u299D',
+      angsph: '\u2222',
+      angst: '\u00C5',
+      angzarr: '\u237C',
+      Aogon: '\u0104',
+      aogon: '\u0105',
+      Aopf: '\uD835\uDD38',
+      aopf: '\uD835\uDD52',
+      ap: '\u2248',
+      apacir: '\u2A6F',
+      apE: '\u2A70',
+      ape: '\u224A',
+      apid: '\u224B',
+      apos: '\u0027',
+      ApplyFunction: '\u2061',
+      approx: '\u2248',
+      approxeq: '\u224A',
+      Aring: '\u00C5',
+      aring: '\u00E5',
+      Ascr: '\uD835\uDC9C',
+      ascr: '\uD835\uDCB6',
+      Assign: '\u2254',
+      ast: '\u002A',
+      asymp: '\u2248',
+      asympeq: '\u224D',
+      Atilde: '\u00C3',
+      atilde: '\u00E3',
+      Auml: '\u00C4',
+      auml: '\u00E4',
+      awconint: '\u2233',
+      awint: '\u2A11',
+      backcong: '\u224C',
+      backepsilon: '\u03F6',
+      backprime: '\u2035',
+      backsim: '\u223D',
+      backsimeq: '\u22CD',
+      Backslash: '\u2216',
+      Barv: '\u2AE7',
+      barvee: '\u22BD',
+      Barwed: '\u2306',
+      barwed: '\u2305',
+      barwedge: '\u2305',
+      bbrk: '\u23B5',
+      bbrktbrk: '\u23B6',
+      bcong: '\u224C',
+      Bcy: '\u0411',
+      bcy: '\u0431',
+      bdquo: '\u201E',
+      becaus: '\u2235',
+      Because: '\u2235',
+      because: '\u2235',
+      bemptyv: '\u29B0',
+      bepsi: '\u03F6',
+      bernou: '\u212C',
+      Bernoullis: '\u212C',
+      Beta: '\u0392',
+      beta: '\u03B2',
+      beth: '\u2136',
+      between: '\u226C',
+      Bfr: '\uD835\uDD05',
+      bfr: '\uD835\uDD1F',
+      bigcap: '\u22C2',
+      bigcirc: '\u25EF',
+      bigcup: '\u22C3',
+      bigodot: '\u2A00',
+      bigoplus: '\u2A01',
+      bigotimes: '\u2A02',
+      bigsqcup: '\u2A06',
+      bigstar: '\u2605',
+      bigtriangledown: '\u25BD',
+      bigtriangleup: '\u25B3',
+      biguplus: '\u2A04',
+      bigvee: '\u22C1',
+      bigwedge: '\u22C0',
+      bkarow: '\u290D',
+      blacklozenge: '\u29EB',
+      blacksquare: '\u25AA',
+      blacktriangle: '\u25B4',
+      blacktriangledown: '\u25BE',
+      blacktriangleleft: '\u25C2',
+      blacktriangleright: '\u25B8',
+      blank: '\u2423',
+      blk12: '\u2592',
+      blk14: '\u2591',
+      blk34: '\u2593',
+      block: '\u2588',
+      bne: '\u003D\u20E5',
+      bnequiv: '\u2261\u20E5',
+      bNot: '\u2AED',
+      bnot: '\u2310',
+      Bopf: '\uD835\uDD39',
+      bopf: '\uD835\uDD53',
+      bot: '\u22A5',
+      bottom: '\u22A5',
+      bowtie: '\u22C8',
+      boxbox: '\u29C9',
+      boxDL: '\u2557',
+      boxDl: '\u2556',
+      boxdL: '\u2555',
+      boxdl: '\u2510',
+      boxDR: '\u2554',
+      boxDr: '\u2553',
+      boxdR: '\u2552',
+      boxdr: '\u250C',
+      boxH: '\u2550',
+      boxh: '\u2500',
+      boxHD: '\u2566',
+      boxHd: '\u2564',
+      boxhD: '\u2565',
+      boxhd: '\u252C',
+      boxHU: '\u2569',
+      boxHu: '\u2567',
+      boxhU: '\u2568',
+      boxhu: '\u2534',
+      boxminus: '\u229F',
+      boxplus: '\u229E',
+      boxtimes: '\u22A0',
+      boxUL: '\u255D',
+      boxUl: '\u255C',
+      boxuL: '\u255B',
+      boxul: '\u2518',
+      boxUR: '\u255A',
+      boxUr: '\u2559',
+      boxuR: '\u2558',
+      boxur: '\u2514',
+      boxV: '\u2551',
+      boxv: '\u2502',
+      boxVH: '\u256C',
+      boxVh: '\u256B',
+      boxvH: '\u256A',
+      boxvh: '\u253C',
+      boxVL: '\u2563',
+      boxVl: '\u2562',
+      boxvL: '\u2561',
+      boxvl: '\u2524',
+      boxVR: '\u2560',
+      boxVr: '\u255F',
+      boxvR: '\u255E',
+      boxvr: '\u251C',
+      bprime: '\u2035',
+      Breve: '\u02D8',
+      breve: '\u02D8',
+      brvbar: '\u00A6',
+      Bscr: '\u212C',
+      bscr: '\uD835\uDCB7',
+      bsemi: '\u204F',
+      bsim: '\u223D',
+      bsime: '\u22CD',
+      bsol: '\u005C',
+      bsolb: '\u29C5',
+      bsolhsub: '\u27C8',
+      bull: '\u2022',
+      bullet: '\u2022',
+      bump: '\u224E',
+      bumpE: '\u2AAE',
+      bumpe: '\u224F',
+      Bumpeq: '\u224E',
+      bumpeq: '\u224F',
+      Cacute: '\u0106',
+      cacute: '\u0107',
+      Cap: '\u22D2',
+      cap: '\u2229',
+      capand: '\u2A44',
+      capbrcup: '\u2A49',
+      capcap: '\u2A4B',
+      capcup: '\u2A47',
+      capdot: '\u2A40',
+      CapitalDifferentialD: '\u2145',
+      caps: '\u2229\uFE00',
+      caret: '\u2041',
+      caron: '\u02C7',
+      Cayleys: '\u212D',
+      ccaps: '\u2A4D',
+      Ccaron: '\u010C',
+      ccaron: '\u010D',
+      Ccedil: '\u00C7',
+      ccedil: '\u00E7',
+      Ccirc: '\u0108',
+      ccirc: '\u0109',
+      Cconint: '\u2230',
+      ccups: '\u2A4C',
+      ccupssm: '\u2A50',
+      Cdot: '\u010A',
+      cdot: '\u010B',
+      cedil: '\u00B8',
+      Cedilla: '\u00B8',
+      cemptyv: '\u29B2',
+      cent: '\u00A2',
+      CenterDot: '\u00B7',
+      centerdot: '\u00B7',
+      Cfr: '\u212D',
+      cfr: '\uD835\uDD20',
+      CHcy: '\u0427',
+      chcy: '\u0447',
+      check: '\u2713',
+      checkmark: '\u2713',
+      Chi: '\u03A7',
+      chi: '\u03C7',
+      cir: '\u25CB',
+      circ: '\u02C6',
+      circeq: '\u2257',
+      circlearrowleft: '\u21BA',
+      circlearrowright: '\u21BB',
+      circledast: '\u229B',
+      circledcirc: '\u229A',
+      circleddash: '\u229D',
+      CircleDot: '\u2299',
+      circledR: '\u00AE',
+      circledS: '\u24C8',
+      CircleMinus: '\u2296',
+      CirclePlus: '\u2295',
+      CircleTimes: '\u2297',
+      cirE: '\u29C3',
+      cire: '\u2257',
+      cirfnint: '\u2A10',
+      cirmid: '\u2AEF',
+      cirscir: '\u29C2',
+      ClockwiseContourIntegral: '\u2232',
+      CloseCurlyDoubleQuote: '\u201D',
+      CloseCurlyQuote: '\u2019',
+      clubs: '\u2663',
+      clubsuit: '\u2663',
+      Colon: '\u2237',
+      colon: '\u003A',
+      Colone: '\u2A74',
+      colone: '\u2254',
+      coloneq: '\u2254',
+      comma: '\u002C',
+      commat: '\u0040',
+      comp: '\u2201',
+      compfn: '\u2218',
+      complement: '\u2201',
+      complexes: '\u2102',
+      cong: '\u2245',
+      congdot: '\u2A6D',
+      Congruent: '\u2261',
+      Conint: '\u222F',
+      conint: '\u222E',
+      ContourIntegral: '\u222E',
+      Copf: '\u2102',
+      copf: '\uD835\uDD54',
+      coprod: '\u2210',
+      Coproduct: '\u2210',
+      COPY: '\u00A9',
+      copy: '\u00A9',
+      copysr: '\u2117',
+      CounterClockwiseContourIntegral: '\u2233',
+      crarr: '\u21B5',
+      Cross: '\u2A2F',
+      cross: '\u2717',
+      Cscr: '\uD835\uDC9E',
+      cscr: '\uD835\uDCB8',
+      csub: '\u2ACF',
+      csube: '\u2AD1',
+      csup: '\u2AD0',
+      csupe: '\u2AD2',
+      ctdot: '\u22EF',
+      cudarrl: '\u2938',
+      cudarrr: '\u2935',
+      cuepr: '\u22DE',
+      cuesc: '\u22DF',
+      cularr: '\u21B6',
+      cularrp: '\u293D',
+      Cup: '\u22D3',
+      cup: '\u222A',
+      cupbrcap: '\u2A48',
+      CupCap: '\u224D',
+      cupcap: '\u2A46',
+      cupcup: '\u2A4A',
+      cupdot: '\u228D',
+      cupor: '\u2A45',
+      cups: '\u222A\uFE00',
+      curarr: '\u21B7',
+      curarrm: '\u293C',
+      curlyeqprec: '\u22DE',
+      curlyeqsucc: '\u22DF',
+      curlyvee: '\u22CE',
+      curlywedge: '\u22CF',
+      curren: '\u00A4',
+      curvearrowleft: '\u21B6',
+      curvearrowright: '\u21B7',
+      cuvee: '\u22CE',
+      cuwed: '\u22CF',
+      cwconint: '\u2232',
+      cwint: '\u2231',
+      cylcty: '\u232D',
+      Dagger: '\u2021',
+      dagger: '\u2020',
+      daleth: '\u2138',
+      Darr: '\u21A1',
+      dArr: '\u21D3',
+      darr: '\u2193',
+      dash: '\u2010',
+      Dashv: '\u2AE4',
+      dashv: '\u22A3',
+      dbkarow: '\u290F',
+      dblac: '\u02DD',
+      Dcaron: '\u010E',
+      dcaron: '\u010F',
+      Dcy: '\u0414',
+      dcy: '\u0434',
+      DD: '\u2145',
+      dd: '\u2146',
+      ddagger: '\u2021',
+      ddarr: '\u21CA',
+      DDotrahd: '\u2911',
+      ddotseq: '\u2A77',
+      deg: '\u00B0',
+      Del: '\u2207',
+      Delta: '\u0394',
+      delta: '\u03B4',
+      demptyv: '\u29B1',
+      dfisht: '\u297F',
+      Dfr: '\uD835\uDD07',
+      dfr: '\uD835\uDD21',
+      dHar: '\u2965',
+      dharl: '\u21C3',
+      dharr: '\u21C2',
+      DiacriticalAcute: '\u00B4',
+      DiacriticalDot: '\u02D9',
+      DiacriticalDoubleAcute: '\u02DD',
+      DiacriticalGrave: '\u0060',
+      DiacriticalTilde: '\u02DC',
+      diam: '\u22C4',
+      Diamond: '\u22C4',
+      diamond: '\u22C4',
+      diamondsuit: '\u2666',
+      diams: '\u2666',
+      die: '\u00A8',
+      DifferentialD: '\u2146',
+      digamma: '\u03DD',
+      disin: '\u22F2',
+      div: '\u00F7',
+      divide: '\u00F7',
+      divideontimes: '\u22C7',
+      divonx: '\u22C7',
+      DJcy: '\u0402',
+      djcy: '\u0452',
+      dlcorn: '\u231E',
+      dlcrop: '\u230D',
+      dollar: '\u0024',
+      Dopf: '\uD835\uDD3B',
+      dopf: '\uD835\uDD55',
+      Dot: '\u00A8',
+      dot: '\u02D9',
+      DotDot: '\u20DC',
+      doteq: '\u2250',
+      doteqdot: '\u2251',
+      DotEqual: '\u2250',
+      dotminus: '\u2238',
+      dotplus: '\u2214',
+      dotsquare: '\u22A1',
+      doublebarwedge: '\u2306',
+      DoubleContourIntegral: '\u222F',
+      DoubleDot: '\u00A8',
+      DoubleDownArrow: '\u21D3',
+      DoubleLeftArrow: '\u21D0',
+      DoubleLeftRightArrow: '\u21D4',
+      DoubleLeftTee: '\u2AE4',
+      DoubleLongLeftArrow: '\u27F8',
+      DoubleLongLeftRightArrow: '\u27FA',
+      DoubleLongRightArrow: '\u27F9',
+      DoubleRightArrow: '\u21D2',
+      DoubleRightTee: '\u22A8',
+      DoubleUpArrow: '\u21D1',
+      DoubleUpDownArrow: '\u21D5',
+      DoubleVerticalBar: '\u2225',
+      DownArrow: '\u2193',
+      Downarrow: '\u21D3',
+      downarrow: '\u2193',
+      DownArrowBar: '\u2913',
+      DownArrowUpArrow: '\u21F5',
+      DownBreve: '\u0311',
+      downdownarrows: '\u21CA',
+      downharpoonleft: '\u21C3',
+      downharpoonright: '\u21C2',
+      DownLeftRightVector: '\u2950',
+      DownLeftTeeVector: '\u295E',
+      DownLeftVector: '\u21BD',
+      DownLeftVectorBar: '\u2956',
+      DownRightTeeVector: '\u295F',
+      DownRightVector: '\u21C1',
+      DownRightVectorBar: '\u2957',
+      DownTee: '\u22A4',
+      DownTeeArrow: '\u21A7',
+      drbkarow: '\u2910',
+      drcorn: '\u231F',
+      drcrop: '\u230C',
+      Dscr: '\uD835\uDC9F',
+      dscr: '\uD835\uDCB9',
+      DScy: '\u0405',
+      dscy: '\u0455',
+      dsol: '\u29F6',
+      Dstrok: '\u0110',
+      dstrok: '\u0111',
+      dtdot: '\u22F1',
+      dtri: '\u25BF',
+      dtrif: '\u25BE',
+      duarr: '\u21F5',
+      duhar: '\u296F',
+      dwangle: '\u29A6',
+      DZcy: '\u040F',
+      dzcy: '\u045F',
+      dzigrarr: '\u27FF',
+      Eacute: '\u00C9',
+      eacute: '\u00E9',
+      easter: '\u2A6E',
+      Ecaron: '\u011A',
+      ecaron: '\u011B',
+      ecir: '\u2256',
+      Ecirc: '\u00CA',
+      ecirc: '\u00EA',
+      ecolon: '\u2255',
+      Ecy: '\u042D',
+      ecy: '\u044D',
+      eDDot: '\u2A77',
+      Edot: '\u0116',
+      eDot: '\u2251',
+      edot: '\u0117',
+      ee: '\u2147',
+      efDot: '\u2252',
+      Efr: '\uD835\uDD08',
+      efr: '\uD835\uDD22',
+      eg: '\u2A9A',
+      Egrave: '\u00C8',
+      egrave: '\u00E8',
+      egs: '\u2A96',
+      egsdot: '\u2A98',
+      el: '\u2A99',
+      Element: '\u2208',
+      elinters: '\u23E7',
+      ell: '\u2113',
+      els: '\u2A95',
+      elsdot: '\u2A97',
+      Emacr: '\u0112',
+      emacr: '\u0113',
+      empty: '\u2205',
+      emptyset: '\u2205',
+      EmptySmallSquare: '\u25FB',
+      emptyv: '\u2205',
+      EmptyVerySmallSquare: '\u25AB',
+      emsp: '\u2003',
+      emsp13: '\u2004',
+      emsp14: '\u2005',
+      ENG: '\u014A',
+      eng: '\u014B',
+      ensp: '\u2002',
+      Eogon: '\u0118',
+      eogon: '\u0119',
+      Eopf: '\uD835\uDD3C',
+      eopf: '\uD835\uDD56',
+      epar: '\u22D5',
+      eparsl: '\u29E3',
+      eplus: '\u2A71',
+      epsi: '\u03B5',
+      Epsilon: '\u0395',
+      epsilon: '\u03B5',
+      epsiv: '\u03F5',
+      eqcirc: '\u2256',
+      eqcolon: '\u2255',
+      eqsim: '\u2242',
+      eqslantgtr: '\u2A96',
+      eqslantless: '\u2A95',
+      Equal: '\u2A75',
+      equals: '\u003D',
+      EqualTilde: '\u2242',
+      equest: '\u225F',
+      Equilibrium: '\u21CC',
+      equiv: '\u2261',
+      equivDD: '\u2A78',
+      eqvparsl: '\u29E5',
+      erarr: '\u2971',
+      erDot: '\u2253',
+      Escr: '\u2130',
+      escr: '\u212F',
+      esdot: '\u2250',
+      Esim: '\u2A73',
+      esim: '\u2242',
+      Eta: '\u0397',
+      eta: '\u03B7',
+      ETH: '\u00D0',
+      eth: '\u00F0',
+      Euml: '\u00CB',
+      euml: '\u00EB',
+      euro: '\u20AC',
+      excl: '\u0021',
+      exist: '\u2203',
+      Exists: '\u2203',
+      expectation: '\u2130',
+      ExponentialE: '\u2147',
+      exponentiale: '\u2147',
+      fallingdotseq: '\u2252',
+      Fcy: '\u0424',
+      fcy: '\u0444',
+      female: '\u2640',
+      ffilig: '\uFB03',
+      fflig: '\uFB00',
+      ffllig: '\uFB04',
+      Ffr: '\uD835\uDD09',
+      ffr: '\uD835\uDD23',
+      filig: '\uFB01',
+      FilledSmallSquare: '\u25FC',
+      FilledVerySmallSquare: '\u25AA',
+      fjlig: '\u0066\u006A',
+      flat: '\u266D',
+      fllig: '\uFB02',
+      fltns: '\u25B1',
+      fnof: '\u0192',
+      Fopf: '\uD835\uDD3D',
+      fopf: '\uD835\uDD57',
+      ForAll: '\u2200',
+      forall: '\u2200',
+      fork: '\u22D4',
+      forkv: '\u2AD9',
+      Fouriertrf: '\u2131',
+      fpartint: '\u2A0D',
+      frac12: '\u00BD',
+      frac13: '\u2153',
+      frac14: '\u00BC',
+      frac15: '\u2155',
+      frac16: '\u2159',
+      frac18: '\u215B',
+      frac23: '\u2154',
+      frac25: '\u2156',
+      frac34: '\u00BE',
+      frac35: '\u2157',
+      frac38: '\u215C',
+      frac45: '\u2158',
+      frac56: '\u215A',
+      frac58: '\u215D',
+      frac78: '\u215E',
+      frasl: '\u2044',
+      frown: '\u2322',
+      Fscr: '\u2131',
+      fscr: '\uD835\uDCBB',
+      gacute: '\u01F5',
+      Gamma: '\u0393',
+      gamma: '\u03B3',
+      Gammad: '\u03DC',
+      gammad: '\u03DD',
+      gap: '\u2A86',
+      Gbreve: '\u011E',
+      gbreve: '\u011F',
+      Gcedil: '\u0122',
+      Gcirc: '\u011C',
+      gcirc: '\u011D',
+      Gcy: '\u0413',
+      gcy: '\u0433',
+      Gdot: '\u0120',
+      gdot: '\u0121',
+      gE: '\u2267',
+      ge: '\u2265',
+      gEl: '\u2A8C',
+      gel: '\u22DB',
+      geq: '\u2265',
+      geqq: '\u2267',
+      geqslant: '\u2A7E',
+      ges: '\u2A7E',
+      gescc: '\u2AA9',
+      gesdot: '\u2A80',
+      gesdoto: '\u2A82',
+      gesdotol: '\u2A84',
+      gesl: '\u22DB\uFE00',
+      gesles: '\u2A94',
+      Gfr: '\uD835\uDD0A',
+      gfr: '\uD835\uDD24',
+      Gg: '\u22D9',
+      gg: '\u226B',
+      ggg: '\u22D9',
+      gimel: '\u2137',
+      GJcy: '\u0403',
+      gjcy: '\u0453',
+      gl: '\u2277',
+      gla: '\u2AA5',
+      glE: '\u2A92',
+      glj: '\u2AA4',
+      gnap: '\u2A8A',
+      gnapprox: '\u2A8A',
+      gnE: '\u2269',
+      gne: '\u2A88',
+      gneq: '\u2A88',
+      gneqq: '\u2269',
+      gnsim: '\u22E7',
+      Gopf: '\uD835\uDD3E',
+      gopf: '\uD835\uDD58',
+      grave: '\u0060',
+      GreaterEqual: '\u2265',
+      GreaterEqualLess: '\u22DB',
+      GreaterFullEqual: '\u2267',
+      GreaterGreater: '\u2AA2',
+      GreaterLess: '\u2277',
+      GreaterSlantEqual: '\u2A7E',
+      GreaterTilde: '\u2273',
+      Gscr: '\uD835\uDCA2',
+      gscr: '\u210A',
+      gsim: '\u2273',
+      gsime: '\u2A8E',
+      gsiml: '\u2A90',
+      Gt: '\u226B',
+      GT: '\u003E',
+      gt: '\u003E',
+      gtcc: '\u2AA7',
+      gtcir: '\u2A7A',
+      gtdot: '\u22D7',
+      gtlPar: '\u2995',
+      gtquest: '\u2A7C',
+      gtrapprox: '\u2A86',
+      gtrarr: '\u2978',
+      gtrdot: '\u22D7',
+      gtreqless: '\u22DB',
+      gtreqqless: '\u2A8C',
+      gtrless: '\u2277',
+      gtrsim: '\u2273',
+      gvertneqq: '\u2269\uFE00',
+      gvnE: '\u2269\uFE00',
+      Hacek: '\u02C7',
+      hairsp: '\u200A',
+      half: '\u00BD',
+      hamilt: '\u210B',
+      HARDcy: '\u042A',
+      hardcy: '\u044A',
+      hArr: '\u21D4',
+      harr: '\u2194',
+      harrcir: '\u2948',
+      harrw: '\u21AD',
+      Hat: '\u005E',
+      hbar: '\u210F',
+      Hcirc: '\u0124',
+      hcirc: '\u0125',
+      hearts: '\u2665',
+      heartsuit: '\u2665',
+      hellip: '\u2026',
+      hercon: '\u22B9',
+      Hfr: '\u210C',
+      hfr: '\uD835\uDD25',
+      HilbertSpace: '\u210B',
+      hksearow: '\u2925',
+      hkswarow: '\u2926',
+      hoarr: '\u21FF',
+      homtht: '\u223B',
+      hookleftarrow: '\u21A9',
+      hookrightarrow: '\u21AA',
+      Hopf: '\u210D',
+      hopf: '\uD835\uDD59',
+      horbar: '\u2015',
+      HorizontalLine: '\u2500',
+      Hscr: '\u210B',
+      hscr: '\uD835\uDCBD',
+      hslash: '\u210F',
+      Hstrok: '\u0126',
+      hstrok: '\u0127',
+      HumpDownHump: '\u224E',
+      HumpEqual: '\u224F',
+      hybull: '\u2043',
+      hyphen: '\u2010',
+      Iacute: '\u00CD',
+      iacute: '\u00ED',
+      ic: '\u2063',
+      Icirc: '\u00CE',
+      icirc: '\u00EE',
+      Icy: '\u0418',
+      icy: '\u0438',
+      Idot: '\u0130',
+      IEcy: '\u0415',
+      iecy: '\u0435',
+      iexcl: '\u00A1',
+      iff: '\u21D4',
+      Ifr: '\u2111',
+      ifr: '\uD835\uDD26',
+      Igrave: '\u00CC',
+      igrave: '\u00EC',
+      ii: '\u2148',
+      iiiint: '\u2A0C',
+      iiint: '\u222D',
+      iinfin: '\u29DC',
+      iiota: '\u2129',
+      IJlig: '\u0132',
+      ijlig: '\u0133',
+      Im: '\u2111',
+      Imacr: '\u012A',
+      imacr: '\u012B',
+      image: '\u2111',
+      ImaginaryI: '\u2148',
+      imagline: '\u2110',
+      imagpart: '\u2111',
+      imath: '\u0131',
+      imof: '\u22B7',
+      imped: '\u01B5',
+      Implies: '\u21D2',
+      in: '\u2208',
+      incare: '\u2105',
+      infin: '\u221E',
+      infintie: '\u29DD',
+      inodot: '\u0131',
+      Int: '\u222C',
+      int: '\u222B',
+      intcal: '\u22BA',
+      integers: '\u2124',
+      Integral: '\u222B',
+      intercal: '\u22BA',
+      Intersection: '\u22C2',
+      intlarhk: '\u2A17',
+      intprod: '\u2A3C',
+      InvisibleComma: '\u2063',
+      InvisibleTimes: '\u2062',
+      IOcy: '\u0401',
+      iocy: '\u0451',
+      Iogon: '\u012E',
+      iogon: '\u012F',
+      Iopf: '\uD835\uDD40',
+      iopf: '\uD835\uDD5A',
+      Iota: '\u0399',
+      iota: '\u03B9',
+      iprod: '\u2A3C',
+      iquest: '\u00BF',
+      Iscr: '\u2110',
+      iscr: '\uD835\uDCBE',
+      isin: '\u2208',
+      isindot: '\u22F5',
+      isinE: '\u22F9',
+      isins: '\u22F4',
+      isinsv: '\u22F3',
+      isinv: '\u2208',
+      it: '\u2062',
+      Itilde: '\u0128',
+      itilde: '\u0129',
+      Iukcy: '\u0406',
+      iukcy: '\u0456',
+      Iuml: '\u00CF',
+      iuml: '\u00EF',
+      Jcirc: '\u0134',
+      jcirc: '\u0135',
+      Jcy: '\u0419',
+      jcy: '\u0439',
+      Jfr: '\uD835\uDD0D',
+      jfr: '\uD835\uDD27',
+      jmath: '\u0237',
+      Jopf: '\uD835\uDD41',
+      jopf: '\uD835\uDD5B',
+      Jscr: '\uD835\uDCA5',
+      jscr: '\uD835\uDCBF',
+      Jsercy: '\u0408',
+      jsercy: '\u0458',
+      Jukcy: '\u0404',
+      jukcy: '\u0454',
+      Kappa: '\u039A',
+      kappa: '\u03BA',
+      kappav: '\u03F0',
+      Kcedil: '\u0136',
+      kcedil: '\u0137',
+      Kcy: '\u041A',
+      kcy: '\u043A',
+      Kfr: '\uD835\uDD0E',
+      kfr: '\uD835\uDD28',
+      kgreen: '\u0138',
+      KHcy: '\u0425',
+      khcy: '\u0445',
+      KJcy: '\u040C',
+      kjcy: '\u045C',
+      Kopf: '\uD835\uDD42',
+      kopf: '\uD835\uDD5C',
+      Kscr: '\uD835\uDCA6',
+      kscr: '\uD835\uDCC0',
+      lAarr: '\u21DA',
+      Lacute: '\u0139',
+      lacute: '\u013A',
+      laemptyv: '\u29B4',
+      lagran: '\u2112',
+      Lambda: '\u039B',
+      lambda: '\u03BB',
+      Lang: '\u27EA',
+      lang: '\u27E8',
+      langd: '\u2991',
+      langle: '\u27E8',
+      lap: '\u2A85',
+      Laplacetrf: '\u2112',
+      laquo: '\u00AB',
+      Larr: '\u219E',
+      lArr: '\u21D0',
+      larr: '\u2190',
+      larrb: '\u21E4',
+      larrbfs: '\u291F',
+      larrfs: '\u291D',
+      larrhk: '\u21A9',
+      larrlp: '\u21AB',
+      larrpl: '\u2939',
+      larrsim: '\u2973',
+      larrtl: '\u21A2',
+      lat: '\u2AAB',
+      lAtail: '\u291B',
+      latail: '\u2919',
+      late: '\u2AAD',
+      lates: '\u2AAD\uFE00',
+      lBarr: '\u290E',
+      lbarr: '\u290C',
+      lbbrk: '\u2772',
+      lbrace: '\u007B',
+      lbrack: '\u005B',
+      lbrke: '\u298B',
+      lbrksld: '\u298F',
+      lbrkslu: '\u298D',
+      Lcaron: '\u013D',
+      lcaron: '\u013E',
+      Lcedil: '\u013B',
+      lcedil: '\u013C',
+      lceil: '\u2308',
+      lcub: '\u007B',
+      Lcy: '\u041B',
+      lcy: '\u043B',
+      ldca: '\u2936',
+      ldquo: '\u201C',
+      ldquor: '\u201E',
+      ldrdhar: '\u2967',
+      ldrushar: '\u294B',
+      ldsh: '\u21B2',
+      lE: '\u2266',
+      le: '\u2264',
+      LeftAngleBracket: '\u27E8',
+      LeftArrow: '\u2190',
+      Leftarrow: '\u21D0',
+      leftarrow: '\u2190',
+      LeftArrowBar: '\u21E4',
+      LeftArrowRightArrow: '\u21C6',
+      leftarrowtail: '\u21A2',
+      LeftCeiling: '\u2308',
+      LeftDoubleBracket: '\u27E6',
+      LeftDownTeeVector: '\u2961',
+      LeftDownVector: '\u21C3',
+      LeftDownVectorBar: '\u2959',
+      LeftFloor: '\u230A',
+      leftharpoondown: '\u21BD',
+      leftharpoonup: '\u21BC',
+      leftleftarrows: '\u21C7',
+      LeftRightArrow: '\u2194',
+      Leftrightarrow: '\u21D4',
+      leftrightarrow: '\u2194',
+      leftrightarrows: '\u21C6',
+      leftrightharpoons: '\u21CB',
+      leftrightsquigarrow: '\u21AD',
+      LeftRightVector: '\u294E',
+      LeftTee: '\u22A3',
+      LeftTeeArrow: '\u21A4',
+      LeftTeeVector: '\u295A',
+      leftthreetimes: '\u22CB',
+      LeftTriangle: '\u22B2',
+      LeftTriangleBar: '\u29CF',
+      LeftTriangleEqual: '\u22B4',
+      LeftUpDownVector: '\u2951',
+      LeftUpTeeVector: '\u2960',
+      LeftUpVector: '\u21BF',
+      LeftUpVectorBar: '\u2958',
+      LeftVector: '\u21BC',
+      LeftVectorBar: '\u2952',
+      lEg: '\u2A8B',
+      leg: '\u22DA',
+      leq: '\u2264',
+      leqq: '\u2266',
+      leqslant: '\u2A7D',
+      les: '\u2A7D',
+      lescc: '\u2AA8',
+      lesdot: '\u2A7F',
+      lesdoto: '\u2A81',
+      lesdotor: '\u2A83',
+      lesg: '\u22DA\uFE00',
+      lesges: '\u2A93',
+      lessapprox: '\u2A85',
+      lessdot: '\u22D6',
+      lesseqgtr: '\u22DA',
+      lesseqqgtr: '\u2A8B',
+      LessEqualGreater: '\u22DA',
+      LessFullEqual: '\u2266',
+      LessGreater: '\u2276',
+      lessgtr: '\u2276',
+      LessLess: '\u2AA1',
+      lesssim: '\u2272',
+      LessSlantEqual: '\u2A7D',
+      LessTilde: '\u2272',
+      lfisht: '\u297C',
+      lfloor: '\u230A',
+      Lfr: '\uD835\uDD0F',
+      lfr: '\uD835\uDD29',
+      lg: '\u2276',
+      lgE: '\u2A91',
+      lHar: '\u2962',
+      lhard: '\u21BD',
+      lharu: '\u21BC',
+      lharul: '\u296A',
+      lhblk: '\u2584',
+      LJcy: '\u0409',
+      ljcy: '\u0459',
+      Ll: '\u22D8',
+      ll: '\u226A',
+      llarr: '\u21C7',
+      llcorner: '\u231E',
+      Lleftarrow: '\u21DA',
+      llhard: '\u296B',
+      lltri: '\u25FA',
+      Lmidot: '\u013F',
+      lmidot: '\u0140',
+      lmoust: '\u23B0',
+      lmoustache: '\u23B0',
+      lnap: '\u2A89',
+      lnapprox: '\u2A89',
+      lnE: '\u2268',
+      lne: '\u2A87',
+      lneq: '\u2A87',
+      lneqq: '\u2268',
+      lnsim: '\u22E6',
+      loang: '\u27EC',
+      loarr: '\u21FD',
+      lobrk: '\u27E6',
+      LongLeftArrow: '\u27F5',
+      Longleftarrow: '\u27F8',
+      longleftarrow: '\u27F5',
+      LongLeftRightArrow: '\u27F7',
+      Longleftrightarrow: '\u27FA',
+      longleftrightarrow: '\u27F7',
+      longmapsto: '\u27FC',
+      LongRightArrow: '\u27F6',
+      Longrightarrow: '\u27F9',
+      longrightarrow: '\u27F6',
+      looparrowleft: '\u21AB',
+      looparrowright: '\u21AC',
+      lopar: '\u2985',
+      Lopf: '\uD835\uDD43',
+      lopf: '\uD835\uDD5D',
+      loplus: '\u2A2D',
+      lotimes: '\u2A34',
+      lowast: '\u2217',
+      lowbar: '\u005F',
+      LowerLeftArrow: '\u2199',
+      LowerRightArrow: '\u2198',
+      loz: '\u25CA',
+      lozenge: '\u25CA',
+      lozf: '\u29EB',
+      lpar: '\u0028',
+      lparlt: '\u2993',
+      lrarr: '\u21C6',
+      lrcorner: '\u231F',
+      lrhar: '\u21CB',
+      lrhard: '\u296D',
+      lrm: '\u200E',
+      lrtri: '\u22BF',
+      lsaquo: '\u2039',
+      Lscr: '\u2112',
+      lscr: '\uD835\uDCC1',
+      Lsh: '\u21B0',
+      lsh: '\u21B0',
+      lsim: '\u2272',
+      lsime: '\u2A8D',
+      lsimg: '\u2A8F',
+      lsqb: '\u005B',
+      lsquo: '\u2018',
+      lsquor: '\u201A',
+      Lstrok: '\u0141',
+      lstrok: '\u0142',
+      Lt: '\u226A',
+      LT: '\u003C',
+      lt: '\u003C',
+      ltcc: '\u2AA6',
+      ltcir: '\u2A79',
+      ltdot: '\u22D6',
+      lthree: '\u22CB',
+      ltimes: '\u22C9',
+      ltlarr: '\u2976',
+      ltquest: '\u2A7B',
+      ltri: '\u25C3',
+      ltrie: '\u22B4',
+      ltrif: '\u25C2',
+      ltrPar: '\u2996',
+      lurdshar: '\u294A',
+      luruhar: '\u2966',
+      lvertneqq: '\u2268\uFE00',
+      lvnE: '\u2268\uFE00',
+      macr: '\u00AF',
+      male: '\u2642',
+      malt: '\u2720',
+      maltese: '\u2720',
+      Map: '\u2905',
+      map: '\u21A6',
+      mapsto: '\u21A6',
+      mapstodown: '\u21A7',
+      mapstoleft: '\u21A4',
+      mapstoup: '\u21A5',
+      marker: '\u25AE',
+      mcomma: '\u2A29',
+      Mcy: '\u041C',
+      mcy: '\u043C',
+      mdash: '\u2014',
+      mDDot: '\u223A',
+      measuredangle: '\u2221',
+      MediumSpace: '\u205F',
+      Mellintrf: '\u2133',
+      Mfr: '\uD835\uDD10',
+      mfr: '\uD835\uDD2A',
+      mho: '\u2127',
+      micro: '\u00B5',
+      mid: '\u2223',
+      midast: '\u002A',
+      midcir: '\u2AF0',
+      middot: '\u00B7',
+      minus: '\u2212',
+      minusb: '\u229F',
+      minusd: '\u2238',
+      minusdu: '\u2A2A',
+      MinusPlus: '\u2213',
+      mlcp: '\u2ADB',
+      mldr: '\u2026',
+      mnplus: '\u2213',
+      models: '\u22A7',
+      Mopf: '\uD835\uDD44',
+      mopf: '\uD835\uDD5E',
+      mp: '\u2213',
+      Mscr: '\u2133',
+      mscr: '\uD835\uDCC2',
+      mstpos: '\u223E',
+      Mu: '\u039C',
+      mu: '\u03BC',
+      multimap: '\u22B8',
+      mumap: '\u22B8',
+      nabla: '\u2207',
+      Nacute: '\u0143',
+      nacute: '\u0144',
+      nang: '\u2220\u20D2',
+      nap: '\u2249',
+      napE: '\u2A70\u0338',
+      napid: '\u224B\u0338',
+      napos: '\u0149',
+      napprox: '\u2249',
+      natur: '\u266E',
+      natural: '\u266E',
+      naturals: '\u2115',
+      nbsp: '\u00A0',
+      nbump: '\u224E\u0338',
+      nbumpe: '\u224F\u0338',
+      ncap: '\u2A43',
+      Ncaron: '\u0147',
+      ncaron: '\u0148',
+      Ncedil: '\u0145',
+      ncedil: '\u0146',
+      ncong: '\u2247',
+      ncongdot: '\u2A6D\u0338',
+      ncup: '\u2A42',
+      Ncy: '\u041D',
+      ncy: '\u043D',
+      ndash: '\u2013',
+      ne: '\u2260',
+      nearhk: '\u2924',
+      neArr: '\u21D7',
+      nearr: '\u2197',
+      nearrow: '\u2197',
+      nedot: '\u2250\u0338',
+      NegativeMediumSpace: '\u200B',
+      NegativeThickSpace: '\u200B',
+      NegativeThinSpace: '\u200B',
+      NegativeVeryThinSpace: '\u200B',
+      nequiv: '\u2262',
+      nesear: '\u2928',
+      nesim: '\u2242\u0338',
+      NestedGreaterGreater: '\u226B',
+      NestedLessLess: '\u226A',
+      NewLine: '\u000A',
+      nexist: '\u2204',
+      nexists: '\u2204',
+      Nfr: '\uD835\uDD11',
+      nfr: '\uD835\uDD2B',
+      ngE: '\u2267\u0338',
+      nge: '\u2271',
+      ngeq: '\u2271',
+      ngeqq: '\u2267\u0338',
+      ngeqslant: '\u2A7E\u0338',
+      nges: '\u2A7E\u0338',
+      nGg: '\u22D9\u0338',
+      ngsim: '\u2275',
+      nGt: '\u226B\u20D2',
+      ngt: '\u226F',
+      ngtr: '\u226F',
+      nGtv: '\u226B\u0338',
+      nhArr: '\u21CE',
+      nharr: '\u21AE',
+      nhpar: '\u2AF2',
+      ni: '\u220B',
+      nis: '\u22FC',
+      nisd: '\u22FA',
+      niv: '\u220B',
+      NJcy: '\u040A',
+      njcy: '\u045A',
+      nlArr: '\u21CD',
+      nlarr: '\u219A',
+      nldr: '\u2025',
+      nlE: '\u2266\u0338',
+      nle: '\u2270',
+      nLeftarrow: '\u21CD',
+      nleftarrow: '\u219A',
+      nLeftrightarrow: '\u21CE',
+      nleftrightarrow: '\u21AE',
+      nleq: '\u2270',
+      nleqq: '\u2266\u0338',
+      nleqslant: '\u2A7D\u0338',
+      nles: '\u2A7D\u0338',
+      nless: '\u226E',
+      nLl: '\u22D8\u0338',
+      nlsim: '\u2274',
+      nLt: '\u226A\u20D2',
+      nlt: '\u226E',
+      nltri: '\u22EA',
+      nltrie: '\u22EC',
+      nLtv: '\u226A\u0338',
+      nmid: '\u2224',
+      NoBreak: '\u2060',
+      NonBreakingSpace: '\u00A0',
+      Nopf: '\u2115',
+      nopf: '\uD835\uDD5F',
+      Not: '\u2AEC',
+      not: '\u00AC',
+      NotCongruent: '\u2262',
+      NotCupCap: '\u226D',
+      NotDoubleVerticalBar: '\u2226',
+      NotElement: '\u2209',
+      NotEqual: '\u2260',
+      NotEqualTilde: '\u2242\u0338',
+      NotExists: '\u2204',
+      NotGreater: '\u226F',
+      NotGreaterEqual: '\u2271',
+      NotGreaterFullEqual: '\u2267\u0338',
+      NotGreaterGreater: '\u226B\u0338',
+      NotGreaterLess: '\u2279',
+      NotGreaterSlantEqual: '\u2A7E\u0338',
+      NotGreaterTilde: '\u2275',
+      NotHumpDownHump: '\u224E\u0338',
+      NotHumpEqual: '\u224F\u0338',
+      notin: '\u2209',
+      notindot: '\u22F5\u0338',
+      notinE: '\u22F9\u0338',
+      notinva: '\u2209',
+      notinvb: '\u22F7',
+      notinvc: '\u22F6',
+      NotLeftTriangle: '\u22EA',
+      NotLeftTriangleBar: '\u29CF\u0338',
+      NotLeftTriangleEqual: '\u22EC',
+      NotLess: '\u226E',
+      NotLessEqual: '\u2270',
+      NotLessGreater: '\u2278',
+      NotLessLess: '\u226A\u0338',
+      NotLessSlantEqual: '\u2A7D\u0338',
+      NotLessTilde: '\u2274',
+      NotNestedGreaterGreater: '\u2AA2\u0338',
+      NotNestedLessLess: '\u2AA1\u0338',
+      notni: '\u220C',
+      notniva: '\u220C',
+      notnivb: '\u22FE',
+      notnivc: '\u22FD',
+      NotPrecedes: '\u2280',
+      NotPrecedesEqual: '\u2AAF\u0338',
+      NotPrecedesSlantEqual: '\u22E0',
+      NotReverseElement: '\u220C',
+      NotRightTriangle: '\u22EB',
+      NotRightTriangleBar: '\u29D0\u0338',
+      NotRightTriangleEqual: '\u22ED',
+      NotSquareSubset: '\u228F\u0338',
+      NotSquareSubsetEqual: '\u22E2',
+      NotSquareSuperset: '\u2290\u0338',
+      NotSquareSupersetEqual: '\u22E3',
+      NotSubset: '\u2282\u20D2',
+      NotSubsetEqual: '\u2288',
+      NotSucceeds: '\u2281',
+      NotSucceedsEqual: '\u2AB0\u0338',
+      NotSucceedsSlantEqual: '\u22E1',
+      NotSucceedsTilde: '\u227F\u0338',
+      NotSuperset: '\u2283\u20D2',
+      NotSupersetEqual: '\u2289',
+      NotTilde: '\u2241',
+      NotTildeEqual: '\u2244',
+      NotTildeFullEqual: '\u2247',
+      NotTildeTilde: '\u2249',
+      NotVerticalBar: '\u2224',
+      npar: '\u2226',
+      nparallel: '\u2226',
+      nparsl: '\u2AFD\u20E5',
+      npart: '\u2202\u0338',
+      npolint: '\u2A14',
+      npr: '\u2280',
+      nprcue: '\u22E0',
+      npre: '\u2AAF\u0338',
+      nprec: '\u2280',
+      npreceq: '\u2AAF\u0338',
+      nrArr: '\u21CF',
+      nrarr: '\u219B',
+      nrarrc: '\u2933\u0338',
+      nrarrw: '\u219D\u0338',
+      nRightarrow: '\u21CF',
+      nrightarrow: '\u219B',
+      nrtri: '\u22EB',
+      nrtrie: '\u22ED',
+      nsc: '\u2281',
+      nsccue: '\u22E1',
+      nsce: '\u2AB0\u0338',
+      Nscr: '\uD835\uDCA9',
+      nscr: '\uD835\uDCC3',
+      nshortmid: '\u2224',
+      nshortparallel: '\u2226',
+      nsim: '\u2241',
+      nsime: '\u2244',
+      nsimeq: '\u2244',
+      nsmid: '\u2224',
+      nspar: '\u2226',
+      nsqsube: '\u22E2',
+      nsqsupe: '\u22E3',
+      nsub: '\u2284',
+      nsubE: '\u2AC5\u0338',
+      nsube: '\u2288',
+      nsubset: '\u2282\u20D2',
+      nsubseteq: '\u2288',
+      nsubseteqq: '\u2AC5\u0338',
+      nsucc: '\u2281',
+      nsucceq: '\u2AB0\u0338',
+      nsup: '\u2285',
+      nsupE: '\u2AC6\u0338',
+      nsupe: '\u2289',
+      nsupset: '\u2283\u20D2',
+      nsupseteq: '\u2289',
+      nsupseteqq: '\u2AC6\u0338',
+      ntgl: '\u2279',
+      Ntilde: '\u00D1',
+      ntilde: '\u00F1',
+      ntlg: '\u2278',
+      ntriangleleft: '\u22EA',
+      ntrianglelefteq: '\u22EC',
+      ntriangleright: '\u22EB',
+      ntrianglerighteq: '\u22ED',
+      Nu: '\u039D',
+      nu: '\u03BD',
+      num: '\u0023',
+      numero: '\u2116',
+      numsp: '\u2007',
+      nvap: '\u224D\u20D2',
+      nVDash: '\u22AF',
+      nVdash: '\u22AE',
+      nvDash: '\u22AD',
+      nvdash: '\u22AC',
+      nvge: '\u2265\u20D2',
+      nvgt: '\u003E\u20D2',
+      nvHarr: '\u2904',
+      nvinfin: '\u29DE',
+      nvlArr: '\u2902',
+      nvle: '\u2264\u20D2',
+      nvlt: '\u003C\u20D2',
+      nvltrie: '\u22B4\u20D2',
+      nvrArr: '\u2903',
+      nvrtrie: '\u22B5\u20D2',
+      nvsim: '\u223C\u20D2',
+      nwarhk: '\u2923',
+      nwArr: '\u21D6',
+      nwarr: '\u2196',
+      nwarrow: '\u2196',
+      nwnear: '\u2927',
+      Oacute: '\u00D3',
+      oacute: '\u00F3',
+      oast: '\u229B',
+      ocir: '\u229A',
+      Ocirc: '\u00D4',
+      ocirc: '\u00F4',
+      Ocy: '\u041E',
+      ocy: '\u043E',
+      odash: '\u229D',
+      Odblac: '\u0150',
+      odblac: '\u0151',
+      odiv: '\u2A38',
+      odot: '\u2299',
+      odsold: '\u29BC',
+      OElig: '\u0152',
+      oelig: '\u0153',
+      ofcir: '\u29BF',
+      Ofr: '\uD835\uDD12',
+      ofr: '\uD835\uDD2C',
+      ogon: '\u02DB',
+      Ograve: '\u00D2',
+      ograve: '\u00F2',
+      ogt: '\u29C1',
+      ohbar: '\u29B5',
+      ohm: '\u03A9',
+      oint: '\u222E',
+      olarr: '\u21BA',
+      olcir: '\u29BE',
+      olcross: '\u29BB',
+      oline: '\u203E',
+      olt: '\u29C0',
+      Omacr: '\u014C',
+      omacr: '\u014D',
+      Omega: '\u03A9',
+      omega: '\u03C9',
+      Omicron: '\u039F',
+      omicron: '\u03BF',
+      omid: '\u29B6',
+      ominus: '\u2296',
+      Oopf: '\uD835\uDD46',
+      oopf: '\uD835\uDD60',
+      opar: '\u29B7',
+      OpenCurlyDoubleQuote: '\u201C',
+      OpenCurlyQuote: '\u2018',
+      operp: '\u29B9',
+      oplus: '\u2295',
+      Or: '\u2A54',
+      or: '\u2228',
+      orarr: '\u21BB',
+      ord: '\u2A5D',
+      order: '\u2134',
+      orderof: '\u2134',
+      ordf: '\u00AA',
+      ordm: '\u00BA',
+      origof: '\u22B6',
+      oror: '\u2A56',
+      orslope: '\u2A57',
+      orv: '\u2A5B',
+      oS: '\u24C8',
+      Oscr: '\uD835\uDCAA',
+      oscr: '\u2134',
+      Oslash: '\u00D8',
+      oslash: '\u00F8',
+      osol: '\u2298',
+      Otilde: '\u00D5',
+      otilde: '\u00F5',
+      Otimes: '\u2A37',
+      otimes: '\u2297',
+      otimesas: '\u2A36',
+      Ouml: '\u00D6',
+      ouml: '\u00F6',
+      ovbar: '\u233D',
+      OverBar: '\u203E',
+      OverBrace: '\u23DE',
+      OverBracket: '\u23B4',
+      OverParenthesis: '\u23DC',
+      par: '\u2225',
+      para: '\u00B6',
+      parallel: '\u2225',
+      parsim: '\u2AF3',
+      parsl: '\u2AFD',
+      part: '\u2202',
+      PartialD: '\u2202',
+      Pcy: '\u041F',
+      pcy: '\u043F',
+      percnt: '\u0025',
+      period: '\u002E',
+      permil: '\u2030',
+      perp: '\u22A5',
+      pertenk: '\u2031',
+      Pfr: '\uD835\uDD13',
+      pfr: '\uD835\uDD2D',
+      Phi: '\u03A6',
+      phi: '\u03C6',
+      phiv: '\u03D5',
+      phmmat: '\u2133',
+      phone: '\u260E',
+      Pi: '\u03A0',
+      pi: '\u03C0',
+      pitchfork: '\u22D4',
+      piv: '\u03D6',
+      planck: '\u210F',
+      planckh: '\u210E',
+      plankv: '\u210F',
+      plus: '\u002B',
+      plusacir: '\u2A23',
+      plusb: '\u229E',
+      pluscir: '\u2A22',
+      plusdo: '\u2214',
+      plusdu: '\u2A25',
+      pluse: '\u2A72',
+      PlusMinus: '\u00B1',
+      plusmn: '\u00B1',
+      plussim: '\u2A26',
+      plustwo: '\u2A27',
+      pm: '\u00B1',
+      Poincareplane: '\u210C',
+      pointint: '\u2A15',
+      Popf: '\u2119',
+      popf: '\uD835\uDD61',
+      pound: '\u00A3',
+      Pr: '\u2ABB',
+      pr: '\u227A',
+      prap: '\u2AB7',
+      prcue: '\u227C',
+      prE: '\u2AB3',
+      pre: '\u2AAF',
+      prec: '\u227A',
+      precapprox: '\u2AB7',
+      preccurlyeq: '\u227C',
+      Precedes: '\u227A',
+      PrecedesEqual: '\u2AAF',
+      PrecedesSlantEqual: '\u227C',
+      PrecedesTilde: '\u227E',
+      preceq: '\u2AAF',
+      precnapprox: '\u2AB9',
+      precneqq: '\u2AB5',
+      precnsim: '\u22E8',
+      precsim: '\u227E',
+      Prime: '\u2033',
+      prime: '\u2032',
+      primes: '\u2119',
+      prnap: '\u2AB9',
+      prnE: '\u2AB5',
+      prnsim: '\u22E8',
+      prod: '\u220F',
+      Product: '\u220F',
+      profalar: '\u232E',
+      profline: '\u2312',
+      profsurf: '\u2313',
+      prop: '\u221D',
+      Proportion: '\u2237',
+      Proportional: '\u221D',
+      propto: '\u221D',
+      prsim: '\u227E',
+      prurel: '\u22B0',
+      Pscr: '\uD835\uDCAB',
+      pscr: '\uD835\uDCC5',
+      Psi: '\u03A8',
+      psi: '\u03C8',
+      puncsp: '\u2008',
+      Qfr: '\uD835\uDD14',
+      qfr: '\uD835\uDD2E',
+      qint: '\u2A0C',
+      Qopf: '\u211A',
+      qopf: '\uD835\uDD62',
+      qprime: '\u2057',
+      Qscr: '\uD835\uDCAC',
+      qscr: '\uD835\uDCC6',
+      quaternions: '\u210D',
+      quatint: '\u2A16',
+      quest: '\u003F',
+      questeq: '\u225F',
+      QUOT: '\u0022',
+      quot: '\u0022',
+      rAarr: '\u21DB',
+      race: '\u223D\u0331',
+      Racute: '\u0154',
+      racute: '\u0155',
+      radic: '\u221A',
+      raemptyv: '\u29B3',
+      Rang: '\u27EB',
+      rang: '\u27E9',
+      rangd: '\u2992',
+      range: '\u29A5',
+      rangle: '\u27E9',
+      raquo: '\u00BB',
+      Rarr: '\u21A0',
+      rArr: '\u21D2',
+      rarr: '\u2192',
+      rarrap: '\u2975',
+      rarrb: '\u21E5',
+      rarrbfs: '\u2920',
+      rarrc: '\u2933',
+      rarrfs: '\u291E',
+      rarrhk: '\u21AA',
+      rarrlp: '\u21AC',
+      rarrpl: '\u2945',
+      rarrsim: '\u2974',
+      Rarrtl: '\u2916',
+      rarrtl: '\u21A3',
+      rarrw: '\u219D',
+      rAtail: '\u291C',
+      ratail: '\u291A',
+      ratio: '\u2236',
+      rationals: '\u211A',
+      RBarr: '\u2910',
+      rBarr: '\u290F',
+      rbarr: '\u290D',
+      rbbrk: '\u2773',
+      rbrace: '\u007D',
+      rbrack: '\u005D',
+      rbrke: '\u298C',
+      rbrksld: '\u298E',
+      rbrkslu: '\u2990',
+      Rcaron: '\u0158',
+      rcaron: '\u0159',
+      Rcedil: '\u0156',
+      rcedil: '\u0157',
+      rceil: '\u2309',
+      rcub: '\u007D',
+      Rcy: '\u0420',
+      rcy: '\u0440',
+      rdca: '\u2937',
+      rdldhar: '\u2969',
+      rdquo: '\u201D',
+      rdquor: '\u201D',
+      rdsh: '\u21B3',
+      Re: '\u211C',
+      real: '\u211C',
+      realine: '\u211B',
+      realpart: '\u211C',
+      reals: '\u211D',
+      rect: '\u25AD',
+      REG: '\u00AE',
+      reg: '\u00AE',
+      ReverseElement: '\u220B',
+      ReverseEquilibrium: '\u21CB',
+      ReverseUpEquilibrium: '\u296F',
+      rfisht: '\u297D',
+      rfloor: '\u230B',
+      Rfr: '\u211C',
+      rfr: '\uD835\uDD2F',
+      rHar: '\u2964',
+      rhard: '\u21C1',
+      rharu: '\u21C0',
+      rharul: '\u296C',
+      Rho: '\u03A1',
+      rho: '\u03C1',
+      rhov: '\u03F1',
+      RightAngleBracket: '\u27E9',
+      RightArrow: '\u2192',
+      Rightarrow: '\u21D2',
+      rightarrow: '\u2192',
+      RightArrowBar: '\u21E5',
+      RightArrowLeftArrow: '\u21C4',
+      rightarrowtail: '\u21A3',
+      RightCeiling: '\u2309',
+      RightDoubleBracket: '\u27E7',
+      RightDownTeeVector: '\u295D',
+      RightDownVector: '\u21C2',
+      RightDownVectorBar: '\u2955',
+      RightFloor: '\u230B',
+      rightharpoondown: '\u21C1',
+      rightharpoonup: '\u21C0',
+      rightleftarrows: '\u21C4',
+      rightleftharpoons: '\u21CC',
+      rightrightarrows: '\u21C9',
+      rightsquigarrow: '\u219D',
+      RightTee: '\u22A2',
+      RightTeeArrow: '\u21A6',
+      RightTeeVector: '\u295B',
+      rightthreetimes: '\u22CC',
+      RightTriangle: '\u22B3',
+      RightTriangleBar: '\u29D0',
+      RightTriangleEqual: '\u22B5',
+      RightUpDownVector: '\u294F',
+      RightUpTeeVector: '\u295C',
+      RightUpVector: '\u21BE',
+      RightUpVectorBar: '\u2954',
+      RightVector: '\u21C0',
+      RightVectorBar: '\u2953',
+      ring: '\u02DA',
+      risingdotseq: '\u2253',
+      rlarr: '\u21C4',
+      rlhar: '\u21CC',
+      rlm: '\u200F',
+      rmoust: '\u23B1',
+      rmoustache: '\u23B1',
+      rnmid: '\u2AEE',
+      roang: '\u27ED',
+      roarr: '\u21FE',
+      robrk: '\u27E7',
+      ropar: '\u2986',
+      Ropf: '\u211D',
+      ropf: '\uD835\uDD63',
+      roplus: '\u2A2E',
+      rotimes: '\u2A35',
+      RoundImplies: '\u2970',
+      rpar: '\u0029',
+      rpargt: '\u2994',
+      rppolint: '\u2A12',
+      rrarr: '\u21C9',
+      Rrightarrow: '\u21DB',
+      rsaquo: '\u203A',
+      Rscr: '\u211B',
+      rscr: '\uD835\uDCC7',
+      Rsh: '\u21B1',
+      rsh: '\u21B1',
+      rsqb: '\u005D',
+      rsquo: '\u2019',
+      rsquor: '\u2019',
+      rthree: '\u22CC',
+      rtimes: '\u22CA',
+      rtri: '\u25B9',
+      rtrie: '\u22B5',
+      rtrif: '\u25B8',
+      rtriltri: '\u29CE',
+      RuleDelayed: '\u29F4',
+      ruluhar: '\u2968',
+      rx: '\u211E',
+      Sacute: '\u015A',
+      sacute: '\u015B',
+      sbquo: '\u201A',
+      Sc: '\u2ABC',
+      sc: '\u227B',
+      scap: '\u2AB8',
+      Scaron: '\u0160',
+      scaron: '\u0161',
+      sccue: '\u227D',
+      scE: '\u2AB4',
+      sce: '\u2AB0',
+      Scedil: '\u015E',
+      scedil: '\u015F',
+      Scirc: '\u015C',
+      scirc: '\u015D',
+      scnap: '\u2ABA',
+      scnE: '\u2AB6',
+      scnsim: '\u22E9',
+      scpolint: '\u2A13',
+      scsim: '\u227F',
+      Scy: '\u0421',
+      scy: '\u0441',
+      sdot: '\u22C5',
+      sdotb: '\u22A1',
+      sdote: '\u2A66',
+      searhk: '\u2925',
+      seArr: '\u21D8',
+      searr: '\u2198',
+      searrow: '\u2198',
+      sect: '\u00A7',
+      semi: '\u003B',
+      seswar: '\u2929',
+      setminus: '\u2216',
+      setmn: '\u2216',
+      sext: '\u2736',
+      Sfr: '\uD835\uDD16',
+      sfr: '\uD835\uDD30',
+      sfrown: '\u2322',
+      sharp: '\u266F',
+      SHCHcy: '\u0429',
+      shchcy: '\u0449',
+      SHcy: '\u0428',
+      shcy: '\u0448',
+      ShortDownArrow: '\u2193',
+      ShortLeftArrow: '\u2190',
+      shortmid: '\u2223',
+      shortparallel: '\u2225',
+      ShortRightArrow: '\u2192',
+      ShortUpArrow: '\u2191',
+      shy: '\u00AD',
+      Sigma: '\u03A3',
+      sigma: '\u03C3',
+      sigmaf: '\u03C2',
+      sigmav: '\u03C2',
+      sim: '\u223C',
+      simdot: '\u2A6A',
+      sime: '\u2243',
+      simeq: '\u2243',
+      simg: '\u2A9E',
+      simgE: '\u2AA0',
+      siml: '\u2A9D',
+      simlE: '\u2A9F',
+      simne: '\u2246',
+      simplus: '\u2A24',
+      simrarr: '\u2972',
+      slarr: '\u2190',
+      SmallCircle: '\u2218',
+      smallsetminus: '\u2216',
+      smashp: '\u2A33',
+      smeparsl: '\u29E4',
+      smid: '\u2223',
+      smile: '\u2323',
+      smt: '\u2AAA',
+      smte: '\u2AAC',
+      smtes: '\u2AAC\uFE00',
+      SOFTcy: '\u042C',
+      softcy: '\u044C',
+      sol: '\u002F',
+      solb: '\u29C4',
+      solbar: '\u233F',
+      Sopf: '\uD835\uDD4A',
+      sopf: '\uD835\uDD64',
+      spades: '\u2660',
+      spadesuit: '\u2660',
+      spar: '\u2225',
+      sqcap: '\u2293',
+      sqcaps: '\u2293\uFE00',
+      sqcup: '\u2294',
+      sqcups: '\u2294\uFE00',
+      Sqrt: '\u221A',
+      sqsub: '\u228F',
+      sqsube: '\u2291',
+      sqsubset: '\u228F',
+      sqsubseteq: '\u2291',
+      sqsup: '\u2290',
+      sqsupe: '\u2292',
+      sqsupset: '\u2290',
+      sqsupseteq: '\u2292',
+      squ: '\u25A1',
+      Square: '\u25A1',
+      square: '\u25A1',
+      SquareIntersection: '\u2293',
+      SquareSubset: '\u228F',
+      SquareSubsetEqual: '\u2291',
+      SquareSuperset: '\u2290',
+      SquareSupersetEqual: '\u2292',
+      SquareUnion: '\u2294',
+      squarf: '\u25AA',
+      squf: '\u25AA',
+      srarr: '\u2192',
+      Sscr: '\uD835\uDCAE',
+      sscr: '\uD835\uDCC8',
+      ssetmn: '\u2216',
+      ssmile: '\u2323',
+      sstarf: '\u22C6',
+      Star: '\u22C6',
+      star: '\u2606',
+      starf: '\u2605',
+      straightepsilon: '\u03F5',
+      straightphi: '\u03D5',
+      strns: '\u00AF',
+      Sub: '\u22D0',
+      sub: '\u2282',
+      subdot: '\u2ABD',
+      subE: '\u2AC5',
+      sube: '\u2286',
+      subedot: '\u2AC3',
+      submult: '\u2AC1',
+      subnE: '\u2ACB',
+      subne: '\u228A',
+      subplus: '\u2ABF',
+      subrarr: '\u2979',
+      Subset: '\u22D0',
+      subset: '\u2282',
+      subseteq: '\u2286',
+      subseteqq: '\u2AC5',
+      SubsetEqual: '\u2286',
+      subsetneq: '\u228A',
+      subsetneqq: '\u2ACB',
+      subsim: '\u2AC7',
+      subsub: '\u2AD5',
+      subsup: '\u2AD3',
+      succ: '\u227B',
+      succapprox: '\u2AB8',
+      succcurlyeq: '\u227D',
+      Succeeds: '\u227B',
+      SucceedsEqual: '\u2AB0',
+      SucceedsSlantEqual: '\u227D',
+      SucceedsTilde: '\u227F',
+      succeq: '\u2AB0',
+      succnapprox: '\u2ABA',
+      succneqq: '\u2AB6',
+      succnsim: '\u22E9',
+      succsim: '\u227F',
+      SuchThat: '\u220B',
+      Sum: '\u2211',
+      sum: '\u2211',
+      sung: '\u266A',
+      Sup: '\u22D1',
+      sup: '\u2283',
+      sup1: '\u00B9',
+      sup2: '\u00B2',
+      sup3: '\u00B3',
+      supdot: '\u2ABE',
+      supdsub: '\u2AD8',
+      supE: '\u2AC6',
+      supe: '\u2287',
+      supedot: '\u2AC4',
+      Superset: '\u2283',
+      SupersetEqual: '\u2287',
+      suphsol: '\u27C9',
+      suphsub: '\u2AD7',
+      suplarr: '\u297B',
+      supmult: '\u2AC2',
+      supnE: '\u2ACC',
+      supne: '\u228B',
+      supplus: '\u2AC0',
+      Supset: '\u22D1',
+      supset: '\u2283',
+      supseteq: '\u2287',
+      supseteqq: '\u2AC6',
+      supsetneq: '\u228B',
+      supsetneqq: '\u2ACC',
+      supsim: '\u2AC8',
+      supsub: '\u2AD4',
+      supsup: '\u2AD6',
+      swarhk: '\u2926',
+      swArr: '\u21D9',
+      swarr: '\u2199',
+      swarrow: '\u2199',
+      swnwar: '\u292A',
+      szlig: '\u00DF',
+      Tab: '\u0009',
+      target: '\u2316',
+      Tau: '\u03A4',
+      tau: '\u03C4',
+      tbrk: '\u23B4',
+      Tcaron: '\u0164',
+      tcaron: '\u0165',
+      Tcedil: '\u0162',
+      tcedil: '\u0163',
+      Tcy: '\u0422',
+      tcy: '\u0442',
+      tdot: '\u20DB',
+      telrec: '\u2315',
+      Tfr: '\uD835\uDD17',
+      tfr: '\uD835\uDD31',
+      there4: '\u2234',
+      Therefore: '\u2234',
+      therefore: '\u2234',
+      Theta: '\u0398',
+      theta: '\u03B8',
+      thetasym: '\u03D1',
+      thetav: '\u03D1',
+      thickapprox: '\u2248',
+      thicksim: '\u223C',
+      ThickSpace: '\u205F\u200A',
+      thinsp: '\u2009',
+      ThinSpace: '\u2009',
+      thkap: '\u2248',
+      thksim: '\u223C',
+      THORN: '\u00DE',
+      thorn: '\u00FE',
+      Tilde: '\u223C',
+      tilde: '\u02DC',
+      TildeEqual: '\u2243',
+      TildeFullEqual: '\u2245',
+      TildeTilde: '\u2248',
+      times: '\u00D7',
+      timesb: '\u22A0',
+      timesbar: '\u2A31',
+      timesd: '\u2A30',
+      tint: '\u222D',
+      toea: '\u2928',
+      top: '\u22A4',
+      topbot: '\u2336',
+      topcir: '\u2AF1',
+      Topf: '\uD835\uDD4B',
+      topf: '\uD835\uDD65',
+      topfork: '\u2ADA',
+      tosa: '\u2929',
+      tprime: '\u2034',
+      TRADE: '\u2122',
+      trade: '\u2122',
+      triangle: '\u25B5',
+      triangledown: '\u25BF',
+      triangleleft: '\u25C3',
+      trianglelefteq: '\u22B4',
+      triangleq: '\u225C',
+      triangleright: '\u25B9',
+      trianglerighteq: '\u22B5',
+      tridot: '\u25EC',
+      trie: '\u225C',
+      triminus: '\u2A3A',
+      TripleDot: '\u20DB',
+      triplus: '\u2A39',
+      trisb: '\u29CD',
+      tritime: '\u2A3B',
+      trpezium: '\u23E2',
+      Tscr: '\uD835\uDCAF',
+      tscr: '\uD835\uDCC9',
+      TScy: '\u0426',
+      tscy: '\u0446',
+      TSHcy: '\u040B',
+      tshcy: '\u045B',
+      Tstrok: '\u0166',
+      tstrok: '\u0167',
+      twixt: '\u226C',
+      twoheadleftarrow: '\u219E',
+      twoheadrightarrow: '\u21A0',
+      Uacute: '\u00DA',
+      uacute: '\u00FA',
+      Uarr: '\u219F',
+      uArr: '\u21D1',
+      uarr: '\u2191',
+      Uarrocir: '\u2949',
+      Ubrcy: '\u040E',
+      ubrcy: '\u045E',
+      Ubreve: '\u016C',
+      ubreve: '\u016D',
+      Ucirc: '\u00DB',
+      ucirc: '\u00FB',
+      Ucy: '\u0423',
+      ucy: '\u0443',
+      udarr: '\u21C5',
+      Udblac: '\u0170',
+      udblac: '\u0171',
+      udhar: '\u296E',
+      ufisht: '\u297E',
+      Ufr: '\uD835\uDD18',
+      ufr: '\uD835\uDD32',
+      Ugrave: '\u00D9',
+      ugrave: '\u00F9',
+      uHar: '\u2963',
+      uharl: '\u21BF',
+      uharr: '\u21BE',
+      uhblk: '\u2580',
+      ulcorn: '\u231C',
+      ulcorner: '\u231C',
+      ulcrop: '\u230F',
+      ultri: '\u25F8',
+      Umacr: '\u016A',
+      umacr: '\u016B',
+      uml: '\u00A8',
+      UnderBar: '\u005F',
+      UnderBrace: '\u23DF',
+      UnderBracket: '\u23B5',
+      UnderParenthesis: '\u23DD',
+      Union: '\u22C3',
+      UnionPlus: '\u228E',
+      Uogon: '\u0172',
+      uogon: '\u0173',
+      Uopf: '\uD835\uDD4C',
+      uopf: '\uD835\uDD66',
+      UpArrow: '\u2191',
+      Uparrow: '\u21D1',
+      uparrow: '\u2191',
+      UpArrowBar: '\u2912',
+      UpArrowDownArrow: '\u21C5',
+      UpDownArrow: '\u2195',
+      Updownarrow: '\u21D5',
+      updownarrow: '\u2195',
+      UpEquilibrium: '\u296E',
+      upharpoonleft: '\u21BF',
+      upharpoonright: '\u21BE',
+      uplus: '\u228E',
+      UpperLeftArrow: '\u2196',
+      UpperRightArrow: '\u2197',
+      Upsi: '\u03D2',
+      upsi: '\u03C5',
+      upsih: '\u03D2',
+      Upsilon: '\u03A5',
+      upsilon: '\u03C5',
+      UpTee: '\u22A5',
+      UpTeeArrow: '\u21A5',
+      upuparrows: '\u21C8',
+      urcorn: '\u231D',
+      urcorner: '\u231D',
+      urcrop: '\u230E',
+      Uring: '\u016E',
+      uring: '\u016F',
+      urtri: '\u25F9',
+      Uscr: '\uD835\uDCB0',
+      uscr: '\uD835\uDCCA',
+      utdot: '\u22F0',
+      Utilde: '\u0168',
+      utilde: '\u0169',
+      utri: '\u25B5',
+      utrif: '\u25B4',
+      uuarr: '\u21C8',
+      Uuml: '\u00DC',
+      uuml: '\u00FC',
+      uwangle: '\u29A7',
+      vangrt: '\u299C',
+      varepsilon: '\u03F5',
+      varkappa: '\u03F0',
+      varnothing: '\u2205',
+      varphi: '\u03D5',
+      varpi: '\u03D6',
+      varpropto: '\u221D',
+      vArr: '\u21D5',
+      varr: '\u2195',
+      varrho: '\u03F1',
+      varsigma: '\u03C2',
+      varsubsetneq: '\u228A\uFE00',
+      varsubsetneqq: '\u2ACB\uFE00',
+      varsupsetneq: '\u228B\uFE00',
+      varsupsetneqq: '\u2ACC\uFE00',
+      vartheta: '\u03D1',
+      vartriangleleft: '\u22B2',
+      vartriangleright: '\u22B3',
+      Vbar: '\u2AEB',
+      vBar: '\u2AE8',
+      vBarv: '\u2AE9',
+      Vcy: '\u0412',
+      vcy: '\u0432',
+      VDash: '\u22AB',
+      Vdash: '\u22A9',
+      vDash: '\u22A8',
+      vdash: '\u22A2',
+      Vdashl: '\u2AE6',
+      Vee: '\u22C1',
+      vee: '\u2228',
+      veebar: '\u22BB',
+      veeeq: '\u225A',
+      vellip: '\u22EE',
+      Verbar: '\u2016',
+      verbar: '\u007C',
+      Vert: '\u2016',
+      vert: '\u007C',
+      VerticalBar: '\u2223',
+      VerticalLine: '\u007C',
+      VerticalSeparator: '\u2758',
+      VerticalTilde: '\u2240',
+      VeryThinSpace: '\u200A',
+      Vfr: '\uD835\uDD19',
+      vfr: '\uD835\uDD33',
+      vltri: '\u22B2',
+      vnsub: '\u2282\u20D2',
+      vnsup: '\u2283\u20D2',
+      Vopf: '\uD835\uDD4D',
+      vopf: '\uD835\uDD67',
+      vprop: '\u221D',
+      vrtri: '\u22B3',
+      Vscr: '\uD835\uDCB1',
+      vscr: '\uD835\uDCCB',
+      vsubnE: '\u2ACB\uFE00',
+      vsubne: '\u228A\uFE00',
+      vsupnE: '\u2ACC\uFE00',
+      vsupne: '\u228B\uFE00',
+      Vvdash: '\u22AA',
+      vzigzag: '\u299A',
+      Wcirc: '\u0174',
+      wcirc: '\u0175',
+      wedbar: '\u2A5F',
+      Wedge: '\u22C0',
+      wedge: '\u2227',
+      wedgeq: '\u2259',
+      weierp: '\u2118',
+      Wfr: '\uD835\uDD1A',
+      wfr: '\uD835\uDD34',
+      Wopf: '\uD835\uDD4E',
+      wopf: '\uD835\uDD68',
+      wp: '\u2118',
+      wr: '\u2240',
+      wreath: '\u2240',
+      Wscr: '\uD835\uDCB2',
+      wscr: '\uD835\uDCCC',
+      xcap: '\u22C2',
+      xcirc: '\u25EF',
+      xcup: '\u22C3',
+      xdtri: '\u25BD',
+      Xfr: '\uD835\uDD1B',
+      xfr: '\uD835\uDD35',
+      xhArr: '\u27FA',
+      xharr: '\u27F7',
+      Xi: '\u039E',
+      xi: '\u03BE',
+      xlArr: '\u27F8',
+      xlarr: '\u27F5',
+      xmap: '\u27FC',
+      xnis: '\u22FB',
+      xodot: '\u2A00',
+      Xopf: '\uD835\uDD4F',
+      xopf: '\uD835\uDD69',
+      xoplus: '\u2A01',
+      xotime: '\u2A02',
+      xrArr: '\u27F9',
+      xrarr: '\u27F6',
+      Xscr: '\uD835\uDCB3',
+      xscr: '\uD835\uDCCD',
+      xsqcup: '\u2A06',
+      xuplus: '\u2A04',
+      xutri: '\u25B3',
+      xvee: '\u22C1',
+      xwedge: '\u22C0',
+      Yacute: '\u00DD',
+      yacute: '\u00FD',
+      YAcy: '\u042F',
+      yacy: '\u044F',
+      Ycirc: '\u0176',
+      ycirc: '\u0177',
+      Ycy: '\u042B',
+      ycy: '\u044B',
+      yen: '\u00A5',
+      Yfr: '\uD835\uDD1C',
+      yfr: '\uD835\uDD36',
+      YIcy: '\u0407',
+      yicy: '\u0457',
+      Yopf: '\uD835\uDD50',
+      yopf: '\uD835\uDD6A',
+      Yscr: '\uD835\uDCB4',
+      yscr: '\uD835\uDCCE',
+      YUcy: '\u042E',
+      yucy: '\u044E',
+      Yuml: '\u0178',
+      yuml: '\u00FF',
+      Zacute: '\u0179',
+      zacute: '\u017A',
+      Zcaron: '\u017D',
+      zcaron: '\u017E',
+      Zcy: '\u0417',
+      zcy: '\u0437',
+      Zdot: '\u017B',
+      zdot: '\u017C',
+      zeetrf: '\u2128',
+      ZeroWidthSpace: '\u200B',
+      Zeta: '\u0396',
+      zeta: '\u03B6',
+      Zfr: '\u2128',
+      zfr: '\uD835\uDD37',
+      ZHcy: '\u0416',
+      zhcy: '\u0436',
+      zigrarr: '\u21DD',
+      Zopf: '\u2124',
+      zopf: '\uD835\uDD6B',
+      Zscr: '\uD835\uDCB5',
+      zscr: '\uD835\uDCCF',
+      zwj: '\u200D',
+      zwnj: '\u200C'
+    });
+
+    /**
+     * @deprecated use `HTML_ENTITIES` instead
+     * @see HTML_ENTITIES
+     */
+    exports.entityMap = exports.HTML_ENTITIES;
+  });
+  entities.XML_ENTITIES;
+  entities.HTML_ENTITIES;
+  entities.entityMap;
+
+  var NAMESPACE$1 = conventions.NAMESPACE;
+
+  //[4]   	NameStartChar	   ::=   	":" | [A-Z] | "_" | [a-z] | [#xC0-#xD6] | [#xD8-#xF6] | [#xF8-#x2FF] | [#x370-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | [#x2070-#x218F] | [#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] | [#x10000-#xEFFFF]
+  //[4a]   	NameChar	   ::=   	NameStartChar | "-" | "." | [0-9] | #xB7 | [#x0300-#x036F] | [#x203F-#x2040]
+  //[5]   	Name	   ::=   	NameStartChar (NameChar)*
+  var nameStartChar = /[A-Z_a-z\xC0-\xD6\xD8-\xF6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]/; //\u10000-\uEFFFF
+  var nameChar = new RegExp("[\\-\\.0-9" + nameStartChar.source.slice(1, -1) + "\\u00B7\\u0300-\\u036F\\u203F-\\u2040]");
+  var tagNamePattern = new RegExp('^' + nameStartChar.source + nameChar.source + '*(?:\:' + nameStartChar.source + nameChar.source + '*)?$');
+  //var tagNamePattern = /^[a-zA-Z_][\w\-\.]*(?:\:[a-zA-Z_][\w\-\.]*)?$/
+  //var handlers = 'resolveEntity,getExternalSubset,characters,endDocument,endElement,endPrefixMapping,ignorableWhitespace,processingInstruction,setDocumentLocator,skippedEntity,startDocument,startElement,startPrefixMapping,notationDecl,unparsedEntityDecl,error,fatalError,warning,attributeDecl,elementDecl,externalEntityDecl,internalEntityDecl,comment,endCDATA,endDTD,endEntity,startCDATA,startDTD,startEntity'.split(',')
+
+  //S_TAG,	S_ATTR,	S_EQ,	S_ATTR_NOQUOT_VALUE
+  //S_ATTR_SPACE,	S_ATTR_END,	S_TAG_SPACE, S_TAG_CLOSE
+  var S_TAG = 0; //tag name offerring
+  var S_ATTR = 1; //attr name offerring
+  var S_ATTR_SPACE = 2; //attr name end and space offer
+  var S_EQ = 3; //=space?
+  var S_ATTR_NOQUOT_VALUE = 4; //attr value(no quot value only)
+  var S_ATTR_END = 5; //attr value end and no space(quot end)
+  var S_TAG_SPACE = 6; //(attr value end || tag end ) && (space offer)
+  var S_TAG_CLOSE = 7; //closed el<el />
+
+  /**
+   * Creates an error that will not be caught by XMLReader aka the SAX parser.
+   *
+   * @param {string} message
+   * @param {any?} locator Optional, can provide details about the location in the source
+   * @constructor
+   */
+  function ParseError$1(message, locator) {
+    this.message = message;
+    this.locator = locator;
+    if (Error.captureStackTrace) Error.captureStackTrace(this, ParseError$1);
+  }
+  ParseError$1.prototype = new Error();
+  ParseError$1.prototype.name = ParseError$1.name;
+  function XMLReader$1() {}
+  XMLReader$1.prototype = {
+    parse: function (source, defaultNSMap, entityMap) {
+      var domBuilder = this.domBuilder;
+      domBuilder.startDocument();
+      _copy(defaultNSMap, defaultNSMap = {});
+      parse$1(source, defaultNSMap, entityMap, domBuilder, this.errorHandler);
+      domBuilder.endDocument();
+    }
+  };
+  function parse$1(source, defaultNSMapCopy, entityMap, domBuilder, errorHandler) {
+    function fixedFromCharCode(code) {
+      // String.prototype.fromCharCode does not supports
+      // > 2 bytes unicode chars directly
+      if (code > 0xffff) {
+        code -= 0x10000;
+        var surrogate1 = 0xd800 + (code >> 10),
+          surrogate2 = 0xdc00 + (code & 0x3ff);
+        return String.fromCharCode(surrogate1, surrogate2);
+      } else {
+        return String.fromCharCode(code);
+      }
+    }
+    function entityReplacer(a) {
+      var k = a.slice(1, -1);
+      if (Object.hasOwnProperty.call(entityMap, k)) {
+        return entityMap[k];
+      } else if (k.charAt(0) === '#') {
+        return fixedFromCharCode(parseInt(k.substr(1).replace('x', '0x')));
+      } else {
+        errorHandler.error('entity not found:' + a);
+        return a;
+      }
+    }
+    function appendText(end) {
+      //has some bugs
+      if (end > start) {
+        var xt = source.substring(start, end).replace(/&#?\w+;/g, entityReplacer);
+        locator && position(start);
+        domBuilder.characters(xt, 0, end - start);
+        start = end;
+      }
+    }
+    function position(p, m) {
+      while (p >= lineEnd && (m = linePattern.exec(source))) {
+        lineStart = m.index;
+        lineEnd = lineStart + m[0].length;
+        locator.lineNumber++;
+        //console.log('line++:',locator,startPos,endPos)
+      }
+
+      locator.columnNumber = p - lineStart + 1;
+    }
+    var lineStart = 0;
+    var lineEnd = 0;
+    var linePattern = /.*(?:\r\n?|\n)|.*$/g;
+    var locator = domBuilder.locator;
+    var parseStack = [{
+      currentNSMap: defaultNSMapCopy
+    }];
+    var closeMap = {};
+    var start = 0;
+    while (true) {
+      try {
+        var tagStart = source.indexOf('<', start);
+        if (tagStart < 0) {
+          if (!source.substr(start).match(/^\s*$/)) {
+            var doc = domBuilder.doc;
+            var text = doc.createTextNode(source.substr(start));
+            doc.appendChild(text);
+            domBuilder.currentElement = text;
+          }
+          return;
+        }
+        if (tagStart > start) {
+          appendText(tagStart);
+        }
+        switch (source.charAt(tagStart + 1)) {
+          case '/':
+            var end = source.indexOf('>', tagStart + 3);
+            var tagName = source.substring(tagStart + 2, end).replace(/[ \t\n\r]+$/g, '');
+            var config = parseStack.pop();
+            if (end < 0) {
+              tagName = source.substring(tagStart + 2).replace(/[\s<].*/, '');
+              errorHandler.error("end tag name: " + tagName + ' is not complete:' + config.tagName);
+              end = tagStart + 1 + tagName.length;
+            } else if (tagName.match(/\s</)) {
+              tagName = tagName.replace(/[\s<].*/, '');
+              errorHandler.error("end tag name: " + tagName + ' maybe not complete');
+              end = tagStart + 1 + tagName.length;
+            }
+            var localNSMap = config.localNSMap;
+            var endMatch = config.tagName == tagName;
+            var endIgnoreCaseMach = endMatch || config.tagName && config.tagName.toLowerCase() == tagName.toLowerCase();
+            if (endIgnoreCaseMach) {
+              domBuilder.endElement(config.uri, config.localName, tagName);
+              if (localNSMap) {
+                for (var prefix in localNSMap) {
+                  if (Object.prototype.hasOwnProperty.call(localNSMap, prefix)) {
+                    domBuilder.endPrefixMapping(prefix);
+                  }
+                }
+              }
+              if (!endMatch) {
+                errorHandler.fatalError("end tag name: " + tagName + ' is not match the current start tagName:' + config.tagName); // No known test case
+              }
+            } else {
+              parseStack.push(config);
+            }
+            end++;
+            break;
+          // end elment
+          case '?':
+            // <?...?>
+            locator && position(tagStart);
+            end = parseInstruction(source, tagStart, domBuilder);
+            break;
+          case '!':
+            // <!doctype,<![CDATA,<!--
+            locator && position(tagStart);
+            end = parseDCC(source, tagStart, domBuilder, errorHandler);
+            break;
+          default:
+            locator && position(tagStart);
+            var el = new ElementAttributes();
+            var currentNSMap = parseStack[parseStack.length - 1].currentNSMap;
+            //elStartEnd
+            var end = parseElementStartPart(source, tagStart, el, currentNSMap, entityReplacer, errorHandler);
+            var len = el.length;
+            if (!el.closed && fixSelfClosed(source, end, el.tagName, closeMap)) {
+              el.closed = true;
+              if (!entityMap.nbsp) {
+                errorHandler.warning('unclosed xml attribute');
+              }
+            }
+            if (locator && len) {
+              var locator2 = copyLocator(locator, {});
+              //try{//attribute position fixed
+              for (var i = 0; i < len; i++) {
+                var a = el[i];
+                position(a.offset);
+                a.locator = copyLocator(locator, {});
+              }
+              domBuilder.locator = locator2;
+              if (appendElement$1(el, domBuilder, currentNSMap)) {
+                parseStack.push(el);
+              }
+              domBuilder.locator = locator;
+            } else {
+              if (appendElement$1(el, domBuilder, currentNSMap)) {
+                parseStack.push(el);
+              }
+            }
+            if (NAMESPACE$1.isHTML(el.uri) && !el.closed) {
+              end = parseHtmlSpecialContent(source, end, el.tagName, entityReplacer, domBuilder);
+            } else {
+              end++;
+            }
+        }
+      } catch (e) {
+        if (e instanceof ParseError$1) {
+          throw e;
+        }
+        errorHandler.error('element parse error: ' + e);
+        end = -1;
+      }
+      if (end > start) {
+        start = end;
+      } else {
+        //TODO: 这里有可能sax回退，有位置错误风险
+        appendText(Math.max(tagStart, start) + 1);
+      }
+    }
+  }
+  function copyLocator(f, t) {
+    t.lineNumber = f.lineNumber;
+    t.columnNumber = f.columnNumber;
+    return t;
+  }
+
+  /**
+   * @see #appendElement(source,elStartEnd,el,selfClosed,entityReplacer,domBuilder,parseStack);
+   * @return end of the elementStartPart(end of elementEndPart for selfClosed el)
+   */
+  function parseElementStartPart(source, start, el, currentNSMap, entityReplacer, errorHandler) {
+    /**
+     * @param {string} qname
+     * @param {string} value
+     * @param {number} startIndex
+     */
+    function addAttribute(qname, value, startIndex) {
+      if (el.attributeNames.hasOwnProperty(qname)) {
+        errorHandler.fatalError('Attribute ' + qname + ' redefined');
+      }
+      el.addValue(qname,
+      // @see https://www.w3.org/TR/xml/#AVNormalize
+      // since the xmldom sax parser does not "interpret" DTD the following is not implemented:
+      // - recursive replacement of (DTD) entity references
+      // - trimming and collapsing multiple spaces into a single one for attributes that are not of type CDATA
+      value.replace(/[\t\n\r]/g, ' ').replace(/&#?\w+;/g, entityReplacer), startIndex);
+    }
+    var attrName;
+    var value;
+    var p = ++start;
+    var s = S_TAG; //status
+    while (true) {
+      var c = source.charAt(p);
+      switch (c) {
+        case '=':
+          if (s === S_ATTR) {
+            //attrName
+            attrName = source.slice(start, p);
+            s = S_EQ;
+          } else if (s === S_ATTR_SPACE) {
+            s = S_EQ;
+          } else {
+            //fatalError: equal must after attrName or space after attrName
+            throw new Error('attribute equal must after attrName'); // No known test case
+          }
+
+          break;
+        case '\'':
+        case '"':
+          if (s === S_EQ || s === S_ATTR //|| s == S_ATTR_SPACE
+          ) {
+            //equal
+            if (s === S_ATTR) {
+              errorHandler.warning('attribute value must after "="');
+              attrName = source.slice(start, p);
+            }
+            start = p + 1;
+            p = source.indexOf(c, start);
+            if (p > 0) {
+              value = source.slice(start, p);
+              addAttribute(attrName, value, start - 1);
+              s = S_ATTR_END;
+            } else {
+              //fatalError: no end quot match
+              throw new Error('attribute value no end \'' + c + '\' match');
+            }
+          } else if (s == S_ATTR_NOQUOT_VALUE) {
+            value = source.slice(start, p);
+            addAttribute(attrName, value, start);
+            errorHandler.warning('attribute "' + attrName + '" missed start quot(' + c + ')!!');
+            start = p + 1;
+            s = S_ATTR_END;
+          } else {
+            //fatalError: no equal before
+            throw new Error('attribute value must after "="'); // No known test case
+          }
+
+          break;
+        case '/':
+          switch (s) {
+            case S_TAG:
+              el.setTagName(source.slice(start, p));
+            case S_ATTR_END:
+            case S_TAG_SPACE:
+            case S_TAG_CLOSE:
+              s = S_TAG_CLOSE;
+              el.closed = true;
+            case S_ATTR_NOQUOT_VALUE:
+            case S_ATTR:
+              break;
+            case S_ATTR_SPACE:
+              el.closed = true;
+              break;
+            //case S_EQ:
+            default:
+              throw new Error("attribute invalid close char('/')");
+            // No known test case
+          }
+
+          break;
+        case '':
+          //end document
+          errorHandler.error('unexpected end of input');
+          if (s == S_TAG) {
+            el.setTagName(source.slice(start, p));
+          }
+          return p;
+        case '>':
+          switch (s) {
+            case S_TAG:
+              el.setTagName(source.slice(start, p));
+            case S_ATTR_END:
+            case S_TAG_SPACE:
+            case S_TAG_CLOSE:
+              break;
+            //normal
+            case S_ATTR_NOQUOT_VALUE: //Compatible state
+            case S_ATTR:
+              value = source.slice(start, p);
+              if (value.slice(-1) === '/') {
+                el.closed = true;
+                value = value.slice(0, -1);
+              }
+            case S_ATTR_SPACE:
+              if (s === S_ATTR_SPACE) {
+                value = attrName;
+              }
+              if (s == S_ATTR_NOQUOT_VALUE) {
+                errorHandler.warning('attribute "' + value + '" missed quot(")!');
+                addAttribute(attrName, value, start);
+              } else {
+                if (!NAMESPACE$1.isHTML(currentNSMap['']) || !value.match(/^(?:disabled|checked|selected)$/i)) {
+                  errorHandler.warning('attribute "' + value + '" missed value!! "' + value + '" instead!!');
+                }
+                addAttribute(value, value, start);
+              }
+              break;
+            case S_EQ:
+              throw new Error('attribute value missed!!');
+          }
+          //			console.log(tagName,tagNamePattern,tagNamePattern.test(tagName))
+          return p;
+        /*xml space '\x20' | #x9 | #xD | #xA; */
+        case '\u0080':
+          c = ' ';
+        default:
+          if (c <= ' ') {
+            //space
+            switch (s) {
+              case S_TAG:
+                el.setTagName(source.slice(start, p)); //tagName
+                s = S_TAG_SPACE;
+                break;
+              case S_ATTR:
+                attrName = source.slice(start, p);
+                s = S_ATTR_SPACE;
+                break;
+              case S_ATTR_NOQUOT_VALUE:
+                var value = source.slice(start, p);
+                errorHandler.warning('attribute "' + value + '" missed quot(")!!');
+                addAttribute(attrName, value, start);
+              case S_ATTR_END:
+                s = S_TAG_SPACE;
+                break;
+              //case S_TAG_SPACE:
+              //case S_EQ:
+              //case S_ATTR_SPACE:
+              //	void();break;
+              //case S_TAG_CLOSE:
+              //ignore warning
+            }
+          } else {
+            //not space
+            //S_TAG,	S_ATTR,	S_EQ,	S_ATTR_NOQUOT_VALUE
+            //S_ATTR_SPACE,	S_ATTR_END,	S_TAG_SPACE, S_TAG_CLOSE
+            switch (s) {
+              //case S_TAG:void();break;
+              //case S_ATTR:void();break;
+              //case S_ATTR_NOQUOT_VALUE:void();break;
+              case S_ATTR_SPACE:
+                el.tagName;
+                if (!NAMESPACE$1.isHTML(currentNSMap['']) || !attrName.match(/^(?:disabled|checked|selected)$/i)) {
+                  errorHandler.warning('attribute "' + attrName + '" missed value!! "' + attrName + '" instead2!!');
+                }
+                addAttribute(attrName, attrName, start);
+                start = p;
+                s = S_ATTR;
+                break;
+              case S_ATTR_END:
+                errorHandler.warning('attribute space is required"' + attrName + '"!!');
+              case S_TAG_SPACE:
+                s = S_ATTR;
+                start = p;
+                break;
+              case S_EQ:
+                s = S_ATTR_NOQUOT_VALUE;
+                start = p;
+                break;
+              case S_TAG_CLOSE:
+                throw new Error("elements closed character '/' and '>' must be connected to");
+            }
+          }
+      } //end outer switch
+      //console.log('p++',p)
+      p++;
+    }
+  }
+  /**
+   * @return true if has new namespace define
+   */
+  function appendElement$1(el, domBuilder, currentNSMap) {
+    var tagName = el.tagName;
+    var localNSMap = null;
+    //var currentNSMap = parseStack[parseStack.length-1].currentNSMap;
+    var i = el.length;
+    while (i--) {
+      var a = el[i];
+      var qName = a.qName;
+      var value = a.value;
+      var nsp = qName.indexOf(':');
+      if (nsp > 0) {
+        var prefix = a.prefix = qName.slice(0, nsp);
+        var localName = qName.slice(nsp + 1);
+        var nsPrefix = prefix === 'xmlns' && localName;
+      } else {
+        localName = qName;
+        prefix = null;
+        nsPrefix = qName === 'xmlns' && '';
+      }
+      //can not set prefix,because prefix !== ''
+      a.localName = localName;
+      //prefix == null for no ns prefix attribute
+      if (nsPrefix !== false) {
+        //hack!!
+        if (localNSMap == null) {
+          localNSMap = {};
+          //console.log(currentNSMap,0)
+          _copy(currentNSMap, currentNSMap = {});
+          //console.log(currentNSMap,1)
+        }
+
+        currentNSMap[nsPrefix] = localNSMap[nsPrefix] = value;
+        a.uri = NAMESPACE$1.XMLNS;
+        domBuilder.startPrefixMapping(nsPrefix, value);
+      }
+    }
+    var i = el.length;
+    while (i--) {
+      a = el[i];
+      var prefix = a.prefix;
+      if (prefix) {
+        //no prefix attribute has no namespace
+        if (prefix === 'xml') {
+          a.uri = NAMESPACE$1.XML;
+        }
+        if (prefix !== 'xmlns') {
+          a.uri = currentNSMap[prefix || ''];
+
+          //{console.log('###'+a.qName,domBuilder.locator.systemId+'',currentNSMap,a.uri)}
+        }
+      }
+    }
+
+    var nsp = tagName.indexOf(':');
+    if (nsp > 0) {
+      prefix = el.prefix = tagName.slice(0, nsp);
+      localName = el.localName = tagName.slice(nsp + 1);
+    } else {
+      prefix = null; //important!!
+      localName = el.localName = tagName;
+    }
+    //no prefix element has default namespace
+    var ns = el.uri = currentNSMap[prefix || ''];
+    domBuilder.startElement(ns, localName, tagName, el);
+    //endPrefixMapping and startPrefixMapping have not any help for dom builder
+    //localNSMap = null
+    if (el.closed) {
+      domBuilder.endElement(ns, localName, tagName);
+      if (localNSMap) {
+        for (prefix in localNSMap) {
+          if (Object.prototype.hasOwnProperty.call(localNSMap, prefix)) {
+            domBuilder.endPrefixMapping(prefix);
+          }
+        }
+      }
+    } else {
+      el.currentNSMap = currentNSMap;
+      el.localNSMap = localNSMap;
+      //parseStack.push(el);
+      return true;
+    }
+  }
+  function parseHtmlSpecialContent(source, elStartEnd, tagName, entityReplacer, domBuilder) {
+    if (/^(?:script|textarea)$/i.test(tagName)) {
+      var elEndStart = source.indexOf('</' + tagName + '>', elStartEnd);
+      var text = source.substring(elStartEnd + 1, elEndStart);
+      if (/[&<]/.test(text)) {
+        if (/^script$/i.test(tagName)) {
+          //if(!/\]\]>/.test(text)){
+          //lexHandler.startCDATA();
+          domBuilder.characters(text, 0, text.length);
+          //lexHandler.endCDATA();
+          return elEndStart;
+          //}
+        } //}else{//text area
+        text = text.replace(/&#?\w+;/g, entityReplacer);
+        domBuilder.characters(text, 0, text.length);
+        return elEndStart;
+        //}
+      }
+    }
+
+    return elStartEnd + 1;
+  }
+  function fixSelfClosed(source, elStartEnd, tagName, closeMap) {
+    //if(tagName in closeMap){
+    var pos = closeMap[tagName];
+    if (pos == null) {
+      //console.log(tagName)
+      pos = source.lastIndexOf('</' + tagName + '>');
+      if (pos < elStartEnd) {
+        //忘记闭合
+        pos = source.lastIndexOf('</' + tagName);
+      }
+      closeMap[tagName] = pos;
+    }
+    return pos < elStartEnd;
+    //}
+  }
+
+  function _copy(source, target) {
+    for (var n in source) {
+      if (Object.prototype.hasOwnProperty.call(source, n)) {
+        target[n] = source[n];
+      }
+    }
+  }
+  function parseDCC(source, start, domBuilder, errorHandler) {
+    //sure start with '<!'
+    var next = source.charAt(start + 2);
+    switch (next) {
+      case '-':
+        if (source.charAt(start + 3) === '-') {
+          var end = source.indexOf('-->', start + 4);
+          //append comment source.substring(4,end)//<!--
+          if (end > start) {
+            domBuilder.comment(source, start + 4, end - start - 4);
+            return end + 3;
+          } else {
+            errorHandler.error("Unclosed comment");
+            return -1;
+          }
+        } else {
+          //error
+          return -1;
+        }
+      default:
+        if (source.substr(start + 3, 6) == 'CDATA[') {
+          var end = source.indexOf(']]>', start + 9);
+          domBuilder.startCDATA();
+          domBuilder.characters(source, start + 9, end - start - 9);
+          domBuilder.endCDATA();
+          return end + 3;
+        }
+        //<!DOCTYPE
+        //startDTD(java.lang.String name, java.lang.String publicId, java.lang.String systemId)
+        var matchs = split(source, start);
+        var len = matchs.length;
+        if (len > 1 && /!doctype/i.test(matchs[0][0])) {
+          var name = matchs[1][0];
+          var pubid = false;
+          var sysid = false;
+          if (len > 3) {
+            if (/^public$/i.test(matchs[2][0])) {
+              pubid = matchs[3][0];
+              sysid = len > 4 && matchs[4][0];
+            } else if (/^system$/i.test(matchs[2][0])) {
+              sysid = matchs[3][0];
+            }
+          }
+          var lastMatch = matchs[len - 1];
+          domBuilder.startDTD(name, pubid, sysid);
+          domBuilder.endDTD();
+          return lastMatch.index + lastMatch[0].length;
+        }
+    }
+    return -1;
+  }
+  function parseInstruction(source, start, domBuilder) {
+    var end = source.indexOf('?>', start);
+    if (end) {
+      var match = source.substring(start, end).match(/^<\?(\S*)\s*([\s\S]*?)\s*$/);
+      if (match) {
+        match[0].length;
+        domBuilder.processingInstruction(match[1], match[2]);
+        return end + 2;
+      } else {
+        //error
+        return -1;
+      }
+    }
+    return -1;
+  }
+  function ElementAttributes() {
+    this.attributeNames = {};
+  }
+  ElementAttributes.prototype = {
+    setTagName: function (tagName) {
+      if (!tagNamePattern.test(tagName)) {
+        throw new Error('invalid tagName:' + tagName);
+      }
+      this.tagName = tagName;
+    },
+    addValue: function (qName, value, offset) {
+      if (!tagNamePattern.test(qName)) {
+        throw new Error('invalid attribute:' + qName);
+      }
+      this.attributeNames[qName] = this.length;
+      this[this.length++] = {
+        qName: qName,
+        value: value,
+        offset: offset
+      };
+    },
+    length: 0,
+    getLocalName: function (i) {
+      return this[i].localName;
+    },
+    getLocator: function (i) {
+      return this[i].locator;
+    },
+    getQName: function (i) {
+      return this[i].qName;
+    },
+    getURI: function (i) {
+      return this[i].uri;
+    },
+    getValue: function (i) {
+      return this[i].value;
+    }
+    //	,getIndex:function(uri, localName)){
+    //		if(localName){
+    //
+    //		}else{
+    //			var qName = uri
+    //		}
+    //	},
+    //	getValue:function(){return this.getValue(this.getIndex.apply(this,arguments))},
+    //	getType:function(uri,localName){}
+    //	getType:function(i){},
+  };
+
+  function split(source, start) {
+    var match;
+    var buf = [];
+    var reg = /'[^']+'|"[^"]+"|[^\s<>\/=]+=?|(\/?\s*>|<)/g;
+    reg.lastIndex = start;
+    reg.exec(source); //skip <
+    while (match = reg.exec(source)) {
+      buf.push(match);
+      if (match[1]) return buf;
+    }
+  }
+  var XMLReader_1 = XMLReader$1;
+  var ParseError_1 = ParseError$1;
+  var sax = {
+    XMLReader: XMLReader_1,
+    ParseError: ParseError_1
+  };
+
+  var DOMImplementation = dom.DOMImplementation;
+  var NAMESPACE = conventions.NAMESPACE;
+  var ParseError = sax.ParseError;
+  var XMLReader = sax.XMLReader;
+
+  /**
+   * Normalizes line ending according to https://www.w3.org/TR/xml11/#sec-line-ends:
+   *
+   * > XML parsed entities are often stored in computer files which,
+   * > for editing convenience, are organized into lines.
+   * > These lines are typically separated by some combination
+   * > of the characters CARRIAGE RETURN (#xD) and LINE FEED (#xA).
+   * >
+   * > To simplify the tasks of applications, the XML processor must behave
+   * > as if it normalized all line breaks in external parsed entities (including the document entity)
+   * > on input, before parsing, by translating all of the following to a single #xA character:
+   * >
+   * > 1. the two-character sequence #xD #xA
+   * > 2. the two-character sequence #xD #x85
+   * > 3. the single character #x85
+   * > 4. the single character #x2028
+   * > 5. any #xD character that is not immediately followed by #xA or #x85.
+   *
+   * @param {string} input
+   * @returns {string}
+   */
+  function normalizeLineEndings(input) {
+    return input.replace(/\r[\n\u0085]/g, '\n').replace(/[\r\u0085\u2028]/g, '\n');
+  }
+
+  /**
+   * @typedef Locator
+   * @property {number} [columnNumber]
+   * @property {number} [lineNumber]
+   */
+
+  /**
+   * @typedef DOMParserOptions
+   * @property {DOMHandler} [domBuilder]
+   * @property {Function} [errorHandler]
+   * @property {(string) => string} [normalizeLineEndings] used to replace line endings before parsing
+   * 						defaults to `normalizeLineEndings`
+   * @property {Locator} [locator]
+   * @property {Record<string, string>} [xmlns]
+   *
+   * @see normalizeLineEndings
+   */
+
+  /**
+   * The DOMParser interface provides the ability to parse XML or HTML source code
+   * from a string into a DOM `Document`.
+   *
+   * _xmldom is different from the spec in that it allows an `options` parameter,
+   * to override the default behavior._
+   *
+   * @param {DOMParserOptions} [options]
+   * @constructor
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
+   * @see https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#dom-parsing-and-serialization
+   */
+  function DOMParser$1(options) {
+    this.options = options || {
+      locator: {}
+    };
+  }
+  DOMParser$1.prototype.parseFromString = function (source, mimeType) {
+    var options = this.options;
+    var sax = new XMLReader();
+    var domBuilder = options.domBuilder || new DOMHandler(); //contentHandler and LexicalHandler
+    var errorHandler = options.errorHandler;
+    var locator = options.locator;
+    var defaultNSMap = options.xmlns || {};
+    var isHTML = /\/x?html?$/.test(mimeType); //mimeType.toLowerCase().indexOf('html') > -1;
+    var entityMap = isHTML ? entities.HTML_ENTITIES : entities.XML_ENTITIES;
+    if (locator) {
+      domBuilder.setDocumentLocator(locator);
+    }
+    sax.errorHandler = buildErrorHandler(errorHandler, domBuilder, locator);
+    sax.domBuilder = options.domBuilder || domBuilder;
+    if (isHTML) {
+      defaultNSMap[''] = NAMESPACE.HTML;
+    }
+    defaultNSMap.xml = defaultNSMap.xml || NAMESPACE.XML;
+    var normalize = options.normalizeLineEndings || normalizeLineEndings;
+    if (source && typeof source === 'string') {
+      sax.parse(normalize(source), defaultNSMap, entityMap);
+    } else {
+      sax.errorHandler.error('invalid doc source');
+    }
+    return domBuilder.doc;
+  };
+  function buildErrorHandler(errorImpl, domBuilder, locator) {
+    if (!errorImpl) {
+      if (domBuilder instanceof DOMHandler) {
+        return domBuilder;
+      }
+      errorImpl = domBuilder;
+    }
+    var errorHandler = {};
+    var isCallback = errorImpl instanceof Function;
+    locator = locator || {};
+    function build(key) {
+      var fn = errorImpl[key];
+      if (!fn && isCallback) {
+        fn = errorImpl.length == 2 ? function (msg) {
+          errorImpl(key, msg);
+        } : errorImpl;
+      }
+      errorHandler[key] = fn && function (msg) {
+        fn('[xmldom ' + key + ']\t' + msg + _locator(locator));
+      } || function () {};
+    }
+    build('warning');
+    build('error');
+    build('fatalError');
+    return errorHandler;
+  }
+
+  //console.log('#\n\n\n\n\n\n\n####')
+  /**
+   * +ContentHandler+ErrorHandler
+   * +LexicalHandler+EntityResolver2
+   * -DeclHandler-DTDHandler
+   *
+   * DefaultHandler:EntityResolver, DTDHandler, ContentHandler, ErrorHandler
+   * DefaultHandler2:DefaultHandler,LexicalHandler, DeclHandler, EntityResolver2
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/helpers/DefaultHandler.html
+   */
+  function DOMHandler() {
+    this.cdata = false;
+  }
+  function position(locator, node) {
+    node.lineNumber = locator.lineNumber;
+    node.columnNumber = locator.columnNumber;
+  }
+  /**
+   * @see org.xml.sax.ContentHandler#startDocument
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/ContentHandler.html
+   */
+  DOMHandler.prototype = {
+    startDocument: function () {
+      this.doc = new DOMImplementation().createDocument(null, null, null);
+      if (this.locator) {
+        this.doc.documentURI = this.locator.systemId;
+      }
+    },
+    startElement: function (namespaceURI, localName, qName, attrs) {
+      var doc = this.doc;
+      var el = doc.createElementNS(namespaceURI, qName || localName);
+      var len = attrs.length;
+      appendElement(this, el);
+      this.currentElement = el;
+      this.locator && position(this.locator, el);
+      for (var i = 0; i < len; i++) {
+        var namespaceURI = attrs.getURI(i);
+        var value = attrs.getValue(i);
+        var qName = attrs.getQName(i);
+        var attr = doc.createAttributeNS(namespaceURI, qName);
+        this.locator && position(attrs.getLocator(i), attr);
+        attr.value = attr.nodeValue = value;
+        el.setAttributeNode(attr);
+      }
+    },
+    endElement: function (namespaceURI, localName, qName) {
+      var current = this.currentElement;
+      current.tagName;
+      this.currentElement = current.parentNode;
+    },
+    startPrefixMapping: function (prefix, uri) {},
+    endPrefixMapping: function (prefix) {},
+    processingInstruction: function (target, data) {
+      var ins = this.doc.createProcessingInstruction(target, data);
+      this.locator && position(this.locator, ins);
+      appendElement(this, ins);
+    },
+    ignorableWhitespace: function (ch, start, length) {},
+    characters: function (chars, start, length) {
+      chars = _toString.apply(this, arguments);
+      //console.log(chars)
+      if (chars) {
+        if (this.cdata) {
+          var charNode = this.doc.createCDATASection(chars);
+        } else {
+          var charNode = this.doc.createTextNode(chars);
+        }
+        if (this.currentElement) {
+          this.currentElement.appendChild(charNode);
+        } else if (/^\s*$/.test(chars)) {
+          this.doc.appendChild(charNode);
+          //process xml
+        }
+
+        this.locator && position(this.locator, charNode);
+      }
+    },
+    skippedEntity: function (name) {},
+    endDocument: function () {
+      this.doc.normalize();
+    },
+    setDocumentLocator: function (locator) {
+      if (this.locator = locator) {
+        // && !('lineNumber' in locator)){
+        locator.lineNumber = 0;
+      }
+    },
+    //LexicalHandler
+    comment: function (chars, start, length) {
+      chars = _toString.apply(this, arguments);
+      var comm = this.doc.createComment(chars);
+      this.locator && position(this.locator, comm);
+      appendElement(this, comm);
+    },
+    startCDATA: function () {
+      //used in characters() methods
+      this.cdata = true;
+    },
+    endCDATA: function () {
+      this.cdata = false;
+    },
+    startDTD: function (name, publicId, systemId) {
+      var impl = this.doc.implementation;
+      if (impl && impl.createDocumentType) {
+        var dt = impl.createDocumentType(name, publicId, systemId);
+        this.locator && position(this.locator, dt);
+        appendElement(this, dt);
+        this.doc.doctype = dt;
+      }
+    },
+    /**
+     * @see org.xml.sax.ErrorHandler
+     * @link http://www.saxproject.org/apidoc/org/xml/sax/ErrorHandler.html
+     */
+    warning: function (error) {
+      console.warn('[xmldom warning]\t' + error, _locator(this.locator));
+    },
+    error: function (error) {
+      console.error('[xmldom error]\t' + error, _locator(this.locator));
+    },
+    fatalError: function (error) {
+      throw new ParseError(error, this.locator);
+    }
+  };
+  function _locator(l) {
+    if (l) {
+      return '\n@' + (l.systemId || '') + '#[line:' + l.lineNumber + ',col:' + l.columnNumber + ']';
+    }
+  }
+  function _toString(chars, start, length) {
+    if (typeof chars == 'string') {
+      return chars.substr(start, length);
+    } else {
+      //java sax connect width xmldom on rhino(what about: "? && !(chars instanceof String)")
+      if (chars.length >= start + length || start) {
+        return new java.lang.String(chars, start, length) + '';
+      }
+      return chars;
+    }
+  }
+
+  /*
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/ext/LexicalHandler.html
+   * used method of org.xml.sax.ext.LexicalHandler:
+   *  #comment(chars, start, length)
+   *  #startCDATA()
+   *  #endCDATA()
+   *  #startDTD(name, publicId, systemId)
+   *
+   *
+   * IGNORED method of org.xml.sax.ext.LexicalHandler:
+   *  #endDTD()
+   *  #startEntity(name)
+   *  #endEntity(name)
+   *
+   *
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/ext/DeclHandler.html
+   * IGNORED method of org.xml.sax.ext.DeclHandler
+   * 	#attributeDecl(eName, aName, type, mode, value)
+   *  #elementDecl(name, model)
+   *  #externalEntityDecl(name, publicId, systemId)
+   *  #internalEntityDecl(name, value)
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/ext/EntityResolver2.html
+   * IGNORED method of org.xml.sax.EntityResolver2
+   *  #resolveEntity(String name,String publicId,String baseURI,String systemId)
+   *  #resolveEntity(publicId, systemId)
+   *  #getExternalSubset(name, baseURI)
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/DTDHandler.html
+   * IGNORED method of org.xml.sax.DTDHandler
+   *  #notationDecl(name, publicId, systemId) {};
+   *  #unparsedEntityDecl(name, publicId, systemId, notationName) {};
+   */
+  "endDTD,startEntity,endEntity,attributeDecl,elementDecl,externalEntityDecl,internalEntityDecl,resolveEntity,getExternalSubset,notationDecl,unparsedEntityDecl".replace(/\w+/g, function (key) {
+    DOMHandler.prototype[key] = function () {
+      return null;
+    };
+  });
+
+  /* Private static helpers treated below as private instance methods, so don't need to add these to the public API; we might use a Relator to also get rid of non-standard public properties */
+  function appendElement(hander, node) {
+    if (!hander.currentElement) {
+      hander.doc.appendChild(node);
+    } else {
+      hander.currentElement.appendChild(node);
+    }
+  } //appendChild and setAttributeNS are preformance key
+
+  var __DOMHandler = DOMHandler;
+  var normalizeLineEndings_1 = normalizeLineEndings;
+  var DOMParser_1 = DOMParser$1;
+  var domParser = {
+    __DOMHandler: __DOMHandler,
+    normalizeLineEndings: normalizeLineEndings_1,
+    DOMParser: DOMParser_1
+  };
+
+  var DOMParser = domParser.DOMParser;
+
+  /*! @name mpd-parser @version 1.3.0 @license Apache-2.0 */
+  const isObject = obj => {
+    return !!obj && typeof obj === 'object';
+  };
+  const merge$1 = (...objects) => {
+    return objects.reduce((result, source) => {
+      if (typeof source !== 'object') {
+        return result;
+      }
+      Object.keys(source).forEach(key => {
+        if (Array.isArray(result[key]) && Array.isArray(source[key])) {
+          result[key] = result[key].concat(source[key]);
+        } else if (isObject(result[key]) && isObject(source[key])) {
+          result[key] = merge$1(result[key], source[key]);
+        } else {
+          result[key] = source[key];
+        }
+      });
+      return result;
+    }, {});
+  };
+  const values = o => Object.keys(o).map(k => o[k]);
+  const range = (start, end) => {
+    const result = [];
+    for (let i = start; i < end; i++) {
+      result.push(i);
+    }
+    return result;
+  };
+  const flatten = lists => lists.reduce((x, y) => x.concat(y), []);
+  const from = list => {
+    if (!list.length) {
+      return [];
+    }
+    const result = [];
+    for (let i = 0; i < list.length; i++) {
+      result.push(list[i]);
+    }
+    return result;
+  };
+  const findIndexes = (l, key) => l.reduce((a, e, i) => {
+    if (e[key]) {
+      a.push(i);
+    }
+    return a;
+  }, []);
+  /**
+   * Returns a union of the included lists provided each element can be identified by a key.
+   *
+   * @param {Array} list - list of lists to get the union of
+   * @param {Function} keyFunction - the function to use as a key for each element
+   *
+   * @return {Array} the union of the arrays
+   */
+
+  const union = (lists, keyFunction) => {
+    return values(lists.reduce((acc, list) => {
+      list.forEach(el => {
+        acc[keyFunction(el)] = el;
+      });
+      return acc;
+    }, {}));
+  };
+  var errors = {
+    INVALID_NUMBER_OF_PERIOD: 'INVALID_NUMBER_OF_PERIOD',
+    INVALID_NUMBER_OF_CONTENT_STEERING: 'INVALID_NUMBER_OF_CONTENT_STEERING',
+    DASH_EMPTY_MANIFEST: 'DASH_EMPTY_MANIFEST',
+    DASH_INVALID_XML: 'DASH_INVALID_XML',
+    NO_BASE_URL: 'NO_BASE_URL',
+    MISSING_SEGMENT_INFORMATION: 'MISSING_SEGMENT_INFORMATION',
+    SEGMENT_TIME_UNSPECIFIED: 'SEGMENT_TIME_UNSPECIFIED',
+    UNSUPPORTED_UTC_TIMING_SCHEME: 'UNSUPPORTED_UTC_TIMING_SCHEME'
+  };
+
+  /**
+   * @typedef {Object} SingleUri
+   * @property {string} uri - relative location of segment
+   * @property {string} resolvedUri - resolved location of segment
+   * @property {Object} byterange - Object containing information on how to make byte range
+   *   requests following byte-range-spec per RFC2616.
+   * @property {String} byterange.length - length of range request
+   * @property {String} byterange.offset - byte offset of range request
+   *
+   * @see https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.35.1
+   */
+
+  /**
+   * Converts a URLType node (5.3.9.2.3 Table 13) to a segment object
+   * that conforms to how m3u8-parser is structured
+   *
+   * @see https://github.com/videojs/m3u8-parser
+   *
+   * @param {string} baseUrl - baseUrl provided by <BaseUrl> nodes
+   * @param {string} source - source url for segment
+   * @param {string} range - optional range used for range calls,
+   *   follows  RFC 2616, Clause 14.35.1
+   * @return {SingleUri} full segment information transformed into a format similar
+   *   to m3u8-parser
+   */
+
+  const urlTypeToSegment = ({
+    baseUrl = '',
+    source = '',
+    range = '',
+    indexRange = ''
+  }) => {
+    const segment = {
+      uri: source,
+      resolvedUri: resolveUrl$1(baseUrl || '', source)
+    };
+    if (range || indexRange) {
+      const rangeStr = range ? range : indexRange;
+      const ranges = rangeStr.split('-'); // default to parsing this as a BigInt if possible
+
+      let startRange = window.BigInt ? window.BigInt(ranges[0]) : parseInt(ranges[0], 10);
+      let endRange = window.BigInt ? window.BigInt(ranges[1]) : parseInt(ranges[1], 10); // convert back to a number if less than MAX_SAFE_INTEGER
+
+      if (startRange < Number.MAX_SAFE_INTEGER && typeof startRange === 'bigint') {
+        startRange = Number(startRange);
+      }
+      if (endRange < Number.MAX_SAFE_INTEGER && typeof endRange === 'bigint') {
+        endRange = Number(endRange);
+      }
+      let length;
+      if (typeof endRange === 'bigint' || typeof startRange === 'bigint') {
+        length = window.BigInt(endRange) - window.BigInt(startRange) + window.BigInt(1);
+      } else {
+        length = endRange - startRange + 1;
+      }
+      if (typeof length === 'bigint' && length < Number.MAX_SAFE_INTEGER) {
+        length = Number(length);
+      } // byterange should be inclusive according to
+      // RFC 2616, Clause 14.35.1
+
+      segment.byterange = {
+        length,
+        offset: startRange
+      };
+    }
+    return segment;
+  };
+  const byteRangeToString = byterange => {
+    // `endRange` is one less than `offset + length` because the HTTP range
+    // header uses inclusive ranges
+    let endRange;
+    if (typeof byterange.offset === 'bigint' || typeof byterange.length === 'bigint') {
+      endRange = window.BigInt(byterange.offset) + window.BigInt(byterange.length) - window.BigInt(1);
+    } else {
+      endRange = byterange.offset + byterange.length - 1;
+    }
+    return `${byterange.offset}-${endRange}`;
+  };
+
+  /**
+   * parse the end number attribue that can be a string
+   * number, or undefined.
+   *
+   * @param {string|number|undefined} endNumber
+   *        The end number attribute.
+   *
+   * @return {number|null}
+   *          The result of parsing the end number.
+   */
+
+  const parseEndNumber = endNumber => {
+    if (endNumber && typeof endNumber !== 'number') {
+      endNumber = parseInt(endNumber, 10);
+    }
+    if (isNaN(endNumber)) {
+      return null;
+    }
+    return endNumber;
+  };
+  /**
+   * Functions for calculating the range of available segments in static and dynamic
+   * manifests.
+   */
+
+  const segmentRange = {
+    /**
+     * Returns the entire range of available segments for a static MPD
+     *
+     * @param {Object} attributes
+     *        Inheritied MPD attributes
+     * @return {{ start: number, end: number }}
+     *         The start and end numbers for available segments
+     */
+    static(attributes) {
+      const {
+        duration,
+        timescale = 1,
+        sourceDuration,
+        periodDuration
+      } = attributes;
+      const endNumber = parseEndNumber(attributes.endNumber);
+      const segmentDuration = duration / timescale;
+      if (typeof endNumber === 'number') {
+        return {
+          start: 0,
+          end: endNumber
+        };
+      }
+      if (typeof periodDuration === 'number') {
+        return {
+          start: 0,
+          end: periodDuration / segmentDuration
+        };
+      }
+      return {
+        start: 0,
+        end: sourceDuration / segmentDuration
+      };
+    },
+    /**
+     * Returns the current live window range of available segments for a dynamic MPD
+     *
+     * @param {Object} attributes
+     *        Inheritied MPD attributes
+     * @return {{ start: number, end: number }}
+     *         The start and end numbers for available segments
+     */
+    dynamic(attributes) {
+      const {
+        NOW,
+        clientOffset,
+        availabilityStartTime,
+        timescale = 1,
+        duration,
+        periodStart = 0,
+        minimumUpdatePeriod = 0,
+        timeShiftBufferDepth = Infinity
+      } = attributes;
+      const endNumber = parseEndNumber(attributes.endNumber); // clientOffset is passed in at the top level of mpd-parser and is an offset calculated
+      // after retrieving UTC server time.
+
+      const now = (NOW + clientOffset) / 1000; // WC stands for Wall Clock.
+      // Convert the period start time to EPOCH.
+
+      const periodStartWC = availabilityStartTime + periodStart; // Period end in EPOCH is manifest's retrieval time + time until next update.
+
+      const periodEndWC = now + minimumUpdatePeriod;
+      const periodDuration = periodEndWC - periodStartWC;
+      const segmentCount = Math.ceil(periodDuration * timescale / duration);
+      const availableStart = Math.floor((now - periodStartWC - timeShiftBufferDepth) * timescale / duration);
+      const availableEnd = Math.floor((now - periodStartWC) * timescale / duration);
+      return {
+        start: Math.max(0, availableStart),
+        end: typeof endNumber === 'number' ? endNumber : Math.min(segmentCount, availableEnd)
+      };
+    }
+  };
+  /**
+   * Maps a range of numbers to objects with information needed to build the corresponding
+   * segment list
+   *
+   * @name toSegmentsCallback
+   * @function
+   * @param {number} number
+   *        Number of the segment
+   * @param {number} index
+   *        Index of the number in the range list
+   * @return {{ number: Number, duration: Number, timeline: Number, time: Number }}
+   *         Object with segment timing and duration info
+   */
+
+  /**
+   * Returns a callback for Array.prototype.map for mapping a range of numbers to
+   * information needed to build the segment list.
+   *
+   * @param {Object} attributes
+   *        Inherited MPD attributes
+   * @return {toSegmentsCallback}
+   *         Callback map function
+   */
+
+  const toSegments = attributes => number => {
+    const {
+      duration,
+      timescale = 1,
+      periodStart,
+      startNumber = 1
+    } = attributes;
+    return {
+      number: startNumber + number,
+      duration: duration / timescale,
+      timeline: periodStart,
+      time: number * duration
+    };
+  };
+  /**
+   * Returns a list of objects containing segment timing and duration info used for
+   * building the list of segments. This uses the @duration attribute specified
+   * in the MPD manifest to derive the range of segments.
+   *
+   * @param {Object} attributes
+   *        Inherited MPD attributes
+   * @return {{number: number, duration: number, time: number, timeline: number}[]}
+   *         List of Objects with segment timing and duration info
+   */
+
+  const parseByDuration = attributes => {
+    const {
+      type,
+      duration,
+      timescale = 1,
+      periodDuration,
+      sourceDuration
+    } = attributes;
+    const {
+      start,
+      end
+    } = segmentRange[type](attributes);
+    const segments = range(start, end).map(toSegments(attributes));
+    if (type === 'static') {
+      const index = segments.length - 1; // section is either a period or the full source
+
+      const sectionDuration = typeof periodDuration === 'number' ? periodDuration : sourceDuration; // final segment may be less than full segment duration
+
+      segments[index].duration = sectionDuration - duration / timescale * index;
+    }
+    return segments;
+  };
+
+  /**
+   * Translates SegmentBase into a set of segments.
+   * (DASH SPEC Section 5.3.9.3.2) contains a set of <SegmentURL> nodes.  Each
+   * node should be translated into segment.
+   *
+   * @param {Object} attributes
+   *   Object containing all inherited attributes from parent elements with attribute
+   *   names as keys
+   * @return {Object.<Array>} list of segments
+   */
+
+  const segmentsFromBase = attributes => {
+    const {
+      baseUrl,
+      initialization = {},
+      sourceDuration,
+      indexRange = '',
+      periodStart,
+      presentationTime,
+      number = 0,
+      duration
+    } = attributes; // base url is required for SegmentBase to work, per spec (Section 5.3.9.2.1)
+
+    if (!baseUrl) {
+      throw new Error(errors.NO_BASE_URL);
+    }
+    const initSegment = urlTypeToSegment({
+      baseUrl,
+      source: initialization.sourceURL,
+      range: initialization.range
+    });
+    const segment = urlTypeToSegment({
+      baseUrl,
+      source: baseUrl,
+      indexRange
+    });
+    segment.map = initSegment; // If there is a duration, use it, otherwise use the given duration of the source
+    // (since SegmentBase is only for one total segment)
+
+    if (duration) {
+      const segmentTimeInfo = parseByDuration(attributes);
+      if (segmentTimeInfo.length) {
+        segment.duration = segmentTimeInfo[0].duration;
+        segment.timeline = segmentTimeInfo[0].timeline;
+      }
+    } else if (sourceDuration) {
+      segment.duration = sourceDuration;
+      segment.timeline = periodStart;
+    } // If presentation time is provided, these segments are being generated by SIDX
+    // references, and should use the time provided. For the general case of SegmentBase,
+    // there should only be one segment in the period, so its presentation time is the same
+    // as its period start.
+
+    segment.presentationTime = presentationTime || periodStart;
+    segment.number = number;
+    return [segment];
+  };
+  /**
+   * Given a playlist, a sidx box, and a baseUrl, update the segment list of the playlist
+   * according to the sidx information given.
+   *
+   * playlist.sidx has metadadata about the sidx where-as the sidx param
+   * is the parsed sidx box itself.
+   *
+   * @param {Object} playlist the playlist to update the sidx information for
+   * @param {Object} sidx the parsed sidx box
+   * @return {Object} the playlist object with the updated sidx information
+   */
+
+  const addSidxSegmentsToPlaylist$1 = (playlist, sidx, baseUrl) => {
+    // Retain init segment information
+    const initSegment = playlist.sidx.map ? playlist.sidx.map : null; // Retain source duration from initial main manifest parsing
+
+    const sourceDuration = playlist.sidx.duration; // Retain source timeline
+
+    const timeline = playlist.timeline || 0;
+    const sidxByteRange = playlist.sidx.byterange;
+    const sidxEnd = sidxByteRange.offset + sidxByteRange.length; // Retain timescale of the parsed sidx
+
+    const timescale = sidx.timescale; // referenceType 1 refers to other sidx boxes
+
+    const mediaReferences = sidx.references.filter(r => r.referenceType !== 1);
+    const segments = [];
+    const type = playlist.endList ? 'static' : 'dynamic';
+    const periodStart = playlist.sidx.timeline;
+    let presentationTime = periodStart;
+    let number = playlist.mediaSequence || 0; // firstOffset is the offset from the end of the sidx box
+
+    let startIndex; // eslint-disable-next-line
+
+    if (typeof sidx.firstOffset === 'bigint') {
+      startIndex = window.BigInt(sidxEnd) + sidx.firstOffset;
+    } else {
+      startIndex = sidxEnd + sidx.firstOffset;
+    }
+    for (let i = 0; i < mediaReferences.length; i++) {
+      const reference = sidx.references[i]; // size of the referenced (sub)segment
+
+      const size = reference.referencedSize; // duration of the referenced (sub)segment, in  the  timescale
+      // this will be converted to seconds when generating segments
+
+      const duration = reference.subsegmentDuration; // should be an inclusive range
+
+      let endIndex; // eslint-disable-next-line
+
+      if (typeof startIndex === 'bigint') {
+        endIndex = startIndex + window.BigInt(size) - window.BigInt(1);
+      } else {
+        endIndex = startIndex + size - 1;
+      }
+      const indexRange = `${startIndex}-${endIndex}`;
+      const attributes = {
+        baseUrl,
+        timescale,
+        timeline,
+        periodStart,
+        presentationTime,
+        number,
+        duration,
+        sourceDuration,
+        indexRange,
+        type
+      };
+      const segment = segmentsFromBase(attributes)[0];
+      if (initSegment) {
+        segment.map = initSegment;
+      }
+      segments.push(segment);
+      if (typeof startIndex === 'bigint') {
+        startIndex += window.BigInt(size);
+      } else {
+        startIndex += size;
+      }
+      presentationTime += duration / timescale;
+      number++;
+    }
+    playlist.segments = segments;
+    return playlist;
+  };
+  const SUPPORTED_MEDIA_TYPES = ['AUDIO', 'SUBTITLES']; // allow one 60fps frame as leniency (arbitrarily chosen)
+
+  const TIME_FUDGE = 1 / 60;
+  /**
+   * Given a list of timelineStarts, combines, dedupes, and sorts them.
+   *
+   * @param {TimelineStart[]} timelineStarts - list of timeline starts
+   *
+   * @return {TimelineStart[]} the combined and deduped timeline starts
+   */
+
+  const getUniqueTimelineStarts = timelineStarts => {
+    return union(timelineStarts, ({
+      timeline
+    }) => timeline).sort((a, b) => a.timeline > b.timeline ? 1 : -1);
+  };
+  /**
+   * Finds the playlist with the matching NAME attribute.
+   *
+   * @param {Array} playlists - playlists to search through
+   * @param {string} name - the NAME attribute to search for
+   *
+   * @return {Object|null} the matching playlist object, or null
+   */
+
+  const findPlaylistWithName = (playlists, name) => {
+    for (let i = 0; i < playlists.length; i++) {
+      if (playlists[i].attributes.NAME === name) {
+        return playlists[i];
+      }
+    }
+    return null;
+  };
+  /**
+   * Gets a flattened array of media group playlists.
+   *
+   * @param {Object} manifest - the main manifest object
+   *
+   * @return {Array} the media group playlists
+   */
+
+  const getMediaGroupPlaylists = manifest => {
+    let mediaGroupPlaylists = [];
+    forEachMediaGroup$1(manifest, SUPPORTED_MEDIA_TYPES, (properties, type, group, label) => {
+      mediaGroupPlaylists = mediaGroupPlaylists.concat(properties.playlists || []);
+    });
+    return mediaGroupPlaylists;
+  };
+  /**
+   * Updates the playlist's media sequence numbers.
+   *
+   * @param {Object} config - options object
+   * @param {Object} config.playlist - the playlist to update
+   * @param {number} config.mediaSequence - the mediaSequence number to start with
+   */
+
+  const updateMediaSequenceForPlaylist = ({
+    playlist,
+    mediaSequence
+  }) => {
+    playlist.mediaSequence = mediaSequence;
+    playlist.segments.forEach((segment, index) => {
+      segment.number = playlist.mediaSequence + index;
+    });
+  };
+  /**
+   * Updates the media and discontinuity sequence numbers of newPlaylists given oldPlaylists
+   * and a complete list of timeline starts.
+   *
+   * If no matching playlist is found, only the discontinuity sequence number of the playlist
+   * will be updated.
+   *
+   * Since early available timelines are not supported, at least one segment must be present.
+   *
+   * @param {Object} config - options object
+   * @param {Object[]} oldPlaylists - the old playlists to use as a reference
+   * @param {Object[]} newPlaylists - the new playlists to update
+   * @param {Object} timelineStarts - all timelineStarts seen in the stream to this point
+   */
+
+  const updateSequenceNumbers = ({
+    oldPlaylists,
+    newPlaylists,
+    timelineStarts
+  }) => {
+    newPlaylists.forEach(playlist => {
+      playlist.discontinuitySequence = timelineStarts.findIndex(function ({
+        timeline
+      }) {
+        return timeline === playlist.timeline;
+      }); // Playlists NAMEs come from DASH Representation IDs, which are mandatory
+      // (see ISO_23009-1-2012 5.3.5.2).
+      //
+      // If the same Representation existed in a prior Period, it will retain the same NAME.
+
+      const oldPlaylist = findPlaylistWithName(oldPlaylists, playlist.attributes.NAME);
+      if (!oldPlaylist) {
+        // Since this is a new playlist, the media sequence values can start from 0 without
+        // consequence.
+        return;
+      } // TODO better support for live SIDX
+      //
+      // As of this writing, mpd-parser does not support multiperiod SIDX (in live or VOD).
+      // This is evident by a playlist only having a single SIDX reference. In a multiperiod
+      // playlist there would need to be multiple SIDX references. In addition, live SIDX is
+      // not supported when the SIDX properties change on refreshes.
+      //
+      // In the future, if support needs to be added, the merging logic here can be called
+      // after SIDX references are resolved. For now, exit early to prevent exceptions being
+      // thrown due to undefined references.
+
+      if (playlist.sidx) {
+        return;
+      } // Since we don't yet support early available timelines, we don't need to support
+      // playlists with no segments.
+
+      const firstNewSegment = playlist.segments[0];
+      const oldMatchingSegmentIndex = oldPlaylist.segments.findIndex(function (oldSegment) {
+        return Math.abs(oldSegment.presentationTime - firstNewSegment.presentationTime) < TIME_FUDGE;
+      }); // No matching segment from the old playlist means the entire playlist was refreshed.
+      // In this case the media sequence should account for this update, and the new segments
+      // should be marked as discontinuous from the prior content, since the last prior
+      // timeline was removed.
+
+      if (oldMatchingSegmentIndex === -1) {
+        updateMediaSequenceForPlaylist({
+          playlist,
+          mediaSequence: oldPlaylist.mediaSequence + oldPlaylist.segments.length
+        });
+        playlist.segments[0].discontinuity = true;
+        playlist.discontinuityStarts.unshift(0); // No matching segment does not necessarily mean there's missing content.
+        //
+        // If the new playlist's timeline is the same as the last seen segment's timeline,
+        // then a discontinuity can be added to identify that there's potentially missing
+        // content. If there's no missing content, the discontinuity should still be rather
+        // harmless. It's possible that if segment durations are accurate enough, that the
+        // existence of a gap can be determined using the presentation times and durations,
+        // but if the segment timing info is off, it may introduce more problems than simply
+        // adding the discontinuity.
+        //
+        // If the new playlist's timeline is different from the last seen segment's timeline,
+        // then a discontinuity can be added to identify that this is the first seen segment
+        // of a new timeline. However, the logic at the start of this function that
+        // determined the disconinuity sequence by timeline index is now off by one (the
+        // discontinuity of the newest timeline hasn't yet fallen off the manifest...since
+        // we added it), so the disconinuity sequence must be decremented.
+        //
+        // A period may also have a duration of zero, so the case of no segments is handled
+        // here even though we don't yet support early available periods.
+
+        if (!oldPlaylist.segments.length && playlist.timeline > oldPlaylist.timeline || oldPlaylist.segments.length && playlist.timeline > oldPlaylist.segments[oldPlaylist.segments.length - 1].timeline) {
+          playlist.discontinuitySequence--;
+        }
+        return;
+      } // If the first segment matched with a prior segment on a discontinuity (it's matching
+      // on the first segment of a period), then the discontinuitySequence shouldn't be the
+      // timeline's matching one, but instead should be the one prior, and the first segment
+      // of the new manifest should be marked with a discontinuity.
+      //
+      // The reason for this special case is that discontinuity sequence shows how many
+      // discontinuities have fallen off of the playlist, and discontinuities are marked on
+      // the first segment of a new "timeline." Because of this, while DASH will retain that
+      // Period while the "timeline" exists, HLS keeps track of it via the discontinuity
+      // sequence, and that first segment is an indicator, but can be removed before that
+      // timeline is gone.
+
+      const oldMatchingSegment = oldPlaylist.segments[oldMatchingSegmentIndex];
+      if (oldMatchingSegment.discontinuity && !firstNewSegment.discontinuity) {
+        firstNewSegment.discontinuity = true;
+        playlist.discontinuityStarts.unshift(0);
+        playlist.discontinuitySequence--;
+      }
+      updateMediaSequenceForPlaylist({
+        playlist,
+        mediaSequence: oldPlaylist.segments[oldMatchingSegmentIndex].number
+      });
+    });
+  };
+  /**
+   * Given an old parsed manifest object and a new parsed manifest object, updates the
+   * sequence and timing values within the new manifest to ensure that it lines up with the
+   * old.
+   *
+   * @param {Array} oldManifest - the old main manifest object
+   * @param {Array} newManifest - the new main manifest object
+   *
+   * @return {Object} the updated new manifest object
+   */
+
+  const positionManifestOnTimeline = ({
+    oldManifest,
+    newManifest
+  }) => {
+    // Starting from v4.1.2 of the IOP, section 4.4.3.3 states:
+    //
+    // "MPD@availabilityStartTime and Period@start shall not be changed over MPD updates."
+    //
+    // This was added from https://github.com/Dash-Industry-Forum/DASH-IF-IOP/issues/160
+    //
+    // Because of this change, and the difficulty of supporting periods with changing start
+    // times, periods with changing start times are not supported. This makes the logic much
+    // simpler, since periods with the same start time can be considerred the same period
+    // across refreshes.
+    //
+    // To give an example as to the difficulty of handling periods where the start time may
+    // change, if a single period manifest is refreshed with another manifest with a single
+    // period, and both the start and end times are increased, then the only way to determine
+    // if it's a new period or an old one that has changed is to look through the segments of
+    // each playlist and determine the presentation time bounds to find a match. In addition,
+    // if the period start changed to exceed the old period end, then there would be no
+    // match, and it would not be possible to determine whether the refreshed period is a new
+    // one or the old one.
+    const oldPlaylists = oldManifest.playlists.concat(getMediaGroupPlaylists(oldManifest));
+    const newPlaylists = newManifest.playlists.concat(getMediaGroupPlaylists(newManifest)); // Save all seen timelineStarts to the new manifest. Although this potentially means that
+    // there's a "memory leak" in that it will never stop growing, in reality, only a couple
+    // of properties are saved for each seen Period. Even long running live streams won't
+    // generate too many Periods, unless the stream is watched for decades. In the future,
+    // this can be optimized by mapping to discontinuity sequence numbers for each timeline,
+    // but it may not become an issue, and the additional info can be useful for debugging.
+
+    newManifest.timelineStarts = getUniqueTimelineStarts([oldManifest.timelineStarts, newManifest.timelineStarts]);
+    updateSequenceNumbers({
+      oldPlaylists,
+      newPlaylists,
+      timelineStarts: newManifest.timelineStarts
+    });
+    return newManifest;
+  };
+  const generateSidxKey = sidx => sidx && sidx.uri + '-' + byteRangeToString(sidx.byterange);
+  const mergeDiscontiguousPlaylists = playlists => {
+    // Break out playlists into groups based on their baseUrl
+    const playlistsByBaseUrl = playlists.reduce(function (acc, cur) {
+      if (!acc[cur.attributes.baseUrl]) {
+        acc[cur.attributes.baseUrl] = [];
+      }
+      acc[cur.attributes.baseUrl].push(cur);
+      return acc;
+    }, {});
+    let allPlaylists = [];
+    Object.values(playlistsByBaseUrl).forEach(playlistGroup => {
+      const mergedPlaylists = values(playlistGroup.reduce((acc, playlist) => {
+        // assuming playlist IDs are the same across periods
+        // TODO: handle multiperiod where representation sets are not the same
+        // across periods
+        const name = playlist.attributes.id + (playlist.attributes.lang || '');
+        if (!acc[name]) {
+          // First Period
+          acc[name] = playlist;
+          acc[name].attributes.timelineStarts = [];
+        } else {
+          // Subsequent Periods
+          if (playlist.segments) {
+            // first segment of subsequent periods signal a discontinuity
+            if (playlist.segments[0]) {
+              playlist.segments[0].discontinuity = true;
+            }
+            acc[name].segments.push(...playlist.segments);
+          } // bubble up contentProtection, this assumes all DRM content
+          // has the same contentProtection
+
+          if (playlist.attributes.contentProtection) {
+            acc[name].attributes.contentProtection = playlist.attributes.contentProtection;
+          }
+        }
+        acc[name].attributes.timelineStarts.push({
+          // Although they represent the same number, it's important to have both to make it
+          // compatible with HLS potentially having a similar attribute.
+          start: playlist.attributes.periodStart,
+          timeline: playlist.attributes.periodStart
+        });
+        return acc;
+      }, {}));
+      allPlaylists = allPlaylists.concat(mergedPlaylists);
+    });
+    return allPlaylists.map(playlist => {
+      playlist.discontinuityStarts = findIndexes(playlist.segments || [], 'discontinuity');
+      return playlist;
+    });
+  };
+  const addSidxSegmentsToPlaylist = (playlist, sidxMapping) => {
+    const sidxKey = generateSidxKey(playlist.sidx);
+    const sidxMatch = sidxKey && sidxMapping[sidxKey] && sidxMapping[sidxKey].sidx;
+    if (sidxMatch) {
+      addSidxSegmentsToPlaylist$1(playlist, sidxMatch, playlist.sidx.resolvedUri);
+    }
+    return playlist;
+  };
+  const addSidxSegmentsToPlaylists = (playlists, sidxMapping = {}) => {
+    if (!Object.keys(sidxMapping).length) {
+      return playlists;
+    }
+    for (const i in playlists) {
+      playlists[i] = addSidxSegmentsToPlaylist(playlists[i], sidxMapping);
+    }
+    return playlists;
+  };
+  const formatAudioPlaylist = ({
+    attributes,
+    segments,
+    sidx,
+    mediaSequence,
+    discontinuitySequence,
+    discontinuityStarts
+  }, isAudioOnly) => {
+    const playlist = {
+      attributes: {
+        NAME: attributes.id,
+        BANDWIDTH: attributes.bandwidth,
+        CODECS: attributes.codecs,
+        ['PROGRAM-ID']: 1
+      },
+      uri: '',
+      endList: attributes.type === 'static',
+      timeline: attributes.periodStart,
+      resolvedUri: attributes.baseUrl || '',
+      targetDuration: attributes.duration,
+      discontinuitySequence,
+      discontinuityStarts,
+      timelineStarts: attributes.timelineStarts,
+      mediaSequence,
+      segments
+    };
+    if (attributes.contentProtection) {
+      playlist.contentProtection = attributes.contentProtection;
+    }
+    if (attributes.serviceLocation) {
+      playlist.attributes.serviceLocation = attributes.serviceLocation;
+    }
+    if (sidx) {
+      playlist.sidx = sidx;
+    }
+    if (isAudioOnly) {
+      playlist.attributes.AUDIO = 'audio';
+      playlist.attributes.SUBTITLES = 'subs';
+    }
+    return playlist;
+  };
+  const formatVttPlaylist = ({
+    attributes,
+    segments,
+    mediaSequence,
+    discontinuityStarts,
+    discontinuitySequence
+  }) => {
+    if (typeof segments === 'undefined') {
+      // vtt tracks may use single file in BaseURL
+      segments = [{
+        uri: attributes.baseUrl,
+        timeline: attributes.periodStart,
+        resolvedUri: attributes.baseUrl || '',
+        duration: attributes.sourceDuration,
+        number: 0
+      }]; // targetDuration should be the same duration as the only segment
+
+      attributes.duration = attributes.sourceDuration;
+    }
+    const m3u8Attributes = {
+      NAME: attributes.id,
+      BANDWIDTH: attributes.bandwidth,
+      ['PROGRAM-ID']: 1
+    };
+    if (attributes.codecs) {
+      m3u8Attributes.CODECS = attributes.codecs;
+    }
+    const vttPlaylist = {
+      attributes: m3u8Attributes,
+      uri: '',
+      endList: attributes.type === 'static',
+      timeline: attributes.periodStart,
+      resolvedUri: attributes.baseUrl || '',
+      targetDuration: attributes.duration,
+      timelineStarts: attributes.timelineStarts,
+      discontinuityStarts,
+      discontinuitySequence,
+      mediaSequence,
+      segments
+    };
+    if (attributes.serviceLocation) {
+      vttPlaylist.attributes.serviceLocation = attributes.serviceLocation;
+    }
+    return vttPlaylist;
+  };
+  const organizeAudioPlaylists = (playlists, sidxMapping = {}, isAudioOnly = false) => {
+    let mainPlaylist;
+    const formattedPlaylists = playlists.reduce((a, playlist) => {
+      const role = playlist.attributes.role && playlist.attributes.role.value || '';
+      const language = playlist.attributes.lang || '';
+      let label = playlist.attributes.label || 'main';
+      if (language && !playlist.attributes.label) {
+        const roleLabel = role ? ` (${role})` : '';
+        label = `${playlist.attributes.lang}${roleLabel}`;
+      }
+      if (!a[label]) {
+        a[label] = {
+          language,
+          autoselect: true,
+          default: role === 'main',
+          playlists: [],
+          uri: ''
+        };
+      }
+      const formatted = addSidxSegmentsToPlaylist(formatAudioPlaylist(playlist, isAudioOnly), sidxMapping);
+      a[label].playlists.push(formatted);
+      if (typeof mainPlaylist === 'undefined' && role === 'main') {
+        mainPlaylist = playlist;
+        mainPlaylist.default = true;
+      }
+      return a;
+    }, {}); // if no playlists have role "main", mark the first as main
+
+    if (!mainPlaylist) {
+      const firstLabel = Object.keys(formattedPlaylists)[0];
+      formattedPlaylists[firstLabel].default = true;
+    }
+    return formattedPlaylists;
+  };
+  const organizeVttPlaylists = (playlists, sidxMapping = {}) => {
+    return playlists.reduce((a, playlist) => {
+      const label = playlist.attributes.label || playlist.attributes.lang || 'text';
+      if (!a[label]) {
+        a[label] = {
+          language: label,
+          default: false,
+          autoselect: false,
+          playlists: [],
+          uri: ''
+        };
+      }
+      a[label].playlists.push(addSidxSegmentsToPlaylist(formatVttPlaylist(playlist), sidxMapping));
+      return a;
+    }, {});
+  };
+  const organizeCaptionServices = captionServices => captionServices.reduce((svcObj, svc) => {
+    if (!svc) {
+      return svcObj;
+    }
+    svc.forEach(service => {
+      const {
+        channel,
+        language
+      } = service;
+      svcObj[language] = {
+        autoselect: false,
+        default: false,
+        instreamId: channel,
+        language
+      };
+      if (service.hasOwnProperty('aspectRatio')) {
+        svcObj[language].aspectRatio = service.aspectRatio;
+      }
+      if (service.hasOwnProperty('easyReader')) {
+        svcObj[language].easyReader = service.easyReader;
+      }
+      if (service.hasOwnProperty('3D')) {
+        svcObj[language]['3D'] = service['3D'];
+      }
+    });
+    return svcObj;
+  }, {});
+  const formatVideoPlaylist = ({
+    attributes,
+    segments,
+    sidx,
+    discontinuityStarts
+  }) => {
+    const playlist = {
+      attributes: {
+        NAME: attributes.id,
+        AUDIO: 'audio',
+        SUBTITLES: 'subs',
+        RESOLUTION: {
+          width: attributes.width,
+          height: attributes.height
+        },
+        CODECS: attributes.codecs,
+        BANDWIDTH: attributes.bandwidth,
+        ['PROGRAM-ID']: 1
+      },
+      uri: '',
+      endList: attributes.type === 'static',
+      timeline: attributes.periodStart,
+      resolvedUri: attributes.baseUrl || '',
+      targetDuration: attributes.duration,
+      discontinuityStarts,
+      timelineStarts: attributes.timelineStarts,
+      segments
+    };
+    if (attributes.frameRate) {
+      playlist.attributes['FRAME-RATE'] = attributes.frameRate;
+    }
+    if (attributes.contentProtection) {
+      playlist.contentProtection = attributes.contentProtection;
+    }
+    if (attributes.serviceLocation) {
+      playlist.attributes.serviceLocation = attributes.serviceLocation;
+    }
+    if (sidx) {
+      playlist.sidx = sidx;
+    }
+    return playlist;
+  };
+  const videoOnly = ({
+    attributes
+  }) => attributes.mimeType === 'video/mp4' || attributes.mimeType === 'video/webm' || attributes.contentType === 'video';
+  const audioOnly = ({
+    attributes
+  }) => attributes.mimeType === 'audio/mp4' || attributes.mimeType === 'audio/webm' || attributes.contentType === 'audio';
+  const vttOnly = ({
+    attributes
+  }) => attributes.mimeType === 'text/vtt' || attributes.contentType === 'text';
+  /**
+   * Contains start and timeline properties denoting a timeline start. For DASH, these will
+   * be the same number.
+   *
+   * @typedef {Object} TimelineStart
+   * @property {number} start - the start time of the timeline
+   * @property {number} timeline - the timeline number
+   */
+
+  /**
+   * Adds appropriate media and discontinuity sequence values to the segments and playlists.
+   *
+   * Throughout mpd-parser, the `number` attribute is used in relation to `startNumber`, a
+   * DASH specific attribute used in constructing segment URI's from templates. However, from
+   * an HLS perspective, the `number` attribute on a segment would be its `mediaSequence`
+   * value, which should start at the original media sequence value (or 0) and increment by 1
+   * for each segment thereafter. Since DASH's `startNumber` values are independent per
+   * period, it doesn't make sense to use it for `number`. Instead, assume everything starts
+   * from a 0 mediaSequence value and increment from there.
+   *
+   * Note that VHS currently doesn't use the `number` property, but it can be helpful for
+   * debugging and making sense of the manifest.
+   *
+   * For live playlists, to account for values increasing in manifests when periods are
+   * removed on refreshes, merging logic should be used to update the numbers to their
+   * appropriate values (to ensure they're sequential and increasing).
+   *
+   * @param {Object[]} playlists - the playlists to update
+   * @param {TimelineStart[]} timelineStarts - the timeline starts for the manifest
+   */
+
+  const addMediaSequenceValues = (playlists, timelineStarts) => {
+    // increment all segments sequentially
+    playlists.forEach(playlist => {
+      playlist.mediaSequence = 0;
+      playlist.discontinuitySequence = timelineStarts.findIndex(function ({
+        timeline
+      }) {
+        return timeline === playlist.timeline;
+      });
+      if (!playlist.segments) {
+        return;
+      }
+      playlist.segments.forEach((segment, index) => {
+        segment.number = index;
+      });
+    });
+  };
+  /**
+   * Given a media group object, flattens all playlists within the media group into a single
+   * array.
+   *
+   * @param {Object} mediaGroupObject - the media group object
+   *
+   * @return {Object[]}
+   *         The media group playlists
+   */
+
+  const flattenMediaGroupPlaylists = mediaGroupObject => {
+    if (!mediaGroupObject) {
+      return [];
+    }
+    return Object.keys(mediaGroupObject).reduce((acc, label) => {
+      const labelContents = mediaGroupObject[label];
+      return acc.concat(labelContents.playlists);
+    }, []);
+  };
+  const toM3u8 = ({
+    dashPlaylists,
+    locations,
+    contentSteering,
+    sidxMapping = {},
+    previousManifest,
+    eventStream
+  }) => {
+    if (!dashPlaylists.length) {
+      return {};
+    } // grab all main manifest attributes
+
+    const {
+      sourceDuration: duration,
+      type,
+      suggestedPresentationDelay,
+      minimumUpdatePeriod
+    } = dashPlaylists[0].attributes;
+    const videoPlaylists = mergeDiscontiguousPlaylists(dashPlaylists.filter(videoOnly)).map(formatVideoPlaylist);
+    const audioPlaylists = mergeDiscontiguousPlaylists(dashPlaylists.filter(audioOnly));
+    const vttPlaylists = mergeDiscontiguousPlaylists(dashPlaylists.filter(vttOnly));
+    const captions = dashPlaylists.map(playlist => playlist.attributes.captionServices).filter(Boolean);
+    const manifest = {
+      allowCache: true,
+      discontinuityStarts: [],
+      segments: [],
+      endList: true,
+      mediaGroups: {
+        AUDIO: {},
+        VIDEO: {},
+        ['CLOSED-CAPTIONS']: {},
+        SUBTITLES: {}
+      },
+      uri: '',
+      duration,
+      playlists: addSidxSegmentsToPlaylists(videoPlaylists, sidxMapping)
+    };
+    if (minimumUpdatePeriod >= 0) {
+      manifest.minimumUpdatePeriod = minimumUpdatePeriod * 1000;
+    }
+    if (locations) {
+      manifest.locations = locations;
+    }
+    if (contentSteering) {
+      manifest.contentSteering = contentSteering;
+    }
+    if (type === 'dynamic') {
+      manifest.suggestedPresentationDelay = suggestedPresentationDelay;
+    }
+    if (eventStream && eventStream.length > 0) {
+      manifest.eventStream = eventStream;
+    }
+    const isAudioOnly = manifest.playlists.length === 0;
+    const organizedAudioGroup = audioPlaylists.length ? organizeAudioPlaylists(audioPlaylists, sidxMapping, isAudioOnly) : null;
+    const organizedVttGroup = vttPlaylists.length ? organizeVttPlaylists(vttPlaylists, sidxMapping) : null;
+    const formattedPlaylists = videoPlaylists.concat(flattenMediaGroupPlaylists(organizedAudioGroup), flattenMediaGroupPlaylists(organizedVttGroup));
+    const playlistTimelineStarts = formattedPlaylists.map(({
+      timelineStarts
+    }) => timelineStarts);
+    manifest.timelineStarts = getUniqueTimelineStarts(playlistTimelineStarts);
+    addMediaSequenceValues(formattedPlaylists, manifest.timelineStarts);
+    if (organizedAudioGroup) {
+      manifest.mediaGroups.AUDIO.audio = organizedAudioGroup;
+    }
+    if (organizedVttGroup) {
+      manifest.mediaGroups.SUBTITLES.subs = organizedVttGroup;
+    }
+    if (captions.length) {
+      manifest.mediaGroups['CLOSED-CAPTIONS'].cc = organizeCaptionServices(captions);
+    }
+    if (previousManifest) {
+      return positionManifestOnTimeline({
+        oldManifest: previousManifest,
+        newManifest: manifest
+      });
+    }
+    return manifest;
+  };
+
+  /**
+   * Calculates the R (repetition) value for a live stream (for the final segment
+   * in a manifest where the r value is negative 1)
+   *
+   * @param {Object} attributes
+   *        Object containing all inherited attributes from parent elements with attribute
+   *        names as keys
+   * @param {number} time
+   *        current time (typically the total time up until the final segment)
+   * @param {number} duration
+   *        duration property for the given <S />
+   *
+   * @return {number}
+   *        R value to reach the end of the given period
+   */
+  const getLiveRValue = (attributes, time, duration) => {
+    const {
+      NOW,
+      clientOffset,
+      availabilityStartTime,
+      timescale = 1,
+      periodStart = 0,
+      minimumUpdatePeriod = 0
+    } = attributes;
+    const now = (NOW + clientOffset) / 1000;
+    const periodStartWC = availabilityStartTime + periodStart;
+    const periodEndWC = now + minimumUpdatePeriod;
+    const periodDuration = periodEndWC - periodStartWC;
+    return Math.ceil((periodDuration * timescale - time) / duration);
+  };
+  /**
+   * Uses information provided by SegmentTemplate.SegmentTimeline to determine segment
+   * timing and duration
+   *
+   * @param {Object} attributes
+   *        Object containing all inherited attributes from parent elements with attribute
+   *        names as keys
+   * @param {Object[]} segmentTimeline
+   *        List of objects representing the attributes of each S element contained within
+   *
+   * @return {{number: number, duration: number, time: number, timeline: number}[]}
+   *         List of Objects with segment timing and duration info
+   */
+
+  const parseByTimeline = (attributes, segmentTimeline) => {
+    const {
+      type,
+      minimumUpdatePeriod = 0,
+      media = '',
+      sourceDuration,
+      timescale = 1,
+      startNumber = 1,
+      periodStart: timeline
+    } = attributes;
+    const segments = [];
+    let time = -1;
+    for (let sIndex = 0; sIndex < segmentTimeline.length; sIndex++) {
+      const S = segmentTimeline[sIndex];
+      const duration = S.d;
+      const repeat = S.r || 0;
+      const segmentTime = S.t || 0;
+      if (time < 0) {
+        // first segment
+        time = segmentTime;
+      }
+      if (segmentTime && segmentTime > time) {
+        // discontinuity
+        // TODO: How to handle this type of discontinuity
+        // timeline++ here would treat it like HLS discontuity and content would
+        // get appended without gap
+        // E.G.
+        //  <S t="0" d="1" />
+        //  <S d="1" />
+        //  <S d="1" />
+        //  <S t="5" d="1" />
+        // would have $Time$ values of [0, 1, 2, 5]
+        // should this be appened at time positions [0, 1, 2, 3],(#EXT-X-DISCONTINUITY)
+        // or [0, 1, 2, gap, gap, 5]? (#EXT-X-GAP)
+        // does the value of sourceDuration consider this when calculating arbitrary
+        // negative @r repeat value?
+        // E.G. Same elements as above with this added at the end
+        //  <S d="1" r="-1" />
+        //  with a sourceDuration of 10
+        // Would the 2 gaps be included in the time duration calculations resulting in
+        // 8 segments with $Time$ values of [0, 1, 2, 5, 6, 7, 8, 9] or 10 segments
+        // with $Time$ values of [0, 1, 2, 5, 6, 7, 8, 9, 10, 11] ?
+        time = segmentTime;
+      }
+      let count;
+      if (repeat < 0) {
+        const nextS = sIndex + 1;
+        if (nextS === segmentTimeline.length) {
+          // last segment
+          if (type === 'dynamic' && minimumUpdatePeriod > 0 && media.indexOf('$Number$') > 0) {
+            count = getLiveRValue(attributes, time, duration);
+          } else {
+            // TODO: This may be incorrect depending on conclusion of TODO above
+            count = (sourceDuration * timescale - time) / duration;
+          }
+        } else {
+          count = (segmentTimeline[nextS].t - time) / duration;
+        }
+      } else {
+        count = repeat + 1;
+      }
+      const end = startNumber + segments.length + count;
+      let number = startNumber + segments.length;
+      while (number < end) {
+        segments.push({
+          number,
+          duration: duration / timescale,
+          time,
+          timeline
+        });
+        time += duration;
+        number++;
+      }
+    }
+    return segments;
+  };
+  const identifierPattern = /\$([A-z]*)(?:(%0)([0-9]+)d)?\$/g;
+  /**
+   * Replaces template identifiers with corresponding values. To be used as the callback
+   * for String.prototype.replace
+   *
+   * @name replaceCallback
+   * @function
+   * @param {string} match
+   *        Entire match of identifier
+   * @param {string} identifier
+   *        Name of matched identifier
+   * @param {string} format
+   *        Format tag string. Its presence indicates that padding is expected
+   * @param {string} width
+   *        Desired length of the replaced value. Values less than this width shall be left
+   *        zero padded
+   * @return {string}
+   *         Replacement for the matched identifier
+   */
+
+  /**
+   * Returns a function to be used as a callback for String.prototype.replace to replace
+   * template identifiers
+   *
+   * @param {Obect} values
+   *        Object containing values that shall be used to replace known identifiers
+   * @param {number} values.RepresentationID
+   *        Value of the Representation@id attribute
+   * @param {number} values.Number
+   *        Number of the corresponding segment
+   * @param {number} values.Bandwidth
+   *        Value of the Representation@bandwidth attribute.
+   * @param {number} values.Time
+   *        Timestamp value of the corresponding segment
+   * @return {replaceCallback}
+   *         Callback to be used with String.prototype.replace to replace identifiers
+   */
+
+  const identifierReplacement = values => (match, identifier, format, width) => {
+    if (match === '$$') {
+      // escape sequence
+      return '$';
+    }
+    if (typeof values[identifier] === 'undefined') {
+      return match;
+    }
+    const value = '' + values[identifier];
+    if (identifier === 'RepresentationID') {
+      // Format tag shall not be present with RepresentationID
+      return value;
+    }
+    if (!format) {
+      width = 1;
+    } else {
+      width = parseInt(width, 10);
+    }
+    if (value.length >= width) {
+      return value;
+    }
+    return `${new Array(width - value.length + 1).join('0')}${value}`;
+  };
+  /**
+   * Constructs a segment url from a template string
+   *
+   * @param {string} url
+   *        Template string to construct url from
+   * @param {Obect} values
+   *        Object containing values that shall be used to replace known identifiers
+   * @param {number} values.RepresentationID
+   *        Value of the Representation@id attribute
+   * @param {number} values.Number
+   *        Number of the corresponding segment
+   * @param {number} values.Bandwidth
+   *        Value of the Representation@bandwidth attribute.
+   * @param {number} values.Time
+   *        Timestamp value of the corresponding segment
+   * @return {string}
+   *         Segment url with identifiers replaced
+   */
+
+  const constructTemplateUrl = (url, values) => url.replace(identifierPattern, identifierReplacement(values));
+  /**
+   * Generates a list of objects containing timing and duration information about each
+   * segment needed to generate segment uris and the complete segment object
+   *
+   * @param {Object} attributes
+   *        Object containing all inherited attributes from parent elements with attribute
+   *        names as keys
+   * @param {Object[]|undefined} segmentTimeline
+   *        List of objects representing the attributes of each S element contained within
+   *        the SegmentTimeline element
+   * @return {{number: number, duration: number, time: number, timeline: number}[]}
+   *         List of Objects with segment timing and duration info
+   */
+
+  const parseTemplateInfo = (attributes, segmentTimeline) => {
+    if (!attributes.duration && !segmentTimeline) {
+      // if neither @duration or SegmentTimeline are present, then there shall be exactly
+      // one media segment
+      return [{
+        number: attributes.startNumber || 1,
+        duration: attributes.sourceDuration,
+        time: 0,
+        timeline: attributes.periodStart
+      }];
+    }
+    if (attributes.duration) {
+      return parseByDuration(attributes);
+    }
+    return parseByTimeline(attributes, segmentTimeline);
+  };
+  /**
+   * Generates a list of segments using information provided by the SegmentTemplate element
+   *
+   * @param {Object} attributes
+   *        Object containing all inherited attributes from parent elements with attribute
+   *        names as keys
+   * @param {Object[]|undefined} segmentTimeline
+   *        List of objects representing the attributes of each S element contained within
+   *        the SegmentTimeline element
+   * @return {Object[]}
+   *         List of segment objects
+   */
+
+  const segmentsFromTemplate = (attributes, segmentTimeline) => {
+    const templateValues = {
+      RepresentationID: attributes.id,
+      Bandwidth: attributes.bandwidth || 0
+    };
+    const {
+      initialization = {
+        sourceURL: '',
+        range: ''
+      }
+    } = attributes;
+    const mapSegment = urlTypeToSegment({
+      baseUrl: attributes.baseUrl,
+      source: constructTemplateUrl(initialization.sourceURL, templateValues),
+      range: initialization.range
+    });
+    const segments = parseTemplateInfo(attributes, segmentTimeline);
+    return segments.map(segment => {
+      templateValues.Number = segment.number;
+      templateValues.Time = segment.time;
+      const uri = constructTemplateUrl(attributes.media || '', templateValues); // See DASH spec section 5.3.9.2.2
+      // - if timescale isn't present on any level, default to 1.
+
+      const timescale = attributes.timescale || 1; // - if presentationTimeOffset isn't present on any level, default to 0
+
+      const presentationTimeOffset = attributes.presentationTimeOffset || 0;
+      const presentationTime =
+      // Even if the @t attribute is not specified for the segment, segment.time is
+      // calculated in mpd-parser prior to this, so it's assumed to be available.
+      attributes.periodStart + (segment.time - presentationTimeOffset) / timescale;
+      const map = {
+        uri,
+        timeline: segment.timeline,
+        duration: segment.duration,
+        resolvedUri: resolveUrl$1(attributes.baseUrl || '', uri),
+        map: mapSegment,
+        number: segment.number,
+        presentationTime
+      };
+      return map;
+    });
+  };
+
+  /**
+   * Converts a <SegmentUrl> (of type URLType from the DASH spec 5.3.9.2 Table 14)
+   * to an object that matches the output of a segment in videojs/mpd-parser
+   *
+   * @param {Object} attributes
+   *   Object containing all inherited attributes from parent elements with attribute
+   *   names as keys
+   * @param {Object} segmentUrl
+   *   <SegmentURL> node to translate into a segment object
+   * @return {Object} translated segment object
+   */
+
+  const SegmentURLToSegmentObject = (attributes, segmentUrl) => {
+    const {
+      baseUrl,
+      initialization = {}
+    } = attributes;
+    const initSegment = urlTypeToSegment({
+      baseUrl,
+      source: initialization.sourceURL,
+      range: initialization.range
+    });
+    const segment = urlTypeToSegment({
+      baseUrl,
+      source: segmentUrl.media,
+      range: segmentUrl.mediaRange
+    });
+    segment.map = initSegment;
+    return segment;
+  };
+  /**
+   * Generates a list of segments using information provided by the SegmentList element
+   * SegmentList (DASH SPEC Section 5.3.9.3.2) contains a set of <SegmentURL> nodes.  Each
+   * node should be translated into segment.
+   *
+   * @param {Object} attributes
+   *   Object containing all inherited attributes from parent elements with attribute
+   *   names as keys
+   * @param {Object[]|undefined} segmentTimeline
+   *        List of objects representing the attributes of each S element contained within
+   *        the SegmentTimeline element
+   * @return {Object.<Array>} list of segments
+   */
+
+  const segmentsFromList = (attributes, segmentTimeline) => {
+    const {
+      duration,
+      segmentUrls = [],
+      periodStart
+    } = attributes; // Per spec (5.3.9.2.1) no way to determine segment duration OR
+    // if both SegmentTimeline and @duration are defined, it is outside of spec.
+
+    if (!duration && !segmentTimeline || duration && segmentTimeline) {
+      throw new Error(errors.SEGMENT_TIME_UNSPECIFIED);
+    }
+    const segmentUrlMap = segmentUrls.map(segmentUrlObject => SegmentURLToSegmentObject(attributes, segmentUrlObject));
+    let segmentTimeInfo;
+    if (duration) {
+      segmentTimeInfo = parseByDuration(attributes);
+    }
+    if (segmentTimeline) {
+      segmentTimeInfo = parseByTimeline(attributes, segmentTimeline);
+    }
+    const segments = segmentTimeInfo.map((segmentTime, index) => {
+      if (segmentUrlMap[index]) {
+        const segment = segmentUrlMap[index]; // See DASH spec section 5.3.9.2.2
+        // - if timescale isn't present on any level, default to 1.
+
+        const timescale = attributes.timescale || 1; // - if presentationTimeOffset isn't present on any level, default to 0
+
+        const presentationTimeOffset = attributes.presentationTimeOffset || 0;
+        segment.timeline = segmentTime.timeline;
+        segment.duration = segmentTime.duration;
+        segment.number = segmentTime.number;
+        segment.presentationTime = periodStart + (segmentTime.time - presentationTimeOffset) / timescale;
+        return segment;
+      } // Since we're mapping we should get rid of any blank segments (in case
+      // the given SegmentTimeline is handling for more elements than we have
+      // SegmentURLs for).
+    }).filter(segment => segment);
+    return segments;
+  };
+  const generateSegments = ({
+    attributes,
+    segmentInfo
+  }) => {
+    let segmentAttributes;
+    let segmentsFn;
+    if (segmentInfo.template) {
+      segmentsFn = segmentsFromTemplate;
+      segmentAttributes = merge$1(attributes, segmentInfo.template);
+    } else if (segmentInfo.base) {
+      segmentsFn = segmentsFromBase;
+      segmentAttributes = merge$1(attributes, segmentInfo.base);
+    } else if (segmentInfo.list) {
+      segmentsFn = segmentsFromList;
+      segmentAttributes = merge$1(attributes, segmentInfo.list);
+    }
+    const segmentsInfo = {
+      attributes
+    };
+    if (!segmentsFn) {
+      return segmentsInfo;
+    }
+    const segments = segmentsFn(segmentAttributes, segmentInfo.segmentTimeline); // The @duration attribute will be used to determin the playlist's targetDuration which
+    // must be in seconds. Since we've generated the segment list, we no longer need
+    // @duration to be in @timescale units, so we can convert it here.
+
+    if (segmentAttributes.duration) {
+      const {
+        duration,
+        timescale = 1
+      } = segmentAttributes;
+      segmentAttributes.duration = duration / timescale;
+    } else if (segments.length) {
+      // if there is no @duration attribute, use the largest segment duration as
+      // as target duration
+      segmentAttributes.duration = segments.reduce((max, segment) => {
+        return Math.max(max, Math.ceil(segment.duration));
+      }, 0);
+    } else {
+      segmentAttributes.duration = 0;
+    }
+    segmentsInfo.attributes = segmentAttributes;
+    segmentsInfo.segments = segments; // This is a sidx box without actual segment information
+
+    if (segmentInfo.base && segmentAttributes.indexRange) {
+      segmentsInfo.sidx = segments[0];
+      segmentsInfo.segments = [];
+    }
+    return segmentsInfo;
+  };
+  const toPlaylists = representations => representations.map(generateSegments);
+  const findChildren = (element, name) => from(element.childNodes).filter(({
+    tagName
+  }) => tagName === name);
+  const getContent = element => element.textContent.trim();
+
+  /**
+   * Converts the provided string that may contain a division operation to a number.
+   *
+   * @param {string} value - the provided string value
+   *
+   * @return {number} the parsed string value
+   */
+  const parseDivisionValue = value => {
+    return parseFloat(value.split('/').reduce((prev, current) => prev / current));
+  };
+  const parseDuration = str => {
+    const SECONDS_IN_YEAR = 365 * 24 * 60 * 60;
+    const SECONDS_IN_MONTH = 30 * 24 * 60 * 60;
+    const SECONDS_IN_DAY = 24 * 60 * 60;
+    const SECONDS_IN_HOUR = 60 * 60;
+    const SECONDS_IN_MIN = 60; // P10Y10M10DT10H10M10.1S
+
+    const durationRegex = /P(?:(\d*)Y)?(?:(\d*)M)?(?:(\d*)D)?(?:T(?:(\d*)H)?(?:(\d*)M)?(?:([\d.]*)S)?)?/;
+    const match = durationRegex.exec(str);
+    if (!match) {
+      return 0;
+    }
+    const [year, month, day, hour, minute, second] = match.slice(1);
+    return parseFloat(year || 0) * SECONDS_IN_YEAR + parseFloat(month || 0) * SECONDS_IN_MONTH + parseFloat(day || 0) * SECONDS_IN_DAY + parseFloat(hour || 0) * SECONDS_IN_HOUR + parseFloat(minute || 0) * SECONDS_IN_MIN + parseFloat(second || 0);
+  };
+  const parseDate = str => {
+    // Date format without timezone according to ISO 8601
+    // YYY-MM-DDThh:mm:ss.ssssss
+    const dateRegex = /^\d+-\d+-\d+T\d+:\d+:\d+(\.\d+)?$/; // If the date string does not specifiy a timezone, we must specifiy UTC. This is
+    // expressed by ending with 'Z'
+
+    if (dateRegex.test(str)) {
+      str += 'Z';
+    }
+    return Date.parse(str);
+  };
+  const parsers = {
+    /**
+     * Specifies the duration of the entire Media Presentation. Format is a duration string
+     * as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    mediaPresentationDuration(value) {
+      return parseDuration(value);
+    },
+    /**
+     * Specifies the Segment availability start time for all Segments referred to in this
+     * MPD. For a dynamic manifest, it specifies the anchor for the earliest availability
+     * time. Format is a date string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The date as seconds from unix epoch
+     */
+    availabilityStartTime(value) {
+      return parseDate(value) / 1000;
+    },
+    /**
+     * Specifies the smallest period between potential changes to the MPD. Format is a
+     * duration string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    minimumUpdatePeriod(value) {
+      return parseDuration(value);
+    },
+    /**
+     * Specifies the suggested presentation delay. Format is a
+     * duration string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    suggestedPresentationDelay(value) {
+      return parseDuration(value);
+    },
+    /**
+     * specifices the type of mpd. Can be either "static" or "dynamic"
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     *
+     * @return {string}
+     *         The type as a string
+     */
+    type(value) {
+      return value;
+    },
+    /**
+     * Specifies the duration of the smallest time shifting buffer for any Representation
+     * in the MPD. Format is a duration string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    timeShiftBufferDepth(value) {
+      return parseDuration(value);
+    },
+    /**
+     * Specifies the PeriodStart time of the Period relative to the availabilityStarttime.
+     * Format is a duration string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    start(value) {
+      return parseDuration(value);
+    },
+    /**
+     * Specifies the width of the visual presentation
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed width
+     */
+    width(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the height of the visual presentation
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed height
+     */
+    height(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the bitrate of the representation
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed bandwidth
+     */
+    bandwidth(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the frame rate of the representation
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed frame rate
+     */
+    frameRate(value) {
+      return parseDivisionValue(value);
+    },
+    /**
+     * Specifies the number of the first Media Segment in this Representation in the Period
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed number
+     */
+    startNumber(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the timescale in units per seconds
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed timescale
+     */
+    timescale(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the presentationTimeOffset.
+     *
+     * @param {string} value
+     *        value of the attribute as a string
+     *
+     * @return {number}
+     *         The parsed presentationTimeOffset
+     */
+    presentationTimeOffset(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the constant approximate Segment duration
+     * NOTE: The <Period> element also contains an @duration attribute. This duration
+     *       specifies the duration of the Period. This attribute is currently not
+     *       supported by the rest of the parser, however we still check for it to prevent
+     *       errors.
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed duration
+     */
+    duration(value) {
+      const parsedValue = parseInt(value, 10);
+      if (isNaN(parsedValue)) {
+        return parseDuration(value);
+      }
+      return parsedValue;
+    },
+    /**
+     * Specifies the Segment duration, in units of the value of the @timescale.
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed duration
+     */
+    d(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the MPD start time, in @timescale units, the first Segment in the series
+     * starts relative to the beginning of the Period
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed time
+     */
+    t(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the repeat count of the number of following contiguous Segments with the
+     * same duration expressed by the value of @d
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed number
+     */
+    r(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the presentationTime.
+     *
+     * @param {string} value
+     *        value of the attribute as a string
+     *
+     * @return {number}
+     *         The parsed presentationTime
+     */
+    presentationTime(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Default parser for all other attributes. Acts as a no-op and just returns the value
+     * as a string
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {string}
+     *         Unparsed value
+     */
+    DEFAULT(value) {
+      return value;
+    }
+  };
+  /**
+   * Gets all the attributes and values of the provided node, parses attributes with known
+   * types, and returns an object with attribute names mapped to values.
+   *
+   * @param {Node} el
+   *        The node to parse attributes from
+   * @return {Object}
+   *         Object with all attributes of el parsed
+   */
+
+  const parseAttributes = el => {
+    if (!(el && el.attributes)) {
+      return {};
+    }
+    return from(el.attributes).reduce((a, e) => {
+      const parseFn = parsers[e.name] || parsers.DEFAULT;
+      a[e.name] = parseFn(e.value);
+      return a;
+    }, {});
+  };
+  const keySystemsMap = {
+    'urn:uuid:1077efec-c0b2-4d02-ace3-3c1e52e2fb4b': 'org.w3.clearkey',
+    'urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed': 'com.widevine.alpha',
+    'urn:uuid:9a04f079-9840-4286-ab92-e65be0885f95': 'com.microsoft.playready',
+    'urn:uuid:f239e769-efa3-4850-9c16-a903c6932efb': 'com.adobe.primetime',
+    // ISO_IEC 23009-1_2022 5.8.5.2.2 The mp4 Protection Scheme
+    'urn:mpeg:dash:mp4protection:2011': 'mp4protection'
+  };
+  /**
+   * Builds a list of urls that is the product of the reference urls and BaseURL values
+   *
+   * @param {Object[]} references
+   *        List of objects containing the reference URL as well as its attributes
+   * @param {Node[]} baseUrlElements
+   *        List of BaseURL nodes from the mpd
+   * @return {Object[]}
+   *         List of objects with resolved urls and attributes
+   */
+
+  const buildBaseUrls = (references, baseUrlElements) => {
+    if (!baseUrlElements.length) {
+      return references;
+    }
+    return flatten(references.map(function (reference) {
+      return baseUrlElements.map(function (baseUrlElement) {
+        const initialBaseUrl = getContent(baseUrlElement);
+        const resolvedBaseUrl = resolveUrl$1(reference.baseUrl, initialBaseUrl);
+        const finalBaseUrl = merge$1(parseAttributes(baseUrlElement), {
+          baseUrl: resolvedBaseUrl
+        }); // If the URL is resolved, we want to get the serviceLocation from the reference
+        // assuming there is no serviceLocation on the initialBaseUrl
+
+        if (resolvedBaseUrl !== initialBaseUrl && !finalBaseUrl.serviceLocation && reference.serviceLocation) {
+          finalBaseUrl.serviceLocation = reference.serviceLocation;
+        }
+        return finalBaseUrl;
+      });
+    }));
+  };
+  /**
+   * Contains all Segment information for its containing AdaptationSet
+   *
+   * @typedef {Object} SegmentInformation
+   * @property {Object|undefined} template
+   *           Contains the attributes for the SegmentTemplate node
+   * @property {Object[]|undefined} segmentTimeline
+   *           Contains a list of atrributes for each S node within the SegmentTimeline node
+   * @property {Object|undefined} list
+   *           Contains the attributes for the SegmentList node
+   * @property {Object|undefined} base
+   *           Contains the attributes for the SegmentBase node
+   */
+
+  /**
+   * Returns all available Segment information contained within the AdaptationSet node
+   *
+   * @param {Node} adaptationSet
+   *        The AdaptationSet node to get Segment information from
+   * @return {SegmentInformation}
+   *         The Segment information contained within the provided AdaptationSet
+   */
+
+  const getSegmentInformation = adaptationSet => {
+    const segmentTemplate = findChildren(adaptationSet, 'SegmentTemplate')[0];
+    const segmentList = findChildren(adaptationSet, 'SegmentList')[0];
+    const segmentUrls = segmentList && findChildren(segmentList, 'SegmentURL').map(s => merge$1({
+      tag: 'SegmentURL'
+    }, parseAttributes(s)));
+    const segmentBase = findChildren(adaptationSet, 'SegmentBase')[0];
+    const segmentTimelineParentNode = segmentList || segmentTemplate;
+    const segmentTimeline = segmentTimelineParentNode && findChildren(segmentTimelineParentNode, 'SegmentTimeline')[0];
+    const segmentInitializationParentNode = segmentList || segmentBase || segmentTemplate;
+    const segmentInitialization = segmentInitializationParentNode && findChildren(segmentInitializationParentNode, 'Initialization')[0]; // SegmentTemplate is handled slightly differently, since it can have both
+    // @initialization and an <Initialization> node.  @initialization can be templated,
+    // while the node can have a url and range specified.  If the <SegmentTemplate> has
+    // both @initialization and an <Initialization> subelement we opt to override with
+    // the node, as this interaction is not defined in the spec.
+
+    const template = segmentTemplate && parseAttributes(segmentTemplate);
+    if (template && segmentInitialization) {
+      template.initialization = segmentInitialization && parseAttributes(segmentInitialization);
+    } else if (template && template.initialization) {
+      // If it is @initialization we convert it to an object since this is the format that
+      // later functions will rely on for the initialization segment.  This is only valid
+      // for <SegmentTemplate>
+      template.initialization = {
+        sourceURL: template.initialization
+      };
+    }
+    const segmentInfo = {
+      template,
+      segmentTimeline: segmentTimeline && findChildren(segmentTimeline, 'S').map(s => parseAttributes(s)),
+      list: segmentList && merge$1(parseAttributes(segmentList), {
+        segmentUrls,
+        initialization: parseAttributes(segmentInitialization)
+      }),
+      base: segmentBase && merge$1(parseAttributes(segmentBase), {
+        initialization: parseAttributes(segmentInitialization)
+      })
+    };
+    Object.keys(segmentInfo).forEach(key => {
+      if (!segmentInfo[key]) {
+        delete segmentInfo[key];
+      }
+    });
+    return segmentInfo;
+  };
+  /**
+   * Contains Segment information and attributes needed to construct a Playlist object
+   * from a Representation
+   *
+   * @typedef {Object} RepresentationInformation
+   * @property {SegmentInformation} segmentInfo
+   *           Segment information for this Representation
+   * @property {Object} attributes
+   *           Inherited attributes for this Representation
+   */
+
+  /**
+   * Maps a Representation node to an object containing Segment information and attributes
+   *
+   * @name inheritBaseUrlsCallback
+   * @function
+   * @param {Node} representation
+   *        Representation node from the mpd
+   * @return {RepresentationInformation}
+   *         Representation information needed to construct a Playlist object
+   */
+
+  /**
+   * Returns a callback for Array.prototype.map for mapping Representation nodes to
+   * Segment information and attributes using inherited BaseURL nodes.
+   *
+   * @param {Object} adaptationSetAttributes
+   *        Contains attributes inherited by the AdaptationSet
+   * @param {Object[]} adaptationSetBaseUrls
+   *        List of objects containing resolved base URLs and attributes
+   *        inherited by the AdaptationSet
+   * @param {SegmentInformation} adaptationSetSegmentInfo
+   *        Contains Segment information for the AdaptationSet
+   * @return {inheritBaseUrlsCallback}
+   *         Callback map function
+   */
+
+  const inheritBaseUrls = (adaptationSetAttributes, adaptationSetBaseUrls, adaptationSetSegmentInfo) => representation => {
+    const repBaseUrlElements = findChildren(representation, 'BaseURL');
+    const repBaseUrls = buildBaseUrls(adaptationSetBaseUrls, repBaseUrlElements);
+    const attributes = merge$1(adaptationSetAttributes, parseAttributes(representation));
+    const representationSegmentInfo = getSegmentInformation(representation);
+    return repBaseUrls.map(baseUrl => {
+      return {
+        segmentInfo: merge$1(adaptationSetSegmentInfo, representationSegmentInfo),
+        attributes: merge$1(attributes, baseUrl)
+      };
+    });
+  };
+  /**
+   * Tranforms a series of content protection nodes to
+   * an object containing pssh data by key system
+   *
+   * @param {Node[]} contentProtectionNodes
+   *        Content protection nodes
+   * @return {Object}
+   *        Object containing pssh data by key system
+   */
+
+  const generateKeySystemInformation = contentProtectionNodes => {
+    return contentProtectionNodes.reduce((acc, node) => {
+      const attributes = parseAttributes(node); // Although it could be argued that according to the UUID RFC spec the UUID string (a-f chars) should be generated
+      // as a lowercase string it also mentions it should be treated as case-insensitive on input. Since the key system
+      // UUIDs in the keySystemsMap are hardcoded as lowercase in the codebase there isn't any reason not to do
+      // .toLowerCase() on the input UUID string from the manifest (at least I could not think of one).
+
+      if (attributes.schemeIdUri) {
+        attributes.schemeIdUri = attributes.schemeIdUri.toLowerCase();
+      }
+      const keySystem = keySystemsMap[attributes.schemeIdUri];
+      if (keySystem) {
+        acc[keySystem] = {
+          attributes
+        };
+        const psshNode = findChildren(node, 'cenc:pssh')[0];
+        if (psshNode) {
+          const pssh = getContent(psshNode);
+          acc[keySystem].pssh = pssh && decodeB64ToUint8Array(pssh);
+        }
+      }
+      return acc;
+    }, {});
+  }; // defined in ANSI_SCTE 214-1 2016
+
+  const parseCaptionServiceMetadata = service => {
+    // 608 captions
+    if (service.schemeIdUri === 'urn:scte:dash:cc:cea-608:2015') {
+      const values = typeof service.value !== 'string' ? [] : service.value.split(';');
+      return values.map(value => {
+        let channel;
+        let language; // default language to value
+
+        language = value;
+        if (/^CC\d=/.test(value)) {
+          [channel, language] = value.split('=');
+        } else if (/^CC\d$/.test(value)) {
+          channel = value;
+        }
+        return {
+          channel,
+          language
+        };
+      });
+    } else if (service.schemeIdUri === 'urn:scte:dash:cc:cea-708:2015') {
+      const values = typeof service.value !== 'string' ? [] : service.value.split(';');
+      return values.map(value => {
+        const flags = {
+          // service or channel number 1-63
+          'channel': undefined,
+          // language is a 3ALPHA per ISO 639.2/B
+          // field is required
+          'language': undefined,
+          // BIT 1/0 or ?
+          // default value is 1, meaning 16:9 aspect ratio, 0 is 4:3, ? is unknown
+          'aspectRatio': 1,
+          // BIT 1/0
+          // easy reader flag indicated the text is tailed to the needs of beginning readers
+          // default 0, or off
+          'easyReader': 0,
+          // BIT 1/0
+          // If 3d metadata is present (CEA-708.1) then 1
+          // default 0
+          '3D': 0
+        };
+        if (/=/.test(value)) {
+          const [channel, opts = ''] = value.split('=');
+          flags.channel = channel;
+          flags.language = value;
+          opts.split(',').forEach(opt => {
+            const [name, val] = opt.split(':');
+            if (name === 'lang') {
+              flags.language = val; // er for easyReadery
+            } else if (name === 'er') {
+              flags.easyReader = Number(val); // war for wide aspect ratio
+            } else if (name === 'war') {
+              flags.aspectRatio = Number(val);
+            } else if (name === '3D') {
+              flags['3D'] = Number(val);
+            }
+          });
+        } else {
+          flags.language = value;
+        }
+        if (flags.channel) {
+          flags.channel = 'SERVICE' + flags.channel;
+        }
+        return flags;
+      });
+    }
+  };
+  /**
+   * A map callback that will parse all event stream data for a collection of periods
+   * DASH ISO_IEC_23009 5.10.2.2
+   * https://dashif-documents.azurewebsites.net/Events/master/event.html#mpd-event-timing
+   *
+   * @param {PeriodInformation} period object containing necessary period information
+   * @return a collection of parsed eventstream event objects
+   */
+
+  const toEventStream = period => {
+    // get and flatten all EventStreams tags and parse attributes and children
+    return flatten(findChildren(period.node, 'EventStream').map(eventStream => {
+      const eventStreamAttributes = parseAttributes(eventStream);
+      const schemeIdUri = eventStreamAttributes.schemeIdUri; // find all Events per EventStream tag and map to return objects
+
+      return findChildren(eventStream, 'Event').map(event => {
+        const eventAttributes = parseAttributes(event);
+        const presentationTime = eventAttributes.presentationTime || 0;
+        const timescale = eventStreamAttributes.timescale || 1;
+        const duration = eventAttributes.duration || 0;
+        const start = presentationTime / timescale + period.attributes.start;
+        return {
+          schemeIdUri,
+          value: eventStreamAttributes.value,
+          id: eventAttributes.id,
+          start,
+          end: start + duration / timescale,
+          messageData: getContent(event) || eventAttributes.messageData,
+          contentEncoding: eventStreamAttributes.contentEncoding,
+          presentationTimeOffset: eventStreamAttributes.presentationTimeOffset || 0
+        };
+      });
+    }));
+  };
+  /**
+   * Maps an AdaptationSet node to a list of Representation information objects
+   *
+   * @name toRepresentationsCallback
+   * @function
+   * @param {Node} adaptationSet
+   *        AdaptationSet node from the mpd
+   * @return {RepresentationInformation[]}
+   *         List of objects containing Representaion information
+   */
+
+  /**
+   * Returns a callback for Array.prototype.map for mapping AdaptationSet nodes to a list of
+   * Representation information objects
+   *
+   * @param {Object} periodAttributes
+   *        Contains attributes inherited by the Period
+   * @param {Object[]} periodBaseUrls
+   *        Contains list of objects with resolved base urls and attributes
+   *        inherited by the Period
+   * @param {string[]} periodSegmentInfo
+   *        Contains Segment Information at the period level
+   * @return {toRepresentationsCallback}
+   *         Callback map function
+   */
+
+  const toRepresentations = (periodAttributes, periodBaseUrls, periodSegmentInfo) => adaptationSet => {
+    const adaptationSetAttributes = parseAttributes(adaptationSet);
+    const adaptationSetBaseUrls = buildBaseUrls(periodBaseUrls, findChildren(adaptationSet, 'BaseURL'));
+    const role = findChildren(adaptationSet, 'Role')[0];
+    const roleAttributes = {
+      role: parseAttributes(role)
+    };
+    let attrs = merge$1(periodAttributes, adaptationSetAttributes, roleAttributes);
+    const accessibility = findChildren(adaptationSet, 'Accessibility')[0];
+    const captionServices = parseCaptionServiceMetadata(parseAttributes(accessibility));
+    if (captionServices) {
+      attrs = merge$1(attrs, {
+        captionServices
+      });
+    }
+    const label = findChildren(adaptationSet, 'Label')[0];
+    if (label && label.childNodes.length) {
+      const labelVal = label.childNodes[0].nodeValue.trim();
+      attrs = merge$1(attrs, {
+        label: labelVal
+      });
+    }
+    const contentProtection = generateKeySystemInformation(findChildren(adaptationSet, 'ContentProtection'));
+    if (Object.keys(contentProtection).length) {
+      attrs = merge$1(attrs, {
+        contentProtection
+      });
+    }
+    const segmentInfo = getSegmentInformation(adaptationSet);
+    const representations = findChildren(adaptationSet, 'Representation');
+    const adaptationSetSegmentInfo = merge$1(periodSegmentInfo, segmentInfo);
+    return flatten(representations.map(inheritBaseUrls(attrs, adaptationSetBaseUrls, adaptationSetSegmentInfo)));
+  };
+  /**
+   * Contains all period information for mapping nodes onto adaptation sets.
+   *
+   * @typedef {Object} PeriodInformation
+   * @property {Node} period.node
+   *           Period node from the mpd
+   * @property {Object} period.attributes
+   *           Parsed period attributes from node plus any added
+   */
+
+  /**
+   * Maps a PeriodInformation object to a list of Representation information objects for all
+   * AdaptationSet nodes contained within the Period.
+   *
+   * @name toAdaptationSetsCallback
+   * @function
+   * @param {PeriodInformation} period
+   *        Period object containing necessary period information
+   * @param {number} periodStart
+   *        Start time of the Period within the mpd
+   * @return {RepresentationInformation[]}
+   *         List of objects containing Representaion information
+   */
+
+  /**
+   * Returns a callback for Array.prototype.map for mapping Period nodes to a list of
+   * Representation information objects
+   *
+   * @param {Object} mpdAttributes
+   *        Contains attributes inherited by the mpd
+    * @param {Object[]} mpdBaseUrls
+   *        Contains list of objects with resolved base urls and attributes
+   *        inherited by the mpd
+   * @return {toAdaptationSetsCallback}
+   *         Callback map function
+   */
+
+  const toAdaptationSets = (mpdAttributes, mpdBaseUrls) => (period, index) => {
+    const periodBaseUrls = buildBaseUrls(mpdBaseUrls, findChildren(period.node, 'BaseURL'));
+    const periodAttributes = merge$1(mpdAttributes, {
+      periodStart: period.attributes.start
+    });
+    if (typeof period.attributes.duration === 'number') {
+      periodAttributes.periodDuration = period.attributes.duration;
+    }
+    const adaptationSets = findChildren(period.node, 'AdaptationSet');
+    const periodSegmentInfo = getSegmentInformation(period.node);
+    return flatten(adaptationSets.map(toRepresentations(periodAttributes, periodBaseUrls, periodSegmentInfo)));
+  };
+  /**
+   * Tranforms an array of content steering nodes into an object
+   * containing CDN content steering information from the MPD manifest.
+   *
+   * For more information on the DASH spec for Content Steering parsing, see:
+   * https://dashif.org/docs/DASH-IF-CTS-00XX-Content-Steering-Community-Review.pdf
+   *
+   * @param {Node[]} contentSteeringNodes
+   *        Content steering nodes
+   * @param {Function} eventHandler
+   *        The event handler passed into the parser options to handle warnings
+   * @return {Object}
+   *        Object containing content steering data
+   */
+
+  const generateContentSteeringInformation = (contentSteeringNodes, eventHandler) => {
+    // If there are more than one ContentSteering tags, throw an error
+    if (contentSteeringNodes.length > 1) {
+      eventHandler({
+        type: 'warn',
+        message: 'The MPD manifest should contain no more than one ContentSteering tag'
+      });
+    } // Return a null value if there are no ContentSteering tags
+
+    if (!contentSteeringNodes.length) {
+      return null;
+    }
+    const infoFromContentSteeringTag = merge$1({
+      serverURL: getContent(contentSteeringNodes[0])
+    }, parseAttributes(contentSteeringNodes[0])); // Converts `queryBeforeStart` to a boolean, as well as setting the default value
+    // to `false` if it doesn't exist
+
+    infoFromContentSteeringTag.queryBeforeStart = infoFromContentSteeringTag.queryBeforeStart === 'true';
+    return infoFromContentSteeringTag;
+  };
+  /**
+   * Gets Period@start property for a given period.
+   *
+   * @param {Object} options
+   *        Options object
+   * @param {Object} options.attributes
+   *        Period attributes
+   * @param {Object} [options.priorPeriodAttributes]
+   *        Prior period attributes (if prior period is available)
+   * @param {string} options.mpdType
+   *        The MPD@type these periods came from
+   * @return {number|null}
+   *         The period start, or null if it's an early available period or error
+   */
+
+  const getPeriodStart = ({
+    attributes,
+    priorPeriodAttributes,
+    mpdType
+  }) => {
+    // Summary of period start time calculation from DASH spec section 5.3.2.1
+    //
+    // A period's start is the first period's start + time elapsed after playing all
+    // prior periods to this one. Periods continue one after the other in time (without
+    // gaps) until the end of the presentation.
+    //
+    // The value of Period@start should be:
+    // 1. if Period@start is present: value of Period@start
+    // 2. if previous period exists and it has @duration: previous Period@start +
+    //    previous Period@duration
+    // 3. if this is first period and MPD@type is 'static': 0
+    // 4. in all other cases, consider the period an "early available period" (note: not
+    //    currently supported)
+    // (1)
+    if (typeof attributes.start === 'number') {
+      return attributes.start;
+    } // (2)
+
+    if (priorPeriodAttributes && typeof priorPeriodAttributes.start === 'number' && typeof priorPeriodAttributes.duration === 'number') {
+      return priorPeriodAttributes.start + priorPeriodAttributes.duration;
+    } // (3)
+
+    if (!priorPeriodAttributes && mpdType === 'static') {
+      return 0;
+    } // (4)
+    // There is currently no logic for calculating the Period@start value if there is
+    // no Period@start or prior Period@start and Period@duration available. This is not made
+    // explicit by the DASH interop guidelines or the DASH spec, however, since there's
+    // nothing about any other resolution strategies, it's implied. Thus, this case should
+    // be considered an early available period, or error, and null should suffice for both
+    // of those cases.
+
+    return null;
+  };
+  /**
+   * Traverses the mpd xml tree to generate a list of Representation information objects
+   * that have inherited attributes from parent nodes
+   *
+   * @param {Node} mpd
+   *        The root node of the mpd
+   * @param {Object} options
+   *        Available options for inheritAttributes
+   * @param {string} options.manifestUri
+   *        The uri source of the mpd
+   * @param {number} options.NOW
+   *        Current time per DASH IOP.  Default is current time in ms since epoch
+   * @param {number} options.clientOffset
+   *        Client time difference from NOW (in milliseconds)
+   * @return {RepresentationInformation[]}
+   *         List of objects containing Representation information
+   */
+
+  const inheritAttributes = (mpd, options = {}) => {
+    const {
+      manifestUri = '',
+      NOW = Date.now(),
+      clientOffset = 0,
+      // TODO: For now, we are expecting an eventHandler callback function
+      // to be passed into the mpd parser as an option.
+      // In the future, we should enable stream parsing by using the Stream class from vhs-utils.
+      // This will support new features including a standardized event handler.
+      // See the m3u8 parser for examples of how stream parsing is currently used for HLS parsing.
+      // https://github.com/videojs/vhs-utils/blob/88d6e10c631e57a5af02c5a62bc7376cd456b4f5/src/stream.js#L9
+      eventHandler = function () {}
+    } = options;
+    const periodNodes = findChildren(mpd, 'Period');
+    if (!periodNodes.length) {
+      throw new Error(errors.INVALID_NUMBER_OF_PERIOD);
+    }
+    const locations = findChildren(mpd, 'Location');
+    const mpdAttributes = parseAttributes(mpd);
+    const mpdBaseUrls = buildBaseUrls([{
+      baseUrl: manifestUri
+    }], findChildren(mpd, 'BaseURL'));
+    const contentSteeringNodes = findChildren(mpd, 'ContentSteering'); // See DASH spec section 5.3.1.2, Semantics of MPD element. Default type to 'static'.
+
+    mpdAttributes.type = mpdAttributes.type || 'static';
+    mpdAttributes.sourceDuration = mpdAttributes.mediaPresentationDuration || 0;
+    mpdAttributes.NOW = NOW;
+    mpdAttributes.clientOffset = clientOffset;
+    if (locations.length) {
+      mpdAttributes.locations = locations.map(getContent);
+    }
+    const periods = []; // Since toAdaptationSets acts on individual periods right now, the simplest approach to
+    // adding properties that require looking at prior periods is to parse attributes and add
+    // missing ones before toAdaptationSets is called. If more such properties are added, it
+    // may be better to refactor toAdaptationSets.
+
+    periodNodes.forEach((node, index) => {
+      const attributes = parseAttributes(node); // Use the last modified prior period, as it may contain added information necessary
+      // for this period.
+
+      const priorPeriod = periods[index - 1];
+      attributes.start = getPeriodStart({
+        attributes,
+        priorPeriodAttributes: priorPeriod ? priorPeriod.attributes : null,
+        mpdType: mpdAttributes.type
+      });
+      periods.push({
+        node,
+        attributes
+      });
+    });
+    return {
+      locations: mpdAttributes.locations,
+      contentSteeringInfo: generateContentSteeringInformation(contentSteeringNodes, eventHandler),
+      // TODO: There are occurences where this `representationInfo` array contains undesired
+      // duplicates. This generally occurs when there are multiple BaseURL nodes that are
+      // direct children of the MPD node. When we attempt to resolve URLs from a combination of the
+      // parent BaseURL and a child BaseURL, and the value does not resolve,
+      // we end up returning the child BaseURL multiple times.
+      // We need to determine a way to remove these duplicates in a safe way.
+      // See: https://github.com/videojs/mpd-parser/pull/17#discussion_r162750527
+      representationInfo: flatten(periods.map(toAdaptationSets(mpdAttributes, mpdBaseUrls))),
+      eventStream: flatten(periods.map(toEventStream))
+    };
+  };
+  const stringToMpdXml = manifestString => {
+    if (manifestString === '') {
+      throw new Error(errors.DASH_EMPTY_MANIFEST);
+    }
+    const parser = new DOMParser();
+    let xml;
+    let mpd;
+    try {
+      xml = parser.parseFromString(manifestString, 'application/xml');
+      mpd = xml && xml.documentElement.tagName === 'MPD' ? xml.documentElement : null;
+    } catch (e) {// ie 11 throws on invalid xml
+    }
+    if (!mpd || mpd && mpd.getElementsByTagName('parsererror').length > 0) {
+      throw new Error(errors.DASH_INVALID_XML);
+    }
+    return mpd;
+  };
+
+  /**
+   * Parses the manifest for a UTCTiming node, returning the nodes attributes if found
+   *
+   * @param {string} mpd
+   *        XML string of the MPD manifest
+   * @return {Object|null}
+   *         Attributes of UTCTiming node specified in the manifest. Null if none found
+   */
+
+  const parseUTCTimingScheme = mpd => {
+    const UTCTimingNode = findChildren(mpd, 'UTCTiming')[0];
+    if (!UTCTimingNode) {
+      return null;
+    }
+    const attributes = parseAttributes(UTCTimingNode);
+    switch (attributes.schemeIdUri) {
+      case 'urn:mpeg:dash:utc:http-head:2014':
+      case 'urn:mpeg:dash:utc:http-head:2012':
+        attributes.method = 'HEAD';
+        break;
+      case 'urn:mpeg:dash:utc:http-xsdate:2014':
+      case 'urn:mpeg:dash:utc:http-iso:2014':
+      case 'urn:mpeg:dash:utc:http-xsdate:2012':
+      case 'urn:mpeg:dash:utc:http-iso:2012':
+        attributes.method = 'GET';
+        break;
+      case 'urn:mpeg:dash:utc:direct:2014':
+      case 'urn:mpeg:dash:utc:direct:2012':
+        attributes.method = 'DIRECT';
+        attributes.value = Date.parse(attributes.value);
+        break;
+      case 'urn:mpeg:dash:utc:http-ntp:2014':
+      case 'urn:mpeg:dash:utc:ntp:2014':
+      case 'urn:mpeg:dash:utc:sntp:2014':
+      default:
+        throw new Error(errors.UNSUPPORTED_UTC_TIMING_SCHEME);
+    }
+    return attributes;
+  };
+  /*
+   * Given a DASH manifest string and options, parses the DASH manifest into an object in the
+   * form outputed by m3u8-parser and accepted by videojs/http-streaming.
+   *
+   * For live DASH manifests, if `previousManifest` is provided in options, then the newly
+   * parsed DASH manifest will have its media sequence and discontinuity sequence values
+   * updated to reflect its position relative to the prior manifest.
+   *
+   * @param {string} manifestString - the DASH manifest as a string
+   * @param {options} [options] - any options
+   *
+   * @return {Object} the manifest object
+   */
+
+  const parse = (manifestString, options = {}) => {
+    const parsedManifestInfo = inheritAttributes(stringToMpdXml(manifestString), options);
+    const playlists = toPlaylists(parsedManifestInfo.representationInfo);
+    return toM3u8({
+      dashPlaylists: playlists,
+      locations: parsedManifestInfo.locations,
+      contentSteering: parsedManifestInfo.contentSteeringInfo,
+      sidxMapping: options.sidxMapping,
+      previousManifest: options.previousManifest,
+      eventStream: parsedManifestInfo.eventStream
+    });
+  };
+  /**
+   * Parses the manifest for a UTCTiming node, returning the nodes attributes if found
+   *
+   * @param {string} manifestString
+   *        XML string of the MPD manifest
+   * @return {Object|null}
+   *         Attributes of UTCTiming node specified in the manifest. Null if none found
+   */
+
+  const parseUTCTiming = manifestString => parseUTCTimingScheme(stringToMpdXml(manifestString));
+
+  var MAX_UINT32 = Math.pow(2, 32);
+  var getUint64$1 = function (uint8) {
+    var dv = new DataView(uint8.buffer, uint8.byteOffset, uint8.byteLength);
+    var value;
+    if (dv.getBigUint64) {
+      value = dv.getBigUint64(0);
+      if (value < Number.MAX_SAFE_INTEGER) {
+        return Number(value);
+      }
+      return value;
+    }
+    return dv.getUint32(0) * MAX_UINT32 + dv.getUint32(4);
+  };
+  var numbers = {
+    getUint64: getUint64$1,
+    MAX_UINT32: MAX_UINT32
+  };
+
+  var getUint64 = numbers.getUint64;
+  var parseSidx = function (data) {
+    var view = new DataView(data.buffer, data.byteOffset, data.byteLength),
+      result = {
+        version: data[0],
+        flags: new Uint8Array(data.subarray(1, 4)),
+        references: [],
+        referenceId: view.getUint32(4),
+        timescale: view.getUint32(8)
+      },
+      i = 12;
+    if (result.version === 0) {
+      result.earliestPresentationTime = view.getUint32(i);
+      result.firstOffset = view.getUint32(i + 4);
+      i += 8;
+    } else {
+      // read 64 bits
+      result.earliestPresentationTime = getUint64(data.subarray(i));
+      result.firstOffset = getUint64(data.subarray(i + 8));
+      i += 16;
+    }
+    i += 2; // reserved
+
+    var referenceCount = view.getUint16(i);
+    i += 2; // start of references
+
+    for (; referenceCount > 0; i += 12, referenceCount--) {
+      result.references.push({
+        referenceType: (data[i] & 0x80) >>> 7,
+        referencedSize: view.getUint32(i) & 0x7FFFFFFF,
+        subsegmentDuration: view.getUint32(i + 4),
+        startsWithSap: !!(data[i + 8] & 0x80),
+        sapType: (data[i + 8] & 0x70) >>> 4,
+        sapDeltaTime: view.getUint32(i + 8) & 0x0FFFFFFF
+      });
+    }
+    return result;
+  };
+  var parseSidx_1 = parseSidx;
+
+  var ID3 = toUint8([0x49, 0x44, 0x33]);
+  var getId3Size = function getId3Size(bytes, offset) {
+    if (offset === void 0) {
+      offset = 0;
+    }
+    bytes = toUint8(bytes);
+    var flags = bytes[offset + 5];
+    var returnSize = bytes[offset + 6] << 21 | bytes[offset + 7] << 14 | bytes[offset + 8] << 7 | bytes[offset + 9];
+    var footerPresent = (flags & 16) >> 4;
+    if (footerPresent) {
+      return returnSize + 20;
+    }
+    return returnSize + 10;
+  };
+  var getId3Offset = function getId3Offset(bytes, offset) {
+    if (offset === void 0) {
+      offset = 0;
+    }
+    bytes = toUint8(bytes);
+    if (bytes.length - offset < 10 || !bytesMatch(bytes, ID3, {
+      offset: offset
+    })) {
+      return offset;
+    }
+    offset += getId3Size(bytes, offset); // recursive check for id3 tags as some files
+    // have multiple ID3 tag sections even though
+    // they should not.
+
+    return getId3Offset(bytes, offset);
+  };
+
+  var normalizePath$1 = function normalizePath(path) {
+    if (typeof path === 'string') {
+      return stringToBytes(path);
+    }
+    if (typeof path === 'number') {
+      return path;
+    }
+    return path;
+  };
+  var normalizePaths$1 = function normalizePaths(paths) {
+    if (!Array.isArray(paths)) {
+      return [normalizePath$1(paths)];
+    }
+    return paths.map(function (p) {
+      return normalizePath$1(p);
+    });
+  };
+  /**
+   * find any number of boxes by name given a path to it in an iso bmff
+   * such as mp4.
+   *
+   * @param {TypedArray} bytes
+   *        bytes for the iso bmff to search for boxes in
+   *
+   * @param {Uint8Array[]|string[]|string|Uint8Array} name
+   *        An array of paths or a single path representing the name
+   *        of boxes to search through in bytes. Paths may be
+   *        uint8 (character codes) or strings.
+   *
+   * @param {boolean} [complete=false]
+   *        Should we search only for complete boxes on the final path.
+   *        This is very useful when you do not want to get back partial boxes
+   *        in the case of streaming files.
+   *
+   * @return {Uint8Array[]}
+   *         An array of the end paths that we found.
+   */
+
+  var findBox = function findBox(bytes, paths, complete) {
+    if (complete === void 0) {
+      complete = false;
+    }
+    paths = normalizePaths$1(paths);
+    bytes = toUint8(bytes);
+    var results = [];
+    if (!paths.length) {
+      // short-circuit the search for empty paths
+      return results;
+    }
+    var i = 0;
+    while (i < bytes.length) {
+      var size = (bytes[i] << 24 | bytes[i + 1] << 16 | bytes[i + 2] << 8 | bytes[i + 3]) >>> 0;
+      var type = bytes.subarray(i + 4, i + 8); // invalid box format.
+
+      if (size === 0) {
+        break;
+      }
+      var end = i + size;
+      if (end > bytes.length) {
+        // this box is bigger than the number of bytes we have
+        // and complete is set, we cannot find any more boxes.
+        if (complete) {
+          break;
+        }
+        end = bytes.length;
+      }
+      var data = bytes.subarray(i + 8, end);
+      if (bytesMatch(type, paths[0])) {
+        if (paths.length === 1) {
+          // this is the end of the path and we've found the box we were
+          // looking for
+          results.push(data);
+        } else {
+          // recursively search for the next box along the path
+          results.push.apply(results, findBox(data, paths.slice(1), complete));
+        }
+      }
+      i = end;
+    } // we've finished searching all of bytes
+
+    return results;
+  };
+
+  // https://matroska-org.github.io/libebml/specs.html
+  // https://www.matroska.org/technical/elements.html
+  // https://www.webmproject.org/docs/container/
+
+  var EBML_TAGS = {
+    EBML: toUint8([0x1A, 0x45, 0xDF, 0xA3]),
+    DocType: toUint8([0x42, 0x82]),
+    Segment: toUint8([0x18, 0x53, 0x80, 0x67]),
+    SegmentInfo: toUint8([0x15, 0x49, 0xA9, 0x66]),
+    Tracks: toUint8([0x16, 0x54, 0xAE, 0x6B]),
+    Track: toUint8([0xAE]),
+    TrackNumber: toUint8([0xd7]),
+    DefaultDuration: toUint8([0x23, 0xe3, 0x83]),
+    TrackEntry: toUint8([0xAE]),
+    TrackType: toUint8([0x83]),
+    FlagDefault: toUint8([0x88]),
+    CodecID: toUint8([0x86]),
+    CodecPrivate: toUint8([0x63, 0xA2]),
+    VideoTrack: toUint8([0xe0]),
+    AudioTrack: toUint8([0xe1]),
+    // Not used yet, but will be used for live webm/mkv
+    // see https://www.matroska.org/technical/basics.html#block-structure
+    // see https://www.matroska.org/technical/basics.html#simpleblock-structure
+    Cluster: toUint8([0x1F, 0x43, 0xB6, 0x75]),
+    Timestamp: toUint8([0xE7]),
+    TimestampScale: toUint8([0x2A, 0xD7, 0xB1]),
+    BlockGroup: toUint8([0xA0]),
+    BlockDuration: toUint8([0x9B]),
+    Block: toUint8([0xA1]),
+    SimpleBlock: toUint8([0xA3])
+  };
+  /**
+   * This is a simple table to determine the length
+   * of things in ebml. The length is one based (starts at 1,
+   * rather than zero) and for every zero bit before a one bit
+   * we add one to length. We also need this table because in some
+   * case we have to xor all the length bits from another value.
+   */
+
+  var LENGTH_TABLE = [128, 64, 32, 16, 8, 4, 2, 1];
+  var getLength = function getLength(byte) {
+    var len = 1;
+    for (var i = 0; i < LENGTH_TABLE.length; i++) {
+      if (byte & LENGTH_TABLE[i]) {
+        break;
+      }
+      len++;
+    }
+    return len;
+  }; // length in ebml is stored in the first 4 to 8 bits
+  // of the first byte. 4 for the id length and 8 for the
+  // data size length. Length is measured by converting the number to binary
+  // then 1 + the number of zeros before a 1 is encountered starting
+  // from the left.
+
+  var getvint = function getvint(bytes, offset, removeLength, signed) {
+    if (removeLength === void 0) {
+      removeLength = true;
+    }
+    if (signed === void 0) {
+      signed = false;
+    }
+    var length = getLength(bytes[offset]);
+    var valueBytes = bytes.subarray(offset, offset + length); // NOTE that we do **not** subarray here because we need to copy these bytes
+    // as they will be modified below to remove the dataSizeLen bits and we do not
+    // want to modify the original data. normally we could just call slice on
+    // uint8array but ie 11 does not support that...
+
+    if (removeLength) {
+      valueBytes = Array.prototype.slice.call(bytes, offset, offset + length);
+      valueBytes[0] ^= LENGTH_TABLE[length - 1];
+    }
+    return {
+      length: length,
+      value: bytesToNumber(valueBytes, {
+        signed: signed
+      }),
+      bytes: valueBytes
+    };
+  };
+  var normalizePath = function normalizePath(path) {
+    if (typeof path === 'string') {
+      return path.match(/.{1,2}/g).map(function (p) {
+        return normalizePath(p);
+      });
+    }
+    if (typeof path === 'number') {
+      return numberToBytes(path);
+    }
+    return path;
+  };
+  var normalizePaths = function normalizePaths(paths) {
+    if (!Array.isArray(paths)) {
+      return [normalizePath(paths)];
+    }
+    return paths.map(function (p) {
+      return normalizePath(p);
+    });
+  };
+  var getInfinityDataSize = function getInfinityDataSize(id, bytes, offset) {
+    if (offset >= bytes.length) {
+      return bytes.length;
+    }
+    var innerid = getvint(bytes, offset, false);
+    if (bytesMatch(id.bytes, innerid.bytes)) {
+      return offset;
+    }
+    var dataHeader = getvint(bytes, offset + innerid.length);
+    return getInfinityDataSize(id, bytes, offset + dataHeader.length + dataHeader.value + innerid.length);
+  };
+  /**
+   * Notes on the EBLM format.
+   *
+   * EBLM uses "vints" tags. Every vint tag contains
+   * two parts
+   *
+   * 1. The length from the first byte. You get this by
+   *    converting the byte to binary and counting the zeros
+   *    before a 1. Then you add 1 to that. Examples
+   *    00011111 = length 4 because there are 3 zeros before a 1.
+   *    00100000 = length 3 because there are 2 zeros before a 1.
+   *    00000011 = length 7 because there are 6 zeros before a 1.
+   *
+   * 2. The bits used for length are removed from the first byte
+   *    Then all the bytes are merged into a value. NOTE: this
+   *    is not the case for id ebml tags as there id includes
+   *    length bits.
+   *
+   */
+
+  var findEbml = function findEbml(bytes, paths) {
+    paths = normalizePaths(paths);
+    bytes = toUint8(bytes);
+    var results = [];
+    if (!paths.length) {
+      return results;
+    }
+    var i = 0;
+    while (i < bytes.length) {
+      var id = getvint(bytes, i, false);
+      var dataHeader = getvint(bytes, i + id.length);
+      var dataStart = i + id.length + dataHeader.length; // dataSize is unknown or this is a live stream
+
+      if (dataHeader.value === 0x7f) {
+        dataHeader.value = getInfinityDataSize(id, bytes, dataStart);
+        if (dataHeader.value !== bytes.length) {
+          dataHeader.value -= dataStart;
+        }
+      }
+      var dataEnd = dataStart + dataHeader.value > bytes.length ? bytes.length : dataStart + dataHeader.value;
+      var data = bytes.subarray(dataStart, dataEnd);
+      if (bytesMatch(paths[0], id.bytes)) {
+        if (paths.length === 1) {
+          // this is the end of the paths and we've found the tag we were
+          // looking for
+          results.push(data);
+        } else {
+          // recursively search for the next tag inside of the data
+          // of this one
+          results = results.concat(findEbml(data, paths.slice(1)));
+        }
+      }
+      var totalLength = id.length + dataHeader.length + data.length; // move past this tag entirely, we are not looking for it
+
+      i += totalLength;
+    }
+    return results;
+  }; // see https://www.matroska.org/technical/basics.html#block-structure
+
+  var NAL_TYPE_ONE = toUint8([0x00, 0x00, 0x00, 0x01]);
+  var NAL_TYPE_TWO = toUint8([0x00, 0x00, 0x01]);
+  var EMULATION_PREVENTION = toUint8([0x00, 0x00, 0x03]);
+  /**
+   * Expunge any "Emulation Prevention" bytes from a "Raw Byte
+   * Sequence Payload"
+   *
+   * @param data {Uint8Array} the bytes of a RBSP from a NAL
+   * unit
+   * @return {Uint8Array} the RBSP without any Emulation
+   * Prevention Bytes
+   */
+
+  var discardEmulationPreventionBytes = function discardEmulationPreventionBytes(bytes) {
+    var positions = [];
+    var i = 1; // Find all `Emulation Prevention Bytes`
+
+    while (i < bytes.length - 2) {
+      if (bytesMatch(bytes.subarray(i, i + 3), EMULATION_PREVENTION)) {
+        positions.push(i + 2);
+        i++;
+      }
+      i++;
+    } // If no Emulation Prevention Bytes were found just return the original
+    // array
+
+    if (positions.length === 0) {
+      return bytes;
+    } // Create a new array to hold the NAL unit data
+
+    var newLength = bytes.length - positions.length;
+    var newData = new Uint8Array(newLength);
+    var sourceIndex = 0;
+    for (i = 0; i < newLength; sourceIndex++, i++) {
+      if (sourceIndex === positions[0]) {
+        // Skip this byte
+        sourceIndex++; // Remove this position index
+
+        positions.shift();
+      }
+      newData[i] = bytes[sourceIndex];
+    }
+    return newData;
+  };
+  var findNal = function findNal(bytes, dataType, types, nalLimit) {
+    if (nalLimit === void 0) {
+      nalLimit = Infinity;
+    }
+    bytes = toUint8(bytes);
+    types = [].concat(types);
+    var i = 0;
+    var nalStart;
+    var nalsFound = 0; // keep searching until:
+    // we reach the end of bytes
+    // we reach the maximum number of nals they want to seach
+    // NOTE: that we disregard nalLimit when we have found the start
+    // of the nal we want so that we can find the end of the nal we want.
+
+    while (i < bytes.length && (nalsFound < nalLimit || nalStart)) {
+      var nalOffset = void 0;
+      if (bytesMatch(bytes.subarray(i), NAL_TYPE_ONE)) {
+        nalOffset = 4;
+      } else if (bytesMatch(bytes.subarray(i), NAL_TYPE_TWO)) {
+        nalOffset = 3;
+      } // we are unsynced,
+      // find the next nal unit
+
+      if (!nalOffset) {
+        i++;
+        continue;
+      }
+      nalsFound++;
+      if (nalStart) {
+        return discardEmulationPreventionBytes(bytes.subarray(nalStart, i));
+      }
+      var nalType = void 0;
+      if (dataType === 'h264') {
+        nalType = bytes[i + nalOffset] & 0x1f;
+      } else if (dataType === 'h265') {
+        nalType = bytes[i + nalOffset] >> 1 & 0x3f;
+      }
+      if (types.indexOf(nalType) !== -1) {
+        nalStart = i + nalOffset;
+      } // nal header is 1 length for h264, and 2 for h265
+
+      i += nalOffset + (dataType === 'h264' ? 1 : 2);
+    }
+    return bytes.subarray(0, 0);
+  };
+  var findH264Nal = function findH264Nal(bytes, type, nalLimit) {
+    return findNal(bytes, 'h264', type, nalLimit);
+  };
+  var findH265Nal = function findH265Nal(bytes, type, nalLimit) {
+    return findNal(bytes, 'h265', type, nalLimit);
+  };
+
+  var CONSTANTS = {
+    // "webm" string literal in hex
+    'webm': toUint8([0x77, 0x65, 0x62, 0x6d]),
+    // "matroska" string literal in hex
+    'matroska': toUint8([0x6d, 0x61, 0x74, 0x72, 0x6f, 0x73, 0x6b, 0x61]),
+    // "fLaC" string literal in hex
+    'flac': toUint8([0x66, 0x4c, 0x61, 0x43]),
+    // "OggS" string literal in hex
+    'ogg': toUint8([0x4f, 0x67, 0x67, 0x53]),
+    // ac-3 sync byte, also works for ec-3 as that is simply a codec
+    // of ac-3
+    'ac3': toUint8([0x0b, 0x77]),
+    // "RIFF" string literal in hex used for wav and avi
+    'riff': toUint8([0x52, 0x49, 0x46, 0x46]),
+    // "AVI" string literal in hex
+    'avi': toUint8([0x41, 0x56, 0x49]),
+    // "WAVE" string literal in hex
+    'wav': toUint8([0x57, 0x41, 0x56, 0x45]),
+    // "ftyp3g" string literal in hex
+    '3gp': toUint8([0x66, 0x74, 0x79, 0x70, 0x33, 0x67]),
+    // "ftyp" string literal in hex
+    'mp4': toUint8([0x66, 0x74, 0x79, 0x70]),
+    // "styp" string literal in hex
+    'fmp4': toUint8([0x73, 0x74, 0x79, 0x70]),
+    // "ftypqt" string literal in hex
+    'mov': toUint8([0x66, 0x74, 0x79, 0x70, 0x71, 0x74]),
+    // moov string literal in hex
+    'moov': toUint8([0x6D, 0x6F, 0x6F, 0x76]),
+    // moof string literal in hex
+    'moof': toUint8([0x6D, 0x6F, 0x6F, 0x66])
+  };
+  var _isLikely = {
+    aac: function aac(bytes) {
+      var offset = getId3Offset(bytes);
+      return bytesMatch(bytes, [0xFF, 0x10], {
+        offset: offset,
+        mask: [0xFF, 0x16]
+      });
+    },
+    mp3: function mp3(bytes) {
+      var offset = getId3Offset(bytes);
+      return bytesMatch(bytes, [0xFF, 0x02], {
+        offset: offset,
+        mask: [0xFF, 0x06]
+      });
+    },
+    webm: function webm(bytes) {
+      var docType = findEbml(bytes, [EBML_TAGS.EBML, EBML_TAGS.DocType])[0]; // check if DocType EBML tag is webm
+
+      return bytesMatch(docType, CONSTANTS.webm);
+    },
+    mkv: function mkv(bytes) {
+      var docType = findEbml(bytes, [EBML_TAGS.EBML, EBML_TAGS.DocType])[0]; // check if DocType EBML tag is matroska
+
+      return bytesMatch(docType, CONSTANTS.matroska);
+    },
+    mp4: function mp4(bytes) {
+      // if this file is another base media file format, it is not mp4
+      if (_isLikely['3gp'](bytes) || _isLikely.mov(bytes)) {
+        return false;
+      } // if this file starts with a ftyp or styp box its mp4
+
+      if (bytesMatch(bytes, CONSTANTS.mp4, {
+        offset: 4
+      }) || bytesMatch(bytes, CONSTANTS.fmp4, {
+        offset: 4
+      })) {
+        return true;
+      } // if this file starts with a moof/moov box its mp4
+
+      if (bytesMatch(bytes, CONSTANTS.moof, {
+        offset: 4
+      }) || bytesMatch(bytes, CONSTANTS.moov, {
+        offset: 4
+      })) {
+        return true;
+      }
+    },
+    mov: function mov(bytes) {
+      return bytesMatch(bytes, CONSTANTS.mov, {
+        offset: 4
+      });
+    },
+    '3gp': function gp(bytes) {
+      return bytesMatch(bytes, CONSTANTS['3gp'], {
+        offset: 4
+      });
+    },
+    ac3: function ac3(bytes) {
+      var offset = getId3Offset(bytes);
+      return bytesMatch(bytes, CONSTANTS.ac3, {
+        offset: offset
+      });
+    },
+    ts: function ts(bytes) {
+      if (bytes.length < 189 && bytes.length >= 1) {
+        return bytes[0] === 0x47;
+      }
+      var i = 0; // check the first 376 bytes for two matching sync bytes
+
+      while (i + 188 < bytes.length && i < 188) {
+        if (bytes[i] === 0x47 && bytes[i + 188] === 0x47) {
+          return true;
+        }
+        i += 1;
+      }
+      return false;
+    },
+    flac: function flac(bytes) {
+      var offset = getId3Offset(bytes);
+      return bytesMatch(bytes, CONSTANTS.flac, {
+        offset: offset
+      });
+    },
+    ogg: function ogg(bytes) {
+      return bytesMatch(bytes, CONSTANTS.ogg);
+    },
+    avi: function avi(bytes) {
+      return bytesMatch(bytes, CONSTANTS.riff) && bytesMatch(bytes, CONSTANTS.avi, {
+        offset: 8
+      });
+    },
+    wav: function wav(bytes) {
+      return bytesMatch(bytes, CONSTANTS.riff) && bytesMatch(bytes, CONSTANTS.wav, {
+        offset: 8
+      });
+    },
+    'h264': function h264(bytes) {
+      // find seq_parameter_set_rbsp
+      return findH264Nal(bytes, 7, 3).length;
+    },
+    'h265': function h265(bytes) {
+      // find video_parameter_set_rbsp or seq_parameter_set_rbsp
+      return findH265Nal(bytes, [32, 33], 3).length;
+    }
+  }; // get all the isLikely functions
+  // but make sure 'ts' is above h264 and h265
+  // but below everything else as it is the least specific
+
+  var isLikelyTypes = Object.keys(_isLikely) // remove ts, h264, h265
+  .filter(function (t) {
+    return t !== 'ts' && t !== 'h264' && t !== 'h265';
+  }) // add it back to the bottom
+  .concat(['ts', 'h264', 'h265']); // make sure we are dealing with uint8 data.
+
+  isLikelyTypes.forEach(function (type) {
+    var isLikelyFn = _isLikely[type];
+    _isLikely[type] = function (bytes) {
+      return isLikelyFn(toUint8(bytes));
+    };
+  }); // export after wrapping
+
+  var isLikely = _isLikely; // A useful list of file signatures can be found here
+  // https://en.wikipedia.org/wiki/List_of_file_signatures
+
+  var detectContainerForBytes = function detectContainerForBytes(bytes) {
+    bytes = toUint8(bytes);
+    for (var i = 0; i < isLikelyTypes.length; i++) {
+      var type = isLikelyTypes[i];
+      if (isLikely[type](bytes)) {
+        return type;
+      }
+    }
+    return '';
+  }; // fmp4 is not a container
+
+  var isLikelyFmp4MediaSegment = function isLikelyFmp4MediaSegment(bytes) {
+    return findBox(bytes, ['moof']).length > 0;
+  };
+
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+  var ONE_SECOND_IN_TS = 90000,
+    // 90kHz clock
+    secondsToVideoTs,
+    secondsToAudioTs,
+    videoTsToSeconds,
+    audioTsToSeconds,
+    audioTsToVideoTs,
+    videoTsToAudioTs,
+    metadataTsToSeconds;
+  secondsToVideoTs = function (seconds) {
+    return seconds * ONE_SECOND_IN_TS;
+  };
+  secondsToAudioTs = function (seconds, sampleRate) {
+    return seconds * sampleRate;
+  };
+  videoTsToSeconds = function (timestamp) {
+    return timestamp / ONE_SECOND_IN_TS;
+  };
+  audioTsToSeconds = function (timestamp, sampleRate) {
+    return timestamp / sampleRate;
+  };
+  audioTsToVideoTs = function (timestamp, sampleRate) {
+    return secondsToVideoTs(audioTsToSeconds(timestamp, sampleRate));
+  };
+  videoTsToAudioTs = function (timestamp, sampleRate) {
+    return secondsToAudioTs(videoTsToSeconds(timestamp), sampleRate);
+  };
+
+  /**
+   * Adjust ID3 tag or caption timing information by the timeline pts values
+   * (if keepOriginalTimestamps is false) and convert to seconds
+   */
+  metadataTsToSeconds = function (timestamp, timelineStartPts, keepOriginalTimestamps) {
+    return videoTsToSeconds(keepOriginalTimestamps ? timestamp : timestamp - timelineStartPts);
+  };
+  var clock = {
+    ONE_SECOND_IN_TS: ONE_SECOND_IN_TS,
+    secondsToVideoTs: secondsToVideoTs,
+    secondsToAudioTs: secondsToAudioTs,
+    videoTsToSeconds: videoTsToSeconds,
+    audioTsToSeconds: audioTsToSeconds,
+    audioTsToVideoTs: audioTsToVideoTs,
+    videoTsToAudioTs: videoTsToAudioTs,
+    metadataTsToSeconds: metadataTsToSeconds
+  };
+  var clock_1 = clock.ONE_SECOND_IN_TS;
+
+  /*! @name @videojs/http-streaming @version 3.12.1 @license Apache-2.0 */
+
+  /**
+   * @file resolve-url.js - Handling how URLs are resolved and manipulated
+   */
+  const resolveUrl = resolveUrl$1;
+  /**
+   * If the xhr request was redirected, return the responseURL, otherwise,
+   * return the original url.
+   *
+   * @api private
+   *
+   * @param  {string} url - an url being requested
+   * @param  {XMLHttpRequest} req - xhr request result
+   *
+   * @return {string}
+   */
+
+  const resolveManifestRedirect = (url, req) => {
+    // To understand how the responseURL below is set and generated:
+    // - https://fetch.spec.whatwg.org/#concept-response-url
+    // - https://fetch.spec.whatwg.org/#atomic-http-redirect-handling
+    if (req && req.responseURL && url !== req.responseURL) {
+      return req.responseURL;
+    }
+    return url;
+  };
+  const logger = source => {
+    if (videojs.log.debug) {
+      return videojs.log.debug.bind(videojs, 'VHS:', `${source} >`);
+    }
+    return function () {};
+  };
+
+  /**
+   * Provides a compatibility layer between Video.js 7 and 8 API changes for VHS.
+   */
+  /**
+   * Delegates to videojs.obj.merge (Video.js 8) or
+   * videojs.mergeOptions (Video.js 7).
+   */
+
+  function merge(...args) {
+    const context = videojs.obj || videojs;
+    const fn = context.merge || context.mergeOptions;
+    return fn.apply(context, args);
+  }
+  /**
+   * Delegates to videojs.time.createTimeRanges (Video.js 8) or
+   * videojs.createTimeRanges (Video.js 7).
+   */
+
+  function createTimeRanges(...args) {
+    const context = videojs.time || videojs;
+    const fn = context.createTimeRanges || context.createTimeRanges;
+    return fn.apply(context, args);
+  }
+  /**
+   * Converts provided buffered ranges to a descriptive string
+   *
+   * @param {TimeRanges} buffered - received buffered time ranges
+   *
+   * @return {string} - descriptive string
+   */
+
+  function bufferedRangesToString(buffered) {
+    if (buffered.length === 0) {
+      return 'Buffered Ranges are empty';
+    }
+    let bufferedRangesStr = 'Buffered Ranges: \n';
+    for (let i = 0; i < buffered.length; i++) {
+      const start = buffered.start(i);
+      const end = buffered.end(i);
+      bufferedRangesStr += `${start} --> ${end}. Duration (${end - start})\n`;
+    }
+    return bufferedRangesStr;
+  }
+
+  /**
+   * ranges
+   *
+   * Utilities for working with TimeRanges.
+   *
+   */
+
+  const TIME_FUDGE_FACTOR = 1 / 30; // Comparisons between time values such as current time and the end of the buffered range
+  // can be misleading because of precision differences or when the current media has poorly
+  // aligned audio and video, which can cause values to be slightly off from what you would
+  // expect. This value is what we consider to be safe to use in such comparisons to account
+  // for these scenarios.
+
+  const SAFE_TIME_DELTA = TIME_FUDGE_FACTOR * 3;
+  const filterRanges = function (timeRanges, predicate) {
+    const results = [];
+    let i;
+    if (timeRanges && timeRanges.length) {
+      // Search for ranges that match the predicate
+      for (i = 0; i < timeRanges.length; i++) {
+        if (predicate(timeRanges.start(i), timeRanges.end(i))) {
+          results.push([timeRanges.start(i), timeRanges.end(i)]);
+        }
+      }
+    }
+    return createTimeRanges(results);
+  };
+  /**
+   * Attempts to find the buffered TimeRange that contains the specified
+   * time.
+   *
+   * @param {TimeRanges} buffered - the TimeRanges object to query
+   * @param {number} time  - the time to filter on.
+   * @return {TimeRanges} a new TimeRanges object
+   */
+
+  const findRange = function (buffered, time) {
+    return filterRanges(buffered, function (start, end) {
+      return start - SAFE_TIME_DELTA <= time && end + SAFE_TIME_DELTA >= time;
+    });
+  };
+  /**
+   * Returns the TimeRanges that begin later than the specified time.
+   *
+   * @param {TimeRanges} timeRanges - the TimeRanges object to query
+   * @param {number} time - the time to filter on.
+   * @return {TimeRanges} a new TimeRanges object.
+   */
+
+  const findNextRange = function (timeRanges, time) {
+    return filterRanges(timeRanges, function (start) {
+      return start - TIME_FUDGE_FACTOR >= time;
+    });
+  };
+  /**
+   * Returns gaps within a list of TimeRanges
+   *
+   * @param {TimeRanges} buffered - the TimeRanges object
+   * @return {TimeRanges} a TimeRanges object of gaps
+   */
+
+  const findGaps = function (buffered) {
+    if (buffered.length < 2) {
+      return createTimeRanges();
+    }
+    const ranges = [];
+    for (let i = 1; i < buffered.length; i++) {
+      const start = buffered.end(i - 1);
+      const end = buffered.start(i);
+      ranges.push([start, end]);
+    }
+    return createTimeRanges(ranges);
+  };
+  /**
+   * Calculate the intersection of two TimeRanges
+   *
+   * @param {TimeRanges} bufferA
+   * @param {TimeRanges} bufferB
+   * @return {TimeRanges} The interesection of `bufferA` with `bufferB`
+   */
+
+  const bufferIntersection = function (bufferA, bufferB) {
+    let start = null;
+    let end = null;
+    let arity = 0;
+    const extents = [];
+    const ranges = [];
+    if (!bufferA || !bufferA.length || !bufferB || !bufferB.length) {
+      return createTimeRanges();
+    } // Handle the case where we have both buffers and create an
+    // intersection of the two
+
+    let count = bufferA.length; // A) Gather up all start and end times
+
+    while (count--) {
+      extents.push({
+        time: bufferA.start(count),
+        type: 'start'
+      });
+      extents.push({
+        time: bufferA.end(count),
+        type: 'end'
+      });
+    }
+    count = bufferB.length;
+    while (count--) {
+      extents.push({
+        time: bufferB.start(count),
+        type: 'start'
+      });
+      extents.push({
+        time: bufferB.end(count),
+        type: 'end'
+      });
+    } // B) Sort them by time
+
+    extents.sort(function (a, b) {
+      return a.time - b.time;
+    }); // C) Go along one by one incrementing arity for start and decrementing
+    //    arity for ends
+
+    for (count = 0; count < extents.length; count++) {
+      if (extents[count].type === 'start') {
+        arity++; // D) If arity is ever incremented to 2 we are entering an
+        //    overlapping range
+
+        if (arity === 2) {
+          start = extents[count].time;
+        }
+      } else if (extents[count].type === 'end') {
+        arity--; // E) If arity is ever decremented to 1 we leaving an
+        //    overlapping range
+
+        if (arity === 1) {
+          end = extents[count].time;
+        }
+      } // F) Record overlapping ranges
+
+      if (start !== null && end !== null) {
+        ranges.push([start, end]);
+        start = null;
+        end = null;
+      }
+    }
+    return createTimeRanges(ranges);
+  };
+  /**
+   * Gets a human readable string for a TimeRange
+   *
+   * @param {TimeRange} range
+   * @return {string} a human readable string
+   */
+
+  const printableRange = range => {
+    const strArr = [];
+    if (!range || !range.length) {
+      return '';
+    }
+    for (let i = 0; i < range.length; i++) {
+      strArr.push(range.start(i) + ' => ' + range.end(i));
+    }
+    return strArr.join(', ');
+  };
+  /**
+   * Calculates the amount of time left in seconds until the player hits the end of the
+   * buffer and causes a rebuffer
+   *
+   * @param {TimeRange} buffered
+   *        The state of the buffer
+   * @param {Numnber} currentTime
+   *        The current time of the player
+   * @param {number} playbackRate
+   *        The current playback rate of the player. Defaults to 1.
+   * @return {number}
+   *         Time until the player has to start rebuffering in seconds.
+   * @function timeUntilRebuffer
+   */
+
+  const timeUntilRebuffer = function (buffered, currentTime, playbackRate = 1) {
+    const bufferedEnd = buffered.length ? buffered.end(buffered.length - 1) : 0;
+    return (bufferedEnd - currentTime) / playbackRate;
+  };
+  /**
+   * Converts a TimeRanges object into an array representation
+   *
+   * @param {TimeRanges} timeRanges
+   * @return {Array}
+   */
+
+  const timeRangesToArray = timeRanges => {
+    const timeRangesList = [];
+    for (let i = 0; i < timeRanges.length; i++) {
+      timeRangesList.push({
+        start: timeRanges.start(i),
+        end: timeRanges.end(i)
+      });
+    }
+    return timeRangesList;
+  };
+  /**
+   * Determines if two time range objects are different.
+   *
+   * @param {TimeRange} a
+   *        the first time range object to check
+   *
+   * @param {TimeRange} b
+   *        the second time range object to check
+   *
+   * @return {Boolean}
+   *         Whether the time range objects differ
+   */
+
+  const isRangeDifferent = function (a, b) {
+    // same object
+    if (a === b) {
+      return false;
+    } // one or the other is undefined
+
+    if (!a && b || !b && a) {
+      return true;
+    } // length is different
+
+    if (a.length !== b.length) {
+      return true;
+    } // see if any start/end pair is different
+
+    for (let i = 0; i < a.length; i++) {
+      if (a.start(i) !== b.start(i) || a.end(i) !== b.end(i)) {
+        return true;
+      }
+    } // if the length and every pair is the same
+    // this is the same time range
+
+    return false;
+  };
+  const lastBufferedEnd = function (a) {
+    if (!a || !a.length || !a.end) {
+      return;
+    }
+    return a.end(a.length - 1);
+  };
+  /**
+   * A utility function to add up the amount of time in a timeRange
+   * after a specified startTime.
+   * ie:[[0, 10], [20, 40], [50, 60]] with a startTime 0
+   *     would return 40 as there are 40s seconds after 0 in the timeRange
+   *
+   * @param {TimeRange} range
+   *        The range to check against
+   * @param {number} startTime
+   *        The time in the time range that you should start counting from
+   *
+   * @return {number}
+   *          The number of seconds in the buffer passed the specified time.
+   */
+
+  const timeAheadOf = function (range, startTime) {
+    let time = 0;
+    if (!range || !range.length) {
+      return time;
+    }
+    for (let i = 0; i < range.length; i++) {
+      const start = range.start(i);
+      const end = range.end(i); // startTime is after this range entirely
+
+      if (startTime > end) {
+        continue;
+      } // startTime is within this range
+
+      if (startTime > start && startTime <= end) {
+        time += end - startTime;
+        continue;
+      } // startTime is before this range.
+
+      time += end - start;
+    }
+    return time;
+  };
+
+  /**
+   * @file playlist.js
+   *
+   * Playlist related utilities.
+   */
+  /**
+   * Get the duration of a segment, with special cases for
+   * llhls segments that do not have a duration yet.
+   *
+   * @param {Object} playlist
+   *        the playlist that the segment belongs to.
+   * @param {Object} segment
+   *        the segment to get a duration for.
+   *
+   * @return {number}
+   *          the segment duration
+   */
+
+  const segmentDurationWithParts = (playlist, segment) => {
+    // if this isn't a preload segment
+    // then we will have a segment duration that is accurate.
+    if (!segment.preload) {
+      return segment.duration;
+    } // otherwise we have to add up parts and preload hints
+    // to get an up to date duration.
+
+    let result = 0;
+    (segment.parts || []).forEach(function (p) {
+      result += p.duration;
+    }); // for preload hints we have to use partTargetDuration
+    // as they won't even have a duration yet.
+
+    (segment.preloadHints || []).forEach(function (p) {
+      if (p.type === 'PART') {
+        result += playlist.partTargetDuration;
+      }
+    });
+    return result;
+  };
+  /**
+   * A function to get a combined list of parts and segments with durations
+   * and indexes.
+   *
+   * @param {Playlist} playlist the playlist to get the list for.
+   *
+   * @return {Array} The part/segment list.
+   */
+
+  const getPartsAndSegments = playlist => (playlist.segments || []).reduce((acc, segment, si) => {
+    if (segment.parts) {
+      segment.parts.forEach(function (part, pi) {
+        acc.push({
+          duration: part.duration,
+          segmentIndex: si,
+          partIndex: pi,
+          part,
+          segment
+        });
+      });
+    } else {
+      acc.push({
+        duration: segment.duration,
+        segmentIndex: si,
+        partIndex: null,
+        segment,
+        part: null
+      });
+    }
+    return acc;
+  }, []);
+  const getLastParts = media => {
+    const lastSegment = media.segments && media.segments.length && media.segments[media.segments.length - 1];
+    return lastSegment && lastSegment.parts || [];
+  };
+  const getKnownPartCount = ({
+    preloadSegment
+  }) => {
+    if (!preloadSegment) {
+      return;
+    }
+    const {
+      parts,
+      preloadHints
+    } = preloadSegment;
+    let partCount = (preloadHints || []).reduce((count, hint) => count + (hint.type === 'PART' ? 1 : 0), 0);
+    partCount += parts && parts.length ? parts.length : 0;
+    return partCount;
+  };
+  /**
+   * Get the number of seconds to delay from the end of a
+   * live playlist.
+   *
+   * @param {Playlist} main the main playlist
+   * @param {Playlist} media the media playlist
+   * @return {number} the hold back in seconds.
+   */
+
+  const liveEdgeDelay = (main, media) => {
+    if (media.endList) {
+      return 0;
+    } // dash suggestedPresentationDelay trumps everything
+
+    if (main && main.suggestedPresentationDelay) {
+      return main.suggestedPresentationDelay;
+    }
+    const hasParts = getLastParts(media).length > 0; // look for "part" delays from ll-hls first
+
+    if (hasParts && media.serverControl && media.serverControl.partHoldBack) {
+      return media.serverControl.partHoldBack;
+    } else if (hasParts && media.partTargetDuration) {
+      return media.partTargetDuration * 3; // finally look for full segment delays
+    } else if (media.serverControl && media.serverControl.holdBack) {
+      return media.serverControl.holdBack;
+    } else if (media.targetDuration) {
+      return media.targetDuration * 3;
+    }
+    return 0;
+  };
+  /**
+   * walk backward until we find a duration we can use
+   * or return a failure
+   *
+   * @param {Playlist} playlist the playlist to walk through
+   * @param {Number} endSequence the mediaSequence to stop walking on
+   */
+
+  const backwardDuration = function (playlist, endSequence) {
+    let result = 0;
+    let i = endSequence - playlist.mediaSequence; // if a start time is available for segment immediately following
+    // the interval, use it
+
+    let segment = playlist.segments[i]; // Walk backward until we find the latest segment with timeline
+    // information that is earlier than endSequence
+
+    if (segment) {
+      if (typeof segment.start !== 'undefined') {
+        return {
+          result: segment.start,
+          precise: true
+        };
+      }
+      if (typeof segment.end !== 'undefined') {
+        return {
+          result: segment.end - segment.duration,
+          precise: true
+        };
+      }
+    }
+    while (i--) {
+      segment = playlist.segments[i];
+      if (typeof segment.end !== 'undefined') {
+        return {
+          result: result + segment.end,
+          precise: true
+        };
+      }
+      result += segmentDurationWithParts(playlist, segment);
+      if (typeof segment.start !== 'undefined') {
+        return {
+          result: result + segment.start,
+          precise: true
+        };
+      }
+    }
+    return {
+      result,
+      precise: false
+    };
+  };
+  /**
+   * walk forward until we find a duration we can use
+   * or return a failure
+   *
+   * @param {Playlist} playlist the playlist to walk through
+   * @param {number} endSequence the mediaSequence to stop walking on
+   */
+
+  const forwardDuration = function (playlist, endSequence) {
+    let result = 0;
+    let segment;
+    let i = endSequence - playlist.mediaSequence; // Walk forward until we find the earliest segment with timeline
+    // information
+
+    for (; i < playlist.segments.length; i++) {
+      segment = playlist.segments[i];
+      if (typeof segment.start !== 'undefined') {
+        return {
+          result: segment.start - result,
+          precise: true
+        };
+      }
+      result += segmentDurationWithParts(playlist, segment);
+      if (typeof segment.end !== 'undefined') {
+        return {
+          result: segment.end - result,
+          precise: true
+        };
+      }
+    } // indicate we didn't find a useful duration estimate
+
+    return {
+      result: -1,
+      precise: false
+    };
+  };
+  /**
+    * Calculate the media duration from the segments associated with a
+    * playlist. The duration of a subinterval of the available segments
+    * may be calculated by specifying an end index.
+    *
+    * @param {Object} playlist a media playlist object
+    * @param {number=} endSequence an exclusive upper boundary
+    * for the playlist.  Defaults to playlist length.
+    * @param {number} expired the amount of time that has dropped
+    * off the front of the playlist in a live scenario
+    * @return {number} the duration between the first available segment
+    * and end index.
+    */
+
+  const intervalDuration = function (playlist, endSequence, expired) {
+    if (typeof endSequence === 'undefined') {
+      endSequence = playlist.mediaSequence + playlist.segments.length;
+    }
+    if (endSequence < playlist.mediaSequence) {
+      return 0;
+    } // do a backward walk to estimate the duration
+
+    const backward = backwardDuration(playlist, endSequence);
+    if (backward.precise) {
+      // if we were able to base our duration estimate on timing
+      // information provided directly from the Media Source, return
+      // it
+      return backward.result;
+    } // walk forward to see if a precise duration estimate can be made
+    // that way
+
+    const forward = forwardDuration(playlist, endSequence);
+    if (forward.precise) {
+      // we found a segment that has been buffered and so it's
+      // position is known precisely
+      return forward.result;
+    } // return the less-precise, playlist-based duration estimate
+
+    return backward.result + expired;
+  };
+  /**
+    * Calculates the duration of a playlist. If a start and end index
+    * are specified, the duration will be for the subset of the media
+    * timeline between those two indices. The total duration for live
+    * playlists is always Infinity.
+    *
+    * @param {Object} playlist a media playlist object
+    * @param {number=} endSequence an exclusive upper
+    * boundary for the playlist. Defaults to the playlist media
+    * sequence number plus its length.
+    * @param {number=} expired the amount of time that has
+    * dropped off the front of the playlist in a live scenario
+    * @return {number} the duration between the start index and end
+    * index.
+    */
+
+  const duration = function (playlist, endSequence, expired) {
+    if (!playlist) {
+      return 0;
+    }
+    if (typeof expired !== 'number') {
+      expired = 0;
+    } // if a slice of the total duration is not requested, use
+    // playlist-level duration indicators when they're present
+
+    if (typeof endSequence === 'undefined') {
+      // if present, use the duration specified in the playlist
+      if (playlist.totalDuration) {
+        return playlist.totalDuration;
+      } // duration should be Infinity for live playlists
+
+      if (!playlist.endList) {
+        return window.Infinity;
+      }
+    } // calculate the total duration based on the segment durations
+
+    return intervalDuration(playlist, endSequence, expired);
+  };
+  /**
+    * Calculate the time between two indexes in the current playlist
+    * neight the start- nor the end-index need to be within the current
+    * playlist in which case, the targetDuration of the playlist is used
+    * to approximate the durations of the segments
+    *
+    * @param {Array} options.durationList list to iterate over for durations.
+    * @param {number} options.defaultDuration duration to use for elements before or after the durationList
+    * @param {number} options.startIndex partsAndSegments index to start
+    * @param {number} options.endIndex partsAndSegments index to end.
+    * @return {number} the number of seconds between startIndex and endIndex
+    */
+
+  const sumDurations = function ({
+    defaultDuration,
+    durationList,
+    startIndex,
+    endIndex
+  }) {
+    let durations = 0;
+    if (startIndex > endIndex) {
+      [startIndex, endIndex] = [endIndex, startIndex];
+    }
+    if (startIndex < 0) {
+      for (let i = startIndex; i < Math.min(0, endIndex); i++) {
+        durations += defaultDuration;
+      }
+      startIndex = 0;
+    }
+    for (let i = startIndex; i < endIndex; i++) {
+      durations += durationList[i].duration;
+    }
+    return durations;
+  };
+  /**
+   * Calculates the playlist end time
+   *
+   * @param {Object} playlist a media playlist object
+   * @param {number=} expired the amount of time that has
+   *                  dropped off the front of the playlist in a live scenario
+   * @param {boolean|false} useSafeLiveEnd a boolean value indicating whether or not the
+   *                        playlist end calculation should consider the safe live end
+   *                        (truncate the playlist end by three segments). This is normally
+   *                        used for calculating the end of the playlist's seekable range.
+   *                        This takes into account the value of liveEdgePadding.
+   *                        Setting liveEdgePadding to 0 is equivalent to setting this to false.
+   * @param {number} liveEdgePadding a number indicating how far from the end of the playlist we should be in seconds.
+   *                 If this is provided, it is used in the safe live end calculation.
+   *                 Setting useSafeLiveEnd=false or liveEdgePadding=0 are equivalent.
+   *                 Corresponds to suggestedPresentationDelay in DASH manifests.
+   * @return {number} the end time of playlist
+   * @function playlistEnd
+   */
+
+  const playlistEnd = function (playlist, expired, useSafeLiveEnd, liveEdgePadding) {
+    if (!playlist || !playlist.segments) {
+      return null;
+    }
+    if (playlist.endList) {
+      return duration(playlist);
+    }
+    if (expired === null) {
+      return null;
+    }
+    expired = expired || 0;
+    let lastSegmentEndTime = intervalDuration(playlist, playlist.mediaSequence + playlist.segments.length, expired);
+    if (useSafeLiveEnd) {
+      liveEdgePadding = typeof liveEdgePadding === 'number' ? liveEdgePadding : liveEdgeDelay(null, playlist);
+      lastSegmentEndTime -= liveEdgePadding;
+    } // don't return a time less than zero
+
+    return Math.max(0, lastSegmentEndTime);
+  };
+  /**
+    * Calculates the interval of time that is currently seekable in a
+    * playlist. The returned time ranges are relative to the earliest
+    * moment in the specified playlist that is still available. A full
+    * seekable implementation for live streams would need to offset
+    * these values by the duration of content that has expired from the
+    * stream.
+    *
+    * @param {Object} playlist a media playlist object
+    * dropped off the front of the playlist in a live scenario
+    * @param {number=} expired the amount of time that has
+    * dropped off the front of the playlist in a live scenario
+    * @param {number} liveEdgePadding how far from the end of the playlist we should be in seconds.
+    *        Corresponds to suggestedPresentationDelay in DASH manifests.
+    * @return {TimeRanges} the periods of time that are valid targets
+    * for seeking
+    */
+
+  const seekable = function (playlist, expired, liveEdgePadding) {
+    const useSafeLiveEnd = true;
+    const seekableStart = expired || 0;
+    let seekableEnd = playlistEnd(playlist, expired, useSafeLiveEnd, liveEdgePadding);
+    if (seekableEnd === null) {
+      return createTimeRanges();
+    } // Clamp seekable end since it can not be less than the seekable start
+
+    if (seekableEnd < seekableStart) {
+      seekableEnd = seekableStart;
+    }
+    return createTimeRanges(seekableStart, seekableEnd);
+  };
+  /**
+   * Determine the index and estimated starting time of the segment that
+   * contains a specified playback position in a media playlist.
+   *
+   * @param {Object} options.playlist the media playlist to query
+   * @param {number} options.currentTime The number of seconds since the earliest
+   * possible position to determine the containing segment for
+   * @param {number} options.startTime the time when the segment/part starts
+   * @param {number} options.startingSegmentIndex the segment index to start looking at.
+   * @param {number?} [options.startingPartIndex] the part index to look at within the segment.
+   *
+   * @return {Object} an object with partIndex, segmentIndex, and startTime.
+   */
+
+  const getMediaInfoForTime = function ({
+    playlist,
+    currentTime,
+    startingSegmentIndex,
+    startingPartIndex,
+    startTime,
+    exactManifestTimings
+  }) {
+    let time = currentTime - startTime;
+    const partsAndSegments = getPartsAndSegments(playlist);
+    let startIndex = 0;
+    for (let i = 0; i < partsAndSegments.length; i++) {
+      const partAndSegment = partsAndSegments[i];
+      if (startingSegmentIndex !== partAndSegment.segmentIndex) {
+        continue;
+      } // skip this if part index does not match.
+
+      if (typeof startingPartIndex === 'number' && typeof partAndSegment.partIndex === 'number' && startingPartIndex !== partAndSegment.partIndex) {
+        continue;
+      }
+      startIndex = i;
+      break;
+    }
+    if (time < 0) {
+      // Walk backward from startIndex in the playlist, adding durations
+      // until we find a segment that contains `time` and return it
+      if (startIndex > 0) {
+        for (let i = startIndex - 1; i >= 0; i--) {
+          const partAndSegment = partsAndSegments[i];
+          time += partAndSegment.duration;
+          if (exactManifestTimings) {
+            if (time < 0) {
+              continue;
+            }
+          } else if (time + TIME_FUDGE_FACTOR <= 0) {
+            continue;
+          }
+          return {
+            partIndex: partAndSegment.partIndex,
+            segmentIndex: partAndSegment.segmentIndex,
+            startTime: startTime - sumDurations({
+              defaultDuration: playlist.targetDuration,
+              durationList: partsAndSegments,
+              startIndex,
+              endIndex: i
+            })
+          };
+        }
+      } // We were unable to find a good segment within the playlist
+      // so select the first segment
+
+      return {
+        partIndex: partsAndSegments[0] && partsAndSegments[0].partIndex || null,
+        segmentIndex: partsAndSegments[0] && partsAndSegments[0].segmentIndex || 0,
+        startTime: currentTime
+      };
+    } // When startIndex is negative, we first walk forward to first segment
+    // adding target durations. If we "run out of time" before getting to
+    // the first segment, return the first segment
+
+    if (startIndex < 0) {
+      for (let i = startIndex; i < 0; i++) {
+        time -= playlist.targetDuration;
+        if (time < 0) {
+          return {
+            partIndex: partsAndSegments[0] && partsAndSegments[0].partIndex || null,
+            segmentIndex: partsAndSegments[0] && partsAndSegments[0].segmentIndex || 0,
+            startTime: currentTime
+          };
+        }
+      }
+      startIndex = 0;
+    } // Walk forward from startIndex in the playlist, subtracting durations
+    // until we find a segment that contains `time` and return it
+
+    for (let i = startIndex; i < partsAndSegments.length; i++) {
+      const partAndSegment = partsAndSegments[i];
+      time -= partAndSegment.duration;
+      const canUseFudgeFactor = partAndSegment.duration > TIME_FUDGE_FACTOR;
+      const isExactlyAtTheEnd = time === 0;
+      const isExtremelyCloseToTheEnd = canUseFudgeFactor && time + TIME_FUDGE_FACTOR >= 0;
+      if (isExactlyAtTheEnd || isExtremelyCloseToTheEnd) {
+        // 1) We are exactly at the end of the current segment.
+        // 2) We are extremely close to the end of the current segment (The difference is less than  1 / 30).
+        //    We may encounter this situation when
+        //    we don't have exact match between segment duration info in the manifest and the actual duration of the segment
+        //    For example:
+        //    We appended 3 segments 10 seconds each, meaning we should have 30 sec buffered,
+        //    but we the actual buffered is 29.99999
+        //
+        // In both cases:
+        // if we passed current time -> it means that we already played current segment
+        // if we passed buffered.end -> it means that this segment is already loaded and buffered
+        // we should select the next segment if we have one:
+        if (i !== partsAndSegments.length - 1) {
+          continue;
+        }
+      }
+      if (exactManifestTimings) {
+        if (time > 0) {
+          continue;
+        }
+      } else if (time - TIME_FUDGE_FACTOR >= 0) {
+        continue;
+      }
+      return {
+        partIndex: partAndSegment.partIndex,
+        segmentIndex: partAndSegment.segmentIndex,
+        startTime: startTime + sumDurations({
+          defaultDuration: playlist.targetDuration,
+          durationList: partsAndSegments,
+          startIndex,
+          endIndex: i
+        })
+      };
+    } // We are out of possible candidates so load the last one...
+
+    return {
+      segmentIndex: partsAndSegments[partsAndSegments.length - 1].segmentIndex,
+      partIndex: partsAndSegments[partsAndSegments.length - 1].partIndex,
+      startTime: currentTime
+    };
+  };
+  /**
+   * Check whether the playlist is excluded or not.
+   *
+   * @param {Object} playlist the media playlist object
+   * @return {boolean} whether the playlist is excluded or not
+   * @function isExcluded
+   */
+
+  const isExcluded = function (playlist) {
+    return playlist.excludeUntil && playlist.excludeUntil > Date.now();
+  };
+  /**
+   * Check whether the playlist is compatible with current playback configuration or has
+   * been excluded permanently for being incompatible.
+   *
+   * @param {Object} playlist the media playlist object
+   * @return {boolean} whether the playlist is incompatible or not
+   * @function isIncompatible
+   */
+
+  const isIncompatible = function (playlist) {
+    return playlist.excludeUntil && playlist.excludeUntil === Infinity;
+  };
+  /**
+   * Check whether the playlist is enabled or not.
+   *
+   * @param {Object} playlist the media playlist object
+   * @return {boolean} whether the playlist is enabled or not
+   * @function isEnabled
+   */
+
+  const isEnabled = function (playlist) {
+    const excluded = isExcluded(playlist);
+    return !playlist.disabled && !excluded;
+  };
+  /**
+   * Check whether the playlist has been manually disabled through the representations api.
+   *
+   * @param {Object} playlist the media playlist object
+   * @return {boolean} whether the playlist is disabled manually or not
+   * @function isDisabled
+   */
+
+  const isDisabled = function (playlist) {
+    return playlist.disabled;
+  };
+  /**
+   * Returns whether the current playlist is an AES encrypted HLS stream
+   *
+   * @return {boolean} true if it's an AES encrypted HLS stream
+   */
+
+  const isAes = function (media) {
+    for (let i = 0; i < media.segments.length; i++) {
+      if (media.segments[i].key) {
+        return true;
+      }
+    }
+    return false;
+  };
+  /**
+   * Checks if the playlist has a value for the specified attribute
+   *
+   * @param {string} attr
+   *        Attribute to check for
+   * @param {Object} playlist
+   *        The media playlist object
+   * @return {boolean}
+   *         Whether the playlist contains a value for the attribute or not
+   * @function hasAttribute
+   */
+
+  const hasAttribute = function (attr, playlist) {
+    return playlist.attributes && playlist.attributes[attr];
+  };
+  /**
+   * Estimates the time required to complete a segment download from the specified playlist
+   *
+   * @param {number} segmentDuration
+   *        Duration of requested segment
+   * @param {number} bandwidth
+   *        Current measured bandwidth of the player
+   * @param {Object} playlist
+   *        The media playlist object
+   * @param {number=} bytesReceived
+   *        Number of bytes already received for the request. Defaults to 0
+   * @return {number|NaN}
+   *         The estimated time to request the segment. NaN if bandwidth information for
+   *         the given playlist is unavailable
+   * @function estimateSegmentRequestTime
+   */
+
+  const estimateSegmentRequestTime = function (segmentDuration, bandwidth, playlist, bytesReceived = 0) {
+    if (!hasAttribute('BANDWIDTH', playlist)) {
+      return NaN;
+    }
+    const size = segmentDuration * playlist.attributes.BANDWIDTH;
+    return (size - bytesReceived * 8) / bandwidth;
+  };
+  /*
+   * Returns whether the current playlist is the lowest rendition
+   *
+   * @return {Boolean} true if on lowest rendition
+   */
+
+  const isLowestEnabledRendition = (main, media) => {
+    if (main.playlists.length === 1) {
+      return true;
+    }
+    const currentBandwidth = media.attributes.BANDWIDTH || Number.MAX_VALUE;
+    return main.playlists.filter(playlist => {
+      if (!isEnabled(playlist)) {
+        return false;
+      }
+      return (playlist.attributes.BANDWIDTH || 0) < currentBandwidth;
+    }).length === 0;
+  };
+  const playlistMatch = (a, b) => {
+    // both playlits are null
+    // or only one playlist is non-null
+    // no match
+    if (!a && !b || !a && b || a && !b) {
+      return false;
+    } // playlist objects are the same, match
+
+    if (a === b) {
+      return true;
+    } // first try to use id as it should be the most
+    // accurate
+
+    if (a.id && b.id && a.id === b.id) {
+      return true;
+    } // next try to use reslovedUri as it should be the
+    // second most accurate.
+
+    if (a.resolvedUri && b.resolvedUri && a.resolvedUri === b.resolvedUri) {
+      return true;
+    } // finally try to use uri as it should be accurate
+    // but might miss a few cases for relative uris
+
+    if (a.uri && b.uri && a.uri === b.uri) {
+      return true;
+    }
+    return false;
+  };
+  const someAudioVariant = function (main, callback) {
+    const AUDIO = main && main.mediaGroups && main.mediaGroups.AUDIO || {};
+    let found = false;
+    for (const groupName in AUDIO) {
+      for (const label in AUDIO[groupName]) {
+        found = callback(AUDIO[groupName][label]);
+        if (found) {
+          break;
+        }
+      }
+      if (found) {
+        break;
+      }
+    }
+    return !!found;
+  };
+  const isAudioOnly = main => {
+    // we are audio only if we have no main playlists but do
+    // have media group playlists.
+    if (!main || !main.playlists || !main.playlists.length) {
+      // without audio variants or playlists this
+      // is not an audio only main.
+      const found = someAudioVariant(main, variant => variant.playlists && variant.playlists.length || variant.uri);
+      return found;
+    } // if every playlist has only an audio codec it is audio only
+
+    for (let i = 0; i < main.playlists.length; i++) {
+      const playlist = main.playlists[i];
+      const CODECS = playlist.attributes && playlist.attributes.CODECS; // all codecs are audio, this is an audio playlist.
+
+      if (CODECS && CODECS.split(',').every(c => isAudioCodec(c))) {
+        continue;
+      } // playlist is in an audio group it is audio only
+
+      const found = someAudioVariant(main, variant => playlistMatch(playlist, variant));
+      if (found) {
+        continue;
+      } // if we make it here this playlist isn't audio and we
+      // are not audio only
+
+      return false;
+    } // if we make it past every playlist without returning, then
+    // this is an audio only playlist.
+
+    return true;
+  }; // exports
+
+  var Playlist = {
+    liveEdgeDelay,
+    duration,
+    seekable,
+    getMediaInfoForTime,
+    isEnabled,
+    isDisabled,
+    isExcluded,
+    isIncompatible,
+    playlistEnd,
+    isAes,
+    hasAttribute,
+    estimateSegmentRequestTime,
+    isLowestEnabledRendition,
+    isAudioOnly,
+    playlistMatch,
+    segmentDurationWithParts
+  };
+  const {
+    log
+  } = videojs;
+  const createPlaylistID = (index, uri) => {
+    return `${index}-${uri}`;
+  }; // default function for creating a group id
+
+  const groupID = (type, group, label) => {
+    return `placeholder-uri-${type}-${group}-${label}`;
+  };
+  /**
+   * Parses a given m3u8 playlist
+   *
+   * @param {Function} [onwarn]
+   *        a function to call when the parser triggers a warning event.
+   * @param {Function} [oninfo]
+   *        a function to call when the parser triggers an info event.
+   * @param {string} manifestString
+   *        The downloaded manifest string
+   * @param {Object[]} [customTagParsers]
+   *        An array of custom tag parsers for the m3u8-parser instance
+   * @param {Object[]} [customTagMappers]
+   *        An array of custom tag mappers for the m3u8-parser instance
+   * @param {boolean} [llhls]
+   *        Whether to keep ll-hls features in the manifest after parsing.
+   * @return {Object}
+   *         The manifest object
+   */
+
+  const parseManifest = ({
+    onwarn,
+    oninfo,
+    manifestString,
+    customTagParsers = [],
+    customTagMappers = [],
+    llhls
+  }) => {
+    const parser = new Parser();
+    if (onwarn) {
+      parser.on('warn', onwarn);
+    }
+    if (oninfo) {
+      parser.on('info', oninfo);
+    }
+    customTagParsers.forEach(customParser => parser.addParser(customParser));
+    customTagMappers.forEach(mapper => parser.addTagMapper(mapper));
+    parser.push(manifestString);
+    parser.end();
+    const manifest = parser.manifest; // remove llhls features from the parsed manifest
+    // if we don't want llhls support.
+
+    if (!llhls) {
+      ['preloadSegment', 'skip', 'serverControl', 'renditionReports', 'partInf', 'partTargetDuration'].forEach(function (k) {
+        if (manifest.hasOwnProperty(k)) {
+          delete manifest[k];
+        }
+      });
+      if (manifest.segments) {
+        manifest.segments.forEach(function (segment) {
+          ['parts', 'preloadHints'].forEach(function (k) {
+            if (segment.hasOwnProperty(k)) {
+              delete segment[k];
+            }
+          });
+        });
+      }
+    }
+    if (!manifest.targetDuration) {
+      let targetDuration = 10;
+      if (manifest.segments && manifest.segments.length) {
+        targetDuration = manifest.segments.reduce((acc, s) => Math.max(acc, s.duration), 0);
+      }
+      if (onwarn) {
+        onwarn({
+          message: `manifest has no targetDuration defaulting to ${targetDuration}`
+        });
+      }
+      manifest.targetDuration = targetDuration;
+    }
+    const parts = getLastParts(manifest);
+    if (parts.length && !manifest.partTargetDuration) {
+      const partTargetDuration = parts.reduce((acc, p) => Math.max(acc, p.duration), 0);
+      if (onwarn) {
+        onwarn({
+          message: `manifest has no partTargetDuration defaulting to ${partTargetDuration}`
+        });
+        log.error('LL-HLS manifest has parts but lacks required #EXT-X-PART-INF:PART-TARGET value. See https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis-09#section-4.4.3.7. Playback is not guaranteed.');
+      }
+      manifest.partTargetDuration = partTargetDuration;
+    }
+    return manifest;
+  };
+  /**
+   * Loops through all supported media groups in main and calls the provided
+   * callback for each group
+   *
+   * @param {Object} main
+   *        The parsed main manifest object
+   * @param {Function} callback
+   *        Callback to call for each media group
+   */
+
+  const forEachMediaGroup = (main, callback) => {
+    if (!main.mediaGroups) {
+      return;
+    }
+    ['AUDIO', 'SUBTITLES'].forEach(mediaType => {
+      if (!main.mediaGroups[mediaType]) {
+        return;
+      }
+      for (const groupKey in main.mediaGroups[mediaType]) {
+        for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+          const mediaProperties = main.mediaGroups[mediaType][groupKey][labelKey];
+          callback(mediaProperties, mediaType, groupKey, labelKey);
+        }
+      }
+    });
+  };
+  /**
+   * Adds properties and attributes to the playlist to keep consistent functionality for
+   * playlists throughout VHS.
+   *
+   * @param {Object} config
+   *        Arguments object
+   * @param {Object} config.playlist
+   *        The media playlist
+   * @param {string} [config.uri]
+   *        The uri to the media playlist (if media playlist is not from within a main
+   *        playlist)
+   * @param {string} id
+   *        ID to use for the playlist
+   */
+
+  const setupMediaPlaylist = ({
+    playlist,
+    uri,
+    id
+  }) => {
+    playlist.id = id;
+    playlist.playlistErrors_ = 0;
+    if (uri) {
+      // For media playlists, m3u8-parser does not have access to a URI, as HLS media
+      // playlists do not contain their own source URI, but one is needed for consistency in
+      // VHS.
+      playlist.uri = uri;
+    } // For HLS main playlists, even though certain attributes MUST be defined, the
+    // stream may still be played without them.
+    // For HLS media playlists, m3u8-parser does not attach an attributes object to the
+    // manifest.
+    //
+    // To avoid undefined reference errors through the project, and make the code easier
+    // to write/read, add an empty attributes object for these cases.
+
+    playlist.attributes = playlist.attributes || {};
+  };
+  /**
+   * Adds ID, resolvedUri, and attributes properties to each playlist of the main, where
+   * necessary. In addition, creates playlist IDs for each playlist and adds playlist ID to
+   * playlist references to the playlists array.
+   *
+   * @param {Object} main
+   *        The main playlist
+   */
+
+  const setupMediaPlaylists = main => {
+    let i = main.playlists.length;
+    while (i--) {
+      const playlist = main.playlists[i];
+      setupMediaPlaylist({
+        playlist,
+        id: createPlaylistID(i, playlist.uri)
+      });
+      playlist.resolvedUri = resolveUrl(main.uri, playlist.uri);
+      main.playlists[playlist.id] = playlist; // URI reference added for backwards compatibility
+
+      main.playlists[playlist.uri] = playlist; // Although the spec states an #EXT-X-STREAM-INF tag MUST have a BANDWIDTH attribute,
+      // the stream can be played without it. Although an attributes property may have been
+      // added to the playlist to prevent undefined references, issue a warning to fix the
+      // manifest.
+
+      if (!playlist.attributes.BANDWIDTH) {
+        log.warn('Invalid playlist STREAM-INF detected. Missing BANDWIDTH attribute.');
+      }
+    }
+  };
+  /**
+   * Adds resolvedUri properties to each media group.
+   *
+   * @param {Object} main
+   *        The main playlist
+   */
+
+  const resolveMediaGroupUris = main => {
+    forEachMediaGroup(main, properties => {
+      if (properties.uri) {
+        properties.resolvedUri = resolveUrl(main.uri, properties.uri);
+      }
+    });
+  };
+  /**
+   * Creates a main playlist wrapper to insert a sole media playlist into.
+   *
+   * @param {Object} media
+   *        Media playlist
+   * @param {string} uri
+   *        The media URI
+   *
+   * @return {Object}
+   *         main playlist
+   */
+
+  const mainForMedia = (media, uri) => {
+    const id = createPlaylistID(0, uri);
+    const main = {
+      mediaGroups: {
+        'AUDIO': {},
+        'VIDEO': {},
+        'CLOSED-CAPTIONS': {},
+        'SUBTITLES': {}
+      },
+      uri: window.location.href,
+      resolvedUri: window.location.href,
+      playlists: [{
+        uri,
+        id,
+        resolvedUri: uri,
+        // m3u8-parser does not attach an attributes property to media playlists so make
+        // sure that the property is attached to avoid undefined reference errors
+        attributes: {}
+      }]
+    }; // set up ID reference
+
+    main.playlists[id] = main.playlists[0]; // URI reference added for backwards compatibility
+
+    main.playlists[uri] = main.playlists[0];
+    return main;
+  };
+  /**
+   * Does an in-place update of the main manifest to add updated playlist URI references
+   * as well as other properties needed by VHS that aren't included by the parser.
+   *
+   * @param {Object} main
+   *        main manifest object
+   * @param {string} uri
+   *        The source URI
+   * @param {function} createGroupID
+   *        A function to determine how to create the groupID for mediaGroups
+   */
+
+  const addPropertiesToMain = (main, uri, createGroupID = groupID) => {
+    main.uri = uri;
+    for (let i = 0; i < main.playlists.length; i++) {
+      if (!main.playlists[i].uri) {
+        // Set up phony URIs for the playlists since playlists are referenced by their URIs
+        // throughout VHS, but some formats (e.g., DASH) don't have external URIs
+        // TODO: consider adding dummy URIs in mpd-parser
+        const phonyUri = `placeholder-uri-${i}`;
+        main.playlists[i].uri = phonyUri;
+      }
+    }
+    const audioOnlyMain = isAudioOnly(main);
+    forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+      // add a playlist array under properties
+      if (!properties.playlists || !properties.playlists.length) {
+        // If the manifest is audio only and this media group does not have a uri, check
+        // if the media group is located in the main list of playlists. If it is, don't add
+        // placeholder properties as it shouldn't be considered an alternate audio track.
+        if (audioOnlyMain && mediaType === 'AUDIO' && !properties.uri) {
+          for (let i = 0; i < main.playlists.length; i++) {
+            const p = main.playlists[i];
+            if (p.attributes && p.attributes.AUDIO && p.attributes.AUDIO === groupKey) {
+              return;
+            }
+          }
+        }
+        properties.playlists = [_extends$1({}, properties)];
+      }
+      properties.playlists.forEach(function (p, i) {
+        const groupId = createGroupID(mediaType, groupKey, labelKey, p);
+        const id = createPlaylistID(i, groupId);
+        if (p.uri) {
+          p.resolvedUri = p.resolvedUri || resolveUrl(main.uri, p.uri);
+        } else {
+          // DEPRECATED, this has been added to prevent a breaking change.
+          // previously we only ever had a single media group playlist, so
+          // we mark the first playlist uri without prepending the index as we used to
+          // ideally we would do all of the playlists the same way.
+          p.uri = i === 0 ? groupId : id; // don't resolve a placeholder uri to an absolute url, just use
+          // the placeholder again
+
+          p.resolvedUri = p.uri;
+        }
+        p.id = p.id || id; // add an empty attributes object, all playlists are
+        // expected to have this.
+
+        p.attributes = p.attributes || {}; // setup ID and URI references (URI for backwards compatibility)
+
+        main.playlists[p.id] = p;
+        main.playlists[p.uri] = p;
+      });
+    });
+    setupMediaPlaylists(main);
+    resolveMediaGroupUris(main);
+  };
+  class DateRangesStorage {
+    constructor() {
+      this.offset_ = null;
+      this.pendingDateRanges_ = new Map();
+      this.processedDateRanges_ = new Map();
+    }
+    setOffset(segments = []) {
+      // already set
+      if (this.offset_ !== null) {
+        return;
+      } // no segment to process
+
+      if (!segments.length) {
+        return;
+      }
+      const [firstSegment] = segments; // no program date time
+
+      if (firstSegment.programDateTime === undefined) {
+        return;
+      } // Set offset as ProgramDateTime for the very first segment of the very first playlist load:
+
+      this.offset_ = firstSegment.programDateTime / 1000;
+    }
+    setPendingDateRanges(dateRanges = []) {
+      if (!dateRanges.length) {
+        return;
+      }
+      const [dateRange] = dateRanges;
+      const startTime = dateRange.startDate.getTime();
+      this.trimProcessedDateRanges_(startTime);
+      this.pendingDateRanges_ = dateRanges.reduce((map, pendingDateRange) => {
+        map.set(pendingDateRange.id, pendingDateRange);
+        return map;
+      }, new Map());
+    }
+    processDateRange(dateRange) {
+      this.pendingDateRanges_.delete(dateRange.id);
+      this.processedDateRanges_.set(dateRange.id, dateRange);
+    }
+    getDateRangesToProcess() {
+      if (this.offset_ === null) {
+        return [];
+      }
+      const dateRangeClasses = {};
+      const dateRangesToProcess = [];
+      this.pendingDateRanges_.forEach((dateRange, id) => {
+        if (this.processedDateRanges_.has(id)) {
+          return;
+        }
+        dateRange.startTime = dateRange.startDate.getTime() / 1000 - this.offset_;
+        dateRange.processDateRange = () => this.processDateRange(dateRange);
+        dateRangesToProcess.push(dateRange);
+        if (!dateRange.class) {
+          return;
+        }
+        if (dateRangeClasses[dateRange.class]) {
+          const length = dateRangeClasses[dateRange.class].push(dateRange);
+          dateRange.classListIndex = length - 1;
+        } else {
+          dateRangeClasses[dateRange.class] = [dateRange];
+          dateRange.classListIndex = 0;
+        }
+      });
+      for (const dateRange of dateRangesToProcess) {
+        const classList = dateRangeClasses[dateRange.class] || [];
+        if (dateRange.endDate) {
+          dateRange.endTime = dateRange.endDate.getTime() / 1000 - this.offset_;
+        } else if (dateRange.endOnNext && classList[dateRange.classListIndex + 1]) {
+          dateRange.endTime = classList[dateRange.classListIndex + 1].startTime;
+        } else if (dateRange.duration) {
+          dateRange.endTime = dateRange.startTime + dateRange.duration;
+        } else if (dateRange.plannedDuration) {
+          dateRange.endTime = dateRange.startTime + dateRange.plannedDuration;
+        } else {
+          dateRange.endTime = dateRange.startTime;
+        }
+      }
+      return dateRangesToProcess;
+    }
+    trimProcessedDateRanges_(startTime) {
+      const copy = new Map(this.processedDateRanges_);
+      copy.forEach((dateRange, id) => {
+        if (dateRange.startDate.getTime() < startTime) {
+          this.processedDateRanges_.delete(id);
+        }
+      });
+    }
+  }
+  const {
+    EventTarget: EventTarget$1
+  } = videojs;
+  const addLLHLSQueryDirectives = (uri, media) => {
+    if (media.endList || !media.serverControl) {
+      return uri;
+    }
+    const parameters = {};
+    if (media.serverControl.canBlockReload) {
+      const {
+        preloadSegment
+      } = media; // next msn is a zero based value, length is not.
+
+      let nextMSN = media.mediaSequence + media.segments.length; // If preload segment has parts then it is likely
+      // that we are going to request a part of that preload segment.
+      // the logic below is used to determine that.
+
+      if (preloadSegment) {
+        const parts = preloadSegment.parts || []; // _HLS_part is a zero based index
+
+        const nextPart = getKnownPartCount(media) - 1; // if nextPart is > -1 and not equal to just the
+        // length of parts, then we know we had part preload hints
+        // and we need to add the _HLS_part= query
+
+        if (nextPart > -1 && nextPart !== parts.length - 1) {
+          // add existing parts to our preload hints
+          // eslint-disable-next-line
+          parameters._HLS_part = nextPart;
+        } // this if statement makes sure that we request the msn
+        // of the preload segment if:
+        // 1. the preload segment had parts (and was not yet a full segment)
+        //    but was added to our segments array
+        // 2. the preload segment had preload hints for parts that are not in
+        //    the manifest yet.
+        // in all other cases we want the segment after the preload segment
+        // which will be given by using media.segments.length because it is 1 based
+        // rather than 0 based.
+
+        if (nextPart > -1 || parts.length) {
+          nextMSN--;
+        }
+      } // add _HLS_msn= in front of any _HLS_part query
+      // eslint-disable-next-line
+
+      parameters._HLS_msn = nextMSN;
+    }
+    if (media.serverControl && media.serverControl.canSkipUntil) {
+      // add _HLS_skip= infront of all other queries.
+      // eslint-disable-next-line
+      parameters._HLS_skip = media.serverControl.canSkipDateranges ? 'v2' : 'YES';
+    }
+    if (Object.keys(parameters).length) {
+      const parsedUri = new window.URL(uri);
+      ['_HLS_skip', '_HLS_msn', '_HLS_part'].forEach(function (name) {
+        if (!parameters.hasOwnProperty(name)) {
+          return;
+        }
+        parsedUri.searchParams.set(name, parameters[name]);
+      });
+      uri = parsedUri.toString();
+    }
+    return uri;
+  };
+  /**
+   * Returns a new segment object with properties and
+   * the parts array merged.
+   *
+   * @param {Object} a the old segment
+   * @param {Object} b the new segment
+   *
+   * @return {Object} the merged segment
+   */
+
+  const updateSegment = (a, b) => {
+    if (!a) {
+      return b;
+    }
+    const result = merge(a, b); // if only the old segment has preload hints
+    // and the new one does not, remove preload hints.
+
+    if (a.preloadHints && !b.preloadHints) {
+      delete result.preloadHints;
+    } // if only the old segment has parts
+    // then the parts are no longer valid
+
+    if (a.parts && !b.parts) {
+      delete result.parts; // if both segments have parts
+      // copy part propeties from the old segment
+      // to the new one.
+    } else if (a.parts && b.parts) {
+      for (let i = 0; i < b.parts.length; i++) {
+        if (a.parts && a.parts[i]) {
+          result.parts[i] = merge(a.parts[i], b.parts[i]);
+        }
+      }
+    } // set skipped to false for segments that have
+    // have had information merged from the old segment.
+
+    if (!a.skipped && b.skipped) {
+      result.skipped = false;
+    } // set preload to false for segments that have
+    // had information added in the new segment.
+
+    if (a.preload && !b.preload) {
+      result.preload = false;
+    }
+    return result;
+  };
+  /**
+   * Returns a new array of segments that is the result of merging
+   * properties from an older list of segments onto an updated
+   * list. No properties on the updated playlist will be ovewritten.
+   *
+   * @param {Array} original the outdated list of segments
+   * @param {Array} update the updated list of segments
+   * @param {number=} offset the index of the first update
+   * segment in the original segment list. For non-live playlists,
+   * this should always be zero and does not need to be
+   * specified. For live playlists, it should be the difference
+   * between the media sequence numbers in the original and updated
+   * playlists.
+   * @return {Array} a list of merged segment objects
+   */
+
+  const updateSegments = (original, update, offset) => {
+    const oldSegments = original.slice();
+    const newSegments = update.slice();
+    offset = offset || 0;
+    const result = [];
+    let currentMap;
+    for (let newIndex = 0; newIndex < newSegments.length; newIndex++) {
+      const oldSegment = oldSegments[newIndex + offset];
+      const newSegment = newSegments[newIndex];
+      if (oldSegment) {
+        currentMap = oldSegment.map || currentMap;
+        result.push(updateSegment(oldSegment, newSegment));
+      } else {
+        // carry over map to new segment if it is missing
+        if (currentMap && !newSegment.map) {
+          newSegment.map = currentMap;
+        }
+        result.push(newSegment);
+      }
+    }
+    return result;
+  };
+  const resolveSegmentUris = (segment, baseUri) => {
+    // preloadSegment will not have a uri at all
+    // as the segment isn't actually in the manifest yet, only parts
+    if (!segment.resolvedUri && segment.uri) {
+      segment.resolvedUri = resolveUrl(baseUri, segment.uri);
+    }
+    if (segment.key && !segment.key.resolvedUri) {
+      segment.key.resolvedUri = resolveUrl(baseUri, segment.key.uri);
+    }
+    if (segment.map && !segment.map.resolvedUri) {
+      segment.map.resolvedUri = resolveUrl(baseUri, segment.map.uri);
+    }
+    if (segment.map && segment.map.key && !segment.map.key.resolvedUri) {
+      segment.map.key.resolvedUri = resolveUrl(baseUri, segment.map.key.uri);
+    }
+    if (segment.parts && segment.parts.length) {
+      segment.parts.forEach(p => {
+        if (p.resolvedUri) {
+          return;
+        }
+        p.resolvedUri = resolveUrl(baseUri, p.uri);
+      });
+    }
+    if (segment.preloadHints && segment.preloadHints.length) {
+      segment.preloadHints.forEach(p => {
+        if (p.resolvedUri) {
+          return;
+        }
+        p.resolvedUri = resolveUrl(baseUri, p.uri);
+      });
+    }
+  };
+  const getAllSegments = function (media) {
+    const segments = media.segments || [];
+    const preloadSegment = media.preloadSegment; // a preloadSegment with only preloadHints is not currently
+    // a usable segment, only include a preloadSegment that has
+    // parts.
+
+    if (preloadSegment && preloadSegment.parts && preloadSegment.parts.length) {
+      // if preloadHints has a MAP that means that the
+      // init segment is going to change. We cannot use any of the parts
+      // from this preload segment.
+      if (preloadSegment.preloadHints) {
+        for (let i = 0; i < preloadSegment.preloadHints.length; i++) {
+          if (preloadSegment.preloadHints[i].type === 'MAP') {
+            return segments;
+          }
+        }
+      } // set the duration for our preload segment to target duration.
+
+      preloadSegment.duration = media.targetDuration;
+      preloadSegment.preload = true;
+      segments.push(preloadSegment);
+    }
+    return segments;
+  }; // consider the playlist unchanged if the playlist object is the same or
+  // the number of segments is equal, the media sequence number is unchanged,
+  // and this playlist hasn't become the end of the playlist
+
+  const isPlaylistUnchanged = (a, b) => a === b || a.segments && b.segments && a.segments.length === b.segments.length && a.endList === b.endList && a.mediaSequence === b.mediaSequence && a.preloadSegment === b.preloadSegment;
+  /**
+    * Returns a new main playlist that is the result of merging an
+    * updated media playlist into the original version. If the
+    * updated media playlist does not match any of the playlist
+    * entries in the original main playlist, null is returned.
+    *
+    * @param {Object} main a parsed main M3U8 object
+    * @param {Object} media a parsed media M3U8 object
+    * @return {Object} a new object that represents the original
+    * main playlist with the updated media playlist merged in, or
+    * null if the merge produced no change.
+    */
+
+  const updateMain$1 = (main, newMedia, unchangedCheck = isPlaylistUnchanged) => {
+    const result = merge(main, {});
+    const oldMedia = result.playlists[newMedia.id];
+    if (!oldMedia) {
+      return null;
+    }
+    if (unchangedCheck(oldMedia, newMedia)) {
+      return null;
+    }
+    newMedia.segments = getAllSegments(newMedia);
+    const mergedPlaylist = merge(oldMedia, newMedia); // always use the new media's preload segment
+
+    if (mergedPlaylist.preloadSegment && !newMedia.preloadSegment) {
+      delete mergedPlaylist.preloadSegment;
+    } // if the update could overlap existing segment information, merge the two segment lists
+
+    if (oldMedia.segments) {
+      if (newMedia.skip) {
+        newMedia.segments = newMedia.segments || []; // add back in objects for skipped segments, so that we merge
+        // old properties into the new segments
+
+        for (let i = 0; i < newMedia.skip.skippedSegments; i++) {
+          newMedia.segments.unshift({
+            skipped: true
+          });
+        }
+      }
+      mergedPlaylist.segments = updateSegments(oldMedia.segments, newMedia.segments, newMedia.mediaSequence - oldMedia.mediaSequence);
+    } // resolve any segment URIs to prevent us from having to do it later
+
+    mergedPlaylist.segments.forEach(segment => {
+      resolveSegmentUris(segment, mergedPlaylist.resolvedUri);
+    }); // TODO Right now in the playlists array there are two references to each playlist, one
+    // that is referenced by index, and one by URI. The index reference may no longer be
+    // necessary.
+
+    for (let i = 0; i < result.playlists.length; i++) {
+      if (result.playlists[i].id === newMedia.id) {
+        result.playlists[i] = mergedPlaylist;
+      }
+    }
+    result.playlists[newMedia.id] = mergedPlaylist; // URI reference added for backwards compatibility
+
+    result.playlists[newMedia.uri] = mergedPlaylist; // update media group playlist references.
+
+    forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+      if (!properties.playlists) {
+        return;
+      }
+      for (let i = 0; i < properties.playlists.length; i++) {
+        if (newMedia.id === properties.playlists[i].id) {
+          properties.playlists[i] = mergedPlaylist;
+        }
+      }
+    });
+    return result;
+  };
+  /**
+   * Calculates the time to wait before refreshing a live playlist
+   *
+   * @param {Object} media
+   *        The current media
+   * @param {boolean} update
+   *        True if there were any updates from the last refresh, false otherwise
+   * @return {number}
+   *         The time in ms to wait before refreshing the live playlist
+   */
+
+  const refreshDelay = (media, update) => {
+    const segments = media.segments || [];
+    const lastSegment = segments[segments.length - 1];
+    const lastPart = lastSegment && lastSegment.parts && lastSegment.parts[lastSegment.parts.length - 1];
+    const lastDuration = lastPart && lastPart.duration || lastSegment && lastSegment.duration;
+    if (update && lastDuration) {
+      return lastDuration * 1000;
+    } // if the playlist is unchanged since the last reload or last segment duration
+    // cannot be determined, try again after half the target duration
+
+    return (media.partTargetDuration || media.targetDuration || 10) * 500;
+  };
+  /**
+   * Load a playlist from a remote location
+   *
+   * @class PlaylistLoader
+   * @extends Stream
+   * @param {string|Object} src url or object of manifest
+   * @param {boolean} withCredentials the withCredentials xhr option
+   * @class
+   */
+
+  class PlaylistLoader extends EventTarget$1 {
+    constructor(src, vhs, options = {}) {
+      super();
+      if (!src) {
+        throw new Error('A non-empty playlist URL or object is required');
+      }
+      this.logger_ = logger('PlaylistLoader');
+      const {
+        withCredentials = false
+      } = options;
+      this.src = src;
+      this.vhs_ = vhs;
+      this.withCredentials = withCredentials;
+      this.addDateRangesToTextTrack_ = options.addDateRangesToTextTrack;
+      const vhsOptions = vhs.options_;
+      this.customTagParsers = vhsOptions && vhsOptions.customTagParsers || [];
+      this.customTagMappers = vhsOptions && vhsOptions.customTagMappers || [];
+      this.llhls = vhsOptions && vhsOptions.llhls;
+      this.dateRangesStorage_ = new DateRangesStorage(); // initialize the loader state
+
+      this.state = 'HAVE_NOTHING'; // live playlist staleness timeout
+
+      this.handleMediaupdatetimeout_ = this.handleMediaupdatetimeout_.bind(this);
+      this.on('mediaupdatetimeout', this.handleMediaupdatetimeout_);
+      this.on('loadedplaylist', this.handleLoadedPlaylist_.bind(this));
+    }
+    handleLoadedPlaylist_() {
+      const mediaPlaylist = this.media();
+      if (!mediaPlaylist) {
+        return;
+      }
+      this.dateRangesStorage_.setOffset(mediaPlaylist.segments);
+      this.dateRangesStorage_.setPendingDateRanges(mediaPlaylist.dateRanges);
+      const availableDateRanges = this.dateRangesStorage_.getDateRangesToProcess();
+      if (!availableDateRanges.length || !this.addDateRangesToTextTrack_) {
+        return;
+      }
+      this.addDateRangesToTextTrack_(availableDateRanges);
+    }
+    handleMediaupdatetimeout_() {
+      if (this.state !== 'HAVE_METADATA') {
+        // only refresh the media playlist if no other activity is going on
+        return;
+      }
+      const media = this.media();
+      let uri = resolveUrl(this.main.uri, media.uri);
+      if (this.llhls) {
+        uri = addLLHLSQueryDirectives(uri, media);
+      }
+      this.state = 'HAVE_CURRENT_METADATA';
+      this.request = this.vhs_.xhr({
+        uri,
+        withCredentials: this.withCredentials,
+        requestType: 'hls-playlist'
+      }, (error, req) => {
+        // disposed
+        if (!this.request) {
+          return;
+        }
+        if (error) {
+          return this.playlistRequestError(this.request, this.media(), 'HAVE_METADATA');
+        }
+        this.haveMetadata({
+          playlistString: this.request.responseText,
+          url: this.media().uri,
+          id: this.media().id
+        });
+      });
+    }
+    playlistRequestError(xhr, playlist, startingState) {
+      const {
+        uri,
+        id
+      } = playlist; // any in-flight request is now finished
+
+      this.request = null;
+      if (startingState) {
+        this.state = startingState;
+      }
+      this.error = {
+        playlist: this.main.playlists[id],
+        status: xhr.status,
+        message: `HLS playlist request error at URL: ${uri}.`,
+        responseText: xhr.responseText,
+        code: xhr.status >= 500 ? 4 : 2,
+        metadata: {
+          errorType: videojs.Error.HlsPlaylistRequestError
+        }
+      };
+      this.trigger('error');
+    }
+    parseManifest_({
+      url,
+      manifestString
+    }) {
+      return parseManifest({
+        onwarn: ({
+          message
+        }) => this.logger_(`m3u8-parser warn for ${url}: ${message}`),
+        oninfo: ({
+          message
+        }) => this.logger_(`m3u8-parser info for ${url}: ${message}`),
+        manifestString,
+        customTagParsers: this.customTagParsers,
+        customTagMappers: this.customTagMappers,
+        llhls: this.llhls
+      });
+    }
+    /**
+     * Update the playlist loader's state in response to a new or updated playlist.
+     *
+     * @param {string} [playlistString]
+     *        Playlist string (if playlistObject is not provided)
+     * @param {Object} [playlistObject]
+     *        Playlist object (if playlistString is not provided)
+     * @param {string} url
+     *        URL of playlist
+     * @param {string} id
+     *        ID to use for playlist
+     */
+
+    haveMetadata({
+      playlistString,
+      playlistObject,
+      url,
+      id
+    }) {
+      // any in-flight request is now finished
+      this.request = null;
+      this.state = 'HAVE_METADATA';
+      const playlist = playlistObject || this.parseManifest_({
+        url,
+        manifestString: playlistString
+      });
+      playlist.lastRequest = Date.now();
+      setupMediaPlaylist({
+        playlist,
+        uri: url,
+        id
+      }); // merge this playlist into the main manifest
+
+      const update = updateMain$1(this.main, playlist);
+      this.targetDuration = playlist.partTargetDuration || playlist.targetDuration;
+      this.pendingMedia_ = null;
+      if (update) {
+        this.main = update;
+        this.media_ = this.main.playlists[id];
+      } else {
+        this.trigger('playlistunchanged');
+      }
+      this.updateMediaUpdateTimeout_(refreshDelay(this.media(), !!update));
+      this.trigger('loadedplaylist');
+    }
+    /**
+      * Abort any outstanding work and clean up.
+      */
+
+    dispose() {
+      this.trigger('dispose');
+      this.stopRequest();
+      window.clearTimeout(this.mediaUpdateTimeout);
+      window.clearTimeout(this.finalRenditionTimeout);
+      this.dateRangesStorage_ = new DateRangesStorage();
+      this.off();
+    }
+    stopRequest() {
+      if (this.request) {
+        const oldRequest = this.request;
+        this.request = null;
+        oldRequest.onreadystatechange = null;
+        oldRequest.abort();
+      }
+    }
+    /**
+      * When called without any arguments, returns the currently
+      * active media playlist. When called with a single argument,
+      * triggers the playlist loader to asynchronously switch to the
+      * specified media playlist. Calling this method while the
+      * loader is in the HAVE_NOTHING causes an error to be emitted
+      * but otherwise has no effect.
+      *
+      * @param {Object=} playlist the parsed media playlist
+      * object to switch to
+      * @param {boolean=} shouldDelay whether we should delay the request by half target duration
+      *
+      * @return {Playlist} the current loaded media
+      */
+
+    media(playlist, shouldDelay) {
+      // getter
+      if (!playlist) {
+        return this.media_;
+      } // setter
+
+      if (this.state === 'HAVE_NOTHING') {
+        throw new Error('Cannot switch media playlist from ' + this.state);
+      } // find the playlist object if the target playlist has been
+      // specified by URI
+
+      if (typeof playlist === 'string') {
+        if (!this.main.playlists[playlist]) {
+          throw new Error('Unknown playlist URI: ' + playlist);
+        }
+        playlist = this.main.playlists[playlist];
+      }
+      window.clearTimeout(this.finalRenditionTimeout);
+      if (shouldDelay) {
+        const delay = (playlist.partTargetDuration || playlist.targetDuration) / 2 * 1000 || 5 * 1000;
+        this.finalRenditionTimeout = window.setTimeout(this.media.bind(this, playlist, false), delay);
+        return;
+      }
+      const startingState = this.state;
+      const mediaChange = !this.media_ || playlist.id !== this.media_.id;
+      const mainPlaylistRef = this.main.playlists[playlist.id]; // switch to fully loaded playlists immediately
+
+      if (mainPlaylistRef && mainPlaylistRef.endList ||
+      // handle the case of a playlist object (e.g., if using vhs-json with a resolved
+      // media playlist or, for the case of demuxed audio, a resolved audio media group)
+      playlist.endList && playlist.segments.length) {
+        // abort outstanding playlist requests
+        if (this.request) {
+          this.request.onreadystatechange = null;
+          this.request.abort();
+          this.request = null;
+        }
+        this.state = 'HAVE_METADATA';
+        this.media_ = playlist; // trigger media change if the active media has been updated
+
+        if (mediaChange) {
+          this.trigger('mediachanging');
+          if (startingState === 'HAVE_MAIN_MANIFEST') {
+            // The initial playlist was a main manifest, and the first media selected was
+            // also provided (in the form of a resolved playlist object) as part of the
+            // source object (rather than just a URL). Therefore, since the media playlist
+            // doesn't need to be requested, loadedmetadata won't trigger as part of the
+            // normal flow, and needs an explicit trigger here.
+            this.trigger('loadedmetadata');
+          } else {
+            this.trigger('mediachange');
+          }
+        }
+        return;
+      } // We update/set the timeout here so that live playlists
+      // that are not a media change will "start" the loader as expected.
+      // We expect that this function will start the media update timeout
+      // cycle again. This also prevents a playlist switch failure from
+      // causing us to stall during live.
+
+      this.updateMediaUpdateTimeout_(refreshDelay(playlist, true)); // switching to the active playlist is a no-op
+
+      if (!mediaChange) {
+        return;
+      }
+      this.state = 'SWITCHING_MEDIA'; // there is already an outstanding playlist request
+
+      if (this.request) {
+        if (playlist.resolvedUri === this.request.url) {
+          // requesting to switch to the same playlist multiple times
+          // has no effect after the first
+          return;
+        }
+        this.request.onreadystatechange = null;
+        this.request.abort();
+        this.request = null;
+      } // request the new playlist
+
+      if (this.media_) {
+        this.trigger('mediachanging');
+      }
+      this.pendingMedia_ = playlist;
+      this.request = this.vhs_.xhr({
+        uri: playlist.resolvedUri,
+        withCredentials: this.withCredentials,
+        requestType: 'hls-playlist'
+      }, (error, req) => {
+        // disposed
+        if (!this.request) {
+          return;
+        }
+        playlist.lastRequest = Date.now();
+        playlist.resolvedUri = resolveManifestRedirect(playlist.resolvedUri, req);
+        if (error) {
+          return this.playlistRequestError(this.request, playlist, startingState);
+        }
+        this.haveMetadata({
+          playlistString: req.responseText,
+          url: playlist.uri,
+          id: playlist.id
+        }); // fire loadedmetadata the first time a media playlist is loaded
+
+        if (startingState === 'HAVE_MAIN_MANIFEST') {
+          this.trigger('loadedmetadata');
+        } else {
+          this.trigger('mediachange');
+        }
+      });
+    }
+    /**
+     * pause loading of the playlist
+     */
+
+    pause() {
+      if (this.mediaUpdateTimeout) {
+        window.clearTimeout(this.mediaUpdateTimeout);
+        this.mediaUpdateTimeout = null;
+      }
+      this.stopRequest();
+      if (this.state === 'HAVE_NOTHING') {
+        // If we pause the loader before any data has been retrieved, its as if we never
+        // started, so reset to an unstarted state.
+        this.started = false;
+      } // Need to restore state now that no activity is happening
+
+      if (this.state === 'SWITCHING_MEDIA') {
+        // if the loader was in the process of switching media, it should either return to
+        // HAVE_MAIN_MANIFEST or HAVE_METADATA depending on if the loader has loaded a media
+        // playlist yet. This is determined by the existence of loader.media_
+        if (this.media_) {
+          this.state = 'HAVE_METADATA';
+        } else {
+          this.state = 'HAVE_MAIN_MANIFEST';
+        }
+      } else if (this.state === 'HAVE_CURRENT_METADATA') {
+        this.state = 'HAVE_METADATA';
+      }
+    }
+    /**
+     * start loading of the playlist
+     */
+
+    load(shouldDelay) {
+      if (this.mediaUpdateTimeout) {
+        window.clearTimeout(this.mediaUpdateTimeout);
+        this.mediaUpdateTimeout = null;
+      }
+      const media = this.media();
+      if (shouldDelay) {
+        const delay = media ? (media.partTargetDuration || media.targetDuration) / 2 * 1000 : 5 * 1000;
+        this.mediaUpdateTimeout = window.setTimeout(() => {
+          this.mediaUpdateTimeout = null;
+          this.load();
+        }, delay);
+        return;
+      }
+      if (!this.started) {
+        this.start();
+        return;
+      }
+      if (media && !media.endList) {
+        this.trigger('mediaupdatetimeout');
+      } else {
+        this.trigger('loadedplaylist');
+      }
+    }
+    updateMediaUpdateTimeout_(delay) {
+      if (this.mediaUpdateTimeout) {
+        window.clearTimeout(this.mediaUpdateTimeout);
+        this.mediaUpdateTimeout = null;
+      } // we only have use mediaupdatetimeout for live playlists.
+
+      if (!this.media() || this.media().endList) {
+        return;
+      }
+      this.mediaUpdateTimeout = window.setTimeout(() => {
+        this.mediaUpdateTimeout = null;
+        this.trigger('mediaupdatetimeout');
+        this.updateMediaUpdateTimeout_(delay);
+      }, delay);
+    }
+    /**
+     * start loading of the playlist
+     */
+
+    start() {
+      this.started = true;
+      if (typeof this.src === 'object') {
+        // in the case of an entirely constructed manifest object (meaning there's no actual
+        // manifest on a server), default the uri to the page's href
+        if (!this.src.uri) {
+          this.src.uri = window.location.href;
+        } // resolvedUri is added on internally after the initial request. Since there's no
+        // request for pre-resolved manifests, add on resolvedUri here.
+
+        this.src.resolvedUri = this.src.uri; // Since a manifest object was passed in as the source (instead of a URL), the first
+        // request can be skipped (since the top level of the manifest, at a minimum, is
+        // already available as a parsed manifest object). However, if the manifest object
+        // represents a main playlist, some media playlists may need to be resolved before
+        // the starting segment list is available. Therefore, go directly to setup of the
+        // initial playlist, and let the normal flow continue from there.
+        //
+        // Note that the call to setup is asynchronous, as other sections of VHS may assume
+        // that the first request is asynchronous.
+
+        setTimeout(() => {
+          this.setupInitialPlaylist(this.src);
+        }, 0);
+        return;
+      } // request the specified URL
+
+      this.request = this.vhs_.xhr({
+        uri: this.src,
+        withCredentials: this.withCredentials,
+        requestType: 'hls-playlist'
+      }, (error, req) => {
+        // disposed
+        if (!this.request) {
+          return;
+        } // clear the loader's request reference
+
+        this.request = null;
+        if (error) {
+          this.error = {
+            status: req.status,
+            message: `HLS playlist request error at URL: ${this.src}.`,
+            responseText: req.responseText,
+            // MEDIA_ERR_NETWORK
+            code: 2,
+            metadata: {
+              errorType: videojs.Error.HlsPlaylistRequestError
+            }
+          };
+          if (this.state === 'HAVE_NOTHING') {
+            this.started = false;
+          }
+          return this.trigger('error');
+        }
+        this.src = resolveManifestRedirect(this.src, req);
+        const manifest = this.parseManifest_({
+          manifestString: req.responseText,
+          url: this.src
+        });
+        this.setupInitialPlaylist(manifest);
+      });
+    }
+    srcUri() {
+      return typeof this.src === 'string' ? this.src : this.src.uri;
+    }
+    /**
+     * Given a manifest object that's either a main or media playlist, trigger the proper
+     * events and set the state of the playlist loader.
+     *
+     * If the manifest object represents a main playlist, `loadedplaylist` will be
+     * triggered to allow listeners to select a playlist. If none is selected, the loader
+     * will default to the first one in the playlists array.
+     *
+     * If the manifest object represents a media playlist, `loadedplaylist` will be
+     * triggered followed by `loadedmetadata`, as the only available playlist is loaded.
+     *
+     * In the case of a media playlist, a main playlist object wrapper with one playlist
+     * will be created so that all logic can handle playlists in the same fashion (as an
+     * assumed manifest object schema).
+     *
+     * @param {Object} manifest
+     *        The parsed manifest object
+     */
+
+    setupInitialPlaylist(manifest) {
+      this.state = 'HAVE_MAIN_MANIFEST';
+      if (manifest.playlists) {
+        this.main = manifest;
+        addPropertiesToMain(this.main, this.srcUri()); // If the initial main playlist has playlists wtih segments already resolved,
+        // then resolve URIs in advance, as they are usually done after a playlist request,
+        // which may not happen if the playlist is resolved.
+
+        manifest.playlists.forEach(playlist => {
+          playlist.segments = getAllSegments(playlist);
+          playlist.segments.forEach(segment => {
+            resolveSegmentUris(segment, playlist.resolvedUri);
+          });
+        });
+        this.trigger('loadedplaylist');
+        if (!this.request) {
+          // no media playlist was specifically selected so start
+          // from the first listed one
+          this.media(this.main.playlists[0]);
+        }
+        return;
+      } // In order to support media playlists passed in as vhs-json, the case where the uri
+      // is not provided as part of the manifest should be considered, and an appropriate
+      // default used.
+
+      const uri = this.srcUri() || window.location.href;
+      this.main = mainForMedia(manifest, uri);
+      this.haveMetadata({
+        playlistObject: manifest,
+        url: uri,
+        id: this.main.playlists[0].id
+      });
+      this.trigger('loadedmetadata');
+    }
+    /**
+     * Updates or deletes a preexisting pathway clone.
+     * Ensures that all playlists related to the old pathway clone are
+     * either updated or deleted.
+     *
+     * @param {Object} clone On update, the pathway clone object for the newly updated pathway clone.
+     *        On delete, the old pathway clone object to be deleted.
+     * @param {boolean} isUpdate True if the pathway is to be updated,
+     *        false if it is meant to be deleted.
+     */
+
+    updateOrDeleteClone(clone, isUpdate) {
+      const main = this.main;
+      const pathway = clone.ID;
+      let i = main.playlists.length; // Iterate backwards through the playlist so we can remove playlists if necessary.
+
+      while (i--) {
+        const p = main.playlists[i];
+        if (p.attributes['PATHWAY-ID'] === pathway) {
+          const oldPlaylistUri = p.resolvedUri;
+          const oldPlaylistId = p.id; // update the indexed playlist and add new playlists by ID and URI
+
+          if (isUpdate) {
+            const newPlaylistUri = this.createCloneURI_(p.resolvedUri, clone);
+            const newPlaylistId = createPlaylistID(pathway, newPlaylistUri);
+            const attributes = this.createCloneAttributes_(pathway, p.attributes);
+            const updatedPlaylist = this.createClonePlaylist_(p, newPlaylistId, clone, attributes);
+            main.playlists[i] = updatedPlaylist;
+            main.playlists[newPlaylistId] = updatedPlaylist;
+            main.playlists[newPlaylistUri] = updatedPlaylist;
+          } else {
+            // Remove the indexed playlist.
+            main.playlists.splice(i, 1);
+          } // Remove playlists by the old ID and URI.
+
+          delete main.playlists[oldPlaylistId];
+          delete main.playlists[oldPlaylistUri];
+        }
+      }
+      this.updateOrDeleteCloneMedia(clone, isUpdate);
+    }
+    /**
+     * Updates or deletes media data based on the pathway clone object.
+     * Due to the complexity of the media groups and playlists, in all cases
+     * we remove all of the old media groups and playlists.
+     * On updates, we then create new media groups and playlists based on the
+     * new pathway clone object.
+     *
+     * @param {Object} clone The pathway clone object for the newly updated pathway clone.
+     * @param {boolean} isUpdate True if the pathway is to be updated,
+     *        false if it is meant to be deleted.
+     */
+
+    updateOrDeleteCloneMedia(clone, isUpdate) {
+      const main = this.main;
+      const id = clone.ID;
+      ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+        if (!main.mediaGroups[mediaType] || !main.mediaGroups[mediaType][id]) {
+          return;
+        }
+        for (const groupKey in main.mediaGroups[mediaType]) {
+          // Remove all media playlists for the media group for this pathway clone.
+          if (groupKey === id) {
+            for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+              const oldMedia = main.mediaGroups[mediaType][groupKey][labelKey];
+              oldMedia.playlists.forEach((p, i) => {
+                const oldMediaPlaylist = main.playlists[p.id];
+                const oldPlaylistId = oldMediaPlaylist.id;
+                const oldPlaylistUri = oldMediaPlaylist.resolvedUri;
+                delete main.playlists[oldPlaylistId];
+                delete main.playlists[oldPlaylistUri];
+              });
+            } // Delete the old media group.
+
+            delete main.mediaGroups[mediaType][groupKey];
+          }
+        }
+      }); // Create the new media groups and playlists if there is an update.
+
+      if (isUpdate) {
+        this.createClonedMediaGroups_(clone);
+      }
+    }
+    /**
+     * Given a pathway clone object, clones all necessary playlists.
+     *
+     * @param {Object} clone The pathway clone object.
+     * @param {Object} basePlaylist The original playlist to clone from.
+     */
+
+    addClonePathway(clone, basePlaylist = {}) {
+      const main = this.main;
+      const index = main.playlists.length;
+      const uri = this.createCloneURI_(basePlaylist.resolvedUri, clone);
+      const playlistId = createPlaylistID(clone.ID, uri);
+      const attributes = this.createCloneAttributes_(clone.ID, basePlaylist.attributes);
+      const playlist = this.createClonePlaylist_(basePlaylist, playlistId, clone, attributes);
+      main.playlists[index] = playlist; // add playlist by ID and URI
+
+      main.playlists[playlistId] = playlist;
+      main.playlists[uri] = playlist;
+      this.createClonedMediaGroups_(clone);
+    }
+    /**
+     * Given a pathway clone object we create clones of all media.
+     * In this function, all necessary information and updated playlists
+     * are added to the `mediaGroup` object.
+     * Playlists are also added to the `playlists` array so the media groups
+     * will be properly linked.
+     *
+     * @param {Object} clone The pathway clone object.
+     */
+
+    createClonedMediaGroups_(clone) {
+      const id = clone.ID;
+      const baseID = clone['BASE-ID'];
+      const main = this.main;
+      ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+        // If the media type doesn't exist, or there is already a clone, skip
+        // to the next media type.
+        if (!main.mediaGroups[mediaType] || main.mediaGroups[mediaType][id]) {
+          return;
+        }
+        for (const groupKey in main.mediaGroups[mediaType]) {
+          if (groupKey === baseID) {
+            // Create the group.
+            main.mediaGroups[mediaType][id] = {};
+          } else {
+            // There is no need to iterate over label keys in this case.
+            continue;
+          }
+          for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+            const oldMedia = main.mediaGroups[mediaType][groupKey][labelKey];
+            main.mediaGroups[mediaType][id][labelKey] = _extends$1({}, oldMedia);
+            const newMedia = main.mediaGroups[mediaType][id][labelKey]; // update URIs on the media
+
+            const newUri = this.createCloneURI_(oldMedia.resolvedUri, clone);
+            newMedia.resolvedUri = newUri;
+            newMedia.uri = newUri; // Reset playlists in the new media group.
+
+            newMedia.playlists = []; // Create new playlists in the newly cloned media group.
+
+            oldMedia.playlists.forEach((p, i) => {
+              const oldMediaPlaylist = main.playlists[p.id];
+              const group = groupID(mediaType, id, labelKey);
+              const newPlaylistID = createPlaylistID(id, group); // Check to see if it already exists
+
+              if (oldMediaPlaylist && !main.playlists[newPlaylistID]) {
+                const newMediaPlaylist = this.createClonePlaylist_(oldMediaPlaylist, newPlaylistID, clone);
+                const newPlaylistUri = newMediaPlaylist.resolvedUri;
+                main.playlists[newPlaylistID] = newMediaPlaylist;
+                main.playlists[newPlaylistUri] = newMediaPlaylist;
+              }
+              newMedia.playlists[i] = this.createClonePlaylist_(p, newPlaylistID, clone);
+            });
+          }
+        }
+      });
+    }
+    /**
+     * Using the original playlist to be cloned, and the pathway clone object
+     * information, we create a new playlist.
+     *
+     * @param {Object} basePlaylist  The original playlist to be cloned from.
+     * @param {string} id The desired id of the newly cloned playlist.
+     * @param {Object} clone The pathway clone object.
+     * @param {Object} attributes An optional object to populate the `attributes` property in the playlist.
+     *
+     * @return {Object} The combined cloned playlist.
+     */
+
+    createClonePlaylist_(basePlaylist, id, clone, attributes) {
+      const uri = this.createCloneURI_(basePlaylist.resolvedUri, clone);
+      const newProps = {
+        resolvedUri: uri,
+        uri,
+        id
+      }; // Remove all segments from previous playlist in the clone.
+
+      if (basePlaylist.segments) {
+        newProps.segments = [];
+      }
+      if (attributes) {
+        newProps.attributes = attributes;
+      }
+      return merge(basePlaylist, newProps);
+    }
+    /**
+     * Generates an updated URI for a cloned pathway based on the original
+     * pathway's URI and the paramaters from the pathway clone object in the
+     * content steering server response.
+     *
+     * @param {string} baseUri URI to be updated in the cloned pathway.
+     * @param {Object} clone The pathway clone object.
+     *
+     * @return {string} The updated URI for the cloned pathway.
+     */
+
+    createCloneURI_(baseURI, clone) {
+      const uri = new URL(baseURI);
+      uri.hostname = clone['URI-REPLACEMENT'].HOST;
+      const params = clone['URI-REPLACEMENT'].PARAMS; // Add params to the cloned URL.
+
+      for (const key of Object.keys(params)) {
+        uri.searchParams.set(key, params[key]);
+      }
+      return uri.href;
+    }
+    /**
+     * Helper function to create the attributes needed for the new clone.
+     * This mainly adds the necessary media attributes.
+     *
+     * @param {string} id The pathway clone object ID.
+     * @param {Object} oldAttributes The old attributes to compare to.
+     * @return {Object} The new attributes to add to the playlist.
+     */
+
+    createCloneAttributes_(id, oldAttributes) {
+      const attributes = {
+        ['PATHWAY-ID']: id
+      };
+      ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+        if (oldAttributes[mediaType]) {
+          attributes[mediaType] = id;
+        }
+      });
+      return attributes;
+    }
+    /**
+     * Returns the key ID set from a playlist
+     *
+     * @param {playlist} playlist to fetch the key ID set from.
+     * @return a Set of 32 digit hex strings that represent the unique keyIds for that playlist.
+     */
+
+    getKeyIdSet(playlist) {
+      if (playlist.contentProtection) {
+        const keyIds = new Set();
+        for (const keysystem in playlist.contentProtection) {
+          const keyId = playlist.contentProtection[keysystem].attributes.keyId;
+          if (keyId) {
+            keyIds.add(keyId.toLowerCase());
+          }
+        }
+        return keyIds;
+      }
+    }
+  }
+
+  /**
+   * @file xhr.js
+   */
+
+  const callbackWrapper = function (request, error, response, callback) {
+    const reqResponse = request.responseType === 'arraybuffer' ? request.response : request.responseText;
+    if (!error && reqResponse) {
+      request.responseTime = Date.now();
+      request.roundTripTime = request.responseTime - request.requestTime;
+      request.bytesReceived = reqResponse.byteLength || reqResponse.length;
+      if (!request.bandwidth) {
+        request.bandwidth = Math.floor(request.bytesReceived / request.roundTripTime * 8 * 1000);
+      }
+    }
+    if (response.headers) {
+      request.responseHeaders = response.headers;
+    } // videojs.xhr now uses a specific code on the error
+    // object to signal that a request has timed out instead
+    // of setting a boolean on the request object
+
+    if (error && error.code === 'ETIMEDOUT') {
+      request.timedout = true;
+    } // videojs.xhr no longer considers status codes outside of 200 and 0
+    // (for file uris) to be errors, but the old XHR did, so emulate that
+    // behavior. Status 206 may be used in response to byterange requests.
+
+    if (!error && !request.aborted && response.statusCode !== 200 && response.statusCode !== 206 && response.statusCode !== 0) {
+      error = new Error('XHR Failed with a response of: ' + (request && (reqResponse || request.responseText)));
+    }
+    callback(error, request);
+  };
+  /**
+   * Iterates over the request hooks Set and calls them in order
+   *
+   * @param {Set} hooks the hook Set to iterate over
+   * @param {Object} options the request options to pass to the xhr wrapper
+   * @return the callback hook function return value, the modified or new options Object.
+   */
+
+  const callAllRequestHooks = (requestSet, options) => {
+    if (!requestSet || !requestSet.size) {
+      return;
+    }
+    let newOptions = options;
+    requestSet.forEach(requestCallback => {
+      newOptions = requestCallback(newOptions);
+    });
+    return newOptions;
+  };
+  /**
+   * Iterates over the response hooks Set and calls them in order.
+   *
+   * @param {Set} hooks the hook Set to iterate over
+   * @param {Object} request the xhr request object
+   * @param {Object} error the xhr error object
+   * @param {Object} response the xhr response object
+   */
+
+  const callAllResponseHooks = (responseSet, request, error, response) => {
+    if (!responseSet || !responseSet.size) {
+      return;
+    }
+    responseSet.forEach(responseCallback => {
+      responseCallback(request, error, response);
+    });
+  };
+  const xhrFactory = function () {
+    const xhr = function XhrFunction(options, callback) {
+      // Add a default timeout
+      options = merge({
+        timeout: 45e3
+      }, options); // Allow an optional user-specified function to modify the option
+      // object before we construct the xhr request
+      // TODO: Remove beforeRequest in the next major release.
+
+      const beforeRequest = XhrFunction.beforeRequest || videojs.Vhs.xhr.beforeRequest; // onRequest and onResponse hooks as a Set, at either the player or global level.
+      // TODO: new Set added here for beforeRequest alias. Remove this when beforeRequest is removed.
+
+      const _requestCallbackSet = XhrFunction._requestCallbackSet || videojs.Vhs.xhr._requestCallbackSet || new Set();
+      const _responseCallbackSet = XhrFunction._responseCallbackSet || videojs.Vhs.xhr._responseCallbackSet;
+      if (beforeRequest && typeof beforeRequest === 'function') {
+        videojs.log.warn('beforeRequest is deprecated, use onRequest instead.');
+        _requestCallbackSet.add(beforeRequest);
+      } // Use the standard videojs.xhr() method unless `videojs.Vhs.xhr` has been overriden
+      // TODO: switch back to videojs.Vhs.xhr.name === 'XhrFunction' when we drop IE11
+
+      const xhrMethod = videojs.Vhs.xhr.original === true ? videojs.xhr : videojs.Vhs.xhr; // call all registered onRequest hooks, assign new options.
+
+      const beforeRequestOptions = callAllRequestHooks(_requestCallbackSet, options); // Remove the beforeRequest function from the hooks set so stale beforeRequest functions are not called.
+
+      _requestCallbackSet.delete(beforeRequest); // xhrMethod will call XMLHttpRequest.open and XMLHttpRequest.send
+
+      const request = xhrMethod(beforeRequestOptions || options, function (error, response) {
+        // call all registered onResponse hooks
+        callAllResponseHooks(_responseCallbackSet, request, error, response);
+        return callbackWrapper(request, error, response, callback);
+      });
+      const originalAbort = request.abort;
+      request.abort = function () {
+        request.aborted = true;
+        return originalAbort.apply(request, arguments);
+      };
+      request.uri = options.uri;
+      request.requestTime = Date.now();
+      return request;
+    };
+    xhr.original = true;
+    return xhr;
+  };
+  /**
+   * Turns segment byterange into a string suitable for use in
+   * HTTP Range requests
+   *
+   * @param {Object} byterange - an object with two values defining the start and end
+   *                             of a byte-range
+   */
+
+  const byterangeStr = function (byterange) {
+    // `byterangeEnd` is one less than `offset + length` because the HTTP range
+    // header uses inclusive ranges
+    let byterangeEnd;
+    const byterangeStart = byterange.offset;
+    if (typeof byterange.offset === 'bigint' || typeof byterange.length === 'bigint') {
+      byterangeEnd = window.BigInt(byterange.offset) + window.BigInt(byterange.length) - window.BigInt(1);
+    } else {
+      byterangeEnd = byterange.offset + byterange.length - 1;
+    }
+    return 'bytes=' + byterangeStart + '-' + byterangeEnd;
+  };
+  /**
+   * Defines headers for use in the xhr request for a particular segment.
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   */
+
+  const segmentXhrHeaders = function (segment) {
+    const headers = {};
+    if (segment.byterange) {
+      headers.Range = byterangeStr(segment.byterange);
+    }
+    return headers;
+  };
+
+  /**
+   * @file bin-utils.js
+   */
+
+  /**
+   * convert a TimeRange to text
+   *
+   * @param {TimeRange} range the timerange to use for conversion
+   * @param {number} i the iterator on the range to convert
+   * @return {string} the range in string format
+   */
+
+  const textRange = function (range, i) {
+    return range.start(i) + '-' + range.end(i);
+  };
+  /**
+   * format a number as hex string
+   *
+   * @param {number} e The number
+   * @param {number} i the iterator
+   * @return {string} the hex formatted number as a string
+   */
+
+  const formatHexString = function (e, i) {
+    const value = e.toString(16);
+    return '00'.substring(0, 2 - value.length) + value + (i % 2 ? ' ' : '');
+  };
+  const formatAsciiString = function (e) {
+    if (e >= 0x20 && e < 0x7e) {
+      return String.fromCharCode(e);
+    }
+    return '.';
+  };
+  /**
+   * Creates an object for sending to a web worker modifying properties that are TypedArrays
+   * into a new object with seperated properties for the buffer, byteOffset, and byteLength.
+   *
+   * @param {Object} message
+   *        Object of properties and values to send to the web worker
+   * @return {Object}
+   *         Modified message with TypedArray values expanded
+   * @function createTransferableMessage
+   */
+
+  const createTransferableMessage = function (message) {
+    const transferable = {};
+    Object.keys(message).forEach(key => {
+      const value = message[key];
+      if (isArrayBufferView(value)) {
+        transferable[key] = {
+          bytes: value.buffer,
+          byteOffset: value.byteOffset,
+          byteLength: value.byteLength
+        };
+      } else {
+        transferable[key] = value;
+      }
+    });
+    return transferable;
+  };
+  /**
+   * Returns a unique string identifier for a media initialization
+   * segment.
+   *
+   * @param {Object} initSegment
+   *        the init segment object.
+   *
+   * @return {string} the generated init segment id
+   */
+
+  const initSegmentId = function (initSegment) {
+    const byterange = initSegment.byterange || {
+      length: Infinity,
+      offset: 0
+    };
+    return [byterange.length, byterange.offset, initSegment.resolvedUri].join(',');
+  };
+  /**
+   * Returns a unique string identifier for a media segment key.
+   *
+   * @param {Object} key the encryption key
+   * @return {string} the unique id for the media segment key.
+   */
+
+  const segmentKeyId = function (key) {
+    return key.resolvedUri;
+  };
+  /**
+   * utils to help dump binary data to the console
+   *
+   * @param {Array|TypedArray} data
+   *        data to dump to a string
+   *
+   * @return {string} the data as a hex string.
+   */
+
+  const hexDump = data => {
+    const bytes = Array.prototype.slice.call(data);
+    const step = 16;
+    let result = '';
+    let hex;
+    let ascii;
+    for (let j = 0; j < bytes.length / step; j++) {
+      hex = bytes.slice(j * step, j * step + step).map(formatHexString).join('');
+      ascii = bytes.slice(j * step, j * step + step).map(formatAsciiString).join('');
+      result += hex + ' ' + ascii + '\n';
+    }
+    return result;
+  };
+  const tagDump = ({
+    bytes
+  }) => hexDump(bytes);
+  const textRanges = ranges => {
+    let result = '';
+    let i;
+    for (i = 0; i < ranges.length; i++) {
+      result += textRange(ranges, i) + ' ';
+    }
+    return result;
+  };
+  var utils = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    createTransferableMessage: createTransferableMessage,
+    initSegmentId: initSegmentId,
+    segmentKeyId: segmentKeyId,
+    hexDump: hexDump,
+    tagDump: tagDump,
+    textRanges: textRanges
+  });
+
+  // TODO handle fmp4 case where the timing info is accurate and doesn't involve transmux
+  // 25% was arbitrarily chosen, and may need to be refined over time.
+
+  const SEGMENT_END_FUDGE_PERCENT = 0.25;
+  /**
+   * Converts a player time (any time that can be gotten/set from player.currentTime(),
+   * e.g., any time within player.seekable().start(0) to player.seekable().end(0)) to a
+   * program time (any time referencing the real world (e.g., EXT-X-PROGRAM-DATE-TIME)).
+   *
+   * The containing segment is required as the EXT-X-PROGRAM-DATE-TIME serves as an "anchor
+   * point" (a point where we have a mapping from program time to player time, with player
+   * time being the post transmux start of the segment).
+   *
+   * For more details, see [this doc](../../docs/program-time-from-player-time.md).
+   *
+   * @param {number} playerTime the player time
+   * @param {Object} segment the segment which contains the player time
+   * @return {Date} program time
+   */
+
+  const playerTimeToProgramTime = (playerTime, segment) => {
+    if (!segment.dateTimeObject) {
+      // Can't convert without an "anchor point" for the program time (i.e., a time that can
+      // be used to map the start of a segment with a real world time).
+      return null;
+    }
+    const transmuxerPrependedSeconds = segment.videoTimingInfo.transmuxerPrependedSeconds;
+    const transmuxedStart = segment.videoTimingInfo.transmuxedPresentationStart; // get the start of the content from before old content is prepended
+
+    const startOfSegment = transmuxedStart + transmuxerPrependedSeconds;
+    const offsetFromSegmentStart = playerTime - startOfSegment;
+    return new Date(segment.dateTimeObject.getTime() + offsetFromSegmentStart * 1000);
+  };
+  const originalSegmentVideoDuration = videoTimingInfo => {
+    return videoTimingInfo.transmuxedPresentationEnd - videoTimingInfo.transmuxedPresentationStart - videoTimingInfo.transmuxerPrependedSeconds;
+  };
+  /**
+   * Finds a segment that contains the time requested given as an ISO-8601 string. The
+   * returned segment might be an estimate or an accurate match.
+   *
+   * @param {string} programTime The ISO-8601 programTime to find a match for
+   * @param {Object} playlist A playlist object to search within
+   */
+
+  const findSegmentForProgramTime = (programTime, playlist) => {
+    // Assumptions:
+    //  - verifyProgramDateTimeTags has already been run
+    //  - live streams have been started
+    let dateTimeObject;
+    try {
+      dateTimeObject = new Date(programTime);
+    } catch (e) {
+      return null;
+    }
+    if (!playlist || !playlist.segments || playlist.segments.length === 0) {
+      return null;
+    }
+    let segment = playlist.segments[0];
+    if (dateTimeObject < new Date(segment.dateTimeObject)) {
+      // Requested time is before stream start.
+      return null;
+    }
+    for (let i = 0; i < playlist.segments.length - 1; i++) {
+      segment = playlist.segments[i];
+      const nextSegmentStart = new Date(playlist.segments[i + 1].dateTimeObject);
+      if (dateTimeObject < nextSegmentStart) {
+        break;
+      }
+    }
+    const lastSegment = playlist.segments[playlist.segments.length - 1];
+    const lastSegmentStart = lastSegment.dateTimeObject;
+    const lastSegmentDuration = lastSegment.videoTimingInfo ? originalSegmentVideoDuration(lastSegment.videoTimingInfo) : lastSegment.duration + lastSegment.duration * SEGMENT_END_FUDGE_PERCENT;
+    const lastSegmentEnd = new Date(lastSegmentStart.getTime() + lastSegmentDuration * 1000);
+    if (dateTimeObject > lastSegmentEnd) {
+      // Beyond the end of the stream, or our best guess of the end of the stream.
+      return null;
+    }
+    if (dateTimeObject > new Date(lastSegmentStart)) {
+      segment = lastSegment;
+    }
+    return {
+      segment,
+      estimatedStart: segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationStart : Playlist.duration(playlist, playlist.mediaSequence + playlist.segments.indexOf(segment)),
+      // Although, given that all segments have accurate date time objects, the segment
+      // selected should be accurate, unless the video has been transmuxed at some point
+      // (determined by the presence of the videoTimingInfo object), the segment's "player
+      // time" (the start time in the player) can't be considered accurate.
+      type: segment.videoTimingInfo ? 'accurate' : 'estimate'
+    };
+  };
+  /**
+   * Finds a segment that contains the given player time(in seconds).
+   *
+   * @param {number} time The player time to find a match for
+   * @param {Object} playlist A playlist object to search within
+   */
+
+  const findSegmentForPlayerTime = (time, playlist) => {
+    // Assumptions:
+    // - there will always be a segment.duration
+    // - we can start from zero
+    // - segments are in time order
+    if (!playlist || !playlist.segments || playlist.segments.length === 0) {
+      return null;
+    }
+    let segmentEnd = 0;
+    let segment;
+    for (let i = 0; i < playlist.segments.length; i++) {
+      segment = playlist.segments[i]; // videoTimingInfo is set after the segment is downloaded and transmuxed, and
+      // should contain the most accurate values we have for the segment's player times.
+      //
+      // Use the accurate transmuxedPresentationEnd value if it is available, otherwise fall
+      // back to an estimate based on the manifest derived (inaccurate) segment.duration, to
+      // calculate an end value.
+
+      segmentEnd = segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationEnd : segmentEnd + segment.duration;
+      if (time <= segmentEnd) {
+        break;
+      }
+    }
+    const lastSegment = playlist.segments[playlist.segments.length - 1];
+    if (lastSegment.videoTimingInfo && lastSegment.videoTimingInfo.transmuxedPresentationEnd < time) {
+      // The time requested is beyond the stream end.
+      return null;
+    }
+    if (time > segmentEnd) {
+      // The time is within or beyond the last segment.
+      //
+      // Check to see if the time is beyond a reasonable guess of the end of the stream.
+      if (time > segmentEnd + lastSegment.duration * SEGMENT_END_FUDGE_PERCENT) {
+        // Technically, because the duration value is only an estimate, the time may still
+        // exist in the last segment, however, there isn't enough information to make even
+        // a reasonable estimate.
+        return null;
+      }
+      segment = lastSegment;
+    }
+    return {
+      segment,
+      estimatedStart: segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationStart : segmentEnd - segment.duration,
+      // Because videoTimingInfo is only set after transmux, it is the only way to get
+      // accurate timing values.
+      type: segment.videoTimingInfo ? 'accurate' : 'estimate'
+    };
+  };
+  /**
+   * Gives the offset of the comparisonTimestamp from the programTime timestamp in seconds.
+   * If the offset returned is positive, the programTime occurs after the
+   * comparisonTimestamp.
+   * If the offset is negative, the programTime occurs before the comparisonTimestamp.
+   *
+   * @param {string} comparisonTimeStamp An ISO-8601 timestamp to compare against
+   * @param {string} programTime The programTime as an ISO-8601 string
+   * @return {number} offset
+   */
+
+  const getOffsetFromTimestamp = (comparisonTimeStamp, programTime) => {
+    let segmentDateTime;
+    let programDateTime;
+    try {
+      segmentDateTime = new Date(comparisonTimeStamp);
+      programDateTime = new Date(programTime);
+    } catch (e) {// TODO handle error
+    }
+    const segmentTimeEpoch = segmentDateTime.getTime();
+    const programTimeEpoch = programDateTime.getTime();
+    return (programTimeEpoch - segmentTimeEpoch) / 1000;
+  };
+  /**
+   * Checks that all segments in this playlist have programDateTime tags.
+   *
+   * @param {Object} playlist A playlist object
+   */
+
+  const verifyProgramDateTimeTags = playlist => {
+    if (!playlist.segments || playlist.segments.length === 0) {
+      return false;
+    }
+    for (let i = 0; i < playlist.segments.length; i++) {
+      const segment = playlist.segments[i];
+      if (!segment.dateTimeObject) {
+        return false;
+      }
+    }
+    return true;
+  };
+  /**
+   * Returns the programTime of the media given a playlist and a playerTime.
+   * The playlist must have programDateTime tags for a programDateTime tag to be returned.
+   * If the segments containing the time requested have not been buffered yet, an estimate
+   * may be returned to the callback.
+   *
+   * @param {Object} args
+   * @param {Object} args.playlist A playlist object to search within
+   * @param {number} time A playerTime in seconds
+   * @param {Function} callback(err, programTime)
+   * @return {string} err.message A detailed error message
+   * @return {Object} programTime
+   * @return {number} programTime.mediaSeconds The streamTime in seconds
+   * @return {string} programTime.programDateTime The programTime as an ISO-8601 String
+   */
+
+  const getProgramTime = ({
+    playlist,
+    time = undefined,
+    callback
+  }) => {
+    if (!callback) {
+      throw new Error('getProgramTime: callback must be provided');
+    }
+    if (!playlist || time === undefined) {
+      return callback({
+        message: 'getProgramTime: playlist and time must be provided'
+      });
+    }
+    const matchedSegment = findSegmentForPlayerTime(time, playlist);
+    if (!matchedSegment) {
+      return callback({
+        message: 'valid programTime was not found'
+      });
+    }
+    if (matchedSegment.type === 'estimate') {
+      return callback({
+        message: 'Accurate programTime could not be determined.' + ' Please seek to e.seekTime and try again',
+        seekTime: matchedSegment.estimatedStart
+      });
+    }
+    const programTimeObject = {
+      mediaSeconds: time
+    };
+    const programTime = playerTimeToProgramTime(time, matchedSegment.segment);
+    if (programTime) {
+      programTimeObject.programDateTime = programTime.toISOString();
+    }
+    return callback(null, programTimeObject);
+  };
+  /**
+   * Seeks in the player to a time that matches the given programTime ISO-8601 string.
+   *
+   * @param {Object} args
+   * @param {string} args.programTime A programTime to seek to as an ISO-8601 String
+   * @param {Object} args.playlist A playlist to look within
+   * @param {number} args.retryCount The number of times to try for an accurate seek. Default is 2.
+   * @param {Function} args.seekTo A method to perform a seek
+   * @param {boolean} args.pauseAfterSeek Whether to end in a paused state after seeking. Default is true.
+   * @param {Object} args.tech The tech to seek on
+   * @param {Function} args.callback(err, newTime) A callback to return the new time to
+   * @return {string} err.message A detailed error message
+   * @return {number} newTime The exact time that was seeked to in seconds
+   */
+
+  const seekToProgramTime = ({
+    programTime,
+    playlist,
+    retryCount = 2,
+    seekTo,
+    pauseAfterSeek = true,
+    tech,
+    callback
+  }) => {
+    if (!callback) {
+      throw new Error('seekToProgramTime: callback must be provided');
+    }
+    if (typeof programTime === 'undefined' || !playlist || !seekTo) {
+      return callback({
+        message: 'seekToProgramTime: programTime, seekTo and playlist must be provided'
+      });
+    }
+    if (!playlist.endList && !tech.hasStarted_) {
+      return callback({
+        message: 'player must be playing a live stream to start buffering'
+      });
+    }
+    if (!verifyProgramDateTimeTags(playlist)) {
+      return callback({
+        message: 'programDateTime tags must be provided in the manifest ' + playlist.resolvedUri
+      });
+    }
+    const matchedSegment = findSegmentForProgramTime(programTime, playlist); // no match
+
+    if (!matchedSegment) {
+      return callback({
+        message: `${programTime} was not found in the stream`
+      });
+    }
+    const segment = matchedSegment.segment;
+    const mediaOffset = getOffsetFromTimestamp(segment.dateTimeObject, programTime);
+    if (matchedSegment.type === 'estimate') {
+      // we've run out of retries
+      if (retryCount === 0) {
+        return callback({
+          message: `${programTime} is not buffered yet. Try again`
+        });
+      }
+      seekTo(matchedSegment.estimatedStart + mediaOffset);
+      tech.one('seeked', () => {
+        seekToProgramTime({
+          programTime,
+          playlist,
+          retryCount: retryCount - 1,
+          seekTo,
+          pauseAfterSeek,
+          tech,
+          callback
+        });
+      });
+      return;
+    } // Since the segment.start value is determined from the buffered end or ending time
+    // of the prior segment, the seekToTime doesn't need to account for any transmuxer
+    // modifications.
+
+    const seekToTime = segment.start + mediaOffset;
+    const seekedCallback = () => {
+      return callback(null, tech.currentTime());
+    }; // listen for seeked event
+
+    tech.one('seeked', seekedCallback); // pause before seeking as video.js will restore this state
+
+    if (pauseAfterSeek) {
+      tech.pause();
+    }
+    seekTo(seekToTime);
+  };
+
+  // which will only happen if the request is complete.
+
+  const callbackOnCompleted = (request, cb) => {
+    if (request.readyState === 4) {
+      return cb();
+    }
+    return;
+  };
+  const containerRequest = (uri, xhr, cb) => {
+    let bytes = [];
+    let id3Offset;
+    let finished = false;
+    const endRequestAndCallback = function (err, req, type, _bytes) {
+      req.abort();
+      finished = true;
+      return cb(err, req, type, _bytes);
+    };
+    const progressListener = function (error, request) {
+      if (finished) {
+        return;
+      }
+      if (error) {
+        return endRequestAndCallback(error, request, '', bytes);
+      } // grap the new part of content that was just downloaded
+
+      const newPart = request.responseText.substring(bytes && bytes.byteLength || 0, request.responseText.length); // add that onto bytes
+
+      bytes = concatTypedArrays(bytes, stringToBytes(newPart, true));
+      id3Offset = id3Offset || getId3Offset(bytes); // we need at least 10 bytes to determine a type
+      // or we need at least two bytes after an id3Offset
+
+      if (bytes.length < 10 || id3Offset && bytes.length < id3Offset + 2) {
+        return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+      }
+      const type = detectContainerForBytes(bytes); // if this looks like a ts segment but we don't have enough data
+      // to see the second sync byte, wait until we have enough data
+      // before declaring it ts
+
+      if (type === 'ts' && bytes.length < 188) {
+        return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+      } // this may be an unsynced ts segment
+      // wait for 376 bytes before detecting no container
+
+      if (!type && bytes.length < 376) {
+        return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+      }
+      return endRequestAndCallback(null, request, type, bytes);
+    };
+    const options = {
+      uri,
+      beforeSend(request) {
+        // this forces the browser to pass the bytes to us unprocessed
+        request.overrideMimeType('text/plain; charset=x-user-defined');
+        request.addEventListener('progress', function ({
+          total,
+          loaded
+        }) {
+          return callbackWrapper(request, null, {
+            statusCode: request.status
+          }, progressListener);
+        });
+      }
+    };
+    const request = xhr(options, function (error, response) {
+      return callbackWrapper(request, error, response, progressListener);
+    });
+    return request;
+  };
+  const {
+    EventTarget
+  } = videojs;
+  const dashPlaylistUnchanged = function (a, b) {
+    if (!isPlaylistUnchanged(a, b)) {
+      return false;
+    } // for dash the above check will often return true in scenarios where
+    // the playlist actually has changed because mediaSequence isn't a
+    // dash thing, and we often set it to 1. So if the playlists have the same amount
+    // of segments we return true.
+    // So for dash we need to make sure that the underlying segments are different.
+    // if sidx changed then the playlists are different.
+
+    if (a.sidx && b.sidx && (a.sidx.offset !== b.sidx.offset || a.sidx.length !== b.sidx.length)) {
+      return false;
+    } else if (!a.sidx && b.sidx || a.sidx && !b.sidx) {
+      return false;
+    } // one or the other does not have segments
+    // there was a change.
+
+    if (a.segments && !b.segments || !a.segments && b.segments) {
+      return false;
+    } // neither has segments nothing changed
+
+    if (!a.segments && !b.segments) {
+      return true;
+    } // check segments themselves
+
+    for (let i = 0; i < a.segments.length; i++) {
+      const aSegment = a.segments[i];
+      const bSegment = b.segments[i]; // if uris are different between segments there was a change
+
+      if (aSegment.uri !== bSegment.uri) {
+        return false;
+      } // neither segment has a byterange, there will be no byterange change.
+
+      if (!aSegment.byterange && !bSegment.byterange) {
+        continue;
+      }
+      const aByterange = aSegment.byterange;
+      const bByterange = bSegment.byterange; // if byterange only exists on one of the segments, there was a change.
+
+      if (aByterange && !bByterange || !aByterange && bByterange) {
+        return false;
+      } // if both segments have byterange with different offsets, there was a change.
+
+      if (aByterange.offset !== bByterange.offset || aByterange.length !== bByterange.length) {
+        return false;
+      }
+    } // if everything was the same with segments, this is the same playlist.
+
+    return true;
+  };
+  /**
+   * Use the representation IDs from the mpd object to create groupIDs, the NAME is set to mandatory representation
+   * ID in the parser. This allows for continuous playout across periods with the same representation IDs
+   * (continuous periods as defined in DASH-IF 3.2.12). This is assumed in the mpd-parser as well. If we want to support
+   * periods without continuous playback this function may need modification as well as the parser.
+   */
+
+  const dashGroupId = (type, group, label, playlist) => {
+    // If the manifest somehow does not have an ID (non-dash compliant), use the label.
+    const playlistId = playlist.attributes.NAME || label;
+    return `placeholder-uri-${type}-${group}-${playlistId}`;
+  };
+  /**
+   * Parses the main XML string and updates playlist URI references.
+   *
+   * @param {Object} config
+   *        Object of arguments
+   * @param {string} config.mainXml
+   *        The mpd XML
+   * @param {string} config.srcUrl
+   *        The mpd URL
+   * @param {Date} config.clientOffset
+   *         A time difference between server and client
+   * @param {Object} config.sidxMapping
+   *        SIDX mappings for moof/mdat URIs and byte ranges
+   * @return {Object}
+   *         The parsed mpd manifest object
+   */
+
+  const parseMainXml = ({
+    mainXml,
+    srcUrl,
+    clientOffset,
+    sidxMapping,
+    previousManifest
+  }) => {
+    const manifest = parse(mainXml, {
+      manifestUri: srcUrl,
+      clientOffset,
+      sidxMapping,
+      previousManifest
+    });
+    addPropertiesToMain(manifest, srcUrl, dashGroupId);
+    return manifest;
+  };
+  /**
+   * Removes any mediaGroup labels that no longer exist in the newMain
+   *
+   * @param {Object} update
+   *         The previous mpd object being updated
+   * @param {Object} newMain
+   *         The new mpd object
+   */
+
+  const removeOldMediaGroupLabels = (update, newMain) => {
+    forEachMediaGroup(update, (properties, type, group, label) => {
+      if (!(label in newMain.mediaGroups[type][group])) {
+        delete update.mediaGroups[type][group][label];
+      }
+    });
+  };
+  /**
+   * Returns a new main manifest that is the result of merging an updated main manifest
+   * into the original version.
+   *
+   * @param {Object} oldMain
+   *        The old parsed mpd object
+   * @param {Object} newMain
+   *        The updated parsed mpd object
+   * @return {Object}
+   *         A new object representing the original main manifest with the updated media
+   *         playlists merged in
+   */
+
+  const updateMain = (oldMain, newMain, sidxMapping) => {
+    let noChanges = true;
+    let update = merge(oldMain, {
+      // These are top level properties that can be updated
+      duration: newMain.duration,
+      minimumUpdatePeriod: newMain.minimumUpdatePeriod,
+      timelineStarts: newMain.timelineStarts
+    }); // First update the playlists in playlist list
+
+    for (let i = 0; i < newMain.playlists.length; i++) {
+      const playlist = newMain.playlists[i];
+      if (playlist.sidx) {
+        const sidxKey = generateSidxKey(playlist.sidx); // add sidx segments to the playlist if we have all the sidx info already
+
+        if (sidxMapping && sidxMapping[sidxKey] && sidxMapping[sidxKey].sidx) {
+          addSidxSegmentsToPlaylist$1(playlist, sidxMapping[sidxKey].sidx, playlist.sidx.resolvedUri);
+        }
+      }
+      const playlistUpdate = updateMain$1(update, playlist, dashPlaylistUnchanged);
+      if (playlistUpdate) {
+        update = playlistUpdate;
+        noChanges = false;
+      }
+    } // Then update media group playlists
+
+    forEachMediaGroup(newMain, (properties, type, group, label) => {
+      if (properties.playlists && properties.playlists.length) {
+        const id = properties.playlists[0].id;
+        const playlistUpdate = updateMain$1(update, properties.playlists[0], dashPlaylistUnchanged);
+        if (playlistUpdate) {
+          update = playlistUpdate; // add new mediaGroup label if it doesn't exist and assign the new mediaGroup.
+
+          if (!(label in update.mediaGroups[type][group])) {
+            update.mediaGroups[type][group][label] = properties;
+          } // update the playlist reference within media groups
+
+          update.mediaGroups[type][group][label].playlists[0] = update.playlists[id];
+          noChanges = false;
+        }
+      }
+    }); // remove mediaGroup labels and references that no longer exist in the newMain
+
+    removeOldMediaGroupLabels(update, newMain);
+    if (newMain.minimumUpdatePeriod !== oldMain.minimumUpdatePeriod) {
+      noChanges = false;
+    }
+    if (noChanges) {
+      return null;
+    }
+    return update;
+  }; // SIDX should be equivalent if the URI and byteranges of the SIDX match.
+  // If the SIDXs have maps, the two maps should match,
+  // both `a` and `b` missing SIDXs is considered matching.
+  // If `a` or `b` but not both have a map, they aren't matching.
+
+  const equivalentSidx = (a, b) => {
+    const neitherMap = Boolean(!a.map && !b.map);
+    const equivalentMap = neitherMap || Boolean(a.map && b.map && a.map.byterange.offset === b.map.byterange.offset && a.map.byterange.length === b.map.byterange.length);
+    return equivalentMap && a.uri === b.uri && a.byterange.offset === b.byterange.offset && a.byterange.length === b.byterange.length;
+  }; // exported for testing
+
+  const compareSidxEntry = (playlists, oldSidxMapping) => {
+    const newSidxMapping = {};
+    for (const id in playlists) {
+      const playlist = playlists[id];
+      const currentSidxInfo = playlist.sidx;
+      if (currentSidxInfo) {
+        const key = generateSidxKey(currentSidxInfo);
+        if (!oldSidxMapping[key]) {
+          break;
+        }
+        const savedSidxInfo = oldSidxMapping[key].sidxInfo;
+        if (equivalentSidx(savedSidxInfo, currentSidxInfo)) {
+          newSidxMapping[key] = oldSidxMapping[key];
+        }
+      }
+    }
+    return newSidxMapping;
+  };
+  /**
+   *  A function that filters out changed items as they need to be requested separately.
+   *
+   *  The method is exported for testing
+   *
+   *  @param {Object} main the parsed mpd XML returned via mpd-parser
+   *  @param {Object} oldSidxMapping the SIDX to compare against
+   */
+
+  const filterChangedSidxMappings = (main, oldSidxMapping) => {
+    const videoSidx = compareSidxEntry(main.playlists, oldSidxMapping);
+    let mediaGroupSidx = videoSidx;
+    forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+      if (properties.playlists && properties.playlists.length) {
+        const playlists = properties.playlists;
+        mediaGroupSidx = merge(mediaGroupSidx, compareSidxEntry(playlists, oldSidxMapping));
+      }
+    });
+    return mediaGroupSidx;
+  };
+  class DashPlaylistLoader extends EventTarget {
+    // DashPlaylistLoader must accept either a src url or a playlist because subsequent
+    // playlist loader setups from media groups will expect to be able to pass a playlist
+    // (since there aren't external URLs to media playlists with DASH)
+    constructor(srcUrlOrPlaylist, vhs, options = {}, mainPlaylistLoader) {
+      super();
+      this.mainPlaylistLoader_ = mainPlaylistLoader || this;
+      if (!mainPlaylistLoader) {
+        this.isMain_ = true;
+      }
+      const {
+        withCredentials = false
+      } = options;
+      this.vhs_ = vhs;
+      this.withCredentials = withCredentials;
+      this.addMetadataToTextTrack = options.addMetadataToTextTrack;
+      if (!srcUrlOrPlaylist) {
+        throw new Error('A non-empty playlist URL or object is required');
+      } // event naming?
+
+      this.on('minimumUpdatePeriod', () => {
+        this.refreshXml_();
+      }); // live playlist staleness timeout
+
+      this.on('mediaupdatetimeout', () => {
+        this.refreshMedia_(this.media().id);
+      });
+      this.state = 'HAVE_NOTHING';
+      this.loadedPlaylists_ = {};
+      this.logger_ = logger('DashPlaylistLoader'); // initialize the loader state
+      // The mainPlaylistLoader will be created with a string
+
+      if (this.isMain_) {
+        this.mainPlaylistLoader_.srcUrl = srcUrlOrPlaylist; // TODO: reset sidxMapping between period changes
+        // once multi-period is refactored
+
+        this.mainPlaylistLoader_.sidxMapping_ = {};
+      } else {
+        this.childPlaylist_ = srcUrlOrPlaylist;
+      }
+    }
+    requestErrored_(err, request, startingState) {
+      // disposed
+      if (!this.request) {
+        return true;
+      } // pending request is cleared
+
+      this.request = null;
+      if (err) {
+        // use the provided error object or create one
+        // based on the request/response
+        this.error = typeof err === 'object' && !(err instanceof Error) ? err : {
+          status: request.status,
+          message: 'DASH request error at URL: ' + request.uri,
+          response: request.response,
+          // MEDIA_ERR_NETWORK
+          code: 2,
+          metadata: err.metadata
+        };
+        if (startingState) {
+          this.state = startingState;
+        }
+        this.trigger('error');
+        return true;
+      }
+    }
+    /**
+     * Verify that the container of the sidx segment can be parsed
+     * and if it can, get and parse that segment.
+     */
+
+    addSidxSegments_(playlist, startingState, cb) {
+      const sidxKey = playlist.sidx && generateSidxKey(playlist.sidx); // playlist lacks sidx or sidx segments were added to this playlist already.
+
+      if (!playlist.sidx || !sidxKey || this.mainPlaylistLoader_.sidxMapping_[sidxKey]) {
+        // keep this function async
+        this.mediaRequest_ = window.setTimeout(() => cb(false), 0);
+        return;
+      } // resolve the segment URL relative to the playlist
+
+      const uri = resolveManifestRedirect(playlist.sidx.resolvedUri);
+      const fin = (err, request) => {
+        // TODO: add error metdata here once we create an error type in video.js
+        if (this.requestErrored_(err, request, startingState)) {
+          return;
+        }
+        const sidxMapping = this.mainPlaylistLoader_.sidxMapping_;
+        let sidx;
+        try {
+          sidx = parseSidx_1(toUint8(request.response).subarray(8));
+        } catch (e) {
+          e.metadata = {
+            errorType: videojs.Error.DashManifestSidxParsingError
+          }; // sidx parsing failed.
+
+          this.requestErrored_(e, request, startingState);
+          return;
+        }
+        sidxMapping[sidxKey] = {
+          sidxInfo: playlist.sidx,
+          sidx
+        };
+        addSidxSegmentsToPlaylist$1(playlist, sidx, playlist.sidx.resolvedUri);
+        return cb(true);
+      };
+      this.request = containerRequest(uri, this.vhs_.xhr, (err, request, container, bytes) => {
+        if (err) {
+          return fin(err, request);
+        }
+        if (!container || container !== 'mp4') {
+          const sidxContainer = container || 'unknown';
+          return fin({
+            status: request.status,
+            message: `Unsupported ${sidxContainer} container type for sidx segment at URL: ${uri}`,
+            // response is just bytes in this case
+            // but we really don't want to return that.
+            response: '',
+            playlist,
+            internal: true,
+            playlistExclusionDuration: Infinity,
+            // MEDIA_ERR_NETWORK
+            code: 2,
+            metadata: {
+              errorType: videojs.Error.UnsupportedSidxContainer,
+              sidxContainer
+            }
+          }, request);
+        } // if we already downloaded the sidx bytes in the container request, use them
+
+        const {
+          offset,
+          length
+        } = playlist.sidx.byterange;
+        if (bytes.length >= length + offset) {
+          return fin(err, {
+            response: bytes.subarray(offset, offset + length),
+            status: request.status,
+            uri: request.uri
+          });
+        } // otherwise request sidx bytes
+
+        this.request = this.vhs_.xhr({
+          uri,
+          responseType: 'arraybuffer',
+          headers: segmentXhrHeaders({
+            byterange: playlist.sidx.byterange
+          })
+        }, fin);
+      });
+    }
+    dispose() {
+      this.trigger('dispose');
+      this.stopRequest();
+      this.loadedPlaylists_ = {};
+      window.clearTimeout(this.minimumUpdatePeriodTimeout_);
+      window.clearTimeout(this.mediaRequest_);
+      window.clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+      this.mediaRequest_ = null;
+      this.minimumUpdatePeriodTimeout_ = null;
+      if (this.mainPlaylistLoader_.createMupOnMedia_) {
+        this.off('loadedmetadata', this.mainPlaylistLoader_.createMupOnMedia_);
+        this.mainPlaylistLoader_.createMupOnMedia_ = null;
+      }
+      this.off();
+    }
+    hasPendingRequest() {
+      return this.request || this.mediaRequest_;
+    }
+    stopRequest() {
+      if (this.request) {
+        const oldRequest = this.request;
+        this.request = null;
+        oldRequest.onreadystatechange = null;
+        oldRequest.abort();
+      }
+    }
+    media(playlist) {
+      // getter
+      if (!playlist) {
+        return this.media_;
+      } // setter
+
+      if (this.state === 'HAVE_NOTHING') {
+        throw new Error('Cannot switch media playlist from ' + this.state);
+      }
+      const startingState = this.state; // find the playlist object if the target playlist has been specified by URI
+
+      if (typeof playlist === 'string') {
+        if (!this.mainPlaylistLoader_.main.playlists[playlist]) {
+          throw new Error('Unknown playlist URI: ' + playlist);
+        }
+        playlist = this.mainPlaylistLoader_.main.playlists[playlist];
+      }
+      const mediaChange = !this.media_ || playlist.id !== this.media_.id; // switch to previously loaded playlists immediately
+
+      if (mediaChange && this.loadedPlaylists_[playlist.id] && this.loadedPlaylists_[playlist.id].endList) {
+        this.state = 'HAVE_METADATA';
+        this.media_ = playlist; // trigger media change if the active media has been updated
+
+        if (mediaChange) {
+          this.trigger('mediachanging');
+          this.trigger('mediachange');
+        }
+        return;
+      } // switching to the active playlist is a no-op
+
+      if (!mediaChange) {
+        return;
+      } // switching from an already loaded playlist
+
+      if (this.media_) {
+        this.trigger('mediachanging');
+      }
+      this.addSidxSegments_(playlist, startingState, sidxChanged => {
+        // everything is ready just continue to haveMetadata
+        this.haveMetadata({
+          startingState,
+          playlist
+        });
+      });
+    }
+    haveMetadata({
+      startingState,
+      playlist
+    }) {
+      this.state = 'HAVE_METADATA';
+      this.loadedPlaylists_[playlist.id] = playlist;
+      this.mediaRequest_ = null; // This will trigger loadedplaylist
+
+      this.refreshMedia_(playlist.id); // fire loadedmetadata the first time a media playlist is loaded
+      // to resolve setup of media groups
+
+      if (startingState === 'HAVE_MAIN_MANIFEST') {
+        this.trigger('loadedmetadata');
+      } else {
+        // trigger media change if the active media has been updated
+        this.trigger('mediachange');
+      }
+    }
+    pause() {
+      if (this.mainPlaylistLoader_.createMupOnMedia_) {
+        this.off('loadedmetadata', this.mainPlaylistLoader_.createMupOnMedia_);
+        this.mainPlaylistLoader_.createMupOnMedia_ = null;
+      }
+      this.stopRequest();
+      window.clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+      if (this.isMain_) {
+        window.clearTimeout(this.mainPlaylistLoader_.minimumUpdatePeriodTimeout_);
+        this.mainPlaylistLoader_.minimumUpdatePeriodTimeout_ = null;
+      }
+      if (this.state === 'HAVE_NOTHING') {
+        // If we pause the loader before any data has been retrieved, its as if we never
+        // started, so reset to an unstarted state.
+        this.started = false;
+      }
+    }
+    load(isFinalRendition) {
+      window.clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+      const media = this.media();
+      if (isFinalRendition) {
+        const delay = media ? media.targetDuration / 2 * 1000 : 5 * 1000;
+        this.mediaUpdateTimeout = window.setTimeout(() => this.load(), delay);
+        return;
+      } // because the playlists are internal to the manifest, load should either load the
+      // main manifest, or do nothing but trigger an event
+
+      if (!this.started) {
+        this.start();
+        return;
+      }
+      if (media && !media.endList) {
+        // Check to see if this is the main loader and the MUP was cleared (this happens
+        // when the loader was paused). `media` should be set at this point since one is always
+        // set during `start()`.
+        if (this.isMain_ && !this.minimumUpdatePeriodTimeout_) {
+          // Trigger minimumUpdatePeriod to refresh the main manifest
+          this.trigger('minimumUpdatePeriod'); // Since there was no prior minimumUpdatePeriodTimeout it should be recreated
+
+          this.updateMinimumUpdatePeriodTimeout_();
+        }
+        this.trigger('mediaupdatetimeout');
+      } else {
+        this.trigger('loadedplaylist');
+      }
+    }
+    start() {
+      this.started = true; // We don't need to request the main manifest again
+      // Call this asynchronously to match the xhr request behavior below
+
+      if (!this.isMain_) {
+        this.mediaRequest_ = window.setTimeout(() => this.haveMain_(), 0);
+        return;
+      }
+      this.requestMain_((req, mainChanged) => {
+        this.haveMain_();
+        if (!this.hasPendingRequest() && !this.media_) {
+          this.media(this.mainPlaylistLoader_.main.playlists[0]);
+        }
+      });
+    }
+    requestMain_(cb) {
+      this.request = this.vhs_.xhr({
+        uri: this.mainPlaylistLoader_.srcUrl,
+        withCredentials: this.withCredentials,
+        requestType: 'dash-manifest'
+      }, (error, req) => {
+        if (this.requestErrored_(error, req)) {
+          if (this.state === 'HAVE_NOTHING') {
+            this.started = false;
+          }
+          return;
+        }
+        const mainChanged = req.responseText !== this.mainPlaylistLoader_.mainXml_;
+        this.mainPlaylistLoader_.mainXml_ = req.responseText;
+        if (req.responseHeaders && req.responseHeaders.date) {
+          this.mainLoaded_ = Date.parse(req.responseHeaders.date);
+        } else {
+          this.mainLoaded_ = Date.now();
+        }
+        this.mainPlaylistLoader_.srcUrl = resolveManifestRedirect(this.mainPlaylistLoader_.srcUrl, req);
+        if (mainChanged) {
+          this.handleMain_();
+          this.syncClientServerClock_(() => {
+            return cb(req, mainChanged);
+          });
+          return;
+        }
+        return cb(req, mainChanged);
+      });
+    }
+    /**
+     * Parses the main xml for UTCTiming node to sync the client clock to the server
+     * clock. If the UTCTiming node requires a HEAD or GET request, that request is made.
+     *
+     * @param {Function} done
+     *        Function to call when clock sync has completed
+     */
+
+    syncClientServerClock_(done) {
+      const utcTiming = parseUTCTiming(this.mainPlaylistLoader_.mainXml_); // No UTCTiming element found in the mpd. Use Date header from mpd request as the
+      // server clock
+
+      if (utcTiming === null) {
+        this.mainPlaylistLoader_.clientOffset_ = this.mainLoaded_ - Date.now();
+        return done();
+      }
+      if (utcTiming.method === 'DIRECT') {
+        this.mainPlaylistLoader_.clientOffset_ = utcTiming.value - Date.now();
+        return done();
+      }
+      this.request = this.vhs_.xhr({
+        uri: resolveUrl(this.mainPlaylistLoader_.srcUrl, utcTiming.value),
+        method: utcTiming.method,
+        withCredentials: this.withCredentials,
+        requestType: 'dash-clock-sync'
+      }, (error, req) => {
+        // disposed
+        if (!this.request) {
+          return;
+        }
+        if (error) {
+          // sync request failed, fall back to using date header from mpd
+          // TODO: log warning
+          this.mainPlaylistLoader_.clientOffset_ = this.mainLoaded_ - Date.now();
+          return done();
+        }
+        let serverTime;
+        if (utcTiming.method === 'HEAD') {
+          if (!req.responseHeaders || !req.responseHeaders.date) {
+            // expected date header not preset, fall back to using date header from mpd
+            // TODO: log warning
+            serverTime = this.mainLoaded_;
+          } else {
+            serverTime = Date.parse(req.responseHeaders.date);
+          }
+        } else {
+          serverTime = Date.parse(req.responseText);
+        }
+        this.mainPlaylistLoader_.clientOffset_ = serverTime - Date.now();
+        done();
+      });
+    }
+    haveMain_() {
+      this.state = 'HAVE_MAIN_MANIFEST';
+      if (this.isMain_) {
+        // We have the main playlist at this point, so
+        // trigger this to allow PlaylistController
+        // to make an initial playlist selection
+        this.trigger('loadedplaylist');
+      } else if (!this.media_) {
+        // no media playlist was specifically selected so select
+        // the one the child playlist loader was created with
+        this.media(this.childPlaylist_);
+      }
+    }
+    handleMain_() {
+      // clear media request
+      this.mediaRequest_ = null;
+      const oldMain = this.mainPlaylistLoader_.main;
+      let newMain = parseMainXml({
+        mainXml: this.mainPlaylistLoader_.mainXml_,
+        srcUrl: this.mainPlaylistLoader_.srcUrl,
+        clientOffset: this.mainPlaylistLoader_.clientOffset_,
+        sidxMapping: this.mainPlaylistLoader_.sidxMapping_,
+        previousManifest: oldMain
+      }); // if we have an old main to compare the new main against
+
+      if (oldMain) {
+        newMain = updateMain(oldMain, newMain, this.mainPlaylistLoader_.sidxMapping_);
+      } // only update main if we have a new main
+
+      this.mainPlaylistLoader_.main = newMain ? newMain : oldMain;
+      const location = this.mainPlaylistLoader_.main.locations && this.mainPlaylistLoader_.main.locations[0];
+      if (location && location !== this.mainPlaylistLoader_.srcUrl) {
+        this.mainPlaylistLoader_.srcUrl = location;
+      }
+      if (!oldMain || newMain && newMain.minimumUpdatePeriod !== oldMain.minimumUpdatePeriod) {
+        this.updateMinimumUpdatePeriodTimeout_();
+      }
+      this.addEventStreamToMetadataTrack_(newMain);
+      return Boolean(newMain);
+    }
+    updateMinimumUpdatePeriodTimeout_() {
+      const mpl = this.mainPlaylistLoader_; // cancel any pending creation of mup on media
+      // a new one will be added if needed.
+
+      if (mpl.createMupOnMedia_) {
+        mpl.off('loadedmetadata', mpl.createMupOnMedia_);
+        mpl.createMupOnMedia_ = null;
+      } // clear any pending timeouts
+
+      if (mpl.minimumUpdatePeriodTimeout_) {
+        window.clearTimeout(mpl.minimumUpdatePeriodTimeout_);
+        mpl.minimumUpdatePeriodTimeout_ = null;
+      }
+      let mup = mpl.main && mpl.main.minimumUpdatePeriod; // If the minimumUpdatePeriod has a value of 0, that indicates that the current
+      // MPD has no future validity, so a new one will need to be acquired when new
+      // media segments are to be made available. Thus, we use the target duration
+      // in this case
+
+      if (mup === 0) {
+        if (mpl.media()) {
+          mup = mpl.media().targetDuration * 1000;
+        } else {
+          mpl.createMupOnMedia_ = mpl.updateMinimumUpdatePeriodTimeout_;
+          mpl.one('loadedmetadata', mpl.createMupOnMedia_);
+        }
+      } // if minimumUpdatePeriod is invalid or <= zero, which
+      // can happen when a live video becomes VOD. skip timeout
+      // creation.
+
+      if (typeof mup !== 'number' || mup <= 0) {
+        if (mup < 0) {
+          this.logger_(`found invalid minimumUpdatePeriod of ${mup}, not setting a timeout`);
+        }
+        return;
+      }
+      this.createMUPTimeout_(mup);
+    }
+    createMUPTimeout_(mup) {
+      const mpl = this.mainPlaylistLoader_;
+      mpl.minimumUpdatePeriodTimeout_ = window.setTimeout(() => {
+        mpl.minimumUpdatePeriodTimeout_ = null;
+        mpl.trigger('minimumUpdatePeriod');
+        mpl.createMUPTimeout_(mup);
+      }, mup);
+    }
+    /**
+     * Sends request to refresh the main xml and updates the parsed main manifest
+     */
+
+    refreshXml_() {
+      this.requestMain_((req, mainChanged) => {
+        if (!mainChanged) {
+          return;
+        }
+        if (this.media_) {
+          this.media_ = this.mainPlaylistLoader_.main.playlists[this.media_.id];
+        } // This will filter out updated sidx info from the mapping
+
+        this.mainPlaylistLoader_.sidxMapping_ = filterChangedSidxMappings(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.sidxMapping_);
+        this.addSidxSegments_(this.media(), this.state, sidxChanged => {
+          // TODO: do we need to reload the current playlist?
+          this.refreshMedia_(this.media().id);
+        });
+      });
+    }
+    /**
+     * Refreshes the media playlist by re-parsing the main xml and updating playlist
+     * references. If this is an alternate loader, the updated parsed manifest is retrieved
+     * from the main loader.
+     */
+
+    refreshMedia_(mediaID) {
+      if (!mediaID) {
+        throw new Error('refreshMedia_ must take a media id');
+      } // for main we have to reparse the main xml
+      // to re-create segments based on current timing values
+      // which may change media. We only skip updating the main manifest
+      // if this is the first time this.media_ is being set.
+      // as main was just parsed in that case.
+
+      if (this.media_ && this.isMain_) {
+        this.handleMain_();
+      }
+      const playlists = this.mainPlaylistLoader_.main.playlists;
+      const mediaChanged = !this.media_ || this.media_ !== playlists[mediaID];
+      if (mediaChanged) {
+        this.media_ = playlists[mediaID];
+      } else {
+        this.trigger('playlistunchanged');
+      }
+      if (!this.mediaUpdateTimeout) {
+        const createMediaUpdateTimeout = () => {
+          if (this.media().endList) {
+            return;
+          }
+          this.mediaUpdateTimeout = window.setTimeout(() => {
+            this.trigger('mediaupdatetimeout');
+            createMediaUpdateTimeout();
+          }, refreshDelay(this.media(), Boolean(mediaChanged)));
+        };
+        createMediaUpdateTimeout();
+      }
+      this.trigger('loadedplaylist');
+    }
+    /**
+     * Takes eventstream data from a parsed DASH manifest and adds it to the metadata text track.
+     *
+     * @param {manifest} newMain the newly parsed manifest
+     */
+
+    addEventStreamToMetadataTrack_(newMain) {
+      // Only add new event stream metadata if we have a new manifest.
+      if (newMain && this.mainPlaylistLoader_.main.eventStream) {
+        // convert EventStream to ID3-like data.
+        const metadataArray = this.mainPlaylistLoader_.main.eventStream.map(eventStreamNode => {
+          return {
+            cueTime: eventStreamNode.start,
+            frames: [{
+              data: eventStreamNode.messageData
+            }]
+          };
+        });
+        this.addMetadataToTextTrack('EventStream', metadataArray, this.mainPlaylistLoader_.main.duration);
+      }
+    }
+    /**
+     * Returns the key ID set from a playlist
+     *
+     * @param {playlist} playlist to fetch the key ID set from.
+     * @return a Set of 32 digit hex strings that represent the unique keyIds for that playlist.
+     */
+
+    getKeyIdSet(playlist) {
+      if (playlist.contentProtection) {
+        const keyIds = new Set();
+        for (const keysystem in playlist.contentProtection) {
+          const defaultKID = playlist.contentProtection[keysystem].attributes['cenc:default_KID'];
+          if (defaultKID) {
+            // DASH keyIds are separated by dashes.
+            keyIds.add(defaultKID.replace(/-/g, '').toLowerCase());
+          }
+        }
+        return keyIds;
+      }
+    }
+  }
+  var Config = {
+    GOAL_BUFFER_LENGTH: 30,
+    MAX_GOAL_BUFFER_LENGTH: 60,
+    BACK_BUFFER_LENGTH: 30,
+    GOAL_BUFFER_LENGTH_RATE: 1,
+    // 0.5 MB/s
+    INITIAL_BANDWIDTH: 4194304,
+    // A fudge factor to apply to advertised playlist bitrates to account for
+    // temporary flucations in client bandwidth
+    BANDWIDTH_VARIANCE: 1.2,
+    // How much of the buffer must be filled before we consider upswitching
+    BUFFER_LOW_WATER_LINE: 0,
+    MAX_BUFFER_LOW_WATER_LINE: 30,
+    // TODO: Remove this when experimentalBufferBasedABR is removed
+    EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE: 16,
+    BUFFER_LOW_WATER_LINE_RATE: 1,
+    // If the buffer is greater than the high water line, we won't switch down
+    BUFFER_HIGH_WATER_LINE: 30
+  };
+  const stringToArrayBuffer = string => {
+    const view = new Uint8Array(new ArrayBuffer(string.length));
+    for (let i = 0; i < string.length; i++) {
+      view[i] = string.charCodeAt(i);
+    }
+    return view.buffer;
+  };
+
+  /* global Blob, BlobBuilder, Worker */
+  // unify worker interface
+  const browserWorkerPolyFill = function (workerObj) {
+    // node only supports on/off
+    workerObj.on = workerObj.addEventListener;
+    workerObj.off = workerObj.removeEventListener;
+    return workerObj;
+  };
+  const createObjectURL = function (str) {
+    try {
+      return URL.createObjectURL(new Blob([str], {
+        type: 'application/javascript'
+      }));
+    } catch (e) {
+      const blob = new BlobBuilder();
+      blob.append(str);
+      return URL.createObjectURL(blob.getBlob());
+    }
+  };
+  const factory = function (code) {
+    return function () {
+      const objectUrl = createObjectURL(code);
+      const worker = browserWorkerPolyFill(new Worker(objectUrl));
+      worker.objURL = objectUrl;
+      const terminate = worker.terminate;
+      worker.on = worker.addEventListener;
+      worker.off = worker.removeEventListener;
+      worker.terminate = function () {
+        URL.revokeObjectURL(objectUrl);
+        return terminate.call(this);
+      };
+      return worker;
+    };
+  };
+  const transform = function (code) {
+    return `var browserWorkerPolyFill = ${browserWorkerPolyFill.toString()};\n` + 'browserWorkerPolyFill(self);\n' + code;
+  };
+  const getWorkerString = function (fn) {
+    return fn.toString().replace(/^function.+?{/, '').slice(0, -1);
+  };
+
+  /* rollup-plugin-worker-factory start for worker!/home/runner/work/http-streaming/http-streaming/src/transmuxer-worker.js */
+  const workerCode$1 = transform(getWorkerString(function () {
+    var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * A lightweight readable stream implemention that handles event dispatching.
+     * Objects that inherit from streams should call init in their constructors.
+     */
+
+    var Stream$8 = function () {
+      this.init = function () {
+        var listeners = {};
+        /**
+         * Add a listener for a specified event type.
+         * @param type {string} the event name
+         * @param listener {function} the callback to be invoked when an event of
+         * the specified type occurs
+         */
+
+        this.on = function (type, listener) {
+          if (!listeners[type]) {
+            listeners[type] = [];
+          }
+          listeners[type] = listeners[type].concat(listener);
+        };
+        /**
+         * Remove a listener for a specified event type.
+         * @param type {string} the event name
+         * @param listener {function} a function previously registered for this
+         * type of event through `on`
+         */
+
+        this.off = function (type, listener) {
+          var index;
+          if (!listeners[type]) {
+            return false;
+          }
+          index = listeners[type].indexOf(listener);
+          listeners[type] = listeners[type].slice();
+          listeners[type].splice(index, 1);
+          return index > -1;
+        };
+        /**
+         * Trigger an event of the specified type on this stream. Any additional
+         * arguments to this function are passed as parameters to event listeners.
+         * @param type {string} the event name
+         */
+
+        this.trigger = function (type) {
+          var callbacks, i, length, args;
+          callbacks = listeners[type];
+          if (!callbacks) {
+            return;
+          } // Slicing the arguments on every invocation of this method
+          // can add a significant amount of overhead. Avoid the
+          // intermediate object creation for the common case of a
+          // single callback argument
+
+          if (arguments.length === 2) {
+            length = callbacks.length;
+            for (i = 0; i < length; ++i) {
+              callbacks[i].call(this, arguments[1]);
+            }
+          } else {
+            args = [];
+            i = arguments.length;
+            for (i = 1; i < arguments.length; ++i) {
+              args.push(arguments[i]);
+            }
+            length = callbacks.length;
+            for (i = 0; i < length; ++i) {
+              callbacks[i].apply(this, args);
+            }
+          }
+        };
+        /**
+         * Destroys the stream and cleans up.
+         */
+
+        this.dispose = function () {
+          listeners = {};
+        };
+      };
+    };
+    /**
+     * Forwards all `data` events on this stream to the destination stream. The
+     * destination stream should provide a method `push` to receive the data
+     * events as they arrive.
+     * @param destination {stream} the stream that will receive all `data` events
+     * @param autoFlush {boolean} if false, we will not call `flush` on the destination
+     *                            when the current stream emits a 'done' event
+     * @see http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options
+     */
+
+    Stream$8.prototype.pipe = function (destination) {
+      this.on('data', function (data) {
+        destination.push(data);
+      });
+      this.on('done', function (flushSource) {
+        destination.flush(flushSource);
+      });
+      this.on('partialdone', function (flushSource) {
+        destination.partialFlush(flushSource);
+      });
+      this.on('endedtimeline', function (flushSource) {
+        destination.endTimeline(flushSource);
+      });
+      this.on('reset', function (flushSource) {
+        destination.reset(flushSource);
+      });
+      return destination;
+    }; // Default stream functions that are expected to be overridden to perform
+    // actual work. These are provided by the prototype as a sort of no-op
+    // implementation so that we don't have to check for their existence in the
+    // `pipe` function above.
+
+    Stream$8.prototype.push = function (data) {
+      this.trigger('data', data);
+    };
+    Stream$8.prototype.flush = function (flushSource) {
+      this.trigger('done', flushSource);
+    };
+    Stream$8.prototype.partialFlush = function (flushSource) {
+      this.trigger('partialdone', flushSource);
+    };
+    Stream$8.prototype.endTimeline = function (flushSource) {
+      this.trigger('endedtimeline', flushSource);
+    };
+    Stream$8.prototype.reset = function (flushSource) {
+      this.trigger('reset', flushSource);
+    };
+    var stream = Stream$8;
+    var MAX_UINT32$1 = Math.pow(2, 32);
+    var getUint64$3 = function (uint8) {
+      var dv = new DataView(uint8.buffer, uint8.byteOffset, uint8.byteLength);
+      var value;
+      if (dv.getBigUint64) {
+        value = dv.getBigUint64(0);
+        if (value < Number.MAX_SAFE_INTEGER) {
+          return Number(value);
+        }
+        return value;
+      }
+      return dv.getUint32(0) * MAX_UINT32$1 + dv.getUint32(4);
+    };
+    var numbers = {
+      getUint64: getUint64$3,
+      MAX_UINT32: MAX_UINT32$1
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Functions that generate fragmented MP4s suitable for use with Media
+     * Source Extensions.
+     */
+
+    var MAX_UINT32 = numbers.MAX_UINT32;
+    var box, dinf, esds, ftyp, mdat, mfhd, minf, moof, moov, mvex, mvhd, trak, tkhd, mdia, mdhd, hdlr, sdtp, stbl, stsd, traf, trex, trun$1, types, MAJOR_BRAND, MINOR_VERSION, AVC1_BRAND, VIDEO_HDLR, AUDIO_HDLR, HDLR_TYPES, VMHD, SMHD, DREF, STCO, STSC, STSZ, STTS; // pre-calculate constants
+
+    (function () {
+      var i;
+      types = {
+        avc1: [],
+        // codingname
+        avcC: [],
+        btrt: [],
+        dinf: [],
+        dref: [],
+        esds: [],
+        ftyp: [],
+        hdlr: [],
+        mdat: [],
+        mdhd: [],
+        mdia: [],
+        mfhd: [],
+        minf: [],
+        moof: [],
+        moov: [],
+        mp4a: [],
+        // codingname
+        mvex: [],
+        mvhd: [],
+        pasp: [],
+        sdtp: [],
+        smhd: [],
+        stbl: [],
+        stco: [],
+        stsc: [],
+        stsd: [],
+        stsz: [],
+        stts: [],
+        styp: [],
+        tfdt: [],
+        tfhd: [],
+        traf: [],
+        trak: [],
+        trun: [],
+        trex: [],
+        tkhd: [],
+        vmhd: []
+      }; // In environments where Uint8Array is undefined (e.g., IE8), skip set up so that we
+      // don't throw an error
+
+      if (typeof Uint8Array === 'undefined') {
+        return;
+      }
+      for (i in types) {
+        if (types.hasOwnProperty(i)) {
+          types[i] = [i.charCodeAt(0), i.charCodeAt(1), i.charCodeAt(2), i.charCodeAt(3)];
+        }
+      }
+      MAJOR_BRAND = new Uint8Array(['i'.charCodeAt(0), 's'.charCodeAt(0), 'o'.charCodeAt(0), 'm'.charCodeAt(0)]);
+      AVC1_BRAND = new Uint8Array(['a'.charCodeAt(0), 'v'.charCodeAt(0), 'c'.charCodeAt(0), '1'.charCodeAt(0)]);
+      MINOR_VERSION = new Uint8Array([0, 0, 0, 1]);
+      VIDEO_HDLR = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x00,
+      // pre_defined
+      0x76, 0x69, 0x64, 0x65,
+      // handler_type: 'vide'
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x56, 0x69, 0x64, 0x65, 0x6f, 0x48, 0x61, 0x6e, 0x64, 0x6c, 0x65, 0x72, 0x00 // name: 'VideoHandler'
+      ]);
+
+      AUDIO_HDLR = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x00,
+      // pre_defined
+      0x73, 0x6f, 0x75, 0x6e,
+      // handler_type: 'soun'
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x53, 0x6f, 0x75, 0x6e, 0x64, 0x48, 0x61, 0x6e, 0x64, 0x6c, 0x65, 0x72, 0x00 // name: 'SoundHandler'
+      ]);
+
+      HDLR_TYPES = {
+        video: VIDEO_HDLR,
+        audio: AUDIO_HDLR
+      };
+      DREF = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x01,
+      // entry_count
+      0x00, 0x00, 0x00, 0x0c,
+      // entry_size
+      0x75, 0x72, 0x6c, 0x20,
+      // 'url' type
+      0x00,
+      // version 0
+      0x00, 0x00, 0x01 // entry_flags
+      ]);
+
+      SMHD = new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00,
+      // balance, 0 means centered
+      0x00, 0x00 // reserved
+      ]);
+
+      STCO = new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x00 // entry_count
+      ]);
+
+      STSC = STCO;
+      STSZ = new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x00,
+      // sample_size
+      0x00, 0x00, 0x00, 0x00 // sample_count
+      ]);
+
+      STTS = STCO;
+      VMHD = new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x01,
+      // flags
+      0x00, 0x00,
+      // graphicsmode
+      0x00, 0x00, 0x00, 0x00, 0x00, 0x00 // opcolor
+      ]);
+    })();
+
+    box = function (type) {
+      var payload = [],
+        size = 0,
+        i,
+        result,
+        view;
+      for (i = 1; i < arguments.length; i++) {
+        payload.push(arguments[i]);
+      }
+      i = payload.length; // calculate the total size we need to allocate
+
+      while (i--) {
+        size += payload[i].byteLength;
+      }
+      result = new Uint8Array(size + 8);
+      view = new DataView(result.buffer, result.byteOffset, result.byteLength);
+      view.setUint32(0, result.byteLength);
+      result.set(type, 4); // copy the payload into the result
+
+      for (i = 0, size = 8; i < payload.length; i++) {
+        result.set(payload[i], size);
+        size += payload[i].byteLength;
+      }
+      return result;
+    };
+    dinf = function () {
+      return box(types.dinf, box(types.dref, DREF));
+    };
+    esds = function (track) {
+      return box(types.esds, new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x00,
+      // flags
+      // ES_Descriptor
+      0x03,
+      // tag, ES_DescrTag
+      0x19,
+      // length
+      0x00, 0x00,
+      // ES_ID
+      0x00,
+      // streamDependenceFlag, URL_flag, reserved, streamPriority
+      // DecoderConfigDescriptor
+      0x04,
+      // tag, DecoderConfigDescrTag
+      0x11,
+      // length
+      0x40,
+      // object type
+      0x15,
+      // streamType
+      0x00, 0x06, 0x00,
+      // bufferSizeDB
+      0x00, 0x00, 0xda, 0xc0,
+      // maxBitrate
+      0x00, 0x00, 0xda, 0xc0,
+      // avgBitrate
+      // DecoderSpecificInfo
+      0x05,
+      // tag, DecoderSpecificInfoTag
+      0x02,
+      // length
+      // ISO/IEC 14496-3, AudioSpecificConfig
+      // for samplingFrequencyIndex see ISO/IEC 13818-7:2006, 8.1.3.2.2, Table 35
+      track.audioobjecttype << 3 | track.samplingfrequencyindex >>> 1, track.samplingfrequencyindex << 7 | track.channelcount << 3, 0x06, 0x01, 0x02 // GASpecificConfig
+      ]));
+    };
+
+    ftyp = function () {
+      return box(types.ftyp, MAJOR_BRAND, MINOR_VERSION, MAJOR_BRAND, AVC1_BRAND);
+    };
+    hdlr = function (type) {
+      return box(types.hdlr, HDLR_TYPES[type]);
+    };
+    mdat = function (data) {
+      return box(types.mdat, data);
+    };
+    mdhd = function (track) {
+      var result = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x02,
+      // creation_time
+      0x00, 0x00, 0x00, 0x03,
+      // modification_time
+      0x00, 0x01, 0x5f, 0x90,
+      // timescale, 90,000 "ticks" per second
+      track.duration >>> 24 & 0xFF, track.duration >>> 16 & 0xFF, track.duration >>> 8 & 0xFF, track.duration & 0xFF,
+      // duration
+      0x55, 0xc4,
+      // 'und' language (undetermined)
+      0x00, 0x00]); // Use the sample rate from the track metadata, when it is
+      // defined. The sample rate can be parsed out of an ADTS header, for
+      // instance.
+
+      if (track.samplerate) {
+        result[12] = track.samplerate >>> 24 & 0xFF;
+        result[13] = track.samplerate >>> 16 & 0xFF;
+        result[14] = track.samplerate >>> 8 & 0xFF;
+        result[15] = track.samplerate & 0xFF;
+      }
+      return box(types.mdhd, result);
+    };
+    mdia = function (track) {
+      return box(types.mdia, mdhd(track), hdlr(track.type), minf(track));
+    };
+    mfhd = function (sequenceNumber) {
+      return box(types.mfhd, new Uint8Array([0x00, 0x00, 0x00, 0x00,
+      // flags
+      (sequenceNumber & 0xFF000000) >> 24, (sequenceNumber & 0xFF0000) >> 16, (sequenceNumber & 0xFF00) >> 8, sequenceNumber & 0xFF // sequence_number
+      ]));
+    };
+
+    minf = function (track) {
+      return box(types.minf, track.type === 'video' ? box(types.vmhd, VMHD) : box(types.smhd, SMHD), dinf(), stbl(track));
+    };
+    moof = function (sequenceNumber, tracks) {
+      var trackFragments = [],
+        i = tracks.length; // build traf boxes for each track fragment
+
+      while (i--) {
+        trackFragments[i] = traf(tracks[i]);
+      }
+      return box.apply(null, [types.moof, mfhd(sequenceNumber)].concat(trackFragments));
+    };
+    /**
+     * Returns a movie box.
+     * @param tracks {array} the tracks associated with this movie
+     * @see ISO/IEC 14496-12:2012(E), section 8.2.1
+     */
+
+    moov = function (tracks) {
+      var i = tracks.length,
+        boxes = [];
+      while (i--) {
+        boxes[i] = trak(tracks[i]);
+      }
+      return box.apply(null, [types.moov, mvhd(0xffffffff)].concat(boxes).concat(mvex(tracks)));
+    };
+    mvex = function (tracks) {
+      var i = tracks.length,
+        boxes = [];
+      while (i--) {
+        boxes[i] = trex(tracks[i]);
+      }
+      return box.apply(null, [types.mvex].concat(boxes));
+    };
+    mvhd = function (duration) {
+      var bytes = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x01,
+      // creation_time
+      0x00, 0x00, 0x00, 0x02,
+      // modification_time
+      0x00, 0x01, 0x5f, 0x90,
+      // timescale, 90,000 "ticks" per second
+      (duration & 0xFF000000) >> 24, (duration & 0xFF0000) >> 16, (duration & 0xFF00) >> 8, duration & 0xFF,
+      // duration
+      0x00, 0x01, 0x00, 0x00,
+      // 1.0 rate
+      0x01, 0x00,
+      // 1.0 volume
+      0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x00,
+      // transformation: unity matrix
+      0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      // pre_defined
+      0xff, 0xff, 0xff, 0xff // next_track_ID
+      ]);
+
+      return box(types.mvhd, bytes);
+    };
+    sdtp = function (track) {
+      var samples = track.samples || [],
+        bytes = new Uint8Array(4 + samples.length),
+        flags,
+        i; // leave the full box header (4 bytes) all zero
+      // write the sample table
+
+      for (i = 0; i < samples.length; i++) {
+        flags = samples[i].flags;
+        bytes[i + 4] = flags.dependsOn << 4 | flags.isDependedOn << 2 | flags.hasRedundancy;
+      }
+      return box(types.sdtp, bytes);
+    };
+    stbl = function (track) {
+      return box(types.stbl, stsd(track), box(types.stts, STTS), box(types.stsc, STSC), box(types.stsz, STSZ), box(types.stco, STCO));
+    };
+    (function () {
+      var videoSample, audioSample;
+      stsd = function (track) {
+        return box(types.stsd, new Uint8Array([0x00,
+        // version 0
+        0x00, 0x00, 0x00,
+        // flags
+        0x00, 0x00, 0x00, 0x01]), track.type === 'video' ? videoSample(track) : audioSample(track));
+      };
+      videoSample = function (track) {
+        var sps = track.sps || [],
+          pps = track.pps || [],
+          sequenceParameterSets = [],
+          pictureParameterSets = [],
+          i,
+          avc1Box; // assemble the SPSs
+
+        for (i = 0; i < sps.length; i++) {
+          sequenceParameterSets.push((sps[i].byteLength & 0xFF00) >>> 8);
+          sequenceParameterSets.push(sps[i].byteLength & 0xFF); // sequenceParameterSetLength
+
+          sequenceParameterSets = sequenceParameterSets.concat(Array.prototype.slice.call(sps[i])); // SPS
+        } // assemble the PPSs
+
+        for (i = 0; i < pps.length; i++) {
+          pictureParameterSets.push((pps[i].byteLength & 0xFF00) >>> 8);
+          pictureParameterSets.push(pps[i].byteLength & 0xFF);
+          pictureParameterSets = pictureParameterSets.concat(Array.prototype.slice.call(pps[i]));
+        }
+        avc1Box = [types.avc1, new Uint8Array([0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        // reserved
+        0x00, 0x01,
+        // data_reference_index
+        0x00, 0x00,
+        // pre_defined
+        0x00, 0x00,
+        // reserved
+        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        // pre_defined
+        (track.width & 0xff00) >> 8, track.width & 0xff,
+        // width
+        (track.height & 0xff00) >> 8, track.height & 0xff,
+        // height
+        0x00, 0x48, 0x00, 0x00,
+        // horizresolution
+        0x00, 0x48, 0x00, 0x00,
+        // vertresolution
+        0x00, 0x00, 0x00, 0x00,
+        // reserved
+        0x00, 0x01,
+        // frame_count
+        0x13, 0x76, 0x69, 0x64, 0x65, 0x6f, 0x6a, 0x73, 0x2d, 0x63, 0x6f, 0x6e, 0x74, 0x72, 0x69, 0x62, 0x2d, 0x68, 0x6c, 0x73, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        // compressorname
+        0x00, 0x18,
+        // depth = 24
+        0x11, 0x11 // pre_defined = -1
+        ]), box(types.avcC, new Uint8Array([0x01,
+        // configurationVersion
+        track.profileIdc,
+        // AVCProfileIndication
+        track.profileCompatibility,
+        // profile_compatibility
+        track.levelIdc,
+        // AVCLevelIndication
+        0xff // lengthSizeMinusOne, hard-coded to 4 bytes
+        ].concat([sps.length],
+        // numOfSequenceParameterSets
+        sequenceParameterSets,
+        // "SPS"
+        [pps.length],
+        // numOfPictureParameterSets
+        pictureParameterSets // "PPS"
+        ))), box(types.btrt, new Uint8Array([0x00, 0x1c, 0x9c, 0x80,
+        // bufferSizeDB
+        0x00, 0x2d, 0xc6, 0xc0,
+        // maxBitrate
+        0x00, 0x2d, 0xc6, 0xc0 // avgBitrate
+        ]))];
+
+        if (track.sarRatio) {
+          var hSpacing = track.sarRatio[0],
+            vSpacing = track.sarRatio[1];
+          avc1Box.push(box(types.pasp, new Uint8Array([(hSpacing & 0xFF000000) >> 24, (hSpacing & 0xFF0000) >> 16, (hSpacing & 0xFF00) >> 8, hSpacing & 0xFF, (vSpacing & 0xFF000000) >> 24, (vSpacing & 0xFF0000) >> 16, (vSpacing & 0xFF00) >> 8, vSpacing & 0xFF])));
+        }
+        return box.apply(null, avc1Box);
+      };
+      audioSample = function (track) {
+        return box(types.mp4a, new Uint8Array([
+        // SampleEntry, ISO/IEC 14496-12
+        0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        // reserved
+        0x00, 0x01,
+        // data_reference_index
+        // AudioSampleEntry, ISO/IEC 14496-12
+        0x00, 0x00, 0x00, 0x00,
+        // reserved
+        0x00, 0x00, 0x00, 0x00,
+        // reserved
+        (track.channelcount & 0xff00) >> 8, track.channelcount & 0xff,
+        // channelcount
+        (track.samplesize & 0xff00) >> 8, track.samplesize & 0xff,
+        // samplesize
+        0x00, 0x00,
+        // pre_defined
+        0x00, 0x00,
+        // reserved
+        (track.samplerate & 0xff00) >> 8, track.samplerate & 0xff, 0x00, 0x00 // samplerate, 16.16
+        // MP4AudioSampleEntry, ISO/IEC 14496-14
+        ]), esds(track));
+      };
+    })();
+    tkhd = function (track) {
+      var result = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x07,
+      // flags
+      0x00, 0x00, 0x00, 0x00,
+      // creation_time
+      0x00, 0x00, 0x00, 0x00,
+      // modification_time
+      (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+      // track_ID
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      (track.duration & 0xFF000000) >> 24, (track.duration & 0xFF0000) >> 16, (track.duration & 0xFF00) >> 8, track.duration & 0xFF,
+      // duration
+      0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00,
+      // layer
+      0x00, 0x00,
+      // alternate_group
+      0x01, 0x00,
+      // non-audio track volume
+      0x00, 0x00,
+      // reserved
+      0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x00,
+      // transformation: unity matrix
+      (track.width & 0xFF00) >> 8, track.width & 0xFF, 0x00, 0x00,
+      // width
+      (track.height & 0xFF00) >> 8, track.height & 0xFF, 0x00, 0x00 // height
+      ]);
+
+      return box(types.tkhd, result);
+    };
+    /**
+     * Generate a track fragment (traf) box. A traf box collects metadata
+     * about tracks in a movie fragment (moof) box.
+     */
+
+    traf = function (track) {
+      var trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun, sampleDependencyTable, dataOffset, upperWordBaseMediaDecodeTime, lowerWordBaseMediaDecodeTime;
+      trackFragmentHeader = box(types.tfhd, new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x3a,
+      // flags
+      (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+      // track_ID
+      0x00, 0x00, 0x00, 0x01,
+      // sample_description_index
+      0x00, 0x00, 0x00, 0x00,
+      // default_sample_duration
+      0x00, 0x00, 0x00, 0x00,
+      // default_sample_size
+      0x00, 0x00, 0x00, 0x00 // default_sample_flags
+      ]));
+
+      upperWordBaseMediaDecodeTime = Math.floor(track.baseMediaDecodeTime / MAX_UINT32);
+      lowerWordBaseMediaDecodeTime = Math.floor(track.baseMediaDecodeTime % MAX_UINT32);
+      trackFragmentDecodeTime = box(types.tfdt, new Uint8Array([0x01,
+      // version 1
+      0x00, 0x00, 0x00,
+      // flags
+      // baseMediaDecodeTime
+      upperWordBaseMediaDecodeTime >>> 24 & 0xFF, upperWordBaseMediaDecodeTime >>> 16 & 0xFF, upperWordBaseMediaDecodeTime >>> 8 & 0xFF, upperWordBaseMediaDecodeTime & 0xFF, lowerWordBaseMediaDecodeTime >>> 24 & 0xFF, lowerWordBaseMediaDecodeTime >>> 16 & 0xFF, lowerWordBaseMediaDecodeTime >>> 8 & 0xFF, lowerWordBaseMediaDecodeTime & 0xFF])); // the data offset specifies the number of bytes from the start of
+      // the containing moof to the first payload byte of the associated
+      // mdat
+
+      dataOffset = 32 +
+      // tfhd
+      20 +
+      // tfdt
+      8 +
+      // traf header
+      16 +
+      // mfhd
+      8 +
+      // moof header
+      8; // mdat header
+      // audio tracks require less metadata
+
+      if (track.type === 'audio') {
+        trackFragmentRun = trun$1(track, dataOffset);
+        return box(types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun);
+      } // video tracks should contain an independent and disposable samples
+      // box (sdtp)
+      // generate one and adjust offsets to match
+
+      sampleDependencyTable = sdtp(track);
+      trackFragmentRun = trun$1(track, sampleDependencyTable.length + dataOffset);
+      return box(types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun, sampleDependencyTable);
+    };
+    /**
+     * Generate a track box.
+     * @param track {object} a track definition
+     * @return {Uint8Array} the track box
+     */
+
+    trak = function (track) {
+      track.duration = track.duration || 0xffffffff;
+      return box(types.trak, tkhd(track), mdia(track));
+    };
+    trex = function (track) {
+      var result = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+      // track_ID
+      0x00, 0x00, 0x00, 0x01,
+      // default_sample_description_index
+      0x00, 0x00, 0x00, 0x00,
+      // default_sample_duration
+      0x00, 0x00, 0x00, 0x00,
+      // default_sample_size
+      0x00, 0x01, 0x00, 0x01 // default_sample_flags
+      ]); // the last two bytes of default_sample_flags is the sample
+      // degradation priority, a hint about the importance of this sample
+      // relative to others. Lower the degradation priority for all sample
+      // types other than video.
+
+      if (track.type !== 'video') {
+        result[result.length - 1] = 0x00;
+      }
+      return box(types.trex, result);
+    };
+    (function () {
+      var audioTrun, videoTrun, trunHeader; // This method assumes all samples are uniform. That is, if a
+      // duration is present for the first sample, it will be present for
+      // all subsequent samples.
+      // see ISO/IEC 14496-12:2012, Section 8.8.8.1
+
+      trunHeader = function (samples, offset) {
+        var durationPresent = 0,
+          sizePresent = 0,
+          flagsPresent = 0,
+          compositionTimeOffset = 0; // trun flag constants
+
+        if (samples.length) {
+          if (samples[0].duration !== undefined) {
+            durationPresent = 0x1;
+          }
+          if (samples[0].size !== undefined) {
+            sizePresent = 0x2;
+          }
+          if (samples[0].flags !== undefined) {
+            flagsPresent = 0x4;
+          }
+          if (samples[0].compositionTimeOffset !== undefined) {
+            compositionTimeOffset = 0x8;
+          }
+        }
+        return [0x00,
+        // version 0
+        0x00, durationPresent | sizePresent | flagsPresent | compositionTimeOffset, 0x01,
+        // flags
+        (samples.length & 0xFF000000) >>> 24, (samples.length & 0xFF0000) >>> 16, (samples.length & 0xFF00) >>> 8, samples.length & 0xFF,
+        // sample_count
+        (offset & 0xFF000000) >>> 24, (offset & 0xFF0000) >>> 16, (offset & 0xFF00) >>> 8, offset & 0xFF // data_offset
+        ];
+      };
+
+      videoTrun = function (track, offset) {
+        var bytesOffest, bytes, header, samples, sample, i;
+        samples = track.samples || [];
+        offset += 8 + 12 + 16 * samples.length;
+        header = trunHeader(samples, offset);
+        bytes = new Uint8Array(header.length + samples.length * 16);
+        bytes.set(header);
+        bytesOffest = header.length;
+        for (i = 0; i < samples.length; i++) {
+          sample = samples[i];
+          bytes[bytesOffest++] = (sample.duration & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.duration & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.duration & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.duration & 0xFF; // sample_duration
+
+          bytes[bytesOffest++] = (sample.size & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.size & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.size & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.size & 0xFF; // sample_size
+
+          bytes[bytesOffest++] = sample.flags.isLeading << 2 | sample.flags.dependsOn;
+          bytes[bytesOffest++] = sample.flags.isDependedOn << 6 | sample.flags.hasRedundancy << 4 | sample.flags.paddingValue << 1 | sample.flags.isNonSyncSample;
+          bytes[bytesOffest++] = sample.flags.degradationPriority & 0xF0 << 8;
+          bytes[bytesOffest++] = sample.flags.degradationPriority & 0x0F; // sample_flags
+
+          bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.compositionTimeOffset & 0xFF; // sample_composition_time_offset
+        }
+
+        return box(types.trun, bytes);
+      };
+      audioTrun = function (track, offset) {
+        var bytes, bytesOffest, header, samples, sample, i;
+        samples = track.samples || [];
+        offset += 8 + 12 + 8 * samples.length;
+        header = trunHeader(samples, offset);
+        bytes = new Uint8Array(header.length + samples.length * 8);
+        bytes.set(header);
+        bytesOffest = header.length;
+        for (i = 0; i < samples.length; i++) {
+          sample = samples[i];
+          bytes[bytesOffest++] = (sample.duration & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.duration & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.duration & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.duration & 0xFF; // sample_duration
+
+          bytes[bytesOffest++] = (sample.size & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.size & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.size & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.size & 0xFF; // sample_size
+        }
+
+        return box(types.trun, bytes);
+      };
+      trun$1 = function (track, offset) {
+        if (track.type === 'audio') {
+          return audioTrun(track, offset);
+        }
+        return videoTrun(track, offset);
+      };
+    })();
+    var mp4Generator = {
+      ftyp: ftyp,
+      mdat: mdat,
+      moof: moof,
+      moov: moov,
+      initSegment: function (tracks) {
+        var fileType = ftyp(),
+          movie = moov(tracks),
+          result;
+        result = new Uint8Array(fileType.byteLength + movie.byteLength);
+        result.set(fileType);
+        result.set(movie, fileType.byteLength);
+        return result;
+      }
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+    // composed of the nal units that make up that frame
+    // Also keep track of cummulative data about the frame from the nal units such
+    // as the frame duration, starting pts, etc.
+
+    var groupNalsIntoFrames = function (nalUnits) {
+      var i,
+        currentNal,
+        currentFrame = [],
+        frames = []; // TODO added for LHLS, make sure this is OK
+
+      frames.byteLength = 0;
+      frames.nalCount = 0;
+      frames.duration = 0;
+      currentFrame.byteLength = 0;
+      for (i = 0; i < nalUnits.length; i++) {
+        currentNal = nalUnits[i]; // Split on 'aud'-type nal units
+
+        if (currentNal.nalUnitType === 'access_unit_delimiter_rbsp') {
+          // Since the very first nal unit is expected to be an AUD
+          // only push to the frames array when currentFrame is not empty
+          if (currentFrame.length) {
+            currentFrame.duration = currentNal.dts - currentFrame.dts; // TODO added for LHLS, make sure this is OK
+
+            frames.byteLength += currentFrame.byteLength;
+            frames.nalCount += currentFrame.length;
+            frames.duration += currentFrame.duration;
+            frames.push(currentFrame);
+          }
+          currentFrame = [currentNal];
+          currentFrame.byteLength = currentNal.data.byteLength;
+          currentFrame.pts = currentNal.pts;
+          currentFrame.dts = currentNal.dts;
+        } else {
+          // Specifically flag key frames for ease of use later
+          if (currentNal.nalUnitType === 'slice_layer_without_partitioning_rbsp_idr') {
+            currentFrame.keyFrame = true;
+          }
+          currentFrame.duration = currentNal.dts - currentFrame.dts;
+          currentFrame.byteLength += currentNal.data.byteLength;
+          currentFrame.push(currentNal);
+        }
+      } // For the last frame, use the duration of the previous frame if we
+      // have nothing better to go on
+
+      if (frames.length && (!currentFrame.duration || currentFrame.duration <= 0)) {
+        currentFrame.duration = frames[frames.length - 1].duration;
+      } // Push the final frame
+      // TODO added for LHLS, make sure this is OK
+
+      frames.byteLength += currentFrame.byteLength;
+      frames.nalCount += currentFrame.length;
+      frames.duration += currentFrame.duration;
+      frames.push(currentFrame);
+      return frames;
+    }; // Convert an array of frames into an array of Gop with each Gop being composed
+    // of the frames that make up that Gop
+    // Also keep track of cummulative data about the Gop from the frames such as the
+    // Gop duration, starting pts, etc.
+
+    var groupFramesIntoGops = function (frames) {
+      var i,
+        currentFrame,
+        currentGop = [],
+        gops = []; // We must pre-set some of the values on the Gop since we
+      // keep running totals of these values
+
+      currentGop.byteLength = 0;
+      currentGop.nalCount = 0;
+      currentGop.duration = 0;
+      currentGop.pts = frames[0].pts;
+      currentGop.dts = frames[0].dts; // store some metadata about all the Gops
+
+      gops.byteLength = 0;
+      gops.nalCount = 0;
+      gops.duration = 0;
+      gops.pts = frames[0].pts;
+      gops.dts = frames[0].dts;
+      for (i = 0; i < frames.length; i++) {
+        currentFrame = frames[i];
+        if (currentFrame.keyFrame) {
+          // Since the very first frame is expected to be an keyframe
+          // only push to the gops array when currentGop is not empty
+          if (currentGop.length) {
+            gops.push(currentGop);
+            gops.byteLength += currentGop.byteLength;
+            gops.nalCount += currentGop.nalCount;
+            gops.duration += currentGop.duration;
+          }
+          currentGop = [currentFrame];
+          currentGop.nalCount = currentFrame.length;
+          currentGop.byteLength = currentFrame.byteLength;
+          currentGop.pts = currentFrame.pts;
+          currentGop.dts = currentFrame.dts;
+          currentGop.duration = currentFrame.duration;
+        } else {
+          currentGop.duration += currentFrame.duration;
+          currentGop.nalCount += currentFrame.length;
+          currentGop.byteLength += currentFrame.byteLength;
+          currentGop.push(currentFrame);
+        }
+      }
+      if (gops.length && currentGop.duration <= 0) {
+        currentGop.duration = gops[gops.length - 1].duration;
+      }
+      gops.byteLength += currentGop.byteLength;
+      gops.nalCount += currentGop.nalCount;
+      gops.duration += currentGop.duration; // push the final Gop
+
+      gops.push(currentGop);
+      return gops;
+    };
+    /*
+     * Search for the first keyframe in the GOPs and throw away all frames
+     * until that keyframe. Then extend the duration of the pulled keyframe
+     * and pull the PTS and DTS of the keyframe so that it covers the time
+     * range of the frames that were disposed.
+     *
+     * @param {Array} gops video GOPs
+     * @returns {Array} modified video GOPs
+     */
+
+    var extendFirstKeyFrame = function (gops) {
+      var currentGop;
+      if (!gops[0][0].keyFrame && gops.length > 1) {
+        // Remove the first GOP
+        currentGop = gops.shift();
+        gops.byteLength -= currentGop.byteLength;
+        gops.nalCount -= currentGop.nalCount; // Extend the first frame of what is now the
+        // first gop to cover the time period of the
+        // frames we just removed
+
+        gops[0][0].dts = currentGop.dts;
+        gops[0][0].pts = currentGop.pts;
+        gops[0][0].duration += currentGop.duration;
+      }
+      return gops;
+    };
+    /**
+     * Default sample object
+     * see ISO/IEC 14496-12:2012, section 8.6.4.3
+     */
+
+    var createDefaultSample = function () {
+      return {
+        size: 0,
+        flags: {
+          isLeading: 0,
+          dependsOn: 1,
+          isDependedOn: 0,
+          hasRedundancy: 0,
+          degradationPriority: 0,
+          isNonSyncSample: 1
+        }
+      };
+    };
+    /*
+     * Collates information from a video frame into an object for eventual
+     * entry into an MP4 sample table.
+     *
+     * @param {Object} frame the video frame
+     * @param {Number} dataOffset the byte offset to position the sample
+     * @return {Object} object containing sample table info for a frame
+     */
+
+    var sampleForFrame = function (frame, dataOffset) {
+      var sample = createDefaultSample();
+      sample.dataOffset = dataOffset;
+      sample.compositionTimeOffset = frame.pts - frame.dts;
+      sample.duration = frame.duration;
+      sample.size = 4 * frame.length; // Space for nal unit size
+
+      sample.size += frame.byteLength;
+      if (frame.keyFrame) {
+        sample.flags.dependsOn = 2;
+        sample.flags.isNonSyncSample = 0;
+      }
+      return sample;
+    }; // generate the track's sample table from an array of gops
+
+    var generateSampleTable$1 = function (gops, baseDataOffset) {
+      var h,
+        i,
+        sample,
+        currentGop,
+        currentFrame,
+        dataOffset = baseDataOffset || 0,
+        samples = [];
+      for (h = 0; h < gops.length; h++) {
+        currentGop = gops[h];
+        for (i = 0; i < currentGop.length; i++) {
+          currentFrame = currentGop[i];
+          sample = sampleForFrame(currentFrame, dataOffset);
+          dataOffset += sample.size;
+          samples.push(sample);
+        }
+      }
+      return samples;
+    }; // generate the track's raw mdat data from an array of gops
+
+    var concatenateNalData = function (gops) {
+      var h,
+        i,
+        j,
+        currentGop,
+        currentFrame,
+        currentNal,
+        dataOffset = 0,
+        nalsByteLength = gops.byteLength,
+        numberOfNals = gops.nalCount,
+        totalByteLength = nalsByteLength + 4 * numberOfNals,
+        data = new Uint8Array(totalByteLength),
+        view = new DataView(data.buffer); // For each Gop..
+
+      for (h = 0; h < gops.length; h++) {
+        currentGop = gops[h]; // For each Frame..
+
+        for (i = 0; i < currentGop.length; i++) {
+          currentFrame = currentGop[i]; // For each NAL..
+
+          for (j = 0; j < currentFrame.length; j++) {
+            currentNal = currentFrame[j];
+            view.setUint32(dataOffset, currentNal.data.byteLength);
+            dataOffset += 4;
+            data.set(currentNal.data, dataOffset);
+            dataOffset += currentNal.data.byteLength;
+          }
+        }
+      }
+      return data;
+    }; // generate the track's sample table from a frame
+
+    var generateSampleTableForFrame = function (frame, baseDataOffset) {
+      var sample,
+        dataOffset = baseDataOffset || 0,
+        samples = [];
+      sample = sampleForFrame(frame, dataOffset);
+      samples.push(sample);
+      return samples;
+    }; // generate the track's raw mdat data from a frame
+
+    var concatenateNalDataForFrame = function (frame) {
+      var i,
+        currentNal,
+        dataOffset = 0,
+        nalsByteLength = frame.byteLength,
+        numberOfNals = frame.length,
+        totalByteLength = nalsByteLength + 4 * numberOfNals,
+        data = new Uint8Array(totalByteLength),
+        view = new DataView(data.buffer); // For each NAL..
+
+      for (i = 0; i < frame.length; i++) {
+        currentNal = frame[i];
+        view.setUint32(dataOffset, currentNal.data.byteLength);
+        dataOffset += 4;
+        data.set(currentNal.data, dataOffset);
+        dataOffset += currentNal.data.byteLength;
+      }
+      return data;
+    };
+    var frameUtils$1 = {
+      groupNalsIntoFrames: groupNalsIntoFrames,
+      groupFramesIntoGops: groupFramesIntoGops,
+      extendFirstKeyFrame: extendFirstKeyFrame,
+      generateSampleTable: generateSampleTable$1,
+      concatenateNalData: concatenateNalData,
+      generateSampleTableForFrame: generateSampleTableForFrame,
+      concatenateNalDataForFrame: concatenateNalDataForFrame
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var highPrefix = [33, 16, 5, 32, 164, 27];
+    var lowPrefix = [33, 65, 108, 84, 1, 2, 4, 8, 168, 2, 4, 8, 17, 191, 252];
+    var zeroFill = function (count) {
+      var a = [];
+      while (count--) {
+        a.push(0);
+      }
+      return a;
+    };
+    var makeTable = function (metaTable) {
+      return Object.keys(metaTable).reduce(function (obj, key) {
+        obj[key] = new Uint8Array(metaTable[key].reduce(function (arr, part) {
+          return arr.concat(part);
+        }, []));
+        return obj;
+      }, {});
+    };
+    var silence;
+    var silence_1 = function () {
+      if (!silence) {
+        // Frames-of-silence to use for filling in missing AAC frames
+        var coneOfSilence = {
+          96000: [highPrefix, [227, 64], zeroFill(154), [56]],
+          88200: [highPrefix, [231], zeroFill(170), [56]],
+          64000: [highPrefix, [248, 192], zeroFill(240), [56]],
+          48000: [highPrefix, [255, 192], zeroFill(268), [55, 148, 128], zeroFill(54), [112]],
+          44100: [highPrefix, [255, 192], zeroFill(268), [55, 163, 128], zeroFill(84), [112]],
+          32000: [highPrefix, [255, 192], zeroFill(268), [55, 234], zeroFill(226), [112]],
+          24000: [highPrefix, [255, 192], zeroFill(268), [55, 255, 128], zeroFill(268), [111, 112], zeroFill(126), [224]],
+          16000: [highPrefix, [255, 192], zeroFill(268), [55, 255, 128], zeroFill(268), [111, 255], zeroFill(269), [223, 108], zeroFill(195), [1, 192]],
+          12000: [lowPrefix, zeroFill(268), [3, 127, 248], zeroFill(268), [6, 255, 240], zeroFill(268), [13, 255, 224], zeroFill(268), [27, 253, 128], zeroFill(259), [56]],
+          11025: [lowPrefix, zeroFill(268), [3, 127, 248], zeroFill(268), [6, 255, 240], zeroFill(268), [13, 255, 224], zeroFill(268), [27, 255, 192], zeroFill(268), [55, 175, 128], zeroFill(108), [112]],
+          8000: [lowPrefix, zeroFill(268), [3, 121, 16], zeroFill(47), [7]]
+        };
+        silence = makeTable(coneOfSilence);
+      }
+      return silence;
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var ONE_SECOND_IN_TS$4 = 90000,
+      // 90kHz clock
+      secondsToVideoTs,
+      secondsToAudioTs,
+      videoTsToSeconds,
+      audioTsToSeconds,
+      audioTsToVideoTs,
+      videoTsToAudioTs,
+      metadataTsToSeconds;
+    secondsToVideoTs = function (seconds) {
+      return seconds * ONE_SECOND_IN_TS$4;
+    };
+    secondsToAudioTs = function (seconds, sampleRate) {
+      return seconds * sampleRate;
+    };
+    videoTsToSeconds = function (timestamp) {
+      return timestamp / ONE_SECOND_IN_TS$4;
+    };
+    audioTsToSeconds = function (timestamp, sampleRate) {
+      return timestamp / sampleRate;
+    };
+    audioTsToVideoTs = function (timestamp, sampleRate) {
+      return secondsToVideoTs(audioTsToSeconds(timestamp, sampleRate));
+    };
+    videoTsToAudioTs = function (timestamp, sampleRate) {
+      return secondsToAudioTs(videoTsToSeconds(timestamp), sampleRate);
+    };
+    /**
+     * Adjust ID3 tag or caption timing information by the timeline pts values
+     * (if keepOriginalTimestamps is false) and convert to seconds
+     */
+
+    metadataTsToSeconds = function (timestamp, timelineStartPts, keepOriginalTimestamps) {
+      return videoTsToSeconds(keepOriginalTimestamps ? timestamp : timestamp - timelineStartPts);
+    };
+    var clock$2 = {
+      ONE_SECOND_IN_TS: ONE_SECOND_IN_TS$4,
+      secondsToVideoTs: secondsToVideoTs,
+      secondsToAudioTs: secondsToAudioTs,
+      videoTsToSeconds: videoTsToSeconds,
+      audioTsToSeconds: audioTsToSeconds,
+      audioTsToVideoTs: audioTsToVideoTs,
+      videoTsToAudioTs: videoTsToAudioTs,
+      metadataTsToSeconds: metadataTsToSeconds
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var coneOfSilence = silence_1;
+    var clock$1 = clock$2;
+    /**
+     * Sum the `byteLength` properties of the data in each AAC frame
+     */
+
+    var sumFrameByteLengths = function (array) {
+      var i,
+        currentObj,
+        sum = 0; // sum the byteLength's all each nal unit in the frame
+
+      for (i = 0; i < array.length; i++) {
+        currentObj = array[i];
+        sum += currentObj.data.byteLength;
+      }
+      return sum;
+    }; // Possibly pad (prefix) the audio track with silence if appending this track
+    // would lead to the introduction of a gap in the audio buffer
+
+    var prefixWithSilence = function (track, frames, audioAppendStartTs, videoBaseMediaDecodeTime) {
+      var baseMediaDecodeTimeTs,
+        frameDuration = 0,
+        audioGapDuration = 0,
+        audioFillFrameCount = 0,
+        audioFillDuration = 0,
+        silentFrame,
+        i,
+        firstFrame;
+      if (!frames.length) {
+        return;
+      }
+      baseMediaDecodeTimeTs = clock$1.audioTsToVideoTs(track.baseMediaDecodeTime, track.samplerate); // determine frame clock duration based on sample rate, round up to avoid overfills
+
+      frameDuration = Math.ceil(clock$1.ONE_SECOND_IN_TS / (track.samplerate / 1024));
+      if (audioAppendStartTs && videoBaseMediaDecodeTime) {
+        // insert the shortest possible amount (audio gap or audio to video gap)
+        audioGapDuration = baseMediaDecodeTimeTs - Math.max(audioAppendStartTs, videoBaseMediaDecodeTime); // number of full frames in the audio gap
+
+        audioFillFrameCount = Math.floor(audioGapDuration / frameDuration);
+        audioFillDuration = audioFillFrameCount * frameDuration;
+      } // don't attempt to fill gaps smaller than a single frame or larger
+      // than a half second
+
+      if (audioFillFrameCount < 1 || audioFillDuration > clock$1.ONE_SECOND_IN_TS / 2) {
+        return;
+      }
+      silentFrame = coneOfSilence()[track.samplerate];
+      if (!silentFrame) {
+        // we don't have a silent frame pregenerated for the sample rate, so use a frame
+        // from the content instead
+        silentFrame = frames[0].data;
+      }
+      for (i = 0; i < audioFillFrameCount; i++) {
+        firstFrame = frames[0];
+        frames.splice(0, 0, {
+          data: silentFrame,
+          dts: firstFrame.dts - frameDuration,
+          pts: firstFrame.pts - frameDuration
+        });
+      }
+      track.baseMediaDecodeTime -= Math.floor(clock$1.videoTsToAudioTs(audioFillDuration, track.samplerate));
+      return audioFillDuration;
+    }; // If the audio segment extends before the earliest allowed dts
+    // value, remove AAC frames until starts at or after the earliest
+    // allowed DTS so that we don't end up with a negative baseMedia-
+    // DecodeTime for the audio track
+
+    var trimAdtsFramesByEarliestDts = function (adtsFrames, track, earliestAllowedDts) {
+      if (track.minSegmentDts >= earliestAllowedDts) {
+        return adtsFrames;
+      } // We will need to recalculate the earliest segment Dts
+
+      track.minSegmentDts = Infinity;
+      return adtsFrames.filter(function (currentFrame) {
+        // If this is an allowed frame, keep it and record it's Dts
+        if (currentFrame.dts >= earliestAllowedDts) {
+          track.minSegmentDts = Math.min(track.minSegmentDts, currentFrame.dts);
+          track.minSegmentPts = track.minSegmentDts;
+          return true;
+        } // Otherwise, discard it
+
+        return false;
+      });
+    }; // generate the track's raw mdat data from an array of frames
+
+    var generateSampleTable = function (frames) {
+      var i,
+        currentFrame,
+        samples = [];
+      for (i = 0; i < frames.length; i++) {
+        currentFrame = frames[i];
+        samples.push({
+          size: currentFrame.data.byteLength,
+          duration: 1024 // For AAC audio, all samples contain 1024 samples
+        });
+      }
+
+      return samples;
+    }; // generate the track's sample table from an array of frames
+
+    var concatenateFrameData = function (frames) {
+      var i,
+        currentFrame,
+        dataOffset = 0,
+        data = new Uint8Array(sumFrameByteLengths(frames));
+      for (i = 0; i < frames.length; i++) {
+        currentFrame = frames[i];
+        data.set(currentFrame.data, dataOffset);
+        dataOffset += currentFrame.data.byteLength;
+      }
+      return data;
+    };
+    var audioFrameUtils$1 = {
+      prefixWithSilence: prefixWithSilence,
+      trimAdtsFramesByEarliestDts: trimAdtsFramesByEarliestDts,
+      generateSampleTable: generateSampleTable,
+      concatenateFrameData: concatenateFrameData
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var ONE_SECOND_IN_TS$3 = clock$2.ONE_SECOND_IN_TS;
+    /**
+     * Store information about the start and end of the track and the
+     * duration for each frame/sample we process in order to calculate
+     * the baseMediaDecodeTime
+     */
+
+    var collectDtsInfo = function (track, data) {
+      if (typeof data.pts === 'number') {
+        if (track.timelineStartInfo.pts === undefined) {
+          track.timelineStartInfo.pts = data.pts;
+        }
+        if (track.minSegmentPts === undefined) {
+          track.minSegmentPts = data.pts;
+        } else {
+          track.minSegmentPts = Math.min(track.minSegmentPts, data.pts);
+        }
+        if (track.maxSegmentPts === undefined) {
+          track.maxSegmentPts = data.pts;
+        } else {
+          track.maxSegmentPts = Math.max(track.maxSegmentPts, data.pts);
+        }
+      }
+      if (typeof data.dts === 'number') {
+        if (track.timelineStartInfo.dts === undefined) {
+          track.timelineStartInfo.dts = data.dts;
+        }
+        if (track.minSegmentDts === undefined) {
+          track.minSegmentDts = data.dts;
+        } else {
+          track.minSegmentDts = Math.min(track.minSegmentDts, data.dts);
+        }
+        if (track.maxSegmentDts === undefined) {
+          track.maxSegmentDts = data.dts;
+        } else {
+          track.maxSegmentDts = Math.max(track.maxSegmentDts, data.dts);
+        }
+      }
+    };
+    /**
+     * Clear values used to calculate the baseMediaDecodeTime between
+     * tracks
+     */
+
+    var clearDtsInfo = function (track) {
+      delete track.minSegmentDts;
+      delete track.maxSegmentDts;
+      delete track.minSegmentPts;
+      delete track.maxSegmentPts;
+    };
+    /**
+     * Calculate the track's baseMediaDecodeTime based on the earliest
+     * DTS the transmuxer has ever seen and the minimum DTS for the
+     * current track
+     * @param track {object} track metadata configuration
+     * @param keepOriginalTimestamps {boolean} If true, keep the timestamps
+     *        in the source; false to adjust the first segment to start at 0.
+     */
+
+    var calculateTrackBaseMediaDecodeTime = function (track, keepOriginalTimestamps) {
+      var baseMediaDecodeTime,
+        scale,
+        minSegmentDts = track.minSegmentDts; // Optionally adjust the time so the first segment starts at zero.
+
+      if (!keepOriginalTimestamps) {
+        minSegmentDts -= track.timelineStartInfo.dts;
+      } // track.timelineStartInfo.baseMediaDecodeTime is the location, in time, where
+      // we want the start of the first segment to be placed
+
+      baseMediaDecodeTime = track.timelineStartInfo.baseMediaDecodeTime; // Add to that the distance this segment is from the very first
+
+      baseMediaDecodeTime += minSegmentDts; // baseMediaDecodeTime must not become negative
+
+      baseMediaDecodeTime = Math.max(0, baseMediaDecodeTime);
+      if (track.type === 'audio') {
+        // Audio has a different clock equal to the sampling_rate so we need to
+        // scale the PTS values into the clock rate of the track
+        scale = track.samplerate / ONE_SECOND_IN_TS$3;
+        baseMediaDecodeTime *= scale;
+        baseMediaDecodeTime = Math.floor(baseMediaDecodeTime);
+      }
+      return baseMediaDecodeTime;
+    };
+    var trackDecodeInfo$1 = {
+      clearDtsInfo: clearDtsInfo,
+      calculateTrackBaseMediaDecodeTime: calculateTrackBaseMediaDecodeTime,
+      collectDtsInfo: collectDtsInfo
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Reads in-band caption information from a video elementary
+     * stream. Captions must follow the CEA-708 standard for injection
+     * into an MPEG-2 transport streams.
+     * @see https://en.wikipedia.org/wiki/CEA-708
+     * @see https://www.gpo.gov/fdsys/pkg/CFR-2007-title47-vol1/pdf/CFR-2007-title47-vol1-sec15-119.pdf
+     */
+    // payload type field to indicate how they are to be
+    // interpreted. CEAS-708 caption content is always transmitted with
+    // payload type 0x04.
+
+    var USER_DATA_REGISTERED_ITU_T_T35 = 4,
+      RBSP_TRAILING_BITS = 128;
+    /**
+      * Parse a supplemental enhancement information (SEI) NAL unit.
+      * Stops parsing once a message of type ITU T T35 has been found.
+      *
+      * @param bytes {Uint8Array} the bytes of a SEI NAL unit
+      * @return {object} the parsed SEI payload
+      * @see Rec. ITU-T H.264, 7.3.2.3.1
+      */
+
+    var parseSei = function (bytes) {
+      var i = 0,
+        result = {
+          payloadType: -1,
+          payloadSize: 0
+        },
+        payloadType = 0,
+        payloadSize = 0; // go through the sei_rbsp parsing each each individual sei_message
+
+      while (i < bytes.byteLength) {
+        // stop once we have hit the end of the sei_rbsp
+        if (bytes[i] === RBSP_TRAILING_BITS) {
+          break;
+        } // Parse payload type
+
+        while (bytes[i] === 0xFF) {
+          payloadType += 255;
+          i++;
+        }
+        payloadType += bytes[i++]; // Parse payload size
+
+        while (bytes[i] === 0xFF) {
+          payloadSize += 255;
+          i++;
+        }
+        payloadSize += bytes[i++]; // this sei_message is a 608/708 caption so save it and break
+        // there can only ever be one caption message in a frame's sei
+
+        if (!result.payload && payloadType === USER_DATA_REGISTERED_ITU_T_T35) {
+          var userIdentifier = String.fromCharCode(bytes[i + 3], bytes[i + 4], bytes[i + 5], bytes[i + 6]);
+          if (userIdentifier === 'GA94') {
+            result.payloadType = payloadType;
+            result.payloadSize = payloadSize;
+            result.payload = bytes.subarray(i, i + payloadSize);
+            break;
+          } else {
+            result.payload = void 0;
+          }
+        } // skip the payload and parse the next message
+
+        i += payloadSize;
+        payloadType = 0;
+        payloadSize = 0;
+      }
+      return result;
+    }; // see ANSI/SCTE 128-1 (2013), section 8.1
+
+    var parseUserData = function (sei) {
+      // itu_t_t35_contry_code must be 181 (United States) for
+      // captions
+      if (sei.payload[0] !== 181) {
+        return null;
+      } // itu_t_t35_provider_code should be 49 (ATSC) for captions
+
+      if ((sei.payload[1] << 8 | sei.payload[2]) !== 49) {
+        return null;
+      } // the user_identifier should be "GA94" to indicate ATSC1 data
+
+      if (String.fromCharCode(sei.payload[3], sei.payload[4], sei.payload[5], sei.payload[6]) !== 'GA94') {
+        return null;
+      } // finally, user_data_type_code should be 0x03 for caption data
+
+      if (sei.payload[7] !== 0x03) {
+        return null;
+      } // return the user_data_type_structure and strip the trailing
+      // marker bits
+
+      return sei.payload.subarray(8, sei.payload.length - 1);
+    }; // see CEA-708-D, section 4.4
+
+    var parseCaptionPackets = function (pts, userData) {
+      var results = [],
+        i,
+        count,
+        offset,
+        data; // if this is just filler, return immediately
+
+      if (!(userData[0] & 0x40)) {
+        return results;
+      } // parse out the cc_data_1 and cc_data_2 fields
+
+      count = userData[0] & 0x1f;
+      for (i = 0; i < count; i++) {
+        offset = i * 3;
+        data = {
+          type: userData[offset + 2] & 0x03,
+          pts: pts
+        }; // capture cc data when cc_valid is 1
+
+        if (userData[offset + 2] & 0x04) {
+          data.ccData = userData[offset + 3] << 8 | userData[offset + 4];
+          results.push(data);
+        }
+      }
+      return results;
+    };
+    var discardEmulationPreventionBytes$1 = function (data) {
+      var length = data.byteLength,
+        emulationPreventionBytesPositions = [],
+        i = 1,
+        newLength,
+        newData; // Find all `Emulation Prevention Bytes`
+
+      while (i < length - 2) {
+        if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0x03) {
+          emulationPreventionBytesPositions.push(i + 2);
+          i += 2;
+        } else {
+          i++;
+        }
+      } // If no Emulation Prevention Bytes were found just return the original
+      // array
+
+      if (emulationPreventionBytesPositions.length === 0) {
+        return data;
+      } // Create a new array to hold the NAL unit data
+
+      newLength = length - emulationPreventionBytesPositions.length;
+      newData = new Uint8Array(newLength);
+      var sourceIndex = 0;
+      for (i = 0; i < newLength; sourceIndex++, i++) {
+        if (sourceIndex === emulationPreventionBytesPositions[0]) {
+          // Skip this byte
+          sourceIndex++; // Remove this position index
+
+          emulationPreventionBytesPositions.shift();
+        }
+        newData[i] = data[sourceIndex];
+      }
+      return newData;
+    }; // exports
+
+    var captionPacketParser = {
+      parseSei: parseSei,
+      parseUserData: parseUserData,
+      parseCaptionPackets: parseCaptionPackets,
+      discardEmulationPreventionBytes: discardEmulationPreventionBytes$1,
+      USER_DATA_REGISTERED_ITU_T_T35: USER_DATA_REGISTERED_ITU_T_T35
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Reads in-band caption information from a video elementary
+     * stream. Captions must follow the CEA-708 standard for injection
+     * into an MPEG-2 transport streams.
+     * @see https://en.wikipedia.org/wiki/CEA-708
+     * @see https://www.gpo.gov/fdsys/pkg/CFR-2007-title47-vol1/pdf/CFR-2007-title47-vol1-sec15-119.pdf
+     */
+    // Link To Transport
+    // -----------------
+
+    var Stream$7 = stream;
+    var cea708Parser = captionPacketParser;
+    var CaptionStream$2 = function (options) {
+      options = options || {};
+      CaptionStream$2.prototype.init.call(this); // parse708captions flag, default to true
+
+      this.parse708captions_ = typeof options.parse708captions === 'boolean' ? options.parse708captions : true;
+      this.captionPackets_ = [];
+      this.ccStreams_ = [new Cea608Stream(0, 0),
+      // eslint-disable-line no-use-before-define
+      new Cea608Stream(0, 1),
+      // eslint-disable-line no-use-before-define
+      new Cea608Stream(1, 0),
+      // eslint-disable-line no-use-before-define
+      new Cea608Stream(1, 1) // eslint-disable-line no-use-before-define
+      ];
+
+      if (this.parse708captions_) {
+        this.cc708Stream_ = new Cea708Stream({
+          captionServices: options.captionServices
+        }); // eslint-disable-line no-use-before-define
+      }
+
+      this.reset(); // forward data and done events from CCs to this CaptionStream
+
+      this.ccStreams_.forEach(function (cc) {
+        cc.on('data', this.trigger.bind(this, 'data'));
+        cc.on('partialdone', this.trigger.bind(this, 'partialdone'));
+        cc.on('done', this.trigger.bind(this, 'done'));
+      }, this);
+      if (this.parse708captions_) {
+        this.cc708Stream_.on('data', this.trigger.bind(this, 'data'));
+        this.cc708Stream_.on('partialdone', this.trigger.bind(this, 'partialdone'));
+        this.cc708Stream_.on('done', this.trigger.bind(this, 'done'));
+      }
+    };
+    CaptionStream$2.prototype = new Stream$7();
+    CaptionStream$2.prototype.push = function (event) {
+      var sei, userData, newCaptionPackets; // only examine SEI NALs
+
+      if (event.nalUnitType !== 'sei_rbsp') {
+        return;
+      } // parse the sei
+
+      sei = cea708Parser.parseSei(event.escapedRBSP); // no payload data, skip
+
+      if (!sei.payload) {
+        return;
+      } // ignore everything but user_data_registered_itu_t_t35
+
+      if (sei.payloadType !== cea708Parser.USER_DATA_REGISTERED_ITU_T_T35) {
+        return;
+      } // parse out the user data payload
+
+      userData = cea708Parser.parseUserData(sei); // ignore unrecognized userData
+
+      if (!userData) {
+        return;
+      } // Sometimes, the same segment # will be downloaded twice. To stop the
+      // caption data from being processed twice, we track the latest dts we've
+      // received and ignore everything with a dts before that. However, since
+      // data for a specific dts can be split across packets on either side of
+      // a segment boundary, we need to make sure we *don't* ignore the packets
+      // from the *next* segment that have dts === this.latestDts_. By constantly
+      // tracking the number of packets received with dts === this.latestDts_, we
+      // know how many should be ignored once we start receiving duplicates.
+
+      if (event.dts < this.latestDts_) {
+        // We've started getting older data, so set the flag.
+        this.ignoreNextEqualDts_ = true;
+        return;
+      } else if (event.dts === this.latestDts_ && this.ignoreNextEqualDts_) {
+        this.numSameDts_--;
+        if (!this.numSameDts_) {
+          // We've received the last duplicate packet, time to start processing again
+          this.ignoreNextEqualDts_ = false;
+        }
+        return;
+      } // parse out CC data packets and save them for later
+
+      newCaptionPackets = cea708Parser.parseCaptionPackets(event.pts, userData);
+      this.captionPackets_ = this.captionPackets_.concat(newCaptionPackets);
+      if (this.latestDts_ !== event.dts) {
+        this.numSameDts_ = 0;
+      }
+      this.numSameDts_++;
+      this.latestDts_ = event.dts;
+    };
+    CaptionStream$2.prototype.flushCCStreams = function (flushType) {
+      this.ccStreams_.forEach(function (cc) {
+        return flushType === 'flush' ? cc.flush() : cc.partialFlush();
+      }, this);
+    };
+    CaptionStream$2.prototype.flushStream = function (flushType) {
+      // make sure we actually parsed captions before proceeding
+      if (!this.captionPackets_.length) {
+        this.flushCCStreams(flushType);
+        return;
+      } // In Chrome, the Array#sort function is not stable so add a
+      // presortIndex that we can use to ensure we get a stable-sort
+
+      this.captionPackets_.forEach(function (elem, idx) {
+        elem.presortIndex = idx;
+      }); // sort caption byte-pairs based on their PTS values
+
+      this.captionPackets_.sort(function (a, b) {
+        if (a.pts === b.pts) {
+          return a.presortIndex - b.presortIndex;
+        }
+        return a.pts - b.pts;
+      });
+      this.captionPackets_.forEach(function (packet) {
+        if (packet.type < 2) {
+          // Dispatch packet to the right Cea608Stream
+          this.dispatchCea608Packet(packet);
+        } else {
+          // Dispatch packet to the Cea708Stream
+          this.dispatchCea708Packet(packet);
+        }
+      }, this);
+      this.captionPackets_.length = 0;
+      this.flushCCStreams(flushType);
+    };
+    CaptionStream$2.prototype.flush = function () {
+      return this.flushStream('flush');
+    }; // Only called if handling partial data
+
+    CaptionStream$2.prototype.partialFlush = function () {
+      return this.flushStream('partialFlush');
+    };
+    CaptionStream$2.prototype.reset = function () {
+      this.latestDts_ = null;
+      this.ignoreNextEqualDts_ = false;
+      this.numSameDts_ = 0;
+      this.activeCea608Channel_ = [null, null];
+      this.ccStreams_.forEach(function (ccStream) {
+        ccStream.reset();
+      });
+    }; // From the CEA-608 spec:
+
+    /*
+     * When XDS sub-packets are interleaved with other services, the end of each sub-packet shall be followed
+     * by a control pair to change to a different service. When any of the control codes from 0x10 to 0x1F is
+     * used to begin a control code pair, it indicates the return to captioning or Text data. The control code pair
+     * and subsequent data should then be processed according to the FCC rules. It may be necessary for the
+     * line 21 data encoder to automatically insert a control code pair (i.e. RCL, RU2, RU3, RU4, RDC, or RTD)
+     * to switch to captioning or Text.
+    */
+    // With that in mind, we ignore any data between an XDS control code and a
+    // subsequent closed-captioning control code.
+
+    CaptionStream$2.prototype.dispatchCea608Packet = function (packet) {
+      // NOTE: packet.type is the CEA608 field
+      if (this.setsTextOrXDSActive(packet)) {
+        this.activeCea608Channel_[packet.type] = null;
+      } else if (this.setsChannel1Active(packet)) {
+        this.activeCea608Channel_[packet.type] = 0;
+      } else if (this.setsChannel2Active(packet)) {
+        this.activeCea608Channel_[packet.type] = 1;
+      }
+      if (this.activeCea608Channel_[packet.type] === null) {
+        // If we haven't received anything to set the active channel, or the
+        // packets are Text/XDS data, discard the data; we don't want jumbled
+        // captions
+        return;
+      }
+      this.ccStreams_[(packet.type << 1) + this.activeCea608Channel_[packet.type]].push(packet);
+    };
+    CaptionStream$2.prototype.setsChannel1Active = function (packet) {
+      return (packet.ccData & 0x7800) === 0x1000;
+    };
+    CaptionStream$2.prototype.setsChannel2Active = function (packet) {
+      return (packet.ccData & 0x7800) === 0x1800;
+    };
+    CaptionStream$2.prototype.setsTextOrXDSActive = function (packet) {
+      return (packet.ccData & 0x7100) === 0x0100 || (packet.ccData & 0x78fe) === 0x102a || (packet.ccData & 0x78fe) === 0x182a;
+    };
+    CaptionStream$2.prototype.dispatchCea708Packet = function (packet) {
+      if (this.parse708captions_) {
+        this.cc708Stream_.push(packet);
+      }
+    }; // ----------------------
+    // Session to Application
+    // ----------------------
+    // This hash maps special and extended character codes to their
+    // proper Unicode equivalent. The first one-byte key is just a
+    // non-standard character code. The two-byte keys that follow are
+    // the extended CEA708 character codes, along with the preceding
+    // 0x10 extended character byte to distinguish these codes from
+    // non-extended character codes. Every CEA708 character code that
+    // is not in this object maps directly to a standard unicode
+    // character code.
+    // The transparent space and non-breaking transparent space are
+    // technically not fully supported since there is no code to
+    // make them transparent, so they have normal non-transparent
+    // stand-ins.
+    // The special closed caption (CC) character isn't a standard
+    // unicode character, so a fairly similar unicode character was
+    // chosen in it's place.
+
+    var CHARACTER_TRANSLATION_708 = {
+      0x7f: 0x266a,
+      // ♪
+      0x1020: 0x20,
+      // Transparent Space
+      0x1021: 0xa0,
+      // Nob-breaking Transparent Space
+      0x1025: 0x2026,
+      // …
+      0x102a: 0x0160,
+      // Š
+      0x102c: 0x0152,
+      // Œ
+      0x1030: 0x2588,
+      // █
+      0x1031: 0x2018,
+      // ‘
+      0x1032: 0x2019,
+      // ’
+      0x1033: 0x201c,
+      // “
+      0x1034: 0x201d,
+      // ”
+      0x1035: 0x2022,
+      // •
+      0x1039: 0x2122,
+      // ™
+      0x103a: 0x0161,
+      // š
+      0x103c: 0x0153,
+      // œ
+      0x103d: 0x2120,
+      // ℠
+      0x103f: 0x0178,
+      // Ÿ
+      0x1076: 0x215b,
+      // ⅛
+      0x1077: 0x215c,
+      // ⅜
+      0x1078: 0x215d,
+      // ⅝
+      0x1079: 0x215e,
+      // ⅞
+      0x107a: 0x23d0,
+      // ⏐
+      0x107b: 0x23a4,
+      // ⎤
+      0x107c: 0x23a3,
+      // ⎣
+      0x107d: 0x23af,
+      // ⎯
+      0x107e: 0x23a6,
+      // ⎦
+      0x107f: 0x23a1,
+      // ⎡
+      0x10a0: 0x3138 // ㄸ (CC char)
+    };
+
+    var get708CharFromCode = function (code) {
+      var newCode = CHARACTER_TRANSLATION_708[code] || code;
+      if (code & 0x1000 && code === newCode) {
+        // Invalid extended code
+        return '';
+      }
+      return String.fromCharCode(newCode);
+    };
+    var within708TextBlock = function (b) {
+      return 0x20 <= b && b <= 0x7f || 0xa0 <= b && b <= 0xff;
+    };
+    var Cea708Window = function (windowNum) {
+      this.windowNum = windowNum;
+      this.reset();
+    };
+    Cea708Window.prototype.reset = function () {
+      this.clearText();
+      this.pendingNewLine = false;
+      this.winAttr = {};
+      this.penAttr = {};
+      this.penLoc = {};
+      this.penColor = {}; // These default values are arbitrary,
+      // defineWindow will usually override them
+
+      this.visible = 0;
+      this.rowLock = 0;
+      this.columnLock = 0;
+      this.priority = 0;
+      this.relativePositioning = 0;
+      this.anchorVertical = 0;
+      this.anchorHorizontal = 0;
+      this.anchorPoint = 0;
+      this.rowCount = 1;
+      this.virtualRowCount = this.rowCount + 1;
+      this.columnCount = 41;
+      this.windowStyle = 0;
+      this.penStyle = 0;
+    };
+    Cea708Window.prototype.getText = function () {
+      return this.rows.join('\n');
+    };
+    Cea708Window.prototype.clearText = function () {
+      this.rows = [''];
+      this.rowIdx = 0;
+    };
+    Cea708Window.prototype.newLine = function (pts) {
+      if (this.rows.length >= this.virtualRowCount && typeof this.beforeRowOverflow === 'function') {
+        this.beforeRowOverflow(pts);
+      }
+      if (this.rows.length > 0) {
+        this.rows.push('');
+        this.rowIdx++;
+      } // Show all virtual rows since there's no visible scrolling
+
+      while (this.rows.length > this.virtualRowCount) {
+        this.rows.shift();
+        this.rowIdx--;
+      }
+    };
+    Cea708Window.prototype.isEmpty = function () {
+      if (this.rows.length === 0) {
+        return true;
+      } else if (this.rows.length === 1) {
+        return this.rows[0] === '';
+      }
+      return false;
+    };
+    Cea708Window.prototype.addText = function (text) {
+      this.rows[this.rowIdx] += text;
+    };
+    Cea708Window.prototype.backspace = function () {
+      if (!this.isEmpty()) {
+        var row = this.rows[this.rowIdx];
+        this.rows[this.rowIdx] = row.substr(0, row.length - 1);
+      }
+    };
+    var Cea708Service = function (serviceNum, encoding, stream) {
+      this.serviceNum = serviceNum;
+      this.text = '';
+      this.currentWindow = new Cea708Window(-1);
+      this.windows = [];
+      this.stream = stream; // Try to setup a TextDecoder if an `encoding` value was provided
+
+      if (typeof encoding === 'string') {
+        this.createTextDecoder(encoding);
+      }
+    };
+    /**
+     * Initialize service windows
+     * Must be run before service use
+     *
+     * @param  {Integer}  pts               PTS value
+     * @param  {Function} beforeRowOverflow Function to execute before row overflow of a window
+     */
+
+    Cea708Service.prototype.init = function (pts, beforeRowOverflow) {
+      this.startPts = pts;
+      for (var win = 0; win < 8; win++) {
+        this.windows[win] = new Cea708Window(win);
+        if (typeof beforeRowOverflow === 'function') {
+          this.windows[win].beforeRowOverflow = beforeRowOverflow;
+        }
+      }
+    };
+    /**
+     * Set current window of service to be affected by commands
+     *
+     * @param  {Integer} windowNum Window number
+     */
+
+    Cea708Service.prototype.setCurrentWindow = function (windowNum) {
+      this.currentWindow = this.windows[windowNum];
+    };
+    /**
+     * Try to create a TextDecoder if it is natively supported
+     */
+
+    Cea708Service.prototype.createTextDecoder = function (encoding) {
+      if (typeof TextDecoder === 'undefined') {
+        this.stream.trigger('log', {
+          level: 'warn',
+          message: 'The `encoding` option is unsupported without TextDecoder support'
+        });
+      } else {
+        try {
+          this.textDecoder_ = new TextDecoder(encoding);
+        } catch (error) {
+          this.stream.trigger('log', {
+            level: 'warn',
+            message: 'TextDecoder could not be created with ' + encoding + ' encoding. ' + error
+          });
+        }
+      }
+    };
+    var Cea708Stream = function (options) {
+      options = options || {};
+      Cea708Stream.prototype.init.call(this);
+      var self = this;
+      var captionServices = options.captionServices || {};
+      var captionServiceEncodings = {};
+      var serviceProps; // Get service encodings from captionServices option block
+
+      Object.keys(captionServices).forEach(serviceName => {
+        serviceProps = captionServices[serviceName];
+        if (/^SERVICE/.test(serviceName)) {
+          captionServiceEncodings[serviceName] = serviceProps.encoding;
+        }
+      });
+      this.serviceEncodings = captionServiceEncodings;
+      this.current708Packet = null;
+      this.services = {};
+      this.push = function (packet) {
+        if (packet.type === 3) {
+          // 708 packet start
+          self.new708Packet();
+          self.add708Bytes(packet);
+        } else {
+          if (self.current708Packet === null) {
+            // This should only happen at the start of a file if there's no packet start.
+            self.new708Packet();
+          }
+          self.add708Bytes(packet);
+        }
+      };
+    };
+    Cea708Stream.prototype = new Stream$7();
+    /**
+     * Push current 708 packet, create new 708 packet.
+     */
+
+    Cea708Stream.prototype.new708Packet = function () {
+      if (this.current708Packet !== null) {
+        this.push708Packet();
+      }
+      this.current708Packet = {
+        data: [],
+        ptsVals: []
+      };
+    };
+    /**
+     * Add pts and both bytes from packet into current 708 packet.
+     */
+
+    Cea708Stream.prototype.add708Bytes = function (packet) {
+      var data = packet.ccData;
+      var byte0 = data >>> 8;
+      var byte1 = data & 0xff; // I would just keep a list of packets instead of bytes, but it isn't clear in the spec
+      // that service blocks will always line up with byte pairs.
+
+      this.current708Packet.ptsVals.push(packet.pts);
+      this.current708Packet.data.push(byte0);
+      this.current708Packet.data.push(byte1);
+    };
+    /**
+     * Parse completed 708 packet into service blocks and push each service block.
+     */
+
+    Cea708Stream.prototype.push708Packet = function () {
+      var packet708 = this.current708Packet;
+      var packetData = packet708.data;
+      var serviceNum = null;
+      var blockSize = null;
+      var i = 0;
+      var b = packetData[i++];
+      packet708.seq = b >> 6;
+      packet708.sizeCode = b & 0x3f; // 0b00111111;
+
+      for (; i < packetData.length; i++) {
+        b = packetData[i++];
+        serviceNum = b >> 5;
+        blockSize = b & 0x1f; // 0b00011111
+
+        if (serviceNum === 7 && blockSize > 0) {
+          // Extended service num
+          b = packetData[i++];
+          serviceNum = b;
+        }
+        this.pushServiceBlock(serviceNum, i, blockSize);
+        if (blockSize > 0) {
+          i += blockSize - 1;
+        }
+      }
+    };
+    /**
+     * Parse service block, execute commands, read text.
+     *
+     * Note: While many of these commands serve important purposes,
+     * many others just parse out the parameters or attributes, but
+     * nothing is done with them because this is not a full and complete
+     * implementation of the entire 708 spec.
+     *
+     * @param  {Integer} serviceNum Service number
+     * @param  {Integer} start      Start index of the 708 packet data
+     * @param  {Integer} size       Block size
+     */
+
+    Cea708Stream.prototype.pushServiceBlock = function (serviceNum, start, size) {
+      var b;
+      var i = start;
+      var packetData = this.current708Packet.data;
+      var service = this.services[serviceNum];
+      if (!service) {
+        service = this.initService(serviceNum, i);
+      }
+      for (; i < start + size && i < packetData.length; i++) {
+        b = packetData[i];
+        if (within708TextBlock(b)) {
+          i = this.handleText(i, service);
+        } else if (b === 0x18) {
+          i = this.multiByteCharacter(i, service);
+        } else if (b === 0x10) {
+          i = this.extendedCommands(i, service);
+        } else if (0x80 <= b && b <= 0x87) {
+          i = this.setCurrentWindow(i, service);
+        } else if (0x98 <= b && b <= 0x9f) {
+          i = this.defineWindow(i, service);
+        } else if (b === 0x88) {
+          i = this.clearWindows(i, service);
+        } else if (b === 0x8c) {
+          i = this.deleteWindows(i, service);
+        } else if (b === 0x89) {
+          i = this.displayWindows(i, service);
+        } else if (b === 0x8a) {
+          i = this.hideWindows(i, service);
+        } else if (b === 0x8b) {
+          i = this.toggleWindows(i, service);
+        } else if (b === 0x97) {
+          i = this.setWindowAttributes(i, service);
+        } else if (b === 0x90) {
+          i = this.setPenAttributes(i, service);
+        } else if (b === 0x91) {
+          i = this.setPenColor(i, service);
+        } else if (b === 0x92) {
+          i = this.setPenLocation(i, service);
+        } else if (b === 0x8f) {
+          service = this.reset(i, service);
+        } else if (b === 0x08) {
+          // BS: Backspace
+          service.currentWindow.backspace();
+        } else if (b === 0x0c) {
+          // FF: Form feed
+          service.currentWindow.clearText();
+        } else if (b === 0x0d) {
+          // CR: Carriage return
+          service.currentWindow.pendingNewLine = true;
+        } else if (b === 0x0e) {
+          // HCR: Horizontal carriage return
+          service.currentWindow.clearText();
+        } else if (b === 0x8d) {
+          // DLY: Delay, nothing to do
+          i++;
+        } else ;
+      }
+    };
+    /**
+     * Execute an extended command
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.extendedCommands = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      if (within708TextBlock(b)) {
+        i = this.handleText(i, service, {
+          isExtended: true
+        });
+      }
+      return i;
+    };
+    /**
+     * Get PTS value of a given byte index
+     *
+     * @param  {Integer} byteIndex  Index of the byte
+     * @return {Integer}            PTS
+     */
+
+    Cea708Stream.prototype.getPts = function (byteIndex) {
+      // There's 1 pts value per 2 bytes
+      return this.current708Packet.ptsVals[Math.floor(byteIndex / 2)];
+    };
+    /**
+     * Initializes a service
+     *
+     * @param  {Integer} serviceNum Service number
+     * @return {Service}            Initialized service object
+     */
+
+    Cea708Stream.prototype.initService = function (serviceNum, i) {
+      var serviceName = 'SERVICE' + serviceNum;
+      var self = this;
+      var serviceName;
+      var encoding;
+      if (serviceName in this.serviceEncodings) {
+        encoding = this.serviceEncodings[serviceName];
+      }
+      this.services[serviceNum] = new Cea708Service(serviceNum, encoding, self);
+      this.services[serviceNum].init(this.getPts(i), function (pts) {
+        self.flushDisplayed(pts, self.services[serviceNum]);
+      });
+      return this.services[serviceNum];
+    };
+    /**
+     * Execute text writing to current window
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.handleText = function (i, service, options) {
+      var isExtended = options && options.isExtended;
+      var isMultiByte = options && options.isMultiByte;
+      var packetData = this.current708Packet.data;
+      var extended = isExtended ? 0x1000 : 0x0000;
+      var currentByte = packetData[i];
+      var nextByte = packetData[i + 1];
+      var win = service.currentWindow;
+      var char;
+      var charCodeArray; // Converts an array of bytes to a unicode hex string.
+
+      function toHexString(byteArray) {
+        return byteArray.map(byte => {
+          return ('0' + (byte & 0xFF).toString(16)).slice(-2);
+        }).join('');
+      }
+      if (isMultiByte) {
+        charCodeArray = [currentByte, nextByte];
+        i++;
+      } else {
+        charCodeArray = [currentByte];
+      } // Use the TextDecoder if one was created for this service
+
+      if (service.textDecoder_ && !isExtended) {
+        char = service.textDecoder_.decode(new Uint8Array(charCodeArray));
+      } else {
+        // We assume any multi-byte char without a decoder is unicode.
+        if (isMultiByte) {
+          const unicode = toHexString(charCodeArray); // Takes a unicode hex string and creates a single character.
+
+          char = String.fromCharCode(parseInt(unicode, 16));
+        } else {
+          char = get708CharFromCode(extended | currentByte);
+        }
+      }
+      if (win.pendingNewLine && !win.isEmpty()) {
+        win.newLine(this.getPts(i));
+      }
+      win.pendingNewLine = false;
+      win.addText(char);
+      return i;
+    };
+    /**
+     * Handle decoding of multibyte character
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.multiByteCharacter = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var firstByte = packetData[i + 1];
+      var secondByte = packetData[i + 2];
+      if (within708TextBlock(firstByte) && within708TextBlock(secondByte)) {
+        i = this.handleText(++i, service, {
+          isMultiByte: true
+        });
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the CW# command.
+     *
+     * Set the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setCurrentWindow = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var windowNum = b & 0x07;
+      service.setCurrentWindow(windowNum);
+      return i;
+    };
+    /**
+     * Parse and execute the DF# command.
+     *
+     * Define a window and set it as the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.defineWindow = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var windowNum = b & 0x07;
+      service.setCurrentWindow(windowNum);
+      var win = service.currentWindow;
+      b = packetData[++i];
+      win.visible = (b & 0x20) >> 5; // v
+
+      win.rowLock = (b & 0x10) >> 4; // rl
+
+      win.columnLock = (b & 0x08) >> 3; // cl
+
+      win.priority = b & 0x07; // p
+
+      b = packetData[++i];
+      win.relativePositioning = (b & 0x80) >> 7; // rp
+
+      win.anchorVertical = b & 0x7f; // av
+
+      b = packetData[++i];
+      win.anchorHorizontal = b; // ah
+
+      b = packetData[++i];
+      win.anchorPoint = (b & 0xf0) >> 4; // ap
+
+      win.rowCount = b & 0x0f; // rc
+
+      b = packetData[++i];
+      win.columnCount = b & 0x3f; // cc
+
+      b = packetData[++i];
+      win.windowStyle = (b & 0x38) >> 3; // ws
+
+      win.penStyle = b & 0x07; // ps
+      // The spec says there are (rowCount+1) "virtual rows"
+
+      win.virtualRowCount = win.rowCount + 1;
+      return i;
+    };
+    /**
+     * Parse and execute the SWA command.
+     *
+     * Set attributes of the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setWindowAttributes = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var winAttr = service.currentWindow.winAttr;
+      b = packetData[++i];
+      winAttr.fillOpacity = (b & 0xc0) >> 6; // fo
+
+      winAttr.fillRed = (b & 0x30) >> 4; // fr
+
+      winAttr.fillGreen = (b & 0x0c) >> 2; // fg
+
+      winAttr.fillBlue = b & 0x03; // fb
+
+      b = packetData[++i];
+      winAttr.borderType = (b & 0xc0) >> 6; // bt
+
+      winAttr.borderRed = (b & 0x30) >> 4; // br
+
+      winAttr.borderGreen = (b & 0x0c) >> 2; // bg
+
+      winAttr.borderBlue = b & 0x03; // bb
+
+      b = packetData[++i];
+      winAttr.borderType += (b & 0x80) >> 5; // bt
+
+      winAttr.wordWrap = (b & 0x40) >> 6; // ww
+
+      winAttr.printDirection = (b & 0x30) >> 4; // pd
+
+      winAttr.scrollDirection = (b & 0x0c) >> 2; // sd
+
+      winAttr.justify = b & 0x03; // j
+
+      b = packetData[++i];
+      winAttr.effectSpeed = (b & 0xf0) >> 4; // es
+
+      winAttr.effectDirection = (b & 0x0c) >> 2; // ed
+
+      winAttr.displayEffect = b & 0x03; // de
+
+      return i;
+    };
+    /**
+     * Gather text from all displayed windows and push a caption to output.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     */
+
+    Cea708Stream.prototype.flushDisplayed = function (pts, service) {
+      var displayedText = []; // TODO: Positioning not supported, displaying multiple windows will not necessarily
+      // display text in the correct order, but sample files so far have not shown any issue.
+
+      for (var winId = 0; winId < 8; winId++) {
+        if (service.windows[winId].visible && !service.windows[winId].isEmpty()) {
+          displayedText.push(service.windows[winId].getText());
+        }
+      }
+      service.endPts = pts;
+      service.text = displayedText.join('\n\n');
+      this.pushCaption(service);
+      service.startPts = pts;
+    };
+    /**
+     * Push a caption to output if the caption contains text.
+     *
+     * @param  {Service} service  The service object to be affected
+     */
+
+    Cea708Stream.prototype.pushCaption = function (service) {
+      if (service.text !== '') {
+        this.trigger('data', {
+          startPts: service.startPts,
+          endPts: service.endPts,
+          text: service.text,
+          stream: 'cc708_' + service.serviceNum
+        });
+        service.text = '';
+        service.startPts = service.endPts;
+      }
+    };
+    /**
+     * Parse and execute the DSW command.
+     *
+     * Set visible property of windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.displayWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].visible = 1;
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the HDW command.
+     *
+     * Set visible property of windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.hideWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].visible = 0;
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the TGW command.
+     *
+     * Set visible property of windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.toggleWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].visible ^= 1;
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the CLW command.
+     *
+     * Clear text of windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.clearWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].clearText();
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the DLW command.
+     *
+     * Re-initialize windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.deleteWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].reset();
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the SPA command.
+     *
+     * Set pen attributes of the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setPenAttributes = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var penAttr = service.currentWindow.penAttr;
+      b = packetData[++i];
+      penAttr.textTag = (b & 0xf0) >> 4; // tt
+
+      penAttr.offset = (b & 0x0c) >> 2; // o
+
+      penAttr.penSize = b & 0x03; // s
+
+      b = packetData[++i];
+      penAttr.italics = (b & 0x80) >> 7; // i
+
+      penAttr.underline = (b & 0x40) >> 6; // u
+
+      penAttr.edgeType = (b & 0x38) >> 3; // et
+
+      penAttr.fontStyle = b & 0x07; // fs
+
+      return i;
+    };
+    /**
+     * Parse and execute the SPC command.
+     *
+     * Set pen color of the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setPenColor = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var penColor = service.currentWindow.penColor;
+      b = packetData[++i];
+      penColor.fgOpacity = (b & 0xc0) >> 6; // fo
+
+      penColor.fgRed = (b & 0x30) >> 4; // fr
+
+      penColor.fgGreen = (b & 0x0c) >> 2; // fg
+
+      penColor.fgBlue = b & 0x03; // fb
+
+      b = packetData[++i];
+      penColor.bgOpacity = (b & 0xc0) >> 6; // bo
+
+      penColor.bgRed = (b & 0x30) >> 4; // br
+
+      penColor.bgGreen = (b & 0x0c) >> 2; // bg
+
+      penColor.bgBlue = b & 0x03; // bb
+
+      b = packetData[++i];
+      penColor.edgeRed = (b & 0x30) >> 4; // er
+
+      penColor.edgeGreen = (b & 0x0c) >> 2; // eg
+
+      penColor.edgeBlue = b & 0x03; // eb
+
+      return i;
+    };
+    /**
+     * Parse and execute the SPL command.
+     *
+     * Set pen location of the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setPenLocation = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var penLoc = service.currentWindow.penLoc; // Positioning isn't really supported at the moment, so this essentially just inserts a linebreak
+
+      service.currentWindow.pendingNewLine = true;
+      b = packetData[++i];
+      penLoc.row = b & 0x0f; // r
+
+      b = packetData[++i];
+      penLoc.column = b & 0x3f; // c
+
+      return i;
+    };
+    /**
+     * Execute the RST command.
+     *
+     * Reset service to a clean slate. Re-initialize.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Service}          Re-initialized service
+     */
+
+    Cea708Stream.prototype.reset = function (i, service) {
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      return this.initService(service.serviceNum, i);
+    }; // This hash maps non-ASCII, special, and extended character codes to their
+    // proper Unicode equivalent. The first keys that are only a single byte
+    // are the non-standard ASCII characters, which simply map the CEA608 byte
+    // to the standard ASCII/Unicode. The two-byte keys that follow are the CEA608
+    // character codes, but have their MSB bitmasked with 0x03 so that a lookup
+    // can be performed regardless of the field and data channel on which the
+    // character code was received.
+
+    var CHARACTER_TRANSLATION = {
+      0x2a: 0xe1,
+      // á
+      0x5c: 0xe9,
+      // é
+      0x5e: 0xed,
+      // í
+      0x5f: 0xf3,
+      // ó
+      0x60: 0xfa,
+      // ú
+      0x7b: 0xe7,
+      // ç
+      0x7c: 0xf7,
+      // ÷
+      0x7d: 0xd1,
+      // Ñ
+      0x7e: 0xf1,
+      // ñ
+      0x7f: 0x2588,
+      // █
+      0x0130: 0xae,
+      // ®
+      0x0131: 0xb0,
+      // °
+      0x0132: 0xbd,
+      // ½
+      0x0133: 0xbf,
+      // ¿
+      0x0134: 0x2122,
+      // ™
+      0x0135: 0xa2,
+      // ¢
+      0x0136: 0xa3,
+      // £
+      0x0137: 0x266a,
+      // ♪
+      0x0138: 0xe0,
+      // à
+      0x0139: 0xa0,
+      //
+      0x013a: 0xe8,
+      // è
+      0x013b: 0xe2,
+      // â
+      0x013c: 0xea,
+      // ê
+      0x013d: 0xee,
+      // î
+      0x013e: 0xf4,
+      // ô
+      0x013f: 0xfb,
+      // û
+      0x0220: 0xc1,
+      // Á
+      0x0221: 0xc9,
+      // É
+      0x0222: 0xd3,
+      // Ó
+      0x0223: 0xda,
+      // Ú
+      0x0224: 0xdc,
+      // Ü
+      0x0225: 0xfc,
+      // ü
+      0x0226: 0x2018,
+      // ‘
+      0x0227: 0xa1,
+      // ¡
+      0x0228: 0x2a,
+      // *
+      0x0229: 0x27,
+      // '
+      0x022a: 0x2014,
+      // —
+      0x022b: 0xa9,
+      // ©
+      0x022c: 0x2120,
+      // ℠
+      0x022d: 0x2022,
+      // •
+      0x022e: 0x201c,
+      // “
+      0x022f: 0x201d,
+      // ”
+      0x0230: 0xc0,
+      // À
+      0x0231: 0xc2,
+      // Â
+      0x0232: 0xc7,
+      // Ç
+      0x0233: 0xc8,
+      // È
+      0x0234: 0xca,
+      // Ê
+      0x0235: 0xcb,
+      // Ë
+      0x0236: 0xeb,
+      // ë
+      0x0237: 0xce,
+      // Î
+      0x0238: 0xcf,
+      // Ï
+      0x0239: 0xef,
+      // ï
+      0x023a: 0xd4,
+      // Ô
+      0x023b: 0xd9,
+      // Ù
+      0x023c: 0xf9,
+      // ù
+      0x023d: 0xdb,
+      // Û
+      0x023e: 0xab,
+      // «
+      0x023f: 0xbb,
+      // »
+      0x0320: 0xc3,
+      // Ã
+      0x0321: 0xe3,
+      // ã
+      0x0322: 0xcd,
+      // Í
+      0x0323: 0xcc,
+      // Ì
+      0x0324: 0xec,
+      // ì
+      0x0325: 0xd2,
+      // Ò
+      0x0326: 0xf2,
+      // ò
+      0x0327: 0xd5,
+      // Õ
+      0x0328: 0xf5,
+      // õ
+      0x0329: 0x7b,
+      // {
+      0x032a: 0x7d,
+      // }
+      0x032b: 0x5c,
+      // \
+      0x032c: 0x5e,
+      // ^
+      0x032d: 0x5f,
+      // _
+      0x032e: 0x7c,
+      // |
+      0x032f: 0x7e,
+      // ~
+      0x0330: 0xc4,
+      // Ä
+      0x0331: 0xe4,
+      // ä
+      0x0332: 0xd6,
+      // Ö
+      0x0333: 0xf6,
+      // ö
+      0x0334: 0xdf,
+      // ß
+      0x0335: 0xa5,
+      // ¥
+      0x0336: 0xa4,
+      // ¤
+      0x0337: 0x2502,
+      // │
+      0x0338: 0xc5,
+      // Å
+      0x0339: 0xe5,
+      // å
+      0x033a: 0xd8,
+      // Ø
+      0x033b: 0xf8,
+      // ø
+      0x033c: 0x250c,
+      // ┌
+      0x033d: 0x2510,
+      // ┐
+      0x033e: 0x2514,
+      // └
+      0x033f: 0x2518 // ┘
+    };
+
+    var getCharFromCode = function (code) {
+      if (code === null) {
+        return '';
+      }
+      code = CHARACTER_TRANSLATION[code] || code;
+      return String.fromCharCode(code);
+    }; // the index of the last row in a CEA-608 display buffer
+
+    var BOTTOM_ROW = 14; // This array is used for mapping PACs -> row #, since there's no way of
+    // getting it through bit logic.
+
+    var ROWS = [0x1100, 0x1120, 0x1200, 0x1220, 0x1500, 0x1520, 0x1600, 0x1620, 0x1700, 0x1720, 0x1000, 0x1300, 0x1320, 0x1400, 0x1420]; // CEA-608 captions are rendered onto a 34x15 matrix of character
+    // cells. The "bottom" row is the last element in the outer array.
+    // We keep track of positioning information as we go by storing the
+    // number of indentations and the tab offset in this buffer.
+
+    var createDisplayBuffer = function () {
+      var result = [],
+        i = BOTTOM_ROW + 1;
+      while (i--) {
+        result.push({
+          text: '',
+          indent: 0,
+          offset: 0
+        });
+      }
+      return result;
+    };
+    var Cea608Stream = function (field, dataChannel) {
+      Cea608Stream.prototype.init.call(this);
+      this.field_ = field || 0;
+      this.dataChannel_ = dataChannel || 0;
+      this.name_ = 'CC' + ((this.field_ << 1 | this.dataChannel_) + 1);
+      this.setConstants();
+      this.reset();
+      this.push = function (packet) {
+        var data, swap, char0, char1, text; // remove the parity bits
+
+        data = packet.ccData & 0x7f7f; // ignore duplicate control codes; the spec demands they're sent twice
+
+        if (data === this.lastControlCode_) {
+          this.lastControlCode_ = null;
+          return;
+        } // Store control codes
+
+        if ((data & 0xf000) === 0x1000) {
+          this.lastControlCode_ = data;
+        } else if (data !== this.PADDING_) {
+          this.lastControlCode_ = null;
+        }
+        char0 = data >>> 8;
+        char1 = data & 0xff;
+        if (data === this.PADDING_) {
+          return;
+        } else if (data === this.RESUME_CAPTION_LOADING_) {
+          this.mode_ = 'popOn';
+        } else if (data === this.END_OF_CAPTION_) {
+          // If an EOC is received while in paint-on mode, the displayed caption
+          // text should be swapped to non-displayed memory as if it was a pop-on
+          // caption. Because of that, we should explicitly switch back to pop-on
+          // mode
+          this.mode_ = 'popOn';
+          this.clearFormatting(packet.pts); // if a caption was being displayed, it's gone now
+
+          this.flushDisplayed(packet.pts); // flip memory
+
+          swap = this.displayed_;
+          this.displayed_ = this.nonDisplayed_;
+          this.nonDisplayed_ = swap; // start measuring the time to display the caption
+
+          this.startPts_ = packet.pts;
+        } else if (data === this.ROLL_UP_2_ROWS_) {
+          this.rollUpRows_ = 2;
+          this.setRollUp(packet.pts);
+        } else if (data === this.ROLL_UP_3_ROWS_) {
+          this.rollUpRows_ = 3;
+          this.setRollUp(packet.pts);
+        } else if (data === this.ROLL_UP_4_ROWS_) {
+          this.rollUpRows_ = 4;
+          this.setRollUp(packet.pts);
+        } else if (data === this.CARRIAGE_RETURN_) {
+          this.clearFormatting(packet.pts);
+          this.flushDisplayed(packet.pts);
+          this.shiftRowsUp_();
+          this.startPts_ = packet.pts;
+        } else if (data === this.BACKSPACE_) {
+          if (this.mode_ === 'popOn') {
+            this.nonDisplayed_[this.row_].text = this.nonDisplayed_[this.row_].text.slice(0, -1);
+          } else {
+            this.displayed_[this.row_].text = this.displayed_[this.row_].text.slice(0, -1);
+          }
+        } else if (data === this.ERASE_DISPLAYED_MEMORY_) {
+          this.flushDisplayed(packet.pts);
+          this.displayed_ = createDisplayBuffer();
+        } else if (data === this.ERASE_NON_DISPLAYED_MEMORY_) {
+          this.nonDisplayed_ = createDisplayBuffer();
+        } else if (data === this.RESUME_DIRECT_CAPTIONING_) {
+          if (this.mode_ !== 'paintOn') {
+            // NOTE: This should be removed when proper caption positioning is
+            // implemented
+            this.flushDisplayed(packet.pts);
+            this.displayed_ = createDisplayBuffer();
+          }
+          this.mode_ = 'paintOn';
+          this.startPts_ = packet.pts; // Append special characters to caption text
+        } else if (this.isSpecialCharacter(char0, char1)) {
+          // Bitmask char0 so that we can apply character transformations
+          // regardless of field and data channel.
+          // Then byte-shift to the left and OR with char1 so we can pass the
+          // entire character code to `getCharFromCode`.
+          char0 = (char0 & 0x03) << 8;
+          text = getCharFromCode(char0 | char1);
+          this[this.mode_](packet.pts, text);
+          this.column_++; // Append extended characters to caption text
+        } else if (this.isExtCharacter(char0, char1)) {
+          // Extended characters always follow their "non-extended" equivalents.
+          // IE if a "è" is desired, you'll always receive "eè"; non-compliant
+          // decoders are supposed to drop the "è", while compliant decoders
+          // backspace the "e" and insert "è".
+          // Delete the previous character
+          if (this.mode_ === 'popOn') {
+            this.nonDisplayed_[this.row_].text = this.nonDisplayed_[this.row_].text.slice(0, -1);
+          } else {
+            this.displayed_[this.row_].text = this.displayed_[this.row_].text.slice(0, -1);
+          } // Bitmask char0 so that we can apply character transformations
+          // regardless of field and data channel.
+          // Then byte-shift to the left and OR with char1 so we can pass the
+          // entire character code to `getCharFromCode`.
+
+          char0 = (char0 & 0x03) << 8;
+          text = getCharFromCode(char0 | char1);
+          this[this.mode_](packet.pts, text);
+          this.column_++; // Process mid-row codes
+        } else if (this.isMidRowCode(char0, char1)) {
+          // Attributes are not additive, so clear all formatting
+          this.clearFormatting(packet.pts); // According to the standard, mid-row codes
+          // should be replaced with spaces, so add one now
+
+          this[this.mode_](packet.pts, ' ');
+          this.column_++;
+          if ((char1 & 0xe) === 0xe) {
+            this.addFormatting(packet.pts, ['i']);
+          }
+          if ((char1 & 0x1) === 0x1) {
+            this.addFormatting(packet.pts, ['u']);
+          } // Detect offset control codes and adjust cursor
+        } else if (this.isOffsetControlCode(char0, char1)) {
+          // Cursor position is set by indent PAC (see below) in 4-column
+          // increments, with an additional offset code of 1-3 to reach any
+          // of the 32 columns specified by CEA-608. So all we need to do
+          // here is increment the column cursor by the given offset.
+          const offset = char1 & 0x03; // For an offest value 1-3, set the offset for that caption
+          // in the non-displayed array.
+
+          this.nonDisplayed_[this.row_].offset = offset;
+          this.column_ += offset; // Detect PACs (Preamble Address Codes)
+        } else if (this.isPAC(char0, char1)) {
+          // There's no logic for PAC -> row mapping, so we have to just
+          // find the row code in an array and use its index :(
+          var row = ROWS.indexOf(data & 0x1f20); // Configure the caption window if we're in roll-up mode
+
+          if (this.mode_ === 'rollUp') {
+            // This implies that the base row is incorrectly set.
+            // As per the recommendation in CEA-608(Base Row Implementation), defer to the number
+            // of roll-up rows set.
+            if (row - this.rollUpRows_ + 1 < 0) {
+              row = this.rollUpRows_ - 1;
+            }
+            this.setRollUp(packet.pts, row);
+          } // Ensure the row is between 0 and 14, otherwise use the most
+          // recent or default row.
+
+          if (row !== this.row_ && row >= 0 && row <= 14) {
+            // formatting is only persistent for current row
+            this.clearFormatting(packet.pts);
+            this.row_ = row;
+          } // All PACs can apply underline, so detect and apply
+          // (All odd-numbered second bytes set underline)
+
+          if (char1 & 0x1 && this.formatting_.indexOf('u') === -1) {
+            this.addFormatting(packet.pts, ['u']);
+          }
+          if ((data & 0x10) === 0x10) {
+            // We've got an indent level code. Each successive even number
+            // increments the column cursor by 4, so we can get the desired
+            // column position by bit-shifting to the right (to get n/2)
+            // and multiplying by 4.
+            const indentations = (data & 0xe) >> 1;
+            this.column_ = indentations * 4; // add to the number of indentations for positioning
+
+            this.nonDisplayed_[this.row_].indent += indentations;
+          }
+          if (this.isColorPAC(char1)) {
+            // it's a color code, though we only support white, which
+            // can be either normal or italicized. white italics can be
+            // either 0x4e or 0x6e depending on the row, so we just
+            // bitwise-and with 0xe to see if italics should be turned on
+            if ((char1 & 0xe) === 0xe) {
+              this.addFormatting(packet.pts, ['i']);
+            }
+          } // We have a normal character in char0, and possibly one in char1
+        } else if (this.isNormalChar(char0)) {
+          if (char1 === 0x00) {
+            char1 = null;
+          }
+          text = getCharFromCode(char0);
+          text += getCharFromCode(char1);
+          this[this.mode_](packet.pts, text);
+          this.column_ += text.length;
+        } // finish data processing
+      };
+    };
+
+    Cea608Stream.prototype = new Stream$7(); // Trigger a cue point that captures the current state of the
+    // display buffer
+
+    Cea608Stream.prototype.flushDisplayed = function (pts) {
+      const logWarning = index => {
+        this.trigger('log', {
+          level: 'warn',
+          message: 'Skipping a malformed 608 caption at index ' + index + '.'
+        });
+      };
+      const content = [];
+      this.displayed_.forEach((row, i) => {
+        if (row && row.text && row.text.length) {
+          try {
+            // remove spaces from the start and end of the string
+            row.text = row.text.trim();
+          } catch (e) {
+            // Ordinarily, this shouldn't happen. However, caption
+            // parsing errors should not throw exceptions and
+            // break playback.
+            logWarning(i);
+          } // See the below link for more details on the following fields:
+          // https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#positioning-in-cea-608
+
+          if (row.text.length) {
+            content.push({
+              // The text to be displayed in the caption from this specific row, with whitespace removed.
+              text: row.text,
+              // Value between 1 and 15 representing the PAC row used to calculate line height.
+              line: i + 1,
+              // A number representing the indent position by percentage (CEA-608 PAC indent code).
+              // The value will be a number between 10 and 80. Offset is used to add an aditional
+              // value to the position if necessary.
+              position: 10 + Math.min(70, row.indent * 10) + row.offset * 2.5
+            });
+          }
+        } else if (row === undefined || row === null) {
+          logWarning(i);
+        }
+      });
+      if (content.length) {
+        this.trigger('data', {
+          startPts: this.startPts_,
+          endPts: pts,
+          content,
+          stream: this.name_
+        });
+      }
+    };
+    /**
+     * Zero out the data, used for startup and on seek
+     */
+
+    Cea608Stream.prototype.reset = function () {
+      this.mode_ = 'popOn'; // When in roll-up mode, the index of the last row that will
+      // actually display captions. If a caption is shifted to a row
+      // with a lower index than this, it is cleared from the display
+      // buffer
+
+      this.topRow_ = 0;
+      this.startPts_ = 0;
+      this.displayed_ = createDisplayBuffer();
+      this.nonDisplayed_ = createDisplayBuffer();
+      this.lastControlCode_ = null; // Track row and column for proper line-breaking and spacing
+
+      this.column_ = 0;
+      this.row_ = BOTTOM_ROW;
+      this.rollUpRows_ = 2; // This variable holds currently-applied formatting
+
+      this.formatting_ = [];
+    };
+    /**
+     * Sets up control code and related constants for this instance
+     */
+
+    Cea608Stream.prototype.setConstants = function () {
+      // The following attributes have these uses:
+      // ext_ :    char0 for mid-row codes, and the base for extended
+      //           chars (ext_+0, ext_+1, and ext_+2 are char0s for
+      //           extended codes)
+      // control_: char0 for control codes, except byte-shifted to the
+      //           left so that we can do this.control_ | CONTROL_CODE
+      // offset_:  char0 for tab offset codes
+      //
+      // It's also worth noting that control codes, and _only_ control codes,
+      // differ between field 1 and field2. Field 2 control codes are always
+      // their field 1 value plus 1. That's why there's the "| field" on the
+      // control value.
+      if (this.dataChannel_ === 0) {
+        this.BASE_ = 0x10;
+        this.EXT_ = 0x11;
+        this.CONTROL_ = (0x14 | this.field_) << 8;
+        this.OFFSET_ = 0x17;
+      } else if (this.dataChannel_ === 1) {
+        this.BASE_ = 0x18;
+        this.EXT_ = 0x19;
+        this.CONTROL_ = (0x1c | this.field_) << 8;
+        this.OFFSET_ = 0x1f;
+      } // Constants for the LSByte command codes recognized by Cea608Stream. This
+      // list is not exhaustive. For a more comprehensive listing and semantics see
+      // http://www.gpo.gov/fdsys/pkg/CFR-2010-title47-vol1/pdf/CFR-2010-title47-vol1-sec15-119.pdf
+      // Padding
+
+      this.PADDING_ = 0x0000; // Pop-on Mode
+
+      this.RESUME_CAPTION_LOADING_ = this.CONTROL_ | 0x20;
+      this.END_OF_CAPTION_ = this.CONTROL_ | 0x2f; // Roll-up Mode
+
+      this.ROLL_UP_2_ROWS_ = this.CONTROL_ | 0x25;
+      this.ROLL_UP_3_ROWS_ = this.CONTROL_ | 0x26;
+      this.ROLL_UP_4_ROWS_ = this.CONTROL_ | 0x27;
+      this.CARRIAGE_RETURN_ = this.CONTROL_ | 0x2d; // paint-on mode
+
+      this.RESUME_DIRECT_CAPTIONING_ = this.CONTROL_ | 0x29; // Erasure
+
+      this.BACKSPACE_ = this.CONTROL_ | 0x21;
+      this.ERASE_DISPLAYED_MEMORY_ = this.CONTROL_ | 0x2c;
+      this.ERASE_NON_DISPLAYED_MEMORY_ = this.CONTROL_ | 0x2e;
+    };
+    /**
+     * Detects if the 2-byte packet data is a special character
+     *
+     * Special characters have a second byte in the range 0x30 to 0x3f,
+     * with the first byte being 0x11 (for data channel 1) or 0x19 (for
+     * data channel 2).
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are an special character
+     */
+
+    Cea608Stream.prototype.isSpecialCharacter = function (char0, char1) {
+      return char0 === this.EXT_ && char1 >= 0x30 && char1 <= 0x3f;
+    };
+    /**
+     * Detects if the 2-byte packet data is an extended character
+     *
+     * Extended characters have a second byte in the range 0x20 to 0x3f,
+     * with the first byte being 0x12 or 0x13 (for data channel 1) or
+     * 0x1a or 0x1b (for data channel 2).
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are an extended character
+     */
+
+    Cea608Stream.prototype.isExtCharacter = function (char0, char1) {
+      return (char0 === this.EXT_ + 1 || char0 === this.EXT_ + 2) && char1 >= 0x20 && char1 <= 0x3f;
+    };
+    /**
+     * Detects if the 2-byte packet is a mid-row code
+     *
+     * Mid-row codes have a second byte in the range 0x20 to 0x2f, with
+     * the first byte being 0x11 (for data channel 1) or 0x19 (for data
+     * channel 2).
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are a mid-row code
+     */
+
+    Cea608Stream.prototype.isMidRowCode = function (char0, char1) {
+      return char0 === this.EXT_ && char1 >= 0x20 && char1 <= 0x2f;
+    };
+    /**
+     * Detects if the 2-byte packet is an offset control code
+     *
+     * Offset control codes have a second byte in the range 0x21 to 0x23,
+     * with the first byte being 0x17 (for data channel 1) or 0x1f (for
+     * data channel 2).
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are an offset control code
+     */
+
+    Cea608Stream.prototype.isOffsetControlCode = function (char0, char1) {
+      return char0 === this.OFFSET_ && char1 >= 0x21 && char1 <= 0x23;
+    };
+    /**
+     * Detects if the 2-byte packet is a Preamble Address Code
+     *
+     * PACs have a first byte in the range 0x10 to 0x17 (for data channel 1)
+     * or 0x18 to 0x1f (for data channel 2), with the second byte in the
+     * range 0x40 to 0x7f.
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are a PAC
+     */
+
+    Cea608Stream.prototype.isPAC = function (char0, char1) {
+      return char0 >= this.BASE_ && char0 < this.BASE_ + 8 && char1 >= 0x40 && char1 <= 0x7f;
+    };
+    /**
+     * Detects if a packet's second byte is in the range of a PAC color code
+     *
+     * PAC color codes have the second byte be in the range 0x40 to 0x4f, or
+     * 0x60 to 0x6f.
+     *
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the byte is a color PAC
+     */
+
+    Cea608Stream.prototype.isColorPAC = function (char1) {
+      return char1 >= 0x40 && char1 <= 0x4f || char1 >= 0x60 && char1 <= 0x7f;
+    };
+    /**
+     * Detects if a single byte is in the range of a normal character
+     *
+     * Normal text bytes are in the range 0x20 to 0x7f.
+     *
+     * @param  {Integer} char  The byte
+     * @return {Boolean}       Whether the byte is a normal character
+     */
+
+    Cea608Stream.prototype.isNormalChar = function (char) {
+      return char >= 0x20 && char <= 0x7f;
+    };
+    /**
+     * Configures roll-up
+     *
+     * @param  {Integer} pts         Current PTS
+     * @param  {Integer} newBaseRow  Used by PACs to slide the current window to
+     *                               a new position
+     */
+
+    Cea608Stream.prototype.setRollUp = function (pts, newBaseRow) {
+      // Reset the base row to the bottom row when switching modes
+      if (this.mode_ !== 'rollUp') {
+        this.row_ = BOTTOM_ROW;
+        this.mode_ = 'rollUp'; // Spec says to wipe memories when switching to roll-up
+
+        this.flushDisplayed(pts);
+        this.nonDisplayed_ = createDisplayBuffer();
+        this.displayed_ = createDisplayBuffer();
+      }
+      if (newBaseRow !== undefined && newBaseRow !== this.row_) {
+        // move currently displayed captions (up or down) to the new base row
+        for (var i = 0; i < this.rollUpRows_; i++) {
+          this.displayed_[newBaseRow - i] = this.displayed_[this.row_ - i];
+          this.displayed_[this.row_ - i] = {
+            text: '',
+            indent: 0,
+            offset: 0
+          };
+        }
+      }
+      if (newBaseRow === undefined) {
+        newBaseRow = this.row_;
+      }
+      this.topRow_ = newBaseRow - this.rollUpRows_ + 1;
+    }; // Adds the opening HTML tag for the passed character to the caption text,
+    // and keeps track of it for later closing
+
+    Cea608Stream.prototype.addFormatting = function (pts, format) {
+      this.formatting_ = this.formatting_.concat(format);
+      var text = format.reduce(function (text, format) {
+        return text + '<' + format + '>';
+      }, '');
+      this[this.mode_](pts, text);
+    }; // Adds HTML closing tags for current formatting to caption text and
+    // clears remembered formatting
+
+    Cea608Stream.prototype.clearFormatting = function (pts) {
+      if (!this.formatting_.length) {
+        return;
+      }
+      var text = this.formatting_.reverse().reduce(function (text, format) {
+        return text + '</' + format + '>';
+      }, '');
+      this.formatting_ = [];
+      this[this.mode_](pts, text);
+    }; // Mode Implementations
+
+    Cea608Stream.prototype.popOn = function (pts, text) {
+      var baseRow = this.nonDisplayed_[this.row_].text; // buffer characters
+
+      baseRow += text;
+      this.nonDisplayed_[this.row_].text = baseRow;
+    };
+    Cea608Stream.prototype.rollUp = function (pts, text) {
+      var baseRow = this.displayed_[this.row_].text;
+      baseRow += text;
+      this.displayed_[this.row_].text = baseRow;
+    };
+    Cea608Stream.prototype.shiftRowsUp_ = function () {
+      var i; // clear out inactive rows
+
+      for (i = 0; i < this.topRow_; i++) {
+        this.displayed_[i] = {
+          text: '',
+          indent: 0,
+          offset: 0
+        };
+      }
+      for (i = this.row_ + 1; i < BOTTOM_ROW + 1; i++) {
+        this.displayed_[i] = {
+          text: '',
+          indent: 0,
+          offset: 0
+        };
+      } // shift displayed rows up
+
+      for (i = this.topRow_; i < this.row_; i++) {
+        this.displayed_[i] = this.displayed_[i + 1];
+      } // clear out the bottom row
+
+      this.displayed_[this.row_] = {
+        text: '',
+        indent: 0,
+        offset: 0
+      };
+    };
+    Cea608Stream.prototype.paintOn = function (pts, text) {
+      var baseRow = this.displayed_[this.row_].text;
+      baseRow += text;
+      this.displayed_[this.row_].text = baseRow;
+    }; // exports
+
+    var captionStream = {
+      CaptionStream: CaptionStream$2,
+      Cea608Stream: Cea608Stream,
+      Cea708Stream: Cea708Stream
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var streamTypes = {
+      H264_STREAM_TYPE: 0x1B,
+      ADTS_STREAM_TYPE: 0x0F,
+      METADATA_STREAM_TYPE: 0x15
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Accepts program elementary stream (PES) data events and corrects
+     * decode and presentation time stamps to account for a rollover
+     * of the 33 bit value.
+     */
+
+    var Stream$6 = stream;
+    var MAX_TS = 8589934592;
+    var RO_THRESH = 4294967296;
+    var TYPE_SHARED = 'shared';
+    var handleRollover$1 = function (value, reference) {
+      var direction = 1;
+      if (value > reference) {
+        // If the current timestamp value is greater than our reference timestamp and we detect a
+        // timestamp rollover, this means the roll over is happening in the opposite direction.
+        // Example scenario: Enter a long stream/video just after a rollover occurred. The reference
+        // point will be set to a small number, e.g. 1. The user then seeks backwards over the
+        // rollover point. In loading this segment, the timestamp values will be very large,
+        // e.g. 2^33 - 1. Since this comes before the data we loaded previously, we want to adjust
+        // the time stamp to be `value - 2^33`.
+        direction = -1;
+      } // Note: A seek forwards or back that is greater than the RO_THRESH (2^32, ~13 hours) will
+      // cause an incorrect adjustment.
+
+      while (Math.abs(reference - value) > RO_THRESH) {
+        value += direction * MAX_TS;
+      }
+      return value;
+    };
+    var TimestampRolloverStream$1 = function (type) {
+      var lastDTS, referenceDTS;
+      TimestampRolloverStream$1.prototype.init.call(this); // The "shared" type is used in cases where a stream will contain muxed
+      // video and audio. We could use `undefined` here, but having a string
+      // makes debugging a little clearer.
+
+      this.type_ = type || TYPE_SHARED;
+      this.push = function (data) {
+        /**
+         * Rollover stream expects data from elementary stream.
+         * Elementary stream can push forward 2 types of data
+         * - Parsed Video/Audio/Timed-metadata PES (packetized elementary stream) packets
+         * - Tracks metadata from PMT (Program Map Table)
+         * Rollover stream expects pts/dts info to be available, since it stores lastDTS
+         * We should ignore non-PES packets since they may override lastDTS to undefined.
+         * lastDTS is important to signal the next segments
+         * about rollover from the previous segments.
+         */
+        if (data.type === 'metadata') {
+          this.trigger('data', data);
+          return;
+        } // Any "shared" rollover streams will accept _all_ data. Otherwise,
+        // streams will only accept data that matches their type.
+
+        if (this.type_ !== TYPE_SHARED && data.type !== this.type_) {
+          return;
+        }
+        if (referenceDTS === undefined) {
+          referenceDTS = data.dts;
+        }
+        data.dts = handleRollover$1(data.dts, referenceDTS);
+        data.pts = handleRollover$1(data.pts, referenceDTS);
+        lastDTS = data.dts;
+        this.trigger('data', data);
+      };
+      this.flush = function () {
+        referenceDTS = lastDTS;
+        this.trigger('done');
+      };
+      this.endTimeline = function () {
+        this.flush();
+        this.trigger('endedtimeline');
+      };
+      this.discontinuity = function () {
+        referenceDTS = void 0;
+        lastDTS = void 0;
+      };
+      this.reset = function () {
+        this.discontinuity();
+        this.trigger('reset');
+      };
+    };
+    TimestampRolloverStream$1.prototype = new Stream$6();
+    var timestampRolloverStream = {
+      TimestampRolloverStream: TimestampRolloverStream$1,
+      handleRollover: handleRollover$1
+    }; // Once IE11 support is dropped, this function should be removed.
+
+    var typedArrayIndexOf$1 = (typedArray, element, fromIndex) => {
+      if (!typedArray) {
+        return -1;
+      }
+      var currentIndex = fromIndex;
+      for (; currentIndex < typedArray.length; currentIndex++) {
+        if (typedArray[currentIndex] === element) {
+          return currentIndex;
+        }
+      }
+      return -1;
+    };
+    var typedArray = {
+      typedArrayIndexOf: typedArrayIndexOf$1
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Tools for parsing ID3 frame data
+     * @see http://id3.org/id3v2.3.0
+     */
+
+    var typedArrayIndexOf = typedArray.typedArrayIndexOf,
+      // Frames that allow different types of text encoding contain a text
+      // encoding description byte [ID3v2.4.0 section 4.]
+      textEncodingDescriptionByte = {
+        Iso88591: 0x00,
+        // ISO-8859-1, terminated with \0.
+        Utf16: 0x01,
+        // UTF-16 encoded Unicode BOM, terminated with \0\0
+        Utf16be: 0x02,
+        // UTF-16BE encoded Unicode, without BOM, terminated with \0\0
+        Utf8: 0x03 // UTF-8 encoded Unicode, terminated with \0
+      },
+      // return a percent-encoded representation of the specified byte range
+      // @see http://en.wikipedia.org/wiki/Percent-encoding 
+      percentEncode$1 = function (bytes, start, end) {
+        var i,
+          result = '';
+        for (i = start; i < end; i++) {
+          result += '%' + ('00' + bytes[i].toString(16)).slice(-2);
+        }
+        return result;
+      },
+      // return the string representation of the specified byte range,
+      // interpreted as UTf-8.
+      parseUtf8 = function (bytes, start, end) {
+        return decodeURIComponent(percentEncode$1(bytes, start, end));
+      },
+      // return the string representation of the specified byte range,
+      // interpreted as ISO-8859-1.
+      parseIso88591$1 = function (bytes, start, end) {
+        return unescape(percentEncode$1(bytes, start, end)); // jshint ignore:line
+      },
+      parseSyncSafeInteger$1 = function (data) {
+        return data[0] << 21 | data[1] << 14 | data[2] << 7 | data[3];
+      },
+      frameParsers = {
+        'APIC': function (frame) {
+          var i = 1,
+            mimeTypeEndIndex,
+            descriptionEndIndex,
+            LINK_MIME_TYPE = '-->';
+          if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+            // ignore frames with unrecognized character encodings
+            return;
+          } // parsing fields [ID3v2.4.0 section 4.14.]
+
+          mimeTypeEndIndex = typedArrayIndexOf(frame.data, 0, i);
+          if (mimeTypeEndIndex < 0) {
+            // malformed frame
+            return;
+          } // parsing Mime type field (terminated with \0)
+
+          frame.mimeType = parseIso88591$1(frame.data, i, mimeTypeEndIndex);
+          i = mimeTypeEndIndex + 1; // parsing 1-byte Picture Type field
+
+          frame.pictureType = frame.data[i];
+          i++;
+          descriptionEndIndex = typedArrayIndexOf(frame.data, 0, i);
+          if (descriptionEndIndex < 0) {
+            // malformed frame
+            return;
+          } // parsing Description field (terminated with \0)
+
+          frame.description = parseUtf8(frame.data, i, descriptionEndIndex);
+          i = descriptionEndIndex + 1;
+          if (frame.mimeType === LINK_MIME_TYPE) {
+            // parsing Picture Data field as URL (always represented as ISO-8859-1 [ID3v2.4.0 section 4.])
+            frame.url = parseIso88591$1(frame.data, i, frame.data.length);
+          } else {
+            // parsing Picture Data field as binary data
+            frame.pictureData = frame.data.subarray(i, frame.data.length);
+          }
+        },
+        'T*': function (frame) {
+          if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+            // ignore frames with unrecognized character encodings
+            return;
+          } // parse text field, do not include null terminator in the frame value
+          // frames that allow different types of encoding contain terminated text [ID3v2.4.0 section 4.]
+
+          frame.value = parseUtf8(frame.data, 1, frame.data.length).replace(/\0*$/, ''); // text information frames supports multiple strings, stored as a terminator separated list [ID3v2.4.0 section 4.2.]
+
+          frame.values = frame.value.split('\0');
+        },
+        'TXXX': function (frame) {
+          var descriptionEndIndex;
+          if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+            // ignore frames with unrecognized character encodings
+            return;
+          }
+          descriptionEndIndex = typedArrayIndexOf(frame.data, 0, 1);
+          if (descriptionEndIndex === -1) {
+            return;
+          } // parse the text fields
+
+          frame.description = parseUtf8(frame.data, 1, descriptionEndIndex); // do not include the null terminator in the tag value
+          // frames that allow different types of encoding contain terminated text
+          // [ID3v2.4.0 section 4.]
+
+          frame.value = parseUtf8(frame.data, descriptionEndIndex + 1, frame.data.length).replace(/\0*$/, '');
+          frame.data = frame.value;
+        },
+        'W*': function (frame) {
+          // parse URL field; URL fields are always represented as ISO-8859-1 [ID3v2.4.0 section 4.]
+          // if the value is followed by a string termination all the following information should be ignored [ID3v2.4.0 section 4.3]
+          frame.url = parseIso88591$1(frame.data, 0, frame.data.length).replace(/\0.*$/, '');
+        },
+        'WXXX': function (frame) {
+          var descriptionEndIndex;
+          if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+            // ignore frames with unrecognized character encodings
+            return;
+          }
+          descriptionEndIndex = typedArrayIndexOf(frame.data, 0, 1);
+          if (descriptionEndIndex === -1) {
+            return;
+          } // parse the description and URL fields
+
+          frame.description = parseUtf8(frame.data, 1, descriptionEndIndex); // URL fields are always represented as ISO-8859-1 [ID3v2.4.0 section 4.]
+          // if the value is followed by a string termination all the following information
+          // should be ignored [ID3v2.4.0 section 4.3]
+
+          frame.url = parseIso88591$1(frame.data, descriptionEndIndex + 1, frame.data.length).replace(/\0.*$/, '');
+        },
+        'PRIV': function (frame) {
+          var i;
+          for (i = 0; i < frame.data.length; i++) {
+            if (frame.data[i] === 0) {
+              // parse the description and URL fields
+              frame.owner = parseIso88591$1(frame.data, 0, i);
+              break;
+            }
+          }
+          frame.privateData = frame.data.subarray(i + 1);
+          frame.data = frame.privateData;
+        }
+      };
+    var parseId3Frames$1 = function (data) {
+      var frameSize,
+        frameHeader,
+        frameStart = 10,
+        tagSize = 0,
+        frames = []; // If we don't have enough data for a header, 10 bytes, 
+      // or 'ID3' in the first 3 bytes this is not a valid ID3 tag.
+
+      if (data.length < 10 || data[0] !== 'I'.charCodeAt(0) || data[1] !== 'D'.charCodeAt(0) || data[2] !== '3'.charCodeAt(0)) {
+        return;
+      } // the frame size is transmitted as a 28-bit integer in the
+      // last four bytes of the ID3 header.
+      // The most significant bit of each byte is dropped and the
+      // results concatenated to recover the actual value.
+
+      tagSize = parseSyncSafeInteger$1(data.subarray(6, 10)); // ID3 reports the tag size excluding the header but it's more
+      // convenient for our comparisons to include it
+
+      tagSize += 10; // check bit 6 of byte 5 for the extended header flag.
+
+      var hasExtendedHeader = data[5] & 0x40;
+      if (hasExtendedHeader) {
+        // advance the frame start past the extended header
+        frameStart += 4; // header size field
+
+        frameStart += parseSyncSafeInteger$1(data.subarray(10, 14));
+        tagSize -= parseSyncSafeInteger$1(data.subarray(16, 20)); // clip any padding off the end
+      } // parse one or more ID3 frames
+      // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+      do {
+        // determine the number of bytes in this frame
+        frameSize = parseSyncSafeInteger$1(data.subarray(frameStart + 4, frameStart + 8));
+        if (frameSize < 1) {
+          break;
+        }
+        frameHeader = String.fromCharCode(data[frameStart], data[frameStart + 1], data[frameStart + 2], data[frameStart + 3]);
+        var frame = {
+          id: frameHeader,
+          data: data.subarray(frameStart + 10, frameStart + frameSize + 10)
+        };
+        frame.key = frame.id; // parse frame values
+
+        if (frameParsers[frame.id]) {
+          // use frame specific parser
+          frameParsers[frame.id](frame);
+        } else if (frame.id[0] === 'T') {
+          // use text frame generic parser
+          frameParsers['T*'](frame);
+        } else if (frame.id[0] === 'W') {
+          // use URL link frame generic parser
+          frameParsers['W*'](frame);
+        }
+        frames.push(frame);
+        frameStart += 10; // advance past the frame header
+
+        frameStart += frameSize; // advance past the frame body
+      } while (frameStart < tagSize);
+      return frames;
+    };
+    var parseId3 = {
+      parseId3Frames: parseId3Frames$1,
+      parseSyncSafeInteger: parseSyncSafeInteger$1,
+      frameParsers: frameParsers
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Accepts program elementary stream (PES) data events and parses out
+     * ID3 metadata from them, if present.
+     * @see http://id3.org/id3v2.3.0
+     */
+
+    var Stream$5 = stream,
+      StreamTypes$3 = streamTypes,
+      id3 = parseId3,
+      MetadataStream;
+    MetadataStream = function (options) {
+      var settings = {
+          // the bytes of the program-level descriptor field in MP2T
+          // see ISO/IEC 13818-1:2013 (E), section 2.6 "Program and
+          // program element descriptors"
+          descriptor: options && options.descriptor
+        },
+        // the total size in bytes of the ID3 tag being parsed
+        tagSize = 0,
+        // tag data that is not complete enough to be parsed
+        buffer = [],
+        // the total number of bytes currently in the buffer
+        bufferSize = 0,
+        i;
+      MetadataStream.prototype.init.call(this); // calculate the text track in-band metadata track dispatch type
+      // https://html.spec.whatwg.org/multipage/embedded-content.html#steps-to-expose-a-media-resource-specific-text-track
+
+      this.dispatchType = StreamTypes$3.METADATA_STREAM_TYPE.toString(16);
+      if (settings.descriptor) {
+        for (i = 0; i < settings.descriptor.length; i++) {
+          this.dispatchType += ('00' + settings.descriptor[i].toString(16)).slice(-2);
+        }
+      }
+      this.push = function (chunk) {
+        var tag, frameStart, frameSize, frame, i, frameHeader;
+        if (chunk.type !== 'timed-metadata') {
+          return;
+        } // if data_alignment_indicator is set in the PES header,
+        // we must have the start of a new ID3 tag. Assume anything
+        // remaining in the buffer was malformed and throw it out
+
+        if (chunk.dataAlignmentIndicator) {
+          bufferSize = 0;
+          buffer.length = 0;
+        } // ignore events that don't look like ID3 data
+
+        if (buffer.length === 0 && (chunk.data.length < 10 || chunk.data[0] !== 'I'.charCodeAt(0) || chunk.data[1] !== 'D'.charCodeAt(0) || chunk.data[2] !== '3'.charCodeAt(0))) {
+          this.trigger('log', {
+            level: 'warn',
+            message: 'Skipping unrecognized metadata packet'
+          });
+          return;
+        } // add this chunk to the data we've collected so far
+
+        buffer.push(chunk);
+        bufferSize += chunk.data.byteLength; // grab the size of the entire frame from the ID3 header
+
+        if (buffer.length === 1) {
+          // the frame size is transmitted as a 28-bit integer in the
+          // last four bytes of the ID3 header.
+          // The most significant bit of each byte is dropped and the
+          // results concatenated to recover the actual value.
+          tagSize = id3.parseSyncSafeInteger(chunk.data.subarray(6, 10)); // ID3 reports the tag size excluding the header but it's more
+          // convenient for our comparisons to include it
+
+          tagSize += 10;
+        } // if the entire frame has not arrived, wait for more data
+
+        if (bufferSize < tagSize) {
+          return;
+        } // collect the entire frame so it can be parsed
+
+        tag = {
+          data: new Uint8Array(tagSize),
+          frames: [],
+          pts: buffer[0].pts,
+          dts: buffer[0].dts
+        };
+        for (i = 0; i < tagSize;) {
+          tag.data.set(buffer[0].data.subarray(0, tagSize - i), i);
+          i += buffer[0].data.byteLength;
+          bufferSize -= buffer[0].data.byteLength;
+          buffer.shift();
+        } // find the start of the first frame and the end of the tag
+
+        frameStart = 10;
+        if (tag.data[5] & 0x40) {
+          // advance the frame start past the extended header
+          frameStart += 4; // header size field
+
+          frameStart += id3.parseSyncSafeInteger(tag.data.subarray(10, 14)); // clip any padding off the end
+
+          tagSize -= id3.parseSyncSafeInteger(tag.data.subarray(16, 20));
+        } // parse one or more ID3 frames
+        // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+        do {
+          // determine the number of bytes in this frame
+          frameSize = id3.parseSyncSafeInteger(tag.data.subarray(frameStart + 4, frameStart + 8));
+          if (frameSize < 1) {
+            this.trigger('log', {
+              level: 'warn',
+              message: 'Malformed ID3 frame encountered. Skipping remaining metadata parsing.'
+            }); // If the frame is malformed, don't parse any further frames but allow previous valid parsed frames
+            // to be sent along.
+
+            break;
+          }
+          frameHeader = String.fromCharCode(tag.data[frameStart], tag.data[frameStart + 1], tag.data[frameStart + 2], tag.data[frameStart + 3]);
+          frame = {
+            id: frameHeader,
+            data: tag.data.subarray(frameStart + 10, frameStart + frameSize + 10)
+          };
+          frame.key = frame.id; // parse frame values
+
+          if (id3.frameParsers[frame.id]) {
+            // use frame specific parser
+            id3.frameParsers[frame.id](frame);
+          } else if (frame.id[0] === 'T') {
+            // use text frame generic parser
+            id3.frameParsers['T*'](frame);
+          } else if (frame.id[0] === 'W') {
+            // use URL link frame generic parser
+            id3.frameParsers['W*'](frame);
+          } // handle the special PRIV frame used to indicate the start
+          // time for raw AAC data
+
+          if (frame.owner === 'com.apple.streaming.transportStreamTimestamp') {
+            var d = frame.data,
+              size = (d[3] & 0x01) << 30 | d[4] << 22 | d[5] << 14 | d[6] << 6 | d[7] >>> 2;
+            size *= 4;
+            size += d[7] & 0x03;
+            frame.timeStamp = size; // in raw AAC, all subsequent data will be timestamped based
+            // on the value of this frame
+            // we couldn't have known the appropriate pts and dts before
+            // parsing this ID3 tag so set those values now
+
+            if (tag.pts === undefined && tag.dts === undefined) {
+              tag.pts = frame.timeStamp;
+              tag.dts = frame.timeStamp;
+            }
+            this.trigger('timestamp', frame);
+          }
+          tag.frames.push(frame);
+          frameStart += 10; // advance past the frame header
+
+          frameStart += frameSize; // advance past the frame body
+        } while (frameStart < tagSize);
+        this.trigger('data', tag);
+      };
+    };
+    MetadataStream.prototype = new Stream$5();
+    var metadataStream = MetadataStream;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * A stream-based mp2t to mp4 converter. This utility can be used to
+     * deliver mp4s to a SourceBuffer on platforms that support native
+     * Media Source Extensions.
+     */
+
+    var Stream$4 = stream,
+      CaptionStream$1 = captionStream,
+      StreamTypes$2 = streamTypes,
+      TimestampRolloverStream = timestampRolloverStream.TimestampRolloverStream; // object types
+
+    var TransportPacketStream, TransportParseStream, ElementaryStream; // constants
+
+    var MP2T_PACKET_LENGTH$1 = 188,
+      // bytes
+      SYNC_BYTE$1 = 0x47;
+    /**
+     * Splits an incoming stream of binary data into MPEG-2 Transport
+     * Stream packets.
+     */
+
+    TransportPacketStream = function () {
+      var buffer = new Uint8Array(MP2T_PACKET_LENGTH$1),
+        bytesInBuffer = 0;
+      TransportPacketStream.prototype.init.call(this); // Deliver new bytes to the stream.
+
+      /**
+       * Split a stream of data into M2TS packets
+      **/
+
+      this.push = function (bytes) {
+        var startIndex = 0,
+          endIndex = MP2T_PACKET_LENGTH$1,
+          everything; // If there are bytes remaining from the last segment, prepend them to the
+        // bytes that were pushed in
+
+        if (bytesInBuffer) {
+          everything = new Uint8Array(bytes.byteLength + bytesInBuffer);
+          everything.set(buffer.subarray(0, bytesInBuffer));
+          everything.set(bytes, bytesInBuffer);
+          bytesInBuffer = 0;
+        } else {
+          everything = bytes;
+        } // While we have enough data for a packet
+
+        while (endIndex < everything.byteLength) {
+          // Look for a pair of start and end sync bytes in the data..
+          if (everything[startIndex] === SYNC_BYTE$1 && everything[endIndex] === SYNC_BYTE$1) {
+            // We found a packet so emit it and jump one whole packet forward in
+            // the stream
+            this.trigger('data', everything.subarray(startIndex, endIndex));
+            startIndex += MP2T_PACKET_LENGTH$1;
+            endIndex += MP2T_PACKET_LENGTH$1;
+            continue;
+          } // If we get here, we have somehow become de-synchronized and we need to step
+          // forward one byte at a time until we find a pair of sync bytes that denote
+          // a packet
+
+          startIndex++;
+          endIndex++;
+        } // If there was some data left over at the end of the segment that couldn't
+        // possibly be a whole packet, keep it because it might be the start of a packet
+        // that continues in the next segment
+
+        if (startIndex < everything.byteLength) {
+          buffer.set(everything.subarray(startIndex), 0);
+          bytesInBuffer = everything.byteLength - startIndex;
+        }
+      };
+      /**
+       * Passes identified M2TS packets to the TransportParseStream to be parsed
+      **/
+
+      this.flush = function () {
+        // If the buffer contains a whole packet when we are being flushed, emit it
+        // and empty the buffer. Otherwise hold onto the data because it may be
+        // important for decoding the next segment
+        if (bytesInBuffer === MP2T_PACKET_LENGTH$1 && buffer[0] === SYNC_BYTE$1) {
+          this.trigger('data', buffer);
+          bytesInBuffer = 0;
+        }
+        this.trigger('done');
+      };
+      this.endTimeline = function () {
+        this.flush();
+        this.trigger('endedtimeline');
+      };
+      this.reset = function () {
+        bytesInBuffer = 0;
+        this.trigger('reset');
+      };
+    };
+    TransportPacketStream.prototype = new Stream$4();
+    /**
+     * Accepts an MP2T TransportPacketStream and emits data events with parsed
+     * forms of the individual transport stream packets.
+     */
+
+    TransportParseStream = function () {
+      var parsePsi, parsePat, parsePmt, self;
+      TransportParseStream.prototype.init.call(this);
+      self = this;
+      this.packetsWaitingForPmt = [];
+      this.programMapTable = undefined;
+      parsePsi = function (payload, psi) {
+        var offset = 0; // PSI packets may be split into multiple sections and those
+        // sections may be split into multiple packets. If a PSI
+        // section starts in this packet, the payload_unit_start_indicator
+        // will be true and the first byte of the payload will indicate
+        // the offset from the current position to the start of the
+        // section.
+
+        if (psi.payloadUnitStartIndicator) {
+          offset += payload[offset] + 1;
+        }
+        if (psi.type === 'pat') {
+          parsePat(payload.subarray(offset), psi);
+        } else {
+          parsePmt(payload.subarray(offset), psi);
+        }
+      };
+      parsePat = function (payload, pat) {
+        pat.section_number = payload[7]; // eslint-disable-line camelcase
+
+        pat.last_section_number = payload[8]; // eslint-disable-line camelcase
+        // skip the PSI header and parse the first PMT entry
+
+        self.pmtPid = (payload[10] & 0x1F) << 8 | payload[11];
+        pat.pmtPid = self.pmtPid;
+      };
+      /**
+       * Parse out the relevant fields of a Program Map Table (PMT).
+       * @param payload {Uint8Array} the PMT-specific portion of an MP2T
+       * packet. The first byte in this array should be the table_id
+       * field.
+       * @param pmt {object} the object that should be decorated with
+       * fields parsed from the PMT.
+       */
+
+      parsePmt = function (payload, pmt) {
+        var sectionLength, tableEnd, programInfoLength, offset; // PMTs can be sent ahead of the time when they should actually
+        // take effect. We don't believe this should ever be the case
+        // for HLS but we'll ignore "forward" PMT declarations if we see
+        // them. Future PMT declarations have the current_next_indicator
+        // set to zero.
+
+        if (!(payload[5] & 0x01)) {
+          return;
+        } // overwrite any existing program map table
+
+        self.programMapTable = {
+          video: null,
+          audio: null,
+          'timed-metadata': {}
+        }; // the mapping table ends at the end of the current section
+
+        sectionLength = (payload[1] & 0x0f) << 8 | payload[2];
+        tableEnd = 3 + sectionLength - 4; // to determine where the table is, we have to figure out how
+        // long the program info descriptors are
+
+        programInfoLength = (payload[10] & 0x0f) << 8 | payload[11]; // advance the offset to the first entry in the mapping table
+
+        offset = 12 + programInfoLength;
+        while (offset < tableEnd) {
+          var streamType = payload[offset];
+          var pid = (payload[offset + 1] & 0x1F) << 8 | payload[offset + 2]; // only map a single elementary_pid for audio and video stream types
+          // TODO: should this be done for metadata too? for now maintain behavior of
+          //       multiple metadata streams
+
+          if (streamType === StreamTypes$2.H264_STREAM_TYPE && self.programMapTable.video === null) {
+            self.programMapTable.video = pid;
+          } else if (streamType === StreamTypes$2.ADTS_STREAM_TYPE && self.programMapTable.audio === null) {
+            self.programMapTable.audio = pid;
+          } else if (streamType === StreamTypes$2.METADATA_STREAM_TYPE) {
+            // map pid to stream type for metadata streams
+            self.programMapTable['timed-metadata'][pid] = streamType;
+          } // move to the next table entry
+          // skip past the elementary stream descriptors, if present
+
+          offset += ((payload[offset + 3] & 0x0F) << 8 | payload[offset + 4]) + 5;
+        } // record the map on the packet as well
+
+        pmt.programMapTable = self.programMapTable;
+      };
+      /**
+       * Deliver a new MP2T packet to the next stream in the pipeline.
+       */
+
+      this.push = function (packet) {
+        var result = {},
+          offset = 4;
+        result.payloadUnitStartIndicator = !!(packet[1] & 0x40); // pid is a 13-bit field starting at the last bit of packet[1]
+
+        result.pid = packet[1] & 0x1f;
+        result.pid <<= 8;
+        result.pid |= packet[2]; // if an adaption field is present, its length is specified by the
+        // fifth byte of the TS packet header. The adaptation field is
+        // used to add stuffing to PES packets that don't fill a complete
+        // TS packet, and to specify some forms of timing and control data
+        // that we do not currently use.
+
+        if ((packet[3] & 0x30) >>> 4 > 0x01) {
+          offset += packet[offset] + 1;
+        } // parse the rest of the packet based on the type
+
+        if (result.pid === 0) {
+          result.type = 'pat';
+          parsePsi(packet.subarray(offset), result);
+          this.trigger('data', result);
+        } else if (result.pid === this.pmtPid) {
+          result.type = 'pmt';
+          parsePsi(packet.subarray(offset), result);
+          this.trigger('data', result); // if there are any packets waiting for a PMT to be found, process them now
+
+          while (this.packetsWaitingForPmt.length) {
+            this.processPes_.apply(this, this.packetsWaitingForPmt.shift());
+          }
+        } else if (this.programMapTable === undefined) {
+          // When we have not seen a PMT yet, defer further processing of
+          // PES packets until one has been parsed
+          this.packetsWaitingForPmt.push([packet, offset, result]);
+        } else {
+          this.processPes_(packet, offset, result);
+        }
+      };
+      this.processPes_ = function (packet, offset, result) {
+        // set the appropriate stream type
+        if (result.pid === this.programMapTable.video) {
+          result.streamType = StreamTypes$2.H264_STREAM_TYPE;
+        } else if (result.pid === this.programMapTable.audio) {
+          result.streamType = StreamTypes$2.ADTS_STREAM_TYPE;
+        } else {
+          // if not video or audio, it is timed-metadata or unknown
+          // if unknown, streamType will be undefined
+          result.streamType = this.programMapTable['timed-metadata'][result.pid];
+        }
+        result.type = 'pes';
+        result.data = packet.subarray(offset);
+        this.trigger('data', result);
+      };
+    };
+    TransportParseStream.prototype = new Stream$4();
+    TransportParseStream.STREAM_TYPES = {
+      h264: 0x1b,
+      adts: 0x0f
+    };
+    /**
+     * Reconsistutes program elementary stream (PES) packets from parsed
+     * transport stream packets. That is, if you pipe an
+     * mp2t.TransportParseStream into a mp2t.ElementaryStream, the output
+     * events will be events which capture the bytes for individual PES
+     * packets plus relevant metadata that has been extracted from the
+     * container.
+     */
+
+    ElementaryStream = function () {
+      var self = this,
+        segmentHadPmt = false,
+        // PES packet fragments
+        video = {
+          data: [],
+          size: 0
+        },
+        audio = {
+          data: [],
+          size: 0
+        },
+        timedMetadata = {
+          data: [],
+          size: 0
+        },
+        programMapTable,
+        parsePes = function (payload, pes) {
+          var ptsDtsFlags;
+          const startPrefix = payload[0] << 16 | payload[1] << 8 | payload[2]; // default to an empty array
+
+          pes.data = new Uint8Array(); // In certain live streams, the start of a TS fragment has ts packets
+          // that are frame data that is continuing from the previous fragment. This
+          // is to check that the pes data is the start of a new pes payload
+
+          if (startPrefix !== 1) {
+            return;
+          } // get the packet length, this will be 0 for video
+
+          pes.packetLength = 6 + (payload[4] << 8 | payload[5]); // find out if this packets starts a new keyframe
+
+          pes.dataAlignmentIndicator = (payload[6] & 0x04) !== 0; // PES packets may be annotated with a PTS value, or a PTS value
+          // and a DTS value. Determine what combination of values is
+          // available to work with.
+
+          ptsDtsFlags = payload[7]; // PTS and DTS are normally stored as a 33-bit number.  Javascript
+          // performs all bitwise operations on 32-bit integers but javascript
+          // supports a much greater range (52-bits) of integer using standard
+          // mathematical operations.
+          // We construct a 31-bit value using bitwise operators over the 31
+          // most significant bits and then multiply by 4 (equal to a left-shift
+          // of 2) before we add the final 2 least significant bits of the
+          // timestamp (equal to an OR.)
+
+          if (ptsDtsFlags & 0xC0) {
+            // the PTS and DTS are not written out directly. For information
+            // on how they are encoded, see
+            // http://dvd.sourceforge.net/dvdinfo/pes-hdr.html
+            pes.pts = (payload[9] & 0x0E) << 27 | (payload[10] & 0xFF) << 20 | (payload[11] & 0xFE) << 12 | (payload[12] & 0xFF) << 5 | (payload[13] & 0xFE) >>> 3;
+            pes.pts *= 4; // Left shift by 2
+
+            pes.pts += (payload[13] & 0x06) >>> 1; // OR by the two LSBs
+
+            pes.dts = pes.pts;
+            if (ptsDtsFlags & 0x40) {
+              pes.dts = (payload[14] & 0x0E) << 27 | (payload[15] & 0xFF) << 20 | (payload[16] & 0xFE) << 12 | (payload[17] & 0xFF) << 5 | (payload[18] & 0xFE) >>> 3;
+              pes.dts *= 4; // Left shift by 2
+
+              pes.dts += (payload[18] & 0x06) >>> 1; // OR by the two LSBs
+            }
+          } // the data section starts immediately after the PES header.
+          // pes_header_data_length specifies the number of header bytes
+          // that follow the last byte of the field.
+
+          pes.data = payload.subarray(9 + payload[8]);
+        },
+        /**
+          * Pass completely parsed PES packets to the next stream in the pipeline
+         **/
+        flushStream = function (stream, type, forceFlush) {
+          var packetData = new Uint8Array(stream.size),
+            event = {
+              type: type
+            },
+            i = 0,
+            offset = 0,
+            packetFlushable = false,
+            fragment; // do nothing if there is not enough buffered data for a complete
+          // PES header
+
+          if (!stream.data.length || stream.size < 9) {
+            return;
+          }
+          event.trackId = stream.data[0].pid; // reassemble the packet
+
+          for (i = 0; i < stream.data.length; i++) {
+            fragment = stream.data[i];
+            packetData.set(fragment.data, offset);
+            offset += fragment.data.byteLength;
+          } // parse assembled packet's PES header
+
+          parsePes(packetData, event); // non-video PES packets MUST have a non-zero PES_packet_length
+          // check that there is enough stream data to fill the packet
+
+          packetFlushable = type === 'video' || event.packetLength <= stream.size; // flush pending packets if the conditions are right
+
+          if (forceFlush || packetFlushable) {
+            stream.size = 0;
+            stream.data.length = 0;
+          } // only emit packets that are complete. this is to avoid assembling
+          // incomplete PES packets due to poor segmentation
+
+          if (packetFlushable) {
+            self.trigger('data', event);
+          }
+        };
+      ElementaryStream.prototype.init.call(this);
+      /**
+       * Identifies M2TS packet types and parses PES packets using metadata
+       * parsed from the PMT
+       **/
+
+      this.push = function (data) {
+        ({
+          pat: function () {// we have to wait for the PMT to arrive as well before we
+            // have any meaningful metadata
+          },
+          pes: function () {
+            var stream, streamType;
+            switch (data.streamType) {
+              case StreamTypes$2.H264_STREAM_TYPE:
+                stream = video;
+                streamType = 'video';
+                break;
+              case StreamTypes$2.ADTS_STREAM_TYPE:
+                stream = audio;
+                streamType = 'audio';
+                break;
+              case StreamTypes$2.METADATA_STREAM_TYPE:
+                stream = timedMetadata;
+                streamType = 'timed-metadata';
+                break;
+              default:
+                // ignore unknown stream types
+                return;
+            } // if a new packet is starting, we can flush the completed
+            // packet
+
+            if (data.payloadUnitStartIndicator) {
+              flushStream(stream, streamType, true);
+            } // buffer this fragment until we are sure we've received the
+            // complete payload
+
+            stream.data.push(data);
+            stream.size += data.data.byteLength;
+          },
+          pmt: function () {
+            var event = {
+              type: 'metadata',
+              tracks: []
+            };
+            programMapTable = data.programMapTable; // translate audio and video streams to tracks
+
+            if (programMapTable.video !== null) {
+              event.tracks.push({
+                timelineStartInfo: {
+                  baseMediaDecodeTime: 0
+                },
+                id: +programMapTable.video,
+                codec: 'avc',
+                type: 'video'
+              });
+            }
+            if (programMapTable.audio !== null) {
+              event.tracks.push({
+                timelineStartInfo: {
+                  baseMediaDecodeTime: 0
+                },
+                id: +programMapTable.audio,
+                codec: 'adts',
+                type: 'audio'
+              });
+            }
+            segmentHadPmt = true;
+            self.trigger('data', event);
+          }
+        })[data.type]();
+      };
+      this.reset = function () {
+        video.size = 0;
+        video.data.length = 0;
+        audio.size = 0;
+        audio.data.length = 0;
+        this.trigger('reset');
+      };
+      /**
+       * Flush any remaining input. Video PES packets may be of variable
+       * length. Normally, the start of a new video packet can trigger the
+       * finalization of the previous packet. That is not possible if no
+       * more video is forthcoming, however. In that case, some other
+       * mechanism (like the end of the file) has to be employed. When it is
+       * clear that no additional data is forthcoming, calling this method
+       * will flush the buffered packets.
+       */
+
+      this.flushStreams_ = function () {
+        // !!THIS ORDER IS IMPORTANT!!
+        // video first then audio
+        flushStream(video, 'video');
+        flushStream(audio, 'audio');
+        flushStream(timedMetadata, 'timed-metadata');
+      };
+      this.flush = function () {
+        // if on flush we haven't had a pmt emitted
+        // and we have a pmt to emit. emit the pmt
+        // so that we trigger a trackinfo downstream.
+        if (!segmentHadPmt && programMapTable) {
+          var pmt = {
+            type: 'metadata',
+            tracks: []
+          }; // translate audio and video streams to tracks
+
+          if (programMapTable.video !== null) {
+            pmt.tracks.push({
+              timelineStartInfo: {
+                baseMediaDecodeTime: 0
+              },
+              id: +programMapTable.video,
+              codec: 'avc',
+              type: 'video'
+            });
+          }
+          if (programMapTable.audio !== null) {
+            pmt.tracks.push({
+              timelineStartInfo: {
+                baseMediaDecodeTime: 0
+              },
+              id: +programMapTable.audio,
+              codec: 'adts',
+              type: 'audio'
+            });
+          }
+          self.trigger('data', pmt);
+        }
+        segmentHadPmt = false;
+        this.flushStreams_();
+        this.trigger('done');
+      };
+    };
+    ElementaryStream.prototype = new Stream$4();
+    var m2ts$1 = {
+      PAT_PID: 0x0000,
+      MP2T_PACKET_LENGTH: MP2T_PACKET_LENGTH$1,
+      TransportPacketStream: TransportPacketStream,
+      TransportParseStream: TransportParseStream,
+      ElementaryStream: ElementaryStream,
+      TimestampRolloverStream: TimestampRolloverStream,
+      CaptionStream: CaptionStream$1.CaptionStream,
+      Cea608Stream: CaptionStream$1.Cea608Stream,
+      Cea708Stream: CaptionStream$1.Cea708Stream,
+      MetadataStream: metadataStream
+    };
+    for (var type in StreamTypes$2) {
+      if (StreamTypes$2.hasOwnProperty(type)) {
+        m2ts$1[type] = StreamTypes$2[type];
+      }
+    }
+    var m2ts_1 = m2ts$1;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var Stream$3 = stream;
+    var ONE_SECOND_IN_TS$2 = clock$2.ONE_SECOND_IN_TS;
+    var AdtsStream$1;
+    var ADTS_SAMPLING_FREQUENCIES$1 = [96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350];
+    /*
+     * Accepts a ElementaryStream and emits data events with parsed
+     * AAC Audio Frames of the individual packets. Input audio in ADTS
+     * format is unpacked and re-emitted as AAC frames.
+     *
+     * @see http://wiki.multimedia.cx/index.php?title=ADTS
+     * @see http://wiki.multimedia.cx/?title=Understanding_AAC
+     */
+
+    AdtsStream$1 = function (handlePartialSegments) {
+      var buffer,
+        frameNum = 0;
+      AdtsStream$1.prototype.init.call(this);
+      this.skipWarn_ = function (start, end) {
+        this.trigger('log', {
+          level: 'warn',
+          message: `adts skiping bytes ${start} to ${end} in frame ${frameNum} outside syncword`
+        });
+      };
+      this.push = function (packet) {
+        var i = 0,
+          frameLength,
+          protectionSkipBytes,
+          oldBuffer,
+          sampleCount,
+          adtsFrameDuration;
+        if (!handlePartialSegments) {
+          frameNum = 0;
+        }
+        if (packet.type !== 'audio') {
+          // ignore non-audio data
+          return;
+        } // Prepend any data in the buffer to the input data so that we can parse
+        // aac frames the cross a PES packet boundary
+
+        if (buffer && buffer.length) {
+          oldBuffer = buffer;
+          buffer = new Uint8Array(oldBuffer.byteLength + packet.data.byteLength);
+          buffer.set(oldBuffer);
+          buffer.set(packet.data, oldBuffer.byteLength);
+        } else {
+          buffer = packet.data;
+        } // unpack any ADTS frames which have been fully received
+        // for details on the ADTS header, see http://wiki.multimedia.cx/index.php?title=ADTS
+
+        var skip; // We use i + 7 here because we want to be able to parse the entire header.
+        // If we don't have enough bytes to do that, then we definitely won't have a full frame.
+
+        while (i + 7 < buffer.length) {
+          // Look for the start of an ADTS header..
+          if (buffer[i] !== 0xFF || (buffer[i + 1] & 0xF6) !== 0xF0) {
+            if (typeof skip !== 'number') {
+              skip = i;
+            } // If a valid header was not found,  jump one forward and attempt to
+            // find a valid ADTS header starting at the next byte
+
+            i++;
+            continue;
+          }
+          if (typeof skip === 'number') {
+            this.skipWarn_(skip, i);
+            skip = null;
+          } // The protection skip bit tells us if we have 2 bytes of CRC data at the
+          // end of the ADTS header
+
+          protectionSkipBytes = (~buffer[i + 1] & 0x01) * 2; // Frame length is a 13 bit integer starting 16 bits from the
+          // end of the sync sequence
+          // NOTE: frame length includes the size of the header
+
+          frameLength = (buffer[i + 3] & 0x03) << 11 | buffer[i + 4] << 3 | (buffer[i + 5] & 0xe0) >> 5;
+          sampleCount = ((buffer[i + 6] & 0x03) + 1) * 1024;
+          adtsFrameDuration = sampleCount * ONE_SECOND_IN_TS$2 / ADTS_SAMPLING_FREQUENCIES$1[(buffer[i + 2] & 0x3c) >>> 2]; // If we don't have enough data to actually finish this ADTS frame,
+          // then we have to wait for more data
+
+          if (buffer.byteLength - i < frameLength) {
+            break;
+          } // Otherwise, deliver the complete AAC frame
+
+          this.trigger('data', {
+            pts: packet.pts + frameNum * adtsFrameDuration,
+            dts: packet.dts + frameNum * adtsFrameDuration,
+            sampleCount: sampleCount,
+            audioobjecttype: (buffer[i + 2] >>> 6 & 0x03) + 1,
+            channelcount: (buffer[i + 2] & 1) << 2 | (buffer[i + 3] & 0xc0) >>> 6,
+            samplerate: ADTS_SAMPLING_FREQUENCIES$1[(buffer[i + 2] & 0x3c) >>> 2],
+            samplingfrequencyindex: (buffer[i + 2] & 0x3c) >>> 2,
+            // assume ISO/IEC 14496-12 AudioSampleEntry default of 16
+            samplesize: 16,
+            // data is the frame without it's header
+            data: buffer.subarray(i + 7 + protectionSkipBytes, i + frameLength)
+          });
+          frameNum++;
+          i += frameLength;
+        }
+        if (typeof skip === 'number') {
+          this.skipWarn_(skip, i);
+          skip = null;
+        } // remove processed bytes from the buffer.
+
+        buffer = buffer.subarray(i);
+      };
+      this.flush = function () {
+        frameNum = 0;
+        this.trigger('done');
+      };
+      this.reset = function () {
+        buffer = void 0;
+        this.trigger('reset');
+      };
+      this.endTimeline = function () {
+        buffer = void 0;
+        this.trigger('endedtimeline');
+      };
+    };
+    AdtsStream$1.prototype = new Stream$3();
+    var adts = AdtsStream$1;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var ExpGolomb$1;
+    /**
+     * Parser for exponential Golomb codes, a variable-bitwidth number encoding
+     * scheme used by h264.
+     */
+
+    ExpGolomb$1 = function (workingData) {
+      var
+        // the number of bytes left to examine in workingData
+        workingBytesAvailable = workingData.byteLength,
+        // the current word being examined
+        workingWord = 0,
+        // :uint
+        // the number of bits left to examine in the current word
+        workingBitsAvailable = 0; // :uint;
+      // ():uint
+
+      this.length = function () {
+        return 8 * workingBytesAvailable;
+      }; // ():uint
+
+      this.bitsAvailable = function () {
+        return 8 * workingBytesAvailable + workingBitsAvailable;
+      }; // ():void
+
+      this.loadWord = function () {
+        var position = workingData.byteLength - workingBytesAvailable,
+          workingBytes = new Uint8Array(4),
+          availableBytes = Math.min(4, workingBytesAvailable);
+        if (availableBytes === 0) {
+          throw new Error('no bytes available');
+        }
+        workingBytes.set(workingData.subarray(position, position + availableBytes));
+        workingWord = new DataView(workingBytes.buffer).getUint32(0); // track the amount of workingData that has been processed
+
+        workingBitsAvailable = availableBytes * 8;
+        workingBytesAvailable -= availableBytes;
+      }; // (count:int):void
+
+      this.skipBits = function (count) {
+        var skipBytes; // :int
+
+        if (workingBitsAvailable > count) {
+          workingWord <<= count;
+          workingBitsAvailable -= count;
+        } else {
+          count -= workingBitsAvailable;
+          skipBytes = Math.floor(count / 8);
+          count -= skipBytes * 8;
+          workingBytesAvailable -= skipBytes;
+          this.loadWord();
+          workingWord <<= count;
+          workingBitsAvailable -= count;
+        }
+      }; // (size:int):uint
+
+      this.readBits = function (size) {
+        var bits = Math.min(workingBitsAvailable, size),
+          // :uint
+          valu = workingWord >>> 32 - bits; // :uint
+        // if size > 31, handle error
+
+        workingBitsAvailable -= bits;
+        if (workingBitsAvailable > 0) {
+          workingWord <<= bits;
+        } else if (workingBytesAvailable > 0) {
+          this.loadWord();
+        }
+        bits = size - bits;
+        if (bits > 0) {
+          return valu << bits | this.readBits(bits);
+        }
+        return valu;
+      }; // ():uint
+
+      this.skipLeadingZeros = function () {
+        var leadingZeroCount; // :uint
+
+        for (leadingZeroCount = 0; leadingZeroCount < workingBitsAvailable; ++leadingZeroCount) {
+          if ((workingWord & 0x80000000 >>> leadingZeroCount) !== 0) {
+            // the first bit of working word is 1
+            workingWord <<= leadingZeroCount;
+            workingBitsAvailable -= leadingZeroCount;
+            return leadingZeroCount;
+          }
+        } // we exhausted workingWord and still have not found a 1
+
+        this.loadWord();
+        return leadingZeroCount + this.skipLeadingZeros();
+      }; // ():void
+
+      this.skipUnsignedExpGolomb = function () {
+        this.skipBits(1 + this.skipLeadingZeros());
+      }; // ():void
+
+      this.skipExpGolomb = function () {
+        this.skipBits(1 + this.skipLeadingZeros());
+      }; // ():uint
+
+      this.readUnsignedExpGolomb = function () {
+        var clz = this.skipLeadingZeros(); // :uint
+
+        return this.readBits(clz + 1) - 1;
+      }; // ():int
+
+      this.readExpGolomb = function () {
+        var valu = this.readUnsignedExpGolomb(); // :int
+
+        if (0x01 & valu) {
+          // the number is odd if the low order bit is set
+          return 1 + valu >>> 1; // add 1 to make it even, and divide by 2
+        }
+
+        return -1 * (valu >>> 1); // divide by two then make it negative
+      }; // Some convenience functions
+      // :Boolean
+
+      this.readBoolean = function () {
+        return this.readBits(1) === 1;
+      }; // ():int
+
+      this.readUnsignedByte = function () {
+        return this.readBits(8);
+      };
+      this.loadWord();
+    };
+    var expGolomb = ExpGolomb$1;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var Stream$2 = stream;
+    var ExpGolomb = expGolomb;
+    var H264Stream$1, NalByteStream;
+    var PROFILES_WITH_OPTIONAL_SPS_DATA;
+    /**
+     * Accepts a NAL unit byte stream and unpacks the embedded NAL units.
+     */
+
+    NalByteStream = function () {
+      var syncPoint = 0,
+        i,
+        buffer;
+      NalByteStream.prototype.init.call(this);
+      /*
+       * Scans a byte stream and triggers a data event with the NAL units found.
+       * @param {Object} data Event received from H264Stream
+       * @param {Uint8Array} data.data The h264 byte stream to be scanned
+       *
+       * @see H264Stream.push
+       */
+
+      this.push = function (data) {
+        var swapBuffer;
+        if (!buffer) {
+          buffer = data.data;
+        } else {
+          swapBuffer = new Uint8Array(buffer.byteLength + data.data.byteLength);
+          swapBuffer.set(buffer);
+          swapBuffer.set(data.data, buffer.byteLength);
+          buffer = swapBuffer;
+        }
+        var len = buffer.byteLength; // Rec. ITU-T H.264, Annex B
+        // scan for NAL unit boundaries
+        // a match looks like this:
+        // 0 0 1 .. NAL .. 0 0 1
+        // ^ sync point        ^ i
+        // or this:
+        // 0 0 1 .. NAL .. 0 0 0
+        // ^ sync point        ^ i
+        // advance the sync point to a NAL start, if necessary
+
+        for (; syncPoint < len - 3; syncPoint++) {
+          if (buffer[syncPoint + 2] === 1) {
+            // the sync point is properly aligned
+            i = syncPoint + 5;
+            break;
+          }
+        }
+        while (i < len) {
+          // look at the current byte to determine if we've hit the end of
+          // a NAL unit boundary
+          switch (buffer[i]) {
+            case 0:
+              // skip past non-sync sequences
+              if (buffer[i - 1] !== 0) {
+                i += 2;
+                break;
+              } else if (buffer[i - 2] !== 0) {
+                i++;
+                break;
+              } // deliver the NAL unit if it isn't empty
+
+              if (syncPoint + 3 !== i - 2) {
+                this.trigger('data', buffer.subarray(syncPoint + 3, i - 2));
+              } // drop trailing zeroes
+
+              do {
+                i++;
+              } while (buffer[i] !== 1 && i < len);
+              syncPoint = i - 2;
+              i += 3;
+              break;
+            case 1:
+              // skip past non-sync sequences
+              if (buffer[i - 1] !== 0 || buffer[i - 2] !== 0) {
+                i += 3;
+                break;
+              } // deliver the NAL unit
+
+              this.trigger('data', buffer.subarray(syncPoint + 3, i - 2));
+              syncPoint = i - 2;
+              i += 3;
+              break;
+            default:
+              // the current byte isn't a one or zero, so it cannot be part
+              // of a sync sequence
+              i += 3;
+              break;
+          }
+        } // filter out the NAL units that were delivered
+
+        buffer = buffer.subarray(syncPoint);
+        i -= syncPoint;
+        syncPoint = 0;
+      };
+      this.reset = function () {
+        buffer = null;
+        syncPoint = 0;
+        this.trigger('reset');
+      };
+      this.flush = function () {
+        // deliver the last buffered NAL unit
+        if (buffer && buffer.byteLength > 3) {
+          this.trigger('data', buffer.subarray(syncPoint + 3));
+        } // reset the stream state
+
+        buffer = null;
+        syncPoint = 0;
+        this.trigger('done');
+      };
+      this.endTimeline = function () {
+        this.flush();
+        this.trigger('endedtimeline');
+      };
+    };
+    NalByteStream.prototype = new Stream$2(); // values of profile_idc that indicate additional fields are included in the SPS
+    // see Recommendation ITU-T H.264 (4/2013),
+    // 7.3.2.1.1 Sequence parameter set data syntax
+
+    PROFILES_WITH_OPTIONAL_SPS_DATA = {
+      100: true,
+      110: true,
+      122: true,
+      244: true,
+      44: true,
+      83: true,
+      86: true,
+      118: true,
+      128: true,
+      // TODO: the three profiles below don't
+      // appear to have sps data in the specificiation anymore?
+      138: true,
+      139: true,
+      134: true
+    };
+    /**
+     * Accepts input from a ElementaryStream and produces H.264 NAL unit data
+     * events.
+     */
+
+    H264Stream$1 = function () {
+      var nalByteStream = new NalByteStream(),
+        self,
+        trackId,
+        currentPts,
+        currentDts,
+        discardEmulationPreventionBytes,
+        readSequenceParameterSet,
+        skipScalingList;
+      H264Stream$1.prototype.init.call(this);
+      self = this;
+      /*
+       * Pushes a packet from a stream onto the NalByteStream
+       *
+       * @param {Object} packet - A packet received from a stream
+       * @param {Uint8Array} packet.data - The raw bytes of the packet
+       * @param {Number} packet.dts - Decode timestamp of the packet
+       * @param {Number} packet.pts - Presentation timestamp of the packet
+       * @param {Number} packet.trackId - The id of the h264 track this packet came from
+       * @param {('video'|'audio')} packet.type - The type of packet
+       *
+       */
+
+      this.push = function (packet) {
+        if (packet.type !== 'video') {
+          return;
+        }
+        trackId = packet.trackId;
+        currentPts = packet.pts;
+        currentDts = packet.dts;
+        nalByteStream.push(packet);
+      };
+      /*
+       * Identify NAL unit types and pass on the NALU, trackId, presentation and decode timestamps
+       * for the NALUs to the next stream component.
+       * Also, preprocess caption and sequence parameter NALUs.
+       *
+       * @param {Uint8Array} data - A NAL unit identified by `NalByteStream.push`
+       * @see NalByteStream.push
+       */
+
+      nalByteStream.on('data', function (data) {
+        var event = {
+          trackId: trackId,
+          pts: currentPts,
+          dts: currentDts,
+          data: data,
+          nalUnitTypeCode: data[0] & 0x1f
+        };
+        switch (event.nalUnitTypeCode) {
+          case 0x05:
+            event.nalUnitType = 'slice_layer_without_partitioning_rbsp_idr';
+            break;
+          case 0x06:
+            event.nalUnitType = 'sei_rbsp';
+            event.escapedRBSP = discardEmulationPreventionBytes(data.subarray(1));
+            break;
+          case 0x07:
+            event.nalUnitType = 'seq_parameter_set_rbsp';
+            event.escapedRBSP = discardEmulationPreventionBytes(data.subarray(1));
+            event.config = readSequenceParameterSet(event.escapedRBSP);
+            break;
+          case 0x08:
+            event.nalUnitType = 'pic_parameter_set_rbsp';
+            break;
+          case 0x09:
+            event.nalUnitType = 'access_unit_delimiter_rbsp';
+            break;
+        } // This triggers data on the H264Stream
+
+        self.trigger('data', event);
+      });
+      nalByteStream.on('done', function () {
+        self.trigger('done');
+      });
+      nalByteStream.on('partialdone', function () {
+        self.trigger('partialdone');
+      });
+      nalByteStream.on('reset', function () {
+        self.trigger('reset');
+      });
+      nalByteStream.on('endedtimeline', function () {
+        self.trigger('endedtimeline');
+      });
+      this.flush = function () {
+        nalByteStream.flush();
+      };
+      this.partialFlush = function () {
+        nalByteStream.partialFlush();
+      };
+      this.reset = function () {
+        nalByteStream.reset();
+      };
+      this.endTimeline = function () {
+        nalByteStream.endTimeline();
+      };
+      /**
+       * Advance the ExpGolomb decoder past a scaling list. The scaling
+       * list is optionally transmitted as part of a sequence parameter
+       * set and is not relevant to transmuxing.
+       * @param count {number} the number of entries in this scaling list
+       * @param expGolombDecoder {object} an ExpGolomb pointed to the
+       * start of a scaling list
+       * @see Recommendation ITU-T H.264, Section 7.3.2.1.1.1
+       */
+
+      skipScalingList = function (count, expGolombDecoder) {
+        var lastScale = 8,
+          nextScale = 8,
+          j,
+          deltaScale;
+        for (j = 0; j < count; j++) {
+          if (nextScale !== 0) {
+            deltaScale = expGolombDecoder.readExpGolomb();
+            nextScale = (lastScale + deltaScale + 256) % 256;
+          }
+          lastScale = nextScale === 0 ? lastScale : nextScale;
+        }
+      };
+      /**
+       * Expunge any "Emulation Prevention" bytes from a "Raw Byte
+       * Sequence Payload"
+       * @param data {Uint8Array} the bytes of a RBSP from a NAL
+       * unit
+       * @return {Uint8Array} the RBSP without any Emulation
+       * Prevention Bytes
+       */
+
+      discardEmulationPreventionBytes = function (data) {
+        var length = data.byteLength,
+          emulationPreventionBytesPositions = [],
+          i = 1,
+          newLength,
+          newData; // Find all `Emulation Prevention Bytes`
+
+        while (i < length - 2) {
+          if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0x03) {
+            emulationPreventionBytesPositions.push(i + 2);
+            i += 2;
+          } else {
+            i++;
+          }
+        } // If no Emulation Prevention Bytes were found just return the original
+        // array
+
+        if (emulationPreventionBytesPositions.length === 0) {
+          return data;
+        } // Create a new array to hold the NAL unit data
+
+        newLength = length - emulationPreventionBytesPositions.length;
+        newData = new Uint8Array(newLength);
+        var sourceIndex = 0;
+        for (i = 0; i < newLength; sourceIndex++, i++) {
+          if (sourceIndex === emulationPreventionBytesPositions[0]) {
+            // Skip this byte
+            sourceIndex++; // Remove this position index
+
+            emulationPreventionBytesPositions.shift();
+          }
+          newData[i] = data[sourceIndex];
+        }
+        return newData;
+      };
+      /**
+       * Read a sequence parameter set and return some interesting video
+       * properties. A sequence parameter set is the H264 metadata that
+       * describes the properties of upcoming video frames.
+       * @param data {Uint8Array} the bytes of a sequence parameter set
+       * @return {object} an object with configuration parsed from the
+       * sequence parameter set, including the dimensions of the
+       * associated video frames.
+       */
+
+      readSequenceParameterSet = function (data) {
+        var frameCropLeftOffset = 0,
+          frameCropRightOffset = 0,
+          frameCropTopOffset = 0,
+          frameCropBottomOffset = 0,
+          expGolombDecoder,
+          profileIdc,
+          levelIdc,
+          profileCompatibility,
+          chromaFormatIdc,
+          picOrderCntType,
+          numRefFramesInPicOrderCntCycle,
+          picWidthInMbsMinus1,
+          picHeightInMapUnitsMinus1,
+          frameMbsOnlyFlag,
+          scalingListCount,
+          sarRatio = [1, 1],
+          aspectRatioIdc,
+          i;
+        expGolombDecoder = new ExpGolomb(data);
+        profileIdc = expGolombDecoder.readUnsignedByte(); // profile_idc
+
+        profileCompatibility = expGolombDecoder.readUnsignedByte(); // constraint_set[0-5]_flag
+
+        levelIdc = expGolombDecoder.readUnsignedByte(); // level_idc u(8)
+
+        expGolombDecoder.skipUnsignedExpGolomb(); // seq_parameter_set_id
+        // some profiles have more optional data we don't need
+
+        if (PROFILES_WITH_OPTIONAL_SPS_DATA[profileIdc]) {
+          chromaFormatIdc = expGolombDecoder.readUnsignedExpGolomb();
+          if (chromaFormatIdc === 3) {
+            expGolombDecoder.skipBits(1); // separate_colour_plane_flag
+          }
+
+          expGolombDecoder.skipUnsignedExpGolomb(); // bit_depth_luma_minus8
+
+          expGolombDecoder.skipUnsignedExpGolomb(); // bit_depth_chroma_minus8
+
+          expGolombDecoder.skipBits(1); // qpprime_y_zero_transform_bypass_flag
+
+          if (expGolombDecoder.readBoolean()) {
+            // seq_scaling_matrix_present_flag
+            scalingListCount = chromaFormatIdc !== 3 ? 8 : 12;
+            for (i = 0; i < scalingListCount; i++) {
+              if (expGolombDecoder.readBoolean()) {
+                // seq_scaling_list_present_flag[ i ]
+                if (i < 6) {
+                  skipScalingList(16, expGolombDecoder);
+                } else {
+                  skipScalingList(64, expGolombDecoder);
+                }
+              }
+            }
+          }
+        }
+        expGolombDecoder.skipUnsignedExpGolomb(); // log2_max_frame_num_minus4
+
+        picOrderCntType = expGolombDecoder.readUnsignedExpGolomb();
+        if (picOrderCntType === 0) {
+          expGolombDecoder.readUnsignedExpGolomb(); // log2_max_pic_order_cnt_lsb_minus4
+        } else if (picOrderCntType === 1) {
+          expGolombDecoder.skipBits(1); // delta_pic_order_always_zero_flag
+
+          expGolombDecoder.skipExpGolomb(); // offset_for_non_ref_pic
+
+          expGolombDecoder.skipExpGolomb(); // offset_for_top_to_bottom_field
+
+          numRefFramesInPicOrderCntCycle = expGolombDecoder.readUnsignedExpGolomb();
+          for (i = 0; i < numRefFramesInPicOrderCntCycle; i++) {
+            expGolombDecoder.skipExpGolomb(); // offset_for_ref_frame[ i ]
+          }
+        }
+
+        expGolombDecoder.skipUnsignedExpGolomb(); // max_num_ref_frames
+
+        expGolombDecoder.skipBits(1); // gaps_in_frame_num_value_allowed_flag
+
+        picWidthInMbsMinus1 = expGolombDecoder.readUnsignedExpGolomb();
+        picHeightInMapUnitsMinus1 = expGolombDecoder.readUnsignedExpGolomb();
+        frameMbsOnlyFlag = expGolombDecoder.readBits(1);
+        if (frameMbsOnlyFlag === 0) {
+          expGolombDecoder.skipBits(1); // mb_adaptive_frame_field_flag
+        }
+
+        expGolombDecoder.skipBits(1); // direct_8x8_inference_flag
+
+        if (expGolombDecoder.readBoolean()) {
+          // frame_cropping_flag
+          frameCropLeftOffset = expGolombDecoder.readUnsignedExpGolomb();
+          frameCropRightOffset = expGolombDecoder.readUnsignedExpGolomb();
+          frameCropTopOffset = expGolombDecoder.readUnsignedExpGolomb();
+          frameCropBottomOffset = expGolombDecoder.readUnsignedExpGolomb();
+        }
+        if (expGolombDecoder.readBoolean()) {
+          // vui_parameters_present_flag
+          if (expGolombDecoder.readBoolean()) {
+            // aspect_ratio_info_present_flag
+            aspectRatioIdc = expGolombDecoder.readUnsignedByte();
+            switch (aspectRatioIdc) {
+              case 1:
+                sarRatio = [1, 1];
+                break;
+              case 2:
+                sarRatio = [12, 11];
+                break;
+              case 3:
+                sarRatio = [10, 11];
+                break;
+              case 4:
+                sarRatio = [16, 11];
+                break;
+              case 5:
+                sarRatio = [40, 33];
+                break;
+              case 6:
+                sarRatio = [24, 11];
+                break;
+              case 7:
+                sarRatio = [20, 11];
+                break;
+              case 8:
+                sarRatio = [32, 11];
+                break;
+              case 9:
+                sarRatio = [80, 33];
+                break;
+              case 10:
+                sarRatio = [18, 11];
+                break;
+              case 11:
+                sarRatio = [15, 11];
+                break;
+              case 12:
+                sarRatio = [64, 33];
+                break;
+              case 13:
+                sarRatio = [160, 99];
+                break;
+              case 14:
+                sarRatio = [4, 3];
+                break;
+              case 15:
+                sarRatio = [3, 2];
+                break;
+              case 16:
+                sarRatio = [2, 1];
+                break;
+              case 255:
+                {
+                  sarRatio = [expGolombDecoder.readUnsignedByte() << 8 | expGolombDecoder.readUnsignedByte(), expGolombDecoder.readUnsignedByte() << 8 | expGolombDecoder.readUnsignedByte()];
+                  break;
+                }
+            }
+            if (sarRatio) {
+              sarRatio[0] / sarRatio[1];
+            }
+          }
+        }
+        return {
+          profileIdc: profileIdc,
+          levelIdc: levelIdc,
+          profileCompatibility: profileCompatibility,
+          width: (picWidthInMbsMinus1 + 1) * 16 - frameCropLeftOffset * 2 - frameCropRightOffset * 2,
+          height: (2 - frameMbsOnlyFlag) * (picHeightInMapUnitsMinus1 + 1) * 16 - frameCropTopOffset * 2 - frameCropBottomOffset * 2,
+          // sar is sample aspect ratio
+          sarRatio: sarRatio
+        };
+      };
+    };
+    H264Stream$1.prototype = new Stream$2();
+    var h264 = {
+      H264Stream: H264Stream$1,
+      NalByteStream: NalByteStream
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Utilities to detect basic properties and metadata about Aac data.
+     */
+
+    var ADTS_SAMPLING_FREQUENCIES = [96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350];
+    var parseId3TagSize = function (header, byteIndex) {
+      var returnSize = header[byteIndex + 6] << 21 | header[byteIndex + 7] << 14 | header[byteIndex + 8] << 7 | header[byteIndex + 9],
+        flags = header[byteIndex + 5],
+        footerPresent = (flags & 16) >> 4; // if we get a negative returnSize clamp it to 0
+
+      returnSize = returnSize >= 0 ? returnSize : 0;
+      if (footerPresent) {
+        return returnSize + 20;
+      }
+      return returnSize + 10;
+    };
+    var getId3Offset = function (data, offset) {
+      if (data.length - offset < 10 || data[offset] !== 'I'.charCodeAt(0) || data[offset + 1] !== 'D'.charCodeAt(0) || data[offset + 2] !== '3'.charCodeAt(0)) {
+        return offset;
+      }
+      offset += parseId3TagSize(data, offset);
+      return getId3Offset(data, offset);
+    }; // TODO: use vhs-utils
+
+    var isLikelyAacData$1 = function (data) {
+      var offset = getId3Offset(data, 0);
+      return data.length >= offset + 2 && (data[offset] & 0xFF) === 0xFF && (data[offset + 1] & 0xF0) === 0xF0 &&
+      // verify that the 2 layer bits are 0, aka this
+      // is not mp3 data but aac data.
+      (data[offset + 1] & 0x16) === 0x10;
+    };
+    var parseSyncSafeInteger = function (data) {
+      return data[0] << 21 | data[1] << 14 | data[2] << 7 | data[3];
+    }; // return a percent-encoded representation of the specified byte range
+    // @see http://en.wikipedia.org/wiki/Percent-encoding
+
+    var percentEncode = function (bytes, start, end) {
+      var i,
+        result = '';
+      for (i = start; i < end; i++) {
+        result += '%' + ('00' + bytes[i].toString(16)).slice(-2);
+      }
+      return result;
+    }; // return the string representation of the specified byte range,
+    // interpreted as ISO-8859-1.
+
+    var parseIso88591 = function (bytes, start, end) {
+      return unescape(percentEncode(bytes, start, end)); // jshint ignore:line
+    };
+
+    var parseAdtsSize = function (header, byteIndex) {
+      var lowThree = (header[byteIndex + 5] & 0xE0) >> 5,
+        middle = header[byteIndex + 4] << 3,
+        highTwo = header[byteIndex + 3] & 0x3 << 11;
+      return highTwo | middle | lowThree;
+    };
+    var parseType$4 = function (header, byteIndex) {
+      if (header[byteIndex] === 'I'.charCodeAt(0) && header[byteIndex + 1] === 'D'.charCodeAt(0) && header[byteIndex + 2] === '3'.charCodeAt(0)) {
+        return 'timed-metadata';
+      } else if (header[byteIndex] & 0xff === 0xff && (header[byteIndex + 1] & 0xf0) === 0xf0) {
+        return 'audio';
+      }
+      return null;
+    };
+    var parseSampleRate = function (packet) {
+      var i = 0;
+      while (i + 5 < packet.length) {
+        if (packet[i] !== 0xFF || (packet[i + 1] & 0xF6) !== 0xF0) {
+          // If a valid header was not found,  jump one forward and attempt to
+          // find a valid ADTS header starting at the next byte
+          i++;
+          continue;
+        }
+        return ADTS_SAMPLING_FREQUENCIES[(packet[i + 2] & 0x3c) >>> 2];
+      }
+      return null;
+    };
+    var parseAacTimestamp = function (packet) {
+      var frameStart, frameSize, frame, frameHeader; // find the start of the first frame and the end of the tag
+
+      frameStart = 10;
+      if (packet[5] & 0x40) {
+        // advance the frame start past the extended header
+        frameStart += 4; // header size field
+
+        frameStart += parseSyncSafeInteger(packet.subarray(10, 14));
+      } // parse one or more ID3 frames
+      // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+      do {
+        // determine the number of bytes in this frame
+        frameSize = parseSyncSafeInteger(packet.subarray(frameStart + 4, frameStart + 8));
+        if (frameSize < 1) {
+          return null;
+        }
+        frameHeader = String.fromCharCode(packet[frameStart], packet[frameStart + 1], packet[frameStart + 2], packet[frameStart + 3]);
+        if (frameHeader === 'PRIV') {
+          frame = packet.subarray(frameStart + 10, frameStart + frameSize + 10);
+          for (var i = 0; i < frame.byteLength; i++) {
+            if (frame[i] === 0) {
+              var owner = parseIso88591(frame, 0, i);
+              if (owner === 'com.apple.streaming.transportStreamTimestamp') {
+                var d = frame.subarray(i + 1);
+                var size = (d[3] & 0x01) << 30 | d[4] << 22 | d[5] << 14 | d[6] << 6 | d[7] >>> 2;
+                size *= 4;
+                size += d[7] & 0x03;
+                return size;
+              }
+              break;
+            }
+          }
+        }
+        frameStart += 10; // advance past the frame header
+
+        frameStart += frameSize; // advance past the frame body
+      } while (frameStart < packet.byteLength);
+      return null;
+    };
+    var utils = {
+      isLikelyAacData: isLikelyAacData$1,
+      parseId3TagSize: parseId3TagSize,
+      parseAdtsSize: parseAdtsSize,
+      parseType: parseType$4,
+      parseSampleRate: parseSampleRate,
+      parseAacTimestamp: parseAacTimestamp
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * A stream-based aac to mp4 converter. This utility can be used to
+     * deliver mp4s to a SourceBuffer on platforms that support native
+     * Media Source Extensions.
+     */
+
+    var Stream$1 = stream;
+    var aacUtils = utils; // Constants
+
+    var AacStream$1;
+    /**
+     * Splits an incoming stream of binary data into ADTS and ID3 Frames.
+     */
+
+    AacStream$1 = function () {
+      var everything = new Uint8Array(),
+        timeStamp = 0;
+      AacStream$1.prototype.init.call(this);
+      this.setTimestamp = function (timestamp) {
+        timeStamp = timestamp;
+      };
+      this.push = function (bytes) {
+        var frameSize = 0,
+          byteIndex = 0,
+          bytesLeft,
+          chunk,
+          packet,
+          tempLength; // If there are bytes remaining from the last segment, prepend them to the
+        // bytes that were pushed in
+
+        if (everything.length) {
+          tempLength = everything.length;
+          everything = new Uint8Array(bytes.byteLength + tempLength);
+          everything.set(everything.subarray(0, tempLength));
+          everything.set(bytes, tempLength);
+        } else {
+          everything = bytes;
+        }
+        while (everything.length - byteIndex >= 3) {
+          if (everything[byteIndex] === 'I'.charCodeAt(0) && everything[byteIndex + 1] === 'D'.charCodeAt(0) && everything[byteIndex + 2] === '3'.charCodeAt(0)) {
+            // Exit early because we don't have enough to parse
+            // the ID3 tag header
+            if (everything.length - byteIndex < 10) {
+              break;
+            } // check framesize
+
+            frameSize = aacUtils.parseId3TagSize(everything, byteIndex); // Exit early if we don't have enough in the buffer
+            // to emit a full packet
+            // Add to byteIndex to support multiple ID3 tags in sequence
+
+            if (byteIndex + frameSize > everything.length) {
+              break;
+            }
+            chunk = {
+              type: 'timed-metadata',
+              data: everything.subarray(byteIndex, byteIndex + frameSize)
+            };
+            this.trigger('data', chunk);
+            byteIndex += frameSize;
+            continue;
+          } else if ((everything[byteIndex] & 0xff) === 0xff && (everything[byteIndex + 1] & 0xf0) === 0xf0) {
+            // Exit early because we don't have enough to parse
+            // the ADTS frame header
+            if (everything.length - byteIndex < 7) {
+              break;
+            }
+            frameSize = aacUtils.parseAdtsSize(everything, byteIndex); // Exit early if we don't have enough in the buffer
+            // to emit a full packet
+
+            if (byteIndex + frameSize > everything.length) {
+              break;
+            }
+            packet = {
+              type: 'audio',
+              data: everything.subarray(byteIndex, byteIndex + frameSize),
+              pts: timeStamp,
+              dts: timeStamp
+            };
+            this.trigger('data', packet);
+            byteIndex += frameSize;
+            continue;
+          }
+          byteIndex++;
+        }
+        bytesLeft = everything.length - byteIndex;
+        if (bytesLeft > 0) {
+          everything = everything.subarray(byteIndex);
+        } else {
+          everything = new Uint8Array();
+        }
+      };
+      this.reset = function () {
+        everything = new Uint8Array();
+        this.trigger('reset');
+      };
+      this.endTimeline = function () {
+        everything = new Uint8Array();
+        this.trigger('endedtimeline');
+      };
+    };
+    AacStream$1.prototype = new Stream$1();
+    var aac = AacStream$1;
+    var AUDIO_PROPERTIES$1 = ['audioobjecttype', 'channelcount', 'samplerate', 'samplingfrequencyindex', 'samplesize'];
+    var audioProperties = AUDIO_PROPERTIES$1;
+    var VIDEO_PROPERTIES$1 = ['width', 'height', 'profileIdc', 'levelIdc', 'profileCompatibility', 'sarRatio'];
+    var videoProperties = VIDEO_PROPERTIES$1;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * A stream-based mp2t to mp4 converter. This utility can be used to
+     * deliver mp4s to a SourceBuffer on platforms that support native
+     * Media Source Extensions.
+     */
+
+    var Stream = stream;
+    var mp4 = mp4Generator;
+    var frameUtils = frameUtils$1;
+    var audioFrameUtils = audioFrameUtils$1;
+    var trackDecodeInfo = trackDecodeInfo$1;
+    var m2ts = m2ts_1;
+    var clock = clock$2;
+    var AdtsStream = adts;
+    var H264Stream = h264.H264Stream;
+    var AacStream = aac;
+    var isLikelyAacData = utils.isLikelyAacData;
+    var ONE_SECOND_IN_TS$1 = clock$2.ONE_SECOND_IN_TS;
+    var AUDIO_PROPERTIES = audioProperties;
+    var VIDEO_PROPERTIES = videoProperties; // object types
+
+    var VideoSegmentStream, AudioSegmentStream, Transmuxer, CoalesceStream;
+    var retriggerForStream = function (key, event) {
+      event.stream = key;
+      this.trigger('log', event);
+    };
+    var addPipelineLogRetriggers = function (transmuxer, pipeline) {
+      var keys = Object.keys(pipeline);
+      for (var i = 0; i < keys.length; i++) {
+        var key = keys[i]; // skip non-stream keys and headOfPipeline
+        // which is just a duplicate
+
+        if (key === 'headOfPipeline' || !pipeline[key].on) {
+          continue;
+        }
+        pipeline[key].on('log', retriggerForStream.bind(transmuxer, key));
+      }
+    };
+    /**
+     * Compare two arrays (even typed) for same-ness
+     */
+
+    var arrayEquals = function (a, b) {
+      var i;
+      if (a.length !== b.length) {
+        return false;
+      } // compare the value of each element in the array
+
+      for (i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) {
+          return false;
+        }
+      }
+      return true;
+    };
+    var generateSegmentTimingInfo = function (baseMediaDecodeTime, startDts, startPts, endDts, endPts, prependedContentDuration) {
+      var ptsOffsetFromDts = startPts - startDts,
+        decodeDuration = endDts - startDts,
+        presentationDuration = endPts - startPts; // The PTS and DTS values are based on the actual stream times from the segment,
+      // however, the player time values will reflect a start from the baseMediaDecodeTime.
+      // In order to provide relevant values for the player times, base timing info on the
+      // baseMediaDecodeTime and the DTS and PTS durations of the segment.
+
+      return {
+        start: {
+          dts: baseMediaDecodeTime,
+          pts: baseMediaDecodeTime + ptsOffsetFromDts
+        },
+        end: {
+          dts: baseMediaDecodeTime + decodeDuration,
+          pts: baseMediaDecodeTime + presentationDuration
+        },
+        prependedContentDuration: prependedContentDuration,
+        baseMediaDecodeTime: baseMediaDecodeTime
+      };
+    };
+    /**
+     * Constructs a single-track, ISO BMFF media segment from AAC data
+     * events. The output of this stream can be fed to a SourceBuffer
+     * configured with a suitable initialization segment.
+     * @param track {object} track metadata configuration
+     * @param options {object} transmuxer options object
+     * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+     *        in the source; false to adjust the first segment to start at 0.
+     */
+
+    AudioSegmentStream = function (track, options) {
+      var adtsFrames = [],
+        sequenceNumber,
+        earliestAllowedDts = 0,
+        audioAppendStartTs = 0,
+        videoBaseMediaDecodeTime = Infinity;
+      options = options || {};
+      sequenceNumber = options.firstSequenceNumber || 0;
+      AudioSegmentStream.prototype.init.call(this);
+      this.push = function (data) {
+        trackDecodeInfo.collectDtsInfo(track, data);
+        if (track) {
+          AUDIO_PROPERTIES.forEach(function (prop) {
+            track[prop] = data[prop];
+          });
+        } // buffer audio data until end() is called
+
+        adtsFrames.push(data);
+      };
+      this.setEarliestDts = function (earliestDts) {
+        earliestAllowedDts = earliestDts;
+      };
+      this.setVideoBaseMediaDecodeTime = function (baseMediaDecodeTime) {
+        videoBaseMediaDecodeTime = baseMediaDecodeTime;
+      };
+      this.setAudioAppendStart = function (timestamp) {
+        audioAppendStartTs = timestamp;
+      };
+      this.flush = function () {
+        var frames, moof, mdat, boxes, frameDuration, segmentDuration, videoClockCyclesOfSilencePrefixed; // return early if no audio data has been observed
+
+        if (adtsFrames.length === 0) {
+          this.trigger('done', 'AudioSegmentStream');
+          return;
+        }
+        frames = audioFrameUtils.trimAdtsFramesByEarliestDts(adtsFrames, track, earliestAllowedDts);
+        track.baseMediaDecodeTime = trackDecodeInfo.calculateTrackBaseMediaDecodeTime(track, options.keepOriginalTimestamps); // amount of audio filled but the value is in video clock rather than audio clock
+
+        videoClockCyclesOfSilencePrefixed = audioFrameUtils.prefixWithSilence(track, frames, audioAppendStartTs, videoBaseMediaDecodeTime); // we have to build the index from byte locations to
+        // samples (that is, adts frames) in the audio data
+
+        track.samples = audioFrameUtils.generateSampleTable(frames); // concatenate the audio data to constuct the mdat
+
+        mdat = mp4.mdat(audioFrameUtils.concatenateFrameData(frames));
+        adtsFrames = [];
+        moof = mp4.moof(sequenceNumber, [track]);
+        boxes = new Uint8Array(moof.byteLength + mdat.byteLength); // bump the sequence number for next time
+
+        sequenceNumber++;
+        boxes.set(moof);
+        boxes.set(mdat, moof.byteLength);
+        trackDecodeInfo.clearDtsInfo(track);
+        frameDuration = Math.ceil(ONE_SECOND_IN_TS$1 * 1024 / track.samplerate); // TODO this check was added to maintain backwards compatibility (particularly with
+        // tests) on adding the timingInfo event. However, it seems unlikely that there's a
+        // valid use-case where an init segment/data should be triggered without associated
+        // frames. Leaving for now, but should be looked into.
+
+        if (frames.length) {
+          segmentDuration = frames.length * frameDuration;
+          this.trigger('segmentTimingInfo', generateSegmentTimingInfo(
+          // The audio track's baseMediaDecodeTime is in audio clock cycles, but the
+          // frame info is in video clock cycles. Convert to match expectation of
+          // listeners (that all timestamps will be based on video clock cycles).
+          clock.audioTsToVideoTs(track.baseMediaDecodeTime, track.samplerate),
+          // frame times are already in video clock, as is segment duration
+          frames[0].dts, frames[0].pts, frames[0].dts + segmentDuration, frames[0].pts + segmentDuration, videoClockCyclesOfSilencePrefixed || 0));
+          this.trigger('timingInfo', {
+            start: frames[0].pts,
+            end: frames[0].pts + segmentDuration
+          });
+        }
+        this.trigger('data', {
+          track: track,
+          boxes: boxes
+        });
+        this.trigger('done', 'AudioSegmentStream');
+      };
+      this.reset = function () {
+        trackDecodeInfo.clearDtsInfo(track);
+        adtsFrames = [];
+        this.trigger('reset');
+      };
+    };
+    AudioSegmentStream.prototype = new Stream();
+    /**
+     * Constructs a single-track, ISO BMFF media segment from H264 data
+     * events. The output of this stream can be fed to a SourceBuffer
+     * configured with a suitable initialization segment.
+     * @param track {object} track metadata configuration
+     * @param options {object} transmuxer options object
+     * @param options.alignGopsAtEnd {boolean} If true, start from the end of the
+     *        gopsToAlignWith list when attempting to align gop pts
+     * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+     *        in the source; false to adjust the first segment to start at 0.
+     */
+
+    VideoSegmentStream = function (track, options) {
+      var sequenceNumber,
+        nalUnits = [],
+        gopsToAlignWith = [],
+        config,
+        pps;
+      options = options || {};
+      sequenceNumber = options.firstSequenceNumber || 0;
+      VideoSegmentStream.prototype.init.call(this);
+      delete track.minPTS;
+      this.gopCache_ = [];
+      /**
+        * Constructs a ISO BMFF segment given H264 nalUnits
+        * @param {Object} nalUnit A data event representing a nalUnit
+        * @param {String} nalUnit.nalUnitType
+        * @param {Object} nalUnit.config Properties for a mp4 track
+        * @param {Uint8Array} nalUnit.data The nalUnit bytes
+        * @see lib/codecs/h264.js
+       **/
+
+      this.push = function (nalUnit) {
+        trackDecodeInfo.collectDtsInfo(track, nalUnit); // record the track config
+
+        if (nalUnit.nalUnitType === 'seq_parameter_set_rbsp' && !config) {
+          config = nalUnit.config;
+          track.sps = [nalUnit.data];
+          VIDEO_PROPERTIES.forEach(function (prop) {
+            track[prop] = config[prop];
+          }, this);
+        }
+        if (nalUnit.nalUnitType === 'pic_parameter_set_rbsp' && !pps) {
+          pps = nalUnit.data;
+          track.pps = [nalUnit.data];
+        } // buffer video until flush() is called
+
+        nalUnits.push(nalUnit);
+      };
+      /**
+        * Pass constructed ISO BMFF track and boxes on to the
+        * next stream in the pipeline
+       **/
+
+      this.flush = function () {
+        var frames,
+          gopForFusion,
+          gops,
+          moof,
+          mdat,
+          boxes,
+          prependedContentDuration = 0,
+          firstGop,
+          lastGop; // Throw away nalUnits at the start of the byte stream until
+        // we find the first AUD
+
+        while (nalUnits.length) {
+          if (nalUnits[0].nalUnitType === 'access_unit_delimiter_rbsp') {
+            break;
+          }
+          nalUnits.shift();
+        } // Return early if no video data has been observed
+
+        if (nalUnits.length === 0) {
+          this.resetStream_();
+          this.trigger('done', 'VideoSegmentStream');
+          return;
+        } // Organize the raw nal-units into arrays that represent
+        // higher-level constructs such as frames and gops
+        // (group-of-pictures)
+
+        frames = frameUtils.groupNalsIntoFrames(nalUnits);
+        gops = frameUtils.groupFramesIntoGops(frames); // If the first frame of this fragment is not a keyframe we have
+        // a problem since MSE (on Chrome) requires a leading keyframe.
+        //
+        // We have two approaches to repairing this situation:
+        // 1) GOP-FUSION:
+        //    This is where we keep track of the GOPS (group-of-pictures)
+        //    from previous fragments and attempt to find one that we can
+        //    prepend to the current fragment in order to create a valid
+        //    fragment.
+        // 2) KEYFRAME-PULLING:
+        //    Here we search for the first keyframe in the fragment and
+        //    throw away all the frames between the start of the fragment
+        //    and that keyframe. We then extend the duration and pull the
+        //    PTS of the keyframe forward so that it covers the time range
+        //    of the frames that were disposed of.
+        //
+        // #1 is far prefereable over #2 which can cause "stuttering" but
+        // requires more things to be just right.
+
+        if (!gops[0][0].keyFrame) {
+          // Search for a gop for fusion from our gopCache
+          gopForFusion = this.getGopForFusion_(nalUnits[0], track);
+          if (gopForFusion) {
+            // in order to provide more accurate timing information about the segment, save
+            // the number of seconds prepended to the original segment due to GOP fusion
+            prependedContentDuration = gopForFusion.duration;
+            gops.unshift(gopForFusion); // Adjust Gops' metadata to account for the inclusion of the
+            // new gop at the beginning
+
+            gops.byteLength += gopForFusion.byteLength;
+            gops.nalCount += gopForFusion.nalCount;
+            gops.pts = gopForFusion.pts;
+            gops.dts = gopForFusion.dts;
+            gops.duration += gopForFusion.duration;
+          } else {
+            // If we didn't find a candidate gop fall back to keyframe-pulling
+            gops = frameUtils.extendFirstKeyFrame(gops);
+          }
+        } // Trim gops to align with gopsToAlignWith
+
+        if (gopsToAlignWith.length) {
+          var alignedGops;
+          if (options.alignGopsAtEnd) {
+            alignedGops = this.alignGopsAtEnd_(gops);
+          } else {
+            alignedGops = this.alignGopsAtStart_(gops);
+          }
+          if (!alignedGops) {
+            // save all the nals in the last GOP into the gop cache
+            this.gopCache_.unshift({
+              gop: gops.pop(),
+              pps: track.pps,
+              sps: track.sps
+            }); // Keep a maximum of 6 GOPs in the cache
+
+            this.gopCache_.length = Math.min(6, this.gopCache_.length); // Clear nalUnits
+
+            nalUnits = []; // return early no gops can be aligned with desired gopsToAlignWith
+
+            this.resetStream_();
+            this.trigger('done', 'VideoSegmentStream');
+            return;
+          } // Some gops were trimmed. clear dts info so minSegmentDts and pts are correct
+          // when recalculated before sending off to CoalesceStream
+
+          trackDecodeInfo.clearDtsInfo(track);
+          gops = alignedGops;
+        }
+        trackDecodeInfo.collectDtsInfo(track, gops); // First, we have to build the index from byte locations to
+        // samples (that is, frames) in the video data
+
+        track.samples = frameUtils.generateSampleTable(gops); // Concatenate the video data and construct the mdat
+
+        mdat = mp4.mdat(frameUtils.concatenateNalData(gops));
+        track.baseMediaDecodeTime = trackDecodeInfo.calculateTrackBaseMediaDecodeTime(track, options.keepOriginalTimestamps);
+        this.trigger('processedGopsInfo', gops.map(function (gop) {
+          return {
+            pts: gop.pts,
+            dts: gop.dts,
+            byteLength: gop.byteLength
+          };
+        }));
+        firstGop = gops[0];
+        lastGop = gops[gops.length - 1];
+        this.trigger('segmentTimingInfo', generateSegmentTimingInfo(track.baseMediaDecodeTime, firstGop.dts, firstGop.pts, lastGop.dts + lastGop.duration, lastGop.pts + lastGop.duration, prependedContentDuration));
+        this.trigger('timingInfo', {
+          start: gops[0].pts,
+          end: gops[gops.length - 1].pts + gops[gops.length - 1].duration
+        }); // save all the nals in the last GOP into the gop cache
+
+        this.gopCache_.unshift({
+          gop: gops.pop(),
+          pps: track.pps,
+          sps: track.sps
+        }); // Keep a maximum of 6 GOPs in the cache
+
+        this.gopCache_.length = Math.min(6, this.gopCache_.length); // Clear nalUnits
+
+        nalUnits = [];
+        this.trigger('baseMediaDecodeTime', track.baseMediaDecodeTime);
+        this.trigger('timelineStartInfo', track.timelineStartInfo);
+        moof = mp4.moof(sequenceNumber, [track]); // it would be great to allocate this array up front instead of
+        // throwing away hundreds of media segment fragments
+
+        boxes = new Uint8Array(moof.byteLength + mdat.byteLength); // Bump the sequence number for next time
+
+        sequenceNumber++;
+        boxes.set(moof);
+        boxes.set(mdat, moof.byteLength);
+        this.trigger('data', {
+          track: track,
+          boxes: boxes
+        });
+        this.resetStream_(); // Continue with the flush process now
+
+        this.trigger('done', 'VideoSegmentStream');
+      };
+      this.reset = function () {
+        this.resetStream_();
+        nalUnits = [];
+        this.gopCache_.length = 0;
+        gopsToAlignWith.length = 0;
+        this.trigger('reset');
+      };
+      this.resetStream_ = function () {
+        trackDecodeInfo.clearDtsInfo(track); // reset config and pps because they may differ across segments
+        // for instance, when we are rendition switching
+
+        config = undefined;
+        pps = undefined;
+      }; // Search for a candidate Gop for gop-fusion from the gop cache and
+      // return it or return null if no good candidate was found
+
+      this.getGopForFusion_ = function (nalUnit) {
+        var halfSecond = 45000,
+          // Half-a-second in a 90khz clock
+          allowableOverlap = 10000,
+          // About 3 frames @ 30fps
+          nearestDistance = Infinity,
+          dtsDistance,
+          nearestGopObj,
+          currentGop,
+          currentGopObj,
+          i; // Search for the GOP nearest to the beginning of this nal unit
+
+        for (i = 0; i < this.gopCache_.length; i++) {
+          currentGopObj = this.gopCache_[i];
+          currentGop = currentGopObj.gop; // Reject Gops with different SPS or PPS
+
+          if (!(track.pps && arrayEquals(track.pps[0], currentGopObj.pps[0])) || !(track.sps && arrayEquals(track.sps[0], currentGopObj.sps[0]))) {
+            continue;
+          } // Reject Gops that would require a negative baseMediaDecodeTime
+
+          if (currentGop.dts < track.timelineStartInfo.dts) {
+            continue;
+          } // The distance between the end of the gop and the start of the nalUnit
+
+          dtsDistance = nalUnit.dts - currentGop.dts - currentGop.duration; // Only consider GOPS that start before the nal unit and end within
+          // a half-second of the nal unit
+
+          if (dtsDistance >= -allowableOverlap && dtsDistance <= halfSecond) {
+            // Always use the closest GOP we found if there is more than
+            // one candidate
+            if (!nearestGopObj || nearestDistance > dtsDistance) {
+              nearestGopObj = currentGopObj;
+              nearestDistance = dtsDistance;
+            }
+          }
+        }
+        if (nearestGopObj) {
+          return nearestGopObj.gop;
+        }
+        return null;
+      }; // trim gop list to the first gop found that has a matching pts with a gop in the list
+      // of gopsToAlignWith starting from the START of the list
+
+      this.alignGopsAtStart_ = function (gops) {
+        var alignIndex, gopIndex, align, gop, byteLength, nalCount, duration, alignedGops;
+        byteLength = gops.byteLength;
+        nalCount = gops.nalCount;
+        duration = gops.duration;
+        alignIndex = gopIndex = 0;
+        while (alignIndex < gopsToAlignWith.length && gopIndex < gops.length) {
+          align = gopsToAlignWith[alignIndex];
+          gop = gops[gopIndex];
+          if (align.pts === gop.pts) {
+            break;
+          }
+          if (gop.pts > align.pts) {
+            // this current gop starts after the current gop we want to align on, so increment
+            // align index
+            alignIndex++;
+            continue;
+          } // current gop starts before the current gop we want to align on. so increment gop
+          // index
+
+          gopIndex++;
+          byteLength -= gop.byteLength;
+          nalCount -= gop.nalCount;
+          duration -= gop.duration;
+        }
+        if (gopIndex === 0) {
+          // no gops to trim
+          return gops;
+        }
+        if (gopIndex === gops.length) {
+          // all gops trimmed, skip appending all gops
+          return null;
+        }
+        alignedGops = gops.slice(gopIndex);
+        alignedGops.byteLength = byteLength;
+        alignedGops.duration = duration;
+        alignedGops.nalCount = nalCount;
+        alignedGops.pts = alignedGops[0].pts;
+        alignedGops.dts = alignedGops[0].dts;
+        return alignedGops;
+      }; // trim gop list to the first gop found that has a matching pts with a gop in the list
+      // of gopsToAlignWith starting from the END of the list
+
+      this.alignGopsAtEnd_ = function (gops) {
+        var alignIndex, gopIndex, align, gop, alignEndIndex, matchFound;
+        alignIndex = gopsToAlignWith.length - 1;
+        gopIndex = gops.length - 1;
+        alignEndIndex = null;
+        matchFound = false;
+        while (alignIndex >= 0 && gopIndex >= 0) {
+          align = gopsToAlignWith[alignIndex];
+          gop = gops[gopIndex];
+          if (align.pts === gop.pts) {
+            matchFound = true;
+            break;
+          }
+          if (align.pts > gop.pts) {
+            alignIndex--;
+            continue;
+          }
+          if (alignIndex === gopsToAlignWith.length - 1) {
+            // gop.pts is greater than the last alignment candidate. If no match is found
+            // by the end of this loop, we still want to append gops that come after this
+            // point
+            alignEndIndex = gopIndex;
+          }
+          gopIndex--;
+        }
+        if (!matchFound && alignEndIndex === null) {
+          return null;
+        }
+        var trimIndex;
+        if (matchFound) {
+          trimIndex = gopIndex;
+        } else {
+          trimIndex = alignEndIndex;
+        }
+        if (trimIndex === 0) {
+          return gops;
+        }
+        var alignedGops = gops.slice(trimIndex);
+        var metadata = alignedGops.reduce(function (total, gop) {
+          total.byteLength += gop.byteLength;
+          total.duration += gop.duration;
+          total.nalCount += gop.nalCount;
+          return total;
+        }, {
+          byteLength: 0,
+          duration: 0,
+          nalCount: 0
+        });
+        alignedGops.byteLength = metadata.byteLength;
+        alignedGops.duration = metadata.duration;
+        alignedGops.nalCount = metadata.nalCount;
+        alignedGops.pts = alignedGops[0].pts;
+        alignedGops.dts = alignedGops[0].dts;
+        return alignedGops;
+      };
+      this.alignGopsWith = function (newGopsToAlignWith) {
+        gopsToAlignWith = newGopsToAlignWith;
+      };
+    };
+    VideoSegmentStream.prototype = new Stream();
+    /**
+     * A Stream that can combine multiple streams (ie. audio & video)
+     * into a single output segment for MSE. Also supports audio-only
+     * and video-only streams.
+     * @param options {object} transmuxer options object
+     * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+     *        in the source; false to adjust the first segment to start at media timeline start.
+     */
+
+    CoalesceStream = function (options, metadataStream) {
+      // Number of Tracks per output segment
+      // If greater than 1, we combine multiple
+      // tracks into a single segment
+      this.numberOfTracks = 0;
+      this.metadataStream = metadataStream;
+      options = options || {};
+      if (typeof options.remux !== 'undefined') {
+        this.remuxTracks = !!options.remux;
+      } else {
+        this.remuxTracks = true;
+      }
+      if (typeof options.keepOriginalTimestamps === 'boolean') {
+        this.keepOriginalTimestamps = options.keepOriginalTimestamps;
+      } else {
+        this.keepOriginalTimestamps = false;
+      }
+      this.pendingTracks = [];
+      this.videoTrack = null;
+      this.pendingBoxes = [];
+      this.pendingCaptions = [];
+      this.pendingMetadata = [];
+      this.pendingBytes = 0;
+      this.emittedTracks = 0;
+      CoalesceStream.prototype.init.call(this); // Take output from multiple
+
+      this.push = function (output) {
+        // buffer incoming captions until the associated video segment
+        // finishes
+        if (output.content || output.text) {
+          return this.pendingCaptions.push(output);
+        } // buffer incoming id3 tags until the final flush
+
+        if (output.frames) {
+          return this.pendingMetadata.push(output);
+        } // Add this track to the list of pending tracks and store
+        // important information required for the construction of
+        // the final segment
+
+        this.pendingTracks.push(output.track);
+        this.pendingBytes += output.boxes.byteLength; // TODO: is there an issue for this against chrome?
+        // We unshift audio and push video because
+        // as of Chrome 75 when switching from
+        // one init segment to another if the video
+        // mdat does not appear after the audio mdat
+        // only audio will play for the duration of our transmux.
+
+        if (output.track.type === 'video') {
+          this.videoTrack = output.track;
+          this.pendingBoxes.push(output.boxes);
+        }
+        if (output.track.type === 'audio') {
+          this.audioTrack = output.track;
+          this.pendingBoxes.unshift(output.boxes);
+        }
+      };
+    };
+    CoalesceStream.prototype = new Stream();
+    CoalesceStream.prototype.flush = function (flushSource) {
+      var offset = 0,
+        event = {
+          captions: [],
+          captionStreams: {},
+          metadata: [],
+          info: {}
+        },
+        caption,
+        id3,
+        initSegment,
+        timelineStartPts = 0,
+        i;
+      if (this.pendingTracks.length < this.numberOfTracks) {
+        if (flushSource !== 'VideoSegmentStream' && flushSource !== 'AudioSegmentStream') {
+          // Return because we haven't received a flush from a data-generating
+          // portion of the segment (meaning that we have only recieved meta-data
+          // or captions.)
+          return;
+        } else if (this.remuxTracks) {
+          // Return until we have enough tracks from the pipeline to remux (if we
+          // are remuxing audio and video into a single MP4)
+          return;
+        } else if (this.pendingTracks.length === 0) {
+          // In the case where we receive a flush without any data having been
+          // received we consider it an emitted track for the purposes of coalescing
+          // `done` events.
+          // We do this for the case where there is an audio and video track in the
+          // segment but no audio data. (seen in several playlists with alternate
+          // audio tracks and no audio present in the main TS segments.)
+          this.emittedTracks++;
+          if (this.emittedTracks >= this.numberOfTracks) {
+            this.trigger('done');
+            this.emittedTracks = 0;
+          }
+          return;
+        }
+      }
+      if (this.videoTrack) {
+        timelineStartPts = this.videoTrack.timelineStartInfo.pts;
+        VIDEO_PROPERTIES.forEach(function (prop) {
+          event.info[prop] = this.videoTrack[prop];
+        }, this);
+      } else if (this.audioTrack) {
+        timelineStartPts = this.audioTrack.timelineStartInfo.pts;
+        AUDIO_PROPERTIES.forEach(function (prop) {
+          event.info[prop] = this.audioTrack[prop];
+        }, this);
+      }
+      if (this.videoTrack || this.audioTrack) {
+        if (this.pendingTracks.length === 1) {
+          event.type = this.pendingTracks[0].type;
+        } else {
+          event.type = 'combined';
+        }
+        this.emittedTracks += this.pendingTracks.length;
+        initSegment = mp4.initSegment(this.pendingTracks); // Create a new typed array to hold the init segment
+
+        event.initSegment = new Uint8Array(initSegment.byteLength); // Create an init segment containing a moov
+        // and track definitions
+
+        event.initSegment.set(initSegment); // Create a new typed array to hold the moof+mdats
+
+        event.data = new Uint8Array(this.pendingBytes); // Append each moof+mdat (one per track) together
+
+        for (i = 0; i < this.pendingBoxes.length; i++) {
+          event.data.set(this.pendingBoxes[i], offset);
+          offset += this.pendingBoxes[i].byteLength;
+        } // Translate caption PTS times into second offsets to match the
+        // video timeline for the segment, and add track info
+
+        for (i = 0; i < this.pendingCaptions.length; i++) {
+          caption = this.pendingCaptions[i];
+          caption.startTime = clock.metadataTsToSeconds(caption.startPts, timelineStartPts, this.keepOriginalTimestamps);
+          caption.endTime = clock.metadataTsToSeconds(caption.endPts, timelineStartPts, this.keepOriginalTimestamps);
+          event.captionStreams[caption.stream] = true;
+          event.captions.push(caption);
+        } // Translate ID3 frame PTS times into second offsets to match the
+        // video timeline for the segment
+
+        for (i = 0; i < this.pendingMetadata.length; i++) {
+          id3 = this.pendingMetadata[i];
+          id3.cueTime = clock.metadataTsToSeconds(id3.pts, timelineStartPts, this.keepOriginalTimestamps);
+          event.metadata.push(id3);
+        } // We add this to every single emitted segment even though we only need
+        // it for the first
+
+        event.metadata.dispatchType = this.metadataStream.dispatchType; // Reset stream state
+
+        this.pendingTracks.length = 0;
+        this.videoTrack = null;
+        this.pendingBoxes.length = 0;
+        this.pendingCaptions.length = 0;
+        this.pendingBytes = 0;
+        this.pendingMetadata.length = 0; // Emit the built segment
+        // We include captions and ID3 tags for backwards compatibility,
+        // ideally we should send only video and audio in the data event
+
+        this.trigger('data', event); // Emit each caption to the outside world
+        // Ideally, this would happen immediately on parsing captions,
+        // but we need to ensure that video data is sent back first
+        // so that caption timing can be adjusted to match video timing
+
+        for (i = 0; i < event.captions.length; i++) {
+          caption = event.captions[i];
+          this.trigger('caption', caption);
+        } // Emit each id3 tag to the outside world
+        // Ideally, this would happen immediately on parsing the tag,
+        // but we need to ensure that video data is sent back first
+        // so that ID3 frame timing can be adjusted to match video timing
+
+        for (i = 0; i < event.metadata.length; i++) {
+          id3 = event.metadata[i];
+          this.trigger('id3Frame', id3);
+        }
+      } // Only emit `done` if all tracks have been flushed and emitted
+
+      if (this.emittedTracks >= this.numberOfTracks) {
+        this.trigger('done');
+        this.emittedTracks = 0;
+      }
+    };
+    CoalesceStream.prototype.setRemux = function (val) {
+      this.remuxTracks = val;
+    };
+    /**
+     * A Stream that expects MP2T binary data as input and produces
+     * corresponding media segments, suitable for use with Media Source
+     * Extension (MSE) implementations that support the ISO BMFF byte
+     * stream format, like Chrome.
+     */
+
+    Transmuxer = function (options) {
+      var self = this,
+        hasFlushed = true,
+        videoTrack,
+        audioTrack;
+      Transmuxer.prototype.init.call(this);
+      options = options || {};
+      this.baseMediaDecodeTime = options.baseMediaDecodeTime || 0;
+      this.transmuxPipeline_ = {};
+      this.setupAacPipeline = function () {
+        var pipeline = {};
+        this.transmuxPipeline_ = pipeline;
+        pipeline.type = 'aac';
+        pipeline.metadataStream = new m2ts.MetadataStream(); // set up the parsing pipeline
+
+        pipeline.aacStream = new AacStream();
+        pipeline.audioTimestampRolloverStream = new m2ts.TimestampRolloverStream('audio');
+        pipeline.timedMetadataTimestampRolloverStream = new m2ts.TimestampRolloverStream('timed-metadata');
+        pipeline.adtsStream = new AdtsStream();
+        pipeline.coalesceStream = new CoalesceStream(options, pipeline.metadataStream);
+        pipeline.headOfPipeline = pipeline.aacStream;
+        pipeline.aacStream.pipe(pipeline.audioTimestampRolloverStream).pipe(pipeline.adtsStream);
+        pipeline.aacStream.pipe(pipeline.timedMetadataTimestampRolloverStream).pipe(pipeline.metadataStream).pipe(pipeline.coalesceStream);
+        pipeline.metadataStream.on('timestamp', function (frame) {
+          pipeline.aacStream.setTimestamp(frame.timeStamp);
+        });
+        pipeline.aacStream.on('data', function (data) {
+          if (data.type !== 'timed-metadata' && data.type !== 'audio' || pipeline.audioSegmentStream) {
+            return;
+          }
+          audioTrack = audioTrack || {
+            timelineStartInfo: {
+              baseMediaDecodeTime: self.baseMediaDecodeTime
+            },
+            codec: 'adts',
+            type: 'audio'
+          }; // hook up the audio segment stream to the first track with aac data
+
+          pipeline.coalesceStream.numberOfTracks++;
+          pipeline.audioSegmentStream = new AudioSegmentStream(audioTrack, options);
+          pipeline.audioSegmentStream.on('log', self.getLogTrigger_('audioSegmentStream'));
+          pipeline.audioSegmentStream.on('timingInfo', self.trigger.bind(self, 'audioTimingInfo')); // Set up the final part of the audio pipeline
+
+          pipeline.adtsStream.pipe(pipeline.audioSegmentStream).pipe(pipeline.coalesceStream); // emit pmt info
+
+          self.trigger('trackinfo', {
+            hasAudio: !!audioTrack,
+            hasVideo: !!videoTrack
+          });
+        }); // Re-emit any data coming from the coalesce stream to the outside world
+
+        pipeline.coalesceStream.on('data', this.trigger.bind(this, 'data')); // Let the consumer know we have finished flushing the entire pipeline
+
+        pipeline.coalesceStream.on('done', this.trigger.bind(this, 'done'));
+        addPipelineLogRetriggers(this, pipeline);
+      };
+      this.setupTsPipeline = function () {
+        var pipeline = {};
+        this.transmuxPipeline_ = pipeline;
+        pipeline.type = 'ts';
+        pipeline.metadataStream = new m2ts.MetadataStream(); // set up the parsing pipeline
+
+        pipeline.packetStream = new m2ts.TransportPacketStream();
+        pipeline.parseStream = new m2ts.TransportParseStream();
+        pipeline.elementaryStream = new m2ts.ElementaryStream();
+        pipeline.timestampRolloverStream = new m2ts.TimestampRolloverStream();
+        pipeline.adtsStream = new AdtsStream();
+        pipeline.h264Stream = new H264Stream();
+        pipeline.captionStream = new m2ts.CaptionStream(options);
+        pipeline.coalesceStream = new CoalesceStream(options, pipeline.metadataStream);
+        pipeline.headOfPipeline = pipeline.packetStream; // disassemble MPEG2-TS packets into elementary streams
+
+        pipeline.packetStream.pipe(pipeline.parseStream).pipe(pipeline.elementaryStream).pipe(pipeline.timestampRolloverStream); // !!THIS ORDER IS IMPORTANT!!
+        // demux the streams
+
+        pipeline.timestampRolloverStream.pipe(pipeline.h264Stream);
+        pipeline.timestampRolloverStream.pipe(pipeline.adtsStream);
+        pipeline.timestampRolloverStream.pipe(pipeline.metadataStream).pipe(pipeline.coalesceStream); // Hook up CEA-608/708 caption stream
+
+        pipeline.h264Stream.pipe(pipeline.captionStream).pipe(pipeline.coalesceStream);
+        pipeline.elementaryStream.on('data', function (data) {
+          var i;
+          if (data.type === 'metadata') {
+            i = data.tracks.length; // scan the tracks listed in the metadata
+
+            while (i--) {
+              if (!videoTrack && data.tracks[i].type === 'video') {
+                videoTrack = data.tracks[i];
+                videoTrack.timelineStartInfo.baseMediaDecodeTime = self.baseMediaDecodeTime;
+              } else if (!audioTrack && data.tracks[i].type === 'audio') {
+                audioTrack = data.tracks[i];
+                audioTrack.timelineStartInfo.baseMediaDecodeTime = self.baseMediaDecodeTime;
+              }
+            } // hook up the video segment stream to the first track with h264 data
+
+            if (videoTrack && !pipeline.videoSegmentStream) {
+              pipeline.coalesceStream.numberOfTracks++;
+              pipeline.videoSegmentStream = new VideoSegmentStream(videoTrack, options);
+              pipeline.videoSegmentStream.on('log', self.getLogTrigger_('videoSegmentStream'));
+              pipeline.videoSegmentStream.on('timelineStartInfo', function (timelineStartInfo) {
+                // When video emits timelineStartInfo data after a flush, we forward that
+                // info to the AudioSegmentStream, if it exists, because video timeline
+                // data takes precedence.  Do not do this if keepOriginalTimestamps is set,
+                // because this is a particularly subtle form of timestamp alteration.
+                if (audioTrack && !options.keepOriginalTimestamps) {
+                  audioTrack.timelineStartInfo = timelineStartInfo; // On the first segment we trim AAC frames that exist before the
+                  // very earliest DTS we have seen in video because Chrome will
+                  // interpret any video track with a baseMediaDecodeTime that is
+                  // non-zero as a gap.
+
+                  pipeline.audioSegmentStream.setEarliestDts(timelineStartInfo.dts - self.baseMediaDecodeTime);
+                }
+              });
+              pipeline.videoSegmentStream.on('processedGopsInfo', self.trigger.bind(self, 'gopInfo'));
+              pipeline.videoSegmentStream.on('segmentTimingInfo', self.trigger.bind(self, 'videoSegmentTimingInfo'));
+              pipeline.videoSegmentStream.on('baseMediaDecodeTime', function (baseMediaDecodeTime) {
+                if (audioTrack) {
+                  pipeline.audioSegmentStream.setVideoBaseMediaDecodeTime(baseMediaDecodeTime);
+                }
+              });
+              pipeline.videoSegmentStream.on('timingInfo', self.trigger.bind(self, 'videoTimingInfo')); // Set up the final part of the video pipeline
+
+              pipeline.h264Stream.pipe(pipeline.videoSegmentStream).pipe(pipeline.coalesceStream);
+            }
+            if (audioTrack && !pipeline.audioSegmentStream) {
+              // hook up the audio segment stream to the first track with aac data
+              pipeline.coalesceStream.numberOfTracks++;
+              pipeline.audioSegmentStream = new AudioSegmentStream(audioTrack, options);
+              pipeline.audioSegmentStream.on('log', self.getLogTrigger_('audioSegmentStream'));
+              pipeline.audioSegmentStream.on('timingInfo', self.trigger.bind(self, 'audioTimingInfo'));
+              pipeline.audioSegmentStream.on('segmentTimingInfo', self.trigger.bind(self, 'audioSegmentTimingInfo')); // Set up the final part of the audio pipeline
+
+              pipeline.adtsStream.pipe(pipeline.audioSegmentStream).pipe(pipeline.coalesceStream);
+            } // emit pmt info
+
+            self.trigger('trackinfo', {
+              hasAudio: !!audioTrack,
+              hasVideo: !!videoTrack
+            });
+          }
+        }); // Re-emit any data coming from the coalesce stream to the outside world
+
+        pipeline.coalesceStream.on('data', this.trigger.bind(this, 'data'));
+        pipeline.coalesceStream.on('id3Frame', function (id3Frame) {
+          id3Frame.dispatchType = pipeline.metadataStream.dispatchType;
+          self.trigger('id3Frame', id3Frame);
+        });
+        pipeline.coalesceStream.on('caption', this.trigger.bind(this, 'caption')); // Let the consumer know we have finished flushing the entire pipeline
+
+        pipeline.coalesceStream.on('done', this.trigger.bind(this, 'done'));
+        addPipelineLogRetriggers(this, pipeline);
+      }; // hook up the segment streams once track metadata is delivered
+
+      this.setBaseMediaDecodeTime = function (baseMediaDecodeTime) {
+        var pipeline = this.transmuxPipeline_;
+        if (!options.keepOriginalTimestamps) {
+          this.baseMediaDecodeTime = baseMediaDecodeTime;
+        }
+        if (audioTrack) {
+          audioTrack.timelineStartInfo.dts = undefined;
+          audioTrack.timelineStartInfo.pts = undefined;
+          trackDecodeInfo.clearDtsInfo(audioTrack);
+          if (pipeline.audioTimestampRolloverStream) {
+            pipeline.audioTimestampRolloverStream.discontinuity();
+          }
+        }
+        if (videoTrack) {
+          if (pipeline.videoSegmentStream) {
+            pipeline.videoSegmentStream.gopCache_ = [];
+          }
+          videoTrack.timelineStartInfo.dts = undefined;
+          videoTrack.timelineStartInfo.pts = undefined;
+          trackDecodeInfo.clearDtsInfo(videoTrack);
+          pipeline.captionStream.reset();
+        }
+        if (pipeline.timestampRolloverStream) {
+          pipeline.timestampRolloverStream.discontinuity();
+        }
+      };
+      this.setAudioAppendStart = function (timestamp) {
+        if (audioTrack) {
+          this.transmuxPipeline_.audioSegmentStream.setAudioAppendStart(timestamp);
+        }
+      };
+      this.setRemux = function (val) {
+        var pipeline = this.transmuxPipeline_;
+        options.remux = val;
+        if (pipeline && pipeline.coalesceStream) {
+          pipeline.coalesceStream.setRemux(val);
+        }
+      };
+      this.alignGopsWith = function (gopsToAlignWith) {
+        if (videoTrack && this.transmuxPipeline_.videoSegmentStream) {
+          this.transmuxPipeline_.videoSegmentStream.alignGopsWith(gopsToAlignWith);
+        }
+      };
+      this.getLogTrigger_ = function (key) {
+        var self = this;
+        return function (event) {
+          event.stream = key;
+          self.trigger('log', event);
+        };
+      }; // feed incoming data to the front of the parsing pipeline
+
+      this.push = function (data) {
+        if (hasFlushed) {
+          var isAac = isLikelyAacData(data);
+          if (isAac && this.transmuxPipeline_.type !== 'aac') {
+            this.setupAacPipeline();
+          } else if (!isAac && this.transmuxPipeline_.type !== 'ts') {
+            this.setupTsPipeline();
+          }
+          hasFlushed = false;
+        }
+        this.transmuxPipeline_.headOfPipeline.push(data);
+      }; // flush any buffered data
+
+      this.flush = function () {
+        hasFlushed = true; // Start at the top of the pipeline and flush all pending work
+
+        this.transmuxPipeline_.headOfPipeline.flush();
+      };
+      this.endTimeline = function () {
+        this.transmuxPipeline_.headOfPipeline.endTimeline();
+      };
+      this.reset = function () {
+        if (this.transmuxPipeline_.headOfPipeline) {
+          this.transmuxPipeline_.headOfPipeline.reset();
+        }
+      }; // Caption data has to be reset when seeking outside buffered range
+
+      this.resetCaptions = function () {
+        if (this.transmuxPipeline_.captionStream) {
+          this.transmuxPipeline_.captionStream.reset();
+        }
+      };
+    };
+    Transmuxer.prototype = new Stream();
+    var transmuxer = {
+      Transmuxer: Transmuxer,
+      VideoSegmentStream: VideoSegmentStream,
+      AudioSegmentStream: AudioSegmentStream,
+      AUDIO_PROPERTIES: AUDIO_PROPERTIES,
+      VIDEO_PROPERTIES: VIDEO_PROPERTIES,
+      // exported for testing
+      generateSegmentTimingInfo: generateSegmentTimingInfo
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var toUnsigned$3 = function (value) {
+      return value >>> 0;
+    };
+    var toHexString$1 = function (value) {
+      return ('00' + value.toString(16)).slice(-2);
+    };
+    var bin = {
+      toUnsigned: toUnsigned$3,
+      toHexString: toHexString$1
+    };
+    var parseType$3 = function (buffer) {
+      var result = '';
+      result += String.fromCharCode(buffer[0]);
+      result += String.fromCharCode(buffer[1]);
+      result += String.fromCharCode(buffer[2]);
+      result += String.fromCharCode(buffer[3]);
+      return result;
+    };
+    var parseType_1 = parseType$3;
+    var toUnsigned$2 = bin.toUnsigned;
+    var parseType$2 = parseType_1;
+    var findBox$2 = function (data, path) {
+      var results = [],
+        i,
+        size,
+        type,
+        end,
+        subresults;
+      if (!path.length) {
+        // short-circuit the search for empty paths
+        return null;
+      }
+      for (i = 0; i < data.byteLength;) {
+        size = toUnsigned$2(data[i] << 24 | data[i + 1] << 16 | data[i + 2] << 8 | data[i + 3]);
+        type = parseType$2(data.subarray(i + 4, i + 8));
+        end = size > 1 ? i + size : data.byteLength;
+        if (type === path[0]) {
+          if (path.length === 1) {
+            // this is the end of the path and we've found the box we were
+            // looking for
+            results.push(data.subarray(i + 8, end));
+          } else {
+            // recursively search for the next box along the path
+            subresults = findBox$2(data.subarray(i + 8, end), path.slice(1));
+            if (subresults.length) {
+              results = results.concat(subresults);
+            }
+          }
+        }
+        i = end;
+      } // we've finished searching all of data
+
+      return results;
+    };
+    var findBox_1 = findBox$2;
+    var toUnsigned$1 = bin.toUnsigned;
+    var getUint64$2 = numbers.getUint64;
+    var tfdt = function (data) {
+      var result = {
+        version: data[0],
+        flags: new Uint8Array(data.subarray(1, 4))
+      };
+      if (result.version === 1) {
+        result.baseMediaDecodeTime = getUint64$2(data.subarray(4));
+      } else {
+        result.baseMediaDecodeTime = toUnsigned$1(data[4] << 24 | data[5] << 16 | data[6] << 8 | data[7]);
+      }
+      return result;
+    };
+    var parseTfdt$2 = tfdt;
+    var parseSampleFlags$1 = function (flags) {
+      return {
+        isLeading: (flags[0] & 0x0c) >>> 2,
+        dependsOn: flags[0] & 0x03,
+        isDependedOn: (flags[1] & 0xc0) >>> 6,
+        hasRedundancy: (flags[1] & 0x30) >>> 4,
+        paddingValue: (flags[1] & 0x0e) >>> 1,
+        isNonSyncSample: flags[1] & 0x01,
+        degradationPriority: flags[2] << 8 | flags[3]
+      };
+    };
+    var parseSampleFlags_1 = parseSampleFlags$1;
+    var parseSampleFlags = parseSampleFlags_1;
+    var trun = function (data) {
+      var result = {
+          version: data[0],
+          flags: new Uint8Array(data.subarray(1, 4)),
+          samples: []
+        },
+        view = new DataView(data.buffer, data.byteOffset, data.byteLength),
+        // Flag interpretation
+        dataOffsetPresent = result.flags[2] & 0x01,
+        // compare with 2nd byte of 0x1
+        firstSampleFlagsPresent = result.flags[2] & 0x04,
+        // compare with 2nd byte of 0x4
+        sampleDurationPresent = result.flags[1] & 0x01,
+        // compare with 2nd byte of 0x100
+        sampleSizePresent = result.flags[1] & 0x02,
+        // compare with 2nd byte of 0x200
+        sampleFlagsPresent = result.flags[1] & 0x04,
+        // compare with 2nd byte of 0x400
+        sampleCompositionTimeOffsetPresent = result.flags[1] & 0x08,
+        // compare with 2nd byte of 0x800
+        sampleCount = view.getUint32(4),
+        offset = 8,
+        sample;
+      if (dataOffsetPresent) {
+        // 32 bit signed integer
+        result.dataOffset = view.getInt32(offset);
+        offset += 4;
+      } // Overrides the flags for the first sample only. The order of
+      // optional values will be: duration, size, compositionTimeOffset
+
+      if (firstSampleFlagsPresent && sampleCount) {
+        sample = {
+          flags: parseSampleFlags(data.subarray(offset, offset + 4))
+        };
+        offset += 4;
+        if (sampleDurationPresent) {
+          sample.duration = view.getUint32(offset);
+          offset += 4;
+        }
+        if (sampleSizePresent) {
+          sample.size = view.getUint32(offset);
+          offset += 4;
+        }
+        if (sampleCompositionTimeOffsetPresent) {
+          if (result.version === 1) {
+            sample.compositionTimeOffset = view.getInt32(offset);
+          } else {
+            sample.compositionTimeOffset = view.getUint32(offset);
+          }
+          offset += 4;
+        }
+        result.samples.push(sample);
+        sampleCount--;
+      }
+      while (sampleCount--) {
+        sample = {};
+        if (sampleDurationPresent) {
+          sample.duration = view.getUint32(offset);
+          offset += 4;
+        }
+        if (sampleSizePresent) {
+          sample.size = view.getUint32(offset);
+          offset += 4;
+        }
+        if (sampleFlagsPresent) {
+          sample.flags = parseSampleFlags(data.subarray(offset, offset + 4));
+          offset += 4;
+        }
+        if (sampleCompositionTimeOffsetPresent) {
+          if (result.version === 1) {
+            sample.compositionTimeOffset = view.getInt32(offset);
+          } else {
+            sample.compositionTimeOffset = view.getUint32(offset);
+          }
+          offset += 4;
+        }
+        result.samples.push(sample);
+      }
+      return result;
+    };
+    var parseTrun$2 = trun;
+    var tfhd = function (data) {
+      var view = new DataView(data.buffer, data.byteOffset, data.byteLength),
+        result = {
+          version: data[0],
+          flags: new Uint8Array(data.subarray(1, 4)),
+          trackId: view.getUint32(4)
+        },
+        baseDataOffsetPresent = result.flags[2] & 0x01,
+        sampleDescriptionIndexPresent = result.flags[2] & 0x02,
+        defaultSampleDurationPresent = result.flags[2] & 0x08,
+        defaultSampleSizePresent = result.flags[2] & 0x10,
+        defaultSampleFlagsPresent = result.flags[2] & 0x20,
+        durationIsEmpty = result.flags[0] & 0x010000,
+        defaultBaseIsMoof = result.flags[0] & 0x020000,
+        i;
+      i = 8;
+      if (baseDataOffsetPresent) {
+        i += 4; // truncate top 4 bytes
+        // FIXME: should we read the full 64 bits?
+
+        result.baseDataOffset = view.getUint32(12);
+        i += 4;
+      }
+      if (sampleDescriptionIndexPresent) {
+        result.sampleDescriptionIndex = view.getUint32(i);
+        i += 4;
+      }
+      if (defaultSampleDurationPresent) {
+        result.defaultSampleDuration = view.getUint32(i);
+        i += 4;
+      }
+      if (defaultSampleSizePresent) {
+        result.defaultSampleSize = view.getUint32(i);
+        i += 4;
+      }
+      if (defaultSampleFlagsPresent) {
+        result.defaultSampleFlags = view.getUint32(i);
+      }
+      if (durationIsEmpty) {
+        result.durationIsEmpty = true;
+      }
+      if (!baseDataOffsetPresent && defaultBaseIsMoof) {
+        result.baseDataOffsetIsMoof = true;
+      }
+      return result;
+    };
+    var parseTfhd$2 = tfhd;
+    var win;
+    if (typeof window !== "undefined") {
+      win = window;
+    } else if (typeof commonjsGlobal !== "undefined") {
+      win = commonjsGlobal;
+    } else if (typeof self !== "undefined") {
+      win = self;
+    } else {
+      win = {};
+    }
+    var window_1 = win;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Reads in-band CEA-708 captions out of FMP4 segments.
+     * @see https://en.wikipedia.org/wiki/CEA-708
+     */
+
+    var discardEmulationPreventionBytes = captionPacketParser.discardEmulationPreventionBytes;
+    var CaptionStream = captionStream.CaptionStream;
+    var findBox$1 = findBox_1;
+    var parseTfdt$1 = parseTfdt$2;
+    var parseTrun$1 = parseTrun$2;
+    var parseTfhd$1 = parseTfhd$2;
+    var window$2 = window_1;
+    /**
+      * Maps an offset in the mdat to a sample based on the the size of the samples.
+      * Assumes that `parseSamples` has been called first.
+      *
+      * @param {Number} offset - The offset into the mdat
+      * @param {Object[]} samples - An array of samples, parsed using `parseSamples`
+      * @return {?Object} The matching sample, or null if no match was found.
+      *
+      * @see ISO-BMFF-12/2015, Section 8.8.8
+     **/
+
+    var mapToSample = function (offset, samples) {
+      var approximateOffset = offset;
+      for (var i = 0; i < samples.length; i++) {
+        var sample = samples[i];
+        if (approximateOffset < sample.size) {
+          return sample;
+        }
+        approximateOffset -= sample.size;
+      }
+      return null;
+    };
+    /**
+      * Finds SEI nal units contained in a Media Data Box.
+      * Assumes that `parseSamples` has been called first.
+      *
+      * @param {Uint8Array} avcStream - The bytes of the mdat
+      * @param {Object[]} samples - The samples parsed out by `parseSamples`
+      * @param {Number} trackId - The trackId of this video track
+      * @return {Object[]} seiNals - the parsed SEI NALUs found.
+      *   The contents of the seiNal should match what is expected by
+      *   CaptionStream.push (nalUnitType, size, data, escapedRBSP, pts, dts)
+      *
+      * @see ISO-BMFF-12/2015, Section 8.1.1
+      * @see Rec. ITU-T H.264, 7.3.2.3.1
+     **/
+
+    var findSeiNals = function (avcStream, samples, trackId) {
+      var avcView = new DataView(avcStream.buffer, avcStream.byteOffset, avcStream.byteLength),
+        result = {
+          logs: [],
+          seiNals: []
+        },
+        seiNal,
+        i,
+        length,
+        lastMatchedSample;
+      for (i = 0; i + 4 < avcStream.length; i += length) {
+        length = avcView.getUint32(i);
+        i += 4; // Bail if this doesn't appear to be an H264 stream
+
+        if (length <= 0) {
+          continue;
+        }
+        switch (avcStream[i] & 0x1F) {
+          case 0x06:
+            var data = avcStream.subarray(i + 1, i + 1 + length);
+            var matchingSample = mapToSample(i, samples);
+            seiNal = {
+              nalUnitType: 'sei_rbsp',
+              size: length,
+              data: data,
+              escapedRBSP: discardEmulationPreventionBytes(data),
+              trackId: trackId
+            };
+            if (matchingSample) {
+              seiNal.pts = matchingSample.pts;
+              seiNal.dts = matchingSample.dts;
+              lastMatchedSample = matchingSample;
+            } else if (lastMatchedSample) {
+              // If a matching sample cannot be found, use the last
+              // sample's values as they should be as close as possible
+              seiNal.pts = lastMatchedSample.pts;
+              seiNal.dts = lastMatchedSample.dts;
+            } else {
+              result.logs.push({
+                level: 'warn',
+                message: 'We\'ve encountered a nal unit without data at ' + i + ' for trackId ' + trackId + '. See mux.js#223.'
+              });
+              break;
+            }
+            result.seiNals.push(seiNal);
+            break;
+        }
+      }
+      return result;
+    };
+    /**
+      * Parses sample information out of Track Run Boxes and calculates
+      * the absolute presentation and decode timestamps of each sample.
+      *
+      * @param {Array<Uint8Array>} truns - The Trun Run boxes to be parsed
+      * @param {Number|BigInt} baseMediaDecodeTime - base media decode time from tfdt
+          @see ISO-BMFF-12/2015, Section 8.8.12
+      * @param {Object} tfhd - The parsed Track Fragment Header
+      *   @see inspect.parseTfhd
+      * @return {Object[]} the parsed samples
+      *
+      * @see ISO-BMFF-12/2015, Section 8.8.8
+     **/
+
+    var parseSamples = function (truns, baseMediaDecodeTime, tfhd) {
+      var currentDts = baseMediaDecodeTime;
+      var defaultSampleDuration = tfhd.defaultSampleDuration || 0;
+      var defaultSampleSize = tfhd.defaultSampleSize || 0;
+      var trackId = tfhd.trackId;
+      var allSamples = [];
+      truns.forEach(function (trun) {
+        // Note: We currently do not parse the sample table as well
+        // as the trun. It's possible some sources will require this.
+        // moov > trak > mdia > minf > stbl
+        var trackRun = parseTrun$1(trun);
+        var samples = trackRun.samples;
+        samples.forEach(function (sample) {
+          if (sample.duration === undefined) {
+            sample.duration = defaultSampleDuration;
+          }
+          if (sample.size === undefined) {
+            sample.size = defaultSampleSize;
+          }
+          sample.trackId = trackId;
+          sample.dts = currentDts;
+          if (sample.compositionTimeOffset === undefined) {
+            sample.compositionTimeOffset = 0;
+          }
+          if (typeof currentDts === 'bigint') {
+            sample.pts = currentDts + window$2.BigInt(sample.compositionTimeOffset);
+            currentDts += window$2.BigInt(sample.duration);
+          } else {
+            sample.pts = currentDts + sample.compositionTimeOffset;
+            currentDts += sample.duration;
+          }
+        });
+        allSamples = allSamples.concat(samples);
+      });
+      return allSamples;
+    };
+    /**
+      * Parses out caption nals from an FMP4 segment's video tracks.
+      *
+      * @param {Uint8Array} segment - The bytes of a single segment
+      * @param {Number} videoTrackId - The trackId of a video track in the segment
+      * @return {Object.<Number, Object[]>} A mapping of video trackId to
+      *   a list of seiNals found in that track
+     **/
+
+    var parseCaptionNals = function (segment, videoTrackId) {
+      // To get the samples
+      var trafs = findBox$1(segment, ['moof', 'traf']); // To get SEI NAL units
+
+      var mdats = findBox$1(segment, ['mdat']);
+      var captionNals = {};
+      var mdatTrafPairs = []; // Pair up each traf with a mdat as moofs and mdats are in pairs
+
+      mdats.forEach(function (mdat, index) {
+        var matchingTraf = trafs[index];
+        mdatTrafPairs.push({
+          mdat: mdat,
+          traf: matchingTraf
+        });
+      });
+      mdatTrafPairs.forEach(function (pair) {
+        var mdat = pair.mdat;
+        var traf = pair.traf;
+        var tfhd = findBox$1(traf, ['tfhd']); // Exactly 1 tfhd per traf
+
+        var headerInfo = parseTfhd$1(tfhd[0]);
+        var trackId = headerInfo.trackId;
+        var tfdt = findBox$1(traf, ['tfdt']); // Either 0 or 1 tfdt per traf
+
+        var baseMediaDecodeTime = tfdt.length > 0 ? parseTfdt$1(tfdt[0]).baseMediaDecodeTime : 0;
+        var truns = findBox$1(traf, ['trun']);
+        var samples;
+        var result; // Only parse video data for the chosen video track
+
+        if (videoTrackId === trackId && truns.length > 0) {
+          samples = parseSamples(truns, baseMediaDecodeTime, headerInfo);
+          result = findSeiNals(mdat, samples, trackId);
+          if (!captionNals[trackId]) {
+            captionNals[trackId] = {
+              seiNals: [],
+              logs: []
+            };
+          }
+          captionNals[trackId].seiNals = captionNals[trackId].seiNals.concat(result.seiNals);
+          captionNals[trackId].logs = captionNals[trackId].logs.concat(result.logs);
+        }
+      });
+      return captionNals;
+    };
+    /**
+      * Parses out inband captions from an MP4 container and returns
+      * caption objects that can be used by WebVTT and the TextTrack API.
+      * @see https://developer.mozilla.org/en-US/docs/Web/API/VTTCue
+      * @see https://developer.mozilla.org/en-US/docs/Web/API/TextTrack
+      * Assumes that `probe.getVideoTrackIds` and `probe.timescale` have been called first
+      *
+      * @param {Uint8Array} segment - The fmp4 segment containing embedded captions
+      * @param {Number} trackId - The id of the video track to parse
+      * @param {Number} timescale - The timescale for the video track from the init segment
+      *
+      * @return {?Object[]} parsedCaptions - A list of captions or null if no video tracks
+      * @return {Number} parsedCaptions[].startTime - The time to show the caption in seconds
+      * @return {Number} parsedCaptions[].endTime - The time to stop showing the caption in seconds
+      * @return {Object[]} parsedCaptions[].content - A list of individual caption segments
+      * @return {String} parsedCaptions[].content.text - The visible content of the caption segment
+      * @return {Number} parsedCaptions[].content.line - The line height from 1-15 for positioning of the caption segment
+      * @return {Number} parsedCaptions[].content.position - The column indent percentage for cue positioning from 10-80
+     **/
+
+    var parseEmbeddedCaptions = function (segment, trackId, timescale) {
+      var captionNals; // the ISO-BMFF spec says that trackId can't be zero, but there's some broken content out there
+
+      if (trackId === null) {
+        return null;
+      }
+      captionNals = parseCaptionNals(segment, trackId);
+      var trackNals = captionNals[trackId] || {};
+      return {
+        seiNals: trackNals.seiNals,
+        logs: trackNals.logs,
+        timescale: timescale
+      };
+    };
+    /**
+      * Converts SEI NALUs into captions that can be used by video.js
+     **/
+
+    var CaptionParser = function () {
+      var isInitialized = false;
+      var captionStream; // Stores segments seen before trackId and timescale are set
+
+      var segmentCache; // Stores video track ID of the track being parsed
+
+      var trackId; // Stores the timescale of the track being parsed
+
+      var timescale; // Stores captions parsed so far
+
+      var parsedCaptions; // Stores whether we are receiving partial data or not
+
+      var parsingPartial;
+      /**
+        * A method to indicate whether a CaptionParser has been initalized
+        * @returns {Boolean}
+       **/
+
+      this.isInitialized = function () {
+        return isInitialized;
+      };
+      /**
+        * Initializes the underlying CaptionStream, SEI NAL parsing
+        * and management, and caption collection
+       **/
+
+      this.init = function (options) {
+        captionStream = new CaptionStream();
+        isInitialized = true;
+        parsingPartial = options ? options.isPartial : false; // Collect dispatched captions
+
+        captionStream.on('data', function (event) {
+          // Convert to seconds in the source's timescale
+          event.startTime = event.startPts / timescale;
+          event.endTime = event.endPts / timescale;
+          parsedCaptions.captions.push(event);
+          parsedCaptions.captionStreams[event.stream] = true;
+        });
+        captionStream.on('log', function (log) {
+          parsedCaptions.logs.push(log);
+        });
+      };
+      /**
+        * Determines if a new video track will be selected
+        * or if the timescale changed
+        * @return {Boolean}
+       **/
+
+      this.isNewInit = function (videoTrackIds, timescales) {
+        if (videoTrackIds && videoTrackIds.length === 0 || timescales && typeof timescales === 'object' && Object.keys(timescales).length === 0) {
+          return false;
+        }
+        return trackId !== videoTrackIds[0] || timescale !== timescales[trackId];
+      };
+      /**
+        * Parses out SEI captions and interacts with underlying
+        * CaptionStream to return dispatched captions
+        *
+        * @param {Uint8Array} segment - The fmp4 segment containing embedded captions
+        * @param {Number[]} videoTrackIds - A list of video tracks found in the init segment
+        * @param {Object.<Number, Number>} timescales - The timescales found in the init segment
+        * @see parseEmbeddedCaptions
+        * @see m2ts/caption-stream.js
+       **/
+
+      this.parse = function (segment, videoTrackIds, timescales) {
+        var parsedData;
+        if (!this.isInitialized()) {
+          return null; // This is not likely to be a video segment
+        } else if (!videoTrackIds || !timescales) {
+          return null;
+        } else if (this.isNewInit(videoTrackIds, timescales)) {
+          // Use the first video track only as there is no
+          // mechanism to switch to other video tracks
+          trackId = videoTrackIds[0];
+          timescale = timescales[trackId]; // If an init segment has not been seen yet, hold onto segment
+          // data until we have one.
+          // the ISO-BMFF spec says that trackId can't be zero, but there's some broken content out there
+        } else if (trackId === null || !timescale) {
+          segmentCache.push(segment);
+          return null;
+        } // Now that a timescale and trackId is set, parse cached segments
+
+        while (segmentCache.length > 0) {
+          var cachedSegment = segmentCache.shift();
+          this.parse(cachedSegment, videoTrackIds, timescales);
+        }
+        parsedData = parseEmbeddedCaptions(segment, trackId, timescale);
+        if (parsedData && parsedData.logs) {
+          parsedCaptions.logs = parsedCaptions.logs.concat(parsedData.logs);
+        }
+        if (parsedData === null || !parsedData.seiNals) {
+          if (parsedCaptions.logs.length) {
+            return {
+              logs: parsedCaptions.logs,
+              captions: [],
+              captionStreams: []
+            };
+          }
+          return null;
+        }
+        this.pushNals(parsedData.seiNals); // Force the parsed captions to be dispatched
+
+        this.flushStream();
+        return parsedCaptions;
+      };
+      /**
+        * Pushes SEI NALUs onto CaptionStream
+        * @param {Object[]} nals - A list of SEI nals parsed using `parseCaptionNals`
+        * Assumes that `parseCaptionNals` has been called first
+        * @see m2ts/caption-stream.js
+        **/
+
+      this.pushNals = function (nals) {
+        if (!this.isInitialized() || !nals || nals.length === 0) {
+          return null;
+        }
+        nals.forEach(function (nal) {
+          captionStream.push(nal);
+        });
+      };
+      /**
+        * Flushes underlying CaptionStream to dispatch processed, displayable captions
+        * @see m2ts/caption-stream.js
+       **/
+
+      this.flushStream = function () {
+        if (!this.isInitialized()) {
+          return null;
+        }
+        if (!parsingPartial) {
+          captionStream.flush();
+        } else {
+          captionStream.partialFlush();
+        }
+      };
+      /**
+        * Reset caption buckets for new data
+       **/
+
+      this.clearParsedCaptions = function () {
+        parsedCaptions.captions = [];
+        parsedCaptions.captionStreams = {};
+        parsedCaptions.logs = [];
+      };
+      /**
+        * Resets underlying CaptionStream
+        * @see m2ts/caption-stream.js
+       **/
+
+      this.resetCaptionStream = function () {
+        if (!this.isInitialized()) {
+          return null;
+        }
+        captionStream.reset();
+      };
+      /**
+        * Convenience method to clear all captions flushed from the
+        * CaptionStream and still being parsed
+        * @see m2ts/caption-stream.js
+       **/
+
+      this.clearAllCaptions = function () {
+        this.clearParsedCaptions();
+        this.resetCaptionStream();
+      };
+      /**
+        * Reset caption parser
+       **/
+
+      this.reset = function () {
+        segmentCache = [];
+        trackId = null;
+        timescale = null;
+        if (!parsedCaptions) {
+          parsedCaptions = {
+            captions: [],
+            // CC1, CC2, CC3, CC4
+            captionStreams: {},
+            logs: []
+          };
+        } else {
+          this.clearParsedCaptions();
+        }
+        this.resetCaptionStream();
+      };
+      this.reset();
+    };
+    var captionParser = CaptionParser;
+    /**
+     * Returns the first string in the data array ending with a null char '\0'
+     * @param {UInt8} data 
+     * @returns the string with the null char
+     */
+
+    var uint8ToCString$1 = function (data) {
+      var index = 0;
+      var curChar = String.fromCharCode(data[index]);
+      var retString = '';
+      while (curChar !== '\0') {
+        retString += curChar;
+        index++;
+        curChar = String.fromCharCode(data[index]);
+      } // Add nullChar
+
+      retString += curChar;
+      return retString;
+    };
+    var string = {
+      uint8ToCString: uint8ToCString$1
+    };
+    var uint8ToCString = string.uint8ToCString;
+    var getUint64$1 = numbers.getUint64;
+    /**
+     * Based on: ISO/IEC 23009 Section: 5.10.3.3
+     * References:
+     * https://dashif-documents.azurewebsites.net/Events/master/event.html#emsg-format
+     * https://aomediacodec.github.io/id3-emsg/
+     * 
+     * Takes emsg box data as a uint8 array and returns a emsg box object
+     * @param {UInt8Array} boxData data from emsg box
+     * @returns A parsed emsg box object
+     */
+
+    var parseEmsgBox = function (boxData) {
+      // version + flags
+      var offset = 4;
+      var version = boxData[0];
+      var scheme_id_uri, value, timescale, presentation_time, presentation_time_delta, event_duration, id, message_data;
+      if (version === 0) {
+        scheme_id_uri = uint8ToCString(boxData.subarray(offset));
+        offset += scheme_id_uri.length;
+        value = uint8ToCString(boxData.subarray(offset));
+        offset += value.length;
+        var dv = new DataView(boxData.buffer);
+        timescale = dv.getUint32(offset);
+        offset += 4;
+        presentation_time_delta = dv.getUint32(offset);
+        offset += 4;
+        event_duration = dv.getUint32(offset);
+        offset += 4;
+        id = dv.getUint32(offset);
+        offset += 4;
+      } else if (version === 1) {
+        var dv = new DataView(boxData.buffer);
+        timescale = dv.getUint32(offset);
+        offset += 4;
+        presentation_time = getUint64$1(boxData.subarray(offset));
+        offset += 8;
+        event_duration = dv.getUint32(offset);
+        offset += 4;
+        id = dv.getUint32(offset);
+        offset += 4;
+        scheme_id_uri = uint8ToCString(boxData.subarray(offset));
+        offset += scheme_id_uri.length;
+        value = uint8ToCString(boxData.subarray(offset));
+        offset += value.length;
+      }
+      message_data = new Uint8Array(boxData.subarray(offset, boxData.byteLength));
+      var emsgBox = {
+        scheme_id_uri,
+        value,
+        // if timescale is undefined or 0 set to 1 
+        timescale: timescale ? timescale : 1,
+        presentation_time,
+        presentation_time_delta,
+        event_duration,
+        id,
+        message_data
+      };
+      return isValidEmsgBox(version, emsgBox) ? emsgBox : undefined;
+    };
+    /**
+     * Scales a presentation time or time delta with an offset with a provided timescale
+     * @param {number} presentationTime 
+     * @param {number} timescale 
+     * @param {number} timeDelta 
+     * @param {number} offset 
+     * @returns the scaled time as a number
+     */
+
+    var scaleTime = function (presentationTime, timescale, timeDelta, offset) {
+      return presentationTime || presentationTime === 0 ? presentationTime / timescale : offset + timeDelta / timescale;
+    };
+    /**
+     * Checks the emsg box data for validity based on the version
+     * @param {number} version of the emsg box to validate
+     * @param {Object} emsg the emsg data to validate
+     * @returns if the box is valid as a boolean
+     */
+
+    var isValidEmsgBox = function (version, emsg) {
+      var hasScheme = emsg.scheme_id_uri !== '\0';
+      var isValidV0Box = version === 0 && isDefined(emsg.presentation_time_delta) && hasScheme;
+      var isValidV1Box = version === 1 && isDefined(emsg.presentation_time) && hasScheme; // Only valid versions of emsg are 0 and 1
+
+      return !(version > 1) && isValidV0Box || isValidV1Box;
+    }; // Utility function to check if an object is defined
+
+    var isDefined = function (data) {
+      return data !== undefined || data !== null;
+    };
+    var emsg$1 = {
+      parseEmsgBox: parseEmsgBox,
+      scaleTime: scaleTime
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Utilities to detect basic properties and metadata about MP4s.
+     */
+
+    var toUnsigned = bin.toUnsigned;
+    var toHexString = bin.toHexString;
+    var findBox = findBox_1;
+    var parseType$1 = parseType_1;
+    var emsg = emsg$1;
+    var parseTfhd = parseTfhd$2;
+    var parseTrun = parseTrun$2;
+    var parseTfdt = parseTfdt$2;
+    var getUint64 = numbers.getUint64;
+    var timescale, startTime, compositionStartTime, getVideoTrackIds, getTracks, getTimescaleFromMediaHeader, getEmsgID3;
+    var window$1 = window_1;
+    var parseId3Frames = parseId3.parseId3Frames;
+    /**
+     * Parses an MP4 initialization segment and extracts the timescale
+     * values for any declared tracks. Timescale values indicate the
+     * number of clock ticks per second to assume for time-based values
+     * elsewhere in the MP4.
+     *
+     * To determine the start time of an MP4, you need two pieces of
+     * information: the timescale unit and the earliest base media decode
+     * time. Multiple timescales can be specified within an MP4 but the
+     * base media decode time is always expressed in the timescale from
+     * the media header box for the track:
+     * ```
+     * moov > trak > mdia > mdhd.timescale
+     * ```
+     * @param init {Uint8Array} the bytes of the init segment
+     * @return {object} a hash of track ids to timescale values or null if
+     * the init segment is malformed.
+     */
+
+    timescale = function (init) {
+      var result = {},
+        traks = findBox(init, ['moov', 'trak']); // mdhd timescale
+
+      return traks.reduce(function (result, trak) {
+        var tkhd, version, index, id, mdhd;
+        tkhd = findBox(trak, ['tkhd'])[0];
+        if (!tkhd) {
+          return null;
+        }
+        version = tkhd[0];
+        index = version === 0 ? 12 : 20;
+        id = toUnsigned(tkhd[index] << 24 | tkhd[index + 1] << 16 | tkhd[index + 2] << 8 | tkhd[index + 3]);
+        mdhd = findBox(trak, ['mdia', 'mdhd'])[0];
+        if (!mdhd) {
+          return null;
+        }
+        version = mdhd[0];
+        index = version === 0 ? 12 : 20;
+        result[id] = toUnsigned(mdhd[index] << 24 | mdhd[index + 1] << 16 | mdhd[index + 2] << 8 | mdhd[index + 3]);
+        return result;
+      }, result);
+    };
+    /**
+     * Determine the base media decode start time, in seconds, for an MP4
+     * fragment. If multiple fragments are specified, the earliest time is
+     * returned.
+     *
+     * The base media decode time can be parsed from track fragment
+     * metadata:
+     * ```
+     * moof > traf > tfdt.baseMediaDecodeTime
+     * ```
+     * It requires the timescale value from the mdhd to interpret.
+     *
+     * @param timescale {object} a hash of track ids to timescale values.
+     * @return {number} the earliest base media decode start time for the
+     * fragment, in seconds
+     */
+
+    startTime = function (timescale, fragment) {
+      var trafs; // we need info from two childrend of each track fragment box
+
+      trafs = findBox(fragment, ['moof', 'traf']); // determine the start times for each track
+
+      var lowestTime = trafs.reduce(function (acc, traf) {
+        var tfhd = findBox(traf, ['tfhd'])[0]; // get the track id from the tfhd
+
+        var id = toUnsigned(tfhd[4] << 24 | tfhd[5] << 16 | tfhd[6] << 8 | tfhd[7]); // assume a 90kHz clock if no timescale was specified
+
+        var scale = timescale[id] || 90e3; // get the base media decode time from the tfdt
+
+        var tfdt = findBox(traf, ['tfdt'])[0];
+        var dv = new DataView(tfdt.buffer, tfdt.byteOffset, tfdt.byteLength);
+        var baseTime; // version 1 is 64 bit
+
+        if (tfdt[0] === 1) {
+          baseTime = getUint64(tfdt.subarray(4, 12));
+        } else {
+          baseTime = dv.getUint32(4);
+        } // convert base time to seconds if it is a valid number.
+
+        let seconds;
+        if (typeof baseTime === 'bigint') {
+          seconds = baseTime / window$1.BigInt(scale);
+        } else if (typeof baseTime === 'number' && !isNaN(baseTime)) {
+          seconds = baseTime / scale;
+        }
+        if (seconds < Number.MAX_SAFE_INTEGER) {
+          seconds = Number(seconds);
+        }
+        if (seconds < acc) {
+          acc = seconds;
+        }
+        return acc;
+      }, Infinity);
+      return typeof lowestTime === 'bigint' || isFinite(lowestTime) ? lowestTime : 0;
+    };
+    /**
+     * Determine the composition start, in seconds, for an MP4
+     * fragment.
+     *
+     * The composition start time of a fragment can be calculated using the base
+     * media decode time, composition time offset, and timescale, as follows:
+     *
+     * compositionStartTime = (baseMediaDecodeTime + compositionTimeOffset) / timescale
+     *
+     * All of the aforementioned information is contained within a media fragment's
+     * `traf` box, except for timescale info, which comes from the initialization
+     * segment, so a track id (also contained within a `traf`) is also necessary to
+     * associate it with a timescale
+     *
+     *
+     * @param timescales {object} - a hash of track ids to timescale values.
+     * @param fragment {Unit8Array} - the bytes of a media segment
+     * @return {number} the composition start time for the fragment, in seconds
+     **/
+
+    compositionStartTime = function (timescales, fragment) {
+      var trafBoxes = findBox(fragment, ['moof', 'traf']);
+      var baseMediaDecodeTime = 0;
+      var compositionTimeOffset = 0;
+      var trackId;
+      if (trafBoxes && trafBoxes.length) {
+        // The spec states that track run samples contained within a `traf` box are contiguous, but
+        // it does not explicitly state whether the `traf` boxes themselves are contiguous.
+        // We will assume that they are, so we only need the first to calculate start time.
+        var tfhd = findBox(trafBoxes[0], ['tfhd'])[0];
+        var trun = findBox(trafBoxes[0], ['trun'])[0];
+        var tfdt = findBox(trafBoxes[0], ['tfdt'])[0];
+        if (tfhd) {
+          var parsedTfhd = parseTfhd(tfhd);
+          trackId = parsedTfhd.trackId;
+        }
+        if (tfdt) {
+          var parsedTfdt = parseTfdt(tfdt);
+          baseMediaDecodeTime = parsedTfdt.baseMediaDecodeTime;
+        }
+        if (trun) {
+          var parsedTrun = parseTrun(trun);
+          if (parsedTrun.samples && parsedTrun.samples.length) {
+            compositionTimeOffset = parsedTrun.samples[0].compositionTimeOffset || 0;
+          }
+        }
+      } // Get timescale for this specific track. Assume a 90kHz clock if no timescale was
+      // specified.
+
+      var timescale = timescales[trackId] || 90e3; // return the composition start time, in seconds
+
+      if (typeof baseMediaDecodeTime === 'bigint') {
+        compositionTimeOffset = window$1.BigInt(compositionTimeOffset);
+        timescale = window$1.BigInt(timescale);
+      }
+      var result = (baseMediaDecodeTime + compositionTimeOffset) / timescale;
+      if (typeof result === 'bigint' && result < Number.MAX_SAFE_INTEGER) {
+        result = Number(result);
+      }
+      return result;
+    };
+    /**
+      * Find the trackIds of the video tracks in this source.
+      * Found by parsing the Handler Reference and Track Header Boxes:
+      *   moov > trak > mdia > hdlr
+      *   moov > trak > tkhd
+      *
+      * @param {Uint8Array} init - The bytes of the init segment for this source
+      * @return {Number[]} A list of trackIds
+      *
+      * @see ISO-BMFF-12/2015, Section 8.4.3
+     **/
+
+    getVideoTrackIds = function (init) {
+      var traks = findBox(init, ['moov', 'trak']);
+      var videoTrackIds = [];
+      traks.forEach(function (trak) {
+        var hdlrs = findBox(trak, ['mdia', 'hdlr']);
+        var tkhds = findBox(trak, ['tkhd']);
+        hdlrs.forEach(function (hdlr, index) {
+          var handlerType = parseType$1(hdlr.subarray(8, 12));
+          var tkhd = tkhds[index];
+          var view;
+          var version;
+          var trackId;
+          if (handlerType === 'vide') {
+            view = new DataView(tkhd.buffer, tkhd.byteOffset, tkhd.byteLength);
+            version = view.getUint8(0);
+            trackId = version === 0 ? view.getUint32(12) : view.getUint32(20);
+            videoTrackIds.push(trackId);
+          }
+        });
+      });
+      return videoTrackIds;
+    };
+    getTimescaleFromMediaHeader = function (mdhd) {
+      // mdhd is a FullBox, meaning it will have its own version as the first byte
+      var version = mdhd[0];
+      var index = version === 0 ? 12 : 20;
+      return toUnsigned(mdhd[index] << 24 | mdhd[index + 1] << 16 | mdhd[index + 2] << 8 | mdhd[index + 3]);
+    };
+    /**
+     * Get all the video, audio, and hint tracks from a non fragmented
+     * mp4 segment
+     */
+
+    getTracks = function (init) {
+      var traks = findBox(init, ['moov', 'trak']);
+      var tracks = [];
+      traks.forEach(function (trak) {
+        var track = {};
+        var tkhd = findBox(trak, ['tkhd'])[0];
+        var view, tkhdVersion; // id
+
+        if (tkhd) {
+          view = new DataView(tkhd.buffer, tkhd.byteOffset, tkhd.byteLength);
+          tkhdVersion = view.getUint8(0);
+          track.id = tkhdVersion === 0 ? view.getUint32(12) : view.getUint32(20);
+        }
+        var hdlr = findBox(trak, ['mdia', 'hdlr'])[0]; // type
+
+        if (hdlr) {
+          var type = parseType$1(hdlr.subarray(8, 12));
+          if (type === 'vide') {
+            track.type = 'video';
+          } else if (type === 'soun') {
+            track.type = 'audio';
+          } else {
+            track.type = type;
+          }
+        } // codec
+
+        var stsd = findBox(trak, ['mdia', 'minf', 'stbl', 'stsd'])[0];
+        if (stsd) {
+          var sampleDescriptions = stsd.subarray(8); // gives the codec type string
+
+          track.codec = parseType$1(sampleDescriptions.subarray(4, 8));
+          var codecBox = findBox(sampleDescriptions, [track.codec])[0];
+          var codecConfig, codecConfigType;
+          if (codecBox) {
+            // https://tools.ietf.org/html/rfc6381#section-3.3
+            if (/^[asm]vc[1-9]$/i.test(track.codec)) {
+              // we don't need anything but the "config" parameter of the
+              // avc1 codecBox
+              codecConfig = codecBox.subarray(78);
+              codecConfigType = parseType$1(codecConfig.subarray(4, 8));
+              if (codecConfigType === 'avcC' && codecConfig.length > 11) {
+                track.codec += '.'; // left padded with zeroes for single digit hex
+                // profile idc
+
+                track.codec += toHexString(codecConfig[9]); // the byte containing the constraint_set flags
+
+                track.codec += toHexString(codecConfig[10]); // level idc
+
+                track.codec += toHexString(codecConfig[11]);
+              } else {
+                // TODO: show a warning that we couldn't parse the codec
+                // and are using the default
+                track.codec = 'avc1.4d400d';
+              }
+            } else if (/^mp4[a,v]$/i.test(track.codec)) {
+              // we do not need anything but the streamDescriptor of the mp4a codecBox
+              codecConfig = codecBox.subarray(28);
+              codecConfigType = parseType$1(codecConfig.subarray(4, 8));
+              if (codecConfigType === 'esds' && codecConfig.length > 20 && codecConfig[19] !== 0) {
+                track.codec += '.' + toHexString(codecConfig[19]); // this value is only a single digit
+
+                track.codec += '.' + toHexString(codecConfig[20] >>> 2 & 0x3f).replace(/^0/, '');
+              } else {
+                // TODO: show a warning that we couldn't parse the codec
+                // and are using the default
+                track.codec = 'mp4a.40.2';
+              }
+            } else {
+              // flac, opus, etc
+              track.codec = track.codec.toLowerCase();
+            }
+          }
+        }
+        var mdhd = findBox(trak, ['mdia', 'mdhd'])[0];
+        if (mdhd) {
+          track.timescale = getTimescaleFromMediaHeader(mdhd);
+        }
+        tracks.push(track);
+      });
+      return tracks;
+    };
+    /**
+     * Returns an array of emsg ID3 data from the provided segmentData.
+     * An offset can also be provided as the Latest Arrival Time to calculate 
+     * the Event Start Time of v0 EMSG boxes. 
+     * See: https://dashif-documents.azurewebsites.net/Events/master/event.html#Inband-event-timing
+     * 
+     * @param {Uint8Array} segmentData the segment byte array.
+     * @param {number} offset the segment start time or Latest Arrival Time, 
+     * @return {Object[]} an array of ID3 parsed from EMSG boxes
+     */
+
+    getEmsgID3 = function (segmentData, offset = 0) {
+      var emsgBoxes = findBox(segmentData, ['emsg']);
+      return emsgBoxes.map(data => {
+        var parsedBox = emsg.parseEmsgBox(new Uint8Array(data));
+        var parsedId3Frames = parseId3Frames(parsedBox.message_data);
+        return {
+          cueTime: emsg.scaleTime(parsedBox.presentation_time, parsedBox.timescale, parsedBox.presentation_time_delta, offset),
+          duration: emsg.scaleTime(parsedBox.event_duration, parsedBox.timescale),
+          frames: parsedId3Frames
+        };
+      });
+    };
+    var probe$2 = {
+      // export mp4 inspector's findBox and parseType for backwards compatibility
+      findBox: findBox,
+      parseType: parseType$1,
+      timescale: timescale,
+      startTime: startTime,
+      compositionStartTime: compositionStartTime,
+      videoTrackIds: getVideoTrackIds,
+      tracks: getTracks,
+      getTimescaleFromMediaHeader: getTimescaleFromMediaHeader,
+      getEmsgID3: getEmsgID3
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Utilities to detect basic properties and metadata about TS Segments.
+     */
+
+    var StreamTypes$1 = streamTypes;
+    var parsePid = function (packet) {
+      var pid = packet[1] & 0x1f;
+      pid <<= 8;
+      pid |= packet[2];
+      return pid;
+    };
+    var parsePayloadUnitStartIndicator = function (packet) {
+      return !!(packet[1] & 0x40);
+    };
+    var parseAdaptionField = function (packet) {
+      var offset = 0; // if an adaption field is present, its length is specified by the
+      // fifth byte of the TS packet header. The adaptation field is
+      // used to add stuffing to PES packets that don't fill a complete
+      // TS packet, and to specify some forms of timing and control data
+      // that we do not currently use.
+
+      if ((packet[3] & 0x30) >>> 4 > 0x01) {
+        offset += packet[4] + 1;
+      }
+      return offset;
+    };
+    var parseType = function (packet, pmtPid) {
+      var pid = parsePid(packet);
+      if (pid === 0) {
+        return 'pat';
+      } else if (pid === pmtPid) {
+        return 'pmt';
+      } else if (pmtPid) {
+        return 'pes';
+      }
+      return null;
+    };
+    var parsePat = function (packet) {
+      var pusi = parsePayloadUnitStartIndicator(packet);
+      var offset = 4 + parseAdaptionField(packet);
+      if (pusi) {
+        offset += packet[offset] + 1;
+      }
+      return (packet[offset + 10] & 0x1f) << 8 | packet[offset + 11];
+    };
+    var parsePmt = function (packet) {
+      var programMapTable = {};
+      var pusi = parsePayloadUnitStartIndicator(packet);
+      var payloadOffset = 4 + parseAdaptionField(packet);
+      if (pusi) {
+        payloadOffset += packet[payloadOffset] + 1;
+      } // PMTs can be sent ahead of the time when they should actually
+      // take effect. We don't believe this should ever be the case
+      // for HLS but we'll ignore "forward" PMT declarations if we see
+      // them. Future PMT declarations have the current_next_indicator
+      // set to zero.
+
+      if (!(packet[payloadOffset + 5] & 0x01)) {
+        return;
+      }
+      var sectionLength, tableEnd, programInfoLength; // the mapping table ends at the end of the current section
+
+      sectionLength = (packet[payloadOffset + 1] & 0x0f) << 8 | packet[payloadOffset + 2];
+      tableEnd = 3 + sectionLength - 4; // to determine where the table is, we have to figure out how
+      // long the program info descriptors are
+
+      programInfoLength = (packet[payloadOffset + 10] & 0x0f) << 8 | packet[payloadOffset + 11]; // advance the offset to the first entry in the mapping table
+
+      var offset = 12 + programInfoLength;
+      while (offset < tableEnd) {
+        var i = payloadOffset + offset; // add an entry that maps the elementary_pid to the stream_type
+
+        programMapTable[(packet[i + 1] & 0x1F) << 8 | packet[i + 2]] = packet[i]; // move to the next table entry
+        // skip past the elementary stream descriptors, if present
+
+        offset += ((packet[i + 3] & 0x0F) << 8 | packet[i + 4]) + 5;
+      }
+      return programMapTable;
+    };
+    var parsePesType = function (packet, programMapTable) {
+      var pid = parsePid(packet);
+      var type = programMapTable[pid];
+      switch (type) {
+        case StreamTypes$1.H264_STREAM_TYPE:
+          return 'video';
+        case StreamTypes$1.ADTS_STREAM_TYPE:
+          return 'audio';
+        case StreamTypes$1.METADATA_STREAM_TYPE:
+          return 'timed-metadata';
+        default:
+          return null;
+      }
+    };
+    var parsePesTime = function (packet) {
+      var pusi = parsePayloadUnitStartIndicator(packet);
+      if (!pusi) {
+        return null;
+      }
+      var offset = 4 + parseAdaptionField(packet);
+      if (offset >= packet.byteLength) {
+        // From the H 222.0 MPEG-TS spec
+        // "For transport stream packets carrying PES packets, stuffing is needed when there
+        //  is insufficient PES packet data to completely fill the transport stream packet
+        //  payload bytes. Stuffing is accomplished by defining an adaptation field longer than
+        //  the sum of the lengths of the data elements in it, so that the payload bytes
+        //  remaining after the adaptation field exactly accommodates the available PES packet
+        //  data."
+        //
+        // If the offset is >= the length of the packet, then the packet contains no data
+        // and instead is just adaption field stuffing bytes
+        return null;
+      }
+      var pes = null;
+      var ptsDtsFlags; // PES packets may be annotated with a PTS value, or a PTS value
+      // and a DTS value. Determine what combination of values is
+      // available to work with.
+
+      ptsDtsFlags = packet[offset + 7]; // PTS and DTS are normally stored as a 33-bit number.  Javascript
+      // performs all bitwise operations on 32-bit integers but javascript
+      // supports a much greater range (52-bits) of integer using standard
+      // mathematical operations.
+      // We construct a 31-bit value using bitwise operators over the 31
+      // most significant bits and then multiply by 4 (equal to a left-shift
+      // of 2) before we add the final 2 least significant bits of the
+      // timestamp (equal to an OR.)
+
+      if (ptsDtsFlags & 0xC0) {
+        pes = {}; // the PTS and DTS are not written out directly. For information
+        // on how they are encoded, see
+        // http://dvd.sourceforge.net/dvdinfo/pes-hdr.html
+
+        pes.pts = (packet[offset + 9] & 0x0E) << 27 | (packet[offset + 10] & 0xFF) << 20 | (packet[offset + 11] & 0xFE) << 12 | (packet[offset + 12] & 0xFF) << 5 | (packet[offset + 13] & 0xFE) >>> 3;
+        pes.pts *= 4; // Left shift by 2
+
+        pes.pts += (packet[offset + 13] & 0x06) >>> 1; // OR by the two LSBs
+
+        pes.dts = pes.pts;
+        if (ptsDtsFlags & 0x40) {
+          pes.dts = (packet[offset + 14] & 0x0E) << 27 | (packet[offset + 15] & 0xFF) << 20 | (packet[offset + 16] & 0xFE) << 12 | (packet[offset + 17] & 0xFF) << 5 | (packet[offset + 18] & 0xFE) >>> 3;
+          pes.dts *= 4; // Left shift by 2
+
+          pes.dts += (packet[offset + 18] & 0x06) >>> 1; // OR by the two LSBs
+        }
+      }
+
+      return pes;
+    };
+    var parseNalUnitType = function (type) {
+      switch (type) {
+        case 0x05:
+          return 'slice_layer_without_partitioning_rbsp_idr';
+        case 0x06:
+          return 'sei_rbsp';
+        case 0x07:
+          return 'seq_parameter_set_rbsp';
+        case 0x08:
+          return 'pic_parameter_set_rbsp';
+        case 0x09:
+          return 'access_unit_delimiter_rbsp';
+        default:
+          return null;
+      }
+    };
+    var videoPacketContainsKeyFrame = function (packet) {
+      var offset = 4 + parseAdaptionField(packet);
+      var frameBuffer = packet.subarray(offset);
+      var frameI = 0;
+      var frameSyncPoint = 0;
+      var foundKeyFrame = false;
+      var nalType; // advance the sync point to a NAL start, if necessary
+
+      for (; frameSyncPoint < frameBuffer.byteLength - 3; frameSyncPoint++) {
+        if (frameBuffer[frameSyncPoint + 2] === 1) {
+          // the sync point is properly aligned
+          frameI = frameSyncPoint + 5;
+          break;
+        }
+      }
+      while (frameI < frameBuffer.byteLength) {
+        // look at the current byte to determine if we've hit the end of
+        // a NAL unit boundary
+        switch (frameBuffer[frameI]) {
+          case 0:
+            // skip past non-sync sequences
+            if (frameBuffer[frameI - 1] !== 0) {
+              frameI += 2;
+              break;
+            } else if (frameBuffer[frameI - 2] !== 0) {
+              frameI++;
+              break;
+            }
+            if (frameSyncPoint + 3 !== frameI - 2) {
+              nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+              if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+                foundKeyFrame = true;
+              }
+            } // drop trailing zeroes
+
+            do {
+              frameI++;
+            } while (frameBuffer[frameI] !== 1 && frameI < frameBuffer.length);
+            frameSyncPoint = frameI - 2;
+            frameI += 3;
+            break;
+          case 1:
+            // skip past non-sync sequences
+            if (frameBuffer[frameI - 1] !== 0 || frameBuffer[frameI - 2] !== 0) {
+              frameI += 3;
+              break;
+            }
+            nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+            if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+              foundKeyFrame = true;
+            }
+            frameSyncPoint = frameI - 2;
+            frameI += 3;
+            break;
+          default:
+            // the current byte isn't a one or zero, so it cannot be part
+            // of a sync sequence
+            frameI += 3;
+            break;
+        }
+      }
+      frameBuffer = frameBuffer.subarray(frameSyncPoint);
+      frameI -= frameSyncPoint;
+      frameSyncPoint = 0; // parse the final nal
+
+      if (frameBuffer && frameBuffer.byteLength > 3) {
+        nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+        if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+          foundKeyFrame = true;
+        }
+      }
+      return foundKeyFrame;
+    };
+    var probe$1 = {
+      parseType: parseType,
+      parsePat: parsePat,
+      parsePmt: parsePmt,
+      parsePayloadUnitStartIndicator: parsePayloadUnitStartIndicator,
+      parsePesType: parsePesType,
+      parsePesTime: parsePesTime,
+      videoPacketContainsKeyFrame: videoPacketContainsKeyFrame
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Parse mpeg2 transport stream packets to extract basic timing information
+     */
+
+    var StreamTypes = streamTypes;
+    var handleRollover = timestampRolloverStream.handleRollover;
+    var probe = {};
+    probe.ts = probe$1;
+    probe.aac = utils;
+    var ONE_SECOND_IN_TS = clock$2.ONE_SECOND_IN_TS;
+    var MP2T_PACKET_LENGTH = 188,
+      // bytes
+      SYNC_BYTE = 0x47;
+    /**
+     * walks through segment data looking for pat and pmt packets to parse out
+     * program map table information
+     */
+
+    var parsePsi_ = function (bytes, pmt) {
+      var startIndex = 0,
+        endIndex = MP2T_PACKET_LENGTH,
+        packet,
+        type;
+      while (endIndex < bytes.byteLength) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pat':
+              pmt.pid = probe.ts.parsePat(packet);
+              break;
+            case 'pmt':
+              var table = probe.ts.parsePmt(packet);
+              pmt.table = pmt.table || {};
+              Object.keys(table).forEach(function (key) {
+                pmt.table[key] = table[key];
+              });
+              break;
+          }
+          startIndex += MP2T_PACKET_LENGTH;
+          endIndex += MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex++;
+        endIndex++;
+      }
+    };
+    /**
+     * walks through the segment data from the start and end to get timing information
+     * for the first and last audio pes packets
+     */
+
+    var parseAudioPes_ = function (bytes, pmt, result) {
+      var startIndex = 0,
+        endIndex = MP2T_PACKET_LENGTH,
+        packet,
+        type,
+        pesType,
+        pusi,
+        parsed;
+      var endLoop = false; // Start walking from start of segment to get first audio packet
+
+      while (endIndex <= bytes.byteLength) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && (bytes[endIndex] === SYNC_BYTE || endIndex === bytes.byteLength)) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pes':
+              pesType = probe.ts.parsePesType(packet, pmt.table);
+              pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+              if (pesType === 'audio' && pusi) {
+                parsed = probe.ts.parsePesTime(packet);
+                if (parsed) {
+                  parsed.type = 'audio';
+                  result.audio.push(parsed);
+                  endLoop = true;
+                }
+              }
+              break;
+          }
+          if (endLoop) {
+            break;
+          }
+          startIndex += MP2T_PACKET_LENGTH;
+          endIndex += MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex++;
+        endIndex++;
+      } // Start walking from end of segment to get last audio packet
+
+      endIndex = bytes.byteLength;
+      startIndex = endIndex - MP2T_PACKET_LENGTH;
+      endLoop = false;
+      while (startIndex >= 0) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && (bytes[endIndex] === SYNC_BYTE || endIndex === bytes.byteLength)) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pes':
+              pesType = probe.ts.parsePesType(packet, pmt.table);
+              pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+              if (pesType === 'audio' && pusi) {
+                parsed = probe.ts.parsePesTime(packet);
+                if (parsed) {
+                  parsed.type = 'audio';
+                  result.audio.push(parsed);
+                  endLoop = true;
+                }
+              }
+              break;
+          }
+          if (endLoop) {
+            break;
+          }
+          startIndex -= MP2T_PACKET_LENGTH;
+          endIndex -= MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex--;
+        endIndex--;
+      }
+    };
+    /**
+     * walks through the segment data from the start and end to get timing information
+     * for the first and last video pes packets as well as timing information for the first
+     * key frame.
+     */
+
+    var parseVideoPes_ = function (bytes, pmt, result) {
+      var startIndex = 0,
+        endIndex = MP2T_PACKET_LENGTH,
+        packet,
+        type,
+        pesType,
+        pusi,
+        parsed,
+        frame,
+        i,
+        pes;
+      var endLoop = false;
+      var currentFrame = {
+        data: [],
+        size: 0
+      }; // Start walking from start of segment to get first video packet
+
+      while (endIndex < bytes.byteLength) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pes':
+              pesType = probe.ts.parsePesType(packet, pmt.table);
+              pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+              if (pesType === 'video') {
+                if (pusi && !endLoop) {
+                  parsed = probe.ts.parsePesTime(packet);
+                  if (parsed) {
+                    parsed.type = 'video';
+                    result.video.push(parsed);
+                    endLoop = true;
+                  }
+                }
+                if (!result.firstKeyFrame) {
+                  if (pusi) {
+                    if (currentFrame.size !== 0) {
+                      frame = new Uint8Array(currentFrame.size);
+                      i = 0;
+                      while (currentFrame.data.length) {
+                        pes = currentFrame.data.shift();
+                        frame.set(pes, i);
+                        i += pes.byteLength;
+                      }
+                      if (probe.ts.videoPacketContainsKeyFrame(frame)) {
+                        var firstKeyFrame = probe.ts.parsePesTime(frame); // PTS/DTS may not be available. Simply *not* setting
+                        // the keyframe seems to work fine with HLS playback
+                        // and definitely preferable to a crash with TypeError...
+
+                        if (firstKeyFrame) {
+                          result.firstKeyFrame = firstKeyFrame;
+                          result.firstKeyFrame.type = 'video';
+                        } else {
+                          // eslint-disable-next-line
+                          console.warn('Failed to extract PTS/DTS from PES at first keyframe. ' + 'This could be an unusual TS segment, or else mux.js did not ' + 'parse your TS segment correctly. If you know your TS ' + 'segments do contain PTS/DTS on keyframes please file a bug ' + 'report! You can try ffprobe to double check for yourself.');
+                        }
+                      }
+                      currentFrame.size = 0;
+                    }
+                  }
+                  currentFrame.data.push(packet);
+                  currentFrame.size += packet.byteLength;
+                }
+              }
+              break;
+          }
+          if (endLoop && result.firstKeyFrame) {
+            break;
+          }
+          startIndex += MP2T_PACKET_LENGTH;
+          endIndex += MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex++;
+        endIndex++;
+      } // Start walking from end of segment to get last video packet
+
+      endIndex = bytes.byteLength;
+      startIndex = endIndex - MP2T_PACKET_LENGTH;
+      endLoop = false;
+      while (startIndex >= 0) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pes':
+              pesType = probe.ts.parsePesType(packet, pmt.table);
+              pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+              if (pesType === 'video' && pusi) {
+                parsed = probe.ts.parsePesTime(packet);
+                if (parsed) {
+                  parsed.type = 'video';
+                  result.video.push(parsed);
+                  endLoop = true;
+                }
+              }
+              break;
+          }
+          if (endLoop) {
+            break;
+          }
+          startIndex -= MP2T_PACKET_LENGTH;
+          endIndex -= MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex--;
+        endIndex--;
+      }
+    };
+    /**
+     * Adjusts the timestamp information for the segment to account for
+     * rollover and convert to seconds based on pes packet timescale (90khz clock)
+     */
+
+    var adjustTimestamp_ = function (segmentInfo, baseTimestamp) {
+      if (segmentInfo.audio && segmentInfo.audio.length) {
+        var audioBaseTimestamp = baseTimestamp;
+        if (typeof audioBaseTimestamp === 'undefined' || isNaN(audioBaseTimestamp)) {
+          audioBaseTimestamp = segmentInfo.audio[0].dts;
+        }
+        segmentInfo.audio.forEach(function (info) {
+          info.dts = handleRollover(info.dts, audioBaseTimestamp);
+          info.pts = handleRollover(info.pts, audioBaseTimestamp); // time in seconds
+
+          info.dtsTime = info.dts / ONE_SECOND_IN_TS;
+          info.ptsTime = info.pts / ONE_SECOND_IN_TS;
+        });
+      }
+      if (segmentInfo.video && segmentInfo.video.length) {
+        var videoBaseTimestamp = baseTimestamp;
+        if (typeof videoBaseTimestamp === 'undefined' || isNaN(videoBaseTimestamp)) {
+          videoBaseTimestamp = segmentInfo.video[0].dts;
+        }
+        segmentInfo.video.forEach(function (info) {
+          info.dts = handleRollover(info.dts, videoBaseTimestamp);
+          info.pts = handleRollover(info.pts, videoBaseTimestamp); // time in seconds
+
+          info.dtsTime = info.dts / ONE_SECOND_IN_TS;
+          info.ptsTime = info.pts / ONE_SECOND_IN_TS;
+        });
+        if (segmentInfo.firstKeyFrame) {
+          var frame = segmentInfo.firstKeyFrame;
+          frame.dts = handleRollover(frame.dts, videoBaseTimestamp);
+          frame.pts = handleRollover(frame.pts, videoBaseTimestamp); // time in seconds
+
+          frame.dtsTime = frame.dts / ONE_SECOND_IN_TS;
+          frame.ptsTime = frame.pts / ONE_SECOND_IN_TS;
+        }
+      }
+    };
+    /**
+     * inspects the aac data stream for start and end time information
+     */
+
+    var inspectAac_ = function (bytes) {
+      var endLoop = false,
+        audioCount = 0,
+        sampleRate = null,
+        timestamp = null,
+        frameSize = 0,
+        byteIndex = 0,
+        packet;
+      while (bytes.length - byteIndex >= 3) {
+        var type = probe.aac.parseType(bytes, byteIndex);
+        switch (type) {
+          case 'timed-metadata':
+            // Exit early because we don't have enough to parse
+            // the ID3 tag header
+            if (bytes.length - byteIndex < 10) {
+              endLoop = true;
+              break;
+            }
+            frameSize = probe.aac.parseId3TagSize(bytes, byteIndex); // Exit early if we don't have enough in the buffer
+            // to emit a full packet
+
+            if (frameSize > bytes.length) {
+              endLoop = true;
+              break;
+            }
+            if (timestamp === null) {
+              packet = bytes.subarray(byteIndex, byteIndex + frameSize);
+              timestamp = probe.aac.parseAacTimestamp(packet);
+            }
+            byteIndex += frameSize;
+            break;
+          case 'audio':
+            // Exit early because we don't have enough to parse
+            // the ADTS frame header
+            if (bytes.length - byteIndex < 7) {
+              endLoop = true;
+              break;
+            }
+            frameSize = probe.aac.parseAdtsSize(bytes, byteIndex); // Exit early if we don't have enough in the buffer
+            // to emit a full packet
+
+            if (frameSize > bytes.length) {
+              endLoop = true;
+              break;
+            }
+            if (sampleRate === null) {
+              packet = bytes.subarray(byteIndex, byteIndex + frameSize);
+              sampleRate = probe.aac.parseSampleRate(packet);
+            }
+            audioCount++;
+            byteIndex += frameSize;
+            break;
+          default:
+            byteIndex++;
+            break;
+        }
+        if (endLoop) {
+          return null;
+        }
+      }
+      if (sampleRate === null || timestamp === null) {
+        return null;
+      }
+      var audioTimescale = ONE_SECOND_IN_TS / sampleRate;
+      var result = {
+        audio: [{
+          type: 'audio',
+          dts: timestamp,
+          pts: timestamp
+        }, {
+          type: 'audio',
+          dts: timestamp + audioCount * 1024 * audioTimescale,
+          pts: timestamp + audioCount * 1024 * audioTimescale
+        }]
+      };
+      return result;
+    };
+    /**
+     * inspects the transport stream segment data for start and end time information
+     * of the audio and video tracks (when present) as well as the first key frame's
+     * start time.
+     */
+
+    var inspectTs_ = function (bytes) {
+      var pmt = {
+        pid: null,
+        table: null
+      };
+      var result = {};
+      parsePsi_(bytes, pmt);
+      for (var pid in pmt.table) {
+        if (pmt.table.hasOwnProperty(pid)) {
+          var type = pmt.table[pid];
+          switch (type) {
+            case StreamTypes.H264_STREAM_TYPE:
+              result.video = [];
+              parseVideoPes_(bytes, pmt, result);
+              if (result.video.length === 0) {
+                delete result.video;
+              }
+              break;
+            case StreamTypes.ADTS_STREAM_TYPE:
+              result.audio = [];
+              parseAudioPes_(bytes, pmt, result);
+              if (result.audio.length === 0) {
+                delete result.audio;
+              }
+              break;
+          }
+        }
+      }
+      return result;
+    };
+    /**
+     * Inspects segment byte data and returns an object with start and end timing information
+     *
+     * @param {Uint8Array} bytes The segment byte data
+     * @param {Number} baseTimestamp Relative reference timestamp used when adjusting frame
+     *  timestamps for rollover. This value must be in 90khz clock.
+     * @return {Object} Object containing start and end frame timing info of segment.
+     */
+
+    var inspect = function (bytes, baseTimestamp) {
+      var isAacData = probe.aac.isLikelyAacData(bytes);
+      var result;
+      if (isAacData) {
+        result = inspectAac_(bytes);
+      } else {
+        result = inspectTs_(bytes);
+      }
+      if (!result || !result.audio && !result.video) {
+        return null;
+      }
+      adjustTimestamp_(result, baseTimestamp);
+      return result;
+    };
+    var tsInspector = {
+      inspect: inspect,
+      parseAudioPes_: parseAudioPes_
+    };
+    /* global self */
+
+    /**
+     * Re-emits transmuxer events by converting them into messages to the
+     * world outside the worker.
+     *
+     * @param {Object} transmuxer the transmuxer to wire events on
+     * @private
+     */
+
+    const wireTransmuxerEvents = function (self, transmuxer) {
+      transmuxer.on('data', function (segment) {
+        // transfer ownership of the underlying ArrayBuffer
+        // instead of doing a copy to save memory
+        // ArrayBuffers are transferable but generic TypedArrays are not
+        // @link https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Passing_data_by_transferring_ownership_(transferable_objects)
+        const initArray = segment.initSegment;
+        segment.initSegment = {
+          data: initArray.buffer,
+          byteOffset: initArray.byteOffset,
+          byteLength: initArray.byteLength
+        };
+        const typedArray = segment.data;
+        segment.data = typedArray.buffer;
+        self.postMessage({
+          action: 'data',
+          segment,
+          byteOffset: typedArray.byteOffset,
+          byteLength: typedArray.byteLength
+        }, [segment.data]);
+      });
+      transmuxer.on('done', function (data) {
+        self.postMessage({
+          action: 'done'
+        });
+      });
+      transmuxer.on('gopInfo', function (gopInfo) {
+        self.postMessage({
+          action: 'gopInfo',
+          gopInfo
+        });
+      });
+      transmuxer.on('videoSegmentTimingInfo', function (timingInfo) {
+        const videoSegmentTimingInfo = {
+          start: {
+            decode: clock$2.videoTsToSeconds(timingInfo.start.dts),
+            presentation: clock$2.videoTsToSeconds(timingInfo.start.pts)
+          },
+          end: {
+            decode: clock$2.videoTsToSeconds(timingInfo.end.dts),
+            presentation: clock$2.videoTsToSeconds(timingInfo.end.pts)
+          },
+          baseMediaDecodeTime: clock$2.videoTsToSeconds(timingInfo.baseMediaDecodeTime)
+        };
+        if (timingInfo.prependedContentDuration) {
+          videoSegmentTimingInfo.prependedContentDuration = clock$2.videoTsToSeconds(timingInfo.prependedContentDuration);
+        }
+        self.postMessage({
+          action: 'videoSegmentTimingInfo',
+          videoSegmentTimingInfo
+        });
+      });
+      transmuxer.on('audioSegmentTimingInfo', function (timingInfo) {
+        // Note that all times for [audio/video]SegmentTimingInfo events are in video clock
+        const audioSegmentTimingInfo = {
+          start: {
+            decode: clock$2.videoTsToSeconds(timingInfo.start.dts),
+            presentation: clock$2.videoTsToSeconds(timingInfo.start.pts)
+          },
+          end: {
+            decode: clock$2.videoTsToSeconds(timingInfo.end.dts),
+            presentation: clock$2.videoTsToSeconds(timingInfo.end.pts)
+          },
+          baseMediaDecodeTime: clock$2.videoTsToSeconds(timingInfo.baseMediaDecodeTime)
+        };
+        if (timingInfo.prependedContentDuration) {
+          audioSegmentTimingInfo.prependedContentDuration = clock$2.videoTsToSeconds(timingInfo.prependedContentDuration);
+        }
+        self.postMessage({
+          action: 'audioSegmentTimingInfo',
+          audioSegmentTimingInfo
+        });
+      });
+      transmuxer.on('id3Frame', function (id3Frame) {
+        self.postMessage({
+          action: 'id3Frame',
+          id3Frame
+        });
+      });
+      transmuxer.on('caption', function (caption) {
+        self.postMessage({
+          action: 'caption',
+          caption
+        });
+      });
+      transmuxer.on('trackinfo', function (trackInfo) {
+        self.postMessage({
+          action: 'trackinfo',
+          trackInfo
+        });
+      });
+      transmuxer.on('audioTimingInfo', function (audioTimingInfo) {
+        // convert to video TS since we prioritize video time over audio
+        self.postMessage({
+          action: 'audioTimingInfo',
+          audioTimingInfo: {
+            start: clock$2.videoTsToSeconds(audioTimingInfo.start),
+            end: clock$2.videoTsToSeconds(audioTimingInfo.end)
+          }
+        });
+      });
+      transmuxer.on('videoTimingInfo', function (videoTimingInfo) {
+        self.postMessage({
+          action: 'videoTimingInfo',
+          videoTimingInfo: {
+            start: clock$2.videoTsToSeconds(videoTimingInfo.start),
+            end: clock$2.videoTsToSeconds(videoTimingInfo.end)
+          }
+        });
+      });
+      transmuxer.on('log', function (log) {
+        self.postMessage({
+          action: 'log',
+          log
+        });
+      });
+    };
+    /**
+     * All incoming messages route through this hash. If no function exists
+     * to handle an incoming message, then we ignore the message.
+     *
+     * @class MessageHandlers
+     * @param {Object} options the options to initialize with
+     */
+
+    class MessageHandlers {
+      constructor(self, options) {
+        this.options = options || {};
+        this.self = self;
+        this.init();
+      }
+      /**
+       * initialize our web worker and wire all the events.
+       */
+
+      init() {
+        if (this.transmuxer) {
+          this.transmuxer.dispose();
+        }
+        this.transmuxer = new transmuxer.Transmuxer(this.options);
+        wireTransmuxerEvents(this.self, this.transmuxer);
+      }
+      pushMp4Captions(data) {
+        if (!this.captionParser) {
+          this.captionParser = new captionParser();
+          this.captionParser.init();
+        }
+        const segment = new Uint8Array(data.data, data.byteOffset, data.byteLength);
+        const parsed = this.captionParser.parse(segment, data.trackIds, data.timescales);
+        this.self.postMessage({
+          action: 'mp4Captions',
+          captions: parsed && parsed.captions || [],
+          logs: parsed && parsed.logs || [],
+          data: segment.buffer
+        }, [segment.buffer]);
+      }
+      probeMp4StartTime({
+        timescales,
+        data
+      }) {
+        const startTime = probe$2.startTime(timescales, data);
+        this.self.postMessage({
+          action: 'probeMp4StartTime',
+          startTime,
+          data
+        }, [data.buffer]);
+      }
+      probeMp4Tracks({
+        data
+      }) {
+        const tracks = probe$2.tracks(data);
+        this.self.postMessage({
+          action: 'probeMp4Tracks',
+          tracks,
+          data
+        }, [data.buffer]);
+      }
+      /**
+       * Probes an mp4 segment for EMSG boxes containing ID3 data.
+       * https://aomediacodec.github.io/id3-emsg/
+       *
+       * @param {Uint8Array} data segment data
+       * @param {number} offset segment start time
+       * @return {Object[]} an array of ID3 frames
+       */
+
+      probeEmsgID3({
+        data,
+        offset
+      }) {
+        const id3Frames = probe$2.getEmsgID3(data, offset);
+        this.self.postMessage({
+          action: 'probeEmsgID3',
+          id3Frames,
+          emsgData: data
+        }, [data.buffer]);
+      }
+      /**
+       * Probe an mpeg2-ts segment to determine the start time of the segment in it's
+       * internal "media time," as well as whether it contains video and/or audio.
+       *
+       * @private
+       * @param {Uint8Array} bytes - segment bytes
+       * @param {number} baseStartTime
+       *        Relative reference timestamp used when adjusting frame timestamps for rollover.
+       *        This value should be in seconds, as it's converted to a 90khz clock within the
+       *        function body.
+       * @return {Object} The start time of the current segment in "media time" as well as
+       *                  whether it contains video and/or audio
+       */
+
+      probeTs({
+        data,
+        baseStartTime
+      }) {
+        const tsStartTime = typeof baseStartTime === 'number' && !isNaN(baseStartTime) ? baseStartTime * clock$2.ONE_SECOND_IN_TS : void 0;
+        const timeInfo = tsInspector.inspect(data, tsStartTime);
+        let result = null;
+        if (timeInfo) {
+          result = {
+            // each type's time info comes back as an array of 2 times, start and end
+            hasVideo: timeInfo.video && timeInfo.video.length === 2 || false,
+            hasAudio: timeInfo.audio && timeInfo.audio.length === 2 || false
+          };
+          if (result.hasVideo) {
+            result.videoStart = timeInfo.video[0].ptsTime;
+          }
+          if (result.hasAudio) {
+            result.audioStart = timeInfo.audio[0].ptsTime;
+          }
+        }
+        this.self.postMessage({
+          action: 'probeTs',
+          result,
+          data
+        }, [data.buffer]);
+      }
+      clearAllMp4Captions() {
+        if (this.captionParser) {
+          this.captionParser.clearAllCaptions();
+        }
+      }
+      clearParsedMp4Captions() {
+        if (this.captionParser) {
+          this.captionParser.clearParsedCaptions();
+        }
+      }
+      /**
+       * Adds data (a ts segment) to the start of the transmuxer pipeline for
+       * processing.
+       *
+       * @param {ArrayBuffer} data data to push into the muxer
+       */
+
+      push(data) {
+        // Cast array buffer to correct type for transmuxer
+        const segment = new Uint8Array(data.data, data.byteOffset, data.byteLength);
+        this.transmuxer.push(segment);
+      }
+      /**
+       * Recreate the transmuxer so that the next segment added via `push`
+       * start with a fresh transmuxer.
+       */
+
+      reset() {
+        this.transmuxer.reset();
+      }
+      /**
+       * Set the value that will be used as the `baseMediaDecodeTime` time for the
+       * next segment pushed in. Subsequent segments will have their `baseMediaDecodeTime`
+       * set relative to the first based on the PTS values.
+       *
+       * @param {Object} data used to set the timestamp offset in the muxer
+       */
+
+      setTimestampOffset(data) {
+        const timestampOffset = data.timestampOffset || 0;
+        this.transmuxer.setBaseMediaDecodeTime(Math.round(clock$2.secondsToVideoTs(timestampOffset)));
+      }
+      setAudioAppendStart(data) {
+        this.transmuxer.setAudioAppendStart(Math.ceil(clock$2.secondsToVideoTs(data.appendStart)));
+      }
+      setRemux(data) {
+        this.transmuxer.setRemux(data.remux);
+      }
+      /**
+       * Forces the pipeline to finish processing the last segment and emit it's
+       * results.
+       *
+       * @param {Object} data event data, not really used
+       */
+
+      flush(data) {
+        this.transmuxer.flush(); // transmuxed done action is fired after both audio/video pipelines are flushed
+
+        self.postMessage({
+          action: 'done',
+          type: 'transmuxed'
+        });
+      }
+      endTimeline() {
+        this.transmuxer.endTimeline(); // transmuxed endedtimeline action is fired after both audio/video pipelines end their
+        // timelines
+
+        self.postMessage({
+          action: 'endedtimeline',
+          type: 'transmuxed'
+        });
+      }
+      alignGopsWith(data) {
+        this.transmuxer.alignGopsWith(data.gopsToAlignWith.slice());
+      }
+    }
+    /**
+     * Our web worker interface so that things can talk to mux.js
+     * that will be running in a web worker. the scope is passed to this by
+     * webworkify.
+     *
+     * @param {Object} self the scope for the web worker
+     */
+
+    self.onmessage = function (event) {
+      if (event.data.action === 'init' && event.data.options) {
+        this.messageHandlers = new MessageHandlers(self, event.data.options);
+        return;
+      }
+      if (!this.messageHandlers) {
+        this.messageHandlers = new MessageHandlers(self);
+      }
+      if (event.data && event.data.action && event.data.action !== 'init') {
+        if (this.messageHandlers[event.data.action]) {
+          this.messageHandlers[event.data.action](event.data);
+        }
+      }
+    };
+  }));
+  var TransmuxWorker = factory(workerCode$1);
+  /* rollup-plugin-worker-factory end for worker!/home/runner/work/http-streaming/http-streaming/src/transmuxer-worker.js */
+
+  const handleData_ = (event, transmuxedData, callback) => {
+    const {
+      type,
+      initSegment,
+      captions,
+      captionStreams,
+      metadata,
+      videoFrameDtsTime,
+      videoFramePtsTime
+    } = event.data.segment;
+    transmuxedData.buffer.push({
+      captions,
+      captionStreams,
+      metadata
+    });
+    const boxes = event.data.segment.boxes || {
+      data: event.data.segment.data
+    };
+    const result = {
+      type,
+      // cast ArrayBuffer to TypedArray
+      data: new Uint8Array(boxes.data, boxes.data.byteOffset, boxes.data.byteLength),
+      initSegment: new Uint8Array(initSegment.data, initSegment.byteOffset, initSegment.byteLength)
+    };
+    if (typeof videoFrameDtsTime !== 'undefined') {
+      result.videoFrameDtsTime = videoFrameDtsTime;
+    }
+    if (typeof videoFramePtsTime !== 'undefined') {
+      result.videoFramePtsTime = videoFramePtsTime;
+    }
+    callback(result);
+  };
+  const handleDone_ = ({
+    transmuxedData,
+    callback
+  }) => {
+    // Previously we only returned data on data events,
+    // not on done events. Clear out the buffer to keep that consistent.
+    transmuxedData.buffer = []; // all buffers should have been flushed from the muxer, so start processing anything we
+    // have received
+
+    callback(transmuxedData);
+  };
+  const handleGopInfo_ = (event, transmuxedData) => {
+    transmuxedData.gopInfo = event.data.gopInfo;
+  };
+  const processTransmux = options => {
+    const {
+      transmuxer,
+      bytes,
+      audioAppendStart,
+      gopsToAlignWith,
+      remux,
+      onData,
+      onTrackInfo,
+      onAudioTimingInfo,
+      onVideoTimingInfo,
+      onVideoSegmentTimingInfo,
+      onAudioSegmentTimingInfo,
+      onId3,
+      onCaptions,
+      onDone,
+      onEndedTimeline,
+      onTransmuxerLog,
+      isEndOfTimeline
+    } = options;
+    const transmuxedData = {
+      buffer: []
+    };
+    let waitForEndedTimelineEvent = isEndOfTimeline;
+    const handleMessage = event => {
+      if (transmuxer.currentTransmux !== options) {
+        // disposed
+        return;
+      }
+      if (event.data.action === 'data') {
+        handleData_(event, transmuxedData, onData);
+      }
+      if (event.data.action === 'trackinfo') {
+        onTrackInfo(event.data.trackInfo);
+      }
+      if (event.data.action === 'gopInfo') {
+        handleGopInfo_(event, transmuxedData);
+      }
+      if (event.data.action === 'audioTimingInfo') {
+        onAudioTimingInfo(event.data.audioTimingInfo);
+      }
+      if (event.data.action === 'videoTimingInfo') {
+        onVideoTimingInfo(event.data.videoTimingInfo);
+      }
+      if (event.data.action === 'videoSegmentTimingInfo') {
+        onVideoSegmentTimingInfo(event.data.videoSegmentTimingInfo);
+      }
+      if (event.data.action === 'audioSegmentTimingInfo') {
+        onAudioSegmentTimingInfo(event.data.audioSegmentTimingInfo);
+      }
+      if (event.data.action === 'id3Frame') {
+        onId3([event.data.id3Frame], event.data.id3Frame.dispatchType);
+      }
+      if (event.data.action === 'caption') {
+        onCaptions(event.data.caption);
+      }
+      if (event.data.action === 'endedtimeline') {
+        waitForEndedTimelineEvent = false;
+        onEndedTimeline();
+      }
+      if (event.data.action === 'log') {
+        onTransmuxerLog(event.data.log);
+      } // wait for the transmuxed event since we may have audio and video
+
+      if (event.data.type !== 'transmuxed') {
+        return;
+      } // If the "endedtimeline" event has not yet fired, and this segment represents the end
+      // of a timeline, that means there may still be data events before the segment
+      // processing can be considerred complete. In that case, the final event should be
+      // an "endedtimeline" event with the type "transmuxed."
+
+      if (waitForEndedTimelineEvent) {
+        return;
+      }
+      transmuxer.onmessage = null;
+      handleDone_({
+        transmuxedData,
+        callback: onDone
+      });
+      /* eslint-disable no-use-before-define */
+
+      dequeue(transmuxer);
+      /* eslint-enable */
+    };
+
+    transmuxer.onmessage = handleMessage;
+    if (audioAppendStart) {
+      transmuxer.postMessage({
+        action: 'setAudioAppendStart',
+        appendStart: audioAppendStart
+      });
+    } // allow empty arrays to be passed to clear out GOPs
+
+    if (Array.isArray(gopsToAlignWith)) {
+      transmuxer.postMessage({
+        action: 'alignGopsWith',
+        gopsToAlignWith
+      });
+    }
+    if (typeof remux !== 'undefined') {
+      transmuxer.postMessage({
+        action: 'setRemux',
+        remux
+      });
+    }
+    if (bytes.byteLength) {
+      const buffer = bytes instanceof ArrayBuffer ? bytes : bytes.buffer;
+      const byteOffset = bytes instanceof ArrayBuffer ? 0 : bytes.byteOffset;
+      transmuxer.postMessage({
+        action: 'push',
+        // Send the typed-array of data as an ArrayBuffer so that
+        // it can be sent as a "Transferable" and avoid the costly
+        // memory copy
+        data: buffer,
+        // To recreate the original typed-array, we need information
+        // about what portion of the ArrayBuffer it was a view into
+        byteOffset,
+        byteLength: bytes.byteLength
+      }, [buffer]);
+    }
+    if (isEndOfTimeline) {
+      transmuxer.postMessage({
+        action: 'endTimeline'
+      });
+    } // even if we didn't push any bytes, we have to make sure we flush in case we reached
+    // the end of the segment
+
+    transmuxer.postMessage({
+      action: 'flush'
+    });
+  };
+  const dequeue = transmuxer => {
+    transmuxer.currentTransmux = null;
+    if (transmuxer.transmuxQueue.length) {
+      transmuxer.currentTransmux = transmuxer.transmuxQueue.shift();
+      if (typeof transmuxer.currentTransmux === 'function') {
+        transmuxer.currentTransmux();
+      } else {
+        processTransmux(transmuxer.currentTransmux);
+      }
+    }
+  };
+  const processAction = (transmuxer, action) => {
+    transmuxer.postMessage({
+      action
+    });
+    dequeue(transmuxer);
+  };
+  const enqueueAction = (action, transmuxer) => {
+    if (!transmuxer.currentTransmux) {
+      transmuxer.currentTransmux = action;
+      processAction(transmuxer, action);
+      return;
+    }
+    transmuxer.transmuxQueue.push(processAction.bind(null, transmuxer, action));
+  };
+  const reset = transmuxer => {
+    enqueueAction('reset', transmuxer);
+  };
+  const endTimeline = transmuxer => {
+    enqueueAction('endTimeline', transmuxer);
+  };
+  const transmux = options => {
+    if (!options.transmuxer.currentTransmux) {
+      options.transmuxer.currentTransmux = options;
+      processTransmux(options);
+      return;
+    }
+    options.transmuxer.transmuxQueue.push(options);
+  };
+  const createTransmuxer = options => {
+    const transmuxer = new TransmuxWorker();
+    transmuxer.currentTransmux = null;
+    transmuxer.transmuxQueue = [];
+    const term = transmuxer.terminate;
+    transmuxer.terminate = () => {
+      transmuxer.currentTransmux = null;
+      transmuxer.transmuxQueue.length = 0;
+      return term.call(transmuxer);
+    };
+    transmuxer.postMessage({
+      action: 'init',
+      options
+    });
+    return transmuxer;
+  };
+  var segmentTransmuxer = {
+    reset,
+    endTimeline,
+    transmux,
+    createTransmuxer
+  };
+  const workerCallback = function (options) {
+    const transmuxer = options.transmuxer;
+    const endAction = options.endAction || options.action;
+    const callback = options.callback;
+    const message = _extends$1({}, options, {
+      endAction: null,
+      transmuxer: null,
+      callback: null
+    });
+    const listenForEndEvent = event => {
+      if (event.data.action !== endAction) {
+        return;
+      }
+      transmuxer.removeEventListener('message', listenForEndEvent); // transfer ownership of bytes back to us.
+
+      if (event.data.data) {
+        event.data.data = new Uint8Array(event.data.data, options.byteOffset || 0, options.byteLength || event.data.data.byteLength);
+        if (options.data) {
+          options.data = event.data.data;
+        }
+      }
+      callback(event.data);
+    };
+    transmuxer.addEventListener('message', listenForEndEvent);
+    if (options.data) {
+      const isArrayBuffer = options.data instanceof ArrayBuffer;
+      message.byteOffset = isArrayBuffer ? 0 : options.data.byteOffset;
+      message.byteLength = options.data.byteLength;
+      const transfers = [isArrayBuffer ? options.data : options.data.buffer];
+      transmuxer.postMessage(message, transfers);
+    } else {
+      transmuxer.postMessage(message);
+    }
+  };
+  const REQUEST_ERRORS = {
+    FAILURE: 2,
+    TIMEOUT: -101,
+    ABORTED: -102
+  };
+  /**
+   * Abort all requests
+   *
+   * @param {Object} activeXhrs - an object that tracks all XHR requests
+   */
+
+  const abortAll = activeXhrs => {
+    activeXhrs.forEach(xhr => {
+      xhr.abort();
+    });
+  };
+  /**
+   * Gather important bandwidth stats once a request has completed
+   *
+   * @param {Object} request - the XHR request from which to gather stats
+   */
+
+  const getRequestStats = request => {
+    return {
+      bandwidth: request.bandwidth,
+      bytesReceived: request.bytesReceived || 0,
+      roundTripTime: request.roundTripTime || 0
+    };
+  };
+  /**
+   * If possible gather bandwidth stats as a request is in
+   * progress
+   *
+   * @param {Event} progressEvent - an event object from an XHR's progress event
+   */
+
+  const getProgressStats = progressEvent => {
+    const request = progressEvent.target;
+    const roundTripTime = Date.now() - request.requestTime;
+    const stats = {
+      bandwidth: Infinity,
+      bytesReceived: 0,
+      roundTripTime: roundTripTime || 0
+    };
+    stats.bytesReceived = progressEvent.loaded; // This can result in Infinity if stats.roundTripTime is 0 but that is ok
+    // because we should only use bandwidth stats on progress to determine when
+    // abort a request early due to insufficient bandwidth
+
+    stats.bandwidth = Math.floor(stats.bytesReceived / stats.roundTripTime * 8 * 1000);
+    return stats;
+  };
+  /**
+   * Handle all error conditions in one place and return an object
+   * with all the information
+   *
+   * @param {Error|null} error - if non-null signals an error occured with the XHR
+   * @param {Object} request -  the XHR request that possibly generated the error
+   */
+
+  const handleErrors = (error, request) => {
+    if (request.timedout) {
+      return {
+        status: request.status,
+        message: 'HLS request timed-out at URL: ' + request.uri,
+        code: REQUEST_ERRORS.TIMEOUT,
+        xhr: request
+      };
+    }
+    if (request.aborted) {
+      return {
+        status: request.status,
+        message: 'HLS request aborted at URL: ' + request.uri,
+        code: REQUEST_ERRORS.ABORTED,
+        xhr: request
+      };
+    }
+    if (error) {
+      return {
+        status: request.status,
+        message: 'HLS request errored at URL: ' + request.uri,
+        code: REQUEST_ERRORS.FAILURE,
+        xhr: request
+      };
+    }
+    if (request.responseType === 'arraybuffer' && request.response.byteLength === 0) {
+      return {
+        status: request.status,
+        message: 'Empty HLS response at URL: ' + request.uri,
+        code: REQUEST_ERRORS.FAILURE,
+        xhr: request
+      };
+    }
+    return null;
+  };
+  /**
+   * Handle responses for key data and convert the key data to the correct format
+   * for the decryption step later
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Array} objects - objects to add the key bytes to.
+   * @param {Function} finishProcessingFn - a callback to execute to continue processing
+   *                                        this request
+   */
+
+  const handleKeyResponse = (segment, objects, finishProcessingFn) => (error, request) => {
+    const response = request.response;
+    const errorObj = handleErrors(error, request);
+    if (errorObj) {
+      return finishProcessingFn(errorObj, segment);
+    }
+    if (response.byteLength !== 16) {
+      return finishProcessingFn({
+        status: request.status,
+        message: 'Invalid HLS key at URL: ' + request.uri,
+        code: REQUEST_ERRORS.FAILURE,
+        xhr: request
+      }, segment);
+    }
+    const view = new DataView(response);
+    const bytes = new Uint32Array([view.getUint32(0), view.getUint32(4), view.getUint32(8), view.getUint32(12)]);
+    for (let i = 0; i < objects.length; i++) {
+      objects[i].bytes = bytes;
+    }
+    return finishProcessingFn(null, segment);
+  };
+  const parseInitSegment = (segment, callback) => {
+    const type = detectContainerForBytes(segment.map.bytes); // TODO: We should also handle ts init segments here, but we
+    // only know how to parse mp4 init segments at the moment
+
+    if (type !== 'mp4') {
+      const uri = segment.map.resolvedUri || segment.map.uri;
+      const mediaType = type || 'unknown';
+      return callback({
+        internal: true,
+        message: `Found unsupported ${mediaType} container for initialization segment at URL: ${uri}`,
+        code: REQUEST_ERRORS.FAILURE,
+        metadata: {
+          errorType: videojs.Error.UnsupportedMediaInitialization,
+          mediaType
+        }
+      });
+    }
+    workerCallback({
+      action: 'probeMp4Tracks',
+      data: segment.map.bytes,
+      transmuxer: segment.transmuxer,
+      callback: ({
+        tracks,
+        data
+      }) => {
+        // transfer bytes back to us
+        segment.map.bytes = data;
+        tracks.forEach(function (track) {
+          segment.map.tracks = segment.map.tracks || {}; // only support one track of each type for now
+
+          if (segment.map.tracks[track.type]) {
+            return;
+          }
+          segment.map.tracks[track.type] = track;
+          if (typeof track.id === 'number' && track.timescale) {
+            segment.map.timescales = segment.map.timescales || {};
+            segment.map.timescales[track.id] = track.timescale;
+          }
+        });
+        return callback(null);
+      }
+    });
+  };
+  /**
+   * Handle init-segment responses
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} finishProcessingFn - a callback to execute to continue processing
+   *                                        this request
+   */
+
+  const handleInitSegmentResponse = ({
+    segment,
+    finishProcessingFn
+  }) => (error, request) => {
+    const errorObj = handleErrors(error, request);
+    if (errorObj) {
+      return finishProcessingFn(errorObj, segment);
+    }
+    const bytes = new Uint8Array(request.response); // init segment is encypted, we will have to wait
+    // until the key request is done to decrypt.
+
+    if (segment.map.key) {
+      segment.map.encryptedBytes = bytes;
+      return finishProcessingFn(null, segment);
+    }
+    segment.map.bytes = bytes;
+    parseInitSegment(segment, function (parseError) {
+      if (parseError) {
+        parseError.xhr = request;
+        parseError.status = request.status;
+        return finishProcessingFn(parseError, segment);
+      }
+      finishProcessingFn(null, segment);
+    });
+  };
+  /**
+   * Response handler for segment-requests being sure to set the correct
+   * property depending on whether the segment is encryped or not
+   * Also records and keeps track of stats that are used for ABR purposes
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} finishProcessingFn - a callback to execute to continue processing
+   *                                        this request
+   */
+
+  const handleSegmentResponse = ({
+    segment,
+    finishProcessingFn,
+    responseType
+  }) => (error, request) => {
+    const errorObj = handleErrors(error, request);
+    if (errorObj) {
+      return finishProcessingFn(errorObj, segment);
+    }
+    const newBytes =
+    // although responseText "should" exist, this guard serves to prevent an error being
+    // thrown for two primary cases:
+    // 1. the mime type override stops working, or is not implemented for a specific
+    //    browser
+    // 2. when using mock XHR libraries like sinon that do not allow the override behavior
+    responseType === 'arraybuffer' || !request.responseText ? request.response : stringToArrayBuffer(request.responseText.substring(segment.lastReachedChar || 0));
+    segment.stats = getRequestStats(request);
+    if (segment.key) {
+      segment.encryptedBytes = new Uint8Array(newBytes);
+    } else {
+      segment.bytes = new Uint8Array(newBytes);
+    }
+    return finishProcessingFn(null, segment);
+  };
+  const transmuxAndNotify = ({
+    segment,
+    bytes,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    const fmp4Tracks = segment.map && segment.map.tracks || {};
+    const isMuxed = Boolean(fmp4Tracks.audio && fmp4Tracks.video); // Keep references to each function so we can null them out after we're done with them.
+    // One reason for this is that in the case of full segments, we want to trust start
+    // times from the probe, rather than the transmuxer.
+
+    let audioStartFn = timingInfoFn.bind(null, segment, 'audio', 'start');
+    const audioEndFn = timingInfoFn.bind(null, segment, 'audio', 'end');
+    let videoStartFn = timingInfoFn.bind(null, segment, 'video', 'start');
+    const videoEndFn = timingInfoFn.bind(null, segment, 'video', 'end');
+    const finish = () => transmux({
+      bytes,
+      transmuxer: segment.transmuxer,
+      audioAppendStart: segment.audioAppendStart,
+      gopsToAlignWith: segment.gopsToAlignWith,
+      remux: isMuxed,
+      onData: result => {
+        result.type = result.type === 'combined' ? 'video' : result.type;
+        dataFn(segment, result);
+      },
+      onTrackInfo: trackInfo => {
+        if (trackInfoFn) {
+          if (isMuxed) {
+            trackInfo.isMuxed = true;
+          }
+          trackInfoFn(segment, trackInfo);
+        }
+      },
+      onAudioTimingInfo: audioTimingInfo => {
+        // we only want the first start value we encounter
+        if (audioStartFn && typeof audioTimingInfo.start !== 'undefined') {
+          audioStartFn(audioTimingInfo.start);
+          audioStartFn = null;
+        } // we want to continually update the end time
+
+        if (audioEndFn && typeof audioTimingInfo.end !== 'undefined') {
+          audioEndFn(audioTimingInfo.end);
+        }
+      },
+      onVideoTimingInfo: videoTimingInfo => {
+        // we only want the first start value we encounter
+        if (videoStartFn && typeof videoTimingInfo.start !== 'undefined') {
+          videoStartFn(videoTimingInfo.start);
+          videoStartFn = null;
+        } // we want to continually update the end time
+
+        if (videoEndFn && typeof videoTimingInfo.end !== 'undefined') {
+          videoEndFn(videoTimingInfo.end);
+        }
+      },
+      onVideoSegmentTimingInfo: videoSegmentTimingInfo => {
+        videoSegmentTimingInfoFn(videoSegmentTimingInfo);
+      },
+      onAudioSegmentTimingInfo: audioSegmentTimingInfo => {
+        audioSegmentTimingInfoFn(audioSegmentTimingInfo);
+      },
+      onId3: (id3Frames, dispatchType) => {
+        id3Fn(segment, id3Frames, dispatchType);
+      },
+      onCaptions: captions => {
+        captionsFn(segment, [captions]);
+      },
+      isEndOfTimeline,
+      onEndedTimeline: () => {
+        endedTimelineFn();
+      },
+      onTransmuxerLog,
+      onDone: result => {
+        if (!doneFn) {
+          return;
+        }
+        result.type = result.type === 'combined' ? 'video' : result.type;
+        doneFn(null, segment, result);
+      }
+    }); // In the transmuxer, we don't yet have the ability to extract a "proper" start time.
+    // Meaning cached frame data may corrupt our notion of where this segment
+    // really starts. To get around this, probe for the info needed.
+
+    workerCallback({
+      action: 'probeTs',
+      transmuxer: segment.transmuxer,
+      data: bytes,
+      baseStartTime: segment.baseStartTime,
+      callback: data => {
+        segment.bytes = bytes = data.data;
+        const probeResult = data.result;
+        if (probeResult) {
+          trackInfoFn(segment, {
+            hasAudio: probeResult.hasAudio,
+            hasVideo: probeResult.hasVideo,
+            isMuxed
+          });
+          trackInfoFn = null;
+        }
+        finish();
+      }
+    });
+  };
+  const handleSegmentBytes = ({
+    segment,
+    bytes,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    let bytesAsUint8Array = new Uint8Array(bytes); // TODO:
+    // We should have a handler that fetches the number of bytes required
+    // to check if something is fmp4. This will allow us to save bandwidth
+    // because we can only exclude a playlist and abort requests
+    // by codec after trackinfo triggers.
+
+    if (isLikelyFmp4MediaSegment(bytesAsUint8Array)) {
+      segment.isFmp4 = true;
+      const {
+        tracks
+      } = segment.map;
+      const trackInfo = {
+        isFmp4: true,
+        hasVideo: !!tracks.video,
+        hasAudio: !!tracks.audio
+      }; // if we have a audio track, with a codec that is not set to
+      // encrypted audio
+
+      if (tracks.audio && tracks.audio.codec && tracks.audio.codec !== 'enca') {
+        trackInfo.audioCodec = tracks.audio.codec;
+      } // if we have a video track, with a codec that is not set to
+      // encrypted video
+
+      if (tracks.video && tracks.video.codec && tracks.video.codec !== 'encv') {
+        trackInfo.videoCodec = tracks.video.codec;
+      }
+      if (tracks.video && tracks.audio) {
+        trackInfo.isMuxed = true;
+      } // since we don't support appending fmp4 data on progress, we know we have the full
+      // segment here
+
+      trackInfoFn(segment, trackInfo); // The probe doesn't provide the segment end time, so only callback with the start
+      // time. The end time can be roughly calculated by the receiver using the duration.
+      //
+      // Note that the start time returned by the probe reflects the baseMediaDecodeTime, as
+      // that is the true start of the segment (where the playback engine should begin
+      // decoding).
+
+      const finishLoading = (captions, id3Frames) => {
+        // if the track still has audio at this point it is only possible
+        // for it to be audio only. See `tracks.video && tracks.audio` if statement
+        // above.
+        // we make sure to use segment.bytes here as that
+        dataFn(segment, {
+          data: bytesAsUint8Array,
+          type: trackInfo.hasAudio && !trackInfo.isMuxed ? 'audio' : 'video'
+        });
+        if (id3Frames && id3Frames.length) {
+          id3Fn(segment, id3Frames);
+        }
+        if (captions && captions.length) {
+          captionsFn(segment, captions);
+        }
+        doneFn(null, segment, {});
+      };
+      workerCallback({
+        action: 'probeMp4StartTime',
+        timescales: segment.map.timescales,
+        data: bytesAsUint8Array,
+        transmuxer: segment.transmuxer,
+        callback: ({
+          data,
+          startTime
+        }) => {
+          // transfer bytes back to us
+          bytes = data.buffer;
+          segment.bytes = bytesAsUint8Array = data;
+          if (trackInfo.hasAudio && !trackInfo.isMuxed) {
+            timingInfoFn(segment, 'audio', 'start', startTime);
+          }
+          if (trackInfo.hasVideo) {
+            timingInfoFn(segment, 'video', 'start', startTime);
+          }
+          workerCallback({
+            action: 'probeEmsgID3',
+            data: bytesAsUint8Array,
+            transmuxer: segment.transmuxer,
+            offset: startTime,
+            callback: ({
+              emsgData,
+              id3Frames
+            }) => {
+              // transfer bytes back to us
+              bytes = emsgData.buffer;
+              segment.bytes = bytesAsUint8Array = emsgData; // Run through the CaptionParser in case there are captions.
+              // Initialize CaptionParser if it hasn't been yet
+
+              if (!tracks.video || !emsgData.byteLength || !segment.transmuxer) {
+                finishLoading(undefined, id3Frames);
+                return;
+              }
+              workerCallback({
+                action: 'pushMp4Captions',
+                endAction: 'mp4Captions',
+                transmuxer: segment.transmuxer,
+                data: bytesAsUint8Array,
+                timescales: segment.map.timescales,
+                trackIds: [tracks.video.id],
+                callback: message => {
+                  // transfer bytes back to us
+                  bytes = message.data.buffer;
+                  segment.bytes = bytesAsUint8Array = message.data;
+                  message.logs.forEach(function (log) {
+                    onTransmuxerLog(merge(log, {
+                      stream: 'mp4CaptionParser'
+                    }));
+                  });
+                  finishLoading(message.captions, id3Frames);
+                }
+              });
+            }
+          });
+        }
+      });
+      return;
+    } // VTT or other segments that don't need processing
+
+    if (!segment.transmuxer) {
+      doneFn(null, segment, {});
+      return;
+    }
+    if (typeof segment.container === 'undefined') {
+      segment.container = detectContainerForBytes(bytesAsUint8Array);
+    }
+    if (segment.container !== 'ts' && segment.container !== 'aac') {
+      trackInfoFn(segment, {
+        hasAudio: false,
+        hasVideo: false
+      });
+      doneFn(null, segment, {});
+      return;
+    } // ts or aac
+
+    transmuxAndNotify({
+      segment,
+      bytes,
+      trackInfoFn,
+      timingInfoFn,
+      videoSegmentTimingInfoFn,
+      audioSegmentTimingInfoFn,
+      id3Fn,
+      captionsFn,
+      isEndOfTimeline,
+      endedTimelineFn,
+      dataFn,
+      doneFn,
+      onTransmuxerLog
+    });
+  };
+  const decrypt = function ({
+    id,
+    key,
+    encryptedBytes,
+    decryptionWorker
+  }, callback) {
+    const decryptionHandler = event => {
+      if (event.data.source === id) {
+        decryptionWorker.removeEventListener('message', decryptionHandler);
+        const decrypted = event.data.decrypted;
+        callback(new Uint8Array(decrypted.bytes, decrypted.byteOffset, decrypted.byteLength));
+      }
+    };
+    decryptionWorker.addEventListener('message', decryptionHandler);
+    let keyBytes;
+    if (key.bytes.slice) {
+      keyBytes = key.bytes.slice();
+    } else {
+      keyBytes = new Uint32Array(Array.prototype.slice.call(key.bytes));
+    } // incrementally decrypt the bytes
+
+    decryptionWorker.postMessage(createTransferableMessage({
+      source: id,
+      encrypted: encryptedBytes,
+      key: keyBytes,
+      iv: key.iv
+    }), [encryptedBytes.buffer, keyBytes.buffer]);
+  };
+  /**
+   * Decrypt the segment via the decryption web worker
+   *
+   * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128 decryption
+   *                                       routines
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} trackInfoFn - a callback that receives track info
+   * @param {Function} timingInfoFn - a callback that receives timing info
+   * @param {Function} videoSegmentTimingInfoFn
+   *                   a callback that receives video timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} audioSegmentTimingInfoFn
+   *                   a callback that receives audio timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {boolean}  isEndOfTimeline
+   *                   true if this segment represents the last segment in a timeline
+   * @param {Function} endedTimelineFn
+   *                   a callback made when a timeline is ended, will only be called if
+   *                   isEndOfTimeline is true
+   * @param {Function} dataFn - a callback that is executed when segment bytes are available
+   *                            and ready to use
+   * @param {Function} doneFn - a callback that is executed after decryption has completed
+   */
+
+  const decryptSegment = ({
+    decryptionWorker,
+    segment,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    decrypt({
+      id: segment.requestId,
+      key: segment.key,
+      encryptedBytes: segment.encryptedBytes,
+      decryptionWorker
+    }, decryptedBytes => {
+      segment.bytes = decryptedBytes;
+      handleSegmentBytes({
+        segment,
+        bytes: segment.bytes,
+        trackInfoFn,
+        timingInfoFn,
+        videoSegmentTimingInfoFn,
+        audioSegmentTimingInfoFn,
+        id3Fn,
+        captionsFn,
+        isEndOfTimeline,
+        endedTimelineFn,
+        dataFn,
+        doneFn,
+        onTransmuxerLog
+      });
+    });
+  };
+  /**
+   * This function waits for all XHRs to finish (with either success or failure)
+   * before continueing processing via it's callback. The function gathers errors
+   * from each request into a single errors array so that the error status for
+   * each request can be examined later.
+   *
+   * @param {Object} activeXhrs - an object that tracks all XHR requests
+   * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128 decryption
+   *                                       routines
+   * @param {Function} trackInfoFn - a callback that receives track info
+   * @param {Function} timingInfoFn - a callback that receives timing info
+   * @param {Function} videoSegmentTimingInfoFn
+   *                   a callback that receives video timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} audioSegmentTimingInfoFn
+   *                   a callback that receives audio timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} id3Fn - a callback that receives ID3 metadata
+   * @param {Function} captionsFn - a callback that receives captions
+   * @param {boolean}  isEndOfTimeline
+   *                   true if this segment represents the last segment in a timeline
+   * @param {Function} endedTimelineFn
+   *                   a callback made when a timeline is ended, will only be called if
+   *                   isEndOfTimeline is true
+   * @param {Function} dataFn - a callback that is executed when segment bytes are available
+   *                            and ready to use
+   * @param {Function} doneFn - a callback that is executed after all resources have been
+   *                            downloaded and any decryption completed
+   */
+
+  const waitForCompletion = ({
+    activeXhrs,
+    decryptionWorker,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    let count = 0;
+    let didError = false;
+    return (error, segment) => {
+      if (didError) {
+        return;
+      }
+      if (error) {
+        didError = true; // If there are errors, we have to abort any outstanding requests
+
+        abortAll(activeXhrs); // Even though the requests above are aborted, and in theory we could wait until we
+        // handle the aborted events from those requests, there are some cases where we may
+        // never get an aborted event. For instance, if the network connection is lost and
+        // there were two requests, the first may have triggered an error immediately, while
+        // the second request remains unsent. In that case, the aborted algorithm will not
+        // trigger an abort: see https://xhr.spec.whatwg.org/#the-abort()-method
+        //
+        // We also can't rely on the ready state of the XHR, since the request that
+        // triggered the connection error may also show as a ready state of 0 (unsent).
+        // Therefore, we have to finish this group of requests immediately after the first
+        // seen error.
+
+        return doneFn(error, segment);
+      }
+      count += 1;
+      if (count === activeXhrs.length) {
+        const segmentFinish = function () {
+          if (segment.encryptedBytes) {
+            return decryptSegment({
+              decryptionWorker,
+              segment,
+              trackInfoFn,
+              timingInfoFn,
+              videoSegmentTimingInfoFn,
+              audioSegmentTimingInfoFn,
+              id3Fn,
+              captionsFn,
+              isEndOfTimeline,
+              endedTimelineFn,
+              dataFn,
+              doneFn,
+              onTransmuxerLog
+            });
+          } // Otherwise, everything is ready just continue
+
+          handleSegmentBytes({
+            segment,
+            bytes: segment.bytes,
+            trackInfoFn,
+            timingInfoFn,
+            videoSegmentTimingInfoFn,
+            audioSegmentTimingInfoFn,
+            id3Fn,
+            captionsFn,
+            isEndOfTimeline,
+            endedTimelineFn,
+            dataFn,
+            doneFn,
+            onTransmuxerLog
+          });
+        }; // Keep track of when *all* of the requests have completed
+
+        segment.endOfAllRequests = Date.now();
+        if (segment.map && segment.map.encryptedBytes && !segment.map.bytes) {
+          return decrypt({
+            decryptionWorker,
+            // add -init to the "id" to differentiate between segment
+            // and init segment decryption, just in case they happen
+            // at the same time at some point in the future.
+            id: segment.requestId + '-init',
+            encryptedBytes: segment.map.encryptedBytes,
+            key: segment.map.key
+          }, decryptedBytes => {
+            segment.map.bytes = decryptedBytes;
+            parseInitSegment(segment, parseError => {
+              if (parseError) {
+                abortAll(activeXhrs);
+                return doneFn(parseError, segment);
+              }
+              segmentFinish();
+            });
+          });
+        }
+        segmentFinish();
+      }
+    };
+  };
+  /**
+   * Calls the abort callback if any request within the batch was aborted. Will only call
+   * the callback once per batch of requests, even if multiple were aborted.
+   *
+   * @param {Object} loadendState - state to check to see if the abort function was called
+   * @param {Function} abortFn - callback to call for abort
+   */
+
+  const handleLoadEnd = ({
+    loadendState,
+    abortFn
+  }) => event => {
+    const request = event.target;
+    if (request.aborted && abortFn && !loadendState.calledAbortFn) {
+      abortFn();
+      loadendState.calledAbortFn = true;
+    }
+  };
+  /**
+   * Simple progress event callback handler that gathers some stats before
+   * executing a provided callback with the `segment` object
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} progressFn - a callback that is executed each time a progress event
+   *                                is received
+   * @param {Function} trackInfoFn - a callback that receives track info
+   * @param {Function} timingInfoFn - a callback that receives timing info
+   * @param {Function} videoSegmentTimingInfoFn
+   *                   a callback that receives video timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} audioSegmentTimingInfoFn
+   *                   a callback that receives audio timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {boolean}  isEndOfTimeline
+   *                   true if this segment represents the last segment in a timeline
+   * @param {Function} endedTimelineFn
+   *                   a callback made when a timeline is ended, will only be called if
+   *                   isEndOfTimeline is true
+   * @param {Function} dataFn - a callback that is executed when segment bytes are available
+   *                            and ready to use
+   * @param {Event} event - the progress event object from XMLHttpRequest
+   */
+
+  const handleProgress = ({
+    segment,
+    progressFn,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn
+  }) => event => {
+    const request = event.target;
+    if (request.aborted) {
+      return;
+    }
+    segment.stats = merge(segment.stats, getProgressStats(event)); // record the time that we receive the first byte of data
+
+    if (!segment.stats.firstBytesReceivedAt && segment.stats.bytesReceived) {
+      segment.stats.firstBytesReceivedAt = Date.now();
+    }
+    return progressFn(event, segment);
+  };
+  /**
+   * Load all resources and does any processing necessary for a media-segment
+   *
+   * Features:
+   *   decrypts the media-segment if it has a key uri and an iv
+   *   aborts *all* requests if *any* one request fails
+   *
+   * The segment object, at minimum, has the following format:
+   * {
+   *   resolvedUri: String,
+   *   [transmuxer]: Object,
+   *   [byterange]: {
+   *     offset: Number,
+   *     length: Number
+   *   },
+   *   [key]: {
+   *     resolvedUri: String
+   *     [byterange]: {
+   *       offset: Number,
+   *       length: Number
+   *     },
+   *     iv: {
+   *       bytes: Uint32Array
+   *     }
+   *   },
+   *   [map]: {
+   *     resolvedUri: String,
+   *     [byterange]: {
+   *       offset: Number,
+   *       length: Number
+   *     },
+   *     [bytes]: Uint8Array
+   *   }
+   * }
+   * ...where [name] denotes optional properties
+   *
+   * @param {Function} xhr - an instance of the xhr wrapper in xhr.js
+   * @param {Object} xhrOptions - the base options to provide to all xhr requests
+   * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128
+   *                                       decryption routines
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} abortFn - a callback called (only once) if any piece of a request was
+   *                             aborted
+   * @param {Function} progressFn - a callback that receives progress events from the main
+   *                                segment's xhr request
+   * @param {Function} trackInfoFn - a callback that receives track info
+   * @param {Function} timingInfoFn - a callback that receives timing info
+   * @param {Function} videoSegmentTimingInfoFn
+   *                   a callback that receives video timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} audioSegmentTimingInfoFn
+   *                   a callback that receives audio timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} id3Fn - a callback that receives ID3 metadata
+   * @param {Function} captionsFn - a callback that receives captions
+   * @param {boolean}  isEndOfTimeline
+   *                   true if this segment represents the last segment in a timeline
+   * @param {Function} endedTimelineFn
+   *                   a callback made when a timeline is ended, will only be called if
+   *                   isEndOfTimeline is true
+   * @param {Function} dataFn - a callback that receives data from the main segment's xhr
+   *                            request, transmuxed if needed
+   * @param {Function} doneFn - a callback that is executed only once all requests have
+   *                            succeeded or failed
+   * @return {Function} a function that, when invoked, immediately aborts all
+   *                     outstanding requests
+   */
+
+  const mediaSegmentRequest = ({
+    xhr,
+    xhrOptions,
+    decryptionWorker,
+    segment,
+    abortFn,
+    progressFn,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    const activeXhrs = [];
+    const finishProcessingFn = waitForCompletion({
+      activeXhrs,
+      decryptionWorker,
+      trackInfoFn,
+      timingInfoFn,
+      videoSegmentTimingInfoFn,
+      audioSegmentTimingInfoFn,
+      id3Fn,
+      captionsFn,
+      isEndOfTimeline,
+      endedTimelineFn,
+      dataFn,
+      doneFn,
+      onTransmuxerLog
+    }); // optionally, request the decryption key
+
+    if (segment.key && !segment.key.bytes) {
+      const objects = [segment.key];
+      if (segment.map && !segment.map.bytes && segment.map.key && segment.map.key.resolvedUri === segment.key.resolvedUri) {
+        objects.push(segment.map.key);
+      }
+      const keyRequestOptions = merge(xhrOptions, {
+        uri: segment.key.resolvedUri,
+        responseType: 'arraybuffer',
+        requestType: 'segment-key'
+      });
+      const keyRequestCallback = handleKeyResponse(segment, objects, finishProcessingFn);
+      const keyXhr = xhr(keyRequestOptions, keyRequestCallback);
+      activeXhrs.push(keyXhr);
+    } // optionally, request the associated media init segment
+
+    if (segment.map && !segment.map.bytes) {
+      const differentMapKey = segment.map.key && (!segment.key || segment.key.resolvedUri !== segment.map.key.resolvedUri);
+      if (differentMapKey) {
+        const mapKeyRequestOptions = merge(xhrOptions, {
+          uri: segment.map.key.resolvedUri,
+          responseType: 'arraybuffer',
+          requestType: 'segment-key'
+        });
+        const mapKeyRequestCallback = handleKeyResponse(segment, [segment.map.key], finishProcessingFn);
+        const mapKeyXhr = xhr(mapKeyRequestOptions, mapKeyRequestCallback);
+        activeXhrs.push(mapKeyXhr);
+      }
+      const initSegmentOptions = merge(xhrOptions, {
+        uri: segment.map.resolvedUri,
+        responseType: 'arraybuffer',
+        headers: segmentXhrHeaders(segment.map),
+        requestType: 'segment-media-initialization'
+      });
+      const initSegmentRequestCallback = handleInitSegmentResponse({
+        segment,
+        finishProcessingFn
+      });
+      const initSegmentXhr = xhr(initSegmentOptions, initSegmentRequestCallback);
+      activeXhrs.push(initSegmentXhr);
+    }
+    const segmentRequestOptions = merge(xhrOptions, {
+      uri: segment.part && segment.part.resolvedUri || segment.resolvedUri,
+      responseType: 'arraybuffer',
+      headers: segmentXhrHeaders(segment),
+      requestType: 'segment'
+    });
+    const segmentRequestCallback = handleSegmentResponse({
+      segment,
+      finishProcessingFn,
+      responseType: segmentRequestOptions.responseType
+    });
+    const segmentXhr = xhr(segmentRequestOptions, segmentRequestCallback);
+    segmentXhr.addEventListener('progress', handleProgress({
+      segment,
+      progressFn,
+      trackInfoFn,
+      timingInfoFn,
+      videoSegmentTimingInfoFn,
+      audioSegmentTimingInfoFn,
+      id3Fn,
+      captionsFn,
+      isEndOfTimeline,
+      endedTimelineFn,
+      dataFn
+    }));
+    activeXhrs.push(segmentXhr); // since all parts of the request must be considered, but should not make callbacks
+    // multiple times, provide a shared state object
+
+    const loadendState = {};
+    activeXhrs.forEach(activeXhr => {
+      activeXhr.addEventListener('loadend', handleLoadEnd({
+        loadendState,
+        abortFn
+      }));
+    });
+    return () => abortAll(activeXhrs);
+  };
+
+  /**
+   * @file - codecs.js - Handles tasks regarding codec strings such as translating them to
+   * codec strings, or translating codec strings into objects that can be examined.
+   */
+  const logFn$1 = logger('CodecUtils');
+  /**
+   * Returns a set of codec strings parsed from the playlist or the default
+   * codec strings if no codecs were specified in the playlist
+   *
+   * @param {Playlist} media the current media playlist
+   * @return {Object} an object with the video and audio codecs
+   */
+
+  const getCodecs = function (media) {
+    // if the codecs were explicitly specified, use them instead of the
+    // defaults
+    const mediaAttributes = media.attributes || {};
+    if (mediaAttributes.CODECS) {
+      return parseCodecs(mediaAttributes.CODECS);
+    }
+  };
+  const isMaat = (main, media) => {
+    const mediaAttributes = media.attributes || {};
+    return main && main.mediaGroups && main.mediaGroups.AUDIO && mediaAttributes.AUDIO && main.mediaGroups.AUDIO[mediaAttributes.AUDIO];
+  };
+  const isMuxed = (main, media) => {
+    if (!isMaat(main, media)) {
+      return true;
+    }
+    const mediaAttributes = media.attributes || {};
+    const audioGroup = main.mediaGroups.AUDIO[mediaAttributes.AUDIO];
+    for (const groupId in audioGroup) {
+      // If an audio group has a URI (the case for HLS, as HLS will use external playlists),
+      // or there are listed playlists (the case for DASH, as the manifest will have already
+      // provided all of the details necessary to generate the audio playlist, as opposed to
+      // HLS' externally requested playlists), then the content is demuxed.
+      if (!audioGroup[groupId].uri && !audioGroup[groupId].playlists) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const unwrapCodecList = function (codecList) {
+    const codecs = {};
+    codecList.forEach(({
+      mediaType,
+      type,
+      details
+    }) => {
+      codecs[mediaType] = codecs[mediaType] || [];
+      codecs[mediaType].push(translateLegacyCodec(`${type}${details}`));
+    });
+    Object.keys(codecs).forEach(function (mediaType) {
+      if (codecs[mediaType].length > 1) {
+        logFn$1(`multiple ${mediaType} codecs found as attributes: ${codecs[mediaType].join(', ')}. Setting playlist codecs to null so that we wait for mux.js to probe segments for real codecs.`);
+        codecs[mediaType] = null;
+        return;
+      }
+      codecs[mediaType] = codecs[mediaType][0];
+    });
+    return codecs;
+  };
+  const codecCount = function (codecObj) {
+    let count = 0;
+    if (codecObj.audio) {
+      count++;
+    }
+    if (codecObj.video) {
+      count++;
+    }
+    return count;
+  };
+  /**
+   * Calculates the codec strings for a working configuration of
+   * SourceBuffers to play variant streams in a main playlist. If
+   * there is no possible working configuration, an empty object will be
+   * returned.
+   *
+   * @param main {Object} the m3u8 object for the main playlist
+   * @param media {Object} the m3u8 object for the variant playlist
+   * @return {Object} the codec strings.
+   *
+   * @private
+   */
+
+  const codecsForPlaylist = function (main, media) {
+    const mediaAttributes = media.attributes || {};
+    const codecInfo = unwrapCodecList(getCodecs(media) || []); // HLS with multiple-audio tracks must always get an audio codec.
+    // Put another way, there is no way to have a video-only multiple-audio HLS!
+
+    if (isMaat(main, media) && !codecInfo.audio) {
+      if (!isMuxed(main, media)) {
+        // It is possible for codecs to be specified on the audio media group playlist but
+        // not on the rendition playlist. This is mostly the case for DASH, where audio and
+        // video are always separate (and separately specified).
+        const defaultCodecs = unwrapCodecList(codecsFromDefault(main, mediaAttributes.AUDIO) || []);
+        if (defaultCodecs.audio) {
+          codecInfo.audio = defaultCodecs.audio;
+        }
+      }
+    }
+    return codecInfo;
+  };
+  const logFn = logger('PlaylistSelector');
+  const representationToString = function (representation) {
+    if (!representation || !representation.playlist) {
+      return;
+    }
+    const playlist = representation.playlist;
+    return JSON.stringify({
+      id: playlist.id,
+      bandwidth: representation.bandwidth,
+      width: representation.width,
+      height: representation.height,
+      codecs: playlist.attributes && playlist.attributes.CODECS || ''
+    });
+  }; // Utilities
+
+  /**
+   * Returns the CSS value for the specified property on an element
+   * using `getComputedStyle`. Firefox has a long-standing issue where
+   * getComputedStyle() may return null when running in an iframe with
+   * `display: none`.
+   *
+   * @see https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+   * @param {HTMLElement} el the htmlelement to work on
+   * @param {string} the proprety to get the style for
+   */
+
+  const safeGetComputedStyle = function (el, property) {
+    if (!el) {
+      return '';
+    }
+    const result = window.getComputedStyle(el);
+    if (!result) {
+      return '';
+    }
+    return result[property];
+  };
+  /**
+   * Resuable stable sort function
+   *
+   * @param {Playlists} array
+   * @param {Function} sortFn Different comparators
+   * @function stableSort
+   */
+
+  const stableSort = function (array, sortFn) {
+    const newArray = array.slice();
+    array.sort(function (left, right) {
+      const cmp = sortFn(left, right);
+      if (cmp === 0) {
+        return newArray.indexOf(left) - newArray.indexOf(right);
+      }
+      return cmp;
+    });
+  };
+  /**
+   * A comparator function to sort two playlist object by bandwidth.
+   *
+   * @param {Object} left a media playlist object
+   * @param {Object} right a media playlist object
+   * @return {number} Greater than zero if the bandwidth attribute of
+   * left is greater than the corresponding attribute of right. Less
+   * than zero if the bandwidth of right is greater than left and
+   * exactly zero if the two are equal.
+   */
+
+  const comparePlaylistBandwidth = function (left, right) {
+    let leftBandwidth;
+    let rightBandwidth;
+    if (left.attributes.BANDWIDTH) {
+      leftBandwidth = left.attributes.BANDWIDTH;
+    }
+    leftBandwidth = leftBandwidth || window.Number.MAX_VALUE;
+    if (right.attributes.BANDWIDTH) {
+      rightBandwidth = right.attributes.BANDWIDTH;
+    }
+    rightBandwidth = rightBandwidth || window.Number.MAX_VALUE;
+    return leftBandwidth - rightBandwidth;
+  };
+  /**
+   * A comparator function to sort two playlist object by resolution (width).
+   *
+   * @param {Object} left a media playlist object
+   * @param {Object} right a media playlist object
+   * @return {number} Greater than zero if the resolution.width attribute of
+   * left is greater than the corresponding attribute of right. Less
+   * than zero if the resolution.width of right is greater than left and
+   * exactly zero if the two are equal.
+   */
+
+  const comparePlaylistResolution = function (left, right) {
+    let leftWidth;
+    let rightWidth;
+    if (left.attributes.RESOLUTION && left.attributes.RESOLUTION.width) {
+      leftWidth = left.attributes.RESOLUTION.width;
+    }
+    leftWidth = leftWidth || window.Number.MAX_VALUE;
+    if (right.attributes.RESOLUTION && right.attributes.RESOLUTION.width) {
+      rightWidth = right.attributes.RESOLUTION.width;
+    }
+    rightWidth = rightWidth || window.Number.MAX_VALUE; // NOTE - Fallback to bandwidth sort as appropriate in cases where multiple renditions
+    // have the same media dimensions/ resolution
+
+    if (leftWidth === rightWidth && left.attributes.BANDWIDTH && right.attributes.BANDWIDTH) {
+      return left.attributes.BANDWIDTH - right.attributes.BANDWIDTH;
+    }
+    return leftWidth - rightWidth;
+  };
+  /**
+   * Chooses the appropriate media playlist based on bandwidth and player size
+   *
+   * @param {Object} main
+   *        Object representation of the main manifest
+   * @param {number} playerBandwidth
+   *        Current calculated bandwidth of the player
+   * @param {number} playerWidth
+   *        Current width of the player element (should account for the device pixel ratio)
+   * @param {number} playerHeight
+   *        Current height of the player element (should account for the device pixel ratio)
+   * @param {boolean} limitRenditionByPlayerDimensions
+   *        True if the player width and height should be used during the selection, false otherwise
+   * @param {Object} playlistController
+   *        the current playlistController object
+   * @return {Playlist} the highest bitrate playlist less than the
+   * currently detected bandwidth, accounting for some amount of
+   * bandwidth variance
+   */
+
+  let simpleSelector = function (main, playerBandwidth, playerWidth, playerHeight, limitRenditionByPlayerDimensions, playlistController) {
+    // If we end up getting called before `main` is available, exit early
+    if (!main) {
+      return;
+    }
+    const options = {
+      bandwidth: playerBandwidth,
+      width: playerWidth,
+      height: playerHeight,
+      limitRenditionByPlayerDimensions
+    };
+    let playlists = main.playlists; // if playlist is audio only, select between currently active audio group playlists.
+
+    if (Playlist.isAudioOnly(main)) {
+      playlists = playlistController.getAudioTrackPlaylists_(); // add audioOnly to options so that we log audioOnly: true
+      // at the buttom of this function for debugging.
+
+      options.audioOnly = true;
+    } // convert the playlists to an intermediary representation to make comparisons easier
+
+    let sortedPlaylistReps = playlists.map(playlist => {
+      let bandwidth;
+      const width = playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.width;
+      const height = playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.height;
+      bandwidth = playlist.attributes && playlist.attributes.BANDWIDTH;
+      bandwidth = bandwidth || window.Number.MAX_VALUE;
+      return {
+        bandwidth,
+        width,
+        height,
+        playlist
+      };
+    });
+    stableSort(sortedPlaylistReps, (left, right) => left.bandwidth - right.bandwidth); // filter out any playlists that have been excluded due to
+    // incompatible configurations
+
+    sortedPlaylistReps = sortedPlaylistReps.filter(rep => !Playlist.isIncompatible(rep.playlist)); // filter out any playlists that have been disabled manually through the representations
+    // api or excluded temporarily due to playback errors.
+
+    let enabledPlaylistReps = sortedPlaylistReps.filter(rep => Playlist.isEnabled(rep.playlist));
+    if (!enabledPlaylistReps.length) {
+      // if there are no enabled playlists, then they have all been excluded or disabled
+      // by the user through the representations api. In this case, ignore exclusion and
+      // fallback to what the user wants by using playlists the user has not disabled.
+      enabledPlaylistReps = sortedPlaylistReps.filter(rep => !Playlist.isDisabled(rep.playlist));
+    } // filter out any variant that has greater effective bitrate
+    // than the current estimated bandwidth
+
+    const bandwidthPlaylistReps = enabledPlaylistReps.filter(rep => rep.bandwidth * Config.BANDWIDTH_VARIANCE < playerBandwidth);
+    let highestRemainingBandwidthRep = bandwidthPlaylistReps[bandwidthPlaylistReps.length - 1]; // get all of the renditions with the same (highest) bandwidth
+    // and then taking the very first element
+
+    const bandwidthBestRep = bandwidthPlaylistReps.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0]; // if we're not going to limit renditions by player size, make an early decision.
+
+    if (limitRenditionByPlayerDimensions === false) {
+      const chosenRep = bandwidthBestRep || enabledPlaylistReps[0] || sortedPlaylistReps[0];
+      if (chosenRep && chosenRep.playlist) {
+        let type = 'sortedPlaylistReps';
+        if (bandwidthBestRep) {
+          type = 'bandwidthBestRep';
+        }
+        if (enabledPlaylistReps[0]) {
+          type = 'enabledPlaylistReps';
+        }
+        logFn(`choosing ${representationToString(chosenRep)} using ${type} with options`, options);
+        return chosenRep.playlist;
+      }
+      logFn('could not choose a playlist with options', options);
+      return null;
+    } // filter out playlists without resolution information
+
+    const haveResolution = bandwidthPlaylistReps.filter(rep => rep.width && rep.height); // sort variants by resolution
+
+    stableSort(haveResolution, (left, right) => left.width - right.width); // if we have the exact resolution as the player use it
+
+    const resolutionBestRepList = haveResolution.filter(rep => rep.width === playerWidth && rep.height === playerHeight);
+    highestRemainingBandwidthRep = resolutionBestRepList[resolutionBestRepList.length - 1]; // ensure that we pick the highest bandwidth variant that have exact resolution
+
+    const resolutionBestRep = resolutionBestRepList.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0];
+    let resolutionPlusOneList;
+    let resolutionPlusOneSmallest;
+    let resolutionPlusOneRep; // find the smallest variant that is larger than the player
+    // if there is no match of exact resolution
+
+    if (!resolutionBestRep) {
+      resolutionPlusOneList = haveResolution.filter(rep => rep.width > playerWidth || rep.height > playerHeight); // find all the variants have the same smallest resolution
+
+      resolutionPlusOneSmallest = resolutionPlusOneList.filter(rep => rep.width === resolutionPlusOneList[0].width && rep.height === resolutionPlusOneList[0].height); // ensure that we also pick the highest bandwidth variant that
+      // is just-larger-than the video player
+
+      highestRemainingBandwidthRep = resolutionPlusOneSmallest[resolutionPlusOneSmallest.length - 1];
+      resolutionPlusOneRep = resolutionPlusOneSmallest.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0];
+    }
+    let leastPixelDiffRep; // If this selector proves to be better than others,
+    // resolutionPlusOneRep and resolutionBestRep and all
+    // the code involving them should be removed.
+
+    if (playlistController.leastPixelDiffSelector) {
+      // find the variant that is closest to the player's pixel size
+      const leastPixelDiffList = haveResolution.map(rep => {
+        rep.pixelDiff = Math.abs(rep.width - playerWidth) + Math.abs(rep.height - playerHeight);
+        return rep;
+      }); // get the highest bandwidth, closest resolution playlist
+
+      stableSort(leastPixelDiffList, (left, right) => {
+        // sort by highest bandwidth if pixelDiff is the same
+        if (left.pixelDiff === right.pixelDiff) {
+          return right.bandwidth - left.bandwidth;
+        }
+        return left.pixelDiff - right.pixelDiff;
+      });
+      leastPixelDiffRep = leastPixelDiffList[0];
+    } // fallback chain of variants
+
+    const chosenRep = leastPixelDiffRep || resolutionPlusOneRep || resolutionBestRep || bandwidthBestRep || enabledPlaylistReps[0] || sortedPlaylistReps[0];
+    if (chosenRep && chosenRep.playlist) {
+      let type = 'sortedPlaylistReps';
+      if (leastPixelDiffRep) {
+        type = 'leastPixelDiffRep';
+      } else if (resolutionPlusOneRep) {
+        type = 'resolutionPlusOneRep';
+      } else if (resolutionBestRep) {
+        type = 'resolutionBestRep';
+      } else if (bandwidthBestRep) {
+        type = 'bandwidthBestRep';
+      } else if (enabledPlaylistReps[0]) {
+        type = 'enabledPlaylistReps';
+      }
+      logFn(`choosing ${representationToString(chosenRep)} using ${type} with options`, options);
+      return chosenRep.playlist;
+    }
+    logFn('could not choose a playlist with options', options);
+    return null;
+  };
+
+  /**
+   * Chooses the appropriate media playlist based on the most recent
+   * bandwidth estimate and the player size.
+   *
+   * Expects to be called within the context of an instance of VhsHandler
+   *
+   * @return {Playlist} the highest bitrate playlist less than the
+   * currently detected bandwidth, accounting for some amount of
+   * bandwidth variance
+   */
+
+  const lastBandwidthSelector = function () {
+    let pixelRatio = this.useDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
+    if (!isNaN(this.customPixelRatio)) {
+      pixelRatio = this.customPixelRatio;
+    }
+    return simpleSelector(this.playlists.main, this.systemBandwidth, parseInt(safeGetComputedStyle(this.tech_.el(), 'width'), 10) * pixelRatio, parseInt(safeGetComputedStyle(this.tech_.el(), 'height'), 10) * pixelRatio, this.limitRenditionByPlayerDimensions, this.playlistController_);
+  };
+  /**
+   * Chooses the appropriate media playlist based on an
+   * exponential-weighted moving average of the bandwidth after
+   * filtering for player size.
+   *
+   * Expects to be called within the context of an instance of VhsHandler
+   *
+   * @param {number} decay - a number between 0 and 1. Higher values of
+   * this parameter will cause previous bandwidth estimates to lose
+   * significance more quickly.
+   * @return {Function} a function which can be invoked to create a new
+   * playlist selector function.
+   * @see https://en.wikipedia.org/wiki/Moving_average#Exponential_moving_average
+   */
+
+  const movingAverageBandwidthSelector = function (decay) {
+    let average = -1;
+    let lastSystemBandwidth = -1;
+    if (decay < 0 || decay > 1) {
+      throw new Error('Moving average bandwidth decay must be between 0 and 1.');
+    }
+    return function () {
+      let pixelRatio = this.useDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
+      if (!isNaN(this.customPixelRatio)) {
+        pixelRatio = this.customPixelRatio;
+      }
+      if (average < 0) {
+        average = this.systemBandwidth;
+        lastSystemBandwidth = this.systemBandwidth;
+      } // stop the average value from decaying for every 250ms
+      // when the systemBandwidth is constant
+      // and
+      // stop average from setting to a very low value when the
+      // systemBandwidth becomes 0 in case of chunk cancellation
+
+      if (this.systemBandwidth > 0 && this.systemBandwidth !== lastSystemBandwidth) {
+        average = decay * this.systemBandwidth + (1 - decay) * average;
+        lastSystemBandwidth = this.systemBandwidth;
+      }
+      return simpleSelector(this.playlists.main, average, parseInt(safeGetComputedStyle(this.tech_.el(), 'width'), 10) * pixelRatio, parseInt(safeGetComputedStyle(this.tech_.el(), 'height'), 10) * pixelRatio, this.limitRenditionByPlayerDimensions, this.playlistController_);
+    };
+  };
+  /**
+   * Chooses the appropriate media playlist based on the potential to rebuffer
+   *
+   * @param {Object} settings
+   *        Object of information required to use this selector
+   * @param {Object} settings.main
+   *        Object representation of the main manifest
+   * @param {number} settings.currentTime
+   *        The current time of the player
+   * @param {number} settings.bandwidth
+   *        Current measured bandwidth
+   * @param {number} settings.duration
+   *        Duration of the media
+   * @param {number} settings.segmentDuration
+   *        Segment duration to be used in round trip time calculations
+   * @param {number} settings.timeUntilRebuffer
+   *        Time left in seconds until the player has to rebuffer
+   * @param {number} settings.currentTimeline
+   *        The current timeline segments are being loaded from
+   * @param {SyncController} settings.syncController
+   *        SyncController for determining if we have a sync point for a given playlist
+   * @return {Object|null}
+   *         {Object} return.playlist
+   *         The highest bandwidth playlist with the least amount of rebuffering
+   *         {Number} return.rebufferingImpact
+   *         The amount of time in seconds switching to this playlist will rebuffer. A
+   *         negative value means that switching will cause zero rebuffering.
+   */
+
+  const minRebufferMaxBandwidthSelector = function (settings) {
+    const {
+      main,
+      currentTime,
+      bandwidth,
+      duration,
+      segmentDuration,
+      timeUntilRebuffer,
+      currentTimeline,
+      syncController
+    } = settings; // filter out any playlists that have been excluded due to
+    // incompatible configurations
+
+    const compatiblePlaylists = main.playlists.filter(playlist => !Playlist.isIncompatible(playlist)); // filter out any playlists that have been disabled manually through the representations
+    // api or excluded temporarily due to playback errors.
+
+    let enabledPlaylists = compatiblePlaylists.filter(Playlist.isEnabled);
+    if (!enabledPlaylists.length) {
+      // if there are no enabled playlists, then they have all been excluded or disabled
+      // by the user through the representations api. In this case, ignore exclusion and
+      // fallback to what the user wants by using playlists the user has not disabled.
+      enabledPlaylists = compatiblePlaylists.filter(playlist => !Playlist.isDisabled(playlist));
+    }
+    const bandwidthPlaylists = enabledPlaylists.filter(Playlist.hasAttribute.bind(null, 'BANDWIDTH'));
+    const rebufferingEstimates = bandwidthPlaylists.map(playlist => {
+      const syncPoint = syncController.getSyncPoint(playlist, duration, currentTimeline, currentTime); // If there is no sync point for this playlist, switching to it will require a
+      // sync request first. This will double the request time
+
+      const numRequests = syncPoint ? 1 : 2;
+      const requestTimeEstimate = Playlist.estimateSegmentRequestTime(segmentDuration, bandwidth, playlist);
+      const rebufferingImpact = requestTimeEstimate * numRequests - timeUntilRebuffer;
+      return {
+        playlist,
+        rebufferingImpact
+      };
+    });
+    const noRebufferingPlaylists = rebufferingEstimates.filter(estimate => estimate.rebufferingImpact <= 0); // Sort by bandwidth DESC
+
+    stableSort(noRebufferingPlaylists, (a, b) => comparePlaylistBandwidth(b.playlist, a.playlist));
+    if (noRebufferingPlaylists.length) {
+      return noRebufferingPlaylists[0];
+    }
+    stableSort(rebufferingEstimates, (a, b) => a.rebufferingImpact - b.rebufferingImpact);
+    return rebufferingEstimates[0] || null;
+  };
+  /**
+   * Chooses the appropriate media playlist, which in this case is the lowest bitrate
+   * one with video.  If no renditions with video exist, return the lowest audio rendition.
+   *
+   * Expects to be called within the context of an instance of VhsHandler
+   *
+   * @return {Object|null}
+   *         {Object} return.playlist
+   *         The lowest bitrate playlist that contains a video codec.  If no such rendition
+   *         exists pick the lowest audio rendition.
+   */
+
+  const lowestBitrateCompatibleVariantSelector = function () {
+    // filter out any playlists that have been excluded due to
+    // incompatible configurations or playback errors
+    const playlists = this.playlists.main.playlists.filter(Playlist.isEnabled); // Sort ascending by bitrate
+
+    stableSort(playlists, (a, b) => comparePlaylistBandwidth(a, b)); // Parse and assume that playlists with no video codec have no video
+    // (this is not necessarily true, although it is generally true).
+    //
+    // If an entire manifest has no valid videos everything will get filtered
+    // out.
+
+    const playlistsWithVideo = playlists.filter(playlist => !!codecsForPlaylist(this.playlists.main, playlist).video);
+    return playlistsWithVideo[0] || null;
+  };
+
+  /**
+   * Combine all segments into a single Uint8Array
+   *
+   * @param {Object} segmentObj
+   * @return {Uint8Array} concatenated bytes
+   * @private
+   */
+  const concatSegments = segmentObj => {
+    let offset = 0;
+    let tempBuffer;
+    if (segmentObj.bytes) {
+      tempBuffer = new Uint8Array(segmentObj.bytes); // combine the individual segments into one large typed-array
+
+      segmentObj.segments.forEach(segment => {
+        tempBuffer.set(segment, offset);
+        offset += segment.byteLength;
+      });
+    }
+    return tempBuffer;
+  };
+  /**
+   * Example:
+   * https://host.com/path1/path2/path3/segment.ts?arg1=val1
+   * -->
+   * path3/segment.ts
+   *
+   * @param resolvedUri
+   * @return {string}
+   */
+
+  function compactSegmentUrlDescription(resolvedUri) {
+    try {
+      return new URL(resolvedUri).pathname.split('/').slice(-2).join('/');
+    } catch (e) {
+      return '';
+    }
+  }
+
+  /**
+   * @file text-tracks.js
+   */
+  /**
+   * Create captions text tracks on video.js if they do not exist
+   *
+   * @param {Object} inbandTextTracks a reference to current inbandTextTracks
+   * @param {Object} tech the video.js tech
+   * @param {Object} captionStream the caption stream to create
+   * @private
+   */
+
+  const createCaptionsTrackIfNotExists = function (inbandTextTracks, tech, captionStream) {
+    if (!inbandTextTracks[captionStream]) {
+      tech.trigger({
+        type: 'usage',
+        name: 'vhs-608'
+      });
+      let instreamId = captionStream; // we need to translate SERVICEn for 708 to how mux.js currently labels them
+
+      if (/^cc708_/.test(captionStream)) {
+        instreamId = 'SERVICE' + captionStream.split('_')[1];
+      }
+      const track = tech.textTracks().getTrackById(instreamId);
+      if (track) {
+        // Resuse an existing track with a CC# id because this was
+        // very likely created by videojs-contrib-hls from information
+        // in the m3u8 for us to use
+        inbandTextTracks[captionStream] = track;
+      } else {
+        // This section gets called when we have caption services that aren't specified in the manifest.
+        // Manifest level caption services are handled in media-groups.js under CLOSED-CAPTIONS.
+        const captionServices = tech.options_.vhs && tech.options_.vhs.captionServices || {};
+        let label = captionStream;
+        let language = captionStream;
+        let def = false;
+        const captionService = captionServices[instreamId];
+        if (captionService) {
+          label = captionService.label;
+          language = captionService.language;
+          def = captionService.default;
+        } // Otherwise, create a track with the default `CC#` label and
+        // without a language
+
+        inbandTextTracks[captionStream] = tech.addRemoteTextTrack({
+          kind: 'captions',
+          id: instreamId,
+          // TODO: investigate why this doesn't seem to turn the caption on by default
+          default: def,
+          label,
+          language
+        }, false).track;
+      }
+    }
+  };
+  /**
+   * Add caption text track data to a source handler given an array of captions
+   *
+   * @param {Object}
+   *   @param {Object} inbandTextTracks the inband text tracks
+   *   @param {number} timestampOffset the timestamp offset of the source buffer
+   *   @param {Array} captionArray an array of caption data
+   * @private
+   */
+
+  const addCaptionData = function ({
+    inbandTextTracks,
+    captionArray,
+    timestampOffset
+  }) {
+    if (!captionArray) {
+      return;
+    }
+    const Cue = window.WebKitDataCue || window.VTTCue;
+    captionArray.forEach(caption => {
+      const track = caption.stream; // in CEA 608 captions, video.js/mux.js sends a content array
+      // with positioning data
+
+      if (caption.content) {
+        caption.content.forEach(value => {
+          const cue = new Cue(caption.startTime + timestampOffset, caption.endTime + timestampOffset, value.text);
+          cue.line = value.line;
+          cue.align = 'left';
+          cue.position = value.position;
+          cue.positionAlign = 'line-left';
+          inbandTextTracks[track].addCue(cue);
+        });
+      } else {
+        // otherwise, a text value with combined captions is sent
+        inbandTextTracks[track].addCue(new Cue(caption.startTime + timestampOffset, caption.endTime + timestampOffset, caption.text));
+      }
+    });
+  };
+  /**
+   * Define properties on a cue for backwards compatability,
+   * but warn the user that the way that they are using it
+   * is depricated and will be removed at a later date.
+   *
+   * @param {Cue} cue the cue to add the properties on
+   * @private
+   */
+
+  const deprecateOldCue = function (cue) {
+    Object.defineProperties(cue.frame, {
+      id: {
+        get() {
+          videojs.log.warn('cue.frame.id is deprecated. Use cue.value.key instead.');
+          return cue.value.key;
+        }
+      },
+      value: {
+        get() {
+          videojs.log.warn('cue.frame.value is deprecated. Use cue.value.data instead.');
+          return cue.value.data;
+        }
+      },
+      privateData: {
+        get() {
+          videojs.log.warn('cue.frame.privateData is deprecated. Use cue.value.data instead.');
+          return cue.value.data;
+        }
+      }
+    });
+  };
+  /**
+   * Add metadata text track data to a source handler given an array of metadata
+   *
+   * @param {Object}
+   *   @param {Object} inbandTextTracks the inband text tracks
+   *   @param {Array} metadataArray an array of meta data
+   *   @param {number} timestampOffset the timestamp offset of the source buffer
+   *   @param {number} videoDuration the duration of the video
+   * @private
+   */
+
+  const addMetadata = ({
+    inbandTextTracks,
+    metadataArray,
+    timestampOffset,
+    videoDuration
+  }) => {
+    if (!metadataArray) {
+      return;
+    }
+    const Cue = window.WebKitDataCue || window.VTTCue;
+    const metadataTrack = inbandTextTracks.metadataTrack_;
+    if (!metadataTrack) {
+      return;
+    }
+    metadataArray.forEach(metadata => {
+      const time = metadata.cueTime + timestampOffset; // if time isn't a finite number between 0 and Infinity, like NaN,
+      // ignore this bit of metadata.
+      // This likely occurs when you have an non-timed ID3 tag like TIT2,
+      // which is the "Title/Songname/Content description" frame
+
+      if (typeof time !== 'number' || window.isNaN(time) || time < 0 || !(time < Infinity)) {
+        return;
+      } // If we have no frames, we can't create a cue.
+
+      if (!metadata.frames || !metadata.frames.length) {
+        return;
+      }
+      metadata.frames.forEach(frame => {
+        const cue = new Cue(time, time, frame.value || frame.url || frame.data || '');
+        cue.frame = frame;
+        cue.value = frame;
+        deprecateOldCue(cue);
+        metadataTrack.addCue(cue);
+      });
+    });
+    if (!metadataTrack.cues || !metadataTrack.cues.length) {
+      return;
+    } // Updating the metadeta cues so that
+    // the endTime of each cue is the startTime of the next cue
+    // the endTime of last cue is the duration of the video
+
+    const cues = metadataTrack.cues;
+    const cuesArray = []; // Create a copy of the TextTrackCueList...
+    // ...disregarding cues with a falsey value
+
+    for (let i = 0; i < cues.length; i++) {
+      if (cues[i]) {
+        cuesArray.push(cues[i]);
+      }
+    } // Group cues by their startTime value
+
+    const cuesGroupedByStartTime = cuesArray.reduce((obj, cue) => {
+      const timeSlot = obj[cue.startTime] || [];
+      timeSlot.push(cue);
+      obj[cue.startTime] = timeSlot;
+      return obj;
+    }, {}); // Sort startTimes by ascending order
+
+    const sortedStartTimes = Object.keys(cuesGroupedByStartTime).sort((a, b) => Number(a) - Number(b)); // Map each cue group's endTime to the next group's startTime
+
+    sortedStartTimes.forEach((startTime, idx) => {
+      const cueGroup = cuesGroupedByStartTime[startTime];
+      const finiteDuration = isFinite(videoDuration) ? videoDuration : startTime;
+      const nextTime = Number(sortedStartTimes[idx + 1]) || finiteDuration; // Map each cue's endTime the next group's startTime
+
+      cueGroup.forEach(cue => {
+        cue.endTime = nextTime;
+      });
+    });
+  }; // object for mapping daterange attributes
+
+  const dateRangeAttr = {
+    id: 'ID',
+    class: 'CLASS',
+    startDate: 'START-DATE',
+    duration: 'DURATION',
+    endDate: 'END-DATE',
+    endOnNext: 'END-ON-NEXT',
+    plannedDuration: 'PLANNED-DURATION',
+    scte35Out: 'SCTE35-OUT',
+    scte35In: 'SCTE35-IN'
+  };
+  const dateRangeKeysToOmit = new Set(['id', 'class', 'startDate', 'duration', 'endDate', 'endOnNext', 'startTime', 'endTime', 'processDateRange']);
+  /**
+   * Add DateRange metadata text track to a source handler given an array of metadata
+   *
+   * @param {Object}
+   *   @param {Object} inbandTextTracks the inband text tracks
+   *   @param {Array} dateRanges parsed media playlist
+   * @private
+   */
+
+  const addDateRangeMetadata = ({
+    inbandTextTracks,
+    dateRanges
+  }) => {
+    const metadataTrack = inbandTextTracks.metadataTrack_;
+    if (!metadataTrack) {
+      return;
+    }
+    const Cue = window.WebKitDataCue || window.VTTCue;
+    dateRanges.forEach(dateRange => {
+      // we generate multiple cues for each date range with different attributes
+      for (const key of Object.keys(dateRange)) {
+        if (dateRangeKeysToOmit.has(key)) {
+          continue;
+        }
+        const cue = new Cue(dateRange.startTime, dateRange.endTime, '');
+        cue.id = dateRange.id;
+        cue.type = 'com.apple.quicktime.HLS';
+        cue.value = {
+          key: dateRangeAttr[key],
+          data: dateRange[key]
+        };
+        if (key === 'scte35Out' || key === 'scte35In') {
+          cue.value.data = new Uint8Array(cue.value.data.match(/[\da-f]{2}/gi)).buffer;
+        }
+        metadataTrack.addCue(cue);
+      }
+      dateRange.processDateRange();
+    });
+  };
+  /**
+   * Create metadata text track on video.js if it does not exist
+   *
+   * @param {Object} inbandTextTracks a reference to current inbandTextTracks
+   * @param {string} dispatchType the inband metadata track dispatch type
+   * @param {Object} tech the video.js tech
+   * @private
+   */
+
+  const createMetadataTrackIfNotExists = (inbandTextTracks, dispatchType, tech) => {
+    if (inbandTextTracks.metadataTrack_) {
+      return;
+    }
+    inbandTextTracks.metadataTrack_ = tech.addRemoteTextTrack({
+      kind: 'metadata',
+      label: 'Timed Metadata'
+    }, false).track;
+    if (!videojs.browser.IS_ANY_SAFARI) {
+      inbandTextTracks.metadataTrack_.inBandMetadataTrackDispatchType = dispatchType;
+    }
+  };
+  /**
+   * Remove cues from a track on video.js.
+   *
+   * @param {Double} start start of where we should remove the cue
+   * @param {Double} end end of where the we should remove the cue
+   * @param {Object} track the text track to remove the cues from
+   * @private
+   */
+
+  const removeCuesFromTrack = function (start, end, track) {
+    let i;
+    let cue;
+    if (!track) {
+      return;
+    }
+    if (!track.cues) {
+      return;
+    }
+    i = track.cues.length;
+    while (i--) {
+      cue = track.cues[i]; // Remove any cue within the provided start and end time
+
+      if (cue.startTime >= start && cue.endTime <= end) {
+        track.removeCue(cue);
+      }
+    }
+  };
+  /**
+   * Remove duplicate cues from a track on video.js (a cue is considered a
+   * duplicate if it has the same time interval and text as another)
+   *
+   * @param {Object} track the text track to remove the duplicate cues from
+   * @private
+   */
+
+  const removeDuplicateCuesFromTrack = function (track) {
+    const cues = track.cues;
+    if (!cues) {
+      return;
+    }
+    const uniqueCues = {};
+    for (let i = cues.length - 1; i >= 0; i--) {
+      const cue = cues[i];
+      const cueKey = `${cue.startTime}-${cue.endTime}-${cue.text}`;
+      if (uniqueCues[cueKey]) {
+        track.removeCue(cue);
+      } else {
+        uniqueCues[cueKey] = cue;
+      }
+    }
+  };
+
+  /**
+   * Returns a list of gops in the buffer that have a pts value of 3 seconds or more in
+   * front of current time.
+   *
+   * @param {Array} buffer
+   *        The current buffer of gop information
+   * @param {number} currentTime
+   *        The current time
+   * @param {Double} mapping
+   *        Offset to map display time to stream presentation time
+   * @return {Array}
+   *         List of gops considered safe to append over
+   */
+
+  const gopsSafeToAlignWith = (buffer, currentTime, mapping) => {
+    if (typeof currentTime === 'undefined' || currentTime === null || !buffer.length) {
+      return [];
+    } // pts value for current time + 3 seconds to give a bit more wiggle room
+
+    const currentTimePts = Math.ceil((currentTime - mapping + 3) * clock_1);
+    let i;
+    for (i = 0; i < buffer.length; i++) {
+      if (buffer[i].pts > currentTimePts) {
+        break;
+      }
+    }
+    return buffer.slice(i);
+  };
+  /**
+   * Appends gop information (timing and byteLength) received by the transmuxer for the
+   * gops appended in the last call to appendBuffer
+   *
+   * @param {Array} buffer
+   *        The current buffer of gop information
+   * @param {Array} gops
+   *        List of new gop information
+   * @param {boolean} replace
+   *        If true, replace the buffer with the new gop information. If false, append the
+   *        new gop information to the buffer in the right location of time.
+   * @return {Array}
+   *         Updated list of gop information
+   */
+
+  const updateGopBuffer = (buffer, gops, replace) => {
+    if (!gops.length) {
+      return buffer;
+    }
+    if (replace) {
+      // If we are in safe append mode, then completely overwrite the gop buffer
+      // with the most recent appeneded data. This will make sure that when appending
+      // future segments, we only try to align with gops that are both ahead of current
+      // time and in the last segment appended.
+      return gops.slice();
+    }
+    const start = gops[0].pts;
+    let i = 0;
+    for (i; i < buffer.length; i++) {
+      if (buffer[i].pts >= start) {
+        break;
+      }
+    }
+    return buffer.slice(0, i).concat(gops);
+  };
+  /**
+   * Removes gop information in buffer that overlaps with provided start and end
+   *
+   * @param {Array} buffer
+   *        The current buffer of gop information
+   * @param {Double} start
+   *        position to start the remove at
+   * @param {Double} end
+   *        position to end the remove at
+   * @param {Double} mapping
+   *        Offset to map display time to stream presentation time
+   */
+
+  const removeGopBuffer = (buffer, start, end, mapping) => {
+    const startPts = Math.ceil((start - mapping) * clock_1);
+    const endPts = Math.ceil((end - mapping) * clock_1);
+    const updatedBuffer = buffer.slice();
+    let i = buffer.length;
+    while (i--) {
+      if (buffer[i].pts <= endPts) {
+        break;
+      }
+    }
+    if (i === -1) {
+      // no removal because end of remove range is before start of buffer
+      return updatedBuffer;
+    }
+    let j = i + 1;
+    while (j--) {
+      if (buffer[j].pts <= startPts) {
+        break;
+      }
+    } // clamp remove range start to 0 index
+
+    j = Math.max(j, 0);
+    updatedBuffer.splice(j, i - j + 1);
+    return updatedBuffer;
+  };
+  const shallowEqual = function (a, b) {
+    // if both are undefined
+    // or one or the other is undefined
+    // they are not equal
+    if (!a && !b || !a && b || a && !b) {
+      return false;
+    } // they are the same object and thus, equal
+
+    if (a === b) {
+      return true;
+    } // sort keys so we can make sure they have
+    // all the same keys later.
+
+    const akeys = Object.keys(a).sort();
+    const bkeys = Object.keys(b).sort(); // different number of keys, not equal
+
+    if (akeys.length !== bkeys.length) {
+      return false;
+    }
+    for (let i = 0; i < akeys.length; i++) {
+      const key = akeys[i]; // different sorted keys, not equal
+
+      if (key !== bkeys[i]) {
+        return false;
+      } // different values, not equal
+
+      if (a[key] !== b[key]) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  // https://www.w3.org/TR/WebIDL-1/#quotaexceedederror
+  const QUOTA_EXCEEDED_ERR = 22;
+
+  /**
+   * The segment loader has no recourse except to fetch a segment in the
+   * current playlist and use the internal timestamps in that segment to
+   * generate a syncPoint. This function returns a good candidate index
+   * for that process.
+   *
+   * @param {Array} segments - the segments array from a playlist.
+   * @return {number} An index of a segment from the playlist to load
+   */
+
+  const getSyncSegmentCandidate = function (currentTimeline, segments, targetTime) {
+    segments = segments || [];
+    const timelineSegments = [];
+    let time = 0;
+    for (let i = 0; i < segments.length; i++) {
+      const segment = segments[i];
+      if (currentTimeline === segment.timeline) {
+        timelineSegments.push(i);
+        time += segment.duration;
+        if (time > targetTime) {
+          return i;
+        }
+      }
+    }
+    if (timelineSegments.length === 0) {
+      return 0;
+    } // default to the last timeline segment
+
+    return timelineSegments[timelineSegments.length - 1];
+  }; // In the event of a quota exceeded error, keep at least one second of back buffer. This
+  // number was arbitrarily chosen and may be updated in the future, but seemed reasonable
+  // as a start to prevent any potential issues with removing content too close to the
+  // playhead.
+
+  const MIN_BACK_BUFFER = 1; // in ms
+
+  const CHECK_BUFFER_DELAY = 500;
+  const finite = num => typeof num === 'number' && isFinite(num); // With most content hovering around 30fps, if a segment has a duration less than a half
+  // frame at 30fps or one frame at 60fps, the bandwidth and throughput calculations will
+  // not accurately reflect the rest of the content.
+
+  const MIN_SEGMENT_DURATION_TO_SAVE_STATS = 1 / 60;
+  const illegalMediaSwitch = (loaderType, startingMedia, trackInfo) => {
+    // Although these checks should most likely cover non 'main' types, for now it narrows
+    // the scope of our checks.
+    if (loaderType !== 'main' || !startingMedia || !trackInfo) {
+      return null;
+    }
+    if (!trackInfo.hasAudio && !trackInfo.hasVideo) {
+      return 'Neither audio nor video found in segment.';
+    }
+    if (startingMedia.hasVideo && !trackInfo.hasVideo) {
+      return 'Only audio found in segment when we expected video.' + ' We can\'t switch to audio only from a stream that had video.' + ' To get rid of this message, please add codec information to the manifest.';
+    }
+    if (!startingMedia.hasVideo && trackInfo.hasVideo) {
+      return 'Video found in segment when we expected only audio.' + ' We can\'t switch to a stream with video from an audio only stream.' + ' To get rid of this message, please add codec information to the manifest.';
+    }
+    return null;
+  };
+  /**
+   * Calculates a time value that is safe to remove from the back buffer without interrupting
+   * playback.
+   *
+   * @param {TimeRange} seekable
+   *        The current seekable range
+   * @param {number} currentTime
+   *        The current time of the player
+   * @param {number} targetDuration
+   *        The target duration of the current playlist
+   * @return {number}
+   *         Time that is safe to remove from the back buffer without interrupting playback
+   */
+
+  const safeBackBufferTrimTime = (seekable, currentTime, targetDuration) => {
+    // 30 seconds before the playhead provides a safe default for trimming.
+    //
+    // Choosing a reasonable default is particularly important for high bitrate content and
+    // VOD videos/live streams with large windows, as the buffer may end up overfilled and
+    // throw an APPEND_BUFFER_ERR.
+    let trimTime = currentTime - Config.BACK_BUFFER_LENGTH;
+    if (seekable.length) {
+      // Some live playlists may have a shorter window of content than the full allowed back
+      // buffer. For these playlists, don't save content that's no longer within the window.
+      trimTime = Math.max(trimTime, seekable.start(0));
+    } // Don't remove within target duration of the current time to avoid the possibility of
+    // removing the GOP currently being played, as removing it can cause playback stalls.
+
+    const maxTrimTime = currentTime - targetDuration;
+    return Math.min(maxTrimTime, trimTime);
+  };
+  const segmentInfoString = segmentInfo => {
+    const {
+      startOfSegment,
+      duration,
+      segment,
+      part,
+      playlist: {
+        mediaSequence: seq,
+        id,
+        segments = []
+      },
+      mediaIndex: index,
+      partIndex,
+      timeline
+    } = segmentInfo;
+    const segmentLen = segments.length - 1;
+    let selection = 'mediaIndex/partIndex increment';
+    if (segmentInfo.getMediaInfoForTime) {
+      selection = `getMediaInfoForTime (${segmentInfo.getMediaInfoForTime})`;
+    } else if (segmentInfo.isSyncRequest) {
+      selection = 'getSyncSegmentCandidate (isSyncRequest)';
+    }
+    if (segmentInfo.independent) {
+      selection += ` with independent ${segmentInfo.independent}`;
+    }
+    const hasPartIndex = typeof partIndex === 'number';
+    const name = segmentInfo.segment.uri ? 'segment' : 'pre-segment';
+    const zeroBasedPartCount = hasPartIndex ? getKnownPartCount({
+      preloadSegment: segment
+    }) - 1 : 0;
+    return `${name} [${seq + index}/${seq + segmentLen}]` + (hasPartIndex ? ` part [${partIndex}/${zeroBasedPartCount}]` : '') + ` segment start/end [${segment.start} => ${segment.end}]` + (hasPartIndex ? ` part start/end [${part.start} => ${part.end}]` : '') + ` startOfSegment [${startOfSegment}]` + ` duration [${duration}]` + ` timeline [${timeline}]` + ` selected by [${selection}]` + ` playlist [${id}]`;
+  };
+  const timingInfoPropertyForMedia = mediaType => `${mediaType}TimingInfo`;
+  /**
+   * Returns the timestamp offset to use for the segment.
+   *
+   * @param {number} segmentTimeline
+   *        The timeline of the segment
+   * @param {number} currentTimeline
+   *        The timeline currently being followed by the loader
+   * @param {number} startOfSegment
+   *        The estimated segment start
+   * @param {TimeRange[]} buffered
+   *        The loader's buffer
+   * @param {boolean} overrideCheck
+   *        If true, no checks are made to see if the timestamp offset value should be set,
+   *        but sets it directly to a value.
+   *
+   * @return {number|null}
+   *         Either a number representing a new timestamp offset, or null if the segment is
+   *         part of the same timeline
+   */
+
+  const timestampOffsetForSegment = ({
+    segmentTimeline,
+    currentTimeline,
+    startOfSegment,
+    buffered,
+    overrideCheck
+  }) => {
+    // Check to see if we are crossing a discontinuity to see if we need to set the
+    // timestamp offset on the transmuxer and source buffer.
+    //
+    // Previously, we changed the timestampOffset if the start of this segment was less than
+    // the currently set timestampOffset, but this isn't desirable as it can produce bad
+    // behavior, especially around long running live streams.
+    if (!overrideCheck && segmentTimeline === currentTimeline) {
+      return null;
+    } // When changing renditions, it's possible to request a segment on an older timeline. For
+    // instance, given two renditions with the following:
+    //
+    // #EXTINF:10
+    // segment1
+    // #EXT-X-DISCONTINUITY
+    // #EXTINF:10
+    // segment2
+    // #EXTINF:10
+    // segment3
+    //
+    // And the current player state:
+    //
+    // current time: 8
+    // buffer: 0 => 20
+    //
+    // The next segment on the current rendition would be segment3, filling the buffer from
+    // 20s onwards. However, if a rendition switch happens after segment2 was requested,
+    // then the next segment to be requested will be segment1 from the new rendition in
+    // order to fill time 8 and onwards. Using the buffered end would result in repeated
+    // content (since it would position segment1 of the new rendition starting at 20s). This
+    // case can be identified when the new segment's timeline is a prior value. Instead of
+    // using the buffered end, the startOfSegment can be used, which, hopefully, will be
+    // more accurate to the actual start time of the segment.
+
+    if (segmentTimeline < currentTimeline) {
+      return startOfSegment;
+    } // segmentInfo.startOfSegment used to be used as the timestamp offset, however, that
+    // value uses the end of the last segment if it is available. While this value
+    // should often be correct, it's better to rely on the buffered end, as the new
+    // content post discontinuity should line up with the buffered end as if it were
+    // time 0 for the new content.
+
+    return buffered.length ? buffered.end(buffered.length - 1) : startOfSegment;
+  };
+  /**
+   * Returns whether or not the loader should wait for a timeline change from the timeline
+   * change controller before processing the segment.
+   *
+   * Primary timing in VHS goes by video. This is different from most media players, as
+   * audio is more often used as the primary timing source. For the foreseeable future, VHS
+   * will continue to use video as the primary timing source, due to the current logic and
+   * expectations built around it.
+
+   * Since the timing follows video, in order to maintain sync, the video loader is
+   * responsible for setting both audio and video source buffer timestamp offsets.
+   *
+   * Setting different values for audio and video source buffers could lead to
+   * desyncing. The following examples demonstrate some of the situations where this
+   * distinction is important. Note that all of these cases involve demuxed content. When
+   * content is muxed, the audio and video are packaged together, therefore syncing
+   * separate media playlists is not an issue.
+   *
+   * CASE 1: Audio prepares to load a new timeline before video:
+   *
+   * Timeline:       0                 1
+   * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Audio Loader:                     ^
+   * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Video Loader              ^
+   *
+   * In the above example, the audio loader is preparing to load the 6th segment, the first
+   * after a discontinuity, while the video loader is still loading the 5th segment, before
+   * the discontinuity.
+   *
+   * If the audio loader goes ahead and loads and appends the 6th segment before the video
+   * loader crosses the discontinuity, then when appended, the 6th audio segment will use
+   * the timestamp offset from timeline 0. This will likely lead to desyncing. In addition,
+   * the audio loader must provide the audioAppendStart value to trim the content in the
+   * transmuxer, and that value relies on the audio timestamp offset. Since the audio
+   * timestamp offset is set by the video (main) loader, the audio loader shouldn't load the
+   * segment until that value is provided.
+   *
+   * CASE 2: Video prepares to load a new timeline before audio:
+   *
+   * Timeline:       0                 1
+   * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Audio Loader:             ^
+   * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Video Loader                      ^
+   *
+   * In the above example, the video loader is preparing to load the 6th segment, the first
+   * after a discontinuity, while the audio loader is still loading the 5th segment, before
+   * the discontinuity.
+   *
+   * If the video loader goes ahead and loads and appends the 6th segment, then once the
+   * segment is loaded and processed, both the video and audio timestamp offsets will be
+   * set, since video is used as the primary timing source. This is to ensure content lines
+   * up appropriately, as any modifications to the video timing are reflected by audio when
+   * the video loader sets the audio and video timestamp offsets to the same value. However,
+   * setting the timestamp offset for audio before audio has had a chance to change
+   * timelines will likely lead to desyncing, as the audio loader will append segment 5 with
+   * a timestamp intended to apply to segments from timeline 1 rather than timeline 0.
+   *
+   * CASE 3: When seeking, audio prepares to load a new timeline before video
+   *
+   * Timeline:       0                 1
+   * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Audio Loader:           ^
+   * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Video Loader            ^
+   *
+   * In the above example, both audio and video loaders are loading segments from timeline
+   * 0, but imagine that the seek originated from timeline 1.
+   *
+   * When seeking to a new timeline, the timestamp offset will be set based on the expected
+   * segment start of the loaded video segment. In order to maintain sync, the audio loader
+   * must wait for the video loader to load its segment and update both the audio and video
+   * timestamp offsets before it may load and append its own segment. This is the case
+   * whether the seek results in a mismatched segment request (e.g., the audio loader
+   * chooses to load segment 3 and the video loader chooses to load segment 4) or the
+   * loaders choose to load the same segment index from each playlist, as the segments may
+   * not be aligned perfectly, even for matching segment indexes.
+   *
+   * @param {Object} timelinechangeController
+   * @param {number} currentTimeline
+   *        The timeline currently being followed by the loader
+   * @param {number} segmentTimeline
+   *        The timeline of the segment being loaded
+   * @param {('main'|'audio')} loaderType
+   *        The loader type
+   * @param {boolean} audioDisabled
+   *        Whether the audio is disabled for the loader. This should only be true when the
+   *        loader may have muxed audio in its segment, but should not append it, e.g., for
+   *        the main loader when an alternate audio playlist is active.
+   *
+   * @return {boolean}
+   *         Whether the loader should wait for a timeline change from the timeline change
+   *         controller before processing the segment
+   */
+
+  const shouldWaitForTimelineChange = ({
+    timelineChangeController,
+    currentTimeline,
+    segmentTimeline,
+    loaderType,
+    audioDisabled
+  }) => {
+    if (currentTimeline === segmentTimeline) {
+      return false;
+    }
+    if (loaderType === 'audio') {
+      const lastMainTimelineChange = timelineChangeController.lastTimelineChange({
+        type: 'main'
+      }); // Audio loader should wait if:
+      //
+      // * main hasn't had a timeline change yet (thus has not loaded its first segment)
+      // * main hasn't yet changed to the timeline audio is looking to load
+
+      return !lastMainTimelineChange || lastMainTimelineChange.to !== segmentTimeline;
+    } // The main loader only needs to wait for timeline changes if there's demuxed audio.
+    // Otherwise, there's nothing to wait for, since audio would be muxed into the main
+    // loader's segments (or the content is audio/video only and handled by the main
+    // loader).
+
+    if (loaderType === 'main' && audioDisabled) {
+      const pendingAudioTimelineChange = timelineChangeController.pendingTimelineChange({
+        type: 'audio'
+      }); // Main loader should wait for the audio loader if audio is not pending a timeline
+      // change to the current timeline.
+      //
+      // Since the main loader is responsible for setting the timestamp offset for both
+      // audio and video, the main loader must wait for audio to be about to change to its
+      // timeline before setting the offset, otherwise, if audio is behind in loading,
+      // segments from the previous timeline would be adjusted by the new timestamp offset.
+      //
+      // This requirement means that video will not cross a timeline until the audio is
+      // about to cross to it, so that way audio and video will always cross the timeline
+      // together.
+      //
+      // In addition to normal timeline changes, these rules also apply to the start of a
+      // stream (going from a non-existent timeline, -1, to timeline 0). It's important
+      // that these rules apply to the first timeline change because if they did not, it's
+      // possible that the main loader will cross two timelines before the audio loader has
+      // crossed one. Logic may be implemented to handle the startup as a special case, but
+      // it's easier to simply treat all timeline changes the same.
+
+      if (pendingAudioTimelineChange && pendingAudioTimelineChange.to === segmentTimeline) {
+        return false;
+      }
+      return true;
+    }
+    return false;
+  };
+  const mediaDuration = timingInfos => {
+    let maxDuration = 0;
+    ['video', 'audio'].forEach(function (type) {
+      const typeTimingInfo = timingInfos[`${type}TimingInfo`];
+      if (!typeTimingInfo) {
+        return;
+      }
+      const {
+        start,
+        end
+      } = typeTimingInfo;
+      let duration;
+      if (typeof start === 'bigint' || typeof end === 'bigint') {
+        duration = window.BigInt(end) - window.BigInt(start);
+      } else if (typeof start === 'number' && typeof end === 'number') {
+        duration = end - start;
+      }
+      if (typeof duration !== 'undefined' && duration > maxDuration) {
+        maxDuration = duration;
+      }
+    }); // convert back to a number if it is lower than MAX_SAFE_INTEGER
+    // as we only need BigInt when we are above that.
+
+    if (typeof maxDuration === 'bigint' && maxDuration < Number.MAX_SAFE_INTEGER) {
+      maxDuration = Number(maxDuration);
+    }
+    return maxDuration;
+  };
+  const segmentTooLong = ({
+    segmentDuration,
+    maxDuration
+  }) => {
+    // 0 duration segments are most likely due to metadata only segments or a lack of
+    // information.
+    if (!segmentDuration) {
+      return false;
+    } // For HLS:
+    //
+    // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.3.1
+    // The EXTINF duration of each Media Segment in the Playlist
+    // file, when rounded to the nearest integer, MUST be less than or equal
+    // to the target duration; longer segments can trigger playback stalls
+    // or other errors.
+    //
+    // For DASH, the mpd-parser uses the largest reported segment duration as the target
+    // duration. Although that reported duration is occasionally approximate (i.e., not
+    // exact), a strict check may report that a segment is too long more often in DASH.
+
+    return Math.round(segmentDuration) > maxDuration + TIME_FUDGE_FACTOR;
+  };
+  const getTroublesomeSegmentDurationMessage = (segmentInfo, sourceType) => {
+    // Right now we aren't following DASH's timing model exactly, so only perform
+    // this check for HLS content.
+    if (sourceType !== 'hls') {
+      return null;
+    }
+    const segmentDuration = mediaDuration({
+      audioTimingInfo: segmentInfo.audioTimingInfo,
+      videoTimingInfo: segmentInfo.videoTimingInfo
+    }); // Don't report if we lack information.
+    //
+    // If the segment has a duration of 0 it is either a lack of information or a
+    // metadata only segment and shouldn't be reported here.
+
+    if (!segmentDuration) {
+      return null;
+    }
+    const targetDuration = segmentInfo.playlist.targetDuration;
+    const isSegmentWayTooLong = segmentTooLong({
+      segmentDuration,
+      maxDuration: targetDuration * 2
+    });
+    const isSegmentSlightlyTooLong = segmentTooLong({
+      segmentDuration,
+      maxDuration: targetDuration
+    });
+    const segmentTooLongMessage = `Segment with index ${segmentInfo.mediaIndex} ` + `from playlist ${segmentInfo.playlist.id} ` + `has a duration of ${segmentDuration} ` + `when the reported duration is ${segmentInfo.duration} ` + `and the target duration is ${targetDuration}. ` + 'For HLS content, a duration in excess of the target duration may result in ' + 'playback issues. See the HLS specification section on EXT-X-TARGETDURATION for ' + 'more details: ' + 'https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.3.1';
+    if (isSegmentWayTooLong || isSegmentSlightlyTooLong) {
+      return {
+        severity: isSegmentWayTooLong ? 'warn' : 'info',
+        message: segmentTooLongMessage
+      };
+    }
+    return null;
+  };
+  /**
+   * An object that manages segment loading and appending.
+   *
+   * @class SegmentLoader
+   * @param {Object} options required and optional options
+   * @extends videojs.EventTarget
+   */
+
+  class SegmentLoader extends videojs.EventTarget {
+    constructor(settings, options = {}) {
+      super(); // check pre-conditions
+
+      if (!settings) {
+        throw new TypeError('Initialization settings are required');
+      }
+      if (typeof settings.currentTime !== 'function') {
+        throw new TypeError('No currentTime getter specified');
+      }
+      if (!settings.mediaSource) {
+        throw new TypeError('No MediaSource specified');
+      } // public properties
+
+      this.bandwidth = settings.bandwidth;
+      this.throughput = {
+        rate: 0,
+        count: 0
+      };
+      this.roundTrip = NaN;
+      this.resetStats_();
+      this.mediaIndex = null;
+      this.partIndex = null; // private settings
+
+      this.hasPlayed_ = settings.hasPlayed;
+      this.currentTime_ = settings.currentTime;
+      this.seekable_ = settings.seekable;
+      this.seeking_ = settings.seeking;
+      this.duration_ = settings.duration;
+      this.mediaSource_ = settings.mediaSource;
+      this.vhs_ = settings.vhs;
+      this.loaderType_ = settings.loaderType;
+      this.currentMediaInfo_ = void 0;
+      this.startingMediaInfo_ = void 0;
+      this.segmentMetadataTrack_ = settings.segmentMetadataTrack;
+      this.goalBufferLength_ = settings.goalBufferLength;
+      this.sourceType_ = settings.sourceType;
+      this.sourceUpdater_ = settings.sourceUpdater;
+      this.inbandTextTracks_ = settings.inbandTextTracks;
+      this.state_ = 'INIT';
+      this.timelineChangeController_ = settings.timelineChangeController;
+      this.shouldSaveSegmentTimingInfo_ = true;
+      this.parse708captions_ = settings.parse708captions;
+      this.useDtsForTimestampOffset_ = settings.useDtsForTimestampOffset;
+      this.captionServices_ = settings.captionServices;
+      this.exactManifestTimings = settings.exactManifestTimings;
+      this.addMetadataToTextTrack = settings.addMetadataToTextTrack; // private instance variables
+
+      this.checkBufferTimeout_ = null;
+      this.error_ = void 0;
+      this.currentTimeline_ = -1;
+      this.shouldForceTimestampOffsetAfterResync_ = false;
+      this.pendingSegment_ = null;
+      this.xhrOptions_ = null;
+      this.pendingSegments_ = [];
+      this.audioDisabled_ = false;
+      this.isPendingTimestampOffset_ = false; // TODO possibly move gopBuffer and timeMapping info to a separate controller
+
+      this.gopBuffer_ = [];
+      this.timeMapping_ = 0;
+      this.safeAppend_ = false;
+      this.appendInitSegment_ = {
+        audio: true,
+        video: true
+      };
+      this.playlistOfLastInitSegment_ = {
+        audio: null,
+        video: null
+      };
+      this.callQueue_ = []; // If the segment loader prepares to load a segment, but does not have enough
+      // information yet to start the loading process (e.g., if the audio loader wants to
+      // load a segment from the next timeline but the main loader hasn't yet crossed that
+      // timeline), then the load call will be added to the queue until it is ready to be
+      // processed.
+
+      this.loadQueue_ = [];
+      this.metadataQueue_ = {
+        id3: [],
+        caption: []
+      };
+      this.waitingOnRemove_ = false;
+      this.quotaExceededErrorRetryTimeout_ = null; // Fragmented mp4 playback
+
+      this.activeInitSegmentId_ = null;
+      this.initSegments_ = {}; // HLSe playback
+
+      this.cacheEncryptionKeys_ = settings.cacheEncryptionKeys;
+      this.keyCache_ = {};
+      this.decrypter_ = settings.decrypter; // Manages the tracking and generation of sync-points, mappings
+      // between a time in the display time and a segment index within
+      // a playlist
+
+      this.syncController_ = settings.syncController;
+      this.syncPoint_ = {
+        segmentIndex: 0,
+        time: 0
+      };
+      this.transmuxer_ = this.createTransmuxer_();
+      this.triggerSyncInfoUpdate_ = () => this.trigger('syncinfoupdate');
+      this.syncController_.on('syncinfoupdate', this.triggerSyncInfoUpdate_);
+      this.mediaSource_.addEventListener('sourceopen', () => {
+        if (!this.isEndOfStream_()) {
+          this.ended_ = false;
+        }
+      }); // ...for determining the fetch location
+
+      this.fetchAtBuffer_ = false;
+      this.logger_ = logger(`SegmentLoader[${this.loaderType_}]`);
+      Object.defineProperty(this, 'state', {
+        get() {
+          return this.state_;
+        },
+        set(newState) {
+          if (newState !== this.state_) {
+            this.logger_(`${this.state_} -> ${newState}`);
+            this.state_ = newState;
+            this.trigger('statechange');
+          }
+        }
+      });
+      this.sourceUpdater_.on('ready', () => {
+        if (this.hasEnoughInfoToAppend_()) {
+          this.processCallQueue_();
+        }
+      }); // Only the main loader needs to listen for pending timeline changes, as the main
+      // loader should wait for audio to be ready to change its timeline so that both main
+      // and audio timelines change together. For more details, see the
+      // shouldWaitForTimelineChange function.
+
+      if (this.loaderType_ === 'main') {
+        this.timelineChangeController_.on('pendingtimelinechange', () => {
+          if (this.hasEnoughInfoToAppend_()) {
+            this.processCallQueue_();
+          }
+        });
+      } // The main loader only listens on pending timeline changes, but the audio loader,
+      // since its loads follow main, needs to listen on timeline changes. For more details,
+      // see the shouldWaitForTimelineChange function.
+
+      if (this.loaderType_ === 'audio') {
+        this.timelineChangeController_.on('timelinechange', () => {
+          if (this.hasEnoughInfoToLoad_()) {
+            this.processLoadQueue_();
+          }
+          if (this.hasEnoughInfoToAppend_()) {
+            this.processCallQueue_();
+          }
+        });
+      }
+    }
+    /**
+     * TODO: Current sync controller consists of many hls-specific strategies
+     * media sequence sync is also hls-specific, and we would like to be protocol-agnostic on this level
+     * this should be a part of the sync-controller and sync controller should expect different strategy list based on the protocol.
+     *
+     * @return {MediaSequenceSync|null}
+     * @private
+     */
+
+    get mediaSequenceSync_() {
+      return this.syncController_.getMediaSequenceSync(this.loaderType_);
+    }
+    createTransmuxer_() {
+      return segmentTransmuxer.createTransmuxer({
+        remux: false,
+        alignGopsAtEnd: this.safeAppend_,
+        keepOriginalTimestamps: true,
+        parse708captions: this.parse708captions_,
+        captionServices: this.captionServices_
+      });
+    }
+    /**
+     * reset all of our media stats
+     *
+     * @private
+     */
+
+    resetStats_() {
+      this.mediaBytesTransferred = 0;
+      this.mediaRequests = 0;
+      this.mediaRequestsAborted = 0;
+      this.mediaRequestsTimedout = 0;
+      this.mediaRequestsErrored = 0;
+      this.mediaTransferDuration = 0;
+      this.mediaSecondsLoaded = 0;
+      this.mediaAppends = 0;
+    }
+    /**
+     * dispose of the SegmentLoader and reset to the default state
+     */
+
+    dispose() {
+      this.trigger('dispose');
+      this.state = 'DISPOSED';
+      this.pause();
+      this.abort_();
+      if (this.transmuxer_) {
+        this.transmuxer_.terminate();
+      }
+      this.resetStats_();
+      if (this.checkBufferTimeout_) {
+        window.clearTimeout(this.checkBufferTimeout_);
+      }
+      if (this.syncController_ && this.triggerSyncInfoUpdate_) {
+        this.syncController_.off('syncinfoupdate', this.triggerSyncInfoUpdate_);
+      }
+      this.off();
+    }
+    setAudio(enable) {
+      this.audioDisabled_ = !enable;
+      if (enable) {
+        this.appendInitSegment_.audio = true;
+      } else {
+        // remove current track audio if it gets disabled
+        this.sourceUpdater_.removeAudio(0, this.duration_());
+      }
+    }
+    /**
+     * abort anything that is currently doing on with the SegmentLoader
+     * and reset to a default state
+     */
+
+    abort() {
+      if (this.state !== 'WAITING') {
+        if (this.pendingSegment_) {
+          this.pendingSegment_ = null;
+        }
+        return;
+      }
+      this.abort_(); // We aborted the requests we were waiting on, so reset the loader's state to READY
+      // since we are no longer "waiting" on any requests. XHR callback is not always run
+      // when the request is aborted. This will prevent the loader from being stuck in the
+      // WAITING state indefinitely.
+
+      this.state = 'READY'; // don't wait for buffer check timeouts to begin fetching the
+      // next segment
+
+      if (!this.paused()) {
+        this.monitorBuffer_();
+      }
+    }
+    /**
+     * abort all pending xhr requests and null any pending segements
+     *
+     * @private
+     */
+
+    abort_() {
+      if (this.pendingSegment_ && this.pendingSegment_.abortRequests) {
+        this.pendingSegment_.abortRequests();
+      } // clear out the segment being processed
+
+      this.pendingSegment_ = null;
+      this.callQueue_ = [];
+      this.loadQueue_ = [];
+      this.metadataQueue_.id3 = [];
+      this.metadataQueue_.caption = [];
+      this.timelineChangeController_.clearPendingTimelineChange(this.loaderType_);
+      this.waitingOnRemove_ = false;
+      window.clearTimeout(this.quotaExceededErrorRetryTimeout_);
+      this.quotaExceededErrorRetryTimeout_ = null;
+    }
+    checkForAbort_(requestId) {
+      // If the state is APPENDING, then aborts will not modify the state, meaning the first
+      // callback that happens should reset the state to READY so that loading can continue.
+      if (this.state === 'APPENDING' && !this.pendingSegment_) {
+        this.state = 'READY';
+        return true;
+      }
+      if (!this.pendingSegment_ || this.pendingSegment_.requestId !== requestId) {
+        return true;
+      }
+      return false;
+    }
+    /**
+     * set an error on the segment loader and null out any pending segements
+     *
+     * @param {Error} error the error to set on the SegmentLoader
+     * @return {Error} the error that was set or that is currently set
+     */
+
+    error(error) {
+      if (typeof error !== 'undefined') {
+        this.logger_('error occurred:', error);
+        this.error_ = error;
+      }
+      this.pendingSegment_ = null;
+      return this.error_;
+    }
+    endOfStream() {
+      this.ended_ = true;
+      if (this.transmuxer_) {
+        // need to clear out any cached data to prepare for the new segment
+        segmentTransmuxer.reset(this.transmuxer_);
+      }
+      this.gopBuffer_.length = 0;
+      this.pause();
+      this.trigger('ended');
+    }
+    /**
+     * Indicates which time ranges are buffered
+     *
+     * @return {TimeRange}
+     *         TimeRange object representing the current buffered ranges
+     */
+
+    buffered_() {
+      const trackInfo = this.getMediaInfo_();
+      if (!this.sourceUpdater_ || !trackInfo) {
+        return createTimeRanges();
+      }
+      if (this.loaderType_ === 'main') {
+        const {
+          hasAudio,
+          hasVideo,
+          isMuxed
+        } = trackInfo;
+        if (hasVideo && hasAudio && !this.audioDisabled_ && !isMuxed) {
+          return this.sourceUpdater_.buffered();
+        }
+        if (hasVideo) {
+          return this.sourceUpdater_.videoBuffered();
+        }
+      } // One case that can be ignored for now is audio only with alt audio,
+      // as we don't yet have proper support for that.
+
+      return this.sourceUpdater_.audioBuffered();
+    }
+    /**
+     * Gets and sets init segment for the provided map
+     *
+     * @param {Object} map
+     *        The map object representing the init segment to get or set
+     * @param {boolean=} set
+     *        If true, the init segment for the provided map should be saved
+     * @return {Object}
+     *         map object for desired init segment
+     */
+
+    initSegmentForMap(map, set = false) {
+      if (!map) {
+        return null;
+      }
+      const id = initSegmentId(map);
+      let storedMap = this.initSegments_[id];
+      if (set && !storedMap && map.bytes) {
+        this.initSegments_[id] = storedMap = {
+          resolvedUri: map.resolvedUri,
+          byterange: map.byterange,
+          bytes: map.bytes,
+          tracks: map.tracks,
+          timescales: map.timescales
+        };
+      }
+      return storedMap || map;
+    }
+    /**
+     * Gets and sets key for the provided key
+     *
+     * @param {Object} key
+     *        The key object representing the key to get or set
+     * @param {boolean=} set
+     *        If true, the key for the provided key should be saved
+     * @return {Object}
+     *         Key object for desired key
+     */
+
+    segmentKey(key, set = false) {
+      if (!key) {
+        return null;
+      }
+      const id = segmentKeyId(key);
+      let storedKey = this.keyCache_[id]; // TODO: We should use the HTTP Expires header to invalidate our cache per
+      // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-6.2.3
+
+      if (this.cacheEncryptionKeys_ && set && !storedKey && key.bytes) {
+        this.keyCache_[id] = storedKey = {
+          resolvedUri: key.resolvedUri,
+          bytes: key.bytes
+        };
+      }
+      const result = {
+        resolvedUri: (storedKey || key).resolvedUri
+      };
+      if (storedKey) {
+        result.bytes = storedKey.bytes;
+      }
+      return result;
+    }
+    /**
+     * Returns true if all configuration required for loading is present, otherwise false.
+     *
+     * @return {boolean} True if the all configuration is ready for loading
+     * @private
+     */
+
+    couldBeginLoading_() {
+      return this.playlist_ && !this.paused();
+    }
+    /**
+     * load a playlist and start to fill the buffer
+     */
+
+    load() {
+      // un-pause
+      this.monitorBuffer_(); // if we don't have a playlist yet, keep waiting for one to be
+      // specified
+
+      if (!this.playlist_) {
+        return;
+      } // if all the configuration is ready, initialize and begin loading
+
+      if (this.state === 'INIT' && this.couldBeginLoading_()) {
+        return this.init_();
+      } // if we're in the middle of processing a segment already, don't
+      // kick off an additional segment request
+
+      if (!this.couldBeginLoading_() || this.state !== 'READY' && this.state !== 'INIT') {
+        return;
+      }
+      this.state = 'READY';
+    }
+    /**
+     * Once all the starting parameters have been specified, begin
+     * operation. This method should only be invoked from the INIT
+     * state.
+     *
+     * @private
+     */
+
+    init_() {
+      this.state = 'READY'; // if this is the audio segment loader, and it hasn't been inited before, then any old
+      // audio data from the muxed content should be removed
+
+      this.resetEverything();
+      return this.monitorBuffer_();
+    }
+    /**
+     * set a playlist on the segment loader
+     *
+     * @param {PlaylistLoader} media the playlist to set on the segment loader
+     */
+
+    playlist(newPlaylist, options = {}) {
+      if (!newPlaylist) {
+        return;
+      }
+      const oldPlaylist = this.playlist_;
+      const segmentInfo = this.pendingSegment_;
+      this.playlist_ = newPlaylist;
+      this.xhrOptions_ = options; // when we haven't started playing yet, the start of a live playlist
+      // is always our zero-time so force a sync update each time the playlist
+      // is refreshed from the server
+      //
+      // Use the INIT state to determine if playback has started, as the playlist sync info
+      // should be fixed once requests begin (as sync points are generated based on sync
+      // info), but not before then.
+
+      if (this.state === 'INIT') {
+        newPlaylist.syncInfo = {
+          mediaSequence: newPlaylist.mediaSequence,
+          time: 0
+        }; // Setting the date time mapping means mapping the program date time (if available)
+        // to time 0 on the player's timeline. The playlist's syncInfo serves a similar
+        // purpose, mapping the initial mediaSequence to time zero. Since the syncInfo can
+        // be updated as the playlist is refreshed before the loader starts loading, the
+        // program date time mapping needs to be updated as well.
+        //
+        // This mapping is only done for the main loader because a program date time should
+        // map equivalently between playlists.
+
+        if (this.loaderType_ === 'main') {
+          this.syncController_.setDateTimeMappingForStart(newPlaylist);
+        }
+      }
+      let oldId = null;
+      if (oldPlaylist) {
+        if (oldPlaylist.id) {
+          oldId = oldPlaylist.id;
+        } else if (oldPlaylist.uri) {
+          oldId = oldPlaylist.uri;
+        }
+      }
+      this.logger_(`playlist update [${oldId} => ${newPlaylist.id || newPlaylist.uri}]`);
+      if (this.mediaSequenceSync_) {
+        this.mediaSequenceSync_.update(newPlaylist, this.currentTime_());
+        this.logger_(`Playlist update:
+currentTime: ${this.currentTime_()}
+bufferedEnd: ${lastBufferedEnd(this.buffered_())}
+`, this.mediaSequenceSync_.diagnostics);
+      } // in VOD, this is always a rendition switch (or we updated our syncInfo above)
+      // in LIVE, we always want to update with new playlists (including refreshes)
+
+      this.trigger('syncinfoupdate'); // if we were unpaused but waiting for a playlist, start
+      // buffering now
+
+      if (this.state === 'INIT' && this.couldBeginLoading_()) {
+        return this.init_();
+      }
+      if (!oldPlaylist || oldPlaylist.uri !== newPlaylist.uri) {
+        if (this.mediaIndex !== null) {
+          // we must reset/resync the segment loader when we switch renditions and
+          // the segment loader is already synced to the previous rendition
+          // We only want to reset the loader here for LLHLS playback, as resetLoader sets fetchAtBuffer_
+          // to false, resulting in fetching segments at currentTime and causing repeated
+          // same-segment requests on playlist change. This erroneously drives up the playback watcher
+          // stalled segment count, as re-requesting segments at the currentTime or browser cached segments
+          // will not change the buffer.
+          // Reference for LLHLS fixes: https://github.com/videojs/http-streaming/pull/1201
+          const isLLHLS = !newPlaylist.endList && typeof newPlaylist.partTargetDuration === 'number';
+          if (isLLHLS) {
+            this.resetLoader();
+          } else {
+            this.resyncLoader();
+          }
+        }
+        this.currentMediaInfo_ = void 0;
+        this.trigger('playlistupdate'); // the rest of this function depends on `oldPlaylist` being defined
+
+        return;
+      } // we reloaded the same playlist so we are in a live scenario
+      // and we will likely need to adjust the mediaIndex
+
+      const mediaSequenceDiff = newPlaylist.mediaSequence - oldPlaylist.mediaSequence;
+      this.logger_(`live window shift [${mediaSequenceDiff}]`); // update the mediaIndex on the SegmentLoader
+      // this is important because we can abort a request and this value must be
+      // equal to the last appended mediaIndex
+
+      if (this.mediaIndex !== null) {
+        this.mediaIndex -= mediaSequenceDiff; // this can happen if we are going to load the first segment, but get a playlist
+        // update during that. mediaIndex would go from 0 to -1 if mediaSequence in the
+        // new playlist was incremented by 1.
+
+        if (this.mediaIndex < 0) {
+          this.mediaIndex = null;
+          this.partIndex = null;
+        } else {
+          const segment = this.playlist_.segments[this.mediaIndex]; // partIndex should remain the same for the same segment
+          // unless parts fell off of the playlist for this segment.
+          // In that case we need to reset partIndex and resync
+
+          if (this.partIndex && (!segment.parts || !segment.parts.length || !segment.parts[this.partIndex])) {
+            const mediaIndex = this.mediaIndex;
+            this.logger_(`currently processing part (index ${this.partIndex}) no longer exists.`);
+            this.resetLoader(); // We want to throw away the partIndex and the data associated with it,
+            // as the part was dropped from our current playlists segment.
+            // The mediaIndex will still be valid so keep that around.
+
+            this.mediaIndex = mediaIndex;
+          }
+        }
+      } // update the mediaIndex on the SegmentInfo object
+      // this is important because we will update this.mediaIndex with this value
+      // in `handleAppendsDone_` after the segment has been successfully appended
+
+      if (segmentInfo) {
+        segmentInfo.mediaIndex -= mediaSequenceDiff;
+        if (segmentInfo.mediaIndex < 0) {
+          segmentInfo.mediaIndex = null;
+          segmentInfo.partIndex = null;
+        } else {
+          // we need to update the referenced segment so that timing information is
+          // saved for the new playlist's segment, however, if the segment fell off the
+          // playlist, we can leave the old reference and just lose the timing info
+          if (segmentInfo.mediaIndex >= 0) {
+            segmentInfo.segment = newPlaylist.segments[segmentInfo.mediaIndex];
+          }
+          if (segmentInfo.partIndex >= 0 && segmentInfo.segment.parts) {
+            segmentInfo.part = segmentInfo.segment.parts[segmentInfo.partIndex];
+          }
+        }
+      }
+      this.syncController_.saveExpiredSegmentInfo(oldPlaylist, newPlaylist);
+    }
+    /**
+     * Prevent the loader from fetching additional segments. If there
+     * is a segment request outstanding, it will finish processing
+     * before the loader halts. A segment loader can be unpaused by
+     * calling load().
+     */
+
+    pause() {
+      if (this.checkBufferTimeout_) {
+        window.clearTimeout(this.checkBufferTimeout_);
+        this.checkBufferTimeout_ = null;
+      }
+    }
+    /**
+     * Returns whether the segment loader is fetching additional
+     * segments when given the opportunity. This property can be
+     * modified through calls to pause() and load().
+     */
+
+    paused() {
+      return this.checkBufferTimeout_ === null;
+    }
+    /**
+     * Delete all the buffered data and reset the SegmentLoader
+     *
+     * @param {Function} [done] an optional callback to be executed when the remove
+     * operation is complete
+     */
+
+    resetEverything(done) {
+      this.ended_ = false;
+      this.activeInitSegmentId_ = null;
+      this.appendInitSegment_ = {
+        audio: true,
+        video: true
+      };
+      this.resetLoader(); // remove from 0, the earliest point, to Infinity, to signify removal of everything.
+      // VTT Segment Loader doesn't need to do anything but in the regular SegmentLoader,
+      // we then clamp the value to duration if necessary.
+
+      this.remove(0, Infinity, done); // clears fmp4 captions
+
+      if (this.transmuxer_) {
+        this.transmuxer_.postMessage({
+          action: 'clearAllMp4Captions'
+        }); // reset the cache in the transmuxer
+
+        this.transmuxer_.postMessage({
+          action: 'reset'
+        });
+      }
+    }
+    /**
+     * Force the SegmentLoader to resync and start loading around the currentTime instead
+     * of starting at the end of the buffer
+     *
+     * Useful for fast quality changes
+     */
+
+    resetLoader() {
+      this.fetchAtBuffer_ = false;
+      if (this.mediaSequenceSync_) {
+        this.mediaSequenceSync_.resetAppendedStatus();
+      }
+      this.resyncLoader();
+    }
+    /**
+     * Force the SegmentLoader to restart synchronization and make a conservative guess
+     * before returning to the simple walk-forward method
+     */
+
+    resyncLoader() {
+      if (this.transmuxer_) {
+        // need to clear out any cached data to prepare for the new segment
+        segmentTransmuxer.reset(this.transmuxer_);
+      }
+      this.mediaIndex = null;
+      this.partIndex = null;
+      this.syncPoint_ = null;
+      this.isPendingTimestampOffset_ = false; // this is mainly to sync timing-info when switching between renditions with and without timestamp-rollover,
+      // so we don't want it for DASH or fragmented mp4 segments.
+
+      const isFmp4 = this.currentMediaInfo_ && this.currentMediaInfo_.isFmp4;
+      const isHlsTs = this.sourceType_ === 'hls' && !isFmp4;
+      if (isHlsTs) {
+        this.shouldForceTimestampOffsetAfterResync_ = true;
+      }
+      this.callQueue_ = [];
+      this.loadQueue_ = [];
+      this.metadataQueue_.id3 = [];
+      this.metadataQueue_.caption = [];
+      this.abort();
+      if (this.transmuxer_) {
+        this.transmuxer_.postMessage({
+          action: 'clearParsedMp4Captions'
+        });
+      }
+    }
+    /**
+     * Remove any data in the source buffer between start and end times
+     *
+     * @param {number} start - the start time of the region to remove from the buffer
+     * @param {number} end - the end time of the region to remove from the buffer
+     * @param {Function} [done] - an optional callback to be executed when the remove
+     * @param {boolean} force - force all remove operations to happen
+     * operation is complete
+     */
+
+    remove(start, end, done = () => {}, force = false) {
+      // clamp end to duration if we need to remove everything.
+      // This is due to a browser bug that causes issues if we remove to Infinity.
+      // videojs/videojs-contrib-hls#1225
+      if (end === Infinity) {
+        end = this.duration_();
+      } // skip removes that would throw an error
+      // commonly happens during a rendition switch at the start of a video
+      // from start 0 to end 0
+
+      if (end <= start) {
+        this.logger_('skipping remove because end ${end} is <= start ${start}');
+        return;
+      }
+      if (!this.sourceUpdater_ || !this.getMediaInfo_()) {
+        this.logger_('skipping remove because no source updater or starting media info'); // nothing to remove if we haven't processed any media
+
+        return;
+      } // set it to one to complete this function's removes
+
+      let removesRemaining = 1;
+      const removeFinished = () => {
+        removesRemaining--;
+        if (removesRemaining === 0) {
+          done();
+        }
+      };
+      if (force || !this.audioDisabled_) {
+        removesRemaining++;
+        this.sourceUpdater_.removeAudio(start, end, removeFinished);
+      } // While it would be better to only remove video if the main loader has video, this
+      // should be safe with audio only as removeVideo will call back even if there's no
+      // video buffer.
+      //
+      // In theory we can check to see if there's video before calling the remove, but in
+      // the event that we're switching between renditions and from video to audio only
+      // (when we add support for that), we may need to clear the video contents despite
+      // what the new media will contain.
+
+      if (force || this.loaderType_ === 'main') {
+        this.gopBuffer_ = removeGopBuffer(this.gopBuffer_, start, end, this.timeMapping_);
+        removesRemaining++;
+        this.sourceUpdater_.removeVideo(start, end, removeFinished);
+      } // remove any captions and ID3 tags
+
+      for (const track in this.inbandTextTracks_) {
+        removeCuesFromTrack(start, end, this.inbandTextTracks_[track]);
+      }
+      removeCuesFromTrack(start, end, this.segmentMetadataTrack_); // finished this function's removes
+
+      removeFinished();
+    }
+    /**
+     * (re-)schedule monitorBufferTick_ to run as soon as possible
+     *
+     * @private
+     */
+
+    monitorBuffer_() {
+      if (this.checkBufferTimeout_) {
+        window.clearTimeout(this.checkBufferTimeout_);
+      }
+      this.checkBufferTimeout_ = window.setTimeout(this.monitorBufferTick_.bind(this), 1);
+    }
+    /**
+     * As long as the SegmentLoader is in the READY state, periodically
+     * invoke fillBuffer_().
+     *
+     * @private
+     */
+
+    monitorBufferTick_() {
+      if (this.state === 'READY') {
+        this.fillBuffer_();
+      }
+      if (this.checkBufferTimeout_) {
+        window.clearTimeout(this.checkBufferTimeout_);
+      }
+      this.checkBufferTimeout_ = window.setTimeout(this.monitorBufferTick_.bind(this), CHECK_BUFFER_DELAY);
+    }
+    /**
+     * fill the buffer with segements unless the sourceBuffers are
+     * currently updating
+     *
+     * Note: this function should only ever be called by monitorBuffer_
+     * and never directly
+     *
+     * @private
+     */
+
+    fillBuffer_() {
+      // TODO since the source buffer maintains a queue, and we shouldn't call this function
+      // except when we're ready for the next segment, this check can most likely be removed
+      if (this.sourceUpdater_.updating()) {
+        return;
+      } // see if we need to begin loading immediately
+
+      const segmentInfo = this.chooseNextRequest_();
+      if (!segmentInfo) {
+        return;
+      }
+      if (typeof segmentInfo.timestampOffset === 'number') {
+        this.isPendingTimestampOffset_ = false;
+        this.timelineChangeController_.pendingTimelineChange({
+          type: this.loaderType_,
+          from: this.currentTimeline_,
+          to: segmentInfo.timeline
+        });
+      }
+      this.loadSegment_(segmentInfo);
+    }
+    /**
+     * Determines if we should call endOfStream on the media source based
+     * on the state of the buffer or if appened segment was the final
+     * segment in the playlist.
+     *
+     * @param {number} [mediaIndex] the media index of segment we last appended
+     * @param {Object} [playlist] a media playlist object
+     * @return {boolean} do we need to call endOfStream on the MediaSource
+     */
+
+    isEndOfStream_(mediaIndex = this.mediaIndex, playlist = this.playlist_, partIndex = this.partIndex) {
+      if (!playlist || !this.mediaSource_) {
+        return false;
+      }
+      const segment = typeof mediaIndex === 'number' && playlist.segments[mediaIndex]; // mediaIndex is zero based but length is 1 based
+
+      const appendedLastSegment = mediaIndex + 1 === playlist.segments.length; // true if there are no parts, or this is the last part.
+
+      const appendedLastPart = !segment || !segment.parts || partIndex + 1 === segment.parts.length; // if we've buffered to the end of the video, we need to call endOfStream
+      // so that MediaSources can trigger the `ended` event when it runs out of
+      // buffered data instead of waiting for me
+
+      return playlist.endList && this.mediaSource_.readyState === 'open' && appendedLastSegment && appendedLastPart;
+    }
+    /**
+     * Determines what request should be made given current segment loader state.
+     *
+     * @return {Object} a request object that describes the segment/part to load
+     */
+
+    chooseNextRequest_() {
+      const buffered = this.buffered_();
+      const bufferedEnd = lastBufferedEnd(buffered) || 0;
+      const bufferedTime = timeAheadOf(buffered, this.currentTime_());
+      const preloaded = !this.hasPlayed_() && bufferedTime >= 1;
+      const haveEnoughBuffer = bufferedTime >= this.goalBufferLength_();
+      const segments = this.playlist_.segments; // return no segment if:
+      // 1. we don't have segments
+      // 2. The video has not yet played and we already downloaded a segment
+      // 3. we already have enough buffered time
+
+      if (!segments.length || preloaded || haveEnoughBuffer) {
+        return null;
+      }
+      this.syncPoint_ = this.syncPoint_ || this.syncController_.getSyncPoint(this.playlist_, this.duration_(), this.currentTimeline_, this.currentTime_(), this.loaderType_);
+      const next = {
+        partIndex: null,
+        mediaIndex: null,
+        startOfSegment: null,
+        playlist: this.playlist_,
+        isSyncRequest: Boolean(!this.syncPoint_)
+      };
+      if (next.isSyncRequest) {
+        next.mediaIndex = getSyncSegmentCandidate(this.currentTimeline_, segments, bufferedEnd);
+        this.logger_(`choose next request. Can not find sync point. Fallback to media Index: ${next.mediaIndex}`);
+      } else if (this.mediaIndex !== null) {
+        const segment = segments[this.mediaIndex];
+        const partIndex = typeof this.partIndex === 'number' ? this.partIndex : -1;
+        next.startOfSegment = segment.end ? segment.end : bufferedEnd;
+        if (segment.parts && segment.parts[partIndex + 1]) {
+          next.mediaIndex = this.mediaIndex;
+          next.partIndex = partIndex + 1;
+        } else {
+          next.mediaIndex = this.mediaIndex + 1;
+        }
+      } else {
+        let segmentIndex;
+        let partIndex;
+        let startTime;
+        const targetTime = this.fetchAtBuffer_ ? bufferedEnd : this.currentTime_();
+        if (this.mediaSequenceSync_) {
+          this.logger_(`chooseNextRequest_ request after Quality Switch:
+For TargetTime: ${targetTime}.
+CurrentTime: ${this.currentTime_()}
+BufferedEnd: ${bufferedEnd}
+Fetch At Buffer: ${this.fetchAtBuffer_}
+`, this.mediaSequenceSync_.diagnostics);
+        }
+        if (this.mediaSequenceSync_ && this.mediaSequenceSync_.isReliable) {
+          const syncInfo = this.getSyncInfoFromMediaSequenceSync_(targetTime);
+          if (!syncInfo) {
+            this.logger_('chooseNextRequest_ - no sync info found using media sequence sync'); // no match
+
+            return null;
+          }
+          this.logger_(`chooseNextRequest_ mediaSequence syncInfo (${syncInfo.start} --> ${syncInfo.end})`);
+          segmentIndex = syncInfo.segmentIndex;
+          partIndex = syncInfo.partIndex;
+          startTime = syncInfo.start;
+        } else {
+          this.logger_('chooseNextRequest_ - fallback to a regular segment selection algorithm, based on a syncPoint.'); // fallback
+
+          const mediaInfoForTime = Playlist.getMediaInfoForTime({
+            exactManifestTimings: this.exactManifestTimings,
+            playlist: this.playlist_,
+            currentTime: targetTime,
+            startingPartIndex: this.syncPoint_.partIndex,
+            startingSegmentIndex: this.syncPoint_.segmentIndex,
+            startTime: this.syncPoint_.time
+          });
+          segmentIndex = mediaInfoForTime.segmentIndex;
+          partIndex = mediaInfoForTime.partIndex;
+          startTime = mediaInfoForTime.startTime;
+        }
+        next.getMediaInfoForTime = this.fetchAtBuffer_ ? `bufferedEnd ${targetTime}` : `currentTime ${targetTime}`;
+        next.mediaIndex = segmentIndex;
+        next.startOfSegment = startTime;
+        next.partIndex = partIndex;
+        this.logger_(`choose next request. Playlist switched and we have a sync point. Media Index: ${next.mediaIndex} `);
+      }
+      const nextSegment = segments[next.mediaIndex];
+      let nextPart = nextSegment && typeof next.partIndex === 'number' && nextSegment.parts && nextSegment.parts[next.partIndex]; // if the next segment index is invalid or
+      // the next partIndex is invalid do not choose a next segment.
+
+      if (!nextSegment || typeof next.partIndex === 'number' && !nextPart) {
+        return null;
+      } // if the next segment has parts, and we don't have a partIndex.
+      // Set partIndex to 0
+
+      if (typeof next.partIndex !== 'number' && nextSegment.parts) {
+        next.partIndex = 0;
+        nextPart = nextSegment.parts[0];
+      } // independentSegments applies to every segment in a playlist. If independentSegments appears in a main playlist,
+      // it applies to each segment in each media playlist.
+      // https://datatracker.ietf.org/doc/html/draft-pantos-http-live-streaming-23#section-4.3.5.1
+
+      const hasIndependentSegments = this.vhs_.playlists && this.vhs_.playlists.main && this.vhs_.playlists.main.independentSegments || this.playlist_.independentSegments; // if we have no buffered data then we need to make sure
+      // that the next part we append is "independent" if possible.
+      // So we check if the previous part is independent, and request
+      // it if it is.
+
+      if (!bufferedTime && nextPart && !hasIndependentSegments && !nextPart.independent) {
+        if (next.partIndex === 0) {
+          const lastSegment = segments[next.mediaIndex - 1];
+          const lastSegmentLastPart = lastSegment.parts && lastSegment.parts.length && lastSegment.parts[lastSegment.parts.length - 1];
+          if (lastSegmentLastPart && lastSegmentLastPart.independent) {
+            next.mediaIndex -= 1;
+            next.partIndex = lastSegment.parts.length - 1;
+            next.independent = 'previous segment';
+          }
+        } else if (nextSegment.parts[next.partIndex - 1].independent) {
+          next.partIndex -= 1;
+          next.independent = 'previous part';
+        }
+      }
+      const ended = this.mediaSource_ && this.mediaSource_.readyState === 'ended'; // do not choose a next segment if all of the following:
+      // 1. this is the last segment in the playlist
+      // 2. end of stream has been called on the media source already
+      // 3. the player is not seeking
+
+      if (next.mediaIndex >= segments.length - 1 && ended && !this.seeking_()) {
+        return null;
+      }
+      if (this.shouldForceTimestampOffsetAfterResync_) {
+        this.shouldForceTimestampOffsetAfterResync_ = false;
+        next.forceTimestampOffset = true;
+        this.logger_('choose next request. Force timestamp offset after loader resync');
+      }
+      return this.generateSegmentInfo_(next);
+    }
+    getSyncInfoFromMediaSequenceSync_(targetTime) {
+      if (!this.mediaSequenceSync_) {
+        return null;
+      } // we should pull the target time to the least available time if we drop out of sync for any reason
+
+      const finalTargetTime = Math.max(targetTime, this.mediaSequenceSync_.start);
+      if (targetTime !== finalTargetTime) {
+        this.logger_(`getSyncInfoFromMediaSequenceSync_. Pulled target time from ${targetTime} to ${finalTargetTime}`);
+      }
+      const mediaSequenceSyncInfo = this.mediaSequenceSync_.getSyncInfoForTime(finalTargetTime);
+      if (!mediaSequenceSyncInfo) {
+        // no match at all
+        return null;
+      }
+      if (!mediaSequenceSyncInfo.isAppended) {
+        // has a perfect match
+        return mediaSequenceSyncInfo;
+      } // has match, but segment was already appended.
+      // attempt to auto-advance to the nearest next segment:
+
+      const nextMediaSequenceSyncInfo = this.mediaSequenceSync_.getSyncInfoForTime(mediaSequenceSyncInfo.end);
+      if (!nextMediaSequenceSyncInfo) {
+        // no match at all
+        return null;
+      }
+      if (nextMediaSequenceSyncInfo.isAppended) {
+        this.logger_('getSyncInfoFromMediaSequenceSync_: We encounter unexpected scenario where next media sequence sync info is also appended!');
+      } // got match with the nearest next segment
+
+      return nextMediaSequenceSyncInfo;
+    }
+    generateSegmentInfo_(options) {
+      const {
+        independent,
+        playlist,
+        mediaIndex,
+        startOfSegment,
+        isSyncRequest,
+        partIndex,
+        forceTimestampOffset,
+        getMediaInfoForTime
+      } = options;
+      const segment = playlist.segments[mediaIndex];
+      const part = typeof partIndex === 'number' && segment.parts[partIndex];
+      const segmentInfo = {
+        requestId: 'segment-loader-' + Math.random(),
+        // resolve the segment URL relative to the playlist
+        uri: part && part.resolvedUri || segment.resolvedUri,
+        // the segment's mediaIndex at the time it was requested
+        mediaIndex,
+        partIndex: part ? partIndex : null,
+        // whether or not to update the SegmentLoader's state with this
+        // segment's mediaIndex
+        isSyncRequest,
+        startOfSegment,
+        // the segment's playlist
+        playlist,
+        // unencrypted bytes of the segment
+        bytes: null,
+        // when a key is defined for this segment, the encrypted bytes
+        encryptedBytes: null,
+        // The target timestampOffset for this segment when we append it
+        // to the source buffer
+        timestampOffset: null,
+        // The timeline that the segment is in
+        timeline: segment.timeline,
+        // The expected duration of the segment in seconds
+        duration: part && part.duration || segment.duration,
+        // retain the segment in case the playlist updates while doing an async process
+        segment,
+        part,
+        byteLength: 0,
+        transmuxer: this.transmuxer_,
+        // type of getMediaInfoForTime that was used to get this segment
+        getMediaInfoForTime,
+        independent
+      };
+      const overrideCheck = typeof forceTimestampOffset !== 'undefined' ? forceTimestampOffset : this.isPendingTimestampOffset_;
+      segmentInfo.timestampOffset = this.timestampOffsetForSegment_({
+        segmentTimeline: segment.timeline,
+        currentTimeline: this.currentTimeline_,
+        startOfSegment,
+        buffered: this.buffered_(),
+        overrideCheck
+      });
+      const audioBufferedEnd = lastBufferedEnd(this.sourceUpdater_.audioBuffered());
+      if (typeof audioBufferedEnd === 'number') {
+        // since the transmuxer is using the actual timing values, but the buffer is
+        // adjusted by the timestamp offset, we must adjust the value here
+        segmentInfo.audioAppendStart = audioBufferedEnd - this.sourceUpdater_.audioTimestampOffset();
+      }
+      if (this.sourceUpdater_.videoBuffered().length) {
+        segmentInfo.gopsToAlignWith = gopsSafeToAlignWith(this.gopBuffer_,
+        // since the transmuxer is using the actual timing values, but the time is
+        // adjusted by the timestmap offset, we must adjust the value here
+        this.currentTime_() - this.sourceUpdater_.videoTimestampOffset(), this.timeMapping_);
+      }
+      return segmentInfo;
+    } // get the timestampoffset for a segment,
+    // added so that vtt segment loader can override and prevent
+    // adding timestamp offsets.
+
+    timestampOffsetForSegment_(options) {
+      return timestampOffsetForSegment(options);
+    }
+    /**
+     * Determines if the network has enough bandwidth to complete the current segment
+     * request in a timely manner. If not, the request will be aborted early and bandwidth
+     * updated to trigger a playlist switch.
+     *
+     * @param {Object} stats
+     *        Object containing stats about the request timing and size
+     * @private
+     */
+
+    earlyAbortWhenNeeded_(stats) {
+      if (this.vhs_.tech_.paused() ||
+      // Don't abort if the current playlist is on the lowestEnabledRendition
+      // TODO: Replace using timeout with a boolean indicating whether this playlist is
+      //       the lowestEnabledRendition.
+      !this.xhrOptions_.timeout ||
+      // Don't abort if we have no bandwidth information to estimate segment sizes
+      !this.playlist_.attributes.BANDWIDTH) {
+        return;
+      } // Wait at least 1 second since the first byte of data has been received before
+      // using the calculated bandwidth from the progress event to allow the bitrate
+      // to stabilize
+
+      if (Date.now() - (stats.firstBytesReceivedAt || Date.now()) < 1000) {
+        return;
+      }
+      const currentTime = this.currentTime_();
+      const measuredBandwidth = stats.bandwidth;
+      const segmentDuration = this.pendingSegment_.duration;
+      const requestTimeRemaining = Playlist.estimateSegmentRequestTime(segmentDuration, measuredBandwidth, this.playlist_, stats.bytesReceived); // Subtract 1 from the timeUntilRebuffer so we still consider an early abort
+      // if we are only left with less than 1 second when the request completes.
+      // A negative timeUntilRebuffering indicates we are already rebuffering
+
+      const timeUntilRebuffer$1 = timeUntilRebuffer(this.buffered_(), currentTime, this.vhs_.tech_.playbackRate()) - 1; // Only consider aborting early if the estimated time to finish the download
+      // is larger than the estimated time until the player runs out of forward buffer
+
+      if (requestTimeRemaining <= timeUntilRebuffer$1) {
+        return;
+      }
+      const switchCandidate = minRebufferMaxBandwidthSelector({
+        main: this.vhs_.playlists.main,
+        currentTime,
+        bandwidth: measuredBandwidth,
+        duration: this.duration_(),
+        segmentDuration,
+        timeUntilRebuffer: timeUntilRebuffer$1,
+        currentTimeline: this.currentTimeline_,
+        syncController: this.syncController_
+      });
+      if (!switchCandidate) {
+        return;
+      }
+      const rebufferingImpact = requestTimeRemaining - timeUntilRebuffer$1;
+      const timeSavedBySwitching = rebufferingImpact - switchCandidate.rebufferingImpact;
+      let minimumTimeSaving = 0.5; // If we are already rebuffering, increase the amount of variance we add to the
+      // potential round trip time of the new request so that we are not too aggressive
+      // with switching to a playlist that might save us a fraction of a second.
+
+      if (timeUntilRebuffer$1 <= TIME_FUDGE_FACTOR) {
+        minimumTimeSaving = 1;
+      }
+      if (!switchCandidate.playlist || switchCandidate.playlist.uri === this.playlist_.uri || timeSavedBySwitching < minimumTimeSaving) {
+        return;
+      } // set the bandwidth to that of the desired playlist being sure to scale by
+      // BANDWIDTH_VARIANCE and add one so the playlist selector does not exclude it
+      // don't trigger a bandwidthupdate as the bandwidth is artifial
+
+      this.bandwidth = switchCandidate.playlist.attributes.BANDWIDTH * Config.BANDWIDTH_VARIANCE + 1;
+      this.trigger('earlyabort');
+    }
+    handleAbort_(segmentInfo) {
+      this.logger_(`Aborting ${segmentInfoString(segmentInfo)}`);
+      this.mediaRequestsAborted += 1;
+    }
+    /**
+     * XHR `progress` event handler
+     *
+     * @param {Event}
+     *        The XHR `progress` event
+     * @param {Object} simpleSegment
+     *        A simplified segment object copy
+     * @private
+     */
+
+    handleProgress_(event, simpleSegment) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      }
+      this.trigger('progress');
+    }
+    handleTrackInfo_(simpleSegment, trackInfo) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      }
+      if (this.checkForIllegalMediaSwitch(trackInfo)) {
+        return;
+      }
+      trackInfo = trackInfo || {}; // When we have track info, determine what media types this loader is dealing with.
+      // Guard against cases where we're not getting track info at all until we are
+      // certain that all streams will provide it.
+
+      if (!shallowEqual(this.currentMediaInfo_, trackInfo)) {
+        this.appendInitSegment_ = {
+          audio: true,
+          video: true
+        };
+        this.startingMediaInfo_ = trackInfo;
+        this.currentMediaInfo_ = trackInfo;
+        this.logger_('trackinfo update', trackInfo);
+        this.trigger('trackinfo');
+      } // trackinfo may cause an abort if the trackinfo
+      // causes a codec change to an unsupported codec.
+
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      } // set trackinfo on the pending segment so that
+      // it can append.
+
+      this.pendingSegment_.trackInfo = trackInfo; // check if any calls were waiting on the track info
+
+      if (this.hasEnoughInfoToAppend_()) {
+        this.processCallQueue_();
+      }
+    }
+    handleTimingInfo_(simpleSegment, mediaType, timeType, time) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      }
+      const segmentInfo = this.pendingSegment_;
+      const timingInfoProperty = timingInfoPropertyForMedia(mediaType);
+      segmentInfo[timingInfoProperty] = segmentInfo[timingInfoProperty] || {};
+      segmentInfo[timingInfoProperty][timeType] = time;
+      this.logger_(`timinginfo: ${mediaType} - ${timeType} - ${time}`); // check if any calls were waiting on the timing info
+
+      if (this.hasEnoughInfoToAppend_()) {
+        this.processCallQueue_();
+      }
+    }
+    handleCaptions_(simpleSegment, captionData) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      } // This could only happen with fmp4 segments, but
+      // should still not happen in general
+
+      if (captionData.length === 0) {
+        this.logger_('SegmentLoader received no captions from a caption event');
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // Wait until we have some video data so that caption timing
+      // can be adjusted by the timestamp offset
+
+      if (!segmentInfo.hasAppendedData_) {
+        this.metadataQueue_.caption.push(this.handleCaptions_.bind(this, simpleSegment, captionData));
+        return;
+      }
+      const timestampOffset = this.sourceUpdater_.videoTimestampOffset() === null ? this.sourceUpdater_.audioTimestampOffset() : this.sourceUpdater_.videoTimestampOffset();
+      const captionTracks = {}; // get total start/end and captions for each track/stream
+
+      captionData.forEach(caption => {
+        // caption.stream is actually a track name...
+        // set to the existing values in tracks or default values
+        captionTracks[caption.stream] = captionTracks[caption.stream] || {
+          // Infinity, as any other value will be less than this
+          startTime: Infinity,
+          captions: [],
+          // 0 as an other value will be more than this
+          endTime: 0
+        };
+        const captionTrack = captionTracks[caption.stream];
+        captionTrack.startTime = Math.min(captionTrack.startTime, caption.startTime + timestampOffset);
+        captionTrack.endTime = Math.max(captionTrack.endTime, caption.endTime + timestampOffset);
+        captionTrack.captions.push(caption);
+      });
+      Object.keys(captionTracks).forEach(trackName => {
+        const {
+          startTime,
+          endTime,
+          captions
+        } = captionTracks[trackName];
+        const inbandTextTracks = this.inbandTextTracks_;
+        this.logger_(`adding cues from ${startTime} -> ${endTime} for ${trackName}`);
+        createCaptionsTrackIfNotExists(inbandTextTracks, this.vhs_.tech_, trackName); // clear out any cues that start and end at the same time period for the same track.
+        // We do this because a rendition change that also changes the timescale for captions
+        // will result in captions being re-parsed for certain segments. If we add them again
+        // without clearing we will have two of the same captions visible.
+
+        removeCuesFromTrack(startTime, endTime, inbandTextTracks[trackName]);
+        addCaptionData({
+          captionArray: captions,
+          inbandTextTracks,
+          timestampOffset
+        });
+      }); // Reset stored captions since we added parsed
+      // captions to a text track at this point
+
+      if (this.transmuxer_) {
+        this.transmuxer_.postMessage({
+          action: 'clearParsedMp4Captions'
+        });
+      }
+    }
+    handleId3_(simpleSegment, id3Frames, dispatchType) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // we need to have appended data in order for the timestamp offset to be set
+
+      if (!segmentInfo.hasAppendedData_) {
+        this.metadataQueue_.id3.push(this.handleId3_.bind(this, simpleSegment, id3Frames, dispatchType));
+        return;
+      }
+      this.addMetadataToTextTrack(dispatchType, id3Frames, this.duration_());
+    }
+    processMetadataQueue_() {
+      this.metadataQueue_.id3.forEach(fn => fn());
+      this.metadataQueue_.caption.forEach(fn => fn());
+      this.metadataQueue_.id3 = [];
+      this.metadataQueue_.caption = [];
+    }
+    processCallQueue_() {
+      const callQueue = this.callQueue_; // Clear out the queue before the queued functions are run, since some of the
+      // functions may check the length of the load queue and default to pushing themselves
+      // back onto the queue.
+
+      this.callQueue_ = [];
+      callQueue.forEach(fun => fun());
+    }
+    processLoadQueue_() {
+      const loadQueue = this.loadQueue_; // Clear out the queue before the queued functions are run, since some of the
+      // functions may check the length of the load queue and default to pushing themselves
+      // back onto the queue.
+
+      this.loadQueue_ = [];
+      loadQueue.forEach(fun => fun());
+    }
+    /**
+     * Determines whether the loader has enough info to load the next segment.
+     *
+     * @return {boolean}
+     *         Whether or not the loader has enough info to load the next segment
+     */
+
+    hasEnoughInfoToLoad_() {
+      // Since primary timing goes by video, only the audio loader potentially needs to wait
+      // to load.
+      if (this.loaderType_ !== 'audio') {
+        return true;
+      }
+      const segmentInfo = this.pendingSegment_; // A fill buffer must have already run to establish a pending segment before there's
+      // enough info to load.
+
+      if (!segmentInfo) {
+        return false;
+      } // The first segment can and should be loaded immediately so that source buffers are
+      // created together (before appending). Source buffer creation uses the presence of
+      // audio and video data to determine whether to create audio/video source buffers, and
+      // uses processed (transmuxed or parsed) media to determine the types required.
+
+      if (!this.getCurrentMediaInfo_()) {
+        return true;
+      }
+      if (
+      // Technically, instead of waiting to load a segment on timeline changes, a segment
+      // can be requested and downloaded and only wait before it is transmuxed or parsed.
+      // But in practice, there are a few reasons why it is better to wait until a loader
+      // is ready to append that segment before requesting and downloading:
+      //
+      // 1. Because audio and main loaders cross discontinuities together, if this loader
+      //    is waiting for the other to catch up, then instead of requesting another
+      //    segment and using up more bandwidth, by not yet loading, more bandwidth is
+      //    allotted to the loader currently behind.
+      // 2. media-segment-request doesn't have to have logic to consider whether a segment
+      // is ready to be processed or not, isolating the queueing behavior to the loader.
+      // 3. The audio loader bases some of its segment properties on timing information
+      //    provided by the main loader, meaning that, if the logic for waiting on
+      //    processing was in media-segment-request, then it would also need to know how
+      //    to re-generate the segment information after the main loader caught up.
+      shouldWaitForTimelineChange({
+        timelineChangeController: this.timelineChangeController_,
+        currentTimeline: this.currentTimeline_,
+        segmentTimeline: segmentInfo.timeline,
+        loaderType: this.loaderType_,
+        audioDisabled: this.audioDisabled_
+      })) {
+        return false;
+      }
+      return true;
+    }
+    getCurrentMediaInfo_(segmentInfo = this.pendingSegment_) {
+      return segmentInfo && segmentInfo.trackInfo || this.currentMediaInfo_;
+    }
+    getMediaInfo_(segmentInfo = this.pendingSegment_) {
+      return this.getCurrentMediaInfo_(segmentInfo) || this.startingMediaInfo_;
+    }
+    getPendingSegmentPlaylist() {
+      return this.pendingSegment_ ? this.pendingSegment_.playlist : null;
+    }
+    hasEnoughInfoToAppend_() {
+      if (!this.sourceUpdater_.ready()) {
+        return false;
+      } // If content needs to be removed or the loader is waiting on an append reattempt,
+      // then no additional content should be appended until the prior append is resolved.
+
+      if (this.waitingOnRemove_ || this.quotaExceededErrorRetryTimeout_) {
+        return false;
+      }
+      const segmentInfo = this.pendingSegment_;
+      const trackInfo = this.getCurrentMediaInfo_(); // no segment to append any data for or
+      // we do not have information on this specific
+      // segment yet
+
+      if (!segmentInfo || !trackInfo) {
+        return false;
+      }
+      const {
+        hasAudio,
+        hasVideo,
+        isMuxed
+      } = trackInfo;
+      if (hasVideo && !segmentInfo.videoTimingInfo) {
+        return false;
+      } // muxed content only relies on video timing information for now.
+
+      if (hasAudio && !this.audioDisabled_ && !isMuxed && !segmentInfo.audioTimingInfo) {
+        return false;
+      }
+      if (shouldWaitForTimelineChange({
+        timelineChangeController: this.timelineChangeController_,
+        currentTimeline: this.currentTimeline_,
+        segmentTimeline: segmentInfo.timeline,
+        loaderType: this.loaderType_,
+        audioDisabled: this.audioDisabled_
+      })) {
+        return false;
+      }
+      return true;
+    }
+    handleData_(simpleSegment, result) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      } // If there's anything in the call queue, then this data came later and should be
+      // executed after the calls currently queued.
+
+      if (this.callQueue_.length || !this.hasEnoughInfoToAppend_()) {
+        this.callQueue_.push(this.handleData_.bind(this, simpleSegment, result));
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // update the time mapping so we can translate from display time to media time
+
+      this.setTimeMapping_(segmentInfo.timeline); // for tracking overall stats
+
+      this.updateMediaSecondsLoaded_(segmentInfo.part || segmentInfo.segment); // Note that the state isn't changed from loading to appending. This is because abort
+      // logic may change behavior depending on the state, and changing state too early may
+      // inflate our estimates of bandwidth. In the future this should be re-examined to
+      // note more granular states.
+      // don't process and append data if the mediaSource is closed
+
+      if (this.mediaSource_.readyState === 'closed') {
+        return;
+      } // if this request included an initialization segment, save that data
+      // to the initSegment cache
+
+      if (simpleSegment.map) {
+        simpleSegment.map = this.initSegmentForMap(simpleSegment.map, true); // move over init segment properties to media request
+
+        segmentInfo.segment.map = simpleSegment.map;
+      } // if this request included a segment key, save that data in the cache
+
+      if (simpleSegment.key) {
+        this.segmentKey(simpleSegment.key, true);
+      }
+      segmentInfo.isFmp4 = simpleSegment.isFmp4;
+      segmentInfo.timingInfo = segmentInfo.timingInfo || {};
+      if (segmentInfo.isFmp4) {
+        this.trigger('fmp4');
+        segmentInfo.timingInfo.start = segmentInfo[timingInfoPropertyForMedia(result.type)].start;
+      } else {
+        const trackInfo = this.getCurrentMediaInfo_();
+        const useVideoTimingInfo = this.loaderType_ === 'main' && trackInfo && trackInfo.hasVideo;
+        let firstVideoFrameTimeForData;
+        if (useVideoTimingInfo) {
+          firstVideoFrameTimeForData = segmentInfo.videoTimingInfo.start;
+        } // Segment loader knows more about segment timing than the transmuxer (in certain
+        // aspects), so make any changes required for a more accurate start time.
+        // Don't set the end time yet, as the segment may not be finished processing.
+
+        segmentInfo.timingInfo.start = this.trueSegmentStart_({
+          currentStart: segmentInfo.timingInfo.start,
+          playlist: segmentInfo.playlist,
+          mediaIndex: segmentInfo.mediaIndex,
+          currentVideoTimestampOffset: this.sourceUpdater_.videoTimestampOffset(),
+          useVideoTimingInfo,
+          firstVideoFrameTimeForData,
+          videoTimingInfo: segmentInfo.videoTimingInfo,
+          audioTimingInfo: segmentInfo.audioTimingInfo
+        });
+      } // Init segments for audio and video only need to be appended in certain cases. Now
+      // that data is about to be appended, we can check the final cases to determine
+      // whether we should append an init segment.
+
+      this.updateAppendInitSegmentStatus(segmentInfo, result.type); // Timestamp offset should be updated once we get new data and have its timing info,
+      // as we use the start of the segment to offset the best guess (playlist provided)
+      // timestamp offset.
+
+      this.updateSourceBufferTimestampOffset_(segmentInfo); // if this is a sync request we need to determine whether it should
+      // be appended or not.
+
+      if (segmentInfo.isSyncRequest) {
+        // first save/update our timing info for this segment.
+        // this is what allows us to choose an accurate segment
+        // and the main reason we make a sync request.
+        this.updateTimingInfoEnd_(segmentInfo);
+        this.syncController_.saveSegmentTimingInfo({
+          segmentInfo,
+          shouldSaveTimelineMapping: this.loaderType_ === 'main'
+        });
+        const next = this.chooseNextRequest_(); // If the sync request isn't the segment that would be requested next
+        // after taking into account its timing info, do not append it.
+
+        if (next.mediaIndex !== segmentInfo.mediaIndex || next.partIndex !== segmentInfo.partIndex) {
+          this.logger_('sync segment was incorrect, not appending');
+          return;
+        } // otherwise append it like any other segment as our guess was correct.
+
+        this.logger_('sync segment was correct, appending');
+      } // Save some state so that in the future anything waiting on first append (and/or
+      // timestamp offset(s)) can process immediately. While the extra state isn't optimal,
+      // we need some notion of whether the timestamp offset or other relevant information
+      // has had a chance to be set.
+
+      segmentInfo.hasAppendedData_ = true; // Now that the timestamp offset should be set, we can append any waiting ID3 tags.
+
+      this.processMetadataQueue_();
+      this.appendData_(segmentInfo, result);
+    }
+    updateAppendInitSegmentStatus(segmentInfo, type) {
+      // alt audio doesn't manage timestamp offset
+      if (this.loaderType_ === 'main' && typeof segmentInfo.timestampOffset === 'number' &&
+      // in the case that we're handling partial data, we don't want to append an init
+      // segment for each chunk
+      !segmentInfo.changedTimestampOffset) {
+        // if the timestamp offset changed, the timeline may have changed, so we have to re-
+        // append init segments
+        this.appendInitSegment_ = {
+          audio: true,
+          video: true
+        };
+      }
+      if (this.playlistOfLastInitSegment_[type] !== segmentInfo.playlist) {
+        // make sure we append init segment on playlist changes, in case the media config
+        // changed
+        this.appendInitSegment_[type] = true;
+      }
+    }
+    getInitSegmentAndUpdateState_({
+      type,
+      initSegment,
+      map,
+      playlist
+    }) {
+      // "The EXT-X-MAP tag specifies how to obtain the Media Initialization Section
+      // (Section 3) required to parse the applicable Media Segments.  It applies to every
+      // Media Segment that appears after it in the Playlist until the next EXT-X-MAP tag
+      // or until the end of the playlist."
+      // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.2.5
+      if (map) {
+        const id = initSegmentId(map);
+        if (this.activeInitSegmentId_ === id) {
+          // don't need to re-append the init segment if the ID matches
+          return null;
+        } // a map-specified init segment takes priority over any transmuxed (or otherwise
+        // obtained) init segment
+        //
+        // this also caches the init segment for later use
+
+        initSegment = this.initSegmentForMap(map, true).bytes;
+        this.activeInitSegmentId_ = id;
+      } // We used to always prepend init segments for video, however, that shouldn't be
+      // necessary. Instead, we should only append on changes, similar to what we've always
+      // done for audio. This is more important (though may not be that important) for
+      // frame-by-frame appending for LHLS, simply because of the increased quantity of
+      // appends.
+
+      if (initSegment && this.appendInitSegment_[type]) {
+        // Make sure we track the playlist that we last used for the init segment, so that
+        // we can re-append the init segment in the event that we get data from a new
+        // playlist. Discontinuities and track changes are handled in other sections.
+        this.playlistOfLastInitSegment_[type] = playlist; // Disable future init segment appends for this type. Until a change is necessary.
+
+        this.appendInitSegment_[type] = false; // we need to clear out the fmp4 active init segment id, since
+        // we are appending the muxer init segment
+
+        this.activeInitSegmentId_ = null;
+        return initSegment;
+      }
+      return null;
+    }
+    handleQuotaExceededError_({
+      segmentInfo,
+      type,
+      bytes
+    }, error) {
+      const audioBuffered = this.sourceUpdater_.audioBuffered();
+      const videoBuffered = this.sourceUpdater_.videoBuffered(); // For now we're ignoring any notion of gaps in the buffer, but they, in theory,
+      // should be cleared out during the buffer removals. However, log in case it helps
+      // debug.
+
+      if (audioBuffered.length > 1) {
+        this.logger_('On QUOTA_EXCEEDED_ERR, found gaps in the audio buffer: ' + timeRangesToArray(audioBuffered).join(', '));
+      }
+      if (videoBuffered.length > 1) {
+        this.logger_('On QUOTA_EXCEEDED_ERR, found gaps in the video buffer: ' + timeRangesToArray(videoBuffered).join(', '));
+      }
+      const audioBufferStart = audioBuffered.length ? audioBuffered.start(0) : 0;
+      const audioBufferEnd = audioBuffered.length ? audioBuffered.end(audioBuffered.length - 1) : 0;
+      const videoBufferStart = videoBuffered.length ? videoBuffered.start(0) : 0;
+      const videoBufferEnd = videoBuffered.length ? videoBuffered.end(videoBuffered.length - 1) : 0;
+      if (audioBufferEnd - audioBufferStart <= MIN_BACK_BUFFER && videoBufferEnd - videoBufferStart <= MIN_BACK_BUFFER) {
+        // Can't remove enough buffer to make room for new segment (or the browser doesn't
+        // allow for appends of segments this size). In the future, it may be possible to
+        // split up the segment and append in pieces, but for now, error out this playlist
+        // in an attempt to switch to a more manageable rendition.
+        this.logger_('On QUOTA_EXCEEDED_ERR, single segment too large to append to ' + 'buffer, triggering an error. ' + `Appended byte length: ${bytes.byteLength}, ` + `audio buffer: ${timeRangesToArray(audioBuffered).join(', ')}, ` + `video buffer: ${timeRangesToArray(videoBuffered).join(', ')}, `);
+        this.error({
+          message: 'Quota exceeded error with append of a single segment of content',
+          excludeUntil: Infinity,
+          metadata: {
+            errorType: videojs.Error.SegmentExceedsSourceBufferQuota
+          }
+        });
+        this.trigger('error');
+        return;
+      } // To try to resolve the quota exceeded error, clear back buffer and retry. This means
+      // that the segment-loader should block on future events until this one is handled, so
+      // that it doesn't keep moving onto further segments. Adding the call to the call
+      // queue will prevent further appends until waitingOnRemove_ and
+      // quotaExceededErrorRetryTimeout_ are cleared.
+      //
+      // Note that this will only block the current loader. In the case of demuxed content,
+      // the other load may keep filling as fast as possible. In practice, this should be
+      // OK, as it is a rare case when either audio has a high enough bitrate to fill up a
+      // source buffer, or video fills without enough room for audio to append (and without
+      // the availability of clearing out seconds of back buffer to make room for audio).
+      // But it might still be good to handle this case in the future as a TODO.
+
+      this.waitingOnRemove_ = true;
+      this.callQueue_.push(this.appendToSourceBuffer_.bind(this, {
+        segmentInfo,
+        type,
+        bytes
+      }));
+      const currentTime = this.currentTime_(); // Try to remove as much audio and video as possible to make room for new content
+      // before retrying.
+
+      const timeToRemoveUntil = currentTime - MIN_BACK_BUFFER;
+      this.logger_(`On QUOTA_EXCEEDED_ERR, removing audio/video from 0 to ${timeToRemoveUntil}`);
+      this.remove(0, timeToRemoveUntil, () => {
+        this.logger_(`On QUOTA_EXCEEDED_ERR, retrying append in ${MIN_BACK_BUFFER}s`);
+        this.waitingOnRemove_ = false; // wait the length of time alotted in the back buffer to prevent wasted
+        // attempts (since we can't clear less than the minimum)
+
+        this.quotaExceededErrorRetryTimeout_ = window.setTimeout(() => {
+          this.logger_('On QUOTA_EXCEEDED_ERR, re-processing call queue');
+          this.quotaExceededErrorRetryTimeout_ = null;
+          this.processCallQueue_();
+        }, MIN_BACK_BUFFER * 1000);
+      }, true);
+    }
+    handleAppendError_({
+      segmentInfo,
+      type,
+      bytes
+    }, error) {
+      // if there's no error, nothing to do
+      if (!error) {
+        return;
+      }
+      if (error.code === QUOTA_EXCEEDED_ERR) {
+        this.handleQuotaExceededError_({
+          segmentInfo,
+          type,
+          bytes
+        }); // A quota exceeded error should be recoverable with a future re-append, so no need
+        // to trigger an append error.
+
+        return;
+      }
+      this.logger_('Received non QUOTA_EXCEEDED_ERR on append', error); // If an append errors, we often can't recover.
+      // (see https://w3c.github.io/media-source/#sourcebuffer-append-error).
+      //
+      // Trigger a special error so that it can be handled separately from normal,
+      // recoverable errors.
+
+      this.error({
+        message: `${type} append of ${bytes.length}b failed for segment ` + `#${segmentInfo.mediaIndex} in playlist ${segmentInfo.playlist.id}`,
+        metadata: {
+          errorType: videojs.Error.SegmentAppendError
+        }
+      });
+      this.trigger('appenderror');
+    }
+    appendToSourceBuffer_({
+      segmentInfo,
+      type,
+      initSegment,
+      data,
+      bytes
+    }) {
+      // If this is a re-append, bytes were already created and don't need to be recreated
+      if (!bytes) {
+        const segments = [data];
+        let byteLength = data.byteLength;
+        if (initSegment) {
+          // if the media initialization segment is changing, append it before the content
+          // segment
+          segments.unshift(initSegment);
+          byteLength += initSegment.byteLength;
+        } // Technically we should be OK appending the init segment separately, however, we
+        // haven't yet tested that, and prepending is how we have always done things.
+
+        bytes = concatSegments({
+          bytes: byteLength,
+          segments
+        });
+      }
+      this.sourceUpdater_.appendBuffer({
+        segmentInfo,
+        type,
+        bytes
+      }, this.handleAppendError_.bind(this, {
+        segmentInfo,
+        type,
+        bytes
+      }));
+    }
+    handleSegmentTimingInfo_(type, requestId, segmentTimingInfo) {
+      if (!this.pendingSegment_ || requestId !== this.pendingSegment_.requestId) {
+        return;
+      }
+      const segment = this.pendingSegment_.segment;
+      const timingInfoProperty = `${type}TimingInfo`;
+      if (!segment[timingInfoProperty]) {
+        segment[timingInfoProperty] = {};
+      }
+      segment[timingInfoProperty].transmuxerPrependedSeconds = segmentTimingInfo.prependedContentDuration || 0;
+      segment[timingInfoProperty].transmuxedPresentationStart = segmentTimingInfo.start.presentation;
+      segment[timingInfoProperty].transmuxedDecodeStart = segmentTimingInfo.start.decode;
+      segment[timingInfoProperty].transmuxedPresentationEnd = segmentTimingInfo.end.presentation;
+      segment[timingInfoProperty].transmuxedDecodeEnd = segmentTimingInfo.end.decode; // mainly used as a reference for debugging
+
+      segment[timingInfoProperty].baseMediaDecodeTime = segmentTimingInfo.baseMediaDecodeTime;
+    }
+    appendData_(segmentInfo, result) {
+      const {
+        type,
+        data
+      } = result;
+      if (!data || !data.byteLength) {
+        return;
+      }
+      if (type === 'audio' && this.audioDisabled_) {
+        return;
+      }
+      const initSegment = this.getInitSegmentAndUpdateState_({
+        type,
+        initSegment: result.initSegment,
+        playlist: segmentInfo.playlist,
+        map: segmentInfo.isFmp4 ? segmentInfo.segment.map : null
+      });
+      this.appendToSourceBuffer_({
+        segmentInfo,
+        type,
+        initSegment,
+        data
+      });
+    }
+    /**
+     * load a specific segment from a request into the buffer
+     *
+     * @private
+     */
+
+    loadSegment_(segmentInfo) {
+      this.state = 'WAITING';
+      this.pendingSegment_ = segmentInfo;
+      this.trimBackBuffer_(segmentInfo);
+      if (typeof segmentInfo.timestampOffset === 'number') {
+        if (this.transmuxer_) {
+          this.transmuxer_.postMessage({
+            action: 'clearAllMp4Captions'
+          });
+        }
+      }
+      if (!this.hasEnoughInfoToLoad_()) {
+        this.loadQueue_.push(() => {
+          // regenerate the audioAppendStart, timestampOffset, etc as they
+          // may have changed since this function was added to the queue.
+          const options = _extends$1({}, segmentInfo, {
+            forceTimestampOffset: true
+          });
+          _extends$1(segmentInfo, this.generateSegmentInfo_(options));
+          this.isPendingTimestampOffset_ = false;
+          this.updateTransmuxerAndRequestSegment_(segmentInfo);
+        });
+        return;
+      }
+      this.updateTransmuxerAndRequestSegment_(segmentInfo);
+    }
+    updateTransmuxerAndRequestSegment_(segmentInfo) {
+      // We'll update the source buffer's timestamp offset once we have transmuxed data, but
+      // the transmuxer still needs to be updated before then.
+      //
+      // Even though keepOriginalTimestamps is set to true for the transmuxer, timestamp
+      // offset must be passed to the transmuxer for stream correcting adjustments.
+      if (this.shouldUpdateTransmuxerTimestampOffset_(segmentInfo.timestampOffset)) {
+        this.gopBuffer_.length = 0; // gopsToAlignWith was set before the GOP buffer was cleared
+
+        segmentInfo.gopsToAlignWith = [];
+        this.timeMapping_ = 0; // reset values in the transmuxer since a discontinuity should start fresh
+
+        this.transmuxer_.postMessage({
+          action: 'reset'
+        });
+        this.transmuxer_.postMessage({
+          action: 'setTimestampOffset',
+          timestampOffset: segmentInfo.timestampOffset
+        });
+      }
+      const simpleSegment = this.createSimplifiedSegmentObj_(segmentInfo);
+      const isEndOfStream = this.isEndOfStream_(segmentInfo.mediaIndex, segmentInfo.playlist, segmentInfo.partIndex);
+      const isWalkingForward = this.mediaIndex !== null;
+      const isDiscontinuity = segmentInfo.timeline !== this.currentTimeline_ &&
+      // currentTimeline starts at -1, so we shouldn't end the timeline switching to 0,
+      // the first timeline
+      segmentInfo.timeline > 0;
+      const isEndOfTimeline = isEndOfStream || isWalkingForward && isDiscontinuity;
+      this.logger_(`Requesting
+${compactSegmentUrlDescription(segmentInfo.uri)}
+${segmentInfoString(segmentInfo)}`); // If there's an init segment associated with this segment, but it is not cached (identified by a lack of bytes),
+      // then this init segment has never been seen before and should be appended.
+      //
+      // At this point the content type (audio/video or both) is not yet known, but it should be safe to set
+      // both to true and leave the decision of whether to append the init segment to append time.
+
+      if (simpleSegment.map && !simpleSegment.map.bytes) {
+        this.logger_('going to request init segment.');
+        this.appendInitSegment_ = {
+          video: true,
+          audio: true
+        };
+      }
+      segmentInfo.abortRequests = mediaSegmentRequest({
+        xhr: this.vhs_.xhr,
+        xhrOptions: this.xhrOptions_,
+        decryptionWorker: this.decrypter_,
+        segment: simpleSegment,
+        abortFn: this.handleAbort_.bind(this, segmentInfo),
+        progressFn: this.handleProgress_.bind(this),
+        trackInfoFn: this.handleTrackInfo_.bind(this),
+        timingInfoFn: this.handleTimingInfo_.bind(this),
+        videoSegmentTimingInfoFn: this.handleSegmentTimingInfo_.bind(this, 'video', segmentInfo.requestId),
+        audioSegmentTimingInfoFn: this.handleSegmentTimingInfo_.bind(this, 'audio', segmentInfo.requestId),
+        captionsFn: this.handleCaptions_.bind(this),
+        isEndOfTimeline,
+        endedTimelineFn: () => {
+          this.logger_('received endedtimeline callback');
+        },
+        id3Fn: this.handleId3_.bind(this),
+        dataFn: this.handleData_.bind(this),
+        doneFn: this.segmentRequestFinished_.bind(this),
+        onTransmuxerLog: ({
+          message,
+          level,
+          stream
+        }) => {
+          this.logger_(`${segmentInfoString(segmentInfo)} logged from transmuxer stream ${stream} as a ${level}: ${message}`);
+        }
+      });
+    }
+    /**
+     * trim the back buffer so that we don't have too much data
+     * in the source buffer
+     *
+     * @private
+     *
+     * @param {Object} segmentInfo - the current segment
+     */
+
+    trimBackBuffer_(segmentInfo) {
+      const removeToTime = safeBackBufferTrimTime(this.seekable_(), this.currentTime_(), this.playlist_.targetDuration || 10); // Chrome has a hard limit of 150MB of
+      // buffer and a very conservative "garbage collector"
+      // We manually clear out the old buffer to ensure
+      // we don't trigger the QuotaExceeded error
+      // on the source buffer during subsequent appends
+
+      if (removeToTime > 0) {
+        this.remove(0, removeToTime);
+      }
+    }
+    /**
+     * created a simplified copy of the segment object with just the
+     * information necessary to perform the XHR and decryption
+     *
+     * @private
+     *
+     * @param {Object} segmentInfo - the current segment
+     * @return {Object} a simplified segment object copy
+     */
+
+    createSimplifiedSegmentObj_(segmentInfo) {
+      const segment = segmentInfo.segment;
+      const part = segmentInfo.part;
+      const simpleSegment = {
+        resolvedUri: part ? part.resolvedUri : segment.resolvedUri,
+        byterange: part ? part.byterange : segment.byterange,
+        requestId: segmentInfo.requestId,
+        transmuxer: segmentInfo.transmuxer,
+        audioAppendStart: segmentInfo.audioAppendStart,
+        gopsToAlignWith: segmentInfo.gopsToAlignWith,
+        part: segmentInfo.part
+      };
+      const previousSegment = segmentInfo.playlist.segments[segmentInfo.mediaIndex - 1];
+      if (previousSegment && previousSegment.timeline === segment.timeline) {
+        // The baseStartTime of a segment is used to handle rollover when probing the TS
+        // segment to retrieve timing information. Since the probe only looks at the media's
+        // times (e.g., PTS and DTS values of the segment), and doesn't consider the
+        // player's time (e.g., player.currentTime()), baseStartTime should reflect the
+        // media time as well. transmuxedDecodeEnd represents the end time of a segment, in
+        // seconds of media time, so should be used here. The previous segment is used since
+        // the end of the previous segment should represent the beginning of the current
+        // segment, so long as they are on the same timeline.
+        if (previousSegment.videoTimingInfo) {
+          simpleSegment.baseStartTime = previousSegment.videoTimingInfo.transmuxedDecodeEnd;
+        } else if (previousSegment.audioTimingInfo) {
+          simpleSegment.baseStartTime = previousSegment.audioTimingInfo.transmuxedDecodeEnd;
+        }
+      }
+      if (segment.key) {
+        // if the media sequence is greater than 2^32, the IV will be incorrect
+        // assuming 10s segments, that would be about 1300 years
+        const iv = segment.key.iv || new Uint32Array([0, 0, 0, segmentInfo.mediaIndex + segmentInfo.playlist.mediaSequence]);
+        simpleSegment.key = this.segmentKey(segment.key);
+        simpleSegment.key.iv = iv;
+      }
+      if (segment.map) {
+        simpleSegment.map = this.initSegmentForMap(segment.map);
+      }
+      return simpleSegment;
+    }
+    saveTransferStats_(stats) {
+      // every request counts as a media request even if it has been aborted
+      // or canceled due to a timeout
+      this.mediaRequests += 1;
+      if (stats) {
+        this.mediaBytesTransferred += stats.bytesReceived;
+        this.mediaTransferDuration += stats.roundTripTime;
+      }
+    }
+    saveBandwidthRelatedStats_(duration, stats) {
+      // byteLength will be used for throughput, and should be based on bytes receieved,
+      // which we only know at the end of the request and should reflect total bytes
+      // downloaded rather than just bytes processed from components of the segment
+      this.pendingSegment_.byteLength = stats.bytesReceived;
+      if (duration < MIN_SEGMENT_DURATION_TO_SAVE_STATS) {
+        this.logger_(`Ignoring segment's bandwidth because its duration of ${duration}` + ` is less than the min to record ${MIN_SEGMENT_DURATION_TO_SAVE_STATS}`);
+        return;
+      }
+      this.bandwidth = stats.bandwidth;
+      this.roundTrip = stats.roundTripTime;
+    }
+    handleTimeout_() {
+      // although the VTT segment loader bandwidth isn't really used, it's good to
+      // maintain functinality between segment loaders
+      this.mediaRequestsTimedout += 1;
+      this.bandwidth = 1;
+      this.roundTrip = NaN;
+      this.trigger('bandwidthupdate');
+      this.trigger('timeout');
+    }
+    /**
+     * Handle the callback from the segmentRequest function and set the
+     * associated SegmentLoader state and errors if necessary
+     *
+     * @private
+     */
+
+    segmentRequestFinished_(error, simpleSegment, result) {
+      // TODO handle special cases, e.g., muxed audio/video but only audio in the segment
+      // check the call queue directly since this function doesn't need to deal with any
+      // data, and can continue even if the source buffers are not set up and we didn't get
+      // any data from the segment
+      if (this.callQueue_.length) {
+        this.callQueue_.push(this.segmentRequestFinished_.bind(this, error, simpleSegment, result));
+        return;
+      }
+      this.saveTransferStats_(simpleSegment.stats); // The request was aborted and the SegmentLoader has already been reset
+
+      if (!this.pendingSegment_) {
+        return;
+      } // the request was aborted and the SegmentLoader has already started
+      // another request. this can happen when the timeout for an aborted
+      // request triggers due to a limitation in the XHR library
+      // do not count this as any sort of request or we risk double-counting
+
+      if (simpleSegment.requestId !== this.pendingSegment_.requestId) {
+        return;
+      } // an error occurred from the active pendingSegment_ so reset everything
+
+      if (error) {
+        this.pendingSegment_ = null;
+        this.state = 'READY'; // aborts are not a true error condition and nothing corrective needs to be done
+
+        if (error.code === REQUEST_ERRORS.ABORTED) {
+          return;
+        }
+        this.pause(); // the error is really just that at least one of the requests timed-out
+        // set the bandwidth to a very low value and trigger an ABR switch to
+        // take emergency action
+
+        if (error.code === REQUEST_ERRORS.TIMEOUT) {
+          this.handleTimeout_();
+          return;
+        } // if control-flow has arrived here, then the error is real
+        // emit an error event to exclude the current playlist
+
+        this.mediaRequestsErrored += 1;
+        this.error(error);
+        this.trigger('error');
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // the response was a success so set any bandwidth stats the request
+      // generated for ABR purposes
+
+      this.saveBandwidthRelatedStats_(segmentInfo.duration, simpleSegment.stats);
+      segmentInfo.endOfAllRequests = simpleSegment.endOfAllRequests;
+      if (result.gopInfo) {
+        this.gopBuffer_ = updateGopBuffer(this.gopBuffer_, result.gopInfo, this.safeAppend_);
+      } // Although we may have already started appending on progress, we shouldn't switch the
+      // state away from loading until we are officially done loading the segment data.
+
+      this.state = 'APPENDING'; // used for testing
+
+      this.trigger('appending');
+      this.waitForAppendsToComplete_(segmentInfo);
+    }
+    setTimeMapping_(timeline) {
+      const timelineMapping = this.syncController_.mappingForTimeline(timeline);
+      if (timelineMapping !== null) {
+        this.timeMapping_ = timelineMapping;
+      }
+    }
+    updateMediaSecondsLoaded_(segment) {
+      if (typeof segment.start === 'number' && typeof segment.end === 'number') {
+        this.mediaSecondsLoaded += segment.end - segment.start;
+      } else {
+        this.mediaSecondsLoaded += segment.duration;
+      }
+    }
+    shouldUpdateTransmuxerTimestampOffset_(timestampOffset) {
+      if (timestampOffset === null) {
+        return false;
+      } // note that we're potentially using the same timestamp offset for both video and
+      // audio
+
+      if (this.loaderType_ === 'main' && timestampOffset !== this.sourceUpdater_.videoTimestampOffset()) {
+        return true;
+      }
+      if (!this.audioDisabled_ && timestampOffset !== this.sourceUpdater_.audioTimestampOffset()) {
+        return true;
+      }
+      return false;
+    }
+    trueSegmentStart_({
+      currentStart,
+      playlist,
+      mediaIndex,
+      firstVideoFrameTimeForData,
+      currentVideoTimestampOffset,
+      useVideoTimingInfo,
+      videoTimingInfo,
+      audioTimingInfo
+    }) {
+      if (typeof currentStart !== 'undefined') {
+        // if start was set once, keep using it
+        return currentStart;
+      }
+      if (!useVideoTimingInfo) {
+        return audioTimingInfo.start;
+      }
+      const previousSegment = playlist.segments[mediaIndex - 1]; // The start of a segment should be the start of the first full frame contained
+      // within that segment. Since the transmuxer maintains a cache of incomplete data
+      // from and/or the last frame seen, the start time may reflect a frame that starts
+      // in the previous segment. Check for that case and ensure the start time is
+      // accurate for the segment.
+
+      if (mediaIndex === 0 || !previousSegment || typeof previousSegment.start === 'undefined' || previousSegment.end !== firstVideoFrameTimeForData + currentVideoTimestampOffset) {
+        return firstVideoFrameTimeForData;
+      }
+      return videoTimingInfo.start;
+    }
+    waitForAppendsToComplete_(segmentInfo) {
+      const trackInfo = this.getCurrentMediaInfo_(segmentInfo);
+      if (!trackInfo) {
+        this.error({
+          message: 'No starting media returned, likely due to an unsupported media format.',
+          playlistExclusionDuration: Infinity,
+          metadata: {
+            errorType: videojs.Error.SegmentUnsupportedMediaFormat
+          }
+        });
+        this.trigger('error');
+        return;
+      } // Although transmuxing is done, appends may not yet be finished. Throw a marker
+      // on each queue this loader is responsible for to ensure that the appends are
+      // complete.
+
+      const {
+        hasAudio,
+        hasVideo,
+        isMuxed
+      } = trackInfo;
+      const waitForVideo = this.loaderType_ === 'main' && hasVideo;
+      const waitForAudio = !this.audioDisabled_ && hasAudio && !isMuxed;
+      segmentInfo.waitingOnAppends = 0; // segments with no data
+
+      if (!segmentInfo.hasAppendedData_) {
+        if (!segmentInfo.timingInfo && typeof segmentInfo.timestampOffset === 'number') {
+          // When there's no audio or video data in the segment, there's no audio or video
+          // timing information.
+          //
+          // If there's no audio or video timing information, then the timestamp offset
+          // can't be adjusted to the appropriate value for the transmuxer and source
+          // buffers.
+          //
+          // Therefore, the next segment should be used to set the timestamp offset.
+          this.isPendingTimestampOffset_ = true;
+        } // override settings for metadata only segments
+
+        segmentInfo.timingInfo = {
+          start: 0
+        };
+        segmentInfo.waitingOnAppends++;
+        if (!this.isPendingTimestampOffset_) {
+          // update the timestampoffset
+          this.updateSourceBufferTimestampOffset_(segmentInfo); // make sure the metadata queue is processed even though we have
+          // no video/audio data.
+
+          this.processMetadataQueue_();
+        } // append is "done" instantly with no data.
+
+        this.checkAppendsDone_(segmentInfo);
+        return;
+      } // Since source updater could call back synchronously, do the increments first.
+
+      if (waitForVideo) {
+        segmentInfo.waitingOnAppends++;
+      }
+      if (waitForAudio) {
+        segmentInfo.waitingOnAppends++;
+      }
+      if (waitForVideo) {
+        this.sourceUpdater_.videoQueueCallback(this.checkAppendsDone_.bind(this, segmentInfo));
+      }
+      if (waitForAudio) {
+        this.sourceUpdater_.audioQueueCallback(this.checkAppendsDone_.bind(this, segmentInfo));
+      }
+    }
+    checkAppendsDone_(segmentInfo) {
+      if (this.checkForAbort_(segmentInfo.requestId)) {
+        return;
+      }
+      segmentInfo.waitingOnAppends--;
+      if (segmentInfo.waitingOnAppends === 0) {
+        this.handleAppendsDone_();
+      }
+    }
+    checkForIllegalMediaSwitch(trackInfo) {
+      const illegalMediaSwitchError = illegalMediaSwitch(this.loaderType_, this.getCurrentMediaInfo_(), trackInfo);
+      if (illegalMediaSwitchError) {
+        this.error({
+          message: illegalMediaSwitchError,
+          playlistExclusionDuration: Infinity,
+          metadata: {
+            errorType: videojs.Error.SegmentSwitchError
+          }
+        });
+        this.trigger('error');
+        return true;
+      }
+      return false;
+    }
+    updateSourceBufferTimestampOffset_(segmentInfo) {
+      if (segmentInfo.timestampOffset === null ||
+      // we don't yet have the start for whatever media type (video or audio) has
+      // priority, timing-wise, so we must wait
+      typeof segmentInfo.timingInfo.start !== 'number' ||
+      // already updated the timestamp offset for this segment
+      segmentInfo.changedTimestampOffset ||
+      // the alt audio loader should not be responsible for setting the timestamp offset
+      this.loaderType_ !== 'main') {
+        return;
+      }
+      let didChange = false; // Primary timing goes by video, and audio is trimmed in the transmuxer, meaning that
+      // the timing info here comes from video. In the event that the audio is longer than
+      // the video, this will trim the start of the audio.
+      // This also trims any offset from 0 at the beginning of the media
+
+      segmentInfo.timestampOffset -= this.getSegmentStartTimeForTimestampOffsetCalculation_({
+        videoTimingInfo: segmentInfo.segment.videoTimingInfo,
+        audioTimingInfo: segmentInfo.segment.audioTimingInfo,
+        timingInfo: segmentInfo.timingInfo
+      }); // In the event that there are part segment downloads, each will try to update the
+      // timestamp offset. Retaining this bit of state prevents us from updating in the
+      // future (within the same segment), however, there may be a better way to handle it.
+
+      segmentInfo.changedTimestampOffset = true;
+      if (segmentInfo.timestampOffset !== this.sourceUpdater_.videoTimestampOffset()) {
+        this.sourceUpdater_.videoTimestampOffset(segmentInfo.timestampOffset);
+        didChange = true;
+      }
+      if (segmentInfo.timestampOffset !== this.sourceUpdater_.audioTimestampOffset()) {
+        this.sourceUpdater_.audioTimestampOffset(segmentInfo.timestampOffset);
+        didChange = true;
+      }
+      if (didChange) {
+        this.trigger('timestampoffset');
+      }
+    }
+    getSegmentStartTimeForTimestampOffsetCalculation_({
+      videoTimingInfo,
+      audioTimingInfo,
+      timingInfo
+    }) {
+      if (!this.useDtsForTimestampOffset_) {
+        return timingInfo.start;
+      }
+      if (videoTimingInfo && typeof videoTimingInfo.transmuxedDecodeStart === 'number') {
+        return videoTimingInfo.transmuxedDecodeStart;
+      } // handle audio only
+
+      if (audioTimingInfo && typeof audioTimingInfo.transmuxedDecodeStart === 'number') {
+        return audioTimingInfo.transmuxedDecodeStart;
+      } // handle content not transmuxed (e.g., MP4)
+
+      return timingInfo.start;
+    }
+    updateTimingInfoEnd_(segmentInfo) {
+      segmentInfo.timingInfo = segmentInfo.timingInfo || {};
+      const trackInfo = this.getMediaInfo_();
+      const useVideoTimingInfo = this.loaderType_ === 'main' && trackInfo && trackInfo.hasVideo;
+      const prioritizedTimingInfo = useVideoTimingInfo && segmentInfo.videoTimingInfo ? segmentInfo.videoTimingInfo : segmentInfo.audioTimingInfo;
+      if (!prioritizedTimingInfo) {
+        return;
+      }
+      segmentInfo.timingInfo.end = typeof prioritizedTimingInfo.end === 'number' ?
+      // End time may not exist in a case where we aren't parsing the full segment (one
+      // current example is the case of fmp4), so use the rough duration to calculate an
+      // end time.
+      prioritizedTimingInfo.end : prioritizedTimingInfo.start + segmentInfo.duration;
+    }
+    /**
+     * callback to run when appendBuffer is finished. detects if we are
+     * in a good state to do things with the data we got, or if we need
+     * to wait for more
+     *
+     * @private
+     */
+
+    handleAppendsDone_() {
+      // appendsdone can cause an abort
+      if (this.pendingSegment_) {
+        this.trigger('appendsdone');
+      }
+      if (!this.pendingSegment_) {
+        this.state = 'READY'; // TODO should this move into this.checkForAbort to speed up requests post abort in
+        // all appending cases?
+
+        if (!this.paused()) {
+          this.monitorBuffer_();
+        }
+        return;
+      }
+      const segmentInfo = this.pendingSegment_;
+      if (segmentInfo.part && segmentInfo.part.syncInfo) {
+        // low-latency flow
+        segmentInfo.part.syncInfo.markAppended();
+      } else if (segmentInfo.segment.syncInfo) {
+        // normal flow
+        segmentInfo.segment.syncInfo.markAppended();
+      } // Now that the end of the segment has been reached, we can set the end time. It's
+      // best to wait until all appends are done so we're sure that the primary media is
+      // finished (and we have its end time).
+
+      this.updateTimingInfoEnd_(segmentInfo);
+      if (this.shouldSaveSegmentTimingInfo_) {
+        // Timeline mappings should only be saved for the main loader. This is for multiple
+        // reasons:
+        //
+        // 1) Only one mapping is saved per timeline, meaning that if both the audio loader
+        //    and the main loader try to save the timeline mapping, whichever comes later
+        //    will overwrite the first. In theory this is OK, as the mappings should be the
+        //    same, however, it breaks for (2)
+        // 2) In the event of a live stream, the initial live point will make for a somewhat
+        //    arbitrary mapping. If audio and video streams are not perfectly in-sync, then
+        //    the mapping will be off for one of the streams, dependent on which one was
+        //    first saved (see (1)).
+        // 3) Primary timing goes by video in VHS, so the mapping should be video.
+        //
+        // Since the audio loader will wait for the main loader to load the first segment,
+        // the main loader will save the first timeline mapping, and ensure that there won't
+        // be a case where audio loads two segments without saving a mapping (thus leading
+        // to missing segment timing info).
+        this.syncController_.saveSegmentTimingInfo({
+          segmentInfo,
+          shouldSaveTimelineMapping: this.loaderType_ === 'main'
+        });
+      }
+      const segmentDurationMessage = getTroublesomeSegmentDurationMessage(segmentInfo, this.sourceType_);
+      if (segmentDurationMessage) {
+        if (segmentDurationMessage.severity === 'warn') {
+          videojs.log.warn(segmentDurationMessage.message);
+        } else {
+          this.logger_(segmentDurationMessage.message);
+        }
+      }
+      this.recordThroughput_(segmentInfo);
+      this.pendingSegment_ = null;
+      this.state = 'READY';
+      if (segmentInfo.isSyncRequest) {
+        this.trigger('syncinfoupdate'); // if the sync request was not appended
+        // then it was not the correct segment.
+        // throw it away and use the data it gave us
+        // to get the correct one.
+
+        if (!segmentInfo.hasAppendedData_) {
+          this.logger_(`Throwing away un-appended sync request ${segmentInfoString(segmentInfo)}`);
+          return;
+        }
+      }
+      this.logger_(`Appended ${segmentInfoString(segmentInfo)}`);
+      this.addSegmentMetadataCue_(segmentInfo);
+      this.fetchAtBuffer_ = true;
+      if (this.currentTimeline_ !== segmentInfo.timeline) {
+        this.timelineChangeController_.lastTimelineChange({
+          type: this.loaderType_,
+          from: this.currentTimeline_,
+          to: segmentInfo.timeline
+        }); // If audio is not disabled, the main segment loader is responsible for updating
+        // the audio timeline as well. If the content is video only, this won't have any
+        // impact.
+
+        if (this.loaderType_ === 'main' && !this.audioDisabled_) {
+          this.timelineChangeController_.lastTimelineChange({
+            type: 'audio',
+            from: this.currentTimeline_,
+            to: segmentInfo.timeline
+          });
+        }
+      }
+      this.currentTimeline_ = segmentInfo.timeline; // We must update the syncinfo to recalculate the seekable range before
+      // the following conditional otherwise it may consider this a bad "guess"
+      // and attempt to resync when the post-update seekable window and live
+      // point would mean that this was the perfect segment to fetch
+
+      this.trigger('syncinfoupdate');
+      const segment = segmentInfo.segment;
+      const part = segmentInfo.part;
+      const badSegmentGuess = segment.end && this.currentTime_() - segment.end > segmentInfo.playlist.targetDuration * 3;
+      const badPartGuess = part && part.end && this.currentTime_() - part.end > segmentInfo.playlist.partTargetDuration * 3; // If we previously appended a segment/part that ends more than 3 part/targetDurations before
+      // the currentTime_ that means that our conservative guess was too conservative.
+      // In that case, reset the loader state so that we try to use any information gained
+      // from the previous request to create a new, more accurate, sync-point.
+
+      if (badSegmentGuess || badPartGuess) {
+        this.logger_(`bad ${badSegmentGuess ? 'segment' : 'part'} ${segmentInfoString(segmentInfo)}`);
+        this.resetEverything();
+        return;
+      }
+      const isWalkingForward = this.mediaIndex !== null; // Don't do a rendition switch unless we have enough time to get a sync segment
+      // and conservatively guess
+
+      if (isWalkingForward) {
+        this.trigger('bandwidthupdate');
+      }
+      this.trigger('progress');
+      this.mediaIndex = segmentInfo.mediaIndex;
+      this.partIndex = segmentInfo.partIndex; // any time an update finishes and the last segment is in the
+      // buffer, end the stream. this ensures the "ended" event will
+      // fire if playback reaches that point.
+
+      if (this.isEndOfStream_(segmentInfo.mediaIndex, segmentInfo.playlist, segmentInfo.partIndex)) {
+        this.endOfStream();
+      } // used for testing
+
+      this.trigger('appended');
+      if (segmentInfo.hasAppendedData_) {
+        this.mediaAppends++;
+      }
+      if (!this.paused()) {
+        this.monitorBuffer_();
+      }
+    }
+    /**
+     * Records the current throughput of the decrypt, transmux, and append
+     * portion of the semgment pipeline. `throughput.rate` is a the cumulative
+     * moving average of the throughput. `throughput.count` is the number of
+     * data points in the average.
+     *
+     * @private
+     * @param {Object} segmentInfo the object returned by loadSegment
+     */
+
+    recordThroughput_(segmentInfo) {
+      if (segmentInfo.duration < MIN_SEGMENT_DURATION_TO_SAVE_STATS) {
+        this.logger_(`Ignoring segment's throughput because its duration of ${segmentInfo.duration}` + ` is less than the min to record ${MIN_SEGMENT_DURATION_TO_SAVE_STATS}`);
+        return;
+      }
+      const rate = this.throughput.rate; // Add one to the time to ensure that we don't accidentally attempt to divide
+      // by zero in the case where the throughput is ridiculously high
+
+      const segmentProcessingTime = Date.now() - segmentInfo.endOfAllRequests + 1; // Multiply by 8000 to convert from bytes/millisecond to bits/second
+
+      const segmentProcessingThroughput = Math.floor(segmentInfo.byteLength / segmentProcessingTime * 8 * 1000); // This is just a cumulative moving average calculation:
+      //   newAvg = oldAvg + (sample - oldAvg) / (sampleCount + 1)
+
+      this.throughput.rate += (segmentProcessingThroughput - rate) / ++this.throughput.count;
+    }
+    /**
+     * Adds a cue to the segment-metadata track with some metadata information about the
+     * segment
+     *
+     * @private
+     * @param {Object} segmentInfo
+     *        the object returned by loadSegment
+     * @method addSegmentMetadataCue_
+     */
+
+    addSegmentMetadataCue_(segmentInfo) {
+      if (!this.segmentMetadataTrack_) {
+        return;
+      }
+      const segment = segmentInfo.segment;
+      const start = segment.start;
+      const end = segment.end; // Do not try adding the cue if the start and end times are invalid.
+
+      if (!finite(start) || !finite(end)) {
+        return;
+      }
+      removeCuesFromTrack(start, end, this.segmentMetadataTrack_);
+      const Cue = window.WebKitDataCue || window.VTTCue;
+      const value = {
+        custom: segment.custom,
+        dateTimeObject: segment.dateTimeObject,
+        dateTimeString: segment.dateTimeString,
+        programDateTime: segment.programDateTime,
+        bandwidth: segmentInfo.playlist.attributes.BANDWIDTH,
+        resolution: segmentInfo.playlist.attributes.RESOLUTION,
+        codecs: segmentInfo.playlist.attributes.CODECS,
+        byteLength: segmentInfo.byteLength,
+        uri: segmentInfo.uri,
+        timeline: segmentInfo.timeline,
+        playlist: segmentInfo.playlist.id,
+        start,
+        end
+      };
+      const data = JSON.stringify(value);
+      const cue = new Cue(start, end, data); // Attach the metadata to the value property of the cue to keep consistency between
+      // the differences of WebKitDataCue in safari and VTTCue in other browsers
+
+      cue.value = value;
+      this.segmentMetadataTrack_.addCue(cue);
+    }
+  }
+  function noop() {}
+  const toTitleCase = function (string) {
+    if (typeof string !== 'string') {
+      return string;
+    }
+    return string.replace(/./, w => w.toUpperCase());
+  };
+
+  /**
+   * @file source-updater.js
+   */
+  const bufferTypes = ['video', 'audio'];
+  const updating = (type, sourceUpdater) => {
+    const sourceBuffer = sourceUpdater[`${type}Buffer`];
+    return sourceBuffer && sourceBuffer.updating || sourceUpdater.queuePending[type];
+  };
+  const nextQueueIndexOfType = (type, queue) => {
+    for (let i = 0; i < queue.length; i++) {
+      const queueEntry = queue[i];
+      if (queueEntry.type === 'mediaSource') {
+        // If the next entry is a media source entry (uses multiple source buffers), block
+        // processing to allow it to go through first.
+        return null;
+      }
+      if (queueEntry.type === type) {
+        return i;
+      }
+    }
+    return null;
+  };
+  const shiftQueue = (type, sourceUpdater) => {
+    if (sourceUpdater.queue.length === 0) {
+      return;
+    }
+    let queueIndex = 0;
+    let queueEntry = sourceUpdater.queue[queueIndex];
+    if (queueEntry.type === 'mediaSource') {
+      if (!sourceUpdater.updating() && sourceUpdater.mediaSource.readyState !== 'closed') {
+        sourceUpdater.queue.shift();
+        queueEntry.action(sourceUpdater);
+        if (queueEntry.doneFn) {
+          queueEntry.doneFn();
+        } // Only specific source buffer actions must wait for async updateend events. Media
+        // Source actions process synchronously. Therefore, both audio and video source
+        // buffers are now clear to process the next queue entries.
+
+        shiftQueue('audio', sourceUpdater);
+        shiftQueue('video', sourceUpdater);
+      } // Media Source actions require both source buffers, so if the media source action
+      // couldn't process yet (because one or both source buffers are busy), block other
+      // queue actions until both are available and the media source action can process.
+
+      return;
+    }
+    if (type === 'mediaSource') {
+      // If the queue was shifted by a media source action (this happens when pushing a
+      // media source action onto the queue), then it wasn't from an updateend event from an
+      // audio or video source buffer, so there's no change from previous state, and no
+      // processing should be done.
+      return;
+    } // Media source queue entries don't need to consider whether the source updater is
+    // started (i.e., source buffers are created) as they don't need the source buffers, but
+    // source buffer queue entries do.
+
+    if (!sourceUpdater.ready() || sourceUpdater.mediaSource.readyState === 'closed' || updating(type, sourceUpdater)) {
+      return;
+    }
+    if (queueEntry.type !== type) {
+      queueIndex = nextQueueIndexOfType(type, sourceUpdater.queue);
+      if (queueIndex === null) {
+        // Either there's no queue entry that uses this source buffer type in the queue, or
+        // there's a media source queue entry before the next entry of this type, in which
+        // case wait for that action to process first.
+        return;
+      }
+      queueEntry = sourceUpdater.queue[queueIndex];
+    }
+    sourceUpdater.queue.splice(queueIndex, 1); // Keep a record that this source buffer type is in use.
+    //
+    // The queue pending operation must be set before the action is performed in the event
+    // that the action results in a synchronous event that is acted upon. For instance, if
+    // an exception is thrown that can be handled, it's possible that new actions will be
+    // appended to an empty queue and immediately executed, but would not have the correct
+    // pending information if this property was set after the action was performed.
+
+    sourceUpdater.queuePending[type] = queueEntry;
+    queueEntry.action(type, sourceUpdater);
+    if (!queueEntry.doneFn) {
+      // synchronous operation, process next entry
+      sourceUpdater.queuePending[type] = null;
+      shiftQueue(type, sourceUpdater);
+      return;
+    }
+  };
+  const cleanupBuffer = (type, sourceUpdater) => {
+    const buffer = sourceUpdater[`${type}Buffer`];
+    const titleType = toTitleCase(type);
+    if (!buffer) {
+      return;
+    }
+    buffer.removeEventListener('updateend', sourceUpdater[`on${titleType}UpdateEnd_`]);
+    buffer.removeEventListener('error', sourceUpdater[`on${titleType}Error_`]);
+    sourceUpdater.codecs[type] = null;
+    sourceUpdater[`${type}Buffer`] = null;
+  };
+  const inSourceBuffers = (mediaSource, sourceBuffer) => mediaSource && sourceBuffer && Array.prototype.indexOf.call(mediaSource.sourceBuffers, sourceBuffer) !== -1;
+  const actions = {
+    appendBuffer: (bytes, segmentInfo, onError) => (type, sourceUpdater) => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`Appending segment ${segmentInfo.mediaIndex}'s ${bytes.length} bytes to ${type}Buffer`);
+      try {
+        sourceBuffer.appendBuffer(bytes);
+      } catch (e) {
+        sourceUpdater.logger_(`Error with code ${e.code} ` + (e.code === QUOTA_EXCEEDED_ERR ? '(QUOTA_EXCEEDED_ERR) ' : '') + `when appending segment ${segmentInfo.mediaIndex} to ${type}Buffer`);
+        sourceUpdater.queuePending[type] = null;
+        onError(e);
+      }
+    },
+    remove: (start, end) => (type, sourceUpdater) => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`Removing ${start} to ${end} from ${type}Buffer`);
+      try {
+        sourceBuffer.remove(start, end);
+      } catch (e) {
+        sourceUpdater.logger_(`Remove ${start} to ${end} from ${type}Buffer failed`);
+      }
+    },
+    timestampOffset: offset => (type, sourceUpdater) => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`Setting ${type}timestampOffset to ${offset}`);
+      sourceBuffer.timestampOffset = offset;
+    },
+    callback: callback => (type, sourceUpdater) => {
+      callback();
+    },
+    endOfStream: error => sourceUpdater => {
+      if (sourceUpdater.mediaSource.readyState !== 'open') {
+        return;
+      }
+      sourceUpdater.logger_(`Calling mediaSource endOfStream(${error || ''})`);
+      try {
+        sourceUpdater.mediaSource.endOfStream(error);
+      } catch (e) {
+        videojs.log.warn('Failed to call media source endOfStream', e);
+      }
+    },
+    duration: duration => sourceUpdater => {
+      sourceUpdater.logger_(`Setting mediaSource duration to ${duration}`);
+      try {
+        sourceUpdater.mediaSource.duration = duration;
+      } catch (e) {
+        videojs.log.warn('Failed to set media source duration', e);
+      }
+    },
+    abort: () => (type, sourceUpdater) => {
+      if (sourceUpdater.mediaSource.readyState !== 'open') {
+        return;
+      }
+      const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`calling abort on ${type}Buffer`);
+      try {
+        sourceBuffer.abort();
+      } catch (e) {
+        videojs.log.warn(`Failed to abort on ${type}Buffer`, e);
+      }
+    },
+    addSourceBuffer: (type, codec) => sourceUpdater => {
+      const titleType = toTitleCase(type);
+      const mime = getMimeForCodec(codec);
+      sourceUpdater.logger_(`Adding ${type}Buffer with codec ${codec} to mediaSource`);
+      const sourceBuffer = sourceUpdater.mediaSource.addSourceBuffer(mime);
+      sourceBuffer.addEventListener('updateend', sourceUpdater[`on${titleType}UpdateEnd_`]);
+      sourceBuffer.addEventListener('error', sourceUpdater[`on${titleType}Error_`]);
+      sourceUpdater.codecs[type] = codec;
+      sourceUpdater[`${type}Buffer`] = sourceBuffer;
+    },
+    removeSourceBuffer: type => sourceUpdater => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`];
+      cleanupBuffer(type, sourceUpdater); // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`Removing ${type}Buffer with codec ${sourceUpdater.codecs[type]} from mediaSource`);
+      try {
+        sourceUpdater.mediaSource.removeSourceBuffer(sourceBuffer);
+      } catch (e) {
+        videojs.log.warn(`Failed to removeSourceBuffer ${type}Buffer`, e);
+      }
+    },
+    changeType: codec => (type, sourceUpdater) => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`];
+      const mime = getMimeForCodec(codec); // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      } // do not update codec if we don't need to.
+      // Only update if we change the codec base.
+      // For example, going from avc1.640028 to avc1.64001f does not require a changeType call.
+
+      const newCodecBase = codec.substring(0, codec.indexOf('.'));
+      const oldCodec = sourceUpdater.codecs[type];
+      const oldCodecBase = oldCodec.substring(0, oldCodec.indexOf('.'));
+      if (oldCodecBase === newCodecBase) {
+        return;
+      }
+      sourceUpdater.logger_(`changing ${type}Buffer codec from ${sourceUpdater.codecs[type]} to ${codec}`); // check if change to the provided type is supported
+
+      try {
+        sourceBuffer.changeType(mime);
+        sourceUpdater.codecs[type] = codec;
+      } catch (e) {
+        videojs.log.warn(`Failed to changeType on ${type}Buffer`, e);
+      }
+    }
+  };
+  const pushQueue = ({
+    type,
+    sourceUpdater,
+    action,
+    doneFn,
+    name
+  }) => {
+    sourceUpdater.queue.push({
+      type,
+      action,
+      doneFn,
+      name
+    });
+    shiftQueue(type, sourceUpdater);
+  };
+  const onUpdateend = (type, sourceUpdater) => e => {
+    // Although there should, in theory, be a pending action for any updateend receieved,
+    // there are some actions that may trigger updateend events without set definitions in
+    // the w3c spec. For instance, setting the duration on the media source may trigger
+    // updateend events on source buffers. This does not appear to be in the spec. As such,
+    // if we encounter an updateend without a corresponding pending action from our queue
+    // for that source buffer type, process the next action.
+    const bufferedRangesForType = sourceUpdater[`${type}Buffered`]();
+    const descriptiveString = bufferedRangesToString(bufferedRangesForType);
+    sourceUpdater.logger_(`received "updateend" event for ${type} Source Buffer: `, descriptiveString);
+    if (sourceUpdater.queuePending[type]) {
+      const doneFn = sourceUpdater.queuePending[type].doneFn;
+      sourceUpdater.queuePending[type] = null;
+      if (doneFn) {
+        // if there's an error, report it
+        doneFn(sourceUpdater[`${type}Error_`]);
+      }
+    }
+    shiftQueue(type, sourceUpdater);
+  };
+  /**
+   * A queue of callbacks to be serialized and applied when a
+   * MediaSource and its associated SourceBuffers are not in the
+   * updating state. It is used by the segment loader to update the
+   * underlying SourceBuffers when new data is loaded, for instance.
+   *
+   * @class SourceUpdater
+   * @param {MediaSource} mediaSource the MediaSource to create the SourceBuffer from
+   * @param {string} mimeType the desired MIME type of the underlying SourceBuffer
+   */
+
+  class SourceUpdater extends videojs.EventTarget {
+    constructor(mediaSource) {
+      super();
+      this.mediaSource = mediaSource;
+      this.sourceopenListener_ = () => shiftQueue('mediaSource', this);
+      this.mediaSource.addEventListener('sourceopen', this.sourceopenListener_);
+      this.logger_ = logger('SourceUpdater'); // initial timestamp offset is 0
+
+      this.audioTimestampOffset_ = 0;
+      this.videoTimestampOffset_ = 0;
+      this.queue = [];
+      this.queuePending = {
+        audio: null,
+        video: null
+      };
+      this.delayedAudioAppendQueue_ = [];
+      this.videoAppendQueued_ = false;
+      this.codecs = {};
+      this.onVideoUpdateEnd_ = onUpdateend('video', this);
+      this.onAudioUpdateEnd_ = onUpdateend('audio', this);
+      this.onVideoError_ = e => {
+        // used for debugging
+        this.videoError_ = e;
+      };
+      this.onAudioError_ = e => {
+        // used for debugging
+        this.audioError_ = e;
+      };
+      this.createdSourceBuffers_ = false;
+      this.initializedEme_ = false;
+      this.triggeredReady_ = false;
+    }
+    initializedEme() {
+      this.initializedEme_ = true;
+      this.triggerReady();
+    }
+    hasCreatedSourceBuffers() {
+      // if false, likely waiting on one of the segment loaders to get enough data to create
+      // source buffers
+      return this.createdSourceBuffers_;
+    }
+    hasInitializedAnyEme() {
+      return this.initializedEme_;
+    }
+    ready() {
+      return this.hasCreatedSourceBuffers() && this.hasInitializedAnyEme();
+    }
+    createSourceBuffers(codecs) {
+      if (this.hasCreatedSourceBuffers()) {
+        // already created them before
+        return;
+      } // the intial addOrChangeSourceBuffers will always be
+      // two add buffers.
+
+      this.addOrChangeSourceBuffers(codecs);
+      this.createdSourceBuffers_ = true;
+      this.trigger('createdsourcebuffers');
+      this.triggerReady();
+    }
+    triggerReady() {
+      // only allow ready to be triggered once, this prevents the case
+      // where:
+      // 1. we trigger createdsourcebuffers
+      // 2. ie 11 synchronously initializates eme
+      // 3. the synchronous initialization causes us to trigger ready
+      // 4. We go back to the ready check in createSourceBuffers and ready is triggered again.
+      if (this.ready() && !this.triggeredReady_) {
+        this.triggeredReady_ = true;
+        this.trigger('ready');
+      }
+    }
+    /**
+     * Add a type of source buffer to the media source.
+     *
+     * @param {string} type
+     *        The type of source buffer to add.
+     *
+     * @param {string} codec
+     *        The codec to add the source buffer with.
+     */
+
+    addSourceBuffer(type, codec) {
+      pushQueue({
+        type: 'mediaSource',
+        sourceUpdater: this,
+        action: actions.addSourceBuffer(type, codec),
+        name: 'addSourceBuffer'
+      });
+    }
+    /**
+     * call abort on a source buffer.
+     *
+     * @param {string} type
+     *        The type of source buffer to call abort on.
+     */
+
+    abort(type) {
+      pushQueue({
+        type,
+        sourceUpdater: this,
+        action: actions.abort(type),
+        name: 'abort'
+      });
+    }
+    /**
+     * Call removeSourceBuffer and remove a specific type
+     * of source buffer on the mediaSource.
+     *
+     * @param {string} type
+     *        The type of source buffer to remove.
+     */
+
+    removeSourceBuffer(type) {
+      if (!this.canRemoveSourceBuffer()) {
+        videojs.log.error('removeSourceBuffer is not supported!');
+        return;
+      }
+      pushQueue({
+        type: 'mediaSource',
+        sourceUpdater: this,
+        action: actions.removeSourceBuffer(type),
+        name: 'removeSourceBuffer'
+      });
+    }
+    /**
+     * Whether or not the removeSourceBuffer function is supported
+     * on the mediaSource.
+     *
+     * @return {boolean}
+     *          if removeSourceBuffer can be called.
+     */
+
+    canRemoveSourceBuffer() {
+      // As of Firefox 83 removeSourceBuffer
+      // throws errors, so we report that it does not support this.
+      return !videojs.browser.IS_FIREFOX && window.MediaSource && window.MediaSource.prototype && typeof window.MediaSource.prototype.removeSourceBuffer === 'function';
+    }
+    /**
+     * Whether or not the changeType function is supported
+     * on our SourceBuffers.
+     *
+     * @return {boolean}
+     *         if changeType can be called.
+     */
+
+    static canChangeType() {
+      return window.SourceBuffer && window.SourceBuffer.prototype && typeof window.SourceBuffer.prototype.changeType === 'function';
+    }
+    /**
+     * Whether or not the changeType function is supported
+     * on our SourceBuffers.
+     *
+     * @return {boolean}
+     *         if changeType can be called.
+     */
+
+    canChangeType() {
+      return this.constructor.canChangeType();
+    }
+    /**
+     * Call the changeType function on a source buffer, given the code and type.
+     *
+     * @param {string} type
+     *        The type of source buffer to call changeType on.
+     *
+     * @param {string} codec
+     *        The codec string to change type with on the source buffer.
+     */
+
+    changeType(type, codec) {
+      if (!this.canChangeType()) {
+        videojs.log.error('changeType is not supported!');
+        return;
+      }
+      pushQueue({
+        type,
+        sourceUpdater: this,
+        action: actions.changeType(codec),
+        name: 'changeType'
+      });
+    }
+    /**
+     * Add source buffers with a codec or, if they are already created,
+     * call changeType on source buffers using changeType.
+     *
+     * @param {Object} codecs
+     *        Codecs to switch to
+     */
+
+    addOrChangeSourceBuffers(codecs) {
+      if (!codecs || typeof codecs !== 'object' || Object.keys(codecs).length === 0) {
+        throw new Error('Cannot addOrChangeSourceBuffers to undefined codecs');
+      }
+      Object.keys(codecs).forEach(type => {
+        const codec = codecs[type];
+        if (!this.hasCreatedSourceBuffers()) {
+          return this.addSourceBuffer(type, codec);
+        }
+        if (this.canChangeType()) {
+          this.changeType(type, codec);
+        }
+      });
+    }
+    /**
+     * Queue an update to append an ArrayBuffer.
+     *
+     * @param {MediaObject} object containing audioBytes and/or videoBytes
+     * @param {Function} done the function to call when done
+     * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-appendBuffer-void-ArrayBuffer-data
+     */
+
+    appendBuffer(options, doneFn) {
+      const {
+        segmentInfo,
+        type,
+        bytes
+      } = options;
+      this.processedAppend_ = true;
+      if (type === 'audio' && this.videoBuffer && !this.videoAppendQueued_) {
+        this.delayedAudioAppendQueue_.push([options, doneFn]);
+        this.logger_(`delayed audio append of ${bytes.length} until video append`);
+        return;
+      } // In the case of certain errors, for instance, QUOTA_EXCEEDED_ERR, updateend will
+      // not be fired. This means that the queue will be blocked until the next action
+      // taken by the segment-loader. Provide a mechanism for segment-loader to handle
+      // these errors by calling the doneFn with the specific error.
+
+      const onError = doneFn;
+      pushQueue({
+        type,
+        sourceUpdater: this,
+        action: actions.appendBuffer(bytes, segmentInfo || {
+          mediaIndex: -1
+        }, onError),
+        doneFn,
+        name: 'appendBuffer'
+      });
+      if (type === 'video') {
+        this.videoAppendQueued_ = true;
+        if (!this.delayedAudioAppendQueue_.length) {
+          return;
+        }
+        const queue = this.delayedAudioAppendQueue_.slice();
+        this.logger_(`queuing delayed audio ${queue.length} appendBuffers`);
+        this.delayedAudioAppendQueue_.length = 0;
+        queue.forEach(que => {
+          this.appendBuffer.apply(this, que);
+        });
+      }
+    }
+    /**
+     * Get the audio buffer's buffered timerange.
+     *
+     * @return {TimeRange}
+     *         The audio buffer's buffered time range
+     */
+
+    audioBuffered() {
+      // no media source/source buffer or it isn't in the media sources
+      // source buffer list
+      if (!inSourceBuffers(this.mediaSource, this.audioBuffer)) {
+        return createTimeRanges();
+      }
+      return this.audioBuffer.buffered ? this.audioBuffer.buffered : createTimeRanges();
+    }
+    /**
+     * Get the video buffer's buffered timerange.
+     *
+     * @return {TimeRange}
+     *         The video buffer's buffered time range
+     */
+
+    videoBuffered() {
+      // no media source/source buffer or it isn't in the media sources
+      // source buffer list
+      if (!inSourceBuffers(this.mediaSource, this.videoBuffer)) {
+        return createTimeRanges();
+      }
+      return this.videoBuffer.buffered ? this.videoBuffer.buffered : createTimeRanges();
+    }
+    /**
+     * Get a combined video/audio buffer's buffered timerange.
+     *
+     * @return {TimeRange}
+     *         the combined time range
+     */
+
+    buffered() {
+      const video = inSourceBuffers(this.mediaSource, this.videoBuffer) ? this.videoBuffer : null;
+      const audio = inSourceBuffers(this.mediaSource, this.audioBuffer) ? this.audioBuffer : null;
+      if (audio && !video) {
+        return this.audioBuffered();
+      }
+      if (video && !audio) {
+        return this.videoBuffered();
+      }
+      return bufferIntersection(this.audioBuffered(), this.videoBuffered());
+    }
+    /**
+     * Add a callback to the queue that will set duration on the mediaSource.
+     *
+     * @param {number} duration
+     *        The duration to set
+     *
+     * @param {Function} [doneFn]
+     *        function to run after duration has been set.
+     */
+
+    setDuration(duration, doneFn = noop) {
+      // In order to set the duration on the media source, it's necessary to wait for all
+      // source buffers to no longer be updating. "If the updating attribute equals true on
+      // any SourceBuffer in sourceBuffers, then throw an InvalidStateError exception and
+      // abort these steps." (source: https://www.w3.org/TR/media-source/#attributes).
+      pushQueue({
+        type: 'mediaSource',
+        sourceUpdater: this,
+        action: actions.duration(duration),
+        name: 'duration',
+        doneFn
+      });
+    }
+    /**
+     * Add a mediaSource endOfStream call to the queue
+     *
+     * @param {Error} [error]
+     *        Call endOfStream with an error
+     *
+     * @param {Function} [doneFn]
+     *        A function that should be called when the
+     *        endOfStream call has finished.
+     */
+
+    endOfStream(error = null, doneFn = noop) {
+      if (typeof error !== 'string') {
+        error = undefined;
+      } // In order to set the duration on the media source, it's necessary to wait for all
+      // source buffers to no longer be updating. "If the updating attribute equals true on
+      // any SourceBuffer in sourceBuffers, then throw an InvalidStateError exception and
+      // abort these steps." (source: https://www.w3.org/TR/media-source/#attributes).
+
+      pushQueue({
+        type: 'mediaSource',
+        sourceUpdater: this,
+        action: actions.endOfStream(error),
+        name: 'endOfStream',
+        doneFn
+      });
+    }
+    /**
+     * Queue an update to remove a time range from the buffer.
+     *
+     * @param {number} start where to start the removal
+     * @param {number} end where to end the removal
+     * @param {Function} [done=noop] optional callback to be executed when the remove
+     * operation is complete
+     * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end
+     */
+
+    removeAudio(start, end, done = noop) {
+      if (!this.audioBuffered().length || this.audioBuffered().end(0) === 0) {
+        done();
+        return;
+      }
+      pushQueue({
+        type: 'audio',
+        sourceUpdater: this,
+        action: actions.remove(start, end),
+        doneFn: done,
+        name: 'remove'
+      });
+    }
+    /**
+     * Queue an update to remove a time range from the buffer.
+     *
+     * @param {number} start where to start the removal
+     * @param {number} end where to end the removal
+     * @param {Function} [done=noop] optional callback to be executed when the remove
+     * operation is complete
+     * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end
+     */
+
+    removeVideo(start, end, done = noop) {
+      if (!this.videoBuffered().length || this.videoBuffered().end(0) === 0) {
+        done();
+        return;
+      }
+      pushQueue({
+        type: 'video',
+        sourceUpdater: this,
+        action: actions.remove(start, end),
+        doneFn: done,
+        name: 'remove'
+      });
+    }
+    /**
+     * Whether the underlying sourceBuffer is updating or not
+     *
+     * @return {boolean} the updating status of the SourceBuffer
+     */
+
+    updating() {
+      // the audio/video source buffer is updating
+      if (updating('audio', this) || updating('video', this)) {
+        return true;
+      }
+      return false;
+    }
+    /**
+     * Set/get the timestampoffset on the audio SourceBuffer
+     *
+     * @return {number} the timestamp offset
+     */
+
+    audioTimestampOffset(offset) {
+      if (typeof offset !== 'undefined' && this.audioBuffer &&
+      // no point in updating if it's the same
+      this.audioTimestampOffset_ !== offset) {
+        pushQueue({
+          type: 'audio',
+          sourceUpdater: this,
+          action: actions.timestampOffset(offset),
+          name: 'timestampOffset'
+        });
+        this.audioTimestampOffset_ = offset;
+      }
+      return this.audioTimestampOffset_;
+    }
+    /**
+     * Set/get the timestampoffset on the video SourceBuffer
+     *
+     * @return {number} the timestamp offset
+     */
+
+    videoTimestampOffset(offset) {
+      if (typeof offset !== 'undefined' && this.videoBuffer &&
+      // no point in updating if it's the same
+      this.videoTimestampOffset !== offset) {
+        pushQueue({
+          type: 'video',
+          sourceUpdater: this,
+          action: actions.timestampOffset(offset),
+          name: 'timestampOffset'
+        });
+        this.videoTimestampOffset_ = offset;
+      }
+      return this.videoTimestampOffset_;
+    }
+    /**
+     * Add a function to the queue that will be called
+     * when it is its turn to run in the audio queue.
+     *
+     * @param {Function} callback
+     *        The callback to queue.
+     */
+
+    audioQueueCallback(callback) {
+      if (!this.audioBuffer) {
+        return;
+      }
+      pushQueue({
+        type: 'audio',
+        sourceUpdater: this,
+        action: actions.callback(callback),
+        name: 'callback'
+      });
+    }
+    /**
+     * Add a function to the queue that will be called
+     * when it is its turn to run in the video queue.
+     *
+     * @param {Function} callback
+     *        The callback to queue.
+     */
+
+    videoQueueCallback(callback) {
+      if (!this.videoBuffer) {
+        return;
+      }
+      pushQueue({
+        type: 'video',
+        sourceUpdater: this,
+        action: actions.callback(callback),
+        name: 'callback'
+      });
+    }
+    /**
+     * dispose of the source updater and the underlying sourceBuffer
+     */
+
+    dispose() {
+      this.trigger('dispose');
+      bufferTypes.forEach(type => {
+        this.abort(type);
+        if (this.canRemoveSourceBuffer()) {
+          this.removeSourceBuffer(type);
+        } else {
+          this[`${type}QueueCallback`](() => cleanupBuffer(type, this));
+        }
+      });
+      this.videoAppendQueued_ = false;
+      this.delayedAudioAppendQueue_.length = 0;
+      if (this.sourceopenListener_) {
+        this.mediaSource.removeEventListener('sourceopen', this.sourceopenListener_);
+      }
+      this.off();
+    }
+  }
+  const uint8ToUtf8 = uintArray => decodeURIComponent(escape(String.fromCharCode.apply(null, uintArray)));
+  const bufferToHexString = buffer => {
+    const uInt8Buffer = new Uint8Array(buffer);
+    return Array.from(uInt8Buffer).map(byte => byte.toString(16).padStart(2, '0')).join('');
+  };
+
+  /**
+   * @file vtt-segment-loader.js
+   */
+  const VTT_LINE_TERMINATORS = new Uint8Array('\n\n'.split('').map(char => char.charCodeAt(0)));
+  class NoVttJsError extends Error {
+    constructor() {
+      super('Trying to parse received VTT cues, but there is no WebVTT. Make sure vtt.js is loaded.');
+    }
+  }
+  /**
+   * An object that manages segment loading and appending.
+   *
+   * @class VTTSegmentLoader
+   * @param {Object} options required and optional options
+   * @extends videojs.EventTarget
+   */
+
+  class VTTSegmentLoader extends SegmentLoader {
+    constructor(settings, options = {}) {
+      super(settings, options); // SegmentLoader requires a MediaSource be specified or it will throw an error;
+      // however, VTTSegmentLoader has no need of a media source, so delete the reference
+
+      this.mediaSource_ = null;
+      this.subtitlesTrack_ = null;
+      this.featuresNativeTextTracks_ = settings.featuresNativeTextTracks;
+      this.loadVttJs = settings.loadVttJs; // The VTT segment will have its own time mappings. Saving VTT segment timing info in
+      // the sync controller leads to improper behavior.
+
+      this.shouldSaveSegmentTimingInfo_ = false;
+    }
+    createTransmuxer_() {
+      // don't need to transmux any subtitles
+      return null;
+    }
+    /**
+     * Indicates which time ranges are buffered
+     *
+     * @return {TimeRange}
+     *         TimeRange object representing the current buffered ranges
+     */
+
+    buffered_() {
+      if (!this.subtitlesTrack_ || !this.subtitlesTrack_.cues || !this.subtitlesTrack_.cues.length) {
+        return createTimeRanges();
+      }
+      const cues = this.subtitlesTrack_.cues;
+      const start = cues[0].startTime;
+      const end = cues[cues.length - 1].startTime;
+      return createTimeRanges([[start, end]]);
+    }
+    /**
+     * Gets and sets init segment for the provided map
+     *
+     * @param {Object} map
+     *        The map object representing the init segment to get or set
+     * @param {boolean=} set
+     *        If true, the init segment for the provided map should be saved
+     * @return {Object}
+     *         map object for desired init segment
+     */
+
+    initSegmentForMap(map, set = false) {
+      if (!map) {
+        return null;
+      }
+      const id = initSegmentId(map);
+      let storedMap = this.initSegments_[id];
+      if (set && !storedMap && map.bytes) {
+        // append WebVTT line terminators to the media initialization segment if it exists
+        // to follow the WebVTT spec (https://w3c.github.io/webvtt/#file-structure) that
+        // requires two or more WebVTT line terminators between the WebVTT header and the
+        // rest of the file
+        const combinedByteLength = VTT_LINE_TERMINATORS.byteLength + map.bytes.byteLength;
+        const combinedSegment = new Uint8Array(combinedByteLength);
+        combinedSegment.set(map.bytes);
+        combinedSegment.set(VTT_LINE_TERMINATORS, map.bytes.byteLength);
+        this.initSegments_[id] = storedMap = {
+          resolvedUri: map.resolvedUri,
+          byterange: map.byterange,
+          bytes: combinedSegment
+        };
+      }
+      return storedMap || map;
+    }
+    /**
+     * Returns true if all configuration required for loading is present, otherwise false.
+     *
+     * @return {boolean} True if the all configuration is ready for loading
+     * @private
+     */
+
+    couldBeginLoading_() {
+      return this.playlist_ && this.subtitlesTrack_ && !this.paused();
+    }
+    /**
+     * Once all the starting parameters have been specified, begin
+     * operation. This method should only be invoked from the INIT
+     * state.
+     *
+     * @private
+     */
+
+    init_() {
+      this.state = 'READY';
+      this.resetEverything();
+      return this.monitorBuffer_();
+    }
+    /**
+     * Set a subtitle track on the segment loader to add subtitles to
+     *
+     * @param {TextTrack=} track
+     *        The text track to add loaded subtitles to
+     * @return {TextTrack}
+     *        Returns the subtitles track
+     */
+
+    track(track) {
+      if (typeof track === 'undefined') {
+        return this.subtitlesTrack_;
+      }
+      this.subtitlesTrack_ = track; // if we were unpaused but waiting for a sourceUpdater, start
+      // buffering now
+
+      if (this.state === 'INIT' && this.couldBeginLoading_()) {
+        this.init_();
+      }
+      return this.subtitlesTrack_;
+    }
+    /**
+     * Remove any data in the source buffer between start and end times
+     *
+     * @param {number} start - the start time of the region to remove from the buffer
+     * @param {number} end - the end time of the region to remove from the buffer
+     */
+
+    remove(start, end) {
+      removeCuesFromTrack(start, end, this.subtitlesTrack_);
+    }
+    /**
+     * fill the buffer with segements unless the sourceBuffers are
+     * currently updating
+     *
+     * Note: this function should only ever be called by monitorBuffer_
+     * and never directly
+     *
+     * @private
+     */
+
+    fillBuffer_() {
+      // see if we need to begin loading immediately
+      const segmentInfo = this.chooseNextRequest_();
+      if (!segmentInfo) {
+        return;
+      }
+      if (this.syncController_.timestampOffsetForTimeline(segmentInfo.timeline) === null) {
+        // We don't have the timestamp offset that we need to sync subtitles.
+        // Rerun on a timestamp offset or user interaction.
+        const checkTimestampOffset = () => {
+          this.state = 'READY';
+          if (!this.paused()) {
+            // if not paused, queue a buffer check as soon as possible
+            this.monitorBuffer_();
+          }
+        };
+        this.syncController_.one('timestampoffset', checkTimestampOffset);
+        this.state = 'WAITING_ON_TIMELINE';
+        return;
+      }
+      this.loadSegment_(segmentInfo);
+    } // never set a timestamp offset for vtt segments.
+
+    timestampOffsetForSegment_() {
+      return null;
+    }
+    chooseNextRequest_() {
+      return this.skipEmptySegments_(super.chooseNextRequest_());
+    }
+    /**
+     * Prevents the segment loader from requesting segments we know contain no subtitles
+     * by walking forward until we find the next segment that we don't know whether it is
+     * empty or not.
+     *
+     * @param {Object} segmentInfo
+     *        a segment info object that describes the current segment
+     * @return {Object}
+     *         a segment info object that describes the current segment
+     */
+
+    skipEmptySegments_(segmentInfo) {
+      while (segmentInfo && segmentInfo.segment.empty) {
+        // stop at the last possible segmentInfo
+        if (segmentInfo.mediaIndex + 1 >= segmentInfo.playlist.segments.length) {
+          segmentInfo = null;
+          break;
+        }
+        segmentInfo = this.generateSegmentInfo_({
+          playlist: segmentInfo.playlist,
+          mediaIndex: segmentInfo.mediaIndex + 1,
+          startOfSegment: segmentInfo.startOfSegment + segmentInfo.duration,
+          isSyncRequest: segmentInfo.isSyncRequest
+        });
+      }
+      return segmentInfo;
+    }
+    stopForError(error) {
+      this.error(error);
+      this.state = 'READY';
+      this.pause();
+      this.trigger('error');
+    }
+    /**
+     * append a decrypted segement to the SourceBuffer through a SourceUpdater
+     *
+     * @private
+     */
+
+    segmentRequestFinished_(error, simpleSegment, result) {
+      if (!this.subtitlesTrack_) {
+        this.state = 'READY';
+        return;
+      }
+      this.saveTransferStats_(simpleSegment.stats); // the request was aborted
+
+      if (!this.pendingSegment_) {
+        this.state = 'READY';
+        this.mediaRequestsAborted += 1;
+        return;
+      }
+      if (error) {
+        if (error.code === REQUEST_ERRORS.TIMEOUT) {
+          this.handleTimeout_();
+        }
+        if (error.code === REQUEST_ERRORS.ABORTED) {
+          this.mediaRequestsAborted += 1;
+        } else {
+          this.mediaRequestsErrored += 1;
+        }
+        this.stopForError(error);
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // although the VTT segment loader bandwidth isn't really used, it's good to
+      // maintain functionality between segment loaders
+
+      this.saveBandwidthRelatedStats_(segmentInfo.duration, simpleSegment.stats); // if this request included a segment key, save that data in the cache
+
+      if (simpleSegment.key) {
+        this.segmentKey(simpleSegment.key, true);
+      }
+      this.state = 'APPENDING'; // used for tests
+
+      this.trigger('appending');
+      const segment = segmentInfo.segment;
+      if (segment.map) {
+        segment.map.bytes = simpleSegment.map.bytes;
+      }
+      segmentInfo.bytes = simpleSegment.bytes; // Make sure that vttjs has loaded, otherwise, load it and wait till it finished loading
+
+      if (typeof window.WebVTT !== 'function' && typeof this.loadVttJs === 'function') {
+        this.state = 'WAITING_ON_VTTJS'; // should be fine to call multiple times
+        // script will be loaded once but multiple listeners will be added to the queue, which is expected.
+
+        this.loadVttJs().then(() => this.segmentRequestFinished_(error, simpleSegment, result), () => this.stopForError({
+          message: 'Error loading vtt.js',
+          metadata: {
+            errorType: videojs.Error.VttLoadError
+          }
+        }));
+        return;
+      }
+      segment.requested = true;
+      try {
+        this.parseVTTCues_(segmentInfo);
+      } catch (e) {
+        this.stopForError({
+          message: e.message,
+          metadata: {
+            errorType: videojs.Error.VttCueParsingError
+          }
+        });
+        return;
+      }
+      this.updateTimeMapping_(segmentInfo, this.syncController_.timelines[segmentInfo.timeline], this.playlist_);
+      if (segmentInfo.cues.length) {
+        segmentInfo.timingInfo = {
+          start: segmentInfo.cues[0].startTime,
+          end: segmentInfo.cues[segmentInfo.cues.length - 1].endTime
+        };
+      } else {
+        segmentInfo.timingInfo = {
+          start: segmentInfo.startOfSegment,
+          end: segmentInfo.startOfSegment + segmentInfo.duration
+        };
+      }
+      if (segmentInfo.isSyncRequest) {
+        this.trigger('syncinfoupdate');
+        this.pendingSegment_ = null;
+        this.state = 'READY';
+        return;
+      }
+      segmentInfo.byteLength = segmentInfo.bytes.byteLength;
+      this.mediaSecondsLoaded += segment.duration; // Create VTTCue instances for each cue in the new segment and add them to
+      // the subtitle track
+
+      segmentInfo.cues.forEach(cue => {
+        this.subtitlesTrack_.addCue(this.featuresNativeTextTracks_ ? new window.VTTCue(cue.startTime, cue.endTime, cue.text) : cue);
+      }); // Remove any duplicate cues from the subtitle track. The WebVTT spec allows
+      // cues to have identical time-intervals, but if the text is also identical
+      // we can safely assume it is a duplicate that can be removed (ex. when a cue
+      // "overlaps" VTT segments)
+
+      removeDuplicateCuesFromTrack(this.subtitlesTrack_);
+      this.handleAppendsDone_();
+    }
+    handleData_() {// noop as we shouldn't be getting video/audio data captions
+      // that we do not support here.
+    }
+    updateTimingInfoEnd_() {// noop
+    }
+    /**
+     * Uses the WebVTT parser to parse the segment response
+     *
+     * @throws NoVttJsError
+     *
+     * @param {Object} segmentInfo
+     *        a segment info object that describes the current segment
+     * @private
+     */
+
+    parseVTTCues_(segmentInfo) {
+      let decoder;
+      let decodeBytesToString = false;
+      if (typeof window.WebVTT !== 'function') {
+        // caller is responsible for exception handling.
+        throw new NoVttJsError();
+      }
+      if (typeof window.TextDecoder === 'function') {
+        decoder = new window.TextDecoder('utf8');
+      } else {
+        decoder = window.WebVTT.StringDecoder();
+        decodeBytesToString = true;
+      }
+      const parser = new window.WebVTT.Parser(window, window.vttjs, decoder);
+      segmentInfo.cues = [];
+      segmentInfo.timestampmap = {
+        MPEGTS: 0,
+        LOCAL: 0
+      };
+      parser.oncue = segmentInfo.cues.push.bind(segmentInfo.cues);
+      parser.ontimestampmap = map => {
+        segmentInfo.timestampmap = map;
+      };
+      parser.onparsingerror = error => {
+        videojs.log.warn('Error encountered when parsing cues: ' + error.message);
+      };
+      if (segmentInfo.segment.map) {
+        let mapData = segmentInfo.segment.map.bytes;
+        if (decodeBytesToString) {
+          mapData = uint8ToUtf8(mapData);
+        }
+        parser.parse(mapData);
+      }
+      let segmentData = segmentInfo.bytes;
+      if (decodeBytesToString) {
+        segmentData = uint8ToUtf8(segmentData);
+      }
+      parser.parse(segmentData);
+      parser.flush();
+    }
+    /**
+     * Updates the start and end times of any cues parsed by the WebVTT parser using
+     * the information parsed from the X-TIMESTAMP-MAP header and a TS to media time mapping
+     * from the SyncController
+     *
+     * @param {Object} segmentInfo
+     *        a segment info object that describes the current segment
+     * @param {Object} mappingObj
+     *        object containing a mapping from TS to media time
+     * @param {Object} playlist
+     *        the playlist object containing the segment
+     * @private
+     */
+
+    updateTimeMapping_(segmentInfo, mappingObj, playlist) {
+      const segment = segmentInfo.segment;
+      if (!mappingObj) {
+        // If the sync controller does not have a mapping of TS to Media Time for the
+        // timeline, then we don't have enough information to update the cue
+        // start/end times
+        return;
+      }
+      if (!segmentInfo.cues.length) {
+        // If there are no cues, we also do not have enough information to figure out
+        // segment timing. Mark that the segment contains no cues so we don't re-request
+        // an empty segment.
+        segment.empty = true;
+        return;
+      }
+      const {
+        MPEGTS,
+        LOCAL
+      } = segmentInfo.timestampmap;
+      /**
+       * From the spec:
+       * The MPEGTS media timestamp MUST use a 90KHz timescale,
+       * even when non-WebVTT Media Segments use a different timescale.
+       */
+
+      const mpegTsInSeconds = MPEGTS / clock_1;
+      const diff = mpegTsInSeconds - LOCAL + mappingObj.mapping;
+      segmentInfo.cues.forEach(cue => {
+        const duration = cue.endTime - cue.startTime;
+        const startTime = MPEGTS === 0 ? cue.startTime + diff : this.handleRollover_(cue.startTime + diff, mappingObj.time);
+        cue.startTime = Math.max(startTime, 0);
+        cue.endTime = Math.max(startTime + duration, 0);
+      });
+      if (!playlist.syncInfo) {
+        const firstStart = segmentInfo.cues[0].startTime;
+        const lastStart = segmentInfo.cues[segmentInfo.cues.length - 1].startTime;
+        playlist.syncInfo = {
+          mediaSequence: playlist.mediaSequence + segmentInfo.mediaIndex,
+          time: Math.min(firstStart, lastStart - segment.duration)
+        };
+      }
+    }
+    /**
+     * MPEG-TS PES timestamps are limited to 2^33.
+     * Once they reach 2^33, they roll over to 0.
+     * mux.js handles PES timestamp rollover for the following scenarios:
+     * [forward rollover(right)] ->
+     *    PES timestamps monotonically increase, and once they reach 2^33, they roll over to 0
+     * [backward rollover(left)] -->
+     *    we seek back to position before rollover.
+     *
+     * According to the HLS SPEC:
+     * When synchronizing WebVTT with PES timestamps, clients SHOULD account
+     * for cases where the 33-bit PES timestamps have wrapped and the WebVTT
+     * cue times have not.  When the PES timestamp wraps, the WebVTT Segment
+     * SHOULD have a X-TIMESTAMP-MAP header that maps the current WebVTT
+     * time to the new (low valued) PES timestamp.
+     *
+     * So we want to handle rollover here and align VTT Cue start/end time to the player's time.
+     */
+
+    handleRollover_(value, reference) {
+      if (reference === null) {
+        return value;
+      }
+      let valueIn90khz = value * clock_1;
+      const referenceIn90khz = reference * clock_1;
+      let offset;
+      if (referenceIn90khz < valueIn90khz) {
+        // - 2^33
+        offset = -8589934592;
+      } else {
+        // + 2^33
+        offset = 8589934592;
+      } // distance(value - reference) > 2^32
+
+      while (Math.abs(valueIn90khz - referenceIn90khz) > 4294967296) {
+        valueIn90khz += offset;
+      }
+      return valueIn90khz / clock_1;
+    }
+  }
+
+  /**
+   * @file ad-cue-tags.js
+   */
+  /**
+   * Searches for an ad cue that overlaps with the given mediaTime
+   *
+   * @param {Object} track
+   *        the track to find the cue for
+   *
+   * @param {number} mediaTime
+   *        the time to find the cue at
+   *
+   * @return {Object|null}
+   *         the found cue or null
+   */
+
+  const findAdCue = function (track, mediaTime) {
+    const cues = track.cues;
+    for (let i = 0; i < cues.length; i++) {
+      const cue = cues[i];
+      if (mediaTime >= cue.adStartTime && mediaTime <= cue.adEndTime) {
+        return cue;
+      }
+    }
+    return null;
+  };
+  const updateAdCues = function (media, track, offset = 0) {
+    if (!media.segments) {
+      return;
+    }
+    let mediaTime = offset;
+    let cue;
+    for (let i = 0; i < media.segments.length; i++) {
+      const segment = media.segments[i];
+      if (!cue) {
+        // Since the cues will span for at least the segment duration, adding a fudge
+        // factor of half segment duration will prevent duplicate cues from being
+        // created when timing info is not exact (e.g. cue start time initialized
+        // at 10.006677, but next call mediaTime is 10.003332 )
+        cue = findAdCue(track, mediaTime + segment.duration / 2);
+      }
+      if (cue) {
+        if ('cueIn' in segment) {
+          // Found a CUE-IN so end the cue
+          cue.endTime = mediaTime;
+          cue.adEndTime = mediaTime;
+          mediaTime += segment.duration;
+          cue = null;
+          continue;
+        }
+        if (mediaTime < cue.endTime) {
+          // Already processed this mediaTime for this cue
+          mediaTime += segment.duration;
+          continue;
+        } // otherwise extend cue until a CUE-IN is found
+
+        cue.endTime += segment.duration;
+      } else {
+        if ('cueOut' in segment) {
+          cue = new window.VTTCue(mediaTime, mediaTime + segment.duration, segment.cueOut);
+          cue.adStartTime = mediaTime; // Assumes tag format to be
+          // #EXT-X-CUE-OUT:30
+
+          cue.adEndTime = mediaTime + parseFloat(segment.cueOut);
+          track.addCue(cue);
+        }
+        if ('cueOutCont' in segment) {
+          // Entered into the middle of an ad cue
+          // Assumes tag formate to be
+          // #EXT-X-CUE-OUT-CONT:10/30
+          const [adOffset, adTotal] = segment.cueOutCont.split('/').map(parseFloat);
+          cue = new window.VTTCue(mediaTime, mediaTime + segment.duration, '');
+          cue.adStartTime = mediaTime - adOffset;
+          cue.adEndTime = cue.adStartTime + adTotal;
+          track.addCue(cue);
+        }
+      }
+      mediaTime += segment.duration;
+    }
+  };
+  class SyncInfo {
+    /**
+     * @param {number} start - media sequence start
+     * @param {number} end - media sequence end
+     * @param {number} segmentIndex - index for associated segment
+     * @param {number|null} [partIndex] - index for associated part
+     * @param {boolean} [appended] - appended indicator
+     *
+     */
+    constructor({
+      start,
+      end,
+      segmentIndex,
+      partIndex = null,
+      appended = false
+    }) {
+      this.start_ = start;
+      this.end_ = end;
+      this.segmentIndex_ = segmentIndex;
+      this.partIndex_ = partIndex;
+      this.appended_ = appended;
+    }
+    isInRange(targetTime) {
+      return targetTime >= this.start && targetTime < this.end;
+    }
+    markAppended() {
+      this.appended_ = true;
+    }
+    resetAppendedStatus() {
+      this.appended_ = false;
+    }
+    get isAppended() {
+      return this.appended_;
+    }
+    get start() {
+      return this.start_;
+    }
+    get end() {
+      return this.end_;
+    }
+    get segmentIndex() {
+      return this.segmentIndex_;
+    }
+    get partIndex() {
+      return this.partIndex_;
+    }
+  }
+  class SyncInfoData {
+    /**
+     *
+     * @param {SyncInfo} segmentSyncInfo - sync info for a given segment
+     * @param {Array<SyncInfo>} [partsSyncInfo] - sync infos for a list of parts for a given segment
+     */
+    constructor(segmentSyncInfo, partsSyncInfo = []) {
+      this.segmentSyncInfo_ = segmentSyncInfo;
+      this.partsSyncInfo_ = partsSyncInfo;
+    }
+    get segmentSyncInfo() {
+      return this.segmentSyncInfo_;
+    }
+    get partsSyncInfo() {
+      return this.partsSyncInfo_;
+    }
+    get hasPartsSyncInfo() {
+      return this.partsSyncInfo_.length > 0;
+    }
+    resetAppendStatus() {
+      this.segmentSyncInfo_.resetAppendedStatus();
+      this.partsSyncInfo_.forEach(partSyncInfo => partSyncInfo.resetAppendedStatus());
+    }
+  }
+  class MediaSequenceSync {
+    constructor() {
+      /**
+       * @type {Map<number, SyncInfoData>}
+       * @private
+       */
+      this.storage_ = new Map();
+      this.diagnostics_ = '';
+      this.isReliable_ = false;
+      this.start_ = -Infinity;
+      this.end_ = Infinity;
+    }
+    get start() {
+      return this.start_;
+    }
+    get end() {
+      return this.end_;
+    }
+    get diagnostics() {
+      return this.diagnostics_;
+    }
+    get isReliable() {
+      return this.isReliable_;
+    }
+    resetAppendedStatus() {
+      this.storage_.forEach(syncInfoData => syncInfoData.resetAppendStatus());
+    }
+    /**
+     * update sync storage
+     *
+     * @param {Object} playlist
+     * @param {number} currentTime
+     *
+     * @return {void}
+     */
+
+    update(playlist, currentTime) {
+      const {
+        mediaSequence,
+        segments
+      } = playlist;
+      this.isReliable_ = this.isReliablePlaylist_(mediaSequence, segments);
+      if (!this.isReliable_) {
+        return;
+      }
+      return this.updateStorage_(segments, mediaSequence, this.calculateBaseTime_(mediaSequence, currentTime));
+    }
+    /**
+     * @param {number} targetTime
+     * @return {SyncInfo|null}
+     */
+
+    getSyncInfoForTime(targetTime) {
+      for (const {
+        segmentSyncInfo,
+        partsSyncInfo
+      } of this.storage_.values()) {
+        // Normal segment flow:
+        if (!partsSyncInfo.length) {
+          if (segmentSyncInfo.isInRange(targetTime)) {
+            return segmentSyncInfo;
+          }
+        } else {
+          // Low latency flow:
+          for (const partSyncInfo of partsSyncInfo) {
+            if (partSyncInfo.isInRange(targetTime)) {
+              return partSyncInfo;
+            }
+          }
+        }
+      }
+      return null;
+    }
+    updateStorage_(segments, startingMediaSequence, startingTime) {
+      const newStorage = new Map();
+      let newDiagnostics = '\n';
+      let currentStart = startingTime;
+      let currentMediaSequence = startingMediaSequence;
+      this.start_ = currentStart;
+      segments.forEach((segment, segmentIndex) => {
+        const prevSyncInfoData = this.storage_.get(currentMediaSequence);
+        const segmentStart = currentStart;
+        const segmentEnd = segmentStart + segment.duration;
+        const segmentIsAppended = Boolean(prevSyncInfoData && prevSyncInfoData.segmentSyncInfo && prevSyncInfoData.segmentSyncInfo.isAppended);
+        const segmentSyncInfo = new SyncInfo({
+          start: segmentStart,
+          end: segmentEnd,
+          appended: segmentIsAppended,
+          segmentIndex
+        });
+        segment.syncInfo = segmentSyncInfo;
+        let currentPartStart = currentStart;
+        const partsSyncInfo = (segment.parts || []).map((part, partIndex) => {
+          const partStart = currentPartStart;
+          const partEnd = currentPartStart + part.duration;
+          const partIsAppended = Boolean(prevSyncInfoData && prevSyncInfoData.partsSyncInfo && prevSyncInfoData.partsSyncInfo[partIndex] && prevSyncInfoData.partsSyncInfo[partIndex].isAppended);
+          const partSyncInfo = new SyncInfo({
+            start: partStart,
+            end: partEnd,
+            appended: partIsAppended,
+            segmentIndex,
+            partIndex
+          });
+          currentPartStart = partEnd;
+          newDiagnostics += `Media Sequence: ${currentMediaSequence}.${partIndex} | Range: ${partStart} --> ${partEnd} | Appended: ${partIsAppended}\n`;
+          part.syncInfo = partSyncInfo;
+          return partSyncInfo;
+        });
+        newStorage.set(currentMediaSequence, new SyncInfoData(segmentSyncInfo, partsSyncInfo));
+        newDiagnostics += `${compactSegmentUrlDescription(segment.resolvedUri)} | Media Sequence: ${currentMediaSequence} | Range: ${segmentStart} --> ${segmentEnd} | Appended: ${segmentIsAppended}\n`;
+        currentMediaSequence++;
+        currentStart = segmentEnd;
+      });
+      this.end_ = currentStart;
+      this.storage_ = newStorage;
+      this.diagnostics_ = newDiagnostics;
+    }
+    calculateBaseTime_(mediaSequence, fallback) {
+      if (!this.storage_.size) {
+        // Initial setup flow.
+        return 0;
+      }
+      if (this.storage_.has(mediaSequence)) {
+        // Normal flow.
+        return this.storage_.get(mediaSequence).segmentSyncInfo.start;
+      } // Fallback flow.
+      // There is a gap between last recorded playlist and a new one received.
+
+      return fallback;
+    }
+    isReliablePlaylist_(mediaSequence, segments) {
+      return mediaSequence !== undefined && mediaSequence !== null && Array.isArray(segments) && segments.length;
+    }
+  }
+
+  /**
+   * @file sync-controller.js
+   */
+  // synchronize expired playlist segments.
+  // the max media sequence diff is 48 hours of live stream
+  // content with two second segments. Anything larger than that
+  // will likely be invalid.
+
+  const MAX_MEDIA_SEQUENCE_DIFF_FOR_SYNC = 86400;
+  const syncPointStrategies = [
+  // Stategy "VOD": Handle the VOD-case where the sync-point is *always*
+  //                the equivalence display-time 0 === segment-index 0
+  {
+    name: 'VOD',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      if (duration !== Infinity) {
+        const syncPoint = {
+          time: 0,
+          segmentIndex: 0,
+          partIndex: null
+        };
+        return syncPoint;
+      }
+      return null;
+    }
+  }, {
+    name: 'MediaSequence',
+    /**
+     * run media sequence strategy
+     *
+     * @param {SyncController} syncController
+     * @param {Object} playlist
+     * @param {number} duration
+     * @param {number} currentTimeline
+     * @param {number} currentTime
+     * @param {string} type
+     */
+    run: (syncController, playlist, duration, currentTimeline, currentTime, type) => {
+      const mediaSequenceSync = syncController.getMediaSequenceSync(type);
+      if (!mediaSequenceSync) {
+        return null;
+      }
+      if (!mediaSequenceSync.isReliable) {
+        return null;
+      }
+      const syncInfo = mediaSequenceSync.getSyncInfoForTime(currentTime);
+      if (!syncInfo) {
+        return null;
+      }
+      return {
+        time: syncInfo.start,
+        partIndex: syncInfo.partIndex,
+        segmentIndex: syncInfo.segmentIndex
+      };
+    }
+  },
+  // Stategy "ProgramDateTime": We have a program-date-time tag in this playlist
+  {
+    name: 'ProgramDateTime',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      if (!Object.keys(syncController.timelineToDatetimeMappings).length) {
+        return null;
+      }
+      let syncPoint = null;
+      let lastDistance = null;
+      const partsAndSegments = getPartsAndSegments(playlist);
+      currentTime = currentTime || 0;
+      for (let i = 0; i < partsAndSegments.length; i++) {
+        // start from the end and loop backwards for live
+        // or start from the front and loop forwards for non-live
+        const index = playlist.endList || currentTime === 0 ? i : partsAndSegments.length - (i + 1);
+        const partAndSegment = partsAndSegments[index];
+        const segment = partAndSegment.segment;
+        const datetimeMapping = syncController.timelineToDatetimeMappings[segment.timeline];
+        if (!datetimeMapping || !segment.dateTimeObject) {
+          continue;
+        }
+        const segmentTime = segment.dateTimeObject.getTime() / 1000;
+        let start = segmentTime + datetimeMapping; // take part duration into account.
+
+        if (segment.parts && typeof partAndSegment.partIndex === 'number') {
+          for (let z = 0; z < partAndSegment.partIndex; z++) {
+            start += segment.parts[z].duration;
+          }
+        }
+        const distance = Math.abs(currentTime - start); // Once the distance begins to increase, or if distance is 0, we have passed
+        // currentTime and can stop looking for better candidates
+
+        if (lastDistance !== null && (distance === 0 || lastDistance < distance)) {
+          break;
+        }
+        lastDistance = distance;
+        syncPoint = {
+          time: start,
+          segmentIndex: partAndSegment.segmentIndex,
+          partIndex: partAndSegment.partIndex
+        };
+      }
+      return syncPoint;
+    }
+  },
+  // Stategy "Segment": We have a known time mapping for a timeline and a
+  //                    segment in the current timeline with timing data
+  {
+    name: 'Segment',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      let syncPoint = null;
+      let lastDistance = null;
+      currentTime = currentTime || 0;
+      const partsAndSegments = getPartsAndSegments(playlist);
+      for (let i = 0; i < partsAndSegments.length; i++) {
+        // start from the end and loop backwards for live
+        // or start from the front and loop forwards for non-live
+        const index = playlist.endList || currentTime === 0 ? i : partsAndSegments.length - (i + 1);
+        const partAndSegment = partsAndSegments[index];
+        const segment = partAndSegment.segment;
+        const start = partAndSegment.part && partAndSegment.part.start || segment && segment.start;
+        if (segment.timeline === currentTimeline && typeof start !== 'undefined') {
+          const distance = Math.abs(currentTime - start); // Once the distance begins to increase, we have passed
+          // currentTime and can stop looking for better candidates
+
+          if (lastDistance !== null && lastDistance < distance) {
+            break;
+          }
+          if (!syncPoint || lastDistance === null || lastDistance >= distance) {
+            lastDistance = distance;
+            syncPoint = {
+              time: start,
+              segmentIndex: partAndSegment.segmentIndex,
+              partIndex: partAndSegment.partIndex
+            };
+          }
+        }
+      }
+      return syncPoint;
+    }
+  },
+  // Stategy "Discontinuity": We have a discontinuity with a known
+  //                          display-time
+  {
+    name: 'Discontinuity',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      let syncPoint = null;
+      currentTime = currentTime || 0;
+      if (playlist.discontinuityStarts && playlist.discontinuityStarts.length) {
+        let lastDistance = null;
+        for (let i = 0; i < playlist.discontinuityStarts.length; i++) {
+          const segmentIndex = playlist.discontinuityStarts[i];
+          const discontinuity = playlist.discontinuitySequence + i + 1;
+          const discontinuitySync = syncController.discontinuities[discontinuity];
+          if (discontinuitySync) {
+            const distance = Math.abs(currentTime - discontinuitySync.time); // Once the distance begins to increase, we have passed
+            // currentTime and can stop looking for better candidates
+
+            if (lastDistance !== null && lastDistance < distance) {
+              break;
+            }
+            if (!syncPoint || lastDistance === null || lastDistance >= distance) {
+              lastDistance = distance;
+              syncPoint = {
+                time: discontinuitySync.time,
+                segmentIndex,
+                partIndex: null
+              };
+            }
+          }
+        }
+      }
+      return syncPoint;
+    }
+  },
+  // Stategy "Playlist": We have a playlist with a known mapping of
+  //                     segment index to display time
+  {
+    name: 'Playlist',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      if (playlist.syncInfo) {
+        const syncPoint = {
+          time: playlist.syncInfo.time,
+          segmentIndex: playlist.syncInfo.mediaSequence - playlist.mediaSequence,
+          partIndex: null
+        };
+        return syncPoint;
+      }
+      return null;
+    }
+  }];
+  class SyncController extends videojs.EventTarget {
+    constructor(options = {}) {
+      super(); // ...for synching across variants
+
+      this.timelines = [];
+      this.discontinuities = [];
+      this.timelineToDatetimeMappings = {}; // TODO: this map should be only available for HLS. Since only HLS has MediaSequence.
+      //  For some reason this map helps with syncing between quality switch for MPEG-DASH as well.
+      //  Moreover if we disable this map for MPEG-DASH - quality switch will be broken.
+      //  MPEG-DASH should have its own separate sync strategy
+
+      this.mediaSequenceStorage_ = {
+        main: new MediaSequenceSync(),
+        audio: new MediaSequenceSync(),
+        vtt: new MediaSequenceSync()
+      };
+      this.logger_ = logger('SyncController');
+    }
+    /**
+     *
+     * @param {string} loaderType
+     * @return {MediaSequenceSync|null}
+     */
+
+    getMediaSequenceSync(loaderType) {
+      return this.mediaSequenceStorage_[loaderType] || null;
+    }
+    /**
+     * Find a sync-point for the playlist specified
+     *
+     * A sync-point is defined as a known mapping from display-time to
+     * a segment-index in the current playlist.
+     *
+     * @param {Playlist} playlist
+     *        The playlist that needs a sync-point
+     * @param {number} duration
+     *        Duration of the MediaSource (Infinite if playing a live source)
+     * @param {number} currentTimeline
+     *        The last timeline from which a segment was loaded
+     * @param {number} currentTime
+     *        Current player's time
+     * @param {string} type
+     *        Segment loader type
+     * @return {Object}
+     *          A sync-point object
+     */
+
+    getSyncPoint(playlist, duration, currentTimeline, currentTime, type) {
+      // Always use VOD sync point for VOD
+      if (duration !== Infinity) {
+        const vodSyncPointStrategy = syncPointStrategies.find(({
+          name
+        }) => name === 'VOD');
+        return vodSyncPointStrategy.run(this, playlist, duration);
+      }
+      const syncPoints = this.runStrategies_(playlist, duration, currentTimeline, currentTime, type);
+      if (!syncPoints.length) {
+        // Signal that we need to attempt to get a sync-point manually
+        // by fetching a segment in the playlist and constructing
+        // a sync-point from that information
+        return null;
+      } // If we have exact match just return it instead of finding the nearest distance
+
+      for (const syncPointInfo of syncPoints) {
+        const {
+          syncPoint,
+          strategy
+        } = syncPointInfo;
+        const {
+          segmentIndex,
+          time
+        } = syncPoint;
+        if (segmentIndex < 0) {
+          continue;
+        }
+        const selectedSegment = playlist.segments[segmentIndex];
+        const start = time;
+        const end = start + selectedSegment.duration;
+        this.logger_(`Strategy: ${strategy}. Current time: ${currentTime}. selected segment: ${segmentIndex}. Time: [${start} -> ${end}]}`);
+        if (currentTime >= start && currentTime < end) {
+          this.logger_('Found sync point with exact match: ', syncPoint);
+          return syncPoint;
+        }
+      } // Now find the sync-point that is closest to the currentTime because
+      // that should result in the most accurate guess about which segment
+      // to fetch
+
+      return this.selectSyncPoint_(syncPoints, {
+        key: 'time',
+        value: currentTime
+      });
+    }
+    /**
+     * Calculate the amount of time that has expired off the playlist during playback
+     *
+     * @param {Playlist} playlist
+     *        Playlist object to calculate expired from
+     * @param {number} duration
+     *        Duration of the MediaSource (Infinity if playling a live source)
+     * @return {number|null}
+     *          The amount of time that has expired off the playlist during playback. Null
+     *          if no sync-points for the playlist can be found.
+     */
+
+    getExpiredTime(playlist, duration) {
+      if (!playlist || !playlist.segments) {
+        return null;
+      }
+      const syncPoints = this.runStrategies_(playlist, duration, playlist.discontinuitySequence, 0); // Without sync-points, there is not enough information to determine the expired time
+
+      if (!syncPoints.length) {
+        return null;
+      }
+      const syncPoint = this.selectSyncPoint_(syncPoints, {
+        key: 'segmentIndex',
+        value: 0
+      }); // If the sync-point is beyond the start of the playlist, we want to subtract the
+      // duration from index 0 to syncPoint.segmentIndex instead of adding.
+
+      if (syncPoint.segmentIndex > 0) {
+        syncPoint.time *= -1;
+      }
+      return Math.abs(syncPoint.time + sumDurations({
+        defaultDuration: playlist.targetDuration,
+        durationList: playlist.segments,
+        startIndex: syncPoint.segmentIndex,
+        endIndex: 0
+      }));
+    }
+    /**
+     * Runs each sync-point strategy and returns a list of sync-points returned by the
+     * strategies
+     *
+     * @private
+     * @param {Playlist} playlist
+     *        The playlist that needs a sync-point
+     * @param {number} duration
+     *        Duration of the MediaSource (Infinity if playing a live source)
+     * @param {number} currentTimeline
+     *        The last timeline from which a segment was loaded
+     * @param {number} currentTime
+     *        Current player's time
+     * @param {string} type
+     *        Segment loader type
+     * @return {Array}
+     *          A list of sync-point objects
+     */
+
+    runStrategies_(playlist, duration, currentTimeline, currentTime, type) {
+      const syncPoints = []; // Try to find a sync-point in by utilizing various strategies...
+
+      for (let i = 0; i < syncPointStrategies.length; i++) {
+        const strategy = syncPointStrategies[i];
+        const syncPoint = strategy.run(this, playlist, duration, currentTimeline, currentTime, type);
+        if (syncPoint) {
+          syncPoint.strategy = strategy.name;
+          syncPoints.push({
+            strategy: strategy.name,
+            syncPoint
+          });
+        }
+      }
+      return syncPoints;
+    }
+    /**
+     * Selects the sync-point nearest the specified target
+     *
+     * @private
+     * @param {Array} syncPoints
+     *        List of sync-points to select from
+     * @param {Object} target
+     *        Object specifying the property and value we are targeting
+     * @param {string} target.key
+     *        Specifies the property to target. Must be either 'time' or 'segmentIndex'
+     * @param {number} target.value
+     *        The value to target for the specified key.
+     * @return {Object}
+     *          The sync-point nearest the target
+     */
+
+    selectSyncPoint_(syncPoints, target) {
+      let bestSyncPoint = syncPoints[0].syncPoint;
+      let bestDistance = Math.abs(syncPoints[0].syncPoint[target.key] - target.value);
+      let bestStrategy = syncPoints[0].strategy;
+      for (let i = 1; i < syncPoints.length; i++) {
+        const newDistance = Math.abs(syncPoints[i].syncPoint[target.key] - target.value);
+        if (newDistance < bestDistance) {
+          bestDistance = newDistance;
+          bestSyncPoint = syncPoints[i].syncPoint;
+          bestStrategy = syncPoints[i].strategy;
+        }
+      }
+      this.logger_(`syncPoint for [${target.key}: ${target.value}] chosen with strategy` + ` [${bestStrategy}]: [time:${bestSyncPoint.time},` + ` segmentIndex:${bestSyncPoint.segmentIndex}` + (typeof bestSyncPoint.partIndex === 'number' ? `,partIndex:${bestSyncPoint.partIndex}` : '') + ']');
+      return bestSyncPoint;
+    }
+    /**
+     * Save any meta-data present on the segments when segments leave
+     * the live window to the playlist to allow for synchronization at the
+     * playlist level later.
+     *
+     * @param {Playlist} oldPlaylist - The previous active playlist
+     * @param {Playlist} newPlaylist - The updated and most current playlist
+     */
+
+    saveExpiredSegmentInfo(oldPlaylist, newPlaylist) {
+      const mediaSequenceDiff = newPlaylist.mediaSequence - oldPlaylist.mediaSequence; // Ignore large media sequence gaps
+
+      if (mediaSequenceDiff > MAX_MEDIA_SEQUENCE_DIFF_FOR_SYNC) {
+        videojs.log.warn(`Not saving expired segment info. Media sequence gap ${mediaSequenceDiff} is too large.`);
+        return;
+      } // When a segment expires from the playlist and it has a start time
+      // save that information as a possible sync-point reference in future
+
+      for (let i = mediaSequenceDiff - 1; i >= 0; i--) {
+        const lastRemovedSegment = oldPlaylist.segments[i];
+        if (lastRemovedSegment && typeof lastRemovedSegment.start !== 'undefined') {
+          newPlaylist.syncInfo = {
+            mediaSequence: oldPlaylist.mediaSequence + i,
+            time: lastRemovedSegment.start
+          };
+          this.logger_(`playlist refresh sync: [time:${newPlaylist.syncInfo.time},` + ` mediaSequence: ${newPlaylist.syncInfo.mediaSequence}]`);
+          this.trigger('syncinfoupdate');
+          break;
+        }
+      }
+    }
+    /**
+     * Save the mapping from playlist's ProgramDateTime to display. This should only happen
+     * before segments start to load.
+     *
+     * @param {Playlist} playlist - The currently active playlist
+     */
+
+    setDateTimeMappingForStart(playlist) {
+      // It's possible for the playlist to be updated before playback starts, meaning time
+      // zero is not yet set. If, during these playlist refreshes, a discontinuity is
+      // crossed, then the old time zero mapping (for the prior timeline) would be retained
+      // unless the mappings are cleared.
+      this.timelineToDatetimeMappings = {};
+      if (playlist.segments && playlist.segments.length && playlist.segments[0].dateTimeObject) {
+        const firstSegment = playlist.segments[0];
+        const playlistTimestamp = firstSegment.dateTimeObject.getTime() / 1000;
+        this.timelineToDatetimeMappings[firstSegment.timeline] = -playlistTimestamp;
+      }
+    }
+    /**
+     * Calculates and saves timeline mappings, playlist sync info, and segment timing values
+     * based on the latest timing information.
+     *
+     * @param {Object} options
+     *        Options object
+     * @param {SegmentInfo} options.segmentInfo
+     *        The current active request information
+     * @param {boolean} options.shouldSaveTimelineMapping
+     *        If there's a timeline change, determines if the timeline mapping should be
+     *        saved for timeline mapping and program date time mappings.
+     */
+
+    saveSegmentTimingInfo({
+      segmentInfo,
+      shouldSaveTimelineMapping
+    }) {
+      const didCalculateSegmentTimeMapping = this.calculateSegmentTimeMapping_(segmentInfo, segmentInfo.timingInfo, shouldSaveTimelineMapping);
+      const segment = segmentInfo.segment;
+      if (didCalculateSegmentTimeMapping) {
+        this.saveDiscontinuitySyncInfo_(segmentInfo); // If the playlist does not have sync information yet, record that information
+        // now with segment timing information
+
+        if (!segmentInfo.playlist.syncInfo) {
+          segmentInfo.playlist.syncInfo = {
+            mediaSequence: segmentInfo.playlist.mediaSequence + segmentInfo.mediaIndex,
+            time: segment.start
+          };
+        }
+      }
+      const dateTime = segment.dateTimeObject;
+      if (segment.discontinuity && shouldSaveTimelineMapping && dateTime) {
+        this.timelineToDatetimeMappings[segment.timeline] = -(dateTime.getTime() / 1000);
+      }
+    }
+    timestampOffsetForTimeline(timeline) {
+      if (typeof this.timelines[timeline] === 'undefined') {
+        return null;
+      }
+      return this.timelines[timeline].time;
+    }
+    mappingForTimeline(timeline) {
+      if (typeof this.timelines[timeline] === 'undefined') {
+        return null;
+      }
+      return this.timelines[timeline].mapping;
+    }
+    /**
+     * Use the "media time" for a segment to generate a mapping to "display time" and
+     * save that display time to the segment.
+     *
+     * @private
+     * @param {SegmentInfo} segmentInfo
+     *        The current active request information
+     * @param {Object} timingInfo
+     *        The start and end time of the current segment in "media time"
+     * @param {boolean} shouldSaveTimelineMapping
+     *        If there's a timeline change, determines if the timeline mapping should be
+     *        saved in timelines.
+     * @return {boolean}
+     *          Returns false if segment time mapping could not be calculated
+     */
+
+    calculateSegmentTimeMapping_(segmentInfo, timingInfo, shouldSaveTimelineMapping) {
+      // TODO: remove side effects
+      const segment = segmentInfo.segment;
+      const part = segmentInfo.part;
+      let mappingObj = this.timelines[segmentInfo.timeline];
+      let start;
+      let end;
+      if (typeof segmentInfo.timestampOffset === 'number') {
+        mappingObj = {
+          time: segmentInfo.startOfSegment,
+          mapping: segmentInfo.startOfSegment - timingInfo.start
+        };
+        if (shouldSaveTimelineMapping) {
+          this.timelines[segmentInfo.timeline] = mappingObj;
+          this.trigger('timestampoffset');
+          this.logger_(`time mapping for timeline ${segmentInfo.timeline}: ` + `[time: ${mappingObj.time}] [mapping: ${mappingObj.mapping}]`);
+        }
+        start = segmentInfo.startOfSegment;
+        end = timingInfo.end + mappingObj.mapping;
+      } else if (mappingObj) {
+        start = timingInfo.start + mappingObj.mapping;
+        end = timingInfo.end + mappingObj.mapping;
+      } else {
+        return false;
+      }
+      if (part) {
+        part.start = start;
+        part.end = end;
+      } // If we don't have a segment start yet or the start value we got
+      // is less than our current segment.start value, save a new start value.
+      // We have to do this because parts will have segment timing info saved
+      // multiple times and we want segment start to be the earliest part start
+      // value for that segment.
+
+      if (!segment.start || start < segment.start) {
+        segment.start = start;
+      }
+      segment.end = end;
+      return true;
+    }
+    /**
+     * Each time we have discontinuity in the playlist, attempt to calculate the location
+     * in display of the start of the discontinuity and save that. We also save an accuracy
+     * value so that we save values with the most accuracy (closest to 0.)
+     *
+     * @private
+     * @param {SegmentInfo} segmentInfo - The current active request information
+     */
+
+    saveDiscontinuitySyncInfo_(segmentInfo) {
+      const playlist = segmentInfo.playlist;
+      const segment = segmentInfo.segment; // If the current segment is a discontinuity then we know exactly where
+      // the start of the range and it's accuracy is 0 (greater accuracy values
+      // mean more approximation)
+
+      if (segment.discontinuity) {
+        this.discontinuities[segment.timeline] = {
+          time: segment.start,
+          accuracy: 0
+        };
+      } else if (playlist.discontinuityStarts && playlist.discontinuityStarts.length) {
+        // Search for future discontinuities that we can provide better timing
+        // information for and save that information for sync purposes
+        for (let i = 0; i < playlist.discontinuityStarts.length; i++) {
+          const segmentIndex = playlist.discontinuityStarts[i];
+          const discontinuity = playlist.discontinuitySequence + i + 1;
+          const mediaIndexDiff = segmentIndex - segmentInfo.mediaIndex;
+          const accuracy = Math.abs(mediaIndexDiff);
+          if (!this.discontinuities[discontinuity] || this.discontinuities[discontinuity].accuracy > accuracy) {
+            let time;
+            if (mediaIndexDiff < 0) {
+              time = segment.start - sumDurations({
+                defaultDuration: playlist.targetDuration,
+                durationList: playlist.segments,
+                startIndex: segmentInfo.mediaIndex,
+                endIndex: segmentIndex
+              });
+            } else {
+              time = segment.end + sumDurations({
+                defaultDuration: playlist.targetDuration,
+                durationList: playlist.segments,
+                startIndex: segmentInfo.mediaIndex + 1,
+                endIndex: segmentIndex
+              });
+            }
+            this.discontinuities[discontinuity] = {
+              time,
+              accuracy
+            };
+          }
+        }
+      }
+    }
+    dispose() {
+      this.trigger('dispose');
+      this.off();
+    }
+  }
+
+  /**
+   * The TimelineChangeController acts as a source for segment loaders to listen for and
+   * keep track of latest and pending timeline changes. This is useful to ensure proper
+   * sync, as each loader may need to make a consideration for what timeline the other
+   * loader is on before making changes which could impact the other loader's media.
+   *
+   * @class TimelineChangeController
+   * @extends videojs.EventTarget
+   */
+
+  class TimelineChangeController extends videojs.EventTarget {
+    constructor() {
+      super();
+      this.pendingTimelineChanges_ = {};
+      this.lastTimelineChanges_ = {};
+    }
+    clearPendingTimelineChange(type) {
+      this.pendingTimelineChanges_[type] = null;
+      this.trigger('pendingtimelinechange');
+    }
+    pendingTimelineChange({
+      type,
+      from,
+      to
+    }) {
+      if (typeof from === 'number' && typeof to === 'number') {
+        this.pendingTimelineChanges_[type] = {
+          type,
+          from,
+          to
+        };
+        this.trigger('pendingtimelinechange');
+      }
+      return this.pendingTimelineChanges_[type];
+    }
+    lastTimelineChange({
+      type,
+      from,
+      to
+    }) {
+      if (typeof from === 'number' && typeof to === 'number') {
+        this.lastTimelineChanges_[type] = {
+          type,
+          from,
+          to
+        };
+        delete this.pendingTimelineChanges_[type];
+        this.trigger('timelinechange');
+      }
+      return this.lastTimelineChanges_[type];
+    }
+    dispose() {
+      this.trigger('dispose');
+      this.pendingTimelineChanges_ = {};
+      this.lastTimelineChanges_ = {};
+      this.off();
+    }
+  }
+
+  /* rollup-plugin-worker-factory start for worker!/home/runner/work/http-streaming/http-streaming/src/decrypter-worker.js */
+  const workerCode = transform(getWorkerString(function () {
+    /**
+     * @file stream.js
+     */
+
+    /**
+     * A lightweight readable stream implemention that handles event dispatching.
+     *
+     * @class Stream
+     */
+
+    var Stream = /*#__PURE__*/function () {
+      function Stream() {
+        this.listeners = {};
+      }
+      /**
+       * Add a listener for a specified event type.
+       *
+       * @param {string} type the event name
+       * @param {Function} listener the callback to be invoked when an event of
+       * the specified type occurs
+       */
+
+      var _proto = Stream.prototype;
+      _proto.on = function on(type, listener) {
+        if (!this.listeners[type]) {
+          this.listeners[type] = [];
+        }
+        this.listeners[type].push(listener);
+      }
+      /**
+       * Remove a listener for a specified event type.
+       *
+       * @param {string} type the event name
+       * @param {Function} listener  a function previously registered for this
+       * type of event through `on`
+       * @return {boolean} if we could turn it off or not
+       */;
+
+      _proto.off = function off(type, listener) {
+        if (!this.listeners[type]) {
+          return false;
+        }
+        var index = this.listeners[type].indexOf(listener); // TODO: which is better?
+        // In Video.js we slice listener functions
+        // on trigger so that it does not mess up the order
+        // while we loop through.
+        //
+        // Here we slice on off so that the loop in trigger
+        // can continue using it's old reference to loop without
+        // messing up the order.
+
+        this.listeners[type] = this.listeners[type].slice(0);
+        this.listeners[type].splice(index, 1);
+        return index > -1;
+      }
+      /**
+       * Trigger an event of the specified type on this stream. Any additional
+       * arguments to this function are passed as parameters to event listeners.
+       *
+       * @param {string} type the event name
+       */;
+
+      _proto.trigger = function trigger(type) {
+        var callbacks = this.listeners[type];
+        if (!callbacks) {
+          return;
+        } // Slicing the arguments on every invocation of this method
+        // can add a significant amount of overhead. Avoid the
+        // intermediate object creation for the common case of a
+        // single callback argument
+
+        if (arguments.length === 2) {
+          var length = callbacks.length;
+          for (var i = 0; i < length; ++i) {
+            callbacks[i].call(this, arguments[1]);
+          }
+        } else {
+          var args = Array.prototype.slice.call(arguments, 1);
+          var _length = callbacks.length;
+          for (var _i = 0; _i < _length; ++_i) {
+            callbacks[_i].apply(this, args);
+          }
+        }
+      }
+      /**
+       * Destroys the stream and cleans up.
+       */;
+
+      _proto.dispose = function dispose() {
+        this.listeners = {};
+      }
+      /**
+       * Forwards all `data` events on this stream to the destination stream. The
+       * destination stream should provide a method `push` to receive the data
+       * events as they arrive.
+       *
+       * @param {Stream} destination the stream that will receive all `data` events
+       * @see http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options
+       */;
+
+      _proto.pipe = function pipe(destination) {
+        this.on('data', function (data) {
+          destination.push(data);
+        });
+      };
+      return Stream;
+    }();
+    /*! @name pkcs7 @version 1.0.4 @license Apache-2.0 */
+
+    /**
+     * Returns the subarray of a Uint8Array without PKCS#7 padding.
+     *
+     * @param padded {Uint8Array} unencrypted bytes that have been padded
+     * @return {Uint8Array} the unpadded bytes
+     * @see http://tools.ietf.org/html/rfc5652
+     */
+
+    function unpad(padded) {
+      return padded.subarray(0, padded.byteLength - padded[padded.byteLength - 1]);
+    }
+    /*! @name aes-decrypter @version 4.0.1 @license Apache-2.0 */
+
+    /**
+     * @file aes.js
+     *
+     * This file contains an adaptation of the AES decryption algorithm
+     * from the Standford Javascript Cryptography Library. That work is
+     * covered by the following copyright and permissions notice:
+     *
+     * Copyright 2009-2010 Emily Stark, Mike Hamburg, Dan Boneh.
+     * All rights reserved.
+     *
+     * Redistribution and use in source and binary forms, with or without
+     * modification, are permitted provided that the following conditions are
+     * met:
+     *
+     * 1. Redistributions of source code must retain the above copyright
+     *    notice, this list of conditions and the following disclaimer.
+     *
+     * 2. Redistributions in binary form must reproduce the above
+     *    copyright notice, this list of conditions and the following
+     *    disclaimer in the documentation and/or other materials provided
+     *    with the distribution.
+     *
+     * THIS SOFTWARE IS PROVIDED BY THE AUTHORS ``AS IS'' AND ANY EXPRESS OR
+     * IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+     * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+     * DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> OR CONTRIBUTORS BE
+     * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+     * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+     * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
+     * BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+     * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
+     * OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN
+     * IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+     *
+     * The views and conclusions contained in the software and documentation
+     * are those of the authors and should not be interpreted as representing
+     * official policies, either expressed or implied, of the authors.
+     */
+
+    /**
+     * Expand the S-box tables.
+     *
+     * @private
+     */
+
+    const precompute = function () {
+      const tables = [[[], [], [], [], []], [[], [], [], [], []]];
+      const encTable = tables[0];
+      const decTable = tables[1];
+      const sbox = encTable[4];
+      const sboxInv = decTable[4];
+      let i;
+      let x;
+      let xInv;
+      const d = [];
+      const th = [];
+      let x2;
+      let x4;
+      let x8;
+      let s;
+      let tEnc;
+      let tDec; // Compute double and third tables
+
+      for (i = 0; i < 256; i++) {
+        th[(d[i] = i << 1 ^ (i >> 7) * 283) ^ i] = i;
+      }
+      for (x = xInv = 0; !sbox[x]; x ^= x2 || 1, xInv = th[xInv] || 1) {
+        // Compute sbox
+        s = xInv ^ xInv << 1 ^ xInv << 2 ^ xInv << 3 ^ xInv << 4;
+        s = s >> 8 ^ s & 255 ^ 99;
+        sbox[x] = s;
+        sboxInv[s] = x; // Compute MixColumns
+
+        x8 = d[x4 = d[x2 = d[x]]];
+        tDec = x8 * 0x1010101 ^ x4 * 0x10001 ^ x2 * 0x101 ^ x * 0x1010100;
+        tEnc = d[s] * 0x101 ^ s * 0x1010100;
+        for (i = 0; i < 4; i++) {
+          encTable[i][x] = tEnc = tEnc << 24 ^ tEnc >>> 8;
+          decTable[i][s] = tDec = tDec << 24 ^ tDec >>> 8;
+        }
+      } // Compactify. Considerable speedup on Firefox.
+
+      for (i = 0; i < 5; i++) {
+        encTable[i] = encTable[i].slice(0);
+        decTable[i] = decTable[i].slice(0);
+      }
+      return tables;
+    };
+    let aesTables = null;
+    /**
+     * Schedule out an AES key for both encryption and decryption. This
+     * is a low-level class. Use a cipher mode to do bulk encryption.
+     *
+     * @class AES
+     * @param key {Array} The key as an array of 4, 6 or 8 words.
+     */
+
+    class AES {
+      constructor(key) {
+        /**
+        * The expanded S-box and inverse S-box tables. These will be computed
+        * on the client so that we don't have to send them down the wire.
+        *
+        * There are two tables, _tables[0] is for encryption and
+        * _tables[1] is for decryption.
+        *
+        * The first 4 sub-tables are the expanded S-box with MixColumns. The
+        * last (_tables[01][4]) is the S-box itself.
+        *
+        * @private
+        */
+        // if we have yet to precompute the S-box tables
+        // do so now
+        if (!aesTables) {
+          aesTables = precompute();
+        } // then make a copy of that object for use
+
+        this._tables = [[aesTables[0][0].slice(), aesTables[0][1].slice(), aesTables[0][2].slice(), aesTables[0][3].slice(), aesTables[0][4].slice()], [aesTables[1][0].slice(), aesTables[1][1].slice(), aesTables[1][2].slice(), aesTables[1][3].slice(), aesTables[1][4].slice()]];
+        let i;
+        let j;
+        let tmp;
+        const sbox = this._tables[0][4];
+        const decTable = this._tables[1];
+        const keyLen = key.length;
+        let rcon = 1;
+        if (keyLen !== 4 && keyLen !== 6 && keyLen !== 8) {
+          throw new Error('Invalid aes key size');
+        }
+        const encKey = key.slice(0);
+        const decKey = [];
+        this._key = [encKey, decKey]; // schedule encryption keys
+
+        for (i = keyLen; i < 4 * keyLen + 28; i++) {
+          tmp = encKey[i - 1]; // apply sbox
+
+          if (i % keyLen === 0 || keyLen === 8 && i % keyLen === 4) {
+            tmp = sbox[tmp >>> 24] << 24 ^ sbox[tmp >> 16 & 255] << 16 ^ sbox[tmp >> 8 & 255] << 8 ^ sbox[tmp & 255]; // shift rows and add rcon
+
+            if (i % keyLen === 0) {
+              tmp = tmp << 8 ^ tmp >>> 24 ^ rcon << 24;
+              rcon = rcon << 1 ^ (rcon >> 7) * 283;
+            }
+          }
+          encKey[i] = encKey[i - keyLen] ^ tmp;
+        } // schedule decryption keys
+
+        for (j = 0; i; j++, i--) {
+          tmp = encKey[j & 3 ? i : i - 4];
+          if (i <= 4 || j < 4) {
+            decKey[j] = tmp;
+          } else {
+            decKey[j] = decTable[0][sbox[tmp >>> 24]] ^ decTable[1][sbox[tmp >> 16 & 255]] ^ decTable[2][sbox[tmp >> 8 & 255]] ^ decTable[3][sbox[tmp & 255]];
+          }
+        }
+      }
+      /**
+       * Decrypt 16 bytes, specified as four 32-bit words.
+       *
+       * @param {number} encrypted0 the first word to decrypt
+       * @param {number} encrypted1 the second word to decrypt
+       * @param {number} encrypted2 the third word to decrypt
+       * @param {number} encrypted3 the fourth word to decrypt
+       * @param {Int32Array} out the array to write the decrypted words
+       * into
+       * @param {number} offset the offset into the output array to start
+       * writing results
+       * @return {Array} The plaintext.
+       */
+
+      decrypt(encrypted0, encrypted1, encrypted2, encrypted3, out, offset) {
+        const key = this._key[1]; // state variables a,b,c,d are loaded with pre-whitened data
+
+        let a = encrypted0 ^ key[0];
+        let b = encrypted3 ^ key[1];
+        let c = encrypted2 ^ key[2];
+        let d = encrypted1 ^ key[3];
+        let a2;
+        let b2;
+        let c2; // key.length === 2 ?
+
+        const nInnerRounds = key.length / 4 - 2;
+        let i;
+        let kIndex = 4;
+        const table = this._tables[1]; // load up the tables
+
+        const table0 = table[0];
+        const table1 = table[1];
+        const table2 = table[2];
+        const table3 = table[3];
+        const sbox = table[4]; // Inner rounds. Cribbed from OpenSSL.
+
+        for (i = 0; i < nInnerRounds; i++) {
+          a2 = table0[a >>> 24] ^ table1[b >> 16 & 255] ^ table2[c >> 8 & 255] ^ table3[d & 255] ^ key[kIndex];
+          b2 = table0[b >>> 24] ^ table1[c >> 16 & 255] ^ table2[d >> 8 & 255] ^ table3[a & 255] ^ key[kIndex + 1];
+          c2 = table0[c >>> 24] ^ table1[d >> 16 & 255] ^ table2[a >> 8 & 255] ^ table3[b & 255] ^ key[kIndex + 2];
+          d = table0[d >>> 24] ^ table1[a >> 16 & 255] ^ table2[b >> 8 & 255] ^ table3[c & 255] ^ key[kIndex + 3];
+          kIndex += 4;
+          a = a2;
+          b = b2;
+          c = c2;
+        } // Last round.
+
+        for (i = 0; i < 4; i++) {
+          out[(3 & -i) + offset] = sbox[a >>> 24] << 24 ^ sbox[b >> 16 & 255] << 16 ^ sbox[c >> 8 & 255] << 8 ^ sbox[d & 255] ^ key[kIndex++];
+          a2 = a;
+          a = b;
+          b = c;
+          c = d;
+          d = a2;
+        }
+      }
+    }
+    /**
+     * @file async-stream.js
+     */
+
+    /**
+     * A wrapper around the Stream class to use setTimeout
+     * and run stream "jobs" Asynchronously
+     *
+     * @class AsyncStream
+     * @extends Stream
+     */
+
+    class AsyncStream extends Stream {
+      constructor() {
+        super(Stream);
+        this.jobs = [];
+        this.delay = 1;
+        this.timeout_ = null;
+      }
+      /**
+       * process an async job
+       *
+       * @private
+       */
+
+      processJob_() {
+        this.jobs.shift()();
+        if (this.jobs.length) {
+          this.timeout_ = setTimeout(this.processJob_.bind(this), this.delay);
+        } else {
+          this.timeout_ = null;
+        }
+      }
+      /**
+       * push a job into the stream
+       *
+       * @param {Function} job the job to push into the stream
+       */
+
+      push(job) {
+        this.jobs.push(job);
+        if (!this.timeout_) {
+          this.timeout_ = setTimeout(this.processJob_.bind(this), this.delay);
+        }
+      }
+    }
+    /**
+     * @file decrypter.js
+     *
+     * An asynchronous implementation of AES-128 CBC decryption with
+     * PKCS#7 padding.
+     */
+
+    /**
+     * Convert network-order (big-endian) bytes into their little-endian
+     * representation.
+     */
+
+    const ntoh = function (word) {
+      return word << 24 | (word & 0xff00) << 8 | (word & 0xff0000) >> 8 | word >>> 24;
+    };
+    /**
+     * Decrypt bytes using AES-128 with CBC and PKCS#7 padding.
+     *
+     * @param {Uint8Array} encrypted the encrypted bytes
+     * @param {Uint32Array} key the bytes of the decryption key
+     * @param {Uint32Array} initVector the initialization vector (IV) to
+     * use for the first round of CBC.
+     * @return {Uint8Array} the decrypted bytes
+     *
+     * @see http://en.wikipedia.org/wiki/Advanced_Encryption_Standard
+     * @see http://en.wikipedia.org/wiki/Block_cipher_mode_of_operation#Cipher_Block_Chaining_.28CBC.29
+     * @see https://tools.ietf.org/html/rfc2315
+     */
+
+    const decrypt = function (encrypted, key, initVector) {
+      // word-level access to the encrypted bytes
+      const encrypted32 = new Int32Array(encrypted.buffer, encrypted.byteOffset, encrypted.byteLength >> 2);
+      const decipher = new AES(Array.prototype.slice.call(key)); // byte and word-level access for the decrypted output
+
+      const decrypted = new Uint8Array(encrypted.byteLength);
+      const decrypted32 = new Int32Array(decrypted.buffer); // temporary variables for working with the IV, encrypted, and
+      // decrypted data
+
+      let init0;
+      let init1;
+      let init2;
+      let init3;
+      let encrypted0;
+      let encrypted1;
+      let encrypted2;
+      let encrypted3; // iteration variable
+
+      let wordIx; // pull out the words of the IV to ensure we don't modify the
+      // passed-in reference and easier access
+
+      init0 = initVector[0];
+      init1 = initVector[1];
+      init2 = initVector[2];
+      init3 = initVector[3]; // decrypt four word sequences, applying cipher-block chaining (CBC)
+      // to each decrypted block
+
+      for (wordIx = 0; wordIx < encrypted32.length; wordIx += 4) {
+        // convert big-endian (network order) words into little-endian
+        // (javascript order)
+        encrypted0 = ntoh(encrypted32[wordIx]);
+        encrypted1 = ntoh(encrypted32[wordIx + 1]);
+        encrypted2 = ntoh(encrypted32[wordIx + 2]);
+        encrypted3 = ntoh(encrypted32[wordIx + 3]); // decrypt the block
+
+        decipher.decrypt(encrypted0, encrypted1, encrypted2, encrypted3, decrypted32, wordIx); // XOR with the IV, and restore network byte-order to obtain the
+        // plaintext
+
+        decrypted32[wordIx] = ntoh(decrypted32[wordIx] ^ init0);
+        decrypted32[wordIx + 1] = ntoh(decrypted32[wordIx + 1] ^ init1);
+        decrypted32[wordIx + 2] = ntoh(decrypted32[wordIx + 2] ^ init2);
+        decrypted32[wordIx + 3] = ntoh(decrypted32[wordIx + 3] ^ init3); // setup the IV for the next round
+
+        init0 = encrypted0;
+        init1 = encrypted1;
+        init2 = encrypted2;
+        init3 = encrypted3;
+      }
+      return decrypted;
+    };
+    /**
+     * The `Decrypter` class that manages decryption of AES
+     * data through `AsyncStream` objects and the `decrypt`
+     * function
+     *
+     * @param {Uint8Array} encrypted the encrypted bytes
+     * @param {Uint32Array} key the bytes of the decryption key
+     * @param {Uint32Array} initVector the initialization vector (IV) to
+     * @param {Function} done the function to run when done
+     * @class Decrypter
+     */
+
+    class Decrypter {
+      constructor(encrypted, key, initVector, done) {
+        const step = Decrypter.STEP;
+        const encrypted32 = new Int32Array(encrypted.buffer);
+        const decrypted = new Uint8Array(encrypted.byteLength);
+        let i = 0;
+        this.asyncStream_ = new AsyncStream(); // split up the encryption job and do the individual chunks asynchronously
+
+        this.asyncStream_.push(this.decryptChunk_(encrypted32.subarray(i, i + step), key, initVector, decrypted));
+        for (i = step; i < encrypted32.length; i += step) {
+          initVector = new Uint32Array([ntoh(encrypted32[i - 4]), ntoh(encrypted32[i - 3]), ntoh(encrypted32[i - 2]), ntoh(encrypted32[i - 1])]);
+          this.asyncStream_.push(this.decryptChunk_(encrypted32.subarray(i, i + step), key, initVector, decrypted));
+        } // invoke the done() callback when everything is finished
+
+        this.asyncStream_.push(function () {
+          // remove pkcs#7 padding from the decrypted bytes
+          done(null, unpad(decrypted));
+        });
+      }
+      /**
+       * a getter for step the maximum number of bytes to process at one time
+       *
+       * @return {number} the value of step 32000
+       */
+
+      static get STEP() {
+        // 4 * 8000;
+        return 32000;
+      }
+      /**
+       * @private
+       */
+
+      decryptChunk_(encrypted, key, initVector, decrypted) {
+        return function () {
+          const bytes = decrypt(encrypted, key, initVector);
+          decrypted.set(bytes, encrypted.byteOffset);
+        };
+      }
+    }
+    var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+    var win;
+    if (typeof window !== "undefined") {
+      win = window;
+    } else if (typeof commonjsGlobal !== "undefined") {
+      win = commonjsGlobal;
+    } else if (typeof self !== "undefined") {
+      win = self;
+    } else {
+      win = {};
+    }
+    var window_1 = win;
+    var isArrayBufferView = function isArrayBufferView(obj) {
+      if (ArrayBuffer.isView === 'function') {
+        return ArrayBuffer.isView(obj);
+      }
+      return obj && obj.buffer instanceof ArrayBuffer;
+    };
+    var BigInt = window_1.BigInt || Number;
+    [BigInt('0x1'), BigInt('0x100'), BigInt('0x10000'), BigInt('0x1000000'), BigInt('0x100000000'), BigInt('0x10000000000'), BigInt('0x1000000000000'), BigInt('0x100000000000000'), BigInt('0x10000000000000000')];
+    (function () {
+      var a = new Uint16Array([0xFFCC]);
+      var b = new Uint8Array(a.buffer, a.byteOffset, a.byteLength);
+      if (b[0] === 0xFF) {
+        return 'big';
+      }
+      if (b[0] === 0xCC) {
+        return 'little';
+      }
+      return 'unknown';
+    })();
+    /**
+     * Creates an object for sending to a web worker modifying properties that are TypedArrays
+     * into a new object with seperated properties for the buffer, byteOffset, and byteLength.
+     *
+     * @param {Object} message
+     *        Object of properties and values to send to the web worker
+     * @return {Object}
+     *         Modified message with TypedArray values expanded
+     * @function createTransferableMessage
+     */
+
+    const createTransferableMessage = function (message) {
+      const transferable = {};
+      Object.keys(message).forEach(key => {
+        const value = message[key];
+        if (isArrayBufferView(value)) {
+          transferable[key] = {
+            bytes: value.buffer,
+            byteOffset: value.byteOffset,
+            byteLength: value.byteLength
+          };
+        } else {
+          transferable[key] = value;
+        }
+      });
+      return transferable;
+    };
+    /* global self */
+
+    /**
+     * Our web worker interface so that things can talk to aes-decrypter
+     * that will be running in a web worker. the scope is passed to this by
+     * webworkify.
+     */
+
+    self.onmessage = function (event) {
+      const data = event.data;
+      const encrypted = new Uint8Array(data.encrypted.bytes, data.encrypted.byteOffset, data.encrypted.byteLength);
+      const key = new Uint32Array(data.key.bytes, data.key.byteOffset, data.key.byteLength / 4);
+      const iv = new Uint32Array(data.iv.bytes, data.iv.byteOffset, data.iv.byteLength / 4);
+      /* eslint-disable no-new, handle-callback-err */
+
+      new Decrypter(encrypted, key, iv, function (err, bytes) {
+        self.postMessage(createTransferableMessage({
+          source: data.source,
+          decrypted: bytes
+        }), [bytes.buffer]);
+      });
+      /* eslint-enable */
+    };
+  }));
+
+  var Decrypter = factory(workerCode);
+  /* rollup-plugin-worker-factory end for worker!/home/runner/work/http-streaming/http-streaming/src/decrypter-worker.js */
+
+  /**
+   * Convert the properties of an HLS track into an audioTrackKind.
+   *
+   * @private
+   */
+
+  const audioTrackKind_ = properties => {
+    let kind = properties.default ? 'main' : 'alternative';
+    if (properties.characteristics && properties.characteristics.indexOf('public.accessibility.describes-video') >= 0) {
+      kind = 'main-desc';
+    }
+    return kind;
+  };
+  /**
+   * Pause provided segment loader and playlist loader if active
+   *
+   * @param {SegmentLoader} segmentLoader
+   *        SegmentLoader to pause
+   * @param {Object} mediaType
+   *        Active media type
+   * @function stopLoaders
+   */
+
+  const stopLoaders = (segmentLoader, mediaType) => {
+    segmentLoader.abort();
+    segmentLoader.pause();
+    if (mediaType && mediaType.activePlaylistLoader) {
+      mediaType.activePlaylistLoader.pause();
+      mediaType.activePlaylistLoader = null;
+    }
+  };
+  /**
+   * Start loading provided segment loader and playlist loader
+   *
+   * @param {PlaylistLoader} playlistLoader
+   *        PlaylistLoader to start loading
+   * @param {Object} mediaType
+   *        Active media type
+   * @function startLoaders
+   */
+
+  const startLoaders = (playlistLoader, mediaType) => {
+    // Segment loader will be started after `loadedmetadata` or `loadedplaylist` from the
+    // playlist loader
+    mediaType.activePlaylistLoader = playlistLoader;
+    playlistLoader.load();
+  };
+  /**
+   * Returns a function to be called when the media group changes. It performs a
+   * non-destructive (preserve the buffer) resync of the SegmentLoader. This is because a
+   * change of group is merely a rendition switch of the same content at another encoding,
+   * rather than a change of content, such as switching audio from English to Spanish.
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Handler for a non-destructive resync of SegmentLoader when the active media
+   *         group changes.
+   * @function onGroupChanged
+   */
+
+  const onGroupChanged = (type, settings) => () => {
+    const {
+      segmentLoaders: {
+        [type]: segmentLoader,
+        main: mainSegmentLoader
+      },
+      mediaTypes: {
+        [type]: mediaType
+      }
+    } = settings;
+    const activeTrack = mediaType.activeTrack();
+    const activeGroup = mediaType.getActiveGroup();
+    const previousActiveLoader = mediaType.activePlaylistLoader;
+    const lastGroup = mediaType.lastGroup_; // the group did not change do nothing
+
+    if (activeGroup && lastGroup && activeGroup.id === lastGroup.id) {
+      return;
+    }
+    mediaType.lastGroup_ = activeGroup;
+    mediaType.lastTrack_ = activeTrack;
+    stopLoaders(segmentLoader, mediaType);
+    if (!activeGroup || activeGroup.isMainPlaylist) {
+      // there is no group active or active group is a main playlist and won't change
+      return;
+    }
+    if (!activeGroup.playlistLoader) {
+      if (previousActiveLoader) {
+        // The previous group had a playlist loader but the new active group does not
+        // this means we are switching from demuxed to muxed audio. In this case we want to
+        // do a destructive reset of the main segment loader and not restart the audio
+        // loaders.
+        mainSegmentLoader.resetEverything();
+      }
+      return;
+    } // Non-destructive resync
+
+    segmentLoader.resyncLoader();
+    startLoaders(activeGroup.playlistLoader, mediaType);
+  };
+  const onGroupChanging = (type, settings) => () => {
+    const {
+      segmentLoaders: {
+        [type]: segmentLoader
+      },
+      mediaTypes: {
+        [type]: mediaType
+      }
+    } = settings;
+    mediaType.lastGroup_ = null;
+    segmentLoader.abort();
+    segmentLoader.pause();
+  };
+  /**
+   * Returns a function to be called when the media track changes. It performs a
+   * destructive reset of the SegmentLoader to ensure we start loading as close to
+   * currentTime as possible.
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Handler for a destructive reset of SegmentLoader when the active media
+   *         track changes.
+   * @function onTrackChanged
+   */
+
+  const onTrackChanged = (type, settings) => () => {
+    const {
+      mainPlaylistLoader,
+      segmentLoaders: {
+        [type]: segmentLoader,
+        main: mainSegmentLoader
+      },
+      mediaTypes: {
+        [type]: mediaType
+      }
+    } = settings;
+    const activeTrack = mediaType.activeTrack();
+    const activeGroup = mediaType.getActiveGroup();
+    const previousActiveLoader = mediaType.activePlaylistLoader;
+    const lastTrack = mediaType.lastTrack_; // track did not change, do nothing
+
+    if (lastTrack && activeTrack && lastTrack.id === activeTrack.id) {
+      return;
+    }
+    mediaType.lastGroup_ = activeGroup;
+    mediaType.lastTrack_ = activeTrack;
+    stopLoaders(segmentLoader, mediaType);
+    if (!activeGroup) {
+      // there is no group active so we do not want to restart loaders
+      return;
+    }
+    if (activeGroup.isMainPlaylist) {
+      // track did not change, do nothing
+      if (!activeTrack || !lastTrack || activeTrack.id === lastTrack.id) {
+        return;
+      }
+      const pc = settings.vhs.playlistController_;
+      const newPlaylist = pc.selectPlaylist(); // media will not change do nothing
+
+      if (pc.media() === newPlaylist) {
+        return;
+      }
+      mediaType.logger_(`track change. Switching main audio from ${lastTrack.id} to ${activeTrack.id}`);
+      mainPlaylistLoader.pause();
+      mainSegmentLoader.resetEverything();
+      pc.fastQualityChange_(newPlaylist);
+      return;
+    }
+    if (type === 'AUDIO') {
+      if (!activeGroup.playlistLoader) {
+        // when switching from demuxed audio/video to muxed audio/video (noted by no
+        // playlist loader for the audio group), we want to do a destructive reset of the
+        // main segment loader and not restart the audio loaders
+        mainSegmentLoader.setAudio(true); // don't have to worry about disabling the audio of the audio segment loader since
+        // it should be stopped
+
+        mainSegmentLoader.resetEverything();
+        return;
+      } // although the segment loader is an audio segment loader, call the setAudio
+      // function to ensure it is prepared to re-append the init segment (or handle other
+      // config changes)
+
+      segmentLoader.setAudio(true);
+      mainSegmentLoader.setAudio(false);
+    }
+    if (previousActiveLoader === activeGroup.playlistLoader) {
+      // Nothing has actually changed. This can happen because track change events can fire
+      // multiple times for a "single" change. One for enabling the new active track, and
+      // one for disabling the track that was active
+      startLoaders(activeGroup.playlistLoader, mediaType);
+      return;
+    }
+    if (segmentLoader.track) {
+      // For WebVTT, set the new text track in the segmentloader
+      segmentLoader.track(activeTrack);
+    } // destructive reset
+
+    segmentLoader.resetEverything();
+    startLoaders(activeGroup.playlistLoader, mediaType);
+  };
+  const onError = {
+    /**
+     * Returns a function to be called when a SegmentLoader or PlaylistLoader encounters
+     * an error.
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @return {Function}
+     *         Error handler. Logs warning (or error if the playlist is excluded) to
+     *         console and switches back to default audio track.
+     * @function onError.AUDIO
+     */
+    AUDIO: (type, settings) => () => {
+      const {
+        mediaTypes: {
+          [type]: mediaType
+        },
+        excludePlaylist
+      } = settings; // switch back to default audio track
+
+      const activeTrack = mediaType.activeTrack();
+      const activeGroup = mediaType.activeGroup();
+      const id = (activeGroup.filter(group => group.default)[0] || activeGroup[0]).id;
+      const defaultTrack = mediaType.tracks[id];
+      if (activeTrack === defaultTrack) {
+        // Default track encountered an error. All we can do now is exclude the current
+        // rendition and hope another will switch audio groups
+        excludePlaylist({
+          error: {
+            message: 'Problem encountered loading the default audio track.'
+          }
+        });
+        return;
+      }
+      videojs.log.warn('Problem encountered loading the alternate audio track.' + 'Switching back to default.');
+      for (const trackId in mediaType.tracks) {
+        mediaType.tracks[trackId].enabled = mediaType.tracks[trackId] === defaultTrack;
+      }
+      mediaType.onTrackChanged();
+    },
+    /**
+     * Returns a function to be called when a SegmentLoader or PlaylistLoader encounters
+     * an error.
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @return {Function}
+     *         Error handler. Logs warning to console and disables the active subtitle track
+     * @function onError.SUBTITLES
+     */
+    SUBTITLES: (type, settings) => () => {
+      const {
+        mediaTypes: {
+          [type]: mediaType
+        }
+      } = settings;
+      videojs.log.warn('Problem encountered loading the subtitle track.' + 'Disabling subtitle track.');
+      const track = mediaType.activeTrack();
+      if (track) {
+        track.mode = 'disabled';
+      }
+      mediaType.onTrackChanged();
+    }
+  };
+  const setupListeners = {
+    /**
+     * Setup event listeners for audio playlist loader
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {PlaylistLoader|null} playlistLoader
+     *        PlaylistLoader to register listeners on
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function setupListeners.AUDIO
+     */
+    AUDIO: (type, playlistLoader, settings) => {
+      if (!playlistLoader) {
+        // no playlist loader means audio will be muxed with the video
+        return;
+      }
+      const {
+        tech,
+        requestOptions,
+        segmentLoaders: {
+          [type]: segmentLoader
+        }
+      } = settings;
+      playlistLoader.on('loadedmetadata', () => {
+        const media = playlistLoader.media();
+        segmentLoader.playlist(media, requestOptions); // if the video is already playing, or if this isn't a live video and preload
+        // permits, start downloading segments
+
+        if (!tech.paused() || media.endList && tech.preload() !== 'none') {
+          segmentLoader.load();
+        }
+      });
+      playlistLoader.on('loadedplaylist', () => {
+        segmentLoader.playlist(playlistLoader.media(), requestOptions); // If the player isn't paused, ensure that the segment loader is running
+
+        if (!tech.paused()) {
+          segmentLoader.load();
+        }
+      });
+      playlistLoader.on('error', onError[type](type, settings));
+    },
+    /**
+     * Setup event listeners for subtitle playlist loader
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {PlaylistLoader|null} playlistLoader
+     *        PlaylistLoader to register listeners on
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function setupListeners.SUBTITLES
+     */
+    SUBTITLES: (type, playlistLoader, settings) => {
+      const {
+        tech,
+        requestOptions,
+        segmentLoaders: {
+          [type]: segmentLoader
+        },
+        mediaTypes: {
+          [type]: mediaType
+        }
+      } = settings;
+      playlistLoader.on('loadedmetadata', () => {
+        const media = playlistLoader.media();
+        segmentLoader.playlist(media, requestOptions);
+        segmentLoader.track(mediaType.activeTrack()); // if the video is already playing, or if this isn't a live video and preload
+        // permits, start downloading segments
+
+        if (!tech.paused() || media.endList && tech.preload() !== 'none') {
+          segmentLoader.load();
+        }
+      });
+      playlistLoader.on('loadedplaylist', () => {
+        segmentLoader.playlist(playlistLoader.media(), requestOptions); // If the player isn't paused, ensure that the segment loader is running
+
+        if (!tech.paused()) {
+          segmentLoader.load();
+        }
+      });
+      playlistLoader.on('error', onError[type](type, settings));
+    }
+  };
+  const initialize = {
+    /**
+     * Setup PlaylistLoaders and AudioTracks for the audio groups
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function initialize.AUDIO
+     */
+    'AUDIO': (type, settings) => {
+      const {
+        vhs,
+        sourceType,
+        segmentLoaders: {
+          [type]: segmentLoader
+        },
+        requestOptions,
+        main: {
+          mediaGroups
+        },
+        mediaTypes: {
+          [type]: {
+            groups,
+            tracks,
+            logger_
+          }
+        },
+        mainPlaylistLoader
+      } = settings;
+      const audioOnlyMain = isAudioOnly(mainPlaylistLoader.main); // force a default if we have none
+
+      if (!mediaGroups[type] || Object.keys(mediaGroups[type]).length === 0) {
+        mediaGroups[type] = {
+          main: {
+            default: {
+              default: true
+            }
+          }
+        };
+        if (audioOnlyMain) {
+          mediaGroups[type].main.default.playlists = mainPlaylistLoader.main.playlists;
+        }
+      }
+      for (const groupId in mediaGroups[type]) {
+        if (!groups[groupId]) {
+          groups[groupId] = [];
+        }
+        for (const variantLabel in mediaGroups[type][groupId]) {
+          let properties = mediaGroups[type][groupId][variantLabel];
+          let playlistLoader;
+          if (audioOnlyMain) {
+            logger_(`AUDIO group '${groupId}' label '${variantLabel}' is a main playlist`);
+            properties.isMainPlaylist = true;
+            playlistLoader = null; // if vhs-json was provided as the source, and the media playlist was resolved,
+            // use the resolved media playlist object
+          } else if (sourceType === 'vhs-json' && properties.playlists) {
+            playlistLoader = new PlaylistLoader(properties.playlists[0], vhs, requestOptions);
+          } else if (properties.resolvedUri) {
+            playlistLoader = new PlaylistLoader(properties.resolvedUri, vhs, requestOptions); // TODO: dash isn't the only type with properties.playlists
+            // should we even have properties.playlists in this check.
+          } else if (properties.playlists && sourceType === 'dash') {
+            playlistLoader = new DashPlaylistLoader(properties.playlists[0], vhs, requestOptions, mainPlaylistLoader);
+          } else {
+            // no resolvedUri means the audio is muxed with the video when using this
+            // audio track
+            playlistLoader = null;
+          }
+          properties = merge({
+            id: variantLabel,
+            playlistLoader
+          }, properties);
+          setupListeners[type](type, properties.playlistLoader, settings);
+          groups[groupId].push(properties);
+          if (typeof tracks[variantLabel] === 'undefined') {
+            const track = new videojs.AudioTrack({
+              id: variantLabel,
+              kind: audioTrackKind_(properties),
+              enabled: false,
+              language: properties.language,
+              default: properties.default,
+              label: variantLabel
+            });
+            tracks[variantLabel] = track;
+          }
+        }
+      } // setup single error event handler for the segment loader
+
+      segmentLoader.on('error', onError[type](type, settings));
+    },
+    /**
+     * Setup PlaylistLoaders and TextTracks for the subtitle groups
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function initialize.SUBTITLES
+     */
+    'SUBTITLES': (type, settings) => {
+      const {
+        tech,
+        vhs,
+        sourceType,
+        segmentLoaders: {
+          [type]: segmentLoader
+        },
+        requestOptions,
+        main: {
+          mediaGroups
+        },
+        mediaTypes: {
+          [type]: {
+            groups,
+            tracks
+          }
+        },
+        mainPlaylistLoader
+      } = settings;
+      for (const groupId in mediaGroups[type]) {
+        if (!groups[groupId]) {
+          groups[groupId] = [];
+        }
+        for (const variantLabel in mediaGroups[type][groupId]) {
+          if (!vhs.options_.useForcedSubtitles && mediaGroups[type][groupId][variantLabel].forced) {
+            // Subtitle playlists with the forced attribute are not selectable in Safari.
+            // According to Apple's HLS Authoring Specification:
+            //   If content has forced subtitles and regular subtitles in a given language,
+            //   the regular subtitles track in that language MUST contain both the forced
+            //   subtitles and the regular subtitles for that language.
+            // Because of this requirement and that Safari does not add forced subtitles,
+            // forced subtitles are skipped here to maintain consistent experience across
+            // all platforms
+            continue;
+          }
+          let properties = mediaGroups[type][groupId][variantLabel];
+          let playlistLoader;
+          if (sourceType === 'hls') {
+            playlistLoader = new PlaylistLoader(properties.resolvedUri, vhs, requestOptions);
+          } else if (sourceType === 'dash') {
+            const playlists = properties.playlists.filter(p => p.excludeUntil !== Infinity);
+            if (!playlists.length) {
+              return;
+            }
+            playlistLoader = new DashPlaylistLoader(properties.playlists[0], vhs, requestOptions, mainPlaylistLoader);
+          } else if (sourceType === 'vhs-json') {
+            playlistLoader = new PlaylistLoader(
+            // if the vhs-json object included the media playlist, use the media playlist
+            // as provided, otherwise use the resolved URI to load the playlist
+            properties.playlists ? properties.playlists[0] : properties.resolvedUri, vhs, requestOptions);
+          }
+          properties = merge({
+            id: variantLabel,
+            playlistLoader
+          }, properties);
+          setupListeners[type](type, properties.playlistLoader, settings);
+          groups[groupId].push(properties);
+          if (typeof tracks[variantLabel] === 'undefined') {
+            const track = tech.addRemoteTextTrack({
+              id: variantLabel,
+              kind: 'subtitles',
+              default: properties.default && properties.autoselect,
+              language: properties.language,
+              label: variantLabel
+            }, false).track;
+            tracks[variantLabel] = track;
+          }
+        }
+      } // setup single error event handler for the segment loader
+
+      segmentLoader.on('error', onError[type](type, settings));
+    },
+    /**
+     * Setup TextTracks for the closed-caption groups
+     *
+     * @param {String} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function initialize['CLOSED-CAPTIONS']
+     */
+    'CLOSED-CAPTIONS': (type, settings) => {
+      const {
+        tech,
+        main: {
+          mediaGroups
+        },
+        mediaTypes: {
+          [type]: {
+            groups,
+            tracks
+          }
+        }
+      } = settings;
+      for (const groupId in mediaGroups[type]) {
+        if (!groups[groupId]) {
+          groups[groupId] = [];
+        }
+        for (const variantLabel in mediaGroups[type][groupId]) {
+          const properties = mediaGroups[type][groupId][variantLabel]; // Look for either 608 (CCn) or 708 (SERVICEn) caption services
+
+          if (!/^(?:CC|SERVICE)/.test(properties.instreamId)) {
+            continue;
+          }
+          const captionServices = tech.options_.vhs && tech.options_.vhs.captionServices || {};
+          let newProps = {
+            label: variantLabel,
+            language: properties.language,
+            instreamId: properties.instreamId,
+            default: properties.default && properties.autoselect
+          };
+          if (captionServices[newProps.instreamId]) {
+            newProps = merge(newProps, captionServices[newProps.instreamId]);
+          }
+          if (newProps.default === undefined) {
+            delete newProps.default;
+          } // No PlaylistLoader is required for Closed-Captions because the captions are
+          // embedded within the video stream
+
+          groups[groupId].push(merge({
+            id: variantLabel
+          }, properties));
+          if (typeof tracks[variantLabel] === 'undefined') {
+            const track = tech.addRemoteTextTrack({
+              id: newProps.instreamId,
+              kind: 'captions',
+              default: newProps.default,
+              language: newProps.language,
+              label: newProps.label
+            }, false).track;
+            tracks[variantLabel] = track;
+          }
+        }
+      }
+    }
+  };
+  const groupMatch = (list, media) => {
+    for (let i = 0; i < list.length; i++) {
+      if (playlistMatch(media, list[i])) {
+        return true;
+      }
+      if (list[i].playlists && groupMatch(list[i].playlists, media)) {
+        return true;
+      }
+    }
+    return false;
+  };
+  /**
+   * Returns a function used to get the active group of the provided type
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Function that returns the active media group for the provided type. Takes an
+   *         optional parameter {TextTrack} track. If no track is provided, a list of all
+   *         variants in the group, otherwise the variant corresponding to the provided
+   *         track is returned.
+   * @function activeGroup
+   */
+
+  const activeGroup = (type, settings) => track => {
+    const {
+      mainPlaylistLoader,
+      mediaTypes: {
+        [type]: {
+          groups
+        }
+      }
+    } = settings;
+    const media = mainPlaylistLoader.media();
+    if (!media) {
+      return null;
+    }
+    let variants = null; // set to variants to main media active group
+
+    if (media.attributes[type]) {
+      variants = groups[media.attributes[type]];
+    }
+    const groupKeys = Object.keys(groups);
+    if (!variants) {
+      // find the mainPlaylistLoader media
+      // that is in a media group if we are dealing
+      // with audio only
+      if (type === 'AUDIO' && groupKeys.length > 1 && isAudioOnly(settings.main)) {
+        for (let i = 0; i < groupKeys.length; i++) {
+          const groupPropertyList = groups[groupKeys[i]];
+          if (groupMatch(groupPropertyList, media)) {
+            variants = groupPropertyList;
+            break;
+          }
+        } // use the main group if it exists
+      } else if (groups.main) {
+        variants = groups.main; // only one group, use that one
+      } else if (groupKeys.length === 1) {
+        variants = groups[groupKeys[0]];
+      }
+    }
+    if (typeof track === 'undefined') {
+      return variants;
+    }
+    if (track === null || !variants) {
+      // An active track was specified so a corresponding group is expected. track === null
+      // means no track is currently active so there is no corresponding group
+      return null;
+    }
+    return variants.filter(props => props.id === track.id)[0] || null;
+  };
+  const activeTrack = {
+    /**
+     * Returns a function used to get the active track of type provided
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @return {Function}
+     *         Function that returns the active media track for the provided type. Returns
+     *         null if no track is active
+     * @function activeTrack.AUDIO
+     */
+    AUDIO: (type, settings) => () => {
+      const {
+        mediaTypes: {
+          [type]: {
+            tracks
+          }
+        }
+      } = settings;
+      for (const id in tracks) {
+        if (tracks[id].enabled) {
+          return tracks[id];
+        }
+      }
+      return null;
+    },
+    /**
+     * Returns a function used to get the active track of type provided
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @return {Function}
+     *         Function that returns the active media track for the provided type. Returns
+     *         null if no track is active
+     * @function activeTrack.SUBTITLES
+     */
+    SUBTITLES: (type, settings) => () => {
+      const {
+        mediaTypes: {
+          [type]: {
+            tracks
+          }
+        }
+      } = settings;
+      for (const id in tracks) {
+        if (tracks[id].mode === 'showing' || tracks[id].mode === 'hidden') {
+          return tracks[id];
+        }
+      }
+      return null;
+    }
+  };
+  const getActiveGroup = (type, {
+    mediaTypes
+  }) => () => {
+    const activeTrack_ = mediaTypes[type].activeTrack();
+    if (!activeTrack_) {
+      return null;
+    }
+    return mediaTypes[type].activeGroup(activeTrack_);
+  };
+  /**
+   * Setup PlaylistLoaders and Tracks for media groups (Audio, Subtitles,
+   * Closed-Captions) specified in the main manifest.
+   *
+   * @param {Object} settings
+   *        Object containing required information for setting up the media groups
+   * @param {Tech} settings.tech
+   *        The tech of the player
+   * @param {Object} settings.requestOptions
+   *        XHR request options used by the segment loaders
+   * @param {PlaylistLoader} settings.mainPlaylistLoader
+   *        PlaylistLoader for the main source
+   * @param {VhsHandler} settings.vhs
+   *        VHS SourceHandler
+   * @param {Object} settings.main
+   *        The parsed main manifest
+   * @param {Object} settings.mediaTypes
+   *        Object to store the loaders, tracks, and utility methods for each media type
+   * @param {Function} settings.excludePlaylist
+   *        Excludes the current rendition and forces a rendition switch.
+   * @function setupMediaGroups
+   */
+
+  const setupMediaGroups = settings => {
+    ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+      initialize[type](type, settings);
+    });
+    const {
+      mediaTypes,
+      mainPlaylistLoader,
+      tech,
+      vhs,
+      segmentLoaders: {
+        ['AUDIO']: audioSegmentLoader,
+        main: mainSegmentLoader
+      }
+    } = settings; // setup active group and track getters and change event handlers
+
+    ['AUDIO', 'SUBTITLES'].forEach(type => {
+      mediaTypes[type].activeGroup = activeGroup(type, settings);
+      mediaTypes[type].activeTrack = activeTrack[type](type, settings);
+      mediaTypes[type].onGroupChanged = onGroupChanged(type, settings);
+      mediaTypes[type].onGroupChanging = onGroupChanging(type, settings);
+      mediaTypes[type].onTrackChanged = onTrackChanged(type, settings);
+      mediaTypes[type].getActiveGroup = getActiveGroup(type, settings);
+    }); // DO NOT enable the default subtitle or caption track.
+    // DO enable the default audio track
+
+    const audioGroup = mediaTypes.AUDIO.activeGroup();
+    if (audioGroup) {
+      const groupId = (audioGroup.filter(group => group.default)[0] || audioGroup[0]).id;
+      mediaTypes.AUDIO.tracks[groupId].enabled = true;
+      mediaTypes.AUDIO.onGroupChanged();
+      mediaTypes.AUDIO.onTrackChanged();
+      const activeAudioGroup = mediaTypes.AUDIO.getActiveGroup(); // a similar check for handling setAudio on each loader is run again each time the
+      // track is changed, but needs to be handled here since the track may not be considered
+      // changed on the first call to onTrackChanged
+
+      if (!activeAudioGroup.playlistLoader) {
+        // either audio is muxed with video or the stream is audio only
+        mainSegmentLoader.setAudio(true);
+      } else {
+        // audio is demuxed
+        mainSegmentLoader.setAudio(false);
+        audioSegmentLoader.setAudio(true);
+      }
+    }
+    mainPlaylistLoader.on('mediachange', () => {
+      ['AUDIO', 'SUBTITLES'].forEach(type => mediaTypes[type].onGroupChanged());
+    });
+    mainPlaylistLoader.on('mediachanging', () => {
+      ['AUDIO', 'SUBTITLES'].forEach(type => mediaTypes[type].onGroupChanging());
+    }); // custom audio track change event handler for usage event
+
+    const onAudioTrackChanged = () => {
+      mediaTypes.AUDIO.onTrackChanged();
+      tech.trigger({
+        type: 'usage',
+        name: 'vhs-audio-change'
+      });
+    };
+    tech.audioTracks().addEventListener('change', onAudioTrackChanged);
+    tech.remoteTextTracks().addEventListener('change', mediaTypes.SUBTITLES.onTrackChanged);
+    vhs.on('dispose', () => {
+      tech.audioTracks().removeEventListener('change', onAudioTrackChanged);
+      tech.remoteTextTracks().removeEventListener('change', mediaTypes.SUBTITLES.onTrackChanged);
+    }); // clear existing audio tracks and add the ones we just created
+
+    tech.clearTracks('audio');
+    for (const id in mediaTypes.AUDIO.tracks) {
+      tech.audioTracks().addTrack(mediaTypes.AUDIO.tracks[id]);
+    }
+  };
+  /**
+   * Creates skeleton object used to store the loaders, tracks, and utility methods for each
+   * media type
+   *
+   * @return {Object}
+   *         Object to store the loaders, tracks, and utility methods for each media type
+   * @function createMediaTypes
+   */
+
+  const createMediaTypes = () => {
+    const mediaTypes = {};
+    ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+      mediaTypes[type] = {
+        groups: {},
+        tracks: {},
+        activePlaylistLoader: null,
+        activeGroup: noop,
+        activeTrack: noop,
+        getActiveGroup: noop,
+        onGroupChanged: noop,
+        onTrackChanged: noop,
+        lastTrack_: null,
+        logger_: logger(`MediaGroups[${type}]`)
+      };
+    });
+    return mediaTypes;
+  };
+
+  /**
+   * A utility class for setting properties and maintaining the state of the content steering manifest.
+   *
+   * Content Steering manifest format:
+   * VERSION: number (required) currently only version 1 is supported.
+   * TTL: number in seconds (optional) until the next content steering manifest reload.
+   * RELOAD-URI: string (optional) uri to fetch the next content steering manifest.
+   * SERVICE-LOCATION-PRIORITY or PATHWAY-PRIORITY a non empty array of unique string values.
+   * PATHWAY-CLONES: array (optional) (HLS only) pathway clone objects to copy from other playlists.
+   */
+
+  class SteeringManifest {
+    constructor() {
+      this.priority_ = [];
+      this.pathwayClones_ = new Map();
+    }
+    set version(number) {
+      // Only version 1 is currently supported for both DASH and HLS.
+      if (number === 1) {
+        this.version_ = number;
+      }
+    }
+    set ttl(seconds) {
+      // TTL = time-to-live, default = 300 seconds.
+      this.ttl_ = seconds || 300;
+    }
+    set reloadUri(uri) {
+      if (uri) {
+        // reload URI can be relative to the previous reloadUri.
+        this.reloadUri_ = resolveUrl(this.reloadUri_, uri);
+      }
+    }
+    set priority(array) {
+      // priority must be non-empty and unique values.
+      if (array && array.length) {
+        this.priority_ = array;
+      }
+    }
+    set pathwayClones(array) {
+      // pathwayClones must be non-empty.
+      if (array && array.length) {
+        this.pathwayClones_ = new Map(array.map(clone => [clone.ID, clone]));
+      }
+    }
+    get version() {
+      return this.version_;
+    }
+    get ttl() {
+      return this.ttl_;
+    }
+    get reloadUri() {
+      return this.reloadUri_;
+    }
+    get priority() {
+      return this.priority_;
+    }
+    get pathwayClones() {
+      return this.pathwayClones_;
+    }
+  }
+  /**
+   * This class represents a content steering manifest and associated state. See both HLS and DASH specifications.
+   * HLS: https://developer.apple.com/streaming/HLSContentSteeringSpecification.pdf and
+   * https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/ section 4.4.6.6.
+   * DASH: https://dashif.org/docs/DASH-IF-CTS-00XX-Content-Steering-Community-Review.pdf
+   *
+   * @param {function} xhr for making a network request from the browser.
+   * @param {function} bandwidth for fetching the current bandwidth from the main segment loader.
+   */
+
+  class ContentSteeringController extends videojs.EventTarget {
+    constructor(xhr, bandwidth) {
+      super();
+      this.currentPathway = null;
+      this.defaultPathway = null;
+      this.queryBeforeStart = false;
+      this.availablePathways_ = new Set();
+      this.steeringManifest = new SteeringManifest();
+      this.proxyServerUrl_ = null;
+      this.manifestType_ = null;
+      this.ttlTimeout_ = null;
+      this.request_ = null;
+      this.currentPathwayClones = new Map();
+      this.nextPathwayClones = new Map();
+      this.excludedSteeringManifestURLs = new Set();
+      this.logger_ = logger('Content Steering');
+      this.xhr_ = xhr;
+      this.getBandwidth_ = bandwidth;
+    }
+    /**
+     * Assigns the content steering tag properties to the steering controller
+     *
+     * @param {string} baseUrl the baseURL from the main manifest for resolving the steering manifest url
+     * @param {Object} steeringTag the content steering tag from the main manifest
+     */
+
+    assignTagProperties(baseUrl, steeringTag) {
+      this.manifestType_ = steeringTag.serverUri ? 'HLS' : 'DASH'; // serverUri is HLS serverURL is DASH
+
+      const steeringUri = steeringTag.serverUri || steeringTag.serverURL;
+      if (!steeringUri) {
+        this.logger_(`steering manifest URL is ${steeringUri}, cannot request steering manifest.`);
+        this.trigger('error');
+        return;
+      } // Content steering manifests can be encoded as a data URI. We can decode, parse and return early if that's the case.
+
+      if (steeringUri.startsWith('data:')) {
+        this.decodeDataUriManifest_(steeringUri.substring(steeringUri.indexOf(',') + 1));
+        return;
+      } // reloadUri is the resolution of the main manifest URL and steering URL.
+
+      this.steeringManifest.reloadUri = resolveUrl(baseUrl, steeringUri); // pathwayId is HLS defaultServiceLocation is DASH
+
+      this.defaultPathway = steeringTag.pathwayId || steeringTag.defaultServiceLocation; // currently only DASH supports the following properties on <ContentSteering> tags.
+
+      this.queryBeforeStart = steeringTag.queryBeforeStart;
+      this.proxyServerUrl_ = steeringTag.proxyServerURL; // trigger a steering event if we have a pathway from the content steering tag.
+      // this tells VHS which segment pathway to start with.
+      // If queryBeforeStart is true we need to wait for the steering manifest response.
+
+      if (this.defaultPathway && !this.queryBeforeStart) {
+        this.trigger('content-steering');
+      }
+    }
+    /**
+     * Requests the content steering manifest and parse the response. This should only be called after
+     * assignTagProperties was called with a content steering tag.
+     *
+     * @param {string} initialUri The optional uri to make the request with.
+     *    If set, the request should be made with exactly what is passed in this variable.
+     *    This scenario should only happen once on initalization.
+     */
+
+    requestSteeringManifest(initial) {
+      const reloadUri = this.steeringManifest.reloadUri;
+      if (!reloadUri) {
+        return;
+      } // We currently don't support passing MPD query parameters directly to the content steering URL as this requires
+      // ExtUrlQueryInfo tag support. See the DASH content steering spec section 8.1.
+      // This request URI accounts for manifest URIs that have been excluded.
+
+      const uri = initial ? reloadUri : this.getRequestURI(reloadUri); // If there are no valid manifest URIs, we should stop content steering.
+
+      if (!uri) {
+        this.logger_('No valid content steering manifest URIs. Stopping content steering.');
+        this.trigger('error');
+        this.dispose();
+        return;
+      }
+      this.request_ = this.xhr_({
+        uri,
+        requestType: 'content-steering-manifest'
+      }, (error, errorInfo) => {
+        if (error) {
+          // If the client receives HTTP 410 Gone in response to a manifest request,
+          // it MUST NOT issue another request for that URI for the remainder of the
+          // playback session. It MAY continue to use the most-recently obtained set
+          // of Pathways.
+          if (errorInfo.status === 410) {
+            this.logger_(`manifest request 410 ${error}.`);
+            this.logger_(`There will be no more content steering requests to ${uri} this session.`);
+            this.excludedSteeringManifestURLs.add(uri);
+            return;
+          } // If the client receives HTTP 429 Too Many Requests with a Retry-After
+          // header in response to a manifest request, it SHOULD wait until the time
+          // specified by the Retry-After header to reissue the request.
+
+          if (errorInfo.status === 429) {
+            const retrySeconds = errorInfo.responseHeaders['retry-after'];
+            this.logger_(`manifest request 429 ${error}.`);
+            this.logger_(`content steering will retry in ${retrySeconds} seconds.`);
+            this.startTTLTimeout_(parseInt(retrySeconds, 10));
+            return;
+          } // If the Steering Manifest cannot be loaded and parsed correctly, the
+          // client SHOULD continue to use the previous values and attempt to reload
+          // it after waiting for the previously-specified TTL (or 5 minutes if
+          // none).
+
+          this.logger_(`manifest failed to load ${error}.`);
+          this.startTTLTimeout_();
+          return;
+        }
+        const steeringManifestJson = JSON.parse(this.request_.responseText);
+        this.assignSteeringProperties_(steeringManifestJson);
+        this.startTTLTimeout_();
+      });
+    }
+    /**
+     * Set the proxy server URL and add the steering manifest url as a URI encoded parameter.
+     *
+     * @param {string} steeringUrl the steering manifest url
+     * @return the steering manifest url to a proxy server with all parameters set
+     */
+
+    setProxyServerUrl_(steeringUrl) {
+      const steeringUrlObject = new window.URL(steeringUrl);
+      const proxyServerUrlObject = new window.URL(this.proxyServerUrl_);
+      proxyServerUrlObject.searchParams.set('url', encodeURI(steeringUrlObject.toString()));
+      return this.setSteeringParams_(proxyServerUrlObject.toString());
+    }
+    /**
+     * Decodes and parses the data uri encoded steering manifest
+     *
+     * @param {string} dataUri the data uri to be decoded and parsed.
+     */
+
+    decodeDataUriManifest_(dataUri) {
+      const steeringManifestJson = JSON.parse(window.atob(dataUri));
+      this.assignSteeringProperties_(steeringManifestJson);
+    }
+    /**
+     * Set the HLS or DASH content steering manifest request query parameters. For example:
+     * _HLS_pathway="<CURRENT-PATHWAY-ID>" and _HLS_throughput=<THROUGHPUT>
+     * _DASH_pathway and _DASH_throughput
+     *
+     * @param {string} uri to add content steering server parameters to.
+     * @return a new uri as a string with the added steering query parameters.
+     */
+
+    setSteeringParams_(url) {
+      const urlObject = new window.URL(url);
+      const path = this.getPathway();
+      const networkThroughput = this.getBandwidth_();
+      if (path) {
+        const pathwayKey = `_${this.manifestType_}_pathway`;
+        urlObject.searchParams.set(pathwayKey, path);
+      }
+      if (networkThroughput) {
+        const throughputKey = `_${this.manifestType_}_throughput`;
+        urlObject.searchParams.set(throughputKey, networkThroughput);
+      }
+      return urlObject.toString();
+    }
+    /**
+     * Assigns the current steering manifest properties and to the SteeringManifest object
+     *
+     * @param {Object} steeringJson the raw JSON steering manifest
+     */
+
+    assignSteeringProperties_(steeringJson) {
+      this.steeringManifest.version = steeringJson.VERSION;
+      if (!this.steeringManifest.version) {
+        this.logger_(`manifest version is ${steeringJson.VERSION}, which is not supported.`);
+        this.trigger('error');
+        return;
+      }
+      this.steeringManifest.ttl = steeringJson.TTL;
+      this.steeringManifest.reloadUri = steeringJson['RELOAD-URI']; // HLS = PATHWAY-PRIORITY required. DASH = SERVICE-LOCATION-PRIORITY optional
+
+      this.steeringManifest.priority = steeringJson['PATHWAY-PRIORITY'] || steeringJson['SERVICE-LOCATION-PRIORITY']; // Pathway clones to be created/updated in HLS.
+      // See section 7.2 https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/
+
+      this.steeringManifest.pathwayClones = steeringJson['PATHWAY-CLONES'];
+      this.nextPathwayClones = this.steeringManifest.pathwayClones; // 1. apply first pathway from the array.
+      // 2. if first pathway doesn't exist in manifest, try next pathway.
+      //    a. if all pathways are exhausted, ignore the steering manifest priority.
+      // 3. if segments fail from an established pathway, try all variants/renditions, then exclude the failed pathway.
+      //    a. exclude a pathway for a minimum of the last TTL duration. Meaning, from the next steering response,
+      //       the excluded pathway will be ignored.
+      //       See excludePathway usage in excludePlaylist().
+      // If there are no available pathways, we need to stop content steering.
+
+      if (!this.availablePathways_.size) {
+        this.logger_('There are no available pathways for content steering. Ending content steering.');
+        this.trigger('error');
+        this.dispose();
+      }
+      const chooseNextPathway = pathwaysByPriority => {
+        for (const path of pathwaysByPriority) {
+          if (this.availablePathways_.has(path)) {
+            return path;
+          }
+        } // If no pathway matches, ignore the manifest and choose the first available.
+
+        return [...this.availablePathways_][0];
+      };
+      const nextPathway = chooseNextPathway(this.steeringManifest.priority);
+      if (this.currentPathway !== nextPathway) {
+        this.currentPathway = nextPathway;
+        this.trigger('content-steering');
+      }
+    }
+    /**
+     * Returns the pathway to use for steering decisions
+     *
+     * @return {string} returns the current pathway or the default
+     */
+
+    getPathway() {
+      return this.currentPathway || this.defaultPathway;
+    }
+    /**
+     * Chooses the manifest request URI based on proxy URIs and server URLs.
+     * Also accounts for exclusion on certain manifest URIs.
+     *
+     * @param {string} reloadUri the base uri before parameters
+     *
+     * @return {string} the final URI for the request to the manifest server.
+     */
+
+    getRequestURI(reloadUri) {
+      if (!reloadUri) {
+        return null;
+      }
+      const isExcluded = uri => this.excludedSteeringManifestURLs.has(uri);
+      if (this.proxyServerUrl_) {
+        const proxyURI = this.setProxyServerUrl_(reloadUri);
+        if (!isExcluded(proxyURI)) {
+          return proxyURI;
+        }
+      }
+      const steeringURI = this.setSteeringParams_(reloadUri);
+      if (!isExcluded(steeringURI)) {
+        return steeringURI;
+      } // Return nothing if all valid manifest URIs are excluded.
+
+      return null;
+    }
+    /**
+     * Start the timeout for re-requesting the steering manifest at the TTL interval.
+     *
+     * @param {number} ttl time in seconds of the timeout. Defaults to the
+     *        ttl interval in the steering manifest
+     */
+
+    startTTLTimeout_(ttl = this.steeringManifest.ttl) {
+      // 300 (5 minutes) is the default value.
+      const ttlMS = ttl * 1000;
+      this.ttlTimeout_ = window.setTimeout(() => {
+        this.requestSteeringManifest();
+      }, ttlMS);
+    }
+    /**
+     * Clear the TTL timeout if necessary.
+     */
+
+    clearTTLTimeout_() {
+      window.clearTimeout(this.ttlTimeout_);
+      this.ttlTimeout_ = null;
+    }
+    /**
+     * aborts any current steering xhr and sets the current request object to null
+     */
+
+    abort() {
+      if (this.request_) {
+        this.request_.abort();
+      }
+      this.request_ = null;
+    }
+    /**
+     * aborts steering requests clears the ttl timeout and resets all properties.
+     */
+
+    dispose() {
+      this.off('content-steering');
+      this.off('error');
+      this.abort();
+      this.clearTTLTimeout_();
+      this.currentPathway = null;
+      this.defaultPathway = null;
+      this.queryBeforeStart = null;
+      this.proxyServerUrl_ = null;
+      this.manifestType_ = null;
+      this.ttlTimeout_ = null;
+      this.request_ = null;
+      this.excludedSteeringManifestURLs = new Set();
+      this.availablePathways_ = new Set();
+      this.steeringManifest = new SteeringManifest();
+    }
+    /**
+     * adds a pathway to the available pathways set
+     *
+     * @param {string} pathway the pathway string to add
+     */
+
+    addAvailablePathway(pathway) {
+      if (pathway) {
+        this.availablePathways_.add(pathway);
+      }
+    }
+    /**
+     * Clears all pathways from the available pathways set
+     */
+
+    clearAvailablePathways() {
+      this.availablePathways_.clear();
+    }
+    /**
+     * Removes a pathway from the available pathways set.
+     */
+
+    excludePathway(pathway) {
+      return this.availablePathways_.delete(pathway);
+    }
+    /**
+     * Checks the refreshed DASH manifest content steering tag for changes.
+     *
+     * @param {string} baseURL new steering tag on DASH manifest refresh
+     * @param {Object} newTag the new tag to check for changes
+     * @return a true or false whether the new tag has different values
+     */
+
+    didDASHTagChange(baseURL, newTag) {
+      return !newTag && this.steeringManifest.reloadUri || newTag && (resolveUrl(baseURL, newTag.serverURL) !== this.steeringManifest.reloadUri || newTag.defaultServiceLocation !== this.defaultPathway || newTag.queryBeforeStart !== this.queryBeforeStart || newTag.proxyServerURL !== this.proxyServerUrl_);
+    }
+    getAvailablePathways() {
+      return this.availablePathways_;
+    }
+  }
+
+  /**
+   * @file playlist-controller.js
+   */
+  const ABORT_EARLY_EXCLUSION_SECONDS = 10;
+  let Vhs$1; // SegmentLoader stats that need to have each loader's
+  // values summed to calculate the final value
+
+  const loaderStats = ['mediaRequests', 'mediaRequestsAborted', 'mediaRequestsTimedout', 'mediaRequestsErrored', 'mediaTransferDuration', 'mediaBytesTransferred', 'mediaAppends'];
+  const sumLoaderStat = function (stat) {
+    return this.audioSegmentLoader_[stat] + this.mainSegmentLoader_[stat];
+  };
+  const shouldSwitchToMedia = function ({
+    currentPlaylist,
+    buffered,
+    currentTime,
+    nextPlaylist,
+    bufferLowWaterLine,
+    bufferHighWaterLine,
+    duration,
+    bufferBasedABR,
+    log
+  }) {
+    // we have no other playlist to switch to
+    if (!nextPlaylist) {
+      videojs.log.warn('We received no playlist to switch to. Please check your stream.');
+      return false;
+    }
+    const sharedLogLine = `allowing switch ${currentPlaylist && currentPlaylist.id || 'null'} -> ${nextPlaylist.id}`;
+    if (!currentPlaylist) {
+      log(`${sharedLogLine} as current playlist is not set`);
+      return true;
+    } // no need to switch if playlist is the same
+
+    if (nextPlaylist.id === currentPlaylist.id) {
+      return false;
+    } // determine if current time is in a buffered range.
+
+    const isBuffered = Boolean(findRange(buffered, currentTime).length); // If the playlist is live, then we want to not take low water line into account.
+    // This is because in LIVE, the player plays 3 segments from the end of the
+    // playlist, and if `BUFFER_LOW_WATER_LINE` is greater than the duration availble
+    // in those segments, a viewer will never experience a rendition upswitch.
+
+    if (!currentPlaylist.endList) {
+      // For LLHLS live streams, don't switch renditions before playback has started, as it almost
+      // doubles the time to first playback.
+      if (!isBuffered && typeof currentPlaylist.partTargetDuration === 'number') {
+        log(`not ${sharedLogLine} as current playlist is live llhls, but currentTime isn't in buffered.`);
+        return false;
+      }
+      log(`${sharedLogLine} as current playlist is live`);
+      return true;
+    }
+    const forwardBuffer = timeAheadOf(buffered, currentTime);
+    const maxBufferLowWaterLine = bufferBasedABR ? Config.EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE : Config.MAX_BUFFER_LOW_WATER_LINE; // For the same reason as LIVE, we ignore the low water line when the VOD
+    // duration is below the max potential low water line
+
+    if (duration < maxBufferLowWaterLine) {
+      log(`${sharedLogLine} as duration < max low water line (${duration} < ${maxBufferLowWaterLine})`);
+      return true;
+    }
+    const nextBandwidth = nextPlaylist.attributes.BANDWIDTH;
+    const currBandwidth = currentPlaylist.attributes.BANDWIDTH; // when switching down, if our buffer is lower than the high water line,
+    // we can switch down
+
+    if (nextBandwidth < currBandwidth && (!bufferBasedABR || forwardBuffer < bufferHighWaterLine)) {
+      let logLine = `${sharedLogLine} as next bandwidth < current bandwidth (${nextBandwidth} < ${currBandwidth})`;
+      if (bufferBasedABR) {
+        logLine += ` and forwardBuffer < bufferHighWaterLine (${forwardBuffer} < ${bufferHighWaterLine})`;
+      }
+      log(logLine);
+      return true;
+    } // and if our buffer is higher than the low water line,
+    // we can switch up
+
+    if ((!bufferBasedABR || nextBandwidth > currBandwidth) && forwardBuffer >= bufferLowWaterLine) {
+      let logLine = `${sharedLogLine} as forwardBuffer >= bufferLowWaterLine (${forwardBuffer} >= ${bufferLowWaterLine})`;
+      if (bufferBasedABR) {
+        logLine += ` and next bandwidth > current bandwidth (${nextBandwidth} > ${currBandwidth})`;
+      }
+      log(logLine);
+      return true;
+    }
+    log(`not ${sharedLogLine} as no switching criteria met`);
+    return false;
+  };
+  /**
+   * the main playlist controller controller all interactons
+   * between playlists and segmentloaders. At this time this mainly
+   * involves a main playlist and a series of audio playlists
+   * if they are available
+   *
+   * @class PlaylistController
+   * @extends videojs.EventTarget
+   */
+
+  class PlaylistController extends videojs.EventTarget {
+    constructor(options) {
+      super();
+      const {
+        src,
+        withCredentials,
+        tech,
+        bandwidth,
+        externVhs,
+        useCueTags,
+        playlistExclusionDuration,
+        enableLowInitialPlaylist,
+        sourceType,
+        cacheEncryptionKeys,
+        bufferBasedABR,
+        leastPixelDiffSelector,
+        captionServices
+      } = options;
+      if (!src) {
+        throw new Error('A non-empty playlist URL or JSON manifest string is required');
+      }
+      let {
+        maxPlaylistRetries
+      } = options;
+      if (maxPlaylistRetries === null || typeof maxPlaylistRetries === 'undefined') {
+        maxPlaylistRetries = Infinity;
+      }
+      Vhs$1 = externVhs;
+      this.bufferBasedABR = Boolean(bufferBasedABR);
+      this.leastPixelDiffSelector = Boolean(leastPixelDiffSelector);
+      this.withCredentials = withCredentials;
+      this.tech_ = tech;
+      this.vhs_ = tech.vhs;
+      this.sourceType_ = sourceType;
+      this.useCueTags_ = useCueTags;
+      this.playlistExclusionDuration = playlistExclusionDuration;
+      this.maxPlaylistRetries = maxPlaylistRetries;
+      this.enableLowInitialPlaylist = enableLowInitialPlaylist;
+      if (this.useCueTags_) {
+        this.cueTagsTrack_ = this.tech_.addTextTrack('metadata', 'ad-cues');
+        this.cueTagsTrack_.inBandMetadataTrackDispatchType = '';
+      }
+      this.requestOptions_ = {
+        withCredentials,
+        maxPlaylistRetries,
+        timeout: null
+      };
+      this.on('error', this.pauseLoading);
+      this.mediaTypes_ = createMediaTypes();
+      this.mediaSource = new window.MediaSource();
+      this.handleDurationChange_ = this.handleDurationChange_.bind(this);
+      this.handleSourceOpen_ = this.handleSourceOpen_.bind(this);
+      this.handleSourceEnded_ = this.handleSourceEnded_.bind(this);
+      this.mediaSource.addEventListener('durationchange', this.handleDurationChange_); // load the media source into the player
+
+      this.mediaSource.addEventListener('sourceopen', this.handleSourceOpen_);
+      this.mediaSource.addEventListener('sourceended', this.handleSourceEnded_); // we don't have to handle sourceclose since dispose will handle termination of
+      // everything, and the MediaSource should not be detached without a proper disposal
+
+      this.seekable_ = createTimeRanges();
+      this.hasPlayed_ = false;
+      this.syncController_ = new SyncController(options);
+      this.segmentMetadataTrack_ = tech.addRemoteTextTrack({
+        kind: 'metadata',
+        label: 'segment-metadata'
+      }, false).track;
+      this.decrypter_ = new Decrypter();
+      this.sourceUpdater_ = new SourceUpdater(this.mediaSource);
+      this.inbandTextTracks_ = {};
+      this.timelineChangeController_ = new TimelineChangeController();
+      this.keyStatusMap_ = new Map();
+      const segmentLoaderSettings = {
+        vhs: this.vhs_,
+        parse708captions: options.parse708captions,
+        useDtsForTimestampOffset: options.useDtsForTimestampOffset,
+        captionServices,
+        mediaSource: this.mediaSource,
+        currentTime: this.tech_.currentTime.bind(this.tech_),
+        seekable: () => this.seekable(),
+        seeking: () => this.tech_.seeking(),
+        duration: () => this.duration(),
+        hasPlayed: () => this.hasPlayed_,
+        goalBufferLength: () => this.goalBufferLength(),
+        bandwidth,
+        syncController: this.syncController_,
+        decrypter: this.decrypter_,
+        sourceType: this.sourceType_,
+        inbandTextTracks: this.inbandTextTracks_,
+        cacheEncryptionKeys,
+        sourceUpdater: this.sourceUpdater_,
+        timelineChangeController: this.timelineChangeController_,
+        exactManifestTimings: options.exactManifestTimings,
+        addMetadataToTextTrack: this.addMetadataToTextTrack.bind(this)
+      }; // The source type check not only determines whether a special DASH playlist loader
+      // should be used, but also covers the case where the provided src is a vhs-json
+      // manifest object (instead of a URL). In the case of vhs-json, the default
+      // PlaylistLoader should be used.
+
+      this.mainPlaylistLoader_ = this.sourceType_ === 'dash' ? new DashPlaylistLoader(src, this.vhs_, merge(this.requestOptions_, {
+        addMetadataToTextTrack: this.addMetadataToTextTrack.bind(this)
+      })) : new PlaylistLoader(src, this.vhs_, merge(this.requestOptions_, {
+        addDateRangesToTextTrack: this.addDateRangesToTextTrack_.bind(this)
+      }));
+      this.setupMainPlaylistLoaderListeners_(); // setup segment loaders
+      // combined audio/video or just video when alternate audio track is selected
+
+      this.mainSegmentLoader_ = new SegmentLoader(merge(segmentLoaderSettings, {
+        segmentMetadataTrack: this.segmentMetadataTrack_,
+        loaderType: 'main'
+      }), options); // alternate audio track
+
+      this.audioSegmentLoader_ = new SegmentLoader(merge(segmentLoaderSettings, {
+        loaderType: 'audio'
+      }), options);
+      this.subtitleSegmentLoader_ = new VTTSegmentLoader(merge(segmentLoaderSettings, {
+        loaderType: 'vtt',
+        featuresNativeTextTracks: this.tech_.featuresNativeTextTracks,
+        loadVttJs: () => new Promise((resolve, reject) => {
+          function onLoad() {
+            tech.off('vttjserror', onError);
+            resolve();
+          }
+          function onError() {
+            tech.off('vttjsloaded', onLoad);
+            reject();
+          }
+          tech.one('vttjsloaded', onLoad);
+          tech.one('vttjserror', onError); // safe to call multiple times, script will be loaded only once:
+
+          tech.addWebVttScript_();
+        })
+      }), options);
+      const getBandwidth = () => {
+        return this.mainSegmentLoader_.bandwidth;
+      };
+      this.contentSteeringController_ = new ContentSteeringController(this.vhs_.xhr, getBandwidth);
+      this.setupSegmentLoaderListeners_();
+      if (this.bufferBasedABR) {
+        this.mainPlaylistLoader_.one('loadedplaylist', () => this.startABRTimer_());
+        this.tech_.on('pause', () => this.stopABRTimer_());
+        this.tech_.on('play', () => this.startABRTimer_());
+      } // Create SegmentLoader stat-getters
+      // mediaRequests_
+      // mediaRequestsAborted_
+      // mediaRequestsTimedout_
+      // mediaRequestsErrored_
+      // mediaTransferDuration_
+      // mediaBytesTransferred_
+      // mediaAppends_
+
+      loaderStats.forEach(stat => {
+        this[stat + '_'] = sumLoaderStat.bind(this, stat);
+      });
+      this.logger_ = logger('pc');
+      this.triggeredFmp4Usage = false;
+      if (this.tech_.preload() === 'none') {
+        this.loadOnPlay_ = () => {
+          this.loadOnPlay_ = null;
+          this.mainPlaylistLoader_.load();
+        };
+        this.tech_.one('play', this.loadOnPlay_);
+      } else {
+        this.mainPlaylistLoader_.load();
+      }
+      this.timeToLoadedData__ = -1;
+      this.mainAppendsToLoadedData__ = -1;
+      this.audioAppendsToLoadedData__ = -1;
+      const event = this.tech_.preload() === 'none' ? 'play' : 'loadstart'; // start the first frame timer on loadstart or play (for preload none)
+
+      this.tech_.one(event, () => {
+        const timeToLoadedDataStart = Date.now();
+        this.tech_.one('loadeddata', () => {
+          this.timeToLoadedData__ = Date.now() - timeToLoadedDataStart;
+          this.mainAppendsToLoadedData__ = this.mainSegmentLoader_.mediaAppends;
+          this.audioAppendsToLoadedData__ = this.audioSegmentLoader_.mediaAppends;
+        });
+      });
+    }
+    mainAppendsToLoadedData_() {
+      return this.mainAppendsToLoadedData__;
+    }
+    audioAppendsToLoadedData_() {
+      return this.audioAppendsToLoadedData__;
+    }
+    appendsToLoadedData_() {
+      const main = this.mainAppendsToLoadedData_();
+      const audio = this.audioAppendsToLoadedData_();
+      if (main === -1 || audio === -1) {
+        return -1;
+      }
+      return main + audio;
+    }
+    timeToLoadedData_() {
+      return this.timeToLoadedData__;
+    }
+    /**
+     * Run selectPlaylist and switch to the new playlist if we should
+     *
+     * @param {string} [reason=abr] a reason for why the ABR check is made
+     * @private
+     */
+
+    checkABR_(reason = 'abr') {
+      const nextPlaylist = this.selectPlaylist();
+      if (nextPlaylist && this.shouldSwitchToMedia_(nextPlaylist)) {
+        this.switchMedia_(nextPlaylist, reason);
+      }
+    }
+    switchMedia_(playlist, cause, delay) {
+      const oldMedia = this.media();
+      const oldId = oldMedia && (oldMedia.id || oldMedia.uri);
+      const newId = playlist && (playlist.id || playlist.uri);
+      if (oldId && oldId !== newId) {
+        this.logger_(`switch media ${oldId} -> ${newId} from ${cause}`);
+        this.tech_.trigger({
+          type: 'usage',
+          name: `vhs-rendition-change-${cause}`
+        });
+      }
+      this.mainPlaylistLoader_.media(playlist, delay);
+    }
+    /**
+     * A function that ensures we switch our playlists inside of `mediaTypes`
+     * to match the current `serviceLocation` provided by the contentSteering controller.
+     * We want to check media types of `AUDIO`, `SUBTITLES`, and `CLOSED-CAPTIONS`.
+     *
+     * This should only be called on a DASH playback scenario while using content steering.
+     * This is necessary due to differences in how media in HLS manifests are generally tied to
+     * a video playlist, where in DASH that is not always the case.
+     */
+
+    switchMediaForDASHContentSteering_() {
+      ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+        const mediaType = this.mediaTypes_[type];
+        const activeGroup = mediaType ? mediaType.activeGroup() : null;
+        const pathway = this.contentSteeringController_.getPathway();
+        if (activeGroup && pathway) {
+          // activeGroup can be an array or a single group
+          const mediaPlaylists = activeGroup.length ? activeGroup[0].playlists : activeGroup.playlists;
+          const dashMediaPlaylists = mediaPlaylists.filter(p => p.attributes.serviceLocation === pathway); // Switch the current active playlist to the correct CDN
+
+          if (dashMediaPlaylists.length) {
+            this.mediaTypes_[type].activePlaylistLoader.media(dashMediaPlaylists[0]);
+          }
+        }
+      });
+    }
+    /**
+     * Start a timer that periodically calls checkABR_
+     *
+     * @private
+     */
+
+    startABRTimer_() {
+      this.stopABRTimer_();
+      this.abrTimer_ = window.setInterval(() => this.checkABR_(), 250);
+    }
+    /**
+     * Stop the timer that periodically calls checkABR_
+     *
+     * @private
+     */
+
+    stopABRTimer_() {
+      // if we're scrubbing, we don't need to pause.
+      // This getter will be added to Video.js in version 7.11.
+      if (this.tech_.scrubbing && this.tech_.scrubbing()) {
+        return;
+      }
+      window.clearInterval(this.abrTimer_);
+      this.abrTimer_ = null;
+    }
+    /**
+     * Get a list of playlists for the currently selected audio playlist
+     *
+     * @return {Array} the array of audio playlists
+     */
+
+    getAudioTrackPlaylists_() {
+      const main = this.main();
+      const defaultPlaylists = main && main.playlists || []; // if we don't have any audio groups then we can only
+      // assume that the audio tracks are contained in main
+      // playlist array, use that or an empty array.
+
+      if (!main || !main.mediaGroups || !main.mediaGroups.AUDIO) {
+        return defaultPlaylists;
+      }
+      const AUDIO = main.mediaGroups.AUDIO;
+      const groupKeys = Object.keys(AUDIO);
+      let track; // get the current active track
+
+      if (Object.keys(this.mediaTypes_.AUDIO.groups).length) {
+        track = this.mediaTypes_.AUDIO.activeTrack(); // or get the default track from main if mediaTypes_ isn't setup yet
+      } else {
+        // default group is `main` or just the first group.
+        const defaultGroup = AUDIO.main || groupKeys.length && AUDIO[groupKeys[0]];
+        for (const label in defaultGroup) {
+          if (defaultGroup[label].default) {
+            track = {
+              label
+            };
+            break;
+          }
+        }
+      } // no active track no playlists.
+
+      if (!track) {
+        return defaultPlaylists;
+      }
+      const playlists = []; // get all of the playlists that are possible for the
+      // active track.
+
+      for (const group in AUDIO) {
+        if (AUDIO[group][track.label]) {
+          const properties = AUDIO[group][track.label];
+          if (properties.playlists && properties.playlists.length) {
+            playlists.push.apply(playlists, properties.playlists);
+          } else if (properties.uri) {
+            playlists.push(properties);
+          } else if (main.playlists.length) {
+            // if an audio group does not have a uri
+            // see if we have main playlists that use it as a group.
+            // if we do then add those to the playlists list.
+            for (let i = 0; i < main.playlists.length; i++) {
+              const playlist = main.playlists[i];
+              if (playlist.attributes && playlist.attributes.AUDIO && playlist.attributes.AUDIO === group) {
+                playlists.push(playlist);
+              }
+            }
+          }
+        }
+      }
+      if (!playlists.length) {
+        return defaultPlaylists;
+      }
+      return playlists;
+    }
+    /**
+     * Register event handlers on the main playlist loader. A helper
+     * function for construction time.
+     *
+     * @private
+     */
+
+    setupMainPlaylistLoaderListeners_() {
+      this.mainPlaylistLoader_.on('loadedmetadata', () => {
+        const media = this.mainPlaylistLoader_.media();
+        const requestTimeout = media.targetDuration * 1.5 * 1000; // If we don't have any more available playlists, we don't want to
+        // timeout the request.
+
+        if (isLowestEnabledRendition(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.media())) {
+          this.requestOptions_.timeout = 0;
+        } else {
+          this.requestOptions_.timeout = requestTimeout;
+        } // if this isn't a live video and preload permits, start
+        // downloading segments
+
+        if (media.endList && this.tech_.preload() !== 'none') {
+          this.mainSegmentLoader_.playlist(media, this.requestOptions_);
+          this.mainSegmentLoader_.load();
+        }
+        setupMediaGroups({
+          sourceType: this.sourceType_,
+          segmentLoaders: {
+            AUDIO: this.audioSegmentLoader_,
+            SUBTITLES: this.subtitleSegmentLoader_,
+            main: this.mainSegmentLoader_
+          },
+          tech: this.tech_,
+          requestOptions: this.requestOptions_,
+          mainPlaylistLoader: this.mainPlaylistLoader_,
+          vhs: this.vhs_,
+          main: this.main(),
+          mediaTypes: this.mediaTypes_,
+          excludePlaylist: this.excludePlaylist.bind(this)
+        });
+        this.triggerPresenceUsage_(this.main(), media);
+        this.setupFirstPlay();
+        if (!this.mediaTypes_.AUDIO.activePlaylistLoader || this.mediaTypes_.AUDIO.activePlaylistLoader.media()) {
+          this.trigger('selectedinitialmedia');
+        } else {
+          // We must wait for the active audio playlist loader to
+          // finish setting up before triggering this event so the
+          // representations API and EME setup is correct
+          this.mediaTypes_.AUDIO.activePlaylistLoader.one('loadedmetadata', () => {
+            this.trigger('selectedinitialmedia');
+          });
+        }
+      });
+      this.mainPlaylistLoader_.on('loadedplaylist', () => {
+        if (this.loadOnPlay_) {
+          this.tech_.off('play', this.loadOnPlay_);
+        }
+        let updatedPlaylist = this.mainPlaylistLoader_.media();
+        if (!updatedPlaylist) {
+          // Add content steering listeners on first load and init.
+          this.attachContentSteeringListeners_();
+          this.initContentSteeringController_(); // exclude any variants that are not supported by the browser before selecting
+          // an initial media as the playlist selectors do not consider browser support
+
+          this.excludeUnsupportedVariants_();
+          let selectedMedia;
+          if (this.enableLowInitialPlaylist) {
+            selectedMedia = this.selectInitialPlaylist();
+          }
+          if (!selectedMedia) {
+            selectedMedia = this.selectPlaylist();
+          }
+          if (!selectedMedia || !this.shouldSwitchToMedia_(selectedMedia)) {
+            return;
+          }
+          this.initialMedia_ = selectedMedia;
+          this.switchMedia_(this.initialMedia_, 'initial'); // Under the standard case where a source URL is provided, loadedplaylist will
+          // fire again since the playlist will be requested. In the case of vhs-json
+          // (where the manifest object is provided as the source), when the media
+          // playlist's `segments` list is already available, a media playlist won't be
+          // requested, and loadedplaylist won't fire again, so the playlist handler must be
+          // called on its own here.
+
+          const haveJsonSource = this.sourceType_ === 'vhs-json' && this.initialMedia_.segments;
+          if (!haveJsonSource) {
+            return;
+          }
+          updatedPlaylist = this.initialMedia_;
+        }
+        this.handleUpdatedMediaPlaylist(updatedPlaylist);
+      });
+      this.mainPlaylistLoader_.on('error', () => {
+        const error = this.mainPlaylistLoader_.error;
+        this.excludePlaylist({
+          playlistToExclude: error.playlist,
+          error
+        });
+      });
+      this.mainPlaylistLoader_.on('mediachanging', () => {
+        this.mainSegmentLoader_.abort();
+        this.mainSegmentLoader_.pause();
+      });
+      this.mainPlaylistLoader_.on('mediachange', () => {
+        const media = this.mainPlaylistLoader_.media();
+        const requestTimeout = media.targetDuration * 1.5 * 1000; // If we don't have any more available playlists, we don't want to
+        // timeout the request.
+
+        if (isLowestEnabledRendition(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.media())) {
+          this.requestOptions_.timeout = 0;
+        } else {
+          this.requestOptions_.timeout = requestTimeout;
+        }
+        if (this.sourceType_ === 'dash') {
+          // we don't want to re-request the same hls playlist right after it was changed
+          this.mainPlaylistLoader_.load();
+        } // TODO: Create a new event on the PlaylistLoader that signals
+        // that the segments have changed in some way and use that to
+        // update the SegmentLoader instead of doing it twice here and
+        // on `loadedplaylist`
+
+        this.mainSegmentLoader_.pause();
+        this.mainSegmentLoader_.playlist(media, this.requestOptions_);
+        if (this.waitingForFastQualityPlaylistReceived_) {
+          this.runFastQualitySwitch_();
+        } else {
+          this.mainSegmentLoader_.load();
+        }
+        this.tech_.trigger({
+          type: 'mediachange',
+          bubbles: true
+        });
+      });
+      this.mainPlaylistLoader_.on('playlistunchanged', () => {
+        const updatedPlaylist = this.mainPlaylistLoader_.media(); // ignore unchanged playlists that have already been
+        // excluded for not-changing. We likely just have a really slowly updating
+        // playlist.
+
+        if (updatedPlaylist.lastExcludeReason_ === 'playlist-unchanged') {
+          return;
+        }
+        const playlistOutdated = this.stuckAtPlaylistEnd_(updatedPlaylist);
+        if (playlistOutdated) {
+          // Playlist has stopped updating and we're stuck at its end. Try to
+          // exclude it and switch to another playlist in the hope that that
+          // one is updating (and give the player a chance to re-adjust to the
+          // safe live point).
+          this.excludePlaylist({
+            error: {
+              message: 'Playlist no longer updating.',
+              reason: 'playlist-unchanged'
+            }
+          }); // useful for monitoring QoS
+
+          this.tech_.trigger('playliststuck');
+        }
+      });
+      this.mainPlaylistLoader_.on('renditiondisabled', () => {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-rendition-disabled'
+        });
+      });
+      this.mainPlaylistLoader_.on('renditionenabled', () => {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-rendition-enabled'
+        });
+      });
+    }
+    /**
+     * Given an updated media playlist (whether it was loaded for the first time, or
+     * refreshed for live playlists), update any relevant properties and state to reflect
+     * changes in the media that should be accounted for (e.g., cues and duration).
+     *
+     * @param {Object} updatedPlaylist the updated media playlist object
+     *
+     * @private
+     */
+
+    handleUpdatedMediaPlaylist(updatedPlaylist) {
+      if (this.useCueTags_) {
+        this.updateAdCues_(updatedPlaylist);
+      } // TODO: Create a new event on the PlaylistLoader that signals
+      // that the segments have changed in some way and use that to
+      // update the SegmentLoader instead of doing it twice here and
+      // on `mediachange`
+
+      this.mainSegmentLoader_.pause();
+      this.mainSegmentLoader_.playlist(updatedPlaylist, this.requestOptions_);
+      if (this.waitingForFastQualityPlaylistReceived_) {
+        this.runFastQualitySwitch_();
+      }
+      this.updateDuration(!updatedPlaylist.endList); // If the player isn't paused, ensure that the segment loader is running,
+      // as it is possible that it was temporarily stopped while waiting for
+      // a playlist (e.g., in case the playlist errored and we re-requested it).
+
+      if (!this.tech_.paused()) {
+        this.mainSegmentLoader_.load();
+        if (this.audioSegmentLoader_) {
+          this.audioSegmentLoader_.load();
+        }
+      }
+    }
+    /**
+     * A helper function for triggerring presence usage events once per source
+     *
+     * @private
+     */
+
+    triggerPresenceUsage_(main, media) {
+      const mediaGroups = main.mediaGroups || {};
+      let defaultDemuxed = true;
+      const audioGroupKeys = Object.keys(mediaGroups.AUDIO);
+      for (const mediaGroup in mediaGroups.AUDIO) {
+        for (const label in mediaGroups.AUDIO[mediaGroup]) {
+          const properties = mediaGroups.AUDIO[mediaGroup][label];
+          if (!properties.uri) {
+            defaultDemuxed = false;
+          }
+        }
+      }
+      if (defaultDemuxed) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-demuxed'
+        });
+      }
+      if (Object.keys(mediaGroups.SUBTITLES).length) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-webvtt'
+        });
+      }
+      if (Vhs$1.Playlist.isAes(media)) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-aes'
+        });
+      }
+      if (audioGroupKeys.length && Object.keys(mediaGroups.AUDIO[audioGroupKeys[0]]).length > 1) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-alternate-audio'
+        });
+      }
+      if (this.useCueTags_) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-playlist-cue-tags'
+        });
+      }
+    }
+    shouldSwitchToMedia_(nextPlaylist) {
+      const currentPlaylist = this.mainPlaylistLoader_.media() || this.mainPlaylistLoader_.pendingMedia_;
+      const currentTime = this.tech_.currentTime();
+      const bufferLowWaterLine = this.bufferLowWaterLine();
+      const bufferHighWaterLine = this.bufferHighWaterLine();
+      const buffered = this.tech_.buffered();
+      return shouldSwitchToMedia({
+        buffered,
+        currentTime,
+        currentPlaylist,
+        nextPlaylist,
+        bufferLowWaterLine,
+        bufferHighWaterLine,
+        duration: this.duration(),
+        bufferBasedABR: this.bufferBasedABR,
+        log: this.logger_
+      });
+    }
+    /**
+     * Register event handlers on the segment loaders. A helper function
+     * for construction time.
+     *
+     * @private
+     */
+
+    setupSegmentLoaderListeners_() {
+      this.mainSegmentLoader_.on('bandwidthupdate', () => {
+        // Whether or not buffer based ABR or another ABR is used, on a bandwidth change it's
+        // useful to check to see if a rendition switch should be made.
+        this.checkABR_('bandwidthupdate');
+        this.tech_.trigger('bandwidthupdate');
+      });
+      this.mainSegmentLoader_.on('timeout', () => {
+        if (this.bufferBasedABR) {
+          // If a rendition change is needed, then it would've be done on `bandwidthupdate`.
+          // Here the only consideration is that for buffer based ABR there's no guarantee
+          // of an immediate switch (since the bandwidth is averaged with a timeout
+          // bandwidth value of 1), so force a load on the segment loader to keep it going.
+          this.mainSegmentLoader_.load();
+        }
+      }); // `progress` events are not reliable enough of a bandwidth measure to trigger buffer
+      // based ABR.
+
+      if (!this.bufferBasedABR) {
+        this.mainSegmentLoader_.on('progress', () => {
+          this.trigger('progress');
+        });
+      }
+      this.mainSegmentLoader_.on('error', () => {
+        const error = this.mainSegmentLoader_.error();
+        this.excludePlaylist({
+          playlistToExclude: error.playlist,
+          error
+        });
+      });
+      this.mainSegmentLoader_.on('appenderror', () => {
+        this.error = this.mainSegmentLoader_.error_;
+        this.trigger('error');
+      });
+      this.mainSegmentLoader_.on('syncinfoupdate', () => {
+        this.onSyncInfoUpdate_();
+      });
+      this.mainSegmentLoader_.on('timestampoffset', () => {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-timestamp-offset'
+        });
+      });
+      this.audioSegmentLoader_.on('syncinfoupdate', () => {
+        this.onSyncInfoUpdate_();
+      });
+      this.audioSegmentLoader_.on('appenderror', () => {
+        this.error = this.audioSegmentLoader_.error_;
+        this.trigger('error');
+      });
+      this.mainSegmentLoader_.on('ended', () => {
+        this.logger_('main segment loader ended');
+        this.onEndOfStream();
+      });
+      this.mainSegmentLoader_.on('earlyabort', event => {
+        // never try to early abort with the new ABR algorithm
+        if (this.bufferBasedABR) {
+          return;
+        }
+        this.delegateLoaders_('all', ['abort']);
+        this.excludePlaylist({
+          error: {
+            message: 'Aborted early because there isn\'t enough bandwidth to complete ' + 'the request without rebuffering.'
+          },
+          playlistExclusionDuration: ABORT_EARLY_EXCLUSION_SECONDS
+        });
+      });
+      const updateCodecs = () => {
+        if (!this.sourceUpdater_.hasCreatedSourceBuffers()) {
+          return this.tryToCreateSourceBuffers_();
+        }
+        const codecs = this.getCodecsOrExclude_(); // no codecs means that the playlist was excluded
+
+        if (!codecs) {
+          return;
+        }
+        this.sourceUpdater_.addOrChangeSourceBuffers(codecs);
+      };
+      this.mainSegmentLoader_.on('trackinfo', updateCodecs);
+      this.audioSegmentLoader_.on('trackinfo', updateCodecs);
+      this.mainSegmentLoader_.on('fmp4', () => {
+        if (!this.triggeredFmp4Usage) {
+          this.tech_.trigger({
+            type: 'usage',
+            name: 'vhs-fmp4'
+          });
+          this.triggeredFmp4Usage = true;
+        }
+      });
+      this.audioSegmentLoader_.on('fmp4', () => {
+        if (!this.triggeredFmp4Usage) {
+          this.tech_.trigger({
+            type: 'usage',
+            name: 'vhs-fmp4'
+          });
+          this.triggeredFmp4Usage = true;
+        }
+      });
+      this.audioSegmentLoader_.on('ended', () => {
+        this.logger_('audioSegmentLoader ended');
+        this.onEndOfStream();
+      });
+    }
+    mediaSecondsLoaded_() {
+      return Math.max(this.audioSegmentLoader_.mediaSecondsLoaded + this.mainSegmentLoader_.mediaSecondsLoaded);
+    }
+    /**
+     * Call load on our SegmentLoaders
+     */
+
+    load() {
+      this.mainSegmentLoader_.load();
+      if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+        this.audioSegmentLoader_.load();
+      }
+      if (this.mediaTypes_.SUBTITLES.activePlaylistLoader) {
+        this.subtitleSegmentLoader_.load();
+      }
+    }
+    /**
+     * Re-tune playback quality level for the current player
+     * conditions. This method will perform destructive actions like removing
+     * already buffered content in order to readjust the currently active
+     * playlist quickly. This is good for manual quality changes
+     *
+     * @private
+     */
+
+    fastQualityChange_(media = this.selectPlaylist()) {
+      if (media && media === this.mainPlaylistLoader_.media()) {
+        this.logger_('skipping fastQualityChange because new media is same as old');
+        return;
+      }
+      this.switchMedia_(media, 'fast-quality'); // we would like to avoid race condition when we call fastQuality,
+      // reset everything and start loading segments from prev segments instead of new because new playlist is not received yet
+
+      this.waitingForFastQualityPlaylistReceived_ = true;
+    }
+    runFastQualitySwitch_() {
+      this.waitingForFastQualityPlaylistReceived_ = false; // Delete all buffered data to allow an immediate quality switch, then seek to give
+      // the browser a kick to remove any cached frames from the previous rendtion (.04 seconds
+      // ahead was roughly the minimum that will accomplish this across a variety of content
+      // in IE and Edge, but seeking in place is sufficient on all other browsers)
+      // Edge/IE bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14600375/
+      // Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=651904
+
+      this.mainSegmentLoader_.pause();
+      this.mainSegmentLoader_.resetEverything(() => {
+        this.tech_.setCurrentTime(this.tech_.currentTime());
+      }); // don't need to reset audio as it is reset when media changes
+    }
+    /**
+     * Begin playback.
+     */
+
+    play() {
+      if (this.setupFirstPlay()) {
+        return;
+      }
+      if (this.tech_.ended()) {
+        this.tech_.setCurrentTime(0);
+      }
+      if (this.hasPlayed_) {
+        this.load();
+      }
+      const seekable = this.tech_.seekable(); // if the viewer has paused and we fell out of the live window,
+      // seek forward to the live point
+
+      if (this.tech_.duration() === Infinity) {
+        if (this.tech_.currentTime() < seekable.start(0)) {
+          return this.tech_.setCurrentTime(seekable.end(seekable.length - 1));
+        }
+      }
+    }
+    /**
+     * Seek to the latest media position if this is a live video and the
+     * player and video are loaded and initialized.
+     */
+
+    setupFirstPlay() {
+      const media = this.mainPlaylistLoader_.media(); // Check that everything is ready to begin buffering for the first call to play
+      //  If 1) there is no active media
+      //     2) the player is paused
+      //     3) the first play has already been setup
+      // then exit early
+
+      if (!media || this.tech_.paused() || this.hasPlayed_) {
+        return false;
+      } // when the video is a live stream and/or has a start time
+
+      if (!media.endList || media.start) {
+        const seekable = this.seekable();
+        if (!seekable.length) {
+          // without a seekable range, the player cannot seek to begin buffering at the
+          // live or start point
+          return false;
+        }
+        const seekableEnd = seekable.end(0);
+        let startPoint = seekableEnd;
+        if (media.start) {
+          const offset = media.start.timeOffset;
+          if (offset < 0) {
+            startPoint = Math.max(seekableEnd + offset, seekable.start(0));
+          } else {
+            startPoint = Math.min(seekableEnd, offset);
+          }
+        } // trigger firstplay to inform the source handler to ignore the next seek event
+
+        this.trigger('firstplay'); // seek to the live point
+
+        this.tech_.setCurrentTime(startPoint);
+      }
+      this.hasPlayed_ = true; // we can begin loading now that everything is ready
+
+      this.load();
+      return true;
+    }
+    /**
+     * handle the sourceopen event on the MediaSource
+     *
+     * @private
+     */
+
+    handleSourceOpen_() {
+      // Only attempt to create the source buffer if none already exist.
+      // handleSourceOpen is also called when we are "re-opening" a source buffer
+      // after `endOfStream` has been called (in response to a seek for instance)
+      this.tryToCreateSourceBuffers_(); // if autoplay is enabled, begin playback. This is duplicative of
+      // code in video.js but is required because play() must be invoked
+      // *after* the media source has opened.
+
+      if (this.tech_.autoplay()) {
+        const playPromise = this.tech_.play(); // Catch/silence error when a pause interrupts a play request
+        // on browsers which return a promise
+
+        if (typeof playPromise !== 'undefined' && typeof playPromise.then === 'function') {
+          playPromise.then(null, e => {});
+        }
+      }
+      this.trigger('sourceopen');
+    }
+    /**
+     * handle the sourceended event on the MediaSource
+     *
+     * @private
+     */
+
+    handleSourceEnded_() {
+      if (!this.inbandTextTracks_.metadataTrack_) {
+        return;
+      }
+      const cues = this.inbandTextTracks_.metadataTrack_.cues;
+      if (!cues || !cues.length) {
+        return;
+      }
+      const duration = this.duration();
+      cues[cues.length - 1].endTime = isNaN(duration) || Math.abs(duration) === Infinity ? Number.MAX_VALUE : duration;
+    }
+    /**
+     * handle the durationchange event on the MediaSource
+     *
+     * @private
+     */
+
+    handleDurationChange_() {
+      this.tech_.trigger('durationchange');
+    }
+    /**
+     * Calls endOfStream on the media source when all active stream types have called
+     * endOfStream
+     *
+     * @param {string} streamType
+     *        Stream type of the segment loader that called endOfStream
+     * @private
+     */
+
+    onEndOfStream() {
+      let isEndOfStream = this.mainSegmentLoader_.ended_;
+      if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+        const mainMediaInfo = this.mainSegmentLoader_.getCurrentMediaInfo_(); // if the audio playlist loader exists, then alternate audio is active
+
+        if (!mainMediaInfo || mainMediaInfo.hasVideo) {
+          // if we do not know if the main segment loader contains video yet or if we
+          // definitively know the main segment loader contains video, then we need to wait
+          // for both main and audio segment loaders to call endOfStream
+          isEndOfStream = isEndOfStream && this.audioSegmentLoader_.ended_;
+        } else {
+          // otherwise just rely on the audio loader
+          isEndOfStream = this.audioSegmentLoader_.ended_;
+        }
+      }
+      if (!isEndOfStream) {
+        return;
+      }
+      this.stopABRTimer_();
+      this.sourceUpdater_.endOfStream();
+    }
+    /**
+     * Check if a playlist has stopped being updated
+     *
+     * @param {Object} playlist the media playlist object
+     * @return {boolean} whether the playlist has stopped being updated or not
+     */
+
+    stuckAtPlaylistEnd_(playlist) {
+      const seekable = this.seekable();
+      if (!seekable.length) {
+        // playlist doesn't have enough information to determine whether we are stuck
+        return false;
+      }
+      const expired = this.syncController_.getExpiredTime(playlist, this.duration());
+      if (expired === null) {
+        return false;
+      } // does not use the safe live end to calculate playlist end, since we
+      // don't want to say we are stuck while there is still content
+
+      const absolutePlaylistEnd = Vhs$1.Playlist.playlistEnd(playlist, expired);
+      const currentTime = this.tech_.currentTime();
+      const buffered = this.tech_.buffered();
+      if (!buffered.length) {
+        // return true if the playhead reached the absolute end of the playlist
+        return absolutePlaylistEnd - currentTime <= SAFE_TIME_DELTA;
+      }
+      const bufferedEnd = buffered.end(buffered.length - 1); // return true if there is too little buffer left and buffer has reached absolute
+      // end of playlist
+
+      return bufferedEnd - currentTime <= SAFE_TIME_DELTA && absolutePlaylistEnd - bufferedEnd <= SAFE_TIME_DELTA;
+    }
+    /**
+     * Exclude a playlist for a set amount of time, making it unavailable for selection by
+     * the rendition selection algorithm, then force a new playlist (rendition) selection.
+     *
+     * @param {Object=} playlistToExclude
+     *                  the playlist to exclude, defaults to the currently selected playlist
+     * @param {Object=} error
+     *                  an optional error
+     * @param {number=} playlistExclusionDuration
+     *                  an optional number of seconds to exclude the playlist
+     */
+
+    excludePlaylist({
+      playlistToExclude = this.mainPlaylistLoader_.media(),
+      error = {},
+      playlistExclusionDuration
+    }) {
+      // If the `error` was generated by the playlist loader, it will contain
+      // the playlist we were trying to load (but failed) and that should be
+      // excluded instead of the currently selected playlist which is likely
+      // out-of-date in this scenario
+      playlistToExclude = playlistToExclude || this.mainPlaylistLoader_.media();
+      playlistExclusionDuration = playlistExclusionDuration || error.playlistExclusionDuration || this.playlistExclusionDuration; // If there is no current playlist, then an error occurred while we were
+      // trying to load the main OR while we were disposing of the tech
+
+      if (!playlistToExclude) {
+        this.error = error;
+        if (this.mediaSource.readyState !== 'open') {
+          this.trigger('error');
+        } else {
+          this.sourceUpdater_.endOfStream('network');
+        }
+        return;
+      }
+      playlistToExclude.playlistErrors_++;
+      const playlists = this.mainPlaylistLoader_.main.playlists;
+      const enabledPlaylists = playlists.filter(isEnabled);
+      const isFinalRendition = enabledPlaylists.length === 1 && enabledPlaylists[0] === playlistToExclude; // Don't exclude the only playlist unless it was excluded
+      // forever
+
+      if (playlists.length === 1 && playlistExclusionDuration !== Infinity) {
+        videojs.log.warn(`Problem encountered with playlist ${playlistToExclude.id}. ` + 'Trying again since it is the only playlist.');
+        this.tech_.trigger('retryplaylist'); // if this is a final rendition, we should delay
+
+        return this.mainPlaylistLoader_.load(isFinalRendition);
+      }
+      if (isFinalRendition) {
+        // If we're content steering, try other pathways.
+        if (this.main().contentSteering) {
+          const pathway = this.pathwayAttribute_(playlistToExclude); // Ignore at least 1 steering manifest refresh.
+
+          const reIncludeDelay = this.contentSteeringController_.steeringManifest.ttl * 1000;
+          this.contentSteeringController_.excludePathway(pathway);
+          this.excludeThenChangePathway_();
+          setTimeout(() => {
+            this.contentSteeringController_.addAvailablePathway(pathway);
+          }, reIncludeDelay);
+          return;
+        } // Since we're on the final non-excluded playlist, and we're about to exclude
+        // it, instead of erring the player or retrying this playlist, clear out the current
+        // exclusion list. This allows other playlists to be attempted in case any have been
+        // fixed.
+
+        let reincluded = false;
+        playlists.forEach(playlist => {
+          // skip current playlist which is about to be excluded
+          if (playlist === playlistToExclude) {
+            return;
+          }
+          const excludeUntil = playlist.excludeUntil; // a playlist cannot be reincluded if it wasn't excluded to begin with.
+
+          if (typeof excludeUntil !== 'undefined' && excludeUntil !== Infinity) {
+            reincluded = true;
+            delete playlist.excludeUntil;
+          }
+        });
+        if (reincluded) {
+          videojs.log.warn('Removing other playlists from the exclusion list because the last ' + 'rendition is about to be excluded.'); // Technically we are retrying a playlist, in that we are simply retrying a previous
+          // playlist. This is needed for users relying on the retryplaylist event to catch a
+          // case where the player might be stuck and looping through "dead" playlists.
+
+          this.tech_.trigger('retryplaylist');
+        }
+      } // Exclude this playlist
+
+      let excludeUntil;
+      if (playlistToExclude.playlistErrors_ > this.maxPlaylistRetries) {
+        excludeUntil = Infinity;
+      } else {
+        excludeUntil = Date.now() + playlistExclusionDuration * 1000;
+      }
+      playlistToExclude.excludeUntil = excludeUntil;
+      if (error.reason) {
+        playlistToExclude.lastExcludeReason_ = error.reason;
+      }
+      this.tech_.trigger('excludeplaylist');
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-rendition-excluded'
+      }); // TODO: only load a new playlist if we're excluding the current playlist
+      // If this function was called with a playlist that's not the current active playlist
+      // (e.g., media().id !== playlistToExclude.id),
+      // then a new playlist should not be selected and loaded, as there's nothing wrong with the current playlist.
+
+      const nextPlaylist = this.selectPlaylist();
+      if (!nextPlaylist) {
+        this.error = 'Playback cannot continue. No available working or supported playlists.';
+        this.trigger('error');
+        return;
+      }
+      const logFn = error.internal ? this.logger_ : videojs.log.warn;
+      const errorMessage = error.message ? ' ' + error.message : '';
+      logFn(`${error.internal ? 'Internal problem' : 'Problem'} encountered with playlist ${playlistToExclude.id}.` + `${errorMessage} Switching to playlist ${nextPlaylist.id}.`); // if audio group changed reset audio loaders
+
+      if (nextPlaylist.attributes.AUDIO !== playlistToExclude.attributes.AUDIO) {
+        this.delegateLoaders_('audio', ['abort', 'pause']);
+      } // if subtitle group changed reset subtitle loaders
+
+      if (nextPlaylist.attributes.SUBTITLES !== playlistToExclude.attributes.SUBTITLES) {
+        this.delegateLoaders_('subtitle', ['abort', 'pause']);
+      }
+      this.delegateLoaders_('main', ['abort', 'pause']);
+      const delayDuration = nextPlaylist.targetDuration / 2 * 1000 || 5 * 1000;
+      const shouldDelay = typeof nextPlaylist.lastRequest === 'number' && Date.now() - nextPlaylist.lastRequest <= delayDuration; // delay if it's a final rendition or if the last refresh is sooner than half targetDuration
+
+      return this.switchMedia_(nextPlaylist, 'exclude', isFinalRendition || shouldDelay);
+    }
+    /**
+     * Pause all segment/playlist loaders
+     */
+
+    pauseLoading() {
+      this.delegateLoaders_('all', ['abort', 'pause']);
+      this.stopABRTimer_();
+    }
+    /**
+     * Call a set of functions in order on playlist loaders, segment loaders,
+     * or both types of loaders.
+     *
+     * @param {string} filter
+     *        Filter loaders that should call fnNames using a string. Can be:
+     *        * all - run on all loaders
+     *        * audio - run on all audio loaders
+     *        * subtitle - run on all subtitle loaders
+     *        * main - run on the main loaders
+     *
+     * @param {Array|string} fnNames
+     *        A string or array of function names to call.
+     */
+
+    delegateLoaders_(filter, fnNames) {
+      const loaders = [];
+      const dontFilterPlaylist = filter === 'all';
+      if (dontFilterPlaylist || filter === 'main') {
+        loaders.push(this.mainPlaylistLoader_);
+      }
+      const mediaTypes = [];
+      if (dontFilterPlaylist || filter === 'audio') {
+        mediaTypes.push('AUDIO');
+      }
+      if (dontFilterPlaylist || filter === 'subtitle') {
+        mediaTypes.push('CLOSED-CAPTIONS');
+        mediaTypes.push('SUBTITLES');
+      }
+      mediaTypes.forEach(mediaType => {
+        const loader = this.mediaTypes_[mediaType] && this.mediaTypes_[mediaType].activePlaylistLoader;
+        if (loader) {
+          loaders.push(loader);
+        }
+      });
+      ['main', 'audio', 'subtitle'].forEach(name => {
+        const loader = this[`${name}SegmentLoader_`];
+        if (loader && (filter === name || filter === 'all')) {
+          loaders.push(loader);
+        }
+      });
+      loaders.forEach(loader => fnNames.forEach(fnName => {
+        if (typeof loader[fnName] === 'function') {
+          loader[fnName]();
+        }
+      }));
+    }
+    /**
+     * set the current time on all segment loaders
+     *
+     * @param {TimeRange} currentTime the current time to set
+     * @return {TimeRange} the current time
+     */
+
+    setCurrentTime(currentTime) {
+      const buffered = findRange(this.tech_.buffered(), currentTime);
+      if (!(this.mainPlaylistLoader_ && this.mainPlaylistLoader_.media())) {
+        // return immediately if the metadata is not ready yet
+        return 0;
+      } // it's clearly an edge-case but don't thrown an error if asked to
+      // seek within an empty playlist
+
+      if (!this.mainPlaylistLoader_.media().segments) {
+        return 0;
+      } // if the seek location is already buffered, continue buffering as usual
+
+      if (buffered && buffered.length) {
+        return currentTime;
+      } // cancel outstanding requests so we begin buffering at the new
+      // location
+
+      this.mainSegmentLoader_.pause();
+      this.mainSegmentLoader_.resetEverything();
+      if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+        this.audioSegmentLoader_.pause();
+        this.audioSegmentLoader_.resetEverything();
+      }
+      if (this.mediaTypes_.SUBTITLES.activePlaylistLoader) {
+        this.subtitleSegmentLoader_.pause();
+        this.subtitleSegmentLoader_.resetEverything();
+      } // start segment loader loading in case they are paused
+
+      this.load();
+    }
+    /**
+     * get the current duration
+     *
+     * @return {TimeRange} the duration
+     */
+
+    duration() {
+      if (!this.mainPlaylistLoader_) {
+        return 0;
+      }
+      const media = this.mainPlaylistLoader_.media();
+      if (!media) {
+        // no playlists loaded yet, so can't determine a duration
+        return 0;
+      } // Don't rely on the media source for duration in the case of a live playlist since
+      // setting the native MediaSource's duration to infinity ends up with consequences to
+      // seekable behavior. See https://github.com/w3c/media-source/issues/5 for details.
+      //
+      // This is resolved in the spec by https://github.com/w3c/media-source/pull/92,
+      // however, few browsers have support for setLiveSeekableRange()
+      // https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/setLiveSeekableRange
+      //
+      // Until a time when the duration of the media source can be set to infinity, and a
+      // seekable range specified across browsers, just return Infinity.
+
+      if (!media.endList) {
+        return Infinity;
+      } // Since this is a VOD video, it is safe to rely on the media source's duration (if
+      // available). If it's not available, fall back to a playlist-calculated estimate.
+
+      if (this.mediaSource) {
+        return this.mediaSource.duration;
+      }
+      return Vhs$1.Playlist.duration(media);
+    }
+    /**
+     * check the seekable range
+     *
+     * @return {TimeRange} the seekable range
+     */
+
+    seekable() {
+      return this.seekable_;
+    }
+    onSyncInfoUpdate_() {
+      let audioSeekable; // TODO check for creation of both source buffers before updating seekable
+      //
+      // A fix was made to this function where a check for
+      // this.sourceUpdater_.hasCreatedSourceBuffers
+      // was added to ensure that both source buffers were created before seekable was
+      // updated. However, it originally had a bug where it was checking for a true and
+      // returning early instead of checking for false. Setting it to check for false to
+      // return early though created other issues. A call to play() would check for seekable
+      // end without verifying that a seekable range was present. In addition, even checking
+      // for that didn't solve some issues, as handleFirstPlay is sometimes worked around
+      // due to a media update calling load on the segment loaders, skipping a seek to live,
+      // thereby starting live streams at the beginning of the stream rather than at the end.
+      //
+      // This conditional should be fixed to wait for the creation of two source buffers at
+      // the same time as the other sections of code are fixed to properly seek to live and
+      // not throw an error due to checking for a seekable end when no seekable range exists.
+      //
+      // For now, fall back to the older behavior, with the understanding that the seekable
+      // range may not be completely correct, leading to a suboptimal initial live point.
+
+      if (!this.mainPlaylistLoader_) {
+        return;
+      }
+      let media = this.mainPlaylistLoader_.media();
+      if (!media) {
+        return;
+      }
+      let expired = this.syncController_.getExpiredTime(media, this.duration());
+      if (expired === null) {
+        // not enough information to update seekable
+        return;
+      }
+      const main = this.mainPlaylistLoader_.main;
+      const mainSeekable = Vhs$1.Playlist.seekable(media, expired, Vhs$1.Playlist.liveEdgeDelay(main, media));
+      if (mainSeekable.length === 0) {
+        return;
+      }
+      if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+        media = this.mediaTypes_.AUDIO.activePlaylistLoader.media();
+        expired = this.syncController_.getExpiredTime(media, this.duration());
+        if (expired === null) {
+          return;
+        }
+        audioSeekable = Vhs$1.Playlist.seekable(media, expired, Vhs$1.Playlist.liveEdgeDelay(main, media));
+        if (audioSeekable.length === 0) {
+          return;
+        }
+      }
+      let oldEnd;
+      let oldStart;
+      if (this.seekable_ && this.seekable_.length) {
+        oldEnd = this.seekable_.end(0);
+        oldStart = this.seekable_.start(0);
+      }
+      if (!audioSeekable) {
+        // seekable has been calculated based on buffering video data so it
+        // can be returned directly
+        this.seekable_ = mainSeekable;
+      } else if (audioSeekable.start(0) > mainSeekable.end(0) || mainSeekable.start(0) > audioSeekable.end(0)) {
+        // seekables are pretty far off, rely on main
+        this.seekable_ = mainSeekable;
+      } else {
+        this.seekable_ = createTimeRanges([[audioSeekable.start(0) > mainSeekable.start(0) ? audioSeekable.start(0) : mainSeekable.start(0), audioSeekable.end(0) < mainSeekable.end(0) ? audioSeekable.end(0) : mainSeekable.end(0)]]);
+      } // seekable is the same as last time
+
+      if (this.seekable_ && this.seekable_.length) {
+        if (this.seekable_.end(0) === oldEnd && this.seekable_.start(0) === oldStart) {
+          return;
+        }
+      }
+      this.logger_(`seekable updated [${printableRange(this.seekable_)}]`);
+      this.tech_.trigger('seekablechanged');
+    }
+    /**
+     * Update the player duration
+     */
+
+    updateDuration(isLive) {
+      if (this.updateDuration_) {
+        this.mediaSource.removeEventListener('sourceopen', this.updateDuration_);
+        this.updateDuration_ = null;
+      }
+      if (this.mediaSource.readyState !== 'open') {
+        this.updateDuration_ = this.updateDuration.bind(this, isLive);
+        this.mediaSource.addEventListener('sourceopen', this.updateDuration_);
+        return;
+      }
+      if (isLive) {
+        const seekable = this.seekable();
+        if (!seekable.length) {
+          return;
+        } // Even in the case of a live playlist, the native MediaSource's duration should not
+        // be set to Infinity (even though this would be expected for a live playlist), since
+        // setting the native MediaSource's duration to infinity ends up with consequences to
+        // seekable behavior. See https://github.com/w3c/media-source/issues/5 for details.
+        //
+        // This is resolved in the spec by https://github.com/w3c/media-source/pull/92,
+        // however, few browsers have support for setLiveSeekableRange()
+        // https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/setLiveSeekableRange
+        //
+        // Until a time when the duration of the media source can be set to infinity, and a
+        // seekable range specified across browsers, the duration should be greater than or
+        // equal to the last possible seekable value.
+        // MediaSource duration starts as NaN
+        // It is possible (and probable) that this case will never be reached for many
+        // sources, since the MediaSource reports duration as the highest value without
+        // accounting for timestamp offset. For example, if the timestamp offset is -100 and
+        // we buffered times 0 to 100 with real times of 100 to 200, even though current
+        // time will be between 0 and 100, the native media source may report the duration
+        // as 200. However, since we report duration separate from the media source (as
+        // Infinity), and as long as the native media source duration value is greater than
+        // our reported seekable range, seeks will work as expected. The large number as
+        // duration for live is actually a strategy used by some players to work around the
+        // issue of live seekable ranges cited above.
+
+        if (isNaN(this.mediaSource.duration) || this.mediaSource.duration < seekable.end(seekable.length - 1)) {
+          this.sourceUpdater_.setDuration(seekable.end(seekable.length - 1));
+        }
+        return;
+      }
+      const buffered = this.tech_.buffered();
+      let duration = Vhs$1.Playlist.duration(this.mainPlaylistLoader_.media());
+      if (buffered.length > 0) {
+        duration = Math.max(duration, buffered.end(buffered.length - 1));
+      }
+      if (this.mediaSource.duration !== duration) {
+        this.sourceUpdater_.setDuration(duration);
+      }
+    }
+    /**
+     * dispose of the PlaylistController and everything
+     * that it controls
+     */
+
+    dispose() {
+      this.trigger('dispose');
+      this.decrypter_.terminate();
+      this.mainPlaylistLoader_.dispose();
+      this.mainSegmentLoader_.dispose();
+      this.contentSteeringController_.dispose();
+      this.keyStatusMap_.clear();
+      if (this.loadOnPlay_) {
+        this.tech_.off('play', this.loadOnPlay_);
+      }
+      ['AUDIO', 'SUBTITLES'].forEach(type => {
+        const groups = this.mediaTypes_[type].groups;
+        for (const id in groups) {
+          groups[id].forEach(group => {
+            if (group.playlistLoader) {
+              group.playlistLoader.dispose();
+            }
+          });
+        }
+      });
+      this.audioSegmentLoader_.dispose();
+      this.subtitleSegmentLoader_.dispose();
+      this.sourceUpdater_.dispose();
+      this.timelineChangeController_.dispose();
+      this.stopABRTimer_();
+      if (this.updateDuration_) {
+        this.mediaSource.removeEventListener('sourceopen', this.updateDuration_);
+      }
+      this.mediaSource.removeEventListener('durationchange', this.handleDurationChange_); // load the media source into the player
+
+      this.mediaSource.removeEventListener('sourceopen', this.handleSourceOpen_);
+      this.mediaSource.removeEventListener('sourceended', this.handleSourceEnded_);
+      this.off();
+    }
+    /**
+     * return the main playlist object if we have one
+     *
+     * @return {Object} the main playlist object that we parsed
+     */
+
+    main() {
+      return this.mainPlaylistLoader_.main;
+    }
+    /**
+     * return the currently selected playlist
+     *
+     * @return {Object} the currently selected playlist object that we parsed
+     */
+
+    media() {
+      // playlist loader will not return media if it has not been fully loaded
+      return this.mainPlaylistLoader_.media() || this.initialMedia_;
+    }
+    areMediaTypesKnown_() {
+      const usingAudioLoader = !!this.mediaTypes_.AUDIO.activePlaylistLoader;
+      const hasMainMediaInfo = !!this.mainSegmentLoader_.getCurrentMediaInfo_(); // if we are not using an audio loader, then we have audio media info
+      // otherwise check on the segment loader.
+
+      const hasAudioMediaInfo = !usingAudioLoader ? true : !!this.audioSegmentLoader_.getCurrentMediaInfo_(); // one or both loaders has not loaded sufficently to get codecs
+
+      if (!hasMainMediaInfo || !hasAudioMediaInfo) {
+        return false;
+      }
+      return true;
+    }
+    getCodecsOrExclude_() {
+      const media = {
+        main: this.mainSegmentLoader_.getCurrentMediaInfo_() || {},
+        audio: this.audioSegmentLoader_.getCurrentMediaInfo_() || {}
+      };
+      const playlist = this.mainSegmentLoader_.getPendingSegmentPlaylist() || this.media(); // set "main" media equal to video
+
+      media.video = media.main;
+      const playlistCodecs = codecsForPlaylist(this.main(), playlist);
+      const codecs = {};
+      const usingAudioLoader = !!this.mediaTypes_.AUDIO.activePlaylistLoader;
+      if (media.main.hasVideo) {
+        codecs.video = playlistCodecs.video || media.main.videoCodec || DEFAULT_VIDEO_CODEC;
+      }
+      if (media.main.isMuxed) {
+        codecs.video += `,${playlistCodecs.audio || media.main.audioCodec || DEFAULT_AUDIO_CODEC}`;
+      }
+      if (media.main.hasAudio && !media.main.isMuxed || media.audio.hasAudio || usingAudioLoader) {
+        codecs.audio = playlistCodecs.audio || media.main.audioCodec || media.audio.audioCodec || DEFAULT_AUDIO_CODEC; // set audio isFmp4 so we use the correct "supports" function below
+
+        media.audio.isFmp4 = media.main.hasAudio && !media.main.isMuxed ? media.main.isFmp4 : media.audio.isFmp4;
+      } // no codecs, no playback.
+
+      if (!codecs.audio && !codecs.video) {
+        this.excludePlaylist({
+          playlistToExclude: playlist,
+          error: {
+            message: 'Could not determine codecs for playlist.'
+          },
+          playlistExclusionDuration: Infinity
+        });
+        return;
+      } // fmp4 relies on browser support, while ts relies on muxer support
+
+      const supportFunction = (isFmp4, codec) => isFmp4 ? browserSupportsCodec(codec) : muxerSupportsCodec(codec);
+      const unsupportedCodecs = {};
+      let unsupportedAudio;
+      ['video', 'audio'].forEach(function (type) {
+        if (codecs.hasOwnProperty(type) && !supportFunction(media[type].isFmp4, codecs[type])) {
+          const supporter = media[type].isFmp4 ? 'browser' : 'muxer';
+          unsupportedCodecs[supporter] = unsupportedCodecs[supporter] || [];
+          unsupportedCodecs[supporter].push(codecs[type]);
+          if (type === 'audio') {
+            unsupportedAudio = supporter;
+          }
+        }
+      });
+      if (usingAudioLoader && unsupportedAudio && playlist.attributes.AUDIO) {
+        const audioGroup = playlist.attributes.AUDIO;
+        this.main().playlists.forEach(variant => {
+          const variantAudioGroup = variant.attributes && variant.attributes.AUDIO;
+          if (variantAudioGroup === audioGroup && variant !== playlist) {
+            variant.excludeUntil = Infinity;
+          }
+        });
+        this.logger_(`excluding audio group ${audioGroup} as ${unsupportedAudio} does not support codec(s): "${codecs.audio}"`);
+      } // if we have any unsupported codecs exclude this playlist.
+
+      if (Object.keys(unsupportedCodecs).length) {
+        const message = Object.keys(unsupportedCodecs).reduce((acc, supporter) => {
+          if (acc) {
+            acc += ', ';
+          }
+          acc += `${supporter} does not support codec(s): "${unsupportedCodecs[supporter].join(',')}"`;
+          return acc;
+        }, '') + '.';
+        this.excludePlaylist({
+          playlistToExclude: playlist,
+          error: {
+            internal: true,
+            message
+          },
+          playlistExclusionDuration: Infinity
+        });
+        return;
+      } // check if codec switching is happening
+
+      if (this.sourceUpdater_.hasCreatedSourceBuffers() && !this.sourceUpdater_.canChangeType()) {
+        const switchMessages = [];
+        ['video', 'audio'].forEach(type => {
+          const newCodec = (parseCodecs(this.sourceUpdater_.codecs[type] || '')[0] || {}).type;
+          const oldCodec = (parseCodecs(codecs[type] || '')[0] || {}).type;
+          if (newCodec && oldCodec && newCodec.toLowerCase() !== oldCodec.toLowerCase()) {
+            switchMessages.push(`"${this.sourceUpdater_.codecs[type]}" -> "${codecs[type]}"`);
+          }
+        });
+        if (switchMessages.length) {
+          this.excludePlaylist({
+            playlistToExclude: playlist,
+            error: {
+              message: `Codec switching not supported: ${switchMessages.join(', ')}.`,
+              internal: true
+            },
+            playlistExclusionDuration: Infinity
+          });
+          return;
+        }
+      } // TODO: when using the muxer shouldn't we just return
+      // the codecs that the muxer outputs?
+
+      return codecs;
+    }
+    /**
+     * Create source buffers and exlude any incompatible renditions.
+     *
+     * @private
+     */
+
+    tryToCreateSourceBuffers_() {
+      // media source is not ready yet or sourceBuffers are already
+      // created.
+      if (this.mediaSource.readyState !== 'open' || this.sourceUpdater_.hasCreatedSourceBuffers()) {
+        return;
+      }
+      if (!this.areMediaTypesKnown_()) {
+        return;
+      }
+      const codecs = this.getCodecsOrExclude_(); // no codecs means that the playlist was excluded
+
+      if (!codecs) {
+        return;
+      }
+      this.sourceUpdater_.createSourceBuffers(codecs);
+      const codecString = [codecs.video, codecs.audio].filter(Boolean).join(',');
+      this.excludeIncompatibleVariants_(codecString);
+    }
+    /**
+     * Excludes playlists with codecs that are unsupported by the muxer and browser.
+     */
+
+    excludeUnsupportedVariants_() {
+      const playlists = this.main().playlists;
+      const ids = []; // TODO: why don't we have a property to loop through all
+      // playlist? Why did we ever mix indexes and keys?
+
+      Object.keys(playlists).forEach(key => {
+        const variant = playlists[key]; // check if we already processed this playlist.
+
+        if (ids.indexOf(variant.id) !== -1) {
+          return;
+        }
+        ids.push(variant.id);
+        const codecs = codecsForPlaylist(this.main, variant);
+        const unsupported = [];
+        if (codecs.audio && !muxerSupportsCodec(codecs.audio) && !browserSupportsCodec(codecs.audio)) {
+          unsupported.push(`audio codec ${codecs.audio}`);
+        }
+        if (codecs.video && !muxerSupportsCodec(codecs.video) && !browserSupportsCodec(codecs.video)) {
+          unsupported.push(`video codec ${codecs.video}`);
+        }
+        if (codecs.text && codecs.text === 'stpp.ttml.im1t') {
+          unsupported.push(`text codec ${codecs.text}`);
+        }
+        if (unsupported.length) {
+          variant.excludeUntil = Infinity;
+          this.logger_(`excluding ${variant.id} for unsupported: ${unsupported.join(', ')}`);
+        }
+      });
+    }
+    /**
+     * Exclude playlists that are known to be codec or
+     * stream-incompatible with the SourceBuffer configuration. For
+     * instance, Media Source Extensions would cause the video element to
+     * stall waiting for video data if you switched from a variant with
+     * video and audio to an audio-only one.
+     *
+     * @param {Object} media a media playlist compatible with the current
+     * set of SourceBuffers. Variants in the current main playlist that
+     * do not appear to have compatible codec or stream configurations
+     * will be excluded from the default playlist selection algorithm
+     * indefinitely.
+     * @private
+     */
+
+    excludeIncompatibleVariants_(codecString) {
+      const ids = [];
+      const playlists = this.main().playlists;
+      const codecs = unwrapCodecList(parseCodecs(codecString));
+      const codecCount_ = codecCount(codecs);
+      const videoDetails = codecs.video && parseCodecs(codecs.video)[0] || null;
+      const audioDetails = codecs.audio && parseCodecs(codecs.audio)[0] || null;
+      Object.keys(playlists).forEach(key => {
+        const variant = playlists[key]; // check if we already processed this playlist.
+        // or it if it is already excluded forever.
+
+        if (ids.indexOf(variant.id) !== -1 || variant.excludeUntil === Infinity) {
+          return;
+        }
+        ids.push(variant.id);
+        const exclusionReasons = []; // get codecs from the playlist for this variant
+
+        const variantCodecs = codecsForPlaylist(this.mainPlaylistLoader_.main, variant);
+        const variantCodecCount = codecCount(variantCodecs); // if no codecs are listed, we cannot determine that this
+        // variant is incompatible. Wait for mux.js to probe
+
+        if (!variantCodecs.audio && !variantCodecs.video) {
+          return;
+        } // TODO: we can support this by removing the
+        // old media source and creating a new one, but it will take some work.
+        // The number of streams cannot change
+
+        if (variantCodecCount !== codecCount_) {
+          exclusionReasons.push(`codec count "${variantCodecCount}" !== "${codecCount_}"`);
+        } // only exclude playlists by codec change, if codecs cannot switch
+        // during playback.
+
+        if (!this.sourceUpdater_.canChangeType()) {
+          const variantVideoDetails = variantCodecs.video && parseCodecs(variantCodecs.video)[0] || null;
+          const variantAudioDetails = variantCodecs.audio && parseCodecs(variantCodecs.audio)[0] || null; // the video codec cannot change
+
+          if (variantVideoDetails && videoDetails && variantVideoDetails.type.toLowerCase() !== videoDetails.type.toLowerCase()) {
+            exclusionReasons.push(`video codec "${variantVideoDetails.type}" !== "${videoDetails.type}"`);
+          } // the audio codec cannot change
+
+          if (variantAudioDetails && audioDetails && variantAudioDetails.type.toLowerCase() !== audioDetails.type.toLowerCase()) {
+            exclusionReasons.push(`audio codec "${variantAudioDetails.type}" !== "${audioDetails.type}"`);
+          }
+        }
+        if (exclusionReasons.length) {
+          variant.excludeUntil = Infinity;
+          this.logger_(`excluding ${variant.id}: ${exclusionReasons.join(' && ')}`);
+        }
+      });
+    }
+    updateAdCues_(media) {
+      let offset = 0;
+      const seekable = this.seekable();
+      if (seekable.length) {
+        offset = seekable.start(0);
+      }
+      updateAdCues(media, this.cueTagsTrack_, offset);
+    }
+    /**
+     * Calculates the desired forward buffer length based on current time
+     *
+     * @return {number} Desired forward buffer length in seconds
+     */
+
+    goalBufferLength() {
+      const currentTime = this.tech_.currentTime();
+      const initial = Config.GOAL_BUFFER_LENGTH;
+      const rate = Config.GOAL_BUFFER_LENGTH_RATE;
+      const max = Math.max(initial, Config.MAX_GOAL_BUFFER_LENGTH);
+      return Math.min(initial + currentTime * rate, max);
+    }
+    /**
+     * Calculates the desired buffer low water line based on current time
+     *
+     * @return {number} Desired buffer low water line in seconds
+     */
+
+    bufferLowWaterLine() {
+      const currentTime = this.tech_.currentTime();
+      const initial = Config.BUFFER_LOW_WATER_LINE;
+      const rate = Config.BUFFER_LOW_WATER_LINE_RATE;
+      const max = Math.max(initial, Config.MAX_BUFFER_LOW_WATER_LINE);
+      const newMax = Math.max(initial, Config.EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE);
+      return Math.min(initial + currentTime * rate, this.bufferBasedABR ? newMax : max);
+    }
+    bufferHighWaterLine() {
+      return Config.BUFFER_HIGH_WATER_LINE;
+    }
+    addDateRangesToTextTrack_(dateRanges) {
+      createMetadataTrackIfNotExists(this.inbandTextTracks_, 'com.apple.streaming', this.tech_);
+      addDateRangeMetadata({
+        inbandTextTracks: this.inbandTextTracks_,
+        dateRanges
+      });
+    }
+    addMetadataToTextTrack(dispatchType, metadataArray, videoDuration) {
+      const timestampOffset = this.sourceUpdater_.videoBuffer ? this.sourceUpdater_.videoTimestampOffset() : this.sourceUpdater_.audioTimestampOffset(); // There's potentially an issue where we could double add metadata if there's a muxed
+      // audio/video source with a metadata track, and an alt audio with a metadata track.
+      // However, this probably won't happen, and if it does it can be handled then.
+
+      createMetadataTrackIfNotExists(this.inbandTextTracks_, dispatchType, this.tech_);
+      addMetadata({
+        inbandTextTracks: this.inbandTextTracks_,
+        metadataArray,
+        timestampOffset,
+        videoDuration
+      });
+    }
+    /**
+     * Utility for getting the pathway or service location from an HLS or DASH playlist.
+     *
+     * @param {Object} playlist for getting pathway from.
+     * @return the pathway attribute of a playlist
+     */
+
+    pathwayAttribute_(playlist) {
+      return playlist.attributes['PATHWAY-ID'] || playlist.attributes.serviceLocation;
+    }
+    /**
+     * Initialize available pathways and apply the tag properties.
+     */
+
+    initContentSteeringController_() {
+      const main = this.main();
+      if (!main.contentSteering) {
+        return;
+      }
+      for (const playlist of main.playlists) {
+        this.contentSteeringController_.addAvailablePathway(this.pathwayAttribute_(playlist));
+      }
+      this.contentSteeringController_.assignTagProperties(main.uri, main.contentSteering); // request the steering manifest immediately if queryBeforeStart is set.
+
+      if (this.contentSteeringController_.queryBeforeStart) {
+        // When queryBeforeStart is true, initial request should omit steering parameters.
+        this.contentSteeringController_.requestSteeringManifest(true);
+        return;
+      } // otherwise start content steering after playback starts
+
+      this.tech_.one('canplay', () => {
+        this.contentSteeringController_.requestSteeringManifest();
+      });
+    }
+    /**
+     * Reset the content steering controller and re-init.
+     */
+
+    resetContentSteeringController_() {
+      this.contentSteeringController_.clearAvailablePathways();
+      this.contentSteeringController_.dispose();
+      this.initContentSteeringController_();
+    }
+    /**
+     * Attaches the listeners for content steering.
+     */
+
+    attachContentSteeringListeners_() {
+      this.contentSteeringController_.on('content-steering', this.excludeThenChangePathway_.bind(this));
+      if (this.sourceType_ === 'dash') {
+        this.mainPlaylistLoader_.on('loadedplaylist', () => {
+          const main = this.main(); // check if steering tag or pathways changed.
+
+          const didDashTagChange = this.contentSteeringController_.didDASHTagChange(main.uri, main.contentSteering);
+          const didPathwaysChange = () => {
+            const availablePathways = this.contentSteeringController_.getAvailablePathways();
+            const newPathways = [];
+            for (const playlist of main.playlists) {
+              const serviceLocation = playlist.attributes.serviceLocation;
+              if (serviceLocation) {
+                newPathways.push(serviceLocation);
+                if (!availablePathways.has(serviceLocation)) {
+                  return true;
+                }
+              }
+            } // If we have no new serviceLocations and previously had availablePathways
+
+            if (!newPathways.length && availablePathways.size) {
+              return true;
+            }
+            return false;
+          };
+          if (didDashTagChange || didPathwaysChange()) {
+            this.resetContentSteeringController_();
+          }
+        });
+      }
+    }
+    /**
+     * Simple exclude and change playlist logic for content steering.
+     */
+
+    excludeThenChangePathway_() {
+      const currentPathway = this.contentSteeringController_.getPathway();
+      if (!currentPathway) {
+        return;
+      }
+      this.handlePathwayClones_();
+      const main = this.main();
+      const playlists = main.playlists;
+      const ids = new Set();
+      let didEnablePlaylists = false;
+      Object.keys(playlists).forEach(key => {
+        const variant = playlists[key];
+        const pathwayId = this.pathwayAttribute_(variant);
+        const differentPathwayId = pathwayId && currentPathway !== pathwayId;
+        const steeringExclusion = variant.excludeUntil === Infinity && variant.lastExcludeReason_ === 'content-steering';
+        if (steeringExclusion && !differentPathwayId) {
+          delete variant.excludeUntil;
+          delete variant.lastExcludeReason_;
+          didEnablePlaylists = true;
+        }
+        const noExcludeUntil = !variant.excludeUntil && variant.excludeUntil !== Infinity;
+        const shouldExclude = !ids.has(variant.id) && differentPathwayId && noExcludeUntil;
+        if (!shouldExclude) {
+          return;
+        }
+        ids.add(variant.id);
+        variant.excludeUntil = Infinity;
+        variant.lastExcludeReason_ = 'content-steering'; // TODO: kind of spammy, maybe move this.
+
+        this.logger_(`excluding ${variant.id} for ${variant.lastExcludeReason_}`);
+      });
+      if (this.contentSteeringController_.manifestType_ === 'DASH') {
+        Object.keys(this.mediaTypes_).forEach(key => {
+          const type = this.mediaTypes_[key];
+          if (type.activePlaylistLoader) {
+            const currentPlaylist = type.activePlaylistLoader.media_; // Check if the current media playlist matches the current CDN
+
+            if (currentPlaylist && currentPlaylist.attributes.serviceLocation !== currentPathway) {
+              didEnablePlaylists = true;
+            }
+          }
+        });
+      }
+      if (didEnablePlaylists) {
+        this.changeSegmentPathway_();
+      }
+    }
+    /**
+     * Add, update, or delete playlists and media groups for
+     * the pathway clones for HLS Content Steering.
+     *
+     * See https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/
+     *
+     * NOTE: Pathway cloning does not currently support the `PER_VARIANT_URIS` and
+     * `PER_RENDITION_URIS` as we do not handle `STABLE-VARIANT-ID` or
+     * `STABLE-RENDITION-ID` values.
+     */
+
+    handlePathwayClones_() {
+      const main = this.main();
+      const playlists = main.playlists;
+      const currentPathwayClones = this.contentSteeringController_.currentPathwayClones;
+      const nextPathwayClones = this.contentSteeringController_.nextPathwayClones;
+      const hasClones = currentPathwayClones && currentPathwayClones.size || nextPathwayClones && nextPathwayClones.size;
+      if (!hasClones) {
+        return;
+      }
+      for (const [id, clone] of currentPathwayClones.entries()) {
+        const newClone = nextPathwayClones.get(id); // Delete the old pathway clone.
+
+        if (!newClone) {
+          this.mainPlaylistLoader_.updateOrDeleteClone(clone);
+          this.contentSteeringController_.excludePathway(id);
+        }
+      }
+      for (const [id, clone] of nextPathwayClones.entries()) {
+        const oldClone = currentPathwayClones.get(id); // Create a new pathway if it is a new pathway clone object.
+
+        if (!oldClone) {
+          const playlistsToClone = playlists.filter(p => {
+            return p.attributes['PATHWAY-ID'] === clone['BASE-ID'];
+          });
+          playlistsToClone.forEach(p => {
+            this.mainPlaylistLoader_.addClonePathway(clone, p);
+          });
+          this.contentSteeringController_.addAvailablePathway(id);
+          continue;
+        } // There have not been changes to the pathway clone object, so skip.
+
+        if (this.equalPathwayClones_(oldClone, clone)) {
+          continue;
+        } // Update a preexisting cloned pathway.
+        // True is set for the update flag.
+
+        this.mainPlaylistLoader_.updateOrDeleteClone(clone, true);
+        this.contentSteeringController_.addAvailablePathway(id);
+      } // Deep copy contents of next to current pathways.
+
+      this.contentSteeringController_.currentPathwayClones = new Map(JSON.parse(JSON.stringify([...nextPathwayClones])));
+    }
+    /**
+     * Determines whether two pathway clone objects are equivalent.
+     *
+     * @param {Object} a The first pathway clone object.
+     * @param {Object} b The second pathway clone object.
+     * @return {boolean} True if the pathway clone objects are equal, false otherwise.
+     */
+
+    equalPathwayClones_(a, b) {
+      if (a['BASE-ID'] !== b['BASE-ID'] || a.ID !== b.ID || a['URI-REPLACEMENT'].HOST !== b['URI-REPLACEMENT'].HOST) {
+        return false;
+      }
+      const aParams = a['URI-REPLACEMENT'].PARAMS;
+      const bParams = b['URI-REPLACEMENT'].PARAMS; // We need to iterate through both lists of params because one could be
+      // missing a parameter that the other has.
+
+      for (const p in aParams) {
+        if (aParams[p] !== bParams[p]) {
+          return false;
+        }
+      }
+      for (const p in bParams) {
+        if (aParams[p] !== bParams[p]) {
+          return false;
+        }
+      }
+      return true;
+    }
+    /**
+     * Changes the current playlists for audio, video and subtitles after a new pathway
+     * is chosen from content steering.
+     */
+
+    changeSegmentPathway_() {
+      const nextPlaylist = this.selectPlaylist();
+      this.pauseLoading(); // Switch audio and text track playlists if necessary in DASH
+
+      if (this.contentSteeringController_.manifestType_ === 'DASH') {
+        this.switchMediaForDASHContentSteering_();
+      }
+      this.switchMedia_(nextPlaylist, 'content-steering');
+    }
+    /**
+     * Iterates through playlists and check their keyId set and compare with the
+     * keyStatusMap, only enable playlists that have a usable key. If the playlist
+     * has no keyId leave it enabled by default.
+     */
+
+    excludeNonUsablePlaylistsByKeyId_() {
+      if (!this.mainPlaylistLoader_ || !this.mainPlaylistLoader_.main) {
+        return;
+      }
+      let nonUsableKeyStatusCount = 0;
+      const NON_USABLE = 'non-usable';
+      this.mainPlaylistLoader_.main.playlists.forEach(playlist => {
+        const keyIdSet = this.mainPlaylistLoader_.getKeyIdSet(playlist); // If the playlist doesn't have keyIDs lets not exclude it.
+
+        if (!keyIdSet || !keyIdSet.size) {
+          return;
+        }
+        keyIdSet.forEach(key => {
+          const USABLE = 'usable';
+          const hasUsableKeyStatus = this.keyStatusMap_.has(key) && this.keyStatusMap_.get(key) === USABLE;
+          const nonUsableExclusion = playlist.lastExcludeReason_ === NON_USABLE && playlist.excludeUntil === Infinity;
+          if (!hasUsableKeyStatus) {
+            // Only exclude playlists that haven't already been excluded as non-usable.
+            if (playlist.excludeUntil !== Infinity && playlist.lastExcludeReason_ !== NON_USABLE) {
+              playlist.excludeUntil = Infinity;
+              playlist.lastExcludeReason_ = NON_USABLE;
+              this.logger_(`excluding playlist ${playlist.id} because the key ID ${key} doesn't exist in the keyStatusMap or is not ${USABLE}`);
+            } // count all nonUsableKeyStatus
+
+            nonUsableKeyStatusCount++;
+          } else if (hasUsableKeyStatus && nonUsableExclusion) {
+            delete playlist.excludeUntil;
+            delete playlist.lastExcludeReason_;
+            this.logger_(`enabling playlist ${playlist.id} because key ID ${key} is ${USABLE}`);
+          }
+        });
+      }); // If for whatever reason every playlist has a non usable key status. Lets try re-including the SD renditions as a failsafe.
+
+      if (nonUsableKeyStatusCount >= this.mainPlaylistLoader_.main.playlists.length) {
+        this.mainPlaylistLoader_.main.playlists.forEach(playlist => {
+          const isNonHD = playlist && playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.height < 720;
+          const excludedForNonUsableKey = playlist.excludeUntil === Infinity && playlist.lastExcludeReason_ === NON_USABLE;
+          if (isNonHD && excludedForNonUsableKey) {
+            // Only delete the excludeUntil so we don't try and re-exclude these playlists.
+            delete playlist.excludeUntil;
+            videojs.log.warn(`enabling non-HD playlist ${playlist.id} because all playlists were excluded due to ${NON_USABLE} key IDs`);
+          }
+        });
+      }
+    }
+    /**
+     * Adds a keystatus to the keystatus map, tries to convert to string if necessary.
+     *
+     * @param {any} keyId the keyId to add a status for
+     * @param {string} status the status of the keyId
+     */
+
+    addKeyStatus_(keyId, status) {
+      const isString = typeof keyId === 'string';
+      const keyIdHexString = isString ? keyId : bufferToHexString(keyId);
+      const formattedKeyIdString = keyIdHexString.slice(0, 32).toLowerCase();
+      this.logger_(`KeyStatus '${status}' with key ID ${formattedKeyIdString} added to the keyStatusMap`);
+      this.keyStatusMap_.set(formattedKeyIdString, status);
+    }
+    /**
+     * Utility function for adding key status to the keyStatusMap and filtering usable encrypted playlists.
+     *
+     * @param {any} keyId the keyId from the keystatuschange event
+     * @param {string} status the key status string
+     */
+
+    updatePlaylistByKeyStatus(keyId, status) {
+      this.addKeyStatus_(keyId, status);
+      if (!this.waitingForFastQualityPlaylistReceived_) {
+        this.excludeNonUsableThenChangePlaylist_();
+      } // Listen to loadedplaylist with a single listener and check for new contentProtection elements when a playlist is updated.
+
+      this.mainPlaylistLoader_.off('loadedplaylist', this.excludeNonUsableThenChangePlaylist_.bind(this));
+      this.mainPlaylistLoader_.on('loadedplaylist', this.excludeNonUsableThenChangePlaylist_.bind(this));
+    }
+    excludeNonUsableThenChangePlaylist_() {
+      this.excludeNonUsablePlaylistsByKeyId_();
+      this.fastQualityChange_();
+    }
+  }
+
+  /**
+   * Returns a function that acts as the Enable/disable playlist function.
+   *
+   * @param {PlaylistLoader} loader - The main playlist loader
+   * @param {string} playlistID - id of the playlist
+   * @param {Function} changePlaylistFn - A function to be called after a
+   * playlist's enabled-state has been changed. Will NOT be called if a
+   * playlist's enabled-state is unchanged
+   * @param {boolean=} enable - Value to set the playlist enabled-state to
+   * or if undefined returns the current enabled-state for the playlist
+   * @return {Function} Function for setting/getting enabled
+   */
+
+  const enableFunction = (loader, playlistID, changePlaylistFn) => enable => {
+    const playlist = loader.main.playlists[playlistID];
+    const incompatible = isIncompatible(playlist);
+    const currentlyEnabled = isEnabled(playlist);
+    if (typeof enable === 'undefined') {
+      return currentlyEnabled;
+    }
+    if (enable) {
+      delete playlist.disabled;
+    } else {
+      playlist.disabled = true;
+    }
+    if (enable !== currentlyEnabled && !incompatible) {
+      // Ensure the outside world knows about our changes
+      changePlaylistFn(playlist);
+      if (enable) {
+        loader.trigger('renditionenabled');
+      } else {
+        loader.trigger('renditiondisabled');
+      }
+    }
+    return enable;
+  };
+  /**
+   * The representation object encapsulates the publicly visible information
+   * in a media playlist along with a setter/getter-type function (enabled)
+   * for changing the enabled-state of a particular playlist entry
+   *
+   * @class Representation
+   */
+
+  class Representation {
+    constructor(vhsHandler, playlist, id) {
+      const {
+        playlistController_: pc
+      } = vhsHandler;
+      const qualityChangeFunction = pc.fastQualityChange_.bind(pc); // some playlist attributes are optional
+
+      if (playlist.attributes) {
+        const resolution = playlist.attributes.RESOLUTION;
+        this.width = resolution && resolution.width;
+        this.height = resolution && resolution.height;
+        this.bandwidth = playlist.attributes.BANDWIDTH;
+        this.frameRate = playlist.attributes['FRAME-RATE'];
+      }
+      this.codecs = codecsForPlaylist(pc.main(), playlist);
+      this.playlist = playlist; // The id is simply the ordinality of the media playlist
+      // within the main playlist
+
+      this.id = id; // Partially-apply the enableFunction to create a playlist-
+      // specific variant
+
+      this.enabled = enableFunction(vhsHandler.playlists, playlist.id, qualityChangeFunction);
+    }
+  }
+  /**
+   * A mixin function that adds the `representations` api to an instance
+   * of the VhsHandler class
+   *
+   * @param {VhsHandler} vhsHandler - An instance of VhsHandler to add the
+   * representation API into
+   */
+
+  const renditionSelectionMixin = function (vhsHandler) {
+    // Add a single API-specific function to the VhsHandler instance
+    vhsHandler.representations = () => {
+      const main = vhsHandler.playlistController_.main();
+      const playlists = isAudioOnly(main) ? vhsHandler.playlistController_.getAudioTrackPlaylists_() : main.playlists;
+      if (!playlists) {
+        return [];
+      }
+      return playlists.filter(media => !isIncompatible(media)).map((e, i) => new Representation(vhsHandler, e, e.id));
+    };
+  };
+
+  /**
+   * @file playback-watcher.js
+   *
+   * Playback starts, and now my watch begins. It shall not end until my death. I shall
+   * take no wait, hold no uncleared timeouts, father no bad seeks. I shall wear no crowns
+   * and win no glory. I shall live and die at my post. I am the corrector of the underflow.
+   * I am the watcher of gaps. I am the shield that guards the realms of seekable. I pledge
+   * my life and honor to the Playback Watch, for this Player and all the Players to come.
+   */
+
+  const timerCancelEvents = ['seeking', 'seeked', 'pause', 'playing', 'error'];
+  /**
+   * @class PlaybackWatcher
+   */
+
+  class PlaybackWatcher {
+    /**
+     * Represents an PlaybackWatcher object.
+     *
+     * @class
+     * @param {Object} options an object that includes the tech and settings
+     */
+    constructor(options) {
+      this.playlistController_ = options.playlistController;
+      this.tech_ = options.tech;
+      this.seekable = options.seekable;
+      this.allowSeeksWithinUnsafeLiveWindow = options.allowSeeksWithinUnsafeLiveWindow;
+      this.liveRangeSafeTimeDelta = options.liveRangeSafeTimeDelta;
+      this.media = options.media;
+      this.consecutiveUpdates = 0;
+      this.lastRecordedTime = null;
+      this.checkCurrentTimeTimeout_ = null;
+      this.logger_ = logger('PlaybackWatcher');
+      this.logger_('initialize');
+      const playHandler = () => this.monitorCurrentTime_();
+      const canPlayHandler = () => this.monitorCurrentTime_();
+      const waitingHandler = () => this.techWaiting_();
+      const cancelTimerHandler = () => this.resetTimeUpdate_();
+      const pc = this.playlistController_;
+      const loaderTypes = ['main', 'subtitle', 'audio'];
+      const loaderChecks = {};
+      loaderTypes.forEach(type => {
+        loaderChecks[type] = {
+          reset: () => this.resetSegmentDownloads_(type),
+          updateend: () => this.checkSegmentDownloads_(type)
+        };
+        pc[`${type}SegmentLoader_`].on('appendsdone', loaderChecks[type].updateend); // If a rendition switch happens during a playback stall where the buffer
+        // isn't changing we want to reset. We cannot assume that the new rendition
+        // will also be stalled, until after new appends.
+
+        pc[`${type}SegmentLoader_`].on('playlistupdate', loaderChecks[type].reset); // Playback stalls should not be detected right after seeking.
+        // This prevents one segment playlists (single vtt or single segment content)
+        // from being detected as stalling. As the buffer will not change in those cases, since
+        // the buffer is the entire video duration.
+
+        this.tech_.on(['seeked', 'seeking'], loaderChecks[type].reset);
+      });
+      /**
+       * We check if a seek was into a gap through the following steps:
+       * 1. We get a seeking event and we do not get a seeked event. This means that
+       *    a seek was attempted but not completed.
+       * 2. We run `fixesBadSeeks_` on segment loader appends. This means that we already
+       *    removed everything from our buffer and appended a segment, and should be ready
+       *    to check for gaps.
+       */
+
+      const setSeekingHandlers = fn => {
+        ['main', 'audio'].forEach(type => {
+          pc[`${type}SegmentLoader_`][fn]('appended', this.seekingAppendCheck_);
+        });
+      };
+      this.seekingAppendCheck_ = () => {
+        if (this.fixesBadSeeks_()) {
+          this.consecutiveUpdates = 0;
+          this.lastRecordedTime = this.tech_.currentTime();
+          setSeekingHandlers('off');
+        }
+      };
+      this.clearSeekingAppendCheck_ = () => setSeekingHandlers('off');
+      this.watchForBadSeeking_ = () => {
+        this.clearSeekingAppendCheck_();
+        setSeekingHandlers('on');
+      };
+      this.tech_.on('seeked', this.clearSeekingAppendCheck_);
+      this.tech_.on('seeking', this.watchForBadSeeking_);
+      this.tech_.on('waiting', waitingHandler);
+      this.tech_.on(timerCancelEvents, cancelTimerHandler);
+      this.tech_.on('canplay', canPlayHandler);
+      /*
+        An edge case exists that results in gaps not being skipped when they exist at the beginning of a stream. This case
+        is surfaced in one of two ways:
+         1)  The `waiting` event is fired before the player has buffered content, making it impossible
+            to find or skip the gap. The `waiting` event is followed by a `play` event. On first play
+            we can check if playback is stalled due to a gap, and skip the gap if necessary.
+        2)  A source with a gap at the beginning of the stream is loaded programatically while the player
+            is in a playing state. To catch this case, it's important that our one-time play listener is setup
+            even if the player is in a playing state
+      */
+
+      this.tech_.one('play', playHandler); // Define the dispose function to clean up our events
+
+      this.dispose = () => {
+        this.clearSeekingAppendCheck_();
+        this.logger_('dispose');
+        this.tech_.off('waiting', waitingHandler);
+        this.tech_.off(timerCancelEvents, cancelTimerHandler);
+        this.tech_.off('canplay', canPlayHandler);
+        this.tech_.off('play', playHandler);
+        this.tech_.off('seeking', this.watchForBadSeeking_);
+        this.tech_.off('seeked', this.clearSeekingAppendCheck_);
+        loaderTypes.forEach(type => {
+          pc[`${type}SegmentLoader_`].off('appendsdone', loaderChecks[type].updateend);
+          pc[`${type}SegmentLoader_`].off('playlistupdate', loaderChecks[type].reset);
+          this.tech_.off(['seeked', 'seeking'], loaderChecks[type].reset);
+        });
+        if (this.checkCurrentTimeTimeout_) {
+          window.clearTimeout(this.checkCurrentTimeTimeout_);
+        }
+        this.resetTimeUpdate_();
+      };
+    }
+    /**
+     * Periodically check current time to see if playback stopped
+     *
+     * @private
+     */
+
+    monitorCurrentTime_() {
+      this.checkCurrentTime_();
+      if (this.checkCurrentTimeTimeout_) {
+        window.clearTimeout(this.checkCurrentTimeTimeout_);
+      } // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
+
+      this.checkCurrentTimeTimeout_ = window.setTimeout(this.monitorCurrentTime_.bind(this), 250);
+    }
+    /**
+     * Reset stalled download stats for a specific type of loader
+     *
+     * @param {string} type
+     *        The segment loader type to check.
+     *
+     * @listens SegmentLoader#playlistupdate
+     * @listens Tech#seeking
+     * @listens Tech#seeked
+     */
+
+    resetSegmentDownloads_(type) {
+      const loader = this.playlistController_[`${type}SegmentLoader_`];
+      if (this[`${type}StalledDownloads_`] > 0) {
+        this.logger_(`resetting possible stalled download count for ${type} loader`);
+      }
+      this[`${type}StalledDownloads_`] = 0;
+      this[`${type}Buffered_`] = loader.buffered_();
+    }
+    /**
+     * Checks on every segment `appendsdone` to see
+     * if segment appends are making progress. If they are not
+     * and we are still downloading bytes. We exclude the playlist.
+     *
+     * @param {string} type
+     *        The segment loader type to check.
+     *
+     * @listens SegmentLoader#appendsdone
+     */
+
+    checkSegmentDownloads_(type) {
+      const pc = this.playlistController_;
+      const loader = pc[`${type}SegmentLoader_`];
+      const buffered = loader.buffered_();
+      const isBufferedDifferent = isRangeDifferent(this[`${type}Buffered_`], buffered);
+      this[`${type}Buffered_`] = buffered; // if another watcher is going to fix the issue or
+      // the buffered value for this loader changed
+      // appends are working
+
+      if (isBufferedDifferent) {
+        this.resetSegmentDownloads_(type);
+        return;
+      }
+      this[`${type}StalledDownloads_`]++;
+      this.logger_(`found #${this[`${type}StalledDownloads_`]} ${type} appends that did not increase buffer (possible stalled download)`, {
+        playlistId: loader.playlist_ && loader.playlist_.id,
+        buffered: timeRangesToArray(buffered)
+      }); // after 10 possibly stalled appends with no reset, exclude
+
+      if (this[`${type}StalledDownloads_`] < 10) {
+        return;
+      }
+      this.logger_(`${type} loader stalled download exclusion`);
+      this.resetSegmentDownloads_(type);
+      this.tech_.trigger({
+        type: 'usage',
+        name: `vhs-${type}-download-exclusion`
+      });
+      if (type === 'subtitle') {
+        return;
+      } // TODO: should we exclude audio tracks rather than main tracks
+      // when type is audio?
+
+      pc.excludePlaylist({
+        error: {
+          message: `Excessive ${type} segment downloading detected.`
+        },
+        playlistExclusionDuration: Infinity
+      });
+    }
+    /**
+     * The purpose of this function is to emulate the "waiting" event on
+     * browsers that do not emit it when they are waiting for more
+     * data to continue playback
+     *
+     * @private
+     */
+
+    checkCurrentTime_() {
+      if (this.tech_.paused() || this.tech_.seeking()) {
+        return;
+      }
+      const currentTime = this.tech_.currentTime();
+      const buffered = this.tech_.buffered();
+      if (this.lastRecordedTime === currentTime && (!buffered.length || currentTime + SAFE_TIME_DELTA >= buffered.end(buffered.length - 1))) {
+        // If current time is at the end of the final buffered region, then any playback
+        // stall is most likely caused by buffering in a low bandwidth environment. The tech
+        // should fire a `waiting` event in this scenario, but due to browser and tech
+        // inconsistencies. Calling `techWaiting_` here allows us to simulate
+        // responding to a native `waiting` event when the tech fails to emit one.
+        return this.techWaiting_();
+      }
+      if (this.consecutiveUpdates >= 5 && currentTime === this.lastRecordedTime) {
+        this.consecutiveUpdates++;
+        this.waiting_();
+      } else if (currentTime === this.lastRecordedTime) {
+        this.consecutiveUpdates++;
+      } else {
+        this.consecutiveUpdates = 0;
+        this.lastRecordedTime = currentTime;
+      }
+    }
+    /**
+     * Resets the 'timeupdate' mechanism designed to detect that we are stalled
+     *
+     * @private
+     */
+
+    resetTimeUpdate_() {
+      this.consecutiveUpdates = 0;
+    }
+    /**
+     * Fixes situations where there's a bad seek
+     *
+     * @return {boolean} whether an action was taken to fix the seek
+     * @private
+     */
+
+    fixesBadSeeks_() {
+      const seeking = this.tech_.seeking();
+      if (!seeking) {
+        return false;
+      } // TODO: It's possible that these seekable checks should be moved out of this function
+      // and into a function that runs on seekablechange. It's also possible that we only need
+      // afterSeekableWindow as the buffered check at the bottom is good enough to handle before
+      // seekable range.
+
+      const seekable = this.seekable();
+      const currentTime = this.tech_.currentTime();
+      const isAfterSeekableRange = this.afterSeekableWindow_(seekable, currentTime, this.media(), this.allowSeeksWithinUnsafeLiveWindow);
+      let seekTo;
+      if (isAfterSeekableRange) {
+        const seekableEnd = seekable.end(seekable.length - 1); // sync to live point (if VOD, our seekable was updated and we're simply adjusting)
+
+        seekTo = seekableEnd;
+      }
+      if (this.beforeSeekableWindow_(seekable, currentTime)) {
+        const seekableStart = seekable.start(0); // sync to the beginning of the live window
+        // provide a buffer of .1 seconds to handle rounding/imprecise numbers
+
+        seekTo = seekableStart + (
+        // if the playlist is too short and the seekable range is an exact time (can
+        // happen in live with a 3 segment playlist), then don't use a time delta
+        seekableStart === seekable.end(0) ? 0 : SAFE_TIME_DELTA);
+      }
+      if (typeof seekTo !== 'undefined') {
+        this.logger_(`Trying to seek outside of seekable at time ${currentTime} with ` + `seekable range ${printableRange(seekable)}. Seeking to ` + `${seekTo}.`);
+        this.tech_.setCurrentTime(seekTo);
+        return true;
+      }
+      const sourceUpdater = this.playlistController_.sourceUpdater_;
+      const buffered = this.tech_.buffered();
+      const audioBuffered = sourceUpdater.audioBuffer ? sourceUpdater.audioBuffered() : null;
+      const videoBuffered = sourceUpdater.videoBuffer ? sourceUpdater.videoBuffered() : null;
+      const media = this.media(); // verify that at least two segment durations or one part duration have been
+      // appended before checking for a gap.
+
+      const minAppendedDuration = media.partTargetDuration ? media.partTargetDuration : (media.targetDuration - TIME_FUDGE_FACTOR) * 2; // verify that at least two segment durations have been
+      // appended before checking for a gap.
+
+      const bufferedToCheck = [audioBuffered, videoBuffered];
+      for (let i = 0; i < bufferedToCheck.length; i++) {
+        // skip null buffered
+        if (!bufferedToCheck[i]) {
+          continue;
+        }
+        const timeAhead = timeAheadOf(bufferedToCheck[i], currentTime); // if we are less than two video/audio segment durations or one part
+        // duration behind we haven't appended enough to call this a bad seek.
+
+        if (timeAhead < minAppendedDuration) {
+          return false;
+        }
+      }
+      const nextRange = findNextRange(buffered, currentTime); // we have appended enough content, but we don't have anything buffered
+      // to seek over the gap
+
+      if (nextRange.length === 0) {
+        return false;
+      }
+      seekTo = nextRange.start(0) + SAFE_TIME_DELTA;
+      this.logger_(`Buffered region starts (${nextRange.start(0)}) ` + ` just beyond seek point (${currentTime}). Seeking to ${seekTo}.`);
+      this.tech_.setCurrentTime(seekTo);
+      return true;
+    }
+    /**
+     * Handler for situations when we determine the player is waiting.
+     *
+     * @private
+     */
+
+    waiting_() {
+      if (this.techWaiting_()) {
+        return;
+      } // All tech waiting checks failed. Use last resort correction
+
+      const currentTime = this.tech_.currentTime();
+      const buffered = this.tech_.buffered();
+      const currentRange = findRange(buffered, currentTime); // Sometimes the player can stall for unknown reasons within a contiguous buffered
+      // region with no indication that anything is amiss (seen in Firefox). Seeking to
+      // currentTime is usually enough to kickstart the player. This checks that the player
+      // is currently within a buffered region before attempting a corrective seek.
+      // Chrome does not appear to continue `timeupdate` events after a `waiting` event
+      // until there is ~ 3 seconds of forward buffer available. PlaybackWatcher should also
+      // make sure there is ~3 seconds of forward buffer before taking any corrective action
+      // to avoid triggering an `unknownwaiting` event when the network is slow.
+
+      if (currentRange.length && currentTime + 3 <= currentRange.end(0)) {
+        this.resetTimeUpdate_();
+        this.tech_.setCurrentTime(currentTime);
+        this.logger_(`Stopped at ${currentTime} while inside a buffered region ` + `[${currentRange.start(0)} -> ${currentRange.end(0)}]. Attempting to resume ` + 'playback by seeking to the current time.'); // unknown waiting corrections may be useful for monitoring QoS
+
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-unknown-waiting'
+        });
+        return;
+      }
+    }
+    /**
+     * Handler for situations when the tech fires a `waiting` event
+     *
+     * @return {boolean}
+     *         True if an action (or none) was needed to correct the waiting. False if no
+     *         checks passed
+     * @private
+     */
+
+    techWaiting_() {
+      const seekable = this.seekable();
+      const currentTime = this.tech_.currentTime();
+      if (this.tech_.seeking()) {
+        // Tech is seeking or already waiting on another action, no action needed
+        return true;
+      }
+      if (this.beforeSeekableWindow_(seekable, currentTime)) {
+        const livePoint = seekable.end(seekable.length - 1);
+        this.logger_(`Fell out of live window at time ${currentTime}. Seeking to ` + `live point (seekable end) ${livePoint}`);
+        this.resetTimeUpdate_();
+        this.tech_.setCurrentTime(livePoint); // live window resyncs may be useful for monitoring QoS
+
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-live-resync'
+        });
+        return true;
+      }
+      const sourceUpdater = this.tech_.vhs.playlistController_.sourceUpdater_;
+      const buffered = this.tech_.buffered();
+      const videoUnderflow = this.videoUnderflow_({
+        audioBuffered: sourceUpdater.audioBuffered(),
+        videoBuffered: sourceUpdater.videoBuffered(),
+        currentTime
+      });
+      if (videoUnderflow) {
+        // Even though the video underflowed and was stuck in a gap, the audio overplayed
+        // the gap, leading currentTime into a buffered range. Seeking to currentTime
+        // allows the video to catch up to the audio position without losing any audio
+        // (only suffering ~3 seconds of frozen video and a pause in audio playback).
+        this.resetTimeUpdate_();
+        this.tech_.setCurrentTime(currentTime); // video underflow may be useful for monitoring QoS
+
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-video-underflow'
+        });
+        return true;
+      }
+      const nextRange = findNextRange(buffered, currentTime); // check for gap
+
+      if (nextRange.length > 0) {
+        this.logger_(`Stopped at ${currentTime} and seeking to ${nextRange.start(0)}`);
+        this.resetTimeUpdate_();
+        this.skipTheGap_(currentTime);
+        return true;
+      } // All checks failed. Returning false to indicate failure to correct waiting
+
+      return false;
+    }
+    afterSeekableWindow_(seekable, currentTime, playlist, allowSeeksWithinUnsafeLiveWindow = false) {
+      if (!seekable.length) {
+        // we can't make a solid case if there's no seekable, default to false
+        return false;
+      }
+      let allowedEnd = seekable.end(seekable.length - 1) + SAFE_TIME_DELTA;
+      const isLive = !playlist.endList;
+      const isLLHLS = typeof playlist.partTargetDuration === 'number';
+      if (isLive && (isLLHLS || allowSeeksWithinUnsafeLiveWindow)) {
+        allowedEnd = seekable.end(seekable.length - 1) + playlist.targetDuration * 3;
+      }
+      if (currentTime > allowedEnd) {
+        return true;
+      }
+      return false;
+    }
+    beforeSeekableWindow_(seekable, currentTime) {
+      if (seekable.length &&
+      // can't fall before 0 and 0 seekable start identifies VOD stream
+      seekable.start(0) > 0 && currentTime < seekable.start(0) - this.liveRangeSafeTimeDelta) {
+        return true;
+      }
+      return false;
+    }
+    videoUnderflow_({
+      videoBuffered,
+      audioBuffered,
+      currentTime
+    }) {
+      // audio only content will not have video underflow :)
+      if (!videoBuffered) {
+        return;
+      }
+      let gap; // find a gap in demuxed content.
+
+      if (videoBuffered.length && audioBuffered.length) {
+        // in Chrome audio will continue to play for ~3s when we run out of video
+        // so we have to check that the video buffer did have some buffer in the
+        // past.
+        const lastVideoRange = findRange(videoBuffered, currentTime - 3);
+        const videoRange = findRange(videoBuffered, currentTime);
+        const audioRange = findRange(audioBuffered, currentTime);
+        if (audioRange.length && !videoRange.length && lastVideoRange.length) {
+          gap = {
+            start: lastVideoRange.end(0),
+            end: audioRange.end(0)
+          };
+        } // find a gap in muxed content.
+      } else {
+        const nextRange = findNextRange(videoBuffered, currentTime); // Even if there is no available next range, there is still a possibility we are
+        // stuck in a gap due to video underflow.
+
+        if (!nextRange.length) {
+          gap = this.gapFromVideoUnderflow_(videoBuffered, currentTime);
+        }
+      }
+      if (gap) {
+        this.logger_(`Encountered a gap in video from ${gap.start} to ${gap.end}. ` + `Seeking to current time ${currentTime}`);
+        return true;
+      }
+      return false;
+    }
+    /**
+     * Timer callback. If playback still has not proceeded, then we seek
+     * to the start of the next buffered region.
+     *
+     * @private
+     */
+
+    skipTheGap_(scheduledCurrentTime) {
+      const buffered = this.tech_.buffered();
+      const currentTime = this.tech_.currentTime();
+      const nextRange = findNextRange(buffered, currentTime);
+      this.resetTimeUpdate_();
+      if (nextRange.length === 0 || currentTime !== scheduledCurrentTime) {
+        return;
+      }
+      this.logger_('skipTheGap_:', 'currentTime:', currentTime, 'scheduled currentTime:', scheduledCurrentTime, 'nextRange start:', nextRange.start(0)); // only seek if we still have not played
+
+      this.tech_.setCurrentTime(nextRange.start(0) + TIME_FUDGE_FACTOR);
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-gap-skip'
+      });
+    }
+    gapFromVideoUnderflow_(buffered, currentTime) {
+      // At least in Chrome, if there is a gap in the video buffer, the audio will continue
+      // playing for ~3 seconds after the video gap starts. This is done to account for
+      // video buffer underflow/underrun (note that this is not done when there is audio
+      // buffer underflow/underrun -- in that case the video will stop as soon as it
+      // encounters the gap, as audio stalls are more noticeable/jarring to a user than
+      // video stalls). The player's time will reflect the playthrough of audio, so the
+      // time will appear as if we are in a buffered region, even if we are stuck in a
+      // "gap."
+      //
+      // Example:
+      // video buffer:   0 => 10.1, 10.2 => 20
+      // audio buffer:   0 => 20
+      // overall buffer: 0 => 10.1, 10.2 => 20
+      // current time: 13
+      //
+      // Chrome's video froze at 10 seconds, where the video buffer encountered the gap,
+      // however, the audio continued playing until it reached ~3 seconds past the gap
+      // (13 seconds), at which point it stops as well. Since current time is past the
+      // gap, findNextRange will return no ranges.
+      //
+      // To check for this issue, we see if there is a gap that starts somewhere within
+      // a 3 second range (3 seconds +/- 1 second) back from our current time.
+      const gaps = findGaps(buffered);
+      for (let i = 0; i < gaps.length; i++) {
+        const start = gaps.start(i);
+        const end = gaps.end(i); // gap is starts no more than 4 seconds back
+
+        if (currentTime - start < 4 && currentTime - start > 2) {
+          return {
+            start,
+            end
+          };
+        }
+      }
+      return null;
+    }
+  }
+  const defaultOptions = {
+    errorInterval: 30,
+    getSource(next) {
+      const tech = this.tech({
+        IWillNotUseThisInPlugins: true
+      });
+      const sourceObj = tech.currentSource_ || this.currentSource();
+      return next(sourceObj);
+    }
+  };
+  /**
+   * Main entry point for the plugin
+   *
+   * @param {Player} player a reference to a videojs Player instance
+   * @param {Object} [options] an object with plugin options
+   * @private
+   */
+
+  const initPlugin = function (player, options) {
+    let lastCalled = 0;
+    let seekTo = 0;
+    const localOptions = merge(defaultOptions, options);
+    player.ready(() => {
+      player.trigger({
+        type: 'usage',
+        name: 'vhs-error-reload-initialized'
+      });
+    });
+    /**
+     * Player modifications to perform that must wait until `loadedmetadata`
+     * has been triggered
+     *
+     * @private
+     */
+
+    const loadedMetadataHandler = function () {
+      if (seekTo) {
+        player.currentTime(seekTo);
+      }
+    };
+    /**
+     * Set the source on the player element, play, and seek if necessary
+     *
+     * @param {Object} sourceObj An object specifying the source url and mime-type to play
+     * @private
+     */
+
+    const setSource = function (sourceObj) {
+      if (sourceObj === null || sourceObj === undefined) {
+        return;
+      }
+      seekTo = player.duration() !== Infinity && player.currentTime() || 0;
+      player.one('loadedmetadata', loadedMetadataHandler);
+      player.src(sourceObj);
+      player.trigger({
+        type: 'usage',
+        name: 'vhs-error-reload'
+      });
+      player.play();
+    };
+    /**
+     * Attempt to get a source from either the built-in getSource function
+     * or a custom function provided via the options
+     *
+     * @private
+     */
+
+    const errorHandler = function () {
+      // Do not attempt to reload the source if a source-reload occurred before
+      // 'errorInterval' time has elapsed since the last source-reload
+      if (Date.now() - lastCalled < localOptions.errorInterval * 1000) {
+        player.trigger({
+          type: 'usage',
+          name: 'vhs-error-reload-canceled'
+        });
+        return;
+      }
+      if (!localOptions.getSource || typeof localOptions.getSource !== 'function') {
+        videojs.log.error('ERROR: reloadSourceOnError - The option getSource must be a function!');
+        return;
+      }
+      lastCalled = Date.now();
+      return localOptions.getSource.call(player, setSource);
+    };
+    /**
+     * Unbind any event handlers that were bound by the plugin
+     *
+     * @private
+     */
+
+    const cleanupEvents = function () {
+      player.off('loadedmetadata', loadedMetadataHandler);
+      player.off('error', errorHandler);
+      player.off('dispose', cleanupEvents);
+    };
+    /**
+     * Cleanup before re-initializing the plugin
+     *
+     * @param {Object} [newOptions] an object with plugin options
+     * @private
+     */
+
+    const reinitPlugin = function (newOptions) {
+      cleanupEvents();
+      initPlugin(player, newOptions);
+    };
+    player.on('error', errorHandler);
+    player.on('dispose', cleanupEvents); // Overwrite the plugin function so that we can correctly cleanup before
+    // initializing the plugin
+
+    player.reloadSourceOnError = reinitPlugin;
+  };
+  /**
+   * Reload the source when an error is detected as long as there
+   * wasn't an error previously within the last 30 seconds
+   *
+   * @param {Object} [options] an object with plugin options
+   */
+
+  const reloadSourceOnError = function (options) {
+    initPlugin(this, options);
+  };
+  var version$4 = "3.12.1";
+  var version$3 = "7.0.3";
+  var version$2 = "1.3.0";
+  var version$1 = "7.1.0";
+  var version = "4.0.1";
+
+  /**
+   * @file videojs-http-streaming.js
+   *
+   * The main file for the VHS project.
+   * License: https://github.com/videojs/videojs-http-streaming/blob/main/LICENSE
+   */
+  const Vhs = {
+    PlaylistLoader,
+    Playlist,
+    utils,
+    STANDARD_PLAYLIST_SELECTOR: lastBandwidthSelector,
+    INITIAL_PLAYLIST_SELECTOR: lowestBitrateCompatibleVariantSelector,
+    lastBandwidthSelector,
+    movingAverageBandwidthSelector,
+    comparePlaylistBandwidth,
+    comparePlaylistResolution,
+    xhr: xhrFactory()
+  }; // Define getter/setters for config properties
+
+  Object.keys(Config).forEach(prop => {
+    Object.defineProperty(Vhs, prop, {
+      get() {
+        videojs.log.warn(`using Vhs.${prop} is UNSAFE be sure you know what you are doing`);
+        return Config[prop];
+      },
+      set(value) {
+        videojs.log.warn(`using Vhs.${prop} is UNSAFE be sure you know what you are doing`);
+        if (typeof value !== 'number' || value < 0) {
+          videojs.log.warn(`value of Vhs.${prop} must be greater than or equal to 0`);
+          return;
+        }
+        Config[prop] = value;
+      }
+    });
+  });
+  const LOCAL_STORAGE_KEY = 'videojs-vhs';
+  /**
+   * Updates the selectedIndex of the QualityLevelList when a mediachange happens in vhs.
+   *
+   * @param {QualityLevelList} qualityLevels The QualityLevelList to update.
+   * @param {PlaylistLoader} playlistLoader PlaylistLoader containing the new media info.
+   * @function handleVhsMediaChange
+   */
+
+  const handleVhsMediaChange = function (qualityLevels, playlistLoader) {
+    const newPlaylist = playlistLoader.media();
+    let selectedIndex = -1;
+    for (let i = 0; i < qualityLevels.length; i++) {
+      if (qualityLevels[i].id === newPlaylist.id) {
+        selectedIndex = i;
+        break;
+      }
+    }
+    qualityLevels.selectedIndex_ = selectedIndex;
+    qualityLevels.trigger({
+      selectedIndex,
+      type: 'change'
+    });
+  };
+  /**
+   * Adds quality levels to list once playlist metadata is available
+   *
+   * @param {QualityLevelList} qualityLevels The QualityLevelList to attach events to.
+   * @param {Object} vhs Vhs object to listen to for media events.
+   * @function handleVhsLoadedMetadata
+   */
+
+  const handleVhsLoadedMetadata = function (qualityLevels, vhs) {
+    vhs.representations().forEach(rep => {
+      qualityLevels.addQualityLevel(rep);
+    });
+    handleVhsMediaChange(qualityLevels, vhs.playlists);
+  }; // VHS is a source handler, not a tech. Make sure attempts to use it
+  // as one do not cause exceptions.
+
+  Vhs.canPlaySource = function () {
+    return videojs.log.warn('VHS is no longer a tech. Please remove it from ' + 'your player\'s techOrder.');
+  };
+  const emeKeySystems = (keySystemOptions, mainPlaylist, audioPlaylist) => {
+    if (!keySystemOptions) {
+      return keySystemOptions;
+    }
+    let codecs = {};
+    if (mainPlaylist && mainPlaylist.attributes && mainPlaylist.attributes.CODECS) {
+      codecs = unwrapCodecList(parseCodecs(mainPlaylist.attributes.CODECS));
+    }
+    if (audioPlaylist && audioPlaylist.attributes && audioPlaylist.attributes.CODECS) {
+      codecs.audio = audioPlaylist.attributes.CODECS;
+    }
+    const videoContentType = getMimeForCodec(codecs.video);
+    const audioContentType = getMimeForCodec(codecs.audio); // upsert the content types based on the selected playlist
+
+    const keySystemContentTypes = {};
+    for (const keySystem in keySystemOptions) {
+      keySystemContentTypes[keySystem] = {};
+      if (audioContentType) {
+        keySystemContentTypes[keySystem].audioContentType = audioContentType;
+      }
+      if (videoContentType) {
+        keySystemContentTypes[keySystem].videoContentType = videoContentType;
+      } // Default to using the video playlist's PSSH even though they may be different, as
+      // videojs-contrib-eme will only accept one in the options.
+      //
+      // This shouldn't be an issue for most cases as early intialization will handle all
+      // unique PSSH values, and if they aren't, then encrypted events should have the
+      // specific information needed for the unique license.
+
+      if (mainPlaylist.contentProtection && mainPlaylist.contentProtection[keySystem] && mainPlaylist.contentProtection[keySystem].pssh) {
+        keySystemContentTypes[keySystem].pssh = mainPlaylist.contentProtection[keySystem].pssh;
+      } // videojs-contrib-eme accepts the option of specifying: 'com.some.cdm': 'url'
+      // so we need to prevent overwriting the URL entirely
+
+      if (typeof keySystemOptions[keySystem] === 'string') {
+        keySystemContentTypes[keySystem].url = keySystemOptions[keySystem];
+      }
+    }
+    return merge(keySystemOptions, keySystemContentTypes);
+  };
+  /**
+   * @typedef {Object} KeySystems
+   *
+   * keySystems configuration for https://github.com/videojs/videojs-contrib-eme
+   * Note: not all options are listed here.
+   *
+   * @property {Uint8Array} [pssh]
+   *           Protection System Specific Header
+   */
+
+  /**
+   * Goes through all the playlists and collects an array of KeySystems options objects
+   * containing each playlist's keySystems and their pssh values, if available.
+   *
+   * @param {Object[]} playlists
+   *        The playlists to look through
+   * @param {string[]} keySystems
+   *        The keySystems to collect pssh values for
+   *
+   * @return {KeySystems[]}
+   *         An array of KeySystems objects containing available key systems and their
+   *         pssh values
+   */
+
+  const getAllPsshKeySystemsOptions = (playlists, keySystems) => {
+    return playlists.reduce((keySystemsArr, playlist) => {
+      if (!playlist.contentProtection) {
+        return keySystemsArr;
+      }
+      const keySystemsOptions = keySystems.reduce((keySystemsObj, keySystem) => {
+        const keySystemOptions = playlist.contentProtection[keySystem];
+        if (keySystemOptions && keySystemOptions.pssh) {
+          keySystemsObj[keySystem] = {
+            pssh: keySystemOptions.pssh
+          };
+        }
+        return keySystemsObj;
+      }, {});
+      if (Object.keys(keySystemsOptions).length) {
+        keySystemsArr.push(keySystemsOptions);
+      }
+      return keySystemsArr;
+    }, []);
+  };
+  /**
+   * Returns a promise that waits for the
+   * [eme plugin](https://github.com/videojs/videojs-contrib-eme) to create a key session.
+   *
+   * Works around https://bugs.chromium.org/p/chromium/issues/detail?id=895449 in non-IE11
+   * browsers.
+   *
+   * As per the above ticket, this is particularly important for Chrome, where, if
+   * unencrypted content is appended before encrypted content and the key session has not
+   * been created, a MEDIA_ERR_DECODE will be thrown once the encrypted content is reached
+   * during playback.
+   *
+   * @param {Object} player
+   *        The player instance
+   * @param {Object[]} sourceKeySystems
+   *        The key systems options from the player source
+   * @param {Object} [audioMedia]
+   *        The active audio media playlist (optional)
+   * @param {Object[]} mainPlaylists
+   *        The playlists found on the main playlist object
+   *
+   * @return {Object}
+   *         Promise that resolves when the key session has been created
+   */
+
+  const waitForKeySessionCreation = ({
+    player,
+    sourceKeySystems,
+    audioMedia,
+    mainPlaylists
+  }) => {
+    if (!player.eme.initializeMediaKeys) {
+      return Promise.resolve();
+    } // TODO should all audio PSSH values be initialized for DRM?
+    //
+    // All unique video rendition pssh values are initialized for DRM, but here only
+    // the initial audio playlist license is initialized. In theory, an encrypted
+    // event should be fired if the user switches to an alternative audio playlist
+    // where a license is required, but this case hasn't yet been tested. In addition, there
+    // may be many alternate audio playlists unlikely to be used (e.g., multiple different
+    // languages).
+
+    const playlists = audioMedia ? mainPlaylists.concat([audioMedia]) : mainPlaylists;
+    const keySystemsOptionsArr = getAllPsshKeySystemsOptions(playlists, Object.keys(sourceKeySystems));
+    const initializationFinishedPromises = [];
+    const keySessionCreatedPromises = []; // Since PSSH values are interpreted as initData, EME will dedupe any duplicates. The
+    // only place where it should not be deduped is for ms-prefixed APIs, but
+    // the existence of modern EME APIs in addition to
+    // ms-prefixed APIs on Edge should prevent this from being a concern.
+    // initializeMediaKeys also won't use the webkit-prefixed APIs.
+
+    keySystemsOptionsArr.forEach(keySystemsOptions => {
+      keySessionCreatedPromises.push(new Promise((resolve, reject) => {
+        player.tech_.one('keysessioncreated', resolve);
+      }));
+      initializationFinishedPromises.push(new Promise((resolve, reject) => {
+        player.eme.initializeMediaKeys({
+          keySystems: keySystemsOptions
+        }, err => {
+          if (err) {
+            reject(err);
+            return;
+          }
+          resolve();
+        });
+      }));
+    }); // The reasons Promise.race is chosen over Promise.any:
+    //
+    // * Promise.any is only available in Safari 14+.
+    // * None of these promises are expected to reject. If they do reject, it might be
+    //   better here for the race to surface the rejection, rather than mask it by using
+    //   Promise.any.
+
+    return Promise.race([
+    // If a session was previously created, these will all finish resolving without
+    // creating a new session, otherwise it will take until the end of all license
+    // requests, which is why the key session check is used (to make setup much faster).
+    Promise.all(initializationFinishedPromises),
+    // Once a single session is created, the browser knows DRM will be used.
+    Promise.race(keySessionCreatedPromises)]);
+  };
+  /**
+   * If the [eme](https://github.com/videojs/videojs-contrib-eme) plugin is available, and
+   * there are keySystems on the source, sets up source options to prepare the source for
+   * eme.
+   *
+   * @param {Object} player
+   *        The player instance
+   * @param {Object[]} sourceKeySystems
+   *        The key systems options from the player source
+   * @param {Object} media
+   *        The active media playlist
+   * @param {Object} [audioMedia]
+   *        The active audio media playlist (optional)
+   *
+   * @return {boolean}
+   *         Whether or not options were configured and EME is available
+   */
+
+  const setupEmeOptions = ({
+    player,
+    sourceKeySystems,
+    media,
+    audioMedia
+  }) => {
+    const sourceOptions = emeKeySystems(sourceKeySystems, media, audioMedia);
+    if (!sourceOptions) {
+      return false;
+    }
+    player.currentSource().keySystems = sourceOptions; // eme handles the rest of the setup, so if it is missing
+    // do nothing.
+
+    if (sourceOptions && !player.eme) {
+      videojs.log.warn('DRM encrypted source cannot be decrypted without a DRM plugin');
+      return false;
+    }
+    return true;
+  };
+  const getVhsLocalStorage = () => {
+    if (!window.localStorage) {
+      return null;
+    }
+    const storedObject = window.localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (!storedObject) {
+      return null;
+    }
+    try {
+      return JSON.parse(storedObject);
+    } catch (e) {
+      // someone may have tampered with the value
+      return null;
+    }
+  };
+  const updateVhsLocalStorage = options => {
+    if (!window.localStorage) {
+      return false;
+    }
+    let objectToStore = getVhsLocalStorage();
+    objectToStore = objectToStore ? merge(objectToStore, options) : options;
+    try {
+      window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(objectToStore));
+    } catch (e) {
+      // Throws if storage is full (e.g., always on iOS 5+ Safari private mode, where
+      // storage is set to 0).
+      // https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem#Exceptions
+      // No need to perform any operation.
+      return false;
+    }
+    return objectToStore;
+  };
+  /**
+   * Parses VHS-supported media types from data URIs. See
+   * https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
+   * for information on data URIs.
+   *
+   * @param {string} dataUri
+   *        The data URI
+   *
+   * @return {string|Object}
+   *         The parsed object/string, or the original string if no supported media type
+   *         was found
+   */
+
+  const expandDataUri = dataUri => {
+    if (dataUri.toLowerCase().indexOf('data:application/vnd.videojs.vhs+json,') === 0) {
+      return JSON.parse(dataUri.substring(dataUri.indexOf(',') + 1));
+    } // no known case for this data URI, return the string as-is
+
+    return dataUri;
+  };
+  /**
+   * Adds a request hook to an xhr object
+   *
+   * @param {Object} xhr object to add the onRequest hook to
+   * @param {function} callback hook function for an xhr request
+   */
+
+  const addOnRequestHook = (xhr, callback) => {
+    if (!xhr._requestCallbackSet) {
+      xhr._requestCallbackSet = new Set();
+    }
+    xhr._requestCallbackSet.add(callback);
+  };
+  /**
+   * Adds a response hook to an xhr object
+   *
+   * @param {Object} xhr object to add the onResponse hook to
+   * @param {function} callback hook function for an xhr response
+   */
+
+  const addOnResponseHook = (xhr, callback) => {
+    if (!xhr._responseCallbackSet) {
+      xhr._responseCallbackSet = new Set();
+    }
+    xhr._responseCallbackSet.add(callback);
+  };
+  /**
+   * Removes a request hook on an xhr object, deletes the onRequest set if empty.
+   *
+   * @param {Object} xhr object to remove the onRequest hook from
+   * @param {function} callback hook function to remove
+   */
+
+  const removeOnRequestHook = (xhr, callback) => {
+    if (!xhr._requestCallbackSet) {
+      return;
+    }
+    xhr._requestCallbackSet.delete(callback);
+    if (!xhr._requestCallbackSet.size) {
+      delete xhr._requestCallbackSet;
+    }
+  };
+  /**
+   * Removes a response hook on an xhr object, deletes the onResponse set if empty.
+   *
+   * @param {Object} xhr object to remove the onResponse hook from
+   * @param {function} callback hook function to remove
+   */
+
+  const removeOnResponseHook = (xhr, callback) => {
+    if (!xhr._responseCallbackSet) {
+      return;
+    }
+    xhr._responseCallbackSet.delete(callback);
+    if (!xhr._responseCallbackSet.size) {
+      delete xhr._responseCallbackSet;
+    }
+  };
+  /**
+   * Whether the browser has built-in HLS support.
+   */
+
+  Vhs.supportsNativeHls = function () {
+    if (!document || !document.createElement) {
+      return false;
+    }
+    const video = document.createElement('video'); // native HLS is definitely not supported if HTML5 video isn't
+
+    if (!videojs.getTech('Html5').isSupported()) {
+      return false;
+    } // HLS manifests can go by many mime-types
+
+    const canPlay = [
+    // Apple santioned
+    'application/vnd.apple.mpegurl',
+    // Apple sanctioned for backwards compatibility
+    'audio/mpegurl',
+    // Very common
+    'audio/x-mpegurl',
+    // Very common
+    'application/x-mpegurl',
+    // Included for completeness
+    'video/x-mpegurl', 'video/mpegurl', 'application/mpegurl'];
+    return canPlay.some(function (canItPlay) {
+      return /maybe|probably/i.test(video.canPlayType(canItPlay));
+    });
+  }();
+  Vhs.supportsNativeDash = function () {
+    if (!document || !document.createElement || !videojs.getTech('Html5').isSupported()) {
+      return false;
+    }
+    return /maybe|probably/i.test(document.createElement('video').canPlayType('application/dash+xml'));
+  }();
+  Vhs.supportsTypeNatively = type => {
+    if (type === 'hls') {
+      return Vhs.supportsNativeHls;
+    }
+    if (type === 'dash') {
+      return Vhs.supportsNativeDash;
+    }
+    return false;
+  };
+  /**
+   * VHS is a source handler, not a tech. Make sure attempts to use it
+   * as one do not cause exceptions.
+   */
+
+  Vhs.isSupported = function () {
+    return videojs.log.warn('VHS is no longer a tech. Please remove it from ' + 'your player\'s techOrder.');
+  };
+  /**
+   * A global function for setting an onRequest hook
+   *
+   * @param {function} callback for request modifiction
+   */
+
+  Vhs.xhr.onRequest = function (callback) {
+    addOnRequestHook(Vhs.xhr, callback);
+  };
+  /**
+   * A global function for setting an onResponse hook
+   *
+   * @param {callback} callback for response data retrieval
+   */
+
+  Vhs.xhr.onResponse = function (callback) {
+    addOnResponseHook(Vhs.xhr, callback);
+  };
+  /**
+   * Deletes a global onRequest callback if it exists
+   *
+   * @param {function} callback to delete from the global set
+   */
+
+  Vhs.xhr.offRequest = function (callback) {
+    removeOnRequestHook(Vhs.xhr, callback);
+  };
+  /**
+   * Deletes a global onResponse callback if it exists
+   *
+   * @param {function} callback to delete from the global set
+   */
+
+  Vhs.xhr.offResponse = function (callback) {
+    removeOnResponseHook(Vhs.xhr, callback);
+  };
+  const Component = videojs.getComponent('Component');
+  /**
+   * The Vhs Handler object, where we orchestrate all of the parts
+   * of VHS to interact with video.js
+   *
+   * @class VhsHandler
+   * @extends videojs.Component
+   * @param {Object} source the soruce object
+   * @param {Tech} tech the parent tech object
+   * @param {Object} options optional and required options
+   */
+
+  class VhsHandler extends Component {
+    constructor(source, tech, options) {
+      super(tech, options.vhs); // if a tech level `initialBandwidth` option was passed
+      // use that over the VHS level `bandwidth` option
+
+      if (typeof options.initialBandwidth === 'number') {
+        this.options_.bandwidth = options.initialBandwidth;
+      }
+      this.logger_ = logger('VhsHandler'); // we need access to the player in some cases,
+      // so, get it from Video.js via the `playerId`
+
+      if (tech.options_ && tech.options_.playerId) {
+        const _player = videojs.getPlayer(tech.options_.playerId);
+        this.player_ = _player;
+      }
+      this.tech_ = tech;
+      this.source_ = source;
+      this.stats = {};
+      this.ignoreNextSeekingEvent_ = false;
+      this.setOptions_();
+      if (this.options_.overrideNative && tech.overrideNativeAudioTracks && tech.overrideNativeVideoTracks) {
+        tech.overrideNativeAudioTracks(true);
+        tech.overrideNativeVideoTracks(true);
+      } else if (this.options_.overrideNative && (tech.featuresNativeVideoTracks || tech.featuresNativeAudioTracks)) {
+        // overriding native VHS only works if audio tracks have been emulated
+        // error early if we're misconfigured
+        throw new Error('Overriding native VHS requires emulated tracks. ' + 'See https://git.io/vMpjB');
+      } // listen for fullscreenchange events for this player so that we
+      // can adjust our quality selection quickly
+
+      this.on(document, ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'], event => {
+        const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+        if (fullscreenElement && fullscreenElement.contains(this.tech_.el())) {
+          this.playlistController_.fastQualityChange_();
+        } else {
+          // When leaving fullscreen, since the in page pixel dimensions should be smaller
+          // than full screen, see if there should be a rendition switch down to preserve
+          // bandwidth.
+          this.playlistController_.checkABR_();
+        }
+      });
+      this.on(this.tech_, 'seeking', function () {
+        if (this.ignoreNextSeekingEvent_) {
+          this.ignoreNextSeekingEvent_ = false;
+          return;
+        }
+        this.setCurrentTime(this.tech_.currentTime());
+      });
+      this.on(this.tech_, 'error', function () {
+        // verify that the error was real and we are loaded
+        // enough to have pc loaded.
+        if (this.tech_.error() && this.playlistController_) {
+          this.playlistController_.pauseLoading();
+        }
+      });
+      this.on(this.tech_, 'play', this.play);
+    }
+    /**
+     * Set VHS options based on options from configuration, as well as partial
+     * options to be passed at a later time.
+     *
+     * @param {Object} options A partial chunk of config options
+     */
+
+    setOptions_(options = {}) {
+      this.options_ = merge(this.options_, options); // defaults
+
+      this.options_.withCredentials = this.options_.withCredentials || false;
+      this.options_.limitRenditionByPlayerDimensions = this.options_.limitRenditionByPlayerDimensions === false ? false : true;
+      this.options_.useDevicePixelRatio = this.options_.useDevicePixelRatio || false;
+      this.options_.useBandwidthFromLocalStorage = typeof this.source_.useBandwidthFromLocalStorage !== 'undefined' ? this.source_.useBandwidthFromLocalStorage : this.options_.useBandwidthFromLocalStorage || false;
+      this.options_.useForcedSubtitles = this.options_.useForcedSubtitles || false;
+      this.options_.useNetworkInformationApi = this.options_.useNetworkInformationApi || false;
+      this.options_.useDtsForTimestampOffset = this.options_.useDtsForTimestampOffset || false;
+      this.options_.customTagParsers = this.options_.customTagParsers || [];
+      this.options_.customTagMappers = this.options_.customTagMappers || [];
+      this.options_.cacheEncryptionKeys = this.options_.cacheEncryptionKeys || false;
+      this.options_.llhls = this.options_.llhls === false ? false : true;
+      this.options_.bufferBasedABR = this.options_.bufferBasedABR || false;
+      if (typeof this.options_.playlistExclusionDuration !== 'number') {
+        this.options_.playlistExclusionDuration = 60;
+      }
+      if (typeof this.options_.bandwidth !== 'number') {
+        if (this.options_.useBandwidthFromLocalStorage) {
+          const storedObject = getVhsLocalStorage();
+          if (storedObject && storedObject.bandwidth) {
+            this.options_.bandwidth = storedObject.bandwidth;
+            this.tech_.trigger({
+              type: 'usage',
+              name: 'vhs-bandwidth-from-local-storage'
+            });
+          }
+          if (storedObject && storedObject.throughput) {
+            this.options_.throughput = storedObject.throughput;
+            this.tech_.trigger({
+              type: 'usage',
+              name: 'vhs-throughput-from-local-storage'
+            });
+          }
+        }
+      } // if bandwidth was not set by options or pulled from local storage, start playlist
+      // selection at a reasonable bandwidth
+
+      if (typeof this.options_.bandwidth !== 'number') {
+        this.options_.bandwidth = Config.INITIAL_BANDWIDTH;
+      } // If the bandwidth number is unchanged from the initial setting
+      // then this takes precedence over the enableLowInitialPlaylist option
+
+      this.options_.enableLowInitialPlaylist = this.options_.enableLowInitialPlaylist && this.options_.bandwidth === Config.INITIAL_BANDWIDTH; // grab options passed to player.src
+
+      ['withCredentials', 'useDevicePixelRatio', 'customPixelRatio', 'limitRenditionByPlayerDimensions', 'bandwidth', 'customTagParsers', 'customTagMappers', 'cacheEncryptionKeys', 'playlistSelector', 'initialPlaylistSelector', 'bufferBasedABR', 'liveRangeSafeTimeDelta', 'llhls', 'useForcedSubtitles', 'useNetworkInformationApi', 'useDtsForTimestampOffset', 'exactManifestTimings', 'leastPixelDiffSelector'].forEach(option => {
+        if (typeof this.source_[option] !== 'undefined') {
+          this.options_[option] = this.source_[option];
+        }
+      });
+      this.limitRenditionByPlayerDimensions = this.options_.limitRenditionByPlayerDimensions;
+      this.useDevicePixelRatio = this.options_.useDevicePixelRatio;
+      const customPixelRatio = this.options_.customPixelRatio; // Ensure the custom pixel ratio is a number greater than or equal to 0
+
+      if (typeof customPixelRatio === 'number' && customPixelRatio >= 0) {
+        this.customPixelRatio = customPixelRatio;
+      }
+    } // alias for public method to set options
+
+    setOptions(options = {}) {
+      this.setOptions_(options);
+    }
+    /**
+     * called when player.src gets called, handle a new source
+     *
+     * @param {Object} src the source object to handle
+     */
+
+    src(src, type) {
+      // do nothing if the src is falsey
+      if (!src) {
+        return;
+      }
+      this.setOptions_(); // add main playlist controller options
+
+      this.options_.src = expandDataUri(this.source_.src);
+      this.options_.tech = this.tech_;
+      this.options_.externVhs = Vhs;
+      this.options_.sourceType = simpleTypeFromSourceType(type); // Whenever we seek internally, we should update the tech
+
+      this.options_.seekTo = time => {
+        this.tech_.setCurrentTime(time);
+      };
+      this.playlistController_ = new PlaylistController(this.options_);
+      const playbackWatcherOptions = merge({
+        liveRangeSafeTimeDelta: SAFE_TIME_DELTA
+      }, this.options_, {
+        seekable: () => this.seekable(),
+        media: () => this.playlistController_.media(),
+        playlistController: this.playlistController_
+      });
+      this.playbackWatcher_ = new PlaybackWatcher(playbackWatcherOptions);
+      this.playlistController_.on('error', () => {
+        const player = videojs.players[this.tech_.options_.playerId];
+        let error = this.playlistController_.error;
+        if (typeof error === 'object' && !error.code) {
+          error.code = 3;
+        } else if (typeof error === 'string') {
+          error = {
+            message: error,
+            code: 3
+          };
+        }
+        player.error(error);
+      });
+      const defaultSelector = this.options_.bufferBasedABR ? Vhs.movingAverageBandwidthSelector(0.55) : Vhs.STANDARD_PLAYLIST_SELECTOR; // `this` in selectPlaylist should be the VhsHandler for backwards
+      // compatibility with < v2
+
+      this.playlistController_.selectPlaylist = this.selectPlaylist ? this.selectPlaylist.bind(this) : defaultSelector.bind(this);
+      this.playlistController_.selectInitialPlaylist = Vhs.INITIAL_PLAYLIST_SELECTOR.bind(this); // re-expose some internal objects for backwards compatibility with < v2
+
+      this.playlists = this.playlistController_.mainPlaylistLoader_;
+      this.mediaSource = this.playlistController_.mediaSource; // Proxy assignment of some properties to the main playlist
+      // controller. Using a custom property for backwards compatibility
+      // with < v2
+
+      Object.defineProperties(this, {
+        selectPlaylist: {
+          get() {
+            return this.playlistController_.selectPlaylist;
+          },
+          set(selectPlaylist) {
+            this.playlistController_.selectPlaylist = selectPlaylist.bind(this);
+          }
+        },
+        throughput: {
+          get() {
+            return this.playlistController_.mainSegmentLoader_.throughput.rate;
+          },
+          set(throughput) {
+            this.playlistController_.mainSegmentLoader_.throughput.rate = throughput; // By setting `count` to 1 the throughput value becomes the starting value
+            // for the cumulative average
+
+            this.playlistController_.mainSegmentLoader_.throughput.count = 1;
+          }
+        },
+        bandwidth: {
+          get() {
+            let playerBandwidthEst = this.playlistController_.mainSegmentLoader_.bandwidth;
+            const networkInformation = window.navigator.connection || window.navigator.mozConnection || window.navigator.webkitConnection;
+            const tenMbpsAsBitsPerSecond = 10e6;
+            if (this.options_.useNetworkInformationApi && networkInformation) {
+              // downlink returns Mbps
+              // https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/downlink
+              const networkInfoBandwidthEstBitsPerSec = networkInformation.downlink * 1000 * 1000; // downlink maxes out at 10 Mbps. In the event that both networkInformationApi and the player
+              // estimate a bandwidth greater than 10 Mbps, use the larger of the two estimates to ensure that
+              // high quality streams are not filtered out.
+
+              if (networkInfoBandwidthEstBitsPerSec >= tenMbpsAsBitsPerSecond && playerBandwidthEst >= tenMbpsAsBitsPerSecond) {
+                playerBandwidthEst = Math.max(playerBandwidthEst, networkInfoBandwidthEstBitsPerSec);
+              } else {
+                playerBandwidthEst = networkInfoBandwidthEstBitsPerSec;
+              }
+            }
+            return playerBandwidthEst;
+          },
+          set(bandwidth) {
+            this.playlistController_.mainSegmentLoader_.bandwidth = bandwidth; // setting the bandwidth manually resets the throughput counter
+            // `count` is set to zero that current value of `rate` isn't included
+            // in the cumulative average
+
+            this.playlistController_.mainSegmentLoader_.throughput = {
+              rate: 0,
+              count: 0
+            };
+          }
+        },
+        /**
+         * `systemBandwidth` is a combination of two serial processes bit-rates. The first
+         * is the network bitrate provided by `bandwidth` and the second is the bitrate of
+         * the entire process after that - decryption, transmuxing, and appending - provided
+         * by `throughput`.
+         *
+         * Since the two process are serial, the overall system bandwidth is given by:
+         *   sysBandwidth = 1 / (1 / bandwidth + 1 / throughput)
+         */
+        systemBandwidth: {
+          get() {
+            const invBandwidth = 1 / (this.bandwidth || 1);
+            let invThroughput;
+            if (this.throughput > 0) {
+              invThroughput = 1 / this.throughput;
+            } else {
+              invThroughput = 0;
+            }
+            const systemBitrate = Math.floor(1 / (invBandwidth + invThroughput));
+            return systemBitrate;
+          },
+          set() {
+            videojs.log.error('The "systemBandwidth" property is read-only');
+          }
+        }
+      });
+      if (this.options_.bandwidth) {
+        this.bandwidth = this.options_.bandwidth;
+      }
+      if (this.options_.throughput) {
+        this.throughput = this.options_.throughput;
+      }
+      Object.defineProperties(this.stats, {
+        bandwidth: {
+          get: () => this.bandwidth || 0,
+          enumerable: true
+        },
+        mediaRequests: {
+          get: () => this.playlistController_.mediaRequests_() || 0,
+          enumerable: true
+        },
+        mediaRequestsAborted: {
+          get: () => this.playlistController_.mediaRequestsAborted_() || 0,
+          enumerable: true
+        },
+        mediaRequestsTimedout: {
+          get: () => this.playlistController_.mediaRequestsTimedout_() || 0,
+          enumerable: true
+        },
+        mediaRequestsErrored: {
+          get: () => this.playlistController_.mediaRequestsErrored_() || 0,
+          enumerable: true
+        },
+        mediaTransferDuration: {
+          get: () => this.playlistController_.mediaTransferDuration_() || 0,
+          enumerable: true
+        },
+        mediaBytesTransferred: {
+          get: () => this.playlistController_.mediaBytesTransferred_() || 0,
+          enumerable: true
+        },
+        mediaSecondsLoaded: {
+          get: () => this.playlistController_.mediaSecondsLoaded_() || 0,
+          enumerable: true
+        },
+        mediaAppends: {
+          get: () => this.playlistController_.mediaAppends_() || 0,
+          enumerable: true
+        },
+        mainAppendsToLoadedData: {
+          get: () => this.playlistController_.mainAppendsToLoadedData_() || 0,
+          enumerable: true
+        },
+        audioAppendsToLoadedData: {
+          get: () => this.playlistController_.audioAppendsToLoadedData_() || 0,
+          enumerable: true
+        },
+        appendsToLoadedData: {
+          get: () => this.playlistController_.appendsToLoadedData_() || 0,
+          enumerable: true
+        },
+        timeToLoadedData: {
+          get: () => this.playlistController_.timeToLoadedData_() || 0,
+          enumerable: true
+        },
+        buffered: {
+          get: () => timeRangesToArray(this.tech_.buffered()),
+          enumerable: true
+        },
+        currentTime: {
+          get: () => this.tech_.currentTime(),
+          enumerable: true
+        },
+        currentSource: {
+          get: () => this.tech_.currentSource_,
+          enumerable: true
+        },
+        currentTech: {
+          get: () => this.tech_.name_,
+          enumerable: true
+        },
+        duration: {
+          get: () => this.tech_.duration(),
+          enumerable: true
+        },
+        main: {
+          get: () => this.playlists.main,
+          enumerable: true
+        },
+        playerDimensions: {
+          get: () => this.tech_.currentDimensions(),
+          enumerable: true
+        },
+        seekable: {
+          get: () => timeRangesToArray(this.tech_.seekable()),
+          enumerable: true
+        },
+        timestamp: {
+          get: () => Date.now(),
+          enumerable: true
+        },
+        videoPlaybackQuality: {
+          get: () => this.tech_.getVideoPlaybackQuality(),
+          enumerable: true
+        }
+      });
+      this.tech_.one('canplay', this.playlistController_.setupFirstPlay.bind(this.playlistController_));
+      this.tech_.on('bandwidthupdate', () => {
+        if (this.options_.useBandwidthFromLocalStorage) {
+          updateVhsLocalStorage({
+            bandwidth: this.bandwidth,
+            throughput: Math.round(this.throughput)
+          });
+        }
+      });
+      this.playlistController_.on('selectedinitialmedia', () => {
+        // Add the manual rendition mix-in to VhsHandler
+        renditionSelectionMixin(this);
+      });
+      this.playlistController_.sourceUpdater_.on('createdsourcebuffers', () => {
+        this.setupEme_();
+      }); // the bandwidth of the primary segment loader is our best
+      // estimate of overall bandwidth
+
+      this.on(this.playlistController_, 'progress', function () {
+        this.tech_.trigger('progress');
+      }); // In the live case, we need to ignore the very first `seeking` event since
+      // that will be the result of the seek-to-live behavior
+
+      this.on(this.playlistController_, 'firstplay', function () {
+        this.ignoreNextSeekingEvent_ = true;
+      });
+      this.setupQualityLevels_(); // do nothing if the tech has been disposed already
+      // this can occur if someone sets the src in player.ready(), for instance
+
+      if (!this.tech_.el()) {
+        return;
+      }
+      this.mediaSourceUrl_ = window.URL.createObjectURL(this.playlistController_.mediaSource);
+      this.tech_.src(this.mediaSourceUrl_);
+    }
+    createKeySessions_() {
+      const audioPlaylistLoader = this.playlistController_.mediaTypes_.AUDIO.activePlaylistLoader;
+      this.logger_('waiting for EME key session creation');
+      waitForKeySessionCreation({
+        player: this.player_,
+        sourceKeySystems: this.source_.keySystems,
+        audioMedia: audioPlaylistLoader && audioPlaylistLoader.media(),
+        mainPlaylists: this.playlists.main.playlists
+      }).then(() => {
+        this.logger_('created EME key session');
+        this.playlistController_.sourceUpdater_.initializedEme();
+      }).catch(err => {
+        this.logger_('error while creating EME key session', err);
+        this.player_.error({
+          message: 'Failed to initialize media keys for EME',
+          code: 3,
+          metadata: {
+            errorType: videojs.Error.EMEKeySessionCreationError
+          }
+        });
+      });
+    }
+    handleWaitingForKey_() {
+      // If waitingforkey is fired, it's possible that the data that's necessary to retrieve
+      // the key is in the manifest. While this should've happened on initial source load, it
+      // may happen again in live streams where the keys change, and the manifest info
+      // reflects the update.
+      //
+      // Because videojs-contrib-eme compares the PSSH data we send to that of PSSH data it's
+      // already requested keys for, we don't have to worry about this generating extraneous
+      // requests.
+      this.logger_('waitingforkey fired, attempting to create any new key sessions');
+      this.createKeySessions_();
+    }
+    /**
+     * If necessary and EME is available, sets up EME options and waits for key session
+     * creation.
+     *
+     * This function also updates the source updater so taht it can be used, as for some
+     * browsers, EME must be configured before content is appended (if appending unencrypted
+     * content before encrypted content).
+     */
+
+    setupEme_() {
+      const audioPlaylistLoader = this.playlistController_.mediaTypes_.AUDIO.activePlaylistLoader;
+      const didSetupEmeOptions = setupEmeOptions({
+        player: this.player_,
+        sourceKeySystems: this.source_.keySystems,
+        media: this.playlists.media(),
+        audioMedia: audioPlaylistLoader && audioPlaylistLoader.media()
+      });
+      this.player_.tech_.on('keystatuschange', e => {
+        this.playlistController_.updatePlaylistByKeyStatus(e.keyId, e.status);
+      });
+      this.handleWaitingForKey_ = this.handleWaitingForKey_.bind(this);
+      this.player_.tech_.on('waitingforkey', this.handleWaitingForKey_);
+      if (!didSetupEmeOptions) {
+        // If EME options were not set up, we've done all we could to initialize EME.
+        this.playlistController_.sourceUpdater_.initializedEme();
+        return;
+      }
+      this.createKeySessions_();
+    }
+    /**
+     * Initializes the quality levels and sets listeners to update them.
+     *
+     * @method setupQualityLevels_
+     * @private
+     */
+
+    setupQualityLevels_() {
+      const player = videojs.players[this.tech_.options_.playerId]; // if there isn't a player or there isn't a qualityLevels plugin
+      // or qualityLevels_ listeners have already been setup, do nothing.
+
+      if (!player || !player.qualityLevels || this.qualityLevels_) {
+        return;
+      }
+      this.qualityLevels_ = player.qualityLevels();
+      this.playlistController_.on('selectedinitialmedia', () => {
+        handleVhsLoadedMetadata(this.qualityLevels_, this);
+      });
+      this.playlists.on('mediachange', () => {
+        handleVhsMediaChange(this.qualityLevels_, this.playlists);
+      });
+    }
+    /**
+     * return the version
+     */
+
+    static version() {
+      return {
+        '@videojs/http-streaming': version$4,
+        'mux.js': version$3,
+        'mpd-parser': version$2,
+        'm3u8-parser': version$1,
+        'aes-decrypter': version
+      };
+    }
+    /**
+     * return the version
+     */
+
+    version() {
+      return this.constructor.version();
+    }
+    canChangeType() {
+      return SourceUpdater.canChangeType();
+    }
+    /**
+     * Begin playing the video.
+     */
+
+    play() {
+      this.playlistController_.play();
+    }
+    /**
+     * a wrapper around the function in PlaylistController
+     */
+
+    setCurrentTime(currentTime) {
+      this.playlistController_.setCurrentTime(currentTime);
+    }
+    /**
+     * a wrapper around the function in PlaylistController
+     */
+
+    duration() {
+      return this.playlistController_.duration();
+    }
+    /**
+     * a wrapper around the function in PlaylistController
+     */
+
+    seekable() {
+      return this.playlistController_.seekable();
+    }
+    /**
+     * Abort all outstanding work and cleanup.
+     */
+
+    dispose() {
+      if (this.playbackWatcher_) {
+        this.playbackWatcher_.dispose();
+      }
+      if (this.playlistController_) {
+        this.playlistController_.dispose();
+      }
+      if (this.qualityLevels_) {
+        this.qualityLevels_.dispose();
+      }
+      if (this.tech_ && this.tech_.vhs) {
+        delete this.tech_.vhs;
+      }
+      if (this.mediaSourceUrl_ && window.URL.revokeObjectURL) {
+        window.URL.revokeObjectURL(this.mediaSourceUrl_);
+        this.mediaSourceUrl_ = null;
+      }
+      if (this.tech_) {
+        this.tech_.off('waitingforkey', this.handleWaitingForKey_);
+      }
+      super.dispose();
+    }
+    convertToProgramTime(time, callback) {
+      return getProgramTime({
+        playlist: this.playlistController_.media(),
+        time,
+        callback
+      });
+    } // the player must be playing before calling this
+
+    seekToProgramTime(programTime, callback, pauseAfterSeek = true, retryCount = 2) {
+      return seekToProgramTime({
+        programTime,
+        playlist: this.playlistController_.media(),
+        retryCount,
+        pauseAfterSeek,
+        seekTo: this.options_.seekTo,
+        tech: this.options_.tech,
+        callback
+      });
+    }
+    /**
+     * Adds the onRequest, onResponse, offRequest and offResponse functions
+     * to the VhsHandler xhr Object.
+     */
+
+    setupXhrHooks_() {
+      /**
+       * A player function for setting an onRequest hook
+       *
+       * @param {function} callback for request modifiction
+       */
+      this.xhr.onRequest = callback => {
+        addOnRequestHook(this.xhr, callback);
+      };
+      /**
+       * A player function for setting an onResponse hook
+       *
+       * @param {callback} callback for response data retrieval
+       */
+
+      this.xhr.onResponse = callback => {
+        addOnResponseHook(this.xhr, callback);
+      };
+      /**
+       * Deletes a player onRequest callback if it exists
+       *
+       * @param {function} callback to delete from the player set
+       */
+
+      this.xhr.offRequest = callback => {
+        removeOnRequestHook(this.xhr, callback);
+      };
+      /**
+       * Deletes a player onResponse callback if it exists
+       *
+       * @param {function} callback to delete from the player set
+       */
+
+      this.xhr.offResponse = callback => {
+        removeOnResponseHook(this.xhr, callback);
+      }; // Trigger an event on the player to notify the user that vhs is ready to set xhr hooks.
+      // This allows hooks to be set before the source is set to vhs when handleSource is called.
+
+      this.player_.trigger('xhr-hooks-ready');
+    }
+  }
+  /**
+   * The Source Handler object, which informs video.js what additional
+   * MIME types are supported and sets up playback. It is registered
+   * automatically to the appropriate tech based on the capabilities of
+   * the browser it is running in. It is not necessary to use or modify
+   * this object in normal usage.
+   */
+
+  const VhsSourceHandler = {
+    name: 'videojs-http-streaming',
+    VERSION: version$4,
+    canHandleSource(srcObj, options = {}) {
+      const localOptions = merge(videojs.options, options);
+      return VhsSourceHandler.canPlayType(srcObj.type, localOptions);
+    },
+    handleSource(source, tech, options = {}) {
+      const localOptions = merge(videojs.options, options);
+      tech.vhs = new VhsHandler(source, tech, localOptions);
+      tech.vhs.xhr = xhrFactory();
+      tech.vhs.setupXhrHooks_();
+      tech.vhs.src(source.src, source.type);
+      return tech.vhs;
+    },
+    canPlayType(type, options) {
+      const simpleType = simpleTypeFromSourceType(type);
+      if (!simpleType) {
+        return '';
+      }
+      const overrideNative = VhsSourceHandler.getOverrideNative(options);
+      const supportsTypeNatively = Vhs.supportsTypeNatively(simpleType);
+      const canUseMsePlayback = !supportsTypeNatively || overrideNative;
+      return canUseMsePlayback ? 'maybe' : '';
+    },
+    getOverrideNative(options = {}) {
+      const {
+        vhs = {}
+      } = options;
+      const defaultOverrideNative = !(videojs.browser.IS_ANY_SAFARI || videojs.browser.IS_IOS);
+      const {
+        overrideNative = defaultOverrideNative
+      } = vhs;
+      return overrideNative;
+    }
+  };
+  /**
+   * Check to see if the native MediaSource object exists and supports
+   * an MP4 container with both H.264 video and AAC-LC audio.
+   *
+   * @return {boolean} if  native media sources are supported
+   */
+
+  const supportsNativeMediaSources = () => {
+    return browserSupportsCodec('avc1.4d400d,mp4a.40.2');
+  }; // register source handlers with the appropriate techs
+
+  if (supportsNativeMediaSources()) {
+    videojs.getTech('Html5').registerSourceHandler(VhsSourceHandler, 0);
+  }
+  videojs.VhsHandler = VhsHandler;
+  videojs.VhsSourceHandler = VhsSourceHandler;
+  videojs.Vhs = Vhs;
+  if (!videojs.use) {
+    videojs.registerComponent('Vhs', Vhs);
+  }
+  videojs.options.vhs = videojs.options.vhs || {};
+  if (!videojs.getPlugin || !videojs.getPlugin('reloadSourceOnError')) {
+    videojs.registerPlugin('reloadSourceOnError', reloadSourceOnError);
+  }
+
+  return videojs;
+
+}));
diff --git a/priv/static/video.js/alt/video.novtt.min.js b/priv/static/video.js/alt/video.novtt.min.js
new file mode 100644
index 0000000..b6d9567
--- /dev/null
+++ b/priv/static/video.js/alt/video.novtt.min.js
@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Video.js 8.12.0 <http://videojs.com/>
+ * Copyright Brightcove, Inc. <https://www.brightcove.com/>
+ * Available under Apache License Version 2.0
+ * <https://github.com/videojs/video.js/blob/main/LICENSE>
+ *
+ * Includes vtt.js <https://github.com/mozilla/vtt.js>
+ * Available under Apache License Version 2.0
+ * <https://github.com/mozilla/vtt.js/blob/main/LICENSE>
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).videojs=t()}(this,function(){"use strict";var M="8.12.0";const U={},B=function(e,t){return U[e]=U[e]||[],t&&(U[e]=U[e].concat(t)),U[e]};function F(e,t){return!((t=B(e).indexOf(t))<=-1||(U[e]=U[e].slice(),U[e].splice(t,1),0))}const q={prefixed:!0};var j=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror","fullscreen"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror","-webkit-full-screen"]],H=j[0];let V;for(let e=0;e<j.length;e++)if(j[e][1]in document){V=j[e];break}if(V){for(let e=0;e<V.length;e++)q[H[e]]=V[e];q.prefixed=V[0]!==H[0]}let u=[];function $(e){return K(e)?Object.keys(e):[]}const l=function s(r,n=":",a=""){let t="info",i;function o(...e){i("log",t,e)}var l,d,h;return i=(l=r,d=o,h=a,(t,i,s)=>{var e,i=d.levels[i],r=new RegExp(`^(${i})$`);let n=l;if("log"!==t&&s.unshift(t.toUpperCase()+":"),h&&(n="%c"+l,s.unshift(h)),s.unshift(n+":"),u&&(u.push([].concat(s)),e=u.length-1e3,u.splice(0,0<e?e:0)),window.console){let e=window.console[t];(e=e||"debug"!==t?e:window.console.info||window.console.log)&&i&&r.test(t)&&e[Array.isArray(s)?"apply":"call"](window.console,s)}}),o.createLogger=(e,t,i)=>s(r+` ${t=void 0!==t?t:n} `+e,t,void 0!==i?i:a),o.createNewLogger=(e,t,i)=>s(e,t,i),o.levels={all:"debug|log|warn|error",off:"",debug:"debug|log|warn|error",info:"log|warn|error",warn:"warn|error",error:"error",DEFAULT:t},o.level=e=>{if("string"==typeof e){if(!o.levels.hasOwnProperty(e))throw new Error(`"${e}" in not a valid log level`);t=e}return t},o.history=()=>u?[].concat(u):[],o.history.filter=t=>(u||[]).filter(e=>new RegExp(`.*${t}.*`).test(e[0])),o.history.clear=()=>{u&&(u.length=0)},o.history.disable=()=>{null!==u&&(u.length=0,u=null)},o.history.enable=()=>{null===u&&(u=[])},o.error=(...e)=>i("error",t,e),o.warn=(...e)=>i("warn",t,e),o.debug=(...e)=>i("debug",t,e),o}("VIDEOJS"),z=l.createLogger,W=Object.prototype.toString;function G(t,i){$(t).forEach(e=>i(t[e],e))}function X(i,s,e=0){return $(i).reduce((e,t)=>s(e,i[t],t),e)}function K(e){return!!e&&"object"==typeof e}function Y(e){return K(e)&&"[object Object]"===W.call(e)&&e.constructor===Object}function d(...e){const i={};return e.forEach(e=>{e&&G(e,(e,t)=>{Y(e)?(Y(i[t])||(i[t]={}),i[t]=d(i[t],e)):i[t]=e})}),i}function Q(e={}){var t,i=[];for(const s in e)e.hasOwnProperty(s)&&(t=e[s],i.push(t));return i}function J(t,i,s,e=!0){const r=e=>Object.defineProperty(t,i,{value:e,enumerable:!0,writable:!0});var n={configurable:!0,enumerable:!0,get(){var e=s();return r(e),e}};return e&&(n.set=r),Object.defineProperty(t,i,n)}var Z=Object.freeze({__proto__:null,each:G,reduce:X,isObject:K,isPlain:Y,merge:d,values:Q,defineLazyProperty:J});let ee=!1,te=null,ie=!1,se,re=!1,ne=!1,ae=!1,oe=!1,le=null,de=null,he=null,ue=!1,ce=!1,pe=!1,me=!1,ge=!1,fe=!1,ye=!1;const _e=Boolean(we()&&("ontouchstart"in window||window.navigator.maxTouchPoints||window.DocumentTouch&&window.document instanceof window.DocumentTouch));var ve,e=window.navigator&&window.navigator.userAgentData;if(e&&e.platform&&e.brands&&(ie="Android"===e.platform,ne=Boolean(e.brands.find(e=>"Microsoft Edge"===e.brand)),ae=Boolean(e.brands.find(e=>"Chromium"===e.brand)),oe=!ne&&ae,le=de=(e.brands.find(e=>"Chromium"===e.brand)||{}).version||null,ce="Windows"===e.platform),!ae){const N=window.navigator&&window.navigator.userAgent||"";ee=/iPod/i.test(N),te=(e=N.match(/OS (\d+)_/i))&&e[1]?e[1]:null,ie=/Android/i.test(N),se=(e=N.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i))?(Mt=e[1]&&parseFloat(e[1]),ve=e[2]&&parseFloat(e[2]),Mt&&ve?parseFloat(e[1]+"."+e[2]):Mt||null):null,re=/Firefox/i.test(N),ne=/Edg/i.test(N),ae=/Chrome/i.test(N)||/CriOS/i.test(N),oe=!ne&&ae,le=de=(ve=N.match(/(Chrome|CriOS)\/(\d+)/))&&ve[2]?parseFloat(ve[2]):null,he=function(){var e=/MSIE\s(\d+)\.\d/.exec(N);let t=e&&parseFloat(e[1]);return t=!t&&/Trident\/7.0/i.test(N)&&/rv:11.0/.test(N)?11:t}(),ge=/Tizen/i.test(N),fe=/Web0S/i.test(N),ye=ge||fe,ue=/Safari/i.test(N)&&!oe&&!ie&&!ne&&!ye,ce=/Windows/i.test(N),pe=/iPad/i.test(N)||ue&&_e&&!/iPhone/i.test(N),me=/iPhone/i.test(N)&&!pe}const c=me||pe||ee,be=(ue||c)&&!oe;var Te=Object.freeze({__proto__:null,get IS_IPOD(){return ee},get IOS_VERSION(){return te},get IS_ANDROID(){return ie},get ANDROID_VERSION(){return se},get IS_FIREFOX(){return re},get IS_EDGE(){return ne},get IS_CHROMIUM(){return ae},get IS_CHROME(){return oe},get CHROMIUM_VERSION(){return le},get CHROME_VERSION(){return de},get IE_VERSION(){return he},get IS_SAFARI(){return ue},get IS_WINDOWS(){return ce},get IS_IPAD(){return pe},get IS_IPHONE(){return me},get IS_TIZEN(){return ge},get IS_WEBOS(){return fe},get IS_SMART_TV(){return ye},TOUCH_ENABLED:_e,IS_IOS:c,IS_ANY_SAFARI:be});function Se(e){return"string"==typeof e&&Boolean(e.trim())}function we(){return document===window.document}function Ee(e){return K(e)&&1===e.nodeType}function Ce(){try{return window.parent!==window.self}catch(e){return!0}}function ke(i){return function(e,t){return Se(e)?(t=Ee(t=Se(t)?document.querySelector(t):t)?t:document)[i]&&t[i](e):document[i](null)}}function o(e="div",i={},t={},s){const r=document.createElement(e);return Object.getOwnPropertyNames(i).forEach(function(e){var t=i[e];"textContent"===e?Ie(r,t):r[e]===t&&"tabIndex"!==e||(r[e]=t)}),Object.getOwnPropertyNames(t).forEach(function(e){r.setAttribute(e,t[e])}),s&&We(r,s),r}function Ie(e,t){return"undefined"==typeof e.textContent?e.innerText=t:e.textContent=t,e}function xe(e,t){t.firstChild?t.insertBefore(e,t.firstChild):t.appendChild(e)}function Ae(e,t){if(0<=t.indexOf(" "))throw new Error("class has illegal whitespace characters");return e.classList.contains(t)}function De(e,...t){return e.classList.add(...t.reduce((e,t)=>e.concat(t.split(/\s+/)),[])),e}function Pe(e,...t){return e?(e.classList.remove(...t.reduce((e,t)=>e.concat(t.split(/\s+/)),[])),e):(l.warn("removeClass was called with an element that doesn't exist"),null)}function Le(t,e,i){return"boolean"!=typeof(i="function"==typeof i?i(t,e):i)&&(i=void 0),e.split(/\s+/).forEach(e=>t.classList.toggle(e,i)),t}function Oe(i,s){Object.getOwnPropertyNames(s).forEach(function(e){var t=s[e];null===t||"undefined"==typeof t||!1===t?i.removeAttribute(e):i.setAttribute(e,!0===t?"":t)})}function Re(e){var i={},s=["autoplay","controls","playsinline","loop","muted","default","defaultMuted"];if(e&&e.attributes&&0<e.attributes.length){var r=e.attributes;for(let t=r.length-1;0<=t;t--){var n=r[t].name;let e=r[t].value;s.includes(n)&&(e=null!==e),i[n]=e}}return i}function Ne(e,t){return e.getAttribute(t)}function Me(e,t,i){e.setAttribute(t,i)}function Ue(e,t){e.removeAttribute(t)}function Be(){document.body.focus(),document.onselectstart=function(){return!1}}function Fe(){document.onselectstart=function(){return!0}}function qe(e){if(e&&e.getBoundingClientRect&&e.parentNode){const t=e.getBoundingClientRect(),i={};return["bottom","height","left","right","top","width"].forEach(e=>{void 0!==t[e]&&(i[e]=t[e])}),i.height||(i.height=parseFloat(Qe(e,"height"))),i.width||(i.width=parseFloat(Qe(e,"width"))),i}}function je(e){if(!e||!e.offsetParent)return{left:0,top:0,width:0,height:0};var t=e.offsetWidth,i=e.offsetHeight;let s=0,r=0;for(;e.offsetParent&&e!==document[q.fullscreenElement];)s+=e.offsetLeft,r+=e.offsetTop,e=e.offsetParent;return{left:s,top:r,width:t,height:i}}function He(t,e){var i={x:0,y:0};if(c){let e=t;for(;e&&"html"!==e.nodeName.toLowerCase();){var s,r=Qe(e,"transform");/^matrix/.test(r)?(s=r.slice(7,-1).split(/,\s/).map(Number),i.x+=s[4],i.y+=s[5]):/^matrix3d/.test(r)&&(s=r.slice(9,-1).split(/,\s/).map(Number),i.x+=s[12],i.y+=s[13]),e=e.parentNode}}var n={},a=je(e.target),t=je(t),o=t.width,l=t.height;let d=e.offsetY-(t.top-a.top),h=e.offsetX-(t.left-a.left);return e.changedTouches&&(h=e.changedTouches[0].pageX-t.left,d=e.changedTouches[0].pageY+t.top,c)&&(h-=i.x,d-=i.y),n.y=1-Math.max(0,Math.min(1,d/l)),n.x=Math.max(0,Math.min(1,h/o)),n}function Ve(e){return K(e)&&3===e.nodeType}function $e(e){for(;e.firstChild;)e.removeChild(e.firstChild);return e}function ze(e){return"function"==typeof e&&(e=e()),(Array.isArray(e)?e:[e]).map(e=>Ee(e="function"==typeof e?e():e)||Ve(e)?e:"string"==typeof e&&/\S/.test(e)?document.createTextNode(e):void 0).filter(e=>e)}function We(t,e){return ze(e).forEach(e=>t.appendChild(e)),t}function Ge(e,t){return We($e(e),t)}function Xe(e){return void 0===e.button&&void 0===e.buttons||0===e.button&&void 0===e.buttons||"mouseup"===e.type&&0===e.button&&0===e.buttons||0===e.button&&1===e.buttons}const Ke=ke("querySelector"),Ye=ke("querySelectorAll");function Qe(t,i){if(!t||!i)return"";if("function"!=typeof window.getComputedStyle)return"";{let e;try{e=window.getComputedStyle(t)}catch(e){return""}return e?e.getPropertyValue(i)||e[i]:""}}function Je(s){[...document.styleSheets].forEach(t=>{try{var i=[...t.cssRules].map(e=>e.cssText).join(""),e=document.createElement("style");e.textContent=i,s.document.head.appendChild(e)}catch(e){i=document.createElement("link");i.rel="stylesheet",i.type=t.type,i.media=t.media.mediaText,i.href=t.href,s.document.head.appendChild(i)}})}var Ze=Object.freeze({__proto__:null,isReal:we,isEl:Ee,isInFrame:Ce,createEl:o,textContent:Ie,prependTo:xe,hasClass:Ae,addClass:De,removeClass:Pe,toggleClass:Le,setAttributes:Oe,getAttributes:Re,getAttribute:Ne,setAttribute:Me,removeAttribute:Ue,blockTextSelection:Be,unblockTextSelection:Fe,getBoundingClientRect:qe,findPosition:je,getPointerPosition:He,isTextNode:Ve,emptyEl:$e,normalizeContent:ze,appendContent:We,insertContent:Ge,isSingleLeftClick:Xe,$:Ke,$$:Ye,computedStyle:Qe,copyStyleSheetsToWindow:Je});let et=!1,tt;function it(){if(!1!==tt.options.autoSetup){var e=Array.prototype.slice.call(document.getElementsByTagName("video")),t=Array.prototype.slice.call(document.getElementsByTagName("audio")),i=Array.prototype.slice.call(document.getElementsByTagName("video-js")),s=e.concat(t,i);if(s&&0<s.length)for(let e=0,t=s.length;e<t;e++){var r=s[e];if(!r||!r.getAttribute){st(1);break}void 0===r.player&&null!==r.getAttribute("data-setup")&&tt(r)}else et||st(1)}}function st(e,t){we()&&(t&&(tt=t),window.setTimeout(it,e))}function rt(){et=!0,window.removeEventListener("load",rt)}we()&&("complete"===document.readyState?rt():window.addEventListener("load",rt));function nt(e){var t=document.createElement("style");return t.className=e,t}function at(e,t){e.styleSheet?e.styleSheet.cssText=t:e.textContent=t}var h=new WeakMap;let ot=3;function lt(e,t){var i;h.has(e)&&(0===(i=h.get(e)).handlers[t].length&&(delete i.handlers[t],e.removeEventListener?e.removeEventListener(t,i.dispatcher,!1):e.detachEvent&&e.detachEvent("on"+t,i.dispatcher)),Object.getOwnPropertyNames(i.handlers).length<=0&&(delete i.handlers,delete i.dispatcher,delete i.disabled),0===Object.getOwnPropertyNames(i).length)&&h.delete(e)}function dt(t,i,e,s){e.forEach(function(e){t(i,e,s)})}function ht(e){if(!e.fixed_){if(!e||!e.isPropagationStopped||!e.isImmediatePropagationStopped){const n=e||window.event;e={};for(const a in n)"layerX"===a||"layerY"===a||"keyLocation"===a||"webkitMovementX"===a||"webkitMovementY"===a||"path"===a||"returnValue"===a&&n.preventDefault||(e[a]=n[a]);var t,i;e.target||(e.target=e.srcElement||document),e.relatedTarget||(e.relatedTarget=e.fromElement===e.target?e.toElement:e.fromElement),e.preventDefault=function(){n.preventDefault&&n.preventDefault(),e.returnValue=!1,n.returnValue=!1,e.defaultPrevented=!0},e.defaultPrevented=!1,e.stopPropagation=function(){n.stopPropagation&&n.stopPropagation(),e.cancelBubble=!0,n.cancelBubble=!0,e.isPropagationStopped=s},e.isPropagationStopped=r,e.stopImmediatePropagation=function(){n.stopImmediatePropagation&&n.stopImmediatePropagation(),e.isImmediatePropagationStopped=s,e.stopPropagation()},e.isImmediatePropagationStopped=r,null!==e.clientX&&void 0!==e.clientX&&(t=document.documentElement,i=document.body,e.pageX=e.clientX+(t&&t.scrollLeft||i&&i.scrollLeft||0)-(t&&t.clientLeft||i&&i.clientLeft||0),e.pageY=e.clientY+(t&&t.scrollTop||i&&i.scrollTop||0)-(t&&t.clientTop||i&&i.clientTop||0)),e.which=e.charCode||e.keyCode,null!==e.button&&void 0!==e.button&&(e.button=1&e.button?0:4&e.button?1:2&e.button?2:0)}e.fixed_=!0}return e;function s(){return!0}function r(){return!1}}let ut;const ct=["touchstart","touchmove"];function pt(n,t,e){if(Array.isArray(t))return dt(pt,n,t,e);h.has(n)||h.set(n,{});const a=h.get(n);if(a.handlers||(a.handlers={}),a.handlers[t]||(a.handlers[t]=[]),e.guid||(e.guid=ot++),a.handlers[t].push(e),a.dispatcher||(a.disabled=!1,a.dispatcher=function(i,s){if(!a.disabled){i=ht(i);var e=a.handlers[i.type];if(e){var r=e.slice(0);for(let e=0,t=r.length;e<t&&!i.isImmediatePropagationStopped();e++)try{r[e].call(n,i,s)}catch(e){l.error(e)}}}}),1===a.handlers[t].length)if(n.addEventListener){let e=!1;(function(){if("boolean"!=typeof ut){ut=!1;try{var e=Object.defineProperty({},"passive",{get(){ut=!0}});window.addEventListener("test",null,e),window.removeEventListener("test",null,e)}catch(e){}}return ut})()&&-1<ct.indexOf(t)&&(e={passive:!0}),n.addEventListener(t,a.dispatcher,e)}else n.attachEvent&&n.attachEvent("on"+t,a.dispatcher)}function p(e,t,i){if(h.has(e)){const n=h.get(e);if(n.handlers){if(Array.isArray(t))return dt(p,e,t,i);var s=function(e,t){n.handlers[t]=[],lt(e,t)};if(void 0===t)for(const a in n.handlers)Object.prototype.hasOwnProperty.call(n.handlers||{},a)&&s(e,a);else{var r=n.handlers[t];if(r)if(i){if(i.guid)for(let e=0;e<r.length;e++)r[e].guid===i.guid&&r.splice(e--,1);lt(e,t)}else s(e,t)}}}}function mt(e,t,i){var s=h.has(e)?h.get(e):{},r=e.parentNode||e.ownerDocument;return"string"==typeof t?t={type:t,target:e}:t.target||(t.target=e),t=ht(t),s.dispatcher&&s.dispatcher.call(e,t,i),r&&!t.isPropagationStopped()&&!0===t.bubbles?mt.call(null,r,t,i):!r&&!t.defaultPrevented&&t.target&&t.target[t.type]&&(h.has(t.target)||h.set(t.target,{}),s=h.get(t.target),t.target[t.type])&&(s.disabled=!0,"function"==typeof t.target[t.type]&&t.target[t.type](),s.disabled=!1),!t.defaultPrevented}function gt(e,t,i){if(Array.isArray(t))return dt(gt,e,t,i);function s(){p(e,t,s),i.apply(this,arguments)}s.guid=i.guid=i.guid||ot++,pt(e,t,s)}function ft(e,t,i){function s(){p(e,t,s),i.apply(this,arguments)}s.guid=i.guid=i.guid||ot++,pt(e,t,s)}var yt=Object.freeze({__proto__:null,fixEvent:ht,on:pt,off:p,trigger:mt,one:gt,any:ft});function m(e,t,i){return t.guid||(t.guid=ot++),(e=t.bind(e)).guid=i?i+"_"+t.guid:t.guid,e}function _t(i,s){let r=window.performance.now();return function(...e){var t=window.performance.now();t-r>=s&&(i(...e),r=t)}}function vt(s,r,n,a=window){let o;function e(){const e=this,t=arguments;let i=function(){o=null,i=null,n||s.apply(e,t)};!o&&n&&s.apply(e,t),a.clearTimeout(o),o=a.setTimeout(i,r)}return e.cancel=()=>{a.clearTimeout(o),o=null},e}e=Object.freeze({__proto__:null,UPDATE_REFRESH_INTERVAL:30,bind_:m,throttle:_t,debounce:vt});let bt;class Tt{on(e,t){var i=this.addEventListener;this.addEventListener=()=>{},pt(this,e,t),this.addEventListener=i}off(e,t){p(this,e,t)}one(e,t){var i=this.addEventListener;this.addEventListener=()=>{},gt(this,e,t),this.addEventListener=i}any(e,t){var i=this.addEventListener;this.addEventListener=()=>{},ft(this,e,t),this.addEventListener=i}trigger(e){var t=e.type||e;e=ht(e="string"==typeof e?{type:t}:e),this.allowedEvents_[t]&&this["on"+t]&&this["on"+t](e),mt(this,e)}queueTrigger(e){bt=bt||new Map;const t=e.type||e;let i=bt.get(this);i||(i=new Map,bt.set(this,i));var s=i.get(t),s=(i.delete(t),window.clearTimeout(s),window.setTimeout(()=>{i.delete(t),0===i.size&&(i=null,bt.delete(this)),this.trigger(e)},0));i.set(t,s)}}Tt.prototype.allowedEvents_={},Tt.prototype.addEventListener=Tt.prototype.on,Tt.prototype.removeEventListener=Tt.prototype.off,Tt.prototype.dispatchEvent=Tt.prototype.trigger;const St=e=>"function"==typeof e.name?e.name():"string"==typeof e.name?e.name:e.name_||(e.constructor&&e.constructor.name?e.constructor.name:typeof e),wt=t=>t instanceof Tt||!!t.eventBusEl_&&["on","one","off","trigger"].every(e=>"function"==typeof t[e]),Et=e=>"string"==typeof e&&/\S/.test(e)||Array.isArray(e)&&!!e.length,Ct=(e,t,i)=>{if(!e||!e.nodeName&&!wt(e))throw new Error(`Invalid target for ${St(t)}#${i}; must be a DOM node or evented object.`)},kt=(e,t,i)=>{if(!Et(e))throw new Error(`Invalid event type for ${St(t)}#${i}; must be a non-empty string or array.`)},It=(e,t,i)=>{if("function"!=typeof e)throw new Error(`Invalid listener for ${St(t)}#${i}; must be a function.`)},xt=(e,t,i)=>{var s=t.length<3||t[0]===e||t[0]===e.eventBusEl_;let r,n,a;return s?(r=e.eventBusEl_,3<=t.length&&t.shift(),[n,a]=t):[r,n,a]=t,Ct(r,e,i),kt(n,e,i),It(a,e,i),a=m(e,a),{isTargetingSelf:s,target:r,type:n,listener:a}},At=(e,t,i,s)=>{Ct(e,e,t),e.nodeName?yt[t](e,i,s):e[t](i,s)},Dt={on(...e){const{isTargetingSelf:t,target:i,type:s,listener:r}=xt(this,e,"on");if(At(i,"on",s,r),!t){const n=()=>this.off(i,s,r);n.guid=r.guid;e=()=>this.off("dispose",n);e.guid=r.guid,At(this,"on","dispose",n),At(i,"on","dispose",e)}},one(...e){const{isTargetingSelf:t,target:i,type:s,listener:r}=xt(this,e,"one");if(t)At(i,"one",s,r);else{const n=(...e)=>{this.off(i,s,n),r.apply(null,e)};n.guid=r.guid,At(i,"one",s,n)}},any(...e){const{isTargetingSelf:t,target:i,type:s,listener:r}=xt(this,e,"any");if(t)At(i,"any",s,r);else{const n=(...e)=>{this.off(i,s,n),r.apply(null,e)};n.guid=r.guid,At(i,"any",s,n)}},off(e,t,i){!e||Et(e)?p(this.eventBusEl_,e,t):(e=e,t=t,Ct(e,this,"off"),kt(t,this,"off"),It(i,this,"off"),i=m(this,i),this.off("dispose",i),e.nodeName?(p(e,t,i),p(e,"dispose",i)):wt(e)&&(e.off(t,i),e.off("dispose",i)))},trigger(e,t){Ct(this.eventBusEl_,this,"trigger");var i=e&&"string"!=typeof e?e.type:e;if(Et(i))return mt(this.eventBusEl_,e,t);throw new Error(`Invalid event type for ${St(this)}#trigger; `+"must be a non-empty string or object with a type key that has a non-empty value.")}};function Pt(e,t={}){t=t.eventBusKey;if(t){if(!e[t].nodeName)throw new Error(`The eventBusKey "${t}" does not refer to an element.`);e.eventBusEl_=e[t]}else e.eventBusEl_=o("span",{className:"vjs-event-bus"});Object.assign(e,Dt),e.eventedCallbacks&&e.eventedCallbacks.forEach(e=>{e()}),e.on("dispose",()=>{e.off(),[e,e.el_,e.eventBusEl_].forEach(function(e){e&&h.has(e)&&h.delete(e)}),window.setTimeout(()=>{e.eventBusEl_=null},0)})}const Lt={state:{},setState(e){"function"==typeof e&&(e=e());let i;return G(e,(e,t)=>{this.state[t]!==e&&((i=i||{})[t]={from:this.state[t],to:e}),this.state[t]=e}),i&&wt(this)&&this.trigger({changes:i,type:"statechanged"}),i}};function Ot(e,t){Object.assign(e,Lt),e.state=Object.assign({},e.state,t),"function"==typeof e.handleStateChanged&&wt(e)&&e.on("statechanged",e.handleStateChanged)}function Rt(e){return"string"!=typeof e?e:e.replace(/./,e=>e.toLowerCase())}function g(e){return"string"!=typeof e?e:e.replace(/./,e=>e.toUpperCase())}function Nt(e,t){return g(e)===g(t)}var Mt=Object.freeze({__proto__:null,toLowerCase:Rt,toTitleCase:g,titleCaseEquals:Nt}),Ut="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function Bt(e,t){return e(t={exports:{}},t.exports),t.exports}var r=Bt(function(e,t){function i(e){var t;return"number"==typeof(e=e&&"object"==typeof e&&(t=e.which||e.keyCode||e.charCode)?t:e)?o[e]:(t=String(e),s[t.toLowerCase()]||r[t.toLowerCase()]||(1===t.length?t.charCodeAt(0):void 0))}i.isEventKey=function(e,t){if(e&&"object"==typeof e){e=e.which||e.keyCode||e.charCode;if(null!=e)if("string"==typeof t){var i=s[t.toLowerCase()];if(i)return i===e;if(i=r[t.toLowerCase()])return i===e}else if("number"==typeof t)return t===e;return!1}};for(var s=(t=e.exports=i).code=t.codes={backspace:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,"pause/break":19,"caps lock":20,esc:27,space:32,"page up":33,"page down":34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,command:91,"left command":91,"right command":93,"numpad *":106,"numpad +":107,"numpad -":109,"numpad .":110,"numpad /":111,"num lock":144,"scroll lock":145,"my computer":182,"my calculator":183,";":186,"=":187,",":188,"-":189,".":190,"/":191,"`":192,"[":219,"\\":220,"]":221,"'":222},r=t.aliases={windows:91,"⇧":16,"⌥":18,"⌃":17,"⌘":91,ctl:17,control:17,option:18,pause:19,break:19,caps:20,return:13,escape:27,spc:32,spacebar:32,pgup:33,pgdn:34,ins:45,del:46,cmd:91},n=97;n<123;n++)s[String.fromCharCode(n)]=n-32;for(var n=48;n<58;n++)s[n-48]=n;for(n=1;n<13;n++)s["f"+n]=n+111;for(n=0;n<10;n++)s["numpad "+n]=n+96;var a,o=t.names=t.title={};for(n in s)o[s[n]]=n;for(a in r)s[a]=r[a]});r.code,r.codes,r.aliases,r.names,r.title;class f{constructor(e,t,i){!e&&this.play?this.player_=e=this:this.player_=e,this.isDisposed_=!1,this.parentComponent_=null,this.options_=d({},this.options_),t=this.options_=d(this.options_,t),this.id_=t.id||t.el&&t.el.id,this.id_||(e=e&&e.id&&e.id()||"no_player",this.id_=e+"_component_"+ot++),this.name_=t.name||null,t.el?this.el_=t.el:!1!==t.createEl&&(this.el_=this.createEl()),t.className&&this.el_&&t.className.split(" ").forEach(e=>this.addClass(e)),["on","off","one","any","trigger"].forEach(e=>{this[e]=void 0}),!1!==t.evented&&(Pt(this,{eventBusKey:this.el_?"el_":null}),this.handleLanguagechange=this.handleLanguagechange.bind(this),this.on(this.player_,"languagechange",this.handleLanguagechange)),Ot(this,this.constructor.defaultState),this.children_=[],this.childIndex_={},this.childNameIndex_={},this.setTimeoutIds_=new Set,this.setIntervalIds_=new Set,this.rafIds_=new Set,this.namedRafs_=new Map,(this.clearingTimersOnDispose_=!1)!==t.initChildren&&this.initChildren(),this.ready(i),!1!==t.reportTouchActivity&&this.enableTouchActivity()}on(e,t){}off(e,t){}one(e,t){}any(e,t){}trigger(e,t){}dispose(e={}){if(!this.isDisposed_){if(this.readyQueue_&&(this.readyQueue_.length=0),this.trigger({type:"dispose",bubbles:!1}),this.isDisposed_=!0,this.children_)for(let e=this.children_.length-1;0<=e;e--)this.children_[e].dispose&&this.children_[e].dispose();this.children_=null,this.childIndex_=null,this.childNameIndex_=null,this.parentComponent_=null,this.el_&&(this.el_.parentNode&&(e.restoreEl?this.el_.parentNode.replaceChild(e.restoreEl,this.el_):this.el_.parentNode.removeChild(this.el_)),this.el_=null),this.player_=null}}isDisposed(){return Boolean(this.isDisposed_)}player(){return this.player_}options(e){return e&&(this.options_=d(this.options_,e)),this.options_}el(){return this.el_}createEl(e,t,i){return o(e,t,i)}localize(e,s,t=e){var i=this.player_.language&&this.player_.language(),r=this.player_.languages&&this.player_.languages(),n=r&&r[i],i=i&&i.split("-")[0],r=r&&r[i];let a=t;return n&&n[e]?a=n[e]:r&&r[e]&&(a=r[e]),a=s?a.replace(/\{(\d+)\}/g,function(e,t){t=s[t-1];let i="undefined"==typeof t?e:t;return i}):a}handleLanguagechange(){}contentEl(){return this.contentEl_||this.el_}id(){return this.id_}name(){return this.name_}children(){return this.children_}getChildById(e){return this.childIndex_[e]}getChild(e){if(e)return this.childNameIndex_[e]}getDescendant(...t){t=t.reduce((e,t)=>e.concat(t),[]);let i=this;for(let e=0;e<t.length;e++)if(!(i=i.getChild(t[e]))||!i.getChild)return;return i}setIcon(e,t=this.el()){var i,s,r;if(this.player_.options_.experimentalSvgIcons)return r="http://www.w3.org/2000/svg",i=o("span",{className:"vjs-icon-placeholder vjs-svg-icon"},{"aria-hidden":"true"}),(s=document.createElementNS(r,"svg")).setAttributeNS(null,"viewBox","0 0 512 512"),r=document.createElementNS(r,"use"),s.appendChild(r),r.setAttributeNS(null,"href","#vjs-icon-"+e),i.appendChild(s),this.iconIsSet_?t.replaceChild(i,t.querySelector(".vjs-icon-placeholder")):t.appendChild(i),this.iconIsSet_=!0,i}addChild(e,t={},i=this.children_.length){let s,r;if("string"==typeof e){r=g(e);var n=t.componentClass||r,a=(t.name=r,f.getComponent(n));if(!a)throw new Error(`Component ${n} does not exist`);if("function"!=typeof a)return null;s=new a(this.player_||this,t)}else s=e;if(s.parentComponent_&&s.parentComponent_.removeChild(s),this.children_.splice(i,0,s),s.parentComponent_=this,"function"==typeof s.id&&(this.childIndex_[s.id()]=s),(r=r||s.name&&g(s.name()))&&(this.childNameIndex_[r]=s,this.childNameIndex_[Rt(r)]=s),"function"==typeof s.el&&s.el()){let e=null;this.children_[i+1]&&(this.children_[i+1].el_?e=this.children_[i+1].el_:Ee(this.children_[i+1])&&(e=this.children_[i+1])),this.contentEl().insertBefore(s.el(),e)}return s}removeChild(i){if((i="string"==typeof i?this.getChild(i):i)&&this.children_){let t=!1;for(let e=this.children_.length-1;0<=e;e--)if(this.children_[e]===i){t=!0,this.children_.splice(e,1);break}var e;t&&(i.parentComponent_=null,this.childIndex_[i.id()]=null,this.childNameIndex_[g(i.name())]=null,this.childNameIndex_[Rt(i.name())]=null,e=i.el())&&e.parentNode===this.contentEl()&&this.contentEl().removeChild(i.el())}}initChildren(){const s=this.options_.children;if(s){const r=this.options_;let e;const t=f.getComponent("Tech");(e=Array.isArray(s)?s:Object.keys(s)).concat(Object.keys(this.options_).filter(function(t){return!e.some(function(e){return"string"==typeof e?t===e:t===e.name})})).map(e=>{let t,i;return i="string"==typeof e?(t=e,s[t]||this.options_[t]||{}):(t=e.name,e),{name:t,opts:i}}).filter(e=>{e=f.getComponent(e.opts.componentClass||g(e.name));return e&&!t.isTech(e)}).forEach(e=>{var t=e.name;let i=e.opts;!1!==(i=void 0!==r[t]?r[t]:i)&&((i=!0===i?{}:i).playerOptions=this.options_.playerOptions,e=this.addChild(t,i))&&(this[t]=e)})}}buildCSSClass(){return""}ready(e,t=!1){e&&(this.isReady_?t?e.call(this):this.setTimeout(e,1):(this.readyQueue_=this.readyQueue_||[],this.readyQueue_.push(e)))}triggerReady(){this.isReady_=!0,this.setTimeout(function(){var e=this.readyQueue_;this.readyQueue_=[],e&&0<e.length&&e.forEach(function(e){e.call(this)},this),this.trigger("ready")},1)}$(e,t){return Ke(e,t||this.contentEl())}$$(e,t){return Ye(e,t||this.contentEl())}hasClass(e){return Ae(this.el_,e)}addClass(...e){De(this.el_,...e)}removeClass(...e){Pe(this.el_,...e)}toggleClass(e,t){Le(this.el_,e,t)}show(){this.removeClass("vjs-hidden")}hide(){this.addClass("vjs-hidden")}lockShowing(){this.addClass("vjs-lock-showing")}unlockShowing(){this.removeClass("vjs-lock-showing")}getAttribute(e){return Ne(this.el_,e)}setAttribute(e,t){Me(this.el_,e,t)}removeAttribute(e){Ue(this.el_,e)}width(e,t){return this.dimension("width",e,t)}height(e,t){return this.dimension("height",e,t)}dimensions(e,t){this.width(e,!0),this.height(t)}dimension(e,t,i){var s,r;if(void 0===t)return this.el_?-1!==(r=(s=this.el_.style[e]).indexOf("px"))?parseInt(s.slice(0,r),10):parseInt(this.el_["offset"+g(e)],10):0;-1!==(""+(t=null!==t&&t==t?t:0)).indexOf("%")||-1!==(""+t).indexOf("px")?this.el_.style[e]=t:this.el_.style[e]="auto"===t?"":t+"px",i||this.trigger("componentresize")}currentDimension(e){let t=0;if("width"!==e&&"height"!==e)throw new Error("currentDimension only accepts width or height value");return t=Qe(this.el_,e),0!==(t=parseFloat(t))&&!isNaN(t)||(e="offset"+g(e),t=this.el_[e]),t}currentDimensions(){return{width:this.currentDimension("width"),height:this.currentDimension("height")}}currentWidth(){return this.currentDimension("width")}currentHeight(){return this.currentDimension("height")}focus(){this.el_.focus()}blur(){this.el_.blur()}handleKeyDown(e){this.player_&&(r.isEventKey(e,"Tab")||e.stopPropagation(),this.player_.handleKeyDown(e))}handleKeyPress(e){this.handleKeyDown(e)}emitTapEvents(){let t=0,i=null;let s;this.on("touchstart",function(e){1===e.touches.length&&(i={pageX:e.touches[0].pageX,pageY:e.touches[0].pageY},t=window.performance.now(),s=!0)}),this.on("touchmove",function(e){var t;(1<e.touches.length||i&&(t=e.touches[0].pageX-i.pageX,e=e.touches[0].pageY-i.pageY,10<Math.sqrt(t*t+e*e)))&&(s=!1)});function e(){s=!1}this.on("touchleave",e),this.on("touchcancel",e),this.on("touchend",function(e){!(i=null)===s&&window.performance.now()-t<200&&(e.preventDefault(),this.trigger("tap"))})}enableTouchActivity(){if(this.player()&&this.player().reportUserActivity){const i=m(this.player(),this.player().reportUserActivity);let t;this.on("touchstart",function(){i(),this.clearInterval(t),t=this.setInterval(i,250)});var e=function(e){i(),this.clearInterval(t)};this.on("touchmove",i),this.on("touchend",e),this.on("touchcancel",e)}}setTimeout(e,t){var i;return e=m(this,e),this.clearTimersOnDispose_(),i=window.setTimeout(()=>{this.setTimeoutIds_.has(i)&&this.setTimeoutIds_.delete(i),e()},t),this.setTimeoutIds_.add(i),i}clearTimeout(e){return this.setTimeoutIds_.has(e)&&(this.setTimeoutIds_.delete(e),window.clearTimeout(e)),e}setInterval(e,t){e=m(this,e),this.clearTimersOnDispose_();e=window.setInterval(e,t);return this.setIntervalIds_.add(e),e}clearInterval(e){return this.setIntervalIds_.has(e)&&(this.setIntervalIds_.delete(e),window.clearInterval(e)),e}requestAnimationFrame(e){var t;return this.clearTimersOnDispose_(),e=m(this,e),t=window.requestAnimationFrame(()=>{this.rafIds_.has(t)&&this.rafIds_.delete(t),e()}),this.rafIds_.add(t),t}requestNamedAnimationFrame(e,t){var i;if(!this.namedRafs_.has(e))return this.clearTimersOnDispose_(),t=m(this,t),i=this.requestAnimationFrame(()=>{t(),this.namedRafs_.has(e)&&this.namedRafs_.delete(e)}),this.namedRafs_.set(e,i),e}cancelNamedAnimationFrame(e){this.namedRafs_.has(e)&&(this.cancelAnimationFrame(this.namedRafs_.get(e)),this.namedRafs_.delete(e))}cancelAnimationFrame(e){return this.rafIds_.has(e)&&(this.rafIds_.delete(e),window.cancelAnimationFrame(e)),e}clearTimersOnDispose_(){this.clearingTimersOnDispose_||(this.clearingTimersOnDispose_=!0,this.one("dispose",()=>{[["namedRafs_","cancelNamedAnimationFrame"],["rafIds_","cancelAnimationFrame"],["setTimeoutIds_","clearTimeout"],["setIntervalIds_","clearInterval"]].forEach(([e,i])=>{this[e].forEach((e,t)=>this[i](t))}),this.clearingTimersOnDispose_=!1}))}static registerComponent(t,e){if("string"!=typeof t||!t)throw new Error(`Illegal component name, "${t}"; must be a non-empty string.`);var i=f.getComponent("Tech"),i=i&&i.isTech(e),s=f===e||f.prototype.isPrototypeOf(e.prototype);if(i||!s){let e;throw e=i?"techs must be registered using Tech.registerTech()":"must be a Component subclass",new Error(`Illegal component, "${t}"; ${e}.`)}t=g(t),f.components_||(f.components_={});s=f.getComponent("Player");if("Player"===t&&s&&s.players){const r=s.players;i=Object.keys(r);if(r&&0<i.length&&i.map(e=>r[e]).every(Boolean))throw new Error("Can not register Player component after player has been created.")}return f.components_[t]=e,f.components_[Rt(t)]=e}static getComponent(e){if(e&&f.components_)return f.components_[e]}}function Ft(e,t,i,s){var r=s,n=i.length-1;if("number"!=typeof r||r<0||n<r)throw new Error(`Failed to execute '${e}' on 'TimeRanges': The index provided (${r}) is non-numeric or out of bounds (0-${n}).`);return i[s][t]}function qt(e){let t;return t=void 0===e||0===e.length?{length:0,start(){throw new Error("This TimeRanges object is empty")},end(){throw new Error("This TimeRanges object is empty")}}:{length:e.length,start:Ft.bind(null,"start",0,e),end:Ft.bind(null,"end",1,e)},window.Symbol&&window.Symbol.iterator&&(t[window.Symbol.iterator]=()=>(e||[]).values()),t}function jt(e,t){return Array.isArray(e)?qt(e):void 0===e||void 0===t?qt():qt([[e,t]])}f.registerComponent("Component",f);function Ht(e,t){e=e<0?0:e;let i=Math.floor(e%60),s=Math.floor(e/60%60),r=Math.floor(e/3600);var n=Math.floor(t/60%60),t=Math.floor(t/3600);return r=0<(r=!isNaN(e)&&e!==1/0?r:s=i="-")||0<t?r+":":"",s=((r||10<=n)&&s<10?"0"+s:s)+":",i=i<10?"0"+i:i,r+s+i}let Vt=Ht;function $t(e){Vt=e}function zt(){Vt=Ht}function Wt(e,t=e){return Vt(e,t)}var Gt=Object.freeze({__proto__:null,createTimeRanges:jt,createTimeRange:jt,setFormatTime:$t,resetFormatTime:zt,formatTime:Wt});function Xt(t,i){let s=0;var r;let n;if(!i)return 0;t&&t.length||(t=jt(0,0));for(let e=0;e<t.length;e++)r=t.start(e),(n=t.end(e))>i&&(n=i),s+=n-r;return s/i}function i(e){if(e instanceof i)return e;"number"==typeof e?this.code=e:"string"==typeof e?this.message=e:K(e)&&("number"==typeof e.code&&(this.code=e.code),Object.assign(this,e)),this.message||(this.message=i.defaultMessages[this.code]||"")}i.prototype.code=0,i.prototype.message="",i.prototype.status=null,i.prototype.metadata=null,i.errorTypes=["MEDIA_ERR_CUSTOM","MEDIA_ERR_ABORTED","MEDIA_ERR_NETWORK","MEDIA_ERR_DECODE","MEDIA_ERR_SRC_NOT_SUPPORTED","MEDIA_ERR_ENCRYPTED"],i.defaultMessages={1:"You aborted the media playback",2:"A network error caused the media download to fail part-way.",3:"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.",4:"The media could not be loaded, either because the server or network failed or because the format is not supported.",5:"The media is encrypted and we do not have the keys to decrypt it."},i.MEDIA_ERR_CUSTOM=0,i.prototype.MEDIA_ERR_CUSTOM=0,i.MEDIA_ERR_ABORTED=1,i.prototype.MEDIA_ERR_ABORTED=1,i.MEDIA_ERR_NETWORK=2,i.prototype.MEDIA_ERR_NETWORK=2,i.MEDIA_ERR_DECODE=3,i.prototype.MEDIA_ERR_DECODE=3,i.MEDIA_ERR_SRC_NOT_SUPPORTED=4,i.prototype.MEDIA_ERR_SRC_NOT_SUPPORTED=4,i.MEDIA_ERR_ENCRYPTED=5,i.prototype.MEDIA_ERR_ENCRYPTED=5;var Kt=function(e,t){var i,s=null;try{i=JSON.parse(e,t)}catch(e){s=e}return[s,i]};function Yt(e){return null!=e&&"function"==typeof e.then}function Qt(e){Yt(e)&&e.then(null,e=>{})}function Jt(s){return["kind","label","language","id","inBandMetadataTrackDispatchType","mode","src"].reduce((e,t,i)=>(s[t]&&(e[t]=s[t]),e),{cues:s.cues&&Array.prototype.map.call(s.cues,function(e){return{startTime:e.startTime,endTime:e.endTime,text:e.text,id:e.id}})})}var Zt=function(e){var t=e.$$("track");const i=Array.prototype.map.call(t,e=>e.track);return Array.prototype.map.call(t,function(e){var t=Jt(e.track);return e.src&&(t.src=e.src),t}).concat(Array.prototype.filter.call(e.textTracks(),function(e){return-1===i.indexOf(e)}).map(Jt))},ei=function(e,i){return e.forEach(function(e){const t=i.addRemoteTextTrack(e).track;!e.src&&e.cues&&e.cues.forEach(e=>t.addCue(e))}),i.textTracks()};Jt;const ti="vjs-modal-dialog";class ii extends f{constructor(e,t){super(e,t),this.handleKeyDown_=e=>this.handleKeyDown(e),this.close_=e=>this.close(e),this.opened_=this.hasBeenOpened_=this.hasBeenFilled_=!1,this.closeable(!this.options_.uncloseable),this.content(this.options_.content),this.contentEl_=o("div",{className:ti+"-content"},{role:"document"}),this.descEl_=o("p",{className:ti+"-description vjs-control-text",id:this.el().getAttribute("aria-describedby")}),Ie(this.descEl_,this.description()),this.el_.appendChild(this.descEl_),this.el_.appendChild(this.contentEl_)}createEl(){return super.createEl("div",{className:this.buildCSSClass(),tabIndex:-1},{"aria-describedby":this.id()+"_description","aria-hidden":"true","aria-label":this.label(),role:"dialog","aria-live":"polite"})}dispose(){this.contentEl_=null,this.descEl_=null,this.previouslyActiveEl_=null,super.dispose()}buildCSSClass(){return ti+" vjs-hidden "+super.buildCSSClass()}label(){return this.localize(this.options_.label||"Modal Window")}description(){let e=this.options_.description||this.localize("This is a modal window.");return this.closeable()&&(e+=" "+this.localize("This modal can be closed by pressing the Escape key or activating the close button.")),e}open(){var e;this.opened_?this.options_.fillAlways&&this.fill():(e=this.player(),this.trigger("beforemodalopen"),this.opened_=!0,!this.options_.fillAlways&&(this.hasBeenOpened_||this.hasBeenFilled_)||this.fill(),this.wasPlaying_=!e.paused(),this.options_.pauseOnOpen&&this.wasPlaying_&&e.pause(),this.on("keydown",this.handleKeyDown_),this.hadControls_=e.controls(),e.controls(!1),this.show(),this.conditionalFocus_(),this.el().setAttribute("aria-hidden","false"),this.trigger("modalopen"),this.hasBeenOpened_=!0)}opened(e){return"boolean"==typeof e&&this[e?"open":"close"](),this.opened_}close(){var e;this.opened_&&(e=this.player(),this.trigger("beforemodalclose"),this.opened_=!1,this.wasPlaying_&&this.options_.pauseOnOpen&&e.play(),this.off("keydown",this.handleKeyDown_),this.hadControls_&&e.controls(!0),this.hide(),this.el().setAttribute("aria-hidden","true"),this.trigger("modalclose"),this.conditionalBlur_(),this.options_.temporary)&&this.dispose()}closeable(t){if("boolean"==typeof t){var i,t=this.closeable_=!!t;let e=this.getChild("closeButton");t&&!e&&(i=this.contentEl_,this.contentEl_=this.el_,e=this.addChild("closeButton",{controlText:"Close Modal Dialog"}),this.contentEl_=i,this.on(e,"close",this.close_)),!t&&e&&(this.off(e,"close",this.close_),this.removeChild(e),e.dispose())}return this.closeable_}fill(){this.fillWith(this.content())}fillWith(e){var t=this.contentEl(),i=t.parentNode,s=t.nextSibling,e=(this.trigger("beforemodalfill"),this.hasBeenFilled_=!0,i.removeChild(t),this.empty(),Ge(t,e),this.trigger("modalfill"),s?i.insertBefore(t,s):i.appendChild(t),this.getChild("closeButton"));e&&i.appendChild(e.el_)}empty(){this.trigger("beforemodalempty"),$e(this.contentEl()),this.trigger("modalempty")}content(e){return"undefined"!=typeof e&&(this.content_=e),this.content_}conditionalFocus_(){var e=document.activeElement,t=this.player_.el_;this.previouslyActiveEl_=null,!t.contains(e)&&t!==e||(this.previouslyActiveEl_=e,this.focus())}conditionalBlur_(){this.previouslyActiveEl_&&(this.previouslyActiveEl_.focus(),this.previouslyActiveEl_=null)}handleKeyDown(e){if(e.stopPropagation(),r.isEventKey(e,"Escape")&&this.closeable())e.preventDefault(),this.close();else if(r.isEventKey(e,"Tab")){var i=this.focusableEls_(),s=this.el_.querySelector(":focus");let t;for(let e=0;e<i.length;e++)if(s===i[e]){t=e;break}document.activeElement===this.el_&&(t=0),e.shiftKey&&0===t?(i[i.length-1].focus(),e.preventDefault()):e.shiftKey||t!==i.length-1||(i[0].focus(),e.preventDefault())}}focusableEls_(){var e=this.el_.querySelectorAll("*");return Array.prototype.filter.call(e,e=>(e instanceof window.HTMLAnchorElement||e instanceof window.HTMLAreaElement)&&e.hasAttribute("href")||(e instanceof window.HTMLInputElement||e instanceof window.HTMLSelectElement||e instanceof window.HTMLTextAreaElement||e instanceof window.HTMLButtonElement)&&!e.hasAttribute("disabled")||e instanceof window.HTMLIFrameElement||e instanceof window.HTMLObjectElement||e instanceof window.HTMLEmbedElement||e.hasAttribute("tabindex")&&-1!==e.getAttribute("tabindex")||e.hasAttribute("contenteditable"))}}ii.prototype.options_={pauseOnOpen:!0,temporary:!0},f.registerComponent("ModalDialog",ii);class si extends Tt{constructor(t=[]){super(),this.tracks_=[],Object.defineProperty(this,"length",{get(){return this.tracks_.length}});for(let e=0;e<t.length;e++)this.addTrack(t[e])}addTrack(e){const t=this.tracks_.length;""+t in this||Object.defineProperty(this,t,{get(){return this.tracks_[t]}}),-1===this.tracks_.indexOf(e)&&(this.tracks_.push(e),this.trigger({track:e,type:"addtrack",target:this})),e.labelchange_=()=>{this.trigger({track:e,type:"labelchange",target:this})},wt(e)&&e.addEventListener("labelchange",e.labelchange_)}removeTrack(i){let s;for(let e=0,t=this.length;e<t;e++)if(this[e]===i){(s=this[e]).off&&s.off(),this.tracks_.splice(e,1);break}s&&this.trigger({track:s,type:"removetrack",target:this})}getTrackById(i){let s=null;for(let e=0,t=this.length;e<t;e++){var r=this[e];if(r.id===i){s=r;break}}return s}}for(const Iu in si.prototype.allowedEvents_={change:"change",addtrack:"addtrack",removetrack:"removetrack",labelchange:"labelchange"})si.prototype["on"+Iu]=null;function ri(t,i){for(let e=0;e<t.length;e++)Object.keys(t[e]).length&&i.id!==t[e].id&&(t[e].enabled=!1)}function ni(t,i){for(let e=0;e<t.length;e++)Object.keys(t[e]).length&&i.id!==t[e].id&&(t[e].selected=!1)}class ai extends si{addTrack(e){super.addTrack(e),this.queueChange_||(this.queueChange_=()=>this.queueTrigger("change")),this.triggerSelectedlanguagechange||(this.triggerSelectedlanguagechange_=()=>this.trigger("selectedlanguagechange")),e.addEventListener("modechange",this.queueChange_);-1===["metadata","chapters"].indexOf(e.kind)&&e.addEventListener("modechange",this.triggerSelectedlanguagechange_)}removeTrack(e){super.removeTrack(e),e.removeEventListener&&(this.queueChange_&&e.removeEventListener("modechange",this.queueChange_),this.selectedlanguagechange_)&&e.removeEventListener("modechange",this.triggerSelectedlanguagechange_)}}class oi{constructor(e){oi.prototype.setCues_.call(this,e),Object.defineProperty(this,"length",{get(){return this.length_}})}setCues_(e){var t=this.length||0;let i=0;function s(e){""+e in this||Object.defineProperty(this,""+e,{get(){return this.cues_[e]}})}var r=e.length;this.cues_=e,this.length_=e.length;if(t<r)for(i=t;i<r;i++)s.call(this,i)}getCueById(i){let s=null;for(let e=0,t=this.length;e<t;e++){var r=this[e];if(r.id===i){s=r;break}}return s}}const li={alternative:"alternative",captions:"captions",main:"main",sign:"sign",subtitles:"subtitles",commentary:"commentary"},di={alternative:"alternative",descriptions:"descriptions",main:"main","main-desc":"main-desc",translation:"translation",commentary:"commentary"},hi={subtitles:"subtitles",captions:"captions",descriptions:"descriptions",chapters:"chapters",metadata:"metadata"},ui={disabled:"disabled",hidden:"hidden",showing:"showing"};class ci extends Tt{constructor(e={}){super();const t={id:e.id||"vjs_track_"+ot++,kind:e.kind||"",language:e.language||""};let i=e.label||"";for(const s in t)Object.defineProperty(this,s,{get(){return t[s]},set(){}});Object.defineProperty(this,"label",{get(){return i},set(e){e!==i&&(i=e,this.trigger("labelchange"))}})}}function pi(e){var t=["protocol","hostname","port","pathname","search","hash","host"],i=document.createElement("a"),s=(i.href=e,{});for(let e=0;e<t.length;e++)s[t[e]]=i[t[e]];return"http:"===s.protocol&&(s.host=s.host.replace(/:80$/,"")),"https:"===s.protocol&&(s.host=s.host.replace(/:443$/,"")),s.protocol||(s.protocol=window.location.protocol),s.host||(s.host=window.location.host),s}function mi(e){var t;return e.match(/^https?:\/\//)||((t=document.createElement("a")).href=e,e=t.href),e}function gi(e,t=window.location){return(":"===(e=pi(e)).protocol?t:e).protocol+e.host!==t.protocol+t.host}const fi=function(e){if("string"==typeof e){e=/^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/.exec(e);if(e)return e.pop().toLowerCase()}return""};var yi=Object.freeze({__proto__:null,parseUrl:pi,getAbsoluteURL:mi,getFileExtension:fi,isCrossOrigin:gi}),Ut="undefined"!=typeof window?window:"undefined"!=typeof Ut?Ut:"undefined"!=typeof self?self:{},_i=Ut,vi=Bt(function(e){function t(){return e.exports=t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i,s=arguments[t];for(i in s)Object.prototype.hasOwnProperty.call(s,i)&&(e[i]=s[i])}return e},e.exports.__esModule=!0,e.exports.default=e.exports,t.apply(this,arguments)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports}),bi=(Ut=vi)&&Ut.__esModule&&Object.prototype.hasOwnProperty.call(Ut,"default")?Ut.default:Ut,Ti=function(e){var t;return!!e&&("[object Function]"===(t=Si.call(e))||"function"==typeof e&&"[object RegExp]"!==t||"undefined"!=typeof window&&(e===window.setTimeout||e===window.alert||e===window.confirm||e===window.prompt))},Si=Object.prototype.toString;Ai.httpHandler=function(s,r){return void 0===r&&(r=!1),function(e,t,i){if(e)s(e);else if(400<=t.statusCode&&t.statusCode<=599){e=i;if(r)if(_i.TextDecoder){t=function(e){void 0===e&&(e="");return e.toLowerCase().split(";").reduce(function(e,t){var t=t.split("="),i=t[0],t=t[1];return"charset"===i.trim()?t.trim():e},"utf-8")}(t.headers&&t.headers["content-type"]);try{e=new TextDecoder(t).decode(i)}catch(e){}}else e=String.fromCharCode.apply(null,new Uint8Array(i));s({cause:e})}else s(null,i)}};for(var wi=function(e){var s={};return e&&e.trim().split("\n").forEach(function(e){var t=e.indexOf(":"),i=e.slice(0,t).trim().toLowerCase(),e=e.slice(t+1).trim();"undefined"==typeof s[i]?s[i]=e:Array.isArray(s[i])?s[i].push(e):s[i]=[s[i],e]}),s},Ei=Ai,Ut=Ai,Ci=(Ai.XMLHttpRequest=_i.XMLHttpRequest||function(){},Ai.XDomainRequest="withCredentials"in new Ai.XMLHttpRequest?Ai.XMLHttpRequest:_i.XDomainRequest,["get","put","post","patch","head","delete"]),ki=function(s){Ai["delete"===s?"del":s]=function(e,t,i){return(t=xi(e,t,i)).method=s.toUpperCase(),Di(t)}},Ii=0;Ii<Ci.length;Ii++)ki(Ci[Ii]);function xi(e,t,i){var s=e;return Ti(t)?(i=t,"string"==typeof e&&(s={uri:e})):s=vi({},t,{uri:e}),s.callback=i,s}function Ai(e,t,i){return Di(t=xi(e,t,i))}function Di(s){if("undefined"==typeof s.callback)throw new Error("callback argument missing");var r=!1,n=function(e,t,i){r||(r=!0,s.callback(e,t,i))};function a(){var e=void 0,e=d.response||d.responseText||function(e){try{if("document"===e.responseType)return e.responseXML;var t=e.responseXML&&"parsererror"===e.responseXML.documentElement.nodeName;if(""===e.responseType&&!t)return e.responseXML}catch(e){}return null}(d);if(g)try{e=JSON.parse(e)}catch(e){}return e}function t(e){return clearTimeout(l),(e=e instanceof Error?e:new Error(""+(e||"Unknown XMLHttpRequest Error"))).statusCode=0,n(e,f)}function e(){var e,t,i;if(!o)return clearTimeout(l),e=s.useXDR&&void 0===d.status?200:1223===d.status?204:d.status,t=f,i=null,0!==e?(t={body:a(),statusCode:e,method:u,headers:{},url:h,rawRequest:d},d.getAllResponseHeaders&&(t.headers=wi(d.getAllResponseHeaders()))):i=new Error("Internal XMLHttpRequest Error"),n(i,t,t.body)}var i,o,l,d=s.xhr||null,h=(d=d||new(s.cors||s.useXDR?Ai.XDomainRequest:Ai.XMLHttpRequest)).url=s.uri||s.url,u=d.method=s.method||"GET",c=s.body||s.data,p=d.headers=s.headers||{},m=!!s.sync,g=!1,f={body:void 0,headers:{},statusCode:0,method:u,url:h,rawRequest:d};if("json"in s&&!1!==s.json&&(g=!0,p.accept||p.Accept||(p.Accept="application/json"),"GET"!==u)&&"HEAD"!==u&&(p["content-type"]||p["Content-Type"]||(p["Content-Type"]="application/json"),c=JSON.stringify(!0===s.json?c:s.json)),d.onreadystatechange=function(){4===d.readyState&&setTimeout(e,0)},d.onload=e,d.onerror=t,d.onprogress=function(){},d.onabort=function(){o=!0},d.ontimeout=t,d.open(u,h,!m,s.username,s.password),m||(d.withCredentials=!!s.withCredentials),!m&&0<s.timeout&&(l=setTimeout(function(){var e;o||(o=!0,d.abort("timeout"),(e=new Error("XMLHttpRequest timeout")).code="ETIMEDOUT",t(e))},s.timeout)),d.setRequestHeader)for(i in p)p.hasOwnProperty(i)&&d.setRequestHeader(i,p[i]);else if(s.headers&&!function(e){for(var t in e)if(e.hasOwnProperty(t))return;return 1}(s.headers))throw new Error("Headers cannot be set on an XDomainRequest object");return"responseType"in s&&(d.responseType=s.responseType),"beforeSend"in s&&"function"==typeof s.beforeSend&&s.beforeSend(d),d.send(c||null),d}Ei.default=Ut;function Pi(e,t){var i=new window.WebVTT.Parser(window,window.vttjs,window.WebVTT.StringDecoder());const s=[];i.oncue=function(e){t.addCue(e)},i.onparsingerror=function(e){s.push(e)},i.onflush=function(){t.trigger({type:"loadeddata",target:t})},i.parse(e),0<s.length&&(window.console&&window.console.groupCollapsed&&window.console.groupCollapsed("Text Track parsing errors for "+t.src),s.forEach(e=>l.error(e)),window.console)&&window.console.groupEnd&&window.console.groupEnd(),i.flush()}function Li(e,s){var t={uri:e};(e=gi(e))&&(t.cors=e),(e="use-credentials"===s.tech_.crossOrigin())&&(t.withCredentials=e),Ei(t,m(this,function(e,t,i){if(e)return l.error(e,t);s.loaded_=!0,"function"!=typeof window.WebVTT?s.tech_&&s.tech_.any(["vttjsloaded","vttjserror"],e=>{if("vttjserror"!==e.type)return Pi(i,s);l.error("vttjs failed to load, stopping trying to process "+s.src)}):Pi(i,s)}))}class Oi extends ci{constructor(e={}){if(!e.tech)throw new Error("A tech was not provided.");e=d(e,{kind:hi[e.kind]||"subtitles",language:e.language||e.srclang||""});let t=ui[e.mode]||"disabled";const i=e.default,s=("metadata"!==e.kind&&"chapters"!==e.kind||(t="hidden"),super(e),this.tech_=e.tech,this.cues_=[],this.activeCues_=[],this.preload_=!1!==this.tech_.preloadTextTracks,new oi(this.cues_)),n=new oi(this.activeCues_);let a=!1;this.timeupdateHandler=m(this,function(e={}){this.tech_.isDisposed()||(this.tech_.isReady_&&(this.activeCues=this.activeCues,a)&&(this.trigger("cuechange"),a=!1),"timeupdate"!==e.type&&(this.rvf_=this.tech_.requestVideoFrameCallback(this.timeupdateHandler)))});this.tech_.one("dispose",()=>{this.stopTracking()}),"disabled"!==t&&this.startTracking(),Object.defineProperties(this,{default:{get(){return i},set(){}},mode:{get(){return t},set(e){ui[e]&&t!==e&&(t=e,this.preload_||"disabled"===t||0!==this.cues.length||Li(this.src,this),this.stopTracking(),"disabled"!==t&&this.startTracking(),this.trigger("modechange"))}},cues:{get(){return this.loaded_?s:null},set(){}},activeCues:{get(){if(!this.loaded_)return null;if(0!==this.cues.length){var i=this.tech_.currentTime(),s=[];for(let e=0,t=this.cues.length;e<t;e++){var r=this.cues[e];r.startTime<=i&&r.endTime>=i&&s.push(r)}if(a=!1,s.length!==this.activeCues_.length)a=!0;else for(let e=0;e<s.length;e++)-1===this.activeCues_.indexOf(s[e])&&(a=!0);this.activeCues_=s,n.setCues_(this.activeCues_)}return n},set(){}}}),e.src?(this.src=e.src,this.preload_||(this.loaded_=!0),(this.preload_||"subtitles"!==e.kind&&"captions"!==e.kind)&&Li(this.src,this)):this.loaded_=!0}startTracking(){this.rvf_=this.tech_.requestVideoFrameCallback(this.timeupdateHandler),this.tech_.on("timeupdate",this.timeupdateHandler)}stopTracking(){this.rvf_&&(this.tech_.cancelVideoFrameCallback(this.rvf_),this.rvf_=void 0),this.tech_.off("timeupdate",this.timeupdateHandler)}addCue(e){let t=e;if(!("getCueAsHTML"in t)){t=new window.vttjs.VTTCue(e.startTime,e.endTime,e.text);for(const s in e)s in t||(t[s]=e[s]);t.id=e.id,t.originalCue_=e}var i=this.tech_.textTracks();for(let e=0;e<i.length;e++)i[e]!==this&&i[e].removeCue(t);this.cues_.push(t),this.cues.setCues_(this.cues_)}removeCue(e){let t=this.cues_.length;for(;t--;){var i=this.cues_[t];if(i===e||i.originalCue_&&i.originalCue_===e){this.cues_.splice(t,1),this.cues.setCues_(this.cues_);break}}}}Oi.prototype.allowedEvents_={cuechange:"cuechange"};class Ri extends ci{constructor(e={}){e=d(e,{kind:di[e.kind]||""});super(e);let t=!1;Object.defineProperty(this,"enabled",{get(){return t},set(e){"boolean"==typeof e&&e!==t&&(t=e,this.trigger("enabledchange"))}}),e.enabled&&(this.enabled=e.enabled),this.loaded_=!0}}class Ni extends ci{constructor(e={}){e=d(e,{kind:li[e.kind]||""});super(e);let t=!1;Object.defineProperty(this,"selected",{get(){return t},set(e){"boolean"==typeof e&&e!==t&&(t=e,this.trigger("selectedchange"))}}),e.selected&&(this.selected=e.selected)}}class Mi extends Tt{constructor(e={}){super();let t;const i=new Oi(e);this.kind=i.kind,this.src=i.src,this.srclang=i.language,this.label=i.label,this.default=i.default,Object.defineProperties(this,{readyState:{get(){return t}},track:{get(){return i}}}),t=Mi.NONE,i.addEventListener("loadeddata",()=>{t=Mi.LOADED,this.trigger({type:"load",target:this})})}}Mi.prototype.allowedEvents_={load:"load"},Mi.NONE=0,Mi.LOADING=1,Mi.LOADED=2,Mi.ERROR=3;const Ui={audio:{ListClass:class extends si{constructor(t=[]){for(let e=t.length-1;0<=e;e--)if(t[e].enabled){ri(t,t[e]);break}super(t),this.changing_=!1}addTrack(e){e.enabled&&ri(this,e),super.addTrack(e),e.addEventListener&&(e.enabledChange_=()=>{this.changing_||(this.changing_=!0,ri(this,e),this.changing_=!1,this.trigger("change"))},e.addEventListener("enabledchange",e.enabledChange_))}removeTrack(e){super.removeTrack(e),e.removeEventListener&&e.enabledChange_&&(e.removeEventListener("enabledchange",e.enabledChange_),e.enabledChange_=null)}},TrackClass:Ri,capitalName:"Audio"},video:{ListClass:class extends si{constructor(t=[]){for(let e=t.length-1;0<=e;e--)if(t[e].selected){ni(t,t[e]);break}super(t),this.changing_=!1,Object.defineProperty(this,"selectedIndex",{get(){for(let e=0;e<this.length;e++)if(this[e].selected)return e;return-1},set(){}})}addTrack(e){e.selected&&ni(this,e),super.addTrack(e),e.addEventListener&&(e.selectedChange_=()=>{this.changing_||(this.changing_=!0,ni(this,e),this.changing_=!1,this.trigger("change"))},e.addEventListener("selectedchange",e.selectedChange_))}removeTrack(e){super.removeTrack(e),e.removeEventListener&&e.selectedChange_&&(e.removeEventListener("selectedchange",e.selectedChange_),e.selectedChange_=null)}},TrackClass:Ni,capitalName:"Video"},text:{ListClass:ai,TrackClass:Oi,capitalName:"Text"}},Bi=(Object.keys(Ui).forEach(function(e){Ui[e].getterName=e+"Tracks",Ui[e].privateName=e+"Tracks_"}),{remoteText:{ListClass:ai,TrackClass:Oi,capitalName:"RemoteText",getterName:"remoteTextTracks",privateName:"remoteTextTracks_"},remoteTextEl:{ListClass:class{constructor(i=[]){this.trackElements_=[],Object.defineProperty(this,"length",{get(){return this.trackElements_.length}});for(let e=0,t=i.length;e<t;e++)this.addTrackElement_(i[e])}addTrackElement_(e){const t=this.trackElements_.length;""+t in this||Object.defineProperty(this,t,{get(){return this.trackElements_[t]}}),-1===this.trackElements_.indexOf(e)&&this.trackElements_.push(e)}getTrackElementByTrack_(i){let s;for(let e=0,t=this.trackElements_.length;e<t;e++)if(i===this.trackElements_[e].track){s=this.trackElements_[e];break}return s}removeTrackElement_(i){for(let e=0,t=this.trackElements_.length;e<t;e++)if(i===this.trackElements_[e]){this.trackElements_[e].track&&"function"==typeof this.trackElements_[e].track.off&&this.trackElements_[e].track.off(),"function"==typeof this.trackElements_[e].off&&this.trackElements_[e].off(),this.trackElements_.splice(e,1);break}}},TrackClass:Mi,capitalName:"RemoteTextTrackEls",getterName:"remoteTextTrackEls",privateName:"remoteTextTrackEls_"}}),a=Object.assign({},Ui,Bi);Bi.names=Object.keys(Bi),Ui.names=Object.keys(Ui),a.names=[].concat(Bi.names).concat(Ui.names);var Fi={};class y extends f{constructor(t={},e=function(){}){t.reportTouchActivity=!1,super(null,t,e),this.onDurationChange_=e=>this.onDurationChange(e),this.trackProgress_=e=>this.trackProgress(e),this.trackCurrentTime_=e=>this.trackCurrentTime(e),this.stopTrackingCurrentTime_=e=>this.stopTrackingCurrentTime(e),this.disposeSourceHandler_=e=>this.disposeSourceHandler(e),this.queuedHanders_=new Set,this.hasStarted_=!1,this.on("playing",function(){this.hasStarted_=!0}),this.on("loadstart",function(){this.hasStarted_=!1}),a.names.forEach(e=>{e=a[e];t&&t[e.getterName]&&(this[e.privateName]=t[e.getterName])}),this.featuresProgressEvents||this.manualProgressOn(),this.featuresTimeupdateEvents||this.manualTimeUpdatesOn(),["Text","Audio","Video"].forEach(e=>{!1===t[`native${e}Tracks`]&&(this[`featuresNative${e}Tracks`]=!1)}),!1===t.nativeCaptions||!1===t.nativeTextTracks?this.featuresNativeTextTracks=!1:!0!==t.nativeCaptions&&!0!==t.nativeTextTracks||(this.featuresNativeTextTracks=!0),this.featuresNativeTextTracks||this.emulateTextTracks(),this.preloadTextTracks=!1!==t.preloadTextTracks,this.autoRemoteTextTracks_=new a.text.ListClass,this.initTrackListeners(),t.nativeControlsForTouch||this.emitTapEvents(),this.constructor&&(this.name_=this.constructor.name||"Unknown Tech")}triggerSourceset(e){this.isReady_||this.one("ready",()=>this.setTimeout(()=>this.triggerSourceset(e),1)),this.trigger({src:e,type:"sourceset"})}manualProgressOn(){this.on("durationchange",this.onDurationChange_),this.manualProgress=!0,this.one("ready",this.trackProgress_)}manualProgressOff(){this.manualProgress=!1,this.stopTrackingProgress(),this.off("durationchange",this.onDurationChange_)}trackProgress(e){this.stopTrackingProgress(),this.progressInterval=this.setInterval(m(this,function(){var e=this.bufferedPercent();this.bufferedPercent_!==e&&this.trigger("progress"),1===(this.bufferedPercent_=e)&&this.stopTrackingProgress()}),500)}onDurationChange(e){this.duration_=this.duration()}buffered(){return jt(0,0)}bufferedPercent(){return Xt(this.buffered(),this.duration_)}stopTrackingProgress(){this.clearInterval(this.progressInterval)}manualTimeUpdatesOn(){this.manualTimeUpdates=!0,this.on("play",this.trackCurrentTime_),this.on("pause",this.stopTrackingCurrentTime_)}manualTimeUpdatesOff(){this.manualTimeUpdates=!1,this.stopTrackingCurrentTime(),this.off("play",this.trackCurrentTime_),this.off("pause",this.stopTrackingCurrentTime_)}trackCurrentTime(){this.currentTimeInterval&&this.stopTrackingCurrentTime(),this.currentTimeInterval=this.setInterval(function(){this.trigger({type:"timeupdate",target:this,manuallyTriggered:!0})},250)}stopTrackingCurrentTime(){this.clearInterval(this.currentTimeInterval),this.trigger({type:"timeupdate",target:this,manuallyTriggered:!0})}dispose(){this.clearTracks(Ui.names),this.manualProgress&&this.manualProgressOff(),this.manualTimeUpdates&&this.manualTimeUpdatesOff(),super.dispose()}clearTracks(e){(e=[].concat(e)).forEach(e=>{var t=this[e+"Tracks"]()||[];let i=t.length;for(;i--;){var s=t[i];"text"===e&&this.removeRemoteTextTrack(s),t.removeTrack(s)}})}cleanupAutoTextTracks(){var e=this.autoRemoteTextTracks_||[];let t=e.length;for(;t--;){var i=e[t];this.removeRemoteTextTrack(i)}}reset(){}crossOrigin(){}setCrossOrigin(){}error(e){return void 0!==e&&(this.error_=new i(e),this.trigger("error")),this.error_}played(){return this.hasStarted_?jt(0,0):jt()}play(){}setScrubbing(e){}scrubbing(){}setCurrentTime(e){this.manualTimeUpdates&&this.trigger({type:"timeupdate",target:this,manuallyTriggered:!0})}initTrackListeners(){Ui.names.forEach(e=>{var t=Ui[e];const i=()=>{this.trigger(e+"trackchange")},s=this[t.getterName]();s.addEventListener("removetrack",i),s.addEventListener("addtrack",i),this.on("dispose",()=>{s.removeEventListener("removetrack",i),s.removeEventListener("addtrack",i)})})}addWebVttScript_(){if(!window.WebVTT)if(document.body.contains(this.el()))if(!this.options_["vtt.js"]&&Y(Fi)&&0<Object.keys(Fi).length)this.trigger("vttjsloaded");else{const e=document.createElement("script");e.src=this.options_["vtt.js"]||"https://vjs.zencdn.net/vttjs/0.14.1/vtt.min.js",e.onload=()=>{this.trigger("vttjsloaded")},e.onerror=()=>{this.trigger("vttjserror")},this.on("dispose",()=>{e.onload=null,e.onerror=null}),window.WebVTT=!0,this.el().parentNode.appendChild(e)}else this.ready(this.addWebVttScript_)}emulateTextTracks(){const i=this.textTracks(),e=this.remoteTextTracks(),t=e=>i.addTrack(e.track),s=e=>i.removeTrack(e.track),r=(e.on("addtrack",t),e.on("removetrack",s),this.addWebVttScript_(),()=>this.trigger("texttrackchange")),n=()=>{r();for(let e=0;e<i.length;e++){var t=i[e];t.removeEventListener("cuechange",r),"showing"===t.mode&&t.addEventListener("cuechange",r)}};n(),i.addEventListener("change",n),i.addEventListener("addtrack",n),i.addEventListener("removetrack",n),this.on("dispose",function(){e.off("addtrack",t),e.off("removetrack",s),i.removeEventListener("change",n),i.removeEventListener("addtrack",n),i.removeEventListener("removetrack",n);for(let e=0;e<i.length;e++)i[e].removeEventListener("cuechange",r)})}addTextTrack(e,t,i){if(e)return e=e,t=t,i=i,r={},n=(s=this).textTracks(),r.kind=e,t&&(r.label=t),i&&(r.language=i),r.tech=s,e=new a.text.TrackClass(r),n.addTrack(e),e;throw new Error("TextTrack kind is required but was not provided");var s,r,n}createRemoteTextTrack(e){e=d(e,{tech:this});return new Bi.remoteTextEl.TrackClass(e)}addRemoteTextTrack(e={},t){const i=this.createRemoteTextTrack(e);return"boolean"!=typeof t&&(t=!1),this.remoteTextTrackEls().addTrackElement_(i),this.remoteTextTracks().addTrack(i.track),!1===t&&this.ready(()=>this.autoRemoteTextTracks_.addTrack(i.track)),i}removeRemoteTextTrack(e){var t=this.remoteTextTrackEls().getTrackElementByTrack_(e);this.remoteTextTrackEls().removeTrackElement_(t),this.remoteTextTracks().removeTrack(e),this.autoRemoteTextTracks_.removeTrack(e)}getVideoPlaybackQuality(){return{}}requestPictureInPicture(){return Promise.reject()}disablePictureInPicture(){return!0}setDisablePictureInPicture(){}requestVideoFrameCallback(e){const t=ot++;return!this.isReady_||this.paused()?(this.queuedHanders_.add(t),this.one("playing",()=>{this.queuedHanders_.has(t)&&(this.queuedHanders_.delete(t),e())})):this.requestNamedAnimationFrame(t,e),t}cancelVideoFrameCallback(e){this.queuedHanders_.has(e)?this.queuedHanders_.delete(e):this.cancelNamedAnimationFrame(e)}setPoster(){}playsinline(){}setPlaysinline(){}overrideNativeAudioTracks(e){}overrideNativeVideoTracks(e){}canPlayType(e){return""}static canPlayType(e){return""}static canPlaySource(e,t){return y.canPlayType(e.type)}static isTech(e){return e.prototype instanceof y||e instanceof y||e===y}static registerTech(e,t){if(y.techs_||(y.techs_={}),!y.isTech(t))throw new Error(`Tech ${e} must be a Tech`);if(!y.canPlayType)throw new Error("Techs must have a static canPlayType method on them");if(y.canPlaySource)return e=g(e),y.techs_[e]=t,y.techs_[Rt(e)]=t,"Tech"!==e&&y.defaultTechOrder_.push(e),t;throw new Error("Techs must have a static canPlaySource method on them")}static getTech(e){if(e)return y.techs_&&y.techs_[e]?y.techs_[e]:(e=g(e),window&&window.videojs&&window.videojs[e]?(l.warn(`The ${e} tech was added to the videojs object when it should be registered using videojs.registerTech(name, tech)`),window.videojs[e]):void 0)}}a.names.forEach(function(e){const t=a[e];y.prototype[t.getterName]=function(){return this[t.privateName]=this[t.privateName]||new t.ListClass,this[t.privateName]}}),y.prototype.featuresVolumeControl=!0,y.prototype.featuresMuteControl=!0,y.prototype.featuresFullscreenResize=!1,y.prototype.featuresPlaybackRate=!1,y.prototype.featuresProgressEvents=!1,y.prototype.featuresSourceset=!1,y.prototype.featuresTimeupdateEvents=!1,y.prototype.featuresNativeTextTracks=!1,y.prototype.featuresVideoFrameCallback=!1,y.withSourceHandlers=function(r){r.registerSourceHandler=function(e,t){let i=r.sourceHandlers;i=i||(r.sourceHandlers=[]),void 0===t&&(t=i.length),i.splice(t,0,e)},r.canPlayType=function(t){var i,s=r.sourceHandlers||[];for(let e=0;e<s.length;e++)if(i=s[e].canPlayType(t))return i;return""},r.selectSourceHandler=function(t,i){var s=r.sourceHandlers||[];for(let e=0;e<s.length;e++)if(s[e].canHandleSource(t,i))return s[e];return null},r.canPlaySource=function(e,t){var i=r.selectSourceHandler(e,t);return i?i.canHandleSource(e,t):""};["seekable","seeking","duration"].forEach(function(e){const t=this[e];"function"==typeof t&&(this[e]=function(){return this.sourceHandler_&&this.sourceHandler_[e]?this.sourceHandler_[e].apply(this.sourceHandler_,arguments):t.apply(this,arguments)})},r.prototype),r.prototype.setSource=function(e){let t=r.selectSourceHandler(e,this.options_);t||(r.nativeSourceHandler?t=r.nativeSourceHandler:l.error("No source handler found for the current source.")),this.disposeSourceHandler(),this.off("dispose",this.disposeSourceHandler_),t!==r.nativeSourceHandler&&(this.currentSource_=e),this.sourceHandler_=t.handleSource(e,this,this.options_),this.one("dispose",this.disposeSourceHandler_)},r.prototype.disposeSourceHandler=function(){this.currentSource_&&(this.clearTracks(["audio","video"]),this.currentSource_=null),this.cleanupAutoTextTracks(),this.sourceHandler_&&(this.sourceHandler_.dispose&&this.sourceHandler_.dispose(),this.sourceHandler_=null)}},f.registerComponent("Tech",y),y.registerTech("Tech",y),y.defaultTechOrder_=[];const qi={},ji={},Hi={};function Vi(e,t,i){e.setTimeout(()=>function i(s={},e=[],r,n,a=[],o=!1){const[t,...l]=e;if("string"==typeof t)i(s,qi[t],r,n,a,o);else if(t){const d=Ki(n,t);if(!d.setSource)return a.push(d),i(s,l,r,n,a,o);d.setSource(Object.assign({},s),function(e,t){if(e)return i(s,l,r,n,a,o);a.push(d),i(t,s.type===t.type?l:qi[t.type],r,n,a,o)})}else l.length?i(s,l,r,n,a,o):o?r(s,a):i(s,qi["*"],r,n,a,!0)}(t,qi[t.type],i,e),1)}function $i(e,t,i,s=null){var r="call"+g(i),r=e.reduce(Xi(r),s),s=r===Hi,t=s?null:t[i](r),n=e,a=i,o=t,l=s;for(let e=n.length-1;0<=e;e--){var d=n[e];d[a]&&d[a](l,o)}return t}const zi={buffered:1,currentTime:1,duration:1,muted:1,played:1,paused:1,seekable:1,volume:1,ended:1},Wi={setCurrentTime:1,setMuted:1,setVolume:1},Gi={play:1,pause:1};function Xi(i){return(e,t)=>e===Hi?Hi:t[i]?t[i](e):e}function Ki(e,t){var i=ji[e.id()];let s=null;if(null==i)s=t(e),ji[e.id()]=[[t,s]];else{for(let e=0;e<i.length;e++){var[r,n]=i[e];r===t&&(s=n)}null===s&&(s=t(e),i.push([t,s]))}return s}function Yi(e){if(Array.isArray(e)){let t=[];e.forEach(function(e){e=Yi(e),Array.isArray(e)?t=t.concat(e):K(e)&&t.push(e)}),e=t}else e="string"==typeof e&&e.trim()?[Zi({src:e})]:K(e)&&"string"==typeof e.src&&e.src&&e.src.trim()?[Zi(e)]:[];return e}const Qi={opus:"video/ogg",ogv:"video/ogg",mp4:"video/mp4",mov:"video/mp4",m4v:"video/mp4",mkv:"video/x-matroska",m4a:"audio/mp4",mp3:"audio/mpeg",aac:"audio/aac",caf:"audio/x-caf",flac:"audio/flac",oga:"audio/ogg",wav:"audio/wav",m3u8:"application/x-mpegURL",mpd:"application/dash+xml",jpg:"image/jpeg",jpeg:"image/jpeg",gif:"image/gif",png:"image/png",svg:"image/svg+xml",webp:"image/webp"},Ji=function(e=""){e=fi(e);return Qi[e.toLowerCase()]||""};function Zi(e){var t;return e.type||(t=Ji(e.src))&&(e.type=t),e}class es extends f{constructor(s,e,t){if(super(s,d({createEl:!1},e),t),e.playerOptions.sources&&0!==e.playerOptions.sources.length)s.src(e.playerOptions.sources);else for(let t=0,i=e.playerOptions.techOrder;t<i.length;t++){var r=g(i[t]);let e=y.getTech(r);if((e=r?e:f.getComponent(r))&&e.isSupported()){s.loadTech_(r);break}}}}f.registerComponent("MediaLoader",es);class ts extends f{constructor(e,t){super(e,t),this.options_.controlText&&this.controlText(this.options_.controlText),this.handleMouseOver_=e=>this.handleMouseOver(e),this.handleMouseOut_=e=>this.handleMouseOut(e),this.handleClick_=e=>this.handleClick(e),this.handleKeyDown_=e=>this.handleKeyDown(e),this.emitTapEvents(),this.enable()}createEl(e="div",t={},i={}){t=Object.assign({className:this.buildCSSClass(),tabIndex:0},t),"button"===e&&l.error(`Creating a ClickableComponent with an HTML element of ${e} is not supported; use a Button instead.`),i=Object.assign({role:"button"},i),this.tabIndex_=t.tabIndex;e=o(e,t,i);return this.player_.options_.experimentalSvgIcons||e.appendChild(o("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),this.createControlTextEl(e),e}dispose(){this.controlTextEl_=null,super.dispose()}createControlTextEl(e){return this.controlTextEl_=o("span",{className:"vjs-control-text"},{"aria-live":"polite"}),e&&e.appendChild(this.controlTextEl_),this.controlText(this.controlText_,e),this.controlTextEl_}controlText(e,t=this.el()){if(void 0===e)return this.controlText_||"Need Text";var i=this.localize(e);this.controlText_=e,Ie(this.controlTextEl_,i),this.nonIconControl||this.player_.options_.noUITitleAttributes||t.setAttribute("title",i)}buildCSSClass(){return"vjs-control vjs-button "+super.buildCSSClass()}enable(){this.enabled_||(this.enabled_=!0,this.removeClass("vjs-disabled"),this.el_.setAttribute("aria-disabled","false"),"undefined"!=typeof this.tabIndex_&&this.el_.setAttribute("tabIndex",this.tabIndex_),this.on(["tap","click"],this.handleClick_),this.on("keydown",this.handleKeyDown_))}disable(){this.enabled_=!1,this.addClass("vjs-disabled"),this.el_.setAttribute("aria-disabled","true"),"undefined"!=typeof this.tabIndex_&&this.el_.removeAttribute("tabIndex"),this.off("mouseover",this.handleMouseOver_),this.off("mouseout",this.handleMouseOut_),this.off(["tap","click"],this.handleClick_),this.off("keydown",this.handleKeyDown_)}handleLanguagechange(){this.controlText(this.controlText_)}handleClick(e){this.options_.clickHandler&&this.options_.clickHandler.call(this,arguments)}handleKeyDown(e){r.isEventKey(e,"Space")||r.isEventKey(e,"Enter")?(e.preventDefault(),e.stopPropagation(),this.trigger("click")):super.handleKeyDown(e)}}f.registerComponent("ClickableComponent",ts);class is extends ts{constructor(e,t){super(e,t),this.update(),this.update_=e=>this.update(e),e.on("posterchange",this.update_)}dispose(){this.player().off("posterchange",this.update_),super.dispose()}createEl(){return o("div",{className:"vjs-poster"})}crossOrigin(e){if("undefined"==typeof e)return this.$("img")?this.$("img").crossOrigin:this.player_.tech_&&this.player_.tech_.isReady_?this.player_.crossOrigin():this.player_.options_.crossOrigin||this.player_.options_.crossorigin||null;null!==e&&"anonymous"!==e&&"use-credentials"!==e?this.player_.log.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${e}"`):this.$("img")&&(this.$("img").crossOrigin=e)}update(e){var t=this.player().poster();this.setSrc(t),t?this.show():this.hide()}setSrc(e){e?(this.$("img")||this.el_.appendChild(o("picture",{className:"vjs-poster",tabIndex:-1},{},o("img",{loading:"lazy",crossOrigin:this.crossOrigin()},{alt:""}))),this.$("img").src=e):this.el_.textContent=""}handleClick(e){this.player_.controls()&&(this.player_.tech(!0)&&this.player_.tech(!0).focus(),this.player_.paused()?Qt(this.player_.play()):this.player_.pause())}}is.prototype.crossorigin=is.prototype.crossOrigin,f.registerComponent("PosterImage",is);const ss={monospace:"monospace",sansSerif:"sans-serif",serif:"serif",monospaceSansSerif:'"Andale Mono", "Lucida Console", monospace',monospaceSerif:'"Courier New", monospace',proportionalSansSerif:"sans-serif",proportionalSerif:"serif",casual:'"Comic Sans MS", Impact, fantasy',script:'"Monotype Corsiva", cursive',smallcaps:'"Andale Mono", "Lucida Console", monospace, sans-serif'};function rs(e,t){let i;if(4===e.length)i=e[1]+e[1]+e[2]+e[2]+e[3]+e[3];else{if(7!==e.length)throw new Error("Invalid color code provided, "+e+"; must be formatted as e.g. #f0e or #f604e2.");i=e.slice(1)}return"rgba("+parseInt(i.slice(0,2),16)+","+parseInt(i.slice(2,4),16)+","+parseInt(i.slice(4,6),16)+","+t+")"}function ns(e,t,i){try{e.style[t]=i}catch(e){}}function as(e){return e?e+"px":""}class os extends f{constructor(s,e,t){super(s,e,t);const r=e=>{this.updateDisplayOverlay(),this.updateDisplay(e)};s.on("loadstart",e=>this.toggleDisplay(e)),s.on("texttrackchange",e=>this.updateDisplay(e)),s.on("loadedmetadata",e=>{this.updateDisplayOverlay(),this.preselectTrack(e)}),s.ready(m(this,function(){if(s.tech_&&s.tech_.featuresNativeTextTracks)this.hide();else{s.on("fullscreenchange",r),s.on("playerresize",r);const e=window.screen.orientation||window,i=window.screen.orientation?"change":"orientationchange";e.addEventListener(i,r),s.on("dispose",()=>e.removeEventListener(i,r));var t=this.options_.playerOptions.tracks||[];for(let e=0;e<t.length;e++)this.player_.addRemoteTextTrack(t[e],!0);this.preselectTrack()}}))}preselectTrack(){var t={captions:1,subtitles:1},i=this.player_.textTracks(),s=this.player_.cache_.selectedLanguage;let r,n,a;for(let e=0;e<i.length;e++){var o=i[e];s&&s.enabled&&s.language&&s.language===o.language&&o.kind in t?a=o.kind!==s.kind&&a||o:s&&!s.enabled?(a=null,r=null,n=null):o.default&&("descriptions"!==o.kind||r?o.kind in t&&!n&&(n=o):r=o)}a?a.mode="showing":n?n.mode="showing":r&&(r.mode="showing")}toggleDisplay(){this.player_.tech_&&this.player_.tech_.featuresNativeTextTracks?this.hide():this.show()}createEl(){return super.createEl("div",{className:"vjs-text-track-display"},{translate:"yes","aria-live":"off","aria-atomic":"true"})}clearDisplay(){"function"==typeof window.WebVTT&&window.WebVTT.processCues(window,[],this.el_)}updateDisplay(){var s=this.player_.textTracks(),e=this.options_.allowMultipleShowingTracks;if(this.clearDisplay(),e){var t=[];for(let e=0;e<s.length;++e){var i=s[e];"showing"===i.mode&&t.push(i)}this.updateForTrack(t)}else{let e=null,t=null,i=s.length;for(;i--;){var r=s[i];"showing"===r.mode&&("descriptions"===r.kind?e=r:t=r)}t?("off"!==this.getAttribute("aria-live")&&this.setAttribute("aria-live","off"),this.updateForTrack(t)):e&&("assertive"!==this.getAttribute("aria-live")&&this.setAttribute("aria-live","assertive"),this.updateForTrack(e))}}updateDisplayOverlay(){if(this.player_.videoHeight()&&window.CSS.supports("inset-inline: 10px")){var i=this.player_.currentWidth(),s=this.player_.currentHeight(),r=i/s,n=this.player_.videoWidth()/this.player_.videoHeight();let e=0,t=0;.1<Math.abs(r-n)&&(n<r?e=Math.round((i-s*n)/2):t=Math.round((s-i/n)/2)),ns(this.el_,"insetInline",as(e)),ns(this.el_,"insetBlock",as(t))}}updateDisplayState(e){var t=this.player_.textTrackSettings.getValues(),i=e.activeCues;let s=i.length;for(;s--;){var r,n=i[s];n&&(n=n.displayState,t.color&&(n.firstChild.style.color=t.color),t.textOpacity&&ns(n.firstChild,"color",rs(t.color||"#fff",t.textOpacity)),t.backgroundColor&&(n.firstChild.style.backgroundColor=t.backgroundColor),t.backgroundOpacity&&ns(n.firstChild,"backgroundColor",rs(t.backgroundColor||"#000",t.backgroundOpacity)),t.windowColor&&(t.windowOpacity?ns(n,"backgroundColor",rs(t.windowColor,t.windowOpacity)):n.style.backgroundColor=t.windowColor),t.edgeStyle&&("dropshadow"===t.edgeStyle?n.firstChild.style.textShadow="2px 2px 3px #222, 2px 2px 4px #222, 2px 2px 5px #222":"raised"===t.edgeStyle?n.firstChild.style.textShadow="1px 1px #222, 2px 2px #222, 3px 3px #222":"depressed"===t.edgeStyle?n.firstChild.style.textShadow="1px 1px #ccc, 0 1px #ccc, -1px -1px #222, 0 -1px #222":"uniform"===t.edgeStyle&&(n.firstChild.style.textShadow="0 0 4px #222, 0 0 4px #222, 0 0 4px #222, 0 0 4px #222")),t.fontPercent&&1!==t.fontPercent&&(r=window.parseFloat(n.style.fontSize),n.style.fontSize=r*t.fontPercent+"px",n.style.height="auto",n.style.top="auto"),t.fontFamily)&&"default"!==t.fontFamily&&("small-caps"===t.fontFamily?n.firstChild.style.fontVariant="small-caps":n.firstChild.style.fontFamily=ss[t.fontFamily])}}updateForTrack(i){if(Array.isArray(i)||(i=[i]),"function"==typeof window.WebVTT&&!i.every(e=>!e.activeCues)){var t=[];for(let e=0;e<i.length;++e){var s=i[e];for(let e=0;e<s.activeCues.length;++e)t.push(s.activeCues[e])}window.WebVTT.processCues(window,t,this.el_);for(let t=0;t<i.length;++t){var r=i[t];for(let e=0;e<r.activeCues.length;++e){var n=r.activeCues[e].displayState;De(n,"vjs-text-track-cue","vjs-text-track-cue-"+(r.language||t)),r.language&&Me(n,"lang",r.language)}this.player_.textTrackSettings&&this.updateDisplayState(r)}}}}f.registerComponent("TextTrackDisplay",os);class ls extends f{createEl(){var e=this.player_.isAudio(),e=this.localize(e?"Audio Player":"Video Player"),e=o("span",{className:"vjs-control-text",textContent:this.localize("{1} is loading.",[e])}),t=super.createEl("div",{className:"vjs-loading-spinner",dir:"ltr"});return t.appendChild(e),t}handleLanguagechange(){this.$(".vjs-control-text").textContent=this.localize("{1} is loading.",[this.player_.isAudio()?"Audio Player":"Video Player"])}}f.registerComponent("LoadingSpinner",ls);class s extends ts{createEl(e,t={},i={}){t=o("button",t=Object.assign({className:this.buildCSSClass()},t),i=Object.assign({type:"button"},i));return this.player_.options_.experimentalSvgIcons||t.appendChild(o("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),this.createControlTextEl(t),t}addChild(e,t={}){var i=this.constructor.name;return l.warn(`Adding an actionable (user controllable) child to a Button (${i}) is not supported; use a ClickableComponent instead.`),f.prototype.addChild.call(this,e,t)}enable(){super.enable(),this.el_.removeAttribute("disabled")}disable(){super.disable(),this.el_.setAttribute("disabled","disabled")}handleKeyDown(e){r.isEventKey(e,"Space")||r.isEventKey(e,"Enter")?e.stopPropagation():super.handleKeyDown(e)}}f.registerComponent("Button",s);class ds extends s{constructor(e,t){super(e,t),this.mouseused_=!1,this.setIcon("play"),this.on("mousedown",e=>this.handleMouseDown(e))}buildCSSClass(){return"vjs-big-play-button"}handleClick(e){var t=this.player_.play();if(this.mouseused_&&"clientX"in e&&"clientY"in e)Qt(t),this.player_.tech(!0)&&this.player_.tech(!0).focus();else{var e=this.player_.getChild("controlBar");const i=e&&e.getChild("playToggle");i?(e=()=>i.focus(),Yt(t)?t.then(e,()=>{}):this.setTimeout(e,1)):this.player_.tech(!0).focus()}}handleKeyDown(e){this.mouseused_=!1,super.handleKeyDown(e)}handleMouseDown(e){this.mouseused_=!0}}ds.prototype.controlText_="Play Video",f.registerComponent("BigPlayButton",ds);s;f.registerComponent("CloseButton",class extends s{constructor(e,t){super(e,t),this.setIcon("cancel"),this.controlText(t&&t.controlText||this.localize("Close"))}buildCSSClass(){return"vjs-close-button "+super.buildCSSClass()}handleClick(e){this.trigger({type:"close",bubbles:!1})}handleKeyDown(e){r.isEventKey(e,"Esc")?(e.preventDefault(),e.stopPropagation(),this.trigger("click")):super.handleKeyDown(e)}});class hs extends s{constructor(e,t={}){super(e,t),t.replay=void 0===t.replay||t.replay,this.setIcon("play"),this.on(e,"play",e=>this.handlePlay(e)),this.on(e,"pause",e=>this.handlePause(e)),t.replay&&this.on(e,"ended",e=>this.handleEnded(e))}buildCSSClass(){return"vjs-play-control "+super.buildCSSClass()}handleClick(e){this.player_.paused()?Qt(this.player_.play()):this.player_.pause()}handleSeeked(e){this.removeClass("vjs-ended"),this.player_.paused()?this.handlePause(e):this.handlePlay(e)}handlePlay(e){this.removeClass("vjs-ended","vjs-paused"),this.addClass("vjs-playing"),this.setIcon("pause"),this.controlText("Pause")}handlePause(e){this.removeClass("vjs-playing"),this.addClass("vjs-paused"),this.setIcon("play"),this.controlText("Play")}handleEnded(e){this.removeClass("vjs-playing"),this.addClass("vjs-ended"),this.setIcon("replay"),this.controlText("Replay"),this.one(this.player_,"seeked",e=>this.handleSeeked(e))}}hs.prototype.controlText_="Play",f.registerComponent("PlayToggle",hs);class us extends f{constructor(e,t){super(e,t),this.on(e,["timeupdate","ended","seeking"],e=>this.update(e)),this.updateTextNode_()}createEl(){var e=this.buildCSSClass(),t=super.createEl("div",{className:e+" vjs-time-control vjs-control"}),i=o("span",{className:"vjs-control-text",textContent:this.localize(this.labelText_)+" "},{role:"presentation"});return t.appendChild(i),this.contentEl_=o("span",{className:e+"-display"},{role:"presentation"}),t.appendChild(this.contentEl_),t}dispose(){this.contentEl_=null,this.textNode_=null,super.dispose()}update(e){!this.player_.options_.enableSmoothSeeking&&"seeking"===e.type||this.updateContent(e)}updateTextNode_(e=0){e=Wt(e),this.formattedTime_!==e&&(this.formattedTime_=e,this.requestNamedAnimationFrame("TimeDisplay#updateTextNode_",()=>{if(this.contentEl_){let e=this.textNode_;e&&this.contentEl_.firstChild!==e&&(e=null,l.warn("TimeDisplay#updateTextnode_: Prevented replacement of text node element since it was no longer a child of this node. Appending a new node instead.")),this.textNode_=document.createTextNode(this.formattedTime_),this.textNode_&&(e?this.contentEl_.replaceChild(this.textNode_,e):this.contentEl_.appendChild(this.textNode_))}}))}updateContent(e){}}us.prototype.labelText_="Time",us.prototype.controlText_="Time",f.registerComponent("TimeDisplay",us);class cs extends us{buildCSSClass(){return"vjs-current-time"}updateContent(e){let t;t=this.player_.ended()?this.player_.duration():this.player_.scrubbing()?this.player_.getCache().currentTime:this.player_.currentTime(),this.updateTextNode_(t)}}cs.prototype.labelText_="Current Time",cs.prototype.controlText_="Current Time",f.registerComponent("CurrentTimeDisplay",cs);class ps extends us{constructor(e,t){super(e,t);t=e=>this.updateContent(e);this.on(e,"durationchange",t),this.on(e,"loadstart",t),this.on(e,"loadedmetadata",t)}buildCSSClass(){return"vjs-duration"}updateContent(e){var t=this.player_.duration();this.updateTextNode_(t)}}ps.prototype.labelText_="Duration",ps.prototype.controlText_="Duration",f.registerComponent("DurationDisplay",ps);class ms extends f{createEl(){var e=super.createEl("div",{className:"vjs-time-control vjs-time-divider"},{"aria-hidden":!0}),t=super.createEl("div"),i=super.createEl("span",{textContent:"/"});return t.appendChild(i),e.appendChild(t),e}}f.registerComponent("TimeDivider",ms);class gs extends us{constructor(e,t){super(e,t),this.on(e,"durationchange",e=>this.updateContent(e))}buildCSSClass(){return"vjs-remaining-time"}createEl(){var e=super.createEl();return!1!==this.options_.displayNegative&&e.insertBefore(o("span",{},{"aria-hidden":!0},"-"),this.contentEl_),e}updateContent(e){if("number"==typeof this.player_.duration()){let e;e=this.player_.ended()?0:this.player_.remainingTimeDisplay?this.player_.remainingTimeDisplay():this.player_.remainingTime(),this.updateTextNode_(e)}}}gs.prototype.labelText_="Remaining Time",gs.prototype.controlText_="Remaining Time",f.registerComponent("RemainingTimeDisplay",gs);class fs extends f{constructor(e,t){super(e,t),this.updateShowing(),this.on(this.player(),"durationchange",e=>this.updateShowing(e))}createEl(){var e=super.createEl("div",{className:"vjs-live-control vjs-control"});return this.contentEl_=o("div",{className:"vjs-live-display"},{"aria-live":"off"}),this.contentEl_.appendChild(o("span",{className:"vjs-control-text",textContent:this.localize("Stream Type")+" "})),this.contentEl_.appendChild(document.createTextNode(this.localize("LIVE"))),e.appendChild(this.contentEl_),e}dispose(){this.contentEl_=null,super.dispose()}updateShowing(e){this.player().duration()===1/0?this.show():this.hide()}}f.registerComponent("LiveDisplay",fs);class ys extends s{constructor(e,t){super(e,t),this.updateLiveEdgeStatus(),this.player_.liveTracker&&(this.updateLiveEdgeStatusHandler_=e=>this.updateLiveEdgeStatus(e),this.on(this.player_.liveTracker,"liveedgechange",this.updateLiveEdgeStatusHandler_))}createEl(){var e=super.createEl("button",{className:"vjs-seek-to-live-control vjs-control"});return this.setIcon("circle",e),this.textEl_=o("span",{className:"vjs-seek-to-live-text",textContent:this.localize("LIVE")},{"aria-hidden":"true"}),e.appendChild(this.textEl_),e}updateLiveEdgeStatus(){!this.player_.liveTracker||this.player_.liveTracker.atLiveEdge()?(this.setAttribute("aria-disabled",!0),this.addClass("vjs-at-live-edge"),this.controlText("Seek to live, currently playing live")):(this.setAttribute("aria-disabled",!1),this.removeClass("vjs-at-live-edge"),this.controlText("Seek to live, currently behind live"))}handleClick(){this.player_.liveTracker.seekToLiveEdge()}dispose(){this.player_.liveTracker&&this.off(this.player_.liveTracker,"liveedgechange",this.updateLiveEdgeStatusHandler_),this.textEl_=null,super.dispose()}}function _s(e,t,i){return e=Number(e),Math.min(i,Math.max(t,isNaN(e)?t:e))}ys.prototype.controlText_="Seek to live, currently playing live",f.registerComponent("SeekToLive",ys);Ut=Object.freeze({__proto__:null,clamp:_s});class vs extends f{constructor(e,t){super(e,t),this.handleMouseDown_=e=>this.handleMouseDown(e),this.handleMouseUp_=e=>this.handleMouseUp(e),this.handleKeyDown_=e=>this.handleKeyDown(e),this.handleClick_=e=>this.handleClick(e),this.handleMouseMove_=e=>this.handleMouseMove(e),this.update_=e=>this.update(e),this.bar=this.getChild(this.options_.barName),this.vertical(!!this.options_.vertical),this.enable()}enabled(){return this.enabled_}enable(){this.enabled()||(this.on("mousedown",this.handleMouseDown_),this.on("touchstart",this.handleMouseDown_),this.on("keydown",this.handleKeyDown_),this.on("click",this.handleClick_),this.on(this.player_,"controlsvisible",this.update),this.playerEvent&&this.on(this.player_,this.playerEvent,this.update),this.removeClass("disabled"),this.setAttribute("tabindex",0),this.enabled_=!0)}disable(){var e;this.enabled()&&(e=this.bar.el_.ownerDocument,this.off("mousedown",this.handleMouseDown_),this.off("touchstart",this.handleMouseDown_),this.off("keydown",this.handleKeyDown_),this.off("click",this.handleClick_),this.off(this.player_,"controlsvisible",this.update_),this.off(e,"mousemove",this.handleMouseMove_),this.off(e,"mouseup",this.handleMouseUp_),this.off(e,"touchmove",this.handleMouseMove_),this.off(e,"touchend",this.handleMouseUp_),this.removeAttribute("tabindex"),this.addClass("disabled"),this.playerEvent&&this.off(this.player_,this.playerEvent,this.update),this.enabled_=!1)}createEl(e,t={},i={}){return t.className=t.className+" vjs-slider",t=Object.assign({tabIndex:0},t),i=Object.assign({role:"slider","aria-valuenow":0,"aria-valuemin":0,"aria-valuemax":100},i),super.createEl(e,t,i)}handleMouseDown(e){var t=this.bar.el_.ownerDocument;"mousedown"===e.type&&e.preventDefault(),"touchstart"!==e.type||oe||e.preventDefault(),Be(),this.addClass("vjs-sliding"),this.trigger("slideractive"),this.on(t,"mousemove",this.handleMouseMove_),this.on(t,"mouseup",this.handleMouseUp_),this.on(t,"touchmove",this.handleMouseMove_),this.on(t,"touchend",this.handleMouseUp_),this.handleMouseMove(e,!0)}handleMouseMove(e){}handleMouseUp(e){var t=this.bar.el_.ownerDocument;Fe(),this.removeClass("vjs-sliding"),this.trigger("sliderinactive"),this.off(t,"mousemove",this.handleMouseMove_),this.off(t,"mouseup",this.handleMouseUp_),this.off(t,"touchmove",this.handleMouseMove_),this.off(t,"touchend",this.handleMouseUp_),this.update()}update(){if(this.el_&&this.bar){const t=this.getProgress();return t!==this.progress_&&(this.progress_=t,this.requestNamedAnimationFrame("Slider#update",()=>{var e=this.vertical()?"height":"width";this.bar.el().style[e]=(100*t).toFixed(2)+"%"})),t}}getProgress(){return Number(_s(this.getPercent(),0,1).toFixed(4))}calculateDistance(e){e=He(this.el_,e);return this.vertical()?e.y:e.x}handleKeyDown(e){r.isEventKey(e,"Left")||r.isEventKey(e,"Down")?(e.preventDefault(),e.stopPropagation(),this.stepBack()):r.isEventKey(e,"Right")||r.isEventKey(e,"Up")?(e.preventDefault(),e.stopPropagation(),this.stepForward()):super.handleKeyDown(e)}handleClick(e){e.stopPropagation(),e.preventDefault()}vertical(e){if(void 0===e)return this.vertical_||!1;this.vertical_=!!e,this.vertical_?this.addClass("vjs-slider-vertical"):this.addClass("vjs-slider-horizontal")}}f.registerComponent("Slider",vs);const bs=(e,t)=>_s(e/t*100,0,100).toFixed(2)+"%";class Ts extends f{constructor(e,t){super(e,t),this.partEls_=[],this.on(e,"progress",e=>this.update(e))}createEl(){var e=super.createEl("div",{className:"vjs-load-progress"}),t=o("span",{className:"vjs-control-text"}),i=o("span",{textContent:this.localize("Loaded")}),s=document.createTextNode(": ");return this.percentageEl_=o("span",{className:"vjs-control-text-loaded-percentage",textContent:"0%"}),e.appendChild(t),t.appendChild(i),t.appendChild(s),t.appendChild(this.percentageEl_),e}dispose(){this.partEls_=null,this.percentageEl_=null,super.dispose()}update(e){this.requestNamedAnimationFrame("LoadProgressBar#update",()=>{var e=this.player_.liveTracker,i=this.player_.buffered(),e=e&&e.isLive()?e.seekableEnd():this.player_.duration(),s=this.player_.bufferedEnd(),r=this.partEls_,e=bs(s,e);this.percent_!==e&&(this.el_.style.width=e,Ie(this.percentageEl_,e),this.percent_=e);for(let t=0;t<i.length;t++){var n=i.start(t),a=i.end(t);let e=r[t];e||(e=this.el_.appendChild(o()),r[t]=e),e.dataset.start===n&&e.dataset.end===a||(e.dataset.start=n,e.dataset.end=a,e.style.left=bs(n,s),e.style.width=bs(a-n,s))}for(let e=r.length;e>i.length;e--)this.el_.removeChild(r[e-1]);r.length=i.length})}}f.registerComponent("LoadProgressBar",Ts);class Ss extends f{constructor(e,t){super(e,t),this.update=_t(m(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-time-tooltip"},{"aria-hidden":"true"})}update(s,r,n){var a=je(this.el_),o=qe(this.player_.el()),r=s.width*r;if(o&&a){let e=s.left-o.left+r,t=s.width-r+(o.right-s.right),i=(t||(t=s.width-r,e=r),a.width/2);e<i?i+=i-e:t<i&&(i=t),i<0?i=0:i>a.width&&(i=a.width),i=Math.round(i),this.el_.style.right=`-${i}px`,this.write(n)}}write(e){Ie(this.el_,e)}updateTime(r,n,a,o){this.requestNamedAnimationFrame("TimeTooltip#updateTime",()=>{let e;var t,i,s=this.player_.duration();e=this.player_.liveTracker&&this.player_.liveTracker.isLive()?((i=(t=this.player_.liveTracker.liveWindow())-n*t)<1?"":"-")+Wt(i,t):Wt(a,s),this.update(r,n,e),o&&o()})}}f.registerComponent("TimeTooltip",Ss);class ws extends f{constructor(e,t){super(e,t),this.setIcon("circle"),this.update=_t(m(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-play-progress vjs-slider-bar"},{"aria-hidden":"true"})}update(e,t){var i,s=this.getChild("timeTooltip");s&&(i=this.player_.scrubbing()?this.player_.getCache().currentTime:this.player_.currentTime(),s.updateTime(e,t,i))}}ws.prototype.options_={children:[]},c||ie||ws.prototype.options_.children.push("timeTooltip"),f.registerComponent("PlayProgressBar",ws);class Es extends f{constructor(e,t){super(e,t),this.update=_t(m(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-mouse-display"})}update(e,t){var i=t*this.player_.duration();this.getChild("timeTooltip").updateTime(e,t,i,()=>{this.el_.style.left=e.width*t+"px"})}}Es.prototype.options_={children:["timeTooltip"]},f.registerComponent("MouseTimeDisplay",Es);class Cs extends vs{constructor(e,t){super(e,t),this.setEventHandlers_()}setEventHandlers_(){this.update_=m(this,this.update),this.update=_t(this.update_,30),this.on(this.player_,["ended","durationchange","timeupdate"],this.update),this.player_.liveTracker&&this.on(this.player_.liveTracker,"liveedgechange",this.update),this.updateInterval=null,this.enableIntervalHandler_=e=>this.enableInterval_(e),this.disableIntervalHandler_=e=>this.disableInterval_(e),this.on(this.player_,["playing"],this.enableIntervalHandler_),this.on(this.player_,["ended","pause","waiting"],this.disableIntervalHandler_),"hidden"in document&&"visibilityState"in document&&this.on(document,"visibilitychange",this.toggleVisibility_)}toggleVisibility_(e){"hidden"===document.visibilityState?(this.cancelNamedAnimationFrame("SeekBar#update"),this.cancelNamedAnimationFrame("Slider#update"),this.disableInterval_(e)):(this.player_.ended()||this.player_.paused()||this.enableInterval_(),this.update())}enableInterval_(){this.updateInterval||(this.updateInterval=this.setInterval(this.update,30))}disableInterval_(e){this.player_.liveTracker&&this.player_.liveTracker.isLive()&&e&&"ended"!==e.type||this.updateInterval&&(this.clearInterval(this.updateInterval),this.updateInterval=null)}createEl(){return super.createEl("div",{className:"vjs-progress-holder"},{"aria-label":this.localize("Progress Bar")})}update(e){if("hidden"!==document.visibilityState){const s=super.update();return this.requestNamedAnimationFrame("SeekBar#update",()=>{var e=this.player_.ended()?this.player_.duration():this.getCurrentTime_(),t=this.player_.liveTracker;let i=this.player_.duration();t&&t.isLive()&&(i=this.player_.liveTracker.liveCurrentTime()),this.percent_!==s&&(this.el_.setAttribute("aria-valuenow",(100*s).toFixed(2)),this.percent_=s),this.currentTime_===e&&this.duration_===i||(this.el_.setAttribute("aria-valuetext",this.localize("progress bar timing: currentTime={1} duration={2}",[Wt(e,i),Wt(i,i)],"{1} of {2}")),this.currentTime_=e,this.duration_=i),this.bar&&this.bar.update(qe(this.el()),this.getProgress())}),s}}userSeek_(e){this.player_.liveTracker&&this.player_.liveTracker.isLive()&&this.player_.liveTracker.nextSeekedFromUser(),this.player_.currentTime(e)}getCurrentTime_(){return this.player_.scrubbing()?this.player_.getCache().currentTime:this.player_.currentTime()}getPercent(){var e=this.getCurrentTime_();let t;var i=this.player_.liveTracker;return i&&i.isLive()?(t=(e-i.seekableStart())/i.liveWindow(),i.atLiveEdge()&&(t=1)):t=e/this.player_.duration(),t}handleMouseDown(e){Xe(e)&&(e.stopPropagation(),this.videoWasPlaying=!this.player_.paused(),this.player_.pause(),super.handleMouseDown(e))}handleMouseMove(t,i=!1){if(Xe(t)&&!isNaN(this.player_.duration())){i||this.player_.scrubbing()||this.player_.scrubbing(!0);let e;i=this.calculateDistance(t),t=this.player_.liveTracker;if(t&&t.isLive()){if(.99<=i)return void t.seekToLiveEdge();var s=t.seekableStart(),r=t.liveCurrentTime();if((e=(e=(e=s+i*t.liveWindow())>=r?r:e)<=s?s+.1:e)===1/0)return}else(e=i*this.player_.duration())===this.player_.duration()&&(e-=.1);this.userSeek_(e),this.player_.options_.enableSmoothSeeking&&this.update()}}enable(){super.enable();var e=this.getChild("mouseTimeDisplay");e&&e.show()}disable(){super.disable();var e=this.getChild("mouseTimeDisplay");e&&e.hide()}handleMouseUp(e){super.handleMouseUp(e),e&&e.stopPropagation(),this.player_.scrubbing(!1),this.player_.trigger({type:"timeupdate",target:this,manuallyTriggered:!0}),this.videoWasPlaying?Qt(this.player_.play()):this.update_()}stepForward(){this.userSeek_(this.player_.currentTime()+5)}stepBack(){this.userSeek_(this.player_.currentTime()-5)}handleAction(e){this.player_.paused()?this.player_.play():this.player_.pause()}handleKeyDown(e){var t,i=this.player_.liveTracker;r.isEventKey(e,"Space")||r.isEventKey(e,"Enter")?(e.preventDefault(),e.stopPropagation(),this.handleAction(e)):r.isEventKey(e,"Home")?(e.preventDefault(),e.stopPropagation(),this.userSeek_(0)):r.isEventKey(e,"End")?(e.preventDefault(),e.stopPropagation(),i&&i.isLive()?this.userSeek_(i.liveCurrentTime()):this.userSeek_(this.player_.duration())):/^[0-9]$/.test(r(e))?(e.preventDefault(),e.stopPropagation(),t=10*(r.codes[r(e)]-r.codes[0])/100,i&&i.isLive()?this.userSeek_(i.seekableStart()+i.liveWindow()*t):this.userSeek_(this.player_.duration()*t)):r.isEventKey(e,"PgDn")?(e.preventDefault(),e.stopPropagation(),this.userSeek_(this.player_.currentTime()-60)):r.isEventKey(e,"PgUp")?(e.preventDefault(),e.stopPropagation(),this.userSeek_(this.player_.currentTime()+60)):super.handleKeyDown(e)}dispose(){this.disableInterval_(),this.off(this.player_,["ended","durationchange","timeupdate"],this.update),this.player_.liveTracker&&this.off(this.player_.liveTracker,"liveedgechange",this.update),this.off(this.player_,["playing"],this.enableIntervalHandler_),this.off(this.player_,["ended","pause","waiting"],this.disableIntervalHandler_),"hidden"in document&&"visibilityState"in document&&this.off(document,"visibilitychange",this.toggleVisibility_),super.dispose()}}Cs.prototype.options_={children:["loadProgressBar","playProgressBar"],barName:"playProgressBar"},c||ie||Cs.prototype.options_.children.splice(1,0,"mouseTimeDisplay"),f.registerComponent("SeekBar",Cs);class ks extends f{constructor(e,t){super(e,t),this.handleMouseMove=_t(m(this,this.handleMouseMove),30),this.throttledHandleMouseSeek=_t(m(this,this.handleMouseSeek),30),this.handleMouseUpHandler_=e=>this.handleMouseUp(e),this.handleMouseDownHandler_=e=>this.handleMouseDown(e),this.enable()}createEl(){return super.createEl("div",{className:"vjs-progress-control vjs-control"})}handleMouseMove(e){var t,i,s,r,n=this.getChild("seekBar");n&&(t=n.getChild("playProgressBar"),i=n.getChild("mouseTimeDisplay"),t||i)&&(s=je(r=n.el()),r=_s(r=He(r,e).x,0,1),i&&i.update(s,r),t)&&t.update(s,n.getProgress())}handleMouseSeek(e){var t=this.getChild("seekBar");t&&t.handleMouseMove(e)}enabled(){return this.enabled_}disable(){var e;this.children().forEach(e=>e.disable&&e.disable()),this.enabled()&&(this.off(["mousedown","touchstart"],this.handleMouseDownHandler_),this.off(this.el_,"mousemove",this.handleMouseMove),this.removeListenersAddedOnMousedownAndTouchstart(),this.addClass("disabled"),this.enabled_=!1,this.player_.scrubbing())&&(e=this.getChild("seekBar"),this.player_.scrubbing(!1),e.videoWasPlaying)&&Qt(this.player_.play())}enable(){this.children().forEach(e=>e.enable&&e.enable()),this.enabled()||(this.on(["mousedown","touchstart"],this.handleMouseDownHandler_),this.on(this.el_,"mousemove",this.handleMouseMove),this.removeClass("disabled"),this.enabled_=!0)}removeListenersAddedOnMousedownAndTouchstart(){var e=this.el_.ownerDocument;this.off(e,"mousemove",this.throttledHandleMouseSeek),this.off(e,"touchmove",this.throttledHandleMouseSeek),this.off(e,"mouseup",this.handleMouseUpHandler_),this.off(e,"touchend",this.handleMouseUpHandler_)}handleMouseDown(e){var t=this.el_.ownerDocument,i=this.getChild("seekBar");i&&i.handleMouseDown(e),this.on(t,"mousemove",this.throttledHandleMouseSeek),this.on(t,"touchmove",this.throttledHandleMouseSeek),this.on(t,"mouseup",this.handleMouseUpHandler_),this.on(t,"touchend",this.handleMouseUpHandler_)}handleMouseUp(e){var t=this.getChild("seekBar");t&&t.handleMouseUp(e),this.removeListenersAddedOnMousedownAndTouchstart()}}ks.prototype.options_={children:["seekBar"]},f.registerComponent("ProgressControl",ks);class Is extends s{constructor(e,t){super(e,t),this.setIcon("picture-in-picture-enter"),this.on(e,["enterpictureinpicture","leavepictureinpicture"],e=>this.handlePictureInPictureChange(e)),this.on(e,["disablepictureinpicturechanged","loadedmetadata"],e=>this.handlePictureInPictureEnabledChange(e)),this.on(e,["loadedmetadata","audioonlymodechange","audiopostermodechange"],()=>this.handlePictureInPictureAudioModeChange()),this.disable()}buildCSSClass(){return"vjs-picture-in-picture-control vjs-hidden "+super.buildCSSClass()}handlePictureInPictureAudioModeChange(){"audio"===this.player_.currentType().substring(0,5)||this.player_.audioPosterMode()||this.player_.audioOnlyMode()?(this.player_.isInPictureInPicture()&&this.player_.exitPictureInPicture(),this.hide()):this.show()}handlePictureInPictureEnabledChange(){document.pictureInPictureEnabled&&!1===this.player_.disablePictureInPicture()||this.player_.options_.enableDocumentPictureInPicture&&"documentPictureInPicture"in window?this.enable():this.disable()}handlePictureInPictureChange(e){this.player_.isInPictureInPicture()?(this.setIcon("picture-in-picture-exit"),this.controlText("Exit Picture-in-Picture")):(this.setIcon("picture-in-picture-enter"),this.controlText("Picture-in-Picture")),this.handlePictureInPictureEnabledChange()}handleClick(e){this.player_.isInPictureInPicture()?this.player_.exitPictureInPicture():this.player_.requestPictureInPicture()}show(){"function"==typeof document.exitPictureInPicture&&super.show()}}Is.prototype.controlText_="Picture-in-Picture",f.registerComponent("PictureInPictureToggle",Is);class xs extends s{constructor(e,t){super(e,t),this.setIcon("fullscreen-enter"),this.on(e,"fullscreenchange",e=>this.handleFullscreenChange(e)),!1===document[e.fsApi_.fullscreenEnabled]&&this.disable()}buildCSSClass(){return"vjs-fullscreen-control "+super.buildCSSClass()}handleFullscreenChange(e){this.player_.isFullscreen()?(this.controlText("Exit Fullscreen"),this.setIcon("fullscreen-exit")):(this.controlText("Fullscreen"),this.setIcon("fullscreen-enter"))}handleClick(e){this.player_.isFullscreen()?this.player_.exitFullscreen():this.player_.requestFullscreen()}}xs.prototype.controlText_="Fullscreen",f.registerComponent("FullscreenToggle",xs);class As extends f{createEl(){var e=super.createEl("div",{className:"vjs-volume-level"});return this.setIcon("circle",e),e.appendChild(super.createEl("span",{className:"vjs-control-text"})),e}}f.registerComponent("VolumeLevel",As);class Ds extends f{constructor(e,t){super(e,t),this.update=_t(m(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-volume-tooltip"},{"aria-hidden":"true"})}update(t,i,s,e){if(!s){var s=qe(this.el_),r=qe(this.player_.el()),i=t.width*i;if(!r||!s)return;var n=t.left-r.left+i,i=t.width-i+(r.right-t.right);let e=s.width/2;n<e?e+=e-n:i<e&&(e=i),e<0?e=0:e>s.width&&(e=s.width),this.el_.style.right=`-${e}px`}this.write(e+"%")}write(e){Ie(this.el_,e)}updateVolume(e,t,i,s,r){this.requestNamedAnimationFrame("VolumeLevelTooltip#updateVolume",()=>{this.update(e,t,i,s.toFixed(0)),r&&r()})}}f.registerComponent("VolumeLevelTooltip",Ds);class Ps extends f{constructor(e,t){super(e,t),this.update=_t(m(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-mouse-display"})}update(e,t,i){var s=100*t;this.getChild("volumeLevelTooltip").updateVolume(e,t,i,s,()=>{i?this.el_.style.bottom=e.height*t+"px":this.el_.style.left=e.width*t+"px"})}}Ps.prototype.options_={children:["volumeLevelTooltip"]},f.registerComponent("MouseVolumeLevelDisplay",Ps);class Ls extends vs{constructor(e,t){super(e,t),this.on("slideractive",e=>this.updateLastVolume_(e)),this.on(e,"volumechange",e=>this.updateARIAAttributes(e)),e.ready(()=>this.updateARIAAttributes())}createEl(){return super.createEl("div",{className:"vjs-volume-bar vjs-slider-bar"},{"aria-label":this.localize("Volume Level"),"aria-live":"polite"})}handleMouseDown(e){Xe(e)&&super.handleMouseDown(e)}handleMouseMove(e){var t,i,s,r=this.getChild("mouseVolumeLevelDisplay");r&&(t=qe(s=this.el()),i=this.vertical(),s=He(s,e),s=_s(s=i?s.y:s.x,0,1),r.update(t,s,i)),Xe(e)&&(this.checkMuted(),this.player_.volume(this.calculateDistance(e)))}checkMuted(){this.player_.muted()&&this.player_.muted(!1)}getPercent(){return this.player_.muted()?0:this.player_.volume()}stepForward(){this.checkMuted(),this.player_.volume(this.player_.volume()+.1)}stepBack(){this.checkMuted(),this.player_.volume(this.player_.volume()-.1)}updateARIAAttributes(e){var t=this.player_.muted()?0:this.volumeAsPercentage_();this.el_.setAttribute("aria-valuenow",t),this.el_.setAttribute("aria-valuetext",t+"%")}volumeAsPercentage_(){return Math.round(100*this.player_.volume())}updateLastVolume_(){const e=this.player_.volume();this.one("sliderinactive",()=>{0===this.player_.volume()&&this.player_.lastVolume_(e)})}}Ls.prototype.options_={children:["volumeLevel"],barName:"volumeLevel"},c||ie||Ls.prototype.options_.children.splice(0,0,"mouseVolumeLevelDisplay"),Ls.prototype.playerEvent="volumechange",f.registerComponent("VolumeBar",Ls);class Os extends f{constructor(e,t={}){var i,s;t.vertical=t.vertical||!1,"undefined"!=typeof t.volumeBar&&!Y(t.volumeBar)||(t.volumeBar=t.volumeBar||{},t.volumeBar.vertical=t.vertical),super(e,t),i=this,(s=e).tech_&&!s.tech_.featuresVolumeControl&&i.addClass("vjs-hidden"),i.on(s,"loadstart",function(){s.tech_.featuresVolumeControl?i.removeClass("vjs-hidden"):i.addClass("vjs-hidden")}),this.throttledHandleMouseMove=_t(m(this,this.handleMouseMove),30),this.handleMouseUpHandler_=e=>this.handleMouseUp(e),this.on("mousedown",e=>this.handleMouseDown(e)),this.on("touchstart",e=>this.handleMouseDown(e)),this.on("mousemove",e=>this.handleMouseMove(e)),this.on(this.volumeBar,["focus","slideractive"],()=>{this.volumeBar.addClass("vjs-slider-active"),this.addClass("vjs-slider-active"),this.trigger("slideractive")}),this.on(this.volumeBar,["blur","sliderinactive"],()=>{this.volumeBar.removeClass("vjs-slider-active"),this.removeClass("vjs-slider-active"),this.trigger("sliderinactive")})}createEl(){let e="vjs-volume-horizontal";return this.options_.vertical&&(e="vjs-volume-vertical"),super.createEl("div",{className:"vjs-volume-control vjs-control "+e})}handleMouseDown(e){var t=this.el_.ownerDocument;this.on(t,"mousemove",this.throttledHandleMouseMove),this.on(t,"touchmove",this.throttledHandleMouseMove),this.on(t,"mouseup",this.handleMouseUpHandler_),this.on(t,"touchend",this.handleMouseUpHandler_)}handleMouseUp(e){var t=this.el_.ownerDocument;this.off(t,"mousemove",this.throttledHandleMouseMove),this.off(t,"touchmove",this.throttledHandleMouseMove),this.off(t,"mouseup",this.handleMouseUpHandler_),this.off(t,"touchend",this.handleMouseUpHandler_)}handleMouseMove(e){this.volumeBar.handleMouseMove(e)}}Os.prototype.options_={children:["volumeBar"]},f.registerComponent("VolumeControl",Os);class Rs extends s{constructor(e,t){var i,s;super(e,t),i=this,(s=e).tech_&&!s.tech_.featuresMuteControl&&i.addClass("vjs-hidden"),i.on(s,"loadstart",function(){s.tech_.featuresMuteControl?i.removeClass("vjs-hidden"):i.addClass("vjs-hidden")}),this.on(e,["loadstart","volumechange"],e=>this.update(e))}buildCSSClass(){return"vjs-mute-control "+super.buildCSSClass()}handleClick(e){var t=this.player_.volume(),i=this.player_.lastVolume_();0===t?(this.player_.volume(i<.1?.1:i),this.player_.muted(!1)):this.player_.muted(!this.player_.muted())}update(e){this.updateIcon_(),this.updateControlText_()}updateIcon_(){var e=this.player_.volume();let t=3;this.setIcon("volume-high"),c&&this.player_.tech_&&this.player_.tech_.el_&&this.player_.muted(this.player_.tech_.el_.muted),0===e||this.player_.muted()?(this.setIcon("volume-mute"),t=0):e<.33?(this.setIcon("volume-low"),t=1):e<.67&&(this.setIcon("volume-medium"),t=2),Pe(this.el_,[0,1,2,3].reduce((e,t)=>e+`${t?" ":""}vjs-vol-`+t,"")),De(this.el_,"vjs-vol-"+t)}updateControlText_(){var e=this.player_.muted()||0===this.player_.volume()?"Unmute":"Mute";this.controlText()!==e&&this.controlText(e)}}Rs.prototype.controlText_="Mute",f.registerComponent("MuteToggle",Rs);class Ns extends f{constructor(e,t={}){"undefined"!=typeof t.inline?t.inline=t.inline:t.inline=!0,"undefined"!=typeof t.volumeControl&&!Y(t.volumeControl)||(t.volumeControl=t.volumeControl||{},t.volumeControl.vertical=!t.inline),super(e,t),this.handleKeyPressHandler_=e=>this.handleKeyPress(e),this.on(e,["loadstart"],e=>this.volumePanelState_(e)),this.on(this.muteToggle,"keyup",e=>this.handleKeyPress(e)),this.on(this.volumeControl,"keyup",e=>this.handleVolumeControlKeyUp(e)),this.on("keydown",e=>this.handleKeyPress(e)),this.on("mouseover",e=>this.handleMouseOver(e)),this.on("mouseout",e=>this.handleMouseOut(e)),this.on(this.volumeControl,["slideractive"],this.sliderActive_),this.on(this.volumeControl,["sliderinactive"],this.sliderInactive_)}sliderActive_(){this.addClass("vjs-slider-active")}sliderInactive_(){this.removeClass("vjs-slider-active")}volumePanelState_(){this.volumeControl.hasClass("vjs-hidden")&&this.muteToggle.hasClass("vjs-hidden")&&this.addClass("vjs-hidden"),this.volumeControl.hasClass("vjs-hidden")&&!this.muteToggle.hasClass("vjs-hidden")&&this.addClass("vjs-mute-toggle-only")}createEl(){let e="vjs-volume-panel-horizontal";return this.options_.inline||(e="vjs-volume-panel-vertical"),super.createEl("div",{className:"vjs-volume-panel vjs-control "+e})}dispose(){this.handleMouseOut(),super.dispose()}handleVolumeControlKeyUp(e){r.isEventKey(e,"Esc")&&this.muteToggle.focus()}handleMouseOver(e){this.addClass("vjs-hover"),pt(document,"keyup",this.handleKeyPressHandler_)}handleMouseOut(e){this.removeClass("vjs-hover"),p(document,"keyup",this.handleKeyPressHandler_)}handleKeyPress(e){r.isEventKey(e,"Esc")&&this.handleMouseOut()}}Ns.prototype.options_={children:["muteToggle","volumeControl"]},f.registerComponent("VolumePanel",Ns);class Ms extends s{constructor(e,t){super(e,t),this.validOptions=[5,10,30],this.skipTime=this.getSkipForwardTime(),this.skipTime&&this.validOptions.includes(this.skipTime)?(this.setIcon("forward-"+this.skipTime),this.controlText(this.localize("Skip forward {1} seconds",[this.skipTime.toLocaleString(e.language())])),this.show()):this.hide()}getSkipForwardTime(){var e=this.options_.playerOptions;return e.controlBar&&e.controlBar.skipButtons&&e.controlBar.skipButtons.forward}buildCSSClass(){return`vjs-skip-forward-${this.getSkipForwardTime()} `+super.buildCSSClass()}handleClick(e){if(!isNaN(this.player_.duration())){var t=this.player_.currentTime(),i=this.player_.liveTracker,i=i&&i.isLive()?i.seekableEnd():this.player_.duration();let e;e=t+this.skipTime<=i?t+this.skipTime:i,this.player_.currentTime(e)}}handleLanguagechange(){this.controlText(this.localize("Skip forward {1} seconds",[this.skipTime]))}}Ms.prototype.controlText_="Skip Forward",f.registerComponent("SkipForward",Ms);class Us extends s{constructor(e,t){super(e,t),this.validOptions=[5,10,30],this.skipTime=this.getSkipBackwardTime(),this.skipTime&&this.validOptions.includes(this.skipTime)?(this.setIcon("replay-"+this.skipTime),this.controlText(this.localize("Skip backward {1} seconds",[this.skipTime.toLocaleString(e.language())])),this.show()):this.hide()}getSkipBackwardTime(){var e=this.options_.playerOptions;return e.controlBar&&e.controlBar.skipButtons&&e.controlBar.skipButtons.backward}buildCSSClass(){return`vjs-skip-backward-${this.getSkipBackwardTime()} `+super.buildCSSClass()}handleClick(e){var t=this.player_.currentTime(),i=this.player_.liveTracker,i=i&&i.isLive()&&i.seekableStart();let s;s=i&&t-this.skipTime<=i?i:t>=this.skipTime?t-this.skipTime:0,this.player_.currentTime(s)}handleLanguagechange(){this.controlText(this.localize("Skip backward {1} seconds",[this.skipTime]))}}Us.prototype.controlText_="Skip Backward",f.registerComponent("SkipBackward",Us);class Bs extends f{constructor(e,t){super(e,t),t&&(this.menuButton_=t.menuButton),this.focusedChild_=-1,this.on("keydown",e=>this.handleKeyDown(e)),this.boundHandleBlur_=e=>this.handleBlur(e),this.boundHandleTapClick_=e=>this.handleTapClick(e)}addEventListenerForItem(e){e instanceof f&&(this.on(e,"blur",this.boundHandleBlur_),this.on(e,["tap","click"],this.boundHandleTapClick_))}removeEventListenerForItem(e){e instanceof f&&(this.off(e,"blur",this.boundHandleBlur_),this.off(e,["tap","click"],this.boundHandleTapClick_))}removeChild(e){"string"==typeof e&&(e=this.getChild(e)),this.removeEventListenerForItem(e),super.removeChild(e)}addItem(e){e=this.addChild(e);e&&this.addEventListenerForItem(e)}createEl(){var e=this.options_.contentElType||"ul",e=(this.contentEl_=o(e,{className:"vjs-menu-content"}),this.contentEl_.setAttribute("role","menu"),super.createEl("div",{append:this.contentEl_,className:"vjs-menu"}));return e.appendChild(this.contentEl_),pt(e,"click",function(e){e.preventDefault(),e.stopImmediatePropagation()}),e}dispose(){this.contentEl_=null,this.boundHandleBlur_=null,this.boundHandleTapClick_=null,super.dispose()}handleBlur(e){const t=e.relatedTarget||document.activeElement;this.children().some(e=>e.el()===t)||(e=this.menuButton_)&&e.buttonPressed_&&t!==e.el().firstChild&&e.unpressButton()}handleTapClick(t){var e;this.menuButton_&&(this.menuButton_.unpressButton(),e=this.children(),Array.isArray(e))&&(e=e.filter(e=>e.el()===t.target)[0])&&"CaptionSettingsMenuItem"!==e.name()&&this.menuButton_.focus()}handleKeyDown(e){r.isEventKey(e,"Left")||r.isEventKey(e,"Down")?(e.preventDefault(),e.stopPropagation(),this.stepForward()):(r.isEventKey(e,"Right")||r.isEventKey(e,"Up"))&&(e.preventDefault(),e.stopPropagation(),this.stepBack())}stepForward(){let e=0;void 0!==this.focusedChild_&&(e=this.focusedChild_+1),this.focus(e)}stepBack(){let e=0;void 0!==this.focusedChild_&&(e=this.focusedChild_-1),this.focus(e)}focus(e=0){var t=this.children().slice();t.length&&t[0].hasClass("vjs-menu-title")&&t.shift(),0<t.length&&(e<0?e=0:e>=t.length&&(e=t.length-1),t[this.focusedChild_=e].el_.focus())}}f.registerComponent("Menu",Bs);class Fs extends f{constructor(e,t={}){super(e,t),this.menuButton_=new s(e,t),this.menuButton_.controlText(this.controlText_),this.menuButton_.el_.setAttribute("aria-haspopup","true");e=s.prototype.buildCSSClass(),this.menuButton_.el_.className=this.buildCSSClass()+" "+e,this.menuButton_.removeClass("vjs-control"),this.addChild(this.menuButton_),this.update(),this.enabled_=!0,t=e=>this.handleClick(e);this.handleMenuKeyUp_=e=>this.handleMenuKeyUp(e),this.on(this.menuButton_,"tap",t),this.on(this.menuButton_,"click",t),this.on(this.menuButton_,"keydown",e=>this.handleKeyDown(e)),this.on(this.menuButton_,"mouseenter",()=>{this.addClass("vjs-hover"),this.menu.show(),pt(document,"keyup",this.handleMenuKeyUp_)}),this.on("mouseleave",e=>this.handleMouseLeave(e)),this.on("keydown",e=>this.handleSubmenuKeyDown(e))}update(){var e=this.createMenu();this.menu&&(this.menu.dispose(),this.removeChild(this.menu)),this.menu=e,this.addChild(e),this.buttonPressed_=!1,this.menuButton_.el_.setAttribute("aria-expanded","false"),this.items&&this.items.length<=this.hideThreshold_?(this.hide(),this.menu.contentEl_.removeAttribute("role")):(this.show(),this.menu.contentEl_.setAttribute("role","menu"))}createMenu(){var e,t=new Bs(this.player_,{menuButton:this});if(this.hideThreshold_=0,this.options_.title&&(e=o("li",{className:"vjs-menu-title",textContent:g(this.options_.title),tabIndex:-1}),e=new f(this.player_,{el:e}),t.addItem(e)),this.items=this.createItems(),this.items)for(let e=0;e<this.items.length;e++)t.addItem(this.items[e]);return t}createItems(){}createEl(){return super.createEl("div",{className:this.buildWrapperCSSClass()},{})}setIcon(e){super.setIcon(e,this.menuButton_.el_)}buildWrapperCSSClass(){let e="vjs-menu-button";!0===this.options_.inline?e+="-inline":e+="-popup";var t=s.prototype.buildCSSClass();return`vjs-menu-button ${e} ${t} `+super.buildCSSClass()}buildCSSClass(){let e="vjs-menu-button";return!0===this.options_.inline?e+="-inline":e+="-popup",`vjs-menu-button ${e} `+super.buildCSSClass()}controlText(e,t=this.menuButton_.el()){return this.menuButton_.controlText(e,t)}dispose(){this.handleMouseLeave(),super.dispose()}handleClick(e){this.buttonPressed_?this.unpressButton():this.pressButton()}handleMouseLeave(e){this.removeClass("vjs-hover"),p(document,"keyup",this.handleMenuKeyUp_)}focus(){this.menuButton_.focus()}blur(){this.menuButton_.blur()}handleKeyDown(e){r.isEventKey(e,"Esc")||r.isEventKey(e,"Tab")?(this.buttonPressed_&&this.unpressButton(),r.isEventKey(e,"Tab")||(e.preventDefault(),this.menuButton_.focus())):!r.isEventKey(e,"Up")&&!r.isEventKey(e,"Down")||this.buttonPressed_||(e.preventDefault(),this.pressButton())}handleMenuKeyUp(e){(r.isEventKey(e,"Esc")||r.isEventKey(e,"Tab"))&&this.removeClass("vjs-hover")}handleSubmenuKeyPress(e){this.handleSubmenuKeyDown(e)}handleSubmenuKeyDown(e){(r.isEventKey(e,"Esc")||r.isEventKey(e,"Tab"))&&(this.buttonPressed_&&this.unpressButton(),r.isEventKey(e,"Tab")||(e.preventDefault(),this.menuButton_.focus()))}pressButton(){this.enabled_&&(this.buttonPressed_=!0,this.menu.show(),this.menu.lockShowing(),this.menuButton_.el_.setAttribute("aria-expanded","true"),c&&Ce()||this.menu.focus())}unpressButton(){this.enabled_&&(this.buttonPressed_=!1,this.menu.unlockShowing(),this.menu.hide(),this.menuButton_.el_.setAttribute("aria-expanded","false"))}disable(){this.unpressButton(),this.enabled_=!1,this.addClass("vjs-disabled"),this.menuButton_.disable()}enable(){this.enabled_=!0,this.removeClass("vjs-disabled"),this.menuButton_.enable()}}f.registerComponent("MenuButton",Fs);class qs extends Fs{constructor(e,t){const i=t.tracks;if(super(e,t),this.items.length<=1&&this.hide(),i){const s=m(this,this.update);i.addEventListener("removetrack",s),i.addEventListener("addtrack",s),i.addEventListener("labelchange",s),this.player_.on("ready",s),this.player_.on("dispose",function(){i.removeEventListener("removetrack",s),i.removeEventListener("addtrack",s),i.removeEventListener("labelchange",s)})}}}f.registerComponent("TrackButton",qs);const js=["Tab","Esc","Up","Down","Right","Left"];class Hs extends ts{constructor(e,t){super(e,t),this.selectable=t.selectable,this.isSelected_=t.selected||!1,this.multiSelectable=t.multiSelectable,this.selected(this.isSelected_),this.selectable?this.multiSelectable?this.el_.setAttribute("role","menuitemcheckbox"):this.el_.setAttribute("role","menuitemradio"):this.el_.setAttribute("role","menuitem")}createEl(e,t,i){this.nonIconControl=!0;t=super.createEl("li",Object.assign({className:"vjs-menu-item",tabIndex:-1},t),i),i=o("span",{className:"vjs-menu-item-text",textContent:this.localize(this.options_.label)});return this.player_.options_.experimentalSvgIcons?t.appendChild(i):t.replaceChild(i,t.querySelector(".vjs-icon-placeholder")),t}handleKeyDown(t){js.some(e=>r.isEventKey(t,e))||super.handleKeyDown(t)}handleClick(e){this.selected(!0)}selected(e){this.selectable&&(e?(this.addClass("vjs-selected"),this.el_.setAttribute("aria-checked","true"),this.controlText(", selected"),this.isSelected_=!0):(this.removeClass("vjs-selected"),this.el_.setAttribute("aria-checked","false"),this.controlText(""),this.isSelected_=!1))}}f.registerComponent("MenuItem",Hs);class Vs extends Hs{constructor(e,t){var i=t.track;const s=e.textTracks(),r=(t.label=i.label||i.language||"Unknown",t.selected="showing"===i.mode,super(e,t),this.track=i,this.kinds=(t.kinds||[t.kind||this.track.kind]).filter(Boolean),(...e)=>{this.handleTracksChange.apply(this,e)}),n=(...e)=>{this.handleSelectedLanguageChange.apply(this,e)};if(e.on(["loadstart","texttrackchange"],r),s.addEventListener("change",r),s.addEventListener("selectedlanguagechange",n),this.on("dispose",function(){e.off(["loadstart","texttrackchange"],r),s.removeEventListener("change",r),s.removeEventListener("selectedlanguagechange",n)}),void 0===s.onchange){let e;this.on(["tap","click"],function(){if("object"!=typeof window.Event)try{e=new window.Event("change")}catch(e){}e||(e=document.createEvent("Event")).initEvent("change",!0,!0),s.dispatchEvent(e)})}this.handleTracksChange()}handleClick(e){var t=this.track,i=this.player_.textTracks();if(super.handleClick(e),i)for(let e=0;e<i.length;e++){var s=i[e];-1!==this.kinds.indexOf(s.kind)&&(s===t?"showing"!==s.mode&&(s.mode="showing"):"disabled"!==s.mode&&(s.mode="disabled"))}}handleTracksChange(e){var t="showing"===this.track.mode;t!==this.isSelected_&&this.selected(t)}handleSelectedLanguageChange(e){var t;"showing"!==this.track.mode||(t=this.player_.cache_.selectedLanguage)&&t.enabled&&t.language===this.track.language&&t.kind!==this.track.kind||(this.player_.cache_.selectedLanguage={enabled:!0,language:this.track.language,kind:this.track.kind})}dispose(){this.track=null,super.dispose()}}f.registerComponent("TextTrackMenuItem",Vs);class $s extends Vs{constructor(e,t){t.track={player:e,kind:t.kind,kinds:t.kinds,default:!1,mode:"disabled"},t.kinds||(t.kinds=[t.kind]),t.label?t.track.label=t.label:t.track.label=t.kinds.join(" and ")+" off",t.selectable=!0,t.multiSelectable=!1,super(e,t)}handleTracksChange(e){var i=this.player().textTracks();let s=!0;for(let e=0,t=i.length;e<t;e++){var r=i[e];if(-1<this.options_.kinds.indexOf(r.kind)&&"showing"===r.mode){s=!1;break}}s!==this.isSelected_&&this.selected(s)}handleSelectedLanguageChange(e){var i=this.player().textTracks();let s=!0;for(let e=0,t=i.length;e<t;e++){var r=i[e];if(-1<["captions","descriptions","subtitles"].indexOf(r.kind)&&"showing"===r.mode){s=!1;break}}s&&(this.player_.cache_.selectedLanguage={enabled:!1})}handleLanguagechange(){this.$(".vjs-menu-item-text").textContent=this.player_.localize(this.options_.label),super.handleLanguagechange()}}f.registerComponent("OffTextTrackMenuItem",$s);class zs extends qs{constructor(e,t={}){t.tracks=e.textTracks(),super(e,t)}createItems(t=[],i=Vs){let e;this.label_&&(e=this.label_+" off"),t.push(new $s(this.player_,{kinds:this.kinds_,kind:this.kind_,label:e})),this.hideThreshold_+=1;var s=this.player_.textTracks();Array.isArray(this.kinds_)||(this.kinds_=[this.kind_]);for(let e=0;e<s.length;e++){var r,n=s[e];-1<this.kinds_.indexOf(n.kind)&&((r=new i(this.player_,{track:n,kinds:this.kinds_,kind:this.kind_,selectable:!0,multiSelectable:!1})).addClass(`vjs-${n.kind}-menu-item`),t.push(r))}return t}}f.registerComponent("TextTrackButton",zs);class Ws extends Hs{constructor(e,t){var i=t.track,s=t.cue,r=e.currentTime();t.selectable=!0,t.multiSelectable=!1,t.label=s.text,t.selected=s.startTime<=r&&r<s.endTime,super(e,t),this.track=i,this.cue=s}handleClick(e){super.handleClick(),this.player_.currentTime(this.cue.startTime)}}f.registerComponent("ChaptersTrackMenuItem",Ws);class Gs extends zs{constructor(e,t,i){super(e,t,i),this.setIcon("chapters"),this.selectCurrentItem_=()=>{this.items.forEach(e=>{e.selected(this.track_.activeCues[0]===e.cue)})}}buildCSSClass(){return"vjs-chapters-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-chapters-button "+super.buildWrapperCSSClass()}update(e){e&&e.track&&"chapters"!==e.track.kind||((e=this.findChaptersTrack())!==this.track_?(this.setTrack(e),super.update()):(!this.items||e&&e.cues&&e.cues.length!==this.items.length)&&super.update())}setTrack(e){var t;this.track_!==e&&(this.updateHandler_||(this.updateHandler_=this.update.bind(this)),this.track_&&((t=this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_))&&t.removeEventListener("load",this.updateHandler_),this.track_.removeEventListener("cuechange",this.selectCurrentItem_),this.track_=null),this.track_=e,this.track_)&&(this.track_.mode="hidden",(t=this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_))&&t.addEventListener("load",this.updateHandler_),this.track_.addEventListener("cuechange",this.selectCurrentItem_))}findChaptersTrack(){var t=this.player_.textTracks()||[];for(let e=t.length-1;0<=e;e--){var i=t[e];if(i.kind===this.kind_)return i}}getMenuCaption(){return this.track_&&this.track_.label?this.track_.label:this.localize(g(this.kind_))}createMenu(){return this.options_.title=this.getMenuCaption(),super.createMenu()}createItems(){var i=[];if(this.track_){var s=this.track_.cues;if(s)for(let e=0,t=s.length;e<t;e++){var r=s[e],r=new Ws(this.player_,{track:this.track_,cue:r});i.push(r)}}return i}}Gs.prototype.kind_="chapters",Gs.prototype.controlText_="Chapters",f.registerComponent("ChaptersButton",Gs);class Xs extends zs{constructor(e,t,i){super(e,t,i),this.setIcon("audio-description");const s=e.textTracks(),r=m(this,this.handleTracksChange);s.addEventListener("change",r),this.on("dispose",function(){s.removeEventListener("change",r)})}handleTracksChange(e){var i=this.player().textTracks();let s=!1;for(let e=0,t=i.length;e<t;e++){var r=i[e];if(r.kind!==this.kind_&&"showing"===r.mode){s=!0;break}}s?this.disable():this.enable()}buildCSSClass(){return"vjs-descriptions-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-descriptions-button "+super.buildWrapperCSSClass()}}Xs.prototype.kind_="descriptions",Xs.prototype.controlText_="Descriptions",f.registerComponent("DescriptionsButton",Xs);class Ks extends zs{constructor(e,t,i){super(e,t,i),this.setIcon("subtitles")}buildCSSClass(){return"vjs-subtitles-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-subtitles-button "+super.buildWrapperCSSClass()}}Ks.prototype.kind_="subtitles",Ks.prototype.controlText_="Subtitles",f.registerComponent("SubtitlesButton",Ks);class Ys extends Vs{constructor(e,t){t.track={player:e,kind:t.kind,label:t.kind+" settings",selectable:!1,default:!1,mode:"disabled"},t.selectable=!1,t.name="CaptionSettingsMenuItem",super(e,t),this.addClass("vjs-texttrack-settings"),this.controlText(", opens "+t.kind+" settings dialog")}handleClick(e){this.player().getChild("textTrackSettings").open()}handleLanguagechange(){this.$(".vjs-menu-item-text").textContent=this.player_.localize(this.options_.kind+" settings"),super.handleLanguagechange()}}f.registerComponent("CaptionSettingsMenuItem",Ys);class Qs extends zs{constructor(e,t,i){super(e,t,i),this.setIcon("captions")}buildCSSClass(){return"vjs-captions-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-captions-button "+super.buildWrapperCSSClass()}createItems(){var e=[];return this.player().tech_&&this.player().tech_.featuresNativeTextTracks||!this.player().getChild("textTrackSettings")||(e.push(new Ys(this.player_,{kind:this.kind_})),this.hideThreshold_+=1),super.createItems(e)}}Qs.prototype.kind_="captions",Qs.prototype.controlText_="Captions",f.registerComponent("CaptionsButton",Qs);class Js extends Vs{createEl(e,t,i){e=super.createEl(e,t,i),t=e.querySelector(".vjs-menu-item-text");return"captions"===this.options_.track.kind&&(this.player_.options_.experimentalSvgIcons?this.setIcon("captions",e):t.appendChild(o("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),t.appendChild(o("span",{className:"vjs-control-text",textContent:" "+this.localize("Captions")}))),e}}f.registerComponent("SubsCapsMenuItem",Js);class Zs extends zs{constructor(e,t={}){super(e,t),this.label_="subtitles",this.setIcon("subtitles"),-1<["en","en-us","en-ca","fr-ca"].indexOf(this.player_.language_)&&(this.label_="captions",this.setIcon("captions")),this.menuButton_.controlText(g(this.label_))}buildCSSClass(){return"vjs-subs-caps-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-subs-caps-button "+super.buildWrapperCSSClass()}createItems(){let e=[];return this.player().tech_&&this.player().tech_.featuresNativeTextTracks||!this.player().getChild("textTrackSettings")||(e.push(new Ys(this.player_,{kind:this.label_})),this.hideThreshold_+=1),e=super.createItems(e,Js)}}Zs.prototype.kinds_=["captions","subtitles"],Zs.prototype.controlText_="Subtitles",f.registerComponent("SubsCapsButton",Zs);class er extends Hs{constructor(e,t){var i=t.track;const s=e.audioTracks(),r=(t.label=i.label||i.language||"Unknown",t.selected=i.enabled,super(e,t),this.track=i,this.addClass(`vjs-${i.kind}-menu-item`),(...e)=>{this.handleTracksChange.apply(this,e)});s.addEventListener("change",r),this.on("dispose",()=>{s.removeEventListener("change",r)})}createEl(e,t,i){e=super.createEl(e,t,i),t=e.querySelector(".vjs-menu-item-text");return 0<=["main-desc","description"].indexOf(this.options_.track.kind)&&(t.appendChild(o("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),t.appendChild(o("span",{className:"vjs-control-text",textContent:" "+this.localize("Descriptions")}))),e}handleClick(e){if(super.handleClick(e),this.track.enabled=!0,this.player_.tech_.featuresNativeAudioTracks){var t=this.player_.audioTracks();for(let e=0;e<t.length;e++){var i=t[e];i!==this.track&&(i.enabled=i===this.track)}}}handleTracksChange(e){this.selected(this.track.enabled)}}f.registerComponent("AudioTrackMenuItem",er);class tr extends qs{constructor(e,t={}){t.tracks=e.audioTracks(),super(e,t),this.setIcon("audio")}buildCSSClass(){return"vjs-audio-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-audio-button "+super.buildWrapperCSSClass()}createItems(t=[]){this.hideThreshold_=1;var i=this.player_.audioTracks();for(let e=0;e<i.length;e++){var s=i[e];t.push(new er(this.player_,{track:s,selectable:!0,multiSelectable:!1}))}return t}}tr.prototype.controlText_="Audio Track",f.registerComponent("AudioTrackButton",tr);class ir extends Hs{constructor(e,t){var i=t.rate,s=parseFloat(i,10);t.label=i,t.selected=s===e.playbackRate(),t.selectable=!0,t.multiSelectable=!1,super(e,t),this.label=i,this.rate=s,this.on(e,"ratechange",e=>this.update(e))}handleClick(e){super.handleClick(),this.player().playbackRate(this.rate)}update(e){this.selected(this.player().playbackRate()===this.rate)}}ir.prototype.contentElType="button",f.registerComponent("PlaybackRateMenuItem",ir);class sr extends Fs{constructor(e,t){super(e,t),this.menuButton_.el_.setAttribute("aria-describedby",this.labelElId_),this.updateVisibility(),this.updateLabel(),this.on(e,"loadstart",e=>this.updateVisibility(e)),this.on(e,"ratechange",e=>this.updateLabel(e)),this.on(e,"playbackrateschange",e=>this.handlePlaybackRateschange(e))}createEl(){var e=super.createEl();return this.labelElId_="vjs-playback-rate-value-label-"+this.id_,this.labelEl_=o("div",{className:"vjs-playback-rate-value",id:this.labelElId_,textContent:"1x"}),e.appendChild(this.labelEl_),e}dispose(){this.labelEl_=null,super.dispose()}buildCSSClass(){return"vjs-playback-rate "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-playback-rate "+super.buildWrapperCSSClass()}createItems(){var t=this.playbackRates(),i=[];for(let e=t.length-1;0<=e;e--)i.push(new ir(this.player(),{rate:t[e]+"x"}));return i}handlePlaybackRateschange(e){this.update()}playbackRates(){var e=this.player();return e.playbackRates&&e.playbackRates()||[]}playbackRateSupported(){return this.player().tech_&&this.player().tech_.featuresPlaybackRate&&this.playbackRates()&&0<this.playbackRates().length}updateVisibility(e){this.playbackRateSupported()?this.removeClass("vjs-hidden"):this.addClass("vjs-hidden")}updateLabel(e){this.playbackRateSupported()&&(this.labelEl_.textContent=this.player().playbackRate()+"x")}}sr.prototype.controlText_="Playback Rate",f.registerComponent("PlaybackRateMenuButton",sr);class rr extends f{buildCSSClass(){return"vjs-spacer "+super.buildCSSClass()}createEl(e="div",t={},i={}){return t.className||(t.className=this.buildCSSClass()),super.createEl(e,t,i)}}f.registerComponent("Spacer",rr);f.registerComponent("CustomControlSpacer",class extends rr{buildCSSClass(){return"vjs-custom-control-spacer "+super.buildCSSClass()}createEl(){return super.createEl("div",{className:this.buildCSSClass(),textContent:" "})}});class nr extends f{createEl(){return super.createEl("div",{className:"vjs-control-bar",dir:"ltr"})}}nr.prototype.options_={children:["playToggle","skipBackward","skipForward","volumePanel","currentTimeDisplay","timeDivider","durationDisplay","progressControl","liveDisplay","seekToLive","remainingTimeDisplay","customControlSpacer","playbackRateMenuButton","chaptersButton","descriptionsButton","subsCapsButton","audioTrackButton","pictureInPictureToggle","fullscreenToggle"]},f.registerComponent("ControlBar",nr);class ar extends ii{constructor(e,t){super(e,t),this.on(e,"error",e=>{this.open(e)})}buildCSSClass(){return"vjs-error-display "+super.buildCSSClass()}content(){var e=this.player().error();return e?this.localize(e.message):""}}ar.prototype.options_=Object.assign({},ii.prototype.options_,{pauseOnOpen:!1,fillAlways:!0,temporary:!1,uncloseable:!0}),f.registerComponent("ErrorDisplay",ar);const or="vjs-text-track-settings";var lr=["#000","Black"],dr=["#00F","Blue"],hr=["#0FF","Cyan"],ur=["#0F0","Green"],t=["#F0F","Magenta"],cr=["#F00","Red"],pr=["#FFF","White"],n=["#FF0","Yellow"],mr=["1","Opaque"],gr=["0.5","Semi-Transparent"],fr=["0","Transparent"];const yr={backgroundColor:{selector:".vjs-bg-color > select",id:"captions-background-color-%s",label:"Color",options:[lr,pr,cr,ur,dr,n,t,hr]},backgroundOpacity:{selector:".vjs-bg-opacity > select",id:"captions-background-opacity-%s",label:"Opacity",options:[mr,gr,fr]},color:{selector:".vjs-text-color > select",id:"captions-foreground-color-%s",label:"Color",options:[pr,lr,cr,ur,dr,n,t,hr]},edgeStyle:{selector:".vjs-edge-style > select",id:"%s",label:"Text Edge Style",options:[["none","None"],["raised","Raised"],["depressed","Depressed"],["uniform","Uniform"],["dropshadow","Drop shadow"]]},fontFamily:{selector:".vjs-font-family > select",id:"captions-font-family-%s",label:"Font Family",options:[["proportionalSansSerif","Proportional Sans-Serif"],["monospaceSansSerif","Monospace Sans-Serif"],["proportionalSerif","Proportional Serif"],["monospaceSerif","Monospace Serif"],["casual","Casual"],["script","Script"],["small-caps","Small Caps"]]},fontPercent:{selector:".vjs-font-percent > select",id:"captions-font-size-%s",label:"Font Size",options:[["0.50","50%"],["0.75","75%"],["1.00","100%"],["1.25","125%"],["1.50","150%"],["1.75","175%"],["2.00","200%"],["3.00","300%"],["4.00","400%"]],default:2,parser:e=>"1.00"===e?null:Number(e)},textOpacity:{selector:".vjs-text-opacity > select",id:"captions-foreground-opacity-%s",label:"Opacity",options:[mr,gr]},windowColor:{selector:".vjs-window-color > select",id:"captions-window-color-%s",label:"Color"},windowOpacity:{selector:".vjs-window-opacity > select",id:"captions-window-opacity-%s",label:"Opacity",options:[fr,gr,mr]}};function _r(e,t){if((e=t?t(e):e)&&"none"!==e)return e}yr.windowColor.options=yr.backgroundColor.options;class vr extends ii{constructor(e,t){t.temporary=!1,super(e,t),this.updateDisplay=this.updateDisplay.bind(this),this.fill(),this.hasBeenOpened_=this.hasBeenFilled_=!0,this.endDialog=o("p",{className:"vjs-control-text",textContent:this.localize("End of dialog window.")}),this.el().appendChild(this.endDialog),this.setDefaults(),void 0===t.persistTextTrackSettings&&(this.options_.persistTextTrackSettings=this.options_.playerOptions.persistTextTrackSettings),this.on(this.$(".vjs-done-button"),"click",()=>{this.saveSettings(),this.close()}),this.on(this.$(".vjs-default-button"),"click",()=>{this.setDefaults(),this.updateDisplay()}),G(yr,e=>{this.on(this.$(e.selector),"change",this.updateDisplay)}),this.options_.persistTextTrackSettings&&this.restoreSettings()}dispose(){this.endDialog=null,super.dispose()}createElSelect_(e,t="",i="label"){e=yr[e];const s=e.id.replace("%s",this.id_),r=[t,s].join(" ").trim();t="vjs_select_"+ot++;return[`<${i} id="${s}"${"label"===i?` for="${t}" class="vjs-label"`:""}>`,this.localize(e.label),`</${i}>`,`<select aria-labelledby="${r}" id="${t}">`].concat(e.options.map(e=>{var t=s+"-"+e[1].replace(/\W+/g,"");return[`<option id="${t}" value="${e[0]}" `,`aria-labelledby="${r} ${t}">`,this.localize(e[1]),"</option>"].join("")})).concat("</select>").join("")}createElFgColor_(){var e="captions-text-legend-"+this.id_;return['<fieldset class="vjs-fg vjs-track-setting">',`<legend id="${e}">`,this.localize("Text"),"</legend>",'<span class="vjs-text-color">',this.createElSelect_("color",e),"</span>",'<span class="vjs-text-opacity vjs-opacity">',this.createElSelect_("textOpacity",e),"</span>","</fieldset>"].join("")}createElBgColor_(){var e="captions-background-"+this.id_;return['<fieldset class="vjs-bg vjs-track-setting">',`<legend id="${e}">`,this.localize("Text Background"),"</legend>",'<span class="vjs-bg-color">',this.createElSelect_("backgroundColor",e),"</span>",'<span class="vjs-bg-opacity vjs-opacity">',this.createElSelect_("backgroundOpacity",e),"</span>","</fieldset>"].join("")}createElWinColor_(){var e="captions-window-"+this.id_;return['<fieldset class="vjs-window vjs-track-setting">',`<legend id="${e}">`,this.localize("Caption Area Background"),"</legend>",'<span class="vjs-window-color">',this.createElSelect_("windowColor",e),"</span>",'<span class="vjs-window-opacity vjs-opacity">',this.createElSelect_("windowOpacity",e),"</span>","</fieldset>"].join("")}createElColors_(){return o("div",{className:"vjs-track-settings-colors",innerHTML:[this.createElFgColor_(),this.createElBgColor_(),this.createElWinColor_()].join("")})}createElFont_(){return o("div",{className:"vjs-track-settings-font",innerHTML:['<fieldset class="vjs-font-percent vjs-track-setting">',this.createElSelect_("fontPercent","","legend"),"</fieldset>",'<fieldset class="vjs-edge-style vjs-track-setting">',this.createElSelect_("edgeStyle","","legend"),"</fieldset>",'<fieldset class="vjs-font-family vjs-track-setting">',this.createElSelect_("fontFamily","","legend"),"</fieldset>"].join("")})}createElControls_(){var e=this.localize("restore all settings to the default values");return o("div",{className:"vjs-track-settings-controls",innerHTML:[`<button type="button" class="vjs-default-button" title="${e}">`,this.localize("Reset"),`<span class="vjs-control-text"> ${e}</span>`,"</button>",`<button type="button" class="vjs-done-button">${this.localize("Done")}</button>`].join("")})}content(){return[this.createElColors_(),this.createElFont_(),this.createElControls_()]}label(){return this.localize("Caption Settings Dialog")}description(){return this.localize("Beginning of dialog window. Escape will cancel and close the window.")}buildCSSClass(){return super.buildCSSClass()+" vjs-text-track-settings"}getValues(){return X(yr,(e,t,i)=>{s=this.$(t.selector),t=t.parser;var s=_r(s.options[s.options.selectedIndex].value,t);return void 0!==s&&(e[i]=s),e},{})}setValues(n){G(yr,(e,t)=>{var i=this.$(e.selector),s=n[t],r=e.parser;if(s)for(let e=0;e<i.options.length;e++)if(_r(i.options[e].value,r)===s){i.selectedIndex=e;break}})}setDefaults(){G(yr,e=>{var t=e.hasOwnProperty("default")?e.default:0;this.$(e.selector).selectedIndex=t})}restoreSettings(){let e;try{e=JSON.parse(window.localStorage.getItem(or))}catch(e){l.warn(e)}e&&this.setValues(e)}saveSettings(){if(this.options_.persistTextTrackSettings){var e=this.getValues();try{Object.keys(e).length?window.localStorage.setItem(or,JSON.stringify(e)):window.localStorage.removeItem(or)}catch(e){l.warn(e)}}}updateDisplay(){var e=this.player_.getChild("textTrackDisplay");e&&e.updateDisplay()}conditionalBlur_(){this.previouslyActiveEl_=null;var e=this.player_.controlBar,t=e&&e.subsCapsButton,e=e&&e.captionsButton;t?t.focus():e&&e.focus()}handleLanguagechange(){this.fill()}}f.registerComponent("TextTrackSettings",vr);class br extends f{constructor(e,t){let i=t.ResizeObserver||window.ResizeObserver;super(e,d({createEl:!(i=null===t.ResizeObserver?!1:i),reportTouchActivity:!1},t)),this.ResizeObserver=t.ResizeObserver||window.ResizeObserver,this.loadListener_=null,this.resizeObserver_=null,this.debouncedHandler_=vt(()=>{this.resizeHandler()},100,!1,this),i?(this.resizeObserver_=new this.ResizeObserver(this.debouncedHandler_),this.resizeObserver_.observe(e.el())):(this.loadListener_=()=>{if(this.el_&&this.el_.contentWindow){const t=this.debouncedHandler_;let e=this.unloadListener_=function(){p(this,"resize",t),p(this,"unload",e),e=null};pt(this.el_.contentWindow,"unload",e),pt(this.el_.contentWindow,"resize",t)}},this.one("load",this.loadListener_))}createEl(){return super.createEl("iframe",{className:"vjs-resize-manager",tabIndex:-1,title:this.localize("No content")},{"aria-hidden":"true"})}resizeHandler(){this.player_&&this.player_.trigger&&this.player_.trigger("playerresize")}dispose(){this.debouncedHandler_&&this.debouncedHandler_.cancel(),this.resizeObserver_&&(this.player_.el()&&this.resizeObserver_.unobserve(this.player_.el()),this.resizeObserver_.disconnect()),this.loadListener_&&this.off("load",this.loadListener_),this.el_&&this.el_.contentWindow&&this.unloadListener_&&this.unloadListener_.call(this.el_.contentWindow),this.ResizeObserver=null,this.resizeObserver=null,this.debouncedHandler_=null,this.loadListener_=null,super.dispose()}}f.registerComponent("ResizeManager",br);const Tr={trackingThreshold:20,liveTolerance:15};class Sr extends f{constructor(e,t){super(e,d(Tr,t,{createEl:!1})),this.trackLiveHandler_=()=>this.trackLive_(),this.handlePlay_=e=>this.handlePlay(e),this.handleFirstTimeupdate_=e=>this.handleFirstTimeupdate(e),this.handleSeeked_=e=>this.handleSeeked(e),this.seekToLiveEdge_=e=>this.seekToLiveEdge(e),this.reset_(),this.on(this.player_,"durationchange",e=>this.handleDurationchange(e)),this.on(this.player_,"canplay",()=>this.toggleTracking())}trackLive_(){var t=this.player_.seekable();if(t&&t.length){var t=Number(window.performance.now().toFixed(4)),i=-1===this.lastTime_?0:(t-this.lastTime_)/1e3,t=(this.lastTime_=t,this.pastSeekEnd_=this.pastSeekEnd()+i,this.liveCurrentTime()),i=this.player_.currentTime();let e=this.player_.paused()||this.seekedBehindLive_||Math.abs(t-i)>this.options_.liveTolerance;(e=this.timeupdateSeen_&&t!==1/0?e:!1)!==this.behindLiveEdge_&&(this.behindLiveEdge_=e,this.trigger("liveedgechange"))}}handleDurationchange(){this.toggleTracking()}toggleTracking(){this.player_.duration()===1/0&&this.liveWindow()>=this.options_.trackingThreshold?(this.player_.options_.liveui&&this.player_.addClass("vjs-liveui"),this.startTracking()):(this.player_.removeClass("vjs-liveui"),this.stopTracking())}startTracking(){this.isTracking()||(this.timeupdateSeen_||(this.timeupdateSeen_=this.player_.hasStarted()),this.trackingInterval_=this.setInterval(this.trackLiveHandler_,30),this.trackLive_(),this.on(this.player_,["play","pause"],this.trackLiveHandler_),this.timeupdateSeen_?this.on(this.player_,"seeked",this.handleSeeked_):(this.one(this.player_,"play",this.handlePlay_),this.one(this.player_,"timeupdate",this.handleFirstTimeupdate_)))}handleFirstTimeupdate(){this.timeupdateSeen_=!0,this.on(this.player_,"seeked",this.handleSeeked_)}handleSeeked(){var e=Math.abs(this.liveCurrentTime()-this.player_.currentTime());this.seekedBehindLive_=this.nextSeekedFromUser_&&2<e,this.nextSeekedFromUser_=!1,this.trackLive_()}handlePlay(){this.one(this.player_,"timeupdate",this.seekToLiveEdge_)}reset_(){this.lastTime_=-1,this.pastSeekEnd_=0,this.lastSeekEnd_=-1,this.behindLiveEdge_=!0,this.timeupdateSeen_=!1,this.seekedBehindLive_=!1,this.nextSeekedFromUser_=!1,this.clearInterval(this.trackingInterval_),this.trackingInterval_=null,this.off(this.player_,["play","pause"],this.trackLiveHandler_),this.off(this.player_,"seeked",this.handleSeeked_),this.off(this.player_,"play",this.handlePlay_),this.off(this.player_,"timeupdate",this.handleFirstTimeupdate_),this.off(this.player_,"timeupdate",this.seekToLiveEdge_)}nextSeekedFromUser(){this.nextSeekedFromUser_=!0}stopTracking(){this.isTracking()&&(this.reset_(),this.trigger("liveedgechange"))}seekableEnd(){var e=this.player_.seekable(),t=[];let i=e?e.length:0;for(;i--;)t.push(e.end(i));return t.length?t.sort()[t.length-1]:1/0}seekableStart(){var e=this.player_.seekable(),t=[];let i=e?e.length:0;for(;i--;)t.push(e.start(i));return t.length?t.sort()[0]:0}liveWindow(){var e=this.liveCurrentTime();return e===1/0?0:e-this.seekableStart()}isLive(){return this.isTracking()}atLiveEdge(){return!this.behindLiveEdge()}liveCurrentTime(){return this.pastSeekEnd()+this.seekableEnd()}pastSeekEnd(){var e=this.seekableEnd();return-1!==this.lastSeekEnd_&&e!==this.lastSeekEnd_&&(this.pastSeekEnd_=0),this.lastSeekEnd_=e,this.pastSeekEnd_}behindLiveEdge(){return this.behindLiveEdge_}isTracking(){return"number"==typeof this.trackingInterval_}seekToLiveEdge(){this.seekedBehindLive_=!1,this.atLiveEdge()||(this.nextSeekedFromUser_=!1,this.player_.currentTime(this.liveCurrentTime()))}dispose(){this.stopTracking(),super.dispose()}}f.registerComponent("LiveTracker",Sr);class wr extends f{constructor(e,t){super(e,t),this.on("statechanged",e=>this.updateDom_()),this.updateDom_()}createEl(){return this.els={title:o("div",{className:"vjs-title-bar-title",id:"vjs-title-bar-title-"+ot++}),description:o("div",{className:"vjs-title-bar-description",id:"vjs-title-bar-description-"+ot++})},o("div",{className:"vjs-title-bar"},{},Q(this.els))}updateDom_(){var e=this.player_.tech_;const s=e&&e.el_,r={title:"aria-labelledby",description:"aria-describedby"};["title","description"].forEach(e=>{var t=this.state[e],i=this.els[e],e=r[e];$e(i),t&&Ie(i,t),s&&(s.removeAttribute(e),t)&&s.setAttribute(e,i.id)}),this.state.title||this.state.description?this.show():this.hide()}update(e){this.setState(e)}dispose(){var e=this.player_.tech_,e=e&&e.el_;e&&(e.removeAttribute("aria-labelledby"),e.removeAttribute("aria-describedby")),super.dispose(),this.els=null}}f.registerComponent("TitleBar",wr);function Er(i){const s=i.el();if(!s.resetSourceWatch_){const t={},e=Ar(i),r=t=>(...e)=>{e=t.apply(s,e);return kr(i),e};["append","appendChild","insertAdjacentHTML"].forEach(e=>{s[e]&&(t[e]=s[e],s[e]=r(t[e]))}),Object.defineProperty(s,"innerHTML",d(e,{set:r(e.set)})),s.resetSourceWatch_=()=>{s.resetSourceWatch_=null,Object.keys(t).forEach(e=>{s[e]=t[e]}),Object.defineProperty(s,"innerHTML",e)},i.one("sourceset",s.resetSourceWatch_)}}function Cr(i){if(i.featuresSourceset){const s=i.el();if(!s.resetSourceset_){e=i;const t=xr([e.el(),window.HTMLMediaElement.prototype,Dr],"src");var e;const r=s.setAttribute,n=s.load;Object.defineProperty(s,"src",d(t,{set:e=>{e=t.set.call(s,e);return i.triggerSourceset(s.src),e}})),s.setAttribute=(e,t)=>{t=r.call(s,e,t);return/src/i.test(e)&&i.triggerSourceset(s.src),t},s.load=()=>{var e=n.call(s);return kr(i)||(i.triggerSourceset(""),Er(i)),e},s.currentSrc?i.triggerSourceset(s.currentSrc):kr(i)||Er(i),s.resetSourceset_=()=>{s.resetSourceset_=null,s.load=n,s.setAttribute=r,Object.defineProperty(s,"src",t),s.resetSourceWatch_&&s.resetSourceWatch_()}}}}const kr=t=>{var e=t.el();if(e.hasAttribute("src"))t.triggerSourceset(e.src);else{var i=t.$$("source"),s=[];let e="";if(!i.length)return!1;for(let e=0;e<i.length;e++){var r=i[e].src;r&&-1===s.indexOf(r)&&s.push(r)}if(!s.length)return!1;1===s.length&&(e=s[0]),t.triggerSourceset(e)}return!0},Ir=Object.defineProperty({},"innerHTML",{get(){return this.cloneNode(!0).innerHTML},set(e){for(var t=document.createElement(this.nodeName.toLowerCase()),i=(t.innerHTML=e,document.createDocumentFragment());t.childNodes.length;)i.appendChild(t.childNodes[0]);return this.innerText="",window.Element.prototype.appendChild.call(this,i),this.innerHTML}}),xr=(t,i)=>{let s={};for(let e=0;e<t.length&&!((s=Object.getOwnPropertyDescriptor(t[e],i))&&s.set&&s.get);e++);return s.enumerable=!0,s.configurable=!0,s},Ar=e=>xr([e.el(),window.HTMLMediaElement.prototype,window.Element.prototype,Ir],"innerHTML"),Dr=Object.defineProperty({},"src",{get(){return this.hasAttribute("src")?mi(window.Element.prototype.getAttribute.call(this,"src")):""},set(e){return window.Element.prototype.setAttribute.call(this,"src",e),e}});class _ extends y{constructor(e,t){super(e,t);t=e.source;let i=!1;if(this.featuresVideoFrameCallback=this.featuresVideoFrameCallback&&"VIDEO"===this.el_.tagName,t&&(this.el_.currentSrc!==t.src||e.tag&&3===e.tag.initNetworkState_)?this.setSource(t):this.handleLateInit_(this.el_),e.enableSourceset&&this.setupSourcesetHandling_(),this.isScrubbing_=!1,this.el_.hasChildNodes()){var s=this.el_.childNodes;let e=s.length;for(var r=[];e--;){var n=s[e];"track"===n.nodeName.toLowerCase()&&(this.featuresNativeTextTracks?(this.remoteTextTrackEls().addTrackElement_(n),this.remoteTextTracks().addTrack(n.track),this.textTracks().addTrack(n.track),i||this.el_.hasAttribute("crossorigin")||!gi(n.src)||(i=!0)):r.push(n))}for(let e=0;e<r.length;e++)this.el_.removeChild(r[e])}this.proxyNativeTracks_(),this.featuresNativeTextTracks&&i&&l.warn("Text Tracks are being loaded from another origin but the crossorigin attribute isn't used.\nThis may prevent text tracks from loading."),this.restoreMetadataTracksInIOSNativePlayer_(),(_e||me)&&!0===e.nativeControlsForTouch&&this.setControls(!0),this.proxyWebkitFullscreen_(),this.triggerReady()}dispose(){this.el_&&this.el_.resetSourceset_&&this.el_.resetSourceset_(),_.disposeMediaElement(this.el_),this.options_=null,super.dispose()}setupSourcesetHandling_(){Cr(this)}restoreMetadataTracksInIOSNativePlayer_(){const i=this.textTracks();let s;const e=()=>{s=[];for(let e=0;e<i.length;e++){var t=i[e];"metadata"===t.kind&&s.push({track:t,storedMode:t.mode})}},r=(e(),i.addEventListener("change",e),this.on("dispose",()=>i.removeEventListener("change",e)),()=>{for(let e=0;e<s.length;e++){var t=s[e];"disabled"===t.track.mode&&t.track.mode!==t.storedMode&&(t.track.mode=t.storedMode)}i.removeEventListener("change",r)});this.on("webkitbeginfullscreen",()=>{i.removeEventListener("change",e),i.removeEventListener("change",r),i.addEventListener("change",r)}),this.on("webkitendfullscreen",()=>{i.removeEventListener("change",e),i.addEventListener("change",e),i.removeEventListener("change",r)})}overrideNative_(e,t){if(t===this[`featuresNative${e}Tracks`]){const i=e.toLowerCase();this[i+"TracksListeners_"]&&Object.keys(this[i+"TracksListeners_"]).forEach(e=>{this.el()[i+"Tracks"].removeEventListener(e,this[i+"TracksListeners_"][e])}),this[`featuresNative${e}Tracks`]=!t,this[i+"TracksListeners_"]=null,this.proxyNativeTracksForType_(i)}}overrideNativeAudioTracks(e){this.overrideNative_("Audio",e)}overrideNativeVideoTracks(e){this.overrideNative_("Video",e)}proxyNativeTracksForType_(i){var e=Ui[i];const s=this.el()[e.getterName],r=this[e.getterName]();if(this[`featuresNative${e.capitalName}Tracks`]&&s&&s.addEventListener){const n={change:e=>{var t={type:"change",target:r,currentTarget:r,srcElement:r};r.trigger(t),"text"===i&&this[Bi.remoteText.getterName]().trigger(t)},addtrack(e){r.addTrack(e.track)},removetrack(e){r.removeTrack(e.track)}},t=function(){var e=[];for(let i=0;i<r.length;i++){let t=!1;for(let e=0;e<s.length;e++)if(s[e]===r[i]){t=!0;break}t||e.push(r[i])}for(;e.length;)r.removeTrack(e.shift())};this[e.getterName+"Listeners_"]=n,Object.keys(n).forEach(t=>{const i=n[t];s.addEventListener(t,i),this.on("dispose",e=>s.removeEventListener(t,i))}),this.on("loadstart",t),this.on("dispose",e=>this.off("loadstart",t))}}proxyNativeTracks_(){Ui.names.forEach(e=>{this.proxyNativeTracksForType_(e)})}createEl(){let t=this.options_.tag;t&&(this.options_.playerElIngest||this.movingMediaElementInDOM)||(t?(e=t.cloneNode(!0),t.parentNode&&t.parentNode.insertBefore(e,t),_.disposeMediaElement(t),t=e):(t=document.createElement("video"),e=d({},this.options_.tag&&Re(this.options_.tag)),_e&&!0===this.options_.nativeControlsForTouch||delete e.controls,Oe(t,Object.assign(e,{id:this.options_.techId,class:"vjs-tech"}))),t.playerId=this.options_.playerId),"undefined"!=typeof this.options_.preload&&Me(t,"preload",this.options_.preload),void 0!==this.options_.disablePictureInPicture&&(t.disablePictureInPicture=this.options_.disablePictureInPicture);var e,i=["loop","muted","playsinline","autoplay"];for(let e=0;e<i.length;e++){var s=i[e],r=this.options_[s];"undefined"!=typeof r&&(r?Me(t,s,s):Ue(t,s),t[s]=r)}return t}handleLateInit_(e){if(0!==e.networkState&&3!==e.networkState)if(0===e.readyState){let e=!1;const t=function(){e=!0},i=(this.on("loadstart",t),function(){e||this.trigger("loadstart")});this.on("loadedmetadata",i),void this.ready(function(){this.off("loadstart",t),this.off("loadedmetadata",i),e||this.trigger("loadstart")})}else{const s=["loadstart"];s.push("loadedmetadata"),2<=e.readyState&&s.push("loadeddata"),3<=e.readyState&&s.push("canplay"),4<=e.readyState&&s.push("canplaythrough"),this.ready(function(){s.forEach(function(e){this.trigger(e)},this)})}}setScrubbing(e){this.isScrubbing_=e}scrubbing(){return this.isScrubbing_}setCurrentTime(e){try{this.isScrubbing_&&this.el_.fastSeek&&be?this.el_.fastSeek(e):this.el_.currentTime=e}catch(e){l(e,"Video is not ready. (Video.js)")}}duration(){if(this.el_.duration===1/0&&ie&&oe&&0===this.el_.currentTime){const e=()=>{0<this.el_.currentTime&&(this.el_.duration===1/0&&this.trigger("durationchange"),this.off("timeupdate",e))};return this.on("timeupdate",e),NaN}return this.el_.duration||NaN}width(){return this.el_.offsetWidth}height(){return this.el_.offsetHeight}proxyWebkitFullscreen_(){if("webkitDisplayingFullscreen"in this.el_){const e=function(){this.trigger("fullscreenchange",{isFullscreen:!1}),this.el_.controls&&!this.options_.nativeControlsForTouch&&this.controls()&&(this.el_.controls=!1)},t=function(){"webkitPresentationMode"in this.el_&&"picture-in-picture"!==this.el_.webkitPresentationMode&&(this.one("webkitendfullscreen",e),this.trigger("fullscreenchange",{isFullscreen:!0,nativeIOSFullscreen:!0}))};this.on("webkitbeginfullscreen",t),this.on("dispose",()=>{this.off("webkitbeginfullscreen",t),this.off("webkitendfullscreen",e)})}}supportsFullScreen(){return"function"==typeof this.el_.webkitEnterFullScreen}enterFullScreen(){const e=this.el_;if(e.paused&&e.networkState<=e.HAVE_METADATA)Qt(this.el_.play()),this.setTimeout(function(){e.pause();try{e.webkitEnterFullScreen()}catch(e){this.trigger("fullscreenerror",e)}},0);else try{e.webkitEnterFullScreen()}catch(e){this.trigger("fullscreenerror",e)}}exitFullScreen(){this.el_.webkitDisplayingFullscreen?this.el_.webkitExitFullScreen():this.trigger("fullscreenerror",new Error("The video is not fullscreen"))}requestPictureInPicture(){return this.el_.requestPictureInPicture()}requestVideoFrameCallback(e){return this.featuresVideoFrameCallback&&!this.el_.webkitKeys?this.el_.requestVideoFrameCallback(e):super.requestVideoFrameCallback(e)}cancelVideoFrameCallback(e){this.featuresVideoFrameCallback&&!this.el_.webkitKeys?this.el_.cancelVideoFrameCallback(e):super.cancelVideoFrameCallback(e)}src(e){if(void 0===e)return this.el_.src;this.setSrc(e)}reset(){_.resetMediaElement(this.el_)}currentSrc(){return this.currentSource_?this.currentSource_.src:this.el_.currentSrc}setControls(e){this.el_.controls=!!e}addTextTrack(e,t,i){return this.featuresNativeTextTracks?this.el_.addTextTrack(e,t,i):super.addTextTrack(e,t,i)}createRemoteTextTrack(e){var t;return this.featuresNativeTextTracks?(t=document.createElement("track"),e.kind&&(t.kind=e.kind),e.label&&(t.label=e.label),(e.language||e.srclang)&&(t.srclang=e.language||e.srclang),e.default&&(t.default=e.default),e.id&&(t.id=e.id),e.src&&(t.src=e.src),t):super.createRemoteTextTrack(e)}addRemoteTextTrack(e,t){e=super.addRemoteTextTrack(e,t);return this.featuresNativeTextTracks&&this.el().appendChild(e),e}removeRemoteTextTrack(t){if(super.removeRemoteTextTrack(t),this.featuresNativeTextTracks){var i=this.$$("track");let e=i.length;for(;e--;)t!==i[e]&&t!==i[e].track||this.el().removeChild(i[e])}}getVideoPlaybackQuality(){var e;return"function"==typeof this.el().getVideoPlaybackQuality?this.el().getVideoPlaybackQuality():(e={},"undefined"!=typeof this.el().webkitDroppedFrameCount&&"undefined"!=typeof this.el().webkitDecodedFrameCount&&(e.droppedVideoFrames=this.el().webkitDroppedFrameCount,e.totalVideoFrames=this.el().webkitDecodedFrameCount),window.performance&&(e.creationTime=window.performance.now()),e)}}J(_,"TEST_VID",function(){var e,t;if(we())return e=document.createElement("video"),(t=document.createElement("track")).kind="captions",t.srclang="en",t.label="English",e.appendChild(t),e}),_.isSupported=function(){try{_.TEST_VID.volume=.5}catch(e){return!1}return!(!_.TEST_VID||!_.TEST_VID.canPlayType)},_.canPlayType=function(e){return _.TEST_VID.canPlayType(e)},_.canPlaySource=function(e,t){return _.canPlayType(e.type)},_.canControlVolume=function(){try{const t=_.TEST_VID.volume;_.TEST_VID.volume=t/2+.1;var e=t!==_.TEST_VID.volume;return e&&c?(window.setTimeout(()=>{_&&_.prototype&&(_.prototype.featuresVolumeControl=t!==_.TEST_VID.volume)}),!1):e}catch(e){return!1}},_.canMuteVolume=function(){try{var e=_.TEST_VID.muted;return _.TEST_VID.muted=!e,_.TEST_VID.muted?Me(_.TEST_VID,"muted","muted"):Ue(_.TEST_VID,"muted"),e!==_.TEST_VID.muted}catch(e){return!1}},_.canControlPlaybackRate=function(){if(ie&&oe&&de<58)return!1;try{var e=_.TEST_VID.playbackRate;return _.TEST_VID.playbackRate=e/2+.1,e!==_.TEST_VID.playbackRate}catch(e){return!1}},_.canOverrideAttributes=function(){try{var e=()=>{};Object.defineProperty(document.createElement("video"),"src",{get:e,set:e}),Object.defineProperty(document.createElement("audio"),"src",{get:e,set:e}),Object.defineProperty(document.createElement("video"),"innerHTML",{get:e,set:e}),Object.defineProperty(document.createElement("audio"),"innerHTML",{get:e,set:e})}catch(e){return!1}return!0},_.supportsNativeTextTracks=function(){return be||c&&oe},_.supportsNativeVideoTracks=function(){return!(!_.TEST_VID||!_.TEST_VID.videoTracks)},_.supportsNativeAudioTracks=function(){return!(!_.TEST_VID||!_.TEST_VID.audioTracks)},_.Events=["loadstart","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","ended","durationchange","timeupdate","progress","play","pause","ratechange","resize","volumechange"],[["featuresMuteControl","canMuteVolume"],["featuresPlaybackRate","canControlPlaybackRate"],["featuresSourceset","canOverrideAttributes"],["featuresNativeTextTracks","supportsNativeTextTracks"],["featuresNativeVideoTracks","supportsNativeVideoTracks"],["featuresNativeAudioTracks","supportsNativeAudioTracks"]].forEach(function([e,t]){J(_.prototype,e,()=>_[t](),!0)}),_.prototype.featuresVolumeControl=_.canControlVolume(),_.prototype.movingMediaElementInDOM=!c,_.prototype.featuresFullscreenResize=!0,_.prototype.featuresProgressEvents=!0,_.prototype.featuresTimeupdateEvents=!0,_.prototype.featuresVideoFrameCallback=!(!_.TEST_VID||!_.TEST_VID.requestVideoFrameCallback),_.disposeMediaElement=function(e){if(e){for(e.parentNode&&e.parentNode.removeChild(e);e.hasChildNodes();)e.removeChild(e.firstChild);if(e.removeAttribute("src"),"function"==typeof e.load)try{e.load()}catch(e){}}},_.resetMediaElement=function(t){if(t){var i=t.querySelectorAll("source");let e=i.length;for(;e--;)t.removeChild(i[e]);if(t.removeAttribute("src"),"function"==typeof t.load)try{t.load()}catch(e){}}},["muted","defaultMuted","autoplay","controls","loop","playsinline"].forEach(function(e){_.prototype[e]=function(){return this.el_[e]||this.el_.hasAttribute(e)}}),["muted","defaultMuted","autoplay","loop","playsinline"].forEach(function(t){_.prototype["set"+g(t)]=function(e){(this.el_[t]=e)?this.el_.setAttribute(t,t):this.el_.removeAttribute(t)}}),["paused","currentTime","buffered","volume","poster","preload","error","seeking","seekable","ended","playbackRate","defaultPlaybackRate","disablePictureInPicture","played","networkState","readyState","videoWidth","videoHeight","crossOrigin"].forEach(function(e){_.prototype[e]=function(){return this.el_[e]}}),["volume","src","poster","preload","playbackRate","defaultPlaybackRate","disablePictureInPicture","crossOrigin"].forEach(function(t){_.prototype["set"+g(t)]=function(e){this.el_[t]=e}}),["pause","load","play"].forEach(function(e){_.prototype[e]=function(){return this.el_[e]()}}),y.withSourceHandlers(_),_.nativeSourceHandler={},_.nativeSourceHandler.canPlayType=function(e){try{return _.TEST_VID.canPlayType(e)}catch(e){return""}},_.nativeSourceHandler.canHandleSource=function(e,t){return e.type?_.nativeSourceHandler.canPlayType(e.type):e.src?(e=fi(e.src),_.nativeSourceHandler.canPlayType("video/"+e)):""},_.nativeSourceHandler.handleSource=function(e,t,i){t.setSrc(e.src)},_.nativeSourceHandler.dispose=function(){},_.registerSourceHandler(_.nativeSourceHandler),y.registerTech("Html5",_);const Pr=["progress","abort","suspend","emptied","stalled","loadedmetadata","loadeddata","timeupdate","resize","volumechange","texttrackchange"],Lr={canplay:"CanPlay",canplaythrough:"CanPlayThrough",playing:"Playing",seeked:"Seeked"},Or=["tiny","xsmall","small","medium","large","xlarge","huge"],Rr={},Nr=(Or.forEach(e=>{var t="x"===e.charAt(0)?"x-"+e.substring(1):e;Rr[e]="vjs-layout-"+t}),{tiny:210,xsmall:320,small:425,medium:768,large:1440,xlarge:2560,huge:1/0});class v extends f{constructor(e,t,i){if(e.id=e.id||t.id||"vjs_video_"+ot++,(t=Object.assign(v.getTagSettings(e),t)).initChildren=!1,t.createEl=!1,t.evented=!1,t.reportTouchActivity=!1,t.language||(s=e.closest("[lang]"))&&(t.language=s.getAttribute("lang")),super(null,t,i),this.boundDocumentFullscreenChange_=e=>this.documentFullscreenChange_(e),this.boundFullWindowOnEscKey_=e=>this.fullWindowOnEscKey(e),this.boundUpdateStyleEl_=e=>this.updateStyleEl_(e),this.boundApplyInitTime_=e=>this.applyInitTime_(e),this.boundUpdateCurrentBreakpoint_=e=>this.updateCurrentBreakpoint_(e),this.boundHandleTechClick_=e=>this.handleTechClick_(e),this.boundHandleTechDoubleClick_=e=>this.handleTechDoubleClick_(e),this.boundHandleTechTouchStart_=e=>this.handleTechTouchStart_(e),this.boundHandleTechTouchMove_=e=>this.handleTechTouchMove_(e),this.boundHandleTechTouchEnd_=e=>this.handleTechTouchEnd_(e),this.boundHandleTechTap_=e=>this.handleTechTap_(e),this.isFullscreen_=!1,this.log=z(this.id_),this.fsApi_=q,this.isPosterFromTech_=!1,this.queuedCallbacks_=[],this.isReady_=!1,this.hasStarted_=!1,this.userActive_=!1,this.debugEnabled_=!1,this.audioOnlyMode_=!1,this.audioPosterMode_=!1,this.audioOnlyCache_={playerHeight:null,hiddenChildren:[]},!this.options_||!this.options_.techOrder||!this.options_.techOrder.length)throw new Error("No techOrder specified. Did you overwrite videojs.options instead of just changing the properties you want to override?");if(this.tag=e,this.tagAttributes=e&&Re(e),this.language(this.options_.language),t.languages){const r={};Object.getOwnPropertyNames(t.languages).forEach(function(e){r[e.toLowerCase()]=t.languages[e]}),this.languages_=r}else this.languages_=v.prototype.options_.languages;this.resetCache_(),this.poster_=t.poster||"",this.controls_=!!t.controls,e.controls=!1,e.removeAttribute("controls"),this.changingSrc_=!1,this.playCallbacks_=[],this.playTerminatedQueue_=[],e.hasAttribute("autoplay")?this.autoplay(!0):this.autoplay(this.options_.autoplay),t.plugins&&Object.keys(t.plugins).forEach(e=>{if("function"!=typeof this[e])throw new Error(`plugin "${e}" does not exist`)}),this.scrubbing_=!1,this.el_=this.createEl(),Pt(this,{eventBusKey:"el_"}),this.fsApi_.requestFullscreen&&(pt(document,this.fsApi_.fullscreenchange,this.boundDocumentFullscreenChange_),this.on(this.fsApi_.fullscreenchange,this.boundDocumentFullscreenChange_)),this.fluid_&&this.on(["playerreset","resize"],this.boundUpdateStyleEl_);var s=d(this.options_),i=(t.plugins&&Object.keys(t.plugins).forEach(e=>{this[e](t.plugins[e])}),t.debug&&this.debug(!0),this.options_.playerOptions=s,this.middleware_=[],this.playbackRates(t.playbackRates),t.experimentalSvgIcons&&((i=(new window.DOMParser).parseFromString('<svg xmlns="http://www.w3.org/2000/svg">\n  <defs>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-play">\n      <path d="M16 10v28l22-14z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-pause">\n      <path d="M12 38h8V10h-8v28zm16-28v28h8V10h-8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-audio">\n      <path d="M24 2C14.06 2 6 10.06 6 20v14c0 3.31 2.69 6 6 6h6V24h-8v-4c0-7.73 6.27-14 14-14s14 6.27 14 14v4h-8v16h6c3.31 0 6-2.69 6-6V20c0-9.94-8.06-18-18-18z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-captions">\n      <path d="M38 8H10c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM22 22h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2zm14 0h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-subtitles">\n      <path d="M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-fullscreen-enter">\n      <path d="M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-fullscreen-exit">\n      <path d="M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-play-circle">\n      <path d="M20 33l12-9-12-9v18zm4-29C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-mute">\n      <path d="M33 24c0-3.53-2.04-6.58-5-8.05v4.42l4.91 4.91c.06-.42.09-.85.09-1.28zm5 0c0 1.88-.41 3.65-1.08 5.28l3.03 3.03C41.25 29.82 42 27 42 24c0-8.56-5.99-15.72-14-17.54v4.13c5.78 1.72 10 7.07 10 13.41zM8.55 6L6 8.55 15.45 18H6v12h8l10 10V26.55l8.51 8.51c-1.34 1.03-2.85 1.86-4.51 2.36v4.13a17.94 17.94 0 0 0 7.37-3.62L39.45 42 42 39.45l-18-18L8.55 6zM24 8l-4.18 4.18L24 16.36V8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-low">\n      <path d="M14 18v12h8l10 10V8L22 18h-8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-medium">\n      <path d="M37 24c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zm-27-6v12h8l10 10V8L18 18h-8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-high">\n      <path d="M6 18v12h8l10 10V8L14 18H6zm27 6c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zM28 6.46v4.13c5.78 1.72 10 7.07 10 13.41s-4.22 11.69-10 13.41v4.13c8.01-1.82 14-8.97 14-17.54S36.01 8.28 28 6.46z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-spinner">\n      <path d="M18.8 21l9.53-16.51C26.94 4.18 25.49 4 24 4c-4.8 0-9.19 1.69-12.64 4.51l7.33 12.69.11-.2zm24.28-3c-1.84-5.85-6.3-10.52-11.99-12.68L23.77 18h19.31zm.52 2H28.62l.58 1 9.53 16.5C41.99 33.94 44 29.21 44 24c0-1.37-.14-2.71-.4-4zm-26.53 4l-7.8-13.5C6.01 14.06 4 18.79 4 24c0 1.37.14 2.71.4 4h14.98l-2.31-4zM4.92 30c1.84 5.85 6.3 10.52 11.99 12.68L24.23 30H4.92zm22.54 0l-7.8 13.51c1.4.31 2.85.49 4.34.49 4.8 0 9.19-1.69 12.64-4.51L29.31 26.8 27.46 30z"></path>\n    </symbol>\n    <symbol viewBox="0 0 24 24" id="vjs-icon-hd">\n      <path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-chapters">\n      <path d="M6 26h4v-4H6v4zm0 8h4v-4H6v4zm0-16h4v-4H6v4zm8 8h28v-4H14v4zm0 8h28v-4H14v4zm0-20v4h28v-4H14z"></path>\n    </symbol>\n    <symbol viewBox="0 0 40 40" id="vjs-icon-downloading">\n      <path d="M18.208 36.875q-3.208-.292-5.979-1.729-2.771-1.438-4.812-3.729-2.042-2.292-3.188-5.229-1.146-2.938-1.146-6.23 0-6.583 4.334-11.416 4.333-4.834 10.833-5.5v3.166q-5.167.75-8.583 4.646Q6.25 14.75 6.25 19.958q0 5.209 3.396 9.104 3.396 3.896 8.562 4.646zM20 28.417L11.542 20l2.083-2.083 4.917 4.916v-11.25h2.916v11.25l4.875-4.916L28.417 20zm1.792 8.458v-3.167q1.833-.25 3.541-.958 1.709-.708 3.167-1.875l2.333 2.292q-1.958 1.583-4.25 2.541-2.291.959-4.791 1.167zm6.791-27.792q-1.541-1.125-3.25-1.854-1.708-.729-3.541-1.021V3.042q2.5.25 4.77 1.208 2.271.958 4.271 2.5zm4.584 21.584l-2.25-2.25q1.166-1.5 1.854-3.209.687-1.708.937-3.541h3.209q-.292 2.5-1.229 4.791-.938 2.292-2.521 4.209zm.541-12.417q-.291-1.833-.958-3.562-.667-1.73-1.833-3.188l2.375-2.208q1.541 1.916 2.458 4.208.917 2.292 1.167 4.75z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-file-download">\n      <path d="M10.8 40.55q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h26.35v-7.7h3.4v7.7q0 1.4-1 2.4t-2.4 1zM24 32.1L13.9 22.05l2.45-2.45 5.95 5.95V7.15h3.4v18.4l5.95-5.95 2.45 2.45z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-file-download-done">\n      <path d="M9.8 40.5v-3.45h28.4v3.45zm9.2-9.05L7.4 19.85l2.45-2.35L19 26.65l19.2-19.2 2.4 2.4z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-file-download-off">\n      <path d="M4.9 4.75L43.25 43.1 41 45.3l-4.75-4.75q-.05.05-.075.025-.025-.025-.075-.025H10.8q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h22.05l-7-7-1.85 1.8L13.9 21.9l1.85-1.85L2.7 7zm26.75 14.7l2.45 2.45-3.75 3.8-2.45-2.5zM25.7 7.15V21.1l-3.4-3.45V7.15z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-share">\n      <path d="M36 32.17c-1.52 0-2.89.59-3.93 1.54L17.82 25.4c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31A5.83 5.83 0 1 0 36 32.17z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-cog">\n      <path d="M38.86 25.95c.08-.64.14-1.29.14-1.95s-.06-1.31-.14-1.95l4.23-3.31c.38-.3.49-.84.24-1.28l-4-6.93c-.25-.43-.77-.61-1.22-.43l-4.98 2.01c-1.03-.79-2.16-1.46-3.38-1.97L29 4.84c-.09-.47-.5-.84-1-.84h-8c-.5 0-.91.37-.99.84l-.75 5.3a14.8 14.8 0 0 0-3.38 1.97L9.9 10.1a1 1 0 0 0-1.22.43l-4 6.93c-.25.43-.14.97.24 1.28l4.22 3.31C9.06 22.69 9 23.34 9 24s.06 1.31.14 1.95l-4.22 3.31c-.38.3-.49.84-.24 1.28l4 6.93c.25.43.77.61 1.22.43l4.98-2.01c1.03.79 2.16 1.46 3.38 1.97l.75 5.3c.08.47.49.84.99.84h8c.5 0 .91-.37.99-.84l.75-5.3a14.8 14.8 0 0 0 3.38-1.97l4.98 2.01a1 1 0 0 0 1.22-.43l4-6.93c.25-.43.14-.97-.24-1.28l-4.22-3.31zM24 31c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-square">\n      <path d="M36 8H12c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H12V12h24v24z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-circle">\n      <circle cx="24" cy="24" r="20"></circle>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-circle-outline">\n      <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-circle-inner-circle">\n      <path d="M24 4C12.97 4 4 12.97 4 24s8.97 20 20 20 20-8.97 20-20S35.03 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm6-16c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6 6 2.69 6 6z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-cancel">\n      <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-replay">\n      <path d="M24 10V2L14 12l10 10v-8c6.63 0 12 5.37 12 12s-5.37 12-12 12-12-5.37-12-12H8c0 8.84 7.16 16 16 16s16-7.16 16-16-7.16-16-16-16z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-repeat">\n      <path d="M14 14h20v6l8-8-8-8v6H10v12h4v-8zm20 20H14v-6l-8 8 8 8v-6h24V26h-4v8z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-replay-5">\n      <path d="M17.689 98l-8.697 8.696 8.697 8.697 2.486-2.485-4.32-4.319h1.302c4.93 0 9.071 1.722 12.424 5.165 3.352 3.443 5.029 7.638 5.029 12.584h3.55c0-2.958-.553-5.73-1.658-8.313-1.104-2.583-2.622-4.841-4.555-6.774-1.932-1.932-4.19-3.45-6.773-4.555-2.584-1.104-5.355-1.657-8.313-1.657H15.5l4.615-4.615zm-8.08 21.659v13.861h11.357v5.008H9.609V143h12.7c.834 0 1.55-.298 2.146-.894.596-.597.895-1.31.895-2.145v-7.781c0-.835-.299-1.55-.895-2.147a2.929 2.929 0 0 0-2.147-.894h-8.227v-5.096H25.35v-4.384z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-replay-10">\n      <path d="M42.315 125.63c0-4.997-1.694-9.235-5.08-12.713-3.388-3.479-7.571-5.218-12.552-5.218h-1.315l4.363 4.363-2.51 2.51-8.787-8.786L25.221 97l2.45 2.45-4.662 4.663h1.375c2.988 0 5.788.557 8.397 1.673 2.61 1.116 4.892 2.65 6.844 4.602 1.953 1.953 3.487 4.234 4.602 6.844 1.116 2.61 1.674 5.41 1.674 8.398zM8.183 142v-19.657H3.176V117.8h9.643V142zm13.63 0c-1.156 0-2.127-.393-2.912-1.178-.778-.778-1.168-1.746-1.168-2.902v-16.04c0-1.156.393-2.127 1.178-2.912.779-.779 1.746-1.168 2.902-1.168h7.696c1.156 0 2.126.392 2.911 1.177.779.78 1.168 1.747 1.168 2.903v16.04c0 1.156-.392 2.127-1.177 2.912-.779.779-1.746 1.168-2.902 1.168zm.556-4.636h6.583v-15.02H22.37z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-replay-30">\n      <path d="M26.047 97l-8.733 8.732 8.733 8.733 2.496-2.494-4.336-4.338h1.307c4.95 0 9.108 1.73 12.474 5.187 3.367 3.458 5.051 7.668 5.051 12.635h3.565c0-2.97-.556-5.751-1.665-8.346-1.109-2.594-2.633-4.862-4.574-6.802-1.94-1.941-4.208-3.466-6.803-4.575-2.594-1.109-5.375-1.664-8.345-1.664H23.85l4.634-4.634zM2.555 117.531v4.688h10.297v5.25H5.873v4.687h6.979v5.156H2.555V142H13.36c1.061 0 1.95-.395 2.668-1.186.718-.79 1.076-1.772 1.076-2.94v-16.218c0-1.168-.358-2.149-1.076-2.94-.717-.79-1.607-1.185-2.668-1.185zm22.482.14c-1.149 0-2.11.39-2.885 1.165-.78.78-1.172 1.744-1.172 2.893v15.943c0 1.149.388 2.11 1.163 2.885.78.78 1.745 1.172 2.894 1.172h7.649c1.148 0 2.11-.388 2.884-1.163.78-.78 1.17-1.745 1.17-2.894v-15.943c0-1.15-.386-2.111-1.16-2.885-.78-.78-1.746-1.172-2.894-1.172zm.553 4.518h6.545v14.93H25.59z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-forward-5">\n      <path d="M29.508 97l-2.431 2.43 4.625 4.625h-1.364c-2.965 0-5.742.554-8.332 1.66-2.589 1.107-4.851 2.629-6.788 4.566-1.937 1.937-3.458 4.2-4.565 6.788-1.107 2.59-1.66 5.367-1.66 8.331h3.557c0-4.957 1.68-9.16 5.04-12.611 3.36-3.45 7.51-5.177 12.451-5.177h1.304l-4.326 4.33 2.49 2.49 8.715-8.716zm-9.783 21.61v13.89h11.382v5.018H19.725V142h12.727a2.93 2.93 0 0 0 2.15-.896 2.93 2.93 0 0 0 .896-2.15v-7.798c0-.837-.299-1.554-.896-2.152a2.93 2.93 0 0 0-2.15-.896h-8.245V123h11.29v-4.392z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-forward-10">\n      <path d="M23.119 97l-2.386 2.383 4.538 4.538h-1.339c-2.908 0-5.633.543-8.173 1.63-2.54 1.085-4.76 2.577-6.66 4.478-1.9 1.9-3.392 4.12-4.478 6.66-1.085 2.54-1.629 5.264-1.629 8.172h3.49c0-4.863 1.648-8.986 4.944-12.372 3.297-3.385 7.368-5.078 12.216-5.078h1.279l-4.245 4.247 2.443 2.442 8.55-8.55zm-9.52 21.45v4.42h4.871V142h4.513v-23.55zm18.136 0c-1.125 0-2.066.377-2.824 1.135-.764.764-1.148 1.709-1.148 2.834v15.612c0 1.124.38 2.066 1.139 2.824.764.764 1.708 1.145 2.833 1.145h7.489c1.125 0 2.066-.378 2.824-1.136.764-.764 1.145-1.709 1.145-2.833v-15.612c0-1.125-.378-2.067-1.136-2.825-.764-.764-1.708-1.145-2.833-1.145zm.54 4.42h6.408v14.617h-6.407z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-forward-30">\n      <path d="M25.549 97l-2.437 2.434 4.634 4.635H26.38c-2.97 0-5.753.555-8.347 1.664-2.594 1.109-4.861 2.633-6.802 4.574-1.94 1.94-3.465 4.207-4.574 6.802-1.109 2.594-1.664 5.377-1.664 8.347h3.565c0-4.967 1.683-9.178 5.05-12.636 3.366-3.458 7.525-5.187 12.475-5.187h1.307l-4.335 4.338 2.495 2.494 8.732-8.732zm-11.553 20.53v4.689h10.297v5.249h-6.978v4.688h6.978v5.156H13.996V142h10.808c1.06 0 1.948-.395 2.666-1.186.718-.79 1.077-1.771 1.077-2.94v-16.217c0-1.169-.36-2.15-1.077-2.94-.718-.79-1.605-1.186-2.666-1.186zm21.174.168c-1.149 0-2.11.389-2.884 1.163-.78.78-1.172 1.745-1.172 2.894v15.942c0 1.15.388 2.11 1.162 2.885.78.78 1.745 1.17 2.894 1.17h7.649c1.149 0 2.11-.386 2.885-1.16.78-.78 1.17-1.746 1.17-2.895v-15.942c0-1.15-.387-2.11-1.161-2.885-.78-.78-1.745-1.172-2.894-1.172zm.552 4.516h6.542v14.931h-6.542z"></path>\n    </symbol>\n    <symbol viewBox="0 0 512 512" id="vjs-icon-audio-description">\n      <g fill-rule="evenodd"><path d="M227.29 381.351V162.993c50.38-1.017 89.108-3.028 117.631 17.126 27.374 19.342 48.734 56.965 44.89 105.325-4.067 51.155-41.335 94.139-89.776 98.475-24.085 2.155-71.972 0-71.972 0s-.84-1.352-.773-2.568m48.755-54.804c31.43 1.26 53.208-16.633 56.495-45.386 4.403-38.51-21.188-63.552-58.041-60.796v103.612c-.036 1.466.575 2.22 1.546 2.57"></path><path d="M383.78 381.328c13.336 3.71 17.387-11.06 23.215-21.408 12.722-22.571 22.294-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.226 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894"></path><path d="M425.154 381.328c13.336 3.71 17.384-11.061 23.215-21.408 12.721-22.571 22.291-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.511c-.586 3.874 2.226 7.315 3.866 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894"></path><path d="M466.26 381.328c13.337 3.71 17.385-11.061 23.216-21.408 12.722-22.571 22.292-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.225 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894M4.477 383.005H72.58l18.573-28.484 64.169-.135s.065 19.413.065 28.62h48.756V160.307h-58.816c-5.653 9.537-140.85 222.697-140.85 222.697zm152.667-145.282v71.158l-40.453-.27 40.453-70.888z"></path></g>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-next-item">\n      <path d="M12 36l17-12-17-12v24zm20-24v24h4V12h-4z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-previous-item">\n      <path d="M12 12h4v24h-4zm7 12l17 12V12z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-shuffle">\n      <path d="M21.17 18.34L10.83 8 8 10.83l10.34 10.34 2.83-2.83zM29 8l4.09 4.09L8 37.17 10.83 40l25.09-25.09L40 19V8H29zm.66 18.83l-2.83 2.83 6.26 6.26L29 40h11V29l-4.09 4.09-6.25-6.26z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-cast">\n      <path d="M42 6H6c-2.21 0-4 1.79-4 4v6h4v-6h36v28H28v4h14c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4zM2 36v6h6c0-3.31-2.69-6-6-6zm0-8v4c5.52 0 10 4.48 10 10h4c0-7.73-6.27-14-14-14zm0-8v4c9.94 0 18 8.06 18 18h4c0-12.15-9.85-22-22-22z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-picture-in-picture-enter">\n      <path d="M38 22H22v11.99h16V22zm8 16V9.96C46 7.76 44.2 6 42 6H6C3.8 6 2 7.76 2 9.96V38c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4zm-4 .04H6V9.94h36v28.1z"></path>\n    </symbol>\n    <symbol viewBox="0 0 22 18" id="vjs-icon-picture-in-picture-exit">\n      <path d="M18 4H4v10h14V4zm4 12V1.98C22 .88 21.1 0 20 0H2C.9 0 0 .88 0 1.98V16c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H2V1.97h18v14.05z"></path>\n      <path fill="none" d="M-1-3h24v24H-1z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-facebook">\n      <path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759H734V905H479V609h255V391q0-186 104-288.5T1115 0q147 0 228 12z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-linkedin">\n      <path d="M477 625v991H147V625h330zm21-306q1 73-50.5 122T312 490h-2q-82 0-132-49t-50-122q0-74 51.5-122.5T314 148t133 48.5T498 319zm1166 729v568h-329v-530q0-105-40.5-164.5T1168 862q-63 0-105.5 34.5T999 982q-11 30-11 81v553H659q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5T1285 602q171 0 275 113.5t104 332.5z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-twitter">\n      <path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5T1369.5 1125 1185 1335.5t-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5T285 1033q33 5 61 5 43 0 85-11-112-23-185.5-111.5T172 710v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5T884 653q-8-38-8-74 0-134 94.5-228.5T1199 256q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-tumblr">\n      <path d="M1328 1329l80 237q-23 35-111 66t-177 32q-104 2-190.5-26T787 1564t-95-106-55.5-120-16.5-118V676H452V461q72-26 129-69.5t91-90 58-102 34-99T779 12q1-5 4.5-8.5T791 0h244v424h333v252h-334v518q0 30 6.5 56t22.5 52.5 49.5 41.5 81.5 14q78-2 134-29z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-pinterest">\n      <path d="M1664 896q0 209-103 385.5T1281.5 1561 896 1664q-111 0-218-32 59-93 78-164 9-34 54-211 20 39 73 67.5t114 28.5q121 0 216-68.5t147-188.5 52-270q0-114-59.5-214T1180 449t-255-63q-105 0-196 29t-154.5 77-109 110.5-67 129.5T377 866q0 104 40 183t117 111q30 12 38-20 2-7 8-31t8-30q6-23-11-43-51-61-51-151 0-151 104.5-259.5T904 517q151 0 235.5 82t84.5 213q0 170-68.5 289T980 1220q-61 0-98-43.5T859 1072q8-35 26.5-93.5t30-103T927 800q0-50-27-83t-77-33q-62 0-105 57t-43 142q0 73 25 122l-99 418q-17 70-13 177-206-91-333-281T128 896q0-209 103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z"></path>\n    </symbol>\n  </defs>\n</svg>',"image/svg+xml")).querySelector("parsererror")?(l.warn("Failed to load SVG Icons. Falling back to Font Icons."),this.options_.experimentalSvgIcons=null):((s=i.documentElement).style.display="none",this.el_.appendChild(s),this.addClass("vjs-svg-icons-enabled"))),this.initChildren(),this.isAudio("audio"===e.nodeName.toLowerCase()),this.controls()?this.addClass("vjs-controls-enabled"):this.addClass("vjs-controls-disabled"),this.el_.setAttribute("role","region"),this.isAudio()?this.el_.setAttribute("aria-label",this.localize("Audio Player")):this.el_.setAttribute("aria-label",this.localize("Video Player")),this.isAudio()&&this.addClass("vjs-audio"),_e&&this.addClass("vjs-touch-enabled"),c||this.addClass("vjs-workinghover"),v.players[this.id_]=this,M.split(".")[0]);this.addClass("vjs-v"+i),this.userActive(!0),this.reportUserActivity(),this.one("play",e=>this.listenForUserActivity_(e)),this.on("keydown",e=>this.handleKeyDown(e)),this.on("languagechange",e=>this.handleLanguagechange(e)),this.breakpoints(this.options_.breakpoints),this.responsive(this.options_.responsive),this.on("ready",()=>{this.audioPosterMode(this.options_.audioPosterMode),this.audioOnlyMode(this.options_.audioOnlyMode)})}dispose(){var e;this.trigger("dispose"),this.off("dispose"),p(document,this.fsApi_.fullscreenchange,this.boundDocumentFullscreenChange_),p(document,"keydown",this.boundFullWindowOnEscKey_),this.styleEl_&&this.styleEl_.parentNode&&(this.styleEl_.parentNode.removeChild(this.styleEl_),this.styleEl_=null),v.players[this.id_]=null,this.tag&&this.tag.player&&(this.tag.player=null),this.el_&&this.el_.player&&(this.el_.player=null),this.tech_&&(this.tech_.dispose(),this.isPosterFromTech_=!1,this.poster_=""),this.playerElIngest_&&(this.playerElIngest_=null),this.tag&&(this.tag=null),e=this,ji[e.id()]=null,a.names.forEach(e=>{e=this[a[e].getterName]();e&&e.off&&e.off()}),super.dispose({restoreEl:this.options_.restoreEl})}createEl(){let t=this.tag,i,e=this.playerElIngest_=t.parentNode&&t.parentNode.hasAttribute&&t.parentNode.hasAttribute("data-vjs-player");const s="video-js"===this.tag.tagName.toLowerCase(),r=(e?i=this.el_=t.parentNode:s||(i=this.el_=super.createEl("div")),Re(t));if(s){for(i=this.el_=t,t=this.tag=document.createElement("video");i.children.length;)t.appendChild(i.firstChild);Ae(i,"video-js")||De(i,"video-js"),i.appendChild(t),e=this.playerElIngest_=i,Object.keys(i).forEach(e=>{try{t[e]=i[e]}catch(e){}})}t.setAttribute("tabindex","-1"),r.tabindex="-1",oe&&ce&&(t.setAttribute("role","application"),r.role="application"),t.removeAttribute("width"),t.removeAttribute("height"),"width"in r&&delete r.width,"height"in r&&delete r.height,Object.getOwnPropertyNames(r).forEach(function(e){s&&"class"===e||i.setAttribute(e,r[e]),s&&t.setAttribute(e,r[e])}),t.playerId=t.id,t.id+="_html5_api",t.className="vjs-tech",(t.player=i.player=this).addClass("vjs-paused");var n,a=["IS_SMART_TV","IS_TIZEN","IS_WEBOS","IS_ANDROID","IS_IPAD","IS_IPHONE"].filter(e=>Te[e]).map(e=>"vjs-device-"+e.substring(3).toLowerCase().replace(/\_/g,"-")),o=(this.addClass(...a),!0!==window.VIDEOJS_NO_DYNAMIC_STYLE&&(this.styleEl_=nt("vjs-styles-dimensions"),a=Ke(".vjs-styles-defaults"),(n=Ke("head")).insertBefore(this.styleEl_,a?a.nextSibling:n.firstChild)),this.fill_=!1,this.fluid_=!1,this.width(this.options_.width),this.height(this.options_.height),this.fill(this.options_.fill),this.fluid(this.options_.fluid),this.aspectRatio(this.options_.aspectRatio),this.crossOrigin(this.options_.crossOrigin||this.options_.crossorigin),t.getElementsByTagName("a"));for(let e=0;e<o.length;e++){var l=o.item(e);De(l,"vjs-hidden"),l.setAttribute("hidden","hidden")}return t.initNetworkState_=t.networkState,t.parentNode&&!e&&t.parentNode.insertBefore(i,t),xe(t,i),this.children_.unshift(t),this.el_.setAttribute("lang",this.language_),this.el_.setAttribute("translate","no"),this.el_=i}crossOrigin(e){if("undefined"==typeof e)return this.techGet_("crossOrigin");null!==e&&"anonymous"!==e&&"use-credentials"!==e?l.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${e}"`):(this.techCall_("setCrossOrigin",e),this.posterImage&&this.posterImage.crossOrigin(e))}width(e){return this.dimension("width",e)}height(e){return this.dimension("height",e)}dimension(e,t){var i,s=e+"_";if(void 0===t)return this[s]||0;""===t||"auto"===t?(this[s]=void 0,this.updateStyleEl_()):(i=parseFloat(t),isNaN(i)?l.error(`Improper value "${t}" supplied for for `+e):(this[s]=i,this.updateStyleEl_()))}fluid(e){if(void 0===e)return!!this.fluid_;var t;this.fluid_=!!e,wt(this)&&this.off(["playerreset","resize"],this.boundUpdateStyleEl_),e?(this.addClass("vjs-fluid"),this.fill(!1),e=this,t=()=>{this.on(["playerreset","resize"],this.boundUpdateStyleEl_)},wt(e)?t():(e.eventedCallbacks||(e.eventedCallbacks=[]),e.eventedCallbacks.push(t))):this.removeClass("vjs-fluid"),this.updateStyleEl_()}fill(e){if(void 0===e)return!!this.fill_;this.fill_=!!e,e?(this.addClass("vjs-fill"),this.fluid(!1)):this.removeClass("vjs-fill")}aspectRatio(e){if(void 0===e)return this.aspectRatio_;if(!/^\d+\:\d+$/.test(e))throw new Error("Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.");this.aspectRatio_=e,this.fluid(!0),this.updateStyleEl_()}updateStyleEl_(){if(!0===window.VIDEOJS_NO_DYNAMIC_STYLE){const e="number"==typeof this.width_?this.width_:this.options_.width,t="number"==typeof this.height_?this.height_:this.options_.height;var r=this.tech_&&this.tech_.el();void(r&&(0<=e&&(r.width=e),0<=t)&&(r.height=t))}else{let e,t,i,s;r=(i=void 0!==this.aspectRatio_&&"auto"!==this.aspectRatio_?this.aspectRatio_:0<this.videoWidth()?this.videoWidth()+":"+this.videoHeight():"16:9").split(":"),r=r[1]/r[0];e=void 0!==this.width_?this.width_:void 0!==this.height_?this.height_/r:this.videoWidth()||300,t=void 0!==this.height_?this.height_:e*r,s=/^[^a-zA-Z]/.test(this.id())?"dimensions-"+this.id():this.id()+"-dimensions",this.addClass(s),at(this.styleEl_,`
+      .${s} {
+        width: ${e}px;
+        height: ${t}px;
+      }
+
+      .${s}.vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: ${100*r}%;
+      }
+    `)}}loadTech_(e,t){this.tech_&&this.unloadTech_();var i=g(e),s=e.charAt(0).toLowerCase()+e.slice(1);"Html5"!==i&&this.tag&&(y.getTech("Html5").disposeMediaElement(this.tag),this.tag.player=null,this.tag=null),this.techName_=i,this.isReady_=!1;let r=this.autoplay();const n={source:t,autoplay:r="string"==typeof this.autoplay()||!0===this.autoplay()&&this.options_.normalizeAutoplay?!1:r,nativeControlsForTouch:this.options_.nativeControlsForTouch,playerId:this.id(),techId:this.id()+`_${s}_api`,playsinline:this.options_.playsinline,preload:this.options_.preload,loop:this.options_.loop,disablePictureInPicture:this.options_.disablePictureInPicture,muted:this.options_.muted,poster:this.poster(),language:this.language(),playerElIngest:this.playerElIngest_||!1,"vtt.js":this.options_["vtt.js"],canOverridePoster:!!this.options_.techCanOverridePoster,enableSourceset:this.options_.enableSourceset};a.names.forEach(e=>{e=a[e];n[e.getterName]=this[e.privateName]}),Object.assign(n,this.options_[i]),Object.assign(n,this.options_[s]),Object.assign(n,this.options_[e.toLowerCase()]),this.tag&&(n.tag=this.tag),t&&t.src===this.cache_.src&&0<this.cache_.currentTime&&(n.startTime=this.cache_.currentTime);s=y.getTech(e);if(!s)throw new Error(`No Tech named '${i}' exists! '${i}' should be registered using videojs.registerTech()'`);this.tech_=new s(n),this.tech_.ready(m(this,this.handleTechReady_),!0),ei(this.textTracksJson_||[],this.tech_),Pr.forEach(t=>{this.on(this.tech_,t,e=>this[`handleTech${g(t)}_`](e))}),Object.keys(Lr).forEach(t=>{this.on(this.tech_,t,e=>{0===this.tech_.playbackRate()&&this.tech_.seeking()?this.queuedCallbacks_.push({callback:this[`handleTech${Lr[t]}_`].bind(this),event:e}):this[`handleTech${Lr[t]}_`](e)})}),this.on(this.tech_,"loadstart",e=>this.handleTechLoadStart_(e)),this.on(this.tech_,"sourceset",e=>this.handleTechSourceset_(e)),this.on(this.tech_,"waiting",e=>this.handleTechWaiting_(e)),this.on(this.tech_,"ended",e=>this.handleTechEnded_(e)),this.on(this.tech_,"seeking",e=>this.handleTechSeeking_(e)),this.on(this.tech_,"play",e=>this.handleTechPlay_(e)),this.on(this.tech_,"pause",e=>this.handleTechPause_(e)),this.on(this.tech_,"durationchange",e=>this.handleTechDurationChange_(e)),this.on(this.tech_,"fullscreenchange",(e,t)=>this.handleTechFullscreenChange_(e,t)),this.on(this.tech_,"fullscreenerror",(e,t)=>this.handleTechFullscreenError_(e,t)),this.on(this.tech_,"enterpictureinpicture",e=>this.handleTechEnterPictureInPicture_(e)),this.on(this.tech_,"leavepictureinpicture",e=>this.handleTechLeavePictureInPicture_(e)),this.on(this.tech_,"error",e=>this.handleTechError_(e)),this.on(this.tech_,"posterchange",e=>this.handleTechPosterChange_(e)),this.on(this.tech_,"textdata",e=>this.handleTechTextData_(e)),this.on(this.tech_,"ratechange",e=>this.handleTechRateChange_(e)),this.on(this.tech_,"loadedmetadata",this.boundUpdateStyleEl_),this.usingNativeControls(this.techGet_("controls")),this.controls()&&!this.usingNativeControls()&&this.addTechControlsListeners_(),this.tech_.el().parentNode===this.el()||"Html5"===i&&this.tag||xe(this.tech_.el(),this.el()),this.tag&&(this.tag.player=null,this.tag=null)}unloadTech_(){a.names.forEach(e=>{e=a[e];this[e.privateName]=this[e.getterName]()}),this.textTracksJson_=Zt(this.tech_),this.isReady_=!1,this.tech_.dispose(),this.tech_=!1,this.isPosterFromTech_&&(this.poster_="",this.trigger("posterchange")),this.isPosterFromTech_=!1}tech(e){return void 0===e&&l.warn("Using the tech directly can be dangerous. I hope you know what you're doing.\nSee https://github.com/videojs/video.js/issues/2617 for more info.\n"),this.tech_}version(){return{"video.js":M}}addTechControlsListeners_(){this.removeTechControlsListeners_(),this.on(this.tech_,"click",this.boundHandleTechClick_),this.on(this.tech_,"dblclick",this.boundHandleTechDoubleClick_),this.on(this.tech_,"touchstart",this.boundHandleTechTouchStart_),this.on(this.tech_,"touchmove",this.boundHandleTechTouchMove_),this.on(this.tech_,"touchend",this.boundHandleTechTouchEnd_),this.on(this.tech_,"tap",this.boundHandleTechTap_)}removeTechControlsListeners_(){this.off(this.tech_,"tap",this.boundHandleTechTap_),this.off(this.tech_,"touchstart",this.boundHandleTechTouchStart_),this.off(this.tech_,"touchmove",this.boundHandleTechTouchMove_),this.off(this.tech_,"touchend",this.boundHandleTechTouchEnd_),this.off(this.tech_,"click",this.boundHandleTechClick_),this.off(this.tech_,"dblclick",this.boundHandleTechDoubleClick_)}handleTechReady_(){this.triggerReady(),this.cache_.volume&&this.techCall_("setVolume",this.cache_.volume),this.handleTechPosterChange_(),this.handleTechDurationChange_()}handleTechLoadStart_(){this.removeClass("vjs-ended","vjs-seeking"),this.error(null),this.handleTechDurationChange_(),this.paused()&&this.hasStarted(!1),this.trigger("loadstart"),this.manualAutoplay_(!0===this.autoplay()&&this.options_.normalizeAutoplay?"play":this.autoplay())}manualAutoplay_(t){if(this.tech_&&"string"==typeof t){var i=()=>{const e=this.muted(),t=(this.muted(!0),()=>{this.muted(e)});this.playTerminatedQueue_.push(t);var i=this.play();if(Yt(i))return i.catch(e=>{throw t(),new Error("Rejection at manualAutoplay. Restoring muted value. "+(e||""))})};let e;if("any"!==t||this.muted()?e="muted"!==t||this.muted()?this.play():i():Yt(e=this.play())&&(e=e.catch(i)),Yt(e))return e.then(()=>{this.trigger({type:"autoplay-success",autoplay:t})}).catch(()=>{this.trigger({type:"autoplay-failure",autoplay:t})})}}updateSourceCaches_(e=""){let t=e,i="";"string"!=typeof t&&(t=e.src,i=e.type),this.cache_.source=this.cache_.source||{},this.cache_.sources=this.cache_.sources||[],t&&!i&&(i=((e,t)=>{if(!t)return"";if(e.cache_.source.src===t&&e.cache_.source.type)return e.cache_.source.type;var i=e.cache_.sources.filter(e=>e.src===t);if(i.length)return i[0].type;var s=e.$$("source");for(let e=0;e<s.length;e++){var r=s[e];if(r.type&&r.src&&r.src===t)return r.type}return Ji(t)})(this,t)),this.cache_.source=d({},e,{src:t,type:i});var e=this.cache_.sources.filter(e=>e.src&&e.src===t),s=[],r=this.$$("source"),n=[];for(let e=0;e<r.length;e++){var a=Re(r[e]);s.push(a),a.src&&a.src===t&&n.push(a.src)}n.length&&!e.length?this.cache_.sources=s:e.length||(this.cache_.sources=[this.cache_.source]),this.cache_.src=t}handleTechSourceset_(t){if(!this.changingSrc_){let e=e=>this.updateSourceCaches_(e);var i=this.currentSource().src,s=t.src;(e=!i||/^blob:/.test(i)||!/^blob:/.test(s)||this.lastSource_&&(this.lastSource_.tech===s||this.lastSource_.player===i)?e:()=>{})(s),t.src||this.tech_.any(["sourceset","loadstart"],e=>{"sourceset"!==e.type&&(e=this.techGet_("currentSrc"),this.lastSource_.tech=e,this.updateSourceCaches_(e))})}this.lastSource_={player:this.currentSource().src,tech:t.src},this.trigger({src:t.src,type:"sourceset"})}hasStarted(e){if(void 0===e)return this.hasStarted_;e!==this.hasStarted_&&(this.hasStarted_=e,this.hasStarted_?this.addClass("vjs-has-started"):this.removeClass("vjs-has-started"))}handleTechPlay_(){this.removeClass("vjs-ended","vjs-paused"),this.addClass("vjs-playing"),this.hasStarted(!0),this.trigger("play")}handleTechRateChange_(){0<this.tech_.playbackRate()&&0===this.cache_.lastPlaybackRate&&(this.queuedCallbacks_.forEach(e=>e.callback(e.event)),this.queuedCallbacks_=[]),this.cache_.lastPlaybackRate=this.tech_.playbackRate(),this.trigger("ratechange")}handleTechWaiting_(){this.addClass("vjs-waiting"),this.trigger("waiting");const e=this.currentTime(),t=()=>{e!==this.currentTime()&&(this.removeClass("vjs-waiting"),this.off("timeupdate",t))};this.on("timeupdate",t)}handleTechCanPlay_(){this.removeClass("vjs-waiting"),this.trigger("canplay")}handleTechCanPlayThrough_(){this.removeClass("vjs-waiting"),this.trigger("canplaythrough")}handleTechPlaying_(){this.removeClass("vjs-waiting"),this.trigger("playing")}handleTechSeeking_(){this.addClass("vjs-seeking"),this.trigger("seeking")}handleTechSeeked_(){this.removeClass("vjs-seeking","vjs-ended"),this.trigger("seeked")}handleTechPause_(){this.removeClass("vjs-playing"),this.addClass("vjs-paused"),this.trigger("pause")}handleTechEnded_(){this.addClass("vjs-ended"),this.removeClass("vjs-waiting"),this.options_.loop?(this.currentTime(0),this.play()):this.paused()||this.pause(),this.trigger("ended")}handleTechDurationChange_(){this.duration(this.techGet_("duration"))}handleTechClick_(e){!this.controls_||void 0!==this.options_&&void 0!==this.options_.userActions&&void 0!==this.options_.userActions.click&&!1===this.options_.userActions.click||(void 0!==this.options_&&void 0!==this.options_.userActions&&"function"==typeof this.options_.userActions.click?this.options_.userActions.click.call(this,e):this.paused()?Qt(this.play()):this.pause())}handleTechDoubleClick_(t){!this.controls_||Array.prototype.some.call(this.$$(".vjs-control-bar, .vjs-modal-dialog"),e=>e.contains(t.target))||void 0!==this.options_&&void 0!==this.options_.userActions&&void 0!==this.options_.userActions.doubleClick&&!1===this.options_.userActions.doubleClick||(void 0!==this.options_&&void 0!==this.options_.userActions&&"function"==typeof this.options_.userActions.doubleClick?this.options_.userActions.doubleClick.call(this,t):this.isFullscreen()?this.exitFullscreen():this.requestFullscreen())}handleTechTap_(){this.userActive(!this.userActive())}handleTechTouchStart_(){this.userWasActive=this.userActive()}handleTechTouchMove_(){this.userWasActive&&this.reportUserActivity()}handleTechTouchEnd_(e){e.cancelable&&e.preventDefault()}toggleFullscreenClass_(){this.isFullscreen()?this.addClass("vjs-fullscreen"):this.removeClass("vjs-fullscreen")}documentFullscreenChange_(t){t=t.target.player;if(!t||t===this){t=this.el();let e=document[this.fsApi_.fullscreenElement]===t;!e&&t.matches&&(e=t.matches(":"+this.fsApi_.fullscreen)),this.isFullscreen(e)}}handleTechFullscreenChange_(e,t){t&&(t.nativeIOSFullscreen&&(this.addClass("vjs-ios-native-fs"),this.tech_.one("webkitendfullscreen",()=>{this.removeClass("vjs-ios-native-fs")})),this.isFullscreen(t.isFullscreen))}handleTechFullscreenError_(e,t){this.trigger("fullscreenerror",t)}togglePictureInPictureClass_(){this.isInPictureInPicture()?this.addClass("vjs-picture-in-picture"):this.removeClass("vjs-picture-in-picture")}handleTechEnterPictureInPicture_(e){this.isInPictureInPicture(!0)}handleTechLeavePictureInPicture_(e){this.isInPictureInPicture(!1)}handleTechError_(){var e=this.tech_.error();e&&this.error(e)}handleTechTextData_(){let e=1<arguments.length?arguments[1]:null;this.trigger("textdata",e)}getCache(){return this.cache_}resetCache_(){this.cache_={currentTime:0,initTime:0,inactivityTimeout:this.options_.inactivityTimeout,duration:NaN,lastVolume:1,lastPlaybackRate:this.defaultPlaybackRate(),media:null,src:"",source:{},sources:[],playbackRates:[],volume:1}}techCall_(t,i){this.ready(function(){if(t in Wi)return e=this.middleware_,this.tech_[t](e.reduce(Xi(t),i));if(t in Gi)return $i(this.middleware_,this.tech_,t,i);var e;try{this.tech_&&this.tech_[t](i)}catch(e){throw l(e),e}},!0)}techGet_(t){if(this.tech_&&this.tech_.isReady_){if(t in zi)return e=this.middleware_,i=this.tech_,e.reduceRight(Xi(t),i[t]());if(t in Gi)return $i(this.middleware_,this.tech_,t);var e,i;try{return this.tech_[t]()}catch(e){throw void 0===this.tech_[t]?l(`Video.js: ${t} method not defined for ${this.techName_} playback technology.`,e):"TypeError"===e.name?(l(`Video.js: ${t} unavailable on ${this.techName_} playback technology element.`,e),this.tech_.isReady_=!1):l(e),e}}}play(){return new Promise(e=>{this.play_(e)})}play_(e=Qt){this.playCallbacks_.push(e);var t,e=Boolean(!this.changingSrc_&&(this.src()||this.currentSrc())),i=Boolean(be||c);this.waitToPlay_&&(this.off(["ready","loadstart"],this.waitToPlay_),this.waitToPlay_=null),this.isReady_&&e?(t=this.techGet_("play"),i&&this.hasClass("vjs-ended")&&this.resetProgressBar_(),null===t?this.runPlayTerminatedQueue_():this.runPlayCallbacks_(t)):(this.waitToPlay_=e=>{this.play_()},this.one(["ready","loadstart"],this.waitToPlay_),!e&&i&&this.load())}runPlayTerminatedQueue_(){var e=this.playTerminatedQueue_.slice(0);this.playTerminatedQueue_=[],e.forEach(function(e){e()})}runPlayCallbacks_(t){var e=this.playCallbacks_.slice(0);this.playCallbacks_=[],this.playTerminatedQueue_=[],e.forEach(function(e){e(t)})}pause(){this.techCall_("pause")}paused(){return!1!==this.techGet_("paused")}played(){return this.techGet_("played")||jt(0,0)}scrubbing(e){if("undefined"==typeof e)return this.scrubbing_;this.scrubbing_=!!e,this.techCall_("setScrubbing",this.scrubbing_),e?this.addClass("vjs-scrubbing"):this.removeClass("vjs-scrubbing")}currentTime(e){if(void 0===e)return this.cache_.currentTime=this.techGet_("currentTime")||0,this.cache_.currentTime;e<0&&(e=0),this.isReady_&&!this.changingSrc_&&this.tech_&&this.tech_.isReady_?(this.techCall_("setCurrentTime",e),this.cache_.initTime=0,isFinite(e)&&(this.cache_.currentTime=Number(e))):(this.cache_.initTime=e,this.off("canplay",this.boundApplyInitTime_),this.one("canplay",this.boundApplyInitTime_))}applyInitTime_(){this.currentTime(this.cache_.initTime)}duration(e){if(void 0===e)return void 0!==this.cache_.duration?this.cache_.duration:NaN;(e=(e=parseFloat(e))<0?1/0:e)!==this.cache_.duration&&((this.cache_.duration=e)===1/0?this.addClass("vjs-live"):this.removeClass("vjs-live"),isNaN(e)||this.trigger("durationchange"))}remainingTime(){return this.duration()-this.currentTime()}remainingTimeDisplay(){return Math.floor(this.duration())-Math.floor(this.currentTime())}buffered(){let e=this.techGet_("buffered");return e=e&&e.length?e:jt(0,0)}seekable(){let e=this.techGet_("seekable");return e=e&&e.length?e:jt(0,0)}seeking(){return this.techGet_("seeking")}ended(){return this.techGet_("ended")}networkState(){return this.techGet_("networkState")}readyState(){return this.techGet_("readyState")}bufferedPercent(){return Xt(this.buffered(),this.duration())}bufferedEnd(){var e=this.buffered(),t=this.duration();let i=e.end(e.length-1);return i=i>t?t:i}volume(e){let t;if(void 0===e)return t=parseFloat(this.techGet_("volume")),isNaN(t)?1:t;t=Math.max(0,Math.min(1,e)),this.cache_.volume=t,this.techCall_("setVolume",t),0<t&&this.lastVolume_(t)}muted(e){if(void 0===e)return this.techGet_("muted")||!1;this.techCall_("setMuted",e)}defaultMuted(e){return void 0!==e&&this.techCall_("setDefaultMuted",e),this.techGet_("defaultMuted")||!1}lastVolume_(e){if(void 0===e||0===e)return this.cache_.lastVolume;this.cache_.lastVolume=e}supportsFullScreen(){return this.techGet_("supportsFullScreen")||!1}isFullscreen(e){var t;if(void 0===e)return this.isFullscreen_;t=this.isFullscreen_,this.isFullscreen_=Boolean(e),this.isFullscreen_!==t&&this.fsApi_.prefixed&&this.trigger("fullscreenchange"),this.toggleFullscreenClass_()}requestFullscreen(a){this.isInPictureInPicture()&&this.exitPictureInPicture();const o=this;return new Promise((e,i)=>{function s(){o.off("fullscreenerror",r),o.off("fullscreenchange",t)}function t(){s(),e()}function r(e,t){s(),i(t)}o.one("fullscreenchange",t),o.one("fullscreenerror",r);var n=o.requestFullscreenHelper_(a);n&&(n.then(s,s),n.then(e,i))})}requestFullscreenHelper_(e){let t;if(this.fsApi_.prefixed||(t=this.options_.fullscreen&&this.options_.fullscreen.options||{},void 0!==e&&(t=e)),this.fsApi_.requestFullscreen)return(e=this.el_[this.fsApi_.requestFullscreen](t))&&e.then(()=>this.isFullscreen(!0),()=>this.isFullscreen(!1)),e;this.tech_.supportsFullScreen()&&!0==!this.options_.preferFullWindow?this.techCall_("enterFullScreen"):this.enterFullWindow()}exitFullscreen(){const a=this;return new Promise((e,i)=>{function s(){a.off("fullscreenerror",r),a.off("fullscreenchange",t)}function t(){s(),e()}function r(e,t){s(),i(t)}a.one("fullscreenchange",t),a.one("fullscreenerror",r);var n=a.exitFullscreenHelper_();n&&(n.then(s,s),n.then(e,i))})}exitFullscreenHelper_(){var e;if(this.fsApi_.requestFullscreen)return(e=document[this.fsApi_.exitFullscreen]())&&Qt(e.then(()=>this.isFullscreen(!1))),e;this.tech_.supportsFullScreen()&&!0==!this.options_.preferFullWindow?this.techCall_("exitFullScreen"):this.exitFullWindow()}enterFullWindow(){this.isFullscreen(!0),this.isFullWindow=!0,this.docOrigOverflow=document.documentElement.style.overflow,pt(document,"keydown",this.boundFullWindowOnEscKey_),document.documentElement.style.overflow="hidden",De(document.body,"vjs-full-window"),this.trigger("enterFullWindow")}fullWindowOnEscKey(e){r.isEventKey(e,"Esc")&&!0===this.isFullscreen()&&(this.isFullWindow?this.exitFullWindow():this.exitFullscreen())}exitFullWindow(){this.isFullscreen(!1),this.isFullWindow=!1,p(document,"keydown",this.boundFullWindowOnEscKey_),document.documentElement.style.overflow=this.docOrigOverflow,Pe(document.body,"vjs-full-window"),this.trigger("exitFullWindow")}disablePictureInPicture(e){if(void 0===e)return this.techGet_("disablePictureInPicture");this.techCall_("setDisablePictureInPicture",e),this.options_.disablePictureInPicture=e,this.trigger("disablepictureinpicturechanged")}isInPictureInPicture(e){if(void 0===e)return!!this.isInPictureInPicture_;this.isInPictureInPicture_=!!e,this.togglePictureInPictureClass_()}requestPictureInPicture(){if(this.options_.enableDocumentPictureInPicture&&window.documentPictureInPicture){const t=document.createElement(this.el().tagName);return t.classList=this.el().classList,t.classList.add("vjs-pip-container"),this.posterImage&&t.appendChild(this.posterImage.el().cloneNode(!0)),this.titleBar&&t.appendChild(this.titleBar.el().cloneNode(!0)),t.appendChild(o("p",{className:"vjs-pip-text"},{},this.localize("Playing in picture-in-picture"))),window.documentPictureInPicture.requestWindow({width:this.videoWidth(),height:this.videoHeight()}).then(e=>(Je(e),this.el_.parentNode.insertBefore(t,this.el_),e.document.body.appendChild(this.el_),e.document.body.classList.add("vjs-pip-window"),this.player_.isInPictureInPicture(!0),this.player_.trigger({type:"enterpictureinpicture",pipWindow:e}),e.addEventListener("pagehide",e=>{e=e.target.querySelector(".video-js");t.parentNode.replaceChild(e,t),this.player_.isInPictureInPicture(!1),this.player_.trigger("leavepictureinpicture")}),e))}return"pictureInPictureEnabled"in document&&!1===this.disablePictureInPicture()?this.techGet_("requestPictureInPicture"):Promise.reject("No PiP mode is available")}exitPictureInPicture(){return window.documentPictureInPicture&&window.documentPictureInPicture.window?(window.documentPictureInPicture.window.close(),Promise.resolve()):"pictureInPictureEnabled"in document?document.exitPictureInPicture():void 0}handleKeyDown(e){var t,i,s=this.options_["userActions"];s&&s.hotkeys&&(t=this.el_.ownerDocument.activeElement,i=t.tagName.toLowerCase(),t.isContentEditable||("input"===i?-1===["button","checkbox","hidden","radio","reset","submit"].indexOf(t.type):-1!==["textarea"].indexOf(i))||("function"==typeof s.hotkeys?s.hotkeys.call(this,e):this.handleHotkeys(e)))}handleHotkeys(e){var{fullscreenKey:t=e=>r.isEventKey(e,"f"),muteKey:i=e=>r.isEventKey(e,"m"),playPauseKey:s=e=>r.isEventKey(e,"k")||r.isEventKey(e,"Space")}=this.options_.userActions?this.options_.userActions.hotkeys:{};t.call(this,e)?(e.preventDefault(),e.stopPropagation(),t=f.getComponent("FullscreenToggle"),!1!==document[this.fsApi_.fullscreenEnabled]&&t.prototype.handleClick.call(this,e)):i.call(this,e)?(e.preventDefault(),e.stopPropagation(),f.getComponent("MuteToggle").prototype.handleClick.call(this,e)):s.call(this,e)&&(e.preventDefault(),e.stopPropagation(),f.getComponent("PlayToggle").prototype.handleClick.call(this,e))}canPlayType(s){var r;for(let t=0,i=this.options_.techOrder;t<i.length;t++){var n=i[t];let e=y.getTech(n);if(e=e||f.getComponent(n)){if(e.isSupported()&&(r=e.canPlayType(s)))return r}else l.error(`The "${n}" tech is undefined. Skipped browser support check for that tech.`)}return""}selectSource(e){function t(e,i,s){let r;return e.some(t=>i.some(e=>{if(r=s(t,e))return!0})),r}var i=this.options_.techOrder.map(e=>[e,y.getTech(e)]).filter(([e,t])=>t?t.isSupported():(l.error(`The "${e}" tech is undefined. Skipped browser support check for that tech.`),!1));let s;var r,n=([e,t],i)=>{if(t.canPlaySource(i,this.options_[e.toLowerCase()]))return{source:i,tech:e}};return(s=this.options_.sourceOrder?t(e,i,(r=n,(e,t)=>r(t,e))):t(i,e,n))||!1}handleSrc_(e,s){if("undefined"==typeof e)return this.cache_.src||"";this.resetRetryOnError_&&this.resetRetryOnError_();const r=Yi(e);if(r.length){if(this.changingSrc_=!0,s||(this.cache_.sources=r),this.updateSourceCaches_(r[0]),Vi(this,r[0],(e,t)=>{var i;if(this.middleware_=t,s||(this.cache_.sources=r),this.updateSourceCaches_(e),this.src_(e))return 1<r.length?this.handleSrc_(r.slice(1)):(this.changingSrc_=!1,this.setTimeout(function(){this.error({code:4,message:this.options_.notSupportedMessage})},0),void this.triggerReady());i=this.tech_,t.forEach(e=>e.setTech&&e.setTech(i))}),1<r.length){const t=()=>{this.error(null),this.handleSrc_(r.slice(1),!0)},i=()=>{this.off("error",t)};this.one("error",t),this.one("playing",i),this.resetRetryOnError_=()=>{this.off("error",t),this.off("playing",i)}}}else this.setTimeout(function(){this.error({code:4,message:this.options_.notSupportedMessage})},0)}src(e){return this.handleSrc_(e,!1)}src_(e){var t=this.selectSource([e]);return!t||(Nt(t.tech,this.techName_)?this.ready(function(){this.tech_.constructor.prototype.hasOwnProperty("setSource")?this.techCall_("setSource",e):this.techCall_("src",e.src),this.changingSrc_=!1},!0):(this.changingSrc_=!0,this.loadTech_(t.tech,t.source),this.tech_.ready(()=>{this.changingSrc_=!1})),!1)}load(){this.tech_&&this.tech_.vhs?this.src(this.currentSource()):this.techCall_("load")}reset(){this.paused()?this.doReset_():Qt(this.play().then(()=>this.doReset_()))}doReset_(){this.tech_&&this.tech_.clearTracks("text"),this.removeClass("vjs-playing"),this.addClass("vjs-paused"),this.resetCache_(),this.poster(""),this.loadTech_(this.options_.techOrder[0],null),this.techCall_("reset"),this.resetControlBarUI_(),this.error(null),this.titleBar&&this.titleBar.update({title:void 0,description:void 0}),wt(this)&&this.trigger("playerreset")}resetControlBarUI_(){this.resetProgressBar_(),this.resetPlaybackRate_(),this.resetVolumeBar_()}resetProgressBar_(){this.currentTime(0);var{currentTimeDisplay:e,durationDisplay:t,progressControl:i,remainingTimeDisplay:s}=this.controlBar||{},i=(i||{})["seekBar"];e&&e.updateContent(),t&&t.updateContent(),s&&s.updateContent(),i&&(i.update(),i.loadProgressBar)&&i.loadProgressBar.update()}resetPlaybackRate_(){this.playbackRate(this.defaultPlaybackRate()),this.handleTechRateChange_()}resetVolumeBar_(){this.volume(1),this.trigger("volumechange")}currentSources(){var e=this.currentSource(),t=[];return 0!==Object.keys(e).length&&t.push(e),this.cache_.sources||t}currentSource(){return this.cache_.source||{}}currentSrc(){return this.currentSource()&&this.currentSource().src||""}currentType(){return this.currentSource()&&this.currentSource().type||""}preload(e){if(void 0===e)return this.techGet_("preload");this.techCall_("setPreload",e),this.options_.preload=e}autoplay(e){if(void 0===e)return this.options_.autoplay||!1;let t;"string"==typeof e&&/(any|play|muted)/.test(e)||!0===e&&this.options_.normalizeAutoplay?(this.options_.autoplay=e,this.manualAutoplay_("string"==typeof e?e:"play"),t=!1):this.options_.autoplay=!!e,t="undefined"==typeof t?this.options_.autoplay:t,this.tech_&&this.techCall_("setAutoplay",t)}playsinline(e){return void 0!==e&&(this.techCall_("setPlaysinline",e),this.options_.playsinline=e),this.techGet_("playsinline")}loop(e){if(void 0===e)return this.techGet_("loop");this.techCall_("setLoop",e),this.options_.loop=e}poster(e){if(void 0===e)return this.poster_;(e=e||"")!==this.poster_&&(this.poster_=e,this.techCall_("setPoster",e),this.isPosterFromTech_=!1,this.trigger("posterchange"))}handleTechPosterChange_(){var e;(!this.poster_||this.options_.techCanOverridePoster)&&this.tech_&&this.tech_.poster&&(e=this.tech_.poster()||"")!==this.poster_&&(this.poster_=e,this.isPosterFromTech_=!0,this.trigger("posterchange"))}controls(e){if(void 0===e)return!!this.controls_;this.controls_!==(e=!!e)&&(this.controls_=e,this.usingNativeControls()&&this.techCall_("setControls",e),this.controls_?(this.removeClass("vjs-controls-disabled"),this.addClass("vjs-controls-enabled"),this.trigger("controlsenabled"),this.usingNativeControls()||this.addTechControlsListeners_()):(this.removeClass("vjs-controls-enabled"),this.addClass("vjs-controls-disabled"),this.trigger("controlsdisabled"),this.usingNativeControls()||this.removeTechControlsListeners_()))}usingNativeControls(e){if(void 0===e)return!!this.usingNativeControls_;this.usingNativeControls_!==(e=!!e)&&(this.usingNativeControls_=e,this.usingNativeControls_?(this.addClass("vjs-using-native-controls"),this.trigger("usingnativecontrols")):(this.removeClass("vjs-using-native-controls"),this.trigger("usingcustomcontrols")))}error(t){if(void 0===t)return this.error_||null;if(B("beforeerror").forEach(e=>{e=e(this,t);K(e)&&!Array.isArray(e)||"string"==typeof e||"number"==typeof e||null===e?t=e:this.log.error("please return a value that MediaError expects in beforeerror hooks")}),this.options_.suppressNotSupportedError&&t&&4===t.code){const e=function(){this.error(t)};this.options_.suppressNotSupportedError=!1,this.any(["click","touchstart"],e),void this.one("loadstart",function(){this.off(["click","touchstart"],e)})}else null===t?(this.error_=null,this.removeClass("vjs-error"),this.errorDisplay&&this.errorDisplay.close()):(this.error_=new i(t),this.addClass("vjs-error"),l.error(`(CODE:${this.error_.code} ${i.errorTypes[this.error_.code]})`,this.error_.message,this.error_),this.trigger("error"),B("error").forEach(e=>e(this,this.error_)))}reportUserActivity(e){this.userActivity_=!0}userActive(e){if(void 0===e)return this.userActive_;(e=!!e)!==this.userActive_&&(this.userActive_=e,this.userActive_?(this.userActivity_=!0,this.removeClass("vjs-user-inactive"),this.addClass("vjs-user-active"),this.trigger("useractive")):(this.tech_&&this.tech_.one("mousemove",function(e){e.stopPropagation(),e.preventDefault()}),this.userActivity_=!1,this.removeClass("vjs-user-active"),this.addClass("vjs-user-inactive"),this.trigger("userinactive")))}listenForUserActivity_(){let t,i,s;const r=m(this,this.reportUserActivity);function e(e){r(),this.clearInterval(t)}this.on("mousedown",function(){r(),this.clearInterval(t),t=this.setInterval(r,250)}),this.on("mousemove",function(e){e.screenX===i&&e.screenY===s||(i=e.screenX,s=e.screenY,r())}),this.on("mouseup",e),this.on("mouseleave",e);var n=this.getChild("controlBar");!n||c||ie||(n.on("mouseenter",function(e){0!==this.player().options_.inactivityTimeout&&(this.player().cache_.inactivityTimeout=this.player().options_.inactivityTimeout),this.player().options_.inactivityTimeout=0}),n.on("mouseleave",function(e){this.player().options_.inactivityTimeout=this.player().cache_.inactivityTimeout})),this.on("keydown",r),this.on("keyup",r);let a;this.setInterval(function(){var e;this.userActivity_&&(this.userActivity_=!1,this.userActive(!0),this.clearTimeout(a),(e=this.options_.inactivityTimeout)<=0||(a=this.setTimeout(function(){this.userActivity_||this.userActive(!1)},e)))},250)}playbackRate(e){if(void 0===e)return this.tech_&&this.tech_.featuresPlaybackRate?this.cache_.lastPlaybackRate||this.techGet_("playbackRate"):1;this.techCall_("setPlaybackRate",e)}defaultPlaybackRate(e){return void 0!==e?this.techCall_("setDefaultPlaybackRate",e):this.tech_&&this.tech_.featuresPlaybackRate?this.techGet_("defaultPlaybackRate"):1}isAudio(e){if(void 0===e)return!!this.isAudio_;this.isAudio_=!!e}enableAudioOnlyUI_(){this.addClass("vjs-audio-only-mode");var e=this.children();const t=this.getChild("ControlBar");var i=t&&t.currentHeight();e.forEach(e=>{e!==t&&e.el_&&!e.hasClass("vjs-hidden")&&(e.hide(),this.audioOnlyCache_.hiddenChildren.push(e))}),this.audioOnlyCache_.playerHeight=this.currentHeight(),this.height(i),this.trigger("audioonlymodechange")}disableAudioOnlyUI_(){this.removeClass("vjs-audio-only-mode"),this.audioOnlyCache_.hiddenChildren.forEach(e=>e.show()),this.height(this.audioOnlyCache_.playerHeight),this.trigger("audioonlymodechange")}audioOnlyMode(e){return"boolean"!=typeof e||e===this.audioOnlyMode_?this.audioOnlyMode_:(this.audioOnlyMode_=e)?(e=[],this.isInPictureInPicture()&&e.push(this.exitPictureInPicture()),this.isFullscreen()&&e.push(this.exitFullscreen()),this.audioPosterMode()&&e.push(this.audioPosterMode(!1)),Promise.all(e).then(()=>this.enableAudioOnlyUI_())):Promise.resolve().then(()=>this.disableAudioOnlyUI_())}enablePosterModeUI_(){(this.tech_&&this.tech_).hide(),this.addClass("vjs-audio-poster-mode"),this.trigger("audiopostermodechange")}disablePosterModeUI_(){(this.tech_&&this.tech_).show(),this.removeClass("vjs-audio-poster-mode"),this.trigger("audiopostermodechange")}audioPosterMode(e){return"boolean"!=typeof e||e===this.audioPosterMode_?this.audioPosterMode_:(this.audioPosterMode_=e)?(this.audioOnlyMode()?this.audioOnlyMode(!1):Promise.resolve()).then(()=>{this.enablePosterModeUI_()}):Promise.resolve().then(()=>{this.disablePosterModeUI_()})}addTextTrack(e,t,i){if(this.tech_)return this.tech_.addTextTrack(e,t,i)}addRemoteTextTrack(e,t){if(this.tech_)return this.tech_.addRemoteTextTrack(e,t)}removeRemoteTextTrack(e={}){let t=e["track"];if(t=t||e,this.tech_)return this.tech_.removeRemoteTextTrack(t)}getVideoPlaybackQuality(){return this.techGet_("getVideoPlaybackQuality")}videoWidth(){return this.tech_&&this.tech_.videoWidth&&this.tech_.videoWidth()||0}videoHeight(){return this.tech_&&this.tech_.videoHeight&&this.tech_.videoHeight()||0}language(e){if(void 0===e)return this.language_;this.language_!==String(e).toLowerCase()&&(this.language_=String(e).toLowerCase(),wt(this))&&this.trigger("languagechange")}languages(){return d(v.prototype.options_.languages,this.languages_)}toJSON(){var t=d(this.options_),i=t.tracks;t.tracks=[];for(let e=0;e<i.length;e++){var s=i[e];(s=d(s)).player=void 0,t.tracks[e]=s}return t}createModal(e,t){(t=t||{}).content=e||"";const i=new ii(this,t);return this.addChild(i),i.on("dispose",()=>{this.removeChild(i)}),i.open(),i}updateCurrentBreakpoint_(){if(this.responsive()){var t=this.currentBreakpoint(),i=this.currentWidth();for(let e=0;e<Or.length;e++){var s=Or[e];if(i<=this.breakpoints_[s]){if(t===s)return;t&&this.removeClass(Rr[t]),this.addClass(Rr[s]),this.breakpoint_=s;break}}}}removeCurrentBreakpoint_(){var e=this.currentBreakpointClass();this.breakpoint_="",e&&this.removeClass(e)}breakpoints(e){return void 0!==e&&(this.breakpoint_="",this.breakpoints_=Object.assign({},Nr,e),this.updateCurrentBreakpoint_()),Object.assign(this.breakpoints_)}responsive(e){return void 0===e?this.responsive_:(e=Boolean(e))!==this.responsive_?((this.responsive_=e)?(this.on("playerresize",this.boundUpdateCurrentBreakpoint_),this.updateCurrentBreakpoint_()):(this.off("playerresize",this.boundUpdateCurrentBreakpoint_),this.removeCurrentBreakpoint_()),e):void 0}currentBreakpoint(){return this.breakpoint_}currentBreakpointClass(){return Rr[this.breakpoint_]||""}loadMedia(e,t){var i,s,r,n,a,o,l;e&&"object"==typeof e&&(i=this.crossOrigin(),{artist:e,artwork:s,description:r,poster:n,src:a,textTracks:o,title:l}=(this.reset(),this.cache_.media=d(e),this.cache_.media),!s&&n&&(this.cache_.media.artwork=[{src:n,type:Ji(n)}]),i&&this.crossOrigin(i),a&&this.src(a),n&&this.poster(n),Array.isArray(o)&&o.forEach(e=>this.addRemoteTextTrack(e,!1)),this.titleBar&&this.titleBar.update({title:l,description:r||e||""}),this.ready(t))}getMedia(){var e,t;return this.cache_.media?d(this.cache_.media):(e=this.poster(),t={src:this.currentSources(),textTracks:Array.prototype.map.call(this.remoteTextTracks(),e=>({kind:e.kind,label:e.label,language:e.language,src:e.src}))},e&&(t.poster=e,t.artwork=[{src:t.poster,type:Ji(t.poster)}]),t)}static getTagSettings(e){var t,i={sources:[],tracks:[]},s=Re(e),r=s["data-setup"];if(Ae(e,"vjs-fill")&&(s.fill=!0),Ae(e,"vjs-fluid")&&(s.fluid=!0),null!==r&&([r,t]=Kt(r||"{}"),r&&l.error(r),Object.assign(s,t)),Object.assign(i,s),e.hasChildNodes()){var n=e.childNodes;for(let e=0,t=n.length;e<t;e++){var a=n[e],o=a.nodeName.toLowerCase();"source"===o?i.sources.push(Re(a)):"track"===o&&i.tracks.push(Re(a))}}return i}debug(e){if(void 0===e)return this.debugEnabled_;e?(this.trigger("debugon"),this.previousLogLevel_=this.log.level,this.log.level("debug"),this.debugEnabled_=!0):(this.trigger("debugoff"),this.log.level(this.previousLogLevel_),this.previousLogLevel_=void 0,this.debugEnabled_=!1)}playbackRates(e){if(void 0===e)return this.cache_.playbackRates;Array.isArray(e)&&e.every(e=>"number"==typeof e)&&(this.cache_.playbackRates=e,this.trigger("playbackrateschange"))}}a.names.forEach(function(e){const t=a[e];v.prototype[t.getterName]=function(){return this.tech_?this.tech_[t.getterName]():(this[t.privateName]=this[t.privateName]||new t.ListClass,this[t.privateName])}}),v.prototype.crossorigin=v.prototype.crossOrigin,v.players={};pr=window.navigator;v.prototype.options_={techOrder:y.defaultTechOrder_,html5:{},enableSourceset:!0,inactivityTimeout:2e3,playbackRates:[],liveui:!1,children:["mediaLoader","posterImage","titleBar","textTrackDisplay","loadingSpinner","bigPlayButton","liveTracker","controlBar","errorDisplay","textTrackSettings","resizeManager"],language:pr&&(pr.languages&&pr.languages[0]||pr.userLanguage||pr.language)||"en",languages:{},notSupportedMessage:"No compatible source was found for this media.",normalizeAutoplay:!1,fullscreen:{options:{navigationUI:"hide"}},breakpoints:{},responsive:!1,audioOnlyMode:!1,audioPosterMode:!1,enableSmoothSeeking:!1},Pr.forEach(function(e){v.prototype[`handleTech${g(e)}_`]=function(){return this.trigger(e)}}),f.registerComponent("Player",v);function Mr(t,i){function s(){Vr(this,{name:t,plugin:i,instance:null},!0);var e=i.apply(this,arguments);return Hr(this,t),Vr(this,{name:t,plugin:i,instance:e}),e}return Object.keys(i).forEach(function(e){s[e]=i[e]}),s}const Ur="plugin",Br="activePlugins_",Fr={},qr=e=>Fr.hasOwnProperty(e),jr=e=>qr(e)?Fr[e]:void 0,Hr=(e,t)=>{e[Br]=e[Br]||{},e[Br][t]=!0},Vr=(e,t,i)=>{i=(i?"before":"")+"pluginsetup";e.trigger(i,t),e.trigger(i+":"+t.name,t)},$r=(i,s)=>(s.prototype.name=i,function(...e){Vr(this,{name:i,plugin:s,instance:null},!0);const t=new s(this,...e);return this[i]=()=>t,Vr(this,t.getEventHash()),t});class zr{constructor(e){if(this.constructor===zr)throw new Error("Plugin must be sub-classed; not directly instantiated.");this.player=e,this.log||(this.log=this.player.log.createLogger(this.name)),Pt(this),delete this.trigger,Ot(this,this.constructor.defaultState),Hr(e,this.name),this.dispose=this.dispose.bind(this),e.on("dispose",this.dispose)}version(){return this.constructor.VERSION}getEventHash(e={}){return e.name=this.name,e.plugin=this.constructor,e.instance=this,e}trigger(e,t={}){return mt(this.eventBusEl_,e,this.getEventHash(t))}handleStateChanged(e){}dispose(){var{name:e,player:t}=this;this.trigger("dispose"),this.off(),t.off("dispose",this.dispose),t[Br][e]=!1,this.player=this.state=null,t[e]=$r(e,Fr[e])}static isBasic(e){e="string"==typeof e?jr(e):e;return"function"==typeof e&&!zr.prototype.isPrototypeOf(e.prototype)}static registerPlugin(e,t){if("string"!=typeof e)throw new Error(`Illegal plugin name, "${e}", must be a string, was ${typeof e}.`);if(qr(e))l.warn(`A plugin named "${e}" already exists. You may want to avoid re-registering plugins!`);else if(v.prototype.hasOwnProperty(e))throw new Error(`Illegal plugin name, "${e}", cannot share a name with an existing player method!`);if("function"!=typeof t)throw new Error(`Illegal plugin for "${e}", must be a function, was ${typeof t}.`);return Fr[e]=t,e!==Ur&&(zr.isBasic(t)?v.prototype[e]=Mr(e,t):v.prototype[e]=$r(e,t)),t}static deregisterPlugin(e){if(e===Ur)throw new Error("Cannot de-register base plugin.");qr(e)&&(delete Fr[e],delete v.prototype[e])}static getPlugins(e=Object.keys(Fr)){let i;return e.forEach(e=>{var t=jr(e);t&&((i=i||{})[e]=t)}),i}static getPluginVersion(e){e=jr(e);return e&&e.VERSION||""}}function Wr(e,i,s,r){{var n=i+` is deprecated and will be removed in ${e}.0; please use ${s} instead.`,a=r;let t=!1;return function(...e){return t||l.warn(n),t=!0,a.apply(this,e)}}}zr.getPlugin=jr,zr.BASE_PLUGIN_NAME=Ur,zr.registerPlugin(Ur,zr),v.prototype.usingPlugin=function(e){return!!this[Br]&&!0===this[Br][e]},v.prototype.hasPlugin=function(e){return!!qr(e)};const Gr=e=>0===e.indexOf("#")?e.slice(1):e;function b(e,t,i){let s=b.getPlayer(e);if(s)t&&l.warn(`Player "${e}" is already initialised. Options will not be applied.`),i&&s.ready(i);else{const r="string"==typeof e?Ke("#"+Gr(e)):e;if(!Ee(r))throw new TypeError("The element or ID supplied is not valid. (videojs)");e="getRootNode"in r&&r.getRootNode()instanceof window.ShadowRoot?r.getRootNode():r.ownerDocument.body,e=(r.ownerDocument.defaultView&&e.contains(r)||l.warn("The element supplied is not included in the DOM"),!0===(t=t||{}).restoreEl&&(t.restoreEl=(r.parentNode&&r.parentNode.hasAttribute("data-vjs-player")?r.parentNode:r).cloneNode(!0)),B("beforesetup").forEach(e=>{e=e(r,d(t));!K(e)||Array.isArray(e)?l.error("please return an object in beforesetup hooks"):t=d(t,e)}),f.getComponent("Player"));s=new e(r,t,i),B("setup").forEach(e=>e(s))}return s}b.hooks_=U,b.hooks=B,b.hook=function(e,t){B(e,t)},b.hookOnce=function(s,e){B(s,[].concat(e).map(t=>{const i=(...e)=>(F(s,i),t(...e));return i}))},b.removeHook=F,!0!==window.VIDEOJS_NO_DYNAMIC_STYLE&&we()&&!(lr=Ke(".vjs-styles-defaults"))&&(lr=nt("vjs-styles-defaults"),(cr=Ke("head"))&&cr.insertBefore(lr,cr.firstChild),at(lr,`
+      .video-js {
+        width: 300px;
+        height: 150px;
+      }
+
+      .vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: 56.25%
+      }
+    `)),st(1,b),b.VERSION=M,b.options=v.prototype.options_,b.getPlayers=()=>v.players,b.getPlayer=e=>{var t=v.players;let i;if("string"==typeof e){var s=Gr(e),r=t[s];if(r)return r;i=Ke("#"+s)}else i=e;if(Ee(i)){var{player:r,playerId:s}=i;if(r||t[s])return r||t[s]}},b.getAllPlayers=()=>Object.keys(v.players).map(e=>v.players[e]).filter(Boolean),b.players=v.players,b.getComponent=f.getComponent,b.registerComponent=(e,t)=>(y.isTech(t)&&l.warn(`The ${e} tech was registered as a component. It should instead be registered using videojs.registerTech(name, tech)`),f.registerComponent.call(f,e,t)),b.getTech=y.getTech,b.registerTech=y.registerTech,b.use=function(e,t){qi[e]=qi[e]||[],qi[e].push(t)},Object.defineProperty(b,"middleware",{value:{},writeable:!1,enumerable:!0}),Object.defineProperty(b.middleware,"TERMINATOR",{value:Hi,writeable:!1,enumerable:!0}),b.browser=Te,b.obj=Z,b.mergeOptions=Wr(9,"videojs.mergeOptions","videojs.obj.merge",d),b.defineLazyProperty=Wr(9,"videojs.defineLazyProperty","videojs.obj.defineLazyProperty",J),b.bind=Wr(9,"videojs.bind","native Function.prototype.bind",m),b.registerPlugin=zr.registerPlugin,b.deregisterPlugin=zr.deregisterPlugin,b.plugin=(e,t)=>(l.warn("videojs.plugin() is deprecated; use videojs.registerPlugin() instead"),zr.registerPlugin(e,t)),b.getPlugins=zr.getPlugins,b.getPlugin=zr.getPlugin,b.getPluginVersion=zr.getPluginVersion,b.addLanguage=function(e,t){return e=(""+e).toLowerCase(),b.options.languages=d(b.options.languages,{[e]:t}),b.options.languages[e]},b.log=l,b.createLogger=z,b.time=Gt,b.createTimeRange=Wr(9,"videojs.createTimeRange","videojs.time.createTimeRanges",jt),b.createTimeRanges=Wr(9,"videojs.createTimeRanges","videojs.time.createTimeRanges",jt),b.formatTime=Wr(9,"videojs.formatTime","videojs.time.formatTime",Wt),b.setFormatTime=Wr(9,"videojs.setFormatTime","videojs.time.setFormatTime",$t),b.resetFormatTime=Wr(9,"videojs.resetFormatTime","videojs.time.resetFormatTime",zt),b.parseUrl=Wr(9,"videojs.parseUrl","videojs.url.parseUrl",pi),b.isCrossOrigin=Wr(9,"videojs.isCrossOrigin","videojs.url.isCrossOrigin",gi),b.EventTarget=Tt,b.any=ft,b.on=pt,b.one=gt,b.off=p,b.trigger=mt,b.xhr=Ei,b.TextTrack=Oi,b.AudioTrack=Ri,b.VideoTrack=Ni,["isEl","isTextNode","createEl","hasClass","addClass","removeClass","toggleClass","setAttributes","getAttributes","emptyEl","appendContent","insertContent"].forEach(e=>{b[e]=function(){return l.warn(`videojs.${e}() is deprecated; use videojs.dom.${e}() instead`),Ze[e].apply(null,arguments)}}),b.computedStyle=Wr(9,"videojs.computedStyle","videojs.dom.computedStyle",Qe),b.dom=Ze,b.fn=e,b.num=Ut,b.str=Mt,b.url=yi,b.Error={UnsupportedSidxContainer:"unsupported-sidx-container-error",DashManifestSidxParsingError:"dash-manifest-sidx-parsing-error",HlsPlaylistRequestError:"hls-playlist-request-error",SegmentUnsupportedMediaFormat:"segment-unsupported-media-format-error",UnsupportedMediaInitialization:"unsupported-media-initialization-error",SegmentSwitchError:"segment-switch-error",SegmentExceedsSourceBufferQuota:"segment-exceeds-source-buffer-quota-error",SegmentAppendError:"segment-append-error",VttLoadError:"vtt-load-error",VttCueParsingError:"vtt-cue-parsing-error",AdsBeforePrerollError:"ads-before-preroll-error",AdsPrerollError:"ads-preroll-error",AdsMidrollError:"ads-midroll-error",AdsPostrollError:"ads-postroll-error",AdsMacroReplacementFailed:"ads-macro-replacement-failed",AdsResumeContentFailed:"ads-resume-content-failed",EMEFailedToRequestMediaKeySystemAccess:"eme-failed-request-media-key-system-access",EMEFailedToCreateMediaKeys:"eme-failed-create-media-keys",EMEFailedToAttachMediaKeysToVideoElement:"eme-failed-attach-media-keys-to-video",EMEFailedToCreateMediaKeySession:"eme-failed-create-media-key-session",EMEFailedToSetServerCertificate:"eme-failed-set-server-certificate",EMEFailedToGenerateLicenseRequest:"eme-failed-generate-license-request",EMEFailedToUpdateSessionWithReceivedLicenseKeys:"eme-failed-update-session",EMEFailedToCloseSession:"eme-failed-close-session",EMEFailedToRemoveKeysFromSession:"eme-failed-remove-keys",EMEFailedToLoadSessionBySessionId:"eme-failed-load-session"},Bt(function(e,t){
+/*! @name videojs-contrib-quality-levels @version 4.1.0 @license Apache-2.0 */
+e.exports=function(e){function t(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var i=t(e);class s{constructor(e){let t=this;t.id=e.id;t.label=t.id;t.width=e.width;t.height=e.height;t.bitrate=e.bandwidth;t.frameRate=e.frameRate;t.enabled_=e.enabled;Object.defineProperty(t,"enabled",{get(){return t.enabled_()},set(e){t.enabled_(e)}});return t}}class n extends i["default"].EventTarget{constructor(){super();let e=this;e.levels_=[];e.selectedIndex_=-1;Object.defineProperty(e,"selectedIndex",{get(){return e.selectedIndex_}});Object.defineProperty(e,"length",{get(){return e.levels_.length}});e[Symbol.iterator]=()=>e.levels_.values();return e}addQualityLevel(e){let t=this.getQualityLevelById(e.id);if(t)return t;const i=this.levels_.length;t=new s(e);if(!(""+i in this))Object.defineProperty(this,i,{get(){return this.levels_[i]}});this.levels_.push(t);this.trigger({qualityLevel:t,type:"addqualitylevel"});return t}removeQualityLevel(i){let s=null;for(let e=0,t=this.length;e<t;e++)if(this[e]===i){s=this.levels_.splice(e,1)[0];if(this.selectedIndex_===e)this.selectedIndex_=-1;else if(this.selectedIndex_>e)this.selectedIndex_--;break}if(s)this.trigger({qualityLevel:i,type:"removequalitylevel"});return s}getQualityLevelById(i){for(let e=0,t=this.length;e<t;e++){const s=this[e];if(s.id===i)return s}return null}dispose(){this.selectedIndex_=-1;this.levels_.length=0}}n.prototype.allowedEvents_={change:"change",addqualitylevel:"addqualitylevel",removequalitylevel:"removequalitylevel"};for(const l in n.prototype.allowedEvents_)n.prototype["on"+l]=null;var a="4.1.0";const r=function(e,t){const i=e.qualityLevels;const s=new n;const r=function(){s.dispose();e.qualityLevels=i;e.off("dispose",r)};e.on("dispose",r);e.qualityLevels=()=>s;e.qualityLevels.VERSION=a;return s},o=function(e){return r(this,i["default"].obj.merge({},e))};return i["default"].registerPlugin("qualityLevels",o),o.VERSION=a,o}(b)});function Xr(e,t){if(/^[a-z]+:/i.test(t))return t;/^data:/.test(e)&&(e=window.location&&window.location.href||"");var i="function"==typeof window.URL,s=/^\/\//.test(e),r=!window.location&&!/\/\//i.test(e);return i?e=new window.URL(e,window.location||Yr):/\/\//i.test(e)||(e=Kr.buildAbsoluteURL(window.location&&window.location.href||"",e)),i?(i=new URL(t,e),r?i.href.slice(Yr.length):s?i.href.slice(i.protocol.length):i.href):Kr.buildAbsoluteURL(e,t)}var Kr=Bt(function(e,t){var i,n,s,r,a;i=/^(?=((?:[a-zA-Z0-9+\-.]+:)?))\1(?=((?:\/\/[^\/?#]*)?))\2(?=((?:(?:[^?#\/]*\/)*[^;?#\/]*)?))\3((?:;[^?#]*)?)(\?[^#]*)?(#[^]*)?$/,n=/^(?=([^\/?#]*))\1([^]*)$/,s=/(?:\/|^)\.(?=\/)/g,r=/(?:\/|^)\.\.\/(?!\.\.\/)[^\/]*(?=\/)/g,a={buildAbsoluteURL:function(e,t,i){if(i=i||{},e=e.trim(),!(t=t.trim())){if(!i.alwaysNormalize)return e;var s=a.parseURL(e);if(s)return s.path=a.normalizePath(s.path),a.buildURLFromParts(s);throw new Error("Error trying to parse base URL.")}s=a.parseURL(t);if(!s)throw new Error("Error trying to parse relative URL.");if(s.scheme)return i.alwaysNormalize?(s.path=a.normalizePath(s.path),a.buildURLFromParts(s)):t;t=a.parseURL(e);if(!t)throw new Error("Error trying to parse base URL.");!t.netLoc&&t.path&&"/"!==t.path[0]&&(e=n.exec(t.path),t.netLoc=e[1],t.path=e[2]),t.netLoc&&!t.path&&(t.path="/");var r,e={scheme:t.scheme,netLoc:s.netLoc,path:null,params:s.params,query:s.query,fragment:s.fragment};return s.netLoc||(e.netLoc=t.netLoc,"/"!==s.path[0]&&(s.path?(r=(r=t.path).substring(0,r.lastIndexOf("/")+1)+s.path,e.path=a.normalizePath(r)):(e.path=t.path,s.params||(e.params=t.params,s.query)||(e.query=t.query)))),null===e.path&&(e.path=i.alwaysNormalize?a.normalizePath(s.path):s.path),a.buildURLFromParts(e)},parseURL:function(e){e=i.exec(e);return e?{scheme:e[1]||"",netLoc:e[2]||"",path:e[3]||"",params:e[4]||"",query:e[5]||"",fragment:e[6]||""}:null},normalizePath:function(e){for(e=e.split("").reverse().join("").replace(s,"");e.length!==(e=e.replace(r,"")).length;);return e.split("").reverse().join("")},buildURLFromParts:function(e){return e.scheme+e.netLoc+e.path+e.params+e.query+e.fragment}},e.exports=a}),Yr="http://example.com",ur=function(){function e(){this.listeners={}}var t=e.prototype;return t.on=function(e,t){this.listeners[e]||(this.listeners[e]=[]),this.listeners[e].push(t)},t.off=function(e,t){return!!this.listeners[e]&&(t=this.listeners[e].indexOf(t),this.listeners[e]=this.listeners[e].slice(0),this.listeners[e].splice(t,1),-1<t)},t.trigger=function(e){var t=this.listeners[e];if(t)if(2===arguments.length)for(var i=t.length,s=0;s<i;++s)t[s].call(this,arguments[1]);else for(var r=Array.prototype.slice.call(arguments,1),n=t.length,a=0;a<n;++a)t[a].apply(this,r)},t.dispose=function(){this.listeners={}},t.pipe=function(t){this.on("data",function(e){t.push(e)})},e}();function Qr(e){e=e;for(var t=window.atob?window.atob(e):Buffer.from(e,"base64").toString("binary"),i=new Uint8Array(t.length),s=0;s<t.length;s++)i[s]=t.charCodeAt(s);return i}
+/*! @name m3u8-parser @version 7.1.0 @license Apache-2.0 */class Jr extends ur{constructor(){super(),this.buffer=""}push(e){let t;for(this.buffer+=e,t=this.buffer.indexOf("\n");-1<t;t=this.buffer.indexOf("\n"))this.trigger("data",this.buffer.substring(0,t)),this.buffer=this.buffer.substring(t+1)}}function Zr(e){var e=/([0-9.]*)?@?([0-9.]*)?/.exec(e||""),t={};return e[1]&&(t.length=parseInt(e[1],10)),e[2]&&(t.offset=parseInt(e[2],10)),t}function en(t){var i={};if(t){var s,r=t.split(new RegExp('(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))'));let e=r.length;for(;e--;)""!==r[e]&&((s=/([^=]*)=(.*)/.exec(r[e]).slice(1))[0]=s[0].replace(/^\s+|\s+$/g,""),s[1]=s[1].replace(/^\s+|\s+$/g,""),s[1]=s[1].replace(/^['"](.*)['"]$/g,"$1"),i[s[0]]=s[1])}return i}const tn=String.fromCharCode(9);class sn extends ur{constructor(){super(),this.customParsers=[],this.tagMappers=[]}push(i){let o,l;0!==(i=i.trim()).length&&("#"!==i[0]?this.trigger("data",{type:"uri",uri:i}):this.tagMappers.reduce((e,t)=>{t=t(i);return t===i?e:e.concat([t])},[i]).forEach(t=>{for(let e=0;e<this.customParsers.length;e++)if(this.customParsers[e].call(this,t))return;var e,i;if(0!==t.indexOf("#EXT"))this.trigger("data",{type:"comment",text:t.slice(1)});else if(t=t.replace("\r",""),o=/^#EXTM3U/.exec(t))this.trigger("data",{type:"tag",tagType:"m3u"});else if(o=/^#EXTINF:([0-9\.]*)?,?(.*)?$/.exec(t))l={type:"tag",tagType:"inf"},o[1]&&(l.duration=parseFloat(o[1])),o[2]&&(l.title=o[2]),this.trigger("data",l);else if(o=/^#EXT-X-TARGETDURATION:([0-9.]*)?/.exec(t))l={type:"tag",tagType:"targetduration"},o[1]&&(l.duration=parseInt(o[1],10)),this.trigger("data",l);else if(o=/^#EXT-X-VERSION:([0-9.]*)?/.exec(t))l={type:"tag",tagType:"version"},o[1]&&(l.version=parseInt(o[1],10)),this.trigger("data",l);else if(o=/^#EXT-X-MEDIA-SEQUENCE:(\-?[0-9.]*)?/.exec(t))l={type:"tag",tagType:"media-sequence"},o[1]&&(l.number=parseInt(o[1],10)),this.trigger("data",l);else if(o=/^#EXT-X-DISCONTINUITY-SEQUENCE:(\-?[0-9.]*)?/.exec(t))l={type:"tag",tagType:"discontinuity-sequence"},o[1]&&(l.number=parseInt(o[1],10)),this.trigger("data",l);else if(o=/^#EXT-X-PLAYLIST-TYPE:(.*)?$/.exec(t))l={type:"tag",tagType:"playlist-type"},o[1]&&(l.playlistType=o[1]),this.trigger("data",l);else if(o=/^#EXT-X-BYTERANGE:(.*)?$/.exec(t))l=bi(Zr(o[1]),{type:"tag",tagType:"byterange"}),this.trigger("data",l);else if(o=/^#EXT-X-ALLOW-CACHE:(YES|NO)?/.exec(t))l={type:"tag",tagType:"allow-cache"},o[1]&&(l.allowed=!/NO/.test(o[1])),this.trigger("data",l);else if(o=/^#EXT-X-MAP:(.*)$/.exec(t))l={type:"tag",tagType:"map"},o[1]&&((i=en(o[1])).URI&&(l.uri=i.URI),i.BYTERANGE)&&(l.byterange=Zr(i.BYTERANGE)),this.trigger("data",l);else if(o=/^#EXT-X-STREAM-INF:(.*)$/.exec(t))l={type:"tag",tagType:"stream-inf"},o[1]&&(l.attributes=en(o[1]),l.attributes.RESOLUTION&&(i={},(e=l.attributes.RESOLUTION.split("x"))[0]&&(i.width=parseInt(e[0],10)),e[1]&&(i.height=parseInt(e[1],10)),l.attributes.RESOLUTION=i),l.attributes.BANDWIDTH&&(l.attributes.BANDWIDTH=parseInt(l.attributes.BANDWIDTH,10)),l.attributes["FRAME-RATE"]&&(l.attributes["FRAME-RATE"]=parseFloat(l.attributes["FRAME-RATE"])),l.attributes["PROGRAM-ID"])&&(l.attributes["PROGRAM-ID"]=parseInt(l.attributes["PROGRAM-ID"],10)),this.trigger("data",l);else if(o=/^#EXT-X-MEDIA:(.*)$/.exec(t))l={type:"tag",tagType:"media"},o[1]&&(l.attributes=en(o[1])),this.trigger("data",l);else if(o=/^#EXT-X-ENDLIST/.exec(t))this.trigger("data",{type:"tag",tagType:"endlist"});else if(o=/^#EXT-X-DISCONTINUITY/.exec(t))this.trigger("data",{type:"tag",tagType:"discontinuity"});else if(o=/^#EXT-X-PROGRAM-DATE-TIME:(.*)$/.exec(t))l={type:"tag",tagType:"program-date-time"},o[1]&&(l.dateTimeString=o[1],l.dateTimeObject=new Date(o[1])),this.trigger("data",l);else if(o=/^#EXT-X-KEY:(.*)$/.exec(t))l={type:"tag",tagType:"key"},o[1]&&(l.attributes=en(o[1]),l.attributes.IV)&&("0x"===l.attributes.IV.substring(0,2).toLowerCase()&&(l.attributes.IV=l.attributes.IV.substring(2)),l.attributes.IV=l.attributes.IV.match(/.{8}/g),l.attributes.IV[0]=parseInt(l.attributes.IV[0],16),l.attributes.IV[1]=parseInt(l.attributes.IV[1],16),l.attributes.IV[2]=parseInt(l.attributes.IV[2],16),l.attributes.IV[3]=parseInt(l.attributes.IV[3],16),l.attributes.IV=new Uint32Array(l.attributes.IV)),this.trigger("data",l);else if(o=/^#EXT-X-START:(.*)$/.exec(t))l={type:"tag",tagType:"start"},o[1]&&(l.attributes=en(o[1]),l.attributes["TIME-OFFSET"]=parseFloat(l.attributes["TIME-OFFSET"]),l.attributes.PRECISE=/YES/.test(l.attributes.PRECISE)),this.trigger("data",l);else if(o=/^#EXT-X-CUE-OUT-CONT:(.*)?$/.exec(t))l={type:"tag",tagType:"cue-out-cont"},o[1]?l.data=o[1]:l.data="",this.trigger("data",l);else if(o=/^#EXT-X-CUE-OUT:(.*)?$/.exec(t))l={type:"tag",tagType:"cue-out"},o[1]?l.data=o[1]:l.data="",this.trigger("data",l);else if(o=/^#EXT-X-CUE-IN:(.*)?$/.exec(t))l={type:"tag",tagType:"cue-in"},o[1]?l.data=o[1]:l.data="",this.trigger("data",l);else if((o=/^#EXT-X-SKIP:(.*)$/.exec(t))&&o[1])(l={type:"tag",tagType:"skip"}).attributes=en(o[1]),l.attributes.hasOwnProperty("SKIPPED-SEGMENTS")&&(l.attributes["SKIPPED-SEGMENTS"]=parseInt(l.attributes["SKIPPED-SEGMENTS"],10)),l.attributes.hasOwnProperty("RECENTLY-REMOVED-DATERANGES")&&(l.attributes["RECENTLY-REMOVED-DATERANGES"]=l.attributes["RECENTLY-REMOVED-DATERANGES"].split(tn)),this.trigger("data",l);else if((o=/^#EXT-X-PART:(.*)$/.exec(t))&&o[1])(l={type:"tag",tagType:"part"}).attributes=en(o[1]),["DURATION"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=parseFloat(l.attributes[e]))}),["INDEPENDENT","GAP"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=/YES/.test(l.attributes[e]))}),l.attributes.hasOwnProperty("BYTERANGE")&&(l.attributes.byterange=Zr(l.attributes.BYTERANGE)),this.trigger("data",l);else if((o=/^#EXT-X-SERVER-CONTROL:(.*)$/.exec(t))&&o[1])(l={type:"tag",tagType:"server-control"}).attributes=en(o[1]),["CAN-SKIP-UNTIL","PART-HOLD-BACK","HOLD-BACK"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=parseFloat(l.attributes[e]))}),["CAN-SKIP-DATERANGES","CAN-BLOCK-RELOAD"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=/YES/.test(l.attributes[e]))}),this.trigger("data",l);else if((o=/^#EXT-X-PART-INF:(.*)$/.exec(t))&&o[1])(l={type:"tag",tagType:"part-inf"}).attributes=en(o[1]),["PART-TARGET"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=parseFloat(l.attributes[e]))}),this.trigger("data",l);else if((o=/^#EXT-X-PRELOAD-HINT:(.*)$/.exec(t))&&o[1])(l={type:"tag",tagType:"preload-hint"}).attributes=en(o[1]),["BYTERANGE-START","BYTERANGE-LENGTH"].forEach(function(e){var t;l.attributes.hasOwnProperty(e)&&(l.attributes[e]=parseInt(l.attributes[e],10),t="BYTERANGE-LENGTH"===e?"length":"offset",l.attributes.byterange=l.attributes.byterange||{},l.attributes.byterange[t]=l.attributes[e],delete l.attributes[e])}),this.trigger("data",l);else if((o=/^#EXT-X-RENDITION-REPORT:(.*)$/.exec(t))&&o[1])(l={type:"tag",tagType:"rendition-report"}).attributes=en(o[1]),["LAST-MSN","LAST-PART"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=parseInt(l.attributes[e],10))}),this.trigger("data",l);else if((o=/^#EXT-X-DATERANGE:(.*)$/.exec(t))&&o[1]){(l={type:"tag",tagType:"daterange"}).attributes=en(o[1]),["ID","CLASS"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=String(l.attributes[e]))}),["START-DATE","END-DATE"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=new Date(l.attributes[e]))}),["DURATION","PLANNED-DURATION"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=parseFloat(l.attributes[e]))}),["END-ON-NEXT"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=/YES/i.test(l.attributes[e]))}),["SCTE35-CMD"," SCTE35-OUT","SCTE35-IN"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=l.attributes[e].toString(16))});var s,r,n=/^X-([A-Z]+-)+[A-Z]+$/;for(const a in l.attributes)n.test(a)&&(s=/[0-9A-Fa-f]{6}/g.test(l.attributes[a]),r=/^\d+(\.\d+)?$/.test(l.attributes[a]),l.attributes[a]=s?l.attributes[a].toString(16):(r?parseFloat:String)(l.attributes[a]));this.trigger("data",l)}else(o=/^#EXT-X-INDEPENDENT-SEGMENTS/.exec(t))?this.trigger("data",{type:"tag",tagType:"independent-segments"}):(o=/^#EXT-X-CONTENT-STEERING:(.*)$/.exec(t))?((l={type:"tag",tagType:"content-steering"}).attributes=en(o[1]),this.trigger("data",l)):this.trigger("data",{type:"tag",data:t.slice(4)})}))}addParser({expression:t,customType:i,dataParser:s,segment:r}){"function"!=typeof s&&(s=e=>e),this.customParsers.push(e=>{if(t.exec(e))return this.trigger("data",{type:"custom",data:s(e),customType:i,segment:r}),!0})}addTagMapper({expression:t,map:i}){this.tagMappers.push(e=>t.test(e)?i(e):e)}}function rn(t){const i={};return Object.keys(t).forEach(function(e){i[e.toLowerCase().replace(/-(\w)/g,e=>e[1].toUpperCase())]=t[e]}),i}function nn(e){var t,i,s,r,n,{serverControl:e,targetDuration:a,partTargetDuration:o}=e;e&&(t="#EXT-X-SERVER-CONTROL",i="holdBack",s="partHoldBack",r=a&&3*a,n=o&&2*o,a&&!e.hasOwnProperty(i)&&(e[i]=r,this.trigger("info",{message:t+` defaulting HOLD-BACK to targetDuration * 3 (${r}).`})),r&&e[i]<r&&(this.trigger("warn",{message:t+` clamping HOLD-BACK (${e[i]}) to targetDuration * 3 (${r})`}),e[i]=r),o&&!e.hasOwnProperty(s)&&(e[s]=3*o,this.trigger("info",{message:t+` defaulting PART-HOLD-BACK to partTargetDuration * 3 (${e[s]}).`})),o)&&e[s]<n&&(this.trigger("warn",{message:t+` clamping PART-HOLD-BACK (${e[s]}) to partTargetDuration * 2 (${n}).`}),e[s]=n)}class an extends ur{constructor(){super(),this.lineStream=new Jr,this.parseStream=new sn,this.lineStream.pipe(this.parseStream),this.lastProgramDateTime=null;const e=this,s=[];let a={},r,o,l=!1;const d={AUDIO:{},VIDEO:{},"CLOSED-CAPTIONS":{},SUBTITLES:{}};let h=0,u=(this.manifest={allowCache:!0,discontinuityStarts:[],dateRanges:[],segments:[]},0),c=0;const p={};this.on("end",()=>{a.uri||!a.parts&&!a.preloadHints||(!a.map&&r&&(a.map=r),!a.key&&o&&(a.key=o),a.timeline||"number"!=typeof h||(a.timeline=h),this.manifest.preloadSegment=a)}),this.parseStream.on("data",function(n){let t,i;({tag(){({version(){n.version&&(this.manifest.version=n.version)},"allow-cache"(){this.manifest.allowCache=n.allowed,"allowed"in n||(this.trigger("info",{message:"defaulting allowCache to YES"}),this.manifest.allowCache=!0)},byterange(){var e={};"length"in n&&((a.byterange=e).length=n.length,"offset"in n||(n.offset=u)),"offset"in n&&((a.byterange=e).offset=n.offset),u=e.offset+e.length},endlist(){this.manifest.endList=!0},inf(){"mediaSequence"in this.manifest||(this.manifest.mediaSequence=0,this.trigger("info",{message:"defaulting media sequence to zero"})),"discontinuitySequence"in this.manifest||(this.manifest.discontinuitySequence=0,this.trigger("info",{message:"defaulting discontinuity sequence to zero"})),n.title&&(a.title=n.title),0<n.duration&&(a.duration=n.duration),0===n.duration&&(a.duration=.01,this.trigger("info",{message:"updating zero segment duration to a small value"})),this.manifest.segments=s},key(){if(n.attributes)if("NONE"===n.attributes.METHOD)o=null;else if(n.attributes.URI)if("com.apple.streamingkeydelivery"===n.attributes.KEYFORMAT)this.manifest.contentProtection=this.manifest.contentProtection||{},this.manifest.contentProtection["com.apple.fps.1_0"]={attributes:n.attributes};else if("com.microsoft.playready"===n.attributes.KEYFORMAT)this.manifest.contentProtection=this.manifest.contentProtection||{},this.manifest.contentProtection["com.microsoft.playready"]={uri:n.attributes.URI};else{if("urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed"===n.attributes.KEYFORMAT)return-1===["SAMPLE-AES","SAMPLE-AES-CTR","SAMPLE-AES-CENC"].indexOf(n.attributes.METHOD)?void this.trigger("warn",{message:"invalid key method provided for Widevine"}):("SAMPLE-AES-CENC"===n.attributes.METHOD&&this.trigger("warn",{message:"SAMPLE-AES-CENC is deprecated, please use SAMPLE-AES-CTR instead"}),"data:text/plain;base64,"!==n.attributes.URI.substring(0,23)?void this.trigger("warn",{message:"invalid key URI provided for Widevine"}):n.attributes.KEYID&&"0x"===n.attributes.KEYID.substring(0,2)?(this.manifest.contentProtection=this.manifest.contentProtection||{},void(this.manifest.contentProtection["com.widevine.alpha"]={attributes:{schemeIdUri:n.attributes.KEYFORMAT,keyId:n.attributes.KEYID.substring(2)},pssh:Qr(n.attributes.URI.split(",")[1])})):void this.trigger("warn",{message:"invalid key ID provided for Widevine"}));n.attributes.METHOD||this.trigger("warn",{message:"defaulting key method to AES-128"}),o={method:n.attributes.METHOD||"AES-128",uri:n.attributes.URI},"undefined"!=typeof n.attributes.IV&&(o.iv=n.attributes.IV)}else this.trigger("warn",{message:"ignoring key declaration without URI"});else this.trigger("warn",{message:"ignoring key declaration without attribute list"})},"media-sequence"(){isFinite(n.number)?this.manifest.mediaSequence=n.number:this.trigger("warn",{message:"ignoring invalid media sequence: "+n.number})},"discontinuity-sequence"(){isFinite(n.number)?(this.manifest.discontinuitySequence=n.number,h=n.number):this.trigger("warn",{message:"ignoring invalid discontinuity sequence: "+n.number})},"playlist-type"(){/VOD|EVENT/.test(n.playlistType)?this.manifest.playlistType=n.playlistType:this.trigger("warn",{message:"ignoring unknown playlist type: "+n.playlist})},map(){r={},n.uri&&(r.uri=n.uri),n.byterange&&(r.byterange=n.byterange),o&&(r.key=o)},"stream-inf"(){this.manifest.playlists=s,this.manifest.mediaGroups=this.manifest.mediaGroups||d,n.attributes?(a.attributes||(a.attributes={}),bi(a.attributes,n.attributes)):this.trigger("warn",{message:"ignoring empty stream-inf attributes"})},media(){var e;this.manifest.mediaGroups=this.manifest.mediaGroups||d,n.attributes&&n.attributes.TYPE&&n.attributes["GROUP-ID"]&&n.attributes.NAME?((e=this.manifest.mediaGroups[n.attributes.TYPE])[n.attributes["GROUP-ID"]]=e[n.attributes["GROUP-ID"]]||{},t=e[n.attributes["GROUP-ID"]],(i={default:/yes/i.test(n.attributes.DEFAULT)}).default?i.autoselect=!0:i.autoselect=/yes/i.test(n.attributes.AUTOSELECT),n.attributes.LANGUAGE&&(i.language=n.attributes.LANGUAGE),n.attributes.URI&&(i.uri=n.attributes.URI),n.attributes["INSTREAM-ID"]&&(i.instreamId=n.attributes["INSTREAM-ID"]),n.attributes.CHARACTERISTICS&&(i.characteristics=n.attributes.CHARACTERISTICS),n.attributes.FORCED&&(i.forced=/yes/i.test(n.attributes.FORCED)),t[n.attributes.NAME]=i):this.trigger("warn",{message:"ignoring incomplete or missing media group"})},discontinuity(){h+=1,a.discontinuity=!0,this.manifest.discontinuityStarts.push(s.length)},"program-date-time"(){"undefined"==typeof this.manifest.dateTimeString&&(this.manifest.dateTimeString=n.dateTimeString,this.manifest.dateTimeObject=n.dateTimeObject),a.dateTimeString=n.dateTimeString,a.dateTimeObject=n.dateTimeObject;var e=this["lastProgramDateTime"];this.lastProgramDateTime=new Date(n.dateTimeString).getTime(),null===e&&this.manifest.segments.reduceRight((e,t)=>(t.programDateTime=e-1e3*t.duration,t.programDateTime),this.lastProgramDateTime)},targetduration(){!isFinite(n.duration)||n.duration<0?this.trigger("warn",{message:"ignoring invalid target duration: "+n.duration}):(this.manifest.targetDuration=n.duration,nn.call(this,this.manifest))},start(){!n.attributes||isNaN(n.attributes["TIME-OFFSET"])?this.trigger("warn",{message:"ignoring start declaration without appropriate attribute list"}):this.manifest.start={timeOffset:n.attributes["TIME-OFFSET"],precise:n.attributes.PRECISE}},"cue-out"(){a.cueOut=n.data},"cue-out-cont"(){a.cueOutCont=n.data},"cue-in"(){a.cueIn=n.data},skip(){this.manifest.skip=rn(n.attributes),this.warnOnMissingAttributes_("#EXT-X-SKIP",n.attributes,["SKIPPED-SEGMENTS"])},part(){l=!0;var e=this.manifest.segments.length,t=rn(n.attributes),t=(a.parts=a.parts||[],a.parts.push(t),t.byterange&&(t.byterange.hasOwnProperty("offset")||(t.byterange.offset=c),c=t.byterange.offset+t.byterange.length),a.parts.length-1);this.warnOnMissingAttributes_(`#EXT-X-PART #${t} for segment #`+e,n.attributes,["URI","DURATION"]),this.manifest.renditionReports&&this.manifest.renditionReports.forEach((e,t)=>{e.hasOwnProperty("lastPart")||this.trigger("warn",{message:`#EXT-X-RENDITION-REPORT #${t} lacks required attribute(s): LAST-PART`})})},"server-control"(){var e=this.manifest.serverControl=rn(n.attributes);e.hasOwnProperty("canBlockReload")||(e.canBlockReload=!1,this.trigger("info",{message:"#EXT-X-SERVER-CONTROL defaulting CAN-BLOCK-RELOAD to false"})),nn.call(this,this.manifest),e.canSkipDateranges&&!e.hasOwnProperty("canSkipUntil")&&this.trigger("warn",{message:"#EXT-X-SERVER-CONTROL lacks required attribute CAN-SKIP-UNTIL which is required when CAN-SKIP-DATERANGES is set"})},"preload-hint"(){var t=this.manifest.segments.length,i=rn(n.attributes),e=i.type&&"PART"===i.type,s=(a.preloadHints=a.preloadHints||[],a.preloadHints.push(i),!i.byterange||i.byterange.hasOwnProperty("offset")||(i.byterange.offset=e?c:0,e&&(c=i.byterange.offset+i.byterange.length)),a.preloadHints.length-1);if(this.warnOnMissingAttributes_(`#EXT-X-PRELOAD-HINT #${s} for segment #`+t,n.attributes,["TYPE","URI"]),i.type)for(let e=0;e<a.preloadHints.length-1;e++){var r=a.preloadHints[e];r.type&&r.type===i.type&&this.trigger("warn",{message:`#EXT-X-PRELOAD-HINT #${s} for segment #${t} has the same TYPE ${i.type} as preload hint #`+e})}},"rendition-report"(){var e=rn(n.attributes),e=(this.manifest.renditionReports=this.manifest.renditionReports||[],this.manifest.renditionReports.push(e),this.manifest.renditionReports.length-1),t=["LAST-MSN","URI"];l&&t.push("LAST-PART"),this.warnOnMissingAttributes_("#EXT-X-RENDITION-REPORT #"+e,n.attributes,t)},"part-inf"(){this.manifest.partInf=rn(n.attributes),this.warnOnMissingAttributes_("#EXT-X-PART-INF",n.attributes,["PART-TARGET"]),this.manifest.partInf.partTarget&&(this.manifest.partTargetDuration=this.manifest.partInf.partTarget),nn.call(this,this.manifest)},daterange(){this.manifest.dateRanges.push(rn(n.attributes));var e=this.manifest.dateRanges.length-1;this.warnOnMissingAttributes_("#EXT-X-DATERANGE #"+e,n.attributes,["ID","START-DATE"]);const t=this.manifest.dateRanges[e];t.endDate&&t.startDate&&new Date(t.endDate)<new Date(t.startDate)&&this.trigger("warn",{message:"EXT-X-DATERANGE END-DATE must be equal to or later than the value of the START-DATE"}),t.duration&&t.duration<0&&this.trigger("warn",{message:"EXT-X-DATERANGE DURATION must not be negative"}),t.plannedDuration&&t.plannedDuration<0&&this.trigger("warn",{message:"EXT-X-DATERANGE PLANNED-DURATION must not be negative"});var i=!!t.endOnNext;if(i&&!t.class&&this.trigger("warn",{message:"EXT-X-DATERANGE with an END-ON-NEXT=YES attribute must have a CLASS attribute"}),i&&(t.duration||t.endDate)&&this.trigger("warn",{message:"EXT-X-DATERANGE with an END-ON-NEXT=YES attribute must not contain DURATION or END-DATE attributes"}),t.duration&&t.endDate&&(i=t.startDate.getTime()+1e3*t.duration,this.manifest.dateRanges[e].endDate=new Date(i)),p[t.id]){for(const s in p[t.id])if(t[s]&&JSON.stringify(p[t.id][s])!==JSON.stringify(t[s])){this.trigger("warn",{message:"EXT-X-DATERANGE tags with the same ID in a playlist must have the same attributes values"});break}e=this.manifest.dateRanges.findIndex(e=>e.id===t.id);this.manifest.dateRanges[e]=bi(this.manifest.dateRanges[e],t),p[t.id]=bi(p[t.id],t),this.manifest.dateRanges.pop()}else p[t.id]=t},"independent-segments"(){this.manifest.independentSegments=!0},"content-steering"(){this.manifest.contentSteering=rn(n.attributes),this.warnOnMissingAttributes_("#EXT-X-CONTENT-STEERING",n.attributes,["SERVER-URI"])}}[n.tagType]||function(){}).call(e)},uri(){a.uri=n.uri,s.push(a),!this.manifest.targetDuration||"duration"in a||(this.trigger("warn",{message:"defaulting segment duration to the target duration"}),a.duration=this.manifest.targetDuration),o&&(a.key=o),a.timeline=h,r&&(a.map=r),c=0,null!==this.lastProgramDateTime&&(a.programDateTime=this.lastProgramDateTime,this.lastProgramDateTime+=1e3*a.duration),a={}},comment(){},custom(){n.segment?(a.custom=a.custom||{},a.custom[n.customType]=n.data):(this.manifest.custom=this.manifest.custom||{},this.manifest.custom[n.customType]=n.data)}})[n.type].call(e)})}warnOnMissingAttributes_(e,t,i){const s=[];i.forEach(function(e){t.hasOwnProperty(e)||s.push(e)}),s.length&&this.trigger("warn",{message:e+" lacks required attribute(s): "+s.join(", ")})}push(e){this.lineStream.push(e)}end(){this.lineStream.push("\n"),this.manifest.dateRanges.length&&null===this.lastProgramDateTime&&this.trigger("warn",{message:"A playlist with EXT-X-DATERANGE tag must contain atleast one EXT-X-PROGRAM-DATE-TIME tag"}),this.lastProgramDateTime=null,this.trigger("end")}addParser(e){this.parseStream.addParser(e)}addTagMapper(e){this.parseStream.addTagMapper(e)}}function on(e){return pn.audio.test((e=void 0===e?"":e).trim().toLowerCase())}function ln(e){return void 0===e&&(e=""),window.MediaSource&&window.MediaSource.isTypeSupported&&window.MediaSource.isTypeSupported(_n(e))||!1}function dn(e){return(e=void 0===e?"":e).toLowerCase().split(",").every(function(e){e=e.trim();for(var t=0;t<gn.length;t++){var i=gn[t];if(pn["muxer"+i].test(e))return!0}return!1})}function hn(e){return bn.test(e)?"hls":Tn.test(e)?"dash":"application/vnd.videojs.vhs+json"===e?"vhs-json":null}function un(e,t){for(var i=void 0!==(t=(void 0===t?{}:t).le)&&t,s=(e=S(e="bigint"!=typeof e&&"number"!=typeof e||"number"==typeof e&&e!=e?0:e),t=e,Math.ceil(t.toString(2).length/8)),r=new Uint8Array(new ArrayBuffer(s)),n=0;n<s;n++){var a=i?n:Math.abs(n+1-r.length);r[a]=Number(e/wn[n]&S(255)),e<0&&(r[a]=Math.abs(~r[a]),r[a]-=0===n?1:2)}return r}function cn(e,t){if("string"!=typeof(e="string"!=typeof e&&e&&"function"==typeof e.toString?e.toString():e))return new Uint8Array;t||(e=unescape(encodeURIComponent(e)));for(var i=new Uint8Array(e.length),s=0;s<e.length;s++)i[s]=e.charCodeAt(s);return i}var pn={mp4:/^(av0?1|avc0?[1234]|vp0?9|flac|opus|mp3|mp4a|mp4v|stpp.ttml.im1t)/,webm:/^(vp0?[89]|av0?1|opus|vorbis)/,ogg:/^(vp0?[89]|theora|flac|opus|vorbis)/,video:/^(av0?1|avc0?[1234]|vp0?[89]|hvc1|hev1|theora|mp4v)/,audio:/^(mp4a|flac|vorbis|opus|ac-[34]|ec-3|alac|mp3|speex|aac)/,text:/^(stpp.ttml.im1t)/,muxerVideo:/^(avc0?1)/,muxerAudio:/^(mp4a)/,muxerText:/a^/},mn=["video","audio","text"],gn=["Video","Audio","Text"],fn=function(e){return e&&e.replace(/avc1\.(\d+)\.(\d+)/i,function(e,t,i){return"avc1."+("00"+Number(t).toString(16)).slice(-2)+"00"+("00"+Number(i).toString(16)).slice(-2)})},yn=function(e){var e=(e=void 0===e?"":e).split(","),n=[];return e.forEach(function(s){var r;s=s.trim(),mn.forEach(function(e){var t,i=pn[e].exec(s.toLowerCase());!i||i.length<=1||(r=e,i=s.substring(0,i[1].length),t=s.replace(i,""),n.push({type:i,details:t,mediaType:e}))}),r||n.push({type:s,details:"",mediaType:"unknown"})}),n},_n=function(e){var t,i,s;if(e&&"string"==typeof e)return i="video",1===(t=e.toLowerCase().split(",").map(function(e){return fn(e.trim())})).length&&on(t[0])?i="audio":1===t.length&&(s=t[0],pn.text.test((s=void 0===s?"":s).trim().toLowerCase()))&&(i="application"),s="mp4",t.every(function(e){return pn.mp4.test(e)})?s="mp4":t.every(function(e){return pn.webm.test(e)})?s="webm":t.every(function(e){return pn.ogg.test(e)})&&(s="ogg"),i+"/"+s+';codecs="'+e+'"'},vn="mp4a.40.2",bn=/^(audio|video|application)\/(x-|vnd\.apple\.)?mpegurl/i,Tn=/^application\/dash\+xml/i,Sn=function(e){return"function"===ArrayBuffer.isView?ArrayBuffer.isView(e):e&&e.buffer instanceof ArrayBuffer},T=function(e){return e instanceof Uint8Array?e:(Array.isArray(e)||Sn(e)||e instanceof ArrayBuffer||(e="number"!=typeof e||"number"==typeof e&&e!=e?0:[e]),new Uint8Array(e&&e.buffer||e,e&&e.byteOffset||0,e&&e.byteLength||0))},S=window.BigInt||Number,wn=[S("0x1"),S("0x100"),S("0x10000"),S("0x1000000"),S("0x100000000"),S("0x10000000000"),S("0x1000000000000"),S("0x100000000000000"),S("0x10000000000000000")],En=(dr=new Uint16Array([65484]),255!==(dr=new Uint8Array(dr.buffer,dr.byteOffset,dr.byteLength))[0]&&dr[0],function(s,e){var e=void 0===e?{}:e,t=e.signed,t=void 0!==t&&t,e=e.le,r=void 0!==e&&e,e=(s=T(s),r?"reduce":"reduceRight"),e=(s[e]||Array.prototype[e]).call(s,function(e,t,i){i=r?i:Math.abs(i+1-s.length);return e+S(t)*wn[i]},S(0));return t&&(t=wn[s.length]/S(2)-S(1))<(e=S(e))&&(e=(e=e-t-t)-S(2)),Number(e)}),w=function(i,e,t){var t=void 0===t?{}:t,s=t.offset,r=void 0===s?0:s,s=t.mask,n=void 0===s?[]:s,t=(i=T(i),(e=T(e)).every||Array.prototype.every);return e.length&&i.length-r>=e.length&&t.call(e,function(e,t){return e===(n[t]?n[t]&i[r+t]:i[r+t])})};function Cn(e){e=e;for(var t=window.atob?window.atob(e):Buffer.from(e,"base64").toString("binary"),i=new Uint8Array(t.length),s=0;s<t.length;s++)i[s]=t.charCodeAt(s);return i}function kn(e,t){return(t=void 0===t?Object:t)&&"function"==typeof t.freeze?t.freeze(e):e}var In=kn({HTML:"text/html",isHTML:function(e){return e===In.HTML},XML_APPLICATION:"application/xml",XML_TEXT:"text/xml",XML_XHTML_APPLICATION:"application/xhtml+xml",XML_SVG_IMAGE:"image/svg+xml"}),xn=kn({HTML:"http://www.w3.org/1999/xhtml",isHTML:function(e){return e===xn.HTML},SVG:"http://www.w3.org/2000/svg",XML:"http://www.w3.org/XML/1998/namespace",XMLNS:"http://www.w3.org/2000/xmlns/"}),An={assign:function(e,t){if(null===e||"object"!=typeof e)throw new TypeError("target is not an object");for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},find:function(e,t,i){if(void 0===i&&(i=Array.prototype),e&&"function"==typeof i.find)return i.find.call(e,t);for(var s=0;s<e.length;s++)if(Object.prototype.hasOwnProperty.call(e,s)){var r=e[s];if(t.call(void 0,r,s,e))return r}},freeze:kn,MIME_TYPE:In,NAMESPACE:xn},Dn=An.find,Pn=An.NAMESPACE;function Ln(e){return""!==e}function On(e,t){return e.hasOwnProperty(t)||(e[t]=!0),e}function Rn(e){return e?(e=(e=e)?e.split(/[\t\n\f\r ]+/).filter(Ln):[],Object.keys(e.reduce(On,{}))):[]}function Nn(e,t){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}function E(e,t){var i=e.prototype;function s(){}i instanceof t||(s.prototype=t.prototype,Nn(i,s=new s),e.prototype=i=s),i.constructor!=e&&(i.constructor=e)}var n={},t=(n.ELEMENT_NODE=1,n.ATTRIBUTE_NODE=2,n.TEXT_NODE=3,n.CDATA_SECTION_NODE=4,n.ENTITY_REFERENCE_NODE=5,n.ENTITY_NODE=6,n.PROCESSING_INSTRUCTION_NODE=7,n.COMMENT_NODE=8,n.DOCUMENT_NODE=9,n.DOCUMENT_TYPE_NODE=10,n.DOCUMENT_FRAGMENT_NODE=11,n.NOTATION_NODE=12,{}),C={},Mn=(t.INDEX_SIZE_ERR=(C[1]="Index size error",1),t.DOMSTRING_SIZE_ERR=(C[2]="DOMString size error",2),t.HIERARCHY_REQUEST_ERR=(C[3]="Hierarchy request error",3)),Un=(t.WRONG_DOCUMENT_ERR=(C[4]="Wrong document",4),t.INVALID_CHARACTER_ERR=(C[5]="Invalid character",5),t.NO_DATA_ALLOWED_ERR=(C[6]="No data allowed",6),t.NO_MODIFICATION_ALLOWED_ERR=(C[7]="No modification allowed",7),t.NOT_FOUND_ERR=(C[8]="Not found",8));t.NOT_SUPPORTED_ERR=(C[9]="Not supported",9),t.INUSE_ATTRIBUTE_ERR=(C[10]="Attribute in use",10);function k(e,t){var i;return t instanceof Error?i=t:(i=this,Error.call(this,C[e]),this.message=C[e],Error.captureStackTrace&&Error.captureStackTrace(this,k)),i.code=e,t&&(this.message=this.message+": "+t),i}function Bn(){}function Fn(e,t){this._node=e,this._refresh=t,qn(this)}function qn(e){var t=e._node._inc||e._node.ownerDocument._inc;if(e._inc!==t){var i=e._refresh(e._node);if(Ea(e,"length",i.length),!e.$$length||i.length<e.$$length)for(var s=i.length;s in e;s++)Object.prototype.hasOwnProperty.call(e,s)&&delete e[s];Nn(i,e),e._inc=t}}function jn(){}function Hn(e,t){for(var i=e.length;i--;)if(e[i]===t)return i}function Vn(e,t,i,s){s?t[Hn(t,s)]=i:t[t.length++]=i,e&&(t=(i.ownerElement=e).ownerDocument)&&(s&&Kn(t,e,s),s=e,e=i,(i=t)&&i._inc++,e.namespaceURI===Pn.XMLNS)&&(s._nsMap[e.prefix?e.localName:""]=e.value)}function $n(e,t,i){var s=Hn(t,i);if(!(0<=s))throw new k(Un,new Error(e.tagName+"@"+i));for(var r,n=t.length-1;s<n;)t[s]=t[++s];t.length=n,e&&(r=e.ownerDocument)&&(Kn(r,e,i),i.ownerElement=null)}function zn(){}function I(){}function Wn(e){return("<"==e?"&lt;":">"==e&&"&gt;")||("&"==e?"&amp;":'"'==e&&"&quot;")||"&#"+e.charCodeAt()+";"}function Gn(e,t){if(t(e))return 1;if(e=e.firstChild)do{if(Gn(e,t))return 1}while(e=e.nextSibling)}function Xn(){this.ownerDocument=this}function Kn(e,t,i){e&&e._inc++,i.namespaceURI===Pn.XMLNS&&delete t._nsMap[i.prefix?i.localName:""]}function Yn(e,t,i){if(e&&e._inc){e._inc++;var s=t.childNodes;if(i)s[s.length++]=i;else{for(var r=t.firstChild,n=0;r;)r=(s[n++]=r).nextSibling;s.length=n,delete s[s.length]}}}function Qn(e,t){var i=t.previousSibling,s=t.nextSibling;return i?i.nextSibling=s:e.firstChild=s,s?s.previousSibling=i:e.lastChild=i,t.parentNode=null,t.previousSibling=null,t.nextSibling=null,Yn(e.ownerDocument,e),t}function Jn(e){return e&&e.nodeType===I.DOCUMENT_TYPE_NODE}function Zn(e){return e&&e.nodeType===I.ELEMENT_NODE}function ea(e){return e&&e.nodeType===I.TEXT_NODE}function ta(e,t){var i,e=e.childNodes||[];if(!Dn(e,Zn)&&!Jn(t))return i=Dn(e,Jn),!(t&&i&&e.indexOf(i)>e.indexOf(t))}function ia(e,t){var i,e=e.childNodes||[];if(!Dn(e,function(e){return Zn(e)&&e!==t}))return i=Dn(e,Jn),!(t&&i&&e.indexOf(i)>e.indexOf(t))}function sa(e,t,i){if(!(s=e)||s.nodeType!==I.DOCUMENT_NODE&&s.nodeType!==I.DOCUMENT_FRAGMENT_NODE&&s.nodeType!==I.ELEMENT_NODE)throw new k(Mn,"Unexpected parent node type "+e.nodeType);var s;if(i&&i.parentNode!==e)throw new k(Un,"child not in parent");if(!(s=t)||!(Zn(s)||ea(s)||Jn(s)||s.nodeType===I.DOCUMENT_FRAGMENT_NODE||s.nodeType===I.COMMENT_NODE||s.nodeType===I.PROCESSING_INSTRUCTION_NODE)||Jn(t)&&e.nodeType!==I.DOCUMENT_NODE)throw new k(Mn,"Unexpected node type "+t.nodeType+" for parent node type "+e.nodeType)}function ra(e,t,i){var s=e.childNodes||[],r=t.childNodes||[];if(t.nodeType===I.DOCUMENT_FRAGMENT_NODE){var n=r.filter(Zn);if(1<n.length||Dn(r,ea))throw new k(Mn,"More than one element or text in fragment");if(1===n.length&&!ta(e,i))throw new k(Mn,"Element in fragment can not be inserted before doctype")}if(Zn(t)&&!ta(e,i))throw new k(Mn,"Only one element can be added and only after doctype");if(Jn(t)){if(Dn(s,Jn))throw new k(Mn,"Only one doctype is allowed");r=Dn(s,Zn);if(i&&s.indexOf(r)<s.indexOf(i))throw new k(Mn,"Doctype can only be inserted before an element");if(!i&&r)throw new k(Mn,"Doctype can not be appended since element is present")}}function na(e,t,i){var s=e.childNodes||[],r=t.childNodes||[];if(t.nodeType===I.DOCUMENT_FRAGMENT_NODE){var n=r.filter(Zn);if(1<n.length||Dn(r,ea))throw new k(Mn,"More than one element or text in fragment");if(1===n.length&&!ia(e,i))throw new k(Mn,"Element in fragment can not be inserted before doctype")}if(Zn(t)&&!ia(e,i))throw new k(Mn,"Only one element can be added and only after doctype");if(Jn(t)){if(Dn(s,function(e){return Jn(e)&&e!==i}))throw new k(Mn,"Only one doctype is allowed");r=Dn(s,Zn);if(i&&s.indexOf(r)<s.indexOf(i))throw new k(Mn,"Doctype can only be inserted before an element")}}function aa(e,t,i,s){sa(e,t,i),e.nodeType===I.DOCUMENT_NODE&&(s||ra)(e,t,i);s=t.parentNode;if(s&&s.removeChild(t),11===t.nodeType){var r=t.firstChild;if(null==r)return t;var n=t.lastChild}else r=n=t;s=i?i.previousSibling:e.lastChild;for(r.previousSibling=s,n.nextSibling=i,s?s.nextSibling=r:e.firstChild=r,null==i?e.lastChild=n:i.previousSibling=n;r.parentNode=e,r!==n&&(r=r.nextSibling););return Yn(e.ownerDocument||e,e),11==t.nodeType&&(t.firstChild=t.lastChild=null),t}function oa(){this._nsMap={}}function la(){}function da(){}function ha(){}function ua(){}function ca(){}function pa(){}function ma(){}function ga(){}function fa(){}function ya(){}function _a(){}function va(){}function ba(e,t){var i,s=[],r=9==this.nodeType&&this.documentElement||this,n=r.prefix,a=r.namespaceURI;return wa(this,s,e,t,i=a&&null==n&&null==r.lookupPrefix(a)?[{namespace:a,prefix:null}]:i),s.join("")}function Ta(e,t,i){var s=e.prefix||"",r=e.namespaceURI;if(r&&("xml"!==s||r!==Pn.XML)&&r!==Pn.XMLNS){for(var n=i.length;n--;){var a=i[n];if(a.prefix===s)return a.namespace!==r}return 1}}function Sa(e,t,i){e.push(" ",t,'="',i.replace(/[<>&"\t\n\r]/g,Wn),'"')}function wa(e,t,i,s,r){if(r=r||[],s){if(!(e=s(e)))return;if("string"==typeof e)return void t.push(e)}switch(e.nodeType){case 1:var n=e.attributes,a=n.length,o=e.firstChild,l=e.tagName,d=l;if(!(i=Pn.isHTML(e.namespaceURI)||i)&&!e.prefix&&e.namespaceURI){for(var h,u=0;u<n.length;u++)if("xmlns"===n.item(u).name){h=n.item(u).value;break}if(!h)for(var c=r.length-1;0<=c;c--)if(""===(p=r[c]).prefix&&p.namespace===e.namespaceURI){h=p.namespace;break}if(h!==e.namespaceURI)for(var p,c=r.length-1;0<=c;c--)if((p=r[c]).namespace===e.namespaceURI){p.prefix&&(d=p.prefix+":"+l);break}}t.push("<",d);for(var m=0;m<a;m++)"xmlns"==(g=n.item(m)).prefix?r.push({prefix:g.localName,namespace:g.value}):"xmlns"==g.nodeName&&r.push({prefix:"",namespace:g.value});for(var g,f,y,m=0;m<a;m++)Ta(g=n.item(m),0,r)&&(Sa(t,(f=g.prefix||"")?"xmlns:"+f:"xmlns",y=g.namespaceURI),r.push({prefix:f,namespace:y})),wa(g,t,i,s,r);if(l===d&&Ta(e,0,r)&&(Sa(t,(f=e.prefix||"")?"xmlns:"+f:"xmlns",y=e.namespaceURI),r.push({prefix:f,namespace:y})),o||i&&!/^(?:meta|link|img|br|hr|input)$/i.test(l)){if(t.push(">"),i&&/^script$/i.test(l))for(;o;)o.data?t.push(o.data):wa(o,t,i,s,r.slice()),o=o.nextSibling;else for(;o;)wa(o,t,i,s,r.slice()),o=o.nextSibling;t.push("</",d,">")}else t.push("/>");return;case 9:case 11:for(o=e.firstChild;o;)wa(o,t,i,s,r.slice()),o=o.nextSibling;return;case 2:return Sa(t,e.name,e.value);case 3:return t.push(e.data.replace(/[<&>]/g,Wn));case 4:return t.push("<![CDATA[",e.data,"]]>");case 8:return t.push("\x3c!--",e.data,"--\x3e");case 10:var _=e.publicId,v=e.systemId;return t.push("<!DOCTYPE ",e.name),void(_?(t.push(" PUBLIC ",_),v&&"."!=v&&t.push(" ",v),t.push(">")):v&&"."!=v?t.push(" SYSTEM ",v,">"):((_=e.internalSubset)&&t.push(" [",_,"]"),t.push(">")));case 7:return t.push("<?",e.target," ",e.data,"?>");case 5:return t.push("&",e.nodeName,";");default:t.push("??",e.nodeName)}}function Ea(e,t,i){e[t]=i}t.INVALID_STATE_ERR=(C[11]="Invalid state",11),t.SYNTAX_ERR=(C[12]="Syntax error",12),t.INVALID_MODIFICATION_ERR=(C[13]="Invalid modification",13),t.NAMESPACE_ERR=(C[14]="Invalid namespace",14),t.INVALID_ACCESS_ERR=(C[15]="Invalid access",15),k.prototype=Error.prototype,Nn(t,k),Bn.prototype={length:0,item:function(e){return 0<=e&&e<this.length?this[e]:null},toString:function(e,t){for(var i=[],s=0;s<this.length;s++)wa(this[s],i,e,t);return i.join("")},filter:function(e){return Array.prototype.filter.call(this,e)},indexOf:function(e){return Array.prototype.indexOf.call(this,e)}},Fn.prototype.item=function(e){return qn(this),this[e]||null},E(Fn,Bn),jn.prototype={length:0,item:Bn.prototype.item,getNamedItem:function(e){for(var t=this.length;t--;){var i=this[t];if(i.nodeName==e)return i}},setNamedItem:function(e){var t=e.ownerElement;if(t&&t!=this._ownerElement)throw new k(10);t=this.getNamedItem(e.nodeName);return Vn(this._ownerElement,this,e,t),t},setNamedItemNS:function(e){var t=e.ownerElement;if(t&&t!=this._ownerElement)throw new k(10);return t=this.getNamedItemNS(e.namespaceURI,e.localName),Vn(this._ownerElement,this,e,t),t},removeNamedItem:function(e){e=this.getNamedItem(e);return $n(this._ownerElement,this,e),e},removeNamedItemNS:function(e,t){e=this.getNamedItemNS(e,t);return $n(this._ownerElement,this,e),e},getNamedItemNS:function(e,t){for(var i=this.length;i--;){var s=this[i];if(s.localName==t&&s.namespaceURI==e)return s}return null}},zn.prototype={hasFeature:function(e,t){return!0},createDocument:function(e,t,i){var s=new Xn;return s.implementation=this,s.childNodes=new Bn,s.doctype=i||null,i&&s.appendChild(i),t&&(i=s.createElementNS(e,t),s.appendChild(i)),s},createDocumentType:function(e,t,i){var s=new pa;return s.name=e,s.nodeName=e,s.publicId=t||"",s.systemId=i||"",s}},I.prototype={firstChild:null,lastChild:null,previousSibling:null,nextSibling:null,attributes:null,parentNode:null,childNodes:null,ownerDocument:null,nodeValue:null,namespaceURI:null,prefix:null,localName:null,insertBefore:function(e,t){return aa(this,e,t)},replaceChild:function(e,t){aa(this,e,t,na),t&&this.removeChild(t)},removeChild:function(e){return Qn(this,e)},appendChild:function(e){return this.insertBefore(e,null)},hasChildNodes:function(){return null!=this.firstChild},cloneNode:function(e){return function e(t,i,s){var r=new i.constructor;for(var n in i){var a;Object.prototype.hasOwnProperty.call(i,n)&&"object"!=typeof(a=i[n])&&a!=r[n]&&(r[n]=a)}i.childNodes&&(r.childNodes=new Bn);r.ownerDocument=t;switch(r.nodeType){case 1:var o=i.attributes,l=r.attributes=new jn,d=o.length;l._ownerElement=r;for(var h=0;h<d;h++)r.setAttributeNode(e(t,o.item(h),!0));break;case 2:s=!0}if(s)for(var u=i.firstChild;u;)r.appendChild(e(t,u,s)),u=u.nextSibling;return r}(this.ownerDocument||this,this,e)},normalize:function(){for(var e=this.firstChild;e;){var t=e.nextSibling;t&&3==t.nodeType&&3==e.nodeType?(this.removeChild(t),e.appendData(t.data)):(e.normalize(),e=t)}},isSupported:function(e,t){return this.ownerDocument.implementation.hasFeature(e,t)},hasAttributes:function(){return 0<this.attributes.length},lookupPrefix:function(e){for(var t=this;t;){var i=t._nsMap;if(i)for(var s in i)if(Object.prototype.hasOwnProperty.call(i,s)&&i[s]===e)return s;t=2==t.nodeType?t.ownerDocument:t.parentNode}return null},lookupNamespaceURI:function(e){for(var t=this;t;){var i=t._nsMap;if(i&&Object.prototype.hasOwnProperty.call(i,e))return i[e];t=2==t.nodeType?t.ownerDocument:t.parentNode}return null},isDefaultNamespace:function(e){return null==this.lookupPrefix(e)}},Nn(n,I),Nn(n,I.prototype),Xn.prototype={nodeName:"#document",nodeType:9,doctype:null,documentElement:null,_inc:1,insertBefore:function(e,t){if(11==e.nodeType)for(var i=e.firstChild;i;){var s=i.nextSibling;this.insertBefore(i,t),i=s}else aa(this,e,t),null===(e.ownerDocument=this).documentElement&&1===e.nodeType&&(this.documentElement=e);return e},removeChild:function(e){return this.documentElement==e&&(this.documentElement=null),Qn(this,e)},replaceChild:function(e,t){aa(this,e,t,na),e.ownerDocument=this,t&&this.removeChild(t),Zn(e)&&(this.documentElement=e)},importNode:function(e,t){return function e(t,i,s){var r;switch(i.nodeType){case 1:(r=i.cloneNode(!1)).ownerDocument=t;case 11:break;case 2:s=!0}r=r||i.cloneNode(!1);r.ownerDocument=t;r.parentNode=null;if(s)for(var n=i.firstChild;n;)r.appendChild(e(t,n,s)),n=n.nextSibling;return r}(this,e,t)},getElementById:function(t){var i=null;return Gn(this.documentElement,function(e){if(1==e.nodeType&&e.getAttribute("id")==t)return i=e,!0}),i},getElementsByClassName:function(a){var o=Rn(a);return new Fn(this,function(r){var n=[];return 0<o.length&&Gn(r.documentElement,function(e){var t,i,s;e!==r&&1===e.nodeType&&(t=e.getAttribute("class"))&&((i=a===t)||(t=Rn(t),i=o.every((s=t,function(e){return s&&-1!==s.indexOf(e)}))),i)&&n.push(e)}),n})},createElement:function(e){var t=new oa;return t.ownerDocument=this,t.nodeName=e,t.tagName=e,t.localName=e,t.childNodes=new Bn,(t.attributes=new jn)._ownerElement=t},createDocumentFragment:function(){var e=new ya;return e.ownerDocument=this,e.childNodes=new Bn,e},createTextNode:function(e){var t=new ha;return t.ownerDocument=this,t.appendData(e),t},createComment:function(e){var t=new ua;return t.ownerDocument=this,t.appendData(e),t},createCDATASection:function(e){var t=new ca;return t.ownerDocument=this,t.appendData(e),t},createProcessingInstruction:function(e,t){var i=new _a;return i.ownerDocument=this,i.tagName=i.nodeName=i.target=e,i.nodeValue=i.data=t,i},createAttribute:function(e){var t=new la;return t.ownerDocument=this,t.name=e,t.nodeName=e,t.localName=e,t.specified=!0,t},createEntityReference:function(e){var t=new fa;return t.ownerDocument=this,t.nodeName=e,t},createElementNS:function(e,t){var i=new oa,s=t.split(":"),r=i.attributes=new jn;return i.childNodes=new Bn,i.ownerDocument=this,i.nodeName=t,i.tagName=t,i.namespaceURI=e,2==s.length?(i.prefix=s[0],i.localName=s[1]):i.localName=t,r._ownerElement=i},createAttributeNS:function(e,t){var i=new la,s=t.split(":");return i.ownerDocument=this,i.nodeName=t,i.name=t,i.namespaceURI=e,i.specified=!0,2==s.length?(i.prefix=s[0],i.localName=s[1]):i.localName=t,i}},E(Xn,I),Xn.prototype.getElementsByTagName=(oa.prototype={nodeType:1,hasAttribute:function(e){return null!=this.getAttributeNode(e)},getAttribute:function(e){e=this.getAttributeNode(e);return e&&e.value||""},getAttributeNode:function(e){return this.attributes.getNamedItem(e)},setAttribute:function(e,t){e=this.ownerDocument.createAttribute(e);e.value=e.nodeValue=""+t,this.setAttributeNode(e)},removeAttribute:function(e){e=this.getAttributeNode(e);e&&this.removeAttributeNode(e)},appendChild:function(e){return 11===e.nodeType?this.insertBefore(e,null):(t=this,(e=e).parentNode&&e.parentNode.removeChild(e),e.parentNode=t,e.previousSibling=t.lastChild,e.nextSibling=null,e.previousSibling?e.previousSibling.nextSibling=e:t.firstChild=e,t.lastChild=e,Yn(t.ownerDocument,t,e),e);var t},setAttributeNode:function(e){return this.attributes.setNamedItem(e)},setAttributeNodeNS:function(e){return this.attributes.setNamedItemNS(e)},removeAttributeNode:function(e){return this.attributes.removeNamedItem(e.nodeName)},removeAttributeNS:function(e,t){e=this.getAttributeNodeNS(e,t);e&&this.removeAttributeNode(e)},hasAttributeNS:function(e,t){return null!=this.getAttributeNodeNS(e,t)},getAttributeNS:function(e,t){e=this.getAttributeNodeNS(e,t);return e&&e.value||""},setAttributeNS:function(e,t,i){e=this.ownerDocument.createAttributeNS(e,t);e.value=e.nodeValue=""+i,this.setAttributeNode(e)},getAttributeNodeNS:function(e,t){return this.attributes.getNamedItemNS(e,t)},getElementsByTagName:function(s){return new Fn(this,function(t){var i=[];return Gn(t,function(e){e===t||1!=e.nodeType||"*"!==s&&e.tagName!=s||i.push(e)}),i})},getElementsByTagNameNS:function(s,r){return new Fn(this,function(t){var i=[];return Gn(t,function(e){e===t||1!==e.nodeType||"*"!==s&&e.namespaceURI!==s||"*"!==r&&e.localName!=r||i.push(e)}),i})}}).getElementsByTagName,Xn.prototype.getElementsByTagNameNS=oa.prototype.getElementsByTagNameNS,E(oa,I),la.prototype.nodeType=2,E(la,I),da.prototype={data:"",substringData:function(e,t){return this.data.substring(e,e+t)},appendData:function(e){e=this.data+e,this.nodeValue=this.data=e,this.length=e.length},insertData:function(e,t){this.replaceData(e,0,t)},appendChild:function(e){throw new Error(C[Mn])},deleteData:function(e,t){this.replaceData(e,t,"")},replaceData:function(e,t,i){var s=this.data.substring(0,e),e=this.data.substring(e+t);this.nodeValue=this.data=i=s+i+e,this.length=i.length}},E(da,I),ha.prototype={nodeName:"#text",nodeType:3,splitText:function(e){var t=(i=this.data).substring(e),i=i.substring(0,e),e=(this.data=this.nodeValue=i,this.length=i.length,this.ownerDocument.createTextNode(t));return this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling),e}},E(ha,da),ua.prototype={nodeName:"#comment",nodeType:8},E(ua,da),ca.prototype={nodeName:"#cdata-section",nodeType:4},E(ca,da),pa.prototype.nodeType=10,E(pa,I),ma.prototype.nodeType=12,E(ma,I),ga.prototype.nodeType=6,E(ga,I),fa.prototype.nodeType=5,E(fa,I),ya.prototype.nodeName="#document-fragment",ya.prototype.nodeType=11,E(ya,I),_a.prototype.nodeType=7,E(_a,I),va.prototype.serializeToString=function(e,t,i){return ba.call(e,t,i)},I.prototype.toString=ba;try{Object.defineProperty&&(Object.defineProperty(Fn.prototype,"length",{get:function(){return qn(this),this.$$length}}),Object.defineProperty(I.prototype,"textContent",{get:function(){return function e(t){switch(t.nodeType){case 1:case 11:var i=[];for(t=t.firstChild;t;)7!==t.nodeType&&8!==t.nodeType&&i.push(e(t)),t=t.nextSibling;return i.join("");default:return t.nodeValue}}(this)},set:function(e){switch(this.nodeType){case 1:case 11:for(;this.firstChild;)this.removeChild(this.firstChild);(e||String(e))&&this.appendChild(this.ownerDocument.createTextNode(e));break;default:this.data=e,this.value=e,this.nodeValue=e}}}),Ea=function(e,t,i){e["$$"+t]=i})}catch(e){}var hr={DocumentType:pa,DOMException:k,DOMImplementation:zn,Element:oa,Node:I,NodeList:Bn,XMLSerializer:va},Ca=Bt(function(e,t){var i=An.freeze;t.XML_ENTITIES=i({amp:"&",apos:"'",gt:">",lt:"<",quot:'"'}),t.HTML_ENTITIES=i({Aacute:"Á",aacute:"á",Abreve:"Ă",abreve:"ă",ac:"∾",acd:"∿",acE:"∾̳",Acirc:"Â",acirc:"â",acute:"´",Acy:"А",acy:"а",AElig:"Æ",aelig:"æ",af:"⁡",Afr:"𝔄",afr:"𝔞",Agrave:"À",agrave:"à",alefsym:"ℵ",aleph:"ℵ",Alpha:"Α",alpha:"α",Amacr:"Ā",amacr:"ā",amalg:"⨿",AMP:"&",amp:"&",And:"⩓",and:"∧",andand:"⩕",andd:"⩜",andslope:"⩘",andv:"⩚",ang:"∠",ange:"⦤",angle:"∠",angmsd:"∡",angmsdaa:"⦨",angmsdab:"⦩",angmsdac:"⦪",angmsdad:"⦫",angmsdae:"⦬",angmsdaf:"⦭",angmsdag:"⦮",angmsdah:"⦯",angrt:"∟",angrtvb:"⊾",angrtvbd:"⦝",angsph:"∢",angst:"Å",angzarr:"⍼",Aogon:"Ą",aogon:"ą",Aopf:"𝔸",aopf:"𝕒",ap:"≈",apacir:"⩯",apE:"⩰",ape:"≊",apid:"≋",apos:"'",ApplyFunction:"⁡",approx:"≈",approxeq:"≊",Aring:"Å",aring:"å",Ascr:"𝒜",ascr:"𝒶",Assign:"≔",ast:"*",asymp:"≈",asympeq:"≍",Atilde:"Ã",atilde:"ã",Auml:"Ä",auml:"ä",awconint:"∳",awint:"⨑",backcong:"≌",backepsilon:"϶",backprime:"‵",backsim:"∽",backsimeq:"⋍",Backslash:"∖",Barv:"⫧",barvee:"⊽",Barwed:"⌆",barwed:"⌅",barwedge:"⌅",bbrk:"⎵",bbrktbrk:"⎶",bcong:"≌",Bcy:"Б",bcy:"б",bdquo:"„",becaus:"∵",Because:"∵",because:"∵",bemptyv:"⦰",bepsi:"϶",bernou:"ℬ",Bernoullis:"ℬ",Beta:"Β",beta:"β",beth:"ℶ",between:"≬",Bfr:"𝔅",bfr:"𝔟",bigcap:"⋂",bigcirc:"◯",bigcup:"⋃",bigodot:"⨀",bigoplus:"⨁",bigotimes:"⨂",bigsqcup:"⨆",bigstar:"★",bigtriangledown:"▽",bigtriangleup:"△",biguplus:"⨄",bigvee:"⋁",bigwedge:"⋀",bkarow:"⤍",blacklozenge:"⧫",blacksquare:"▪",blacktriangle:"▴",blacktriangledown:"▾",blacktriangleleft:"◂",blacktriangleright:"▸",blank:"␣",blk12:"▒",blk14:"░",blk34:"▓",block:"█",bne:"=⃥",bnequiv:"≡⃥",bNot:"⫭",bnot:"⌐",Bopf:"𝔹",bopf:"𝕓",bot:"⊥",bottom:"⊥",bowtie:"⋈",boxbox:"⧉",boxDL:"╗",boxDl:"╖",boxdL:"╕",boxdl:"┐",boxDR:"╔",boxDr:"╓",boxdR:"╒",boxdr:"┌",boxH:"═",boxh:"─",boxHD:"╦",boxHd:"╤",boxhD:"╥",boxhd:"┬",boxHU:"╩",boxHu:"╧",boxhU:"╨",boxhu:"┴",boxminus:"⊟",boxplus:"⊞",boxtimes:"⊠",boxUL:"╝",boxUl:"╜",boxuL:"╛",boxul:"┘",boxUR:"╚",boxUr:"╙",boxuR:"╘",boxur:"└",boxV:"║",boxv:"│",boxVH:"╬",boxVh:"╫",boxvH:"╪",boxvh:"┼",boxVL:"╣",boxVl:"╢",boxvL:"╡",boxvl:"┤",boxVR:"╠",boxVr:"╟",boxvR:"╞",boxvr:"├",bprime:"‵",Breve:"˘",breve:"˘",brvbar:"¦",Bscr:"ℬ",bscr:"𝒷",bsemi:"⁏",bsim:"∽",bsime:"⋍",bsol:"\\",bsolb:"⧅",bsolhsub:"⟈",bull:"•",bullet:"•",bump:"≎",bumpE:"⪮",bumpe:"≏",Bumpeq:"≎",bumpeq:"≏",Cacute:"Ć",cacute:"ć",Cap:"⋒",cap:"∩",capand:"⩄",capbrcup:"⩉",capcap:"⩋",capcup:"⩇",capdot:"⩀",CapitalDifferentialD:"ⅅ",caps:"∩︀",caret:"⁁",caron:"ˇ",Cayleys:"ℭ",ccaps:"⩍",Ccaron:"Č",ccaron:"č",Ccedil:"Ç",ccedil:"ç",Ccirc:"Ĉ",ccirc:"ĉ",Cconint:"∰",ccups:"⩌",ccupssm:"⩐",Cdot:"Ċ",cdot:"ċ",cedil:"¸",Cedilla:"¸",cemptyv:"⦲",cent:"¢",CenterDot:"·",centerdot:"·",Cfr:"ℭ",cfr:"𝔠",CHcy:"Ч",chcy:"ч",check:"✓",checkmark:"✓",Chi:"Χ",chi:"χ",cir:"○",circ:"ˆ",circeq:"≗",circlearrowleft:"↺",circlearrowright:"↻",circledast:"⊛",circledcirc:"⊚",circleddash:"⊝",CircleDot:"⊙",circledR:"®",circledS:"Ⓢ",CircleMinus:"⊖",CirclePlus:"⊕",CircleTimes:"⊗",cirE:"⧃",cire:"≗",cirfnint:"⨐",cirmid:"⫯",cirscir:"⧂",ClockwiseContourIntegral:"∲",CloseCurlyDoubleQuote:"”",CloseCurlyQuote:"’",clubs:"♣",clubsuit:"♣",Colon:"∷",colon:":",Colone:"⩴",colone:"≔",coloneq:"≔",comma:",",commat:"@",comp:"∁",compfn:"∘",complement:"∁",complexes:"ℂ",cong:"≅",congdot:"⩭",Congruent:"≡",Conint:"∯",conint:"∮",ContourIntegral:"∮",Copf:"ℂ",copf:"𝕔",coprod:"∐",Coproduct:"∐",COPY:"©",copy:"©",copysr:"℗",CounterClockwiseContourIntegral:"∳",crarr:"↵",Cross:"⨯",cross:"✗",Cscr:"𝒞",cscr:"𝒸",csub:"⫏",csube:"⫑",csup:"⫐",csupe:"⫒",ctdot:"⋯",cudarrl:"⤸",cudarrr:"⤵",cuepr:"⋞",cuesc:"⋟",cularr:"↶",cularrp:"⤽",Cup:"⋓",cup:"∪",cupbrcap:"⩈",CupCap:"≍",cupcap:"⩆",cupcup:"⩊",cupdot:"⊍",cupor:"⩅",cups:"∪︀",curarr:"↷",curarrm:"⤼",curlyeqprec:"⋞",curlyeqsucc:"⋟",curlyvee:"⋎",curlywedge:"⋏",curren:"¤",curvearrowleft:"↶",curvearrowright:"↷",cuvee:"⋎",cuwed:"⋏",cwconint:"∲",cwint:"∱",cylcty:"⌭",Dagger:"‡",dagger:"†",daleth:"ℸ",Darr:"↡",dArr:"⇓",darr:"↓",dash:"‐",Dashv:"⫤",dashv:"⊣",dbkarow:"⤏",dblac:"˝",Dcaron:"Ď",dcaron:"ď",Dcy:"Д",dcy:"д",DD:"ⅅ",dd:"ⅆ",ddagger:"‡",ddarr:"⇊",DDotrahd:"⤑",ddotseq:"⩷",deg:"°",Del:"∇",Delta:"Δ",delta:"δ",demptyv:"⦱",dfisht:"⥿",Dfr:"𝔇",dfr:"𝔡",dHar:"⥥",dharl:"⇃",dharr:"⇂",DiacriticalAcute:"´",DiacriticalDot:"˙",DiacriticalDoubleAcute:"˝",DiacriticalGrave:"`",DiacriticalTilde:"˜",diam:"⋄",Diamond:"⋄",diamond:"⋄",diamondsuit:"♦",diams:"♦",die:"¨",DifferentialD:"ⅆ",digamma:"ϝ",disin:"⋲",div:"÷",divide:"÷",divideontimes:"⋇",divonx:"⋇",DJcy:"Ђ",djcy:"ђ",dlcorn:"⌞",dlcrop:"⌍",dollar:"$",Dopf:"𝔻",dopf:"𝕕",Dot:"¨",dot:"˙",DotDot:"⃜",doteq:"≐",doteqdot:"≑",DotEqual:"≐",dotminus:"∸",dotplus:"∔",dotsquare:"⊡",doublebarwedge:"⌆",DoubleContourIntegral:"∯",DoubleDot:"¨",DoubleDownArrow:"⇓",DoubleLeftArrow:"⇐",DoubleLeftRightArrow:"⇔",DoubleLeftTee:"⫤",DoubleLongLeftArrow:"⟸",DoubleLongLeftRightArrow:"⟺",DoubleLongRightArrow:"⟹",DoubleRightArrow:"⇒",DoubleRightTee:"⊨",DoubleUpArrow:"⇑",DoubleUpDownArrow:"⇕",DoubleVerticalBar:"∥",DownArrow:"↓",Downarrow:"⇓",downarrow:"↓",DownArrowBar:"⤓",DownArrowUpArrow:"⇵",DownBreve:"̑",downdownarrows:"⇊",downharpoonleft:"⇃",downharpoonright:"⇂",DownLeftRightVector:"⥐",DownLeftTeeVector:"⥞",DownLeftVector:"↽",DownLeftVectorBar:"⥖",DownRightTeeVector:"⥟",DownRightVector:"⇁",DownRightVectorBar:"⥗",DownTee:"⊤",DownTeeArrow:"↧",drbkarow:"⤐",drcorn:"⌟",drcrop:"⌌",Dscr:"𝒟",dscr:"𝒹",DScy:"Ѕ",dscy:"ѕ",dsol:"⧶",Dstrok:"Đ",dstrok:"đ",dtdot:"⋱",dtri:"▿",dtrif:"▾",duarr:"⇵",duhar:"⥯",dwangle:"⦦",DZcy:"Џ",dzcy:"џ",dzigrarr:"⟿",Eacute:"É",eacute:"é",easter:"⩮",Ecaron:"Ě",ecaron:"ě",ecir:"≖",Ecirc:"Ê",ecirc:"ê",ecolon:"≕",Ecy:"Э",ecy:"э",eDDot:"⩷",Edot:"Ė",eDot:"≑",edot:"ė",ee:"ⅇ",efDot:"≒",Efr:"𝔈",efr:"𝔢",eg:"⪚",Egrave:"È",egrave:"è",egs:"⪖",egsdot:"⪘",el:"⪙",Element:"∈",elinters:"⏧",ell:"ℓ",els:"⪕",elsdot:"⪗",Emacr:"Ē",emacr:"ē",empty:"∅",emptyset:"∅",EmptySmallSquare:"◻",emptyv:"∅",EmptyVerySmallSquare:"▫",emsp:" ",emsp13:" ",emsp14:" ",ENG:"Ŋ",eng:"ŋ",ensp:" ",Eogon:"Ę",eogon:"ę",Eopf:"𝔼",eopf:"𝕖",epar:"⋕",eparsl:"⧣",eplus:"⩱",epsi:"ε",Epsilon:"Ε",epsilon:"ε",epsiv:"ϵ",eqcirc:"≖",eqcolon:"≕",eqsim:"≂",eqslantgtr:"⪖",eqslantless:"⪕",Equal:"⩵",equals:"=",EqualTilde:"≂",equest:"≟",Equilibrium:"⇌",equiv:"≡",equivDD:"⩸",eqvparsl:"⧥",erarr:"⥱",erDot:"≓",Escr:"ℰ",escr:"ℯ",esdot:"≐",Esim:"⩳",esim:"≂",Eta:"Η",eta:"η",ETH:"Ð",eth:"ð",Euml:"Ë",euml:"ë",euro:"€",excl:"!",exist:"∃",Exists:"∃",expectation:"ℰ",ExponentialE:"ⅇ",exponentiale:"ⅇ",fallingdotseq:"≒",Fcy:"Ф",fcy:"ф",female:"♀",ffilig:"ffi",fflig:"ff",ffllig:"ffl",Ffr:"𝔉",ffr:"𝔣",filig:"fi",FilledSmallSquare:"◼",FilledVerySmallSquare:"▪",fjlig:"fj",flat:"♭",fllig:"fl",fltns:"▱",fnof:"ƒ",Fopf:"𝔽",fopf:"𝕗",ForAll:"∀",forall:"∀",fork:"⋔",forkv:"⫙",Fouriertrf:"ℱ",fpartint:"⨍",frac12:"½",frac13:"⅓",frac14:"¼",frac15:"⅕",frac16:"⅙",frac18:"⅛",frac23:"⅔",frac25:"⅖",frac34:"¾",frac35:"⅗",frac38:"⅜",frac45:"⅘",frac56:"⅚",frac58:"⅝",frac78:"⅞",frasl:"⁄",frown:"⌢",Fscr:"ℱ",fscr:"𝒻",gacute:"ǵ",Gamma:"Γ",gamma:"γ",Gammad:"Ϝ",gammad:"ϝ",gap:"⪆",Gbreve:"Ğ",gbreve:"ğ",Gcedil:"Ģ",Gcirc:"Ĝ",gcirc:"ĝ",Gcy:"Г",gcy:"г",Gdot:"Ġ",gdot:"ġ",gE:"≧",ge:"≥",gEl:"⪌",gel:"⋛",geq:"≥",geqq:"≧",geqslant:"⩾",ges:"⩾",gescc:"⪩",gesdot:"⪀",gesdoto:"⪂",gesdotol:"⪄",gesl:"⋛︀",gesles:"⪔",Gfr:"𝔊",gfr:"𝔤",Gg:"⋙",gg:"≫",ggg:"⋙",gimel:"ℷ",GJcy:"Ѓ",gjcy:"ѓ",gl:"≷",gla:"⪥",glE:"⪒",glj:"⪤",gnap:"⪊",gnapprox:"⪊",gnE:"≩",gne:"⪈",gneq:"⪈",gneqq:"≩",gnsim:"⋧",Gopf:"𝔾",gopf:"𝕘",grave:"`",GreaterEqual:"≥",GreaterEqualLess:"⋛",GreaterFullEqual:"≧",GreaterGreater:"⪢",GreaterLess:"≷",GreaterSlantEqual:"⩾",GreaterTilde:"≳",Gscr:"𝒢",gscr:"ℊ",gsim:"≳",gsime:"⪎",gsiml:"⪐",Gt:"≫",GT:">",gt:">",gtcc:"⪧",gtcir:"⩺",gtdot:"⋗",gtlPar:"⦕",gtquest:"⩼",gtrapprox:"⪆",gtrarr:"⥸",gtrdot:"⋗",gtreqless:"⋛",gtreqqless:"⪌",gtrless:"≷",gtrsim:"≳",gvertneqq:"≩︀",gvnE:"≩︀",Hacek:"ˇ",hairsp:" ",half:"½",hamilt:"ℋ",HARDcy:"Ъ",hardcy:"ъ",hArr:"⇔",harr:"↔",harrcir:"⥈",harrw:"↭",Hat:"^",hbar:"ℏ",Hcirc:"Ĥ",hcirc:"ĥ",hearts:"♥",heartsuit:"♥",hellip:"…",hercon:"⊹",Hfr:"ℌ",hfr:"𝔥",HilbertSpace:"ℋ",hksearow:"⤥",hkswarow:"⤦",hoarr:"⇿",homtht:"∻",hookleftarrow:"↩",hookrightarrow:"↪",Hopf:"ℍ",hopf:"𝕙",horbar:"―",HorizontalLine:"─",Hscr:"ℋ",hscr:"𝒽",hslash:"ℏ",Hstrok:"Ħ",hstrok:"ħ",HumpDownHump:"≎",HumpEqual:"≏",hybull:"⁃",hyphen:"‐",Iacute:"Í",iacute:"í",ic:"⁣",Icirc:"Î",icirc:"î",Icy:"И",icy:"и",Idot:"İ",IEcy:"Е",iecy:"е",iexcl:"¡",iff:"⇔",Ifr:"ℑ",ifr:"𝔦",Igrave:"Ì",igrave:"ì",ii:"ⅈ",iiiint:"⨌",iiint:"∭",iinfin:"⧜",iiota:"℩",IJlig:"IJ",ijlig:"ij",Im:"ℑ",Imacr:"Ī",imacr:"ī",image:"ℑ",ImaginaryI:"ⅈ",imagline:"ℐ",imagpart:"ℑ",imath:"ı",imof:"⊷",imped:"Ƶ",Implies:"⇒",in:"∈",incare:"℅",infin:"∞",infintie:"⧝",inodot:"ı",Int:"∬",int:"∫",intcal:"⊺",integers:"ℤ",Integral:"∫",intercal:"⊺",Intersection:"⋂",intlarhk:"⨗",intprod:"⨼",InvisibleComma:"⁣",InvisibleTimes:"⁢",IOcy:"Ё",iocy:"ё",Iogon:"Į",iogon:"į",Iopf:"𝕀",iopf:"𝕚",Iota:"Ι",iota:"ι",iprod:"⨼",iquest:"¿",Iscr:"ℐ",iscr:"𝒾",isin:"∈",isindot:"⋵",isinE:"⋹",isins:"⋴",isinsv:"⋳",isinv:"∈",it:"⁢",Itilde:"Ĩ",itilde:"ĩ",Iukcy:"І",iukcy:"і",Iuml:"Ï",iuml:"ï",Jcirc:"Ĵ",jcirc:"ĵ",Jcy:"Й",jcy:"й",Jfr:"𝔍",jfr:"𝔧",jmath:"ȷ",Jopf:"𝕁",jopf:"𝕛",Jscr:"𝒥",jscr:"𝒿",Jsercy:"Ј",jsercy:"ј",Jukcy:"Є",jukcy:"є",Kappa:"Κ",kappa:"κ",kappav:"ϰ",Kcedil:"Ķ",kcedil:"ķ",Kcy:"К",kcy:"к",Kfr:"𝔎",kfr:"𝔨",kgreen:"ĸ",KHcy:"Х",khcy:"х",KJcy:"Ќ",kjcy:"ќ",Kopf:"𝕂",kopf:"𝕜",Kscr:"𝒦",kscr:"𝓀",lAarr:"⇚",Lacute:"Ĺ",lacute:"ĺ",laemptyv:"⦴",lagran:"ℒ",Lambda:"Λ",lambda:"λ",Lang:"⟪",lang:"⟨",langd:"⦑",langle:"⟨",lap:"⪅",Laplacetrf:"ℒ",laquo:"«",Larr:"↞",lArr:"⇐",larr:"←",larrb:"⇤",larrbfs:"⤟",larrfs:"⤝",larrhk:"↩",larrlp:"↫",larrpl:"⤹",larrsim:"⥳",larrtl:"↢",lat:"⪫",lAtail:"⤛",latail:"⤙",late:"⪭",lates:"⪭︀",lBarr:"⤎",lbarr:"⤌",lbbrk:"❲",lbrace:"{",lbrack:"[",lbrke:"⦋",lbrksld:"⦏",lbrkslu:"⦍",Lcaron:"Ľ",lcaron:"ľ",Lcedil:"Ļ",lcedil:"ļ",lceil:"⌈",lcub:"{",Lcy:"Л",lcy:"л",ldca:"⤶",ldquo:"“",ldquor:"„",ldrdhar:"⥧",ldrushar:"⥋",ldsh:"↲",lE:"≦",le:"≤",LeftAngleBracket:"⟨",LeftArrow:"←",Leftarrow:"⇐",leftarrow:"←",LeftArrowBar:"⇤",LeftArrowRightArrow:"⇆",leftarrowtail:"↢",LeftCeiling:"⌈",LeftDoubleBracket:"⟦",LeftDownTeeVector:"⥡",LeftDownVector:"⇃",LeftDownVectorBar:"⥙",LeftFloor:"⌊",leftharpoondown:"↽",leftharpoonup:"↼",leftleftarrows:"⇇",LeftRightArrow:"↔",Leftrightarrow:"⇔",leftrightarrow:"↔",leftrightarrows:"⇆",leftrightharpoons:"⇋",leftrightsquigarrow:"↭",LeftRightVector:"⥎",LeftTee:"⊣",LeftTeeArrow:"↤",LeftTeeVector:"⥚",leftthreetimes:"⋋",LeftTriangle:"⊲",LeftTriangleBar:"⧏",LeftTriangleEqual:"⊴",LeftUpDownVector:"⥑",LeftUpTeeVector:"⥠",LeftUpVector:"↿",LeftUpVectorBar:"⥘",LeftVector:"↼",LeftVectorBar:"⥒",lEg:"⪋",leg:"⋚",leq:"≤",leqq:"≦",leqslant:"⩽",les:"⩽",lescc:"⪨",lesdot:"⩿",lesdoto:"⪁",lesdotor:"⪃",lesg:"⋚︀",lesges:"⪓",lessapprox:"⪅",lessdot:"⋖",lesseqgtr:"⋚",lesseqqgtr:"⪋",LessEqualGreater:"⋚",LessFullEqual:"≦",LessGreater:"≶",lessgtr:"≶",LessLess:"⪡",lesssim:"≲",LessSlantEqual:"⩽",LessTilde:"≲",lfisht:"⥼",lfloor:"⌊",Lfr:"𝔏",lfr:"𝔩",lg:"≶",lgE:"⪑",lHar:"⥢",lhard:"↽",lharu:"↼",lharul:"⥪",lhblk:"▄",LJcy:"Љ",ljcy:"љ",Ll:"⋘",ll:"≪",llarr:"⇇",llcorner:"⌞",Lleftarrow:"⇚",llhard:"⥫",lltri:"◺",Lmidot:"Ŀ",lmidot:"ŀ",lmoust:"⎰",lmoustache:"⎰",lnap:"⪉",lnapprox:"⪉",lnE:"≨",lne:"⪇",lneq:"⪇",lneqq:"≨",lnsim:"⋦",loang:"⟬",loarr:"⇽",lobrk:"⟦",LongLeftArrow:"⟵",Longleftarrow:"⟸",longleftarrow:"⟵",LongLeftRightArrow:"⟷",Longleftrightarrow:"⟺",longleftrightarrow:"⟷",longmapsto:"⟼",LongRightArrow:"⟶",Longrightarrow:"⟹",longrightarrow:"⟶",looparrowleft:"↫",looparrowright:"↬",lopar:"⦅",Lopf:"𝕃",lopf:"𝕝",loplus:"⨭",lotimes:"⨴",lowast:"∗",lowbar:"_",LowerLeftArrow:"↙",LowerRightArrow:"↘",loz:"◊",lozenge:"◊",lozf:"⧫",lpar:"(",lparlt:"⦓",lrarr:"⇆",lrcorner:"⌟",lrhar:"⇋",lrhard:"⥭",lrm:"‎",lrtri:"⊿",lsaquo:"‹",Lscr:"ℒ",lscr:"𝓁",Lsh:"↰",lsh:"↰",lsim:"≲",lsime:"⪍",lsimg:"⪏",lsqb:"[",lsquo:"‘",lsquor:"‚",Lstrok:"Ł",lstrok:"ł",Lt:"≪",LT:"<",lt:"<",ltcc:"⪦",ltcir:"⩹",ltdot:"⋖",lthree:"⋋",ltimes:"⋉",ltlarr:"⥶",ltquest:"⩻",ltri:"◃",ltrie:"⊴",ltrif:"◂",ltrPar:"⦖",lurdshar:"⥊",luruhar:"⥦",lvertneqq:"≨︀",lvnE:"≨︀",macr:"¯",male:"♂",malt:"✠",maltese:"✠",Map:"⤅",map:"↦",mapsto:"↦",mapstodown:"↧",mapstoleft:"↤",mapstoup:"↥",marker:"▮",mcomma:"⨩",Mcy:"М",mcy:"м",mdash:"—",mDDot:"∺",measuredangle:"∡",MediumSpace:" ",Mellintrf:"ℳ",Mfr:"𝔐",mfr:"𝔪",mho:"℧",micro:"µ",mid:"∣",midast:"*",midcir:"⫰",middot:"·",minus:"−",minusb:"⊟",minusd:"∸",minusdu:"⨪",MinusPlus:"∓",mlcp:"⫛",mldr:"…",mnplus:"∓",models:"⊧",Mopf:"𝕄",mopf:"𝕞",mp:"∓",Mscr:"ℳ",mscr:"𝓂",mstpos:"∾",Mu:"Μ",mu:"μ",multimap:"⊸",mumap:"⊸",nabla:"∇",Nacute:"Ń",nacute:"ń",nang:"∠⃒",nap:"≉",napE:"⩰̸",napid:"≋̸",napos:"ʼn",napprox:"≉",natur:"♮",natural:"♮",naturals:"ℕ",nbsp:" ",nbump:"≎̸",nbumpe:"≏̸",ncap:"⩃",Ncaron:"Ň",ncaron:"ň",Ncedil:"Ņ",ncedil:"ņ",ncong:"≇",ncongdot:"⩭̸",ncup:"⩂",Ncy:"Н",ncy:"н",ndash:"–",ne:"≠",nearhk:"⤤",neArr:"⇗",nearr:"↗",nearrow:"↗",nedot:"≐̸",NegativeMediumSpace:"​",NegativeThickSpace:"​",NegativeThinSpace:"​",NegativeVeryThinSpace:"​",nequiv:"≢",nesear:"⤨",nesim:"≂̸",NestedGreaterGreater:"≫",NestedLessLess:"≪",NewLine:"\n",nexist:"∄",nexists:"∄",Nfr:"𝔑",nfr:"𝔫",ngE:"≧̸",nge:"≱",ngeq:"≱",ngeqq:"≧̸",ngeqslant:"⩾̸",nges:"⩾̸",nGg:"⋙̸",ngsim:"≵",nGt:"≫⃒",ngt:"≯",ngtr:"≯",nGtv:"≫̸",nhArr:"⇎",nharr:"↮",nhpar:"⫲",ni:"∋",nis:"⋼",nisd:"⋺",niv:"∋",NJcy:"Њ",njcy:"њ",nlArr:"⇍",nlarr:"↚",nldr:"‥",nlE:"≦̸",nle:"≰",nLeftarrow:"⇍",nleftarrow:"↚",nLeftrightarrow:"⇎",nleftrightarrow:"↮",nleq:"≰",nleqq:"≦̸",nleqslant:"⩽̸",nles:"⩽̸",nless:"≮",nLl:"⋘̸",nlsim:"≴",nLt:"≪⃒",nlt:"≮",nltri:"⋪",nltrie:"⋬",nLtv:"≪̸",nmid:"∤",NoBreak:"⁠",NonBreakingSpace:" ",Nopf:"ℕ",nopf:"𝕟",Not:"⫬",not:"¬",NotCongruent:"≢",NotCupCap:"≭",NotDoubleVerticalBar:"∦",NotElement:"∉",NotEqual:"≠",NotEqualTilde:"≂̸",NotExists:"∄",NotGreater:"≯",NotGreaterEqual:"≱",NotGreaterFullEqual:"≧̸",NotGreaterGreater:"≫̸",NotGreaterLess:"≹",NotGreaterSlantEqual:"⩾̸",NotGreaterTilde:"≵",NotHumpDownHump:"≎̸",NotHumpEqual:"≏̸",notin:"∉",notindot:"⋵̸",notinE:"⋹̸",notinva:"∉",notinvb:"⋷",notinvc:"⋶",NotLeftTriangle:"⋪",NotLeftTriangleBar:"⧏̸",NotLeftTriangleEqual:"⋬",NotLess:"≮",NotLessEqual:"≰",NotLessGreater:"≸",NotLessLess:"≪̸",NotLessSlantEqual:"⩽̸",NotLessTilde:"≴",NotNestedGreaterGreater:"⪢̸",NotNestedLessLess:"⪡̸",notni:"∌",notniva:"∌",notnivb:"⋾",notnivc:"⋽",NotPrecedes:"⊀",NotPrecedesEqual:"⪯̸",NotPrecedesSlantEqual:"⋠",NotReverseElement:"∌",NotRightTriangle:"⋫",NotRightTriangleBar:"⧐̸",NotRightTriangleEqual:"⋭",NotSquareSubset:"⊏̸",NotSquareSubsetEqual:"⋢",NotSquareSuperset:"⊐̸",NotSquareSupersetEqual:"⋣",NotSubset:"⊂⃒",NotSubsetEqual:"⊈",NotSucceeds:"⊁",NotSucceedsEqual:"⪰̸",NotSucceedsSlantEqual:"⋡",NotSucceedsTilde:"≿̸",NotSuperset:"⊃⃒",NotSupersetEqual:"⊉",NotTilde:"≁",NotTildeEqual:"≄",NotTildeFullEqual:"≇",NotTildeTilde:"≉",NotVerticalBar:"∤",npar:"∦",nparallel:"∦",nparsl:"⫽⃥",npart:"∂̸",npolint:"⨔",npr:"⊀",nprcue:"⋠",npre:"⪯̸",nprec:"⊀",npreceq:"⪯̸",nrArr:"⇏",nrarr:"↛",nrarrc:"⤳̸",nrarrw:"↝̸",nRightarrow:"⇏",nrightarrow:"↛",nrtri:"⋫",nrtrie:"⋭",nsc:"⊁",nsccue:"⋡",nsce:"⪰̸",Nscr:"𝒩",nscr:"𝓃",nshortmid:"∤",nshortparallel:"∦",nsim:"≁",nsime:"≄",nsimeq:"≄",nsmid:"∤",nspar:"∦",nsqsube:"⋢",nsqsupe:"⋣",nsub:"⊄",nsubE:"⫅̸",nsube:"⊈",nsubset:"⊂⃒",nsubseteq:"⊈",nsubseteqq:"⫅̸",nsucc:"⊁",nsucceq:"⪰̸",nsup:"⊅",nsupE:"⫆̸",nsupe:"⊉",nsupset:"⊃⃒",nsupseteq:"⊉",nsupseteqq:"⫆̸",ntgl:"≹",Ntilde:"Ñ",ntilde:"ñ",ntlg:"≸",ntriangleleft:"⋪",ntrianglelefteq:"⋬",ntriangleright:"⋫",ntrianglerighteq:"⋭",Nu:"Ν",nu:"ν",num:"#",numero:"№",numsp:" ",nvap:"≍⃒",nVDash:"⊯",nVdash:"⊮",nvDash:"⊭",nvdash:"⊬",nvge:"≥⃒",nvgt:">⃒",nvHarr:"⤄",nvinfin:"⧞",nvlArr:"⤂",nvle:"≤⃒",nvlt:"<⃒",nvltrie:"⊴⃒",nvrArr:"⤃",nvrtrie:"⊵⃒",nvsim:"∼⃒",nwarhk:"⤣",nwArr:"⇖",nwarr:"↖",nwarrow:"↖",nwnear:"⤧",Oacute:"Ó",oacute:"ó",oast:"⊛",ocir:"⊚",Ocirc:"Ô",ocirc:"ô",Ocy:"О",ocy:"о",odash:"⊝",Odblac:"Ő",odblac:"ő",odiv:"⨸",odot:"⊙",odsold:"⦼",OElig:"Œ",oelig:"œ",ofcir:"⦿",Ofr:"𝔒",ofr:"𝔬",ogon:"˛",Ograve:"Ò",ograve:"ò",ogt:"⧁",ohbar:"⦵",ohm:"Ω",oint:"∮",olarr:"↺",olcir:"⦾",olcross:"⦻",oline:"‾",olt:"⧀",Omacr:"Ō",omacr:"ō",Omega:"Ω",omega:"ω",Omicron:"Ο",omicron:"ο",omid:"⦶",ominus:"⊖",Oopf:"𝕆",oopf:"𝕠",opar:"⦷",OpenCurlyDoubleQuote:"“",OpenCurlyQuote:"‘",operp:"⦹",oplus:"⊕",Or:"⩔",or:"∨",orarr:"↻",ord:"⩝",order:"ℴ",orderof:"ℴ",ordf:"ª",ordm:"º",origof:"⊶",oror:"⩖",orslope:"⩗",orv:"⩛",oS:"Ⓢ",Oscr:"𝒪",oscr:"ℴ",Oslash:"Ø",oslash:"ø",osol:"⊘",Otilde:"Õ",otilde:"õ",Otimes:"⨷",otimes:"⊗",otimesas:"⨶",Ouml:"Ö",ouml:"ö",ovbar:"⌽",OverBar:"‾",OverBrace:"⏞",OverBracket:"⎴",OverParenthesis:"⏜",par:"∥",para:"¶",parallel:"∥",parsim:"⫳",parsl:"⫽",part:"∂",PartialD:"∂",Pcy:"П",pcy:"п",percnt:"%",period:".",permil:"‰",perp:"⊥",pertenk:"‱",Pfr:"𝔓",pfr:"𝔭",Phi:"Φ",phi:"φ",phiv:"ϕ",phmmat:"ℳ",phone:"☎",Pi:"Π",pi:"π",pitchfork:"⋔",piv:"ϖ",planck:"ℏ",planckh:"ℎ",plankv:"ℏ",plus:"+",plusacir:"⨣",plusb:"⊞",pluscir:"⨢",plusdo:"∔",plusdu:"⨥",pluse:"⩲",PlusMinus:"±",plusmn:"±",plussim:"⨦",plustwo:"⨧",pm:"±",Poincareplane:"ℌ",pointint:"⨕",Popf:"ℙ",popf:"𝕡",pound:"£",Pr:"⪻",pr:"≺",prap:"⪷",prcue:"≼",prE:"⪳",pre:"⪯",prec:"≺",precapprox:"⪷",preccurlyeq:"≼",Precedes:"≺",PrecedesEqual:"⪯",PrecedesSlantEqual:"≼",PrecedesTilde:"≾",preceq:"⪯",precnapprox:"⪹",precneqq:"⪵",precnsim:"⋨",precsim:"≾",Prime:"″",prime:"′",primes:"ℙ",prnap:"⪹",prnE:"⪵",prnsim:"⋨",prod:"∏",Product:"∏",profalar:"⌮",profline:"⌒",profsurf:"⌓",prop:"∝",Proportion:"∷",Proportional:"∝",propto:"∝",prsim:"≾",prurel:"⊰",Pscr:"𝒫",pscr:"𝓅",Psi:"Ψ",psi:"ψ",puncsp:" ",Qfr:"𝔔",qfr:"𝔮",qint:"⨌",Qopf:"ℚ",qopf:"𝕢",qprime:"⁗",Qscr:"𝒬",qscr:"𝓆",quaternions:"ℍ",quatint:"⨖",quest:"?",questeq:"≟",QUOT:'"',quot:'"',rAarr:"⇛",race:"∽̱",Racute:"Ŕ",racute:"ŕ",radic:"√",raemptyv:"⦳",Rang:"⟫",rang:"⟩",rangd:"⦒",range:"⦥",rangle:"⟩",raquo:"»",Rarr:"↠",rArr:"⇒",rarr:"→",rarrap:"⥵",rarrb:"⇥",rarrbfs:"⤠",rarrc:"⤳",rarrfs:"⤞",rarrhk:"↪",rarrlp:"↬",rarrpl:"⥅",rarrsim:"⥴",Rarrtl:"⤖",rarrtl:"↣",rarrw:"↝",rAtail:"⤜",ratail:"⤚",ratio:"∶",rationals:"ℚ",RBarr:"⤐",rBarr:"⤏",rbarr:"⤍",rbbrk:"❳",rbrace:"}",rbrack:"]",rbrke:"⦌",rbrksld:"⦎",rbrkslu:"⦐",Rcaron:"Ř",rcaron:"ř",Rcedil:"Ŗ",rcedil:"ŗ",rceil:"⌉",rcub:"}",Rcy:"Р",rcy:"р",rdca:"⤷",rdldhar:"⥩",rdquo:"”",rdquor:"”",rdsh:"↳",Re:"ℜ",real:"ℜ",realine:"ℛ",realpart:"ℜ",reals:"ℝ",rect:"▭",REG:"®",reg:"®",ReverseElement:"∋",ReverseEquilibrium:"⇋",ReverseUpEquilibrium:"⥯",rfisht:"⥽",rfloor:"⌋",Rfr:"ℜ",rfr:"𝔯",rHar:"⥤",rhard:"⇁",rharu:"⇀",rharul:"⥬",Rho:"Ρ",rho:"ρ",rhov:"ϱ",RightAngleBracket:"⟩",RightArrow:"→",Rightarrow:"⇒",rightarrow:"→",RightArrowBar:"⇥",RightArrowLeftArrow:"⇄",rightarrowtail:"↣",RightCeiling:"⌉",RightDoubleBracket:"⟧",RightDownTeeVector:"⥝",RightDownVector:"⇂",RightDownVectorBar:"⥕",RightFloor:"⌋",rightharpoondown:"⇁",rightharpoonup:"⇀",rightleftarrows:"⇄",rightleftharpoons:"⇌",rightrightarrows:"⇉",rightsquigarrow:"↝",RightTee:"⊢",RightTeeArrow:"↦",RightTeeVector:"⥛",rightthreetimes:"⋌",RightTriangle:"⊳",RightTriangleBar:"⧐",RightTriangleEqual:"⊵",RightUpDownVector:"⥏",RightUpTeeVector:"⥜",RightUpVector:"↾",RightUpVectorBar:"⥔",RightVector:"⇀",RightVectorBar:"⥓",ring:"˚",risingdotseq:"≓",rlarr:"⇄",rlhar:"⇌",rlm:"‏",rmoust:"⎱",rmoustache:"⎱",rnmid:"⫮",roang:"⟭",roarr:"⇾",robrk:"⟧",ropar:"⦆",Ropf:"ℝ",ropf:"𝕣",roplus:"⨮",rotimes:"⨵",RoundImplies:"⥰",rpar:")",rpargt:"⦔",rppolint:"⨒",rrarr:"⇉",Rrightarrow:"⇛",rsaquo:"›",Rscr:"ℛ",rscr:"𝓇",Rsh:"↱",rsh:"↱",rsqb:"]",rsquo:"’",rsquor:"’",rthree:"⋌",rtimes:"⋊",rtri:"▹",rtrie:"⊵",rtrif:"▸",rtriltri:"⧎",RuleDelayed:"⧴",ruluhar:"⥨",rx:"℞",Sacute:"Ś",sacute:"ś",sbquo:"‚",Sc:"⪼",sc:"≻",scap:"⪸",Scaron:"Š",scaron:"š",sccue:"≽",scE:"⪴",sce:"⪰",Scedil:"Ş",scedil:"ş",Scirc:"Ŝ",scirc:"ŝ",scnap:"⪺",scnE:"⪶",scnsim:"⋩",scpolint:"⨓",scsim:"≿",Scy:"С",scy:"с",sdot:"⋅",sdotb:"⊡",sdote:"⩦",searhk:"⤥",seArr:"⇘",searr:"↘",searrow:"↘",sect:"§",semi:";",seswar:"⤩",setminus:"∖",setmn:"∖",sext:"✶",Sfr:"𝔖",sfr:"𝔰",sfrown:"⌢",sharp:"♯",SHCHcy:"Щ",shchcy:"щ",SHcy:"Ш",shcy:"ш",ShortDownArrow:"↓",ShortLeftArrow:"←",shortmid:"∣",shortparallel:"∥",ShortRightArrow:"→",ShortUpArrow:"↑",shy:"­",Sigma:"Σ",sigma:"σ",sigmaf:"ς",sigmav:"ς",sim:"∼",simdot:"⩪",sime:"≃",simeq:"≃",simg:"⪞",simgE:"⪠",siml:"⪝",simlE:"⪟",simne:"≆",simplus:"⨤",simrarr:"⥲",slarr:"←",SmallCircle:"∘",smallsetminus:"∖",smashp:"⨳",smeparsl:"⧤",smid:"∣",smile:"⌣",smt:"⪪",smte:"⪬",smtes:"⪬︀",SOFTcy:"Ь",softcy:"ь",sol:"/",solb:"⧄",solbar:"⌿",Sopf:"𝕊",sopf:"𝕤",spades:"♠",spadesuit:"♠",spar:"∥",sqcap:"⊓",sqcaps:"⊓︀",sqcup:"⊔",sqcups:"⊔︀",Sqrt:"√",sqsub:"⊏",sqsube:"⊑",sqsubset:"⊏",sqsubseteq:"⊑",sqsup:"⊐",sqsupe:"⊒",sqsupset:"⊐",sqsupseteq:"⊒",squ:"□",Square:"□",square:"□",SquareIntersection:"⊓",SquareSubset:"⊏",SquareSubsetEqual:"⊑",SquareSuperset:"⊐",SquareSupersetEqual:"⊒",SquareUnion:"⊔",squarf:"▪",squf:"▪",srarr:"→",Sscr:"𝒮",sscr:"𝓈",ssetmn:"∖",ssmile:"⌣",sstarf:"⋆",Star:"⋆",star:"☆",starf:"★",straightepsilon:"ϵ",straightphi:"ϕ",strns:"¯",Sub:"⋐",sub:"⊂",subdot:"⪽",subE:"⫅",sube:"⊆",subedot:"⫃",submult:"⫁",subnE:"⫋",subne:"⊊",subplus:"⪿",subrarr:"⥹",Subset:"⋐",subset:"⊂",subseteq:"⊆",subseteqq:"⫅",SubsetEqual:"⊆",subsetneq:"⊊",subsetneqq:"⫋",subsim:"⫇",subsub:"⫕",subsup:"⫓",succ:"≻",succapprox:"⪸",succcurlyeq:"≽",Succeeds:"≻",SucceedsEqual:"⪰",SucceedsSlantEqual:"≽",SucceedsTilde:"≿",succeq:"⪰",succnapprox:"⪺",succneqq:"⪶",succnsim:"⋩",succsim:"≿",SuchThat:"∋",Sum:"∑",sum:"∑",sung:"♪",Sup:"⋑",sup:"⊃",sup1:"¹",sup2:"²",sup3:"³",supdot:"⪾",supdsub:"⫘",supE:"⫆",supe:"⊇",supedot:"⫄",Superset:"⊃",SupersetEqual:"⊇",suphsol:"⟉",suphsub:"⫗",suplarr:"⥻",supmult:"⫂",supnE:"⫌",supne:"⊋",supplus:"⫀",Supset:"⋑",supset:"⊃",supseteq:"⊇",supseteqq:"⫆",supsetneq:"⊋",supsetneqq:"⫌",supsim:"⫈",supsub:"⫔",supsup:"⫖",swarhk:"⤦",swArr:"⇙",swarr:"↙",swarrow:"↙",swnwar:"⤪",szlig:"ß",Tab:"\t",target:"⌖",Tau:"Τ",tau:"τ",tbrk:"⎴",Tcaron:"Ť",tcaron:"ť",Tcedil:"Ţ",tcedil:"ţ",Tcy:"Т",tcy:"т",tdot:"⃛",telrec:"⌕",Tfr:"𝔗",tfr:"𝔱",there4:"∴",Therefore:"∴",therefore:"∴",Theta:"Θ",theta:"θ",thetasym:"ϑ",thetav:"ϑ",thickapprox:"≈",thicksim:"∼",ThickSpace:"  ",thinsp:" ",ThinSpace:" ",thkap:"≈",thksim:"∼",THORN:"Þ",thorn:"þ",Tilde:"∼",tilde:"˜",TildeEqual:"≃",TildeFullEqual:"≅",TildeTilde:"≈",times:"×",timesb:"⊠",timesbar:"⨱",timesd:"⨰",tint:"∭",toea:"⤨",top:"⊤",topbot:"⌶",topcir:"⫱",Topf:"𝕋",topf:"𝕥",topfork:"⫚",tosa:"⤩",tprime:"‴",TRADE:"™",trade:"™",triangle:"▵",triangledown:"▿",triangleleft:"◃",trianglelefteq:"⊴",triangleq:"≜",triangleright:"▹",trianglerighteq:"⊵",tridot:"◬",trie:"≜",triminus:"⨺",TripleDot:"⃛",triplus:"⨹",trisb:"⧍",tritime:"⨻",trpezium:"⏢",Tscr:"𝒯",tscr:"𝓉",TScy:"Ц",tscy:"ц",TSHcy:"Ћ",tshcy:"ћ",Tstrok:"Ŧ",tstrok:"ŧ",twixt:"≬",twoheadleftarrow:"↞",twoheadrightarrow:"↠",Uacute:"Ú",uacute:"ú",Uarr:"↟",uArr:"⇑",uarr:"↑",Uarrocir:"⥉",Ubrcy:"Ў",ubrcy:"ў",Ubreve:"Ŭ",ubreve:"ŭ",Ucirc:"Û",ucirc:"û",Ucy:"У",ucy:"у",udarr:"⇅",Udblac:"Ű",udblac:"ű",udhar:"⥮",ufisht:"⥾",Ufr:"𝔘",ufr:"𝔲",Ugrave:"Ù",ugrave:"ù",uHar:"⥣",uharl:"↿",uharr:"↾",uhblk:"▀",ulcorn:"⌜",ulcorner:"⌜",ulcrop:"⌏",ultri:"◸",Umacr:"Ū",umacr:"ū",uml:"¨",UnderBar:"_",UnderBrace:"⏟",UnderBracket:"⎵",UnderParenthesis:"⏝",Union:"⋃",UnionPlus:"⊎",Uogon:"Ų",uogon:"ų",Uopf:"𝕌",uopf:"𝕦",UpArrow:"↑",Uparrow:"⇑",uparrow:"↑",UpArrowBar:"⤒",UpArrowDownArrow:"⇅",UpDownArrow:"↕",Updownarrow:"⇕",updownarrow:"↕",UpEquilibrium:"⥮",upharpoonleft:"↿",upharpoonright:"↾",uplus:"⊎",UpperLeftArrow:"↖",UpperRightArrow:"↗",Upsi:"ϒ",upsi:"υ",upsih:"ϒ",Upsilon:"Υ",upsilon:"υ",UpTee:"⊥",UpTeeArrow:"↥",upuparrows:"⇈",urcorn:"⌝",urcorner:"⌝",urcrop:"⌎",Uring:"Ů",uring:"ů",urtri:"◹",Uscr:"𝒰",uscr:"𝓊",utdot:"⋰",Utilde:"Ũ",utilde:"ũ",utri:"▵",utrif:"▴",uuarr:"⇈",Uuml:"Ü",uuml:"ü",uwangle:"⦧",vangrt:"⦜",varepsilon:"ϵ",varkappa:"ϰ",varnothing:"∅",varphi:"ϕ",varpi:"ϖ",varpropto:"∝",vArr:"⇕",varr:"↕",varrho:"ϱ",varsigma:"ς",varsubsetneq:"⊊︀",varsubsetneqq:"⫋︀",varsupsetneq:"⊋︀",varsupsetneqq:"⫌︀",vartheta:"ϑ",vartriangleleft:"⊲",vartriangleright:"⊳",Vbar:"⫫",vBar:"⫨",vBarv:"⫩",Vcy:"В",vcy:"в",VDash:"⊫",Vdash:"⊩",vDash:"⊨",vdash:"⊢",Vdashl:"⫦",Vee:"⋁",vee:"∨",veebar:"⊻",veeeq:"≚",vellip:"⋮",Verbar:"‖",verbar:"|",Vert:"‖",vert:"|",VerticalBar:"∣",VerticalLine:"|",VerticalSeparator:"❘",VerticalTilde:"≀",VeryThinSpace:" ",Vfr:"𝔙",vfr:"𝔳",vltri:"⊲",vnsub:"⊂⃒",vnsup:"⊃⃒",Vopf:"𝕍",vopf:"𝕧",vprop:"∝",vrtri:"⊳",Vscr:"𝒱",vscr:"𝓋",vsubnE:"⫋︀",vsubne:"⊊︀",vsupnE:"⫌︀",vsupne:"⊋︀",Vvdash:"⊪",vzigzag:"⦚",Wcirc:"Ŵ",wcirc:"ŵ",wedbar:"⩟",Wedge:"⋀",wedge:"∧",wedgeq:"≙",weierp:"℘",Wfr:"𝔚",wfr:"𝔴",Wopf:"𝕎",wopf:"𝕨",wp:"℘",wr:"≀",wreath:"≀",Wscr:"𝒲",wscr:"𝓌",xcap:"⋂",xcirc:"◯",xcup:"⋃",xdtri:"▽",Xfr:"𝔛",xfr:"𝔵",xhArr:"⟺",xharr:"⟷",Xi:"Ξ",xi:"ξ",xlArr:"⟸",xlarr:"⟵",xmap:"⟼",xnis:"⋻",xodot:"⨀",Xopf:"𝕏",xopf:"𝕩",xoplus:"⨁",xotime:"⨂",xrArr:"⟹",xrarr:"⟶",Xscr:"𝒳",xscr:"𝓍",xsqcup:"⨆",xuplus:"⨄",xutri:"△",xvee:"⋁",xwedge:"⋀",Yacute:"Ý",yacute:"ý",YAcy:"Я",yacy:"я",Ycirc:"Ŷ",ycirc:"ŷ",Ycy:"Ы",ycy:"ы",yen:"¥",Yfr:"𝔜",yfr:"𝔶",YIcy:"Ї",yicy:"ї",Yopf:"𝕐",yopf:"𝕪",Yscr:"𝒴",yscr:"𝓎",YUcy:"Ю",yucy:"ю",Yuml:"Ÿ",yuml:"ÿ",Zacute:"Ź",zacute:"ź",Zcaron:"Ž",zcaron:"ž",Zcy:"З",zcy:"з",Zdot:"Ż",zdot:"ż",zeetrf:"ℨ",ZeroWidthSpace:"​",Zeta:"Ζ",zeta:"ζ",Zfr:"ℨ",zfr:"𝔷",ZHcy:"Ж",zhcy:"ж",zigrarr:"⇝",Zopf:"ℤ",zopf:"𝕫",Zscr:"𝒵",zscr:"𝓏",zwj:"‍",zwnj:"‌"}),t.entityMap=t.HTML_ENTITIES}),ka=(Ca.XML_ENTITIES,Ca.HTML_ENTITIES,Ca.entityMap,An.NAMESPACE),fr=/[A-Z_a-z\xC0-\xD6\xD8-\xF6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]/,gr=new RegExp("[\\-\\.0-9"+fr.source.slice(1,-1)+"\\u00B7\\u0300-\\u036F\\u203F-\\u2040]"),Ia=new RegExp("^"+fr.source+gr.source+"*(?::"+fr.source+gr.source+"*)?$"),xa=0,Aa=1,Da=2,Pa=3,La=4,Oa=5,Ra=6,Na=7;function Ma(e,t){this.message=e,this.locator=t,Error.captureStackTrace&&Error.captureStackTrace(this,Ma)}function Ua(){}function Ba(e,t){return t.lineNumber=e.lineNumber,t.columnNumber=e.columnNumber,t}function Fa(e,t,i){for(var s=e.tagName,r=null,n=e.length;n--;){var a=e[n],o=a.qName,l=a.value,o=0<(h=o.indexOf(":"))?(d=a.prefix=o.slice(0,h),u=o.slice(h+1),"xmlns"===d&&u):(d=null,"xmlns"===(u=o)&&"");a.localName=u,!1!==o&&(null==r&&(r={},qa(i,i={})),i[o]=r[o]=l,a.uri=ka.XMLNS,t.startPrefixMapping(o,l))}for(var d,n=e.length;n--;)(d=(a=e[n]).prefix)&&("xml"===d&&(a.uri=ka.XML),"xmlns"!==d)&&(a.uri=i[d||""]);var h,u=0<(h=s.indexOf(":"))?(d=e.prefix=s.slice(0,h),e.localName=s.slice(h+1)):(d=null,e.localName=s),c=e.uri=i[d||""];if(t.startElement(c,u,s,e),!e.closed)return e.currentNSMap=i,e.localNSMap=r,1;if(t.endElement(c,u,s),r)for(d in r)Object.prototype.hasOwnProperty.call(r,d)&&t.endPrefixMapping(d)}function qa(e,t){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}function ja(){this.attributeNames={}}(Ma.prototype=new Error).name=Ma.name,Ua.prototype={parse:function(e,t,i){var s=this.domBuilder;s.startDocument(),qa(t,t={}),function(i,e,s,r,n){function a(e){var t=e.slice(1,-1);return Object.hasOwnProperty.call(s,t)?s[t]:"#"===t.charAt(0)?65535<(t=parseInt(t.substr(1).replace("x","0x")))?(t-=65536,String.fromCharCode(55296+(t>>10),56320+(1023&t))):String.fromCharCode(t):(n.error("entity not found:"+e),e)}function t(e){var t;m<e&&(t=i.substring(m,e).replace(/&#?\w+;/g,a),u&&o(m),r.characters(t,0,e-m),m=e)}function o(e,t){for(;d<=e&&(t=h.exec(i));)l=t.index,d=l+t[0].length,u.lineNumber++;u.columnNumber=e-l+1}var l=0,d=0,h=/.*(?:\r\n?|\n)|.*$/g,u=r.locator,c=[{currentNSMap:e}],p={},m=0;for(;;){try{var g,f,y=i.indexOf("<",m);if(y<0)return i.substr(m).match(/^\s*$/)||(g=r.doc,f=g.createTextNode(i.substr(m)),g.appendChild(f),r.currentElement=f);switch(m<y&&t(y),i.charAt(y+1)){case"/":var _=i.indexOf(">",y+3),v=i.substring(y+2,_).replace(/[ \t\n\r]+$/g,""),b=c.pop(),T=(_<0?(v=i.substring(y+2).replace(/[\s<].*/,""),n.error("end tag name: "+v+" is not complete:"+b.tagName),_=y+1+v.length):v.match(/\s</)&&(v=v.replace(/[\s<].*/,""),n.error("end tag name: "+v+" maybe not complete"),_=y+1+v.length),b.localNSMap),S=b.tagName==v;if(S||b.tagName&&b.tagName.toLowerCase()==v.toLowerCase()){if(r.endElement(b.uri,b.localName,v),T)for(var w in T)Object.prototype.hasOwnProperty.call(T,w)&&r.endPrefixMapping(w);S||n.fatalError("end tag name: "+v+" is not match the current start tagName:"+b.tagName)}else c.push(b);_++;break;case"?":u&&o(y),_=function(e,t,i){var s=e.indexOf("?>",t);if(s){e=e.substring(t,s).match(/^<\?(\S*)\s*([\s\S]*?)\s*$/);if(e)return e[0].length,i.processingInstruction(e[1],e[2]),s+2}return-1}(i,y,r);break;case"!":u&&o(y),_=function(e,t,i,s){{if("-"===e.charAt(t+2))return"-"===e.charAt(t+3)?(n=e.indexOf("--\x3e",t+4),t<n?(i.comment(e,t+4,n-t-4),n+3):(s.error("Unclosed comment"),-1)):-1;if("CDATA["==e.substr(t+3,6))return n=e.indexOf("]]>",t+9),i.startCDATA(),i.characters(e,t+9,n-t-9),i.endCDATA(),n+3;var r,s=function(e,t){var i,s=[],r=/'[^']+'|"[^"]+"|[^\s<>\/=]+=?|(\/?\s*>|<)/g;r.lastIndex=t,r.exec(e);for(;i=r.exec(e);)if(s.push(i),i[1])return s}(e,t),n=s.length;if(1<n&&/!doctype/i.test(s[0][0]))return e=s[1][0],r=t=!1,3<n&&(/^public$/i.test(s[2][0])?(t=s[3][0],r=4<n&&s[4][0]):/^system$/i.test(s[2][0])&&(r=s[3][0])),s=s[n-1],i.startDTD(e,t,r),i.endDTD(),s.index+s[0].length}return-1}(i,y,r,n);break;default:u&&o(y);var E=new ja,C=c[c.length-1].currentNSMap,_=function(e,t,s,i,r,n){function a(e,t,i){s.attributeNames.hasOwnProperty(e)&&n.fatalError("Attribute "+e+" redefined"),s.addValue(e,t.replace(/[\t\n\r]/g," ").replace(/&#?\w+;/g,r),i)}var o,l=++t,d=xa;for(;;){var h=e.charAt(l);switch(h){case"=":if(d===Aa)o=e.slice(t,l);else if(d!==Da)throw new Error("attribute equal must after attrName");d=Pa;break;case"'":case'"':if(d===Pa||d===Aa){if(d===Aa&&(n.warning('attribute value must after "="'),o=e.slice(t,l)),t=l+1,!(0<(l=e.indexOf(h,t))))throw new Error("attribute value no end '"+h+"' match");u=e.slice(t,l),a(o,u,t-1)}else{if(d!=La)throw new Error('attribute value must after "="');u=e.slice(t,l),a(o,u,t),n.warning('attribute "'+o+'" missed start quot('+h+")!!"),t=l+1}d=Oa;break;case"/":switch(d){case xa:s.setTagName(e.slice(t,l));case Oa:case Ra:case Na:d=Na,s.closed=!0;case La:case Aa:break;case Da:s.closed=!0;break;default:throw new Error("attribute invalid close char('/')")}break;case"":return n.error("unexpected end of input"),d==xa&&s.setTagName(e.slice(t,l)),l;case">":switch(d){case xa:s.setTagName(e.slice(t,l));case Oa:case Ra:case Na:break;case La:case Aa:"/"===(u=e.slice(t,l)).slice(-1)&&(s.closed=!0,u=u.slice(0,-1));case Da:d===Da&&(u=o),d==La?(n.warning('attribute "'+u+'" missed quot(")!'),a(o,u,t)):(ka.isHTML(i[""])&&u.match(/^(?:disabled|checked|selected)$/i)||n.warning('attribute "'+u+'" missed value!! "'+u+'" instead!!'),a(u,u,t));break;case Pa:throw new Error("attribute value missed!!")}return l;case"€":h=" ";default:if(h<=" ")switch(d){case xa:s.setTagName(e.slice(t,l)),d=Ra;break;case Aa:o=e.slice(t,l),d=Da;break;case La:var u=e.slice(t,l);n.warning('attribute "'+u+'" missed quot(")!!'),a(o,u,t);case Oa:d=Ra}else switch(d){case Da:s.tagName,ka.isHTML(i[""])&&o.match(/^(?:disabled|checked|selected)$/i)||n.warning('attribute "'+o+'" missed value!! "'+o+'" instead2!!'),a(o,o,t),t=l,d=Aa;break;case Oa:n.warning('attribute space is required"'+o+'"!!');case Ra:d=Aa,t=l;break;case Pa:d=La,t=l;break;case Na:throw new Error("elements closed character '/' and '>' must be connected to")}}l++}}(i,y,E,C,a,n),k=E.length;if(!E.closed&&function(e,t,i,s){var r=s[i];null==r&&((r=e.lastIndexOf("</"+i+">"))<t&&(r=e.lastIndexOf("</"+i)),s[i]=r);return r<t}(i,_,E.tagName,p)&&(E.closed=!0,s.nbsp||n.warning("unclosed xml attribute")),u&&k){for(var I=Ba(u,{}),x=0;x<k;x++){var A=E[x];o(A.offset),A.locator=Ba(u,{})}r.locator=I,Fa(E,r,C)&&c.push(E),r.locator=u}else Fa(E,r,C)&&c.push(E);ka.isHTML(E.uri)&&!E.closed?_=function(e,t,i,s,r){if(/^(?:script|textarea)$/i.test(i)){var n=e.indexOf("</"+i+">",t),e=e.substring(t+1,n);if(/[&<]/.test(e))return/^script$/i.test(i)?r.characters(e,0,e.length):(e=e.replace(/&#?\w+;/g,s),r.characters(e,0,e.length)),n}return t+1}(i,_,E.tagName,a,r):_++}}catch(e){if(e instanceof Ma)throw e;n.error("element parse error: "+e),_=-1}m<_?m=_:t(Math.max(y,m)+1)}}(e,t,i,s,this.errorHandler),s.endDocument()}},ja.prototype={setTagName:function(e){if(!Ia.test(e))throw new Error("invalid tagName:"+e);this.tagName=e},addValue:function(e,t,i){if(!Ia.test(e))throw new Error("invalid attribute:"+e);this.attributeNames[e]=this.length,this[this.length++]={qName:e,value:t,offset:i}},length:0,getLocalName:function(e){return this[e].localName},getLocator:function(e){return this[e].locator},getQName:function(e){return this[e].qName},getURI:function(e){return this[e].uri},getValue:function(e){return this[e].value}};var mr={XMLReader:Ua,ParseError:Ma},Ha=hr.DOMImplementation,Va=An.NAMESPACE,$a=mr.ParseError,za=mr.XMLReader;function Wa(e){return e.replace(/\r[\n\u0085]/g,"\n").replace(/[\r\u0085\u2028]/g,"\n")}function Ga(e){this.options=e||{locator:{}}}function Xa(){this.cdata=!1}function Ka(e,t){t.lineNumber=e.lineNumber,t.columnNumber=e.columnNumber}function Ya(e){if(e)return"\n@"+(e.systemId||"")+"#[line:"+e.lineNumber+",col:"+e.columnNumber+"]"}function Qa(e,t,i){return"string"==typeof e?e.substr(t,i):e.length>=t+i||t?new java.lang.String(e,t,i)+"":e}function Ja(e,t){(e.currentElement||e.doc).appendChild(t)}Ga.prototype.parseFromString=function(e,t){var i=this.options,s=new za,r=i.domBuilder||new Xa,n=i.errorHandler,a=i.locator,o=i.xmlns||{},t=/\/x?html?$/.test(t),l=t?Ca.HTML_ENTITIES:Ca.XML_ENTITIES,n=(a&&r.setDocumentLocator(a),s.errorHandler=function(s,e,r){if(!s){if(e instanceof Xa)return e;s=e}var n={},a=s instanceof Function;function t(t){var i=s[t];!i&&a&&(i=2==s.length?function(e){s(t,e)}:s),n[t]=i?function(e){i("[xmldom "+t+"]\t"+e+Ya(r))}:function(){}}return r=r||{},t("warning"),t("error"),t("fatalError"),n}(n,r,a),s.domBuilder=i.domBuilder||r,t&&(o[""]=Va.HTML),o.xml=o.xml||Va.XML,i.normalizeLineEndings||Wa);return e&&"string"==typeof e?s.parse(n(e),o,l):s.errorHandler.error("invalid doc source"),r.doc},Xa.prototype={startDocument:function(){this.doc=(new Ha).createDocument(null,null,null),this.locator&&(this.doc.documentURI=this.locator.systemId)},startElement:function(e,t,i,s){var r=this.doc,n=r.createElementNS(e,i||t),a=s.length;Ja(this,n),this.currentElement=n,this.locator&&Ka(this.locator,n);for(var o=0;o<a;o++){var e=s.getURI(o),l=s.getValue(o),i=s.getQName(o),d=r.createAttributeNS(e,i);this.locator&&Ka(s.getLocator(o),d),d.value=d.nodeValue=l,n.setAttributeNode(d)}},endElement:function(e,t,i){var s=this.currentElement;s.tagName,this.currentElement=s.parentNode},startPrefixMapping:function(e,t){},endPrefixMapping:function(e){},processingInstruction:function(e,t){e=this.doc.createProcessingInstruction(e,t);this.locator&&Ka(this.locator,e),Ja(this,e)},ignorableWhitespace:function(e,t,i){},characters:function(e,t,i){var s;(e=Qa.apply(this,arguments))&&(s=this.cdata?this.doc.createCDATASection(e):this.doc.createTextNode(e),this.currentElement?this.currentElement.appendChild(s):/^\s*$/.test(e)&&this.doc.appendChild(s),this.locator)&&Ka(this.locator,s)},skippedEntity:function(e){},endDocument:function(){this.doc.normalize()},setDocumentLocator:function(e){(this.locator=e)&&(e.lineNumber=0)},comment:function(e,t,i){e=Qa.apply(this,arguments);e=this.doc.createComment(e);this.locator&&Ka(this.locator,e),Ja(this,e)},startCDATA:function(){this.cdata=!0},endCDATA:function(){this.cdata=!1},startDTD:function(e,t,i){var s=this.doc.implementation;s&&s.createDocumentType&&(s=s.createDocumentType(e,t,i),this.locator&&Ka(this.locator,s),Ja(this,s),this.doc.doctype=s)},warning:function(e){},error:function(e){},fatalError:function(e){throw new $a(e,this.locator)}},"endDTD,startEntity,endEntity,attributeDecl,elementDecl,externalEntityDecl,internalEntityDecl,resolveEntity,getExternalSubset,notationDecl,unparsedEntityDecl".replace(/\w+/g,function(e){Xa.prototype[e]=function(){return null}});var Za={__DOMHandler:Xa,normalizeLineEndings:Wa,DOMParser:Ga}.DOMParser;
+/*! @name mpd-parser @version 1.3.0 @license Apache-2.0 */
+const eo=e=>!!e&&"object"==typeof e,x=(...e)=>e.reduce((t,i)=>("object"==typeof i&&Object.keys(i).forEach(e=>{Array.isArray(t[e])&&Array.isArray(i[e])?t[e]=t[e].concat(i[e]):eo(t[e])&&eo(i[e])?t[e]=x(t[e],i[e]):t[e]=i[e]}),t),{}),to=t=>Object.keys(t).map(e=>t[e]),io=e=>e.reduce((e,t)=>e.concat(t),[]),so=t=>{if(!t.length)return[];var i=[];for(let e=0;e<t.length;e++)i.push(t[e]);return i};var ro={INVALID_NUMBER_OF_PERIOD:"INVALID_NUMBER_OF_PERIOD",INVALID_NUMBER_OF_CONTENT_STEERING:"INVALID_NUMBER_OF_CONTENT_STEERING",DASH_EMPTY_MANIFEST:"DASH_EMPTY_MANIFEST",DASH_INVALID_XML:"DASH_INVALID_XML",NO_BASE_URL:"NO_BASE_URL",MISSING_SEGMENT_INFORMATION:"MISSING_SEGMENT_INFORMATION",SEGMENT_TIME_UNSPECIFIED:"SEGMENT_TIME_UNSPECIFIED",UNSUPPORTED_UTC_TIMING_SCHEME:"UNSUPPORTED_UTC_TIMING_SCHEME"};const no=({baseUrl:s="",source:r="",range:n="",indexRange:a=""})=>{s={uri:r,resolvedUri:Xr(s||"",r)};if(n||a){r=(n||a).split("-");let e=window.BigInt?window.BigInt(r[0]):parseInt(r[0],10),t=window.BigInt?window.BigInt(r[1]):parseInt(r[1],10);e<Number.MAX_SAFE_INTEGER&&"bigint"==typeof e&&(e=Number(e)),t<Number.MAX_SAFE_INTEGER&&"bigint"==typeof t&&(t=Number(t));let i;"bigint"==typeof(i="bigint"==typeof t||"bigint"==typeof e?window.BigInt(t)-window.BigInt(e)+window.BigInt(1):t-e+1)&&i<Number.MAX_SAFE_INTEGER&&(i=Number(i)),s.byterange={length:i,offset:e}}return s},ao=e=>(e&&"number"!=typeof e&&(e=parseInt(e,10)),isNaN(e)?null:e),oo={static(e){var{duration:t,timescale:i=1,sourceDuration:s,periodDuration:r}=e,e=ao(e.endNumber),t=t/i;return"number"==typeof e?{start:0,end:e}:"number"==typeof r?{start:0,end:r/t}:{start:0,end:s/t}},dynamic(e){var{NOW:t,clientOffset:i,availabilityStartTime:s,timescale:r=1,duration:n,periodStart:a=0,minimumUpdatePeriod:o=0,timeShiftBufferDepth:l=1/0}=e,e=ao(e.endNumber),t=(t+i)/1e3,i=s+a,s=Math.ceil((t+o-i)*r/n),a=Math.floor((t-i-l)*r/n),o=Math.floor((t-i)*r/n);return{start:Math.max(0,a),end:"number"==typeof e?e:Math.min(s,o)}}},lo=e=>{var n,{type:t,duration:i,timescale:s=1,periodDuration:r,sourceDuration:a}=e,{start:o,end:l}=oo[t](e),o=((t,i)=>{var s=[];for(let e=t;e<i;e++)s.push(e);return s})(o,l).map((n=e,e=>{var{duration:t,timescale:i=1,periodStart:s,startNumber:r=1}=n;return{number:r+e,duration:t/i,timeline:s,time:e*t}}));return"static"===t&&(o[l=o.length-1].duration=("number"==typeof r?r:a)-i/s*l),o},ho=e=>{var{baseUrl:t,initialization:i={},sourceDuration:s,indexRange:r="",periodStart:n,presentationTime:a,number:o=0,duration:l}=e;if(t)return i=no({baseUrl:t,source:i.sourceURL,range:i.range}),(t=no({baseUrl:t,source:t,indexRange:r})).map=i,l?(r=lo(e)).length&&(t.duration=r[0].duration,t.timeline=r[0].timeline):s&&(t.duration=s,t.timeline=n),t.presentationTime=a||n,t.number=o,[t];throw new Error(ro.NO_BASE_URL)},uo=(e,i,s)=>{var r=e.sidx.map||null,n=e.sidx.duration,a=e.timeline||0,t=e.sidx.byterange,t=t.offset+t.length,o=i.timescale,l=i.references.filter(e=>1!==e.referenceType),d=[],h=e.endList?"static":"dynamic",u=e.sidx.timeline;let c=u,p=e.mediaSequence||0,m;m="bigint"==typeof i.firstOffset?window.BigInt(t)+i.firstOffset:t+i.firstOffset;for(let t=0;t<l.length;t++){var g=i.references[t],f=g.referencedSize,g=g.subsegmentDuration;let e;e="bigint"==typeof m?m+window.BigInt(f)-window.BigInt(1):m+f-1;var y=m+"-"+e,y={baseUrl:s,timescale:o,timeline:a,periodStart:u,presentationTime:c,number:p,duration:g,sourceDuration:n,indexRange:y,type:h},y=ho(y)[0];r&&(y.map=r),d.push(y),"bigint"==typeof m?m+=window.BigInt(f):m+=f,c+=g/o,p++}return e.segments=d,e},co=["AUDIO","SUBTITLES"],po=e=>{return e=e,i=({timeline:e})=>e,to(e.reduce((t,e)=>(e.forEach(e=>{t[i(e)]=e}),t),{})).sort((e,t)=>e.timeline>t.timeline?1:-1);var i},mo=e=>{let r=[];var n,a;return n=e,e=co,a=(e,t,i,s)=>{r=r.concat(e.playlists||[])},e.forEach(function(e){for(var t in n.mediaGroups[e])for(var i in n.mediaGroups[e][t]){var s=n.mediaGroups[e][t][i];a(s,e,t,i)}}),r},go=({playlist:i,mediaSequence:e})=>{i.mediaSequence=e,i.segments.forEach((e,t)=>{e.number=i.mediaSequence+t})},fo=({oldManifest:e,newManifest:t})=>{var r,n,i=e.playlists.concat(mo(e)),s=t.playlists.concat(mo(t));return t.timelineStarts=po([e.timelineStarts,t.timelineStarts]),{oldPlaylists:r,newPlaylists:e,timelineStarts:n}=[{oldPlaylists:i,newPlaylists:s,timelineStarts:t.timelineStarts}][0],e.forEach(t=>{t.discontinuitySequence=n.findIndex(function({timeline:e}){return e===t.timeline});var e=((t,i)=>{for(let e=0;e<t.length;e++)if(t[e].attributes.NAME===i)return t[e];return null})(r,t.attributes.NAME);if(e&&!t.sidx){const s=t.segments[0];var i=e.segments.findIndex(function(e){return Math.abs(e.presentationTime-s.presentationTime)<1/60});-1===i?(go({playlist:t,mediaSequence:e.mediaSequence+e.segments.length}),t.segments[0].discontinuity=!0,t.discontinuityStarts.unshift(0),(!e.segments.length&&t.timeline>e.timeline||e.segments.length&&t.timeline>e.segments[e.segments.length-1].timeline)&&t.discontinuitySequence--):(e.segments[i].discontinuity&&!s.discontinuity&&(s.discontinuity=!0,t.discontinuityStarts.unshift(0),t.discontinuitySequence--),go({playlist:t,mediaSequence:e.segments[i].number}))}}),t},yo=e=>e&&e.uri+"-"+(e=>{let t;return t="bigint"==typeof e.offset||"bigint"==typeof e.length?window.BigInt(e.offset)+window.BigInt(e.length)-window.BigInt(1):e.offset+e.length-1,e.offset+"-"+t})(e.byterange),_o=e=>{e=e.reduce(function(e,t){return e[t.attributes.baseUrl]||(e[t.attributes.baseUrl]=[]),e[t.attributes.baseUrl].push(t),e},{});let t=[];return Object.values(e).forEach(e=>{e=to(e.reduce((e,t)=>{var i=t.attributes.id+(t.attributes.lang||"");return e[i]?(t.segments&&(t.segments[0]&&(t.segments[0].discontinuity=!0),e[i].segments.push(...t.segments)),t.attributes.contentProtection&&(e[i].attributes.contentProtection=t.attributes.contentProtection)):(e[i]=t,e[i].attributes.timelineStarts=[]),e[i].attributes.timelineStarts.push({start:t.attributes.periodStart,timeline:t.attributes.periodStart}),e},{}));t=t.concat(e)}),t.map(e=>{var t,s;return e.discontinuityStarts=(t=e.segments||[],s="discontinuity",t.reduce((e,t,i)=>(t[s]&&e.push(i),e),[])),e})},vo=(e,t)=>{var i=yo(e.sidx),t=i&&t[i]&&t[i].sidx;return t&&uo(e,t,e.sidx.resolvedUri),e},bo=(e,o={})=>e.reduce((e,t)=>{var i,s,r,n,a=t.attributes.label||t.attributes.lang||"text";return e[a]||(e[a]={language:a,default:!1,autoselect:!1,playlists:[],uri:""}),e[a].playlists.push(vo(({attributes:a,segments:t,mediaSequence:i,discontinuityStarts:s,discontinuitySequence:r}=[t][0],"undefined"==typeof t&&(t=[{uri:a.baseUrl,timeline:a.periodStart,resolvedUri:a.baseUrl||"",duration:a.sourceDuration,number:0}],a.duration=a.sourceDuration),n={NAME:a.id,BANDWIDTH:a.bandwidth,"PROGRAM-ID":1},a.codecs&&(n.CODECS=a.codecs),n={attributes:n,uri:"",endList:"static"===a.type,timeline:a.periodStart,resolvedUri:a.baseUrl||"",targetDuration:a.duration,timelineStarts:a.timelineStarts,discontinuityStarts:s,discontinuitySequence:r,mediaSequence:i,segments:t},a.serviceLocation&&(n.attributes.serviceLocation=a.serviceLocation),n),o)),e},{}),To=({attributes:e,segments:t,sidx:i,discontinuityStarts:s})=>{s={attributes:{NAME:e.id,AUDIO:"audio",SUBTITLES:"subs",RESOLUTION:{width:e.width,height:e.height},CODECS:e.codecs,BANDWIDTH:e.bandwidth,"PROGRAM-ID":1},uri:"",endList:"static"===e.type,timeline:e.periodStart,resolvedUri:e.baseUrl||"",targetDuration:e.duration,discontinuityStarts:s,timelineStarts:e.timelineStarts,segments:t};return e.frameRate&&(s.attributes["FRAME-RATE"]=e.frameRate),e.contentProtection&&(s.contentProtection=e.contentProtection),e.serviceLocation&&(s.attributes.serviceLocation=e.serviceLocation),i&&(s.sidx=i),s},So=({attributes:e})=>"video/mp4"===e.mimeType||"video/webm"===e.mimeType||"video"===e.contentType,wo=({attributes:e})=>"audio/mp4"===e.mimeType||"audio/webm"===e.mimeType||"audio"===e.contentType,Eo=({attributes:e})=>"text/vtt"===e.mimeType||"text"===e.contentType,Co=i=>i?Object.keys(i).reduce((e,t)=>{t=i[t];return e.concat(t.playlists)},[]):[],ko=({dashPlaylists:e,locations:t,contentSteering:i,sidxMapping:s={},previousManifest:r,eventStream:n})=>{var a,o,l,d,h,u,c,p;return e.length?({sourceDuration:d,type:u,suggestedPresentationDelay:c,minimumUpdatePeriod:h}=e[0].attributes,a=_o(e.filter(So)).map(To),o=_o(e.filter(wo)),l=_o(e.filter(Eo)),e=e.map(e=>e.attributes.captionServices).filter(Boolean),d={allowCache:!0,discontinuityStarts:[],segments:[],endList:!0,mediaGroups:{AUDIO:{},VIDEO:{},"CLOSED-CAPTIONS":{},SUBTITLES:{}},uri:"",duration:d,playlists:((e,t={})=>{if(Object.keys(t).length)for(const i in e)e[i]=vo(e[i],t);return e})(a,s)},0<=h&&(d.minimumUpdatePeriod=1e3*h),t&&(d.locations=t),i&&(d.contentSteering=i),"dynamic"===u&&(d.suggestedPresentationDelay=c),n&&0<n.length&&(d.eventStream=n),h=0===d.playlists.length,t=o.length?((e,n={},a)=>{let o;e=e.reduce((e,t)=>{var i=t.attributes.role&&t.attributes.role.value||"",s=t.attributes.lang||"";let r=t.attributes.label||"main";e[r=s&&!t.attributes.label?t.attributes.lang+(i?` (${i})`:""):r]||(e[r]={language:s,autoselect:!0,default:"main"===i,playlists:[],uri:""});s=vo((({attributes:e,segments:t,sidx:i,mediaSequence:s,discontinuitySequence:r,discontinuityStarts:n},a)=>{r={attributes:{NAME:e.id,BANDWIDTH:e.bandwidth,CODECS:e.codecs,"PROGRAM-ID":1},uri:"",endList:"static"===e.type,timeline:e.periodStart,resolvedUri:e.baseUrl||"",targetDuration:e.duration,discontinuitySequence:r,discontinuityStarts:n,timelineStarts:e.timelineStarts,mediaSequence:s,segments:t};return e.contentProtection&&(r.contentProtection=e.contentProtection),e.serviceLocation&&(r.attributes.serviceLocation=e.serviceLocation),i&&(r.sidx=i),a&&(r.attributes.AUDIO="audio",r.attributes.SUBTITLES="subs"),r})(t,a),n);return e[r].playlists.push(s),"undefined"==typeof o&&"main"===i&&((o=t).default=!0),e},{});return o||(e[Object.keys(e)[0]].default=!0),e})(o,s,h):null,i=l.length?bo(l,s):null,c=(u=a.concat(Co(t),Co(i))).map(({timelineStarts:e})=>e),d.timelineStarts=po(c),p=d.timelineStarts,u.forEach(t=>{t.mediaSequence=0,t.discontinuitySequence=p.findIndex(function({timeline:e}){return e===t.timeline}),t.segments&&t.segments.forEach((e,t)=>{e.number=t})}),t&&(d.mediaGroups.AUDIO.audio=t),i&&(d.mediaGroups.SUBTITLES.subs=i),e.length&&(d.mediaGroups["CLOSED-CAPTIONS"].cc=e.reduce((s,e)=>(e&&e.forEach(e=>{var{channel:t,language:i}=e;s[i]={autoselect:!1,default:!1,instreamId:t,language:i},e.hasOwnProperty("aspectRatio")&&(s[i].aspectRatio=e.aspectRatio),e.hasOwnProperty("easyReader")&&(s[i].easyReader=e.easyReader),e.hasOwnProperty("3D")&&(s[i]["3D"]=e["3D"])}),s),{})),r?fo({oldManifest:r,newManifest:d}):d):{}},Io=(s,r)=>{var{type:n,minimumUpdatePeriod:a=0,media:o="",sourceDuration:l,timescale:d=1,startNumber:h=1,periodStart:u}=s,c=[];let p=-1;for(let i=0;i<r.length;i++){var m=r[i],g=m.d,f=m.r||0,m=m.t||0;p<0&&(p=m),m&&m>p&&(p=m);let e;e=f<0?(m=i+1)===r.length?"dynamic"===n&&0<a&&0<o.indexOf("$Number$")?((e,t,i)=>{var{NOW:e,clientOffset:s,availabilityStartTime:r,timescale:n=1,periodStart:a=0,minimumUpdatePeriod:o=0}=e;return Math.ceil((((e+s)/1e3+o-(r+a))*n-t)/i)})(s,p,g):(l*d-p)/g:(r[m].t-p)/g:f+1;var y=h+c.length+e;let t=h+c.length;for(;t<y;)c.push({number:t,duration:g/d,time:p,timeline:u}),p+=g,t++}return c},xo=/\$([A-z]*)(?:(%0)([0-9]+)d)?\$/g,Ao=(e,t)=>{return e.replace(xo,(r=t,(e,t,i,s)=>{return"$$"===e?"$":"undefined"==typeof r[t]?e:(e=""+r[t],"RepresentationID"===t||(s=i?parseInt(s,10):1)<=e.length?e:new Array(s-e.length+1).join("0")+e)}));var r},Do=(r,e)=>{const n={RepresentationID:r.id,Bandwidth:r.bandwidth||0};var{initialization:t={sourceURL:"",range:""}}=r;const a=no({baseUrl:r.baseUrl,source:Ao(t.sourceURL,n),range:t.range});return t=e,((e=r).duration||t?e.duration?lo(e):Io(e,t):[{number:e.startNumber||1,duration:e.sourceDuration,time:0,timeline:e.periodStart}]).map(e=>{n.Number=e.number,n.Time=e.time;var t=Ao(r.media||"",n),i=r.timescale||1,s=r.presentationTimeOffset||0,s=r.periodStart+(e.time-s)/i;return{uri:t,timeline:e.timeline,duration:e.duration,resolvedUri:Xr(r.baseUrl||"",t),map:a,number:e.number,presentationTime:s}})},Po=(r,e)=>{const{duration:t,segmentUrls:i=[],periodStart:n}=r;if(!t&&!e||t&&e)throw new Error(ro.SEGMENT_TIME_UNSPECIFIED);const a=i.map(e=>{var{baseUrl:t,initialization:i={}}=t=r,i=no({baseUrl:t,source:i.sourceURL,range:i.range});return(t=no({baseUrl:t,source:e.media,range:e.mediaRange})).map=i,t});let s;return t&&(s=lo(r)),(s=e?Io(r,e):s).map((e,t)=>{var i,s;if(a[t])return t=a[t],i=r.timescale||1,s=r.presentationTimeOffset||0,t.timeline=e.timeline,t.duration=e.duration,t.number=e.number,t.presentationTime=n+(e.time-s)/i,t}).filter(e=>e)},Lo=({attributes:e,segmentInfo:t})=>{let i,s;t.template?(s=Do,i=x(e,t.template)):t.base?(s=ho,i=x(e,t.base)):t.list&&(s=Po,i=x(e,t.list));var r,n,a,e={attributes:e};return s&&(r=s(i,t.segmentTimeline),i.duration?({duration:n,timescale:a=1}=i,i.duration=n/a):r.length?i.duration=r.reduce((e,t)=>Math.max(e,Math.ceil(t.duration)),0):i.duration=0,e.attributes=i,e.segments=r,t.base)&&i.indexRange&&(e.sidx=r[0],e.segments=[]),e},Oo=e=>e.map(Lo),A=(e,t)=>so(e.childNodes).filter(({tagName:e})=>e===t),Ro=e=>e.textContent.trim(),No=e=>{var t,i,s,r,n,e=/P(?:(\d*)Y)?(?:(\d*)M)?(?:(\d*)D)?(?:T(?:(\d*)H)?(?:(\d*)M)?(?:([\d.]*)S)?)?/.exec(e);return e?([e,t,i,s,r,n]=e.slice(1),31536e3*parseFloat(e||0)+2592e3*parseFloat(t||0)+86400*parseFloat(i||0)+3600*parseFloat(s||0)+60*parseFloat(r||0)+parseFloat(n||0)):0},Mo={mediaPresentationDuration(e){return No(e)},availabilityStartTime(e){return/^\d+-\d+-\d+T\d+:\d+:\d+(\.\d+)?$/.test(e=e)&&(e+="Z"),Date.parse(e)/1e3},minimumUpdatePeriod(e){return No(e)},suggestedPresentationDelay(e){return No(e)},type(e){return e},timeShiftBufferDepth(e){return No(e)},start(e){return No(e)},width(e){return parseInt(e,10)},height(e){return parseInt(e,10)},bandwidth(e){return parseInt(e,10)},frameRate(e){return parseFloat(e.split("/").reduce((e,t)=>e/t))},startNumber(e){return parseInt(e,10)},timescale(e){return parseInt(e,10)},presentationTimeOffset(e){return parseInt(e,10)},duration(e){var t=parseInt(e,10);return isNaN(t)?No(e):t},d(e){return parseInt(e,10)},t(e){return parseInt(e,10)},r(e){return parseInt(e,10)},presentationTime(e){return parseInt(e,10)},DEFAULT(e){return e}},D=e=>e&&e.attributes?so(e.attributes).reduce((e,t)=>{var i=Mo[t.name]||Mo.DEFAULT;return e[t.name]=i(t.value),e},{}):{},Uo={"urn:uuid:1077efec-c0b2-4d02-ace3-3c1e52e2fb4b":"org.w3.clearkey","urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed":"com.widevine.alpha","urn:uuid:9a04f079-9840-4286-ab92-e65be0885f95":"com.microsoft.playready","urn:uuid:f239e769-efa3-4850-9c16-a903c6932efb":"com.adobe.primetime","urn:mpeg:dash:mp4protection:2011":"mp4protection"},Bo=(e,t)=>t.length?io(e.map(function(s){return t.map(function(e){var t=Ro(e),i=Xr(s.baseUrl,t),e=x(D(e),{baseUrl:i});return i!==t&&!e.serviceLocation&&s.serviceLocation&&(e.serviceLocation=s.serviceLocation),e})})):e,Fo=e=>{var t=A(e,"SegmentTemplate")[0],i=A(e,"SegmentList")[0],s=i&&A(i,"SegmentURL").map(e=>x({tag:"SegmentURL"},D(e))),e=A(e,"SegmentBase")[0],r=i||t,r=r&&A(r,"SegmentTimeline")[0],n=i||e||t,n=n&&A(n,"Initialization")[0],t=t&&D(t);t&&n?t.initialization=n&&D(n):t&&t.initialization&&(t.initialization={sourceURL:t.initialization});const a={template:t,segmentTimeline:r&&A(r,"S").map(e=>D(e)),list:i&&x(D(i),{segmentUrls:s,initialization:D(n)}),base:e&&x(D(e),{initialization:D(n)})};return Object.keys(a).forEach(e=>{a[e]||delete a[e]}),a},qo=o=>io(A(o.node,"EventStream").map(e=>{const n=D(e),a=n.schemeIdUri;return A(e,"Event").map(e=>{var t=D(e),i=t.presentationTime||0,s=n.timescale||1,r=t.duration||0,i=i/s+o.attributes.start;return{schemeIdUri:a,value:n.value,id:t.id,start:i,end:i+r/s,messageData:Ro(e)||t.messageData,contentEncoding:n.contentEncoding,presentationTimeOffset:n.presentationTimeOffset||0}})})),jo=(l,d,h)=>e=>{var t=D(e),i=Bo(d,A(e,"BaseURL")),s=A(e,"Role")[0],s={role:D(s)};let r=x(l,t,s);var n,a,o,t=A(e,"Accessibility")[0],t="urn:scte:dash:cc:cea-608:2015"===(s=D(t)).schemeIdUri?("string"!=typeof s.value?[]:s.value.split(";")).map(e=>{let t,i;return i=e,/^CC\d=/.test(e)?[t,i]=e.split("="):/^CC\d$/.test(e)&&(t=e),{channel:t,language:i}}):"urn:scte:dash:cc:cea-708:2015"===s.schemeIdUri?("string"!=typeof s.value?[]:s.value.split(";")).map(e=>{const i={channel:void 0,language:void 0,aspectRatio:1,easyReader:0,"3D":0};var t,s;return/=/.test(e)?([t,s=""]=e.split("="),i.channel=t,i.language=e,s.split(",").forEach(e=>{var[e,t]=e.split(":");"lang"===e?i.language=t:"er"===e?i.easyReader=Number(t):"war"===e?i.aspectRatio=Number(t):"3D"===e&&(i["3D"]=Number(t))})):i.language=e,i.channel&&(i.channel="SERVICE"+i.channel),i}):void 0,s=(t&&(r=x(r,{captionServices:t})),A(e,"Label")[0]),s=(s&&s.childNodes.length&&(t=s.childNodes[0].nodeValue.trim(),r=x(r,{label:t})),A(e,"ContentProtection").reduce((e,t)=>{var i=D(t),s=(i.schemeIdUri&&(i.schemeIdUri=i.schemeIdUri.toLowerCase()),Uo[i.schemeIdUri]);return s&&(e[s]={attributes:i},i=A(t,"cenc:pssh")[0])&&(t=Ro(i),e[s].pssh=t&&Cn(t)),e},{})),t=(Object.keys(s).length&&(r=x(r,{contentProtection:s})),Fo(e)),s=A(e,"Representation"),e=x(h,t);return io(s.map((n=r,a=i,o=e,e=>{var t=A(e,"BaseURL"),t=Bo(a,t);const i=x(n,D(e)),s=Fo(e);return t.map(e=>({segmentInfo:x(o,s),attributes:x(i,e)}))})))},Ho=(e,t={})=>{var{manifestUri:t="",NOW:i=Date.now(),clientOffset:s=0,eventHandler:r=function(){}}=t,n=A(e,"Period");if(!n.length)throw new Error(ro.INVALID_NUMBER_OF_PERIOD);var a=A(e,"Location");const o=D(e);var l,d,t=Bo([{baseUrl:t}],A(e,"BaseURL")),e=A(e,"ContentSteering");o.type=o.type||"static",o.sourceDuration=o.mediaPresentationDuration||0,o.NOW=i,o.clientOffset=s,a.length&&(o.locations=a.map(Ro));const h=[];return n.forEach((e,t)=>{var i,s,r=D(e),t=h[t-1];r.start=({attributes:t,priorPeriodAttributes:i,mpdType:s}=[{attributes:r,priorPeriodAttributes:t?t.attributes:null,mpdType:o.type}][0],"number"==typeof t.start?t.start:i&&"number"==typeof i.start&&"number"==typeof i.duration?i.start+i.duration:i||"static"!==s?null:0),h.push({node:e,attributes:r})}),{locations:o.locations,contentSteeringInfo:(i=r,1<(s=e).length&&i({type:"warn",message:"The MPD manifest should contain no more than one ContentSteering tag"}),s.length?((i=x({serverURL:Ro(s[0])},D(s[0]))).queryBeforeStart="true"===i.queryBeforeStart,i):null),representationInfo:io(h.map((l=o,d=t,(e,t)=>{var i=Bo(d,A(e.node,"BaseURL")),s=x(l,{periodStart:e.attributes.start}),r=("number"==typeof e.attributes.duration&&(s.periodDuration=e.attributes.duration),A(e.node,"AdaptationSet")),e=Fo(e.node);return io(r.map(jo(s,i,e)))}))),eventStream:io(h.map(qo))}},Vo=e=>{if(""===e)throw new Error(ro.DASH_EMPTY_MANIFEST);var t,i=new Za;let s;try{t=i.parseFromString(e,"application/xml"),s=t&&"MPD"===t.documentElement.tagName?t.documentElement:null}catch(e){}if(!s||s&&0<s.getElementsByTagName("parsererror").length)throw new Error(ro.DASH_INVALID_XML);return s},$o=e=>{e=Vo(e);if(!(e=A(e,"UTCTiming")[0]))return null;var t=D(e);switch(t.schemeIdUri){case"urn:mpeg:dash:utc:http-head:2014":case"urn:mpeg:dash:utc:http-head:2012":t.method="HEAD";break;case"urn:mpeg:dash:utc:http-xsdate:2014":case"urn:mpeg:dash:utc:http-iso:2014":case"urn:mpeg:dash:utc:http-xsdate:2012":case"urn:mpeg:dash:utc:http-iso:2012":t.method="GET";break;case"urn:mpeg:dash:utc:direct:2014":case"urn:mpeg:dash:utc:direct:2012":t.method="DIRECT",t.value=Date.parse(t.value);break;default:throw new Error(ro.UNSUPPORTED_UTC_TIMING_SCHEME)}return t};function zo(e,t){var i,s,r;return void 0===t&&(t=0),(e=T(e)).length-t<10||!w(e,tl,{offset:t})?t:(t+=(void 0===(s=t)&&(s=0),r=(i=T(i=e))[s+5],i=i[s+6]<<21|i[s+7]<<14|i[s+8]<<7|i[s+9],(16&r)>>4?20+i:10+i),zo(e,t))}function Wo(e){return"string"==typeof e?cn(e):e}function Go(e,t,i){void 0===i&&(i=!1),s=t,t=Array.isArray(s)?s.map(Wo):[Wo(s)],e=T(e);var s,r=[];if(t.length)for(var n=0;n<e.length;){var a=(e[n]<<24|e[n+1]<<16|e[n+2]<<8|e[n+3])>>>0,o=e.subarray(n+4,n+8);if(0==a)break;a=n+a;if(a>e.length){if(i)break;a=e.length}var l=e.subarray(n+8,a);w(o,t[0])&&(1===t.length?r.push(l):r.push.apply(r,Go(l,t.slice(1),i))),n=a}return r}function Xo(e,t,i){var s;return i>=t.length?t.length:(s=nl(t,i,!1),w(e.bytes,s.bytes)?i:Xo(e,t,i+(e=nl(t,i+s.length)).length+e.value+s.length))}function Ko(e,t){i=t,t=Array.isArray(i)?i.map(function(e){return al(e)}):[al(i)],e=T(e);var i,s=[];if(t.length)for(var r=0;r<e.length;){var n=nl(e,r,!1),a=nl(e,r+n.length),o=r+n.length+a.length,l=(127===a.value&&(a.value=Xo(n,e,o),a.value!==e.length)&&(a.value-=o),o+a.value>e.length?e.length:o+a.value),o=e.subarray(o,l);w(t[0],n.bytes)&&(1===t.length?s.push(o):s=s.concat(Ko(o,t.slice(1)))),r+=n.length+a.length+o.length}return s}function Yo(e,t,i,s){void 0===s&&(s=1/0),e=T(e),i=[].concat(i);for(var r,n=0,a=0;n<e.length&&(a<s||r);){var o=void 0;if(w(e.subarray(n),ol)?o=4:w(e.subarray(n),ll)&&(o=3),o){if(a++,r)return hl(e.subarray(r,n));var l=void 0;"h264"===t?l=31&e[n+o]:"h265"===t&&(l=e[n+o]>>1&63),-1!==i.indexOf(l)&&(r=n+o),n+=o+("h264"===t?1:2)}else n++}return e.subarray(0,0)}function Qo(e){e=T(e);for(var t=0;t<cl.length;t++){var i=cl[t];if(pl[i](e))return i}return""}var Jo=Math.pow(2,32),Zo=function(e){var t,e=new DataView(e.buffer,e.byteOffset,e.byteLength);return e.getBigUint64?(t=e.getBigUint64(0))<Number.MAX_SAFE_INTEGER?Number(t):t:e.getUint32(0)*Jo+e.getUint32(4)},el=function(e){var t=new DataView(e.buffer,e.byteOffset,e.byteLength),i={version:e[0],flags:new Uint8Array(e.subarray(1,4)),references:[],referenceId:t.getUint32(4),timescale:t.getUint32(8)},s=12,r=(0===i.version?(i.earliestPresentationTime=t.getUint32(s),i.firstOffset=t.getUint32(s+4),s+=8):(i.earliestPresentationTime=Zo(e.subarray(s)),i.firstOffset=Zo(e.subarray(s+8)),s+=16),t.getUint16(s+=2));for(s+=2;0<r;s+=12,r--)i.references.push({referenceType:(128&e[s])>>>7,referencedSize:2147483647&t.getUint32(s),subsegmentDuration:t.getUint32(s+4),startsWithSap:!!(128&e[s+8]),sapType:(112&e[s+8])>>>4,sapDeltaTime:268435455&t.getUint32(s+8)});return i},tl=T([73,68,51]),il={EBML:T([26,69,223,163]),DocType:T([66,130]),Segment:T([24,83,128,103]),SegmentInfo:T([21,73,169,102]),Tracks:T([22,84,174,107]),Track:T([174]),TrackNumber:T([215]),DefaultDuration:T([35,227,131]),TrackEntry:T([174]),TrackType:T([131]),FlagDefault:T([136]),CodecID:T([134]),CodecPrivate:T([99,162]),VideoTrack:T([224]),AudioTrack:T([225]),Cluster:T([31,67,182,117]),Timestamp:T([231]),TimestampScale:T([42,215,177]),BlockGroup:T([160]),BlockDuration:T([155]),Block:T([161]),SimpleBlock:T([163])},sl=[128,64,32,16,8,4,2,1],rl=function(e){for(var t=1,i=0;i<sl.length&&!(e&sl[i]);i++)t++;return t},nl=function(e,t,i,s){void 0===i&&(i=!0),void 0===s&&(s=!1);var r=rl(e[t]),n=e.subarray(t,t+r);return i&&((n=Array.prototype.slice.call(e,t,t+r))[0]^=sl[r-1]),{length:r,value:En(n,{signed:s}),bytes:n}},al=function e(t){return"string"==typeof t?t.match(/.{1,2}/g).map(e):"number"==typeof t?un(t):t},ol=T([0,0,0,1]),ll=T([0,0,1]),dl=T([0,0,3]),hl=function(e){for(var t=[],i=1;i<e.length-2;)w(e.subarray(i,i+3),dl)&&(t.push(i+2),i++),i++;if(0===t.length)return e;for(var s=e.length-t.length,r=new Uint8Array(s),n=0,i=0;i<s;n++,i++)n===t[0]&&(n++,t.shift()),r[i]=e[n];return r},P={webm:T([119,101,98,109]),matroska:T([109,97,116,114,111,115,107,97]),flac:T([102,76,97,67]),ogg:T([79,103,103,83]),ac3:T([11,119]),riff:T([82,73,70,70]),avi:T([65,86,73]),wav:T([87,65,86,69]),"3gp":T([102,116,121,112,51,103]),mp4:T([102,116,121,112]),fmp4:T([115,116,121,112]),mov:T([102,116,121,112,113,116]),moov:T([109,111,111,118]),moof:T([109,111,111,102])},ul={aac:function(e){var t=zo(e);return w(e,[255,16],{offset:t,mask:[255,22]})},mp3:function(e){var t=zo(e);return w(e,[255,2],{offset:t,mask:[255,6]})},webm:function(e){e=Ko(e,[il.EBML,il.DocType])[0];return w(e,P.webm)},mkv:function(e){e=Ko(e,[il.EBML,il.DocType])[0];return w(e,P.matroska)},mp4:function(e){return!ul["3gp"](e)&&!ul.mov(e)&&(!!(w(e,P.mp4,{offset:4})||w(e,P.fmp4,{offset:4})||w(e,P.moof,{offset:4})||w(e,P.moov,{offset:4}))||void 0)},mov:function(e){return w(e,P.mov,{offset:4})},"3gp":function(e){return w(e,P["3gp"],{offset:4})},ac3:function(e){var t=zo(e);return w(e,P.ac3,{offset:t})},ts:function(e){if(e.length<189&&1<=e.length)return 71===e[0];for(var t=0;t+188<e.length&&t<188;){if(71===e[t]&&71===e[t+188])return!0;t+=1}return!1},flac:function(e){var t=zo(e);return w(e,P.flac,{offset:t})},ogg:function(e){return w(e,P.ogg)},avi:function(e){return w(e,P.riff)&&w(e,P.avi,{offset:8})},wav:function(e){return w(e,P.riff)&&w(e,P.wav,{offset:8})},h264:function(e){return Yo(e,"h264",7,3).length},h265:function(e){return Yo(e,"h265",[32,33],3).length}},cl=Object.keys(ul).filter(function(e){return"ts"!==e&&"h264"!==e&&"h265"!==e}).concat(["ts","h264","h265"]),pl=(cl.forEach(function(e){var t=ul[e];ul[e]=function(e){return t(T(e))}}),ul),ml=9e4;
+/*! @name @videojs/http-streaming @version 3.12.1 @license Apache-2.0 */
+const gl=Xr,fl=(e,t)=>t&&t.responseURL&&e!==t.responseURL?t.responseURL:e,yl=e=>b.log.debug?b.log.debug.bind(b,"VHS:",e+" >"):function(){};function L(...e){var t=b.obj||b;return(t.merge||t.mergeOptions).apply(t,e)}function _l(...e){var t=b.time||b;return(t.createTimeRanges||t.createTimeRanges).apply(t,e)}function vl(e,i){return Il(e,function(e,t){return e-kl<=i&&t+kl>=i})}function bl(e,t){return Il(e,function(e){return e-Cl>=t})}function Tl(e){if(e&&e.length&&e.end)return e.end(e.length-1)}function Sl(t,i){let s=0;if(t&&t.length)for(let e=0;e<t.length;e++){var r=t.start(e),n=t.end(e);n<i||(s+=r<i&&i<=n?n-i:n-r)}return s}function wl({defaultDuration:t,durationList:i,startIndex:s,endIndex:r}){let n=0;if(r<s&&([s,r]=[r,s]),s<0){for(let e=s;e<Math.min(0,r);e++)n+=t;s=0}for(let e=s;e<r;e++)n+=i[e].duration;return n}function El(e,t,i,s){if(!e||!e.segments)return null;if(e.endList)return Bl(e);if(null===t)return null;t=t||0;let r=Ul(e,e.mediaSequence+e.segments.length,t);return i&&(s="number"==typeof s?s:Rl(null,e),r-=s),Math.max(0,r)}const Cl=1/30,kl=3*Cl,Il=function(e,t){var i=[];let s;if(e&&e.length)for(s=0;s<e.length;s++)t(e.start(s),e.end(s))&&i.push([e.start(s),e.end(s)]);return _l(i)},xl=t=>{var i=[];if(!t||!t.length)return"";for(let e=0;e<t.length;e++)i.push(t.start(e)+" => "+t.end(e));return i.join(", ")},Al=t=>{var i=[];for(let e=0;e<t.length;e++)i.push({start:t.start(e),end:t.end(e)});return i},Dl=(t,e)=>{if(!e.preload)return e.duration;let i=0;return(e.parts||[]).forEach(function(e){i+=e.duration}),(e.preloadHints||[]).forEach(function(e){"PART"===e.type&&(i+=t.partTargetDuration)}),i},Pl=e=>(e.segments||[]).reduce((i,s,r)=>(s.parts?s.parts.forEach(function(e,t){i.push({duration:e.duration,segmentIndex:r,partIndex:t,part:e,segment:s})}):i.push({duration:s.duration,segmentIndex:r,partIndex:null,segment:s,part:null}),i),[]),Ll=e=>{e=e.segments&&e.segments.length&&e.segments[e.segments.length-1];return e&&e.parts||[]},Ol=({preloadSegment:e})=>{var t;if(e)return{parts:e,preloadHints:t}=e,(t||[]).reduce((e,t)=>e+("PART"===t.type?1:0),0)+(e&&e.length?e.length:0)},Rl=(e,t)=>{return t.endList?0:e&&e.suggestedPresentationDelay?e.suggestedPresentationDelay:(e=0<Ll(t).length)&&t.serverControl&&t.serverControl.partHoldBack?t.serverControl.partHoldBack:e&&t.partTargetDuration?3*t.partTargetDuration:t.serverControl&&t.serverControl.holdBack?t.serverControl.holdBack:t.targetDuration?3*t.targetDuration:0},Nl=function(e,t){let i=0,s=t-e.mediaSequence,r=e.segments[s];if(r){if("undefined"!=typeof r.start)return{result:r.start,precise:!0};if("undefined"!=typeof r.end)return{result:r.end-r.duration,precise:!0}}for(;s--;){if("undefined"!=typeof(r=e.segments[s]).end)return{result:i+r.end,precise:!0};if(i+=Dl(e,r),"undefined"!=typeof r.start)return{result:i+r.start,precise:!0}}return{result:i,precise:!1}},Ml=function(e,t){let i=0;var s;let r=t-e.mediaSequence;for(;r<e.segments.length;r++){if("undefined"!=typeof(s=e.segments[r]).start)return{result:s.start-i,precise:!0};if(i+=Dl(e,s),"undefined"!=typeof s.end)return{result:s.end-i,precise:!0}}return{result:-1,precise:!1}},Ul=function(e,t,i){var s;return(t="undefined"==typeof t?e.mediaSequence+e.segments.length:t)<e.mediaSequence?0:(s=Nl(e,t)).precise?s.result:(e=Ml(e,t)).precise?e.result:s.result+i},Bl=function(e,t,i){if(!e)return 0;if("number"!=typeof i&&(i=0),"undefined"==typeof t){if(e.totalDuration)return e.totalDuration;if(!e.endList)return window.Infinity}return Ul(e,t,i)};function Fl(e){return e.excludeUntil&&e.excludeUntil>Date.now()}function ql(e){return e.excludeUntil&&e.excludeUntil===1/0}function jl(e){var t=Fl(e);return!e.disabled&&!t}function Hl(e,t){return t.attributes&&t.attributes[e]}function Vl(e,t){var i=e&&e.mediaGroups&&e.mediaGroups.AUDIO||{};let s=!1;for(const r in i){for(const n in i[r])if(s=t(i[r][n]))break;if(s)break}return!!s}const $l=(e,t)=>{if(1===e.playlists.length)return!0;const i=t.attributes.BANDWIDTH||Number.MAX_VALUE;return 0===e.playlists.filter(e=>!!jl(e)&&(e.attributes.BANDWIDTH||0)<i).length},zl=(e,t)=>!(!e&&!t||!e&&t||e&&!t||e!==t&&(!e.id||!t.id||e.id!==t.id)&&(!e.resolvedUri||!t.resolvedUri||e.resolvedUri!==t.resolvedUri)&&(!e.uri||!t.uri||e.uri!==t.uri)),Wl=t=>{if(!t||!t.playlists||!t.playlists.length)return Vl(t,e=>e.playlists&&e.playlists.length||e.uri);for(let e=0;e<t.playlists.length;e++){const s=t.playlists[e];var i=s.attributes&&s.attributes.CODECS;if(!i||!i.split(",").every(e=>on(e))){i=Vl(t,e=>zl(s,e));if(!i)return!1}}return!0};var Gl={liveEdgeDelay:Rl,duration:Bl,seekable:function(e,t,i){var s=t||0;let r=El(e,t,!0,i);return null===r?_l():_l(s,r=r<s?s:r)},getMediaInfoForTime:function({playlist:t,currentTime:i,startingSegmentIndex:s,startingPartIndex:r,startTime:n,exactManifestTimings:a}){let o=i-n;var l=Pl(t);let d=0;for(let e=0;e<l.length;e++){var h=l[e];if(s===h.segmentIndex&&("number"!=typeof r||"number"!=typeof h.partIndex||r===h.partIndex)){d=e;break}}if(o<0){if(0<d)for(let e=d-1;0<=e;e--){var u=l[e];if(o+=u.duration,a){if(o<0)continue}else if(o+Cl<=0)continue;return{partIndex:u.partIndex,segmentIndex:u.segmentIndex,startTime:n-wl({defaultDuration:t.targetDuration,durationList:l,startIndex:d,endIndex:e})}}return{partIndex:l[0]&&l[0].partIndex||null,segmentIndex:l[0]&&l[0].segmentIndex||0,startTime:i}}if(d<0){for(let e=d;e<0;e++)if((o-=t.targetDuration)<0)return{partIndex:l[0]&&l[0].partIndex||null,segmentIndex:l[0]&&l[0].segmentIndex||0,startTime:i};d=0}for(let e=d;e<l.length;e++){var c=l[e],p=(o-=c.duration,c.duration>Cl),m=0===o,p=p&&0<=o+Cl;if(!m&&!p||e===l.length-1){if(a){if(0<o)continue}else if(0<=o-Cl)continue;return{partIndex:c.partIndex,segmentIndex:c.segmentIndex,startTime:n+wl({defaultDuration:t.targetDuration,durationList:l,startIndex:d,endIndex:e})}}}return{segmentIndex:l[l.length-1].segmentIndex,partIndex:l[l.length-1].partIndex,startTime:i}},isEnabled:jl,isDisabled:function(e){return e.disabled},isExcluded:Fl,isIncompatible:ql,playlistEnd:El,isAes:function(t){for(let e=0;e<t.segments.length;e++)if(t.segments[e].key)return!0;return!1},hasAttribute:Hl,estimateSegmentRequestTime:function(e,t,i,s=0){return Hl("BANDWIDTH",i)?(e*i.attributes.BANDWIDTH-8*s)/t:NaN},isLowestEnabledRendition:$l,isAudioOnly:Wl,playlistMatch:zl,segmentDurationWithParts:Dl};const Xl=b["log"],Kl=(e,t)=>e+"-"+t,Yl=(e,t,i)=>`placeholder-uri-${e}-${t}-`+i,Ql=(r,n)=>{r.mediaGroups&&["AUDIO","SUBTITLES"].forEach(e=>{if(r.mediaGroups[e])for(const i in r.mediaGroups[e])for(const s in r.mediaGroups[e][i]){var t=r.mediaGroups[e][i][s];n(t,e,i,s)}})},Jl=({playlist:e,uri:t,id:i})=>{e.id=i,e.playlistErrors_=0,t&&(e.uri=t),e.attributes=e.attributes||{}},Zl=(o,e,l=Yl)=>{o.uri=e;for(let e=0;e<o.playlists.length;e++){var t;o.playlists[e].uri||(t="placeholder-uri-"+e,o.playlists[e].uri=t)}const i=Wl(o);Ql(o,(e,r,n,a)=>{if(!e.playlists||!e.playlists.length){if(i&&"AUDIO"===r&&!e.uri)for(let e=0;e<o.playlists.length;e++){var t=o.playlists[e];if(t.attributes&&t.attributes.AUDIO&&t.attributes.AUDIO===n)return}e.playlists=[bi({},e)]}e.playlists.forEach(function(e,t){var i=l(r,n,a,e),s=Kl(t,i);e.uri?e.resolvedUri=e.resolvedUri||gl(o.uri,e.uri):(e.uri=0===t?i:s,e.resolvedUri=e.uri),e.id=e.id||s,e.attributes=e.attributes||{},o.playlists[e.id]=e,o.playlists[e.uri]=e})});{var s=o;let e=s.playlists.length;for(;e--;){var r=s.playlists[e];Jl({playlist:r,id:Kl(e,r.uri)}),r.resolvedUri=gl(s.uri,r.uri),s.playlists[r.id]=r,(s.playlists[r.uri]=r).attributes.BANDWIDTH||Xl.warn("Invalid playlist STREAM-INF detected. Missing BANDWIDTH attribute.")}}var n;n=o,Ql(n,e=>{e.uri&&(e.resolvedUri=gl(n.uri,e.uri))})};class ed{constructor(){this.offset_=null,this.pendingDateRanges_=new Map,this.processedDateRanges_=new Map}setOffset(e=[]){null===this.offset_&&e.length&&([e]=e,void 0!==e.programDateTime)&&(this.offset_=e.programDateTime/1e3)}setPendingDateRanges(e=[]){var t;e.length&&([t]=e,t=t.startDate.getTime(),this.trimProcessedDateRanges_(t),this.pendingDateRanges_=e.reduce((e,t)=>(e.set(t.id,t),e),new Map))}processDateRange(e){this.pendingDateRanges_.delete(e.id),this.processedDateRanges_.set(e.id,e)}getDateRangesToProcess(){if(null===this.offset_)return[];const i={},s=[];this.pendingDateRanges_.forEach((e,t)=>{this.processedDateRanges_.has(t)||(e.startTime=e.startDate.getTime()/1e3-this.offset_,e.processDateRange=()=>this.processDateRange(e),s.push(e),e.class&&(i[e.class]?(t=i[e.class].push(e),e.classListIndex=t-1):(i[e.class]=[e],e.classListIndex=0)))});for(const t of s){var e=i[t.class]||[];t.endDate?t.endTime=t.endDate.getTime()/1e3-this.offset_:t.endOnNext&&e[t.classListIndex+1]?t.endTime=e[t.classListIndex+1].startTime:t.duration?t.endTime=t.startTime+t.duration:t.plannedDuration?t.endTime=t.startTime+t.plannedDuration:t.endTime=t.startTime}return s}trimProcessedDateRanges_(i){new Map(this.processedDateRanges_).forEach((e,t)=>{e.startDate.getTime()<i&&this.processedDateRanges_.delete(t)})}}pr=b.EventTarget;function td(e){var t=e.segments||[],i=e.preloadSegment;if(i&&i.parts&&i.parts.length){if(i.preloadHints)for(let e=0;e<i.preloadHints.length;e++)if("MAP"===i.preloadHints[e].type)return t;i.duration=e.targetDuration,i.preload=!0,t.push(i)}return t}const id=(t,i)=>{if(!t)return i;var s=L(t,i);if(t.preloadHints&&!i.preloadHints&&delete s.preloadHints,t.parts&&!i.parts)delete s.parts;else if(t.parts&&i.parts)for(let e=0;e<i.parts.length;e++)t.parts&&t.parts[e]&&(s.parts[e]=L(t.parts[e],i.parts[e]));return!t.skipped&&i.skipped&&(s.skipped=!1),t.preload&&!i.preload&&(s.preload=!1),s},sd=(e,t)=>{!e.resolvedUri&&e.uri&&(e.resolvedUri=gl(t,e.uri)),e.key&&!e.key.resolvedUri&&(e.key.resolvedUri=gl(t,e.key.uri)),e.map&&!e.map.resolvedUri&&(e.map.resolvedUri=gl(t,e.map.uri)),e.map&&e.map.key&&!e.map.key.resolvedUri&&(e.map.key.resolvedUri=gl(t,e.map.key.uri)),e.parts&&e.parts.length&&e.parts.forEach(e=>{e.resolvedUri||(e.resolvedUri=gl(t,e.uri))}),e.preloadHints&&e.preloadHints.length&&e.preloadHints.forEach(e=>{e.resolvedUri||(e.resolvedUri=gl(t,e.uri))})},rd=(e,t)=>e===t||e.segments&&t.segments&&e.segments.length===t.segments.length&&e.endList===t.endList&&e.mediaSequence===t.mediaSequence&&e.preloadSegment===t.preloadSegment,nd=(e,r,t=rd)=>{var i=L(e,{}),s=i.playlists[r.id];if(!s)return null;if(t(s,r))return null;r.segments=td(r);const n=L(s,r);if(n.preloadSegment&&!r.preloadSegment&&delete n.preloadSegment,s.segments){if(r.skip){r.segments=r.segments||[];for(let e=0;e<r.skip.skippedSegments;e++)r.segments.unshift({skipped:!0})}n.segments=((e,t,i)=>{var s=e.slice(),r=t.slice(),n=(i=i||0,[]);let a;for(let e=0;e<r.length;e++){var o=s[e+i],l=r[e];o?(a=o.map||a,n.push(id(o,l))):(a&&!l.map&&(l.map=a),n.push(l))}return n})(s.segments,r.segments,r.mediaSequence-s.mediaSequence)}n.segments.forEach(e=>{sd(e,n.resolvedUri)});for(let e=0;e<i.playlists.length;e++)i.playlists[e].id===r.id&&(i.playlists[e]=n);return i.playlists[r.id]=n,i.playlists[r.uri]=n,Ql(e,(t,e,i,s)=>{if(t.playlists)for(let e=0;e<t.playlists.length;e++)r.id===t.playlists[e].id&&(t.playlists[e]=n)}),i},ad=(e,t)=>{var i=e.segments||[],i=i[i.length-1],s=i&&i.parts&&i.parts[i.parts.length-1],s=s&&s.duration||i&&i.duration;return t&&s?1e3*s:500*(e.partTargetDuration||e.targetDuration||10)};class od extends pr{constructor(e,t,i={}){if(super(),!e)throw new Error("A non-empty playlist URL or object is required");this.logger_=yl("PlaylistLoader");var{withCredentials:s=!1}=i,e=(this.src=e,this.vhs_=t,this.withCredentials=s,this.addDateRangesToTextTrack_=i.addDateRangesToTextTrack,t.options_);this.customTagParsers=e&&e.customTagParsers||[],this.customTagMappers=e&&e.customTagMappers||[],this.llhls=e&&e.llhls,this.dateRangesStorage_=new ed,this.state="HAVE_NOTHING",this.handleMediaupdatetimeout_=this.handleMediaupdatetimeout_.bind(this),this.on("mediaupdatetimeout",this.handleMediaupdatetimeout_),this.on("loadedplaylist",this.handleLoadedPlaylist_.bind(this))}handleLoadedPlaylist_(){var e=this.media();e&&(this.dateRangesStorage_.setOffset(e.segments),this.dateRangesStorage_.setPendingDateRanges(e.dateRanges),(e=this.dateRangesStorage_.getDateRangesToProcess()).length)&&this.addDateRangesToTextTrack_&&this.addDateRangesToTextTrack_(e)}handleMediaupdatetimeout_(){if("HAVE_METADATA"===this.state){var t=this.media();let e=gl(this.main.uri,t.uri);this.llhls&&(e=((e,t)=>{if(!t.endList&&t.serverControl){const r={};if(t.serverControl.canBlockReload){var i,s=t["preloadSegment"];let e=t.mediaSequence+t.segments.length;s&&(s=s.parts||[],-1<(i=Ol(t)-1)&&i!=s.length-1&&(r._HLS_part=i),-1<i||s.length)&&e--,r._HLS_msn=e}if(t.serverControl&&t.serverControl.canSkipUntil&&(r._HLS_skip=t.serverControl.canSkipDateranges?"v2":"YES"),Object.keys(r).length){const n=new window.URL(e);["_HLS_skip","_HLS_msn","_HLS_part"].forEach(function(e){r.hasOwnProperty(e)&&n.searchParams.set(e,r[e])}),e=n.toString()}}return e})(e,t)),this.state="HAVE_CURRENT_METADATA",this.request=this.vhs_.xhr({uri:e,withCredentials:this.withCredentials,requestType:"hls-playlist"},(e,t)=>{if(this.request)return e?this.playlistRequestError(this.request,this.media(),"HAVE_METADATA"):void this.haveMetadata({playlistString:this.request.responseText,url:this.media().uri,id:this.media().id})})}}playlistRequestError(e,t,i){var{uri:t,id:s}=t;this.request=null,i&&(this.state=i),this.error={playlist:this.main.playlists[s],status:e.status,message:`HLS playlist request error at URL: ${t}.`,responseText:e.responseText,code:500<=e.status?4:2,metadata:{errorType:b.Error.HlsPlaylistRequestError}},this.trigger("error")}parseManifest_({url:t,manifestString:i}){{var[{onwarn:i,oninfo:e,manifestString:s,customTagParsers:r=[],customTagMappers:n=[],llhls:a}]=[{onwarn:({message:e})=>this.logger_(`m3u8-parser warn for ${t}: `+e),oninfo:({message:e})=>this.logger_(`m3u8-parser info for ${t}: `+e),manifestString:i,customTagParsers:this.customTagParsers,customTagMappers:this.customTagMappers,llhls:this.llhls}];const o=new an,l=(i&&o.on("warn",i),e&&o.on("info",e),r.forEach(e=>o.addParser(e)),n.forEach(e=>o.addTagMapper(e)),o.push(s),o.end(),o.manifest);if(a||(["preloadSegment","skip","serverControl","renditionReports","partInf","partTargetDuration"].forEach(function(e){l.hasOwnProperty(e)&&delete l[e]}),l.segments&&l.segments.forEach(function(t){["parts","preloadHints"].forEach(function(e){t.hasOwnProperty(e)&&delete t[e]})})),!l.targetDuration){let e=10;l.segments&&l.segments.length&&(e=l.segments.reduce((e,t)=>Math.max(e,t.duration),0)),i&&i({message:"manifest has no targetDuration defaulting to "+e}),l.targetDuration=e}return(e=Ll(l)).length&&!l.partTargetDuration&&(r=e.reduce((e,t)=>Math.max(e,t.duration),0),i&&(i({message:"manifest has no partTargetDuration defaulting to "+r}),Xl.error("LL-HLS manifest has parts but lacks required #EXT-X-PART-INF:PART-TARGET value. See https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis-09#section-4.4.3.7. Playback is not guaranteed.")),l.partTargetDuration=r),l}}haveMetadata({playlistString:e,playlistObject:t,url:i,id:s}){this.request=null,this.state="HAVE_METADATA";t=t||this.parseManifest_({url:i,manifestString:e}),t.lastRequest=Date.now(),Jl({playlist:t,uri:i,id:s}),e=nd(this.main,t);this.targetDuration=t.partTargetDuration||t.targetDuration,this.pendingMedia_=null,e?(this.main=e,this.media_=this.main.playlists[s]):this.trigger("playlistunchanged"),this.updateMediaUpdateTimeout_(ad(this.media(),!!e)),this.trigger("loadedplaylist")}dispose(){this.trigger("dispose"),this.stopRequest(),window.clearTimeout(this.mediaUpdateTimeout),window.clearTimeout(this.finalRenditionTimeout),this.dateRangesStorage_=new ed,this.off()}stopRequest(){var e;this.request&&(e=this.request,this.request=null,e.onreadystatechange=null,e.abort())}media(i,e){if(!i)return this.media_;if("HAVE_NOTHING"===this.state)throw new Error("Cannot switch media playlist from "+this.state);if("string"==typeof i){if(!this.main.playlists[i])throw new Error("Unknown playlist URI: "+i);i=this.main.playlists[i]}if(window.clearTimeout(this.finalRenditionTimeout),e)e=(i.partTargetDuration||i.targetDuration)/2*1e3||5e3,this.finalRenditionTimeout=window.setTimeout(this.media.bind(this,i,!1),e);else{const s=this.state;var e=!this.media_||i.id!==this.media_.id,t=this.main.playlists[i.id];if(t&&t.endList||i.endList&&i.segments.length)this.request&&(this.request.onreadystatechange=null,this.request.abort(),this.request=null),this.state="HAVE_METADATA",this.media_=i,e&&(this.trigger("mediachanging"),"HAVE_MAIN_MANIFEST"===s?this.trigger("loadedmetadata"):this.trigger("mediachange"));else if(this.updateMediaUpdateTimeout_(ad(i,!0)),e){if(this.state="SWITCHING_MEDIA",this.request){if(i.resolvedUri===this.request.url)return;this.request.onreadystatechange=null,this.request.abort(),this.request=null}this.media_&&this.trigger("mediachanging"),this.pendingMedia_=i,this.request=this.vhs_.xhr({uri:i.resolvedUri,withCredentials:this.withCredentials,requestType:"hls-playlist"},(e,t)=>{if(this.request){if(i.lastRequest=Date.now(),i.resolvedUri=fl(i.resolvedUri,t),e)return this.playlistRequestError(this.request,i,s);this.haveMetadata({playlistString:t.responseText,url:i.uri,id:i.id}),"HAVE_MAIN_MANIFEST"===s?this.trigger("loadedmetadata"):this.trigger("mediachange")}})}}}pause(){this.mediaUpdateTimeout&&(window.clearTimeout(this.mediaUpdateTimeout),this.mediaUpdateTimeout=null),this.stopRequest(),"HAVE_NOTHING"===this.state&&(this.started=!1),"SWITCHING_MEDIA"===this.state?this.media_?this.state="HAVE_METADATA":this.state="HAVE_MAIN_MANIFEST":"HAVE_CURRENT_METADATA"===this.state&&(this.state="HAVE_METADATA")}load(e){this.mediaUpdateTimeout&&(window.clearTimeout(this.mediaUpdateTimeout),this.mediaUpdateTimeout=null);var t=this.media();e?(e=t?(t.partTargetDuration||t.targetDuration)/2*1e3:5e3,this.mediaUpdateTimeout=window.setTimeout(()=>{this.mediaUpdateTimeout=null,this.load()},e)):this.started?t&&!t.endList?this.trigger("mediaupdatetimeout"):this.trigger("loadedplaylist"):this.start()}updateMediaUpdateTimeout_(e){this.mediaUpdateTimeout&&(window.clearTimeout(this.mediaUpdateTimeout),this.mediaUpdateTimeout=null),this.media()&&!this.media().endList&&(this.mediaUpdateTimeout=window.setTimeout(()=>{this.mediaUpdateTimeout=null,this.trigger("mediaupdatetimeout"),this.updateMediaUpdateTimeout_(e)},e))}start(){this.started=!0,"object"==typeof this.src?(this.src.uri||(this.src.uri=window.location.href),this.src.resolvedUri=this.src.uri,setTimeout(()=>{this.setupInitialPlaylist(this.src)},0)):this.request=this.vhs_.xhr({uri:this.src,withCredentials:this.withCredentials,requestType:"hls-playlist"},(e,t)=>{if(this.request){if(this.request=null,e)return this.error={status:t.status,message:`HLS playlist request error at URL: ${this.src}.`,responseText:t.responseText,code:2,metadata:{errorType:b.Error.HlsPlaylistRequestError}},"HAVE_NOTHING"===this.state&&(this.started=!1),this.trigger("error");this.src=fl(this.src,t);e=this.parseManifest_({manifestString:t.responseText,url:this.src});this.setupInitialPlaylist(e)}})}srcUri(){return"string"==typeof this.src?this.src:this.src.uri}setupInitialPlaylist(e){var t,i,s,r;this.state="HAVE_MAIN_MANIFEST",e.playlists?(this.main=e,Zl(this.main,this.srcUri()),e.playlists.forEach(t=>{t.segments=td(t),t.segments.forEach(e=>{sd(e,t.resolvedUri)})}),this.trigger("loadedplaylist"),this.request||this.media(this.main.playlists[0])):(t=this.srcUri()||window.location.href,this.main=(i=t,s=Kl(0,i),(r={mediaGroups:{AUDIO:{},VIDEO:{},"CLOSED-CAPTIONS":{},SUBTITLES:{}},uri:window.location.href,resolvedUri:window.location.href,playlists:[{uri:i,id:s,resolvedUri:i,attributes:{}}]}).playlists[s]=r.playlists[0],r.playlists[i]=r.playlists[0],r),this.haveMetadata({playlistObject:e,url:t,id:this.main.playlists[0].id}),this.trigger("loadedmetadata"))}updateOrDeleteClone(e,t){var i=this.main,s=e.ID;let r=i.playlists.length;for(;r--;){var n,a,o,l,d,h=i.playlists[r];h.attributes["PATHWAY-ID"]===s&&(n=h.resolvedUri,a=h.id,t?(o=this.createCloneURI_(h.resolvedUri,e),l=Kl(s,o),d=this.createCloneAttributes_(s,h.attributes),h=this.createClonePlaylist_(h,l,e,d),i.playlists[r]=h,i.playlists[l]=h,i.playlists[o]=h):i.playlists.splice(r,1),delete i.playlists[a],delete i.playlists[n])}this.updateOrDeleteCloneMedia(e,t)}updateOrDeleteCloneMedia(e,t){const s=this.main,r=e.ID;["AUDIO","SUBTITLES","CLOSED-CAPTIONS"].forEach(e=>{if(s.mediaGroups[e]&&s.mediaGroups[e][r])for(const t in s.mediaGroups[e])if(t===r){for(const i in s.mediaGroups[e][t])s.mediaGroups[e][t][i].playlists.forEach((e,t)=>{var e=s.playlists[e.id],i=e.id,e=e.resolvedUri;delete s.playlists[i],delete s.playlists[e]});delete s.mediaGroups[e][t]}}),t&&this.createClonedMediaGroups_(e)}addClonePathway(e,t={}){var i=this.main,s=i.playlists.length,r=this.createCloneURI_(t.resolvedUri,e),n=Kl(e.ID,r),a=this.createCloneAttributes_(e.ID,t.attributes),t=this.createClonePlaylist_(t,n,e,a);i.playlists[s]=t,i.playlists[n]=t,i.playlists[r]=t,this.createClonedMediaGroups_(e)}createClonedMediaGroups_(l){const d=l.ID,s=l["BASE-ID"],h=this.main;["AUDIO","SUBTITLES","CLOSED-CAPTIONS"].forEach(n=>{if(h.mediaGroups[n]&&!h.mediaGroups[n][d])for(const i in h.mediaGroups[n])if(i===s){h.mediaGroups[n][d]={};for(const a in h.mediaGroups[n][i]){var e=h.mediaGroups[n][i][a];h.mediaGroups[n][d][a]=bi({},e);const o=h.mediaGroups[n][d][a];var t=this.createCloneURI_(e.resolvedUri,l);o.resolvedUri=t,o.uri=t,o.playlists=[],e.playlists.forEach((e,t)=>{var i,s=h.playlists[e.id],r=Yl(n,d,a),r=Kl(d,r);s&&!h.playlists[r]&&(i=(s=this.createClonePlaylist_(s,r,l)).resolvedUri,h.playlists[r]=s,h.playlists[i]=s),o.playlists[t]=this.createClonePlaylist_(e,r,l)})}}})}createClonePlaylist_(e,t,i,s){i=this.createCloneURI_(e.resolvedUri,i),i={resolvedUri:i,uri:i,id:t};return e.segments&&(i.segments=[]),s&&(i.attributes=s),L(e,i)}createCloneURI_(e,t){var i=new URL(e),s=(i.hostname=t["URI-REPLACEMENT"].HOST,t["URI-REPLACEMENT"].PARAMS);for(const r of Object.keys(s))i.searchParams.set(r,s[r]);return i.href}createCloneAttributes_(t,i){const s={"PATHWAY-ID":t};return["AUDIO","SUBTITLES","CLOSED-CAPTIONS"].forEach(e=>{i[e]&&(s[e]=t)}),s}getKeyIdSet(e){if(e.contentProtection){var t=new Set;for(const s in e.contentProtection){var i=e.contentProtection[s].attributes.keyId;i&&t.add(i.toLowerCase())}return t}}}function ld(e,t,i,s){var r="arraybuffer"===e.responseType?e.response:e.responseText;!t&&r&&(e.responseTime=Date.now(),e.roundTripTime=e.responseTime-e.requestTime,e.bytesReceived=r.byteLength||r.length,e.bandwidth||(e.bandwidth=Math.floor(e.bytesReceived/e.roundTripTime*8*1e3))),i.headers&&(e.responseHeaders=i.headers),t&&"ETIMEDOUT"===t.code&&(e.timedout=!0),s(t=t||e.aborted||200===i.statusCode||206===i.statusCode||0===i.statusCode?t:new Error("XHR Failed with a response of: "+(e&&(r||e.responseText))),e)}function dd(){function d(e,a){e=L({timeout:45e3},e);var t=d.beforeRequest||b.Vhs.xhr.beforeRequest,i=d._requestCallbackSet||b.Vhs.xhr._requestCallbackSet||new Set;const o=d._responseCallbackSet||b.Vhs.xhr._responseCallbackSet;t&&"function"==typeof t&&(b.log.warn("beforeRequest is deprecated, use onRequest instead."),i.add(t));var s=(!0===b.Vhs.xhr.original?b:b.Vhs).xhr,r=((e,i)=>{if(e&&e.size){let t=i;return e.forEach(e=>{t=e(t)}),t}})(i,e);i.delete(t);const l=s(r||e,function(e,t){var i,s,r,n;return i=o,s=l,r=e,n=t,i&&i.size&&i.forEach(e=>{e(s,r,n)}),ld(l,e,t,a)}),n=l.abort;return l.abort=function(){return l.aborted=!0,n.apply(l,arguments)},l.uri=e.uri,l.requestTime=Date.now(),l}return d.original=!0,d}function hd(e){var t={};return e.byterange&&(t.Range=function(e){let t;return"bytes="+e.offset+"-"+(t="bigint"==typeof e.offset||"bigint"==typeof e.length?window.BigInt(e.offset)+window.BigInt(e.length)-window.BigInt(1):e.offset+e.length-1)}(e.byterange)),t}function ud(e,t){return e=e.toString(16),"00".substring(0,2-e.length)+e+(t%2?" ":"")}function cd(e){return 32<=e&&e<126?String.fromCharCode(e):"."}function pd(i){const s={};return Object.keys(i).forEach(e=>{var t=i[e];Sn(t)?s[e]={bytes:t.buffer,byteOffset:t.byteOffset,byteLength:t.byteLength}:s[e]=t}),s}function md(e){var t=e.byterange||{length:1/0,offset:0};return[t.length,t.offset,e.resolvedUri].join(",")}function gd(e){return e.resolvedUri}const fd=e=>{var t,i,s=Array.prototype.slice.call(e);let r="";for(let e=0;e<s.length/16;e++)t=s.slice(16*e,16*e+16).map(ud).join(""),i=s.slice(16*e,16*e+16).map(cd).join(""),r+=t+" "+i+"\n";return r};cr=Object.freeze({__proto__:null,createTransferableMessage:pd,initSegmentId:md,segmentKeyId:gd,hexDump:fd,tagDump:({bytes:e})=>fd(e),textRanges:e=>{let t="",i;for(i=0;i<e.length;i++)t+=(s=e,r=i,s.start(r)+"-"+s.end(r)+" ");var s,r;return t}});const yd=.25,_d=e=>e.transmuxedPresentationEnd-e.transmuxedPresentationStart-e.transmuxerPrependedSeconds,vd=({playlist:e,time:t=void 0,callback:i})=>{var s,r;if(i)return e&&void 0!==t?(e=((t,i)=>{if(!i||!i.segments||0===i.segments.length)return null;let s=0,r;for(let e=0;e<i.segments.length&&(r=i.segments[e],!(t<=(s=r.videoTimingInfo?r.videoTimingInfo.transmuxedPresentationEnd:s+r.duration)));e++);var e=i.segments[i.segments.length-1];if(e.videoTimingInfo&&e.videoTimingInfo.transmuxedPresentationEnd<t)return null;if(t>s){if(t>s+e.duration*yd)return null;r=e}return{segment:r,estimatedStart:r.videoTimingInfo?r.videoTimingInfo.transmuxedPresentationStart:s-r.duration,type:r.videoTimingInfo?"accurate":"estimate"}})(t,e))?"estimate"===e.type?i({message:"Accurate programTime could not be determined. Please seek to e.seekTime and try again",seekTime:e.estimatedStart}):(s={mediaSeconds:t},t=t,(r=(e=e.segment).dateTimeObject?(r=e.videoTimingInfo.transmuxerPrependedSeconds,t=t-(e.videoTimingInfo.transmuxedPresentationStart+r),new Date(e.dateTimeObject.getTime()+1e3*t)):null)&&(s.programDateTime=r.toISOString()),i(null,s)):i({message:"valid programTime was not found"}):i({message:"getProgramTime: playlist and time must be provided"});throw new Error("getProgramTime: callback must be provided")},bd=({programTime:e,playlist:t,retryCount:i=2,seekTo:s,pauseAfterSeek:r=!0,tech:n,callback:a})=>{var o,l,d;if(a)return"undefined"!=typeof e&&t&&s?t.endList||n.hasStarted_?(t=>{if(!t.segments||0===t.segments.length)return!1;for(let e=0;e<t.segments.length;e++)if(!t.segments[e].dateTimeObject)return!1;return!0})(t)?(d=((e,t)=>{let i;try{i=new Date(e)}catch(e){return null}if(!t||!t.segments||0===t.segments.length)return null;let s=t.segments[0];if(i<new Date(s.dateTimeObject))return null;for(let e=0;e<t.segments.length-1;e++){s=t.segments[e];var r=new Date(t.segments[e+1].dateTimeObject);if(i<r)break}var e=t.segments[t.segments.length-1],n=e.dateTimeObject,a=e.videoTimingInfo?_d(e.videoTimingInfo):e.duration+e.duration*yd,a=new Date(n.getTime()+1e3*a);return i>a?null:{segment:s=i>new Date(n)?e:s,estimatedStart:s.videoTimingInfo?s.videoTimingInfo.transmuxedPresentationStart:Gl.duration(t,t.mediaSequence+t.segments.indexOf(s)),type:s.videoTimingInfo?"accurate":"estimate"}})(e,t))?(l=((e,t)=>{let i,s;try{i=new Date(e),s=new Date(t)}catch(e){}e=i.getTime();return(s.getTime()-e)/1e3})((o=d.segment).dateTimeObject,e),"estimate"===d.type?0===i?a({message:e+" is not buffered yet. Try again"}):(s(d.estimatedStart+l),void n.one("seeked",()=>{bd({programTime:e,playlist:t,retryCount:i-1,seekTo:s,pauseAfterSeek:r,tech:n,callback:a})})):(d=o.start+l,n.one("seeked",()=>a(null,n.currentTime())),r&&n.pause(),void s(d))):a({message:e+" was not found in the stream"}):a({message:"programDateTime tags must be provided in the manifest "+t.resolvedUri}):a({message:"player must be playing a live stream to start buffering"}):a({message:"seekToProgramTime: programTime, seekTo and playlist must be provided"});throw new Error("seekToProgramTime: callback must be provided")},Td=(e,t)=>{if(4===e.readyState)return t()},Sd=(e,t,r)=>{let s=[],n,a=!1;function o(e,t,i,s){return t.abort(),a=!0,r(e,t,i,s)}function i(e,t){var i;if(!a)return e?o(e,t,"",s):(i=t.responseText.substring(s&&s.byteLength||0,t.responseText.length),s=function(){for(var e,t,i,s=arguments.length,r=new Array(s),n=0;n<s;n++)r[n]=arguments[n];return(r=r.filter(function(e){return e&&(e.byteLength||e.length)&&"string"!=typeof e})).length<=1?T(r[0]):(e=r.reduce(function(e,t,i){return e+(t.byteLength||t.length)},0),t=new Uint8Array(e),i=0,r.forEach(function(e){e=T(e),t.set(e,i),i+=e.byteLength}),t)}(s,cn(i,!0)),n=n||zo(s),s.length<10||n&&s.length<n+2||"ts"===(i=Qo(s))&&s.length<188||!i&&s.length<376?Td(t,()=>o(e,t,"",s)):o(null,t,i,s))}const l=t({uri:e,beforeSend(e){e.overrideMimeType("text/plain; charset=x-user-defined"),e.addEventListener("progress",function({}){return ld(e,null,{statusCode:e.status},i)})}},function(e,t){return ld(l,e,t,i)});return l};lr=b.EventTarget;function wd(t,i){if(!rd(t,i))return!1;if(t.sidx&&i.sidx&&(t.sidx.offset!==i.sidx.offset||t.sidx.length!==i.sidx.length))return!1;if(!t.sidx&&i.sidx||t.sidx&&!i.sidx)return!1;if(t.segments&&!i.segments||!t.segments&&i.segments)return!1;if(t.segments||i.segments)for(let e=0;e<t.segments.length;e++){var s=t.segments[e],r=i.segments[e];if(s.uri!==r.uri)return!1;if(s.byterange||r.byterange){s=s.byterange,r=r.byterange;if(s&&!r||!s&&r)return!1;if(s.offset!==r.offset||s.length!==r.length)return!1}}return!0}const Ed=(e,t,i,s)=>{return`placeholder-uri-${e}-${t}-`+(s.attributes.NAME||i)},Cd=({mainXml:e,srcUrl:t,clientOffset:i,sidxMapping:s,previousManifest:r})=>{e=e,i={manifestUri:t,clientOffset:i,sidxMapping:s,previousManifest:r},e=Ho(Vo(e),i),s=Oo(e.representationInfo);r=ko({dashPlaylists:s,locations:e.locations,contentSteering:e.contentSteeringInfo,sidxMapping:i.sidxMapping,previousManifest:i.previousManifest,eventStream:e.eventStream});return Zl(r,t,Ed),r},kd=(e,t,i)=>{let a=!0,o=L(e,{duration:t.duration,minimumUpdatePeriod:t.minimumUpdatePeriod,timelineStarts:t.timelineStarts});for(let e=0;e<t.playlists.length;e++){var s=t.playlists[e],r=(s.sidx&&(r=yo(s.sidx),i)&&i[r]&&i[r].sidx&&uo(s,i[r].sidx,s.sidx.resolvedUri),nd(o,s,wd));r&&(o=r,a=!1)}var n,l;return Ql(t,(e,t,i,s)=>{var r,n;e.playlists&&e.playlists.length&&(r=e.playlists[0].id,n=nd(o,e.playlists[0],wd))&&(s in(o=n).mediaGroups[t][i]||(o.mediaGroups[t][i][s]=e),o.mediaGroups[t][i][s].playlists[0]=o.playlists[r],a=!1)}),n=o,l=t,Ql(n,(e,t,i,s)=>{s in l.mediaGroups[t][i]||delete n.mediaGroups[t][i][s]}),(a=t.minimumUpdatePeriod===e.minimumUpdatePeriod&&a)?null:o},Id=(e,t)=>{return(Boolean(!e.map&&!t.map)||Boolean(e.map&&t.map&&e.map.byterange.offset===t.map.byterange.offset&&e.map.byterange.length===t.map.byterange.length))&&e.uri===t.uri&&e.byterange.offset===t.byterange.offset&&e.byterange.length===t.byterange.length},xd=(e,t)=>{var i={};for(const a in e){var s=e[a].sidx;if(s){var r=yo(s);if(!t[r])break;var n=t[r].sidxInfo;Id(n,s)&&(i[r]=t[r])}}return i};class Ad extends lr{constructor(e,t,i={},s){super(),this.mainPlaylistLoader_=s||this,s||(this.isMain_=!0);var{withCredentials:s=!1}=i;if(this.vhs_=t,this.withCredentials=s,this.addMetadataToTextTrack=i.addMetadataToTextTrack,!e)throw new Error("A non-empty playlist URL or object is required");this.on("minimumUpdatePeriod",()=>{this.refreshXml_()}),this.on("mediaupdatetimeout",()=>{this.refreshMedia_(this.media().id)}),this.state="HAVE_NOTHING",this.loadedPlaylists_={},this.logger_=yl("DashPlaylistLoader"),this.isMain_?(this.mainPlaylistLoader_.srcUrl=e,this.mainPlaylistLoader_.sidxMapping_={}):this.childPlaylist_=e}requestErrored_(e,t,i){return!this.request||(this.request=null,e?(this.error="object"!=typeof e||e instanceof Error?{status:t.status,message:"DASH request error at URL: "+t.uri,response:t.response,code:2,metadata:e.metadata}:e,i&&(this.state=i),this.trigger("error"),!0):void 0)}addSidxSegments_(a,s,r){const n=a.sidx&&yo(a.sidx);if(a.sidx&&n&&!this.mainPlaylistLoader_.sidxMapping_[n]){const o=fl(a.sidx.resolvedUri),l=(t,i)=>{if(!this.requestErrored_(t,i,s)){t=this.mainPlaylistLoader_.sidxMapping_;let e;try{e=el(T(i.response).subarray(8))}catch(e){return e.metadata={errorType:b.Error.DashManifestSidxParsingError},void this.requestErrored_(e,i,s)}return t[n]={sidxInfo:a.sidx,sidx:e},uo(a,e,a.sidx.resolvedUri),r(!0)}};this.request=Sd(o,this.vhs_.xhr,(e,t,i,s)=>{var r,n;return e?l(e,t):i&&"mp4"===i?({offset:r,length:n}=a.sidx.byterange,s.length>=n+r?l(e,{response:s.subarray(r,r+n),status:t.status,uri:t.uri}):void(this.request=this.vhs_.xhr({uri:o,responseType:"arraybuffer",headers:hd({byterange:a.sidx.byterange})},l))):(e=i||"unknown",l({status:t.status,message:`Unsupported ${e} container type for sidx segment at URL: `+o,response:"",playlist:a,internal:!0,playlistExclusionDuration:1/0,code:2,metadata:{errorType:b.Error.UnsupportedSidxContainer,sidxContainer:e}},t))})}else this.mediaRequest_=window.setTimeout(()=>r(!1),0)}dispose(){this.trigger("dispose"),this.stopRequest(),this.loadedPlaylists_={},window.clearTimeout(this.minimumUpdatePeriodTimeout_),window.clearTimeout(this.mediaRequest_),window.clearTimeout(this.mediaUpdateTimeout),this.mediaUpdateTimeout=null,this.mediaRequest_=null,this.minimumUpdatePeriodTimeout_=null,this.mainPlaylistLoader_.createMupOnMedia_&&(this.off("loadedmetadata",this.mainPlaylistLoader_.createMupOnMedia_),this.mainPlaylistLoader_.createMupOnMedia_=null),this.off()}hasPendingRequest(){return this.request||this.mediaRequest_}stopRequest(){var e;this.request&&(e=this.request,this.request=null,e.onreadystatechange=null,e.abort())}media(t){if(!t)return this.media_;if("HAVE_NOTHING"===this.state)throw new Error("Cannot switch media playlist from "+this.state);const i=this.state;if("string"==typeof t){if(!this.mainPlaylistLoader_.main.playlists[t])throw new Error("Unknown playlist URI: "+t);t=this.mainPlaylistLoader_.main.playlists[t]}var e=!this.media_||t.id!==this.media_.id;e&&this.loadedPlaylists_[t.id]&&this.loadedPlaylists_[t.id].endList?(this.state="HAVE_METADATA",this.media_=t,e&&(this.trigger("mediachanging"),this.trigger("mediachange"))):e&&(this.media_&&this.trigger("mediachanging"),this.addSidxSegments_(t,i,e=>{this.haveMetadata({startingState:i,playlist:t})}))}haveMetadata({startingState:e,playlist:t}){this.state="HAVE_METADATA",this.loadedPlaylists_[t.id]=t,this.mediaRequest_=null,this.refreshMedia_(t.id),"HAVE_MAIN_MANIFEST"===e?this.trigger("loadedmetadata"):this.trigger("mediachange")}pause(){this.mainPlaylistLoader_.createMupOnMedia_&&(this.off("loadedmetadata",this.mainPlaylistLoader_.createMupOnMedia_),this.mainPlaylistLoader_.createMupOnMedia_=null),this.stopRequest(),window.clearTimeout(this.mediaUpdateTimeout),this.mediaUpdateTimeout=null,this.isMain_&&(window.clearTimeout(this.mainPlaylistLoader_.minimumUpdatePeriodTimeout_),this.mainPlaylistLoader_.minimumUpdatePeriodTimeout_=null),"HAVE_NOTHING"===this.state&&(this.started=!1)}load(e){window.clearTimeout(this.mediaUpdateTimeout),this.mediaUpdateTimeout=null;var t=this.media();e?(e=t?t.targetDuration/2*1e3:5e3,this.mediaUpdateTimeout=window.setTimeout(()=>this.load(),e)):this.started?t&&!t.endList?(this.isMain_&&!this.minimumUpdatePeriodTimeout_&&(this.trigger("minimumUpdatePeriod"),this.updateMinimumUpdatePeriodTimeout_()),this.trigger("mediaupdatetimeout")):this.trigger("loadedplaylist"):this.start()}start(){this.started=!0,this.isMain_?this.requestMain_((e,t)=>{this.haveMain_(),this.hasPendingRequest()||this.media_||this.media(this.mainPlaylistLoader_.main.playlists[0])}):this.mediaRequest_=window.setTimeout(()=>this.haveMain_(),0)}requestMain_(s){this.request=this.vhs_.xhr({uri:this.mainPlaylistLoader_.srcUrl,withCredentials:this.withCredentials,requestType:"dash-manifest"},(e,t)=>{if(this.requestErrored_(e,t))"HAVE_NOTHING"===this.state&&(this.started=!1);else{const i=t.responseText!==this.mainPlaylistLoader_.mainXml_;if(this.mainPlaylistLoader_.mainXml_=t.responseText,t.responseHeaders&&t.responseHeaders.date?this.mainLoaded_=Date.parse(t.responseHeaders.date):this.mainLoaded_=Date.now(),this.mainPlaylistLoader_.srcUrl=fl(this.mainPlaylistLoader_.srcUrl,t),!i)return s(t,i);this.handleMain_(),this.syncClientServerClock_(()=>s(t,i))}})}syncClientServerClock_(s){const r=$o(this.mainPlaylistLoader_.mainXml_);return null===r?(this.mainPlaylistLoader_.clientOffset_=this.mainLoaded_-Date.now(),s()):"DIRECT"===r.method?(this.mainPlaylistLoader_.clientOffset_=r.value-Date.now(),s()):void(this.request=this.vhs_.xhr({uri:gl(this.mainPlaylistLoader_.srcUrl,r.value),method:r.method,withCredentials:this.withCredentials,requestType:"dash-clock-sync"},(t,i)=>{if(this.request){if(t)return this.mainPlaylistLoader_.clientOffset_=this.mainLoaded_-Date.now(),s();let e;e="HEAD"===r.method?i.responseHeaders&&i.responseHeaders.date?Date.parse(i.responseHeaders.date):this.mainLoaded_:Date.parse(i.responseText),this.mainPlaylistLoader_.clientOffset_=e-Date.now(),s()}}))}haveMain_(){this.state="HAVE_MAIN_MANIFEST",this.isMain_?this.trigger("loadedplaylist"):this.media_||this.media(this.childPlaylist_)}handleMain_(){this.mediaRequest_=null;var e=this.mainPlaylistLoader_.main;let t=Cd({mainXml:this.mainPlaylistLoader_.mainXml_,srcUrl:this.mainPlaylistLoader_.srcUrl,clientOffset:this.mainPlaylistLoader_.clientOffset_,sidxMapping:this.mainPlaylistLoader_.sidxMapping_,previousManifest:e});e&&(t=kd(e,t,this.mainPlaylistLoader_.sidxMapping_)),this.mainPlaylistLoader_.main=t||e;var i=this.mainPlaylistLoader_.main.locations&&this.mainPlaylistLoader_.main.locations[0];return i&&i!==this.mainPlaylistLoader_.srcUrl&&(this.mainPlaylistLoader_.srcUrl=i),(!e||t&&t.minimumUpdatePeriod!==e.minimumUpdatePeriod)&&this.updateMinimumUpdatePeriodTimeout_(),this.addEventStreamToMetadataTrack_(t),Boolean(t)}updateMinimumUpdatePeriodTimeout_(){var e=this.mainPlaylistLoader_;e.createMupOnMedia_&&(e.off("loadedmetadata",e.createMupOnMedia_),e.createMupOnMedia_=null),e.minimumUpdatePeriodTimeout_&&(window.clearTimeout(e.minimumUpdatePeriodTimeout_),e.minimumUpdatePeriodTimeout_=null);let t=e.main&&e.main.minimumUpdatePeriod;0===t&&(e.media()?t=1e3*e.media().targetDuration:(e.createMupOnMedia_=e.updateMinimumUpdatePeriodTimeout_,e.one("loadedmetadata",e.createMupOnMedia_))),"number"!=typeof t||t<=0?t<0&&this.logger_(`found invalid minimumUpdatePeriod of ${t}, not setting a timeout`):this.createMUPTimeout_(t)}createMUPTimeout_(e){const t=this.mainPlaylistLoader_;t.minimumUpdatePeriodTimeout_=window.setTimeout(()=>{t.minimumUpdatePeriodTimeout_=null,t.trigger("minimumUpdatePeriod"),t.createMUPTimeout_(e)},e)}refreshXml_(){this.requestMain_((e,t)=>{t&&(this.media_&&(this.media_=this.mainPlaylistLoader_.main.playlists[this.media_.id]),this.mainPlaylistLoader_.sidxMapping_=((e,r)=>{let n=xd(e.playlists,r);return Ql(e,(e,t,i,s)=>{e.playlists&&e.playlists.length&&(e=e.playlists,n=L(n,xd(e,r)))}),n})(this.mainPlaylistLoader_.main,this.mainPlaylistLoader_.sidxMapping_),this.addSidxSegments_(this.media(),this.state,e=>{this.refreshMedia_(this.media().id)}))})}refreshMedia_(e){if(!e)throw new Error("refreshMedia_ must take a media id");this.media_&&this.isMain_&&this.handleMain_();var t=this.mainPlaylistLoader_.main.playlists;const i=!this.media_||this.media_!==t[e];if(i?this.media_=t[e]:this.trigger("playlistunchanged"),!this.mediaUpdateTimeout){const s=()=>{this.media().endList||(this.mediaUpdateTimeout=window.setTimeout(()=>{this.trigger("mediaupdatetimeout"),s()},ad(this.media(),Boolean(i))))};s()}this.trigger("loadedplaylist")}addEventStreamToMetadataTrack_(e){e&&this.mainPlaylistLoader_.main.eventStream&&(e=this.mainPlaylistLoader_.main.eventStream.map(e=>({cueTime:e.start,frames:[{data:e.messageData}]})),this.addMetadataToTextTrack("EventStream",e,this.mainPlaylistLoader_.main.duration))}getKeyIdSet(e){if(e.contentProtection){var t=new Set;for(const s in e.contentProtection){var i=e.contentProtection[s].attributes["cenc:default_KID"];i&&t.add(i.replace(/-/g,"").toLowerCase())}return t}}}var O={GOAL_BUFFER_LENGTH:30,MAX_GOAL_BUFFER_LENGTH:60,BACK_BUFFER_LENGTH:30,GOAL_BUFFER_LENGTH_RATE:1,INITIAL_BANDWIDTH:4194304,BANDWIDTH_VARIANCE:1.2,BUFFER_LOW_WATER_LINE:0,MAX_BUFFER_LOW_WATER_LINE:30,EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE:16,BUFFER_LOW_WATER_LINE_RATE:1,BUFFER_HIGH_WATER_LINE:30};function Dd(e){return e.on=e.addEventListener,e.off=e.removeEventListener,e}const Pd=t=>{var i=new Uint8Array(new ArrayBuffer(t.length));for(let e=0;e<t.length;e++)i[e]=t.charCodeAt(e);return i.buffer};function Ld(s){return function(){const e=function(t){try{return URL.createObjectURL(new Blob([t],{type:"application/javascript"}))}catch(e){var i=new BlobBuilder;return i.append(t),URL.createObjectURL(i.getBlob())}}(s);var t=Dd(new Worker(e));t.objURL=e;const i=t.terminate;return t.on=t.addEventListener,t.off=t.removeEventListener,t.terminate=function(){return URL.revokeObjectURL(e),i.call(this)},t}}function Od(e){return`var browserWorkerPolyFill = ${Dd.toString()};
+`+"browserWorkerPolyFill(self);\n"+e}function Rd(e){return e.toString().replace(/^function.+?{/,"").slice(0,-1)}var Nd=Ld(Od(Rd(function(){function e(){this.init=function(){var n={};this.on=function(e,t){n[e]||(n[e]=[]),n[e]=n[e].concat(t)},this.off=function(e,t){return!!n[e]&&(t=n[e].indexOf(t),n[e]=n[e].slice(),n[e].splice(t,1),-1<t)},this.trigger=function(e){var t,i,s,r=n[e];if(r)if(2===arguments.length)for(i=r.length,t=0;t<i;++t)r[t].call(this,arguments[1]);else{for(s=[],t=arguments.length,t=1;t<arguments.length;++t)s.push(arguments[t]);for(i=r.length,t=0;t<i;++t)r[t].apply(this,s)}},this.dispose=function(){n={}}}}var l,M,U,B,F,q,j,H,V,$,z,W,G,X,K,Y,Q,J,Z,ee,d,te,ie,se,re,ne,ae,oe,t,le,de,he,ue,ce,pe,me,ge,fe="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},i=(e.prototype.pipe=function(t){return this.on("data",function(e){t.push(e)}),this.on("done",function(e){t.flush(e)}),this.on("partialdone",function(e){t.partialFlush(e)}),this.on("endedtimeline",function(e){t.endTimeline(e)}),this.on("reset",function(e){t.reset(e)}),t},e.prototype.push=function(e){this.trigger("data",e)},e.prototype.flush=function(e){this.trigger("done",e)},e.prototype.partialFlush=function(e){this.trigger("partialdone",e)},e.prototype.endTimeline=function(e){this.trigger("endedtimeline",e)},e.prototype.reset=function(e){this.trigger("reset",e)},e),ye=Math.pow(2,32),s={getUint64:function(e){var t,e=new DataView(e.buffer,e.byteOffset,e.byteLength);return e.getBigUint64?(t=e.getBigUint64(0))<Number.MAX_SAFE_INTEGER?Number(t):t:e.getUint32(0)*ye+e.getUint32(4)},MAX_UINT32:ye},_e=s.MAX_UINT32;if(d={avc1:[],avcC:[],btrt:[],dinf:[],dref:[],esds:[],ftyp:[],hdlr:[],mdat:[],mdhd:[],mdia:[],mfhd:[],minf:[],moof:[],moov:[],mp4a:[],mvex:[],mvhd:[],pasp:[],sdtp:[],smhd:[],stbl:[],stco:[],stsc:[],stsd:[],stsz:[],stts:[],styp:[],tfdt:[],tfhd:[],traf:[],trak:[],trun:[],trex:[],tkhd:[],vmhd:[]},"undefined"!=typeof Uint8Array){for(var r in d)d.hasOwnProperty(r)&&(d[r]=[r.charCodeAt(0),r.charCodeAt(1),r.charCodeAt(2),r.charCodeAt(3)]);te=new Uint8Array(["i".charCodeAt(0),"s".charCodeAt(0),"o".charCodeAt(0),"m".charCodeAt(0)]),se=new Uint8Array(["a".charCodeAt(0),"v".charCodeAt(0),"c".charCodeAt(0),"1".charCodeAt(0)]),ie=new Uint8Array([0,0,0,1]),ke=new Uint8Array([0,0,0,0,0,0,0,0,118,105,100,101,0,0,0,0,0,0,0,0,0,0,0,0,86,105,100,101,111,72,97,110,100,108,101,114,0]),xe=new Uint8Array([0,0,0,0,0,0,0,0,115,111,117,110,0,0,0,0,0,0,0,0,0,0,0,0,83,111,117,110,100,72,97,110,100,108,101,114,0]),re={video:ke,audio:xe},oe=new Uint8Array([0,0,0,0,0,0,0,1,0,0,0,12,117,114,108,32,0,0,0,1]),ae=new Uint8Array([0,0,0,0,0,0,0,0]),t=new Uint8Array([0,0,0,0,0,0,0,0]),le=t,de=new Uint8Array([0,0,0,0,0,0,0,0,0,0,0,0]),he=t,ne=new Uint8Array([0,0,0,1,0,0,0,0,0,0,0,0])}l=function(e){for(var t,i=[],s=0,r=1;r<arguments.length;r++)i.push(arguments[r]);for(r=i.length;r--;)s+=i[r].byteLength;for(t=new Uint8Array(s+8),new DataView(t.buffer,t.byteOffset,t.byteLength).setUint32(0,t.byteLength),t.set(e,4),r=0,s=8;r<i.length;r++)t.set(i[r],s),s+=i[r].byteLength;return t},M=function(){return l(d.dinf,l(d.dref,oe))},U=function(e){return l(d.esds,new Uint8Array([0,0,0,0,3,25,0,0,0,4,17,64,21,0,6,0,0,0,218,192,0,0,218,192,5,2,e.audioobjecttype<<3|e.samplingfrequencyindex>>>1,e.samplingfrequencyindex<<7|e.channelcount<<3,6,1,2]))},X=function(e){return l(d.hdlr,re[e])},G=function(e){var t=new Uint8Array([0,0,0,0,0,0,0,2,0,0,0,3,0,1,95,144,e.duration>>>24&255,e.duration>>>16&255,e.duration>>>8&255,255&e.duration,85,196,0,0]);return e.samplerate&&(t[12]=e.samplerate>>>24&255,t[13]=e.samplerate>>>16&255,t[14]=e.samplerate>>>8&255,t[15]=255&e.samplerate),l(d.mdhd,t)},W=function(e){return l(d.mdia,G(e),X(e.type),q(e))},F=function(e){return l(d.mfhd,new Uint8Array([0,0,0,0,(4278190080&e)>>24,(16711680&e)>>16,(65280&e)>>8,255&e]))},q=function(e){return l(d.minf,"video"===e.type?l(d.vmhd,ne):l(d.smhd,ae),M(),Y(e))},H=function(e){for(var t=e.length,i=[];t--;)i[t]=Z(e[t]);return l.apply(null,[d.mvex].concat(i))},V=function(e){e=new Uint8Array([0,0,0,0,0,0,0,1,0,0,0,2,0,1,95,144,(4278190080&e)>>24,(16711680&e)>>16,(65280&e)>>8,255&e,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,64,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,255,255,255]);return l(d.mvhd,e)},K=function(e){for(var t,i=e.samples||[],s=new Uint8Array(4+i.length),r=0;r<i.length;r++)t=i[r].flags,s[r+4]=t.dependsOn<<4|t.isDependedOn<<2|t.hasRedundancy;return l(d.sdtp,s)},Y=function(e){return l(d.stbl,Q(e),l(d.stts,he),l(d.stsc,le),l(d.stsz,de),l(d.stco,t))},Q=function(e){return l(d.stsd,new Uint8Array([0,0,0,0,0,0,0,1]),("video"===e.type?ue:ce)(e))},ue=function(e){for(var t,i,s=e.sps||[],r=e.pps||[],n=[],a=[],o=0;o<s.length;o++)n.push((65280&s[o].byteLength)>>>8),n.push(255&s[o].byteLength),n=n.concat(Array.prototype.slice.call(s[o]));for(o=0;o<r.length;o++)a.push((65280&r[o].byteLength)>>>8),a.push(255&r[o].byteLength),a=a.concat(Array.prototype.slice.call(r[o]));return t=[d.avc1,new Uint8Array([0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,(65280&e.width)>>8,255&e.width,(65280&e.height)>>8,255&e.height,0,72,0,0,0,72,0,0,0,0,0,0,0,1,19,118,105,100,101,111,106,115,45,99,111,110,116,114,105,98,45,104,108,115,0,0,0,0,0,0,0,0,0,0,0,0,0,24,17,17]),l(d.avcC,new Uint8Array([1,e.profileIdc,e.profileCompatibility,e.levelIdc,255].concat([s.length],n,[r.length],a))),l(d.btrt,new Uint8Array([0,28,156,128,0,45,198,192,0,45,198,192]))],e.sarRatio&&(i=e.sarRatio[0],e=e.sarRatio[1],t.push(l(d.pasp,new Uint8Array([(4278190080&i)>>24,(16711680&i)>>16,(65280&i)>>8,255&i,(4278190080&e)>>24,(16711680&e)>>16,(65280&e)>>8,255&e])))),l.apply(null,t)},ce=function(e){return l(d.mp4a,new Uint8Array([0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,(65280&e.channelcount)>>8,255&e.channelcount,(65280&e.samplesize)>>8,255&e.samplesize,0,0,0,0,(65280&e.samplerate)>>8,255&e.samplerate,0,0]),U(e))},z=function(e){e=new Uint8Array([0,0,0,7,0,0,0,0,0,0,0,0,(4278190080&e.id)>>24,(16711680&e.id)>>16,(65280&e.id)>>8,255&e.id,0,0,0,0,(4278190080&e.duration)>>24,(16711680&e.duration)>>16,(65280&e.duration)>>8,255&e.duration,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,64,0,0,0,(65280&e.width)>>8,255&e.width,0,0,(65280&e.height)>>8,255&e.height,0,0]);return l(d.tkhd,e)},J=function(e){var t,i=l(d.tfhd,new Uint8Array([0,0,0,58,(4278190080&e.id)>>24,(16711680&e.id)>>16,(65280&e.id)>>8,255&e.id,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0])),s=Math.floor(e.baseMediaDecodeTime/_e),r=Math.floor(e.baseMediaDecodeTime%_e),s=l(d.tfdt,new Uint8Array([1,0,0,0,s>>>24&255,s>>>16&255,s>>>8&255,255&s,r>>>24&255,r>>>16&255,r>>>8&255,255&r]));return"audio"===e.type?(t=ee(e,92),l(d.traf,i,s,t)):(r=K(e),t=ee(e,r.length+92),l(d.traf,i,s,t,r))},$=function(e){return e.duration=e.duration||4294967295,l(d.trak,z(e),W(e))},Z=function(e){var t=new Uint8Array([0,0,0,0,(4278190080&e.id)>>24,(16711680&e.id)>>16,(65280&e.id)>>8,255&e.id,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,1]);return"video"!==e.type&&(t[t.length-1]=0),l(d.trex,t)},pe=function(e,t){var i=0,s=0,r=0,n=0;return e.length&&(void 0!==e[0].duration&&(i=1),void 0!==e[0].size&&(s=2),void 0!==e[0].flags&&(r=4),void 0!==e[0].compositionTimeOffset)&&(n=8),[0,0,i|s|r|n,1,(4278190080&e.length)>>>24,(16711680&e.length)>>>16,(65280&e.length)>>>8,255&e.length,(4278190080&t)>>>24,(16711680&t)>>>16,(65280&t)>>>8,255&t]},me=function(e,t){var i,s,r,n,a=e.samples||[];for(t+=20+16*a.length,e=pe(a,t),(s=new Uint8Array(e.length+16*a.length)).set(e),i=e.length,n=0;n<a.length;n++)r=a[n],s[i++]=(4278190080&r.duration)>>>24,s[i++]=(16711680&r.duration)>>>16,s[i++]=(65280&r.duration)>>>8,s[i++]=255&r.duration,s[i++]=(4278190080&r.size)>>>24,s[i++]=(16711680&r.size)>>>16,s[i++]=(65280&r.size)>>>8,s[i++]=255&r.size,s[i++]=r.flags.isLeading<<2|r.flags.dependsOn,s[i++]=r.flags.isDependedOn<<6|r.flags.hasRedundancy<<4|r.flags.paddingValue<<1|r.flags.isNonSyncSample,s[i++]=61440&r.flags.degradationPriority,s[i++]=15&r.flags.degradationPriority,s[i++]=(4278190080&r.compositionTimeOffset)>>>24,s[i++]=(16711680&r.compositionTimeOffset)>>>16,s[i++]=(65280&r.compositionTimeOffset)>>>8,s[i++]=255&r.compositionTimeOffset;return l(d.trun,s)},ge=function(e,t){var i,s,r,n,a=e.samples||[];for(t+=20+8*a.length,e=pe(a,t),(i=new Uint8Array(e.length+8*a.length)).set(e),s=e.length,n=0;n<a.length;n++)r=a[n],i[s++]=(4278190080&r.duration)>>>24,i[s++]=(16711680&r.duration)>>>16,i[s++]=(65280&r.duration)>>>8,i[s++]=255&r.duration,i[s++]=(4278190080&r.size)>>>24,i[s++]=(16711680&r.size)>>>16,i[s++]=(65280&r.size)>>>8,i[s++]=255&r.size;return l(d.trun,i)},ee=function(e,t){return("audio"===e.type?ge:me)(e,t)};function ve(e,t){var i=Ie();return i.dataOffset=t,i.compositionTimeOffset=e.pts-e.dts,i.duration=e.duration,i.size=4*e.length,i.size+=e.byteLength,e.keyFrame&&(i.flags.dependsOn=2,i.flags.isNonSyncSample=0),i}function n(e){for(var t=[];e--;)t.push(0);return t}function a(e){e=e||{},a.prototype.init.call(this),this.parse708captions_="boolean"!=typeof e.parse708captions||e.parse708captions,this.captionPackets_=[],this.ccStreams_=[new g(0,0),new g(0,1),new g(1,0),new g(1,1)],this.parse708captions_&&(this.cc708Stream_=new m({captionServices:e.captionServices})),this.reset(),this.ccStreams_.forEach(function(e){e.on("data",this.trigger.bind(this,"data")),e.on("partialdone",this.trigger.bind(this,"partialdone")),e.on("done",this.trigger.bind(this,"done"))},this),this.parse708captions_&&(this.cc708Stream_.on("data",this.trigger.bind(this,"data")),this.cc708Stream_.on("partialdone",this.trigger.bind(this,"partialdone")),this.cc708Stream_.on("done",this.trigger.bind(this,"done")))}function be(e){return 32<=e&&e<=127||160<=e&&e<=255}function o(e){this.windowNum=e,this.reset()}function Te(e,t,i){this.serviceNum=e,this.text="",this.currentWindow=new o(-1),this.windows=[],this.stream=i,"string"==typeof t&&this.createTextDecoder(t)}function Se(e){return null===e?"":(e=Fe[e]||e,String.fromCharCode(e))}function h(){for(var e=[],t=qe+1;t--;)e.push({text:"",indent:0,offset:0});return e}function we(e,t){var i=1;for(t<e&&(i=-1);Math.abs(t-e)>ze;)e+=i*$e;return e}function Ee(e){var t,i;Ee.prototype.init.call(this),this.type_=e||"shared",this.push=function(e){"metadata"===e.type?this.trigger("data",e):"shared"!==this.type_&&e.type!==this.type_||(void 0===i&&(i=e.dts),e.dts=we(e.dts,i),e.pts=we(e.pts,i),t=e.dts,this.trigger("data",e))},this.flush=function(){i=t,this.trigger("done")},this.endTimeline=function(){this.flush(),this.trigger("endedtimeline")},this.discontinuity=function(){t=i=void 0},this.reset=function(){this.discontinuity(),this.trigger("reset")}}var Ce,ke={ftyp:B=function(){return l(d.ftyp,te,ie,te,se)},mdat:function(e){return l(d.mdat,e)},moof:function(e,t){for(var i=[],s=t.length;s--;)i[s]=J(t[s]);return l.apply(null,[d.moof,F(e)].concat(i))},moov:j=function(e){for(var t=e.length,i=[];t--;)i[t]=$(e[t]);return l.apply(null,[d.moov,V(4294967295)].concat(i).concat(H(e)))},initSegment:function(e){var t=B(),e=j(e),i=new Uint8Array(t.byteLength+e.byteLength);return i.set(t),i.set(e,t.byteLength),i}},Ie=function(){return{size:0,flags:{isLeading:0,dependsOn:1,isDependedOn:0,hasRedundancy:0,degradationPriority:0,isNonSyncSample:1}}},xe={groupNalsIntoFrames:function(e){var t,i,s=[],r=[];for(r.byteLength=0,r.nalCount=0,t=s.byteLength=r.duration=0;t<e.length;t++)"access_unit_delimiter_rbsp"===(i=e[t]).nalUnitType?(s.length&&(s.duration=i.dts-s.dts,r.byteLength+=s.byteLength,r.nalCount+=s.length,r.duration+=s.duration,r.push(s)),(s=[i]).byteLength=i.data.byteLength,s.pts=i.pts,s.dts=i.dts):("slice_layer_without_partitioning_rbsp_idr"===i.nalUnitType&&(s.keyFrame=!0),s.duration=i.dts-s.dts,s.byteLength+=i.data.byteLength,s.push(i));return r.length&&(!s.duration||s.duration<=0)&&(s.duration=r[r.length-1].duration),r.byteLength+=s.byteLength,r.nalCount+=s.length,r.duration+=s.duration,r.push(s),r},groupFramesIntoGops:function(e){var t,i,s=[],r=[];for(s.byteLength=0,s.nalCount=0,s.duration=0,s.pts=e[0].pts,s.dts=e[0].dts,r.byteLength=0,r.nalCount=0,r.duration=0,r.pts=e[0].pts,r.dts=e[0].dts,t=0;t<e.length;t++)(i=e[t]).keyFrame?(s.length&&(r.push(s),r.byteLength+=s.byteLength,r.nalCount+=s.nalCount,r.duration+=s.duration),(s=[i]).nalCount=i.length,s.byteLength=i.byteLength,s.pts=i.pts,s.dts=i.dts,s.duration=i.duration):(s.duration+=i.duration,s.nalCount+=i.length,s.byteLength+=i.byteLength,s.push(i));return r.length&&s.duration<=0&&(s.duration=r[r.length-1].duration),r.byteLength+=s.byteLength,r.nalCount+=s.nalCount,r.duration+=s.duration,r.push(s),r},extendFirstKeyFrame:function(e){var t;return!e[0][0].keyFrame&&1<e.length&&(t=e.shift(),e.byteLength-=t.byteLength,e.nalCount-=t.nalCount,e[0][0].dts=t.dts,e[0][0].pts=t.pts,e[0][0].duration+=t.duration),e},generateSampleTable:function(e,t){for(var i,s,r,n=t||0,a=[],o=0;o<e.length;o++)for(s=e[o],i=0;i<s.length;i++)r=s[i],n+=(r=ve(r,n)).size,a.push(r);return a},concatenateNalData:function(e){for(var t,i,s,r,n,a=0,o=e.byteLength,l=e.nalCount,d=new Uint8Array(o+4*l),h=new DataView(d.buffer),u=0;u<e.length;u++)for(s=e[u],t=0;t<s.length;t++)for(r=s[t],i=0;i<r.length;i++)n=r[i],h.setUint32(a,n.data.byteLength),d.set(n.data,a+=4),a+=n.data.byteLength;return d},generateSampleTableForFrame:function(e,t){var i=[],e=ve(e,t||0);return i.push(e),i},concatenateNalDataForFrame:function(e){for(var t,i=0,s=e.byteLength,r=e.length,n=new Uint8Array(s+4*r),a=new DataView(n.buffer),o=0;o<e.length;o++)t=e[o],a.setUint32(i,t.data.byteLength),n.set(t.data,i+=4),i+=t.data.byteLength;return n}},u=[33,16,5,32,164,27],Ae=[33,65,108,84,1,2,4,8,168,2,4,8,17,191,252],De=function(e){return 9e4*e},Pe=function(e,t){return e*t},Le=function(e){return e/9e4},Oe=function(e,t){return e/t},c={ONE_SECOND_IN_TS:9e4,secondsToVideoTs:De,secondsToAudioTs:Pe,videoTsToSeconds:Le,audioTsToSeconds:Oe,audioTsToVideoTs:function(e,t){return e/t*9e4},videoTsToAudioTs:function(e,t){return e/9e4*t},metadataTsToSeconds:function(e,t,i){return Le(i?e:e-t)}},Re=function(){var e,i;return Ce||(e={96e3:[u,[227,64],n(154),[56]],88200:[u,[231],n(170),[56]],64e3:[u,[248,192],n(240),[56]],48e3:[u,[255,192],n(268),[55,148,128],n(54),[112]],44100:[u,[255,192],n(268),[55,163,128],n(84),[112]],32e3:[u,[255,192],n(268),[55,234],n(226),[112]],24e3:[u,[255,192],n(268),[55,255,128],n(268),[111,112],n(126),[224]],16e3:[u,[255,192],n(268),[55,255,128],n(268),[111,255],n(269),[223,108],n(195),[1,192]],12e3:[Ae,n(268),[3,127,248],n(268),[6,255,240],n(268),[13,255,224],n(268),[27,253,128],n(259),[56]],11025:[Ae,n(268),[3,127,248],n(268),[6,255,240],n(268),[13,255,224],n(268),[27,255,192],n(268),[55,175,128],n(108),[112]],8e3:[Ae,n(268),[3,121,16],n(47),[7]]},i=e,Ce=Object.keys(i).reduce(function(e,t){return e[t]=new Uint8Array(i[t].reduce(function(e,t){return e.concat(t)},[])),e},{})),Ce},Ne=c,De={prefixWithSilence:function(e,t,i,s){var r,n,a,o,l,d=0,h=0;if(t.length&&(n=Ne.audioTsToVideoTs(e.baseMediaDecodeTime,e.samplerate),r=Math.ceil(Ne.ONE_SECOND_IN_TS/(e.samplerate/1024)),i&&s&&(n=n-Math.max(i,s),h=(d=Math.floor(n/r))*r),!(d<1||h>Ne.ONE_SECOND_IN_TS/2))){for(a=(a=Re()[e.samplerate])||t[0].data,o=0;o<d;o++)l=t[0],t.splice(0,0,{data:a,dts:l.dts-r,pts:l.pts-r});return e.baseMediaDecodeTime-=Math.floor(Ne.videoTsToAudioTs(h,e.samplerate)),h}},trimAdtsFramesByEarliestDts:function(e,t,i){return t.minSegmentDts>=i?e:(t.minSegmentDts=1/0,e.filter(function(e){return e.dts>=i&&(t.minSegmentDts=Math.min(t.minSegmentDts,e.dts),t.minSegmentPts=t.minSegmentDts,!0)}))},generateSampleTable:function(e){for(var t,i=[],s=0;s<e.length;s++)t=e[s],i.push({size:t.data.byteLength,duration:1024});return i},concatenateFrameData:function(e){for(var t,i=0,s=new Uint8Array(function(e){for(var t=0,i=0;i<e.length;i++)t+=e[i].data.byteLength;return t}(e)),r=0;r<e.length;r++)t=e[r],s.set(t.data,i),i+=t.data.byteLength;return s}},Me=c.ONE_SECOND_IN_TS,Pe={clearDtsInfo:function(e){delete e.minSegmentDts,delete e.maxSegmentDts,delete e.minSegmentPts,delete e.maxSegmentPts},calculateTrackBaseMediaDecodeTime:function(e,t){var i=e.minSegmentDts;return t||(i-=e.timelineStartInfo.dts),t=e.timelineStartInfo.baseMediaDecodeTime,t+=i,t=Math.max(0,t),"audio"===e.type&&(t*=e.samplerate/Me,t=Math.floor(t)),t},collectDtsInfo:function(e,t){"number"==typeof t.pts&&(void 0===e.timelineStartInfo.pts&&(e.timelineStartInfo.pts=t.pts),void 0===e.minSegmentPts?e.minSegmentPts=t.pts:e.minSegmentPts=Math.min(e.minSegmentPts,t.pts),void 0===e.maxSegmentPts?e.maxSegmentPts=t.pts:e.maxSegmentPts=Math.max(e.maxSegmentPts,t.pts)),"number"==typeof t.dts&&(void 0===e.timelineStartInfo.dts&&(e.timelineStartInfo.dts=t.dts),void 0===e.minSegmentDts?e.minSegmentDts=t.dts:e.minSegmentDts=Math.min(e.minSegmentDts,t.dts),void 0===e.maxSegmentDts?e.maxSegmentDts=t.dts:e.maxSegmentDts=Math.max(e.maxSegmentDts,t.dts))}},Oe={parseSei:function(e){for(var t=0,i={payloadType:-1,payloadSize:0},s=0,r=0;t<e.byteLength&&128!==e[t];){for(;255===e[t];)s+=255,t++;for(s+=e[t++];255===e[t];)r+=255,t++;if(r+=e[t++],!i.payload&&4===s){if("GA94"===String.fromCharCode(e[t+3],e[t+4],e[t+5],e[t+6])){i.payloadType=s,i.payloadSize=r,i.payload=e.subarray(t,t+r);break}i.payload=void 0}t+=r,r=s=0}return i},parseUserData:function(e){return 181!==e.payload[0]||49!=(e.payload[1]<<8|e.payload[2])||"GA94"!==String.fromCharCode(e.payload[3],e.payload[4],e.payload[5],e.payload[6])||3!==e.payload[7]?null:e.payload.subarray(8,e.payload.length-1)},parseCaptionPackets:function(e,t){var i,s,r,n,a=[];if(64&t[0])for(s=31&t[0],i=0;i<s;i++)n={type:3&t[2+(r=3*i)],pts:e},4&t[2+r]&&(n.ccData=t[3+r]<<8|t[4+r],a.push(n));return a},discardEmulationPreventionBytes:function(e){for(var t=e.byteLength,i=[],s=1;s<t-2;)0===e[s]&&0===e[s+1]&&3===e[s+2]?(i.push(s+2),s+=2):s++;if(0===i.length)return e;for(var r=t-i.length,n=new Uint8Array(r),a=0,s=0;s<r;a++,s++)a===i[0]&&(a++,i.shift()),n[s]=e[a];return n},USER_DATA_REGISTERED_ITU_T_T35:4},p=i,Ue=Oe,Be=((a.prototype=new p).push=function(e){var t;"sei_rbsp"===e.nalUnitType&&(t=Ue.parseSei(e.escapedRBSP)).payload&&t.payloadType===Ue.USER_DATA_REGISTERED_ITU_T_T35&&(t=Ue.parseUserData(t))&&(e.dts<this.latestDts_?this.ignoreNextEqualDts_=!0:e.dts===this.latestDts_&&this.ignoreNextEqualDts_?(this.numSameDts_--,this.numSameDts_||(this.ignoreNextEqualDts_=!1)):(t=Ue.parseCaptionPackets(e.pts,t),this.captionPackets_=this.captionPackets_.concat(t),this.latestDts_!==e.dts&&(this.numSameDts_=0),this.numSameDts_++,this.latestDts_=e.dts))},a.prototype.flushCCStreams=function(t){this.ccStreams_.forEach(function(e){return"flush"===t?e.flush():e.partialFlush()},this)},a.prototype.flushStream=function(e){this.captionPackets_.length&&(this.captionPackets_.forEach(function(e,t){e.presortIndex=t}),this.captionPackets_.sort(function(e,t){return e.pts===t.pts?e.presortIndex-t.presortIndex:e.pts-t.pts}),this.captionPackets_.forEach(function(e){e.type<2?this.dispatchCea608Packet(e):this.dispatchCea708Packet(e)},this),this.captionPackets_.length=0),this.flushCCStreams(e)},a.prototype.flush=function(){return this.flushStream("flush")},a.prototype.partialFlush=function(){return this.flushStream("partialFlush")},a.prototype.reset=function(){this.latestDts_=null,this.ignoreNextEqualDts_=!1,this.numSameDts_=0,this.activeCea608Channel_=[null,null],this.ccStreams_.forEach(function(e){e.reset()})},a.prototype.dispatchCea608Packet=function(e){this.setsTextOrXDSActive(e)?this.activeCea608Channel_[e.type]=null:this.setsChannel1Active(e)?this.activeCea608Channel_[e.type]=0:this.setsChannel2Active(e)&&(this.activeCea608Channel_[e.type]=1),null!==this.activeCea608Channel_[e.type]&&this.ccStreams_[(e.type<<1)+this.activeCea608Channel_[e.type]].push(e)},a.prototype.setsChannel1Active=function(e){return 4096==(30720&e.ccData)},a.prototype.setsChannel2Active=function(e){return 6144==(30720&e.ccData)},a.prototype.setsTextOrXDSActive=function(e){return 256==(28928&e.ccData)||4138==(30974&e.ccData)||6186==(30974&e.ccData)},a.prototype.dispatchCea708Packet=function(e){this.parse708captions_&&this.cc708Stream_.push(e)},{127:9834,4128:32,4129:160,4133:8230,4138:352,4140:338,4144:9608,4145:8216,4146:8217,4147:8220,4148:8221,4149:8226,4153:8482,4154:353,4156:339,4157:8480,4159:376,4214:8539,4215:8540,4216:8541,4217:8542,4218:9168,4219:9124,4220:9123,4221:9135,4222:9126,4223:9121,4256:12600}),m=(o.prototype.reset=function(){this.clearText(),this.pendingNewLine=!1,this.winAttr={},this.penAttr={},this.penLoc={},this.penColor={},this.visible=0,this.rowLock=0,this.columnLock=0,this.priority=0,this.relativePositioning=0,this.anchorVertical=0,this.anchorHorizontal=0,this.anchorPoint=0,this.rowCount=1,this.virtualRowCount=this.rowCount+1,this.columnCount=41,this.windowStyle=0,this.penStyle=0},o.prototype.getText=function(){return this.rows.join("\n")},o.prototype.clearText=function(){this.rows=[""],this.rowIdx=0},o.prototype.newLine=function(e){for(this.rows.length>=this.virtualRowCount&&"function"==typeof this.beforeRowOverflow&&this.beforeRowOverflow(e),0<this.rows.length&&(this.rows.push(""),this.rowIdx++);this.rows.length>this.virtualRowCount;)this.rows.shift(),this.rowIdx--},o.prototype.isEmpty=function(){return 0===this.rows.length||1===this.rows.length&&""===this.rows[0]},o.prototype.addText=function(e){this.rows[this.rowIdx]+=e},o.prototype.backspace=function(){var e;this.isEmpty()||(e=this.rows[this.rowIdx],this.rows[this.rowIdx]=e.substr(0,e.length-1))},Te.prototype.init=function(e,t){this.startPts=e;for(var i=0;i<8;i++)this.windows[i]=new o(i),"function"==typeof t&&(this.windows[i].beforeRowOverflow=t)},Te.prototype.setCurrentWindow=function(e){this.currentWindow=this.windows[e]},Te.prototype.createTextDecoder=function(t){if("undefined"==typeof TextDecoder)this.stream.trigger("log",{level:"warn",message:"The `encoding` option is unsupported without TextDecoder support"});else try{this.textDecoder_=new TextDecoder(t)}catch(e){this.stream.trigger("log",{level:"warn",message:"TextDecoder could not be created with "+t+" encoding. "+e})}},function(e){e=e||{},m.prototype.init.call(this);var t,i=this,s=e.captionServices||{},r={};Object.keys(s).forEach(e=>{t=s[e],/^SERVICE/.test(e)&&(r[e]=t.encoding)}),this.serviceEncodings=r,this.current708Packet=null,this.services={},this.push=function(e){(3===e.type||null===i.current708Packet)&&i.new708Packet(),i.add708Bytes(e)}}),Fe=(m.prototype=new p,m.prototype.new708Packet=function(){null!==this.current708Packet&&this.push708Packet(),this.current708Packet={data:[],ptsVals:[]}},m.prototype.add708Bytes=function(e){var t=e.ccData,i=t>>>8,t=255&t;this.current708Packet.ptsVals.push(e.pts),this.current708Packet.data.push(i),this.current708Packet.data.push(t)},m.prototype.push708Packet=function(){var e,t=this.current708Packet,i=t.data,s=null,r=0,n=i[r++];for(t.seq=n>>6,t.sizeCode=63&n;r<i.length;r++)e=31&(n=i[r++]),7===(s=n>>5)&&0<e&&(s=i[r++]),this.pushServiceBlock(s,r,e),0<e&&(r+=e-1)},m.prototype.pushServiceBlock=function(e,t,i){for(var s,r=t,n=this.current708Packet.data,a=(a=this.services[e])||this.initService(e,r);r<t+i&&r<n.length;r++)s=n[r],be(s)?r=this.handleText(r,a):24===s?r=this.multiByteCharacter(r,a):16===s?r=this.extendedCommands(r,a):128<=s&&s<=135?r=this.setCurrentWindow(r,a):152<=s&&s<=159?r=this.defineWindow(r,a):136===s?r=this.clearWindows(r,a):140===s?r=this.deleteWindows(r,a):137===s?r=this.displayWindows(r,a):138===s?r=this.hideWindows(r,a):139===s?r=this.toggleWindows(r,a):151===s?r=this.setWindowAttributes(r,a):144===s?r=this.setPenAttributes(r,a):145===s?r=this.setPenColor(r,a):146===s?r=this.setPenLocation(r,a):143===s?a=this.reset(r,a):8===s?a.currentWindow.backspace():12===s?a.currentWindow.clearText():13===s?a.currentWindow.pendingNewLine=!0:14===s?a.currentWindow.clearText():141===s&&r++},m.prototype.extendedCommands=function(e,t){var i=this.current708Packet.data[++e];return e=be(i)?this.handleText(e,t,{isExtended:!0}):e},m.prototype.getPts=function(e){return this.current708Packet.ptsVals[Math.floor(e/2)]},m.prototype.initService=function(t,e){var i,s="SERVICE"+t,r=this;return s in this.serviceEncodings&&(i=this.serviceEncodings[s]),this.services[t]=new Te(t,i,r),this.services[t].init(this.getPts(e),function(e){r.flushDisplayed(e,r.services[t])}),this.services[t]},m.prototype.handleText=function(e,t,i){var s,r=i&&i.isExtended,i=i&&i.isMultiByte,n=this.current708Packet.data,a=r?4096:0,o=n[e],n=n[e+1],l=t.currentWindow;return i?(s=[o,n],e++):s=[o],i=t.textDecoder_&&!r?t.textDecoder_.decode(new Uint8Array(s)):i?(n=s.map(e=>("0"+(255&e).toString(16)).slice(-2)).join(""),String.fromCharCode(parseInt(n,16))):(t=Be[r=a|o]||r,4096&r&&r===t?"":String.fromCharCode(t)),l.pendingNewLine&&!l.isEmpty()&&l.newLine(this.getPts(e)),l.pendingNewLine=!1,l.addText(i),e},m.prototype.multiByteCharacter=function(e,t){var i=this.current708Packet.data,s=i[e+1],i=i[e+2];return e=be(s)&&be(i)?this.handleText(++e,t,{isMultiByte:!0}):e},m.prototype.setCurrentWindow=function(e,t){var i=this.current708Packet.data[e];return t.setCurrentWindow(7&i),e},m.prototype.defineWindow=function(e,t){var i=this.current708Packet.data,s=i[e],t=(t.setCurrentWindow(7&s),t.currentWindow),s=i[++e];return t.visible=(32&s)>>5,t.rowLock=(16&s)>>4,t.columnLock=(8&s)>>3,t.priority=7&s,s=i[++e],t.relativePositioning=(128&s)>>7,t.anchorVertical=127&s,s=i[++e],t.anchorHorizontal=s,s=i[++e],t.anchorPoint=(240&s)>>4,t.rowCount=15&s,s=i[++e],t.columnCount=63&s,s=i[++e],t.windowStyle=(56&s)>>3,t.penStyle=7&s,t.virtualRowCount=t.rowCount+1,e},m.prototype.setWindowAttributes=function(e,t){var i=this.current708Packet.data,t=(i[e],t.currentWindow.winAttr),s=i[++e];return t.fillOpacity=(192&s)>>6,t.fillRed=(48&s)>>4,t.fillGreen=(12&s)>>2,t.fillBlue=3&s,s=i[++e],t.borderType=(192&s)>>6,t.borderRed=(48&s)>>4,t.borderGreen=(12&s)>>2,t.borderBlue=3&s,s=i[++e],t.borderType+=(128&s)>>5,t.wordWrap=(64&s)>>6,t.printDirection=(48&s)>>4,t.scrollDirection=(12&s)>>2,t.justify=3&s,s=i[++e],t.effectSpeed=(240&s)>>4,t.effectDirection=(12&s)>>2,t.displayEffect=3&s,e},m.prototype.flushDisplayed=function(e,t){for(var i=[],s=0;s<8;s++)t.windows[s].visible&&!t.windows[s].isEmpty()&&i.push(t.windows[s].getText());t.endPts=e,t.text=i.join("\n\n"),this.pushCaption(t),t.startPts=e},m.prototype.pushCaption=function(e){""!==e.text&&(this.trigger("data",{startPts:e.startPts,endPts:e.endPts,text:e.text,stream:"cc708_"+e.serviceNum}),e.text="",e.startPts=e.endPts)},m.prototype.displayWindows=function(e,t){var i=this.current708Packet.data[++e],s=this.getPts(e);this.flushDisplayed(s,t);for(var r=0;r<8;r++)i&1<<r&&(t.windows[r].visible=1);return e},m.prototype.hideWindows=function(e,t){var i=this.current708Packet.data[++e],s=this.getPts(e);this.flushDisplayed(s,t);for(var r=0;r<8;r++)i&1<<r&&(t.windows[r].visible=0);return e},m.prototype.toggleWindows=function(e,t){var i=this.current708Packet.data[++e],s=this.getPts(e);this.flushDisplayed(s,t);for(var r=0;r<8;r++)i&1<<r&&(t.windows[r].visible^=1);return e},m.prototype.clearWindows=function(e,t){var i=this.current708Packet.data[++e],s=this.getPts(e);this.flushDisplayed(s,t);for(var r=0;r<8;r++)i&1<<r&&t.windows[r].clearText();return e},m.prototype.deleteWindows=function(e,t){var i=this.current708Packet.data[++e],s=this.getPts(e);this.flushDisplayed(s,t);for(var r=0;r<8;r++)i&1<<r&&t.windows[r].reset();return e},m.prototype.setPenAttributes=function(e,t){var i=this.current708Packet.data,t=(i[e],t.currentWindow.penAttr),s=i[++e];return t.textTag=(240&s)>>4,t.offset=(12&s)>>2,t.penSize=3&s,s=i[++e],t.italics=(128&s)>>7,t.underline=(64&s)>>6,t.edgeType=(56&s)>>3,t.fontStyle=7&s,e},m.prototype.setPenColor=function(e,t){var i=this.current708Packet.data,t=(i[e],t.currentWindow.penColor),s=i[++e];return t.fgOpacity=(192&s)>>6,t.fgRed=(48&s)>>4,t.fgGreen=(12&s)>>2,t.fgBlue=3&s,s=i[++e],t.bgOpacity=(192&s)>>6,t.bgRed=(48&s)>>4,t.bgGreen=(12&s)>>2,t.bgBlue=3&s,s=i[++e],t.edgeRed=(48&s)>>4,t.edgeGreen=(12&s)>>2,t.edgeBlue=3&s,e},m.prototype.setPenLocation=function(e,t){var i=this.current708Packet.data,s=(i[e],t.currentWindow.penLoc);return t.currentWindow.pendingNewLine=!0,t=i[++e],s.row=15&t,t=i[++e],s.column=63&t,e},m.prototype.reset=function(e,t){var i=this.getPts(e);return this.flushDisplayed(i,t),this.initService(t.serviceNum,e)},{42:225,92:233,94:237,95:243,96:250,123:231,124:247,125:209,126:241,127:9608,304:174,305:176,306:189,307:191,308:8482,309:162,310:163,311:9834,312:224,313:160,314:232,315:226,316:234,317:238,318:244,319:251,544:193,545:201,546:211,547:218,548:220,549:252,550:8216,551:161,552:42,553:39,554:8212,555:169,556:8480,557:8226,558:8220,559:8221,560:192,561:194,562:199,563:200,564:202,565:203,566:235,567:206,568:207,569:239,570:212,571:217,572:249,573:219,574:171,575:187,800:195,801:227,802:205,803:204,804:236,805:210,806:242,807:213,808:245,809:123,810:125,811:92,812:94,813:95,814:124,815:126,816:196,817:228,818:214,819:246,820:223,821:165,822:164,823:9474,824:197,825:229,826:216,827:248,828:9484,829:9488,830:9492,831:9496}),qe=14,je=[4352,4384,4608,4640,5376,5408,5632,5664,5888,5920,4096,4864,4896,5120,5152],g=function(e,t){g.prototype.init.call(this),this.field_=e||0,this.dataChannel_=t||0,this.name_="CC"+(1+(this.field_<<1|this.dataChannel_)),this.setConstants(),this.reset(),this.push=function(e){var t,i,s,r,n=32639&e.ccData;n===this.lastControlCode_?this.lastControlCode_=null:(4096==(61440&n)?this.lastControlCode_=n:n!==this.PADDING_&&(this.lastControlCode_=null),t=n>>>8,i=255&n,n!==this.PADDING_&&(n===this.RESUME_CAPTION_LOADING_?this.mode_="popOn":n===this.END_OF_CAPTION_?(this.mode_="popOn",this.clearFormatting(e.pts),this.flushDisplayed(e.pts),r=this.displayed_,this.displayed_=this.nonDisplayed_,this.nonDisplayed_=r,this.startPts_=e.pts):n===this.ROLL_UP_2_ROWS_?(this.rollUpRows_=2,this.setRollUp(e.pts)):n===this.ROLL_UP_3_ROWS_?(this.rollUpRows_=3,this.setRollUp(e.pts)):n===this.ROLL_UP_4_ROWS_?(this.rollUpRows_=4,this.setRollUp(e.pts)):n===this.CARRIAGE_RETURN_?(this.clearFormatting(e.pts),this.flushDisplayed(e.pts),this.shiftRowsUp_(),this.startPts_=e.pts):n===this.BACKSPACE_?"popOn"===this.mode_?this.nonDisplayed_[this.row_].text=this.nonDisplayed_[this.row_].text.slice(0,-1):this.displayed_[this.row_].text=this.displayed_[this.row_].text.slice(0,-1):n===this.ERASE_DISPLAYED_MEMORY_?(this.flushDisplayed(e.pts),this.displayed_=h()):n===this.ERASE_NON_DISPLAYED_MEMORY_?this.nonDisplayed_=h():n===this.RESUME_DIRECT_CAPTIONING_?("paintOn"!==this.mode_&&(this.flushDisplayed(e.pts),this.displayed_=h()),this.mode_="paintOn",this.startPts_=e.pts):this.isSpecialCharacter(t,i)?(s=Se((t=(3&t)<<8)|i),this[this.mode_](e.pts,s),this.column_++):this.isExtCharacter(t,i)?("popOn"===this.mode_?this.nonDisplayed_[this.row_].text=this.nonDisplayed_[this.row_].text.slice(0,-1):this.displayed_[this.row_].text=this.displayed_[this.row_].text.slice(0,-1),s=Se((t=(3&t)<<8)|i),this[this.mode_](e.pts,s),this.column_++):this.isMidRowCode(t,i)?(this.clearFormatting(e.pts),this[this.mode_](e.pts," "),this.column_++,14==(14&i)&&this.addFormatting(e.pts,["i"]),1==(1&i)&&this.addFormatting(e.pts,["u"])):this.isOffsetControlCode(t,i)?(this.nonDisplayed_[this.row_].offset=r=3&i,this.column_+=r):this.isPAC(t,i)?(r=je.indexOf(7968&n),"rollUp"===this.mode_&&(r-this.rollUpRows_+1<0&&(r=this.rollUpRows_-1),this.setRollUp(e.pts,r)),r!==this.row_&&0<=r&&r<=14&&(this.clearFormatting(e.pts),this.row_=r),1&i&&-1===this.formatting_.indexOf("u")&&this.addFormatting(e.pts,["u"]),16==(16&n)&&(this.column_=4*(r=(14&n)>>1),this.nonDisplayed_[this.row_].indent+=r),this.isColorPAC(i)&&14==(14&i)&&this.addFormatting(e.pts,["i"])):this.isNormalChar(t)&&(0===i&&(i=null),s=Se(t),s+=Se(i),this[this.mode_](e.pts,s),this.column_+=s.length)))}},p=(g.prototype=new p,g.prototype.flushDisplayed=function(e){const i=e=>{this.trigger("log",{level:"warn",message:"Skipping a malformed 608 caption at index "+e+"."})},s=[];this.displayed_.forEach((e,t)=>{if(e&&e.text&&e.text.length){try{e.text=e.text.trim()}catch(e){i(t)}e.text.length&&s.push({text:e.text,line:t+1,position:10+Math.min(70,10*e.indent)+2.5*e.offset})}else null==e&&i(t)}),s.length&&this.trigger("data",{startPts:this.startPts_,endPts:e,content:s,stream:this.name_})},g.prototype.reset=function(){this.mode_="popOn",this.topRow_=0,this.startPts_=0,this.displayed_=h(),this.nonDisplayed_=h(),this.lastControlCode_=null,this.column_=0,this.row_=qe,this.rollUpRows_=2,this.formatting_=[]},g.prototype.setConstants=function(){0===this.dataChannel_?(this.BASE_=16,this.EXT_=17,this.CONTROL_=(20|this.field_)<<8,this.OFFSET_=23):1===this.dataChannel_&&(this.BASE_=24,this.EXT_=25,this.CONTROL_=(28|this.field_)<<8,this.OFFSET_=31),this.PADDING_=0,this.RESUME_CAPTION_LOADING_=32|this.CONTROL_,this.END_OF_CAPTION_=47|this.CONTROL_,this.ROLL_UP_2_ROWS_=37|this.CONTROL_,this.ROLL_UP_3_ROWS_=38|this.CONTROL_,this.ROLL_UP_4_ROWS_=39|this.CONTROL_,this.CARRIAGE_RETURN_=45|this.CONTROL_,this.RESUME_DIRECT_CAPTIONING_=41|this.CONTROL_,this.BACKSPACE_=33|this.CONTROL_,this.ERASE_DISPLAYED_MEMORY_=44|this.CONTROL_,this.ERASE_NON_DISPLAYED_MEMORY_=46|this.CONTROL_},g.prototype.isSpecialCharacter=function(e,t){return e===this.EXT_&&48<=t&&t<=63},g.prototype.isExtCharacter=function(e,t){return(e===this.EXT_+1||e===this.EXT_+2)&&32<=t&&t<=63},g.prototype.isMidRowCode=function(e,t){return e===this.EXT_&&32<=t&&t<=47},g.prototype.isOffsetControlCode=function(e,t){return e===this.OFFSET_&&33<=t&&t<=35},g.prototype.isPAC=function(e,t){return e>=this.BASE_&&e<this.BASE_+8&&64<=t&&t<=127},g.prototype.isColorPAC=function(e){return 64<=e&&e<=79||96<=e&&e<=127},g.prototype.isNormalChar=function(e){return 32<=e&&e<=127},g.prototype.setRollUp=function(e,t){if("rollUp"!==this.mode_&&(this.row_=qe,this.mode_="rollUp",this.flushDisplayed(e),this.nonDisplayed_=h(),this.displayed_=h()),void 0!==t&&t!==this.row_)for(var i=0;i<this.rollUpRows_;i++)this.displayed_[t-i]=this.displayed_[this.row_-i],this.displayed_[this.row_-i]={text:"",indent:0,offset:0};void 0===t&&(t=this.row_),this.topRow_=t-this.rollUpRows_+1},g.prototype.addFormatting=function(e,t){this.formatting_=this.formatting_.concat(t);t=t.reduce(function(e,t){return e+"<"+t+">"},"");this[this.mode_](e,t)},g.prototype.clearFormatting=function(e){var t;this.formatting_.length&&(t=this.formatting_.reverse().reduce(function(e,t){return e+"</"+t+">"},""),this.formatting_=[],this[this.mode_](e,t))},g.prototype.popOn=function(e,t){var i=this.nonDisplayed_[this.row_].text;this.nonDisplayed_[this.row_].text=i+=t},g.prototype.rollUp=function(e,t){var i=this.displayed_[this.row_].text;this.displayed_[this.row_].text=i+=t},g.prototype.shiftRowsUp_=function(){for(var e=0;e<this.topRow_;e++)this.displayed_[e]={text:"",indent:0,offset:0};for(e=this.row_+1;e<qe+1;e++)this.displayed_[e]={text:"",indent:0,offset:0};for(e=this.topRow_;e<this.row_;e++)this.displayed_[e]=this.displayed_[e+1];this.displayed_[this.row_]={text:"",indent:0,offset:0}},g.prototype.paintOn=function(e,t){var i=this.displayed_[this.row_].text;this.displayed_[this.row_].text=i+=t},{CaptionStream:a,Cea608Stream:g,Cea708Stream:m}),He={H264_STREAM_TYPE:27,ADTS_STREAM_TYPE:15,METADATA_STREAM_TYPE:21},Ve=i,$e=8589934592,ze=4294967296;Ee.prototype=new Ve;function We(e,t,i){for(var s="",r=t;r<i;r++)s+="%"+("00"+e[r].toString(16)).slice(-2);return s}function f(e,t,i){return decodeURIComponent(We(e,t,i))}function y(e,t,i){return unescape(We(e,t,i))}function _(e){return e[0]<<21|e[1]<<14|e[2]<<7|e[3]}var Ge,Xe,Ke,Ve=Ee,Ye=we,Qe=(e,t,i)=>{if(e)for(var s=i;s<e.length;s++)if(e[s]===t)return s;return-1},Je=3,v={APIC:function(e){var t,i=1;e.data[0]!==Je||(t=Qe(e.data,0,1))<0||(e.mimeType=y(e.data,1,t),e.pictureType=e.data[i=t+1],(t=Qe(e.data,0,++i))<0)||(e.description=f(e.data,i,t),i=t+1,"--\x3e"===e.mimeType?e.url=y(e.data,i,e.data.length):e.pictureData=e.data.subarray(i,e.data.length))},"T*":function(e){e.data[0]===Je&&(e.value=f(e.data,1,e.data.length).replace(/\0*$/,""),e.values=e.value.split("\0"))},TXXX:function(e){var t;e.data[0]===Je&&-1!==(t=Qe(e.data,0,1))&&(e.description=f(e.data,1,t),e.value=f(e.data,t+1,e.data.length).replace(/\0*$/,""),e.data=e.value)},"W*":function(e){e.url=y(e.data,0,e.data.length).replace(/\0.*$/,"")},WXXX:function(e){var t;e.data[0]===Je&&-1!==(t=Qe(e.data,0,1))&&(e.description=f(e.data,1,t),e.url=y(e.data,t+1,e.data.length).replace(/\0.*$/,""))},PRIV:function(e){for(var t=0;t<e.data.length;t++)if(0===e.data[t]){e.owner=y(e.data,0,t);break}e.privateData=e.data.subarray(t+1),e.data=e.privateData}},Ze={parseId3Frames:function(e){var t,i=10,s=0,r=[];if(!(e.length<10||e[0]!=="I".charCodeAt(0)||e[1]!=="D".charCodeAt(0)||e[2]!=="3".charCodeAt(0))){s=_(e.subarray(6,10));s+=10,64&e[5]&&(i=(i+=4)+_(e.subarray(10,14)),s-=_(e.subarray(16,20)));do{if((t=_(e.subarray(i+4,i+8)))<1)break;var n={id:String.fromCharCode(e[i],e[i+1],e[i+2],e[i+3]),data:e.subarray(i+10,i+t+10)}}while(n.key=n.id,v[n.id]?v[n.id](n):"T"===n.id[0]?v["T*"](n):"W"===n.id[0]&&v["W*"](n),r.push(n),(i=i+10+t)<s);return r}},parseSyncSafeInteger:_,frameParsers:v},b=i,et=He,T=Ze,tt=function(e){var t,i={descriptor:e&&e.descriptor},l=0,d=[],h=0;if(tt.prototype.init.call(this),this.dispatchType=et.METADATA_STREAM_TYPE.toString(16),i.descriptor)for(t=0;t<i.descriptor.length;t++)this.dispatchType+=("00"+i.descriptor[t].toString(16)).slice(-2);this.push=function(e){var t,i,s,r,n,a,o;if("timed-metadata"===e.type)if(e.dataAlignmentIndicator&&(h=0,d.length=0),0===d.length&&(e.data.length<10||e.data[0]!=="I".charCodeAt(0)||e.data[1]!=="D".charCodeAt(0)||e.data[2]!=="3".charCodeAt(0)))this.trigger("log",{level:"warn",message:"Skipping unrecognized metadata packet"});else if(d.push(e),h+=e.data.byteLength,1===d.length&&(l=T.parseSyncSafeInteger(e.data.subarray(6,10)),l+=10),!(h<l)){for(t={data:new Uint8Array(l),frames:[],pts:d[0].pts,dts:d[0].dts},r=0;r<l;)t.data.set(d[0].data.subarray(0,l-r),r),r+=d[0].data.byteLength,h-=d[0].data.byteLength,d.shift();i=10,64&t.data[5]&&(i=(i+=4)+T.parseSyncSafeInteger(t.data.subarray(10,14)),l-=T.parseSyncSafeInteger(t.data.subarray(16,20)));do{if((s=T.parseSyncSafeInteger(t.data.subarray(i+4,i+8)))<1){this.trigger("log",{level:"warn",message:"Malformed ID3 frame encountered. Skipping remaining metadata parsing."});break}}while((o={id:String.fromCharCode(t.data[i],t.data[i+1],t.data[i+2],t.data[i+3]),data:t.data.subarray(i+10,i+s+10)}).key=o.id,T.frameParsers[o.id]?T.frameParsers[o.id](o):"T"===o.id[0]?T.frameParsers["T*"](o):"W"===o.id[0]&&T.frameParsers["W*"](o),"com.apple.streaming.transportStreamTimestamp"===o.owner&&(a=(1&(n=o.data)[3])<<30|n[4]<<22|n[5]<<14|n[6]<<6|n[7]>>>2,a=(a*=4)+(3&n[7]),o.timeStamp=a,void 0===t.pts&&void 0===t.dts&&(t.pts=o.timeStamp,t.dts=o.timeStamp),this.trigger("timestamp",o)),t.frames.push(o),(i=i+10+s)<l);this.trigger("data",t)}}},b=(tt.prototype=new b,tt),S=i,it=p,w=He,st=function(){var r=new Uint8Array(188),n=0;st.prototype.init.call(this),this.push=function(e){var t,i=0,s=188;for(n?((t=new Uint8Array(e.byteLength+n)).set(r.subarray(0,n)),t.set(e,n),n=0):t=e;s<t.byteLength;)71===t[i]&&71===t[s]?(this.trigger("data",t.subarray(i,s)),i+=188,s+=188):(i++,s++);i<t.byteLength&&(r.set(t.subarray(i),0),n=t.byteLength-i)},this.flush=function(){188===n&&71===r[0]&&(this.trigger("data",r),n=0),this.trigger("done")},this.endTimeline=function(){this.flush(),this.trigger("endedtimeline")},this.reset=function(){n=0,this.trigger("reset")}},rt=(st.prototype=new S,(Ge=function(){var s,r,n,a;Ge.prototype.init.call(this),(a=this).packetsWaitingForPmt=[],this.programMapTable=void 0,s=function(e,t){var i=0;t.payloadUnitStartIndicator&&(i+=e[i]+1),("pat"===t.type?r:n)(e.subarray(i),t)},r=function(e,t){t.section_number=e[7],t.last_section_number=e[8],a.pmtPid=(31&e[10])<<8|e[11],t.pmtPid=a.pmtPid},n=function(e,t){var i,s;if(1&e[5]){for(a.programMapTable={video:null,audio:null,"timed-metadata":{}},i=3+((15&e[1])<<8|e[2])-4,s=12+((15&e[10])<<8|e[11]);s<i;){var r=e[s],n=(31&e[s+1])<<8|e[s+2];r===w.H264_STREAM_TYPE&&null===a.programMapTable.video?a.programMapTable.video=n:r===w.ADTS_STREAM_TYPE&&null===a.programMapTable.audio?a.programMapTable.audio=n:r===w.METADATA_STREAM_TYPE&&(a.programMapTable["timed-metadata"][n]=r),s+=5+((15&e[s+3])<<8|e[s+4])}t.programMapTable=a.programMapTable}},this.push=function(e){var t={},i=4;if(t.payloadUnitStartIndicator=!!(64&e[1]),t.pid=31&e[1],t.pid<<=8,t.pid|=e[2],1<(48&e[3])>>>4&&(i+=e[i]+1),0===t.pid)t.type="pat",s(e.subarray(i),t),this.trigger("data",t);else if(t.pid===this.pmtPid)for(t.type="pmt",s(e.subarray(i),t),this.trigger("data",t);this.packetsWaitingForPmt.length;)this.processPes_.apply(this,this.packetsWaitingForPmt.shift());else void 0===this.programMapTable?this.packetsWaitingForPmt.push([e,i,t]):this.processPes_(e,i,t)},this.processPes_=function(e,t,i){i.pid===this.programMapTable.video?i.streamType=w.H264_STREAM_TYPE:i.pid===this.programMapTable.audio?i.streamType=w.ADTS_STREAM_TYPE:i.streamType=this.programMapTable["timed-metadata"][i.pid],i.type="pes",i.data=e.subarray(t),this.trigger("data",i)}}).prototype=new S,Ge.STREAM_TYPES={h264:27,adts:15},(Xe=function(){function s(e,t,i){var s,r=new Uint8Array(e.size),n={type:t},a=0,o=0;if(e.data.length&&!(e.size<9)){for(n.trackId=e.data[0].pid,a=0;a<e.data.length;a++)s=e.data[a],r.set(s.data,o),o+=s.data.byteLength;d(r,n),t="video"===t||n.packetLength<=e.size,(i||t)&&(e.size=0,e.data.length=0),t&&l.trigger("data",n)}}var t,l=this,r=!1,n={data:[],size:0},a={data:[],size:0},o={data:[],size:0},d=function(e,t){var i=e[0]<<16|e[1]<<8|e[2];t.data=new Uint8Array,1==i&&(t.packetLength=6+(e[4]<<8|e[5]),t.dataAlignmentIndicator=0!=(4&e[6]),192&(i=e[7])&&(t.pts=(14&e[9])<<27|(255&e[10])<<20|(254&e[11])<<12|(255&e[12])<<5|(254&e[13])>>>3,t.pts*=4,t.pts+=(6&e[13])>>>1,t.dts=t.pts,64&i)&&(t.dts=(14&e[14])<<27|(255&e[15])<<20|(254&e[16])<<12|(255&e[17])<<5|(254&e[18])>>>3,t.dts*=4,t.dts+=(6&e[18])>>>1),t.data=e.subarray(9+e[8]))};Xe.prototype.init.call(this),this.push=function(i){({pat:function(){},pes:function(){var e,t;switch(i.streamType){case w.H264_STREAM_TYPE:e=n,t="video";break;case w.ADTS_STREAM_TYPE:e=a,t="audio";break;case w.METADATA_STREAM_TYPE:e=o,t="timed-metadata";break;default:return}i.payloadUnitStartIndicator&&s(e,t,!0),e.data.push(i),e.size+=i.data.byteLength},pmt:function(){var e={type:"metadata",tracks:[]};null!==(t=i.programMapTable).video&&e.tracks.push({timelineStartInfo:{baseMediaDecodeTime:0},id:+t.video,codec:"avc",type:"video"}),null!==t.audio&&e.tracks.push({timelineStartInfo:{baseMediaDecodeTime:0},id:+t.audio,codec:"adts",type:"audio"}),r=!0,l.trigger("data",e)}})[i.type]()},this.reset=function(){n.size=0,n.data.length=0,a.size=0,a.data.length=0,this.trigger("reset")},this.flushStreams_=function(){s(n,"video"),s(a,"audio"),s(o,"timed-metadata")},this.flush=function(){var e;!r&&t&&(e={type:"metadata",tracks:[]},null!==t.video&&e.tracks.push({timelineStartInfo:{baseMediaDecodeTime:0},id:+t.video,codec:"avc",type:"video"}),null!==t.audio&&e.tracks.push({timelineStartInfo:{baseMediaDecodeTime:0},id:+t.audio,codec:"adts",type:"audio"}),l.trigger("data",e)),r=!1,this.flushStreams_(),this.trigger("done")}}).prototype=new S,{PAT_PID:0,MP2T_PACKET_LENGTH:188,TransportPacketStream:st,TransportParseStream:Ge,ElementaryStream:Xe,TimestampRolloverStream:Ve,CaptionStream:it.CaptionStream,Cea608Stream:it.Cea608Stream,Cea708Stream:it.Cea708Stream,MetadataStream:b});for(Ke in w)w.hasOwnProperty(Ke)&&(rt[Ke]=w[Ke]);var nt,at,S=rt,Ve=i,ot=c.ONE_SECOND_IN_TS,lt=[96e3,88200,64e3,48e3,44100,32e3,24e3,22050,16e3,12e3,11025,8e3,7350],dt=function(l){var d,h=0;dt.prototype.init.call(this),this.skipWarn_=function(e,t){this.trigger("log",{level:"warn",message:`adts skiping bytes ${e} to ${t} in frame ${h} outside syncword`})},this.push=function(e){var t,i,s,r,n,a,o=0;if(l||(h=0),"audio"===e.type){for(d&&d.length?(s=d,(d=new Uint8Array(s.byteLength+e.data.byteLength)).set(s),d.set(e.data,s.byteLength)):d=e.data;o+7<d.length;)if(255!==d[o]||240!=(246&d[o+1]))"number"!=typeof a&&(a=o),o++;else{if("number"==typeof a&&(this.skipWarn_(a,o),a=null),i=2*(1&~d[o+1]),t=(3&d[o+3])<<11|d[o+4]<<3|(224&d[o+5])>>5,n=(r=1024*(1+(3&d[o+6])))*ot/lt[(60&d[o+2])>>>2],d.byteLength-o<t)break;this.trigger("data",{pts:e.pts+h*n,dts:e.dts+h*n,sampleCount:r,audioobjecttype:1+(d[o+2]>>>6&3),channelcount:(1&d[o+2])<<2|(192&d[o+3])>>>6,samplerate:lt[(60&d[o+2])>>>2],samplingfrequencyindex:(60&d[o+2])>>>2,samplesize:16,data:d.subarray(o+7+i,o+t)}),h++,o+=t}"number"==typeof a&&(this.skipWarn_(a,o),a=null),d=d.subarray(o)}},this.flush=function(){h=0,this.trigger("done")},this.reset=function(){d=void 0,this.trigger("reset")},this.endTimeline=function(){d=void 0,this.trigger("endedtimeline")}},it=(dt.prototype=new Ve,dt),b=i,ht=function(s){var r=s.byteLength,n=0,a=0;this.length=function(){return 8*r},this.bitsAvailable=function(){return 8*r+a},this.loadWord=function(){var e=s.byteLength-r,t=new Uint8Array(4),i=Math.min(4,r);if(0===i)throw new Error("no bytes available");t.set(s.subarray(e,e+i)),n=new DataView(t.buffer).getUint32(0),a=8*i,r-=i},this.skipBits=function(e){var t;e<a||(e=(e-=a)-8*(t=Math.floor(e/8)),r-=t,this.loadWord()),n<<=e,a-=e},this.readBits=function(e){var t=Math.min(a,e),i=n>>>32-t;return 0<(a-=t)?n<<=t:0<r&&this.loadWord(),0<(t=e-t)?i<<t|this.readBits(t):i},this.skipLeadingZeros=function(){for(var e=0;e<a;++e)if(0!=(n&2147483648>>>e))return n<<=e,a-=e,e;return this.loadWord(),e+this.skipLeadingZeros()},this.skipUnsignedExpGolomb=function(){this.skipBits(1+this.skipLeadingZeros())},this.skipExpGolomb=function(){this.skipBits(1+this.skipLeadingZeros())},this.readUnsignedExpGolomb=function(){var e=this.skipLeadingZeros();return this.readBits(e+1)-1},this.readExpGolomb=function(){var e=this.readUnsignedExpGolomb();return 1&e?1+e>>>1:-1*(e>>>1)},this.readBoolean=function(){return 1===this.readBits(1)},this.readUnsignedByte=function(){return this.readBits(8)},this.loadWord()},ut=function(){var s,r,n=0;ut.prototype.init.call(this),this.push=function(e){for(var t,i=(r=r?((t=new Uint8Array(r.byteLength+e.data.byteLength)).set(r),t.set(e.data,r.byteLength),t):e.data).byteLength;n<i-3;n++)if(1===r[n+2]){s=n+5;break}for(;s<i;)switch(r[s]){case 0:if(0!==r[s-1])s+=2;else if(0!==r[s-2])s++;else{for(n+3!==s-2&&this.trigger("data",r.subarray(n+3,s-2));1!==r[++s]&&s<i;);n=s-2,s+=3}break;case 1:0!==r[s-1]||0!==r[s-2]?s+=3:(this.trigger("data",r.subarray(n+3,s-2)),n=s-2,s+=3);break;default:s+=3}r=r.subarray(n),s-=n,n=0},this.reset=function(){r=null,n=0,this.trigger("reset")},this.flush=function(){r&&3<r.byteLength&&this.trigger("data",r.subarray(n+3)),r=null,n=0,this.trigger("done")},this.endTimeline=function(){this.flush(),this.trigger("endedtimeline")}};ut.prototype=new b,at={100:!0,110:!0,122:!0,244:!0,44:!0,83:!0,86:!0,118:!0,128:!0,138:!0,139:!0,134:!0},(nt=function(){var i,s,r,n,a,o,g,t=new ut;nt.prototype.init.call(this),(i=this).push=function(e){"video"===e.type&&(s=e.trackId,r=e.pts,n=e.dts,t.push(e))},t.on("data",function(e){var t={trackId:s,pts:r,dts:n,data:e,nalUnitTypeCode:31&e[0]};switch(t.nalUnitTypeCode){case 5:t.nalUnitType="slice_layer_without_partitioning_rbsp_idr";break;case 6:t.nalUnitType="sei_rbsp",t.escapedRBSP=a(e.subarray(1));break;case 7:t.nalUnitType="seq_parameter_set_rbsp",t.escapedRBSP=a(e.subarray(1)),t.config=o(t.escapedRBSP);break;case 8:t.nalUnitType="pic_parameter_set_rbsp";break;case 9:t.nalUnitType="access_unit_delimiter_rbsp"}i.trigger("data",t)}),t.on("done",function(){i.trigger("done")}),t.on("partialdone",function(){i.trigger("partialdone")}),t.on("reset",function(){i.trigger("reset")}),t.on("endedtimeline",function(){i.trigger("endedtimeline")}),this.flush=function(){t.flush()},this.partialFlush=function(){t.partialFlush()},this.reset=function(){t.reset()},this.endTimeline=function(){t.endTimeline()},g=function(e,t){for(var i=8,s=8,r=0;r<e;r++)i=0===(s=0!==s?(i+t.readExpGolomb()+256)%256:s)?i:s},a=function(e){for(var t=e.byteLength,i=[],s=1;s<t-2;)0===e[s]&&0===e[s+1]&&3===e[s+2]?(i.push(s+2),s+=2):s++;if(0===i.length)return e;for(var r=t-i.length,n=new Uint8Array(r),a=0,s=0;s<r;a++,s++)a===i[0]&&(a++,i.shift()),n[s]=e[a];return n},o=function(e){var t,i,s,r,n,a,o=0,l=0,d=0,h=0,u=[1,1],c=new ht(e),e=c.readUnsignedByte(),p=c.readUnsignedByte(),m=c.readUnsignedByte();if(c.skipUnsignedExpGolomb(),at[e]&&(3===(i=c.readUnsignedExpGolomb())&&c.skipBits(1),c.skipUnsignedExpGolomb(),c.skipUnsignedExpGolomb(),c.skipBits(1),c.readBoolean()))for(n=3!==i?8:12,a=0;a<n;a++)c.readBoolean()&&g(a<6?16:64,c);if(c.skipUnsignedExpGolomb(),0===(i=c.readUnsignedExpGolomb()))c.readUnsignedExpGolomb();else if(1===i)for(c.skipBits(1),c.skipExpGolomb(),c.skipExpGolomb(),t=c.readUnsignedExpGolomb(),a=0;a<t;a++)c.skipExpGolomb();if(c.skipUnsignedExpGolomb(),c.skipBits(1),i=c.readUnsignedExpGolomb(),s=c.readUnsignedExpGolomb(),0===(r=c.readBits(1))&&c.skipBits(1),c.skipBits(1),c.readBoolean()&&(o=c.readUnsignedExpGolomb(),l=c.readUnsignedExpGolomb(),d=c.readUnsignedExpGolomb(),h=c.readUnsignedExpGolomb()),c.readBoolean()&&c.readBoolean()){switch(c.readUnsignedByte()){case 1:u=[1,1];break;case 2:u=[12,11];break;case 3:u=[10,11];break;case 4:u=[16,11];break;case 5:u=[40,33];break;case 6:u=[24,11];break;case 7:u=[20,11];break;case 8:u=[32,11];break;case 9:u=[80,33];break;case 10:u=[18,11];break;case 11:u=[15,11];break;case 12:u=[64,33];break;case 13:u=[160,99];break;case 14:u=[4,3];break;case 15:u=[3,2];break;case 16:u=[2,1];break;case 255:u=[c.readUnsignedByte()<<8|c.readUnsignedByte(),c.readUnsignedByte()<<8|c.readUnsignedByte()]}u&&(u[0],u[1])}return{profileIdc:e,levelIdc:m,profileCompatibility:p,width:16*(i+1)-2*o-2*l,height:(2-r)*(s+1)*16-2*d-2*h,sarRatio:u}}}).prototype=new b;function ct(e){return e[0]<<21|e[1]<<14|e[2]<<7|e[3]}var Ve=nt,pt=[96e3,88200,64e3,48e3,44100,32e3,24e3,22050,16e3,12e3,11025,8e3,7350],mt=function(e,t){var i=0<=(i=e[t+6]<<21|e[t+7]<<14|e[t+8]<<7|e[t+9])?i:0;return(16&e[t+5])>>4?20+i:10+i},gt=function(e,t){return e.length-t<10||e[t]!=="I".charCodeAt(0)||e[t+1]!=="D".charCodeAt(0)||e[t+2]!=="3".charCodeAt(0)?t:(t+=mt(e,t),gt(e,t))},ft=function(e,t,i){for(var s="",r=t;r<i;r++)s+="%"+("00"+e[r].toString(16)).slice(-2);return s},b={isLikelyAacData:function(e){var t=gt(e,0);return e.length>=t+2&&255==(255&e[t])&&240==(240&e[t+1])&&16==(22&e[t+1])},parseId3TagSize:mt,parseAdtsSize:function(e,t){var i=(224&e[t+5])>>5,s=e[t+4]<<3;return 6144&e[t+3]|s|i},parseType:function(e,t){return e[t]==="I".charCodeAt(0)&&e[t+1]==="D".charCodeAt(0)&&e[t+2]==="3".charCodeAt(0)?"timed-metadata":!0&e[t]&&240==(240&e[t+1])?"audio":null},parseSampleRate:function(e){for(var t=0;t+5<e.length;){if(255===e[t]&&240==(246&e[t+1]))return pt[(60&e[t+2])>>>2];t++}return null},parseAacTimestamp:function(e){var t,i=10;64&e[5]&&(i=(i+=4)+ct(e.subarray(10,14)));do{if((t=ct(e.subarray(i+4,i+8)))<1)return null;if("PRIV"===String.fromCharCode(e[i],e[i+1],e[i+2],e[i+3]))for(var s,r,n=e.subarray(i+10,i+t+10),a=0;a<n.byteLength;a++)if(0===n[a]){if("com.apple.streaming.transportStreamTimestamp"===unescape(ft(n,0,a)))return r=(1&(s=n.subarray(a+1))[3])<<30|s[4]<<22|s[5]<<14|s[6]<<6|s[7]>>>2,(r*=4)+(3&s[7]);break}}while((i=i+10+t)<e.byteLength);return null}},E=i,yt=b,_t=function(){var n=new Uint8Array,a=0;_t.prototype.init.call(this),this.setTimestamp=function(e){a=e},this.push=function(e){var t,i,s=0,r=0;for(n.length?(i=n.length,(n=new Uint8Array(e.byteLength+i)).set(n.subarray(0,i)),n.set(e,i)):n=e;3<=n.length-r;)if(n[r]==="I".charCodeAt(0)&&n[r+1]==="D".charCodeAt(0)&&n[r+2]==="3".charCodeAt(0)){if(n.length-r<10)break;if(r+(s=yt.parseId3TagSize(n,r))>n.length)break;t={type:"timed-metadata",data:n.subarray(r,r+s)},this.trigger("data",t),r+=s}else if(255==(255&n[r])&&240==(240&n[r+1])){if(n.length-r<7)break;if(r+(s=yt.parseAdtsSize(n,r))>n.length)break;t={type:"audio",data:n.subarray(r,r+s),pts:a,dts:a},this.trigger("data",t),r+=s}else r++;i=n.length-r,n=0<i?n.subarray(r):new Uint8Array},this.reset=function(){n=new Uint8Array,this.trigger("reset")},this.endTimeline=function(){n=new Uint8Array,this.trigger("endedtimeline")}};_t.prototype=new E;function vt(e,t){for(var i=Object.keys(t),s=0;s<i.length;s++){var r=i[s];"headOfPipeline"!==r&&t[r].on&&t[r].on("log",Ot.bind(e,r))}}function bt(e,t){var i;if(e.length===t.length){for(i=0;i<e.length;i++)if(e[i]!==t[i])return;return 1}}function Tt(e,t,i,s,r,n){return{start:{dts:e,pts:e+(i-t)},end:{dts:e+(s-t),pts:e+(r-i)},prependedContentDuration:n,baseMediaDecodeTime:e}}var St,wt,C,E=i,k=ke,I=xe,Et=De,x=Pe,A=S,Ct=c,kt=it,It=Ve,xt=_t,At=b.isLikelyAacData,Dt=c.ONE_SECOND_IN_TS,Pt=["audioobjecttype","channelcount","samplerate","samplingfrequencyindex","samplesize"],Lt=["width","height","profileIdc","levelIdc","profileCompatibility","sarRatio"],Ot=function(e,t){t.stream=e,this.trigger("log",t)},Rt=function(n,a){var o=[],l=0,d=0,h=1/0,u=(a=a||{}).firstSequenceNumber||0;Rt.prototype.init.call(this),this.push=function(t){x.collectDtsInfo(n,t),n&&Pt.forEach(function(e){n[e]=t[e]}),o.push(t)},this.setEarliestDts=function(e){l=e},this.setVideoBaseMediaDecodeTime=function(e){h=e},this.setAudioAppendStart=function(e){d=e},this.flush=function(){var e,t,i,s,r;0!==o.length&&(e=Et.trimAdtsFramesByEarliestDts(o,n,l),n.baseMediaDecodeTime=x.calculateTrackBaseMediaDecodeTime(n,a.keepOriginalTimestamps),r=Et.prefixWithSilence(n,e,d,h),n.samples=Et.generateSampleTable(e),i=k.mdat(Et.concatenateFrameData(e)),o=[],s=k.moof(u,[n]),t=new Uint8Array(s.byteLength+i.byteLength),u++,t.set(s),t.set(i,s.byteLength),x.clearDtsInfo(n),i=Math.ceil(1024*Dt/n.samplerate),e.length&&(s=e.length*i,this.trigger("segmentTimingInfo",Tt(Ct.audioTsToVideoTs(n.baseMediaDecodeTime,n.samplerate),e[0].dts,e[0].pts,e[0].dts+s,e[0].pts+s,r||0)),this.trigger("timingInfo",{start:e[0].pts,end:e[0].pts+s})),this.trigger("data",{track:n,boxes:t})),this.trigger("done","AudioSegmentStream")},this.reset=function(){x.clearDtsInfo(n),o=[],this.trigger("reset")}};Rt.prototype=new E,(St=function(a,n){var t,i,o=[],d=[],l=(n=n||{}).firstSequenceNumber||0;St.prototype.init.call(this),delete a.minPTS,this.gopCache_=[],this.push=function(e){x.collectDtsInfo(a,e),"seq_parameter_set_rbsp"!==e.nalUnitType||t||(t=e.config,a.sps=[e.data],Lt.forEach(function(e){a[e]=t[e]},this)),"pic_parameter_set_rbsp"!==e.nalUnitType||i||(i=e.data,a.pps=[e.data]),o.push(e)},this.flush=function(){for(var e,t,i,s=0;o.length&&"access_unit_delimiter_rbsp"!==o[0].nalUnitType;)o.shift();if(0!==o.length){if(e=I.groupNalsIntoFrames(o),(e=I.groupFramesIntoGops(e))[0][0].keyFrame||((r=this.getGopForFusion_(o[0],a))?(s=r.duration,e.unshift(r),e.byteLength+=r.byteLength,e.nalCount+=r.nalCount,e.pts=r.pts,e.dts=r.dts,e.duration+=r.duration):e=I.extendFirstKeyFrame(e)),d.length){var r=n.alignGopsAtEnd?this.alignGopsAtEnd_(e):this.alignGopsAtStart_(e);if(!r)return this.gopCache_.unshift({gop:e.pop(),pps:a.pps,sps:a.sps}),this.gopCache_.length=Math.min(6,this.gopCache_.length),o=[],this.resetStream_(),void this.trigger("done","VideoSegmentStream");x.clearDtsInfo(a),e=r}x.collectDtsInfo(a,e),a.samples=I.generateSampleTable(e),r=k.mdat(I.concatenateNalData(e)),a.baseMediaDecodeTime=x.calculateTrackBaseMediaDecodeTime(a,n.keepOriginalTimestamps),this.trigger("processedGopsInfo",e.map(function(e){return{pts:e.pts,dts:e.dts,byteLength:e.byteLength}})),t=e[0],i=e[e.length-1],this.trigger("segmentTimingInfo",Tt(a.baseMediaDecodeTime,t.dts,t.pts,i.dts+i.duration,i.pts+i.duration,s)),this.trigger("timingInfo",{start:e[0].pts,end:e[e.length-1].pts+e[e.length-1].duration}),this.gopCache_.unshift({gop:e.pop(),pps:a.pps,sps:a.sps}),this.gopCache_.length=Math.min(6,this.gopCache_.length),o=[],this.trigger("baseMediaDecodeTime",a.baseMediaDecodeTime),this.trigger("timelineStartInfo",a.timelineStartInfo),t=k.moof(l,[a]),i=new Uint8Array(t.byteLength+r.byteLength),l++,i.set(t),i.set(r,t.byteLength),this.trigger("data",{track:a,boxes:i})}this.resetStream_(),this.trigger("done","VideoSegmentStream")},this.reset=function(){this.resetStream_(),o=[],this.gopCache_.length=0,d.length=0,this.trigger("reset")},this.resetStream_=function(){x.clearDtsInfo(a),i=t=void 0},this.getGopForFusion_=function(e){for(var t,i,s,r=1/0,n=0;n<this.gopCache_.length;n++)i=(s=this.gopCache_[n]).gop,a.pps&&bt(a.pps[0],s.pps[0])&&a.sps&&bt(a.sps[0],s.sps[0])&&(i.dts<a.timelineStartInfo.dts||-1e4<=(i=e.dts-i.dts-i.duration)&&i<=45e3&&(!t||i<r)&&(t=s,r=i));return t?t.gop:null},this.alignGopsAtStart_=function(e){for(var t,i,s,r,n=e.byteLength,a=e.nalCount,o=e.duration,l=t=0;l<d.length&&t<e.length&&(i=d[l],s=e[t],i.pts!==s.pts);)s.pts>i.pts?l++:(t++,n-=s.byteLength,a-=s.nalCount,o-=s.duration);return 0===t?e:t===e.length?null:((r=e.slice(t)).byteLength=n,r.duration=o,r.nalCount=a,r.pts=r[0].pts,r.dts=r[0].dts,r)},this.alignGopsAtEnd_=function(e){for(var t,i,s,r,n=d.length-1,a=e.length-1,o=null,l=!1;0<=n&&0<=a;){if(t=d[n],i=e[a],t.pts===i.pts){l=!0;break}t.pts>i.pts?n--:(n===d.length-1&&(o=a),a--)}return l||null!==o?0===(s=l?a:o)?e:(r=(s=e.slice(s)).reduce(function(e,t){return e.byteLength+=t.byteLength,e.duration+=t.duration,e.nalCount+=t.nalCount,e},{byteLength:0,duration:0,nalCount:0}),s.byteLength=r.byteLength,s.duration=r.duration,s.nalCount=r.nalCount,s.pts=s[0].pts,s.dts=s[0].dts,s):null},this.alignGopsWith=function(e){d=e}}).prototype=new E,((C=function(e,t){this.numberOfTracks=0,this.metadataStream=t,"undefined"!=typeof(e=e||{}).remux?this.remuxTracks=!!e.remux:this.remuxTracks=!0,"boolean"==typeof e.keepOriginalTimestamps?this.keepOriginalTimestamps=e.keepOriginalTimestamps:this.keepOriginalTimestamps=!1,this.pendingTracks=[],this.videoTrack=null,this.pendingBoxes=[],this.pendingCaptions=[],this.pendingMetadata=[],this.pendingBytes=0,this.emittedTracks=0,C.prototype.init.call(this),this.push=function(e){return e.content||e.text?this.pendingCaptions.push(e):e.frames?this.pendingMetadata.push(e):(this.pendingTracks.push(e.track),this.pendingBytes+=e.boxes.byteLength,"video"===e.track.type&&(this.videoTrack=e.track,this.pendingBoxes.push(e.boxes)),void("audio"===e.track.type&&(this.audioTrack=e.track,this.pendingBoxes.unshift(e.boxes))))}}).prototype=new E).flush=function(e){var t,i,s,r=0,n={captions:[],captionStreams:{},metadata:[],info:{}},a=0;if(this.pendingTracks.length<this.numberOfTracks){if("VideoSegmentStream"!==e&&"AudioSegmentStream"!==e)return;if(this.remuxTracks)return;if(0===this.pendingTracks.length)return this.emittedTracks++,void(this.emittedTracks>=this.numberOfTracks&&(this.trigger("done"),this.emittedTracks=0))}if(this.videoTrack?(a=this.videoTrack.timelineStartInfo.pts,Lt.forEach(function(e){n.info[e]=this.videoTrack[e]},this)):this.audioTrack&&(a=this.audioTrack.timelineStartInfo.pts,Pt.forEach(function(e){n.info[e]=this.audioTrack[e]},this)),this.videoTrack||this.audioTrack){for(1===this.pendingTracks.length?n.type=this.pendingTracks[0].type:n.type="combined",this.emittedTracks+=this.pendingTracks.length,e=k.initSegment(this.pendingTracks),n.initSegment=new Uint8Array(e.byteLength),n.initSegment.set(e),n.data=new Uint8Array(this.pendingBytes),s=0;s<this.pendingBoxes.length;s++)n.data.set(this.pendingBoxes[s],r),r+=this.pendingBoxes[s].byteLength;for(s=0;s<this.pendingCaptions.length;s++)(t=this.pendingCaptions[s]).startTime=Ct.metadataTsToSeconds(t.startPts,a,this.keepOriginalTimestamps),t.endTime=Ct.metadataTsToSeconds(t.endPts,a,this.keepOriginalTimestamps),n.captionStreams[t.stream]=!0,n.captions.push(t);for(s=0;s<this.pendingMetadata.length;s++)(i=this.pendingMetadata[s]).cueTime=Ct.metadataTsToSeconds(i.pts,a,this.keepOriginalTimestamps),n.metadata.push(i);for(n.metadata.dispatchType=this.metadataStream.dispatchType,this.pendingTracks.length=0,this.videoTrack=null,this.pendingBoxes.length=0,this.pendingCaptions.length=0,this.pendingBytes=0,this.pendingMetadata.length=0,this.trigger("data",n),s=0;s<n.captions.length;s++)t=n.captions[s],this.trigger("caption",t);for(s=0;s<n.metadata.length;s++)i=n.metadata[s],this.trigger("id3Frame",i)}this.emittedTracks>=this.numberOfTracks&&(this.trigger("done"),this.emittedTracks=0)},C.prototype.setRemux=function(e){this.remuxTracks=e},(wt=function(s){var r,n,a=this,i=!0;wt.prototype.init.call(this),s=s||{},this.baseMediaDecodeTime=s.baseMediaDecodeTime||0,this.transmuxPipeline_={},this.setupAacPipeline=function(){var t={};(this.transmuxPipeline_=t).type="aac",t.metadataStream=new A.MetadataStream,t.aacStream=new xt,t.audioTimestampRolloverStream=new A.TimestampRolloverStream("audio"),t.timedMetadataTimestampRolloverStream=new A.TimestampRolloverStream("timed-metadata"),t.adtsStream=new kt,t.coalesceStream=new C(s,t.metadataStream),t.headOfPipeline=t.aacStream,t.aacStream.pipe(t.audioTimestampRolloverStream).pipe(t.adtsStream),t.aacStream.pipe(t.timedMetadataTimestampRolloverStream).pipe(t.metadataStream).pipe(t.coalesceStream),t.metadataStream.on("timestamp",function(e){t.aacStream.setTimestamp(e.timeStamp)}),t.aacStream.on("data",function(e){"timed-metadata"!==e.type&&"audio"!==e.type||t.audioSegmentStream||(n=n||{timelineStartInfo:{baseMediaDecodeTime:a.baseMediaDecodeTime},codec:"adts",type:"audio"},t.coalesceStream.numberOfTracks++,t.audioSegmentStream=new Rt(n,s),t.audioSegmentStream.on("log",a.getLogTrigger_("audioSegmentStream")),t.audioSegmentStream.on("timingInfo",a.trigger.bind(a,"audioTimingInfo")),t.adtsStream.pipe(t.audioSegmentStream).pipe(t.coalesceStream),a.trigger("trackinfo",{hasAudio:!!n,hasVideo:!!r}))}),t.coalesceStream.on("data",this.trigger.bind(this,"data")),t.coalesceStream.on("done",this.trigger.bind(this,"done")),vt(this,t)},this.setupTsPipeline=function(){var i={};(this.transmuxPipeline_=i).type="ts",i.metadataStream=new A.MetadataStream,i.packetStream=new A.TransportPacketStream,i.parseStream=new A.TransportParseStream,i.elementaryStream=new A.ElementaryStream,i.timestampRolloverStream=new A.TimestampRolloverStream,i.adtsStream=new kt,i.h264Stream=new It,i.captionStream=new A.CaptionStream(s),i.coalesceStream=new C(s,i.metadataStream),i.headOfPipeline=i.packetStream,i.packetStream.pipe(i.parseStream).pipe(i.elementaryStream).pipe(i.timestampRolloverStream),i.timestampRolloverStream.pipe(i.h264Stream),i.timestampRolloverStream.pipe(i.adtsStream),i.timestampRolloverStream.pipe(i.metadataStream).pipe(i.coalesceStream),i.h264Stream.pipe(i.captionStream).pipe(i.coalesceStream),i.elementaryStream.on("data",function(e){var t;if("metadata"===e.type){for(t=e.tracks.length;t--;)r||"video"!==e.tracks[t].type?n||"audio"!==e.tracks[t].type||((n=e.tracks[t]).timelineStartInfo.baseMediaDecodeTime=a.baseMediaDecodeTime):(r=e.tracks[t]).timelineStartInfo.baseMediaDecodeTime=a.baseMediaDecodeTime;r&&!i.videoSegmentStream&&(i.coalesceStream.numberOfTracks++,i.videoSegmentStream=new St(r,s),i.videoSegmentStream.on("log",a.getLogTrigger_("videoSegmentStream")),i.videoSegmentStream.on("timelineStartInfo",function(e){n&&!s.keepOriginalTimestamps&&(n.timelineStartInfo=e,i.audioSegmentStream.setEarliestDts(e.dts-a.baseMediaDecodeTime))}),i.videoSegmentStream.on("processedGopsInfo",a.trigger.bind(a,"gopInfo")),i.videoSegmentStream.on("segmentTimingInfo",a.trigger.bind(a,"videoSegmentTimingInfo")),i.videoSegmentStream.on("baseMediaDecodeTime",function(e){n&&i.audioSegmentStream.setVideoBaseMediaDecodeTime(e)}),i.videoSegmentStream.on("timingInfo",a.trigger.bind(a,"videoTimingInfo")),i.h264Stream.pipe(i.videoSegmentStream).pipe(i.coalesceStream)),n&&!i.audioSegmentStream&&(i.coalesceStream.numberOfTracks++,i.audioSegmentStream=new Rt(n,s),i.audioSegmentStream.on("log",a.getLogTrigger_("audioSegmentStream")),i.audioSegmentStream.on("timingInfo",a.trigger.bind(a,"audioTimingInfo")),i.audioSegmentStream.on("segmentTimingInfo",a.trigger.bind(a,"audioSegmentTimingInfo")),i.adtsStream.pipe(i.audioSegmentStream).pipe(i.coalesceStream)),a.trigger("trackinfo",{hasAudio:!!n,hasVideo:!!r})}}),i.coalesceStream.on("data",this.trigger.bind(this,"data")),i.coalesceStream.on("id3Frame",function(e){e.dispatchType=i.metadataStream.dispatchType,a.trigger("id3Frame",e)}),i.coalesceStream.on("caption",this.trigger.bind(this,"caption")),i.coalesceStream.on("done",this.trigger.bind(this,"done")),vt(this,i)},this.setBaseMediaDecodeTime=function(e){var t=this.transmuxPipeline_;s.keepOriginalTimestamps||(this.baseMediaDecodeTime=e),n&&(n.timelineStartInfo.dts=void 0,n.timelineStartInfo.pts=void 0,x.clearDtsInfo(n),t.audioTimestampRolloverStream)&&t.audioTimestampRolloverStream.discontinuity(),r&&(t.videoSegmentStream&&(t.videoSegmentStream.gopCache_=[]),r.timelineStartInfo.dts=void 0,r.timelineStartInfo.pts=void 0,x.clearDtsInfo(r),t.captionStream.reset()),t.timestampRolloverStream&&t.timestampRolloverStream.discontinuity()},this.setAudioAppendStart=function(e){n&&this.transmuxPipeline_.audioSegmentStream.setAudioAppendStart(e)},this.setRemux=function(e){var t=this.transmuxPipeline_;s.remux=e,t&&t.coalesceStream&&t.coalesceStream.setRemux(e)},this.alignGopsWith=function(e){r&&this.transmuxPipeline_.videoSegmentStream&&this.transmuxPipeline_.videoSegmentStream.alignGopsWith(e)},this.getLogTrigger_=function(t){var i=this;return function(e){e.stream=t,i.trigger("log",e)}},this.push=function(e){var t;i&&((t=At(e))&&"aac"!==this.transmuxPipeline_.type?this.setupAacPipeline():t||"ts"===this.transmuxPipeline_.type||this.setupTsPipeline(),i=!1),this.transmuxPipeline_.headOfPipeline.push(e)},this.flush=function(){i=!0,this.transmuxPipeline_.headOfPipeline.flush()},this.endTimeline=function(){this.transmuxPipeline_.headOfPipeline.endTimeline()},this.reset=function(){this.transmuxPipeline_.headOfPipeline&&this.transmuxPipeline_.headOfPipeline.reset()},this.resetCaptions=function(){this.transmuxPipeline_.captionStream&&this.transmuxPipeline_.captionStream.reset()}}).prototype=new E;function Nt(e){var t="";return(t+=String.fromCharCode(e[0]))+String.fromCharCode(e[1])+String.fromCharCode(e[2])+String.fromCharCode(e[3])}function Mt(e,t){var i,s,r,n=[];if(!t.length)return null;for(i=0;i<e.byteLength;)s=zt(e[i]<<24|e[i+1]<<16|e[i+2]<<8|e[i+3]),r=Wt(e.subarray(i+4,i+8)),s=1<s?i+s:e.byteLength,r===t[0]&&(1===t.length?n.push(e.subarray(i+8,s)):(r=Mt(e.subarray(i+8,s),t.slice(1))).length&&(n=n.concat(r))),i=s;return n}function Ut(e){var t={version:e[0],flags:new Uint8Array(e.subarray(1,4))};return t.baseMediaDecodeTime=1===t.version?Xt(e.subarray(4)):Gt(e[4]<<24|e[5]<<16|e[6]<<8|e[7]),t}function Bt(e){var t,i={version:e[0],flags:new Uint8Array(e.subarray(1,4)),samples:[]},s=new DataView(e.buffer,e.byteOffset,e.byteLength),r=1&i.flags[2],n=4&i.flags[2],a=1&i.flags[1],o=2&i.flags[1],l=4&i.flags[1],d=8&i.flags[1],h=s.getUint32(4),u=8;for(r&&(i.dataOffset=s.getInt32(u),u+=4),n&&h&&(t={flags:Kt(e.subarray(u,u+4))},u+=4,a&&(t.duration=s.getUint32(u),u+=4),o&&(t.size=s.getUint32(u),u+=4),d&&(t.compositionTimeOffset=1===i.version?s.getInt32(u):s.getUint32(u),u+=4),i.samples.push(t),h--);h--;)t={},a&&(t.duration=s.getUint32(u),u+=4),o&&(t.size=s.getUint32(u),u+=4),l&&(t.flags=Kt(e.subarray(u,u+4)),u+=4),d&&(t.compositionTimeOffset=1===i.version?s.getInt32(u):s.getUint32(u),u+=4),i.samples.push(t);return i}function Ft(e){var t=new DataView(e.buffer,e.byteOffset,e.byteLength),i=1&(e={version:e[0],flags:new Uint8Array(e.subarray(1,4)),trackId:t.getUint32(4)}).flags[2],s=2&e.flags[2],r=8&e.flags[2],n=16&e.flags[2],a=32&e.flags[2],o=65536&e.flags[0],l=131072&e.flags[0],d=8;return i&&(d+=4,e.baseDataOffset=t.getUint32(12),d+=4),s&&(e.sampleDescriptionIndex=t.getUint32(d),d+=4),r&&(e.defaultSampleDuration=t.getUint32(d),d+=4),n&&(e.defaultSampleSize=t.getUint32(d),d+=4),a&&(e.defaultSampleFlags=t.getUint32(d)),o&&(e.durationIsEmpty=!0),!i&&l&&(e.baseDataOffsetIsMoof=!0),e}function qt(e){var t=31&e[1];return t<<8|e[2]}function jt(e){return!!(64&e[1])}function Ht(e){var t=0;return 1<(48&e[3])>>>4&&(t+=e[4]+1),t}function Vt(e){switch(e){case 5:return"slice_layer_without_partitioning_rbsp_idr";case 6:return"sei_rbsp";case 7:return"seq_parameter_set_rbsp";case 8:return"pic_parameter_set_rbsp";case 9:return"access_unit_delimiter_rbsp";default:return null}}var $t=wt,i=function(e){return e>>>0},De=function(e){return("00"+e.toString(16)).slice(-2)},zt=i,Wt=Nt,Gt=i,Xt=s.getUint64,Kt=function(e){return{isLeading:(12&e[0])>>>2,dependsOn:3&e[0],isDependedOn:(192&e[1])>>>6,hasRedundancy:(48&e[1])>>>4,paddingValue:(14&e[1])>>>1,isNonSyncSample:1&e[1],degradationPriority:e[2]<<8|e[3]}},Pe="undefined"!=typeof window?window:"undefined"!=typeof fe?fe:"undefined"!=typeof self?self:{},S=Pe,Yt=Oe.discardEmulationPreventionBytes,Qt=p.CaptionStream,D=Mt,Jt=Ut,Zt=Bt,ei=Ft,ti=S,ii=function(e,h){var i=D(e,["moof","traf"]),e=D(e,["mdat"]),u={},s=[];return e.forEach(function(e,t){t=i[t];s.push({mdat:e,traf:t})}),s.forEach(function(e){var t,i,s,r,n,a=e.mdat,e=e.traf,o=D(e,["tfhd"]),o=ei(o[0]),l=o.trackId,d=D(e,["tfdt"]),d=0<d.length?Jt(d[0]).baseMediaDecodeTime:0,e=D(e,["trun"]);h===l&&0<e.length&&(t=d,i=o.defaultSampleDuration||0,s=o.defaultSampleSize||0,r=o.trackId,n=[],e.forEach(function(e){e=Zt(e).samples;e.forEach(function(e){void 0===e.duration&&(e.duration=i),void 0===e.size&&(e.size=s),e.trackId=r,e.dts=t,void 0===e.compositionTimeOffset&&(e.compositionTimeOffset=0),"bigint"==typeof t?(e.pts=t+ti.BigInt(e.compositionTimeOffset),t+=ti.BigInt(e.duration)):(e.pts=t+e.compositionTimeOffset,t+=e.duration)}),n=n.concat(e)}),d=function(e,t,i){for(var s,r,n=new DataView(e.buffer,e.byteOffset,e.byteLength),a={logs:[],seiNals:[]},o=0;o+4<e.length;o+=s)if(s=n.getUint32(o),o+=4,!(s<=0))switch(31&e[o]){case 6:var l=e.subarray(o+1,o+1+s),d=function(e,t){for(var i=e,s=0;s<t.length;s++){var r=t[s];if(i<r.size)return r;i-=r.size}return null}(o,t),l={nalUnitType:"sei_rbsp",size:s,data:l,escapedRBSP:Yt(l),trackId:i};if(d)l.pts=d.pts,l.dts=d.dts,r=d;else{if(!r){a.logs.push({level:"warn",message:"We've encountered a nal unit without data at "+o+" for trackId "+i+". See mux.js#223."});break}l.pts=r.pts,l.dts=r.dts}a.seiNals.push(l)}return a}(a,n,l),u[l]||(u[l]={seiNals:[],logs:[]}),u[l].seiNals=u[l].seiNals.concat(d.seiNals),u[l].logs=u[l].logs.concat(d.logs))}),u},si=function(){var t,a,o,l,d,i,s=!1;this.isInitialized=function(){return s},this.init=function(e){t=new Qt,s=!0,i=!!e&&e.isPartial,t.on("data",function(e){e.startTime=e.startPts/l,e.endTime=e.endPts/l,d.captions.push(e),d.captionStreams[e.stream]=!0}),t.on("log",function(e){d.logs.push(e)})},this.isNewInit=function(e,t){return!(e&&0===e.length||t&&"object"==typeof t&&0===Object.keys(t).length||o===e[0]&&l===t[o])},this.parse=function(e,t,i){var s,r;if(!this.isInitialized())return null;if(!t||!i)return null;if(this.isNewInit(t,i))o=t[0],l=i[o];else if(null===o||!l)return a.push(e),null;for(;0<a.length;){var n=a.shift();this.parse(n,t,i)}return e=e,r=l,(s=null===(s=o)?null:{seiNals:(e=ii(e,s)[s]||{}).seiNals,logs:e.logs,timescale:r})&&s.logs&&(d.logs=d.logs.concat(s.logs)),null!==s&&s.seiNals?(this.pushNals(s.seiNals),this.flushStream(),d):d.logs.length?{logs:d.logs,captions:[],captionStreams:[]}:null},this.pushNals=function(e){if(!this.isInitialized()||!e||0===e.length)return null;e.forEach(function(e){t.push(e)})},this.flushStream=function(){if(!this.isInitialized())return null;i?t.partialFlush():t.flush()},this.clearParsedCaptions=function(){d.captions=[],d.captionStreams={},d.logs=[]},this.resetCaptionStream=function(){if(!this.isInitialized())return null;t.reset()},this.clearAllCaptions=function(){this.clearParsedCaptions(),this.resetCaptionStream()},this.reset=function(){a=[],l=o=null,d?this.clearParsedCaptions():d={captions:[],captionStreams:{},logs:[]},this.resetCaptionStream()},this.reset()},ri=function(e){for(var t=0,i=String.fromCharCode(e[t]),s="";"\0"!==i;)s+=i,t++,i=String.fromCharCode(e[t]);return s+=i},ni=s.getUint64,ai=function(e){return void 0!==e||null!==e},oi=i,P=De,L=Mt,li=Nt,di={parseEmsgBox:function(e){var t,i,s,r,n,a,o,l=4,d=e[0],h=(0===d?(l=(l+=(r=ri(e.subarray(l))).length)+(n=ri(e.subarray(l))).length,s=(h=new DataView(e.buffer)).getUint32(l),o=h.getUint32(l+=4),t=h.getUint32(l+=4),i=h.getUint32(l+=4),l+=4):1===d&&(s=(h=new DataView(e.buffer)).getUint32(l),a=ni(e.subarray(l+=4)),t=h.getUint32(l+=8),i=h.getUint32(l+=4),l=(l=(l+=4)+(r=ri(e.subarray(l))).length)+(n=ri(e.subarray(l))).length),{scheme_id_uri:r,value:n,timescale:s||1,presentation_time:a,presentation_time_delta:o,event_duration:t,id:i,message_data:new Uint8Array(e.subarray(l,e.byteLength))});return n="\0"!==(r=h).scheme_id_uri,a=0===(s=d)&&ai(r.presentation_time_delta)&&n,o=1===s&&ai(r.presentation_time)&&n,!(1<s)&&a||o?h:void 0},scaleTime:function(e,t,i,s){return e||0===e?e/t:s+i/t}},hi=s.getUint64,ui=S,ci=Ze.parseId3Frames,pi=function(e){var t=0===e[0]?12:20;return oi(e[t]<<24|e[1+t]<<16|e[2+t]<<8|e[3+t])},mi=function(n,e){e=L(e,["moof","traf"]).reduce(function(e,t){var i=L(t,["tfhd"])[0],i=oi(i[4]<<24|i[5]<<16|i[6]<<8|i[7]),i=n[i]||9e4,t=L(t,["tfdt"])[0],s=new DataView(t.buffer,t.byteOffset,t.byteLength),t=1===t[0]?hi(t.subarray(4,12)):s.getUint32(4);let r;return"bigint"==typeof t?r=t/ui.BigInt(i):"number"!=typeof t||isNaN(t)||(r=t/i),e=(r=r<Number.MAX_SAFE_INTEGER?Number(r):r)<e?r:e},1/0);return"bigint"==typeof e||isFinite(e)?e:0},gi=function(e){var e=L(e,["moov","trak"]),n=[];return e.forEach(function(e){var t,i={},s=L(e,["tkhd"])[0],r=(s&&(r=(s=new DataView(s.buffer,s.byteOffset,s.byteLength)).getUint8(0),i.id=0===r?s.getUint32(12):s.getUint32(20)),L(e,["mdia","hdlr"])[0]),r=(r&&(s=li(r.subarray(8,12)),i.type="vide"===s?"video":"soun"===s?"audio":s),L(e,["mdia","minf","stbl","stsd"])[0]),s=(r&&(s=r.subarray(8),i.codec=li(s.subarray(4,8)),r=L(s,[i.codec])[0])&&(/^[asm]vc[1-9]$/i.test(i.codec)?(t=r.subarray(78),"avcC"===li(t.subarray(4,8))&&11<t.length?(i.codec+=".",i.codec+=P(t[9]),i.codec+=P(t[10]),i.codec+=P(t[11])):i.codec="avc1.4d400d"):/^mp4[a,v]$/i.test(i.codec)?(t=r.subarray(28),"esds"===li(t.subarray(4,8))&&20<t.length&&0!==t[19]?(i.codec+="."+P(t[19]),i.codec+="."+P(t[20]>>>2&63).replace(/^0/,"")):i.codec="mp4a.40.2"):i.codec=i.codec.toLowerCase()),L(e,["mdia","mdhd"])[0]);s&&(i.timescale=pi(s)),n.push(i)}),n},fi=function(e,i=0){return L(e,["emsg"]).map(e=>{var e=di.parseEmsgBox(new Uint8Array(e)),t=ci(e.message_data);return{cueTime:di.scaleTime(e.presentation_time,e.timescale,e.presentation_time_delta,i),duration:di.scaleTime(e.event_duration,e.timescale),frames:t}})},yi=He,_i=He,O=Ye,R={},N=(R.ts={parseType:function(e,t){e=qt(e);return 0===e?"pat":e===t?"pmt":t?"pes":null},parsePat:function(e){var t=jt(e),i=4+Ht(e);return t&&(i+=e[i]+1),(31&e[i+10])<<8|e[i+11]},parsePmt:function(e){var t={},i=jt(e),s=4+Ht(e);if(i&&(s+=e[s]+1),1&e[s+5]){for(var r=3+((15&e[s+1])<<8|e[s+2])-4,n=12+((15&e[s+10])<<8|e[s+11]);n<r;){var a=s+n;t[(31&e[a+1])<<8|e[a+2]]=e[a],n+=5+((15&e[a+3])<<8|e[a+4])}return t}},parsePayloadUnitStartIndicator:jt,parsePesType:function(e,t){switch(t[qt(e)]){case yi.H264_STREAM_TYPE:return"video";case yi.ADTS_STREAM_TYPE:return"audio";case yi.METADATA_STREAM_TYPE:return"timed-metadata";default:return null}},parsePesTime:function(e){var t,i,s;return!jt(e)||(t=4+Ht(e))>=e.byteLength?null:(i=null,192&(s=e[t+7])&&((i={}).pts=(14&e[t+9])<<27|(255&e[t+10])<<20|(254&e[t+11])<<12|(255&e[t+12])<<5|(254&e[t+13])>>>3,i.pts*=4,i.pts+=(6&e[t+13])>>>1,i.dts=i.pts,64&s)&&(i.dts=(14&e[t+14])<<27|(255&e[t+15])<<20|(254&e[t+16])<<12|(255&e[t+17])<<5|(254&e[t+18])>>>3,i.dts*=4,i.dts+=(6&e[t+18])>>>1),i)},videoPacketContainsKeyFrame:function(e){for(var t=4+Ht(e),i=e.subarray(t),s=0,r=0,n=!1;r<i.byteLength-3;r++)if(1===i[r+2]){s=r+5;break}for(;s<i.byteLength;)switch(i[s]){case 0:if(0!==i[s-1])s+=2;else if(0!==i[s-2])s++;else{for(r+3!==s-2&&"slice_layer_without_partitioning_rbsp_idr"===Vt(31&i[r+3])&&(n=!0);1!==i[++s]&&s<i.length;);r=s-2,s+=3}break;case 1:0!==i[s-1]||0!==i[s-2]?s+=3:("slice_layer_without_partitioning_rbsp_idr"===Vt(31&i[r+3])&&(n=!0),r=s-2,s+=3);break;default:s+=3}return i=i.subarray(r),s-=r,r=0,n=i&&3<i.byteLength&&"slice_layer_without_partitioning_rbsp_idr"===Vt(31&i[r+3])?!0:n}},R.aac=b,c.ONE_SECOND_IN_TS),vi=function(e,t){for(var i,s=0,r=188;r<e.byteLength;)if(71===e[s]&&71===e[r]){switch(i=e.subarray(s,r),R.ts.parseType(i,t.pid)){case"pat":t.pid=R.ts.parsePat(i);break;case"pmt":var n=R.ts.parsePmt(i);t.table=t.table||{},Object.keys(n).forEach(function(e){t.table[e]=n[e]})}s+=188,r+=188}else s++,r++},bi=function(e,t,i){for(var s,r,n,a,o=0,l=188,d=!1;l<=e.byteLength;)if(71!==e[o]||71!==e[l]&&l!==e.byteLength)o++,l++;else{if(s=e.subarray(o,l),"pes"===R.ts.parseType(s,t.pid)&&(r=R.ts.parsePesType(s,t.table),n=R.ts.parsePayloadUnitStartIndicator(s),"audio"===r)&&n&&(a=R.ts.parsePesTime(s))&&(a.type="audio",i.audio.push(a),d=!0),d)break;o+=188,l+=188}for(o=(l=e.byteLength)-188,d=!1;0<=o;)if(71!==e[o]||71!==e[l]&&l!==e.byteLength)o--,l--;else{if(s=e.subarray(o,l),"pes"===R.ts.parseType(s,t.pid)&&(r=R.ts.parsePesType(s,t.table),n=R.ts.parsePayloadUnitStartIndicator(s),"audio"===r)&&n&&(a=R.ts.parsePesTime(s))&&(a.type="audio",i.audio.push(a),d=!0),d)break;o-=188,l-=188}},Ti=function(e,t,i){for(var s,r,n,a,o,l,d,h,u=0,c=188,p=!1,m={data:[],size:0};c<e.byteLength;)if(71===e[u]&&71===e[c]){if(s=e.subarray(u,c),"pes"===R.ts.parseType(s,t.pid))if(r=R.ts.parsePesType(s,t.table),n=R.ts.parsePayloadUnitStartIndicator(s),"video"===r&&(n&&!p&&(a=R.ts.parsePesTime(s))&&(a.type="video",i.video.push(a),p=!0),!i.firstKeyFrame)){if(n&&0!==m.size){for(o=new Uint8Array(m.size),l=0;m.data.length;)d=m.data.shift(),o.set(d,l),l+=d.byteLength;R.ts.videoPacketContainsKeyFrame(o)&&(h=R.ts.parsePesTime(o))&&(i.firstKeyFrame=h,i.firstKeyFrame.type="video"),m.size=0}m.data.push(s),m.size+=s.byteLength}if(p&&i.firstKeyFrame)break;u+=188,c+=188}else u++,c++;for(u=(c=e.byteLength)-188,p=!1;0<=u;)if(71===e[u]&&71===e[c]){if(s=e.subarray(u,c),"pes"===R.ts.parseType(s,t.pid)&&(r=R.ts.parsePesType(s,t.table),n=R.ts.parsePayloadUnitStartIndicator(s),"video"===r)&&n&&(a=R.ts.parsePesTime(s))&&(a.type="video",i.video.push(a),p=!0),p)break;u-=188,c-=188}else u--,c--},Si=function(e,t){var i,s,r,e=(R.aac.isLikelyAacData(e)?function(e){for(var t,i,s=!1,r=0,n=null,a=null,o=0,l=0;3<=e.length-l;){switch(R.aac.parseType(e,l)){case"timed-metadata":e.length-l<10?s=!0:(o=R.aac.parseId3TagSize(e,l))>e.length?s=!0:(null===a&&(t=e.subarray(l,l+o),a=R.aac.parseAacTimestamp(t)),l+=o);break;case"audio":e.length-l<7?s=!0:(o=R.aac.parseAdtsSize(e,l))>e.length?s=!0:(null===n&&(t=e.subarray(l,l+o),n=R.aac.parseSampleRate(t)),r++,l+=o);break;default:l++}if(s)return null}return null===n||null===a?null:{audio:[{type:"audio",dts:a,pts:a},{type:"audio",dts:a+1024*r*(i=N/n),pts:a+1024*r*i}]}}:function(e){var t,i={pid:null,table:null},s={};for(t in vi(e,i),i.table)if(i.table.hasOwnProperty(t))switch(i.table[t]){case _i.H264_STREAM_TYPE:s.video=[],Ti(e,i,s),0===s.video.length&&delete s.video;break;case _i.ADTS_STREAM_TYPE:s.audio=[],bi(e,i,s),0===s.audio.length&&delete s.audio}return s})(e);return e&&(e.audio||e.video)?(t=t,(i=e).audio&&i.audio.length&&("undefined"!=typeof(s=t)&&!isNaN(s)||(s=i.audio[0].dts),i.audio.forEach(function(e){e.dts=O(e.dts,s),e.pts=O(e.pts,s),e.dtsTime=e.dts/N,e.ptsTime=e.pts/N})),i.video&&i.video.length&&("undefined"!=typeof(r=t)&&!isNaN(r)||(r=i.video[0].dts),i.video.forEach(function(e){e.dts=O(e.dts,r),e.pts=O(e.pts,r),e.dtsTime=e.dts/N,e.ptsTime=e.pts/N}),i.firstKeyFrame)&&((t=i.firstKeyFrame).dts=O(t.dts,r),t.pts=O(t.pts,r),t.dtsTime=t.dts/N,t.ptsTime=t.pts/N),e):null};class wi{constructor(e,t){this.options=t||{},this.self=e,this.init()}init(){var i,e;this.transmuxer&&this.transmuxer.dispose(),this.transmuxer=new $t(this.options),i=this.self,(e=this.transmuxer).on("data",function(e){var t=e.initSegment,t=(e.initSegment={data:t.buffer,byteOffset:t.byteOffset,byteLength:t.byteLength},e.data);e.data=t.buffer,i.postMessage({action:"data",segment:e,byteOffset:t.byteOffset,byteLength:t.byteLength},[e.data])}),e.on("done",function(e){i.postMessage({action:"done"})}),e.on("gopInfo",function(e){i.postMessage({action:"gopInfo",gopInfo:e})}),e.on("videoSegmentTimingInfo",function(e){var t={start:{decode:c.videoTsToSeconds(e.start.dts),presentation:c.videoTsToSeconds(e.start.pts)},end:{decode:c.videoTsToSeconds(e.end.dts),presentation:c.videoTsToSeconds(e.end.pts)},baseMediaDecodeTime:c.videoTsToSeconds(e.baseMediaDecodeTime)};e.prependedContentDuration&&(t.prependedContentDuration=c.videoTsToSeconds(e.prependedContentDuration)),i.postMessage({action:"videoSegmentTimingInfo",videoSegmentTimingInfo:t})}),e.on("audioSegmentTimingInfo",function(e){var t={start:{decode:c.videoTsToSeconds(e.start.dts),presentation:c.videoTsToSeconds(e.start.pts)},end:{decode:c.videoTsToSeconds(e.end.dts),presentation:c.videoTsToSeconds(e.end.pts)},baseMediaDecodeTime:c.videoTsToSeconds(e.baseMediaDecodeTime)};e.prependedContentDuration&&(t.prependedContentDuration=c.videoTsToSeconds(e.prependedContentDuration)),i.postMessage({action:"audioSegmentTimingInfo",audioSegmentTimingInfo:t})}),e.on("id3Frame",function(e){i.postMessage({action:"id3Frame",id3Frame:e})}),e.on("caption",function(e){i.postMessage({action:"caption",caption:e})}),e.on("trackinfo",function(e){i.postMessage({action:"trackinfo",trackInfo:e})}),e.on("audioTimingInfo",function(e){i.postMessage({action:"audioTimingInfo",audioTimingInfo:{start:c.videoTsToSeconds(e.start),end:c.videoTsToSeconds(e.end)}})}),e.on("videoTimingInfo",function(e){i.postMessage({action:"videoTimingInfo",videoTimingInfo:{start:c.videoTsToSeconds(e.start),end:c.videoTsToSeconds(e.end)}})}),e.on("log",function(e){i.postMessage({action:"log",log:e})})}pushMp4Captions(e){this.captionParser||(this.captionParser=new si,this.captionParser.init());var t=new Uint8Array(e.data,e.byteOffset,e.byteLength),e=this.captionParser.parse(t,e.trackIds,e.timescales);this.self.postMessage({action:"mp4Captions",captions:e&&e.captions||[],logs:e&&e.logs||[],data:t.buffer},[t.buffer])}probeMp4StartTime({timescales:e,data:t}){e=mi(e,t);this.self.postMessage({action:"probeMp4StartTime",startTime:e,data:t},[t.buffer])}probeMp4Tracks({data:e}){var t=gi(e);this.self.postMessage({action:"probeMp4Tracks",tracks:t,data:e},[e.buffer])}probeEmsgID3({data:e,offset:t}){t=fi(e,t);this.self.postMessage({action:"probeEmsgID3",id3Frames:t,emsgData:e},[e.buffer])}probeTs({data:e,baseStartTime:t}){t="number"!=typeof t||isNaN(t)?void 0:t*c.ONE_SECOND_IN_TS,t=Si(e,t);let i=null;t&&((i={hasVideo:t.video&&2===t.video.length||!1,hasAudio:t.audio&&2===t.audio.length||!1}).hasVideo&&(i.videoStart=t.video[0].ptsTime),i.hasAudio)&&(i.audioStart=t.audio[0].ptsTime),this.self.postMessage({action:"probeTs",result:i,data:e},[e.buffer])}clearAllMp4Captions(){this.captionParser&&this.captionParser.clearAllCaptions()}clearParsedMp4Captions(){this.captionParser&&this.captionParser.clearParsedCaptions()}push(e){e=new Uint8Array(e.data,e.byteOffset,e.byteLength);this.transmuxer.push(e)}reset(){this.transmuxer.reset()}setTimestampOffset(e){e=e.timestampOffset||0;this.transmuxer.setBaseMediaDecodeTime(Math.round(c.secondsToVideoTs(e)))}setAudioAppendStart(e){this.transmuxer.setAudioAppendStart(Math.ceil(c.secondsToVideoTs(e.appendStart)))}setRemux(e){this.transmuxer.setRemux(e.remux)}flush(e){this.transmuxer.flush(),self.postMessage({action:"done",type:"transmuxed"})}endTimeline(){this.transmuxer.endTimeline(),self.postMessage({action:"endedtimeline",type:"transmuxed"})}alignGopsWith(e){this.transmuxer.alignGopsWith(e.gopsToAlignWith.slice())}}self.onmessage=function(e){"init"===e.data.action&&e.data.options?this.messageHandlers=new wi(self,e.data.options):(this.messageHandlers||(this.messageHandlers=new wi(self)),e.data&&e.data.action&&"init"!==e.data.action&&this.messageHandlers[e.data.action]&&this.messageHandlers[e.data.action](e.data))}})));const Md=(e,t,i)=>{var{type:s,initSegment:r,captions:n,captionStreams:a,metadata:o,videoFrameDtsTime:l,videoFramePtsTime:d}=e.data.segment,t=(t.buffer.push({captions:n,captionStreams:a,metadata:o}),e.data.segment.boxes||{data:e.data.segment.data}),n={type:s,data:new Uint8Array(t.data,t.data.byteOffset,t.data.byteLength),initSegment:new Uint8Array(r.data,r.byteOffset,r.byteLength)};"undefined"!=typeof l&&(n.videoFrameDtsTime=l),"undefined"!=typeof d&&(n.videoFramePtsTime=d),i(n)},Ud=({transmuxedData:e,callback:t})=>{e.buffer=[],t(e)},Bd=(e,t)=>{t.gopInfo=e.data.gopInfo},Fd=t=>{const{transmuxer:i,bytes:e,audioAppendStart:s,gopsToAlignWith:r,remux:n,onData:a,onTrackInfo:o,onAudioTimingInfo:l,onVideoTimingInfo:d,onVideoSegmentTimingInfo:h,onAudioSegmentTimingInfo:u,onId3:c,onCaptions:p,onDone:m,onEndedTimeline:g,onTransmuxerLog:f,isEndOfTimeline:y}=t,_={buffer:[]};let v=y;var b,T;i.onmessage=e=>{i.currentTransmux!==t||("data"===e.data.action&&Md(e,_,a),"trackinfo"===e.data.action&&o(e.data.trackInfo),"gopInfo"===e.data.action&&Bd(e,_),"audioTimingInfo"===e.data.action&&l(e.data.audioTimingInfo),"videoTimingInfo"===e.data.action&&d(e.data.videoTimingInfo),"videoSegmentTimingInfo"===e.data.action&&h(e.data.videoSegmentTimingInfo),"audioSegmentTimingInfo"===e.data.action&&u(e.data.audioSegmentTimingInfo),"id3Frame"===e.data.action&&c([e.data.id3Frame],e.data.id3Frame.dispatchType),"caption"===e.data.action&&p(e.data.caption),"endedtimeline"===e.data.action&&(v=!1,g()),"log"===e.data.action&&f(e.data.log),"transmuxed"!==e.data.type)||v||(i.onmessage=null,Ud({transmuxedData:_,callback:m}),qd(i))},s&&i.postMessage({action:"setAudioAppendStart",appendStart:s}),Array.isArray(r)&&i.postMessage({action:"alignGopsWith",gopsToAlignWith:r}),"undefined"!=typeof n&&i.postMessage({action:"setRemux",remux:n}),e.byteLength&&(b=e instanceof ArrayBuffer?e:e.buffer,T=e instanceof ArrayBuffer?0:e.byteOffset,i.postMessage({action:"push",data:b,byteOffset:T,byteLength:e.byteLength},[b])),y&&i.postMessage({action:"endTimeline"}),i.postMessage({action:"flush"})},qd=e=>{e.currentTransmux=null,e.transmuxQueue.length&&(e.currentTransmux=e.transmuxQueue.shift(),"function"==typeof e.currentTransmux?e.currentTransmux():Fd(e.currentTransmux))},jd=(e,t)=>{e.postMessage({action:t}),qd(e)},Hd=(e,t)=>{t.currentTransmux?t.transmuxQueue.push(jd.bind(null,t,e)):(t.currentTransmux=e,jd(t,e))};const Vd=e=>{e.transmuxer.currentTransmux?e.transmuxer.transmuxQueue.push(e):(e.transmuxer.currentTransmux=e,Fd(e))};var $d=e=>{Hd("reset",e)},zd=(Vd,e=>{const t=new Nd,i=(t.currentTransmux=null,t.transmuxQueue=[],t.terminate);return t.terminate=()=>(t.currentTransmux=null,t.transmuxQueue.length=0,i.call(t)),t.postMessage({action:"init",options:e}),t});function Wd(t){const i=t.transmuxer,s=t.endAction||t.action,r=t.callback;var e,n=bi({},t,{endAction:null,transmuxer:null,callback:null});const a=e=>{e.data.action===s&&(i.removeEventListener("message",a),e.data.data&&(e.data.data=new Uint8Array(e.data.data,t.byteOffset||0,t.byteLength||e.data.data.byteLength),t.data)&&(t.data=e.data.data),r(e.data))};i.addEventListener("message",a),t.data?(e=t.data instanceof ArrayBuffer,n.byteOffset=e?0:t.data.byteOffset,n.byteLength=t.data.byteLength,e=[e?t.data:t.data.buffer],i.postMessage(n,e)):i.postMessage(n)}function Gd(e){let t=0;return e.audio&&t++,e.video&&t++,t}function Xd(e,t){var i=t.attributes||{},s=uh(function(e){e=e.attributes||{};if(e.CODECS)return yn(e.CODECS)}(t)||[]);return!hh(e,t)||s.audio||((e,t)=>{if(!hh(e,t))return!0;var t=t.attributes||{},i=e.mediaGroups.AUDIO[t.AUDIO];for(const s in i)if(!i[s].uri&&!i[s].playlists)return!0;return!1})(e,t)||(t=uh(function(e,t){if(e.mediaGroups.AUDIO&&t){var i=e.mediaGroups.AUDIO[t];if(i)for(var s in i){s=i[s];if(s.default&&s.playlists)return yn(s.playlists[0].attributes.CODECS)}}return null}(e,i.AUDIO)||[])).audio&&(s.audio=t.audio),s}function Kd(e,t){return(e=e&&window.getComputedStyle(e))?e[t]:""}function Yd(e,t){let i,s;return i=(i=e.attributes.BANDWIDTH?e.attributes.BANDWIDTH:i)||window.Number.MAX_VALUE,s=(s=t.attributes.BANDWIDTH?t.attributes.BANDWIDTH:s)||window.Number.MAX_VALUE,i-s}const Qd={FAILURE:2,TIMEOUT:-101,ABORTED:-102},Jd=e=>{e.forEach(e=>{e.abort()})},Zd=e=>({bandwidth:e.bandwidth,bytesReceived:e.bytesReceived||0,roundTripTime:e.roundTripTime||0}),eh=e=>{var t=e.target,t={bandwidth:1/0,bytesReceived:0,roundTripTime:Date.now()-t.requestTime||0};return t.bytesReceived=e.loaded,t.bandwidth=Math.floor(t.bytesReceived/t.roundTripTime*8*1e3),t},th=(e,t)=>t.timedout?{status:t.status,message:"HLS request timed-out at URL: "+t.uri,code:Qd.TIMEOUT,xhr:t}:t.aborted?{status:t.status,message:"HLS request aborted at URL: "+t.uri,code:Qd.ABORTED,xhr:t}:e?{status:t.status,message:"HLS request errored at URL: "+t.uri,code:Qd.FAILURE,xhr:t}:"arraybuffer"===t.responseType&&0===t.response.byteLength?{status:t.status,message:"Empty HLS response at URL: "+t.uri,code:Qd.FAILURE,xhr:t}:null,ih=(r,n,a)=>(e,t)=>{var i=t.response,e=th(e,t);if(e)return a(e,r);if(16!==i.byteLength)return a({status:t.status,message:"Invalid HLS key at URL: "+t.uri,code:Qd.FAILURE,xhr:t},r);var e=new DataView(i),s=new Uint32Array([e.getUint32(0),e.getUint32(4),e.getUint32(8),e.getUint32(12)]);for(let e=0;e<n.length;e++)n[e].bytes=s;return a(null,r)},sh=(i,s)=>{var e,t=Qo(i.map.bytes);if("mp4"!==t)return e=i.map.resolvedUri||i.map.uri,s({internal:!0,message:`Found unsupported ${t=t||"unknown"} container for initialization segment at URL: `+e,code:Qd.FAILURE,metadata:{errorType:b.Error.UnsupportedMediaInitialization,mediaType:t}});Wd({action:"probeMp4Tracks",data:i.map.bytes,transmuxer:i.transmuxer,callback:({tracks:e,data:t})=>(i.map.bytes=t,e.forEach(function(e){i.map.tracks=i.map.tracks||{},i.map.tracks[e.type]||"number"==typeof(i.map.tracks[e.type]=e).id&&e.timescale&&(i.map.timescales=i.map.timescales||{},i.map.timescales[e.id]=e.timescale)}),s(null))})},rh=({segment:i,bytes:t,trackInfoFn:s,timingInfoFn:e,videoSegmentTimingInfoFn:r,audioSegmentTimingInfoFn:n,id3Fn:a,captionsFn:o,isEndOfTimeline:l,endedTimelineFn:d,dataFn:h,doneFn:u,onTransmuxerLog:c})=>{var p=i.map&&i.map.tracks||{};const m=Boolean(p.audio&&p.video);let g=e.bind(null,i,"audio","start");const f=e.bind(null,i,"audio","end");let y=e.bind(null,i,"video","start");const _=e.bind(null,i,"video","end");Wd({action:"probeTs",transmuxer:i.transmuxer,data:t,baseStartTime:i.baseStartTime,callback:e=>{i.bytes=t=e.data;e=e.result;e&&(s(i,{hasAudio:e.hasAudio,hasVideo:e.hasVideo,isMuxed:m}),s=null),Vd({bytes:t,transmuxer:i.transmuxer,audioAppendStart:i.audioAppendStart,gopsToAlignWith:i.gopsToAlignWith,remux:m,onData:e=>{e.type="combined"===e.type?"video":e.type,h(i,e)},onTrackInfo:e=>{s&&(m&&(e.isMuxed=!0),s(i,e))},onAudioTimingInfo:e=>{g&&"undefined"!=typeof e.start&&(g(e.start),g=null),f&&"undefined"!=typeof e.end&&f(e.end)},onVideoTimingInfo:e=>{y&&"undefined"!=typeof e.start&&(y(e.start),y=null),_&&"undefined"!=typeof e.end&&_(e.end)},onVideoSegmentTimingInfo:e=>{r(e)},onAudioSegmentTimingInfo:e=>{n(e)},onId3:(e,t)=>{a(i,e,t)},onCaptions:e=>{o(i,[e])},isEndOfTimeline:l,onEndedTimeline:()=>{d()},onTransmuxerLog:c,onDone:e=>{u&&(e.type="combined"===e.type?"video":e.type,u(null,i,e))}})}})},nh=({segment:i,bytes:s,trackInfoFn:e,timingInfoFn:r,videoSegmentTimingInfoFn:t,audioSegmentTimingInfoFn:n,id3Fn:a,captionsFn:o,isEndOfTimeline:l,endedTimelineFn:d,dataFn:h,doneFn:u,onTransmuxerLog:c})=>{let p=new Uint8Array(s);if(m=p,0<Go(m,["moof"]).length){i.isFmp4=!0;const g=i.map["tracks"],f={isFmp4:!0,hasVideo:!!g.video,hasAudio:!!g.audio},y=(g.audio&&g.audio.codec&&"enca"!==g.audio.codec&&(f.audioCodec=g.audio.codec),g.video&&g.video.codec&&"encv"!==g.video.codec&&(f.videoCodec=g.video.codec),g.video&&g.audio&&(f.isMuxed=!0),e(i,f),(e,t)=>{h(i,{data:p,type:f.hasAudio&&!f.isMuxed?"audio":"video"}),t&&t.length&&a(i,t),e&&e.length&&o(i,e),u(null,i,{})});void Wd({action:"probeMp4StartTime",timescales:i.map.timescales,data:p,transmuxer:i.transmuxer,callback:({data:e,startTime:t})=>{s=e.buffer,i.bytes=p=e,f.hasAudio&&!f.isMuxed&&r(i,"audio","start",t),f.hasVideo&&r(i,"video","start",t),Wd({action:"probeEmsgID3",data:p,transmuxer:i.transmuxer,offset:t,callback:({emsgData:e,id3Frames:t})=>{s=e.buffer,i.bytes=p=e,g.video&&e.byteLength&&i.transmuxer?Wd({action:"pushMp4Captions",endAction:"mp4Captions",transmuxer:i.transmuxer,data:p,timescales:i.map.timescales,trackIds:[g.video.id],callback:e=>{s=e.data.buffer,i.bytes=p=e.data,e.logs.forEach(function(e){c(L(e,{stream:"mp4CaptionParser"}))}),y(e.captions,t)}}):y(void 0,t)}})}})}else{var m;i.transmuxer?("undefined"==typeof i.container&&(i.container=Qo(p)),"ts"!==i.container&&"aac"!==i.container?(e(i,{hasAudio:!1,hasVideo:!1}),u(null,i,{})):rh({segment:i,bytes:s,trackInfoFn:e,timingInfoFn:r,videoSegmentTimingInfoFn:t,audioSegmentTimingInfoFn:n,id3Fn:a,captionsFn:o,isEndOfTimeline:l,endedTimelineFn:d,dataFn:h,doneFn:u,onTransmuxerLog:c})):u(null,i,{})}},ah=function({id:t,key:e,encryptedBytes:i,decryptionWorker:s},r){const n=e=>{e.data.source===t&&(s.removeEventListener("message",n),e=e.data.decrypted,r(new Uint8Array(e.bytes,e.byteOffset,e.byteLength)))};s.addEventListener("message",n);let a;a=e.bytes.slice?e.bytes.slice():new Uint32Array(Array.prototype.slice.call(e.bytes)),s.postMessage(pd({source:t,encrypted:i,key:a,iv:e.iv}),[i.buffer,a.buffer])},oh=({decryptionWorker:e,segment:t,trackInfoFn:i,timingInfoFn:s,videoSegmentTimingInfoFn:r,audioSegmentTimingInfoFn:n,id3Fn:a,captionsFn:o,isEndOfTimeline:l,endedTimelineFn:d,dataFn:h,doneFn:u,onTransmuxerLog:c})=>{ah({id:t.requestId,key:t.key,encryptedBytes:t.encryptedBytes,decryptionWorker:e},e=>{t.bytes=e,nh({segment:t,bytes:t.bytes,trackInfoFn:i,timingInfoFn:s,videoSegmentTimingInfoFn:r,audioSegmentTimingInfoFn:n,id3Fn:a,captionsFn:o,isEndOfTimeline:l,endedTimelineFn:d,dataFn:h,doneFn:u,onTransmuxerLog:c})})},lh=({xhr:e,xhrOptions:t,decryptionWorker:i,segment:s,abortFn:r,progressFn:n,trackInfoFn:a,timingInfoFn:o,videoSegmentTimingInfoFn:l,audioSegmentTimingInfoFn:d,id3Fn:h,captionsFn:u,isEndOfTimeline:c,endedTimelineFn:p,dataFn:m,doneFn:g,onTransmuxerLog:f})=>{const y=[];var _,v,i=(({activeXhrs:s,decryptionWorker:r,trackInfoFn:n,timingInfoFn:a,videoSegmentTimingInfoFn:o,audioSegmentTimingInfoFn:l,id3Fn:d,captionsFn:h,isEndOfTimeline:u,endedTimelineFn:c,dataFn:p,doneFn:m,onTransmuxerLog:g})=>{let f=0,y=!1;return(e,t)=>{if(!y){if(e)return y=!0,Jd(s),m(e,t);if((f+=1)===s.length){const i=function(){if(t.encryptedBytes)return oh({decryptionWorker:r,segment:t,trackInfoFn:n,timingInfoFn:a,videoSegmentTimingInfoFn:o,audioSegmentTimingInfoFn:l,id3Fn:d,captionsFn:h,isEndOfTimeline:u,endedTimelineFn:c,dataFn:p,doneFn:m,onTransmuxerLog:g});nh({segment:t,bytes:t.bytes,trackInfoFn:n,timingInfoFn:a,videoSegmentTimingInfoFn:o,audioSegmentTimingInfoFn:l,id3Fn:d,captionsFn:h,isEndOfTimeline:u,endedTimelineFn:c,dataFn:p,doneFn:m,onTransmuxerLog:g})};if(t.endOfAllRequests=Date.now(),t.map&&t.map.encryptedBytes&&!t.map.bytes)return ah({decryptionWorker:r,id:t.requestId+"-init",encryptedBytes:t.map.encryptedBytes,key:t.map.key},e=>{t.map.bytes=e,sh(t,e=>{if(e)return Jd(s),m(e,t);i()})});i()}}}})({activeXhrs:y,decryptionWorker:i,trackInfoFn:a,timingInfoFn:o,videoSegmentTimingInfoFn:l,audioSegmentTimingInfoFn:d,id3Fn:h,captionsFn:u,isEndOfTimeline:c,endedTimelineFn:p,dataFn:m,doneFn:g,onTransmuxerLog:f}),u=(s.key&&!s.key.bytes&&(a=[s.key],s.map&&!s.map.bytes&&s.map.key&&s.map.key.resolvedUri===s.key.resolvedUri&&a.push(s.map.key),o=e(L(t,{uri:s.key.resolvedUri,responseType:"arraybuffer",requestType:"segment-key"}),ih(s,a,i)),y.push(o)),s.map&&!s.map.bytes&&(!s.map.key||s.key&&s.key.resolvedUri===s.map.key.resolvedUri||(l=e(L(t,{uri:s.map.key.resolvedUri,responseType:"arraybuffer",requestType:"segment-key"}),ih(s,[s.map.key],i)),y.push(l)),d=L(t,{uri:s.map.resolvedUri,responseType:"arraybuffer",headers:hd(s.map),requestType:"segment-media-initialization"}),{segment:_,finishProcessingFn:v}=[{segment:s,finishProcessingFn:i}][0],h=e(d,(e,t)=>{var e=th(e,t);return e?v(e,_):(e=new Uint8Array(t.response),_.map.key?(_.map.encryptedBytes=e,v(null,_)):(_.map.bytes=e,void sh(_,function(e){if(e)return e.xhr=t,e.status=t.status,v(e,_);v(null,_)})))}),y.push(h)),L(t,{uri:s.part&&s.part.resolvedUri||s.resolvedUri,responseType:"arraybuffer",headers:hd(s),requestType:"segment"}));({segment:b,finishProcessingFn:T,responseType:S}={segment:s,finishProcessingFn:i,responseType:u.responseType});var b,T,S,w,E,c=e(u,(e,t)=>{var e=th(e,t);return e?T(e,b):(e="arraybuffer"!==S&&t.responseText?Pd(t.responseText.substring(b.lastReachedChar||0)):t.response,b.stats=Zd(t),b.key?b.encryptedBytes=new Uint8Array(e):b.bytes=new Uint8Array(e),T(null,b))});c.addEventListener("progress",({segment:w,progressFn:E}=[{segment:s,progressFn:n}][0],e=>{var t=e.target;if(!t.aborted)return w.stats=L(w.stats,eh(e)),!w.stats.firstBytesReceivedAt&&w.stats.bytesReceived&&(w.stats.firstBytesReceivedAt=Date.now()),E(e,w)})),y.push(c);const C={};return y.forEach(e=>{var t,i;e.addEventListener("loadend",({loadendState:t,abortFn:i}=[{loadendState:C,abortFn:r}][0],e=>{e.target.aborted&&i&&!t.calledAbortFn&&(i(),t.calledAbortFn=!0)}))}),()=>Jd(y)},dh=yl("CodecUtils"),hh=(e,t)=>{t=t.attributes||{};return e&&e.mediaGroups&&e.mediaGroups.AUDIO&&t.AUDIO&&e.mediaGroups.AUDIO[t.AUDIO]},uh=function(e){const s={};return e.forEach(({mediaType:e,type:t,details:i})=>{s[e]=s[e]||[],s[e].push(fn(""+t+i))}),Object.keys(s).forEach(function(e){1<s[e].length?(dh(`multiple ${e} codecs found as attributes: ${s[e].join(", ")}. Setting playlist codecs to null so that we wait for mux.js to probe segments for real codecs.`),s[e]=null):s[e]=s[e][0]}),s},ch=yl("PlaylistSelector"),ph=function(e){var t;if(e&&e.playlist)return t=e.playlist,JSON.stringify({id:t.id,bandwidth:e.bandwidth,width:e.width,height:e.height,codecs:t.attributes&&t.attributes.CODECS||""})},mh=function(e,s){const r=e.slice();e.sort(function(e,t){var i=s(e,t);return 0===i?r.indexOf(e)-r.indexOf(t):i})};function gh(o,t,l,d,h,u){if(o){var c={bandwidth:t,width:l,height:d,limitRenditionByPlayerDimensions:h};let e=o.playlists,r=(Gl.isAudioOnly(o)&&(e=u.getAudioTrackPlaylists_(),c.audioOnly=!0),e.map(e=>{var t=e.attributes&&e.attributes.RESOLUTION&&e.attributes.RESOLUTION.width,i=e.attributes&&e.attributes.RESOLUTION&&e.attributes.RESOLUTION.height,s=e.attributes&&e.attributes.BANDWIDTH;return{bandwidth:s||window.Number.MAX_VALUE,width:t,height:i,playlist:e}})),n=(mh(r,(e,t)=>e.bandwidth-t.bandwidth),(r=r.filter(e=>!Gl.isIncompatible(e.playlist))).filter(e=>Gl.isEnabled(e.playlist)));o=(n=n.length?n:r.filter(e=>!Gl.isDisabled(e.playlist))).filter(e=>e.bandwidth*O.BANDWIDTH_VARIANCE<t);let a=o[o.length-1];var p=o.filter(e=>e.bandwidth===a.bandwidth)[0];if(!1===h){const g=p||n[0]||r[0];if(g&&g.playlist){let e=p?"bandwidthBestRep":"sortedPlaylistReps";return n[0]&&(e="enabledPlaylistReps"),ch(`choosing ${ph(g)} using ${e} with options`,c),g.playlist}}else{var m,h=o.filter(e=>e.width&&e.height),o=(mh(h,(e,t)=>e.width-t.width),h.filter(e=>e.width===l&&e.height===d)),o=(a=o[o.length-1],o.filter(e=>e.bandwidth===a.bandwidth)[0]);let t,i;o||(m=(t=h.filter(e=>e.width>l||e.height>d)).filter(e=>e.width===t[0].width&&e.height===t[0].height),a=m[m.length-1],i=m.filter(e=>e.bandwidth===a.bandwidth)[0]);let s;u.leastPixelDiffSelector&&(m=h.map(e=>(e.pixelDiff=Math.abs(e.width-l)+Math.abs(e.height-d),e)),mh(m,(e,t)=>e.pixelDiff===t.pixelDiff?t.bandwidth-e.bandwidth:e.pixelDiff-t.pixelDiff),s=m[0]);const g=s||i||o||p||n[0]||r[0];if(g&&g.playlist){let e="sortedPlaylistReps";return s?e="leastPixelDiffRep":i?e="resolutionPlusOneRep":o?e="resolutionBestRep":p?e="bandwidthBestRep":n[0]&&(e="enabledPlaylistReps"),ch(`choosing ${ph(g)} using ${e} with options`,c),g.playlist}}return ch("could not choose a playlist with options",c),null}}function fh(){let e=this.useDevicePixelRatio&&window.devicePixelRatio||1;return isNaN(this.customPixelRatio)||(e=this.customPixelRatio),gh(this.playlists.main,this.systemBandwidth,parseInt(Kd(this.tech_.el(),"width"),10)*e,parseInt(Kd(this.tech_.el(),"height"),10)*e,this.limitRenditionByPlayerDimensions,this.playlistController_)}function yh(e){try{return new URL(e).pathname.split("/").slice(-2).join("/")}catch(e){return""}}function _h(e,t,i){let s;var r;if(i&&i.cues)for(s=i.cues.length;s--;)(r=i.cues[s]).startTime>=e&&r.endTime<=t&&i.removeCue(r)}const vh=({inbandTextTracks:e,metadataArray:t,timestampOffset:i,videoDuration:r})=>{if(t){const a=window.WebKitDataCue||window.VTTCue,o=e.metadataTrack_;if(o&&(t.forEach(e=>{const s=e.cueTime+i;!("number"!=typeof s||window.isNaN(s)||s<0)&&s<1/0&&e.frames&&e.frames.length&&e.frames.forEach(e=>{var t,i=new a(s,s,e.value||e.url||e.data||"");i.frame=e,i.value=e,t=i,Object.defineProperties(t.frame,{id:{get(){return b.log.warn("cue.frame.id is deprecated. Use cue.value.key instead."),t.value.key}},value:{get(){return b.log.warn("cue.frame.value is deprecated. Use cue.value.data instead."),t.value.data}},privateData:{get(){return b.log.warn("cue.frame.privateData is deprecated. Use cue.value.data instead."),t.value.data}}}),o.addCue(i)})}),o.cues)&&o.cues.length){var s=o.cues,n=[];for(let e=0;e<s.length;e++)s[e]&&n.push(s[e]);const l=n.reduce((e,t)=>{var i=e[t.startTime]||[];return i.push(t),e[t.startTime]=i,e},{}),d=Object.keys(l).sort((e,t)=>Number(e)-Number(t));d.forEach((e,t)=>{var i=l[e],e=isFinite(r)?r:e;const s=Number(d[t+1])||e;i.forEach(e=>{e.endTime=s})})}}},bh={id:"ID",class:"CLASS",startDate:"START-DATE",duration:"DURATION",endDate:"END-DATE",endOnNext:"END-ON-NEXT",plannedDuration:"PLANNED-DURATION",scte35Out:"SCTE35-OUT",scte35In:"SCTE35-IN"},Th=new Set(["id","class","startDate","duration","endDate","endOnNext","startTime","endTime","processDateRange"]),Sh=(e,t,i)=>{e.metadataTrack_||(e.metadataTrack_=i.addRemoteTextTrack({kind:"metadata",label:"Timed Metadata"},!1).track,b.browser.IS_ANY_SAFARI)||(e.metadataTrack_.inBandMetadataTrackDispatchType=t)},wh=e=>"number"==typeof e&&isFinite(e),Eh=e=>{var{startOfSegment:t,duration:i,segment:s,part:r,playlist:{mediaSequence:n,id:a,segments:o=[]},mediaIndex:l,partIndex:d,timeline:h}=e,o=o.length-1;let u="mediaIndex/partIndex increment";e.getMediaInfoForTime?u=`getMediaInfoForTime (${e.getMediaInfoForTime})`:e.isSyncRequest&&(u="getSyncSegmentCandidate (isSyncRequest)"),e.independent&&(u+=" with independent "+e.independent);var c="number"==typeof d,e=e.segment.uri?"segment":"pre-segment",p=c?Ol({preloadSegment:s})-1:0;return e+` [${n+l}/${n+o}]`+(c?` part [${d}/${p}]`:"")+` segment start/end [${s.start} => ${s.end}]`+(c?` part start/end [${r.start} => ${r.end}]`:"")+` startOfSegment [${t}]`+` duration [${i}]`+` timeline [${h}]`+` selected by [${u}]`+` playlist [${a}]`},Ch=e=>e+"TimingInfo",kh=({timelineChangeController:e,currentTimeline:t,segmentTimeline:i,loaderType:s,audioDisabled:r})=>{return!(t===i||("audio"===s?(t=e.lastTimelineChange({type:"main"}))&&t.to===i:"main"!==s||!r||(t=e.pendingTimelineChange({type:"audio"}))&&t.to===i))},Ih=({segmentDuration:e,maxDuration:t})=>!!e&&Math.round(e)>t+Cl,xh=(e,t)=>{var i,s,r;return"hls"===t&&(t=(e=>{let s=0;return["video","audio"].forEach(function(t){t=e[t+"TimingInfo"];if(t){var{start:t,end:i}=t;let e;"bigint"==typeof t||"bigint"==typeof i?e=window.BigInt(i)-window.BigInt(t):"number"==typeof t&&"number"==typeof i&&(e=i-t),"undefined"!=typeof e&&e>s&&(s=e)}}),s="bigint"==typeof s&&s<Number.MAX_SAFE_INTEGER?Number(s):s})({audioTimingInfo:e.audioTimingInfo,videoTimingInfo:e.videoTimingInfo}))&&(i=e.playlist.targetDuration,s=Ih({segmentDuration:t,maxDuration:2*i}),r=Ih({segmentDuration:t,maxDuration:i}),t=`Segment with index ${e.mediaIndex} `+`from playlist ${e.playlist.id} `+`has a duration of ${t} `+`when the reported duration is ${e.duration} `+`and the target duration is ${i}. `+"For HLS content, a duration in excess of the target duration may result in playback issues. See the HLS specification section on EXT-X-TARGETDURATION for more details: https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.3.1",s||r)?{severity:s?"warn":"info",message:t}:null};class Ah extends b.EventTarget{constructor(e,t=0){if(super(),!e)throw new TypeError("Initialization settings are required");if("function"!=typeof e.currentTime)throw new TypeError("No currentTime getter specified");if(!e.mediaSource)throw new TypeError("No MediaSource specified");this.bandwidth=e.bandwidth,this.throughput={rate:0,count:0},this.roundTrip=NaN,this.resetStats_(),this.mediaIndex=null,this.partIndex=null,this.hasPlayed_=e.hasPlayed,this.currentTime_=e.currentTime,this.seekable_=e.seekable,this.seeking_=e.seeking,this.duration_=e.duration,this.mediaSource_=e.mediaSource,this.vhs_=e.vhs,this.loaderType_=e.loaderType,this.currentMediaInfo_=void 0,this.startingMediaInfo_=void 0,this.segmentMetadataTrack_=e.segmentMetadataTrack,this.goalBufferLength_=e.goalBufferLength,this.sourceType_=e.sourceType,this.sourceUpdater_=e.sourceUpdater,this.inbandTextTracks_=e.inbandTextTracks,this.state_="INIT",this.timelineChangeController_=e.timelineChangeController,this.shouldSaveSegmentTimingInfo_=!0,this.parse708captions_=e.parse708captions,this.useDtsForTimestampOffset_=e.useDtsForTimestampOffset,this.captionServices_=e.captionServices,this.exactManifestTimings=e.exactManifestTimings,this.addMetadataToTextTrack=e.addMetadataToTextTrack,this.checkBufferTimeout_=null,this.error_=void 0,this.currentTimeline_=-1,this.shouldForceTimestampOffsetAfterResync_=!1,this.pendingSegment_=null,this.xhrOptions_=null,this.pendingSegments_=[],this.audioDisabled_=!1,this.isPendingTimestampOffset_=!1,this.gopBuffer_=[],this.timeMapping_=0,this.safeAppend_=!1,this.appendInitSegment_={audio:!0,video:!0},this.playlistOfLastInitSegment_={audio:null,video:null},this.callQueue_=[],this.loadQueue_=[],this.metadataQueue_={id3:[],caption:[]},this.waitingOnRemove_=!1,this.quotaExceededErrorRetryTimeout_=null,this.activeInitSegmentId_=null,this.initSegments_={},this.cacheEncryptionKeys_=e.cacheEncryptionKeys,this.keyCache_={},this.decrypter_=e.decrypter,this.syncController_=e.syncController,this.syncPoint_={segmentIndex:0,time:0},this.transmuxer_=this.createTransmuxer_(),this.triggerSyncInfoUpdate_=()=>this.trigger("syncinfoupdate"),this.syncController_.on("syncinfoupdate",this.triggerSyncInfoUpdate_),this.mediaSource_.addEventListener("sourceopen",()=>{this.isEndOfStream_()||(this.ended_=!1)}),this.fetchAtBuffer_=!1,this.logger_=yl(`SegmentLoader[${this.loaderType_}]`),Object.defineProperty(this,"state",{get(){return this.state_},set(e){e!==this.state_&&(this.logger_(this.state_+" -> "+e),this.state_=e,this.trigger("statechange"))}}),this.sourceUpdater_.on("ready",()=>{this.hasEnoughInfoToAppend_()&&this.processCallQueue_()}),"main"===this.loaderType_&&this.timelineChangeController_.on("pendingtimelinechange",()=>{this.hasEnoughInfoToAppend_()&&this.processCallQueue_()}),"audio"===this.loaderType_&&this.timelineChangeController_.on("timelinechange",()=>{this.hasEnoughInfoToLoad_()&&this.processLoadQueue_(),this.hasEnoughInfoToAppend_()&&this.processCallQueue_()})}get mediaSequenceSync_(){return this.syncController_.getMediaSequenceSync(this.loaderType_)}createTransmuxer_(){return zd({remux:!1,alignGopsAtEnd:this.safeAppend_,keepOriginalTimestamps:!0,parse708captions:this.parse708captions_,captionServices:this.captionServices_})}resetStats_(){this.mediaBytesTransferred=0,this.mediaRequests=0,this.mediaRequestsAborted=0,this.mediaRequestsTimedout=0,this.mediaRequestsErrored=0,this.mediaTransferDuration=0,this.mediaSecondsLoaded=0,this.mediaAppends=0}dispose(){this.trigger("dispose"),this.state="DISPOSED",this.pause(),this.abort_(),this.transmuxer_&&this.transmuxer_.terminate(),this.resetStats_(),this.checkBufferTimeout_&&window.clearTimeout(this.checkBufferTimeout_),this.syncController_&&this.triggerSyncInfoUpdate_&&this.syncController_.off("syncinfoupdate",this.triggerSyncInfoUpdate_),this.off()}setAudio(e){this.audioDisabled_=!e,e?this.appendInitSegment_.audio=!0:this.sourceUpdater_.removeAudio(0,this.duration_())}abort(){"WAITING"!==this.state?this.pendingSegment_&&(this.pendingSegment_=null):(this.abort_(),this.state="READY",this.paused()||this.monitorBuffer_())}abort_(){this.pendingSegment_&&this.pendingSegment_.abortRequests&&this.pendingSegment_.abortRequests(),this.pendingSegment_=null,this.callQueue_=[],this.loadQueue_=[],this.metadataQueue_.id3=[],this.metadataQueue_.caption=[],this.timelineChangeController_.clearPendingTimelineChange(this.loaderType_),this.waitingOnRemove_=!1,window.clearTimeout(this.quotaExceededErrorRetryTimeout_),this.quotaExceededErrorRetryTimeout_=null}checkForAbort_(e){return"APPENDING"!==this.state||this.pendingSegment_?!this.pendingSegment_||this.pendingSegment_.requestId!==e:(this.state="READY",!0)}error(e){return"undefined"!=typeof e&&(this.logger_("error occurred:",e),this.error_=e),this.pendingSegment_=null,this.error_}endOfStream(){this.ended_=!0,this.transmuxer_&&$d(this.transmuxer_),this.gopBuffer_.length=0,this.pause(),this.trigger("ended")}buffered_(){var e=this.getMediaInfo_();if(!this.sourceUpdater_||!e)return _l();if("main"===this.loaderType_){var{hasAudio:e,hasVideo:t,isMuxed:i}=e;if(t&&e&&!this.audioDisabled_&&!i)return this.sourceUpdater_.buffered();if(t)return this.sourceUpdater_.videoBuffered()}return this.sourceUpdater_.audioBuffered()}initSegmentForMap(e,t=!1){if(!e)return null;var i=md(e);let s=this.initSegments_[i];return t&&!s&&e.bytes&&(this.initSegments_[i]=s={resolvedUri:e.resolvedUri,byterange:e.byterange,bytes:e.bytes,tracks:e.tracks,timescales:e.timescales}),s||e}segmentKey(e,t=!1){if(!e)return null;var i=gd(e);let s=this.keyCache_[i];this.cacheEncryptionKeys_&&t&&!s&&e.bytes&&(this.keyCache_[i]=s={resolvedUri:e.resolvedUri,bytes:e.bytes});t={resolvedUri:(s||e).resolvedUri};return s&&(t.bytes=s.bytes),t}couldBeginLoading_(){return this.playlist_&&!this.paused()}load(){if(this.monitorBuffer_(),this.playlist_)return"INIT"===this.state&&this.couldBeginLoading_()?this.init_():void(!this.couldBeginLoading_()||"READY"!==this.state&&"INIT"!==this.state||(this.state="READY"))}init_(){return this.state="READY",this.resetEverything(),this.monitorBuffer_()}playlist(t,i={}){if(t){var s,r=this.playlist_,n=this.pendingSegment_;this.playlist_=t,this.xhrOptions_=i,"INIT"===this.state&&(t.syncInfo={mediaSequence:t.mediaSequence,time:0},"main"===this.loaderType_)&&this.syncController_.setDateTimeMappingForStart(t);let e=null;if(r&&(r.id?e=r.id:r.uri&&(e=r.uri)),this.logger_(`playlist update [${e} => ${t.id||t.uri}]`),this.mediaSequenceSync_&&(this.mediaSequenceSync_.update(t,this.currentTime_()),this.logger_(`Playlist update:
+currentTime: ${this.currentTime_()}
+bufferedEnd: ${Tl(this.buffered_())}
+`,this.mediaSequenceSync_.diagnostics)),this.trigger("syncinfoupdate"),"INIT"===this.state&&this.couldBeginLoading_())return this.init_();r&&r.uri===t.uri?(i=t.mediaSequence-r.mediaSequence,this.logger_(`live window shift [${i}]`),null!==this.mediaIndex&&(this.mediaIndex-=i,this.mediaIndex<0?(this.mediaIndex=null,this.partIndex=null):(s=this.playlist_.segments[this.mediaIndex],!this.partIndex||s.parts&&s.parts.length&&s.parts[this.partIndex]||(s=this.mediaIndex,this.logger_(`currently processing part (index ${this.partIndex}) no longer exists.`),this.resetLoader(),this.mediaIndex=s))),n&&(n.mediaIndex-=i,n.mediaIndex<0?(n.mediaIndex=null,n.partIndex=null):(0<=n.mediaIndex&&(n.segment=t.segments[n.mediaIndex]),0<=n.partIndex&&n.segment.parts&&(n.part=n.segment.parts[n.partIndex]))),this.syncController_.saveExpiredSegmentInfo(r,t)):(null!==this.mediaIndex&&(!t.endList&&"number"==typeof t.partTargetDuration?this.resetLoader():this.resyncLoader()),this.currentMediaInfo_=void 0,this.trigger("playlistupdate"))}}pause(){this.checkBufferTimeout_&&(window.clearTimeout(this.checkBufferTimeout_),this.checkBufferTimeout_=null)}paused(){return null===this.checkBufferTimeout_}resetEverything(e){this.ended_=!1,this.activeInitSegmentId_=null,this.appendInitSegment_={audio:!0,video:!0},this.resetLoader(),this.remove(0,1/0,e),this.transmuxer_&&(this.transmuxer_.postMessage({action:"clearAllMp4Captions"}),this.transmuxer_.postMessage({action:"reset"}))}resetLoader(){this.fetchAtBuffer_=!1,this.mediaSequenceSync_&&this.mediaSequenceSync_.resetAppendedStatus(),this.resyncLoader()}resyncLoader(){this.transmuxer_&&$d(this.transmuxer_),this.mediaIndex=null,this.partIndex=null,this.syncPoint_=null,this.isPendingTimestampOffset_=!1;var e=this.currentMediaInfo_&&this.currentMediaInfo_.isFmp4;"hls"!==this.sourceType_||e||(this.shouldForceTimestampOffsetAfterResync_=!0),this.callQueue_=[],this.loadQueue_=[],this.metadataQueue_.id3=[],this.metadataQueue_.caption=[],this.abort(),this.transmuxer_&&this.transmuxer_.postMessage({action:"clearParsedMp4Captions"})}remove(t,i,s=()=>{},r=!1){if((i=i===1/0?this.duration_():i)<=t)this.logger_("skipping remove because end ${end} is <= start ${start}");else if(this.sourceUpdater_&&this.getMediaInfo_()){let e=1;var n=()=>{0===--e&&s()};!r&&this.audioDisabled_||(e++,this.sourceUpdater_.removeAudio(t,i,n)),!r&&"main"!==this.loaderType_||(this.gopBuffer_=((t,i,e,s)=>{var r=Math.ceil((i-s)*ml),n=Math.ceil((e-s)*ml),i=t.slice();let a=t.length;for(;a--&&!(t[a].pts<=n););if(-1!==a){let e=a+1;for(;e--&&!(t[e].pts<=r););e=Math.max(e,0),i.splice(e,a-e+1)}return i})(this.gopBuffer_,t,i,this.timeMapping_),e++,this.sourceUpdater_.removeVideo(t,i,n));for(const a in this.inbandTextTracks_)_h(t,i,this.inbandTextTracks_[a]);_h(t,i,this.segmentMetadataTrack_),n()}else this.logger_("skipping remove because no source updater or starting media info")}monitorBuffer_(){this.checkBufferTimeout_&&window.clearTimeout(this.checkBufferTimeout_),this.checkBufferTimeout_=window.setTimeout(this.monitorBufferTick_.bind(this),1)}monitorBufferTick_(){"READY"===this.state&&this.fillBuffer_(),this.checkBufferTimeout_&&window.clearTimeout(this.checkBufferTimeout_),this.checkBufferTimeout_=window.setTimeout(this.monitorBufferTick_.bind(this),500)}fillBuffer_(){var e;this.sourceUpdater_.updating()||(e=this.chooseNextRequest_())&&("number"==typeof e.timestampOffset&&(this.isPendingTimestampOffset_=!1,this.timelineChangeController_.pendingTimelineChange({type:this.loaderType_,from:this.currentTimeline_,to:e.timeline})),this.loadSegment_(e))}isEndOfStream_(e=this.mediaIndex,t=this.playlist_,i=this.partIndex){var s;return!(!t||!this.mediaSource_)&&(s="number"==typeof e&&t.segments[e],e=e+1===t.segments.length,i=!s||!s.parts||i+1===s.parts.length,t.endList)&&"open"===this.mediaSource_.readyState&&e&&i}chooseNextRequest_(){var e=this.buffered_(),s=Tl(e)||0,e=Sl(e,this.currentTime_()),r=!this.hasPlayed_()&&1<=e,n=e>=this.goalBufferLength_(),t=this.playlist_.segments;if(!t.length||r||n)return null;this.syncPoint_=this.syncPoint_||this.syncController_.getSyncPoint(this.playlist_,this.duration_(),this.currentTimeline_,this.currentTime_(),this.loaderType_);r={partIndex:null,mediaIndex:null,startOfSegment:null,playlist:this.playlist_,isSyncRequest:Boolean(!this.syncPoint_)};if(r.isSyncRequest)r.mediaIndex=function(t,i,s){i=i||[];var r=[];let n=0;for(let e=0;e<i.length;e++){var a=i[e];if(t===a.timeline&&(r.push(e),(n+=a.duration)>s))return e}return 0===r.length?0:r[r.length-1]}(this.currentTimeline_,t,s),this.logger_("choose next request. Can not find sync point. Fallback to media Index: "+r.mediaIndex);else if(null!==this.mediaIndex){var n=t[this.mediaIndex],a="number"==typeof this.partIndex?this.partIndex:-1;r.startOfSegment=n.end||s,n.parts&&n.parts[a+1]?(r.mediaIndex=this.mediaIndex,r.partIndex=a+1):r.mediaIndex=this.mediaIndex+1}else{let e,t,i;n=this.fetchAtBuffer_?s:this.currentTime_();if(this.mediaSequenceSync_&&this.logger_(`chooseNextRequest_ request after Quality Switch:
+For TargetTime: ${n}.
+CurrentTime: ${this.currentTime_()}
+BufferedEnd: ${s}
+Fetch At Buffer: ${this.fetchAtBuffer_}
+`,this.mediaSequenceSync_.diagnostics),this.mediaSequenceSync_&&this.mediaSequenceSync_.isReliable){a=this.getSyncInfoFromMediaSequenceSync_(n);if(!a)return this.logger_("chooseNextRequest_ - no sync info found using media sequence sync"),null;this.logger_(`chooseNextRequest_ mediaSequence syncInfo (${a.start} --> ${a.end})`),e=a.segmentIndex,t=a.partIndex,i=a.start}else{this.logger_("chooseNextRequest_ - fallback to a regular segment selection algorithm, based on a syncPoint.");s=Gl.getMediaInfoForTime({exactManifestTimings:this.exactManifestTimings,playlist:this.playlist_,currentTime:n,startingPartIndex:this.syncPoint_.partIndex,startingSegmentIndex:this.syncPoint_.segmentIndex,startTime:this.syncPoint_.time});e=s.segmentIndex,t=s.partIndex,i=s.startTime}r.getMediaInfoForTime=this.fetchAtBuffer_?"bufferedEnd "+n:"currentTime "+n,r.mediaIndex=e,r.startOfSegment=i,r.partIndex=t,this.logger_(`choose next request. Playlist switched and we have a sync point. Media Index: ${r.mediaIndex} `)}a=t[r.mediaIndex];let i=a&&"number"==typeof r.partIndex&&a.parts&&a.parts[r.partIndex];if(!a||"number"==typeof r.partIndex&&!i)return null;"number"!=typeof r.partIndex&&a.parts&&(r.partIndex=0,i=a.parts[0]);s=this.vhs_.playlists&&this.vhs_.playlists.main&&this.vhs_.playlists.main.independentSegments||this.playlist_.independentSegments,e||!i||s||i.independent||(0===r.partIndex?(e=(n=t[r.mediaIndex-1]).parts&&n.parts.length&&n.parts[n.parts.length-1])&&e.independent&&(--r.mediaIndex,r.partIndex=n.parts.length-1,r.independent="previous segment"):a.parts[r.partIndex-1].independent&&(--r.partIndex,r.independent="previous part")),s=this.mediaSource_&&"ended"===this.mediaSource_.readyState;return r.mediaIndex>=t.length-1&&s&&!this.seeking_()?null:(this.shouldForceTimestampOffsetAfterResync_&&(this.shouldForceTimestampOffsetAfterResync_=!1,r.forceTimestampOffset=!0,this.logger_("choose next request. Force timestamp offset after loader resync")),this.generateSegmentInfo_(r))}getSyncInfoFromMediaSequenceSync_(e){var t;return this.mediaSequenceSync_&&(e!==(t=Math.max(e,this.mediaSequenceSync_.start))&&this.logger_(`getSyncInfoFromMediaSequenceSync_. Pulled target time from ${e} to `+t),e=this.mediaSequenceSync_.getSyncInfoForTime(t))?e.isAppended?(t=this.mediaSequenceSync_.getSyncInfoForTime(e.end))?(t.isAppended&&this.logger_("getSyncInfoFromMediaSequenceSync_: We encounter unexpected scenario where next media sequence sync info is also appended!"),t):null:e:null}generateSegmentInfo_(e){var{independent:e,playlist:t,mediaIndex:i,startOfSegment:s,isSyncRequest:r,partIndex:n,forceTimestampOffset:a,getMediaInfoForTime:o}=e,l=t.segments[i],d="number"==typeof n&&l.parts[n],i={requestId:"segment-loader-"+Math.random(),uri:d&&d.resolvedUri||l.resolvedUri,mediaIndex:i,partIndex:d?n:null,isSyncRequest:r,startOfSegment:s,playlist:t,bytes:null,encryptedBytes:null,timestampOffset:null,timeline:l.timeline,duration:d&&d.duration||l.duration,segment:l,part:d,byteLength:0,transmuxer:this.transmuxer_,getMediaInfoForTime:o,independent:e},n="undefined"!=typeof a?a:this.isPendingTimestampOffset_,r=(i.timestampOffset=this.timestampOffsetForSegment_({segmentTimeline:l.timeline,currentTimeline:this.currentTimeline_,startOfSegment:s,buffered:this.buffered_(),overrideCheck:n}),Tl(this.sourceUpdater_.audioBuffered()));return"number"==typeof r&&(i.audioAppendStart=r-this.sourceUpdater_.audioTimestampOffset()),this.sourceUpdater_.videoBuffered().length&&(i.gopsToAlignWith=((e,t,i)=>{if("undefined"==typeof t||null===t||!e.length)return[];var s=Math.ceil((t-i+3)*ml);let r;for(r=0;r<e.length&&!(e[r].pts>s);r++);return e.slice(r)})(this.gopBuffer_,this.currentTime_()-this.sourceUpdater_.videoTimestampOffset(),this.timeMapping_)),i}timestampOffsetForSegment_(e){return{segmentTimeline:e,currentTimeline:t,startOfSegment:i,buffered:s,overrideCheck:r}=[e][0],r||e!==t?!(e<t)&&s.length?s.end(s.length-1):i:null;var t,i,s,r}earlyAbortWhenNeeded_(t){if(!this.vhs_.tech_.paused()&&this.xhrOptions_.timeout&&this.playlist_.attributes.BANDWIDTH&&!(Date.now()-(t.firstBytesReceivedAt||Date.now())<1e3)){var e=this.currentTime_(),i=t.bandwidth,s=this.pendingSegment_.duration,t=Gl.estimateSegmentRequestTime(s,i,this.playlist_,t.bytesReceived),r=([r,n,a=1]=[this.buffered_(),e,this.vhs_.tech_.playbackRate()],((r.length?r.end(r.length-1):0)-n)/a-1);if(!(t<=r)){var n=function(e){const{main:t,currentTime:i,bandwidth:s,duration:r,segmentDuration:n,timeUntilRebuffer:a,currentTimeline:o,syncController:l}=e;e=t.playlists.filter(e=>!Gl.isIncompatible(e));let d=e.filter(Gl.isEnabled);var e=(d=d.length?d:e.filter(e=>!Gl.isDisabled(e))).filter(Gl.hasAttribute.bind(null,"BANDWIDTH")).map(e=>{var t=l.getSyncPoint(e,r,o,i)?1:2;return{playlist:e,rebufferingImpact:Gl.estimateSegmentRequestTime(n,s,e)*t-a}}),h=e.filter(e=>e.rebufferingImpact<=0);return mh(h,(e,t)=>Yd(t.playlist,e.playlist)),h.length?h[0]:(mh(e,(e,t)=>e.rebufferingImpact-t.rebufferingImpact),e[0]||null)}({main:this.vhs_.playlists.main,currentTime:e,bandwidth:i,duration:this.duration_(),segmentDuration:s,timeUntilRebuffer:r,currentTimeline:this.currentTimeline_,syncController:this.syncController_});if(n){var a=t-r-n.rebufferingImpact;let e=.5;r<=Cl&&(e=1),!n.playlist||n.playlist.uri===this.playlist_.uri||a<e||(this.bandwidth=n.playlist.attributes.BANDWIDTH*O.BANDWIDTH_VARIANCE+1,this.trigger("earlyabort"))}}}}handleAbort_(e){this.logger_("Aborting "+Eh(e)),this.mediaRequestsAborted+=1}handleProgress_(e,t){this.earlyAbortWhenNeeded_(t.stats),this.checkForAbort_(t.requestId)||this.trigger("progress")}handleTrackInfo_(e,t){this.earlyAbortWhenNeeded_(e.stats),this.checkForAbort_(e.requestId)||this.checkForIllegalMediaSwitch(t)||(function(t,i){if(!t&&!i||!t&&i||t&&!i)return!1;if(t!==i){var s=Object.keys(t).sort(),r=Object.keys(i).sort();if(s.length!==r.length)return!1;for(let e=0;e<s.length;e++){var n=s[e];if(n!==r[e])return!1;if(t[n]!==i[n])return!1}}return!0}(this.currentMediaInfo_,t=t||{})||(this.appendInitSegment_={audio:!0,video:!0},this.startingMediaInfo_=t,this.currentMediaInfo_=t,this.logger_("trackinfo update",t),this.trigger("trackinfo")),this.checkForAbort_(e.requestId))||(this.pendingSegment_.trackInfo=t,this.hasEnoughInfoToAppend_()&&this.processCallQueue_())}handleTimingInfo_(e,t,i,s){var r;this.earlyAbortWhenNeeded_(e.stats),this.checkForAbort_(e.requestId)||((e=this.pendingSegment_)[r=Ch(t)]=e[r]||{},e[r][i]=s,this.logger_(`timinginfo: ${t} - ${i} - `+s),this.hasEnoughInfoToAppend_()&&this.processCallQueue_())}handleCaptions_(e,t){if(this.earlyAbortWhenNeeded_(e.stats),!this.checkForAbort_(e.requestId))if(0===t.length)this.logger_("SegmentLoader received no captions from a caption event");else if(this.pendingSegment_.hasAppendedData_){const c=null===this.sourceUpdater_.videoTimestampOffset()?this.sourceUpdater_.audioTimestampOffset():this.sourceUpdater_.videoTimestampOffset(),p={};t.forEach(e=>{p[e.stream]=p[e.stream]||{startTime:1/0,captions:[],endTime:0};var t=p[e.stream];t.startTime=Math.min(t.startTime,e.startTime+c),t.endTime=Math.max(t.endTime,e.endTime+c),t.captions.push(e)}),Object.keys(p).forEach(e=>{var{startTime:t,endTime:i,captions:s}=p[e],r=this.inbandTextTracks_,n=(this.logger_(`adding cues from ${t} -> ${i} for `+e),r),a=this.vhs_.tech_,o=e;if(!n[o]){a.trigger({type:"usage",name:"vhs-608"});let s=o;/^cc708_/.test(o)&&(s="SERVICE"+o.split("_")[1]);var l=a.textTracks().getTrackById(s);if(l)n[o]=l;else{let e=o,t=o,i=!1;l=(a.options_.vhs&&a.options_.vhs.captionServices||{})[s];l&&(e=l.label,t=l.language,i=l.default),n[o]=a.addRemoteTextTrack({kind:"captions",id:s,default:i,label:e,language:t},!1).track}}_h(t,i,r[e]);var{inbandTextTracks:d,captionArray:l,timestampOffset:h}={captionArray:s,inbandTextTracks:r,timestampOffset:c};if(l){const u=window.WebKitDataCue||window.VTTCue;l.forEach(i=>{const s=i.stream;i.content?i.content.forEach(e=>{var t=new u(i.startTime+h,i.endTime+h,e.text);t.line=e.line,t.align="left",t.position=e.position,t.positionAlign="line-left",d[s].addCue(t)}):d[s].addCue(new u(i.startTime+h,i.endTime+h,i.text))})}}),this.transmuxer_&&this.transmuxer_.postMessage({action:"clearParsedMp4Captions"})}else this.metadataQueue_.caption.push(this.handleCaptions_.bind(this,e,t))}handleId3_(e,t,i){this.earlyAbortWhenNeeded_(e.stats),this.checkForAbort_(e.requestId)||(this.pendingSegment_.hasAppendedData_?this.addMetadataToTextTrack(i,t,this.duration_()):this.metadataQueue_.id3.push(this.handleId3_.bind(this,e,t,i)))}processMetadataQueue_(){this.metadataQueue_.id3.forEach(e=>e()),this.metadataQueue_.caption.forEach(e=>e()),this.metadataQueue_.id3=[],this.metadataQueue_.caption=[]}processCallQueue_(){var e=this.callQueue_;this.callQueue_=[],e.forEach(e=>e())}processLoadQueue_(){var e=this.loadQueue_;this.loadQueue_=[],e.forEach(e=>e())}hasEnoughInfoToLoad_(){var e;return"audio"!==this.loaderType_||!(!(e=this.pendingSegment_)||this.getCurrentMediaInfo_()&&kh({timelineChangeController:this.timelineChangeController_,currentTimeline:this.currentTimeline_,segmentTimeline:e.timeline,loaderType:this.loaderType_,audioDisabled:this.audioDisabled_}))}getCurrentMediaInfo_(e=this.pendingSegment_){return e&&e.trackInfo||this.currentMediaInfo_}getMediaInfo_(e=this.pendingSegment_){return this.getCurrentMediaInfo_(e)||this.startingMediaInfo_}getPendingSegmentPlaylist(){return this.pendingSegment_?this.pendingSegment_.playlist:null}hasEnoughInfoToAppend_(){var e,t,i,s;return!!this.sourceUpdater_.ready()&&!(this.waitingOnRemove_||this.quotaExceededErrorRetryTimeout_||(e=this.pendingSegment_,t=this.getCurrentMediaInfo_(),!e)||!t||({hasAudio:t,hasVideo:i,isMuxed:s}=t,i&&!e.videoTimingInfo)||t&&!this.audioDisabled_&&!s&&!e.audioTimingInfo||kh({timelineChangeController:this.timelineChangeController_,currentTimeline:this.currentTimeline_,segmentTimeline:e.timeline,loaderType:this.loaderType_,audioDisabled:this.audioDisabled_}))}handleData_(t,e){if(this.earlyAbortWhenNeeded_(t.stats),!this.checkForAbort_(t.requestId))if(this.callQueue_.length||!this.hasEnoughInfoToAppend_())this.callQueue_.push(this.handleData_.bind(this,t,e));else{var i=this.pendingSegment_;if(this.setTimeMapping_(i.timeline),this.updateMediaSecondsLoaded_(i.part||i.segment),"closed"!==this.mediaSource_.readyState){if(t.map&&(t.map=this.initSegmentForMap(t.map,!0),i.segment.map=t.map),t.key&&this.segmentKey(t.key,!0),i.isFmp4=t.isFmp4,i.timingInfo=i.timingInfo||{},i.isFmp4)this.trigger("fmp4"),i.timingInfo.start=i[Ch(e.type)].start;else{t=this.getCurrentMediaInfo_(),t="main"===this.loaderType_&&t&&t.hasVideo;let e;t&&(e=i.videoTimingInfo.start),i.timingInfo.start=this.trueSegmentStart_({currentStart:i.timingInfo.start,playlist:i.playlist,mediaIndex:i.mediaIndex,currentVideoTimestampOffset:this.sourceUpdater_.videoTimestampOffset(),useVideoTimingInfo:t,firstVideoFrameTimeForData:e,videoTimingInfo:i.videoTimingInfo,audioTimingInfo:i.audioTimingInfo})}if(this.updateAppendInitSegmentStatus(i,e.type),this.updateSourceBufferTimestampOffset_(i),i.isSyncRequest){this.updateTimingInfoEnd_(i),this.syncController_.saveSegmentTimingInfo({segmentInfo:i,shouldSaveTimelineMapping:"main"===this.loaderType_});t=this.chooseNextRequest_();if(t.mediaIndex!==i.mediaIndex||t.partIndex!==i.partIndex)return void this.logger_("sync segment was incorrect, not appending");this.logger_("sync segment was correct, appending")}i.hasAppendedData_=!0,this.processMetadataQueue_(),this.appendData_(i,e)}}}updateAppendInitSegmentStatus(e,t){"main"!==this.loaderType_||"number"!=typeof e.timestampOffset||e.changedTimestampOffset||(this.appendInitSegment_={audio:!0,video:!0}),this.playlistOfLastInitSegment_[t]!==e.playlist&&(this.appendInitSegment_[t]=!0)}getInitSegmentAndUpdateState_({type:e,initSegment:t,map:i,playlist:s}){if(i){var r=md(i);if(this.activeInitSegmentId_===r)return null;t=this.initSegmentForMap(i,!0).bytes,this.activeInitSegmentId_=r}return t&&this.appendInitSegment_[e]?(this.playlistOfLastInitSegment_[e]=s,this.appendInitSegment_[e]=!1,this.activeInitSegmentId_=null,t):null}handleQuotaExceededError_({segmentInfo:e,type:t,bytes:i},s){var r=this.sourceUpdater_.audioBuffered(),n=this.sourceUpdater_.videoBuffered(),a=(1<r.length&&this.logger_("On QUOTA_EXCEEDED_ERR, found gaps in the audio buffer: "+Al(r).join(", ")),1<n.length&&this.logger_("On QUOTA_EXCEEDED_ERR, found gaps in the video buffer: "+Al(n).join(", ")),r.length?r.start(0):0),o=r.length?r.end(r.length-1):0,l=n.length?n.start(0):0,d=n.length?n.end(n.length-1):0;o-a<=1&&d-l<=1?(this.logger_("On QUOTA_EXCEEDED_ERR, single segment too large to append to buffer, triggering an error. "+`Appended byte length: ${i.byteLength}, `+`audio buffer: ${Al(r).join(", ")}, `+`video buffer: ${Al(n).join(", ")}, `),this.error({message:"Quota exceeded error with append of a single segment of content",excludeUntil:1/0,metadata:{errorType:b.Error.SegmentExceedsSourceBufferQuota}}),this.trigger("error")):(this.waitingOnRemove_=!0,this.callQueue_.push(this.appendToSourceBuffer_.bind(this,{segmentInfo:e,type:t,bytes:i})),o=this.currentTime_()-1,this.logger_("On QUOTA_EXCEEDED_ERR, removing audio/video from 0 to "+o),this.remove(0,o,()=>{this.logger_("On QUOTA_EXCEEDED_ERR, retrying append in 1s"),this.waitingOnRemove_=!1,this.quotaExceededErrorRetryTimeout_=window.setTimeout(()=>{this.logger_("On QUOTA_EXCEEDED_ERR, re-processing call queue"),this.quotaExceededErrorRetryTimeout_=null,this.processCallQueue_()},1e3)},!0))}handleAppendError_({segmentInfo:e,type:t,bytes:i},s){s&&(22===s.code?this.handleQuotaExceededError_({segmentInfo:e,type:t,bytes:i}):(this.logger_("Received non QUOTA_EXCEEDED_ERR on append",s),this.error({message:`${t} append of ${i.length}b failed for segment `+`#${e.mediaIndex} in playlist `+e.playlist.id,metadata:{errorType:b.Error.SegmentAppendError}}),this.trigger("appenderror")))}appendToSourceBuffer_({segmentInfo:e,type:t,initSegment:i,data:s,bytes:r}){if(!r){var n=[s];let e=s.byteLength;i&&(n.unshift(i),e+=i.byteLength),r=(e=>{let t=0,i;return e.bytes&&(i=new Uint8Array(e.bytes),e.segments.forEach(e=>{i.set(e,t),t+=e.byteLength})),i})({bytes:e,segments:n})}this.sourceUpdater_.appendBuffer({segmentInfo:e,type:t,bytes:r},this.handleAppendError_.bind(this,{segmentInfo:e,type:t,bytes:r}))}handleSegmentTimingInfo_(e,t,i){this.pendingSegment_&&t===this.pendingSegment_.requestId&&((t=this.pendingSegment_.segment)[e=e+"TimingInfo"]||(t[e]={}),t[e].transmuxerPrependedSeconds=i.prependedContentDuration||0,t[e].transmuxedPresentationStart=i.start.presentation,t[e].transmuxedDecodeStart=i.start.decode,t[e].transmuxedPresentationEnd=i.end.presentation,t[e].transmuxedDecodeEnd=i.end.decode,t[e].baseMediaDecodeTime=i.baseMediaDecodeTime)}appendData_(e,t){var{type:i,data:s}=t;s&&s.byteLength&&("audio"===i&&this.audioDisabled_||(t=this.getInitSegmentAndUpdateState_({type:i,initSegment:t.initSegment,playlist:e.playlist,map:e.isFmp4?e.segment.map:null}),this.appendToSourceBuffer_({segmentInfo:e,type:i,initSegment:t,data:s})))}loadSegment_(t){this.state="WAITING",this.pendingSegment_=t,this.trimBackBuffer_(t),"number"==typeof t.timestampOffset&&this.transmuxer_&&this.transmuxer_.postMessage({action:"clearAllMp4Captions"}),this.hasEnoughInfoToLoad_()?this.updateTransmuxerAndRequestSegment_(t):this.loadQueue_.push(()=>{var e=bi({},t,{forceTimestampOffset:!0});bi(t,this.generateSegmentInfo_(e)),this.isPendingTimestampOffset_=!1,this.updateTransmuxerAndRequestSegment_(t)})}updateTransmuxerAndRequestSegment_(s){this.shouldUpdateTransmuxerTimestampOffset_(s.timestampOffset)&&(this.gopBuffer_.length=0,s.gopsToAlignWith=[],this.timeMapping_=0,this.transmuxer_.postMessage({action:"reset"}),this.transmuxer_.postMessage({action:"setTimestampOffset",timestampOffset:s.timestampOffset}));var e=this.createSimplifiedSegmentObj_(s),t=this.isEndOfStream_(s.mediaIndex,s.playlist,s.partIndex),i=null!==this.mediaIndex,r=s.timeline!==this.currentTimeline_&&0<s.timeline,t=t||i&&r;this.logger_(`Requesting
+${yh(s.uri)}
+`+Eh(s)),e.map&&!e.map.bytes&&(this.logger_("going to request init segment."),this.appendInitSegment_={video:!0,audio:!0}),s.abortRequests=lh({xhr:this.vhs_.xhr,xhrOptions:this.xhrOptions_,decryptionWorker:this.decrypter_,segment:e,abortFn:this.handleAbort_.bind(this,s),progressFn:this.handleProgress_.bind(this),trackInfoFn:this.handleTrackInfo_.bind(this),timingInfoFn:this.handleTimingInfo_.bind(this),videoSegmentTimingInfoFn:this.handleSegmentTimingInfo_.bind(this,"video",s.requestId),audioSegmentTimingInfoFn:this.handleSegmentTimingInfo_.bind(this,"audio",s.requestId),captionsFn:this.handleCaptions_.bind(this),isEndOfTimeline:t,endedTimelineFn:()=>{this.logger_("received endedtimeline callback")},id3Fn:this.handleId3_.bind(this),dataFn:this.handleData_.bind(this),doneFn:this.segmentRequestFinished_.bind(this),onTransmuxerLog:({message:e,level:t,stream:i})=>{this.logger_(Eh(s)+` logged from transmuxer stream ${i} as a ${t}: `+e)}})}trimBackBuffer_(e){var t=((e,t,i)=>{let s=t-O.BACK_BUFFER_LENGTH;return e.length&&(s=Math.max(s,e.start(0))),Math.min(t-i,s)})(this.seekable_(),this.currentTime_(),this.playlist_.targetDuration||10);0<t&&this.remove(0,t)}createSimplifiedSegmentObj_(e){var t=e.segment,i=e.part,i={resolvedUri:(i||t).resolvedUri,byterange:(i||t).byterange,requestId:e.requestId,transmuxer:e.transmuxer,audioAppendStart:e.audioAppendStart,gopsToAlignWith:e.gopsToAlignWith,part:e.part},s=e.playlist.segments[e.mediaIndex-1];return s&&s.timeline===t.timeline&&(s.videoTimingInfo?i.baseStartTime=s.videoTimingInfo.transmuxedDecodeEnd:s.audioTimingInfo&&(i.baseStartTime=s.audioTimingInfo.transmuxedDecodeEnd)),t.key&&(s=t.key.iv||new Uint32Array([0,0,0,e.mediaIndex+e.playlist.mediaSequence]),i.key=this.segmentKey(t.key),i.key.iv=s),t.map&&(i.map=this.initSegmentForMap(t.map)),i}saveTransferStats_(e){this.mediaRequests+=1,e&&(this.mediaBytesTransferred+=e.bytesReceived,this.mediaTransferDuration+=e.roundTripTime)}saveBandwidthRelatedStats_(e,t){this.pendingSegment_.byteLength=t.bytesReceived,e<1/60?this.logger_("Ignoring segment's bandwidth because its duration of "+e+" is less than the min to record "+1/60):(this.bandwidth=t.bandwidth,this.roundTrip=t.roundTripTime)}handleTimeout_(){this.mediaRequestsTimedout+=1,this.bandwidth=1,this.roundTrip=NaN,this.trigger("bandwidthupdate"),this.trigger("timeout")}segmentRequestFinished_(e,t,i){if(this.callQueue_.length)this.callQueue_.push(this.segmentRequestFinished_.bind(this,e,t,i));else if(this.saveTransferStats_(t.stats),this.pendingSegment_&&t.requestId===this.pendingSegment_.requestId){if(e)return this.pendingSegment_=null,this.state="READY",e.code===Qd.ABORTED?void 0:(this.pause(),e.code===Qd.TIMEOUT?void this.handleTimeout_():(this.mediaRequestsErrored+=1,this.error(e),void this.trigger("error")));e=this.pendingSegment_;this.saveBandwidthRelatedStats_(e.duration,t.stats),e.endOfAllRequests=t.endOfAllRequests,i.gopInfo&&(this.gopBuffer_=((e,t,i)=>{if(!t.length)return e;if(i)return t.slice();var s=t[0].pts;let r=0;for(r;r<e.length&&!(e[r].pts>=s);r++);return e.slice(0,r).concat(t)})(this.gopBuffer_,i.gopInfo,this.safeAppend_)),this.state="APPENDING",this.trigger("appending"),this.waitForAppendsToComplete_(e)}}setTimeMapping_(e){e=this.syncController_.mappingForTimeline(e);null!==e&&(this.timeMapping_=e)}updateMediaSecondsLoaded_(e){"number"==typeof e.start&&"number"==typeof e.end?this.mediaSecondsLoaded+=e.end-e.start:this.mediaSecondsLoaded+=e.duration}shouldUpdateTransmuxerTimestampOffset_(e){return null!==e&&("main"===this.loaderType_&&e!==this.sourceUpdater_.videoTimestampOffset()||!this.audioDisabled_&&e!==this.sourceUpdater_.audioTimestampOffset())}trueSegmentStart_({currentStart:e,playlist:t,mediaIndex:i,firstVideoFrameTimeForData:s,currentVideoTimestampOffset:r,useVideoTimingInfo:n,videoTimingInfo:a,audioTimingInfo:o}){return"undefined"!=typeof e?e:n?(e=t.segments[i-1],0!==i&&e&&"undefined"!=typeof e.start&&e.end===s+r?a.start:s):o.start}waitForAppendsToComplete_(e){var t,i,s=this.getCurrentMediaInfo_(e);s?({hasAudio:s,hasVideo:i,isMuxed:t}=s,i="main"===this.loaderType_&&i,s=!this.audioDisabled_&&s&&!t,e.waitingOnAppends=0,e.hasAppendedData_?(i&&e.waitingOnAppends++,s&&e.waitingOnAppends++,i&&this.sourceUpdater_.videoQueueCallback(this.checkAppendsDone_.bind(this,e)),s&&this.sourceUpdater_.audioQueueCallback(this.checkAppendsDone_.bind(this,e))):(e.timingInfo||"number"!=typeof e.timestampOffset||(this.isPendingTimestampOffset_=!0),e.timingInfo={start:0},e.waitingOnAppends++,this.isPendingTimestampOffset_||(this.updateSourceBufferTimestampOffset_(e),this.processMetadataQueue_()),this.checkAppendsDone_(e))):(this.error({message:"No starting media returned, likely due to an unsupported media format.",playlistExclusionDuration:1/0,metadata:{errorType:b.Error.SegmentUnsupportedMediaFormat}}),this.trigger("error"))}checkAppendsDone_(e){this.checkForAbort_(e.requestId)||(e.waitingOnAppends--,0===e.waitingOnAppends&&this.handleAppendsDone_())}checkForIllegalMediaSwitch(e){i=this.loaderType_,t=this.getCurrentMediaInfo_(),e=e;var t,i="main"===i&&t&&e?e.hasAudio||e.hasVideo?t.hasVideo&&!e.hasVideo?"Only audio found in segment when we expected video. We can't switch to audio only from a stream that had video. To get rid of this message, please add codec information to the manifest.":!t.hasVideo&&e.hasVideo?"Video found in segment when we expected only audio. We can't switch to a stream with video from an audio only stream. To get rid of this message, please add codec information to the manifest.":null:"Neither audio nor video found in segment.":null;return!!i&&(this.error({message:i,playlistExclusionDuration:1/0,metadata:{errorType:b.Error.SegmentSwitchError}}),this.trigger("error"),!0)}updateSourceBufferTimestampOffset_(t){if(null!==t.timestampOffset&&"number"==typeof t.timingInfo.start&&!t.changedTimestampOffset&&"main"===this.loaderType_){let e=!1;t.timestampOffset-=this.getSegmentStartTimeForTimestampOffsetCalculation_({videoTimingInfo:t.segment.videoTimingInfo,audioTimingInfo:t.segment.audioTimingInfo,timingInfo:t.timingInfo}),t.changedTimestampOffset=!0,t.timestampOffset!==this.sourceUpdater_.videoTimestampOffset()&&(this.sourceUpdater_.videoTimestampOffset(t.timestampOffset),e=!0),t.timestampOffset!==this.sourceUpdater_.audioTimestampOffset()&&(this.sourceUpdater_.audioTimestampOffset(t.timestampOffset),e=!0),e&&this.trigger("timestampoffset")}}getSegmentStartTimeForTimestampOffsetCalculation_({videoTimingInfo:e,audioTimingInfo:t,timingInfo:i}){return this.useDtsForTimestampOffset_?e&&"number"==typeof e.transmuxedDecodeStart?e.transmuxedDecodeStart:t&&"number"==typeof t.transmuxedDecodeStart?t.transmuxedDecodeStart:i.start:i.start}updateTimingInfoEnd_(e){e.timingInfo=e.timingInfo||{};var t=this.getMediaInfo_(),t="main"===this.loaderType_&&t&&t.hasVideo&&e.videoTimingInfo?e.videoTimingInfo:e.audioTimingInfo;t&&(e.timingInfo.end="number"==typeof t.end?t.end:t.start+e.duration)}handleAppendsDone_(){var e,t,i;this.pendingSegment_&&this.trigger("appendsdone"),this.pendingSegment_?((e=this.pendingSegment_).part&&e.part.syncInfo?e.part.syncInfo.markAppended():e.segment.syncInfo&&e.segment.syncInfo.markAppended(),this.updateTimingInfoEnd_(e),this.shouldSaveSegmentTimingInfo_&&this.syncController_.saveSegmentTimingInfo({segmentInfo:e,shouldSaveTimelineMapping:"main"===this.loaderType_}),(t=xh(e,this.sourceType_))&&("warn"===t.severity?b.log.warn(t.message):this.logger_(t.message)),this.recordThroughput_(e),this.pendingSegment_=null,this.state="READY",e.isSyncRequest&&(this.trigger("syncinfoupdate"),!e.hasAppendedData_)?this.logger_("Throwing away un-appended sync request "+Eh(e)):(this.logger_("Appended "+Eh(e)),this.addSegmentMetadataCue_(e),this.fetchAtBuffer_=!0,this.currentTimeline_!==e.timeline&&(this.timelineChangeController_.lastTimelineChange({type:this.loaderType_,from:this.currentTimeline_,to:e.timeline}),"main"!==this.loaderType_||this.audioDisabled_||this.timelineChangeController_.lastTimelineChange({type:"audio",from:this.currentTimeline_,to:e.timeline})),this.currentTimeline_=e.timeline,this.trigger("syncinfoupdate"),t=e.segment,i=e.part,t=t.end&&this.currentTime_()-t.end>3*e.playlist.targetDuration,i=i&&i.end&&this.currentTime_()-i.end>3*e.playlist.partTargetDuration,t||i?(this.logger_(`bad ${t?"segment":"part"} `+Eh(e)),this.resetEverything()):(null!==this.mediaIndex&&this.trigger("bandwidthupdate"),this.trigger("progress"),this.mediaIndex=e.mediaIndex,this.partIndex=e.partIndex,this.isEndOfStream_(e.mediaIndex,e.playlist,e.partIndex)&&this.endOfStream(),this.trigger("appended"),e.hasAppendedData_&&this.mediaAppends++,this.paused()||this.monitorBuffer_()))):(this.state="READY",this.paused()||this.monitorBuffer_())}recordThroughput_(e){var t,i;e.duration<1/60?this.logger_("Ignoring segment's throughput because its duration of "+e.duration+" is less than the min to record "+1/60):(t=this.throughput.rate,i=Date.now()-e.endOfAllRequests+1,e=Math.floor(e.byteLength/i*8*1e3),this.throughput.rate+=(e-t)/++this.throughput.count)}addSegmentMetadataCue_(e){var t,i,s,r;this.segmentMetadataTrack_&&(t=(r=e.segment).start,i=r.end,wh(t))&&wh(i)&&(_h(t,i,this.segmentMetadataTrack_),s=window.WebKitDataCue||window.VTTCue,r={custom:r.custom,dateTimeObject:r.dateTimeObject,dateTimeString:r.dateTimeString,programDateTime:r.programDateTime,bandwidth:e.playlist.attributes.BANDWIDTH,resolution:e.playlist.attributes.RESOLUTION,codecs:e.playlist.attributes.CODECS,byteLength:e.byteLength,uri:e.uri,timeline:e.timeline,playlist:e.playlist.id,start:t,end:i},(e=new s(t,i,JSON.stringify(r))).value=r,this.segmentMetadataTrack_.addCue(e))}}function Dh(){}function Ph(e){return"string"!=typeof e?e:e.replace(/./,e=>e.toUpperCase())}const Lh=["video","audio"],Oh=(e,t)=>{var i=t[e+"Buffer"];return i&&i.updating||t.queuePending[e]},Rh=(i,s)=>{if(0!==s.queue.length){let e=0,t=s.queue[e];if("mediaSource"===t.type)s.updating()||"closed"===s.mediaSource.readyState||(s.queue.shift(),t.action(s),t.doneFn&&t.doneFn(),Rh("audio",s),Rh("video",s));else if("mediaSource"!==i&&s.ready()&&"closed"!==s.mediaSource.readyState&&!Oh(i,s)){if(t.type!==i){if(null===(e=((t,i)=>{for(let e=0;e<i.length;e++){var s=i[e];if("mediaSource"===s.type)return null;if(s.type===t)return e}return null})(i,s.queue)))return;t=s.queue[e]}s.queue.splice(e,1),(s.queuePending[i]=t).action(i,s),t.doneFn||(s.queuePending[i]=null,Rh(i,s))}}},Nh=(e,t)=>{var i=t[e+"Buffer"],s=Ph(e);i&&(i.removeEventListener("updateend",t[`on${s}UpdateEnd_`]),i.removeEventListener("error",t[`on${s}Error_`]),t.codecs[e]=null,t[e+"Buffer"]=null)},Mh=(e,t)=>e&&t&&-1!==Array.prototype.indexOf.call(e.sourceBuffers,t),Uh={appendBuffer:(s,r,n)=>(t,i)=>{var e=i[t+"Buffer"];if(Mh(i.mediaSource,e)){i.logger_(`Appending segment ${r.mediaIndex}'s ${s.length} bytes to ${t}Buffer`);try{e.appendBuffer(s)}catch(e){i.logger_(`Error with code ${e.code} `+(22===e.code?"(QUOTA_EXCEEDED_ERR) ":"")+`when appending segment ${r.mediaIndex} to ${t}Buffer`),i.queuePending[t]=null,n(e)}}},remove:(s,r)=>(t,i)=>{var e=i[t+"Buffer"];if(Mh(i.mediaSource,e)){i.logger_(`Removing ${s} to ${r} from ${t}Buffer`);try{e.remove(s,r)}catch(e){i.logger_(`Remove ${s} to ${r} from ${t}Buffer failed`)}}},timestampOffset:s=>(e,t)=>{var i=t[e+"Buffer"];Mh(t.mediaSource,i)&&(t.logger_(`Setting ${e}timestampOffset to `+s),i.timestampOffset=s)},callback:i=>(e,t)=>{i()},endOfStream:t=>e=>{if("open"===e.mediaSource.readyState){e.logger_(`Calling mediaSource endOfStream(${t||""})`);try{e.mediaSource.endOfStream(t)}catch(e){b.log.warn("Failed to call media source endOfStream",e)}}},duration:t=>e=>{e.logger_("Setting mediaSource duration to "+t);try{e.mediaSource.duration=t}catch(e){b.log.warn("Failed to set media source duration",e)}},abort:()=>(t,e)=>{if("open"===e.mediaSource.readyState){var i=e[t+"Buffer"];if(Mh(e.mediaSource,i)){e.logger_(`calling abort on ${t}Buffer`);try{i.abort()}catch(e){b.log.warn(`Failed to abort on ${t}Buffer`,e)}}}},addSourceBuffer:(s,r)=>e=>{var t=Ph(s),i=_n(r),i=(e.logger_(`Adding ${s}Buffer with codec ${r} to mediaSource`),e.mediaSource.addSourceBuffer(i));i.addEventListener("updateend",e[`on${t}UpdateEnd_`]),i.addEventListener("error",e[`on${t}Error_`]),e.codecs[s]=r,e[s+"Buffer"]=i},removeSourceBuffer:i=>e=>{var t=e[i+"Buffer"];if(Nh(i,e),Mh(e.mediaSource,t)){e.logger_(`Removing ${i}Buffer with codec ${e.codecs[i]} from mediaSource`);try{e.mediaSource.removeSourceBuffer(t)}catch(e){b.log.warn(`Failed to removeSourceBuffer ${i}Buffer`,e)}}},changeType:a=>(t,e)=>{var i=e[t+"Buffer"],s=_n(a);if(Mh(e.mediaSource,i)){var r=a.substring(0,a.indexOf(".")),n=e.codecs[t],n=n.substring(0,n.indexOf("."));if(n!==r){e.logger_(`changing ${t}Buffer codec from ${e.codecs[t]} to `+a);try{i.changeType(s),e.codecs[t]=a}catch(e){b.log.warn(`Failed to changeType on ${t}Buffer`,e)}}}}},Bh=({type:e,sourceUpdater:t,action:i,doneFn:s,name:r})=>{t.queue.push({type:e,action:i,doneFn:s,name:r}),Rh(e,t)},Fh=(i,s)=>e=>{var t=function(t){if(0===t.length)return"Buffered Ranges are empty";let i="Buffered Ranges: \n";for(let e=0;e<t.length;e++){var s=t.start(e),r=t.end(e);i+=s+` --> ${r}. Duration (${r-s})
+`}return i}(s[i+"Buffered"]());s.logger_(`received "updateend" event for ${i} Source Buffer: `,t),s.queuePending[i]&&(t=s.queuePending[i].doneFn,s.queuePending[i]=null,t)&&t(s[i+"Error_"]),Rh(i,s)};class qh extends b.EventTarget{constructor(e){super(),this.mediaSource=e,this.sourceopenListener_=()=>Rh("mediaSource",this),this.mediaSource.addEventListener("sourceopen",this.sourceopenListener_),this.logger_=yl("SourceUpdater"),this.audioTimestampOffset_=0,this.videoTimestampOffset_=0,this.queue=[],this.queuePending={audio:null,video:null},this.delayedAudioAppendQueue_=[],this.videoAppendQueued_=!1,this.codecs={},this.onVideoUpdateEnd_=Fh("video",this),this.onAudioUpdateEnd_=Fh("audio",this),this.onVideoError_=e=>{this.videoError_=e},this.onAudioError_=e=>{this.audioError_=e},this.createdSourceBuffers_=!1,this.initializedEme_=!1,this.triggeredReady_=!1}initializedEme(){this.initializedEme_=!0,this.triggerReady()}hasCreatedSourceBuffers(){return this.createdSourceBuffers_}hasInitializedAnyEme(){return this.initializedEme_}ready(){return this.hasCreatedSourceBuffers()&&this.hasInitializedAnyEme()}createSourceBuffers(e){this.hasCreatedSourceBuffers()||(this.addOrChangeSourceBuffers(e),this.createdSourceBuffers_=!0,this.trigger("createdsourcebuffers"),this.triggerReady())}triggerReady(){this.ready()&&!this.triggeredReady_&&(this.triggeredReady_=!0,this.trigger("ready"))}addSourceBuffer(e,t){Bh({type:"mediaSource",sourceUpdater:this,action:Uh.addSourceBuffer(e,t),name:"addSourceBuffer"})}abort(e){Bh({type:e,sourceUpdater:this,action:Uh.abort(e),name:"abort"})}removeSourceBuffer(e){this.canRemoveSourceBuffer()?Bh({type:"mediaSource",sourceUpdater:this,action:Uh.removeSourceBuffer(e),name:"removeSourceBuffer"}):b.log.error("removeSourceBuffer is not supported!")}canRemoveSourceBuffer(){return!b.browser.IS_FIREFOX&&window.MediaSource&&window.MediaSource.prototype&&"function"==typeof window.MediaSource.prototype.removeSourceBuffer}static canChangeType(){return window.SourceBuffer&&window.SourceBuffer.prototype&&"function"==typeof window.SourceBuffer.prototype.changeType}canChangeType(){return this.constructor.canChangeType()}changeType(e,t){this.canChangeType()?Bh({type:e,sourceUpdater:this,action:Uh.changeType(t),name:"changeType"}):b.log.error("changeType is not supported!")}addOrChangeSourceBuffers(i){if(!i||"object"!=typeof i||0===Object.keys(i).length)throw new Error("Cannot addOrChangeSourceBuffers to undefined codecs");Object.keys(i).forEach(e=>{var t=i[e];if(!this.hasCreatedSourceBuffers())return this.addSourceBuffer(e,t);this.canChangeType()&&this.changeType(e,t)})}appendBuffer(e,t){var{segmentInfo:i,type:s,bytes:r}=e;this.processedAppend_=!0,"audio"===s&&this.videoBuffer&&!this.videoAppendQueued_?(this.delayedAudioAppendQueue_.push([e,t]),this.logger_(`delayed audio append of ${r.length} until video append`)):(e=t,Bh({type:s,sourceUpdater:this,action:Uh.appendBuffer(r,i||{mediaIndex:-1},e),doneFn:t,name:"appendBuffer"}),"video"===s&&(this.videoAppendQueued_=!0,this.delayedAudioAppendQueue_.length)&&(r=this.delayedAudioAppendQueue_.slice(),this.logger_(`queuing delayed audio ${r.length} appendBuffers`),this.delayedAudioAppendQueue_.length=0,r.forEach(e=>{this.appendBuffer.apply(this,e)})))}audioBuffered(){return Mh(this.mediaSource,this.audioBuffer)&&this.audioBuffer.buffered||_l()}videoBuffered(){return Mh(this.mediaSource,this.videoBuffer)&&this.videoBuffer.buffered||_l()}buffered(){var e=Mh(this.mediaSource,this.videoBuffer)?this.videoBuffer:null,t=Mh(this.mediaSource,this.audioBuffer)?this.audioBuffer:null;if(t&&!e)return this.audioBuffered();if(e&&!t)return this.videoBuffered();{var r=this.audioBuffered();var n=this.videoBuffered();let e=null,t=null,i=0;var a=[],o=[];if(!(r&&r.length&&n&&n.length))return _l();let s=r.length;for(;s--;)a.push({time:r.start(s),type:"start"}),a.push({time:r.end(s),type:"end"});for(s=n.length;s--;)a.push({time:n.start(s),type:"start"}),a.push({time:n.end(s),type:"end"});for(a.sort(function(e,t){return e.time-t.time}),s=0;s<a.length;s++)"start"===a[s].type?2===++i&&(e=a[s].time):"end"===a[s].type&&1===--i&&(t=a[s].time),null!==e&&null!==t&&(o.push([e,t]),e=null,t=null);return _l(o);return}}setDuration(e,t=Dh){Bh({type:"mediaSource",sourceUpdater:this,action:Uh.duration(e),name:"duration",doneFn:t})}endOfStream(e=null,t=Dh){"string"!=typeof e&&(e=void 0),Bh({type:"mediaSource",sourceUpdater:this,action:Uh.endOfStream(e),name:"endOfStream",doneFn:t})}removeAudio(e,t,i=Dh){this.audioBuffered().length&&0!==this.audioBuffered().end(0)?Bh({type:"audio",sourceUpdater:this,action:Uh.remove(e,t),doneFn:i,name:"remove"}):i()}removeVideo(e,t,i=Dh){this.videoBuffered().length&&0!==this.videoBuffered().end(0)?Bh({type:"video",sourceUpdater:this,action:Uh.remove(e,t),doneFn:i,name:"remove"}):i()}updating(){return!(!Oh("audio",this)&&!Oh("video",this))}audioTimestampOffset(e){return"undefined"!=typeof e&&this.audioBuffer&&this.audioTimestampOffset_!==e&&(Bh({type:"audio",sourceUpdater:this,action:Uh.timestampOffset(e),name:"timestampOffset"}),this.audioTimestampOffset_=e),this.audioTimestampOffset_}videoTimestampOffset(e){return"undefined"!=typeof e&&this.videoBuffer&&this.videoTimestampOffset!==e&&(Bh({type:"video",sourceUpdater:this,action:Uh.timestampOffset(e),name:"timestampOffset"}),this.videoTimestampOffset_=e),this.videoTimestampOffset_}audioQueueCallback(e){this.audioBuffer&&Bh({type:"audio",sourceUpdater:this,action:Uh.callback(e),name:"callback"})}videoQueueCallback(e){this.videoBuffer&&Bh({type:"video",sourceUpdater:this,action:Uh.callback(e),name:"callback"})}dispose(){this.trigger("dispose"),Lh.forEach(e=>{this.abort(e),this.canRemoveSourceBuffer()?this.removeSourceBuffer(e):this[e+"QueueCallback"](()=>Nh(e,this))}),this.videoAppendQueued_=!1,this.delayedAudioAppendQueue_.length=0,this.sourceopenListener_&&this.mediaSource.removeEventListener("sourceopen",this.sourceopenListener_),this.off()}}const jh=e=>decodeURIComponent(escape(String.fromCharCode.apply(null,e))),Hh=new Uint8Array("\n\n".split("").map(e=>e.charCodeAt(0)));class Vh extends Error{constructor(){super("Trying to parse received VTT cues, but there is no WebVTT. Make sure vtt.js is loaded.")}}class $h extends Ah{constructor(e,t={}){super(e,t),this.mediaSource_=null,this.subtitlesTrack_=null,this.featuresNativeTextTracks_=e.featuresNativeTextTracks,this.loadVttJs=e.loadVttJs,this.shouldSaveSegmentTimingInfo_=!1}createTransmuxer_(){return null}buffered_(){var e;return this.subtitlesTrack_&&this.subtitlesTrack_.cues&&this.subtitlesTrack_.cues.length?_l([[(e=this.subtitlesTrack_.cues)[0].startTime,e[e.length-1].startTime]]):_l()}initSegmentForMap(e,t=!1){if(!e)return null;var i=md(e);let s=this.initSegments_[i];return t&&!s&&e.bytes&&(t=Hh.byteLength+e.bytes.byteLength,(t=new Uint8Array(t)).set(e.bytes),t.set(Hh,e.bytes.byteLength),this.initSegments_[i]=s={resolvedUri:e.resolvedUri,byterange:e.byterange,bytes:t}),s||e}couldBeginLoading_(){return this.playlist_&&this.subtitlesTrack_&&!this.paused()}init_(){return this.state="READY",this.resetEverything(),this.monitorBuffer_()}track(e){return"undefined"!=typeof e&&(this.subtitlesTrack_=e,"INIT"===this.state&&this.couldBeginLoading_())&&this.init_(),this.subtitlesTrack_}remove(e,t){_h(e,t,this.subtitlesTrack_)}fillBuffer_(){var e=this.chooseNextRequest_();e&&(null===this.syncController_.timestampOffsetForTimeline(e.timeline)?(this.syncController_.one("timestampoffset",()=>{this.state="READY",this.paused()||this.monitorBuffer_()}),this.state="WAITING_ON_TIMELINE"):this.loadSegment_(e))}timestampOffsetForSegment_(){return null}chooseNextRequest_(){return this.skipEmptySegments_(super.chooseNextRequest_())}skipEmptySegments_(e){for(;e&&e.segment.empty;){if(e.mediaIndex+1>=e.playlist.segments.length){e=null;break}e=this.generateSegmentInfo_({playlist:e.playlist,mediaIndex:e.mediaIndex+1,startOfSegment:e.startOfSegment+e.duration,isSyncRequest:e.isSyncRequest})}return e}stopForError(e){this.error(e),this.state="READY",this.pause(),this.trigger("error")}segmentRequestFinished_(e,t,i){if(this.subtitlesTrack_)if(this.saveTransferStats_(t.stats),this.pendingSegment_)if(e)e.code===Qd.TIMEOUT&&this.handleTimeout_(),e.code===Qd.ABORTED?this.mediaRequestsAborted+=1:this.mediaRequestsErrored+=1,this.stopForError(e);else{var s=this.pendingSegment_,r=(this.saveBandwidthRelatedStats_(s.duration,t.stats),t.key&&this.segmentKey(t.key,!0),this.state="APPENDING",this.trigger("appending"),s.segment);if(r.map&&(r.map.bytes=t.map.bytes),s.bytes=t.bytes,"function"!=typeof window.WebVTT&&"function"==typeof this.loadVttJs)this.state="WAITING_ON_VTTJS",this.loadVttJs().then(()=>this.segmentRequestFinished_(e,t,i),()=>this.stopForError({message:"Error loading vtt.js",metadata:{errorType:b.Error.VttLoadError}}));else{r.requested=!0;try{this.parseVTTCues_(s)}catch(e){return void this.stopForError({message:e.message,metadata:{errorType:b.Error.VttCueParsingError}})}if(this.updateTimeMapping_(s,this.syncController_.timelines[s.timeline],this.playlist_),s.cues.length?s.timingInfo={start:s.cues[0].startTime,end:s.cues[s.cues.length-1].endTime}:s.timingInfo={start:s.startOfSegment,end:s.startOfSegment+s.duration},s.isSyncRequest)this.trigger("syncinfoupdate"),this.pendingSegment_=null,this.state="READY";else{s.byteLength=s.bytes.byteLength,this.mediaSecondsLoaded+=r.duration,s.cues.forEach(e=>{this.subtitlesTrack_.addCue(this.featuresNativeTextTracks_?new window.VTTCue(e.startTime,e.endTime,e.text):e)});var n=this.subtitlesTrack_,a=n.cues;if(a){var o={};for(let e=a.length-1;0<=e;e--){var l=a[e],d=`${l.startTime}-${l.endTime}-`+l.text;o[d]?n.removeCue(l):o[d]=l}}this.handleAppendsDone_()}}}else this.state="READY",this.mediaRequestsAborted+=1;else this.state="READY"}handleData_(){}updateTimingInfoEnd_(){}parseVTTCues_(t){let e,i=!1;if("function"!=typeof window.WebVTT)throw new Vh;"function"==typeof window.TextDecoder?e=new window.TextDecoder("utf8"):(e=window.WebVTT.StringDecoder(),i=!0);var s=new window.WebVTT.Parser(window,window.vttjs,e);if(t.cues=[],t.timestampmap={MPEGTS:0,LOCAL:0},s.oncue=t.cues.push.bind(t.cues),s.ontimestampmap=e=>{t.timestampmap=e},s.onparsingerror=e=>{b.log.warn("Error encountered when parsing cues: "+e.message)},t.segment.map){let e=t.segment.map.bytes;i&&(e=jh(e)),s.parse(e)}let r=t.bytes;i&&(r=jh(r)),s.parse(r),s.flush()}updateTimeMapping_(e,s,t){var i,r,n=e.segment;if(s)if(e.cues.length){const{MPEGTS:a,LOCAL:o}=e.timestampmap;const l=a/ml-o+s.mapping;e.cues.forEach(e=>{var t=e.endTime-e.startTime,i=0===a?e.startTime+l:this.handleRollover_(e.startTime+l,s.time);e.startTime=Math.max(i,0),e.endTime=Math.max(i+t,0)}),t.syncInfo||(i=e.cues[0].startTime,r=e.cues[e.cues.length-1].startTime,t.syncInfo={mediaSequence:t.mediaSequence+e.mediaIndex,time:Math.min(i,r-n.duration)})}else n.empty=!0}handleRollover_(e,t){if(null===t)return e;let i=e*ml;var s=t*ml;let r;for(r=s<i?-8589934592:8589934592;4294967296<Math.abs(i-s);)i+=r;return i/ml}}class zh{constructor({start:e,end:t,segmentIndex:i,partIndex:s=null,appended:r=!1}){this.start_=e,this.end_=t,this.segmentIndex_=i,this.partIndex_=s,this.appended_=r}isInRange(e){return e>=this.start&&e<this.end}markAppended(){this.appended_=!0}resetAppendedStatus(){this.appended_=!1}get isAppended(){return this.appended_}get start(){return this.start_}get end(){return this.end_}get segmentIndex(){return this.segmentIndex_}get partIndex(){return this.partIndex_}}class Wh{constructor(e,t=[]){this.segmentSyncInfo_=e,this.partsSyncInfo_=t}get segmentSyncInfo(){return this.segmentSyncInfo_}get partsSyncInfo(){return this.partsSyncInfo_}get hasPartsSyncInfo(){return 0<this.partsSyncInfo_.length}resetAppendStatus(){this.segmentSyncInfo_.resetAppendedStatus(),this.partsSyncInfo_.forEach(e=>e.resetAppendedStatus())}}class Gh{constructor(){this.storage_=new Map,this.diagnostics_="",this.isReliable_=!1,this.start_=-1/0,this.end_=1/0}get start(){return this.start_}get end(){return this.end_}get diagnostics(){return this.diagnostics_}get isReliable(){return this.isReliable_}resetAppendedStatus(){this.storage_.forEach(e=>e.resetAppendStatus())}update(e,t){var{mediaSequence:e,segments:i}=e;if(this.isReliable_=this.isReliablePlaylist_(e,i),this.isReliable_)return this.updateStorage_(i,e,this.calculateBaseTime_(e,t))}getSyncInfoForTime(e){for(var{segmentSyncInfo:t,partsSyncInfo:i}of this.storage_.values())if(i.length){for(const s of i)if(s.isInRange(e))return s}else if(t.isInRange(e))return t;return null}updateStorage_(e,t,i){const d=new Map;let h="\n",u=i,c=t;this.start_=u,e.forEach((e,a)=>{const o=this.storage_.get(c);var t=u,i=t+e.duration,s=Boolean(o&&o.segmentSyncInfo&&o.segmentSyncInfo.isAppended),r=new zh({start:t,end:i,appended:s,segmentIndex:a});e.syncInfo=r;let l=u;var n=(e.parts||[]).map((e,t)=>{var i=l,s=l+e.duration,r=Boolean(o&&o.partsSyncInfo&&o.partsSyncInfo[t]&&o.partsSyncInfo[t].isAppended),n=new zh({start:i,end:s,appended:r,segmentIndex:a,partIndex:t});return l=s,h+=`Media Sequence: ${c}.${t} | Range: ${i} --> ${s} | Appended: ${r}
+`,e.syncInfo=n});d.set(c,new Wh(r,n)),h+=`${yh(e.resolvedUri)} | Media Sequence: ${c} | Range: ${t} --> ${i} | Appended: ${s}\n`,c++,u=i}),this.end_=u,this.storage_=d,this.diagnostics_=h}calculateBaseTime_(e,t){return this.storage_.size?this.storage_.has(e)?this.storage_.get(e).segmentSyncInfo.start:t:0}isReliablePlaylist_(e,t){return null!=e&&Array.isArray(t)&&t.length}}const Xh=[{name:"VOD",run:(e,t,i,s,r)=>{return i!==1/0?{time:0,segmentIndex:0,partIndex:null}:null}},{name:"MediaSequence",run:(e,t,i,s,r,n)=>{e=e.getMediaSequenceSync(n);return e&&e.isReliable&&(n=e.getSyncInfoForTime(r))?{time:n.start,partIndex:n.partIndex,segmentIndex:n.segmentIndex}:null}},{name:"ProgramDateTime",run:(t,i,e,s,r)=>{if(!Object.keys(t.timelineToDatetimeMappings).length)return null;let n=null,a=null;var o=Pl(i);r=r||0;for(let e=0;e<o.length;e++){var l=o[i.endList||0===r?e:o.length-(e+1)],d=l.segment,h=t.timelineToDatetimeMappings[d.timeline];if(h&&d.dateTimeObject){let t=d.dateTimeObject.getTime()/1e3+h;if(d.parts&&"number"==typeof l.partIndex)for(let e=0;e<l.partIndex;e++)t+=d.parts[e].duration;h=Math.abs(r-t);if(null!==a&&(0===h||a<h))break;a=h,n={time:t,segmentIndex:l.segmentIndex,partIndex:l.partIndex}}}return n}},{name:"Segment",run:(e,t,i,s,r)=>{let n=null,a=null;r=r||0;var o=Pl(t);for(let e=0;e<o.length;e++){var l=o[t.endList||0===r?e:o.length-(e+1)],d=l.segment,h=l.part&&l.part.start||d&&d.start;if(d.timeline===s&&"undefined"!=typeof h){d=Math.abs(r-h);if(null!==a&&a<d)break;(!n||null===a||a>=d)&&(a=d,n={time:h,segmentIndex:l.segmentIndex,partIndex:l.partIndex})}}return n}},{name:"Discontinuity",run:(i,s,e,t,r)=>{let n=null;if(r=r||0,s.discontinuityStarts&&s.discontinuityStarts.length){let t=null;for(let e=0;e<s.discontinuityStarts.length;e++){var a=s.discontinuityStarts[e],o=s.discontinuitySequence+e+1,o=i.discontinuities[o];if(o){var l=Math.abs(r-o.time);if(null!==t&&t<l)break;(!n||null===t||t>=l)&&(t=l,n={time:o.time,segmentIndex:a,partIndex:null})}}}return n}},{name:"Playlist",run:(e,t,i,s,r)=>{return t.syncInfo?{time:t.syncInfo.time,segmentIndex:t.syncInfo.mediaSequence-t.mediaSequence,partIndex:null}:null}}];class Kh extends b.EventTarget{constructor(e=0){super(),this.timelines=[],this.discontinuities=[],this.timelineToDatetimeMappings={},this.mediaSequenceStorage_={main:new Gh,audio:new Gh,vtt:new Gh},this.logger_=yl("SyncController")}getMediaSequenceSync(e){return this.mediaSequenceStorage_[e]||null}getSyncPoint(e,t,i,s,r){if(t!==1/0)return Xh.find(({name:e})=>"VOD"===e).run(this,e,t);t=this.runStrategies_(e,t,i,s,r);if(!t.length)return null;for(const h of t){var{syncPoint:n,strategy:a}=h,{segmentIndex:o,time:l}=n;if(!(o<0)){var d=l+e.segments[o].duration;if(this.logger_(`Strategy: ${a}. Current time: ${s}. selected segment: ${o}. Time: [${l} -> ${d}]}`),l<=s&&s<d)return this.logger_("Found sync point with exact match: ",n),n}}return this.selectSyncPoint_(t,{key:"time",value:s})}getExpiredTime(e,t){return e&&e.segments&&(t=this.runStrategies_(e,t,e.discontinuitySequence,0)).length?(0<(t=this.selectSyncPoint_(t,{key:"segmentIndex",value:0})).segmentIndex&&(t.time*=-1),Math.abs(t.time+wl({defaultDuration:e.targetDuration,durationList:e.segments,startIndex:t.segmentIndex,endIndex:0}))):null}runStrategies_(t,i,s,r,n){var a=[];for(let e=0;e<Xh.length;e++){var o=Xh[e],l=o.run(this,t,i,s,r,n);l&&(l.strategy=o.name,a.push({strategy:o.name,syncPoint:l}))}return a}selectSyncPoint_(t,i){let s=t[0].syncPoint,r=Math.abs(t[0].syncPoint[i.key]-i.value),n=t[0].strategy;for(let e=1;e<t.length;e++){var a=Math.abs(t[e].syncPoint[i.key]-i.value);a<r&&(r=a,s=t[e].syncPoint,n=t[e].strategy)}return this.logger_(`syncPoint for [${i.key}: ${i.value}] chosen with strategy`+` [${n}]: [time:${s.time},`+" segmentIndex:"+s.segmentIndex+("number"==typeof s.partIndex?",partIndex:"+s.partIndex:"")+"]"),s}saveExpiredSegmentInfo(t,i){var s=i.mediaSequence-t.mediaSequence;if(86400<s)b.log.warn(`Not saving expired segment info. Media sequence gap ${s} is too large.`);else for(let e=s-1;0<=e;e--){var r=t.segments[e];if(r&&"undefined"!=typeof r.start){i.syncInfo={mediaSequence:t.mediaSequence+e,time:r.start},this.logger_(`playlist refresh sync: [time:${i.syncInfo.time},`+` mediaSequence: ${i.syncInfo.mediaSequence}]`),this.trigger("syncinfoupdate");break}}}setDateTimeMappingForStart(e){var t;this.timelineToDatetimeMappings={},e.segments&&e.segments.length&&e.segments[0].dateTimeObject&&(t=(e=e.segments[0]).dateTimeObject.getTime()/1e3,this.timelineToDatetimeMappings[e.timeline]=-t)}saveSegmentTimingInfo({segmentInfo:e,shouldSaveTimelineMapping:t}){var i=this.calculateSegmentTimeMapping_(e,e.timingInfo,t),s=e.segment,i=(i&&(this.saveDiscontinuitySyncInfo_(e),e.playlist.syncInfo||(e.playlist.syncInfo={mediaSequence:e.playlist.mediaSequence+e.mediaIndex,time:s.start})),s.dateTimeObject);s.discontinuity&&t&&i&&(this.timelineToDatetimeMappings[s.timeline]=-i.getTime()/1e3)}timestampOffsetForTimeline(e){return"undefined"==typeof this.timelines[e]?null:this.timelines[e].time}mappingForTimeline(e){return"undefined"==typeof this.timelines[e]?null:this.timelines[e].mapping}calculateSegmentTimeMapping_(e,t,i){var s=e.segment,r=e.part;let n=this.timelines[e.timeline],a,o;if("number"==typeof e.timestampOffset)n={time:e.startOfSegment,mapping:e.startOfSegment-t.start},i&&(this.timelines[e.timeline]=n,this.trigger("timestampoffset"),this.logger_(`time mapping for timeline ${e.timeline}: `+`[time: ${n.time}] [mapping: ${n.mapping}]`)),a=e.startOfSegment;else{if(!n)return!1;a=t.start+n.mapping}return o=t.end+n.mapping,r&&(r.start=a,r.end=o),(!s.start||a<s.start)&&(s.start=a),s.end=o,!0}saveDiscontinuitySyncInfo_(t){var i=t.playlist,s=t.segment;if(s.discontinuity)this.discontinuities[s.timeline]={time:s.start,accuracy:0};else if(i.discontinuityStarts&&i.discontinuityStarts.length)for(let e=0;e<i.discontinuityStarts.length;e++){var r=i.discontinuityStarts[e],n=i.discontinuitySequence+e+1,a=r-t.mediaIndex,o=Math.abs(a);if(!this.discontinuities[n]||this.discontinuities[n].accuracy>o){let e;e=a<0?s.start-wl({defaultDuration:i.targetDuration,durationList:i.segments,startIndex:t.mediaIndex,endIndex:r}):s.end+wl({defaultDuration:i.targetDuration,durationList:i.segments,startIndex:t.mediaIndex+1,endIndex:r}),this.discontinuities[n]={time:e,accuracy:o}}}}dispose(){this.trigger("dispose"),this.off()}}class Yh extends b.EventTarget{constructor(){super(),this.pendingTimelineChanges_={},this.lastTimelineChanges_={}}clearPendingTimelineChange(e){this.pendingTimelineChanges_[e]=null,this.trigger("pendingtimelinechange")}pendingTimelineChange({type:e,from:t,to:i}){return"number"==typeof t&&"number"==typeof i&&(this.pendingTimelineChanges_[e]={type:e,from:t,to:i},this.trigger("pendingtimelinechange")),this.pendingTimelineChanges_[e]}lastTimelineChange({type:e,from:t,to:i}){return"number"==typeof t&&"number"==typeof i&&(this.lastTimelineChanges_[e]={type:e,from:t,to:i},delete this.pendingTimelineChanges_[e],this.trigger("timelinechange")),this.lastTimelineChanges_[e]}dispose(){this.trigger("dispose"),this.pendingTimelineChanges_={},this.lastTimelineChanges_={},this.off()}}var Qh=Ld(Od(Rd(function(){var e=function(){function e(){this.listeners={}}var t=e.prototype;return t.on=function(e,t){this.listeners[e]||(this.listeners[e]=[]),this.listeners[e].push(t)},t.off=function(e,t){return!!this.listeners[e]&&(t=this.listeners[e].indexOf(t),this.listeners[e]=this.listeners[e].slice(0),this.listeners[e].splice(t,1),-1<t)},t.trigger=function(e){var t=this.listeners[e];if(t)if(2===arguments.length)for(var i=t.length,s=0;s<i;++s)t[s].call(this,arguments[1]);else for(var r=Array.prototype.slice.call(arguments,1),n=t.length,a=0;a<n;++a)t[a].apply(this,r)},t.dispose=function(){this.listeners={}},t.pipe=function(t){this.on("data",function(e){t.push(e)})},e}();
+/*! @name pkcs7 @version 1.0.4 @license Apache-2.0 */let h=null;class g{constructor(e){h=h||function(){var e=[[[],[],[],[],[]],[[],[],[],[],[]]],t=e[0],i=e[1],s=t[4],r=i[4];let n,a,o;var l,d,h,u,c=[],p=[];let m,g;for(n=0;n<256;n++)p[(c[n]=n<<1^283*(n>>7))^n]=n;for(a=o=0;!s[a];a^=l||1,o=p[o]||1)for(u=(u=o^o<<1^o<<2^o<<3^o<<4)>>8^255&u^99,h=c[d=c[l=c[r[s[a]=u]=a]]],g=16843009*h^65537*d^257*l^16843008*a,m=257*c[u]^16843008*u,n=0;n<4;n++)t[n][a]=m=m<<24^m>>>8,i[n][u]=g=g<<24^g>>>8;for(n=0;n<5;n++)t[n]=t[n].slice(0),i[n]=i[n].slice(0);return e}(),this._tables=[[h[0][0].slice(),h[0][1].slice(),h[0][2].slice(),h[0][3].slice(),h[0][4].slice()],[h[1][0].slice(),h[1][1].slice(),h[1][2].slice(),h[1][3].slice(),h[1][4].slice()]];let t,i,s;var r=this._tables[0][4],n=this._tables[1],a=e.length;let o=1;if(4!==a&&6!==a&&8!==a)throw new Error("Invalid aes key size");var l=e.slice(0),d=[];for(this._key=[l,d],t=a;t<4*a+28;t++)s=l[t-1],(t%a==0||8===a&&t%a==4)&&(s=r[s>>>24]<<24^r[s>>16&255]<<16^r[s>>8&255]<<8^r[255&s],t%a==0)&&(s=s<<8^s>>>24^o<<24,o=o<<1^283*(o>>7)),l[t]=l[t-a]^s;for(i=0;t;i++,t--)s=l[3&i?t:t-4],t<=4||i<4?d[i]=s:d[i]=n[0][r[s>>>24]]^n[1][r[s>>16&255]]^n[2][r[s>>8&255]]^n[3][r[255&s]]}decrypt(e,t,i,s,r,n){var a,o,l=this._key[1];let d=e^l[0],h=s^l[1],u=i^l[2],c=t^l[3],p;var m=l.length/4-2;let g,f=4;var e=this._tables[1],y=e[0],_=e[1],v=e[2],b=e[3],T=e[4];for(g=0;g<m;g++)p=y[d>>>24]^_[h>>16&255]^v[u>>8&255]^b[255&c]^l[f],a=y[h>>>24]^_[u>>16&255]^v[c>>8&255]^b[255&d]^l[f+1],o=y[u>>>24]^_[c>>16&255]^v[d>>8&255]^b[255&h]^l[f+2],c=y[c>>>24]^_[d>>16&255]^v[h>>8&255]^b[255&u]^l[f+3],f+=4,d=p,h=a,u=o;for(g=0;g<4;g++)r[(3&-g)+n]=T[d>>>24]<<24^T[h>>16&255]<<16^T[u>>8&255]<<8^T[255&c]^l[f++],p=d,d=h,h=u,u=c,c=p}}class l extends e{constructor(){super(e),this.jobs=[],this.delay=1,this.timeout_=null}processJob_(){this.jobs.shift()(),this.jobs.length?this.timeout_=setTimeout(this.processJob_.bind(this),this.delay):this.timeout_=null}push(e){this.jobs.push(e),this.timeout_||(this.timeout_=setTimeout(this.processJob_.bind(this),this.delay))}}function f(e){return e<<24|(65280&e)<<8|(16711680&e)>>8|e>>>24}class d{constructor(e,t,i,s){var r=d.STEP,n=new Int32Array(e.buffer);const a=new Uint8Array(e.byteLength);let o=0;for(this.asyncStream_=new l,this.asyncStream_.push(this.decryptChunk_(n.subarray(o,o+r),t,i,a)),o=r;o<n.length;o+=r)i=new Uint32Array([f(n[o-4]),f(n[o-3]),f(n[o-2]),f(n[o-1])]),this.asyncStream_.push(this.decryptChunk_(n.subarray(o,o+r),t,i,a));this.asyncStream_.push(function(){var e;
+/*! @name aes-decrypter @version 4.0.1 @license Apache-2.0 */s(null,(e=a).subarray(0,e.byteLength-e[e.byteLength-1]))})}static get STEP(){return 32e3}decryptChunk_(t,i,s,r){return function(){var e=function(e,t,i){var s,r,n,a,o=new Int32Array(e.buffer,e.byteOffset,e.byteLength>>2),l=new g(Array.prototype.slice.call(t)),t=new Uint8Array(e.byteLength),d=new Int32Array(t.buffer);let h,u,c,p,m;for(h=i[0],u=i[1],c=i[2],p=i[3],m=0;m<o.length;m+=4)s=f(o[m]),r=f(o[m+1]),n=f(o[m+2]),a=f(o[m+3]),l.decrypt(s,r,n,a,d,m),d[m]=f(d[m]^h),d[m+1]=f(d[m+1]^u),d[m+2]=f(d[m+2]^c),d[m+3]=f(d[m+3]^p),h=s,u=r,c=n,p=a;return t}(t,i,s);r.set(e,t.byteOffset)}}}var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},t="undefined"!=typeof window?window:"undefined"!=typeof t?t:"undefined"!=typeof self?self:{},t=t.BigInt||Number;t("0x1"),t("0x100"),t("0x10000"),t("0x1000000"),t("0x100000000"),t("0x10000000000"),t("0x1000000000000"),t("0x100000000000000"),t("0x10000000000000000"),t=new Uint16Array([65484]),255!==(t=new Uint8Array(t.buffer,t.byteOffset,t.byteLength))[0]&&t[0];function r(s){const r={};return Object.keys(s).forEach(e=>{var t,i=s[e];t=i,("function"===ArrayBuffer.isView?ArrayBuffer.isView(t):t&&t.buffer instanceof ArrayBuffer)?r[e]={bytes:i.buffer,byteOffset:i.byteOffset,byteLength:i.byteLength}:r[e]=i}),r}self.onmessage=function(e){const i=e.data;var e=new Uint8Array(i.encrypted.bytes,i.encrypted.byteOffset,i.encrypted.byteLength),t=new Uint32Array(i.key.bytes,i.key.byteOffset,i.key.byteLength/4),s=new Uint32Array(i.iv.bytes,i.iv.byteOffset,i.iv.byteLength/4);new d(e,t,s,function(e,t){self.postMessage(r({source:i.source,decrypted:t}),[t.buffer])})}})));const Jh=(e,t)=>{e.abort(),e.pause(),t&&t.activePlaylistLoader&&(t.activePlaylistLoader.pause(),t.activePlaylistLoader=null)},Zh=(e,t)=>{(t.activePlaylistLoader=e).load()},eu={AUDIO:(a,o)=>()=>{var{mediaTypes:{[a]:e},excludePlaylist:t}=o,i=e.activeTrack(),s=e.activeGroup(),s=(s.filter(e=>e.default)[0]||s[0]).id,r=e.tracks[s];if(i===r)t({error:{message:"Problem encountered loading the default audio track."}});else{b.log.warn("Problem encountered loading the alternate audio track.Switching back to default.");for(const n in e.tracks)e.tracks[n].enabled=e.tracks[n]===r;e.onTrackChanged()}},SUBTITLES:(i,s)=>()=>{var{[i]:e}=s["mediaTypes"],t=(b.log.warn("Problem encountered loading the subtitle track.Disabling subtitle track."),e.activeTrack());t&&(t.mode="disabled"),e.onTrackChanged()}},tu={AUDIO:(e,t,i)=>{if(!t)return;const{tech:s,requestOptions:r,segmentLoaders:{[e]:n}}=i;t.on("loadedmetadata",()=>{var e=t.media();n.playlist(e,r),(!s.paused()||e.endList&&"none"!==s.preload())&&n.load()}),t.on("loadedplaylist",()=>{n.playlist(t.media(),r),s.paused()||n.load()}),t.on("error",eu[e](e,i))},SUBTITLES:(e,t,i)=>{const{tech:s,requestOptions:r,segmentLoaders:{[e]:n},mediaTypes:{[e]:a}}=i;t.on("loadedmetadata",()=>{var e=t.media();n.playlist(e,r),n.track(a.activeTrack()),(!s.paused()||e.endList&&"none"!==s.preload())&&n.load()}),t.on("loadedplaylist",()=>{n.playlist(t.media(),r),s.paused()||n.load()}),t.on("error",eu[e](e,i))}},iu={AUDIO:(i,s)=>{var r,{vhs:n,sourceType:a,segmentLoaders:{[i]:e},requestOptions:o,main:{mediaGroups:l},mediaTypes:{[i]:{groups:d,tracks:h,logger_:u}},mainPlaylistLoader:c}=s,p=Wl(c.main);l[i]&&0!==Object.keys(l[i]).length||(l[i]={main:{default:{default:!0}}},p&&(l[i].main.default.playlists=c.main.playlists));for(const m in l[i]){d[m]||(d[m]=[]);for(const g in l[i][m]){let e=l[i][m][g],t;t=p?(u(`AUDIO group '${m}' label '${g}' is a main playlist`),e.isMainPlaylist=!0,null):"vhs-json"===a&&e.playlists?new od(e.playlists[0],n,o):e.resolvedUri?new od(e.resolvedUri,n,o):e.playlists&&"dash"===a?new Ad(e.playlists[0],n,o,c):null,e=L({id:g,playlistLoader:t},e),tu[i](i,e.playlistLoader,s),d[m].push(e),"undefined"==typeof h[g]&&(r=new b.AudioTrack({id:g,kind:(e=>{let t=e.default?"main":"alternative";return t=e.characteristics&&0<=e.characteristics.indexOf("public.accessibility.describes-video")?"main-desc":t})(e),enabled:!1,language:e.language,default:e.default,label:g}),h[g]=r)}}e.on("error",eu[i](i,s))},SUBTITLES:(i,s)=>{var r,{tech:n,vhs:a,sourceType:o,segmentLoaders:{[i]:e},requestOptions:l,main:{mediaGroups:d},mediaTypes:{[i]:{groups:h,tracks:u}},mainPlaylistLoader:c}=s;for(const p in d[i]){h[p]||(h[p]=[]);for(const m in d[i][p])if(a.options_.useForcedSubtitles||!d[i][p][m].forced){let e=d[i][p][m],t;if("hls"===o)t=new od(e.resolvedUri,a,l);else if("dash"===o){if(!e.playlists.filter(e=>e.excludeUntil!==1/0).length)return;t=new Ad(e.playlists[0],a,l,c)}else"vhs-json"===o&&(t=new od(e.playlists?e.playlists[0]:e.resolvedUri,a,l));e=L({id:m,playlistLoader:t},e),tu[i](i,e.playlistLoader,s),h[p].push(e),"undefined"==typeof u[m]&&(r=n.addRemoteTextTrack({id:m,kind:"subtitles",default:e.default&&e.autoselect,language:e.language,label:m},!1).track,u[m]=r)}}e.on("error",eu[i](i,s))},"CLOSED-CAPTIONS":(e,t)=>{var{tech:i,main:{mediaGroups:s},mediaTypes:{[e]:{groups:r,tracks:n}}}=t;for(const l in s[e]){r[l]||(r[l]=[]);for(const d in s[e][l]){var a=s[e][l][d];if(/^(?:CC|SERVICE)/.test(a.instreamId)){var o=i.options_.vhs&&i.options_.vhs.captionServices||{};let e={label:d,language:a.language,instreamId:a.instreamId,default:a.default&&a.autoselect};void 0===(e=o[e.instreamId]?L(e,o[e.instreamId]):e).default&&delete e.default,r[l].push(L({id:d},a)),"undefined"==typeof n[d]&&(o=i.addRemoteTextTrack({id:e.instreamId,kind:"captions",default:e.default,language:e.language,label:e.label},!1).track,n[d]=o)}}}}},su=(t,i)=>{for(let e=0;e<t.length;e++){if(zl(i,t[e]))return!0;if(t[e].playlists&&su(t[e].playlists,i))return!0}return!1},ru={AUDIO:(i,s)=>()=>{var{[i]:{tracks:e}}=s["mediaTypes"];for(const t in e)if(e[t].enabled)return e[t];return null},SUBTITLES:(i,s)=>()=>{var{[i]:{tracks:e}}=s["mediaTypes"];for(const t in e)if("showing"===e[t].mode||"hidden"===e[t].mode)return e[t];return null}},nu=n=>{["AUDIO","SUBTITLES","CLOSED-CAPTIONS"].forEach(e=>{iu[e](e,n)});const{mediaTypes:a,mainPlaylistLoader:e,tech:t,vhs:i,segmentLoaders:{AUDIO:s,main:r}}=n;["AUDIO","SUBTITLES"].forEach(e=>{var o,l,d,h,i,s,u,c,t,r;a[e].activeGroup=(o=e,l=n,t=>{var{mainPlaylistLoader:e,mediaTypes:{[o]:{groups:i}}}=l,s=e.media();if(!s)return null;let r=null;s.attributes[o]&&(r=i[s.attributes[o]]);var n=Object.keys(i);if(!r)if("AUDIO"===o&&1<n.length&&Wl(l.main))for(let e=0;e<n.length;e++){var a=i[n[e]];if(su(a,s)){r=a;break}}else i.main?r=i.main:1===n.length&&(r=i[n[0]]);return"undefined"==typeof t?r:null!==t&&r&&r.filter(e=>e.id===t.id)[0]||null}),a[e].activeTrack=ru[e](e,n),a[e].onGroupChanged=(d=e,h=n,()=>{var{segmentLoaders:{[d]:e,main:t},mediaTypes:{[d]:i}}=h,s=i.activeTrack(),r=i.getActiveGroup(),n=i.activePlaylistLoader,a=i.lastGroup_;r&&a&&r.id===a.id||(i.lastGroup_=r,i.lastTrack_=s,Jh(e,i),r&&!r.isMainPlaylist&&(r.playlistLoader?(e.resyncLoader(),Zh(r.playlistLoader,i)):n&&t.resetEverything()))}),a[e].onGroupChanging=(i=e,s=n,()=>{var{segmentLoaders:{[i]:e},mediaTypes:{[i]:t}}=s;t.lastGroup_=null,e.abort(),e.pause()}),a[e].onTrackChanged=(u=e,c=n,()=>{var e,t,{mainPlaylistLoader:i,segmentLoaders:{[u]:s,main:r},mediaTypes:{[u]:n}}=c,a=n.activeTrack(),o=n.getActiveGroup(),l=n.activePlaylistLoader,d=n.lastTrack_;if((!d||!a||d.id!==a.id)&&(n.lastGroup_=o,n.lastTrack_=a,Jh(s,n),o)){if(o.isMainPlaylist)return!a||!d||a.id===d.id||(t=(e=c.vhs.playlistController_).selectPlaylist(),e.media()===t)?void 0:(n.logger_(`track change. Switching main audio from ${d.id} to `+a.id),i.pause(),r.resetEverything(),void e.fastQualityChange_(t));if("AUDIO"===u){if(!o.playlistLoader)return r.setAudio(!0),void r.resetEverything();s.setAudio(!0),r.setAudio(!1)}l===o.playlistLoader||(s.track&&s.track(a),s.resetEverything()),Zh(o.playlistLoader,n)}}),a[e].getActiveGroup=([t,r]=[e,n["mediaTypes"]],()=>{var e=r[t].activeTrack();return e?r[t].activeGroup(e):null})});var o=a.AUDIO.activeGroup();o&&(o=(o.filter(e=>e.default)[0]||o[0]).id,a.AUDIO.tracks[o].enabled=!0,a.AUDIO.onGroupChanged(),a.AUDIO.onTrackChanged(),(a.AUDIO.getActiveGroup().playlistLoader?(r.setAudio(!1),s):r).setAudio(!0)),e.on("mediachange",()=>{["AUDIO","SUBTITLES"].forEach(e=>a[e].onGroupChanged())}),e.on("mediachanging",()=>{["AUDIO","SUBTITLES"].forEach(e=>a[e].onGroupChanging())});const l=()=>{a.AUDIO.onTrackChanged(),t.trigger({type:"usage",name:"vhs-audio-change"})};t.audioTracks().addEventListener("change",l),t.remoteTextTracks().addEventListener("change",a.SUBTITLES.onTrackChanged),i.on("dispose",()=>{t.audioTracks().removeEventListener("change",l),t.remoteTextTracks().removeEventListener("change",a.SUBTITLES.onTrackChanged)}),t.clearTracks("audio");for(const d in a.AUDIO.tracks)t.audioTracks().addTrack(a.AUDIO.tracks[d])};class au{constructor(){this.priority_=[],this.pathwayClones_=new Map}set version(e){1===e&&(this.version_=e)}set ttl(e){this.ttl_=e||300}set reloadUri(e){e&&(this.reloadUri_=gl(this.reloadUri_,e))}set priority(e){e&&e.length&&(this.priority_=e)}set pathwayClones(e){e&&e.length&&(this.pathwayClones_=new Map(e.map(e=>[e.ID,e])))}get version(){return this.version_}get ttl(){return this.ttl_}get reloadUri(){return this.reloadUri_}get priority(){return this.priority_}get pathwayClones(){return this.pathwayClones_}}class ou extends b.EventTarget{constructor(e,t){super(),this.currentPathway=null,this.defaultPathway=null,this.queryBeforeStart=!1,this.availablePathways_=new Set,this.steeringManifest=new au,this.proxyServerUrl_=null,this.manifestType_=null,this.ttlTimeout_=null,this.request_=null,this.currentPathwayClones=new Map,this.nextPathwayClones=new Map,this.excludedSteeringManifestURLs=new Set,this.logger_=yl("Content Steering"),this.xhr_=e,this.getBandwidth_=t}assignTagProperties(e,t){this.manifestType_=t.serverUri?"HLS":"DASH";var i=t.serverUri||t.serverURL;i?i.startsWith("data:")?this.decodeDataUriManifest_(i.substring(i.indexOf(",")+1)):(this.steeringManifest.reloadUri=gl(e,i),this.defaultPathway=t.pathwayId||t.defaultServiceLocation,this.queryBeforeStart=t.queryBeforeStart,this.proxyServerUrl_=t.proxyServerURL,this.defaultPathway&&!this.queryBeforeStart&&this.trigger("content-steering")):(this.logger_(`steering manifest URL is ${i}, cannot request steering manifest.`),this.trigger("error"))}requestSteeringManifest(e){var t=this.steeringManifest.reloadUri;if(t){const i=e?t:this.getRequestURI(t);i?this.request_=this.xhr_({uri:i,requestType:"content-steering-manifest"},(e,t)=>{if(e)return 410===t.status?(this.logger_(`manifest request 410 ${e}.`),this.logger_(`There will be no more content steering requests to ${i} this session.`),void this.excludedSteeringManifestURLs.add(i)):429===t.status?(t=t.responseHeaders["retry-after"],this.logger_(`manifest request 429 ${e}.`),this.logger_(`content steering will retry in ${t} seconds.`),void this.startTTLTimeout_(parseInt(t,10))):(this.logger_(`manifest failed to load ${e}.`),void this.startTTLTimeout_());t=JSON.parse(this.request_.responseText);this.assignSteeringProperties_(t),this.startTTLTimeout_()}):(this.logger_("No valid content steering manifest URIs. Stopping content steering."),this.trigger("error"),this.dispose())}}setProxyServerUrl_(e){var e=new window.URL(e),t=new window.URL(this.proxyServerUrl_);return t.searchParams.set("url",encodeURI(e.toString())),this.setSteeringParams_(t.toString())}decodeDataUriManifest_(e){e=JSON.parse(window.atob(e));this.assignSteeringProperties_(e)}setSteeringParams_(e){var t,e=new window.URL(e),i=this.getPathway(),s=this.getBandwidth_();return i&&(t=`_${this.manifestType_}_pathway`,e.searchParams.set(t,i)),s&&(t=`_${this.manifestType_}_throughput`,e.searchParams.set(t,s)),e.toString()}assignSteeringProperties_(e){var t;this.steeringManifest.version=e.VERSION,this.steeringManifest.version?(this.steeringManifest.ttl=e.TTL,this.steeringManifest.reloadUri=e["RELOAD-URI"],this.steeringManifest.priority=e["PATHWAY-PRIORITY"]||e["SERVICE-LOCATION-PRIORITY"],this.steeringManifest.pathwayClones=e["PATHWAY-CLONES"],this.nextPathwayClones=this.steeringManifest.pathwayClones,this.availablePathways_.size||(this.logger_("There are no available pathways for content steering. Ending content steering."),this.trigger("error"),this.dispose()),t=(e=>{for(const t of e)if(this.availablePathways_.has(t))return t;return[...this.availablePathways_][0]})(this.steeringManifest.priority),this.currentPathway!==t&&(this.currentPathway=t,this.trigger("content-steering"))):(this.logger_(`manifest version is ${e.VERSION}, which is not supported.`),this.trigger("error"))}getPathway(){return this.currentPathway||this.defaultPathway}getRequestURI(e){if(!e)return null;var t=e=>this.excludedSteeringManifestURLs.has(e);if(this.proxyServerUrl_){var i=this.setProxyServerUrl_(e);if(!t(i))return i}i=this.setSteeringParams_(e);return t(i)?null:i}startTTLTimeout_(e=this.steeringManifest.ttl){this.ttlTimeout_=window.setTimeout(()=>{this.requestSteeringManifest()},1e3*e)}clearTTLTimeout_(){window.clearTimeout(this.ttlTimeout_),this.ttlTimeout_=null}abort(){this.request_&&this.request_.abort(),this.request_=null}dispose(){this.off("content-steering"),this.off("error"),this.abort(),this.clearTTLTimeout_(),this.currentPathway=null,this.defaultPathway=null,this.queryBeforeStart=null,this.proxyServerUrl_=null,this.manifestType_=null,this.ttlTimeout_=null,this.request_=null,this.excludedSteeringManifestURLs=new Set,this.availablePathways_=new Set,this.steeringManifest=new au}addAvailablePathway(e){e&&this.availablePathways_.add(e)}clearAvailablePathways(){this.availablePathways_.clear()}excludePathway(e){return this.availablePathways_.delete(e)}didDASHTagChange(e,t){return!t&&this.steeringManifest.reloadUri||t&&(gl(e,t.serverURL)!==this.steeringManifest.reloadUri||t.defaultServiceLocation!==this.defaultPathway||t.queryBeforeStart!==this.queryBeforeStart||t.proxyServerURL!==this.proxyServerUrl_)}getAvailablePathways(){return this.availablePathways_}}let lu;const du=["mediaRequests","mediaRequestsAborted","mediaRequestsTimedout","mediaRequestsErrored","mediaTransferDuration","mediaBytesTransferred","mediaAppends"];class hu extends b.EventTarget{constructor(e){super();const{src:t,withCredentials:i,tech:r,bandwidth:s,externVhs:n,useCueTags:a,playlistExclusionDuration:o,enableLowInitialPlaylist:l,sourceType:d,cacheEncryptionKeys:h,bufferBasedABR:u,leastPixelDiffSelector:c,captionServices:p}=e;if(!t)throw new Error("A non-empty playlist URL or JSON manifest string is required");let m=e["maxPlaylistRetries"];null!==m&&"undefined"!=typeof m||(m=1/0),lu=n,this.bufferBasedABR=Boolean(u),this.leastPixelDiffSelector=Boolean(c),this.withCredentials=i,this.tech_=r,this.vhs_=r.vhs,this.sourceType_=d,this.useCueTags_=a,this.playlistExclusionDuration=o,this.maxPlaylistRetries=m,this.enableLowInitialPlaylist=l,this.useCueTags_&&(this.cueTagsTrack_=this.tech_.addTextTrack("metadata","ad-cues"),this.cueTagsTrack_.inBandMetadataTrackDispatchType=""),this.requestOptions_={withCredentials:i,maxPlaylistRetries:m,timeout:null},this.on("error",this.pauseLoading),this.mediaTypes_=(()=>{const t={};return["AUDIO","SUBTITLES","CLOSED-CAPTIONS"].forEach(e=>{t[e]={groups:{},tracks:{},activePlaylistLoader:null,activeGroup:Dh,activeTrack:Dh,getActiveGroup:Dh,onGroupChanged:Dh,onTrackChanged:Dh,lastTrack_:null,logger_:yl(`MediaGroups[${e}]`)}}),t})(),this.mediaSource=new window.MediaSource,this.handleDurationChange_=this.handleDurationChange_.bind(this),this.handleSourceOpen_=this.handleSourceOpen_.bind(this),this.handleSourceEnded_=this.handleSourceEnded_.bind(this),this.mediaSource.addEventListener("durationchange",this.handleDurationChange_),this.mediaSource.addEventListener("sourceopen",this.handleSourceOpen_),this.mediaSource.addEventListener("sourceended",this.handleSourceEnded_),this.seekable_=_l(),this.hasPlayed_=!1,this.syncController_=new Kh(e),this.segmentMetadataTrack_=r.addRemoteTextTrack({kind:"metadata",label:"segment-metadata"},!1).track,this.decrypter_=new Qh,this.sourceUpdater_=new qh(this.mediaSource),this.inbandTextTracks_={},this.timelineChangeController_=new Yh,this.keyStatusMap_=new Map;var g={vhs:this.vhs_,parse708captions:e.parse708captions,useDtsForTimestampOffset:e.useDtsForTimestampOffset,captionServices:p,mediaSource:this.mediaSource,currentTime:this.tech_.currentTime.bind(this.tech_),seekable:()=>this.seekable(),seeking:()=>this.tech_.seeking(),duration:()=>this.duration(),hasPlayed:()=>this.hasPlayed_,goalBufferLength:()=>this.goalBufferLength(),bandwidth:s,syncController:this.syncController_,decrypter:this.decrypter_,sourceType:this.sourceType_,inbandTextTracks:this.inbandTextTracks_,cacheEncryptionKeys:h,sourceUpdater:this.sourceUpdater_,timelineChangeController:this.timelineChangeController_,exactManifestTimings:e.exactManifestTimings,addMetadataToTextTrack:this.addMetadataToTextTrack.bind(this)},g=(this.mainPlaylistLoader_="dash"===this.sourceType_?new Ad(t,this.vhs_,L(this.requestOptions_,{addMetadataToTextTrack:this.addMetadataToTextTrack.bind(this)})):new od(t,this.vhs_,L(this.requestOptions_,{addDateRangesToTextTrack:this.addDateRangesToTextTrack_.bind(this)})),this.setupMainPlaylistLoaderListeners_(),this.mainSegmentLoader_=new Ah(L(g,{segmentMetadataTrack:this.segmentMetadataTrack_,loaderType:"main"}),e),this.audioSegmentLoader_=new Ah(L(g,{loaderType:"audio"}),e),this.subtitleSegmentLoader_=new $h(L(g,{loaderType:"vtt",featuresNativeTextTracks:this.tech_.featuresNativeTextTracks,loadVttJs:()=>new Promise((e,t)=>{function i(){r.off("vttjserror",s),e()}function s(){r.off("vttjsloaded",i),t()}r.one("vttjsloaded",i),r.one("vttjserror",s),r.addWebVttScript_()})}),e),this.contentSteeringController_=new ou(this.vhs_.xhr,()=>this.mainSegmentLoader_.bandwidth),this.setupSegmentLoaderListeners_(),this.bufferBasedABR&&(this.mainPlaylistLoader_.one("loadedplaylist",()=>this.startABRTimer_()),this.tech_.on("pause",()=>this.stopABRTimer_()),this.tech_.on("play",()=>this.startABRTimer_())),du.forEach(e=>{this[e+"_"]=function(e){return this.audioSegmentLoader_[e]+this.mainSegmentLoader_[e]}.bind(this,e)}),this.logger_=yl("pc"),this.triggeredFmp4Usage=!1,"none"===this.tech_.preload()?(this.loadOnPlay_=()=>{this.loadOnPlay_=null,this.mainPlaylistLoader_.load()},this.tech_.one("play",this.loadOnPlay_)):this.mainPlaylistLoader_.load(),this.timeToLoadedData__=-1,this.mainAppendsToLoadedData__=-1,this.audioAppendsToLoadedData__=-1,"none"===this.tech_.preload()?"play":"loadstart");this.tech_.one(g,()=>{const e=Date.now();this.tech_.one("loadeddata",()=>{this.timeToLoadedData__=Date.now()-e,this.mainAppendsToLoadedData__=this.mainSegmentLoader_.mediaAppends,this.audioAppendsToLoadedData__=this.audioSegmentLoader_.mediaAppends})})}mainAppendsToLoadedData_(){return this.mainAppendsToLoadedData__}audioAppendsToLoadedData_(){return this.audioAppendsToLoadedData__}appendsToLoadedData_(){var e=this.mainAppendsToLoadedData_(),t=this.audioAppendsToLoadedData_();return-1===e||-1===t?-1:e+t}timeToLoadedData_(){return this.timeToLoadedData__}checkABR_(e="abr"){var t=this.selectPlaylist();t&&this.shouldSwitchToMedia_(t)&&this.switchMedia_(t,e)}switchMedia_(e,t,i){var s=this.media(),s=s&&(s.id||s.uri),r=e&&(e.id||e.uri);s&&s!==r&&(this.logger_(`switch media ${s} -> ${r} from `+t),this.tech_.trigger({type:"usage",name:"vhs-rendition-change-"+t})),this.mainPlaylistLoader_.media(e,i)}switchMediaForDASHContentSteering_(){["AUDIO","SUBTITLES","CLOSED-CAPTIONS"].forEach(e=>{var t=this.mediaTypes_[e],t=t?t.activeGroup():null;const i=this.contentSteeringController_.getPathway();t&&i&&(t=(t.length?t[0]:t).playlists.filter(e=>e.attributes.serviceLocation===i)).length&&this.mediaTypes_[e].activePlaylistLoader.media(t[0])})}startABRTimer_(){this.stopABRTimer_(),this.abrTimer_=window.setInterval(()=>this.checkABR_(),250)}stopABRTimer_(){this.tech_.scrubbing&&this.tech_.scrubbing()||(window.clearInterval(this.abrTimer_),this.abrTimer_=null)}getAudioTrackPlaylists_(){var t=this.main(),e=t&&t.playlists||[];if(!t||!t.mediaGroups||!t.mediaGroups.AUDIO)return e;var i=t.mediaGroups.AUDIO,s=Object.keys(i);let r;if(Object.keys(this.mediaTypes_.AUDIO.groups).length)r=this.mediaTypes_.AUDIO.activeTrack();else{var n=i.main||s.length&&i[s[0]];for(const d in n)if(n[d].default){r={label:d};break}}if(!r)return e;var a=[];for(const h in i)if(i[h][r.label]){var o=i[h][r.label];if(o.playlists&&o.playlists.length)a.push.apply(a,o.playlists);else if(o.uri)a.push(o);else if(t.playlists.length)for(let e=0;e<t.playlists.length;e++){var l=t.playlists[e];l.attributes&&l.attributes.AUDIO&&l.attributes.AUDIO===h&&a.push(l)}}return a.length?a:e}setupMainPlaylistLoaderListeners_(){this.mainPlaylistLoader_.on("loadedmetadata",()=>{var e=this.mainPlaylistLoader_.media(),t=1.5*e.targetDuration*1e3;$l(this.mainPlaylistLoader_.main,this.mainPlaylistLoader_.media())?this.requestOptions_.timeout=0:this.requestOptions_.timeout=t,e.endList&&"none"!==this.tech_.preload()&&(this.mainSegmentLoader_.playlist(e,this.requestOptions_),this.mainSegmentLoader_.load()),nu({sourceType:this.sourceType_,segmentLoaders:{AUDIO:this.audioSegmentLoader_,SUBTITLES:this.subtitleSegmentLoader_,main:this.mainSegmentLoader_},tech:this.tech_,requestOptions:this.requestOptions_,mainPlaylistLoader:this.mainPlaylistLoader_,vhs:this.vhs_,main:this.main(),mediaTypes:this.mediaTypes_,excludePlaylist:this.excludePlaylist.bind(this)}),this.triggerPresenceUsage_(this.main(),e),this.setupFirstPlay(),!this.mediaTypes_.AUDIO.activePlaylistLoader||this.mediaTypes_.AUDIO.activePlaylistLoader.media()?this.trigger("selectedinitialmedia"):this.mediaTypes_.AUDIO.activePlaylistLoader.one("loadedmetadata",()=>{this.trigger("selectedinitialmedia")})}),this.mainPlaylistLoader_.on("loadedplaylist",()=>{this.loadOnPlay_&&this.tech_.off("play",this.loadOnPlay_);let t=this.mainPlaylistLoader_.media();if(!t){this.attachContentSteeringListeners_(),this.initContentSteeringController_(),this.excludeUnsupportedVariants_();let e;if(!(e=(e=this.enableLowInitialPlaylist?this.selectInitialPlaylist():e)||this.selectPlaylist())||!this.shouldSwitchToMedia_(e))return;if(this.initialMedia_=e,this.switchMedia_(this.initialMedia_,"initial"),!("vhs-json"===this.sourceType_&&this.initialMedia_.segments))return;t=this.initialMedia_}this.handleUpdatedMediaPlaylist(t)}),this.mainPlaylistLoader_.on("error",()=>{var e=this.mainPlaylistLoader_.error;this.excludePlaylist({playlistToExclude:e.playlist,error:e})}),this.mainPlaylistLoader_.on("mediachanging",()=>{this.mainSegmentLoader_.abort(),this.mainSegmentLoader_.pause()}),this.mainPlaylistLoader_.on("mediachange",()=>{var e=this.mainPlaylistLoader_.media(),t=1.5*e.targetDuration*1e3;$l(this.mainPlaylistLoader_.main,this.mainPlaylistLoader_.media())?this.requestOptions_.timeout=0:this.requestOptions_.timeout=t,"dash"===this.sourceType_&&this.mainPlaylistLoader_.load(),this.mainSegmentLoader_.pause(),this.mainSegmentLoader_.playlist(e,this.requestOptions_),this.waitingForFastQualityPlaylistReceived_?this.runFastQualitySwitch_():this.mainSegmentLoader_.load(),this.tech_.trigger({type:"mediachange",bubbles:!0})}),this.mainPlaylistLoader_.on("playlistunchanged",()=>{var e=this.mainPlaylistLoader_.media();"playlist-unchanged"!==e.lastExcludeReason_&&this.stuckAtPlaylistEnd_(e)&&(this.excludePlaylist({error:{message:"Playlist no longer updating.",reason:"playlist-unchanged"}}),this.tech_.trigger("playliststuck"))}),this.mainPlaylistLoader_.on("renditiondisabled",()=>{this.tech_.trigger({type:"usage",name:"vhs-rendition-disabled"})}),this.mainPlaylistLoader_.on("renditionenabled",()=>{this.tech_.trigger({type:"usage",name:"vhs-rendition-enabled"})})}handleUpdatedMediaPlaylist(e){this.useCueTags_&&this.updateAdCues_(e),this.mainSegmentLoader_.pause(),this.mainSegmentLoader_.playlist(e,this.requestOptions_),this.waitingForFastQualityPlaylistReceived_&&this.runFastQualitySwitch_(),this.updateDuration(!e.endList),this.tech_.paused()||(this.mainSegmentLoader_.load(),this.audioSegmentLoader_&&this.audioSegmentLoader_.load())}triggerPresenceUsage_(e,t){var i=e.mediaGroups||{};let s=!0;e=Object.keys(i.AUDIO);for(const r in i.AUDIO)for(const n in i.AUDIO[r])i.AUDIO[r][n].uri||(s=!1);s&&this.tech_.trigger({type:"usage",name:"vhs-demuxed"}),Object.keys(i.SUBTITLES).length&&this.tech_.trigger({type:"usage",name:"vhs-webvtt"}),lu.Playlist.isAes(t)&&this.tech_.trigger({type:"usage",name:"vhs-aes"}),e.length&&1<Object.keys(i.AUDIO[e[0]]).length&&this.tech_.trigger({type:"usage",name:"vhs-alternate-audio"}),this.useCueTags_&&this.tech_.trigger({type:"usage",name:"vhs-playlist-cue-tags"})}shouldSwitchToMedia_(t){var e=this.mainPlaylistLoader_.media()||this.mainPlaylistLoader_.pendingMedia_,i=this.tech_.currentTime(),s=this.bufferLowWaterLine(),r=this.bufferHighWaterLine(),{currentPlaylist:i,buffered:e,currentTime:t,nextPlaylist:s,bufferLowWaterLine:r,bufferHighWaterLine:n,duration:a,bufferBasedABR:o,log:l}=[{buffered:this.tech_.buffered(),currentTime:i,currentPlaylist:e,nextPlaylist:t,bufferLowWaterLine:s,bufferHighWaterLine:r,duration:this.duration(),bufferBasedABR:this.bufferBasedABR,log:this.logger_}][0];if(s){var d=`allowing switch ${i&&i.id||"null"} -> `+s.id;if(!i)return l(d+" as current playlist is not set"),!0;if(s.id!==i.id){var h=Boolean(vl(e,t).length);if(!i.endList)return h||"number"!=typeof i.partTargetDuration?(l(d+" as current playlist is live"),!0):(l(`not ${d} as current playlist is live llhls, but currentTime isn't in buffered.`),!1);h=Sl(e,t),e=o?O.EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE:O.MAX_BUFFER_LOW_WATER_LINE;if(a<e)return l(d+` as duration < max low water line (${a} < ${e})`),!0;t=s.attributes.BANDWIDTH,a=i.attributes.BANDWIDTH;if(t<a&&(!o||h<n)){let e=d+` as next bandwidth < current bandwidth (${t} < ${a})`;return o&&(e+=` and forwardBuffer < bufferHighWaterLine (${h} < ${n})`),l(e),!0}if((!o||a<t)&&r<=h){let e=d+` as forwardBuffer >= bufferLowWaterLine (${h} >= ${r})`;return o&&(e+=` and next bandwidth > current bandwidth (${t} > ${a})`),l(e),!0}l(`not ${d} as no switching criteria met`)}}else b.log.warn("We received no playlist to switch to. Please check your stream.");return!1}setupSegmentLoaderListeners_(){this.mainSegmentLoader_.on("bandwidthupdate",()=>{this.checkABR_("bandwidthupdate"),this.tech_.trigger("bandwidthupdate")}),this.mainSegmentLoader_.on("timeout",()=>{this.bufferBasedABR&&this.mainSegmentLoader_.load()}),this.bufferBasedABR||this.mainSegmentLoader_.on("progress",()=>{this.trigger("progress")}),this.mainSegmentLoader_.on("error",()=>{var e=this.mainSegmentLoader_.error();this.excludePlaylist({playlistToExclude:e.playlist,error:e})}),this.mainSegmentLoader_.on("appenderror",()=>{this.error=this.mainSegmentLoader_.error_,this.trigger("error")}),this.mainSegmentLoader_.on("syncinfoupdate",()=>{this.onSyncInfoUpdate_()}),this.mainSegmentLoader_.on("timestampoffset",()=>{this.tech_.trigger({type:"usage",name:"vhs-timestamp-offset"})}),this.audioSegmentLoader_.on("syncinfoupdate",()=>{this.onSyncInfoUpdate_()}),this.audioSegmentLoader_.on("appenderror",()=>{this.error=this.audioSegmentLoader_.error_,this.trigger("error")}),this.mainSegmentLoader_.on("ended",()=>{this.logger_("main segment loader ended"),this.onEndOfStream()}),this.mainSegmentLoader_.on("earlyabort",e=>{this.bufferBasedABR||(this.delegateLoaders_("all",["abort"]),this.excludePlaylist({error:{message:"Aborted early because there isn't enough bandwidth to complete the request without rebuffering."},playlistExclusionDuration:10}))});var e=()=>{if(!this.sourceUpdater_.hasCreatedSourceBuffers())return this.tryToCreateSourceBuffers_();var e=this.getCodecsOrExclude_();e&&this.sourceUpdater_.addOrChangeSourceBuffers(e)};this.mainSegmentLoader_.on("trackinfo",e),this.audioSegmentLoader_.on("trackinfo",e),this.mainSegmentLoader_.on("fmp4",()=>{this.triggeredFmp4Usage||(this.tech_.trigger({type:"usage",name:"vhs-fmp4"}),this.triggeredFmp4Usage=!0)}),this.audioSegmentLoader_.on("fmp4",()=>{this.triggeredFmp4Usage||(this.tech_.trigger({type:"usage",name:"vhs-fmp4"}),this.triggeredFmp4Usage=!0)}),this.audioSegmentLoader_.on("ended",()=>{this.logger_("audioSegmentLoader ended"),this.onEndOfStream()})}mediaSecondsLoaded_(){return Math.max(this.audioSegmentLoader_.mediaSecondsLoaded+this.mainSegmentLoader_.mediaSecondsLoaded)}load(){this.mainSegmentLoader_.load(),this.mediaTypes_.AUDIO.activePlaylistLoader&&this.audioSegmentLoader_.load(),this.mediaTypes_.SUBTITLES.activePlaylistLoader&&this.subtitleSegmentLoader_.load()}fastQualityChange_(e=this.selectPlaylist()){e&&e===this.mainPlaylistLoader_.media()?this.logger_("skipping fastQualityChange because new media is same as old"):(this.switchMedia_(e,"fast-quality"),this.waitingForFastQualityPlaylistReceived_=!0)}runFastQualitySwitch_(){this.waitingForFastQualityPlaylistReceived_=!1,this.mainSegmentLoader_.pause(),this.mainSegmentLoader_.resetEverything(()=>{this.tech_.setCurrentTime(this.tech_.currentTime())})}play(){var e;if(!this.setupFirstPlay())return this.tech_.ended()&&this.tech_.setCurrentTime(0),this.hasPlayed_&&this.load(),e=this.tech_.seekable(),this.tech_.duration()===1/0&&this.tech_.currentTime()<e.start(0)?this.tech_.setCurrentTime(e.end(e.length-1)):void 0}setupFirstPlay(){var t=this.mainPlaylistLoader_.media();if(!t||this.tech_.paused()||this.hasPlayed_)return!1;if(!t.endList||t.start){var i=this.seekable();if(!i.length)return!1;var s=i.end(0);let e=s;t.start&&(t=t.start.timeOffset,e=t<0?Math.max(s+t,i.start(0)):Math.min(s,t)),this.trigger("firstplay"),this.tech_.setCurrentTime(e)}return this.hasPlayed_=!0,this.load(),!0}handleSourceOpen_(){var e;this.tryToCreateSourceBuffers_(),this.tech_.autoplay()&&"undefined"!=typeof(e=this.tech_.play())&&"function"==typeof e.then&&e.then(null,e=>{}),this.trigger("sourceopen")}handleSourceEnded_(){var e,t;this.inbandTextTracks_.metadataTrack_&&(e=this.inbandTextTracks_.metadataTrack_.cues)&&e.length&&(t=this.duration(),e[e.length-1].endTime=isNaN(t)||Math.abs(t)===1/0?Number.MAX_VALUE:t)}handleDurationChange_(){this.tech_.trigger("durationchange")}onEndOfStream(){let e=this.mainSegmentLoader_.ended_;var t;this.mediaTypes_.AUDIO.activePlaylistLoader&&(t=this.mainSegmentLoader_.getCurrentMediaInfo_(),e=(t&&!t.hasVideo||e)&&this.audioSegmentLoader_.ended_),e&&(this.stopABRTimer_(),this.sourceUpdater_.endOfStream())}stuckAtPlaylistEnd_(e){var t,i;return!!this.seekable().length&&null!==(t=this.syncController_.getExpiredTime(e,this.duration()))&&(e=lu.Playlist.playlistEnd(e,t),t=this.tech_.currentTime(),(i=this.tech_.buffered()).length?(i=i.end(i.length-1))-t<=kl&&e-i<=kl:e-t<=kl)}excludePlaylist({playlistToExclude:s=this.mainPlaylistLoader_.media(),error:t={},playlistExclusionDuration:i}){if(s=s||this.mainPlaylistLoader_.media(),i=i||t.playlistExclusionDuration||this.playlistExclusionDuration,s){s.playlistErrors_++;var r=this.mainPlaylistLoader_.main.playlists,n=r.filter(jl),n=1===n.length&&n[0]===s;if(1===r.length&&i!==1/0)return b.log.warn(`Problem encountered with playlist ${s.id}. `+"Trying again since it is the only playlist."),this.tech_.trigger("retryplaylist"),this.mainPlaylistLoader_.load(n);if(n){if(this.main().contentSteering){const o=this.pathwayAttribute_(s);var a=1e3*this.contentSteeringController_.steeringManifest.ttl;return this.contentSteeringController_.excludePathway(o),this.excludeThenChangePathway_(),void setTimeout(()=>{this.contentSteeringController_.addAvailablePathway(o)},a)}let i=!1;r.forEach(e=>{var t;e!==s&&"undefined"!=typeof(t=e.excludeUntil)&&t!==1/0&&(i=!0,delete e.excludeUntil)}),i&&(b.log.warn("Removing other playlists from the exclusion list because the last rendition is about to be excluded."),this.tech_.trigger("retryplaylist"))}let e;e=s.playlistErrors_>this.maxPlaylistRetries?1/0:Date.now()+1e3*i,s.excludeUntil=e,t.reason&&(s.lastExcludeReason_=t.reason),this.tech_.trigger("excludeplaylist"),this.tech_.trigger({type:"usage",name:"vhs-rendition-excluded"});a=this.selectPlaylist();if(a)return r=t.internal?this.logger_:b.log.warn,i=t.message?" "+t.message:"",r(`${t.internal?"Internal problem":"Problem"} encountered with playlist ${s.id}.`+i+` Switching to playlist ${a.id}.`),a.attributes.AUDIO!==s.attributes.AUDIO&&this.delegateLoaders_("audio",["abort","pause"]),a.attributes.SUBTITLES!==s.attributes.SUBTITLES&&this.delegateLoaders_("subtitle",["abort","pause"]),this.delegateLoaders_("main",["abort","pause"]),r=a.targetDuration/2*1e3||5e3,i="number"==typeof a.lastRequest&&Date.now()-a.lastRequest<=r,this.switchMedia_(a,"exclude",n||i);this.error="Playback cannot continue. No available working or supported playlists.",this.trigger("error")}else this.error=t,"open"!==this.mediaSource.readyState?this.trigger("error"):this.sourceUpdater_.endOfStream("network")}pauseLoading(){this.delegateLoaders_("all",["abort","pause"]),this.stopABRTimer_()}delegateLoaders_(i,e){const s=[];var t="all"===i,r=(!t&&"main"!==i||s.push(this.mainPlaylistLoader_),[]);!t&&"audio"!==i||r.push("AUDIO"),!t&&"subtitle"!==i||(r.push("CLOSED-CAPTIONS"),r.push("SUBTITLES")),r.forEach(e=>{e=this.mediaTypes_[e]&&this.mediaTypes_[e].activePlaylistLoader;e&&s.push(e)}),["main","audio","subtitle"].forEach(e=>{var t=this[e+"SegmentLoader_"];!t||i!==e&&"all"!==i||s.push(t)}),s.forEach(t=>e.forEach(e=>{"function"==typeof t[e]&&t[e]()}))}setCurrentTime(e){var t=vl(this.tech_.buffered(),e);return this.mainPlaylistLoader_&&this.mainPlaylistLoader_.media()&&this.mainPlaylistLoader_.media().segments?t&&t.length?e:(this.mainSegmentLoader_.pause(),this.mainSegmentLoader_.resetEverything(),this.mediaTypes_.AUDIO.activePlaylistLoader&&(this.audioSegmentLoader_.pause(),this.audioSegmentLoader_.resetEverything()),this.mediaTypes_.SUBTITLES.activePlaylistLoader&&(this.subtitleSegmentLoader_.pause(),this.subtitleSegmentLoader_.resetEverything()),void this.load()):0}duration(){var e;return this.mainPlaylistLoader_&&(e=this.mainPlaylistLoader_.media())?e.endList?this.mediaSource?this.mediaSource.duration:lu.Playlist.duration(e):1/0:0}seekable(){return this.seekable_}onSyncInfoUpdate_(){let i;if(this.mainPlaylistLoader_){var s=this.mainPlaylistLoader_.media();if(s){var r=this.syncController_.getExpiredTime(s,this.duration());if(null!==r){var n=this.mainPlaylistLoader_.main,a=lu.Playlist.seekable(s,r,lu.Playlist.liveEdgeDelay(n,s));if(0!==a.length){if(this.mediaTypes_.AUDIO.activePlaylistLoader){if(s=this.mediaTypes_.AUDIO.activePlaylistLoader.media(),null===(r=this.syncController_.getExpiredTime(s,this.duration())))return;if(0===(i=lu.Playlist.seekable(s,r,lu.Playlist.liveEdgeDelay(n,s))).length)return}let e,t;this.seekable_&&this.seekable_.length&&(e=this.seekable_.end(0),t=this.seekable_.start(0)),!i||i.start(0)>a.end(0)||a.start(0)>i.end(0)?this.seekable_=a:this.seekable_=_l([[(i.start(0)>a.start(0)?i:a).start(0),(i.end(0)<a.end(0)?i:a).end(0)]]),this.seekable_&&this.seekable_.length&&this.seekable_.end(0)===e&&this.seekable_.start(0)===t||(this.logger_(`seekable updated [${xl(this.seekable_)}]`),this.tech_.trigger("seekablechanged"))}}}}}updateDuration(t){if(this.updateDuration_&&(this.mediaSource.removeEventListener("sourceopen",this.updateDuration_),this.updateDuration_=null),"open"!==this.mediaSource.readyState)this.updateDuration_=this.updateDuration.bind(this,t),this.mediaSource.addEventListener("sourceopen",this.updateDuration_);else{if(t)return(t=this.seekable()).length?void((isNaN(this.mediaSource.duration)||this.mediaSource.duration<t.end(t.length-1))&&this.sourceUpdater_.setDuration(t.end(t.length-1))):void 0;t=this.tech_.buffered();let e=lu.Playlist.duration(this.mainPlaylistLoader_.media());0<t.length&&(e=Math.max(e,t.end(t.length-1))),this.mediaSource.duration!==e&&this.sourceUpdater_.setDuration(e)}}dispose(){this.trigger("dispose"),this.decrypter_.terminate(),this.mainPlaylistLoader_.dispose(),this.mainSegmentLoader_.dispose(),this.contentSteeringController_.dispose(),this.keyStatusMap_.clear(),this.loadOnPlay_&&this.tech_.off("play",this.loadOnPlay_),["AUDIO","SUBTITLES"].forEach(e=>{var t=this.mediaTypes_[e].groups;for(const i in t)t[i].forEach(e=>{e.playlistLoader&&e.playlistLoader.dispose()})}),this.audioSegmentLoader_.dispose(),this.subtitleSegmentLoader_.dispose(),this.sourceUpdater_.dispose(),this.timelineChangeController_.dispose(),this.stopABRTimer_(),this.updateDuration_&&this.mediaSource.removeEventListener("sourceopen",this.updateDuration_),this.mediaSource.removeEventListener("durationchange",this.handleDurationChange_),this.mediaSource.removeEventListener("sourceopen",this.handleSourceOpen_),this.mediaSource.removeEventListener("sourceended",this.handleSourceEnded_),this.off()}main(){return this.mainPlaylistLoader_.main}media(){return this.mainPlaylistLoader_.media()||this.initialMedia_}areMediaTypesKnown_(){var e=!!this.mediaTypes_.AUDIO.activePlaylistLoader,t=!!this.mainSegmentLoader_.getCurrentMediaInfo_(),e=!e||!!this.audioSegmentLoader_.getCurrentMediaInfo_();return t&&e}getCodecsOrExclude_(){const r={main:this.mainSegmentLoader_.getCurrentMediaInfo_()||{},audio:this.audioSegmentLoader_.getCurrentMediaInfo_()||{}},t=this.mainSegmentLoader_.getPendingSegmentPlaylist()||this.media();r.video=r.main;var e=Xd(this.main(),t);const n={};var i=!!this.mediaTypes_.AUDIO.activePlaylistLoader;if(r.main.hasVideo&&(n.video=e.video||r.main.videoCodec||"avc1.4d400d"),r.main.isMuxed&&(n.video+=","+(e.audio||r.main.audioCodec||vn)),(r.main.hasAudio&&!r.main.isMuxed||r.audio.hasAudio||i)&&(n.audio=e.audio||r.main.audioCodec||r.audio.audioCodec||vn,r.audio.isFmp4=(r.main.hasAudio&&!r.main.isMuxed?r.main:r.audio).isFmp4),n.audio||n.video){const a={};let s;if(["video","audio"].forEach(function(e){var t,i;n.hasOwnProperty(e)&&(t=r[e].isFmp4,i=n[e],!(t?ln:dn)(i))&&(t=r[e].isFmp4?"browser":"muxer",a[t]=a[t]||[],a[t].push(n[e]),"audio"===e&&(s=t))}),i&&s&&t.attributes.AUDIO){const o=t.attributes.AUDIO;this.main().playlists.forEach(e=>{(e.attributes&&e.attributes.AUDIO)===o&&e!==t&&(e.excludeUntil=1/0)}),this.logger_(`excluding audio group ${o} as ${s} does not support codec(s): "${n.audio}"`)}if(!Object.keys(a).length){if(this.sourceUpdater_.hasCreatedSourceBuffers()&&!this.sourceUpdater_.canChangeType()){const l=[];if(["video","audio"].forEach(e=>{var t=(yn(this.sourceUpdater_.codecs[e]||"")[0]||{}).type,i=(yn(n[e]||"")[0]||{}).type;t&&i&&t.toLowerCase()!==i.toLowerCase()&&l.push(`"${this.sourceUpdater_.codecs[e]}" -> "${n[e]}"`)}),l.length)return void this.excludePlaylist({playlistToExclude:t,error:{message:`Codec switching not supported: ${l.join(", ")}.`,internal:!0},playlistExclusionDuration:1/0})}return n}e=Object.keys(a).reduce((e,t)=>(e&&(e+=", "),e+=`${t} does not support codec(s): "${a[t].join(",")}"`),"")+".",this.excludePlaylist({playlistToExclude:t,error:{internal:!0,message:e},playlistExclusionDuration:1/0})}else this.excludePlaylist({playlistToExclude:t,error:{message:"Could not determine codecs for playlist."},playlistExclusionDuration:1/0})}tryToCreateSourceBuffers_(){var e;"open"!==this.mediaSource.readyState||this.sourceUpdater_.hasCreatedSourceBuffers()||this.areMediaTypesKnown_()&&(e=this.getCodecsOrExclude_())&&(this.sourceUpdater_.createSourceBuffers(e),e=[e.video,e.audio].filter(Boolean).join(","),this.excludeIncompatibleVariants_(e))}excludeUnsupportedVariants_(){const s=this.main().playlists,r=[];Object.keys(s).forEach(e=>{var t,i,e=s[e];-1===r.indexOf(e.id)&&(r.push(e.id),i=[],!(t=Xd(this.main,e)).audio||dn(t.audio)||ln(t.audio)||i.push("audio codec "+t.audio),!t.video||dn(t.video)||ln(t.video)||i.push("video codec "+t.video),t.text&&"stpp.ttml.im1t"===t.text&&i.push("text codec "+t.text),i.length)&&(e.excludeUntil=1/0,this.logger_(`excluding ${e.id} for unsupported: `+i.join(", ")))})}excludeIncompatibleVariants_(e){const r=[],n=this.main().playlists;e=uh(yn(e));const a=Gd(e),o=e.video&&yn(e.video)[0]||null,l=e.audio&&yn(e.audio)[0]||null;Object.keys(n).forEach(e=>{var t,i,s,e=n[e];-1===r.indexOf(e.id)&&e.excludeUntil!==1/0&&(r.push(e.id),t=[],s=Xd(this.mainPlaylistLoader_.main,e),i=Gd(s),s.audio||s.video)&&(i!==a&&t.push(`codec count "${i}" !== "${a}"`),this.sourceUpdater_.canChangeType()||(i=s.video&&yn(s.video)[0]||null,s=s.audio&&yn(s.audio)[0]||null,i&&o&&i.type.toLowerCase()!==o.type.toLowerCase()&&t.push(`video codec "${i.type}" !== "${o.type}"`),s&&l&&s.type.toLowerCase()!==l.type.toLowerCase()&&t.push(`audio codec "${s.type}" !== "${l.type}"`)),t.length)&&(e.excludeUntil=1/0,this.logger_(`excluding ${e.id}: `+t.join(" && ")))})}updateAdCues_(e){let t=0;var s=this.seekable(),[r,n,s=0]=(s.length&&(t=s.start(0)),[e,this.cueTagsTrack_,t]);if(r.segments){let t=s,i;for(let e=0;e<r.segments.length;e++){var a,o,l=r.segments[e];if(i=i||function(e,t){var i=e.cues;for(let e=0;e<i.length;e++){var s=i[e];if(t>=s.adStartTime&&t<=s.adEndTime)return s}return null}(n,t+l.duration/2)){if("cueIn"in l){i.endTime=t,i.adEndTime=t,t+=l.duration,i=null;continue}if(t<i.endTime){t+=l.duration;continue}i.endTime+=l.duration}else"cueOut"in l&&((i=new window.VTTCue(t,t+l.duration,l.cueOut)).adStartTime=t,i.adEndTime=t+parseFloat(l.cueOut),n.addCue(i)),"cueOutCont"in l&&([a,o]=l.cueOutCont.split("/").map(parseFloat),(i=new window.VTTCue(t,t+l.duration,"")).adStartTime=t-a,i.adEndTime=i.adStartTime+o,n.addCue(i));t+=l.duration}}}goalBufferLength(){var e=this.tech_.currentTime(),t=O.GOAL_BUFFER_LENGTH,i=O.GOAL_BUFFER_LENGTH_RATE,s=Math.max(t,O.MAX_GOAL_BUFFER_LENGTH);return Math.min(t+e*i,s)}bufferLowWaterLine(){var e=this.tech_.currentTime(),t=O.BUFFER_LOW_WATER_LINE,i=O.BUFFER_LOW_WATER_LINE_RATE,s=Math.max(t,O.MAX_BUFFER_LOW_WATER_LINE),r=Math.max(t,O.EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE);return Math.min(t+e*i,this.bufferBasedABR?r:s)}bufferHighWaterLine(){return O.BUFFER_HIGH_WATER_LINE}addDateRangesToTextTrack_(e){Sh(this.inbandTextTracks_,"com.apple.streaming",this.tech_);{var{inbandTextTracks:e,dateRanges:t}={inbandTextTracks:this.inbandTextTracks_,dateRanges:e};const s=e.metadataTrack_;if(s){const r=window.WebKitDataCue||window.VTTCue;t.forEach(e=>{for(const i of Object.keys(e)){var t;Th.has(i)||((t=new r(e.startTime,e.endTime,"")).id=e.id,t.type="com.apple.quicktime.HLS",t.value={key:bh[i],data:e[i]},"scte35Out"!==i&&"scte35In"!==i||(t.value.data=new Uint8Array(t.value.data.match(/[\da-f]{2}/gi)).buffer),s.addCue(t))}e.processDateRange()})}}}addMetadataToTextTrack(e,t,i){var s=this.sourceUpdater_.videoBuffer?this.sourceUpdater_.videoTimestampOffset():this.sourceUpdater_.audioTimestampOffset();Sh(this.inbandTextTracks_,e,this.tech_),vh({inbandTextTracks:this.inbandTextTracks_,metadataArray:t,timestampOffset:s,videoDuration:i})}pathwayAttribute_(e){return e.attributes["PATHWAY-ID"]||e.attributes.serviceLocation}initContentSteeringController_(){var e=this.main();if(e.contentSteering){for(const t of e.playlists)this.contentSteeringController_.addAvailablePathway(this.pathwayAttribute_(t));this.contentSteeringController_.assignTagProperties(e.uri,e.contentSteering),this.contentSteeringController_.queryBeforeStart?this.contentSteeringController_.requestSteeringManifest(!0):this.tech_.one("canplay",()=>{this.contentSteeringController_.requestSteeringManifest()})}}resetContentSteeringController_(){this.contentSteeringController_.clearAvailablePathways(),this.contentSteeringController_.dispose(),this.initContentSteeringController_()}attachContentSteeringListeners_(){this.contentSteeringController_.on("content-steering",this.excludeThenChangePathway_.bind(this)),"dash"===this.sourceType_&&this.mainPlaylistLoader_.on("loadedplaylist",()=>{const r=this.main();(this.contentSteeringController_.didDASHTagChange(r.uri,r.contentSteering)||(()=>{var e=this.contentSteeringController_.getAvailablePathways(),t=[];for(const s of r.playlists){var i=s.attributes.serviceLocation;if(i&&(t.push(i),!e.has(i)))return!0}return!(t.length||!e.size)})())&&this.resetContentSteeringController_()})}excludeThenChangePathway_(){const r=this.contentSteeringController_.getPathway();if(r){this.handlePathwayClones_();const n=this.main().playlists,a=new Set;let s=!1;Object.keys(n).forEach(e=>{var e=n[e],t=this.pathwayAttribute_(e),t=t&&r!==t,i=(e.excludeUntil===1/0&&"content-steering"===e.lastExcludeReason_&&!t&&(delete e.excludeUntil,delete e.lastExcludeReason_,s=!0),!e.excludeUntil&&e.excludeUntil!==1/0);!a.has(e.id)&&t&&i&&(a.add(e.id),e.excludeUntil=1/0,e.lastExcludeReason_="content-steering",this.logger_(`excluding ${e.id} for `+e.lastExcludeReason_))}),"DASH"===this.contentSteeringController_.manifestType_&&Object.keys(this.mediaTypes_).forEach(e=>{var e=this.mediaTypes_[e];e.activePlaylistLoader&&(e=e.activePlaylistLoader.media_)&&e.attributes.serviceLocation!==r&&(s=!0)}),s&&this.changeSegmentPathway_()}}handlePathwayClones_(){var e=this.main().playlists,t=this.contentSteeringController_.currentPathwayClones,i=this.contentSteeringController_.nextPathwayClones;if(t&&t.size||i&&i.size){for(var[s,r]of t.entries())i.get(s)||(this.mainPlaylistLoader_.updateOrDeleteClone(r),this.contentSteeringController_.excludePathway(s));for(const[a,o]of i.entries()){var n=t.get(a);n?this.equalPathwayClones_(n,o)||(this.mainPlaylistLoader_.updateOrDeleteClone(o,!0),this.contentSteeringController_.addAvailablePathway(a)):(e.filter(e=>e.attributes["PATHWAY-ID"]===o["BASE-ID"]).forEach(e=>{this.mainPlaylistLoader_.addClonePathway(o,e)}),this.contentSteeringController_.addAvailablePathway(a))}this.contentSteeringController_.currentPathwayClones=new Map(JSON.parse(JSON.stringify([...i])))}}equalPathwayClones_(e,t){if(e["BASE-ID"]!==t["BASE-ID"]||e.ID!==t.ID||e["URI-REPLACEMENT"].HOST!==t["URI-REPLACEMENT"].HOST)return!1;var i=e["URI-REPLACEMENT"].PARAMS,s=t["URI-REPLACEMENT"].PARAMS;for(const r in i)if(i[r]!==s[r])return!1;for(const n in s)if(i[n]!==s[n])return!1;return!0}changeSegmentPathway_(){var e=this.selectPlaylist();this.pauseLoading(),"DASH"===this.contentSteeringController_.manifestType_&&this.switchMediaForDASHContentSteering_(),this.switchMedia_(e,"content-steering")}excludeNonUsablePlaylistsByKeyId_(){if(this.mainPlaylistLoader_&&this.mainPlaylistLoader_.main){let r=0;const n="non-usable";this.mainPlaylistLoader_.main.playlists.forEach(s=>{var e=this.mainPlaylistLoader_.getKeyIdSet(s);e&&e.size&&e.forEach(e=>{var t="usable",t=this.keyStatusMap_.has(e)&&this.keyStatusMap_.get(e)===t,i=s.lastExcludeReason_===n&&s.excludeUntil===1/0;t?i&&(delete s.excludeUntil,delete s.lastExcludeReason_,this.logger_(`enabling playlist ${s.id} because key ID ${e} is usable`)):(s.excludeUntil!==1/0&&s.lastExcludeReason_!==n&&(s.excludeUntil=1/0,s.lastExcludeReason_=n,this.logger_(`excluding playlist ${s.id} because the key ID ${e} doesn't exist in the keyStatusMap or is not usable`)),r++)})}),r>=this.mainPlaylistLoader_.main.playlists.length&&this.mainPlaylistLoader_.main.playlists.forEach(e=>{var t=e&&e.attributes&&e.attributes.RESOLUTION&&e.attributes.RESOLUTION.height<720,i=e.excludeUntil===1/0&&e.lastExcludeReason_===n;t&&i&&(delete e.excludeUntil,b.log.warn(`enabling non-HD playlist ${e.id} because all playlists were excluded due to ${n} key IDs`))})}}addKeyStatus_(e,t){e=("string"==typeof e?e:(e=>{e=new Uint8Array(e);return Array.from(e).map(e=>e.toString(16).padStart(2,"0")).join("")})(e)).slice(0,32).toLowerCase();this.logger_(`KeyStatus '${t}' with key ID ${e} added to the keyStatusMap`),this.keyStatusMap_.set(e,t)}updatePlaylistByKeyStatus(e,t){this.addKeyStatus_(e,t),this.waitingForFastQualityPlaylistReceived_||this.excludeNonUsableThenChangePlaylist_(),this.mainPlaylistLoader_.off("loadedplaylist",this.excludeNonUsableThenChangePlaylist_.bind(this)),this.mainPlaylistLoader_.on("loadedplaylist",this.excludeNonUsableThenChangePlaylist_.bind(this))}excludeNonUsableThenChangePlaylist_(){this.excludeNonUsablePlaylistsByKeyId_(),this.fastQualityChange_()}}class uu{constructor(e,t,i){var s,r,n,a,o=e["playlistController_"],l=o.fastQualityChange_.bind(o);t.attributes&&(s=t.attributes.RESOLUTION,this.width=s&&s.width,this.height=s&&s.height,this.bandwidth=t.attributes.BANDWIDTH,this.frameRate=t.attributes["FRAME-RATE"]),this.codecs=Xd(o.main(),t),this.playlist=t,this.id=i,this.enabled=(r=e.playlists,n=t.id,a=l,e=>{var t=r.main.playlists[n],i=ql(t),s=jl(t);return"undefined"==typeof e?s:(e?delete t.disabled:t.disabled=!0,e===s||i||(a(t),e?r.trigger("renditionenabled"):r.trigger("renditiondisabled")),e)})}}const cu=["seeking","seeked","pause","playing","error"];class pu{constructor(e){this.playlistController_=e.playlistController,this.tech_=e.tech,this.seekable=e.seekable,this.allowSeeksWithinUnsafeLiveWindow=e.allowSeeksWithinUnsafeLiveWindow,this.liveRangeSafeTimeDelta=e.liveRangeSafeTimeDelta,this.media=e.media,this.consecutiveUpdates=0,this.lastRecordedTime=null,this.checkCurrentTimeTimeout_=null,this.logger_=yl("PlaybackWatcher"),this.logger_("initialize");const t=()=>this.monitorCurrentTime_(),i=()=>this.monitorCurrentTime_(),s=()=>this.techWaiting_(),r=()=>this.resetTimeUpdate_(),n=this.playlistController_,a=["main","subtitle","audio"],o={},l=(a.forEach(e=>{o[e]={reset:()=>this.resetSegmentDownloads_(e),updateend:()=>this.checkSegmentDownloads_(e)},n[e+"SegmentLoader_"].on("appendsdone",o[e].updateend),n[e+"SegmentLoader_"].on("playlistupdate",o[e].reset),this.tech_.on(["seeked","seeking"],o[e].reset)}),t=>{["main","audio"].forEach(e=>{n[e+"SegmentLoader_"][t]("appended",this.seekingAppendCheck_)})});this.seekingAppendCheck_=()=>{this.fixesBadSeeks_()&&(this.consecutiveUpdates=0,this.lastRecordedTime=this.tech_.currentTime(),l("off"))},this.clearSeekingAppendCheck_=()=>l("off"),this.watchForBadSeeking_=()=>{this.clearSeekingAppendCheck_(),l("on")},this.tech_.on("seeked",this.clearSeekingAppendCheck_),this.tech_.on("seeking",this.watchForBadSeeking_),this.tech_.on("waiting",s),this.tech_.on(cu,r),this.tech_.on("canplay",i),this.tech_.one("play",t),this.dispose=()=>{this.clearSeekingAppendCheck_(),this.logger_("dispose"),this.tech_.off("waiting",s),this.tech_.off(cu,r),this.tech_.off("canplay",i),this.tech_.off("play",t),this.tech_.off("seeking",this.watchForBadSeeking_),this.tech_.off("seeked",this.clearSeekingAppendCheck_),a.forEach(e=>{n[e+"SegmentLoader_"].off("appendsdone",o[e].updateend),n[e+"SegmentLoader_"].off("playlistupdate",o[e].reset),this.tech_.off(["seeked","seeking"],o[e].reset)}),this.checkCurrentTimeTimeout_&&window.clearTimeout(this.checkCurrentTimeTimeout_),this.resetTimeUpdate_()}}monitorCurrentTime_(){this.checkCurrentTime_(),this.checkCurrentTimeTimeout_&&window.clearTimeout(this.checkCurrentTimeTimeout_),this.checkCurrentTimeTimeout_=window.setTimeout(this.monitorCurrentTime_.bind(this),250)}resetSegmentDownloads_(e){var t=this.playlistController_[e+"SegmentLoader_"];0<this[e+"StalledDownloads_"]&&this.logger_(`resetting possible stalled download count for ${e} loader`),this[e+"StalledDownloads_"]=0,this[e+"Buffered_"]=t.buffered_()}checkSegmentDownloads_(e){var t=this.playlistController_,i=t[e+"SegmentLoader_"],s=i.buffered_(),r=function(t,i){if(t!==i){if(!t&&i||!i&&t)return!0;if(t.length!==i.length)return!0;for(let e=0;e<t.length;e++)if(t.start(e)!==i.start(e)||t.end(e)!==i.end(e))return!0}return!1}(this[e+"Buffered_"],s);this[e+"Buffered_"]=s,r?this.resetSegmentDownloads_(e):(this[e+"StalledDownloads_"]++,this.logger_(`found #${this[e+"StalledDownloads_"]} ${e} appends that did not increase buffer (possible stalled download)`,{playlistId:i.playlist_&&i.playlist_.id,buffered:Al(s)}),this[e+"StalledDownloads_"]<10||(this.logger_(e+" loader stalled download exclusion"),this.resetSegmentDownloads_(e),this.tech_.trigger({type:"usage",name:`vhs-${e}-download-exclusion`}),"subtitle"!==e&&t.excludePlaylist({error:{message:`Excessive ${e} segment downloading detected.`},playlistExclusionDuration:1/0})))}checkCurrentTime_(){var e,t;if(!this.tech_.paused()&&!this.tech_.seeking())return e=this.tech_.currentTime(),t=this.tech_.buffered(),this.lastRecordedTime===e&&(!t.length||e+kl>=t.end(t.length-1))?this.techWaiting_():void(5<=this.consecutiveUpdates&&e===this.lastRecordedTime?(this.consecutiveUpdates++,this.waiting_()):e===this.lastRecordedTime?this.consecutiveUpdates++:(this.consecutiveUpdates=0,this.lastRecordedTime=e))}resetTimeUpdate_(){this.consecutiveUpdates=0}fixesBadSeeks_(){if(!this.tech_.seeking())return!1;var e=this.seekable(),t=this.tech_.currentTime();let i;if(this.afterSeekableWindow_(e,t,this.media(),this.allowSeeksWithinUnsafeLiveWindow)&&(s=e.end(e.length-1),i=s),this.beforeSeekableWindow_(e,t)&&(s=e.start(0),i=s+(s===e.end(0)?0:kl)),"undefined"!=typeof i)this.logger_(`Trying to seek outside of seekable at time ${t} with `+`seekable range ${xl(e)}. Seeking to `+i+".");else{var s=this.playlistController_.sourceUpdater_,e=this.tech_.buffered(),r=s.audioBuffer?s.audioBuffered():null,s=s.videoBuffer?s.videoBuffered():null,n=this.media(),a=n.partTargetDuration||2*(n.targetDuration-Cl),o=[r,s];for(let e=0;e<o.length;e++)if(o[e])if(Sl(o[e],t)<a)return!1;if(0===(n=bl(e,t)).length)return!1;i=n.start(0)+kl,this.logger_(`Buffered region starts (${n.start(0)}) `+` just beyond seek point (${t}). Seeking to ${i}.`)}return this.tech_.setCurrentTime(i),!0}waiting_(){var e,t;this.techWaiting_()||(e=this.tech_.currentTime(),t=this.tech_.buffered(),(t=vl(t,e)).length&&e+3<=t.end(0)&&(this.resetTimeUpdate_(),this.tech_.setCurrentTime(e),this.logger_(`Stopped at ${e} while inside a buffered region `+`[${t.start(0)} -> ${t.end(0)}]. Attempting to resume `+"playback by seeking to the current time."),this.tech_.trigger({type:"usage",name:"vhs-unknown-waiting"})))}techWaiting_(){var e,t=this.seekable(),i=this.tech_.currentTime();return!!this.tech_.seeking()||(this.beforeSeekableWindow_(t,i)?(t=t.end(t.length-1),this.logger_(`Fell out of live window at time ${i}. Seeking to `+"live point (seekable end) "+t),this.resetTimeUpdate_(),this.tech_.setCurrentTime(t),this.tech_.trigger({type:"usage",name:"vhs-live-resync"}),!0):(t=this.tech_.vhs.playlistController_.sourceUpdater_,e=this.tech_.buffered(),this.videoUnderflow_({audioBuffered:t.audioBuffered(),videoBuffered:t.videoBuffered(),currentTime:i})?(this.resetTimeUpdate_(),this.tech_.setCurrentTime(i),this.tech_.trigger({type:"usage",name:"vhs-video-underflow"}),!0):0<(t=bl(e,i)).length&&(this.logger_(`Stopped at ${i} and seeking to `+t.start(0)),this.resetTimeUpdate_(),this.skipTheGap_(i),!0)))}afterSeekableWindow_(e,t,i,s=!1){if(!e.length)return!1;let r=e.end(e.length-1)+kl;var n=!i.endList,a="number"==typeof i.partTargetDuration;return t>(r=n&&(a||s)?e.end(e.length-1)+3*i.targetDuration:r)}beforeSeekableWindow_(e,t){return!!(e.length&&0<e.start(0)&&t<e.start(0)-this.liveRangeSafeTimeDelta)}videoUnderflow_({videoBuffered:t,audioBuffered:i,currentTime:s}){if(t){let e;var r,n;return t.length&&i.length?(r=vl(t,s-3),n=vl(t,s),(i=vl(i,s)).length&&!n.length&&r.length&&(e={start:r.end(0),end:i.end(0)})):bl(t,s).length||(e=this.gapFromVideoUnderflow_(t,s)),!!e&&(this.logger_(`Encountered a gap in video from ${e.start} to ${e.end}. `+"Seeking to current time "+s),!0)}}skipTheGap_(e){var t=this.tech_.buffered(),i=this.tech_.currentTime(),t=bl(t,i);this.resetTimeUpdate_(),0!==t.length&&i===e&&(this.logger_("skipTheGap_:","currentTime:",i,"scheduled currentTime:",e,"nextRange start:",t.start(0)),this.tech_.setCurrentTime(t.start(0)+Cl),this.tech_.trigger({type:"usage",name:"vhs-gap-skip"}))}gapFromVideoUnderflow_(e,t){var i=function(t){if(t.length<2)return _l();var i=[];for(let e=1;e<t.length;e++){var s=t.end(e-1),r=t.start(e);i.push([s,r])}return _l(i)}(e);for(let e=0;e<i.length;e++){var s=i.start(e),r=i.end(e);if(t-s<4&&2<t-s)return{start:s,end:r}}return null}}const mu={errorInterval:30,getSource(e){return e(this.tech({IWillNotUseThisInPlugins:!0}).currentSource_||this.currentSource())}},gu=function(t,e){let i=0,s=0;function r(e){null!=e&&(s=t.duration()!==1/0&&t.currentTime()||0,t.one("loadedmetadata",l),t.src(e),t.trigger({type:"usage",name:"vhs-error-reload"}),t.play())}function n(){if(Date.now()-i<1e3*o.errorInterval)t.trigger({type:"usage",name:"vhs-error-reload-canceled"});else{if(o.getSource&&"function"==typeof o.getSource)return i=Date.now(),o.getSource.call(t,r);b.log.error("ERROR: reloadSourceOnError - The option getSource must be a function!")}}function a(){t.off("loadedmetadata",l),t.off("error",n),t.off("dispose",a)}const o=L(mu,e),l=(t.ready(()=>{t.trigger({type:"usage",name:"vhs-error-reload-initialized"})}),function(){s&&t.currentTime(s)});t.on("error",n),t.on("dispose",a),t.reloadSourceOnError=function(e){a(),gu(t,e)}};function fu(t,e){var i=e.media();let s=-1;for(let e=0;e<t.length;e++)if(t[e].id===i.id){s=e;break}t.selectedIndex_=s,t.trigger({selectedIndex:s,type:"change"})}const R={PlaylistLoader:od,Playlist:Gl,utils:cr,STANDARD_PLAYLIST_SELECTOR:fh,INITIAL_PLAYLIST_SELECTOR:function(){var e=this.playlists.main.playlists.filter(Gl.isEnabled),e=(mh(e,(e,t)=>Yd(e,t)),e.filter(e=>!!Xd(this.playlists.main,e).video));return e[0]||null},lastBandwidthSelector:fh,movingAverageBandwidthSelector:function(t){let i=-1,s=-1;if(t<0||1<t)throw new Error("Moving average bandwidth decay must be between 0 and 1.");return function(){let e=this.useDevicePixelRatio&&window.devicePixelRatio||1;return isNaN(this.customPixelRatio)||(e=this.customPixelRatio),i<0&&(i=this.systemBandwidth,s=this.systemBandwidth),0<this.systemBandwidth&&this.systemBandwidth!==s&&(i=t*this.systemBandwidth+(1-t)*i,s=this.systemBandwidth),gh(this.playlists.main,i,parseInt(Kd(this.tech_.el(),"width"),10)*e,parseInt(Kd(this.tech_.el(),"height"),10)*e,this.limitRenditionByPlayerDimensions,this.playlistController_)}},comparePlaylistBandwidth:Yd,comparePlaylistResolution:function(e,t){let i,s;return i=(i=e.attributes.RESOLUTION&&e.attributes.RESOLUTION.width?e.attributes.RESOLUTION.width:i)||window.Number.MAX_VALUE,s=(s=t.attributes.RESOLUTION&&t.attributes.RESOLUTION.width?t.attributes.RESOLUTION.width:s)||window.Number.MAX_VALUE,i===s&&e.attributes.BANDWIDTH&&t.attributes.BANDWIDTH?e.attributes.BANDWIDTH-t.attributes.BANDWIDTH:i-s},xhr:dd()},yu=(Object.keys(O).forEach(t=>{Object.defineProperty(R,t,{get(){return b.log.warn(`using Vhs.${t} is UNSAFE be sure you know what you are doing`),O[t]},set(e){b.log.warn(`using Vhs.${t} is UNSAFE be sure you know what you are doing`),"number"!=typeof e||e<0?b.log.warn(`value of Vhs.${t} must be greater than or equal to 0`):O[t]=e}})}),"videojs-vhs"),_u=(R.canPlaySource=function(){return b.log.warn("VHS is no longer a tech. Please remove it from your player's techOrder.")},({player:s,sourceKeySystems:e,audioMedia:t,mainPlaylists:i})=>{if(!s.eme.initializeMediaKeys)return Promise.resolve();var r,t=t?i.concat([t]):i,t=(i=t,r=Object.keys(e),i.reduce((e,s)=>{var t;return s.contentProtection&&(t=r.reduce((e,t)=>{var i=s.contentProtection[t];return i&&i.pssh&&(e[t]={pssh:i.pssh}),e},{}),Object.keys(t).length)&&e.push(t),e},[]));const n=[],a=[];return t.forEach(e=>{a.push(new Promise((e,t)=>{s.tech_.one("keysessioncreated",e)})),n.push(new Promise((t,i)=>{s.eme.initializeMediaKeys({keySystems:e},e=>{e?i(e):t()})}))}),Promise.race([Promise.all(n),Promise.race(a)])}),vu=({player:e,sourceKeySystems:t,media:i,audioMedia:s})=>{t=((e,t,i)=>{if(!e)return e;let s={};t&&t.attributes&&t.attributes.CODECS&&(s=uh(yn(t.attributes.CODECS))),i&&i.attributes&&i.attributes.CODECS&&(s.audio=i.attributes.CODECS);var r=_n(s.video),n=_n(s.audio),a={};for(const o in e)a[o]={},n&&(a[o].audioContentType=n),r&&(a[o].videoContentType=r),t.contentProtection&&t.contentProtection[o]&&t.contentProtection[o].pssh&&(a[o].pssh=t.contentProtection[o].pssh),"string"==typeof e[o]&&(a[o].url=e[o]);return L(e,a)})(t,i,s);return!(!t||(e.currentSource().keySystems=t)&&!e.eme&&(b.log.warn("DRM encrypted source cannot be decrypted without a DRM plugin"),1))},bu=()=>{if(!window.localStorage)return null;var e=window.localStorage.getItem(yu);if(!e)return null;try{return JSON.parse(e)}catch(e){return null}},Tu=(e,t)=>{e._requestCallbackSet||(e._requestCallbackSet=new Set),e._requestCallbackSet.add(t)},Su=(e,t)=>{e._responseCallbackSet||(e._responseCallbackSet=new Set),e._responseCallbackSet.add(t)},wu=(e,t)=>{e._requestCallbackSet&&(e._requestCallbackSet.delete(t),e._requestCallbackSet.size||delete e._requestCallbackSet)},Eu=(e,t)=>{e._responseCallbackSet&&(e._responseCallbackSet.delete(t),e._responseCallbackSet.size||delete e._responseCallbackSet)};R.supportsNativeHls=function(){if(!document||!document.createElement)return!1;const t=document.createElement("video");return!!b.getTech("Html5").isSupported()&&["application/vnd.apple.mpegurl","audio/mpegurl","audio/x-mpegurl","application/x-mpegurl","video/x-mpegurl","video/mpegurl","application/mpegurl"].some(function(e){return/maybe|probably/i.test(t.canPlayType(e))})}(),R.supportsNativeDash=!!(document&&document.createElement&&b.getTech("Html5").isSupported())&&/maybe|probably/i.test(document.createElement("video").canPlayType("application/dash+xml")),R.supportsTypeNatively=e=>"hls"===e?R.supportsNativeHls:"dash"===e&&R.supportsNativeDash,R.isSupported=function(){return b.log.warn("VHS is no longer a tech. Please remove it from your player's techOrder.")},R.xhr.onRequest=function(e){Tu(R.xhr,e)},R.xhr.onResponse=function(e){Su(R.xhr,e)},R.xhr.offRequest=function(e){wu(R.xhr,e)},R.xhr.offResponse=function(e){Eu(R.xhr,e)};class Cu extends b.getComponent("Component"){constructor(e,t,i){if(super(t,i.vhs),"number"==typeof i.initialBandwidth&&(this.options_.bandwidth=i.initialBandwidth),this.logger_=yl("VhsHandler"),t.options_&&t.options_.playerId&&(i=b.getPlayer(t.options_.playerId),this.player_=i),this.tech_=t,this.source_=e,this.stats={},this.ignoreNextSeekingEvent_=!1,this.setOptions_(),this.options_.overrideNative&&t.overrideNativeAudioTracks&&t.overrideNativeVideoTracks)t.overrideNativeAudioTracks(!0),t.overrideNativeVideoTracks(!0);else if(this.options_.overrideNative&&(t.featuresNativeVideoTracks||t.featuresNativeAudioTracks))throw new Error("Overriding native VHS requires emulated tracks. See https://git.io/vMpjB");this.on(document,["fullscreenchange","webkitfullscreenchange","mozfullscreenchange","MSFullscreenChange"],e=>{var t=document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement;t&&t.contains(this.tech_.el())?this.playlistController_.fastQualityChange_():this.playlistController_.checkABR_()}),this.on(this.tech_,"seeking",function(){this.ignoreNextSeekingEvent_?this.ignoreNextSeekingEvent_=!1:this.setCurrentTime(this.tech_.currentTime())}),this.on(this.tech_,"error",function(){this.tech_.error()&&this.playlistController_&&this.playlistController_.pauseLoading()}),this.on(this.tech_,"play",this.play)}setOptions_(e={}){this.options_=L(this.options_,e),this.options_.withCredentials=this.options_.withCredentials||!1,this.options_.limitRenditionByPlayerDimensions=!1!==this.options_.limitRenditionByPlayerDimensions,this.options_.useDevicePixelRatio=this.options_.useDevicePixelRatio||!1,this.options_.useBandwidthFromLocalStorage="undefined"!=typeof this.source_.useBandwidthFromLocalStorage?this.source_.useBandwidthFromLocalStorage:this.options_.useBandwidthFromLocalStorage||!1,this.options_.useForcedSubtitles=this.options_.useForcedSubtitles||!1,this.options_.useNetworkInformationApi=this.options_.useNetworkInformationApi||!1,this.options_.useDtsForTimestampOffset=this.options_.useDtsForTimestampOffset||!1,this.options_.customTagParsers=this.options_.customTagParsers||[],this.options_.customTagMappers=this.options_.customTagMappers||[],this.options_.cacheEncryptionKeys=this.options_.cacheEncryptionKeys||!1,this.options_.llhls=!1!==this.options_.llhls,this.options_.bufferBasedABR=this.options_.bufferBasedABR||!1,"number"!=typeof this.options_.playlistExclusionDuration&&(this.options_.playlistExclusionDuration=60),"number"!=typeof this.options_.bandwidth&&this.options_.useBandwidthFromLocalStorage&&((e=bu())&&e.bandwidth&&(this.options_.bandwidth=e.bandwidth,this.tech_.trigger({type:"usage",name:"vhs-bandwidth-from-local-storage"})),e)&&e.throughput&&(this.options_.throughput=e.throughput,this.tech_.trigger({type:"usage",name:"vhs-throughput-from-local-storage"})),"number"!=typeof this.options_.bandwidth&&(this.options_.bandwidth=O.INITIAL_BANDWIDTH),this.options_.enableLowInitialPlaylist=this.options_.enableLowInitialPlaylist&&this.options_.bandwidth===O.INITIAL_BANDWIDTH,["withCredentials","useDevicePixelRatio","customPixelRatio","limitRenditionByPlayerDimensions","bandwidth","customTagParsers","customTagMappers","cacheEncryptionKeys","playlistSelector","initialPlaylistSelector","bufferBasedABR","liveRangeSafeTimeDelta","llhls","useForcedSubtitles","useNetworkInformationApi","useDtsForTimestampOffset","exactManifestTimings","leastPixelDiffSelector"].forEach(e=>{"undefined"!=typeof this.source_[e]&&(this.options_[e]=this.source_[e])}),this.limitRenditionByPlayerDimensions=this.options_.limitRenditionByPlayerDimensions,this.useDevicePixelRatio=this.options_.useDevicePixelRatio;e=this.options_.customPixelRatio;"number"==typeof e&&0<=e&&(this.customPixelRatio=e)}setOptions(e={}){this.setOptions_(e)}src(e,t){e&&(this.setOptions_(),this.options_.src=0===(e=this.source_.src).toLowerCase().indexOf("data:application/vnd.videojs.vhs+json,")?JSON.parse(e.substring(e.indexOf(",")+1)):e,this.options_.tech=this.tech_,this.options_.externVhs=R,this.options_.sourceType=hn(t),this.options_.seekTo=e=>{this.tech_.setCurrentTime(e)},this.playlistController_=new hu(this.options_),e=L({liveRangeSafeTimeDelta:kl},this.options_,{seekable:()=>this.seekable(),media:()=>this.playlistController_.media(),playlistController:this.playlistController_}),this.playbackWatcher_=new pu(e),this.playlistController_.on("error",()=>{var e=b.players[this.tech_.options_.playerId];let t=this.playlistController_.error;"object"!=typeof t||t.code?"string"==typeof t&&(t={message:t,code:3}):t.code=3,e.error(t)}),t=this.options_.bufferBasedABR?R.movingAverageBandwidthSelector(.55):R.STANDARD_PLAYLIST_SELECTOR,this.playlistController_.selectPlaylist=(this.selectPlaylist||t).bind(this),this.playlistController_.selectInitialPlaylist=R.INITIAL_PLAYLIST_SELECTOR.bind(this),this.playlists=this.playlistController_.mainPlaylistLoader_,this.mediaSource=this.playlistController_.mediaSource,Object.defineProperties(this,{selectPlaylist:{get(){return this.playlistController_.selectPlaylist},set(e){this.playlistController_.selectPlaylist=e.bind(this)}},throughput:{get(){return this.playlistController_.mainSegmentLoader_.throughput.rate},set(e){this.playlistController_.mainSegmentLoader_.throughput.rate=e,this.playlistController_.mainSegmentLoader_.throughput.count=1}},bandwidth:{get(){let e=this.playlistController_.mainSegmentLoader_.bandwidth;var t=window.navigator.connection||window.navigator.mozConnection||window.navigator.webkitConnection;return this.options_.useNetworkInformationApi&&t&&(t=1e3*t.downlink*1e3,e=1e7<=t&&1e7<=e?Math.max(e,t):t),e},set(e){this.playlistController_.mainSegmentLoader_.bandwidth=e,this.playlistController_.mainSegmentLoader_.throughput={rate:0,count:0}}},systemBandwidth:{get(){var e=1/(this.bandwidth||1);let t;return t=0<this.throughput?1/this.throughput:0,Math.floor(1/(e+t))},set(){b.log.error('The "systemBandwidth" property is read-only')}}}),this.options_.bandwidth&&(this.bandwidth=this.options_.bandwidth),this.options_.throughput&&(this.throughput=this.options_.throughput),Object.defineProperties(this.stats,{bandwidth:{get:()=>this.bandwidth||0,enumerable:!0},mediaRequests:{get:()=>this.playlistController_.mediaRequests_()||0,enumerable:!0},mediaRequestsAborted:{get:()=>this.playlistController_.mediaRequestsAborted_()||0,enumerable:!0},mediaRequestsTimedout:{get:()=>this.playlistController_.mediaRequestsTimedout_()||0,enumerable:!0},mediaRequestsErrored:{get:()=>this.playlistController_.mediaRequestsErrored_()||0,enumerable:!0},mediaTransferDuration:{get:()=>this.playlistController_.mediaTransferDuration_()||0,enumerable:!0},mediaBytesTransferred:{get:()=>this.playlistController_.mediaBytesTransferred_()||0,enumerable:!0},mediaSecondsLoaded:{get:()=>this.playlistController_.mediaSecondsLoaded_()||0,enumerable:!0},mediaAppends:{get:()=>this.playlistController_.mediaAppends_()||0,enumerable:!0},mainAppendsToLoadedData:{get:()=>this.playlistController_.mainAppendsToLoadedData_()||0,enumerable:!0},audioAppendsToLoadedData:{get:()=>this.playlistController_.audioAppendsToLoadedData_()||0,enumerable:!0},appendsToLoadedData:{get:()=>this.playlistController_.appendsToLoadedData_()||0,enumerable:!0},timeToLoadedData:{get:()=>this.playlistController_.timeToLoadedData_()||0,enumerable:!0},buffered:{get:()=>Al(this.tech_.buffered()),enumerable:!0},currentTime:{get:()=>this.tech_.currentTime(),enumerable:!0},currentSource:{get:()=>this.tech_.currentSource_,enumerable:!0},currentTech:{get:()=>this.tech_.name_,enumerable:!0},duration:{get:()=>this.tech_.duration(),enumerable:!0},main:{get:()=>this.playlists.main,enumerable:!0},playerDimensions:{get:()=>this.tech_.currentDimensions(),enumerable:!0},seekable:{get:()=>Al(this.tech_.seekable()),enumerable:!0},timestamp:{get:()=>Date.now(),enumerable:!0},videoPlaybackQuality:{get:()=>this.tech_.getVideoPlaybackQuality(),enumerable:!0}}),this.tech_.one("canplay",this.playlistController_.setupFirstPlay.bind(this.playlistController_)),this.tech_.on("bandwidthupdate",()=>{if(this.options_.useBandwidthFromLocalStorage){var e={bandwidth:this.bandwidth,throughput:Math.round(this.throughput)};if(window.localStorage){var t=(t=bu())?L(t,e):e;try{window.localStorage.setItem(yu,JSON.stringify(t))}catch(e){return}}}}),this.playlistController_.on("selectedinitialmedia",()=>{var i;(i=this).representations=()=>{var e=i.playlistController_.main(),e=Wl(e)?i.playlistController_.getAudioTrackPlaylists_():e.playlists;return e?e.filter(e=>!ql(e)).map((e,t)=>new uu(i,e,e.id)):[]}}),this.playlistController_.sourceUpdater_.on("createdsourcebuffers",()=>{this.setupEme_()}),this.on(this.playlistController_,"progress",function(){this.tech_.trigger("progress")}),this.on(this.playlistController_,"firstplay",function(){this.ignoreNextSeekingEvent_=!0}),this.setupQualityLevels_(),this.tech_.el())&&(this.mediaSourceUrl_=window.URL.createObjectURL(this.playlistController_.mediaSource),this.tech_.src(this.mediaSourceUrl_))}createKeySessions_(){var e=this.playlistController_.mediaTypes_.AUDIO.activePlaylistLoader;this.logger_("waiting for EME key session creation"),_u({player:this.player_,sourceKeySystems:this.source_.keySystems,audioMedia:e&&e.media(),mainPlaylists:this.playlists.main.playlists}).then(()=>{this.logger_("created EME key session"),this.playlistController_.sourceUpdater_.initializedEme()}).catch(e=>{this.logger_("error while creating EME key session",e),this.player_.error({message:"Failed to initialize media keys for EME",code:3,metadata:{errorType:b.Error.EMEKeySessionCreationError}})})}handleWaitingForKey_(){this.logger_("waitingforkey fired, attempting to create any new key sessions"),this.createKeySessions_()}setupEme_(){var e=this.playlistController_.mediaTypes_.AUDIO.activePlaylistLoader,e=vu({player:this.player_,sourceKeySystems:this.source_.keySystems,media:this.playlists.media(),audioMedia:e&&e.media()});this.player_.tech_.on("keystatuschange",e=>{this.playlistController_.updatePlaylistByKeyStatus(e.keyId,e.status)}),this.handleWaitingForKey_=this.handleWaitingForKey_.bind(this),this.player_.tech_.on("waitingforkey",this.handleWaitingForKey_),e?this.createKeySessions_():this.playlistController_.sourceUpdater_.initializedEme()}setupQualityLevels_(){var e=b.players[this.tech_.options_.playerId];e&&e.qualityLevels&&!this.qualityLevels_&&(this.qualityLevels_=e.qualityLevels(),this.playlistController_.on("selectedinitialmedia",()=>{var t,e;t=this.qualityLevels_,(e=this).representations().forEach(e=>{t.addQualityLevel(e)}),fu(t,e.playlists)}),this.playlists.on("mediachange",()=>{fu(this.qualityLevels_,this.playlists)}))}static version(){return{"@videojs/http-streaming":"3.12.1","mux.js":"7.0.3","mpd-parser":"1.3.0","m3u8-parser":"7.1.0","aes-decrypter":"4.0.1"}}version(){return this.constructor.version()}canChangeType(){return qh.canChangeType()}play(){this.playlistController_.play()}setCurrentTime(e){this.playlistController_.setCurrentTime(e)}duration(){return this.playlistController_.duration()}seekable(){return this.playlistController_.seekable()}dispose(){this.playbackWatcher_&&this.playbackWatcher_.dispose(),this.playlistController_&&this.playlistController_.dispose(),this.qualityLevels_&&this.qualityLevels_.dispose(),this.tech_&&this.tech_.vhs&&delete this.tech_.vhs,this.mediaSourceUrl_&&window.URL.revokeObjectURL&&(window.URL.revokeObjectURL(this.mediaSourceUrl_),this.mediaSourceUrl_=null),this.tech_&&this.tech_.off("waitingforkey",this.handleWaitingForKey_),super.dispose()}convertToProgramTime(e,t){return vd({playlist:this.playlistController_.media(),time:e,callback:t})}seekToProgramTime(e,t,i=!0,s=2){return bd({programTime:e,playlist:this.playlistController_.media(),retryCount:s,pauseAfterSeek:i,seekTo:this.options_.seekTo,tech:this.options_.tech,callback:t})}setupXhrHooks_(){this.xhr.onRequest=e=>{Tu(this.xhr,e)},this.xhr.onResponse=e=>{Su(this.xhr,e)},this.xhr.offRequest=e=>{wu(this.xhr,e)},this.xhr.offResponse=e=>{Eu(this.xhr,e)},this.player_.trigger("xhr-hooks-ready")}}const ku={name:"videojs-http-streaming",VERSION:"3.12.1",canHandleSource(e,t={}){t=L(b.options,t);return ku.canPlayType(e.type,t)},handleSource(e,t,i={}){i=L(b.options,i);return t.vhs=new Cu(e,t,i),t.vhs.xhr=dd(),t.vhs.setupXhrHooks_(),t.vhs.src(e.src,e.type),t.vhs},canPlayType(e,t){e=hn(e);return e&&(t=ku.getOverrideNative(t),!R.supportsTypeNatively(e)||t)?"maybe":""},getOverrideNative(e={}){var{vhs:e={}}=e,t=!(b.browser.IS_ANY_SAFARI||b.browser.IS_IOS),{overrideNative:e=t}=e;return e}};return ln("avc1.4d400d,mp4a.40.2")&&b.getTech("Html5").registerSourceHandler(ku,0),b.VhsHandler=Cu,b.VhsSourceHandler=ku,b.Vhs=R,b.use||b.registerComponent("Vhs",R),b.options.vhs=b.options.vhs||{},b.getPlugin&&b.getPlugin("reloadSourceOnError")||b.registerPlugin("reloadSourceOnError",function(e){gu(this,e)}),b});
\ No newline at end of file
diff --git a/priv/static/video.js/examples/elephantsdream/captions.ar.vtt b/priv/static/video.js/examples/elephantsdream/captions.ar.vtt
new file mode 100644
index 0000000..a68a442
--- /dev/null
+++ b/priv/static/video.js/examples/elephantsdream/captions.ar.vtt
@@ -0,0 +1,330 @@
+WEBVTT
+
+1
+00:00:15.042 --> 00:00:18.625
+...إلى... إلى الشمال يمكن أن نرى
+...يمكن أن نرى الـ
+
+2
+00:00:18.750 --> 00:00:20.958
+...إلى اليمين يمكن أن نرى الـ
+
+3
+00:00:21.000 --> 00:00:23.125
+طاحنات الرؤوس...
+
+4
+00:00:23.208 --> 00:00:25.208
+كل شيئ آمن
+آمن كلية
+
+5
+00:00:26.333 --> 00:00:28.333
+إيمو ؟
+
+6
+00:00:28.875 --> 00:00:30.958
+! حذاري
+
+7
+00:00:47.125 --> 00:00:49.167
+هل أصبت ؟
+
+8
+00:00:52.125 --> 00:00:54.833
+...لا أظن ذلك
+وأنت ؟
+
+9
+00:00:55.625 --> 00:00:57.625
+أنا بخير
+
+10
+00:00:57.667 --> 00:01:01.667
+،قم يا إيمو
+المكان هنا غير آمن
+
+11
+00:01:02.208 --> 00:01:04.083
+لنذهب
+
+12
+00:01:04.167 --> 00:01:06.167
+وماذا بعد ؟
+
+13
+00:01:06.167 --> 00:01:08.583
+...سترى...  سترى
+
+14
+00:01:16.167 --> 00:01:18.375
+إيمو، من هنا
+
+15
+00:01:34.958 --> 00:01:37.000
+! إتبعني
+
+16
+00:02:11.125 --> 00:02:13.625
+! أسرع يا إيمو
+
+17
+00:02:48.375 --> 00:02:50.375
+! لست منتبها
+
+18
+00:02:50.750 --> 00:02:54.500
+...أريد فقط أن أجيب الـ
+الهاتف...
+
+19
+00:02:55.000 --> 00:02:58.500
+،إيمو، أنظر
+أقصد أنصت
+
+20
+00:02:59.750 --> 00:03:03.292
+عليك أن تتعلم الإصغاء
+
+21
+00:03:03.625 --> 00:03:05.917
+هذا ليس ضربا من اللهو
+
+22
+00:03:06.083 --> 00:03:09.958
+...إنك
+أقصد إننا قد نموت بسهولة في هذا المكان
+
+23
+00:03:10.208 --> 00:03:14.125
+...أنصت
+أنصت إلى أصوات الآلة
+
+24
+00:03:18.333 --> 00:03:20.417
+أنصت إلى نَفَسِك
+
+25
+00:04:27.208 --> 00:04:29.250
+ألا تمل أبدا من هذا ؟
+
+26
+00:04:29.583 --> 00:04:31.583
+أمل ؟!؟
+نعم -
+
+27
+00:04:31.750 --> 00:04:34.667
+إيمو؛ الآلة في دقتها... مثل الساعة
+
+28
+00:04:35.500 --> 00:04:37.708
+...حركة ناشزة واحدة قد
+
+29
+00:04:37.833 --> 00:04:39.875
+تطرحك معجونا
+
+30
+00:04:41.042 --> 00:04:43.083
+...أو ليست
+
+31
+00:04:43.125 --> 00:04:46.542
+! عجينة يا إيمو
+أ هذا ما تريد ؟ أن تصبح عجينة ؟
+
+32
+00:04:48.083 --> 00:04:50.083
+أيمو، أ هذا هدفك في الحياة ؟
+
+33
+00:04:50.583 --> 00:04:52.667
+أن تصير عجينة ؟
+
+34
+00:05:41.833 --> 00:05:43.875
+إيمو، أغمض عينيك
+
+35
+00:05:44.917 --> 00:05:47.000
+لماذا ؟
+! الآن -
+
+36
+00:05:53.750 --> 00:05:56.042
+حسن
+
+37
+00:05:59.542 --> 00:06:02.792
+ماذا ترى إلى شمالك يا إيمو ؟
+
+38
+00:06:04.417 --> 00:06:06.500
+لا شيئ
+حقا ؟ -
+
+39
+00:06:06.542 --> 00:06:08.625
+لا، لا شيئ البتة
+
+40
+00:06:08.625 --> 00:06:12.417
+وماذا ترى إلى جهتك اليمنى يا إيمو ؟
+
+41
+00:06:13.667 --> 00:06:17.833
+،نفس الشيئ يا بروغ
+! نفس الشيئ بالضبط؛ لا شيئ
+
+42
+00:06:17.875 --> 00:06:19.917
+عظيم
+
+43
+00:06:40.625 --> 00:06:42.958
+أنصت يا بروغ ! هل تسمع ذلك ؟
+
+44
+00:06:43.625 --> 00:06:45.625
+هل نستطيع الذهاب إلى هناك ؟
+
+45
+00:06:45.708 --> 00:06:47.792
+هناك ؟
+نعم -
+
+46
+00:06:47.833 --> 00:06:49.833
+إنه غير آمن يا إيمو
+
+47
+00:06:49.917 --> 00:06:52.500
+صدقني، إنه غير آمن
+
+48
+00:06:53.292 --> 00:06:55.375
+...لكن لعلي أستطيع
+
+49
+00:06:55.417 --> 00:06:57.417
+...لكن
+! لا -
+
+50
+00:06:57.667 --> 00:06:59.667
+! لا
+
+51
+00:07:00.875 --> 00:07:03.750
+هل من أسئلة أخرى يا إيمو ؟
+
+52
+00:07:04.250 --> 00:07:06.333
+لا
+
+53
+00:07:09.458 --> 00:07:11.542
+...إيمو
+نعم -
+
+54
+00:07:11.875 --> 00:07:13.958
+...لماذا يا إيمو... لماذا
+
+55
+00:07:15.292 --> 00:07:18.792
+لماذا لا تستطيع أن ترى حُسْن هذا المكان
+
+56
+00:07:18.833 --> 00:07:20.833
+...والطريقة التي يعمل بها
+
+57
+00:07:20.875 --> 00:07:24.000
+وكيف... وكيف أنه غاية في الكمال
+
+58
+00:07:24.083 --> 00:07:27.417
+! لا يا بروغ، لا أرى ذلك
+
+59
+00:07:27.542 --> 00:07:30.333
+لا أرى ذلك لأنه لا يوجد شيئ هناك
+
+60
+00:07:31.500 --> 00:07:35.333
+ثم لماذا يجب علي أن أسلم حياتي
+لشيئ لا وجود له ؟
+
+61
+00:07:35.583 --> 00:07:37.625
+هل يمكنك أن تخبرني ؟
+
+62
+00:07:37.708 --> 00:07:39.750
+! أجبني
+
+63
+00:07:43.208 --> 00:07:47.333
+...بروغ
+! أنت معتوه يا هذا
+
+64
+00:07:47.375 --> 00:07:49.417
+! إبعد عني
+
+65
+00:07:52.583 --> 00:07:55.083
+! لا يا إيمو ! إنه فخ
+
+66
+00:07:55.833 --> 00:07:57.875
+...إنه فخ
+
+67
+00:07:57.917 --> 00:08:01.750
+إلى جنبك الأيسر يمكنك أن ترى
+حدائق بابل المعلقة
+
+68
+00:08:02.250 --> 00:08:04.292
+هل تعجبك كفخ ؟
+
+69
+00:08:05.458 --> 00:08:07.542
+لا يا أيمو
+
+70
+00:08:09.417 --> 00:08:12.792
+...إلى جنبك الأيمن يمكنك رؤية
+حزر ماذا ؟
+
+71
+00:08:13.000 --> 00:08:15.042
+! عملاق رودس
+
+72
+00:08:15.125 --> 00:08:16.417
+! لا
+
+73
+00:08:16.458 --> 00:08:20.500
+،عملاق رودس
+وهو هنا خصيصا من أجلك يا بروغ
+
+74
+00:08:20.583 --> 00:08:22.583
+فقط من أجلك
+
+75
+00:08:51.333 --> 00:08:53.375
+إنه هناك
+
+76
+00:08:53.417 --> 00:08:55.500
+أنا أؤكد لك... إيمو
+
+77
+00:08:57.333 --> 00:09:00.000
+...إنه
diff --git a/priv/static/video.js/examples/elephantsdream/captions.en.vtt b/priv/static/video.js/examples/elephantsdream/captions.en.vtt
new file mode 100644
index 0000000..8b83d28
--- /dev/null
+++ b/priv/static/video.js/examples/elephantsdream/captions.en.vtt
@@ -0,0 +1,334 @@
+WEBVTT
+
+1
+00:00:15.000 --> 00:00:17.951
+At the left we can see...
+
+2
+00:00:18.166 --> 00:00:20.083
+At the right we can see the...
+
+3
+00:00:20.119 --> 00:00:21.962
+...the head-snarlers
+
+4
+00:00:21.999 --> 00:00:24.368
+Everything is safe.
+Perfectly safe.
+
+5
+00:00:24.582 --> 00:00:27.035
+Emo?
+
+6
+00:00:28.206 --> 00:00:29.996
+Watch out!
+
+7
+00:00:47.037 --> 00:00:48.494
+Are you hurt?
+
+8
+00:00:51.994 --> 00:00:53.949
+I don't think so.
+You?
+
+9
+00:00:55.160 --> 00:00:56.985
+I'm Ok.
+
+10
+00:00:57.118 --> 00:01:01.111
+Get up.
+Emo. it's not safe here.
+
+11
+00:01:02.034 --> 00:01:03.573
+Let's go.
+
+12
+00:01:03.610 --> 00:01:05.114
+What's next?
+
+13
+00:01:05.200 --> 00:01:09.146
+You'll see!
+
+14
+00:01:16.032 --> 00:01:18.022
+Emo.
+This way.
+
+15
+00:01:34.237 --> 00:01:35.481
+Follow me!
+
+16
+00:02:11.106 --> 00:02:12.480
+Hurry Emo!
+
+17
+00:02:48.059 --> 00:02:49.930
+You're not paying attention!
+
+18
+00:02:50.142 --> 00:02:54.052
+I just want to answer the...
+...phone.
+
+19
+00:02:54.974 --> 00:02:57.972
+Emo. look.
+I mean listen.
+
+20
+00:02:59.140 --> 00:03:02.008
+You have to learn to listen.
+
+21
+00:03:03.140 --> 00:03:04.965
+This is not some game.
+
+22
+00:03:05.056 --> 00:03:09.345
+You. I mean we.
+we could easily die out here.
+
+23
+00:03:10.014 --> 00:03:13.959
+Listen.
+listen to the sounds of the machine.
+
+24
+00:03:18.054 --> 00:03:20.009
+Listen to your breathing.
+
+25
+00:04:27.001 --> 00:04:28.956
+Well. don't you ever get tired of this?
+
+26
+00:04:29.084 --> 00:04:30.909
+Tired?!?
+
+27
+00:04:31.126 --> 00:04:34.491
+Emo. the machine is like clockwork.
+
+28
+00:04:35.083 --> 00:04:37.074
+One move out of place...
+
+29
+00:04:37.166 --> 00:04:39.121
+...and you're ground to a pulp.
+
+30
+00:04:40.958 --> 00:04:42.004
+But isn't it -
+
+31
+00:04:42.041 --> 00:04:46.034
+Pulp. Emo!
+Is that what you want. pulp?
+
+32
+00:04:47.040 --> 00:04:48.995
+Emo. your goal in life...
+
+33
+00:04:50.081 --> 00:04:51.953
+...pulp?
+
+34
+00:05:41.156 --> 00:05:43.028
+Emo. close your eyes.
+
+35
+00:05:44.156 --> 00:05:46.027
+Why?
+- Now!
+
+36
+00:05:51.155 --> 00:05:52.102
+Ok.
+
+37
+00:05:53.113 --> 00:05:54.688
+Good.
+
+38
+00:05:59.070 --> 00:06:02.103
+What do you see at your left side. Emo?
+
+39
+00:06:04.028 --> 00:06:05.899
+Nothing.
+- Really?
+
+40
+00:06:06.027 --> 00:06:07.105
+No. nothing at all.
+
+41
+00:06:07.944 --> 00:06:11.984
+And at your right.
+what do you see at your right side. Emo?
+
+42
+00:06:13.151 --> 00:06:16.102
+The same Proog. exactly the same...
+
+43
+00:06:16.942 --> 00:06:19.098
+...nothing!
+- Great.
+
+44
+00:06:40.105 --> 00:06:42.724
+Listen Proog! Do you hear that!
+
+45
+00:06:43.105 --> 00:06:44.894
+Can we go here?
+
+46
+00:06:44.979 --> 00:06:47.894
+There?
+It isn't safe. Emo.
+
+47
+00:06:49.145 --> 00:06:52.013
+But...
+- Trust me. it's not.
+
+48
+00:06:53.020 --> 00:06:54.145
+Maybe I could...
+
+49
+00:06:54.181 --> 00:06:55.969
+No.
+
+50
+00:06:57.102 --> 00:06:59.934
+NO!
+
+51
+00:07:00.144 --> 00:07:03.058
+Any further questions. Emo?
+
+52
+00:07:03.976 --> 00:07:05.090
+No.
+
+53
+00:07:09.059 --> 00:07:10.089
+Emo?
+
+54
+00:07:11.142 --> 00:07:13.058
+Emo. why...
+
+55
+00:07:13.095 --> 00:07:14.022
+Emo...
+
+56
+00:07:14.058 --> 00:07:18.003
+...why can't you see
+the beauty of this place?
+
+57
+00:07:18.141 --> 00:07:20.048
+The way it works.
+
+58
+00:07:20.140 --> 00:07:23.895
+How perfect it is.
+
+59
+00:07:23.932 --> 00:07:26.964
+No. Proog. I don't see.
+
+60
+00:07:27.056 --> 00:07:29.970
+I don't see because there's nothing there.
+
+61
+00:07:31.055 --> 00:07:34.965
+And why should I trust my
+life to something that isn't there?
+
+62
+00:07:35.055 --> 00:07:36.926
+Well can you tell me that?
+
+63
+00:07:37.054 --> 00:07:38.926
+Answer me!
+
+64
+00:07:42.970 --> 00:07:44.000
+Proog...
+
+65
+00:07:45.053 --> 00:07:46.985
+...you're a sick man!
+
+66
+00:07:47.022 --> 00:07:48.918
+Stay away from me!
+
+67
+00:07:52.052 --> 00:07:54.884
+No! Emo! It's a trap!
+
+68
+00:07:55.135 --> 00:07:56.931
+Hah. it's a trap.
+
+69
+00:07:56.968 --> 00:08:01.043
+At the left side you can see
+the hanging gardens of Babylon!
+
+70
+00:08:01.967 --> 00:08:03.957
+How's that for a trap?
+
+71
+00:08:05.050 --> 00:08:06.922
+No. Emo.
+
+72
+00:08:09.008 --> 00:08:12.088
+At the right side you can see...
+...well guess what...
+
+73
+00:08:12.924 --> 00:08:14.665
+...the colossus of Rhodes!
+
+74
+00:08:15.132 --> 00:08:16.053
+No!
+
+75
+00:08:16.090 --> 00:08:21.919
+The colossus of Rhodes
+and it is here just for you Proog.
+
+76
+00:08:51.001 --> 00:08:52.923
+It is there...
+
+77
+00:08:52.959 --> 00:08:56.040
+I'm telling you.
+Emo...
+
+78
+00:08:57.000 --> 00:08:59.867
+...it is.
\ No newline at end of file
diff --git a/priv/static/video.js/examples/elephantsdream/captions.ja.vtt b/priv/static/video.js/examples/elephantsdream/captions.ja.vtt
new file mode 100644
index 0000000..4058648
--- /dev/null
+++ b/priv/static/video.js/examples/elephantsdream/captions.ja.vtt
@@ -0,0 +1,326 @@
+WEBVTT
+
+1
+00:00:15.042 --> 00:00:18.042
+左に見えるのは…
+
+2
+00:00:18.750 --> 00:00:20.333
+右に見えるのは…
+
+3
+00:00:20.417 --> 00:00:21.917
+…首刈り機
+
+4
+00:00:22.000 --> 00:00:24.625
+すべて安全
+完璧に安全だ
+
+5
+00:00:26.333 --> 00:00:27.333
+イーモ？
+
+6
+00:00:28.875 --> 00:00:30.250
+危ない！
+
+7
+00:00:47.125 --> 00:00:48.250
+ケガはないか？
+
+8
+00:00:51.917 --> 00:00:53.917
+ええ、多分…
+あなたは？
+
+9
+00:00:55.625 --> 00:00:57.125
+わしは平気だ
+
+10
+00:00:57.583 --> 00:01:01.667
+起きてくれイーモ
+ここは危ない
+
+11
+00:01:02.208 --> 00:01:03.667
+行こう
+
+12
+00:01:03.750 --> 00:01:04.917
+どこに？
+
+13
+00:01:05.875 --> 00:01:07.875
+すぐにわかるさ！
+
+14
+00:01:16.167 --> 00:01:18.375
+イーモ、こっちだ
+
+15
+00:01:34.958 --> 00:01:36.958
+ついて来るんだ！
+
+16
+00:02:11.583 --> 00:02:12.792
+イーモ、早く！
+
+17
+00:02:48.375 --> 00:02:50.083
+むやみにさわるな！
+
+18
+00:02:50.750 --> 00:02:54.500
+僕はただ、電話に
+…出ようと
+
+19
+00:02:55.000 --> 00:02:58.208
+イーモ、見るんだ…
+いや、聞いてくれ
+
+20
+00:02:59.750 --> 00:03:02.292
+君は「聞き方」を知る必要がある
+
+21
+00:03:03.625 --> 00:03:05.125
+これは遊びじゃない
+
+22
+00:03:06.167 --> 00:03:10.417
+我々はここでは
+たやすく死ぬ
+
+23
+00:03:11.208 --> 00:03:14.125
+機械の声を聞くんだ
+
+24
+00:03:18.333 --> 00:03:22.417
+君の息づかいを聞くんだ
+
+25
+00:04:27.208 --> 00:04:29.250
+そんなことして疲れない？
+
+26
+00:04:29.583 --> 00:04:31.083
+疲れる?!
+
+27
+00:04:31.750 --> 00:04:34.667
+この機械は非常に正確で
+
+28
+00:04:35.500 --> 00:04:37.708
+一つ間違えば…
+
+29
+00:04:37.833 --> 00:04:40.792
+…地面に落ちてバラバラだ
+
+30
+00:04:41.042 --> 00:04:42.375
+え、でも―
+
+31
+00:04:42.417 --> 00:04:46.542
+バラバラだぞ、イーモ！
+それでいいのか？
+
+32
+00:04:48.083 --> 00:04:50.000
+バラバラで死ぬんだぞ？
+
+33
+00:04:50.583 --> 00:04:52.250
+バラバラだ！
+
+34
+00:05:41.833 --> 00:05:43.458
+イーモ、目を閉じるんだ
+
+35
+00:05:44.917 --> 00:05:46.583
+なぜ？
+―早く！
+
+36
+00:05:53.750 --> 00:05:56.042
+それでいい
+
+37
+00:05:59.542 --> 00:06:03.792
+左に見えるものは何だ、イーモ？
+
+38
+00:06:04.417 --> 00:06:06.000
+え…何も
+―本当か？
+
+39
+00:06:06.333 --> 00:06:07.917
+全く何も
+
+40
+00:06:08.042 --> 00:06:12.833
+では右は
+何か見えるか、イーモ？
+
+41
+00:06:13.875 --> 00:06:16.917
+同じだよプルーグ、全く同じ…
+
+42
+00:06:17.083 --> 00:06:18.583
+何もない！
+
+43
+00:06:40.625 --> 00:06:43.208
+プルーグ！何か聞こえない？
+
+44
+00:06:43.625 --> 00:06:45.042
+あそこに行かないか？
+
+45
+00:06:45.208 --> 00:06:48.042
+あそこ？
+…安全じゃない
+
+46
+00:06:49.917 --> 00:06:52.500
+でも…
+―本当に危ないぞ
+
+47
+00:06:53.292 --> 00:06:54.792
+大丈夫だよ…
+
+48
+00:06:54.833 --> 00:06:56.333
+だめだ
+
+49
+00:06:57.667 --> 00:07:00.167
+だめだ！
+
+50
+00:07:00.875 --> 00:07:03.750
+まだ続ける気か、イーモ？
+
+51
+00:07:04.250 --> 00:07:05.917
+いいえ…
+
+52
+00:07:09.458 --> 00:07:10.833
+イーモ？
+
+53
+00:07:11.875 --> 00:07:13.542
+イーモ、なぜ…
+
+54
+00:07:13.583 --> 00:07:14.458
+イーモ…
+
+55
+00:07:14.500 --> 00:07:18.500
+…なぜここの美しさが
+見えない？
+
+56
+00:07:18.833 --> 00:07:20.750
+仕組みがこんなに…
+
+57
+00:07:20.875 --> 00:07:24.000
+こんなに完全なのに
+
+58
+00:07:24.083 --> 00:07:27.417
+もういいよ！プルーグ！
+
+59
+00:07:27.542 --> 00:07:30.333
+そこには何もないんだから
+
+60
+00:07:31.500 --> 00:07:35.333
+なぜ命を「ない」物に
+ゆだねなきゃ？
+
+61
+00:07:35.583 --> 00:07:37.125
+教えてくれないか？
+
+62
+00:07:37.500 --> 00:07:39.167
+さあ！
+
+63
+00:07:43.208 --> 00:07:44.583
+プルーグ…
+
+64
+00:07:45.500 --> 00:07:47.333
+あなたは病気なんだ
+
+65
+00:07:47.375 --> 00:07:49.208
+僕から離れてくれ
+
+66
+00:07:52.583 --> 00:07:55.083
+いかん！イーモ！ワナだ！
+
+67
+00:07:55.833 --> 00:07:57.167
+ワナだ？ ふーん
+
+68
+00:07:57.208 --> 00:08:01.750
+左に何が見える？
+バビロンの空中庭園！
+
+69
+00:08:02.250 --> 00:08:04.292
+これがワナとでも？
+
+70
+00:08:05.458 --> 00:08:07.125
+だめだ、イーモ
+
+71
+00:08:09.417 --> 00:08:12.792
+右にあるのは…
+…すごい！…
+
+72
+00:08:13.000 --> 00:08:14.750
+…ロードス島の巨像だ！
+
+73
+00:08:15.833 --> 00:08:16.708
+やめろ！
+
+74
+00:08:16.750 --> 00:08:22.167
+この巨像はあなたの物
+プルーグ、あなたのだよ
+
+75
+00:08:51.333 --> 00:08:53.167
+いってるじゃないか…
+
+76
+00:08:53.208 --> 00:08:55.500
+そこにあるって、イーモ…
+
+77
+00:08:57.333 --> 00:09:00.000
+…あるって
\ No newline at end of file
diff --git a/priv/static/video.js/examples/elephantsdream/captions.ru.vtt b/priv/static/video.js/examples/elephantsdream/captions.ru.vtt
new file mode 100644
index 0000000..aee7e49
--- /dev/null
+++ b/priv/static/video.js/examples/elephantsdream/captions.ru.vtt
@@ -0,0 +1,356 @@
+WEBVTT
+
+1
+00:00:14.958 --> 00:00:17.833
+Слева мы видим...
+
+2
+00:00:18.458 --> 00:00:20.208
+справа мы видим...
+
+3
+00:00:20.333 --> 00:00:21.875
+...голово-клацов.
+
+4
+00:00:22.000 --> 00:00:24.583
+всё в порядке.
+в полном порядке.
+
+5
+00:00:26.333 --> 00:00:27.333
+Имо?
+
+6
+00:00:28.833 --> 00:00:30.250
+Осторожно!
+
+7
+00:00:47.125 --> 00:00:48.250
+Ты не ранен?
+
+8
+00:00:51.875 --> 00:00:53.875
+Вроде нет...
+а ты?
+
+9
+00:00:55.583 --> 00:00:57.125
+Я в порядке.
+
+10
+00:00:57.542 --> 00:01:01.625
+Вставай.
+Имо. здесь не безопасно.
+
+11
+00:01:02.208 --> 00:01:03.625
+Пойдём.
+
+12
+00:01:03.708 --> 00:01:05.708
+Что дальше?
+
+13
+00:01:05.833 --> 00:01:07.833
+Ты увидишь!
+
+14
+00:01:08.000 --> 00:01:08.833
+Ты увидишь...
+
+15
+00:01:16.167 --> 00:01:18.375
+Имо. сюда.
+
+16
+00:01:34.917 --> 00:01:35.750
+За мной!
+
+17
+00:02:11.542 --> 00:02:12.750
+Имо. быстрее!
+
+18
+00:02:48.375 --> 00:02:50.083
+Ты не обращаешь внимания!
+
+19
+00:02:50.708 --> 00:02:54.500
+Я только хотел ответить на ...
+...звонок.
+
+20
+00:02:55.000 --> 00:02:58.208
+Имо. смотри.
+то есть слушай...
+
+21
+00:02:59.708 --> 00:03:02.292
+Ты должен учиться слушать.
+
+22
+00:03:03.250 --> 00:03:05.333
+Это не какая-нибудь игра.
+
+23
+00:03:06.000 --> 00:03:08.833
+Ты. вернее мы. легко можем погибнуть здесь.
+
+24
+00:03:10.000 --> 00:03:11.167
+Слушай...
+
+25
+00:03:11.667 --> 00:03:14.125
+слушай звуки машины.
+
+26
+00:03:18.333 --> 00:03:20.417
+Слушай своё дыхание.
+
+27
+00:04:27.208 --> 00:04:29.250
+И не надоест тебе это?
+
+28
+00:04:29.542 --> 00:04:31.083
+Надоест?!?
+
+29
+00:04:31.708 --> 00:04:34.625
+Имо! Машина -
+она как часовой механизм.
+
+30
+00:04:35.500 --> 00:04:37.667
+Одно движение не туда...
+
+31
+00:04:37.792 --> 00:04:39.750
+...и тебя размелют в месиво!
+
+32
+00:04:41.042 --> 00:04:42.375
+А разве это не -
+
+33
+00:04:42.417 --> 00:04:46.500
+Месиво. Имо!
+ты этого хочешь? месиво?
+
+34
+00:04:48.083 --> 00:04:50.000
+Имо. твоя цель в жизни?
+
+35
+00:04:50.542 --> 00:04:52.250
+Месиво!
+
+36
+00:05:41.792 --> 00:05:43.458
+Имо. закрой глаза.
+
+37
+00:05:44.875 --> 00:05:46.542
+Зачем?
+- Ну же!
+
+38
+00:05:51.500 --> 00:05:52.333
+Ладно.
+
+39
+00:05:53.708 --> 00:05:56.042
+Хорошо.
+
+40
+00:05:59.500 --> 00:06:02.750
+Что ты видишь слева от себя. Имо?
+
+41
+00:06:04.417 --> 00:06:06.000
+Ничего.
+- Точно?
+
+42
+00:06:06.333 --> 00:06:07.875
+да. совсем ничего.
+
+43
+00:06:08.042 --> 00:06:12.708
+А справа от себя.
+что ты видишь справа от себя. Имо?
+
+44
+00:06:13.833 --> 00:06:16.875
+Да то же Пруг. в точности то же...
+
+45
+00:06:17.042 --> 00:06:18.500
+Ничего!
+
+46
+00:06:18.667 --> 00:06:19.500
+Прекрасно...
+
+47
+00:06:40.583 --> 00:06:42.917
+Прислушайся. Пруг! Ты слышишь это?
+
+48
+00:06:43.583 --> 00:06:45.042
+Может. мы пойдём туда?
+
+49
+00:06:45.208 --> 00:06:48.042
+Туда?
+Это не безопасно. Имо.
+
+50
+00:06:49.875 --> 00:06:52.500
+Но...
+- Поверь мне. это так.
+
+51
+00:06:53.292 --> 00:06:54.750
+Может я бы ...
+
+52
+00:06:54.792 --> 00:06:56.333
+Нет.
+
+53
+00:06:57.625 --> 00:06:59.583
+- Но...
+- НЕТ!
+
+54
+00:06:59.708 --> 00:07:00.833
+Нет!
+
+55
+00:07:00.833 --> 00:07:03.708
+Ещё вопросы. Имо?
+
+56
+00:07:04.250 --> 00:07:05.875
+Нет.
+
+57
+00:07:09.458 --> 00:07:10.792
+Имо?
+
+58
+00:07:11.833 --> 00:07:13.500
+Имо. почему...
+
+59
+00:07:13.542 --> 00:07:14.458
+Имо...
+
+60
+00:07:14.500 --> 00:07:18.500
+...почему? почему ты не видишь
+красоты этого места?
+
+61
+00:07:18.792 --> 00:07:20.708
+То как оно работает.
+
+62
+00:07:20.833 --> 00:07:24.000
+Как совершенно оно.
+
+63
+00:07:24.083 --> 00:07:27.417
+Нет. Пруг. я не вижу.
+
+64
+00:07:27.500 --> 00:07:30.333
+Я не вижу. потому что здесь ничего нет.
+
+65
+00:07:31.375 --> 00:07:35.333
+И почему я должен доверять свою жизнь
+чему-то. чего здесь нет?
+
+66
+00:07:35.542 --> 00:07:37.125
+это ты мне можешь сказать?
+
+67
+00:07:37.500 --> 00:07:39.167
+Ответь мне!
+
+68
+00:07:43.208 --> 00:07:44.542
+Пруг...
+
+69
+00:07:45.500 --> 00:07:47.333
+Ты просто больной!
+
+70
+00:07:47.375 --> 00:07:48.500
+Отстань от меня.
+
+71
+00:07:48.625 --> 00:07:49.917
+Имо...
+
+72
+00:07:52.542 --> 00:07:55.083
+Нет! Имо! Это ловушка!
+
+73
+00:07:55.792 --> 00:07:57.167
+Это ловушка!
+
+74
+00:07:57.208 --> 00:08:01.708
+Слева от себя вы можете увидеть
+Висящие сады Семирамиды!
+
+75
+00:08:02.250 --> 00:08:04.292
+Сойдёт за ловушку?
+
+76
+00:08:05.458 --> 00:08:07.125
+Нет. Имо.
+
+77
+00:08:09.417 --> 00:08:12.750
+Справа от себя вы можете увидеть...
+...угадай кого...
+
+78
+00:08:13.000 --> 00:08:14.708
+...Колосса Родосского!
+
+79
+00:08:15.500 --> 00:08:16.625
+Нет!
+
+80
+00:08:16.667 --> 00:08:21.125
+Колосс Родосский!
+И он здесь специально для тебя. Пруг.
+
+81
+00:08:21.167 --> 00:08:22.208
+Специально для тебя...
+
+82
+00:08:51.333 --> 00:08:53.167
+Она здесь есть!
+
+83
+00:08:53.208 --> 00:08:55.500
+Говорю тебе.
+Имо...
+
+84
+00:08:57.333 --> 00:09:00.000
+...она есть... есть...
\ No newline at end of file
diff --git a/priv/static/video.js/examples/elephantsdream/captions.sv.vtt b/priv/static/video.js/examples/elephantsdream/captions.sv.vtt
new file mode 100644
index 0000000..6666eed
--- /dev/null
+++ b/priv/static/video.js/examples/elephantsdream/captions.sv.vtt
@@ -0,0 +1,349 @@
+WEBVTT
+
+1
+00:00:15.042 --> 00:00:18.250
+Till vänster kan vi se...
+Ser vi...
+
+2
+00:00:18.708 --> 00:00:20.333
+Till höger ser vi...
+
+3
+00:00:20.417 --> 00:00:21.958
+...huvudkaparna.
+
+4
+00:00:22.000 --> 00:00:24.792
+Allt är säkert.
+alldeles ofarligt.
+
+5
+00:00:24.917 --> 00:00:26.833
+Emo?
+
+6
+00:00:28.750 --> 00:00:30.167
+Se upp!
+
+7
+00:00:46.708 --> 00:00:48.750
+Är du skadad?
+
+8
+00:00:51.875 --> 00:00:54.458
+Jag tror inte det...
+Är du?
+
+9
+00:00:55.292 --> 00:00:57.333
+Jag är ok.
+
+10
+00:00:57.542 --> 00:01:01.625
+Res dig upp Emo.
+Det är inte säkert här.
+
+11
+00:01:02.208 --> 00:01:03.625
+Kom så går vi.
+
+12
+00:01:03.708 --> 00:01:05.708
+Vad nu då?
+
+13
+00:01:05.833 --> 00:01:07.833
+Du får se...
+
+14
+00:01:08.042 --> 00:01:10.417
+Du får se.
+
+15
+00:01:15.958 --> 00:01:18.375
+Emo. den här vägen.
+
+16
+00:01:34.417 --> 00:01:36.750
+Följ efter mig!
+
+17
+00:02:11.250 --> 00:02:13.250
+Skynda dig. Emo!
+
+18
+00:02:48.375 --> 00:02:50.583
+Du är inte uppmärksam!
+
+19
+00:02:50.708 --> 00:02:54.500
+Jag vill bara svara...
+... i telefonen.
+
+20
+00:02:54.500 --> 00:02:58.208
+Emo. se här...
+Lyssna menar jag.
+
+21
+00:02:59.708 --> 00:03:02.292
+Du måste lära dig att lyssna.
+
+22
+00:03:03.292 --> 00:03:05.208
+Det här är ingen lek.
+
+23
+00:03:05.250 --> 00:03:08.917
+Du... Jag menar vi.
+vi skulle kunna dö här ute.
+
+24
+00:03:09.917 --> 00:03:11.417
+Lyssna...
+
+25
+00:03:11.708 --> 00:03:14.833
+Lyssna på ljuden från maskinen.
+
+26
+00:03:18.125 --> 00:03:21.417
+Lyssna på dina andetag.
+
+27
+00:04:26.625 --> 00:04:29.250
+Tröttnar du aldrig på det här?
+
+28
+00:04:29.542 --> 00:04:31.083
+Tröttnar!?
+
+29
+00:04:31.208 --> 00:04:33.458
+Emo. maskinen är som...
+
+30
+00:04:33.458 --> 00:04:35.333
+Som ett urverk.
+
+31
+00:04:35.417 --> 00:04:37.167
+Ett felsteg...
+
+32
+00:04:37.208 --> 00:04:39.750
+...och du blir krossad.
+
+33
+00:04:41.042 --> 00:04:42.292
+Men är det inte -
+
+34
+00:04:42.292 --> 00:04:47.000
+Krossad. Emo!
+Är det vad du vill bli? Krossad till mos?
+
+35
+00:04:47.500 --> 00:04:50.542
+Emo. är det ditt mål i livet?
+
+36
+00:04:50.667 --> 00:04:53.250
+Att bli mos!?
+
+37
+00:05:41.375 --> 00:05:43.458
+Emo. blunda.
+
+38
+00:05:44.375 --> 00:05:46.542
+Varför då?
+- Blunda!
+
+39
+00:05:51.292 --> 00:05:55.042
+Ok.
+- Bra.
+
+40
+00:05:59.500 --> 00:06:02.750
+Vad ser du till vänster om dig Emo?
+
+41
+00:06:04.125 --> 00:06:06.292
+Ingenting.
+- Säker?
+
+42
+00:06:06.333 --> 00:06:07.958
+Ingenting alls.
+
+43
+00:06:08.042 --> 00:06:12.625
+Jaså. och till höger om dig...
+Vad ser du där. Emo?
+
+44
+00:06:13.750 --> 00:06:15.583
+Samma där Proog...
+
+45
+00:06:15.583 --> 00:06:18.083
+Exakt samma där. ingenting!
+
+46
+00:06:18.083 --> 00:06:19.667
+Perfekt.
+
+47
+00:06:40.500 --> 00:06:42.917
+Lyssna Proog! Hör du?
+
+48
+00:06:43.500 --> 00:06:45.125
+Kan vi gå dit?
+
+49
+00:06:45.208 --> 00:06:48.125
+Gå dit?
+Det är inte tryggt.
+
+50
+00:06:49.583 --> 00:06:52.583
+Men. men...
+- Tro mig. det inte säkert.
+
+51
+00:06:53.000 --> 00:06:54.292
+Men kanske om jag -
+
+52
+00:06:54.292 --> 00:06:56.333
+Nej.
+
+53
+00:06:57.208 --> 00:07:00.167
+Men -
+- Nej. NEJ!
+
+54
+00:07:00.917 --> 00:07:03.792
+Några fler frågor Emo?
+
+55
+00:07:04.250 --> 00:07:05.875
+Nej.
+
+56
+00:07:09.542 --> 00:07:11.375
+Emo?
+- Ja?
+
+57
+00:07:11.542 --> 00:07:15.667
+Emo. varför...
+
+58
+00:07:15.792 --> 00:07:18.583
+Varför kan du inte se skönheten i det här?
+
+59
+00:07:18.792 --> 00:07:21.708
+Hur det fungerar.
+
+60
+00:07:21.833 --> 00:07:24.000
+Hur perfekt det är.
+
+61
+00:07:24.083 --> 00:07:27.333
+Nej Proog. jag kan inte se det.
+
+62
+00:07:27.333 --> 00:07:30.333
+Jag ser det inte. för det finns inget där.
+
+63
+00:07:31.292 --> 00:07:35.333
+Och varför skulle jag lägga mitt liv
+i händerna på något som inte finns?
+
+64
+00:07:35.333 --> 00:07:37.083
+Kan du berätta det för mig?
+- Emo...
+
+65
+00:07:37.083 --> 00:07:39.167
+Svara mig!
+
+66
+00:07:43.500 --> 00:07:45.208
+Proog...
+
+67
+00:07:45.208 --> 00:07:47.083
+Du är inte frisk!
+
+68
+00:07:47.167 --> 00:07:49.292
+Håll dig borta från mig!
+
+69
+00:07:52.292 --> 00:07:55.083
+Nej! Emo!
+Det är en fälla!
+
+70
+00:07:55.375 --> 00:07:57.208
+Heh. det är en fälla.
+
+71
+00:07:57.208 --> 00:08:01.708
+På vänster sida ser vi...
+Babylons hängande trädgårdar!
+
+72
+00:08:01.958 --> 00:08:04.000
+Vad sägs om den fällan?
+
+73
+00:08:05.458 --> 00:08:07.333
+Nej. Emo.
+
+74
+00:08:08.917 --> 00:08:12.667
+Till höger ser vi...
+Gissa!
+
+75
+00:08:12.750 --> 00:08:15.125
+Rhodos koloss!
+
+76
+00:08:15.375 --> 00:08:16.500
+Nej!
+
+77
+00:08:16.500 --> 00:08:20.250
+Kolossen på Rhodos!
+Och den är här för din skull. Proog...
+
+78
+00:08:20.250 --> 00:08:23.250
+Bara för din skull.
+
+79
+00:08:50.917 --> 00:08:53.250
+Den är där...
+
+80
+00:08:53.625 --> 00:08:56.417
+Tro mig.
+Emo...
+
+81
+00:08:57.000 --> 00:09:00.000
+Det är den.
+Det är den...
\ No newline at end of file
diff --git a/priv/static/video.js/examples/elephantsdream/chapters.en.vtt b/priv/static/video.js/examples/elephantsdream/chapters.en.vtt
new file mode 100644
index 0000000..9740a41
--- /dev/null
+++ b/priv/static/video.js/examples/elephantsdream/chapters.en.vtt
@@ -0,0 +1,44 @@
+WEBVTT
+
+NOTE Created by Owen Edwards 2015. http://creativecommons.org/licenses/by/2.5/
+NOTE Based on 'finalbreakdown.rtf', part of the prepoduction notes, which are:
+NOTE (c) Copyright 2006, Blender Foundation / 
+NOTE                     Netherlands Media Art Institute / 
+NOTE                     www.elephantsdream.org
+
+1
+00:00:00.000 --> 00:00:27.500
+Prologue
+
+2
+00:00:27.500 --> 00:01:10.000
+Switchboard trap
+
+3
+00:01:10.000 --> 00:03:25.000
+Telephone/Lecture
+
+4
+00:03:25.000 --> 00:04:52.000
+Typewriter
+
+5
+00:04:52.000 --> 00:06:19.500
+Proog shows Emo stuff
+
+6
+00:06:19.500 --> 00:07:09.000
+Which way
+
+7
+00:07:09.000 --> 00:07:45.000
+Emo flips out
+
+8
+00:07:45.000 --> 00:09:25.000
+Emo creates
+
+9
+00:09:25.000 --> 00:10:53.000
+Closing credits
+
diff --git a/priv/static/video.js/examples/elephantsdream/descriptions.en.vtt b/priv/static/video.js/examples/elephantsdream/descriptions.en.vtt
new file mode 100644
index 0000000..48c7430
--- /dev/null
+++ b/priv/static/video.js/examples/elephantsdream/descriptions.en.vtt
@@ -0,0 +1,280 @@
+WEBVTT

+License: CC BY 4.0 http://creativecommons.org/licenses/by/4.0/

+Author: Silvia Pfeiffer

+

+1

+00:00:00.000 --> 00:00:05.000

+The orange open movie project presents

+

+2

+00:00:05.010 --> 00:00:12.000

+Introductory titles are showing on the background of a water pool with fishes swimming and mechanical objects lying on a stone floor.

+

+3

+00:00:12.010 --> 00:00:14.800

+elephants dream

+

+4

+00:00:26.100 --> 00:00:28.206

+Two people stand on a small bridge.

+

+5

+00:00:30.010 --> 00:00:40.000

+The old man, Proog, shoves the younger and less experienced Emo on the ground to save him from being mowed down by a barrage of jack plugs that whir back and forth between the two massive switch-board-like walls.

+

+6

+00:00:40.000 --> 00:00:47.000

+The plugs are oblivious of the two, endlessly channeling streams of bizarre sounds and data.

+

+7

+00:00:48.494 --> 00:00:51.994

+Emo sits on the bridge and checks his limbs.

+

+8

+00:01:09.150 --> 00:01:16.030

+After the squealing plugs move on, Proog makes sure that Emo is unharmed and urges him onwards through a crack in one of the plug-walls.

+

+9

+00:01:18.050 --> 00:01:24.000

+They walk through the narrow hall into a massive room that fades away into blackness on all sides.

+

+10

+00:01:24.050 --> 00:01:34.200

+Only one path is visible, suspended in mid-air that runs between thousands of dangling electric cables on which sit crowds of robin-like robotic birds.

+

+11

+00:01:36.000 --> 00:01:40.000

+As Proog and Emo enter the room, the birds begin to wake up and notice them.

+

+12

+00:01:42.000 --> 00:01:50.000

+Realizing the danger, Proog grabs Emo by the arm.

+

+13

+00:01:50.050 --> 00:02:00.000

+They run along the increasingly bizarre path as the birds begin to swarm.

+

+14

+00:02:00.050 --> 00:02:11.000

+All sound is blocked out by the birds which are making the same noises as the jack-plugs, garbled screaming and obscure sentences and static.

+

+15

+00:02:12.600 --> 00:02:17.000

+The path dead-ends, stopping in the middle of no-where above the infinite drop.

+

+16

+00:02:17.600 --> 00:02:22.000

+Proog turns around as the birds reach them and begin to dive-bomb at them.

+

+17

+00:02:22.600 --> 00:02:28.000

+At the last moment, Proog takes out an old candlestick phone and the birds dive into the speaker piece.

+

+18

+00:02:28.600 --> 00:02:31.000

+The screen cuts to black.

+

+19

+00:02:31.600 --> 00:02:38.000

+In the next scene, Proog stands at one end of a room, suspiciously watching what is probably the same candlestick phone, which is ringing.

+

+20

+00:02:38.500 --> 00:02:41.000

+Emo watches from the other side of the room.

+

+21

+00:02:41.500 --> 00:02:43.000

+The phone continues to ring.

+

+22

+00:02:43.500 --> 00:02:48.000

+After a while Emo approaches it to answer it, but Proog slaps his hand away.

+

+23

+00:02:57.972 --> 00:02:59.100

+Proog takes the ear-piece off the hook.

+

+24

+00:03:13.500 --> 00:03:18.054

+The phone speaker revealed a mass of clawed, fleshy polyps which scream and gibber obscenely.

+

+25

+00:03:25.000 --> 00:03:33.000

+There is a solemn silence as Emo looks around the room and the technical objects therein.

+

+26

+00:03:38.000 --> 00:03:44.000

+Emo laughs disbelievingly and Proog walks away.

+

+27

+00:03:46.000 --> 00:03:54.000

+In the next scene, the two enter another massive black room.

+

+28

+00:03:54.500 --> 00:04:04.000

+There is no path, the entry platform is the only structure that seems to be there except for another exit, lit distantly at the far side.

+

+29

+00:04:04.500 --> 00:04:14.000

+Proog takes a step forward into the void, and his feet are suddenly caught by giant typewriter arms that rocket up out of the blackness to catch his feet as he dances across mid-air.

+

+30

+00:04:14.500 --> 00:04:22.000

+Emo follows Proog with somewhat less enthusiasm as the older man leads the way.

+

+31

+00:04:52.000 --> 00:04:58.000

+They reach the end of the room and go through a hall into a small compartment.

+

+32

+00:05:02.000 --> 00:05:06.000

+Proog presses a button, and the door shuts.

+

+33

+00:05:06.500 --> 00:05:09.000

+It is an elevator.

+

+34

+00:05:09.500 --> 00:05:24.000

+The elevator lurches suddenly as it is grabbed by a giant mechanical arm and thrown upwards, rushing up through an ever-widening tunnel.

+

+35

+00:05:26.500 --> 00:05:32.000

+When it begins to slow down, another arm grabs the capsule and throws it even further up.

+

+36

+00:05:32.500 --> 00:05:40.000

+As it moves up, the walls unlock and fall away, leaving only the floor with the two on it, rushing higher and higher.

+

+37

+00:05:54.500 --> 00:05:59.000

+They exit the tunnel into a black sky and the platform reaches the peak of its arc.

+

+38

+00:06:19.500 --> 00:06:26.000

+The elevator begins to drop down another shaft, coming to rest as it slams into the floor of another room and bringing the two to a level stop.

+

+39

+00:06:26.500 --> 00:06:28.000

+A camera briefly illumiates.

+

+40

+00:06:28.010 --> 00:06:34.000

+They are in a large, dingy room filled with strange, generator-like devices and dotted with boxy holographic projectors.

+

+41

+00:06:34.500 --> 00:06:38.000

+One of them is projecting a portion of wall with a door in it right beside them.

+

+42

+00:06:38.500 --> 00:06:40.000

+The door seems harmless enough.

+

+43

+00:06:42.800 --> 00:06:45.100

+From behind the door comes light music.

+

+44

+00:06:56.000 --> 00:07:00.100

+Proog presses a button on his cane, which changes the holograph to another wall.

+

+45

+00:07:05.100 --> 00:07:11.000

+Proog finishes the wall, and boxes them into a Safe Room, out of the view of anything outside.

+

+46

+00:07:39.000 --> 00:07:42.500

+Proog slaps him, trying to bring him to his senses.

+

+47

+00:07:45.000 --> 00:07:52.000

+Emo storms away down the length of the room towards a wall he apparently cannot see and the wall begins to move, extending the length of the room.

+

+48

+00:08:00.000 --> 00:08:07.000

+The walls begin to discolour and mechanical roots start tearing through the walls to his left.

+

+49

+00:08:07.010 --> 00:08:09.000

+The roots move forwards toward Proog.

+

+50

+00:08:22.000 --> 00:08:31.000

+The rest of the safety wall crumples away as a pair of massive hands heave out of the ground and begin to attack.

+

+51

+00:08:31.010 --> 00:08:37.000

+Proog is knocked down by the shockwave, while Emo turns and begins to walk away, waving his finger around his temple in the 'crazy' sign.

+

+52

+00:08:37.010 --> 00:08:44.000

+In a last effort, Proog extricates himself from the tentacle roots, and cracks Emo over the back of the head with his cane.

+

+53

+00:08:44.500 --> 00:08:51.000

+As Emo collapses, everything falls away, and Proog and Emo are left in one tiny patch of light in the middle of blackness.

+

+54

+00:09:00.000 --> 00:09:20.000

+The scene fades to black while panning over a pile of tentacle roots lying on the ground.

+

+55

+00:09:26.000 --> 00:09:28.000

+Credits begin:

+

+56

+00:09:28.500 --> 00:09:35.000

+Orange Open Movie Team

+Director: Bassum Kurdali

+Art Director: Andreas Goralczyk

+

+57

+00:09:35.500 --> 00:09:39.000

+Music and Sound Design: Jan Morgenstern

+

+58

+00:09:39.500 --> 00:09:44.000

+Emo: Cas Jansen

+Proog: Tygo Gernandt

+

+59

+00:09:44.500 --> 00:09:50.000

+Screenplay: Pepijn Zwanenberg

+Original Concept & Scenario: Andreas Goralczyk, Bassam Kurdali, Ton Roosendaal

+

+60

+00:09:50.500 --> 00:10:24.000

+More people for

+Additional Artwork and Animation

+Texture Photography

+Software Development

+3D Modelling, Animation, Rendering, Compiling Software

+Special Thanks to Open Source Projects

+Rendering Services Provided

+Hardware  Sponsored

+Casting

+Sound FX, Foley, Dialogue Editing, Audio Mix and Post

+Voice Recording

+HDCam conversion

+Netherlands Media Art Institute Staff

+Blender Foundation Staff

+

+61

+00:10:24.500 --> 00:10:30.000

+Many Thanks to our Donation and DVD sponsors

+

+62

+00:10:30.500 --> 00:10:47.000

+Elephants Dream has been realised with financial support from

+The Netherlands Film Fund

+Mondriaan Foundation

+VSBfonds

+Uni-Verse / EU Sixth Framework Programme

+

+63

+00:10:47.500 --> 00:10:53.000

+Produced By

+Ton Roosendaal

+Copyright 2006

+Netherlands Media Art Institute / Montevideo

+Blender Foundation

diff --git a/priv/static/video.js/examples/elephantsdream/index.html b/priv/static/video.js/examples/elephantsdream/index.html
new file mode 100644
index 0000000..808171e
--- /dev/null
+++ b/priv/static/video.js/examples/elephantsdream/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <meta charset="utf-8" />
+  <title>Video.js Text Descriptions, Chapters &amp; Captions Example</title>
+
+  <link href="http://vjs.zencdn.net/7.0/video-js.min.css" rel="stylesheet">
+  <script src="http://vjs.zencdn.net/7.0/video.min.js"></script>
+
+</head>
+<body>
+
+  <!-- NOTE: we have to disable native Text Track support for the HTML5 tech,
+             since even HTML5 video players with native Text Track support
+             don't currently support 'description' text tracks in any
+             useful way! Currently this means that iOS will not display
+            ANY text tracks -->
+  <video id="example_video_1" class="video-js" controls preload="none" width="640" height="360"
+      data-setup='{ "html5" : { "nativeTextTracks" : false } }'
+      poster="http://d2zihajmogu5jn.cloudfront.net/elephantsdream/poster.png">
+
+    <source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4" type="video/mp4">
+    <source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.ogg" type="video/ogg">
+
+    <track kind="captions" src="captions.en.vtt" srclang="en" label="English" default>
+    <track kind="captions" src="captions.sv.vtt" srclang="sv" label="Swedish">
+    <track kind="captions" src="captions.ru.vtt" srclang="ru" label="Russian">
+    <track kind="captions" src="captions.ja.vtt" srclang="ja" label="Japanese">
+    <track kind="captions" src="captions.ar.vtt" srclang="ar" label="Arabic">
+
+    <track kind="descriptions" src="descriptions.en.vtt" srclang="en" label="English">
+
+    <track kind="chapters" src="chapters.en.vtt" srclang="en" label="English">
+
+    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
+  </video>
+
+</body>
+
+</html>
diff --git a/priv/static/video.js/examples/index.html b/priv/static/video.js/examples/index.html
new file mode 100644
index 0000000..84c0bda
--- /dev/null
+++ b/priv/static/video.js/examples/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Index of video.js examples</title>
+</head>
+<body>
+
+  <h1>Index of video.js examples</h1>
+  <ul>
+    <li><a href="simple-embed">Video.js HTML5 video player simple example</a></li>
+    <li><a href="elephantsdream">Elephants Dream video with text descriptions, chapters &amp; captions example</a></li>
+  </ul>
+
+</body>
+
+</html>
diff --git a/priv/static/video.js/examples/shared/example-captions.vtt b/priv/static/video.js/examples/shared/example-captions.vtt
new file mode 100644
index 0000000..e598be1
--- /dev/null
+++ b/priv/static/video.js/examples/shared/example-captions.vtt
@@ -0,0 +1,41 @@
+WEBVTT
+
+00:00.700 --> 00:04.110
+Captions describe all relevant audio for the hearing impaired.
+[ Heroic music playing for a seagull ]
+
+00:04.500 --> 00:05.000
+[ Splash!!! ]
+
+00:05.100 --> 00:06.000
+[ Sploosh!!! ]
+
+00:08.000 --> 00:09.225
+[ Splash...splash...splash splash splash ]
+
+00:10.525 --> 00:11.255
+[ Splash, Sploosh again ]
+
+00:13.500 --> 00:14.984
+Dolphin: eeeEEEEEeeee!
+
+00:14.984 --> 00:16.984
+Dolphin: Squawk! eeeEEE?
+
+00:25.000 --> 00:28.284
+[ A whole ton of splashes ]
+
+00:29.500 --> 00:31.000
+Mine. Mine. Mine.
+
+00:34.300 --> 00:36.000
+Shark: Chomp
+
+00:36.800 --> 00:37.900
+Shark: CHOMP!!!
+
+00:37.861 --> 00:41.193
+EEEEEEOOOOOOOOOOWHALENOISE
+
+00:42.593 --> 00:45.611
+[ BIG SPLASH ]
\ No newline at end of file
diff --git a/priv/static/video.js/examples/simple-embed/index.html b/priv/static/video.js/examples/simple-embed/index.html
new file mode 100644
index 0000000..5f10924
--- /dev/null
+++ b/priv/static/video.js/examples/simple-embed/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+    <title>Video.js | HTML5 Video Player</title>
+    <link href="http://vjs.zencdn.net/7.0/video-js.min.css" rel="stylesheet">
+    <script src="http://vjs.zencdn.net/7.0/video.min.js"></script>
+
+</head>
+<body>
+
+  <video id="example_video_1" class="video-js" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
+    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
+    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
+    <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
+    <track kind="captions" src="../shared/example-captions.vtt" srclang="en" label="English">
+    <track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English">
+    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
+  </video>
+
+</body>
+
+</html>
diff --git a/priv/static/video.js/font/VideoJS.svg b/priv/static/video.js/font/VideoJS.svg
new file mode 100755
index 0000000..f33af62
--- /dev/null
+++ b/priv/static/video.js/font/VideoJS.svg
@@ -0,0 +1,150 @@
+<?xml version="1.0" standalone="no"?> 
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<defs>
+  <font id="VideoJS" horiz-adv-x="1792">
+    <font-face font-family="VideoJS"
+      units-per-em="1792" ascent="1792"
+      descent="0" />
+    <missing-glyph horiz-adv-x="0" />
+    <glyph glyph-name="play"
+      unicode="&#xF101;"
+      horiz-adv-x="1792" d=" M597.3333333333334 1418.6666666666665V373.3333333333333L1418.6666666666667 896z" />
+    <glyph glyph-name="play-circle"
+      unicode="&#xF102;"
+      horiz-adv-x="1792" d=" M746.6666666666667 560L1194.6666666666667 896L746.6666666666667 1232V560zM896 1642.6666666666667C483.4666666666667 1642.6666666666667 149.3333333333334 1308.5333333333333 149.3333333333334 896S483.4666666666667 149.3333333333333 896 149.3333333333333S1642.6666666666667 483.4666666666667 1642.6666666666667 896S1308.5333333333333 1642.6666666666667 896 1642.6666666666667zM896 298.6666666666665C566.72 298.6666666666665 298.6666666666667 566.7199999999998 298.6666666666667 896S566.72 1493.3333333333333 896 1493.3333333333333S1493.3333333333335 1225.28 1493.3333333333335 896S1225.2800000000002 298.6666666666665 896 298.6666666666665z" />
+    <glyph glyph-name="pause"
+      unicode="&#xF103;"
+      horiz-adv-x="1792" d=" M448 373.3333333333333H746.6666666666667V1418.6666666666665H448V373.3333333333333zM1045.3333333333335 1418.6666666666665V373.3333333333333H1344V1418.6666666666665H1045.3333333333335z" />
+    <glyph glyph-name="volume-mute"
+      unicode="&#xF104;"
+      horiz-adv-x="1792" d=" M1232 896C1232 1027.7866666666666 1155.8400000000001 1141.6533333333332 1045.3333333333335 1196.5333333333333V1031.52L1228.6399999999999 848.2133333333334C1230.88 863.8933333333334 1232 879.9466666666667 1232 896.0000000000001zM1418.6666666666667 896C1418.6666666666667 825.8133333333333 1403.3600000000001 759.7333333333333 1378.3466666666668 698.8799999999999L1491.466666666667 585.7599999999998C1540 678.72 1568 783.9999999999999 1568 896C1568 1215.5733333333333 1344.3733333333334 1482.88 1045.3333333333335 1550.8266666666666V1396.6399999999999C1261.1200000000001 1332.4266666666667 1418.6666666666667 1132.6933333333332 1418.6666666666667 896zM319.2000000000001 1568L224 1472.8L576.8 1120H224V672H522.6666666666667L896 298.6666666666665V800.8L1213.7066666666667 483.0933333333332C1163.68 444.6399999999999 1107.3066666666666 413.6533333333332 1045.3333333333335 394.9866666666665V240.7999999999998C1148 264.32 1241.7066666666667 311.3599999999997 1320.48 375.9466666666663L1472.8000000000002 224L1568 319.1999999999998L896 991.1999999999998L319.2000000000001 1568zM896 1493.3333333333333L739.9466666666667 1337.28L896 1181.2266666666667V1493.3333333333333z" />
+    <glyph glyph-name="volume-low"
+      unicode="&#xF105;"
+      horiz-adv-x="1792" d=" M522.6666666666667 1120V672H821.3333333333334L1194.6666666666667 298.6666666666665V1493.3333333333333L821.3333333333334 1120H522.6666666666667z" />
+    <glyph glyph-name="volume-mid"
+      unicode="&#xF106;"
+      horiz-adv-x="1792" d=" M1381.3333333333335 896C1381.3333333333335 1027.7866666666666 1305.1733333333334 1141.6533333333332 1194.6666666666667 1196.5333333333333V595.0933333333332C1305.1733333333334 650.3466666666666 1381.3333333333335 764.2133333333331 1381.3333333333335 896zM373.3333333333334 1120V672H672L1045.3333333333335 298.6666666666665V1493.3333333333333L672 1120H373.3333333333334z" />
+    <glyph glyph-name="volume-high"
+      unicode="&#xF107;"
+      horiz-adv-x="1792" d=" M224 1120V672H522.6666666666667L896 298.6666666666665V1493.3333333333333L522.6666666666667 1120H224zM1232 896C1232 1027.7866666666666 1155.8400000000001 1141.6533333333332 1045.3333333333335 1196.5333333333333V595.0933333333332C1155.8400000000001 650.3466666666666 1232 764.2133333333331 1232 896zM1045.3333333333335 1550.8266666666666V1396.6399999999999C1261.1200000000001 1332.4266666666667 1418.6666666666667 1132.6933333333332 1418.6666666666667 896S1261.1200000000001 459.5733333333333 1045.3333333333335 395.3600000000002V241.1733333333332C1344.3733333333334 309.1199999999999 1568 576.0533333333333 1568 896S1344.3733333333334 1482.88 1045.3333333333335 1550.8266666666666z" />
+    <glyph glyph-name="fullscreen-enter"
+      unicode="&#xF108;"
+      horiz-adv-x="1792" d=" M522.6666666666667 746.6666666666665H373.3333333333334V373.3333333333333H746.6666666666667V522.6666666666665H522.6666666666667V746.6666666666665zM373.3333333333334 1045.3333333333333H522.6666666666667V1269.3333333333333H746.6666666666667V1418.6666666666665H373.3333333333334V1045.3333333333333zM1269.3333333333335 522.6666666666665H1045.3333333333335V373.3333333333333H1418.6666666666667V746.6666666666665H1269.3333333333335V522.6666666666665zM1045.3333333333335 1418.6666666666665V1269.3333333333333H1269.3333333333335V1045.3333333333333H1418.6666666666667V1418.6666666666665H1045.3333333333335z" />
+    <glyph glyph-name="fullscreen-exit"
+      unicode="&#xF109;"
+      horiz-adv-x="1792" d=" M373.3333333333334 597.3333333333333H597.3333333333334V373.3333333333333H746.6666666666667V746.6666666666665H373.3333333333334V597.3333333333333zM597.3333333333334 1194.6666666666665H373.3333333333334V1045.3333333333333H746.6666666666667V1418.6666666666665H597.3333333333334V1194.6666666666665zM1045.3333333333335 373.3333333333333H1194.6666666666667V597.3333333333333H1418.6666666666667V746.6666666666665H1045.3333333333335V373.3333333333333zM1194.6666666666667 1194.6666666666665V1418.6666666666665H1045.3333333333335V1045.3333333333333H1418.6666666666667V1194.6666666666665H1194.6666666666667z" />
+    <glyph glyph-name="spinner"
+      unicode="&#xF10A;"
+      horiz-adv-x="1792" d=" M701.8666666666668 1008L1057.6533333333334 1624.3733333333334C1005.7600000000002 1635.9466666666667 951.6266666666666 1642.6666666666667 896 1642.6666666666667C716.8000000000001 1642.6666666666667 552.9066666666668 1579.5733333333333 424.1066666666667 1474.2933333333333L697.76 1000.5333333333334L701.8666666666666 1008zM1608.32 1120C1539.6266666666666 1338.4 1373.1200000000001 1512.7466666666667 1160.6933333333332 1593.3866666666668L887.4133333333334 1120H1608.32zM1627.7333333333336 1045.3333333333333H1068.48L1090.1333333333334 1008L1445.92 392C1567.6266666666668 524.9066666666668 1642.6666666666667 701.4933333333333 1642.6666666666667 896C1642.6666666666667 947.1466666666666 1637.44 997.1733333333332 1627.7333333333336 1045.3333333333333zM637.2800000000001 896L346.08 1400C224.3733333333333 1267.0933333333332 149.3333333333334 1090.5066666666667 149.3333333333334 896C149.3333333333334 844.8533333333332 154.56 794.8266666666666 164.2666666666667 746.6666666666665H723.5200000000001L637.2800000000002 896zM183.68 672C252.3733333333334 453.5999999999999 418.88 279.2533333333334 631.3066666666667 198.6133333333332L904.5866666666668 672H183.68zM1025.1733333333334 672L733.9733333333334 167.6266666666666C786.24 156.0533333333333 840.3733333333334 149.3333333333333 896 149.3333333333333C1075.2 149.3333333333333 1239.0933333333332 212.4266666666665 1367.8933333333334 317.7066666666665L1094.24 791.4666666666666L1025.1733333333334 672z" />
+    <glyph glyph-name="subtitles"
+      unicode="&#xF10B;"
+      horiz-adv-x="1792" d=" M1493.3333333333335 1493.3333333333333H298.6666666666667C216.16 1493.3333333333333 149.3333333333334 1426.5066666666667 149.3333333333334 1344V448C149.3333333333334 365.4933333333331 216.16 298.6666666666665 298.6666666666667 298.6666666666665H1493.3333333333335C1575.8400000000001 298.6666666666665 1642.6666666666667 365.4933333333331 1642.6666666666667 448V1344C1642.6666666666667 1426.5066666666667 1575.8400000000001 1493.3333333333333 1493.3333333333335 1493.3333333333333zM298.6666666666667 896H597.3333333333334V746.6666666666665H298.6666666666667V896zM1045.3333333333335 448H298.6666666666667V597.3333333333333H1045.3333333333335V448zM1493.3333333333335 448H1194.6666666666667V597.3333333333333H1493.3333333333335V448zM1493.3333333333335 746.6666666666665H746.6666666666667V896H1493.3333333333335V746.6666666666665z" />
+    <glyph glyph-name="captions"
+      unicode="&#xF10C;"
+      horiz-adv-x="1792" d=" M1418.6666666666667 1493.3333333333333H373.3333333333334C290.8266666666667 1493.3333333333333 224 1426.5066666666667 224 1344V448C224 365.4933333333331 290.8266666666667 298.6666666666665 373.3333333333334 298.6666666666665H1418.6666666666667C1501.1733333333334 298.6666666666665 1568 365.4933333333331 1568 448V1344C1568 1426.5066666666667 1501.1733333333334 1493.3333333333333 1418.6666666666667 1493.3333333333333zM821.3333333333334 970.6666666666666H709.3333333333334V1008H560V783.9999999999999H709.3333333333334V821.3333333333333H821.3333333333334V746.6666666666665C821.3333333333334 705.5999999999999 788.1066666666667 672 746.6666666666667 672H522.6666666666667C481.2266666666667 672 448 705.5999999999999 448 746.6666666666665V1045.3333333333333C448 1086.4 481.2266666666667 1120 522.6666666666667 1120H746.6666666666667C788.1066666666667 1120 821.3333333333334 1086.4 821.3333333333334 1045.3333333333333V970.6666666666666zM1344 970.6666666666666H1232V1008H1082.6666666666667V783.9999999999999H1232V821.3333333333333H1344V746.6666666666665C1344 705.5999999999999 1310.7733333333333 672 1269.3333333333335 672H1045.3333333333335C1003.8933333333334 672 970.6666666666669 705.5999999999999 970.6666666666669 746.6666666666665V1045.3333333333333C970.6666666666669 1086.4 1003.8933333333334 1120 1045.3333333333335 1120H1269.3333333333335C1310.7733333333333 1120 1344 1086.4 1344 1045.3333333333333V970.6666666666666z" />
+    <glyph glyph-name="hd"
+      unicode="&#xF10D;"
+      horiz-adv-x="1792" d=" M1418.6666666666667 1568H373.3333333333334C290.4533333333333 1568 224 1500.8 224 1418.6666666666665V373.3333333333333C224 291.1999999999998 290.4533333333334 224 373.3333333333334 224H1418.6666666666667C1500.8000000000002 224 1568 291.1999999999998 1568 373.3333333333333V1418.6666666666665C1568 1500.8 1500.8000000000002 1568 1418.6666666666667 1568zM821.3333333333334 672H709.3333333333334V821.3333333333333H560V672H448V1120H560V933.3333333333331H709.3333333333334V1120H821.3333333333334V672zM970.6666666666669 1120H1269.3333333333335C1310.4 1120 1344 1086.4 1344 1045.3333333333333V746.6666666666665C1344 705.5999999999999 1310.4 672 1269.3333333333335 672H970.6666666666669V1120zM1082.6666666666667 783.9999999999999H1232V1008H1082.6666666666667V783.9999999999999z" />
+    <glyph glyph-name="chapters"
+      unicode="&#xF10E;"
+      horiz-adv-x="1792" d=" M224 821.3333333333333H373.3333333333334V970.6666666666666H224V821.3333333333333zM224 522.6666666666665H373.3333333333334V672H224V522.6666666666665zM224 1120H373.3333333333334V1269.3333333333333H224V1120zM522.6666666666667 821.3333333333333H1568V970.6666666666666H522.6666666666667V821.3333333333333zM522.6666666666667 522.6666666666665H1568V672H522.6666666666667V522.6666666666665zM522.6666666666667 1269.3333333333333V1120H1568V1269.3333333333333H522.6666666666667z" />
+    <glyph glyph-name="downloading"
+      unicode="&#xF10F;"
+      horiz-adv-x="1792" d=" M815.7183999999999 140Q671.9999999999999 153.0816000000002 547.8591999999999 217.4592Q423.7183999999999 281.8816000000002 332.2815999999999 384.5184Q240.8 487.2 189.4592 618.7775999999999Q138.1184 750.3999999999999 138.1184 897.8815999999999Q138.1184 1192.8 332.2815999999999 1409.3183999999999Q526.4 1625.8816 817.5999999999999 1655.7184V1513.8816Q586.1184 1480.2815999999998 433.0816 1305.7408Q280 1131.2 280 897.8816000000002Q280 664.5184000000002 432.1408 490.0224000000003Q584.2816 315.4816000000001 815.7183999999999 281.8816000000002zM896 518.9184L517.0816 896L610.4 989.3184L830.6816 769.0816V1273.0816H961.3184V769.0816L1179.7184 989.3184L1273.0816 896zM976.2816 140V281.8816000000002Q1058.3999999999999 293.0816000000002 1134.9184 324.8000000000002Q1211.4816 356.5184 1276.8 408.8000000000002L1381.3183999999999 306.1184000000001Q1293.6 235.2000000000001 1190.9183999999998 192.2816000000003Q1088.2815999999998 149.3184000000001 976.2815999999998 140zM1280.5184 1385.0816Q1211.4816 1435.4816 1134.9184 1468.1408000000001Q1058.4 1500.8000000000002 976.2816 1513.8816000000002V1655.7184Q1088.2816 1644.5184 1189.9776 1601.6Q1291.7184 1558.6816 1381.3184 1489.6zM1485.8816 418.1184000000001L1385.0816 518.9184000000002Q1437.3183999999999 586.1184000000001 1468.1408 662.6816000000001Q1498.9183999999998 739.2 1510.1183999999998 821.3184000000001H1653.8816Q1640.8 709.3184000000001 1598.8224 606.6816000000001Q1556.8 504 1485.8816 418.1184000000001zM1510.1183999999998 974.4Q1497.0816 1056.5184 1467.1999999999998 1133.9776000000002Q1437.3183999999999 1211.4816 1385.0816 1276.8000000000002L1491.4816 1375.7184Q1560.5184 1289.8816000000002 1601.6 1187.2Q1642.6816 1084.5184 1653.8816 974.4z" />
+    <glyph glyph-name="file-download"
+      unicode="&#xF110;"
+      horiz-adv-x="1792" d=" M403.2000000000001 278.1333333333335Q352.8000000000001 278.1333333333335 314.5333333333334 315.4666666666667T276.2666666666667 405.0666666666666V692.5333333333333H403.2000000000001V405.0666666666666H1386.9333333333336V692.5333333333333H1513.866666666667V405.0666666666666Q1513.866666666667 352.8 1476.5333333333335 315.4666666666667T1386.9333333333336 278.1333333333335zM896 593.5999999999999L518.9333333333334 968.8L610.4000000000001 1060.2666666666664L832.5333333333334 838.1333333333332V1525.0666666666666H959.4666666666666V838.1333333333333L1181.6 1060.2666666666667L1273.0666666666668 968.8z" />
+    <glyph glyph-name="file-download-done"
+      unicode="&#xF111;"
+      horiz-adv-x="1792" d=" M365.8666666666668 280V408.8H1426.1333333333334V280zM709.3333333333334 617.8666666666666L276.2666666666667 1050.9333333333334L367.7333333333334 1138.6666666666665L709.3333333333334 797.0666666666666L1426.1333333333334 1513.8666666666668L1515.7333333333336 1424.2666666666667z" />
+    <glyph glyph-name="file-download-off"
+      unicode="&#xF112;"
+      horiz-adv-x="1792" d=" M182.9333333333334 1614.6666666666667L1614.6666666666667 182.9333333333332L1530.6666666666667 100.8L1353.3333333333335 278.1333333333335Q1351.466666666667 276.2666666666669 1350.5333333333333 277.2000000000001Q1349.6000000000001 278.1333333333335 1347.7333333333331 278.1333333333335H403.2000000000001Q352.8000000000001 278.1333333333335 314.5333333333334 315.4666666666667T276.2666666666667 405.0666666666666V692.5333333333333H403.2000000000001V405.0666666666666H1226.4L965.0666666666668 666.4000000000001L896 599.2L518.9333333333334 974.4L588 1043.4666666666667L100.8 1530.6666666666665zM1181.6 1065.8666666666668L1273.0666666666668 974.4L1133.0666666666668 832.5333333333333L1041.6000000000001 925.8666666666666zM959.4666666666666 1525.0666666666666V1004.2666666666667L832.5333333333334 1133.0666666666666V1525.0666666666666z" />
+    <glyph glyph-name="share"
+      unicode="&#xF113;"
+      horiz-adv-x="1792" d=" M1344 590.9866666666665C1287.2533333333333 590.9866666666665 1236.1066666666668 568.9599999999998 1197.2800000000002 533.4933333333331L665.2800000000001 843.7333333333333C669.3866666666667 860.5333333333333 672 878.08 672 896S669.3866666666667 931.4666666666666 665.2800000000001 948.2666666666667L1191.68 1255.52C1231.6266666666668 1218.1866666666665 1285.0133333333335 1195.04 1344 1195.04C1467.5733333333335 1195.04 1568 1295.4666666666665 1568 1419.04S1467.5733333333335 1643.04 1344 1643.04S1120 1542.6133333333332 1120 1419.04C1120 1401.12 1122.6133333333335 1383.5733333333333 1126.72 1366.773333333333L600.3199999999999 1059.5199999999998C560.3733333333333 1096.853333333333 506.9866666666666 1119.9999999999998 448 1119.9999999999998C324.4266666666666 1119.9999999999998 224 1019.5733333333332 224 895.9999999999998S324.4266666666666 671.9999999999998 448 671.9999999999998C506.9866666666666 671.9999999999998 560.3733333333333 695.1466666666665 600.3199999999999 732.4799999999998L1132.32 422.2399999999998C1128.5866666666666 406.5599999999997 1126.3466666666666 390.133333333333 1126.3466666666666 373.3333333333331C1126.3466666666666 253.1199999999997 1223.7866666666669 155.6799999999996 1344 155.6799999999996S1561.6533333333334 253.1199999999997 1561.6533333333334 373.3333333333331S1464.2133333333334 590.9866666666662 1344 590.9866666666662z" />
+    <glyph glyph-name="cog"
+      unicode="&#xF114;"
+      horiz-adv-x="1792" d=" M1450.7733333333333 823.1999999999999C1453.76 847.0933333333334 1456 871.3599999999999 1456 896S1453.76 944.9066666666666 1450.7733333333333 968.8L1608.6933333333336 1092.3733333333332C1622.8800000000003 1103.5733333333333 1626.986666666667 1123.7333333333331 1617.6533333333336 1140.1599999999999L1468.3200000000004 1398.8799999999999C1458.986666666667 1414.9333333333334 1439.5733333333335 1421.6533333333332 1422.7733333333338 1414.9333333333334L1236.8533333333337 1339.8933333333332C1198.4000000000003 1369.3866666666668 1156.2133333333338 1394.3999999999999 1110.6666666666672 1413.44L1082.6666666666667 1611.3066666666666C1079.3066666666668 1628.8533333333332 1064 1642.6666666666667 1045.3333333333335 1642.6666666666667H746.6666666666667C728 1642.6666666666667 712.6933333333334 1628.8533333333332 709.7066666666668 1611.3066666666666L681.7066666666668 1413.44C636.1600000000002 1394.4 593.9733333333335 1369.76 555.5200000000001 1339.8933333333332L369.6 1414.9333333333334C352.8000000000001 1421.28 333.3866666666667 1414.9333333333334 324.0533333333334 1398.88L174.72 1140.1599999999999C165.3866666666667 1124.1066666666666 169.4933333333334 1103.9466666666667 183.68 1092.3733333333332L341.2266666666667 968.8C338.2400000000001 944.9066666666666 336 920.64 336 896S338.2400000000001 847.0933333333334 341.2266666666667 823.1999999999999L183.68 699.6266666666668C169.4933333333334 688.4266666666667 165.3866666666667 668.2666666666667 174.72 651.8399999999999L324.0533333333334 393.1199999999999C333.3866666666667 377.0666666666666 352.8 370.3466666666666 369.6 377.0666666666666L555.5200000000001 452.1066666666666C593.9733333333334 422.6133333333333 636.16 397.5999999999999 681.7066666666668 378.56L709.7066666666668 180.6933333333334C712.6933333333334 163.1466666666668 728 149.3333333333333 746.6666666666667 149.3333333333333H1045.3333333333335C1064 149.3333333333333 1079.3066666666668 163.1466666666665 1082.2933333333333 180.6933333333334L1110.2933333333333 378.56C1155.84 397.5999999999999 1198.0266666666666 422.24 1236.48 452.1066666666666L1422.3999999999999 377.0666666666666C1439.2 370.7199999999998 1458.6133333333332 377.0666666666666 1467.9466666666665 393.1199999999999L1617.2799999999997 651.8399999999999C1626.6133333333332 667.8933333333332 1622.5066666666664 688.0533333333333 1608.3199999999997 699.6266666666668L1450.773333333333 823.1999999999999zM896 634.6666666666665C751.52 634.6666666666665 634.6666666666667 751.52 634.6666666666667 896S751.52 1157.3333333333333 896 1157.3333333333333S1157.3333333333335 1040.48 1157.3333333333335 896S1040.48 634.6666666666665 896 634.6666666666665z" />
+    <glyph glyph-name="square"
+      unicode="&#xF115;"
+      horiz-adv-x="1792" d=" M1344 1493.3333333333333H448C365.4933333333334 1493.3333333333333 298.6666666666667 1426.5066666666667 298.6666666666667 1344V448C298.6666666666667 365.4933333333331 365.4933333333334 298.6666666666665 448 298.6666666666665H1344C1426.506666666667 298.6666666666665 1493.3333333333335 365.4933333333331 1493.3333333333335 448V1344C1493.3333333333335 1426.5066666666667 1426.506666666667 1493.3333333333333 1344 1493.3333333333333zM1344 448H448V1344H1344V448z" />
+    <glyph glyph-name="circle"
+      unicode="&#xF116;"
+      horiz-adv-x="1792" d=" M149.3333333333334 896C149.3333333333334 483.6273867930074 483.6273867930075 149.3333333333333 896 149.3333333333333C1308.3726132069926 149.3333333333333 1642.6666666666667 483.6273867930074 1642.6666666666667 896C1642.6666666666667 1308.3726132069926 1308.3726132069926 1642.6666666666667 896 1642.6666666666667C483.6273867930075 1642.6666666666667 149.3333333333334 1308.3726132069926 149.3333333333334 896z" />
+    <glyph glyph-name="circle-outline"
+      unicode="&#xF117;"
+      horiz-adv-x="1792" d=" M896 1642.6666666666667C483.4666666666667 1642.6666666666667 149.3333333333334 1308.5333333333333 149.3333333333334 896S483.4666666666667 149.3333333333333 896 149.3333333333333S1642.6666666666667 483.4666666666667 1642.6666666666667 896S1308.5333333333333 1642.6666666666667 896 1642.6666666666667zM896 298.6666666666665C566.72 298.6666666666665 298.6666666666667 566.7199999999998 298.6666666666667 896S566.72 1493.3333333333333 896 1493.3333333333333S1493.3333333333335 1225.28 1493.3333333333335 896S1225.2800000000002 298.6666666666665 896 298.6666666666665z" />
+    <glyph glyph-name="circle-inner-circle"
+      unicode="&#xF118;"
+      horiz-adv-x="1792" d=" M896 1642.6666666666667C484.2133333333334 1642.6666666666667 149.3333333333334 1307.7866666666666 149.3333333333334 896S484.2133333333334 149.3333333333333 896 149.3333333333333S1642.6666666666667 484.2133333333331 1642.6666666666667 896S1307.7866666666669 1642.6666666666667 896 1642.6666666666667zM896 298.6666666666665C566.72 298.6666666666665 298.6666666666667 566.7199999999998 298.6666666666667 896S566.72 1493.3333333333333 896 1493.3333333333333S1493.3333333333335 1225.28 1493.3333333333335 896S1225.2800000000002 298.6666666666665 896 298.6666666666665zM1120 896C1120 772.4266666666666 1019.5733333333334 672 896 672S672 772.4266666666666 672 896S772.4266666666667 1120 896 1120S1120 1019.5733333333332 1120 896z" />
+    <glyph glyph-name="cancel"
+      unicode="&#xF119;"
+      horiz-adv-x="1792" d=" M896 1642.6666666666667C483.4666666666667 1642.6666666666667 149.3333333333334 1308.5333333333333 149.3333333333334 896S483.4666666666667 149.3333333333333 896 149.3333333333333S1642.6666666666667 483.4666666666667 1642.6666666666667 896S1308.5333333333333 1642.6666666666667 896 1642.6666666666667zM1269.3333333333335 628.3199999999999L1163.68 522.6666666666665L896 790.3466666666667L628.3199999999999 522.6666666666665L522.6666666666667 628.3199999999999L790.3466666666668 896L522.6666666666667 1163.68L628.3199999999999 1269.3333333333333L896 1001.6533333333332L1163.68 1269.3333333333333L1269.3333333333335 1163.68L1001.6533333333334 896L1269.3333333333335 628.3199999999999z" />
+    <glyph glyph-name="repeat"
+      unicode="&#xF11A;"
+      horiz-adv-x="1792" d=" M522.6666666666667 1269.3333333333333H1269.3333333333335V1045.3333333333333L1568 1344L1269.3333333333335 1642.6666666666667V1418.6666666666665H373.3333333333334V970.6666666666666H522.6666666666667V1269.3333333333333zM1269.3333333333335 522.6666666666665H522.6666666666667V746.6666666666665L224 448L522.6666666666667 149.3333333333333V373.3333333333333H1418.6666666666667V821.3333333333333H1269.3333333333335V522.6666666666665z" />
+    <glyph glyph-name="replay"
+      unicode="&#xF11B;"
+      horiz-adv-x="1792" d=" M896 1418.6666666666665V1717.3333333333333L522.6666666666667 1344L896 970.6666666666666V1269.3333333333333C1143.52 1269.3333333333333 1344 1068.8533333333332 1344 821.3333333333333S1143.52 373.3333333333333 896 373.3333333333333S448 573.813333333333 448 821.3333333333333H298.6666666666667C298.6666666666667 491.3066666666664 565.9733333333334 224 896 224S1493.3333333333335 491.3066666666664 1493.3333333333335 821.3333333333333S1226.0266666666669 1418.6666666666665 896 1418.6666666666665z" />
+    <glyph glyph-name="replay-5"
+      unicode="&#xF11C;"
+      horiz-adv-x="1792" d=" M660.3714133333334 1717.3333333333333L335.7084266666667 1392.6703466666665L660.3714133333334 1068.0069866666663L753.2063466666667 1160.7556799999998L591.9532266666668 1322.0088H640.5276266666667C824.5865600000001 1322.0088 979.1965866666668 1257.7249066666666 1104.3565866666668 1129.1780266666667C1229.5169600000002 1000.6311466666668 1292.09696 844.0435733333334 1292.09696 659.3958933333333H1424.6198400000003C1424.6198400000003 769.8312533333333 1403.987946666667 873.2897599999998 1362.7585066666668 969.736693333333C1321.5294400000002 1066.1836266666664 1264.85632 1150.4654933333334 1192.7051733333333 1222.61664C1120.5540266666667 1294.7677866666668 1036.27216 1351.4409066666665 939.8252266666668 1392.6703466666665C843.3782933333333 1433.899413333333 739.9194133333334 1454.5313066666663 629.4840533333335 1454.5313066666663H578.6666666666667L750.9629866666667 1626.8279999999995zM358.7445866666667 908.7385066666668V391.2447466666668H782.7134933333334V204.2809066666669H358.7445866666667V37.3333333333333H832.8405866666668C864.0012266666668 37.3333333333333 890.7352533333335 48.4653866666667 912.9926400000002 70.7227733333334C935.2504000000002 92.9805333333338 946.38208 119.6279466666665 946.38208 150.788586666667V441.2856000000004C946.38208 472.4462400000009 935.2504000000002 499.1802666666667 912.9926400000002 521.4376533333336C890.7352533333335 543.6950400000005 864.0012266666668 554.8270933333338 832.8405866666668 554.8270933333338H525.6921600000001V745.0695466666673H946.38208V908.7385066666671z" />
+    <glyph glyph-name="replay-10"
+      unicode="&#xF11D;"
+      horiz-adv-x="1792" d=" M1579.7522346666667 685.8215466666668C1579.7522346666667 872.3672533333332 1516.5291306666668 1030.5743466666665 1390.0825493333332 1160.4420799999998C1263.635968 1290.3101866666666 1107.4374453333332 1355.2440533333333 921.4866453333332 1355.2440533333333H872.395328L1035.2882399999999 1192.3512533333333L941.5690666666663 1098.6318933333332L613.5519039999998 1426.6496533333334L941.5690666666668 1754.6666666666667L1033.0569013333334 1663.17872L859.0069226666667 1489.1288533333336H910.3295786666667C1021.8998346666668 1489.1288533333336 1126.4041973333335 1468.3024533333335 1223.8426293333337 1426.6496533333334C1321.2807253333335 1384.9964799999998 1406.4460480000002 1327.7234133333332 1479.3390453333336 1254.8308266666668C1552.2316693333335 1181.9382400000004 1609.5045493333337 1096.7726933333336 1651.1573120000003 999.3345600000002C1692.8104480000004 901.896426666667 1713.6369973333335 797.3922133333334 1713.6369973333335 685.8215466666668zM305.4965498666667 74.6666666666665V808.5194133333331H118.5717866666667V978.1359466666667H478.5748426666667V74.6666666666665zM814.3472586666667 74.6666666666665C771.1928 74.6666666666665 734.9617333333334 89.3203733333328 705.654096 118.6285333333331C676.5766186666667 147.7056 662.0380853333335 183.8214933333331 662.0380853333335 226.9754666666668V825.8267733333334C662.0380853333335 868.9814933333333 676.6923146666668 905.2123733333336 705.9999520000001 934.5205333333334C735.0773920000001 963.5976000000002 771.1928000000001 978.135946666667 814.3472586666667 978.135946666667H1101.657648C1144.8117706666667 978.135946666667 1181.0428000000002 963.4822400000002 1210.3508480000003 934.1740800000003C1239.4279146666668 905.0966400000005 1253.9664480000004 868.9814933333339 1253.9664480000004 825.826773333334V226.9754666666677C1253.9664480000004 183.8214933333343 1239.3126293333335 147.5902400000016 1210.004618666667 118.2824533333346C1180.9275146666669 89.2053866666679 1144.811770666667 74.6666666666677 1101.6576480000003 74.6666666666677zM835.1163893333334 247.7451200000001H1080.888144V808.5194133333335H835.1163893333334z" />
+    <glyph glyph-name="replay-30"
+      unicode="&#xF11E;"
+      horiz-adv-x="1792" d=" M972.4166666666669 1754.6666666666667L646.4062453333333 1428.6563199999998L972.4166666666669 1102.645973333333L1065.604176 1195.7605333333331L903.7291573333334 1357.7084266666664H952.5104213333334C1137.3383840000001 1357.7084266666664 1292.5460426666668 1293.1251199999997 1418.2291573333334 1164.0417599999996C1543.9119733333334 1034.9580266666665 1606.7916480000001 877.7630399999995 1606.7916480000001 692.3436799999995H1739.8645973333334C1739.8645973333334 803.2404799999996 1719.1409386666667 907.0670933333328 1677.7395786666668 1003.9164799999994C1636.3382186666668 1100.7662399999992 1579.4214240000001 1185.4330133333326 1506.968736 1257.8854399999993C1434.516384 1330.3378666666663 1349.8497226666668 1387.2547733333327 1253 1428.6563199999991C1156.15024 1470.0578666666659 1052.323552 1490.781226666666 941.427088 1490.781226666666H890.3854026666668L1063.4166666666667 1663.8126399999996zM95.375 988.1666666666666V813.1666666666666H479.791648V617.1666666666665H219.2604176V442.1666666666665H479.7916480000001V249.6666666666665H95.375V74.6666666666665H498.822912C538.4290986666667 74.6666666666665 571.6348213333334 89.4114666666665 598.427088 118.9272000000001C625.2193546666666 148.4425600000004 638.604176 185.1079999999997 638.604176 228.7394666666665V834.1666666666666C638.604176 877.7981333333333 625.2193546666666 914.3907733333332 598.427088 943.906133333333C571.6348213333333 973.4214933333328 538.4290986666667 988.1666666666666 498.822912 988.1666666666666zM934.7187360000001 982.9164799999998C891.8251253333334 982.9164799999998 855.9225546666668 968.3598399999998 827.0208426666667 939.4582399999998C797.8899413333334 910.3274133333332 783.2708426666667 874.3619733333329 783.2708426666667 831.4685866666665V236.2498133333327C783.2708426666667 193.3567999999991 797.7549066666667 157.4540799999991 826.6562453333333 128.5521066666661C855.78752 99.4212799999991 891.8251253333334 84.8019199999999 934.7187360000001 84.8019199999999H1220.2604213333334C1263.1540320000001 84.8019199999999 1299.05664 99.285386666666 1327.9583146666669 128.1873600000004C1357.0892906666668 157.3181866666673 1371.6354026666668 193.3568000000003 1371.6354026666668 236.2498133333338V831.468586666667C1371.6354026666668 874.3619733333334 1357.2242506666669 910.2646933333336 1328.322912 939.1666666666672C1299.1919733333334 968.2974933333336 1263.1540320000001 982.9164800000004 1220.2604213333334 982.9164800000004zM955.354176 814.260533333333H1199.6979306666667V256.8854399999994H955.354176z" />
+    <glyph glyph-name="forward-5"
+      unicode="&#xF11F;"
+      horiz-adv-x="1792" d=" M1101.6480533333333 1754.6666666666667L1010.856 1663.9608533333333L1183.5338666666667 1491.2829866666668H1132.6037333333334C1021.92384 1491.2829866666668 918.23648 1470.6055466666667 821.576 1429.2850133333336C724.91552 1387.96448 640.4469866666666 1331.1659200000004 568.1360533333333 1258.8553600000005C495.8254933333333 1186.5444266666675 439.0269333333333 1102.075893333334 397.7064 1005.4154133333342C356.3858666666667 908.7553066666674 335.7084266666667 805.067573333334 335.7084266666667 694.3876800000012H468.5243733333334C468.5243733333334 879.4441600000009 531.24288 1036.3785600000012 656.6802666666666 1165.2095466666678C782.1172799999999 1294.0409066666678 937.06928 1358.4670400000014 1121.5358933333334 1358.4670400000014H1170.2178133333334L1008.6940266666666 1196.857386666668L1101.6480533333333 1103.9033600000014L1427.0297066666665 1429.2850133333347zM736.4041066666667 947.9138666666668V429.3613333333338H1161.3112V241.9834666666673H736.4041066666667V74.6666666666665H1211.5495466666666C1242.7792533333331 74.6666666666665 1269.4856533333332 85.8233600000003 1291.7926933333333 108.1300266666669C1314.0993599999997 130.4370666666669 1325.2560533333333 157.1434666666669 1325.2560533333333 188.3728000000003V479.5130666666664C1325.2560533333333 510.7427733333334 1314.09936 537.5357866666666 1291.7926933333333 559.8424533333332C1269.4856533333332 582.1491199999996 1242.7792533333331 593.3058133333334 1211.5495466666666 593.3058133333334H903.72128V783.969386666667H1325.2560533333333V947.9138666666668z" />
+    <glyph glyph-name="forward-10"
+      unicode="&#xF120;"
+      horiz-adv-x="1792" d=" M863.1064586666666 1754.6666666666667L774.038048 1665.6830400000001L943.437712 1496.2834133333333H893.4745866666667C784.8960373333334 1496.2834133333333 683.1768906666667 1475.9983466666665 588.3516426666667 1435.46256C493.5263573333334 1394.9263999999998 410.6614773333334 1339.2064 339.7235146666668 1268.2682133333333C268.7855146666667 1197.3303999999998 213.065328 1114.465333333333 172.5293546666667 1019.64016C131.9933813333334 924.814986666667 111.7083520000001 823.0958400000002 111.7083520000001 714.5170666666668H242.0027306666668C242.0027306666668 896.0604800000001 303.5307146666667 1050.0153066666667 426.5864213333334 1176.400586666667C549.6420906666668 1302.7858666666666 701.6524853333334 1365.9889600000004 882.6167093333335 1365.9889600000004H930.3743306666668L771.9173653333336 1207.4473600000001L863.1064586666668 1116.25808L1182.3107146666669 1435.4625600000004zM507.681104 953.8991466666668V788.8257066666666H689.5503253333334V74.6666666666665H858.0168426666667V953.8991466666668zM1184.7706826666667 953.8991466666668C1142.7737066666666 953.8991466666668 1107.6280693333333 939.7830399999998 1079.3306346666666 911.4854933333332C1050.80864 882.963573333333 1036.4929866666666 847.7033599999999 1036.4929866666666 805.7063466666664V222.8594666666663C1036.4929866666666 180.862453333333 1050.6939146666666 145.7172266666669 1078.9913493333333 117.4196800000002C1107.5133813333332 88.8977600000001 1142.7737066666666 74.6666666666665 1184.7706826666667 74.6666666666665H1464.3608C1506.3578133333333 74.6666666666665 1541.5034133333331 88.7827733333329 1569.8005866666667 117.0803199999996C1598.32288 145.6022399999997 1612.5536 180.862453333333 1612.5536 222.8594666666663V805.7063466666664C1612.5536 847.7033599999999 1598.4374933333334 882.8489599999999 1570.1399466666667 911.1465066666666C1541.6180266666668 939.6684266666668 1506.3578133333333 953.8991466666668 1464.3608 953.8991466666668zM1204.9595413333332 788.8257066666666H1444.17168V243.1333333333328H1204.9595413333332z" />
+    <glyph glyph-name="forward-30"
+      unicode="&#xF121;"
+      horiz-adv-x="1792" d=" M953.8155573333333 1754.6666666666667L862.8455360000002 1663.7831466666664L1035.861904 1490.7670399999997H984.8320533333334C873.935328 1490.7670399999997 770.044464 1470.0489066666662 673.1947040000001 1428.6473599999995C576.3449066666667 1387.245813333333 491.7108000000001 1330.3359999999993 419.2583360000001 1257.883573333333C346.8057973333335 1185.4311466666663 289.8959840000001 1100.7972266666661 248.4945493333334 1003.9470933333334C207.0931146666668 907.0973333333334 186.3750186666668 803.2065066666665 186.3750186666668 692.31008H319.4511786666668C319.4511786666668 877.729066666667 382.2928106666668 1034.97072 507.9757760000002 1164.0544533333334C633.6587040000002 1293.1381866666666 788.9145226666668 1357.69088 973.7423733333334 1357.69088H1022.5196426666668L860.6795680000001 1195.7638933333335L953.8155573333333 1102.6280533333336L1279.834864 1428.6473600000002zM522.53096 988.1789866666668V813.1700266666666H906.9443413333335V617.1946666666665H646.4234933333333V442.1857066666662H906.9443413333335V249.6756266666662H522.53096V74.6666666666665H926.0047253333335C965.6108746666667 74.6666666666665 998.759552 89.4234133333337 1025.5519306666667 118.9387733333329C1052.3443093333335 148.4541333333332 1065.7520533333336 185.0777599999997 1065.7520533333336 228.7092266666664V834.1364266666666C1065.7520533333336 877.7678933333333 1052.3443093333335 914.3915200000002 1025.5519306666667 943.90688C998.7595520000002 973.4222399999998 965.6108746666667 988.1789866666668 926.0047253333335 988.1789866666668zM1313.017290666667 981.9413333333335C1270.1236426666667 981.9413333333335 1234.2276800000002 967.4369600000005 1205.3260800000003 938.53536C1176.1951040000001 909.4045333333336 1161.5738400000002 873.3913066666669 1161.5738400000002 830.4975466666665V235.2937066666659C1161.5738400000002 192.3999466666655 1176.0779146666669 156.5043199999991 1204.9795146666668 127.6027199999994C1234.1104906666667 98.4718933333325 1270.1236426666667 83.9369066666657 1313.017290666667 83.9369066666657H1598.5763733333335C1641.4701333333337 83.9369066666657 1677.3661333333334 98.3546666666657 1706.2677333333338 127.2558933333319C1735.3985600000005 156.3870933333324 1749.9331733333338 192.3999466666655 1749.9331733333338 235.293706666665V830.4975466666649C1749.9331733333338 873.3913066666647 1735.5157866666668 909.2873066666648 1706.614186666667 938.188906666665C1677.4833600000002 967.3197333333314 1641.4701333333335 981.941333333332 1598.5763733333335 981.941333333332zM1333.6371253333336 813.3432533333336H1577.8701866666668V255.913653333334H1333.6371253333336z" />
+    <glyph glyph-name="audio"
+      unicode="&#xF122;"
+      horiz-adv-x="1792" d=" M896 1717.3333333333333C524.9066666666668 1717.3333333333333 224 1416.4266666666667 224 1045.3333333333333V522.6666666666665C224 399.0933333333333 324.4266666666667 298.6666666666665 448 298.6666666666665H672V896H373.3333333333334V1045.3333333333333C373.3333333333334 1333.92 607.4133333333334 1568 896 1568S1418.6666666666667 1333.92 1418.6666666666667 1045.3333333333333V896H1120V298.6666666666665H1344C1467.5733333333335 298.6666666666665 1568 399.0933333333333 1568 522.6666666666665V1045.3333333333333C1568 1416.4266666666667 1267.0933333333332 1717.3333333333333 896 1717.3333333333333z" />
+    <glyph glyph-name="next-item"
+      unicode="&#xF123;"
+      horiz-adv-x="1792" d=" M448 448L1082.6666666666667 896L448 1344V448zM1194.6666666666667 1344V448H1344V1344H1194.6666666666667z" />
+    <glyph glyph-name="previous-item"
+      unicode="&#xF124;"
+      horiz-adv-x="1792" d=" M448 1344H597.3333333333334V448H448zM709.3333333333334 896L1344 448V1344z" />
+    <glyph glyph-name="shuffle"
+      unicode="&#xF125;"
+      horiz-adv-x="1792" d=" M790.3466666666668 1107.3066666666666L404.3200000000001 1493.3333333333333L298.6666666666667 1387.6799999999998L684.6933333333334 1001.6533333333332L790.3466666666668 1107.3066666666664zM1082.6666666666667 1493.3333333333333L1235.3600000000001 1340.6399999999999L298.6666666666667 404.32L404.3200000000001 298.6666666666665L1341.0133333333335 1235.3600000000001L1493.3333333333335 1082.6666666666665V1493.3333333333333H1082.6666666666667zM1107.3066666666668 790.3466666666667L1001.6533333333334 684.6933333333334L1235.36 450.9866666666667L1082.6666666666667 298.6666666666665H1493.3333333333335V709.3333333333333L1340.6399999999999 556.6399999999999L1107.3066666666666 790.3466666666664z" />
+    <glyph glyph-name="cast"
+      unicode="&#xF126;"
+      horiz-adv-x="1792" d=" M1568 1568H224C141.4933333333334 1568 74.6666666666667 1501.1733333333332 74.6666666666667 1418.6666666666665V1194.6666666666665H224V1418.6666666666665H1568V373.3333333333333H1045.3333333333335V224H1568C1650.506666666667 224 1717.3333333333335 290.8266666666666 1717.3333333333335 373.3333333333333V1418.6666666666665C1717.3333333333335 1501.1733333333332 1650.506666666667 1568 1568 1568zM74.6666666666667 448V224H298.6666666666667C298.6666666666667 347.5733333333333 198.2400000000001 448 74.6666666666667 448zM74.6666666666667 746.6666666666665V597.3333333333333C280.7466666666667 597.3333333333333 448 430.0799999999997 448 224H597.3333333333334C597.3333333333334 512.5866666666668 363.2533333333334 746.6666666666665 74.6666666666667 746.6666666666665zM74.6666666666667 1045.3333333333333V896C445.76 896 746.6666666666667 595.0933333333332 746.6666666666667 224H896C896 677.5999999999999 528.2666666666668 1045.3333333333333 74.6666666666667 1045.3333333333333z" />
+    <glyph glyph-name="picture-in-picture-enter"
+      unicode="&#xF127;"
+      horiz-adv-x="1792" d=" M1418.6666666666667 970.6666666666666H821.3333333333334V523.0399999999997H1418.6666666666667V970.6666666666666zM1717.3333333333335 373.3333333333333V1420.1599999999999C1717.3333333333335 1502.2933333333333 1650.1333333333334 1568 1568 1568H224C141.8666666666667 1568 74.6666666666667 1502.2933333333333 74.6666666666667 1420.1599999999999V373.3333333333333C74.6666666666667 291.1999999999998 141.8666666666667 224 224 224H1568C1650.1333333333334 224 1717.3333333333335 291.1999999999998 1717.3333333333335 373.3333333333333zM1568 371.8399999999999H224V1420.9066666666668H1568V371.8399999999999z" />
+    <glyph glyph-name="picture-in-picture-exit"
+      unicode="&#xF128;"
+      horiz-adv-x="2190.222222222222" d=" M1792 1393.7777777777778H398.2222222222223V398.2222222222222H1792V1393.7777777777778zM2190.222222222222 199.1111111111111V1594.88C2190.222222222222 1704.391111111111 2100.6222222222223 1792 1991.1111111111113 1792H199.1111111111111C89.6 1792 0 1704.391111111111 0 1594.88V199.1111111111111C0 89.5999999999999 89.6 0 199.1111111111111 0H1991.1111111111113C2100.6222222222223 0 2190.222222222222 89.5999999999999 2190.222222222222 199.1111111111111zM1991.1111111111113 197.1200000000001H199.1111111111111V1595.8755555555556H1991.1111111111113V197.1200000000001z" />
+    <glyph glyph-name="facebook"
+      unicode="&#xF129;"
+      horiz-adv-x="1792" d=" M1343 1780V1516H1186Q1100 1516 1070 1480T1040 1372V1183H1333L1294 887H1040V128H734V887H479V1183H734V1401Q734 1587 838 1689.5T1115 1792Q1262 1792 1343 1780z" />
+    <glyph glyph-name="linkedin"
+      unicode="&#xF12A;"
+      horiz-adv-x="1792" d=" M477 1167V176H147V1167H477zM498 1473Q499 1400 447.5 1351T312 1302H310Q228 1302 178 1351T128 1473Q128 1547 179.5 1595.5T314 1644T447 1595.5T498 1473zM1664 744V176H1335V706Q1335 811 1294.5 870.5T1168 930Q1105 930 1062.5 895.5T999 810Q988 780 988 729V176H659Q661 575 661 823T660 1119L659 1167H988V1023H986Q1006 1055 1027 1079T1083.5 1131T1170.5 1174.5T1285 1190Q1456 1190 1560 1076.5T1664 744z" />
+    <glyph glyph-name="twitter"
+      unicode="&#xF12B;"
+      horiz-adv-x="1792" d=" M1684 1384Q1617 1286 1522 1217Q1523 1203 1523 1175Q1523 1045 1485 915.5T1369.5 667T1185 456.5T927 310.5T604 256Q333 256 108 401Q143 397 186 397Q411 397 587 535Q482 537 399 599.5T285 759Q318 754 346 754Q389 754 431 765Q319 788 245.5 876.5T172 1082V1086Q240 1048 318 1045Q252 1089 213 1160T174 1314Q174 1402 218 1477Q339 1328 512.5 1238.5T884 1139Q876 1177 876 1213Q876 1347 970.5 1441.5T1199 1536Q1339 1536 1435 1434Q1544 1455 1640 1512Q1603 1397 1498 1334Q1591 1344 1684 1384z" />
+    <glyph glyph-name="tumblr"
+      unicode="&#xF12C;"
+      horiz-adv-x="1792" d=" M1328 463L1408 226Q1385 191 1297 160T1120 128Q1016 126 929.5 154T787 228T692 334T636.5 454T620 572V1116H452V1331Q524 1357 581 1400.5T672 1490.5T730 1592.5T764 1691.5T779 1780Q780 1785 783.5 1788.5T791 1792H1035V1368H1368V1116H1034V598Q1034 568 1040.5 542T1063 489.5T1112.5 448T1194 434Q1272 436 1328 463z" />
+    <glyph glyph-name="pinterest"
+      unicode="&#xF12D;"
+      horiz-adv-x="1792" d=" M1664 896Q1664 687 1561 510.5T1281.5 231T896 128Q785 128 678 160Q737 253 756 324Q765 358 810 535Q830 496 883 467.5T997 439Q1118 439 1213 507.5T1360 696T1412 966Q1412 1080 1352.5 1180T1180 1343T925 1406Q820 1406 729 1377T574.5 1300T465.5 1189.5T398.5 1060T377 926Q377 822 417 743T534 632Q564 620 572 652Q574 659 580 683T588 713Q594 736 577 756Q526 817 526 907Q526 1058 630.5 1166.5T904 1275Q1055 1275 1139.5 1193T1224 980Q1224 810 1155.5 691T980 572Q919 572 882 615.5T859 720Q867 755 885.5 813.5T915.5 916.5T927 992Q927 1042 900 1075T823 1108Q761 1108 718 1051T675 909Q675 836 700 787L601 369Q584 299 588 192Q382 283 255 473T128 896Q128 1105 231 1281.5T510.5 1561T896 1664T1281.5 1561T1561 1281.5T1664 896z" />
+    <glyph glyph-name="audio-description"
+      unicode="&#xF12E;"
+      horiz-adv-x="1792" d=" M795.5138904615 457.270933L795.5138904615 1221.5248286325C971.84576475 1225.085121904 1107.39330415 1232.12360523 1207.223857 1161.5835220499998C1303.033991 1093.8857027 1377.7922305 962.20560625 1364.3373135 792.9476205000001C1350.102593 613.9029365000001 1219.6655764999998 463.4600215 1050.12389545 448.2843645000001C965.8259268 440.7398275000001 798.21890505 448.2843645000001 798.21890505 448.2843645000001C798.21890505 448.2843645000001 795.2791410655 453.016494 795.5138904615 457.270933M966.1564647 649.0863960000001C1076.16084135 644.6767075 1152.385591 707.3020429999999 1163.8910079999998 807.9351875C1179.2994744999999 942.71878505 1089.73043585 1030.3691748 960.74508635 1020.7227954L960.74508635 658.08043C960.6196169500002 652.9482330000001 962.7606933 650.3134680000001 966.1564647 649.0863960000001 M1343.2299685 457.3517725000002C1389.9059734 444.3690160000001 1404.0840274999998 496.0596970000001 1424.48294065 532.2791494999999C1469.0084255 611.2788500000001 1502.5101322 712.8584189999999 1503.0416912 828.9881705C1503.8147453000001 995.5680973 1438.8404296 1117.7973688000002 1378.4383305 1200.62456881045L1348.652139905 1200.62456881045C1346.6001063899998 1187.06858424 1356.44474056 1175.024791325 1362.18395859 1164.6588891000001C1408.2649952 1081.49431985 1450.96645015 966.7230041 1451.57490975 834.9817034999999C1452.27106325 683.8655425000002 1402.00636065 557.5072264999999 1343.2299685 457.3517725000002 M1488.0379675 457.3517725000002C1534.7139723999999 444.3690160000001 1548.8825828 496.0671625 1569.29093965 532.2791494999999C1613.8164245 611.2788500000001 1647.3113856500001 712.8584189999999 1647.8496902000002 828.9881705C1648.6227442999998 995.5680973 1583.6484286 1117.7973688000002 1523.2463295 1200.62456881045L1493.460138905 1200.62456881045C1491.40810539 1187.06858424 1501.250041305 1175.021805755 1506.9919575899999 1164.6588891000001C1553.0729942 1081.49431985 1595.7757984 966.7230041 1596.3829087499998 834.9817034999999C1597.07906225 683.8655425000002 1546.8143596500001 557.5072264999999 1488.0379675 457.3517725000002 M1631.9130380000001 457.3517725000002C1678.5890429 444.3690160000001 1692.7576533 496.0671625 1713.1660101500001 532.2791494999999C1757.691495 611.2788500000001 1791.1864561500001 712.8584189999999 1791.7247607000002 828.9881705C1792.4978148 995.5680973 1727.5234991000002 1117.7973688000002 1667.1214 1200.62456881045L1637.3352094050001 1200.62456881045C1635.28317589 1187.06858424 1645.1251118050002 1175.02329854 1650.86702809 1164.6588891000001C1696.9480647 1081.49431985 1739.64951965 966.7230041 1740.25797925 834.9817034999999C1740.95413275 683.8655425000002 1690.6894301500001 557.5072264999999 1631.9130380000001 457.3517725000002 M15.66796875 451.481947L254.03034755 451.481947L319.0356932 551.1747990000001L543.6261075 551.6487970000001C543.6261075 551.6487970000001 543.8541115 483.7032095 543.8541115 451.481947L714.4993835 451.481947L714.4993835 1230.9210795L508.643051 1230.9210795C488.8579955 1197.5411595 15.66796875 451.481947 15.66796875 451.481947L15.66796875 451.481947zM550.0048155000001 959.9708615L550.0048155000001 710.916297L408.4199 711.8642895L550.0048155000001 959.9708615L550.0048155000001 959.9708615z" />
+  </font>
+</defs>
+</svg>
diff --git a/priv/static/video.js/font/VideoJS.ttf b/priv/static/video.js/font/VideoJS.ttf
new file mode 100755
index 0000000..69c26b9
--- /dev/null
+++ b/priv/static/video.js/font/VideoJS.ttf
diff --git a/priv/static/video.js/font/VideoJS.woff b/priv/static/video.js/font/VideoJS.woff
new file mode 100755
index 0000000..df576af
--- /dev/null
+++ b/priv/static/video.js/font/VideoJS.woff
diff --git a/priv/static/video.js/lang/ar.js b/priv/static/video.js/lang/ar.js
new file mode 100644
index 0000000..be0a7c4
--- /dev/null
+++ b/priv/static/video.js/lang/ar.js
@@ -0,0 +1,96 @@
+videojs.addLanguage('ar', {
+  "Play": "تشغيل",
+  "Pause": "إيقاف",
+  "Current Time": "الوقت الحالي",
+  "Duration": "مدة",
+  "Remaining Time": "الوقت المتبقي",
+  "Stream Type": "نوع التيار",
+  "LIVE": "مباشر",
+  "Loaded": "تم التحميل",
+  "Progress": "التقدم",
+  "Fullscreen": "ملء الشاشة",
+  "Exit Fullscreen": "تعطيل ملء الشاشة",
+  "Mute": "صامت",
+  "Unmute": "غير الصامت",
+  "Playback Rate": "معدل التشغيل",
+  "Subtitles": "الترجمة",
+  "subtitles off": "إيقاف الترجمة",
+  "Captions": "التعليقات",
+  "captions off": "إيقاف التعليقات",
+  "Chapters": "فصول",
+  "You aborted the media playback": "لقد ألغيت تشغيل الفيديو",
+  "A network error caused the media download to fail part-way.": "تسبب خطأ في الشبكة بفشل تحميل الفيديو بالكامل.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "لا يمكن تحميل الفيديو بسبب فشل في الخادوم أو الشبكة ، أو فشل بسبب عدم إمكانية قراءة تنسيق الفيديو.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "تم إيقاف تشغيل الفيديو بسبب مشكلة فساد أو لأن الفيديو المستخدم يستخدم ميزات غير مدعومة من متصفحك.",
+  "No compatible source was found for this media.": "فشل العثور على أي مصدر متوافق مع هذا الفيديو.",
+  "Play Video": "تشغيل الفيديو",
+  "Close": "أغلق",
+  "Modal Window": "نافذة مشروطة",
+  "This is a modal window": "هذه نافذة مشروطة",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "يمكن غلق هذه النافذة المشروطة عن طريق الضغط على زر الخروج أو تفعيل زر الإغلاق",
+  ", opens captions settings dialog": ", تفتح نافذة  خيارات التعليقات",
+  ", opens subtitles settings dialog": ", تفتح نافذة  خيارات الترجمة",
+  ", selected": ", مختار",
+  "Audio Player": "مشغل الصوت",
+  "Video Player": "مشغل الفيديو",
+  "Replay": "إعادة التشغيل",
+  "Seek to live, currently behind live": "ذهاب إلى نقطة البث المباشر، متأخر عن البث المباشر حاليًا",
+  "Seek to live, currently playing live": "ذهاب إلى نقطة البث المباشر، البث المباشر قيد التشغيل حاليًا",
+  "Progress Bar": "شريط التقدم",
+  "progress bar timing: currentTime={1} duration={2}": "{1} من {2}",
+  "Descriptions": "الأوصاف",
+  "descriptions off": "إخفاء الأوصاف",
+  "Audio Track": "المسار الصوتي",
+  "Volume Level": "مستوى الصوت",
+  "The media is encrypted and we do not have the keys to decrypt it.": "الوسائط مشفرة وليس لدينا الرموز اللازمة لفك شفرتها.",
+  "Close Modal Dialog": "إغلاق مربع الحوار المشروط",
+  ", opens descriptions settings dialog": "، يفتح مربع حوار إعدادات الأوصاف",
+  "captions settings": "إعدادات التعليقات التوضيحية",
+  "subtitles settings": "إعدادات الترجمات",
+  "descriptions settings": "إعدادات الأوصاف",
+  "Text": "النص",
+  "White": "أبيض",
+  "Black": "أسود",
+  "Red": "أحمر",
+  "Green": "أخضر",
+  "Blue": "أزرق",
+  "Yellow": "أصفر",
+  "Magenta": "أرجواني",
+  "Cyan": "أزرق سماوي",
+  "Background": "الخلفية",
+  "Window": "نافذة",
+  "Transparent": "شفاف",
+  "Semi-Transparent": "نصف شفاف",
+  "Opaque": "معتم",
+  "Font Size": "حجم الخط",
+  "Text Edge Style": "نمط حواف النص",
+  "None": "لا شيء",
+  "Raised": "بارز",
+  "Depressed": "منخفض",
+  "Uniform": "منتظم",
+  "Drop shadow": "ظل خلفي",
+  "Font Family": "عائلة الخطوط",
+  "Proportional Sans-Serif": "Proportional Sans-Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Proportional Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Casual": "Casual",
+  "Script": "Script",
+  "Small Caps": "Small Caps",
+  "Reset": "إعادة الضبط",
+  "restore all settings to the default values": "استعادة كل الإعدادات إلى القيم الافتراضية",
+  "Done": "تم",
+  "Caption Settings Dialog": "مربع حوار إعدادات التعليقات التوضيحية",
+  "Beginning of dialog window. Escape will cancel and close the window.": "بداية نافذة مربع حوار. الضغط على زر \"Escape\" سيؤدي إلى الإلغاء وإغلاق النافذة.",
+  "End of dialog window.": "نهاية نافذة مربع حوار.",
+  "{1} is loading.": "{1} قيد التحميل.",
+  "Exit Picture-in-Picture": "خرج من وضع صورة داخل صورة",
+  "Picture-in-Picture": "صورة داخل صورة",
+  "No content": "لا يوجد محتوى",
+  "Color": "اللون",
+  "Opacity": "معدل الشفافية",
+  "Text Background": "خلفية النص",
+  "Caption Area Background": "خلفية منطقة التسمية التوضيحية",
+  "Skip forward {1} seconds": "التخطي للأمام {1}",
+  "Skip backward {1} seconds": "الرجوع للخلف {1}"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/ar.json b/priv/static/video.js/lang/ar.json
new file mode 100644
index 0000000..da76477
--- /dev/null
+++ b/priv/static/video.js/lang/ar.json
@@ -0,0 +1,96 @@
+{
+  "Play": "تشغيل",
+  "Pause": "إيقاف",
+  "Current Time": "الوقت الحالي",
+  "Duration": "مدة",
+  "Remaining Time": "الوقت المتبقي",
+  "Stream Type": "نوع التيار",
+  "LIVE": "مباشر",
+  "Loaded": "تم التحميل",
+  "Progress": "التقدم",
+  "Fullscreen": "ملء الشاشة",
+  "Exit Fullscreen": "تعطيل ملء الشاشة",
+  "Mute": "صامت",
+  "Unmute": "غير الصامت",
+  "Playback Rate": "معدل التشغيل",
+  "Subtitles": "الترجمة",
+  "subtitles off": "إيقاف الترجمة",
+  "Captions": "التعليقات",
+  "captions off": "إيقاف التعليقات",
+  "Chapters": "فصول",
+  "You aborted the media playback": "لقد ألغيت تشغيل الفيديو",
+  "A network error caused the media download to fail part-way.": "تسبب خطأ في الشبكة بفشل تحميل الفيديو بالكامل.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "لا يمكن تحميل الفيديو بسبب فشل في الخادوم أو الشبكة ، أو فشل بسبب عدم إمكانية قراءة تنسيق الفيديو.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "تم إيقاف تشغيل الفيديو بسبب مشكلة فساد أو لأن الفيديو المستخدم يستخدم ميزات غير مدعومة من متصفحك.",
+  "No compatible source was found for this media.": "فشل العثور على أي مصدر متوافق مع هذا الفيديو.",
+  "Play Video": "تشغيل الفيديو",
+  "Close": "أغلق",
+  "Modal Window": "نافذة مشروطة",
+  "This is a modal window": "هذه نافذة مشروطة",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "يمكن غلق هذه النافذة المشروطة عن طريق الضغط على زر الخروج أو تفعيل زر الإغلاق",
+  ", opens captions settings dialog": ", تفتح نافذة  خيارات التعليقات",
+  ", opens subtitles settings dialog": ", تفتح نافذة  خيارات الترجمة",
+  ", selected": ", مختار",
+  "Audio Player": "مشغل الصوت",
+  "Video Player": "مشغل الفيديو",
+  "Replay": "إعادة التشغيل",
+  "Seek to live, currently behind live": "ذهاب إلى نقطة البث المباشر، متأخر عن البث المباشر حاليًا",
+  "Seek to live, currently playing live": "ذهاب إلى نقطة البث المباشر، البث المباشر قيد التشغيل حاليًا",
+  "Progress Bar": "شريط التقدم",
+  "progress bar timing: currentTime={1} duration={2}": "{1} من {2}",
+  "Descriptions": "الأوصاف",
+  "descriptions off": "إخفاء الأوصاف",
+  "Audio Track": "المسار الصوتي",
+  "Volume Level": "مستوى الصوت",
+  "The media is encrypted and we do not have the keys to decrypt it.": "الوسائط مشفرة وليس لدينا الرموز اللازمة لفك شفرتها.",
+  "Close Modal Dialog": "إغلاق مربع الحوار المشروط",
+  ", opens descriptions settings dialog": "، يفتح مربع حوار إعدادات الأوصاف",
+  "captions settings": "إعدادات التعليقات التوضيحية",
+  "subtitles settings": "إعدادات الترجمات",
+  "descriptions settings": "إعدادات الأوصاف",
+  "Text": "النص",
+  "White": "أبيض",
+  "Black": "أسود",
+  "Red": "أحمر",
+  "Green": "أخضر",
+  "Blue": "أزرق",
+  "Yellow": "أصفر",
+  "Magenta": "أرجواني",
+  "Cyan": "أزرق سماوي",
+  "Background": "الخلفية",
+  "Window": "نافذة",
+  "Transparent": "شفاف",
+  "Semi-Transparent": "نصف شفاف",
+  "Opaque": "معتم",
+  "Font Size": "حجم الخط",
+  "Text Edge Style": "نمط حواف النص",
+  "None": "لا شيء",
+  "Raised": "بارز",
+  "Depressed": "منخفض",
+  "Uniform": "منتظم",
+  "Drop shadow": "ظل خلفي",
+  "Font Family": "عائلة الخطوط",
+  "Proportional Sans-Serif": "Proportional Sans-Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Proportional Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Casual": "Casual",
+  "Script": "Script",
+  "Small Caps": "Small Caps",
+  "Reset": "إعادة الضبط",
+  "restore all settings to the default values": "استعادة كل الإعدادات إلى القيم الافتراضية",
+  "Done": "تم",
+  "Caption Settings Dialog": "مربع حوار إعدادات التعليقات التوضيحية",
+  "Beginning of dialog window. Escape will cancel and close the window.": "بداية نافذة مربع حوار. الضغط على زر \"Escape\" سيؤدي إلى الإلغاء وإغلاق النافذة.",
+  "End of dialog window.": "نهاية نافذة مربع حوار.",
+  "{1} is loading.": "{1} قيد التحميل.",
+  "Exit Picture-in-Picture": "خرج من وضع صورة داخل صورة",
+  "Picture-in-Picture": "صورة داخل صورة",
+  "No content": "لا يوجد محتوى",
+  "Color": "اللون",
+  "Opacity": "معدل الشفافية",
+  "Text Background": "خلفية النص",
+  "Caption Area Background": "خلفية منطقة التسمية التوضيحية",
+  "Skip forward {1} seconds": "التخطي للأمام {1}",
+  "Skip backward {1} seconds": "الرجوع للخلف {1}"
+}
diff --git a/priv/static/video.js/lang/az.js b/priv/static/video.js/lang/az.js
new file mode 100644
index 0000000..74b1911
--- /dev/null
+++ b/priv/static/video.js/lang/az.js
@@ -0,0 +1,97 @@
+videojs.addLanguage('az', {
+  "Audio Player": "Audiopleyer",
+  "Video Player": "Videopleyer",
+  "Play": "Oynat",
+  "Pause": "Pauza",
+  "Replay": "Yenidən oynat",
+  "Current Time": "Cari Vaxt",
+  "Duration": "Müddət",
+  "Remaining Time": "Qalan vaxt",
+  "Stream Type": "Yayım növü",
+  "LIVE": "CANLI",
+  "Seek to live, currently behind live": "Canlı yayım axtarışı, hal-hazırda canlı yayımdan geridədir",
+  "Seek to live, currently playing live": "Canlı yayım axtarışı, hal-hazırda canlı yayım göstərilir",
+  "Loaded": "Yükləndi",
+  "Progress": "Yüklənmə",
+  "Progress Bar": "Yüklənmə göstəricisi",
+  "progress bar timing: currentTime={1} duration={2}": "{1} / {2}",
+  "Fullscreen": "Tam ekran",
+  "Exit Fullscreen": "Tam ekrandan çıx",
+  "Mute": "Səssizi qoş",
+  "Unmute": "Səssizi söndür",
+  "Playback Rate": "Oynatma sürəti",
+  "Subtitles": "Alt yazılar",
+  "subtitles off": "Alt yazıları söndür",
+  "Captions": "Başlıqlar",
+  "captions off": "Başlıqları söndür",
+  "Chapters": "Fəsillər",
+  "Descriptions": "Təsvirlər",
+  "descriptions off": "Təsvirləri söndür",
+  "Audio Track": "Audio Trek",
+  "Volume Level": "Səs Səviyyəsi",
+  "You aborted the media playback": "Siz medianın oxudulmasını dayandırdınız",
+  "A network error caused the media download to fail part-way.": "Şəbəkə xətası səbəbindən medianın endirilməsi yarıda qaldı.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Yükləmə xətası.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Media faylının korlanması səbəbilə və ya media faylın brauzerinizin dəstəkləmədiyi funksiyalardan istifadə etdiyinə görə medianın oxudulması dayandırılıb.",
+  "No compatible source was found for this media.": "Bu media üçün uyğun mənbə tapılmadı.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Media faylı şifrələnib və onun şifrəsini açmaq üçün açarlar yoxdur.",
+  "Play Video": "Videonu oynat",
+  "Close": "Bağla",
+  "Close Modal Dialog": "Modal dialoqunu bağla",
+  "Modal Window": "Modal pəncərəsi",
+  "This is a modal window": "Bu modal pəncərəsidir",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Bu modal Escape düyməsini basmaqla və ya bağlama düyməsini sıxmaqla bağlana bilər.",
+  ", opens captions settings dialog": ", başlıq parametrləri dialoqunu açır",
+  ", opens subtitles settings dialog": ", altyazı parametrləri dialoqunu açır",
+  ", opens descriptions settings dialog": ", təsvir parametrləri dialoqunu açır",
+  ", selected": ", seçilmiş",
+  "captions settings": "başlıq parametrləri",
+  "subtitles settings": "altyazı parametrləri",
+  "descriptions settings": "təsvir parametrləri",
+  "Text": "Tekst",
+  "White": "Ağ",
+  "Black": "Qara",
+  "Red": "Qırmızı",
+  "Green": "Yaşıl",
+  "Blue": "Göy",
+  "Yellow": "Sarı",
+  "Magenta": "Bənövşəyi",
+  "Cyan": "Mavi",
+  "Background": "Fon",
+  "Window": "Pəncərə",
+  "Transparent": "Şəffaf",
+  "Semi-Transparent": "Yarım-Şəffaf",
+  "Opaque": "Qeyri-şəffaf",
+  "Font Size": "Şrift Ölçüsü",
+  "Text Edge Style": "Mətnin kənarlarının üslubu",
+  "None": "Heç biri",
+  "Raised": "Artırılmış",
+  "Depressed": "Azaldılmış",
+  "Uniform": "Ümumiləşdirilmiş",
+  "Drop shadow": "Arxa kölgə",
+  "Font Family": "Şrift Ailəsi",
+  "Proportional Sans-Serif": "Proporsional Sans-Serif",
+  "Monospace Sans-Serif": "Birenli Sans-Serif",
+  "Proportional Serif": "Proporsional Serif",
+  "Monospace Serif": "Birenli Serif",
+  "Casual": "Gündəlik",
+  "Script": "Skript",
+  "Small Caps": "Kiçik böyük hərflər",
+  "Reset": "Sıfırla",
+  "restore all settings to the default values": "bütün parametrləri susmaya görə bərpa edin",
+  "Done": "Bitdi",
+  "Caption Settings Dialog": "Başlıq Parametrləri Dialoqu",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Dialoq pəncərəsinin başlanğıcı. Escape düyməsi ləğv edəcək və pəncərəni bağlayacaq.",
+  "End of dialog window.": "Dialoq pəncərəsinin sonu.",
+  "{1} is loading.": "{1} yüklənir.",
+  "Exit Picture-in-Picture": "Şəkil içində şəkil rejimindən çıxın",
+  "Picture-in-Picture": "Şəkil içində şəkil rejimi",
+  "No content": "Məzmun yoxdur",
+  "Color": "Rəng",
+  "Opacity": "Qeyri-şəffaflıq",
+  "Text Background": "Tekst Fonu",
+  "Caption Area Background": "Başlıq Sahəsinin Fonu",
+  "Playing in Picture-in-Picture": "Şəkil içində şəkil rejimində oynayır",
+  "Skip backward {1} seconds": "{1} saniyə geriyə keçin",
+  "Skip forward {1} seconds": "{1} saniyə qabağa keçin"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/az.json b/priv/static/video.js/lang/az.json
new file mode 100644
index 0000000..37e4a98
--- /dev/null
+++ b/priv/static/video.js/lang/az.json
@@ -0,0 +1,97 @@
+{
+    "Audio Player": "Audiopleyer",
+    "Video Player": "Videopleyer",
+    "Play": "Oynat",
+    "Pause": "Pauza",
+    "Replay": "Yenidən oynat",
+    "Current Time": "Cari Vaxt",
+    "Duration": "Müddət",
+    "Remaining Time": "Qalan vaxt",
+    "Stream Type": "Yayım növü",
+    "LIVE": "CANLI",
+    "Seek to live, currently behind live": "Canlı yayım axtarışı, hal-hazırda canlı yayımdan geridədir",
+    "Seek to live, currently playing live": "Canlı yayım axtarışı, hal-hazırda canlı yayım göstərilir",
+    "Loaded": "Yükləndi",
+    "Progress": "Yüklənmə",
+    "Progress Bar": "Yüklənmə göstəricisi",
+    "progress bar timing: currentTime={1} duration={2}": "{1} / {2}",
+    "Fullscreen": "Tam ekran",
+    "Exit Fullscreen": "Tam ekrandan çıx",
+    "Mute": "Səssizi qoş",
+    "Unmute": "Səssizi söndür",
+    "Playback Rate": "Oynatma sürəti",
+    "Subtitles": "Alt yazılar",
+    "subtitles off": "Alt yazıları söndür",
+    "Captions": "Başlıqlar",
+    "captions off": "Başlıqları söndür",
+    "Chapters": "Fəsillər",
+    "Descriptions": "Təsvirlər",
+    "descriptions off": "Təsvirləri söndür",
+    "Audio Track": "Audio Trek",
+    "Volume Level": "Səs Səviyyəsi",
+    "You aborted the media playback": "Siz medianın oxudulmasını dayandırdınız",
+    "A network error caused the media download to fail part-way.": "Şəbəkə xətası səbəbindən medianın endirilməsi yarıda qaldı.",
+    "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Yükləmə xətası.",
+    "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Media faylının korlanması səbəbilə və ya media faylın brauzerinizin dəstəkləmədiyi funksiyalardan istifadə etdiyinə görə medianın oxudulması dayandırılıb.",
+    "No compatible source was found for this media.": "Bu media üçün uyğun mənbə tapılmadı.",
+    "The media is encrypted and we do not have the keys to decrypt it.": "Media faylı şifrələnib və onun şifrəsini açmaq üçün açarlar yoxdur.",
+    "Play Video": "Videonu oynat",
+    "Close": "Bağla",
+    "Close Modal Dialog": "Modal dialoqunu bağla",
+    "Modal Window": "Modal pəncərəsi",
+    "This is a modal window": "Bu modal pəncərəsidir",
+    "This modal can be closed by pressing the Escape key or activating the close button.": "Bu modal Escape düyməsini basmaqla və ya bağlama düyməsini sıxmaqla bağlana bilər.",
+    ", opens captions settings dialog": ", başlıq parametrləri dialoqunu açır",
+    ", opens subtitles settings dialog": ", altyazı parametrləri dialoqunu açır",
+    ", opens descriptions settings dialog": ", təsvir parametrləri dialoqunu açır",
+    ", selected": ", seçilmiş",
+    "captions settings": "başlıq parametrləri",
+    "subtitles settings": "altyazı parametrləri",
+    "descriptions settings": "təsvir parametrləri",
+    "Text": "Tekst",
+    "White": "Ağ",
+    "Black": "Qara",
+    "Red": "Qırmızı",
+    "Green": "Yaşıl",
+    "Blue": "Göy",
+    "Yellow": "Sarı",
+    "Magenta": "Bənövşəyi",
+    "Cyan": "Mavi",
+    "Background": "Fon",
+    "Window": "Pəncərə",
+    "Transparent": "Şəffaf",
+    "Semi-Transparent": "Yarım-Şəffaf",
+    "Opaque": "Qeyri-şəffaf",
+    "Font Size": "Şrift Ölçüsü",
+    "Text Edge Style": "Mətnin kənarlarının üslubu",
+    "None": "Heç biri",
+    "Raised": "Artırılmış",
+    "Depressed": "Azaldılmış",
+    "Uniform": "Ümumiləşdirilmiş",
+    "Drop shadow": "Arxa kölgə",
+    "Font Family": "Şrift Ailəsi",
+    "Proportional Sans-Serif": "Proporsional Sans-Serif",
+    "Monospace Sans-Serif": "Birenli Sans-Serif",
+    "Proportional Serif": "Proporsional Serif",
+    "Monospace Serif": "Birenli Serif",
+    "Casual": "Gündəlik",
+    "Script": "Skript",
+    "Small Caps": "Kiçik böyük hərflər",
+    "Reset": "Sıfırla",
+    "restore all settings to the default values": "bütün parametrləri susmaya görə bərpa edin",
+    "Done": "Bitdi",
+    "Caption Settings Dialog": "Başlıq Parametrləri Dialoqu",
+    "Beginning of dialog window. Escape will cancel and close the window.": "Dialoq pəncərəsinin başlanğıcı. Escape düyməsi ləğv edəcək və pəncərəni bağlayacaq.",
+    "End of dialog window.": "Dialoq pəncərəsinin sonu.",
+    "{1} is loading.": "{1} yüklənir.",
+    "Exit Picture-in-Picture": "Şəkil içində şəkil rejimindən çıxın",
+    "Picture-in-Picture": "Şəkil içində şəkil rejimi",
+    "No content": "Məzmun yoxdur",
+    "Color": "Rəng",
+    "Opacity": "Qeyri-şəffaflıq",
+    "Text Background": "Tekst Fonu",
+    "Caption Area Background": "Başlıq Sahəsinin Fonu",
+    "Playing in Picture-in-Picture": "Şəkil içində şəkil rejimində oynayır",
+    "Skip backward {1} seconds": "{1} saniyə geriyə keçin",
+    "Skip forward {1} seconds": "{1} saniyə qabağa keçin"
+  }
\ No newline at end of file
diff --git a/priv/static/video.js/lang/ba.js b/priv/static/video.js/lang/ba.js
new file mode 100644
index 0000000..298dd50
--- /dev/null
+++ b/priv/static/video.js/lang/ba.js
@@ -0,0 +1,26 @@
+videojs.addLanguage('ba', {
+  "Play": "Pusti",
+  "Pause": "Pauza",
+  "Current Time": "Trenutno vrijeme",
+  "Duration": "Vrijeme trajanja",
+  "Remaining Time": "Preostalo vrijeme",
+  "Stream Type": "Način strimovanja",
+  "LIVE": "UŽIVO",
+  "Loaded": "Učitan",
+  "Progress": "Progres",
+  "Fullscreen": "Puni ekran",
+  "Exit Fullscreen": "Mali ekran",
+  "Mute": "Prigušen",
+  "Unmute": "Ne-prigušen",
+  "Playback Rate": "Stopa reprodukcije",
+  "Subtitles": "Podnaslov",
+  "subtitles off": "Podnaslov deaktiviran",
+  "Captions": "Titlovi",
+  "captions off": "Titlovi deaktivirani",
+  "Chapters": "Poglavlja",
+  "You aborted the media playback": "Isključili ste reprodukciju videa.",
+  "A network error caused the media download to fail part-way.": "Video se prestao preuzimati zbog greške na mreži.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Video se ne može reproducirati zbog servera, greške u mreži ili je format ne podržan.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Reprodukcija videa je zaustavljenja zbog greške u formatu ili zbog verzije vašeg pretraživača.",
+  "No compatible source was found for this media.": "Nije nađen nijedan kompatibilan izvor ovog videa."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/ba.json b/priv/static/video.js/lang/ba.json
new file mode 100644
index 0000000..da6b2a7
--- /dev/null
+++ b/priv/static/video.js/lang/ba.json
@@ -0,0 +1,26 @@
+{
+  "Play": "Pusti",
+  "Pause": "Pauza",
+  "Current Time": "Trenutno vrijeme",
+  "Duration": "Vrijeme trajanja",
+  "Remaining Time": "Preostalo vrijeme",
+  "Stream Type": "Način strimovanja",
+  "LIVE": "UŽIVO",
+  "Loaded": "Učitan",
+  "Progress": "Progres",
+  "Fullscreen": "Puni ekran",
+  "Exit Fullscreen": "Mali ekran",
+  "Mute": "Prigušen",
+  "Unmute": "Ne-prigušen",
+  "Playback Rate": "Stopa reprodukcije",
+  "Subtitles": "Podnaslov",
+  "subtitles off": "Podnaslov deaktiviran",
+  "Captions": "Titlovi",
+  "captions off": "Titlovi deaktivirani",
+  "Chapters": "Poglavlja",
+  "You aborted the media playback": "Isključili ste reprodukciju videa.",
+  "A network error caused the media download to fail part-way.": "Video se prestao preuzimati zbog greške na mreži.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Video se ne može reproducirati zbog servera, greške u mreži ili je format ne podržan.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Reprodukcija videa je zaustavljenja zbog greške u formatu ili zbog verzije vašeg pretraživača.",
+  "No compatible source was found for this media.": "Nije nađen nijedan kompatibilan izvor ovog videa."
+}
diff --git a/priv/static/video.js/lang/bg.js b/priv/static/video.js/lang/bg.js
new file mode 100644
index 0000000..9f9fb2a
--- /dev/null
+++ b/priv/static/video.js/lang/bg.js
@@ -0,0 +1,26 @@
+videojs.addLanguage('bg', {
+  "Play": "Възпроизвеждане",
+  "Pause": "Пауза",
+  "Current Time": "Текущо време",
+  "Duration": "Продължителност",
+  "Remaining Time": "Оставащо време",
+  "Stream Type": "Тип на потока",
+  "LIVE": "НА ЖИВО",
+  "Loaded": "Заредено",
+  "Progress": "Прогрес",
+  "Fullscreen": "Цял екран",
+  "Exit Fullscreen": "Спиране на цял екран",
+  "Mute": "Без звук",
+  "Unmute": "Със звук",
+  "Playback Rate": "Скорост на възпроизвеждане",
+  "Subtitles": "Субтитри",
+  "subtitles off": "Спряни субтитри",
+  "Captions": "Аудио надписи",
+  "captions off": "Спряни аудио надписи",
+  "Chapters": "Глави",
+  "You aborted the media playback": "Спряхте възпроизвеждането на видеото",
+  "A network error caused the media download to fail part-way.": "Грешка в мрежата провали изтеглянето на видеото.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Видеото не може да бъде заредено заради проблем със сървъра или мрежата или защото този формат не е поддържан.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Възпроизвеждането на видеото беше прекъснато заради проблем с файла или защото видеото използва опции които браузърът Ви не поддържа.",
+  "No compatible source was found for this media.": "Не беше намерен съвместим източник за това видео."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/bg.json b/priv/static/video.js/lang/bg.json
new file mode 100644
index 0000000..92d99b4
--- /dev/null
+++ b/priv/static/video.js/lang/bg.json
@@ -0,0 +1,26 @@
+{
+  "Play": "Възпроизвеждане",
+  "Pause": "Пауза",
+  "Current Time": "Текущо време",
+  "Duration": "Продължителност",
+  "Remaining Time": "Оставащо време",
+  "Stream Type": "Тип на потока",
+  "LIVE": "НА ЖИВО",
+  "Loaded": "Заредено",
+  "Progress": "Прогрес",
+  "Fullscreen": "Цял екран",
+  "Exit Fullscreen": "Спиране на цял екран",
+  "Mute": "Без звук",
+  "Unmute": "Със звук",
+  "Playback Rate": "Скорост на възпроизвеждане",
+  "Subtitles": "Субтитри",
+  "subtitles off": "Спряни субтитри",
+  "Captions": "Аудио надписи",
+  "captions off": "Спряни аудио надписи",
+  "Chapters": "Глави",
+  "You aborted the media playback": "Спряхте възпроизвеждането на видеото",
+  "A network error caused the media download to fail part-way.": "Грешка в мрежата провали изтеглянето на видеото.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Видеото не може да бъде заредено заради проблем със сървъра или мрежата или защото този формат не е поддържан.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Възпроизвеждането на видеото беше прекъснато заради проблем с файла или защото видеото използва опции които браузърът Ви не поддържа.",
+  "No compatible source was found for this media.": "Не беше намерен съвместим източник за това видео."
+}
diff --git a/priv/static/video.js/lang/bn.js b/priv/static/video.js/lang/bn.js
new file mode 100644
index 0000000..c715bfa
--- /dev/null
+++ b/priv/static/video.js/lang/bn.js
@@ -0,0 +1,90 @@
+videojs.addLanguage('bn', {
+  "Audio Player": "অডিও প্লেয়ার",
+  "Video Player": "ভিডিও প্লেয়ার",
+  "Play": "প্লে করুন",
+  "Pause": "বিরাম",
+  "Replay": "রিপ্লে করুন",
+  "Current Time": "বর্তমান সময়",
+  "Duration": "ব্যাপ্তিকাল",
+  "Remaining Time": "অবশিষ্ট সময়",
+  "Stream Type": "স্ট্রিমের ধরন",
+  "LIVE": "লাইভ",
+  "Seek to live, currently behind live": "লাইভ দেখুন, বর্তমানে লাইভের পিছনে আছে",
+  "Seek to live, currently playing live": "লাইভ দেখুন, বর্তমানে লাইভে আছে",
+  "Loaded": "লোড হয়েছে",
+  "Progress": "প্রোগ্রেস",
+  "Progress Bar": "প্রোগ্রেস বার",
+  "progress bar timing: currentTime={1} duration={2}": "{2} এর {1}",
+  "Fullscreen": "পূর্ণ স্ক্রীন",
+  "Non-Fullscreen": "পূর্ণ স্ক্রীন থেকে প্রস্থান করুন",
+  "Mute": "মিউট",
+  "Unmute": "আনমিউট",
+  "Playback Rate": "প্লেব্যাক রেট",
+  "Subtitles": "সাবটাইটেল",
+  "subtitles off": "সাবটাইটেল বন্ধ করুন",
+  "Captions": "ক্যাপশন",
+  "captions off": "ক্যাপশন বন্ধ করুন",
+  "Chapters": "অধ্যায়",
+  "Descriptions": "বর্ণনা",
+  "descriptions off": "বর্ণনা বন্ধ করুন",
+  "Audio Track": "অডিও গান",
+  "Volume Level": "ভলিউম লেভেল",
+  "You aborted the media playback": "আপনি মিডিয়া প্লেব্যাক বাতিল করেছেন",
+  "A network error caused the media download to fail part-way.": "একটি নেটওয়ার্ক ত্রুটির কারণে মিডিয়া ডাউনলোড আংশিকভাবে ব্যর্থ হয়েছে৷",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "মিডিয়া লোড করা যায়নি, হয় সার্ভার বা নেটওয়ার্ক ব্যর্থ হওয়ার কারণে বা ফর্ম্যাটটি সমর্থিত নয়।",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "মিডিয়া প্লেব্যাক একটি সমস্যার কারণে বা মিডিয়া ব্যবহার করা বৈশিষ্ট্যগুলি আপনার ব্রাউজার সমর্থন করে না বলে বাতিল করা হয়েছে৷",
+  "No compatible source was found for this media.": "এই মিডিয়ার জন্য কোন সামঞ্জস্যপূর্ণ উৎস পাওয়া যায়নি.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "মিডিয়া এনক্রিপ্ট করা হয়েছে এবং এটি ডিক্রিপ্ট করার সমাধান আমাদের কাছে নেই।",
+  "Play Video": "ভিডিও প্লে করুন",
+  "Close": "বন্ধ করুন",
+  "Close Modal Dialog": "মোডাল ডায়ালগ বন্ধ করুন",
+  "Modal Window": "মোডাল উইন্ডো",
+  "This is a modal window": "এটি একটি মোডাল উইন্ডো",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Esc কী চেপে বা ক্লোজ বাটনটি সক্রিয় করে এই মডেলটি বন্ধ করা যেতে পারে।",
+  ", opens captions settings dialog": ", ক্যাপশন সেটিংস ডায়ালগ খোলে",
+  ", opens subtitles settings dialog": ", সাবটাইটেল সেটিংস ডায়ালগ খোলে",
+  ", opens descriptions settings dialog": ", বর্ণনা সেটিংস ডায়ালগ খোলে",
+  ", selected": ", নির্বাচিত",
+  "captions settings": "ক্যাপশন সেটিংস",
+  "subtitles settings": "সাবটাইটেল সেটিংস ",
+  "descriptions settings": "বর্ণনা সেটিংস",
+  "Text": "টেক্সট",
+  "White": "সাদা",
+  "Black": "কালো",
+  "Red": "লাল",
+  "Green": "সবুজ",
+  "Blue": "নীল",
+  "Yellow": "হলুদ",
+  "Magenta": "ম্যাজেন্টা",
+  "Cyan": "নীল সবুজ",
+  "Background": "পটভূমি",
+  "Window": "উইন্ডো",
+  "Transparent": "স্বচ্ছ",
+  "Semi-Transparent": "আধা-স্বচ্ছ",
+  "Opaque": "অস্বচ্ছ",
+  "Font Size": "অক্ষরের আকার",
+  "Text Edge Style": "টেক্সট এজ স্টাইল",
+  "None": "কোনোটিই নয়",
+  "Raised": "বাড়ানো হয়েছে",
+  "Depressed": "নামানো হয়েছে",
+  "Uniform": "ইউনিফর্ম",
+  "Drop shadow": "ড্রপশ্যাডো",
+  "Font Family": "অক্ষরের পরিবার",
+  "Proportional Sans-Serif": "সমানুপাতিক সানস-সেরিফ",
+  "Monospace Sans-Serif": "মনোস্পেস সানস-সেরিফ",
+  "Proportional Serif": "সমানুপাতিক সেরিফ",
+  "Monospace Serif": "মনোস্পেস সেরিফ",
+  "Casual": "ক্যাজুয়াল",
+  "Script": "স্ক্রিপ্ট",
+  "Small Caps": "ছোট ক্যাপস",
+  "Reset": "রিসেট",
+  "restore all settings to the default values": "সমস্ত সেটিংস ডিফল্ট মানগুলিতে পুনরুদ্ধার করুন",
+  "Done": "সম্পন্ন",
+  "Caption Settings Dialog": "ক্যাপশন সেটিংস ডায়ালগ",
+  "Beginning of dialog window. Escape will cancel and close the window.": "ডায়লগ উইন্ডোর শুরু। Esc কী বাতিল করবে এবং উইন্ডো বন্ধ করবে।",
+  "End of dialog window.": "ডায়ালগ উইন্ডোর শেষ।",
+  "{1} is loading.": "{1} লোড হচ্ছে.",
+  "Exit Picture-in-Picture": "পিকচার-ইন-পিকচার থেকে প্রস্থান করুন",
+  "Picture-in-Picture": "পিকচার-ইন-পিকচার",
+  "No content": "কোন বিষয়বস্তু নেই"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/bn.json b/priv/static/video.js/lang/bn.json
new file mode 100644
index 0000000..0164c9d
--- /dev/null
+++ b/priv/static/video.js/lang/bn.json
@@ -0,0 +1,90 @@
+{
+    "Audio Player": "অডিও প্লেয়ার",
+    "Video Player": "ভিডিও প্লেয়ার",
+    "Play": "প্লে করুন",
+    "Pause": "বিরাম",
+    "Replay": "রিপ্লে করুন",
+    "Current Time": "বর্তমান সময়",
+    "Duration": "ব্যাপ্তিকাল",
+    "Remaining Time": "অবশিষ্ট সময়",
+    "Stream Type": "স্ট্রিমের ধরন",
+    "LIVE": "লাইভ",
+    "Seek to live, currently behind live": "লাইভ দেখুন, বর্তমানে লাইভের পিছনে আছে",
+    "Seek to live, currently playing live": "লাইভ দেখুন, বর্তমানে লাইভে আছে",
+    "Loaded": "লোড হয়েছে",
+    "Progress": "প্রোগ্রেস",
+    "Progress Bar": "প্রোগ্রেস বার",
+    "progress bar timing: currentTime={1} duration={2}": "{2} এর {1}",
+    "Fullscreen": "পূর্ণ স্ক্রীন",
+    "Non-Fullscreen": "পূর্ণ স্ক্রীন থেকে প্রস্থান করুন",
+    "Mute": "মিউট",
+    "Unmute": "আনমিউট",
+    "Playback Rate": "প্লেব্যাক রেট",
+    "Subtitles": "সাবটাইটেল",
+    "subtitles off": "সাবটাইটেল বন্ধ করুন",
+    "Captions": "ক্যাপশন",
+    "captions off": "ক্যাপশন বন্ধ করুন",
+    "Chapters": "অধ্যায়",
+    "Descriptions": "বর্ণনা",
+    "descriptions off": "বর্ণনা বন্ধ করুন",
+    "Audio Track": "অডিও গান",
+    "Volume Level": "ভলিউম লেভেল",
+    "You aborted the media playback": "আপনি মিডিয়া প্লেব্যাক বাতিল করেছেন",
+    "A network error caused the media download to fail part-way.": "একটি নেটওয়ার্ক ত্রুটির কারণে মিডিয়া ডাউনলোড আংশিকভাবে ব্যর্থ হয়েছে৷",
+    "The media could not be loaded, either because the server or network failed or because the format is not supported.": "মিডিয়া লোড করা যায়নি, হয় সার্ভার বা নেটওয়ার্ক ব্যর্থ হওয়ার কারণে বা ফর্ম্যাটটি সমর্থিত নয়।",
+    "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "মিডিয়া প্লেব্যাক একটি সমস্যার কারণে বা মিডিয়া ব্যবহার করা বৈশিষ্ট্যগুলি আপনার ব্রাউজার সমর্থন করে না বলে বাতিল করা হয়েছে৷",
+    "No compatible source was found for this media.": "এই মিডিয়ার জন্য কোন সামঞ্জস্যপূর্ণ উৎস পাওয়া যায়নি.",
+    "The media is encrypted and we do not have the keys to decrypt it.": "মিডিয়া এনক্রিপ্ট করা হয়েছে এবং এটি ডিক্রিপ্ট করার সমাধান আমাদের কাছে নেই।",
+    "Play Video": "ভিডিও প্লে করুন",
+    "Close": "বন্ধ করুন",
+    "Close Modal Dialog": "মোডাল ডায়ালগ বন্ধ করুন",
+    "Modal Window": "মোডাল উইন্ডো",
+    "This is a modal window": "এটি একটি মোডাল উইন্ডো",
+    "This modal can be closed by pressing the Escape key or activating the close button.": "Esc কী চেপে বা ক্লোজ বাটনটি সক্রিয় করে এই মডেলটি বন্ধ করা যেতে পারে।",
+    ", opens captions settings dialog": ", ক্যাপশন সেটিংস ডায়ালগ খোলে",
+    ", opens subtitles settings dialog": ", সাবটাইটেল সেটিংস ডায়ালগ খোলে",
+    ", opens descriptions settings dialog": ", বর্ণনা সেটিংস ডায়ালগ খোলে",
+    ", selected": ", নির্বাচিত",
+    "captions settings": "ক্যাপশন সেটিংস",
+    "subtitles settings": "সাবটাইটেল সেটিংস ",
+    "descriptions settings": "বর্ণনা সেটিংস",
+    "Text": "টেক্সট",
+    "White": "সাদা",
+    "Black": "কালো",
+    "Red": "লাল",
+    "Green": "সবুজ",
+    "Blue": "নীল",
+    "Yellow": "হলুদ",
+    "Magenta": "ম্যাজেন্টা",
+    "Cyan": "নীল সবুজ",
+    "Background": "পটভূমি",
+    "Window": "উইন্ডো",
+    "Transparent": "স্বচ্ছ",
+    "Semi-Transparent": "আধা-স্বচ্ছ",
+    "Opaque": "অস্বচ্ছ",
+    "Font Size": "অক্ষরের আকার",
+    "Text Edge Style": "টেক্সট এজ স্টাইল",
+    "None": "কোনোটিই নয়",
+    "Raised": "বাড়ানো হয়েছে",
+    "Depressed": "নামানো হয়েছে",
+    "Uniform": "ইউনিফর্ম",
+    "Drop shadow": "ড্রপশ্যাডো",
+    "Font Family": "অক্ষরের পরিবার",
+    "Proportional Sans-Serif": "সমানুপাতিক সানস-সেরিফ",
+    "Monospace Sans-Serif": "মনোস্পেস সানস-সেরিফ",
+    "Proportional Serif": "সমানুপাতিক সেরিফ",
+    "Monospace Serif": "মনোস্পেস সেরিফ",
+    "Casual": "ক্যাজুয়াল",
+    "Script": "স্ক্রিপ্ট",
+    "Small Caps": "ছোট ক্যাপস",
+    "Reset": "রিসেট",
+    "restore all settings to the default values": "সমস্ত সেটিংস ডিফল্ট মানগুলিতে পুনরুদ্ধার করুন",
+    "Done": "সম্পন্ন",
+    "Caption Settings Dialog": "ক্যাপশন সেটিংস ডায়ালগ",
+    "Beginning of dialog window. Escape will cancel and close the window.": "ডায়লগ উইন্ডোর শুরু। Esc কী বাতিল করবে এবং উইন্ডো বন্ধ করবে।",
+    "End of dialog window.": "ডায়ালগ উইন্ডোর শেষ।",
+    "{1} is loading.": "{1} লোড হচ্ছে.",
+    "Exit Picture-in-Picture": "পিকচার-ইন-পিকচার থেকে প্রস্থান করুন",
+    "Picture-in-Picture": "পিকচার-ইন-পিকচার",
+    "No content": "কোন বিষয়বস্তু নেই"
+}
\ No newline at end of file
diff --git a/priv/static/video.js/lang/ca.js b/priv/static/video.js/lang/ca.js
new file mode 100644
index 0000000..8b07645
--- /dev/null
+++ b/priv/static/video.js/lang/ca.js
@@ -0,0 +1,97 @@
+videojs.addLanguage('ca', {
+  "Audio Player": "Reproductor d'àudio",
+  "Video Player": "Reproductor de vídeo",
+  "Play": "Reproduir",
+  "Pause": "Pausa",
+  "Replay": "Repetir",
+  "Current Time": "Temps actual",
+  "Duration": "Durada",
+  "Remaining Time": "Temps restant",
+  "Stream Type": "Tipus d'emissió",
+  "LIVE": "EN DIRECTE",
+  "Seek to live, currently behind live": "Anar en directe, actualment darrere de la retransmissió en directe",
+  "Seek to live, currently playing live": "Anar en directe, actualment en directe",
+  "Loaded": "Carregat",
+  "Progress": "Progrés",
+  "Progress Bar": "Barra de progrés",
+  "progress bar timing: currentTime={1} duration={2}": "{1} de {2}",
+  "Fullscreen": "Pantalla completa",
+  "Exit Fullscreen": "Sortir de pantalla completa",
+  "Mute": "Silenciar",
+  "Unmute": "Activar el so",
+  "Playback Rate": "Velocitat de reproducció",
+  "Subtitles": "Subtítols",
+  "subtitles off": "Desactivar subtítols",
+  "Captions": "Llegendes",
+  "captions off": "Desactivar llegendes",
+  "Chapters": "Capítols",
+  "Descriptions": "Descripcions",
+  "descriptions off": "Desactivar descripcions",
+  "Audio Track": "Pista d'àudio",
+  "Volume Level": "Nivell de volum",
+  "You aborted the media playback": "Has interromput la reproducció del contingut",
+  "A network error caused the media download to fail part-way.": "Un error de xarxa ha interromput la descàrrega del contingut.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "No s'ha pogut carregar el contingut, ja sigui perquè el servidor o la xarxa han fallat o perquè el format no està suportat.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "La reproducció del contingut s'ha interromput a causa d'un problema de corrupció o perquè el contingut fa servir funcions que el teu navegador no suporta.",
+  "No compatible source was found for this media.": "No s'ha trobat una font compatible per a aquest contingut.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "El contingut està xifrat i no disposem de les claus per desxifrar-lo.",
+  "Play Video": "Reproduir vídeo",
+  "Close": "Tancar",
+  "Close Modal Dialog": "Tancar el diàleg modal",
+  "Modal Window": "Finestra modal",
+  "This is a modal window": "Aquesta és una finestra modal",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Aquesta finestra es pot tancar prement la tecla Escape o activant el botó de tancar.",
+  ", opens captions settings dialog": ", obre el diàleg de configuració de subtítols",
+  ", opens subtitles settings dialog": ", obre el diàleg de configuració de subtítols",
+  ", opens descriptions settings dialog": ", obre el diàleg de configuració de descripcions",
+  ", selected": ", seleccionat",
+  "captions settings": "configuració de subtítols",
+  "subtitles settings": "configuració de subtítols",
+  "descriptions settings": "configuració de descripcions",
+  "Text": "Text",
+  "White": "Blanc",
+  "Black": "Negre",
+  "Red": "Vermell",
+  "Green": "Verd",
+  "Blue": "Blau",
+  "Yellow": "Groc",
+  "Magenta": "Magenta",
+  "Cyan": "Cian",
+  "Background": "Fons",
+  "Window": "Finestra",
+  "Transparent": "Transparent",
+  "Semi-Transparent": "Semi-transparent",
+  "Opaque": "Opac",
+  "Font Size": "Mida de la lletra",
+  "Text Edge Style": "Estil de la vora del text",
+  "None": "Cap",
+  "Raised": "Rellevat",
+  "Depressed": "Premut",
+  "Uniform": "Uniforme",
+  "Drop shadow": "Ombra",
+  "Font Family": "Família tipogràfica",
+  "Proportional Sans-Serif": "Sense serif proporcional",
+  "Monospace Sans-Serif": "Monoespaiada sense serif",
+  "Proportional Serif": "Serif proporcional",
+  "Monospace Serif": "Monoespaiada amb serif",
+  "Casual": "Desenfadada",
+  "Script": "Script",
+  "Small Caps": "Minúscules",
+  "Reset": "Restablir",
+  "restore all settings to the default values": "restaurar totes les configuracions als valors predeterminats",
+  "Done": "Fet",
+  "Caption Settings Dialog": "Diàleg de configuració de subtítols",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Inici del diàleg. L'Escape cancel·larà i tancarà la finestra.",
+  "End of dialog window.": "Fi del diàleg.",
+  "{1} is loading.": "S'està carregant {1}.",
+  "Exit Picture-in-Picture": "Sortir de la imatge en imatge",
+  "Picture-in-Picture": "Imatge en imatge",
+  "No content": "Sense contingut",
+  "Color": "Color",
+  "Opacity": "Opacitat",
+  "Text Background": "Fons del text",
+  "Caption Area Background": "Fons de l'àrea de subtítols",
+  "Playing in Picture-in-Picture": "Reproduint en imatge en imatge",
+  "Skip backward {1} seconds": "Salta enrere {1} segons",
+  "Skip forward {1} seconds": "Salta endavant {1} segons"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/ca.json b/priv/static/video.js/lang/ca.json
new file mode 100644
index 0000000..7a118e5
--- /dev/null
+++ b/priv/static/video.js/lang/ca.json
@@ -0,0 +1,97 @@
+{
+  "Audio Player": "Reproductor d'àudio",
+  "Video Player": "Reproductor de vídeo",
+  "Play": "Reproduir",
+  "Pause": "Pausa",
+  "Replay": "Repetir",
+  "Current Time": "Temps actual",
+  "Duration": "Durada",
+  "Remaining Time": "Temps restant",
+  "Stream Type": "Tipus d'emissió",
+  "LIVE": "EN DIRECTE",
+  "Seek to live, currently behind live": "Anar en directe, actualment darrere de la retransmissió en directe",
+  "Seek to live, currently playing live": "Anar en directe, actualment en directe",
+  "Loaded": "Carregat",
+  "Progress": "Progrés",
+  "Progress Bar": "Barra de progrés",
+  "progress bar timing: currentTime={1} duration={2}": "{1} de {2}",
+  "Fullscreen": "Pantalla completa",
+  "Exit Fullscreen": "Sortir de pantalla completa",
+  "Mute": "Silenciar",
+  "Unmute": "Activar el so",
+  "Playback Rate": "Velocitat de reproducció",
+  "Subtitles": "Subtítols",
+  "subtitles off": "Desactivar subtítols",
+  "Captions": "Llegendes",
+  "captions off": "Desactivar llegendes",
+  "Chapters": "Capítols",
+  "Descriptions": "Descripcions",
+  "descriptions off": "Desactivar descripcions",
+  "Audio Track": "Pista d'àudio",
+  "Volume Level": "Nivell de volum",
+  "You aborted the media playback": "Has interromput la reproducció del contingut",
+  "A network error caused the media download to fail part-way.": "Un error de xarxa ha interromput la descàrrega del contingut.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "No s'ha pogut carregar el contingut, ja sigui perquè el servidor o la xarxa han fallat o perquè el format no està suportat.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "La reproducció del contingut s'ha interromput a causa d'un problema de corrupció o perquè el contingut fa servir funcions que el teu navegador no suporta.",
+  "No compatible source was found for this media.": "No s'ha trobat una font compatible per a aquest contingut.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "El contingut està xifrat i no disposem de les claus per desxifrar-lo.",
+  "Play Video": "Reproduir vídeo",
+  "Close": "Tancar",
+  "Close Modal Dialog": "Tancar el diàleg modal",
+  "Modal Window": "Finestra modal",
+  "This is a modal window": "Aquesta és una finestra modal",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Aquesta finestra es pot tancar prement la tecla Escape o activant el botó de tancar.",
+  ", opens captions settings dialog": ", obre el diàleg de configuració de subtítols",
+  ", opens subtitles settings dialog": ", obre el diàleg de configuració de subtítols",
+  ", opens descriptions settings dialog": ", obre el diàleg de configuració de descripcions",
+  ", selected": ", seleccionat",
+  "captions settings": "configuració de subtítols",
+  "subtitles settings": "configuració de subtítols",
+  "descriptions settings": "configuració de descripcions",
+  "Text": "Text",
+  "White": "Blanc",
+  "Black": "Negre",
+  "Red": "Vermell",
+  "Green": "Verd",
+  "Blue": "Blau",
+  "Yellow": "Groc",
+  "Magenta": "Magenta",
+  "Cyan": "Cian",
+  "Background": "Fons",
+  "Window": "Finestra",
+  "Transparent": "Transparent",
+  "Semi-Transparent": "Semi-transparent",
+  "Opaque": "Opac",
+  "Font Size": "Mida de la lletra",
+  "Text Edge Style": "Estil de la vora del text",
+  "None": "Cap",
+  "Raised": "Rellevat",
+  "Depressed": "Premut",
+  "Uniform": "Uniforme",
+  "Drop shadow": "Ombra",
+  "Font Family": "Família tipogràfica",
+  "Proportional Sans-Serif": "Sense serif proporcional",
+  "Monospace Sans-Serif": "Monoespaiada sense serif",
+  "Proportional Serif": "Serif proporcional",
+  "Monospace Serif": "Monoespaiada amb serif",
+  "Casual": "Desenfadada",
+  "Script": "Script",
+  "Small Caps": "Minúscules",
+  "Reset": "Restablir",
+  "restore all settings to the default values": "restaurar totes les configuracions als valors predeterminats",
+  "Done": "Fet",
+  "Caption Settings Dialog": "Diàleg de configuració de subtítols",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Inici del diàleg. L'Escape cancel·larà i tancarà la finestra.",
+  "End of dialog window.": "Fi del diàleg.",
+  "{1} is loading.": "S'està carregant {1}.",
+  "Exit Picture-in-Picture": "Sortir de la imatge en imatge",
+  "Picture-in-Picture": "Imatge en imatge",
+  "No content": "Sense contingut",
+  "Color": "Color",
+  "Opacity": "Opacitat",
+  "Text Background": "Fons del text",
+  "Caption Area Background": "Fons de l'àrea de subtítols",
+  "Playing in Picture-in-Picture": "Reproduint en imatge en imatge",
+  "Skip backward {1} seconds": "Salta enrere {1} segons",
+  "Skip forward {1} seconds": "Salta endavant {1} segons"
+}
diff --git a/priv/static/video.js/lang/cs.js b/priv/static/video.js/lang/cs.js
new file mode 100644
index 0000000..69b8571
--- /dev/null
+++ b/priv/static/video.js/lang/cs.js
@@ -0,0 +1,85 @@
+videojs.addLanguage('cs', {
+  "Audio Player": "Audio Přehravač",
+  "Video Player": "Video Přehravač",
+  "Play": "Přehrát",
+  "Pause": "Pozastavit",
+  "Replay": "Přehrát znovu",
+  "Current Time": "Aktuální čas",
+  "Duration": "Doba trvání",
+  "Remaining Time": "Zbývající čas",
+  "Stream Type": "Typ streamu",
+  "LIVE": "ŽIVĚ",
+  "Loaded": "Načteno",
+  "Progress": "Stav",
+  "Progress Bar": "Ukazatel průběhu",
+  "progress bar timing: currentTime={1} duration={2}": "{1} z {2}",
+  "Fullscreen": "Celá obrazovka",
+  "Exit Fullscreen": "Běžné zobrazení",
+  "Mute": "Ztlumit",
+  "Unmute": "Zrušit ztlumení",
+  "Playback Rate": "Rychlost přehrávání",
+  "Subtitles": "Titulky",
+  "subtitles off": "Bez titulků",
+  "Captions": "Popisky",
+  "captions off": "Popisky vypnuté",
+  "Chapters": "Kapitoly",
+  "Descriptions": "Popisy",
+  "descriptions off": "Bez popisů",
+  "Audio Track": "Zvuková stopa",
+  "Volume Level": "Hlasitost",
+  "You aborted the media playback": "Přehrávání videa bylo přerušeno.",
+  "A network error caused the media download to fail part-way.": "Video nemohlo být načteno kvůli chybě v síti.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Video nemohlo být načteno, buď kvůli chybě serveru, sítě nebo proto, že daný formát není podporován.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Váš prohlížeč nepodporuje tento formát videa.",
+  "No compatible source was found for this media.": "Nevalidní zadaný zdroj videa.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Chyba při dešifrování videa.",
+  "Play Video": "Přehrát video",
+  "Close": "Zavřit",
+  "Close Modal Dialog": "Zavřít okno",
+  "Modal Window": "Modální okno",
+  "This is a modal window": "Toto je modální okno",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Toto okno se dá zavřít křížkem nebo klávesou Esc.",
+  ", opens captions settings dialog": ", otevřít okno pro nastavení popisků",
+  ", opens subtitles settings dialog": ", otevřít okno pro nastavení titulků",
+  ", opens descriptions settings dialog": ", otevře okno pro nastavení popisků pro nevidomé",
+  ", selected": ", vybráno",
+  "captions settings": "nastavení popisků",
+  "subtitles settings": "nastavení titulků",
+  "descriptions settings": "nastavení popisků pro nevidomé",
+  "Text": "Titulky",
+  "White": "Bílé",
+  "Black": "Černé",
+  "Red": "Červené",
+  "Green": "Zelené",
+  "Blue": "Modré",
+  "Yellow": "Žluté",
+  "Magenta": "Fialové",
+  "Cyan": "Azurové",
+  "Background": "Pozadí titulků",
+  "Window": "Okno",
+  "Transparent": "Průhledné",
+  "Semi-Transparent": "Poloprůhledné",
+  "Opaque": "Neprůhledné",
+  "Font Size": "Velikost písma",
+  "Text Edge Style": "Okraje písma",
+  "None": "Bez okraje",
+  "Raised": "Zvýšený",
+  "Depressed": "Propadlý",
+  "Uniform": "Rovnoměrný",
+  "Drop shadow": "Stínovaný",
+  "Font Family": "Rodina písma",
+  "Proportional Sans-Serif": "Proporcionální bezpatkové",
+  "Monospace Sans-Serif": "Monospace bezpatkové",
+  "Proportional Serif": "Proporcionální patkové",
+  "Monospace Serif": "Monospace patkové",
+  "Casual": "Hravé",
+  "Script": "Ručně psané",
+  "Small Caps": "Malé kapitálky",
+  "Reset": "Obnovit",
+  "restore all settings to the default values": "Vrátit nastavení do výchozího stavu",
+  "Done": "Hotovo",
+  "Caption Settings Dialog": "Okno s nastavením titulků",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Začátek dialogového okna. Klávesa Esc okno zavře.",
+  "End of dialog window.": "Konec dialogového okna.",
+  "{1} is loading.": "{1} se načítá."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/cs.json b/priv/static/video.js/lang/cs.json
new file mode 100644
index 0000000..be449a6
--- /dev/null
+++ b/priv/static/video.js/lang/cs.json
@@ -0,0 +1,85 @@
+{
+  "Audio Player": "Audio Přehravač",
+  "Video Player": "Video Přehravač",
+  "Play": "Přehrát",
+  "Pause": "Pozastavit",
+  "Replay": "Přehrát znovu",
+  "Current Time": "Aktuální čas",
+  "Duration": "Doba trvání",
+  "Remaining Time": "Zbývající čas",
+  "Stream Type": "Typ streamu",
+  "LIVE": "ŽIVĚ",
+  "Loaded": "Načteno",
+  "Progress": "Stav",
+  "Progress Bar": "Ukazatel průběhu",
+  "progress bar timing: currentTime={1} duration={2}": "{1} z {2}",
+  "Fullscreen": "Celá obrazovka",
+  "Exit Fullscreen": "Běžné zobrazení",
+  "Mute": "Ztlumit",
+  "Unmute": "Zrušit ztlumení",
+  "Playback Rate": "Rychlost přehrávání",
+  "Subtitles": "Titulky",
+  "subtitles off": "Bez titulků",
+  "Captions": "Popisky",
+  "captions off": "Popisky vypnuté",
+  "Chapters": "Kapitoly",
+  "Descriptions": "Popisy",
+  "descriptions off": "Bez popisů",
+  "Audio Track": "Zvuková stopa",
+  "Volume Level": "Hlasitost",
+  "You aborted the media playback": "Přehrávání videa bylo přerušeno.",
+  "A network error caused the media download to fail part-way.": "Video nemohlo být načteno kvůli chybě v síti.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Video nemohlo být načteno, buď kvůli chybě serveru, sítě nebo proto, že daný formát není podporován.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Váš prohlížeč nepodporuje tento formát videa.",
+  "No compatible source was found for this media.": "Nevalidní zadaný zdroj videa.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Chyba při dešifrování videa.",
+  "Play Video": "Přehrát video",
+  "Close": "Zavřit",
+  "Close Modal Dialog": "Zavřít okno",
+  "Modal Window": "Modální okno",
+  "This is a modal window": "Toto je modální okno",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Toto okno se dá zavřít křížkem nebo klávesou Esc.",
+  ", opens captions settings dialog": ", otevřít okno pro nastavení popisků",
+  ", opens subtitles settings dialog": ", otevřít okno pro nastavení titulků",
+  ", opens descriptions settings dialog": ", otevře okno pro nastavení popisků pro nevidomé",
+  ", selected": ", vybráno",
+  "captions settings": "nastavení popisků",
+  "subtitles settings": "nastavení titulků",
+  "descriptions settings": "nastavení popisků pro nevidomé",
+  "Text": "Titulky",
+  "White": "Bílé",
+  "Black": "Černé",
+  "Red": "Červené",
+  "Green": "Zelené",
+  "Blue": "Modré",
+  "Yellow": "Žluté",
+  "Magenta": "Fialové",
+  "Cyan": "Azurové",
+  "Background": "Pozadí titulků",
+  "Window": "Okno",
+  "Transparent": "Průhledné",
+  "Semi-Transparent": "Poloprůhledné",
+  "Opaque": "Neprůhledné",
+  "Font Size": "Velikost písma",
+  "Text Edge Style": "Okraje písma",
+  "None": "Bez okraje",
+  "Raised": "Zvýšený",
+  "Depressed": "Propadlý",
+  "Uniform": "Rovnoměrný",
+  "Drop shadow": "Stínovaný",
+  "Font Family": "Rodina písma",
+  "Proportional Sans-Serif": "Proporcionální bezpatkové",
+  "Monospace Sans-Serif": "Monospace bezpatkové",
+  "Proportional Serif": "Proporcionální patkové",
+  "Monospace Serif": "Monospace patkové",
+  "Casual": "Hravé",
+  "Script": "Ručně psané",
+  "Small Caps": "Malé kapitálky",
+  "Reset": "Obnovit",
+  "restore all settings to the default values": "Vrátit nastavení do výchozího stavu",
+  "Done": "Hotovo",
+  "Caption Settings Dialog": "Okno s nastavením titulků",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Začátek dialogového okna. Klávesa Esc okno zavře.",
+  "End of dialog window.": "Konec dialogového okna.",
+  "{1} is loading.": "{1} se načítá."
+}
diff --git a/priv/static/video.js/lang/cy.js b/priv/static/video.js/lang/cy.js
new file mode 100644
index 0000000..4d250fe
--- /dev/null
+++ b/priv/static/video.js/lang/cy.js
@@ -0,0 +1,85 @@
+videojs.addLanguage('cy', {
+  "Audio Player": "Chwaraewr sain",
+  "Video Player": "Chwaraewr fideo",
+  "Play": "Chwarae",
+  "Pause": "Oedi",
+  "Replay": "Ailchwarae",
+  "Current Time": "Amser Cyfredol",
+  "Duration": "Parhad",
+  "Remaining Time": "Amser ar ôl",
+  "Stream Type": "Math o Ffrwd",
+  "LIVE": "YN FYW",
+  "Loaded": "Llwythwyd",
+  "Progress": "Cynnydd",
+  "Progress Bar": "Bar Cynnydd",
+  "progress bar timing: currentTime={1} duration={2}": "{1} o {2}",
+  "Fullscreen": "Sgrîn Lawn",
+  "Exit Fullscreen": "Ffenestr",
+  "Mute": "Pylu",
+  "Unmute": "Dad-bylu",
+  "Playback Rate": "Cyfradd Chwarae",
+  "Subtitles": "Isdeitlau",
+  "subtitles off": "Isdeitlau i ffwrdd",
+  "Captions": "Capsiynau",
+  "captions off": "Capsiynau i ffwrdd",
+  "Chapters": "Penodau",
+  "Descriptions": "Disgrifiadau",
+  "descriptions off": "disgrifiadau i ffwrdd",
+  "Audio Track": "Trac Sain",
+  "Volume Level": "Lefel Sain",
+  "You aborted the media playback": "Atalwyd y fideo gennych",
+  "A network error caused the media download to fail part-way.": "Mae gwall rhwydwaith wedi achosi methiant lawrlwytho.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Ni lwythodd y fideo, oherwydd methiant gweinydd neu rwydwaith, neu achos nid yw'r system yn cefnogi'r fformat.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Atalwyd y fideo oherwydd problem llygredd data neu oherwydd nid yw'ch porwr yn cefnogi nodweddion penodol o'r fideo.",
+  "No compatible source was found for this media.": "Nid oedd modd canfod ffynhonnell cytûn am y fideo hwn.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Mae'r fideo wedi ei amgryptio ac nid oes allweddion gennym.",
+  "Play Video": "Chwarae Fideo",
+  "Close": "Cau",
+  "Close Modal Dialog": "Cau Blwch Deialog Moddol",
+  "Modal Window": "Ffenestr Foddol",
+  "This is a modal window": "Mae hon yn ffenestr foddol",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Gallech chi gau'r ffenestr foddol hon trwy wasgu Escape neu glicio'r botwm cau.",
+  ", opens captions settings dialog": ", yn agor gosodiadau capsiynau",
+  ", opens subtitles settings dialog": ", yn agor gosodiadau isdeitlau",
+  ", opens descriptions settings dialog": ", yn agor gosodiadau disgrifiadau",
+  ", selected": ", detholwyd",
+  "captions settings": "gosodiadau capsiynau",
+  "subtitles settings": "gosodiadau isdeitlau",
+  "descriptions settings": "gosodiadau disgrifiadau",
+  "Text": "Testun",
+  "White": "Gwyn",
+  "Black": "Du",
+  "Red": "Coch",
+  "Green": "Gwyrdd",
+  "Blue": "Glas",
+  "Yellow": "Melyn",
+  "Magenta": "Piws",
+  "Cyan": "Cyan",
+  "Background": "Cefndir",
+  "Window": "Ffenestr",
+  "Transparent": "Tryloyw",
+  "Semi-Transparent": "Hanner-dryloyw",
+  "Opaque": "Di-draidd",
+  "Font Size": "Maint y Ffont",
+  "Text Edge Style": "Arddull Ymylon Testun",
+  "None": "Dim",
+  "Raised": "Uwch",
+  "Depressed": "Is",
+  "Uniform": "Unffurf",
+  "Drop shadow": "Cysgod cefn",
+  "Font Family": "Teulu y Ffont",
+  "Proportional Sans-Serif": "Heb-Seriff Cyfraneddol",
+  "Monospace Sans-Serif": "Heb-Seriff Unlled",
+  "Proportional Serif": "Seriff Gyfraneddol",
+  "Monospace Serif": "Seriff Unlled",
+  "Casual": "Llawysgrif",
+  "Script": "Sgript",
+  "Small Caps": "Prif Lythyrennau Bychain",
+  "Reset": "Ailosod",
+  "restore all settings to the default values": "Adfer yr holl osodiadau diofyn",
+  "Done": "Gorffenwyd",
+  "Caption Settings Dialog": "Blwch Gosodiadau Capsiynau",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Dechrau ffenestr deialog. Bydd Escape yn canslo a chau'r ffenestr.",
+  "End of dialog window.": "Diwedd ffenestr deialog.",
+  "{1} is loading.": "{1} yn llwytho."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/cy.json b/priv/static/video.js/lang/cy.json
new file mode 100644
index 0000000..9d3d9b7
--- /dev/null
+++ b/priv/static/video.js/lang/cy.json
@@ -0,0 +1,85 @@
+{
+  "Audio Player":"Chwaraewr sain",
+  "Video Player":"Chwaraewr fideo",
+  "Play":"Chwarae",
+  "Pause":"Oedi",
+  "Replay":"Ailchwarae",
+  "Current Time":"Amser Cyfredol",
+  "Duration":"Parhad",
+  "Remaining Time":"Amser ar ôl",
+  "Stream Type":"Math o Ffrwd",
+  "LIVE":"YN FYW",
+  "Loaded":"Llwythwyd",
+  "Progress":"Cynnydd",
+  "Progress Bar":"Bar Cynnydd",
+  "progress bar timing: currentTime={1} duration={2}":"{1} o {2}",
+  "Fullscreen":"Sgrîn Lawn",
+  "Exit Fullscreen":"Ffenestr",
+  "Mute":"Pylu",
+  "Unmute":"Dad-bylu",
+  "Playback Rate":"Cyfradd Chwarae",
+  "Subtitles":"Isdeitlau",
+  "subtitles off":"Isdeitlau i ffwrdd",
+  "Captions":"Capsiynau",
+  "captions off":"Capsiynau i ffwrdd",
+  "Chapters":"Penodau",
+  "Descriptions":"Disgrifiadau",
+  "descriptions off":"disgrifiadau i ffwrdd",
+  "Audio Track":"Trac Sain",
+  "Volume Level":"Lefel Sain",
+  "You aborted the media playback":"Atalwyd y fideo gennych",
+  "A network error caused the media download to fail part-way.":"Mae gwall rhwydwaith wedi achosi methiant lawrlwytho.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.":"Ni lwythodd y fideo, oherwydd methiant gweinydd neu rwydwaith, neu achos nid yw'r system yn cefnogi'r fformat.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"Atalwyd y fideo oherwydd problem llygredd data neu oherwydd nid yw'ch porwr yn cefnogi nodweddion penodol o'r fideo.",
+  "No compatible source was found for this media.":"Nid oedd modd canfod ffynhonnell cytûn am y fideo hwn.",
+  "The media is encrypted and we do not have the keys to decrypt it.":"Mae'r fideo wedi ei amgryptio ac nid oes allweddion gennym.",
+  "Play Video":"Chwarae Fideo",
+  "Close":"Cau",
+  "Close Modal Dialog":"Cau Blwch Deialog Moddol",
+  "Modal Window":"Ffenestr Foddol",
+  "This is a modal window":"Mae hon yn ffenestr foddol",
+  "This modal can be closed by pressing the Escape key or activating the close button.":"Gallech chi gau'r ffenestr foddol hon trwy wasgu Escape neu glicio'r botwm cau.",
+  ", opens captions settings dialog":", yn agor gosodiadau capsiynau",
+  ", opens subtitles settings dialog":", yn agor gosodiadau isdeitlau",
+  ", opens descriptions settings dialog":", yn agor gosodiadau disgrifiadau",
+  ", selected":", detholwyd",
+  "captions settings":"gosodiadau capsiynau",
+  "subtitles settings":"gosodiadau isdeitlau",
+  "descriptions settings":"gosodiadau disgrifiadau",
+  "Text":"Testun",
+  "White":"Gwyn",
+  "Black":"Du",
+  "Red":"Coch",
+  "Green":"Gwyrdd",
+  "Blue":"Glas",
+  "Yellow":"Melyn",
+  "Magenta":"Piws",
+  "Cyan":"Cyan",
+  "Background":"Cefndir",
+  "Window":"Ffenestr",
+  "Transparent":"Tryloyw",
+  "Semi-Transparent":"Hanner-dryloyw",
+  "Opaque":"Di-draidd",
+  "Font Size":"Maint y Ffont",
+  "Text Edge Style":"Arddull Ymylon Testun",
+  "None":"Dim",
+  "Raised":"Uwch",
+  "Depressed":"Is",
+  "Uniform":"Unffurf",
+  "Drop shadow":"Cysgod cefn",
+  "Font Family":"Teulu y Ffont",
+  "Proportional Sans-Serif":"Heb-Seriff Cyfraneddol",
+  "Monospace Sans-Serif":"Heb-Seriff Unlled",
+  "Proportional Serif":"Seriff Gyfraneddol",
+  "Monospace Serif":"Seriff Unlled",
+  "Casual":"Llawysgrif",
+  "Script":"Sgript",
+  "Small Caps":"Prif Lythyrennau Bychain",
+  "Reset":"Ailosod",
+  "restore all settings to the default values":"Adfer yr holl osodiadau diofyn",
+  "Done":"Gorffenwyd",
+  "Caption Settings Dialog":"Blwch Gosodiadau Capsiynau",
+  "Beginning of dialog window. Escape will cancel and close the window.":"Dechrau ffenestr deialog. Bydd Escape yn canslo a chau'r ffenestr.",
+  "End of dialog window.":"Diwedd ffenestr deialog.",
+  "{1} is loading.": "{1} yn llwytho."
+}
diff --git a/priv/static/video.js/lang/da.js b/priv/static/video.js/lang/da.js
new file mode 100644
index 0000000..b0ddbcc
--- /dev/null
+++ b/priv/static/video.js/lang/da.js
@@ -0,0 +1,26 @@
+videojs.addLanguage('da', {
+  "Play": "Afspil",
+  "Pause": "Pause",
+  "Current Time": "Aktuel tid",
+  "Duration": "Varighed",
+  "Remaining Time": "Resterende tid",
+  "Stream Type": "Stream-type",
+  "LIVE": "LIVE",
+  "Loaded": "Indlæst",
+  "Progress": "Status",
+  "Fullscreen": "Fuldskærm",
+  "Exit Fullscreen": "Luk fuldskærm",
+  "Mute": "Uden lyd",
+  "Unmute": "Med lyd",
+  "Playback Rate": "Afspilningsrate",
+  "Subtitles": "Undertekster",
+  "subtitles off": "Uden undertekster",
+  "Captions": "Undertekster for hørehæmmede",
+  "captions off": "Uden undertekster for hørehæmmede",
+  "Chapters": "Kapitler",
+  "You aborted the media playback": "Du afbrød videoafspilningen.",
+  "A network error caused the media download to fail part-way.": "En netværksfejl fik download af videoen til at fejle.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Videoen kunne ikke indlæses, enten fordi serveren eller netværket fejlede, eller fordi formatet ikke er understøttet.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Videoafspilningen blev afbrudt på grund af ødelagte data eller fordi videoen benyttede faciliteter som din browser ikke understøtter.",
+  "No compatible source was found for this media.": "Fandt ikke en kompatibel kilde for denne media."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/da.json b/priv/static/video.js/lang/da.json
new file mode 100644
index 0000000..5826785
--- /dev/null
+++ b/priv/static/video.js/lang/da.json
@@ -0,0 +1,26 @@
+{
+  "Play": "Afspil",
+  "Pause": "Pause",
+  "Current Time": "Aktuel tid",
+  "Duration": "Varighed",
+  "Remaining Time": "Resterende tid",
+  "Stream Type": "Stream-type",
+  "LIVE": "LIVE",
+  "Loaded": "Indlæst",
+  "Progress": "Status",
+  "Fullscreen": "Fuldskærm",
+  "Exit Fullscreen": "Luk fuldskærm",
+  "Mute": "Uden lyd",
+  "Unmute": "Med lyd",
+  "Playback Rate": "Afspilningsrate",
+  "Subtitles": "Undertekster",
+  "subtitles off": "Uden undertekster",
+  "Captions": "Undertekster for hørehæmmede",
+  "captions off": "Uden undertekster for hørehæmmede",
+  "Chapters": "Kapitler",
+  "You aborted the media playback": "Du afbrød videoafspilningen.",
+  "A network error caused the media download to fail part-way.": "En netværksfejl fik download af videoen til at fejle.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Videoen kunne ikke indlæses, enten fordi serveren eller netværket fejlede, eller fordi formatet ikke er understøttet.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Videoafspilningen blev afbrudt på grund af ødelagte data eller fordi videoen benyttede faciliteter som din browser ikke understøtter.",
+  "No compatible source was found for this media.": "Fandt ikke en kompatibel kilde for denne media."
+}
diff --git a/priv/static/video.js/lang/de.js b/priv/static/video.js/lang/de.js
new file mode 100644
index 0000000..3e809d1
--- /dev/null
+++ b/priv/static/video.js/lang/de.js
@@ -0,0 +1,97 @@
+videojs.addLanguage('de', {
+  "Play": "Wiedergabe",
+  "Pause": "Pause",
+  "Replay": "Erneut abspielen",
+  "Current Time": "Aktueller Zeitpunkt",
+  "Duration": "Dauer",
+  "Remaining Time": "Verbleibende Zeit",
+  "Stream Type": "Streamtyp",
+  "LIVE": "LIVE",
+  "Loaded": "Geladen",
+  "Progress": "Status",
+  "Fullscreen": "Vollbild",
+  "Exit Fullscreen": "Vollbildmodus beenden",
+  "Mute": "Stumm schalten",
+  "Unmute": "Ton einschalten",
+  "Playback Rate": "Wiedergabegeschwindigkeit",
+  "Subtitles": "Untertitel",
+  "subtitles off": "Untertitel aus",
+  "Captions": "Untertitel",
+  "captions off": "Untertitel aus",
+  "Chapters": "Kapitel",
+  "You aborted the media playback": "Sie haben die Videowiedergabe abgebrochen.",
+  "A network error caused the media download to fail part-way.": "Der Videodownload ist aufgrund eines Netzwerkfehlers fehlgeschlagen.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Die Videowiedergabe wurde entweder wegen eines Problems mit einem beschädigten Video oder wegen verwendeten Funktionen, die vom Browser nicht unterstützt werden, abgebrochen.",
+  "No compatible source was found for this media.": "Für dieses Video wurde keine kompatible Quelle gefunden.",
+  "Play Video": "Video abspielen",
+  "Close": "Schließen",
+  "Modal Window": "Modales Fenster",
+  "This is a modal window": "Dies ist ein modales Fenster",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Durch Drücken der Esc-Taste bzw. Betätigung der Schaltfläche \"Schließen\" wird dieses modale Fenster geschlossen.",
+  ", opens captions settings dialog": ", öffnet Einstellungen für Untertitel",
+  ", opens subtitles settings dialog": ", öffnet Einstellungen für Untertitel",
+  ", selected": ", ausgewählt",
+  "captions settings": "Untertiteleinstellungen",
+  "subtitles settings": "Untertiteleinstellungen",
+  "descriptions settings": "Einstellungen für Beschreibungen",
+  "Close Modal Dialog": "Modales Fenster schließen",
+  "Descriptions": "Beschreibungen",
+  "descriptions off": "Beschreibungen aus",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Die Entschlüsselungsschlüssel für den verschlüsselten Medieninhalt sind nicht verfügbar.",
+  ", opens descriptions settings dialog": ", öffnet Einstellungen für Beschreibungen",
+  "Audio Track": "Tonspur",
+  "Text": "Schrift",
+  "White": "Weiß",
+  "Black": "Schwarz",
+  "Red": "Rot",
+  "Green": "Grün",
+  "Blue": "Blau",
+  "Yellow": "Gelb",
+  "Magenta": "Magenta",
+  "Cyan": "Türkis",
+  "Background": "Hintergrund",
+  "Window": "Fenster",
+  "Transparent": "Durchsichtig",
+  "Semi-Transparent": "Halbdurchsichtig",
+  "Opaque": "Undurchsichtig",
+  "Font Size": "Schriftgröße",
+  "Text Edge Style": "Textkantenstil",
+  "None": "Kein",
+  "Raised": "Erhoben",
+  "Depressed": "Gedrückt",
+  "Uniform": "Uniform",
+  "Drop shadow": "Schlagschatten",
+  "Font Family": "Schriftfamilie",
+  "Proportional Sans-Serif": "Proportionale Sans-Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Proportionale Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Casual": "Zwanglos",
+  "Script": "Schreibschrift",
+  "Small Caps": "Small-Caps",
+  "Reset": "Zurücksetzen",
+  "restore all settings to the default values": "Alle Einstellungen auf die Standardwerte zurücksetzen",
+  "Done": "Fertig",
+  "Caption Settings Dialog": "Einstellungsdialog für Untertitel",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Anfang des Dialogfensters. Esc bricht ab und schließt das Fenster.",
+  "End of dialog window.": "Ende des Dialogfensters.",
+  "Audio Player": "Audio-Player",
+  "Video Player": "Video-Player",
+  "Progress Bar": "Fortschrittsbalken",
+  "progress bar timing: currentTime={1} duration={2}": "{1} von {2}",
+  "Volume Level": "Lautstärke",
+  "{1} is loading.": "{1} wird geladen.",
+  "Seek to live, currently behind live": "Zur Live-Übertragung wechseln. Aktuell wird es nicht live abgespielt.",
+  "Seek to live, currently playing live": "Zur Live-Übertragung wechseln. Es wird aktuell live abgespielt.",
+  "Exit Picture-in-Picture": "Bild-im-Bild-Modus beenden",
+  "Picture-in-Picture": "Bild-im-Bild-Modus",
+  "No content": "Kein Inhalt",
+  "Color": "Farbe",
+  "Opacity": "Deckkraft",
+  "Text Background": "Texthintergrund",
+  "Caption Area Background": "Hintergrund des Untertitelbereichs",
+  "Playing in Picture-in-Picture": "Wird im Bild-im-Bild-Modus wiedergegeben",
+  "Skip forward {1} seconds": "{1} Sekunden vorwärts",
+  "Skip backward {1} seconds": "{1} Sekunden zurück"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/de.json b/priv/static/video.js/lang/de.json
new file mode 100644
index 0000000..3c5cfd4
--- /dev/null
+++ b/priv/static/video.js/lang/de.json
@@ -0,0 +1,98 @@
+{
+  "Play": "Wiedergabe",
+  "Pause": "Pause",
+  "Replay": "Erneut abspielen",
+  "Current Time": "Aktueller Zeitpunkt",
+  "Duration": "Dauer",
+  "Remaining Time": "Verbleibende Zeit",
+  "Stream Type": "Streamtyp",
+  "LIVE": "LIVE",
+  "Loaded": "Geladen",
+  "Progress": "Status",
+  "Fullscreen": "Vollbild",
+  "Exit Fullscreen": "Vollbildmodus beenden",
+  "Mute": "Stumm schalten",
+  "Unmute": "Ton einschalten",
+  "Playback Rate": "Wiedergabegeschwindigkeit",
+  "Subtitles": "Untertitel",
+  "subtitles off": "Untertitel aus",
+  "Captions": "Untertitel",
+  "captions off": "Untertitel aus",
+  "Chapters": "Kapitel",
+  "You aborted the media playback": "Sie haben die Videowiedergabe abgebrochen.",
+  "A network error caused the media download to fail part-way.": "Der Videodownload ist aufgrund eines Netzwerkfehlers fehlgeschlagen.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Die Videowiedergabe wurde entweder wegen eines Problems mit einem beschädigten Video oder wegen verwendeten Funktionen, die vom Browser nicht unterstützt werden, abgebrochen.",
+  "No compatible source was found for this media.": "Für dieses Video wurde keine kompatible Quelle gefunden.",
+  "Play Video": "Video abspielen",
+  "Close": "Schließen",
+  "Modal Window": "Modales Fenster",
+  "This is a modal window": "Dies ist ein modales Fenster",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Durch Drücken der Esc-Taste bzw. Betätigung der Schaltfläche \"Schließen\" wird dieses modale Fenster geschlossen.",
+  ", opens captions settings dialog": ", öffnet Einstellungen für Untertitel",
+  ", opens subtitles settings dialog": ", öffnet Einstellungen für Untertitel",
+  ", selected": ", ausgewählt",
+  "captions settings": "Untertiteleinstellungen",
+  "subtitles settings": "Untertiteleinstellungen",
+  "descriptions settings": "Einstellungen für Beschreibungen",
+  "Close Modal Dialog": "Modales Fenster schließen",
+  "Descriptions": "Beschreibungen",
+  "descriptions off": "Beschreibungen aus",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Die Entschlüsselungsschlüssel für den verschlüsselten Medieninhalt sind nicht verfügbar.",
+  ", opens descriptions settings dialog": ", öffnet Einstellungen für Beschreibungen",
+  "Audio Track": "Tonspur",
+  "Text": "Schrift",
+  "White": "Weiß",
+  "Black": "Schwarz",
+  "Red": "Rot",
+  "Green": "Grün",
+  "Blue": "Blau",
+  "Yellow": "Gelb",
+  "Magenta": "Magenta",
+  "Cyan": "Türkis",
+  "Background": "Hintergrund",
+  "Window": "Fenster",
+  "Transparent": "Durchsichtig",
+  "Semi-Transparent": "Halbdurchsichtig",
+  "Opaque": "Undurchsichtig",
+  "Font Size": "Schriftgröße",
+  "Text Edge Style": "Textkantenstil",
+  "None": "Kein",
+  "Raised": "Erhoben",
+  "Depressed": "Gedrückt",
+  "Uniform": "Uniform",
+  "Drop shadow": "Schlagschatten",
+  "Font Family": "Schriftfamilie",
+  "Proportional Sans-Serif": "Proportionale Sans-Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Proportionale Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Casual": "Zwanglos",
+  "Script": "Schreibschrift",
+  "Small Caps": "Small-Caps",
+  "Reset": "Zurücksetzen",
+  "restore all settings to the default values": "Alle Einstellungen auf die Standardwerte zurücksetzen",
+  "Done": "Fertig",
+  "Caption Settings Dialog": "Einstellungsdialog für Untertitel",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Anfang des Dialogfensters. Esc bricht ab und schließt das Fenster.",
+  "End of dialog window.": "Ende des Dialogfensters.",
+  "Audio Player": "Audio-Player",
+  "Video Player": "Video-Player",
+  "Progress Bar": "Fortschrittsbalken",
+  "progress bar timing: currentTime={1} duration={2}": "{1} von {2}",
+  "Volume Level": "Lautstärke",
+  "{1} is loading.": "{1} wird geladen.",
+  "Seek to live, currently behind live": "Zur Live-Übertragung wechseln. Aktuell wird es nicht live abgespielt.",
+  "Seek to live, currently playing live": "Zur Live-Übertragung wechseln. Es wird aktuell live abgespielt.",
+  "Exit Picture-in-Picture": "Bild-im-Bild-Modus beenden",
+  "Picture-in-Picture": "Bild-im-Bild-Modus",
+  "No content": "Kein Inhalt",
+  "Color": "Farbe",
+  "Opacity": "Deckkraft",
+  "Text Background": "Texthintergrund",
+  "Caption Area Background": "Hintergrund des Untertitelbereichs",
+  "Playing in Picture-in-Picture": "Wird im Bild-im-Bild-Modus wiedergegeben",
+  "Skip forward {1} seconds": "{1} Sekunden vorwärts",
+  "Skip backward {1} seconds": "{1} Sekunden zurück"
+}
+
diff --git a/priv/static/video.js/lang/el.js b/priv/static/video.js/lang/el.js
new file mode 100644
index 0000000..9f236ce
--- /dev/null
+++ b/priv/static/video.js/lang/el.js
@@ -0,0 +1,40 @@
+videojs.addLanguage('el', {
+  "Play": "Aναπαραγωγή",
+  "Pause": "Παύση",
+  "Current Time": "Τρέχων χρόνος",
+  "Duration": "Συνολικός χρόνος",
+  "Remaining Time": "Υπολοιπόμενος χρόνος",
+  "Stream Type": "Τύπος ροής",
+  "LIVE": "ΖΩΝΤΑΝΑ",
+  "Loaded": "Φόρτωση επιτυχής",
+  "Progress": "Πρόοδος",
+  "Fullscreen": "Πλήρης οθόνη",
+  "Exit Fullscreen": "Έξοδος από πλήρη οθόνη",
+  "Mute": "Σίγαση",
+  "Unmute": "Kατάργηση σίγασης",
+  "Playback Rate": "Ρυθμός αναπαραγωγής",
+  "Subtitles": "Υπότιτλοι",
+  "subtitles off": "απόκρυψη υπότιτλων",
+  "Captions": "Λεζάντες",
+  "captions off": "απόκρυψη λεζάντων",
+  "Chapters": "Κεφάλαια",
+  "Close Modal Dialog": "Κλείσιμο παραθύρου",
+  "Descriptions": "Περιγραφές",
+  "descriptions off": "απόκρυψη περιγραφών",
+  "Audio Track": "Ροή ήχου",
+  "You aborted the media playback": "Ακυρώσατε την αναπαραγωγή",
+  "A network error caused the media download to fail part-way.": "Ένα σφάλμα δικτύου προκάλεσε την αποτυχία μεταφόρτωσης του αρχείου προς αναπαραγωγή.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Το αρχείο προς αναπαραγωγή δεν ήταν δυνατό να φορτωθεί είτε γιατί υπήρξε σφάλμα στον διακομιστή ή το δίκτυο, είτε γιατί ο τύπος του αρχείου δεν υποστηρίζεται.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Η αναπαραγωγή ακυρώθηκε είτε λόγω κατεστραμμένου αρχείου, είτε γιατί το αρχείο απαιτεί λειτουργίες που δεν υποστηρίζονται από το πρόγραμμα περιήγησης που χρησιμοποιείτε.",
+  "No compatible source was found for this media.": "Δεν βρέθηκε συμβατή πηγή αναπαραγωγής για το συγκεκριμένο αρχείο.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Το αρχείο προς αναπαραγωγή είναι κρυπτογραφημένo και δεν υπάρχουν τα απαραίτητα κλειδιά αποκρυπτογράφησης.",
+  "Play Video": "Αναπαραγωγή βίντεο",
+  "Close": "Κλείσιμο",
+  "Modal Window": "Aναδυόμενο παράθυρο",
+  "This is a modal window": "Το παρών είναι ένα αναδυόμενο παράθυρο",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Αυτό το παράθυρο μπορεί να εξαφανιστεί πατώντας το πλήκτρο Escape ή πατώντας το κουμπί κλεισίματος.",
+  ", opens captions settings dialog": ", εμφανίζει τις ρυθμίσεις για τις λεζάντες",
+  ", opens subtitles settings dialog": ", εμφανίζει τις ρυθμίσεις για τους υπότιτλους",
+  ", opens descriptions settings dialog": ", εμφανίζει τις ρυθμίσεις για τις περιγραφές",
+  ", selected": ", επιλεγμένο"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/el.json b/priv/static/video.js/lang/el.json
new file mode 100644
index 0000000..7211ee4
--- /dev/null
+++ b/priv/static/video.js/lang/el.json
@@ -0,0 +1,40 @@
+{
+  "Play": "Aναπαραγωγή",
+  "Pause": "Παύση",
+  "Current Time": "Τρέχων χρόνος",
+  "Duration": "Συνολικός χρόνος",
+  "Remaining Time": "Υπολοιπόμενος χρόνος",
+  "Stream Type": "Τύπος ροής",
+  "LIVE": "ΖΩΝΤΑΝΑ",
+  "Loaded": "Φόρτωση επιτυχής",
+  "Progress": "Πρόοδος",
+  "Fullscreen": "Πλήρης οθόνη",
+  "Exit Fullscreen": "Έξοδος από πλήρη οθόνη",
+  "Mute": "Σίγαση",
+  "Unmute": "Kατάργηση σίγασης",
+  "Playback Rate": "Ρυθμός αναπαραγωγής",
+  "Subtitles": "Υπότιτλοι",
+  "subtitles off": "απόκρυψη υπότιτλων",
+  "Captions": "Λεζάντες",
+  "captions off": "απόκρυψη λεζάντων",
+  "Chapters": "Κεφάλαια",
+  "Close Modal Dialog": "Κλείσιμο παραθύρου",
+  "Descriptions": "Περιγραφές",
+  "descriptions off": "απόκρυψη περιγραφών",
+  "Audio Track": "Ροή ήχου",
+  "You aborted the media playback": "Ακυρώσατε την αναπαραγωγή",
+  "A network error caused the media download to fail part-way.": "Ένα σφάλμα δικτύου προκάλεσε την αποτυχία μεταφόρτωσης του αρχείου προς αναπαραγωγή.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Το αρχείο προς αναπαραγωγή δεν ήταν δυνατό να φορτωθεί είτε γιατί υπήρξε σφάλμα στον διακομιστή ή το δίκτυο, είτε γιατί ο τύπος του αρχείου δεν υποστηρίζεται.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Η αναπαραγωγή ακυρώθηκε είτε λόγω κατεστραμμένου αρχείου, είτε γιατί το αρχείο απαιτεί λειτουργίες που δεν υποστηρίζονται από το πρόγραμμα περιήγησης που χρησιμοποιείτε.",
+  "No compatible source was found for this media.": "Δεν βρέθηκε συμβατή πηγή αναπαραγωγής για το συγκεκριμένο αρχείο.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Το αρχείο προς αναπαραγωγή είναι κρυπτογραφημένo και δεν υπάρχουν τα απαραίτητα κλειδιά αποκρυπτογράφησης.",
+  "Play Video": "Αναπαραγωγή βίντεο",
+  "Close": "Κλείσιμο",
+  "Modal Window": "Aναδυόμενο παράθυρο",
+  "This is a modal window": "Το παρών είναι ένα αναδυόμενο παράθυρο",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Αυτό το παράθυρο μπορεί να εξαφανιστεί πατώντας το πλήκτρο Escape ή πατώντας το κουμπί κλεισίματος.",
+  ", opens captions settings dialog": ", εμφανίζει τις ρυθμίσεις για τις λεζάντες",
+  ", opens subtitles settings dialog": ", εμφανίζει τις ρυθμίσεις για τους υπότιτλους",
+  ", opens descriptions settings dialog": ", εμφανίζει τις ρυθμίσεις για τις περιγραφές",
+  ", selected": ", επιλεγμένο"
+}
diff --git a/priv/static/video.js/lang/en-GB.js b/priv/static/video.js/lang/en-GB.js
new file mode 100644
index 0000000..73653fb
--- /dev/null
+++ b/priv/static/video.js/lang/en-GB.js
@@ -0,0 +1,3 @@
+videojs.addLanguage('en-GB', {
+  "Color": "Colour"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/en-GB.json b/priv/static/video.js/lang/en-GB.json
new file mode 100644
index 0000000..7010b64
--- /dev/null
+++ b/priv/static/video.js/lang/en-GB.json
@@ -0,0 +1,4 @@
+{
+  "Color": "Colour"
+}
+
diff --git a/priv/static/video.js/lang/en.js b/priv/static/video.js/lang/en.js
new file mode 100644
index 0000000..c227dc9
--- /dev/null
+++ b/priv/static/video.js/lang/en.js
@@ -0,0 +1,97 @@
+videojs.addLanguage('en', {
+  "Audio Player": "Audio Player",
+  "Video Player": "Video Player",
+  "Play": "Play",
+  "Pause": "Pause",
+  "Replay": "Replay",
+  "Current Time": "Current Time",
+  "Duration": "Duration",
+  "Remaining Time": "Remaining Time",
+  "Stream Type": "Stream Type",
+  "LIVE": "LIVE",
+  "Seek to live, currently behind live": "Seek to live, currently behind live",
+  "Seek to live, currently playing live": "Seek to live, currently playing live",
+  "Loaded": "Loaded",
+  "Progress": "Progress",
+  "Progress Bar": "Progress Bar",
+  "progress bar timing: currentTime={1} duration={2}": "{1} of {2}",
+  "Fullscreen": "Fullscreen",
+  "Exit Fullscreen": "Exit Fullscreen",
+  "Mute": "Mute",
+  "Unmute": "Unmute",
+  "Playback Rate": "Playback Rate",
+  "Subtitles": "Subtitles",
+  "subtitles off": "subtitles off",
+  "Captions": "Captions",
+  "captions off": "captions off",
+  "Chapters": "Chapters",
+  "Descriptions": "Descriptions",
+  "descriptions off": "descriptions off",
+  "Audio Track": "Audio Track",
+  "Volume Level": "Volume Level",
+  "You aborted the media playback": "You aborted the media playback",
+  "A network error caused the media download to fail part-way.": "A network error caused the media download to fail part-way.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "The media could not be loaded, either because the server or network failed or because the format is not supported.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.",
+  "No compatible source was found for this media.": "No compatible source was found for this media.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "The media is encrypted and we do not have the keys to decrypt it.",
+  "Play Video": "Play Video",
+  "Close": "Close",
+  "Close Modal Dialog": "Close Modal Dialog",
+  "Modal Window": "Modal Window",
+  "This is a modal window": "This is a modal window",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "This modal can be closed by pressing the Escape key or activating the close button.",
+  ", opens captions settings dialog": ", opens captions settings dialog",
+  ", opens subtitles settings dialog": ", opens subtitles settings dialog",
+  ", opens descriptions settings dialog": ", opens descriptions settings dialog",
+  ", selected": ", selected",
+  "captions settings": "captions settings",
+  "subtitles settings": "subtitles settings",
+  "descriptions settings": "descriptions settings",
+  "Text": "Text",
+  "White": "White",
+  "Black": "Black",
+  "Red": "Red",
+  "Green": "Green",
+  "Blue": "Blue",
+  "Yellow": "Yellow",
+  "Magenta": "Magenta",
+  "Cyan": "Cyan",
+  "Background": "Background",
+  "Window": "Window",
+  "Transparent": "Transparent",
+  "Semi-Transparent": "Semi-Transparent",
+  "Opaque": "Opaque",
+  "Font Size": "Font Size",
+  "Text Edge Style": "Text Edge Style",
+  "None": "None",
+  "Raised": "Raised",
+  "Depressed": "Depressed",
+  "Uniform": "Uniform",
+  "Drop shadow": "Drop shadow",
+  "Font Family": "Font Family",
+  "Proportional Sans-Serif": "Proportional Sans-Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Proportional Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Casual": "Casual",
+  "Script": "Script",
+  "Small Caps": "Small Caps",
+  "Reset": "Reset",
+  "restore all settings to the default values": "restore all settings to the default values",
+  "Done": "Done",
+  "Caption Settings Dialog": "Caption Settings Dialog",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Beginning of dialog window. Escape will cancel and close the window.",
+  "End of dialog window.": "End of dialog window.",
+  "{1} is loading.": "{1} is loading.",
+  "Exit Picture-in-Picture": "Exit Picture-in-Picture",
+  "Picture-in-Picture": "Picture-in-Picture",
+  "No content": "No content",
+  "Color": "Color",
+  "Opacity": "Opacity",
+  "Text Background": "Text Background",
+  "Caption Area Background": "Caption Area Background",
+  "Playing in Picture-in-Picture": "Playing in Picture-in-Picture",
+  "Skip backward {1} seconds": "Skip backward {1} seconds",
+  "Skip forward {1} seconds": "Skip forward {1} seconds"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/en.json b/priv/static/video.js/lang/en.json
new file mode 100644
index 0000000..ba96366
--- /dev/null
+++ b/priv/static/video.js/lang/en.json
@@ -0,0 +1,97 @@
+{
+  "Audio Player": "Audio Player",
+  "Video Player": "Video Player",
+  "Play": "Play",
+  "Pause": "Pause",
+  "Replay": "Replay",
+  "Current Time": "Current Time",
+  "Duration": "Duration",
+  "Remaining Time": "Remaining Time",
+  "Stream Type": "Stream Type",
+  "LIVE": "LIVE",
+  "Seek to live, currently behind live": "Seek to live, currently behind live",
+  "Seek to live, currently playing live": "Seek to live, currently playing live",
+  "Loaded": "Loaded",
+  "Progress": "Progress",
+  "Progress Bar": "Progress Bar",
+  "progress bar timing: currentTime={1} duration={2}": "{1} of {2}",
+  "Fullscreen": "Fullscreen",
+  "Exit Fullscreen": "Exit Fullscreen",
+  "Mute": "Mute",
+  "Unmute": "Unmute",
+  "Playback Rate": "Playback Rate",
+  "Subtitles": "Subtitles",
+  "subtitles off": "subtitles off",
+  "Captions": "Captions",
+  "captions off": "captions off",
+  "Chapters": "Chapters",
+  "Descriptions": "Descriptions",
+  "descriptions off": "descriptions off",
+  "Audio Track": "Audio Track",
+  "Volume Level": "Volume Level",
+  "You aborted the media playback": "You aborted the media playback",
+  "A network error caused the media download to fail part-way.": "A network error caused the media download to fail part-way.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "The media could not be loaded, either because the server or network failed or because the format is not supported.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.",
+  "No compatible source was found for this media.": "No compatible source was found for this media.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "The media is encrypted and we do not have the keys to decrypt it.",
+  "Play Video": "Play Video",
+  "Close": "Close",
+  "Close Modal Dialog": "Close Modal Dialog",
+  "Modal Window": "Modal Window",
+  "This is a modal window": "This is a modal window",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "This modal can be closed by pressing the Escape key or activating the close button.",
+  ", opens captions settings dialog": ", opens captions settings dialog",
+  ", opens subtitles settings dialog": ", opens subtitles settings dialog",
+  ", opens descriptions settings dialog": ", opens descriptions settings dialog",
+  ", selected": ", selected",
+  "captions settings": "captions settings",
+  "subtitles settings": "subtitles settings",
+  "descriptions settings": "descriptions settings",
+  "Text": "Text",
+  "White": "White",
+  "Black": "Black",
+  "Red": "Red",
+  "Green": "Green",
+  "Blue": "Blue",
+  "Yellow": "Yellow",
+  "Magenta": "Magenta",
+  "Cyan": "Cyan",
+  "Background": "Background",
+  "Window": "Window",
+  "Transparent": "Transparent",
+  "Semi-Transparent": "Semi-Transparent",
+  "Opaque": "Opaque",
+  "Font Size": "Font Size",
+  "Text Edge Style": "Text Edge Style",
+  "None": "None",
+  "Raised": "Raised",
+  "Depressed": "Depressed",
+  "Uniform": "Uniform",
+  "Drop shadow": "Drop shadow",
+  "Font Family": "Font Family",
+  "Proportional Sans-Serif": "Proportional Sans-Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Proportional Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Casual": "Casual",
+  "Script": "Script",
+  "Small Caps": "Small Caps",
+  "Reset": "Reset",
+  "restore all settings to the default values": "restore all settings to the default values",
+  "Done": "Done",
+  "Caption Settings Dialog": "Caption Settings Dialog",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Beginning of dialog window. Escape will cancel and close the window.",
+  "End of dialog window.": "End of dialog window.",
+  "{1} is loading.": "{1} is loading.",
+  "Exit Picture-in-Picture": "Exit Picture-in-Picture",
+  "Picture-in-Picture": "Picture-in-Picture",
+  "No content": "No content",
+  "Color": "Color",
+  "Opacity": "Opacity",
+  "Text Background": "Text Background",
+  "Caption Area Background": "Caption Area Background",
+  "Playing in Picture-in-Picture": "Playing in Picture-in-Picture",
+  "Skip backward {1} seconds": "Skip backward {1} seconds",
+  "Skip forward {1} seconds": "Skip forward {1} seconds"
+}
diff --git a/priv/static/video.js/lang/es.js b/priv/static/video.js/lang/es.js
new file mode 100644
index 0000000..55a6b6d
--- /dev/null
+++ b/priv/static/video.js/lang/es.js
@@ -0,0 +1,96 @@
+videojs.addLanguage('es', {
+  "Play": "Reproducir",
+  "Play Video": "Reproducir Vídeo",
+  "Pause": "Pausa",
+  "Current Time": "Tiempo reproducido",
+  "Duration": "Duración total",
+  "Remaining Time": "Tiempo restante",
+  "Stream Type": "Tipo de secuencia",
+  "LIVE": "DIRECTO",
+  "Loaded": "Cargado",
+  "Progress": "Progreso",
+  "Fullscreen": "Pantalla completa",
+  "Exit Fullscreen": "Pantalla no completa",
+  "Mute": "Desactivar el sonido",
+  "Unmute": "Activar el sonido",
+  "Playback Rate": "Velocidad de reproducción",
+  "Subtitles": "Subtítulos",
+  "subtitles off": "Subtítulos desactivados",
+  "Captions": "Subtítulos especiales",
+  "captions off": "Subtítulos especiales desactivados",
+  "Chapters": "Capítulos",
+  "You aborted the media playback": "Ha interrumpido la reproducción del vídeo.",
+  "A network error caused the media download to fail part-way.": "Un error de red ha interrumpido la descarga del vídeo.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "La reproducción de vídeo se ha interrumpido por un problema de corrupción de datos o porque el vídeo precisa funciones que su navegador no ofrece.",
+  "No compatible source was found for this media.": "No se ha encontrado ninguna fuente compatible con este vídeo.",
+  "Audio Player": "Reproductor de audio",
+  "Video Player": "Reproductor de video",
+  "Replay": "Volver a reproducir",
+  "Seek to live, currently behind live": "Buscar en vivo, actualmente demorado con respecto a la transmisión en vivo",
+  "Seek to live, currently playing live": "Buscar en vivo, actualmente reproduciendo en vivo",
+  "Progress Bar": "Barra de progreso",
+  "progress bar timing: currentTime={1} duration={2}": "{1} de {2}",
+  "Descriptions": "Descripciones",
+  "descriptions off": "descripciones desactivadas",
+  "Audio Track": "Pista de audio",
+  "Volume Level": "Nivel de volumen",
+  "The media is encrypted and we do not have the keys to decrypt it.": "El material audiovisual está cifrado y no tenemos las claves para descifrarlo.",
+  "Close": "Cerrar",
+  "Modal Window": "Ventana modal",
+  "This is a modal window": "Esta es una ventana modal",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Esta ventana modal puede cerrarse presionando la tecla Escape o activando el botón de cierre.",
+  ", opens captions settings dialog": ", abre el diálogo de configuración de leyendas",
+  ", opens subtitles settings dialog": ", abre el diálogo de configuración de subtítulos",
+  ", selected": ", seleccionado",
+  "Close Modal Dialog": "Cierra cuadro de diálogo modal",
+  ", opens descriptions settings dialog": ", abre el diálogo de configuración de las descripciones",
+  "captions settings": "configuración de leyendas",
+  "subtitles settings": "configuración de subtítulos",
+  "descriptions settings": "configuración de descripciones",
+  "Text": "Texto",
+  "White": "Blanco",
+  "Black": "Negro",
+  "Red": "Rojo",
+  "Green": "Verde",
+  "Blue": "Azul",
+  "Yellow": "Amarillo",
+  "Magenta": "Magenta",
+  "Cyan": "Cian",
+  "Background": "Fondo",
+  "Window": "Ventana",
+  "Transparent": "Transparente",
+  "Semi-Transparent": "Semitransparente",
+  "Opaque": "Opaca",
+  "Font Size": "Tamaño de fuente",
+  "Text Edge Style": "Estilo de borde del texto",
+  "None": "Ninguno",
+  "Raised": "En relieve",
+  "Depressed": "Hundido",
+  "Uniform": "Uniforme",
+  "Drop shadow": "Sombra paralela",
+  "Font Family": "Familia de fuente",
+  "Proportional Sans-Serif": "Sans-Serif proporcional",
+  "Monospace Sans-Serif": "Sans-Serif monoespacio",
+  "Proportional Serif": "Serif proporcional",
+  "Monospace Serif": "Serif monoespacio",
+  "Casual": "Informal",
+  "Script": "Cursiva",
+  "Small Caps": "Minúsculas",
+  "Reset": "Restablecer",
+  "restore all settings to the default values": "restablece todas las configuraciones a los valores predeterminados",
+  "Done": "Listo",
+  "Caption Settings Dialog": "Diálogo de configuración de leyendas",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Comienzo de la ventana de diálogo. La tecla Escape cancelará la operación y cerrará la ventana.",
+  "End of dialog window.": "Final de la ventana de diálogo.",
+  "{1} is loading.": "{1} se está cargando.",
+  "Exit Picture-in-Picture": "Salir de imagen sobre imagen",
+  "Picture-in-Picture": "Imagen sobre imagen",
+  "No content": "Sin contenido",
+  "Color": "Color",
+  "Opacity": "Opacidad",
+  "Text Background": "Fondo del texto",
+  "Caption Area Background": "Fondo del área de subtítulos",
+  "Skip forward {1} seconds": "Avanza {1} segundos",
+  "Skip backward {1} seconds": "Retrocede {1} segundos"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/es.json b/priv/static/video.js/lang/es.json
new file mode 100644
index 0000000..91d30ff
--- /dev/null
+++ b/priv/static/video.js/lang/es.json
@@ -0,0 +1,96 @@
+{
+  "Play": "Reproducir",
+  "Play Video": "Reproducir Vídeo",
+  "Pause": "Pausa",
+  "Current Time": "Tiempo reproducido",
+  "Duration": "Duración total",
+  "Remaining Time": "Tiempo restante",
+  "Stream Type": "Tipo de secuencia",
+  "LIVE": "DIRECTO",
+  "Loaded": "Cargado",
+  "Progress": "Progreso",
+  "Fullscreen": "Pantalla completa",
+  "Exit Fullscreen": "Pantalla no completa",
+  "Mute": "Desactivar el sonido",
+  "Unmute": "Activar el sonido",
+  "Playback Rate": "Velocidad de reproducción",
+  "Subtitles": "Subtítulos",
+  "subtitles off": "Subtítulos desactivados",
+  "Captions": "Subtítulos especiales",
+  "captions off": "Subtítulos especiales desactivados",
+  "Chapters": "Capítulos",
+  "You aborted the media playback": "Ha interrumpido la reproducción del vídeo.",
+  "A network error caused the media download to fail part-way.": "Un error de red ha interrumpido la descarga del vídeo.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "La reproducción de vídeo se ha interrumpido por un problema de corrupción de datos o porque el vídeo precisa funciones que su navegador no ofrece.",
+  "No compatible source was found for this media.": "No se ha encontrado ninguna fuente compatible con este vídeo.",
+  "Audio Player": "Reproductor de audio",
+  "Video Player": "Reproductor de video",
+  "Replay": "Volver a reproducir",
+  "Seek to live, currently behind live": "Buscar en vivo, actualmente demorado con respecto a la transmisión en vivo",
+  "Seek to live, currently playing live": "Buscar en vivo, actualmente reproduciendo en vivo",
+  "Progress Bar": "Barra de progreso",
+  "progress bar timing: currentTime={1} duration={2}": "{1} de {2}",
+  "Descriptions": "Descripciones",
+  "descriptions off": "descripciones desactivadas",
+  "Audio Track": "Pista de audio",
+  "Volume Level": "Nivel de volumen",
+  "The media is encrypted and we do not have the keys to decrypt it.": "El material audiovisual está cifrado y no tenemos las claves para descifrarlo.",
+  "Close": "Cerrar",
+  "Modal Window": "Ventana modal",
+  "This is a modal window": "Esta es una ventana modal",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Esta ventana modal puede cerrarse presionando la tecla Escape o activando el botón de cierre.",
+  ", opens captions settings dialog": ", abre el diálogo de configuración de leyendas",
+  ", opens subtitles settings dialog": ", abre el diálogo de configuración de subtítulos",
+  ", selected": ", seleccionado",
+  "Close Modal Dialog": "Cierra cuadro de diálogo modal",
+  ", opens descriptions settings dialog": ", abre el diálogo de configuración de las descripciones",
+  "captions settings": "configuración de leyendas",
+  "subtitles settings": "configuración de subtítulos",
+  "descriptions settings": "configuración de descripciones",
+  "Text": "Texto",
+  "White": "Blanco",
+  "Black": "Negro",
+  "Red": "Rojo",
+  "Green": "Verde",
+  "Blue": "Azul",
+  "Yellow": "Amarillo",
+  "Magenta": "Magenta",
+  "Cyan": "Cian",
+  "Background": "Fondo",
+  "Window": "Ventana",
+  "Transparent": "Transparente",
+  "Semi-Transparent": "Semitransparente",
+  "Opaque": "Opaca",
+  "Font Size": "Tamaño de fuente",
+  "Text Edge Style": "Estilo de borde del texto",
+  "None": "Ninguno",
+  "Raised": "En relieve",
+  "Depressed": "Hundido",
+  "Uniform": "Uniforme",
+  "Drop shadow": "Sombra paralela",
+  "Font Family": "Familia de fuente",
+  "Proportional Sans-Serif": "Sans-Serif proporcional",
+  "Monospace Sans-Serif": "Sans-Serif monoespacio",
+  "Proportional Serif": "Serif proporcional",
+  "Monospace Serif": "Serif monoespacio",
+  "Casual": "Informal",
+  "Script": "Cursiva",
+  "Small Caps": "Minúsculas",
+  "Reset": "Restablecer",
+  "restore all settings to the default values": "restablece todas las configuraciones a los valores predeterminados",
+  "Done": "Listo",
+  "Caption Settings Dialog": "Diálogo de configuración de leyendas",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Comienzo de la ventana de diálogo. La tecla Escape cancelará la operación y cerrará la ventana.",
+  "End of dialog window.": "Final de la ventana de diálogo.",
+  "{1} is loading.": "{1} se está cargando.",
+  "Exit Picture-in-Picture": "Salir de imagen sobre imagen",
+  "Picture-in-Picture": "Imagen sobre imagen",
+  "No content": "Sin contenido",
+  "Color": "Color",
+  "Opacity": "Opacidad",
+  "Text Background": "Fondo del texto",
+  "Caption Area Background": "Fondo del área de subtítulos",
+  "Skip forward {1} seconds": "Avanza {1} segundos",
+  "Skip backward {1} seconds": "Retrocede {1} segundos"
+}
diff --git a/priv/static/video.js/lang/et.js b/priv/static/video.js/lang/et.js
new file mode 100644
index 0000000..8ae7209
--- /dev/null
+++ b/priv/static/video.js/lang/et.js
@@ -0,0 +1,89 @@
+videojs.addLanguage('et', {
+  "Audio Player": "Heliesitaja",
+  "Video Player": "Videoesitaja",
+  "Play": "Esita",
+  "Pause": "Paus",
+  "Replay": "Esita uuesti",
+  "Current Time": "Praegune aeg",
+  "Duration": "Kestus",
+  "Remaining Time": "Järelejäänud aeg",
+  "Stream Type": "Voo tüüp",
+  "LIVE": "OTSE",
+  "Seek to live, currently behind live": "Mine üle otseedastusle, praegu reaalajast taga",
+  "Seek to live, currently playing live": "Mine üle otseedastusle, praegu reaalajas ",
+  "Loaded": "Laaditud",
+  "Progress": "Edenemine",
+  "Progress Bar": "Edenemisriba ",
+  "progress bar timing: currentTime={1} duration={2}": "{1} / {2}",
+  "Fullscreen": "Täisekraan",
+  "Exit Fullscreen": "Välju täisekraanist",
+  "Mute": "Vaigista",
+  "Unmute": "Lõpeta vaigistus",
+  "Playback Rate": "Taasesituse kiirus",
+  "Subtitles": "Subtiitrid",
+  "subtitles off": "subtiitrid väljas",
+  "Captions": "Pealdised",
+  "captions off": "pealdised väljas",
+  "Chapters": "Peatükid",
+  "Descriptions": "Kirjeldused",
+  "descriptions off": "kirjeldused väljas",
+  "Audio Track": "Helirada",
+  "Volume Level": "Helitugevuse tase",
+  "You aborted the media playback": "Katkestasid taasesituse",
+  "A network error caused the media download to fail part-way.": "Võrguvea tõttu nurjus meediumifaili allalaadimine poole pealt.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Seda meediumifaili ei õnnestunud laadida, kuna serveris või võrgus esines tõrge või kuna vormingut ei toetata.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Meediumifaili taasesitamine katkestati, kuna fail on rikutud või see kasutab funktsiooni, mida sinu brauser ei toeta.",
+  "No compatible source was found for this media.": "Ei leitud selle meediumifailiga ühilduvat allikat.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "See meediumifail on krüpteeritud ja meil pole dekrüpteerimiseks vajalikku võtit.",
+  "Play Video": "Esita video",
+  "Close": "Sule",
+  "Close Modal Dialog": "Sule modaaldialoog",
+  "Modal Window": "Modaalaken",
+  "This is a modal window": "See on modaalaken",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Saad selle modaalelemendi sulgeda, vajutades paoklahvi või tehes sulgemisnupu aktiivseks.",
+  ", opens captions settings dialog": ", avab pealdiste sätete dialoogi",
+  ", opens subtitles settings dialog": ", avab subtiitrite sätete dialoogi",
+  ", opens descriptions settings dialog": ", avab kirjelduste sätete dialoogi",
+  ", selected": ", valitud",
+  "captions settings": "pealdiste sätted",
+  "subtitles settings": "subtiitrite sätted",
+  "descriptions settings": "kirjelduste sätted",
+  "Text": "Tekst",
+  "White": "Valge",
+  "Black": "Must",
+  "Red": "Punane",
+  "Green": "Roheline",
+  "Blue": "Sinine",
+  "Yellow": "Kollane",
+  "Magenta": "Magneta",
+  "Cyan": "Tsüaan",
+  "Background": "Taust",
+  "Window": "Aken",
+  "Transparent": "Läbipaistev",
+  "Semi-Transparent": "Poolläbipaistev",
+  "Opaque": "Läbipaistmatu",
+  "Font Size": "Fondi suurus",
+  "Text Edge Style": "Tekstiserva stiil",
+  "None": "Puudub",
+  "Raised": "Kõrgem",
+  "Depressed": "Madalam",
+  "Uniform": "Ühtlane",
+  "Drop shadow": "Langeva varjuga",
+  "Font Family": "Fondipere",
+  "Proportional Sans-Serif": "Seriifideta proportsionaalkiri",
+  "Monospace Sans-Serif": "Seriifideta püsisammkiri",
+  "Proportional Serif": "Seriifidega proportsionaalkiri",
+  "Monospace Serif": "Seriifidega püsisammkiri",
+  "Casual": "Sidumata kiri",
+  "Script": "Käsikirjaline kiri",
+  "Small Caps": "Kapiteelkiri",
+  "Reset": "Lähtesta",
+  "restore all settings to the default values": "taasta kõigi sätete vaikeväärtused",
+  "Done": "Valmis",
+  "Caption Settings Dialog": "Pealdiste sätete dialoog",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Dialoogiakna algus. Paoklahv loobub aknast ja suleb selle.",
+  "End of dialog window.": "Dialoogiakna lõpp.",
+  "{1} is loading.": "{1} laadimisel.",
+  "Exit Picture-in-Picture": "Välju funktsioonist pilt pildis",
+  "Picture-in-Picture": "Pilt pildis"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/et.json b/priv/static/video.js/lang/et.json
new file mode 100644
index 0000000..1554589
--- /dev/null
+++ b/priv/static/video.js/lang/et.json
@@ -0,0 +1,89 @@
+{
+  "Audio Player": "Heliesitaja",
+  "Video Player": "Videoesitaja",
+  "Play": "Esita",
+  "Pause": "Paus",
+  "Replay": "Esita uuesti",
+  "Current Time": "Praegune aeg",
+  "Duration": "Kestus",
+  "Remaining Time": "Järelejäänud aeg",
+  "Stream Type": "Voo tüüp",
+  "LIVE": "OTSE",
+  "Seek to live, currently behind live": "Mine üle otseedastusle, praegu reaalajast taga",
+  "Seek to live, currently playing live": "Mine üle otseedastusle, praegu reaalajas ",
+  "Loaded": "Laaditud",
+  "Progress": "Edenemine",
+  "Progress Bar": "Edenemisriba ",
+  "progress bar timing: currentTime={1} duration={2}": "{1} / {2}",
+  "Fullscreen": "Täisekraan",
+  "Exit Fullscreen": "Välju täisekraanist",
+  "Mute": "Vaigista",
+  "Unmute": "Lõpeta vaigistus",
+  "Playback Rate": "Taasesituse kiirus",
+  "Subtitles": "Subtiitrid",
+  "subtitles off": "subtiitrid väljas",
+  "Captions": "Pealdised",
+  "captions off": "pealdised väljas",
+  "Chapters": "Peatükid",
+  "Descriptions": "Kirjeldused",
+  "descriptions off": "kirjeldused väljas",
+  "Audio Track": "Helirada",
+  "Volume Level": "Helitugevuse tase",
+  "You aborted the media playback": "Katkestasid taasesituse",
+  "A network error caused the media download to fail part-way.": "Võrguvea tõttu nurjus meediumifaili allalaadimine poole pealt.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Seda meediumifaili ei õnnestunud laadida, kuna serveris või võrgus esines tõrge või kuna vormingut ei toetata.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Meediumifaili taasesitamine katkestati, kuna fail on rikutud või see kasutab funktsiooni, mida sinu brauser ei toeta.",
+  "No compatible source was found for this media.": "Ei leitud selle meediumifailiga ühilduvat allikat.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "See meediumifail on krüpteeritud ja meil pole dekrüpteerimiseks vajalikku võtit.",
+  "Play Video": "Esita video",
+  "Close": "Sule",
+  "Close Modal Dialog": "Sule modaaldialoog",
+  "Modal Window": "Modaalaken",
+  "This is a modal window": "See on modaalaken",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Saad selle modaalelemendi sulgeda, vajutades paoklahvi või tehes sulgemisnupu aktiivseks.",
+  ", opens captions settings dialog": ", avab pealdiste sätete dialoogi",
+  ", opens subtitles settings dialog": ", avab subtiitrite sätete dialoogi",
+  ", opens descriptions settings dialog": ", avab kirjelduste sätete dialoogi",
+  ", selected": ", valitud",
+  "captions settings": "pealdiste sätted",
+  "subtitles settings": "subtiitrite sätted",
+  "descriptions settings": "kirjelduste sätted",
+  "Text": "Tekst",
+  "White": "Valge",
+  "Black": "Must",
+  "Red": "Punane",
+  "Green": "Roheline",
+  "Blue": "Sinine",
+  "Yellow": "Kollane",
+  "Magenta": "Magneta",
+  "Cyan": "Tsüaan",
+  "Background": "Taust",
+  "Window": "Aken",
+  "Transparent": "Läbipaistev",
+  "Semi-Transparent": "Poolläbipaistev",
+  "Opaque": "Läbipaistmatu",
+  "Font Size": "Fondi suurus",
+  "Text Edge Style": "Tekstiserva stiil",
+  "None": "Puudub",
+  "Raised": "Kõrgem",
+  "Depressed": "Madalam",
+  "Uniform": "Ühtlane",
+  "Drop shadow": "Langeva varjuga",
+  "Font Family": "Fondipere",
+  "Proportional Sans-Serif": "Seriifideta proportsionaalkiri",
+  "Monospace Sans-Serif": "Seriifideta püsisammkiri",
+  "Proportional Serif": "Seriifidega proportsionaalkiri",
+  "Monospace Serif": "Seriifidega püsisammkiri",
+  "Casual": "Sidumata kiri",
+  "Script": "Käsikirjaline kiri",
+  "Small Caps": "Kapiteelkiri",
+  "Reset": "Lähtesta",
+  "restore all settings to the default values": "taasta kõigi sätete vaikeväärtused",
+  "Done": "Valmis",
+  "Caption Settings Dialog": "Pealdiste sätete dialoog",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Dialoogiakna algus. Paoklahv loobub aknast ja suleb selle.",
+  "End of dialog window.": "Dialoogiakna lõpp.",
+  "{1} is loading.": "{1} laadimisel.",
+  "Exit Picture-in-Picture": "Välju funktsioonist pilt pildis",
+  "Picture-in-Picture": "Pilt pildis"
+}
diff --git a/priv/static/video.js/lang/eu.js b/priv/static/video.js/lang/eu.js
new file mode 100644
index 0000000..2f08b5c
--- /dev/null
+++ b/priv/static/video.js/lang/eu.js
@@ -0,0 +1,89 @@
+videojs.addLanguage('eu', {
+  "Audio Player": "Audio jogailua",
+  "Video Player": "Bideo jogailua",
+  "Play": "Hasi",
+  "Pause": "Gelditu",
+  "Replay": "Berriz hasi",
+  "Current Time": "Uneko denbora",
+  "Duration": "Iraupena",
+  "Remaining Time": "Gelditzen den denbora",
+  "Stream Type": "Jario mota",
+  "LIVE": "ZUZENEAN",
+  "Seek to live, currently behind live": "Zuzenekora joan, orain zuzenekoaren atzetik",
+  "Seek to live, currently playing live": "Zuzenekora joan, orain zuzenean ari da",
+  "Loaded": "Kargatuta",
+  "Progress": "Aurrerapena",
+  "Progress Bar": "Aurrerapen barra",
+  "progress bar timing: currentTime={1} duration={2}": "{1} / {2}",
+  "Fullscreen": "Pantaila osoa",
+  "Exit Fullscreen": "Irten pantaila osotik",
+  "Mute": "Ixildu",
+  "Unmute": "Soinua jarri",
+  "Playback Rate": "Abiadura",
+  "Subtitles": "Azpitituluak",
+  "subtitles off": "azpitituluak kenduta",
+  "Captions": "Oharrak",
+  "captions off": "oharrak kenduta",
+  "Chapters": "Kapituluak",
+  "Descriptions": "Deskribapenak",
+  "descriptions off": "deskribapenak kenduta",
+  "Audio Track": "Audio pista",
+  "Volume Level": "Bolumen maila",
+  "You aborted the media playback": "Bertan behera utzi duzu",
+  "A network error caused the media download to fail part-way.": "Sare errore batek deskargak huts egitea eragin du.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Media ezin izan da kargatu, zerbitzariak edo sareak huts egin duelako edo formatu horretako media erabili ezin delako.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Bertan behera gelditu da fitxategia ondo ez dagoelako edo zure nabigatzailean erabili ezin diren ezaugarriak dituelako.",
+  "No compatible source was found for this media.": "Ez dago media honentzako iturburu bateragarririk.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Media zifratuta dago eta ez ditugu beharrezko gakoak.",
+  "Play Video": "Bideoa hasi",
+  "Close": "Itxi",
+  "Close Modal Dialog": "Leihoa itxi",
+  "Modal Window": "Leihoa",
+  "This is a modal window": "Hau leiho modal bat da",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Leiho modal hau zure teklatuko Escape tekla sakatuz edo ixteko botoia sakatuz itxi daiteke.",
+  ", opens captions settings dialog": ", oharren ezarpenen leihoa irekitzen du",
+  ", opens subtitles settings dialog": ", azpitituluen ezarpenen leihoa irekitzen du",
+  ", opens descriptions settings dialog": ", deskribapenen ezarpenen leihoa irekitzen du",
+  ", selected": ", aukeratuta",
+  "captions settings": "oharren ezarpenak",
+  "subtitles settings": "azpitituluen ezarpenak",
+  "descriptions settings": "deskribapenen ezarpenak",
+  "Text": "Testua",
+  "White": "Zuria",
+  "Black": "Beltza",
+  "Red": "Gorria",
+  "Green": "Berdea",
+  "Blue": "Urdina",
+  "Yellow": "Horia",
+  "Magenta": "Magenta",
+  "Cyan": "Cyan (urdina)",
+  "Background": "Atzeko planoa",
+  "Window": "Leihoa",
+  "Transparent": "Gardena",
+  "Semi-Transparent": "Erdi-gardena",
+  "Opaque": "Opaku",
+  "Font Size": "Letra-tamaina",
+  "Text Edge Style": "Tesuaren etzen estiloa",
+  "None": "Bat ere ez",
+  "Raised": "Jasoa",
+  "Depressed": "Hondoratua",
+  "Uniform": "Uniformea",
+  "Drop shadow": "Itzalduna",
+  "Font Family": "Letra-tipoa",
+  "Proportional Sans-Serif": "Sans-Serif proportzionala",
+  "Monospace Sans-Serif": "Tarte berdineko Sans-Serif",
+  "Proportional Serif": "Serif proporzionala",
+  "Monospace Serif": "Tarte berdineko Serif",
+  "Casual": "Informala",
+  "Script": "Eskuz idatzitakoa",
+  "Small Caps": "letra xeheak",
+  "Reset": "Berrezarri",
+  "restore all settings to the default values": "berrezarri ezarpen guztiak defektuzko balioetara",
+  "Done": "Eginda",
+  "Caption Settings Dialog": "Oharren ezarpenen leihoa",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Leihoaren hasiera. Escapeta teklak leihoa itxi egingo du.",
+  "End of dialog window.": "Leihoaren amaiera.",
+  "{1} is loading.": "{1} kargatzen ari da.",
+  "Exit Picture-in-Picture": "Irten irudiz-irudiztik",
+  "Picture-in-Picture": "Irudiz-irudi"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/eu.json b/priv/static/video.js/lang/eu.json
new file mode 100644
index 0000000..d9fc5d9
--- /dev/null
+++ b/priv/static/video.js/lang/eu.json
@@ -0,0 +1,89 @@
+{
+  "Audio Player": "Audio jogailua",
+  "Video Player": "Bideo jogailua",
+  "Play": "Hasi",
+  "Pause": "Gelditu",
+  "Replay": "Berriz hasi",
+  "Current Time": "Uneko denbora",
+  "Duration": "Iraupena",
+  "Remaining Time": "Gelditzen den denbora",
+  "Stream Type": "Jario mota",
+  "LIVE": "ZUZENEAN",
+  "Seek to live, currently behind live": "Zuzenekora joan, orain zuzenekoaren atzetik",
+  "Seek to live, currently playing live": "Zuzenekora joan, orain zuzenean ari da",
+  "Loaded": "Kargatuta",
+  "Progress": "Aurrerapena",
+  "Progress Bar": "Aurrerapen barra",
+  "progress bar timing: currentTime={1} duration={2}": "{1} / {2}",
+  "Fullscreen": "Pantaila osoa",
+  "Exit Fullscreen": "Irten pantaila osotik",
+  "Mute": "Ixildu",
+  "Unmute": "Soinua jarri",
+  "Playback Rate": "Abiadura",
+  "Subtitles": "Azpitituluak",
+  "subtitles off": "azpitituluak kenduta",
+  "Captions": "Oharrak",
+  "captions off": "oharrak kenduta",
+  "Chapters": "Kapituluak",
+  "Descriptions": "Deskribapenak",
+  "descriptions off": "deskribapenak kenduta",
+  "Audio Track": "Audio pista",
+  "Volume Level": "Bolumen maila",
+  "You aborted the media playback": "Bertan behera utzi duzu",
+  "A network error caused the media download to fail part-way.": "Sare errore batek deskargak huts egitea eragin du.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Media ezin izan da kargatu, zerbitzariak edo sareak huts egin duelako edo formatu horretako media erabili ezin delako.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Bertan behera gelditu da fitxategia ondo ez dagoelako edo zure nabigatzailean erabili ezin diren ezaugarriak dituelako.",
+  "No compatible source was found for this media.": "Ez dago media honentzako iturburu bateragarririk.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Media zifratuta dago eta ez ditugu beharrezko gakoak.",
+  "Play Video": "Bideoa hasi",
+  "Close": "Itxi",
+  "Close Modal Dialog": "Leihoa itxi",
+  "Modal Window": "Leihoa",
+  "This is a modal window": "Hau leiho modal bat da",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Leiho modal hau zure teklatuko Escape tekla sakatuz edo ixteko botoia sakatuz itxi daiteke.",
+  ", opens captions settings dialog": ", oharren ezarpenen leihoa irekitzen du",
+  ", opens subtitles settings dialog": ", azpitituluen ezarpenen leihoa irekitzen du",
+  ", opens descriptions settings dialog": ", deskribapenen ezarpenen leihoa irekitzen du",
+  ", selected": ", aukeratuta",
+  "captions settings": "oharren ezarpenak",
+  "subtitles settings": "azpitituluen ezarpenak",
+  "descriptions settings": "deskribapenen ezarpenak",
+  "Text": "Testua",
+  "White": "Zuria",
+  "Black": "Beltza",
+  "Red": "Gorria",
+  "Green": "Berdea",
+  "Blue": "Urdina",
+  "Yellow": "Horia",
+  "Magenta": "Magenta",
+  "Cyan": "Cyan (urdina)",
+  "Background": "Atzeko planoa",
+  "Window": "Leihoa",
+  "Transparent": "Gardena",
+  "Semi-Transparent": "Erdi-gardena",
+  "Opaque": "Opaku",
+  "Font Size": "Letra-tamaina",
+  "Text Edge Style": "Tesuaren etzen estiloa",
+  "None": "Bat ere ez",
+  "Raised": "Jasoa",
+  "Depressed": "Hondoratua",
+  "Uniform": "Uniformea",
+  "Drop shadow": "Itzalduna",
+  "Font Family": "Letra-tipoa",
+  "Proportional Sans-Serif": "Sans-Serif proportzionala",
+  "Monospace Sans-Serif": "Tarte berdineko Sans-Serif",
+  "Proportional Serif": "Serif proporzionala",
+  "Monospace Serif": "Tarte berdineko Serif",
+  "Casual": "Informala",
+  "Script": "Eskuz idatzitakoa",
+  "Small Caps": "letra xeheak",
+  "Reset": "Berrezarri",
+  "restore all settings to the default values": "berrezarri ezarpen guztiak defektuzko balioetara",
+  "Done": "Eginda",
+  "Caption Settings Dialog": "Oharren ezarpenen leihoa",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Leihoaren hasiera. Escapeta teklak leihoa itxi egingo du.",
+  "End of dialog window.": "Leihoaren amaiera.",
+  "{1} is loading.": "{1} kargatzen ari da.",
+  "Exit Picture-in-Picture": "Irten irudiz-irudiztik",
+  "Picture-in-Picture": "Irudiz-irudi"
+}
diff --git a/priv/static/video.js/lang/fa.js b/priv/static/video.js/lang/fa.js
new file mode 100644
index 0000000..00225f9
--- /dev/null
+++ b/priv/static/video.js/lang/fa.js
@@ -0,0 +1,97 @@
+videojs.addLanguage('fa', {
+  "Audio Player": "پخش‌کنندهٔ صوت",
+  "Video Player": "پخش‌کنندهٔ ویدیو",
+  "Play": "پخش",
+  "Pause": "توقف",
+  "Replay": "پخش مجدد",
+  "Current Time": "زمان فعلی",
+  "Duration": "مدت",
+  "Remaining Time": "زمان باقی‌مانده",
+  "Stream Type": "نوع استریم",
+  "LIVE": "زنده",
+  "Seek to live, currently behind live": "پخش زنده، هم‌اکنون عقب‌تر از پخش زنده",
+  "Seek to live, currently playing live": "پخش زنده، در حال پخش زنده",
+  "Loaded": "بارگیری‌شده",
+  "Progress": "پیشرفت",
+  "Progress Bar": "نوار پیشرفت",
+  "progress bar timing: currentTime={1} duration={2}": "{1} از {2}",
+  "Fullscreen": "تمام‌صفحه",
+  "Exit Fullscreen": "غیر تمام‌صفحه",
+  "Mute": "بی‌صدا",
+  "Unmute": "صدادار",
+  "Playback Rate": "سرعت پخش",
+  "Subtitles": "زیرنویس‌ها",
+  "subtitles off": "بدون زیرنویس",
+  "Captions": "توضیحات",
+  "captions off": "بدون توضیحات",
+  "Chapters": "بخش‌ها",
+  "Descriptions": "توصیفات",
+  "descriptions off": "بدون توصیفات",
+  "Audio Track": "ترَک صوتی",
+  "Volume Level": "سطح صدا",
+  "You aborted the media playback": "شما پخش رسانه را قطع نمودید",
+  "A network error caused the media download to fail part-way.": "وقوع مشکلی در شبکه باعث اختلال در دانلود رسانه شد.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "رسانه قابل بارگیری نیست. ممکن است مشکلی در شبکه یا سرور رخ داده باشد یا قالب رسانه در دستگاه شما پشتیبانی نشود.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "پخش  رسانه به‌علت اشکال در آن یا عدم پشتیبانی مرورگر شما قطع شد.",
+  "No compatible source was found for this media.": "هیچ منبع سازگاری برای پخش این رسانه پیدا نشد.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "این رسانه رمزنگاری شده‌است و کلیدهای رمزگشایی آن موجود نیست.",
+  "Play Video": "پخش ویدیو",
+  "Close": "بستن",
+  "Close Modal Dialog": "بستن پنجره",
+  "Modal Window": "پنجرهٔ محاوره",
+  "This is a modal window": "این پنجره قابل بستن است",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "این پنجره با کلید Escape یا دکمهٔ بستن قابل بسته‌شدن است.",
+  ", opens captions settings dialog": "، تنظیمات توضیجات را باز می‌کند",
+  ", opens subtitles settings dialog": "، تنظیمات زیرنویس را باز می‌کند",
+  ", opens descriptions settings dialog": "، تنظیمات توصیفات را باز می‌کند",
+  ", selected": "، انتخاب شد",
+  "captions settings": "تنظیمات توضیحات",
+  "subtitles settings": "تنظیمات زیرنویس",
+  "descriptions settings": "تنظیمات توصیفات",
+  "Text": "متن",
+  "White": "سفید",
+  "Black": "سیاه",
+  "Red": "قرمز",
+  "Green": "سبز",
+  "Blue": "آبی",
+  "Yellow": "زرد",
+  "Magenta": "ارغوانی",
+  "Cyan": "فیروزه‌ای",
+  "Background": "پس‌زمینه",
+  "Window": "پنجره",
+  "Transparent": "شفاف",
+  "Semi-Transparent": "نیمه‌شفاف",
+  "Opaque": "مات",
+  "Font Size": "اندازهٔ قلم",
+  "Text Edge Style": "سبک لبهٔ متن",
+  "None": "هیچ",
+  "Raised": "برجسته",
+  "Depressed": "فرورفته",
+  "Uniform": "یکنواخت",
+  "Drop shadow": "سایه‌دار",
+  "Font Family": "نوع قلم",
+  "Proportional Sans-Serif": "Sans-Serif متناسب",
+  "Monospace Sans-Serif": "Sans-Serif هم‌عرض",
+  "Proportional Serif": "Serif متناسب",
+  "Monospace Serif": "Serif هم‌عرض",
+  "Casual": "فانتزی",
+  "Script": "دست‌خط",
+  "Small Caps": "حروف بزرگ کوچک",
+  "Reset": "تنظیم مجدد",
+  "restore all settings to the default values": "بازنشانی همهٔ تنظیمات به مقادیر پیش‌فرض",
+  "Done": "انجام",
+  "Caption Settings Dialog": "پنجرهٔ تنظیمات توضیحات",
+  "Beginning of dialog window. Escape will cancel and close the window.": "شروع پنجرهٔ محاوره‌ای. دکمهٔ Escape عملیات را لغو کرده و پنجره را می‌بندد.",
+  "End of dialog window.": "پایان پنجرهٔ محاوره‌ای.",
+  "{1} is loading.": "{1} در حال بارگیری است.",
+  "Exit Picture-in-Picture": "خروج از حالت تصویر در تصویر",
+  "Picture-in-Picture": "تصویر در تصویر",
+  "Skip forward {1} seconds": "{1} ثانیه بعد",
+  "Skip backward {1} seconds": "{1} ثانیه قبل",
+  "No content": "بدون محتوا",
+  "Color": "رنگ",
+  "Opacity": "شفافیت",
+  "Text Background": "رنگ پس زمینه",
+  "Caption Area Background": "رنگ پس زمینه عنوان",
+  "Playing in Picture-in-Picture": "پخش در حالت تصویر در تصویر"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/fa.json b/priv/static/video.js/lang/fa.json
new file mode 100644
index 0000000..b7f4d66
--- /dev/null
+++ b/priv/static/video.js/lang/fa.json
@@ -0,0 +1,97 @@
+{
+  "Audio Player": "پخش‌کنندهٔ صوت",
+  "Video Player": "پخش‌کنندهٔ ویدیو",
+  "Play": "پخش",
+  "Pause": "توقف",
+  "Replay": "پخش مجدد",
+  "Current Time": "زمان فعلی",
+  "Duration": "مدت",
+  "Remaining Time": "زمان باقی‌مانده",
+  "Stream Type": "نوع استریم",
+  "LIVE": "زنده",
+  "Seek to live, currently behind live": "پخش زنده، هم‌اکنون عقب‌تر از پخش زنده",
+  "Seek to live, currently playing live": "پخش زنده، در حال پخش زنده",
+  "Loaded": "بارگیری‌شده",
+  "Progress": "پیشرفت",
+  "Progress Bar": "نوار پیشرفت",
+  "progress bar timing: currentTime={1} duration={2}": "{1} از {2}",
+  "Fullscreen": "تمام‌صفحه",
+  "Exit Fullscreen": "غیر تمام‌صفحه",
+  "Mute": "بی‌صدا",
+  "Unmute": "صدادار",
+  "Playback Rate": "سرعت پخش",
+  "Subtitles": "زیرنویس‌ها",
+  "subtitles off": "بدون زیرنویس",
+  "Captions": "توضیحات",
+  "captions off": "بدون توضیحات",
+  "Chapters": "بخش‌ها",
+  "Descriptions": "توصیفات",
+  "descriptions off": "بدون توصیفات",
+  "Audio Track": "ترَک صوتی",
+  "Volume Level": "سطح صدا",
+  "You aborted the media playback": "شما پخش رسانه را قطع نمودید",
+  "A network error caused the media download to fail part-way.": "وقوع مشکلی در شبکه باعث اختلال در دانلود رسانه شد.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "رسانه قابل بارگیری نیست. ممکن است مشکلی در شبکه یا سرور رخ داده باشد یا قالب رسانه در دستگاه شما پشتیبانی نشود.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "پخش  رسانه به‌علت اشکال در آن یا عدم پشتیبانی مرورگر شما قطع شد.",
+  "No compatible source was found for this media.": "هیچ منبع سازگاری برای پخش این رسانه پیدا نشد.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "این رسانه رمزنگاری شده‌است و کلیدهای رمزگشایی آن موجود نیست.",
+  "Play Video": "پخش ویدیو",
+  "Close": "بستن",
+  "Close Modal Dialog": "بستن پنجره",
+  "Modal Window": "پنجرهٔ محاوره",
+  "This is a modal window": "این پنجره قابل بستن است",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "این پنجره با کلید Escape یا دکمهٔ بستن قابل بسته‌شدن است.",
+  ", opens captions settings dialog": "، تنظیمات توضیجات را باز می‌کند",
+  ", opens subtitles settings dialog": "، تنظیمات زیرنویس را باز می‌کند",
+  ", opens descriptions settings dialog": "، تنظیمات توصیفات را باز می‌کند",
+  ", selected": "، انتخاب شد",
+  "captions settings": "تنظیمات توضیحات",
+  "subtitles settings": "تنظیمات زیرنویس",
+  "descriptions settings": "تنظیمات توصیفات",
+  "Text": "متن",
+  "White": "سفید",
+  "Black": "سیاه",
+  "Red": "قرمز",
+  "Green": "سبز",
+  "Blue": "آبی",
+  "Yellow": "زرد",
+  "Magenta": "ارغوانی",
+  "Cyan": "فیروزه‌ای",
+  "Background": "پس‌زمینه",
+  "Window": "پنجره",
+  "Transparent": "شفاف",
+  "Semi-Transparent": "نیمه‌شفاف",
+  "Opaque": "مات",
+  "Font Size": "اندازهٔ قلم",
+  "Text Edge Style": "سبک لبهٔ متن",
+  "None": "هیچ",
+  "Raised": "برجسته",
+  "Depressed": "فرورفته",
+  "Uniform": "یکنواخت",
+  "Drop shadow": "سایه‌دار",
+  "Font Family": "نوع قلم",
+  "Proportional Sans-Serif": "Sans-Serif متناسب",
+  "Monospace Sans-Serif": "Sans-Serif هم‌عرض",
+  "Proportional Serif": "Serif متناسب",
+  "Monospace Serif": "Serif هم‌عرض",
+  "Casual": "فانتزی",
+  "Script": "دست‌خط",
+  "Small Caps": "حروف بزرگ کوچک",
+  "Reset": "تنظیم مجدد",
+  "restore all settings to the default values": "بازنشانی همهٔ تنظیمات به مقادیر پیش‌فرض",
+  "Done": "انجام",
+  "Caption Settings Dialog": "پنجرهٔ تنظیمات توضیحات",
+  "Beginning of dialog window. Escape will cancel and close the window.": "شروع پنجرهٔ محاوره‌ای. دکمهٔ Escape عملیات را لغو کرده و پنجره را می‌بندد.",
+  "End of dialog window.": "پایان پنجرهٔ محاوره‌ای.",
+  "{1} is loading.": "{1} در حال بارگیری است.",
+  "Exit Picture-in-Picture": "خروج از حالت تصویر در تصویر",
+  "Picture-in-Picture": "تصویر در تصویر",
+  "Skip forward {1} seconds": "{1} ثانیه بعد",
+  "Skip backward {1} seconds": "{1} ثانیه قبل",
+  "No content": "بدون محتوا",
+  "Color": "رنگ",
+  "Opacity": "شفافیت",
+  "Text Background": "رنگ پس زمینه",
+  "Caption Area Background": "رنگ پس زمینه عنوان",
+  "Playing in Picture-in-Picture": "پخش در حالت تصویر در تصویر"
+}
diff --git a/priv/static/video.js/lang/fi.js b/priv/static/video.js/lang/fi.js
new file mode 100644
index 0000000..95549bb
--- /dev/null
+++ b/priv/static/video.js/lang/fi.js
@@ -0,0 +1,26 @@
+videojs.addLanguage('fi', {
+  "Play": "Toisto",
+  "Pause": "Tauko",
+  "Current Time": "Tämänhetkinen aika",
+  "Duration": "Kokonaisaika",
+  "Remaining Time": "Jäljellä oleva aika",
+  "Stream Type": "Lähetystyyppi",
+  "LIVE": "LIVE",
+  "Loaded": "Ladattu",
+  "Progress": "Edistyminen",
+  "Fullscreen": "Koko näyttö",
+  "Exit Fullscreen": "Koko näyttö pois",
+  "Mute": "Ääni pois",
+  "Unmute": "Ääni päällä",
+  "Playback Rate": "Toistonopeus",
+  "Subtitles": "Tekstitys",
+  "subtitles off": "Tekstitys pois",
+  "Captions": "Tekstitys",
+  "captions off": "Tekstitys pois",
+  "Chapters": "Kappaleet",
+  "You aborted the media playback": "Olet keskeyttänyt videotoiston.",
+  "A network error caused the media download to fail part-way.": "Verkkovirhe keskeytti videon latauksen.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Videon lataus ei onnistunut joko palvelin- tai verkkovirheestä tai väärästä formaatista johtuen.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Videon toisto keskeytyi, koska media on vaurioitunut tai käyttää käyttää toimintoja, joita selaimesi ei tue.",
+  "No compatible source was found for this media.": "Tälle videolle ei löytynyt yhteensopivaa lähdettä."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/fi.json b/priv/static/video.js/lang/fi.json
new file mode 100644
index 0000000..d9bd475
--- /dev/null
+++ b/priv/static/video.js/lang/fi.json
@@ -0,0 +1,26 @@
+{
+  "Play": "Toisto",
+  "Pause": "Tauko",
+  "Current Time": "Tämänhetkinen aika",
+  "Duration": "Kokonaisaika",
+  "Remaining Time": "Jäljellä oleva aika",
+  "Stream Type": "Lähetystyyppi",
+  "LIVE": "LIVE",
+  "Loaded": "Ladattu",
+  "Progress": "Edistyminen",
+  "Fullscreen": "Koko näyttö",
+  "Exit Fullscreen": "Koko näyttö pois",
+  "Mute": "Ääni pois",
+  "Unmute": "Ääni päällä",
+  "Playback Rate": "Toistonopeus",
+  "Subtitles": "Tekstitys",
+  "subtitles off": "Tekstitys pois",
+  "Captions": "Tekstitys",
+  "captions off": "Tekstitys pois",
+  "Chapters": "Kappaleet",
+  "You aborted the media playback": "Olet keskeyttänyt videotoiston.",
+  "A network error caused the media download to fail part-way.": "Verkkovirhe keskeytti videon latauksen.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Videon lataus ei onnistunut joko palvelin- tai verkkovirheestä tai väärästä formaatista johtuen.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Videon toisto keskeytyi, koska media on vaurioitunut tai käyttää käyttää toimintoja, joita selaimesi ei tue.",
+  "No compatible source was found for this media.": "Tälle videolle ei löytynyt yhteensopivaa lähdettä."
+}
diff --git a/priv/static/video.js/lang/fr.js b/priv/static/video.js/lang/fr.js
new file mode 100644
index 0000000..b254399
--- /dev/null
+++ b/priv/static/video.js/lang/fr.js
@@ -0,0 +1,96 @@
+videojs.addLanguage('fr', {
+  "Audio Player": "Lecteur audio",
+  "Video Player": "Lecteur vidéo",
+  "Play": "Lecture",
+  "Pause": "Pause",
+  "Replay": "Revoir",
+  "Current Time": "Temps actuel",
+  "Duration": "Durée",
+  "Remaining Time": "Temps restant",
+  "Stream Type": "Type de flux",
+  "LIVE": "EN DIRECT",
+  "Seek to live, currently behind live": "Rechercher le direct, actuellement après le direct",
+  "Seek to live, currently playing live": "Rechercher le direct, le direct actuellement en cours de lecture",
+  "Loaded": "Chargé",
+  "Progress": "Progression",
+  "Progress Bar": "Barre de progression",
+  "progress bar timing: currentTime={1} duration={2}": "{1} de {2}",
+  "Fullscreen": "Plein écran",
+  "Exit Fullscreen": "Fenêtré",
+  "Mute": "Mettre en sourdine",
+  "Unmute": "Activer le son",
+  "Playback Rate": "Vitesse de lecture",
+  "Subtitles": "Sous-titres",
+  "subtitles off": "Sous-titres désactivés",
+  "Captions": "Sous-titres transcrits",
+  "captions off": "Sous-titres transcrits désactivés",
+  "Chapters": "Chapitres",
+  "Descriptions": "Descriptions",
+  "descriptions off": "descriptions désactivées",
+  "Audio Track": "Piste audio",
+  "Volume Level": "Niveau de volume",
+  "You aborted the media playback": "Vous avez interrompu la lecture de la vidéo.",
+  "A network error caused the media download to fail part-way.": "Une erreur de réseau a interrompu le téléchargement de la vidéo.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Cette vidéo n'a pas pu être chargée, soit parce que le serveur ou le réseau a échoué ou parce que le format n'est pas reconnu.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "La lecture de la vidéo a été interrompue à cause d'un problème de corruption ou parce que la vidéo utilise des fonctionnalités non prises en charge par votre navigateur.",
+  "No compatible source was found for this media.": "Aucune source compatible n'a été trouvée pour cette vidéo.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Le média est chiffré et nous n'avons pas les clés pour le déchiffrer.",
+  "Play Video": "Lire la vidéo",
+  "Close": "Fermer",
+  "Close Modal Dialog": "Fermer la boîte de dialogue modale",
+  "Modal Window": "Fenêtre modale",
+  "This is a modal window": "Ceci est une fenêtre modale",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Ce modal peut être fermé en appuyant sur la touche Échap ou activer le bouton de fermeture.",
+  ", opens captions settings dialog": ", ouvrir les paramètres des sous-titres transcrits",
+  ", opens subtitles settings dialog": ", ouvrir les paramètres des sous-titres",
+  ", opens descriptions settings dialog": ", ouvrir les paramètres des descriptions",
+  ", selected": ", sélectionné",
+  "captions settings": "Paramètres des sous-titres transcrits",
+  "subtitles settings": "Paramètres des sous-titres",
+  "descriptions settings": "Paramètres des descriptions",
+  "Text": "Texte",
+  "White": "Blanc",
+  "Black": "Noir",
+  "Red": "Rouge",
+  "Green": "Vert",
+  "Blue": "Bleu",
+  "Yellow": "Jaune",
+  "Magenta": "Magenta",
+  "Cyan": "Cyan",
+  "Background": "Arrière-plan",
+  "Window": "Fenêtre",
+  "Transparent": "Transparent",
+  "Semi-Transparent": "Semi-transparent",
+  "Opaque": "Opaque",
+  "Font Size": "Taille des caractères",
+  "Text Edge Style": "Style des contours du texte",
+  "None": "Aucun",
+  "Raised": "Élevé",
+  "Depressed": "Enfoncé",
+  "Uniform": "Uniforme",
+  "Drop shadow": "Ombre portée",
+  "Font Family": "Famille de polices",
+  "Proportional Sans-Serif": "Polices à chasse variable sans empattement (Proportional Sans-Serif)",
+  "Monospace Sans-Serif": "Polices à chasse fixe sans empattement (Monospace Sans-Serif)",
+  "Proportional Serif": "Polices à chasse variable avec empattement (Proportional Serif)",
+  "Monospace Serif": "Polices à chasse fixe avec empattement (Monospace Serif)",
+  "Casual": "Manuscrite",
+  "Script": "Scripte",
+  "Small Caps": "Petites capitales",
+  "Reset": "Réinitialiser",
+  "restore all settings to the default values": "Restaurer tous les paramètres aux valeurs par défaut",
+  "Done": "Terminé",
+  "Caption Settings Dialog": "Boîte de dialogue des paramètres des sous-titres transcrits",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Début de la fenêtre de dialogue. La touche d'échappement annulera et fermera la fenêtre.",
+  "End of dialog window.": "Fin de la fenêtre de dialogue.",
+  "Exit Picture-in-Picture": "Quitter le mode image dans l'image",
+  "Picture-in-Picture": "Image dans l'image",
+  "{1} is loading.": "{1} en cours de chargement.",
+  "No content": "Aucun contenu",
+  "Color": "Couleur",
+  "Opacity": "Opacité",
+  "Text Background": "Arrière-plan du texte",
+  "Caption Area Background": "Arrière-plan de la zone de sous-titre",
+  "Skip backward {1} seconds": "Reculer de {1} secondes",
+  "Skip forward {1} seconds": "Avancer de {1} secondes"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/fr.json b/priv/static/video.js/lang/fr.json
new file mode 100644
index 0000000..513b64c
--- /dev/null
+++ b/priv/static/video.js/lang/fr.json
@@ -0,0 +1,96 @@
+{
+  "Audio Player": "Lecteur audio",
+  "Video Player": "Lecteur vidéo",
+  "Play": "Lecture",
+  "Pause": "Pause",
+  "Replay": "Revoir",
+  "Current Time": "Temps actuel",
+  "Duration": "Durée",
+  "Remaining Time": "Temps restant",
+  "Stream Type": "Type de flux",
+  "LIVE": "EN DIRECT",
+  "Seek to live, currently behind live": "Rechercher le direct, actuellement après le direct",
+  "Seek to live, currently playing live": "Rechercher le direct, le direct actuellement en cours de lecture",
+  "Loaded": "Chargé",
+  "Progress": "Progression",
+  "Progress Bar": "Barre de progression",
+  "progress bar timing: currentTime={1} duration={2}": "{1} de {2}",
+  "Fullscreen": "Plein écran",
+  "Exit Fullscreen": "Fenêtré",
+  "Mute": "Mettre en sourdine",
+  "Unmute": "Activer le son",
+  "Playback Rate": "Vitesse de lecture",
+  "Subtitles": "Sous-titres",
+  "subtitles off": "Sous-titres désactivés",
+  "Captions": "Sous-titres transcrits",
+  "captions off": "Sous-titres transcrits désactivés",
+  "Chapters": "Chapitres",
+  "Descriptions": "Descriptions",
+  "descriptions off": "descriptions désactivées",
+  "Audio Track": "Piste audio",
+  "Volume Level": "Niveau de volume",
+  "You aborted the media playback": "Vous avez interrompu la lecture de la vidéo.",
+  "A network error caused the media download to fail part-way.": "Une erreur de réseau a interrompu le téléchargement de la vidéo.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Cette vidéo n'a pas pu être chargée, soit parce que le serveur ou le réseau a échoué ou parce que le format n'est pas reconnu.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "La lecture de la vidéo a été interrompue à cause d'un problème de corruption ou parce que la vidéo utilise des fonctionnalités non prises en charge par votre navigateur.",
+  "No compatible source was found for this media.": "Aucune source compatible n'a été trouvée pour cette vidéo.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Le média est chiffré et nous n'avons pas les clés pour le déchiffrer.",
+  "Play Video": "Lire la vidéo",
+  "Close": "Fermer",
+  "Close Modal Dialog": "Fermer la boîte de dialogue modale",
+  "Modal Window": "Fenêtre modale",
+  "This is a modal window": "Ceci est une fenêtre modale",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Ce modal peut être fermé en appuyant sur la touche Échap ou activer le bouton de fermeture.",
+  ", opens captions settings dialog": ", ouvrir les paramètres des sous-titres transcrits",
+  ", opens subtitles settings dialog": ", ouvrir les paramètres des sous-titres",
+  ", opens descriptions settings dialog": ", ouvrir les paramètres des descriptions",
+  ", selected": ", sélectionné",
+  "captions settings": "Paramètres des sous-titres transcrits",
+  "subtitles settings": "Paramètres des sous-titres",
+  "descriptions settings": "Paramètres des descriptions",
+  "Text": "Texte",
+  "White": "Blanc",
+  "Black": "Noir",
+  "Red": "Rouge",
+  "Green": "Vert",
+  "Blue": "Bleu",
+  "Yellow": "Jaune",
+  "Magenta": "Magenta",
+  "Cyan": "Cyan",
+  "Background": "Arrière-plan",
+  "Window": "Fenêtre",
+  "Transparent": "Transparent",
+  "Semi-Transparent": "Semi-transparent",
+  "Opaque": "Opaque",
+  "Font Size": "Taille des caractères",
+  "Text Edge Style": "Style des contours du texte",
+  "None": "Aucun",
+  "Raised": "Élevé",
+  "Depressed": "Enfoncé",
+  "Uniform": "Uniforme",
+  "Drop shadow": "Ombre portée",
+  "Font Family": "Famille de polices",
+  "Proportional Sans-Serif": "Polices à chasse variable sans empattement (Proportional Sans-Serif)",
+  "Monospace Sans-Serif": "Polices à chasse fixe sans empattement (Monospace Sans-Serif)",
+  "Proportional Serif": "Polices à chasse variable avec empattement (Proportional Serif)",
+  "Monospace Serif": "Polices à chasse fixe avec empattement (Monospace Serif)",
+  "Casual": "Manuscrite",
+  "Script": "Scripte",
+  "Small Caps": "Petites capitales",
+  "Reset": "Réinitialiser",
+  "restore all settings to the default values": "Restaurer tous les paramètres aux valeurs par défaut",
+  "Done": "Terminé",
+  "Caption Settings Dialog": "Boîte de dialogue des paramètres des sous-titres transcrits",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Début de la fenêtre de dialogue. La touche d'échappement annulera et fermera la fenêtre.",
+  "End of dialog window.": "Fin de la fenêtre de dialogue.",
+  "Exit Picture-in-Picture": "Quitter le mode image dans l'image",
+  "Picture-in-Picture": "Image dans l'image",
+  "{1} is loading.": "{1} en cours de chargement.",
+  "No content": "Aucun contenu",
+  "Color": "Couleur",
+  "Opacity": "Opacité",
+  "Text Background": "Arrière-plan du texte",
+  "Caption Area Background": "Arrière-plan de la zone de sous-titre",
+  "Skip backward {1} seconds": "Reculer de {1} secondes",
+  "Skip forward {1} seconds": "Avancer de {1} secondes"
+}
diff --git a/priv/static/video.js/lang/gd.js b/priv/static/video.js/lang/gd.js
new file mode 100644
index 0000000..c0b4ca7
--- /dev/null
+++ b/priv/static/video.js/lang/gd.js
@@ -0,0 +1,87 @@
+videojs.addLanguage('gd', {
+  "Audio Player": "Cluicheadair fuaime",
+  "Video Player": "Cluicheadair video",
+  "Play": "Cluich",
+  "Pause": "Cuir ’na stad",
+  "Replay": "Cluich a-rithist",
+  "Current Time": "An ùine làithreach",
+  "Duration": "Faide",
+  "Remaining Time": "An ùine air fhàgail",
+  "Stream Type": "Seòrsa an t-sruthaidh",
+  "LIVE": "BEÒ",
+  "Seek to live, currently behind live": "A’ sireadh sruth beò ’s air dheireadh",
+  "Seek to live, currently playing live": "A’ sireadh sruth beò ’s ‘ga chluich",
+  "Loaded": "Air a luchdadh",
+  "Progress": "Adhartas",
+  "Progress Bar": "Bàr adhartais",
+  "progress bar timing: currentTime={1} duration={2}": "{1} à {2}",
+  "Fullscreen": "Làn-sgrìn",
+  "Exit Fullscreen": "Fàg modh làn-sgrìn",
+  "Mute": "Mùch",
+  "Unmute": "Dì-mhùch",
+  "Playback Rate": "Reat na cluiche",
+  "Subtitles": "Fo-thiotalan",
+  "subtitles off": "fo-thiotalan dheth",
+  "Captions": "Caipseanan",
+  "captions off": "caipseanan dheth",
+  "Chapters": "Caibideil",
+  "Descriptions": "Tuairisgeulan",
+  "descriptions off": "tuairisgeulan dheth",
+  "Audio Track": "Traca fuaime",
+  "Volume Level": "Àirde na fuaime",
+  "You aborted the media playback": "Sguir thu de chluich a’ mheadhain",
+  "A network error caused the media download to fail part-way.": "Cha deach leinn an còrr dhen mheadhan a luchdadh a-nuas ri linn mearachd lìonraidh.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Cha b’ urrainn dhuinn am meadhan a luchdadh – dh’fhaoidte gun do dh’fhàillig leis an fhrithealaiche no an lìonra no nach cuir sinn taic ris an fhòrmat.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Sguir sinn de chluich a’ mheadhain – dh’fhaoidte gu bheil e coirbte no gu bheil gleus aig a’ mheadhan nach cuir am brabhsair taic ris.",
+  "No compatible source was found for this media.": "Cha ceach tùs co-chòrdail a lorg airson a’ mheadhain seo.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Tha am meadhan crioptaichte ’s chan eil iuchair dì-chrioptachaidh againn dha.",
+  "Play Video": "Cluich video",
+  "Close": "Dùin",
+  "Close Modal Dialog": "Dùin an còmhradh",
+  "Modal Window": "Uinneag mòdach",
+  "This is a modal window": "Seo uinneag mòdach",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "’S urrainn dhut seo a dhùnadh leis an iuchair Escape no leis a’ phutan dùnaidh.",
+  ", opens captions settings dialog": ", fosglaidh e còmhradh nan roghainnean",
+  ", opens subtitles settings dialog": ", fosglaidh e còmhradh nam fo-thiotalan",
+  ", opens descriptions settings dialog": ", fosglaidh e còmhradh roghainnean nan tuairisgeulan",
+  ", selected": ", air a thaghadh",
+  "captions settings": "roghainnean nan caipseanan",
+  "subtitles settings": "roghainnean nam fo-thiotalan",
+  "descriptions settings": "roghainnean nan tuairisgeulan",
+  "Text": "Teacsa",
+  "White": "Geal",
+  "Black": "Dubh",
+  "Red": "Dearg",
+  "Green": "Uaine",
+  "Blue": "Gorm",
+  "Yellow": "Buidhe",
+  "Magenta": "Magenta",
+  "Cyan": "Saidhean",
+  "Background": "Cùlaibh",
+  "Window": "Uinneag",
+  "Transparent": "Trìd-shoilleir",
+  "Semi-Transparent": "Leth-thrìd-shoilleir",
+  "Opaque": "Trìd-dhoilleir",
+  "Font Size": "Meud a’ chrutha-chlò",
+  "Text Edge Style": "Stoidhle oir an teacsa",
+  "None": "Chan eil gin",
+  "Raised": "Àrdaichte",
+  "Depressed": "Air a bhrùthadh",
+  "Uniform": "Cunbhalach",
+  "Drop shadow": "Sgàil",
+  "Font Family": "Teaghlach a’ chrutha-chlò",
+  "Proportional Sans-Serif": "Sans-serif co-rèireach",
+  "Monospace Sans-Serif": "Sans-serif aon-leud",
+  "Proportional Serif": "Serif co-rèireach",
+  "Monospace Serif": "Serif aon-leud",
+  "Casual": "Fuasgailte",
+  "Script": "Sgriobt",
+  "Small Caps": "Ceann-litrichean beaga",
+  "Reset": "Ath-shuidhich",
+  "restore all settings to the default values": "till dhan a h-uile bun-roghainn",
+  "Done": "Deiseil",
+  "Caption Settings Dialog": "Còmhradh roghainnean nan caipseanan",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Toiseach uinneag còmhraidh. Sguiridh Escape dheth ’s dùinidh e an uinneag",
+  "End of dialog window.": "Deireadh uinneag còmhraidh.",
+  "{1} is loading.": "Tha {1} ’ga luchdadh."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/gd.json b/priv/static/video.js/lang/gd.json
new file mode 100755
index 0000000..6d06843
--- /dev/null
+++ b/priv/static/video.js/lang/gd.json
@@ -0,0 +1,87 @@
+{
+  "Audio Player": "Cluicheadair fuaime",
+  "Video Player": "Cluicheadair video",
+  "Play": "Cluich",
+  "Pause": "Cuir ’na stad",
+  "Replay": "Cluich a-rithist",
+  "Current Time": "An ùine làithreach",
+  "Duration": "Faide",
+  "Remaining Time": "An ùine air fhàgail",
+  "Stream Type": "Seòrsa an t-sruthaidh",
+  "LIVE": "BEÒ",
+  "Seek to live, currently behind live": "A’ sireadh sruth beò ’s air dheireadh",
+  "Seek to live, currently playing live": "A’ sireadh sruth beò ’s ‘ga chluich",
+  "Loaded": "Air a luchdadh",
+  "Progress": "Adhartas",
+  "Progress Bar": "Bàr adhartais",
+  "progress bar timing: currentTime={1} duration={2}": "{1} à {2}",
+  "Fullscreen": "Làn-sgrìn",
+  "Exit Fullscreen": "Fàg modh làn-sgrìn",
+  "Mute": "Mùch",
+  "Unmute": "Dì-mhùch",
+  "Playback Rate": "Reat na cluiche",
+  "Subtitles": "Fo-thiotalan",
+  "subtitles off": "fo-thiotalan dheth",
+  "Captions": "Caipseanan",
+  "captions off": "caipseanan dheth",
+  "Chapters": "Caibideil",
+  "Descriptions": "Tuairisgeulan",
+  "descriptions off": "tuairisgeulan dheth",
+  "Audio Track": "Traca fuaime",
+  "Volume Level": "Àirde na fuaime",
+  "You aborted the media playback": "Sguir thu de chluich a’ mheadhain",
+  "A network error caused the media download to fail part-way.": "Cha deach leinn an còrr dhen mheadhan a luchdadh a-nuas ri linn mearachd lìonraidh.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Cha b’ urrainn dhuinn am meadhan a luchdadh – dh’fhaoidte gun do dh’fhàillig leis an fhrithealaiche no an lìonra no nach cuir sinn taic ris an fhòrmat.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Sguir sinn de chluich a’ mheadhain – dh’fhaoidte gu bheil e coirbte no gu bheil gleus aig a’ mheadhan nach cuir am brabhsair taic ris.",
+  "No compatible source was found for this media.": "Cha ceach tùs co-chòrdail a lorg airson a’ mheadhain seo.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Tha am meadhan crioptaichte ’s chan eil iuchair dì-chrioptachaidh againn dha.",
+  "Play Video": "Cluich video",
+  "Close": "Dùin",
+  "Close Modal Dialog": "Dùin an còmhradh",
+  "Modal Window": "Uinneag mòdach",
+  "This is a modal window": "Seo uinneag mòdach",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "’S urrainn dhut seo a dhùnadh leis an iuchair Escape no leis a’ phutan dùnaidh.",
+  ", opens captions settings dialog": ", fosglaidh e còmhradh nan roghainnean",
+  ", opens subtitles settings dialog": ", fosglaidh e còmhradh nam fo-thiotalan",
+  ", opens descriptions settings dialog": ", fosglaidh e còmhradh roghainnean nan tuairisgeulan",
+  ", selected": ", air a thaghadh",
+  "captions settings": "roghainnean nan caipseanan",
+  "subtitles settings": "roghainnean nam fo-thiotalan",
+  "descriptions settings": "roghainnean nan tuairisgeulan",
+  "Text": "Teacsa",
+  "White": "Geal",
+  "Black": "Dubh",
+  "Red": "Dearg",
+  "Green": "Uaine",
+  "Blue": "Gorm",
+  "Yellow": "Buidhe",
+  "Magenta": "Magenta",
+  "Cyan": "Saidhean",
+  "Background": "Cùlaibh",
+  "Window": "Uinneag",
+  "Transparent": "Trìd-shoilleir",
+  "Semi-Transparent": "Leth-thrìd-shoilleir",
+  "Opaque": "Trìd-dhoilleir",
+  "Font Size": "Meud a’ chrutha-chlò",
+  "Text Edge Style": "Stoidhle oir an teacsa",
+  "None": "Chan eil gin",
+  "Raised": "Àrdaichte",
+  "Depressed": "Air a bhrùthadh",
+  "Uniform": "Cunbhalach",
+  "Drop shadow": "Sgàil",
+  "Font Family": "Teaghlach a’ chrutha-chlò",
+  "Proportional Sans-Serif": "Sans-serif co-rèireach",
+  "Monospace Sans-Serif": "Sans-serif aon-leud",
+  "Proportional Serif": "Serif co-rèireach",
+  "Monospace Serif": "Serif aon-leud",
+  "Casual": "Fuasgailte",
+  "Script": "Sgriobt",
+  "Small Caps": "Ceann-litrichean beaga",
+  "Reset": "Ath-shuidhich",
+  "restore all settings to the default values": "till dhan a h-uile bun-roghainn",
+  "Done": "Deiseil",
+  "Caption Settings Dialog": "Còmhradh roghainnean nan caipseanan",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Toiseach uinneag còmhraidh. Sguiridh Escape dheth ’s dùinidh e an uinneag",
+  "End of dialog window.": "Deireadh uinneag còmhraidh.",
+  "{1} is loading.": "Tha {1} ’ga luchdadh."
+}
diff --git a/priv/static/video.js/lang/gl.js b/priv/static/video.js/lang/gl.js
new file mode 100644
index 0000000..afe2cd8
--- /dev/null
+++ b/priv/static/video.js/lang/gl.js
@@ -0,0 +1,87 @@
+videojs.addLanguage('gl', {
+  "Audio Player": "Reprodutor de son",
+  "Video Player": "Reprodutor de vídeo",
+  "Play": "Reproducir",
+  "Pause": "Pausa",
+  "Replay": "Repetir",
+  "Current Time": "Tempo reproducido",
+  "Duration": "Duración",
+  "Remaining Time": "Tempo restante",
+  "Stream Type": "Tipo de fluxo",
+  "LIVE": "EN DIRECTO",
+  "Seek to live, currently behind live": "Buscando directo, actualmente tras en directo",
+  "Seek to live, currently playing live": "Buscando directo, actualmente reproducindo en directo",
+  "Loaded": "Cargado",
+  "Progress": "Progresión",
+  "Progress Bar": "Barra de progreso",
+  "progress bar timing: currentTime={1} duration={2}": "{1} de {2}",
+  "Fullscreen": "Pantalla completa",
+  "Exit Fullscreen": "Xanela",
+  "Mute": "Silenciar",
+  "Unmute": "Son activado",
+  "Playback Rate": "Velocidade de reprodución",
+  "Subtitles": "Subtítulos",
+  "subtitles off": "subtítulos desactivados",
+  "Captions": "Subtítulos para xordos",
+  "captions off": "subtítulos para xordos desactivados",
+  "Chapters": "Capítulos",
+  "Descriptions": "Descricións",
+  "descriptions off": "descricións desactivadas",
+  "Audio Track": "Pista de son",
+  "Volume Level": "Nivel do volume",
+  "You aborted the media playback": "Vostede interrompeu a reprodución do medio.",
+  "A network error caused the media download to fail part-way.": "Un erro de rede interrompeu a descarga do medio.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Non foi posíbel cargar o medio por mor dun fallo de rede ou do servidor ou porque o formato non é compatíbel.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Interrompeuse a reprodución do medio por mor dun problema de estragamento dos datos ou porque o medio precisa funcións que o seu navegador non ofrece.",
+  "No compatible source was found for this media.": "Non se atopou ningunha orixe compatíbel con este vídeo.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "O medio está cifrado e non temos as chaves para descifralo .",
+  "Play Video": "Reproducir vídeo",
+  "Close": "Pechar",
+  "Close Modal Dialog": "Pechar a caixa de diálogo modal",
+  "Modal Window": "Xanela modal",
+  "This is a modal window": "Esta é unha xanela modal",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Este diálogo modal pódese pechar premendo a tecla Escape ou activando o botón de pechar.",
+  ", opens captions settings dialog": ", abre o diálogo de axustes dos subtítulos para xordos",
+  ", opens subtitles settings dialog": ", abre o diálogo de axustes dos subtítulos",
+  ", opens descriptions settings dialog": ", abre o diálogo de axustes das descricións",
+  ", selected": ", séleccionado",
+  "captions settings": "axustes dos subtítulos para xordos",
+  "subtitles settings": "axustes dos subtítulos",
+  "descriptions settings": "axustes das descricións",
+  "Text": "Texto",
+  "White": "Branco",
+  "Black": "Negro",
+  "Red": "Vermello",
+  "Green": "Verde",
+  "Blue": "Azul",
+  "Yellow": "Marelo",
+  "Magenta": "Maxenta",
+  "Cyan": "Cian",
+  "Background": "Fondo",
+  "Window": "Xanela",
+  "Transparent": "Transparente",
+  "Semi-Transparent": "Semi-transparente",
+  "Opaque": "Opaca",
+  "Font Size": "Tamaño das letras",
+  "Text Edge Style": "Estilo do bordos do texto",
+  "None": "Ningún",
+  "Raised": "Érguida",
+  "Depressed": "Caída",
+  "Uniform": "Uniforme",
+  "Drop shadow": "Sombra caída",
+  "Font Family": "Familia de letras",
+  "Proportional Sans-Serif": "Sans-Serif proporcional",
+  "Monospace Sans-Serif": "Sans-Serif monoespazo (caixa fixa)",
+  "Proportional Serif": "Serif proporcional",
+  "Monospace Serif": "Serif monoespazo (caixa fixa)",
+  "Casual": "Manuscrito",
+  "Script": "Itálica",
+  "Small Caps": "Pequenas maiúsculas",
+  "Reset": "Reiniciar",
+  "restore all settings to the default values": "restaurar todos os axustes aos valores predeterminados",
+  "Done": "Feito",
+  "Caption Settings Dialog": "Diálogo de axustes dos subtítulos para xordos",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Inicio da xanela de diálogo. A tecla Escape cancelará e pechará a xanela.",
+  "End of dialog window.": "Fin da xanela de diálogo.",
+  "{1} is loading.": "{1} está a cargar."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/gl.json b/priv/static/video.js/lang/gl.json
new file mode 100644
index 0000000..9b0d7b1
--- /dev/null
+++ b/priv/static/video.js/lang/gl.json
@@ -0,0 +1,87 @@
+{
+  "Audio Player": "Reprodutor de son",
+  "Video Player": "Reprodutor de vídeo",
+  "Play": "Reproducir",
+  "Pause": "Pausa",
+  "Replay": "Repetir",
+  "Current Time": "Tempo reproducido",
+  "Duration": "Duración",
+  "Remaining Time": "Tempo restante",
+  "Stream Type": "Tipo de fluxo",
+  "LIVE": "EN DIRECTO",
+  "Seek to live, currently behind live": "Buscando directo, actualmente tras en directo",
+  "Seek to live, currently playing live": "Buscando directo, actualmente reproducindo en directo",
+  "Loaded": "Cargado",
+  "Progress": "Progresión",
+  "Progress Bar": "Barra de progreso",
+  "progress bar timing: currentTime={1} duration={2}": "{1} de {2}",
+  "Fullscreen": "Pantalla completa",
+  "Exit Fullscreen": "Xanela",
+  "Mute": "Silenciar",
+  "Unmute": "Son activado",
+  "Playback Rate": "Velocidade de reprodución",
+  "Subtitles": "Subtítulos",
+  "subtitles off": "subtítulos desactivados",
+  "Captions": "Subtítulos para xordos",
+  "captions off": "subtítulos para xordos desactivados",
+  "Chapters": "Capítulos",
+  "Descriptions": "Descricións",
+  "descriptions off": "descricións desactivadas",
+  "Audio Track": "Pista de son",
+  "Volume Level": "Nivel do volume",
+  "You aborted the media playback": "Vostede interrompeu a reprodución do medio.",
+  "A network error caused the media download to fail part-way.": "Un erro de rede interrompeu a descarga do medio.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Non foi posíbel cargar o medio por mor dun fallo de rede ou do servidor ou porque o formato non é compatíbel.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Interrompeuse a reprodución do medio por mor dun problema de estragamento dos datos ou porque o medio precisa funcións que o seu navegador non ofrece.",
+  "No compatible source was found for this media.": "Non se atopou ningunha orixe compatíbel con este vídeo.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "O medio está cifrado e non temos as chaves para descifralo .",
+  "Play Video": "Reproducir vídeo",
+  "Close": "Pechar",
+  "Close Modal Dialog": "Pechar a caixa de diálogo modal",
+  "Modal Window": "Xanela modal",
+  "This is a modal window": "Esta é unha xanela modal",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Este diálogo modal pódese pechar premendo a tecla Escape ou activando o botón de pechar.",
+  ", opens captions settings dialog": ", abre o diálogo de axustes dos subtítulos para xordos",
+  ", opens subtitles settings dialog": ", abre o diálogo de axustes dos subtítulos",
+  ", opens descriptions settings dialog": ", abre o diálogo de axustes das descricións",
+  ", selected": ", séleccionado",
+  "captions settings": "axustes dos subtítulos para xordos",
+  "subtitles settings": "axustes dos subtítulos",
+  "descriptions settings": "axustes das descricións",
+  "Text": "Texto",
+  "White": "Branco",
+  "Black": "Negro",
+  "Red": "Vermello",
+  "Green": "Verde",
+  "Blue": "Azul",
+  "Yellow": "Marelo",
+  "Magenta": "Maxenta",
+  "Cyan": "Cian",
+  "Background": "Fondo",
+  "Window": "Xanela",
+  "Transparent": "Transparente",
+  "Semi-Transparent": "Semi-transparente",
+  "Opaque": "Opaca",
+  "Font Size": "Tamaño das letras",
+  "Text Edge Style": "Estilo do bordos do texto",
+  "None": "Ningún",
+  "Raised": "Érguida",
+  "Depressed": "Caída",
+  "Uniform": "Uniforme",
+  "Drop shadow": "Sombra caída",
+  "Font Family": "Familia de letras",
+  "Proportional Sans-Serif": "Sans-Serif proporcional",
+  "Monospace Sans-Serif": "Sans-Serif monoespazo (caixa fixa)",
+  "Proportional Serif": "Serif proporcional",
+  "Monospace Serif": "Serif monoespazo (caixa fixa)",
+  "Casual": "Manuscrito",
+  "Script": "Itálica",
+  "Small Caps": "Pequenas maiúsculas",
+  "Reset": "Reiniciar",
+  "restore all settings to the default values": "restaurar todos os axustes aos valores predeterminados",
+  "Done": "Feito",
+  "Caption Settings Dialog": "Diálogo de axustes dos subtítulos para xordos",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Inicio da xanela de diálogo. A tecla Escape cancelará e pechará a xanela.",
+  "End of dialog window.": "Fin da xanela de diálogo.",
+  "{1} is loading.": "{1} está a cargar."
+}
diff --git a/priv/static/video.js/lang/he.js b/priv/static/video.js/lang/he.js
new file mode 100644
index 0000000..f2a807f
--- /dev/null
+++ b/priv/static/video.js/lang/he.js
@@ -0,0 +1,84 @@
+videojs.addLanguage('he', {
+  "Audio Player": "נַגָּן שמע",
+  "Video Player": "נַגָּן וידאו",
+  "Play": "נַגֵּן",
+  "Pause": "השהה",
+  "Replay": "נַגֵּן שוב",
+  "Current Time": "זמן נוכחי",
+  "Duration": "זמן כולל",
+  "Remaining Time": "זמן נותר",
+  "Stream Type": "סוג Stream",
+  "LIVE": "שידור חי",
+  "Loaded": "נטען",
+  "Progress": "התקדמות",
+  "Progress Bar": "סרגל התקדמות",
+  "progress bar timing: currentTime={1} duration={2}": "{1} מתוך {2}",
+  "Fullscreen": "מסך מלא",
+  "Exit Fullscreen": "מסך לא מלא",
+  "Mute": "השתק",
+  "Unmute": "בטל השתקה",
+  "Playback Rate": "קצב ניגון",
+  "Subtitles": "כתוביות",
+  "subtitles off": "כתוביות כבויות",
+  "Captions": "כיתובים",
+  "captions off": "כיתובים כבויים",
+  "Chapters": "פרקים",
+  "Descriptions": "תיאורים",
+  "descriptions off": "תיאורים כבויים",
+  "Audio Track": "רצועת שמע",
+  "Volume Level": "רמת ווליום",
+  "You aborted the media playback": "ביטלת את השמעת המדיה",
+  "A network error caused the media download to fail part-way.": "שגיאת רשת גרמה להורדת המדיה להיכשל באמצע.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "לא ניתן לטעון את המדיה, או מכיוון שהרשת או השרת כשלו או מכיוון שהפורמט אינו נתמך.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "השמעת המדיה בוטלה בשל בעית השחטת מידע או מכיוון שהמדיה עשתה שימוש בתכונות שהדפדפן שלך לא תמך בהן.",
+  "No compatible source was found for this media.": "לא נמצא מקור תואם עבור מדיה זו.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "המדיה מוצפנת ואין בידינו את המפתח כדי לפענח אותה.",
+  "Play Video": "נַגֵּן וידאו",
+  "Close": "סְגוֹר",
+  "Close Modal Dialog": "סְגוֹר דו-שיח מודאלי",
+  "Modal Window": "חלון מודאלי",
+  "This is a modal window": "זהו חלון מודאלי",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "ניתן לסגור חלון מודאלי זה ע\"י לחיצה על כפתור ה-Escape או הפעלת כפתור הסגירה.",
+  ", opens captions settings dialog": ", פותח חלון הגדרות כיתובים",
+  ", opens subtitles settings dialog": ", פותח חלון הגדרות כתוביות",
+  ", opens descriptions settings dialog": ", פותח חלון הגדרות תיאורים",
+  ", selected": ", נבחר/ו",
+  "captions settings": "הגדרות כיתובים",
+  "subtitles settings": "הגדרות כתוביות",
+  "descriptions settings": "הגדרות תיאורים",
+  "Text": "טקסט",
+  "White": "לבן",
+  "Black": "שחור",
+  "Red": "אדום",
+  "Green": "ירוק",
+  "Blue": "כחול",
+  "Yellow": "צהוב",
+  "Magenta": "מַגֶ'נטָה",
+  "Cyan": "טורקיז",
+  "Background": "רקע",
+  "Window": "חלון",
+  "Transparent": "שקוף",
+  "Semi-Transparent": "שקוף למחצה",
+  "Opaque": "אָטוּם",
+  "Font Size": "גודל גופן",
+  "Text Edge Style": "סגנון קצוות טקסט",
+  "None": "ללא",
+  "Raised": "מורם",
+  "Depressed": "מורד",
+  "Uniform": "אחיד",
+  "Drop shadow": "הטלת צל",
+  "Font Family": "משפחת גופן",
+  "Proportional Sans-Serif": "פרופורציוני וללא תגיות (Proportional Sans-Serif)",
+  "Monospace Sans-Serif": "ברוחב אחיד וללא תגיות (Monospace Sans-Serif)",
+  "Proportional Serif": "פרופורציוני ועם תגיות (Proportional Serif)",
+  "Monospace Serif": "ברוחב אחיד ועם תגיות (Monospace Serif)",
+  "Casual": "אַגָבִי",
+  "Script": "תסריט",
+  "Small Caps": "אותיות קטנות",
+  "Reset": "אִפּוּס",
+  "restore all settings to the default values": "שחזר את כל ההגדרות לערכי ברירת המחדל",
+  "Done": "בוצע",
+  "Caption Settings Dialog": "דו-שיח הגדרות כיתובים",
+  "Beginning of dialog window. Escape will cancel and close the window.": "תחילת חלון דו-שיח. Escape יבטל ויסגור את החלון",
+  "End of dialog window.": "סוף חלון דו-שיח."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/he.json b/priv/static/video.js/lang/he.json
new file mode 100644
index 0000000..834bd5e
--- /dev/null
+++ b/priv/static/video.js/lang/he.json
@@ -0,0 +1,84 @@
+{
+	"Audio Player": "נַגָּן שמע",
+	"Video Player": "נַגָּן וידאו",
+	"Play": "נַגֵּן",
+	"Pause": "השהה",
+	"Replay": "נַגֵּן שוב",
+	"Current Time": "זמן נוכחי",
+	"Duration": "זמן כולל",
+	"Remaining Time": "זמן נותר",
+	"Stream Type": "סוג Stream",
+	"LIVE": "שידור חי",
+	"Loaded": "נטען",
+	"Progress": "התקדמות",
+	"Progress Bar": "סרגל התקדמות",
+	"progress bar timing: currentTime={1} duration={2}": "{1} מתוך {2}",
+	"Fullscreen": "מסך מלא",
+	"Exit Fullscreen": "מסך לא מלא",
+	"Mute": "השתק",
+	"Unmute": "בטל השתקה",
+	"Playback Rate": "קצב ניגון",
+	"Subtitles": "כתוביות",
+	"subtitles off": "כתוביות כבויות",
+	"Captions": "כיתובים",
+	"captions off": "כיתובים כבויים",
+	"Chapters": "פרקים",
+	"Descriptions": "תיאורים",
+	"descriptions off": "תיאורים כבויים",
+	"Audio Track": "רצועת שמע",
+	"Volume Level": "רמת ווליום",
+	"You aborted the media playback": "ביטלת את השמעת המדיה",
+	"A network error caused the media download to fail part-way.": "שגיאת רשת גרמה להורדת המדיה להיכשל באמצע.",
+	"The media could not be loaded, either because the server or network failed or because the format is not supported.": "לא ניתן לטעון את המדיה, או מכיוון שהרשת או השרת כשלו או מכיוון שהפורמט אינו נתמך.",
+	"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "השמעת המדיה בוטלה בשל בעית השחטת מידע או מכיוון שהמדיה עשתה שימוש בתכונות שהדפדפן שלך לא תמך בהן.",
+	"No compatible source was found for this media.": "לא נמצא מקור תואם עבור מדיה זו.",
+	"The media is encrypted and we do not have the keys to decrypt it.": "המדיה מוצפנת ואין בידינו את המפתח כדי לפענח אותה.",
+	"Play Video": "נַגֵּן וידאו",
+	"Close": "סְגוֹר",
+	"Close Modal Dialog": "סְגוֹר דו-שיח מודאלי",
+	"Modal Window": "חלון מודאלי",
+	"This is a modal window": "זהו חלון מודאלי",
+	"This modal can be closed by pressing the Escape key or activating the close button.": "ניתן לסגור חלון מודאלי זה ע\"י לחיצה על כפתור ה-Escape או הפעלת כפתור הסגירה.",
+	", opens captions settings dialog": ", פותח חלון הגדרות כיתובים",
+	", opens subtitles settings dialog": ", פותח חלון הגדרות כתוביות",
+	", opens descriptions settings dialog": ", פותח חלון הגדרות תיאורים",
+	", selected": ", נבחר/ו",
+	"captions settings": "הגדרות כיתובים",
+	"subtitles settings": "הגדרות כתוביות",
+	"descriptions settings": "הגדרות תיאורים",
+	"Text": "טקסט",
+	"White": "לבן",
+	"Black": "שחור",
+	"Red": "אדום",
+	"Green": "ירוק",
+	"Blue": "כחול",
+	"Yellow": "צהוב",
+	"Magenta": "מַגֶ'נטָה",
+	"Cyan": "טורקיז",
+	"Background": "רקע",
+	"Window": "חלון",
+	"Transparent": "שקוף",
+	"Semi-Transparent": "שקוף למחצה",
+	"Opaque": "אָטוּם",
+	"Font Size": "גודל גופן",
+	"Text Edge Style": "סגנון קצוות טקסט",
+	"None": "ללא",
+	"Raised": "מורם",
+	"Depressed": "מורד",
+	"Uniform": "אחיד",
+	"Drop shadow": "הטלת צל",
+	"Font Family": "משפחת גופן",
+	"Proportional Sans-Serif": "פרופורציוני וללא תגיות (Proportional Sans-Serif)",
+	"Monospace Sans-Serif": "ברוחב אחיד וללא תגיות (Monospace Sans-Serif)",
+	"Proportional Serif": "פרופורציוני ועם תגיות (Proportional Serif)",
+	"Monospace Serif": "ברוחב אחיד ועם תגיות (Monospace Serif)",
+	"Casual": "אַגָבִי",
+	"Script": "תסריט",
+	"Small Caps": "אותיות קטנות",
+	"Reset": "אִפּוּס",
+	"restore all settings to the default values": "שחזר את כל ההגדרות לערכי ברירת המחדל",
+	"Done": "בוצע",
+	"Caption Settings Dialog": "דו-שיח הגדרות כיתובים",
+	"Beginning of dialog window. Escape will cancel and close the window.": "תחילת חלון דו-שיח. Escape יבטל ויסגור את החלון",
+	"End of dialog window.": "סוף חלון דו-שיח."
+}
diff --git a/priv/static/video.js/lang/hi.js b/priv/static/video.js/lang/hi.js
new file mode 100644
index 0000000..d6bf0e8
--- /dev/null
+++ b/priv/static/video.js/lang/hi.js
@@ -0,0 +1,89 @@
+videojs.addLanguage('hi', {
+  "Audio Player": "ऑडियो प्लेयर",
+  "Video Player": "वीडियो प्लेयर",
+  "Play": "चलाएँ",
+  "Pause": "रोके",
+  "Replay": "फिर से चलाएँ",
+  "Current Time": "वर्तमान समय",
+  "Duration": "अवधि",
+  "Remaining Time": "शेष समय",
+  "Stream Type": "स्ट्रीम प्रकार",
+  "LIVE": "लाइव",
+  "Seek to live, currently behind live": "छोड़कर लाइव प्रसारण पर आगे बढ़ें, अभी लाइव प्रसारण से पीछे हैं",
+  "Seek to live, currently playing live": "छोड़कर लाइव प्रसारण पर आगे बढ़ें, अभी लाइव चल रहा है",
+  "Loaded": "लोड हुआ",
+  "Progress": "प्रगति",
+  "Progress Bar": "प्रोगेस बार",
+  "progress bar timing: currentTime={1} duration={2}": "{2} में से {1}",
+  "Fullscreen": "फ़ुल स्क्रीन",
+  "Exit Fullscreen": "फ़ुल स्क्रीन से बाहर निकलें",
+  "Mute": "म्यूट करें",
+  "Unmute": "अनम्यूट करें",
+  "Playback Rate": "चलाने की दर",
+  "Subtitles": "उपशीर्षक",
+  "subtitles off": "उपशीर्षक बंद",
+  "Captions": "कैप्शन",
+  "captions off": "कैप्शन बंद",
+  "Chapters": "अध्याय",
+  "Descriptions": "विवरण",
+  "descriptions off": "विवरण बंद",
+  "Audio Track": "ऑडियो ट्रैक",
+  "Volume Level": "वॉल्यूम स्तर",
+  "You aborted the media playback": "आपने मीडिया प्लेबैक को रोक दिया",
+  "A network error caused the media download to fail part-way.": "एक नेटवर्क त्रुटि के कारण मीडिया डाउनलोड आंशिक रूप से विफल हो गया।",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "मीडिया लोड नहीं किया जा सका, या तो सर्वर या नेटवर्क विफल होने के कारण या प्रारूप समर्थित नहीं होने के कारण।",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "मीडिया प्लेबैक निरस्त कर दिया गया, कारण: दूषण की समस्या या मीडिया ने उन सुविधाओं का उपयोग किया था जिनका आपके ब्राउज़र ने समर्थन नहीं किया।",
+  "No compatible source was found for this media.": "इस मीडिया के लिए कोई अनुकूल स्रोत नहीं मिला।.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "मीडिया एन्क्रिप्टेड है और हमारे पास इसे डिक्रिप्ट करने की चाबी नहीं है।",
+  "Play Video": "वीडियो चलाएं",
+  "Close": "बंद करे",
+  "Close Modal Dialog": "मोडल डायलॉग बंद करें",
+  "Modal Window": "मोडल विंडो",
+  "This is a modal window": "यह एक मोडल विंडो है",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "इस मोडल को एस्केप कुंजी दबाकर या बंद करें बटन को सक्रिय करके बंद किया जा सकता है।",
+  ", opens captions settings dialog": ", कैप्शन सेटिंग डायलॉग खोलता है",
+  ", opens subtitles settings dialog": ", उपशीर्षक सेटिंग्स संवाद खोलता है",
+  ", opens descriptions settings dialog": ", विवरण सेटिंग संवाद खोलता है",
+  ", selected": ", चुना गया",
+  "captions settings": "कैप्शन सेटिंग",
+  "subtitles settings": "उपशीर्षक सेटिंग",
+  "descriptions settings": "विवरण सेटिंग",
+  "Text": "टेक्स्ट",
+  "White": "सफेद",
+  "Black": "काला",
+  "Red": "लाल",
+  "Green": "हरा",
+  "Blue": "नीला",
+  "Yellow": "पीला",
+  "Magenta": "मैजेंटा",
+  "Cyan": "सियान",
+  "Background": "बैकग्राउंड",
+  "Window": "विंडो",
+  "Transparent": "पारदर्शी",
+  "Semi-Transparent": "अर्द्ध पारदर्शी",
+  "Opaque": "अपारदर्शी",
+  "Font Size": "फ़ॉन्ट आकार",
+  "Text Edge Style": "टेक्स्ट एज स्टाइल",
+  "None": "कोई नहीं",
+  "Raised": "उठा हुआ",
+  "Depressed": "उदास",
+  "Uniform": "समान",
+  "Drop shadow": "परछाई",
+  "Font Family": "फॉण्ट परिवार",
+  "Proportional Sans-Serif": "प्रोपोरशनल साँस-सेरिफ",
+  "Monospace Sans-Serif": "मोनोस्पास साँस-सेरिफ",
+  "Proportional Serif": "प्रोपोरशनल सेरिफ",
+  "Monospace Serif": "मोनोस्पास सेरिफ",
+  "Casual": "आकस्मिक",
+  "Script": "स्क्रिप्ट",
+  "Small Caps": "छोटे अक्षर",
+  "Reset": "रीसेट करें",
+  "restore all settings to the default values": "सभी सेटिंग्स को डिफ़ॉल्ट मानों पर पुनर्स्थापित करें",
+  "Done": "पूर्ण",
+  "Caption Settings Dialog": "कैप्शन सेटिंग्स डायलॉग",
+  "Beginning of dialog window. Escape will cancel and close the window.": "डायलॉग विंडो की शुरुआत। एस्केप विंडो को रद्द और बंद कर देगा।",
+  "End of dialog window.": "संवाद विंडो का अंत।",
+  "{1} is loading.": "{1} लोड हो रहा है।",
+  "Exit Picture-in-Picture": "पिक्चर-इन-पिक्चर से बाहर निकलें",
+  "Picture-in-Picture": "पिक्चर-इन-पिक्चर"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/hi.json b/priv/static/video.js/lang/hi.json
new file mode 100644
index 0000000..ffe859d
--- /dev/null
+++ b/priv/static/video.js/lang/hi.json
@@ -0,0 +1,89 @@
+{
+  "Audio Player": "ऑडियो प्लेयर",
+  "Video Player": "वीडियो प्लेयर",
+  "Play": "चलाएँ",
+  "Pause": "रोके",
+  "Replay": "फिर से चलाएँ",
+  "Current Time": "वर्तमान समय",
+  "Duration": "अवधि",
+  "Remaining Time": "शेष समय",
+  "Stream Type": "स्ट्रीम प्रकार",
+  "LIVE": "लाइव",
+  "Seek to live, currently behind live": "छोड़कर लाइव प्रसारण पर आगे बढ़ें, अभी लाइव प्रसारण से पीछे हैं",
+  "Seek to live, currently playing live": "छोड़कर लाइव प्रसारण पर आगे बढ़ें, अभी लाइव चल रहा है",
+  "Loaded": "लोड हुआ",
+  "Progress": "प्रगति",
+  "Progress Bar": "प्रोगेस बार",
+  "progress bar timing: currentTime={1} duration={2}": "{2} में से {1}",
+  "Fullscreen": "फ़ुल स्क्रीन",
+  "Exit Fullscreen": "फ़ुल स्क्रीन से बाहर निकलें",
+  "Mute": "म्यूट करें",
+  "Unmute": "अनम्यूट करें",
+  "Playback Rate": "चलाने की दर",
+  "Subtitles": "उपशीर्षक",
+  "subtitles off": "उपशीर्षक बंद",
+  "Captions": "कैप्शन",
+  "captions off": "कैप्शन बंद",
+  "Chapters": "अध्याय",
+  "Descriptions": "विवरण",
+  "descriptions off": "विवरण बंद",
+  "Audio Track": "ऑडियो ट्रैक",
+  "Volume Level": "वॉल्यूम स्तर",
+  "You aborted the media playback": "आपने मीडिया प्लेबैक को रोक दिया",
+  "A network error caused the media download to fail part-way.": "एक नेटवर्क त्रुटि के कारण मीडिया डाउनलोड आंशिक रूप से विफल हो गया।",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "मीडिया लोड नहीं किया जा सका, या तो सर्वर या नेटवर्क विफल होने के कारण या प्रारूप समर्थित नहीं होने के कारण।",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "मीडिया प्लेबैक निरस्त कर दिया गया, कारण: दूषण की समस्या या मीडिया ने उन सुविधाओं का उपयोग किया था जिनका आपके ब्राउज़र ने समर्थन नहीं किया।",
+  "No compatible source was found for this media.": "इस मीडिया के लिए कोई अनुकूल स्रोत नहीं मिला।.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "मीडिया एन्क्रिप्टेड है और हमारे पास इसे डिक्रिप्ट करने की चाबी नहीं है।",
+  "Play Video": "वीडियो चलाएं",
+  "Close": "बंद करे",
+  "Close Modal Dialog": "मोडल डायलॉग बंद करें",
+  "Modal Window": "मोडल विंडो",
+  "This is a modal window": "यह एक मोडल विंडो है",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "इस मोडल को एस्केप कुंजी दबाकर या बंद करें बटन को सक्रिय करके बंद किया जा सकता है।",
+  ", opens captions settings dialog": ", कैप्शन सेटिंग डायलॉग खोलता है",
+  ", opens subtitles settings dialog": ", उपशीर्षक सेटिंग्स संवाद खोलता है",
+  ", opens descriptions settings dialog": ", विवरण सेटिंग संवाद खोलता है",
+  ", selected": ", चुना गया",
+  "captions settings": "कैप्शन सेटिंग",
+  "subtitles settings": "उपशीर्षक सेटिंग",
+  "descriptions settings": "विवरण सेटिंग",
+  "Text": "टेक्स्ट",
+  "White": "सफेद",
+  "Black": "काला",
+  "Red": "लाल",
+  "Green": "हरा",
+  "Blue": "नीला",
+  "Yellow": "पीला",
+  "Magenta": "मैजेंटा",
+  "Cyan": "सियान",
+  "Background": "बैकग्राउंड",
+  "Window": "विंडो",
+  "Transparent": "पारदर्शी",
+  "Semi-Transparent": "अर्द्ध पारदर्शी",
+  "Opaque": "अपारदर्शी",
+  "Font Size": "फ़ॉन्ट आकार",
+  "Text Edge Style": "टेक्स्ट एज स्टाइल",
+  "None": "कोई नहीं",
+  "Raised": "उठा हुआ",
+  "Depressed": "उदास",
+  "Uniform": "समान",
+  "Drop shadow": "परछाई",
+  "Font Family": "फॉण्ट परिवार",
+  "Proportional Sans-Serif": "प्रोपोरशनल साँस-सेरिफ",
+  "Monospace Sans-Serif": "मोनोस्पास साँस-सेरिफ",
+  "Proportional Serif": "प्रोपोरशनल सेरिफ",
+  "Monospace Serif": "मोनोस्पास सेरिफ",
+  "Casual": "आकस्मिक",
+  "Script": "स्क्रिप्ट",
+  "Small Caps": "छोटे अक्षर",
+  "Reset": "रीसेट करें",
+  "restore all settings to the default values": "सभी सेटिंग्स को डिफ़ॉल्ट मानों पर पुनर्स्थापित करें",
+  "Done": "पूर्ण",
+  "Caption Settings Dialog": "कैप्शन सेटिंग्स डायलॉग",
+  "Beginning of dialog window. Escape will cancel and close the window.": "डायलॉग विंडो की शुरुआत। एस्केप विंडो को रद्द और बंद कर देगा।",
+  "End of dialog window.": "संवाद विंडो का अंत।",
+  "{1} is loading.": "{1} लोड हो रहा है।",
+  "Exit Picture-in-Picture": "पिक्चर-इन-पिक्चर से बाहर निकलें",
+  "Picture-in-Picture": "पिक्चर-इन-पिक्चर"
+}
diff --git a/priv/static/video.js/lang/hr.js b/priv/static/video.js/lang/hr.js
new file mode 100644
index 0000000..79a6463
--- /dev/null
+++ b/priv/static/video.js/lang/hr.js
@@ -0,0 +1,26 @@
+videojs.addLanguage('hr', {
+  "Play": "Pusti",
+  "Pause": "Pauza",
+  "Current Time": "Trenutno vrijeme",
+  "Duration": "Vrijeme trajanja",
+  "Remaining Time": "Preostalo vrijeme",
+  "Stream Type": "Način strimovanja",
+  "LIVE": "UŽIVO",
+  "Loaded": "Učitan",
+  "Progress": "Progres",
+  "Fullscreen": "Puni ekran",
+  "Exit Fullscreen": "Mali ekran",
+  "Mute": "Prigušen",
+  "Unmute": "Ne-prigušen",
+  "Playback Rate": "Stopa reprodukcije",
+  "Subtitles": "Podnaslov",
+  "subtitles off": "Podnaslov deaktiviran",
+  "Captions": "Titlovi",
+  "captions off": "Titlovi deaktivirani",
+  "Chapters": "Poglavlja",
+  "You aborted the media playback": "Isključili ste reprodukciju videa.",
+  "A network error caused the media download to fail part-way.": "Video se prestao preuzimati zbog greške na mreži.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Video se ne može reproducirati zbog servera, greške u mreži ili je format ne podržan.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Reprodukcija videa je zaustavljenja zbog greške u formatu ili zbog verzije vašeg pretraživača.",
+  "No compatible source was found for this media.": "Nije nađen nijedan kompatibilan izvor ovog videa."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/hr.json b/priv/static/video.js/lang/hr.json
new file mode 100644
index 0000000..da6b2a7
--- /dev/null
+++ b/priv/static/video.js/lang/hr.json
@@ -0,0 +1,26 @@
+{
+  "Play": "Pusti",
+  "Pause": "Pauza",
+  "Current Time": "Trenutno vrijeme",
+  "Duration": "Vrijeme trajanja",
+  "Remaining Time": "Preostalo vrijeme",
+  "Stream Type": "Način strimovanja",
+  "LIVE": "UŽIVO",
+  "Loaded": "Učitan",
+  "Progress": "Progres",
+  "Fullscreen": "Puni ekran",
+  "Exit Fullscreen": "Mali ekran",
+  "Mute": "Prigušen",
+  "Unmute": "Ne-prigušen",
+  "Playback Rate": "Stopa reprodukcije",
+  "Subtitles": "Podnaslov",
+  "subtitles off": "Podnaslov deaktiviran",
+  "Captions": "Titlovi",
+  "captions off": "Titlovi deaktivirani",
+  "Chapters": "Poglavlja",
+  "You aborted the media playback": "Isključili ste reprodukciju videa.",
+  "A network error caused the media download to fail part-way.": "Video se prestao preuzimati zbog greške na mreži.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Video se ne može reproducirati zbog servera, greške u mreži ili je format ne podržan.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Reprodukcija videa je zaustavljenja zbog greške u formatu ili zbog verzije vašeg pretraživača.",
+  "No compatible source was found for this media.": "Nije nađen nijedan kompatibilan izvor ovog videa."
+}
diff --git a/priv/static/video.js/lang/hu.js b/priv/static/video.js/lang/hu.js
new file mode 100644
index 0000000..57f31b9
--- /dev/null
+++ b/priv/static/video.js/lang/hu.js
@@ -0,0 +1,89 @@
+videojs.addLanguage('hu', {
+  "Play": "Lejátszás",
+  "Pause": "Szünet",
+  "Current Time": "Aktuális időpont",
+  "Duration": "Hossz",
+  "Remaining Time": "Hátralévő idő",
+  "Stream Type": "Adatfolyam típusa",
+  "LIVE": "ÉLŐ",
+  "Loaded": "Betöltve",
+  "Progress": "Állapot",
+  "Fullscreen": "Teljes képernyő",
+  "Exit Fullscreen": "Normál méret",
+  "Mute": "Némítás",
+  "Unmute": "Némítás kikapcsolva",
+  "Playback Rate": "Lejátszási sebesség",
+  "Subtitles": "Feliratok",
+  "subtitles off": "Feliratok kikapcsolva",
+  "Captions": "Magyarázó szöveg",
+  "captions off": "Magyarázó szöveg kikapcsolva",
+  "Chapters": "Fejezetek",
+  "You aborted the media playback": "Leállította a lejátszást",
+  "A network error caused the media download to fail part-way.": "Hálózati hiba miatt a videó részlegesen töltődött le.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "A videó nem tölthető be hálózati vagy kiszolgálói hiba miatt, vagy a formátuma nem támogatott.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A lejátszás adatsérülés miatt leállt, vagy a videó egyes tulajdonságait a böngészője nem támogatja.",
+  "No compatible source was found for this media.": "Nincs kompatibilis forrás ehhez a videóhoz.",
+  "Audio Player": "Audio lejátszó",
+  "Video Player": "Videó lejátszó",
+  "Replay": "Visszajátszás",
+  "Descriptions": "Leírások",
+  "descriptions off": "leírások kikapcsolva",
+  "Audio Track": "Hangsáv",
+  "Volume Level": "Hangerő",
+  "Play Video": "Videó lejátszása",
+  "Close": "Bezárás",
+  "Text": "Szöveg",
+  "White": "Fehér",
+  "Black": "Fekete",
+  "Red": "Piros",
+  "Green": "Zöld",
+  "Blue": "Kék",
+  "Yellow": "Sárga",
+  "Background": "Háttér",
+  "Window": "Ablak",
+  "Transparent": "Átlátszó",
+  "Semi-Transparent": "Félig átlátszó",
+  "Opaque": "Áttetsző",
+  "Font Size": "Betűméret",
+  "Font Family": "Betűtípus",
+  "Done": "Kész",
+  "Picture-in-Picture": "Kép a képben",
+  "Exit Picture-in-Picture": "Kilépés kép a képben módból",
+  "{1} is loading.": "{1} betöltése.",
+  "Reset": "Visszaállítás",
+  "restore all settings to the default values": "összes beállítás visszaállítása az alapértelmezett értékekre",
+  "The media is encrypted and we do not have the keys to decrypt it.": "A média titkosítva van és nincsenek kulcsok a visszafejtéshez.",
+  "Close Modal Dialog": "Felugró ablak bezárása",
+  "Modal Window": "Felugró ablak",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Ezt a felugró ablakot az Escape gomb megnyomásával vagy a bezáró gomb aktiválásával lehet bezárni.",
+  ", selected": ", kiválasztva",
+  "descriptions settings": "leírások beállítása",
+  "Text Edge Style": "Szövegél stílus",
+  "This is a modal window": "Ez egy felugró ablak",
+  "Cyan": "Cián",
+  "Drop shadow": "Árnyék",
+  "End of dialog window.": "Párbeszédablak vége.",
+  "Progress Bar": "Folyamatjelző sáv",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Párbeszédablak eleje. Az Escape gomb befejezi és bezárja az ablakot.",
+  "Caption Settings Dialog": "Feliratbeállítások párbeszédablak",
+  ", opens descriptions settings dialog": ", megnyitja a leírások beállításainak párbeszédablakját",
+  ", opens captions settings dialog": ", megnyitja a magyarázó szövegek beállításainak párbeszédablakját",
+  ", opens subtitles settings dialog": ", megnyitja a feliratok beállításainak párbeszédablakját",
+  "Seek to live, currently behind live": "Élő adáshoz tekerés, jelenleg az élő adás mögött van",
+  "Seek to live, currently playing live": "Élő adáshoz tekerés, jelenleg az élő adásnál van",
+  "progress bar timing: currentTime={1} duration={2}": "{1} / {2}",
+  "Magenta": "Lila",
+  "Script": "Script",
+  "Casual": "Casual",
+  "Monospace Serif": "Monospace Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Sans-Serif": "Proportional Sans-Serif",
+  "Proportional Serif": "Proportional Serif",
+  "Uniform": "Uniform",
+  "Small Caps": "Kiskapitális",
+  "None": "Egyik sem",
+  "captions settings": "magyarázó szövegek beállításai",
+  "subtitles settings": "feliratok beállításai",
+  "Raised": "Emelt",
+  "Depressed": "Nyomott"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/hu.json b/priv/static/video.js/lang/hu.json
new file mode 100644
index 0000000..d9c3948
--- /dev/null
+++ b/priv/static/video.js/lang/hu.json
@@ -0,0 +1,89 @@
+{
+  "Play": "Lejátszás",
+  "Pause": "Szünet",
+  "Current Time": "Aktuális időpont",
+  "Duration": "Hossz",
+  "Remaining Time": "Hátralévő idő",
+  "Stream Type": "Adatfolyam típusa",
+  "LIVE": "ÉLŐ",
+  "Loaded": "Betöltve",
+  "Progress": "Állapot",
+  "Fullscreen": "Teljes képernyő",
+  "Exit Fullscreen": "Normál méret",
+  "Mute": "Némítás",
+  "Unmute": "Némítás kikapcsolva",
+  "Playback Rate": "Lejátszási sebesség",
+  "Subtitles": "Feliratok",
+  "subtitles off": "Feliratok kikapcsolva",
+  "Captions": "Magyarázó szöveg",
+  "captions off": "Magyarázó szöveg kikapcsolva",
+  "Chapters": "Fejezetek",
+  "You aborted the media playback": "Leállította a lejátszást",
+  "A network error caused the media download to fail part-way.": "Hálózati hiba miatt a videó részlegesen töltődött le.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "A videó nem tölthető be hálózati vagy kiszolgálói hiba miatt, vagy a formátuma nem támogatott.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A lejátszás adatsérülés miatt leállt, vagy a videó egyes tulajdonságait a böngészője nem támogatja.",
+  "No compatible source was found for this media.": "Nincs kompatibilis forrás ehhez a videóhoz.",
+  "Audio Player": "Audio lejátszó",
+  "Video Player": "Videó lejátszó",
+  "Replay": "Visszajátszás",
+  "Descriptions": "Leírások",
+  "descriptions off": "leírások kikapcsolva",
+  "Audio Track": "Hangsáv",
+  "Volume Level": "Hangerő",
+  "Play Video": "Videó lejátszása",
+  "Close": "Bezárás",
+  "Text": "Szöveg",
+  "White": "Fehér",
+  "Black": "Fekete",
+  "Red": "Piros",
+  "Green": "Zöld",
+  "Blue": "Kék",
+  "Yellow": "Sárga",
+  "Background": "Háttér",
+  "Window": "Ablak",
+  "Transparent": "Átlátszó",
+  "Semi-Transparent": "Félig átlátszó",
+  "Opaque": "Áttetsző",
+  "Font Size": "Betűméret",
+  "Font Family": "Betűtípus",
+  "Done": "Kész",
+  "Picture-in-Picture": "Kép a képben",
+  "Exit Picture-in-Picture": "Kilépés kép a képben módból",
+  "{1} is loading.": "{1} betöltése.",
+  "Reset": "Visszaállítás",
+  "restore all settings to the default values": "összes beállítás visszaállítása az alapértelmezett értékekre",
+  "The media is encrypted and we do not have the keys to decrypt it.": "A média titkosítva van és nincsenek kulcsok a visszafejtéshez.",
+  "Close Modal Dialog": "Felugró ablak bezárása",
+  "Modal Window": "Felugró ablak",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Ezt a felugró ablakot az Escape gomb megnyomásával vagy a bezáró gomb aktiválásával lehet bezárni.",
+  ", selected": ", kiválasztva",
+  "descriptions settings": "leírások beállítása",
+  "Text Edge Style": "Szövegél stílus",
+  "This is a modal window": "Ez egy felugró ablak",
+  "Cyan": "Cián",
+  "Drop shadow": "Árnyék",
+  "End of dialog window.": "Párbeszédablak vége.",
+  "Progress Bar": "Folyamatjelző sáv",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Párbeszédablak eleje. Az Escape gomb befejezi és bezárja az ablakot.",
+  "Caption Settings Dialog": "Feliratbeállítások párbeszédablak",
+  ", opens descriptions settings dialog": ", megnyitja a leírások beállításainak párbeszédablakját",
+  ", opens captions settings dialog": ", megnyitja a magyarázó szövegek beállításainak párbeszédablakját",
+  ", opens subtitles settings dialog": ", megnyitja a feliratok beállításainak párbeszédablakját",
+  "Seek to live, currently behind live": "Élő adáshoz tekerés, jelenleg az élő adás mögött van",
+  "Seek to live, currently playing live": "Élő adáshoz tekerés, jelenleg az élő adásnál van",
+  "progress bar timing: currentTime={1} duration={2}": "{1} / {2}",
+  "Magenta": "Lila",
+  "Script": "Script",
+  "Casual": "Casual",
+  "Monospace Serif": "Monospace Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Sans-Serif": "Proportional Sans-Serif",
+  "Proportional Serif": "Proportional Serif",
+  "Uniform": "Uniform",
+  "Small Caps": "Kiskapitális",
+  "None": "Egyik sem",
+  "captions settings": "magyarázó szövegek beállításai",
+  "subtitles settings": "feliratok beállításai",
+  "Raised": "Emelt",
+  "Depressed": "Nyomott"
+}
diff --git a/priv/static/video.js/lang/it.js b/priv/static/video.js/lang/it.js
new file mode 100644
index 0000000..dfea383
--- /dev/null
+++ b/priv/static/video.js/lang/it.js
@@ -0,0 +1,89 @@
+videojs.addLanguage('it', {
+  "Audio Player": "Lettore audio",
+  "Video Player": "Lettore video",
+  "Play": "Play",
+  "Pause": "Pausa",
+  "Replay": "Replay",
+  "Current Time": "Orario attuale",
+  "Duration": "Durata",
+  "Remaining Time": "Tempo rimanente",
+  "Stream Type": "Tipo di streaming",
+  "LIVE": "LIVE",
+  "Loaded": "Caricato",
+  "Progress": "Stato",
+  "Progress Bar": "Barra di avanzamento",
+  "progress bar timing: currentTime={1} duration={2}": "{1} di {2}",
+  "Fullscreen": "Schermo intero",
+  "Exit Fullscreen": "Chiudi Schermo intero",
+  "Mute": "Disattiva l’audio",
+  "Unmute": "Attiva l’audio",
+  "Playback Rate": "Velocità di riproduzione",
+  "Subtitles": "Sottotitoli",
+  "subtitles off": "Senza sottotitoli",
+  "Captions": "Didascalie",
+  "captions off": "Senza didascalie",
+  "Chapters": "Capitolo",
+  "Descriptions": "Descrizioni",
+  "descriptions off": "Descrizioni disattivate",
+  "Audio Track": "Traccia audio",
+  "Volume Level": "Livello del volume",
+  "You aborted the media playback": "La riproduzione del contenuto multimediale è stata interrotta.",
+  "A network error caused the media download to fail part-way.": "Il download del contenuto multimediale è stato interrotto a causa di un problema rete.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Il contenuto multimediale non può essere caricato a causa di un errore nel server o nella rete o perché il formato non viene supportato.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "La riproduzione del contenuto multimediale è stata interrotta a causa di un file danneggiato o per l’utilizzo di impostazioni non supportate dal browser.",
+  "No compatible source was found for this media.": "Non ci sono fonti compatibili per questo contenuto multimediale.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Il contenuto multimediale è criptato e non disponiamo delle chiavi per decifrarlo.",
+  "Play Video": "Riproduci il video",
+  "Close": "Chiudi",
+  "Close Modal Dialog": "Chiudi la finestra di dialogo",
+  "Modal Window": "Finestra di dialogo",
+  "This is a modal window": "Questa è una finestra di dialogo",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Questa finestra di dialogo può essere chiusa premendo sul tasto Esc o attivando il pulsante di chiusura.",
+  ", opens captions settings dialog": ", aprire le impostazioni delle didascalie",
+  ", opens subtitles settings dialog": ", aprire le impostazioni dei sottotitoli",
+  ", opens descriptions settings dialog": ", aprire le impostazioni delle descrizioni",
+  ", selected": ", selezionato",
+  "captions settings": "Impostazioni didascalie",
+  "subtitles settings": "Impostazioni sottotitoli",
+  "descriptions settings": "Impostazioni descrizioni",
+  "Text": "Testo",
+  "White": "Bianco",
+  "Black": "Nero",
+  "Red": "Rosso",
+  "Green": "Verde",
+  "Blue": "Blu",
+  "Yellow": "Giallo",
+  "Magenta": "Magenta",
+  "Cyan": "Ciano",
+  "Background": "Sfondo",
+  "Window": "Finestra",
+  "Transparent": "Trasparente",
+  "Semi-Transparent": "Semi-Trasparente",
+  "Opaque": "Opaco",
+  "Font Size": "Dimensione dei caratteri",
+  "Text Edge Style": "Stile dei bordi del testo",
+  "None": "Nessuno",
+  "Uniform": "Uniforme",
+  "Drop shadow": "Ombra",
+  "Font Family": "Carattere",
+  "Proportional Sans-Serif": "Sans-Serif proporzionale",
+  "Monospace Sans-Serif": "Sans-Serif monospaziato",
+  "Proportional Serif": "Serif proporzionale",
+  "Monospace Serif": "Serif monospaziato",
+  "Small Caps": "Maiuscoletto",
+  "Reset": "Reinizializza",
+  "restore all settings to the default values": "Ripristina i valori predefiniti per tutti i parametri",
+  "Done": "Fatto",
+  "Caption Settings Dialog": "Finestra di dialogo dei parametri della trascrizione dei sottotitoli",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Inizio della finestra di dialogo. Il tasto Esc annullerà l’operazione e chiuderà la finestra.",
+  "End of dialog window.": "Fine della finestra di dialogo.",
+  "{1} is loading.": "{1} in fase di caricamento.",
+  "Exit Picture-in-Picture": "Esci dalla modalità Picture-in-Picture",
+  "Picture-in-Picture": "Picture-in-Picture",
+  "Color": "Colore",
+  "Opacity": "Opacità",
+  "Text Background": "Sfondo testo",
+  "Caption Area Background": "Sfondo area sottotitoli",
+  "Skip forward {1} seconds": "Avanti {1} secondi",
+  "Skip backward {1} seconds": "Indietro {1} secondi"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/it.json b/priv/static/video.js/lang/it.json
new file mode 100644
index 0000000..8091ce0
--- /dev/null
+++ b/priv/static/video.js/lang/it.json
@@ -0,0 +1,93 @@
+{
+  "Audio Player": "Lettore audio",
+  "Video Player": "Lettore video",
+  "Play": "Play",
+  "Pause": "Pausa",
+  "Replay": "Replay",
+  "Current Time": "Orario attuale",
+  "Duration": "Durata",
+  "Remaining Time": "Tempo rimanente",
+  "Stream Type": "Tipo di streaming",
+  "LIVE": "LIVE",
+  "Loaded": "Caricato",
+  "Progress": "Stato",
+  "Progress Bar": "Barra di avanzamento",
+  "progress bar timing: currentTime={1} duration={2}": "{1} di {2}",
+  "Fullscreen": "Schermo intero",
+  "Exit Fullscreen": "Chiudi Schermo intero",
+  "Mute": "Disattiva l’audio",
+  "Unmute": "Attiva l’audio",
+  "Playback Rate": "Velocità di riproduzione",
+  "Subtitles": "Sottotitoli",
+  "subtitles off": "Senza sottotitoli",
+  "Captions": "Didascalie",
+  "captions off": "Senza didascalie",
+  "Chapters": "Capitolo",
+  "Descriptions": "Descrizioni",
+  "descriptions off": "Descrizioni disattivate",
+  "Audio Track": "Traccia audio",
+  "Volume Level": "Livello del volume",
+  "You aborted the media playback": "La riproduzione del contenuto multimediale è stata interrotta.",
+  "A network error caused the media download to fail part-way.": "Il download del contenuto multimediale è stato interrotto a causa di un problema rete.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.":
+    "Il contenuto multimediale non può essere caricato a causa di un errore nel server o nella rete o perché il formato non viene supportato.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":
+    "La riproduzione del contenuto multimediale è stata interrotta a causa di un file danneggiato o per l’utilizzo di impostazioni non supportate dal browser.",
+  "No compatible source was found for this media.": "Non ci sono fonti compatibili per questo contenuto multimediale.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Il contenuto multimediale è criptato e non disponiamo delle chiavi per decifrarlo.",
+  "Play Video": "Riproduci il video",
+  "Close": "Chiudi",
+  "Close Modal Dialog": "Chiudi la finestra di dialogo",
+  "Modal Window": "Finestra di dialogo",
+  "This is a modal window": "Questa è una finestra di dialogo",
+  "This modal can be closed by pressing the Escape key or activating the close button.":
+    "Questa finestra di dialogo può essere chiusa premendo sul tasto Esc o attivando il pulsante di chiusura.",
+  ", opens captions settings dialog": ", aprire le impostazioni delle didascalie",
+  ", opens subtitles settings dialog": ", aprire le impostazioni dei sottotitoli",
+  ", opens descriptions settings dialog": ", aprire le impostazioni delle descrizioni",
+  ", selected": ", selezionato",
+  "captions settings": "Impostazioni didascalie",
+  "subtitles settings": "Impostazioni sottotitoli",
+  "descriptions settings": "Impostazioni descrizioni",
+  "Text": "Testo",
+  "White": "Bianco",
+  "Black": "Nero",
+  "Red": "Rosso",
+  "Green": "Verde",
+  "Blue": "Blu",
+  "Yellow": "Giallo",
+  "Magenta": "Magenta",
+  "Cyan": "Ciano",
+  "Background": "Sfondo",
+  "Window": "Finestra",
+  "Transparent": "Trasparente",
+  "Semi-Transparent": "Semi-Trasparente",
+  "Opaque": "Opaco",
+  "Font Size": "Dimensione dei caratteri",
+  "Text Edge Style": "Stile dei bordi del testo",
+  "None": "Nessuno",
+  "Uniform": "Uniforme",
+  "Drop shadow": "Ombra",
+  "Font Family": "Carattere",
+  "Proportional Sans-Serif": "Sans-Serif proporzionale",
+  "Monospace Sans-Serif": "Sans-Serif monospaziato",
+  "Proportional Serif": "Serif proporzionale",
+  "Monospace Serif": "Serif monospaziato",
+  "Small Caps": "Maiuscoletto",
+  "Reset": "Reinizializza",
+  "restore all settings to the default values": "Ripristina i valori predefiniti per tutti i parametri",
+  "Done": "Fatto",
+  "Caption Settings Dialog": "Finestra di dialogo dei parametri della trascrizione dei sottotitoli",
+  "Beginning of dialog window. Escape will cancel and close the window.":
+    "Inizio della finestra di dialogo. Il tasto Esc annullerà l’operazione e chiuderà la finestra.",
+  "End of dialog window.": "Fine della finestra di dialogo.",
+  "{1} is loading.": "{1} in fase di caricamento.",
+  "Exit Picture-in-Picture": "Esci dalla modalità Picture-in-Picture",
+  "Picture-in-Picture": "Picture-in-Picture",
+  "Color": "Colore",
+  "Opacity": "Opacità",
+  "Text Background": "Sfondo testo",
+  "Caption Area Background": "Sfondo area sottotitoli",
+  "Skip forward {1} seconds": "Avanti {1} secondi",
+  "Skip backward {1} seconds": "Indietro {1} secondi"
+}
diff --git a/priv/static/video.js/lang/ja.js b/priv/static/video.js/lang/ja.js
new file mode 100644
index 0000000..a306a74
--- /dev/null
+++ b/priv/static/video.js/lang/ja.js
@@ -0,0 +1,96 @@
+videojs.addLanguage('ja', {
+  "Audio Player": "オーディオプレイヤー",
+  "Video Player": "ビデオプレイヤー",
+  "Play": "再生",
+  "Pause": "一時停止",
+  "Replay": "もう一度見る",
+  "Current Time": "現在の時間",
+  "Duration": "長さ",
+  "Remaining Time": "残りの時間",
+  "Stream Type": "ストリームの種類",
+  "LIVE": "ライブ",
+  "Seek to live, currently behind live": "ライブまで再生位置を指定、現在ライブが遅れています。",
+  "Seek to live, currently playing live": "ライブまで再生位置を指定、現在ライブ中。",
+  "Loaded": "ロード済み",
+  "Progress": "進行状況",
+  "Progress Bar": "シークバー",
+  "progress bar timing: currentTime={1} duration={2}": "{2}の{1}",
+  "Fullscreen": "フルスクリーン",
+  "Exit Fullscreen": "フルスクリーン以外",
+  "Mute": "ミュート",
+  "Unmute": "サウンドをオン",
+  "Playback Rate": "再生レート",
+  "Subtitles": "サブタイトル",
+  "subtitles off": "サブタイトル オフ",
+  "Captions": "キャプション",
+  "captions off": "キャプション オフ",
+  "Chapters": "チャプター",
+  "Descriptions": "ディスクリプション",
+  "descriptions off": "ディスクリプションオフ",
+  "Audio Track": "音声トラック",
+  "Volume Level": "ボリュームレベル",
+  "You aborted the media playback": "動画再生を中止しました",
+  "A network error caused the media download to fail part-way.": "ネットワーク エラーにより動画のダウンロードが途中で失敗しました",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "サーバーまたはネットワークのエラー、またはフォーマットがサポートされていないため、動画をロードできませんでした",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "破損の問題、またはお使いのブラウザがサポートしていない機能が動画に使用されていたため、動画の再生が中止されました",
+  "No compatible source was found for this media.": "この動画に対して互換性のあるソースが見つかりませんでした",
+  "The media is encrypted and we do not have the keys to decrypt it.": "メディアは暗号化されており、解読するためのキーがありません。",
+  "Play Video": "ビデオを再生する",
+  "Close": "閉じる",
+  "Close Modal Dialog": "ダイアログボックスを閉じる",
+  "Modal Window": "ダイアログボックス",
+  "This is a modal window": "これはダイアログボックスです",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "このダイアログボックスは、Escキーを押すか、閉じるボタンを押して閉じることができま",
+  ", opens captions settings dialog": ", 書き起こし字幕の設定を開く",
+  ", opens subtitles settings dialog": ", 字幕の設定を開く",
+  ", opens descriptions settings dialog": ", ディスクリプションの設定を開く",
+  ", selected": ", 選択済み",
+  "captions settings": "書き起こし字幕の設定",
+  "subtitles settings": "字幕の設定",
+  "descriptions settings": "ディスクリプションの設定",
+  "Text": "テキスト",
+  "White": "白",
+  "Black": "黒",
+  "Red": "赤",
+  "Green": "緑",
+  "Blue": "青",
+  "Yellow": "黄",
+  "Magenta": "赤紫",
+  "Cyan": "シアン",
+  "Background": "背景",
+  "Window": "ウィンドウ",
+  "Transparent": "透明",
+  "Semi-Transparent": "半透明",
+  "Opaque": "不透明",
+  "Font Size": "文字サイズ",
+  "Text Edge Style": "テキストのアウトラインのスタイル",
+  "None": "なし",
+  "Raised": "浮き出し",
+  "Depressed": "浮き彫り",
+  "Uniform": "均一",
+  "Drop shadow": "影付き",
+  "Font Family": "フォントの種類",
+  "Proportional Sans-Serif": "セリフなし可変幅フォント",
+  "Monospace Sans-Serif": "セリフなし等幅フォント",
+  "Proportional Serif": "セリフあり可変幅フォント",
+  "Monospace Serif": "セリフあり等幅フォント",
+  "Casual": "カジュアル",
+  "Script": "スクリプト",
+  "Small Caps": "スモールキャピタル",
+  "Reset": "リセット",
+  "restore all settings to the default values": "すべての設定をデフォルト値に戻す",
+  "Done": "終了",
+  "Caption Settings Dialog": "書き起こし字幕設定ダイアログ",
+  "Beginning of dialog window. Escape will cancel and close the window.": "ダイアログボックスの開始。Escキーでキャンセルしてウィンドウを閉じます。",
+  "End of dialog window.": "ダイアログボックスの終了",
+  "{1} is loading.": "{1}は読み込み中です。",
+  "Exit Picture-in-Picture": "ピクチャーインピクチャー機能の終了",
+  "Picture-in-Picture": "ピクチャーインピクチャー",
+  "No content": "コンテンツなし",
+  "Color": "色",
+  "Opacity": "不透明度",
+  "Text Background": "テキスト背景",
+  "Caption Area Background": "キャプション領域背景",
+  "Skip forward {1} seconds": "{1}秒進む",
+  "Skip backward {1} seconds": "{1}秒戻る"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/ja.json b/priv/static/video.js/lang/ja.json
new file mode 100644
index 0000000..116fb13
--- /dev/null
+++ b/priv/static/video.js/lang/ja.json
@@ -0,0 +1,96 @@
+{
+  "Audio Player": "オーディオプレイヤー",
+  "Video Player": "ビデオプレイヤー",
+  "Play": "再生",
+  "Pause": "一時停止",
+  "Replay": "もう一度見る",
+  "Current Time": "現在の時間",
+  "Duration": "長さ",
+  "Remaining Time": "残りの時間",
+  "Stream Type": "ストリームの種類",
+  "LIVE": "ライブ",
+  "Seek to live, currently behind live": "ライブまで再生位置を指定、現在ライブが遅れています。",
+  "Seek to live, currently playing live": "ライブまで再生位置を指定、現在ライブ中。",
+  "Loaded": "ロード済み",
+  "Progress": "進行状況",
+  "Progress Bar": "シークバー",
+  "progress bar timing: currentTime={1} duration={2}": "{2}の{1}",
+  "Fullscreen": "フルスクリーン",
+  "Exit Fullscreen": "フルスクリーン以外",
+  "Mute": "ミュート",
+  "Unmute": "サウンドをオン",
+  "Playback Rate": "再生レート",
+  "Subtitles": "サブタイトル",
+  "subtitles off": "サブタイトル オフ",
+  "Captions": "キャプション",
+  "captions off": "キャプション オフ",
+  "Chapters": "チャプター",
+  "Descriptions": "ディスクリプション",
+  "descriptions off": "ディスクリプションオフ",
+  "Audio Track": "音声トラック",
+  "Volume Level": "ボリュームレベル",
+  "You aborted the media playback": "動画再生を中止しました",
+  "A network error caused the media download to fail part-way.": "ネットワーク エラーにより動画のダウンロードが途中で失敗しました",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "サーバーまたはネットワークのエラー、またはフォーマットがサポートされていないため、動画をロードできませんでした",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "破損の問題、またはお使いのブラウザがサポートしていない機能が動画に使用されていたため、動画の再生が中止されました",
+  "No compatible source was found for this media.": "この動画に対して互換性のあるソースが見つかりませんでした",
+  "The media is encrypted and we do not have the keys to decrypt it.": "メディアは暗号化されており、解読するためのキーがありません。",
+  "Play Video": "ビデオを再生する",
+  "Close": "閉じる",
+  "Close Modal Dialog": "ダイアログボックスを閉じる",
+  "Modal Window": "ダイアログボックス",
+  "This is a modal window": "これはダイアログボックスです",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "このダイアログボックスは、Escキーを押すか、閉じるボタンを押して閉じることができま",
+  ", opens captions settings dialog": ", 書き起こし字幕の設定を開く",
+  ", opens subtitles settings dialog": ", 字幕の設定を開く",
+  ", opens descriptions settings dialog": ", ディスクリプションの設定を開く",
+  ", selected": ", 選択済み",
+  "captions settings": "書き起こし字幕の設定",
+  "subtitles settings": "字幕の設定",
+  "descriptions settings": "ディスクリプションの設定",
+  "Text": "テキスト",
+  "White": "白",
+  "Black": "黒",
+  "Red": "赤",
+  "Green": "緑",
+  "Blue": "青",
+  "Yellow": "黄",
+  "Magenta": "赤紫",
+  "Cyan": "シアン",
+  "Background": "背景",
+  "Window": "ウィンドウ",
+  "Transparent": "透明",
+  "Semi-Transparent": "半透明",
+  "Opaque": "不透明",
+  "Font Size": "文字サイズ",
+  "Text Edge Style": "テキストのアウトラインのスタイル",
+  "None": "なし",
+  "Raised": "浮き出し",
+  "Depressed": "浮き彫り",
+  "Uniform": "均一",
+  "Drop shadow": "影付き",
+  "Font Family": "フォントの種類",
+  "Proportional Sans-Serif": "セリフなし可変幅フォント",
+  "Monospace Sans-Serif": "セリフなし等幅フォント",
+  "Proportional Serif": "セリフあり可変幅フォント",
+  "Monospace Serif": "セリフあり等幅フォント",
+  "Casual": "カジュアル",
+  "Script": "スクリプト",
+  "Small Caps": "スモールキャピタル",
+  "Reset": "リセット",
+  "restore all settings to the default values": "すべての設定をデフォルト値に戻す",
+  "Done": "終了",
+  "Caption Settings Dialog": "書き起こし字幕設定ダイアログ",
+  "Beginning of dialog window. Escape will cancel and close the window.": "ダイアログボックスの開始。Escキーでキャンセルしてウィンドウを閉じます。",
+  "End of dialog window.": "ダイアログボックスの終了",
+  "{1} is loading.": "{1}は読み込み中です。",
+  "Exit Picture-in-Picture": "ピクチャーインピクチャー機能の終了",
+  "Picture-in-Picture": "ピクチャーインピクチャー",
+  "No content": "コンテンツなし",
+  "Color": "色",
+  "Opacity": "不透明度",
+  "Text Background": "テキスト背景",
+  "Caption Area Background": "キャプション領域背景",
+  "Skip forward {1} seconds": "{1}秒進む",
+  "Skip backward {1} seconds": "{1}秒戻る"
+}
diff --git a/priv/static/video.js/lang/ko.js b/priv/static/video.js/lang/ko.js
new file mode 100644
index 0000000..efe0567
--- /dev/null
+++ b/priv/static/video.js/lang/ko.js
@@ -0,0 +1,94 @@
+videojs.addLanguage('ko', {
+  "Audio Player": "오디오 플레이어",
+  "Video Player": "비디오 플레이어",
+  "Play": "재생",
+  "Pause": "일시중지",
+  "Replay": "다시 재생",
+  "Current Time": "현재 시간",
+  "Duration": "지정 기간",
+  "Remaining Time": "남은 시간",
+  "Stream Type": "스트리밍 유형",
+  "LIVE": "라이브",
+  "Seek to live, currently behind live": "Seek to Live, 현재 생중계보다 뒤처짐",
+  "Seek to live, currently playing live": "Seek to Live, 현재 생중계 스트리밍 중",
+  "Loaded": "로드됨",
+  "Progress": "진행",
+  "Progress Bar": "진행 표시줄",
+  "progress bar timing: currentTime={1} duration={2}": "{2} 중 {1}",
+  "Fullscreen": "전체 화면",
+  "Exit Fullscreen": "전체 화면 해제",
+  "Mute": "음소거",
+  "Unmute": "소리 활성화하기",
+  "Playback Rate": "재생 속도",
+  "Subtitles": "서브타이틀",
+  "subtitles off": "서브타이틀 끄기",
+  "Captions": "자막",
+  "captions off": "자막 끄기",
+  "Chapters": "챕터",
+  "Descriptions": "제품 설명",
+  "descriptions off": "제품 설명 끄기",
+  "Audio Track": "오디오 트랙",
+  "Volume Level": "볼륨 레벨",
+  "You aborted the media playback": "비디오 재생을 취소했습니다.",
+  "A network error caused the media download to fail part-way.": "네트워크 오류로 인하여 비디오 일부를 다운로드하지 못 했습니다.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "비디오를 로드할 수 없습니다. 서버 혹은 네트워크 오류 때문이거나 지원되지 않는 형식 때문일 수 있습니다.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "비디오 재생이 취소됐습니다. 비디오가 손상되었거나 비디오가 사용하는 기능을 브라우저에서 지원하지 않는 것 같습니다.",
+  "No compatible source was found for this media.": "비디오에 호환되지 않는 소스가 있습니다.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "미디어는 암호화되어 있으며 이를 해독할 키를 갖고 있지 않습니다.",
+  "Play Video": "영상 재생",
+  "Close": "닫기",
+  "Close Modal Dialog": "대화 상자 닫기",
+  "Modal Window": "모달 창",
+  "This is a modal window": "모달 창입니다",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "이 모달은 Esc 키를 누르거나 닫기 버튼을 활성화하여 닫을 수 있습니다.",
+  ", opens captions settings dialog": ", 캡션 설정 대화 상자가 열립니다",
+  ", opens subtitles settings dialog": ", 자막 설정 대화 상자가 열립니다",
+  ", opens descriptions settings dialog": ", 설명 설정 대화 상자가 열립니다",
+  ", selected": ", 선택됨",
+  "captions settings": "캡션 설정",
+  "subtitles settings": "자막 설정",
+  "descriptions settings": "설명 설정",
+  "Text": "텍스트",
+  "White": "화이트",
+  "Black": "블랙",
+  "Red": "레드",
+  "Green": "그린",
+  "Blue": "블루",
+  "Yellow": "옐로우",
+  "Magenta": "마젠타",
+  "Cyan": "씨엉",
+  "Background": "배경",
+  "Window": "창",
+  "Transparent": "투명",
+  "Semi-Transparent": "반투명",
+  "Opaque": "불투명",
+  "Font Size": "폰트 크기",
+  "Text Edge Style": "텍스트 가장자리 스타일",
+  "None": "없음",
+  "Raised": "글자 위치 올림",
+  "Depressed": "글자 위치 내림",
+  "Uniform": "균일",
+  "Drop shadow": "그림자 효과 넣기",
+  "Font Family": "폰트 모음",
+  "Proportional Sans-Serif": "비례 산세리프체",
+  "Monospace Sans-Serif": "고정폭 산세리프체",
+  "Proportional Serif": "비례 세리프체",
+  "Monospace Serif": "고정폭 세리프체",
+  "Casual": "캐주얼",
+  "Script": "스크립트",
+  "Small Caps": "소문자",
+  "Reset": "리셋",
+  "restore all settings to the default values": "모든 설정을 기본값으로 복원",
+  "Done": "완료",
+  "Caption Settings Dialog": "캡션 설정 대화 상자",
+  "Beginning of dialog window. Escape will cancel and close the window.": "대화창 시작. Esc 키를 누르면 취소되고 창이 닫힙니다.",
+  "End of dialog window.": "대화창 종료",
+  "{1} is loading.": "{1}이(가) 로딩 중입니다.",
+  "Exit Picture-in-Picture": "Picture-in-Picture 종료",
+  "Picture-in-Picture": "Picture-in-Picture",
+  "No content": "콘텐츠 없음",
+  "Color": "색상",
+  "Opacity": "투명도",
+  "Text Background": "텍스트 배경",
+  "Caption Area Background": "자막 배경"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/ko.json b/priv/static/video.js/lang/ko.json
new file mode 100644
index 0000000..d7700b4
--- /dev/null
+++ b/priv/static/video.js/lang/ko.json
@@ -0,0 +1,94 @@
+{
+  "Audio Player": "오디오 플레이어",
+  "Video Player": "비디오 플레이어",
+  "Play": "재생",
+  "Pause": "일시중지",
+  "Replay": "다시 재생",
+  "Current Time": "현재 시간",
+  "Duration": "지정 기간",
+  "Remaining Time": "남은 시간",
+  "Stream Type": "스트리밍 유형",
+  "LIVE": "라이브",
+  "Seek to live, currently behind live": "Seek to Live, 현재 생중계보다 뒤처짐",
+  "Seek to live, currently playing live": "Seek to Live, 현재 생중계 스트리밍 중",
+  "Loaded": "로드됨",
+  "Progress": "진행",
+  "Progress Bar": "진행 표시줄",
+  "progress bar timing: currentTime={1} duration={2}": "{2} 중 {1}",
+  "Fullscreen": "전체 화면",
+  "Exit Fullscreen": "전체 화면 해제",
+  "Mute": "음소거",
+  "Unmute": "소리 활성화하기",
+  "Playback Rate": "재생 속도",
+  "Subtitles": "서브타이틀",
+  "subtitles off": "서브타이틀 끄기",
+  "Captions": "자막",
+  "captions off": "자막 끄기",
+  "Chapters": "챕터",
+  "Descriptions": "제품 설명",
+  "descriptions off": "제품 설명 끄기",
+  "Audio Track": "오디오 트랙",
+  "Volume Level": "볼륨 레벨",
+  "You aborted the media playback": "비디오 재생을 취소했습니다.",
+  "A network error caused the media download to fail part-way.": "네트워크 오류로 인하여 비디오 일부를 다운로드하지 못 했습니다.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "비디오를 로드할 수 없습니다. 서버 혹은 네트워크 오류 때문이거나 지원되지 않는 형식 때문일 수 있습니다.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "비디오 재생이 취소됐습니다. 비디오가 손상되었거나 비디오가 사용하는 기능을 브라우저에서 지원하지 않는 것 같습니다.",
+  "No compatible source was found for this media.": "비디오에 호환되지 않는 소스가 있습니다.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "미디어는 암호화되어 있으며 이를 해독할 키를 갖고 있지 않습니다.",
+  "Play Video": "영상 재생",
+  "Close": "닫기",
+  "Close Modal Dialog": "대화 상자 닫기",
+  "Modal Window": "모달 창",
+  "This is a modal window": "모달 창입니다",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "이 모달은 Esc 키를 누르거나 닫기 버튼을 활성화하여 닫을 수 있습니다.",
+  ", opens captions settings dialog": ", 캡션 설정 대화 상자가 열립니다",
+  ", opens subtitles settings dialog": ", 자막 설정 대화 상자가 열립니다",
+  ", opens descriptions settings dialog": ", 설명 설정 대화 상자가 열립니다",
+  ", selected": ", 선택됨",
+  "captions settings": "캡션 설정",
+  "subtitles settings": "자막 설정",
+  "descriptions settings": "설명 설정",
+  "Text": "텍스트",
+  "White": "화이트",
+  "Black": "블랙",
+  "Red": "레드",
+  "Green": "그린",
+  "Blue": "블루",
+  "Yellow": "옐로우",
+  "Magenta": "마젠타",
+  "Cyan": "씨엉",
+  "Background": "배경",
+  "Window": "창",
+  "Transparent": "투명",
+  "Semi-Transparent": "반투명",
+  "Opaque": "불투명",
+  "Font Size": "폰트 크기",
+  "Text Edge Style": "텍스트 가장자리 스타일",
+  "None": "없음",
+  "Raised": "글자 위치 올림",
+  "Depressed": "글자 위치 내림",
+  "Uniform": "균일",
+  "Drop shadow": "그림자 효과 넣기",
+  "Font Family": "폰트 모음",
+  "Proportional Sans-Serif": "비례 산세리프체",
+  "Monospace Sans-Serif": "고정폭 산세리프체",
+  "Proportional Serif": "비례 세리프체",
+  "Monospace Serif": "고정폭 세리프체",
+  "Casual": "캐주얼",
+  "Script": "스크립트",
+  "Small Caps": "소문자",
+  "Reset": "리셋",
+  "restore all settings to the default values": "모든 설정을 기본값으로 복원",
+  "Done": "완료",
+  "Caption Settings Dialog": "캡션 설정 대화 상자",
+  "Beginning of dialog window. Escape will cancel and close the window.": "대화창 시작. Esc 키를 누르면 취소되고 창이 닫힙니다.",
+  "End of dialog window.": "대화창 종료",
+  "{1} is loading.": "{1}이(가) 로딩 중입니다.",
+  "Exit Picture-in-Picture": "Picture-in-Picture 종료",
+  "Picture-in-Picture": "Picture-in-Picture",
+  "No content": "콘텐츠 없음",
+  "Color": "색상",
+  "Opacity": "투명도",
+  "Text Background": "텍스트 배경",
+  "Caption Area Background": "자막 배경"
+}
diff --git a/priv/static/video.js/lang/lv.js b/priv/static/video.js/lang/lv.js
new file mode 100644
index 0000000..1cf82ab
--- /dev/null
+++ b/priv/static/video.js/lang/lv.js
@@ -0,0 +1,91 @@
+videojs.addLanguage('lv', {
+  "Audio Player": "Audio atskaņotājs",
+  "Video Player": "Video atskaņotājs",
+  "Play": "Atskaņot",
+  "Pause": "Pauzēt",
+  "Replay": "Atkārtot",
+  "Current Time": "Esošais laiks",
+  "Duration": "Ilgums",
+  "Remaining Time": "Atlikušais laiks",
+  "Stream Type": "Straumes veids",
+  "LIVE": "LIVE",
+  "Seek to live, currently behind live": "Pāriet uz tiešraidi",
+  "Seek to live, currently playing live": "Pāriet uz tiešraidi",
+  "Loaded": "Ielādēts",
+  "Progress": "Progress",
+  "Progress Bar": "Progresa josla",
+  "progress bar timing: currentTime={1} duration={2}": "{1} no {2}",
+  "Fullscreen": "Pilnekrāna režīms",
+  "Exit Fullscreen": "Iziet no pilnekrāna režīma",
+  "Mute": "Izslēgt skaņu",
+  "Unmute": "Ieslēgt skaņu",
+  "Playback Rate": "Atskaņošanas ātrums",
+  "Subtitles": "Subtitri",
+  "subtitles off": "Izslēgt subtitrus",
+  "Captions": "Paraksti",
+  "captions off": "Izslēgt parakstus",
+  "Chapters": "Temati",
+  "Descriptions": "Apraksti",
+  "descriptions off": "Izslēgt aprakstus",
+  "Audio Track": "Audio celiņš",
+  "Volume Level": "Skaļums",
+  "You aborted the media playback": "Atskaņošana atcelta",
+  "A network error caused the media download to fail part-way.": "Tīkla kļūdas dēļ, multivides lejupielāde neizdevās.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Neizdevās ielādēt multividi, iespējams severa, vai tīkla kļūmes dēļ, vai neatbalstīta formāta dēļ.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Atskaņošana tika pārtraukta tīkla kļūmes dēļ vai pārlūkprogrammas iespēju trūkuma dēļ.",
+  "No compatible source was found for this media.": "Netika atrasts atbilstošs multivides avots.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Multividi nevar atskaņot, jo tas ir kriptēts un nav pieejama dekriptēšanas atslēga.",
+  "Play Video": "Atskaņot video",
+  "Close": "Aizvērt",
+  "Close Modal Dialog": "Aizvērt logu",
+  "Modal Window": "Logs",
+  "This is a modal window": "Logs",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Šo logu var aizvērt, nospiežot uz aizvēršanas pogas vai taustiņa ESC.",
+  ", opens captions settings dialog": ", atvērs parakstu logu",
+  ", opens subtitles settings dialog": ", atvērs subtitru logu",
+  ", opens descriptions settings dialog": ", atvērs aprakstu logu",
+  ", selected": ", izvēlēts",
+  "captions settings": "parakstu iestatījumi",
+  "subtitles settings": "subtitru iestatījumi",
+  "descriptions settings": "aprakstu iestatījumi",
+  "Text": "Teksts",
+  "White": "Balts",
+  "Black": "Melns",
+  "Red": "Sarkans",
+  "Green": "Zaļš",
+  "Blue": "Zils",
+  "Yellow": "Dzeltens",
+  "Magenta": "Purpursarkana",
+  "Cyan": "Ciāna",
+  "Background": "Fons",
+  "Window": "Logs",
+  "Transparent": "Caurspīdīgs",
+  "Semi-Transparent": "Daļēji caurspīdīgs",
+  "Opaque": "Necaurspīdīgs",
+  "Font Size": "Šrifta izmērs",
+  "Text Edge Style": "Teksta ēnas stils",
+  "None": "Neviens",
+  "Raised": "Izvirzīts",
+  "Depressed": "Samazināts",
+  "Uniform": "Vienmērīgs",
+  "Drop shadow": "Ēnots",
+  "Font Family": "Šrifts",
+  "Proportional Sans-Serif": "Proportional Sans-Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Proportional Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Casual": "Casual",
+  "Script": "Script",
+  "Small Caps": "Small Caps",
+  "Reset": "Atiestatīt",
+  "restore all settings to the default values": "atiestatīt iestatījumu uz noklusējumu",
+  "Done": "Gatavs",
+  "Caption Settings Dialog": "Parakstu iestatījumi",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Paraksta iestatījumu sākums. Lai aizvērtu, spiediet ESC taustiņu.",
+  "End of dialog window.": "Parakstu iestatījumu loga beigas",
+  "{1} is loading.": "{1} ielādē.",
+  "Exit Picture-in-Picture": "Iziet no Attēls attēlā",
+  "Picture-in-Picture": "Attēls attēlā",
+  "Skip forward {1} seconds": "Pārtīt uz priekšu {1} sekundes",
+  "Skip backward {1} seconds": "Pārtīt atpakaļ {1} sekundes"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/lv.json b/priv/static/video.js/lang/lv.json
new file mode 100644
index 0000000..19f9f68
--- /dev/null
+++ b/priv/static/video.js/lang/lv.json
@@ -0,0 +1,91 @@
+{
+  "Audio Player": "Audio atskaņotājs",
+  "Video Player": "Video atskaņotājs",
+  "Play": "Atskaņot",
+  "Pause": "Pauzēt",
+  "Replay": "Atkārtot",
+  "Current Time": "Esošais laiks",
+  "Duration": "Ilgums",
+  "Remaining Time": "Atlikušais laiks",
+  "Stream Type": "Straumes veids",
+  "LIVE": "LIVE",
+  "Seek to live, currently behind live": "Pāriet uz tiešraidi",
+  "Seek to live, currently playing live": "Pāriet uz tiešraidi",
+  "Loaded": "Ielādēts",
+  "Progress": "Progress",
+  "Progress Bar": "Progresa josla",
+  "progress bar timing: currentTime={1} duration={2}": "{1} no {2}",
+  "Fullscreen": "Pilnekrāna režīms",
+  "Exit Fullscreen": "Iziet no pilnekrāna režīma",
+  "Mute": "Izslēgt skaņu",
+  "Unmute": "Ieslēgt skaņu",
+  "Playback Rate": "Atskaņošanas ātrums",
+  "Subtitles": "Subtitri",
+  "subtitles off": "Izslēgt subtitrus",
+  "Captions": "Paraksti",
+  "captions off": "Izslēgt parakstus",
+  "Chapters": "Temati",
+  "Descriptions": "Apraksti",
+  "descriptions off": "Izslēgt aprakstus",
+  "Audio Track": "Audio celiņš",
+  "Volume Level": "Skaļums",
+  "You aborted the media playback": "Atskaņošana atcelta",
+  "A network error caused the media download to fail part-way.": "Tīkla kļūdas dēļ, multivides lejupielāde neizdevās.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Neizdevās ielādēt multividi, iespējams severa, vai tīkla kļūmes dēļ, vai neatbalstīta formāta dēļ.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Atskaņošana tika pārtraukta tīkla kļūmes dēļ vai pārlūkprogrammas iespēju trūkuma dēļ.",
+  "No compatible source was found for this media.": "Netika atrasts atbilstošs multivides avots.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Multividi nevar atskaņot, jo tas ir kriptēts un nav pieejama dekriptēšanas atslēga.",
+  "Play Video": "Atskaņot video",
+  "Close": "Aizvērt",
+  "Close Modal Dialog": "Aizvērt logu",
+  "Modal Window": "Logs",
+  "This is a modal window": "Logs",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Šo logu var aizvērt, nospiežot uz aizvēršanas pogas vai taustiņa ESC.",
+  ", opens captions settings dialog": ", atvērs parakstu logu",
+  ", opens subtitles settings dialog": ", atvērs subtitru logu",
+  ", opens descriptions settings dialog": ", atvērs aprakstu logu",
+  ", selected": ", izvēlēts",
+  "captions settings": "parakstu iestatījumi",
+  "subtitles settings": "subtitru iestatījumi",
+  "descriptions settings": "aprakstu iestatījumi",
+  "Text": "Teksts",
+  "White": "Balts",
+  "Black": "Melns",
+  "Red": "Sarkans",
+  "Green": "Zaļš",
+  "Blue": "Zils",
+  "Yellow": "Dzeltens",
+  "Magenta": "Purpursarkana",
+  "Cyan": "Ciāna",
+  "Background": "Fons",
+  "Window": "Logs",
+  "Transparent": "Caurspīdīgs",
+  "Semi-Transparent": "Daļēji caurspīdīgs",
+  "Opaque": "Necaurspīdīgs",
+  "Font Size": "Šrifta izmērs",
+  "Text Edge Style": "Teksta ēnas stils",
+  "None": "Neviens",
+  "Raised": "Izvirzīts",
+  "Depressed": "Samazināts",
+  "Uniform": "Vienmērīgs",
+  "Drop shadow": "Ēnots",
+  "Font Family": "Šrifts",
+  "Proportional Sans-Serif": "Proportional Sans-Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Proportional Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Casual": "Casual",
+  "Script": "Script",
+  "Small Caps": "Small Caps",
+  "Reset": "Atiestatīt",
+  "restore all settings to the default values": "atiestatīt iestatījumu uz noklusējumu",
+  "Done": "Gatavs",
+  "Caption Settings Dialog": "Parakstu iestatījumi",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Paraksta iestatījumu sākums. Lai aizvērtu, spiediet ESC taustiņu.",
+  "End of dialog window.": "Parakstu iestatījumu loga beigas",
+  "{1} is loading.": "{1} ielādē.",
+  "Exit Picture-in-Picture": "Iziet no Attēls attēlā",
+  "Picture-in-Picture": "Attēls attēlā",
+  "Skip forward {1} seconds": "Pārtīt uz priekšu {1} sekundes",
+  "Skip backward {1} seconds": "Pārtīt atpakaļ {1} sekundes"
+}
diff --git a/priv/static/video.js/lang/mr.js b/priv/static/video.js/lang/mr.js
new file mode 100644
index 0000000..c1df1af
--- /dev/null
+++ b/priv/static/video.js/lang/mr.js
@@ -0,0 +1,97 @@
+videojs.addLanguage('mr', {
+  "Audio Player": "ध्वनि वादक",
+  "Video Player": "चित्रवाणी वादक",
+  "Play": "वाजवा",
+  "Pause": "थांबा",
+  "Replay": "पुन्हा वाजवा",
+  "Current Time": "वर्तमान वेळ",
+  "Duration": "कालावधी",
+  "Remaining Time": "उर्वरित वेळ",
+  "Stream Type": "प्रवाह प्रकार",
+  "LIVE": "थेट प्रसारण",
+  "Seek to live, currently behind live": "थेट प्रसारणकडे जा, चालू क्षणाला थेट प्रसारण पासुन मागे आहे",
+  "Seek to live, currently playing live": "थेट प्रसारणकडे जा, चालू क्षणाला थेट प्रसारण आहे",
+  "Loaded": "सज्ज",
+  "Progress": "प्रगती",
+  "Progress Bar": "प्रगती पट्टा",
+  "progress bar timing: currentTime={1} duration={2}": "{2} पैकी {1}",
+  "Fullscreen": "संपूर्ण पडदा",
+  "Exit Fullscreen": "संपूर्ण पडद्यातून बाहेर पडा",
+  "Mute": "मुक",
+  "Unmute": "अमूक",
+  "Playback Rate": "प्लेबॅक दर",
+  "Subtitles": "उपशीर्षके",
+  "subtitles off": "उपशीर्षके बंद",
+  "Captions": "मथळे",
+  "captions off": "मथळे बंद",
+  "Chapters": "अध्याय",
+  "Descriptions": "वर्णने",
+  "descriptions off": "वर्णने बंद",
+  "Audio Track": "ध्वनि मार्ग",
+  "Volume Level": "आवाज पातळी",
+  "You aborted the media playback": "तुम्ही मीडिया प्लेबॅक रद्द केला",
+  "A network error caused the media download to fail part-way.": "नेटवर्क त्रुटीमुळे मीडिया डाउनलोड अर्ध्यात अयशस्वी झाला.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "मीडिया लोड करता आला नाही, एकतर सर्व्हर किंवा नेटवर्क अयशस्वी झाल्यामुळे किंवा फॉरमॅट समर्थित नसल्यामुळे.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "मीडिया प्लेबॅक भ्रष्टाचाराच्या समस्येमुळे किंवा मीडियाने वापरलेल्या वैशिष्ट्यांमुळे तुमचा ब्राउझर सपोर्ट करत नसल्यामुळे रद्द करण्यात आला.",
+  "No compatible source was found for this media.": "या मीडियासाठी कोणताही सुसंगत स्रोत सापडला नाही.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "मीडिया एन्क्रिप्ट केलेला आहे आणि तो डिक्रिप्ट करण्यासाठी आमच्याकडे कळा नाहीत.",
+  "Play Video": "चित्रवाणी वाजवा",
+  "Close": "बंद",
+  "Close Modal Dialog": "संवादी प्रलेखन बंद करा",
+  "Modal Window": "संवादी प्रलेखन",
+  "This is a modal window": "हे एक संवादी प्रलेखन आहे",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "एस्केप कळ दाबून किंवा बंद कळ सक्रिय करून हे संवादी प्रलेखन बंद केले जाऊ शकते.",
+  ", opens captions settings dialog": ", मथळे नियंत्रण संवाद प्रलेखन उघडतो",
+  ", opens subtitles settings dialog": ", उपशीर्षक नियंत्रण संवाद प्रलेखन उघडतो",
+  ", opens descriptions settings dialog": ", वर्णन नियंत्रण संवाद प्रलेखन उघडतो",
+  ", selected": ", निवडले",
+  "captions settings": "मथळे नियंत्रण",
+  "subtitles settings": "उपशीर्षक नियंत्रण",
+  "descriptions settings": "वर्णन नियंत्रण",
+  "Text": "मजकूर",
+  "White": "पांढरा",
+  "Black": "काळा",
+  "Red": "लाल",
+  "Green": "हिरवा",
+  "Blue": "निळा",
+  "Yellow": "पिवळा",
+  "Magenta": "किरमिजी तांबडा",
+  "Cyan": "निळसर",
+  "Background": "पृष्ठभाग",
+  "Window": "चौकट",
+  "Transparent": "पारदर्शक",
+  "Semi-Transparent": "अर्ध-पारदर्शक",
+  "Opaque": "अपारदर्शक",
+  "Font Size": "अक्षराचा आकार",
+  "Text Edge Style": "मजकूर एज शैली",
+  "None": "काहीही नाही",
+  "Raised": "वाढवले",
+  "Depressed": "न दाबलेले",
+  "Uniform": "एकसमान",
+  "Drop shadow": "सावली सोडा",
+  "Font Family": "अक्षर कुटुंब",
+  "Proportional Sans-Serif": "आनुपातिक सॅन्स-सेरिफ",
+  "Monospace Sans-Serif": "मोनोस्पेस सॅन्स-सेरिफ",
+  "Proportional Serif": "आनुपातिक सेरिफ",
+  "Monospace Serif": "मोनोस्पेस सेरिफ",
+  "Casual": "प्रासंगिक",
+  "Script": "लेख",
+  "Small Caps": "लहान अक्षरे",
+  "Reset": "पुन्हा कर",
+  "restore all settings to the default values": "सर्व नियंत्रण डीफॉल्ट मूल्यांवर पुनर्संचयित करा",
+  "Done": "झाले",
+  "Caption Settings Dialog": "मथळा नियंत्रण संवाद प्रलेखन",
+  "Beginning of dialog window. Escape will cancel and close the window.": "डायलॉग विंडोची सुरुवात. Escape रद्द करेल आणि विंडो बंद करेल.",
+  "End of dialog window.": "डायलॉग विंडोचा शेवट.",
+  "{1} is loading.": "{1} लोड होत आहे.",
+  "Exit Picture-in-Picture": "पिक्चर-इन-पिक्चरमधून बाहेर पडा",
+  "Picture-in-Picture": "पिक्चर-इन-पिक्चर",
+  "No content": "सामग्री नाही",
+  "Color": "रंग",
+  "Opacity": "अपारदर्शकता",
+  "Text Background": "मजकूर पार्श्वभूमी",
+  "Caption Area Background": "मथळा क्षेत्र पार्श्वभूमी",
+  "Playing in Picture-in-Picture": "पिक्चर-इन-पिक्चरमध्ये वाजवत आहे",
+  "Skip backward {1} seconds": "मागे जा {1} सेकंद",
+  "Skip forward {1} seconds": "पुढे जा {1} सेकंद"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/mr.json b/priv/static/video.js/lang/mr.json
new file mode 100644
index 0000000..6e0a352
--- /dev/null
+++ b/priv/static/video.js/lang/mr.json
@@ -0,0 +1,98 @@
+{
+    "Audio Player": "ध्वनि वादक",
+    "Video Player": "चित्रवाणी वादक",
+    "Play": "वाजवा",
+    "Pause": "थांबा",
+    "Replay": "पुन्हा वाजवा",
+    "Current Time": "वर्तमान वेळ",
+    "Duration": "कालावधी",
+    "Remaining Time": "उर्वरित वेळ",
+    "Stream Type": "प्रवाह प्रकार",
+    "LIVE": "थेट प्रसारण",
+    "Seek to live, currently behind live": "थेट प्रसारणकडे जा, चालू क्षणाला थेट प्रसारण पासुन मागे आहे",
+    "Seek to live, currently playing live": "थेट प्रसारणकडे जा, चालू क्षणाला थेट प्रसारण आहे",
+    "Loaded": "सज्ज",
+    "Progress": "प्रगती",
+    "Progress Bar": "प्रगती पट्टा",
+    "progress bar timing: currentTime={1} duration={2}": "{2} पैकी {1}",
+    "Fullscreen": "संपूर्ण पडदा",
+    "Exit Fullscreen": "संपूर्ण पडद्यातून बाहेर पडा",
+    "Mute": "मुक",
+    "Unmute": "अमूक",
+    "Playback Rate": "प्लेबॅक दर",
+    "Subtitles": "उपशीर्षके",
+    "subtitles off": "उपशीर्षके बंद",
+    "Captions": "मथळे",
+    "captions off": "मथळे बंद",
+    "Chapters": "अध्याय",
+    "Descriptions": "वर्णने",
+    "descriptions off": "वर्णने बंद",
+    "Audio Track": "ध्वनि मार्ग",
+    "Volume Level": "आवाज पातळी",
+    "You aborted the media playback": "तुम्ही मीडिया प्लेबॅक रद्द केला",
+    "A network error caused the media download to fail part-way.": "नेटवर्क त्रुटीमुळे मीडिया डाउनलोड अर्ध्यात अयशस्वी झाला.",
+    "The media could not be loaded, either because the server or network failed or because the format is not supported.": "मीडिया लोड करता आला नाही, एकतर सर्व्हर किंवा नेटवर्क अयशस्वी झाल्यामुळे किंवा फॉरमॅट समर्थित नसल्यामुळे.",
+    "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "मीडिया प्लेबॅक भ्रष्टाचाराच्या समस्येमुळे किंवा मीडियाने वापरलेल्या वैशिष्ट्यांमुळे तुमचा ब्राउझर सपोर्ट करत नसल्यामुळे रद्द करण्यात आला.",
+    "No compatible source was found for this media.": "या मीडियासाठी कोणताही सुसंगत स्रोत सापडला नाही.",
+    "The media is encrypted and we do not have the keys to decrypt it.": "मीडिया एन्क्रिप्ट केलेला आहे आणि तो डिक्रिप्ट करण्यासाठी आमच्याकडे कळा नाहीत.",
+    "Play Video": "चित्रवाणी वाजवा",
+    "Close": "बंद",
+    "Close Modal Dialog": "संवादी प्रलेखन बंद करा",
+    "Modal Window": "संवादी प्रलेखन",
+    "This is a modal window": "हे एक संवादी प्रलेखन आहे",
+    "This modal can be closed by pressing the Escape key or activating the close button.": "एस्केप कळ दाबून किंवा बंद कळ सक्रिय करून हे संवादी प्रलेखन बंद केले जाऊ शकते.",
+    ", opens captions settings dialog": ", मथळे नियंत्रण संवाद प्रलेखन उघडतो",
+    ", opens subtitles settings dialog": ", उपशीर्षक नियंत्रण संवाद प्रलेखन उघडतो",
+    ", opens descriptions settings dialog": ", वर्णन नियंत्रण संवाद प्रलेखन उघडतो",
+    ", selected": ", निवडले",
+    "captions settings": "मथळे नियंत्रण",
+    "subtitles settings": "उपशीर्षक नियंत्रण",
+    "descriptions settings": "वर्णन नियंत्रण",
+    "Text": "मजकूर",
+    "White": "पांढरा",
+    "Black": "काळा",
+    "Red": "लाल",
+    "Green": "हिरवा",
+    "Blue": "निळा",
+    "Yellow": "पिवळा",
+    "Magenta": "किरमिजी तांबडा",
+    "Cyan": "निळसर",
+    "Background": "पृष्ठभाग",
+    "Window": "चौकट",
+    "Transparent": "पारदर्शक",
+    "Semi-Transparent": "अर्ध-पारदर्शक",
+    "Opaque": "अपारदर्शक",
+    "Font Size": "अक्षराचा आकार",
+    "Text Edge Style": "मजकूर एज शैली",
+    "None": "काहीही नाही",
+    "Raised": "वाढवले",
+    "Depressed": "न दाबलेले",
+    "Uniform": "एकसमान",
+    "Drop shadow": "सावली सोडा",
+    "Font Family": "अक्षर कुटुंब",
+    "Proportional Sans-Serif": "आनुपातिक सॅन्स-सेरिफ",
+    "Monospace Sans-Serif": "मोनोस्पेस सॅन्स-सेरिफ",
+    "Proportional Serif": "आनुपातिक सेरिफ",
+    "Monospace Serif": "मोनोस्पेस सेरिफ",
+    "Casual": "प्रासंगिक",
+    "Script": "लेख",
+    "Small Caps": "लहान अक्षरे",
+    "Reset": "पुन्हा कर",
+    "restore all settings to the default values": "सर्व नियंत्रण डीफॉल्ट मूल्यांवर पुनर्संचयित करा",
+    "Done": "झाले",
+    "Caption Settings Dialog": "मथळा नियंत्रण संवाद प्रलेखन",
+    "Beginning of dialog window. Escape will cancel and close the window.": "डायलॉग विंडोची सुरुवात. Escape रद्द करेल आणि विंडो बंद करेल.",
+    "End of dialog window.": "डायलॉग विंडोचा शेवट.",
+    "{1} is loading.": "{1} लोड होत आहे.",
+    "Exit Picture-in-Picture": "पिक्चर-इन-पिक्चरमधून बाहेर पडा",
+    "Picture-in-Picture": "पिक्चर-इन-पिक्चर",
+    "No content": "सामग्री नाही",
+    "Color": "रंग",
+    "Opacity": "अपारदर्शकता",
+    "Text Background": "मजकूर पार्श्वभूमी",
+    "Caption Area Background": "मथळा क्षेत्र पार्श्वभूमी",
+    "Playing in Picture-in-Picture": "पिक्चर-इन-पिक्चरमध्ये वाजवत आहे",
+    "Skip backward {1} seconds": "मागे जा {1} सेकंद",
+    "Skip forward {1} seconds": "पुढे जा {1} सेकंद"
+  }
+  
\ No newline at end of file
diff --git a/priv/static/video.js/lang/nb.js b/priv/static/video.js/lang/nb.js
new file mode 100644
index 0000000..21fa0d5
--- /dev/null
+++ b/priv/static/video.js/lang/nb.js
@@ -0,0 +1,87 @@
+videojs.addLanguage('nb', {
+  "Audio Player": "Lydspiller",
+  "Video Player": "Videospiller",
+  "Play": "Spill",
+  "Pause": "Pause",
+  "Replay": "Spill om igjen",
+  "Current Time": "Aktuell tid",
+  "Duration": "Varighet",
+  "Remaining Time": "Gjenstående tid",
+  "Stream Type": "Type strøm",
+  "LIVE": "DIREKTE",
+  "Seek to live, currently behind live": "Hopp til live, spiller tidligere i sendingen nå",
+  "Seek to live, currently playing live": "Hopp til live, spiller live nå",
+  "Loaded": "Lastet inn",
+  "Progress": "Framdrift",
+  "Progress Bar": "Framdriftsviser",
+  "progress bar timing: currentTime={1} duration={2}": "{1} av {2}",
+  "Fullscreen": "Fullskjerm",
+  "Exit Fullscreen": "Lukk fullskjerm",
+  "Mute": "Lyd av",
+  "Unmute": "Lyd på",
+  "Playback Rate": "Avspillingshastighet",
+  "Subtitles": "Teksting på",
+  "subtitles off": "Teksting av",
+  "Captions": "Teksting for hørselshemmede på",
+  "captions off": "Teksting for hørselshemmede av",
+  "Chapters": "Kapitler",
+  "Descriptions": "Beskrivelser",
+  "descriptions off": "beskrivelser av",
+  "Audio Track": "Lydspor",
+  "Volume Level": "Volumnivå",
+  "You aborted the media playback": "Du avbrøt avspillingen.",
+  "A network error caused the media download to fail part-way.": "En nettverksfeil avbrøt nedlasting av videoen.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Videoen kunne ikke lastes ned, på grunn av nettverksfeil eller serverfeil, eller fordi formatet ikke er støttet.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Videoavspillingen ble avbrudt på grunn av ødelagte data eller fordi videoen ville gjøre noe som nettleseren din ikke har støtte for.",
+  "No compatible source was found for this media.": "Fant ikke en kompatibel kilde for dette mediainnholdet.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Mediefilen er kryptert og vi mangler nøkler for å dekryptere den.",
+  "Play Video": "Spill av video",
+  "Close": "Lukk",
+  "Close Modal Dialog": "Lukk dialogvinduet",
+  "Modal Window": "Dialogvindu",
+  "This is a modal window": "Dette er et dialogvindu",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Vinduet kan lukkes ved å trykke på Escape-tasten eller lukkeknappen.",
+  ", opens captions settings dialog": ", åpner innstillinger for teksting for hørselshemmede",
+  ", opens subtitles settings dialog": ", åpner innstillinger for teksting",
+  ", opens descriptions settings dialog": ", åpner innstillinger for beskrivelser",
+  ", selected": ", valgt",
+  "captions settings": "innstillinger for teksting",
+  "subtitles settings": "innstillinger for teksting",
+  "descriptions settings": "innstillinger for beskrivelser",
+  "Text": "Tekst",
+  "White": "Hvit",
+  "Black": "Svart",
+  "Red": "Rød",
+  "Green": "Grønn",
+  "Blue": "Blå",
+  "Yellow": "Gul",
+  "Magenta": "Magenta",
+  "Cyan": "Turkis",
+  "Background": "Bakgrunn",
+  "Window": "Vindu",
+  "Transparent": "Gjennomsiktig",
+  "Semi-Transparent": "Delvis gjennomsiktig",
+  "Opaque": "Ugjennomsiktig",
+  "Font Size": "Tekststørrelse",
+  "Text Edge Style": "Tekstkant",
+  "None": "Ingen",
+  "Raised": "Uthevet",
+  "Depressed": "Nedtrykt",
+  "Uniform": "Enkel",
+  "Drop shadow": "Skygge",
+  "Font Family": "Skrifttype",
+  "Proportional Sans-Serif": "Proporsjonal skrift uten seriffer",
+  "Monospace Sans-Serif": "Fastbreddeskrift uten seriffer",
+  "Proportional Serif": "Proporsjonal skrift med seriffer",
+  "Monospace Serif": "Fastbreddeskrift med seriffer",
+  "Casual": "Uformell",
+  "Script": "Skråskrift",
+  "Small Caps": "Kapitéler",
+  "Reset": "Tilbakestill",
+  "restore all settings to the default values": "tilbakestill alle innstillinger til standardverdiene",
+  "Done": "Ferdig",
+  "Caption Settings Dialog": "Innstillingsvindu for teksting for hørselshemmede",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Begynnelse på dialogvindu. Trykk Escape for å avbryte og lukke vinduet.",
+  "End of dialog window.": "Avslutning på dialogvindu.",
+  "{1} is loading.": "{1} laster."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/nb.json b/priv/static/video.js/lang/nb.json
new file mode 100644
index 0000000..12fbe77
--- /dev/null
+++ b/priv/static/video.js/lang/nb.json
@@ -0,0 +1,87 @@
+{
+  "Audio Player": "Lydspiller",
+  "Video Player": "Videospiller",
+  "Play": "Spill",
+  "Pause": "Pause",
+  "Replay": "Spill om igjen",
+  "Current Time": "Aktuell tid",
+  "Duration": "Varighet",
+  "Remaining Time": "Gjenstående tid",
+  "Stream Type": "Type strøm",
+  "LIVE": "DIREKTE",
+  "Seek to live, currently behind live": "Hopp til live, spiller tidligere i sendingen nå",
+  "Seek to live, currently playing live": "Hopp til live, spiller live nå",
+  "Loaded": "Lastet inn",
+  "Progress": "Framdrift",
+  "Progress Bar": "Framdriftsviser",
+  "progress bar timing: currentTime={1} duration={2}": "{1} av {2}",
+  "Fullscreen": "Fullskjerm",
+  "Exit Fullscreen": "Lukk fullskjerm",
+  "Mute": "Lyd av",
+  "Unmute": "Lyd på",
+  "Playback Rate": "Avspillingshastighet",
+  "Subtitles": "Teksting på",
+  "subtitles off": "Teksting av",
+  "Captions": "Teksting for hørselshemmede på",
+  "captions off": "Teksting for hørselshemmede av",
+  "Chapters": "Kapitler",
+  "Descriptions": "Beskrivelser",
+  "descriptions off": "beskrivelser av",
+  "Audio Track": "Lydspor",
+  "Volume Level": "Volumnivå",
+  "You aborted the media playback": "Du avbrøt avspillingen.",
+  "A network error caused the media download to fail part-way.": "En nettverksfeil avbrøt nedlasting av videoen.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Videoen kunne ikke lastes ned, på grunn av nettverksfeil eller serverfeil, eller fordi formatet ikke er støttet.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Videoavspillingen ble avbrudt på grunn av ødelagte data eller fordi videoen ville gjøre noe som nettleseren din ikke har støtte for.",
+  "No compatible source was found for this media.": "Fant ikke en kompatibel kilde for dette mediainnholdet.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Mediefilen er kryptert og vi mangler nøkler for å dekryptere den.",
+  "Play Video": "Spill av video",
+  "Close": "Lukk",
+  "Close Modal Dialog": "Lukk dialogvinduet",
+  "Modal Window": "Dialogvindu",
+  "This is a modal window": "Dette er et dialogvindu",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Vinduet kan lukkes ved å trykke på Escape-tasten eller lukkeknappen.",
+  ", opens captions settings dialog": ", åpner innstillinger for teksting for hørselshemmede",
+  ", opens subtitles settings dialog": ", åpner innstillinger for teksting",
+  ", opens descriptions settings dialog": ", åpner innstillinger for beskrivelser",
+  ", selected": ", valgt",
+  "captions settings": "innstillinger for teksting",
+  "subtitles settings": "innstillinger for teksting",
+  "descriptions settings": "innstillinger for beskrivelser",
+  "Text": "Tekst",
+  "White": "Hvit",
+  "Black": "Svart",
+  "Red": "Rød",
+  "Green": "Grønn",
+  "Blue": "Blå",
+  "Yellow": "Gul",
+  "Magenta": "Magenta",
+  "Cyan": "Turkis",
+  "Background": "Bakgrunn",
+  "Window": "Vindu",
+  "Transparent": "Gjennomsiktig",
+  "Semi-Transparent": "Delvis gjennomsiktig",
+  "Opaque": "Ugjennomsiktig",
+  "Font Size": "Tekststørrelse",
+  "Text Edge Style": "Tekstkant",
+  "None": "Ingen",
+  "Raised": "Uthevet",
+  "Depressed": "Nedtrykt",
+  "Uniform": "Enkel",
+  "Drop shadow": "Skygge",
+  "Font Family": "Skrifttype",
+  "Proportional Sans-Serif": "Proporsjonal skrift uten seriffer",
+  "Monospace Sans-Serif": "Fastbreddeskrift uten seriffer",
+  "Proportional Serif": "Proporsjonal skrift med seriffer",
+  "Monospace Serif": "Fastbreddeskrift med seriffer",
+  "Casual": "Uformell",
+  "Script": "Skråskrift",
+  "Small Caps": "Kapitéler",
+  "Reset": "Tilbakestill",
+  "restore all settings to the default values": "tilbakestill alle innstillinger til standardverdiene",
+  "Done": "Ferdig",
+  "Caption Settings Dialog": "Innstillingsvindu for teksting for hørselshemmede",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Begynnelse på dialogvindu. Trykk Escape for å avbryte og lukke vinduet.",
+  "End of dialog window.": "Avslutning på dialogvindu.",
+  "{1} is loading.": "{1} laster."
+}
diff --git a/priv/static/video.js/lang/nl.js b/priv/static/video.js/lang/nl.js
new file mode 100644
index 0000000..fb7c35b
--- /dev/null
+++ b/priv/static/video.js/lang/nl.js
@@ -0,0 +1,96 @@
+videojs.addLanguage('nl', {
+  "Audio Player": "Audiospeler",
+  "Video Player": "Videospeler",
+  "Play": "Afspelen",
+  "Pause": "Pauzeren",
+  "Replay": "Opnieuw afspelen",
+  "Current Time": "Huidige tijd",
+  "Duration": "Tijdsduur",
+  "Remaining Time": "Resterende tijd",
+  "Stream Type": "Streamtype",
+  "LIVE": "LIVE",
+  "Seek to live, currently behind live": "Zoek naar live, momenteel achter op live",
+  "Seek to live, currently playing live": "Zoek naar live, momenteel live",
+  "Loaded": "Geladen",
+  "Progress": "Voortgang",
+  "Progress Bar": "Voortgangsbalk",
+  "progress bar timing: currentTime={1} duration={2}": "{1} van {2}",
+  "Fullscreen": "Volledig scherm",
+  "Exit Fullscreen": "Volledig scherm uit",
+  "Mute": "Dempen",
+  "Unmute": "Dempen uit",
+  "Playback Rate": "Afspeelsnelheid",
+  "Subtitles": "Ondertiteling",
+  "subtitles off": "ondertiteling uit",
+  "Captions": "Ondertiteling (CC)",
+  "captions off": "ondertiteling (CC) uit",
+  "Chapters": "Hoofdstukken",
+  "Descriptions": "Beschrijvingen",
+  "descriptions off": "beschrijvingen uit",
+  "Audio Track": "Audiospoor",
+  "Volume Level": "Volume",
+  "You aborted the media playback": "U heeft het afspelen van de media afgebroken",
+  "A network error caused the media download to fail part-way.": "Een netwerkfout heeft ervoor gezorgd dat het downloaden van de media is mislukt.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "De media kon niet worden geladen, doordat de server of het netwerk faalde of doordat het formaat niet wordt ondersteund.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Het afspelen van de media werd afgebroken vanwege een corruptieprobleem of omdat de uw browser de gebruikte mediafuncties niet ondersteund.",
+  "No compatible source was found for this media.": "Er is geen geschikte bron gevonden voor dit medium.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "De media is gecodeerd en we hebben niet de sleutels om het te decoderen.",
+  "Play Video": "Video afspelen",
+  "Close": "Sluiten",
+  "Close Modal Dialog": "Extra venster sluiten",
+  "Modal Window": "Extra venster",
+  "This is a modal window": "Dit is een extra venster",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Dit venster kan worden gesloten door op de Escape-toets te drukken of door de sluit-knop te activeren.",
+  ", opens captions settings dialog": ", opent instellingen venster voor ondertitelingen",
+  ", opens subtitles settings dialog": ", opent instellingen venster voor ondertitelingen",
+  ", opens descriptions settings dialog": ", opent instellingen venster voor beschrijvingen",
+  ", selected": ", geselecteerd",
+  "captions settings": "ondertiteling instellingen",
+  "subtitles settings": "ondertiteling instellingen",
+  "descriptions settings": "beschrijvingen instellingen",
+  "Text": "Tekst",
+  "White": "Wit",
+  "Black": "Zwart",
+  "Red": "Rood",
+  "Green": "Groen",
+  "Blue": "Blauw",
+  "Yellow": "Geel",
+  "Magenta": "Magenta",
+  "Cyan": "Cyaan",
+  "Background": "Achtergrond",
+  "Window": "Venster",
+  "Transparent": "Transparant",
+  "Semi-Transparent": "Semi-transparant",
+  "Opaque": "Ondoorzichtig",
+  "Font Size": "Lettergrootte",
+  "Text Edge Style": "Stijl tekstrand",
+  "None": "Geen",
+  "Raised": "Verhoogd",
+  "Depressed": "Ingedrukt",
+  "Uniform": "Uniform",
+  "Drop shadow": "Schaduw",
+  "Font Family": "Lettertype",
+  "Proportional Sans-Serif": "Proportioneel sans-serif",
+  "Monospace Sans-Serif": "Monospace sans-serif",
+  "Proportional Serif": "Proportioneel serif",
+  "Monospace Serif": "Monospace serif",
+  "Casual": "Informeel",
+  "Script": "Script",
+  "Small Caps": "Kleine Hoofdletters",
+  "Reset": "Herstellen",
+  "restore all settings to the default values": "alle instellingen herstellen naar de standaardwaarden",
+  "Done": "Gereed",
+  "Caption Settings Dialog": "Venster voor bijschriften-instellingen",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Begin van dialoogvenster. Escape zal annuleren en het venster sluiten.",
+  "End of dialog window.": "Einde van dialoogvenster.",
+  "{1} is loading.": "{1} wordt geladen.",
+  "Exit Picture-in-Picture": "Picture-in-Picture uit",
+  "Picture-in-Picture": "Picture-in-Picture",
+  "No content": "Geen inhoud",
+  "Color": "Kleur",
+  "Opacity": "Transparantie",
+  "Text Background": "Tekst Achtergrond",
+  "Caption Area Background": "Achtergrond voor Ondertiteling",
+  "Skip forward {1} seconds": "{1} seconden vooruit",
+  "Skip backward {1} seconds": "{1} seconden terug"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/nl.json b/priv/static/video.js/lang/nl.json
new file mode 100644
index 0000000..92c9aec
--- /dev/null
+++ b/priv/static/video.js/lang/nl.json
@@ -0,0 +1,96 @@
+{
+  "Audio Player": "Audiospeler",
+  "Video Player": "Videospeler",
+  "Play": "Afspelen",
+  "Pause": "Pauzeren",
+  "Replay": "Opnieuw afspelen",
+  "Current Time": "Huidige tijd",
+  "Duration": "Tijdsduur",
+  "Remaining Time": "Resterende tijd",
+  "Stream Type": "Streamtype",
+  "LIVE": "LIVE",
+  "Seek to live, currently behind live": "Zoek naar live, momenteel achter op live",
+  "Seek to live, currently playing live": "Zoek naar live, momenteel live",
+  "Loaded": "Geladen",
+  "Progress": "Voortgang",
+  "Progress Bar": "Voortgangsbalk",
+  "progress bar timing: currentTime={1} duration={2}": "{1} van {2}",
+  "Fullscreen": "Volledig scherm",
+  "Exit Fullscreen": "Volledig scherm uit",
+  "Mute": "Dempen",
+  "Unmute": "Dempen uit",
+  "Playback Rate": "Afspeelsnelheid",
+  "Subtitles": "Ondertiteling",
+  "subtitles off": "ondertiteling uit",
+  "Captions": "Ondertiteling (CC)",
+  "captions off": "ondertiteling (CC) uit",
+  "Chapters": "Hoofdstukken",
+  "Descriptions": "Beschrijvingen",
+  "descriptions off": "beschrijvingen uit",
+  "Audio Track": "Audiospoor",
+  "Volume Level": "Volume",
+  "You aborted the media playback": "U heeft het afspelen van de media afgebroken",
+  "A network error caused the media download to fail part-way.": "Een netwerkfout heeft ervoor gezorgd dat het downloaden van de media is mislukt.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "De media kon niet worden geladen, doordat de server of het netwerk faalde of doordat het formaat niet wordt ondersteund.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Het afspelen van de media werd afgebroken vanwege een corruptieprobleem of omdat de uw browser de gebruikte mediafuncties niet ondersteund.",
+  "No compatible source was found for this media.": "Er is geen geschikte bron gevonden voor dit medium.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "De media is gecodeerd en we hebben niet de sleutels om het te decoderen.",
+  "Play Video": "Video afspelen",
+  "Close": "Sluiten",
+  "Close Modal Dialog": "Extra venster sluiten",
+  "Modal Window": "Extra venster",
+  "This is a modal window": "Dit is een extra venster",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Dit venster kan worden gesloten door op de Escape-toets te drukken of door de sluit-knop te activeren.",
+  ", opens captions settings dialog": ", opent instellingen venster voor ondertitelingen",
+  ", opens subtitles settings dialog": ", opent instellingen venster voor ondertitelingen",
+  ", opens descriptions settings dialog": ", opent instellingen venster voor beschrijvingen",
+  ", selected": ", geselecteerd",
+  "captions settings": "ondertiteling instellingen",
+  "subtitles settings": "ondertiteling instellingen",
+  "descriptions settings": "beschrijvingen instellingen",
+  "Text": "Tekst",
+  "White": "Wit",
+  "Black": "Zwart",
+  "Red": "Rood",
+  "Green": "Groen",
+  "Blue": "Blauw",
+  "Yellow": "Geel",
+  "Magenta": "Magenta",
+  "Cyan": "Cyaan",
+  "Background": "Achtergrond",
+  "Window": "Venster",
+  "Transparent": "Transparant",
+  "Semi-Transparent": "Semi-transparant",
+  "Opaque": "Ondoorzichtig",
+  "Font Size": "Lettergrootte",
+  "Text Edge Style": "Stijl tekstrand",
+  "None": "Geen",
+  "Raised": "Verhoogd",
+  "Depressed": "Ingedrukt",
+  "Uniform": "Uniform",
+  "Drop shadow": "Schaduw",
+  "Font Family": "Lettertype",
+  "Proportional Sans-Serif": "Proportioneel sans-serif",
+  "Monospace Sans-Serif": "Monospace sans-serif",
+  "Proportional Serif": "Proportioneel serif",
+  "Monospace Serif": "Monospace serif",
+  "Casual": "Informeel",
+  "Script": "Script",
+  "Small Caps": "Kleine Hoofdletters",
+  "Reset": "Herstellen",
+  "restore all settings to the default values": "alle instellingen herstellen naar de standaardwaarden",
+  "Done": "Gereed",
+  "Caption Settings Dialog": "Venster voor bijschriften-instellingen",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Begin van dialoogvenster. Escape zal annuleren en het venster sluiten.",
+  "End of dialog window.": "Einde van dialoogvenster.",
+  "{1} is loading.": "{1} wordt geladen.",
+  "Exit Picture-in-Picture": "Picture-in-Picture uit",
+  "Picture-in-Picture": "Picture-in-Picture",
+  "No content": "Geen inhoud",
+  "Color": "Kleur",
+  "Opacity": "Transparantie",
+  "Text Background": "Tekst Achtergrond",
+  "Caption Area Background": "Achtergrond voor Ondertiteling",
+  "Skip forward {1} seconds": "{1} seconden vooruit",
+  "Skip backward {1} seconds": "{1} seconden terug"
+}
diff --git a/priv/static/video.js/lang/nn.js b/priv/static/video.js/lang/nn.js
new file mode 100644
index 0000000..ed5b17e
--- /dev/null
+++ b/priv/static/video.js/lang/nn.js
@@ -0,0 +1,87 @@
+videojs.addLanguage('nn', {
+  "Audio Player": "Lydspelar",
+  "Video Player": "Videospelar",
+  "Play": "Spel",
+  "Pause": "Pause",
+  "Replay": "Spel om att",
+  "Current Time": "Aktuell tid",
+  "Duration": "Varigheit",
+  "Remaining Time": "Tid attende",
+  "Stream Type": "Type straum",
+  "LIVE": "DIREKTE",
+  "Seek to live, currently behind live": "Hopp til live, spelar tidlegare i sendinga no",
+  "Seek to live, currently playing live": "Hopp til live, speler live no",
+  "Loaded": "Lasta inn",
+  "Progress": "Framdrift",
+  "Progress Bar": "Framdriftsvisar",
+  "progress bar timing: currentTime={1} duration={2}": "{1} av {2}",
+  "Fullscreen": "Fullskjerm",
+  "Exit Fullscreen": "Stenga fullskjerm",
+  "Mute": "Lyd av",
+  "Unmute": "Lyd på",
+  "Playback Rate": "Avspelingshastigheit",
+  "Subtitles": "Teksting på",
+  "subtitles off": "Teksting av",
+  "Captions": "Teksting for høyrselshemma på",
+  "captions off": "Teksting for høyrselshemma av",
+  "Chapters": "Kapitel",
+  "Descriptions": "Beskrivingar",
+  "descriptions off": "beskrivingar av",
+  "Audio Track": "Lydspor",
+  "Volume Level": "Volumnivå",
+  "You aborted the media playback": "Du avbraut avspelinga.",
+  "A network error caused the media download to fail part-way.": "Ein nettverksfeil avbraut nedlasting av videoen.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Videoen kunne ikkje lastas ned, på grunn av ein nettverksfeil eller serverfeil, eller av di formatet ikkje er stoda.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Videoavspelinga blei broten på grunn av øydelagde data eller av di videoen ville gjera noe som nettlesaren din ikkje stodar.",
+  "No compatible source was found for this media.": "Fant ikke en kompatibel kilde for dette mediainnholdet.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Mediefila er kryptert og vi manglar nyklar for å dekryptere ho.",
+  "Play Video": "Spel av video",
+  "Close": "Lukk",
+  "Close Modal Dialog": "Lukk dialogvindauge",
+  "Modal Window": "Dialogvindauge",
+  "This is a modal window": "Dette er eit dialogvindauge",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Vindauget kan lukkast ved å trykke på Escape-tasten eller lukkeknappen.",
+  ", opens captions settings dialog": ", opnar innstillingar for teksting for høyrselshemma",
+  ", opens subtitles settings dialog": ", opnar innstillingar for teksting",
+  ", opens descriptions settings dialog": ", opnar innstillingar for beskrivingar",
+  ", selected": ", vald",
+  "captions settings": "innstillingar for teksting",
+  "subtitles settings": "innstillingar for teksting",
+  "descriptions settings": "innstillingar for skildringar",
+  "Text": "Tekst",
+  "White": "Kvit",
+  "Black": "Svart",
+  "Red": "Raud",
+  "Green": "Grøn",
+  "Blue": "Blå",
+  "Yellow": "Gul",
+  "Magenta": "Magenta",
+  "Cyan": "Turkis",
+  "Background": "Bakgrunn",
+  "Window": "Vindauge",
+  "Transparent": "Gjennomsiktig",
+  "Semi-Transparent": "Delvis gjennomsiktig",
+  "Opaque": "Ugjennomsiktig",
+  "Font Size": "Tekststorleik",
+  "Text Edge Style": "Tekstkant",
+  "None": "Ingen",
+  "Raised": "Utheva",
+  "Depressed": "Nedtrykt",
+  "Uniform": "Enkel",
+  "Drop shadow": "Skugge",
+  "Font Family": "Skrifttype",
+  "Proportional Sans-Serif": "Proporsjonal skrift utan seriffar",
+  "Monospace Sans-Serif": "Fastbreddeskrift utan seriffar",
+  "Proportional Serif": "Proporsjonal skrift med seriffar",
+  "Monospace Serif": "Fastbreddeskrift med seriffar",
+  "Casual": "Uformell",
+  "Script": "Skråskrift",
+  "Small Caps": "Kapitéler",
+  "Reset": "Tilbakestell",
+  "restore all settings to the default values": "tilbakestell alle innstillingar til standardverdiane",
+  "Done": "Ferdig",
+  "Caption Settings Dialog": "Innstillingsvindauge for teksting for høyrselshemma",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Byrjing på dialogvindauge. Trykk Escape for å avbryte og lukke vindauget.",
+  "End of dialog window.": "Avslutning på dialogvindauge.",
+  "{1} is loading.": "{1} lastar."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/nn.json b/priv/static/video.js/lang/nn.json
new file mode 100644
index 0000000..e22711f
--- /dev/null
+++ b/priv/static/video.js/lang/nn.json
@@ -0,0 +1,87 @@
+{
+  "Audio Player": "Lydspelar",
+  "Video Player": "Videospelar",
+  "Play": "Spel",
+  "Pause": "Pause",
+  "Replay": "Spel om att",
+  "Current Time": "Aktuell tid",
+  "Duration": "Varigheit",
+  "Remaining Time": "Tid attende",
+  "Stream Type": "Type straum",
+  "LIVE": "DIREKTE",
+  "Seek to live, currently behind live": "Hopp til live, spelar tidlegare i sendinga no",
+  "Seek to live, currently playing live": "Hopp til live, speler live no",
+  "Loaded": "Lasta inn",
+  "Progress": "Framdrift",
+  "Progress Bar": "Framdriftsvisar",
+  "progress bar timing: currentTime={1} duration={2}": "{1} av {2}",
+  "Fullscreen": "Fullskjerm",
+  "Exit Fullscreen": "Stenga fullskjerm",
+  "Mute": "Lyd av",
+  "Unmute": "Lyd på",
+  "Playback Rate": "Avspelingshastigheit",
+  "Subtitles": "Teksting på",
+  "subtitles off": "Teksting av",
+  "Captions": "Teksting for høyrselshemma på",
+  "captions off": "Teksting for høyrselshemma av",
+  "Chapters": "Kapitel",
+  "Descriptions": "Beskrivingar",
+  "descriptions off": "beskrivingar av",
+  "Audio Track": "Lydspor",
+  "Volume Level": "Volumnivå",
+  "You aborted the media playback": "Du avbraut avspelinga.",
+  "A network error caused the media download to fail part-way.": "Ein nettverksfeil avbraut nedlasting av videoen.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Videoen kunne ikkje lastas ned, på grunn av ein nettverksfeil eller serverfeil, eller av di formatet ikkje er stoda.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Videoavspelinga blei broten på grunn av øydelagde data eller av di videoen ville gjera noe som nettlesaren din ikkje stodar.",
+  "No compatible source was found for this media.": "Fant ikke en kompatibel kilde for dette mediainnholdet.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Mediefila er kryptert og vi manglar nyklar for å dekryptere ho.",
+  "Play Video": "Spel av video",
+  "Close": "Lukk",
+  "Close Modal Dialog": "Lukk dialogvindauge",
+  "Modal Window": "Dialogvindauge",
+  "This is a modal window": "Dette er eit dialogvindauge",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Vindauget kan lukkast ved å trykke på Escape-tasten eller lukkeknappen.",
+  ", opens captions settings dialog": ", opnar innstillingar for teksting for høyrselshemma",
+  ", opens subtitles settings dialog": ", opnar innstillingar for teksting",
+  ", opens descriptions settings dialog": ", opnar innstillingar for beskrivingar",
+  ", selected": ", vald",
+  "captions settings": "innstillingar for teksting",
+  "subtitles settings": "innstillingar for teksting",
+  "descriptions settings": "innstillingar for skildringar",
+  "Text": "Tekst",
+  "White": "Kvit",
+  "Black": "Svart",
+  "Red": "Raud",
+  "Green": "Grøn",
+  "Blue": "Blå",
+  "Yellow": "Gul",
+  "Magenta": "Magenta",
+  "Cyan": "Turkis",
+  "Background": "Bakgrunn",
+  "Window": "Vindauge",
+  "Transparent": "Gjennomsiktig",
+  "Semi-Transparent": "Delvis gjennomsiktig",
+  "Opaque": "Ugjennomsiktig",
+  "Font Size": "Tekststorleik",
+  "Text Edge Style": "Tekstkant",
+  "None": "Ingen",
+  "Raised": "Utheva",
+  "Depressed": "Nedtrykt",
+  "Uniform": "Enkel",
+  "Drop shadow": "Skugge",
+  "Font Family": "Skrifttype",
+  "Proportional Sans-Serif": "Proporsjonal skrift utan seriffar",
+  "Monospace Sans-Serif": "Fastbreddeskrift utan seriffar",
+  "Proportional Serif": "Proporsjonal skrift med seriffar",
+  "Monospace Serif": "Fastbreddeskrift med seriffar",
+  "Casual": "Uformell",
+  "Script": "Skråskrift",
+  "Small Caps": "Kapitéler",
+  "Reset": "Tilbakestell",
+  "restore all settings to the default values": "tilbakestell alle innstillingar til standardverdiane",
+  "Done": "Ferdig",
+  "Caption Settings Dialog": "Innstillingsvindauge for teksting for høyrselshemma",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Byrjing på dialogvindauge. Trykk Escape for å avbryte og lukke vindauget.",
+  "End of dialog window.": "Avslutning på dialogvindauge.",
+  "{1} is loading.": "{1} lastar."
+}
diff --git a/priv/static/video.js/lang/np.js b/priv/static/video.js/lang/np.js
new file mode 100644
index 0000000..a209842
--- /dev/null
+++ b/priv/static/video.js/lang/np.js
@@ -0,0 +1,89 @@
+videojs.addLanguage('np', {
+  "Audio Player": "ऑडियो प्लेयर",
+  "Video Player": "भिडियो प्लेयर",
+  "Play": "चलाउनु",
+  "Pause": "रोक्नु",
+  "Replay": "फेरि चलाउनु",
+  "Current Time": "हालको समय",
+  "Duration": "अवधि",
+  "Remaining Time": "बाँकी समय",
+  "Stream Type": "स्ट्रीम प्रकार",
+  "LIVE": "लाइव",
+  "Seek to live, currently behind live": "लाइभ भागमा सार्नुहोस्, हालको अवस्थामा यो लाइभबाट पछाडी छ",
+  "Seek to live, currently playing live": "लाइभ भागमा सार्नुहोस्, हालको अवस्थामा यो लाइभमा छ",
+  "Loaded": "लोड भएको छ",
+  "Progress": "प्रगति",
+  "Progress Bar": "प्रोगेस बार",
+  "progress bar timing: currentTime={1} duration={2}": "प्रगति बार को समय: {2} मध्ये {1}",
+  "Fullscreen": "फ़ुल स्क्रीन",
+  "Exit Fullscreen": "फ़ुल स्क्रीनबाट बाहिर निस्कनुहोस्",
+  "Mute": "म्यूट गर्नुहोस्",
+  "Unmute": "अनम्यूट गर्नुहोस्",
+  "Playback Rate": "प्लेब्याक दर",
+  "Subtitles": "उपशीर्षक",
+  "subtitles off": "उपशीर्षक बंद",
+  "Captions": "कैप्शन",
+  "captions off": "कैप्शन बंद",
+  "Chapters": "अध्याय",
+  "Descriptions": "विवरण",
+  "descriptions off": "विवरण बंद",
+  "Audio Track": "ऑडियो ट्रैक",
+  "Volume Level": "वॉल्यूम स्तर",
+  "You aborted the media playback": "तपाईंले मिडिया प्लेब्याक रद्द गर्नुभयो",
+  "A network error caused the media download to fail part-way.": "नेटवर्क त्रुटिले मिडिया डाउनलोडलाई आधा मार्गमा असफल गर्यो।",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "मिडिया लोड गर्न सकिएन, या तो नेटवर्क विफल भयो वा त्यसको प्रारूप समर्थित भएन।",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "मिडिया प्लेबैक अवरुद्ध गरियो, कारण यो हुन सक्छ कि मिडिया खराब भयो वा मिडिया तपाईंको ब्राउजरद्वारा समर्थित भएन।",
+  "No compatible source was found for this media.": "यस मिडियाका लागि कुनै समर्थित स्रोत फेला परेन।",
+  "The media is encrypted and we do not have the keys to decrypt it.": "मिडिया एन्क्रिप्ट गरिएको छ र हामीले त्यसो डिक्रिप्ट गर्ने कुनै किसिमका कुञ्जीहरू छैनन्।",
+  "Play Video": "भिडियो चलाउनुहोस्",
+  "Close": "बन्द गर्नुहोस्",
+  "Close Modal Dialog": "मोडल डायलग बन्द गर्नुहोस्",
+  "Modal Window": "मोडल विंडो",
+  "This is a modal window": "यो एक मोडल विन्डो हो।",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "यस मोडललाई बन्द गर्न तपाईंले Escape की बटन थिच्न सक्नुहुन्छ वा बन्द गर्ने बटन थिच्न सक्नुहुन्छ।",
+  ", opens captions settings dialog": ", कैप्शन सेटिंग डायलॉग खोलिनेछ",
+  ", opens subtitles settings dialog": ", उपशीर्षक सेटिंग्स संवाद खोलिनेछ",
+  ", opens descriptions settings dialog": ", विवरण सेटिंग संवाद खोलिनेछ",
+  ", selected": ", चयन गरियो",
+  "captions settings": "कैप्शन सेटिंग",
+  "subtitles settings": "उपशीर्षक सेटिंग",
+  "descriptions settings": "विवरण सेटिंग",
+  "Text": "टेक्स्ट",
+  "White": "सेतो",
+  "Black": "कालो",
+  "Red": "रातो",
+  "Green": "हरियो",
+  "Blue": "नीलो",
+  "Yellow": "पहेलो",
+  "Magenta": "मैजेंटा",
+  "Cyan": "सियान",
+  "Background": "बैकग्राउंड",
+  "Window": "विंडो",
+  "Transparent": "पारदर्शी",
+  "Semi-Transparent": "अर्द्ध पारदर्शी",
+  "Opaque": "अपारदर्शी",
+  "Font Size": "फ़ॉन्ट आकार",
+  "Text Edge Style": "टेक्स्ट एज स्टाइल",
+  "None": "कुनै होइन",
+  "Raised": "उठाइएको",
+  "Depressed": "निराश",
+  "Uniform": "समान",
+  "Dropshadow": "छाया",
+  "Font Family": "फॉण्ट परिवार",
+  "Proportional Sans-Serif": "प्रोपोरशनल साँस-सेरिफ",
+  "Monospace Sans-Serif": "मोनोस्पास साँस-सेरिफ",
+  "Proportional Serif": "प्रोपोरशनल सेरिफ",
+  "Monospace Serif": "मोनोस्पास सेरिफ",
+  "Casual": "अनौपचारिक",
+  "Script": "स्क्रिप्ट",
+  "Small Caps": "छोटो अक्षर",
+  "Reset": "रीसेट गरौ",
+  "restore all settings to the default values": "सबै सेटिङहरूलाई मूल्यमा पुन: स्थापित गर्नुहोस्।",
+  "Done": "पूर्ण",
+  "Caption Settings Dialog": "कैप्शन सेटिंग्स डायलॉग",
+  "Beginning of dialog window. Escape will cancel and close the window.": "वार्ता विन्डोको प्रारम्भिक भाग।। Escape बटनले रद्द गर्दछ र विन्डोलाई बन्द गर्दछ।",
+  "End of dialog window.": "विन्डोको समाप्ति।",
+  "{1} is loading.": "{1} लोड हुँदैछ।",
+  "Exit Picture-in-Picture": "पिक्चर-इन-पिक्चर बाट बाहिर निस्कौ।",
+  "Picture-in-Picture": "पिक्चर-इन-पिक्चर"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/np.json b/priv/static/video.js/lang/np.json
new file mode 100644
index 0000000..324f56b
--- /dev/null
+++ b/priv/static/video.js/lang/np.json
@@ -0,0 +1,90 @@
+
+{
+  "Audio Player": "ऑडियो प्लेयर",
+  "Video Player": "भिडियो प्लेयर",
+  "Play": "चलाउनु",
+  "Pause": "रोक्नु",
+  "Replay": "फेरि चलाउनु",
+  "Current Time": "हालको समय",
+  "Duration": "अवधि",
+  "Remaining Time": "बाँकी समय",
+  "Stream Type": "स्ट्रीम प्रकार",
+  "LIVE": "लाइव",
+  "Seek to live, currently behind live": "लाइभ भागमा सार्नुहोस्, हालको अवस्थामा यो लाइभबाट पछाडी छ",
+  "Seek to live, currently playing live": "लाइभ भागमा सार्नुहोस्, हालको अवस्थामा यो लाइभमा छ",
+  "Loaded": "लोड भएको छ",
+  "Progress": "प्रगति",
+  "Progress Bar": "प्रोगेस बार",
+  "progress bar timing: currentTime={1} duration={2}": "प्रगति बार को समय: {2} मध्ये {1}",
+  "Fullscreen": "फ़ुल स्क्रीन",
+  "Exit Fullscreen": "फ़ुल स्क्रीनबाट बाहिर निस्कनुहोस्",
+  "Mute": "म्यूट गर्नुहोस्",
+  "Unmute": "अनम्यूट गर्नुहोस्",
+  "Playback Rate": "प्लेब्याक दर",
+  "Subtitles": "उपशीर्षक",
+  "subtitles off": "उपशीर्षक बंद",
+  "Captions": "कैप्शन",
+  "captions off": "कैप्शन बंद",
+  "Chapters": "अध्याय",
+  "Descriptions": "विवरण",
+  "descriptions off": "विवरण बंद",
+  "Audio Track": "ऑडियो ट्रैक",
+  "Volume Level": "वॉल्यूम स्तर",
+  "You aborted the media playback": "तपाईंले मिडिया प्लेब्याक रद्द गर्नुभयो",
+  "A network error caused the media download to fail part-way.": "नेटवर्क त्रुटिले मिडिया डाउनलोडलाई आधा मार्गमा असफल गर्यो।",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "मिडिया लोड गर्न सकिएन, या तो नेटवर्क विफल भयो वा त्यसको प्रारूप समर्थित भएन।",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "मिडिया प्लेबैक अवरुद्ध गरियो, कारण यो हुन सक्छ कि मिडिया खराब भयो वा मिडिया तपाईंको ब्राउजरद्वारा समर्थित भएन।",
+  "No compatible source was found for this media.": "यस मिडियाका लागि कुनै समर्थित स्रोत फेला परेन।",
+  "The media is encrypted and we do not have the keys to decrypt it.": "मिडिया एन्क्रिप्ट गरिएको छ र हामीले त्यसो डिक्रिप्ट गर्ने कुनै किसिमका कुञ्जीहरू छैनन्।",
+  "Play Video": "भिडियो चलाउनुहोस्",
+  "Close": "बन्द गर्नुहोस्",
+  "Close Modal Dialog": "मोडल डायलग बन्द गर्नुहोस्",
+  "Modal Window": "मोडल विंडो",
+  "This is a modal window": "यो एक मोडल विन्डो हो।",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "यस मोडललाई बन्द गर्न तपाईंले Escape की बटन थिच्न सक्नुहुन्छ वा बन्द गर्ने बटन थिच्न सक्नुहुन्छ।",
+  ", opens captions settings dialog": ", कैप्शन सेटिंग डायलॉग खोलिनेछ",
+  ", opens subtitles settings dialog": ", उपशीर्षक सेटिंग्स संवाद खोलिनेछ",
+  ", opens descriptions settings dialog": ", विवरण सेटिंग संवाद खोलिनेछ",
+  ", selected": ", चयन गरियो",
+  "captions settings": "कैप्शन सेटिंग",
+  "subtitles settings": "उपशीर्षक सेटिंग",
+  "descriptions settings": "विवरण सेटिंग",
+  "Text": "टेक्स्ट",
+  "White": "सेतो",
+  "Black": "कालो",
+  "Red": "रातो",
+  "Green": "हरियो",
+  "Blue": "नीलो",
+  "Yellow": "पहेलो",
+  "Magenta": "मैजेंटा",
+  "Cyan": "सियान",
+  "Background": "बैकग्राउंड",
+  "Window": "विंडो",
+  "Transparent": "पारदर्शी",
+  "Semi-Transparent": "अर्द्ध पारदर्शी",
+  "Opaque": "अपारदर्शी",
+  "Font Size": "फ़ॉन्ट आकार",
+  "Text Edge Style": "टेक्स्ट एज स्टाइल",
+  "None": "कुनै होइन",
+  "Raised": "उठाइएको",
+  "Depressed": "निराश",
+  "Uniform": "समान",
+  "Dropshadow": "छाया",
+  "Font Family": "फॉण्ट परिवार",
+  "Proportional Sans-Serif": "प्रोपोरशनल साँस-सेरिफ",
+  "Monospace Sans-Serif": "मोनोस्पास साँस-सेरिफ",
+  "Proportional Serif": "प्रोपोरशनल सेरिफ",
+  "Monospace Serif": "मोनोस्पास सेरिफ",
+  "Casual": "अनौपचारिक",
+  "Script": "स्क्रिप्ट",
+  "Small Caps": "छोटो अक्षर",
+  "Reset": "रीसेट गरौ",
+  "restore all settings to the default values": "सबै सेटिङहरूलाई मूल्यमा पुन: स्थापित गर्नुहोस्।",
+  "Done": "पूर्ण",
+  "Caption Settings Dialog": "कैप्शन सेटिंग्स डायलॉग",
+  "Beginning of dialog window. Escape will cancel and close the window.": "वार्ता विन्डोको प्रारम्भिक भाग।। Escape बटनले रद्द गर्दछ र विन्डोलाई बन्द गर्दछ।",
+  "End of dialog window.": "विन्डोको समाप्ति।",
+  "{1} is loading.": "{1} लोड हुँदैछ।",
+  "Exit Picture-in-Picture": "पिक्चर-इन-पिक्चर बाट बाहिर निस्कौ।",
+  "Picture-in-Picture": "पिक्चर-इन-पिक्चर"
+}
diff --git a/priv/static/video.js/lang/oc.js b/priv/static/video.js/lang/oc.js
new file mode 100644
index 0000000..2bb76b1
--- /dev/null
+++ b/priv/static/video.js/lang/oc.js
@@ -0,0 +1,90 @@
+videojs.addLanguage('oc', {
+  "Audio Player": "Lector àudio",
+  "Video Player": "Lector vidèo",
+  "Play": "Lectura",
+  "Pause": "Pausa",
+  "Replay": "Tornar legir",
+  "Current Time": "Durada passada",
+  "Duration": "Durada",
+  "Remaining Time": "Temps restant",
+  "Stream Type": "Tipe de difusion",
+  "LIVE": "DIRÈCTE",
+  "Seek to live, currently behind live": "Trapar lo dirècte, actualament darrièr lo dirècte",
+  "Seek to live, currently playing live": "Trapar lo dirècte, actualament lo dirècte es en lectura",
+  "Loaded": "Cargat",
+  "Progress": "Progression",
+  "Progress Bar": "Barra de progression",
+  "progress bar timing: currentTime={1} duration={2}": "{1} sus {2}",
+  "Fullscreen": "Ecran complèt",
+  "Exit Fullscreen": "Pas en ecran complèt",
+  "Mute": "Copar lo son",
+  "Unmute": "Restablir lo son",
+  "Playback Rate": "Velocitat de lectura",
+  "Subtitles": "Sostítols",
+  "subtitles off": "Sostítols desactivats",
+  "Captions": "Legendas",
+  "captions off": "Legendas desactivadas",
+  "Chapters": "Capítols",
+  "Descriptions": "Descripcions",
+  "descriptions off": "descripcions desactivadas",
+  "Audio Track": "Pista àudio",
+  "Volume Level": "Nivèl del volum",
+  "You aborted the media playback": "Avètz copat la lectura del mèdia.",
+  "A network error caused the media download to fail part-way.": "Una error de ret a provocat un fracàs del telecargament.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Lo mèdia a pas pogut èsser cargat, siá perque lo servidor o lo ret a fracassat siá perque lo format es pas compatible.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "La lectura del mèdia es copada a causa d’un problèma de corrupcion o perque lo mèdia utiliza de foncionalitats pas suportadas pel navigador.",
+  "No compatible source was found for this media.": "Cap de font compatiblas pas trobada per aqueste mèdia.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Lo mèdia es chifrat e avèm pas las claus per lo deschifrar.",
+  "Play Video": "Legir la vidèo",
+  "Close": "Tampar",
+  "Close Modal Dialog": "Tampar la fenèstra",
+  "Modal Window": "Fenèstra",
+  "This is a modal window": "Aquò es una fenèstra",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Aquesta fenèstra pòt èsser tampada en quichar Escapar sul clavièr o en activar lo boton de tampadura.",
+  ", opens captions settings dialog": ", dobrís la fenèstra de paramètres de legendas",
+  ", opens subtitles settings dialog": ", dobrís la fenèstra de paramètres de sostítols",
+  ", opens descriptions settings dialog": ", dobrís la fenèstra de paramètres de descripcions",
+  ", selected": ", seleccionat",
+  "captions settings": "paramètres de legendas",
+  "subtitles settings": "paramètres de sostítols",
+  "descriptions settings": "paramètres de descripcions",
+  "Text": "Tèxte",
+  "White": "Blanc",
+  "Black": "Negre",
+  "Red": "Roge",
+  "Green": "Verd",
+  "Blue": "Blau",
+  "Yellow": "Jaune",
+  "Magenta": "Magenta",
+  "Cyan": "Cian",
+  "Background": "Rèireplan",
+  "Window": "Fenèstra",
+  "Transparent": "Transparent",
+  "Semi-Transparent": "Semitransparent",
+  "Opaque": "Opac",
+  "Font Size": "Talha de la polissa",
+  "Text Edge Style": "Estil dels contorns del tèxte",
+  "None": "Cap",
+  "Raised": "Naut",
+  "Depressed": "Enfonsat",
+  "Uniform": "Unifòrme",
+  "Drop shadow": "Ombrat",
+  "Font Family": "Familha de polissa",
+  "Proportional Sans-Serif": "Sans-Serif proporcionala",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Serif proporcionala",
+  "Monospace Serif": "Serif proporcionala",
+  "Casual": "Manuscrita",
+  "Script": "Script",
+  "Small Caps": "Pichonas majusculas",
+  "Reset": "Reïnicializar",
+  "restore all settings to the default values": "O restablir tot a las valors per defaut",
+  "Done": "Acabat",
+  "Caption Settings Dialog": "Fenèstra de paramètres de legenda",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Debuta de la fenèstra. Escapar anullarà e tamparà la fenèstra",
+  "End of dialog window.": "Fin de la fenèstra.",
+  "{1} is loading.": "{1} es a cargar.",
+  "Exit Picture-in-Picture": "Sortir de la vidèo incrustada",
+  "Picture-in-Picture": "Vidèo incrustada",
+  "No content": "Cap de contengut"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/oc.json b/priv/static/video.js/lang/oc.json
new file mode 100644
index 0000000..1b43465
--- /dev/null
+++ b/priv/static/video.js/lang/oc.json
@@ -0,0 +1,90 @@
+{
+  "Audio Player": "Lector àudio",
+  "Video Player": "Lector vidèo",
+  "Play": "Lectura",
+  "Pause": "Pausa",
+  "Replay": "Tornar legir",
+  "Current Time": "Durada passada",
+  "Duration": "Durada",
+  "Remaining Time": "Temps restant",
+  "Stream Type": "Tipe de difusion",
+  "LIVE": "DIRÈCTE",
+  "Seek to live, currently behind live": "Trapar lo dirècte, actualament darrièr lo dirècte",
+  "Seek to live, currently playing live": "Trapar lo dirècte, actualament lo dirècte es en lectura",
+  "Loaded": "Cargat",
+  "Progress": "Progression",
+  "Progress Bar": "Barra de progression",
+  "progress bar timing: currentTime={1} duration={2}": "{1} sus {2}",
+  "Fullscreen": "Ecran complèt",
+  "Exit Fullscreen": "Pas en ecran complèt",
+  "Mute": "Copar lo son",
+  "Unmute": "Restablir lo son",
+  "Playback Rate": "Velocitat de lectura",
+  "Subtitles": "Sostítols",
+  "subtitles off": "Sostítols desactivats",
+  "Captions": "Legendas",
+  "captions off": "Legendas desactivadas",
+  "Chapters": "Capítols",
+  "Descriptions": "Descripcions",
+  "descriptions off": "descripcions desactivadas",
+  "Audio Track": "Pista àudio",
+  "Volume Level": "Nivèl del volum",
+  "You aborted the media playback": "Avètz copat la lectura del mèdia.",
+  "A network error caused the media download to fail part-way.": "Una error de ret a provocat un fracàs del telecargament.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Lo mèdia a pas pogut èsser cargat, siá perque lo servidor o lo ret a fracassat siá perque lo format es pas compatible.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "La lectura del mèdia es copada a causa d’un problèma de corrupcion o perque lo mèdia utiliza de foncionalitats pas suportadas pel navigador.",
+  "No compatible source was found for this media.": "Cap de font compatiblas pas trobada per aqueste mèdia.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Lo mèdia es chifrat e avèm pas las claus per lo deschifrar.",
+  "Play Video": "Legir la vidèo",
+  "Close": "Tampar",
+  "Close Modal Dialog": "Tampar la fenèstra",
+  "Modal Window": "Fenèstra",
+  "This is a modal window": "Aquò es una fenèstra",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Aquesta fenèstra pòt èsser tampada en quichar Escapar sul clavièr o en activar lo boton de tampadura.",
+  ", opens captions settings dialog": ", dobrís la fenèstra de paramètres de legendas",
+  ", opens subtitles settings dialog": ", dobrís la fenèstra de paramètres de sostítols",
+  ", opens descriptions settings dialog": ", dobrís la fenèstra de paramètres de descripcions",
+  ", selected": ", seleccionat",
+  "captions settings": "paramètres de legendas",
+  "subtitles settings": "paramètres de sostítols",
+  "descriptions settings": "paramètres de descripcions",
+  "Text": "Tèxte",
+  "White": "Blanc",
+  "Black": "Negre",
+  "Red": "Roge",
+  "Green": "Verd",
+  "Blue": "Blau",
+  "Yellow": "Jaune",
+  "Magenta": "Magenta",
+  "Cyan": "Cian",
+  "Background": "Rèireplan",
+  "Window": "Fenèstra",
+  "Transparent": "Transparent",
+  "Semi-Transparent": "Semitransparent",
+  "Opaque": "Opac",
+  "Font Size": "Talha de la polissa",
+  "Text Edge Style": "Estil dels contorns del tèxte",
+  "None": "Cap",
+  "Raised": "Naut",
+  "Depressed": "Enfonsat",
+  "Uniform": "Unifòrme",
+  "Drop shadow": "Ombrat",
+  "Font Family": "Familha de polissa",
+  "Proportional Sans-Serif": "Sans-Serif proporcionala",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Serif proporcionala",
+  "Monospace Serif": "Serif proporcionala",
+  "Casual": "Manuscrita",
+  "Script": "Script",
+  "Small Caps": "Pichonas majusculas",
+  "Reset": "Reïnicializar",
+  "restore all settings to the default values": "O restablir tot a las valors per defaut",
+  "Done": "Acabat",
+  "Caption Settings Dialog": "Fenèstra de paramètres de legenda",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Debuta de la fenèstra. Escapar anullarà e tamparà la fenèstra",
+  "End of dialog window.": "Fin de la fenèstra.",
+  "{1} is loading.": "{1} es a cargar.",
+  "Exit Picture-in-Picture": "Sortir de la vidèo incrustada",
+  "Picture-in-Picture": "Vidèo incrustada",
+  "No content": "Cap de contengut"  
+}
diff --git a/priv/static/video.js/lang/pl.js b/priv/static/video.js/lang/pl.js
new file mode 100644
index 0000000..ae39d55
--- /dev/null
+++ b/priv/static/video.js/lang/pl.js
@@ -0,0 +1,90 @@
+videojs.addLanguage('pl', {
+  "Audio Player": "Odtwarzacz audio",
+  "Video Player": "Odtwarzacz wideo",
+  "Play": "Odtwórz",
+  "Pause": "Wstrzymaj",
+  "Replay": "Odtwórz ponownie",
+  "Current Time": "Aktualny czas",
+  "Duration": "Czas trwania",
+  "Remaining Time": "Pozostały czas",
+  "Stream Type": "Typ strumienia",
+  "LIVE": "NA ŻYWO",
+  "Seek to live, currently behind live": "Przejdź do transmisji na żywo, obecnie trwa odtwarzanie z archiwum",
+  "Seek to live, currently playing live": "Przejdż do transmisji na żywo, obecnie trwa odtwarzanie na żywo",
+  "Loaded": "Załadowany",
+  "Progress": "Status",
+  "Progress Bar": "Pasek postępu",
+  "progress bar timing: currentTime={1} duration={2}": "{1} z {2}",
+  "Fullscreen": "Pełny ekran",
+  "Exit Fullscreen": "Pełny ekran niedostępny",
+  "Mute": "Wycisz",
+  "Unmute": "Wyłącz wyciszenie",
+  "Playback Rate": "Prędkość odtwarzania",
+  "Subtitles": "Napisy",
+  "subtitles off": "Napisy wyłączone",
+  "Captions": "Transkrypcja",
+  "captions off": "Transkrypcja wyłączona",
+  "Chapters": "Rozdziały",
+  "Descriptions": "Opisy",
+  "descriptions off": "Opisy wyłączone",
+  "Audio Track": "Ścieżka audio",
+  "Volume Level": "Poziom głośności",
+  "You aborted the media playback": "Odtwarzanie zostało przerwane",
+  "A network error caused the media download to fail part-way.": "Błąd sieci spowodował częściowe niepowodzenie pobierania materiału wideo.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Materiał wideo nie może zostać załadowany, ponieważ wystąpił problem z serwerem lub siecią albo format materiału wideo nie jest obsługiwany",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Odtwarzanie materiału wideo zostało przerwane z powodu uszkodzonego pliku wideo lub z powodu użycia funkcji multimediów nieobsługiwanych przez Twoją przeglądarkę.",
+  "No compatible source was found for this media.": "Nie znaleziono kompatybilnego źródła dla tego typu materiału wideo.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Materiał jest zaszyfrowany, a nie mamy kluczy do jego odszyfrowania.",
+  "Play Video": "Odtwórz wideo",
+  "Close": "Zamknij",
+  "Close Modal Dialog": "Zamknij okno modalne",
+  "Modal Window": "Okno modalne",
+  "This is a modal window": "To jest okno modalne",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "To okno modalne możesz zamknąć, naciskając klawisz Escape albo wybierając przycisk Zamknij.",
+  ", opens captions settings dialog": ", otwiera okno dialogowe ustawień transkrypcji",
+  ", opens subtitles settings dialog": ", otwiera okno dialogowe napisów",
+  ", opens descriptions settings dialog": ", otwiera okno dialogowe opisów",
+  ", selected": ", zaznaczone",
+  "captions settings": "ustawienia transkrypcji",
+  "subtitles settings": "ustawienia napisów",
+  "descriptions settings": "ustawienia opisów",
+  "Text": "Tekst",
+  "White": "Biały",
+  "Black": "Czarny",
+  "Red": "Czerwony",
+  "Green": "Zielony",
+  "Blue": "Niebieski",
+  "Yellow": "Żółty",
+  "Magenta": "Karmazynowy",
+  "Cyan": "Cyjanowy",
+  "Background": "Tło",
+  "Window": "Okno",
+  "Transparent": "Przezroczysty",
+  "Semi-Transparent": "Półprzezroczysty",
+  "Opaque": "Nieprzezroczysty",
+  "Font Size": "Rozmiar czcionki",
+  "Text Edge Style": "Styl krawędzi tekstu",
+  "None": "Brak",
+  "Raised": "Podniesiony",
+  "Depressed": "Obniżony",
+  "Uniform": "Równomierny",
+  "Dropshadow": "Cień",
+  "Font Family": "Krój czcionki",
+  "Proportional Sans-Serif": "Bezszeryfowa, proporcjonalna",
+  "Monospace Sans-Serif": "Bezszeryfowa, stała odległość znaków",
+  "Proportional Serif": "Szeryfowa, proporcjonalna",
+  "Monospace Serif": "Szeryfowa, stała odległość znaków",
+  "Casual": "Casual",
+  "Script": "Script",
+  "Small Caps": "Kapitaliki",
+  "Reset": "Ustawienia domyślne",
+  "restore all settings to the default values": "zresetuj wszystkie ustawienia do domyślnych wartości",
+  "Done": "Gotowe",
+  "Caption Settings Dialog": "Okno dialogowe ustawień transkrypcji",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Początek okna dialogowego. Klawisz Escape anuluje i zamyka okno.",
+  "End of dialog window.": "Koniec okna dialogowego.",
+  "{1} is loading.": "Wczytywanie pliku {1}.",
+  "Exit Picture-in-Picture": "Wyjdź z trybu obraz w obrazie",
+  "Picture-in-Picture": "Obraz w obrazie",
+  "No content": "Brak zawartości"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/pl.json b/priv/static/video.js/lang/pl.json
new file mode 100644
index 0000000..8881b86
--- /dev/null
+++ b/priv/static/video.js/lang/pl.json
@@ -0,0 +1,90 @@
+{
+  "Audio Player": "Odtwarzacz audio",
+  "Video Player": "Odtwarzacz wideo",
+  "Play": "Odtwórz",
+  "Pause": "Wstrzymaj",
+  "Replay": "Odtwórz ponownie",
+  "Current Time": "Aktualny czas",
+  "Duration": "Czas trwania",
+  "Remaining Time": "Pozostały czas",
+  "Stream Type": "Typ strumienia",
+  "LIVE": "NA ŻYWO",
+  "Seek to live, currently behind live": "Przejdź do transmisji na żywo, obecnie trwa odtwarzanie z archiwum",
+  "Seek to live, currently playing live": "Przejdż do transmisji na żywo, obecnie trwa odtwarzanie na żywo",
+  "Loaded": "Załadowany",
+  "Progress": "Status",
+  "Progress Bar": "Pasek postępu",
+  "progress bar timing: currentTime={1} duration={2}": "{1} z {2}",
+  "Fullscreen": "Pełny ekran",
+  "Exit Fullscreen": "Pełny ekran niedostępny",
+  "Mute": "Wycisz",
+  "Unmute": "Wyłącz wyciszenie",
+  "Playback Rate": "Prędkość odtwarzania",
+  "Subtitles": "Napisy",
+  "subtitles off": "Napisy wyłączone",
+  "Captions": "Transkrypcja",
+  "captions off": "Transkrypcja wyłączona",
+  "Chapters": "Rozdziały",
+  "Descriptions": "Opisy",
+  "descriptions off": "Opisy wyłączone",
+  "Audio Track": "Ścieżka audio",
+  "Volume Level": "Poziom głośności",
+  "You aborted the media playback": "Odtwarzanie zostało przerwane",
+  "A network error caused the media download to fail part-way.": "Błąd sieci spowodował częściowe niepowodzenie pobierania materiału wideo.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Materiał wideo nie może zostać załadowany, ponieważ wystąpił problem z serwerem lub siecią albo format materiału wideo nie jest obsługiwany",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Odtwarzanie materiału wideo zostało przerwane z powodu uszkodzonego pliku wideo lub z powodu użycia funkcji multimediów nieobsługiwanych przez Twoją przeglądarkę.",
+  "No compatible source was found for this media.": "Nie znaleziono kompatybilnego źródła dla tego typu materiału wideo.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Materiał jest zaszyfrowany, a nie mamy kluczy do jego odszyfrowania.",
+  "Play Video": "Odtwórz wideo",
+  "Close": "Zamknij",
+  "Close Modal Dialog": "Zamknij okno modalne",
+  "Modal Window": "Okno modalne",
+  "This is a modal window": "To jest okno modalne",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "To okno modalne możesz zamknąć, naciskając klawisz Escape albo wybierając przycisk Zamknij.",
+  ", opens captions settings dialog": ", otwiera okno dialogowe ustawień transkrypcji",
+  ", opens subtitles settings dialog": ", otwiera okno dialogowe napisów",
+  ", opens descriptions settings dialog": ", otwiera okno dialogowe opisów",
+  ", selected": ", zaznaczone",
+  "captions settings": "ustawienia transkrypcji",
+  "subtitles settings": "ustawienia napisów",
+  "descriptions settings": "ustawienia opisów",
+  "Text": "Tekst",
+  "White": "Biały",
+  "Black": "Czarny",
+  "Red": "Czerwony",
+  "Green": "Zielony",
+  "Blue": "Niebieski",
+  "Yellow": "Żółty",
+  "Magenta": "Karmazynowy",
+  "Cyan": "Cyjanowy",
+  "Background": "Tło",
+  "Window": "Okno",
+  "Transparent": "Przezroczysty",
+  "Semi-Transparent": "Półprzezroczysty",
+  "Opaque": "Nieprzezroczysty",
+  "Font Size": "Rozmiar czcionki",
+  "Text Edge Style": "Styl krawędzi tekstu",
+  "None": "Brak",
+  "Raised": "Podniesiony",
+  "Depressed": "Obniżony",
+  "Uniform": "Równomierny",
+  "Dropshadow": "Cień",
+  "Font Family": "Krój czcionki",
+  "Proportional Sans-Serif": "Bezszeryfowa, proporcjonalna",
+  "Monospace Sans-Serif": "Bezszeryfowa, stała odległość znaków",
+  "Proportional Serif": "Szeryfowa, proporcjonalna",
+  "Monospace Serif": "Szeryfowa, stała odległość znaków",
+  "Casual": "Casual",
+  "Script": "Script",
+  "Small Caps": "Kapitaliki",
+  "Reset": "Ustawienia domyślne",
+  "restore all settings to the default values": "zresetuj wszystkie ustawienia do domyślnych wartości",
+  "Done": "Gotowe",
+  "Caption Settings Dialog": "Okno dialogowe ustawień transkrypcji",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Początek okna dialogowego. Klawisz Escape anuluje i zamyka okno.",
+  "End of dialog window.": "Koniec okna dialogowego.",
+  "{1} is loading.": "Wczytywanie pliku {1}.",
+  "Exit Picture-in-Picture": "Wyjdź z trybu obraz w obrazie",
+  "Picture-in-Picture": "Obraz w obrazie",
+  "No content": "Brak zawartości"
+}
diff --git a/priv/static/video.js/lang/pt-BR.js b/priv/static/video.js/lang/pt-BR.js
new file mode 100644
index 0000000..184b2e8
--- /dev/null
+++ b/priv/static/video.js/lang/pt-BR.js
@@ -0,0 +1,87 @@
+videojs.addLanguage('pt-BR', {
+  "Audio Player": "Reprodutor de áudio",
+  "Video Player": "Reprodutor de vídeo",
+  "Play": "Tocar",
+  "Pause": "Pausar",
+  "Replay": "Tocar novamente",
+  "Current Time": "Tempo",
+  "Duration": "Duração",
+  "Remaining Time": "Tempo Restante",
+  "Stream Type": "Tipo de Stream",
+  "LIVE": "AO VIVO",
+  "Loaded": "Carregado",
+  "Progress": "Progresso",
+  "Progress Bar": "Barra de progresso",
+  "progress bar timing: currentTime={1} duration={2}": "{1} de {2}",
+  "Fullscreen": "Tela Cheia",
+  "Exit Fullscreen": "Tela Normal",
+  "Mute": "Mudo",
+  "Unmute": "Ativar o som",
+  "Playback Rate": "Velocidade",
+  "Subtitles": "Legendas",
+  "subtitles off": "Sem Legendas",
+  "Captions": "Anotações",
+  "captions off": "Sem Anotações",
+  "Chapters": "Capítulos",
+  "Descriptions": "Descrições",
+  "descriptions off": "sem descrições",
+  "Audio Track": "Faixa de áudio",
+  "Volume Level": "Nível de volume",
+  "You aborted the media playback": "Você parou a execução do vídeo.",
+  "A network error caused the media download to fail part-way.": "Um erro na rede causou falha durante o download da mídia.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "A mídia não pode ser carregada, por uma falha de rede ou servidor ou o formato não é suportado.",
+  "No compatible source was found for this media.": "Nenhuma fonte foi encontrada para esta mídia.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A reprodução foi interrompida devido à um problema de mídia corrompida ou porque a mídia utiliza funções que seu navegador não suporta.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "A mídia está criptografada e não temos as chaves para descriptografar.",
+  "Play Video": "Tocar Vídeo",
+  "Close": "Fechar",
+  "Close Modal Dialog": "Fechar Diálogo Modal",
+  "Modal Window": "Janela Modal",
+  "This is a modal window": "Isso é uma janela-modal",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Esta janela pode ser fechada pressionando a tecla de Escape.",
+  ", opens captions settings dialog": ", abre as configurações de legendas de comentários",
+  ", opens subtitles settings dialog": ", abre as configurações de legendas",
+  ", opens descriptions settings dialog": ", abre as configurações",
+  ", selected": ", selecionada",
+  "captions settings": "configurações de legendas de comentários",
+  "subtitles settings": "configurações de legendas",
+  "descriptions settings": "configurações das descrições",
+  "Text": "Texto",
+  "White": "Branco",
+  "Black": "Preto",
+  "Red": "Vermelho",
+  "Green": "Verde",
+  "Blue": "Azul",
+  "Yellow": "Amarelo",
+  "Magenta": "Magenta",
+  "Cyan": "Ciano",
+  "Background": "Plano-de-Fundo",
+  "Window": "Janela",
+  "Transparent": "Transparente",
+  "Semi-Transparent": "Semi-Transparente",
+  "Opaque": "Opaco",
+  "Font Size": "Tamanho da Fonte",
+  "Text Edge Style": "Estilo da Borda",
+  "None": "Nenhum",
+  "Raised": "Elevado",
+  "Depressed": "Acachapado",
+  "Uniform": "Uniforme",
+  "Drop shadow": "Sombra de projeção",
+  "Font Family": "Família da Fonte",
+  "Proportional Sans-Serif": "Sans-Serif(Sem serifa) Proporcional",
+  "Monospace Sans-Serif": "Sans-Serif(Sem serifa) Monoespaçada",
+  "Proportional Serif": "Serifa Proporcional",
+  "Monospace Serif": "Serifa Monoespaçada",
+  "Casual": "Casual",
+  "Script": "Script",
+  "Small Caps": "Maiúsculas Pequenas",
+  "Reset": "Redefinir",
+  "restore all settings to the default values": "restaurar todas as configurações aos valores padrão",
+  "Done": "Salvar",
+  "Caption Settings Dialog": "Caíxa-de-Diálogo das configurações de Legendas",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Iniciando a Janela-de-Diálogo. Pressionar Escape irá cancelar e fechar a janela.",
+  "End of dialog window.": "Fim da Janela-de-Diálogo",
+  "{1} is loading.": "{1} está carregando.",
+  "Exit Picture-in-Picture": "Sair de Picture-in-Picture",
+  "Picture-in-Picture": "Picture-in-Picture"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/pt-BR.json b/priv/static/video.js/lang/pt-BR.json
new file mode 100644
index 0000000..8b8a31d
--- /dev/null
+++ b/priv/static/video.js/lang/pt-BR.json
@@ -0,0 +1,88 @@
+{
+  "Audio Player": "Reprodutor de áudio",
+  "Video Player": "Reprodutor de vídeo",
+  "Play": "Tocar",
+  "Pause": "Pausar",
+  "Replay": "Tocar novamente",
+  "Current Time": "Tempo",
+  "Duration": "Duração",
+  "Remaining Time": "Tempo Restante",
+  "Stream Type": "Tipo de Stream",
+  "LIVE": "AO VIVO",
+  "Loaded": "Carregado",
+  "Progress": "Progresso",
+  "Progress Bar": "Barra de progresso",
+  "progress bar timing: currentTime={1} duration={2}": "{1} de {2}",
+  "Fullscreen": "Tela Cheia",
+  "Exit Fullscreen": "Tela Normal",
+  "Mute": "Mudo",
+  "Unmute": "Ativar o som",
+  "Playback Rate": "Velocidade",
+  "Subtitles": "Legendas",
+  "subtitles off": "Sem Legendas",
+  "Captions": "Anotações",
+  "captions off": "Sem Anotações",
+  "Chapters": "Capítulos",
+  "Descriptions": "Descrições",
+  "descriptions off": "sem descrições",
+  "Audio Track": "Faixa de áudio",
+  "Volume Level": "Nível de volume",
+  "You aborted the media playback": "Você parou a execução do vídeo.",
+  "A network error caused the media download to fail part-way.": "Um erro na rede causou falha durante o download da mídia.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "A mídia não pode ser carregada, por uma falha de rede ou servidor ou o formato não é suportado.",
+  "No compatible source was found for this media.": "Não foi encontrada fonte de mídia compatível.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A reprodução foi interrompida devido à um problema de mídia corrompida ou porque a mídia utiliza funções que seu navegador não suporta.",
+  "No compatible source was found for this media.": "Nenhuma fonte foi encontrada para esta mídia.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "A mídia está criptografada e não temos as chaves para descriptografar.",
+  "Play Video": "Tocar Vídeo",
+  "Close": "Fechar",
+  "Close Modal Dialog": "Fechar Diálogo Modal",
+  "Modal Window": "Janela Modal",
+  "This is a modal window": "Isso é uma janela-modal",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Esta janela pode ser fechada pressionando a tecla de Escape.",
+  ", opens captions settings dialog": ", abre as configurações de legendas de comentários",
+  ", opens subtitles settings dialog": ", abre as configurações de legendas",
+  ", opens descriptions settings dialog": ", abre as configurações",
+  ", selected": ", selecionada",
+  "captions settings": "configurações de legendas de comentários",
+  "subtitles settings": "configurações de legendas",
+  "descriptions settings": "configurações das descrições",
+  "Text": "Texto",
+  "White": "Branco",
+  "Black": "Preto",
+  "Red": "Vermelho",
+  "Green": "Verde",
+  "Blue": "Azul",
+  "Yellow": "Amarelo",
+  "Magenta": "Magenta",
+  "Cyan": "Ciano",
+  "Background": "Plano-de-Fundo",
+  "Window": "Janela",
+  "Transparent": "Transparente",
+  "Semi-Transparent": "Semi-Transparente",
+  "Opaque": "Opaco",
+  "Font Size": "Tamanho da Fonte",
+  "Text Edge Style": "Estilo da Borda",
+  "None": "Nenhum",
+  "Raised": "Elevado",
+  "Depressed": "Acachapado",
+  "Uniform": "Uniforme",
+  "Drop shadow": "Sombra de projeção",
+  "Font Family": "Família da Fonte",
+  "Proportional Sans-Serif": "Sans-Serif(Sem serifa) Proporcional",
+  "Monospace Sans-Serif": "Sans-Serif(Sem serifa) Monoespaçada",
+  "Proportional Serif": "Serifa Proporcional",
+  "Monospace Serif": "Serifa Monoespaçada",
+  "Casual": "Casual",
+  "Script": "Script",
+  "Small Caps": "Maiúsculas Pequenas",
+  "Reset": "Redefinir",
+  "restore all settings to the default values": "restaurar todas as configurações aos valores padrão",
+  "Done": "Salvar",
+  "Caption Settings Dialog": "Caíxa-de-Diálogo das configurações de Legendas",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Iniciando a Janela-de-Diálogo. Pressionar Escape irá cancelar e fechar a janela.",
+  "End of dialog window.": "Fim da Janela-de-Diálogo",
+  "{1} is loading.": "{1} está carregando.",
+  "Exit Picture-in-Picture": "Sair de Picture-in-Picture",
+  "Picture-in-Picture": "Picture-in-Picture"
+}
diff --git a/priv/static/video.js/lang/pt-PT.js b/priv/static/video.js/lang/pt-PT.js
new file mode 100644
index 0000000..86882a0
--- /dev/null
+++ b/priv/static/video.js/lang/pt-PT.js
@@ -0,0 +1,43 @@
+videojs.addLanguage('pt-PT', {
+  "Play": "Reproduzir",
+  "Pause": "Parar",
+  "Replay": "Reiniciar",
+  "Current Time": "Tempo Atual",
+  "Duration": "Duração",
+  "Remaining Time": "Tempo Restante",
+  "Stream Type": "Tipo de Stream",
+  "LIVE": "EM DIRETO",
+  "Loaded": "Carregado",
+  "Progress": "Progresso",
+  "Fullscreen": "Ecrã inteiro",
+  "Exit Fullscreen": "Ecrã normal",
+  "Mute": "Desativar som",
+  "Unmute": "Ativar som",
+  "Playback Rate": "Velocidade de reprodução",
+  "Subtitles": "Legendas",
+  "subtitles off": "desativar legendas",
+  "Captions": "Anotações",
+  "captions off": "desativar anotações",
+  "Chapters": "Capítulos",
+  "Close Modal Dialog": "Fechar Janela Modal",
+  "Descriptions": "Descrições",
+  "descriptions off": "desativar descrições",
+  "Audio Track": "Faixa Áudio",
+  "You aborted the media playback": "Parou a reprodução do vídeo.",
+  "A network error caused the media download to fail part-way.": "Um erro na rede fez o vídeo falhar parcialmente.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "O vídeo não pode ser carregado, ou porque houve um problema na rede ou no servidor, ou porque formato do vídeo não é compatível.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A reprodução foi interrompida por um problema com o vídeo ou porque o formato não é compatível com o seu navegador.",
+  "No compatible source was found for this media.": "Não foi encontrada uma fonte de vídeo compatível.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "O vídeo está encriptado e não há uma chave para o desencriptar.",
+  "Play Video": "Reproduzir Vídeo",
+  "Close": "Fechar",
+  "Modal Window": "Janela Modal",
+  "This is a modal window": "Isto é uma janela modal",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Esta modal pode ser fechada pressionando a tecla ESC ou ativando o botão de fechar.",
+  ", opens captions settings dialog": ", abre janela com definições de legendas",
+  ", opens subtitles settings dialog": ", abre janela com definições de legendas",
+  ", opens descriptions settings dialog": ", abre janela com definições de descrições",
+  ", selected": ", seleccionado",
+  "Skip backward {1} seconds": "Recuar de {1} segundos",
+  "Skip forward {1} seconds": "Avançar de {1} segundos"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/pt-PT.json b/priv/static/video.js/lang/pt-PT.json
new file mode 100644
index 0000000..66af48b
--- /dev/null
+++ b/priv/static/video.js/lang/pt-PT.json
@@ -0,0 +1,43 @@
+{
+  "Play": "Reproduzir",
+  "Pause": "Parar",
+  "Replay": "Reiniciar",
+  "Current Time": "Tempo Atual",
+  "Duration": "Duração",
+  "Remaining Time": "Tempo Restante",
+  "Stream Type": "Tipo de Stream",
+  "LIVE": "EM DIRETO",
+  "Loaded": "Carregado",
+  "Progress": "Progresso",
+  "Fullscreen": "Ecrã inteiro",
+  "Exit Fullscreen": "Ecrã normal",
+  "Mute": "Desativar som",
+  "Unmute": "Ativar som",
+  "Playback Rate": "Velocidade de reprodução",
+  "Subtitles": "Legendas",
+  "subtitles off": "desativar legendas",
+  "Captions": "Anotações",
+  "captions off": "desativar anotações",
+  "Chapters": "Capítulos",
+  "Close Modal Dialog": "Fechar Janela Modal",
+  "Descriptions": "Descrições",
+  "descriptions off": "desativar descrições",
+  "Audio Track": "Faixa Áudio",
+  "You aborted the media playback": "Parou a reprodução do vídeo.",
+  "A network error caused the media download to fail part-way.": "Um erro na rede fez o vídeo falhar parcialmente.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "O vídeo não pode ser carregado, ou porque houve um problema na rede ou no servidor, ou porque formato do vídeo não é compatível.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A reprodução foi interrompida por um problema com o vídeo ou porque o formato não é compatível com o seu navegador.",
+  "No compatible source was found for this media.": "Não foi encontrada uma fonte de vídeo compatível.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "O vídeo está encriptado e não há uma chave para o desencriptar.",
+  "Play Video": "Reproduzir Vídeo",
+  "Close": "Fechar",
+  "Modal Window": "Janela Modal",
+  "This is a modal window": "Isto é uma janela modal",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Esta modal pode ser fechada pressionando a tecla ESC ou ativando o botão de fechar.",
+  ", opens captions settings dialog": ", abre janela com definições de legendas",
+  ", opens subtitles settings dialog": ", abre janela com definições de legendas",
+  ", opens descriptions settings dialog": ", abre janela com definições de descrições",
+  ", selected": ", seleccionado",
+  "Skip backward {1} seconds": "Recuar de {1} segundos",
+  "Skip forward {1} seconds": "Avançar de {1} segundos"
+}
diff --git a/priv/static/video.js/lang/ro.js b/priv/static/video.js/lang/ro.js
new file mode 100644
index 0000000..2d66b46
--- /dev/null
+++ b/priv/static/video.js/lang/ro.js
@@ -0,0 +1,89 @@
+videojs.addLanguage('ro', {
+  "Audio Player": "Player audio",
+  "Video Player": "Player video",
+  "Play": "Piesă",
+  "Pause": "Pauză",
+  "Replay": "Reluare",
+  "Current Time": "Ora curentă",
+  "Duration": "Durată",
+  "Remaining Time": "Timp rămas",
+  "Stream Type": "Tip flux",
+  "LIVE": "ÎN DIRECT",
+  "Seek to live, currently behind live": "Căutare în direct; în prezent, sunteți în urmă",
+  "Seek to live, currently playing live": "Căutare în direct; în prezent, se redă în direct",
+  "Loaded": "Încărcat",
+  "Progress": "Progres",
+  "Progress Bar": "Bară de progres",
+  "progress bar timing: currentTime={1} duration={2}": "{1} din {2}",
+  "Fullscreen": "Ecran complet",
+  "Exit Fullscreen": "Ecran parțial",
+  "Mute": "Suprimare sunet",
+  "Unmute": "Activare sunet",
+  "Playback Rate": "Rată de redare",
+  "Subtitles": "Subtitrări",
+  "subtitles off": "subtitrări dezactivate",
+  "Captions": "Indicații scrise",
+  "captions off": "indicații scrise dezactivate",
+  "Chapters": "Capitole",
+  "Descriptions": "Descrieri",
+  "descriptions off": "descrieri dezactivate",
+  "Audio Track": "Pistă audio",
+  "Volume Level": "Nivel volum",
+  "You aborted the media playback": "Ați abandonat redarea media",
+  "A network error caused the media download to fail part-way.": "O eroare de rețea a provocat eșecul descărcării conținutului media în timpul procesului.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Conținutul media nu a putut fi încărcat, fie pentru că serverul sau rețeaua a eșuat, fie pentru că formatul nu este acceptat.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Redarea media a fost întreruptă din cauza conținutului corupt sau din cauza faptului că acest conținut media folosește funcții pe care browserul dvs. nu le acceptă.",
+  "No compatible source was found for this media.": "Nu au fost găsite surse compatibile pentru acest conținut media.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Conținutul media este criptată și nu avem cheile pentru decriptare.",
+  "Play Video": "Redare video",
+  "Close": "Închidere",
+  "Close Modal Dialog": "Închidere dialog modal",
+  "Modal Window": "Fereastră modală",
+  "This is a modal window": "Aceasta este o fereastră modală",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Această fereastră modală poate fi închisă cu tasta Escape sau butonul de închidere.",
+  ", opens captions settings dialog": ", deschide dialogul de setări pentru indicații scrise",
+  ", opens subtitles settings dialog": ", deschide dialogul de setări pentru subtitrări",
+  ", opens descriptions settings dialog": ", deschide dialogul de setări pentru descrieri",
+  ", selected": ", selectat",
+  "captions settings": "setări indicații scrise",
+  "subtitles settings": "setări subtitrări",
+  "descriptions settings": "setări descrieri",
+  "Text": "Text",
+  "White": "Alb",
+  "Black": "Negru",
+  "Red": "Roșu",
+  "Green": "Verde",
+  "Blue": "Albastru",
+  "Yellow": "Galben",
+  "Magenta": "Magenta",
+  "Cyan": "Cyan",
+  "Background": "Fundal",
+  "Window": "Fereastră",
+  "Transparent": "Transparent",
+  "Semi-Transparent": "Semitransparent",
+  "Opaque": "Opac",
+  "Font Size": "Mărime font",
+  "Text Edge Style": "Stil margine text",
+  "None": "Fără",
+  "Raised": "Ridicat",
+  "Depressed": "Apăsat",
+  "Uniform": "Uniformă",
+  "Dropshadow": "Umbră",
+  "Font Family": "Familie fonturi",
+  "Proportional Sans-Serif": "Sans-serif proporțional",
+  "Monospace Sans-Serif": "Sans-serif monospațiu",
+  "Proportional Serif": "Serif proporțional",
+  "Monospace Serif": "Serif monospațiu",
+  "Casual": "Informal",
+  "Script": "Script",
+  "Small Caps": "Majuscule mici",
+  "Reset": "Resetare",
+  "restore all settings to the default values": "readuceți toate setările la valorile implicite",
+  "Done": "Terminat",
+  "Caption Settings Dialog": "Dialog setări indicații scrise",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Începutul ferestrei de dialog. Tasta Escape va anula și va închide fereastra.",
+  "End of dialog window.": "Sfârșitul ferestrei de dialog.",
+  "{1} is loading.": "{1} se încarcă.",
+  "Exit Picture-in-Picture": "Închidere imagine în imagine",
+  "Picture-in-Picture": "Imagine în imagine"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/ro.json b/priv/static/video.js/lang/ro.json
new file mode 100644
index 0000000..a4a60de
--- /dev/null
+++ b/priv/static/video.js/lang/ro.json
@@ -0,0 +1,89 @@
+{
+  "Audio Player": "Player audio",
+  "Video Player": "Player video",
+  "Play": "Piesă",
+  "Pause": "Pauză",
+  "Replay": "Reluare",
+  "Current Time": "Ora curentă",
+  "Duration": "Durată",
+  "Remaining Time": "Timp rămas",
+  "Stream Type": "Tip flux",
+  "LIVE": "ÎN DIRECT",
+  "Seek to live, currently behind live": "Căutare în direct; în prezent, sunteți în urmă",
+  "Seek to live, currently playing live": "Căutare în direct; în prezent, se redă în direct",
+  "Loaded": "Încărcat",
+  "Progress": "Progres",
+  "Progress Bar": "Bară de progres",
+  "progress bar timing: currentTime={1} duration={2}": "{1} din {2}",
+  "Fullscreen": "Ecran complet",
+  "Exit Fullscreen": "Ecran parțial",
+  "Mute": "Suprimare sunet",
+  "Unmute": "Activare sunet",
+  "Playback Rate": "Rată de redare",
+  "Subtitles": "Subtitrări",
+  "subtitles off": "subtitrări dezactivate",
+  "Captions": "Indicații scrise",
+  "captions off": "indicații scrise dezactivate",
+  "Chapters": "Capitole",
+  "Descriptions": "Descrieri",
+  "descriptions off": "descrieri dezactivate",
+  "Audio Track": "Pistă audio",
+  "Volume Level": "Nivel volum",
+  "You aborted the media playback": "Ați abandonat redarea media",
+  "A network error caused the media download to fail part-way.": "O eroare de rețea a provocat eșecul descărcării conținutului media în timpul procesului.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Conținutul media nu a putut fi încărcat, fie pentru că serverul sau rețeaua a eșuat, fie pentru că formatul nu este acceptat.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Redarea media a fost întreruptă din cauza conținutului corupt sau din cauza faptului că acest conținut media folosește funcții pe care browserul dvs. nu le acceptă.",
+  "No compatible source was found for this media.": "Nu au fost găsite surse compatibile pentru acest conținut media.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Conținutul media este criptată și nu avem cheile pentru decriptare.",
+  "Play Video": "Redare video",
+  "Close": "Închidere",
+  "Close Modal Dialog": "Închidere dialog modal",
+  "Modal Window": "Fereastră modală",
+  "This is a modal window": "Aceasta este o fereastră modală",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Această fereastră modală poate fi închisă cu tasta Escape sau butonul de închidere.",
+  ", opens captions settings dialog": ", deschide dialogul de setări pentru indicații scrise",
+  ", opens subtitles settings dialog": ", deschide dialogul de setări pentru subtitrări",
+  ", opens descriptions settings dialog": ", deschide dialogul de setări pentru descrieri",
+  ", selected": ", selectat",
+  "captions settings": "setări indicații scrise",
+  "subtitles settings": "setări subtitrări",
+  "descriptions settings": "setări descrieri",
+  "Text": "Text",
+  "White": "Alb",
+  "Black": "Negru",
+  "Red": "Roșu",
+  "Green": "Verde",
+  "Blue": "Albastru",
+  "Yellow": "Galben",
+  "Magenta": "Magenta",
+  "Cyan": "Cyan",
+  "Background": "Fundal",
+  "Window": "Fereastră",
+  "Transparent": "Transparent",
+  "Semi-Transparent": "Semitransparent",
+  "Opaque": "Opac",
+  "Font Size": "Mărime font",
+  "Text Edge Style": "Stil margine text",
+  "None": "Fără",
+  "Raised": "Ridicat",
+  "Depressed": "Apăsat",
+  "Uniform": "Uniformă",
+  "Dropshadow": "Umbră",
+  "Font Family": "Familie fonturi",
+  "Proportional Sans-Serif": "Sans-serif proporțional",
+  "Monospace Sans-Serif": "Sans-serif monospațiu",
+  "Proportional Serif": "Serif proporțional",
+  "Monospace Serif": "Serif monospațiu",
+  "Casual": "Informal",
+  "Script": "Script",
+  "Small Caps": "Majuscule mici",
+  "Reset": "Resetare",
+  "restore all settings to the default values": "readuceți toate setările la valorile implicite",
+  "Done": "Terminat",
+  "Caption Settings Dialog": "Dialog setări indicații scrise",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Începutul ferestrei de dialog. Tasta Escape va anula și va închide fereastra.",
+  "End of dialog window.": "Sfârșitul ferestrei de dialog.",
+  "{1} is loading.": "{1} se încarcă.",
+  "Exit Picture-in-Picture": "Închidere imagine în imagine",
+  "Picture-in-Picture": "Imagine în imagine"
+}
diff --git a/priv/static/video.js/lang/ru.js b/priv/static/video.js/lang/ru.js
new file mode 100644
index 0000000..6783364
--- /dev/null
+++ b/priv/static/video.js/lang/ru.js
@@ -0,0 +1,91 @@
+videojs.addLanguage('ru', {
+  "Audio Player": "Аудиоплеер",
+  "Video Player": "Видеоплеер",
+  "Play": "Воспроизвести",
+  "Pause": "Приостановить",
+  "Replay": "Воспроизвести снова",
+  "Current Time": "Текущее время",
+  "Duration": "Продолжительность",
+  "Remaining Time": "Оставшееся время",
+  "Stream Type": "Тип потока",
+  "LIVE": "ПРЯМОЙ ЭФИР",
+  "Seek to live, currently behind live": "Переход к прямому эфиру (воспроизведение идёт с отставанием)",
+  "Seek to live, currently playing live": "Переход к прямому эфиру (воспроизведение идёт без отставания)",
+  "Loaded": "Загрузка",
+  "Progress": "Прогресс",
+  "Progress Bar": "Индикатор загрузки",
+  "progress bar timing: currentTime={1} duration={2}": "{1} из {2}",
+  "Fullscreen": "Полноэкранный режим",
+  "Exit Fullscreen": "Неполноэкранный режим",
+  "Mute": "Без звука",
+  "Unmute": "Со звуком",
+  "Playback Rate": "Скорость воспроизведения",
+  "Subtitles": "Субтитры",
+  "subtitles off": "Субтитры выкл.",
+  "Captions": "Подписи",
+  "captions off": "Подписи выкл.",
+  "Chapters": "Главы",
+  "Descriptions": "Описания",
+  "descriptions off": "Отключить описания",
+  "Audio Track": "Звуковая дорожка",
+  "Volume Level": "Уровень громкости",
+  "You aborted the media playback": "Вы прервали воспроизведение видео",
+  "A network error caused the media download to fail part-way.": "Ошибка сети вызвала сбой во время загрузки.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Не удалось загрузить видео из-за сетевого или серверного сбоя либо неподдерживаемого формата видео.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Воспроизведение прервано из-за повреждения либо в связи с тем, что видео использует функции, неподдерживаемые вашим браузером.",
+  "No compatible source was found for this media.": "Совместимые источники для этого видео отсутствуют.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Видео зашифровано, а у нас нет ключей для его расшифровки.",
+  "Play Video": "Воспроизвести видео",
+  "Close": "Закрыть",
+  "Close Modal Dialog": "Закрыть модальное окно",
+  "Modal Window": "Модальное окно",
+  "This is a modal window": "Это модальное окно",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Модальное окно можно закрыть нажав Esc или кнопку закрытия окна.",
+  ", opens captions settings dialog": ", откроется диалог настройки подписей",
+  ", opens subtitles settings dialog": ", откроется диалог настройки субтитров",
+  ", opens descriptions settings dialog": ", откроется диалог настройки описаний",
+  ", selected": ", выбрано",
+  "captions settings": "настройки подписей",
+  "subtitles settings": "настройки субтитров",
+  "descriptions settings": "настройки описаний",
+  "Text": "Текст",
+  "White": "Белый",
+  "Black": "Черный",
+  "Red": "Красный",
+  "Green": "Зеленый",
+  "Blue": "Синий",
+  "Yellow": "Желтый",
+  "Magenta": "Пурпурный",
+  "Cyan": "Голубой",
+  "Background": "Фон",
+  "Window": "Окно",
+  "Transparent": "Прозрачный",
+  "Semi-Transparent": "Полупрозрачный",
+  "Opaque": "Прозрачность",
+  "Font Size": "Размер шрифта",
+  "Text Edge Style": "Стиль края текста",
+  "None": "Ничего",
+  "Raised": "Поднятый",
+  "Depressed": "Пониженный",
+  "Uniform": "Одинаковый",
+  "Drop shadow": "Тень",
+  "Font Family": "Шрифт",
+  "Proportional Sans-Serif": "Пропорциональный без засечек",
+  "Monospace Sans-Serif": "Моноширинный без засечек",
+  "Proportional Serif": "Пропорциональный с засечками",
+  "Monospace Serif": "Моноширинный с засечками",
+  "Casual": "Казуальный",
+  "Script": "Рукописный",
+  "Small Caps": "Капитель",
+  "Reset": "Сбросить",
+  "restore all settings to the default values": "сбросить все настройки на значения по умолчанию",
+  "Done": "Готово",
+  "Caption Settings Dialog": "Диалог настроек подписи",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Начало диалогового окна. Нажмите Escape для отмены и закрытия окна",
+  "End of dialog window.": "Конец диалогового окна.",
+  "{1} is loading.": "{1} загружается.",
+  "Exit Picture-in-Picture": "Закрыть картинку в картинке",
+  "Picture-in-Picture": "Картинка в картинке",
+  "Skip forward {1} seconds": "На {1} секунд вперед",
+  "Skip backward {1} seconds": "На {1} секунд назад"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/ru.json b/priv/static/video.js/lang/ru.json
new file mode 100644
index 0000000..004cbd3
--- /dev/null
+++ b/priv/static/video.js/lang/ru.json
@@ -0,0 +1,91 @@
+{
+  "Audio Player": "Аудиоплеер",
+  "Video Player": "Видеоплеер",
+  "Play": "Воспроизвести",
+  "Pause": "Приостановить",
+  "Replay": "Воспроизвести снова",
+  "Current Time": "Текущее время",
+  "Duration": "Продолжительность",
+  "Remaining Time": "Оставшееся время",
+  "Stream Type": "Тип потока",
+  "LIVE": "ПРЯМОЙ ЭФИР",
+  "Seek to live, currently behind live": "Переход к прямому эфиру (воспроизведение идёт с отставанием)",
+  "Seek to live, currently playing live": "Переход к прямому эфиру (воспроизведение идёт без отставания)",
+  "Loaded": "Загрузка",
+  "Progress": "Прогресс",
+  "Progress Bar": "Индикатор загрузки",
+  "progress bar timing: currentTime={1} duration={2}": "{1} из {2}",
+  "Fullscreen": "Полноэкранный режим",
+  "Exit Fullscreen": "Неполноэкранный режим",
+  "Mute": "Без звука",
+  "Unmute": "Со звуком",
+  "Playback Rate": "Скорость воспроизведения",
+  "Subtitles": "Субтитры",
+  "subtitles off": "Субтитры выкл.",
+  "Captions": "Подписи",
+  "captions off": "Подписи выкл.",
+  "Chapters": "Главы",
+  "Descriptions": "Описания",
+  "descriptions off": "Отключить описания",
+  "Audio Track": "Звуковая дорожка",
+  "Volume Level": "Уровень громкости",
+  "You aborted the media playback": "Вы прервали воспроизведение видео",
+  "A network error caused the media download to fail part-way.": "Ошибка сети вызвала сбой во время загрузки.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Не удалось загрузить видео из-за сетевого или серверного сбоя либо неподдерживаемого формата видео.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Воспроизведение прервано из-за повреждения либо в связи с тем, что видео использует функции, неподдерживаемые вашим браузером.",
+  "No compatible source was found for this media.": "Совместимые источники для этого видео отсутствуют.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Видео зашифровано, а у нас нет ключей для его расшифровки.",
+  "Play Video": "Воспроизвести видео",
+  "Close": "Закрыть",
+  "Close Modal Dialog": "Закрыть модальное окно",
+  "Modal Window": "Модальное окно",
+  "This is a modal window": "Это модальное окно",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Модальное окно можно закрыть нажав Esc или кнопку закрытия окна.",
+  ", opens captions settings dialog": ", откроется диалог настройки подписей",
+  ", opens subtitles settings dialog": ", откроется диалог настройки субтитров",
+  ", opens descriptions settings dialog": ", откроется диалог настройки описаний",
+  ", selected": ", выбрано",
+  "captions settings": "настройки подписей",
+  "subtitles settings": "настройки субтитров",
+  "descriptions settings": "настройки описаний",
+  "Text": "Текст",
+  "White": "Белый",
+  "Black": "Черный",
+  "Red": "Красный",
+  "Green": "Зеленый",
+  "Blue": "Синий",
+  "Yellow": "Желтый",
+  "Magenta": "Пурпурный",
+  "Cyan": "Голубой",
+  "Background": "Фон",
+  "Window": "Окно",
+  "Transparent": "Прозрачный",
+  "Semi-Transparent": "Полупрозрачный",
+  "Opaque": "Прозрачность",
+  "Font Size": "Размер шрифта",
+  "Text Edge Style": "Стиль края текста",
+  "None": "Ничего",
+  "Raised": "Поднятый",
+  "Depressed": "Пониженный",
+  "Uniform": "Одинаковый",
+  "Drop shadow": "Тень",
+  "Font Family": "Шрифт",
+  "Proportional Sans-Serif": "Пропорциональный без засечек",
+  "Monospace Sans-Serif": "Моноширинный без засечек",
+  "Proportional Serif": "Пропорциональный с засечками",
+  "Monospace Serif": "Моноширинный с засечками",
+  "Casual": "Казуальный",
+  "Script": "Рукописный",
+  "Small Caps": "Капитель",
+  "Reset": "Сбросить",
+  "restore all settings to the default values": "сбросить все настройки на значения по умолчанию",
+  "Done": "Готово",
+  "Caption Settings Dialog": "Диалог настроек подписи",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Начало диалогового окна. Нажмите Escape для отмены и закрытия окна",
+  "End of dialog window.": "Конец диалогового окна.",
+  "{1} is loading.": "{1} загружается.",
+  "Exit Picture-in-Picture": "Закрыть картинку в картинке",
+  "Picture-in-Picture": "Картинка в картинке",
+  "Skip forward {1} seconds": "На {1} секунд вперед",
+  "Skip backward {1} seconds": "На {1} секунд назад"
+}
diff --git a/priv/static/video.js/lang/sk.js b/priv/static/video.js/lang/sk.js
new file mode 100644
index 0000000..5926628
--- /dev/null
+++ b/priv/static/video.js/lang/sk.js
@@ -0,0 +1,85 @@
+videojs.addLanguage('sk', {
+  "Audio Player": "Zvukový prehrávač",
+  "Video Player": "Video prehrávač",
+  "Play": "Prehrať",
+  "Pause": "Pozastaviť",
+  "Replay": "Prehrať znova",
+  "Current Time": "Aktuálny čas",
+  "Duration": "Čas trvania",
+  "Remaining Time": "Zostávajúci čas",
+  "Stream Type": "Typ stopy",
+  "LIVE": "NAŽIVO",
+  "Loaded": "Načítané",
+  "Progress": "Priebeh",
+  "Progress Bar": "Ukazovateľ priebehu",
+  "progress bar timing: currentTime={1} duration={2}": "časovanie ukazovateľa priebehu: currentTime={1} duration={2}",
+  "Fullscreen": "Režim celej obrazovky",
+  "Exit Fullscreen": "Režim normálnej obrazovky",
+  "Mute": "Stlmiť",
+  "Unmute": "Zrušiť stlmenie",
+  "Playback Rate": "Rýchlosť prehrávania",
+  "Subtitles": "Titulky",
+  "subtitles off": "titulky vypnuté",
+  "Captions": "Popisky",
+  "captions off": "popisky vypnuté",
+  "Chapters": "Kapitoly",
+  "Descriptions": "Opisy",
+  "descriptions off": "opisy vypnuté",
+  "Audio Track": "Zvuková stopa",
+  "Volume Level": "Úroveň hlasitosti",
+  "You aborted the media playback": "Prerušili ste prehrávanie",
+  "A network error caused the media download to fail part-way.": "Sťahovanie súboru bolo zrušené pre chybu na sieti.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Súbor sa nepodarilo načítať pre chybu servera, sieťového pripojenia, alebo je formát súboru nepodporovaný.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Prehrávanie súboru bolo prerušené pre poškodené dáta, alebo súbor používa vlastnosti, ktoré váš prehliadač nepodporuje.",
+  "No compatible source was found for this media.": "Nebol nájdený žiaden kompatibilný zdroj pre tento súbor.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Súbor je zašifrovaný a nie je k dispozícii kľúč na rozšifrovanie.",
+  "Play Video": "Prehrať video",
+  "Close": "Zatvoriť",
+  "Close Modal Dialog": "Zatvoriť modálne okno",
+  "Modal Window": "Modálne okno",
+  "This is a modal window": "Toto je modálne okno",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Toto modálne okno je možné zatvoriť stlačením klávesy Escape, alebo aktivovaním tlačidla na zatvorenie.",
+  ", opens captions settings dialog": ", otvorí okno nastavení popiskov",
+  ", opens subtitles settings dialog": ", otvorí okno nastavení titulkov",
+  ", opens descriptions settings dialog": ", otvorí okno nastavení opisov",
+  ", selected": ", označené",
+  "captions settings": "nastavenia popiskov",
+  "subtitles settings": "nastavenia titulkov",
+  "descriptions settings": "nastavenia opisov",
+  "Text": "Text",
+  "White": "Biela",
+  "Black": "Čierna",
+  "Red": "Červená",
+  "Green": "Zelená",
+  "Blue": "Modrá",
+  "Yellow": "Žltá",
+  "Magenta": "Ružová",
+  "Cyan": "Tyrkysová",
+  "Background": "Pozadie",
+  "Window": "Okno",
+  "Transparent": "Priesvitné",
+  "Semi-Transparent": "Polopriesvitné",
+  "Opaque": "Plné",
+  "Font Size": "Veľkosť písma",
+  "Text Edge Style": "Typ okrajov písma",
+  "None": "Žiadne",
+  "Raised": "Zvýšené",
+  "Depressed": "Znížené",
+  "Uniform": "Pravidelné",
+  "Dropshadow": "S tieňom",
+  "Font Family": "Typ písma",
+  "Proportional Sans-Serif": "Proporčné bezpätkové",
+  "Monospace Sans-Serif": "Pravidelné, bezpätkové",
+  "Proportional Serif": "Proporčné pätkové",
+  "Monospace Serif": "Pravidelné pätkové",
+  "Casual": "Bežné",
+  "Script": "Písané",
+  "Small Caps": "Malé kapitálky",
+  "Reset": "Resetovať",
+  "restore all settings to the default values": "všetky nastavenia na základné hodnoty",
+  "Done": "Hotovo",
+  "Caption Settings Dialog": "Okno nastavení popiskov",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Začiatok okna. Klávesa Escape zruší a zavrie okno.",
+  "End of dialog window.": "Koniec okna.",
+  "{1} is loading.": "{1} sa načíta."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/sk.json b/priv/static/video.js/lang/sk.json
new file mode 100644
index 0000000..b2ec8e2
--- /dev/null
+++ b/priv/static/video.js/lang/sk.json
@@ -0,0 +1,85 @@
+{
+  "Audio Player": "Zvukový prehrávač",
+  "Video Player": "Video prehrávač",
+  "Play": "Prehrať",
+  "Pause": "Pozastaviť",
+  "Replay": "Prehrať znova",
+  "Current Time": "Aktuálny čas",
+  "Duration": "Čas trvania",
+  "Remaining Time": "Zostávajúci čas",
+  "Stream Type": "Typ stopy",
+  "LIVE": "NAŽIVO",
+  "Loaded": "Načítané",
+  "Progress": "Priebeh",
+  "Progress Bar": "Ukazovateľ priebehu",
+  "progress bar timing: currentTime={1} duration={2}": "časovanie ukazovateľa priebehu: currentTime={1} duration={2}",
+  "Fullscreen": "Režim celej obrazovky",
+  "Exit Fullscreen": "Režim normálnej obrazovky",
+  "Mute": "Stlmiť",
+  "Unmute": "Zrušiť stlmenie",
+  "Playback Rate": "Rýchlosť prehrávania",
+  "Subtitles": "Titulky",
+  "subtitles off": "titulky vypnuté",
+  "Captions": "Popisky",
+  "captions off": "popisky vypnuté",
+  "Chapters": "Kapitoly",
+  "Descriptions": "Opisy",
+  "descriptions off": "opisy vypnuté",
+  "Audio Track": "Zvuková stopa",
+  "Volume Level": "Úroveň hlasitosti",
+  "You aborted the media playback": "Prerušili ste prehrávanie",
+  "A network error caused the media download to fail part-way.": "Sťahovanie súboru bolo zrušené pre chybu na sieti.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Súbor sa nepodarilo načítať pre chybu servera, sieťového pripojenia, alebo je formát súboru nepodporovaný.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Prehrávanie súboru bolo prerušené pre poškodené dáta, alebo súbor používa vlastnosti, ktoré váš prehliadač nepodporuje.",
+  "No compatible source was found for this media.": "Nebol nájdený žiaden kompatibilný zdroj pre tento súbor.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Súbor je zašifrovaný a nie je k dispozícii kľúč na rozšifrovanie.",
+  "Play Video": "Prehrať video",
+  "Close": "Zatvoriť",
+  "Close Modal Dialog": "Zatvoriť modálne okno",
+  "Modal Window": "Modálne okno",
+  "This is a modal window": "Toto je modálne okno",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Toto modálne okno je možné zatvoriť stlačením klávesy Escape, alebo aktivovaním tlačidla na zatvorenie.",
+  ", opens captions settings dialog": ", otvorí okno nastavení popiskov",
+  ", opens subtitles settings dialog": ", otvorí okno nastavení titulkov",
+  ", opens descriptions settings dialog": ", otvorí okno nastavení opisov",
+  ", selected": ", označené",
+  "captions settings": "nastavenia popiskov",
+  "subtitles settings": "nastavenia titulkov",
+  "descriptions settings": "nastavenia opisov",
+  "Text": "Text",
+  "White": "Biela",
+  "Black": "Čierna",
+  "Red": "Červená",
+  "Green": "Zelená",
+  "Blue": "Modrá",
+  "Yellow": "Žltá",
+  "Magenta": "Ružová",
+  "Cyan": "Tyrkysová",
+  "Background": "Pozadie",
+  "Window": "Okno",
+  "Transparent": "Priesvitné",
+  "Semi-Transparent": "Polopriesvitné",
+  "Opaque": "Plné",
+  "Font Size": "Veľkosť písma",
+  "Text Edge Style": "Typ okrajov písma",
+  "None": "Žiadne",
+  "Raised": "Zvýšené",
+  "Depressed": "Znížené",
+  "Uniform": "Pravidelné",
+  "Dropshadow": "S tieňom",
+  "Font Family": "Typ písma",
+  "Proportional Sans-Serif": "Proporčné bezpätkové",
+  "Monospace Sans-Serif": "Pravidelné, bezpätkové",
+  "Proportional Serif": "Proporčné pätkové",
+  "Monospace Serif": "Pravidelné pätkové",
+  "Casual": "Bežné",
+  "Script": "Písané",
+  "Small Caps": "Malé kapitálky",
+  "Reset": "Resetovať",
+  "restore all settings to the default values": "všetky nastavenia na základné hodnoty",
+  "Done": "Hotovo",
+  "Caption Settings Dialog": "Okno nastavení popiskov",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Začiatok okna. Klávesa Escape zruší a zavrie okno.",
+  "End of dialog window.": "Koniec okna.",
+	"{1} is loading.": "{1} sa načíta."
+}
diff --git a/priv/static/video.js/lang/sl.js b/priv/static/video.js/lang/sl.js
new file mode 100644
index 0000000..423f2b5
--- /dev/null
+++ b/priv/static/video.js/lang/sl.js
@@ -0,0 +1,83 @@
+videojs.addLanguage('sl', {
+  "Audio Player": "Avdio predvajalnik",
+  "Video Player": "Video predvajalnik",
+  "Play": "Predvajaj",
+  "Pause": "Začasno ustavi",
+  "Replay": "Predvajaj ponovno",
+  "Current Time": "Trenutni čas",
+  "Duration": "Trajanje",
+  "Remaining Time": "Preostali čas",
+  "Stream Type": "Vrsta podatkovnega toka",
+  "LIVE": "V ŽIVO",
+  "Seek to live, currently behind live": "Spremljaj v živo (trenutno v zaostanku)",
+  "Seek to live, currently playing live": "Spremljaj v živo (trenutno v živo)",
+  "Loaded": "Naloženo",
+  "Progress": "Napredek",
+  "Progress Bar": "Vrstica napredka",
+  "progress bar timing: currentTime={1} duration={2}": "{1} od {2}",
+  "Fullscreen": "Celozaslonski prikaz",
+  "Exit Fullscreen": "Prikaz na delu zaslona",
+  "Mute": "Izključi zvok",
+  "Unmute": "Vključi zvok",
+  "Playback Rate": "Hitrost predvajanja",
+  "Subtitles": "Podnapisi",
+  "subtitles off": "podnapisi izklopljeni",
+  "Captions": "Zvočni zapis",
+  "captions off": "zvočni zapis izklopljen",
+  "Chapters": "Poglavja",
+  "Descriptions": "Opisi",
+  "descriptions off": "opisi izklopljeni",
+  "Audio Track": "Zvočni posnetek",
+  "Volume Level": "Raven glasnosti",
+  "You aborted the media playback": "Prekinili ste predvajanje.",
+  "A network error caused the media download to fail part-way.": "Prenos multimedijske datoteke ni uspel zaradi napake v omrežju.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Multimedijske datoteke ni bilo mogoče naložiti zaradi napake na strežniku oziroma omrežju ali ker ta oblika ni podprta.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Predvajanje datoteke je bilo prekinjeno zaradi napak v datoteki ali ker uporablja funkcije, ki jih brskalnik ne podpira.",
+  "No compatible source was found for this media.": "Za to datoteko ni bil najden noben združljiv vir.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Datoteka je šifrirana in predvajalnik nima ključev za njeno dešifriranje.",
+  "Play Video": "Predvajaj",
+  "Close": "Zapri",
+  "Close Modal Dialog": "Zapri modalno okno",
+  "Modal Window": "Modalno okno",
+  "This is a modal window": "To je modalno okno",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "To okno lahko zaprete s pritiskom na tipko Escape ali z aktiviranjem gumba za zapiranje.",
+  ", opens captions settings dialog": ", odpre nastavitve za zvočni zapis",
+  ", opens subtitles settings dialog": ", odpre nastavitve za podnapise",
+  ", opens descriptions settings dialog": ", odpre nastavitve za opis",
+  ", selected": ", izbrano",
+  "captions settings": "nastavitve zvočnega zapisa",
+  "subtitles settings": "nastavitve podnapisov",
+  "descriptions settings": "nastavitve opisa",
+  "Text": "Tekst",
+  "White": "Bela",
+  "Black": "Črna",
+  "Red": "Rdeča",
+  "Green": "Zelena",
+  "Blue": "Modra",
+  "Yellow": "Rumena",
+  "Magenta": "Magenta",
+  "Cyan": "Cian",
+  "Background": "Ozadje",
+  "Window": "Okno",
+  "Transparent": "Prozorno",
+  "Semi-Transparent": "Delno prozorno",
+  "Opaque": "Neprozorno",
+  "Font Size": "Velikost pisave",
+  "Text Edge Style": "Slog roba besedila",
+  "None": "Brez",
+  "Raised": "Dvignjeno",
+  "Depressed": "Vtisnjeno",
+  "Uniform": "Enakomerno",
+  "Drop shadow": "S senco",
+  "Font Family": "Družina pisave",
+  "Small Caps": "Male črke",
+  "Reset": "Ponastavi",
+  "restore all settings to the default values": "obnovi vse nastavitve na privzete vrednosti",
+  "Done": "Končano",
+  "Caption Settings Dialog": "Pogovorno okno za nastavitve zvočnega zapisa",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Začetek pogovornega okna. Escape bo preklical in zaprl okno.",
+  "End of dialog window.": "Konec pogovornega okna.",
+  "{1} is loading.": "{1} se nalaga.",
+  "Exit Picture-in-Picture": "Izhod iz slike v sliki",
+  "Picture-in-Picture": "Slika v sliki"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/sl.json b/priv/static/video.js/lang/sl.json
new file mode 100644
index 0000000..6a705d4
--- /dev/null
+++ b/priv/static/video.js/lang/sl.json
@@ -0,0 +1,83 @@
+{
+  "Audio Player": "Avdio predvajalnik",
+  "Video Player": "Video predvajalnik",
+  "Play": "Predvajaj",
+  "Pause": "Začasno ustavi",
+  "Replay": "Predvajaj ponovno",
+  "Current Time": "Trenutni čas",
+  "Duration": "Trajanje",
+  "Remaining Time": "Preostali čas",
+  "Stream Type": "Vrsta podatkovnega toka",
+  "LIVE": "V ŽIVO",
+  "Seek to live, currently behind live": "Spremljaj v živo (trenutno v zaostanku)",
+  "Seek to live, currently playing live": "Spremljaj v živo (trenutno v živo)",
+  "Loaded": "Naloženo",
+  "Progress": "Napredek",
+  "Progress Bar": "Vrstica napredka",
+  "progress bar timing: currentTime={1} duration={2}": "{1} od {2}",
+  "Fullscreen": "Celozaslonski prikaz",
+  "Exit Fullscreen": "Prikaz na delu zaslona",
+  "Mute": "Izključi zvok",
+  "Unmute": "Vključi zvok",
+  "Playback Rate": "Hitrost predvajanja",
+  "Subtitles": "Podnapisi",
+  "subtitles off": "podnapisi izklopljeni",
+  "Captions": "Zvočni zapis",
+  "captions off": "zvočni zapis izklopljen",
+  "Chapters": "Poglavja",
+  "Descriptions": "Opisi",
+  "descriptions off": "opisi izklopljeni",
+  "Audio Track": "Zvočni posnetek",
+  "Volume Level": "Raven glasnosti",
+  "You aborted the media playback": "Prekinili ste predvajanje.",
+  "A network error caused the media download to fail part-way.": "Prenos multimedijske datoteke ni uspel zaradi napake v omrežju.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Multimedijske datoteke ni bilo mogoče naložiti zaradi napake na strežniku oziroma omrežju ali ker ta oblika ni podprta.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Predvajanje datoteke je bilo prekinjeno zaradi napak v datoteki ali ker uporablja funkcije, ki jih brskalnik ne podpira.",
+  "No compatible source was found for this media.": "Za to datoteko ni bil najden noben združljiv vir.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Datoteka je šifrirana in predvajalnik nima ključev za njeno dešifriranje.",
+  "Play Video": "Predvajaj",
+  "Close": "Zapri",
+  "Close Modal Dialog": "Zapri modalno okno",
+  "Modal Window": "Modalno okno",
+  "This is a modal window": "To je modalno okno",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "To okno lahko zaprete s pritiskom na tipko Escape ali z aktiviranjem gumba za zapiranje.",
+  ", opens captions settings dialog": ", odpre nastavitve za zvočni zapis",
+  ", opens subtitles settings dialog": ", odpre nastavitve za podnapise",
+  ", opens descriptions settings dialog": ", odpre nastavitve za opis",
+  ", selected": ", izbrano",
+  "captions settings": "nastavitve zvočnega zapisa",
+  "subtitles settings": "nastavitve podnapisov",
+  "descriptions settings": "nastavitve opisa",
+  "Text": "Tekst",
+  "White": "Bela",
+  "Black": "Črna",
+  "Red": "Rdeča",
+  "Green": "Zelena",
+  "Blue": "Modra",
+  "Yellow": "Rumena",
+  "Magenta": "Magenta",
+  "Cyan": "Cian",
+  "Background": "Ozadje",
+  "Window": "Okno",
+  "Transparent": "Prozorno",
+  "Semi-Transparent": "Delno prozorno",
+  "Opaque": "Neprozorno",
+  "Font Size": "Velikost pisave",
+  "Text Edge Style": "Slog roba besedila",
+  "None": "Brez",
+  "Raised": "Dvignjeno",
+  "Depressed": "Vtisnjeno",
+  "Uniform": "Enakomerno",
+  "Drop shadow": "S senco",
+  "Font Family": "Družina pisave",
+  "Small Caps": "Male črke",
+  "Reset": "Ponastavi",
+  "restore all settings to the default values": "obnovi vse nastavitve na privzete vrednosti",
+  "Done": "Končano",
+  "Caption Settings Dialog": "Pogovorno okno za nastavitve zvočnega zapisa",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Začetek pogovornega okna. Escape bo preklical in zaprl okno.",
+  "End of dialog window.": "Konec pogovornega okna.",
+  "{1} is loading.": "{1} se nalaga.",
+  "Exit Picture-in-Picture": "Izhod iz slike v sliki",
+  "Picture-in-Picture": "Slika v sliki"
+}
diff --git a/priv/static/video.js/lang/sr.js b/priv/static/video.js/lang/sr.js
new file mode 100644
index 0000000..3071b78
--- /dev/null
+++ b/priv/static/video.js/lang/sr.js
@@ -0,0 +1,26 @@
+videojs.addLanguage('sr', {
+  "Play": "Pusti",
+  "Pause": "Pauza",
+  "Current Time": "Trenutno vreme",
+  "Duration": "Vreme trajanja",
+  "Remaining Time": "Preostalo vreme",
+  "Stream Type": "Način strimovanja",
+  "LIVE": "UŽIVO",
+  "Loaded": "Učitan",
+  "Progress": "Progres",
+  "Fullscreen": "Pun ekran",
+  "Exit Fullscreen": "Mali ekran",
+  "Mute": "Prigušen",
+  "Unmute": "Ne-prigušen",
+  "Playback Rate": "Stopa reprodukcije",
+  "Subtitles": "Podnaslov",
+  "subtitles off": "Podnaslov deaktiviran",
+  "Captions": "Titlovi",
+  "captions off": "Titlovi deaktivirani",
+  "Chapters": "Poglavlja",
+  "You aborted the media playback": "Isključili ste reprodukciju videa.",
+  "A network error caused the media download to fail part-way.": "Video se prestao preuzimati zbog greške na mreži.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Video se ne može reproducirati zbog servera, greške u mreži ili format nije podržan.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Reprodukcija videa je zaustavljenja zbog greške u formatu ili zbog verzije vašeg pretraživača.",
+  "No compatible source was found for this media.": "Nije nađen nijedan kompatibilan izvor ovog videa."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/sr.json b/priv/static/video.js/lang/sr.json
new file mode 100644
index 0000000..87884ba
--- /dev/null
+++ b/priv/static/video.js/lang/sr.json
@@ -0,0 +1,26 @@
+{
+  "Play": "Pusti",
+  "Pause": "Pauza",
+  "Current Time": "Trenutno vreme",
+  "Duration": "Vreme trajanja",
+  "Remaining Time": "Preostalo vreme",
+  "Stream Type": "Način strimovanja",
+  "LIVE": "UŽIVO",
+  "Loaded": "Učitan",
+  "Progress": "Progres",
+  "Fullscreen": "Pun ekran",
+  "Exit Fullscreen": "Mali ekran",
+  "Mute": "Prigušen",
+  "Unmute": "Ne-prigušen",
+  "Playback Rate": "Stopa reprodukcije",
+  "Subtitles": "Podnaslov",
+  "subtitles off": "Podnaslov deaktiviran",
+  "Captions": "Titlovi",
+  "captions off": "Titlovi deaktivirani",
+  "Chapters": "Poglavlja",
+  "You aborted the media playback": "Isključili ste reprodukciju videa.",
+  "A network error caused the media download to fail part-way.": "Video se prestao preuzimati zbog greške na mreži.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Video se ne može reproducirati zbog servera, greške u mreži ili format nije podržan.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Reprodukcija videa je zaustavljenja zbog greške u formatu ili zbog verzije vašeg pretraživača.",
+  "No compatible source was found for this media.": "Nije nađen nijedan kompatibilan izvor ovog videa."
+}
diff --git a/priv/static/video.js/lang/sv.js b/priv/static/video.js/lang/sv.js
new file mode 100644
index 0000000..8ce24f2
--- /dev/null
+++ b/priv/static/video.js/lang/sv.js
@@ -0,0 +1,87 @@
+videojs.addLanguage('sv', {
+  ", opens captions settings dialog": ", öppnar dialogruta för textning",
+  ", opens descriptions settings dialog": ", öppnar dialogruta för inställningar",
+  ", opens subtitles settings dialog": ", öppnar dialogruta för undertexter",
+  ", selected": ", vald",
+  "A network error caused the media download to fail part-way.": "Ett nätverksfel gjorde att nedladdningen av videon avbröts.",
+  "Audio Player": "Ljudspelare",
+  "Audio Track": "Ljudspår",
+  "Background": "Bakgrund",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Början av dialogfönster. Escape avbryter och stänger fönstret.",
+  "Black": "Svart",
+  "Blue": "Blå",
+  "Caption Settings Dialog": "Dialogruta för textningsinställningar",
+  "Captions": "Text på",
+  "Casual": "Casual",
+  "Chapters": "Kapitel",
+  "Close": "Stäng",
+  "Close Modal Dialog": "Stäng dialogruta",
+  "Current Time": "Aktuell tid",
+  "Cyan": "Cyan",
+  "Depressed": "Deprimerad",
+  "Descriptions": "Beskrivningar",
+  "Done": "Klar",
+  "Drop shadow": "DropSkugga",
+  "Duration": "Total tid",
+  "End of dialog window.": "Slutet av dialogfönster.",
+  "Font Family": "Typsnittsfamilj",
+  "Font Size": "Textstorlek",
+  "Fullscreen": "Fullskärm",
+  "Green": "Grön",
+  "LIVE": "LIVE",
+  "Loaded": "Laddad",
+  "Magenta": "Magenta",
+  "Modal Window": "dialogruta",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Mute": "Ljud av",
+  "No compatible source was found for this media.": "Det gick inte att hitta någon kompatibel källa för den här videon.",
+  "Exit Fullscreen": "Ej fullskärm",
+  "None": "Ingen",
+  "Opaque": "Opak",
+  "Pause": "Pausa",
+  "Play": "Spela",
+  "Play Video": "Spela upp video",
+  "Playback Rate": "Uppspelningshastighet",
+  "Progress": "Förlopp",
+  "Progress Bar": "förloppsmätare",
+  "Proportional Sans-Serif": "Proportionell Sans-Serif",
+  "Proportional Serif": "Proportionell Serif",
+  "Raised": "Raised",
+  "Red": "Röd",
+  "Remaining Time": "Återstående tid",
+  "Replay": "Spela upp igen",
+  "Reset": "Återställ",
+  "Script": "Manus",
+  "Seek to live, currently behind live": "Återgå till live, uppspelningen är inte live",
+  "Seek to live, currently playing live": "Återgå till live, uppspelningen är live",
+  "Semi-Transparent": "Semi-transparent",
+  "Small Caps": "Small-Caps",
+  "Stream Type": "Strömningstyp",
+  "Subtitles": "Text på",
+  "Text": "Text",
+  "Text Edge Style": "Textkantstil",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Det gick inte att ladda videon, antingen på grund av ett server- eller nätverksfel, eller för att formatet inte stöds.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Mediat är krypterat och vi har inte nycklarna för att dekryptera det.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Uppspelningen avbröts på grund av att videon är skadad, eller också för att videon använder funktioner som din webbläsare inte stöder.",
+  "This is a modal window": "Det här är ett dialogruta",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Den här dialogrutan kan stängas genom att trycka på Escape-tangenten eller stäng knappen.",
+  "Transparent": "Transparent",
+  "Uniform": "Uniform",
+  "Unmute": "Ljud på",
+  "Video Player": "Videospelare",
+  "Volume Level": "Volymnivå",
+  "White": "Vit",
+  "Window": "Fönster",
+  "Yellow": "Gul",
+  "You aborted the media playback": "Du har avbrutit videouppspelningen.",
+  "captions off": "Text av",
+  "captions settings": "textningsinställningar",
+  "descriptions off": "beskrivningar av",
+  "descriptions settings": "beskrivningsinställningar",
+  "progress bar timing: currentTime={1} duration={2}": "{1} av {2}",
+  "restore all settings to the default values": "återställ alla inställningar till standardvärden",
+  "subtitles off": "Text av",
+  "subtitles settings": "undertextsinställningar",
+  "{1} is loading.": "{1} laddar."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/sv.json b/priv/static/video.js/lang/sv.json
new file mode 100644
index 0000000..889269c
--- /dev/null
+++ b/priv/static/video.js/lang/sv.json
@@ -0,0 +1,87 @@
+{
+  ", opens captions settings dialog": ", öppnar dialogruta för textning",
+  ", opens descriptions settings dialog": ", öppnar dialogruta för inställningar",
+  ", opens subtitles settings dialog": ", öppnar dialogruta för undertexter",
+  ", selected": ", vald",
+  "A network error caused the media download to fail part-way.": "Ett nätverksfel gjorde att nedladdningen av videon avbröts.",
+  "Audio Player": "Ljudspelare",
+  "Audio Track": "Ljudspår",
+  "Background": "Bakgrund",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Början av dialogfönster. Escape avbryter och stänger fönstret.",
+  "Black": "Svart",
+  "Blue": "Blå",
+  "Caption Settings Dialog": "Dialogruta för textningsinställningar",
+  "Captions": "Text på",
+  "Casual": "Casual",
+  "Chapters": "Kapitel",
+  "Close": "Stäng",
+  "Close Modal Dialog": "Stäng dialogruta",
+  "Current Time": "Aktuell tid",
+  "Cyan": "Cyan",
+  "Depressed": "Deprimerad",
+  "Descriptions": "Beskrivningar",
+  "Done": "Klar",
+  "Drop shadow": "DropSkugga",
+  "Duration": "Total tid",
+  "End of dialog window.": "Slutet av dialogfönster.",
+  "Font Family": "Typsnittsfamilj",
+  "Font Size": "Textstorlek",
+  "Fullscreen": "Fullskärm",
+  "Green": "Grön",
+  "LIVE": "LIVE",
+  "Loaded": "Laddad",
+  "Magenta": "Magenta",
+  "Modal Window": "dialogruta",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Mute": "Ljud av",
+  "No compatible source was found for this media.": "Det gick inte att hitta någon kompatibel källa för den här videon.",
+  "Exit Fullscreen": "Ej fullskärm",
+  "None": "Ingen",
+  "Opaque": "Opak",
+  "Pause": "Pausa",
+  "Play": "Spela",
+  "Play Video": "Spela upp video",
+  "Playback Rate": "Uppspelningshastighet",
+  "Progress": "Förlopp",
+  "Progress Bar": "förloppsmätare",
+  "Proportional Sans-Serif": "Proportionell Sans-Serif",
+  "Proportional Serif": "Proportionell Serif",
+  "Raised": "Raised",
+  "Red": "Röd",
+  "Remaining Time": "Återstående tid",
+  "Replay": "Spela upp igen",
+  "Reset": "Återställ",
+  "Script": "Manus",
+  "Seek to live, currently behind live": "Återgå till live, uppspelningen är inte live",
+  "Seek to live, currently playing live": "Återgå till live, uppspelningen är live",
+  "Semi-Transparent": "Semi-transparent",
+  "Small Caps": "Small-Caps",
+  "Stream Type": "Strömningstyp",
+  "Subtitles": "Text på",
+  "Text": "Text",
+  "Text Edge Style": "Textkantstil",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Det gick inte att ladda videon, antingen på grund av ett server- eller nätverksfel, eller för att formatet inte stöds.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Mediat är krypterat och vi har inte nycklarna för att dekryptera det.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Uppspelningen avbröts på grund av att videon är skadad, eller också för att videon använder funktioner som din webbläsare inte stöder.",
+  "This is a modal window": "Det här är ett dialogruta",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Den här dialogrutan kan stängas genom att trycka på Escape-tangenten eller stäng knappen.",
+  "Transparent": "Transparent",
+  "Uniform": "Uniform",
+  "Unmute": "Ljud på",
+  "Video Player": "Videospelare",
+  "Volume Level": "Volymnivå",
+  "White": "Vit",
+  "Window": "Fönster",
+  "Yellow": "Gul",
+  "You aborted the media playback": "Du har avbrutit videouppspelningen.",
+  "captions off": "Text av",
+  "captions settings": "textningsinställningar",
+  "descriptions off": "beskrivningar av",
+  "descriptions settings": "beskrivningsinställningar",
+  "progress bar timing: currentTime={1} duration={2}": "{1} av {2}",
+  "restore all settings to the default values": "återställ alla inställningar till standardvärden",
+  "subtitles off": "Text av",
+  "subtitles settings": "undertextsinställningar",
+  "{1} is loading.": "{1} laddar."
+}
diff --git a/priv/static/video.js/lang/te.js b/priv/static/video.js/lang/te.js
new file mode 100644
index 0000000..1b2db33
--- /dev/null
+++ b/priv/static/video.js/lang/te.js
@@ -0,0 +1,89 @@
+videojs.addLanguage('te', {
+  "Audio Player": "ఆడియో ప్లేయర్",
+  "Video Player": "వీడియో ప్లేయర్",
+  "Play": "ప్లే",
+  "Pause": "పాజ్",
+  "Replay": "రీప్లే",
+  "Current Time": "ప్రస్తుత సమయం",
+  "Duration": "వ్యవధి",
+  "Remaining Time": "మిగిలిన సమయం",
+  "Stream Type": "స్ట్రీమ్ రకం",
+  "LIVE": "లైవ్",
+  "Seek to live, currently behind live": "ప్రత్యక్ష ప్రసారానికి వెళ్ళండి, ప్రస్తుతం ప్రత్యక్ష ప్రసారానికి వెనుకబడి ఉంది",
+  "Seek to live, currently playing live": "ప్రత్యక్ష ప్రసారానికి వెళ్ళండి, ప్రస్తుతం ప్రత్యక్ష ప్రసారం అవుతోంది",
+  "Loaded": "లోడ్ చేయబడింది",
+  "Progress": "పురోగతి",
+  "Progress Bar": "ప్రోగ్రెస్ బార్",
+  "progress bar timing: currentTime={1} duration={2}": "{1} యొక్క {2}",
+  "Fullscreen": "పూర్తి స్క్రీన్",
+  "Exit Fullscreen": "పూర్తి స్క్రీన్ నుండి నిష్క్రమించండి",
+  "Mute": "మ్యూట్",
+  "Unmute": "అన్మ్యూట్ చేయండి",
+  "Playback Rate": "ప్లేబ్యాక్ రేట్",
+  "Subtitles": "ఉపశీర్షికలు",
+  "subtitles off": "ఉపశీర్షికలు ఆఫ్ చేయండి",
+  "Captions": "శీర్షికలు",
+  "captions off": "శీర్షికలు ఆఫ్ చేయండి",
+  "Chapters": "అధ్యాయాలు",
+  "Descriptions": "వివరణలు",
+  "descriptions off": "వివరణలు ఆఫ్ చేయండి",
+  "Audio Track": "ఆడియో ట్రాక్",
+  "Volume Level": "వాల్యూమ్ స్థాయి",
+  "You aborted the media playback": "మీరు మీడియా ప్లేబ్యాక్‌ను రద్దు చేశారు",
+  "A network error caused the media download to fail part-way.": "నెట్‌వర్క్ లోపం వలన మీడియా డౌన్‌లోడ్ విఫలమైంది.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "సర్వర్ లేదా నెట్‌వర్క్ విఫలమైనందున లేదా ఫార్మాట్‌కు మద్దతు లేనందున మీడియాను లోడ్ చేయడం సాధ్యం కాలేదు.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "అవినీతి సమస్య కారణంగా లేదా మీ బ్రౌజర్ మద్దతు ఇవ్వని లక్షణాలను మీడియా ఉపయోగించినందున మీడియా ప్లేబ్యాక్ నిలిపివేయబడింది.",
+  "No compatible source was found for this media.": "ఈ మీడియాకు అనుకూలమైన మూలం కనుగొనబడలేదు.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "మీడియా గుప్తీకరించబడింది మరియు దానిని డీక్రిప్ట్ చేయడానికి మాకు కీలు లేవు.",
+  "Play Video": "వీడియో ప్లే చేయండి",
+  "Close": "మూసివేయండి",
+  "Close Modal Dialog": "మోడల్ డైలాగ్‌ను మూసివేయండి",
+  "Modal Window": "మోడల్ విండో",
+  "This is a modal window": "ఇది మోడల్ విండో",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "ఎస్కేప్ కీని నొక్కడం ద్వారా లేదా క్లోజ్ బటన్‌ను యాక్టివేట్ చేయడం ద్వారా ఈ మోడల్‌ను మూసివేయవచ్చు.",
+  ", opens captions settings dialog": ", శీర్షికల సెట్టింగ్‌ల డైలాగ్‌ను తెరుస్తుంది",
+  ", opens subtitles settings dialog": ", ఉపశీర్షికల సెట్టింగుల డైలాగ్‌ను తెరుస్తుంది",
+  ", opens descriptions settings dialog": ", వివరణల సెట్టింగుల డైలాగ్‌ను తెరుస్తుంది",
+  ", selected": ", ఎంచుకోబడింది",
+  "captions settings": "శీర్షికల సెట్టింగులు",
+  "subtitles settings": "ఉపశీర్షికల సెట్టింగులు",
+  "descriptions settings": "వివరణల సెట్టింగులు",
+  "Text": "వచనం",
+  "White": "తెలుపు",
+  "Black": "నలుపు",
+  "Red": "ఎరుపు",
+  "Green": "ఆకుపచ్చ",
+  "Blue": "నీలం",
+  "Yellow": "పసుపు",
+  "Magenta": "మెజెంటా",
+  "Cyan": "సియాన్",
+  "Background": "నేపధ్యం",
+  "Window": "కిటికీ",
+  "Transparent": "పారదర్శక",
+  "Semi-Transparent": "సెమీ-పారదర్శక",
+  "Opaque": "అపారదర్శక",
+  "Font Size": "ఫాంట్ పరిమాణం",
+  "Text Edge Style": "టెక్స్ట్ ఎడ్జ్ శైలి",
+  "None": "ఏదీ లేదు",
+  "Raised": "పెంచబడింది",
+  "Depressed": "అణగారిన",
+  "Uniform": "ఏకరీతి",
+  "Drop shadow": "డ్రాప్‌షాడో",
+  "Font Family": "ఫాంట్ కుటుంబం",
+  "Proportional Sans-Serif": "ప్రొపోర్షన్ సాన్స్-సెరిఫ్",
+  "Monospace Sans-Serif": "మోనోస్పేస్ సాన్స్-సెరిఫ్",
+  "Proportional Serif": "ప్రొపోర్షన్ సెరిఫ్",
+  "Monospace Serif": "మోనోస్పేస్ సెరిఫ్",
+  "Casual": "సాధారణ",
+  "Script": "స్క్రిప్ట్",
+  "Small Caps": "చిన్న క్యాప్స్",
+  "Reset": "రీసెట్ చేయండి",
+  "restore all settings to the default values": "అన్ని సెట్టింగులను డిఫాల్ట్ విలువలకు పునరుద్ధరించండి",
+  "Done": "పూర్తయింది",
+  "Caption Settings Dialog": "శీర్షిక సెట్టింగ్‌ల డైలాగ్",
+  "Beginning of dialog window. Escape will cancel and close the window.": "డైలాగ్ విండో ప్రారంభం. ఎస్కేప్ విండోను రద్దు చేస్తుంది మరియు మూసివేస్తుంది.",
+  "End of dialog window.": "డైలాగ్ విండో ముగింపు.",
+  "{1} is loading.": "{1} లోడ్ అవుతోంది.",
+  "Exit Picture-in-Picture": "పిక్చర్-ఇన్-పిక్చర్ నుండి నిష్క్రమించండి",
+  "Picture-in-Picture": "పిక్చర్-ఇన్-పిక్చర్"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/te.json b/priv/static/video.js/lang/te.json
new file mode 100644
index 0000000..39de708
--- /dev/null
+++ b/priv/static/video.js/lang/te.json
@@ -0,0 +1,89 @@
+{
+  "Audio Player": "ఆడియో ప్లేయర్",
+  "Video Player": "వీడియో ప్లేయర్",
+  "Play": "ప్లే",
+  "Pause": "పాజ్",
+  "Replay": "రీప్లే",
+  "Current Time": "ప్రస్తుత సమయం",
+  "Duration": "వ్యవధి",
+  "Remaining Time": "మిగిలిన సమయం",
+  "Stream Type": "స్ట్రీమ్ రకం",
+  "LIVE": "లైవ్",
+  "Seek to live, currently behind live": "ప్రత్యక్ష ప్రసారానికి వెళ్ళండి, ప్రస్తుతం ప్రత్యక్ష ప్రసారానికి వెనుకబడి ఉంది",
+  "Seek to live, currently playing live": "ప్రత్యక్ష ప్రసారానికి వెళ్ళండి, ప్రస్తుతం ప్రత్యక్ష ప్రసారం అవుతోంది",
+  "Loaded": "లోడ్ చేయబడింది",
+  "Progress": "పురోగతి",
+  "Progress Bar": "ప్రోగ్రెస్ బార్",
+  "progress bar timing: currentTime={1} duration={2}": "{1} యొక్క {2}",
+  "Fullscreen": "పూర్తి స్క్రీన్",
+  "Exit Fullscreen": "పూర్తి స్క్రీన్ నుండి నిష్క్రమించండి",
+  "Mute": "మ్యూట్",
+  "Unmute": "అన్మ్యూట్ చేయండి",
+  "Playback Rate": "ప్లేబ్యాక్ రేట్",
+  "Subtitles": "ఉపశీర్షికలు",
+  "subtitles off": "ఉపశీర్షికలు ఆఫ్ చేయండి",
+  "Captions": "శీర్షికలు",
+  "captions off": "శీర్షికలు ఆఫ్ చేయండి",
+  "Chapters": "అధ్యాయాలు",
+  "Descriptions": "వివరణలు",
+  "descriptions off": "వివరణలు ఆఫ్ చేయండి",
+  "Audio Track": "ఆడియో ట్రాక్",
+  "Volume Level": "వాల్యూమ్ స్థాయి",
+  "You aborted the media playback": "మీరు మీడియా ప్లేబ్యాక్‌ను రద్దు చేశారు",
+  "A network error caused the media download to fail part-way.": "నెట్‌వర్క్ లోపం వలన మీడియా డౌన్‌లోడ్ విఫలమైంది.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "సర్వర్ లేదా నెట్‌వర్క్ విఫలమైనందున లేదా ఫార్మాట్‌కు మద్దతు లేనందున మీడియాను లోడ్ చేయడం సాధ్యం కాలేదు.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "అవినీతి సమస్య కారణంగా లేదా మీ బ్రౌజర్ మద్దతు ఇవ్వని లక్షణాలను మీడియా ఉపయోగించినందున మీడియా ప్లేబ్యాక్ నిలిపివేయబడింది.",
+  "No compatible source was found for this media.": "ఈ మీడియాకు అనుకూలమైన మూలం కనుగొనబడలేదు.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "మీడియా గుప్తీకరించబడింది మరియు దానిని డీక్రిప్ట్ చేయడానికి మాకు కీలు లేవు.",
+  "Play Video": "వీడియో ప్లే చేయండి",
+  "Close": "మూసివేయండి",
+  "Close Modal Dialog": "మోడల్ డైలాగ్‌ను మూసివేయండి",
+  "Modal Window": "మోడల్ విండో",
+  "This is a modal window": "ఇది మోడల్ విండో",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "ఎస్కేప్ కీని నొక్కడం ద్వారా లేదా క్లోజ్ బటన్‌ను యాక్టివేట్ చేయడం ద్వారా ఈ మోడల్‌ను మూసివేయవచ్చు.",
+  ", opens captions settings dialog": ", శీర్షికల సెట్టింగ్‌ల డైలాగ్‌ను తెరుస్తుంది",
+  ", opens subtitles settings dialog": ", ఉపశీర్షికల సెట్టింగుల డైలాగ్‌ను తెరుస్తుంది",
+  ", opens descriptions settings dialog": ", వివరణల సెట్టింగుల డైలాగ్‌ను తెరుస్తుంది",
+  ", selected": ", ఎంచుకోబడింది",
+  "captions settings": "శీర్షికల సెట్టింగులు",
+  "subtitles settings": "ఉపశీర్షికల సెట్టింగులు",
+  "descriptions settings": "వివరణల సెట్టింగులు",
+  "Text": "వచనం",
+  "White": "తెలుపు",
+  "Black": "నలుపు",
+  "Red": "ఎరుపు",
+  "Green": "ఆకుపచ్చ",
+  "Blue": "నీలం",
+  "Yellow": "పసుపు",
+  "Magenta": "మెజెంటా",
+  "Cyan": "సియాన్",
+  "Background": "నేపధ్యం",
+  "Window": "కిటికీ",
+  "Transparent": "పారదర్శక",
+  "Semi-Transparent": "సెమీ-పారదర్శక",
+  "Opaque": "అపారదర్శక",
+  "Font Size": "ఫాంట్ పరిమాణం",
+  "Text Edge Style": "టెక్స్ట్ ఎడ్జ్ శైలి",
+  "None": "ఏదీ లేదు",
+  "Raised": "పెంచబడింది",
+  "Depressed": "అణగారిన",
+  "Uniform": "ఏకరీతి",
+  "Drop shadow": "డ్రాప్‌షాడో",
+  "Font Family": "ఫాంట్ కుటుంబం",
+  "Proportional Sans-Serif": "ప్రొపోర్షన్ సాన్స్-సెరిఫ్",
+  "Monospace Sans-Serif": "మోనోస్పేస్ సాన్స్-సెరిఫ్",
+  "Proportional Serif": "ప్రొపోర్షన్ సెరిఫ్",
+  "Monospace Serif": "మోనోస్పేస్ సెరిఫ్",
+  "Casual": "సాధారణ",
+  "Script": "స్క్రిప్ట్",
+  "Small Caps": "చిన్న క్యాప్స్",
+  "Reset": "రీసెట్ చేయండి",
+  "restore all settings to the default values": "అన్ని సెట్టింగులను డిఫాల్ట్ విలువలకు పునరుద్ధరించండి",
+  "Done": "పూర్తయింది",
+  "Caption Settings Dialog": "శీర్షిక సెట్టింగ్‌ల డైలాగ్",
+  "Beginning of dialog window. Escape will cancel and close the window.": "డైలాగ్ విండో ప్రారంభం. ఎస్కేప్ విండోను రద్దు చేస్తుంది మరియు మూసివేస్తుంది.",
+  "End of dialog window.": "డైలాగ్ విండో ముగింపు.",
+  "{1} is loading.": "{1} లోడ్ అవుతోంది.",
+  "Exit Picture-in-Picture": "పిక్చర్-ఇన్-పిక్చర్ నుండి నిష్క్రమించండి",
+  "Picture-in-Picture": "పిక్చర్-ఇన్-పిక్చర్"
+}
diff --git a/priv/static/video.js/lang/th.js b/priv/static/video.js/lang/th.js
new file mode 100644
index 0000000..44dbdea
--- /dev/null
+++ b/priv/static/video.js/lang/th.js
@@ -0,0 +1,89 @@
+videojs.addLanguage('th', {
+  "Audio Player": "โปรแกรมเล่นเสียง",
+  "Video Player": "โปรแกรมเล่นวิดีโอ",
+  "Play": "เล่น",
+  "Pause": "หยุดชั่วคราว",
+  "Replay": "เล่นซ้ำ",
+  "Current Time": "เวลาปัจจุบัน",
+  "Duration": "ระยะเวลา",
+  "Remaining Time": "เวลาที่เหลือ",
+  "Stream Type": "ประเภทของสตรีม",
+  "LIVE": "ถ่ายทอดสด",
+  "Seek to live, currently behind live": "หาโอกาสที่จะถ่ายทอดสด กำลังอยู่เบื้องหลังการถ่ายทอดสดในขณะนี้",
+  "Seek to live, currently playing live": "หาโอกาสที่จะถ่ายทอดสด กำลังเล่นแบบสดในขณะนี้",
+  "Loaded": "โหลดแล้ว",
+  "Progress": "ความคืบหน้า",
+  "Progress Bar": "แถบแสดงความคืบหน้า",
+  "progress bar timing: currentTime={1} duration={2}": "{1} ของ {2}",
+  "Fullscreen": "แบบเต็มหน้าจอ",
+  "Exit Fullscreen": "ไม่ใช่แบบเต็มหน้าจอ",
+  "Mute": "ปิดเสียง",
+  "Unmute": "ยกเลิกการปิดเสียง",
+  "Playback Rate": "อัตราการเล่น",
+  "Subtitles": "คำบรรยาย",
+  "subtitles off": "ปิดคำบรรยาย",
+  "Captions": "คำอธิบายภาพ",
+  "captions off": "ปิดคำอธิบายภาพ",
+  "Chapters": "บท",
+  "Descriptions": "คำอธิบาย",
+  "descriptions off": "ปิดคำอธิบาย",
+  "Audio Track": "แทร็กเสียง",
+  "Volume Level": "ระดับเสียง",
+  "You aborted the media playback": "คุณยกเลิกการเล่นสื่อแล้ว",
+  "A network error caused the media download to fail part-way.": "ข้อผิดพลาดของเครือข่ายทำให้การดาวน์โหลดสื่อไม่สำเร็จเป็นบางส่วน",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "ไม่สามารถโหลดสื่อได้ โดยอาจเป็นเพราะเซิร์ฟเวอร์หรือเครือข่ายล้มเหลว หรือเพราะรูปแบบไม่ได้รับการรองรับ",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "การเล่นสื่อถูกยกเลิกเนื่องจากปัญหาเกี่ยวกับความเสียหาย หรือเนื่องจากสื่อใช้ฟีเจอร์ที่เบราว์เซอร์ของคุณไม่รองรับ",
+  "No compatible source was found for this media.": "ไม่พบแหล่งที่เข้ากันได้สำหรับสื่อนี้",
+  "The media is encrypted and we do not have the keys to decrypt it.": "สื่อถูกเข้ารหัสลับแล้ว และเราไม่มีคีย์ที่จะถอดรหัสลับดังกล่าว",
+  "Play Video": "เล่นวิดีโอ",
+  "Close": "ปิด",
+  "Close Modal Dialog": "ปิดกล่องโต้ตอบโมดอล",
+  "Modal Window": "หน้าต่างโมดอล",
+  "This is a modal window": "รายการนี้เป็นหน้าต่างโมดอล",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "คุณสามารถปิดโมดอลนี้โดยกดปุ่ม Escape หรือเปิดใช้งานปุ่มปิด",
+  ", opens captions settings dialog": ", เปิดกล่องโต้ตอบการตั้งค่าคำอธิบายภาพ",
+  ", opens subtitles settings dialog": ", เปิดกล่องโต้ตอบการตั้งค่าคำบรรยาย",
+  ", opens descriptions settings dialog": ", เปิดกล่องโต้ตอบการตั้งค่าคำอธิบาย",
+  ", selected": ", เลือกแล้ว",
+  "captions settings": "การตั้งค่าคำอธิบายภาพ",
+  "subtitles settings": "การตั้งค่าคำบรรยาย",
+  "descriptions settings": "การตั้งค่าคำอธิบาย",
+  "Text": "ข้อความ",
+  "White": "สีขาว",
+  "Black": "สีดำ",
+  "Red": "สีแดง",
+  "Green": "สีเขียว",
+  "Blue": "สีน้ำเงิน",
+  "Yellow": "สีเหลือง",
+  "Magenta": "สีม่วงแดง",
+  "Cyan": "สีน้ำเงินอมเขียว",
+  "Background": "พื้นหลัง",
+  "Window": "หน้าต่าง",
+  "Transparent": "โปร่งใส",
+  "Semi-Transparent": "กึ่งโปร่งใส",
+  "Opaque": "ทึบ",
+  "Font Size": "ขนาดแบบอักษร",
+  "Text Edge Style": "ลักษณะขอบข้อความ",
+  "None": "ไม่มี",
+  "Raised": "ยกขึ้น",
+  "Depressed": "ปล่อยออก",
+  "Uniform": "รูปแบบ",
+  "Drop shadow": "เพิ่มเงา",
+  "Font Family": "ตระกูลแบบอักษร",
+  "Proportional Sans-Serif": "Sans-Serif ตามสัดส่วน",
+  "Monospace Sans-Serif": "Sans-Serif ช่องว่างเดี่ยว",
+  "Proportional Serif": "Serif ตามสัดส่วน",
+  "Monospace Serif": "Serif ช่องว่างเดี่ยว",
+  "Casual": "ไม่เป็นทางการ",
+  "Script": "สคริปต์",
+  "Small Caps": "ตัวพิมพ์ใหญ่ขนาดเล็ก",
+  "Reset": "รีเซ็ต",
+  "restore all settings to the default values": "คืนค่าการตั้งค่าท้้งหมดให้เป็นค่าเริ่มต้น",
+  "Done": "เสร็จสิ้น",
+  "Caption Settings Dialog": "กล่องโต้ตอบการตั้งค่าคำอธิบายภาพ",
+  "Beginning of dialog window. Escape will cancel and close the window.": "การเริ่มต้นหน้าต่างกล่องโต้ตอบ Escape จะยกเลิกและปิดหน้าต่าง",
+  "End of dialog window.": "สิ้นสุดหน้าต่างกล่องโต้ตอบ",
+  "{1} is loading.": "กำลังโหลด {1}",
+  "Exit Picture-in-Picture": "ออกจากการเล่นภาพควบคู่",
+  "Picture-in-Picture": "การเล่นภาพควบคู่"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/th.json b/priv/static/video.js/lang/th.json
new file mode 100644
index 0000000..fd97e08
--- /dev/null
+++ b/priv/static/video.js/lang/th.json
@@ -0,0 +1,89 @@
+{
+  "Audio Player": "โปรแกรมเล่นเสียง",
+  "Video Player": "โปรแกรมเล่นวิดีโอ",
+  "Play": "เล่น",
+  "Pause": "หยุดชั่วคราว",
+  "Replay": "เล่นซ้ำ",
+  "Current Time": "เวลาปัจจุบัน",
+  "Duration": "ระยะเวลา",
+  "Remaining Time": "เวลาที่เหลือ",
+  "Stream Type": "ประเภทของสตรีม",
+  "LIVE": "ถ่ายทอดสด",
+  "Seek to live, currently behind live": "หาโอกาสที่จะถ่ายทอดสด กำลังอยู่เบื้องหลังการถ่ายทอดสดในขณะนี้",
+  "Seek to live, currently playing live": "หาโอกาสที่จะถ่ายทอดสด กำลังเล่นแบบสดในขณะนี้",
+  "Loaded": "โหลดแล้ว",
+  "Progress": "ความคืบหน้า",
+  "Progress Bar": "แถบแสดงความคืบหน้า",
+  "progress bar timing: currentTime={1} duration={2}": "{1} ของ {2}",
+  "Fullscreen": "แบบเต็มหน้าจอ",
+  "Exit Fullscreen": "ไม่ใช่แบบเต็มหน้าจอ",
+  "Mute": "ปิดเสียง",
+  "Unmute": "ยกเลิกการปิดเสียง",
+  "Playback Rate": "อัตราการเล่น",
+  "Subtitles": "คำบรรยาย",
+  "subtitles off": "ปิดคำบรรยาย",
+  "Captions": "คำอธิบายภาพ",
+  "captions off": "ปิดคำอธิบายภาพ",
+  "Chapters": "บท",
+  "Descriptions": "คำอธิบาย",
+  "descriptions off": "ปิดคำอธิบาย",
+  "Audio Track": "แทร็กเสียง",
+  "Volume Level": "ระดับเสียง",
+  "You aborted the media playback": "คุณยกเลิกการเล่นสื่อแล้ว",
+  "A network error caused the media download to fail part-way.": "ข้อผิดพลาดของเครือข่ายทำให้การดาวน์โหลดสื่อไม่สำเร็จเป็นบางส่วน",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "ไม่สามารถโหลดสื่อได้ โดยอาจเป็นเพราะเซิร์ฟเวอร์หรือเครือข่ายล้มเหลว หรือเพราะรูปแบบไม่ได้รับการรองรับ",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "การเล่นสื่อถูกยกเลิกเนื่องจากปัญหาเกี่ยวกับความเสียหาย หรือเนื่องจากสื่อใช้ฟีเจอร์ที่เบราว์เซอร์ของคุณไม่รองรับ",
+  "No compatible source was found for this media.": "ไม่พบแหล่งที่เข้ากันได้สำหรับสื่อนี้",
+  "The media is encrypted and we do not have the keys to decrypt it.": "สื่อถูกเข้ารหัสลับแล้ว และเราไม่มีคีย์ที่จะถอดรหัสลับดังกล่าว",
+  "Play Video": "เล่นวิดีโอ",
+  "Close": "ปิด",
+  "Close Modal Dialog": "ปิดกล่องโต้ตอบโมดอล",
+  "Modal Window": "หน้าต่างโมดอล",
+  "This is a modal window": "รายการนี้เป็นหน้าต่างโมดอล",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "คุณสามารถปิดโมดอลนี้โดยกดปุ่ม Escape หรือเปิดใช้งานปุ่มปิด",
+  ", opens captions settings dialog": ", เปิดกล่องโต้ตอบการตั้งค่าคำอธิบายภาพ",
+  ", opens subtitles settings dialog": ", เปิดกล่องโต้ตอบการตั้งค่าคำบรรยาย",
+  ", opens descriptions settings dialog": ", เปิดกล่องโต้ตอบการตั้งค่าคำอธิบาย",
+  ", selected": ", เลือกแล้ว",
+  "captions settings": "การตั้งค่าคำอธิบายภาพ",
+  "subtitles settings": "การตั้งค่าคำบรรยาย",
+  "descriptions settings": "การตั้งค่าคำอธิบาย",
+  "Text": "ข้อความ",
+  "White": "สีขาว",
+  "Black": "สีดำ",
+  "Red": "สีแดง",
+  "Green": "สีเขียว",
+  "Blue": "สีน้ำเงิน",
+  "Yellow": "สีเหลือง",
+  "Magenta": "สีม่วงแดง",
+  "Cyan": "สีน้ำเงินอมเขียว",
+  "Background": "พื้นหลัง",
+  "Window": "หน้าต่าง",
+  "Transparent": "โปร่งใส",
+  "Semi-Transparent": "กึ่งโปร่งใส",
+  "Opaque": "ทึบ",
+  "Font Size": "ขนาดแบบอักษร",
+  "Text Edge Style": "ลักษณะขอบข้อความ",
+  "None": "ไม่มี",
+  "Raised": "ยกขึ้น",
+  "Depressed": "ปล่อยออก",
+  "Uniform": "รูปแบบ",
+  "Drop shadow": "เพิ่มเงา",
+  "Font Family": "ตระกูลแบบอักษร",
+  "Proportional Sans-Serif": "Sans-Serif ตามสัดส่วน",
+  "Monospace Sans-Serif": "Sans-Serif ช่องว่างเดี่ยว",
+  "Proportional Serif": "Serif ตามสัดส่วน",
+  "Monospace Serif": "Serif ช่องว่างเดี่ยว",
+  "Casual": "ไม่เป็นทางการ",
+  "Script": "สคริปต์",
+  "Small Caps": "ตัวพิมพ์ใหญ่ขนาดเล็ก",
+  "Reset": "รีเซ็ต",
+  "restore all settings to the default values": "คืนค่าการตั้งค่าท้้งหมดให้เป็นค่าเริ่มต้น",
+  "Done": "เสร็จสิ้น",
+  "Caption Settings Dialog": "กล่องโต้ตอบการตั้งค่าคำอธิบายภาพ",
+  "Beginning of dialog window. Escape will cancel and close the window.": "การเริ่มต้นหน้าต่างกล่องโต้ตอบ Escape จะยกเลิกและปิดหน้าต่าง",
+  "End of dialog window.": "สิ้นสุดหน้าต่างกล่องโต้ตอบ",
+  "{1} is loading.": "กำลังโหลด {1}",
+  "Exit Picture-in-Picture": "ออกจากการเล่นภาพควบคู่",
+  "Picture-in-Picture": "การเล่นภาพควบคู่"
+}
diff --git a/priv/static/video.js/lang/tr.js b/priv/static/video.js/lang/tr.js
new file mode 100644
index 0000000..c5b7425
--- /dev/null
+++ b/priv/static/video.js/lang/tr.js
@@ -0,0 +1,90 @@
+videojs.addLanguage('tr', {
+  "Audio Player": "Ses Oynatıcısı",
+  "Video Player": "Video Oynatıcısı",
+  "Play": "Oynat",
+  "Pause": "Duraklat",
+  "Replay": "Yeniden Oynat",
+  "Current Time": "Süre",
+  "Duration": "Toplam Süre",
+  "Remaining Time": "Kalan Süre",
+  "Stream Type": "Yayın Tipi",
+  "LIVE": "CANLI",
+  "Seek to live, currently behind live": "Canlıya git, şu anda canlının gerisinde",
+  "Seek to live, currently playing live": "Canlıya git, şu anda canlı oynuyor",
+  "Loaded": "Yüklendi",
+  "Progress": "Yükleniyor",
+  "Progress Bar": "İlerleme Çubuğu",
+  "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
+  "Fullscreen": "Tam Ekran",
+  "Exit Fullscreen": "Tam Ekrandan Çık",
+  "Mute": "Sessiz",
+  "Unmute": "Sesi Aç",
+  "Playback Rate": "Oynatma Hızı",
+  "Subtitles": "Altyazılar",
+  "subtitles off": "Altyazı Kapalı",
+  "Captions": "Altyazılar",
+  "captions off": "Altyazı Kapalı",
+  "Chapters": "Bölümler",
+  "Close Modal Dialog": "Etkileşim Penceresini Kapat",
+  "Descriptions": "Açıklamalar",
+  "descriptions off": "açıklamalar kapalı",
+  "Audio Track": "Ses Parçası",
+  "Volume Level": "Ses Düzeyi",
+  "You aborted the media playback": "Medyayı oynatmayı iptal ettiniz",
+  "A network error caused the media download to fail part-way.": "Medya indirme işleminin kısmen başarısız olmasına neden olan bir ağ sorunu oluştu.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Sunucu veya ağ hatasından ya da biçim desteklenmediğinden medya yüklenemedi.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Medya oynatma, bir bozulma sorunu nedeniyle veya medya, tarayıcınızın desteklemediği özellikleri kullandığı için durduruldu.",
+  "No compatible source was found for this media.": "Bu medya için uyumlu bir kaynak bulunamadı.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Medya, şifrelenmiş bir kaynaktan geliyor ve oynatmak için gerekli anahtar bulunamadı.",
+  "Play Video": "Videoyu Oynat",
+  "Close": "Kapat",
+  "Modal Window": "Etkileşim Penceresi",
+  "This is a modal window": "Bu bir etkileşim penceresidir",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Bu etkileşim penceresi ESC tuşuna basarak ya da kapat butonuna tıklanarak kapatılabilir.",
+  ", opens captions settings dialog": ", altyazı ayarları menüsünü açar",
+  ", opens subtitles settings dialog": ", altyazı ayarları menüsünü açar",
+  ", opens descriptions settings dialog": ", açıklama ayarları menüsünü açar",
+  ", selected": ", seçildi",
+  "captions settings": "altyazı ayarları",
+  "subtitles settings": "altyazı ayarları",
+  "descriptions settings": "açıklama ayarları",
+  "Text": "Metin",
+  "White": "Beyaz",
+  "Black": "Siyah",
+  "Red": "Kırmızı",
+  "Green": "Yeşil",
+  "Blue": "Mavi",
+  "Yellow": "Sarı",
+  "Magenta": "Macenta",
+  "Cyan": "Açık Mavi (Camgöbeği)",
+  "Background": "Arka plan",
+  "Window": "Pencere",
+  "Transparent": "Saydam",
+  "Semi-Transparent": "Yarı-Saydam",
+  "Opaque": "Mat",
+  "Font Size": "Metin Boyutu",
+  "Text Edge Style": "Metin Kenar Stili",
+  "None": "Hiçbiri",
+  "Raised": "Kabarık",
+  "Depressed": "Yassı",
+  "Uniform": "Düz",
+  "Drop shadow": "Gölgeli",
+  "Font Family": "Yazı Tipi",
+  "Proportional Sans-Serif": "Orantılı Sans-Serif",
+  "Monospace Sans-Serif": "Eşaralıklı Sans-Serif",
+  "Proportional Serif": "Orantılı Serif",
+  "Monospace Serif": "Eşaralıklı Serif",
+  "Casual": "Gündelik",
+  "Script": "El Yazısı",
+  "Small Caps": "Küçük Boyutlu Büyük Harfli",
+  "Reset": "Sıfırla",
+  "restore all settings to the default values": "tüm ayarları varsayılan değerlere geri yükler",
+  "Done": "Tamam",
+  "Caption Settings Dialog": "Altyazı Ayarları Menüsü",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Etkileşim penceresinin başlangıcı. ESC tuşu işlemi iptal edip pencereyi kapatacaktır.",
+  "End of dialog window.": "Etkileşim penceresinin sonu.",
+  "{1} is loading.": "{1} yükleniyor.",
+  "Exit Picture-in-Picture": "Mini oynatıcıdan çık",
+  "Picture-in-Picture": "Mini oynatıcı",
+  "No content": "İçerik yok"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/tr.json b/priv/static/video.js/lang/tr.json
new file mode 100644
index 0000000..352f5a9
--- /dev/null
+++ b/priv/static/video.js/lang/tr.json
@@ -0,0 +1,90 @@
+{
+  "Audio Player": "Ses Oynatıcısı",
+  "Video Player": "Video Oynatıcısı",
+  "Play": "Oynat",
+  "Pause": "Duraklat",
+  "Replay": "Yeniden Oynat",
+  "Current Time": "Süre",
+  "Duration": "Toplam Süre",
+  "Remaining Time": "Kalan Süre",
+  "Stream Type": "Yayın Tipi",
+  "LIVE": "CANLI",
+  "Seek to live, currently behind live": "Canlıya git, şu anda canlının gerisinde",
+  "Seek to live, currently playing live": "Canlıya git, şu anda canlı oynuyor",
+  "Loaded": "Yüklendi",
+  "Progress": "Yükleniyor",
+  "Progress Bar": "İlerleme Çubuğu",
+  "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
+  "Fullscreen": "Tam Ekran",
+  "Exit Fullscreen": "Tam Ekrandan Çık",
+  "Mute": "Sessiz",
+  "Unmute": "Sesi Aç",
+  "Playback Rate": "Oynatma Hızı",
+  "Subtitles": "Altyazılar",
+  "subtitles off": "Altyazı Kapalı",
+  "Captions": "Altyazılar",
+  "captions off": "Altyazı Kapalı",
+  "Chapters": "Bölümler",
+  "Close Modal Dialog": "Etkileşim Penceresini Kapat",
+  "Descriptions": "Açıklamalar",
+  "descriptions off": "açıklamalar kapalı",
+  "Audio Track": "Ses Parçası",
+  "Volume Level": "Ses Düzeyi",
+  "You aborted the media playback": "Medyayı oynatmayı iptal ettiniz",
+  "A network error caused the media download to fail part-way.": "Medya indirme işleminin kısmen başarısız olmasına neden olan bir ağ sorunu oluştu.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Sunucu veya ağ hatasından ya da biçim desteklenmediğinden medya yüklenemedi.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Medya oynatma, bir bozulma sorunu nedeniyle veya medya, tarayıcınızın desteklemediği özellikleri kullandığı için durduruldu.",
+  "No compatible source was found for this media.": "Bu medya için uyumlu bir kaynak bulunamadı.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Medya, şifrelenmiş bir kaynaktan geliyor ve oynatmak için gerekli anahtar bulunamadı.",
+  "Play Video": "Videoyu Oynat",
+  "Close": "Kapat",
+  "Modal Window": "Etkileşim Penceresi",
+  "This is a modal window": "Bu bir etkileşim penceresidir",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Bu etkileşim penceresi ESC tuşuna basarak ya da kapat butonuna tıklanarak kapatılabilir.",
+  ", opens captions settings dialog": ", altyazı ayarları menüsünü açar",
+  ", opens subtitles settings dialog": ", altyazı ayarları menüsünü açar",
+  ", opens descriptions settings dialog": ", açıklama ayarları menüsünü açar",
+  ", selected": ", seçildi",
+  "captions settings": "altyazı ayarları",
+  "subtitles settings": "altyazı ayarları",
+  "descriptions settings": "açıklama ayarları",
+  "Text": "Metin",
+  "White": "Beyaz",
+  "Black": "Siyah",
+  "Red": "Kırmızı",
+  "Green": "Yeşil",
+  "Blue": "Mavi",
+  "Yellow": "Sarı",
+  "Magenta": "Macenta",
+  "Cyan": "Açık Mavi (Camgöbeği)",
+  "Background": "Arka plan",
+  "Window": "Pencere",
+  "Transparent": "Saydam",
+  "Semi-Transparent": "Yarı-Saydam",
+  "Opaque": "Mat",
+  "Font Size": "Metin Boyutu",
+  "Text Edge Style": "Metin Kenar Stili",
+  "None": "Hiçbiri",
+  "Raised": "Kabarık",
+  "Depressed": "Yassı",
+  "Uniform": "Düz",
+  "Drop shadow": "Gölgeli",
+  "Font Family": "Yazı Tipi",
+  "Proportional Sans-Serif": "Orantılı Sans-Serif",
+  "Monospace Sans-Serif": "Eşaralıklı Sans-Serif",
+  "Proportional Serif": "Orantılı Serif",
+  "Monospace Serif": "Eşaralıklı Serif",
+  "Casual": "Gündelik",
+  "Script": "El Yazısı",
+  "Small Caps": "Küçük Boyutlu Büyük Harfli",
+  "Reset": "Sıfırla",
+  "restore all settings to the default values": "tüm ayarları varsayılan değerlere geri yükler",
+  "Done": "Tamam",
+  "Caption Settings Dialog": "Altyazı Ayarları Menüsü",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Etkileşim penceresinin başlangıcı. ESC tuşu işlemi iptal edip pencereyi kapatacaktır.",
+  "End of dialog window.": "Etkileşim penceresinin sonu.",
+  "{1} is loading.": "{1} yükleniyor.",
+  "Exit Picture-in-Picture": "Mini oynatıcıdan çık",
+  "Picture-in-Picture": "Mini oynatıcı",
+  "No content": "İçerik yok"
+}
diff --git a/priv/static/video.js/lang/uk.js b/priv/static/video.js/lang/uk.js
new file mode 100644
index 0000000..29eb870
--- /dev/null
+++ b/priv/static/video.js/lang/uk.js
@@ -0,0 +1,85 @@
+videojs.addLanguage('uk', {
+  "Audio Player": "Аудіопрогравач",
+  "Video Player": "Відеопрогравач",
+  "Play": "Відтворити",
+  "Pause": "Призупинити",
+  "Replay": "Відтворити знову",
+  "Current Time": "Поточний час",
+  "Duration": "Тривалість",
+  "Remaining Time": "Час, що залишився",
+  "Stream Type": "Тип потоку",
+  "LIVE": "НАЖИВО",
+  "Loaded": "Завантаження",
+  "Progress": "Прогрес",
+  "Progress Bar": "Індикатор завантаження",
+  "progress bar timing: currentTime={1} duration={2}": "{1} з {2}",
+  "Fullscreen": "Повноекранний режим",
+  "Exit Fullscreen": "Неповноекранний режим",
+  "Mute": "Без звуку",
+  "Unmute": "Зі звуком",
+  "Playback Rate": "Швидкість відтворення",
+  "Subtitles": "Субтитри",
+  "subtitles off": "Без субтитрів",
+  "Captions": "Підписи",
+  "captions off": "Без підписів",
+  "Chapters": "Розділи",
+  "Close Modal Dialog": "Закрити модальний діалог",
+  "Descriptions": "Описи",
+  "descriptions off": "Без описів",
+  "Audio Track": "Аудіодоріжка",
+  "Volume Level": "Рівень гучності",
+  "You aborted the media playback": "Ви припинили відтворення відео",
+  "A network error caused the media download to fail part-way.": "Помилка мережі викликала збій під час завантаження відео.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Неможливо завантажити відео через мережевий чи серверний збій або формат не підтримується.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Відтворення відео було припинено через пошкодження або у зв'язку з тим, що відео використовує функції, які не підтримуються вашим браузером.",
+  "No compatible source was found for this media.": "Сумісні джерела для цього відео відсутні.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Відео в зашифрованому вигляді, і ми не маємо ключі для розшифровки.",
+  "Play Video": "Відтворити відео",
+  "Close": "Закрити",
+  "Modal Window": "Модальне вікно",
+  "This is a modal window": "Це модальне вікно.",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Модальне вікно можна закрити, натиснувши клавішу Esc або кнопку закриття вікна.",
+  ", opens captions settings dialog": ", відкриється діалогове вікно налаштування підписів",
+  ", opens subtitles settings dialog": ", відкриється діалогове вікно налаштування субтитрів",
+  ", opens descriptions settings dialog": ", відкриється діалогове вікно налаштування описів",
+  ", selected": ", обраний",
+  "captions settings": "налаштування підписів",
+  "subtitles settings": "налаштування субтитрів",
+  "descriptions settings": "налаштування описів",
+  "Text": "Текст",
+  "White": "Білий",
+  "Black": "Чорний",
+  "Red": "Червоний",
+  "Green": "Зелений",
+  "Blue": "Синій",
+  "Yellow": "Жовтий",
+  "Magenta": "Пурпурний",
+  "Cyan": "Блакитний",
+  "Background": "Фон",
+  "Window": "Вікно",
+  "Transparent": "Прозорий",
+  "Semi-Transparent": "Напівпрозорий",
+  "Opaque": "Прозорість",
+  "Font Size": "Розмір шрифту",
+  "Text Edge Style": "Стиль краю тексту",
+  "None": "Нічого",
+  "Raised": "Піднятий",
+  "Depressed": "Знижений",
+  "Uniform": "Однаковий",
+  "Dropshadow": "Тінь",
+  "Font Family": "Шрифт",
+  "Proportional Sans-Serif": "Пропорційний без засічок",
+  "Monospace Sans-Serif": "Моноширинний без засічок",
+  "Proportional Serif": "Пропорційний із засічками",
+  "Monospace Serif": "Моноширинний із засічками",
+  "Casual": "Випадковий",
+  "Script": "Писемний",
+  "Small Caps": "Малі прописні",
+  "Reset": "Скинути",
+  "restore all settings to the default values": "скинути всі налаштування за замовчуванням",
+  "Done": "Готово",
+  "Caption Settings Dialog": "Діалог налаштувань підпису",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Початок діалоговго вікна. Кнопка Escape закриє або скасує вікно",
+  "End of dialog window.": "Кінець діалогового вікна.",
+  "{1} is loading.": "{1} завантажується."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/uk.json b/priv/static/video.js/lang/uk.json
new file mode 100644
index 0000000..c96081c
--- /dev/null
+++ b/priv/static/video.js/lang/uk.json
@@ -0,0 +1,85 @@
+{
+  "Audio Player": "Аудіопрогравач",
+  "Video Player": "Відеопрогравач",  
+  "Play": "Відтворити",
+  "Pause": "Призупинити",
+  "Replay": "Відтворити знову",  
+  "Current Time": "Поточний час",
+  "Duration": "Тривалість",
+  "Remaining Time": "Час, що залишився",
+  "Stream Type": "Тип потоку",
+  "LIVE": "НАЖИВО",
+  "Loaded": "Завантаження",
+  "Progress": "Прогрес",
+  "Progress Bar": "Індикатор завантаження",
+  "progress bar timing: currentTime={1} duration={2}": "{1} з {2}",  
+  "Fullscreen": "Повноекранний режим",
+  "Exit Fullscreen": "Неповноекранний режим",
+  "Mute": "Без звуку",
+  "Unmute": "Зі звуком",
+  "Playback Rate": "Швидкість відтворення",
+  "Subtitles": "Субтитри",
+  "subtitles off": "Без субтитрів",
+  "Captions": "Підписи",
+  "captions off": "Без підписів",
+  "Chapters": "Розділи",
+  "Close Modal Dialog": "Закрити модальний діалог",
+  "Descriptions": "Описи",
+  "descriptions off": "Без описів",
+  "Audio Track": "Аудіодоріжка",
+  "Volume Level": "Рівень гучності",  
+  "You aborted the media playback": "Ви припинили відтворення відео",
+  "A network error caused the media download to fail part-way.": "Помилка мережі викликала збій під час завантаження відео.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Неможливо завантажити відео через мережевий чи серверний збій або формат не підтримується.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Відтворення відео було припинено через пошкодження або у зв'язку з тим, що відео використовує функції, які не підтримуються вашим браузером.",
+  "No compatible source was found for this media.": "Сумісні джерела для цього відео відсутні.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Відео в зашифрованому вигляді, і ми не маємо ключі для розшифровки.",
+  "Play Video": "Відтворити відео",
+  "Close": "Закрити",
+  "Modal Window": "Модальне вікно",
+  "This is a modal window": "Це модальне вікно.",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Модальне вікно можна закрити, натиснувши клавішу Esc або кнопку закриття вікна.",
+  ", opens captions settings dialog": ", відкриється діалогове вікно налаштування підписів",
+  ", opens subtitles settings dialog": ", відкриється діалогове вікно налаштування субтитрів",
+  ", opens descriptions settings dialog": ", відкриється діалогове вікно налаштування описів",
+  ", selected": ", обраний",
+  "captions settings": "налаштування підписів",
+  "subtitles settings": "налаштування субтитрів",
+  "descriptions settings": "налаштування описів",
+  "Text": "Текст",
+  "White": "Білий",
+  "Black": "Чорний",
+  "Red": "Червоний",
+  "Green": "Зелений",
+  "Blue": "Синій",
+  "Yellow": "Жовтий",
+  "Magenta": "Пурпурний",
+  "Cyan": "Блакитний",
+  "Background": "Фон",
+  "Window": "Вікно",
+  "Transparent": "Прозорий",
+  "Semi-Transparent": "Напівпрозорий",
+  "Opaque": "Прозорість",
+  "Font Size": "Розмір шрифту",
+  "Text Edge Style": "Стиль краю тексту",
+  "None": "Нічого",
+  "Raised": "Піднятий",
+  "Depressed": "Знижений",
+  "Uniform": "Однаковий",
+  "Dropshadow": "Тінь",
+  "Font Family": "Шрифт",
+  "Proportional Sans-Serif": "Пропорційний без засічок",
+  "Monospace Sans-Serif": "Моноширинний без засічок",
+  "Proportional Serif": "Пропорційний із засічками",
+  "Monospace Serif": "Моноширинний із засічками",
+  "Casual": "Випадковий",
+  "Script": "Писемний",
+  "Small Caps": "Малі прописні",
+  "Reset": "Скинути",
+  "restore all settings to the default values": "скинути всі налаштування за замовчуванням",
+  "Done": "Готово",
+  "Caption Settings Dialog": "Діалог налаштувань підпису",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Початок діалоговго вікна. Кнопка Escape закриє або скасує вікно",
+  "End of dialog window.": "Кінець діалогового вікна.",
+  "{1} is loading.": "{1} завантажується."  
+}
diff --git a/priv/static/video.js/lang/vi.js b/priv/static/video.js/lang/vi.js
new file mode 100644
index 0000000..c226255
--- /dev/null
+++ b/priv/static/video.js/lang/vi.js
@@ -0,0 +1,84 @@
+videojs.addLanguage('vi', {
+  "Audio Player": "Trình phát Audio",
+  "Video Player": "Trình phát Video",
+  "Play": "Phát",
+  "Pause": "Tạm dừng",
+  "Replay": "Phát lại",
+  "Current Time": "Thời gian hiện tại",
+  "Duration": "Độ dài",
+  "Remaining Time": "Thời gian còn lại",
+  "Stream Type": "Kiểu Stream",
+  "LIVE": "TRỰC TIẾP",
+  "Loaded": "Đã tải",
+  "Progress": "Tiến trình",
+  "Progress Bar": "Thanh tiến trình",
+  "progress bar timing: currentTime={1} duration={2}": "{1} của {2}",
+  "Fullscreen": "Toàn màn hình",
+  "Exit Fullscreen": "Thoát toàn màn hình",
+  "Mute": "Tắt tiếng",
+  "Unmute": "Bật âm thanh",
+  "Playback Rate": "Tỉ lệ phát lại",
+  "Subtitles": "Phụ đề",
+  "subtitles off": "tắt phụ đề",
+  "Captions": "Chú thích",
+  "captions off": "tắt chú thích",
+  "Chapters": "Chương",
+  "Descriptions": "Mô tả",
+  "descriptions off": "tắt mô tả",
+  "Audio Track": "Track âm thanh",
+  "Volume Level": "Mức âm lượng",
+  "You aborted the media playback": "Bạn đã hủy việc phát lại media.",
+  "A network error caused the media download to fail part-way.": "Một lỗi mạng dẫn đến việc tải media bị lỗi.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Video không tải được, mạng hay server có lỗi hoặc định dạng không được hỗ trợ.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Phát media đã bị hủy do một sai lỗi hoặc media sử dụng những tính năng trình duyệt không hỗ trợ.",
+  "No compatible source was found for this media.": "Không có nguồn tương thích cho media này.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Media đã được mã hóa và chúng tôi không có để giải mã nó.",
+  "Play Video": "Phát Video",
+  "Close": "Đóng",
+  "Close Modal Dialog": "Đóng cửa sổ",
+  "Modal Window": "Cửa sổ",
+  "This is a modal window": "Đây là một cửa sổ",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Cửa sổ này có thể thoát bằng việc nhấn phím Esc hoặc kích hoạt nút đóng.",
+  ", opens captions settings dialog": ", mở hộp thoại cài đặt chú thích",
+  ", opens subtitles settings dialog": ", mở hộp thoại cài đặt phụ đề",
+  ", opens descriptions settings dialog": ", mở hộp thoại cài đặt mô tả",
+  ", selected": ", đã chọn",
+  "captions settings": "cài đặt chú thích",
+  "subtitles settings": "cài đặt phụ đề",
+  "descriptions settings": "cài đặt mô tả",
+  "Text": "Văn bản",
+  "White": "Trắng",
+  "Black": "Đen",
+  "Red": "Đỏ",
+  "Green": "Xanh lá cây",
+  "Blue": "Xanh da trời",
+  "Yellow": "Vàng",
+  "Magenta": "Đỏ tươi",
+  "Cyan": "Lam",
+  "Background": "Nền",
+  "Window": "Cửa sổ",
+  "Transparent": "Trong suốt",
+  "Semi-Transparent": "Bán trong suốt",
+  "Opaque": "Mờ",
+  "Font Size": "Kích cỡ phông chữ",
+  "Text Edge Style": "Dạng viền văn bản",
+  "None": "None",
+  "Raised": "Raised",
+  "Depressed": "Depressed",
+  "Uniform": "Uniform",
+  "Dropshadow": "Dropshadow",
+  "Font Family": "Phông chữ",
+  "Proportional Sans-Serif": "Proportional Sans-Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Proportional Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Casual": "Casual",
+  "Script": "Script",
+  "Small Caps": "Small Caps",
+  "Reset": "Đặt lại",
+  "restore all settings to the default values": "khôi phục lại tất cả các cài đặt về giá trị mặc định",
+  "Done": "Xong",
+  "Caption Settings Dialog": "Hộp thoại cài đặt chú thích",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Bắt đầu cửa sổ hộp thoại. Esc sẽ thoát và đóng cửa sổ.",
+  "End of dialog window.": "Kết thúc cửa sổ hộp thoại."
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/vi.json b/priv/static/video.js/lang/vi.json
new file mode 100644
index 0000000..bb6ccfe
--- /dev/null
+++ b/priv/static/video.js/lang/vi.json
@@ -0,0 +1,84 @@
+{
+  "Audio Player": "Trình phát Audio",
+  "Video Player": "Trình phát Video",
+  "Play": "Phát",
+  "Pause": "Tạm dừng",
+  "Replay": "Phát lại",
+  "Current Time": "Thời gian hiện tại",
+  "Duration": "Độ dài",
+  "Remaining Time": "Thời gian còn lại",
+  "Stream Type": "Kiểu Stream",
+  "LIVE": "TRỰC TIẾP",
+  "Loaded": "Đã tải",
+  "Progress": "Tiến trình",
+  "Progress Bar": "Thanh tiến trình",
+  "progress bar timing: currentTime={1} duration={2}": "{1} của {2}",
+  "Fullscreen": "Toàn màn hình",
+  "Exit Fullscreen": "Thoát toàn màn hình",
+  "Mute": "Tắt tiếng",
+  "Unmute": "Bật âm thanh",
+  "Playback Rate": "Tỉ lệ phát lại",
+  "Subtitles": "Phụ đề",
+  "subtitles off": "tắt phụ đề",
+  "Captions": "Chú thích",
+  "captions off": "tắt chú thích",
+  "Chapters": "Chương",
+  "Descriptions": "Mô tả",
+  "descriptions off": "tắt mô tả",
+  "Audio Track": "Track âm thanh",
+  "Volume Level": "Mức âm lượng",
+  "You aborted the media playback": "Bạn đã hủy việc phát lại media.",
+  "A network error caused the media download to fail part-way.": "Một lỗi mạng dẫn đến việc tải media bị lỗi.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Video không tải được, mạng hay server có lỗi hoặc định dạng không được hỗ trợ.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Phát media đã bị hủy do một sai lỗi hoặc media sử dụng những tính năng trình duyệt không hỗ trợ.",
+  "No compatible source was found for this media.": "Không có nguồn tương thích cho media này.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Media đã được mã hóa và chúng tôi không có để giải mã nó.",
+  "Play Video": "Phát Video",
+  "Close": "Đóng",
+  "Close Modal Dialog": "Đóng cửa sổ",
+  "Modal Window": "Cửa sổ",
+  "This is a modal window": "Đây là một cửa sổ",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Cửa sổ này có thể thoát bằng việc nhấn phím Esc hoặc kích hoạt nút đóng.",
+  ", opens captions settings dialog": ", mở hộp thoại cài đặt chú thích",
+  ", opens subtitles settings dialog": ", mở hộp thoại cài đặt phụ đề",
+  ", opens descriptions settings dialog": ", mở hộp thoại cài đặt mô tả",
+  ", selected": ", đã chọn",
+  "captions settings": "cài đặt chú thích",
+  "subtitles settings": "cài đặt phụ đề",
+  "descriptions settings": "cài đặt mô tả",
+  "Text": "Văn bản",
+  "White": "Trắng",
+  "Black": "Đen",
+  "Red": "Đỏ",
+  "Green": "Xanh lá cây",
+  "Blue": "Xanh da trời",
+  "Yellow": "Vàng",
+  "Magenta": "Đỏ tươi",
+  "Cyan": "Lam",
+  "Background": "Nền",
+  "Window": "Cửa sổ",
+  "Transparent": "Trong suốt",
+  "Semi-Transparent": "Bán trong suốt",
+  "Opaque": "Mờ",
+  "Font Size": "Kích cỡ phông chữ",
+  "Text Edge Style": "Dạng viền văn bản",
+  "None": "None",
+  "Raised": "Raised",
+  "Depressed": "Depressed",
+  "Uniform": "Uniform",
+  "Dropshadow": "Dropshadow",
+  "Font Family": "Phông chữ",
+  "Proportional Sans-Serif": "Proportional Sans-Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Proportional Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Casual": "Casual",
+  "Script": "Script",
+  "Small Caps": "Small Caps",
+  "Reset": "Đặt lại",
+  "restore all settings to the default values": "khôi phục lại tất cả các cài đặt về giá trị mặc định",
+  "Done": "Xong",
+  "Caption Settings Dialog": "Hộp thoại cài đặt chú thích",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Bắt đầu cửa sổ hộp thoại. Esc sẽ thoát và đóng cửa sổ.",
+  "End of dialog window.": "Kết thúc cửa sổ hộp thoại."
+}
diff --git a/priv/static/video.js/lang/zh-CN.js b/priv/static/video.js/lang/zh-CN.js
new file mode 100644
index 0000000..ab07031
--- /dev/null
+++ b/priv/static/video.js/lang/zh-CN.js
@@ -0,0 +1,96 @@
+videojs.addLanguage('zh-CN', {
+  "Play": "播放",
+  "Pause": "暂停",
+  "Current Time": "当前时间",
+  "Duration": "时长",
+  "Remaining Time": "剩余时间",
+  "Stream Type": "媒体流类型",
+  "LIVE": "直播",
+  "Loaded": "加载完成",
+  "Progress": "进度",
+  "Fullscreen": "全屏",
+  "Exit Fullscreen": "退出全屏",
+  "Picture-in-Picture": "画中画",
+  "Exit Picture-in-Picture": "退出画中画",
+  "Mute": "静音",
+  "Unmute": "开启音效",
+  "Playback Rate": "播放速度",
+  "Subtitles": "字幕",
+  "subtitles off": "关闭字幕",
+  "Captions": "内嵌字幕",
+  "captions off": "关闭内嵌字幕",
+  "Chapters": "节目段落",
+  "Close Modal Dialog": "关闭弹窗",
+  "Descriptions": "描述",
+  "descriptions off": "关闭描述",
+  "Audio Track": "音轨",
+  "You aborted the media playback": "视频播放被终止",
+  "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
+  "No compatible source was found for this media.": "无法找到此视频兼容的源。",
+  "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
+  "Play Video": "播放视频",
+  "Close": "关闭",
+  "Modal Window": "弹窗",
+  "This is a modal window": "这是一个弹窗",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
+  ", opens captions settings dialog": ", 开启标题设置弹窗",
+  ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
+  ", opens descriptions settings dialog": ", 开启描述设置弹窗",
+  ", selected": ", 选择",
+  "captions settings": "字幕设定",
+  "Audio Player": "音频播放器",
+  "Video Player": "视频播放器",
+  "Replay": "重新播放",
+  "Progress Bar": "进度条",
+  "Volume Level": "音量",
+  "subtitles settings": "字幕设定",
+  "descriptions settings": "描述设定",
+  "Text": "文字",
+  "White": "白",
+  "Black": "黑",
+  "Red": "红",
+  "Green": "绿",
+  "Blue": "蓝",
+  "Yellow": "黄",
+  "Magenta": "紫红",
+  "Cyan": "青",
+  "Background": "背景",
+  "Window": "窗口",
+  "Transparent": "透明",
+  "Semi-Transparent": "半透明",
+  "Opaque": "不透明",
+  "Font Size": "字体尺寸",
+  "Text Edge Style": "字体边缘样式",
+  "None": "无",
+  "Raised": "浮雕",
+  "Depressed": "压低",
+  "Uniform": "均匀",
+  "Dropshadow": "下阴影",
+  "Font Family": "字体库",
+  "Proportional Sans-Serif": "比例无细体",
+  "Monospace Sans-Serif": "单间隔无细体",
+  "Proportional Serif": "比例细体",
+  "Monospace Serif": "单间隔细体",
+  "Casual": "舒适",
+  "Script": "手写体",
+  "Small Caps": "小型大写字体",
+  "Reset": "重置",
+  "restore all settings to the default values": "恢复全部设定至预设值",
+  "Done": "完成",
+  "Caption Settings Dialog": "字幕设定窗口",
+  "Beginning of dialog window. Escape will cancel and close the window.": "打开对话窗口。Escape键将取消并关闭对话窗口",
+  "End of dialog window.": "结束对话窗口",
+  "Seek to live, currently behind live": "尝试直播，当前为延时播放",
+  "Seek to live, currently playing live": "尝试直播，当前为实时播放",
+  "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
+  "{1} is loading.": "正在加载 {1}。",
+  "No content": "无内容",
+  "Color": "颜色",
+  "Opacity": "不透明度",
+  "Text Background": "文本背景",
+  "Caption Area Background": "字幕区域背景",
+  "Skip forward {1} seconds": "快进 {1} 秒",
+  "Skip backward {1} seconds": "快退 {1} 秒"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/zh-CN.json b/priv/static/video.js/lang/zh-CN.json
new file mode 100644
index 0000000..0ecfccf
--- /dev/null
+++ b/priv/static/video.js/lang/zh-CN.json
@@ -0,0 +1,96 @@
+{
+  "Play": "播放",
+  "Pause": "暂停",
+  "Current Time": "当前时间",
+  "Duration": "时长",
+  "Remaining Time": "剩余时间",
+  "Stream Type": "媒体流类型",
+  "LIVE": "直播",
+  "Loaded": "加载完成",
+  "Progress": "进度",
+  "Fullscreen": "全屏",
+  "Exit Fullscreen": "退出全屏",
+  "Picture-in-Picture": "画中画",
+  "Exit Picture-in-Picture": "退出画中画",
+  "Mute": "静音",
+  "Unmute": "开启音效",
+  "Playback Rate": "播放速度",
+  "Subtitles": "字幕",
+  "subtitles off": "关闭字幕",
+  "Captions": "内嵌字幕",
+  "captions off": "关闭内嵌字幕",
+  "Chapters": "节目段落",
+  "Close Modal Dialog": "关闭弹窗",
+  "Descriptions": "描述",
+  "descriptions off": "关闭描述",
+  "Audio Track": "音轨",
+  "You aborted the media playback": "视频播放被终止",
+  "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
+  "No compatible source was found for this media.": "无法找到此视频兼容的源。",
+  "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
+  "Play Video": "播放视频",
+  "Close": "关闭",
+  "Modal Window": "弹窗",
+  "This is a modal window": "这是一个弹窗",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
+  ", opens captions settings dialog": ", 开启标题设置弹窗",
+  ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
+  ", opens descriptions settings dialog": ", 开启描述设置弹窗",
+  ", selected": ", 选择",
+  "captions settings": "字幕设定",
+  "Audio Player": "音频播放器",
+  "Video Player": "视频播放器",
+  "Replay": "重新播放",
+  "Progress Bar": "进度条",
+  "Volume Level": "音量",
+  "subtitles settings": "字幕设定",
+  "descriptions settings": "描述设定",
+  "Text": "文字",
+  "White": "白",
+  "Black": "黑",
+  "Red": "红",
+  "Green": "绿",
+  "Blue": "蓝",
+  "Yellow": "黄",
+  "Magenta": "紫红",
+  "Cyan": "青",
+  "Background": "背景",
+  "Window": "窗口",
+  "Transparent": "透明",
+  "Semi-Transparent": "半透明",
+  "Opaque": "不透明",
+  "Font Size": "字体尺寸",
+  "Text Edge Style": "字体边缘样式",
+  "None": "无",
+  "Raised": "浮雕",
+  "Depressed": "压低",
+  "Uniform": "均匀",
+  "Dropshadow": "下阴影",
+  "Font Family": "字体库",
+  "Proportional Sans-Serif": "比例无细体",
+  "Monospace Sans-Serif": "单间隔无细体",
+  "Proportional Serif": "比例细体",
+  "Monospace Serif": "单间隔细体",
+  "Casual": "舒适",
+  "Script": "手写体",
+  "Small Caps": "小型大写字体",
+  "Reset": "重置",
+  "restore all settings to the default values": "恢复全部设定至预设值",
+  "Done": "完成",
+  "Caption Settings Dialog": "字幕设定窗口",
+  "Beginning of dialog window. Escape will cancel and close the window.": "打开对话窗口。Escape键将取消并关闭对话窗口",
+  "End of dialog window.": "结束对话窗口",
+  "Seek to live, currently behind live": "尝试直播，当前为延时播放",
+  "Seek to live, currently playing live": "尝试直播，当前为实时播放",
+  "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
+  "{1} is loading.": "正在加载 {1}。",
+  "No content": "无内容",
+  "Color": "颜色",
+  "Opacity": "不透明度",
+  "Text Background": "文本背景",
+  "Caption Area Background": "字幕区域背景",
+  "Skip forward {1} seconds": "快进 {1} 秒",
+  "Skip backward {1} seconds":  "快退 {1} 秒"
+}
diff --git a/priv/static/video.js/lang/zh-Hans.js b/priv/static/video.js/lang/zh-Hans.js
new file mode 100644
index 0000000..236f981
--- /dev/null
+++ b/priv/static/video.js/lang/zh-Hans.js
@@ -0,0 +1,96 @@
+videojs.addLanguage('zh-Hans', {
+  "Play": "播放",
+  "Pause": "暂停",
+  "Current Time": "当前时间",
+  "Duration": "时长",
+  "Remaining Time": "剩余时间",
+  "Stream Type": "媒体流类型",
+  "LIVE": "直播",
+  "Loaded": "加载完成",
+  "Progress": "进度",
+  "Fullscreen": "全屏",
+  "Exit Fullscreen": "退出全屏",
+  "Picture-in-Picture": "画中画",
+  "Exit Picture-in-Picture": "退出画中画",
+  "Mute": "静音",
+  "Unmute": "开启音效",
+  "Playback Rate": "播放速度",
+  "Subtitles": "字幕",
+  "subtitles off": "关闭字幕",
+  "Captions": "内嵌字幕",
+  "captions off": "关闭内嵌字幕",
+  "Chapters": "节目段落",
+  "Close Modal Dialog": "关闭弹窗",
+  "Descriptions": "描述",
+  "descriptions off": "关闭描述",
+  "Audio Track": "音轨",
+  "You aborted the media playback": "视频播放被终止",
+  "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
+  "No compatible source was found for this media.": "无法找到此视频兼容的源。",
+  "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
+  "Play Video": "播放视频",
+  "Close": "关闭",
+  "Modal Window": "弹窗",
+  "This is a modal window": "这是一个弹窗",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
+  ", opens captions settings dialog": ", 开启标题设置弹窗",
+  ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
+  ", opens descriptions settings dialog": ", 开启描述设置弹窗",
+  ", selected": ", 选择",
+  "captions settings": "字幕设定",
+  "Audio Player": "音频播放器",
+  "Video Player": "视频播放器",
+  "Replay": "重新播放",
+  "Progress Bar": "进度条",
+  "Volume Level": "音量",
+  "subtitles settings": "字幕设定",
+  "descriptions settings": "描述设定",
+  "Text": "文字",
+  "White": "白",
+  "Black": "黑",
+  "Red": "红",
+  "Green": "绿",
+  "Blue": "蓝",
+  "Yellow": "黄",
+  "Magenta": "紫红",
+  "Cyan": "青",
+  "Background": "背景",
+  "Window": "窗口",
+  "Transparent": "透明",
+  "Semi-Transparent": "半透明",
+  "Opaque": "不透明",
+  "Font Size": "字体尺寸",
+  "Text Edge Style": "字体边缘样式",
+  "None": "无",
+  "Raised": "浮雕",
+  "Depressed": "压低",
+  "Uniform": "均匀",
+  "Dropshadow": "下阴影",
+  "Font Family": "字体库",
+  "Proportional Sans-Serif": "比例无细体",
+  "Monospace Sans-Serif": "单间隔无细体",
+  "Proportional Serif": "比例细体",
+  "Monospace Serif": "单间隔细体",
+  "Casual": "舒适",
+  "Script": "手写体",
+  "Small Caps": "小型大写字体",
+  "Reset": "重置",
+  "restore all settings to the default values": "恢复全部设定至预设值",
+  "Done": "完成",
+  "Caption Settings Dialog": "字幕设定窗口",
+  "Beginning of dialog window. Escape will cancel and close the window.": "打开对话窗口。Escape键将取消并关闭对话窗口",
+  "End of dialog window.": "结束对话窗口",
+  "Seek to live, currently behind live": "尝试直播，当前为延时播放",
+  "Seek to live, currently playing live": "尝试直播，当前为实时播放",
+  "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
+  "{1} is loading.": "正在加载 {1}。",
+  "No content": "无内容",
+  "Color": "颜色",
+  "Opacity": "不透明度",
+  "Text Background": "文本背景",
+  "Caption Area Background": "字幕区域背景",
+  "Skip forward {1} seconds": "快进 {1} 秒",
+  "Skip backward {1} seconds": "快退 {1} 秒"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/zh-Hans.json b/priv/static/video.js/lang/zh-Hans.json
new file mode 100644
index 0000000..0ecfccf
--- /dev/null
+++ b/priv/static/video.js/lang/zh-Hans.json
@@ -0,0 +1,96 @@
+{
+  "Play": "播放",
+  "Pause": "暂停",
+  "Current Time": "当前时间",
+  "Duration": "时长",
+  "Remaining Time": "剩余时间",
+  "Stream Type": "媒体流类型",
+  "LIVE": "直播",
+  "Loaded": "加载完成",
+  "Progress": "进度",
+  "Fullscreen": "全屏",
+  "Exit Fullscreen": "退出全屏",
+  "Picture-in-Picture": "画中画",
+  "Exit Picture-in-Picture": "退出画中画",
+  "Mute": "静音",
+  "Unmute": "开启音效",
+  "Playback Rate": "播放速度",
+  "Subtitles": "字幕",
+  "subtitles off": "关闭字幕",
+  "Captions": "内嵌字幕",
+  "captions off": "关闭内嵌字幕",
+  "Chapters": "节目段落",
+  "Close Modal Dialog": "关闭弹窗",
+  "Descriptions": "描述",
+  "descriptions off": "关闭描述",
+  "Audio Track": "音轨",
+  "You aborted the media playback": "视频播放被终止",
+  "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
+  "No compatible source was found for this media.": "无法找到此视频兼容的源。",
+  "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
+  "Play Video": "播放视频",
+  "Close": "关闭",
+  "Modal Window": "弹窗",
+  "This is a modal window": "这是一个弹窗",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
+  ", opens captions settings dialog": ", 开启标题设置弹窗",
+  ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
+  ", opens descriptions settings dialog": ", 开启描述设置弹窗",
+  ", selected": ", 选择",
+  "captions settings": "字幕设定",
+  "Audio Player": "音频播放器",
+  "Video Player": "视频播放器",
+  "Replay": "重新播放",
+  "Progress Bar": "进度条",
+  "Volume Level": "音量",
+  "subtitles settings": "字幕设定",
+  "descriptions settings": "描述设定",
+  "Text": "文字",
+  "White": "白",
+  "Black": "黑",
+  "Red": "红",
+  "Green": "绿",
+  "Blue": "蓝",
+  "Yellow": "黄",
+  "Magenta": "紫红",
+  "Cyan": "青",
+  "Background": "背景",
+  "Window": "窗口",
+  "Transparent": "透明",
+  "Semi-Transparent": "半透明",
+  "Opaque": "不透明",
+  "Font Size": "字体尺寸",
+  "Text Edge Style": "字体边缘样式",
+  "None": "无",
+  "Raised": "浮雕",
+  "Depressed": "压低",
+  "Uniform": "均匀",
+  "Dropshadow": "下阴影",
+  "Font Family": "字体库",
+  "Proportional Sans-Serif": "比例无细体",
+  "Monospace Sans-Serif": "单间隔无细体",
+  "Proportional Serif": "比例细体",
+  "Monospace Serif": "单间隔细体",
+  "Casual": "舒适",
+  "Script": "手写体",
+  "Small Caps": "小型大写字体",
+  "Reset": "重置",
+  "restore all settings to the default values": "恢复全部设定至预设值",
+  "Done": "完成",
+  "Caption Settings Dialog": "字幕设定窗口",
+  "Beginning of dialog window. Escape will cancel and close the window.": "打开对话窗口。Escape键将取消并关闭对话窗口",
+  "End of dialog window.": "结束对话窗口",
+  "Seek to live, currently behind live": "尝试直播，当前为延时播放",
+  "Seek to live, currently playing live": "尝试直播，当前为实时播放",
+  "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
+  "{1} is loading.": "正在加载 {1}。",
+  "No content": "无内容",
+  "Color": "颜色",
+  "Opacity": "不透明度",
+  "Text Background": "文本背景",
+  "Caption Area Background": "字幕区域背景",
+  "Skip forward {1} seconds": "快进 {1} 秒",
+  "Skip backward {1} seconds":  "快退 {1} 秒"
+}
diff --git a/priv/static/video.js/lang/zh-Hant.js b/priv/static/video.js/lang/zh-Hant.js
new file mode 100644
index 0000000..41221e9
--- /dev/null
+++ b/priv/static/video.js/lang/zh-Hant.js
@@ -0,0 +1,96 @@
+videojs.addLanguage('zh-Hant', {
+  "Play": "播放",
+  "Pause": "暫停",
+  "Current Time": "目前時間",
+  "Duration": "總共時間",
+  "Remaining Time": "剩餘時間",
+  "Stream Type": "串流類型",
+  "LIVE": "直播",
+  "Loaded": "載入完畢",
+  "Progress": "進度",
+  "Fullscreen": "全螢幕",
+  "Exit Fullscreen": "退出全螢幕",
+  "Picture-in-Picture": "子母畫面",
+  "Exit Picture-in-Picture": "離開子母畫面",
+  "Mute": "靜音",
+  "Unmute": "開啟音效",
+  "Playback Rate": " 播放速率",
+  "Subtitles": "字幕",
+  "subtitles off": "關閉字幕",
+  "Captions": "內嵌字幕",
+  "captions off": "關閉內嵌字幕",
+  "Chapters": "章節",
+  "Close Modal Dialog": "關閉對話框",
+  "Descriptions": "描述",
+  "descriptions off": "關閉描述",
+  "Audio Track": "音軌",
+  "You aborted the media playback": "影片播放已終止",
+  "A network error caused the media download to fail part-way.": "網路錯誤導致影片下載失敗。",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "因格式不支援、伺服器或網路的問題無法載入媒體。",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由於影片檔案損毀或是該影片使用了您的瀏覽器不支援的功能，已終止播放媒體。",
+  "No compatible source was found for this media.": "無法找到相容此媒體的來源。",
+  "The media is encrypted and we do not have the keys to decrypt it.": "媒體已加密，無法解密。",
+  "Play Video": "播放影片",
+  "Close": "關閉",
+  "Modal Window": "強制回應視窗",
+  "This is a modal window": "此為強制回應視窗",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按鍵或關閉按鈕來關閉此視窗。",
+  ", opens captions settings dialog": ", 開啟標題設定對話框",
+  ", opens subtitles settings dialog": ", 開啟字幕設定對話框",
+  ", opens descriptions settings dialog": ", 開啟描述設定對話框",
+  ", selected": ", 選擇",
+  "captions settings": "字幕設定",
+  "Audio Player": "音訊播放器",
+  "Video Player": "視訊播放器",
+  "Replay": "重播",
+  "Progress Bar": "進度列",
+  "Volume Level": "音量",
+  "subtitles settings": "字幕設定",
+  "descriptions settings": "描述設定",
+  "Text": "文字",
+  "White": "白",
+  "Black": "黑",
+  "Red": "紅",
+  "Green": "綠",
+  "Blue": "藍",
+  "Yellow": "黃",
+  "Magenta": "紫紅",
+  "Cyan": "青",
+  "Background": "背景",
+  "Window": "視窗",
+  "Transparent": "透明",
+  "Semi-Transparent": "半透明",
+  "Opaque": "不透明",
+  "Font Size": "字型尺寸",
+  "Text Edge Style": "字型邊緣樣式",
+  "None": "無",
+  "Raised": "浮雕",
+  "Depressed": "壓低",
+  "Uniform": "均勻",
+  "Drop shadow": "下陰影",
+  "Font Family": "字型系列",
+  "Proportional Sans-Serif": "調和間距無襯線字型",
+  "Monospace Sans-Serif": "等寬無襯線字型",
+  "Proportional Serif": "調和間距襯線字型",
+  "Monospace Serif": "等寬襯線字型",
+  "Casual": "輕便的",
+  "Script": "手寫體",
+  "Small Caps": "小型大寫字體",
+  "Reset": "重置",
+  "restore all settings to the default values": "恢復全部設定至預設值",
+  "Done": "完成",
+  "Caption Settings Dialog": "字幕設定對話框",
+  "Beginning of dialog window. Escape will cancel and close the window.": "開始對話視窗。離開會取消並關閉視窗",
+  "End of dialog window.": "結束對話視窗",
+  "Seek to live, currently behind live": "快轉至直播，目前為稍早畫面",
+  "Seek to live, currently playing live": "快轉至直播，目前為現場畫面",
+  "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
+  "{1} is loading.": "{1} 正在載入。",
+  "No content": "沒有內容",
+  "Color": "顏色",
+  "Opacity": "不透明度",
+  "Text Background": "文字背景",
+  "Caption Area Background": "字幕區域背景",
+  "Skip forward {1} seconds": "快轉 {1} 秒",
+  "Skip backward {1} seconds": "倒轉 {1} 秒"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/zh-Hant.json b/priv/static/video.js/lang/zh-Hant.json
new file mode 100644
index 0000000..335837d
--- /dev/null
+++ b/priv/static/video.js/lang/zh-Hant.json
@@ -0,0 +1,98 @@
+{
+  "Play": "播放",
+  "Pause": "暫停",
+  "Current Time": "目前時間",
+  "Duration": "總共時間",
+  "Remaining Time": "剩餘時間",
+  "Stream Type": "串流類型",
+  "LIVE": "直播",
+  "Loaded": "載入完畢",
+  "Progress": "進度",
+  "Fullscreen": "全螢幕",
+  "Exit Fullscreen": "退出全螢幕",
+  "Picture-in-Picture": "子母畫面",
+  "Exit Picture-in-Picture": "退出子母畫面",
+  "Mute": "靜音",
+  "Unmute": "開啟音效",
+  "Playback Rate": " 播放速率",
+  "Subtitles": "字幕",
+  "subtitles off": "關閉字幕",
+  "Captions": "內嵌字幕",
+  "captions off": "關閉內嵌字幕",
+  "Chapters": "章節",
+  "Close Modal Dialog": "關閉對話框",
+  "Descriptions": "描述",
+  "descriptions off": "關閉描述",
+  "Audio Track": "音軌",
+  "You aborted the media playback": "影片播放已終止",
+  "A network error caused the media download to fail part-way.": "網路錯誤導致影片下載失敗。",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "因格式不支援、伺服器或網路的問題無法載入媒體。",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由於影片檔案損毀或是該影片使用了您的瀏覽器不支援的功能，已終止播放媒體。",
+  "No compatible source was found for this media.": "無法找到相容此媒體的來源。",
+  "The media is encrypted and we do not have the keys to decrypt it.": "媒體已加密，無法解密。",
+  "Play Video": "播放影片",
+  "Close": "關閉",
+  "Modal Window": "強制回應視窗",
+  "This is a modal window": "此為強制回應視窗",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按鍵或關閉按鈕來關閉此視窗。",
+  ", opens captions settings dialog": ", 開啟標題設定對話框",
+  ", opens subtitles settings dialog": ", 開啟字幕設定對話框",
+  ", opens descriptions settings dialog": ", 開啟描述設定對話框",
+  ", selected": ", 選擇",
+  "captions settings": "字幕設定",
+  "Audio Player": "音訊播放器",
+  "Video Player": "視訊播放器",
+  "Replay": "重播",
+  "Progress Bar": "進度列",
+  "Volume Level": "音量",
+  "subtitles settings": "字幕設定",
+  "descriptions settings": "描述設定",
+  "Text": "文字",
+  "White": "白",
+  "Black": "黑",
+  "Red": "紅",
+  "Green": "綠",
+  "Blue": "藍",
+  "Yellow": "黃",
+  "Magenta": "紫紅",
+  "Cyan": "青",
+  "Background": "背景",
+  "Window": "視窗",
+  "Transparent": "透明",
+  "Semi-Transparent": "半透明",
+  "Opaque": "不透明",
+  "Font Size": "字型尺寸",
+  "Text Edge Style": "字型邊緣樣式",
+  "None": "無",
+  "Raised": "浮雕",
+  "Depressed": "壓低",
+  "Uniform": "均勻",
+  "Drop shadow": "下陰影",
+  "Font Family": "字型系列",
+  "Proportional Sans-Serif": "調和間距無襯線字型",
+  "Monospace Sans-Serif": "等寬無襯線字型",
+  "Proportional Serif": "調和間距襯線字型",
+  "Monospace Serif": "等寬襯線字型",
+  "Casual": "輕便的",
+  "Script": "手寫體",
+  "Small Caps": "小型大寫字體",
+  "Reset": "重置",
+  "restore all settings to the default values": "恢復全部設定至預設值",
+  "Done": "完成",
+  "Caption Settings Dialog": "字幕設定對話框",
+  "Beginning of dialog window. Escape will cancel and close the window.": "開始對話視窗。離開會取消並關閉視窗",
+  "End of dialog window.": "結束對話視窗",
+  "Seek to live, currently behind live": "快轉至直播，目前為稍早畫面",
+  "Seek to live, currently playing live": "快轉至直播，目前為現場畫面",
+  "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
+  "{1} is loading.": "{1} 正在載入。",
+  "Exit Picture-in-Picture": "離開子母畫面",
+  "Picture-in-Picture": "子母畫面",
+  "No content": "沒有內容",
+  "Color": "顏色",
+  "Opacity": "不透明度",
+  "Text Background": "文字背景",
+  "Caption Area Background": "字幕區域背景",
+  "Skip forward {1} seconds": "快轉 {1} 秒",
+  "Skip backward {1} seconds": "倒轉 {1} 秒"
+}
diff --git a/priv/static/video.js/lang/zh-TW.js b/priv/static/video.js/lang/zh-TW.js
new file mode 100644
index 0000000..41b736e
--- /dev/null
+++ b/priv/static/video.js/lang/zh-TW.js
@@ -0,0 +1,96 @@
+videojs.addLanguage('zh-TW', {
+  "Play": "播放",
+  "Pause": "暫停",
+  "Current Time": "目前時間",
+  "Duration": "總共時間",
+  "Remaining Time": "剩餘時間",
+  "Stream Type": "串流類型",
+  "LIVE": "直播",
+  "Loaded": "載入完畢",
+  "Progress": "進度",
+  "Fullscreen": "全螢幕",
+  "Exit Fullscreen": "退出全螢幕",
+  "Picture-in-Picture": "子母畫面",
+  "Exit Picture-in-Picture": "離開子母畫面",
+  "Mute": "靜音",
+  "Unmute": "開啟音效",
+  "Playback Rate": " 播放速率",
+  "Subtitles": "字幕",
+  "subtitles off": "關閉字幕",
+  "Captions": "內嵌字幕",
+  "captions off": "關閉內嵌字幕",
+  "Chapters": "章節",
+  "Close Modal Dialog": "關閉對話框",
+  "Descriptions": "描述",
+  "descriptions off": "關閉描述",
+  "Audio Track": "音軌",
+  "You aborted the media playback": "影片播放已終止",
+  "A network error caused the media download to fail part-way.": "網路錯誤導致影片下載失敗。",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "因格式不支援、伺服器或網路的問題無法載入媒體。",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由於影片檔案損毀或是該影片使用了您的瀏覽器不支援的功能，已終止播放媒體。",
+  "No compatible source was found for this media.": "無法找到相容此媒體的來源。",
+  "The media is encrypted and we do not have the keys to decrypt it.": "媒體已加密，無法解密。",
+  "Play Video": "播放影片",
+  "Close": "關閉",
+  "Modal Window": "強制回應視窗",
+  "This is a modal window": "此為強制回應視窗",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按鍵或關閉按鈕來關閉此視窗。",
+  ", opens captions settings dialog": ", 開啟標題設定對話框",
+  ", opens subtitles settings dialog": ", 開啟字幕設定對話框",
+  ", opens descriptions settings dialog": ", 開啟描述設定對話框",
+  ", selected": ", 選擇",
+  "captions settings": "字幕設定",
+  "Audio Player": "音訊播放器",
+  "Video Player": "視訊播放器",
+  "Replay": "重播",
+  "Progress Bar": "進度列",
+  "Volume Level": "音量",
+  "subtitles settings": "字幕設定",
+  "descriptions settings": "描述設定",
+  "Text": "文字",
+  "White": "白",
+  "Black": "黑",
+  "Red": "紅",
+  "Green": "綠",
+  "Blue": "藍",
+  "Yellow": "黃",
+  "Magenta": "紫紅",
+  "Cyan": "青",
+  "Background": "背景",
+  "Window": "視窗",
+  "Transparent": "透明",
+  "Semi-Transparent": "半透明",
+  "Opaque": "不透明",
+  "Font Size": "字型尺寸",
+  "Text Edge Style": "字型邊緣樣式",
+  "None": "無",
+  "Raised": "浮雕",
+  "Depressed": "壓低",
+  "Uniform": "均勻",
+  "Drop shadow": "下陰影",
+  "Font Family": "字型系列",
+  "Proportional Sans-Serif": "調和間距無襯線字型",
+  "Monospace Sans-Serif": "等寬無襯線字型",
+  "Proportional Serif": "調和間距襯線字型",
+  "Monospace Serif": "等寬襯線字型",
+  "Casual": "輕便的",
+  "Script": "手寫體",
+  "Small Caps": "小型大寫字體",
+  "Reset": "重置",
+  "restore all settings to the default values": "恢復全部設定至預設值",
+  "Done": "完成",
+  "Caption Settings Dialog": "字幕設定對話框",
+  "Beginning of dialog window. Escape will cancel and close the window.": "開始對話視窗。離開會取消並關閉視窗",
+  "End of dialog window.": "結束對話視窗",
+  "Seek to live, currently behind live": "快轉至直播，目前為稍早畫面",
+  "Seek to live, currently playing live": "快轉至直播，目前為現場畫面",
+  "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
+  "{1} is loading.": "{1} 正在載入。",
+  "No content": "沒有內容",
+  "Color": "顏色",
+  "Opacity": "不透明度",
+  "Text Background": "文字背景",
+  "Caption Area Background": "字幕區域背景",
+  "Skip forward {1} seconds": "快轉 {1} 秒",
+  "Skip backward {1} seconds": "倒轉 {1} 秒"
+});
\ No newline at end of file
diff --git a/priv/static/video.js/lang/zh-TW.json b/priv/static/video.js/lang/zh-TW.json
new file mode 100644
index 0000000..335837d
--- /dev/null
+++ b/priv/static/video.js/lang/zh-TW.json
@@ -0,0 +1,98 @@
+{
+  "Play": "播放",
+  "Pause": "暫停",
+  "Current Time": "目前時間",
+  "Duration": "總共時間",
+  "Remaining Time": "剩餘時間",
+  "Stream Type": "串流類型",
+  "LIVE": "直播",
+  "Loaded": "載入完畢",
+  "Progress": "進度",
+  "Fullscreen": "全螢幕",
+  "Exit Fullscreen": "退出全螢幕",
+  "Picture-in-Picture": "子母畫面",
+  "Exit Picture-in-Picture": "退出子母畫面",
+  "Mute": "靜音",
+  "Unmute": "開啟音效",
+  "Playback Rate": " 播放速率",
+  "Subtitles": "字幕",
+  "subtitles off": "關閉字幕",
+  "Captions": "內嵌字幕",
+  "captions off": "關閉內嵌字幕",
+  "Chapters": "章節",
+  "Close Modal Dialog": "關閉對話框",
+  "Descriptions": "描述",
+  "descriptions off": "關閉描述",
+  "Audio Track": "音軌",
+  "You aborted the media playback": "影片播放已終止",
+  "A network error caused the media download to fail part-way.": "網路錯誤導致影片下載失敗。",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "因格式不支援、伺服器或網路的問題無法載入媒體。",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由於影片檔案損毀或是該影片使用了您的瀏覽器不支援的功能，已終止播放媒體。",
+  "No compatible source was found for this media.": "無法找到相容此媒體的來源。",
+  "The media is encrypted and we do not have the keys to decrypt it.": "媒體已加密，無法解密。",
+  "Play Video": "播放影片",
+  "Close": "關閉",
+  "Modal Window": "強制回應視窗",
+  "This is a modal window": "此為強制回應視窗",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按鍵或關閉按鈕來關閉此視窗。",
+  ", opens captions settings dialog": ", 開啟標題設定對話框",
+  ", opens subtitles settings dialog": ", 開啟字幕設定對話框",
+  ", opens descriptions settings dialog": ", 開啟描述設定對話框",
+  ", selected": ", 選擇",
+  "captions settings": "字幕設定",
+  "Audio Player": "音訊播放器",
+  "Video Player": "視訊播放器",
+  "Replay": "重播",
+  "Progress Bar": "進度列",
+  "Volume Level": "音量",
+  "subtitles settings": "字幕設定",
+  "descriptions settings": "描述設定",
+  "Text": "文字",
+  "White": "白",
+  "Black": "黑",
+  "Red": "紅",
+  "Green": "綠",
+  "Blue": "藍",
+  "Yellow": "黃",
+  "Magenta": "紫紅",
+  "Cyan": "青",
+  "Background": "背景",
+  "Window": "視窗",
+  "Transparent": "透明",
+  "Semi-Transparent": "半透明",
+  "Opaque": "不透明",
+  "Font Size": "字型尺寸",
+  "Text Edge Style": "字型邊緣樣式",
+  "None": "無",
+  "Raised": "浮雕",
+  "Depressed": "壓低",
+  "Uniform": "均勻",
+  "Drop shadow": "下陰影",
+  "Font Family": "字型系列",
+  "Proportional Sans-Serif": "調和間距無襯線字型",
+  "Monospace Sans-Serif": "等寬無襯線字型",
+  "Proportional Serif": "調和間距襯線字型",
+  "Monospace Serif": "等寬襯線字型",
+  "Casual": "輕便的",
+  "Script": "手寫體",
+  "Small Caps": "小型大寫字體",
+  "Reset": "重置",
+  "restore all settings to the default values": "恢復全部設定至預設值",
+  "Done": "完成",
+  "Caption Settings Dialog": "字幕設定對話框",
+  "Beginning of dialog window. Escape will cancel and close the window.": "開始對話視窗。離開會取消並關閉視窗",
+  "End of dialog window.": "結束對話視窗",
+  "Seek to live, currently behind live": "快轉至直播，目前為稍早畫面",
+  "Seek to live, currently playing live": "快轉至直播，目前為現場畫面",
+  "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
+  "{1} is loading.": "{1} 正在載入。",
+  "Exit Picture-in-Picture": "離開子母畫面",
+  "Picture-in-Picture": "子母畫面",
+  "No content": "沒有內容",
+  "Color": "顏色",
+  "Opacity": "不透明度",
+  "Text Background": "文字背景",
+  "Caption Area Background": "字幕區域背景",
+  "Skip forward {1} seconds": "快轉 {1} 秒",
+  "Skip backward {1} seconds": "倒轉 {1} 秒"
+}
diff --git a/priv/static/video.js/types/big-play-button.d.ts b/priv/static/video.js/types/big-play-button.d.ts
new file mode 100644
index 0000000..45f7ffa
--- /dev/null
+++ b/priv/static/video.js/types/big-play-button.d.ts
@@ -0,0 +1,34 @@
+export default BigPlayButton;
+/**
+ * The initial play button that shows before the video has played. The hiding of the
+ * `BigPlayButton` get done via CSS and `Player` states.
+ *
+ * @extends Button
+ */
+declare class BigPlayButton extends Button {
+    constructor(player: any, options: any);
+    mouseused_: boolean;
+    /**
+     * This gets called when a `BigPlayButton` "clicked". See {@link ClickableComponent}
+     * for more detailed information on what a click can be.
+     *
+     * @param {KeyboardEvent|MouseEvent|TouchEvent} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event: KeyboardEvent | MouseEvent | TouchEvent): void;
+    /**
+     * Handle `mousedown` events on the `BigPlayButton`.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event: MouseEvent): void;
+}
+import Button from "./button.js";
+//# sourceMappingURL=big-play-button.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/big-play-button.d.ts.map b/priv/static/video.js/types/big-play-button.d.ts.map
new file mode 100644
index 0000000..415d89e
--- /dev/null
+++ b/priv/static/video.js/types/big-play-button.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"big-play-button.d.ts","sourceRoot":"","sources":["../../src/js/big-play-button.js"],"names":[],"mappings":";AAOA;;;;;GAKG;AACH;IACE,uCAQC;IALC,oBAAuB;IAiBzB;;;;;;;;;;OAUG;IACH,mBAPW,aAAa,GAAC,UAAU,GAAC,UAAU,QAoC7C;IAiBD;;;;;;;OAOG;IACH,uBALW,UAAU,QAOpB;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/button.d.ts b/priv/static/video.js/types/button.d.ts
new file mode 100644
index 0000000..c68f2b5
--- /dev/null
+++ b/priv/static/video.js/types/button.d.ts
@@ -0,0 +1,28 @@
+export default Button;
+/**
+ * Base class for all buttons.
+ *
+ * @extends ClickableComponent
+ */
+declare class Button extends ClickableComponent {
+    /**
+     * Add a child `Component` inside of this `Button`.
+     *
+     * @param {string|Component} child
+     *        The name or instance of a child to add.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of options that will get passed to children of
+     *        the child.
+     *
+     * @return {Component}
+     *         The `Component` that gets added as a child. When using a string the
+     *         `Component` will get created by this process.
+     *
+     * @deprecated since version 5
+     */
+    addChild(child: string | Component, options?: any): Component;
+}
+import ClickableComponent from "./clickable-component.js";
+import Component from "./component";
+//# sourceMappingURL=button.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/button.d.ts.map b/priv/static/video.js/types/button.d.ts.map
new file mode 100644
index 0000000..c7161d9
--- /dev/null
+++ b/priv/static/video.js/types/button.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/js/button.js"],"names":[],"mappings":";AASA;;;;GAIG;AACH;IA+CE;;;;;;;;;;;;;;;OAeG;IACH,gBAbW,MAAM,GAAC,SAAS,kBAOf,SAAS,CAapB;CA4CF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/clickable-component.d.ts b/priv/static/video.js/types/clickable-component.d.ts
new file mode 100644
index 0000000..e5f56af
--- /dev/null
+++ b/priv/static/video.js/types/clickable-component.d.ts
@@ -0,0 +1,88 @@
+export default ClickableComponent;
+/**
+ * Component which is clickable or keyboard actionable, but is not a
+ * native HTML button.
+ *
+ * @extends Component
+ */
+declare class ClickableComponent extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  { import('./player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of component options.
+     *
+     * @param  {function} [options.clickHandler]
+     *         The function to call when the button is clicked / activated
+     *
+     * @param  {string} [options.controlText]
+     *         The text to set on the button
+     *
+     * @param  {string} [options.className]
+     *         A class or space separated list of classes to add the component
+     *
+     */
+    constructor(player: import('./player').default, options?: {
+        clickHandler?: Function;
+        controlText?: string;
+        className?: string;
+    });
+    handleMouseOver_: (e: any) => any;
+    handleMouseOut_: (e: any) => any;
+    handleClick_: (e: any) => void;
+    handleKeyDown_: (e: any) => void;
+    tabIndex_: any;
+    dispose(): void;
+    controlTextEl_: Element;
+    /**
+     * Create a control text element on this `ClickableComponent`
+     *
+     * @param {Element} [el]
+     *        Parent element for the control text.
+     *
+     * @return {Element}
+     *         The control text element that gets created.
+     */
+    createControlTextEl(el?: Element): Element;
+    /**
+     * Get or set the localize text to use for the controls on the `ClickableComponent`.
+     *
+     * @param {string} [text]
+     *        Control text for element.
+     *
+     * @param {Element} [el=this.el()]
+     *        Element to set the title on.
+     *
+     * @return {string}
+     *         - The control text when getting
+     */
+    controlText(text?: string, el?: Element): string;
+    /** @protected */
+    protected controlText_: string;
+    /**
+     * Enable this `ClickableComponent`
+     */
+    enable(): void;
+    enabled_: boolean;
+    /**
+     * Disable this `ClickableComponent`
+     */
+    disable(): void;
+    /**
+     * Event handler that is called when a `ClickableComponent` receives a
+     * `click` or `tap` event.
+     *
+     * @param {Event} event
+     *        The `tap` or `click` event that caused this function to be called.
+     *
+     * @listens tap
+     * @listens click
+     * @abstract
+     */
+    handleClick(event: Event, ...args: any[]): void;
+}
+import Component from "./component";
+//# sourceMappingURL=clickable-component.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/clickable-component.d.ts.map b/priv/static/video.js/types/clickable-component.d.ts.map
new file mode 100644
index 0000000..1bbd2ef
--- /dev/null
+++ b/priv/static/video.js/types/clickable-component.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"clickable-component.d.ts","sourceRoot":"","sources":["../../src/js/clickable-component.js"],"names":[],"mappings":";AAQA;;;;;GAKG;AACH;IAEE;;;;;;;;;;;;;;;;;;OAkBG;IACH,oBAhBa,OAAO,UAAU,EAAE,OAAO;QAMR,YAAY;QAGd,WAAW,GAA5B,MAAM;QAGW,SAAS,GAA1B,MAAM;OAoBjB;IARC,kCAAsD;IACtD,iCAAoD;IACpD,+BAA8C;IAC9C,iCAAkD;IAqClD,eAA+B;IAiBjC,gBAKC;IAHC,wBAA0B;IAK5B;;;;;;;;OAQG;IACH,yBANW,OAAO,GAGN,OAAO,CAkBlB;IAED;;;;;;;;;;;OAWG;IACH,mBATW,MAAM,OAGN,OAAO,GAGN,MAAM,CAiBjB;IAPC,iBAAiB;IACjB,+BAAwB;IAkB1B;;OAEG;IACH,eAWC;IATG,kBAAoB;IAWxB;;OAEG;IACH,gBAWC;IAWD;;;;;;;;;;OAUG;IACH,mBAPW,KAAK,wBAWf;CA4BF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/close-button.d.ts b/priv/static/video.js/types/close-button.d.ts
new file mode 100644
index 0000000..5cb1a09
--- /dev/null
+++ b/priv/static/video.js/types/close-button.d.ts
@@ -0,0 +1,35 @@
+export default CloseButton;
+/**
+ * The `CloseButton` is a `{@link Button}` that fires a `close` event when
+ * it gets clicked.
+ *
+ * @extends Button
+ */
+declare class CloseButton extends Button {
+    /**
+    * Creates an instance of the this class.
+    *
+    * @param  { import('./player').default } player
+    *         The `Player` that this class should be attached to.
+    *
+    * @param  {Object} [options]
+    *         The key/value store of player options.
+    */
+    constructor(player: import('./player').default, options?: any);
+    /**
+     * This gets called when a `CloseButton` gets clicked. See
+     * {@link ClickableComponent#handleClick} for more information on when
+     * this will be triggered
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     * @fires CloseButton#close
+     */
+    handleClick(event: Event): void;
+}
+import Button from "./button";
+//# sourceMappingURL=close-button.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/close-button.d.ts.map b/priv/static/video.js/types/close-button.d.ts.map
new file mode 100644
index 0000000..86d77cb
--- /dev/null
+++ b/priv/static/video.js/types/close-button.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"close-button.d.ts","sourceRoot":"","sources":["../../src/js/close-button.js"],"names":[],"mappings":";AAOA;;;;;GAKG;AACH;IAEE;;;;;;;;MAQE;IACF,oBANY,OAAO,UAAU,EAAE,OAAO,iBAUrC;IAYD;;;;;;;;;;;;OAYG;IACH,mBARW,KAAK,QAqBf;CAuBF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/component.d.ts b/priv/static/video.js/types/component.d.ts
new file mode 100644
index 0000000..9aeb616
--- /dev/null
+++ b/priv/static/video.js/types/component.d.ts
@@ -0,0 +1,881 @@
+export default Component;
+/**
+ * Base class for all UI Components.
+ * Components are UI objects which represent both a javascript object and an element
+ * in the DOM. They can be children of other components, and can have
+ * children themselves.
+ *
+ * Components can also use methods from {@link EventTarget}
+ */
+declare class Component {
+    /**
+     * Register a `Component` with `videojs` given the name and the component.
+     *
+     * > NOTE: {@link Tech}s should not be registered as a `Component`. {@link Tech}s
+     *         should be registered using {@link Tech.registerTech} or
+     *         {@link videojs:videojs.registerTech}.
+     *
+     * > NOTE: This function can also be seen on videojs as
+     *         {@link videojs:videojs.registerComponent}.
+     *
+     * @param {string} name
+     *        The name of the `Component` to register.
+     *
+     * @param {Component} ComponentToRegister
+     *        The `Component` class to register.
+     *
+     * @return {Component}
+     *         The `Component` that was registered.
+     */
+    static registerComponent(name: string, ComponentToRegister: Component): Component;
+    /**
+     * Get a `Component` based on the name it was registered with.
+     *
+     * @param {string} name
+     *        The Name of the component to get.
+     *
+     * @return {typeof Component}
+     *         The `Component` that got registered under the given name.
+     */
+    static getComponent(name: string): typeof Component;
+    /**
+     * A callback that is called when a component is ready. Does not have any
+     * parameters and any callback value will be ignored.
+     *
+     * @callback ReadyCallback
+     * @this Component
+     */
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of component options.
+     *
+     * @param {Object[]} [options.children]
+     *        An array of children objects to initialize this component with. Children objects have
+     *        a name property that will be used if more than one component of the same type needs to be
+     *        added.
+     *
+     * @param  {string} [options.className]
+     *         A class or space separated list of classes to add the component
+     *
+     * @param {ReadyCallback} [ready]
+     *        Function that gets called when the `Component` is ready.
+     */
+    constructor(player: import('./player').default, options?: {
+        children?: any[];
+        className?: string;
+    }, ready?: () => any);
+    player_: any;
+    isDisposed_: boolean;
+    parentComponent_: any;
+    options_: any;
+    id_: any;
+    name_: any;
+    el_: any;
+    /**
+     * Handles language change for the player in components. Should be overridden by sub-components.
+     *
+     * @abstract
+     */
+    handleLanguagechange(): void;
+    children_: any[];
+    childIndex_: {};
+    childNameIndex_: {};
+    setTimeoutIds_: Set<any>;
+    setIntervalIds_: Set<any>;
+    rafIds_: Set<any>;
+    namedRafs_: Map<any, any>;
+    clearingTimersOnDispose_: boolean;
+    /**
+     * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+     * function that will get called when an event with a certain name gets triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to call with `EventTarget`s
+     */
+    on(type: string | string[], fn: Function): void;
+    /**
+     * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+     * This makes it so that the `event listener` will no longer get called when the
+     * named event happens.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} [fn]
+     *        The function to remove. If not specified, all listeners managed by Video.js will be removed.
+     */
+    off(type: string | string[], fn?: Function): void;
+    /**
+     * This function will add an `event listener` that gets triggered only once. After the
+     * first trigger it will get removed. This is like adding an `event listener`
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    one(type: string | string[], fn: Function): void;
+    /**
+     * This function will add an `event listener` that gets triggered only once and is
+     * removed from all events. This is like adding an array of `event listener`s
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+     * first time it is triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    any(type: string | string[], fn: Function): void;
+    /**
+     * This function causes an event to happen. This will then cause any `event listeners`
+     * that are waiting for that event, to get called. If there are no `event listeners`
+     * for an event then nothing will happen.
+     *
+     * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+     * Trigger will also call the `on` + `uppercaseEventName` function.
+     *
+     * Example:
+     * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+     * `onClick` if it exists.
+     *
+     * @param {string|Event|Object} event
+     *        The name of the event, an `Event`, or an object with a key of type set to
+     *        an event name.
+     *
+     * @param {Object} [hash]
+     *        Optionally extra argument to pass through to an event listener
+     */
+    trigger(event: string | Event | any, hash?: any): void;
+    /**
+     * Dispose of the `Component` and all child components.
+     *
+     * @fires Component#dispose
+     *
+     * @param {Object} options
+     * @param {Element} options.originalEl element with which to replace player element
+     */
+    dispose(options?: {
+        originalEl: Element;
+    }): void;
+    /**
+     * Determine whether or not this component has been disposed.
+     *
+     * @return {boolean}
+     *         If the component has been disposed, will be `true`. Otherwise, `false`.
+     */
+    isDisposed(): boolean;
+    /**
+     * Return the {@link Player} that the `Component` has attached to.
+     *
+     * @return { import('./player').default }
+     *         The player that this `Component` has attached to.
+     */
+    player(): import('./player').default;
+    /**
+     * Deep merge of options objects with new options.
+     * > Note: When both `obj` and `options` contain properties whose values are objects.
+     *         The two properties get merged using {@link module:obj.merge}
+     *
+     * @param {Object} obj
+     *        The object that contains new options.
+     *
+     * @return {Object}
+     *         A new object of `this.options_` and `obj` merged together.
+     */
+    options(obj: any): any;
+    /**
+     * Get the `Component`s DOM element
+     *
+     * @return {Element}
+     *         The DOM element for this `Component`.
+     */
+    el(): Element;
+    /**
+     * Create the `Component`s DOM element.
+     *
+     * @param {string} [tagName]
+     *        Element's DOM node type. e.g. 'div'
+     *
+     * @param {Object} [properties]
+     *        An object of properties that should be set.
+     *
+     * @param {Object} [attributes]
+     *        An object of attributes that should be set.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tagName?: string, properties?: any, attributes?: any): Element;
+    /**
+     * Localize a string given the string in english.
+     *
+     * If tokens are provided, it'll try and run a simple token replacement on the provided string.
+     * The tokens it looks for look like `{1}` with the index being 1-indexed into the tokens array.
+     *
+     * If a `defaultValue` is provided, it'll use that over `string`,
+     * if a value isn't found in provided language files.
+     * This is useful if you want to have a descriptive key for token replacement
+     * but have a succinct localized string and not require `en.json` to be included.
+     *
+     * Currently, it is used for the progress bar timing.
+     * ```js
+     * {
+     *   "progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
+     * }
+     * ```
+     * It is then used like so:
+     * ```js
+     * this.localize('progress bar timing: currentTime={1} duration{2}',
+     *               [this.player_.currentTime(), this.player_.duration()],
+     *               '{1} of {2}');
+     * ```
+     *
+     * Which outputs something like: `01:23 of 24:56`.
+     *
+     *
+     * @param {string} string
+     *        The string to localize and the key to lookup in the language files.
+     * @param {string[]} [tokens]
+     *        If the current item has token replacements, provide the tokens here.
+     * @param {string} [defaultValue]
+     *        Defaults to `string`. Can be a default value to use for token replacement
+     *        if the lookup key is needed to be separate.
+     *
+     * @return {string}
+     *         The localized string or if no localization exists the english string.
+     */
+    localize(string: string, tokens?: string[], defaultValue?: string): string;
+    /**
+     * Return the `Component`s DOM element. This is where children get inserted.
+     * This will usually be the the same as the element returned in {@link Component#el}.
+     *
+     * @return {Element}
+     *         The content element for this `Component`.
+     */
+    contentEl(): Element;
+    /**
+     * Get this `Component`s ID
+     *
+     * @return {string}
+     *         The id of this `Component`
+     */
+    id(): string;
+    /**
+     * Get the `Component`s name. The name gets used to reference the `Component`
+     * and is set during registration.
+     *
+     * @return {string}
+     *         The name of this `Component`.
+     */
+    name(): string;
+    /**
+     * Get an array of all child components
+     *
+     * @return {Array}
+     *         The children
+     */
+    children(): any[];
+    /**
+     * Returns the child `Component` with the given `id`.
+     *
+     * @param {string} id
+     *        The id of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The child `Component` with the given `id` or undefined.
+     */
+    getChildById(id: string): Component | undefined;
+    /**
+     * Returns the child `Component` with the given `name`.
+     *
+     * @param {string} name
+     *        The name of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The child `Component` with the given `name` or undefined.
+     */
+    getChild(name: string): Component | undefined;
+    /**
+     * Returns the descendant `Component` following the givent
+     * descendant `names`. For instance ['foo', 'bar', 'baz'] would
+     * try to get 'foo' on the current component, 'bar' on the 'foo'
+     * component and 'baz' on the 'bar' component and return undefined
+     * if any of those don't exist.
+     *
+     * @param {...string[]|...string} names
+     *        The name of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The descendant `Component` following the given descendant
+     *         `names` or undefined.
+     */
+    getDescendant(...names: any[]): Component | undefined;
+    /**
+     * Adds an SVG icon element to another element or component.
+     *
+     * @param {string} iconName
+     *        The name of icon. A list of all the icon names can be found at 'sandbox/svg-icons.html'
+     *
+     * @param {Element} [el=this.el()]
+     *        Element to set the title on. Defaults to the current Component's element.
+     *
+     * @return {Element}
+     *        The newly created icon element.
+     */
+    setIcon(iconName: string, el?: Element): Element;
+    iconIsSet_: boolean;
+    /**
+     * Add a child `Component` inside the current `Component`.
+     *
+     * @param {string|Component} child
+     *        The name or instance of a child to add.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of options that will get passed to children of
+     *        the child.
+     *
+     * @param {number} [index=this.children_.length]
+     *        The index to attempt to add a child into.
+     *
+     *
+     * @return {Component}
+     *         The `Component` that gets added as a child. When using a string the
+     *         `Component` will get created by this process.
+     */
+    addChild(child: string | Component, options?: any, index?: number): Component;
+    /**
+     * Remove a child `Component` from this `Component`s list of children. Also removes
+     * the child `Component`s element from this `Component`s element.
+     *
+     * @param {Component} component
+     *        The child `Component` to remove.
+     */
+    removeChild(component: Component): void;
+    /**
+     * Add and initialize default child `Component`s based upon options.
+     */
+    initChildren(): void;
+    /**
+     * Builds the default DOM class name. Should be overridden by sub-components.
+     *
+     * @return {string}
+     *         The DOM class name for this object.
+     *
+     * @abstract
+     */
+    buildCSSClass(): string;
+    /**
+     * Bind a listener to the component's ready state.
+     * Different from event listeners in that if the ready event has already happened
+     * it will trigger the function immediately.
+     *
+     * @param {ReadyCallback} fn
+     *        Function that gets called when the `Component` is ready.
+     *
+     * @return {Component}
+     *         Returns itself; method can be chained.
+     */
+    ready(fn: () => any, sync?: boolean): Component;
+    readyQueue_: any;
+    /**
+     * Trigger all the ready listeners for this `Component`.
+     *
+     * @fires Component#ready
+     */
+    triggerReady(): void;
+    isReady_: boolean;
+    /**
+     * Find a single DOM element matching a `selector`. This can be within the `Component`s
+     * `contentEl()` or another custom context.
+     *
+     * @param {string} selector
+     *        A valid CSS selector, which will be passed to `querySelector`.
+     *
+     * @param {Element|string} [context=this.contentEl()]
+     *        A DOM element within which to query. Can also be a selector string in
+     *        which case the first matching element will get used as context. If
+     *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+     *        nothing it falls back to `document`.
+     *
+     * @return {Element|null}
+     *         the dom element that was found, or null
+     *
+     * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+     */
+    $(selector: string, context?: Element | string): Element | null;
+    /**
+     * Finds all DOM element matching a `selector`. This can be within the `Component`s
+     * `contentEl()` or another custom context.
+     *
+     * @param {string} selector
+     *        A valid CSS selector, which will be passed to `querySelectorAll`.
+     *
+     * @param {Element|string} [context=this.contentEl()]
+     *        A DOM element within which to query. Can also be a selector string in
+     *        which case the first matching element will get used as context. If
+     *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+     *        nothing it falls back to `document`.
+     *
+     * @return {NodeList}
+     *         a list of dom elements that were found
+     *
+     * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+     */
+    $$(selector: string, context?: Element | string): NodeList;
+    /**
+     * Check if a component's element has a CSS class name.
+     *
+     * @param {string} classToCheck
+     *        CSS class name to check.
+     *
+     * @return {boolean}
+     *         - True if the `Component` has the class.
+     *         - False if the `Component` does not have the class`
+     */
+    hasClass(classToCheck: string): boolean;
+    /**
+     * Add a CSS class name to the `Component`s element.
+     *
+     * @param {...string} classesToAdd
+     *        One or more CSS class name to add.
+     */
+    addClass(...classesToAdd: string[]): void;
+    /**
+     * Remove a CSS class name from the `Component`s element.
+     *
+     * @param {...string} classesToRemove
+     *        One or more CSS class name to remove.
+     */
+    removeClass(...classesToRemove: string[]): void;
+    /**
+     * Add or remove a CSS class name from the component's element.
+     * - `classToToggle` gets added when {@link Component#hasClass} would return false.
+     * - `classToToggle` gets removed when {@link Component#hasClass} would return true.
+     *
+     * @param  {string} classToToggle
+     *         The class to add or remove based on (@link Component#hasClass}
+     *
+     * @param  {boolean|Dom~predicate} [predicate]
+     *         An {@link Dom~predicate} function or a boolean
+     */
+    toggleClass(classToToggle: string, predicate: any): void;
+    /**
+     * Show the `Component`s element if it is hidden by removing the
+     * 'vjs-hidden' class name from it.
+     */
+    show(): void;
+    /**
+     * Hide the `Component`s element if it is currently showing by adding the
+     * 'vjs-hidden` class name to it.
+     */
+    hide(): void;
+    /**
+     * Lock a `Component`s element in its visible state by adding the 'vjs-lock-showing'
+     * class name to it. Used during fadeIn/fadeOut.
+     *
+     * @private
+     */
+    private lockShowing;
+    /**
+     * Unlock a `Component`s element from its visible state by removing the 'vjs-lock-showing'
+     * class name from it. Used during fadeIn/fadeOut.
+     *
+     * @private
+     */
+    private unlockShowing;
+    /**
+     * Get the value of an attribute on the `Component`s element.
+     *
+     * @param {string} attribute
+     *        Name of the attribute to get the value from.
+     *
+     * @return {string|null}
+     *         - The value of the attribute that was asked for.
+     *         - Can be an empty string on some browsers if the attribute does not exist
+     *           or has no value
+     *         - Most browsers will return null if the attribute does not exist or has
+     *           no value.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute}
+     */
+    getAttribute(attribute: string): string | null;
+    /**
+     * Set the value of an attribute on the `Component`'s element
+     *
+     * @param {string} attribute
+     *        Name of the attribute to set.
+     *
+     * @param {string} value
+     *        Value to set the attribute to.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute}
+     */
+    setAttribute(attribute: string, value: string): void;
+    /**
+     * Remove an attribute from the `Component`s element.
+     *
+     * @param {string} attribute
+     *        Name of the attribute to remove.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute}
+     */
+    removeAttribute(attribute: string): void;
+    /**
+     * Get or set the width of the component based upon the CSS styles.
+     * See {@link Component#dimension} for more detailed information.
+     *
+     * @param {number|string} [num]
+     *        The width that you want to set postfixed with '%', 'px' or nothing.
+     *
+     * @param {boolean} [skipListeners]
+     *        Skip the componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The width when getting, zero if there is no width
+     */
+    width(num?: number | string, skipListeners?: boolean): number | undefined;
+    /**
+     * Get or set the height of the component based upon the CSS styles.
+     * See {@link Component#dimension} for more detailed information.
+     *
+     * @param {number|string} [num]
+     *        The height that you want to set postfixed with '%', 'px' or nothing.
+     *
+     * @param {boolean} [skipListeners]
+     *        Skip the componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The height when getting, zero if there is no height
+     */
+    height(num?: number | string, skipListeners?: boolean): number | undefined;
+    /**
+     * Set both the width and height of the `Component` element at the same time.
+     *
+     * @param  {number|string} width
+     *         Width to set the `Component`s element to.
+     *
+     * @param  {number|string} height
+     *         Height to set the `Component`s element to.
+     */
+    dimensions(width: number | string, height: number | string): void;
+    /**
+     * Get or set width or height of the `Component` element. This is the shared code
+     * for the {@link Component#width} and {@link Component#height}.
+     *
+     * Things to know:
+     * - If the width or height in an number this will return the number postfixed with 'px'.
+     * - If the width/height is a percent this will return the percent postfixed with '%'
+     * - Hidden elements have a width of 0 with `window.getComputedStyle`. This function
+     *   defaults to the `Component`s `style.width` and falls back to `window.getComputedStyle`.
+     *   See [this]{@link http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/}
+     *   for more information
+     * - If you want the computed style of the component, use {@link Component#currentWidth}
+     *   and {@link {Component#currentHeight}
+     *
+     * @fires Component#componentresize
+     *
+     * @param {string} widthOrHeight
+     8        'width' or 'height'
+     *
+     * @param  {number|string} [num]
+     8         New dimension
+     *
+     * @param  {boolean} [skipListeners]
+     *         Skip componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The dimension when getting or 0 if unset
+     */
+    dimension(widthOrHeight: string, num?: number | string, skipListeners?: boolean): number | undefined;
+    /**
+     * Get the computed width or the height of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @param {string} widthOrHeight
+     *        A string containing 'width' or 'height'. Whichever one you want to get.
+     *
+     * @return {number}
+     *         The dimension that gets asked for or 0 if nothing was set
+     *         for that dimension.
+     */
+    currentDimension(widthOrHeight: string): number;
+    /**
+     * An object that contains width and height values of the `Component`s
+     * computed style. Uses `window.getComputedStyle`.
+     *
+     * @typedef {Object} Component~DimensionObject
+     *
+     * @property {number} width
+     *           The width of the `Component`s computed style.
+     *
+     * @property {number} height
+     *           The height of the `Component`s computed style.
+     */
+    /**
+     * Get an object that contains computed width and height values of the
+     * component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {Component~DimensionObject}
+     *         The computed dimensions of the component's element.
+     */
+    currentDimensions(): Component;
+    /**
+     * Get the computed width of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {number}
+     *         The computed width of the component's element.
+     */
+    currentWidth(): number;
+    /**
+     * Get the computed height of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {number}
+     *         The computed height of the component's element.
+     */
+    currentHeight(): number;
+    /**
+     * Set the focus to this component
+     */
+    focus(): void;
+    /**
+     * Remove the focus from this component
+     */
+    blur(): void;
+    /**
+     * When this Component receives a `keydown` event which it does not process,
+     *  it passes the event to the Player for handling.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Many components used to have a `handleKeyPress` method, which was poorly
+     * named because it listened to a `keydown` event. This method name now
+     * delegates to `handleKeyDown`. This means anyone calling `handleKeyPress`
+     * will not see their method calls stop working.
+     *
+     * @param {KeyboardEvent} event
+     *        The event that caused this function to be called.
+     */
+    handleKeyPress(event: KeyboardEvent): void;
+    /**
+     * Emit a 'tap' events when touch event support gets detected. This gets used to
+     * support toggling the controls through a tap on the video. They get enabled
+     * because every sub-component would have extra overhead otherwise.
+     *
+     * @protected
+     * @fires Component#tap
+     * @listens Component#touchstart
+     * @listens Component#touchmove
+     * @listens Component#touchleave
+     * @listens Component#touchcancel
+     * @listens Component#touchend
+  
+     */
+    protected emitTapEvents(): void;
+    /**
+     * This function reports user activity whenever touch events happen. This can get
+     * turned off by any sub-components that wants touch events to act another way.
+     *
+     * Report user touch activity when touch events occur. User activity gets used to
+     * determine when controls should show/hide. It is simple when it comes to mouse
+     * events, because any mouse event should show the controls. So we capture mouse
+     * events that bubble up to the player and report activity when that happens.
+     * With touch events it isn't as easy as `touchstart` and `touchend` toggle player
+     * controls. So touch events can't help us at the player level either.
+     *
+     * User activity gets checked asynchronously. So what could happen is a tap event
+     * on the video turns the controls off. Then the `touchend` event bubbles up to
+     * the player. Which, if it reported user activity, would turn the controls right
+     * back on. We also don't want to completely block touch events from bubbling up.
+     * Furthermore a `touchmove` event and anything other than a tap, should not turn
+     * controls back on.
+     *
+     * @listens Component#touchstart
+     * @listens Component#touchmove
+     * @listens Component#touchend
+     * @listens Component#touchcancel
+     */
+    enableTouchActivity(): void;
+    /**
+     * A callback that has no parameters and is bound into `Component`s context.
+     *
+     * @callback Component~GenericCallback
+     * @this Component
+     */
+    /**
+     * Creates a function that runs after an `x` millisecond timeout. This function is a
+     * wrapper around `window.setTimeout`. There are a few reasons to use this one
+     * instead though:
+     * 1. It gets cleared via  {@link Component#clearTimeout} when
+     *    {@link Component#dispose} gets called.
+     * 2. The function callback will gets turned into a {@link Component~GenericCallback}
+     *
+     * > Note: You can't use `window.clearTimeout` on the id returned by this function. This
+     *         will cause its dispose listener not to get cleaned up! Please use
+     *         {@link Component#clearTimeout} or {@link Component#dispose} instead.
+     *
+     * @param {Component~GenericCallback} fn
+     *        The function that will be run after `timeout`.
+     *
+     * @param {number} timeout
+     *        Timeout in milliseconds to delay before executing the specified function.
+     *
+     * @return {number}
+     *         Returns a timeout ID that gets used to identify the timeout. It can also
+     *         get used in {@link Component#clearTimeout} to clear the timeout that
+     *         was set.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout}
+     */
+    setTimeout(fn: any, timeout: number): number;
+    /**
+     * Clears a timeout that gets created via `window.setTimeout` or
+     * {@link Component#setTimeout}. If you set a timeout via {@link Component#setTimeout}
+     * use this function instead of `window.clearTimout`. If you don't your dispose
+     * listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} timeoutId
+     *        The id of the timeout to clear. The return value of
+     *        {@link Component#setTimeout} or `window.setTimeout`.
+     *
+     * @return {number}
+     *         Returns the timeout id that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout}
+     */
+    clearTimeout(timeoutId: number): number;
+    /**
+     * Creates a function that gets run every `x` milliseconds. This function is a wrapper
+     * around `window.setInterval`. There are a few reasons to use this one instead though.
+     * 1. It gets cleared via  {@link Component#clearInterval} when
+     *    {@link Component#dispose} gets called.
+     * 2. The function callback will be a {@link Component~GenericCallback}
+     *
+     * @param {Component~GenericCallback} fn
+     *        The function to run every `x` seconds.
+     *
+     * @param {number} interval
+     *        Execute the specified function every `x` milliseconds.
+     *
+     * @return {number}
+     *         Returns an id that can be used to identify the interval. It can also be be used in
+     *         {@link Component#clearInterval} to clear the interval.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval}
+     */
+    setInterval(fn: any, interval: number): number;
+    /**
+     * Clears an interval that gets created via `window.setInterval` or
+     * {@link Component#setInterval}. If you set an interval via {@link Component#setInterval}
+     * use this function instead of `window.clearInterval`. If you don't your dispose
+     * listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} intervalId
+     *        The id of the interval to clear. The return value of
+     *        {@link Component#setInterval} or `window.setInterval`.
+     *
+     * @return {number}
+     *         Returns the interval id that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval}
+     */
+    clearInterval(intervalId: number): number;
+    /**
+     * Queues up a callback to be passed to requestAnimationFrame (rAF), but
+     * with a few extra bonuses:
+     *
+     * - Supports browsers that do not support rAF by falling back to
+     *   {@link Component#setTimeout}.
+     *
+     * - The callback is turned into a {@link Component~GenericCallback} (i.e.
+     *   bound to the component).
+     *
+     * - Automatic cancellation of the rAF callback is handled if the component
+     *   is disposed before it is called.
+     *
+     * @param  {Component~GenericCallback} fn
+     *         A function that will be bound to this component and executed just
+     *         before the browser's next repaint.
+     *
+     * @return {number}
+     *         Returns an rAF ID that gets used to identify the timeout. It can
+     *         also be used in {@link Component#cancelAnimationFrame} to cancel
+     *         the animation frame callback.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame}
+     */
+    requestAnimationFrame(fn: any): number;
+    /**
+     * Request an animation frame, but only one named animation
+     * frame will be queued. Another will never be added until
+     * the previous one finishes.
+     *
+     * @param {string} name
+     *        The name to give this requestAnimationFrame
+     *
+     * @param  {Component~GenericCallback} fn
+     *         A function that will be bound to this component and executed just
+     *         before the browser's next repaint.
+     */
+    requestNamedAnimationFrame(name: string, fn: any): string;
+    /**
+     * Cancels a current named animation frame if it exists.
+     *
+     * @param {string} name
+     *        The name of the requestAnimationFrame to cancel.
+     */
+    cancelNamedAnimationFrame(name: string): void;
+    /**
+     * Cancels a queued callback passed to {@link Component#requestAnimationFrame}
+     * (rAF).
+     *
+     * If you queue an rAF callback via {@link Component#requestAnimationFrame},
+     * use this function instead of `window.cancelAnimationFrame`. If you don't,
+     * your dispose listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} id
+     *        The rAF ID to clear. The return value of {@link Component#requestAnimationFrame}.
+     *
+     * @return {number}
+     *         Returns the rAF ID that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/cancelAnimationFrame}
+     */
+    cancelAnimationFrame(id: number): number;
+    /**
+     * A function to setup `requestAnimationFrame`, `setTimeout`,
+     * and `setInterval`, clearing on dispose.
+     *
+     * > Previously each timer added and removed dispose listeners on it's own.
+     * For better performance it was decided to batch them all, and use `Set`s
+     * to track outstanding timer ids.
+     *
+     * @private
+     */
+    private clearTimersOnDispose_;
+}
+//# sourceMappingURL=component.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/component.d.ts.map b/priv/static/video.js/types/component.d.ts.map
new file mode 100644
index 0000000..571d61d
--- /dev/null
+++ b/priv/static/video.js/types/component.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/js/component.js"],"names":[],"mappings":";AAgBA;;;;;;;GAOG;AACH;IA+sDE;;;;;;;;;;;;;;;;;;OAkBG;IACH,+BATW,MAAM,uBAGN,SAAS,GAGR,SAAS,CAsDpB;IAED;;;;;;;;OAQG;IACH,0BANW,MAAM,GAGL,gBAAgB,CAS3B;IApyDD;;;;;;OAMG;IAEH;;;;;;;;;;;;;;;;;;;OAmBG;IACH,oBAjBY,OAAO,UAAU,EAAE,OAAO;QAMR,QAAQ,GAA3B,KAAQ;QAKU,SAAS,GAA1B,MAAM;0BAyFjB;IA/EG,aAA4B;IAK9B,qBAAwB;IAGxB,sBAA4B;IAG5B,cAAwC;IAMxC,SAAsD;IAUtD,WAAiC;IAI/B,SAAqB;IA2UzB;;;;OAIG;IACH,6BAAyB;IAvTvB,iBAAmB;IACnB,gBAAqB;IACrB,oBAAyB;IAEzB,yBAA+B;IAC/B,0BAAgC;IAChC,kBAAwB;IACxB,0BAA2B;IAC3B,kCAAqC;IAoBvC;;;;;;;;;OASG;IACH,SANW,MAAM,GAAC,MAAM,EAAE,sBAMX;IAEf;;;;;;;;;;OAUG;IACH,UANW,MAAM,GAAC,MAAM,EAAE,uBAMV;IAEhB;;;;;;;;;;OAUG;IACH,UANW,MAAM,GAAC,MAAM,EAAE,sBAMV;IAEhB;;;;;;;;;;;OAWG;IACH,UANW,MAAM,GAAC,MAAM,EAAE,sBAMV;IAEhB;;;;;;;;;;;;;;;;;;OAkBG;IACH,eAPW,MAAM,GAAC,KAAK,MAAO,oBAOP;IAEvB;;;;;;;OAOG;IACH;QAF4B,UAAU,EAA3B,OAAO;aA0DjB;IAED;;;;;OAKG;IACH,cAHY,OAAO,CAKlB;IAED;;;;;OAKG;IACH,UAHa,OAAO,UAAU,EAAE,OAAO,CAKtC;IAED;;;;;;;;;;OAUG;IACH,uBAOC;IAED;;;;;OAKG;IACH,MAHY,OAAO,CAKlB;IAED;;;;;;;;;;;;;;OAcG;IACH,mBAZW,MAAM,uCASL,OAAO,CAKlB;IAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqCG;IACH,iBAXW,MAAM,WAEN,MAAM,EAAE,iBAER,MAAM,GAIL,MAAM,CAiCjB;IASD;;;;;;OAMG;IACH,aAHY,OAAO,CAKlB;IAED;;;;;OAKG;IACH,MAHY,MAAM,CAKjB;IAED;;;;;;OAMG;IACH,QAHY,MAAM,CAKjB;IAED;;;;;OAKG;IACH,kBAEC;IAED;;;;;;;;OAQG;IACH,iBANW,MAAM,GAGL,SAAS,GAAC,SAAS,CAK9B;IAED;;;;;;;;OAQG;IACH,eANW,MAAM,GAGL,SAAS,GAAC,SAAS,CAS9B;IAED;;;;;;;;;;;;;OAaG;IACH,gCAJY,SAAS,GAAC,SAAS,CAmB9B;IAED;;;;;;;;;;;OAWG;IACH,kBATW,MAAM,OAGN,OAAO,GAGN,OAAO,CAwClB;IAHC,oBAAsB;IAKxB;;;;;;;;;;;;;;;;;OAiBG;IACH,gBAfW,MAAM,GAAC,SAAS,yBAOhB,MAAM,GAIL,SAAS,CA+EpB;IAED;;;;;;OAMG;IACH,uBAHW,SAAS,QAqCnB;IAED;;OAEG;IACH,qBA6FC;IAED;;;;;;;OAOG;IACH,iBALY,MAAM,CASjB;IAED;;;;;;;;;;OAUG;IACH,sCAHY,SAAS,CAoBpB;IAXG,iBAAyC;IAa7C;;;;OAIG;IACH,qBAyBC;IAxBC,kBAAoB;IA0BtB;;;;;;;;;;;;;;;;;OAiBG;IACH,YAdW,MAAM,YAGN,OAAO,GAAC,MAAM,GAMb,OAAO,GAAC,IAAI,CAOvB;IAED;;;;;;;;;;;;;;;;;OAiBG;IACH,aAdW,MAAM,YAGN,OAAO,GAAC,MAAM,GAMb,QAAQ,CAOnB;IAED;;;;;;;;;OASG;IACH,uBAPW,MAAM,GAGL,OAAO,CAMlB;IAED;;;;;OAKG;IACH,0BAHc,MAAM,UAKnB;IAED;;;;;OAKG;IACH,gCAHc,MAAM,UAKnB;IAED;;;;;;;;;;OAUG;IACH,2BANY,MAAM,wBAQjB;IAED;;;OAGG;IACH,aAEC;IAED;;;OAGG;IACH,aAEC;IAED;;;;;OAKG;IACH,oBAEC;IAED;;;;;OAKG;IACH,sBAEC;IAED;;;;;;;;;;;;;;OAcG;IACH,wBAZW,MAAM,GAGL,MAAM,GAAC,IAAI,CAWtB;IAED;;;;;;;;;;OAUG;IACH,wBARW,MAAM,SAGN,MAAM,QAOhB;IAED;;;;;;;OAOG;IACH,2BALW,MAAM,QAOhB;IAED;;;;;;;;;;;;OAYG;IACH,YATW,MAAM,GAAC,MAAM,kBAGb,OAAO,GAGN,MAAM,GAAC,SAAS,CAK3B;IAED;;;;;;;;;;;;OAYG;IACH,aATW,MAAM,GAAC,MAAM,kBAGb,OAAO,GAGN,MAAM,GAAC,SAAS,CAK3B;IAED;;;;;;;;OAQG;IACH,kBANY,MAAM,GAAC,MAAM,UAGb,MAAM,GAAC,MAAM,QAOxB;IAED;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACH,yBAZW,MAAM,QAGL,MAAM,GAAC,MAAM,kBAGb,OAAO,GAGP,MAAM,GAAC,SAAS,CAoD3B;IAED;;;;;;;;;;;OAWG;IACH,gCAPW,MAAM,GAGL,MAAM,CA0BjB;IAED;;;;;;;;;;;OAWG;IAEH;;;;;;;;OAQG;IACH,qBAHY,SAAS,CAQpB;IAED;;;;;;;OAOG;IACH,gBAHY,MAAM,CAKjB;IAED;;;;;;;OAOG;IACH,iBAHY,MAAM,CAKjB;IAED;;OAEG;IACH,cAEC;IAED;;OAEG;IACH,aAEC;IAED;;;;;;OAMG;IACH,qBAHW,aAAa,QAavB;IAED;;;;;;;;OAQG;IACH,sBAHW,aAAa,QAKvB;IAED;;;;;;;;;;;;;OAaG;IACH,gCAiFC;IAED;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,4BA8BC;IAED;;;;;OAKG;IAEH;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,6BAXW,MAAM,GAGL,MAAM,CA2BjB;IAED;;;;;;;;;;;;;;OAcG;IACH,wBATW,MAAM,GAIL,MAAM,CAYjB;IAED;;;;;;;;;;;;;;;;;;;OAmBG;IACH,+BAVW,MAAM,GAGL,MAAM,CAiBjB;IAED;;;;;;;;;;;;;;OAcG;IACH,0BATW,MAAM,GAIL,MAAM,CAYjB;IAED;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,gCARY,MAAM,CAyBjB;IAED;;;;;;;;;;;OAWG;IACH,iCAPW,MAAM,mBAyBhB;IAED;;;;;OAKG;IACH,gCAHW,MAAM,QAUhB;IAED;;;;;;;;;;;;;;;OAeG;IACH,yBARW,MAAM,GAGL,MAAM,CAajB;IAED;;;;;;;;;OASG;IACH,8BAqBC;CA0FF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/consts/errors.d.ts b/priv/static/video.js/types/consts/errors.d.ts
new file mode 100644
index 0000000..37783ea
--- /dev/null
+++ b/priv/static/video.js/types/consts/errors.d.ts
@@ -0,0 +1,30 @@
+declare namespace _default {
+    const UnsupportedSidxContainer: string;
+    const DashManifestSidxParsingError: string;
+    const HlsPlaylistRequestError: string;
+    const SegmentUnsupportedMediaFormat: string;
+    const UnsupportedMediaInitialization: string;
+    const SegmentSwitchError: string;
+    const SegmentExceedsSourceBufferQuota: string;
+    const SegmentAppendError: string;
+    const VttLoadError: string;
+    const VttCueParsingError: string;
+    const AdsBeforePrerollError: string;
+    const AdsPrerollError: string;
+    const AdsMidrollError: string;
+    const AdsPostrollError: string;
+    const AdsMacroReplacementFailed: string;
+    const AdsResumeContentFailed: string;
+    const EMEFailedToRequestMediaKeySystemAccess: string;
+    const EMEFailedToCreateMediaKeys: string;
+    const EMEFailedToAttachMediaKeysToVideoElement: string;
+    const EMEFailedToCreateMediaKeySession: string;
+    const EMEFailedToSetServerCertificate: string;
+    const EMEFailedToGenerateLicenseRequest: string;
+    const EMEFailedToUpdateSessionWithReceivedLicenseKeys: string;
+    const EMEFailedToCloseSession: string;
+    const EMEFailedToRemoveKeysFromSession: string;
+    const EMEFailedToLoadSessionBySessionId: string;
+}
+export default _default;
+//# sourceMappingURL=errors.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/consts/errors.d.ts.map b/priv/static/video.js/types/consts/errors.d.ts.map
new file mode 100644
index 0000000..4436506
--- /dev/null
+++ b/priv/static/video.js/types/consts/errors.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../../src/js/consts/errors.js"],"names":[],"mappings":""}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/audio-track-controls/audio-track-button.d.ts b/priv/static/video.js/types/control-bar/audio-track-controls/audio-track-button.d.ts
new file mode 100644
index 0000000..2c362e7
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/audio-track-controls/audio-track-button.d.ts
@@ -0,0 +1,28 @@
+export default AudioTrackButton;
+/**
+ * The base class for buttons that toggle specific {@link AudioTrack} types.
+ *
+ * @extends TrackButton
+ */
+declare class AudioTrackButton extends TrackButton {
+    /**
+     * Create a menu item for each audio track
+     *
+     * @param {AudioTrackMenuItem[]} [items=[]]
+     *        An array of existing menu items to use.
+     *
+     * @return {AudioTrackMenuItem[]}
+     *         An array of menu items
+     */
+    createItems(items?: AudioTrackMenuItem[]): AudioTrackMenuItem[];
+    /**
+     * The text that should display over the `AudioTrackButton`s controls. Added for localization.
+     *
+     * @type {string}
+     * @protected
+     */
+    protected controlText_: string;
+}
+import TrackButton from "../track-button.js";
+import AudioTrackMenuItem from "./audio-track-menu-item.js";
+//# sourceMappingURL=audio-track-button.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/audio-track-controls/audio-track-button.d.ts.map b/priv/static/video.js/types/control-bar/audio-track-controls/audio-track-button.d.ts.map
new file mode 100644
index 0000000..06cedf9
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/audio-track-controls/audio-track-button.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"audio-track-button.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/audio-track-controls/audio-track-button.js"],"names":[],"mappings":";AAOA;;;;GAIG;AACH;IAiCE;;;;;;;;OAQG;IACH,oBANW,kBAAkB,EAAE,GAGnB,kBAAkB,EAAE,CAsB/B;IAGH;;;;;OAKG;IACH,wBAHU,MAAM,CAGuB;CARtC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/audio-track-controls/audio-track-menu-item.d.ts b/priv/static/video.js/types/control-bar/audio-track-controls/audio-track-menu-item.d.ts
new file mode 100644
index 0000000..ba08274
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/audio-track-controls/audio-track-menu-item.d.ts
@@ -0,0 +1,33 @@
+export default AudioTrackMenuItem;
+/**
+ * An {@link AudioTrack} {@link MenuItem}
+ *
+ * @extends MenuItem
+ */
+declare class AudioTrackMenuItem extends MenuItem {
+    track: any;
+    createEl(type: any, props: any, attrs: any): Element;
+    /**
+     * This gets called when an `AudioTrackMenuItem is "clicked". See {@link ClickableComponent}
+     * for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event?: Event): void;
+    /**
+     * Handle any {@link AudioTrack} change.
+     *
+     * @param {Event} [event]
+     *        The {@link AudioTrackList#change} event that caused this to run.
+     *
+     * @listens AudioTrackList#change
+     */
+    handleTracksChange(event?: Event): void;
+}
+import MenuItem from "../../menu/menu-item.js";
+//# sourceMappingURL=audio-track-menu-item.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/audio-track-controls/audio-track-menu-item.d.ts.map b/priv/static/video.js/types/control-bar/audio-track-controls/audio-track-menu-item.d.ts.map
new file mode 100644
index 0000000..f1526cc
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/audio-track-controls/audio-track-menu-item.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"audio-track-menu-item.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/audio-track-controls/audio-track-menu-item.js"],"names":[],"mappings":";AAOA;;;;GAIG;AACH;IAqBI,WAAkB;IAcpB,qDAiBC;IAED;;;;;;;;;;OAUG;IACH,oBAPW,KAAK,QA6Bf;IAED;;;;;;;OAOG;IACH,2BALW,KAAK,QAOf;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/control-bar.d.ts b/priv/static/video.js/types/control-bar/control-bar.d.ts
new file mode 100644
index 0000000..8d5f7a1
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/control-bar.d.ts
@@ -0,0 +1,17 @@
+export default ControlBar;
+/**
+ * Container of main controls.
+ *
+ * @extends Component
+ */
+declare class ControlBar extends Component {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+}
+import Component from "../component.js";
+//# sourceMappingURL=control-bar.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/control-bar.d.ts.map b/priv/static/video.js/types/control-bar/control-bar.d.ts.map
new file mode 100644
index 0000000..c72c327
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/control-bar.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"control-bar.d.ts","sourceRoot":"","sources":["../../../src/js/control-bar/control-bar.js"],"names":[],"mappings":";AA4BA;;;;GAIG;AACH;IAEE;;;;;OAKG;IACH,YAHY,OAAO,CAQlB;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/fullscreen-toggle.d.ts b/priv/static/video.js/types/control-bar/fullscreen-toggle.d.ts
new file mode 100644
index 0000000..063fe21
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/fullscreen-toggle.d.ts
@@ -0,0 +1,42 @@
+export default FullscreenToggle;
+/**
+ * Toggle fullscreen video
+ *
+ * @extends Button
+ */
+declare class FullscreenToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: any, options?: any);
+    /**
+     * Handles fullscreenchange on the player and change control text accordingly.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#fullscreenchange} event that caused this function to be
+     *        called.
+     *
+     * @listens Player#fullscreenchange
+     */
+    handleFullscreenChange(event?: Event): void;
+    /**
+     * This gets called when an `FullscreenToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event?: Event): void;
+}
+import Button from "../button.js";
+//# sourceMappingURL=fullscreen-toggle.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/fullscreen-toggle.d.ts.map b/priv/static/video.js/types/control-bar/fullscreen-toggle.d.ts.map
new file mode 100644
index 0000000..7210bf2
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/fullscreen-toggle.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-toggle.d.ts","sourceRoot":"","sources":["../../../src/js/control-bar/fullscreen-toggle.js"],"names":[],"mappings":";AAOA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,wCAQC;IAYD;;;;;;;;OAQG;IACH,+BANW,KAAK,QAcf;IAED;;;;;;;;;;OAUG;IACH,oBAPW,KAAK,QAaf;CAEF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/live-display.d.ts b/priv/static/video.js/types/control-bar/live-display.d.ts
new file mode 100644
index 0000000..b001278
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/live-display.d.ts
@@ -0,0 +1,39 @@
+export default LiveDisplay;
+/**
+ * Displays the live indicator when duration is Infinity.
+ *
+ * @extends Component
+ */
+declare class LiveDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: any, options?: any);
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+    contentEl_: Element;
+    dispose(): void;
+    /**
+     * Check the duration to see if the LiveDisplay should be showing or not. Then show/hide
+     * it accordingly
+     *
+     * @param {Event} [event]
+     *        The {@link Player#durationchange} event that caused this function to run.
+     *
+     * @listens Player#durationchange
+     */
+    updateShowing(event?: Event): void;
+}
+import Component from "../component";
+//# sourceMappingURL=live-display.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/live-display.d.ts.map b/priv/static/video.js/types/control-bar/live-display.d.ts.map
new file mode 100644
index 0000000..685e741
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/live-display.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"live-display.d.ts","sourceRoot":"","sources":["../../../src/js/control-bar/live-display.js"],"names":[],"mappings":";AASA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,wCAKC;IAED;;;;;OAKG;IACH,YAHY,OAAO,CAsBlB;IAdC,oBAIE;IAYJ,gBAIC;IAED;;;;;;;;OAQG;IACH,sBALW,KAAK,QAWf;CAEF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/mute-toggle.d.ts b/priv/static/video.js/types/control-bar/mute-toggle.d.ts
new file mode 100644
index 0000000..f07b5e7
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/mute-toggle.d.ts
@@ -0,0 +1,64 @@
+export default MuteToggle;
+/**
+ * A button component for muting the audio.
+ *
+ * @extends Button
+ */
+declare class MuteToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: any, options?: any);
+    /**
+     * This gets called when an `MuteToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event?: Event): void;
+    /**
+     * Update the `MuteToggle` button based on the state of `volume` and `muted`
+     * on the player.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#loadstart} event if this function was called
+     *        through an event.
+     *
+     * @listens Player#loadstart
+     * @listens Player#volumechange
+     */
+    update(event?: Event): void;
+    /**
+     * Update the appearance of the `MuteToggle` icon.
+     *
+     * Possible states (given `level` variable below):
+     * - 0: crossed out
+     * - 1: zero bars of volume
+     * - 2: one bar of volume
+     * - 3: two bars of volume
+     *
+     * @private
+     */
+    private updateIcon_;
+    /**
+     * If `muted` has changed on the player, update the control text
+     * (`title` attribute on `vjs-mute-control` element and content of
+     * `vjs-control-text` element).
+     *
+     * @private
+     */
+    private updateControlText_;
+}
+import Button from "../button";
+//# sourceMappingURL=mute-toggle.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/mute-toggle.d.ts.map b/priv/static/video.js/types/control-bar/mute-toggle.d.ts.map
new file mode 100644
index 0000000..f224add
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/mute-toggle.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"mute-toggle.d.ts","sourceRoot":"","sources":["../../../src/js/control-bar/mute-toggle.js"],"names":[],"mappings":";AASA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,wCAOC;IAYD;;;;;;;;;;OAUG;IACH,oBAPW,KAAK,QAmBf;IAED;;;;;;;;;;OAUG;IACH,eAPW,KAAK,QAUf;IAED;;;;;;;;;;OAUG;IACH,oBA0BC;IAED;;;;;;OAMG;IACH,2BAOC;CAEF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/picture-in-picture-toggle.d.ts b/priv/static/video.js/types/control-bar/picture-in-picture-toggle.d.ts
new file mode 100644
index 0000000..28c7c12
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/picture-in-picture-toggle.d.ts
@@ -0,0 +1,61 @@
+export default PictureInPictureToggle;
+/**
+ * Toggle Picture-in-Picture mode
+ *
+ * @extends Button
+ */
+declare class PictureInPictureToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @listens Player#enterpictureinpicture
+     * @listens Player#leavepictureinpicture
+     */
+    constructor(player: any, options?: any);
+    /**
+     * Displays or hides the button depending on the audio mode detection.
+     * Exits picture-in-picture if it is enabled when switching to audio mode.
+     */
+    handlePictureInPictureAudioModeChange(): void;
+    /**
+     * Enables or disables button based on availability of a Picture-In-Picture mode.
+     *
+     * Enabled if
+     * - `player.options().enableDocumentPictureInPicture` is true and
+     *   window.documentPictureInPicture is available; or
+     * - `player.disablePictureInPicture()` is false and
+     *   element.requestPictureInPicture is available
+     */
+    handlePictureInPictureEnabledChange(): void;
+    /**
+     * Handles enterpictureinpicture and leavepictureinpicture on the player and change control text accordingly.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#enterpictureinpicture} or {@link Player#leavepictureinpicture} event that caused this function to be
+     *        called.
+     *
+     * @listens Player#enterpictureinpicture
+     * @listens Player#leavepictureinpicture
+     */
+    handlePictureInPictureChange(event?: Event): void;
+    /**
+     * This gets called when an `PictureInPictureToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event?: Event): void;
+}
+import Button from "../button.js";
+//# sourceMappingURL=picture-in-picture-toggle.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/picture-in-picture-toggle.d.ts.map b/priv/static/video.js/types/control-bar/picture-in-picture-toggle.d.ts.map
new file mode 100644
index 0000000..885bb8a
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/picture-in-picture-toggle.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"picture-in-picture-toggle.d.ts","sourceRoot":"","sources":["../../../src/js/control-bar/picture-in-picture-toggle.js"],"names":[],"mappings":";AAQA;;;;GAIG;AACH;IAEE;;;;;;;;;;;OAWG;IACH,wCAWC;IAYD;;;OAGG;IACH,8CAiBC;IAED;;;;;;;;OAQG;IACH,4CASC;IAED;;;;;;;;;OASG;IACH,qCAPW,KAAK,QAgBf;IAED;;;;;;;;;;OAUG;IACH,oBAPW,KAAK,QAaf;CAcF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/play-toggle.d.ts b/priv/static/video.js/types/control-bar/play-toggle.d.ts
new file mode 100644
index 0000000..0262f10
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/play-toggle.d.ts
@@ -0,0 +1,69 @@
+export default PlayToggle;
+/**
+ * Button to toggle between play and pause.
+ *
+ * @extends Button
+ */
+declare class PlayToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player: any, options?: any);
+    /**
+     * This gets called when an `PlayToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event?: Event): void;
+    /**
+     * This gets called once after the video has ended and the user seeks so that
+     * we can change the replay button back to a play button.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#seeked
+     */
+    handleSeeked(event?: Event): void;
+    /**
+     * Add the vjs-playing class to the element so it can change appearance.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#play
+     */
+    handlePlay(event?: Event): void;
+    /**
+     * Add the vjs-paused class to the element so it can change appearance.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#pause
+     */
+    handlePause(event?: Event): void;
+    /**
+     * Add the vjs-ended class to the element so it can change appearance
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#ended
+     */
+    handleEnded(event?: Event): void;
+}
+import Button from "../button.js";
+//# sourceMappingURL=play-toggle.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/play-toggle.d.ts.map b/priv/static/video.js/types/control-bar/play-toggle.d.ts.map
new file mode 100644
index 0000000..36dd7f2
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/play-toggle.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"play-toggle.d.ts","sourceRoot":"","sources":["../../../src/js/control-bar/play-toggle.js"],"names":[],"mappings":";AAOA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,wCAcC;IAYD;;;;;;;;;;OAUG;IACH,oBAPW,KAAK,QAaf;IAED;;;;;;;;OAQG;IACH,qBALW,KAAK,QAaf;IAED;;;;;;;OAOG;IACH,mBALW,KAAK,QAWf;IAED;;;;;;;OAOG;IACH,oBALW,KAAK,QAWf;IAED;;;;;;;OAOG;IACH,oBALW,KAAK,QAcf;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/playback-rate-menu/playback-rate-menu-button.d.ts b/priv/static/video.js/types/control-bar/playback-rate-menu/playback-rate-menu-button.d.ts
new file mode 100644
index 0000000..f14e778
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/playback-rate-menu/playback-rate-menu-button.d.ts
@@ -0,0 +1,66 @@
+export default PlaybackRateMenuButton;
+/**
+ * The component for controlling the playback rate.
+ *
+ * @extends MenuButton
+ */
+declare class PlaybackRateMenuButton extends MenuButton {
+    labelElId_: string;
+    labelEl_: Element;
+    /**
+     * Create the list of menu items. Specific to each subclass.
+     *
+     */
+    createItems(): PlaybackRateMenuItem[];
+    /**
+     * On playbackrateschange, update the menu to account for the new items.
+     *
+     * @listens Player#playbackrateschange
+     */
+    handlePlaybackRateschange(event: any): void;
+    /**
+     * Get possible playback rates
+     *
+     * @return {Array}
+     *         All possible playback rates
+     */
+    playbackRates(): any[];
+    /**
+     * Get whether playback rates is supported by the tech
+     * and an array of playback rates exists
+     *
+     * @return {boolean}
+     *         Whether changing playback rate is supported
+     */
+    playbackRateSupported(): boolean;
+    /**
+     * Hide playback rate controls when they're no playback rate options to select
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#loadstart
+     */
+    updateVisibility(event?: Event): void;
+    /**
+     * Update button label when rate changed
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#ratechange
+     */
+    updateLabel(event?: Event): void;
+    /**
+     * The text that should display over the `PlaybackRateMenuButton`s controls.
+     *
+     * Added for localization.
+     *
+     * @type {string}
+     * @protected
+     */
+    protected controlText_: string;
+}
+import MenuButton from "../../menu/menu-button.js";
+import PlaybackRateMenuItem from "./playback-rate-menu-item.js";
+//# sourceMappingURL=playback-rate-menu-button.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/playback-rate-menu/playback-rate-menu-button.d.ts.map b/priv/static/video.js/types/control-bar/playback-rate-menu/playback-rate-menu-button.d.ts.map
new file mode 100644
index 0000000..15030a1
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/playback-rate-menu/playback-rate-menu-button.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-menu-button.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js"],"names":[],"mappings":";AAQA;;;;GAIG;AACH;IAiCI,mBAA6D;IAE7D,kBAIE;IA2BJ;;;OAGG;IACH,sCASC;IAED;;;;OAIG;IACH,4CAEC;IAED;;;;;OAKG;IACH,uBAIC;IAED;;;;;;OAMG;IACH,yBAHY,OAAO,CASlB;IAED;;;;;;;OAOG;IACH,yBALW,KAAK,QAWf;IAED;;;;;;;OAOG;IACH,oBALW,KAAK,QASf;IAIH;;;;;;;OAOG;IACH,wBAHU,MAAM,CAG6B;CAV5C"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/playback-rate-menu/playback-rate-menu-item.d.ts b/priv/static/video.js/types/control-bar/playback-rate-menu/playback-rate-menu-item.d.ts
new file mode 100644
index 0000000..144c506
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/playback-rate-menu/playback-rate-menu-item.d.ts
@@ -0,0 +1,40 @@
+export default PlaybackRateMenuItem;
+/**
+ * The specific menu item type for selecting a playback rate.
+ *
+ * @extends MenuItem
+ */
+declare class PlaybackRateMenuItem extends MenuItem {
+    label: any;
+    rate: number;
+    /**
+     * This gets called when an `PlaybackRateMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event?: Event): void;
+    /**
+     * Update the PlaybackRateMenuItem when the playbackrate changes.
+     *
+     * @param {Event} [event]
+     *        The `ratechange` event that caused this function to run.
+     *
+     * @listens Player#ratechange
+     */
+    update(event?: Event): void;
+    /**
+     * The text that should display over the `PlaybackRateMenuItem`s controls. Added for localization.
+     *
+     * @type {string}
+     * @private
+     */
+    private contentElType;
+}
+import MenuItem from "../../menu/menu-item.js";
+//# sourceMappingURL=playback-rate-menu-item.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/playback-rate-menu/playback-rate-menu-item.d.ts.map b/priv/static/video.js/types/control-bar/playback-rate-menu/playback-rate-menu-item.d.ts.map
new file mode 100644
index 0000000..c21b0ff
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/playback-rate-menu/playback-rate-menu-item.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-menu-item.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/playback-rate-menu/playback-rate-menu-item.js"],"names":[],"mappings":";AAMA;;;;GAIG;AACH;IAuBI,WAAkB;IAClB,aAAgB;IAKlB;;;;;;;;;;OAUG;IACH,oBAPW,KAAK,QAUf;IAED;;;;;;;OAOG;IACH,eALW,KAAK,QAOf;IAIH;;;;;OAKG;IACH,sBAA4C;CAR3C"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/progress-control/load-progress-bar.d.ts b/priv/static/video.js/types/control-bar/progress-control/load-progress-bar.d.ts
new file mode 100644
index 0000000..ede43bd
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/progress-control/load-progress-bar.d.ts
@@ -0,0 +1,40 @@
+export default LoadProgressBar;
+/**
+ * Shows loading progress
+ *
+ * @extends Component
+ */
+declare class LoadProgressBar extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: import('../../player').default, options?: any);
+    partEls_: any[];
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+    percentageEl_: Element;
+    dispose(): void;
+    /**
+     * Update progress bar
+     *
+     * @param {Event} [event]
+     *        The `progress` event that caused this function to run.
+     *
+     * @listens Player#progress
+     */
+    update(event?: Event): void;
+    percent_: any;
+}
+import Component from "../../component.js";
+//# sourceMappingURL=load-progress-bar.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/progress-control/load-progress-bar.d.ts.map b/priv/static/video.js/types/control-bar/progress-control/load-progress-bar.d.ts.map
new file mode 100644
index 0000000..e789b31
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/progress-control/load-progress-bar.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"load-progress-bar.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/progress-control/load-progress-bar.js"],"names":[],"mappings":";AAWA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,cAAc,EAAE,OAAO,iBAUzC;IAFC,gBAAkB;IAIpB;;;;;OAKG;IACH,YAHY,OAAO,CAoBlB;IAXC,uBAGE;IAUJ,gBAKC;IAED;;;;;;;OAOG;IACH,eALW,KAAK,QAoDf;IAjCK,cAAuB;CAkC9B"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/progress-control/mouse-time-display.d.ts b/priv/static/video.js/types/control-bar/progress-control/mouse-time-display.d.ts
new file mode 100644
index 0000000..0da4559
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/progress-control/mouse-time-display.d.ts
@@ -0,0 +1,42 @@
+export default MouseTimeDisplay;
+/**
+ * The {@link MouseTimeDisplay} component tracks mouse movement over the
+ * {@link ProgressControl}. It displays an indicator and a {@link TimeTooltip}
+ * indicating the time which is represented by a given point in the
+ * {@link ProgressControl}.
+ *
+ * @extends Component
+ */
+declare class MouseTimeDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: import('../../player').default, options?: any);
+    /**
+     * Enqueues updates to its own DOM as well as the DOM of its
+     * {@link TimeTooltip} child.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect: any, seekBarPoint: number): void;
+    /**
+     * Create the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+}
+import Component from "../../component.js";
+//# sourceMappingURL=mouse-time-display.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/progress-control/mouse-time-display.d.ts.map b/priv/static/video.js/types/control-bar/progress-control/mouse-time-display.d.ts.map
new file mode 100644
index 0000000..7269a2d
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/progress-control/mouse-time-display.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"mouse-time-display.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/progress-control/mouse-time-display.js"],"names":[],"mappings":";AAQA;;;;;;;GAOG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,cAAc,EAAE,OAAO,iBASzC;IAcD;;;;;;;;;;OAUG;IACH,uCAJW,MAAM,QAUhB;IA7BD;;;;;OAKG;IACH,YAHY,OAAO,CAOlB;CAoBF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/progress-control/play-progress-bar.d.ts b/priv/static/video.js/types/control-bar/progress-control/play-progress-bar.d.ts
new file mode 100644
index 0000000..2ee48e3
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/progress-control/play-progress-bar.d.ts
@@ -0,0 +1,40 @@
+export default PlayProgressBar;
+/**
+ * Used by {@link SeekBar} to display media playback progress as part of the
+ * {@link ProgressControl}.
+ *
+ * @extends Component
+ */
+declare class PlayProgressBar extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: import('../../player').default, options?: any);
+    /**
+     * Enqueues updates to its own DOM as well as the DOM of its
+     * {@link TimeTooltip} child.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect: any, seekBarPoint: number): void;
+    /**
+     * Create the the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+}
+import Component from "../../component.js";
+//# sourceMappingURL=play-progress-bar.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/progress-control/play-progress-bar.d.ts.map b/priv/static/video.js/types/control-bar/progress-control/play-progress-bar.d.ts.map
new file mode 100644
index 0000000..f054d6d
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/progress-control/play-progress-bar.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"play-progress-bar.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/progress-control/play-progress-bar.js"],"names":[],"mappings":";AASA;;;;;GAKG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,cAAc,EAAE,OAAO,iBAUzC;IAgBD;;;;;;;;;;OAUG;IACH,uCAJW,MAAM,QAgBhB;IArCD;;;;;OAKG;IACH,YAHY,OAAO,CASlB;CA0BF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/progress-control/progress-control.d.ts b/priv/static/video.js/types/control-bar/progress-control/progress-control.d.ts
new file mode 100644
index 0000000..d4a4dae
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/progress-control/progress-control.d.ts
@@ -0,0 +1,101 @@
+export default ProgressControl;
+/**
+ * The Progress Control component contains the seek bar, load progress,
+ * and play progress.
+ *
+ * @extends Component
+ */
+declare class ProgressControl extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: import('../../player').default, options?: any);
+    /**
+     * When the mouse moves over the `ProgressControl`, the pointer position
+     * gets passed down to the `MouseTimeDisplay` component.
+     *
+     * @param {Event} event
+     *        The `mousemove` event that caused this function to run.
+     *
+     * @listen mousemove
+     */
+    handleMouseMove(event: Event): void;
+    throttledHandleMouseSeek: Function;
+    handleMouseUpHandler_: (e: any) => void;
+    handleMouseDownHandler_: (e: any) => void;
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+    /**
+     * A throttled version of the {@link ProgressControl#handleMouseSeek} listener.
+     *
+     * @method ProgressControl#throttledHandleMouseSeek
+     * @param {Event} event
+     *        The `mousemove` event that caused this function to run.
+     *
+     * @listen mousemove
+     * @listen touchmove
+     */
+    /**
+     * Handle `mousemove` or `touchmove` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousemove
+     * @listens touchmove
+     */
+    handleMouseSeek(event: Event): void;
+    /**
+     * Are controls are currently enabled for this progress control.
+     *
+     * @return {boolean}
+     *         true if controls are enabled, false otherwise
+     */
+    enabled(): boolean;
+    /**
+     * Disable all controls on the progress control and its children
+     */
+    disable(): void;
+    enabled_: boolean;
+    /**
+     * Enable all controls on the progress control and its children
+     */
+    enable(): void;
+    /**
+     * Cleanup listeners after the user finishes interacting with the progress controls
+     */
+    removeListenersAddedOnMousedownAndTouchstart(): void;
+    /**
+     * Handle `mousedown` or `touchstart` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseDown(event: Event): void;
+    /**
+     * Handle `mouseup` or `touchend` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     */
+    handleMouseUp(event: Event): void;
+}
+import Component from "../../component.js";
+//# sourceMappingURL=progress-control.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/progress-control/progress-control.d.ts.map b/priv/static/video.js/types/control-bar/progress-control/progress-control.d.ts.map
new file mode 100644
index 0000000..91402bb
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/progress-control/progress-control.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"progress-control.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/progress-control/progress-control.js"],"names":[],"mappings":";AAWA;;;;;GAKG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,cAAc,EAAE,OAAO,iBAczC;IAcD;;;;;;;;OAQG;IACH,uBALW,KAAK,QAoCf;IA3DC,mCAAoG;IACpG,wCAAyD;IACzD,0CAA6D;IAK/D;;;;;OAKG;IACH,YAHY,OAAO,CAOlB;IA4CD;;;;;;;;;OASG;IAEH;;;;;;;;OAQG;IACH,uBANW,KAAK,QAYf;IAED;;;;;OAKG;IACH,WAHY,OAAO,CAKlB;IAED;;OAEG;IACH,gBA0BC;IAZC,kBAAqB;IAcvB;;OAEG;IACH,eAYC;IAED;;OAEG;IACH,qDAOC;IAED;;;;;;;;OAQG;IACH,uBANW,KAAK,QAkBf;IAED;;;;;;;;OAQG;IACH,qBANW,KAAK,QAcf;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/progress-control/seek-bar.d.ts b/priv/static/video.js/types/control-bar/progress-control/seek-bar.d.ts
new file mode 100644
index 0000000..e1f9ec8
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/progress-control/seek-bar.d.ts
@@ -0,0 +1,100 @@
+export default SeekBar;
+/**
+ * Seek bar and container for the progress bars. Uses {@link PlayProgressBar}
+ * as its `bar`.
+ *
+ * @extends Slider
+ */
+declare class SeekBar extends Slider {
+    /**
+     * Sets the event handlers
+     *
+     * @private
+     */
+    private setEventHandlers_;
+    /**
+     * This function updates the play progress bar and accessibility
+     * attributes to whatever is passed in.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` or `ended` event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     *
+     * @return {number}
+     *          The current percent at a number from 0-1
+     */
+    update(event?: Event): number;
+    updateInterval: number;
+    enableIntervalHandler_: (e: any) => void;
+    disableIntervalHandler_: (e: any) => void;
+    toggleVisibility_(e: any): void;
+    enableInterval_(): void;
+    disableInterval_(e: any): void;
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+    percent_: any;
+    currentTime_: any;
+    duration_: any;
+    /**
+     * Prevent liveThreshold from causing seeks to seem like they
+     * are not happening from a user perspective.
+     *
+     * @param {number} ct
+     *        current time to seek to
+     */
+    userSeek_(ct: number): void;
+    /**
+     * Get the value of current time but allows for smooth scrubbing,
+     * when player can't keep up.
+     *
+     * @return {number}
+     *         The current time value to display
+     *
+     * @private
+     */
+    private getCurrentTime_;
+    /**
+     * Get the percentage of media played so far.
+     *
+     * @return {number}
+     *         The percentage of media played so far (0 to 1).
+     */
+    getPercent(): number;
+    videoWasPlaying: boolean;
+    /**
+     * Handle mouse move on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mousemove` event that caused this to run.
+     * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false
+     *
+     * @listens mousemove
+     */
+    handleMouseMove(event: MouseEvent, mouseDown?: boolean): void;
+    /**
+     * Move more quickly fast forward for keyboard-only users
+     */
+    stepForward(): void;
+    /**
+     * Move more quickly rewind for keyboard-only users
+     */
+    stepBack(): void;
+    /**
+     * Toggles the playback state of the player
+     * This gets called when enter or space is used on the seekbar
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called
+     *
+     */
+    handleAction(event: KeyboardEvent): void;
+    dispose(): void;
+}
+import Slider from "../../slider/slider.js";
+//# sourceMappingURL=seek-bar.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/progress-control/seek-bar.d.ts.map b/priv/static/video.js/types/control-bar/progress-control/seek-bar.d.ts.map
new file mode 100644
index 0000000..5472e5a
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/progress-control/seek-bar.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"seek-bar.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/progress-control/seek-bar.js"],"names":[],"mappings":";AAuBA;;;;;GAKG;AACH;IAgBE;;;;OAIG;IACH,0BAyBC;IAoDD;;;;;;;;;;;OAWG;IACH,eARW,KAAK,GAKJ,MAAM,CAkDjB;IA7HC,uBAA0B;IAE1B,yCAA4D;IAC5D,0CAA8D;IAahE,gCAaC;IAED,wBAMC;IAED,+BAWC;IAED;;;;;OAKG;IACH,YAHY,OAAO,CASlB;IAmCK,cAAuB;IAevB,kBAA+B;IAC/B,eAAyB;IAY/B;;;;;;OAMG;IACH,cAHW,MAAM,QAShB;IAED;;;;;;;;OAQG;IACH,wBAIC;IAED;;;;;OAKG;IACH,cAHY,MAAM,CAoBjB;IAkBC,yBAA6C;IAM/C;;;;;;;;OAQG;IACH,uBANW,UAAU,cAEV,OAAO,QA4DjB;IA0DD;;OAEG;IACH,oBAEC;IAED;;OAEG;IACH,iBAEC;IAED;;;;;;;OAOG;IACH,oBAJW,aAAa,QAUvB;IA6DD,gBAkBC;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/progress-control/time-tooltip.d.ts b/priv/static/video.js/types/control-bar/progress-control/time-tooltip.d.ts
new file mode 100644
index 0000000..a51deab
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/progress-control/time-tooltip.d.ts
@@ -0,0 +1,63 @@
+export default TimeTooltip;
+/**
+ * Time tooltips display a time above the progress bar.
+ *
+ * @extends Component
+ */
+declare class TimeTooltip extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: import('../../player').default, options?: any);
+    /**
+     * Updates the position of the time tooltip relative to the `SeekBar`.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect: any, seekBarPoint: number, content: any): void;
+    /**
+     * Create the time tooltip DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+    /**
+     * Write the time to the tooltip DOM element.
+     *
+     * @param {string} content
+     *        The formatted time for the tooltip.
+     */
+    write(content: string): void;
+    /**
+     * Updates the position of the time tooltip relative to the `SeekBar`.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     *
+     * @param {number} time
+     *        The time to update the tooltip to, not used during live playback
+     *
+     * @param {Function} cb
+     *        A function that will be called during the request animation frame
+     *        for tooltips that need to do additional animations from the default
+     */
+    updateTime(seekBarRect: any, seekBarPoint: number, time: number, cb: Function): void;
+}
+import Component from "../../component";
+//# sourceMappingURL=time-tooltip.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/progress-control/time-tooltip.d.ts.map b/priv/static/video.js/types/control-bar/progress-control/time-tooltip.d.ts.map
new file mode 100644
index 0000000..a3b13da
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/progress-control/time-tooltip.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"time-tooltip.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/progress-control/time-tooltip.js"],"names":[],"mappings":";AAQA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,cAAc,EAAE,OAAO,iBASzC;IAgBD;;;;;;;;;OASG;IACH,uCAJW,MAAM,sBAkEhB;IAtFD;;;;;OAKG;IACH,YAHY,OAAO,CASlB;IA4ED;;;;;OAKG;IACH,eAHW,MAAM,QAKhB;IAED;;;;;;;;;;;;;;;;OAgBG;IACH,2CAXW,MAAM,QAIN,MAAM,sBA0BhB;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/seek-to-live.d.ts b/priv/static/video.js/types/control-bar/seek-to-live.d.ts
new file mode 100644
index 0000000..b816cc8
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/seek-to-live.d.ts
@@ -0,0 +1,51 @@
+export default SeekToLive;
+/**
+ * Displays the live indicator when duration is Infinity.
+ *
+ * @extends Component
+ */
+declare class SeekToLive extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: any, options?: any);
+    updateLiveEdgeStatusHandler_: (e: any) => void;
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+    textEl_: Element;
+    /**
+     * Update the state of this button if we are at the live edge
+     * or not
+     */
+    updateLiveEdgeStatus(): void;
+    /**
+     * On click bring us as near to the live point as possible.
+     * This requires that we wait for the next `live-seekable-change`
+     * event which will happen every segment length seconds.
+     */
+    handleClick(): void;
+    /**
+     * Dispose of the element and stop tracking
+     */
+    dispose(): void;
+    /**
+     * The text that should display over the `SeekToLive`s control. Added for localization.
+     *
+     * @type {string}
+     * @protected
+     */
+    protected controlText_: string;
+}
+import Component from "../component";
+//# sourceMappingURL=seek-to-live.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/seek-to-live.d.ts.map b/priv/static/video.js/types/control-bar/seek-to-live.d.ts.map
new file mode 100644
index 0000000..f6c1056
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/seek-to-live.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"seek-to-live.d.ts","sourceRoot":"","sources":["../../../src/js/control-bar/seek-to-live.js"],"names":[],"mappings":";AAOA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,wCASC;IAHG,+CAAuE;IAK3E;;;;;OAKG;IACH,YAHY,OAAO,CAmBlB;IATC,iBAKE;IAMJ;;;OAGG;IACH,6BAWC;IAED;;;;OAIG;IACH,oBAEC;IAED;;OAEG;IACH,gBAOC;IAEH;;;;;OAKG;IACH,wBAHU,MAAM,CAGiB;CAPhC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/skip-buttons/skip-backward.d.ts b/priv/static/video.js/types/control-bar/skip-buttons/skip-backward.d.ts
new file mode 100644
index 0000000..2bad1c0
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/skip-buttons/skip-backward.d.ts
@@ -0,0 +1,29 @@
+export default SkipBackward;
+/**
+ * Button to skip backward a configurable amount of time
+ * through a video. Renders in the control bar.
+ *
+ *  * e.g. options: {controlBar: {skipButtons: backward: 5}}
+ *
+ * @extends Button
+ */
+declare class SkipBackward extends Button {
+    constructor(player: any, options: any);
+    validOptions: number[];
+    skipTime: any;
+    getSkipBackwardTime(): any;
+    /**
+     * On click, skips backward in the video by a configurable amount of seconds.
+     * If the current time in the video is less than the configured 'skip backward' time,
+     * skips to beginning of video or seekable range.
+     *
+     * Handle a click on a `SkipBackward` button
+     *
+     * @param {EventTarget~Event} event
+     *        The `click` event that caused this function
+     *        to be called
+     */
+    handleClick(event: any): void;
+}
+import Button from "../../button";
+//# sourceMappingURL=skip-backward.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/skip-buttons/skip-backward.d.ts.map b/priv/static/video.js/types/control-bar/skip-buttons/skip-backward.d.ts.map
new file mode 100644
index 0000000..d353961
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/skip-buttons/skip-backward.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"skip-backward.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/skip-buttons/skip-backward.js"],"names":[],"mappings":";AAGA;;;;;;;GAOG;AACH;IACE,uCAaC;IAVC,uBAA+B;IAC/B,cAA0C;IAW5C,2BAIC;IAMD;;;;;;;;;;OAUG;IACH,8BAcC;CAQF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/skip-buttons/skip-forward.d.ts b/priv/static/video.js/types/control-bar/skip-buttons/skip-forward.d.ts
new file mode 100644
index 0000000..4603784
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/skip-buttons/skip-forward.d.ts
@@ -0,0 +1,29 @@
+export default SkipForward;
+/**
+ * Button to skip forward a configurable amount of time
+ * through a video. Renders in the control bar.
+ *
+ * e.g. options: {controlBar: {skipButtons: forward: 5}}
+ *
+ * @extends Button
+ */
+declare class SkipForward extends Button {
+    constructor(player: any, options: any);
+    validOptions: number[];
+    skipTime: any;
+    getSkipForwardTime(): any;
+    /**
+     * On click, skips forward in the duration/seekable range by a configurable amount of seconds.
+     * If the time left in the duration/seekable range is less than the configured 'skip forward' time,
+     * skips to end of duration/seekable range.
+     *
+     * Handle a click on a `SkipForward` button
+     *
+     * @param {EventTarget~Event} event
+     *        The `click` event that caused this function
+     *        to be called
+     */
+    handleClick(event: any): void;
+}
+import Button from "../../button";
+//# sourceMappingURL=skip-forward.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/skip-buttons/skip-forward.d.ts.map b/priv/static/video.js/types/control-bar/skip-buttons/skip-forward.d.ts.map
new file mode 100644
index 0000000..11f44eb
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/skip-buttons/skip-forward.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"skip-forward.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/skip-buttons/skip-forward.js"],"names":[],"mappings":";AAGA;;;;;;;GAOG;AACH;IACE,uCAaC;IAVC,uBAA+B;IAC/B,cAAyC;IAW3C,0BAIC;IAMD;;;;;;;;;;OAUG;IACH,8BAiBC;CAQF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/spacer-controls/custom-control-spacer.d.ts b/priv/static/video.js/types/control-bar/spacer-controls/custom-control-spacer.d.ts
new file mode 100644
index 0000000..0d5ed67
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/spacer-controls/custom-control-spacer.d.ts
@@ -0,0 +1,17 @@
+export default CustomControlSpacer;
+/**
+ * Spacer specifically meant to be used as an insertion point for new plugins, etc.
+ *
+ * @extends Spacer
+ */
+declare class CustomControlSpacer extends Spacer {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+}
+import Spacer from "./spacer.js";
+//# sourceMappingURL=custom-control-spacer.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/spacer-controls/custom-control-spacer.d.ts.map b/priv/static/video.js/types/control-bar/spacer-controls/custom-control-spacer.d.ts.map
new file mode 100644
index 0000000..0215cfd
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/spacer-controls/custom-control-spacer.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"custom-control-spacer.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/spacer-controls/custom-control-spacer.js"],"names":[],"mappings":";AAMA;;;;GAIG;AACH;IAYE;;;;;OAKG;IACH,YAHY,OAAO,CAUlB;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/spacer-controls/spacer.d.ts b/priv/static/video.js/types/control-bar/spacer-controls/spacer.d.ts
new file mode 100644
index 0000000..93e21e0
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/spacer-controls/spacer.d.ts
@@ -0,0 +1,18 @@
+export default Spacer;
+/**
+ * Just an empty spacer element that can be used as an append point for plugins, etc.
+ * Also can be used to create space between elements when necessary.
+ *
+ * @extends Component
+ */
+declare class Spacer extends Component {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(tag?: string, props?: {}, attributes?: {}): Element;
+}
+import Component from "../../component.js";
+//# sourceMappingURL=spacer.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/spacer-controls/spacer.d.ts.map b/priv/static/video.js/types/control-bar/spacer-controls/spacer.d.ts.map
new file mode 100644
index 0000000..5b1d1f9
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/spacer-controls/spacer.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"spacer.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/spacer-controls/spacer.js"],"names":[],"mappings":";AAKA;;;;;GAKG;AACH;IAYE;;;;;OAKG;IACH,qDAHY,OAAO,CASlB;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/caption-settings-menu-item.d.ts b/priv/static/video.js/types/control-bar/text-track-controls/caption-settings-menu-item.d.ts
new file mode 100644
index 0000000..c352027
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/caption-settings-menu-item.d.ts
@@ -0,0 +1,22 @@
+export default CaptionSettingsMenuItem;
+/**
+ * The menu item for caption track settings menu
+ *
+ * @extends TextTrackMenuItem
+ */
+declare class CaptionSettingsMenuItem extends TextTrackMenuItem {
+    /**
+     * This gets called when an `CaptionSettingsMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event?: Event): void;
+}
+import TextTrackMenuItem from "./text-track-menu-item.js";
+//# sourceMappingURL=caption-settings-menu-item.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/caption-settings-menu-item.d.ts.map b/priv/static/video.js/types/control-bar/text-track-controls/caption-settings-menu-item.d.ts.map
new file mode 100644
index 0000000..0b5dee0
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/caption-settings-menu-item.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"caption-settings-menu-item.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/text-track-controls/caption-settings-menu-item.js"],"names":[],"mappings":";AAMA;;;;GAIG;AACH;IA+BE;;;;;;;;;;OAUG;IACH,oBAPW,KAAK,QASf;CAUF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/captions-button.d.ts b/priv/static/video.js/types/control-bar/text-track-controls/captions-button.d.ts
new file mode 100644
index 0000000..abbd644
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/captions-button.d.ts
@@ -0,0 +1,53 @@
+export default CaptionsButton;
+/**
+ * The button component for toggling and selecting captions
+ *
+ * @extends TextTrackButton
+ */
+declare class CaptionsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player: import('../../player').default, options?: any, ready?: Function);
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass(): string;
+    buildWrapperCSSClass(): string;
+    /**
+     * Create caption menu items
+     *
+     * @return {CaptionSettingsMenuItem[]}
+     *         The array of current menu items.
+     */
+    createItems(): CaptionSettingsMenuItem[];
+    /**
+     * `kind` of TextTrack to look for to associate it with this menu.
+     *
+     * @type {string}
+     * @private
+     */
+    private kind_;
+    /**
+     * The text that should display over the `CaptionsButton`s controls. Added for localization.
+     *
+     * @type {string}
+     * @protected
+     */
+    protected controlText_: string;
+}
+import TextTrackButton from "./text-track-button.js";
+import CaptionSettingsMenuItem from "./caption-settings-menu-item.js";
+//# sourceMappingURL=captions-button.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/captions-button.d.ts.map b/priv/static/video.js/types/control-bar/text-track-controls/captions-button.d.ts.map
new file mode 100644
index 0000000..dfa4818
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/captions-button.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"captions-button.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/text-track-controls/captions-button.js"],"names":[],"mappings":";AAOA;;;;GAIG;AACH;IAEE;;;;;;;;;;;OAWG;IACH,oBATY,OAAO,cAAc,EAAE,OAAO,mCAazC;IAED;;;;;OAKG;IACH,iBAHY,MAAM,CAKjB;IAED,+BAEC;IAED;;;;;OAKG;IACH,eAHY,uBAAuB,EAAE,CAcpC;IAIH;;;;;OAKG;IACH,cAA8B;IAE9B;;;;;OAKG;IACH,wBAHU,MAAM,CAGqB;CAhBpC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/chapters-button.d.ts b/priv/static/video.js/types/control-bar/text-track-controls/chapters-button.d.ts
new file mode 100644
index 0000000..6db1762
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/chapters-button.d.ts
@@ -0,0 +1,98 @@
+export default ChaptersButton;
+/**
+ * The button component for toggling and selecting chapters
+ * Chapters act much differently than other text tracks
+ * Cues are navigation vs. other tracks of alternative languages
+ *
+ * @extends TextTrackButton
+ */
+declare class ChaptersButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this function is ready.
+     */
+    constructor(player: import('../../player').default, options?: any, ready?: Function);
+    selectCurrentItem_: () => void;
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass(): string;
+    buildWrapperCSSClass(): string;
+    /**
+     * Update the menu based on the current state of its items.
+     *
+     * @param {Event} [event]
+     *        An event that triggered this function to run.
+     *
+     * @listens TextTrackList#addtrack
+     * @listens TextTrackList#removetrack
+     * @listens TextTrackList#change
+     */
+    update(event?: Event): void;
+    /**
+     * Set the currently selected track for the chapters button.
+     *
+     * @param {TextTrack} track
+     *        The new track to select. Nothing will change if this is the currently selected
+     *        track.
+     */
+    setTrack(track: TextTrack): void;
+    updateHandler_: any;
+    track_: any;
+    /**
+     * Find the track object that is currently in use by this ChaptersButton
+     *
+     * @return {TextTrack|undefined}
+     *         The current track or undefined if none was found.
+     */
+    findChaptersTrack(): TextTrack | undefined;
+    /**
+     * Get the caption for the ChaptersButton based on the track label. This will also
+     * use the current tracks localized kind as a fallback if a label does not exist.
+     *
+     * @return {string}
+     *         The tracks current label or the localized track kind.
+     */
+    getMenuCaption(): string;
+    /**
+     * Create menu from chapter track
+     *
+     * @return { import('../../menu/menu').default }
+     *         New menu for the chapter buttons
+     */
+    createMenu(): import('../../menu/menu').default;
+    /**
+     * Create a menu item for each text track
+     *
+     * @return  { import('./text-track-menu-item').default[] }
+     *         Array of menu items
+     */
+    createItems(): import('./text-track-menu-item').default[];
+    /**
+     * `kind` of TextTrack to look for to associate it with this menu.
+     *
+     * @type {string}
+     * @private
+     */
+    private kind_;
+    /**
+     * The text that should display over the `ChaptersButton`s controls. Added for localization.
+     *
+     * @type {string}
+     * @protected
+     */
+    protected controlText_: string;
+}
+import TextTrackButton from "./text-track-button.js";
+//# sourceMappingURL=chapters-button.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/chapters-button.d.ts.map b/priv/static/video.js/types/control-bar/text-track-controls/chapters-button.d.ts.map
new file mode 100644
index 0000000..e03edfb
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/chapters-button.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"chapters-button.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/text-track-controls/chapters-button.js"],"names":[],"mappings":";AAQA;;;;;;GAMG;AACH;IAEE;;;;;;;;;;;OAWG;IACH,oBATY,OAAO,cAAc,EAAE,OAAO,mCAmBzC;IALC,+BAIC;IAGH;;;;;OAKG;IACH,iBAHY,MAAM,CAKjB;IAED,+BAEC;IAED;;;;;;;;;OASG;IACH,eAPW,KAAK,QAqBf;IAED;;;;;;OAMG;IACH,gBAJW,SAAS,QAwCnB;IA9BG,oBAA4C;IAa5C,YAAkB;IAmBtB;;;;;OAKG;IACH,qBAHY,SAAS,GAAC,SAAS,CAc9B;IAED;;;;;;OAMG;IACH,kBAHY,MAAM,CAQjB;IAED;;;;;OAKG;IACH,cAHa,OAAO,iBAAiB,EAAE,OAAO,CAM7C;IAED;;;;;OAKG;IACH,eAHc,OAAO,wBAAwB,EAAE,OAAO,EAAE,CAwBvD;IAIH;;;;;OAKG;IACH,cAA8B;IAE9B;;;;;OAKG;IACH,wBAHU,MAAM,CAGqB;CAhBpC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/chapters-track-menu-item.d.ts b/priv/static/video.js/types/control-bar/text-track-controls/chapters-track-menu-item.d.ts
new file mode 100644
index 0000000..a4d5f89
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/chapters-track-menu-item.d.ts
@@ -0,0 +1,24 @@
+export default ChaptersTrackMenuItem;
+/**
+ * The chapter track menu item
+ *
+ * @extends MenuItem
+ */
+declare class ChaptersTrackMenuItem extends MenuItem {
+    track: any;
+    cue: any;
+    /**
+     * This gets called when an `ChaptersTrackMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event?: Event): void;
+}
+import MenuItem from "../../menu/menu-item.js";
+//# sourceMappingURL=chapters-track-menu-item.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/chapters-track-menu-item.d.ts.map b/priv/static/video.js/types/control-bar/text-track-controls/chapters-track-menu-item.d.ts.map
new file mode 100644
index 0000000..9d5eefd
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/chapters-track-menu-item.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"chapters-track-menu-item.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/text-track-controls/chapters-track-menu-item.js"],"names":[],"mappings":";AAMA;;;;GAIG;AACH;IAuBI,WAAkB;IAClB,SAAc;IAGhB;;;;;;;;;;OAUG;IACH,oBAPW,KAAK,QAUf;CAEF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/descriptions-button.d.ts b/priv/static/video.js/types/control-bar/text-track-controls/descriptions-button.d.ts
new file mode 100644
index 0000000..45e3818
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/descriptions-button.d.ts
@@ -0,0 +1,54 @@
+export default DescriptionsButton;
+/**
+ * The button component for toggling and selecting descriptions
+ *
+ * @extends TextTrackButton
+ */
+declare class DescriptionsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player: import('../../player').default, options?: any, ready?: Function);
+    /**
+     * Handle text track change
+     *
+     * @param {Event} event
+     *        The event that caused this function to run
+     *
+     * @listens TextTrackList#change
+     */
+    handleTracksChange(event: Event): void;
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass(): string;
+    buildWrapperCSSClass(): string;
+    /**
+     * `kind` of TextTrack to look for to associate it with this menu.
+     *
+     * @type {string}
+     * @private
+     */
+    private kind_;
+    /**
+     * The text that should display over the `DescriptionsButton`s controls. Added for localization.
+     *
+     * @type {string}
+     * @protected
+     */
+    protected controlText_: string;
+}
+import TextTrackButton from "./text-track-button.js";
+//# sourceMappingURL=descriptions-button.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/descriptions-button.d.ts.map b/priv/static/video.js/types/control-bar/text-track-controls/descriptions-button.d.ts.map
new file mode 100644
index 0000000..25a6f7a
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/descriptions-button.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"descriptions-button.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/text-track-controls/descriptions-button.js"],"names":[],"mappings":";AAOA;;;;GAIG;AACH;IAEE;;;;;;;;;;;OAWG;IACH,oBATY,OAAO,cAAc,EAAE,OAAO,mCAqBzC;IAED;;;;;;;OAOG;IACH,0BALW,KAAK,QAyBf;IAED;;;;;OAKG;IACH,iBAHY,MAAM,CAKjB;IAED,+BAEC;IAGH;;;;;OAKG;IACH,cAAkC;IAElC;;;;;OAKG;IACH,wBAHU,MAAM,CAGyB;CAhBxC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/off-text-track-menu-item.d.ts b/priv/static/video.js/types/control-bar/text-track-controls/off-text-track-menu-item.d.ts
new file mode 100644
index 0000000..d8fb96e
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/off-text-track-menu-item.d.ts
@@ -0,0 +1,10 @@
+export default OffTextTrackMenuItem;
+/**
+ * A special menu item for turning off a specific type of text track
+ *
+ * @extends TextTrackMenuItem
+ */
+declare class OffTextTrackMenuItem extends TextTrackMenuItem {
+}
+import TextTrackMenuItem from "./text-track-menu-item.js";
+//# sourceMappingURL=off-text-track-menu-item.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/off-text-track-menu-item.d.ts.map b/priv/static/video.js/types/control-bar/text-track-controls/off-text-track-menu-item.d.ts.map
new file mode 100644
index 0000000..6ee2105
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/off-text-track-menu-item.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"off-text-track-menu-item.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/text-track-controls/off-text-track-menu-item.js"],"names":[],"mappings":";AAMA;;;;GAIG;AACH;CAkGC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/subs-caps-button.d.ts b/priv/static/video.js/types/control-bar/text-track-controls/subs-caps-button.d.ts
new file mode 100644
index 0000000..4562c61
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/subs-caps-button.d.ts
@@ -0,0 +1,35 @@
+export default SubsCapsButton;
+/**
+ * The button component for toggling and selecting captions and/or subtitles
+ *
+ * @extends TextTrackButton
+ */
+declare class SubsCapsButton extends TextTrackButton {
+    label_: string;
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass(): string;
+    buildWrapperCSSClass(): string;
+    /**
+     * Create caption/subtitles menu items
+     *
+     * @return {CaptionSettingsMenuItem[]}
+     *         The array of current menu items.
+     */
+    createItems(): CaptionSettingsMenuItem[];
+    /**
+     * The text that should display over the `SubsCapsButton`s controls.
+     *
+     *
+     * @type {string}
+     * @protected
+     */
+    protected controlText_: string;
+}
+import TextTrackButton from "./text-track-button.js";
+import CaptionSettingsMenuItem from "./caption-settings-menu-item.js";
+//# sourceMappingURL=subs-caps-button.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/subs-caps-button.d.ts.map b/priv/static/video.js/types/control-bar/text-track-controls/subs-caps-button.d.ts.map
new file mode 100644
index 0000000..e70e112
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/subs-caps-button.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"subs-caps-button.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/text-track-controls/subs-caps-button.js"],"names":[],"mappings":";AASA;;;;GAIG;AACH;IAmBI,eAAyB;IAS3B;;;;;OAKG;IACH,iBAHY,MAAM,CAKjB;IAED,+BAEC;IAED;;;;;OAKG;IACH,eAHY,uBAAuB,EAAE,CAepC;IAYH;;;;;;OAMG;IACH,wBAHU,MAAM,CAGqB;CAjBpC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/subs-caps-menu-item.d.ts b/priv/static/video.js/types/control-bar/text-track-controls/subs-caps-menu-item.d.ts
new file mode 100644
index 0000000..25aade9
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/subs-caps-menu-item.d.ts
@@ -0,0 +1,12 @@
+export default SubsCapsMenuItem;
+/**
+ * SubsCapsMenuItem has an [cc] icon to distinguish captions from subtitles
+ * in the SubsCapsMenu.
+ *
+ * @extends TextTrackMenuItem
+ */
+declare class SubsCapsMenuItem extends TextTrackMenuItem {
+    createEl(type: any, props: any, attrs: any): Element;
+}
+import TextTrackMenuItem from "./text-track-menu-item.js";
+//# sourceMappingURL=subs-caps-menu-item.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/subs-caps-menu-item.d.ts.map b/priv/static/video.js/types/control-bar/text-track-controls/subs-caps-menu-item.d.ts.map
new file mode 100644
index 0000000..98ae51b
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/subs-caps-menu-item.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"subs-caps-menu-item.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/text-track-controls/subs-caps-menu-item.js"],"names":[],"mappings":";AAOA;;;;;GAKG;AACH;IAEE,qDAuBC;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/subtitles-button.d.ts b/priv/static/video.js/types/control-bar/text-track-controls/subtitles-button.d.ts
new file mode 100644
index 0000000..8800b12
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/subtitles-button.d.ts
@@ -0,0 +1,45 @@
+export default SubtitlesButton;
+/**
+ * The button component for toggling and selecting subtitles
+ *
+ * @extends TextTrackButton
+ */
+declare class SubtitlesButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player: import('../../player').default, options?: any, ready?: Function);
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass(): string;
+    buildWrapperCSSClass(): string;
+    /**
+     * `kind` of TextTrack to look for to associate it with this menu.
+     *
+     * @type {string}
+     * @private
+     */
+    private kind_;
+    /**
+     * The text that should display over the `SubtitlesButton`s controls. Added for localization.
+     *
+     * @type {string}
+     * @protected
+     */
+    protected controlText_: string;
+}
+import TextTrackButton from "./text-track-button.js";
+//# sourceMappingURL=subtitles-button.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/subtitles-button.d.ts.map b/priv/static/video.js/types/control-bar/text-track-controls/subtitles-button.d.ts.map
new file mode 100644
index 0000000..252502f
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/subtitles-button.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"subtitles-button.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/text-track-controls/subtitles-button.js"],"names":[],"mappings":";AAMA;;;;GAIG;AACH;IAEE;;;;;;;;;;;OAWG;IACH,oBATY,OAAO,cAAc,EAAE,OAAO,mCAazC;IAED;;;;;OAKG;IACH,iBAHY,MAAM,CAKjB;IAED,+BAEC;IAGH;;;;;OAKG;IACH,cAA+B;IAE/B;;;;;OAKG;IACH,wBAHU,MAAM,CAGsB;CAhBrC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/text-track-button.d.ts b/priv/static/video.js/types/control-bar/text-track-controls/text-track-button.d.ts
new file mode 100644
index 0000000..7cb6de8
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/text-track-button.d.ts
@@ -0,0 +1,31 @@
+export default TextTrackButton;
+/**
+ * The base class for buttons that toggle specific text track types (e.g. subtitles)
+ *
+ * @extends MenuButton
+ */
+declare class TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player: import('../../player').default, options?: any);
+    /**
+     * Create a menu item for each text track
+     *
+     * @param {TextTrackMenuItem[]} [items=[]]
+     *        Existing array of items to use during creation
+     *
+     * @return {TextTrackMenuItem[]}
+     *         Array of menu items that were created
+     */
+    createItems(items?: TextTrackMenuItem[], TrackMenuItem?: typeof TextTrackMenuItem): TextTrackMenuItem[];
+    kinds_: any[];
+}
+import TextTrackMenuItem from "./text-track-menu-item.js";
+//# sourceMappingURL=text-track-button.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/text-track-button.d.ts.map b/priv/static/video.js/types/control-bar/text-track-controls/text-track-button.d.ts.map
new file mode 100644
index 0000000..e2e9163
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/text-track-button.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"text-track-button.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/text-track-controls/text-track-button.js"],"names":[],"mappings":";AAQA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,cAAc,EAAE,OAAO,iBAUzC;IAED;;;;;;;;OAQG;IACH,oBANW,iBAAiB,EAAE,6CAGlB,iBAAiB,EAAE,CAiD9B;IAzBG,cAA0B;CA2B/B"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/text-track-menu-item.d.ts b/priv/static/video.js/types/control-bar/text-track-controls/text-track-menu-item.d.ts
new file mode 100644
index 0000000..ed93745
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/text-track-menu-item.d.ts
@@ -0,0 +1,22 @@
+export default TextTrackMenuItem;
+/**
+ * The specific menu item type for selecting a language within a text track kind
+ *
+ * @extends MenuItem
+ */
+declare class TextTrackMenuItem extends MenuItem {
+    track: any;
+    kinds: any;
+    /**
+     * Handle text track list change
+     *
+     * @param {Event} event
+     *        The `change` event that caused this function to be called.
+     *
+     * @listens TextTrackList#change
+     */
+    handleTracksChange(event: Event): void;
+    handleSelectedLanguageChange(event: any): void;
+}
+import MenuItem from "../../menu/menu-item.js";
+//# sourceMappingURL=text-track-menu-item.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/text-track-controls/text-track-menu-item.d.ts.map b/priv/static/video.js/types/control-bar/text-track-controls/text-track-menu-item.d.ts.map
new file mode 100644
index 0000000..7530ed2
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/text-track-controls/text-track-menu-item.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"text-track-menu-item.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/text-track-controls/text-track-menu-item.js"],"names":[],"mappings":";AAQA;;;;GAIG;AACH;IAqBI,WAAkB;IAGlB,WAAiF;IA+FnF;;;;;;;OAOG;IACH,0BALW,KAAK,QAaf;IAED,+CAiBC;CASF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/time-controls/current-time-display.d.ts b/priv/static/video.js/types/control-bar/time-controls/current-time-display.d.ts
new file mode 100644
index 0000000..3d87a73
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/time-controls/current-time-display.d.ts
@@ -0,0 +1,35 @@
+export default CurrentTimeDisplay;
+/**
+ * Displays the current time
+ *
+ * @extends Component
+ */
+declare class CurrentTimeDisplay extends Component {
+    /**
+     * Update current time display
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` event that caused this function to run.
+     *
+     * @listens Player#timeupdate
+     */
+    updateContent(event?: Event): void;
+    /**
+     * The text that is added to the `CurrentTimeDisplay` for screen reader users.
+     *
+     * @type {string}
+     * @private
+     */
+    private labelText_;
+    /**
+     * The text that should display over the `CurrentTimeDisplay`s controls. Added to for localization.
+     *
+     * @type {string}
+     * @protected
+     *
+     * @deprecated in v7; controlText_ is not used in non-active display Components
+     */
+    protected controlText_: string;
+}
+import Component from "../../component.js";
+//# sourceMappingURL=current-time-display.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/time-controls/current-time-display.d.ts.map b/priv/static/video.js/types/control-bar/time-controls/current-time-display.d.ts.map
new file mode 100644
index 0000000..d382f26
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/time-controls/current-time-display.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"current-time-display.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/time-controls/current-time-display.js"],"names":[],"mappings":";AAMA;;;;GAIG;AACH;IAYE;;;;;;;OAOG;IACH,sBALW,KAAK,QAgBf;IAGH;;;;;OAKG;IACH,mBAAuC;IAEvC;;;;;;;OAOG;IACH,wBALU,MAAM,CAKyB;CAlBxC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/time-controls/duration-display.d.ts b/priv/static/video.js/types/control-bar/time-controls/duration-display.d.ts
new file mode 100644
index 0000000..b949d03
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/time-controls/duration-display.d.ts
@@ -0,0 +1,48 @@
+export default DurationDisplay;
+/**
+ * Displays the duration
+ *
+ * @extends Component
+ */
+declare class DurationDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: import('../../player').default, options?: any);
+    /**
+     * Update duration time display.
+     *
+     * @param {Event} [event]
+     *        The `durationchange`, `timeupdate`, or `loadedmetadata` event that caused
+     *        this function to be called.
+     *
+     * @listens Player#durationchange
+     * @listens Player#timeupdate
+     * @listens Player#loadedmetadata
+     */
+    updateContent(event?: Event): void;
+    /**
+     * The text that is added to the `DurationDisplay` for screen reader users.
+     *
+     * @type {string}
+     * @private
+     */
+    private labelText_;
+    /**
+     * The text that should display over the `DurationDisplay`s controls. Added to for localization.
+     *
+     * @type {string}
+     * @protected
+     *
+     * @deprecated in v7; controlText_ is not used in non-active display Components
+     */
+    protected controlText_: string;
+}
+import Component from "../../component.js";
+//# sourceMappingURL=duration-display.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/time-controls/duration-display.d.ts.map b/priv/static/video.js/types/control-bar/time-controls/duration-display.d.ts.map
new file mode 100644
index 0000000..49edf6e
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/time-controls/duration-display.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"duration-display.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/time-controls/duration-display.js"],"names":[],"mappings":";AAMA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,cAAc,EAAE,OAAO,iBAyBzC;IAYD;;;;;;;;;;OAUG;IACH,sBARW,KAAK,QAYf;IAGH;;;;;OAKG;IACH,mBAAoC;IAEpC;;;;;;;OAOG;IACH,wBALU,MAAM,CAKsB;CAlBrC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/time-controls/remaining-time-display.d.ts b/priv/static/video.js/types/control-bar/time-controls/remaining-time-display.d.ts
new file mode 100644
index 0000000..ed2a3ca
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/time-controls/remaining-time-display.d.ts
@@ -0,0 +1,53 @@
+export default RemainingTimeDisplay;
+/**
+ * Displays the time left in the video
+ *
+ * @extends Component
+ */
+declare class RemainingTimeDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: import('../../player').default, options?: any);
+    /**
+     * Create the `Component`'s DOM element with the "minus" character prepend to the time
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+    /**
+     * Update remaining time display.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` or `durationchange` event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     * @listens Player#durationchange
+     */
+    updateContent(event?: Event): void;
+    /**
+     * The text that is added to the `RemainingTimeDisplay` for screen reader users.
+     *
+     * @type {string}
+     * @private
+     */
+    private labelText_;
+    /**
+     * The text that should display over the `RemainingTimeDisplay`s controls. Added to for localization.
+     *
+     * @type {string}
+     * @protected
+     *
+     * @deprecated in v7; controlText_ is not used in non-active display Components
+     */
+    protected controlText_: string;
+}
+import Component from "../../component.js";
+//# sourceMappingURL=remaining-time-display.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/time-controls/remaining-time-display.d.ts.map b/priv/static/video.js/types/control-bar/time-controls/remaining-time-display.d.ts.map
new file mode 100644
index 0000000..ee8465b
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/time-controls/remaining-time-display.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"remaining-time-display.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/time-controls/remaining-time-display.js"],"names":[],"mappings":";AAOA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,cAAc,EAAE,OAAO,iBASzC;IAYD;;;;;OAKG;IACH,YAHY,OAAO,CAUlB;IAED;;;;;;;;OAQG;IACH,sBANW,KAAK,QAwBf;IAGH;;;;;OAKG;IACH,mBAAyC;IAEzC;;;;;;;OAOG;IACH,wBALU,MAAM,CAK2B;CAlB1C"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/time-controls/time-display.d.ts b/priv/static/video.js/types/control-bar/time-controls/time-display.d.ts
new file mode 100644
index 0000000..decacdd
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/time-controls/time-display.d.ts
@@ -0,0 +1,72 @@
+export default TimeDisplay;
+/**
+ * Displays time information about the video
+ *
+ * @extends Component
+ */
+declare class TimeDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: import('../../player').default, options?: any);
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+    contentEl_: Element;
+    dispose(): void;
+    textNode_: any;
+    /**
+     * Updates the displayed time according to the `updateContent` function which is defined in the child class.
+     *
+     * @param {Event} [event]
+     *          The `timeupdate`, `ended` or `seeking` (if enableSmoothSeeking is true) event that caused this function to be called.
+     */
+    update(event?: Event): void;
+    /**
+     * Updates the time display text node with a new time
+     *
+     * @param {number} [time=0] the time to update to
+     *
+     * @private
+     */
+    private updateTextNode_;
+    formattedTime_: any;
+    /**
+     * To be filled out in the child class, should update the displayed time
+     * in accordance with the fact that the current time has changed.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate`  event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     */
+    updateContent(event?: Event): void;
+    /**
+     * The text that is added to the `TimeDisplay` for screen reader users.
+     *
+     * @type {string}
+     * @private
+     */
+    private labelText_;
+    /**
+     * The text that should display over the `TimeDisplay`s controls. Added to for localization.
+     *
+     * @type {string}
+     * @protected
+     *
+     * @deprecated in v7; controlText_ is not used in non-active display Components
+     */
+    protected controlText_: string;
+}
+import Component from "../../component.js";
+//# sourceMappingURL=time-display.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/time-controls/time-display.d.ts.map b/priv/static/video.js/types/control-bar/time-controls/time-display.d.ts.map
new file mode 100644
index 0000000..5273ec2
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/time-controls/time-display.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"time-display.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/time-controls/time-display.js"],"names":[],"mappings":";AASA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,cAAc,EAAE,OAAO,iBAWzC;IAED;;;;;OAKG;IACH,YAHY,OAAO,CA6BlB;IAZC,oBAQE;IAMJ,gBAKC;IAHC,eAAqB;IAKvB;;;;;OAKG;IACH,eAHW,KAAK,QASf;IAED;;;;;;OAMG;IACH,wBAkCC;IA3BC,oBAA0B;IA6B5B;;;;;;;;OAQG;IACH,sBALW,KAAK,QAKO;IAGzB;;;;;OAKG;IACH,mBAAgC;IAEhC;;;;;;;OAOG;IACH,wBALU,MAAM,CAKkB;CAlBjC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/time-controls/time-divider.d.ts b/priv/static/video.js/types/control-bar/time-controls/time-divider.d.ts
new file mode 100644
index 0000000..26eda6d
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/time-controls/time-divider.d.ts
@@ -0,0 +1,18 @@
+export default TimeDivider;
+/**
+ * The separator between the current time and duration.
+ * Can be hidden if it's not needed in the design.
+ *
+ * @extends Component
+ */
+declare class TimeDivider extends Component {
+    /**
+     * Create the component's DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+}
+import Component from "../../component.js";
+//# sourceMappingURL=time-divider.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/time-controls/time-divider.d.ts.map b/priv/static/video.js/types/control-bar/time-controls/time-divider.d.ts.map
new file mode 100644
index 0000000..33d39cb
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/time-controls/time-divider.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"time-divider.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/time-controls/time-divider.js"],"names":[],"mappings":";AAKA;;;;;GAKG;AACH;IAEE;;;;;OAKG;IACH,YAHY,OAAO,CAsBlB;CAEF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/track-button.d.ts b/priv/static/video.js/types/control-bar/track-button.d.ts
new file mode 100644
index 0000000..5894587
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/track-button.d.ts
@@ -0,0 +1,20 @@
+export default TrackButton;
+/**
+ * The base class for buttons that toggle specific  track types (e.g. subtitles).
+ *
+ * @extends MenuButton
+ */
+declare class TrackButton extends MenuButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: any, options?: any);
+}
+import MenuButton from "../menu/menu-button.js";
+//# sourceMappingURL=track-button.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/track-button.d.ts.map b/priv/static/video.js/types/control-bar/track-button.d.ts.map
new file mode 100644
index 0000000..fe723b3
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/track-button.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"track-button.d.ts","sourceRoot":"","sources":["../../../src/js/control-bar/track-button.js"],"names":[],"mappings":";AAOA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,wCAyBC;CAEF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-control/check-mute-support.d.ts b/priv/static/video.js/types/control-bar/volume-control/check-mute-support.d.ts
new file mode 100644
index 0000000..b3469af
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-control/check-mute-support.d.ts
@@ -0,0 +1,15 @@
+export default checkMuteSupport;
+/**
+ * Check if muting volume is supported and if it isn't hide the mute toggle
+ * button.
+ *
+ * @param { import('../../component').default } self
+ *        A reference to the mute toggle button
+ *
+ * @param { import('../../player').default } player
+ *        A reference to the player
+ *
+ * @private
+ */
+declare function checkMuteSupport(self: import('../../component').default, player: import('../../player').default): void;
+//# sourceMappingURL=check-mute-support.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-control/check-mute-support.d.ts.map b/priv/static/video.js/types/control-bar/volume-control/check-mute-support.d.ts.map
new file mode 100644
index 0000000..05df133
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-control/check-mute-support.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"check-mute-support.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/volume-control/check-mute-support.js"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;AACH,wCARY,OAAO,iBAAiB,EAAE,OAAO,UAGjC,OAAO,cAAc,EAAE,OAAO,QAkBzC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-control/check-volume-support.d.ts b/priv/static/video.js/types/control-bar/volume-control/check-volume-support.d.ts
new file mode 100644
index 0000000..4989e4c
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-control/check-volume-support.d.ts
@@ -0,0 +1,15 @@
+export default checkVolumeSupport;
+/**
+ * Check if volume control is supported and if it isn't hide the
+ * `Component` that was passed  using the `vjs-hidden` class.
+ *
+ * @param { import('../../component').default } self
+ *        The component that should be hidden if volume is unsupported
+ *
+ * @param { import('../../player').default } player
+ *        A reference to the player
+ *
+ * @private
+ */
+declare function checkVolumeSupport(self: import('../../component').default, player: import('../../player').default): void;
+//# sourceMappingURL=check-volume-support.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-control/check-volume-support.d.ts.map b/priv/static/video.js/types/control-bar/volume-control/check-volume-support.d.ts.map
new file mode 100644
index 0000000..09f941d
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-control/check-volume-support.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"check-volume-support.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/volume-control/check-volume-support.js"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;AACH,0CARY,OAAO,iBAAiB,EAAE,OAAO,UAGjC,OAAO,cAAc,EAAE,OAAO,QAkBzC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-control/mouse-volume-level-display.d.ts b/priv/static/video.js/types/control-bar/volume-control/mouse-volume-level-display.d.ts
new file mode 100644
index 0000000..0d9bee4
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-control/mouse-volume-level-display.d.ts
@@ -0,0 +1,47 @@
+export default MouseVolumeLevelDisplay;
+/**
+ * The {@link MouseVolumeLevelDisplay} component tracks mouse movement over the
+ * {@link VolumeControl}. It displays an indicator and a {@link VolumeLevelTooltip}
+ * indicating the volume level which is represented by a given point in the
+ * {@link VolumeBar}.
+ *
+ * @extends Component
+ */
+declare class MouseVolumeLevelDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: import('../../player').default, options?: any);
+    /**
+     * Enquires updates to its own DOM as well as the DOM of its
+     * {@link VolumeLevelTooltip} child.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     */
+    update(rangeBarRect: any, rangeBarPoint: number, vertical: boolean): void;
+    /**
+     * Create the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+}
+import Component from "../../component.js";
+//# sourceMappingURL=mouse-volume-level-display.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-control/mouse-volume-level-display.d.ts.map b/priv/static/video.js/types/control-bar/volume-control/mouse-volume-level-display.d.ts.map
new file mode 100644
index 0000000..13dd6f9
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-control/mouse-volume-level-display.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"mouse-volume-level-display.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/volume-control/mouse-volume-level-display.js"],"names":[],"mappings":";AAQA;;;;;;;GAOG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,cAAc,EAAE,OAAO,iBASzC;IAcD;;;;;;;;;;;;;;;OAeG;IACH,yCATW,MAAM,YAIN,OAAO,QAejB;IAtCD;;;;;OAKG;IACH,YAHY,OAAO,CAOlB;CA6BF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-control/volume-bar.d.ts b/priv/static/video.js/types/control-bar/volume-control/volume-bar.d.ts
new file mode 100644
index 0000000..93686ce
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-control/volume-bar.d.ts
@@ -0,0 +1,84 @@
+export default VolumeBar;
+/**
+ * The bar that contains the volume level and can be clicked on to adjust the level
+ *
+ * @extends Slider
+ */
+declare class VolumeBar extends Slider {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+    /**
+     * Handle mouse down on volume bar
+     *
+     * @param {Event} event
+     *        The `mousedown` event that caused this to run.
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event: Event): void;
+    /**
+     * Handle movement events on the {@link VolumeMenuButton}.
+     *
+     * @param {Event} event
+     *        The event that caused this function to run.
+     *
+     * @listens mousemove
+     */
+    handleMouseMove(event: Event): void;
+    /**
+     * If the player is muted unmute it.
+     */
+    checkMuted(): void;
+    /**
+     * Get percent of volume level
+     *
+     * @return {number}
+     *         Volume level percent as a decimal number.
+     */
+    getPercent(): number;
+    /**
+     * Increase volume level for keyboard users
+     */
+    stepForward(): void;
+    /**
+     * Decrease volume level for keyboard users
+     */
+    stepBack(): void;
+    /**
+     * Update ARIA accessibility attributes
+     *
+     * @param {Event} [event]
+     *        The `volumechange` event that caused this function to run.
+     *
+     * @listens Player#volumechange
+     */
+    updateARIAAttributes(event?: Event): void;
+    /**
+     * Returns the current value of the player volume as a percentage
+     *
+     * @private
+     */
+    private volumeAsPercentage_;
+    /**
+     * When user starts dragging the VolumeBar, store the volume and listen for
+     * the end of the drag. When the drag ends, if the volume was set to zero,
+     * set lastVolume to the stored volume.
+     *
+     * @listens slideractive
+     * @private
+     */
+    private updateLastVolume_;
+    /**
+     * Call the update event for this Slider when this event happens on the player.
+     *
+     * @type {string}
+     */
+    playerEvent: string;
+}
+import Slider from "../../slider/slider.js";
+//# sourceMappingURL=volume-bar.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-control/volume-bar.d.ts.map b/priv/static/video.js/types/control-bar/volume-control/volume-bar.d.ts.map
new file mode 100644
index 0000000..31161f1
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-control/volume-bar.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"volume-bar.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/volume-control/volume-bar.js"],"names":[],"mappings":";AAaA;;;;GAIG;AACH;IAkBE;;;;;OAKG;IACH,YAHY,OAAO,CAUlB;IAED;;;;;;;OAOG;IACH,uBALW,KAAK,QAWf;IAED;;;;;;;OAOG;IACH,uBALW,KAAK,QA6Bf;IAED;;OAEG;IACH,mBAIC;IAED;;;;;OAKG;IACH,cAHY,MAAM,CAQjB;IAED;;OAEG;IACH,oBAGC;IAED;;OAEG;IACH,iBAGC;IAED;;;;;;;OAOG;IACH,6BALW,KAAK,QAUf;IAED;;;;OAIG;IACH,4BAEC;IAED;;;;;;;OAOG;IACH,0BAQC;IAsBH;;;;OAIG;IACH,aAFU,MAAM,CAEe;CAzB9B"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-control/volume-control.d.ts b/priv/static/video.js/types/control-bar/volume-control/volume-control.d.ts
new file mode 100644
index 0000000..f5bae0c
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-control/volume-control.d.ts
@@ -0,0 +1,59 @@
+export default VolumeControl;
+/**
+ * The component for controlling the volume level
+ *
+ * @extends Component
+ */
+declare class VolumeControl extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player: import('../../player').default, options?: any);
+    throttledHandleMouseMove: Function;
+    handleMouseUpHandler_: (e: any) => void;
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+    /**
+     * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseDown(event: Event): void;
+    /**
+     * Handle `mouseup` or `touchend` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     */
+    handleMouseUp(event: Event): void;
+    /**
+     * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseMove(event: Event): void;
+}
+import Component from "../../component.js";
+//# sourceMappingURL=volume-control.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-control/volume-control.d.ts.map b/priv/static/video.js/types/control-bar/volume-control/volume-control.d.ts.map
new file mode 100644
index 0000000..3344a78
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-control/volume-control.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"volume-control.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/volume-control/volume-control.js"],"names":[],"mappings":";AAWA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,cAAc,EAAE,OAAO,iBAyCzC;IApBC,mCAAoG;IACpG,wCAAyD;IAqB3D;;;;;OAKG;IACH,YAHY,OAAO,CAalB;IAED;;;;;;;;OAQG;IACH,uBANW,KAAK,QAaf;IAED;;;;;;;;OAQG;IACH,qBANW,KAAK,QAaf;IAED;;;;;;;;OAQG;IACH,uBANW,KAAK,QAQf;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-control/volume-level-tooltip.d.ts b/priv/static/video.js/types/control-bar/volume-control/volume-level-tooltip.d.ts
new file mode 100644
index 0000000..fc2dc9f
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-control/volume-level-tooltip.d.ts
@@ -0,0 +1,73 @@
+export default VolumeLevelTooltip;
+/**
+ * Volume level tooltips display a volume above or side by side the volume bar.
+ *
+ * @extends Component
+ */
+declare class VolumeLevelTooltip extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: import('../../player').default, options?: any);
+    /**
+     * Updates the position of the tooltip relative to the `VolumeBar` and
+     * its content text.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     */
+    update(rangeBarRect: any, rangeBarPoint: number, vertical: boolean, content: any): void;
+    /**
+     * Create the volume tooltip DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+    /**
+     * Write the volume to the tooltip DOM element.
+     *
+     * @param {string} content
+     *        The formatted volume for the tooltip.
+     */
+    write(content: string): void;
+    /**
+     * Updates the position of the volume tooltip relative to the `VolumeBar`.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     * @param {number} volume
+     *        The volume level to update the tooltip to
+     *
+     * @param {Function} cb
+     *        A function that will be called during the request animation frame
+     *        for tooltips that need to do additional animations from the default
+     */
+    updateVolume(rangeBarRect: any, rangeBarPoint: number, vertical: boolean, volume: number, cb: Function): void;
+}
+import Component from "../../component";
+//# sourceMappingURL=volume-level-tooltip.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-control/volume-level-tooltip.d.ts.map b/priv/static/video.js/types/control-bar/volume-control/volume-level-tooltip.d.ts.map
new file mode 100644
index 0000000..517782d
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-control/volume-level-tooltip.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"volume-level-tooltip.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/volume-control/volume-level-tooltip.js"],"names":[],"mappings":";AAOA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,cAAc,EAAE,OAAO,iBASzC;IAgBD;;;;;;;;;;;;;;;OAeG;IACH,yCATW,MAAM,YAIN,OAAO,sBAmCjB;IA5DD;;;;;OAKG;IACH,YAHY,OAAO,CASlB;IAkDD;;;;;OAKG;IACH,eAHW,MAAM,QAKhB;IAED;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,+CAfW,MAAM,YAIN,OAAO,UAIP,MAAM,sBAchB;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-control/volume-level.d.ts b/priv/static/video.js/types/control-bar/volume-control/volume-level.d.ts
new file mode 100644
index 0000000..c881813
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-control/volume-level.d.ts
@@ -0,0 +1,17 @@
+export default VolumeLevel;
+/**
+ * Shows volume level
+ *
+ * @extends Component
+ */
+declare class VolumeLevel extends Component {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+}
+import Component from "../../component.js";
+//# sourceMappingURL=volume-level.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-control/volume-level.d.ts.map b/priv/static/video.js/types/control-bar/volume-control/volume-level.d.ts.map
new file mode 100644
index 0000000..a6b4995
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-control/volume-level.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"volume-level.d.ts","sourceRoot":"","sources":["../../../../src/js/control-bar/volume-control/volume-level.js"],"names":[],"mappings":";AAKA;;;;GAIG;AACH;IAEE;;;;;OAKG;IACH,YAHY,OAAO,CAelB;CAEF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-panel.d.ts b/priv/static/video.js/types/control-bar/volume-panel.d.ts
new file mode 100644
index 0000000..3ea22b8
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-panel.d.ts
@@ -0,0 +1,97 @@
+export default VolumePanel;
+/**
+ * A Component to contain the MuteToggle and VolumeControl so that
+ * they can work together.
+ *
+ * @extends Component
+ */
+declare class VolumePanel extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player: any, options?: any);
+    handleKeyPressHandler_: (e: any) => void;
+    /**
+     * Add vjs-slider-active class to the VolumePanel
+     *
+     * @listens VolumeControl#slideractive
+     * @private
+     */
+    private sliderActive_;
+    /**
+     * Removes vjs-slider-active class to the VolumePanel
+     *
+     * @listens VolumeControl#sliderinactive
+     * @private
+     */
+    private sliderInactive_;
+    /**
+     * Adds vjs-hidden or vjs-mute-toggle-only to the VolumePanel
+     * depending on MuteToggle and VolumeControl state
+     *
+     * @listens Player#loadstart
+     * @private
+     */
+    private volumePanelState_;
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+    /**
+     * Dispose of the `volume-panel` and all child components.
+     */
+    dispose(): void;
+    /**
+     * Handles `keyup` events on the `VolumeControl`, looking for ESC, which closes
+     * the volume panel and sets focus on `MuteToggle`.
+     *
+     * @param {Event} event
+     *        The `keyup` event that caused this function to be called.
+     *
+     * @listens keyup
+     */
+    handleVolumeControlKeyUp(event: Event): void;
+    /**
+     * This gets called when a `VolumePanel` gains hover via a `mouseover` event.
+     * Turns on listening for `mouseover` event. When they happen it
+     * calls `this.handleMouseOver`.
+     *
+     * @param {Event} event
+     *        The `mouseover` event that caused this function to be called.
+     *
+     * @listens mouseover
+     */
+    handleMouseOver(event: Event): void;
+    /**
+     * This gets called when a `VolumePanel` gains hover via a `mouseout` event.
+     * Turns on listening for `mouseout` event. When they happen it
+     * calls `this.handleMouseOut`.
+     *
+     * @param {Event} event
+     *        The `mouseout` event that caused this function to be called.
+     *
+     * @listens mouseout
+     */
+    handleMouseOut(event: Event): void;
+    /**
+     * Handles `keyup` event on the document or `keydown` event on the `VolumePanel`,
+     * looking for ESC, which hides the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        The keypress that triggered this event.
+     *
+     * @listens keydown | keyup
+     */
+    handleKeyPress(event: Event): void;
+}
+import Component from "../component.js";
+//# sourceMappingURL=volume-panel.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/control-bar/volume-panel.d.ts.map b/priv/static/video.js/types/control-bar/volume-panel.d.ts.map
new file mode 100644
index 0000000..0c8e0c5
--- /dev/null
+++ b/priv/static/video.js/types/control-bar/volume-panel.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"volume-panel.d.ts","sourceRoot":"","sources":["../../../src/js/control-bar/volume-panel.js"],"names":[],"mappings":";AAaA;;;;;GAKG;AACH;IAEE;;;;;;;;OAQG;IACH,wCA+BC;IAdC,yCAA2D;IAgB7D;;;;;OAKG;IACH,sBAEC;IAED;;;;;OAKG;IACH,wBAEC;IAED;;;;;;OAMG;IACH,0BAYC;IAED;;;;;OAKG;IACH,YAHY,OAAO,CAalB;IAED;;OAEG;IACH,gBAGC;IAED;;;;;;;;OAQG;IACH,gCALW,KAAK,QASf;IAED;;;;;;;;;OASG;IACH,uBALW,KAAK,QAQf;IAED;;;;;;;;;OASG;IACH,sBALW,KAAK,QAQf;IAED;;;;;;;;OAQG;IACH,sBALW,KAAK,QASf;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/debug.d.ts b/priv/static/video.js/types/debug.d.ts
new file mode 100644
index 0000000..11f8fc4
--- /dev/null
+++ b/priv/static/video.js/types/debug.d.ts
@@ -0,0 +1,3 @@
+export default videojs;
+import videojs from "./video";
+//# sourceMappingURL=debug.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/debug.d.ts.map b/priv/static/video.js/types/debug.d.ts.map
new file mode 100644
index 0000000..546d7fe
--- /dev/null
+++ b/priv/static/video.js/types/debug.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../src/js/debug.js"],"names":[],"mappings":""}
\ No newline at end of file
diff --git a/priv/static/video.js/types/error-display.d.ts b/priv/static/video.js/types/error-display.d.ts
new file mode 100644
index 0000000..a6bf352
--- /dev/null
+++ b/priv/static/video.js/types/error-display.d.ts
@@ -0,0 +1,28 @@
+export default ErrorDisplay;
+/**
+ * A display that indicates an error has occurred. This means that the video
+ * is unplayable.
+ *
+ * @extends ModalDialog
+ */
+declare class ErrorDisplay extends ModalDialog {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  { import('./player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player: import('./player').default, options?: any);
+    /**
+     * Gets the localized error message based on the `Player`s error.
+     *
+     * @return {string}
+     *         The `Player`s error message localized or an empty string.
+     */
+    content(): string;
+}
+import ModalDialog from "./modal-dialog";
+//# sourceMappingURL=error-display.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/error-display.d.ts.map b/priv/static/video.js/types/error-display.d.ts.map
new file mode 100644
index 0000000..24d8008
--- /dev/null
+++ b/priv/static/video.js/types/error-display.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"error-display.d.ts","sourceRoot":"","sources":["../../src/js/error-display.js"],"names":[],"mappings":";AAMA;;;;;GAKG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANa,OAAO,UAAU,EAAE,OAAO,iBAWtC;IAcD;;;;;OAKG;IACH,WAHY,MAAM,CAOjB;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/event-target.d.ts b/priv/static/video.js/types/event-target.d.ts
new file mode 100644
index 0000000..ab99296
--- /dev/null
+++ b/priv/static/video.js/types/event-target.d.ts
@@ -0,0 +1,131 @@
+export default EventTarget;
+/**
+ * A Custom DOM event.
+ */
+export type Event = CustomEvent;
+/**
+ * All event listeners should follow the following format.
+ */
+export type EventListener = () => any;
+/**
+ * `EventTarget` is a class that can have the same API as the DOM `EventTarget`. It
+ * adds shorthand functions that wrap around lengthy functions. For example:
+ * the `on` function is a wrapper around `addEventListener`.
+ *
+ * @see [EventTarget Spec]{@link https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget}
+ * @class EventTarget
+ */
+declare class EventTarget {
+    /**
+     * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+     * function that will get called when an event with a certain name gets triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to call with `EventTarget`s
+     */
+    on(type: string | string[], fn: Function): void;
+    addEventListener: any;
+    /**
+     * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+     * This makes it so that the `event listener` will no longer get called when the
+     * named event happens.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to remove.
+     */
+    off(type: string | string[], fn: Function): void;
+    /**
+     * This function will add an `event listener` that gets triggered only once. After the
+     * first trigger it will get removed. This is like adding an `event listener`
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    one(type: string | string[], fn: Function): void;
+    /**
+     * This function will add an `event listener` that gets triggered only once and is
+     * removed from all events. This is like adding an array of `event listener`s
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+     * first time it is triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    any(type: string | string[], fn: Function): void;
+    /**
+     * This function causes an event to happen. This will then cause any `event listeners`
+     * that are waiting for that event, to get called. If there are no `event listeners`
+     * for an event then nothing will happen.
+     *
+     * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+     * Trigger will also call the `on` + `uppercaseEventName` function.
+     *
+     * Example:
+     * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+     * `onClick` if it exists.
+     *
+     * @param {string|EventTarget~Event|Object} event
+     *        The name of the event, an `Event`, or an object with a key of type set to
+     *        an event name.
+     */
+    trigger(event: any): void;
+    queueTrigger(event: any): void;
+    /**
+     * A Custom DOM event.
+     *
+     * @typedef {CustomEvent} Event
+     * @see [Properties]{@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent}
+     */
+    /**
+     * All event listeners should follow the following format.
+     *
+     * @callback EventListener
+     * @this {EventTarget}
+     *
+     * @param {Event} event
+     *        the event that triggered this function
+     *
+     * @param {Object} [hash]
+     *        hash of data sent during the event
+     */
+    /**
+     * An object containing event names as keys and booleans as values.
+     *
+     * > NOTE: If an event name is set to a true value here {@link EventTarget#trigger}
+     *         will have extra functionality. See that function for more information.
+     *
+     * @property EventTarget.prototype.allowedEvents_
+     * @protected
+     */
+    protected allowedEvents_: {};
+    /**
+     * An alias of {@link EventTarget#off}. Allows `EventTarget` to mimic
+     * the standard DOM API.
+     *
+     * @function
+     * @see {@link EventTarget#off}
+     */
+    removeEventListener: (type: string | string[], fn: Function) => void;
+    /**
+     * An alias of {@link EventTarget#trigger}. Allows `EventTarget` to mimic
+     * the standard DOM API.
+     *
+     * @function
+     * @see {@link EventTarget#trigger}
+     */
+    dispatchEvent: (event: any) => void;
+}
+//# sourceMappingURL=event-target.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/event-target.d.ts.map b/priv/static/video.js/types/event-target.d.ts.map
new file mode 100644
index 0000000..40c9429
--- /dev/null
+++ b/priv/static/video.js/types/event-target.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"event-target.d.ts","sourceRoot":"","sources":["../../src/js/event-target.js"],"names":[],"mappings":";;;;oBAmKa,WAAW;;;;;AA3JxB;;;;;;;GAOG;AACH;IACE;;;;;;;;;OASG;IACH,SANW,MAAM,GAAC,MAAM,EAAE,sBAczB;IAHC,sBAAiC;IAInC;;;;;;;;;;OAUG;IACH,UANW,MAAM,GAAC,MAAM,EAAE,sBAQzB;IACD;;;;;;;;;;OAUG;IACH,UANW,MAAM,GAAC,MAAM,EAAE,sBAczB;IACD;;;;;;;;;;;OAWG;IACH,UANW,MAAM,GAAC,MAAM,EAAE,sBAczB;IACD;;;;;;;;;;;;;;;OAeG;IACH,0BAkBC;IACD,+BA+BC;IAGH;;;;;OAKG;IAEH;;;;;;;;;;;OAWG;IAEH;;;;;;;;OAQG;IACH,6BAAoC;IAWpC;;;;;;OAMG;IACH,4BAtKa,MAAM,GAAC,MAAM,EAAE,wBAsKa;IAEzC;;;;;;OAMG;IACH,oCAAmC;CA1DlC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/fullscreen-api.d.ts b/priv/static/video.js/types/fullscreen-api.d.ts
new file mode 100644
index 0000000..b631368
--- /dev/null
+++ b/priv/static/video.js/types/fullscreen-api.d.ts
@@ -0,0 +1,10 @@
+export default FullscreenApi;
+/**
+ * Store the browser-specific methods for the fullscreen API.
+ *
+ * @type {Object}
+ * @see [Specification]{@link https://fullscreen.spec.whatwg.org}
+ * @see [Map Approach From Screenfull.js]{@link https://github.com/sindresorhus/screenfull.js}
+ */
+declare const FullscreenApi: any;
+//# sourceMappingURL=fullscreen-api.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/fullscreen-api.d.ts.map b/priv/static/video.js/types/fullscreen-api.d.ts.map
new file mode 100644
index 0000000..30bf9fe
--- /dev/null
+++ b/priv/static/video.js/types/fullscreen-api.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-api.d.ts","sourceRoot":"","sources":["../../src/js/fullscreen-api.js"],"names":[],"mappings":";AAMA;;;;;;GAMG;AACH,iCAEE"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/index.d.ts b/priv/static/video.js/types/index.d.ts
new file mode 100644
index 0000000..ca184a2
--- /dev/null
+++ b/priv/static/video.js/types/index.d.ts
@@ -0,0 +1,3 @@
+export default videojs;
+import videojs from "./video";
+//# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/index.d.ts.map b/priv/static/video.js/types/index.d.ts.map
new file mode 100644
index 0000000..71ad5e7
--- /dev/null
+++ b/priv/static/video.js/types/index.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/js/index.js"],"names":[],"mappings":""}
\ No newline at end of file
diff --git a/priv/static/video.js/types/live-tracker.d.ts b/priv/static/video.js/types/live-tracker.d.ts
new file mode 100644
index 0000000..326b54c
--- /dev/null
+++ b/priv/static/video.js/types/live-tracker.d.ts
@@ -0,0 +1,170 @@
+export default LiveTracker;
+/**
+ * A class for checking live current time and determining when the player
+ * is at or behind the live edge.
+ */
+declare class LiveTracker extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {number} [options.trackingThreshold=20]
+     *        Number of seconds of live window (seekableEnd - seekableStart) that
+     *        media needs to have before the liveui will be shown.
+     *
+     * @param {number} [options.liveTolerance=15]
+     *        Number of seconds behind live that we have to be
+     *        before we will be considered non-live. Note that this will only
+     *        be used when playing at the live edge. This allows large seekable end
+     *        changes to not effect whether we are live or not.
+     */
+    constructor(player: import('./player').default, options?: {
+        trackingThreshold?: number;
+        liveTolerance?: number;
+    });
+    trackLiveHandler_: () => void;
+    handlePlay_: (e: any) => void;
+    handleFirstTimeupdate_: (e: any) => void;
+    handleSeeked_: (e: any) => void;
+    seekToLiveEdge_: (e: any) => void;
+    /**
+     * all the functionality for tracking when seek end changes
+     * and for tracking how far past seek end we should be
+     */
+    trackLive_(): void;
+    lastTime_: number;
+    pastSeekEnd_: number;
+    behindLiveEdge_: any;
+    /**
+     * handle a durationchange event on the player
+     * and start/stop tracking accordingly.
+     */
+    handleDurationchange(): void;
+    /**
+     * start/stop tracking
+     */
+    toggleTracking(): void;
+    /**
+     * start tracking live playback
+     */
+    startTracking(): void;
+    timeupdateSeen_: any;
+    trackingInterval_: number;
+    /**
+     * handle the first timeupdate on the player if it wasn't already playing
+     * when live tracker started tracking.
+     */
+    handleFirstTimeupdate(): void;
+    /**
+     * Keep track of what time a seek starts, and listen for seeked
+     * to find where a seek ends.
+     */
+    handleSeeked(): void;
+    seekedBehindLive_: boolean;
+    nextSeekedFromUser_: boolean;
+    /**
+     * handle the first play on the player, and make sure that we seek
+     * right to the live edge.
+     */
+    handlePlay(): void;
+    /**
+     * Stop tracking, and set all internal variables to
+     * their initial value.
+     */
+    reset_(): void;
+    lastSeekEnd_: any;
+    /**
+     * The next seeked event is from the user. Meaning that any seek
+     * > 2s behind live will be considered behind live for real and
+     * liveTolerance will be ignored.
+     */
+    nextSeekedFromUser(): void;
+    /**
+     * stop tracking live playback
+     */
+    stopTracking(): void;
+    /**
+     * A helper to get the player seekable end
+     * so that we don't have to null check everywhere
+     *
+     * @return {number}
+     *         The furthest seekable end or Infinity.
+     */
+    seekableEnd(): number;
+    /**
+     * A helper to get the player seekable start
+     * so that we don't have to null check everywhere
+     *
+     * @return {number}
+     *         The earliest seekable start or 0.
+     */
+    seekableStart(): number;
+    /**
+     * Get the live time window aka
+     * the amount of time between seekable start and
+     * live current time.
+     *
+     * @return {number}
+     *         The amount of seconds that are seekable in
+     *         the live video.
+     */
+    liveWindow(): number;
+    /**
+     * Determines if the player is live, only checks if this component
+     * is tracking live playback or not
+     *
+     * @return {boolean}
+     *         Whether liveTracker is tracking
+     */
+    isLive(): boolean;
+    /**
+     * Determines if currentTime is at the live edge and won't fall behind
+     * on each seekableendchange
+     *
+     * @return {boolean}
+     *         Whether playback is at the live edge
+     */
+    atLiveEdge(): boolean;
+    /**
+     * get what we expect the live current time to be
+     *
+     * @return {number}
+     *         The expected live current time
+     */
+    liveCurrentTime(): number;
+    /**
+     * The number of seconds that have occurred after seekable end
+     * changed. This will be reset to 0 once seekable end changes.
+     *
+     * @return {number}
+     *         Seconds past the current seekable end
+     */
+    pastSeekEnd(): number;
+    /**
+     * If we are currently behind the live edge, aka currentTime will be
+     * behind on a seekableendchange
+     *
+     * @return {boolean}
+     *         If we are behind the live edge
+     */
+    behindLiveEdge(): boolean;
+    /**
+     * Whether live tracker is currently tracking or not.
+     */
+    isTracking(): boolean;
+    /**
+     * Seek to the live edge if we are behind the live edge
+     */
+    seekToLiveEdge(): void;
+    /**
+     * Dispose of liveTracker
+     */
+    dispose(): void;
+}
+import Component from "./component.js";
+//# sourceMappingURL=live-tracker.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/live-tracker.d.ts.map b/priv/static/video.js/types/live-tracker.d.ts.map
new file mode 100644
index 0000000..495f205
--- /dev/null
+++ b/priv/static/video.js/types/live-tracker.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"live-tracker.d.ts","sourceRoot":"","sources":["../../src/js/live-tracker.js"],"names":[],"mappings":";AAaA;;;GAGG;AACH;IAEE;;;;;;;;;;;;;;;;;;OAkBG;IACH,oBAhBY,OAAO,UAAU,EAAE,OAAO;QAMV,iBAAiB,GAAlC,MAAM;QAIW,aAAa,GAA9B,MAAM;OAwBhB;IAZC,8BAAgD;IAChD,8BAA4C;IAC5C,yCAAkE;IAClE,gCAAgD;IAChD,kCAAoD;IAUtD;;;OAGG;IACH,mBAqCC;IA1BC,kBAAwB;IAExB,qBAAkD;IAqBhD,qBAA+B;IAKnC;;;OAGG;IACH,6BAEC;IAED;;OAEG;IACH,uBAUC;IAED;;OAEG;IACH,sBAuBC;IAdG,qBAAgD;IAGlD,0BAA6F;IAa/F;;;OAGG;IACH,8BAGC;IAED;;;OAGG;IACH,qBAMC;IAHC,2BAAiE;IACjE,6BAAgC;IAIlC;;;OAGG;IACH,mBAEC;IAED;;;OAGG;IACH,eAiBC;IAdC,kBAAsB;IAgBxB;;;;OAIG;IACH,2BAEC;IAED;;OAEG;IACH,qBAMC;IAED;;;;;;OAMG;IACH,eAHY,MAAM,CAejB;IAED;;;;;;OAMG;IACH,iBAHY,MAAM,CAejB;IAED;;;;;;;;OAQG;IACH,cAJY,MAAM,CAajB;IAED;;;;;;OAMG;IACH,UAHY,OAAO,CAKlB;IAED;;;;;;OAMG;IACH,cAHY,OAAO,CAKlB;IAED;;;;;OAKG;IACH,mBAHY,MAAM,CAKjB;IAED;;;;;;OAMG;IACH,eAHY,MAAM,CAWjB;IAED;;;;;;OAMG;IACH,kBAHY,OAAO,CAKlB;IAED;;OAEG;IACH,sBAEC;IAED;;OAEG;IACH,uBAQC;IAED;;OAEG;IACH,gBAGC;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/loading-spinner.d.ts b/priv/static/video.js/types/loading-spinner.d.ts
new file mode 100644
index 0000000..f575057
--- /dev/null
+++ b/priv/static/video.js/types/loading-spinner.d.ts
@@ -0,0 +1,17 @@
+export default LoadingSpinner;
+/**
+ * A loading spinner for use during waiting/loading events.
+ *
+ * @extends Component
+ */
+declare class LoadingSpinner extends Component {
+    /**
+     * Create the `LoadingSpinner`s DOM element.
+     *
+     * @return {Element}
+     *         The dom element that gets created.
+     */
+    createEl(): Element;
+}
+import Component from "./component";
+//# sourceMappingURL=loading-spinner.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/loading-spinner.d.ts.map b/priv/static/video.js/types/loading-spinner.d.ts.map
new file mode 100644
index 0000000..4defc00
--- /dev/null
+++ b/priv/static/video.js/types/loading-spinner.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"loading-spinner.d.ts","sourceRoot":"","sources":["../../src/js/loading-spinner.js"],"names":[],"mappings":";AAMA;;;;GAIG;AACH;IAEE;;;;;OAKG;IACH,YAHY,OAAO,CAmBlB;CAUF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/media-error.d.ts b/priv/static/video.js/types/media-error.d.ts
new file mode 100644
index 0000000..5afa267
--- /dev/null
+++ b/priv/static/video.js/types/media-error.d.ts
@@ -0,0 +1,134 @@
+export default MediaError;
+/**
+ * An object containing an error type, as well as other information regarding the error.
+ */
+export type ErrorMetadata = {
+    [key: string]: any;
+    errorType: string;
+};
+/**
+ * A Custom `MediaError` class which mimics the standard HTML5 `MediaError` class.
+ *
+ * @param {number|string|Object|MediaError} value
+ *        This can be of multiple types:
+ *        - number: should be a standard error code
+ *        - string: an error message (the code will be 0)
+ *        - Object: arbitrary properties
+ *        - `MediaError` (native): used to populate a video.js `MediaError` object
+ *        - `MediaError` (video.js): will return itself if it's already a
+ *          video.js `MediaError` object.
+ *
+ * @see [MediaError Spec]{@link https://dev.w3.org/html5/spec-author-view/video.html#mediaerror}
+ * @see [Encrypted MediaError Spec]{@link https://www.w3.org/TR/2013/WD-encrypted-media-20130510/#error-codes}
+ *
+ * @class MediaError
+ */
+declare function MediaError(value: number | string | any | MediaError): MediaError;
+declare class MediaError {
+    /**
+     * A Custom `MediaError` class which mimics the standard HTML5 `MediaError` class.
+     *
+     * @param {number|string|Object|MediaError} value
+     *        This can be of multiple types:
+     *        - number: should be a standard error code
+     *        - string: an error message (the code will be 0)
+     *        - Object: arbitrary properties
+     *        - `MediaError` (native): used to populate a video.js `MediaError` object
+     *        - `MediaError` (video.js): will return itself if it's already a
+     *          video.js `MediaError` object.
+     *
+     * @see [MediaError Spec]{@link https://dev.w3.org/html5/spec-author-view/video.html#mediaerror}
+     * @see [Encrypted MediaError Spec]{@link https://www.w3.org/TR/2013/WD-encrypted-media-20130510/#error-codes}
+     *
+     * @class MediaError
+     */
+    constructor(value: number | string | any | MediaError);
+    code: number;
+    message: string;
+    /**
+     * An optional status code that can be set by plugins to allow even more detail about
+     * the error. For example a plugin might provide a specific HTTP status code and an
+     * error message for that code. Then when the plugin gets that error this class will
+     * know how to display an error message for it. This allows a custom message to show
+     * up on the `Player` error overlay.
+     *
+     * @type {Array}
+     */
+    status: any[];
+    /**
+     * An object containing an error type, as well as other information regarding the error.
+     *
+     * @typedef {{errorType: string, [key: string]: any}} ErrorMetadata
+     */
+    /**
+     * An optional object to give more detail about the error. This can be used to give
+     * a higher level of specificity to an error versus the more generic MediaError codes.
+     * `metadata` expects an `errorType` string that should align with the values from videojs.Error.
+     *
+     * @type {ErrorMetadata}
+     */
+    metadata: ErrorMetadata;
+    /**
+     * W3C error code for any custom error.
+     *
+     * @member MediaError.MEDIA_ERR_CUSTOM
+     * @constant {number}
+     * @default 0
+     */
+    MEDIA_ERR_CUSTOM: number;
+    /**
+     * W3C error code for media error aborted.
+     *
+     * @member MediaError.MEDIA_ERR_ABORTED
+     * @constant {number}
+     * @default 1
+     */
+    MEDIA_ERR_ABORTED: number;
+    /**
+     * W3C error code for any network error.
+     *
+     * @member MediaError.MEDIA_ERR_NETWORK
+     * @constant {number}
+     * @default 2
+     */
+    MEDIA_ERR_NETWORK: number;
+    /**
+     * W3C error code for any decoding error.
+     *
+     * @member MediaError.MEDIA_ERR_DECODE
+     * @constant {number}
+     * @default 3
+     */
+    MEDIA_ERR_DECODE: number;
+    /**
+     * W3C error code for any time that a source is not supported.
+     *
+     * @member MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
+     * @constant {number}
+     * @default 4
+     */
+    MEDIA_ERR_SRC_NOT_SUPPORTED: number;
+    /**
+     * W3C error code for any time that a source is encrypted.
+     *
+     * @member MediaError.MEDIA_ERR_ENCRYPTED
+     * @constant {number}
+     * @default 5
+     */
+    MEDIA_ERR_ENCRYPTED: number;
+}
+declare namespace MediaError {
+    /**
+     * *
+     */
+    type errorTypes = any[];
+    const errorTypes: string[];
+    const defaultMessages: any[];
+    const MEDIA_ERR_CUSTOM: number;
+    const MEDIA_ERR_ABORTED: number;
+    const MEDIA_ERR_NETWORK: number;
+    const MEDIA_ERR_DECODE: number;
+    const MEDIA_ERR_SRC_NOT_SUPPORTED: number;
+    const MEDIA_ERR_ENCRYPTED: number;
+}
+//# sourceMappingURL=media-error.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/media-error.d.ts.map b/priv/static/video.js/types/media-error.d.ts.map
new file mode 100644
index 0000000..987b139
--- /dev/null
+++ b/priv/static/video.js/types/media-error.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"media-error.d.ts","sourceRoot":"","sources":["../../src/js/media-error.js"],"names":[],"mappings":";;;;;;eAgFyB,MAAM;;AA3E/B;;;;;;;;;;;;;;;;GAgBG;AACH,mCAdW,MAAM,GAAC,MAAM,SAAQ,UAAU,cAyCzC;;IA5CD;;;;;;;;;;;;;;;;OAgBG;IACH,mBAdW,MAAM,GAAC,MAAM,SAAQ,UAAU,EAyCzC;IAlBG,aAAiB;IAGjB,gBAAoB;IAgCxB;;;;;;;;OAQG;IACH,cAA2B;IAE3B;;;;OAIG;IAEH;;;;;;OAMG;IACH,UAFU,aAAa,CAEM;IA+C7B;;;;;;OAMG;IACH,yBAAqC;IAWrC;;;;;;OAMG;IACH,0BAAsC;IAWtC;;;;;;OAMG;IACH,0BAAsC;IAWtC;;;;;;OAMG;IACH,yBAAqC;IAWrC;;;;;;OAMG;IACH,oCAAgD;IAWhD;;;;;;OAMG;IACH,4BAAwC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/menu/menu-button.d.ts b/priv/static/video.js/types/menu/menu-button.d.ts
new file mode 100644
index 0000000..249874b
--- /dev/null
+++ b/priv/static/video.js/types/menu/menu-button.d.ts
@@ -0,0 +1,177 @@
+export default MenuButton;
+/**
+ * A `MenuButton` class for any popup {@link Menu}.
+ *
+ * @extends Component
+ */
+declare class MenuButton extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player: import('../player').default, options?: any);
+    menuButton_: Button;
+    enabled_: boolean;
+    handleMenuKeyUp_: (e: any) => void;
+    /**
+     * Update the menu based on the current state of its items.
+     */
+    update(): void;
+    menu: Menu;
+    /**
+     * Track the state of the menu button
+     *
+     * @type {Boolean}
+     * @private
+     */
+    private buttonPressed_;
+    /**
+     * Create the menu and add all items to it.
+     *
+     * @return {Menu}
+     *         The constructed menu
+     */
+    createMenu(): Menu;
+    /**
+     * Hide the menu if the number of items is less than or equal to this threshold. This defaults
+     * to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list
+     * it here because every time we run `createMenu` we need to reset the value.
+     *
+     * @protected
+     * @type {Number}
+     */
+    protected hideThreshold_: number;
+    items: void;
+    /**
+     * Create the list of menu items. Specific to each subclass.
+     *
+     * @abstract
+     */
+    createItems(): void;
+    /**
+     * Create the `MenuButtons`s DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(): Element;
+    /**
+     * Overwrites the `setIcon` method from `Component`.
+     * In this case, we want the icon to be appended to the menuButton.
+     *
+     * @param {string} name
+     *         The icon name to be added.
+     */
+    setIcon(name: string): void;
+    /**
+     * Allow sub components to stack CSS class names for the wrapper element
+     *
+     * @return {string}
+     *         The constructed wrapper DOM `className`
+     */
+    buildWrapperCSSClass(): string;
+    /**
+     * Get or set the localized control text that will be used for accessibility.
+     *
+     * > NOTE: This will come from the internal `menuButton_` element.
+     *
+     * @param {string} [text]
+     *        Control text for element.
+     *
+     * @param {Element} [el=this.menuButton_.el()]
+     *        Element to set the title on.
+     *
+     * @return {string}
+     *         - The control text when getting
+     */
+    controlText(text?: string, el?: Element): string;
+    /**
+     * Dispose of the `menu-button` and all child components.
+     */
+    dispose(): void;
+    /**
+     * Handle a click on a `MenuButton`.
+     * See {@link ClickableComponent#handleClick} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event: Event): void;
+    /**
+     * Handle `mouseleave` for `MenuButton`.
+     *
+     * @param {Event} event
+     *        The `mouseleave` event that caused this function to be called.
+     *
+     * @listens mouseleave
+     */
+    handleMouseLeave(event: Event): void;
+    /**
+     * Handle tab, escape, down arrow, and up arrow keys for `MenuButton`. See
+     * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event: Event): void;
+    /**
+     * Handle a `keyup` event on a `MenuButton`. The listener for this is added in
+     * the constructor.
+     *
+     * @param {Event} event
+     *        Key press event
+     *
+     * @listens keyup
+     */
+    handleMenuKeyUp(event: Event): void;
+    /**
+     * This method name now delegates to `handleSubmenuKeyDown`. This means
+     * anyone calling `handleSubmenuKeyPress` will not see their method calls
+     * stop working.
+     *
+     * @param {Event} event
+     *        The event that caused this function to be called.
+     */
+    handleSubmenuKeyPress(event: Event): void;
+    /**
+     * Handle a `keydown` event on a sub-menu. The listener for this is added in
+     * the constructor.
+     *
+     * @param {Event} event
+     *        Key press event
+     *
+     * @listens keydown
+     */
+    handleSubmenuKeyDown(event: Event): void;
+    /**
+     * Put the current `MenuButton` into a pressed state.
+     */
+    pressButton(): void;
+    /**
+     * Take the current `MenuButton` out of a pressed state.
+     */
+    unpressButton(): void;
+    /**
+     * Disable the `MenuButton`. Don't allow it to be clicked.
+     */
+    disable(): void;
+    /**
+     * Enable the `MenuButton`. Allow it to be clicked.
+     */
+    enable(): void;
+}
+import Component from "../component.js";
+import Button from "../button.js";
+import Menu from "./menu.js";
+//# sourceMappingURL=menu-button.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/menu/menu-button.d.ts.map b/priv/static/video.js/types/menu/menu-button.d.ts.map
new file mode 100644
index 0000000..5d76be8
--- /dev/null
+++ b/priv/static/video.js/types/menu/menu-button.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"menu-button.d.ts","sourceRoot":"","sources":["../../../src/js/menu/menu-button.js"],"names":[],"mappings":";AAaA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,WAAW,EAAE,OAAO,iBAwCtC;IA/BC,oBAA8C;IAe9C,kBAAoB;IAIpB,mCAAsD;IAcxD;;OAEG;IACH,eA4BC;IApBC,WAAgB;IAGhB;;;;;OAKG;IACH,uBAA2B;IAa7B;;;;;OAKG;IACH,cAHY,IAAI,CAuCf;IAjCC;;;;;;;OAOG;IACH,iCAAuB;IAevB,YAA+B;IAYjC;;;;OAIG;IACH,oBAAgB;IAEhB;;;;;OAKG;IACH,YAHY,OAAO,CAQlB;IAED;;;;;;OAMG;IACH,cAHW,MAAM,QAKhB;IAED;;;;;OAKG;IACH,wBAHY,MAAM,CAiBjB;IAqBD;;;;;;;;;;;;;OAaG;IACH,mBATW,MAAM,OAGN,OAAO,GAGN,MAAM,CAKjB;IAED;;OAEG;IACH,gBAGC;IAED;;;;;;;;;;OAUG;IACH,mBAPW,KAAK,QAaf;IAED;;;;;;;OAOG;IACH,wBALW,KAAK,QAQf;IAgBD;;;;;;;;OAQG;IACH,qBALW,KAAK,QA0Bf;IAED;;;;;;;;OAQG;IACH,uBALW,KAAK,QAUf;IAED;;;;;;;OAOG;IACH,6BAHW,KAAK,QAKf;IAED;;;;;;;;OAQG;IACH,4BALW,KAAK,QAuBf;IAED;;OAEG;IACH,oBAgBC;IAED;;OAEG;IACH,sBAOC;IAED;;OAEG;IACH,gBAOC;IAED;;OAEG;IACH,eAKC;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/menu/menu-item.d.ts b/priv/static/video.js/types/menu/menu-item.d.ts
new file mode 100644
index 0000000..7c07303
--- /dev/null
+++ b/priv/static/video.js/types/menu/menu-item.d.ts
@@ -0,0 +1,44 @@
+export default MenuItem;
+/**
+ * The component for a menu item. `<li>`
+ *
+ * @extends ClickableComponent
+ */
+declare class MenuItem extends ClickableComponent {
+    /**
+     * Creates an instance of the this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     *
+     */
+    constructor(player: import('../player').default, options?: any);
+    selectable: any;
+    isSelected_: any;
+    multiSelectable: any;
+    nonIconControl: boolean;
+    /**
+     * Any click on a `MenuItem` puts it into the selected state.
+     * See {@link ClickableComponent#handleClick} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event: Event): void;
+    /**
+     * Set the state for this menu item as selected or not.
+     *
+     * @param {boolean} selected
+     *        if the menu item is selected or not
+     */
+    selected(selected: boolean): void;
+}
+import ClickableComponent from "../clickable-component.js";
+//# sourceMappingURL=menu-item.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/menu/menu-item.d.ts.map b/priv/static/video.js/types/menu/menu-item.d.ts.map
new file mode 100644
index 0000000..dbc71ea
--- /dev/null
+++ b/priv/static/video.js/types/menu/menu-item.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../src/js/menu/menu-item.js"],"names":[],"mappings":";AASA;;;;GAIG;AACH;IAEE;;;;;;;;;OASG;IACH,oBAPY,OAAO,WAAW,EAAE,OAAO,iBAyBtC;IAfC,gBAAoC;IACpC,iBAA4C;IAC5C,qBAA8C;IAgC9C,wBAA0B;IAuC5B;;;;;;;;;;OAUG;IACH,mBAPW,KAAK,QASf;IAED;;;;;OAKG;IACH,mBAHW,OAAO,QAoBjB;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/menu/menu-keys.d.ts b/priv/static/video.js/types/menu/menu-keys.d.ts
new file mode 100644
index 0000000..df63177
--- /dev/null
+++ b/priv/static/video.js/types/menu/menu-keys.d.ts
@@ -0,0 +1,19 @@
+/**
+ * All keys used for operation of a menu (`MenuButton`, `Menu`, and `MenuItem`)
+ * Note that 'Enter' and 'Space' are not included here (otherwise they would
+ * prevent the `MenuButton` and `MenuItem` from being keyboard-clickable)
+ */
+export type MenuKeys = any;
+/**
+ * @file menu-keys.js
+ */
+/**
+  * All keys used for operation of a menu (`MenuButton`, `Menu`, and `MenuItem`)
+  * Note that 'Enter' and 'Space' are not included here (otherwise they would
+  * prevent the `MenuButton` and `MenuItem` from being keyboard-clickable)
+ *
+  * @typedef MenuKeys
+  * @array
+  */
+export const MenuKeys: string[];
+//# sourceMappingURL=menu-keys.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/menu/menu-keys.d.ts.map b/priv/static/video.js/types/menu/menu-keys.d.ts.map
new file mode 100644
index 0000000..13b598f
--- /dev/null
+++ b/priv/static/video.js/types/menu/menu-keys.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"menu-keys.d.ts","sourceRoot":"","sources":["../../../src/js/menu/menu-keys.js"],"names":[],"mappings":";;;;;;AAAA;;GAEG;AAEH;;;;;;;IAOI;AACJ,gCAOE"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/menu/menu.d.ts b/priv/static/video.js/types/menu/menu.d.ts
new file mode 100644
index 0000000..cd9331d
--- /dev/null
+++ b/priv/static/video.js/types/menu/menu.d.ts
@@ -0,0 +1,102 @@
+export default Menu;
+/**
+ * The Menu component is used to build popup menus, including subtitle and
+ * captions selection menus.
+ *
+ * @extends Component
+ */
+declare class Menu extends Component {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        the player that this component should attach to
+     *
+     * @param {Object} [options]
+     *        Object of option names and values
+     *
+     */
+    constructor(player: import('../player').default, options?: any);
+    menuButton_: any;
+    focusedChild_: number;
+    boundHandleBlur_: (e: any) => void;
+    boundHandleTapClick_: (e: any) => void;
+    /**
+     * Add event listeners to the {@link MenuItem}.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem` to add listeners to.
+     *
+     */
+    addEventListenerForItem(component: any): void;
+    /**
+     * Remove event listeners from the {@link MenuItem}.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem` to remove listeners.
+     *
+     */
+    removeEventListenerForItem(component: any): void;
+    /**
+     * This method will be called indirectly when the component has been added
+     * before the component adds to the new menu instance by `addItem`.
+     * In this case, the original menu instance will remove the component
+     * by calling `removeChild`.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem`
+     */
+    removeChild(component: any): void;
+    /**
+     * Add a {@link MenuItem} to the menu.
+     *
+     * @param {Object|string} component
+     *        The name or instance of the `MenuItem` to add.
+     *
+     */
+    addItem(component: any | string): void;
+    /**
+     * Create the `Menu`s DOM element.
+     *
+     * @return {Element}
+     *         the element that was created
+     */
+    createEl(): Element;
+    contentEl_: Element;
+    dispose(): void;
+    /**
+     * Called when a `MenuItem` loses focus.
+     *
+     * @param {Event} event
+     *        The `blur` event that caused this function to be called.
+     *
+     * @listens blur
+     */
+    handleBlur(event: Event): void;
+    /**
+     * Called when a `MenuItem` gets clicked or tapped.
+     *
+     * @param {Event} event
+     *        The `click` or `tap` event that caused this function to be called.
+     *
+     * @listens click,tap
+     */
+    handleTapClick(event: Event): void;
+    /**
+     * Move to next (lower) menu item for keyboard users.
+     */
+    stepForward(): void;
+    /**
+     * Move to previous (higher) menu item for keyboard users.
+     */
+    stepBack(): void;
+    /**
+     * Set focus on a {@link MenuItem} in the `Menu`.
+     *
+     * @param {Object|string} [item=0]
+     *        Index of child item set focus on.
+     */
+    focus(item?: any | string): void;
+}
+import Component from "../component.js";
+//# sourceMappingURL=menu.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/menu/menu.d.ts.map b/priv/static/video.js/types/menu/menu.d.ts.map
new file mode 100644
index 0000000..97e1eab
--- /dev/null
+++ b/priv/static/video.js/types/menu/menu.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/js/menu/menu.js"],"names":[],"mappings":";AASA;;;;;GAKG;AACH;IAEE;;;;;;;;;OASG;IACH,oBAPY,OAAO,WAAW,EAAE,OAAO,iBAqBtC;IAVG,iBAAqC;IAGvC,sBAAuB;IAKvB,mCAAiD;IACjD,uCAAyD;IAG3D;;;;;;OAMG;IACH,8CAOC;IAED;;;;;;OAMG;IACH,iDAOC;IAED;;;;;;;;OAQG;IACH,kCAOC;IAED;;;;;;OAMG;IACH,mBAJW,MAAO,MAAM,QAUvB;IAED;;;;;OAKG;IACH,YAHY,OAAO,CA2BlB;IArBC,oBAEE;IAqBJ,gBAMC;IAED;;;;;;;OAOG;IACH,kBALW,KAAK,QAkBf;IAED;;;;;;;OAOG;IACH,sBALW,KAAK,QA4Bf;IA0BD;;OAEG;IACH,oBAOC;IAED;;OAEG;IACH,iBAOC;IAED;;;;;OAKG;IACH,aAHW,MAAO,MAAM,QAsBvB;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/mixins/evented.d.ts b/priv/static/video.js/types/mixins/evented.d.ts
new file mode 100644
index 0000000..d1d4c3f
--- /dev/null
+++ b/priv/static/video.js/types/mixins/evented.d.ts
@@ -0,0 +1,41 @@
+export default evented;
+/**
+ * Applies {@link module:evented~EventedMixin|EventedMixin} to a target object.
+ *
+ * @param  {Object} target
+ *         The object to which to add event methods.
+ *
+ * @param  {Object} [options={}]
+ *         Options for customizing the mixin behavior.
+ *
+ * @param  {string} [options.eventBusKey]
+ *         By default, adds a `eventBusEl_` DOM element to the target object,
+ *         which is used as an event bus. If the target object already has a
+ *         DOM element that should be used, pass its key here.
+ *
+ * @return {Object}
+ *         The target object.
+ */
+declare function evented(target: any, options?: {
+    eventBusKey?: string;
+}): any;
+/**
+ * Returns whether or not an object has had the evented mixin applied.
+ *
+ * @param  {Object} object
+ *         An object to test.
+ *
+ * @return {boolean}
+ *         Whether or not the object appears to be evented.
+ */
+export function isEvented(object: any): boolean;
+/**
+ * Adds a callback to run after the evented mixin applied.
+ *
+ * @param  {Object} target
+ *         An object to Add
+ * @param  {Function} callback
+ *         The callback to run.
+ */
+export function addEventedCallback(target: any, callback: Function): void;
+//# sourceMappingURL=evented.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/mixins/evented.d.ts.map b/priv/static/video.js/types/mixins/evented.d.ts.map
new file mode 100644
index 0000000..a7cd5b9
--- /dev/null
+++ b/priv/static/video.js/types/mixins/evented.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"evented.d.ts","sourceRoot":"","sources":["../../../src/js/mixins/evented.js"],"names":[],"mappings":";AAqcA;;;;;;;;;;;;;;;;GAgBG;AACH;IAR6B,WAAW,GAA5B,MAAM;QA2CjB;AA1dD;;;;;;;;GAQG;AACH,wCAHY,OAAO,CAM0D;AAE7E;;;;;;;GAOG;AACH,0EASC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/mixins/stateful.d.ts b/priv/static/video.js/types/mixins/stateful.d.ts
new file mode 100644
index 0000000..a2ee3ad
--- /dev/null
+++ b/priv/static/video.js/types/mixins/stateful.d.ts
@@ -0,0 +1,21 @@
+export default stateful;
+/**
+ * Applies {@link module:stateful~StatefulMixin|StatefulMixin} to a target
+ * object.
+ *
+ * If the target object is {@link module:evented|evented} and has a
+ * `handleStateChanged` method, that method will be automatically bound to the
+ * `statechanged` event on itself.
+ *
+ * @param   {Object} target
+ *          The object to be made stateful.
+ *
+ * @param   {Object} [defaultState]
+ *          A default set of properties to populate the newly-stateful object's
+ *          `state` property.
+ *
+ * @return {Object}
+ *          Returns the `target`.
+ */
+declare function stateful(target: any, defaultState?: any): any;
+//# sourceMappingURL=stateful.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/mixins/stateful.d.ts.map b/priv/static/video.js/types/mixins/stateful.d.ts.map
new file mode 100644
index 0000000..8e6be33
--- /dev/null
+++ b/priv/static/video.js/types/mixins/stateful.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"stateful.d.ts","sourceRoot":"","sources":["../../../src/js/mixins/stateful.js"],"names":[],"mappings":";AAsFA;;;;;;;;;;;;;;;;;GAiBG;AACH,gEAaC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/modal-dialog.d.ts b/priv/static/video.js/types/modal-dialog.d.ts
new file mode 100644
index 0000000..2a81617
--- /dev/null
+++ b/priv/static/video.js/types/modal-dialog.d.ts
@@ -0,0 +1,193 @@
+export default ModalDialog;
+/**
+ * The `ModalDialog` displays over the video and its controls, which blocks
+ * interaction with the player until it is closed.
+ *
+ * Modal dialogs include a "Close" button and will close when that button
+ * is activated - or when ESC is pressed anywhere.
+ *
+ * @extends Component
+ */
+declare class ModalDialog extends Component {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param { import('./utils/dom').ContentDescriptor} [options.content=undefined]
+     *        Provide customized content for this modal.
+     *
+     * @param {string} [options.description]
+     *        A text description for the modal, primarily for accessibility.
+     *
+     * @param {boolean} [options.fillAlways=false]
+     *        Normally, modals are automatically filled only the first time
+     *        they open. This tells the modal to refresh its content
+     *        every time it opens.
+     *
+     * @param {string} [options.label]
+     *        A text label for the modal, primarily for accessibility.
+     *
+     * @param {boolean} [options.pauseOnOpen=true]
+     *        If `true`, playback will will be paused if playing when
+     *        the modal opens, and resumed when it closes.
+     *
+     * @param {boolean} [options.temporary=true]
+     *        If `true`, the modal can only be opened once; it will be
+     *        disposed as soon as it's closed.
+     *
+     * @param {boolean} [options.uncloseable=false]
+     *        If `true`, the user will not be able to close the modal
+     *        through the UI in the normal ways. Programmatic closing is
+     *        still possible.
+     */
+    constructor(player: import('./player').default, options?: {
+        content?: import('./utils/dom').ContentDescriptor;
+        description?: string;
+        fillAlways?: boolean;
+        label?: string;
+        pauseOnOpen?: boolean;
+        temporary?: boolean;
+        uncloseable?: boolean;
+    });
+    handleKeyDown_: (e: any) => void;
+    close_: (e: any) => void;
+    opened_: boolean;
+    hasBeenOpened_: boolean;
+    hasBeenFilled_: boolean;
+    contentEl_: Element;
+    descEl_: Element;
+    /**
+     * Create the `ModalDialog`'s DOM element
+     *
+     * @return {Element}
+     *         The DOM element that gets created.
+     */
+    createEl(): Element;
+    dispose(): void;
+    previouslyActiveEl_: any;
+    /**
+     * Returns the label string for this modal. Primarily used for accessibility.
+     *
+     * @return {string}
+     *         the localized or raw label of this modal.
+     */
+    label(): string;
+    /**
+     * Returns the description string for this modal. Primarily used for
+     * accessibility.
+     *
+     * @return {string}
+     *         The localized or raw description of this modal.
+     */
+    description(): string;
+    /**
+     * Opens the modal.
+     *
+     * @fires ModalDialog#beforemodalopen
+     * @fires ModalDialog#modalopen
+     */
+    open(): void;
+    wasPlaying_: boolean;
+    hadControls_: boolean;
+    /**
+     * If the `ModalDialog` is currently open or closed.
+     *
+     * @param  {boolean} [value]
+     *         If given, it will open (`true`) or close (`false`) the modal.
+     *
+     * @return {boolean}
+     *         the current open state of the modaldialog
+     */
+    opened(value?: boolean): boolean;
+    /**
+     * Closes the modal, does nothing if the `ModalDialog` is
+     * not open.
+     *
+     * @fires ModalDialog#beforemodalclose
+     * @fires ModalDialog#modalclose
+     */
+    close(): void;
+    /**
+     * Check to see if the `ModalDialog` is closeable via the UI.
+     *
+     * @param  {boolean} [value]
+     *         If given as a boolean, it will set the `closeable` option.
+     *
+     * @return {boolean}
+     *         Returns the final value of the closable option.
+     */
+    closeable(value?: boolean): boolean;
+    closeable_: boolean;
+    /**
+     * Fill the modal's content element with the modal's "content" option.
+     * The content element will be emptied before this change takes place.
+     */
+    fill(): void;
+    /**
+     * Fill the modal's content element with arbitrary content.
+     * The content element will be emptied before this change takes place.
+     *
+     * @fires ModalDialog#beforemodalfill
+     * @fires ModalDialog#modalfill
+     *
+     * @param { import('./utils/dom').ContentDescriptor} [content]
+     *        The same rules apply to this as apply to the `content` option.
+     */
+    fillWith(content?: import('./utils/dom').ContentDescriptor): void;
+    /**
+     * Empties the content element. This happens anytime the modal is filled.
+     *
+     * @fires ModalDialog#beforemodalempty
+     * @fires ModalDialog#modalempty
+     */
+    empty(): void;
+    /**
+     * Gets or sets the modal content, which gets normalized before being
+     * rendered into the DOM.
+     *
+     * This does not update the DOM or fill the modal, but it is called during
+     * that process.
+     *
+     * @param  { import('./utils/dom').ContentDescriptor} [value]
+     *         If defined, sets the internal content value to be used on the
+     *         next call(s) to `fill`. This value is normalized before being
+     *         inserted. To "clear" the internal content value, pass `null`.
+     *
+     * @return { import('./utils/dom').ContentDescriptor}
+     *         The current content of the modal dialog
+     */
+    content(value?: import('./utils/dom').ContentDescriptor): import('./utils/dom').ContentDescriptor;
+    content_: Dom.ContentDescriptor;
+    /**
+     * conditionally focus the modal dialog if focus was previously on the player.
+     *
+     * @private
+     */
+    private conditionalFocus_;
+    /**
+     * conditionally blur the element and refocus the last focused element
+     *
+     * @private
+     */
+    private conditionalBlur_;
+    /**
+     * Keydown handler. Attached when modal is focused.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event: any): void;
+    /**
+     * get all focusable elements
+     *
+     * @private
+     */
+    private focusableEls_;
+}
+import Component from "./component";
+import * as Dom from "./utils/dom";
+//# sourceMappingURL=modal-dialog.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/modal-dialog.d.ts.map b/priv/static/video.js/types/modal-dialog.d.ts.map
new file mode 100644
index 0000000..c3ee0d7
--- /dev/null
+++ b/priv/static/video.js/types/modal-dialog.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"modal-dialog.d.ts","sourceRoot":"","sources":["../../src/js/modal-dialog.js"],"names":[],"mappings":";AAWA;;;;;;;;GAQG;AACH;IAEE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmCG;IACH,oBAjCY,OAAO,UAAU,EAAE,OAAO;QAMwB,OAAO,GAAzD,OAAO,aAAa,EAAE,iBAAiB;QAGvB,WAAW,GAA5B,MAAM;QAGY,UAAU,GAA5B,OAAO;QAKU,KAAK,GAAtB,MAAM;QAGY,WAAW,GAA7B,OAAO;QAIW,SAAS,GAA3B,OAAO;QAIW,WAAW,GAA7B,OAAO;OAgCjB;IAxBC,iCAAkD;IAClD,yBAAkC;IAClC,iBAAgE;IAAjD,wBAAiD;IAA3B,wBAA2B;IAQhE,oBAIE;IAEF,iBAGE;IAOJ;;;;;OAKG;IACH,YAHY,OAAO,CAclB;IAED,gBAMC;IAHC,yBAA+B;IAejC;;;;;OAKG;IACH,SAHY,MAAM,CAKjB;IAED;;;;;;OAMG;IACH,eAHY,MAAM,CAYjB;IAED;;;;;OAKG;IACH,aAmDC;IAxBC,qBAAmC;IASnC,sBAAqC;IAiBvC;;;;;;;;OAQG;IACH,eANY,OAAO,GAGP,OAAO,CAQlB;IAED;;;;;;OAMG;IACH,cAwCC;IAED;;;;;;;;OAQG;IACH,kBANY,OAAO,GAGP,OAAO,CA6BlB;IAxBqB,oBAAyB;IA0B/C;;;OAGG;IACH,aAEC;IAED;;;;;;;;;OASG;IACH,mBAHY,OAAO,aAAa,EAAE,iBAAiB,QA2ClD;IAED;;;;;OAKG;IACH,cAiBC;IAED;;;;;;;;;;;;;;OAcG;IACH,gBARa,OAAO,aAAa,EAAE,iBAAiB,GAKvC,OAAO,aAAa,EAAE,iBAAiB,CAQnD;IAHG,gCAAqB;IAKzB;;;;OAIG;IACH,0BAWC;IAED;;;;OAIG;IACH,yBAKC;IAED;;;;OAIG;IACH,gCAsCC;IAED;;;;OAIG;IACH,sBAgBC;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/player.d.ts b/priv/static/video.js/types/player.d.ts
new file mode 100644
index 0000000..d5fcbaf
--- /dev/null
+++ b/priv/static/video.js/types/player.d.ts
@@ -0,0 +1,1776 @@
+export default Player;
+/**
+ * An instance of the `Player` class is created when any of the Video.js setup methods
+ * are used to initialize a video.
+ *
+ * After an instance has been created it can be accessed globally in three ways:
+ * 1. By calling `videojs.getPlayer('example_video_1');`
+ * 2. By calling `videojs('example_video_1');` (not recommended)
+ * 2. By using it directly via `videojs.players.example_video_1;`
+ *
+ * @extends Component
+ * @global
+ */
+declare class Player extends Component {
+    /**
+     * Gets tag settings
+     *
+     * @param {Element} tag
+     *        The player tag
+     *
+     * @return {Object}
+     *         An object containing all of the settings
+     *         for a player tag
+     */
+    static getTagSettings(tag: Element): any;
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Element} tag
+     *        The original video DOM element used for configuring options.
+     *
+     * @param {Object} [options]
+     *        Object of option names and values.
+     *
+     * @param {Function} [ready]
+     *        Ready callback function.
+     */
+    constructor(tag: Element, options?: any, ready?: Function);
+    boundDocumentFullscreenChange_: (e: any) => void;
+    boundFullWindowOnEscKey_: (e: any) => void;
+    boundUpdateStyleEl_: (e: any) => void;
+    boundApplyInitTime_: (e: any) => void;
+    boundUpdateCurrentBreakpoint_: (e: any) => void;
+    boundHandleTechClick_: (e: any) => void;
+    boundHandleTechDoubleClick_: (e: any) => void;
+    boundHandleTechTouchStart_: (e: any) => void;
+    boundHandleTechTouchMove_: (e: any) => void;
+    boundHandleTechTouchEnd_: (e: any) => void;
+    boundHandleTechTap_: (e: any) => void;
+    isFullscreen_: boolean;
+    log: any;
+    fsApi_: any;
+    isPosterFromTech_: boolean;
+    queuedCallbacks_: any[];
+    hasStarted_: boolean;
+    userActive_: boolean;
+    debugEnabled_: boolean;
+    audioOnlyMode_: boolean;
+    audioPosterMode_: boolean;
+    audioOnlyCache_: {
+        playerHeight: any;
+        hiddenChildren: any[];
+    };
+    tag: Element;
+    tagAttributes: any;
+    languages_: {};
+    /** @type string */
+    poster_: string;
+    /** @type {boolean} */
+    controls_: boolean;
+    changingSrc_: boolean;
+    playCallbacks_: any[];
+    playTerminatedQueue_: any[];
+    scrubbing_: boolean;
+    el_: Element;
+    middleware_: any[];
+    /**
+     * Destroys the video player and does any necessary cleanup.
+     *
+     * This is especially helpful if you are dynamically adding and removing videos
+     * to/from the DOM.
+     *
+     * @fires Player#dispose
+     */
+    dispose(): void;
+    styleEl_: Element;
+    playerElIngest_: any;
+    /**
+     * Create the `Player`'s DOM element.
+     *
+     * @return {Element}
+     *         The DOM element that gets created.
+     */
+    createEl(): Element;
+    fill_: boolean;
+    fluid_: boolean;
+    /**
+     * Get or set the `Player`'s crossOrigin option. For the HTML5 player, this
+     * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+     * behavior.
+     *
+     * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+     *
+     * @param {string|null} [value]
+     *        The value to set the `Player`'s crossOrigin to. If an argument is
+     *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+     *
+     * @return {string|null|undefined}
+     *         - The current crossOrigin value of the `Player` when getting.
+     *         - undefined when setting
+     */
+    crossOrigin(value?: string | null): string | null | undefined;
+    /**
+     * A getter/setter for the `Player`'s width. Returns the player's configured value.
+     * To get the current width use `currentWidth()`.
+     *
+     * @param {number|string} [value]
+     *        CSS value to set the `Player`'s width to.
+     *
+     * @return {number|undefined}
+     *         - The current width of the `Player` when getting.
+     *         - Nothing when setting
+     */
+    width(value?: number | string): number | undefined;
+    /**
+     * A getter/setter for the `Player`'s height. Returns the player's configured value.
+     * To get the current height use `currentheight()`.
+     *
+     * @param {number|string} [value]
+     *        CSS value to set the `Player`'s height to.
+     *
+     * @return {number|undefined}
+     *         - The current height of the `Player` when getting.
+     *         - Nothing when setting
+     */
+    height(value?: number | string): number | undefined;
+    /**
+     * A getter/setter for the `Player`'s width & height.
+     *
+     * @param {string} dimension
+     *        This string can be:
+     *        - 'width'
+     *        - 'height'
+     *
+     * @param {number|string} [value]
+     *        Value for dimension specified in the first argument.
+     *
+     * @return {number}
+     *         The dimension arguments value when getting (width/height).
+     */
+    dimension(dimension: string, value?: number | string): number;
+    /**
+     * A getter/setter/toggler for the vjs-fluid `className` on the `Player`.
+     *
+     * Turning this on will turn off fill mode.
+     *
+     * @param {boolean} [bool]
+     *        - A value of true adds the class.
+     *        - A value of false removes the class.
+     *        - No value will be a getter.
+     *
+     * @return {boolean|undefined}
+     *         - The value of fluid when getting.
+     *         - `undefined` when setting.
+     */
+    fluid(bool?: boolean): boolean | undefined;
+    /**
+     * A getter/setter/toggler for the vjs-fill `className` on the `Player`.
+     *
+     * Turning this on will turn off fluid mode.
+     *
+     * @param {boolean} [bool]
+     *        - A value of true adds the class.
+     *        - A value of false removes the class.
+     *        - No value will be a getter.
+     *
+     * @return {boolean|undefined}
+     *         - The value of fluid when getting.
+     *         - `undefined` when setting.
+     */
+    fill(bool?: boolean): boolean | undefined;
+    /**
+     * Get/Set the aspect ratio
+     *
+     * @param {string} [ratio]
+     *        Aspect ratio for player
+     *
+     * @return {string|undefined}
+     *         returns the current aspect ratio when getting
+     */
+    /**
+     * A getter/setter for the `Player`'s aspect ratio.
+     *
+     * @param {string} [ratio]
+     *        The value to set the `Player`'s aspect ratio to.
+     *
+     * @return {string|undefined}
+     *         - The current aspect ratio of the `Player` when getting.
+     *         - undefined when setting
+     */
+    aspectRatio(ratio?: string): string | undefined;
+    aspectRatio_: string;
+    /**
+     * Update styles of the `Player` element (height, width and aspect ratio).
+     *
+     * @private
+     * @listens Tech#loadedmetadata
+     */
+    private updateStyleEl_;
+    /**
+     * Load/Create an instance of playback {@link Tech} including element
+     * and API methods. Then append the `Tech` element in `Player` as a child.
+     *
+     * @param {string} techName
+     *        name of the playback technology
+     *
+     * @param {string} source
+     *        video source
+     *
+     * @private
+     */
+    private loadTech_;
+    techName_: string;
+    tech_: any;
+    /**
+     * Unload and dispose of the current playback {@link Tech}.
+     *
+     * @private
+     */
+    private unloadTech_;
+    textTracksJson_: any[];
+    /**
+     * Return a reference to the current {@link Tech}.
+     * It will print a warning by default about the danger of using the tech directly
+     * but any argument that is passed in will silence the warning.
+     *
+     * @param {*} [safety]
+     *        Anything passed in to silence the warning
+     *
+     * @return {Tech}
+     *         The Tech
+     */
+    tech(safety?: any): Tech;
+    /**
+     * An object that contains Video.js version.
+     *
+     * @typedef {Object} PlayerVersion
+     *
+     * @property {string} 'video.js' - Video.js version
+     */
+    /**
+     * Returns an object with Video.js version.
+     *
+     * @return {PlayerVersion}
+     *          An object with Video.js version.
+     */
+    version(): {
+        /**
+         * 'video.js' - Video.js version
+         */
+        "": string;
+    };
+    /**
+     * Set up click and touch listeners for the playback element
+     *
+     * - On desktops: a click on the video itself will toggle playback
+     * - On mobile devices: a click on the video toggles controls
+     *   which is done by toggling the user state between active and
+     *   inactive
+     * - A tap can signal that a user has become active or has become inactive
+     *   e.g. a quick tap on an iPhone movie should reveal the controls. Another
+     *   quick tap should hide them again (signaling the user is in an inactive
+     *   viewing state)
+     * - In addition to this, we still want the user to be considered inactive after
+     *   a few seconds of inactivity.
+     *
+     * > Note: the only part of iOS interaction we can't mimic with this setup
+     * is a touch and hold on the video element counting as activity in order to
+     * keep the controls showing, but that shouldn't be an issue. A touch and hold
+     * on any controls will still keep the user active
+     *
+     * @private
+     */
+    private addTechControlsListeners_;
+    /**
+     * Remove the listeners used for click and tap controls. This is needed for
+     * toggling to controls disabled, where a tap/touch should do nothing.
+     *
+     * @private
+     */
+    private removeTechControlsListeners_;
+    /**
+     * Player waits for the tech to be ready
+     *
+     * @private
+     */
+    private handleTechReady_;
+    /**
+     * Retrigger the `loadstart` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#loadstart
+     * @listens Tech#loadstart
+     * @private
+     */
+    private handleTechLoadStart_;
+    /**
+     * Handle autoplay string values, rather than the typical boolean
+     * values that should be handled by the tech. Note that this is not
+     * part of any specification. Valid values and what they do can be
+     * found on the autoplay getter at Player#autoplay()
+     */
+    manualAutoplay_(type: any): Promise<void>;
+    /**
+     * Update the internal source caches so that we return the correct source from
+     * `src()`, `currentSource()`, and `currentSources()`.
+     *
+     * > Note: `currentSources` will not be updated if the source that is passed in exists
+     *         in the current `currentSources` cache.
+     *
+     *
+     * @param {Tech~SourceObject} srcObj
+     *        A string or object source to update our caches to.
+     */
+    updateSourceCaches_(srcObj?: string): void;
+    /**
+     * *EXPERIMENTAL* Fired when the source is set or changed on the {@link Tech}
+     * causing the media element to reload.
+     *
+     * It will fire for the initial source and each subsequent source.
+     * This event is a custom event from Video.js and is triggered by the {@link Tech}.
+     *
+     * The event object for this event contains a `src` property that will contain the source
+     * that was available when the event was triggered. This is generally only necessary if Video.js
+     * is switching techs while the source was being changed.
+     *
+     * It is also fired when `load` is called on the player (or media element)
+     * because the {@link https://html.spec.whatwg.org/multipage/media.html#dom-media-load|specification for `load`}
+     * says that the resource selection algorithm needs to be aborted and restarted.
+     * In this case, it is very likely that the `src` property will be set to the
+     * empty string `""` to indicate we do not know what the source will be but
+     * that it is changing.
+     *
+     * *This event is currently still experimental and may change in minor releases.*
+     * __To use this, pass `enableSourceset` option to the player.__
+     *
+     * @event Player#sourceset
+     * @type {Event}
+     * @prop {string} src
+     *                The source url available when the `sourceset` was triggered.
+     *                It will be an empty string if we cannot know what the source is
+     *                but know that the source will change.
+     */
+    /**
+     * Retrigger the `sourceset` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#sourceset
+     * @listens Tech#sourceset
+     * @private
+     */
+    private handleTechSourceset_;
+    lastSource_: {
+        player: any;
+        tech: any;
+    };
+    /**
+     * Add/remove the vjs-has-started class
+     *
+     *
+     * @param {boolean} request
+     *        - true: adds the class
+     *        - false: remove the class
+     *
+     * @return {boolean}
+     *         the boolean value of hasStarted_
+     */
+    hasStarted(request: boolean): boolean;
+    /**
+     * Fired whenever the media begins or resumes playback
+     *
+     * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play}
+     * @fires Player#play
+     * @listens Tech#play
+     * @private
+     */
+    private handleTechPlay_;
+    /**
+     * Retrigger the `ratechange` event that was triggered by the {@link Tech}.
+     *
+     * If there were any events queued while the playback rate was zero, fire
+     * those events now.
+     *
+     * @private
+     * @method Player#handleTechRateChange_
+     * @fires Player#ratechange
+     * @listens Tech#ratechange
+     */
+    private handleTechRateChange_;
+    /**
+     * Retrigger the `waiting` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#waiting
+     * @listens Tech#waiting
+     * @private
+     */
+    private handleTechWaiting_;
+    /**
+     * Retrigger the `canplay` event that was triggered by the {@link Tech}.
+     * > Note: This is not consistent between browsers. See #1351
+     *
+     * @fires Player#canplay
+     * @listens Tech#canplay
+     * @private
+     */
+    private handleTechCanPlay_;
+    /**
+     * Retrigger the `canplaythrough` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#canplaythrough
+     * @listens Tech#canplaythrough
+     * @private
+     */
+    private handleTechCanPlayThrough_;
+    /**
+     * Retrigger the `playing` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#playing
+     * @listens Tech#playing
+     * @private
+     */
+    private handleTechPlaying_;
+    /**
+     * Retrigger the `seeking` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#seeking
+     * @listens Tech#seeking
+     * @private
+     */
+    private handleTechSeeking_;
+    /**
+     * Retrigger the `seeked` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#seeked
+     * @listens Tech#seeked
+     * @private
+     */
+    private handleTechSeeked_;
+    /**
+     * Retrigger the `pause` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#pause
+     * @listens Tech#pause
+     * @private
+     */
+    private handleTechPause_;
+    /**
+     * Retrigger the `ended` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#ended
+     * @listens Tech#ended
+     * @private
+     */
+    private handleTechEnded_;
+    /**
+     * Fired when the duration of the media resource is first known or changed
+     *
+     * @listens Tech#durationchange
+     * @private
+     */
+    private handleTechDurationChange_;
+    /**
+     * Handle a click on the media element to play/pause
+     *
+     * @param {Event} event
+     *        the event that caused this function to trigger
+     *
+     * @listens Tech#click
+     * @private
+     */
+    private handleTechClick_;
+    /**
+     * Handle a double-click on the media element to enter/exit fullscreen
+     *
+     * @param {Event} event
+     *        the event that caused this function to trigger
+     *
+     * @listens Tech#dblclick
+     * @private
+     */
+    private handleTechDoubleClick_;
+    /**
+     * Handle a tap on the media element. It will toggle the user
+     * activity state, which hides and shows the controls.
+     *
+     * @listens Tech#tap
+     * @private
+     */
+    private handleTechTap_;
+    /**
+     * Handle touch to start
+     *
+     * @listens Tech#touchstart
+     * @private
+     */
+    private handleTechTouchStart_;
+    userWasActive: boolean;
+    /**
+     * Handle touch to move
+     *
+     * @listens Tech#touchmove
+     * @private
+     */
+    private handleTechTouchMove_;
+    /**
+     * Handle touch to end
+     *
+     * @param {Event} event
+     *        the touchend event that triggered
+     *        this function
+     *
+     * @listens Tech#touchend
+     * @private
+     */
+    private handleTechTouchEnd_;
+    /**
+     * @private
+     */
+    private toggleFullscreenClass_;
+    /**
+     * when the document fschange event triggers it calls this
+     */
+    documentFullscreenChange_(e: any): void;
+    /**
+     * Handle Tech Fullscreen Change
+     *
+     * @param {Event} event
+     *        the fullscreenchange event that triggered this function
+     *
+     * @param {Object} data
+     *        the data that was sent with the event
+     *
+     * @private
+     * @listens Tech#fullscreenchange
+     * @fires Player#fullscreenchange
+     */
+    private handleTechFullscreenChange_;
+    handleTechFullscreenError_(event: any, err: any): void;
+    /**
+     * @private
+     */
+    private togglePictureInPictureClass_;
+    /**
+     * Handle Tech Enter Picture-in-Picture.
+     *
+     * @param {Event} event
+     *        the enterpictureinpicture event that triggered this function
+     *
+     * @private
+     * @listens Tech#enterpictureinpicture
+     */
+    private handleTechEnterPictureInPicture_;
+    /**
+     * Handle Tech Leave Picture-in-Picture.
+     *
+     * @param {Event} event
+     *        the leavepictureinpicture event that triggered this function
+     *
+     * @private
+     * @listens Tech#leavepictureinpicture
+     */
+    private handleTechLeavePictureInPicture_;
+    /**
+     * Fires when an error occurred during the loading of an audio/video.
+     *
+     * @private
+     * @listens Tech#error
+     */
+    private handleTechError_;
+    /**
+     * Retrigger the `textdata` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#textdata
+     * @listens Tech#textdata
+     * @private
+     */
+    private handleTechTextData_;
+    /**
+     * Get object for cached values.
+     *
+     * @return {Object}
+     *         get the current object cache
+     */
+    getCache(): any;
+    /**
+     * Resets the internal cache object.
+     *
+     * Using this function outside the player constructor or reset method may
+     * have unintended side-effects.
+     *
+     * @private
+     */
+    private resetCache_;
+    cache_: {
+        currentTime: number;
+        initTime: number;
+        inactivityTimeout: number;
+        duration: number;
+        lastVolume: number;
+        lastPlaybackRate: number;
+        media: any;
+        src: string;
+        source: {};
+        sources: any[];
+        playbackRates: any[];
+        volume: number;
+    };
+    /**
+     * Pass values to the playback tech
+     *
+     * @param {string} [method]
+     *        the method to call
+     *
+     * @param {Object} [arg]
+     *        the argument to pass
+     *
+     * @private
+     */
+    private techCall_;
+    /**
+     * Mediate attempt to call playback tech method
+     * and return the value of the method called.
+     *
+     * @param {string} method
+     *        Tech method
+     *
+     * @return {*}
+     *         Value returned by the tech method called, undefined if tech
+     *         is not ready or tech method is not present
+     *
+     * @private
+     */
+    private techGet_;
+    /**
+     * Attempt to begin playback at the first opportunity.
+     *
+     * @return {Promise|undefined}
+     *         Returns a promise if the browser supports Promises (or one
+     *         was passed in as an option). This promise will be resolved on
+     *         the return value of play. If this is undefined it will fulfill the
+     *         promise chain otherwise the promise chain will be fulfilled when
+     *         the promise from play is fulfilled.
+     */
+    play(): Promise<any> | undefined;
+    /**
+     * The actual logic for play, takes a callback that will be resolved on the
+     * return value of play. This allows us to resolve to the play promise if there
+     * is one on modern browsers.
+     *
+     * @private
+     * @param {Function} [callback]
+     *        The callback that should be called when the techs play is actually called
+     */
+    private play_;
+    waitToPlay_: (e: any) => void;
+    /**
+     * These functions will be run when if play is terminated. If play
+     * runPlayCallbacks_ is run these function will not be run. This allows us
+     * to differentiate between a terminated play and an actual call to play.
+     */
+    runPlayTerminatedQueue_(): void;
+    /**
+     * When a callback to play is delayed we have to run these
+     * callbacks when play is actually called on the tech. This function
+     * runs the callbacks that were delayed and accepts the return value
+     * from the tech.
+     *
+     * @param {undefined|Promise} val
+     *        The return value from the tech.
+     */
+    runPlayCallbacks_(val: undefined | Promise<any>): void;
+    /**
+     * Pause the video playback
+     */
+    pause(): void;
+    /**
+     * Check if the player is paused or has yet to play
+     *
+     * @return {boolean}
+     *         - false: if the media is currently playing
+     *         - true: if media is not currently playing
+     */
+    paused(): boolean;
+    /**
+     * Get a TimeRange object representing the current ranges of time that the user
+     * has played.
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A time range object that represents all the increments of time that have
+     *         been played.
+     */
+    played(): import('./utils/time').TimeRange;
+    /**
+     * Sets or returns whether or not the user is "scrubbing". Scrubbing is
+     * when the user has clicked the progress bar handle and is
+     * dragging it along the progress bar.
+     *
+     * @param {boolean} [isScrubbing]
+     *        whether the user is or is not scrubbing
+     *
+     * @return {boolean|undefined}
+     *         - The value of scrubbing when getting
+     *         - Nothing when setting
+     */
+    scrubbing(isScrubbing?: boolean): boolean | undefined;
+    /**
+     * Get or set the current time (in seconds)
+     *
+     * @param {number|string} [seconds]
+     *        The time to seek to in seconds
+     *
+     * @return {number|undefined}
+     *         - the current time in seconds when getting
+     *         - Nothing when setting
+     */
+    currentTime(seconds?: number | string): number | undefined;
+    /**
+     * Apply the value of initTime stored in cache as currentTime.
+     *
+     * @private
+     */
+    private applyInitTime_;
+    /**
+     * Normally gets the length in time of the video in seconds;
+     * in all but the rarest use cases an argument will NOT be passed to the method
+     *
+     * > **NOTE**: The video must have started loading before the duration can be
+     * known, and depending on preload behaviour may not be known until the video starts
+     * playing.
+     *
+     * @fires Player#durationchange
+     *
+     * @param {number} [seconds]
+     *        The duration of the video to set in seconds
+     *
+     * @return {number|undefined}
+     *         - The duration of the video in seconds when getting
+     *         - Nothing when setting
+     */
+    duration(seconds?: number): number | undefined;
+    /**
+     * Calculates how much time is left in the video. Not part
+     * of the native video API.
+     *
+     * @return {number}
+     *         The time remaining in seconds
+     */
+    remainingTime(): number;
+    /**
+     * A remaining time function that is intended to be used when
+     * the time is to be displayed directly to the user.
+     *
+     * @return {number}
+     *         The rounded time remaining in seconds
+     */
+    remainingTimeDisplay(): number;
+    /**
+     * Get a TimeRange object with an array of the times of the video
+     * that have been downloaded. If you just want the percent of the
+     * video that's been downloaded, use bufferedPercent.
+     *
+     * @see [Buffered Spec]{@link http://dev.w3.org/html5/spec/video.html#dom-media-buffered}
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A mock {@link TimeRanges} object (following HTML spec)
+     */
+    buffered(): import('./utils/time').TimeRange;
+    /**
+     * Get the TimeRanges of the media that are currently available
+     * for seeking to.
+     *
+     * @see [Seekable Spec]{@link https://html.spec.whatwg.org/multipage/media.html#dom-media-seekable}
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A mock {@link TimeRanges} object (following HTML spec)
+     */
+    seekable(): import('./utils/time').TimeRange;
+    /**
+     * Returns whether the player is in the "seeking" state.
+     *
+     * @return {boolean} True if the player is in the seeking state, false if not.
+     */
+    seeking(): boolean;
+    /**
+     * Returns whether the player is in the "ended" state.
+     *
+     * @return {boolean} True if the player is in the ended state, false if not.
+     */
+    ended(): boolean;
+    /**
+     * Returns the current state of network activity for the element, from
+     * the codes in the list below.
+     * - NETWORK_EMPTY (numeric value 0)
+     *   The element has not yet been initialised. All attributes are in
+     *   their initial states.
+     * - NETWORK_IDLE (numeric value 1)
+     *   The element's resource selection algorithm is active and has
+     *   selected a resource, but it is not actually using the network at
+     *   this time.
+     * - NETWORK_LOADING (numeric value 2)
+     *   The user agent is actively trying to download data.
+     * - NETWORK_NO_SOURCE (numeric value 3)
+     *   The element's resource selection algorithm is active, but it has
+     *   not yet found a resource to use.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states
+     * @return {number} the current network activity state
+     */
+    networkState(): number;
+    /**
+     * Returns a value that expresses the current state of the element
+     * with respect to rendering the current playback position, from the
+     * codes in the list below.
+     * - HAVE_NOTHING (numeric value 0)
+     *   No information regarding the media resource is available.
+     * - HAVE_METADATA (numeric value 1)
+     *   Enough of the resource has been obtained that the duration of the
+     *   resource is available.
+     * - HAVE_CURRENT_DATA (numeric value 2)
+     *   Data for the immediate current playback position is available.
+     * - HAVE_FUTURE_DATA (numeric value 3)
+     *   Data for the immediate current playback position is available, as
+     *   well as enough data for the user agent to advance the current
+     *   playback position in the direction of playback.
+     * - HAVE_ENOUGH_DATA (numeric value 4)
+     *   The user agent estimates that enough data is available for
+     *   playback to proceed uninterrupted.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate
+     * @return {number} the current playback rendering state
+     */
+    readyState(): number;
+    /**
+     * Get the percent (as a decimal) of the video that's been downloaded.
+     * This method is not a part of the native HTML video API.
+     *
+     * @return {number}
+     *         A decimal between 0 and 1 representing the percent
+     *         that is buffered 0 being 0% and 1 being 100%
+     */
+    bufferedPercent(): number;
+    /**
+     * Get the ending time of the last buffered time range
+     * This is used in the progress bar to encapsulate all time ranges.
+     *
+     * @return {number}
+     *         The end of the last buffered time range
+     */
+    bufferedEnd(): number;
+    /**
+     * Get or set the current volume of the media
+     *
+     * @param  {number} [percentAsDecimal]
+     *         The new volume as a decimal percent:
+     *         - 0 is muted/0%/off
+     *         - 1.0 is 100%/full
+     *         - 0.5 is half volume or 50%
+     *
+     * @return {number|undefined}
+     *         The current volume as a percent when getting
+     */
+    volume(percentAsDecimal?: number): number | undefined;
+    /**
+     * Get the current muted state, or turn mute on or off
+     *
+     * @param {boolean} [muted]
+     *        - true to mute
+     *        - false to unmute
+     *
+     * @return {boolean|undefined}
+     *         - true if mute is on and getting
+     *         - false if mute is off and getting
+     *         - nothing if setting
+     */
+    muted(muted?: boolean): boolean | undefined;
+    /**
+     * Get the current defaultMuted state, or turn defaultMuted on or off. defaultMuted
+     * indicates the state of muted on initial playback.
+     *
+     * ```js
+     *   var myPlayer = videojs('some-player-id');
+     *
+     *   myPlayer.src("http://www.example.com/path/to/video.mp4");
+     *
+     *   // get, should be false
+     *   console.log(myPlayer.defaultMuted());
+     *   // set to true
+     *   myPlayer.defaultMuted(true);
+     *   // get should be true
+     *   console.log(myPlayer.defaultMuted());
+     * ```
+     *
+     * @param {boolean} [defaultMuted]
+     *        - true to mute
+     *        - false to unmute
+     *
+     * @return {boolean|undefined}
+     *         - true if defaultMuted is on and getting
+     *         - false if defaultMuted is off and getting
+     *         - Nothing when setting
+     */
+    defaultMuted(defaultMuted?: boolean): boolean | undefined;
+    /**
+     * Get the last volume, or set it
+     *
+     * @param  {number} [percentAsDecimal]
+     *         The new last volume as a decimal percent:
+     *         - 0 is muted/0%/off
+     *         - 1.0 is 100%/full
+     *         - 0.5 is half volume or 50%
+     *
+     * @return {number|undefined}
+     *         - The current value of lastVolume as a percent when getting
+     *         - Nothing when setting
+     *
+     * @private
+     */
+    private lastVolume_;
+    /**
+     * Check if current tech can support native fullscreen
+     * (e.g. with built in controls like iOS)
+     *
+     * @return {boolean}
+     *         if native fullscreen is supported
+     */
+    supportsFullScreen(): boolean;
+    /**
+     * Check if the player is in fullscreen mode or tell the player that it
+     * is or is not in fullscreen mode.
+     *
+     * > NOTE: As of the latest HTML5 spec, isFullscreen is no longer an official
+     * property and instead document.fullscreenElement is used. But isFullscreen is
+     * still a valuable property for internal player workings.
+     *
+     * @param  {boolean} [isFS]
+     *         Set the players current fullscreen state
+     *
+     * @return {boolean|undefined}
+     *         - true if fullscreen is on and getting
+     *         - false if fullscreen is off and getting
+     *         - Nothing when setting
+     */
+    isFullscreen(isFS?: boolean): boolean | undefined;
+    /**
+     * Increase the size of the video to full screen
+     * In some browsers, full screen is not supported natively, so it enters
+     * "full window mode", where the video fills the browser window.
+     * In browsers and devices that support native full screen, sometimes the
+     * browser's default controls will be shown, and not the Video.js custom skin.
+     * This includes most mobile devices (iOS, Android) and older versions of
+     * Safari.
+     *
+     * @param  {Object} [fullscreenOptions]
+     *         Override the player fullscreen options
+     *
+     * @fires Player#fullscreenchange
+     */
+    requestFullscreen(fullscreenOptions?: any): Promise<any>;
+    requestFullscreenHelper_(fullscreenOptions: any): any;
+    /**
+     * Return the video to its normal size after having been in full screen mode
+     *
+     * @fires Player#fullscreenchange
+     */
+    exitFullscreen(): Promise<any>;
+    exitFullscreenHelper_(): any;
+    /**
+     * When fullscreen isn't supported we can stretch the
+     * video container to as wide as the browser will let us.
+     *
+     * @fires Player#enterFullWindow
+     */
+    enterFullWindow(): void;
+    isFullWindow: boolean;
+    docOrigOverflow: any;
+    /**
+     * Check for call to either exit full window or
+     * full screen on ESC key
+     *
+     * @param {string} event
+     *        Event to check for key press
+     */
+    fullWindowOnEscKey(event: string): void;
+    /**
+     * Exit full window
+     *
+     * @fires Player#exitFullWindow
+     */
+    exitFullWindow(): void;
+    /**
+     * Get or set disable Picture-in-Picture mode.
+     *
+     * @param {boolean} [value]
+     *                  - true will disable Picture-in-Picture mode
+     *                  - false will enable Picture-in-Picture mode
+     */
+    disablePictureInPicture(value?: boolean): any;
+    /**
+     * Check if the player is in Picture-in-Picture mode or tell the player that it
+     * is or is not in Picture-in-Picture mode.
+     *
+     * @param  {boolean} [isPiP]
+     *         Set the players current Picture-in-Picture state
+     *
+     * @return {boolean|undefined}
+     *         - true if Picture-in-Picture is on and getting
+     *         - false if Picture-in-Picture is off and getting
+     *         - nothing if setting
+     */
+    isInPictureInPicture(isPiP?: boolean): boolean | undefined;
+    isInPictureInPicture_: boolean;
+    /**
+     * Create a floating video window always on top of other windows so that users may
+     * continue consuming media while they interact with other content sites, or
+     * applications on their device.
+     *
+     * This can use document picture-in-picture or element picture in picture
+     *
+     * Set `enableDocumentPictureInPicture` to `true` to use docPiP on a supported browser
+     * Else set `disablePictureInPicture` to `false` to disable elPiP on a supported browser
+     *
+     *
+     * @see [Spec]{@link https://w3c.github.io/picture-in-picture/}
+     * @see [Spec]{@link https://wicg.github.io/document-picture-in-picture/}
+     *
+     * @fires Player#enterpictureinpicture
+     *
+     * @return {Promise}
+     *         A promise with a Picture-in-Picture window.
+     */
+    requestPictureInPicture(): Promise<any>;
+    /**
+     * Exit Picture-in-Picture mode.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @fires Player#leavepictureinpicture
+     *
+     * @return {Promise}
+     *         A promise.
+     */
+    exitPictureInPicture(): Promise<any>;
+    /**
+     * Called when this Player receives a hotkey keydown event.
+     * Supported player-wide hotkeys are:
+     *
+     *   f          - toggle fullscreen
+     *   m          - toggle mute
+     *   k or Space - toggle play/pause
+     *
+     * @param {Event} event
+     *        The `keydown` event that caused this function to be called.
+     */
+    handleHotkeys(event: Event): void;
+    /**
+     * Check whether the player can play a given mimetype
+     *
+     * @see https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype
+     *
+     * @param {string} type
+     *        The mimetype to check
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    canPlayType(type: string): string;
+    /**
+     * Select source based on tech-order or source-order
+     * Uses source-order selection if `options.sourceOrder` is truthy. Otherwise,
+     * defaults to tech-order selection
+     *
+     * @param {Array} sources
+     *        The sources for a media asset
+     *
+     * @return {Object|boolean}
+     *         Object of source and tech order or false
+     */
+    selectSource(sources: any[]): any | boolean;
+    /**
+     * Executes source setting and getting logic
+     *
+     * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+     *        A SourceObject, an array of SourceObjects, or a string referencing
+     *        a URL to a media source. It is _highly recommended_ that an object
+     *        or array of objects is used here, so that source selection
+     *        algorithms can take the `type` into account.
+     *
+     *        If not provided, this method acts as a getter.
+     * @param {boolean} [isRetry]
+     *        Indicates whether this is being called internally as a result of a retry
+     *
+     * @return {string|undefined}
+     *         If the `source` argument is missing, returns the current source
+     *         URL. Otherwise, returns nothing/undefined.
+     */
+    handleSrc_(source: any, isRetry?: boolean): string | undefined;
+    resetRetryOnError_: () => void;
+    /**
+     * Get or set the video source.
+     *
+     * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+     *        A SourceObject, an array of SourceObjects, or a string referencing
+     *        a URL to a media source. It is _highly recommended_ that an object
+     *        or array of objects is used here, so that source selection
+     *        algorithms can take the `type` into account.
+     *
+     *        If not provided, this method acts as a getter.
+     *
+     * @return {string|undefined}
+     *         If the `source` argument is missing, returns the current source
+     *         URL. Otherwise, returns nothing/undefined.
+     */
+    src(source: any): string | undefined;
+    /**
+     * Set the source object on the tech, returns a boolean that indicates whether
+     * there is a tech that can play the source or not
+     *
+     * @param {Tech~SourceObject} source
+     *        The source object to set on the Tech
+     *
+     * @return {boolean}
+     *         - True if there is no Tech to playback this source
+     *         - False otherwise
+     *
+     * @private
+     */
+    private src_;
+    /**
+     * Begin loading the src data.
+     */
+    load(): void;
+    /**
+     * Reset the player. Loads the first tech in the techOrder,
+     * removes all the text tracks in the existing `tech`,
+     * and calls `reset` on the `tech`.
+     */
+    reset(): void;
+    doReset_(): void;
+    /**
+     * Reset Control Bar's UI by calling sub-methods that reset
+     * all of Control Bar's components
+     */
+    resetControlBarUI_(): void;
+    /**
+     * Reset tech's progress so progress bar is reset in the UI
+     */
+    resetProgressBar_(): void;
+    /**
+     * Reset Playback ratio
+     */
+    resetPlaybackRate_(): void;
+    /**
+     * Reset Volume bar
+     */
+    resetVolumeBar_(): void;
+    /**
+     * Returns all of the current source objects.
+     *
+     * @return {Tech~SourceObject[]}
+     *         The current source objects
+     */
+    currentSources(): Tech;
+    /**
+     * Returns the current source object.
+     *
+     * @return {Tech~SourceObject}
+     *         The current source object
+     */
+    currentSource(): Tech;
+    /**
+     * Returns the fully qualified URL of the current source value e.g. http://mysite.com/video.mp4
+     * Can be used in conjunction with `currentType` to assist in rebuilding the current source object.
+     *
+     * @return {string}
+     *         The current source
+     */
+    currentSrc(): string;
+    /**
+     * Get the current source type e.g. video/mp4
+     * This can allow you rebuild the current source object so that you could load the same
+     * source and tech later
+     *
+     * @return {string}
+     *         The source MIME type
+     */
+    currentType(): string;
+    /**
+     * Get or set the preload attribute
+     *
+     * @param {'none'|'auto'|'metadata'} [value]
+     *        Preload mode to pass to tech
+     *
+     * @return {string|undefined}
+     *         - The preload attribute value when getting
+     *         - Nothing when setting
+     */
+    preload(value?: 'none' | 'auto' | 'metadata'): string | undefined;
+    /**
+     * Get or set the autoplay option. When this is a boolean it will
+     * modify the attribute on the tech. When this is a string the attribute on
+     * the tech will be removed and `Player` will handle autoplay on loadstarts.
+     *
+     * @param {boolean|'play'|'muted'|'any'} [value]
+     *        - true: autoplay using the browser behavior
+     *        - false: do not autoplay
+     *        - 'play': call play() on every loadstart
+     *        - 'muted': call muted() then play() on every loadstart
+     *        - 'any': call play() on every loadstart. if that fails call muted() then play().
+     *        - *: values other than those listed here will be set `autoplay` to true
+     *
+     * @return {boolean|string|undefined}
+     *         - The current value of autoplay when getting
+     *         - Nothing when setting
+     */
+    autoplay(value?: boolean | 'play' | 'muted' | 'any'): boolean | string | undefined;
+    /**
+     * Set or unset the playsinline attribute.
+     * Playsinline tells the browser that non-fullscreen playback is preferred.
+     *
+     * @param {boolean} [value]
+     *        - true means that we should try to play inline by default
+     *        - false means that we should use the browser's default playback mode,
+     *          which in most cases is inline. iOS Safari is a notable exception
+     *          and plays fullscreen by default.
+     *
+     * @return {string|undefined}
+     *         - the current value of playsinline
+     *         - Nothing when setting
+     *
+     * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+     */
+    playsinline(value?: boolean): string | undefined;
+    /**
+     * Get or set the loop attribute on the video element.
+     *
+     * @param {boolean} [value]
+     *        - true means that we should loop the video
+     *        - false means that we should not loop the video
+     *
+     * @return {boolean|undefined}
+     *         - The current value of loop when getting
+     *         - Nothing when setting
+     */
+    loop(value?: boolean): boolean | undefined;
+    /**
+     * Get or set the poster image source url
+     *
+     * @fires Player#posterchange
+     *
+     * @param {string} [src]
+     *        Poster image source URL
+     *
+     * @return {string|undefined}
+     *         - The current value of poster when getting
+     *         - Nothing when setting
+     */
+    poster(src?: string): string | undefined;
+    /**
+     * Some techs (e.g. YouTube) can provide a poster source in an
+     * asynchronous way. We want the poster component to use this
+     * poster source so that it covers up the tech's controls.
+     * (YouTube's play button). However we only want to use this
+     * source if the player user hasn't set a poster through
+     * the normal APIs.
+     *
+     * @fires Player#posterchange
+     * @listens Tech#posterchange
+     * @private
+     */
+    private handleTechPosterChange_;
+    /**
+     * Get or set whether or not the controls are showing.
+     *
+     * @fires Player#controlsenabled
+     *
+     * @param {boolean} [bool]
+     *        - true to turn controls on
+     *        - false to turn controls off
+     *
+     * @return {boolean|undefined}
+     *         - The current value of controls when getting
+     *         - Nothing when setting
+     */
+    controls(bool?: boolean): boolean | undefined;
+    /**
+     * Toggle native controls on/off. Native controls are the controls built into
+     * devices (e.g. default iPhone controls) or other techs
+     * (e.g. Vimeo Controls)
+     * **This should only be set by the current tech, because only the tech knows
+     * if it can support native controls**
+     *
+     * @fires Player#usingnativecontrols
+     * @fires Player#usingcustomcontrols
+     *
+     * @param {boolean} [bool]
+     *        - true to turn native controls on
+     *        - false to turn native controls off
+     *
+     * @return {boolean|undefined}
+     *         - The current value of native controls when getting
+     *         - Nothing when setting
+     */
+    usingNativeControls(bool?: boolean): boolean | undefined;
+    usingNativeControls_: any;
+    /**
+     * Set or get the current MediaError
+     *
+     * @fires Player#error
+     *
+     * @param  {MediaError|string|number} [err]
+     *         A MediaError or a string/number to be turned
+     *         into a MediaError
+     *
+     * @return {MediaError|null|undefined}
+     *         - The current MediaError when getting (or null)
+     *         - Nothing when setting
+     */
+    error(err?: MediaError | string | number): MediaError | null | undefined;
+    error_: MediaError;
+    /**
+     * Report user activity
+     *
+     * @param {Object} event
+     *        Event object
+     */
+    reportUserActivity(event: any): void;
+    userActivity_: boolean;
+    /**
+     * Get/set if user is active
+     *
+     * @fires Player#useractive
+     * @fires Player#userinactive
+     *
+     * @param {boolean} [bool]
+     *        - true if the user is active
+     *        - false if the user is inactive
+     *
+     * @return {boolean|undefined}
+     *         - The current value of userActive when getting
+     *         - Nothing when setting
+     */
+    userActive(bool?: boolean): boolean | undefined;
+    /**
+     * Listen for user activity based on timeout value
+     *
+     * @private
+     */
+    private listenForUserActivity_;
+    /**
+     * Gets or sets the current playback rate. A playback rate of
+     * 1.0 represents normal speed and 0.5 would indicate half-speed
+     * playback, for instance.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-playbackrate
+     *
+     * @param {number} [rate]
+     *       New playback rate to set.
+     *
+     * @return {number|undefined}
+     *         - The current playback rate when getting or 1.0
+     *         - Nothing when setting
+     */
+    playbackRate(rate?: number): number | undefined;
+    /**
+     * Gets or sets the current default playback rate. A default playback rate of
+     * 1.0 represents normal speed and 0.5 would indicate half-speed playback, for instance.
+     * defaultPlaybackRate will only represent what the initial playbackRate of a video was, not
+     * not the current playbackRate.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-defaultplaybackrate
+     *
+     * @param {number} [rate]
+     *       New default playback rate to set.
+     *
+     * @return {number|undefined}
+     *         - The default playback rate when getting or 1.0
+     *         - Nothing when setting
+     */
+    defaultPlaybackRate(rate?: number): number | undefined;
+    /**
+     * Gets or sets the audio flag
+     *
+     * @param {boolean} [bool]
+     *        - true signals that this is an audio player
+     *        - false signals that this is not an audio player
+     *
+     * @return {boolean|undefined}
+     *         - The current value of isAudio when getting
+     *         - Nothing when setting
+     */
+    isAudio(bool?: boolean): boolean | undefined;
+    isAudio_: boolean;
+    enableAudioOnlyUI_(): void;
+    disableAudioOnlyUI_(): void;
+    /**
+     * Get the current audioOnlyMode state or set audioOnlyMode to true or false.
+     *
+     * Setting this to `true` will hide all player components except the control bar,
+     * as well as control bar components needed only for video.
+     *
+     * @param {boolean} [value]
+     *         The value to set audioOnlyMode to.
+     *
+     * @return {Promise|boolean}
+     *        A Promise is returned when setting the state, and a boolean when getting
+     *        the present state
+     */
+    audioOnlyMode(value?: boolean): Promise<any> | boolean;
+    enablePosterModeUI_(): void;
+    disablePosterModeUI_(): void;
+    /**
+     * Get the current audioPosterMode state or set audioPosterMode to true or false
+     *
+     * @param {boolean} [value]
+     *         The value to set audioPosterMode to.
+     *
+     * @return {Promise|boolean}
+     *         A Promise is returned when setting the state, and a boolean when getting
+     *        the present state
+     */
+    audioPosterMode(value?: boolean): Promise<any> | boolean;
+    /**
+     * A helper method for adding a {@link TextTrack} to our
+     * {@link TextTrackList}.
+     *
+     * In addition to the W3C settings we allow adding additional info through options.
+     *
+     * @see http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack
+     *
+     * @param {string} [kind]
+     *        the kind of TextTrack you are adding
+     *
+     * @param {string} [label]
+     *        the label to give the TextTrack label
+     *
+     * @param {string} [language]
+     *        the language to set on the TextTrack
+     *
+     * @return {TextTrack|undefined}
+     *         the TextTrack that was added or undefined
+     *         if there is no tech
+     */
+    addTextTrack(kind?: string, label?: string, language?: string): TextTrack | undefined;
+    /**
+     * Create a remote {@link TextTrack} and an {@link HTMLTrackElement}.
+     *
+     * @param {Object} options
+     *        Options to pass to {@link HTMLTrackElement} during creation. See
+     *        {@link HTMLTrackElement} for object properties that you should use.
+     *
+     * @param {boolean} [manualCleanup=false] if set to true, the TextTrack will not be removed
+     *                                        from the TextTrackList and HtmlTrackElementList
+     *                                        after a source change
+     *
+     * @return { import('./tracks/html-track-element').default }
+     *         the HTMLTrackElement that was created and added
+     *         to the HtmlTrackElementList and the remote
+     *         TextTrackList
+     *
+     */
+    addRemoteTextTrack(options: any, manualCleanup?: boolean): import('./tracks/html-track-element').default;
+    /**
+     * Remove a remote {@link TextTrack} from the respective
+     * {@link TextTrackList} and {@link HtmlTrackElementList}.
+     *
+     * @param {Object} track
+     *        Remote {@link TextTrack} to remove
+     *
+     * @return {undefined}
+     *         does not return anything
+     */
+    removeRemoteTextTrack(obj?: {}): undefined;
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object|undefined}
+     *         An object with supported media playback quality metrics or undefined if there
+     *         is no tech or the tech does not support it.
+     */
+    getVideoPlaybackQuality(): any | undefined;
+    /**
+     * Get video width
+     *
+     * @return {number}
+     *         current video width
+     */
+    videoWidth(): number;
+    /**
+     * Get video height
+     *
+     * @return {number}
+     *         current video height
+     */
+    videoHeight(): number;
+    /**
+     * Set or get the player's language code.
+     *
+     * Changing the language will trigger
+     * [languagechange]{@link Player#event:languagechange}
+     * which Components can use to update control text.
+     * ClickableComponent will update its control text by default on
+     * [languagechange]{@link Player#event:languagechange}.
+     *
+     * @fires Player#languagechange
+     *
+     * @param {string} [code]
+     *        the language code to set the player to
+     *
+     * @return {string|undefined}
+     *         - The current language code when getting
+     *         - Nothing when setting
+     */
+    language(code?: string): string | undefined;
+    language_: string;
+    /**
+     * Get the player's language dictionary
+     * Merge every time, because a newly added plugin might call videojs.addLanguage() at any time
+     * Languages specified directly in the player options have precedence
+     *
+     * @return {Array}
+     *         An array of of supported languages
+     */
+    languages(): any[];
+    /**
+     * returns a JavaScript object representing the current track
+     * information. **DOES not return it as JSON**
+     *
+     * @return {Object}
+     *         Object representing the current of track info
+     */
+    toJSON(): any;
+    /**
+     * Creates a simple modal dialog (an instance of the {@link ModalDialog}
+     * component) that immediately overlays the player with arbitrary
+     * content and removes itself when closed.
+     *
+     * @param {string|Function|Element|Array|null} content
+     *        Same as {@link ModalDialog#content}'s param of the same name.
+     *        The most straight-forward usage is to provide a string or DOM
+     *        element.
+     *
+     * @param {Object} [options]
+     *        Extra options which will be passed on to the {@link ModalDialog}.
+     *
+     * @return {ModalDialog}
+     *         the {@link ModalDialog} that was created
+     */
+    createModal(content: string | Function | Element | any[] | null, options?: any): ModalDialog;
+    /**
+     * Change breakpoint classes when the player resizes.
+     *
+     * @private
+     */
+    private updateCurrentBreakpoint_;
+    breakpoint_: string;
+    /**
+     * Removes the current breakpoint.
+     *
+     * @private
+     */
+    private removeCurrentBreakpoint_;
+    /**
+     * Get or set breakpoints on the player.
+     *
+     * Calling this method with an object or `true` will remove any previous
+     * custom breakpoints and start from the defaults again.
+     *
+     * @param  {Object|boolean} [breakpoints]
+     *         If an object is given, it can be used to provide custom
+     *         breakpoints. If `true` is given, will set default breakpoints.
+     *         If this argument is not given, will simply return the current
+     *         breakpoints.
+     *
+     * @param  {number} [breakpoints.tiny]
+     *         The maximum width for the "vjs-layout-tiny" class.
+     *
+     * @param  {number} [breakpoints.xsmall]
+     *         The maximum width for the "vjs-layout-x-small" class.
+     *
+     * @param  {number} [breakpoints.small]
+     *         The maximum width for the "vjs-layout-small" class.
+     *
+     * @param  {number} [breakpoints.medium]
+     *         The maximum width for the "vjs-layout-medium" class.
+     *
+     * @param  {number} [breakpoints.large]
+     *         The maximum width for the "vjs-layout-large" class.
+     *
+     * @param  {number} [breakpoints.xlarge]
+     *         The maximum width for the "vjs-layout-x-large" class.
+     *
+     * @param  {number} [breakpoints.huge]
+     *         The maximum width for the "vjs-layout-huge" class.
+     *
+     * @return {Object}
+     *         An object mapping breakpoint names to maximum width values.
+     */
+    breakpoints(breakpoints?: any | boolean): any;
+    breakpoints_: any;
+    /**
+     * Get or set a flag indicating whether or not this player should adjust
+     * its UI based on its dimensions.
+     *
+     * @param  {boolean} [value]
+     *         Should be `true` if the player should adjust its UI based on its
+     *         dimensions; otherwise, should be `false`.
+     *
+     * @return {boolean|undefined}
+     *         Will be `true` if this player should adjust its UI based on its
+     *         dimensions; otherwise, will be `false`.
+     *         Nothing if setting
+     */
+    responsive(value?: boolean): boolean | undefined;
+    responsive_: any;
+    /**
+     * Get current breakpoint name, if any.
+     *
+     * @return {string}
+     *         If there is currently a breakpoint set, returns a the key from the
+     *         breakpoints object matching it. Otherwise, returns an empty string.
+     */
+    currentBreakpoint(): string;
+    /**
+     * Get the current breakpoint class name.
+     *
+     * @return {string}
+     *         The matching class name (e.g. `"vjs-layout-tiny"` or
+     *         `"vjs-layout-large"`) for the current breakpoint. Empty string if
+     *         there is no current breakpoint.
+     */
+    currentBreakpointClass(): string;
+    /**
+     * An object that describes a single piece of media.
+     *
+     * Properties that are not part of this type description will be retained; so,
+     * this can be viewed as a generic metadata storage mechanism as well.
+     *
+     * @see      {@link https://wicg.github.io/mediasession/#the-mediametadata-interface}
+     * @typedef  {Object} Player~MediaObject
+     *
+     * @property {string} [album]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {string} [artist]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {Object[]} [artwork]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API. If not specified, will be populated via the `poster`, if
+     *           available.
+     *
+     * @property {string} [poster]
+     *           URL to an image that will display before playback.
+     *
+     * @property {Tech~SourceObject|Tech~SourceObject[]|string} [src]
+     *           A single source object, an array of source objects, or a string
+     *           referencing a URL to a media source. It is _highly recommended_
+     *           that an object or array of objects is used here, so that source
+     *           selection algorithms can take the `type` into account.
+     *
+     * @property {string} [title]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {Object[]} [textTracks]
+     *           An array of objects to be used to create text tracks, following
+     *           the {@link https://www.w3.org/TR/html50/embedded-content-0.html#the-track-element|native track element format}.
+     *           For ease of removal, these will be created as "remote" text
+     *           tracks and set to automatically clean up on source changes.
+     *
+     *           These objects may have properties like `src`, `kind`, `label`,
+     *           and `language`, see {@link Tech#createRemoteTextTrack}.
+     */
+    /**
+     * Populate the player using a {@link Player~MediaObject|MediaObject}.
+     *
+     * @param  {Player~MediaObject} media
+     *         A media object.
+     *
+     * @param  {Function} ready
+     *         A callback to be called when the player is ready.
+     */
+    loadMedia(media: any, ready: Function): void;
+    /**
+     * Get a clone of the current {@link Player~MediaObject} for this player.
+     *
+     * If the `loadMedia` method has not been used, will attempt to return a
+     * {@link Player~MediaObject} based on the current state of the player.
+     *
+     * @return {Player~MediaObject}
+     */
+    getMedia(): Player;
+    /**
+     * Set debug mode to enable/disable logs at info level.
+     *
+     * @param {boolean} enabled
+     * @fires Player#debugon
+     * @fires Player#debugoff
+     * @return {boolean|undefined}
+     */
+    debug(enabled: boolean): boolean | undefined;
+    previousLogLevel_: any;
+    /**
+     * Set or get current playback rates.
+     * Takes an array and updates the playback rates menu with the new items.
+     * Pass in an empty array to hide the menu.
+     * Values other than arrays are ignored.
+     *
+     * @fires Player#playbackrateschange
+     * @param {number[]} [newRates]
+     *                   The new rates that the playback rates menu should update to.
+     *                   An empty array will hide the menu
+     * @return {number[]} When used as a getter will return the current playback rates
+     */
+    playbackRates(newRates?: number[]): number[];
+    /**
+     * Get or set the `Player`'s crossorigin option. For the HTML5 player, this
+     * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+     * behavior.
+     *
+     * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+     *
+     * @param {string} [value]
+     *        The value to set the `Player`'s crossorigin to. If an argument is
+     *        given, must be one of `anonymous` or `use-credentials`.
+     *
+     * @return {string|undefined}
+     *         - The current crossorigin value of the `Player` when getting.
+     *         - undefined when setting
+     */
+    crossorigin: (value?: string | null) => string | null | undefined;
+    options_: {
+        techOrder: any[];
+        html5: {};
+        enableSourceset: boolean;
+        inactivityTimeout: number;
+        playbackRates: any[];
+        liveui: boolean;
+        children: string[];
+        language: any;
+        languages: {};
+        notSupportedMessage: string;
+        normalizeAutoplay: boolean;
+        fullscreen: {
+            options: {
+                navigationUI: string;
+            };
+        };
+        breakpoints: {};
+        responsive: boolean;
+        audioOnlyMode: boolean;
+        audioPosterMode: boolean;
+        enableSmoothSeeking: boolean;
+    };
+}
+declare namespace Player {
+    const players: any;
+}
+import Component from "./component.js";
+import Tech from "./tech/tech.js";
+import MediaError from "./media-error.js";
+import ModalDialog from "./modal-dialog";
+//# sourceMappingURL=player.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/player.d.ts.map b/priv/static/video.js/types/player.d.ts.map
new file mode 100644
index 0000000..a920a94
--- /dev/null
+++ b/priv/static/video.js/types/player.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"player.d.ts","sourceRoot":"","sources":["../../src/js/player.js"],"names":[],"mappings":";AA0RA;;;;;;;;;;;GAWG;AACH;IA0wJE;;;;;;;;;OASG;IACH,2BAPW,OAAO,OAuDjB;IAl0JD;;;;;;;;;;;OAWG;IACH,iBATW,OAAO,mCAkTjB;IAlQC,iDAA8E;IAC9E,2CAAiE;IAEjE,sCAAwD;IACxD,sCAAwD;IACxD,gDAA4E;IAE5E,wCAA4D;IAC5D,8CAAwE;IACxE,6CAAsE;IACtE,4CAAoE;IACpE,2CAAkE;IAClE,sCAAwD;IAGxD,uBAA0B;IAG1B,SAAiC;IAGjC,YAA2B;IAG3B,2BAA8B;IAI9B,wBAA0B;IAM1B,qBAAwB;IAGxB,qBAAwB;IAGxB,uBAA0B;IAG1B,wBAA2B;IAG3B,0BAA6B;IAG7B;;;MAGC;IAaD,aAAc;IAGd,mBAAkD;IAahD,eAAkC;IAQpC,mBAAmB;IACnB,SADU,MAAM,CACmB;IAGnC,sBAAsB;IACtB,WADW,OAAO,CACiB;IAQnC,sBAAyB;IACzB,sBAAwB;IACxB,4BAA8B;IA0B9B,oBAAuB;IAEvB,aAA0B;IAqC1B,mBAAqB;IA2FvB;;;;;;;OAOG;IACH,gBA+DC;IA9CG,kBAAoB;IAqBpB,qBAA2B;IA2B/B;;;;;OAKG;IACH,YAHY,OAAO,CAwKlB;IAjDC,eAAkB;IAClB,gBAAmB;IAkDrB;;;;;;;;;;;;;;OAcG;IACH,oBARW,MAAM,GAAC,IAAI,GAIV,MAAM,GAAC,IAAI,GAAC,SAAS,CAqBhC;IAED;;;;;;;;;;OAUG;IACH,cAPW,MAAM,GAAC,MAAM,GAGZ,MAAM,GAAC,SAAS,CAM3B;IAED;;;;;;;;;;OAUG;IACH,eAPW,MAAM,GAAC,MAAM,GAGZ,MAAM,GAAC,SAAS,CAM3B;IAED;;;;;;;;;;;;;OAaG;IACH,qBAXW,MAAM,UAKN,MAAM,GAAC,MAAM,GAGZ,MAAM,CA0BjB;IAED;;;;;;;;;;;;;OAaG;IACH,aATW,OAAO,GAKN,OAAO,GAAC,SAAS,CAyB5B;IAED;;;;;;;;;;;;;OAaG;IACH,YATW,OAAO,GAKN,OAAO,GAAC,SAAS,CAiB5B;IAED;;;;;;;;OAQG;IAEH;;;;;;;;;OASG;IACH,oBAPW,MAAM,GAGL,MAAM,GAAC,SAAS,CAoB3B;IAPC,qBAAyB;IAS3B;;;;;OAKG;IACH,uBA8EC;IAED;;;;;;;;;;;OAWG;IACH,kBAuIC;IAtHC,kBAA8B;IA0D9B,WAAuC;IA8DzC;;;;OAIG;IACH,oBAqBC;IAdC,uBAAsE;IAgBxE;;;;;;;;;;OAUG;IACH,oBAHY,IAAI,CAUf;IAED;;;;;;OAMG;IAEH;;;;;OAKG;IACH;;;;YATc,MAAM;MAanB;IAED;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,kCAiBC;IAED;;;;;OAKG;IACH,qCASC;IAED;;;;OAIG;IACH,yBAaC;IAED;;;;;;OAMG;IACH,6BA4BC;IAED;;;;;OAKG;IACH,0CAwDC;IAED;;;;;;;;;;OAUG;IACH,2CAkDC;IAED;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACH;;;;;;OAMG;IACH,6BA+CC;IANC;;;MAAsE;IAQxE;;;;;;;;;;OAUG;IACH,oBAPW,OAAO,GAIN,OAAO,CAoBlB;IAED;;;;;;;OAOG;IACH,wBAcC;IAED;;;;;;;;;;OAUG;IACH,8BAaC;IAED;;;;;;OAMG;IACH,2BAqBC;IAED;;;;;;;OAOG;IACH,2BASC;IAED;;;;;;OAMG;IACH,kCAUC;IAED;;;;;;OAMG;IACH,2BASC;IAED;;;;;;OAMG;IACH,2BASC;IAED;;;;;;OAMG;IACH,0BASC;IAED;;;;;;OAMG;IACH,yBAUC;IAED;;;;;;OAMG;IACH,yBAiBC;IAED;;;;;OAKG;IACH,kCAEC;IAED;;;;;;;;OAQG;IACH,yBA4BC;IAED;;;;;;;;OAQG;IACH,+BA0CC;IAED;;;;;;OAMG;IACH,uBAEC;IAED;;;;;OAKG;IACH,8BAEC;IADC,uBAAsC;IAGxC;;;;;OAKG;IACH,6BAIC;IAED;;;;;;;;;OASG;IACH,4BAKC;IAED;;OAEG;IACH,+BAMC;IAED;;OAEG;IACH,wCAiBC;IAED;;;;;;;;;;;;OAYG;IACH,oCAUC;IAED,uDAEC;IAED;;OAEG;IACH,qCAMC;IAED;;;;;;;;OAQG;IACH,yCAEC;IAED;;;;;;;;OAQG;IACH,yCAEC;IAED;;;;;OAKG;IACH,yBAMC;IAED;;;;;;OAMG;IACH,4BAcC;IAED;;;;;OAKG;IACH,gBAEC;IAED;;;;;;;OAOG;IACH,oBAoBC;IAnBC;;;;;;;;;;;;;MAkBC;IAGH;;;;;;;;;;OAUG;IACH,kBAoBC;IAED;;;;;;;;;;;;OAYG;IACH,iBAmCC;IAED;;;;;;;;;OASG;IACH,QAPY,eAAQ,SAAS,CAW5B;IAED;;;;;;;;OAQG;IACH,cA2CC;IAlCG,8BAAuB;IAoC3B;;;;OAIG;IACH,gCAQC;IAED;;;;;;;;OAQG;IACH,uBAHW,SAAS,eAAQ,QAa3B;IAED;;OAEG;IACH,cAEC;IAED;;;;;;OAMG;IACH,UAJY,OAAO,CAOlB;IAED;;;;;;;OAOG;IACH,UAJa,OAAO,cAAc,EAAE,SAAS,CAM5C;IAED;;;;;;;;;;;OAWG;IACH,wBAPW,OAAO,GAGN,OAAO,GAAC,SAAS,CAgB5B;IAED;;;;;;;;;OASG;IACH,sBAPW,MAAM,GAAC,MAAM,GAGZ,MAAM,GAAC,SAAS,CAiC3B;IAED;;;;OAIG;IACH,uBAEC;IAED;;;;;;;;;;;;;;;;OAgBG;IACH,mBAPW,MAAM,GAGL,MAAM,GAAC,SAAS,CAqC3B;IAED;;;;;;OAMG;IACH,iBAHY,MAAM,CAKjB;IAED;;;;;;OAMG;IACH,wBAHY,MAAM,CAKjB;IAKD;;;;;;;;;OASG;IACH,YAHa,OAAO,cAAc,EAAE,SAAS,CAW5C;IAED;;;;;;;;OAQG;IACH,YAHa,OAAO,cAAc,EAAE,SAAS,CAW5C;IAED;;;;OAIG;IACH,WAFY,OAAO,CAIlB;IAED;;;;OAIG;IACH,SAFY,OAAO,CAIlB;IAED;;;;;;;;;;;;;;;;;;OAkBG;IACH,gBAFY,MAAM,CAIjB;IAED;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,cAFY,MAAM,CAIjB;IAED;;;;;;;OAOG;IACH,mBAJY,MAAM,CAMjB;IAED;;;;;;OAMG;IACH,eAHY,MAAM,CAajB;IAED;;;;;;;;;;;OAWG;IACH,0BATY,MAAM,GAMN,MAAM,GAAC,SAAS,CAsB3B;IAED;;;;;;;;;;;OAWG;IACH,cATW,OAAO,GAIN,OAAO,GAAC,SAAS,CAW5B;IAED;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,4BATW,OAAO,GAIN,OAAO,GAAC,SAAS,CAU5B;IAED;;;;;;;;;;;;;;OAcG;IACH,oBAMC;IAED;;;;;;OAMG;IACH,sBAHY,OAAO,CAKlB;IAED;;;;;;;;;;;;;;;OAeG;IACH,oBARY,OAAO,GAGP,OAAO,GAAC,SAAS,CA0B5B;IAED;;;;;;;;;;;;;OAaG;IACH,yDA+BC;IAED,sDAqCC;IAED;;;;OAIG;IACH,+BA4BC;IAED,6BAiBC;IAED;;;;;OAKG;IACH,wBAqBC;IAnBC,sBAAwB;IAGxB,qBAA8D;IAkBhE;;;;;;OAMG;IACH,0BAHW,MAAM,QAahB;IAED;;;;OAIG;IACH,uBAkBC;IAED;;;;;;OAMG;IACH,gCAJW,OAAO,OAWjB;IAED;;;;;;;;;;;OAWG;IACH,6BARY,OAAO,GAGP,OAAO,GAAC,SAAS,CAY5B;IALG,+BAAoC;IAOxC;;;;;;;;;;;;;;;;;;OAkBG;IACH,wCAkDC;IAED;;;;;;;;;OASG;IACH,qCAgBC;IAgED;;;;;;;;;;OAUG;IACH,qBAHW,KAAK,QAuCf;IAED;;;;;;;;;;OAUG;IACH,kBANW,MAAM,GAGL,MAAM,CAkCjB;IAED;;;;;;;;;;OAUG;IACH,8BAHY,MAAO,OAAO,CA4DzB;IAED;;;;;;;;;;;;;;;;OAgBG;IACH,kCAPW,OAAO,GAGN,MAAM,GAAC,SAAS,CAgG3B;IALG,+BAGC;IAIL;;;;;;;;;;;;;;OAcG;IACH,kBAJY,MAAM,GAAC,SAAS,CAM3B;IAED;;;;;;;;;;;;OAYG;IACH,aAmCC;IAED;;OAEG;IACH,aAUC;IAED;;;;OAIG;IACH,cAQC;IAED,iBA0BC;IAED;;;OAGG;IACH,2BAIC;IAED;;OAEG;IACH,0BA8BC;IAED;;OAEG;IACH,2BAGC;IAED;;OAEG;IACH,wBAGC;IAED;;;;;OAKG;IACH,kBAHY,IAAI,CAaf;IAED;;;;;OAKG;IACH,iBAHY,IAAI,CAKf;IAED;;;;;;OAMG;IACH,cAHY,MAAM,CAKjB;IAED;;;;;;;OAOG;IACH,eAHY,MAAM,CAKjB;IAED;;;;;;;;;OASG;IACH,gBAPW,MAAM,GAAC,MAAM,GAAC,UAAU,GAGvB,MAAM,GAAC,SAAS,CAW3B;IAED;;;;;;;;;;;;;;;;OAgBG;IACH,iBAZW,OAAO,GAAC,MAAM,GAAC,OAAO,GAAC,KAAK,GAQ3B,OAAO,GAAC,MAAM,GAAC,SAAS,CAqCnC;IAED;;;;;;;;;;;;;;;OAeG;IACH,oBAZW,OAAO,GAMN,MAAM,GAAC,SAAS,CAY3B;IAED;;;;;;;;;;OAUG;IACH,aARW,OAAO,GAIN,OAAO,GAAC,SAAS,CAW5B;IAED;;;;;;;;;;;OAWG;IACH,aAPW,MAAM,GAGL,MAAM,GAAC,SAAS,CAmC3B;IAED;;;;;;;;;;;OAWG;IACH,gCAYC;IAED;;;;;;;;;;;;OAYG;IACH,gBARW,OAAO,GAIN,OAAO,GAAC,SAAS,CA6C5B;IAED;;;;;;;;;;;;;;;;;OAiBG;IACH,2BARW,OAAO,GAIN,OAAO,GAAC,SAAS,CAuC5B;IAvBC,0BAAgC;IAyBlC;;;;;;;;;;;;OAYG;IACH,YARY,UAAU,GAAC,MAAM,GAAC,MAAM,GAIxB,UAAU,GAAC,IAAI,GAAC,SAAS,CAwEpC;IA3BG,mBAAkB;IA6BtB;;;;;OAKG;IACH,qCAEC;IADC,uBAAyB;IAG3B;;;;;;;;;;;;;OAaG;IACH,kBARW,OAAO,GAIN,OAAO,GAAC,SAAS,CAoD5B;IAED;;;;OAIG;IACH,+BA2GC;IAED;;;;;;;;;;;;;OAaG;IACH,oBAPW,MAAM,GAGL,MAAM,GAAC,SAAS,CAgB3B;IAED;;;;;;;;;;;;;;OAcG;IACH,2BAPW,MAAM,GAGL,MAAM,GAAC,SAAS,CAa3B;IAED;;;;;;;;;;OAUG;IACH,eARW,OAAO,GAIN,OAAO,GAAC,SAAS,CAW5B;IALG,kBAAsB;IAO1B,2BA2BC;IAED,4BASC;IAED;;;;;;;;;;;;OAYG;IACH,sBAPW,OAAO,GAGN,eAAQ,OAAO,CAiC1B;IAED,4BAOC;IAED,6BAOC;IAED;;;;;;;;;OASG;IACH,wBAPW,OAAO,GAGN,eAAQ,OAAO,CAiC1B;IAED;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,oBAbW,MAAM,UAGN,MAAM,aAGN,MAAM,GAGL,SAAS,GAAC,SAAS,CAQ9B;IAED;;;;;;;;;;;;;;;;OAgBG;IACH,iDAVW,OAAO,GAIL,OAAO,6BAA6B,EAAE,OAAO,CAUzD;IAED;;;;;;;;;OASG;IACH,iCAHY,SAAS,CAgBpB;IAED;;;;;;;;;OASG;IACH,2BAJY,MAAO,SAAS,CAM3B;IAED;;;;;OAKG;IACH,cAHY,MAAM,CAKjB;IAED;;;;;OAKG;IACH,eAHY,MAAM,CAKjB;IAED;;;;;;;;;;;;;;;;;OAiBG;IACH,gBAPW,MAAM,GAGL,MAAM,GAAC,SAAS,CAuB3B;IAbG,kBAA2C;IAe/C;;;;;;;OAOG;IACH,mBAEC;IAED;;;;;;OAMG;IACH,cAgBC;IAED;;;;;;;;;;;;;;;OAeG;IACH,qBAXW,MAAM,cAAU,OAAO,WAAO,IAAI,kBAQjC,WAAW,CAgBtB;IAED;;;;OAIG;IACH,iCA6BC;IAJK,oBAAsC;IAM5C;;;;OAIG;IACH,iCAQC;IAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmCG;IACH,0BA9BY,MAAO,OAAO,OA8CzB;IARC,kBAAuE;IAUzE;;;;;;;;;;;;OAYG;IACH,mBATY,OAAO,GAIP,OAAO,GAAC,SAAS,CAoC5B;IAfC,iBAAwB;IAiB1B;;;;;;OAMG;IACH,qBAJY,MAAM,CAMjB;IAED;;;;;;;OAOG;IACH,0BALY,MAAM,CAOjB;IAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2CG;IAEH;;;;;;;;OAQG;IACH,6CA8CC;IAED;;;;;;;OAOG;IACH,YAFY,MAAM,CA2BjB;IA8DD;;;;;;;OAOG;IACH,eALW,OAAO,GAGN,OAAO,GAAC,SAAS,CAkB5B;IAVG,uBAAuC;IAY3C;;;;;;;;;;;OAWG;IACH,yBALW,MAAM,EAAE,GAGP,MAAM,EAAE,CA0BnB;IAqEH;;;;;;;;;;;;;;OAcG;IACH,sBAl6Ia,MAAM,GAAC,IAAI,KAIV,MAAM,GAAC,IAAI,GAAC,SAAS,CA85IP;IAsB5B;;;;;;;;;;;;;;;;;;;;;;MAAyB;CAzGxB"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/plugin.d.ts b/priv/static/video.js/types/plugin.d.ts
new file mode 100644
index 0000000..451a4eb
--- /dev/null
+++ b/priv/static/video.js/types/plugin.d.ts
@@ -0,0 +1,184 @@
+export default Plugin;
+export type PluginEventHash = {
+    /**
+     *           For basic plugins, the return value of the plugin function. For
+     *           advanced plugins, the plugin instance on which the event is fired.
+     */
+    instance: string;
+    /**
+     *           The name of the plugin.
+     */
+    name: string;
+    /**
+     *           For basic plugins, the plugin function. For advanced plugins, the
+     *           plugin class/constructor.
+     */
+    plugin: string;
+};
+/**
+ * Parent class for all advanced plugins.
+ *
+ * @mixes   module:evented~EventedMixin
+ * @mixes   module:stateful~StatefulMixin
+ * @fires   Player#beforepluginsetup
+ * @fires   Player#beforepluginsetup:$name
+ * @fires   Player#pluginsetup
+ * @fires   Player#pluginsetup:$name
+ * @listens Player#dispose
+ * @throws  {Error}
+ *          If attempting to instantiate the base {@link Plugin} class
+ *          directly instead of via a sub-class.
+ */
+declare class Plugin {
+    /**
+     * Determines if a plugin is a basic plugin (i.e. not a sub-class of `Plugin`).
+     *
+     * @param   {string|Function} plugin
+     *          If a string, matches the name of a plugin. If a function, will be
+     *          tested directly.
+     *
+     * @return {boolean}
+     *          Whether or not a plugin is a basic plugin.
+     */
+    static isBasic(plugin: string | Function): boolean;
+    /**
+     * Register a Video.js plugin.
+     *
+     * @param   {string} name
+     *          The name of the plugin to be registered. Must be a string and
+     *          must not match an existing plugin or a method on the `Player`
+     *          prototype.
+     *
+     * @param   {typeof Plugin|Function} plugin
+     *          A sub-class of `Plugin` or a function for basic plugins.
+     *
+     * @return {typeof Plugin|Function}
+     *          For advanced plugins, a factory function for that plugin. For
+     *          basic plugins, a wrapper function that initializes the plugin.
+     */
+    static registerPlugin(name: string, plugin: typeof Plugin | Function): typeof Plugin | Function;
+    /**
+     * De-register a Video.js plugin.
+     *
+     * @param  {string} name
+     *         The name of the plugin to be de-registered. Must be a string that
+     *         matches an existing plugin.
+     *
+     * @throws {Error}
+     *         If an attempt is made to de-register the base plugin.
+     */
+    static deregisterPlugin(name: string): void;
+    /**
+     * Gets an object containing multiple Video.js plugins.
+     *
+     * @param   {Array} [names]
+     *          If provided, should be an array of plugin names. Defaults to _all_
+     *          plugin names.
+     *
+     * @return {Object|undefined}
+     *          An object containing plugin(s) associated with their name(s) or
+     *          `undefined` if no matching plugins exist).
+     */
+    static getPlugins(names?: any[]): any | undefined;
+    /**
+     * Gets a plugin's version, if available
+     *
+     * @param   {string} name
+     *          The name of a plugin.
+     *
+     * @return {string}
+     *          The plugin's version or an empty string.
+     */
+    static getPluginVersion(name: string): string;
+    /**
+     * Creates an instance of this class.
+     *
+     * Sub-classes should call `super` to ensure plugins are properly initialized.
+     *
+     * @param {Player} player
+     *        A Video.js player instance.
+     */
+    constructor(player: Player);
+    player: Player;
+    log: any;
+    /**
+     * Disposes a plugin.
+     *
+     * Subclasses can override this if they want, but for the sake of safety,
+     * it's probably best to subscribe the "dispose" event.
+     *
+     * @fires Plugin#dispose
+     */
+    dispose(): void;
+    /**
+     * Get the version of the plugin that was set on <pluginName>.VERSION
+     */
+    version(): any;
+    /**
+     * Each event triggered by plugins includes a hash of additional data with
+     * conventional properties.
+     *
+     * This returns that object or mutates an existing hash.
+     *
+     * @param   {Object} [hash={}]
+     *          An object to be used as event an event hash.
+     *
+     * @return {PluginEventHash}
+     *          An event hash object with provided properties mixed-in.
+     */
+    getEventHash(hash?: any): PluginEventHash;
+    /**
+     * Triggers an event on the plugin object and overrides
+     * {@link module:evented~EventedMixin.trigger|EventedMixin.trigger}.
+     *
+     * @param   {string|Object} event
+     *          An event type or an object with a type property.
+     *
+     * @param   {Object} [hash={}]
+     *          Additional data hash to merge with a
+     *          {@link PluginEventHash|PluginEventHash}.
+     *
+     * @return {boolean}
+     *          Whether or not default was prevented.
+     */
+    trigger(event: string | any, hash?: any): boolean;
+    /**
+     * Handles "statechanged" events on the plugin. No-op by default, override by
+     * subclassing.
+     *
+     * @abstract
+     * @param    {Event} e
+     *           An event object provided by a "statechanged" event.
+     *
+     * @param    {Object} e.changes
+     *           An object describing changes that occurred with the "statechanged"
+     *           event.
+     */
+    handleStateChanged(e: Event): void;
+    state: any;
+}
+declare namespace Plugin {
+    export { getPlugin };
+    export { BASE_PLUGIN_NAME };
+}
+import Player from "./player";
+/**
+ * Get a single registered plugin by name.
+ *
+ * @private
+ * @param   {string} name
+ *          The name of a plugin.
+ *
+ * @return {typeof Plugin|Function|undefined}
+ *          The plugin (or undefined).
+ */
+declare function getPlugin(name: string): typeof Plugin | Function | undefined;
+/**
+ * The base plugin name.
+ *
+ * @private
+ * @constant
+ * @type {string}
+ */
+declare const BASE_PLUGIN_NAME: string;
+//# sourceMappingURL=plugin.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/plugin.d.ts.map b/priv/static/video.js/types/plugin.d.ts.map
new file mode 100644
index 0000000..4c5f2c2
--- /dev/null
+++ b/priv/static/video.js/types/plugin.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/js/plugin.js"],"names":[],"mappings":";;;;;;cAigBc,MAAM;;;;UAIN,MAAM;;;;;YAGN,MAAM;;AA3VpB;;;;;;;;;;;;;GAaG;AACH;IA+HE;;;;;;;;;OASG;IACH,uBAPa,MAAM,WAAS,GAIhB,OAAO,CAOlB;IAED;;;;;;;;;;;;;;OAcG;IACH,4BAZa,MAAM,UAKN,aAAa,WAAS,GAGvB,aAAa,WAAS,CAgCjC;IAED;;;;;;;;;OASG;IACH,8BAPY,MAAM,QAejB;IAED;;;;;;;;;;OAUG;IACH,kCAJY,MAAO,SAAS,CAiB3B;IAED;;;;;;;;OAQG;IACH,8BANa,MAAM,GAGP,MAAM,CAOjB;IArPD;;;;;;;OAOG;IACH,oBAHW,MAAM,EA4BhB;IApBC,eAAoB;IAGlB,SAAkD;IA6EtD;;;;;;;OAOG;IACH,gBAsBC;IAxFD;;OAEG;IACH,eAEC;IAED;;;;;;;;;;;OAWG;IACH,0BAHY,eAAe,CAQ1B;IAED;;;;;;;;;;;;;OAaG;IACH,eAVa,MAAM,MAAO,eAOd,OAAO,CAKlB;IAED;;;;;;;;;;;OAWG;IACH,sBAPc,KAAK,QAOK;IA2BR,WAAiB;CAgIlC;;;;;;AApYD;;;;;;;;;GASG;AACH,iCANa,MAAM,GAGP,aAAa,cAAU,SAAS,CAGoC;AAhDhF;;;;;;GAMG;AACH,gCAFU,MAAM,CAEkB"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/poster-image.d.ts b/priv/static/video.js/types/poster-image.d.ts
new file mode 100644
index 0000000..d464d4d
--- /dev/null
+++ b/priv/static/video.js/types/poster-image.d.ts
@@ -0,0 +1,84 @@
+export default PosterImage;
+/**
+ * A `ClickableComponent` that handles showing the poster image for the player.
+ *
+ * @extends ClickableComponent
+ */
+declare class PosterImage extends ClickableComponent {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should attach to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player: import('./player').default, options?: any);
+    update_: (e: any) => void;
+    /**
+     * Create the `PosterImage`s DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(): Element;
+    /**
+     * Get or set the `PosterImage`'s crossOrigin option.
+     *
+     * @param {string|null} [value]
+     *        The value to set the crossOrigin to. If an argument is
+     *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+     *
+     * @return {string|null}
+     *         - The current crossOrigin value of the `Player` when getting.
+     *         - undefined when setting
+     */
+    crossOrigin(value?: string | null): string | null;
+    /**
+     * An {@link EventTarget~EventListener} for {@link Player#posterchange} events.
+     *
+     * @listens Player#posterchange
+     *
+     * @param {Event} [event]
+     *        The `Player#posterchange` event that triggered this function.
+     */
+    update(event?: Event): void;
+    /**
+     * Set the source of the `PosterImage` depending on the display method. (Re)creates
+     * the inner picture and img elementss when needed.
+     *
+     * @param {string} [url]
+     *        The URL to the source for the `PosterImage`. If not specified or falsy,
+     *        any source and ant inner picture/img are removed.
+     */
+    setSrc(url?: string): void;
+    /**
+     * An {@link EventTarget~EventListener} for clicks on the `PosterImage`. See
+     * {@link ClickableComponent#handleClick} for instances where this will be triggered.
+     *
+     * @listens tap
+     * @listens click
+     * @listens keydown
+     *
+     * @param {Event} event
+     +        The `click`, `tap` or `keydown` event that caused this function to be called.
+     */
+    handleClick(event: Event): void;
+    /**
+     * Get or set the `PosterImage`'s crossorigin option. For the HTML5 player, this
+     * sets the `crossOrigin` property on the `<img>` tag to control the CORS
+     * behavior.
+     *
+     * @param {string|null} [value]
+     *        The value to set the `PosterImages`'s crossorigin to. If an argument is
+     *        given, must be one of `anonymous` or `use-credentials`.
+     *
+     * @return {string|null|undefined}
+     *         - The current crossorigin value of the `Player` when getting.
+     *         - undefined when setting
+     */
+    crossorigin: (value?: string | null) => string | null;
+}
+import ClickableComponent from "./clickable-component.js";
+//# sourceMappingURL=poster-image.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/poster-image.d.ts.map b/priv/static/video.js/types/poster-image.d.ts.map
new file mode 100644
index 0000000..6306168
--- /dev/null
+++ b/priv/static/video.js/types/poster-image.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"poster-image.d.ts","sourceRoot":"","sources":["../../src/js/poster-image.js"],"names":[],"mappings":";AAQA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,UAAU,EAAE,OAAO,iBAarC;IAFC,0BAAoC;IAYtC;;;;;OAKG;IACH,YAHY,OAAO,CAOlB;IAED;;;;;;;;;;OAUG;IACH,oBARW,MAAM,GAAC,IAAI,GAIV,MAAM,GAAC,IAAI,CA8BtB;IAED;;;;;;;OAOG;IACH,eAHW,KAAK,QAef;IAED;;;;;;;OAOG;IACH,aAJW,MAAM,QA6BhB;IAED;;;;;;;;;;OAUG;IACH,mBAHW,KAAK,QAkBf;IAIH;;;;;;;;;;;;OAYG;IACH,sBAxIa,MAAM,GAAC,IAAI,KAIV,MAAM,GAAC,IAAI,CAoIQ;CAfhC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/resize-manager.d.ts b/priv/static/video.js/types/resize-manager.d.ts
new file mode 100644
index 0000000..bb3a003
--- /dev/null
+++ b/priv/static/video.js/types/resize-manager.d.ts
@@ -0,0 +1,52 @@
+export default ResizeManager;
+/**
+ * A Resize Manager. It is in charge of triggering `playerresize` on the player in the right conditions.
+ *
+ * It'll either create an iframe and use a debounced resize handler on it or use the new {@link https://wicg.github.io/ResizeObserver/|ResizeObserver}.
+ *
+ * If the ResizeObserver is available natively, it will be used. A polyfill can be passed in as an option.
+ * If a `playerresize` event is not needed, the ResizeManager component can be removed from the player, see the example below.
+ *
+ * @example <caption>How to disable the resize manager</caption>
+ * const player = videojs('#vid', {
+ *   resizeManager: false
+ * });
+ *
+ * @see {@link https://wicg.github.io/ResizeObserver/|ResizeObserver specification}
+ *
+ * @extends Component
+ */
+declare class ResizeManager extends Component {
+    /**
+     * Create the ResizeManager.
+     *
+     * @param {Object} player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of ResizeManager options.
+     *
+     * @param {Object} [options.ResizeObserver]
+     *        A polyfill for ResizeObserver can be passed in here.
+     *        If this is set to null it will ignore the native ResizeObserver and fall back to the iframe fallback.
+     */
+    constructor(player: any, options?: {
+        ResizeObserver?: any;
+    });
+    ResizeObserver: any;
+    loadListener_: () => void;
+    resizeObserver_: any;
+    debouncedHandler_: Function;
+    unloadListener_: () => void;
+    createEl(): Element;
+    /**
+     * Called when a resize is triggered on the iframe or a resize is observed via the ResizeObserver
+     *
+     * @fires Player#playerresize
+     */
+    resizeHandler(): void;
+    dispose(): void;
+    resizeObserver: any;
+}
+import Component from "./component.js";
+//# sourceMappingURL=resize-manager.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/resize-manager.d.ts.map b/priv/static/video.js/types/resize-manager.d.ts.map
new file mode 100644
index 0000000..b9bab59
--- /dev/null
+++ b/priv/static/video.js/types/resize-manager.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"resize-manager.d.ts","sourceRoot":"","sources":["../../src/js/resize-manager.js"],"names":[],"mappings":";AASA;;;;;;;;;;;;;;;;GAgBG;AACH;IAEE;;;;;;;;;;;;OAYG;IACH;QAJ4B,cAAc;OAqDzC;IAjCC,oBAAqE;IACrE,0BAAyB;IACzB,qBAA2B;IAC3B,4BAEoB;IAaM,4BAKrB;IAYP,oBAQC;IAED;;;;OAIG;IACH,sBAcC;IAED,gBAyBC;IAJC,oBAA0B;CAM7B"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/setup.d.ts b/priv/static/video.js/types/setup.d.ts
new file mode 100644
index 0000000..14700af
--- /dev/null
+++ b/priv/static/video.js/types/setup.d.ts
@@ -0,0 +1,20 @@
+/**
+ * Set up any tags that have a data-setup `attribute` when the player is started.
+ */
+export function autoSetup(): void;
+/**
+ * Wait until the page is loaded before running autoSetup. This will be called in
+ * autoSetup if `hasLoaded` returns false.
+ *
+ * @param {number} wait
+ *        How long to wait in ms
+ *
+ * @param {module:videojs} [vjs]
+ *        The videojs library function
+ */
+export function autoSetupTimeout(wait: number, vjs?: any): void;
+/**
+ * check if the window has been loaded
+ */
+export function hasLoaded(): boolean;
+//# sourceMappingURL=setup.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/setup.d.ts.map b/priv/static/video.js/types/setup.d.ts.map
new file mode 100644
index 0000000..3668d48
--- /dev/null
+++ b/priv/static/video.js/types/setup.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/js/setup.js"],"names":[],"mappings":"AAaA;;GAEG;AACH,kCA2CC;AAED;;;;;;;;;GASG;AACH,uCANW,MAAM,mBAiBhB;AA4BD;;GAEG;AACH,qCAEC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/slider/slider.d.ts b/priv/static/video.js/types/slider/slider.d.ts
new file mode 100644
index 0000000..a973671
--- /dev/null
+++ b/priv/static/video.js/types/slider/slider.d.ts
@@ -0,0 +1,147 @@
+export default Slider;
+/**
+ * The base functionality for a slider. Can be vertical or horizontal.
+ * For instance the volume bar or the seek bar on a video is a slider.
+ *
+ * @extends Component
+ */
+declare class Slider extends Component {
+    /**
+   * Create an instance of this class
+   *
+   * @param { import('../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+    constructor(player: import('../player').default, options?: any);
+    handleMouseDown_: (e: any) => void;
+    handleMouseUp_: (e: any) => void;
+    handleKeyDown_: (e: any) => void;
+    handleClick_: (e: any) => void;
+    handleMouseMove_: (e: any) => void;
+    update_: (e: any) => number;
+    bar: Component;
+    /**
+     * Are controls are currently enabled for this slider or not.
+     *
+     * @return {boolean}
+     *         true if controls are enabled, false otherwise
+     */
+    enabled(): boolean;
+    /**
+     * Enable controls for this slider if they are disabled
+     */
+    enable(): void;
+    enabled_: boolean;
+    /**
+     * Disable controls for this slider if they are enabled
+     */
+    disable(): void;
+    /**
+     * Create the `Slider`s DOM element.
+     *
+     * @param {string} type
+     *        Type of element to create.
+     *
+     * @param {Object} [props={}]
+     *        List of properties in Object form.
+     *
+     * @param {Object} [attributes={}]
+     *        list of attributes in Object form.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(type: string, props?: any, attributes?: any): Element;
+    /**
+     * Handle `mousedown` or `touchstart` events on the `Slider`.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     * @fires Slider#slideractive
+     */
+    handleMouseDown(event: MouseEvent): void;
+    /**
+     * Handle the `mousemove`, `touchmove`, and `mousedown` events on this `Slider`.
+     * The `mousemove` and `touchmove` events will only only trigger this function during
+     * `mousedown` and `touchstart`. This is due to {@link Slider#handleMouseDown} and
+     * {@link Slider#handleMouseUp}.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown`, `mousemove`, `touchstart`, or `touchmove` event that triggered
+     *        this function
+     * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false.
+     *
+     * @listens mousemove
+     * @listens touchmove
+     */
+    handleMouseMove(event: MouseEvent): void;
+    /**
+     * Handle `mouseup` or `touchend` events on the `Slider`.
+     *
+     * @param {MouseEvent} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     * @fires Slider#sliderinactive
+     */
+    handleMouseUp(event: MouseEvent): void;
+    /**
+     * Update the progress bar of the `Slider`.
+     *
+     * @return {number}
+     *          The percentage of progress the progress bar represents as a
+     *          number from 0 to 1.
+     */
+    update(): number;
+    progress_: any;
+    /**
+     * Get the percentage of the bar that should be filled
+     * but clamped and rounded.
+     *
+     * @return {number}
+     *         percentage filled that the slider is
+     */
+    getProgress(): number;
+    /**
+     * Calculate distance for slider
+     *
+     * @param {Event} event
+     *        The event that caused this function to run.
+     *
+     * @return {number}
+     *         The current position of the Slider.
+     *         - position.x for vertical `Slider`s
+     *         - position.y for horizontal `Slider`s
+     */
+    calculateDistance(event: Event): number;
+    /**
+     * Listener for click events on slider, used to prevent clicks
+     *   from bubbling up to parent elements like button menus.
+     *
+     * @param {Object} event
+     *        Event that caused this object to run
+     */
+    handleClick(event: any): void;
+    /**
+     * Get/set if slider is horizontal for vertical
+     *
+     * @param {boolean} [bool]
+     *        - true if slider is vertical,
+     *        - false is horizontal
+     *
+     * @return {boolean}
+     *         - true if slider is vertical, and getting
+     *         - false if the slider is horizontal, and getting
+     */
+    vertical(bool?: boolean): boolean;
+    vertical_: boolean;
+}
+import Component from "../component.js";
+//# sourceMappingURL=slider.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/slider/slider.d.ts.map b/priv/static/video.js/types/slider/slider.d.ts.map
new file mode 100644
index 0000000..ffaf661
--- /dev/null
+++ b/priv/static/video.js/types/slider/slider.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/js/slider/slider.js"],"names":[],"mappings":";AASA;;;;;GAKG;AACH;IAEE;;;;;;;;KAQC;IACD,oBANU,OAAO,WAAW,EAAE,OAAO,iBAuBpC;IAdC,mCAAsD;IACtD,iCAAkD;IAClD,iCAAkD;IAClD,+BAA8C;IAC9C,mCAAsD;IACtD,4BAAoC;IAGpC,eAA+C;IAQjD;;;;;OAKG;IACH,WAHY,OAAO,CAKlB;IAED;;OAEG;IACH,eAqBC;IADC,kBAAoB;IAGtB;;OAEG;IACH,gBAuBC;IAED;;;;;;;;;;;;;;OAcG;IACH,eAZW,MAAM,kCASL,OAAO,CAkBlB;IAED;;;;;;;;;OASG;IACH,uBAPW,UAAU,QAqCpB;IAED;;;;;;;;;;;;;OAaG;IACH,uBARW,UAAU,QAQI;IAEzB;;;;;;;;;OASG;IACH,qBAPW,UAAU,QA2BpB;IAED;;;;;;OAMG;IACH,UAJY,MAAM,CAgCjB;IAXC,eAAyB;IAa3B;;;;;;OAMG;IACH,eAHY,MAAM,CAKjB;IAED;;;;;;;;;;OAUG;IACH,yBARW,KAAK,GAGJ,MAAM,CAYjB;IAgCD;;;;;;OAMG;IACH,8BAGC;IAED;;;;;;;;;;OAUG;IACH,gBARW,OAAO,GAIN,OAAO,CAgBlB;IAPC,mBAAuB;CAQ1B"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tech/html5.d.ts b/priv/static/video.js/types/tech/html5.d.ts
new file mode 100644
index 0000000..add5ec3
--- /dev/null
+++ b/priv/static/video.js/types/tech/html5.d.ts
@@ -0,0 +1,350 @@
+export default Html5;
+/**
+ * HTML5 Media Controller - Wrapper for HTML5 Media API
+ *
+ * @mixes Tech~SourceHandlerAdditions
+ * @extends Tech
+ */
+declare class Html5 extends Tech {
+    isScrubbing_: boolean;
+    /**
+     * Modify the media element so that we can detect when
+     * the source is changed. Fires `sourceset` just after the source has changed
+     */
+    setupSourcesetHandling_(): void;
+    /**
+     * When a captions track is enabled in the iOS Safari native player, all other
+     * tracks are disabled (including metadata tracks), which nulls all of their
+     * associated cue points. This will restore metadata tracks to their pre-fullscreen
+     * state in those cases so that cue points are not needlessly lost.
+     *
+     * @private
+     */
+    private restoreMetadataTracksInIOSNativePlayer_;
+    /**
+     * Attempt to force override of tracks for the given type
+     *
+     * @param {string} type - Track type to override, possible values include 'Audio',
+     * 'Video', and 'Text'.
+     * @param {boolean} override - If set to true native audio/video will be overridden,
+     * otherwise native audio/video will potentially be used.
+     * @private
+     */
+    private overrideNative_;
+    /**
+     * Proxy native track list events for the given type to our track
+     * lists if the browser we are playing in supports that type of track list.
+     *
+     * @param {string} name - Track type; values include 'audio', 'video', and 'text'
+     * @private
+     */
+    private proxyNativeTracksForType_;
+    /**
+     * Proxy all native track list events to our track lists if the browser we are playing
+     * in supports that type of track list.
+     *
+     * @private
+     */
+    private proxyNativeTracks_;
+    /**
+     * Create the `Html5` Tech's DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(): Element;
+    /**
+     * This will be triggered if the loadstart event has already fired, before videojs was
+     * ready. Two known examples of when this can happen are:
+     * 1. If we're loading the playback object after it has started loading
+     * 2. The media is already playing the (often with autoplay on) then
+     *
+     * This function will fire another loadstart so that videojs can catchup.
+     *
+     * @fires Tech#loadstart
+     *
+     * @return {undefined}
+     *         returns nothing.
+     */
+    handleLateInit_(el: any): undefined;
+    /**
+     * Get whether we are scrubbing or not.
+     *
+     * @return {boolean} isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     */
+    scrubbing(): boolean;
+    /**
+     * Get the current duration of the HTML5 media element.
+     *
+     * @return {number}
+     *         The duration of the media or 0 if there is no duration.
+     */
+    duration(): number;
+    /**
+     * Get the current width of the HTML5 media element.
+     *
+     * @return {number}
+     *         The width of the HTML5 media element.
+     */
+    width(): number;
+    /**
+     * Get the current height of the HTML5 media element.
+     *
+     * @return {number}
+     *         The height of the HTML5 media element.
+     */
+    height(): number;
+    /**
+     * Proxy iOS `webkitbeginfullscreen` and `webkitendfullscreen` into
+     * `fullscreenchange` event.
+     *
+     * @private
+     * @fires fullscreenchange
+     * @listens webkitendfullscreen
+     * @listens webkitbeginfullscreen
+     * @listens webkitbeginfullscreen
+     */
+    private proxyWebkitFullscreen_;
+    /**
+     * Check if fullscreen is supported on the video el.
+     *
+     * @return {boolean}
+     *         - True if fullscreen is supported.
+     *         - False if fullscreen is not supported.
+     */
+    supportsFullScreen(): boolean;
+    /**
+     * Request that the `HTML5` Tech enter fullscreen.
+     */
+    enterFullScreen(): void;
+    /**
+     * Request that the `HTML5` Tech exit fullscreen.
+     */
+    exitFullScreen(): void;
+    /**
+     * A getter/setter for the `Html5` Tech's source object.
+     * > Note: Please use {@link Html5#setSource}
+     *
+     * @param {Tech~SourceObject} [src]
+     *        The source object you want to set on the `HTML5` techs element.
+     *
+     * @return {Tech~SourceObject|undefined}
+     *         - The current source object when a source is not passed in.
+     *         - undefined when setting
+     *
+     * @deprecated Since version 5.
+     */
+    src(src: any): Tech;
+    /**
+     * Get the current source on the `HTML5` Tech. Falls back to returning the source from
+     * the HTML5 media element.
+     *
+     * @return {Tech~SourceObject}
+     *         The current source object from the HTML5 tech. With a fallback to the
+     *         elements source.
+     */
+    currentSrc(): Tech;
+    /**
+     * Set controls attribute for the HTML5 media Element.
+     *
+     * @param {string} val
+     *        Value to set the controls attribute to
+     */
+    setControls(val: string): void;
+    /**
+     * Creates either native TextTrack or an emulated TextTrack depending
+     * on the value of `featuresNativeTextTracks`
+     *
+     * @param {Object} options
+     *        The object should contain the options to initialize the TextTrack with.
+     *
+     * @param {string} [options.kind]
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+     *
+     * @param {string} [options.label]
+     *        Label to identify the text track
+     *
+     * @param {string} [options.language]
+     *        Two letter language abbreviation.
+     *
+     * @param {boolean} [options.default]
+     *        Default this track to on.
+     *
+     * @param {string} [options.id]
+     *        The internal id to assign this track.
+     *
+     * @param {string} [options.src]
+     *        A source url for the track.
+     *
+     * @return {HTMLTrackElement}
+     *         The track element that gets created.
+     */
+    createRemoteTextTrack(options: {
+        kind?: string;
+        label?: string;
+        language?: string;
+        default?: boolean;
+        id?: string;
+        src?: string;
+    }): HTMLTrackElement;
+    /**
+     * Creates a remote text track object and returns an html track element.
+     *
+     * @param {Object} options The object should contain values for
+     * kind, language, label, and src (location of the WebVTT file)
+     * @param {boolean} [manualCleanup=false] if set to true, the TextTrack
+     * will not be removed from the TextTrackList and HtmlTrackElementList
+     * after a source change
+     * @return {HTMLTrackElement} An Html Track Element.
+     * This can be an emulated {@link HTMLTrackElement} or a native one.
+     *
+     */
+    addRemoteTextTrack(options: any, manualCleanup?: boolean): HTMLTrackElement;
+    /**
+     * Boolean indicating whether the `HTML5` tech currently supports the media element
+     * moving in the DOM. iOS breaks if you move the media element, so this is set this to
+     * false there. Everywhere else this should be true.
+     *
+     * @type {boolean}
+     * @default
+     */
+    movingMediaElementInDOM: boolean;
+}
+declare namespace Html5 {
+    /**
+     * Check if HTML5 media is supported by this browser/device.
+     *
+     * @return {boolean}
+     *         - True if HTML5 media is supported.
+     *         - False if HTML5 media is not supported.
+     */
+    function isSupported(): boolean;
+    /**
+     * Check if the tech can support the given type
+     *
+     * @param {string} type
+     *        The mimetype to check
+     * @return {string} 'probably', 'maybe', or '' (empty string)
+     */
+    function canPlayType(type: string): string;
+    /**
+     * Check if the tech can support the given source
+     *
+     * @param {Object} srcObj
+     *        The source object
+     * @param {Object} options
+     *        The options passed to the tech
+     * @return {string} 'probably', 'maybe', or '' (empty string)
+     */
+    function canPlaySource(srcObj: any, options: any): string;
+    /**
+     * Check if the volume can be changed in this browser/device.
+     * Volume cannot be changed in a lot of mobile devices.
+     * Specifically, it can't be changed from 1 on iOS.
+     *
+     * @return {boolean}
+     *         - True if volume can be controlled
+     *         - False otherwise
+     */
+    function canControlVolume(): boolean;
+    /**
+     * Check if the volume can be muted in this browser/device.
+     * Some devices, e.g. iOS, don't allow changing volume
+     * but permits muting/unmuting.
+     *
+     * @return {boolean}
+     *      - True if volume can be muted
+     *      - False otherwise
+     */
+    function canMuteVolume(): boolean;
+    /**
+     * Check if the playback rate can be changed in this browser/device.
+     *
+     * @return {boolean}
+     *         - True if playback rate can be controlled
+     *         - False otherwise
+     */
+    function canControlPlaybackRate(): boolean;
+    /**
+     * Check if we can override a video/audio elements attributes, with
+     * Object.defineProperty.
+     *
+     * @return {boolean}
+     *         - True if builtin attributes can be overridden
+     *         - False otherwise
+     */
+    function canOverrideAttributes(): boolean;
+    /**
+     * Check to see if native `TextTrack`s are supported by this browser/device.
+     *
+     * @return {boolean}
+     *         - True if native `TextTrack`s are supported.
+     *         - False otherwise
+     */
+    function supportsNativeTextTracks(): boolean;
+    /**
+     * Check to see if native `VideoTrack`s are supported by this browser/device
+     *
+     * @return {boolean}
+     *        - True if native `VideoTrack`s are supported.
+     *        - False otherwise
+     */
+    function supportsNativeVideoTracks(): boolean;
+    /**
+     * Check to see if native `AudioTrack`s are supported by this browser/device
+     *
+     * @return {boolean}
+     *        - True if native `AudioTrack`s are supported.
+     *        - False otherwise
+     */
+    function supportsNativeAudioTracks(): boolean;
+    const Events: any[];
+    function disposeMediaElement(el: any): void;
+    function resetMediaElement(el: any): void;
+    namespace nativeSourceHandler {
+        /**
+         * Check if the media element can play the given mime type.
+         *
+         * @param {string} type
+         *        The mimetype to check
+         *
+         * @return {string}
+         *         'probably', 'maybe', or '' (empty string)
+         */
+        function canPlayType(type: string): string;
+        /**
+         * Check if the media element can handle a source natively.
+         *
+         * @param {Tech~SourceObject} source
+         *         The source object
+         *
+         * @param {Object} [options]
+         *         Options to be passed to the tech.
+         *
+         * @return {string}
+         *         'probably', 'maybe', or '' (empty string).
+         */
+        function canHandleSource(source: any, options?: any): string;
+        /**
+         * Pass the source to the native media element.
+         *
+         * @param {Tech~SourceObject} source
+         *        The source object
+         *
+         * @param {Html5} tech
+         *        The instance of the Html5 tech
+         *
+         * @param {Object} [options]
+         *        The options to pass to the source
+         */
+        function handleSource(source: any, tech: Html5, options?: any): void;
+        /**
+         * A noop for the native dispose function, as cleanup is not needed.
+         */
+        function dispose(): void;
+    }
+}
+import Tech from "./tech.js";
+//# sourceMappingURL=html5.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tech/html5.d.ts.map b/priv/static/video.js/types/tech/html5.d.ts.map
new file mode 100644
index 0000000..f96780a
--- /dev/null
+++ b/priv/static/video.js/types/tech/html5.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"html5.d.ts","sourceRoot":"","sources":["../../../src/js/tech/html5.js"],"names":[],"mappings":";AAgBA;;;;;GAKG;AACH;IAkCI,sBAAyB;IA4E3B;;;OAGG;IACH,gCAEC;IAED;;;;;;;OAOG;IACH,gDA0DC;IAED;;;;;;;;OAQG;IACH,wBAoBC;IAsBD;;;;;;OAMG;IACH,kCA0EC;IAED;;;;;OAKG;IACH,2BAIC;IAED;;;;;OAKG;IACH,YAHY,OAAO,CA2ElB;IAED;;;;;;;;;;;;OAYG;IACH,0BAHY,SAAS,CAiFpB;IAeD;;;;;;OAMG;IACH,aAJY,OAAO,CAMlB;IAqBD;;;;;OAKG;IACH,YAHY,MAAM,CA8BjB;IAED;;;;;OAKG;IACH,SAHY,MAAM,CAKjB;IAED;;;;;OAKG;IACH,UAHY,MAAM,CAKjB;IAED;;;;;;;;;OASG;IACH,+BA8BC;IAED;;;;;;OAMG;IACH,sBAJY,OAAO,CAMlB;IAED;;OAEG;IACH,wBAyBC;IAED;;OAEG;IACH,uBAOC;IA6CD;;;;;;;;;;;;OAYG;IACH,eANY,IAAI,CAaf;IAUD;;;;;;;OAOG;IACH,cAJY,IAAI,CASf;IAED;;;;;OAKG;IACH,iBAHW,MAAM,QAKhB;IAyBD;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACH;eArBW,MAAM;gBAGN,MAAM;mBAGN,MAAM;kBAGN,OAAO;aAGP,MAAM;cAGN,MAAM;QAGL,gBAAgB,CA6B3B;IAED;;;;;;;;;;;OAWG;IACH,iDAPW,OAAO,GAGN,gBAAgB,CAY3B;IAyWH;;;;;;;OAOG;IACH,yBAHU,OAAO,CAGsB;CA7TtC;;IA0BD;;;;;;OAMG;IACH,gCASC;IAED;;;;;;OAMG;IACH,2CAEC;IAED;;;;;;;;OAQG;IACH,0DAEC;IAED;;;;;;;;OAQG;IACH,qCA6BC;IAED;;;;;;;;OAQG;IACH,kCAgBC;IAED;;;;;;OAMG;IACH,2CAeC;IAED;;;;;;;OAOG;IACH,0CAeC;IAED;;;;;;OAMG;IACH,6CAEC;IAED;;;;;;OAMG;IACH,8CAEC;IAED;;;;;;OAMG;IACH,8CAEC;;IA2ID,4CA8BC;IAED,0CA0BC;;QAsoBD;;;;;;;;WAQG;QACH,2CAOC;QAED;;;;;;;;;;;WAWG;QACH,6DAcC;QAED;;;;;;;;;;;WAWG;QACH,qEAEC;QAED;;WAEG;QACH,yBAAiD"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tech/loader.d.ts b/priv/static/video.js/types/tech/loader.d.ts
new file mode 100644
index 0000000..b4444fb
--- /dev/null
+++ b/priv/static/video.js/types/tech/loader.d.ts
@@ -0,0 +1,24 @@
+export default MediaLoader;
+/**
+ * The `MediaLoader` is the `Component` that decides which playback technology to load
+ * when a player is initialized.
+ *
+ * @extends Component
+ */
+declare class MediaLoader extends Component {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should attach to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function that is run when this component is ready.
+     */
+    constructor(player: import('../player').default, options?: any, ready?: Function);
+}
+import Component from "../component.js";
+//# sourceMappingURL=loader.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tech/loader.d.ts.map b/priv/static/video.js/types/tech/loader.d.ts.map
new file mode 100644
index 0000000..8d1a3e8
--- /dev/null
+++ b/priv/static/video.js/types/tech/loader.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../src/js/tech/loader.js"],"names":[],"mappings":";AAQA;;;;;GAKG;AACH;IAEE;;;;;;;;;;;OAWG;IACH,oBATY,OAAO,WAAW,EAAE,OAAO,mCA0CtC;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tech/middleware.d.ts b/priv/static/video.js/types/tech/middleware.d.ts
new file mode 100644
index 0000000..23e987c
--- /dev/null
+++ b/priv/static/video.js/types/tech/middleware.d.ts
@@ -0,0 +1,171 @@
+/**
+ * A middleware object is a plain JavaScript object that has methods that
+ * match the {@link Tech} methods found in the lists of allowed
+ * {@link module:middleware.allowedGetters|getters},
+ * {@link module:middleware.allowedSetters|setters}, and
+ * {@link module:middleware.allowedMediators|mediators}.
+ *
+ * @typedef {Object} MiddlewareObject
+ */
+/**
+ * A middleware factory function that should return a
+ * {@link module:middleware~MiddlewareObject|MiddlewareObject}.
+ *
+ * This factory will be called for each player when needed, with the player
+ * passed in as an argument.
+ *
+ * @callback MiddlewareFactory
+ * @param { import('../player').default } player
+ *        A Video.js player.
+ */
+/**
+ * Define a middleware that the player should use by way of a factory function
+ * that returns a middleware object.
+ *
+ * @param  {string} type
+ *         The MIME type to match or `"*"` for all MIME types.
+ *
+ * @param  {MiddlewareFactory} middleware
+ *         A middleware factory function that will be executed for
+ *         matching types.
+ */
+export function use(type: string, middleware: MiddlewareFactory): void;
+/**
+ * Gets middlewares by type (or all middlewares).
+ *
+ * @param  {string} type
+ *         The MIME type to match or `"*"` for all MIME types.
+ *
+ * @return {Function[]|undefined}
+ *         An array of middlewares or `undefined` if none exist.
+ */
+export function getMiddleware(type: string): Function[] | undefined;
+/**
+ * Asynchronously sets a source using middleware by recursing through any
+ * matching middlewares and calling `setSource` on each, passing along the
+ * previous returned value each time.
+ *
+ * @param  { import('../player').default } player
+ *         A {@link Player} instance.
+ *
+ * @param  {Tech~SourceObject} src
+ *         A source object.
+ *
+ * @param  {Function}
+ *         The next middleware to run.
+ */
+export function setSource(player: import('../player').default, src: any, next: any): void;
+/**
+ * When the tech is set, passes the tech to each middleware's `setTech` method.
+ *
+ * @param {Object[]} middleware
+ *        An array of middleware instances.
+ *
+ * @param { import('../tech/tech').default } tech
+ *        A Video.js tech.
+ */
+export function setTech(middleware: any[], tech: import('../tech/tech').default): void;
+/**
+ * Calls a getter on the tech first, through each middleware
+ * from right to left to the player.
+ *
+ * @param  {Object[]} middleware
+ *         An array of middleware instances.
+ *
+ * @param  { import('../tech/tech').default } tech
+ *         The current tech.
+ *
+ * @param  {string} method
+ *         A method name.
+ *
+ * @return {*}
+ *         The final value from the tech after middleware has intercepted it.
+ */
+export function get(middleware: any[], tech: import('../tech/tech').default, method: string): any;
+/**
+ * Takes the argument given to the player and calls the setter method on each
+ * middleware from left to right to the tech.
+ *
+ * @param  {Object[]} middleware
+ *         An array of middleware instances.
+ *
+ * @param  { import('../tech/tech').default } tech
+ *         The current tech.
+ *
+ * @param  {string} method
+ *         A method name.
+ *
+ * @param  {*} arg
+ *         The value to set on the tech.
+ *
+ * @return {*}
+ *         The return value of the `method` of the `tech`.
+ */
+export function set(middleware: any[], tech: import('../tech/tech').default, method: string, arg: any): any;
+/**
+ * Takes the argument given to the player and calls the `call` version of the
+ * method on each middleware from left to right.
+ *
+ * Then, call the passed in method on the tech and return the result unchanged
+ * back to the player, through middleware, this time from right to left.
+ *
+ * @param  {Object[]} middleware
+ *         An array of middleware instances.
+ *
+ * @param  { import('../tech/tech').default } tech
+ *         The current tech.
+ *
+ * @param  {string} method
+ *         A method name.
+ *
+ * @param  {*} arg
+ *         The value to set on the tech.
+ *
+ * @return {*}
+ *         The return value of the `method` of the `tech`, regardless of the
+ *         return values of middlewares.
+ */
+export function mediate(middleware: any[], tech: import('../tech/tech').default, method: string, arg?: any): any;
+/**
+ * Clear the middleware cache for a player.
+ *
+ * @param  { import('../player').default } player
+ *         A {@link Player} instance.
+ */
+export function clearCacheForPlayer(player: import('../player').default): void;
+export const TERMINATOR: {};
+/**
+ * Enumeration of allowed getters where the keys are method names.
+ *
+ * @type {Object}
+ */
+export const allowedGetters: any;
+/**
+ * Enumeration of allowed setters where the keys are method names.
+ *
+ * @type {Object}
+ */
+export const allowedSetters: any;
+/**
+ * Enumeration of allowed mediators where the keys are method names.
+ *
+ * @type {Object}
+ */
+export const allowedMediators: any;
+/**
+ * A middleware object is a plain JavaScript object that has methods that
+ * match the {@link Tech } methods found in the lists of allowed
+ * {@link module :middleware.allowedGetters|getters},
+ * {@link module :middleware.allowedSetters|setters}, and
+ * {@link module :middleware.allowedMediators|mediators}.
+ */
+export type MiddlewareObject = any;
+/**
+ * A middleware factory function that should return a
+ * {@link module :middleware~MiddlewareObject|MiddlewareObject}.
+ *
+ * This factory will be called for each player when needed, with the player
+ * passed in as an argument.
+ */
+export type MiddlewareFactory = (player: import('../player').default) => any;
+//# sourceMappingURL=middleware.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tech/middleware.d.ts.map b/priv/static/video.js/types/tech/middleware.d.ts.map
new file mode 100644
index 0000000..9cdab6c
--- /dev/null
+++ b/priv/static/video.js/types/tech/middleware.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"middleware.d.ts","sourceRoot":"","sources":["../../../src/js/tech/middleware.js"],"names":[],"mappings":"AAWA;;;;;;;;GAQG;AAEH;;;;;;;;;;GAUG;AAEH;;;;;;;;;;GAUG;AACH,0BAPY,MAAM,cAGN,iBAAiB,QAO5B;AAED;;;;;;;;GAQG;AACH,oCANY,MAAM,GAGN,UAAU,GAAC,SAAS,CAS/B;AAED;;;;;;;;;;;;;GAaG;AACH,kCATa,OAAO,WAAW,EAAE,OAAO,6BAWvC;AAED;;;;;;;;GAQG;AACH,oCANW,KAAQ,QAGP,OAAO,cAAc,EAAE,OAAO,QAKzC;AAED;;;;;;;;;;;;;;;GAeG;AACH,gCAZY,KAAQ,QAGP,OAAO,cAAc,EAAE,OAAO,UAG/B,MAAM,OAQjB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,gCAfY,KAAQ,QAGP,OAAO,cAAc,EAAE,OAAO,UAG/B,MAAM,iBAWjB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,oCAhBY,KAAQ,QAGP,OAAO,cAAc,EAAE,OAAO,UAG/B,MAAM,kBAqBjB;AAiED;;;;;GAKG;AACH,4CAHa,OAAO,WAAW,EAAE,OAAO,QAKvC;AA9OD,4BAA6B;AAuK7B;;;;GAIG;AACH,iCAUE;AAEF;;;;GAIG;AACH,iCAIE;AAEF;;;;GAIG;AACH,mCAGE;;;;;;;;;;;;;;;;yCAvLU,OAAO,WAAW,EAAE,OAAO"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tech/setup-sourceset.d.ts b/priv/static/video.js/types/tech/setup-sourceset.d.ts
new file mode 100644
index 0000000..9ef0f2c
--- /dev/null
+++ b/priv/static/video.js/types/tech/setup-sourceset.d.ts
@@ -0,0 +1,18 @@
+export default setupSourceset;
+/**
+ * setup `sourceset` handling on the `Html5` tech. This function
+ * patches the following element properties/functions:
+ *
+ * - `src` - to determine when `src` is set
+ * - `setAttribute()` - to determine when `src` is set
+ * - `load()` - this re-triggers the source selection algorithm, and can
+ *              cause a sourceset.
+ *
+ * If there is no source when we are adding `sourceset` support or during a `load()`
+ * we also patch the functions listed in `firstSourceWatch`.
+ *
+ * @param {Html5} tech
+ *        The tech to patch
+ */
+declare function setupSourceset(tech: Html5): void;
+//# sourceMappingURL=setup-sourceset.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tech/setup-sourceset.d.ts.map b/priv/static/video.js/types/tech/setup-sourceset.d.ts.map
new file mode 100644
index 0000000..e80ae5d
--- /dev/null
+++ b/priv/static/video.js/types/tech/setup-sourceset.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"setup-sourceset.d.ts","sourceRoot":"","sources":["../../../src/js/tech/setup-sourceset.js"],"names":[],"mappings":";AA+NA;;;;;;;;;;;;;;GAcG;AACH,mDAmEC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tech/tech.d.ts b/priv/static/video.js/types/tech/tech.d.ts
new file mode 100644
index 0000000..3f50aa4
--- /dev/null
+++ b/priv/static/video.js/types/tech/tech.d.ts
@@ -0,0 +1,581 @@
+export default Tech;
+/**
+ * An Object containing a structure like: `{src: 'url', type: 'mimetype'}` or string
+ * that just contains the src url alone.
+ * * `var SourceObject = {src: 'http://ex.com/video.mp4', type: 'video/mp4'};`
+ *  `var SourceString = 'http://example.com/some-video.mp4';`
+ */
+export type SourceObject = any | string;
+/**
+ * This is the base class for media playback technology controllers, such as
+ * {@link HTML5}
+ *
+ * @extends Component
+ */
+declare class Tech extends Component {
+    /**
+     * Check if the type is supported by this tech.
+     *
+     * The base tech does not support any type, but source handlers might
+     * overwrite this.
+     *
+     * @param {string} _type
+     *        The media type to check
+     * @return {string} Returns the native video element's response
+     */
+    static canPlayType(_type: string): string;
+    /**
+     * Check if the tech can support the given source
+     *
+     * @param {Object} srcObj
+     *        The source object
+     * @param {Object} options
+     *        The options passed to the tech
+     * @return {string} 'probably', 'maybe', or '' (empty string)
+     */
+    static canPlaySource(srcObj: any, options: any): string;
+    static isTech(component: any): boolean;
+    /**
+     * Registers a `Tech` into a shared list for videojs.
+     *
+     * @param {string} name
+     *        Name of the `Tech` to register.
+     *
+     * @param {Object} tech
+     *        The `Tech` class to register.
+     */
+    static registerTech(name: string, tech: any): any;
+    /**
+     * Get a `Tech` from the shared list by name.
+     *
+     * @param {string} name
+     *        `camelCase` or `TitleCase` name of the Tech to get
+     *
+     * @return {Tech|undefined}
+     *         The `Tech` or undefined if there was no tech with the name requested.
+     */
+    static getTech(name: string): Tech | undefined;
+    /**
+    * Create an instance of this Tech.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    *
+    * @param {Function} [ready]
+    *        Callback function to call when the `HTML5` Tech is ready.
+    */
+    constructor(options?: any, ready?: Function);
+    onDurationChange_: (e: any) => void;
+    trackProgress_: (e: any) => void;
+    trackCurrentTime_: (e: any) => void;
+    stopTrackingCurrentTime_: (e: any) => void;
+    disposeSourceHandler_: (e: any) => any;
+    queuedHanders_: Set<any>;
+    hasStarted_: boolean;
+    featuresNativeTextTracks: boolean;
+    preloadTextTracks: boolean;
+    autoRemoteTextTracks_: import("../tracks/text-track-list").default;
+    /**
+     * A special function to trigger source set in a way that will allow player
+     * to re-trigger if the player or tech are not ready yet.
+     *
+     * @fires Tech#sourceset
+     * @param {string} src The source string at the time of the source changing.
+     */
+    triggerSourceset(src: string): void;
+    /**
+     * Polyfill the `progress` event for browsers that don't support it natively.
+     *
+     * @see {@link Tech#trackProgress}
+     */
+    manualProgressOn(): void;
+    manualProgress: boolean;
+    /**
+     * Turn off the polyfill for `progress` events that was created in
+     * {@link Tech#manualProgressOn}
+     */
+    manualProgressOff(): void;
+    /**
+     * This is used to trigger a `progress` event when the buffered percent changes. It
+     * sets an interval function that will be called every 500 milliseconds to check if the
+     * buffer end percent has changed.
+     *
+     * > This function is called by {@link Tech#manualProgressOn}
+     *
+     * @param {Event} event
+     *        The `ready` event that caused this to run.
+     *
+     * @listens Tech#ready
+     * @fires Tech#progress
+     */
+    trackProgress(event: Event): void;
+    progressInterval: number;
+    /**
+     * Update our internal duration on a `durationchange` event by calling
+     * {@link Tech#duration}.
+     *
+     * @param {Event} event
+     *        The `durationchange` event that caused this to run.
+     *
+     * @listens Tech#durationchange
+     */
+    onDurationChange(event: Event): void;
+    duration_: any;
+    /**
+     * Get and create a `TimeRange` object for buffering.
+     *
+     * @return { import('../utils/time').TimeRange }
+     *         The time range object that was created.
+     */
+    buffered(): import('../utils/time').TimeRange;
+    /**
+     * Get the percentage of the current video that is currently buffered.
+     *
+     * @return {number}
+     *         A number from 0 to 1 that represents the decimal percentage of the
+     *         video that is buffered.
+     *
+     */
+    bufferedPercent(): number;
+    /**
+     * Turn off the polyfill for `progress` events that was created in
+     * {@link Tech#manualProgressOn}
+     * Stop manually tracking progress events by clearing the interval that was set in
+     * {@link Tech#trackProgress}.
+     */
+    stopTrackingProgress(): void;
+    /**
+     * Polyfill the `timeupdate` event for browsers that don't support it.
+     *
+     * @see {@link Tech#trackCurrentTime}
+     */
+    manualTimeUpdatesOn(): void;
+    manualTimeUpdates: boolean;
+    /**
+     * Turn off the polyfill for `timeupdate` events that was created in
+     * {@link Tech#manualTimeUpdatesOn}
+     */
+    manualTimeUpdatesOff(): void;
+    /**
+     * Sets up an interval function to track current time and trigger `timeupdate` every
+     * 250 milliseconds.
+     *
+     * @listens Tech#play
+     * @triggers Tech#timeupdate
+     */
+    trackCurrentTime(): void;
+    currentTimeInterval: number;
+    /**
+     * Stop the interval function created in {@link Tech#trackCurrentTime} so that the
+     * `timeupdate` event is no longer triggered.
+     *
+     * @listens {Tech#pause}
+     */
+    stopTrackingCurrentTime(): void;
+    /**
+     * Turn off all event polyfills, clear the `Tech`s {@link AudioTrackList},
+     * {@link VideoTrackList}, and {@link TextTrackList}, and dispose of this Tech.
+     *
+     * @fires Component#dispose
+     */
+    dispose(): void;
+    /**
+     * Clear out a single `TrackList` or an array of `TrackLists` given their names.
+     *
+     * > Note: Techs without source handlers should call this between sources for `video`
+     *         & `audio` tracks. You don't want to use them between tracks!
+     *
+     * @param {string[]|string} types
+     *        TrackList names to clear, valid names are `video`, `audio`, and
+     *        `text`.
+     */
+    clearTracks(types: string[] | string): void;
+    /**
+     * Remove any TextTracks added via addRemoteTextTrack that are
+     * flagged for automatic garbage collection
+     */
+    cleanupAutoTextTracks(): void;
+    /**
+     * Reset the tech, which will removes all sources and reset the internal readyState.
+     *
+     * @abstract
+     */
+    reset(): void;
+    /**
+     * Get the value of `crossOrigin` from the tech.
+     *
+     * @abstract
+     *
+     * @see {Html5#crossOrigin}
+     */
+    crossOrigin(): void;
+    /**
+     * Set the value of `crossOrigin` on the tech.
+     *
+     * @abstract
+     *
+     * @param {string} crossOrigin the crossOrigin value
+     * @see {Html5#setCrossOrigin}
+     */
+    setCrossOrigin(): void;
+    /**
+     * Get or set an error on the Tech.
+     *
+     * @param {MediaError} [err]
+     *        Error to set on the Tech
+     *
+     * @return {MediaError|null}
+     *         The current error object on the tech, or null if there isn't one.
+     */
+    error(err?: MediaError): MediaError | null;
+    error_: MediaError;
+    /**
+     * Returns the `TimeRange`s that have been played through for the current source.
+     *
+     * > NOTE: This implementation is incomplete. It does not track the played `TimeRange`.
+     *         It only checks whether the source has played at all or not.
+     *
+     * @return { import('../utils/time').TimeRange }
+     *         - A single time range if this video has played
+     *         - An empty set of ranges if not.
+     */
+    played(): import('../utils/time').TimeRange;
+    /**
+     * Start playback
+     *
+     * @abstract
+     *
+     * @see {Html5#play}
+     */
+    play(): void;
+    /**
+     * Set whether we are scrubbing or not
+     *
+     * @abstract
+     * @param {boolean} _isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     *
+     * @see {Html5#setScrubbing}
+     */
+    setScrubbing(_isScrubbing: boolean): void;
+    /**
+     * Get whether we are scrubbing or not
+     *
+     * @abstract
+     *
+     * @see {Html5#scrubbing}
+     */
+    scrubbing(): void;
+    /**
+     * Causes a manual time update to occur if {@link Tech#manualTimeUpdatesOn} was
+     * previously called.
+     *
+     * @param {number} _seconds
+     *        Set the current time of the media to this.
+     * @fires Tech#timeupdate
+     */
+    setCurrentTime(_seconds: number): void;
+    /**
+     * Turn on listeners for {@link VideoTrackList}, {@link {AudioTrackList}, and
+     * {@link TextTrackList} events.
+     *
+     * This adds {@link EventTarget~EventListeners} for `addtrack`, and  `removetrack`.
+     *
+     * @fires Tech#audiotrackchange
+     * @fires Tech#videotrackchange
+     * @fires Tech#texttrackchange
+     */
+    initTrackListeners(): void;
+    /**
+     * Emulate TextTracks using vtt.js if necessary
+     *
+     * @fires Tech#vttjsloaded
+     * @fires Tech#vttjserror
+     */
+    addWebVttScript_(): void;
+    /**
+     * Emulate texttracks
+     *
+     */
+    emulateTextTracks(): void;
+    /**
+     * Create and returns a remote {@link TextTrack} object.
+     *
+     * @param {string} kind
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+     *
+     * @param {string} [label]
+     *        Label to identify the text track
+     *
+     * @param {string} [language]
+     *        Two letter language abbreviation
+     *
+     * @return {TextTrack}
+     *         The TextTrack that gets created.
+     */
+    addTextTrack(kind: string, label?: string, language?: string): TextTrack;
+    /**
+     * Create an emulated TextTrack for use by addRemoteTextTrack
+     *
+     * This is intended to be overridden by classes that inherit from
+     * Tech in order to create native or custom TextTracks.
+     *
+     * @param {Object} options
+     *        The object should contain the options to initialize the TextTrack with.
+     *
+     * @param {string} [options.kind]
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+     *
+     * @param {string} [options.label].
+     *        Label to identify the text track
+     *
+     * @param {string} [options.language]
+     *        Two letter language abbreviation.
+     *
+     * @return {HTMLTrackElement}
+     *         The track element that gets created.
+     */
+    createRemoteTextTrack(options: {
+        kind?: string;
+        label?: string;
+        language?: string;
+    }): HTMLTrackElement;
+    /**
+     * Creates a remote text track object and returns an html track element.
+     *
+     * > Note: This can be an emulated {@link HTMLTrackElement} or a native one.
+     *
+     * @param {Object} options
+     *        See {@link Tech#createRemoteTextTrack} for more detailed properties.
+     *
+     * @param {boolean} [manualCleanup=false]
+     *        - When false: the TextTrack will be automatically removed from the video
+     *          element whenever the source changes
+     *        - When True: The TextTrack will have to be cleaned up manually
+     *
+     * @return {HTMLTrackElement}
+     *         An Html Track Element.
+     *
+     */
+    addRemoteTextTrack(options?: any, manualCleanup?: boolean): HTMLTrackElement;
+    /**
+     * Remove a remote text track from the remote `TextTrackList`.
+     *
+     * @param {TextTrack} track
+     *        `TextTrack` to remove from the `TextTrackList`
+     */
+    removeRemoteTextTrack(track: TextTrack): void;
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object}
+     *         An object with supported media playback quality metrics
+     *
+     * @abstract
+     */
+    getVideoPlaybackQuality(): any;
+    /**
+     * Attempt to create a floating video window always on top of other windows
+     * so that users may continue consuming media while they interact with other
+     * content sites, or applications on their device.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @return {Promise|undefined}
+     *         A promise with a Picture-in-Picture window if the browser supports
+     *         Promises (or one was passed in as an option). It returns undefined
+     *         otherwise.
+     *
+     * @abstract
+     */
+    requestPictureInPicture(): Promise<any> | undefined;
+    /**
+     * A method to check for the value of the 'disablePictureInPicture' <video> property.
+     * Defaults to true, as it should be considered disabled if the tech does not support pip
+     *
+     * @abstract
+     */
+    disablePictureInPicture(): boolean;
+    /**
+     * A method to set or unset the 'disablePictureInPicture' <video> property.
+     *
+     * @abstract
+     */
+    setDisablePictureInPicture(): void;
+    /**
+     * A fallback implementation of requestVideoFrameCallback using requestAnimationFrame
+     *
+     * @param {function} cb
+     * @return {number} request id
+     */
+    requestVideoFrameCallback(cb: Function): number;
+    /**
+     * A fallback implementation of cancelVideoFrameCallback
+     *
+     * @param {number} id id of callback to be cancelled
+     */
+    cancelVideoFrameCallback(id: number): void;
+    /**
+     * A method to set a poster from a `Tech`.
+     *
+     * @abstract
+     */
+    setPoster(): void;
+    /**
+     * A method to check for the presence of the 'playsinline' <video> attribute.
+     *
+     * @abstract
+     */
+    playsinline(): void;
+    /**
+     * A method to set or unset the 'playsinline' <video> attribute.
+     *
+     * @abstract
+     */
+    setPlaysinline(): void;
+    /**
+     * Attempt to force override of native audio tracks.
+     *
+     * @param {boolean} override - If set to true native audio will be overridden,
+     * otherwise native audio will potentially be used.
+     *
+     * @abstract
+     */
+    overrideNativeAudioTracks(override: boolean): void;
+    /**
+     * Attempt to force override of native video tracks.
+     *
+     * @param {boolean} override - If set to true native video will be overridden,
+     * otherwise native video will potentially be used.
+     *
+     * @abstract
+     */
+    overrideNativeVideoTracks(override: boolean): void;
+    /**
+     * Check if the tech can support the given mime-type.
+     *
+     * The base tech does not support any type, but source handlers might
+     * overwrite this.
+     *
+     * @param  {string} _type
+     *         The mimetype to check for support
+     *
+     * @return {string}
+     *         'probably', 'maybe', or empty string
+     *
+     * @see [Spec]{@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType}
+     *
+     * @abstract
+     */
+    canPlayType(_type: string): string;
+    /**
+     * List of associated text tracks
+     *
+     * @type {TextTrackList}
+     * @private
+     * @property Tech#textTracks_
+     */
+    /**
+     * List of associated audio tracks.
+     *
+     * @type {AudioTrackList}
+     * @private
+     * @property Tech#audioTracks_
+     */
+    /**
+     * List of associated video tracks.
+     *
+     * @type {VideoTrackList}
+     * @private
+     * @property Tech#videoTracks_
+     */
+    /**
+     * Boolean indicating whether the `Tech` supports volume control.
+     *
+     * @type {boolean}
+     * @default
+     */
+    featuresVolumeControl: boolean;
+    /**
+     * Boolean indicating whether the `Tech` supports muting volume.
+     *
+     * @type {boolean}
+     * @default
+     */
+    featuresMuteControl: boolean;
+    /**
+     * Boolean indicating whether the `Tech` supports fullscreen resize control.
+     * Resizing plugins using request fullscreen reloads the plugin
+     *
+     * @type {boolean}
+     * @default
+     */
+    featuresFullscreenResize: boolean;
+    /**
+     * Boolean indicating whether the `Tech` supports changing the speed at which the video
+     * plays. Examples:
+     *   - Set player to play 2x (twice) as fast
+     *   - Set player to play 0.5x (half) as fast
+     *
+     * @type {boolean}
+     * @default
+     */
+    featuresPlaybackRate: boolean;
+    /**
+     * Boolean indicating whether the `Tech` supports the `progress` event.
+     * This will be used to determine if {@link Tech#manualProgressOn} should be called.
+     *
+     * @type {boolean}
+     * @default
+     */
+    featuresProgressEvents: boolean;
+    /**
+     * Boolean indicating whether the `Tech` supports the `sourceset` event.
+     *
+     * A tech should set this to `true` and then use {@link Tech#triggerSourceset}
+     * to trigger a {@link Tech#event:sourceset} at the earliest time after getting
+     * a new source.
+     *
+     * @type {boolean}
+     * @default
+     */
+    featuresSourceset: boolean;
+    /**
+     * Boolean indicating whether the `Tech` supports the `timeupdate` event.
+     * This will be used to determine if {@link Tech#manualTimeUpdates} should be called.
+     *
+     * @type {boolean}
+     * @default
+     */
+    featuresTimeupdateEvents: boolean;
+    /**
+     * Boolean indicating whether the `Tech` supports `requestVideoFrameCallback`.
+     *
+     * @type {boolean}
+     * @default
+     */
+    featuresVideoFrameCallback: boolean;
+}
+declare namespace Tech {
+    /**
+     * A functional mixin for techs that want to use the Source Handler pattern.
+     * Source handlers are scripts for handling specific formats.
+     * The source handler pattern is used for adaptive formats (HLS, DASH) that
+     * manually load video data and feed it into a Source Buffer (Media Source Extensions)
+     * Example: `Tech.withSourceHandlers.call(MyTech);`
+     *
+     * @param {Tech} _Tech
+     *        The tech to add source handler functions to.
+     *
+     * @mixes Tech~SourceHandlerAdditions
+     */
+    function withSourceHandlers(_Tech: Tech): void;
+    const defaultTechOrder_: any[];
+}
+import Component from "../component";
+import MediaError from "../media-error.js";
+//# sourceMappingURL=tech.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tech/tech.d.ts.map b/priv/static/video.js/types/tech/tech.d.ts.map
new file mode 100644
index 0000000..31ad842
--- /dev/null
+++ b/priv/static/video.js/types/tech/tech.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"tech.d.ts","sourceRoot":"","sources":["../../../src/js/tech/tech.js"],"names":[],"mappings":";;;;;;;2BAwBa,MAAO,MAAM;AAoD1B;;;;;GAKG;AACH;IAy2BE;;;;;;;;;OASG;IACH,0BAJW,MAAM,GAEL,MAAM,CAIjB;IAED;;;;;;;;OAQG;IACH,iDAFY,MAAM,CAIjB;IAcD,uCAIC;IAED;;;;;;;;OAQG;IACH,0BANW,MAAM,kBA+BhB;IAED;;;;;;;;OAQG;IACH,qBANW,MAAM,GAGL,IAAI,GAAC,SAAS,CAkBzB;IAh9BD;;;;;;;;MAQE;IACF,6CAwEC;IAlEC,oCAAwD;IACxD,iCAAkD;IAClD,oCAAwD;IACxD,2CAAsE;IACtE,uCAAgE;IAEhE,yBAA+B;IAI/B,qBAAwB;IAiCtB,0BAmiCI,OAAO,CAniC0B;IASvC,2BAA4D;IAE5D,mEAAiE;IAcnE;;;;;;OAMG;IACH,sBAFW,MAAM,QAqBhB;IAKD;;;;OAIG;IACH,yBAOC;IAJC,wBAA0B;IAM5B;;;OAGG;IACH,0BAKC;IAED;;;;;;;;;;;;OAYG;IACH,qBANW,KAAK,QA6Bf;IArBC,yBAoBQ;IAGV;;;;;;;;OAQG;IACH,wBALW,KAAK,QAOf;IADC,eAAgC;IAGlC;;;;;OAKG;IACH,YAHa,OAAO,eAAe,EAAE,SAAS,CAK7C;IAED;;;;;;;OAOG;IACH,mBALY,MAAM,CAOjB;IAED;;;;;OAKG;IACH,6BAEC;IAED;;;;OAIG;IACH,4BAKC;IAJC,2BAA6B;IAM/B;;;OAGG;IACH,6BAKC;IAED;;;;;;OAMG;IACH,yBAeC;IAXC,4BAUO;IAGT;;;;;OAKG;IACH,gCAMC;IAED;;;;;OAKG;IACH,gBAeC;IAED;;;;;;;;;OASG;IACH,mBAJW,MAAM,EAAE,GAAC,MAAM,QAoBzB;IAED;;;OAGG;IACH,8BASC;IAED;;;;OAIG;IACH,cAAU;IAEV;;;;;;OAMG;IACH,oBAAgB;IAEhB;;;;;;;OAOG;IACH,uBAAmB;IAEnB;;;;;;;;OAQG;IACH,YANW,UAAU,GAGT,UAAU,GAAC,IAAI,CAS1B;IAJG,mBAAiC;IAMrC;;;;;;;;;OASG;IACH,UAJa,OAAO,eAAe,EAAE,SAAS,CAS7C;IAED;;;;;;OAMG;IACH,aAAS;IAET;;;;;;;;;OASG;IACH,2BANW,OAAO,QAMW;IAE7B;;;;;;OAMG;IACH,kBAAc;IAEd;;;;;;;OAOG;IACH,yBAJW,MAAM,QAehB;IAED;;;;;;;;;OASG;IACH,2BAqCC;IAED;;;;;OAKG;IACH,yBAqDC;IAED;;;OAGG;IACH,0BA4CC;IAED;;;;;;;;;;;;;;OAcG;IACH,mBAZW,MAAM,UAGN,MAAM,aAGN,MAAM,GAGL,SAAS,CASpB;IAED;;;;;;;;;;;;;;;;;;;;OAoBG;IACH;eAZW,MAAM;gBAGN,MAAM;mBAGN,MAAM;QAGL,gBAAgB,CAS3B;IAED;;;;;;;;;;;;;;;;OAgBG;IACH,kDATW,OAAO,GAKN,gBAAgB,CAqB3B;IAED;;;;;OAKG;IACH,6BAHW,SAAS,QAUnB;IAED;;;;;;;;;;OAUG;IACH,+BAEC;IAED;;;;;;;;;;;;;OAaG;IACH,2BAPY,eAAQ,SAAS,CAS5B;IAED;;;;;OAKG;IACH,mCAEC;IAED;;;;OAIG;IACH,mCAA+B;IAE/B;;;;;OAKG;IACH,yCAFY,MAAM,CAkBjB;IAED;;;;OAIG;IACH,6BAFW,MAAM,QAQhB;IAED;;;;OAIG;IACH,kBAAc;IAEd;;;;OAIG;IACH,oBAAgB;IAEhB;;;;OAIG;IACH,uBAAmB;IAEnB;;;;;;;OAOG;IACH,oCALW,OAAO,QAKoB;IAEtC;;;;;;;OAOG;IACH,oCALW,OAAO,QAKoB;IAEtC;;;;;;;;;;;;;;;OAeG;IACH,mBAVY,MAAM,GAGN,MAAM,CASjB;IA0JH;;;;;;OAMG;IAEH;;;;;;OAMG;IAEH;;;;;;OAMG;IAEH;;;;;OAKG;IACH,uBAHU,OAAO,CAGmB;IAEpC;;;;;OAKG;IACH,qBAHU,OAAO,CAGiB;IAElC;;;;;;OAMG;IACH,0BAHU,OAAO,CAGsB;IAEvC;;;;;;;;OAQG;IACH,sBAHU,OAAO,CAGkB;IAEnC;;;;;;OAMG;IACH,wBAHU,OAAO,CAGoB;IAErC;;;;;;;;;OASG;IACH,mBAHU,OAAO,CAGe;IAEhC;;;;;;OAMG;IACH,0BAHU,OAAO,CAGsB;IAWvC;;;;;OAKG;IACH,4BAHU,OAAO,CAGwB;CAvJxC;;IAyJD;;;;;;;;;;;OAWG;IACH,+CA0MC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/title-bar.d.ts b/priv/static/video.js/types/title-bar.d.ts
new file mode 100644
index 0000000..f2ca248
--- /dev/null
+++ b/priv/static/video.js/types/title-bar.d.ts
@@ -0,0 +1,67 @@
+export default TitleBar;
+/**
+ * Displays an element over the player which contains an optional title and
+ * description for the current content.
+ *
+ * Much of the code for this component originated in the now obsolete
+ * videojs-dock plugin: https://github.com/brightcove/videojs-dock/
+ *
+ * @extends Component
+ */
+declare class TitleBar extends Component {
+    constructor(player: any, options: any);
+    /**
+     * Create the `TitleBar`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+    els: {
+        title: Element;
+        description: Element;
+    };
+    /**
+     * Updates the DOM based on the component's state object.
+     */
+    updateDom_(): void;
+    /**
+     * Update the contents of the title bar component with new title and
+     * description text.
+     *
+     * If both title and description are missing, the title bar will be hidden.
+     *
+     * If either title or description are present, the title bar will be visible.
+     *
+     * NOTE: Any previously set value will be preserved. To unset a previously
+     * set value, you must pass an empty string or null.
+     *
+     * For example:
+     *
+     * ```
+     * update({title: 'foo', description: 'bar'}) // title: 'foo', description: 'bar'
+     * update({description: 'bar2'}) // title: 'foo', description: 'bar2'
+     * update({title: ''}) // title: '', description: 'bar2'
+     * update({title: 'foo', description: null}) // title: 'foo', description: null
+     * ```
+     *
+     * @param  {Object} [options={}]
+     *         An options object. When empty, the title bar will be hidden.
+     *
+     * @param  {string} [options.title]
+     *         A title to display in the title bar.
+     *
+     * @param  {string} [options.description]
+     *         A description to display in the title bar.
+     */
+    update(options?: {
+        title?: string;
+        description?: string;
+    }): void;
+    /**
+     * Dispose the component.
+     */
+    dispose(): void;
+}
+import Component from "./component";
+//# sourceMappingURL=title-bar.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/title-bar.d.ts.map b/priv/static/video.js/types/title-bar.d.ts.map
new file mode 100644
index 0000000..7a2ab30
--- /dev/null
+++ b/priv/static/video.js/types/title-bar.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"title-bar.d.ts","sourceRoot":"","sources":["../../src/js/title-bar.js"],"names":[],"mappings":";AAKA;;;;;;;;GAQG;AACH;IAEE,uCAIC;IAED;;;;;OAKG;IACH,YAHY,OAAO,CAkBlB;IAdC;;;MASC;IAOH;;OAEG;IACH,mBAmCC;IAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH;QAN6B,KAAK,GAAtB,MAAM;QAGW,WAAW,GAA5B,MAAM;aAKjB;IAED;;OAEG;IACH,gBAWC;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/audio-track-list.d.ts b/priv/static/video.js/types/tracks/audio-track-list.d.ts
new file mode 100644
index 0000000..b4c827a
--- /dev/null
+++ b/priv/static/video.js/types/tracks/audio-track-list.d.ts
@@ -0,0 +1,29 @@
+export default AudioTrackList;
+/**
+ * The current list of {@link AudioTrack} for a media file.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist}
+ * @extends TrackList
+ */
+declare class AudioTrackList extends TrackList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./audio-track').default[] } [tracks=[]]
+     *        A list of `AudioTrack` to instantiate the list with.
+     */
+    constructor(tracks?: import('./audio-track').default[]);
+    changing_: boolean;
+    /**
+     * Add an {@link AudioTrack} to the `AudioTrackList`.
+     *
+     * @param { import('./audio-track').default } track
+     *        The AudioTrack to add to the list
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track: import('./audio-track').default): void;
+    removeTrack(rtrack: any): void;
+}
+import TrackList from "./track-list";
+//# sourceMappingURL=audio-track-list.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/audio-track-list.d.ts.map b/priv/static/video.js/types/tracks/audio-track-list.d.ts.map
new file mode 100644
index 0000000..190948b
--- /dev/null
+++ b/priv/static/video.js/types/tracks/audio-track-list.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"audio-track-list.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/audio-track-list.js"],"names":[],"mappings":";AA2BA;;;;;GAKG;AACH;IAEE;;;;;OAKG;IACH,qBAHY,OAAO,eAAe,EAAE,OAAO,EAAE,EAe5C;IADC,mBAAsB;IAGxB;;;;;;;OAOG;IACH,gBALY,OAAO,eAAe,EAAE,OAAO,QAkC1C;IAED,+BAOC;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/audio-track.d.ts b/priv/static/video.js/types/tracks/audio-track.d.ts
new file mode 100644
index 0000000..d284ffd
--- /dev/null
+++ b/priv/static/video.js/types/tracks/audio-track.d.ts
@@ -0,0 +1,37 @@
+export default AudioTrack;
+/**
+ * A representation of a single `AudioTrack`. If it is part of an {@link AudioTrackList}
+ * only one `AudioTrack` in the list will be enabled at a time.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotrack}
+ * @extends Track
+ */
+declare class AudioTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {AudioTrack~Kind} [options.kind='']
+     *        A valid audio track kind
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {boolean} [options.enabled]
+     *        If this track is the one that is currently playing. If this track is part of
+     *        an {@link AudioTrackList}, only one {@link AudioTrack} will be enabled.
+     */
+    constructor(options?: any);
+    enabled: any;
+    loaded_: boolean;
+}
+import Track from "./track";
+//# sourceMappingURL=audio-track.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/audio-track.d.ts.map b/priv/static/video.js/types/tracks/audio-track.d.ts.map
new file mode 100644
index 0000000..df3ad69
--- /dev/null
+++ b/priv/static/video.js/types/tracks/audio-track.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"audio-track.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/audio-track.js"],"names":[],"mappings":";AAIA;;;;;;GAMG;AACH;IAEE;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,2BAkDC;IAHG,aAA+B;IAEjC,iBAAmB;CAEtB"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/html-track-element-list.d.ts b/priv/static/video.js/types/tracks/html-track-element-list.d.ts
new file mode 100644
index 0000000..b7fa67d
--- /dev/null
+++ b/priv/static/video.js/types/tracks/html-track-element-list.d.ts
@@ -0,0 +1,49 @@
+export default HtmlTrackElementList;
+/**
+ * @file html-track-element-list.js
+ */
+/**
+ * The current list of {@link HtmlTrackElement}s.
+ */
+declare class HtmlTrackElementList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {HtmlTrackElement[]} [tracks=[]]
+     *        A list of `HtmlTrackElement` to instantiate the list with.
+     */
+    constructor(trackElements?: any[]);
+    trackElements_: any[];
+    /**
+     * Add an {@link HtmlTrackElement} to the `HtmlTrackElementList`
+     *
+     * @param {HtmlTrackElement} trackElement
+     *        The track element to add to the list.
+     *
+     * @private
+     */
+    private addTrackElement_;
+    /**
+     * Get an {@link HtmlTrackElement} from the `HtmlTrackElementList` given an
+     * {@link TextTrack}.
+     *
+     * @param {TextTrack} track
+     *        The track associated with a track element.
+     *
+     * @return {HtmlTrackElement|undefined}
+     *         The track element that was found or undefined.
+     *
+     * @private
+     */
+    private getTrackElementByTrack_;
+    /**
+     * Remove a {@link HtmlTrackElement} from the `HtmlTrackElementList`
+     *
+     * @param {HtmlTrackElement} trackElement
+     *        The track element to remove from the list.
+     *
+     * @private
+     */
+    private removeTrackElement_;
+}
+//# sourceMappingURL=html-track-element-list.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/html-track-element-list.d.ts.map b/priv/static/video.js/types/tracks/html-track-element-list.d.ts.map
new file mode 100644
index 0000000..5dd18fe
--- /dev/null
+++ b/priv/static/video.js/types/tracks/html-track-element-list.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"html-track-element-list.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/html-track-element-list.js"],"names":[],"mappings":";AAAA;;GAEG;AAEH;;GAEG;AACH;IAEE;;;;;OAKG;IACH,mCAkBC;IAjBC,sBAAwB;IAmB1B;;;;;;;OAOG;IACH,yBAeC;IAED;;;;;;;;;;;OAWG;IACH,gCAYC;IAED;;;;;;;OAOG;IACH,4BAcC;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/html-track-element.d.ts b/priv/static/video.js/types/tracks/html-track-element.d.ts
new file mode 100644
index 0000000..556dd34
--- /dev/null
+++ b/priv/static/video.js/types/tracks/html-track-element.d.ts
@@ -0,0 +1,65 @@
+export default HTMLTrackElement;
+/**
+ * A single track represented in the DOM.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#htmltrackelement}
+ * @extends EventTarget
+ */
+declare class HTMLTrackElement extends EventTarget {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} options={}
+     *        Object of option names and values
+     *
+     * @param { import('../tech/tech').default } options.tech
+     *        A reference to the tech that owns this HTMLTrackElement.
+     *
+     * @param {TextTrack~Kind} [options.kind='subtitles']
+     *        A valid text track kind.
+     *
+     * @param {TextTrack~Mode} [options.mode='disabled']
+     *        A valid text track mode.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this TextTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {string} [options.srclang='']
+     *        A valid two character language code. An alternative, but deprioritized
+     *        version of `options.language`
+     *
+     * @param {string} [options.src]
+     *        A url to TextTrack cues.
+     *
+     * @param {boolean} [options.default]
+     *        If this track should default to on or off.
+     */
+    constructor(options?: {
+        tech: import('../tech/tech').default;
+    });
+    kind: any;
+    src: any;
+    srclang: any;
+    label: any;
+    default: any;
+    /**
+     * @protected
+     */
+    protected allowedEvents_: {
+        load: string;
+    };
+}
+declare namespace HTMLTrackElement {
+    const NONE: number;
+    const LOADING: number;
+    const LOADED: number;
+    const ERROR: number;
+}
+import EventTarget from "../event-target";
+//# sourceMappingURL=html-track-element.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/html-track-element.d.ts.map b/priv/static/video.js/types/tracks/html-track-element.d.ts.map
new file mode 100644
index 0000000..0115f13
--- /dev/null
+++ b/priv/static/video.js/types/tracks/html-track-element.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"html-track-element.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/html-track-element.js"],"names":[],"mappings":";AAOA;;;;;GAKG;AACH;IAEE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;IACH;QA5BqD,IAAI,EAA7C,OAAO,cAAc,EAAE,OAAO;OAmFzC;IAhDC,UAAsB;IACtB,SAAoB;IACpB,aAA6B;IAC7B,WAAwB;IACxB,aAA4B;IA+ChC;;OAEG;IACH;;MAAyC;CALxC;;gBAYS,MAAM;mBAQN,MAAM;kBAQN,MAAM;iBAQN,MAAM"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/text-track-cue-list.d.ts b/priv/static/video.js/types/tracks/text-track-cue-list.d.ts
new file mode 100644
index 0000000..6a91e5f
--- /dev/null
+++ b/priv/static/video.js/types/tracks/text-track-cue-list.d.ts
@@ -0,0 +1,79 @@
+export default TextTrackCueList;
+/**
+ * ~TextTrackCue
+ */
+export type TextTrackCueList = {
+    /**
+     *           The unique id for this text track cue
+     */
+    id: string;
+    /**
+     *           The start time for this text track cue
+     */
+    startTime: number;
+    /**
+     *           The end time for this text track cue
+     */
+    endTime: number;
+    /**
+     *           Pause when the end time is reached if true.
+     */
+    pauseOnExit: boolean;
+};
+/**
+ * @file text-track-cue-list.js
+ */
+/**
+ * @typedef {Object} TextTrackCueList~TextTrackCue
+ *
+ * @property {string} id
+ *           The unique id for this text track cue
+ *
+ * @property {number} startTime
+ *           The start time for this text track cue
+ *
+ * @property {number} endTime
+ *           The end time for this text track cue
+ *
+ * @property {boolean} pauseOnExit
+ *           Pause when the end time is reached if true.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue}
+ */
+/**
+ * A List of TextTrackCues.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcuelist}
+ */
+declare class TextTrackCueList {
+    /**
+     * Create an instance of this class..
+     *
+     * @param {Array} cues
+     *        A list of cues to be initialized with
+     */
+    constructor(cues: any[]);
+    /**
+     * A setter for cues in this list. Creates getters
+     * an an index for the cues.
+     *
+     * @param {Array} cues
+     *        An array of cues to set
+     *
+     * @private
+     */
+    private setCues_;
+    cues_: any[];
+    length_: number;
+    /**
+     * Get a `TextTrackCue` that is currently in the `TextTrackCueList` by id.
+     *
+     * @param {string} id
+     *        The id of the cue that should be searched for.
+     *
+     * @return {TextTrackCueList~TextTrackCue|null}
+     *         A single cue or null if none was found.
+     */
+    getCueById(id: string): TextTrackCueList;
+}
+//# sourceMappingURL=text-track-cue-list.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/text-track-cue-list.d.ts.map b/priv/static/video.js/types/tracks/text-track-cue-list.d.ts.map
new file mode 100644
index 0000000..6568b9d
--- /dev/null
+++ b/priv/static/video.js/types/tracks/text-track-cue-list.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"text-track-cue-list.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/text-track-cue-list.js"],"names":[],"mappings":";;;;;;;;QAOc,MAAM;;;;eAGN,MAAM;;;;aAGN,MAAM;;;;iBAGN,OAAO;;AAhBrB;;GAEG;AAEH;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;GAIG;AACH;IAEE;;;;;OAKG;IACH,yBAcC;IAED;;;;;;;;OAQG;IACH,iBAyBC;IApBC,aAAiB;IACjB,gBAA0B;IAqB5B;;;;;;;;OAQG;IACH,eANW,MAAM,GAGL,gBAAgB,CAgB3B;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/text-track-display.d.ts b/priv/static/video.js/types/tracks/text-track-display.d.ts
new file mode 100644
index 0000000..8450a3f
--- /dev/null
+++ b/priv/static/video.js/types/tracks/text-track-display.d.ts
@@ -0,0 +1,93 @@
+/**
+ * Construct an rgba color from a given hex color code.
+ *
+ * @param {number} color
+ *        Hex number for color, like #f0e or #f604e2.
+ *
+ * @param {number} opacity
+ *        Value for opacity, 0.0 - 1.0.
+ *
+ * @return {string}
+ *         The rgba color that was created, like 'rgba(255, 0, 0, 0.3)'.
+ */
+export function constructColor(color: number, opacity: number): string;
+export default TextTrackDisplay;
+/**
+ * The component for displaying text track cues.
+ *
+ * @extends Component
+ */
+declare class TextTrackDisplay extends Component {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when `TextTrackDisplay` is ready.
+     */
+    constructor(player: import('../player').default, options?: any, ready?: Function);
+    /**
+    * Preselect a track following this precedence:
+    * - matches the previously selected {@link TextTrack}'s language and kind
+    * - matches the previously selected {@link TextTrack}'s language only
+    * - is the first default captions track
+    * - is the first default descriptions track
+    *
+    * @listens Player#loadstart
+    */
+    preselectTrack(): void;
+    /**
+     * Turn display of {@link TextTrack}'s from the current state into the other state.
+     * There are only two states:
+     * - 'shown'
+     * - 'hidden'
+     *
+     * @listens Player#loadstart
+     */
+    toggleDisplay(): void;
+    /**
+     * Create the {@link Component}'s DOM element.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(): Element;
+    /**
+     * Clear all displayed {@link TextTrack}s.
+     */
+    clearDisplay(): void;
+    /**
+     * Update the displayed TextTrack when a either a {@link Player#texttrackchange} or
+     * a {@link Player#fullscreenchange} is fired.
+     *
+     * @listens Player#texttrackchange
+     * @listens Player#fullscreenchange
+     */
+    updateDisplay(): void;
+    /**
+     * Updates the displayed TextTrack to be sure it overlays the video when a either
+     * a {@link Player#texttrackchange} or a {@link Player#fullscreenchange} is fired.
+     */
+    updateDisplayOverlay(): void;
+    /**
+     * Style {@Link TextTrack} activeCues according to {@Link TextTrackSettings}.
+     *
+     * @param {TextTrack} track
+     *        Text track object containing active cues to style.
+     */
+    updateDisplayState(track: TextTrack): void;
+    /**
+     * Add an {@link TextTrack} to to the {@link Tech}s {@link TextTrackList}.
+     *
+     * @param {TextTrack|TextTrack[]} tracks
+     *        Text track object or text track array to be added to the list.
+     */
+    updateForTrack(tracks: TextTrack | TextTrack[]): void;
+}
+import Component from "../component";
+//# sourceMappingURL=text-track-display.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/text-track-display.d.ts.map b/priv/static/video.js/types/tracks/text-track-display.d.ts.map
new file mode 100644
index 0000000..d238d93
--- /dev/null
+++ b/priv/static/video.js/types/tracks/text-track-display.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"text-track-display.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/text-track-display.js"],"names":[],"mappings":"AAuBA;;;;;;;;;;;GAWG;AACH,sCATW,MAAM,WAGN,MAAM,GAGL,MAAM,CAoBjB;;AA0CD;;;;GAIG;AACH;IAEE;;;;;;;;;;;OAWG;IACH,oBATY,OAAO,WAAW,EAAE,OAAO,mCAoDtC;IAED;;;;;;;;MAQE;IACF,uBAkDC;IAED;;;;;;;OAOG;IACH,sBAMC;IAED;;;;;OAKG;IACH,YAHY,OAAO,CAWlB;IAED;;OAEG;IACH,qBAIC;IAED;;;;;;OAMG;IACH,sBAoDC;IAED;;;OAGG;IACH,6BAwBC;IAED;;;;;OAKG;IACH,0BAHW,SAAS,QAiFnB;IAED;;;;;OAKG;IACH,uBAHW,SAAS,GAAC,SAAS,EAAE,QA4C/B;CAEF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/text-track-list-converter.d.ts b/priv/static/video.js/types/tracks/text-track-list-converter.d.ts
new file mode 100644
index 0000000..5f5e8dd
--- /dev/null
+++ b/priv/static/video.js/types/tracks/text-track-list-converter.d.ts
@@ -0,0 +1,50 @@
+declare namespace _default {
+    export { textTracksToJson };
+    export { jsonToTextTracks };
+    export { trackToJson_ };
+}
+export default _default;
+/**
+ * Examine a {@link Tech} and return a JSON-compatible javascript array that represents the
+ * state of all {@link TextTrack}s currently configured. The return array is compatible with
+ * {@link text-track-list-converter:jsonToTextTracks}.
+ *
+ * @param { import('../tech/tech').default } tech
+ *        The tech object to query
+ *
+ * @return {Array}
+ *         A serializable javascript representation of the {@link Tech}s
+ *         {@link TextTrackList}.
+ */
+declare function textTracksToJson(tech: import('../tech/tech').default): any[];
+/**
+ * Create a set of remote {@link TextTrack}s on a {@link Tech} based on an array of javascript
+ * object {@link TextTrack} representations.
+ *
+ * @param {Array} json
+ *        An array of `TextTrack` representation objects, like those that would be
+ *        produced by `textTracksToJson`.
+ *
+ * @param {Tech} tech
+ *        The `Tech` to create the `TextTrack`s on.
+ */
+declare function jsonToTextTracks(json: any[], tech: Tech): any;
+/**
+ * @file text-track-list-converter.js Utilities for capturing text track state and
+ * re-creating tracks based on a capture.
+ *
+ * @module text-track-list-converter
+ */
+/**
+ * Examine a single {@link TextTrack} and return a JSON-compatible javascript object that
+ * represents the {@link TextTrack}'s state.
+ *
+ * @param {TextTrack} track
+ *        The text track to query.
+ *
+ * @return {Object}
+ *         A serializable javascript representation of the TextTrack.
+ * @private
+ */
+declare function trackToJson_(track: TextTrack): any;
+//# sourceMappingURL=text-track-list-converter.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/text-track-list-converter.d.ts.map b/priv/static/video.js/types/tracks/text-track-list-converter.d.ts.map
new file mode 100644
index 0000000..c2bc6a6
--- /dev/null
+++ b/priv/static/video.js/types/tracks/text-track-list-converter.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"text-track-list-converter.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/text-track-list-converter.js"],"names":[],"mappings":";;;;;;AA2CA;;;;;;;;;;;GAWG;AACH,wCAPY,OAAO,cAAc,EAAE,OAAO,SAwBzC;AAED;;;;;;;;;;GAUG;AACH,gEAUC;AA/FD;;;;;GAKG;AAEH;;;;;;;;;;GAUG;AACH,qCAPW,SAAS,OA8BnB"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/text-track-list.d.ts b/priv/static/video.js/types/tracks/text-track-list.d.ts
new file mode 100644
index 0000000..11b62f4
--- /dev/null
+++ b/priv/static/video.js/types/tracks/text-track-list.d.ts
@@ -0,0 +1,23 @@
+export default TextTrackList;
+/**
+ * The current list of {@link TextTrack} for a media file.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttracklist}
+ * @extends TrackList
+ */
+declare class TextTrackList extends TrackList {
+    /**
+     * Add a {@link TextTrack} to the `TextTrackList`
+     *
+     * @param { import('./text-track').default } track
+     *        The text track to add to the list.
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track: import('./text-track').default): void;
+    queueChange_: () => void;
+    triggerSelectedlanguagechange_: () => void;
+    removeTrack(rtrack: any): void;
+}
+import TrackList from "./track-list";
+//# sourceMappingURL=text-track-list.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/text-track-list.d.ts.map b/priv/static/video.js/types/tracks/text-track-list.d.ts.map
new file mode 100644
index 0000000..7746892
--- /dev/null
+++ b/priv/static/video.js/types/tracks/text-track-list.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"text-track-list.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/text-track-list.js"],"names":[],"mappings":";AAKA;;;;;GAKG;AACH;IAEE;;;;;;;OAOG;IACH,gBALY,OAAO,cAAc,EAAE,OAAO,QAyBzC;IAhBG,yBAAqD;IAGrD,2CAAkF;IAetF,+BAYC;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/text-track-settings.d.ts b/priv/static/video.js/types/tracks/text-track-settings.d.ts
new file mode 100644
index 0000000..a53e584
--- /dev/null
+++ b/priv/static/video.js/types/tracks/text-track-settings.d.ts
@@ -0,0 +1,124 @@
+export default TextTrackSettings;
+/**
+ * Manipulate Text Tracks settings.
+ *
+ * @extends ModalDialog
+ */
+declare class TextTrackSettings extends ModalDialog {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player: import('../player').default, options?: any);
+    /**
+     * Update display of text track settings
+     */
+    updateDisplay(): void;
+    endDialog: Element;
+    /**
+     * Create a <select> element with configured options.
+     *
+     * @param {string} key
+     *        Configuration key to use during creation.
+     *
+     * @param {string} [legendId]
+     *        Id of associated <legend>.
+     *
+     * @param {string} [type=label]
+     *        Type of labelling element, `label` or `legend`
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    private createElSelect_;
+    /**
+     * Create foreground color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    private createElFgColor_;
+    /**
+     * Create background color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    private createElBgColor_;
+    /**
+     * Create window color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    private createElWinColor_;
+    /**
+     * Create color elements for the component
+     *
+     * @return {Element}
+     *         The element that was created
+     *
+     * @private
+     */
+    private createElColors_;
+    /**
+     * Create font elements for the component
+     *
+     * @return {Element}
+     *         The element that was created.
+     *
+     * @private
+     */
+    private createElFont_;
+    /**
+     * Create controls for the component
+     *
+     * @return {Element}
+     *         The element that was created.
+     *
+     * @private
+     */
+    private createElControls_;
+    content(): Element[];
+    /**
+     * Gets an object of text track settings (or null).
+     *
+     * @return {Object}
+     *         An object with config values parsed from the DOM or localStorage.
+     */
+    getValues(): any;
+    /**
+     * Sets text track settings from an object of values.
+     *
+     * @param {Object} values
+     *        An object with config values parsed from the DOM or localStorage.
+     */
+    setValues(values: any): void;
+    /**
+     * Sets all `<select>` elements to their default values.
+     */
+    setDefaults(): void;
+    /**
+     * Restore texttrack settings from localStorage
+     */
+    restoreSettings(): void;
+    /**
+     * Save text track settings to localStorage
+     */
+    saveSettings(): void;
+}
+import ModalDialog from "../modal-dialog";
+//# sourceMappingURL=text-track-settings.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/text-track-settings.d.ts.map b/priv/static/video.js/types/tracks/text-track-settings.d.ts.map
new file mode 100644
index 0000000..85b1bcb
--- /dev/null
+++ b/priv/static/video.js/types/tracks/text-track-settings.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"text-track-settings.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/text-track-settings.js"],"names":[],"mappings":";AA4OA;;;;GAIG;AACH;IAEE;;;;;;;;OAQG;IACH,oBANY,OAAO,WAAW,EAAE,OAAO,iBA8CtC;IAsSD;;OAEG;IACH,sBAMC;IA7UC,mBAGE;IAmCJ;;;;;;;;;;;;;;;;OAgBG;IACH,wBAuBC;IAED;;;;;;;OAOG;IACH,yBAgBC;IAED;;;;;;;OAOG;IACH,yBAgBC;IAED;;;;;;;OAOG;IACH,0BAgBC;IAED;;;;;;;OAOG;IACH,wBASC;IAED;;;;;;;OAOG;IACH,sBAeC;IAED;;;;;;;OAOG;IACH,0BAaC;IAED,qBAMC;IAcD;;;;;OAKG;IACH,iBAUC;IAED;;;;;OAKG;IACH,6BAIC;IAED;;OAEG;IACH,oBAMC;IAED;;OAEG;IACH,wBAYC;IAED;;OAEG;IACH,qBAgBC;CAuCF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/text-track.d.ts b/priv/static/video.js/types/tracks/text-track.d.ts
new file mode 100644
index 0000000..f418054
--- /dev/null
+++ b/priv/static/video.js/types/tracks/text-track.d.ts
@@ -0,0 +1,79 @@
+export default TextTrack;
+/**
+ * A representation of a single `TextTrack`.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrack}
+ * @extends Track
+ */
+declare class TextTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} options={}
+     *        Object of option names and values
+     *
+     * @param { import('../tech/tech').default } options.tech
+     *        A reference to the tech that owns this TextTrack.
+     *
+     * @param {TextTrack~Kind} [options.kind='subtitles']
+     *        A valid text track kind.
+     *
+     * @param {TextTrack~Mode} [options.mode='disabled']
+     *        A valid text track mode.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this TextTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {string} [options.srclang='']
+     *        A valid two character language code. An alternative, but deprioritized
+     *        version of `options.language`
+     *
+     * @param {string} [options.src]
+     *        A url to TextTrack cues.
+     *
+     * @param {boolean} [options.default]
+     *        If this track should default to on or off.
+     */
+    constructor(options?: {
+        tech: import('../tech/tech').default;
+    });
+    tech_: any;
+    cues_: any[];
+    activeCues_: any[];
+    preload_: boolean;
+    timeupdateHandler: Function;
+    src: any;
+    loaded_: boolean;
+    startTracking(): void;
+    rvf_: any;
+    stopTracking(): void;
+    /**
+     * Add a cue to the internal list of cues.
+     *
+     * @param {TextTrack~Cue} cue
+     *        The cue to add to our internal list
+     */
+    addCue(originalCue: any): void;
+    /**
+     * Remove a cue from our internal list
+     *
+     * @param {TextTrack~Cue} removeCue
+     *        The cue to remove from our internal list
+     */
+    removeCue(removeCue: any): void;
+    /**
+     * cuechange - One or more cues in the track have become active or stopped being active.
+     * @protected
+     */
+    protected allowedEvents_: {
+        cuechange: string;
+    };
+}
+import Track from "./track.js";
+//# sourceMappingURL=text-track.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/text-track.d.ts.map b/priv/static/video.js/types/tracks/text-track.d.ts.map
new file mode 100644
index 0000000..a67d15f
--- /dev/null
+++ b/priv/static/video.js/types/tracks/text-track.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"text-track.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/text-track.js"],"names":[],"mappings":";AAoHA;;;;;GAKG;AACH;IAEE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;IACH;QA5BqD,IAAI,EAA7C,OAAO,cAAc,EAAE,OAAO;OA6OzC;IAhMC,WAA0B;IAE1B,aAAe;IACf,mBAAqB;IAErB,kBAAsD;IAMtD,4BA2BE;IA8IA,SAAuB;IAIrB,iBAAmB;IAUzB,sBAKC;IAHC,UAAwE;IAK1E,qBAMC;IAED;;;;;OAKG;IACH,+BA4BC;IAED;;;;;OAKG;IACH,gCAYC;IAGH;;;OAGG;IACH;;MAAkC;CANjC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/track-enums.d.ts b/priv/static/video.js/types/tracks/track-enums.d.ts
new file mode 100644
index 0000000..0a78940
--- /dev/null
+++ b/priv/static/video.js/types/tracks/track-enums.d.ts
@@ -0,0 +1,66 @@
+/**
+ * All possible `VideoTrackKind`s
+ */
+export type VideoTrackKind = any;
+export namespace VideoTrackKind {
+    const alternative: string;
+    const captions: string;
+    const main: string;
+    const sign: string;
+    const subtitles: string;
+    const commentary: string;
+}
+/**
+ * All possible `AudioTrackKind`s
+ */
+export type AudioTrackKind = any;
+/**
+ * All possible `AudioTrackKind`s
+ *
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-kind
+ * @typedef AudioTrack~Kind
+ * @enum
+ */
+export const AudioTrackKind: {
+    alternative: string;
+    descriptions: string;
+    main: string;
+    'main-desc': string;
+    translation: string;
+    commentary: string;
+};
+/**
+ * All possible `TextTrackKind`s
+ */
+export type TextTrackKind = any;
+export namespace TextTrackKind {
+    const subtitles_1: string;
+    export { subtitles_1 as subtitles };
+    const captions_1: string;
+    export { captions_1 as captions };
+    export const descriptions: string;
+    export const chapters: string;
+    export const metadata: string;
+}
+/**
+ * All possible `TextTrackMode`s
+ */
+export type TextTrackMode = any;
+export namespace TextTrackMode {
+    const disabled: string;
+    const hidden: string;
+    const showing: string;
+}
+/**
+ * ~Kind
+ */
+export type VideoTrack = any;
+/**
+ * ~Kind
+ */
+export type AudioTrack = any;
+/**
+ * ~Kind
+ */
+export type TextTrack = any;
+//# sourceMappingURL=track-enums.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/track-enums.d.ts.map b/priv/static/video.js/types/tracks/track-enums.d.ts.map
new file mode 100644
index 0000000..1c565cd
--- /dev/null
+++ b/priv/static/video.js/types/tracks/track-enums.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"track-enums.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/track-enums.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAoBA;;;;;;GAMG;AACH;;;;;;;EAOE"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/track-list.d.ts b/priv/static/video.js/types/tracks/track-list.d.ts
new file mode 100644
index 0000000..18e9d1c
--- /dev/null
+++ b/priv/static/video.js/types/tracks/track-list.d.ts
@@ -0,0 +1,66 @@
+export default TrackList;
+/**
+ * Common functionaliy between {@link TextTrackList}, {@link AudioTrackList}, and
+ * {@link VideoTrackList}
+ *
+ * @extends EventTarget
+ */
+declare class TrackList extends EventTarget {
+    /**
+     * Create an instance of this class
+     *
+     * @param { import('./track').default[] } tracks
+     *        A list of tracks to initialize the list with.
+     *
+     * @abstract
+     */
+    constructor(tracks?: import('./track').default[]);
+    tracks_: any[];
+    /**
+     * Add a {@link Track} to the `TrackList`
+     *
+     * @param { import('./track').default } track
+     *        The audio, video, or text track to add to the list.
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track: import('./track').default): void;
+    /**
+     * Remove a {@link Track} from the `TrackList`
+     *
+     * @param { import('./track').default } rtrack
+     *        The audio, video, or text track to remove from the list.
+     *
+     * @fires TrackList#removetrack
+     */
+    removeTrack(rtrack: import('./track').default): void;
+    /**
+     * Get a Track from the TrackList by a tracks id
+     *
+     * @param {string} id - the id of the track to get
+     * @method getTrackById
+     * @return { import('./track').default }
+     * @private
+     */
+    private getTrackById;
+    /**
+     * Triggered when a different track is selected/enabled.
+     *
+     * @event TrackList#change
+     * @type {Event}
+     */
+    /**
+     * Events that can be called with on + eventName. See {@link EventHandler}.
+     *
+     * @property {Object} TrackList#allowedEvents_
+     * @protected
+     */
+    protected allowedEvents_: {
+        change: string;
+        addtrack: string;
+        removetrack: string;
+        labelchange: string;
+    };
+}
+import EventTarget from "../event-target";
+//# sourceMappingURL=track-list.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/track-list.d.ts.map b/priv/static/video.js/types/tracks/track-list.d.ts.map
new file mode 100644
index 0000000..bf34d59
--- /dev/null
+++ b/priv/static/video.js/types/tracks/track-list.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"track-list.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/track-list.js"],"names":[],"mappings":";AAMA;;;;;GAKG;AACH;IACE;;;;;;;OAOG;IACH,qBALY,OAAO,SAAS,EAAE,OAAO,EAAE,EAyBtC;IAjBC,eAAiB;IAmBnB;;;;;;;OAOG;IACH,gBALY,OAAO,SAAS,EAAE,OAAO,QAqDpC;IAED;;;;;;;OAOG;IACH,oBALY,OAAO,SAAS,EAAE,OAAO,QAsCpC;IAED;;;;;;;OAOG;IACH,qBAaC;IAGH;;;;;OAKG;IAEH;;;;;OAKG;IACH;;;;;MAAkC;CAfjC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/track-types.d.ts b/priv/static/video.js/types/tracks/track-types.d.ts
new file mode 100644
index 0000000..f2d3878
--- /dev/null
+++ b/priv/static/video.js/types/tracks/track-types.d.ts
@@ -0,0 +1,48 @@
+export namespace NORMAL {
+    const names: string[];
+}
+export namespace REMOTE {
+    const names_1: string[];
+    export { names_1 as names };
+}
+export const ALL: {
+    audio: {
+        ListClass: typeof AudioTrackList;
+        TrackClass: typeof AudioTrack;
+        capitalName: string;
+    };
+    video: {
+        ListClass: typeof VideoTrackList;
+        TrackClass: typeof VideoTrack;
+        capitalName: string;
+    };
+    text: {
+        ListClass: typeof TextTrackList;
+        TrackClass: typeof TextTrack;
+        capitalName: string;
+    };
+} & {
+    remoteText: {
+        ListClass: typeof TextTrackList;
+        TrackClass: typeof TextTrack;
+        capitalName: string;
+        getterName: string;
+        privateName: string;
+    };
+    remoteTextEl: {
+        ListClass: typeof HtmlTrackElementList;
+        TrackClass: typeof HTMLTrackElement;
+        capitalName: string;
+        getterName: string;
+        privateName: string;
+    };
+};
+import AudioTrackList from "./audio-track-list";
+import AudioTrack from "./audio-track";
+import VideoTrackList from "./video-track-list";
+import VideoTrack from "./video-track";
+import TextTrackList from "./text-track-list";
+import TextTrack from "./text-track";
+import HtmlTrackElementList from "./html-track-element-list";
+import HTMLTrackElement from "./html-track-element";
+//# sourceMappingURL=track-types.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/track-types.d.ts.map b/priv/static/video.js/types/tracks/track-types.d.ts.map
new file mode 100644
index 0000000..1f3a59c
--- /dev/null
+++ b/priv/static/video.js/types/tracks/track-types.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"track-types.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/track-types.js"],"names":[],"mappings":";;;;;;;AAuDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA8C"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/track.d.ts b/priv/static/video.js/types/tracks/track.d.ts
new file mode 100644
index 0000000..71cd947
--- /dev/null
+++ b/priv/static/video.js/types/tracks/track.d.ts
@@ -0,0 +1,41 @@
+export default Track;
+/**
+ * A Track class that contains all of the common functionality for {@link AudioTrack},
+ * {@link VideoTrack}, and {@link TextTrack}.
+ *
+ * > Note: This class should not be used directly
+ *
+ * @see {@link https://html.spec.whatwg.org/multipage/embedded-content.html}
+ * @extends EventTarget
+ * @abstract
+ */
+declare class Track extends EventTarget {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {string} [options.kind='']
+     *        A valid kind for the track type you are creating.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @abstract
+     */
+    constructor(options?: {
+        kind?: string;
+        id?: string;
+        label?: string;
+        language?: string;
+    });
+}
+import EventTarget from "../event-target";
+//# sourceMappingURL=track.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/track.d.ts.map b/priv/static/video.js/types/tracks/track.d.ts.map
new file mode 100644
index 0000000..c7b15f3
--- /dev/null
+++ b/priv/static/video.js/types/tracks/track.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"track.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/track.js"],"names":[],"mappings":";AAMA;;;;;;;;;GASG;AACH;IAEE;;;;;;;;;;;;;;;;;;;OAmBG;IACH;QAd4B,IAAI,GAArB,MAAM;QAGW,EAAE,GAAnB,MAAM;QAGW,KAAK,GAAtB,MAAM;QAGW,QAAQ,GAAzB,MAAM;OAiFhB;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/video-track-list.d.ts b/priv/static/video.js/types/tracks/video-track-list.d.ts
new file mode 100644
index 0000000..5cdbc87
--- /dev/null
+++ b/priv/static/video.js/types/tracks/video-track-list.d.ts
@@ -0,0 +1,29 @@
+export default VideoTrackList;
+/**
+ * The current list of {@link VideoTrack} for a video.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist}
+ * @extends TrackList
+ */
+declare class VideoTrackList extends TrackList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {VideoTrack[]} [tracks=[]]
+     *        A list of `VideoTrack` to instantiate the list with.
+     */
+    constructor(tracks?: VideoTrack[]);
+    changing_: boolean;
+    /**
+     * Add a {@link VideoTrack} to the `VideoTrackList`.
+     *
+     * @param { import('./video-track').default } track
+     *        The VideoTrack to add to the list
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track: import('./video-track').default): void;
+    removeTrack(rtrack: any): void;
+}
+import TrackList from "./track-list";
+//# sourceMappingURL=video-track-list.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/video-track-list.d.ts.map b/priv/static/video.js/types/tracks/video-track-list.d.ts.map
new file mode 100644
index 0000000..35b87f2
--- /dev/null
+++ b/priv/static/video.js/types/tracks/video-track-list.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"video-track-list.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/video-track-list.js"],"names":[],"mappings":";AA0BA;;;;;GAKG;AACH;IAEE;;;;;OAKG;IACH,qBAHW,YAAY,EA+BtB;IAjBC,mBAAsB;IAmBxB;;;;;;;OAOG;IACH,gBALY,OAAO,eAAe,EAAE,OAAO,QA+B1C;IAED,+BAOC;CACF"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/video-track.d.ts b/priv/static/video.js/types/tracks/video-track.d.ts
new file mode 100644
index 0000000..0933e64
--- /dev/null
+++ b/priv/static/video.js/types/tracks/video-track.d.ts
@@ -0,0 +1,40 @@
+export default VideoTrack;
+/**
+ * A representation of a single `VideoTrack`.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotrack}
+ * @extends Track
+ */
+declare class VideoTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {string} [options.kind='']
+     *        A valid {@link VideoTrack~Kind}
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {boolean} [options.selected]
+     *        If this track is the one that is currently playing.
+     */
+    constructor(options?: {
+        kind?: string;
+        id?: string;
+        label?: string;
+        language?: string;
+        selected?: boolean;
+    });
+    selected: any;
+}
+import Track from "./track";
+//# sourceMappingURL=video-track.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/tracks/video-track.d.ts.map b/priv/static/video.js/types/tracks/video-track.d.ts.map
new file mode 100644
index 0000000..a619328
--- /dev/null
+++ b/priv/static/video.js/types/tracks/video-track.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"video-track.d.ts","sourceRoot":"","sources":["../../../src/js/tracks/video-track.js"],"names":[],"mappings":";AAIA;;;;;GAKG;AACH;IAEE;;;;;;;;;;;;;;;;;;;;OAoBG;IACH;QAf4B,IAAI,GAArB,MAAM;QAGW,EAAE,GAAnB,MAAM;QAGW,KAAK,GAAtB,MAAM;QAGW,QAAQ,GAAzB,MAAM;QAGY,QAAQ,GAA1B,OAAO;OAoDjB;IAFG,cAAiC;CAGtC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/browser.d.ts b/priv/static/video.js/types/utils/browser.d.ts
new file mode 100644
index 0000000..5f330d0
--- /dev/null
+++ b/priv/static/video.js/types/utils/browser.d.ts
@@ -0,0 +1,163 @@
+/**
+ * Whether or not this device is an iPod.
+ *
+ * @static
+ * @type {Boolean}
+ */
+export let IS_IPOD: boolean;
+/**
+ * The detected iOS version - or `null`.
+ *
+ * @static
+ * @type {string|null}
+ */
+export let IOS_VERSION: string | null;
+/**
+ * Whether or not this is an Android device.
+ *
+ * @static
+ * @type {Boolean}
+ */
+export let IS_ANDROID: boolean;
+/**
+ * The detected Android version - or `null` if not Android or indeterminable.
+ *
+ * @static
+ * @type {number|string|null}
+ */
+export let ANDROID_VERSION: number | string | null;
+/**
+ * Whether or not this is Mozilla Firefox.
+ *
+ * @static
+ * @type {Boolean}
+ */
+export let IS_FIREFOX: boolean;
+/**
+ * Whether or not this is Microsoft Edge.
+ *
+ * @static
+ * @type {Boolean}
+ */
+export let IS_EDGE: boolean;
+/**
+ * Whether or not this is any Chromium Browser
+ *
+ * @static
+ * @type {Boolean}
+ */
+export let IS_CHROMIUM: boolean;
+/**
+ * Whether or not this is any Chromium browser that is not Edge.
+ *
+ * This will also be `true` for Chrome on iOS, which will have different support
+ * as it is actually Safari under the hood.
+ *
+ * Deprecated, as the behaviour to not match Edge was to prevent Legacy Edge's UA matching.
+ * IS_CHROMIUM should be used instead.
+ * "Chromium but not Edge" could be explicitly tested with IS_CHROMIUM && !IS_EDGE
+ *
+ * @static
+ * @deprecated
+ * @type {Boolean}
+ */
+export let IS_CHROME: boolean;
+/**
+ * The detected Chromium version - or `null`.
+ *
+ * @static
+ * @type {number|null}
+ */
+export let CHROMIUM_VERSION: number | null;
+/**
+ * The detected Google Chrome version - or `null`.
+ * This has always been the _Chromium_ version, i.e. would return on Chromium Edge.
+ * Deprecated, use CHROMIUM_VERSION instead.
+ *
+ * @static
+ * @deprecated
+ * @type {number|null}
+ */
+export let CHROME_VERSION: number | null;
+/**
+ * The detected Internet Explorer version - or `null`.
+ *
+ * @static
+ * @deprecated
+ * @type {number|null}
+ */
+export let IE_VERSION: number | null;
+/**
+ * Whether or not this is desktop Safari.
+ *
+ * @static
+ * @type {Boolean}
+ */
+export let IS_SAFARI: boolean;
+/**
+ * Whether or not this is a Windows machine.
+ *
+ * @static
+ * @type {Boolean}
+ */
+export let IS_WINDOWS: boolean;
+/**
+ * Whether or not this device is an iPad.
+ *
+ * @static
+ * @type {Boolean}
+ */
+export let IS_IPAD: boolean;
+/**
+ * Whether or not this device is an iPhone.
+ *
+ * @static
+ * @type {Boolean}
+ */
+export let IS_IPHONE: boolean;
+/**
+ * Whether or not this is a Tizen device.
+ *
+ * @static
+ * @type {Boolean}
+ */
+export let IS_TIZEN: boolean;
+/**
+ * Whether or not this is a WebOS device.
+ *
+ * @static
+ * @type {Boolean}
+ */
+export let IS_WEBOS: boolean;
+/**
+ * Whether or not this is a Smart TV (Tizen or WebOS) device.
+ *
+ * @static
+ * @type {Boolean}
+ */
+export let IS_SMART_TV: boolean;
+/**
+ * Whether or not this device is touch-enabled.
+ *
+ * @static
+ * @const
+ * @type {Boolean}
+ */
+export const TOUCH_ENABLED: boolean;
+/**
+ * Whether or not this is an iOS device.
+ *
+ * @static
+ * @const
+ * @type {Boolean}
+ */
+export const IS_IOS: boolean;
+/**
+ * Whether or not this is any flavor of Safari - including iOS.
+ *
+ * @static
+ * @const
+ * @type {Boolean}
+ */
+export const IS_ANY_SAFARI: boolean;
+//# sourceMappingURL=browser.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/browser.d.ts.map b/priv/static/video.js/types/utils/browser.d.ts.map
new file mode 100644
index 0000000..53a93a7
--- /dev/null
+++ b/priv/static/video.js/types/utils/browser.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../../../src/js/utils/browser.js"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,4BAA2B;AAE3B;;;;;GAKG;AACH,wBAFU,MAAM,GAAC,IAAI,CAES;AAE9B;;;;;GAKG;AACH,+BAA8B;AAE9B;;;;;GAKG;AACH,4BAFU,MAAM,GAAC,MAAM,GAAC,IAAI,CAED;AAE3B;;;;;GAKG;AACH,+BAA8B;AAE9B;;;;;GAKG;AACH,4BAA2B;AAE3B;;;;;GAKG;AACH,gCAA+B;AAE/B;;;;;;;;;;;;;GAaG;AACH,8BAA6B;AAE7B;;;;;GAKG;AACH,6BAFU,MAAM,GAAC,IAAI,CAEc;AAEnC;;;;;;;;GAQG;AACH,2BAFU,MAAM,GAAC,IAAI,CAEY;AAEjC;;;;;;GAMG;AACH,uBAFU,MAAM,GAAC,IAAI,CAEQ;AAE7B;;;;;GAKG;AACH,8BAA6B;AAE7B;;;;;GAKG;AACH,+BAA8B;AAE9B;;;;;GAKG;AACH,4BAA2B;AAE3B;;;;;GAKG;AAIH,8BAA6B;AAE7B;;;;;GAKG;AACH,6BAA4B;AAE5B;;;;;GAKG;AACH,6BAA4B;AAE5B;;;;;GAKG;AACH,gCAA+B;AAE/B;;;;;;GAMG;AACH,oCAG4E;AAqG5E;;;;;;GAMG;AACH,6BAAsD;AAEtD;;;;;;GAMG;AACH,oCAAiE"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/buffer.d.ts b/priv/static/video.js/types/utils/buffer.d.ts
new file mode 100644
index 0000000..39baee8
--- /dev/null
+++ b/priv/static/video.js/types/utils/buffer.d.ts
@@ -0,0 +1,14 @@
+/**
+ * Compute the percentage of the media that has been buffered.
+ *
+ * @param { import('./time').TimeRange } buffered
+ *        The current `TimeRanges` object representing buffered time ranges
+ *
+ * @param {number} duration
+ *        Total duration of the media
+ *
+ * @return {number}
+ *         Percent buffered of the total duration in decimal form.
+ */
+export function bufferedPercent(buffered: import('./time').TimeRange, duration: number): number;
+//# sourceMappingURL=buffer.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/buffer.d.ts.map b/priv/static/video.js/types/utils/buffer.d.ts.map
new file mode 100644
index 0000000..77e3051
--- /dev/null
+++ b/priv/static/video.js/types/utils/buffer.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"buffer.d.ts","sourceRoot":"","sources":["../../../src/js/utils/buffer.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;GAWG;AACH,0CATY,OAAO,QAAQ,EAAE,SAAS,YAG3B,MAAM,GAGL,MAAM,CA6BjB"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/create-logger.d.ts b/priv/static/video.js/types/utils/create-logger.d.ts
new file mode 100644
index 0000000..bf4c187
--- /dev/null
+++ b/priv/static/video.js/types/utils/create-logger.d.ts
@@ -0,0 +1,124 @@
+export default function createLogger(name: any, delimiter?: string, styles?: string): {
+    (...args: any[]): void;
+    /**
+     * Create a new subLogger which chains the old name to the new name.
+     *
+     * For example, doing `videojs.log.createLogger('player')` and then using that logger will log the following:
+     * ```js
+     *  mylogger('foo');
+     *  // > VIDEOJS: player: foo
+     * ```
+     *
+     * @param {string} subName
+     *        The name to add call the new logger
+     * @param {string} [subDelimiter]
+     *        Optional delimiter
+     * @param {string} [subStyles]
+     *        Optional styles
+     * @return {Object}
+     */
+    createLogger(subName: string, subDelimiter?: string, subStyles?: string): any;
+    /**
+     * Create a new logger.
+     *
+     * @param {string} newName
+     *        The name for the new logger
+     * @param {string} [newDelimiter]
+     *        Optional delimiter
+     * @param {string} [newStyles]
+     *        Optional styles
+     * @return {Object}
+     */
+    createNewLogger(newName: string, newDelimiter?: string, newStyles?: string): any;
+    /**
+     * Enumeration of available logging levels, where the keys are the level names
+     * and the values are `|`-separated strings containing logging methods allowed
+     * in that logging level. These strings are used to create a regular expression
+     * matching the function name being called.
+     *
+     * Levels provided by Video.js are:
+     *
+     * - `off`: Matches no calls. Any value that can be cast to `false` will have
+     *   this effect. The most restrictive.
+     * - `all`: Matches only Video.js-provided functions (`debug`, `log`,
+     *   `log.warn`, and `log.error`).
+     * - `debug`: Matches `log.debug`, `log`, `log.warn`, and `log.error` calls.
+     * - `info` (default): Matches `log`, `log.warn`, and `log.error` calls.
+     * - `warn`: Matches `log.warn` and `log.error` calls.
+     * - `error`: Matches only `log.error` calls.
+     *
+     * @type {Object}
+     */
+    levels: any;
+    /**
+     * Get or set the current logging level.
+     *
+     * If a string matching a key from {@link module:log.levels} is provided, acts
+     * as a setter.
+     *
+     * @param  {'all'|'debug'|'info'|'warn'|'error'|'off'} [lvl]
+     *         Pass a valid level to set a new logging level.
+     *
+     * @return {string}
+     *         The current logging level.
+     */
+    level(lvl?: 'all' | 'debug' | 'info' | 'warn' | 'error' | 'off'): string;
+    /**
+     * Returns an array containing everything that has been logged to the history.
+     *
+     * This array is a shallow clone of the internal history record. However, its
+     * contents are _not_ cloned; so, mutating objects inside this array will
+     * mutate them in history.
+     *
+     * @return {Array}
+     */
+    history: {
+        (): any[];
+        /**
+         * Allows you to filter the history by the given logger name
+         *
+         * @param {string} fname
+         *        The name to filter by
+         *
+         * @return {Array}
+         *         The filtered list to return
+         */
+        filter(fname: string): any[];
+        /**
+         * Clears the internal history tracking, but does not prevent further history
+         * tracking.
+         */
+        clear(): void;
+        /**
+         * Disable history tracking if it is currently enabled.
+         */
+        disable(): void;
+        /**
+         * Enable history tracking if it is currently disabled.
+         */
+        enable(): void;
+    };
+    /**
+     * Logs error messages. Similar to `console.error`.
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as an error
+     */
+    error(...args: any[]): any;
+    /**
+     * Logs warning messages. Similar to `console.warn`.
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as a warning.
+     */
+    warn(...args: any[]): any;
+    /**
+     * Logs debug messages. Similar to `console.debug`, but may also act as a comparable
+     * log if `console.debug` is not available
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as debug.
+     */
+    debug(...args: any[]): any;
+};
+//# sourceMappingURL=create-logger.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/create-logger.d.ts.map b/priv/static/video.js/types/utils/create-logger.d.ts.map
new file mode 100644
index 0000000..a5f7e46
--- /dev/null
+++ b/priv/static/video.js/types/utils/create-logger.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"create-logger.d.ts","sourceRoot":"","sources":["../../../src/js/utils/create-logger.js"],"names":[],"mappings":"AA8EA;;IAmCE;;;;;;;;;;;;;;;;OAgBG;0BAPQ,MAAM,iBAEN,MAAM,cAEN,MAAM;IAYjB;;;;;;;;;;OAUG;6BAPQ,MAAM,iBAEN,MAAM,cAEN,MAAM;IAQjB;;;;;;;;;;;;;;;;;;OAkBG;;IAWH;;;;;;;;;;;OAWG;gBALS,KAAK,GAAC,OAAO,GAAC,MAAM,GAAC,MAAM,GAAC,OAAO,GAAC,KAAK,GAGzC,MAAM;IAalB;;;;;;;;OAQG;;;QAGH;;;;;;;;WAQG;sBALQ,MAAM;QAajB;;;WAGG;;QAOH;;WAEG;;QAQH;;WAEG;;;IAOH;;;;;OAKG;;IAGH;;;;;OAKG;;IAGH;;;;;;OAMG;;EAIJ"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/deprecate.d.ts b/priv/static/video.js/types/utils/deprecate.d.ts
new file mode 100644
index 0000000..6e8b020
--- /dev/null
+++ b/priv/static/video.js/types/utils/deprecate.d.ts
@@ -0,0 +1,28 @@
+/**
+ * Decorate a function with a deprecation message the first time it is called.
+ *
+ * @param  {string}   message
+ *         A deprecation message to log the first time the returned function
+ *         is called.
+ *
+ * @param  {Function} fn
+ *         The function to be deprecated.
+ *
+ * @return {Function}
+ *         A wrapper function that will log a deprecation warning the first
+ *         time it is called. The return value will be the return value of
+ *         the wrapped function.
+ */
+export function deprecate(message: string, fn: Function): Function;
+/**
+ * Internal function used to mark a function as deprecated in the next major
+ * version with consistent messaging.
+ *
+ * @param  {number}   major   The major version where it will be removed
+ * @param  {string}   oldName The old function name
+ * @param  {string}   newName The new function name
+ * @param  {Function} fn      The function to deprecate
+ * @return {Function}         The decorated function
+ */
+export function deprecateForMajor(major: number, oldName: string, newName: string, fn: Function): Function;
+//# sourceMappingURL=deprecate.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/deprecate.d.ts.map b/priv/static/video.js/types/utils/deprecate.d.ts.map
new file mode 100644
index 0000000..16fada5
--- /dev/null
+++ b/priv/static/video.js/types/utils/deprecate.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"deprecate.d.ts","sourceRoot":"","sources":["../../../src/js/utils/deprecate.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;GAcG;AACH,mCAZY,MAAM,0BAwBjB;AAED;;;;;;;;;GASG;AACH,yCANY,MAAM,WACN,MAAM,WACN,MAAM,0BAMjB"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/dom-data.d.ts b/priv/static/video.js/types/utils/dom-data.d.ts
new file mode 100644
index 0000000..df14f6c
--- /dev/null
+++ b/priv/static/video.js/types/utils/dom-data.d.ts
@@ -0,0 +1,3 @@
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=dom-data.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/dom-data.d.ts.map b/priv/static/video.js/types/utils/dom-data.d.ts.map
new file mode 100644
index 0000000..d33e811
--- /dev/null
+++ b/priv/static/video.js/types/utils/dom-data.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"dom-data.d.ts","sourceRoot":"","sources":["../../../src/js/utils/dom-data.js"],"names":[],"mappings":""}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/dom.d.ts b/priv/static/video.js/types/utils/dom.d.ts
new file mode 100644
index 0000000..83c53cd
--- /dev/null
+++ b/priv/static/video.js/types/utils/dom.d.ts
@@ -0,0 +1,448 @@
+/**
+ * Whether the current DOM interface appears to be real (i.e. not simulated).
+ *
+ * @return {boolean}
+ *         Will be `true` if the DOM appears to be real, `false` otherwise.
+ */
+export function isReal(): boolean;
+/**
+ * Determines, via duck typing, whether or not a value is a DOM element.
+ *
+ * @param  {*} value
+ *         The value to check.
+ *
+ * @return {boolean}
+ *         Will be `true` if the value is a DOM element, `false` otherwise.
+ */
+export function isEl(value: any): boolean;
+/**
+ * Determines if the current DOM is embedded in an iframe.
+ *
+ * @return {boolean}
+ *         Will be `true` if the DOM is embedded in an iframe, `false`
+ *         otherwise.
+ */
+export function isInFrame(): boolean;
+/**
+ * Creates an element and applies properties, attributes, and inserts content.
+ *
+ * @param  {string} [tagName='div']
+ *         Name of tag to be created.
+ *
+ * @param  {Object} [properties={}]
+ *         Element properties to be applied.
+ *
+ * @param  {Object} [attributes={}]
+ *         Element attributes to be applied.
+ *
+ * @param {ContentDescriptor} [content]
+ *        A content descriptor object.
+ *
+ * @return {Element}
+ *         The element that was created.
+ */
+export function createEl(tagName?: string, properties?: any, attributes?: any, content?: ContentDescriptor): Element;
+/**
+ * Injects text into an element, replacing any existing contents entirely.
+ *
+ * @param  {HTMLElement} el
+ *         The element to add text content into
+ *
+ * @param  {string} text
+ *         The text content to add.
+ *
+ * @return {Element}
+ *         The element with added text content.
+ */
+export function textContent(el: HTMLElement, text: string): Element;
+/**
+ * Insert an element as the first child node of another
+ *
+ * @param {Element} child
+ *        Element to insert
+ *
+ * @param {Element} parent
+ *        Element to insert child into
+ */
+export function prependTo(child: Element, parent: Element): void;
+/**
+ * Check if an element has a class name.
+ *
+ * @param  {Element} element
+ *         Element to check
+ *
+ * @param  {string} classToCheck
+ *         Class name to check for
+ *
+ * @return {boolean}
+ *         Will be `true` if the element has a class, `false` otherwise.
+ *
+ * @throws {Error}
+ *         Throws an error if `classToCheck` has white space.
+ */
+export function hasClass(element: Element, classToCheck: string): boolean;
+/**
+ * Add a class name to an element.
+ *
+ * @param  {Element} element
+ *         Element to add class name to.
+ *
+ * @param  {...string} classesToAdd
+ *         One or more class name to add.
+ *
+ * @return {Element}
+ *         The DOM element with the added class name.
+ */
+export function addClass(element: Element, ...classesToAdd: string[]): Element;
+/**
+ * Remove a class name from an element.
+ *
+ * @param  {Element} element
+ *         Element to remove a class name from.
+ *
+ * @param  {...string} classesToRemove
+ *         One or more class name to remove.
+ *
+ * @return {Element}
+ *         The DOM element with class name removed.
+ */
+export function removeClass(element: Element, ...classesToRemove: string[]): Element;
+/**
+ * The callback definition for toggleClass.
+ *
+ * @callback module:dom~PredicateCallback
+ * @param    {Element} element
+ *           The DOM element of the Component.
+ *
+ * @param    {string} classToToggle
+ *           The `className` that wants to be toggled
+ *
+ * @return   {boolean|undefined}
+ *           If `true` is returned, the `classToToggle` will be added to the
+ *           `element`. If `false`, the `classToToggle` will be removed from
+ *           the `element`. If `undefined`, the callback will be ignored.
+ */
+/**
+ * Adds or removes a class name to/from an element depending on an optional
+ * condition or the presence/absence of the class name.
+ *
+ * @param  {Element} element
+ *         The element to toggle a class name on.
+ *
+ * @param  {string} classToToggle
+ *         The class that should be toggled.
+ *
+ * @param  {boolean|module:dom~PredicateCallback} [predicate]
+ *         See the return value for {@link module:dom~PredicateCallback}
+ *
+ * @return {Element}
+ *         The element with a class that has been toggled.
+ */
+export function toggleClass(element: Element, classToToggle: string, predicate: any): Element;
+/**
+ * Apply attributes to an HTML element.
+ *
+ * @param {Element} el
+ *        Element to add attributes to.
+ *
+ * @param {Object} [attributes]
+ *        Attributes to be applied.
+ */
+export function setAttributes(el: Element, attributes?: any): void;
+/**
+ * Get an element's attribute values, as defined on the HTML tag.
+ *
+ * Attributes are not the same as properties. They're defined on the tag
+ * or with setAttribute.
+ *
+ * @param  {Element} tag
+ *         Element from which to get tag attributes.
+ *
+ * @return {Object}
+ *         All attributes of the element. Boolean attributes will be `true` or
+ *         `false`, others will be strings.
+ */
+export function getAttributes(tag: Element): any;
+/**
+ * Get the value of an element's attribute.
+ *
+ * @param {Element} el
+ *        A DOM element.
+ *
+ * @param {string} attribute
+ *        Attribute to get the value of.
+ *
+ * @return {string}
+ *         The value of the attribute.
+ */
+export function getAttribute(el: Element, attribute: string): string;
+/**
+ * Set the value of an element's attribute.
+ *
+ * @param {Element} el
+ *        A DOM element.
+ *
+ * @param {string} attribute
+ *        Attribute to set.
+ *
+ * @param {string} value
+ *        Value to set the attribute to.
+ */
+export function setAttribute(el: Element, attribute: string, value: string): void;
+/**
+ * Remove an element's attribute.
+ *
+ * @param {Element} el
+ *        A DOM element.
+ *
+ * @param {string} attribute
+ *        Attribute to remove.
+ */
+export function removeAttribute(el: Element, attribute: string): void;
+/**
+ * Attempt to block the ability to select text.
+ */
+export function blockTextSelection(): void;
+/**
+ * Turn off text selection blocking.
+ */
+export function unblockTextSelection(): void;
+/**
+ * Identical to the native `getBoundingClientRect` function, but ensures that
+ * the method is supported at all (it is in all browsers we claim to support)
+ * and that the element is in the DOM before continuing.
+ *
+ * This wrapper function also shims properties which are not provided by some
+ * older browsers (namely, IE8).
+ *
+ * Additionally, some browsers do not support adding properties to a
+ * `ClientRect`/`DOMRect` object; so, we shallow-copy it with the standard
+ * properties (except `x` and `y` which are not widely supported). This helps
+ * avoid implementations where keys are non-enumerable.
+ *
+ * @param  {Element} el
+ *         Element whose `ClientRect` we want to calculate.
+ *
+ * @return {Object|undefined}
+ *         Always returns a plain object - or `undefined` if it cannot.
+ */
+export function getBoundingClientRect(el: Element): any | undefined;
+/**
+ * Represents the position of a DOM element on the page.
+ *
+ * @typedef  {Object} module:dom~Position
+ *
+ * @property {number} left
+ *           Pixels to the left.
+ *
+ * @property {number} top
+ *           Pixels from the top.
+ */
+/**
+ * Get the position of an element in the DOM.
+ *
+ * Uses `getBoundingClientRect` technique from John Resig.
+ *
+ * @see http://ejohn.org/blog/getboundingclientrect-is-awesome/
+ *
+ * @param  {Element} el
+ *         Element from which to get offset.
+ *
+ * @return {module:dom~Position}
+ *         The position of the element that was passed in.
+ */
+export function findPosition(el: Element): any;
+/**
+ * Represents x and y coordinates for a DOM element or mouse pointer.
+ *
+ * @typedef  {Object} module:dom~Coordinates
+ *
+ * @property {number} x
+ *           x coordinate in pixels
+ *
+ * @property {number} y
+ *           y coordinate in pixels
+ */
+/**
+ * Get the pointer position within an element.
+ *
+ * The base on the coordinates are the bottom left of the element.
+ *
+ * @param  {Element} el
+ *         Element on which to get the pointer position on.
+ *
+ * @param  {Event} event
+ *         Event object.
+ *
+ * @return {module:dom~Coordinates}
+ *         A coordinates object corresponding to the mouse position.
+ *
+ */
+export function getPointerPosition(el: Element, event: Event): any;
+/**
+ * Determines, via duck typing, whether or not a value is a text node.
+ *
+ * @param  {*} value
+ *         Check if this value is a text node.
+ *
+ * @return {boolean}
+ *         Will be `true` if the value is a text node, `false` otherwise.
+ */
+export function isTextNode(value: any): boolean;
+/**
+ * Empties the contents of an element.
+ *
+ * @param  {Element} el
+ *         The element to empty children from
+ *
+ * @return {Element}
+ *         The element with no children
+ */
+export function emptyEl(el: Element): Element;
+/**
+ * This is a mixed value that describes content to be injected into the DOM
+ * via some method. It can be of the following types:
+ *
+ * Type       | Description
+ * -----------|-------------
+ * `string`   | The value will be normalized into a text node.
+ * `Element`  | The value will be accepted as-is.
+ * `Text`     | A TextNode. The value will be accepted as-is.
+ * `Array`    | A one-dimensional array of strings, elements, text nodes, or functions. These functions should return a string, element, or text node (any other return value, like an array, will be ignored).
+ * `Function` | A function, which is expected to return a string, element, text node, or array - any of the other possible values described above. This means that a content descriptor could be a function that returns an array of functions, but those second-level functions must return strings, elements, or text nodes.
+ *
+ * @typedef {string|Element|Text|Array|Function} ContentDescriptor
+ */
+/**
+ * Normalizes content for eventual insertion into the DOM.
+ *
+ * This allows a wide range of content definition methods, but helps protect
+ * from falling into the trap of simply writing to `innerHTML`, which could
+ * be an XSS concern.
+ *
+ * The content for an element can be passed in multiple types and
+ * combinations, whose behavior is as follows:
+ *
+ * @param {ContentDescriptor} content
+ *        A content descriptor value.
+ *
+ * @return {Array}
+ *         All of the content that was passed in, normalized to an array of
+ *         elements or text nodes.
+ */
+export function normalizeContent(content: ContentDescriptor): any[];
+/**
+ * Normalizes and appends content to an element.
+ *
+ * @param  {Element} el
+ *         Element to append normalized content to.
+ *
+ * @param {ContentDescriptor} content
+ *        A content descriptor value.
+ *
+ * @return {Element}
+ *         The element with appended normalized content.
+ */
+export function appendContent(el: Element, content: ContentDescriptor): Element;
+/**
+ * Normalizes and inserts content into an element; this is identical to
+ * `appendContent()`, except it empties the element first.
+ *
+ * @param {Element} el
+ *        Element to insert normalized content into.
+ *
+ * @param {ContentDescriptor} content
+ *        A content descriptor value.
+ *
+ * @return {Element}
+ *         The element with inserted normalized content.
+ */
+export function insertContent(el: Element, content: ContentDescriptor): Element;
+/**
+ * Check if an event was a single left click.
+ *
+ * @param  {MouseEvent} event
+ *         Event object.
+ *
+ * @return {boolean}
+ *         Will be `true` if a single left click, `false` otherwise.
+ */
+export function isSingleLeftClick(event: MouseEvent): boolean;
+/**
+ * A safe getComputedStyle.
+ *
+ * This is needed because in Firefox, if the player is loaded in an iframe with
+ * `display:none`, then `getComputedStyle` returns `null`, so, we do a
+ * null-check to make sure that the player doesn't break in these cases.
+ *
+ * @param    {Element} el
+ *           The element you want the computed style of
+ *
+ * @param    {string} prop
+ *           The property name you want
+ *
+ * @see      https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+ */
+export function computedStyle(el: Element, prop: string): any;
+/**
+ * Copy document style sheets to another window.
+ *
+ * @param    {Window} win
+ *           The window element you want to copy the document style sheets to.
+ *
+ */
+export function copyStyleSheetsToWindow(win: Window): void;
+/**
+ * Finds a single DOM element matching `selector` within the optional
+ * `context` of another DOM element (defaulting to `document`).
+ *
+ * @param  {string} selector
+ *         A valid CSS selector, which will be passed to `querySelector`.
+ *
+ * @param  {Element|String} [context=document]
+ *         A DOM element within which to query. Can also be a selector
+ *         string in which case the first matching element will be used
+ *         as context. If missing (or no element matches selector), falls
+ *         back to `document`.
+ *
+ * @return {Element|null}
+ *         The element that was found or null.
+ */
+export const $: Function;
+/**
+ * Finds a all DOM elements matching `selector` within the optional
+ * `context` of another DOM element (defaulting to `document`).
+ *
+ * @param  {string} selector
+ *         A valid CSS selector, which will be passed to `querySelectorAll`.
+ *
+ * @param  {Element|String} [context=document]
+ *         A DOM element within which to query. Can also be a selector
+ *         string in which case the first matching element will be used
+ *         as context. If missing (or no element matches selector), falls
+ *         back to `document`.
+ *
+ * @return {NodeList}
+ *         A element list of elements that were found. Will be empty if none
+ *         were found.
+ *
+ */
+export const $$: Function;
+/**
+ * :dom~PredicateCallback
+ */
+export type module = (element: Element, classToToggle: string) => boolean | undefined;
+/**
+ * This is a mixed value that describes content to be injected into the DOM
+ * via some method. It can be of the following types:
+ *
+ * Type       | Description
+ * -----------|-------------
+ * `string`   | The value will be normalized into a text node.
+ * `Element`  | The value will be accepted as-is.
+ * `Text`     | A TextNode. The value will be accepted as-is.
+ * `Array`    | A one-dimensional array of strings, elements, text nodes, or functions. These functions should return a string, element, or text node (any other return value, like an array, will be ignored).
+ * `Function` | A function, which is expected to return a string, element, text node, or array - any of the other possible values described above. This means that a content descriptor could be a function that returns an array of functions, but those second-level functions must return strings, elements, or text nodes.
+ */
+export type ContentDescriptor = string | Element | Text | any[] | Function;
+//# sourceMappingURL=dom.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/dom.d.ts.map b/priv/static/video.js/types/utils/dom.d.ts.map
new file mode 100644
index 0000000..3c6a5a1
--- /dev/null
+++ b/priv/static/video.js/types/utils/dom.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/js/utils/dom.js"],"names":[],"mappings":"AAkDA;;;;;GAKG;AACH,0BAHY,OAAO,CAMlB;AAED;;;;;;;;GAQG;AACH,kCAHY,OAAO,CAKlB;AAED;;;;;;GAMG;AACH,6BAJY,OAAO,CAalB;AA2BD;;;;;;;;;;;;;;;;;GAiBG;AACH,mCAfY,MAAM,gDASP,iBAAiB,GAGhB,OAAO,CA2BlB;AAED;;;;;;;;;;;GAWG;AACH,gCATY,WAAW,QAGX,MAAM,GAGN,OAAO,CAUlB;AAED;;;;;;;;GAQG;AACH,iCANW,OAAO,UAGP,OAAO,QASjB;AAED;;;;;;;;;;;;;;GAcG;AACH,kCAZY,OAAO,gBAGP,MAAM,GAGN,OAAO,CAUlB;AAED;;;;;;;;;;;GAWG;AACH,kCATY,OAAO,mBAGJ,MAAM,KAGT,OAAO,CAOlB;AAED;;;;;;;;;;;GAWG;AACH,qCATY,OAAO,sBAGJ,MAAM,KAGT,OAAO,CAYlB;AAED;;;;;;;;;;;;;;GAcG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,qCAZY,OAAO,iBAGP,MAAM,mBAMN,OAAO,CAalB;AAED;;;;;;;;GAQG;AACH,kCANW,OAAO,0BAgBjB;AAED;;;;;;;;;;;;GAYG;AACH,mCAPY,OAAO,OAqClB;AAED;;;;;;;;;;;GAWG;AACH,iCATW,OAAO,aAGP,MAAM,GAGL,MAAM,CAKjB;AAED;;;;;;;;;;;GAWG;AACH,iCATW,OAAO,aAGP,MAAM,SAGN,MAAM,QAKhB;AAED;;;;;;;;GAQG;AACH,oCANW,OAAO,aAGP,MAAM,QAKhB;AAED;;GAEG;AACH,2CAKC;AAED;;GAEG;AACH,6CAIC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,0CANY,OAAO,GAGP,MAAO,SAAS,CAwB3B;AAED;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;GAYG;AACH,iCANY,OAAO,OAiClB;AAED;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;;GAcG;AACH,uCAVY,OAAO,SAGP,KAAK,OAuDhB;AAED;;;;;;;;GAQG;AACH,wCAHY,OAAO,CAKlB;AAED;;;;;;;;GAQG;AACH,4BANY,OAAO,GAGP,OAAO,CAQlB;AAED;;;;;;;;;;;;;GAaG;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,0CAPW,iBAAiB,SAiC3B;AAED;;;;;;;;;;;GAWG;AACH,kCATY,OAAO,WAGR,iBAAiB,GAGhB,OAAO,CAMlB;AAED;;;;;;;;;;;;GAYG;AACH,kCATW,OAAO,WAGP,iBAAiB,GAGhB,OAAO,CAKlB;AAED;;;;;;;;GAQG;AACH,yCANY,UAAU,GAGV,OAAO,CAgDlB;AAwCD;;;;;;;;;;;;;;GAcG;AACH,kCARc,OAAO,QAGP,MAAM,OAuBnB;AAED;;;;;;GAMG;AACH,6CAJc,MAAM,QAuBnB;AAnGD;;;;;;;;;;;;;;;GAeG;AACH,yBAAgD;AAEhD;;;;;;;;;;;;;;;;;GAiBG;AACH,0BAAoD;;;;+BA9iBtC,OAAO,iBAGP,MAAM,KAGN,OAAO,GAAC,SAAS;;;;;;;;;;;;;gCA0XlB,MAAM,GAAC,OAAO,GAAC,IAAI,mBAAe"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/events.d.ts b/priv/static/video.js/types/utils/events.d.ts
new file mode 100644
index 0000000..ac46c9f
--- /dev/null
+++ b/priv/static/video.js/types/utils/events.d.ts
@@ -0,0 +1,85 @@
+/**
+ * Fix a native event to have standard property values
+ *
+ * @param {Object} event
+ *        Event object to fix.
+ *
+ * @return {Object}
+ *         Fixed event object.
+ */
+export function fixEvent(event: any): any;
+/**
+ * Add an event listener to element
+ * It stores the handler function in a separate cache object
+ * and adds a generic handler to the element's event,
+ * along with a unique id (guid) to the element.
+ *
+ * @param {Element|Object} elem
+ *        Element or object to bind listeners to
+ *
+ * @param {string|string[]} type
+ *        Type of event to bind to.
+ *
+ * @param {Function} fn
+ *        Event listener.
+ */
+export function on(elem: Element | any, type: string | string[], fn: Function): void;
+/**
+ * Removes event listeners from an element
+ *
+ * @param {Element|Object} elem
+ *        Object to remove listeners from.
+ *
+ * @param {string|string[]} [type]
+ *        Type of listener to remove. Don't include to remove all events from element.
+ *
+ * @param {Function} [fn]
+ *        Specific listener to remove. Don't include to remove listeners for an event
+ *        type.
+ */
+export function off(elem: Element | any, type?: string | string[], fn?: Function): void;
+/**
+ * Trigger an event for an element
+ *
+ * @param {Element|Object} elem
+ *        Element to trigger an event on
+ *
+ * @param {EventTarget~Event|string} event
+ *        A string (the type) or an event object with a type attribute
+ *
+ * @param {Object} [hash]
+ *        data hash to pass along with the event
+ *
+ * @return {boolean|undefined}
+ *         Returns the opposite of `defaultPrevented` if default was
+ *         prevented. Otherwise, returns `undefined`
+ */
+export function trigger(elem: Element | any, event: any, hash?: any): boolean | undefined;
+/**
+ * Trigger a listener only once for an event.
+ *
+ * @param {Element|Object} elem
+ *        Element or object to bind to.
+ *
+ * @param {string|string[]} type
+ *        Name/type of event
+ *
+ * @param {Event~EventListener} fn
+ *        Event listener function
+ */
+export function one(elem: Element | any, type: string | string[], fn: any): void;
+/**
+ * Trigger a listener only once and then turn if off for all
+ * configured events
+ *
+ * @param {Element|Object} elem
+ *        Element or object to bind to.
+ *
+ * @param {string|string[]} type
+ *        Name/type of event
+ *
+ * @param {Event~EventListener} fn
+ *        Event listener function
+ */
+export function any(elem: Element | any, type: string | string[], fn: any): void;
+//# sourceMappingURL=events.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/events.d.ts.map b/priv/static/video.js/types/utils/events.d.ts.map
new file mode 100644
index 0000000..e72dc77
--- /dev/null
+++ b/priv/static/video.js/types/utils/events.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../src/js/utils/events.js"],"names":[],"mappings":"AA+EA;;;;;;;;GAQG;AACH,0CA2HC;AAmCD;;;;;;;;;;;;;;GAcG;AACH,yBATW,OAAO,MAAO,QAGd,MAAM,GAAC,MAAM,EAAE,sBA6EzB;AAED;;;;;;;;;;;;GAYG;AACH,0BAVW,OAAO,MAAO,SAGd,MAAM,GAAC,MAAM,EAAE,uBA+DzB;AAED;;;;;;;;;;;;;;;GAeG;AACH,8BAbW,OAAO,MAAO,2BASb,OAAO,GAAC,SAAS,CAuD5B;AAED;;;;;;;;;;;GAWG;AACH,0BATW,OAAO,MAAO,QAGd,MAAM,GAAC,MAAM,EAAE,iBAkBzB;AAED;;;;;;;;;;;;GAYG;AACH,0BATW,OAAO,MAAO,QAGd,MAAM,GAAC,MAAM,EAAE,iBAiBzB"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/filter-source.d.ts b/priv/static/video.js/types/utils/filter-source.d.ts
new file mode 100644
index 0000000..55874de
--- /dev/null
+++ b/priv/static/video.js/types/utils/filter-source.d.ts
@@ -0,0 +1,16 @@
+export default filterSource;
+/**
+ * Filter out single bad source objects or multiple source objects in an
+ * array. Also flattens nested source object arrays into a 1 dimensional
+ * array of source objects.
+ *
+ * @param {Tech~SourceObject|Tech~SourceObject[]} src
+ *        The src object to filter
+ *
+ * @return {Tech~SourceObject[]}
+ *         An array of sourceobjects containing only valid sources
+ *
+ * @private
+ */
+declare function filterSource(src: any): Tech;
+//# sourceMappingURL=filter-source.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/filter-source.d.ts.map b/priv/static/video.js/types/utils/filter-source.d.ts.map
new file mode 100644
index 0000000..615e7cf
--- /dev/null
+++ b/priv/static/video.js/types/utils/filter-source.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"filter-source.d.ts","sourceRoot":"","sources":["../../../src/js/utils/filter-source.js"],"names":[],"mappings":";AAMA;;;;;;;;;;;;GAYG;AACH,8CA4BC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/fn.d.ts b/priv/static/video.js/types/utils/fn.d.ts
new file mode 100644
index 0000000..4f369db
--- /dev/null
+++ b/priv/static/video.js/types/utils/fn.d.ts
@@ -0,0 +1,5 @@
+export const UPDATE_REFRESH_INTERVAL: 30;
+export function bind_(context: any, fn: Function, uid?: number): Function;
+export function throttle(fn: Function, wait: number): Function;
+export function debounce(func: Function, wait: number, immediate?: boolean, context?: any): Function;
+//# sourceMappingURL=fn.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/fn.d.ts.map b/priv/static/video.js/types/utils/fn.d.ts.map
new file mode 100644
index 0000000..0ecbedb
--- /dev/null
+++ b/priv/static/video.js/types/utils/fn.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"fn.d.ts","sourceRoot":"","sources":["../../../src/js/utils/fn.js"],"names":[],"mappings":"AAOA,yCAA0C;AAsBnC,wDANO,MAAM,YAwBnB;AAeM,6CALO,MAAM,YAkBnB;AA4BM,+CAfO,MAAM,cAGN,OAAO,2BA6CpB"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/guid.d.ts b/priv/static/video.js/types/utils/guid.d.ts
new file mode 100644
index 0000000..219b199
--- /dev/null
+++ b/priv/static/video.js/types/utils/guid.d.ts
@@ -0,0 +1,12 @@
+/**
+ * Get a unique auto-incrementing ID by number that has not been returned before.
+ *
+ * @return {number}
+ *         A new unique ID.
+ */
+export function newGUID(): number;
+/**
+ * Reset the unique auto-incrementing ID for testing only.
+ */
+export function resetGuidInTestsOnly(): void;
+//# sourceMappingURL=guid.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/guid.d.ts.map b/priv/static/video.js/types/utils/guid.d.ts.map
new file mode 100644
index 0000000..8773899
--- /dev/null
+++ b/priv/static/video.js/types/utils/guid.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"guid.d.ts","sourceRoot":"","sources":["../../../src/js/utils/guid.js"],"names":[],"mappings":"AAoBA;;;;;GAKG;AACH,2BAHY,MAAM,CAKjB;AAED;;GAEG;AACH,6CAEC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/hooks.d.ts b/priv/static/video.js/types/utils/hooks.d.ts
new file mode 100644
index 0000000..4ddf7c4
--- /dev/null
+++ b/priv/static/video.js/types/utils/hooks.d.ts
@@ -0,0 +1,54 @@
+/**
+ * An Object that contains lifecycle hooks as keys which point to an array
+ * of functions that are run when a lifecycle is triggered
+ *
+ * @private
+ */
+export const hooks_: {};
+/**
+ * Get a list of hooks for a specific lifecycle
+ *
+ * @param  {string} type
+ *         the lifecycle to get hooks from
+ *
+ * @param  {Function|Function[]} [fn]
+ *         Optionally add a hook (or hooks) to the lifecycle that your are getting.
+ *
+ * @return {Array}
+ *         an array of hooks, or an empty array if there are none.
+ */
+export function hooks(type: string, fn?: Function | Function[]): any[];
+/**
+ * Add a function hook to a specific videojs lifecycle.
+ *
+ * @param {string} type
+ *        the lifecycle to hook the function to.
+ *
+ * @param {Function|Function[]}
+ *        The function or array of functions to attach.
+ */
+export function hook(type: string, fn: any): void;
+/**
+ * Add a function hook that will only run once to a specific videojs lifecycle.
+ *
+ * @param {string} type
+ *        the lifecycle to hook the function to.
+ *
+ * @param {Function|Function[]}
+ *        The function or array of functions to attach.
+ */
+export function hookOnce(type: string, fn: any): void;
+/**
+ * Remove a hook from a specific videojs lifecycle.
+ *
+ * @param  {string} type
+ *         the lifecycle that the function hooked to
+ *
+ * @param  {Function} fn
+ *         The hooked function to remove
+ *
+ * @return {boolean}
+ *         The function that was removed or undef
+ */
+export function removeHook(type: string, fn: Function): boolean;
+//# sourceMappingURL=hooks.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/hooks.d.ts.map b/priv/static/video.js/types/utils/hooks.d.ts.map
new file mode 100644
index 0000000..fb63a06
--- /dev/null
+++ b/priv/static/video.js/types/utils/hooks.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/js/utils/hooks.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAkB;AAElB;;;;;;;;;;;GAWG;AACH,4BATY,MAAM,OAGN,WAAS,UAAU,SAY9B;AAED;;;;;;;;GAQG;AACH,2BANW,MAAM,iBAQhB;AA2BD;;;;;;;;GAQG;AACH,+BANW,MAAM,iBAehB;AA3CD;;;;;;;;;;;GAWG;AACH,iCATY,MAAM,iBAMN,OAAO,CAclB"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/log.d.ts b/priv/static/video.js/types/utils/log.d.ts
new file mode 100644
index 0000000..ffbc5ca
--- /dev/null
+++ b/priv/static/video.js/types/utils/log.d.ts
@@ -0,0 +1,20 @@
+export default log;
+declare const log: {
+    (...args: any[]): void;
+    createLogger(subName: string, subDelimiter?: string, subStyles?: string): any;
+    createNewLogger(newName: string, newDelimiter?: string, newStyles?: string): any;
+    levels: any;
+    level(lvl?: "info" | "error" | "all" | "debug" | "warn" | "off"): string;
+    history: {
+        (): any[];
+        filter(fname: string): any[];
+        clear(): void;
+        disable(): void;
+        enable(): void;
+    };
+    error(...args: any[]): any;
+    warn(...args: any[]): any;
+    debug(...args: any[]): any;
+};
+export const createLogger: (subName: string, subDelimiter?: string, subStyles?: string) => any;
+//# sourceMappingURL=log.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/log.d.ts.map b/priv/static/video.js/types/utils/log.d.ts.map
new file mode 100644
index 0000000..0ad1d66
--- /dev/null
+++ b/priv/static/video.js/types/utils/log.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"log.d.ts","sourceRoot":"","sources":["../../../src/js/utils/log.js"],"names":[],"mappings":";AAMA;;;;;;;;;;;;;;;;EAAoC;AACpC,+FAAsC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/mimetypes.d.ts b/priv/static/video.js/types/utils/mimetypes.d.ts
new file mode 100644
index 0000000..d4f35f1
--- /dev/null
+++ b/priv/static/video.js/types/utils/mimetypes.d.ts
@@ -0,0 +1,34 @@
+/**
+ * Mimetypes
+ */
+export type MimetypesKind = any;
+export namespace MimetypesKind {
+    const opus: string;
+    const ogv: string;
+    const mp4: string;
+    const mov: string;
+    const m4v: string;
+    const mkv: string;
+    const m4a: string;
+    const mp3: string;
+    const aac: string;
+    const caf: string;
+    const flac: string;
+    const oga: string;
+    const wav: string;
+    const m3u8: string;
+    const mpd: string;
+    const jpg: string;
+    const jpeg: string;
+    const gif: string;
+    const png: string;
+    const svg: string;
+    const webp: string;
+}
+export function getMimetype(src?: string): string;
+export function findMimetype(player: import('../player').default, src: string): string;
+/**
+ * ~Kind
+ */
+export type Mimetypes = any;
+//# sourceMappingURL=mimetypes.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/mimetypes.d.ts.map b/priv/static/video.js/types/utils/mimetypes.d.ts.map
new file mode 100644
index 0000000..1b8f33c
--- /dev/null
+++ b/priv/static/video.js/types/utils/mimetypes.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"mimetypes.d.ts","sourceRoot":"","sources":["../../../src/js/utils/mimetypes.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CO,kCANI,MAAM,GAGL,MAAM,CAQjB;AAeM,qCATK,OAAO,WAAW,EAAE,OAAO,OAG5B,MAAM,GAGL,MAAM,CAiCjB"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/num.d.ts b/priv/static/video.js/types/utils/num.d.ts
new file mode 100644
index 0000000..82b5f3d
--- /dev/null
+++ b/priv/static/video.js/types/utils/num.d.ts
@@ -0,0 +1,20 @@
+/**
+ * @file num.js
+ * @module num
+ */
+/**
+ * Keep a number between a min and a max value
+ *
+ * @param {number} number
+ *        The number to clamp
+ *
+ * @param {number} min
+ *        The minimum value
+ * @param {number} max
+ *        The maximum value
+ *
+ * @return {number}
+ *         the clamped number
+ */
+export function clamp(number: number, min: number, max: number): number;
+//# sourceMappingURL=num.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/num.d.ts.map b/priv/static/video.js/types/utils/num.d.ts.map
new file mode 100644
index 0000000..9abe4a6
--- /dev/null
+++ b/priv/static/video.js/types/utils/num.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"num.d.ts","sourceRoot":"","sources":["../../../src/js/utils/num.js"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;;;;;;;GAaG;AACH,8BAXW,MAAM,OAGN,MAAM,OAEN,MAAM,GAGL,MAAM,CAOjB"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/obj.d.ts b/priv/static/video.js/types/utils/obj.d.ts
new file mode 100644
index 0000000..4ac15ed
--- /dev/null
+++ b/priv/static/video.js/types/utils/obj.d.ts
@@ -0,0 +1,86 @@
+/**
+ * Array-like iteration for objects.
+ *
+ * @param {Object} object
+ *        The object to iterate over
+ *
+ * @param {obj:EachCallback} fn
+ *        The callback function which is called for each key in the object.
+ */
+export function each(object: any, fn: any): void;
+/**
+ * Array-like reduce for objects.
+ *
+ * @param {Object} object
+ *        The Object that you want to reduce.
+ *
+ * @param {Function} fn
+ *         A callback function which is called for each key in the object. It
+ *         receives the accumulated value and the per-iteration value and key
+ *         as arguments.
+ *
+ * @param {*} [initial = 0]
+ *        Starting value
+ *
+ * @return {*}
+ *         The final accumulated value.
+ */
+export function reduce(object: any, fn: Function, initial?: any): any;
+/**
+ * Returns whether a value is an object of any kind - including DOM nodes,
+ * arrays, regular expressions, etc. Not functions, though.
+ *
+ * This avoids the gotcha where using `typeof` on a `null` value
+ * results in `'object'`.
+ *
+ * @param  {Object} value
+ * @return {boolean}
+ */
+export function isObject(value: any): boolean;
+/**
+ * Returns whether an object appears to be a "plain" object - that is, a
+ * direct instance of `Object`.
+ *
+ * @param  {Object} value
+ * @return {boolean}
+ */
+export function isPlain(value: any): boolean;
+/**
+ * Merge two objects recursively.
+ *
+ * Performs a deep merge like
+ * {@link https://lodash.com/docs/4.17.10#merge|lodash.merge}, but only merges
+ * plain objects (not arrays, elements, or anything else).
+ *
+ * Non-plain object values will be copied directly from the right-most
+ * argument.
+ *
+ * @param   {Object[]} sources
+ *          One or more objects to merge into a new object.
+ *
+ * @return {Object}
+ *          A new object that is the merged result of all sources.
+ */
+export function merge(...sources: any[]): any;
+/**
+ * Returns an array of values for a given object
+ *
+ * @param  {Object} source - target object
+ * @return {Array<unknown>} - object values
+ */
+export function values(source?: any): Array<unknown>;
+/**
+ * Object.defineProperty but "lazy", which means that the value is only set after
+ * it is retrieved the first time, rather than being set right away.
+ *
+ * @param {Object} obj the object to set the property on
+ * @param {string} key the key for the property to set
+ * @param {Function} getValue the function used to get the value when it is needed.
+ * @param {boolean} setter whether a setter should be allowed or not
+ */
+export function defineLazyProperty(obj: any, key: string, getValue: Function, setter?: boolean): any;
+/**
+ * :EachCallback
+ */
+export type obj = (value: any, key: string) => any;
+//# sourceMappingURL=obj.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/obj.d.ts.map b/priv/static/video.js/types/utils/obj.d.ts.map
new file mode 100644
index 0000000..f2a7e41
--- /dev/null
+++ b/priv/static/video.js/types/utils/obj.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"obj.d.ts","sourceRoot":"","sources":["../../../src/js/utils/obj.js"],"names":[],"mappings":"AAgDA;;;;;;;;GAQG;AACH,iDAEC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,sEAEC;AAED;;;;;;;;;GASG;AACH,sCAFY,OAAO,CAIlB;AAED;;;;;;GAMG;AACH,qCAFY,OAAO,CAMlB;AAED;;;;;;;;;;;;;;;GAeG;AACH,kCANa,KAAQ,OA6BpB;AAED;;;;;GAKG;AACH,sCAFY,MAAM,OAAO,CAAC,CAczB;AAED;;;;;;;;GAQG;AACH,kDAJW,MAAM,+BAEN,OAAO,OAuBjB;;;;oCA7LU,MAAM"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/promise.d.ts b/priv/static/video.js/types/utils/promise.d.ts
new file mode 100644
index 0000000..76f7026
--- /dev/null
+++ b/priv/static/video.js/types/utils/promise.d.ts
@@ -0,0 +1,21 @@
+/**
+ * Returns whether an object is `Promise`-like (i.e. has a `then` method).
+ *
+ * @param  {Object}  value
+ *         An object that may or may not be `Promise`-like.
+ *
+ * @return {boolean}
+ *         Whether or not the object is `Promise`-like.
+ */
+export function isPromise(value: any): boolean;
+/**
+ * Silence a Promise-like object.
+ *
+ * This is useful for avoiding non-harmful, but potentially confusing "uncaught
+ * play promise" rejection error messages.
+ *
+ * @param  {Object} value
+ *         An object that may or may not be `Promise`-like.
+ */
+export function silencePromise(value: any): void;
+//# sourceMappingURL=promise.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/promise.d.ts.map b/priv/static/video.js/types/utils/promise.d.ts.map
new file mode 100644
index 0000000..78a8ed1
--- /dev/null
+++ b/priv/static/video.js/types/utils/promise.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"promise.d.ts","sourceRoot":"","sources":["../../../src/js/utils/promise.js"],"names":[],"mappings":"AACA;;;;;;;;GAQG;AACH,uCAHY,OAAO,CAKlB;AAED;;;;;;;;GAQG;AACH,iDAIC"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/str.d.ts b/priv/static/video.js/types/utils/str.d.ts
new file mode 100644
index 0000000..3b03f6d
--- /dev/null
+++ b/priv/static/video.js/types/utils/str.d.ts
@@ -0,0 +1,4 @@
+export function toLowerCase(string: string): string;
+export function toTitleCase(string: string): string;
+export function titleCaseEquals(str1: string, str2: string): boolean;
+//# sourceMappingURL=str.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/str.d.ts.map b/priv/static/video.js/types/utils/str.d.ts.map
new file mode 100644
index 0000000..a7f39b3
--- /dev/null
+++ b/priv/static/video.js/types/utils/str.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"str.d.ts","sourceRoot":"","sources":["../../../src/js/utils/str.js"],"names":[],"mappings":"AAcO,oCANI,MAAM,GAGL,MAAM,CASjB;AAWM,oCANI,MAAM,GAGL,MAAM,CASjB;AAcM,sCATI,MAAM,QAGN,MAAM,GAGL,OAAO,CAKlB"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/stylesheet.d.ts b/priv/static/video.js/types/utils/stylesheet.d.ts
new file mode 100644
index 0000000..d944c36
--- /dev/null
+++ b/priv/static/video.js/types/utils/stylesheet.d.ts
@@ -0,0 +1,3 @@
+export function createStyleElement(className: string): Element;
+export function setTextContent(el: Element, content: string): void;
+//# sourceMappingURL=stylesheet.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/stylesheet.d.ts.map b/priv/static/video.js/types/utils/stylesheet.d.ts.map
new file mode 100644
index 0000000..c43d4f0
--- /dev/null
+++ b/priv/static/video.js/types/utils/stylesheet.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../../../src/js/utils/stylesheet.js"],"names":[],"mappings":"AAeO,8CANI,MAAM,GAGL,OAAO,CASlB;AAWM,mCANI,OAAO,WAGP,MAAM,QAShB"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/time.d.ts b/priv/static/video.js/types/utils/time.d.ts
new file mode 100644
index 0000000..6b7e3e1
--- /dev/null
+++ b/priv/static/video.js/types/utils/time.d.ts
@@ -0,0 +1,71 @@
+/**
+ * Create a `TimeRange` object which mimics an
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges|HTML5 TimeRanges instance}.
+ *
+ * @param {number|Array[]} start
+ *        The start of a single range (a number) or an array of ranges (an
+ *        array of arrays of two numbers each).
+ *
+ * @param {number} end
+ *        The end of a single range. Cannot be used with the array form of
+ *        the `start` argument.
+ *
+ * @return {TimeRange}
+ */
+export function createTimeRanges(start: number | any[][], end: number): TimeRange;
+/**
+ * Replaces the default formatTime implementation with a custom implementation.
+ *
+ * @param {Function} customImplementation
+ *        A function which will be used in place of the default formatTime
+ *        implementation. Will receive the current time in seconds and the
+ *        guide (in seconds) as arguments.
+ */
+export function setFormatTime(customImplementation: Function): void;
+/**
+ * Resets formatTime to the default implementation.
+ */
+export function resetFormatTime(): void;
+/**
+ * Delegates to either the default time formatting function or a custom
+ * function supplied via `setFormatTime`.
+ *
+ * Formats seconds as a time string (H:MM:SS or M:SS). Supplying a
+ * guide (in seconds) will force a number of leading zeros to cover the
+ * length of the guide.
+ *
+ * @example  formatTime(125, 600) === "02:05"
+ * @param    {number} seconds
+ *           Number of seconds to be turned into a string
+ *
+ * @param    {number} guide
+ *           Number (in seconds) to model the string after
+ *
+ * @return   {string}
+ *           Time formatted as H:MM:SS or M:SS
+ */
+export function formatTime(seconds: number, guide?: number): string;
+export { createTimeRanges as createTimeRange };
+/**
+ * Returns the time for the specified index at the start or end
+ * of a TimeRange object.
+ */
+export type TimeRangeIndex = Function;
+/**
+ * An object that contains ranges of time, which mimics {@link TimeRanges }.
+ */
+export type TimeRange = {
+    /**
+     *           The number of time ranges represented by this object.
+     */
+    length: number;
+    /**
+     *           Returns the time offset at which a specified time range begins.
+     */
+    start: any;
+    /**
+     *           Returns the time offset at which a specified time range ends.
+     */
+    end: any;
+};
+//# sourceMappingURL=time.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/time.d.ts.map b/priv/static/video.js/types/utils/time.d.ts.map
new file mode 100644
index 0000000..14b19ce
--- /dev/null
+++ b/priv/static/video.js/types/utils/time.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../../src/js/utils/time.js"],"names":[],"mappings":"AA8HA;;;;;;;;;;;;;GAaG;AACH,wCAVW,MAAM,GAAC,OAAO,OAId,MAAM,GAIL,SAAS,CASpB;AAkDD;;;;;;;GAOG;AACH,oEAEC;AAED;;GAEG;AACH,wCAEC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,oCATc,MAAM,UAGN,MAAM,GAGN,MAAM,CAKnB;;;;;;;;;;;;;;YAjNa,MAAM"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/url.d.ts b/priv/static/video.js/types/utils/url.d.ts
new file mode 100644
index 0000000..43e68ee
--- /dev/null
+++ b/priv/static/video.js/types/utils/url.d.ts
@@ -0,0 +1,41 @@
+export function parseUrl(url: string): url;
+export function getAbsoluteURL(url: string): string;
+export function getFileExtension(path: string): string;
+export function isCrossOrigin(url: string, winLoc?: {
+    protocol?: string;
+    host?: string;
+}): boolean;
+/**
+ * :URLObject
+ */
+export type url = {
+    /**
+     *           The protocol of the url that was parsed.
+     */
+    protocol: string;
+    /**
+     *           The hostname of the url that was parsed.
+     */
+    hostname: string;
+    /**
+     *           The port of the url that was parsed.
+     */
+    port: string;
+    /**
+     *           The pathname of the url that was parsed.
+     */
+    pathname: string;
+    /**
+     *           The search query of the url that was parsed.
+     */
+    search: string;
+    /**
+     *           The hash of the url that was parsed.
+     */
+    hash: string;
+    /**
+     *           The host of the url that was parsed.
+     */
+    host: string;
+};
+//# sourceMappingURL=url.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/utils/url.d.ts.map b/priv/static/video.js/types/utils/url.d.ts.map
new file mode 100644
index 0000000..2ad7f77
--- /dev/null
+++ b/priv/static/video.js/types/utils/url.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../../src/js/utils/url.js"],"names":[],"mappings":"AA0CO,uCAHO,GAAG,CA0ChB;AAcM,oCARO,MAAM,GAGN,MAAM,CAiBnB;AAcM,uCAPO,MAAM,GAGP,MAAM,CAelB;AAqBM,mCAfO,MAAM;IAMU,QAAQ,GAAxB,MAAM;IAGU,IAAI,GAApB,MAAM;IAGN,OAAO,CAcpB;;;;;;;;cA1Ja,MAAM;;;;cAGN,MAAM;;;;UAGN,MAAM;;;;cAGN,MAAM;;;;YAGN,MAAM;;;;UAGN,MAAM;;;;UAGN,MAAM"}
\ No newline at end of file
diff --git a/priv/static/video.js/types/video.d.ts b/priv/static/video.js/types/video.d.ts
new file mode 100644
index 0000000..379e750
--- /dev/null
+++ b/priv/static/video.js/types/video.d.ts
@@ -0,0 +1,242 @@
+export default videojs;
+/**
+ * A callback that is called when a component is ready. Does not have any
+ * parameters and any callback value will be ignored. See: {@link Component ~ReadyCallback}
+ */
+export type ReadyCallback = () => any;
+export type version = string;
+/**
+ * A callback that is called when a component is ready. Does not have any
+ * parameters and any callback value will be ignored. See: {@link Component~ReadyCallback}
+ *
+ * @callback ReadyCallback
+ */
+/**
+ * The `videojs()` function doubles as the main function for users to create a
+ * {@link Player} instance as well as the main library namespace.
+ *
+ * It can also be used as a getter for a pre-existing {@link Player} instance.
+ * However, we _strongly_ recommend using `videojs.getPlayer()` for this
+ * purpose because it avoids any potential for unintended initialization.
+ *
+ * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+ * of our JSDoc template, we cannot properly document this as both a function
+ * and a namespace, so its function signature is documented here.
+ *
+ * #### Arguments
+ * ##### id
+ * string|Element, **required**
+ *
+ * Video element or video element ID.
+ *
+ * ##### options
+ * Object, optional
+ *
+ * Options object for providing settings.
+ * See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+ *
+ * ##### ready
+ * {@link Component~ReadyCallback}, optional
+ *
+ * A function to be called when the {@link Player} and {@link Tech} are ready.
+ *
+ * #### Return Value
+ *
+ * The `videojs()` function returns a {@link Player} instance.
+ *
+ * @namespace
+ *
+ * @borrows AudioTrack as AudioTrack
+ * @borrows Component.getComponent as getComponent
+ * @borrows module:events.on as on
+ * @borrows module:events.one as one
+ * @borrows module:events.off as off
+ * @borrows module:events.trigger as trigger
+ * @borrows EventTarget as EventTarget
+ * @borrows module:middleware.use as use
+ * @borrows Player.players as players
+ * @borrows Plugin.registerPlugin as registerPlugin
+ * @borrows Plugin.deregisterPlugin as deregisterPlugin
+ * @borrows Plugin.getPlugins as getPlugins
+ * @borrows Plugin.getPlugin as getPlugin
+ * @borrows Plugin.getPluginVersion as getPluginVersion
+ * @borrows Tech.getTech as getTech
+ * @borrows Tech.registerTech as registerTech
+ * @borrows TextTrack as TextTrack
+ * @borrows VideoTrack as VideoTrack
+ *
+ * @param  {string|Element} id
+ *         Video element or video element ID.
+ *
+ * @param  {Object} [options]
+ *         Options object for providing settings.
+ *         See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+ *
+ * @param  {ReadyCallback} [ready]
+ *         A function to be called when the {@link Player} and {@link Tech} are
+ *         ready.
+ *
+ * @return {Player}
+ *         The `videojs()` function returns a {@link Player|Player} instance.
+ */
+declare function videojs(id: string | Element, options?: any, ready?: ReadyCallback): Player;
+declare namespace videojs {
+    export { hooks_ };
+    export { hooks };
+    export { hook };
+    export { hookOnce };
+    export { removeHook };
+    export { version as VERSION };
+    export const options: any;
+    /**
+     * Get an object with the currently created players, keyed by player ID
+     *
+     * @return {Object}
+     *         The created players
+     */
+    export function getPlayers(): any;
+    /**
+     * Get a single player based on an ID or DOM element.
+     *
+     * This is useful if you want to check if an element or ID has an associated
+     * Video.js player, but not create one if it doesn't.
+     *
+     * @param   {string|Element} id
+     *          An HTML element - `<video>`, `<audio>`, or `<video-js>` -
+     *          or a string matching the `id` of such an element.
+     *
+     * @return {Player|undefined}
+     *          A player instance or `undefined` if there is no player instance
+     *          matching the argument.
+     */
+    export function getPlayer(id: string | Element): Player;
+    /**
+     * Returns an array of all current players.
+     *
+     * @return {Array}
+     *         An array of all players. The array will be in the order that
+     *         `Object.keys` provides, which could potentially vary between
+     *         JavaScript engines.
+     *
+     */
+    export function getAllPlayers(): any[];
+    export const players: any;
+    export const getComponent: typeof Component.getComponent;
+    /**
+     * Register a component so it can referred to by name. Used when adding to other
+     * components, either through addChild `component.addChild('myComponent')` or through
+     * default children options  `{ children: ['myComponent'] }`.
+     *
+     * > NOTE: You could also just initialize the component before adding.
+     * `component.addChild(new MyComponent());`
+     *
+     * @param {string} name
+     *        The class name of the component
+     *
+     * @param {typeof Component} comp
+     *        The component class
+     *
+     * @return {typeof Component}
+     *         The newly registered component
+     */
+    export function registerComponent(name: string, comp: typeof Component): typeof Component;
+    export const getTech: typeof Tech.getTech;
+    export const registerTech: typeof Tech.registerTech;
+    export { middlewareUse as use };
+    export namespace middleware {
+        const TERMINATOR: {};
+    }
+    export { browser };
+    export { Obj as obj };
+    export const mergeOptions: Function;
+    export const defineLazyProperty: Function;
+    export const bind: Function;
+    export const registerPlugin: typeof Plugin.registerPlugin;
+    export const deregisterPlugin: typeof Plugin.deregisterPlugin;
+    /**
+     * Deprecated method to register a plugin with Video.js
+     *
+     * @deprecated Deprecated and will be removed in 9.0. Use videojs.registerPlugin() instead.
+     *
+     * @param {string} name
+     *        The plugin name
+    *
+     * @param {typeof Plugin|Function} plugin
+     *         The plugin sub-class or function
+     *
+     * @return {typeof Plugin|Function}
+     */
+    export function plugin(name: string, plugin: Function | typeof Plugin): Function | typeof Plugin;
+    export const getPlugins: typeof Plugin.getPlugins;
+    export const getPlugin: (name: string) => Function | typeof Plugin;
+    export const getPluginVersion: typeof Plugin.getPluginVersion;
+    /**
+     * Adding languages so that they're available to all players.
+     * Example: `videojs.addLanguage('es', { 'Hello': 'Hola' });`
+     *
+     * @param {string} code
+     *        The language code or dictionary property
+     *
+     * @param {Object} data
+     *        The data values to be translated
+     *
+     * @return {Object}
+     *         The resulting language dictionary object
+     */
+    export function addLanguage(code: string, data: any): any;
+    export { log };
+    export { createLogger };
+    export { Time as time };
+    export const createTimeRange: Function;
+    export const createTimeRanges: Function;
+    export const formatTime: Function;
+    export const setFormatTime: Function;
+    export const resetFormatTime: Function;
+    export const parseUrl: Function;
+    export const isCrossOrigin: Function;
+    export { EventTarget };
+    export const any: typeof Events.any;
+    export const on: typeof Events.on;
+    export const one: typeof Events.one;
+    export const off: typeof Events.off;
+    export const trigger: typeof Events.trigger;
+    export { xhr };
+    export { TextTrack };
+    export { AudioTrack };
+    export { VideoTrack };
+    export const computedStyle: Function;
+    export { Dom as dom };
+    export { Fn as fn };
+    export { Num as num };
+    export { Str as str };
+    export { Url as url };
+    export { VjsErrors as Error };
+}
+import Player from "./player";
+import { hooks_ } from "./utils/hooks";
+import { hooks } from "./utils/hooks";
+import { hook } from "./utils/hooks";
+import { hookOnce } from "./utils/hooks";
+import { removeHook } from "./utils/hooks";
+import Component from "./component";
+import Tech from "./tech/tech.js";
+import { use as middlewareUse } from "./tech/middleware.js";
+import * as browser from "./utils/browser.js";
+import * as Obj from "./utils/obj";
+import Plugin from "./plugin";
+import log from "./utils/log.js";
+import { createLogger } from "./utils/log.js";
+import * as Time from "./utils/time.js";
+import EventTarget from "./event-target";
+import * as Events from "./utils/events.js";
+import xhr from "@videojs/xhr";
+import TextTrack from "./tracks/text-track.js";
+import AudioTrack from "./tracks/audio-track.js";
+import VideoTrack from "./tracks/video-track.js";
+import * as Dom from "./utils/dom.js";
+import * as Fn from "./utils/fn.js";
+import * as Num from "./utils/num.js";
+import * as Str from "./utils/str.js";
+import * as Url from "./utils/url.js";
+import VjsErrors from "./consts/errors";
+//# sourceMappingURL=video.d.ts.map
\ No newline at end of file
diff --git a/priv/static/video.js/types/video.d.ts.map b/priv/static/video.js/types/video.d.ts.map
new file mode 100644
index 0000000..7566df6
--- /dev/null
+++ b/priv/static/video.js/types/video.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/js/video.js"],"names":[],"mappings":";;;;;;sBAKc,MAAM;AAkDpB;;;;;GAKG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,6BAdY,MAAM,GAAC,OAAO,yBAOd,aAAa,GAIb,MAAM,CAiEjB;;;;;;;;;IAoDD;;;;;OAKG;IACH,kCAAyC;IAEzC;;;;;;;;;;;;;OAaG;IACH,wDA0BC;IAED;;;;;;;;OAQG;IACH,uCAIyE;;;IAKzE;;;;;;;;;;;;;;;;OAgBG;IACH,0FAMC;;;;;;;;;;;;;;IAuED;;;;;;;;;;;;OAYG;IACH,iGAGC;;;;IAMD;;;;;;;;;;;;OAYG;IACH,0DASC"}
\ No newline at end of file
diff --git a/priv/static/video.js/video-js.css b/priv/static/video.js/video-js.css
new file mode 100644
index 0000000..2f602f6
--- /dev/null
+++ b/priv/static/video.js/video-js.css
@@ -0,0 +1,1935 @@
+.vjs-svg-icon {
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-position: center;
+  fill: currentColor;
+  height: 1.8em;
+  width: 1.8em;
+}
+.vjs-svg-icon:before {
+  content: none !important;
+}
+
+.vjs-svg-icon:hover,
+.vjs-control:focus .vjs-svg-icon {
+  filter: drop-shadow(0 0 0.25em #fff);
+}
+
+.vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
+  text-align: center;
+}
+
+@font-face {
+  font-family: VideoJS;
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABUgAAsAAAAAItAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV33Y21hcAAAAYQAAAEJAAAD5p42+VxnbHlmAAACkAAADwwAABdk9R/WHmhlYWQAABGcAAAAKwAAADYn8kSnaGhlYQAAEcgAAAAdAAAAJA+RCL1obXR4AAAR6AAAABMAAAC8Q44AAGxvY2EAABH8AAAAYAAAAGB7SIHGbWF4cAAAElwAAAAfAAAAIAFAAI9uYW1lAAASfAAAASUAAAIK1cf1oHBvc3QAABOkAAABfAAAAnXdFqh1eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGR7xDiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGPHcRdyA4RZgQRADbZCycAAHic7dPXbcMwAEXRK1vuvffem749XAbKV3bjBA6fXsaIgMMLEWoQJaAEFKNnlELyQ4K27zib5PNF6vl8yld+TKr5kH0+cUw0xv00Hwvx2DResUyFKrV4XoMmLdp06NKjz4AhI8ZMmDJjzoIlK9Zs2LJjz4EjJ85cuHLjziPe/0UWL17mf2tqKLz/9jK9f8tXpGCoRdPKhtS0RqFkWvVQNtSKoVYNtWaoddPXEBqG2jQ9XWgZattQO4baNdSeofYNdWCoQ0MdGerYUCeGOjXUmaHODXVhqEtDXRnq2lA3hro11J2h7g31YKhHQz0Z6tlQL4Z6NdSbod4N9WGoT9MfHF6GmhnZLxyDcRMAAAB4nJ1YC1gUV5auc6urCmxEGrq6VRD6ATQP5dHPKK8GRIyoKApoEBUDAiGzGmdUfKNRM4qLZrUZdGKcGN/GZJKd0SyOWTbfbmZ2NxqzM5IxRtNZd78vwYlJdtREoO7sudVNq6PmmxmKqrqPU+eee173P80Bh39Cu9DOEY4DHZBK3i20D/QRLcfxbE5sEVtwLpZzclw4ibFIkSCJUcZ4MBpMnnzwuKNsGWBL5i3qy6kO2dVpvUpKbkAP9fq62rdeGJ+TM/7C1nbIutfuWrWk5ci4zMxxR1qW/N+9JsmCGXj9VKWhFx/6tr/nz78INDm2C9yPF/fDcxLuyKxLBZ1ZBz2QTi+RSkiH5RrDQJ/GgGQadX9m0YSURs7GpSG905Zsk41uj14yul1OtieZ7QUk5GRG/YiS7PYYPSAZNRed9sq3+bOpz00rKb7pe/ZEZvbALxZAHT3AFoH8GXP3rt67QFn40kt8W13FjLTDb48c+fSi5/7h0P4dL5yz7DPtbmgmYxfQA9RL2+EOfTcvdp+1vmuBpvOll1As1S6ak0IvJzC7sKWJFtJgBd2uWcg+0Zyg7dzQfhcjXRgXGZRf5/a4A58IDU777Nl252AUk4m2ByRRjqTNqIDCEJeAnU3iCFwrkrNwXEzg4yFevBwypzxkcX+AIfk3VEKl3XmWbT8788SzvpvFJaiOezL6QyuSr9VNf97csNu0z3LuhR0wATUxZAfVBwVOy+nQFhxYdWaXlXe4HC4zWGWzzsrLDtmhI9pOWOHv7PTT7XybH1Z0+v2d5Abd3kmG+TsH23CS/KwTxx/JkzEwx6jcQOUc42LLwHJ/J93uZ9ygh3HuZGwqsY9dWDHQ58dxNqyqKRQTYdxwTubiOSs3FiMDkq0WSZQgCT0GBDOg2lxOAd1FlPVGs4AKBAcYHHaP2wPkHaivmLF5zYqnIZrvcHx5gN4k/6tchNW1DtdgNL2KrxEkS/kfnIHoVnp1VjmjpTf5r0lTzLj0mdS28tX+XGorU364eMPmnWVl8J36nlKGw3CZhjEiuMw8h8mKvhGD+4/lElBWjAhLJMg6fTw4zPZ8cOmcGQBm2Qxml1nAm13CpYGq1JKUlJJUzQn1PTAO0mgv6VMMpA/DuRfSWEu4lDIxdbAtdWIKvnn2Vk766CWfz9fpY0sH/UpdP50rfszaVpdVRmvIejEdLMk45s4Bu0EWHjeOySmFyZSiMahvZdNSn29peoI/YexYfKQTLeurTXXwEVLeSfInTWHkkMaeUx7sBvOCSTSj3AlcKjfueyS36tCrXDlgRtF0etFq9jhc1kfKuBT/OwMr0F4UUTTh1AN0g20+H/ScPcsIEsYu9d/zN5PmjprPtNwI1ZZcDK6iC97Mcjp2y2aX36f+QbpGHrgRuHlXJ+Zf6PFRL2uQSp8vxHeF2IoRb8Rd2rhMzsNxSRmEuKK4JFnkojhMcx6jzqHzGMGFcW+MhBj0bhf6cowN+45I4LHvwT6fteu7M42wGRI/pxcg6/MZdEvt1U1XaulHFXuLmqov/MukvRVL35/b3ODM1+4aPjtzeK7zmUkV2h3DN54HaQ9GzJvxHRb6Ks2gB81fwqraT+A7GvZJrRLRofU6G0urNL+zFw3v0FaVDFxsKEZW56F31r6ip6vOL+FCObBPuIMRiXld9RaMdLzRIOGhPey2T9vA/35DmZPK9IWaT9d/WgOGMieYqJ/dzjLIhZU118gbysxrNUGefxD6UO/hyNNllpFTOIbx32kSFQctnweV5PxTMHLjRqiAN+fQE9gL+Xy5WB6MOS4GJJuYbDUHhcKDhHGRbLzOpjsjdM1+iwAZLGeieehACX2hhI7SjK/ZUTNrvVje31TxJiFBGYViWFkCn9PMeX9fS6qVbzfCj4fOCTzDnuWy2c4xA7mdNkA3RS9FH2VeqzdCBlixxbzXjvkHU1I8BOYFb1pZvPIHSSIj4svT8xpzcxtXN+ZKyjdDvbz08niiF3PqV9Tn5NST8vg48MTaY8E5xqSSIsWoWHo+LtAzxdH/GDUyp37CBEYfso04F/NlMTcDJUTpECLY0HFGQHImE8xsEUdgnrQlixIvGhJA1BvxpDHGxEMBYFeNOHcBJlSjwe2JcSfbBEsGOPPBHg/6SBBOCsLLw0SpUxod0Z1bFMfLkbQ3UiZxEyd0Dx8t+SRBu18Q9msFbI4e3p1THEfkSEh7kEJ5orR10qTWDvbgPWn5aWvCYyOAjwgXyjJi34uMjo58L25cmRAeQZWI2PA1QQLsPESAH8WGFwZZ4SPoR73BHPzIPMJj9AreBzKUmrH4todT18ANvi1oc3YGjUT/0j+ExUwq8PI9BLaCQIpvewwYu2evAG/Vo/5avPdY7o+BemLLXw3y+AdkzP9bpIxB1wm5EYq8fesHbPEPtm6HrHvtx4jcGPR8fDDpkZBefIjB46QnlUNRltv4Z/pO/J6dxEjhYAtmoMeq+GozvUVvNYOW3m6GCIhoprcfr97B8AcIQYsfD8ljUvGNjvkrpj0ETA48ZMIxCeqsRIsQALE0gi2GB+glSOfbOjW3GSBM9yPq8/rpJXrJDz0BPxV6xdN4uiCGDQed3WhgFkBUZEFsmeyyBpzXrm7UGTBZG8Lh5aubFufk5eUsbrrFGr7McYdbltxa0nKYqRKbQjvikXYkTGM0f2xuyM3Ly21oXnWfvf6I1BmZwfh7EWWIYsg2nHhsDhOnczhJcmI6eBAmy3jZ3RiJmKQR/JA99FcwsfaVbNDDyi1rL9NPj9hfo61wjM6BjzOLijLpeTgk/pL+ip6tfYWupzeOgPny2tcUu9J/9mhxJlgyi985NFRbvCVewXUNXLJaW0RxZqtRYtnfYdcYomXQWdnJHQA3jiEEkeTQWcWxdDP9IvvVWvo2TK553XEMEq+s69/QDU1Q7p0zxwsm9qS379whr8NI2PJqLUyGyfNeX3eFfnJU2U+uHR9cVV1IqgurqwuV44XVp0h2qN55X5XJwtk59yP0IZuHrqBOBIuIYhkcoT6Kx79Pu2HS/IPZIMOqLWs/pteOOk4NPgEb6QAIdAPsyZk5Mwd+wVaHMexJv719W7xCu2l37UG6lvYdBcvHa08p89741zd63phTRGqL5ggo6SlvdbWXzCqsPq78NnSu7wnKy2HNZbVoRCI7UJEOyRj+sPE002tOOY7Qa5fXboFWkLNeqYUSZRocp9XwSUZxcQZ9Hw6LV2pOoVmvHQEDbGIENEG5i6bLgMSM4n8+FNLTtAds99DaWEvgcf4o5SyYe9x+kF6/tGoTPAdRmS/XQIEy//QxKC2oqioAI3tS5auvxCtzT6y6RK8fhChYcwCJaMJhxc0vqSxQ/qmgsrKAlBZUHlauheTpvd9uj5DnLzJct6qfq5fXbYHVIGcfrIVJihbaVLu1wW7Vbs8zK0A8e9Jvb91S9cVMjPrazD6gpfeZTXzYbCFMcppVRsGMpp55OWgx1/3JeAxW1Y7AORgM/m3rWrsdLkQVmEVSU16cX/e7uvkvpqRiQsG06XJ0t64Tf+l0nG1dt025gyOIZlvq5u9KSU1N2TW/rsWnnMRPyTDkctbhvIcNvYIXWyLzdwYLoYesUbaQG4iK2cWO2gdpeUYLqDD0MUTOPhDIGnZEs58yArR86FznuWEsU4YDi2x26dA4klkn8Qa6vhk2QUfX4Jxm/ngX9r7ogn1dmlmwqZmuhxtdg9XN/DEcUgqb+9hMyNansfaQET2mcROCmGEMVqxm5u+h6kN2MOwgqykV2wH9yQG9DvVFU38Pogaf4FVuE62KI/oJ02RDdWW2w5dqQwU/8+N1q1DlvsL863u61KLE7x/o8w0VJQM/Y/SQ3unIrqxueEa1BqT5VFNsO7p39/UC771a77RowpaKe9nvJQIT1Pog5LGx8XblBKmCNGTf3xMogAQvPnz9PYKX/08sVDTG1OKUlOLUgS/UaZtm1NAaYTsl7i9ZQ+L6O4Rl0OGa577LuWvc+C+x96/vYh0lLBuM+7XwI/dTLtdT7v4d6rRTWDnku0IBrqFnZ5bVIqKP8lasJlithWnaLhTsr8qFJBulF/70p4undou36HeTJ5+jv1fCybeQ8nH3+Xv6aENczmOFlab+hqMDg1rLOt12A+tiUFrYDwQ6c3RUJp601nzegTNX6WlYAI2zSUV945F6zU56ZmZVQaWspWcIADxJ9GmljQUnL2p2Dpr5T8H+5KJFu+vqBq8qvyHRzStLHPEO5SPYCV9nZe0yZT2RcH0oHvegSzNEJ0oGWU8iQWM12dgPEugngVceGIwZgPFp0BiT1a0a3R5Rcot7ihfA1J/20v96jX7zmTX9s583H0kwx6WnLd09cXrR9LGroOa9sHNbdyz8wcKk5lqhaVFJZNwmqtw884MXNdvJujpBa3xzuSaZH9sxa06Z7x+HJSduPbdYHv/DgmEhfbehvlmGN7JUkcG78GDM12CeyFFTPNqVeNxC1gzjz+c2nVo63Xxs8rKJWXoBJM0tmEbfGm4qzpoOH3xpzQfyxLzW1gnE9NHo6tol1eMEic4ZVPrjnVi0kqAe2sQ2bgqupScaq8WGlUWgWHI51SKJl/UYT6zccNsCSkBtiVZLsiefuFSDYT3Fi8Zk7EUnmjTRYtsFeuDDJS05MW79M3mr3mla+d8dzac31KTPmBYfFiYSUef48PhPjm9ryZsSGZZkdNvzq0Y9rdNcwDq5Dg5C3QW+7UN64IKptvS3tvHbvu5c9pv1Exau21rc9LIpwpQwUjTq8576yeVDz5+4WZ1nXT43wV60rPLJbDp/UksNrP3iQ2SA63Pst058gOYDbhRnRUw8l/sRt4HbxPzO4WYpInCpuVgSbVh6JXuwnnJngKTTCwaPWmG5Xbhpm1U0Yt3FyBGpGYemPM77p2TD904JjgJ2QFpFLeYpGx8X15Qx1Zk31p5ki9ZLUuXE0lmuJlcakJMVLeFS1iIvrB8drY0aloilakqCZwzwRORtxlgwxS4IThggJd4TDxoiaAIT80fFPGrCPPru+puFn504P/ybr4ihA/6dKASLshEJic7xE8tmzu3KzA7TABBe8y5fNbWo3ilQn/SuFKM16b2l5bOeayqfGhYmhIulU+fVNDdWVv4NMzX10MBHyPR5uhWUu8D9P1VnIMt4nGNgZGBgAOJ/1bf64vltvjJwszOAwAOlmqvINEc/WJyDgQlEAQA+dgnjAHicY2BkYGBnAAGOPgaG//85+hkYGVCBPgBGJwNkAAAAeJxjYGBgYB/EmKMPtxwAhg4B0gAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAe4CLgKKAtAC/ANiA4wDqAPgBDAEsATaBQgFWgXABggGLgZwBqwG9gdOB4oH0ggqCHAIhgicCMgJJAlWCYgJrAnyCkAKdgrkC7J4nGNgZGBg0GdoZmBnAAEmIOYCQgaG/2A+AwAaqwHQAHicXZBNaoNAGIZfE5PQCKFQ2lUps2oXBfOzzAESyDKBQJdGR2NQR3QSSE/QE/QEPUUPUHqsvsrXjTMw83zPvPMNCuAWP3DQDAejdm1GjzwS7pMmwi75XngAD4/CQ/oX4TFe4Qt7uMMbOzjuDc0EmXCP/C7cJ38Iu+RP4QEe8CU8pP8WHmOPX2EPz87TPo202ey2OjlnQSXV/6arOjWFmvszMWtd6CqwOlKHq6ovycLaWMWVydXKFFZnmVFlZU46tP7R2nI5ncbi/dDkfDtFBA2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Yu6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxtkXlT2zAQxf1C4thJAwRajt4HRy8VMwwfSJHXsQZZcnUQ+PYoTtwpM+wf2t9brWZ2n5JBsol58nJcYYAdDDFCijEy5JhgileYYRd72MccBzjEa7zBEY5xglO8xTu8xwd8xCd8xhd8xTec4RwXuMR3/MBP/MJvMPzBFYpk2Cr+OF0fTEgrFI1aHhxN740KDbEmeJpsWZlVj40s+45aLuv9KijlhCXSjLQnu/d/4UH6sWul1mRzFxZeekUuE7z10mg3qMtM1FGQddPSrLQyvJR6OaukItYXDp6pCJrmz0umqkau5pZ2hFmm7m+ImG5W2t0kZoJXUtPhVnYTbbdOBdeCVGqpJe7XKTqSbRK7zbdwXfR0U+SVsStuS3Y76em6+Ic3xYiHUppc04Nn0lMzay3dSxNcp8auDlWlaCi48yetFD7Y9USsx87G45cuop1ZxQUtjLnL4j53FO0a+5X08UXqQ7NQNo92R0XOz7sxWEnxN2TneJI8Acttu4Q=) format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-play, .video-js .vjs-play-control .vjs-icon-placeholder, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
+  content: "\f101";
+}
+
+.vjs-icon-play-circle {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-play-circle:before {
+  content: "\f102";
+}
+
+.vjs-icon-pause, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-pause:before, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
+  content: "\f103";
+}
+
+.vjs-icon-volume-mute, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
+  content: "\f104";
+}
+
+.vjs-icon-volume-low, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-volume-low:before, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before {
+  content: "\f105";
+}
+
+.vjs-icon-volume-mid, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-volume-mid:before, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before {
+  content: "\f106";
+}
+
+.vjs-icon-volume-high, .video-js .vjs-mute-control .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before {
+  content: "\f107";
+}
+
+.vjs-icon-fullscreen-enter, .video-js .vjs-fullscreen-control .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
+  content: "\f108";
+}
+
+.vjs-icon-fullscreen-exit, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
+  content: "\f109";
+}
+
+.vjs-icon-spinner {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-spinner:before {
+  content: "\f10a";
+}
+
+.vjs-icon-subtitles, .video-js .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-subtitles-button .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-subtitles:before, .video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-subtitles-button .vjs-icon-placeholder:before {
+  content: "\f10b";
+}
+
+.vjs-icon-captions, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-captions-button .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-captions:before, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-captions-button .vjs-icon-placeholder:before {
+  content: "\f10c";
+}
+
+.vjs-icon-hd {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-hd:before {
+  content: "\f10d";
+}
+
+.vjs-icon-chapters, .video-js .vjs-chapters-button .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-chapters:before, .video-js .vjs-chapters-button .vjs-icon-placeholder:before {
+  content: "\f10e";
+}
+
+.vjs-icon-downloading {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-downloading:before {
+  content: "\f10f";
+}
+
+.vjs-icon-file-download {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-file-download:before {
+  content: "\f110";
+}
+
+.vjs-icon-file-download-done {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-file-download-done:before {
+  content: "\f111";
+}
+
+.vjs-icon-file-download-off {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-file-download-off:before {
+  content: "\f112";
+}
+
+.vjs-icon-share {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-share:before {
+  content: "\f113";
+}
+
+.vjs-icon-cog {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-cog:before {
+  content: "\f114";
+}
+
+.vjs-icon-square {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-square:before {
+  content: "\f115";
+}
+
+.vjs-icon-circle, .vjs-seek-to-live-control .vjs-icon-placeholder, .video-js .vjs-volume-level, .video-js .vjs-play-progress {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-circle:before, .vjs-seek-to-live-control .vjs-icon-placeholder:before, .video-js .vjs-volume-level:before, .video-js .vjs-play-progress:before {
+  content: "\f116";
+}
+
+.vjs-icon-circle-outline {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-circle-outline:before {
+  content: "\f117";
+}
+
+.vjs-icon-circle-inner-circle {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-circle-inner-circle:before {
+  content: "\f118";
+}
+
+.vjs-icon-cancel, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-cancel:before, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before {
+  content: "\f119";
+}
+
+.vjs-icon-repeat {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-repeat:before {
+  content: "\f11a";
+}
+
+.vjs-icon-replay, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-replay:before, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
+  content: "\f11b";
+}
+
+.vjs-icon-replay-5, .video-js .vjs-skip-backward-5 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-replay-5:before, .video-js .vjs-skip-backward-5 .vjs-icon-placeholder:before {
+  content: "\f11c";
+}
+
+.vjs-icon-replay-10, .video-js .vjs-skip-backward-10 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-replay-10:before, .video-js .vjs-skip-backward-10 .vjs-icon-placeholder:before {
+  content: "\f11d";
+}
+
+.vjs-icon-replay-30, .video-js .vjs-skip-backward-30 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-replay-30:before, .video-js .vjs-skip-backward-30 .vjs-icon-placeholder:before {
+  content: "\f11e";
+}
+
+.vjs-icon-forward-5, .video-js .vjs-skip-forward-5 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-forward-5:before, .video-js .vjs-skip-forward-5 .vjs-icon-placeholder:before {
+  content: "\f11f";
+}
+
+.vjs-icon-forward-10, .video-js .vjs-skip-forward-10 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-forward-10:before, .video-js .vjs-skip-forward-10 .vjs-icon-placeholder:before {
+  content: "\f120";
+}
+
+.vjs-icon-forward-30, .video-js .vjs-skip-forward-30 .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-forward-30:before, .video-js .vjs-skip-forward-30 .vjs-icon-placeholder:before {
+  content: "\f121";
+}
+
+.vjs-icon-audio, .video-js .vjs-audio-button .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-audio:before, .video-js .vjs-audio-button .vjs-icon-placeholder:before {
+  content: "\f122";
+}
+
+.vjs-icon-next-item {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-next-item:before {
+  content: "\f123";
+}
+
+.vjs-icon-previous-item {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-previous-item:before {
+  content: "\f124";
+}
+
+.vjs-icon-shuffle {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-shuffle:before {
+  content: "\f125";
+}
+
+.vjs-icon-cast {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-cast:before {
+  content: "\f126";
+}
+
+.vjs-icon-picture-in-picture-enter, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-picture-in-picture-enter:before, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
+  content: "\f127";
+}
+
+.vjs-icon-picture-in-picture-exit, .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-picture-in-picture-exit:before, .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
+  content: "\f128";
+}
+
+.vjs-icon-facebook {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-facebook:before {
+  content: "\f129";
+}
+
+.vjs-icon-linkedin {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-linkedin:before {
+  content: "\f12a";
+}
+
+.vjs-icon-twitter {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-twitter:before {
+  content: "\f12b";
+}
+
+.vjs-icon-tumblr {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-tumblr:before {
+  content: "\f12c";
+}
+
+.vjs-icon-pinterest {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-pinterest:before {
+  content: "\f12d";
+}
+
+.vjs-icon-audio-description, .video-js .vjs-descriptions-button .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-icon-audio-description:before, .video-js .vjs-descriptions-button .vjs-icon-placeholder:before {
+  content: "\f12e";
+}
+
+.video-js {
+  display: inline-block;
+  vertical-align: top;
+  box-sizing: border-box;
+  color: #fff;
+  background-color: #000;
+  position: relative;
+  padding: 0;
+  font-size: 10px;
+  line-height: 1;
+  font-weight: normal;
+  font-style: normal;
+  font-family: Arial, Helvetica, sans-serif;
+  word-break: initial;
+}
+.video-js:-moz-full-screen {
+  position: absolute;
+}
+.video-js:-webkit-full-screen {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.video-js[tabindex="-1"] {
+  outline: none;
+}
+
+.video-js *,
+.video-js *:before,
+.video-js *:after {
+  box-sizing: inherit;
+}
+
+.video-js ul {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  list-style-position: outside;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.video-js.vjs-fluid,
+.video-js.vjs-16-9,
+.video-js.vjs-4-3,
+.video-js.vjs-9-16,
+.video-js.vjs-1-1 {
+  width: 100%;
+  max-width: 100%;
+}
+
+.video-js.vjs-fluid:not(.vjs-audio-only-mode),
+.video-js.vjs-16-9:not(.vjs-audio-only-mode),
+.video-js.vjs-4-3:not(.vjs-audio-only-mode),
+.video-js.vjs-9-16:not(.vjs-audio-only-mode),
+.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
+  height: 0;
+}
+
+.video-js.vjs-16-9:not(.vjs-audio-only-mode) {
+  padding-top: 56.25%;
+}
+
+.video-js.vjs-4-3:not(.vjs-audio-only-mode) {
+  padding-top: 75%;
+}
+
+.video-js.vjs-9-16:not(.vjs-audio-only-mode) {
+  padding-top: 177.7777777778%;
+}
+
+.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
+  padding-top: 100%;
+}
+
+.video-js.vjs-fill:not(.vjs-audio-only-mode) {
+  width: 100%;
+  height: 100%;
+}
+
+.video-js .vjs-tech {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.video-js.vjs-audio-only-mode .vjs-tech {
+  display: none;
+}
+
+body.vjs-full-window,
+body.vjs-pip-window {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+
+.vjs-full-window .video-js.vjs-fullscreen,
+body.vjs-pip-window .video-js {
+  position: fixed;
+  overflow: hidden;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.video-js.vjs-fullscreen:not(.vjs-ios-native-fs),
+body.vjs-pip-window .video-js {
+  width: 100% !important;
+  height: 100% !important;
+  padding-top: 0 !important;
+  display: block;
+}
+
+.video-js.vjs-fullscreen.vjs-user-inactive {
+  cursor: none;
+}
+
+.vjs-pip-container .vjs-pip-text {
+  position: absolute;
+  bottom: 10%;
+  font-size: 2em;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 0.5em;
+  text-align: center;
+  width: 100%;
+}
+
+.vjs-layout-tiny.vjs-pip-container .vjs-pip-text,
+.vjs-layout-x-small.vjs-pip-container .vjs-pip-text,
+.vjs-layout-small.vjs-pip-container .vjs-pip-text {
+  bottom: 0;
+  font-size: 1.4em;
+}
+
+.vjs-hidden {
+  display: none !important;
+}
+
+.vjs-disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.video-js .vjs-offscreen {
+  height: 1px;
+  left: -9999px;
+  position: absolute;
+  top: 0;
+  width: 1px;
+}
+
+.vjs-lock-showing {
+  display: block !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
+.vjs-no-js {
+  padding: 20px;
+  color: #fff;
+  background-color: #000;
+  font-size: 18px;
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: center;
+  width: 300px;
+  height: 150px;
+  margin: 0px auto;
+}
+
+.vjs-no-js a,
+.vjs-no-js a:visited {
+  color: #66A8CC;
+}
+
+.video-js .vjs-big-play-button {
+  font-size: 3em;
+  line-height: 1.5em;
+  height: 1.63332em;
+  width: 3em;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  padding: 0;
+  margin-top: -0.81666em;
+  margin-left: -1.5em;
+  cursor: pointer;
+  opacity: 1;
+  border: 0.06666em solid #fff;
+  background-color: #2B333F;
+  background-color: rgba(43, 51, 63, 0.7);
+  border-radius: 0.3em;
+  transition: all 0.4s;
+}
+.vjs-big-play-button .vjs-svg-icon {
+  width: 1em;
+  height: 1em;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  line-height: 1;
+  transform: translate(-50%, -50%);
+}
+
+.video-js:hover .vjs-big-play-button,
+.video-js .vjs-big-play-button:focus {
+  border-color: #fff;
+  background-color: #73859f;
+  background-color: rgba(115, 133, 159, 0.5);
+  transition: all 0s;
+}
+
+.vjs-controls-disabled .vjs-big-play-button,
+.vjs-has-started .vjs-big-play-button,
+.vjs-using-native-controls .vjs-big-play-button,
+.vjs-error .vjs-big-play-button {
+  display: none;
+}
+
+.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking, .vjs-scrubbing, .vjs-error) .vjs-big-play-button {
+  display: block;
+}
+
+.video-js button {
+  background: none;
+  border: none;
+  color: inherit;
+  display: inline-block;
+  font-size: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-decoration: none;
+  transition: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none;
+}
+
+.vjs-control .vjs-button {
+  width: 100%;
+  height: 100%;
+}
+
+.video-js .vjs-control.vjs-close-button {
+  cursor: pointer;
+  height: 3em;
+  position: absolute;
+  right: 0;
+  top: 0.5em;
+  z-index: 2;
+}
+.video-js .vjs-modal-dialog {
+  background: rgba(0, 0, 0, 0.8);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
+  overflow: auto;
+}
+
+.video-js .vjs-modal-dialog > * {
+  box-sizing: border-box;
+}
+
+.vjs-modal-dialog .vjs-modal-dialog-content {
+  font-size: 1.2em;
+  line-height: 1.5;
+  padding: 20px 24px;
+  z-index: 1;
+}
+
+.vjs-menu-button {
+  cursor: pointer;
+}
+
+.vjs-menu-button.vjs-disabled {
+  cursor: default;
+}
+
+.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
+  display: none;
+}
+
+.vjs-menu .vjs-menu-content {
+  display: block;
+  padding: 0;
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  overflow: auto;
+}
+
+.vjs-menu .vjs-menu-content > * {
+  box-sizing: border-box;
+}
+
+.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
+  display: none;
+}
+
+.vjs-menu li {
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  margin: 0;
+  padding: 0.2em 0;
+  line-height: 1.4em;
+  font-size: 1.2em;
+  text-align: center;
+  text-transform: lowercase;
+}
+
+.vjs-menu li.vjs-menu-item:focus,
+.vjs-menu li.vjs-menu-item:hover,
+.js-focus-visible .vjs-menu li.vjs-menu-item:hover {
+  background-color: #73859f;
+  background-color: rgba(115, 133, 159, 0.5);
+}
+
+.vjs-menu li.vjs-selected,
+.vjs-menu li.vjs-selected:focus,
+.vjs-menu li.vjs-selected:hover,
+.js-focus-visible .vjs-menu li.vjs-selected:hover {
+  background-color: #fff;
+  color: #2B333F;
+}
+.vjs-menu li.vjs-selected .vjs-svg-icon,
+.vjs-menu li.vjs-selected:focus .vjs-svg-icon,
+.vjs-menu li.vjs-selected:hover .vjs-svg-icon,
+.js-focus-visible .vjs-menu li.vjs-selected:hover .vjs-svg-icon {
+  fill: #000000;
+}
+
+.video-js .vjs-menu *:not(.vjs-selected):focus:not(:focus-visible),
+.js-focus-visible .vjs-menu *:not(.vjs-selected):focus:not(.focus-visible) {
+  background: none;
+}
+
+.vjs-menu li.vjs-menu-title {
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 1em;
+  line-height: 2em;
+  padding: 0;
+  margin: 0 0 0.3em 0;
+  font-weight: bold;
+  cursor: default;
+}
+
+.vjs-menu-button-popup .vjs-menu {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  width: 10em;
+  left: -3em;
+  height: 0em;
+  margin-bottom: 1.5em;
+  border-top-color: rgba(43, 51, 63, 0.7);
+}
+
+.vjs-pip-window .vjs-menu-button-popup .vjs-menu {
+  left: unset;
+  right: 1em;
+}
+
+.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  background-color: #2B333F;
+  background-color: rgba(43, 51, 63, 0.7);
+  position: absolute;
+  width: 100%;
+  bottom: 1.5em;
+  max-height: 15em;
+}
+
+.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 5em;
+}
+
+.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 10em;
+}
+
+.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 14em;
+}
+
+.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 25em;
+}
+
+.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu,
+.vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
+  display: block;
+}
+
+.video-js .vjs-menu-button-inline {
+  transition: all 0.4s;
+  overflow: hidden;
+}
+
+.video-js .vjs-menu-button-inline:before {
+  width: 2.222222222em;
+}
+
+.video-js .vjs-menu-button-inline:hover,
+.video-js .vjs-menu-button-inline:focus,
+.video-js .vjs-menu-button-inline.vjs-slider-active {
+  width: 12em;
+}
+
+.vjs-menu-button-inline .vjs-menu {
+  opacity: 0;
+  height: 100%;
+  width: auto;
+  position: absolute;
+  left: 4em;
+  top: 0;
+  padding: 0;
+  margin: 0;
+  transition: all 0.4s;
+}
+
+.vjs-menu-button-inline:hover .vjs-menu,
+.vjs-menu-button-inline:focus .vjs-menu,
+.vjs-menu-button-inline.vjs-slider-active .vjs-menu {
+  display: block;
+  opacity: 1;
+}
+
+.vjs-menu-button-inline .vjs-menu-content {
+  width: auto;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+.video-js .vjs-control-bar {
+  display: none;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3em;
+  background-color: #2B333F;
+  background-color: rgba(43, 51, 63, 0.7);
+}
+
+.video-js:not(.vjs-controls-disabled, .vjs-using-native-controls, .vjs-error) .vjs-control-bar.vjs-lock-showing {
+  display: flex !important;
+}
+
+.vjs-has-started .vjs-control-bar,
+.vjs-audio-only-mode .vjs-control-bar {
+  display: flex;
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0.1s, opacity 0.1s;
+}
+
+.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  visibility: visible;
+  opacity: 0;
+  pointer-events: none;
+  transition: visibility 1s, opacity 1s;
+}
+
+.vjs-controls-disabled .vjs-control-bar,
+.vjs-using-native-controls .vjs-control-bar,
+.vjs-error .vjs-control-bar {
+  display: none !important;
+}
+
+.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,
+.vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.video-js .vjs-control {
+  position: relative;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 4em;
+  flex: none;
+}
+
+.video-js .vjs-control.vjs-visible-text {
+  width: auto;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.vjs-button > .vjs-icon-placeholder:before {
+  font-size: 1.8em;
+  line-height: 1.67;
+}
+
+.vjs-button > .vjs-icon-placeholder {
+  display: block;
+}
+
+.vjs-button > .vjs-svg-icon {
+  display: inline-block;
+}
+
+.video-js .vjs-control:focus:before,
+.video-js .vjs-control:hover:before,
+.video-js .vjs-control:focus {
+  text-shadow: 0em 0em 1em white;
+}
+
+.video-js *:not(.vjs-visible-text) > .vjs-control-text {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.video-js .vjs-custom-control-spacer {
+  display: none;
+}
+
+.video-js .vjs-progress-control {
+  cursor: pointer;
+  flex: auto;
+  display: flex;
+  align-items: center;
+  min-width: 4em;
+  touch-action: none;
+}
+
+.video-js .vjs-progress-control.disabled {
+  cursor: default;
+}
+
+.vjs-live .vjs-progress-control {
+  display: none;
+}
+
+.vjs-liveui .vjs-progress-control {
+  display: flex;
+  align-items: center;
+}
+
+.video-js .vjs-progress-holder {
+  flex: auto;
+  transition: all 0.2s;
+  height: 0.3em;
+}
+
+.video-js .vjs-progress-control .vjs-progress-holder {
+  margin: 0 10px;
+}
+
+.video-js .vjs-progress-control:hover .vjs-progress-holder {
+  font-size: 1.6666666667em;
+}
+
+.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {
+  font-size: 1em;
+}
+
+.video-js .vjs-progress-holder .vjs-play-progress,
+.video-js .vjs-progress-holder .vjs-load-progress,
+.video-js .vjs-progress-holder .vjs-load-progress div {
+  position: absolute;
+  display: block;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 0;
+}
+
+.video-js .vjs-play-progress {
+  background-color: #fff;
+}
+.video-js .vjs-play-progress:before {
+  font-size: 0.9em;
+  position: absolute;
+  right: -0.5em;
+  line-height: 0.35em;
+  z-index: 1;
+}
+
+.vjs-svg-icons-enabled .vjs-play-progress:before {
+  content: none !important;
+}
+
+.vjs-play-progress .vjs-svg-icon {
+  position: absolute;
+  top: -0.35em;
+  right: -0.4em;
+  width: 0.9em;
+  height: 0.9em;
+  pointer-events: none;
+  line-height: 0.15em;
+  z-index: 1;
+}
+
+.video-js .vjs-load-progress {
+  background: rgba(115, 133, 159, 0.5);
+}
+
+.video-js .vjs-load-progress div {
+  background: rgba(115, 133, 159, 0.75);
+}
+
+.video-js .vjs-time-tooltip {
+  background-color: #fff;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 0.3em;
+  color: #000;
+  float: right;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1em;
+  padding: 6px 8px 8px 8px;
+  pointer-events: none;
+  position: absolute;
+  top: -3.4em;
+  visibility: hidden;
+  z-index: 1;
+}
+
+.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
+  display: none;
+}
+
+.video-js .vjs-progress-control:hover .vjs-time-tooltip,
+.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
+  display: block;
+  font-size: 0.6em;
+  visibility: visible;
+}
+
+.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip {
+  font-size: 1em;
+}
+
+.video-js .vjs-progress-control .vjs-mouse-display {
+  display: none;
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  background-color: #000;
+  z-index: 1;
+}
+
+.video-js .vjs-progress-control:hover .vjs-mouse-display {
+  display: block;
+}
+
+.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 1s, opacity 1s;
+}
+
+.vjs-mouse-display .vjs-time-tooltip {
+  color: #fff;
+  background-color: #000;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.video-js .vjs-slider {
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+  margin: 0 0.45em 0 0.45em;
+  /* iOS Safari */
+  -webkit-touch-callout: none;
+  /* Safari, and Chrome 53 */
+  -webkit-user-select: none;
+  /* Non-prefixed version, currently supported by Chrome and Opera */
+  -moz-user-select: none;
+       user-select: none;
+  background-color: #73859f;
+  background-color: rgba(115, 133, 159, 0.5);
+}
+
+.video-js .vjs-slider.disabled {
+  cursor: default;
+}
+
+.video-js .vjs-slider:focus {
+  text-shadow: 0em 0em 1em white;
+  box-shadow: 0 0 1em #fff;
+}
+
+.video-js .vjs-mute-control {
+  cursor: pointer;
+  flex: none;
+}
+.video-js .vjs-volume-control {
+  cursor: pointer;
+  margin-right: 1em;
+  display: flex;
+}
+
+.video-js .vjs-volume-control.vjs-volume-horizontal {
+  width: 5em;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control {
+  visibility: visible;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin-left: -1px;
+}
+
+.video-js .vjs-volume-panel {
+  transition: width 1s;
+}
+.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control, .video-js .vjs-volume-panel:active .vjs-volume-control, .video-js .vjs-volume-panel:focus .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control:active, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active {
+  visibility: visible;
+  opacity: 1;
+  position: relative;
+  transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
+}
+.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
+  width: 5em;
+  height: 3em;
+  margin-right: 0;
+}
+.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
+  left: -3.5em;
+  transition: left 0s;
+}
+.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
+  width: 10em;
+  transition: width 0.1s;
+}
+.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
+  width: 4em;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
+  height: 8em;
+  width: 3em;
+  left: -3000em;
+  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
+  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
+}
+
+.video-js .vjs-volume-panel {
+  display: flex;
+}
+
+.video-js .vjs-volume-bar {
+  margin: 1.35em 0.45em;
+}
+
+.vjs-volume-bar.vjs-slider-horizontal {
+  width: 5em;
+  height: 0.3em;
+}
+
+.vjs-volume-bar.vjs-slider-vertical {
+  width: 0.3em;
+  height: 5em;
+  margin: 1.35em auto;
+}
+
+.video-js .vjs-volume-level {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background-color: #fff;
+}
+.video-js .vjs-volume-level:before {
+  position: absolute;
+  font-size: 0.9em;
+  z-index: 1;
+}
+
+.vjs-slider-vertical .vjs-volume-level {
+  width: 0.3em;
+}
+.vjs-slider-vertical .vjs-volume-level:before {
+  top: -0.5em;
+  left: -0.3em;
+  z-index: 1;
+}
+
+.vjs-svg-icons-enabled .vjs-volume-level:before {
+  content: none;
+}
+
+.vjs-volume-level .vjs-svg-icon {
+  position: absolute;
+  width: 0.9em;
+  height: 0.9em;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.vjs-slider-horizontal .vjs-volume-level {
+  height: 0.3em;
+}
+.vjs-slider-horizontal .vjs-volume-level:before {
+  line-height: 0.35em;
+  right: -0.5em;
+}
+
+.vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon {
+  right: -0.3em;
+  transform: translateY(-50%);
+}
+
+.vjs-slider-vertical .vjs-volume-level .vjs-svg-icon {
+  top: -0.55em;
+  transform: translateX(-50%);
+}
+
+.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
+  width: 4em;
+}
+
+.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
+  height: 100%;
+}
+
+.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
+  width: 100%;
+}
+
+.video-js .vjs-volume-vertical {
+  width: 3em;
+  height: 8em;
+  bottom: 8em;
+  background-color: #2B333F;
+  background-color: rgba(43, 51, 63, 0.7);
+}
+
+.video-js .vjs-volume-horizontal .vjs-menu {
+  left: -2em;
+}
+
+.video-js .vjs-volume-tooltip {
+  background-color: #fff;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 0.3em;
+  color: #000;
+  float: right;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1em;
+  padding: 6px 8px 8px 8px;
+  pointer-events: none;
+  position: absolute;
+  top: -3.4em;
+  visibility: hidden;
+  z-index: 1;
+}
+
+.video-js .vjs-volume-control:hover .vjs-volume-tooltip,
+.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
+  display: block;
+  font-size: 1em;
+  visibility: visible;
+}
+
+.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip,
+.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
+  left: 1em;
+  top: -12px;
+}
+
+.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip {
+  font-size: 1em;
+}
+
+.video-js .vjs-volume-control .vjs-mouse-display {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  background-color: #000;
+  z-index: 1;
+}
+
+.video-js .vjs-volume-horizontal .vjs-mouse-display {
+  width: 1px;
+  height: 100%;
+}
+
+.video-js .vjs-volume-control:hover .vjs-mouse-display {
+  display: block;
+}
+
+.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 1s, opacity 1s;
+}
+
+.vjs-mouse-display .vjs-volume-tooltip {
+  color: #fff;
+  background-color: #000;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.vjs-poster {
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+}
+
+.vjs-has-started .vjs-poster,
+.vjs-using-native-controls .vjs-poster {
+  display: none;
+}
+
+.vjs-audio.vjs-has-started .vjs-poster,
+.vjs-has-started.vjs-audio-poster-mode .vjs-poster,
+.vjs-pip-container.vjs-has-started .vjs-poster {
+  display: block;
+}
+
+.vjs-poster img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.video-js .vjs-live-control {
+  display: flex;
+  align-items: flex-start;
+  flex: auto;
+  font-size: 1em;
+  line-height: 3em;
+}
+
+.video-js:not(.vjs-live) .vjs-live-control,
+.video-js.vjs-liveui .vjs-live-control {
+  display: none;
+}
+
+.video-js .vjs-seek-to-live-control {
+  align-items: center;
+  cursor: pointer;
+  flex: none;
+  display: inline-flex;
+  height: 100%;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  font-size: 1em;
+  line-height: 3em;
+  width: auto;
+  min-width: 4em;
+}
+
+.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,
+.video-js:not(.vjs-live) .vjs-seek-to-live-control {
+  display: none;
+}
+
+.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge {
+  cursor: auto;
+}
+
+.vjs-seek-to-live-control .vjs-icon-placeholder {
+  margin-right: 0.5em;
+  color: #888;
+}
+
+.vjs-svg-icons-enabled .vjs-seek-to-live-control {
+  line-height: 0;
+}
+
+.vjs-seek-to-live-control .vjs-svg-icon {
+  width: 1em;
+  height: 1em;
+  pointer-events: none;
+  fill: #888888;
+}
+
+.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
+  color: red;
+}
+
+.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-svg-icon {
+  fill: red;
+}
+
+.video-js .vjs-time-control {
+  flex: none;
+  font-size: 1em;
+  line-height: 3em;
+  min-width: 2em;
+  width: auto;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.vjs-live .vjs-time-control,
+.vjs-live .vjs-time-divider,
+.video-js .vjs-current-time,
+.video-js .vjs-duration {
+  display: none;
+}
+
+.vjs-time-divider {
+  display: none;
+  line-height: 3em;
+}
+
+.video-js .vjs-play-control {
+  cursor: pointer;
+}
+
+.video-js .vjs-play-control .vjs-icon-placeholder {
+  flex: none;
+}
+
+.vjs-text-track-display {
+  position: absolute;
+  bottom: 3em;
+  left: 0;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+}
+
+.vjs-error .vjs-text-track-display {
+  display: none;
+}
+
+.video-js.vjs-controls-disabled .vjs-text-track-display,
+.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
+  bottom: 1em;
+}
+
+.video-js .vjs-text-track {
+  font-size: 1.4em;
+  text-align: center;
+  margin-bottom: 0.1em;
+}
+
+.vjs-subtitles {
+  color: #fff;
+}
+
+.vjs-captions {
+  color: #fc6;
+}
+
+.vjs-tt-cue {
+  display: block;
+}
+
+video::-webkit-media-text-track-display {
+  transform: translateY(-3em);
+}
+
+.video-js.vjs-controls-disabled video::-webkit-media-text-track-display,
+.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
+  transform: translateY(-1.5em);
+}
+
+.video-js.vjs-force-center-align-cues .vjs-text-track-cue {
+  text-align: center !important;
+  width: 80% !important;
+}
+
+.video-js .vjs-picture-in-picture-control {
+  cursor: pointer;
+  flex: none;
+}
+.video-js.vjs-audio-only-mode .vjs-picture-in-picture-control,
+.vjs-pip-window .vjs-picture-in-picture-control {
+  display: none;
+}
+
+.video-js .vjs-fullscreen-control {
+  cursor: pointer;
+  flex: none;
+}
+.video-js.vjs-audio-only-mode .vjs-fullscreen-control,
+.vjs-pip-window .vjs-fullscreen-control {
+  display: none;
+}
+
+.vjs-playback-rate > .vjs-menu-button,
+.vjs-playback-rate .vjs-playback-rate-value {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.vjs-playback-rate .vjs-playback-rate-value {
+  pointer-events: none;
+  font-size: 1.5em;
+  line-height: 2;
+  text-align: center;
+}
+
+.vjs-playback-rate .vjs-menu {
+  width: 4em;
+  left: 0em;
+}
+
+.vjs-error .vjs-error-display .vjs-modal-dialog-content {
+  font-size: 1.4em;
+  text-align: center;
+}
+
+.vjs-loading-spinner {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0.85;
+  text-align: left;
+  border: 0.6em solid rgba(43, 51, 63, 0.7);
+  box-sizing: border-box;
+  background-clip: padding-box;
+  width: 5em;
+  height: 5em;
+  border-radius: 50%;
+  visibility: hidden;
+}
+
+.vjs-seeking .vjs-loading-spinner,
+.vjs-waiting .vjs-loading-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: vjs-spinner-show 0s linear 0.3s forwards;
+}
+
+.vjs-error .vjs-loading-spinner {
+  display: none;
+}
+
+.vjs-loading-spinner:before,
+.vjs-loading-spinner:after {
+  content: "";
+  position: absolute;
+  box-sizing: inherit;
+  width: inherit;
+  height: inherit;
+  border-radius: inherit;
+  opacity: 1;
+  border: inherit;
+  border-color: transparent;
+  border-top-color: white;
+}
+
+.vjs-seeking .vjs-loading-spinner:before,
+.vjs-seeking .vjs-loading-spinner:after,
+.vjs-waiting .vjs-loading-spinner:before,
+.vjs-waiting .vjs-loading-spinner:after {
+  animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
+}
+
+.vjs-seeking .vjs-loading-spinner:before,
+.vjs-waiting .vjs-loading-spinner:before {
+  border-top-color: rgb(255, 255, 255);
+}
+
+.vjs-seeking .vjs-loading-spinner:after,
+.vjs-waiting .vjs-loading-spinner:after {
+  border-top-color: rgb(255, 255, 255);
+  animation-delay: 0.44s;
+}
+
+@keyframes vjs-spinner-show {
+  to {
+    visibility: visible;
+  }
+}
+@keyframes vjs-spinner-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes vjs-spinner-fade {
+  0% {
+    border-top-color: #73859f;
+  }
+  20% {
+    border-top-color: #73859f;
+  }
+  35% {
+    border-top-color: white;
+  }
+  60% {
+    border-top-color: #73859f;
+  }
+  100% {
+    border-top-color: #73859f;
+  }
+}
+.video-js.vjs-audio-only-mode .vjs-captions-button {
+  display: none;
+}
+
+.vjs-chapters-button .vjs-menu ul {
+  width: 24em;
+}
+
+.video-js.vjs-audio-only-mode .vjs-descriptions-button {
+  display: none;
+}
+
+.vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-svg-icon {
+  width: 1.5em;
+  height: 1.5em;
+}
+
+.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
+  vertical-align: middle;
+  display: inline-block;
+  margin-bottom: -0.1em;
+}
+
+.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
+  font-family: VideoJS;
+  content: "\f10c";
+  font-size: 1.5em;
+  line-height: inherit;
+}
+
+.video-js.vjs-audio-only-mode .vjs-subs-caps-button {
+  display: none;
+}
+
+.video-js .vjs-audio-button + .vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder,
+.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
+  vertical-align: middle;
+  display: inline-block;
+  margin-bottom: -0.1em;
+}
+
+.video-js .vjs-audio-button + .vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before,
+.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
+  font-family: VideoJS;
+  content: " \f12e";
+  font-size: 1.5em;
+  line-height: inherit;
+}
+
+.video-js.vjs-layout-small .vjs-current-time,
+.video-js.vjs-layout-small .vjs-time-divider,
+.video-js.vjs-layout-small .vjs-duration,
+.video-js.vjs-layout-small .vjs-remaining-time,
+.video-js.vjs-layout-small .vjs-playback-rate,
+.video-js.vjs-layout-small .vjs-volume-control, .video-js.vjs-layout-x-small .vjs-current-time,
+.video-js.vjs-layout-x-small .vjs-time-divider,
+.video-js.vjs-layout-x-small .vjs-duration,
+.video-js.vjs-layout-x-small .vjs-remaining-time,
+.video-js.vjs-layout-x-small .vjs-playback-rate,
+.video-js.vjs-layout-x-small .vjs-volume-control, .video-js.vjs-layout-tiny .vjs-current-time,
+.video-js.vjs-layout-tiny .vjs-time-divider,
+.video-js.vjs-layout-tiny .vjs-duration,
+.video-js.vjs-layout-tiny .vjs-remaining-time,
+.video-js.vjs-layout-tiny .vjs-playback-rate,
+.video-js.vjs-layout-tiny .vjs-volume-control {
+  display: none;
+}
+.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover {
+  width: auto;
+  width: initial;
+}
+.video-js.vjs-layout-x-small .vjs-progress-control, .video-js.vjs-layout-tiny .vjs-progress-control {
+  display: none;
+}
+.video-js.vjs-layout-x-small .vjs-custom-control-spacer {
+  flex: auto;
+  display: block;
+}
+
+.vjs-modal-dialog.vjs-text-track-settings {
+  background-color: #2B333F;
+  background-color: rgba(43, 51, 63, 0.75);
+  color: #fff;
+  height: 70%;
+}
+
+.vjs-error .vjs-text-track-settings {
+  display: none;
+}
+
+.vjs-text-track-settings .vjs-modal-dialog-content {
+  display: table;
+}
+
+.vjs-text-track-settings .vjs-track-settings-colors,
+.vjs-text-track-settings .vjs-track-settings-font,
+.vjs-text-track-settings .vjs-track-settings-controls {
+  display: table-cell;
+}
+
+.vjs-text-track-settings .vjs-track-settings-controls {
+  text-align: right;
+  vertical-align: bottom;
+}
+
+@supports (display: grid) {
+  .vjs-text-track-settings .vjs-modal-dialog-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    padding: 20px 24px 0px 24px;
+  }
+  .vjs-track-settings-controls .vjs-default-button {
+    margin-bottom: 20px;
+  }
+  .vjs-text-track-settings .vjs-track-settings-controls {
+    grid-column: 1/-1;
+  }
+  .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,
+  .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content,
+  .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content {
+    grid-template-columns: 1fr;
+  }
+}
+.vjs-text-track-settings select {
+  font-size: inherit;
+}
+
+.vjs-track-setting > select {
+  margin-right: 1em;
+  margin-bottom: 0.5em;
+}
+
+.vjs-text-track-settings fieldset {
+  margin: 10px;
+  border: none;
+}
+
+.vjs-text-track-settings fieldset span {
+  display: inline-block;
+  padding: 0 0.6em 0.8em;
+}
+
+.vjs-text-track-settings fieldset span > select {
+  max-width: 7.3em;
+}
+
+.vjs-text-track-settings legend {
+  color: #fff;
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+.vjs-text-track-settings .vjs-label {
+  margin: 0 0.5em 0.5em 0;
+}
+
+.vjs-track-settings-controls button:focus,
+.vjs-track-settings-controls button:active {
+  outline-style: solid;
+  outline-width: medium;
+  background-image: linear-gradient(0deg, #fff 88%, #73859f 100%);
+}
+
+.vjs-track-settings-controls button:hover {
+  color: rgba(43, 51, 63, 0.75);
+}
+
+.vjs-track-settings-controls button {
+  background-color: #fff;
+  background-image: linear-gradient(-180deg, #fff 88%, #73859f 100%);
+  color: #2B333F;
+  cursor: pointer;
+  border-radius: 2px;
+}
+
+.vjs-track-settings-controls .vjs-default-button {
+  margin-right: 1em;
+}
+
+.vjs-title-bar {
+  background: rgba(0, 0, 0, 0.9);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0) 100%);
+  font-size: 1.2em;
+  line-height: 1.5;
+  transition: opacity 0.1s;
+  padding: 0.666em 1.333em 4em;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.vjs-error .vjs-title-bar {
+  display: none;
+}
+
+.vjs-title-bar-title,
+.vjs-title-bar-description {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vjs-title-bar-title {
+  font-weight: bold;
+  margin-bottom: 0.333em;
+}
+
+.vjs-playing.vjs-user-inactive .vjs-title-bar {
+  opacity: 0;
+  transition: opacity 1s;
+}
+
+.video-js .vjs-skip-forward-5 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-forward-10 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-forward-30 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-backward-5 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-backward-10 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-backward-30 {
+  cursor: pointer;
+}
+@media print {
+  .video-js > *:not(.vjs-tech):not(.vjs-poster) {
+    visibility: hidden;
+  }
+}
+.vjs-resize-manager {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: -1000;
+}
+
+.js-focus-visible .video-js *:focus:not(.focus-visible) {
+  outline: none;
+}
+
+.video-js *:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/priv/static/video.js/video-js.min.css b/priv/static/video.js/video-js.min.css
new file mode 100644
index 0000000..36b8b2d
--- /dev/null
+++ b/priv/static/video.js/video-js.min.css
@@ -0,0 +1 @@
+.vjs-svg-icon{display:inline-block;background-repeat:no-repeat;background-position:center;fill:currentColor;height:1.8em;width:1.8em}.vjs-svg-icon:before{content:none!important}.vjs-control:focus .vjs-svg-icon,.vjs-svg-icon:hover{filter:drop-shadow(0 0 .25em #fff)}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-modal-dialog,.vjs-button>.vjs-icon-placeholder:before,.vjs-modal-dialog .vjs-modal-dialog-content{position:absolute;top:0;left:0;width:100%;height:100%}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.vjs-button>.vjs-icon-placeholder:before{text-align:center}@font-face{font-family:VideoJS;src:url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABUgAAsAAAAAItAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV33Y21hcAAAAYQAAAEJAAAD5p42+VxnbHlmAAACkAAADwwAABdk9R/WHmhlYWQAABGcAAAAKwAAADYn8kSnaGhlYQAAEcgAAAAdAAAAJA+RCL1obXR4AAAR6AAAABMAAAC8Q44AAGxvY2EAABH8AAAAYAAAAGB7SIHGbWF4cAAAElwAAAAfAAAAIAFAAI9uYW1lAAASfAAAASUAAAIK1cf1oHBvc3QAABOkAAABfAAAAnXdFqh1eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGR7xDiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGPHcRdyA4RZgQRADbZCycAAHic7dPXbcMwAEXRK1vuvffem749XAbKV3bjBA6fXsaIgMMLEWoQJaAEFKNnlELyQ4K27zib5PNF6vl8yld+TKr5kH0+cUw0xv00Hwvx2DResUyFKrV4XoMmLdp06NKjz4AhI8ZMmDJjzoIlK9Zs2LJjz4EjJ85cuHLjziPe/0UWL17mf2tqKLz/9jK9f8tXpGCoRdPKhtS0RqFkWvVQNtSKoVYNtWaoddPXEBqG2jQ9XWgZattQO4baNdSeofYNdWCoQ0MdGerYUCeGOjXUmaHODXVhqEtDXRnq2lA3hro11J2h7g31YKhHQz0Z6tlQL4Z6NdSbod4N9WGoT9MfHF6GmhnZLxyDcRMAAAB4nJ1YC1gUV5auc6urCmxEGrq6VRD6ATQP5dHPKK8GRIyoKApoEBUDAiGzGmdUfKNRM4qLZrUZdGKcGN/GZJKd0SyOWTbfbmZ2NxqzM5IxRtNZd78vwYlJdtREoO7sudVNq6PmmxmKqrqPU+eee173P80Bh39Cu9DOEY4DHZBK3i20D/QRLcfxbE5sEVtwLpZzclw4ibFIkSCJUcZ4MBpMnnzwuKNsGWBL5i3qy6kO2dVpvUpKbkAP9fq62rdeGJ+TM/7C1nbIutfuWrWk5ci4zMxxR1qW/N+9JsmCGXj9VKWhFx/6tr/nz78INDm2C9yPF/fDcxLuyKxLBZ1ZBz2QTi+RSkiH5RrDQJ/GgGQadX9m0YSURs7GpSG905Zsk41uj14yul1OtieZ7QUk5GRG/YiS7PYYPSAZNRed9sq3+bOpz00rKb7pe/ZEZvbALxZAHT3AFoH8GXP3rt67QFn40kt8W13FjLTDb48c+fSi5/7h0P4dL5yz7DPtbmgmYxfQA9RL2+EOfTcvdp+1vmuBpvOll1As1S6ak0IvJzC7sKWJFtJgBd2uWcg+0Zyg7dzQfhcjXRgXGZRf5/a4A58IDU777Nl252AUk4m2ByRRjqTNqIDCEJeAnU3iCFwrkrNwXEzg4yFevBwypzxkcX+AIfk3VEKl3XmWbT8788SzvpvFJaiOezL6QyuSr9VNf97csNu0z3LuhR0wATUxZAfVBwVOy+nQFhxYdWaXlXe4HC4zWGWzzsrLDtmhI9pOWOHv7PTT7XybH1Z0+v2d5Abd3kmG+TsH23CS/KwTxx/JkzEwx6jcQOUc42LLwHJ/J93uZ9ygh3HuZGwqsY9dWDHQ58dxNqyqKRQTYdxwTubiOSs3FiMDkq0WSZQgCT0GBDOg2lxOAd1FlPVGs4AKBAcYHHaP2wPkHaivmLF5zYqnIZrvcHx5gN4k/6tchNW1DtdgNL2KrxEkS/kfnIHoVnp1VjmjpTf5r0lTzLj0mdS28tX+XGorU364eMPmnWVl8J36nlKGw3CZhjEiuMw8h8mKvhGD+4/lElBWjAhLJMg6fTw4zPZ8cOmcGQBm2Qxml1nAm13CpYGq1JKUlJJUzQn1PTAO0mgv6VMMpA/DuRfSWEu4lDIxdbAtdWIKvnn2Vk766CWfz9fpY0sH/UpdP50rfszaVpdVRmvIejEdLMk45s4Bu0EWHjeOySmFyZSiMahvZdNSn29peoI/YexYfKQTLeurTXXwEVLeSfInTWHkkMaeUx7sBvOCSTSj3AlcKjfueyS36tCrXDlgRtF0etFq9jhc1kfKuBT/OwMr0F4UUTTh1AN0g20+H/ScPcsIEsYu9d/zN5PmjprPtNwI1ZZcDK6iC97Mcjp2y2aX36f+QbpGHrgRuHlXJ+Zf6PFRL2uQSp8vxHeF2IoRb8Rd2rhMzsNxSRmEuKK4JFnkojhMcx6jzqHzGMGFcW+MhBj0bhf6cowN+45I4LHvwT6fteu7M42wGRI/pxcg6/MZdEvt1U1XaulHFXuLmqov/MukvRVL35/b3ODM1+4aPjtzeK7zmUkV2h3DN54HaQ9GzJvxHRb6Ks2gB81fwqraT+A7GvZJrRLRofU6G0urNL+zFw3v0FaVDFxsKEZW56F31r6ip6vOL+FCObBPuIMRiXld9RaMdLzRIOGhPey2T9vA/35DmZPK9IWaT9d/WgOGMieYqJ/dzjLIhZU118gbysxrNUGefxD6UO/hyNNllpFTOIbx32kSFQctnweV5PxTMHLjRqiAN+fQE9gL+Xy5WB6MOS4GJJuYbDUHhcKDhHGRbLzOpjsjdM1+iwAZLGeieehACX2hhI7SjK/ZUTNrvVje31TxJiFBGYViWFkCn9PMeX9fS6qVbzfCj4fOCTzDnuWy2c4xA7mdNkA3RS9FH2VeqzdCBlixxbzXjvkHU1I8BOYFb1pZvPIHSSIj4svT8xpzcxtXN+ZKyjdDvbz08niiF3PqV9Tn5NST8vg48MTaY8E5xqSSIsWoWHo+LtAzxdH/GDUyp37CBEYfso04F/NlMTcDJUTpECLY0HFGQHImE8xsEUdgnrQlixIvGhJA1BvxpDHGxEMBYFeNOHcBJlSjwe2JcSfbBEsGOPPBHg/6SBBOCsLLw0SpUxod0Z1bFMfLkbQ3UiZxEyd0Dx8t+SRBu18Q9msFbI4e3p1THEfkSEh7kEJ5orR10qTWDvbgPWn5aWvCYyOAjwgXyjJi34uMjo58L25cmRAeQZWI2PA1QQLsPESAH8WGFwZZ4SPoR73BHPzIPMJj9AreBzKUmrH4todT18ANvi1oc3YGjUT/0j+ExUwq8PI9BLaCQIpvewwYu2evAG/Vo/5avPdY7o+BemLLXw3y+AdkzP9bpIxB1wm5EYq8fesHbPEPtm6HrHvtx4jcGPR8fDDpkZBefIjB46QnlUNRltv4Z/pO/J6dxEjhYAtmoMeq+GozvUVvNYOW3m6GCIhoprcfr97B8AcIQYsfD8ljUvGNjvkrpj0ETA48ZMIxCeqsRIsQALE0gi2GB+glSOfbOjW3GSBM9yPq8/rpJXrJDz0BPxV6xdN4uiCGDQed3WhgFkBUZEFsmeyyBpzXrm7UGTBZG8Lh5aubFufk5eUsbrrFGr7McYdbltxa0nKYqRKbQjvikXYkTGM0f2xuyM3Ly21oXnWfvf6I1BmZwfh7EWWIYsg2nHhsDhOnczhJcmI6eBAmy3jZ3RiJmKQR/JA99FcwsfaVbNDDyi1rL9NPj9hfo61wjM6BjzOLijLpeTgk/pL+ip6tfYWupzeOgPny2tcUu9J/9mhxJlgyi985NFRbvCVewXUNXLJaW0RxZqtRYtnfYdcYomXQWdnJHQA3jiEEkeTQWcWxdDP9IvvVWvo2TK553XEMEq+s69/QDU1Q7p0zxwsm9qS379whr8NI2PJqLUyGyfNeX3eFfnJU2U+uHR9cVV1IqgurqwuV44XVp0h2qN55X5XJwtk59yP0IZuHrqBOBIuIYhkcoT6Kx79Pu2HS/IPZIMOqLWs/pteOOk4NPgEb6QAIdAPsyZk5Mwd+wVaHMexJv719W7xCu2l37UG6lvYdBcvHa08p89741zd63phTRGqL5ggo6SlvdbWXzCqsPq78NnSu7wnKy2HNZbVoRCI7UJEOyRj+sPE002tOOY7Qa5fXboFWkLNeqYUSZRocp9XwSUZxcQZ9Hw6LV2pOoVmvHQEDbGIENEG5i6bLgMSM4n8+FNLTtAds99DaWEvgcf4o5SyYe9x+kF6/tGoTPAdRmS/XQIEy//QxKC2oqioAI3tS5auvxCtzT6y6RK8fhChYcwCJaMJhxc0vqSxQ/qmgsrKAlBZUHlauheTpvd9uj5DnLzJct6qfq5fXbYHVIGcfrIVJihbaVLu1wW7Vbs8zK0A8e9Jvb91S9cVMjPrazD6gpfeZTXzYbCFMcppVRsGMpp55OWgx1/3JeAxW1Y7AORgM/m3rWrsdLkQVmEVSU16cX/e7uvkvpqRiQsG06XJ0t64Tf+l0nG1dt025gyOIZlvq5u9KSU1N2TW/rsWnnMRPyTDkctbhvIcNvYIXWyLzdwYLoYesUbaQG4iK2cWO2gdpeUYLqDD0MUTOPhDIGnZEs58yArR86FznuWEsU4YDi2x26dA4klkn8Qa6vhk2QUfX4Jxm/ngX9r7ogn1dmlmwqZmuhxtdg9XN/DEcUgqb+9hMyNansfaQET2mcROCmGEMVqxm5u+h6kN2MOwgqykV2wH9yQG9DvVFU38Pogaf4FVuE62KI/oJ02RDdWW2w5dqQwU/8+N1q1DlvsL863u61KLE7x/o8w0VJQM/Y/SQ3unIrqxueEa1BqT5VFNsO7p39/UC771a77RowpaKe9nvJQIT1Pog5LGx8XblBKmCNGTf3xMogAQvPnz9PYKX/08sVDTG1OKUlOLUgS/UaZtm1NAaYTsl7i9ZQ+L6O4Rl0OGa577LuWvc+C+x96/vYh0lLBuM+7XwI/dTLtdT7v4d6rRTWDnku0IBrqFnZ5bVIqKP8lasJlithWnaLhTsr8qFJBulF/70p4undou36HeTJ5+jv1fCybeQ8nH3+Xv6aENczmOFlab+hqMDg1rLOt12A+tiUFrYDwQ6c3RUJp601nzegTNX6WlYAI2zSUV945F6zU56ZmZVQaWspWcIADxJ9GmljQUnL2p2Dpr5T8H+5KJFu+vqBq8qvyHRzStLHPEO5SPYCV9nZe0yZT2RcH0oHvegSzNEJ0oGWU8iQWM12dgPEugngVceGIwZgPFp0BiT1a0a3R5Rcot7ihfA1J/20v96jX7zmTX9s583H0kwx6WnLd09cXrR9LGroOa9sHNbdyz8wcKk5lqhaVFJZNwmqtw884MXNdvJujpBa3xzuSaZH9sxa06Z7x+HJSduPbdYHv/DgmEhfbehvlmGN7JUkcG78GDM12CeyFFTPNqVeNxC1gzjz+c2nVo63Xxs8rKJWXoBJM0tmEbfGm4qzpoOH3xpzQfyxLzW1gnE9NHo6tol1eMEic4ZVPrjnVi0kqAe2sQ2bgqupScaq8WGlUWgWHI51SKJl/UYT6zccNsCSkBtiVZLsiefuFSDYT3Fi8Zk7EUnmjTRYtsFeuDDJS05MW79M3mr3mla+d8dzac31KTPmBYfFiYSUef48PhPjm9ryZsSGZZkdNvzq0Y9rdNcwDq5Dg5C3QW+7UN64IKptvS3tvHbvu5c9pv1Exau21rc9LIpwpQwUjTq8576yeVDz5+4WZ1nXT43wV60rPLJbDp/UksNrP3iQ2SA63Pst058gOYDbhRnRUw8l/sRt4HbxPzO4WYpInCpuVgSbVh6JXuwnnJngKTTCwaPWmG5Xbhpm1U0Yt3FyBGpGYemPM77p2TD904JjgJ2QFpFLeYpGx8X15Qx1Zk31p5ki9ZLUuXE0lmuJlcakJMVLeFS1iIvrB8drY0aloilakqCZwzwRORtxlgwxS4IThggJd4TDxoiaAIT80fFPGrCPPru+puFn504P/ybr4ihA/6dKASLshEJic7xE8tmzu3KzA7TABBe8y5fNbWo3ilQn/SuFKM16b2l5bOeayqfGhYmhIulU+fVNDdWVv4NMzX10MBHyPR5uhWUu8D9P1VnIMt4nGNgZGBgAOJ/1bf64vltvjJwszOAwAOlmqvINEc/WJyDgQlEAQA+dgnjAHicY2BkYGBnAAGOPgaG//85+hkYGVCBPgBGJwNkAAAAeJxjYGBgYB/EmKMPtxwAhg4B0gAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAe4CLgKKAtAC/ANiA4wDqAPgBDAEsATaBQgFWgXABggGLgZwBqwG9gdOB4oH0ggqCHAIhgicCMgJJAlWCYgJrAnyCkAKdgrkC7J4nGNgZGBg0GdoZmBnAAEmIOYCQgaG/2A+AwAaqwHQAHicXZBNaoNAGIZfE5PQCKFQ2lUps2oXBfOzzAESyDKBQJdGR2NQR3QSSE/QE/QEPUUPUHqsvsrXjTMw83zPvPMNCuAWP3DQDAejdm1GjzwS7pMmwi75XngAD4/CQ/oX4TFe4Qt7uMMbOzjuDc0EmXCP/C7cJ38Iu+RP4QEe8CU8pP8WHmOPX2EPz87TPo202ey2OjlnQSXV/6arOjWFmvszMWtd6CqwOlKHq6ovycLaWMWVydXKFFZnmVFlZU46tP7R2nI5ncbi/dDkfDtFBA2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Yu6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxtkXlT2zAQxf1C4thJAwRajt4HRy8VMwwfSJHXsQZZcnUQ+PYoTtwpM+wf2t9brWZ2n5JBsol58nJcYYAdDDFCijEy5JhgileYYRd72MccBzjEa7zBEY5xglO8xTu8xwd8xCd8xhd8xTec4RwXuMR3/MBP/MJvMPzBFYpk2Cr+OF0fTEgrFI1aHhxN740KDbEmeJpsWZlVj40s+45aLuv9KijlhCXSjLQnu/d/4UH6sWul1mRzFxZeekUuE7z10mg3qMtM1FGQddPSrLQyvJR6OaukItYXDp6pCJrmz0umqkau5pZ2hFmm7m+ImG5W2t0kZoJXUtPhVnYTbbdOBdeCVGqpJe7XKTqSbRK7zbdwXfR0U+SVsStuS3Y76em6+Ic3xYiHUppc04Nn0lMzay3dSxNcp8auDlWlaCi48yetFD7Y9USsx87G45cuop1ZxQUtjLnL4j53FO0a+5X08UXqQ7NQNo92R0XOz7sxWEnxN2TneJI8Acttu4Q=) format("woff");font-weight:400;font-style:normal}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-play-control .vjs-icon-placeholder,.vjs-icon-play{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-play-control .vjs-icon-placeholder:before,.vjs-icon-play:before{content:"\f101"}.vjs-icon-play-circle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-play-circle:before{content:"\f102"}.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder,.vjs-icon-pause{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before,.vjs-icon-pause:before{content:"\f103"}.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder,.vjs-icon-volume-mute{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before,.vjs-icon-volume-mute:before{content:"\f104"}.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder,.vjs-icon-volume-low{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before,.vjs-icon-volume-low:before{content:"\f105"}.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder,.vjs-icon-volume-mid{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before,.vjs-icon-volume-mid:before{content:"\f106"}.video-js .vjs-mute-control .vjs-icon-placeholder,.vjs-icon-volume-high{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control .vjs-icon-placeholder:before,.vjs-icon-volume-high:before{content:"\f107"}.video-js .vjs-fullscreen-control .vjs-icon-placeholder,.vjs-icon-fullscreen-enter{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before,.vjs-icon-fullscreen-enter:before{content:"\f108"}.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder,.vjs-icon-fullscreen-exit{font-family:VideoJS;font-weight:400;font-style:normal}.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before,.vjs-icon-fullscreen-exit:before{content:"\f109"}.vjs-icon-spinner{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-spinner:before{content:"\f10a"}.video-js .vjs-subs-caps-button .vjs-icon-placeholder,.video-js .vjs-subtitles-button .vjs-icon-placeholder,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder,.vjs-icon-subtitles{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js .vjs-subtitles-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before,.vjs-icon-subtitles:before{content:"\f10b"}.video-js .vjs-captions-button .vjs-icon-placeholder,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder,.vjs-icon-captions{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-captions-button .vjs-icon-placeholder:before,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before,.vjs-icon-captions:before{content:"\f10c"}.vjs-icon-hd{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-hd:before{content:"\f10d"}.video-js .vjs-chapters-button .vjs-icon-placeholder,.vjs-icon-chapters{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-chapters-button .vjs-icon-placeholder:before,.vjs-icon-chapters:before{content:"\f10e"}.vjs-icon-downloading{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-downloading:before{content:"\f10f"}.vjs-icon-file-download{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-file-download:before{content:"\f110"}.vjs-icon-file-download-done{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-file-download-done:before{content:"\f111"}.vjs-icon-file-download-off{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-file-download-off:before{content:"\f112"}.vjs-icon-share{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-share:before{content:"\f113"}.vjs-icon-cog{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-cog:before{content:"\f114"}.vjs-icon-square{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-square:before{content:"\f115"}.video-js .vjs-play-progress,.video-js .vjs-volume-level,.vjs-icon-circle,.vjs-seek-to-live-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-progress:before,.video-js .vjs-volume-level:before,.vjs-icon-circle:before,.vjs-seek-to-live-control .vjs-icon-placeholder:before{content:"\f116"}.vjs-icon-circle-outline{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle-outline:before{content:"\f117"}.vjs-icon-circle-inner-circle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle-inner-circle:before{content:"\f118"}.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder,.vjs-icon-cancel{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before,.vjs-icon-cancel:before{content:"\f119"}.vjs-icon-repeat{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-repeat:before{content:"\f11a"}.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder,.vjs-icon-replay{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before,.vjs-icon-replay:before{content:"\f11b"}.video-js .vjs-skip-backward-5 .vjs-icon-placeholder,.vjs-icon-replay-5{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-backward-5 .vjs-icon-placeholder:before,.vjs-icon-replay-5:before{content:"\f11c"}.video-js .vjs-skip-backward-10 .vjs-icon-placeholder,.vjs-icon-replay-10{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-backward-10 .vjs-icon-placeholder:before,.vjs-icon-replay-10:before{content:"\f11d"}.video-js .vjs-skip-backward-30 .vjs-icon-placeholder,.vjs-icon-replay-30{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-backward-30 .vjs-icon-placeholder:before,.vjs-icon-replay-30:before{content:"\f11e"}.video-js .vjs-skip-forward-5 .vjs-icon-placeholder,.vjs-icon-forward-5{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-forward-5 .vjs-icon-placeholder:before,.vjs-icon-forward-5:before{content:"\f11f"}.video-js .vjs-skip-forward-10 .vjs-icon-placeholder,.vjs-icon-forward-10{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-forward-10 .vjs-icon-placeholder:before,.vjs-icon-forward-10:before{content:"\f120"}.video-js .vjs-skip-forward-30 .vjs-icon-placeholder,.vjs-icon-forward-30{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-forward-30 .vjs-icon-placeholder:before,.vjs-icon-forward-30:before{content:"\f121"}.video-js .vjs-audio-button .vjs-icon-placeholder,.vjs-icon-audio{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-audio-button .vjs-icon-placeholder:before,.vjs-icon-audio:before{content:"\f122"}.vjs-icon-next-item{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-next-item:before{content:"\f123"}.vjs-icon-previous-item{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-previous-item:before{content:"\f124"}.vjs-icon-shuffle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-shuffle:before{content:"\f125"}.vjs-icon-cast{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-cast:before{content:"\f126"}.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder,.vjs-icon-picture-in-picture-enter{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before,.vjs-icon-picture-in-picture-enter:before{content:"\f127"}.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder,.vjs-icon-picture-in-picture-exit{font-family:VideoJS;font-weight:400;font-style:normal}.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before,.vjs-icon-picture-in-picture-exit:before{content:"\f128"}.vjs-icon-facebook{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-facebook:before{content:"\f129"}.vjs-icon-linkedin{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-linkedin:before{content:"\f12a"}.vjs-icon-twitter{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-twitter:before{content:"\f12b"}.vjs-icon-tumblr{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-tumblr:before{content:"\f12c"}.vjs-icon-pinterest{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-pinterest:before{content:"\f12d"}.video-js .vjs-descriptions-button .vjs-icon-placeholder,.vjs-icon-audio-description{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-descriptions-button .vjs-icon-placeholder:before,.vjs-icon-audio-description:before{content:"\f12e"}.video-js{display:inline-block;vertical-align:top;box-sizing:border-box;color:#fff;background-color:#000;position:relative;padding:0;font-size:10px;line-height:1;font-weight:400;font-style:normal;font-family:Arial,Helvetica,sans-serif;word-break:initial}.video-js:-moz-full-screen{position:absolute}.video-js:-webkit-full-screen{width:100%!important;height:100%!important}.video-js[tabindex="-1"]{outline:0}.video-js *,.video-js :after,.video-js :before{box-sizing:inherit}.video-js ul{font-family:inherit;font-size:inherit;line-height:inherit;list-style-position:outside;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.video-js.vjs-1-1,.video-js.vjs-16-9,.video-js.vjs-4-3,.video-js.vjs-9-16,.video-js.vjs-fluid{width:100%;max-width:100%}.video-js.vjs-1-1:not(.vjs-audio-only-mode),.video-js.vjs-16-9:not(.vjs-audio-only-mode),.video-js.vjs-4-3:not(.vjs-audio-only-mode),.video-js.vjs-9-16:not(.vjs-audio-only-mode),.video-js.vjs-fluid:not(.vjs-audio-only-mode){height:0}.video-js.vjs-16-9:not(.vjs-audio-only-mode){padding-top:56.25%}.video-js.vjs-4-3:not(.vjs-audio-only-mode){padding-top:75%}.video-js.vjs-9-16:not(.vjs-audio-only-mode){padding-top:177.7777777778%}.video-js.vjs-1-1:not(.vjs-audio-only-mode){padding-top:100%}.video-js.vjs-fill:not(.vjs-audio-only-mode){width:100%;height:100%}.video-js .vjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.video-js.vjs-audio-only-mode .vjs-tech{display:none}body.vjs-full-window,body.vjs-pip-window{padding:0;margin:0;height:100%}.vjs-full-window .video-js.vjs-fullscreen,body.vjs-pip-window .video-js{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0}.video-js.vjs-fullscreen:not(.vjs-ios-native-fs),body.vjs-pip-window .video-js{width:100%!important;height:100%!important;padding-top:0!important;display:block}.video-js.vjs-fullscreen.vjs-user-inactive{cursor:none}.vjs-pip-container .vjs-pip-text{position:absolute;bottom:10%;font-size:2em;background-color:rgba(0,0,0,.7);padding:.5em;text-align:center;width:100%}.vjs-layout-small.vjs-pip-container .vjs-pip-text,.vjs-layout-tiny.vjs-pip-container .vjs-pip-text,.vjs-layout-x-small.vjs-pip-container .vjs-pip-text{bottom:0;font-size:1.4em}.vjs-hidden{display:none!important}.vjs-disabled{opacity:.5;cursor:default}.video-js .vjs-offscreen{height:1px;left:-9999px;position:absolute;top:0;width:1px}.vjs-lock-showing{display:block!important;opacity:1!important;visibility:visible!important}.vjs-no-js{padding:20px;color:#fff;background-color:#000;font-size:18px;font-family:Arial,Helvetica,sans-serif;text-align:center;width:300px;height:150px;margin:0 auto}.vjs-no-js a,.vjs-no-js a:visited{color:#66a8cc}.video-js .vjs-big-play-button{font-size:3em;line-height:1.5em;height:1.63332em;width:3em;display:block;position:absolute;top:50%;left:50%;padding:0;margin-top:-.81666em;margin-left:-1.5em;cursor:pointer;opacity:1;border:.06666em solid #fff;background-color:#2b333f;background-color:rgba(43,51,63,.7);border-radius:.3em;transition:all .4s}.vjs-big-play-button .vjs-svg-icon{width:1em;height:1em;position:absolute;top:50%;left:50%;line-height:1;transform:translate(-50%,-50%)}.video-js .vjs-big-play-button:focus,.video-js:hover .vjs-big-play-button{border-color:#fff;background-color:#73859f;background-color:rgba(115,133,159,.5);transition:all 0s}.vjs-controls-disabled .vjs-big-play-button,.vjs-error .vjs-big-play-button,.vjs-has-started .vjs-big-play-button,.vjs-using-native-controls .vjs-big-play-button{display:none}.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking,.vjs-scrubbing,.vjs-error) .vjs-big-play-button{display:block}.video-js button{background:0 0;border:none;color:inherit;display:inline-block;font-size:inherit;line-height:inherit;text-transform:none;text-decoration:none;transition:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vjs-control .vjs-button{width:100%;height:100%}.video-js .vjs-control.vjs-close-button{cursor:pointer;height:3em;position:absolute;right:0;top:.5em;z-index:2}.video-js .vjs-modal-dialog{background:rgba(0,0,0,.8);background:linear-gradient(180deg,rgba(0,0,0,.8),rgba(255,255,255,0));overflow:auto}.video-js .vjs-modal-dialog>*{box-sizing:border-box}.vjs-modal-dialog .vjs-modal-dialog-content{font-size:1.2em;line-height:1.5;padding:20px 24px;z-index:1}.vjs-menu-button{cursor:pointer}.vjs-menu-button.vjs-disabled{cursor:default}.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu{display:none}.vjs-menu .vjs-menu-content{display:block;padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;overflow:auto}.vjs-menu .vjs-menu-content>*{box-sizing:border-box}.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu{display:none}.vjs-menu li{display:flex;justify-content:center;list-style:none;margin:0;padding:.2em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.js-focus-visible .vjs-menu li.vjs-menu-item:hover,.vjs-menu li.vjs-menu-item:focus,.vjs-menu li.vjs-menu-item:hover{background-color:#73859f;background-color:rgba(115,133,159,.5)}.js-focus-visible .vjs-menu li.vjs-selected:hover,.vjs-menu li.vjs-selected,.vjs-menu li.vjs-selected:focus,.vjs-menu li.vjs-selected:hover{background-color:#fff;color:#2b333f}.js-focus-visible .vjs-menu li.vjs-selected:hover .vjs-svg-icon,.vjs-menu li.vjs-selected .vjs-svg-icon,.vjs-menu li.vjs-selected:focus .vjs-svg-icon,.vjs-menu li.vjs-selected:hover .vjs-svg-icon{fill:#000}.js-focus-visible .vjs-menu :not(.vjs-selected):focus:not(.focus-visible),.video-js .vjs-menu :not(.vjs-selected):focus:not(:focus-visible){background:0 0}.vjs-menu li.vjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em 0;font-weight:700;cursor:default}.vjs-menu-button-popup .vjs-menu{display:none;position:absolute;bottom:0;width:10em;left:-3em;height:0;margin-bottom:1.5em;border-top-color:rgba(43,51,63,.7)}.vjs-pip-window .vjs-menu-button-popup .vjs-menu{left:unset;right:1em}.vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:#2b333f;background-color:rgba(43,51,63,.7);position:absolute;width:100%;bottom:1.5em;max-height:15em}.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:5em}.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:10em}.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:14em}.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:25em}.vjs-menu-button-popup .vjs-menu.vjs-lock-showing,.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu{display:block}.video-js .vjs-menu-button-inline{transition:all .4s;overflow:hidden}.video-js .vjs-menu-button-inline:before{width:2.222222222em}.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline:hover{width:12em}.vjs-menu-button-inline .vjs-menu{opacity:0;height:100%;width:auto;position:absolute;left:4em;top:0;padding:0;margin:0;transition:all .4s}.vjs-menu-button-inline.vjs-slider-active .vjs-menu,.vjs-menu-button-inline:focus .vjs-menu,.vjs-menu-button-inline:hover .vjs-menu{display:block;opacity:1}.vjs-menu-button-inline .vjs-menu-content{width:auto;height:100%;margin:0;overflow:hidden}.video-js .vjs-control-bar{display:none;width:100%;position:absolute;bottom:0;left:0;right:0;height:3em;background-color:#2b333f;background-color:rgba(43,51,63,.7)}.video-js:not(.vjs-controls-disabled,.vjs-using-native-controls,.vjs-error) .vjs-control-bar.vjs-lock-showing{display:flex!important}.vjs-audio-only-mode .vjs-control-bar,.vjs-has-started .vjs-control-bar{display:flex;visibility:visible;opacity:1;transition:visibility .1s,opacity .1s}.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{visibility:visible;opacity:0;pointer-events:none;transition:visibility 1s,opacity 1s}.vjs-controls-disabled .vjs-control-bar,.vjs-error .vjs-control-bar,.vjs-using-native-controls .vjs-control-bar{display:none!important}.vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{opacity:1;visibility:visible;pointer-events:auto}.video-js .vjs-control{position:relative;text-align:center;margin:0;padding:0;height:100%;width:4em;flex:none}.video-js .vjs-control.vjs-visible-text{width:auto;padding-left:1em;padding-right:1em}.vjs-button>.vjs-icon-placeholder:before{font-size:1.8em;line-height:1.67}.vjs-button>.vjs-icon-placeholder{display:block}.vjs-button>.vjs-svg-icon{display:inline-block}.video-js .vjs-control:focus,.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before{text-shadow:0 0 1em #fff}.video-js :not(.vjs-visible-text)>.vjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.video-js .vjs-custom-control-spacer{display:none}.video-js .vjs-progress-control{cursor:pointer;flex:auto;display:flex;align-items:center;min-width:4em;touch-action:none}.video-js .vjs-progress-control.disabled{cursor:default}.vjs-live .vjs-progress-control{display:none}.vjs-liveui .vjs-progress-control{display:flex;align-items:center}.video-js .vjs-progress-holder{flex:auto;transition:all .2s;height:.3em}.video-js .vjs-progress-control .vjs-progress-holder{margin:0 10px}.video-js .vjs-progress-control:hover .vjs-progress-holder{font-size:1.6666666667em}.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled{font-size:1em}.video-js .vjs-progress-holder .vjs-load-progress,.video-js .vjs-progress-holder .vjs-load-progress div,.video-js .vjs-progress-holder .vjs-play-progress{position:absolute;display:block;height:100%;margin:0;padding:0;width:0}.video-js .vjs-play-progress{background-color:#fff}.video-js .vjs-play-progress:before{font-size:.9em;position:absolute;right:-.5em;line-height:.35em;z-index:1}.vjs-svg-icons-enabled .vjs-play-progress:before{content:none!important}.vjs-play-progress .vjs-svg-icon{position:absolute;top:-.35em;right:-.4em;width:.9em;height:.9em;pointer-events:none;line-height:.15em;z-index:1}.video-js .vjs-load-progress{background:rgba(115,133,159,.5)}.video-js .vjs-load-progress div{background:rgba(115,133,159,.75)}.video-js .vjs-time-tooltip{background-color:#fff;background-color:rgba(255,255,255,.8);border-radius:.3em;color:#000;float:right;font-family:Arial,Helvetica,sans-serif;font-size:1em;padding:6px 8px 8px 8px;pointer-events:none;position:absolute;top:-3.4em;visibility:hidden;z-index:1}.video-js .vjs-progress-holder:focus .vjs-time-tooltip{display:none}.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-time-tooltip{display:block;font-size:.6em;visibility:visible}.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip{font-size:1em}.video-js .vjs-progress-control .vjs-mouse-display{display:none;position:absolute;width:1px;height:100%;background-color:#000;z-index:1}.video-js .vjs-progress-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display{visibility:hidden;opacity:0;transition:visibility 1s,opacity 1s}.vjs-mouse-display .vjs-time-tooltip{color:#fff;background-color:#000;background-color:rgba(0,0,0,.8)}.video-js .vjs-slider{position:relative;cursor:pointer;padding:0;margin:0 .45em 0 .45em;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:#73859f;background-color:rgba(115,133,159,.5)}.video-js .vjs-slider.disabled{cursor:default}.video-js .vjs-slider:focus{text-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.video-js .vjs-mute-control{cursor:pointer;flex:none}.video-js .vjs-volume-control{cursor:pointer;margin-right:1em;display:flex}.video-js .vjs-volume-control.vjs-volume-horizontal{width:5em}.video-js .vjs-volume-panel .vjs-volume-control{visibility:visible;opacity:0;width:1px;height:1px;margin-left:-1px}.video-js .vjs-volume-panel{transition:width 1s}.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active,.video-js .vjs-volume-panel .vjs-volume-control:active,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control,.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control,.video-js .vjs-volume-panel:active .vjs-volume-control,.video-js .vjs-volume-panel:focus .vjs-volume-control{visibility:visible;opacity:1;position:relative;transition:visibility .1s,opacity .1s,height .1s,width .1s,left 0s,top 0s}.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal{width:5em;height:3em;margin-right:0}.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical{left:-3.5em;transition:left 0s}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active{width:10em;transition:width .1s}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only{width:4em}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical{height:8em;width:3em;left:-3000em;transition:visibility 1s,opacity 1s,height 1s 1s,width 1s 1s,left 1s 1s,top 1s 1s}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{transition:visibility 1s,opacity 1s,height 1s 1s,width 1s,left 1s 1s,top 1s 1s}.video-js .vjs-volume-panel{display:flex}.video-js .vjs-volume-bar{margin:1.35em .45em}.vjs-volume-bar.vjs-slider-horizontal{width:5em;height:.3em}.vjs-volume-bar.vjs-slider-vertical{width:.3em;height:5em;margin:1.35em auto}.video-js .vjs-volume-level{position:absolute;bottom:0;left:0;background-color:#fff}.video-js .vjs-volume-level:before{position:absolute;font-size:.9em;z-index:1}.vjs-slider-vertical .vjs-volume-level{width:.3em}.vjs-slider-vertical .vjs-volume-level:before{top:-.5em;left:-.3em;z-index:1}.vjs-svg-icons-enabled .vjs-volume-level:before{content:none}.vjs-volume-level .vjs-svg-icon{position:absolute;width:.9em;height:.9em;pointer-events:none;z-index:1}.vjs-slider-horizontal .vjs-volume-level{height:.3em}.vjs-slider-horizontal .vjs-volume-level:before{line-height:.35em;right:-.5em}.vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon{right:-.3em;transform:translateY(-50%)}.vjs-slider-vertical .vjs-volume-level .vjs-svg-icon{top:-.55em;transform:translateX(-50%)}.video-js .vjs-volume-panel.vjs-volume-panel-vertical{width:4em}.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level{height:100%}.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level{width:100%}.video-js .vjs-volume-vertical{width:3em;height:8em;bottom:8em;background-color:#2b333f;background-color:rgba(43,51,63,.7)}.video-js .vjs-volume-horizontal .vjs-menu{left:-2em}.video-js .vjs-volume-tooltip{background-color:#fff;background-color:rgba(255,255,255,.8);border-radius:.3em;color:#000;float:right;font-family:Arial,Helvetica,sans-serif;font-size:1em;padding:6px 8px 8px 8px;pointer-events:none;position:absolute;top:-3.4em;visibility:hidden;z-index:1}.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip,.video-js .vjs-volume-control:hover .vjs-volume-tooltip{display:block;font-size:1em;visibility:visible}.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip,.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip{left:1em;top:-12px}.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip{font-size:1em}.video-js .vjs-volume-control .vjs-mouse-display{display:none;position:absolute;width:100%;height:1px;background-color:#000;z-index:1}.video-js .vjs-volume-horizontal .vjs-mouse-display{width:1px;height:100%}.video-js .vjs-volume-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display{visibility:hidden;opacity:0;transition:visibility 1s,opacity 1s}.vjs-mouse-display .vjs-volume-tooltip{color:#fff;background-color:#000;background-color:rgba(0,0,0,.8)}.vjs-poster{display:inline-block;vertical-align:middle;cursor:pointer;margin:0;padding:0;position:absolute;top:0;right:0;bottom:0;left:0;height:100%}.vjs-has-started .vjs-poster,.vjs-using-native-controls .vjs-poster{display:none}.vjs-audio.vjs-has-started .vjs-poster,.vjs-has-started.vjs-audio-poster-mode .vjs-poster,.vjs-pip-container.vjs-has-started .vjs-poster{display:block}.vjs-poster img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.video-js .vjs-live-control{display:flex;align-items:flex-start;flex:auto;font-size:1em;line-height:3em}.video-js.vjs-liveui .vjs-live-control,.video-js:not(.vjs-live) .vjs-live-control{display:none}.video-js .vjs-seek-to-live-control{align-items:center;cursor:pointer;flex:none;display:inline-flex;height:100%;padding-left:.5em;padding-right:.5em;font-size:1em;line-height:3em;width:auto;min-width:4em}.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,.video-js:not(.vjs-live) .vjs-seek-to-live-control{display:none}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{cursor:auto}.vjs-seek-to-live-control .vjs-icon-placeholder{margin-right:.5em;color:#888}.vjs-svg-icons-enabled .vjs-seek-to-live-control{line-height:0}.vjs-seek-to-live-control .vjs-svg-icon{width:1em;height:1em;pointer-events:none;fill:#888}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder{color:red}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-svg-icon{fill:red}.video-js .vjs-time-control{flex:none;font-size:1em;line-height:3em;min-width:2em;width:auto;padding-left:1em;padding-right:1em}.video-js .vjs-current-time,.video-js .vjs-duration,.vjs-live .vjs-time-control,.vjs-live .vjs-time-divider{display:none}.vjs-time-divider{display:none;line-height:3em}.video-js .vjs-play-control{cursor:pointer}.video-js .vjs-play-control .vjs-icon-placeholder{flex:none}.vjs-text-track-display{position:absolute;bottom:3em;left:0;right:0;top:0;pointer-events:none}.vjs-error .vjs-text-track-display{display:none}.video-js.vjs-controls-disabled .vjs-text-track-display,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:1em}.video-js .vjs-text-track{font-size:1.4em;text-align:center;margin-bottom:.1em}.vjs-subtitles{color:#fff}.vjs-captions{color:#fc6}.vjs-tt-cue{display:block}video::-webkit-media-text-track-display{transform:translateY(-3em)}.video-js.vjs-controls-disabled video::-webkit-media-text-track-display,.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display{transform:translateY(-1.5em)}.video-js.vjs-force-center-align-cues .vjs-text-track-cue{text-align:center!important;width:80%!important}.video-js .vjs-picture-in-picture-control{cursor:pointer;flex:none}.video-js.vjs-audio-only-mode .vjs-picture-in-picture-control,.vjs-pip-window .vjs-picture-in-picture-control{display:none}.video-js .vjs-fullscreen-control{cursor:pointer;flex:none}.video-js.vjs-audio-only-mode .vjs-fullscreen-control,.vjs-pip-window .vjs-fullscreen-control{display:none}.vjs-playback-rate .vjs-playback-rate-value,.vjs-playback-rate>.vjs-menu-button{position:absolute;top:0;left:0;width:100%;height:100%}.vjs-playback-rate .vjs-playback-rate-value{pointer-events:none;font-size:1.5em;line-height:2;text-align:center}.vjs-playback-rate .vjs-menu{width:4em;left:0}.vjs-error .vjs-error-display .vjs-modal-dialog-content{font-size:1.4em;text-align:center}.vjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.85;text-align:left;border:.6em solid rgba(43,51,63,.7);box-sizing:border-box;background-clip:padding-box;width:5em;height:5em;border-radius:50%;visibility:hidden}.vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner{display:flex;justify-content:center;align-items:center;animation:vjs-spinner-show 0s linear .3s forwards}.vjs-error .vjs-loading-spinner{display:none}.vjs-loading-spinner:after,.vjs-loading-spinner:before{content:"";position:absolute;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:1;border:inherit;border-color:transparent;border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:after,.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:before{animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite}.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:before{border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:after{border-top-color:#fff;animation-delay:.44s}@keyframes vjs-spinner-show{to{visibility:visible}}@keyframes vjs-spinner-spin{100%{transform:rotate(360deg)}}@keyframes vjs-spinner-fade{0%{border-top-color:#73859f}20%{border-top-color:#73859f}35%{border-top-color:#fff}60%{border-top-color:#73859f}100%{border-top-color:#73859f}}.video-js.vjs-audio-only-mode .vjs-captions-button{display:none}.vjs-chapters-button .vjs-menu ul{width:24em}.video-js.vjs-audio-only-mode .vjs-descriptions-button{display:none}.vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-svg-icon{width:1.5em;height:1.5em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder{vertical-align:middle;display:inline-block;margin-bottom:-.1em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{font-family:VideoJS;content:"\f10c";font-size:1.5em;line-height:inherit}.video-js.vjs-audio-only-mode .vjs-subs-caps-button{display:none}.video-js .vjs-audio-button+.vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder,.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder{vertical-align:middle;display:inline-block;margin-bottom:-.1em}.video-js .vjs-audio-button+.vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before,.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{font-family:VideoJS;content:" \f12e";font-size:1.5em;line-height:inherit}.video-js.vjs-layout-small .vjs-current-time,.video-js.vjs-layout-small .vjs-duration,.video-js.vjs-layout-small .vjs-playback-rate,.video-js.vjs-layout-small .vjs-remaining-time,.video-js.vjs-layout-small .vjs-time-divider,.video-js.vjs-layout-small .vjs-volume-control,.video-js.vjs-layout-tiny .vjs-current-time,.video-js.vjs-layout-tiny .vjs-duration,.video-js.vjs-layout-tiny .vjs-playback-rate,.video-js.vjs-layout-tiny .vjs-remaining-time,.video-js.vjs-layout-tiny .vjs-time-divider,.video-js.vjs-layout-tiny .vjs-volume-control,.video-js.vjs-layout-x-small .vjs-current-time,.video-js.vjs-layout-x-small .vjs-duration,.video-js.vjs-layout-x-small .vjs-playback-rate,.video-js.vjs-layout-x-small .vjs-remaining-time,.video-js.vjs-layout-x-small .vjs-time-divider,.video-js.vjs-layout-x-small .vjs-volume-control{display:none}.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover{width:auto;width:initial}.video-js.vjs-layout-tiny .vjs-progress-control,.video-js.vjs-layout-x-small .vjs-progress-control{display:none}.video-js.vjs-layout-x-small .vjs-custom-control-spacer{flex:auto;display:block}.vjs-modal-dialog.vjs-text-track-settings{background-color:#2b333f;background-color:rgba(43,51,63,.75);color:#fff;height:70%}.vjs-error .vjs-text-track-settings{display:none}.vjs-text-track-settings .vjs-modal-dialog-content{display:table}.vjs-text-track-settings .vjs-track-settings-colors,.vjs-text-track-settings .vjs-track-settings-controls,.vjs-text-track-settings .vjs-track-settings-font{display:table-cell}.vjs-text-track-settings .vjs-track-settings-controls{text-align:right;vertical-align:bottom}@supports (display:grid){.vjs-text-track-settings .vjs-modal-dialog-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;padding:20px 24px 0 24px}.vjs-track-settings-controls .vjs-default-button{margin-bottom:20px}.vjs-text-track-settings .vjs-track-settings-controls{grid-column:1/-1}.vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content{grid-template-columns:1fr}}.vjs-text-track-settings select{font-size:inherit}.vjs-track-setting>select{margin-right:1em;margin-bottom:.5em}.vjs-text-track-settings fieldset{margin:10px;border:none}.vjs-text-track-settings fieldset span{display:inline-block;padding:0 .6em .8em}.vjs-text-track-settings fieldset span>select{max-width:7.3em}.vjs-text-track-settings legend{color:#fff;font-weight:700;font-size:1.2em}.vjs-text-track-settings .vjs-label{margin:0 .5em .5em 0}.vjs-track-settings-controls button:active,.vjs-track-settings-controls button:focus{outline-style:solid;outline-width:medium;background-image:linear-gradient(0deg,#fff 88%,#73859f 100%)}.vjs-track-settings-controls button:hover{color:rgba(43,51,63,.75)}.vjs-track-settings-controls button{background-color:#fff;background-image:linear-gradient(-180deg,#fff 88%,#73859f 100%);color:#2b333f;cursor:pointer;border-radius:2px}.vjs-track-settings-controls .vjs-default-button{margin-right:1em}.vjs-title-bar{background:rgba(0,0,0,.9);background:linear-gradient(180deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.7) 60%,rgba(0,0,0,0) 100%);font-size:1.2em;line-height:1.5;transition:opacity .1s;padding:.666em 1.333em 4em;pointer-events:none;position:absolute;top:0;width:100%}.vjs-error .vjs-title-bar{display:none}.vjs-title-bar-description,.vjs-title-bar-title{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vjs-title-bar-title{font-weight:700;margin-bottom:.333em}.vjs-playing.vjs-user-inactive .vjs-title-bar{opacity:0;transition:opacity 1s}.video-js .vjs-skip-forward-5{cursor:pointer}.video-js .vjs-skip-forward-10{cursor:pointer}.video-js .vjs-skip-forward-30{cursor:pointer}.video-js .vjs-skip-backward-5{cursor:pointer}.video-js .vjs-skip-backward-10{cursor:pointer}.video-js .vjs-skip-backward-30{cursor:pointer}@media print{.video-js>:not(.vjs-tech):not(.vjs-poster){visibility:hidden}}.vjs-resize-manager{position:absolute;top:0;left:0;width:100%;height:100%;border:none;z-index:-1000}.js-focus-visible .video-js :focus:not(.focus-visible){outline:0}.video-js :focus:not(:focus-visible){outline:0}
\ No newline at end of file
diff --git a/priv/static/video.js/video.cjs.js b/priv/static/video.js/video.cjs.js
new file mode 100644
index 0000000..f923baf
--- /dev/null
+++ b/priv/static/video.js/video.cjs.js
@@ -0,0 +1,52520 @@
+/**
+ * @license
+ * Video.js 8.12.0 <http://videojs.com/>
+ * Copyright Brightcove, Inc. <https://www.brightcove.com/>
+ * Available under Apache License Version 2.0
+ * <https://github.com/videojs/video.js/blob/main/LICENSE>
+ *
+ * Includes vtt.js <https://github.com/mozilla/vtt.js>
+ * Available under Apache License Version 2.0
+ * <https://github.com/mozilla/vtt.js/blob/main/LICENSE>
+ */
+
+'use strict';
+
+var window$1 = require('global/window');
+var document = require('global/document');
+var keycode = require('keycode');
+var safeParseTuple = require('safe-json-parse/tuple');
+var XHR = require('@videojs/xhr');
+var vtt = require('videojs-vtt.js');
+var _extends = require('@babel/runtime/helpers/extends');
+var _resolveUrl = require('@videojs/vhs-utils/cjs/resolve-url.js');
+var m3u8Parser = require('m3u8-parser');
+var codecs_js = require('@videojs/vhs-utils/cjs/codecs.js');
+var mediaTypes_js = require('@videojs/vhs-utils/cjs/media-types.js');
+var byteHelpers = require('@videojs/vhs-utils/cjs/byte-helpers');
+var mpdParser = require('mpd-parser');
+var parseSidx = require('mux.js/lib/tools/parse-sidx');
+var id3Helpers = require('@videojs/vhs-utils/cjs/id3-helpers');
+var containers = require('@videojs/vhs-utils/cjs/containers');
+var clock = require('mux.js/lib/utils/clock');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var window__default = /*#__PURE__*/_interopDefaultLegacy(window$1);
+var document__default = /*#__PURE__*/_interopDefaultLegacy(document);
+var keycode__default = /*#__PURE__*/_interopDefaultLegacy(keycode);
+var safeParseTuple__default = /*#__PURE__*/_interopDefaultLegacy(safeParseTuple);
+var XHR__default = /*#__PURE__*/_interopDefaultLegacy(XHR);
+var vtt__default = /*#__PURE__*/_interopDefaultLegacy(vtt);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _resolveUrl__default = /*#__PURE__*/_interopDefaultLegacy(_resolveUrl);
+var parseSidx__default = /*#__PURE__*/_interopDefaultLegacy(parseSidx);
+
+var version$6 = "8.12.0";
+
+/**
+ * An Object that contains lifecycle hooks as keys which point to an array
+ * of functions that are run when a lifecycle is triggered
+ *
+ * @private
+ */
+const hooks_ = {};
+
+/**
+ * Get a list of hooks for a specific lifecycle
+ *
+ * @param  {string} type
+ *         the lifecycle to get hooks from
+ *
+ * @param  {Function|Function[]} [fn]
+ *         Optionally add a hook (or hooks) to the lifecycle that your are getting.
+ *
+ * @return {Array}
+ *         an array of hooks, or an empty array if there are none.
+ */
+const hooks = function (type, fn) {
+  hooks_[type] = hooks_[type] || [];
+  if (fn) {
+    hooks_[type] = hooks_[type].concat(fn);
+  }
+  return hooks_[type];
+};
+
+/**
+ * Add a function hook to a specific videojs lifecycle.
+ *
+ * @param {string} type
+ *        the lifecycle to hook the function to.
+ *
+ * @param {Function|Function[]}
+ *        The function or array of functions to attach.
+ */
+const hook = function (type, fn) {
+  hooks(type, fn);
+};
+
+/**
+ * Remove a hook from a specific videojs lifecycle.
+ *
+ * @param  {string} type
+ *         the lifecycle that the function hooked to
+ *
+ * @param  {Function} fn
+ *         The hooked function to remove
+ *
+ * @return {boolean}
+ *         The function that was removed or undef
+ */
+const removeHook = function (type, fn) {
+  const index = hooks(type).indexOf(fn);
+  if (index <= -1) {
+    return false;
+  }
+  hooks_[type] = hooks_[type].slice();
+  hooks_[type].splice(index, 1);
+  return true;
+};
+
+/**
+ * Add a function hook that will only run once to a specific videojs lifecycle.
+ *
+ * @param {string} type
+ *        the lifecycle to hook the function to.
+ *
+ * @param {Function|Function[]}
+ *        The function or array of functions to attach.
+ */
+const hookOnce = function (type, fn) {
+  hooks(type, [].concat(fn).map(original => {
+    const wrapper = (...args) => {
+      removeHook(type, wrapper);
+      return original(...args);
+    };
+    return wrapper;
+  }));
+};
+
+/**
+ * @file fullscreen-api.js
+ * @module fullscreen-api
+ */
+
+/**
+ * Store the browser-specific methods for the fullscreen API.
+ *
+ * @type {Object}
+ * @see [Specification]{@link https://fullscreen.spec.whatwg.org}
+ * @see [Map Approach From Screenfull.js]{@link https://github.com/sindresorhus/screenfull.js}
+ */
+const FullscreenApi = {
+  prefixed: true
+};
+
+// browser API methods
+const apiMap = [['requestFullscreen', 'exitFullscreen', 'fullscreenElement', 'fullscreenEnabled', 'fullscreenchange', 'fullscreenerror', 'fullscreen'],
+// WebKit
+['webkitRequestFullscreen', 'webkitExitFullscreen', 'webkitFullscreenElement', 'webkitFullscreenEnabled', 'webkitfullscreenchange', 'webkitfullscreenerror', '-webkit-full-screen']];
+const specApi = apiMap[0];
+let browserApi;
+
+// determine the supported set of functions
+for (let i = 0; i < apiMap.length; i++) {
+  // check for exitFullscreen function
+  if (apiMap[i][1] in document__default["default"]) {
+    browserApi = apiMap[i];
+    break;
+  }
+}
+
+// map the browser API names to the spec API names
+if (browserApi) {
+  for (let i = 0; i < browserApi.length; i++) {
+    FullscreenApi[specApi[i]] = browserApi[i];
+  }
+  FullscreenApi.prefixed = browserApi[0] !== specApi[0];
+}
+
+/**
+ * @file create-logger.js
+ * @module create-logger
+ */
+
+// This is the private tracking variable for the logging history.
+let history = [];
+
+/**
+ * Log messages to the console and history based on the type of message
+ *
+ * @private
+ * @param  {string} name
+ *         The name of the console method to use.
+ *
+ * @param  {Object} log
+ *         The arguments to be passed to the matching console method.
+ *
+ * @param {string} [styles]
+ *        styles for name
+ */
+const LogByTypeFactory = (name, log, styles) => (type, level, args) => {
+  const lvl = log.levels[level];
+  const lvlRegExp = new RegExp(`^(${lvl})$`);
+  let resultName = name;
+  if (type !== 'log') {
+    // Add the type to the front of the message when it's not "log".
+    args.unshift(type.toUpperCase() + ':');
+  }
+  if (styles) {
+    resultName = `%c${name}`;
+    args.unshift(styles);
+  }
+
+  // Add console prefix after adding to history.
+  args.unshift(resultName + ':');
+
+  // Add a clone of the args at this point to history.
+  if (history) {
+    history.push([].concat(args));
+
+    // only store 1000 history entries
+    const splice = history.length - 1000;
+    history.splice(0, splice > 0 ? splice : 0);
+  }
+
+  // If there's no console then don't try to output messages, but they will
+  // still be stored in history.
+  if (!window__default["default"].console) {
+    return;
+  }
+
+  // Was setting these once outside of this function, but containing them
+  // in the function makes it easier to test cases where console doesn't exist
+  // when the module is executed.
+  let fn = window__default["default"].console[type];
+  if (!fn && type === 'debug') {
+    // Certain browsers don't have support for console.debug. For those, we
+    // should default to the closest comparable log.
+    fn = window__default["default"].console.info || window__default["default"].console.log;
+  }
+
+  // Bail out if there's no console or if this type is not allowed by the
+  // current logging level.
+  if (!fn || !lvl || !lvlRegExp.test(type)) {
+    return;
+  }
+  fn[Array.isArray(args) ? 'apply' : 'call'](window__default["default"].console, args);
+};
+function createLogger$1(name, delimiter = ':', styles = '') {
+  // This is the private tracking variable for logging level.
+  let level = 'info';
+
+  // the curried logByType bound to the specific log and history
+  let logByType;
+
+  /**
+   * Logs plain debug messages. Similar to `console.log`.
+   *
+   * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+   * of our JSDoc template, we cannot properly document this as both a function
+   * and a namespace, so its function signature is documented here.
+   *
+   * #### Arguments
+   * ##### *args
+   * *[]
+   *
+   * Any combination of values that could be passed to `console.log()`.
+   *
+   * #### Return Value
+   *
+   * `undefined`
+   *
+   * @namespace
+   * @param    {...*} args
+   *           One or more messages or objects that should be logged.
+   */
+  const log = function (...args) {
+    logByType('log', level, args);
+  };
+
+  // This is the logByType helper that the logging methods below use
+  logByType = LogByTypeFactory(name, log, styles);
+
+  /**
+   * Create a new subLogger which chains the old name to the new name.
+   *
+   * For example, doing `videojs.log.createLogger('player')` and then using that logger will log the following:
+   * ```js
+   *  mylogger('foo');
+   *  // > VIDEOJS: player: foo
+   * ```
+   *
+   * @param {string} subName
+   *        The name to add call the new logger
+   * @param {string} [subDelimiter]
+   *        Optional delimiter
+   * @param {string} [subStyles]
+   *        Optional styles
+   * @return {Object}
+   */
+  log.createLogger = (subName, subDelimiter, subStyles) => {
+    const resultDelimiter = subDelimiter !== undefined ? subDelimiter : delimiter;
+    const resultStyles = subStyles !== undefined ? subStyles : styles;
+    const resultName = `${name} ${resultDelimiter} ${subName}`;
+    return createLogger$1(resultName, resultDelimiter, resultStyles);
+  };
+
+  /**
+   * Create a new logger.
+   *
+   * @param {string} newName
+   *        The name for the new logger
+   * @param {string} [newDelimiter]
+   *        Optional delimiter
+   * @param {string} [newStyles]
+   *        Optional styles
+   * @return {Object}
+   */
+  log.createNewLogger = (newName, newDelimiter, newStyles) => {
+    return createLogger$1(newName, newDelimiter, newStyles);
+  };
+
+  /**
+   * Enumeration of available logging levels, where the keys are the level names
+   * and the values are `|`-separated strings containing logging methods allowed
+   * in that logging level. These strings are used to create a regular expression
+   * matching the function name being called.
+   *
+   * Levels provided by Video.js are:
+   *
+   * - `off`: Matches no calls. Any value that can be cast to `false` will have
+   *   this effect. The most restrictive.
+   * - `all`: Matches only Video.js-provided functions (`debug`, `log`,
+   *   `log.warn`, and `log.error`).
+   * - `debug`: Matches `log.debug`, `log`, `log.warn`, and `log.error` calls.
+   * - `info` (default): Matches `log`, `log.warn`, and `log.error` calls.
+   * - `warn`: Matches `log.warn` and `log.error` calls.
+   * - `error`: Matches only `log.error` calls.
+   *
+   * @type {Object}
+   */
+  log.levels = {
+    all: 'debug|log|warn|error',
+    off: '',
+    debug: 'debug|log|warn|error',
+    info: 'log|warn|error',
+    warn: 'warn|error',
+    error: 'error',
+    DEFAULT: level
+  };
+
+  /**
+   * Get or set the current logging level.
+   *
+   * If a string matching a key from {@link module:log.levels} is provided, acts
+   * as a setter.
+   *
+   * @param  {'all'|'debug'|'info'|'warn'|'error'|'off'} [lvl]
+   *         Pass a valid level to set a new logging level.
+   *
+   * @return {string}
+   *         The current logging level.
+   */
+  log.level = lvl => {
+    if (typeof lvl === 'string') {
+      if (!log.levels.hasOwnProperty(lvl)) {
+        throw new Error(`"${lvl}" in not a valid log level`);
+      }
+      level = lvl;
+    }
+    return level;
+  };
+
+  /**
+   * Returns an array containing everything that has been logged to the history.
+   *
+   * This array is a shallow clone of the internal history record. However, its
+   * contents are _not_ cloned; so, mutating objects inside this array will
+   * mutate them in history.
+   *
+   * @return {Array}
+   */
+  log.history = () => history ? [].concat(history) : [];
+
+  /**
+   * Allows you to filter the history by the given logger name
+   *
+   * @param {string} fname
+   *        The name to filter by
+   *
+   * @return {Array}
+   *         The filtered list to return
+   */
+  log.history.filter = fname => {
+    return (history || []).filter(historyItem => {
+      // if the first item in each historyItem includes `fname`, then it's a match
+      return new RegExp(`.*${fname}.*`).test(historyItem[0]);
+    });
+  };
+
+  /**
+   * Clears the internal history tracking, but does not prevent further history
+   * tracking.
+   */
+  log.history.clear = () => {
+    if (history) {
+      history.length = 0;
+    }
+  };
+
+  /**
+   * Disable history tracking if it is currently enabled.
+   */
+  log.history.disable = () => {
+    if (history !== null) {
+      history.length = 0;
+      history = null;
+    }
+  };
+
+  /**
+   * Enable history tracking if it is currently disabled.
+   */
+  log.history.enable = () => {
+    if (history === null) {
+      history = [];
+    }
+  };
+
+  /**
+   * Logs error messages. Similar to `console.error`.
+   *
+   * @param {...*} args
+   *        One or more messages or objects that should be logged as an error
+   */
+  log.error = (...args) => logByType('error', level, args);
+
+  /**
+   * Logs warning messages. Similar to `console.warn`.
+   *
+   * @param {...*} args
+   *        One or more messages or objects that should be logged as a warning.
+   */
+  log.warn = (...args) => logByType('warn', level, args);
+
+  /**
+   * Logs debug messages. Similar to `console.debug`, but may also act as a comparable
+   * log if `console.debug` is not available
+   *
+   * @param {...*} args
+   *        One or more messages or objects that should be logged as debug.
+   */
+  log.debug = (...args) => logByType('debug', level, args);
+  return log;
+}
+
+/**
+ * @file log.js
+ * @module log
+ */
+const log$1 = createLogger$1('VIDEOJS');
+const createLogger = log$1.createLogger;
+
+/**
+ * @file obj.js
+ * @module obj
+ */
+
+/**
+ * @callback obj:EachCallback
+ *
+ * @param {*} value
+ *        The current key for the object that is being iterated over.
+ *
+ * @param {string} key
+ *        The current key-value for object that is being iterated over
+ */
+
+/**
+ * @callback obj:ReduceCallback
+ *
+ * @param {*} accum
+ *        The value that is accumulating over the reduce loop.
+ *
+ * @param {*} value
+ *        The current key for the object that is being iterated over.
+ *
+ * @param {string} key
+ *        The current key-value for object that is being iterated over
+ *
+ * @return {*}
+ *         The new accumulated value.
+ */
+const toString = Object.prototype.toString;
+
+/**
+ * Get the keys of an Object
+ *
+ * @param {Object}
+ *        The Object to get the keys from
+ *
+ * @return {string[]}
+ *         An array of the keys from the object. Returns an empty array if the
+ *         object passed in was invalid or had no keys.
+ *
+ * @private
+ */
+const keys = function (object) {
+  return isObject(object) ? Object.keys(object) : [];
+};
+
+/**
+ * Array-like iteration for objects.
+ *
+ * @param {Object} object
+ *        The object to iterate over
+ *
+ * @param {obj:EachCallback} fn
+ *        The callback function which is called for each key in the object.
+ */
+function each(object, fn) {
+  keys(object).forEach(key => fn(object[key], key));
+}
+
+/**
+ * Array-like reduce for objects.
+ *
+ * @param {Object} object
+ *        The Object that you want to reduce.
+ *
+ * @param {Function} fn
+ *         A callback function which is called for each key in the object. It
+ *         receives the accumulated value and the per-iteration value and key
+ *         as arguments.
+ *
+ * @param {*} [initial = 0]
+ *        Starting value
+ *
+ * @return {*}
+ *         The final accumulated value.
+ */
+function reduce(object, fn, initial = 0) {
+  return keys(object).reduce((accum, key) => fn(accum, object[key], key), initial);
+}
+
+/**
+ * Returns whether a value is an object of any kind - including DOM nodes,
+ * arrays, regular expressions, etc. Not functions, though.
+ *
+ * This avoids the gotcha where using `typeof` on a `null` value
+ * results in `'object'`.
+ *
+ * @param  {Object} value
+ * @return {boolean}
+ */
+function isObject(value) {
+  return !!value && typeof value === 'object';
+}
+
+/**
+ * Returns whether an object appears to be a "plain" object - that is, a
+ * direct instance of `Object`.
+ *
+ * @param  {Object} value
+ * @return {boolean}
+ */
+function isPlain(value) {
+  return isObject(value) && toString.call(value) === '[object Object]' && value.constructor === Object;
+}
+
+/**
+ * Merge two objects recursively.
+ *
+ * Performs a deep merge like
+ * {@link https://lodash.com/docs/4.17.10#merge|lodash.merge}, but only merges
+ * plain objects (not arrays, elements, or anything else).
+ *
+ * Non-plain object values will be copied directly from the right-most
+ * argument.
+ *
+ * @param   {Object[]} sources
+ *          One or more objects to merge into a new object.
+ *
+ * @return {Object}
+ *          A new object that is the merged result of all sources.
+ */
+function merge$1(...sources) {
+  const result = {};
+  sources.forEach(source => {
+    if (!source) {
+      return;
+    }
+    each(source, (value, key) => {
+      if (!isPlain(value)) {
+        result[key] = value;
+        return;
+      }
+      if (!isPlain(result[key])) {
+        result[key] = {};
+      }
+      result[key] = merge$1(result[key], value);
+    });
+  });
+  return result;
+}
+
+/**
+ * Returns an array of values for a given object
+ *
+ * @param  {Object} source - target object
+ * @return {Array<unknown>} - object values
+ */
+function values(source = {}) {
+  const result = [];
+  for (const key in source) {
+    if (source.hasOwnProperty(key)) {
+      const value = source[key];
+      result.push(value);
+    }
+  }
+  return result;
+}
+
+/**
+ * Object.defineProperty but "lazy", which means that the value is only set after
+ * it is retrieved the first time, rather than being set right away.
+ *
+ * @param {Object} obj the object to set the property on
+ * @param {string} key the key for the property to set
+ * @param {Function} getValue the function used to get the value when it is needed.
+ * @param {boolean} setter whether a setter should be allowed or not
+ */
+function defineLazyProperty(obj, key, getValue, setter = true) {
+  const set = value => Object.defineProperty(obj, key, {
+    value,
+    enumerable: true,
+    writable: true
+  });
+  const options = {
+    configurable: true,
+    enumerable: true,
+    get() {
+      const value = getValue();
+      set(value);
+      return value;
+    }
+  };
+  if (setter) {
+    options.set = set;
+  }
+  return Object.defineProperty(obj, key, options);
+}
+
+var Obj = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  each: each,
+  reduce: reduce,
+  isObject: isObject,
+  isPlain: isPlain,
+  merge: merge$1,
+  values: values,
+  defineLazyProperty: defineLazyProperty
+});
+
+/**
+ * @file browser.js
+ * @module browser
+ */
+
+/**
+ * Whether or not this device is an iPod.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_IPOD = false;
+
+/**
+ * The detected iOS version - or `null`.
+ *
+ * @static
+ * @type {string|null}
+ */
+let IOS_VERSION = null;
+
+/**
+ * Whether or not this is an Android device.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_ANDROID = false;
+
+/**
+ * The detected Android version - or `null` if not Android or indeterminable.
+ *
+ * @static
+ * @type {number|string|null}
+ */
+let ANDROID_VERSION;
+
+/**
+ * Whether or not this is Mozilla Firefox.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_FIREFOX = false;
+
+/**
+ * Whether or not this is Microsoft Edge.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_EDGE = false;
+
+/**
+ * Whether or not this is any Chromium Browser
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_CHROMIUM = false;
+
+/**
+ * Whether or not this is any Chromium browser that is not Edge.
+ *
+ * This will also be `true` for Chrome on iOS, which will have different support
+ * as it is actually Safari under the hood.
+ *
+ * Deprecated, as the behaviour to not match Edge was to prevent Legacy Edge's UA matching.
+ * IS_CHROMIUM should be used instead.
+ * "Chromium but not Edge" could be explicitly tested with IS_CHROMIUM && !IS_EDGE
+ *
+ * @static
+ * @deprecated
+ * @type {Boolean}
+ */
+let IS_CHROME = false;
+
+/**
+ * The detected Chromium version - or `null`.
+ *
+ * @static
+ * @type {number|null}
+ */
+let CHROMIUM_VERSION = null;
+
+/**
+ * The detected Google Chrome version - or `null`.
+ * This has always been the _Chromium_ version, i.e. would return on Chromium Edge.
+ * Deprecated, use CHROMIUM_VERSION instead.
+ *
+ * @static
+ * @deprecated
+ * @type {number|null}
+ */
+let CHROME_VERSION = null;
+
+/**
+ * The detected Internet Explorer version - or `null`.
+ *
+ * @static
+ * @deprecated
+ * @type {number|null}
+ */
+let IE_VERSION = null;
+
+/**
+ * Whether or not this is desktop Safari.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_SAFARI = false;
+
+/**
+ * Whether or not this is a Windows machine.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_WINDOWS = false;
+
+/**
+ * Whether or not this device is an iPad.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_IPAD = false;
+
+/**
+ * Whether or not this device is an iPhone.
+ *
+ * @static
+ * @type {Boolean}
+ */
+// The Facebook app's UIWebView identifies as both an iPhone and iPad, so
+// to identify iPhones, we need to exclude iPads.
+// http://artsy.github.io/blog/2012/10/18/the-perils-of-ios-user-agent-sniffing/
+let IS_IPHONE = false;
+
+/**
+ * Whether or not this is a Tizen device.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_TIZEN = false;
+
+/**
+ * Whether or not this is a WebOS device.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_WEBOS = false;
+
+/**
+ * Whether or not this is a Smart TV (Tizen or WebOS) device.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_SMART_TV = false;
+
+/**
+ * Whether or not this device is touch-enabled.
+ *
+ * @static
+ * @const
+ * @type {Boolean}
+ */
+const TOUCH_ENABLED = Boolean(isReal() && ('ontouchstart' in window__default["default"] || window__default["default"].navigator.maxTouchPoints || window__default["default"].DocumentTouch && window__default["default"].document instanceof window__default["default"].DocumentTouch));
+const UAD = window__default["default"].navigator && window__default["default"].navigator.userAgentData;
+if (UAD && UAD.platform && UAD.brands) {
+  // If userAgentData is present, use it instead of userAgent to avoid warnings
+  // Currently only implemented on Chromium
+  // userAgentData does not expose Android version, so ANDROID_VERSION remains `null`
+
+  IS_ANDROID = UAD.platform === 'Android';
+  IS_EDGE = Boolean(UAD.brands.find(b => b.brand === 'Microsoft Edge'));
+  IS_CHROMIUM = Boolean(UAD.brands.find(b => b.brand === 'Chromium'));
+  IS_CHROME = !IS_EDGE && IS_CHROMIUM;
+  CHROMIUM_VERSION = CHROME_VERSION = (UAD.brands.find(b => b.brand === 'Chromium') || {}).version || null;
+  IS_WINDOWS = UAD.platform === 'Windows';
+}
+
+// If the browser is not Chromium, either userAgentData is not present which could be an old Chromium browser,
+//  or it's a browser that has added userAgentData since that we don't have tests for yet. In either case,
+// the checks need to be made agiainst the regular userAgent string.
+if (!IS_CHROMIUM) {
+  const USER_AGENT = window__default["default"].navigator && window__default["default"].navigator.userAgent || '';
+  IS_IPOD = /iPod/i.test(USER_AGENT);
+  IOS_VERSION = function () {
+    const match = USER_AGENT.match(/OS (\d+)_/i);
+    if (match && match[1]) {
+      return match[1];
+    }
+    return null;
+  }();
+  IS_ANDROID = /Android/i.test(USER_AGENT);
+  ANDROID_VERSION = function () {
+    // This matches Android Major.Minor.Patch versions
+    // ANDROID_VERSION is Major.Minor as a Number, if Minor isn't available, then only Major is returned
+    const match = USER_AGENT.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i);
+    if (!match) {
+      return null;
+    }
+    const major = match[1] && parseFloat(match[1]);
+    const minor = match[2] && parseFloat(match[2]);
+    if (major && minor) {
+      return parseFloat(match[1] + '.' + match[2]);
+    } else if (major) {
+      return major;
+    }
+    return null;
+  }();
+  IS_FIREFOX = /Firefox/i.test(USER_AGENT);
+  IS_EDGE = /Edg/i.test(USER_AGENT);
+  IS_CHROMIUM = /Chrome/i.test(USER_AGENT) || /CriOS/i.test(USER_AGENT);
+  IS_CHROME = !IS_EDGE && IS_CHROMIUM;
+  CHROMIUM_VERSION = CHROME_VERSION = function () {
+    const match = USER_AGENT.match(/(Chrome|CriOS)\/(\d+)/);
+    if (match && match[2]) {
+      return parseFloat(match[2]);
+    }
+    return null;
+  }();
+  IE_VERSION = function () {
+    const result = /MSIE\s(\d+)\.\d/.exec(USER_AGENT);
+    let version = result && parseFloat(result[1]);
+    if (!version && /Trident\/7.0/i.test(USER_AGENT) && /rv:11.0/.test(USER_AGENT)) {
+      // IE 11 has a different user agent string than other IE versions
+      version = 11.0;
+    }
+    return version;
+  }();
+  IS_TIZEN = /Tizen/i.test(USER_AGENT);
+  IS_WEBOS = /Web0S/i.test(USER_AGENT);
+  IS_SMART_TV = IS_TIZEN || IS_WEBOS;
+  IS_SAFARI = /Safari/i.test(USER_AGENT) && !IS_CHROME && !IS_ANDROID && !IS_EDGE && !IS_SMART_TV;
+  IS_WINDOWS = /Windows/i.test(USER_AGENT);
+  IS_IPAD = /iPad/i.test(USER_AGENT) || IS_SAFARI && TOUCH_ENABLED && !/iPhone/i.test(USER_AGENT);
+  IS_IPHONE = /iPhone/i.test(USER_AGENT) && !IS_IPAD;
+}
+
+/**
+ * Whether or not this is an iOS device.
+ *
+ * @static
+ * @const
+ * @type {Boolean}
+ */
+const IS_IOS = IS_IPHONE || IS_IPAD || IS_IPOD;
+
+/**
+ * Whether or not this is any flavor of Safari - including iOS.
+ *
+ * @static
+ * @const
+ * @type {Boolean}
+ */
+const IS_ANY_SAFARI = (IS_SAFARI || IS_IOS) && !IS_CHROME;
+
+var browser = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  get IS_IPOD () { return IS_IPOD; },
+  get IOS_VERSION () { return IOS_VERSION; },
+  get IS_ANDROID () { return IS_ANDROID; },
+  get ANDROID_VERSION () { return ANDROID_VERSION; },
+  get IS_FIREFOX () { return IS_FIREFOX; },
+  get IS_EDGE () { return IS_EDGE; },
+  get IS_CHROMIUM () { return IS_CHROMIUM; },
+  get IS_CHROME () { return IS_CHROME; },
+  get CHROMIUM_VERSION () { return CHROMIUM_VERSION; },
+  get CHROME_VERSION () { return CHROME_VERSION; },
+  get IE_VERSION () { return IE_VERSION; },
+  get IS_SAFARI () { return IS_SAFARI; },
+  get IS_WINDOWS () { return IS_WINDOWS; },
+  get IS_IPAD () { return IS_IPAD; },
+  get IS_IPHONE () { return IS_IPHONE; },
+  get IS_TIZEN () { return IS_TIZEN; },
+  get IS_WEBOS () { return IS_WEBOS; },
+  get IS_SMART_TV () { return IS_SMART_TV; },
+  TOUCH_ENABLED: TOUCH_ENABLED,
+  IS_IOS: IS_IOS,
+  IS_ANY_SAFARI: IS_ANY_SAFARI
+});
+
+/**
+ * @file dom.js
+ * @module dom
+ */
+
+/**
+ * Detect if a value is a string with any non-whitespace characters.
+ *
+ * @private
+ * @param  {string} str
+ *         The string to check
+ *
+ * @return {boolean}
+ *         Will be `true` if the string is non-blank, `false` otherwise.
+ *
+ */
+function isNonBlankString(str) {
+  // we use str.trim as it will trim any whitespace characters
+  // from the front or back of non-whitespace characters. aka
+  // Any string that contains non-whitespace characters will
+  // still contain them after `trim` but whitespace only strings
+  // will have a length of 0, failing this check.
+  return typeof str === 'string' && Boolean(str.trim());
+}
+
+/**
+ * Throws an error if the passed string has whitespace. This is used by
+ * class methods to be relatively consistent with the classList API.
+ *
+ * @private
+ * @param  {string} str
+ *         The string to check for whitespace.
+ *
+ * @throws {Error}
+ *         Throws an error if there is whitespace in the string.
+ */
+function throwIfWhitespace(str) {
+  // str.indexOf instead of regex because str.indexOf is faster performance wise.
+  if (str.indexOf(' ') >= 0) {
+    throw new Error('class has illegal whitespace characters');
+  }
+}
+
+/**
+ * Whether the current DOM interface appears to be real (i.e. not simulated).
+ *
+ * @return {boolean}
+ *         Will be `true` if the DOM appears to be real, `false` otherwise.
+ */
+function isReal() {
+  // Both document and window will never be undefined thanks to `global`.
+  return document__default["default"] === window__default["default"].document;
+}
+
+/**
+ * Determines, via duck typing, whether or not a value is a DOM element.
+ *
+ * @param  {*} value
+ *         The value to check.
+ *
+ * @return {boolean}
+ *         Will be `true` if the value is a DOM element, `false` otherwise.
+ */
+function isEl(value) {
+  return isObject(value) && value.nodeType === 1;
+}
+
+/**
+ * Determines if the current DOM is embedded in an iframe.
+ *
+ * @return {boolean}
+ *         Will be `true` if the DOM is embedded in an iframe, `false`
+ *         otherwise.
+ */
+function isInFrame() {
+  // We need a try/catch here because Safari will throw errors when attempting
+  // to get either `parent` or `self`
+  try {
+    return window__default["default"].parent !== window__default["default"].self;
+  } catch (x) {
+    return true;
+  }
+}
+
+/**
+ * Creates functions to query the DOM using a given method.
+ *
+ * @private
+ * @param   {string} method
+ *          The method to create the query with.
+ *
+ * @return  {Function}
+ *          The query method
+ */
+function createQuerier(method) {
+  return function (selector, context) {
+    if (!isNonBlankString(selector)) {
+      return document__default["default"][method](null);
+    }
+    if (isNonBlankString(context)) {
+      context = document__default["default"].querySelector(context);
+    }
+    const ctx = isEl(context) ? context : document__default["default"];
+    return ctx[method] && ctx[method](selector);
+  };
+}
+
+/**
+ * Creates an element and applies properties, attributes, and inserts content.
+ *
+ * @param  {string} [tagName='div']
+ *         Name of tag to be created.
+ *
+ * @param  {Object} [properties={}]
+ *         Element properties to be applied.
+ *
+ * @param  {Object} [attributes={}]
+ *         Element attributes to be applied.
+ *
+ * @param {ContentDescriptor} [content]
+ *        A content descriptor object.
+ *
+ * @return {Element}
+ *         The element that was created.
+ */
+function createEl(tagName = 'div', properties = {}, attributes = {}, content) {
+  const el = document__default["default"].createElement(tagName);
+  Object.getOwnPropertyNames(properties).forEach(function (propName) {
+    const val = properties[propName];
+
+    // Handle textContent since it's not supported everywhere and we have a
+    // method for it.
+    if (propName === 'textContent') {
+      textContent(el, val);
+    } else if (el[propName] !== val || propName === 'tabIndex') {
+      el[propName] = val;
+    }
+  });
+  Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
+    el.setAttribute(attrName, attributes[attrName]);
+  });
+  if (content) {
+    appendContent(el, content);
+  }
+  return el;
+}
+
+/**
+ * Injects text into an element, replacing any existing contents entirely.
+ *
+ * @param  {HTMLElement} el
+ *         The element to add text content into
+ *
+ * @param  {string} text
+ *         The text content to add.
+ *
+ * @return {Element}
+ *         The element with added text content.
+ */
+function textContent(el, text) {
+  if (typeof el.textContent === 'undefined') {
+    el.innerText = text;
+  } else {
+    el.textContent = text;
+  }
+  return el;
+}
+
+/**
+ * Insert an element as the first child node of another
+ *
+ * @param {Element} child
+ *        Element to insert
+ *
+ * @param {Element} parent
+ *        Element to insert child into
+ */
+function prependTo(child, parent) {
+  if (parent.firstChild) {
+    parent.insertBefore(child, parent.firstChild);
+  } else {
+    parent.appendChild(child);
+  }
+}
+
+/**
+ * Check if an element has a class name.
+ *
+ * @param  {Element} element
+ *         Element to check
+ *
+ * @param  {string} classToCheck
+ *         Class name to check for
+ *
+ * @return {boolean}
+ *         Will be `true` if the element has a class, `false` otherwise.
+ *
+ * @throws {Error}
+ *         Throws an error if `classToCheck` has white space.
+ */
+function hasClass(element, classToCheck) {
+  throwIfWhitespace(classToCheck);
+  return element.classList.contains(classToCheck);
+}
+
+/**
+ * Add a class name to an element.
+ *
+ * @param  {Element} element
+ *         Element to add class name to.
+ *
+ * @param  {...string} classesToAdd
+ *         One or more class name to add.
+ *
+ * @return {Element}
+ *         The DOM element with the added class name.
+ */
+function addClass(element, ...classesToAdd) {
+  element.classList.add(...classesToAdd.reduce((prev, current) => prev.concat(current.split(/\s+/)), []));
+  return element;
+}
+
+/**
+ * Remove a class name from an element.
+ *
+ * @param  {Element} element
+ *         Element to remove a class name from.
+ *
+ * @param  {...string} classesToRemove
+ *         One or more class name to remove.
+ *
+ * @return {Element}
+ *         The DOM element with class name removed.
+ */
+function removeClass(element, ...classesToRemove) {
+  // Protect in case the player gets disposed
+  if (!element) {
+    log$1.warn("removeClass was called with an element that doesn't exist");
+    return null;
+  }
+  element.classList.remove(...classesToRemove.reduce((prev, current) => prev.concat(current.split(/\s+/)), []));
+  return element;
+}
+
+/**
+ * The callback definition for toggleClass.
+ *
+ * @callback module:dom~PredicateCallback
+ * @param    {Element} element
+ *           The DOM element of the Component.
+ *
+ * @param    {string} classToToggle
+ *           The `className` that wants to be toggled
+ *
+ * @return   {boolean|undefined}
+ *           If `true` is returned, the `classToToggle` will be added to the
+ *           `element`. If `false`, the `classToToggle` will be removed from
+ *           the `element`. If `undefined`, the callback will be ignored.
+ */
+
+/**
+ * Adds or removes a class name to/from an element depending on an optional
+ * condition or the presence/absence of the class name.
+ *
+ * @param  {Element} element
+ *         The element to toggle a class name on.
+ *
+ * @param  {string} classToToggle
+ *         The class that should be toggled.
+ *
+ * @param  {boolean|module:dom~PredicateCallback} [predicate]
+ *         See the return value for {@link module:dom~PredicateCallback}
+ *
+ * @return {Element}
+ *         The element with a class that has been toggled.
+ */
+function toggleClass(element, classToToggle, predicate) {
+  if (typeof predicate === 'function') {
+    predicate = predicate(element, classToToggle);
+  }
+  if (typeof predicate !== 'boolean') {
+    predicate = undefined;
+  }
+  classToToggle.split(/\s+/).forEach(className => element.classList.toggle(className, predicate));
+  return element;
+}
+
+/**
+ * Apply attributes to an HTML element.
+ *
+ * @param {Element} el
+ *        Element to add attributes to.
+ *
+ * @param {Object} [attributes]
+ *        Attributes to be applied.
+ */
+function setAttributes(el, attributes) {
+  Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
+    const attrValue = attributes[attrName];
+    if (attrValue === null || typeof attrValue === 'undefined' || attrValue === false) {
+      el.removeAttribute(attrName);
+    } else {
+      el.setAttribute(attrName, attrValue === true ? '' : attrValue);
+    }
+  });
+}
+
+/**
+ * Get an element's attribute values, as defined on the HTML tag.
+ *
+ * Attributes are not the same as properties. They're defined on the tag
+ * or with setAttribute.
+ *
+ * @param  {Element} tag
+ *         Element from which to get tag attributes.
+ *
+ * @return {Object}
+ *         All attributes of the element. Boolean attributes will be `true` or
+ *         `false`, others will be strings.
+ */
+function getAttributes(tag) {
+  const obj = {};
+
+  // known boolean attributes
+  // we can check for matching boolean properties, but not all browsers
+  // and not all tags know about these attributes, so, we still want to check them manually
+  const knownBooleans = ['autoplay', 'controls', 'playsinline', 'loop', 'muted', 'default', 'defaultMuted'];
+  if (tag && tag.attributes && tag.attributes.length > 0) {
+    const attrs = tag.attributes;
+    for (let i = attrs.length - 1; i >= 0; i--) {
+      const attrName = attrs[i].name;
+      /** @type {boolean|string} */
+      let attrVal = attrs[i].value;
+
+      // check for known booleans
+      // the matching element property will return a value for typeof
+      if (knownBooleans.includes(attrName)) {
+        // the value of an included boolean attribute is typically an empty
+        // string ('') which would equal false if we just check for a false value.
+        // we also don't want support bad code like autoplay='false'
+        attrVal = attrVal !== null ? true : false;
+      }
+      obj[attrName] = attrVal;
+    }
+  }
+  return obj;
+}
+
+/**
+ * Get the value of an element's attribute.
+ *
+ * @param {Element} el
+ *        A DOM element.
+ *
+ * @param {string} attribute
+ *        Attribute to get the value of.
+ *
+ * @return {string}
+ *         The value of the attribute.
+ */
+function getAttribute(el, attribute) {
+  return el.getAttribute(attribute);
+}
+
+/**
+ * Set the value of an element's attribute.
+ *
+ * @param {Element} el
+ *        A DOM element.
+ *
+ * @param {string} attribute
+ *        Attribute to set.
+ *
+ * @param {string} value
+ *        Value to set the attribute to.
+ */
+function setAttribute(el, attribute, value) {
+  el.setAttribute(attribute, value);
+}
+
+/**
+ * Remove an element's attribute.
+ *
+ * @param {Element} el
+ *        A DOM element.
+ *
+ * @param {string} attribute
+ *        Attribute to remove.
+ */
+function removeAttribute(el, attribute) {
+  el.removeAttribute(attribute);
+}
+
+/**
+ * Attempt to block the ability to select text.
+ */
+function blockTextSelection() {
+  document__default["default"].body.focus();
+  document__default["default"].onselectstart = function () {
+    return false;
+  };
+}
+
+/**
+ * Turn off text selection blocking.
+ */
+function unblockTextSelection() {
+  document__default["default"].onselectstart = function () {
+    return true;
+  };
+}
+
+/**
+ * Identical to the native `getBoundingClientRect` function, but ensures that
+ * the method is supported at all (it is in all browsers we claim to support)
+ * and that the element is in the DOM before continuing.
+ *
+ * This wrapper function also shims properties which are not provided by some
+ * older browsers (namely, IE8).
+ *
+ * Additionally, some browsers do not support adding properties to a
+ * `ClientRect`/`DOMRect` object; so, we shallow-copy it with the standard
+ * properties (except `x` and `y` which are not widely supported). This helps
+ * avoid implementations where keys are non-enumerable.
+ *
+ * @param  {Element} el
+ *         Element whose `ClientRect` we want to calculate.
+ *
+ * @return {Object|undefined}
+ *         Always returns a plain object - or `undefined` if it cannot.
+ */
+function getBoundingClientRect(el) {
+  if (el && el.getBoundingClientRect && el.parentNode) {
+    const rect = el.getBoundingClientRect();
+    const result = {};
+    ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach(k => {
+      if (rect[k] !== undefined) {
+        result[k] = rect[k];
+      }
+    });
+    if (!result.height) {
+      result.height = parseFloat(computedStyle(el, 'height'));
+    }
+    if (!result.width) {
+      result.width = parseFloat(computedStyle(el, 'width'));
+    }
+    return result;
+  }
+}
+
+/**
+ * Represents the position of a DOM element on the page.
+ *
+ * @typedef  {Object} module:dom~Position
+ *
+ * @property {number} left
+ *           Pixels to the left.
+ *
+ * @property {number} top
+ *           Pixels from the top.
+ */
+
+/**
+ * Get the position of an element in the DOM.
+ *
+ * Uses `getBoundingClientRect` technique from John Resig.
+ *
+ * @see http://ejohn.org/blog/getboundingclientrect-is-awesome/
+ *
+ * @param  {Element} el
+ *         Element from which to get offset.
+ *
+ * @return {module:dom~Position}
+ *         The position of the element that was passed in.
+ */
+function findPosition(el) {
+  if (!el || el && !el.offsetParent) {
+    return {
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0
+    };
+  }
+  const width = el.offsetWidth;
+  const height = el.offsetHeight;
+  let left = 0;
+  let top = 0;
+  while (el.offsetParent && el !== document__default["default"][FullscreenApi.fullscreenElement]) {
+    left += el.offsetLeft;
+    top += el.offsetTop;
+    el = el.offsetParent;
+  }
+  return {
+    left,
+    top,
+    width,
+    height
+  };
+}
+
+/**
+ * Represents x and y coordinates for a DOM element or mouse pointer.
+ *
+ * @typedef  {Object} module:dom~Coordinates
+ *
+ * @property {number} x
+ *           x coordinate in pixels
+ *
+ * @property {number} y
+ *           y coordinate in pixels
+ */
+
+/**
+ * Get the pointer position within an element.
+ *
+ * The base on the coordinates are the bottom left of the element.
+ *
+ * @param  {Element} el
+ *         Element on which to get the pointer position on.
+ *
+ * @param  {Event} event
+ *         Event object.
+ *
+ * @return {module:dom~Coordinates}
+ *         A coordinates object corresponding to the mouse position.
+ *
+ */
+function getPointerPosition(el, event) {
+  const translated = {
+    x: 0,
+    y: 0
+  };
+  if (IS_IOS) {
+    let item = el;
+    while (item && item.nodeName.toLowerCase() !== 'html') {
+      const transform = computedStyle(item, 'transform');
+      if (/^matrix/.test(transform)) {
+        const values = transform.slice(7, -1).split(/,\s/).map(Number);
+        translated.x += values[4];
+        translated.y += values[5];
+      } else if (/^matrix3d/.test(transform)) {
+        const values = transform.slice(9, -1).split(/,\s/).map(Number);
+        translated.x += values[12];
+        translated.y += values[13];
+      }
+      item = item.parentNode;
+    }
+  }
+  const position = {};
+  const boxTarget = findPosition(event.target);
+  const box = findPosition(el);
+  const boxW = box.width;
+  const boxH = box.height;
+  let offsetY = event.offsetY - (box.top - boxTarget.top);
+  let offsetX = event.offsetX - (box.left - boxTarget.left);
+  if (event.changedTouches) {
+    offsetX = event.changedTouches[0].pageX - box.left;
+    offsetY = event.changedTouches[0].pageY + box.top;
+    if (IS_IOS) {
+      offsetX -= translated.x;
+      offsetY -= translated.y;
+    }
+  }
+  position.y = 1 - Math.max(0, Math.min(1, offsetY / boxH));
+  position.x = Math.max(0, Math.min(1, offsetX / boxW));
+  return position;
+}
+
+/**
+ * Determines, via duck typing, whether or not a value is a text node.
+ *
+ * @param  {*} value
+ *         Check if this value is a text node.
+ *
+ * @return {boolean}
+ *         Will be `true` if the value is a text node, `false` otherwise.
+ */
+function isTextNode(value) {
+  return isObject(value) && value.nodeType === 3;
+}
+
+/**
+ * Empties the contents of an element.
+ *
+ * @param  {Element} el
+ *         The element to empty children from
+ *
+ * @return {Element}
+ *         The element with no children
+ */
+function emptyEl(el) {
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+  return el;
+}
+
+/**
+ * This is a mixed value that describes content to be injected into the DOM
+ * via some method. It can be of the following types:
+ *
+ * Type       | Description
+ * -----------|-------------
+ * `string`   | The value will be normalized into a text node.
+ * `Element`  | The value will be accepted as-is.
+ * `Text`     | A TextNode. The value will be accepted as-is.
+ * `Array`    | A one-dimensional array of strings, elements, text nodes, or functions. These functions should return a string, element, or text node (any other return value, like an array, will be ignored).
+ * `Function` | A function, which is expected to return a string, element, text node, or array - any of the other possible values described above. This means that a content descriptor could be a function that returns an array of functions, but those second-level functions must return strings, elements, or text nodes.
+ *
+ * @typedef {string|Element|Text|Array|Function} ContentDescriptor
+ */
+
+/**
+ * Normalizes content for eventual insertion into the DOM.
+ *
+ * This allows a wide range of content definition methods, but helps protect
+ * from falling into the trap of simply writing to `innerHTML`, which could
+ * be an XSS concern.
+ *
+ * The content for an element can be passed in multiple types and
+ * combinations, whose behavior is as follows:
+ *
+ * @param {ContentDescriptor} content
+ *        A content descriptor value.
+ *
+ * @return {Array}
+ *         All of the content that was passed in, normalized to an array of
+ *         elements or text nodes.
+ */
+function normalizeContent(content) {
+  // First, invoke content if it is a function. If it produces an array,
+  // that needs to happen before normalization.
+  if (typeof content === 'function') {
+    content = content();
+  }
+
+  // Next up, normalize to an array, so one or many items can be normalized,
+  // filtered, and returned.
+  return (Array.isArray(content) ? content : [content]).map(value => {
+    // First, invoke value if it is a function to produce a new value,
+    // which will be subsequently normalized to a Node of some kind.
+    if (typeof value === 'function') {
+      value = value();
+    }
+    if (isEl(value) || isTextNode(value)) {
+      return value;
+    }
+    if (typeof value === 'string' && /\S/.test(value)) {
+      return document__default["default"].createTextNode(value);
+    }
+  }).filter(value => value);
+}
+
+/**
+ * Normalizes and appends content to an element.
+ *
+ * @param  {Element} el
+ *         Element to append normalized content to.
+ *
+ * @param {ContentDescriptor} content
+ *        A content descriptor value.
+ *
+ * @return {Element}
+ *         The element with appended normalized content.
+ */
+function appendContent(el, content) {
+  normalizeContent(content).forEach(node => el.appendChild(node));
+  return el;
+}
+
+/**
+ * Normalizes and inserts content into an element; this is identical to
+ * `appendContent()`, except it empties the element first.
+ *
+ * @param {Element} el
+ *        Element to insert normalized content into.
+ *
+ * @param {ContentDescriptor} content
+ *        A content descriptor value.
+ *
+ * @return {Element}
+ *         The element with inserted normalized content.
+ */
+function insertContent(el, content) {
+  return appendContent(emptyEl(el), content);
+}
+
+/**
+ * Check if an event was a single left click.
+ *
+ * @param  {MouseEvent} event
+ *         Event object.
+ *
+ * @return {boolean}
+ *         Will be `true` if a single left click, `false` otherwise.
+ */
+function isSingleLeftClick(event) {
+  // Note: if you create something draggable, be sure to
+  // call it on both `mousedown` and `mousemove` event,
+  // otherwise `mousedown` should be enough for a button
+
+  if (event.button === undefined && event.buttons === undefined) {
+    // Why do we need `buttons` ?
+    // Because, middle mouse sometimes have this:
+    // e.button === 0 and e.buttons === 4
+    // Furthermore, we want to prevent combination click, something like
+    // HOLD middlemouse then left click, that would be
+    // e.button === 0, e.buttons === 5
+    // just `button` is not gonna work
+
+    // Alright, then what this block does ?
+    // this is for chrome `simulate mobile devices`
+    // I want to support this as well
+
+    return true;
+  }
+  if (event.button === 0 && event.buttons === undefined) {
+    // Touch screen, sometimes on some specific device, `buttons`
+    // doesn't have anything (safari on ios, blackberry...)
+
+    return true;
+  }
+
+  // `mouseup` event on a single left click has
+  // `button` and `buttons` equal to 0
+  if (event.type === 'mouseup' && event.button === 0 && event.buttons === 0) {
+    return true;
+  }
+  if (event.button !== 0 || event.buttons !== 1) {
+    // This is the reason we have those if else block above
+    // if any special case we can catch and let it slide
+    // we do it above, when get to here, this definitely
+    // is-not-left-click
+
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Finds a single DOM element matching `selector` within the optional
+ * `context` of another DOM element (defaulting to `document`).
+ *
+ * @param  {string} selector
+ *         A valid CSS selector, which will be passed to `querySelector`.
+ *
+ * @param  {Element|String} [context=document]
+ *         A DOM element within which to query. Can also be a selector
+ *         string in which case the first matching element will be used
+ *         as context. If missing (or no element matches selector), falls
+ *         back to `document`.
+ *
+ * @return {Element|null}
+ *         The element that was found or null.
+ */
+const $ = createQuerier('querySelector');
+
+/**
+ * Finds a all DOM elements matching `selector` within the optional
+ * `context` of another DOM element (defaulting to `document`).
+ *
+ * @param  {string} selector
+ *         A valid CSS selector, which will be passed to `querySelectorAll`.
+ *
+ * @param  {Element|String} [context=document]
+ *         A DOM element within which to query. Can also be a selector
+ *         string in which case the first matching element will be used
+ *         as context. If missing (or no element matches selector), falls
+ *         back to `document`.
+ *
+ * @return {NodeList}
+ *         A element list of elements that were found. Will be empty if none
+ *         were found.
+ *
+ */
+const $$ = createQuerier('querySelectorAll');
+
+/**
+ * A safe getComputedStyle.
+ *
+ * This is needed because in Firefox, if the player is loaded in an iframe with
+ * `display:none`, then `getComputedStyle` returns `null`, so, we do a
+ * null-check to make sure that the player doesn't break in these cases.
+ *
+ * @param    {Element} el
+ *           The element you want the computed style of
+ *
+ * @param    {string} prop
+ *           The property name you want
+ *
+ * @see      https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+ */
+function computedStyle(el, prop) {
+  if (!el || !prop) {
+    return '';
+  }
+  if (typeof window__default["default"].getComputedStyle === 'function') {
+    let computedStyleValue;
+    try {
+      computedStyleValue = window__default["default"].getComputedStyle(el);
+    } catch (e) {
+      return '';
+    }
+    return computedStyleValue ? computedStyleValue.getPropertyValue(prop) || computedStyleValue[prop] : '';
+  }
+  return '';
+}
+
+/**
+ * Copy document style sheets to another window.
+ *
+ * @param    {Window} win
+ *           The window element you want to copy the document style sheets to.
+ *
+ */
+function copyStyleSheetsToWindow(win) {
+  [...document__default["default"].styleSheets].forEach(styleSheet => {
+    try {
+      const cssRules = [...styleSheet.cssRules].map(rule => rule.cssText).join('');
+      const style = document__default["default"].createElement('style');
+      style.textContent = cssRules;
+      win.document.head.appendChild(style);
+    } catch (e) {
+      const link = document__default["default"].createElement('link');
+      link.rel = 'stylesheet';
+      link.type = styleSheet.type;
+      // For older Safari this has to be the string; on other browsers setting the MediaList works
+      link.media = styleSheet.media.mediaText;
+      link.href = styleSheet.href;
+      win.document.head.appendChild(link);
+    }
+  });
+}
+
+var Dom = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  isReal: isReal,
+  isEl: isEl,
+  isInFrame: isInFrame,
+  createEl: createEl,
+  textContent: textContent,
+  prependTo: prependTo,
+  hasClass: hasClass,
+  addClass: addClass,
+  removeClass: removeClass,
+  toggleClass: toggleClass,
+  setAttributes: setAttributes,
+  getAttributes: getAttributes,
+  getAttribute: getAttribute,
+  setAttribute: setAttribute,
+  removeAttribute: removeAttribute,
+  blockTextSelection: blockTextSelection,
+  unblockTextSelection: unblockTextSelection,
+  getBoundingClientRect: getBoundingClientRect,
+  findPosition: findPosition,
+  getPointerPosition: getPointerPosition,
+  isTextNode: isTextNode,
+  emptyEl: emptyEl,
+  normalizeContent: normalizeContent,
+  appendContent: appendContent,
+  insertContent: insertContent,
+  isSingleLeftClick: isSingleLeftClick,
+  $: $,
+  $$: $$,
+  computedStyle: computedStyle,
+  copyStyleSheetsToWindow: copyStyleSheetsToWindow
+});
+
+/**
+ * @file setup.js - Functions for setting up a player without
+ * user interaction based on the data-setup `attribute` of the video tag.
+ *
+ * @module setup
+ */
+let _windowLoaded = false;
+let videojs$1;
+
+/**
+ * Set up any tags that have a data-setup `attribute` when the player is started.
+ */
+const autoSetup = function () {
+  if (videojs$1.options.autoSetup === false) {
+    return;
+  }
+  const vids = Array.prototype.slice.call(document__default["default"].getElementsByTagName('video'));
+  const audios = Array.prototype.slice.call(document__default["default"].getElementsByTagName('audio'));
+  const divs = Array.prototype.slice.call(document__default["default"].getElementsByTagName('video-js'));
+  const mediaEls = vids.concat(audios, divs);
+
+  // Check if any media elements exist
+  if (mediaEls && mediaEls.length > 0) {
+    for (let i = 0, e = mediaEls.length; i < e; i++) {
+      const mediaEl = mediaEls[i];
+
+      // Check if element exists, has getAttribute func.
+      if (mediaEl && mediaEl.getAttribute) {
+        // Make sure this player hasn't already been set up.
+        if (mediaEl.player === undefined) {
+          const options = mediaEl.getAttribute('data-setup');
+
+          // Check if data-setup attr exists.
+          // We only auto-setup if they've added the data-setup attr.
+          if (options !== null) {
+            // Create new video.js instance.
+            videojs$1(mediaEl);
+          }
+        }
+
+        // If getAttribute isn't defined, we need to wait for the DOM.
+      } else {
+        autoSetupTimeout(1);
+        break;
+      }
+    }
+
+    // No videos were found, so keep looping unless page is finished loading.
+  } else if (!_windowLoaded) {
+    autoSetupTimeout(1);
+  }
+};
+
+/**
+ * Wait until the page is loaded before running autoSetup. This will be called in
+ * autoSetup if `hasLoaded` returns false.
+ *
+ * @param {number} wait
+ *        How long to wait in ms
+ *
+ * @param {module:videojs} [vjs]
+ *        The videojs library function
+ */
+function autoSetupTimeout(wait, vjs) {
+  // Protect against breakage in non-browser environments
+  if (!isReal()) {
+    return;
+  }
+  if (vjs) {
+    videojs$1 = vjs;
+  }
+  window__default["default"].setTimeout(autoSetup, wait);
+}
+
+/**
+ * Used to set the internal tracking of window loaded state to true.
+ *
+ * @private
+ */
+function setWindowLoaded() {
+  _windowLoaded = true;
+  window__default["default"].removeEventListener('load', setWindowLoaded);
+}
+if (isReal()) {
+  if (document__default["default"].readyState === 'complete') {
+    setWindowLoaded();
+  } else {
+    /**
+     * Listen for the load event on window, and set _windowLoaded to true.
+     *
+     * We use a standard event listener here to avoid incrementing the GUID
+     * before any players are created.
+     *
+     * @listens load
+     */
+    window__default["default"].addEventListener('load', setWindowLoaded);
+  }
+}
+
+/**
+ * @file stylesheet.js
+ * @module stylesheet
+ */
+
+/**
+ * Create a DOM style element given a className for it.
+ *
+ * @param {string} className
+ *        The className to add to the created style element.
+ *
+ * @return {Element}
+ *         The element that was created.
+ */
+const createStyleElement = function (className) {
+  const style = document__default["default"].createElement('style');
+  style.className = className;
+  return style;
+};
+
+/**
+ * Add text to a DOM element.
+ *
+ * @param {Element} el
+ *        The Element to add text content to.
+ *
+ * @param {string} content
+ *        The text to add to the element.
+ */
+const setTextContent = function (el, content) {
+  if (el.styleSheet) {
+    el.styleSheet.cssText = content;
+  } else {
+    el.textContent = content;
+  }
+};
+
+/**
+ * @file dom-data.js
+ * @module dom-data
+ */
+
+/**
+ * Element Data Store.
+ *
+ * Allows for binding data to an element without putting it directly on the
+ * element. Ex. Event listeners are stored here.
+ * (also from jsninja.com, slightly modified and updated for closure compiler)
+ *
+ * @type {Object}
+ * @private
+ */
+var DomData = new WeakMap();
+
+/**
+ * @file guid.js
+ * @module guid
+ */
+
+// Default value for GUIDs. This allows us to reset the GUID counter in tests.
+//
+// The initial GUID is 3 because some users have come to rely on the first
+// default player ID ending up as `vjs_video_3`.
+//
+// See: https://github.com/videojs/video.js/pull/6216
+const _initialGuid = 3;
+
+/**
+ * Unique ID for an element or function
+ *
+ * @type {Number}
+ */
+let _guid = _initialGuid;
+
+/**
+ * Get a unique auto-incrementing ID by number that has not been returned before.
+ *
+ * @return {number}
+ *         A new unique ID.
+ */
+function newGUID() {
+  return _guid++;
+}
+
+/**
+ * @file events.js. An Event System (John Resig - Secrets of a JS Ninja http://jsninja.com/)
+ * (Original book version wasn't completely usable, so fixed some things and made Closure Compiler compatible)
+ * This should work very similarly to jQuery's events, however it's based off the book version which isn't as
+ * robust as jquery's, so there's probably some differences.
+ *
+ * @file events.js
+ * @module events
+ */
+
+/**
+ * Clean up the listener cache and dispatchers
+ *
+ * @param {Element|Object} elem
+ *        Element to clean up
+ *
+ * @param {string} type
+ *        Type of event to clean up
+ */
+function _cleanUpEvents(elem, type) {
+  if (!DomData.has(elem)) {
+    return;
+  }
+  const data = DomData.get(elem);
+
+  // Remove the events of a particular type if there are none left
+  if (data.handlers[type].length === 0) {
+    delete data.handlers[type];
+    // data.handlers[type] = null;
+    // Setting to null was causing an error with data.handlers
+
+    // Remove the meta-handler from the element
+    if (elem.removeEventListener) {
+      elem.removeEventListener(type, data.dispatcher, false);
+    } else if (elem.detachEvent) {
+      elem.detachEvent('on' + type, data.dispatcher);
+    }
+  }
+
+  // Remove the events object if there are no types left
+  if (Object.getOwnPropertyNames(data.handlers).length <= 0) {
+    delete data.handlers;
+    delete data.dispatcher;
+    delete data.disabled;
+  }
+
+  // Finally remove the element data if there is no data left
+  if (Object.getOwnPropertyNames(data).length === 0) {
+    DomData.delete(elem);
+  }
+}
+
+/**
+ * Loops through an array of event types and calls the requested method for each type.
+ *
+ * @param {Function} fn
+ *        The event method we want to use.
+ *
+ * @param {Element|Object} elem
+ *        Element or object to bind listeners to
+ *
+ * @param {string[]} types
+ *        Type of event to bind to.
+ *
+ * @param {Function} callback
+ *        Event listener.
+ */
+function _handleMultipleEvents(fn, elem, types, callback) {
+  types.forEach(function (type) {
+    // Call the event method for each one of the types
+    fn(elem, type, callback);
+  });
+}
+
+/**
+ * Fix a native event to have standard property values
+ *
+ * @param {Object} event
+ *        Event object to fix.
+ *
+ * @return {Object}
+ *         Fixed event object.
+ */
+function fixEvent(event) {
+  if (event.fixed_) {
+    return event;
+  }
+  function returnTrue() {
+    return true;
+  }
+  function returnFalse() {
+    return false;
+  }
+
+  // Test if fixing up is needed
+  // Used to check if !event.stopPropagation instead of isPropagationStopped
+  // But native events return true for stopPropagation, but don't have
+  // other expected methods like isPropagationStopped. Seems to be a problem
+  // with the Javascript Ninja code. So we're just overriding all events now.
+  if (!event || !event.isPropagationStopped || !event.isImmediatePropagationStopped) {
+    const old = event || window__default["default"].event;
+    event = {};
+    // Clone the old object so that we can modify the values event = {};
+    // IE8 Doesn't like when you mess with native event properties
+    // Firefox returns false for event.hasOwnProperty('type') and other props
+    //  which makes copying more difficult.
+    // TODO: Probably best to create a whitelist of event props
+    for (const key in old) {
+      // Safari 6.0.3 warns you if you try to copy deprecated layerX/Y
+      // Chrome warns you if you try to copy deprecated keyboardEvent.keyLocation
+      // and webkitMovementX/Y
+      // Lighthouse complains if Event.path is copied
+      if (key !== 'layerX' && key !== 'layerY' && key !== 'keyLocation' && key !== 'webkitMovementX' && key !== 'webkitMovementY' && key !== 'path') {
+        // Chrome 32+ warns if you try to copy deprecated returnValue, but
+        // we still want to if preventDefault isn't supported (IE8).
+        if (!(key === 'returnValue' && old.preventDefault)) {
+          event[key] = old[key];
+        }
+      }
+    }
+
+    // The event occurred on this element
+    if (!event.target) {
+      event.target = event.srcElement || document__default["default"];
+    }
+
+    // Handle which other element the event is related to
+    if (!event.relatedTarget) {
+      event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
+    }
+
+    // Stop the default browser action
+    event.preventDefault = function () {
+      if (old.preventDefault) {
+        old.preventDefault();
+      }
+      event.returnValue = false;
+      old.returnValue = false;
+      event.defaultPrevented = true;
+    };
+    event.defaultPrevented = false;
+
+    // Stop the event from bubbling
+    event.stopPropagation = function () {
+      if (old.stopPropagation) {
+        old.stopPropagation();
+      }
+      event.cancelBubble = true;
+      old.cancelBubble = true;
+      event.isPropagationStopped = returnTrue;
+    };
+    event.isPropagationStopped = returnFalse;
+
+    // Stop the event from bubbling and executing other handlers
+    event.stopImmediatePropagation = function () {
+      if (old.stopImmediatePropagation) {
+        old.stopImmediatePropagation();
+      }
+      event.isImmediatePropagationStopped = returnTrue;
+      event.stopPropagation();
+    };
+    event.isImmediatePropagationStopped = returnFalse;
+
+    // Handle mouse position
+    if (event.clientX !== null && event.clientX !== undefined) {
+      const doc = document__default["default"].documentElement;
+      const body = document__default["default"].body;
+      event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
+      event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
+    }
+
+    // Handle key presses
+    event.which = event.charCode || event.keyCode;
+
+    // Fix button for mouse clicks:
+    // 0 == left; 1 == middle; 2 == right
+    if (event.button !== null && event.button !== undefined) {
+      // The following is disabled because it does not pass videojs-standard
+      // and... yikes.
+      /* eslint-disable */
+      event.button = event.button & 1 ? 0 : event.button & 4 ? 1 : event.button & 2 ? 2 : 0;
+      /* eslint-enable */
+    }
+  }
+
+  event.fixed_ = true;
+  // Returns fixed-up instance
+  return event;
+}
+
+/**
+ * Whether passive event listeners are supported
+ */
+let _supportsPassive;
+const supportsPassive = function () {
+  if (typeof _supportsPassive !== 'boolean') {
+    _supportsPassive = false;
+    try {
+      const opts = Object.defineProperty({}, 'passive', {
+        get() {
+          _supportsPassive = true;
+        }
+      });
+      window__default["default"].addEventListener('test', null, opts);
+      window__default["default"].removeEventListener('test', null, opts);
+    } catch (e) {
+      // disregard
+    }
+  }
+  return _supportsPassive;
+};
+
+/**
+ * Touch events Chrome expects to be passive
+ */
+const passiveEvents = ['touchstart', 'touchmove'];
+
+/**
+ * Add an event listener to element
+ * It stores the handler function in a separate cache object
+ * and adds a generic handler to the element's event,
+ * along with a unique id (guid) to the element.
+ *
+ * @param {Element|Object} elem
+ *        Element or object to bind listeners to
+ *
+ * @param {string|string[]} type
+ *        Type of event to bind to.
+ *
+ * @param {Function} fn
+ *        Event listener.
+ */
+function on(elem, type, fn) {
+  if (Array.isArray(type)) {
+    return _handleMultipleEvents(on, elem, type, fn);
+  }
+  if (!DomData.has(elem)) {
+    DomData.set(elem, {});
+  }
+  const data = DomData.get(elem);
+
+  // We need a place to store all our handler data
+  if (!data.handlers) {
+    data.handlers = {};
+  }
+  if (!data.handlers[type]) {
+    data.handlers[type] = [];
+  }
+  if (!fn.guid) {
+    fn.guid = newGUID();
+  }
+  data.handlers[type].push(fn);
+  if (!data.dispatcher) {
+    data.disabled = false;
+    data.dispatcher = function (event, hash) {
+      if (data.disabled) {
+        return;
+      }
+      event = fixEvent(event);
+      const handlers = data.handlers[event.type];
+      if (handlers) {
+        // Copy handlers so if handlers are added/removed during the process it doesn't throw everything off.
+        const handlersCopy = handlers.slice(0);
+        for (let m = 0, n = handlersCopy.length; m < n; m++) {
+          if (event.isImmediatePropagationStopped()) {
+            break;
+          } else {
+            try {
+              handlersCopy[m].call(elem, event, hash);
+            } catch (e) {
+              log$1.error(e);
+            }
+          }
+        }
+      }
+    };
+  }
+  if (data.handlers[type].length === 1) {
+    if (elem.addEventListener) {
+      let options = false;
+      if (supportsPassive() && passiveEvents.indexOf(type) > -1) {
+        options = {
+          passive: true
+        };
+      }
+      elem.addEventListener(type, data.dispatcher, options);
+    } else if (elem.attachEvent) {
+      elem.attachEvent('on' + type, data.dispatcher);
+    }
+  }
+}
+
+/**
+ * Removes event listeners from an element
+ *
+ * @param {Element|Object} elem
+ *        Object to remove listeners from.
+ *
+ * @param {string|string[]} [type]
+ *        Type of listener to remove. Don't include to remove all events from element.
+ *
+ * @param {Function} [fn]
+ *        Specific listener to remove. Don't include to remove listeners for an event
+ *        type.
+ */
+function off(elem, type, fn) {
+  // Don't want to add a cache object through getElData if not needed
+  if (!DomData.has(elem)) {
+    return;
+  }
+  const data = DomData.get(elem);
+
+  // If no events exist, nothing to unbind
+  if (!data.handlers) {
+    return;
+  }
+  if (Array.isArray(type)) {
+    return _handleMultipleEvents(off, elem, type, fn);
+  }
+
+  // Utility function
+  const removeType = function (el, t) {
+    data.handlers[t] = [];
+    _cleanUpEvents(el, t);
+  };
+
+  // Are we removing all bound events?
+  if (type === undefined) {
+    for (const t in data.handlers) {
+      if (Object.prototype.hasOwnProperty.call(data.handlers || {}, t)) {
+        removeType(elem, t);
+      }
+    }
+    return;
+  }
+  const handlers = data.handlers[type];
+
+  // If no handlers exist, nothing to unbind
+  if (!handlers) {
+    return;
+  }
+
+  // If no listener was provided, remove all listeners for type
+  if (!fn) {
+    removeType(elem, type);
+    return;
+  }
+
+  // We're only removing a single handler
+  if (fn.guid) {
+    for (let n = 0; n < handlers.length; n++) {
+      if (handlers[n].guid === fn.guid) {
+        handlers.splice(n--, 1);
+      }
+    }
+  }
+  _cleanUpEvents(elem, type);
+}
+
+/**
+ * Trigger an event for an element
+ *
+ * @param {Element|Object} elem
+ *        Element to trigger an event on
+ *
+ * @param {EventTarget~Event|string} event
+ *        A string (the type) or an event object with a type attribute
+ *
+ * @param {Object} [hash]
+ *        data hash to pass along with the event
+ *
+ * @return {boolean|undefined}
+ *         Returns the opposite of `defaultPrevented` if default was
+ *         prevented. Otherwise, returns `undefined`
+ */
+function trigger(elem, event, hash) {
+  // Fetches element data and a reference to the parent (for bubbling).
+  // Don't want to add a data object to cache for every parent,
+  // so checking hasElData first.
+  const elemData = DomData.has(elem) ? DomData.get(elem) : {};
+  const parent = elem.parentNode || elem.ownerDocument;
+  // type = event.type || event,
+  // handler;
+
+  // If an event name was passed as a string, creates an event out of it
+  if (typeof event === 'string') {
+    event = {
+      type: event,
+      target: elem
+    };
+  } else if (!event.target) {
+    event.target = elem;
+  }
+
+  // Normalizes the event properties.
+  event = fixEvent(event);
+
+  // If the passed element has a dispatcher, executes the established handlers.
+  if (elemData.dispatcher) {
+    elemData.dispatcher.call(elem, event, hash);
+  }
+
+  // Unless explicitly stopped or the event does not bubble (e.g. media events)
+  // recursively calls this function to bubble the event up the DOM.
+  if (parent && !event.isPropagationStopped() && event.bubbles === true) {
+    trigger.call(null, parent, event, hash);
+
+    // If at the top of the DOM, triggers the default action unless disabled.
+  } else if (!parent && !event.defaultPrevented && event.target && event.target[event.type]) {
+    if (!DomData.has(event.target)) {
+      DomData.set(event.target, {});
+    }
+    const targetData = DomData.get(event.target);
+
+    // Checks if the target has a default action for this event.
+    if (event.target[event.type]) {
+      // Temporarily disables event dispatching on the target as we have already executed the handler.
+      targetData.disabled = true;
+      // Executes the default action.
+      if (typeof event.target[event.type] === 'function') {
+        event.target[event.type]();
+      }
+      // Re-enables event dispatching.
+      targetData.disabled = false;
+    }
+  }
+
+  // Inform the triggerer if the default was prevented by returning false
+  return !event.defaultPrevented;
+}
+
+/**
+ * Trigger a listener only once for an event.
+ *
+ * @param {Element|Object} elem
+ *        Element or object to bind to.
+ *
+ * @param {string|string[]} type
+ *        Name/type of event
+ *
+ * @param {Event~EventListener} fn
+ *        Event listener function
+ */
+function one(elem, type, fn) {
+  if (Array.isArray(type)) {
+    return _handleMultipleEvents(one, elem, type, fn);
+  }
+  const func = function () {
+    off(elem, type, func);
+    fn.apply(this, arguments);
+  };
+
+  // copy the guid to the new function so it can removed using the original function's ID
+  func.guid = fn.guid = fn.guid || newGUID();
+  on(elem, type, func);
+}
+
+/**
+ * Trigger a listener only once and then turn if off for all
+ * configured events
+ *
+ * @param {Element|Object} elem
+ *        Element or object to bind to.
+ *
+ * @param {string|string[]} type
+ *        Name/type of event
+ *
+ * @param {Event~EventListener} fn
+ *        Event listener function
+ */
+function any(elem, type, fn) {
+  const func = function () {
+    off(elem, type, func);
+    fn.apply(this, arguments);
+  };
+
+  // copy the guid to the new function so it can removed using the original function's ID
+  func.guid = fn.guid = fn.guid || newGUID();
+
+  // multiple ons, but one off for everything
+  on(elem, type, func);
+}
+
+var Events = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  fixEvent: fixEvent,
+  on: on,
+  off: off,
+  trigger: trigger,
+  one: one,
+  any: any
+});
+
+/**
+ * @file fn.js
+ * @module fn
+ */
+const UPDATE_REFRESH_INTERVAL = 30;
+
+/**
+ * A private, internal-only function for changing the context of a function.
+ *
+ * It also stores a unique id on the function so it can be easily removed from
+ * events.
+ *
+ * @private
+ * @function
+ * @param    {*} context
+ *           The object to bind as scope.
+ *
+ * @param    {Function} fn
+ *           The function to be bound to a scope.
+ *
+ * @param    {number} [uid]
+ *           An optional unique ID for the function to be set
+ *
+ * @return   {Function}
+ *           The new function that will be bound into the context given
+ */
+const bind_ = function (context, fn, uid) {
+  // Make sure the function has a unique ID
+  if (!fn.guid) {
+    fn.guid = newGUID();
+  }
+
+  // Create the new function that changes the context
+  const bound = fn.bind(context);
+
+  // Allow for the ability to individualize this function
+  // Needed in the case where multiple objects might share the same prototype
+  // IF both items add an event listener with the same function, then you try to remove just one
+  // it will remove both because they both have the same guid.
+  // when using this, you need to use the bind method when you remove the listener as well.
+  // currently used in text tracks
+  bound.guid = uid ? uid + '_' + fn.guid : fn.guid;
+  return bound;
+};
+
+/**
+ * Wraps the given function, `fn`, with a new function that only invokes `fn`
+ * at most once per every `wait` milliseconds.
+ *
+ * @function
+ * @param    {Function} fn
+ *           The function to be throttled.
+ *
+ * @param    {number}   wait
+ *           The number of milliseconds by which to throttle.
+ *
+ * @return   {Function}
+ */
+const throttle = function (fn, wait) {
+  let last = window__default["default"].performance.now();
+  const throttled = function (...args) {
+    const now = window__default["default"].performance.now();
+    if (now - last >= wait) {
+      fn(...args);
+      last = now;
+    }
+  };
+  return throttled;
+};
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked.
+ *
+ * Inspired by lodash and underscore implementations.
+ *
+ * @function
+ * @param    {Function} func
+ *           The function to wrap with debounce behavior.
+ *
+ * @param    {number} wait
+ *           The number of milliseconds to wait after the last invocation.
+ *
+ * @param    {boolean} [immediate]
+ *           Whether or not to invoke the function immediately upon creation.
+ *
+ * @param    {Object} [context=window]
+ *           The "context" in which the debounced function should debounce. For
+ *           example, if this function should be tied to a Video.js player,
+ *           the player can be passed here. Alternatively, defaults to the
+ *           global `window` object.
+ *
+ * @return   {Function}
+ *           A debounced function.
+ */
+const debounce = function (func, wait, immediate, context = window__default["default"]) {
+  let timeout;
+  const cancel = () => {
+    context.clearTimeout(timeout);
+    timeout = null;
+  };
+
+  /* eslint-disable consistent-this */
+  const debounced = function () {
+    const self = this;
+    const args = arguments;
+    let later = function () {
+      timeout = null;
+      later = null;
+      if (!immediate) {
+        func.apply(self, args);
+      }
+    };
+    if (!timeout && immediate) {
+      func.apply(self, args);
+    }
+    context.clearTimeout(timeout);
+    timeout = context.setTimeout(later, wait);
+  };
+  /* eslint-enable consistent-this */
+
+  debounced.cancel = cancel;
+  return debounced;
+};
+
+var Fn = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  UPDATE_REFRESH_INTERVAL: UPDATE_REFRESH_INTERVAL,
+  bind_: bind_,
+  throttle: throttle,
+  debounce: debounce
+});
+
+/**
+ * @file src/js/event-target.js
+ */
+let EVENT_MAP;
+
+/**
+ * `EventTarget` is a class that can have the same API as the DOM `EventTarget`. It
+ * adds shorthand functions that wrap around lengthy functions. For example:
+ * the `on` function is a wrapper around `addEventListener`.
+ *
+ * @see [EventTarget Spec]{@link https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget}
+ * @class EventTarget
+ */
+class EventTarget$2 {
+  /**
+   * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+   * function that will get called when an event with a certain name gets triggered.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} fn
+   *        The function to call with `EventTarget`s
+   */
+  on(type, fn) {
+    // Remove the addEventListener alias before calling Events.on
+    // so we don't get into an infinite type loop
+    const ael = this.addEventListener;
+    this.addEventListener = () => {};
+    on(this, type, fn);
+    this.addEventListener = ael;
+  }
+  /**
+   * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+   * This makes it so that the `event listener` will no longer get called when the
+   * named event happens.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} fn
+   *        The function to remove.
+   */
+  off(type, fn) {
+    off(this, type, fn);
+  }
+  /**
+   * This function will add an `event listener` that gets triggered only once. After the
+   * first trigger it will get removed. This is like adding an `event listener`
+   * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} fn
+   *        The function to be called once for each event name.
+   */
+  one(type, fn) {
+    // Remove the addEventListener aliasing Events.on
+    // so we don't get into an infinite type loop
+    const ael = this.addEventListener;
+    this.addEventListener = () => {};
+    one(this, type, fn);
+    this.addEventListener = ael;
+  }
+  /**
+   * This function will add an `event listener` that gets triggered only once and is
+   * removed from all events. This is like adding an array of `event listener`s
+   * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+   * first time it is triggered.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} fn
+   *        The function to be called once for each event name.
+   */
+  any(type, fn) {
+    // Remove the addEventListener aliasing Events.on
+    // so we don't get into an infinite type loop
+    const ael = this.addEventListener;
+    this.addEventListener = () => {};
+    any(this, type, fn);
+    this.addEventListener = ael;
+  }
+  /**
+   * This function causes an event to happen. This will then cause any `event listeners`
+   * that are waiting for that event, to get called. If there are no `event listeners`
+   * for an event then nothing will happen.
+   *
+   * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+   * Trigger will also call the `on` + `uppercaseEventName` function.
+   *
+   * Example:
+   * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+   * `onClick` if it exists.
+   *
+   * @param {string|EventTarget~Event|Object} event
+   *        The name of the event, an `Event`, or an object with a key of type set to
+   *        an event name.
+   */
+  trigger(event) {
+    const type = event.type || event;
+
+    // deprecation
+    // In a future version we should default target to `this`
+    // similar to how we default the target to `elem` in
+    // `Events.trigger`. Right now the default `target` will be
+    // `document` due to the `Event.fixEvent` call.
+    if (typeof event === 'string') {
+      event = {
+        type
+      };
+    }
+    event = fixEvent(event);
+    if (this.allowedEvents_[type] && this['on' + type]) {
+      this['on' + type](event);
+    }
+    trigger(this, event);
+  }
+  queueTrigger(event) {
+    // only set up EVENT_MAP if it'll be used
+    if (!EVENT_MAP) {
+      EVENT_MAP = new Map();
+    }
+    const type = event.type || event;
+    let map = EVENT_MAP.get(this);
+    if (!map) {
+      map = new Map();
+      EVENT_MAP.set(this, map);
+    }
+    const oldTimeout = map.get(type);
+    map.delete(type);
+    window__default["default"].clearTimeout(oldTimeout);
+    const timeout = window__default["default"].setTimeout(() => {
+      map.delete(type);
+      // if we cleared out all timeouts for the current target, delete its map
+      if (map.size === 0) {
+        map = null;
+        EVENT_MAP.delete(this);
+      }
+      this.trigger(event);
+    }, 0);
+    map.set(type, timeout);
+  }
+}
+
+/**
+ * A Custom DOM event.
+ *
+ * @typedef {CustomEvent} Event
+ * @see [Properties]{@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent}
+ */
+
+/**
+ * All event listeners should follow the following format.
+ *
+ * @callback EventListener
+ * @this {EventTarget}
+ *
+ * @param {Event} event
+ *        the event that triggered this function
+ *
+ * @param {Object} [hash]
+ *        hash of data sent during the event
+ */
+
+/**
+ * An object containing event names as keys and booleans as values.
+ *
+ * > NOTE: If an event name is set to a true value here {@link EventTarget#trigger}
+ *         will have extra functionality. See that function for more information.
+ *
+ * @property EventTarget.prototype.allowedEvents_
+ * @protected
+ */
+EventTarget$2.prototype.allowedEvents_ = {};
+
+/**
+ * An alias of {@link EventTarget#on}. Allows `EventTarget` to mimic
+ * the standard DOM API.
+ *
+ * @function
+ * @see {@link EventTarget#on}
+ */
+EventTarget$2.prototype.addEventListener = EventTarget$2.prototype.on;
+
+/**
+ * An alias of {@link EventTarget#off}. Allows `EventTarget` to mimic
+ * the standard DOM API.
+ *
+ * @function
+ * @see {@link EventTarget#off}
+ */
+EventTarget$2.prototype.removeEventListener = EventTarget$2.prototype.off;
+
+/**
+ * An alias of {@link EventTarget#trigger}. Allows `EventTarget` to mimic
+ * the standard DOM API.
+ *
+ * @function
+ * @see {@link EventTarget#trigger}
+ */
+EventTarget$2.prototype.dispatchEvent = EventTarget$2.prototype.trigger;
+
+/**
+ * @file mixins/evented.js
+ * @module evented
+ */
+const objName = obj => {
+  if (typeof obj.name === 'function') {
+    return obj.name();
+  }
+  if (typeof obj.name === 'string') {
+    return obj.name;
+  }
+  if (obj.name_) {
+    return obj.name_;
+  }
+  if (obj.constructor && obj.constructor.name) {
+    return obj.constructor.name;
+  }
+  return typeof obj;
+};
+
+/**
+ * Returns whether or not an object has had the evented mixin applied.
+ *
+ * @param  {Object} object
+ *         An object to test.
+ *
+ * @return {boolean}
+ *         Whether or not the object appears to be evented.
+ */
+const isEvented = object => object instanceof EventTarget$2 || !!object.eventBusEl_ && ['on', 'one', 'off', 'trigger'].every(k => typeof object[k] === 'function');
+
+/**
+ * Adds a callback to run after the evented mixin applied.
+ *
+ * @param  {Object} target
+ *         An object to Add
+ * @param  {Function} callback
+ *         The callback to run.
+ */
+const addEventedCallback = (target, callback) => {
+  if (isEvented(target)) {
+    callback();
+  } else {
+    if (!target.eventedCallbacks) {
+      target.eventedCallbacks = [];
+    }
+    target.eventedCallbacks.push(callback);
+  }
+};
+
+/**
+ * Whether a value is a valid event type - non-empty string or array.
+ *
+ * @private
+ * @param  {string|Array} type
+ *         The type value to test.
+ *
+ * @return {boolean}
+ *         Whether or not the type is a valid event type.
+ */
+const isValidEventType = type =>
+// The regex here verifies that the `type` contains at least one non-
+// whitespace character.
+typeof type === 'string' && /\S/.test(type) || Array.isArray(type) && !!type.length;
+
+/**
+ * Validates a value to determine if it is a valid event target. Throws if not.
+ *
+ * @private
+ * @throws {Error}
+ *         If the target does not appear to be a valid event target.
+ *
+ * @param  {Object} target
+ *         The object to test.
+ *
+ * @param  {Object} obj
+ *         The evented object we are validating for
+ *
+ * @param  {string} fnName
+ *         The name of the evented mixin function that called this.
+ */
+const validateTarget = (target, obj, fnName) => {
+  if (!target || !target.nodeName && !isEvented(target)) {
+    throw new Error(`Invalid target for ${objName(obj)}#${fnName}; must be a DOM node or evented object.`);
+  }
+};
+
+/**
+ * Validates a value to determine if it is a valid event target. Throws if not.
+ *
+ * @private
+ * @throws {Error}
+ *         If the type does not appear to be a valid event type.
+ *
+ * @param  {string|Array} type
+ *         The type to test.
+ *
+ * @param  {Object} obj
+*         The evented object we are validating for
+ *
+ * @param  {string} fnName
+ *         The name of the evented mixin function that called this.
+ */
+const validateEventType = (type, obj, fnName) => {
+  if (!isValidEventType(type)) {
+    throw new Error(`Invalid event type for ${objName(obj)}#${fnName}; must be a non-empty string or array.`);
+  }
+};
+
+/**
+ * Validates a value to determine if it is a valid listener. Throws if not.
+ *
+ * @private
+ * @throws {Error}
+ *         If the listener is not a function.
+ *
+ * @param  {Function} listener
+ *         The listener to test.
+ *
+ * @param  {Object} obj
+ *         The evented object we are validating for
+ *
+ * @param  {string} fnName
+ *         The name of the evented mixin function that called this.
+ */
+const validateListener = (listener, obj, fnName) => {
+  if (typeof listener !== 'function') {
+    throw new Error(`Invalid listener for ${objName(obj)}#${fnName}; must be a function.`);
+  }
+};
+
+/**
+ * Takes an array of arguments given to `on()` or `one()`, validates them, and
+ * normalizes them into an object.
+ *
+ * @private
+ * @param  {Object} self
+ *         The evented object on which `on()` or `one()` was called. This
+ *         object will be bound as the `this` value for the listener.
+ *
+ * @param  {Array} args
+ *         An array of arguments passed to `on()` or `one()`.
+ *
+ * @param  {string} fnName
+ *         The name of the evented mixin function that called this.
+ *
+ * @return {Object}
+ *         An object containing useful values for `on()` or `one()` calls.
+ */
+const normalizeListenArgs = (self, args, fnName) => {
+  // If the number of arguments is less than 3, the target is always the
+  // evented object itself.
+  const isTargetingSelf = args.length < 3 || args[0] === self || args[0] === self.eventBusEl_;
+  let target;
+  let type;
+  let listener;
+  if (isTargetingSelf) {
+    target = self.eventBusEl_;
+
+    // Deal with cases where we got 3 arguments, but we are still listening to
+    // the evented object itself.
+    if (args.length >= 3) {
+      args.shift();
+    }
+    [type, listener] = args;
+  } else {
+    [target, type, listener] = args;
+  }
+  validateTarget(target, self, fnName);
+  validateEventType(type, self, fnName);
+  validateListener(listener, self, fnName);
+  listener = bind_(self, listener);
+  return {
+    isTargetingSelf,
+    target,
+    type,
+    listener
+  };
+};
+
+/**
+ * Adds the listener to the event type(s) on the target, normalizing for
+ * the type of target.
+ *
+ * @private
+ * @param  {Element|Object} target
+ *         A DOM node or evented object.
+ *
+ * @param  {string} method
+ *         The event binding method to use ("on" or "one").
+ *
+ * @param  {string|Array} type
+ *         One or more event type(s).
+ *
+ * @param  {Function} listener
+ *         A listener function.
+ */
+const listen = (target, method, type, listener) => {
+  validateTarget(target, target, method);
+  if (target.nodeName) {
+    Events[method](target, type, listener);
+  } else {
+    target[method](type, listener);
+  }
+};
+
+/**
+ * Contains methods that provide event capabilities to an object which is passed
+ * to {@link module:evented|evented}.
+ *
+ * @mixin EventedMixin
+ */
+const EventedMixin = {
+  /**
+   * Add a listener to an event (or events) on this object or another evented
+   * object.
+   *
+   * @param  {string|Array|Element|Object} targetOrType
+   *         If this is a string or array, it represents the event type(s)
+   *         that will trigger the listener.
+   *
+   *         Another evented object can be passed here instead, which will
+   *         cause the listener to listen for events on _that_ object.
+   *
+   *         In either case, the listener's `this` value will be bound to
+   *         this object.
+   *
+   * @param  {string|Array|Function} typeOrListener
+   *         If the first argument was a string or array, this should be the
+   *         listener function. Otherwise, this is a string or array of event
+   *         type(s).
+   *
+   * @param  {Function} [listener]
+   *         If the first argument was another evented object, this will be
+   *         the listener function.
+   */
+  on(...args) {
+    const {
+      isTargetingSelf,
+      target,
+      type,
+      listener
+    } = normalizeListenArgs(this, args, 'on');
+    listen(target, 'on', type, listener);
+
+    // If this object is listening to another evented object.
+    if (!isTargetingSelf) {
+      // If this object is disposed, remove the listener.
+      const removeListenerOnDispose = () => this.off(target, type, listener);
+
+      // Use the same function ID as the listener so we can remove it later it
+      // using the ID of the original listener.
+      removeListenerOnDispose.guid = listener.guid;
+
+      // Add a listener to the target's dispose event as well. This ensures
+      // that if the target is disposed BEFORE this object, we remove the
+      // removal listener that was just added. Otherwise, we create a memory leak.
+      const removeRemoverOnTargetDispose = () => this.off('dispose', removeListenerOnDispose);
+
+      // Use the same function ID as the listener so we can remove it later
+      // it using the ID of the original listener.
+      removeRemoverOnTargetDispose.guid = listener.guid;
+      listen(this, 'on', 'dispose', removeListenerOnDispose);
+      listen(target, 'on', 'dispose', removeRemoverOnTargetDispose);
+    }
+  },
+  /**
+   * Add a listener to an event (or events) on this object or another evented
+   * object. The listener will be called once per event and then removed.
+   *
+   * @param  {string|Array|Element|Object} targetOrType
+   *         If this is a string or array, it represents the event type(s)
+   *         that will trigger the listener.
+   *
+   *         Another evented object can be passed here instead, which will
+   *         cause the listener to listen for events on _that_ object.
+   *
+   *         In either case, the listener's `this` value will be bound to
+   *         this object.
+   *
+   * @param  {string|Array|Function} typeOrListener
+   *         If the first argument was a string or array, this should be the
+   *         listener function. Otherwise, this is a string or array of event
+   *         type(s).
+   *
+   * @param  {Function} [listener]
+   *         If the first argument was another evented object, this will be
+   *         the listener function.
+   */
+  one(...args) {
+    const {
+      isTargetingSelf,
+      target,
+      type,
+      listener
+    } = normalizeListenArgs(this, args, 'one');
+
+    // Targeting this evented object.
+    if (isTargetingSelf) {
+      listen(target, 'one', type, listener);
+
+      // Targeting another evented object.
+    } else {
+      // TODO: This wrapper is incorrect! It should only
+      //       remove the wrapper for the event type that called it.
+      //       Instead all listeners are removed on the first trigger!
+      //       see https://github.com/videojs/video.js/issues/5962
+      const wrapper = (...largs) => {
+        this.off(target, type, wrapper);
+        listener.apply(null, largs);
+      };
+
+      // Use the same function ID as the listener so we can remove it later
+      // it using the ID of the original listener.
+      wrapper.guid = listener.guid;
+      listen(target, 'one', type, wrapper);
+    }
+  },
+  /**
+   * Add a listener to an event (or events) on this object or another evented
+   * object. The listener will only be called once for the first event that is triggered
+   * then removed.
+   *
+   * @param  {string|Array|Element|Object} targetOrType
+   *         If this is a string or array, it represents the event type(s)
+   *         that will trigger the listener.
+   *
+   *         Another evented object can be passed here instead, which will
+   *         cause the listener to listen for events on _that_ object.
+   *
+   *         In either case, the listener's `this` value will be bound to
+   *         this object.
+   *
+   * @param  {string|Array|Function} typeOrListener
+   *         If the first argument was a string or array, this should be the
+   *         listener function. Otherwise, this is a string or array of event
+   *         type(s).
+   *
+   * @param  {Function} [listener]
+   *         If the first argument was another evented object, this will be
+   *         the listener function.
+   */
+  any(...args) {
+    const {
+      isTargetingSelf,
+      target,
+      type,
+      listener
+    } = normalizeListenArgs(this, args, 'any');
+
+    // Targeting this evented object.
+    if (isTargetingSelf) {
+      listen(target, 'any', type, listener);
+
+      // Targeting another evented object.
+    } else {
+      const wrapper = (...largs) => {
+        this.off(target, type, wrapper);
+        listener.apply(null, largs);
+      };
+
+      // Use the same function ID as the listener so we can remove it later
+      // it using the ID of the original listener.
+      wrapper.guid = listener.guid;
+      listen(target, 'any', type, wrapper);
+    }
+  },
+  /**
+   * Removes listener(s) from event(s) on an evented object.
+   *
+   * @param  {string|Array|Element|Object} [targetOrType]
+   *         If this is a string or array, it represents the event type(s).
+   *
+   *         Another evented object can be passed here instead, in which case
+   *         ALL 3 arguments are _required_.
+   *
+   * @param  {string|Array|Function} [typeOrListener]
+   *         If the first argument was a string or array, this may be the
+   *         listener function. Otherwise, this is a string or array of event
+   *         type(s).
+   *
+   * @param  {Function} [listener]
+   *         If the first argument was another evented object, this will be
+   *         the listener function; otherwise, _all_ listeners bound to the
+   *         event type(s) will be removed.
+   */
+  off(targetOrType, typeOrListener, listener) {
+    // Targeting this evented object.
+    if (!targetOrType || isValidEventType(targetOrType)) {
+      off(this.eventBusEl_, targetOrType, typeOrListener);
+
+      // Targeting another evented object.
+    } else {
+      const target = targetOrType;
+      const type = typeOrListener;
+
+      // Fail fast and in a meaningful way!
+      validateTarget(target, this, 'off');
+      validateEventType(type, this, 'off');
+      validateListener(listener, this, 'off');
+
+      // Ensure there's at least a guid, even if the function hasn't been used
+      listener = bind_(this, listener);
+
+      // Remove the dispose listener on this evented object, which was given
+      // the same guid as the event listener in on().
+      this.off('dispose', listener);
+      if (target.nodeName) {
+        off(target, type, listener);
+        off(target, 'dispose', listener);
+      } else if (isEvented(target)) {
+        target.off(type, listener);
+        target.off('dispose', listener);
+      }
+    }
+  },
+  /**
+   * Fire an event on this evented object, causing its listeners to be called.
+   *
+   * @param   {string|Object} event
+   *          An event type or an object with a type property.
+   *
+   * @param   {Object} [hash]
+   *          An additional object to pass along to listeners.
+   *
+   * @return {boolean}
+   *          Whether or not the default behavior was prevented.
+   */
+  trigger(event, hash) {
+    validateTarget(this.eventBusEl_, this, 'trigger');
+    const type = event && typeof event !== 'string' ? event.type : event;
+    if (!isValidEventType(type)) {
+      throw new Error(`Invalid event type for ${objName(this)}#trigger; ` + 'must be a non-empty string or object with a type key that has a non-empty value.');
+    }
+    return trigger(this.eventBusEl_, event, hash);
+  }
+};
+
+/**
+ * Applies {@link module:evented~EventedMixin|EventedMixin} to a target object.
+ *
+ * @param  {Object} target
+ *         The object to which to add event methods.
+ *
+ * @param  {Object} [options={}]
+ *         Options for customizing the mixin behavior.
+ *
+ * @param  {string} [options.eventBusKey]
+ *         By default, adds a `eventBusEl_` DOM element to the target object,
+ *         which is used as an event bus. If the target object already has a
+ *         DOM element that should be used, pass its key here.
+ *
+ * @return {Object}
+ *         The target object.
+ */
+function evented(target, options = {}) {
+  const {
+    eventBusKey
+  } = options;
+
+  // Set or create the eventBusEl_.
+  if (eventBusKey) {
+    if (!target[eventBusKey].nodeName) {
+      throw new Error(`The eventBusKey "${eventBusKey}" does not refer to an element.`);
+    }
+    target.eventBusEl_ = target[eventBusKey];
+  } else {
+    target.eventBusEl_ = createEl('span', {
+      className: 'vjs-event-bus'
+    });
+  }
+  Object.assign(target, EventedMixin);
+  if (target.eventedCallbacks) {
+    target.eventedCallbacks.forEach(callback => {
+      callback();
+    });
+  }
+
+  // When any evented object is disposed, it removes all its listeners.
+  target.on('dispose', () => {
+    target.off();
+    [target, target.el_, target.eventBusEl_].forEach(function (val) {
+      if (val && DomData.has(val)) {
+        DomData.delete(val);
+      }
+    });
+    window__default["default"].setTimeout(() => {
+      target.eventBusEl_ = null;
+    }, 0);
+  });
+  return target;
+}
+
+/**
+ * @file mixins/stateful.js
+ * @module stateful
+ */
+
+/**
+ * Contains methods that provide statefulness to an object which is passed
+ * to {@link module:stateful}.
+ *
+ * @mixin StatefulMixin
+ */
+const StatefulMixin = {
+  /**
+   * A hash containing arbitrary keys and values representing the state of
+   * the object.
+   *
+   * @type {Object}
+   */
+  state: {},
+  /**
+   * Set the state of an object by mutating its
+   * {@link module:stateful~StatefulMixin.state|state} object in place.
+   *
+   * @fires   module:stateful~StatefulMixin#statechanged
+   * @param   {Object|Function} stateUpdates
+   *          A new set of properties to shallow-merge into the plugin state.
+   *          Can be a plain object or a function returning a plain object.
+   *
+   * @return {Object|undefined}
+   *          An object containing changes that occurred. If no changes
+   *          occurred, returns `undefined`.
+   */
+  setState(stateUpdates) {
+    // Support providing the `stateUpdates` state as a function.
+    if (typeof stateUpdates === 'function') {
+      stateUpdates = stateUpdates();
+    }
+    let changes;
+    each(stateUpdates, (value, key) => {
+      // Record the change if the value is different from what's in the
+      // current state.
+      if (this.state[key] !== value) {
+        changes = changes || {};
+        changes[key] = {
+          from: this.state[key],
+          to: value
+        };
+      }
+      this.state[key] = value;
+    });
+
+    // Only trigger "statechange" if there were changes AND we have a trigger
+    // function. This allows us to not require that the target object be an
+    // evented object.
+    if (changes && isEvented(this)) {
+      /**
+       * An event triggered on an object that is both
+       * {@link module:stateful|stateful} and {@link module:evented|evented}
+       * indicating that its state has changed.
+       *
+       * @event    module:stateful~StatefulMixin#statechanged
+       * @type     {Object}
+       * @property {Object} changes
+       *           A hash containing the properties that were changed and
+       *           the values they were changed `from` and `to`.
+       */
+      this.trigger({
+        changes,
+        type: 'statechanged'
+      });
+    }
+    return changes;
+  }
+};
+
+/**
+ * Applies {@link module:stateful~StatefulMixin|StatefulMixin} to a target
+ * object.
+ *
+ * If the target object is {@link module:evented|evented} and has a
+ * `handleStateChanged` method, that method will be automatically bound to the
+ * `statechanged` event on itself.
+ *
+ * @param   {Object} target
+ *          The object to be made stateful.
+ *
+ * @param   {Object} [defaultState]
+ *          A default set of properties to populate the newly-stateful object's
+ *          `state` property.
+ *
+ * @return {Object}
+ *          Returns the `target`.
+ */
+function stateful(target, defaultState) {
+  Object.assign(target, StatefulMixin);
+
+  // This happens after the mixing-in because we need to replace the `state`
+  // added in that step.
+  target.state = Object.assign({}, target.state, defaultState);
+
+  // Auto-bind the `handleStateChanged` method of the target object if it exists.
+  if (typeof target.handleStateChanged === 'function' && isEvented(target)) {
+    target.on('statechanged', target.handleStateChanged);
+  }
+  return target;
+}
+
+/**
+ * @file str.js
+ * @module to-lower-case
+ */
+
+/**
+ * Lowercase the first letter of a string.
+ *
+ * @param {string} string
+ *        String to be lowercased
+ *
+ * @return {string}
+ *         The string with a lowercased first letter
+ */
+const toLowerCase = function (string) {
+  if (typeof string !== 'string') {
+    return string;
+  }
+  return string.replace(/./, w => w.toLowerCase());
+};
+
+/**
+ * Uppercase the first letter of a string.
+ *
+ * @param {string} string
+ *        String to be uppercased
+ *
+ * @return {string}
+ *         The string with an uppercased first letter
+ */
+const toTitleCase$1 = function (string) {
+  if (typeof string !== 'string') {
+    return string;
+  }
+  return string.replace(/./, w => w.toUpperCase());
+};
+
+/**
+ * Compares the TitleCase versions of the two strings for equality.
+ *
+ * @param {string} str1
+ *        The first string to compare
+ *
+ * @param {string} str2
+ *        The second string to compare
+ *
+ * @return {boolean}
+ *         Whether the TitleCase versions of the strings are equal
+ */
+const titleCaseEquals = function (str1, str2) {
+  return toTitleCase$1(str1) === toTitleCase$1(str2);
+};
+
+var Str = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  toLowerCase: toLowerCase,
+  toTitleCase: toTitleCase$1,
+  titleCaseEquals: titleCaseEquals
+});
+
+/**
+ * Player Component - Base class for all UI objects
+ *
+ * @file component.js
+ */
+
+/**
+ * Base class for all UI Components.
+ * Components are UI objects which represent both a javascript object and an element
+ * in the DOM. They can be children of other components, and can have
+ * children themselves.
+ *
+ * Components can also use methods from {@link EventTarget}
+ */
+class Component$1 {
+  /**
+   * A callback that is called when a component is ready. Does not have any
+   * parameters and any callback value will be ignored.
+   *
+   * @callback ReadyCallback
+   * @this Component
+   */
+
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of component options.
+   *
+   * @param {Object[]} [options.children]
+   *        An array of children objects to initialize this component with. Children objects have
+   *        a name property that will be used if more than one component of the same type needs to be
+   *        added.
+   *
+   * @param  {string} [options.className]
+   *         A class or space separated list of classes to add the component
+   *
+   * @param {ReadyCallback} [ready]
+   *        Function that gets called when the `Component` is ready.
+   */
+  constructor(player, options, ready) {
+    // The component might be the player itself and we can't pass `this` to super
+    if (!player && this.play) {
+      this.player_ = player = this; // eslint-disable-line
+    } else {
+      this.player_ = player;
+    }
+    this.isDisposed_ = false;
+
+    // Hold the reference to the parent component via `addChild` method
+    this.parentComponent_ = null;
+
+    // Make a copy of prototype.options_ to protect against overriding defaults
+    this.options_ = merge$1({}, this.options_);
+
+    // Updated options with supplied options
+    options = this.options_ = merge$1(this.options_, options);
+
+    // Get ID from options or options element if one is supplied
+    this.id_ = options.id || options.el && options.el.id;
+
+    // If there was no ID from the options, generate one
+    if (!this.id_) {
+      // Don't require the player ID function in the case of mock players
+      const id = player && player.id && player.id() || 'no_player';
+      this.id_ = `${id}_component_${newGUID()}`;
+    }
+    this.name_ = options.name || null;
+
+    // Create element if one wasn't provided in options
+    if (options.el) {
+      this.el_ = options.el;
+    } else if (options.createEl !== false) {
+      this.el_ = this.createEl();
+    }
+    if (options.className && this.el_) {
+      options.className.split(' ').forEach(c => this.addClass(c));
+    }
+
+    // Remove the placeholder event methods. If the component is evented, the
+    // real methods are added next
+    ['on', 'off', 'one', 'any', 'trigger'].forEach(fn => {
+      this[fn] = undefined;
+    });
+
+    // if evented is anything except false, we want to mixin in evented
+    if (options.evented !== false) {
+      // Make this an evented object and use `el_`, if available, as its event bus
+      evented(this, {
+        eventBusKey: this.el_ ? 'el_' : null
+      });
+      this.handleLanguagechange = this.handleLanguagechange.bind(this);
+      this.on(this.player_, 'languagechange', this.handleLanguagechange);
+    }
+    stateful(this, this.constructor.defaultState);
+    this.children_ = [];
+    this.childIndex_ = {};
+    this.childNameIndex_ = {};
+    this.setTimeoutIds_ = new Set();
+    this.setIntervalIds_ = new Set();
+    this.rafIds_ = new Set();
+    this.namedRafs_ = new Map();
+    this.clearingTimersOnDispose_ = false;
+
+    // Add any child components in options
+    if (options.initChildren !== false) {
+      this.initChildren();
+    }
+
+    // Don't want to trigger ready here or it will go before init is actually
+    // finished for all children that run this constructor
+    this.ready(ready);
+    if (options.reportTouchActivity !== false) {
+      this.enableTouchActivity();
+    }
+  }
+
+  // `on`, `off`, `one`, `any` and `trigger` are here so tsc includes them in definitions.
+  // They are replaced or removed in the constructor
+
+  /**
+   * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+   * function that will get called when an event with a certain name gets triggered.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} fn
+   *        The function to call with `EventTarget`s
+   */
+  on(type, fn) {}
+
+  /**
+   * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+   * This makes it so that the `event listener` will no longer get called when the
+   * named event happens.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} [fn]
+   *        The function to remove. If not specified, all listeners managed by Video.js will be removed.
+   */
+  off(type, fn) {}
+
+  /**
+   * This function will add an `event listener` that gets triggered only once. After the
+   * first trigger it will get removed. This is like adding an `event listener`
+   * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} fn
+   *        The function to be called once for each event name.
+   */
+  one(type, fn) {}
+
+  /**
+   * This function will add an `event listener` that gets triggered only once and is
+   * removed from all events. This is like adding an array of `event listener`s
+   * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+   * first time it is triggered.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} fn
+   *        The function to be called once for each event name.
+   */
+  any(type, fn) {}
+
+  /**
+   * This function causes an event to happen. This will then cause any `event listeners`
+   * that are waiting for that event, to get called. If there are no `event listeners`
+   * for an event then nothing will happen.
+   *
+   * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+   * Trigger will also call the `on` + `uppercaseEventName` function.
+   *
+   * Example:
+   * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+   * `onClick` if it exists.
+   *
+   * @param {string|Event|Object} event
+   *        The name of the event, an `Event`, or an object with a key of type set to
+   *        an event name.
+   *
+   * @param {Object} [hash]
+   *        Optionally extra argument to pass through to an event listener
+   */
+  trigger(event, hash) {}
+
+  /**
+   * Dispose of the `Component` and all child components.
+   *
+   * @fires Component#dispose
+   *
+   * @param {Object} options
+   * @param {Element} options.originalEl element with which to replace player element
+   */
+  dispose(options = {}) {
+    // Bail out if the component has already been disposed.
+    if (this.isDisposed_) {
+      return;
+    }
+    if (this.readyQueue_) {
+      this.readyQueue_.length = 0;
+    }
+
+    /**
+     * Triggered when a `Component` is disposed.
+     *
+     * @event Component#dispose
+     * @type {Event}
+     *
+     * @property {boolean} [bubbles=false]
+     *           set to false so that the dispose event does not
+     *           bubble up
+     */
+    this.trigger({
+      type: 'dispose',
+      bubbles: false
+    });
+    this.isDisposed_ = true;
+
+    // Dispose all children.
+    if (this.children_) {
+      for (let i = this.children_.length - 1; i >= 0; i--) {
+        if (this.children_[i].dispose) {
+          this.children_[i].dispose();
+        }
+      }
+    }
+
+    // Delete child references
+    this.children_ = null;
+    this.childIndex_ = null;
+    this.childNameIndex_ = null;
+    this.parentComponent_ = null;
+    if (this.el_) {
+      // Remove element from DOM
+      if (this.el_.parentNode) {
+        if (options.restoreEl) {
+          this.el_.parentNode.replaceChild(options.restoreEl, this.el_);
+        } else {
+          this.el_.parentNode.removeChild(this.el_);
+        }
+      }
+      this.el_ = null;
+    }
+
+    // remove reference to the player after disposing of the element
+    this.player_ = null;
+  }
+
+  /**
+   * Determine whether or not this component has been disposed.
+   *
+   * @return {boolean}
+   *         If the component has been disposed, will be `true`. Otherwise, `false`.
+   */
+  isDisposed() {
+    return Boolean(this.isDisposed_);
+  }
+
+  /**
+   * Return the {@link Player} that the `Component` has attached to.
+   *
+   * @return { import('./player').default }
+   *         The player that this `Component` has attached to.
+   */
+  player() {
+    return this.player_;
+  }
+
+  /**
+   * Deep merge of options objects with new options.
+   * > Note: When both `obj` and `options` contain properties whose values are objects.
+   *         The two properties get merged using {@link module:obj.merge}
+   *
+   * @param {Object} obj
+   *        The object that contains new options.
+   *
+   * @return {Object}
+   *         A new object of `this.options_` and `obj` merged together.
+   */
+  options(obj) {
+    if (!obj) {
+      return this.options_;
+    }
+    this.options_ = merge$1(this.options_, obj);
+    return this.options_;
+  }
+
+  /**
+   * Get the `Component`s DOM element
+   *
+   * @return {Element}
+   *         The DOM element for this `Component`.
+   */
+  el() {
+    return this.el_;
+  }
+
+  /**
+   * Create the `Component`s DOM element.
+   *
+   * @param {string} [tagName]
+   *        Element's DOM node type. e.g. 'div'
+   *
+   * @param {Object} [properties]
+   *        An object of properties that should be set.
+   *
+   * @param {Object} [attributes]
+   *        An object of attributes that should be set.
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl(tagName, properties, attributes) {
+    return createEl(tagName, properties, attributes);
+  }
+
+  /**
+   * Localize a string given the string in english.
+   *
+   * If tokens are provided, it'll try and run a simple token replacement on the provided string.
+   * The tokens it looks for look like `{1}` with the index being 1-indexed into the tokens array.
+   *
+   * If a `defaultValue` is provided, it'll use that over `string`,
+   * if a value isn't found in provided language files.
+   * This is useful if you want to have a descriptive key for token replacement
+   * but have a succinct localized string and not require `en.json` to be included.
+   *
+   * Currently, it is used for the progress bar timing.
+   * ```js
+   * {
+   *   "progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
+   * }
+   * ```
+   * It is then used like so:
+   * ```js
+   * this.localize('progress bar timing: currentTime={1} duration{2}',
+   *               [this.player_.currentTime(), this.player_.duration()],
+   *               '{1} of {2}');
+   * ```
+   *
+   * Which outputs something like: `01:23 of 24:56`.
+   *
+   *
+   * @param {string} string
+   *        The string to localize and the key to lookup in the language files.
+   * @param {string[]} [tokens]
+   *        If the current item has token replacements, provide the tokens here.
+   * @param {string} [defaultValue]
+   *        Defaults to `string`. Can be a default value to use for token replacement
+   *        if the lookup key is needed to be separate.
+   *
+   * @return {string}
+   *         The localized string or if no localization exists the english string.
+   */
+  localize(string, tokens, defaultValue = string) {
+    const code = this.player_.language && this.player_.language();
+    const languages = this.player_.languages && this.player_.languages();
+    const language = languages && languages[code];
+    const primaryCode = code && code.split('-')[0];
+    const primaryLang = languages && languages[primaryCode];
+    let localizedString = defaultValue;
+    if (language && language[string]) {
+      localizedString = language[string];
+    } else if (primaryLang && primaryLang[string]) {
+      localizedString = primaryLang[string];
+    }
+    if (tokens) {
+      localizedString = localizedString.replace(/\{(\d+)\}/g, function (match, index) {
+        const value = tokens[index - 1];
+        let ret = value;
+        if (typeof value === 'undefined') {
+          ret = match;
+        }
+        return ret;
+      });
+    }
+    return localizedString;
+  }
+
+  /**
+   * Handles language change for the player in components. Should be overridden by sub-components.
+   *
+   * @abstract
+   */
+  handleLanguagechange() {}
+
+  /**
+   * Return the `Component`s DOM element. This is where children get inserted.
+   * This will usually be the the same as the element returned in {@link Component#el}.
+   *
+   * @return {Element}
+   *         The content element for this `Component`.
+   */
+  contentEl() {
+    return this.contentEl_ || this.el_;
+  }
+
+  /**
+   * Get this `Component`s ID
+   *
+   * @return {string}
+   *         The id of this `Component`
+   */
+  id() {
+    return this.id_;
+  }
+
+  /**
+   * Get the `Component`s name. The name gets used to reference the `Component`
+   * and is set during registration.
+   *
+   * @return {string}
+   *         The name of this `Component`.
+   */
+  name() {
+    return this.name_;
+  }
+
+  /**
+   * Get an array of all child components
+   *
+   * @return {Array}
+   *         The children
+   */
+  children() {
+    return this.children_;
+  }
+
+  /**
+   * Returns the child `Component` with the given `id`.
+   *
+   * @param {string} id
+   *        The id of the child `Component` to get.
+   *
+   * @return {Component|undefined}
+   *         The child `Component` with the given `id` or undefined.
+   */
+  getChildById(id) {
+    return this.childIndex_[id];
+  }
+
+  /**
+   * Returns the child `Component` with the given `name`.
+   *
+   * @param {string} name
+   *        The name of the child `Component` to get.
+   *
+   * @return {Component|undefined}
+   *         The child `Component` with the given `name` or undefined.
+   */
+  getChild(name) {
+    if (!name) {
+      return;
+    }
+    return this.childNameIndex_[name];
+  }
+
+  /**
+   * Returns the descendant `Component` following the givent
+   * descendant `names`. For instance ['foo', 'bar', 'baz'] would
+   * try to get 'foo' on the current component, 'bar' on the 'foo'
+   * component and 'baz' on the 'bar' component and return undefined
+   * if any of those don't exist.
+   *
+   * @param {...string[]|...string} names
+   *        The name of the child `Component` to get.
+   *
+   * @return {Component|undefined}
+   *         The descendant `Component` following the given descendant
+   *         `names` or undefined.
+   */
+  getDescendant(...names) {
+    // flatten array argument into the main array
+    names = names.reduce((acc, n) => acc.concat(n), []);
+    let currentChild = this;
+    for (let i = 0; i < names.length; i++) {
+      currentChild = currentChild.getChild(names[i]);
+      if (!currentChild || !currentChild.getChild) {
+        return;
+      }
+    }
+    return currentChild;
+  }
+
+  /**
+   * Adds an SVG icon element to another element or component.
+   *
+   * @param {string} iconName
+   *        The name of icon. A list of all the icon names can be found at 'sandbox/svg-icons.html'
+   *
+   * @param {Element} [el=this.el()]
+   *        Element to set the title on. Defaults to the current Component's element.
+   *
+   * @return {Element}
+   *        The newly created icon element.
+   */
+  setIcon(iconName, el = this.el()) {
+    // TODO: In v9 of video.js, we will want to remove font icons entirely.
+    // This means this check, as well as the others throughout the code, and
+    // the unecessary CSS for font icons, will need to be removed.
+    // See https://github.com/videojs/video.js/pull/8260 as to which components
+    // need updating.
+    if (!this.player_.options_.experimentalSvgIcons) {
+      return;
+    }
+    const xmlnsURL = 'http://www.w3.org/2000/svg';
+
+    // The below creates an element in the format of:
+    // <span><svg><use>....</use></svg></span>
+    const iconContainer = createEl('span', {
+      className: 'vjs-icon-placeholder vjs-svg-icon'
+    }, {
+      'aria-hidden': 'true'
+    });
+    const svgEl = document__default["default"].createElementNS(xmlnsURL, 'svg');
+    svgEl.setAttributeNS(null, 'viewBox', '0 0 512 512');
+    const useEl = document__default["default"].createElementNS(xmlnsURL, 'use');
+    svgEl.appendChild(useEl);
+    useEl.setAttributeNS(null, 'href', `#vjs-icon-${iconName}`);
+    iconContainer.appendChild(svgEl);
+
+    // Replace a pre-existing icon if one exists.
+    if (this.iconIsSet_) {
+      el.replaceChild(iconContainer, el.querySelector('.vjs-icon-placeholder'));
+    } else {
+      el.appendChild(iconContainer);
+    }
+    this.iconIsSet_ = true;
+    return iconContainer;
+  }
+
+  /**
+   * Add a child `Component` inside the current `Component`.
+   *
+   * @param {string|Component} child
+   *        The name or instance of a child to add.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of options that will get passed to children of
+   *        the child.
+   *
+   * @param {number} [index=this.children_.length]
+   *        The index to attempt to add a child into.
+   *
+   *
+   * @return {Component}
+   *         The `Component` that gets added as a child. When using a string the
+   *         `Component` will get created by this process.
+   */
+  addChild(child, options = {}, index = this.children_.length) {
+    let component;
+    let componentName;
+
+    // If child is a string, create component with options
+    if (typeof child === 'string') {
+      componentName = toTitleCase$1(child);
+      const componentClassName = options.componentClass || componentName;
+
+      // Set name through options
+      options.name = componentName;
+
+      // Create a new object & element for this controls set
+      // If there's no .player_, this is a player
+      const ComponentClass = Component$1.getComponent(componentClassName);
+      if (!ComponentClass) {
+        throw new Error(`Component ${componentClassName} does not exist`);
+      }
+
+      // data stored directly on the videojs object may be
+      // misidentified as a component to retain
+      // backwards-compatibility with 4.x. check to make sure the
+      // component class can be instantiated.
+      if (typeof ComponentClass !== 'function') {
+        return null;
+      }
+      component = new ComponentClass(this.player_ || this, options);
+
+      // child is a component instance
+    } else {
+      component = child;
+    }
+    if (component.parentComponent_) {
+      component.parentComponent_.removeChild(component);
+    }
+    this.children_.splice(index, 0, component);
+    component.parentComponent_ = this;
+    if (typeof component.id === 'function') {
+      this.childIndex_[component.id()] = component;
+    }
+
+    // If a name wasn't used to create the component, check if we can use the
+    // name function of the component
+    componentName = componentName || component.name && toTitleCase$1(component.name());
+    if (componentName) {
+      this.childNameIndex_[componentName] = component;
+      this.childNameIndex_[toLowerCase(componentName)] = component;
+    }
+
+    // Add the UI object's element to the container div (box)
+    // Having an element is not required
+    if (typeof component.el === 'function' && component.el()) {
+      // If inserting before a component, insert before that component's element
+      let refNode = null;
+      if (this.children_[index + 1]) {
+        // Most children are components, but the video tech is an HTML element
+        if (this.children_[index + 1].el_) {
+          refNode = this.children_[index + 1].el_;
+        } else if (isEl(this.children_[index + 1])) {
+          refNode = this.children_[index + 1];
+        }
+      }
+      this.contentEl().insertBefore(component.el(), refNode);
+    }
+
+    // Return so it can stored on parent object if desired.
+    return component;
+  }
+
+  /**
+   * Remove a child `Component` from this `Component`s list of children. Also removes
+   * the child `Component`s element from this `Component`s element.
+   *
+   * @param {Component} component
+   *        The child `Component` to remove.
+   */
+  removeChild(component) {
+    if (typeof component === 'string') {
+      component = this.getChild(component);
+    }
+    if (!component || !this.children_) {
+      return;
+    }
+    let childFound = false;
+    for (let i = this.children_.length - 1; i >= 0; i--) {
+      if (this.children_[i] === component) {
+        childFound = true;
+        this.children_.splice(i, 1);
+        break;
+      }
+    }
+    if (!childFound) {
+      return;
+    }
+    component.parentComponent_ = null;
+    this.childIndex_[component.id()] = null;
+    this.childNameIndex_[toTitleCase$1(component.name())] = null;
+    this.childNameIndex_[toLowerCase(component.name())] = null;
+    const compEl = component.el();
+    if (compEl && compEl.parentNode === this.contentEl()) {
+      this.contentEl().removeChild(component.el());
+    }
+  }
+
+  /**
+   * Add and initialize default child `Component`s based upon options.
+   */
+  initChildren() {
+    const children = this.options_.children;
+    if (children) {
+      // `this` is `parent`
+      const parentOptions = this.options_;
+      const handleAdd = child => {
+        const name = child.name;
+        let opts = child.opts;
+
+        // Allow options for children to be set at the parent options
+        // e.g. videojs(id, { controlBar: false });
+        // instead of videojs(id, { children: { controlBar: false });
+        if (parentOptions[name] !== undefined) {
+          opts = parentOptions[name];
+        }
+
+        // Allow for disabling default components
+        // e.g. options['children']['posterImage'] = false
+        if (opts === false) {
+          return;
+        }
+
+        // Allow options to be passed as a simple boolean if no configuration
+        // is necessary.
+        if (opts === true) {
+          opts = {};
+        }
+
+        // We also want to pass the original player options
+        // to each component as well so they don't need to
+        // reach back into the player for options later.
+        opts.playerOptions = this.options_.playerOptions;
+
+        // Create and add the child component.
+        // Add a direct reference to the child by name on the parent instance.
+        // If two of the same component are used, different names should be supplied
+        // for each
+        const newChild = this.addChild(name, opts);
+        if (newChild) {
+          this[name] = newChild;
+        }
+      };
+
+      // Allow for an array of children details to passed in the options
+      let workingChildren;
+      const Tech = Component$1.getComponent('Tech');
+      if (Array.isArray(children)) {
+        workingChildren = children;
+      } else {
+        workingChildren = Object.keys(children);
+      }
+      workingChildren
+      // children that are in this.options_ but also in workingChildren  would
+      // give us extra children we do not want. So, we want to filter them out.
+      .concat(Object.keys(this.options_).filter(function (child) {
+        return !workingChildren.some(function (wchild) {
+          if (typeof wchild === 'string') {
+            return child === wchild;
+          }
+          return child === wchild.name;
+        });
+      })).map(child => {
+        let name;
+        let opts;
+        if (typeof child === 'string') {
+          name = child;
+          opts = children[name] || this.options_[name] || {};
+        } else {
+          name = child.name;
+          opts = child;
+        }
+        return {
+          name,
+          opts
+        };
+      }).filter(child => {
+        // we have to make sure that child.name isn't in the techOrder since
+        // techs are registered as Components but can't aren't compatible
+        // See https://github.com/videojs/video.js/issues/2772
+        const c = Component$1.getComponent(child.opts.componentClass || toTitleCase$1(child.name));
+        return c && !Tech.isTech(c);
+      }).forEach(handleAdd);
+    }
+  }
+
+  /**
+   * Builds the default DOM class name. Should be overridden by sub-components.
+   *
+   * @return {string}
+   *         The DOM class name for this object.
+   *
+   * @abstract
+   */
+  buildCSSClass() {
+    // Child classes can include a function that does:
+    // return 'CLASS NAME' + this._super();
+    return '';
+  }
+
+  /**
+   * Bind a listener to the component's ready state.
+   * Different from event listeners in that if the ready event has already happened
+   * it will trigger the function immediately.
+   *
+   * @param {ReadyCallback} fn
+   *        Function that gets called when the `Component` is ready.
+   *
+   * @return {Component}
+   *         Returns itself; method can be chained.
+   */
+  ready(fn, sync = false) {
+    if (!fn) {
+      return;
+    }
+    if (!this.isReady_) {
+      this.readyQueue_ = this.readyQueue_ || [];
+      this.readyQueue_.push(fn);
+      return;
+    }
+    if (sync) {
+      fn.call(this);
+    } else {
+      // Call the function asynchronously by default for consistency
+      this.setTimeout(fn, 1);
+    }
+  }
+
+  /**
+   * Trigger all the ready listeners for this `Component`.
+   *
+   * @fires Component#ready
+   */
+  triggerReady() {
+    this.isReady_ = true;
+
+    // Ensure ready is triggered asynchronously
+    this.setTimeout(function () {
+      const readyQueue = this.readyQueue_;
+
+      // Reset Ready Queue
+      this.readyQueue_ = [];
+      if (readyQueue && readyQueue.length > 0) {
+        readyQueue.forEach(function (fn) {
+          fn.call(this);
+        }, this);
+      }
+
+      // Allow for using event listeners also
+      /**
+       * Triggered when a `Component` is ready.
+       *
+       * @event Component#ready
+       * @type {Event}
+       */
+      this.trigger('ready');
+    }, 1);
+  }
+
+  /**
+   * Find a single DOM element matching a `selector`. This can be within the `Component`s
+   * `contentEl()` or another custom context.
+   *
+   * @param {string} selector
+   *        A valid CSS selector, which will be passed to `querySelector`.
+   *
+   * @param {Element|string} [context=this.contentEl()]
+   *        A DOM element within which to query. Can also be a selector string in
+   *        which case the first matching element will get used as context. If
+   *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+   *        nothing it falls back to `document`.
+   *
+   * @return {Element|null}
+   *         the dom element that was found, or null
+   *
+   * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+   */
+  $(selector, context) {
+    return $(selector, context || this.contentEl());
+  }
+
+  /**
+   * Finds all DOM element matching a `selector`. This can be within the `Component`s
+   * `contentEl()` or another custom context.
+   *
+   * @param {string} selector
+   *        A valid CSS selector, which will be passed to `querySelectorAll`.
+   *
+   * @param {Element|string} [context=this.contentEl()]
+   *        A DOM element within which to query. Can also be a selector string in
+   *        which case the first matching element will get used as context. If
+   *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+   *        nothing it falls back to `document`.
+   *
+   * @return {NodeList}
+   *         a list of dom elements that were found
+   *
+   * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+   */
+  $$(selector, context) {
+    return $$(selector, context || this.contentEl());
+  }
+
+  /**
+   * Check if a component's element has a CSS class name.
+   *
+   * @param {string} classToCheck
+   *        CSS class name to check.
+   *
+   * @return {boolean}
+   *         - True if the `Component` has the class.
+   *         - False if the `Component` does not have the class`
+   */
+  hasClass(classToCheck) {
+    return hasClass(this.el_, classToCheck);
+  }
+
+  /**
+   * Add a CSS class name to the `Component`s element.
+   *
+   * @param {...string} classesToAdd
+   *        One or more CSS class name to add.
+   */
+  addClass(...classesToAdd) {
+    addClass(this.el_, ...classesToAdd);
+  }
+
+  /**
+   * Remove a CSS class name from the `Component`s element.
+   *
+   * @param {...string} classesToRemove
+   *        One or more CSS class name to remove.
+   */
+  removeClass(...classesToRemove) {
+    removeClass(this.el_, ...classesToRemove);
+  }
+
+  /**
+   * Add or remove a CSS class name from the component's element.
+   * - `classToToggle` gets added when {@link Component#hasClass} would return false.
+   * - `classToToggle` gets removed when {@link Component#hasClass} would return true.
+   *
+   * @param  {string} classToToggle
+   *         The class to add or remove based on (@link Component#hasClass}
+   *
+   * @param  {boolean|Dom~predicate} [predicate]
+   *         An {@link Dom~predicate} function or a boolean
+   */
+  toggleClass(classToToggle, predicate) {
+    toggleClass(this.el_, classToToggle, predicate);
+  }
+
+  /**
+   * Show the `Component`s element if it is hidden by removing the
+   * 'vjs-hidden' class name from it.
+   */
+  show() {
+    this.removeClass('vjs-hidden');
+  }
+
+  /**
+   * Hide the `Component`s element if it is currently showing by adding the
+   * 'vjs-hidden` class name to it.
+   */
+  hide() {
+    this.addClass('vjs-hidden');
+  }
+
+  /**
+   * Lock a `Component`s element in its visible state by adding the 'vjs-lock-showing'
+   * class name to it. Used during fadeIn/fadeOut.
+   *
+   * @private
+   */
+  lockShowing() {
+    this.addClass('vjs-lock-showing');
+  }
+
+  /**
+   * Unlock a `Component`s element from its visible state by removing the 'vjs-lock-showing'
+   * class name from it. Used during fadeIn/fadeOut.
+   *
+   * @private
+   */
+  unlockShowing() {
+    this.removeClass('vjs-lock-showing');
+  }
+
+  /**
+   * Get the value of an attribute on the `Component`s element.
+   *
+   * @param {string} attribute
+   *        Name of the attribute to get the value from.
+   *
+   * @return {string|null}
+   *         - The value of the attribute that was asked for.
+   *         - Can be an empty string on some browsers if the attribute does not exist
+   *           or has no value
+   *         - Most browsers will return null if the attribute does not exist or has
+   *           no value.
+   *
+   * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute}
+   */
+  getAttribute(attribute) {
+    return getAttribute(this.el_, attribute);
+  }
+
+  /**
+   * Set the value of an attribute on the `Component`'s element
+   *
+   * @param {string} attribute
+   *        Name of the attribute to set.
+   *
+   * @param {string} value
+   *        Value to set the attribute to.
+   *
+   * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute}
+   */
+  setAttribute(attribute, value) {
+    setAttribute(this.el_, attribute, value);
+  }
+
+  /**
+   * Remove an attribute from the `Component`s element.
+   *
+   * @param {string} attribute
+   *        Name of the attribute to remove.
+   *
+   * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute}
+   */
+  removeAttribute(attribute) {
+    removeAttribute(this.el_, attribute);
+  }
+
+  /**
+   * Get or set the width of the component based upon the CSS styles.
+   * See {@link Component#dimension} for more detailed information.
+   *
+   * @param {number|string} [num]
+   *        The width that you want to set postfixed with '%', 'px' or nothing.
+   *
+   * @param {boolean} [skipListeners]
+   *        Skip the componentresize event trigger
+   *
+   * @return {number|undefined}
+   *         The width when getting, zero if there is no width
+   */
+  width(num, skipListeners) {
+    return this.dimension('width', num, skipListeners);
+  }
+
+  /**
+   * Get or set the height of the component based upon the CSS styles.
+   * See {@link Component#dimension} for more detailed information.
+   *
+   * @param {number|string} [num]
+   *        The height that you want to set postfixed with '%', 'px' or nothing.
+   *
+   * @param {boolean} [skipListeners]
+   *        Skip the componentresize event trigger
+   *
+   * @return {number|undefined}
+   *         The height when getting, zero if there is no height
+   */
+  height(num, skipListeners) {
+    return this.dimension('height', num, skipListeners);
+  }
+
+  /**
+   * Set both the width and height of the `Component` element at the same time.
+   *
+   * @param  {number|string} width
+   *         Width to set the `Component`s element to.
+   *
+   * @param  {number|string} height
+   *         Height to set the `Component`s element to.
+   */
+  dimensions(width, height) {
+    // Skip componentresize listeners on width for optimization
+    this.width(width, true);
+    this.height(height);
+  }
+
+  /**
+   * Get or set width or height of the `Component` element. This is the shared code
+   * for the {@link Component#width} and {@link Component#height}.
+   *
+   * Things to know:
+   * - If the width or height in an number this will return the number postfixed with 'px'.
+   * - If the width/height is a percent this will return the percent postfixed with '%'
+   * - Hidden elements have a width of 0 with `window.getComputedStyle`. This function
+   *   defaults to the `Component`s `style.width` and falls back to `window.getComputedStyle`.
+   *   See [this]{@link http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/}
+   *   for more information
+   * - If you want the computed style of the component, use {@link Component#currentWidth}
+   *   and {@link {Component#currentHeight}
+   *
+   * @fires Component#componentresize
+   *
+   * @param {string} widthOrHeight
+   8        'width' or 'height'
+   *
+   * @param  {number|string} [num]
+   8         New dimension
+   *
+   * @param  {boolean} [skipListeners]
+   *         Skip componentresize event trigger
+   *
+   * @return {number|undefined}
+   *         The dimension when getting or 0 if unset
+   */
+  dimension(widthOrHeight, num, skipListeners) {
+    if (num !== undefined) {
+      // Set to zero if null or literally NaN (NaN !== NaN)
+      if (num === null || num !== num) {
+        num = 0;
+      }
+
+      // Check if using css width/height (% or px) and adjust
+      if (('' + num).indexOf('%') !== -1 || ('' + num).indexOf('px') !== -1) {
+        this.el_.style[widthOrHeight] = num;
+      } else if (num === 'auto') {
+        this.el_.style[widthOrHeight] = '';
+      } else {
+        this.el_.style[widthOrHeight] = num + 'px';
+      }
+
+      // skipListeners allows us to avoid triggering the resize event when setting both width and height
+      if (!skipListeners) {
+        /**
+         * Triggered when a component is resized.
+         *
+         * @event Component#componentresize
+         * @type {Event}
+         */
+        this.trigger('componentresize');
+      }
+      return;
+    }
+
+    // Not setting a value, so getting it
+    // Make sure element exists
+    if (!this.el_) {
+      return 0;
+    }
+
+    // Get dimension value from style
+    const val = this.el_.style[widthOrHeight];
+    const pxIndex = val.indexOf('px');
+    if (pxIndex !== -1) {
+      // Return the pixel value with no 'px'
+      return parseInt(val.slice(0, pxIndex), 10);
+    }
+
+    // No px so using % or no style was set, so falling back to offsetWidth/height
+    // If component has display:none, offset will return 0
+    // TODO: handle display:none and no dimension style using px
+    return parseInt(this.el_['offset' + toTitleCase$1(widthOrHeight)], 10);
+  }
+
+  /**
+   * Get the computed width or the height of the component's element.
+   *
+   * Uses `window.getComputedStyle`.
+   *
+   * @param {string} widthOrHeight
+   *        A string containing 'width' or 'height'. Whichever one you want to get.
+   *
+   * @return {number}
+   *         The dimension that gets asked for or 0 if nothing was set
+   *         for that dimension.
+   */
+  currentDimension(widthOrHeight) {
+    let computedWidthOrHeight = 0;
+    if (widthOrHeight !== 'width' && widthOrHeight !== 'height') {
+      throw new Error('currentDimension only accepts width or height value');
+    }
+    computedWidthOrHeight = computedStyle(this.el_, widthOrHeight);
+
+    // remove 'px' from variable and parse as integer
+    computedWidthOrHeight = parseFloat(computedWidthOrHeight);
+
+    // if the computed value is still 0, it's possible that the browser is lying
+    // and we want to check the offset values.
+    // This code also runs wherever getComputedStyle doesn't exist.
+    if (computedWidthOrHeight === 0 || isNaN(computedWidthOrHeight)) {
+      const rule = `offset${toTitleCase$1(widthOrHeight)}`;
+      computedWidthOrHeight = this.el_[rule];
+    }
+    return computedWidthOrHeight;
+  }
+
+  /**
+   * An object that contains width and height values of the `Component`s
+   * computed style. Uses `window.getComputedStyle`.
+   *
+   * @typedef {Object} Component~DimensionObject
+   *
+   * @property {number} width
+   *           The width of the `Component`s computed style.
+   *
+   * @property {number} height
+   *           The height of the `Component`s computed style.
+   */
+
+  /**
+   * Get an object that contains computed width and height values of the
+   * component's element.
+   *
+   * Uses `window.getComputedStyle`.
+   *
+   * @return {Component~DimensionObject}
+   *         The computed dimensions of the component's element.
+   */
+  currentDimensions() {
+    return {
+      width: this.currentDimension('width'),
+      height: this.currentDimension('height')
+    };
+  }
+
+  /**
+   * Get the computed width of the component's element.
+   *
+   * Uses `window.getComputedStyle`.
+   *
+   * @return {number}
+   *         The computed width of the component's element.
+   */
+  currentWidth() {
+    return this.currentDimension('width');
+  }
+
+  /**
+   * Get the computed height of the component's element.
+   *
+   * Uses `window.getComputedStyle`.
+   *
+   * @return {number}
+   *         The computed height of the component's element.
+   */
+  currentHeight() {
+    return this.currentDimension('height');
+  }
+
+  /**
+   * Set the focus to this component
+   */
+  focus() {
+    this.el_.focus();
+  }
+
+  /**
+   * Remove the focus from this component
+   */
+  blur() {
+    this.el_.blur();
+  }
+
+  /**
+   * When this Component receives a `keydown` event which it does not process,
+   *  it passes the event to the Player for handling.
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   */
+  handleKeyDown(event) {
+    if (this.player_) {
+      // We only stop propagation here because we want unhandled events to fall
+      // back to the browser. Exclude Tab for focus trapping.
+      if (!keycode__default["default"].isEventKey(event, 'Tab')) {
+        event.stopPropagation();
+      }
+      this.player_.handleKeyDown(event);
+    }
+  }
+
+  /**
+   * Many components used to have a `handleKeyPress` method, which was poorly
+   * named because it listened to a `keydown` event. This method name now
+   * delegates to `handleKeyDown`. This means anyone calling `handleKeyPress`
+   * will not see their method calls stop working.
+   *
+   * @param {KeyboardEvent} event
+   *        The event that caused this function to be called.
+   */
+  handleKeyPress(event) {
+    this.handleKeyDown(event);
+  }
+
+  /**
+   * Emit a 'tap' events when touch event support gets detected. This gets used to
+   * support toggling the controls through a tap on the video. They get enabled
+   * because every sub-component would have extra overhead otherwise.
+   *
+   * @protected
+   * @fires Component#tap
+   * @listens Component#touchstart
+   * @listens Component#touchmove
+   * @listens Component#touchleave
+   * @listens Component#touchcancel
+   * @listens Component#touchend
+    */
+  emitTapEvents() {
+    // Track the start time so we can determine how long the touch lasted
+    let touchStart = 0;
+    let firstTouch = null;
+
+    // Maximum movement allowed during a touch event to still be considered a tap
+    // Other popular libs use anywhere from 2 (hammer.js) to 15,
+    // so 10 seems like a nice, round number.
+    const tapMovementThreshold = 10;
+
+    // The maximum length a touch can be while still being considered a tap
+    const touchTimeThreshold = 200;
+    let couldBeTap;
+    this.on('touchstart', function (event) {
+      // If more than one finger, don't consider treating this as a click
+      if (event.touches.length === 1) {
+        // Copy pageX/pageY from the object
+        firstTouch = {
+          pageX: event.touches[0].pageX,
+          pageY: event.touches[0].pageY
+        };
+        // Record start time so we can detect a tap vs. "touch and hold"
+        touchStart = window__default["default"].performance.now();
+        // Reset couldBeTap tracking
+        couldBeTap = true;
+      }
+    });
+    this.on('touchmove', function (event) {
+      // If more than one finger, don't consider treating this as a click
+      if (event.touches.length > 1) {
+        couldBeTap = false;
+      } else if (firstTouch) {
+        // Some devices will throw touchmoves for all but the slightest of taps.
+        // So, if we moved only a small distance, this could still be a tap
+        const xdiff = event.touches[0].pageX - firstTouch.pageX;
+        const ydiff = event.touches[0].pageY - firstTouch.pageY;
+        const touchDistance = Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+        if (touchDistance > tapMovementThreshold) {
+          couldBeTap = false;
+        }
+      }
+    });
+    const noTap = function () {
+      couldBeTap = false;
+    };
+
+    // TODO: Listen to the original target. http://youtu.be/DujfpXOKUp8?t=13m8s
+    this.on('touchleave', noTap);
+    this.on('touchcancel', noTap);
+
+    // When the touch ends, measure how long it took and trigger the appropriate
+    // event
+    this.on('touchend', function (event) {
+      firstTouch = null;
+      // Proceed only if the touchmove/leave/cancel event didn't happen
+      if (couldBeTap === true) {
+        // Measure how long the touch lasted
+        const touchTime = window__default["default"].performance.now() - touchStart;
+
+        // Make sure the touch was less than the threshold to be considered a tap
+        if (touchTime < touchTimeThreshold) {
+          // Don't let browser turn this into a click
+          event.preventDefault();
+          /**
+           * Triggered when a `Component` is tapped.
+           *
+           * @event Component#tap
+           * @type {MouseEvent}
+           */
+          this.trigger('tap');
+          // It may be good to copy the touchend event object and change the
+          // type to tap, if the other event properties aren't exact after
+          // Events.fixEvent runs (e.g. event.target)
+        }
+      }
+    });
+  }
+
+  /**
+   * This function reports user activity whenever touch events happen. This can get
+   * turned off by any sub-components that wants touch events to act another way.
+   *
+   * Report user touch activity when touch events occur. User activity gets used to
+   * determine when controls should show/hide. It is simple when it comes to mouse
+   * events, because any mouse event should show the controls. So we capture mouse
+   * events that bubble up to the player and report activity when that happens.
+   * With touch events it isn't as easy as `touchstart` and `touchend` toggle player
+   * controls. So touch events can't help us at the player level either.
+   *
+   * User activity gets checked asynchronously. So what could happen is a tap event
+   * on the video turns the controls off. Then the `touchend` event bubbles up to
+   * the player. Which, if it reported user activity, would turn the controls right
+   * back on. We also don't want to completely block touch events from bubbling up.
+   * Furthermore a `touchmove` event and anything other than a tap, should not turn
+   * controls back on.
+   *
+   * @listens Component#touchstart
+   * @listens Component#touchmove
+   * @listens Component#touchend
+   * @listens Component#touchcancel
+   */
+  enableTouchActivity() {
+    // Don't continue if the root player doesn't support reporting user activity
+    if (!this.player() || !this.player().reportUserActivity) {
+      return;
+    }
+
+    // listener for reporting that the user is active
+    const report = bind_(this.player(), this.player().reportUserActivity);
+    let touchHolding;
+    this.on('touchstart', function () {
+      report();
+      // For as long as the they are touching the device or have their mouse down,
+      // we consider them active even if they're not moving their finger or mouse.
+      // So we want to continue to update that they are active
+      this.clearInterval(touchHolding);
+      // report at the same interval as activityCheck
+      touchHolding = this.setInterval(report, 250);
+    });
+    const touchEnd = function (event) {
+      report();
+      // stop the interval that maintains activity if the touch is holding
+      this.clearInterval(touchHolding);
+    };
+    this.on('touchmove', report);
+    this.on('touchend', touchEnd);
+    this.on('touchcancel', touchEnd);
+  }
+
+  /**
+   * A callback that has no parameters and is bound into `Component`s context.
+   *
+   * @callback Component~GenericCallback
+   * @this Component
+   */
+
+  /**
+   * Creates a function that runs after an `x` millisecond timeout. This function is a
+   * wrapper around `window.setTimeout`. There are a few reasons to use this one
+   * instead though:
+   * 1. It gets cleared via  {@link Component#clearTimeout} when
+   *    {@link Component#dispose} gets called.
+   * 2. The function callback will gets turned into a {@link Component~GenericCallback}
+   *
+   * > Note: You can't use `window.clearTimeout` on the id returned by this function. This
+   *         will cause its dispose listener not to get cleaned up! Please use
+   *         {@link Component#clearTimeout} or {@link Component#dispose} instead.
+   *
+   * @param {Component~GenericCallback} fn
+   *        The function that will be run after `timeout`.
+   *
+   * @param {number} timeout
+   *        Timeout in milliseconds to delay before executing the specified function.
+   *
+   * @return {number}
+   *         Returns a timeout ID that gets used to identify the timeout. It can also
+   *         get used in {@link Component#clearTimeout} to clear the timeout that
+   *         was set.
+   *
+   * @listens Component#dispose
+   * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout}
+   */
+  setTimeout(fn, timeout) {
+    // declare as variables so they are properly available in timeout function
+    // eslint-disable-next-line
+    var timeoutId;
+    fn = bind_(this, fn);
+    this.clearTimersOnDispose_();
+    timeoutId = window__default["default"].setTimeout(() => {
+      if (this.setTimeoutIds_.has(timeoutId)) {
+        this.setTimeoutIds_.delete(timeoutId);
+      }
+      fn();
+    }, timeout);
+    this.setTimeoutIds_.add(timeoutId);
+    return timeoutId;
+  }
+
+  /**
+   * Clears a timeout that gets created via `window.setTimeout` or
+   * {@link Component#setTimeout}. If you set a timeout via {@link Component#setTimeout}
+   * use this function instead of `window.clearTimout`. If you don't your dispose
+   * listener will not get cleaned up until {@link Component#dispose}!
+   *
+   * @param {number} timeoutId
+   *        The id of the timeout to clear. The return value of
+   *        {@link Component#setTimeout} or `window.setTimeout`.
+   *
+   * @return {number}
+   *         Returns the timeout id that was cleared.
+   *
+   * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout}
+   */
+  clearTimeout(timeoutId) {
+    if (this.setTimeoutIds_.has(timeoutId)) {
+      this.setTimeoutIds_.delete(timeoutId);
+      window__default["default"].clearTimeout(timeoutId);
+    }
+    return timeoutId;
+  }
+
+  /**
+   * Creates a function that gets run every `x` milliseconds. This function is a wrapper
+   * around `window.setInterval`. There are a few reasons to use this one instead though.
+   * 1. It gets cleared via  {@link Component#clearInterval} when
+   *    {@link Component#dispose} gets called.
+   * 2. The function callback will be a {@link Component~GenericCallback}
+   *
+   * @param {Component~GenericCallback} fn
+   *        The function to run every `x` seconds.
+   *
+   * @param {number} interval
+   *        Execute the specified function every `x` milliseconds.
+   *
+   * @return {number}
+   *         Returns an id that can be used to identify the interval. It can also be be used in
+   *         {@link Component#clearInterval} to clear the interval.
+   *
+   * @listens Component#dispose
+   * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval}
+   */
+  setInterval(fn, interval) {
+    fn = bind_(this, fn);
+    this.clearTimersOnDispose_();
+    const intervalId = window__default["default"].setInterval(fn, interval);
+    this.setIntervalIds_.add(intervalId);
+    return intervalId;
+  }
+
+  /**
+   * Clears an interval that gets created via `window.setInterval` or
+   * {@link Component#setInterval}. If you set an interval via {@link Component#setInterval}
+   * use this function instead of `window.clearInterval`. If you don't your dispose
+   * listener will not get cleaned up until {@link Component#dispose}!
+   *
+   * @param {number} intervalId
+   *        The id of the interval to clear. The return value of
+   *        {@link Component#setInterval} or `window.setInterval`.
+   *
+   * @return {number}
+   *         Returns the interval id that was cleared.
+   *
+   * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval}
+   */
+  clearInterval(intervalId) {
+    if (this.setIntervalIds_.has(intervalId)) {
+      this.setIntervalIds_.delete(intervalId);
+      window__default["default"].clearInterval(intervalId);
+    }
+    return intervalId;
+  }
+
+  /**
+   * Queues up a callback to be passed to requestAnimationFrame (rAF), but
+   * with a few extra bonuses:
+   *
+   * - Supports browsers that do not support rAF by falling back to
+   *   {@link Component#setTimeout}.
+   *
+   * - The callback is turned into a {@link Component~GenericCallback} (i.e.
+   *   bound to the component).
+   *
+   * - Automatic cancellation of the rAF callback is handled if the component
+   *   is disposed before it is called.
+   *
+   * @param  {Component~GenericCallback} fn
+   *         A function that will be bound to this component and executed just
+   *         before the browser's next repaint.
+   *
+   * @return {number}
+   *         Returns an rAF ID that gets used to identify the timeout. It can
+   *         also be used in {@link Component#cancelAnimationFrame} to cancel
+   *         the animation frame callback.
+   *
+   * @listens Component#dispose
+   * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame}
+   */
+  requestAnimationFrame(fn) {
+    this.clearTimersOnDispose_();
+
+    // declare as variables so they are properly available in rAF function
+    // eslint-disable-next-line
+    var id;
+    fn = bind_(this, fn);
+    id = window__default["default"].requestAnimationFrame(() => {
+      if (this.rafIds_.has(id)) {
+        this.rafIds_.delete(id);
+      }
+      fn();
+    });
+    this.rafIds_.add(id);
+    return id;
+  }
+
+  /**
+   * Request an animation frame, but only one named animation
+   * frame will be queued. Another will never be added until
+   * the previous one finishes.
+   *
+   * @param {string} name
+   *        The name to give this requestAnimationFrame
+   *
+   * @param  {Component~GenericCallback} fn
+   *         A function that will be bound to this component and executed just
+   *         before the browser's next repaint.
+   */
+  requestNamedAnimationFrame(name, fn) {
+    if (this.namedRafs_.has(name)) {
+      return;
+    }
+    this.clearTimersOnDispose_();
+    fn = bind_(this, fn);
+    const id = this.requestAnimationFrame(() => {
+      fn();
+      if (this.namedRafs_.has(name)) {
+        this.namedRafs_.delete(name);
+      }
+    });
+    this.namedRafs_.set(name, id);
+    return name;
+  }
+
+  /**
+   * Cancels a current named animation frame if it exists.
+   *
+   * @param {string} name
+   *        The name of the requestAnimationFrame to cancel.
+   */
+  cancelNamedAnimationFrame(name) {
+    if (!this.namedRafs_.has(name)) {
+      return;
+    }
+    this.cancelAnimationFrame(this.namedRafs_.get(name));
+    this.namedRafs_.delete(name);
+  }
+
+  /**
+   * Cancels a queued callback passed to {@link Component#requestAnimationFrame}
+   * (rAF).
+   *
+   * If you queue an rAF callback via {@link Component#requestAnimationFrame},
+   * use this function instead of `window.cancelAnimationFrame`. If you don't,
+   * your dispose listener will not get cleaned up until {@link Component#dispose}!
+   *
+   * @param {number} id
+   *        The rAF ID to clear. The return value of {@link Component#requestAnimationFrame}.
+   *
+   * @return {number}
+   *         Returns the rAF ID that was cleared.
+   *
+   * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/cancelAnimationFrame}
+   */
+  cancelAnimationFrame(id) {
+    if (this.rafIds_.has(id)) {
+      this.rafIds_.delete(id);
+      window__default["default"].cancelAnimationFrame(id);
+    }
+    return id;
+  }
+
+  /**
+   * A function to setup `requestAnimationFrame`, `setTimeout`,
+   * and `setInterval`, clearing on dispose.
+   *
+   * > Previously each timer added and removed dispose listeners on it's own.
+   * For better performance it was decided to batch them all, and use `Set`s
+   * to track outstanding timer ids.
+   *
+   * @private
+   */
+  clearTimersOnDispose_() {
+    if (this.clearingTimersOnDispose_) {
+      return;
+    }
+    this.clearingTimersOnDispose_ = true;
+    this.one('dispose', () => {
+      [['namedRafs_', 'cancelNamedAnimationFrame'], ['rafIds_', 'cancelAnimationFrame'], ['setTimeoutIds_', 'clearTimeout'], ['setIntervalIds_', 'clearInterval']].forEach(([idName, cancelName]) => {
+        // for a `Set` key will actually be the value again
+        // so forEach((val, val) =>` but for maps we want to use
+        // the key.
+        this[idName].forEach((val, key) => this[cancelName](key));
+      });
+      this.clearingTimersOnDispose_ = false;
+    });
+  }
+
+  /**
+   * Register a `Component` with `videojs` given the name and the component.
+   *
+   * > NOTE: {@link Tech}s should not be registered as a `Component`. {@link Tech}s
+   *         should be registered using {@link Tech.registerTech} or
+   *         {@link videojs:videojs.registerTech}.
+   *
+   * > NOTE: This function can also be seen on videojs as
+   *         {@link videojs:videojs.registerComponent}.
+   *
+   * @param {string} name
+   *        The name of the `Component` to register.
+   *
+   * @param {Component} ComponentToRegister
+   *        The `Component` class to register.
+   *
+   * @return {Component}
+   *         The `Component` that was registered.
+   */
+  static registerComponent(name, ComponentToRegister) {
+    if (typeof name !== 'string' || !name) {
+      throw new Error(`Illegal component name, "${name}"; must be a non-empty string.`);
+    }
+    const Tech = Component$1.getComponent('Tech');
+
+    // We need to make sure this check is only done if Tech has been registered.
+    const isTech = Tech && Tech.isTech(ComponentToRegister);
+    const isComp = Component$1 === ComponentToRegister || Component$1.prototype.isPrototypeOf(ComponentToRegister.prototype);
+    if (isTech || !isComp) {
+      let reason;
+      if (isTech) {
+        reason = 'techs must be registered using Tech.registerTech()';
+      } else {
+        reason = 'must be a Component subclass';
+      }
+      throw new Error(`Illegal component, "${name}"; ${reason}.`);
+    }
+    name = toTitleCase$1(name);
+    if (!Component$1.components_) {
+      Component$1.components_ = {};
+    }
+    const Player = Component$1.getComponent('Player');
+    if (name === 'Player' && Player && Player.players) {
+      const players = Player.players;
+      const playerNames = Object.keys(players);
+
+      // If we have players that were disposed, then their name will still be
+      // in Players.players. So, we must loop through and verify that the value
+      // for each item is not null. This allows registration of the Player component
+      // after all players have been disposed or before any were created.
+      if (players && playerNames.length > 0 && playerNames.map(pname => players[pname]).every(Boolean)) {
+        throw new Error('Can not register Player component after player has been created.');
+      }
+    }
+    Component$1.components_[name] = ComponentToRegister;
+    Component$1.components_[toLowerCase(name)] = ComponentToRegister;
+    return ComponentToRegister;
+  }
+
+  /**
+   * Get a `Component` based on the name it was registered with.
+   *
+   * @param {string} name
+   *        The Name of the component to get.
+   *
+   * @return {typeof Component}
+   *         The `Component` that got registered under the given name.
+   */
+  static getComponent(name) {
+    if (!name || !Component$1.components_) {
+      return;
+    }
+    return Component$1.components_[name];
+  }
+}
+Component$1.registerComponent('Component', Component$1);
+
+/**
+ * @file time.js
+ * @module time
+ */
+
+/**
+ * Returns the time for the specified index at the start or end
+ * of a TimeRange object.
+ *
+ * @typedef    {Function} TimeRangeIndex
+ *
+ * @param      {number} [index=0]
+ *             The range number to return the time for.
+ *
+ * @return     {number}
+ *             The time offset at the specified index.
+ *
+ * @deprecated The index argument must be provided.
+ *             In the future, leaving it out will throw an error.
+ */
+
+/**
+ * An object that contains ranges of time, which mimics {@link TimeRanges}.
+ *
+ * @typedef  {Object} TimeRange
+ *
+ * @property {number} length
+ *           The number of time ranges represented by this object.
+ *
+ * @property {module:time~TimeRangeIndex} start
+ *           Returns the time offset at which a specified time range begins.
+ *
+ * @property {module:time~TimeRangeIndex} end
+ *           Returns the time offset at which a specified time range ends.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges
+ */
+
+/**
+ * Check if any of the time ranges are over the maximum index.
+ *
+ * @private
+ * @param   {string} fnName
+ *          The function name to use for logging
+ *
+ * @param   {number} index
+ *          The index to check
+ *
+ * @param   {number} maxIndex
+ *          The maximum possible index
+ *
+ * @throws  {Error} if the timeRanges provided are over the maxIndex
+ */
+function rangeCheck(fnName, index, maxIndex) {
+  if (typeof index !== 'number' || index < 0 || index > maxIndex) {
+    throw new Error(`Failed to execute '${fnName}' on 'TimeRanges': The index provided (${index}) is non-numeric or out of bounds (0-${maxIndex}).`);
+  }
+}
+
+/**
+ * Get the time for the specified index at the start or end
+ * of a TimeRange object.
+ *
+ * @private
+ * @param      {string} fnName
+ *             The function name to use for logging
+ *
+ * @param      {string} valueIndex
+ *             The property that should be used to get the time. should be
+ *             'start' or 'end'
+ *
+ * @param      {Array} ranges
+ *             An array of time ranges
+ *
+ * @param      {Array} [rangeIndex=0]
+ *             The index to start the search at
+ *
+ * @return     {number}
+ *             The time that offset at the specified index.
+ *
+ * @deprecated rangeIndex must be set to a value, in the future this will throw an error.
+ * @throws     {Error} if rangeIndex is more than the length of ranges
+ */
+function getRange(fnName, valueIndex, ranges, rangeIndex) {
+  rangeCheck(fnName, rangeIndex, ranges.length - 1);
+  return ranges[rangeIndex][valueIndex];
+}
+
+/**
+ * Create a time range object given ranges of time.
+ *
+ * @private
+ * @param   {Array} [ranges]
+ *          An array of time ranges.
+ *
+ * @return  {TimeRange}
+ */
+function createTimeRangesObj(ranges) {
+  let timeRangesObj;
+  if (ranges === undefined || ranges.length === 0) {
+    timeRangesObj = {
+      length: 0,
+      start() {
+        throw new Error('This TimeRanges object is empty');
+      },
+      end() {
+        throw new Error('This TimeRanges object is empty');
+      }
+    };
+  } else {
+    timeRangesObj = {
+      length: ranges.length,
+      start: getRange.bind(null, 'start', 0, ranges),
+      end: getRange.bind(null, 'end', 1, ranges)
+    };
+  }
+  if (window__default["default"].Symbol && window__default["default"].Symbol.iterator) {
+    timeRangesObj[window__default["default"].Symbol.iterator] = () => (ranges || []).values();
+  }
+  return timeRangesObj;
+}
+
+/**
+ * Create a `TimeRange` object which mimics an
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges|HTML5 TimeRanges instance}.
+ *
+ * @param {number|Array[]} start
+ *        The start of a single range (a number) or an array of ranges (an
+ *        array of arrays of two numbers each).
+ *
+ * @param {number} end
+ *        The end of a single range. Cannot be used with the array form of
+ *        the `start` argument.
+ *
+ * @return {TimeRange}
+ */
+function createTimeRanges$1(start, end) {
+  if (Array.isArray(start)) {
+    return createTimeRangesObj(start);
+  } else if (start === undefined || end === undefined) {
+    return createTimeRangesObj();
+  }
+  return createTimeRangesObj([[start, end]]);
+}
+
+/**
+ * Format seconds as a time string, H:MM:SS or M:SS. Supplying a guide (in
+ * seconds) will force a number of leading zeros to cover the length of the
+ * guide.
+ *
+ * @private
+ * @param  {number} seconds
+ *         Number of seconds to be turned into a string
+ *
+ * @param  {number} guide
+ *         Number (in seconds) to model the string after
+ *
+ * @return {string}
+ *         Time formatted as H:MM:SS or M:SS
+ */
+const defaultImplementation = function (seconds, guide) {
+  seconds = seconds < 0 ? 0 : seconds;
+  let s = Math.floor(seconds % 60);
+  let m = Math.floor(seconds / 60 % 60);
+  let h = Math.floor(seconds / 3600);
+  const gm = Math.floor(guide / 60 % 60);
+  const gh = Math.floor(guide / 3600);
+
+  // handle invalid times
+  if (isNaN(seconds) || seconds === Infinity) {
+    // '-' is false for all relational operators (e.g. <, >=) so this setting
+    // will add the minimum number of fields specified by the guide
+    h = m = s = '-';
+  }
+
+  // Check if we need to show hours
+  h = h > 0 || gh > 0 ? h + ':' : '';
+
+  // If hours are showing, we may need to add a leading zero.
+  // Always show at least one digit of minutes.
+  m = ((h || gm >= 10) && m < 10 ? '0' + m : m) + ':';
+
+  // Check if leading zero is need for seconds
+  s = s < 10 ? '0' + s : s;
+  return h + m + s;
+};
+
+// Internal pointer to the current implementation.
+let implementation = defaultImplementation;
+
+/**
+ * Replaces the default formatTime implementation with a custom implementation.
+ *
+ * @param {Function} customImplementation
+ *        A function which will be used in place of the default formatTime
+ *        implementation. Will receive the current time in seconds and the
+ *        guide (in seconds) as arguments.
+ */
+function setFormatTime(customImplementation) {
+  implementation = customImplementation;
+}
+
+/**
+ * Resets formatTime to the default implementation.
+ */
+function resetFormatTime() {
+  implementation = defaultImplementation;
+}
+
+/**
+ * Delegates to either the default time formatting function or a custom
+ * function supplied via `setFormatTime`.
+ *
+ * Formats seconds as a time string (H:MM:SS or M:SS). Supplying a
+ * guide (in seconds) will force a number of leading zeros to cover the
+ * length of the guide.
+ *
+ * @example  formatTime(125, 600) === "02:05"
+ * @param    {number} seconds
+ *           Number of seconds to be turned into a string
+ *
+ * @param    {number} guide
+ *           Number (in seconds) to model the string after
+ *
+ * @return   {string}
+ *           Time formatted as H:MM:SS or M:SS
+ */
+function formatTime(seconds, guide = seconds) {
+  return implementation(seconds, guide);
+}
+
+var Time = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  createTimeRanges: createTimeRanges$1,
+  createTimeRange: createTimeRanges$1,
+  setFormatTime: setFormatTime,
+  resetFormatTime: resetFormatTime,
+  formatTime: formatTime
+});
+
+/**
+ * @file buffer.js
+ * @module buffer
+ */
+
+/**
+ * Compute the percentage of the media that has been buffered.
+ *
+ * @param { import('./time').TimeRange } buffered
+ *        The current `TimeRanges` object representing buffered time ranges
+ *
+ * @param {number} duration
+ *        Total duration of the media
+ *
+ * @return {number}
+ *         Percent buffered of the total duration in decimal form.
+ */
+function bufferedPercent(buffered, duration) {
+  let bufferedDuration = 0;
+  let start;
+  let end;
+  if (!duration) {
+    return 0;
+  }
+  if (!buffered || !buffered.length) {
+    buffered = createTimeRanges$1(0, 0);
+  }
+  for (let i = 0; i < buffered.length; i++) {
+    start = buffered.start(i);
+    end = buffered.end(i);
+
+    // buffered end can be bigger than duration by a very small fraction
+    if (end > duration) {
+      end = duration;
+    }
+    bufferedDuration += end - start;
+  }
+  return bufferedDuration / duration;
+}
+
+/**
+ * @file media-error.js
+ */
+
+/**
+ * A Custom `MediaError` class which mimics the standard HTML5 `MediaError` class.
+ *
+ * @param {number|string|Object|MediaError} value
+ *        This can be of multiple types:
+ *        - number: should be a standard error code
+ *        - string: an error message (the code will be 0)
+ *        - Object: arbitrary properties
+ *        - `MediaError` (native): used to populate a video.js `MediaError` object
+ *        - `MediaError` (video.js): will return itself if it's already a
+ *          video.js `MediaError` object.
+ *
+ * @see [MediaError Spec]{@link https://dev.w3.org/html5/spec-author-view/video.html#mediaerror}
+ * @see [Encrypted MediaError Spec]{@link https://www.w3.org/TR/2013/WD-encrypted-media-20130510/#error-codes}
+ *
+ * @class MediaError
+ */
+function MediaError(value) {
+  // Allow redundant calls to this constructor to avoid having `instanceof`
+  // checks peppered around the code.
+  if (value instanceof MediaError) {
+    return value;
+  }
+  if (typeof value === 'number') {
+    this.code = value;
+  } else if (typeof value === 'string') {
+    // default code is zero, so this is a custom error
+    this.message = value;
+  } else if (isObject(value)) {
+    // We assign the `code` property manually because native `MediaError` objects
+    // do not expose it as an own/enumerable property of the object.
+    if (typeof value.code === 'number') {
+      this.code = value.code;
+    }
+    Object.assign(this, value);
+  }
+  if (!this.message) {
+    this.message = MediaError.defaultMessages[this.code] || '';
+  }
+}
+
+/**
+ * The error code that refers two one of the defined `MediaError` types
+ *
+ * @type {Number}
+ */
+MediaError.prototype.code = 0;
+
+/**
+ * An optional message that to show with the error. Message is not part of the HTML5
+ * video spec but allows for more informative custom errors.
+ *
+ * @type {String}
+ */
+MediaError.prototype.message = '';
+
+/**
+ * An optional status code that can be set by plugins to allow even more detail about
+ * the error. For example a plugin might provide a specific HTTP status code and an
+ * error message for that code. Then when the plugin gets that error this class will
+ * know how to display an error message for it. This allows a custom message to show
+ * up on the `Player` error overlay.
+ *
+ * @type {Array}
+ */
+MediaError.prototype.status = null;
+
+/**
+ * An object containing an error type, as well as other information regarding the error.
+ *
+ * @typedef {{errorType: string, [key: string]: any}} ErrorMetadata
+ */
+
+/**
+ * An optional object to give more detail about the error. This can be used to give
+ * a higher level of specificity to an error versus the more generic MediaError codes.
+ * `metadata` expects an `errorType` string that should align with the values from videojs.Error.
+ *
+ * @type {ErrorMetadata}
+ */
+MediaError.prototype.metadata = null;
+
+/**
+ * Errors indexed by the W3C standard. The order **CANNOT CHANGE**! See the
+ * specification listed under {@link MediaError} for more information.
+ *
+ * @enum {array}
+ * @readonly
+ * @property {string} 0 - MEDIA_ERR_CUSTOM
+ * @property {string} 1 - MEDIA_ERR_ABORTED
+ * @property {string} 2 - MEDIA_ERR_NETWORK
+ * @property {string} 3 - MEDIA_ERR_DECODE
+ * @property {string} 4 - MEDIA_ERR_SRC_NOT_SUPPORTED
+ * @property {string} 5 - MEDIA_ERR_ENCRYPTED
+ */
+MediaError.errorTypes = ['MEDIA_ERR_CUSTOM', 'MEDIA_ERR_ABORTED', 'MEDIA_ERR_NETWORK', 'MEDIA_ERR_DECODE', 'MEDIA_ERR_SRC_NOT_SUPPORTED', 'MEDIA_ERR_ENCRYPTED'];
+
+/**
+ * The default `MediaError` messages based on the {@link MediaError.errorTypes}.
+ *
+ * @type {Array}
+ * @constant
+ */
+MediaError.defaultMessages = {
+  1: 'You aborted the media playback',
+  2: 'A network error caused the media download to fail part-way.',
+  3: 'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.',
+  4: 'The media could not be loaded, either because the server or network failed or because the format is not supported.',
+  5: 'The media is encrypted and we do not have the keys to decrypt it.'
+};
+
+/**
+ * W3C error code for any custom error.
+ *
+ * @member MediaError#MEDIA_ERR_CUSTOM
+ * @constant {number}
+ * @default 0
+ */
+MediaError.MEDIA_ERR_CUSTOM = 0;
+
+/**
+ * W3C error code for any custom error.
+ *
+ * @member MediaError.MEDIA_ERR_CUSTOM
+ * @constant {number}
+ * @default 0
+ */
+MediaError.prototype.MEDIA_ERR_CUSTOM = 0;
+
+/**
+ * W3C error code for media error aborted.
+ *
+ * @member MediaError#MEDIA_ERR_ABORTED
+ * @constant {number}
+ * @default 1
+ */
+MediaError.MEDIA_ERR_ABORTED = 1;
+
+/**
+ * W3C error code for media error aborted.
+ *
+ * @member MediaError.MEDIA_ERR_ABORTED
+ * @constant {number}
+ * @default 1
+ */
+MediaError.prototype.MEDIA_ERR_ABORTED = 1;
+
+/**
+ * W3C error code for any network error.
+ *
+ * @member MediaError#MEDIA_ERR_NETWORK
+ * @constant {number}
+ * @default 2
+ */
+MediaError.MEDIA_ERR_NETWORK = 2;
+
+/**
+ * W3C error code for any network error.
+ *
+ * @member MediaError.MEDIA_ERR_NETWORK
+ * @constant {number}
+ * @default 2
+ */
+MediaError.prototype.MEDIA_ERR_NETWORK = 2;
+
+/**
+ * W3C error code for any decoding error.
+ *
+ * @member MediaError#MEDIA_ERR_DECODE
+ * @constant {number}
+ * @default 3
+ */
+MediaError.MEDIA_ERR_DECODE = 3;
+
+/**
+ * W3C error code for any decoding error.
+ *
+ * @member MediaError.MEDIA_ERR_DECODE
+ * @constant {number}
+ * @default 3
+ */
+MediaError.prototype.MEDIA_ERR_DECODE = 3;
+
+/**
+ * W3C error code for any time that a source is not supported.
+ *
+ * @member MediaError#MEDIA_ERR_SRC_NOT_SUPPORTED
+ * @constant {number}
+ * @default 4
+ */
+MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+
+/**
+ * W3C error code for any time that a source is not supported.
+ *
+ * @member MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
+ * @constant {number}
+ * @default 4
+ */
+MediaError.prototype.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+
+/**
+ * W3C error code for any time that a source is encrypted.
+ *
+ * @member MediaError#MEDIA_ERR_ENCRYPTED
+ * @constant {number}
+ * @default 5
+ */
+MediaError.MEDIA_ERR_ENCRYPTED = 5;
+
+/**
+ * W3C error code for any time that a source is encrypted.
+ *
+ * @member MediaError.MEDIA_ERR_ENCRYPTED
+ * @constant {number}
+ * @default 5
+ */
+MediaError.prototype.MEDIA_ERR_ENCRYPTED = 5;
+
+/**
+ * Returns whether an object is `Promise`-like (i.e. has a `then` method).
+ *
+ * @param  {Object}  value
+ *         An object that may or may not be `Promise`-like.
+ *
+ * @return {boolean}
+ *         Whether or not the object is `Promise`-like.
+ */
+function isPromise(value) {
+  return value !== undefined && value !== null && typeof value.then === 'function';
+}
+
+/**
+ * Silence a Promise-like object.
+ *
+ * This is useful for avoiding non-harmful, but potentially confusing "uncaught
+ * play promise" rejection error messages.
+ *
+ * @param  {Object} value
+ *         An object that may or may not be `Promise`-like.
+ */
+function silencePromise(value) {
+  if (isPromise(value)) {
+    value.then(null, e => {});
+  }
+}
+
+/**
+ * @file text-track-list-converter.js Utilities for capturing text track state and
+ * re-creating tracks based on a capture.
+ *
+ * @module text-track-list-converter
+ */
+
+/**
+ * Examine a single {@link TextTrack} and return a JSON-compatible javascript object that
+ * represents the {@link TextTrack}'s state.
+ *
+ * @param {TextTrack} track
+ *        The text track to query.
+ *
+ * @return {Object}
+ *         A serializable javascript representation of the TextTrack.
+ * @private
+ */
+const trackToJson_ = function (track) {
+  const ret = ['kind', 'label', 'language', 'id', 'inBandMetadataTrackDispatchType', 'mode', 'src'].reduce((acc, prop, i) => {
+    if (track[prop]) {
+      acc[prop] = track[prop];
+    }
+    return acc;
+  }, {
+    cues: track.cues && Array.prototype.map.call(track.cues, function (cue) {
+      return {
+        startTime: cue.startTime,
+        endTime: cue.endTime,
+        text: cue.text,
+        id: cue.id
+      };
+    })
+  });
+  return ret;
+};
+
+/**
+ * Examine a {@link Tech} and return a JSON-compatible javascript array that represents the
+ * state of all {@link TextTrack}s currently configured. The return array is compatible with
+ * {@link text-track-list-converter:jsonToTextTracks}.
+ *
+ * @param { import('../tech/tech').default } tech
+ *        The tech object to query
+ *
+ * @return {Array}
+ *         A serializable javascript representation of the {@link Tech}s
+ *         {@link TextTrackList}.
+ */
+const textTracksToJson = function (tech) {
+  const trackEls = tech.$$('track');
+  const trackObjs = Array.prototype.map.call(trackEls, t => t.track);
+  const tracks = Array.prototype.map.call(trackEls, function (trackEl) {
+    const json = trackToJson_(trackEl.track);
+    if (trackEl.src) {
+      json.src = trackEl.src;
+    }
+    return json;
+  });
+  return tracks.concat(Array.prototype.filter.call(tech.textTracks(), function (track) {
+    return trackObjs.indexOf(track) === -1;
+  }).map(trackToJson_));
+};
+
+/**
+ * Create a set of remote {@link TextTrack}s on a {@link Tech} based on an array of javascript
+ * object {@link TextTrack} representations.
+ *
+ * @param {Array} json
+ *        An array of `TextTrack` representation objects, like those that would be
+ *        produced by `textTracksToJson`.
+ *
+ * @param {Tech} tech
+ *        The `Tech` to create the `TextTrack`s on.
+ */
+const jsonToTextTracks = function (json, tech) {
+  json.forEach(function (track) {
+    const addedTrack = tech.addRemoteTextTrack(track).track;
+    if (!track.src && track.cues) {
+      track.cues.forEach(cue => addedTrack.addCue(cue));
+    }
+  });
+  return tech.textTracks();
+};
+var textTrackConverter = {
+  textTracksToJson,
+  jsonToTextTracks,
+  trackToJson_
+};
+
+/**
+ * @file modal-dialog.js
+ */
+const MODAL_CLASS_NAME = 'vjs-modal-dialog';
+
+/**
+ * The `ModalDialog` displays over the video and its controls, which blocks
+ * interaction with the player until it is closed.
+ *
+ * Modal dialogs include a "Close" button and will close when that button
+ * is activated - or when ESC is pressed anywhere.
+ *
+ * @extends Component
+ */
+class ModalDialog extends Component$1 {
+  /**
+   * Create an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param { import('./utils/dom').ContentDescriptor} [options.content=undefined]
+   *        Provide customized content for this modal.
+   *
+   * @param {string} [options.description]
+   *        A text description for the modal, primarily for accessibility.
+   *
+   * @param {boolean} [options.fillAlways=false]
+   *        Normally, modals are automatically filled only the first time
+   *        they open. This tells the modal to refresh its content
+   *        every time it opens.
+   *
+   * @param {string} [options.label]
+   *        A text label for the modal, primarily for accessibility.
+   *
+   * @param {boolean} [options.pauseOnOpen=true]
+   *        If `true`, playback will will be paused if playing when
+   *        the modal opens, and resumed when it closes.
+   *
+   * @param {boolean} [options.temporary=true]
+   *        If `true`, the modal can only be opened once; it will be
+   *        disposed as soon as it's closed.
+   *
+   * @param {boolean} [options.uncloseable=false]
+   *        If `true`, the user will not be able to close the modal
+   *        through the UI in the normal ways. Programmatic closing is
+   *        still possible.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.handleKeyDown_ = e => this.handleKeyDown(e);
+    this.close_ = e => this.close(e);
+    this.opened_ = this.hasBeenOpened_ = this.hasBeenFilled_ = false;
+    this.closeable(!this.options_.uncloseable);
+    this.content(this.options_.content);
+
+    // Make sure the contentEl is defined AFTER any children are initialized
+    // because we only want the contents of the modal in the contentEl
+    // (not the UI elements like the close button).
+    this.contentEl_ = createEl('div', {
+      className: `${MODAL_CLASS_NAME}-content`
+    }, {
+      role: 'document'
+    });
+    this.descEl_ = createEl('p', {
+      className: `${MODAL_CLASS_NAME}-description vjs-control-text`,
+      id: this.el().getAttribute('aria-describedby')
+    });
+    textContent(this.descEl_, this.description());
+    this.el_.appendChild(this.descEl_);
+    this.el_.appendChild(this.contentEl_);
+  }
+
+  /**
+   * Create the `ModalDialog`'s DOM element
+   *
+   * @return {Element}
+   *         The DOM element that gets created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: this.buildCSSClass(),
+      tabIndex: -1
+    }, {
+      'aria-describedby': `${this.id()}_description`,
+      'aria-hidden': 'true',
+      'aria-label': this.label(),
+      'role': 'dialog',
+      'aria-live': 'polite'
+    });
+  }
+  dispose() {
+    this.contentEl_ = null;
+    this.descEl_ = null;
+    this.previouslyActiveEl_ = null;
+    super.dispose();
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `${MODAL_CLASS_NAME} vjs-hidden ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Returns the label string for this modal. Primarily used for accessibility.
+   *
+   * @return {string}
+   *         the localized or raw label of this modal.
+   */
+  label() {
+    return this.localize(this.options_.label || 'Modal Window');
+  }
+
+  /**
+   * Returns the description string for this modal. Primarily used for
+   * accessibility.
+   *
+   * @return {string}
+   *         The localized or raw description of this modal.
+   */
+  description() {
+    let desc = this.options_.description || this.localize('This is a modal window.');
+
+    // Append a universal closeability message if the modal is closeable.
+    if (this.closeable()) {
+      desc += ' ' + this.localize('This modal can be closed by pressing the Escape key or activating the close button.');
+    }
+    return desc;
+  }
+
+  /**
+   * Opens the modal.
+   *
+   * @fires ModalDialog#beforemodalopen
+   * @fires ModalDialog#modalopen
+   */
+  open() {
+    if (this.opened_) {
+      if (this.options_.fillAlways) {
+        this.fill();
+      }
+      return;
+    }
+    const player = this.player();
+
+    /**
+      * Fired just before a `ModalDialog` is opened.
+      *
+      * @event ModalDialog#beforemodalopen
+      * @type {Event}
+      */
+    this.trigger('beforemodalopen');
+    this.opened_ = true;
+
+    // Fill content if the modal has never opened before and
+    // never been filled.
+    if (this.options_.fillAlways || !this.hasBeenOpened_ && !this.hasBeenFilled_) {
+      this.fill();
+    }
+
+    // If the player was playing, pause it and take note of its previously
+    // playing state.
+    this.wasPlaying_ = !player.paused();
+    if (this.options_.pauseOnOpen && this.wasPlaying_) {
+      player.pause();
+    }
+    this.on('keydown', this.handleKeyDown_);
+
+    // Hide controls and note if they were enabled.
+    this.hadControls_ = player.controls();
+    player.controls(false);
+    this.show();
+    this.conditionalFocus_();
+    this.el().setAttribute('aria-hidden', 'false');
+
+    /**
+      * Fired just after a `ModalDialog` is opened.
+      *
+      * @event ModalDialog#modalopen
+      * @type {Event}
+      */
+    this.trigger('modalopen');
+    this.hasBeenOpened_ = true;
+  }
+
+  /**
+   * If the `ModalDialog` is currently open or closed.
+   *
+   * @param  {boolean} [value]
+   *         If given, it will open (`true`) or close (`false`) the modal.
+   *
+   * @return {boolean}
+   *         the current open state of the modaldialog
+   */
+  opened(value) {
+    if (typeof value === 'boolean') {
+      this[value ? 'open' : 'close']();
+    }
+    return this.opened_;
+  }
+
+  /**
+   * Closes the modal, does nothing if the `ModalDialog` is
+   * not open.
+   *
+   * @fires ModalDialog#beforemodalclose
+   * @fires ModalDialog#modalclose
+   */
+  close() {
+    if (!this.opened_) {
+      return;
+    }
+    const player = this.player();
+
+    /**
+      * Fired just before a `ModalDialog` is closed.
+      *
+      * @event ModalDialog#beforemodalclose
+      * @type {Event}
+      */
+    this.trigger('beforemodalclose');
+    this.opened_ = false;
+    if (this.wasPlaying_ && this.options_.pauseOnOpen) {
+      player.play();
+    }
+    this.off('keydown', this.handleKeyDown_);
+    if (this.hadControls_) {
+      player.controls(true);
+    }
+    this.hide();
+    this.el().setAttribute('aria-hidden', 'true');
+
+    /**
+      * Fired just after a `ModalDialog` is closed.
+      *
+      * @event ModalDialog#modalclose
+      * @type {Event}
+      */
+    this.trigger('modalclose');
+    this.conditionalBlur_();
+    if (this.options_.temporary) {
+      this.dispose();
+    }
+  }
+
+  /**
+   * Check to see if the `ModalDialog` is closeable via the UI.
+   *
+   * @param  {boolean} [value]
+   *         If given as a boolean, it will set the `closeable` option.
+   *
+   * @return {boolean}
+   *         Returns the final value of the closable option.
+   */
+  closeable(value) {
+    if (typeof value === 'boolean') {
+      const closeable = this.closeable_ = !!value;
+      let close = this.getChild('closeButton');
+
+      // If this is being made closeable and has no close button, add one.
+      if (closeable && !close) {
+        // The close button should be a child of the modal - not its
+        // content element, so temporarily change the content element.
+        const temp = this.contentEl_;
+        this.contentEl_ = this.el_;
+        close = this.addChild('closeButton', {
+          controlText: 'Close Modal Dialog'
+        });
+        this.contentEl_ = temp;
+        this.on(close, 'close', this.close_);
+      }
+
+      // If this is being made uncloseable and has a close button, remove it.
+      if (!closeable && close) {
+        this.off(close, 'close', this.close_);
+        this.removeChild(close);
+        close.dispose();
+      }
+    }
+    return this.closeable_;
+  }
+
+  /**
+   * Fill the modal's content element with the modal's "content" option.
+   * The content element will be emptied before this change takes place.
+   */
+  fill() {
+    this.fillWith(this.content());
+  }
+
+  /**
+   * Fill the modal's content element with arbitrary content.
+   * The content element will be emptied before this change takes place.
+   *
+   * @fires ModalDialog#beforemodalfill
+   * @fires ModalDialog#modalfill
+   *
+   * @param { import('./utils/dom').ContentDescriptor} [content]
+   *        The same rules apply to this as apply to the `content` option.
+   */
+  fillWith(content) {
+    const contentEl = this.contentEl();
+    const parentEl = contentEl.parentNode;
+    const nextSiblingEl = contentEl.nextSibling;
+
+    /**
+      * Fired just before a `ModalDialog` is filled with content.
+      *
+      * @event ModalDialog#beforemodalfill
+      * @type {Event}
+      */
+    this.trigger('beforemodalfill');
+    this.hasBeenFilled_ = true;
+
+    // Detach the content element from the DOM before performing
+    // manipulation to avoid modifying the live DOM multiple times.
+    parentEl.removeChild(contentEl);
+    this.empty();
+    insertContent(contentEl, content);
+    /**
+     * Fired just after a `ModalDialog` is filled with content.
+     *
+     * @event ModalDialog#modalfill
+     * @type {Event}
+     */
+    this.trigger('modalfill');
+
+    // Re-inject the re-filled content element.
+    if (nextSiblingEl) {
+      parentEl.insertBefore(contentEl, nextSiblingEl);
+    } else {
+      parentEl.appendChild(contentEl);
+    }
+
+    // make sure that the close button is last in the dialog DOM
+    const closeButton = this.getChild('closeButton');
+    if (closeButton) {
+      parentEl.appendChild(closeButton.el_);
+    }
+  }
+
+  /**
+   * Empties the content element. This happens anytime the modal is filled.
+   *
+   * @fires ModalDialog#beforemodalempty
+   * @fires ModalDialog#modalempty
+   */
+  empty() {
+    /**
+    * Fired just before a `ModalDialog` is emptied.
+    *
+    * @event ModalDialog#beforemodalempty
+    * @type {Event}
+    */
+    this.trigger('beforemodalempty');
+    emptyEl(this.contentEl());
+
+    /**
+    * Fired just after a `ModalDialog` is emptied.
+    *
+    * @event ModalDialog#modalempty
+    * @type {Event}
+    */
+    this.trigger('modalempty');
+  }
+
+  /**
+   * Gets or sets the modal content, which gets normalized before being
+   * rendered into the DOM.
+   *
+   * This does not update the DOM or fill the modal, but it is called during
+   * that process.
+   *
+   * @param  { import('./utils/dom').ContentDescriptor} [value]
+   *         If defined, sets the internal content value to be used on the
+   *         next call(s) to `fill`. This value is normalized before being
+   *         inserted. To "clear" the internal content value, pass `null`.
+   *
+   * @return { import('./utils/dom').ContentDescriptor}
+   *         The current content of the modal dialog
+   */
+  content(value) {
+    if (typeof value !== 'undefined') {
+      this.content_ = value;
+    }
+    return this.content_;
+  }
+
+  /**
+   * conditionally focus the modal dialog if focus was previously on the player.
+   *
+   * @private
+   */
+  conditionalFocus_() {
+    const activeEl = document__default["default"].activeElement;
+    const playerEl = this.player_.el_;
+    this.previouslyActiveEl_ = null;
+    if (playerEl.contains(activeEl) || playerEl === activeEl) {
+      this.previouslyActiveEl_ = activeEl;
+      this.focus();
+    }
+  }
+
+  /**
+   * conditionally blur the element and refocus the last focused element
+   *
+   * @private
+   */
+  conditionalBlur_() {
+    if (this.previouslyActiveEl_) {
+      this.previouslyActiveEl_.focus();
+      this.previouslyActiveEl_ = null;
+    }
+  }
+
+  /**
+   * Keydown handler. Attached when modal is focused.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Do not allow keydowns to reach out of the modal dialog.
+    event.stopPropagation();
+    if (keycode__default["default"].isEventKey(event, 'Escape') && this.closeable()) {
+      event.preventDefault();
+      this.close();
+      return;
+    }
+
+    // exit early if it isn't a tab key
+    if (!keycode__default["default"].isEventKey(event, 'Tab')) {
+      return;
+    }
+    const focusableEls = this.focusableEls_();
+    const activeEl = this.el_.querySelector(':focus');
+    let focusIndex;
+    for (let i = 0; i < focusableEls.length; i++) {
+      if (activeEl === focusableEls[i]) {
+        focusIndex = i;
+        break;
+      }
+    }
+    if (document__default["default"].activeElement === this.el_) {
+      focusIndex = 0;
+    }
+    if (event.shiftKey && focusIndex === 0) {
+      focusableEls[focusableEls.length - 1].focus();
+      event.preventDefault();
+    } else if (!event.shiftKey && focusIndex === focusableEls.length - 1) {
+      focusableEls[0].focus();
+      event.preventDefault();
+    }
+  }
+
+  /**
+   * get all focusable elements
+   *
+   * @private
+   */
+  focusableEls_() {
+    const allChildren = this.el_.querySelectorAll('*');
+    return Array.prototype.filter.call(allChildren, child => {
+      return (child instanceof window__default["default"].HTMLAnchorElement || child instanceof window__default["default"].HTMLAreaElement) && child.hasAttribute('href') || (child instanceof window__default["default"].HTMLInputElement || child instanceof window__default["default"].HTMLSelectElement || child instanceof window__default["default"].HTMLTextAreaElement || child instanceof window__default["default"].HTMLButtonElement) && !child.hasAttribute('disabled') || child instanceof window__default["default"].HTMLIFrameElement || child instanceof window__default["default"].HTMLObjectElement || child instanceof window__default["default"].HTMLEmbedElement || child.hasAttribute('tabindex') && child.getAttribute('tabindex') !== -1 || child.hasAttribute('contenteditable');
+    });
+  }
+}
+
+/**
+ * Default options for `ModalDialog` default options.
+ *
+ * @type {Object}
+ * @private
+ */
+ModalDialog.prototype.options_ = {
+  pauseOnOpen: true,
+  temporary: true
+};
+Component$1.registerComponent('ModalDialog', ModalDialog);
+
+/**
+ * @file track-list.js
+ */
+
+/**
+ * Common functionaliy between {@link TextTrackList}, {@link AudioTrackList}, and
+ * {@link VideoTrackList}
+ *
+ * @extends EventTarget
+ */
+class TrackList extends EventTarget$2 {
+  /**
+   * Create an instance of this class
+   *
+   * @param { import('./track').default[] } tracks
+   *        A list of tracks to initialize the list with.
+   *
+   * @abstract
+   */
+  constructor(tracks = []) {
+    super();
+    this.tracks_ = [];
+
+    /**
+     * @memberof TrackList
+     * @member {number} length
+     *         The current number of `Track`s in the this Trackist.
+     * @instance
+     */
+    Object.defineProperty(this, 'length', {
+      get() {
+        return this.tracks_.length;
+      }
+    });
+    for (let i = 0; i < tracks.length; i++) {
+      this.addTrack(tracks[i]);
+    }
+  }
+
+  /**
+   * Add a {@link Track} to the `TrackList`
+   *
+   * @param { import('./track').default } track
+   *        The audio, video, or text track to add to the list.
+   *
+   * @fires TrackList#addtrack
+   */
+  addTrack(track) {
+    const index = this.tracks_.length;
+    if (!('' + index in this)) {
+      Object.defineProperty(this, index, {
+        get() {
+          return this.tracks_[index];
+        }
+      });
+    }
+
+    // Do not add duplicate tracks
+    if (this.tracks_.indexOf(track) === -1) {
+      this.tracks_.push(track);
+      /**
+       * Triggered when a track is added to a track list.
+       *
+       * @event TrackList#addtrack
+       * @type {Event}
+       * @property {Track} track
+       *           A reference to track that was added.
+       */
+      this.trigger({
+        track,
+        type: 'addtrack',
+        target: this
+      });
+    }
+
+    /**
+     * Triggered when a track label is changed.
+     *
+     * @event TrackList#addtrack
+     * @type {Event}
+     * @property {Track} track
+     *           A reference to track that was added.
+     */
+    track.labelchange_ = () => {
+      this.trigger({
+        track,
+        type: 'labelchange',
+        target: this
+      });
+    };
+    if (isEvented(track)) {
+      track.addEventListener('labelchange', track.labelchange_);
+    }
+  }
+
+  /**
+   * Remove a {@link Track} from the `TrackList`
+   *
+   * @param { import('./track').default } rtrack
+   *        The audio, video, or text track to remove from the list.
+   *
+   * @fires TrackList#removetrack
+   */
+  removeTrack(rtrack) {
+    let track;
+    for (let i = 0, l = this.length; i < l; i++) {
+      if (this[i] === rtrack) {
+        track = this[i];
+        if (track.off) {
+          track.off();
+        }
+        this.tracks_.splice(i, 1);
+        break;
+      }
+    }
+    if (!track) {
+      return;
+    }
+
+    /**
+     * Triggered when a track is removed from track list.
+     *
+     * @event TrackList#removetrack
+     * @type {Event}
+     * @property {Track} track
+     *           A reference to track that was removed.
+     */
+    this.trigger({
+      track,
+      type: 'removetrack',
+      target: this
+    });
+  }
+
+  /**
+   * Get a Track from the TrackList by a tracks id
+   *
+   * @param {string} id - the id of the track to get
+   * @method getTrackById
+   * @return { import('./track').default }
+   * @private
+   */
+  getTrackById(id) {
+    let result = null;
+    for (let i = 0, l = this.length; i < l; i++) {
+      const track = this[i];
+      if (track.id === id) {
+        result = track;
+        break;
+      }
+    }
+    return result;
+  }
+}
+
+/**
+ * Triggered when a different track is selected/enabled.
+ *
+ * @event TrackList#change
+ * @type {Event}
+ */
+
+/**
+ * Events that can be called with on + eventName. See {@link EventHandler}.
+ *
+ * @property {Object} TrackList#allowedEvents_
+ * @protected
+ */
+TrackList.prototype.allowedEvents_ = {
+  change: 'change',
+  addtrack: 'addtrack',
+  removetrack: 'removetrack',
+  labelchange: 'labelchange'
+};
+
+// emulate attribute EventHandler support to allow for feature detection
+for (const event in TrackList.prototype.allowedEvents_) {
+  TrackList.prototype['on' + event] = null;
+}
+
+/**
+ * @file audio-track-list.js
+ */
+
+/**
+ * Anywhere we call this function we diverge from the spec
+ * as we only support one enabled audiotrack at a time
+ *
+ * @param {AudioTrackList} list
+ *        list to work on
+ *
+ * @param { import('./audio-track').default } track
+ *        The track to skip
+ *
+ * @private
+ */
+const disableOthers$1 = function (list, track) {
+  for (let i = 0; i < list.length; i++) {
+    if (!Object.keys(list[i]).length || track.id === list[i].id) {
+      continue;
+    }
+    // another audio track is enabled, disable it
+    list[i].enabled = false;
+  }
+};
+
+/**
+ * The current list of {@link AudioTrack} for a media file.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist}
+ * @extends TrackList
+ */
+class AudioTrackList extends TrackList {
+  /**
+   * Create an instance of this class.
+   *
+   * @param { import('./audio-track').default[] } [tracks=[]]
+   *        A list of `AudioTrack` to instantiate the list with.
+   */
+  constructor(tracks = []) {
+    // make sure only 1 track is enabled
+    // sorted from last index to first index
+    for (let i = tracks.length - 1; i >= 0; i--) {
+      if (tracks[i].enabled) {
+        disableOthers$1(tracks, tracks[i]);
+        break;
+      }
+    }
+    super(tracks);
+    this.changing_ = false;
+  }
+
+  /**
+   * Add an {@link AudioTrack} to the `AudioTrackList`.
+   *
+   * @param { import('./audio-track').default } track
+   *        The AudioTrack to add to the list
+   *
+   * @fires TrackList#addtrack
+   */
+  addTrack(track) {
+    if (track.enabled) {
+      disableOthers$1(this, track);
+    }
+    super.addTrack(track);
+    // native tracks don't have this
+    if (!track.addEventListener) {
+      return;
+    }
+    track.enabledChange_ = () => {
+      // when we are disabling other tracks (since we don't support
+      // more than one track at a time) we will set changing_
+      // to true so that we don't trigger additional change events
+      if (this.changing_) {
+        return;
+      }
+      this.changing_ = true;
+      disableOthers$1(this, track);
+      this.changing_ = false;
+      this.trigger('change');
+    };
+
+    /**
+     * @listens AudioTrack#enabledchange
+     * @fires TrackList#change
+     */
+    track.addEventListener('enabledchange', track.enabledChange_);
+  }
+  removeTrack(rtrack) {
+    super.removeTrack(rtrack);
+    if (rtrack.removeEventListener && rtrack.enabledChange_) {
+      rtrack.removeEventListener('enabledchange', rtrack.enabledChange_);
+      rtrack.enabledChange_ = null;
+    }
+  }
+}
+
+/**
+ * @file video-track-list.js
+ */
+
+/**
+ * Un-select all other {@link VideoTrack}s that are selected.
+ *
+ * @param {VideoTrackList} list
+ *        list to work on
+ *
+ * @param { import('./video-track').default } track
+ *        The track to skip
+ *
+ * @private
+ */
+const disableOthers = function (list, track) {
+  for (let i = 0; i < list.length; i++) {
+    if (!Object.keys(list[i]).length || track.id === list[i].id) {
+      continue;
+    }
+    // another video track is enabled, disable it
+    list[i].selected = false;
+  }
+};
+
+/**
+ * The current list of {@link VideoTrack} for a video.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist}
+ * @extends TrackList
+ */
+class VideoTrackList extends TrackList {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {VideoTrack[]} [tracks=[]]
+   *        A list of `VideoTrack` to instantiate the list with.
+   */
+  constructor(tracks = []) {
+    // make sure only 1 track is enabled
+    // sorted from last index to first index
+    for (let i = tracks.length - 1; i >= 0; i--) {
+      if (tracks[i].selected) {
+        disableOthers(tracks, tracks[i]);
+        break;
+      }
+    }
+    super(tracks);
+    this.changing_ = false;
+
+    /**
+     * @member {number} VideoTrackList#selectedIndex
+     *         The current index of the selected {@link VideoTrack`}.
+     */
+    Object.defineProperty(this, 'selectedIndex', {
+      get() {
+        for (let i = 0; i < this.length; i++) {
+          if (this[i].selected) {
+            return i;
+          }
+        }
+        return -1;
+      },
+      set() {}
+    });
+  }
+
+  /**
+   * Add a {@link VideoTrack} to the `VideoTrackList`.
+   *
+   * @param { import('./video-track').default } track
+   *        The VideoTrack to add to the list
+   *
+   * @fires TrackList#addtrack
+   */
+  addTrack(track) {
+    if (track.selected) {
+      disableOthers(this, track);
+    }
+    super.addTrack(track);
+    // native tracks don't have this
+    if (!track.addEventListener) {
+      return;
+    }
+    track.selectedChange_ = () => {
+      if (this.changing_) {
+        return;
+      }
+      this.changing_ = true;
+      disableOthers(this, track);
+      this.changing_ = false;
+      this.trigger('change');
+    };
+
+    /**
+     * @listens VideoTrack#selectedchange
+     * @fires TrackList#change
+     */
+    track.addEventListener('selectedchange', track.selectedChange_);
+  }
+  removeTrack(rtrack) {
+    super.removeTrack(rtrack);
+    if (rtrack.removeEventListener && rtrack.selectedChange_) {
+      rtrack.removeEventListener('selectedchange', rtrack.selectedChange_);
+      rtrack.selectedChange_ = null;
+    }
+  }
+}
+
+/**
+ * @file text-track-list.js
+ */
+
+/**
+ * The current list of {@link TextTrack} for a media file.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttracklist}
+ * @extends TrackList
+ */
+class TextTrackList extends TrackList {
+  /**
+   * Add a {@link TextTrack} to the `TextTrackList`
+   *
+   * @param { import('./text-track').default } track
+   *        The text track to add to the list.
+   *
+   * @fires TrackList#addtrack
+   */
+  addTrack(track) {
+    super.addTrack(track);
+    if (!this.queueChange_) {
+      this.queueChange_ = () => this.queueTrigger('change');
+    }
+    if (!this.triggerSelectedlanguagechange) {
+      this.triggerSelectedlanguagechange_ = () => this.trigger('selectedlanguagechange');
+    }
+
+    /**
+     * @listens TextTrack#modechange
+     * @fires TrackList#change
+     */
+    track.addEventListener('modechange', this.queueChange_);
+    const nonLanguageTextTrackKind = ['metadata', 'chapters'];
+    if (nonLanguageTextTrackKind.indexOf(track.kind) === -1) {
+      track.addEventListener('modechange', this.triggerSelectedlanguagechange_);
+    }
+  }
+  removeTrack(rtrack) {
+    super.removeTrack(rtrack);
+
+    // manually remove the event handlers we added
+    if (rtrack.removeEventListener) {
+      if (this.queueChange_) {
+        rtrack.removeEventListener('modechange', this.queueChange_);
+      }
+      if (this.selectedlanguagechange_) {
+        rtrack.removeEventListener('modechange', this.triggerSelectedlanguagechange_);
+      }
+    }
+  }
+}
+
+/**
+ * @file html-track-element-list.js
+ */
+
+/**
+ * The current list of {@link HtmlTrackElement}s.
+ */
+class HtmlTrackElementList {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {HtmlTrackElement[]} [tracks=[]]
+   *        A list of `HtmlTrackElement` to instantiate the list with.
+   */
+  constructor(trackElements = []) {
+    this.trackElements_ = [];
+
+    /**
+     * @memberof HtmlTrackElementList
+     * @member {number} length
+     *         The current number of `Track`s in the this Trackist.
+     * @instance
+     */
+    Object.defineProperty(this, 'length', {
+      get() {
+        return this.trackElements_.length;
+      }
+    });
+    for (let i = 0, length = trackElements.length; i < length; i++) {
+      this.addTrackElement_(trackElements[i]);
+    }
+  }
+
+  /**
+   * Add an {@link HtmlTrackElement} to the `HtmlTrackElementList`
+   *
+   * @param {HtmlTrackElement} trackElement
+   *        The track element to add to the list.
+   *
+   * @private
+   */
+  addTrackElement_(trackElement) {
+    const index = this.trackElements_.length;
+    if (!('' + index in this)) {
+      Object.defineProperty(this, index, {
+        get() {
+          return this.trackElements_[index];
+        }
+      });
+    }
+
+    // Do not add duplicate elements
+    if (this.trackElements_.indexOf(trackElement) === -1) {
+      this.trackElements_.push(trackElement);
+    }
+  }
+
+  /**
+   * Get an {@link HtmlTrackElement} from the `HtmlTrackElementList` given an
+   * {@link TextTrack}.
+   *
+   * @param {TextTrack} track
+   *        The track associated with a track element.
+   *
+   * @return {HtmlTrackElement|undefined}
+   *         The track element that was found or undefined.
+   *
+   * @private
+   */
+  getTrackElementByTrack_(track) {
+    let trackElement_;
+    for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+      if (track === this.trackElements_[i].track) {
+        trackElement_ = this.trackElements_[i];
+        break;
+      }
+    }
+    return trackElement_;
+  }
+
+  /**
+   * Remove a {@link HtmlTrackElement} from the `HtmlTrackElementList`
+   *
+   * @param {HtmlTrackElement} trackElement
+   *        The track element to remove from the list.
+   *
+   * @private
+   */
+  removeTrackElement_(trackElement) {
+    for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+      if (trackElement === this.trackElements_[i]) {
+        if (this.trackElements_[i].track && typeof this.trackElements_[i].track.off === 'function') {
+          this.trackElements_[i].track.off();
+        }
+        if (typeof this.trackElements_[i].off === 'function') {
+          this.trackElements_[i].off();
+        }
+        this.trackElements_.splice(i, 1);
+        break;
+      }
+    }
+  }
+}
+
+/**
+ * @file text-track-cue-list.js
+ */
+
+/**
+ * @typedef {Object} TextTrackCueList~TextTrackCue
+ *
+ * @property {string} id
+ *           The unique id for this text track cue
+ *
+ * @property {number} startTime
+ *           The start time for this text track cue
+ *
+ * @property {number} endTime
+ *           The end time for this text track cue
+ *
+ * @property {boolean} pauseOnExit
+ *           Pause when the end time is reached if true.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue}
+ */
+
+/**
+ * A List of TextTrackCues.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcuelist}
+ */
+class TextTrackCueList {
+  /**
+   * Create an instance of this class..
+   *
+   * @param {Array} cues
+   *        A list of cues to be initialized with
+   */
+  constructor(cues) {
+    TextTrackCueList.prototype.setCues_.call(this, cues);
+
+    /**
+     * @memberof TextTrackCueList
+     * @member {number} length
+     *         The current number of `TextTrackCue`s in the TextTrackCueList.
+     * @instance
+     */
+    Object.defineProperty(this, 'length', {
+      get() {
+        return this.length_;
+      }
+    });
+  }
+
+  /**
+   * A setter for cues in this list. Creates getters
+   * an an index for the cues.
+   *
+   * @param {Array} cues
+   *        An array of cues to set
+   *
+   * @private
+   */
+  setCues_(cues) {
+    const oldLength = this.length || 0;
+    let i = 0;
+    const l = cues.length;
+    this.cues_ = cues;
+    this.length_ = cues.length;
+    const defineProp = function (index) {
+      if (!('' + index in this)) {
+        Object.defineProperty(this, '' + index, {
+          get() {
+            return this.cues_[index];
+          }
+        });
+      }
+    };
+    if (oldLength < l) {
+      i = oldLength;
+      for (; i < l; i++) {
+        defineProp.call(this, i);
+      }
+    }
+  }
+
+  /**
+   * Get a `TextTrackCue` that is currently in the `TextTrackCueList` by id.
+   *
+   * @param {string} id
+   *        The id of the cue that should be searched for.
+   *
+   * @return {TextTrackCueList~TextTrackCue|null}
+   *         A single cue or null if none was found.
+   */
+  getCueById(id) {
+    let result = null;
+    for (let i = 0, l = this.length; i < l; i++) {
+      const cue = this[i];
+      if (cue.id === id) {
+        result = cue;
+        break;
+      }
+    }
+    return result;
+  }
+}
+
+/**
+ * @file track-kinds.js
+ */
+
+/**
+ * All possible `VideoTrackKind`s
+ *
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-videotrack-kind
+ * @typedef VideoTrack~Kind
+ * @enum
+ */
+const VideoTrackKind = {
+  alternative: 'alternative',
+  captions: 'captions',
+  main: 'main',
+  sign: 'sign',
+  subtitles: 'subtitles',
+  commentary: 'commentary'
+};
+
+/**
+ * All possible `AudioTrackKind`s
+ *
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-kind
+ * @typedef AudioTrack~Kind
+ * @enum
+ */
+const AudioTrackKind = {
+  'alternative': 'alternative',
+  'descriptions': 'descriptions',
+  'main': 'main',
+  'main-desc': 'main-desc',
+  'translation': 'translation',
+  'commentary': 'commentary'
+};
+
+/**
+ * All possible `TextTrackKind`s
+ *
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-texttrack-kind
+ * @typedef TextTrack~Kind
+ * @enum
+ */
+const TextTrackKind = {
+  subtitles: 'subtitles',
+  captions: 'captions',
+  descriptions: 'descriptions',
+  chapters: 'chapters',
+  metadata: 'metadata'
+};
+
+/**
+ * All possible `TextTrackMode`s
+ *
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackmode
+ * @typedef TextTrack~Mode
+ * @enum
+ */
+const TextTrackMode = {
+  disabled: 'disabled',
+  hidden: 'hidden',
+  showing: 'showing'
+};
+
+/**
+ * @file track.js
+ */
+
+/**
+ * A Track class that contains all of the common functionality for {@link AudioTrack},
+ * {@link VideoTrack}, and {@link TextTrack}.
+ *
+ * > Note: This class should not be used directly
+ *
+ * @see {@link https://html.spec.whatwg.org/multipage/embedded-content.html}
+ * @extends EventTarget
+ * @abstract
+ */
+class Track extends EventTarget$2 {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {Object} [options={}]
+   *        Object of option names and values
+   *
+   * @param {string} [options.kind='']
+   *        A valid kind for the track type you are creating.
+   *
+   * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+   *        A unique id for this AudioTrack.
+   *
+   * @param {string} [options.label='']
+   *        The menu label for this track.
+   *
+   * @param {string} [options.language='']
+   *        A valid two character language code.
+   *
+   * @abstract
+   */
+  constructor(options = {}) {
+    super();
+    const trackProps = {
+      id: options.id || 'vjs_track_' + newGUID(),
+      kind: options.kind || '',
+      language: options.language || ''
+    };
+    let label = options.label || '';
+
+    /**
+     * @memberof Track
+     * @member {string} id
+     *         The id of this track. Cannot be changed after creation.
+     * @instance
+     *
+     * @readonly
+     */
+
+    /**
+     * @memberof Track
+     * @member {string} kind
+     *         The kind of track that this is. Cannot be changed after creation.
+     * @instance
+     *
+     * @readonly
+     */
+
+    /**
+     * @memberof Track
+     * @member {string} language
+     *         The two letter language code for this track. Cannot be changed after
+     *         creation.
+     * @instance
+     *
+     * @readonly
+     */
+
+    for (const key in trackProps) {
+      Object.defineProperty(this, key, {
+        get() {
+          return trackProps[key];
+        },
+        set() {}
+      });
+    }
+
+    /**
+     * @memberof Track
+     * @member {string} label
+     *         The label of this track. Cannot be changed after creation.
+     * @instance
+     *
+     * @fires Track#labelchange
+     */
+    Object.defineProperty(this, 'label', {
+      get() {
+        return label;
+      },
+      set(newLabel) {
+        if (newLabel !== label) {
+          label = newLabel;
+
+          /**
+           * An event that fires when label changes on this track.
+           *
+           * > Note: This is not part of the spec!
+           *
+           * @event Track#labelchange
+           * @type {Event}
+           */
+          this.trigger('labelchange');
+        }
+      }
+    });
+  }
+}
+
+/**
+ * @file url.js
+ * @module url
+ */
+
+/**
+ * @typedef {Object} url:URLObject
+ *
+ * @property {string} protocol
+ *           The protocol of the url that was parsed.
+ *
+ * @property {string} hostname
+ *           The hostname of the url that was parsed.
+ *
+ * @property {string} port
+ *           The port of the url that was parsed.
+ *
+ * @property {string} pathname
+ *           The pathname of the url that was parsed.
+ *
+ * @property {string} search
+ *           The search query of the url that was parsed.
+ *
+ * @property {string} hash
+ *           The hash of the url that was parsed.
+ *
+ * @property {string} host
+ *           The host of the url that was parsed.
+ */
+
+/**
+ * Resolve and parse the elements of a URL.
+ *
+ * @function
+ * @param    {String} url
+ *           The url to parse
+ *
+ * @return   {url:URLObject}
+ *           An object of url details
+ */
+const parseUrl = function (url) {
+  // This entire method can be replace with URL once we are able to drop IE11
+
+  const props = ['protocol', 'hostname', 'port', 'pathname', 'search', 'hash', 'host'];
+
+  // add the url to an anchor and let the browser parse the URL
+  const a = document__default["default"].createElement('a');
+  a.href = url;
+
+  // Copy the specific URL properties to a new object
+  // This is also needed for IE because the anchor loses its
+  // properties when it's removed from the dom
+  const details = {};
+  for (let i = 0; i < props.length; i++) {
+    details[props[i]] = a[props[i]];
+  }
+
+  // IE adds the port to the host property unlike everyone else. If
+  // a port identifier is added for standard ports, strip it.
+  if (details.protocol === 'http:') {
+    details.host = details.host.replace(/:80$/, '');
+  }
+  if (details.protocol === 'https:') {
+    details.host = details.host.replace(/:443$/, '');
+  }
+  if (!details.protocol) {
+    details.protocol = window__default["default"].location.protocol;
+  }
+
+  /* istanbul ignore if */
+  if (!details.host) {
+    details.host = window__default["default"].location.host;
+  }
+  return details;
+};
+
+/**
+ * Get absolute version of relative URL.
+ *
+ * @function
+ * @param    {string} url
+ *           URL to make absolute
+ *
+ * @return   {string}
+ *           Absolute URL
+ *
+ * @see      http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
+ */
+const getAbsoluteURL = function (url) {
+  // Check if absolute URL
+  if (!url.match(/^https?:\/\//)) {
+    // Add the url to an anchor and let the browser parse it to convert to an absolute url
+    const a = document__default["default"].createElement('a');
+    a.href = url;
+    url = a.href;
+  }
+  return url;
+};
+
+/**
+ * Returns the extension of the passed file name. It will return an empty string
+ * if passed an invalid path.
+ *
+ * @function
+ * @param    {string} path
+ *           The fileName path like '/path/to/file.mp4'
+ *
+ * @return  {string}
+ *           The extension in lower case or an empty string if no
+ *           extension could be found.
+ */
+const getFileExtension = function (path) {
+  if (typeof path === 'string') {
+    const splitPathRe = /^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/;
+    const pathParts = splitPathRe.exec(path);
+    if (pathParts) {
+      return pathParts.pop().toLowerCase();
+    }
+  }
+  return '';
+};
+
+/**
+ * Returns whether the url passed is a cross domain request or not.
+ *
+ * @function
+ * @param    {string} url
+ *           The url to check.
+ *
+ * @param    {Object} [winLoc]
+ *           the domain to check the url against, defaults to window.location
+ *
+ * @param    {string} [winLoc.protocol]
+ *           The window location protocol defaults to window.location.protocol
+ *
+ * @param    {string} [winLoc.host]
+ *           The window location host defaults to window.location.host
+ *
+ * @return   {boolean}
+ *           Whether it is a cross domain request or not.
+ */
+const isCrossOrigin = function (url, winLoc = window__default["default"].location) {
+  const urlInfo = parseUrl(url);
+
+  // IE8 protocol relative urls will return ':' for protocol
+  const srcProtocol = urlInfo.protocol === ':' ? winLoc.protocol : urlInfo.protocol;
+
+  // Check if url is for another domain/origin
+  // IE8 doesn't know location.origin, so we won't rely on it here
+  const crossOrigin = srcProtocol + urlInfo.host !== winLoc.protocol + winLoc.host;
+  return crossOrigin;
+};
+
+var Url = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  parseUrl: parseUrl,
+  getAbsoluteURL: getAbsoluteURL,
+  getFileExtension: getFileExtension,
+  isCrossOrigin: isCrossOrigin
+});
+
+/**
+ * @file text-track.js
+ */
+
+/**
+ * Takes a webvtt file contents and parses it into cues
+ *
+ * @param {string} srcContent
+ *        webVTT file contents
+ *
+ * @param {TextTrack} track
+ *        TextTrack to add cues to. Cues come from the srcContent.
+ *
+ * @private
+ */
+const parseCues = function (srcContent, track) {
+  const parser = new window__default["default"].WebVTT.Parser(window__default["default"], window__default["default"].vttjs, window__default["default"].WebVTT.StringDecoder());
+  const errors = [];
+  parser.oncue = function (cue) {
+    track.addCue(cue);
+  };
+  parser.onparsingerror = function (error) {
+    errors.push(error);
+  };
+  parser.onflush = function () {
+    track.trigger({
+      type: 'loadeddata',
+      target: track
+    });
+  };
+  parser.parse(srcContent);
+  if (errors.length > 0) {
+    if (window__default["default"].console && window__default["default"].console.groupCollapsed) {
+      window__default["default"].console.groupCollapsed(`Text Track parsing errors for ${track.src}`);
+    }
+    errors.forEach(error => log$1.error(error));
+    if (window__default["default"].console && window__default["default"].console.groupEnd) {
+      window__default["default"].console.groupEnd();
+    }
+  }
+  parser.flush();
+};
+
+/**
+ * Load a `TextTrack` from a specified url.
+ *
+ * @param {string} src
+ *        Url to load track from.
+ *
+ * @param {TextTrack} track
+ *        Track to add cues to. Comes from the content at the end of `url`.
+ *
+ * @private
+ */
+const loadTrack = function (src, track) {
+  const opts = {
+    uri: src
+  };
+  const crossOrigin = isCrossOrigin(src);
+  if (crossOrigin) {
+    opts.cors = crossOrigin;
+  }
+  const withCredentials = track.tech_.crossOrigin() === 'use-credentials';
+  if (withCredentials) {
+    opts.withCredentials = withCredentials;
+  }
+  XHR__default["default"](opts, bind_(this, function (err, response, responseBody) {
+    if (err) {
+      return log$1.error(err, response);
+    }
+    track.loaded_ = true;
+
+    // Make sure that vttjs has loaded, otherwise, wait till it finished loading
+    // NOTE: this is only used for the alt/video.novtt.js build
+    if (typeof window__default["default"].WebVTT !== 'function') {
+      if (track.tech_) {
+        // to prevent use before define eslint error, we define loadHandler
+        // as a let here
+        track.tech_.any(['vttjsloaded', 'vttjserror'], event => {
+          if (event.type === 'vttjserror') {
+            log$1.error(`vttjs failed to load, stopping trying to process ${track.src}`);
+            return;
+          }
+          return parseCues(responseBody, track);
+        });
+      }
+    } else {
+      parseCues(responseBody, track);
+    }
+  }));
+};
+
+/**
+ * A representation of a single `TextTrack`.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrack}
+ * @extends Track
+ */
+class TextTrack extends Track {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {Object} options={}
+   *        Object of option names and values
+   *
+   * @param { import('../tech/tech').default } options.tech
+   *        A reference to the tech that owns this TextTrack.
+   *
+   * @param {TextTrack~Kind} [options.kind='subtitles']
+   *        A valid text track kind.
+   *
+   * @param {TextTrack~Mode} [options.mode='disabled']
+   *        A valid text track mode.
+   *
+   * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+   *        A unique id for this TextTrack.
+   *
+   * @param {string} [options.label='']
+   *        The menu label for this track.
+   *
+   * @param {string} [options.language='']
+   *        A valid two character language code.
+   *
+   * @param {string} [options.srclang='']
+   *        A valid two character language code. An alternative, but deprioritized
+   *        version of `options.language`
+   *
+   * @param {string} [options.src]
+   *        A url to TextTrack cues.
+   *
+   * @param {boolean} [options.default]
+   *        If this track should default to on or off.
+   */
+  constructor(options = {}) {
+    if (!options.tech) {
+      throw new Error('A tech was not provided.');
+    }
+    const settings = merge$1(options, {
+      kind: TextTrackKind[options.kind] || 'subtitles',
+      language: options.language || options.srclang || ''
+    });
+    let mode = TextTrackMode[settings.mode] || 'disabled';
+    const default_ = settings.default;
+    if (settings.kind === 'metadata' || settings.kind === 'chapters') {
+      mode = 'hidden';
+    }
+    super(settings);
+    this.tech_ = settings.tech;
+    this.cues_ = [];
+    this.activeCues_ = [];
+    this.preload_ = this.tech_.preloadTextTracks !== false;
+    const cues = new TextTrackCueList(this.cues_);
+    const activeCues = new TextTrackCueList(this.activeCues_);
+    let changed = false;
+    this.timeupdateHandler = bind_(this, function (event = {}) {
+      if (this.tech_.isDisposed()) {
+        return;
+      }
+      if (!this.tech_.isReady_) {
+        if (event.type !== 'timeupdate') {
+          this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+        }
+        return;
+      }
+
+      // Accessing this.activeCues for the side-effects of updating itself
+      // due to its nature as a getter function. Do not remove or cues will
+      // stop updating!
+      // Use the setter to prevent deletion from uglify (pure_getters rule)
+      this.activeCues = this.activeCues;
+      if (changed) {
+        this.trigger('cuechange');
+        changed = false;
+      }
+      if (event.type !== 'timeupdate') {
+        this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+      }
+    });
+    const disposeHandler = () => {
+      this.stopTracking();
+    };
+    this.tech_.one('dispose', disposeHandler);
+    if (mode !== 'disabled') {
+      this.startTracking();
+    }
+    Object.defineProperties(this, {
+      /**
+       * @memberof TextTrack
+       * @member {boolean} default
+       *         If this track was set to be on or off by default. Cannot be changed after
+       *         creation.
+       * @instance
+       *
+       * @readonly
+       */
+      default: {
+        get() {
+          return default_;
+        },
+        set() {}
+      },
+      /**
+       * @memberof TextTrack
+       * @member {string} mode
+       *         Set the mode of this TextTrack to a valid {@link TextTrack~Mode}. Will
+       *         not be set if setting to an invalid mode.
+       * @instance
+       *
+       * @fires TextTrack#modechange
+       */
+      mode: {
+        get() {
+          return mode;
+        },
+        set(newMode) {
+          if (!TextTrackMode[newMode]) {
+            return;
+          }
+          if (mode === newMode) {
+            return;
+          }
+          mode = newMode;
+          if (!this.preload_ && mode !== 'disabled' && this.cues.length === 0) {
+            // On-demand load.
+            loadTrack(this.src, this);
+          }
+          this.stopTracking();
+          if (mode !== 'disabled') {
+            this.startTracking();
+          }
+          /**
+           * An event that fires when mode changes on this track. This allows
+           * the TextTrackList that holds this track to act accordingly.
+           *
+           * > Note: This is not part of the spec!
+           *
+           * @event TextTrack#modechange
+           * @type {Event}
+           */
+          this.trigger('modechange');
+        }
+      },
+      /**
+       * @memberof TextTrack
+       * @member {TextTrackCueList} cues
+       *         The text track cue list for this TextTrack.
+       * @instance
+       */
+      cues: {
+        get() {
+          if (!this.loaded_) {
+            return null;
+          }
+          return cues;
+        },
+        set() {}
+      },
+      /**
+       * @memberof TextTrack
+       * @member {TextTrackCueList} activeCues
+       *         The list text track cues that are currently active for this TextTrack.
+       * @instance
+       */
+      activeCues: {
+        get() {
+          if (!this.loaded_) {
+            return null;
+          }
+
+          // nothing to do
+          if (this.cues.length === 0) {
+            return activeCues;
+          }
+          const ct = this.tech_.currentTime();
+          const active = [];
+          for (let i = 0, l = this.cues.length; i < l; i++) {
+            const cue = this.cues[i];
+            if (cue.startTime <= ct && cue.endTime >= ct) {
+              active.push(cue);
+            }
+          }
+          changed = false;
+          if (active.length !== this.activeCues_.length) {
+            changed = true;
+          } else {
+            for (let i = 0; i < active.length; i++) {
+              if (this.activeCues_.indexOf(active[i]) === -1) {
+                changed = true;
+              }
+            }
+          }
+          this.activeCues_ = active;
+          activeCues.setCues_(this.activeCues_);
+          return activeCues;
+        },
+        // /!\ Keep this setter empty (see the timeupdate handler above)
+        set() {}
+      }
+    });
+    if (settings.src) {
+      this.src = settings.src;
+      if (!this.preload_) {
+        // Tracks will load on-demand.
+        // Act like we're loaded for other purposes.
+        this.loaded_ = true;
+      }
+      if (this.preload_ || settings.kind !== 'subtitles' && settings.kind !== 'captions') {
+        loadTrack(this.src, this);
+      }
+    } else {
+      this.loaded_ = true;
+    }
+  }
+  startTracking() {
+    // More precise cues based on requestVideoFrameCallback with a requestAnimationFram fallback
+    this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+    // Also listen to timeupdate in case rVFC/rAF stops (window in background, audio in video el)
+    this.tech_.on('timeupdate', this.timeupdateHandler);
+  }
+  stopTracking() {
+    if (this.rvf_) {
+      this.tech_.cancelVideoFrameCallback(this.rvf_);
+      this.rvf_ = undefined;
+    }
+    this.tech_.off('timeupdate', this.timeupdateHandler);
+  }
+
+  /**
+   * Add a cue to the internal list of cues.
+   *
+   * @param {TextTrack~Cue} cue
+   *        The cue to add to our internal list
+   */
+  addCue(originalCue) {
+    let cue = originalCue;
+
+    // Testing if the cue is a VTTCue in a way that survives minification
+    if (!('getCueAsHTML' in cue)) {
+      cue = new window__default["default"].vttjs.VTTCue(originalCue.startTime, originalCue.endTime, originalCue.text);
+      for (const prop in originalCue) {
+        if (!(prop in cue)) {
+          cue[prop] = originalCue[prop];
+        }
+      }
+
+      // make sure that `id` is copied over
+      cue.id = originalCue.id;
+      cue.originalCue_ = originalCue;
+    }
+    const tracks = this.tech_.textTracks();
+    for (let i = 0; i < tracks.length; i++) {
+      if (tracks[i] !== this) {
+        tracks[i].removeCue(cue);
+      }
+    }
+    this.cues_.push(cue);
+    this.cues.setCues_(this.cues_);
+  }
+
+  /**
+   * Remove a cue from our internal list
+   *
+   * @param {TextTrack~Cue} removeCue
+   *        The cue to remove from our internal list
+   */
+  removeCue(removeCue) {
+    let i = this.cues_.length;
+    while (i--) {
+      const cue = this.cues_[i];
+      if (cue === removeCue || cue.originalCue_ && cue.originalCue_ === removeCue) {
+        this.cues_.splice(i, 1);
+        this.cues.setCues_(this.cues_);
+        break;
+      }
+    }
+  }
+}
+
+/**
+ * cuechange - One or more cues in the track have become active or stopped being active.
+ * @protected
+ */
+TextTrack.prototype.allowedEvents_ = {
+  cuechange: 'cuechange'
+};
+
+/**
+ * A representation of a single `AudioTrack`. If it is part of an {@link AudioTrackList}
+ * only one `AudioTrack` in the list will be enabled at a time.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotrack}
+ * @extends Track
+ */
+class AudioTrack extends Track {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {Object} [options={}]
+   *        Object of option names and values
+   *
+   * @param {AudioTrack~Kind} [options.kind='']
+   *        A valid audio track kind
+   *
+   * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+   *        A unique id for this AudioTrack.
+   *
+   * @param {string} [options.label='']
+   *        The menu label for this track.
+   *
+   * @param {string} [options.language='']
+   *        A valid two character language code.
+   *
+   * @param {boolean} [options.enabled]
+   *        If this track is the one that is currently playing. If this track is part of
+   *        an {@link AudioTrackList}, only one {@link AudioTrack} will be enabled.
+   */
+  constructor(options = {}) {
+    const settings = merge$1(options, {
+      kind: AudioTrackKind[options.kind] || ''
+    });
+    super(settings);
+    let enabled = false;
+
+    /**
+     * @memberof AudioTrack
+     * @member {boolean} enabled
+     *         If this `AudioTrack` is enabled or not. When setting this will
+     *         fire {@link AudioTrack#enabledchange} if the state of enabled is changed.
+     * @instance
+     *
+     * @fires VideoTrack#selectedchange
+     */
+    Object.defineProperty(this, 'enabled', {
+      get() {
+        return enabled;
+      },
+      set(newEnabled) {
+        // an invalid or unchanged value
+        if (typeof newEnabled !== 'boolean' || newEnabled === enabled) {
+          return;
+        }
+        enabled = newEnabled;
+
+        /**
+         * An event that fires when enabled changes on this track. This allows
+         * the AudioTrackList that holds this track to act accordingly.
+         *
+         * > Note: This is not part of the spec! Native tracks will do
+         *         this internally without an event.
+         *
+         * @event AudioTrack#enabledchange
+         * @type {Event}
+         */
+        this.trigger('enabledchange');
+      }
+    });
+
+    // if the user sets this track to selected then
+    // set selected to that true value otherwise
+    // we keep it false
+    if (settings.enabled) {
+      this.enabled = settings.enabled;
+    }
+    this.loaded_ = true;
+  }
+}
+
+/**
+ * A representation of a single `VideoTrack`.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotrack}
+ * @extends Track
+ */
+class VideoTrack extends Track {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {Object} [options={}]
+   *        Object of option names and values
+   *
+   * @param {string} [options.kind='']
+   *        A valid {@link VideoTrack~Kind}
+   *
+   * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+   *        A unique id for this AudioTrack.
+   *
+   * @param {string} [options.label='']
+   *        The menu label for this track.
+   *
+   * @param {string} [options.language='']
+   *        A valid two character language code.
+   *
+   * @param {boolean} [options.selected]
+   *        If this track is the one that is currently playing.
+   */
+  constructor(options = {}) {
+    const settings = merge$1(options, {
+      kind: VideoTrackKind[options.kind] || ''
+    });
+    super(settings);
+    let selected = false;
+
+    /**
+     * @memberof VideoTrack
+     * @member {boolean} selected
+     *         If this `VideoTrack` is selected or not. When setting this will
+     *         fire {@link VideoTrack#selectedchange} if the state of selected changed.
+     * @instance
+     *
+     * @fires VideoTrack#selectedchange
+     */
+    Object.defineProperty(this, 'selected', {
+      get() {
+        return selected;
+      },
+      set(newSelected) {
+        // an invalid or unchanged value
+        if (typeof newSelected !== 'boolean' || newSelected === selected) {
+          return;
+        }
+        selected = newSelected;
+
+        /**
+         * An event that fires when selected changes on this track. This allows
+         * the VideoTrackList that holds this track to act accordingly.
+         *
+         * > Note: This is not part of the spec! Native tracks will do
+         *         this internally without an event.
+         *
+         * @event VideoTrack#selectedchange
+         * @type {Event}
+         */
+        this.trigger('selectedchange');
+      }
+    });
+
+    // if the user sets this track to selected then
+    // set selected to that true value otherwise
+    // we keep it false
+    if (settings.selected) {
+      this.selected = settings.selected;
+    }
+  }
+}
+
+/**
+ * @file html-track-element.js
+ */
+
+/**
+ * A single track represented in the DOM.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#htmltrackelement}
+ * @extends EventTarget
+ */
+class HTMLTrackElement extends EventTarget$2 {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {Object} options={}
+   *        Object of option names and values
+   *
+   * @param { import('../tech/tech').default } options.tech
+   *        A reference to the tech that owns this HTMLTrackElement.
+   *
+   * @param {TextTrack~Kind} [options.kind='subtitles']
+   *        A valid text track kind.
+   *
+   * @param {TextTrack~Mode} [options.mode='disabled']
+   *        A valid text track mode.
+   *
+   * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+   *        A unique id for this TextTrack.
+   *
+   * @param {string} [options.label='']
+   *        The menu label for this track.
+   *
+   * @param {string} [options.language='']
+   *        A valid two character language code.
+   *
+   * @param {string} [options.srclang='']
+   *        A valid two character language code. An alternative, but deprioritized
+   *        version of `options.language`
+   *
+   * @param {string} [options.src]
+   *        A url to TextTrack cues.
+   *
+   * @param {boolean} [options.default]
+   *        If this track should default to on or off.
+   */
+  constructor(options = {}) {
+    super();
+    let readyState;
+    const track = new TextTrack(options);
+    this.kind = track.kind;
+    this.src = track.src;
+    this.srclang = track.language;
+    this.label = track.label;
+    this.default = track.default;
+    Object.defineProperties(this, {
+      /**
+       * @memberof HTMLTrackElement
+       * @member {HTMLTrackElement~ReadyState} readyState
+       *         The current ready state of the track element.
+       * @instance
+       */
+      readyState: {
+        get() {
+          return readyState;
+        }
+      },
+      /**
+       * @memberof HTMLTrackElement
+       * @member {TextTrack} track
+       *         The underlying TextTrack object.
+       * @instance
+       *
+       */
+      track: {
+        get() {
+          return track;
+        }
+      }
+    });
+    readyState = HTMLTrackElement.NONE;
+
+    /**
+     * @listens TextTrack#loadeddata
+     * @fires HTMLTrackElement#load
+     */
+    track.addEventListener('loadeddata', () => {
+      readyState = HTMLTrackElement.LOADED;
+      this.trigger({
+        type: 'load',
+        target: this
+      });
+    });
+  }
+}
+
+/**
+ * @protected
+ */
+HTMLTrackElement.prototype.allowedEvents_ = {
+  load: 'load'
+};
+
+/**
+ * The text track not loaded state.
+ *
+ * @type {number}
+ * @static
+ */
+HTMLTrackElement.NONE = 0;
+
+/**
+ * The text track loading state.
+ *
+ * @type {number}
+ * @static
+ */
+HTMLTrackElement.LOADING = 1;
+
+/**
+ * The text track loaded state.
+ *
+ * @type {number}
+ * @static
+ */
+HTMLTrackElement.LOADED = 2;
+
+/**
+ * The text track failed to load state.
+ *
+ * @type {number}
+ * @static
+ */
+HTMLTrackElement.ERROR = 3;
+
+/*
+ * This file contains all track properties that are used in
+ * player.js, tech.js, html5.js and possibly other techs in the future.
+ */
+
+const NORMAL = {
+  audio: {
+    ListClass: AudioTrackList,
+    TrackClass: AudioTrack,
+    capitalName: 'Audio'
+  },
+  video: {
+    ListClass: VideoTrackList,
+    TrackClass: VideoTrack,
+    capitalName: 'Video'
+  },
+  text: {
+    ListClass: TextTrackList,
+    TrackClass: TextTrack,
+    capitalName: 'Text'
+  }
+};
+Object.keys(NORMAL).forEach(function (type) {
+  NORMAL[type].getterName = `${type}Tracks`;
+  NORMAL[type].privateName = `${type}Tracks_`;
+});
+const REMOTE = {
+  remoteText: {
+    ListClass: TextTrackList,
+    TrackClass: TextTrack,
+    capitalName: 'RemoteText',
+    getterName: 'remoteTextTracks',
+    privateName: 'remoteTextTracks_'
+  },
+  remoteTextEl: {
+    ListClass: HtmlTrackElementList,
+    TrackClass: HTMLTrackElement,
+    capitalName: 'RemoteTextTrackEls',
+    getterName: 'remoteTextTrackEls',
+    privateName: 'remoteTextTrackEls_'
+  }
+};
+const ALL = Object.assign({}, NORMAL, REMOTE);
+REMOTE.names = Object.keys(REMOTE);
+NORMAL.names = Object.keys(NORMAL);
+ALL.names = [].concat(REMOTE.names).concat(NORMAL.names);
+
+/**
+ * @file tech.js
+ */
+
+/**
+ * An Object containing a structure like: `{src: 'url', type: 'mimetype'}` or string
+ * that just contains the src url alone.
+ * * `var SourceObject = {src: 'http://ex.com/video.mp4', type: 'video/mp4'};`
+   * `var SourceString = 'http://example.com/some-video.mp4';`
+ *
+ * @typedef {Object|string} SourceObject
+ *
+ * @property {string} src
+ *           The url to the source
+ *
+ * @property {string} type
+ *           The mime type of the source
+ */
+
+/**
+ * A function used by {@link Tech} to create a new {@link TextTrack}.
+ *
+ * @private
+ *
+ * @param {Tech} self
+ *        An instance of the Tech class.
+ *
+ * @param {string} kind
+ *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+ *
+ * @param {string} [label]
+ *        Label to identify the text track
+ *
+ * @param {string} [language]
+ *        Two letter language abbreviation
+ *
+ * @param {Object} [options={}]
+ *        An object with additional text track options
+ *
+ * @return {TextTrack}
+ *          The text track that was created.
+ */
+function createTrackHelper(self, kind, label, language, options = {}) {
+  const tracks = self.textTracks();
+  options.kind = kind;
+  if (label) {
+    options.label = label;
+  }
+  if (language) {
+    options.language = language;
+  }
+  options.tech = self;
+  const track = new ALL.text.TrackClass(options);
+  tracks.addTrack(track);
+  return track;
+}
+
+/**
+ * This is the base class for media playback technology controllers, such as
+ * {@link HTML5}
+ *
+ * @extends Component
+ */
+class Tech extends Component$1 {
+  /**
+  * Create an instance of this Tech.
+  *
+  * @param {Object} [options]
+  *        The key/value store of player options.
+  *
+  * @param {Function} [ready]
+  *        Callback function to call when the `HTML5` Tech is ready.
+  */
+  constructor(options = {}, ready = function () {}) {
+    // we don't want the tech to report user activity automatically.
+    // This is done manually in addControlsListeners
+    options.reportTouchActivity = false;
+    super(null, options, ready);
+    this.onDurationChange_ = e => this.onDurationChange(e);
+    this.trackProgress_ = e => this.trackProgress(e);
+    this.trackCurrentTime_ = e => this.trackCurrentTime(e);
+    this.stopTrackingCurrentTime_ = e => this.stopTrackingCurrentTime(e);
+    this.disposeSourceHandler_ = e => this.disposeSourceHandler(e);
+    this.queuedHanders_ = new Set();
+
+    // keep track of whether the current source has played at all to
+    // implement a very limited played()
+    this.hasStarted_ = false;
+    this.on('playing', function () {
+      this.hasStarted_ = true;
+    });
+    this.on('loadstart', function () {
+      this.hasStarted_ = false;
+    });
+    ALL.names.forEach(name => {
+      const props = ALL[name];
+      if (options && options[props.getterName]) {
+        this[props.privateName] = options[props.getterName];
+      }
+    });
+
+    // Manually track progress in cases where the browser/tech doesn't report it.
+    if (!this.featuresProgressEvents) {
+      this.manualProgressOn();
+    }
+
+    // Manually track timeupdates in cases where the browser/tech doesn't report it.
+    if (!this.featuresTimeupdateEvents) {
+      this.manualTimeUpdatesOn();
+    }
+    ['Text', 'Audio', 'Video'].forEach(track => {
+      if (options[`native${track}Tracks`] === false) {
+        this[`featuresNative${track}Tracks`] = false;
+      }
+    });
+    if (options.nativeCaptions === false || options.nativeTextTracks === false) {
+      this.featuresNativeTextTracks = false;
+    } else if (options.nativeCaptions === true || options.nativeTextTracks === true) {
+      this.featuresNativeTextTracks = true;
+    }
+    if (!this.featuresNativeTextTracks) {
+      this.emulateTextTracks();
+    }
+    this.preloadTextTracks = options.preloadTextTracks !== false;
+    this.autoRemoteTextTracks_ = new ALL.text.ListClass();
+    this.initTrackListeners();
+
+    // Turn on component tap events only if not using native controls
+    if (!options.nativeControlsForTouch) {
+      this.emitTapEvents();
+    }
+    if (this.constructor) {
+      this.name_ = this.constructor.name || 'Unknown Tech';
+    }
+  }
+
+  /**
+   * A special function to trigger source set in a way that will allow player
+   * to re-trigger if the player or tech are not ready yet.
+   *
+   * @fires Tech#sourceset
+   * @param {string} src The source string at the time of the source changing.
+   */
+  triggerSourceset(src) {
+    if (!this.isReady_) {
+      // on initial ready we have to trigger source set
+      // 1ms after ready so that player can watch for it.
+      this.one('ready', () => this.setTimeout(() => this.triggerSourceset(src), 1));
+    }
+
+    /**
+     * Fired when the source is set on the tech causing the media element
+     * to reload.
+     *
+     * @see {@link Player#event:sourceset}
+     * @event Tech#sourceset
+     * @type {Event}
+     */
+    this.trigger({
+      src,
+      type: 'sourceset'
+    });
+  }
+
+  /* Fallbacks for unsupported event types
+  ================================================================================ */
+
+  /**
+   * Polyfill the `progress` event for browsers that don't support it natively.
+   *
+   * @see {@link Tech#trackProgress}
+   */
+  manualProgressOn() {
+    this.on('durationchange', this.onDurationChange_);
+    this.manualProgress = true;
+
+    // Trigger progress watching when a source begins loading
+    this.one('ready', this.trackProgress_);
+  }
+
+  /**
+   * Turn off the polyfill for `progress` events that was created in
+   * {@link Tech#manualProgressOn}
+   */
+  manualProgressOff() {
+    this.manualProgress = false;
+    this.stopTrackingProgress();
+    this.off('durationchange', this.onDurationChange_);
+  }
+
+  /**
+   * This is used to trigger a `progress` event when the buffered percent changes. It
+   * sets an interval function that will be called every 500 milliseconds to check if the
+   * buffer end percent has changed.
+   *
+   * > This function is called by {@link Tech#manualProgressOn}
+   *
+   * @param {Event} event
+   *        The `ready` event that caused this to run.
+   *
+   * @listens Tech#ready
+   * @fires Tech#progress
+   */
+  trackProgress(event) {
+    this.stopTrackingProgress();
+    this.progressInterval = this.setInterval(bind_(this, function () {
+      // Don't trigger unless buffered amount is greater than last time
+
+      const numBufferedPercent = this.bufferedPercent();
+      if (this.bufferedPercent_ !== numBufferedPercent) {
+        /**
+         * See {@link Player#progress}
+         *
+         * @event Tech#progress
+         * @type {Event}
+         */
+        this.trigger('progress');
+      }
+      this.bufferedPercent_ = numBufferedPercent;
+      if (numBufferedPercent === 1) {
+        this.stopTrackingProgress();
+      }
+    }), 500);
+  }
+
+  /**
+   * Update our internal duration on a `durationchange` event by calling
+   * {@link Tech#duration}.
+   *
+   * @param {Event} event
+   *        The `durationchange` event that caused this to run.
+   *
+   * @listens Tech#durationchange
+   */
+  onDurationChange(event) {
+    this.duration_ = this.duration();
+  }
+
+  /**
+   * Get and create a `TimeRange` object for buffering.
+   *
+   * @return { import('../utils/time').TimeRange }
+   *         The time range object that was created.
+   */
+  buffered() {
+    return createTimeRanges$1(0, 0);
+  }
+
+  /**
+   * Get the percentage of the current video that is currently buffered.
+   *
+   * @return {number}
+   *         A number from 0 to 1 that represents the decimal percentage of the
+   *         video that is buffered.
+   *
+   */
+  bufferedPercent() {
+    return bufferedPercent(this.buffered(), this.duration_);
+  }
+
+  /**
+   * Turn off the polyfill for `progress` events that was created in
+   * {@link Tech#manualProgressOn}
+   * Stop manually tracking progress events by clearing the interval that was set in
+   * {@link Tech#trackProgress}.
+   */
+  stopTrackingProgress() {
+    this.clearInterval(this.progressInterval);
+  }
+
+  /**
+   * Polyfill the `timeupdate` event for browsers that don't support it.
+   *
+   * @see {@link Tech#trackCurrentTime}
+   */
+  manualTimeUpdatesOn() {
+    this.manualTimeUpdates = true;
+    this.on('play', this.trackCurrentTime_);
+    this.on('pause', this.stopTrackingCurrentTime_);
+  }
+
+  /**
+   * Turn off the polyfill for `timeupdate` events that was created in
+   * {@link Tech#manualTimeUpdatesOn}
+   */
+  manualTimeUpdatesOff() {
+    this.manualTimeUpdates = false;
+    this.stopTrackingCurrentTime();
+    this.off('play', this.trackCurrentTime_);
+    this.off('pause', this.stopTrackingCurrentTime_);
+  }
+
+  /**
+   * Sets up an interval function to track current time and trigger `timeupdate` every
+   * 250 milliseconds.
+   *
+   * @listens Tech#play
+   * @triggers Tech#timeupdate
+   */
+  trackCurrentTime() {
+    if (this.currentTimeInterval) {
+      this.stopTrackingCurrentTime();
+    }
+    this.currentTimeInterval = this.setInterval(function () {
+      /**
+       * Triggered at an interval of 250ms to indicated that time is passing in the video.
+       *
+       * @event Tech#timeupdate
+       * @type {Event}
+       */
+      this.trigger({
+        type: 'timeupdate',
+        target: this,
+        manuallyTriggered: true
+      });
+
+      // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
+    }, 250);
+  }
+
+  /**
+   * Stop the interval function created in {@link Tech#trackCurrentTime} so that the
+   * `timeupdate` event is no longer triggered.
+   *
+   * @listens {Tech#pause}
+   */
+  stopTrackingCurrentTime() {
+    this.clearInterval(this.currentTimeInterval);
+
+    // #1002 - if the video ends right before the next timeupdate would happen,
+    // the progress bar won't make it all the way to the end
+    this.trigger({
+      type: 'timeupdate',
+      target: this,
+      manuallyTriggered: true
+    });
+  }
+
+  /**
+   * Turn off all event polyfills, clear the `Tech`s {@link AudioTrackList},
+   * {@link VideoTrackList}, and {@link TextTrackList}, and dispose of this Tech.
+   *
+   * @fires Component#dispose
+   */
+  dispose() {
+    // clear out all tracks because we can't reuse them between techs
+    this.clearTracks(NORMAL.names);
+
+    // Turn off any manual progress or timeupdate tracking
+    if (this.manualProgress) {
+      this.manualProgressOff();
+    }
+    if (this.manualTimeUpdates) {
+      this.manualTimeUpdatesOff();
+    }
+    super.dispose();
+  }
+
+  /**
+   * Clear out a single `TrackList` or an array of `TrackLists` given their names.
+   *
+   * > Note: Techs without source handlers should call this between sources for `video`
+   *         & `audio` tracks. You don't want to use them between tracks!
+   *
+   * @param {string[]|string} types
+   *        TrackList names to clear, valid names are `video`, `audio`, and
+   *        `text`.
+   */
+  clearTracks(types) {
+    types = [].concat(types);
+    // clear out all tracks because we can't reuse them between techs
+    types.forEach(type => {
+      const list = this[`${type}Tracks`]() || [];
+      let i = list.length;
+      while (i--) {
+        const track = list[i];
+        if (type === 'text') {
+          this.removeRemoteTextTrack(track);
+        }
+        list.removeTrack(track);
+      }
+    });
+  }
+
+  /**
+   * Remove any TextTracks added via addRemoteTextTrack that are
+   * flagged for automatic garbage collection
+   */
+  cleanupAutoTextTracks() {
+    const list = this.autoRemoteTextTracks_ || [];
+    let i = list.length;
+    while (i--) {
+      const track = list[i];
+      this.removeRemoteTextTrack(track);
+    }
+  }
+
+  /**
+   * Reset the tech, which will removes all sources and reset the internal readyState.
+   *
+   * @abstract
+   */
+  reset() {}
+
+  /**
+   * Get the value of `crossOrigin` from the tech.
+   *
+   * @abstract
+   *
+   * @see {Html5#crossOrigin}
+   */
+  crossOrigin() {}
+
+  /**
+   * Set the value of `crossOrigin` on the tech.
+   *
+   * @abstract
+   *
+   * @param {string} crossOrigin the crossOrigin value
+   * @see {Html5#setCrossOrigin}
+   */
+  setCrossOrigin() {}
+
+  /**
+   * Get or set an error on the Tech.
+   *
+   * @param {MediaError} [err]
+   *        Error to set on the Tech
+   *
+   * @return {MediaError|null}
+   *         The current error object on the tech, or null if there isn't one.
+   */
+  error(err) {
+    if (err !== undefined) {
+      this.error_ = new MediaError(err);
+      this.trigger('error');
+    }
+    return this.error_;
+  }
+
+  /**
+   * Returns the `TimeRange`s that have been played through for the current source.
+   *
+   * > NOTE: This implementation is incomplete. It does not track the played `TimeRange`.
+   *         It only checks whether the source has played at all or not.
+   *
+   * @return { import('../utils/time').TimeRange }
+   *         - A single time range if this video has played
+   *         - An empty set of ranges if not.
+   */
+  played() {
+    if (this.hasStarted_) {
+      return createTimeRanges$1(0, 0);
+    }
+    return createTimeRanges$1();
+  }
+
+  /**
+   * Start playback
+   *
+   * @abstract
+   *
+   * @see {Html5#play}
+   */
+  play() {}
+
+  /**
+   * Set whether we are scrubbing or not
+   *
+   * @abstract
+   * @param {boolean} _isScrubbing
+   *                  - true for we are currently scrubbing
+   *                  - false for we are no longer scrubbing
+   *
+   * @see {Html5#setScrubbing}
+   */
+  setScrubbing(_isScrubbing) {}
+
+  /**
+   * Get whether we are scrubbing or not
+   *
+   * @abstract
+   *
+   * @see {Html5#scrubbing}
+   */
+  scrubbing() {}
+
+  /**
+   * Causes a manual time update to occur if {@link Tech#manualTimeUpdatesOn} was
+   * previously called.
+   *
+   * @param {number} _seconds
+   *        Set the current time of the media to this.
+   * @fires Tech#timeupdate
+   */
+  setCurrentTime(_seconds) {
+    // improve the accuracy of manual timeupdates
+    if (this.manualTimeUpdates) {
+      /**
+       * A manual `timeupdate` event.
+       *
+       * @event Tech#timeupdate
+       * @type {Event}
+       */
+      this.trigger({
+        type: 'timeupdate',
+        target: this,
+        manuallyTriggered: true
+      });
+    }
+  }
+
+  /**
+   * Turn on listeners for {@link VideoTrackList}, {@link {AudioTrackList}, and
+   * {@link TextTrackList} events.
+   *
+   * This adds {@link EventTarget~EventListeners} for `addtrack`, and  `removetrack`.
+   *
+   * @fires Tech#audiotrackchange
+   * @fires Tech#videotrackchange
+   * @fires Tech#texttrackchange
+   */
+  initTrackListeners() {
+    /**
+      * Triggered when tracks are added or removed on the Tech {@link AudioTrackList}
+      *
+      * @event Tech#audiotrackchange
+      * @type {Event}
+      */
+
+    /**
+      * Triggered when tracks are added or removed on the Tech {@link VideoTrackList}
+      *
+      * @event Tech#videotrackchange
+      * @type {Event}
+      */
+
+    /**
+      * Triggered when tracks are added or removed on the Tech {@link TextTrackList}
+      *
+      * @event Tech#texttrackchange
+      * @type {Event}
+      */
+    NORMAL.names.forEach(name => {
+      const props = NORMAL[name];
+      const trackListChanges = () => {
+        this.trigger(`${name}trackchange`);
+      };
+      const tracks = this[props.getterName]();
+      tracks.addEventListener('removetrack', trackListChanges);
+      tracks.addEventListener('addtrack', trackListChanges);
+      this.on('dispose', () => {
+        tracks.removeEventListener('removetrack', trackListChanges);
+        tracks.removeEventListener('addtrack', trackListChanges);
+      });
+    });
+  }
+
+  /**
+   * Emulate TextTracks using vtt.js if necessary
+   *
+   * @fires Tech#vttjsloaded
+   * @fires Tech#vttjserror
+   */
+  addWebVttScript_() {
+    if (window__default["default"].WebVTT) {
+      return;
+    }
+
+    // Initially, Tech.el_ is a child of a dummy-div wait until the Component system
+    // signals that the Tech is ready at which point Tech.el_ is part of the DOM
+    // before inserting the WebVTT script
+    if (document__default["default"].body.contains(this.el())) {
+      // load via require if available and vtt.js script location was not passed in
+      // as an option. novtt builds will turn the above require call into an empty object
+      // which will cause this if check to always fail.
+      if (!this.options_['vtt.js'] && isPlain(vtt__default["default"]) && Object.keys(vtt__default["default"]).length > 0) {
+        this.trigger('vttjsloaded');
+        return;
+      }
+
+      // load vtt.js via the script location option or the cdn of no location was
+      // passed in
+      const script = document__default["default"].createElement('script');
+      script.src = this.options_['vtt.js'] || 'https://vjs.zencdn.net/vttjs/0.14.1/vtt.min.js';
+      script.onload = () => {
+        /**
+         * Fired when vtt.js is loaded.
+         *
+         * @event Tech#vttjsloaded
+         * @type {Event}
+         */
+        this.trigger('vttjsloaded');
+      };
+      script.onerror = () => {
+        /**
+         * Fired when vtt.js was not loaded due to an error
+         *
+         * @event Tech#vttjsloaded
+         * @type {Event}
+         */
+        this.trigger('vttjserror');
+      };
+      this.on('dispose', () => {
+        script.onload = null;
+        script.onerror = null;
+      });
+      // but have not loaded yet and we set it to true before the inject so that
+      // we don't overwrite the injected window.WebVTT if it loads right away
+      window__default["default"].WebVTT = true;
+      this.el().parentNode.appendChild(script);
+    } else {
+      this.ready(this.addWebVttScript_);
+    }
+  }
+
+  /**
+   * Emulate texttracks
+   *
+   */
+  emulateTextTracks() {
+    const tracks = this.textTracks();
+    const remoteTracks = this.remoteTextTracks();
+    const handleAddTrack = e => tracks.addTrack(e.track);
+    const handleRemoveTrack = e => tracks.removeTrack(e.track);
+    remoteTracks.on('addtrack', handleAddTrack);
+    remoteTracks.on('removetrack', handleRemoveTrack);
+    this.addWebVttScript_();
+    const updateDisplay = () => this.trigger('texttrackchange');
+    const textTracksChanges = () => {
+      updateDisplay();
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        track.removeEventListener('cuechange', updateDisplay);
+        if (track.mode === 'showing') {
+          track.addEventListener('cuechange', updateDisplay);
+        }
+      }
+    };
+    textTracksChanges();
+    tracks.addEventListener('change', textTracksChanges);
+    tracks.addEventListener('addtrack', textTracksChanges);
+    tracks.addEventListener('removetrack', textTracksChanges);
+    this.on('dispose', function () {
+      remoteTracks.off('addtrack', handleAddTrack);
+      remoteTracks.off('removetrack', handleRemoveTrack);
+      tracks.removeEventListener('change', textTracksChanges);
+      tracks.removeEventListener('addtrack', textTracksChanges);
+      tracks.removeEventListener('removetrack', textTracksChanges);
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        track.removeEventListener('cuechange', updateDisplay);
+      }
+    });
+  }
+
+  /**
+   * Create and returns a remote {@link TextTrack} object.
+   *
+   * @param {string} kind
+   *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+   *
+   * @param {string} [label]
+   *        Label to identify the text track
+   *
+   * @param {string} [language]
+   *        Two letter language abbreviation
+   *
+   * @return {TextTrack}
+   *         The TextTrack that gets created.
+   */
+  addTextTrack(kind, label, language) {
+    if (!kind) {
+      throw new Error('TextTrack kind is required but was not provided');
+    }
+    return createTrackHelper(this, kind, label, language);
+  }
+
+  /**
+   * Create an emulated TextTrack for use by addRemoteTextTrack
+   *
+   * This is intended to be overridden by classes that inherit from
+   * Tech in order to create native or custom TextTracks.
+   *
+   * @param {Object} options
+   *        The object should contain the options to initialize the TextTrack with.
+   *
+   * @param {string} [options.kind]
+   *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+   *
+   * @param {string} [options.label].
+   *        Label to identify the text track
+   *
+   * @param {string} [options.language]
+   *        Two letter language abbreviation.
+   *
+   * @return {HTMLTrackElement}
+   *         The track element that gets created.
+   */
+  createRemoteTextTrack(options) {
+    const track = merge$1(options, {
+      tech: this
+    });
+    return new REMOTE.remoteTextEl.TrackClass(track);
+  }
+
+  /**
+   * Creates a remote text track object and returns an html track element.
+   *
+   * > Note: This can be an emulated {@link HTMLTrackElement} or a native one.
+   *
+   * @param {Object} options
+   *        See {@link Tech#createRemoteTextTrack} for more detailed properties.
+   *
+   * @param {boolean} [manualCleanup=false]
+   *        - When false: the TextTrack will be automatically removed from the video
+   *          element whenever the source changes
+   *        - When True: The TextTrack will have to be cleaned up manually
+   *
+   * @return {HTMLTrackElement}
+   *         An Html Track Element.
+   *
+   */
+  addRemoteTextTrack(options = {}, manualCleanup) {
+    const htmlTrackElement = this.createRemoteTextTrack(options);
+    if (typeof manualCleanup !== 'boolean') {
+      manualCleanup = false;
+    }
+
+    // store HTMLTrackElement and TextTrack to remote list
+    this.remoteTextTrackEls().addTrackElement_(htmlTrackElement);
+    this.remoteTextTracks().addTrack(htmlTrackElement.track);
+    if (manualCleanup === false) {
+      // create the TextTrackList if it doesn't exist
+      this.ready(() => this.autoRemoteTextTracks_.addTrack(htmlTrackElement.track));
+    }
+    return htmlTrackElement;
+  }
+
+  /**
+   * Remove a remote text track from the remote `TextTrackList`.
+   *
+   * @param {TextTrack} track
+   *        `TextTrack` to remove from the `TextTrackList`
+   */
+  removeRemoteTextTrack(track) {
+    const trackElement = this.remoteTextTrackEls().getTrackElementByTrack_(track);
+
+    // remove HTMLTrackElement and TextTrack from remote list
+    this.remoteTextTrackEls().removeTrackElement_(trackElement);
+    this.remoteTextTracks().removeTrack(track);
+    this.autoRemoteTextTracks_.removeTrack(track);
+  }
+
+  /**
+   * Gets available media playback quality metrics as specified by the W3C's Media
+   * Playback Quality API.
+   *
+   * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+   *
+   * @return {Object}
+   *         An object with supported media playback quality metrics
+   *
+   * @abstract
+   */
+  getVideoPlaybackQuality() {
+    return {};
+  }
+
+  /**
+   * Attempt to create a floating video window always on top of other windows
+   * so that users may continue consuming media while they interact with other
+   * content sites, or applications on their device.
+   *
+   * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+   *
+   * @return {Promise|undefined}
+   *         A promise with a Picture-in-Picture window if the browser supports
+   *         Promises (or one was passed in as an option). It returns undefined
+   *         otherwise.
+   *
+   * @abstract
+   */
+  requestPictureInPicture() {
+    return Promise.reject();
+  }
+
+  /**
+   * A method to check for the value of the 'disablePictureInPicture' <video> property.
+   * Defaults to true, as it should be considered disabled if the tech does not support pip
+   *
+   * @abstract
+   */
+  disablePictureInPicture() {
+    return true;
+  }
+
+  /**
+   * A method to set or unset the 'disablePictureInPicture' <video> property.
+   *
+   * @abstract
+   */
+  setDisablePictureInPicture() {}
+
+  /**
+   * A fallback implementation of requestVideoFrameCallback using requestAnimationFrame
+   *
+   * @param {function} cb
+   * @return {number} request id
+   */
+  requestVideoFrameCallback(cb) {
+    const id = newGUID();
+    if (!this.isReady_ || this.paused()) {
+      this.queuedHanders_.add(id);
+      this.one('playing', () => {
+        if (this.queuedHanders_.has(id)) {
+          this.queuedHanders_.delete(id);
+          cb();
+        }
+      });
+    } else {
+      this.requestNamedAnimationFrame(id, cb);
+    }
+    return id;
+  }
+
+  /**
+   * A fallback implementation of cancelVideoFrameCallback
+   *
+   * @param {number} id id of callback to be cancelled
+   */
+  cancelVideoFrameCallback(id) {
+    if (this.queuedHanders_.has(id)) {
+      this.queuedHanders_.delete(id);
+    } else {
+      this.cancelNamedAnimationFrame(id);
+    }
+  }
+
+  /**
+   * A method to set a poster from a `Tech`.
+   *
+   * @abstract
+   */
+  setPoster() {}
+
+  /**
+   * A method to check for the presence of the 'playsinline' <video> attribute.
+   *
+   * @abstract
+   */
+  playsinline() {}
+
+  /**
+   * A method to set or unset the 'playsinline' <video> attribute.
+   *
+   * @abstract
+   */
+  setPlaysinline() {}
+
+  /**
+   * Attempt to force override of native audio tracks.
+   *
+   * @param {boolean} override - If set to true native audio will be overridden,
+   * otherwise native audio will potentially be used.
+   *
+   * @abstract
+   */
+  overrideNativeAudioTracks(override) {}
+
+  /**
+   * Attempt to force override of native video tracks.
+   *
+   * @param {boolean} override - If set to true native video will be overridden,
+   * otherwise native video will potentially be used.
+   *
+   * @abstract
+   */
+  overrideNativeVideoTracks(override) {}
+
+  /**
+   * Check if the tech can support the given mime-type.
+   *
+   * The base tech does not support any type, but source handlers might
+   * overwrite this.
+   *
+   * @param  {string} _type
+   *         The mimetype to check for support
+   *
+   * @return {string}
+   *         'probably', 'maybe', or empty string
+   *
+   * @see [Spec]{@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType}
+   *
+   * @abstract
+   */
+  canPlayType(_type) {
+    return '';
+  }
+
+  /**
+   * Check if the type is supported by this tech.
+   *
+   * The base tech does not support any type, but source handlers might
+   * overwrite this.
+   *
+   * @param {string} _type
+   *        The media type to check
+   * @return {string} Returns the native video element's response
+   */
+  static canPlayType(_type) {
+    return '';
+  }
+
+  /**
+   * Check if the tech can support the given source
+   *
+   * @param {Object} srcObj
+   *        The source object
+   * @param {Object} options
+   *        The options passed to the tech
+   * @return {string} 'probably', 'maybe', or '' (empty string)
+   */
+  static canPlaySource(srcObj, options) {
+    return Tech.canPlayType(srcObj.type);
+  }
+
+  /*
+   * Return whether the argument is a Tech or not.
+   * Can be passed either a Class like `Html5` or a instance like `player.tech_`
+   *
+   * @param {Object} component
+   *        The item to check
+   *
+   * @return {boolean}
+   *         Whether it is a tech or not
+   *         - True if it is a tech
+   *         - False if it is not
+   */
+  static isTech(component) {
+    return component.prototype instanceof Tech || component instanceof Tech || component === Tech;
+  }
+
+  /**
+   * Registers a `Tech` into a shared list for videojs.
+   *
+   * @param {string} name
+   *        Name of the `Tech` to register.
+   *
+   * @param {Object} tech
+   *        The `Tech` class to register.
+   */
+  static registerTech(name, tech) {
+    if (!Tech.techs_) {
+      Tech.techs_ = {};
+    }
+    if (!Tech.isTech(tech)) {
+      throw new Error(`Tech ${name} must be a Tech`);
+    }
+    if (!Tech.canPlayType) {
+      throw new Error('Techs must have a static canPlayType method on them');
+    }
+    if (!Tech.canPlaySource) {
+      throw new Error('Techs must have a static canPlaySource method on them');
+    }
+    name = toTitleCase$1(name);
+    Tech.techs_[name] = tech;
+    Tech.techs_[toLowerCase(name)] = tech;
+    if (name !== 'Tech') {
+      // camel case the techName for use in techOrder
+      Tech.defaultTechOrder_.push(name);
+    }
+    return tech;
+  }
+
+  /**
+   * Get a `Tech` from the shared list by name.
+   *
+   * @param {string} name
+   *        `camelCase` or `TitleCase` name of the Tech to get
+   *
+   * @return {Tech|undefined}
+   *         The `Tech` or undefined if there was no tech with the name requested.
+   */
+  static getTech(name) {
+    if (!name) {
+      return;
+    }
+    if (Tech.techs_ && Tech.techs_[name]) {
+      return Tech.techs_[name];
+    }
+    name = toTitleCase$1(name);
+    if (window__default["default"] && window__default["default"].videojs && window__default["default"].videojs[name]) {
+      log$1.warn(`The ${name} tech was added to the videojs object when it should be registered using videojs.registerTech(name, tech)`);
+      return window__default["default"].videojs[name];
+    }
+  }
+}
+
+/**
+ * Get the {@link VideoTrackList}
+ *
+ * @returns {VideoTrackList}
+ * @method Tech.prototype.videoTracks
+ */
+
+/**
+ * Get the {@link AudioTrackList}
+ *
+ * @returns {AudioTrackList}
+ * @method Tech.prototype.audioTracks
+ */
+
+/**
+ * Get the {@link TextTrackList}
+ *
+ * @returns {TextTrackList}
+ * @method Tech.prototype.textTracks
+ */
+
+/**
+ * Get the remote element {@link TextTrackList}
+ *
+ * @returns {TextTrackList}
+ * @method Tech.prototype.remoteTextTracks
+ */
+
+/**
+ * Get the remote element {@link HtmlTrackElementList}
+ *
+ * @returns {HtmlTrackElementList}
+ * @method Tech.prototype.remoteTextTrackEls
+ */
+
+ALL.names.forEach(function (name) {
+  const props = ALL[name];
+  Tech.prototype[props.getterName] = function () {
+    this[props.privateName] = this[props.privateName] || new props.ListClass();
+    return this[props.privateName];
+  };
+});
+
+/**
+ * List of associated text tracks
+ *
+ * @type {TextTrackList}
+ * @private
+ * @property Tech#textTracks_
+ */
+
+/**
+ * List of associated audio tracks.
+ *
+ * @type {AudioTrackList}
+ * @private
+ * @property Tech#audioTracks_
+ */
+
+/**
+ * List of associated video tracks.
+ *
+ * @type {VideoTrackList}
+ * @private
+ * @property Tech#videoTracks_
+ */
+
+/**
+ * Boolean indicating whether the `Tech` supports volume control.
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresVolumeControl = true;
+
+/**
+ * Boolean indicating whether the `Tech` supports muting volume.
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresMuteControl = true;
+
+/**
+ * Boolean indicating whether the `Tech` supports fullscreen resize control.
+ * Resizing plugins using request fullscreen reloads the plugin
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresFullscreenResize = false;
+
+/**
+ * Boolean indicating whether the `Tech` supports changing the speed at which the video
+ * plays. Examples:
+ *   - Set player to play 2x (twice) as fast
+ *   - Set player to play 0.5x (half) as fast
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresPlaybackRate = false;
+
+/**
+ * Boolean indicating whether the `Tech` supports the `progress` event.
+ * This will be used to determine if {@link Tech#manualProgressOn} should be called.
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresProgressEvents = false;
+
+/**
+ * Boolean indicating whether the `Tech` supports the `sourceset` event.
+ *
+ * A tech should set this to `true` and then use {@link Tech#triggerSourceset}
+ * to trigger a {@link Tech#event:sourceset} at the earliest time after getting
+ * a new source.
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresSourceset = false;
+
+/**
+ * Boolean indicating whether the `Tech` supports the `timeupdate` event.
+ * This will be used to determine if {@link Tech#manualTimeUpdates} should be called.
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresTimeupdateEvents = false;
+
+/**
+ * Boolean indicating whether the `Tech` supports the native `TextTrack`s.
+ * This will help us integrate with native `TextTrack`s if the browser supports them.
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresNativeTextTracks = false;
+
+/**
+ * Boolean indicating whether the `Tech` supports `requestVideoFrameCallback`.
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresVideoFrameCallback = false;
+
+/**
+ * A functional mixin for techs that want to use the Source Handler pattern.
+ * Source handlers are scripts for handling specific formats.
+ * The source handler pattern is used for adaptive formats (HLS, DASH) that
+ * manually load video data and feed it into a Source Buffer (Media Source Extensions)
+ * Example: `Tech.withSourceHandlers.call(MyTech);`
+ *
+ * @param {Tech} _Tech
+ *        The tech to add source handler functions to.
+ *
+ * @mixes Tech~SourceHandlerAdditions
+ */
+Tech.withSourceHandlers = function (_Tech) {
+  /**
+   * Register a source handler
+   *
+   * @param {Function} handler
+   *        The source handler class
+   *
+   * @param {number} [index]
+   *        Register it at the following index
+   */
+  _Tech.registerSourceHandler = function (handler, index) {
+    let handlers = _Tech.sourceHandlers;
+    if (!handlers) {
+      handlers = _Tech.sourceHandlers = [];
+    }
+    if (index === undefined) {
+      // add to the end of the list
+      index = handlers.length;
+    }
+    handlers.splice(index, 0, handler);
+  };
+
+  /**
+   * Check if the tech can support the given type. Also checks the
+   * Techs sourceHandlers.
+   *
+   * @param {string} type
+   *         The mimetype to check.
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string)
+   */
+  _Tech.canPlayType = function (type) {
+    const handlers = _Tech.sourceHandlers || [];
+    let can;
+    for (let i = 0; i < handlers.length; i++) {
+      can = handlers[i].canPlayType(type);
+      if (can) {
+        return can;
+      }
+    }
+    return '';
+  };
+
+  /**
+   * Returns the first source handler that supports the source.
+   *
+   * TODO: Answer question: should 'probably' be prioritized over 'maybe'
+   *
+   * @param {SourceObject} source
+   *        The source object
+   *
+   * @param {Object} options
+   *        The options passed to the tech
+   *
+   * @return {SourceHandler|null}
+   *          The first source handler that supports the source or null if
+   *          no SourceHandler supports the source
+   */
+  _Tech.selectSourceHandler = function (source, options) {
+    const handlers = _Tech.sourceHandlers || [];
+    let can;
+    for (let i = 0; i < handlers.length; i++) {
+      can = handlers[i].canHandleSource(source, options);
+      if (can) {
+        return handlers[i];
+      }
+    }
+    return null;
+  };
+
+  /**
+   * Check if the tech can support the given source.
+   *
+   * @param {SourceObject} srcObj
+   *        The source object
+   *
+   * @param {Object} options
+   *        The options passed to the tech
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string)
+   */
+  _Tech.canPlaySource = function (srcObj, options) {
+    const sh = _Tech.selectSourceHandler(srcObj, options);
+    if (sh) {
+      return sh.canHandleSource(srcObj, options);
+    }
+    return '';
+  };
+
+  /**
+   * When using a source handler, prefer its implementation of
+   * any function normally provided by the tech.
+   */
+  const deferrable = ['seekable', 'seeking', 'duration'];
+
+  /**
+   * A wrapper around {@link Tech#seekable} that will call a `SourceHandler`s seekable
+   * function if it exists, with a fallback to the Techs seekable function.
+   *
+   * @method _Tech.seekable
+   */
+
+  /**
+   * A wrapper around {@link Tech#duration} that will call a `SourceHandler`s duration
+   * function if it exists, otherwise it will fallback to the techs duration function.
+   *
+   * @method _Tech.duration
+   */
+
+  deferrable.forEach(function (fnName) {
+    const originalFn = this[fnName];
+    if (typeof originalFn !== 'function') {
+      return;
+    }
+    this[fnName] = function () {
+      if (this.sourceHandler_ && this.sourceHandler_[fnName]) {
+        return this.sourceHandler_[fnName].apply(this.sourceHandler_, arguments);
+      }
+      return originalFn.apply(this, arguments);
+    };
+  }, _Tech.prototype);
+
+  /**
+   * Create a function for setting the source using a source object
+   * and source handlers.
+   * Should never be called unless a source handler was found.
+   *
+   * @param {SourceObject} source
+   *        A source object with src and type keys
+   */
+  _Tech.prototype.setSource = function (source) {
+    let sh = _Tech.selectSourceHandler(source, this.options_);
+    if (!sh) {
+      // Fall back to a native source handler when unsupported sources are
+      // deliberately set
+      if (_Tech.nativeSourceHandler) {
+        sh = _Tech.nativeSourceHandler;
+      } else {
+        log$1.error('No source handler found for the current source.');
+      }
+    }
+
+    // Dispose any existing source handler
+    this.disposeSourceHandler();
+    this.off('dispose', this.disposeSourceHandler_);
+    if (sh !== _Tech.nativeSourceHandler) {
+      this.currentSource_ = source;
+    }
+    this.sourceHandler_ = sh.handleSource(source, this, this.options_);
+    this.one('dispose', this.disposeSourceHandler_);
+  };
+
+  /**
+   * Clean up any existing SourceHandlers and listeners when the Tech is disposed.
+   *
+   * @listens Tech#dispose
+   */
+  _Tech.prototype.disposeSourceHandler = function () {
+    // if we have a source and get another one
+    // then we are loading something new
+    // than clear all of our current tracks
+    if (this.currentSource_) {
+      this.clearTracks(['audio', 'video']);
+      this.currentSource_ = null;
+    }
+
+    // always clean up auto-text tracks
+    this.cleanupAutoTextTracks();
+    if (this.sourceHandler_) {
+      if (this.sourceHandler_.dispose) {
+        this.sourceHandler_.dispose();
+      }
+      this.sourceHandler_ = null;
+    }
+  };
+};
+
+// The base Tech class needs to be registered as a Component. It is the only
+// Tech that can be registered as a Component.
+Component$1.registerComponent('Tech', Tech);
+Tech.registerTech('Tech', Tech);
+
+/**
+ * A list of techs that should be added to techOrder on Players
+ *
+ * @private
+ */
+Tech.defaultTechOrder_ = [];
+
+/**
+ * @file middleware.js
+ * @module middleware
+ */
+const middlewares = {};
+const middlewareInstances = {};
+const TERMINATOR = {};
+
+/**
+ * A middleware object is a plain JavaScript object that has methods that
+ * match the {@link Tech} methods found in the lists of allowed
+ * {@link module:middleware.allowedGetters|getters},
+ * {@link module:middleware.allowedSetters|setters}, and
+ * {@link module:middleware.allowedMediators|mediators}.
+ *
+ * @typedef {Object} MiddlewareObject
+ */
+
+/**
+ * A middleware factory function that should return a
+ * {@link module:middleware~MiddlewareObject|MiddlewareObject}.
+ *
+ * This factory will be called for each player when needed, with the player
+ * passed in as an argument.
+ *
+ * @callback MiddlewareFactory
+ * @param { import('../player').default } player
+ *        A Video.js player.
+ */
+
+/**
+ * Define a middleware that the player should use by way of a factory function
+ * that returns a middleware object.
+ *
+ * @param  {string} type
+ *         The MIME type to match or `"*"` for all MIME types.
+ *
+ * @param  {MiddlewareFactory} middleware
+ *         A middleware factory function that will be executed for
+ *         matching types.
+ */
+function use(type, middleware) {
+  middlewares[type] = middlewares[type] || [];
+  middlewares[type].push(middleware);
+}
+
+/**
+ * Asynchronously sets a source using middleware by recursing through any
+ * matching middlewares and calling `setSource` on each, passing along the
+ * previous returned value each time.
+ *
+ * @param  { import('../player').default } player
+ *         A {@link Player} instance.
+ *
+ * @param  {Tech~SourceObject} src
+ *         A source object.
+ *
+ * @param  {Function}
+ *         The next middleware to run.
+ */
+function setSource(player, src, next) {
+  player.setTimeout(() => setSourceHelper(src, middlewares[src.type], next, player), 1);
+}
+
+/**
+ * When the tech is set, passes the tech to each middleware's `setTech` method.
+ *
+ * @param {Object[]} middleware
+ *        An array of middleware instances.
+ *
+ * @param { import('../tech/tech').default } tech
+ *        A Video.js tech.
+ */
+function setTech(middleware, tech) {
+  middleware.forEach(mw => mw.setTech && mw.setTech(tech));
+}
+
+/**
+ * Calls a getter on the tech first, through each middleware
+ * from right to left to the player.
+ *
+ * @param  {Object[]} middleware
+ *         An array of middleware instances.
+ *
+ * @param  { import('../tech/tech').default } tech
+ *         The current tech.
+ *
+ * @param  {string} method
+ *         A method name.
+ *
+ * @return {*}
+ *         The final value from the tech after middleware has intercepted it.
+ */
+function get(middleware, tech, method) {
+  return middleware.reduceRight(middlewareIterator(method), tech[method]());
+}
+
+/**
+ * Takes the argument given to the player and calls the setter method on each
+ * middleware from left to right to the tech.
+ *
+ * @param  {Object[]} middleware
+ *         An array of middleware instances.
+ *
+ * @param  { import('../tech/tech').default } tech
+ *         The current tech.
+ *
+ * @param  {string} method
+ *         A method name.
+ *
+ * @param  {*} arg
+ *         The value to set on the tech.
+ *
+ * @return {*}
+ *         The return value of the `method` of the `tech`.
+ */
+function set(middleware, tech, method, arg) {
+  return tech[method](middleware.reduce(middlewareIterator(method), arg));
+}
+
+/**
+ * Takes the argument given to the player and calls the `call` version of the
+ * method on each middleware from left to right.
+ *
+ * Then, call the passed in method on the tech and return the result unchanged
+ * back to the player, through middleware, this time from right to left.
+ *
+ * @param  {Object[]} middleware
+ *         An array of middleware instances.
+ *
+ * @param  { import('../tech/tech').default } tech
+ *         The current tech.
+ *
+ * @param  {string} method
+ *         A method name.
+ *
+ * @param  {*} arg
+ *         The value to set on the tech.
+ *
+ * @return {*}
+ *         The return value of the `method` of the `tech`, regardless of the
+ *         return values of middlewares.
+ */
+function mediate(middleware, tech, method, arg = null) {
+  const callMethod = 'call' + toTitleCase$1(method);
+  const middlewareValue = middleware.reduce(middlewareIterator(callMethod), arg);
+  const terminated = middlewareValue === TERMINATOR;
+  // deprecated. The `null` return value should instead return TERMINATOR to
+  // prevent confusion if a techs method actually returns null.
+  const returnValue = terminated ? null : tech[method](middlewareValue);
+  executeRight(middleware, method, returnValue, terminated);
+  return returnValue;
+}
+
+/**
+ * Enumeration of allowed getters where the keys are method names.
+ *
+ * @type {Object}
+ */
+const allowedGetters = {
+  buffered: 1,
+  currentTime: 1,
+  duration: 1,
+  muted: 1,
+  played: 1,
+  paused: 1,
+  seekable: 1,
+  volume: 1,
+  ended: 1
+};
+
+/**
+ * Enumeration of allowed setters where the keys are method names.
+ *
+ * @type {Object}
+ */
+const allowedSetters = {
+  setCurrentTime: 1,
+  setMuted: 1,
+  setVolume: 1
+};
+
+/**
+ * Enumeration of allowed mediators where the keys are method names.
+ *
+ * @type {Object}
+ */
+const allowedMediators = {
+  play: 1,
+  pause: 1
+};
+function middlewareIterator(method) {
+  return (value, mw) => {
+    // if the previous middleware terminated, pass along the termination
+    if (value === TERMINATOR) {
+      return TERMINATOR;
+    }
+    if (mw[method]) {
+      return mw[method](value);
+    }
+    return value;
+  };
+}
+function executeRight(mws, method, value, terminated) {
+  for (let i = mws.length - 1; i >= 0; i--) {
+    const mw = mws[i];
+    if (mw[method]) {
+      mw[method](terminated, value);
+    }
+  }
+}
+
+/**
+ * Clear the middleware cache for a player.
+ *
+ * @param  { import('../player').default } player
+ *         A {@link Player} instance.
+ */
+function clearCacheForPlayer(player) {
+  middlewareInstances[player.id()] = null;
+}
+
+/**
+ * {
+ *  [playerId]: [[mwFactory, mwInstance], ...]
+ * }
+ *
+ * @private
+ */
+function getOrCreateFactory(player, mwFactory) {
+  const mws = middlewareInstances[player.id()];
+  let mw = null;
+  if (mws === undefined || mws === null) {
+    mw = mwFactory(player);
+    middlewareInstances[player.id()] = [[mwFactory, mw]];
+    return mw;
+  }
+  for (let i = 0; i < mws.length; i++) {
+    const [mwf, mwi] = mws[i];
+    if (mwf !== mwFactory) {
+      continue;
+    }
+    mw = mwi;
+  }
+  if (mw === null) {
+    mw = mwFactory(player);
+    mws.push([mwFactory, mw]);
+  }
+  return mw;
+}
+function setSourceHelper(src = {}, middleware = [], next, player, acc = [], lastRun = false) {
+  const [mwFactory, ...mwrest] = middleware;
+
+  // if mwFactory is a string, then we're at a fork in the road
+  if (typeof mwFactory === 'string') {
+    setSourceHelper(src, middlewares[mwFactory], next, player, acc, lastRun);
+
+    // if we have an mwFactory, call it with the player to get the mw,
+    // then call the mw's setSource method
+  } else if (mwFactory) {
+    const mw = getOrCreateFactory(player, mwFactory);
+
+    // if setSource isn't present, implicitly select this middleware
+    if (!mw.setSource) {
+      acc.push(mw);
+      return setSourceHelper(src, mwrest, next, player, acc, lastRun);
+    }
+    mw.setSource(Object.assign({}, src), function (err, _src) {
+      // something happened, try the next middleware on the current level
+      // make sure to use the old src
+      if (err) {
+        return setSourceHelper(src, mwrest, next, player, acc, lastRun);
+      }
+
+      // we've succeeded, now we need to go deeper
+      acc.push(mw);
+
+      // if it's the same type, continue down the current chain
+      // otherwise, we want to go down the new chain
+      setSourceHelper(_src, src.type === _src.type ? mwrest : middlewares[_src.type], next, player, acc, lastRun);
+    });
+  } else if (mwrest.length) {
+    setSourceHelper(src, mwrest, next, player, acc, lastRun);
+  } else if (lastRun) {
+    next(src, acc);
+  } else {
+    setSourceHelper(src, middlewares['*'], next, player, acc, true);
+  }
+}
+
+/**
+ * Mimetypes
+ *
+ * @see https://www.iana.org/assignments/media-types/media-types.xhtml
+ * @typedef Mimetypes~Kind
+ * @enum
+ */
+const MimetypesKind = {
+  opus: 'video/ogg',
+  ogv: 'video/ogg',
+  mp4: 'video/mp4',
+  mov: 'video/mp4',
+  m4v: 'video/mp4',
+  mkv: 'video/x-matroska',
+  m4a: 'audio/mp4',
+  mp3: 'audio/mpeg',
+  aac: 'audio/aac',
+  caf: 'audio/x-caf',
+  flac: 'audio/flac',
+  oga: 'audio/ogg',
+  wav: 'audio/wav',
+  m3u8: 'application/x-mpegURL',
+  mpd: 'application/dash+xml',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  png: 'image/png',
+  svg: 'image/svg+xml',
+  webp: 'image/webp'
+};
+
+/**
+ * Get the mimetype of a given src url if possible
+ *
+ * @param {string} src
+ *        The url to the src
+ *
+ * @return {string}
+ *         return the mimetype if it was known or empty string otherwise
+ */
+const getMimetype = function (src = '') {
+  const ext = getFileExtension(src);
+  const mimetype = MimetypesKind[ext.toLowerCase()];
+  return mimetype || '';
+};
+
+/**
+ * Find the mime type of a given source string if possible. Uses the player
+ * source cache.
+ *
+ * @param { import('../player').default } player
+ *        The player object
+ *
+ * @param {string} src
+ *        The source string
+ *
+ * @return {string}
+ *         The type that was found
+ */
+const findMimetype = (player, src) => {
+  if (!src) {
+    return '';
+  }
+
+  // 1. check for the type in the `source` cache
+  if (player.cache_.source.src === src && player.cache_.source.type) {
+    return player.cache_.source.type;
+  }
+
+  // 2. see if we have this source in our `currentSources` cache
+  const matchingSources = player.cache_.sources.filter(s => s.src === src);
+  if (matchingSources.length) {
+    return matchingSources[0].type;
+  }
+
+  // 3. look for the src url in source elements and use the type there
+  const sources = player.$$('source');
+  for (let i = 0; i < sources.length; i++) {
+    const s = sources[i];
+    if (s.type && s.src && s.src === src) {
+      return s.type;
+    }
+  }
+
+  // 4. finally fallback to our list of mime types based on src url extension
+  return getMimetype(src);
+};
+
+/**
+ * @module filter-source
+ */
+
+/**
+ * Filter out single bad source objects or multiple source objects in an
+ * array. Also flattens nested source object arrays into a 1 dimensional
+ * array of source objects.
+ *
+ * @param {Tech~SourceObject|Tech~SourceObject[]} src
+ *        The src object to filter
+ *
+ * @return {Tech~SourceObject[]}
+ *         An array of sourceobjects containing only valid sources
+ *
+ * @private
+ */
+const filterSource = function (src) {
+  // traverse array
+  if (Array.isArray(src)) {
+    let newsrc = [];
+    src.forEach(function (srcobj) {
+      srcobj = filterSource(srcobj);
+      if (Array.isArray(srcobj)) {
+        newsrc = newsrc.concat(srcobj);
+      } else if (isObject(srcobj)) {
+        newsrc.push(srcobj);
+      }
+    });
+    src = newsrc;
+  } else if (typeof src === 'string' && src.trim()) {
+    // convert string into object
+    src = [fixSource({
+      src
+    })];
+  } else if (isObject(src) && typeof src.src === 'string' && src.src && src.src.trim()) {
+    // src is already valid
+    src = [fixSource(src)];
+  } else {
+    // invalid source, turn it into an empty array
+    src = [];
+  }
+  return src;
+};
+
+/**
+ * Checks src mimetype, adding it when possible
+ *
+ * @param {Tech~SourceObject} src
+ *        The src object to check
+ * @return {Tech~SourceObject}
+ *        src Object with known type
+ */
+function fixSource(src) {
+  if (!src.type) {
+    const mimetype = getMimetype(src.src);
+    if (mimetype) {
+      src.type = mimetype;
+    }
+  }
+  return src;
+}
+
+var icons = "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-play\">\n      <path d=\"M16 10v28l22-14z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-pause\">\n      <path d=\"M12 38h8V10h-8v28zm16-28v28h8V10h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-audio\">\n      <path d=\"M24 2C14.06 2 6 10.06 6 20v14c0 3.31 2.69 6 6 6h6V24h-8v-4c0-7.73 6.27-14 14-14s14 6.27 14 14v4h-8v16h6c3.31 0 6-2.69 6-6V20c0-9.94-8.06-18-18-18z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-captions\">\n      <path d=\"M38 8H10c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM22 22h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2zm14 0h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-subtitles\">\n      <path d=\"M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-fullscreen-enter\">\n      <path d=\"M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-fullscreen-exit\">\n      <path d=\"M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-play-circle\">\n      <path d=\"M20 33l12-9-12-9v18zm4-29C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-mute\">\n      <path d=\"M33 24c0-3.53-2.04-6.58-5-8.05v4.42l4.91 4.91c.06-.42.09-.85.09-1.28zm5 0c0 1.88-.41 3.65-1.08 5.28l3.03 3.03C41.25 29.82 42 27 42 24c0-8.56-5.99-15.72-14-17.54v4.13c5.78 1.72 10 7.07 10 13.41zM8.55 6L6 8.55 15.45 18H6v12h8l10 10V26.55l8.51 8.51c-1.34 1.03-2.85 1.86-4.51 2.36v4.13a17.94 17.94 0 0 0 7.37-3.62L39.45 42 42 39.45l-18-18L8.55 6zM24 8l-4.18 4.18L24 16.36V8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-low\">\n      <path d=\"M14 18v12h8l10 10V8L22 18h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-medium\">\n      <path d=\"M37 24c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zm-27-6v12h8l10 10V8L18 18h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-high\">\n      <path d=\"M6 18v12h8l10 10V8L14 18H6zm27 6c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zM28 6.46v4.13c5.78 1.72 10 7.07 10 13.41s-4.22 11.69-10 13.41v4.13c8.01-1.82 14-8.97 14-17.54S36.01 8.28 28 6.46z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-spinner\">\n      <path d=\"M18.8 21l9.53-16.51C26.94 4.18 25.49 4 24 4c-4.8 0-9.19 1.69-12.64 4.51l7.33 12.69.11-.2zm24.28-3c-1.84-5.85-6.3-10.52-11.99-12.68L23.77 18h19.31zm.52 2H28.62l.58 1 9.53 16.5C41.99 33.94 44 29.21 44 24c0-1.37-.14-2.71-.4-4zm-26.53 4l-7.8-13.5C6.01 14.06 4 18.79 4 24c0 1.37.14 2.71.4 4h14.98l-2.31-4zM4.92 30c1.84 5.85 6.3 10.52 11.99 12.68L24.23 30H4.92zm22.54 0l-7.8 13.51c1.4.31 2.85.49 4.34.49 4.8 0 9.19-1.69 12.64-4.51L29.31 26.8 27.46 30z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 24 24\" id=\"vjs-icon-hd\">\n      <path d=\"M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-chapters\">\n      <path d=\"M6 26h4v-4H6v4zm0 8h4v-4H6v4zm0-16h4v-4H6v4zm8 8h28v-4H14v4zm0 8h28v-4H14v4zm0-20v4h28v-4H14z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 40 40\" id=\"vjs-icon-downloading\">\n      <path d=\"M18.208 36.875q-3.208-.292-5.979-1.729-2.771-1.438-4.812-3.729-2.042-2.292-3.188-5.229-1.146-2.938-1.146-6.23 0-6.583 4.334-11.416 4.333-4.834 10.833-5.5v3.166q-5.167.75-8.583 4.646Q6.25 14.75 6.25 19.958q0 5.209 3.396 9.104 3.396 3.896 8.562 4.646zM20 28.417L11.542 20l2.083-2.083 4.917 4.916v-11.25h2.916v11.25l4.875-4.916L28.417 20zm1.792 8.458v-3.167q1.833-.25 3.541-.958 1.709-.708 3.167-1.875l2.333 2.292q-1.958 1.583-4.25 2.541-2.291.959-4.791 1.167zm6.791-27.792q-1.541-1.125-3.25-1.854-1.708-.729-3.541-1.021V3.042q2.5.25 4.77 1.208 2.271.958 4.271 2.5zm4.584 21.584l-2.25-2.25q1.166-1.5 1.854-3.209.687-1.708.937-3.541h3.209q-.292 2.5-1.229 4.791-.938 2.292-2.521 4.209zm.541-12.417q-.291-1.833-.958-3.562-.667-1.73-1.833-3.188l2.375-2.208q1.541 1.916 2.458 4.208.917 2.292 1.167 4.75z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download\">\n      <path d=\"M10.8 40.55q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h26.35v-7.7h3.4v7.7q0 1.4-1 2.4t-2.4 1zM24 32.1L13.9 22.05l2.45-2.45 5.95 5.95V7.15h3.4v18.4l5.95-5.95 2.45 2.45z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download-done\">\n      <path d=\"M9.8 40.5v-3.45h28.4v3.45zm9.2-9.05L7.4 19.85l2.45-2.35L19 26.65l19.2-19.2 2.4 2.4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download-off\">\n      <path d=\"M4.9 4.75L43.25 43.1 41 45.3l-4.75-4.75q-.05.05-.075.025-.025-.025-.075-.025H10.8q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h22.05l-7-7-1.85 1.8L13.9 21.9l1.85-1.85L2.7 7zm26.75 14.7l2.45 2.45-3.75 3.8-2.45-2.5zM25.7 7.15V21.1l-3.4-3.45V7.15z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-share\">\n      <path d=\"M36 32.17c-1.52 0-2.89.59-3.93 1.54L17.82 25.4c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31A5.83 5.83 0 1 0 36 32.17z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cog\">\n      <path d=\"M38.86 25.95c.08-.64.14-1.29.14-1.95s-.06-1.31-.14-1.95l4.23-3.31c.38-.3.49-.84.24-1.28l-4-6.93c-.25-.43-.77-.61-1.22-.43l-4.98 2.01c-1.03-.79-2.16-1.46-3.38-1.97L29 4.84c-.09-.47-.5-.84-1-.84h-8c-.5 0-.91.37-.99.84l-.75 5.3a14.8 14.8 0 0 0-3.38 1.97L9.9 10.1a1 1 0 0 0-1.22.43l-4 6.93c-.25.43-.14.97.24 1.28l4.22 3.31C9.06 22.69 9 23.34 9 24s.06 1.31.14 1.95l-4.22 3.31c-.38.3-.49.84-.24 1.28l4 6.93c.25.43.77.61 1.22.43l4.98-2.01c1.03.79 2.16 1.46 3.38 1.97l.75 5.3c.08.47.49.84.99.84h8c.5 0 .91-.37.99-.84l.75-5.3a14.8 14.8 0 0 0 3.38-1.97l4.98 2.01a1 1 0 0 0 1.22-.43l4-6.93c.25-.43.14-.97-.24-1.28l-4.22-3.31zM24 31c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-square\">\n      <path d=\"M36 8H12c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H12V12h24v24z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle\">\n      <circle cx=\"24\" cy=\"24\" r=\"20\"></circle>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle-outline\">\n      <path d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle-inner-circle\">\n      <path d=\"M24 4C12.97 4 4 12.97 4 24s8.97 20 20 20 20-8.97 20-20S35.03 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm6-16c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6 6 2.69 6 6z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cancel\">\n      <path d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-replay\">\n      <path d=\"M24 10V2L14 12l10 10v-8c6.63 0 12 5.37 12 12s-5.37 12-12 12-12-5.37-12-12H8c0 8.84 7.16 16 16 16s16-7.16 16-16-7.16-16-16-16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-repeat\">\n      <path d=\"M14 14h20v6l8-8-8-8v6H10v12h4v-8zm20 20H14v-6l-8 8 8 8v-6h24V26h-4v8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-5\">\n      <path d=\"M17.689 98l-8.697 8.696 8.697 8.697 2.486-2.485-4.32-4.319h1.302c4.93 0 9.071 1.722 12.424 5.165 3.352 3.443 5.029 7.638 5.029 12.584h3.55c0-2.958-.553-5.73-1.658-8.313-1.104-2.583-2.622-4.841-4.555-6.774-1.932-1.932-4.19-3.45-6.773-4.555-2.584-1.104-5.355-1.657-8.313-1.657H15.5l4.615-4.615zm-8.08 21.659v13.861h11.357v5.008H9.609V143h12.7c.834 0 1.55-.298 2.146-.894.596-.597.895-1.31.895-2.145v-7.781c0-.835-.299-1.55-.895-2.147a2.929 2.929 0 0 0-2.147-.894h-8.227v-5.096H25.35v-4.384z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-10\">\n      <path d=\"M42.315 125.63c0-4.997-1.694-9.235-5.08-12.713-3.388-3.479-7.571-5.218-12.552-5.218h-1.315l4.363 4.363-2.51 2.51-8.787-8.786L25.221 97l2.45 2.45-4.662 4.663h1.375c2.988 0 5.788.557 8.397 1.673 2.61 1.116 4.892 2.65 6.844 4.602 1.953 1.953 3.487 4.234 4.602 6.844 1.116 2.61 1.674 5.41 1.674 8.398zM8.183 142v-19.657H3.176V117.8h9.643V142zm13.63 0c-1.156 0-2.127-.393-2.912-1.178-.778-.778-1.168-1.746-1.168-2.902v-16.04c0-1.156.393-2.127 1.178-2.912.779-.779 1.746-1.168 2.902-1.168h7.696c1.156 0 2.126.392 2.911 1.177.779.78 1.168 1.747 1.168 2.903v16.04c0 1.156-.392 2.127-1.177 2.912-.779.779-1.746 1.168-2.902 1.168zm.556-4.636h6.583v-15.02H22.37z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-30\">\n      <path d=\"M26.047 97l-8.733 8.732 8.733 8.733 2.496-2.494-4.336-4.338h1.307c4.95 0 9.108 1.73 12.474 5.187 3.367 3.458 5.051 7.668 5.051 12.635h3.565c0-2.97-.556-5.751-1.665-8.346-1.109-2.594-2.633-4.862-4.574-6.802-1.94-1.941-4.208-3.466-6.803-4.575-2.594-1.109-5.375-1.664-8.345-1.664H23.85l4.634-4.634zM2.555 117.531v4.688h10.297v5.25H5.873v4.687h6.979v5.156H2.555V142H13.36c1.061 0 1.95-.395 2.668-1.186.718-.79 1.076-1.772 1.076-2.94v-16.218c0-1.168-.358-2.149-1.076-2.94-.717-.79-1.607-1.185-2.668-1.185zm22.482.14c-1.149 0-2.11.39-2.885 1.165-.78.78-1.172 1.744-1.172 2.893v15.943c0 1.149.388 2.11 1.163 2.885.78.78 1.745 1.172 2.894 1.172h7.649c1.148 0 2.11-.388 2.884-1.163.78-.78 1.17-1.745 1.17-2.894v-15.943c0-1.15-.386-2.111-1.16-2.885-.78-.78-1.746-1.172-2.894-1.172zm.553 4.518h6.545v14.93H25.59z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-5\">\n      <path d=\"M29.508 97l-2.431 2.43 4.625 4.625h-1.364c-2.965 0-5.742.554-8.332 1.66-2.589 1.107-4.851 2.629-6.788 4.566-1.937 1.937-3.458 4.2-4.565 6.788-1.107 2.59-1.66 5.367-1.66 8.331h3.557c0-4.957 1.68-9.16 5.04-12.611 3.36-3.45 7.51-5.177 12.451-5.177h1.304l-4.326 4.33 2.49 2.49 8.715-8.716zm-9.783 21.61v13.89h11.382v5.018H19.725V142h12.727a2.93 2.93 0 0 0 2.15-.896 2.93 2.93 0 0 0 .896-2.15v-7.798c0-.837-.299-1.554-.896-2.152a2.93 2.93 0 0 0-2.15-.896h-8.245V123h11.29v-4.392z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-10\">\n      <path d=\"M23.119 97l-2.386 2.383 4.538 4.538h-1.339c-2.908 0-5.633.543-8.173 1.63-2.54 1.085-4.76 2.577-6.66 4.478-1.9 1.9-3.392 4.12-4.478 6.66-1.085 2.54-1.629 5.264-1.629 8.172h3.49c0-4.863 1.648-8.986 4.944-12.372 3.297-3.385 7.368-5.078 12.216-5.078h1.279l-4.245 4.247 2.443 2.442 8.55-8.55zm-9.52 21.45v4.42h4.871V142h4.513v-23.55zm18.136 0c-1.125 0-2.066.377-2.824 1.135-.764.764-1.148 1.709-1.148 2.834v15.612c0 1.124.38 2.066 1.139 2.824.764.764 1.708 1.145 2.833 1.145h7.489c1.125 0 2.066-.378 2.824-1.136.764-.764 1.145-1.709 1.145-2.833v-15.612c0-1.125-.378-2.067-1.136-2.825-.764-.764-1.708-1.145-2.833-1.145zm.54 4.42h6.408v14.617h-6.407z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-30\">\n      <path d=\"M25.549 97l-2.437 2.434 4.634 4.635H26.38c-2.97 0-5.753.555-8.347 1.664-2.594 1.109-4.861 2.633-6.802 4.574-1.94 1.94-3.465 4.207-4.574 6.802-1.109 2.594-1.664 5.377-1.664 8.347h3.565c0-4.967 1.683-9.178 5.05-12.636 3.366-3.458 7.525-5.187 12.475-5.187h1.307l-4.335 4.338 2.495 2.494 8.732-8.732zm-11.553 20.53v4.689h10.297v5.249h-6.978v4.688h6.978v5.156H13.996V142h10.808c1.06 0 1.948-.395 2.666-1.186.718-.79 1.077-1.771 1.077-2.94v-16.217c0-1.169-.36-2.15-1.077-2.94-.718-.79-1.605-1.186-2.666-1.186zm21.174.168c-1.149 0-2.11.389-2.884 1.163-.78.78-1.172 1.745-1.172 2.894v15.942c0 1.15.388 2.11 1.162 2.885.78.78 1.745 1.17 2.894 1.17h7.649c1.149 0 2.11-.386 2.885-1.16.78-.78 1.17-1.746 1.17-2.895v-15.942c0-1.15-.387-2.11-1.161-2.885-.78-.78-1.745-1.172-2.894-1.172zm.552 4.516h6.542v14.931h-6.542z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 512 512\" id=\"vjs-icon-audio-description\">\n      <g fill-rule=\"evenodd\"><path d=\"M227.29 381.351V162.993c50.38-1.017 89.108-3.028 117.631 17.126 27.374 19.342 48.734 56.965 44.89 105.325-4.067 51.155-41.335 94.139-89.776 98.475-24.085 2.155-71.972 0-71.972 0s-.84-1.352-.773-2.568m48.755-54.804c31.43 1.26 53.208-16.633 56.495-45.386 4.403-38.51-21.188-63.552-58.041-60.796v103.612c-.036 1.466.575 2.22 1.546 2.57\"></path><path d=\"M383.78 381.328c13.336 3.71 17.387-11.06 23.215-21.408 12.722-22.571 22.294-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.226 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894\"></path><path d=\"M425.154 381.328c13.336 3.71 17.384-11.061 23.215-21.408 12.721-22.571 22.291-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.511c-.586 3.874 2.226 7.315 3.866 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894\"></path><path d=\"M466.26 381.328c13.337 3.71 17.385-11.061 23.216-21.408 12.722-22.571 22.292-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.225 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894M4.477 383.005H72.58l18.573-28.484 64.169-.135s.065 19.413.065 28.62h48.756V160.307h-58.816c-5.653 9.537-140.85 222.697-140.85 222.697zm152.667-145.282v71.158l-40.453-.27 40.453-70.888z\"></path></g>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-next-item\">\n      <path d=\"M12 36l17-12-17-12v24zm20-24v24h4V12h-4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-previous-item\">\n      <path d=\"M12 12h4v24h-4zm7 12l17 12V12z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-shuffle\">\n      <path d=\"M21.17 18.34L10.83 8 8 10.83l10.34 10.34 2.83-2.83zM29 8l4.09 4.09L8 37.17 10.83 40l25.09-25.09L40 19V8H29zm.66 18.83l-2.83 2.83 6.26 6.26L29 40h11V29l-4.09 4.09-6.25-6.26z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cast\">\n      <path d=\"M42 6H6c-2.21 0-4 1.79-4 4v6h4v-6h36v28H28v4h14c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4zM2 36v6h6c0-3.31-2.69-6-6-6zm0-8v4c5.52 0 10 4.48 10 10h4c0-7.73-6.27-14-14-14zm0-8v4c9.94 0 18 8.06 18 18h4c0-12.15-9.85-22-22-22z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-picture-in-picture-enter\">\n      <path d=\"M38 22H22v11.99h16V22zm8 16V9.96C46 7.76 44.2 6 42 6H6C3.8 6 2 7.76 2 9.96V38c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4zm-4 .04H6V9.94h36v28.1z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 22 18\" id=\"vjs-icon-picture-in-picture-exit\">\n      <path d=\"M18 4H4v10h14V4zm4 12V1.98C22 .88 21.1 0 20 0H2C.9 0 0 .88 0 1.98V16c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H2V1.97h18v14.05z\"></path>\n      <path fill=\"none\" d=\"M-1-3h24v24H-1z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-facebook\">\n      <path d=\"M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759H734V905H479V609h255V391q0-186 104-288.5T1115 0q147 0 228 12z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-linkedin\">\n      <path d=\"M477 625v991H147V625h330zm21-306q1 73-50.5 122T312 490h-2q-82 0-132-49t-50-122q0-74 51.5-122.5T314 148t133 48.5T498 319zm1166 729v568h-329v-530q0-105-40.5-164.5T1168 862q-63 0-105.5 34.5T999 982q-11 30-11 81v553H659q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5T1285 602q171 0 275 113.5t104 332.5z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-twitter\">\n      <path d=\"M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5T1369.5 1125 1185 1335.5t-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5T285 1033q33 5 61 5 43 0 85-11-112-23-185.5-111.5T172 710v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5T884 653q-8-38-8-74 0-134 94.5-228.5T1199 256q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-tumblr\">\n      <path d=\"M1328 1329l80 237q-23 35-111 66t-177 32q-104 2-190.5-26T787 1564t-95-106-55.5-120-16.5-118V676H452V461q72-26 129-69.5t91-90 58-102 34-99T779 12q1-5 4.5-8.5T791 0h244v424h333v252h-334v518q0 30 6.5 56t22.5 52.5 49.5 41.5 81.5 14q78-2 134-29z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-pinterest\">\n      <path d=\"M1664 896q0 209-103 385.5T1281.5 1561 896 1664q-111 0-218-32 59-93 78-164 9-34 54-211 20 39 73 67.5t114 28.5q121 0 216-68.5t147-188.5 52-270q0-114-59.5-214T1180 449t-255-63q-105 0-196 29t-154.5 77-109 110.5-67 129.5T377 866q0 104 40 183t117 111q30 12 38-20 2-7 8-31t8-30q6-23-11-43-51-61-51-151 0-151 104.5-259.5T904 517q151 0 235.5 82t84.5 213q0 170-68.5 289T980 1220q-61 0-98-43.5T859 1072q8-35 26.5-93.5t30-103T927 800q0-50-27-83t-77-33q-62 0-105 57t-43 142q0 73 25 122l-99 418q-17 70-13 177-206-91-333-281T128 896q0-209 103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z\"></path>\n    </symbol>\n  </defs>\n</svg>";
+
+/**
+ * @file loader.js
+ */
+
+/**
+ * The `MediaLoader` is the `Component` that decides which playback technology to load
+ * when a player is initialized.
+ *
+ * @extends Component
+ */
+class MediaLoader extends Component$1 {
+  /**
+   * Create an instance of this class.
+   *
+   * @param { import('../player').default } player
+   *        The `Player` that this class should attach to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Function} [ready]
+   *        The function that is run when this component is ready.
+   */
+  constructor(player, options, ready) {
+    // MediaLoader has no element
+    const options_ = merge$1({
+      createEl: false
+    }, options);
+    super(player, options_, ready);
+
+    // If there are no sources when the player is initialized,
+    // load the first supported playback technology.
+
+    if (!options.playerOptions.sources || options.playerOptions.sources.length === 0) {
+      for (let i = 0, j = options.playerOptions.techOrder; i < j.length; i++) {
+        const techName = toTitleCase$1(j[i]);
+        let tech = Tech.getTech(techName);
+
+        // Support old behavior of techs being registered as components.
+        // Remove once that deprecated behavior is removed.
+        if (!techName) {
+          tech = Component$1.getComponent(techName);
+        }
+
+        // Check if the browser supports this technology
+        if (tech && tech.isSupported()) {
+          player.loadTech_(techName);
+          break;
+        }
+      }
+    } else {
+      // Loop through playback technologies (e.g. HTML5) and check for support.
+      // Then load the best source.
+      // A few assumptions here:
+      //   All playback technologies respect preload false.
+      player.src(options.playerOptions.sources);
+    }
+  }
+}
+Component$1.registerComponent('MediaLoader', MediaLoader);
+
+/**
+ * @file clickable-component.js
+ */
+
+/**
+ * Component which is clickable or keyboard actionable, but is not a
+ * native HTML button.
+ *
+ * @extends Component
+ */
+class ClickableComponent extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param  { import('./player').default } player
+   *         The `Player` that this class should be attached to.
+   *
+   * @param  {Object} [options]
+   *         The key/value store of component options.
+   *
+   * @param  {function} [options.clickHandler]
+   *         The function to call when the button is clicked / activated
+   *
+   * @param  {string} [options.controlText]
+   *         The text to set on the button
+   *
+   * @param  {string} [options.className]
+   *         A class or space separated list of classes to add the component
+   *
+   */
+  constructor(player, options) {
+    super(player, options);
+    if (this.options_.controlText) {
+      this.controlText(this.options_.controlText);
+    }
+    this.handleMouseOver_ = e => this.handleMouseOver(e);
+    this.handleMouseOut_ = e => this.handleMouseOut(e);
+    this.handleClick_ = e => this.handleClick(e);
+    this.handleKeyDown_ = e => this.handleKeyDown(e);
+    this.emitTapEvents();
+    this.enable();
+  }
+
+  /**
+   * Create the `ClickableComponent`s DOM element.
+   *
+   * @param {string} [tag=div]
+   *        The element's node type.
+   *
+   * @param {Object} [props={}]
+   *        An object of properties that should be set on the element.
+   *
+   * @param {Object} [attributes={}]
+   *        An object of attributes that should be set on the element.
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl(tag = 'div', props = {}, attributes = {}) {
+    props = Object.assign({
+      className: this.buildCSSClass(),
+      tabIndex: 0
+    }, props);
+    if (tag === 'button') {
+      log$1.error(`Creating a ClickableComponent with an HTML element of ${tag} is not supported; use a Button instead.`);
+    }
+
+    // Add ARIA attributes for clickable element which is not a native HTML button
+    attributes = Object.assign({
+      role: 'button'
+    }, attributes);
+    this.tabIndex_ = props.tabIndex;
+    const el = createEl(tag, props, attributes);
+    if (!this.player_.options_.experimentalSvgIcons) {
+      el.appendChild(createEl('span', {
+        className: 'vjs-icon-placeholder'
+      }, {
+        'aria-hidden': true
+      }));
+    }
+    this.createControlTextEl(el);
+    return el;
+  }
+  dispose() {
+    // remove controlTextEl_ on dispose
+    this.controlTextEl_ = null;
+    super.dispose();
+  }
+
+  /**
+   * Create a control text element on this `ClickableComponent`
+   *
+   * @param {Element} [el]
+   *        Parent element for the control text.
+   *
+   * @return {Element}
+   *         The control text element that gets created.
+   */
+  createControlTextEl(el) {
+    this.controlTextEl_ = createEl('span', {
+      className: 'vjs-control-text'
+    }, {
+      // let the screen reader user know that the text of the element may change
+      'aria-live': 'polite'
+    });
+    if (el) {
+      el.appendChild(this.controlTextEl_);
+    }
+    this.controlText(this.controlText_, el);
+    return this.controlTextEl_;
+  }
+
+  /**
+   * Get or set the localize text to use for the controls on the `ClickableComponent`.
+   *
+   * @param {string} [text]
+   *        Control text for element.
+   *
+   * @param {Element} [el=this.el()]
+   *        Element to set the title on.
+   *
+   * @return {string}
+   *         - The control text when getting
+   */
+  controlText(text, el = this.el()) {
+    if (text === undefined) {
+      return this.controlText_ || 'Need Text';
+    }
+    const localizedText = this.localize(text);
+
+    /** @protected */
+    this.controlText_ = text;
+    textContent(this.controlTextEl_, localizedText);
+    if (!this.nonIconControl && !this.player_.options_.noUITitleAttributes) {
+      // Set title attribute if only an icon is shown
+      el.setAttribute('title', localizedText);
+    }
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-control vjs-button ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Enable this `ClickableComponent`
+   */
+  enable() {
+    if (!this.enabled_) {
+      this.enabled_ = true;
+      this.removeClass('vjs-disabled');
+      this.el_.setAttribute('aria-disabled', 'false');
+      if (typeof this.tabIndex_ !== 'undefined') {
+        this.el_.setAttribute('tabIndex', this.tabIndex_);
+      }
+      this.on(['tap', 'click'], this.handleClick_);
+      this.on('keydown', this.handleKeyDown_);
+    }
+  }
+
+  /**
+   * Disable this `ClickableComponent`
+   */
+  disable() {
+    this.enabled_ = false;
+    this.addClass('vjs-disabled');
+    this.el_.setAttribute('aria-disabled', 'true');
+    if (typeof this.tabIndex_ !== 'undefined') {
+      this.el_.removeAttribute('tabIndex');
+    }
+    this.off('mouseover', this.handleMouseOver_);
+    this.off('mouseout', this.handleMouseOut_);
+    this.off(['tap', 'click'], this.handleClick_);
+    this.off('keydown', this.handleKeyDown_);
+  }
+
+  /**
+   * Handles language change in ClickableComponent for the player in components
+   *
+   *
+   */
+  handleLanguagechange() {
+    this.controlText(this.controlText_);
+  }
+
+  /**
+   * Event handler that is called when a `ClickableComponent` receives a
+   * `click` or `tap` event.
+   *
+   * @param {Event} event
+   *        The `tap` or `click` event that caused this function to be called.
+   *
+   * @listens tap
+   * @listens click
+   * @abstract
+   */
+  handleClick(event) {
+    if (this.options_.clickHandler) {
+      this.options_.clickHandler.call(this, arguments);
+    }
+  }
+
+  /**
+   * Event handler that is called when a `ClickableComponent` receives a
+   * `keydown` event.
+   *
+   * By default, if the key is Space or Enter, it will trigger a `click` event.
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Support Space or Enter key operation to fire a click event. Also,
+    // prevent the event from propagating through the DOM and triggering
+    // Player hotkeys.
+    if (keycode__default["default"].isEventKey(event, 'Space') || keycode__default["default"].isEventKey(event, 'Enter')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.trigger('click');
+    } else {
+      // Pass keypress handling up for unsupported keys
+      super.handleKeyDown(event);
+    }
+  }
+}
+Component$1.registerComponent('ClickableComponent', ClickableComponent);
+
+/**
+ * @file poster-image.js
+ */
+
+/**
+ * A `ClickableComponent` that handles showing the poster image for the player.
+ *
+ * @extends ClickableComponent
+ */
+class PosterImage extends ClickableComponent {
+  /**
+   * Create an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should attach to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.update();
+    this.update_ = e => this.update(e);
+    player.on('posterchange', this.update_);
+  }
+
+  /**
+   * Clean up and dispose of the `PosterImage`.
+   */
+  dispose() {
+    this.player().off('posterchange', this.update_);
+    super.dispose();
+  }
+
+  /**
+   * Create the `PosterImage`s DOM element.
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl() {
+    // The el is an empty div to keep position in the DOM
+    // A picture and img el will be inserted when a source is set
+    return createEl('div', {
+      className: 'vjs-poster'
+    });
+  }
+
+  /**
+   * Get or set the `PosterImage`'s crossOrigin option.
+   *
+   * @param {string|null} [value]
+   *        The value to set the crossOrigin to. If an argument is
+   *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+   *
+   * @return {string|null}
+   *         - The current crossOrigin value of the `Player` when getting.
+   *         - undefined when setting
+   */
+  crossOrigin(value) {
+    // `null` can be set to unset a value
+    if (typeof value === 'undefined') {
+      if (this.$('img')) {
+        // If the poster's element exists, give its value
+        return this.$('img').crossOrigin;
+      } else if (this.player_.tech_ && this.player_.tech_.isReady_) {
+        // If not but the tech is ready, query the tech
+        return this.player_.crossOrigin();
+      }
+      // Otherwise check options as the  poster is usually set before the state of crossorigin
+      // can be retrieved by the getter
+      return this.player_.options_.crossOrigin || this.player_.options_.crossorigin || null;
+    }
+    if (value !== null && value !== 'anonymous' && value !== 'use-credentials') {
+      this.player_.log.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${value}"`);
+      return;
+    }
+    if (this.$('img')) {
+      this.$('img').crossOrigin = value;
+    }
+    return;
+  }
+
+  /**
+   * An {@link EventTarget~EventListener} for {@link Player#posterchange} events.
+   *
+   * @listens Player#posterchange
+   *
+   * @param {Event} [event]
+   *        The `Player#posterchange` event that triggered this function.
+   */
+  update(event) {
+    const url = this.player().poster();
+    this.setSrc(url);
+
+    // If there's no poster source we should display:none on this component
+    // so it's not still clickable or right-clickable
+    if (url) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  /**
+   * Set the source of the `PosterImage` depending on the display method. (Re)creates
+   * the inner picture and img elementss when needed.
+   *
+   * @param {string} [url]
+   *        The URL to the source for the `PosterImage`. If not specified or falsy,
+   *        any source and ant inner picture/img are removed.
+   */
+  setSrc(url) {
+    if (!url) {
+      this.el_.textContent = '';
+      return;
+    }
+    if (!this.$('img')) {
+      this.el_.appendChild(createEl('picture', {
+        className: 'vjs-poster',
+        // Don't want poster to be tabbable.
+        tabIndex: -1
+      }, {}, createEl('img', {
+        loading: 'lazy',
+        crossOrigin: this.crossOrigin()
+      }, {
+        alt: ''
+      })));
+    }
+    this.$('img').src = url;
+  }
+
+  /**
+   * An {@link EventTarget~EventListener} for clicks on the `PosterImage`. See
+   * {@link ClickableComponent#handleClick} for instances where this will be triggered.
+   *
+   * @listens tap
+   * @listens click
+   * @listens keydown
+   *
+   * @param {Event} event
+   +        The `click`, `tap` or `keydown` event that caused this function to be called.
+   */
+  handleClick(event) {
+    // We don't want a click to trigger playback when controls are disabled
+    if (!this.player_.controls()) {
+      return;
+    }
+    if (this.player_.tech(true)) {
+      this.player_.tech(true).focus();
+    }
+    if (this.player_.paused()) {
+      silencePromise(this.player_.play());
+    } else {
+      this.player_.pause();
+    }
+  }
+}
+
+/**
+ * Get or set the `PosterImage`'s crossorigin option. For the HTML5 player, this
+ * sets the `crossOrigin` property on the `<img>` tag to control the CORS
+ * behavior.
+ *
+ * @param {string|null} [value]
+ *        The value to set the `PosterImages`'s crossorigin to. If an argument is
+ *        given, must be one of `anonymous` or `use-credentials`.
+ *
+ * @return {string|null|undefined}
+ *         - The current crossorigin value of the `Player` when getting.
+ *         - undefined when setting
+ */
+PosterImage.prototype.crossorigin = PosterImage.prototype.crossOrigin;
+Component$1.registerComponent('PosterImage', PosterImage);
+
+/**
+ * @file text-track-display.js
+ */
+const darkGray = '#222';
+const lightGray = '#ccc';
+const fontMap = {
+  monospace: 'monospace',
+  sansSerif: 'sans-serif',
+  serif: 'serif',
+  monospaceSansSerif: '"Andale Mono", "Lucida Console", monospace',
+  monospaceSerif: '"Courier New", monospace',
+  proportionalSansSerif: 'sans-serif',
+  proportionalSerif: 'serif',
+  casual: '"Comic Sans MS", Impact, fantasy',
+  script: '"Monotype Corsiva", cursive',
+  smallcaps: '"Andale Mono", "Lucida Console", monospace, sans-serif'
+};
+
+/**
+ * Construct an rgba color from a given hex color code.
+ *
+ * @param {number} color
+ *        Hex number for color, like #f0e or #f604e2.
+ *
+ * @param {number} opacity
+ *        Value for opacity, 0.0 - 1.0.
+ *
+ * @return {string}
+ *         The rgba color that was created, like 'rgba(255, 0, 0, 0.3)'.
+ */
+function constructColor(color, opacity) {
+  let hex;
+  if (color.length === 4) {
+    // color looks like "#f0e"
+    hex = color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+  } else if (color.length === 7) {
+    // color looks like "#f604e2"
+    hex = color.slice(1);
+  } else {
+    throw new Error('Invalid color code provided, ' + color + '; must be formatted as e.g. #f0e or #f604e2.');
+  }
+  return 'rgba(' + parseInt(hex.slice(0, 2), 16) + ',' + parseInt(hex.slice(2, 4), 16) + ',' + parseInt(hex.slice(4, 6), 16) + ',' + opacity + ')';
+}
+
+/**
+ * Try to update the style of a DOM element. Some style changes will throw an error,
+ * particularly in IE8. Those should be noops.
+ *
+ * @param {Element} el
+ *        The DOM element to be styled.
+ *
+ * @param {string} style
+ *        The CSS property on the element that should be styled.
+ *
+ * @param {string} rule
+ *        The style rule that should be applied to the property.
+ *
+ * @private
+ */
+function tryUpdateStyle(el, style, rule) {
+  try {
+    el.style[style] = rule;
+  } catch (e) {
+    // Satisfies linter.
+    return;
+  }
+}
+
+/**
+ * Converts the CSS top/right/bottom/left property numeric value to string in pixels.
+ *
+ * @param {number} position
+ *        The CSS top/right/bottom/left property value.
+ *
+ * @return {string}
+ *          The CSS property value that was created, like '10px'.
+ *
+ * @private
+ */
+function getCSSPositionValue(position) {
+  return position ? `${position}px` : '';
+}
+
+/**
+ * The component for displaying text track cues.
+ *
+ * @extends Component
+ */
+class TextTrackDisplay extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Function} [ready]
+   *        The function to call when `TextTrackDisplay` is ready.
+   */
+  constructor(player, options, ready) {
+    super(player, options, ready);
+    const updateDisplayTextHandler = e => this.updateDisplay(e);
+    const updateDisplayHandler = e => {
+      this.updateDisplayOverlay();
+      this.updateDisplay(e);
+    };
+    player.on('loadstart', e => this.toggleDisplay(e));
+    player.on('texttrackchange', updateDisplayTextHandler);
+    player.on('loadedmetadata', e => {
+      this.updateDisplayOverlay();
+      this.preselectTrack(e);
+    });
+
+    // This used to be called during player init, but was causing an error
+    // if a track should show by default and the display hadn't loaded yet.
+    // Should probably be moved to an external track loader when we support
+    // tracks that don't need a display.
+    player.ready(bind_(this, function () {
+      if (player.tech_ && player.tech_.featuresNativeTextTracks) {
+        this.hide();
+        return;
+      }
+      player.on('fullscreenchange', updateDisplayHandler);
+      player.on('playerresize', updateDisplayHandler);
+      const screenOrientation = window__default["default"].screen.orientation || window__default["default"];
+      const changeOrientationEvent = window__default["default"].screen.orientation ? 'change' : 'orientationchange';
+      screenOrientation.addEventListener(changeOrientationEvent, updateDisplayHandler);
+      player.on('dispose', () => screenOrientation.removeEventListener(changeOrientationEvent, updateDisplayHandler));
+      const tracks = this.options_.playerOptions.tracks || [];
+      for (let i = 0; i < tracks.length; i++) {
+        this.player_.addRemoteTextTrack(tracks[i], true);
+      }
+      this.preselectTrack();
+    }));
+  }
+
+  /**
+  * Preselect a track following this precedence:
+  * - matches the previously selected {@link TextTrack}'s language and kind
+  * - matches the previously selected {@link TextTrack}'s language only
+  * - is the first default captions track
+  * - is the first default descriptions track
+  *
+  * @listens Player#loadstart
+  */
+  preselectTrack() {
+    const modes = {
+      captions: 1,
+      subtitles: 1
+    };
+    const trackList = this.player_.textTracks();
+    const userPref = this.player_.cache_.selectedLanguage;
+    let firstDesc;
+    let firstCaptions;
+    let preferredTrack;
+    for (let i = 0; i < trackList.length; i++) {
+      const track = trackList[i];
+      if (userPref && userPref.enabled && userPref.language && userPref.language === track.language && track.kind in modes) {
+        // Always choose the track that matches both language and kind
+        if (track.kind === userPref.kind) {
+          preferredTrack = track;
+          // or choose the first track that matches language
+        } else if (!preferredTrack) {
+          preferredTrack = track;
+        }
+
+        // clear everything if offTextTrackMenuItem was clicked
+      } else if (userPref && !userPref.enabled) {
+        preferredTrack = null;
+        firstDesc = null;
+        firstCaptions = null;
+      } else if (track.default) {
+        if (track.kind === 'descriptions' && !firstDesc) {
+          firstDesc = track;
+        } else if (track.kind in modes && !firstCaptions) {
+          firstCaptions = track;
+        }
+      }
+    }
+
+    // The preferredTrack matches the user preference and takes
+    // precedence over all the other tracks.
+    // So, display the preferredTrack before the first default track
+    // and the subtitles/captions track before the descriptions track
+    if (preferredTrack) {
+      preferredTrack.mode = 'showing';
+    } else if (firstCaptions) {
+      firstCaptions.mode = 'showing';
+    } else if (firstDesc) {
+      firstDesc.mode = 'showing';
+    }
+  }
+
+  /**
+   * Turn display of {@link TextTrack}'s from the current state into the other state.
+   * There are only two states:
+   * - 'shown'
+   * - 'hidden'
+   *
+   * @listens Player#loadstart
+   */
+  toggleDisplay() {
+    if (this.player_.tech_ && this.player_.tech_.featuresNativeTextTracks) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  /**
+   * Create the {@link Component}'s DOM element.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-text-track-display'
+    }, {
+      'translate': 'yes',
+      'aria-live': 'off',
+      'aria-atomic': 'true'
+    });
+  }
+
+  /**
+   * Clear all displayed {@link TextTrack}s.
+   */
+  clearDisplay() {
+    if (typeof window__default["default"].WebVTT === 'function') {
+      window__default["default"].WebVTT.processCues(window__default["default"], [], this.el_);
+    }
+  }
+
+  /**
+   * Update the displayed TextTrack when a either a {@link Player#texttrackchange} or
+   * a {@link Player#fullscreenchange} is fired.
+   *
+   * @listens Player#texttrackchange
+   * @listens Player#fullscreenchange
+   */
+  updateDisplay() {
+    const tracks = this.player_.textTracks();
+    const allowMultipleShowingTracks = this.options_.allowMultipleShowingTracks;
+    this.clearDisplay();
+    if (allowMultipleShowingTracks) {
+      const showingTracks = [];
+      for (let i = 0; i < tracks.length; ++i) {
+        const track = tracks[i];
+        if (track.mode !== 'showing') {
+          continue;
+        }
+        showingTracks.push(track);
+      }
+      this.updateForTrack(showingTracks);
+      return;
+    }
+
+    //  Track display prioritization model: if multiple tracks are 'showing',
+    //  display the first 'subtitles' or 'captions' track which is 'showing',
+    //  otherwise display the first 'descriptions' track which is 'showing'
+
+    let descriptionsTrack = null;
+    let captionsSubtitlesTrack = null;
+    let i = tracks.length;
+    while (i--) {
+      const track = tracks[i];
+      if (track.mode === 'showing') {
+        if (track.kind === 'descriptions') {
+          descriptionsTrack = track;
+        } else {
+          captionsSubtitlesTrack = track;
+        }
+      }
+    }
+    if (captionsSubtitlesTrack) {
+      if (this.getAttribute('aria-live') !== 'off') {
+        this.setAttribute('aria-live', 'off');
+      }
+      this.updateForTrack(captionsSubtitlesTrack);
+    } else if (descriptionsTrack) {
+      if (this.getAttribute('aria-live') !== 'assertive') {
+        this.setAttribute('aria-live', 'assertive');
+      }
+      this.updateForTrack(descriptionsTrack);
+    }
+  }
+
+  /**
+   * Updates the displayed TextTrack to be sure it overlays the video when a either
+   * a {@link Player#texttrackchange} or a {@link Player#fullscreenchange} is fired.
+   */
+  updateDisplayOverlay() {
+    // inset-inline and inset-block are not supprted on old chrome, but these are
+    // only likely to be used on TV devices
+    if (!this.player_.videoHeight() || !window__default["default"].CSS.supports('inset-inline: 10px')) {
+      return;
+    }
+    const playerWidth = this.player_.currentWidth();
+    const playerHeight = this.player_.currentHeight();
+    const playerAspectRatio = playerWidth / playerHeight;
+    const videoAspectRatio = this.player_.videoWidth() / this.player_.videoHeight();
+    let insetInlineMatch = 0;
+    let insetBlockMatch = 0;
+    if (Math.abs(playerAspectRatio - videoAspectRatio) > 0.1) {
+      if (playerAspectRatio > videoAspectRatio) {
+        insetInlineMatch = Math.round((playerWidth - playerHeight * videoAspectRatio) / 2);
+      } else {
+        insetBlockMatch = Math.round((playerHeight - playerWidth / videoAspectRatio) / 2);
+      }
+    }
+    tryUpdateStyle(this.el_, 'insetInline', getCSSPositionValue(insetInlineMatch));
+    tryUpdateStyle(this.el_, 'insetBlock', getCSSPositionValue(insetBlockMatch));
+  }
+
+  /**
+   * Style {@Link TextTrack} activeCues according to {@Link TextTrackSettings}.
+   *
+   * @param {TextTrack} track
+   *        Text track object containing active cues to style.
+   */
+  updateDisplayState(track) {
+    const overrides = this.player_.textTrackSettings.getValues();
+    const cues = track.activeCues;
+    let i = cues.length;
+    while (i--) {
+      const cue = cues[i];
+      if (!cue) {
+        continue;
+      }
+      const cueDiv = cue.displayState;
+      if (overrides.color) {
+        cueDiv.firstChild.style.color = overrides.color;
+      }
+      if (overrides.textOpacity) {
+        tryUpdateStyle(cueDiv.firstChild, 'color', constructColor(overrides.color || '#fff', overrides.textOpacity));
+      }
+      if (overrides.backgroundColor) {
+        cueDiv.firstChild.style.backgroundColor = overrides.backgroundColor;
+      }
+      if (overrides.backgroundOpacity) {
+        tryUpdateStyle(cueDiv.firstChild, 'backgroundColor', constructColor(overrides.backgroundColor || '#000', overrides.backgroundOpacity));
+      }
+      if (overrides.windowColor) {
+        if (overrides.windowOpacity) {
+          tryUpdateStyle(cueDiv, 'backgroundColor', constructColor(overrides.windowColor, overrides.windowOpacity));
+        } else {
+          cueDiv.style.backgroundColor = overrides.windowColor;
+        }
+      }
+      if (overrides.edgeStyle) {
+        if (overrides.edgeStyle === 'dropshadow') {
+          cueDiv.firstChild.style.textShadow = `2px 2px 3px ${darkGray}, 2px 2px 4px ${darkGray}, 2px 2px 5px ${darkGray}`;
+        } else if (overrides.edgeStyle === 'raised') {
+          cueDiv.firstChild.style.textShadow = `1px 1px ${darkGray}, 2px 2px ${darkGray}, 3px 3px ${darkGray}`;
+        } else if (overrides.edgeStyle === 'depressed') {
+          cueDiv.firstChild.style.textShadow = `1px 1px ${lightGray}, 0 1px ${lightGray}, -1px -1px ${darkGray}, 0 -1px ${darkGray}`;
+        } else if (overrides.edgeStyle === 'uniform') {
+          cueDiv.firstChild.style.textShadow = `0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}`;
+        }
+      }
+      if (overrides.fontPercent && overrides.fontPercent !== 1) {
+        const fontSize = window__default["default"].parseFloat(cueDiv.style.fontSize);
+        cueDiv.style.fontSize = fontSize * overrides.fontPercent + 'px';
+        cueDiv.style.height = 'auto';
+        cueDiv.style.top = 'auto';
+      }
+      if (overrides.fontFamily && overrides.fontFamily !== 'default') {
+        if (overrides.fontFamily === 'small-caps') {
+          cueDiv.firstChild.style.fontVariant = 'small-caps';
+        } else {
+          cueDiv.firstChild.style.fontFamily = fontMap[overrides.fontFamily];
+        }
+      }
+    }
+  }
+
+  /**
+   * Add an {@link TextTrack} to to the {@link Tech}s {@link TextTrackList}.
+   *
+   * @param {TextTrack|TextTrack[]} tracks
+   *        Text track object or text track array to be added to the list.
+   */
+  updateForTrack(tracks) {
+    if (!Array.isArray(tracks)) {
+      tracks = [tracks];
+    }
+    if (typeof window__default["default"].WebVTT !== 'function' || tracks.every(track => {
+      return !track.activeCues;
+    })) {
+      return;
+    }
+    const cues = [];
+
+    // push all active track cues
+    for (let i = 0; i < tracks.length; ++i) {
+      const track = tracks[i];
+      for (let j = 0; j < track.activeCues.length; ++j) {
+        cues.push(track.activeCues[j]);
+      }
+    }
+
+    // removes all cues before it processes new ones
+    window__default["default"].WebVTT.processCues(window__default["default"], cues, this.el_);
+
+    // add unique class to each language text track & add settings styling if necessary
+    for (let i = 0; i < tracks.length; ++i) {
+      const track = tracks[i];
+      for (let j = 0; j < track.activeCues.length; ++j) {
+        const cueEl = track.activeCues[j].displayState;
+        addClass(cueEl, 'vjs-text-track-cue', 'vjs-text-track-cue-' + (track.language ? track.language : i));
+        if (track.language) {
+          setAttribute(cueEl, 'lang', track.language);
+        }
+      }
+      if (this.player_.textTrackSettings) {
+        this.updateDisplayState(track);
+      }
+    }
+  }
+}
+Component$1.registerComponent('TextTrackDisplay', TextTrackDisplay);
+
+/**
+ * @file loading-spinner.js
+ */
+
+/**
+ * A loading spinner for use during waiting/loading events.
+ *
+ * @extends Component
+ */
+class LoadingSpinner extends Component$1 {
+  /**
+   * Create the `LoadingSpinner`s DOM element.
+   *
+   * @return {Element}
+   *         The dom element that gets created.
+   */
+  createEl() {
+    const isAudio = this.player_.isAudio();
+    const playerType = this.localize(isAudio ? 'Audio Player' : 'Video Player');
+    const controlText = createEl('span', {
+      className: 'vjs-control-text',
+      textContent: this.localize('{1} is loading.', [playerType])
+    });
+    const el = super.createEl('div', {
+      className: 'vjs-loading-spinner',
+      dir: 'ltr'
+    });
+    el.appendChild(controlText);
+    return el;
+  }
+
+  /**
+   * Update control text on languagechange
+   */
+  handleLanguagechange() {
+    this.$('.vjs-control-text').textContent = this.localize('{1} is loading.', [this.player_.isAudio() ? 'Audio Player' : 'Video Player']);
+  }
+}
+Component$1.registerComponent('LoadingSpinner', LoadingSpinner);
+
+/**
+ * @file button.js
+ */
+
+/**
+ * Base class for all buttons.
+ *
+ * @extends ClickableComponent
+ */
+class Button extends ClickableComponent {
+  /**
+   * Create the `Button`s DOM element.
+   *
+   * @param {string} [tag="button"]
+   *        The element's node type. This argument is IGNORED: no matter what
+   *        is passed, it will always create a `button` element.
+   *
+   * @param {Object} [props={}]
+   *        An object of properties that should be set on the element.
+   *
+   * @param {Object} [attributes={}]
+   *        An object of attributes that should be set on the element.
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl(tag, props = {}, attributes = {}) {
+    tag = 'button';
+    props = Object.assign({
+      className: this.buildCSSClass()
+    }, props);
+
+    // Add attributes for button element
+    attributes = Object.assign({
+      // Necessary since the default button type is "submit"
+      type: 'button'
+    }, attributes);
+    const el = createEl(tag, props, attributes);
+    if (!this.player_.options_.experimentalSvgIcons) {
+      el.appendChild(createEl('span', {
+        className: 'vjs-icon-placeholder'
+      }, {
+        'aria-hidden': true
+      }));
+    }
+    this.createControlTextEl(el);
+    return el;
+  }
+
+  /**
+   * Add a child `Component` inside of this `Button`.
+   *
+   * @param {string|Component} child
+   *        The name or instance of a child to add.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of options that will get passed to children of
+   *        the child.
+   *
+   * @return {Component}
+   *         The `Component` that gets added as a child. When using a string the
+   *         `Component` will get created by this process.
+   *
+   * @deprecated since version 5
+   */
+  addChild(child, options = {}) {
+    const className = this.constructor.name;
+    log$1.warn(`Adding an actionable (user controllable) child to a Button (${className}) is not supported; use a ClickableComponent instead.`);
+
+    // Avoid the error message generated by ClickableComponent's addChild method
+    return Component$1.prototype.addChild.call(this, child, options);
+  }
+
+  /**
+   * Enable the `Button` element so that it can be activated or clicked. Use this with
+   * {@link Button#disable}.
+   */
+  enable() {
+    super.enable();
+    this.el_.removeAttribute('disabled');
+  }
+
+  /**
+   * Disable the `Button` element so that it cannot be activated or clicked. Use this with
+   * {@link Button#enable}.
+   */
+  disable() {
+    super.disable();
+    this.el_.setAttribute('disabled', 'disabled');
+  }
+
+  /**
+   * This gets called when a `Button` has focus and `keydown` is triggered via a key
+   * press.
+   *
+   * @param {KeyboardEvent} event
+   *        The event that caused this function to get called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Ignore Space or Enter key operation, which is handled by the browser for
+    // a button - though not for its super class, ClickableComponent. Also,
+    // prevent the event from propagating through the DOM and triggering Player
+    // hotkeys. We do not preventDefault here because we _want_ the browser to
+    // handle it.
+    if (keycode__default["default"].isEventKey(event, 'Space') || keycode__default["default"].isEventKey(event, 'Enter')) {
+      event.stopPropagation();
+      return;
+    }
+
+    // Pass keypress handling up for unsupported keys
+    super.handleKeyDown(event);
+  }
+}
+Component$1.registerComponent('Button', Button);
+
+/**
+ * @file big-play-button.js
+ */
+
+/**
+ * The initial play button that shows before the video has played. The hiding of the
+ * `BigPlayButton` get done via CSS and `Player` states.
+ *
+ * @extends Button
+ */
+class BigPlayButton extends Button {
+  constructor(player, options) {
+    super(player, options);
+    this.mouseused_ = false;
+    this.setIcon('play');
+    this.on('mousedown', e => this.handleMouseDown(e));
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object. Always returns 'vjs-big-play-button'.
+   */
+  buildCSSClass() {
+    return 'vjs-big-play-button';
+  }
+
+  /**
+   * This gets called when a `BigPlayButton` "clicked". See {@link ClickableComponent}
+   * for more detailed information on what a click can be.
+   *
+   * @param {KeyboardEvent|MouseEvent|TouchEvent} event
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    const playPromise = this.player_.play();
+
+    // exit early if clicked via the mouse
+    if (this.mouseused_ && 'clientX' in event && 'clientY' in event) {
+      silencePromise(playPromise);
+      if (this.player_.tech(true)) {
+        this.player_.tech(true).focus();
+      }
+      return;
+    }
+    const cb = this.player_.getChild('controlBar');
+    const playToggle = cb && cb.getChild('playToggle');
+    if (!playToggle) {
+      this.player_.tech(true).focus();
+      return;
+    }
+    const playFocus = () => playToggle.focus();
+    if (isPromise(playPromise)) {
+      playPromise.then(playFocus, () => {});
+    } else {
+      this.setTimeout(playFocus, 1);
+    }
+  }
+
+  /**
+   * Event handler that is called when a `BigPlayButton` receives a
+   * `keydown` event.
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    this.mouseused_ = false;
+    super.handleKeyDown(event);
+  }
+
+  /**
+   * Handle `mousedown` events on the `BigPlayButton`.
+   *
+   * @param {MouseEvent} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   */
+  handleMouseDown(event) {
+    this.mouseused_ = true;
+  }
+}
+
+/**
+ * The text that should display over the `BigPlayButton`s controls. Added to for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+BigPlayButton.prototype.controlText_ = 'Play Video';
+Component$1.registerComponent('BigPlayButton', BigPlayButton);
+
+/**
+ * @file close-button.js
+ */
+
+/**
+ * The `CloseButton` is a `{@link Button}` that fires a `close` event when
+ * it gets clicked.
+ *
+ * @extends Button
+ */
+class CloseButton extends Button {
+  /**
+  * Creates an instance of the this class.
+  *
+  * @param  { import('./player').default } player
+  *         The `Player` that this class should be attached to.
+  *
+  * @param  {Object} [options]
+  *         The key/value store of player options.
+  */
+  constructor(player, options) {
+    super(player, options);
+    this.setIcon('cancel');
+    this.controlText(options && options.controlText || this.localize('Close'));
+  }
+
+  /**
+  * Builds the default DOM `className`.
+  *
+  * @return {string}
+  *         The DOM `className` for this object.
+  */
+  buildCSSClass() {
+    return `vjs-close-button ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * This gets called when a `CloseButton` gets clicked. See
+   * {@link ClickableComponent#handleClick} for more information on when
+   * this will be triggered
+   *
+   * @param {Event} event
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   * @fires CloseButton#close
+   */
+  handleClick(event) {
+    /**
+     * Triggered when the a `CloseButton` is clicked.
+     *
+     * @event CloseButton#close
+     * @type {Event}
+     *
+     * @property {boolean} [bubbles=false]
+     *           set to false so that the close event does not
+     *           bubble up to parents if there is no listener
+     */
+    this.trigger({
+      type: 'close',
+      bubbles: false
+    });
+  }
+  /**
+   * Event handler that is called when a `CloseButton` receives a
+   * `keydown` event.
+   *
+   * By default, if the key is Esc, it will trigger a `click` event.
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Esc button will trigger `click` event
+    if (keycode__default["default"].isEventKey(event, 'Esc')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.trigger('click');
+    } else {
+      // Pass keypress handling up for unsupported keys
+      super.handleKeyDown(event);
+    }
+  }
+}
+Component$1.registerComponent('CloseButton', CloseButton);
+
+/**
+ * @file play-toggle.js
+ */
+
+/**
+ * Button to toggle between play and pause.
+ *
+ * @extends Button
+ */
+class PlayToggle extends Button {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of player options.
+   */
+  constructor(player, options = {}) {
+    super(player, options);
+
+    // show or hide replay icon
+    options.replay = options.replay === undefined || options.replay;
+    this.setIcon('play');
+    this.on(player, 'play', e => this.handlePlay(e));
+    this.on(player, 'pause', e => this.handlePause(e));
+    if (options.replay) {
+      this.on(player, 'ended', e => this.handleEnded(e));
+    }
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-play-control ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * This gets called when an `PlayToggle` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    if (this.player_.paused()) {
+      silencePromise(this.player_.play());
+    } else {
+      this.player_.pause();
+    }
+  }
+
+  /**
+   * This gets called once after the video has ended and the user seeks so that
+   * we can change the replay button back to a play button.
+   *
+   * @param {Event} [event]
+   *        The event that caused this function to run.
+   *
+   * @listens Player#seeked
+   */
+  handleSeeked(event) {
+    this.removeClass('vjs-ended');
+    if (this.player_.paused()) {
+      this.handlePause(event);
+    } else {
+      this.handlePlay(event);
+    }
+  }
+
+  /**
+   * Add the vjs-playing class to the element so it can change appearance.
+   *
+   * @param {Event} [event]
+   *        The event that caused this function to run.
+   *
+   * @listens Player#play
+   */
+  handlePlay(event) {
+    this.removeClass('vjs-ended', 'vjs-paused');
+    this.addClass('vjs-playing');
+    // change the button text to "Pause"
+    this.setIcon('pause');
+    this.controlText('Pause');
+  }
+
+  /**
+   * Add the vjs-paused class to the element so it can change appearance.
+   *
+   * @param {Event} [event]
+   *        The event that caused this function to run.
+   *
+   * @listens Player#pause
+   */
+  handlePause(event) {
+    this.removeClass('vjs-playing');
+    this.addClass('vjs-paused');
+    // change the button text to "Play"
+    this.setIcon('play');
+    this.controlText('Play');
+  }
+
+  /**
+   * Add the vjs-ended class to the element so it can change appearance
+   *
+   * @param {Event} [event]
+   *        The event that caused this function to run.
+   *
+   * @listens Player#ended
+   */
+  handleEnded(event) {
+    this.removeClass('vjs-playing');
+    this.addClass('vjs-ended');
+    // change the button text to "Replay"
+    this.setIcon('replay');
+    this.controlText('Replay');
+
+    // on the next seek remove the replay button
+    this.one(this.player_, 'seeked', e => this.handleSeeked(e));
+  }
+}
+
+/**
+ * The text that should display over the `PlayToggle`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+PlayToggle.prototype.controlText_ = 'Play';
+Component$1.registerComponent('PlayToggle', PlayToggle);
+
+/**
+ * @file time-display.js
+ */
+
+/**
+ * Displays time information about the video
+ *
+ * @extends Component
+ */
+class TimeDisplay extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.on(player, ['timeupdate', 'ended', 'seeking'], e => this.update(e));
+    this.updateTextNode_();
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const className = this.buildCSSClass();
+    const el = super.createEl('div', {
+      className: `${className} vjs-time-control vjs-control`
+    });
+    const span = createEl('span', {
+      className: 'vjs-control-text',
+      textContent: `${this.localize(this.labelText_)}\u00a0`
+    }, {
+      role: 'presentation'
+    });
+    el.appendChild(span);
+    this.contentEl_ = createEl('span', {
+      className: `${className}-display`
+    }, {
+      // span elements have no implicit role, but some screen readers (notably VoiceOver)
+      // treat them as a break between items in the DOM when using arrow keys
+      // (or left-to-right swipes on iOS) to read contents of a page. Using
+      // role='presentation' causes VoiceOver to NOT treat this span as a break.
+      role: 'presentation'
+    });
+    el.appendChild(this.contentEl_);
+    return el;
+  }
+  dispose() {
+    this.contentEl_ = null;
+    this.textNode_ = null;
+    super.dispose();
+  }
+
+  /**
+   * Updates the displayed time according to the `updateContent` function which is defined in the child class.
+   *
+   * @param {Event} [event]
+   *          The `timeupdate`, `ended` or `seeking` (if enableSmoothSeeking is true) event that caused this function to be called.
+   */
+  update(event) {
+    if (!this.player_.options_.enableSmoothSeeking && event.type === 'seeking') {
+      return;
+    }
+    this.updateContent(event);
+  }
+
+  /**
+   * Updates the time display text node with a new time
+   *
+   * @param {number} [time=0] the time to update to
+   *
+   * @private
+   */
+  updateTextNode_(time = 0) {
+    time = formatTime(time);
+    if (this.formattedTime_ === time) {
+      return;
+    }
+    this.formattedTime_ = time;
+    this.requestNamedAnimationFrame('TimeDisplay#updateTextNode_', () => {
+      if (!this.contentEl_) {
+        return;
+      }
+      let oldNode = this.textNode_;
+      if (oldNode && this.contentEl_.firstChild !== oldNode) {
+        oldNode = null;
+        log$1.warn('TimeDisplay#updateTextnode_: Prevented replacement of text node element since it was no longer a child of this node. Appending a new node instead.');
+      }
+      this.textNode_ = document__default["default"].createTextNode(this.formattedTime_);
+      if (!this.textNode_) {
+        return;
+      }
+      if (oldNode) {
+        this.contentEl_.replaceChild(this.textNode_, oldNode);
+      } else {
+        this.contentEl_.appendChild(this.textNode_);
+      }
+    });
+  }
+
+  /**
+   * To be filled out in the child class, should update the displayed time
+   * in accordance with the fact that the current time has changed.
+   *
+   * @param {Event} [event]
+   *        The `timeupdate`  event that caused this to run.
+   *
+   * @listens Player#timeupdate
+   */
+  updateContent(event) {}
+}
+
+/**
+ * The text that is added to the `TimeDisplay` for screen reader users.
+ *
+ * @type {string}
+ * @private
+ */
+TimeDisplay.prototype.labelText_ = 'Time';
+
+/**
+ * The text that should display over the `TimeDisplay`s controls. Added to for localization.
+ *
+ * @type {string}
+ * @protected
+ *
+ * @deprecated in v7; controlText_ is not used in non-active display Components
+ */
+TimeDisplay.prototype.controlText_ = 'Time';
+Component$1.registerComponent('TimeDisplay', TimeDisplay);
+
+/**
+ * @file current-time-display.js
+ */
+
+/**
+ * Displays the current time
+ *
+ * @extends Component
+ */
+class CurrentTimeDisplay extends TimeDisplay {
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return 'vjs-current-time';
+  }
+
+  /**
+   * Update current time display
+   *
+   * @param {Event} [event]
+   *        The `timeupdate` event that caused this function to run.
+   *
+   * @listens Player#timeupdate
+   */
+  updateContent(event) {
+    // Allows for smooth scrubbing, when player can't keep up.
+    let time;
+    if (this.player_.ended()) {
+      time = this.player_.duration();
+    } else {
+      time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+    }
+    this.updateTextNode_(time);
+  }
+}
+
+/**
+ * The text that is added to the `CurrentTimeDisplay` for screen reader users.
+ *
+ * @type {string}
+ * @private
+ */
+CurrentTimeDisplay.prototype.labelText_ = 'Current Time';
+
+/**
+ * The text that should display over the `CurrentTimeDisplay`s controls. Added to for localization.
+ *
+ * @type {string}
+ * @protected
+ *
+ * @deprecated in v7; controlText_ is not used in non-active display Components
+ */
+CurrentTimeDisplay.prototype.controlText_ = 'Current Time';
+Component$1.registerComponent('CurrentTimeDisplay', CurrentTimeDisplay);
+
+/**
+ * @file duration-display.js
+ */
+
+/**
+ * Displays the duration
+ *
+ * @extends Component
+ */
+class DurationDisplay extends TimeDisplay {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    const updateContent = e => this.updateContent(e);
+
+    // we do not want to/need to throttle duration changes,
+    // as they should always display the changed duration as
+    // it has changed
+    this.on(player, 'durationchange', updateContent);
+
+    // Listen to loadstart because the player duration is reset when a new media element is loaded,
+    // but the durationchange on the user agent will not fire.
+    // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
+    this.on(player, 'loadstart', updateContent);
+
+    // Also listen for timeupdate (in the parent) and loadedmetadata because removing those
+    // listeners could have broken dependent applications/libraries. These
+    // can likely be removed for 7.0.
+    this.on(player, 'loadedmetadata', updateContent);
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return 'vjs-duration';
+  }
+
+  /**
+   * Update duration time display.
+   *
+   * @param {Event} [event]
+   *        The `durationchange`, `timeupdate`, or `loadedmetadata` event that caused
+   *        this function to be called.
+   *
+   * @listens Player#durationchange
+   * @listens Player#timeupdate
+   * @listens Player#loadedmetadata
+   */
+  updateContent(event) {
+    const duration = this.player_.duration();
+    this.updateTextNode_(duration);
+  }
+}
+
+/**
+ * The text that is added to the `DurationDisplay` for screen reader users.
+ *
+ * @type {string}
+ * @private
+ */
+DurationDisplay.prototype.labelText_ = 'Duration';
+
+/**
+ * The text that should display over the `DurationDisplay`s controls. Added to for localization.
+ *
+ * @type {string}
+ * @protected
+ *
+ * @deprecated in v7; controlText_ is not used in non-active display Components
+ */
+DurationDisplay.prototype.controlText_ = 'Duration';
+Component$1.registerComponent('DurationDisplay', DurationDisplay);
+
+/**
+ * @file time-divider.js
+ */
+
+/**
+ * The separator between the current time and duration.
+ * Can be hidden if it's not needed in the design.
+ *
+ * @extends Component
+ */
+class TimeDivider extends Component$1 {
+  /**
+   * Create the component's DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const el = super.createEl('div', {
+      className: 'vjs-time-control vjs-time-divider'
+    }, {
+      // this element and its contents can be hidden from assistive techs since
+      // it is made extraneous by the announcement of the control text
+      // for the current time and duration displays
+      'aria-hidden': true
+    });
+    const div = super.createEl('div');
+    const span = super.createEl('span', {
+      textContent: '/'
+    });
+    div.appendChild(span);
+    el.appendChild(div);
+    return el;
+  }
+}
+Component$1.registerComponent('TimeDivider', TimeDivider);
+
+/**
+ * @file remaining-time-display.js
+ */
+
+/**
+ * Displays the time left in the video
+ *
+ * @extends Component
+ */
+class RemainingTimeDisplay extends TimeDisplay {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.on(player, 'durationchange', e => this.updateContent(e));
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return 'vjs-remaining-time';
+  }
+
+  /**
+   * Create the `Component`'s DOM element with the "minus" character prepend to the time
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const el = super.createEl();
+    if (this.options_.displayNegative !== false) {
+      el.insertBefore(createEl('span', {}, {
+        'aria-hidden': true
+      }, '-'), this.contentEl_);
+    }
+    return el;
+  }
+
+  /**
+   * Update remaining time display.
+   *
+   * @param {Event} [event]
+   *        The `timeupdate` or `durationchange` event that caused this to run.
+   *
+   * @listens Player#timeupdate
+   * @listens Player#durationchange
+   */
+  updateContent(event) {
+    if (typeof this.player_.duration() !== 'number') {
+      return;
+    }
+    let time;
+
+    // @deprecated We should only use remainingTimeDisplay
+    // as of video.js 7
+    if (this.player_.ended()) {
+      time = 0;
+    } else if (this.player_.remainingTimeDisplay) {
+      time = this.player_.remainingTimeDisplay();
+    } else {
+      time = this.player_.remainingTime();
+    }
+    this.updateTextNode_(time);
+  }
+}
+
+/**
+ * The text that is added to the `RemainingTimeDisplay` for screen reader users.
+ *
+ * @type {string}
+ * @private
+ */
+RemainingTimeDisplay.prototype.labelText_ = 'Remaining Time';
+
+/**
+ * The text that should display over the `RemainingTimeDisplay`s controls. Added to for localization.
+ *
+ * @type {string}
+ * @protected
+ *
+ * @deprecated in v7; controlText_ is not used in non-active display Components
+ */
+RemainingTimeDisplay.prototype.controlText_ = 'Remaining Time';
+Component$1.registerComponent('RemainingTimeDisplay', RemainingTimeDisplay);
+
+/**
+ * @file live-display.js
+ */
+
+// TODO - Future make it click to snap to live
+
+/**
+ * Displays the live indicator when duration is Infinity.
+ *
+ * @extends Component
+ */
+class LiveDisplay extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.updateShowing();
+    this.on(this.player(), 'durationchange', e => this.updateShowing(e));
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const el = super.createEl('div', {
+      className: 'vjs-live-control vjs-control'
+    });
+    this.contentEl_ = createEl('div', {
+      className: 'vjs-live-display'
+    }, {
+      'aria-live': 'off'
+    });
+    this.contentEl_.appendChild(createEl('span', {
+      className: 'vjs-control-text',
+      textContent: `${this.localize('Stream Type')}\u00a0`
+    }));
+    this.contentEl_.appendChild(document__default["default"].createTextNode(this.localize('LIVE')));
+    el.appendChild(this.contentEl_);
+    return el;
+  }
+  dispose() {
+    this.contentEl_ = null;
+    super.dispose();
+  }
+
+  /**
+   * Check the duration to see if the LiveDisplay should be showing or not. Then show/hide
+   * it accordingly
+   *
+   * @param {Event} [event]
+   *        The {@link Player#durationchange} event that caused this function to run.
+   *
+   * @listens Player#durationchange
+   */
+  updateShowing(event) {
+    if (this.player().duration() === Infinity) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+}
+Component$1.registerComponent('LiveDisplay', LiveDisplay);
+
+/**
+ * @file seek-to-live.js
+ */
+
+/**
+ * Displays the live indicator when duration is Infinity.
+ *
+ * @extends Component
+ */
+class SeekToLive extends Button {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.updateLiveEdgeStatus();
+    if (this.player_.liveTracker) {
+      this.updateLiveEdgeStatusHandler_ = e => this.updateLiveEdgeStatus(e);
+      this.on(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
+    }
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const el = super.createEl('button', {
+      className: 'vjs-seek-to-live-control vjs-control'
+    });
+    this.setIcon('circle', el);
+    this.textEl_ = createEl('span', {
+      className: 'vjs-seek-to-live-text',
+      textContent: this.localize('LIVE')
+    }, {
+      'aria-hidden': 'true'
+    });
+    el.appendChild(this.textEl_);
+    return el;
+  }
+
+  /**
+   * Update the state of this button if we are at the live edge
+   * or not
+   */
+  updateLiveEdgeStatus() {
+    // default to live edge
+    if (!this.player_.liveTracker || this.player_.liveTracker.atLiveEdge()) {
+      this.setAttribute('aria-disabled', true);
+      this.addClass('vjs-at-live-edge');
+      this.controlText('Seek to live, currently playing live');
+    } else {
+      this.setAttribute('aria-disabled', false);
+      this.removeClass('vjs-at-live-edge');
+      this.controlText('Seek to live, currently behind live');
+    }
+  }
+
+  /**
+   * On click bring us as near to the live point as possible.
+   * This requires that we wait for the next `live-seekable-change`
+   * event which will happen every segment length seconds.
+   */
+  handleClick() {
+    this.player_.liveTracker.seekToLiveEdge();
+  }
+
+  /**
+   * Dispose of the element and stop tracking
+   */
+  dispose() {
+    if (this.player_.liveTracker) {
+      this.off(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
+    }
+    this.textEl_ = null;
+    super.dispose();
+  }
+}
+/**
+ * The text that should display over the `SeekToLive`s control. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+SeekToLive.prototype.controlText_ = 'Seek to live, currently playing live';
+Component$1.registerComponent('SeekToLive', SeekToLive);
+
+/**
+ * @file num.js
+ * @module num
+ */
+
+/**
+ * Keep a number between a min and a max value
+ *
+ * @param {number} number
+ *        The number to clamp
+ *
+ * @param {number} min
+ *        The minimum value
+ * @param {number} max
+ *        The maximum value
+ *
+ * @return {number}
+ *         the clamped number
+ */
+function clamp(number, min, max) {
+  number = Number(number);
+  return Math.min(max, Math.max(min, isNaN(number) ? min : number));
+}
+
+var Num = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  clamp: clamp
+});
+
+/**
+ * @file slider.js
+ */
+
+/**
+ * The base functionality for a slider. Can be vertical or horizontal.
+ * For instance the volume bar or the seek bar on a video is a slider.
+ *
+ * @extends Component
+ */
+class Slider extends Component$1 {
+  /**
+  * Create an instance of this class
+  *
+  * @param { import('../player').default } player
+  *        The `Player` that this class should be attached to.
+  *
+  * @param {Object} [options]
+  *        The key/value store of player options.
+  */
+  constructor(player, options) {
+    super(player, options);
+    this.handleMouseDown_ = e => this.handleMouseDown(e);
+    this.handleMouseUp_ = e => this.handleMouseUp(e);
+    this.handleKeyDown_ = e => this.handleKeyDown(e);
+    this.handleClick_ = e => this.handleClick(e);
+    this.handleMouseMove_ = e => this.handleMouseMove(e);
+    this.update_ = e => this.update(e);
+
+    // Set property names to bar to match with the child Slider class is looking for
+    this.bar = this.getChild(this.options_.barName);
+
+    // Set a horizontal or vertical class on the slider depending on the slider type
+    this.vertical(!!this.options_.vertical);
+    this.enable();
+  }
+
+  /**
+   * Are controls are currently enabled for this slider or not.
+   *
+   * @return {boolean}
+   *         true if controls are enabled, false otherwise
+   */
+  enabled() {
+    return this.enabled_;
+  }
+
+  /**
+   * Enable controls for this slider if they are disabled
+   */
+  enable() {
+    if (this.enabled()) {
+      return;
+    }
+    this.on('mousedown', this.handleMouseDown_);
+    this.on('touchstart', this.handleMouseDown_);
+    this.on('keydown', this.handleKeyDown_);
+    this.on('click', this.handleClick_);
+
+    // TODO: deprecated, controlsvisible does not seem to be fired
+    this.on(this.player_, 'controlsvisible', this.update);
+    if (this.playerEvent) {
+      this.on(this.player_, this.playerEvent, this.update);
+    }
+    this.removeClass('disabled');
+    this.setAttribute('tabindex', 0);
+    this.enabled_ = true;
+  }
+
+  /**
+   * Disable controls for this slider if they are enabled
+   */
+  disable() {
+    if (!this.enabled()) {
+      return;
+    }
+    const doc = this.bar.el_.ownerDocument;
+    this.off('mousedown', this.handleMouseDown_);
+    this.off('touchstart', this.handleMouseDown_);
+    this.off('keydown', this.handleKeyDown_);
+    this.off('click', this.handleClick_);
+    this.off(this.player_, 'controlsvisible', this.update_);
+    this.off(doc, 'mousemove', this.handleMouseMove_);
+    this.off(doc, 'mouseup', this.handleMouseUp_);
+    this.off(doc, 'touchmove', this.handleMouseMove_);
+    this.off(doc, 'touchend', this.handleMouseUp_);
+    this.removeAttribute('tabindex');
+    this.addClass('disabled');
+    if (this.playerEvent) {
+      this.off(this.player_, this.playerEvent, this.update);
+    }
+    this.enabled_ = false;
+  }
+
+  /**
+   * Create the `Slider`s DOM element.
+   *
+   * @param {string} type
+   *        Type of element to create.
+   *
+   * @param {Object} [props={}]
+   *        List of properties in Object form.
+   *
+   * @param {Object} [attributes={}]
+   *        list of attributes in Object form.
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl(type, props = {}, attributes = {}) {
+    // Add the slider element class to all sub classes
+    props.className = props.className + ' vjs-slider';
+    props = Object.assign({
+      tabIndex: 0
+    }, props);
+    attributes = Object.assign({
+      'role': 'slider',
+      'aria-valuenow': 0,
+      'aria-valuemin': 0,
+      'aria-valuemax': 100
+    }, attributes);
+    return super.createEl(type, props, attributes);
+  }
+
+  /**
+   * Handle `mousedown` or `touchstart` events on the `Slider`.
+   *
+   * @param {MouseEvent} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   * @listens touchstart
+   * @fires Slider#slideractive
+   */
+  handleMouseDown(event) {
+    const doc = this.bar.el_.ownerDocument;
+    if (event.type === 'mousedown') {
+      event.preventDefault();
+    }
+    // Do not call preventDefault() on touchstart in Chrome
+    // to avoid console warnings. Use a 'touch-action: none' style
+    // instead to prevent unintended scrolling.
+    // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+    if (event.type === 'touchstart' && !IS_CHROME) {
+      event.preventDefault();
+    }
+    blockTextSelection();
+    this.addClass('vjs-sliding');
+    /**
+     * Triggered when the slider is in an active state
+     *
+     * @event Slider#slideractive
+     * @type {MouseEvent}
+     */
+    this.trigger('slideractive');
+    this.on(doc, 'mousemove', this.handleMouseMove_);
+    this.on(doc, 'mouseup', this.handleMouseUp_);
+    this.on(doc, 'touchmove', this.handleMouseMove_);
+    this.on(doc, 'touchend', this.handleMouseUp_);
+    this.handleMouseMove(event, true);
+  }
+
+  /**
+   * Handle the `mousemove`, `touchmove`, and `mousedown` events on this `Slider`.
+   * The `mousemove` and `touchmove` events will only only trigger this function during
+   * `mousedown` and `touchstart`. This is due to {@link Slider#handleMouseDown} and
+   * {@link Slider#handleMouseUp}.
+   *
+   * @param {MouseEvent} event
+   *        `mousedown`, `mousemove`, `touchstart`, or `touchmove` event that triggered
+   *        this function
+   * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false.
+   *
+   * @listens mousemove
+   * @listens touchmove
+   */
+  handleMouseMove(event) {}
+
+  /**
+   * Handle `mouseup` or `touchend` events on the `Slider`.
+   *
+   * @param {MouseEvent} event
+   *        `mouseup` or `touchend` event that triggered this function.
+   *
+   * @listens touchend
+   * @listens mouseup
+   * @fires Slider#sliderinactive
+   */
+  handleMouseUp(event) {
+    const doc = this.bar.el_.ownerDocument;
+    unblockTextSelection();
+    this.removeClass('vjs-sliding');
+    /**
+     * Triggered when the slider is no longer in an active state.
+     *
+     * @event Slider#sliderinactive
+     * @type {Event}
+     */
+    this.trigger('sliderinactive');
+    this.off(doc, 'mousemove', this.handleMouseMove_);
+    this.off(doc, 'mouseup', this.handleMouseUp_);
+    this.off(doc, 'touchmove', this.handleMouseMove_);
+    this.off(doc, 'touchend', this.handleMouseUp_);
+    this.update();
+  }
+
+  /**
+   * Update the progress bar of the `Slider`.
+   *
+   * @return {number}
+   *          The percentage of progress the progress bar represents as a
+   *          number from 0 to 1.
+   */
+  update() {
+    // In VolumeBar init we have a setTimeout for update that pops and update
+    // to the end of the execution stack. The player is destroyed before then
+    // update will cause an error
+    // If there's no bar...
+    if (!this.el_ || !this.bar) {
+      return;
+    }
+
+    // clamp progress between 0 and 1
+    // and only round to four decimal places, as we round to two below
+    const progress = this.getProgress();
+    if (progress === this.progress_) {
+      return progress;
+    }
+    this.progress_ = progress;
+    this.requestNamedAnimationFrame('Slider#update', () => {
+      // Set the new bar width or height
+      const sizeKey = this.vertical() ? 'height' : 'width';
+
+      // Convert to a percentage for css value
+      this.bar.el().style[sizeKey] = (progress * 100).toFixed(2) + '%';
+    });
+    return progress;
+  }
+
+  /**
+   * Get the percentage of the bar that should be filled
+   * but clamped and rounded.
+   *
+   * @return {number}
+   *         percentage filled that the slider is
+   */
+  getProgress() {
+    return Number(clamp(this.getPercent(), 0, 1).toFixed(4));
+  }
+
+  /**
+   * Calculate distance for slider
+   *
+   * @param {Event} event
+   *        The event that caused this function to run.
+   *
+   * @return {number}
+   *         The current position of the Slider.
+   *         - position.x for vertical `Slider`s
+   *         - position.y for horizontal `Slider`s
+   */
+  calculateDistance(event) {
+    const position = getPointerPosition(this.el_, event);
+    if (this.vertical()) {
+      return position.y;
+    }
+    return position.x;
+  }
+
+  /**
+   * Handle a `keydown` event on the `Slider`. Watches for left, right, up, and down
+   * arrow keys. This function will only be called when the slider has focus. See
+   * {@link Slider#handleFocus} and {@link Slider#handleBlur}.
+   *
+   * @param {KeyboardEvent} event
+   *        the `keydown` event that caused this function to run.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Left and Down Arrows
+    if (keycode__default["default"].isEventKey(event, 'Left') || keycode__default["default"].isEventKey(event, 'Down')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.stepBack();
+
+      // Up and Right Arrows
+    } else if (keycode__default["default"].isEventKey(event, 'Right') || keycode__default["default"].isEventKey(event, 'Up')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.stepForward();
+    } else {
+      // Pass keydown handling up for unsupported keys
+      super.handleKeyDown(event);
+    }
+  }
+
+  /**
+   * Listener for click events on slider, used to prevent clicks
+   *   from bubbling up to parent elements like button menus.
+   *
+   * @param {Object} event
+   *        Event that caused this object to run
+   */
+  handleClick(event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  /**
+   * Get/set if slider is horizontal for vertical
+   *
+   * @param {boolean} [bool]
+   *        - true if slider is vertical,
+   *        - false is horizontal
+   *
+   * @return {boolean}
+   *         - true if slider is vertical, and getting
+   *         - false if the slider is horizontal, and getting
+   */
+  vertical(bool) {
+    if (bool === undefined) {
+      return this.vertical_ || false;
+    }
+    this.vertical_ = !!bool;
+    if (this.vertical_) {
+      this.addClass('vjs-slider-vertical');
+    } else {
+      this.addClass('vjs-slider-horizontal');
+    }
+  }
+}
+Component$1.registerComponent('Slider', Slider);
+
+/**
+ * @file load-progress-bar.js
+ */
+
+// get the percent width of a time compared to the total end
+const percentify = (time, end) => clamp(time / end * 100, 0, 100).toFixed(2) + '%';
+
+/**
+ * Shows loading progress
+ *
+ * @extends Component
+ */
+class LoadProgressBar extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.partEls_ = [];
+    this.on(player, 'progress', e => this.update(e));
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const el = super.createEl('div', {
+      className: 'vjs-load-progress'
+    });
+    const wrapper = createEl('span', {
+      className: 'vjs-control-text'
+    });
+    const loadedText = createEl('span', {
+      textContent: this.localize('Loaded')
+    });
+    const separator = document__default["default"].createTextNode(': ');
+    this.percentageEl_ = createEl('span', {
+      className: 'vjs-control-text-loaded-percentage',
+      textContent: '0%'
+    });
+    el.appendChild(wrapper);
+    wrapper.appendChild(loadedText);
+    wrapper.appendChild(separator);
+    wrapper.appendChild(this.percentageEl_);
+    return el;
+  }
+  dispose() {
+    this.partEls_ = null;
+    this.percentageEl_ = null;
+    super.dispose();
+  }
+
+  /**
+   * Update progress bar
+   *
+   * @param {Event} [event]
+   *        The `progress` event that caused this function to run.
+   *
+   * @listens Player#progress
+   */
+  update(event) {
+    this.requestNamedAnimationFrame('LoadProgressBar#update', () => {
+      const liveTracker = this.player_.liveTracker;
+      const buffered = this.player_.buffered();
+      const duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
+      const bufferedEnd = this.player_.bufferedEnd();
+      const children = this.partEls_;
+      const percent = percentify(bufferedEnd, duration);
+      if (this.percent_ !== percent) {
+        // update the width of the progress bar
+        this.el_.style.width = percent;
+        // update the control-text
+        textContent(this.percentageEl_, percent);
+        this.percent_ = percent;
+      }
+
+      // add child elements to represent the individual buffered time ranges
+      for (let i = 0; i < buffered.length; i++) {
+        const start = buffered.start(i);
+        const end = buffered.end(i);
+        let part = children[i];
+        if (!part) {
+          part = this.el_.appendChild(createEl());
+          children[i] = part;
+        }
+
+        //  only update if changed
+        if (part.dataset.start === start && part.dataset.end === end) {
+          continue;
+        }
+        part.dataset.start = start;
+        part.dataset.end = end;
+
+        // set the percent based on the width of the progress bar (bufferedEnd)
+        part.style.left = percentify(start, bufferedEnd);
+        part.style.width = percentify(end - start, bufferedEnd);
+      }
+
+      // remove unused buffered range elements
+      for (let i = children.length; i > buffered.length; i--) {
+        this.el_.removeChild(children[i - 1]);
+      }
+      children.length = buffered.length;
+    });
+  }
+}
+Component$1.registerComponent('LoadProgressBar', LoadProgressBar);
+
+/**
+ * @file time-tooltip.js
+ */
+
+/**
+ * Time tooltips display a time above the progress bar.
+ *
+ * @extends Component
+ */
+class TimeTooltip extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The {@link Player} that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+  }
+
+  /**
+   * Create the time tooltip DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-time-tooltip'
+    }, {
+      'aria-hidden': 'true'
+    });
+  }
+
+  /**
+   * Updates the position of the time tooltip relative to the `SeekBar`.
+   *
+   * @param {Object} seekBarRect
+   *        The `ClientRect` for the {@link SeekBar} element.
+   *
+   * @param {number} seekBarPoint
+   *        A number from 0 to 1, representing a horizontal reference point
+   *        from the left edge of the {@link SeekBar}
+   */
+  update(seekBarRect, seekBarPoint, content) {
+    const tooltipRect = findPosition(this.el_);
+    const playerRect = getBoundingClientRect(this.player_.el());
+    const seekBarPointPx = seekBarRect.width * seekBarPoint;
+
+    // do nothing if either rect isn't available
+    // for example, if the player isn't in the DOM for testing
+    if (!playerRect || !tooltipRect) {
+      return;
+    }
+
+    // This is the space left of the `seekBarPoint` available within the bounds
+    // of the player. We calculate any gap between the left edge of the player
+    // and the left edge of the `SeekBar` and add the number of pixels in the
+    // `SeekBar` before hitting the `seekBarPoint`
+    let spaceLeftOfPoint = seekBarRect.left - playerRect.left + seekBarPointPx;
+
+    // This is the space right of the `seekBarPoint` available within the bounds
+    // of the player. We calculate the number of pixels from the `seekBarPoint`
+    // to the right edge of the `SeekBar` and add to that any gap between the
+    // right edge of the `SeekBar` and the player.
+    let spaceRightOfPoint = seekBarRect.width - seekBarPointPx + (playerRect.right - seekBarRect.right);
+
+    // spaceRightOfPoint is always NaN for mouse time display
+    // because the seekbarRect does not have a right property. This causes
+    // the mouse tool tip to be truncated when it's close to the right edge of the player.
+    // In such cases, we ignore the `playerRect.right - seekBarRect.right` value when calculating.
+    // For the sake of consistency, we ignore seekBarRect.left - playerRect.left for the left edge.
+    if (!spaceRightOfPoint) {
+      spaceRightOfPoint = seekBarRect.width - seekBarPointPx;
+      spaceLeftOfPoint = seekBarPointPx;
+    }
+    // This is the number of pixels by which the tooltip will need to be pulled
+    // further to the right to center it over the `seekBarPoint`.
+    let pullTooltipBy = tooltipRect.width / 2;
+
+    // Adjust the `pullTooltipBy` distance to the left or right depending on
+    // the results of the space calculations above.
+    if (spaceLeftOfPoint < pullTooltipBy) {
+      pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
+    } else if (spaceRightOfPoint < pullTooltipBy) {
+      pullTooltipBy = spaceRightOfPoint;
+    }
+
+    // Due to the imprecision of decimal/ratio based calculations and varying
+    // rounding behaviors, there are cases where the spacing adjustment is off
+    // by a pixel or two. This adds insurance to these calculations.
+    if (pullTooltipBy < 0) {
+      pullTooltipBy = 0;
+    } else if (pullTooltipBy > tooltipRect.width) {
+      pullTooltipBy = tooltipRect.width;
+    }
+
+    // prevent small width fluctuations within 0.4px from
+    // changing the value below.
+    // This really helps for live to prevent the play
+    // progress time tooltip from jittering
+    pullTooltipBy = Math.round(pullTooltipBy);
+    this.el_.style.right = `-${pullTooltipBy}px`;
+    this.write(content);
+  }
+
+  /**
+   * Write the time to the tooltip DOM element.
+   *
+   * @param {string} content
+   *        The formatted time for the tooltip.
+   */
+  write(content) {
+    textContent(this.el_, content);
+  }
+
+  /**
+   * Updates the position of the time tooltip relative to the `SeekBar`.
+   *
+   * @param {Object} seekBarRect
+   *        The `ClientRect` for the {@link SeekBar} element.
+   *
+   * @param {number} seekBarPoint
+   *        A number from 0 to 1, representing a horizontal reference point
+   *        from the left edge of the {@link SeekBar}
+   *
+   * @param {number} time
+   *        The time to update the tooltip to, not used during live playback
+   *
+   * @param {Function} cb
+   *        A function that will be called during the request animation frame
+   *        for tooltips that need to do additional animations from the default
+   */
+  updateTime(seekBarRect, seekBarPoint, time, cb) {
+    this.requestNamedAnimationFrame('TimeTooltip#updateTime', () => {
+      let content;
+      const duration = this.player_.duration();
+      if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+        const liveWindow = this.player_.liveTracker.liveWindow();
+        const secondsBehind = liveWindow - seekBarPoint * liveWindow;
+        content = (secondsBehind < 1 ? '' : '-') + formatTime(secondsBehind, liveWindow);
+      } else {
+        content = formatTime(time, duration);
+      }
+      this.update(seekBarRect, seekBarPoint, content);
+      if (cb) {
+        cb();
+      }
+    });
+  }
+}
+Component$1.registerComponent('TimeTooltip', TimeTooltip);
+
+/**
+ * @file play-progress-bar.js
+ */
+
+/**
+ * Used by {@link SeekBar} to display media playback progress as part of the
+ * {@link ProgressControl}.
+ *
+ * @extends Component
+ */
+class PlayProgressBar extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The {@link Player} that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.setIcon('circle');
+    this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+  }
+
+  /**
+   * Create the the DOM element for this class.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-play-progress vjs-slider-bar'
+    }, {
+      'aria-hidden': 'true'
+    });
+  }
+
+  /**
+   * Enqueues updates to its own DOM as well as the DOM of its
+   * {@link TimeTooltip} child.
+   *
+   * @param {Object} seekBarRect
+   *        The `ClientRect` for the {@link SeekBar} element.
+   *
+   * @param {number} seekBarPoint
+   *        A number from 0 to 1, representing a horizontal reference point
+   *        from the left edge of the {@link SeekBar}
+   */
+  update(seekBarRect, seekBarPoint) {
+    const timeTooltip = this.getChild('timeTooltip');
+    if (!timeTooltip) {
+      return;
+    }
+    const time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+    timeTooltip.updateTime(seekBarRect, seekBarPoint, time);
+  }
+}
+
+/**
+ * Default options for {@link PlayProgressBar}.
+ *
+ * @type {Object}
+ * @private
+ */
+PlayProgressBar.prototype.options_ = {
+  children: []
+};
+
+// Time tooltips should not be added to a player on mobile devices
+if (!IS_IOS && !IS_ANDROID) {
+  PlayProgressBar.prototype.options_.children.push('timeTooltip');
+}
+Component$1.registerComponent('PlayProgressBar', PlayProgressBar);
+
+/**
+ * @file mouse-time-display.js
+ */
+
+/**
+ * The {@link MouseTimeDisplay} component tracks mouse movement over the
+ * {@link ProgressControl}. It displays an indicator and a {@link TimeTooltip}
+ * indicating the time which is represented by a given point in the
+ * {@link ProgressControl}.
+ *
+ * @extends Component
+ */
+class MouseTimeDisplay extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The {@link Player} that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+  }
+
+  /**
+   * Create the DOM element for this class.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-mouse-display'
+    });
+  }
+
+  /**
+   * Enqueues updates to its own DOM as well as the DOM of its
+   * {@link TimeTooltip} child.
+   *
+   * @param {Object} seekBarRect
+   *        The `ClientRect` for the {@link SeekBar} element.
+   *
+   * @param {number} seekBarPoint
+   *        A number from 0 to 1, representing a horizontal reference point
+   *        from the left edge of the {@link SeekBar}
+   */
+  update(seekBarRect, seekBarPoint) {
+    const time = seekBarPoint * this.player_.duration();
+    this.getChild('timeTooltip').updateTime(seekBarRect, seekBarPoint, time, () => {
+      this.el_.style.left = `${seekBarRect.width * seekBarPoint}px`;
+    });
+  }
+}
+
+/**
+ * Default options for `MouseTimeDisplay`
+ *
+ * @type {Object}
+ * @private
+ */
+MouseTimeDisplay.prototype.options_ = {
+  children: ['timeTooltip']
+};
+Component$1.registerComponent('MouseTimeDisplay', MouseTimeDisplay);
+
+/**
+ * @file seek-bar.js
+ */
+
+// The number of seconds the `step*` functions move the timeline.
+const STEP_SECONDS = 5;
+
+// The multiplier of STEP_SECONDS that PgUp/PgDown move the timeline.
+const PAGE_KEY_MULTIPLIER = 12;
+
+/**
+ * Seek bar and container for the progress bars. Uses {@link PlayProgressBar}
+ * as its `bar`.
+ *
+ * @extends Slider
+ */
+class SeekBar extends Slider {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.setEventHandlers_();
+  }
+
+  /**
+   * Sets the event handlers
+   *
+   * @private
+   */
+  setEventHandlers_() {
+    this.update_ = bind_(this, this.update);
+    this.update = throttle(this.update_, UPDATE_REFRESH_INTERVAL);
+    this.on(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
+    if (this.player_.liveTracker) {
+      this.on(this.player_.liveTracker, 'liveedgechange', this.update);
+    }
+
+    // when playing, let's ensure we smoothly update the play progress bar
+    // via an interval
+    this.updateInterval = null;
+    this.enableIntervalHandler_ = e => this.enableInterval_(e);
+    this.disableIntervalHandler_ = e => this.disableInterval_(e);
+    this.on(this.player_, ['playing'], this.enableIntervalHandler_);
+    this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
+
+    // we don't need to update the play progress if the document is hidden,
+    // also, this causes the CPU to spike and eventually crash the page on IE11.
+    if ('hidden' in document__default["default"] && 'visibilityState' in document__default["default"]) {
+      this.on(document__default["default"], 'visibilitychange', this.toggleVisibility_);
+    }
+  }
+  toggleVisibility_(e) {
+    if (document__default["default"].visibilityState === 'hidden') {
+      this.cancelNamedAnimationFrame('SeekBar#update');
+      this.cancelNamedAnimationFrame('Slider#update');
+      this.disableInterval_(e);
+    } else {
+      if (!this.player_.ended() && !this.player_.paused()) {
+        this.enableInterval_();
+      }
+
+      // we just switched back to the page and someone may be looking, so, update ASAP
+      this.update();
+    }
+  }
+  enableInterval_() {
+    if (this.updateInterval) {
+      return;
+    }
+    this.updateInterval = this.setInterval(this.update, UPDATE_REFRESH_INTERVAL);
+  }
+  disableInterval_(e) {
+    if (this.player_.liveTracker && this.player_.liveTracker.isLive() && e && e.type !== 'ended') {
+      return;
+    }
+    if (!this.updateInterval) {
+      return;
+    }
+    this.clearInterval(this.updateInterval);
+    this.updateInterval = null;
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-progress-holder'
+    }, {
+      'aria-label': this.localize('Progress Bar')
+    });
+  }
+
+  /**
+   * This function updates the play progress bar and accessibility
+   * attributes to whatever is passed in.
+   *
+   * @param {Event} [event]
+   *        The `timeupdate` or `ended` event that caused this to run.
+   *
+   * @listens Player#timeupdate
+   *
+   * @return {number}
+   *          The current percent at a number from 0-1
+   */
+  update(event) {
+    // ignore updates while the tab is hidden
+    if (document__default["default"].visibilityState === 'hidden') {
+      return;
+    }
+    const percent = super.update();
+    this.requestNamedAnimationFrame('SeekBar#update', () => {
+      const currentTime = this.player_.ended() ? this.player_.duration() : this.getCurrentTime_();
+      const liveTracker = this.player_.liveTracker;
+      let duration = this.player_.duration();
+      if (liveTracker && liveTracker.isLive()) {
+        duration = this.player_.liveTracker.liveCurrentTime();
+      }
+      if (this.percent_ !== percent) {
+        // machine readable value of progress bar (percentage complete)
+        this.el_.setAttribute('aria-valuenow', (percent * 100).toFixed(2));
+        this.percent_ = percent;
+      }
+      if (this.currentTime_ !== currentTime || this.duration_ !== duration) {
+        // human readable value of progress bar (time complete)
+        this.el_.setAttribute('aria-valuetext', this.localize('progress bar timing: currentTime={1} duration={2}', [formatTime(currentTime, duration), formatTime(duration, duration)], '{1} of {2}'));
+        this.currentTime_ = currentTime;
+        this.duration_ = duration;
+      }
+
+      // update the progress bar time tooltip with the current time
+      if (this.bar) {
+        this.bar.update(getBoundingClientRect(this.el()), this.getProgress());
+      }
+    });
+    return percent;
+  }
+
+  /**
+   * Prevent liveThreshold from causing seeks to seem like they
+   * are not happening from a user perspective.
+   *
+   * @param {number} ct
+   *        current time to seek to
+   */
+  userSeek_(ct) {
+    if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+      this.player_.liveTracker.nextSeekedFromUser();
+    }
+    this.player_.currentTime(ct);
+  }
+
+  /**
+   * Get the value of current time but allows for smooth scrubbing,
+   * when player can't keep up.
+   *
+   * @return {number}
+   *         The current time value to display
+   *
+   * @private
+   */
+  getCurrentTime_() {
+    return this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+  }
+
+  /**
+   * Get the percentage of media played so far.
+   *
+   * @return {number}
+   *         The percentage of media played so far (0 to 1).
+   */
+  getPercent() {
+    const currentTime = this.getCurrentTime_();
+    let percent;
+    const liveTracker = this.player_.liveTracker;
+    if (liveTracker && liveTracker.isLive()) {
+      percent = (currentTime - liveTracker.seekableStart()) / liveTracker.liveWindow();
+
+      // prevent the percent from changing at the live edge
+      if (liveTracker.atLiveEdge()) {
+        percent = 1;
+      }
+    } else {
+      percent = currentTime / this.player_.duration();
+    }
+    return percent;
+  }
+
+  /**
+   * Handle mouse down on seek bar
+   *
+   * @param {MouseEvent} event
+   *        The `mousedown` event that caused this to run.
+   *
+   * @listens mousedown
+   */
+  handleMouseDown(event) {
+    if (!isSingleLeftClick(event)) {
+      return;
+    }
+
+    // Stop event propagation to prevent double fire in progress-control.js
+    event.stopPropagation();
+    this.videoWasPlaying = !this.player_.paused();
+    this.player_.pause();
+    super.handleMouseDown(event);
+  }
+
+  /**
+   * Handle mouse move on seek bar
+   *
+   * @param {MouseEvent} event
+   *        The `mousemove` event that caused this to run.
+   * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false
+   *
+   * @listens mousemove
+   */
+  handleMouseMove(event, mouseDown = false) {
+    if (!isSingleLeftClick(event) || isNaN(this.player_.duration())) {
+      return;
+    }
+    if (!mouseDown && !this.player_.scrubbing()) {
+      this.player_.scrubbing(true);
+    }
+    let newTime;
+    const distance = this.calculateDistance(event);
+    const liveTracker = this.player_.liveTracker;
+    if (!liveTracker || !liveTracker.isLive()) {
+      newTime = distance * this.player_.duration();
+
+      // Don't let video end while scrubbing.
+      if (newTime === this.player_.duration()) {
+        newTime = newTime - 0.1;
+      }
+    } else {
+      if (distance >= 0.99) {
+        liveTracker.seekToLiveEdge();
+        return;
+      }
+      const seekableStart = liveTracker.seekableStart();
+      const seekableEnd = liveTracker.liveCurrentTime();
+      newTime = seekableStart + distance * liveTracker.liveWindow();
+
+      // Don't let video end while scrubbing.
+      if (newTime >= seekableEnd) {
+        newTime = seekableEnd;
+      }
+
+      // Compensate for precision differences so that currentTime is not less
+      // than seekable start
+      if (newTime <= seekableStart) {
+        newTime = seekableStart + 0.1;
+      }
+
+      // On android seekableEnd can be Infinity sometimes,
+      // this will cause newTime to be Infinity, which is
+      // not a valid currentTime.
+      if (newTime === Infinity) {
+        return;
+      }
+    }
+
+    // Set new time (tell player to seek to new time)
+    this.userSeek_(newTime);
+    if (this.player_.options_.enableSmoothSeeking) {
+      this.update();
+    }
+  }
+  enable() {
+    super.enable();
+    const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+    if (!mouseTimeDisplay) {
+      return;
+    }
+    mouseTimeDisplay.show();
+  }
+  disable() {
+    super.disable();
+    const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+    if (!mouseTimeDisplay) {
+      return;
+    }
+    mouseTimeDisplay.hide();
+  }
+
+  /**
+   * Handle mouse up on seek bar
+   *
+   * @param {MouseEvent} event
+   *        The `mouseup` event that caused this to run.
+   *
+   * @listens mouseup
+   */
+  handleMouseUp(event) {
+    super.handleMouseUp(event);
+
+    // Stop event propagation to prevent double fire in progress-control.js
+    if (event) {
+      event.stopPropagation();
+    }
+    this.player_.scrubbing(false);
+
+    /**
+     * Trigger timeupdate because we're done seeking and the time has changed.
+     * This is particularly useful for if the player is paused to time the time displays.
+     *
+     * @event Tech#timeupdate
+     * @type {Event}
+     */
+    this.player_.trigger({
+      type: 'timeupdate',
+      target: this,
+      manuallyTriggered: true
+    });
+    if (this.videoWasPlaying) {
+      silencePromise(this.player_.play());
+    } else {
+      // We're done seeking and the time has changed.
+      // If the player is paused, make sure we display the correct time on the seek bar.
+      this.update_();
+    }
+  }
+
+  /**
+   * Move more quickly fast forward for keyboard-only users
+   */
+  stepForward() {
+    this.userSeek_(this.player_.currentTime() + STEP_SECONDS);
+  }
+
+  /**
+   * Move more quickly rewind for keyboard-only users
+   */
+  stepBack() {
+    this.userSeek_(this.player_.currentTime() - STEP_SECONDS);
+  }
+
+  /**
+   * Toggles the playback state of the player
+   * This gets called when enter or space is used on the seekbar
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called
+   *
+   */
+  handleAction(event) {
+    if (this.player_.paused()) {
+      this.player_.play();
+    } else {
+      this.player_.pause();
+    }
+  }
+
+  /**
+   * Called when this SeekBar has focus and a key gets pressed down.
+   * Supports the following keys:
+   *
+   *   Space or Enter key fire a click event
+   *   Home key moves to start of the timeline
+   *   End key moves to end of the timeline
+   *   Digit "0" through "9" keys move to 0%, 10% ... 80%, 90% of the timeline
+   *   PageDown key moves back a larger step than ArrowDown
+   *   PageUp key moves forward a large step
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    const liveTracker = this.player_.liveTracker;
+    if (keycode__default["default"].isEventKey(event, 'Space') || keycode__default["default"].isEventKey(event, 'Enter')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.handleAction(event);
+    } else if (keycode__default["default"].isEventKey(event, 'Home')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.userSeek_(0);
+    } else if (keycode__default["default"].isEventKey(event, 'End')) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (liveTracker && liveTracker.isLive()) {
+        this.userSeek_(liveTracker.liveCurrentTime());
+      } else {
+        this.userSeek_(this.player_.duration());
+      }
+    } else if (/^[0-9]$/.test(keycode__default["default"](event))) {
+      event.preventDefault();
+      event.stopPropagation();
+      const gotoFraction = (keycode__default["default"].codes[keycode__default["default"](event)] - keycode__default["default"].codes['0']) * 10.0 / 100.0;
+      if (liveTracker && liveTracker.isLive()) {
+        this.userSeek_(liveTracker.seekableStart() + liveTracker.liveWindow() * gotoFraction);
+      } else {
+        this.userSeek_(this.player_.duration() * gotoFraction);
+      }
+    } else if (keycode__default["default"].isEventKey(event, 'PgDn')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.userSeek_(this.player_.currentTime() - STEP_SECONDS * PAGE_KEY_MULTIPLIER);
+    } else if (keycode__default["default"].isEventKey(event, 'PgUp')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.userSeek_(this.player_.currentTime() + STEP_SECONDS * PAGE_KEY_MULTIPLIER);
+    } else {
+      // Pass keydown handling up for unsupported keys
+      super.handleKeyDown(event);
+    }
+  }
+  dispose() {
+    this.disableInterval_();
+    this.off(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
+    if (this.player_.liveTracker) {
+      this.off(this.player_.liveTracker, 'liveedgechange', this.update);
+    }
+    this.off(this.player_, ['playing'], this.enableIntervalHandler_);
+    this.off(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
+
+    // we don't need to update the play progress if the document is hidden,
+    // also, this causes the CPU to spike and eventually crash the page on IE11.
+    if ('hidden' in document__default["default"] && 'visibilityState' in document__default["default"]) {
+      this.off(document__default["default"], 'visibilitychange', this.toggleVisibility_);
+    }
+    super.dispose();
+  }
+}
+
+/**
+ * Default options for the `SeekBar`
+ *
+ * @type {Object}
+ * @private
+ */
+SeekBar.prototype.options_ = {
+  children: ['loadProgressBar', 'playProgressBar'],
+  barName: 'playProgressBar'
+};
+
+// MouseTimeDisplay tooltips should not be added to a player on mobile devices
+if (!IS_IOS && !IS_ANDROID) {
+  SeekBar.prototype.options_.children.splice(1, 0, 'mouseTimeDisplay');
+}
+Component$1.registerComponent('SeekBar', SeekBar);
+
+/**
+ * @file progress-control.js
+ */
+
+/**
+ * The Progress Control component contains the seek bar, load progress,
+ * and play progress.
+ *
+ * @extends Component
+ */
+class ProgressControl extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.handleMouseMove = throttle(bind_(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+    this.throttledHandleMouseSeek = throttle(bind_(this, this.handleMouseSeek), UPDATE_REFRESH_INTERVAL);
+    this.handleMouseUpHandler_ = e => this.handleMouseUp(e);
+    this.handleMouseDownHandler_ = e => this.handleMouseDown(e);
+    this.enable();
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-progress-control vjs-control'
+    });
+  }
+
+  /**
+   * When the mouse moves over the `ProgressControl`, the pointer position
+   * gets passed down to the `MouseTimeDisplay` component.
+   *
+   * @param {Event} event
+   *        The `mousemove` event that caused this function to run.
+   *
+   * @listen mousemove
+   */
+  handleMouseMove(event) {
+    const seekBar = this.getChild('seekBar');
+    if (!seekBar) {
+      return;
+    }
+    const playProgressBar = seekBar.getChild('playProgressBar');
+    const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
+    if (!playProgressBar && !mouseTimeDisplay) {
+      return;
+    }
+    const seekBarEl = seekBar.el();
+    const seekBarRect = findPosition(seekBarEl);
+    let seekBarPoint = getPointerPosition(seekBarEl, event).x;
+
+    // The default skin has a gap on either side of the `SeekBar`. This means
+    // that it's possible to trigger this behavior outside the boundaries of
+    // the `SeekBar`. This ensures we stay within it at all times.
+    seekBarPoint = clamp(seekBarPoint, 0, 1);
+    if (mouseTimeDisplay) {
+      mouseTimeDisplay.update(seekBarRect, seekBarPoint);
+    }
+    if (playProgressBar) {
+      playProgressBar.update(seekBarRect, seekBar.getProgress());
+    }
+  }
+
+  /**
+   * A throttled version of the {@link ProgressControl#handleMouseSeek} listener.
+   *
+   * @method ProgressControl#throttledHandleMouseSeek
+   * @param {Event} event
+   *        The `mousemove` event that caused this function to run.
+   *
+   * @listen mousemove
+   * @listen touchmove
+   */
+
+  /**
+   * Handle `mousemove` or `touchmove` events on the `ProgressControl`.
+   *
+   * @param {Event} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousemove
+   * @listens touchmove
+   */
+  handleMouseSeek(event) {
+    const seekBar = this.getChild('seekBar');
+    if (seekBar) {
+      seekBar.handleMouseMove(event);
+    }
+  }
+
+  /**
+   * Are controls are currently enabled for this progress control.
+   *
+   * @return {boolean}
+   *         true if controls are enabled, false otherwise
+   */
+  enabled() {
+    return this.enabled_;
+  }
+
+  /**
+   * Disable all controls on the progress control and its children
+   */
+  disable() {
+    this.children().forEach(child => child.disable && child.disable());
+    if (!this.enabled()) {
+      return;
+    }
+    this.off(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
+    this.off(this.el_, 'mousemove', this.handleMouseMove);
+    this.removeListenersAddedOnMousedownAndTouchstart();
+    this.addClass('disabled');
+    this.enabled_ = false;
+
+    // Restore normal playback state if controls are disabled while scrubbing
+    if (this.player_.scrubbing()) {
+      const seekBar = this.getChild('seekBar');
+      this.player_.scrubbing(false);
+      if (seekBar.videoWasPlaying) {
+        silencePromise(this.player_.play());
+      }
+    }
+  }
+
+  /**
+   * Enable all controls on the progress control and its children
+   */
+  enable() {
+    this.children().forEach(child => child.enable && child.enable());
+    if (this.enabled()) {
+      return;
+    }
+    this.on(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
+    this.on(this.el_, 'mousemove', this.handleMouseMove);
+    this.removeClass('disabled');
+    this.enabled_ = true;
+  }
+
+  /**
+   * Cleanup listeners after the user finishes interacting with the progress controls
+   */
+  removeListenersAddedOnMousedownAndTouchstart() {
+    const doc = this.el_.ownerDocument;
+    this.off(doc, 'mousemove', this.throttledHandleMouseSeek);
+    this.off(doc, 'touchmove', this.throttledHandleMouseSeek);
+    this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.off(doc, 'touchend', this.handleMouseUpHandler_);
+  }
+
+  /**
+   * Handle `mousedown` or `touchstart` events on the `ProgressControl`.
+   *
+   * @param {Event} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   * @listens touchstart
+   */
+  handleMouseDown(event) {
+    const doc = this.el_.ownerDocument;
+    const seekBar = this.getChild('seekBar');
+    if (seekBar) {
+      seekBar.handleMouseDown(event);
+    }
+    this.on(doc, 'mousemove', this.throttledHandleMouseSeek);
+    this.on(doc, 'touchmove', this.throttledHandleMouseSeek);
+    this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.on(doc, 'touchend', this.handleMouseUpHandler_);
+  }
+
+  /**
+   * Handle `mouseup` or `touchend` events on the `ProgressControl`.
+   *
+   * @param {Event} event
+   *        `mouseup` or `touchend` event that triggered this function.
+   *
+   * @listens touchend
+   * @listens mouseup
+   */
+  handleMouseUp(event) {
+    const seekBar = this.getChild('seekBar');
+    if (seekBar) {
+      seekBar.handleMouseUp(event);
+    }
+    this.removeListenersAddedOnMousedownAndTouchstart();
+  }
+}
+
+/**
+ * Default options for `ProgressControl`
+ *
+ * @type {Object}
+ * @private
+ */
+ProgressControl.prototype.options_ = {
+  children: ['seekBar']
+};
+Component$1.registerComponent('ProgressControl', ProgressControl);
+
+/**
+ * @file picture-in-picture-toggle.js
+ */
+
+/**
+ * Toggle Picture-in-Picture mode
+ *
+ * @extends Button
+ */
+class PictureInPictureToggle extends Button {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @listens Player#enterpictureinpicture
+   * @listens Player#leavepictureinpicture
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.setIcon('picture-in-picture-enter');
+    this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], e => this.handlePictureInPictureChange(e));
+    this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], e => this.handlePictureInPictureEnabledChange(e));
+    this.on(player, ['loadedmetadata', 'audioonlymodechange', 'audiopostermodechange'], () => this.handlePictureInPictureAudioModeChange());
+
+    // TODO: Deactivate button on player emptied event.
+    this.disable();
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-picture-in-picture-control vjs-hidden ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Displays or hides the button depending on the audio mode detection.
+   * Exits picture-in-picture if it is enabled when switching to audio mode.
+   */
+  handlePictureInPictureAudioModeChange() {
+    // This audio detection will not detect HLS or DASH audio-only streams because there was no reliable way to detect them at the time
+    const isSourceAudio = this.player_.currentType().substring(0, 5) === 'audio';
+    const isAudioMode = isSourceAudio || this.player_.audioPosterMode() || this.player_.audioOnlyMode();
+    if (!isAudioMode) {
+      this.show();
+      return;
+    }
+    if (this.player_.isInPictureInPicture()) {
+      this.player_.exitPictureInPicture();
+    }
+    this.hide();
+  }
+
+  /**
+   * Enables or disables button based on availability of a Picture-In-Picture mode.
+   *
+   * Enabled if
+   * - `player.options().enableDocumentPictureInPicture` is true and
+   *   window.documentPictureInPicture is available; or
+   * - `player.disablePictureInPicture()` is false and
+   *   element.requestPictureInPicture is available
+   */
+  handlePictureInPictureEnabledChange() {
+    if (document__default["default"].pictureInPictureEnabled && this.player_.disablePictureInPicture() === false || this.player_.options_.enableDocumentPictureInPicture && 'documentPictureInPicture' in window__default["default"]) {
+      this.enable();
+    } else {
+      this.disable();
+    }
+  }
+
+  /**
+   * Handles enterpictureinpicture and leavepictureinpicture on the player and change control text accordingly.
+   *
+   * @param {Event} [event]
+   *        The {@link Player#enterpictureinpicture} or {@link Player#leavepictureinpicture} event that caused this function to be
+   *        called.
+   *
+   * @listens Player#enterpictureinpicture
+   * @listens Player#leavepictureinpicture
+   */
+  handlePictureInPictureChange(event) {
+    if (this.player_.isInPictureInPicture()) {
+      this.setIcon('picture-in-picture-exit');
+      this.controlText('Exit Picture-in-Picture');
+    } else {
+      this.setIcon('picture-in-picture-enter');
+      this.controlText('Picture-in-Picture');
+    }
+    this.handlePictureInPictureEnabledChange();
+  }
+
+  /**
+   * This gets called when an `PictureInPictureToggle` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    if (!this.player_.isInPictureInPicture()) {
+      this.player_.requestPictureInPicture();
+    } else {
+      this.player_.exitPictureInPicture();
+    }
+  }
+
+  /**
+   * Show the `Component`s element if it is hidden by removing the
+   * 'vjs-hidden' class name from it only in browsers that support the Picture-in-Picture API.
+   */
+  show() {
+    // Does not allow to display the pictureInPictureToggle in browsers that do not support the Picture-in-Picture API, e.g. Firefox.
+    if (typeof document__default["default"].exitPictureInPicture !== 'function') {
+      return;
+    }
+    super.show();
+  }
+}
+
+/**
+ * The text that should display over the `PictureInPictureToggle`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+PictureInPictureToggle.prototype.controlText_ = 'Picture-in-Picture';
+Component$1.registerComponent('PictureInPictureToggle', PictureInPictureToggle);
+
+/**
+ * @file fullscreen-toggle.js
+ */
+
+/**
+ * Toggle fullscreen video
+ *
+ * @extends Button
+ */
+class FullscreenToggle extends Button {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.setIcon('fullscreen-enter');
+    this.on(player, 'fullscreenchange', e => this.handleFullscreenChange(e));
+    if (document__default["default"][player.fsApi_.fullscreenEnabled] === false) {
+      this.disable();
+    }
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-fullscreen-control ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Handles fullscreenchange on the player and change control text accordingly.
+   *
+   * @param {Event} [event]
+   *        The {@link Player#fullscreenchange} event that caused this function to be
+   *        called.
+   *
+   * @listens Player#fullscreenchange
+   */
+  handleFullscreenChange(event) {
+    if (this.player_.isFullscreen()) {
+      this.controlText('Exit Fullscreen');
+      this.setIcon('fullscreen-exit');
+    } else {
+      this.controlText('Fullscreen');
+      this.setIcon('fullscreen-enter');
+    }
+  }
+
+  /**
+   * This gets called when an `FullscreenToggle` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    if (!this.player_.isFullscreen()) {
+      this.player_.requestFullscreen();
+    } else {
+      this.player_.exitFullscreen();
+    }
+  }
+}
+
+/**
+ * The text that should display over the `FullscreenToggle`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+FullscreenToggle.prototype.controlText_ = 'Fullscreen';
+Component$1.registerComponent('FullscreenToggle', FullscreenToggle);
+
+/**
+ * Check if volume control is supported and if it isn't hide the
+ * `Component` that was passed  using the `vjs-hidden` class.
+ *
+ * @param { import('../../component').default } self
+ *        The component that should be hidden if volume is unsupported
+ *
+ * @param { import('../../player').default } player
+ *        A reference to the player
+ *
+ * @private
+ */
+const checkVolumeSupport = function (self, player) {
+  // hide volume controls when they're not supported by the current tech
+  if (player.tech_ && !player.tech_.featuresVolumeControl) {
+    self.addClass('vjs-hidden');
+  }
+  self.on(player, 'loadstart', function () {
+    if (!player.tech_.featuresVolumeControl) {
+      self.addClass('vjs-hidden');
+    } else {
+      self.removeClass('vjs-hidden');
+    }
+  });
+};
+
+/**
+ * @file volume-level.js
+ */
+
+/**
+ * Shows volume level
+ *
+ * @extends Component
+ */
+class VolumeLevel extends Component$1 {
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const el = super.createEl('div', {
+      className: 'vjs-volume-level'
+    });
+    this.setIcon('circle', el);
+    el.appendChild(super.createEl('span', {
+      className: 'vjs-control-text'
+    }));
+    return el;
+  }
+}
+Component$1.registerComponent('VolumeLevel', VolumeLevel);
+
+/**
+ * @file volume-level-tooltip.js
+ */
+
+/**
+ * Volume level tooltips display a volume above or side by side the volume bar.
+ *
+ * @extends Component
+ */
+class VolumeLevelTooltip extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The {@link Player} that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+  }
+
+  /**
+   * Create the volume tooltip DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-volume-tooltip'
+    }, {
+      'aria-hidden': 'true'
+    });
+  }
+
+  /**
+   * Updates the position of the tooltip relative to the `VolumeBar` and
+   * its content text.
+   *
+   * @param {Object} rangeBarRect
+   *        The `ClientRect` for the {@link VolumeBar} element.
+   *
+   * @param {number} rangeBarPoint
+   *        A number from 0 to 1, representing a horizontal/vertical reference point
+   *        from the left edge of the {@link VolumeBar}
+   *
+   * @param {boolean} vertical
+   *        Referees to the Volume control position
+   *        in the control bar{@link VolumeControl}
+   *
+   */
+  update(rangeBarRect, rangeBarPoint, vertical, content) {
+    if (!vertical) {
+      const tooltipRect = getBoundingClientRect(this.el_);
+      const playerRect = getBoundingClientRect(this.player_.el());
+      const volumeBarPointPx = rangeBarRect.width * rangeBarPoint;
+      if (!playerRect || !tooltipRect) {
+        return;
+      }
+      const spaceLeftOfPoint = rangeBarRect.left - playerRect.left + volumeBarPointPx;
+      const spaceRightOfPoint = rangeBarRect.width - volumeBarPointPx + (playerRect.right - rangeBarRect.right);
+      let pullTooltipBy = tooltipRect.width / 2;
+      if (spaceLeftOfPoint < pullTooltipBy) {
+        pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
+      } else if (spaceRightOfPoint < pullTooltipBy) {
+        pullTooltipBy = spaceRightOfPoint;
+      }
+      if (pullTooltipBy < 0) {
+        pullTooltipBy = 0;
+      } else if (pullTooltipBy > tooltipRect.width) {
+        pullTooltipBy = tooltipRect.width;
+      }
+      this.el_.style.right = `-${pullTooltipBy}px`;
+    }
+    this.write(`${content}%`);
+  }
+
+  /**
+   * Write the volume to the tooltip DOM element.
+   *
+   * @param {string} content
+   *        The formatted volume for the tooltip.
+   */
+  write(content) {
+    textContent(this.el_, content);
+  }
+
+  /**
+   * Updates the position of the volume tooltip relative to the `VolumeBar`.
+   *
+   * @param {Object} rangeBarRect
+   *        The `ClientRect` for the {@link VolumeBar} element.
+   *
+   * @param {number} rangeBarPoint
+   *        A number from 0 to 1, representing a horizontal/vertical reference point
+   *        from the left edge of the {@link VolumeBar}
+   *
+   * @param {boolean} vertical
+   *        Referees to the Volume control position
+   *        in the control bar{@link VolumeControl}
+   *
+   * @param {number} volume
+   *        The volume level to update the tooltip to
+   *
+   * @param {Function} cb
+   *        A function that will be called during the request animation frame
+   *        for tooltips that need to do additional animations from the default
+   */
+  updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, cb) {
+    this.requestNamedAnimationFrame('VolumeLevelTooltip#updateVolume', () => {
+      this.update(rangeBarRect, rangeBarPoint, vertical, volume.toFixed(0));
+      if (cb) {
+        cb();
+      }
+    });
+  }
+}
+Component$1.registerComponent('VolumeLevelTooltip', VolumeLevelTooltip);
+
+/**
+ * @file mouse-volume-level-display.js
+ */
+
+/**
+ * The {@link MouseVolumeLevelDisplay} component tracks mouse movement over the
+ * {@link VolumeControl}. It displays an indicator and a {@link VolumeLevelTooltip}
+ * indicating the volume level which is represented by a given point in the
+ * {@link VolumeBar}.
+ *
+ * @extends Component
+ */
+class MouseVolumeLevelDisplay extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The {@link Player} that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+  }
+
+  /**
+   * Create the DOM element for this class.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-mouse-display'
+    });
+  }
+
+  /**
+   * Enquires updates to its own DOM as well as the DOM of its
+   * {@link VolumeLevelTooltip} child.
+   *
+   * @param {Object} rangeBarRect
+   *        The `ClientRect` for the {@link VolumeBar} element.
+   *
+   * @param {number} rangeBarPoint
+   *        A number from 0 to 1, representing a horizontal/vertical reference point
+   *        from the left edge of the {@link VolumeBar}
+   *
+   * @param {boolean} vertical
+   *        Referees to the Volume control position
+   *        in the control bar{@link VolumeControl}
+   *
+   */
+  update(rangeBarRect, rangeBarPoint, vertical) {
+    const volume = 100 * rangeBarPoint;
+    this.getChild('volumeLevelTooltip').updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, () => {
+      if (vertical) {
+        this.el_.style.bottom = `${rangeBarRect.height * rangeBarPoint}px`;
+      } else {
+        this.el_.style.left = `${rangeBarRect.width * rangeBarPoint}px`;
+      }
+    });
+  }
+}
+
+/**
+ * Default options for `MouseVolumeLevelDisplay`
+ *
+ * @type {Object}
+ * @private
+ */
+MouseVolumeLevelDisplay.prototype.options_ = {
+  children: ['volumeLevelTooltip']
+};
+Component$1.registerComponent('MouseVolumeLevelDisplay', MouseVolumeLevelDisplay);
+
+/**
+ * @file volume-bar.js
+ */
+
+/**
+ * The bar that contains the volume level and can be clicked on to adjust the level
+ *
+ * @extends Slider
+ */
+class VolumeBar extends Slider {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.on('slideractive', e => this.updateLastVolume_(e));
+    this.on(player, 'volumechange', e => this.updateARIAAttributes(e));
+    player.ready(() => this.updateARIAAttributes());
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-volume-bar vjs-slider-bar'
+    }, {
+      'aria-label': this.localize('Volume Level'),
+      'aria-live': 'polite'
+    });
+  }
+
+  /**
+   * Handle mouse down on volume bar
+   *
+   * @param {Event} event
+   *        The `mousedown` event that caused this to run.
+   *
+   * @listens mousedown
+   */
+  handleMouseDown(event) {
+    if (!isSingleLeftClick(event)) {
+      return;
+    }
+    super.handleMouseDown(event);
+  }
+
+  /**
+   * Handle movement events on the {@link VolumeMenuButton}.
+   *
+   * @param {Event} event
+   *        The event that caused this function to run.
+   *
+   * @listens mousemove
+   */
+  handleMouseMove(event) {
+    const mouseVolumeLevelDisplay = this.getChild('mouseVolumeLevelDisplay');
+    if (mouseVolumeLevelDisplay) {
+      const volumeBarEl = this.el();
+      const volumeBarRect = getBoundingClientRect(volumeBarEl);
+      const vertical = this.vertical();
+      let volumeBarPoint = getPointerPosition(volumeBarEl, event);
+      volumeBarPoint = vertical ? volumeBarPoint.y : volumeBarPoint.x;
+      // The default skin has a gap on either side of the `VolumeBar`. This means
+      // that it's possible to trigger this behavior outside the boundaries of
+      // the `VolumeBar`. This ensures we stay within it at all times.
+      volumeBarPoint = clamp(volumeBarPoint, 0, 1);
+      mouseVolumeLevelDisplay.update(volumeBarRect, volumeBarPoint, vertical);
+    }
+    if (!isSingleLeftClick(event)) {
+      return;
+    }
+    this.checkMuted();
+    this.player_.volume(this.calculateDistance(event));
+  }
+
+  /**
+   * If the player is muted unmute it.
+   */
+  checkMuted() {
+    if (this.player_.muted()) {
+      this.player_.muted(false);
+    }
+  }
+
+  /**
+   * Get percent of volume level
+   *
+   * @return {number}
+   *         Volume level percent as a decimal number.
+   */
+  getPercent() {
+    if (this.player_.muted()) {
+      return 0;
+    }
+    return this.player_.volume();
+  }
+
+  /**
+   * Increase volume level for keyboard users
+   */
+  stepForward() {
+    this.checkMuted();
+    this.player_.volume(this.player_.volume() + 0.1);
+  }
+
+  /**
+   * Decrease volume level for keyboard users
+   */
+  stepBack() {
+    this.checkMuted();
+    this.player_.volume(this.player_.volume() - 0.1);
+  }
+
+  /**
+   * Update ARIA accessibility attributes
+   *
+   * @param {Event} [event]
+   *        The `volumechange` event that caused this function to run.
+   *
+   * @listens Player#volumechange
+   */
+  updateARIAAttributes(event) {
+    const ariaValue = this.player_.muted() ? 0 : this.volumeAsPercentage_();
+    this.el_.setAttribute('aria-valuenow', ariaValue);
+    this.el_.setAttribute('aria-valuetext', ariaValue + '%');
+  }
+
+  /**
+   * Returns the current value of the player volume as a percentage
+   *
+   * @private
+   */
+  volumeAsPercentage_() {
+    return Math.round(this.player_.volume() * 100);
+  }
+
+  /**
+   * When user starts dragging the VolumeBar, store the volume and listen for
+   * the end of the drag. When the drag ends, if the volume was set to zero,
+   * set lastVolume to the stored volume.
+   *
+   * @listens slideractive
+   * @private
+   */
+  updateLastVolume_() {
+    const volumeBeforeDrag = this.player_.volume();
+    this.one('sliderinactive', () => {
+      if (this.player_.volume() === 0) {
+        this.player_.lastVolume_(volumeBeforeDrag);
+      }
+    });
+  }
+}
+
+/**
+ * Default options for the `VolumeBar`
+ *
+ * @type {Object}
+ * @private
+ */
+VolumeBar.prototype.options_ = {
+  children: ['volumeLevel'],
+  barName: 'volumeLevel'
+};
+
+// MouseVolumeLevelDisplay tooltip should not be added to a player on mobile devices
+if (!IS_IOS && !IS_ANDROID) {
+  VolumeBar.prototype.options_.children.splice(0, 0, 'mouseVolumeLevelDisplay');
+}
+
+/**
+ * Call the update event for this Slider when this event happens on the player.
+ *
+ * @type {string}
+ */
+VolumeBar.prototype.playerEvent = 'volumechange';
+Component$1.registerComponent('VolumeBar', VolumeBar);
+
+/**
+ * @file volume-control.js
+ */
+
+/**
+ * The component for controlling the volume level
+ *
+ * @extends Component
+ */
+class VolumeControl extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of player options.
+   */
+  constructor(player, options = {}) {
+    options.vertical = options.vertical || false;
+
+    // Pass the vertical option down to the VolumeBar if
+    // the VolumeBar is turned on.
+    if (typeof options.volumeBar === 'undefined' || isPlain(options.volumeBar)) {
+      options.volumeBar = options.volumeBar || {};
+      options.volumeBar.vertical = options.vertical;
+    }
+    super(player, options);
+
+    // hide this control if volume support is missing
+    checkVolumeSupport(this, player);
+    this.throttledHandleMouseMove = throttle(bind_(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+    this.handleMouseUpHandler_ = e => this.handleMouseUp(e);
+    this.on('mousedown', e => this.handleMouseDown(e));
+    this.on('touchstart', e => this.handleMouseDown(e));
+    this.on('mousemove', e => this.handleMouseMove(e));
+
+    // while the slider is active (the mouse has been pressed down and
+    // is dragging) or in focus we do not want to hide the VolumeBar
+    this.on(this.volumeBar, ['focus', 'slideractive'], () => {
+      this.volumeBar.addClass('vjs-slider-active');
+      this.addClass('vjs-slider-active');
+      this.trigger('slideractive');
+    });
+    this.on(this.volumeBar, ['blur', 'sliderinactive'], () => {
+      this.volumeBar.removeClass('vjs-slider-active');
+      this.removeClass('vjs-slider-active');
+      this.trigger('sliderinactive');
+    });
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    let orientationClass = 'vjs-volume-horizontal';
+    if (this.options_.vertical) {
+      orientationClass = 'vjs-volume-vertical';
+    }
+    return super.createEl('div', {
+      className: `vjs-volume-control vjs-control ${orientationClass}`
+    });
+  }
+
+  /**
+   * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+   *
+   * @param {Event} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   * @listens touchstart
+   */
+  handleMouseDown(event) {
+    const doc = this.el_.ownerDocument;
+    this.on(doc, 'mousemove', this.throttledHandleMouseMove);
+    this.on(doc, 'touchmove', this.throttledHandleMouseMove);
+    this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.on(doc, 'touchend', this.handleMouseUpHandler_);
+  }
+
+  /**
+   * Handle `mouseup` or `touchend` events on the `VolumeControl`.
+   *
+   * @param {Event} event
+   *        `mouseup` or `touchend` event that triggered this function.
+   *
+   * @listens touchend
+   * @listens mouseup
+   */
+  handleMouseUp(event) {
+    const doc = this.el_.ownerDocument;
+    this.off(doc, 'mousemove', this.throttledHandleMouseMove);
+    this.off(doc, 'touchmove', this.throttledHandleMouseMove);
+    this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.off(doc, 'touchend', this.handleMouseUpHandler_);
+  }
+
+  /**
+   * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+   *
+   * @param {Event} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   * @listens touchstart
+   */
+  handleMouseMove(event) {
+    this.volumeBar.handleMouseMove(event);
+  }
+}
+
+/**
+ * Default options for the `VolumeControl`
+ *
+ * @type {Object}
+ * @private
+ */
+VolumeControl.prototype.options_ = {
+  children: ['volumeBar']
+};
+Component$1.registerComponent('VolumeControl', VolumeControl);
+
+/**
+ * Check if muting volume is supported and if it isn't hide the mute toggle
+ * button.
+ *
+ * @param { import('../../component').default } self
+ *        A reference to the mute toggle button
+ *
+ * @param { import('../../player').default } player
+ *        A reference to the player
+ *
+ * @private
+ */
+const checkMuteSupport = function (self, player) {
+  // hide mute toggle button if it's not supported by the current tech
+  if (player.tech_ && !player.tech_.featuresMuteControl) {
+    self.addClass('vjs-hidden');
+  }
+  self.on(player, 'loadstart', function () {
+    if (!player.tech_.featuresMuteControl) {
+      self.addClass('vjs-hidden');
+    } else {
+      self.removeClass('vjs-hidden');
+    }
+  });
+};
+
+/**
+ * @file mute-toggle.js
+ */
+
+/**
+ * A button component for muting the audio.
+ *
+ * @extends Button
+ */
+class MuteToggle extends Button {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+
+    // hide this control if volume support is missing
+    checkMuteSupport(this, player);
+    this.on(player, ['loadstart', 'volumechange'], e => this.update(e));
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-mute-control ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * This gets called when an `MuteToggle` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    const vol = this.player_.volume();
+    const lastVolume = this.player_.lastVolume_();
+    if (vol === 0) {
+      const volumeToSet = lastVolume < 0.1 ? 0.1 : lastVolume;
+      this.player_.volume(volumeToSet);
+      this.player_.muted(false);
+    } else {
+      this.player_.muted(this.player_.muted() ? false : true);
+    }
+  }
+
+  /**
+   * Update the `MuteToggle` button based on the state of `volume` and `muted`
+   * on the player.
+   *
+   * @param {Event} [event]
+   *        The {@link Player#loadstart} event if this function was called
+   *        through an event.
+   *
+   * @listens Player#loadstart
+   * @listens Player#volumechange
+   */
+  update(event) {
+    this.updateIcon_();
+    this.updateControlText_();
+  }
+
+  /**
+   * Update the appearance of the `MuteToggle` icon.
+   *
+   * Possible states (given `level` variable below):
+   * - 0: crossed out
+   * - 1: zero bars of volume
+   * - 2: one bar of volume
+   * - 3: two bars of volume
+   *
+   * @private
+   */
+  updateIcon_() {
+    const vol = this.player_.volume();
+    let level = 3;
+    this.setIcon('volume-high');
+
+    // in iOS when a player is loaded with muted attribute
+    // and volume is changed with a native mute button
+    // we want to make sure muted state is updated
+    if (IS_IOS && this.player_.tech_ && this.player_.tech_.el_) {
+      this.player_.muted(this.player_.tech_.el_.muted);
+    }
+    if (vol === 0 || this.player_.muted()) {
+      this.setIcon('volume-mute');
+      level = 0;
+    } else if (vol < 0.33) {
+      this.setIcon('volume-low');
+      level = 1;
+    } else if (vol < 0.67) {
+      this.setIcon('volume-medium');
+      level = 2;
+    }
+    removeClass(this.el_, [0, 1, 2, 3].reduce((str, i) => str + `${i ? ' ' : ''}vjs-vol-${i}`, ''));
+    addClass(this.el_, `vjs-vol-${level}`);
+  }
+
+  /**
+   * If `muted` has changed on the player, update the control text
+   * (`title` attribute on `vjs-mute-control` element and content of
+   * `vjs-control-text` element).
+   *
+   * @private
+   */
+  updateControlText_() {
+    const soundOff = this.player_.muted() || this.player_.volume() === 0;
+    const text = soundOff ? 'Unmute' : 'Mute';
+    if (this.controlText() !== text) {
+      this.controlText(text);
+    }
+  }
+}
+
+/**
+ * The text that should display over the `MuteToggle`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+MuteToggle.prototype.controlText_ = 'Mute';
+Component$1.registerComponent('MuteToggle', MuteToggle);
+
+/**
+ * @file volume-control.js
+ */
+
+/**
+ * A Component to contain the MuteToggle and VolumeControl so that
+ * they can work together.
+ *
+ * @extends Component
+ */
+class VolumePanel extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of player options.
+   */
+  constructor(player, options = {}) {
+    if (typeof options.inline !== 'undefined') {
+      options.inline = options.inline;
+    } else {
+      options.inline = true;
+    }
+
+    // pass the inline option down to the VolumeControl as vertical if
+    // the VolumeControl is on.
+    if (typeof options.volumeControl === 'undefined' || isPlain(options.volumeControl)) {
+      options.volumeControl = options.volumeControl || {};
+      options.volumeControl.vertical = !options.inline;
+    }
+    super(player, options);
+
+    // this handler is used by mouse handler methods below
+    this.handleKeyPressHandler_ = e => this.handleKeyPress(e);
+    this.on(player, ['loadstart'], e => this.volumePanelState_(e));
+    this.on(this.muteToggle, 'keyup', e => this.handleKeyPress(e));
+    this.on(this.volumeControl, 'keyup', e => this.handleVolumeControlKeyUp(e));
+    this.on('keydown', e => this.handleKeyPress(e));
+    this.on('mouseover', e => this.handleMouseOver(e));
+    this.on('mouseout', e => this.handleMouseOut(e));
+
+    // while the slider is active (the mouse has been pressed down and
+    // is dragging) we do not want to hide the VolumeBar
+    this.on(this.volumeControl, ['slideractive'], this.sliderActive_);
+    this.on(this.volumeControl, ['sliderinactive'], this.sliderInactive_);
+  }
+
+  /**
+   * Add vjs-slider-active class to the VolumePanel
+   *
+   * @listens VolumeControl#slideractive
+   * @private
+   */
+  sliderActive_() {
+    this.addClass('vjs-slider-active');
+  }
+
+  /**
+   * Removes vjs-slider-active class to the VolumePanel
+   *
+   * @listens VolumeControl#sliderinactive
+   * @private
+   */
+  sliderInactive_() {
+    this.removeClass('vjs-slider-active');
+  }
+
+  /**
+   * Adds vjs-hidden or vjs-mute-toggle-only to the VolumePanel
+   * depending on MuteToggle and VolumeControl state
+   *
+   * @listens Player#loadstart
+   * @private
+   */
+  volumePanelState_() {
+    // hide volume panel if neither volume control or mute toggle
+    // are displayed
+    if (this.volumeControl.hasClass('vjs-hidden') && this.muteToggle.hasClass('vjs-hidden')) {
+      this.addClass('vjs-hidden');
+    }
+
+    // if only mute toggle is visible we don't want
+    // volume panel expanding when hovered or active
+    if (this.volumeControl.hasClass('vjs-hidden') && !this.muteToggle.hasClass('vjs-hidden')) {
+      this.addClass('vjs-mute-toggle-only');
+    }
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    let orientationClass = 'vjs-volume-panel-horizontal';
+    if (!this.options_.inline) {
+      orientationClass = 'vjs-volume-panel-vertical';
+    }
+    return super.createEl('div', {
+      className: `vjs-volume-panel vjs-control ${orientationClass}`
+    });
+  }
+
+  /**
+   * Dispose of the `volume-panel` and all child components.
+   */
+  dispose() {
+    this.handleMouseOut();
+    super.dispose();
+  }
+
+  /**
+   * Handles `keyup` events on the `VolumeControl`, looking for ESC, which closes
+   * the volume panel and sets focus on `MuteToggle`.
+   *
+   * @param {Event} event
+   *        The `keyup` event that caused this function to be called.
+   *
+   * @listens keyup
+   */
+  handleVolumeControlKeyUp(event) {
+    if (keycode__default["default"].isEventKey(event, 'Esc')) {
+      this.muteToggle.focus();
+    }
+  }
+
+  /**
+   * This gets called when a `VolumePanel` gains hover via a `mouseover` event.
+   * Turns on listening for `mouseover` event. When they happen it
+   * calls `this.handleMouseOver`.
+   *
+   * @param {Event} event
+   *        The `mouseover` event that caused this function to be called.
+   *
+   * @listens mouseover
+   */
+  handleMouseOver(event) {
+    this.addClass('vjs-hover');
+    on(document__default["default"], 'keyup', this.handleKeyPressHandler_);
+  }
+
+  /**
+   * This gets called when a `VolumePanel` gains hover via a `mouseout` event.
+   * Turns on listening for `mouseout` event. When they happen it
+   * calls `this.handleMouseOut`.
+   *
+   * @param {Event} event
+   *        The `mouseout` event that caused this function to be called.
+   *
+   * @listens mouseout
+   */
+  handleMouseOut(event) {
+    this.removeClass('vjs-hover');
+    off(document__default["default"], 'keyup', this.handleKeyPressHandler_);
+  }
+
+  /**
+   * Handles `keyup` event on the document or `keydown` event on the `VolumePanel`,
+   * looking for ESC, which hides the `VolumeControl`.
+   *
+   * @param {Event} event
+   *        The keypress that triggered this event.
+   *
+   * @listens keydown | keyup
+   */
+  handleKeyPress(event) {
+    if (keycode__default["default"].isEventKey(event, 'Esc')) {
+      this.handleMouseOut();
+    }
+  }
+}
+
+/**
+ * Default options for the `VolumeControl`
+ *
+ * @type {Object}
+ * @private
+ */
+VolumePanel.prototype.options_ = {
+  children: ['muteToggle', 'volumeControl']
+};
+Component$1.registerComponent('VolumePanel', VolumePanel);
+
+/**
+ * Button to skip forward a configurable amount of time
+ * through a video. Renders in the control bar.
+ *
+ * e.g. options: {controlBar: {skipButtons: forward: 5}}
+ *
+ * @extends Button
+ */
+class SkipForward extends Button {
+  constructor(player, options) {
+    super(player, options);
+    this.validOptions = [5, 10, 30];
+    this.skipTime = this.getSkipForwardTime();
+    if (this.skipTime && this.validOptions.includes(this.skipTime)) {
+      this.setIcon(`forward-${this.skipTime}`);
+      this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime.toLocaleString(player.language())]));
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+  getSkipForwardTime() {
+    const playerOptions = this.options_.playerOptions;
+    return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.forward;
+  }
+  buildCSSClass() {
+    return `vjs-skip-forward-${this.getSkipForwardTime()} ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * On click, skips forward in the duration/seekable range by a configurable amount of seconds.
+   * If the time left in the duration/seekable range is less than the configured 'skip forward' time,
+   * skips to end of duration/seekable range.
+   *
+   * Handle a click on a `SkipForward` button
+   *
+   * @param {EventTarget~Event} event
+   *        The `click` event that caused this function
+   *        to be called
+   */
+  handleClick(event) {
+    if (isNaN(this.player_.duration())) {
+      return;
+    }
+    const currentVideoTime = this.player_.currentTime();
+    const liveTracker = this.player_.liveTracker;
+    const duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
+    let newTime;
+    if (currentVideoTime + this.skipTime <= duration) {
+      newTime = currentVideoTime + this.skipTime;
+    } else {
+      newTime = duration;
+    }
+    this.player_.currentTime(newTime);
+  }
+
+  /**
+   * Update control text on languagechange
+   */
+  handleLanguagechange() {
+    this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime]));
+  }
+}
+SkipForward.prototype.controlText_ = 'Skip Forward';
+Component$1.registerComponent('SkipForward', SkipForward);
+
+/**
+ * Button to skip backward a configurable amount of time
+ * through a video. Renders in the control bar.
+ *
+ *  * e.g. options: {controlBar: {skipButtons: backward: 5}}
+ *
+ * @extends Button
+ */
+class SkipBackward extends Button {
+  constructor(player, options) {
+    super(player, options);
+    this.validOptions = [5, 10, 30];
+    this.skipTime = this.getSkipBackwardTime();
+    if (this.skipTime && this.validOptions.includes(this.skipTime)) {
+      this.setIcon(`replay-${this.skipTime}`);
+      this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime.toLocaleString(player.language())]));
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+  getSkipBackwardTime() {
+    const playerOptions = this.options_.playerOptions;
+    return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.backward;
+  }
+  buildCSSClass() {
+    return `vjs-skip-backward-${this.getSkipBackwardTime()} ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * On click, skips backward in the video by a configurable amount of seconds.
+   * If the current time in the video is less than the configured 'skip backward' time,
+   * skips to beginning of video or seekable range.
+   *
+   * Handle a click on a `SkipBackward` button
+   *
+   * @param {EventTarget~Event} event
+   *        The `click` event that caused this function
+   *        to be called
+   */
+  handleClick(event) {
+    const currentVideoTime = this.player_.currentTime();
+    const liveTracker = this.player_.liveTracker;
+    const seekableStart = liveTracker && liveTracker.isLive() && liveTracker.seekableStart();
+    let newTime;
+    if (seekableStart && currentVideoTime - this.skipTime <= seekableStart) {
+      newTime = seekableStart;
+    } else if (currentVideoTime >= this.skipTime) {
+      newTime = currentVideoTime - this.skipTime;
+    } else {
+      newTime = 0;
+    }
+    this.player_.currentTime(newTime);
+  }
+
+  /**
+   * Update control text on languagechange
+   */
+  handleLanguagechange() {
+    this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime]));
+  }
+}
+SkipBackward.prototype.controlText_ = 'Skip Backward';
+Component$1.registerComponent('SkipBackward', SkipBackward);
+
+/**
+ * @file menu.js
+ */
+
+/**
+ * The Menu component is used to build popup menus, including subtitle and
+ * captions selection menus.
+ *
+ * @extends Component
+ */
+class Menu extends Component$1 {
+  /**
+   * Create an instance of this class.
+   *
+   * @param { import('../player').default } player
+   *        the player that this component should attach to
+   *
+   * @param {Object} [options]
+   *        Object of option names and values
+   *
+   */
+  constructor(player, options) {
+    super(player, options);
+    if (options) {
+      this.menuButton_ = options.menuButton;
+    }
+    this.focusedChild_ = -1;
+    this.on('keydown', e => this.handleKeyDown(e));
+
+    // All the menu item instances share the same blur handler provided by the menu container.
+    this.boundHandleBlur_ = e => this.handleBlur(e);
+    this.boundHandleTapClick_ = e => this.handleTapClick(e);
+  }
+
+  /**
+   * Add event listeners to the {@link MenuItem}.
+   *
+   * @param {Object} component
+   *        The instance of the `MenuItem` to add listeners to.
+   *
+   */
+  addEventListenerForItem(component) {
+    if (!(component instanceof Component$1)) {
+      return;
+    }
+    this.on(component, 'blur', this.boundHandleBlur_);
+    this.on(component, ['tap', 'click'], this.boundHandleTapClick_);
+  }
+
+  /**
+   * Remove event listeners from the {@link MenuItem}.
+   *
+   * @param {Object} component
+   *        The instance of the `MenuItem` to remove listeners.
+   *
+   */
+  removeEventListenerForItem(component) {
+    if (!(component instanceof Component$1)) {
+      return;
+    }
+    this.off(component, 'blur', this.boundHandleBlur_);
+    this.off(component, ['tap', 'click'], this.boundHandleTapClick_);
+  }
+
+  /**
+   * This method will be called indirectly when the component has been added
+   * before the component adds to the new menu instance by `addItem`.
+   * In this case, the original menu instance will remove the component
+   * by calling `removeChild`.
+   *
+   * @param {Object} component
+   *        The instance of the `MenuItem`
+   */
+  removeChild(component) {
+    if (typeof component === 'string') {
+      component = this.getChild(component);
+    }
+    this.removeEventListenerForItem(component);
+    super.removeChild(component);
+  }
+
+  /**
+   * Add a {@link MenuItem} to the menu.
+   *
+   * @param {Object|string} component
+   *        The name or instance of the `MenuItem` to add.
+   *
+   */
+  addItem(component) {
+    const childComponent = this.addChild(component);
+    if (childComponent) {
+      this.addEventListenerForItem(childComponent);
+    }
+  }
+
+  /**
+   * Create the `Menu`s DOM element.
+   *
+   * @return {Element}
+   *         the element that was created
+   */
+  createEl() {
+    const contentElType = this.options_.contentElType || 'ul';
+    this.contentEl_ = createEl(contentElType, {
+      className: 'vjs-menu-content'
+    });
+    this.contentEl_.setAttribute('role', 'menu');
+    const el = super.createEl('div', {
+      append: this.contentEl_,
+      className: 'vjs-menu'
+    });
+    el.appendChild(this.contentEl_);
+
+    // Prevent clicks from bubbling up. Needed for Menu Buttons,
+    // where a click on the parent is significant
+    on(el, 'click', function (event) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    });
+    return el;
+  }
+  dispose() {
+    this.contentEl_ = null;
+    this.boundHandleBlur_ = null;
+    this.boundHandleTapClick_ = null;
+    super.dispose();
+  }
+
+  /**
+   * Called when a `MenuItem` loses focus.
+   *
+   * @param {Event} event
+   *        The `blur` event that caused this function to be called.
+   *
+   * @listens blur
+   */
+  handleBlur(event) {
+    const relatedTarget = event.relatedTarget || document__default["default"].activeElement;
+
+    // Close menu popup when a user clicks outside the menu
+    if (!this.children().some(element => {
+      return element.el() === relatedTarget;
+    })) {
+      const btn = this.menuButton_;
+      if (btn && btn.buttonPressed_ && relatedTarget !== btn.el().firstChild) {
+        btn.unpressButton();
+      }
+    }
+  }
+
+  /**
+   * Called when a `MenuItem` gets clicked or tapped.
+   *
+   * @param {Event} event
+   *        The `click` or `tap` event that caused this function to be called.
+   *
+   * @listens click,tap
+   */
+  handleTapClick(event) {
+    // Unpress the associated MenuButton, and move focus back to it
+    if (this.menuButton_) {
+      this.menuButton_.unpressButton();
+      const childComponents = this.children();
+      if (!Array.isArray(childComponents)) {
+        return;
+      }
+      const foundComponent = childComponents.filter(component => component.el() === event.target)[0];
+      if (!foundComponent) {
+        return;
+      }
+
+      // don't focus menu button if item is a caption settings item
+      // because focus will move elsewhere
+      if (foundComponent.name() !== 'CaptionSettingsMenuItem') {
+        this.menuButton_.focus();
+      }
+    }
+  }
+
+  /**
+   * Handle a `keydown` event on this menu. This listener is added in the constructor.
+   *
+   * @param {KeyboardEvent} event
+   *        A `keydown` event that happened on the menu.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Left and Down Arrows
+    if (keycode__default["default"].isEventKey(event, 'Left') || keycode__default["default"].isEventKey(event, 'Down')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.stepForward();
+
+      // Up and Right Arrows
+    } else if (keycode__default["default"].isEventKey(event, 'Right') || keycode__default["default"].isEventKey(event, 'Up')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.stepBack();
+    }
+  }
+
+  /**
+   * Move to next (lower) menu item for keyboard users.
+   */
+  stepForward() {
+    let stepChild = 0;
+    if (this.focusedChild_ !== undefined) {
+      stepChild = this.focusedChild_ + 1;
+    }
+    this.focus(stepChild);
+  }
+
+  /**
+   * Move to previous (higher) menu item for keyboard users.
+   */
+  stepBack() {
+    let stepChild = 0;
+    if (this.focusedChild_ !== undefined) {
+      stepChild = this.focusedChild_ - 1;
+    }
+    this.focus(stepChild);
+  }
+
+  /**
+   * Set focus on a {@link MenuItem} in the `Menu`.
+   *
+   * @param {Object|string} [item=0]
+   *        Index of child item set focus on.
+   */
+  focus(item = 0) {
+    const children = this.children().slice();
+    const haveTitle = children.length && children[0].hasClass('vjs-menu-title');
+    if (haveTitle) {
+      children.shift();
+    }
+    if (children.length > 0) {
+      if (item < 0) {
+        item = 0;
+      } else if (item >= children.length) {
+        item = children.length - 1;
+      }
+      this.focusedChild_ = item;
+      children[item].el_.focus();
+    }
+  }
+}
+Component$1.registerComponent('Menu', Menu);
+
+/**
+ * @file menu-button.js
+ */
+
+/**
+ * A `MenuButton` class for any popup {@link Menu}.
+ *
+ * @extends Component
+ */
+class MenuButton extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of player options.
+   */
+  constructor(player, options = {}) {
+    super(player, options);
+    this.menuButton_ = new Button(player, options);
+    this.menuButton_.controlText(this.controlText_);
+    this.menuButton_.el_.setAttribute('aria-haspopup', 'true');
+
+    // Add buildCSSClass values to the button, not the wrapper
+    const buttonClass = Button.prototype.buildCSSClass();
+    this.menuButton_.el_.className = this.buildCSSClass() + ' ' + buttonClass;
+    this.menuButton_.removeClass('vjs-control');
+    this.addChild(this.menuButton_);
+    this.update();
+    this.enabled_ = true;
+    const handleClick = e => this.handleClick(e);
+    this.handleMenuKeyUp_ = e => this.handleMenuKeyUp(e);
+    this.on(this.menuButton_, 'tap', handleClick);
+    this.on(this.menuButton_, 'click', handleClick);
+    this.on(this.menuButton_, 'keydown', e => this.handleKeyDown(e));
+    this.on(this.menuButton_, 'mouseenter', () => {
+      this.addClass('vjs-hover');
+      this.menu.show();
+      on(document__default["default"], 'keyup', this.handleMenuKeyUp_);
+    });
+    this.on('mouseleave', e => this.handleMouseLeave(e));
+    this.on('keydown', e => this.handleSubmenuKeyDown(e));
+  }
+
+  /**
+   * Update the menu based on the current state of its items.
+   */
+  update() {
+    const menu = this.createMenu();
+    if (this.menu) {
+      this.menu.dispose();
+      this.removeChild(this.menu);
+    }
+    this.menu = menu;
+    this.addChild(menu);
+
+    /**
+     * Track the state of the menu button
+     *
+     * @type {Boolean}
+     * @private
+     */
+    this.buttonPressed_ = false;
+    this.menuButton_.el_.setAttribute('aria-expanded', 'false');
+    if (this.items && this.items.length <= this.hideThreshold_) {
+      this.hide();
+      this.menu.contentEl_.removeAttribute('role');
+    } else {
+      this.show();
+      this.menu.contentEl_.setAttribute('role', 'menu');
+    }
+  }
+
+  /**
+   * Create the menu and add all items to it.
+   *
+   * @return {Menu}
+   *         The constructed menu
+   */
+  createMenu() {
+    const menu = new Menu(this.player_, {
+      menuButton: this
+    });
+
+    /**
+     * Hide the menu if the number of items is less than or equal to this threshold. This defaults
+     * to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list
+     * it here because every time we run `createMenu` we need to reset the value.
+     *
+     * @protected
+     * @type {Number}
+     */
+    this.hideThreshold_ = 0;
+
+    // Add a title list item to the top
+    if (this.options_.title) {
+      const titleEl = createEl('li', {
+        className: 'vjs-menu-title',
+        textContent: toTitleCase$1(this.options_.title),
+        tabIndex: -1
+      });
+      const titleComponent = new Component$1(this.player_, {
+        el: titleEl
+      });
+      menu.addItem(titleComponent);
+    }
+    this.items = this.createItems();
+    if (this.items) {
+      // Add menu items to the menu
+      for (let i = 0; i < this.items.length; i++) {
+        menu.addItem(this.items[i]);
+      }
+    }
+    return menu;
+  }
+
+  /**
+   * Create the list of menu items. Specific to each subclass.
+   *
+   * @abstract
+   */
+  createItems() {}
+
+  /**
+   * Create the `MenuButtons`s DOM element.
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: this.buildWrapperCSSClass()
+    }, {});
+  }
+
+  /**
+   * Overwrites the `setIcon` method from `Component`.
+   * In this case, we want the icon to be appended to the menuButton.
+   *
+   * @param {string} name
+   *         The icon name to be added.
+   */
+  setIcon(name) {
+    super.setIcon(name, this.menuButton_.el_);
+  }
+
+  /**
+   * Allow sub components to stack CSS class names for the wrapper element
+   *
+   * @return {string}
+   *         The constructed wrapper DOM `className`
+   */
+  buildWrapperCSSClass() {
+    let menuButtonClass = 'vjs-menu-button';
+
+    // If the inline option is passed, we want to use different styles altogether.
+    if (this.options_.inline === true) {
+      menuButtonClass += '-inline';
+    } else {
+      menuButtonClass += '-popup';
+    }
+
+    // TODO: Fix the CSS so that this isn't necessary
+    const buttonClass = Button.prototype.buildCSSClass();
+    return `vjs-menu-button ${menuButtonClass} ${buttonClass} ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    let menuButtonClass = 'vjs-menu-button';
+
+    // If the inline option is passed, we want to use different styles altogether.
+    if (this.options_.inline === true) {
+      menuButtonClass += '-inline';
+    } else {
+      menuButtonClass += '-popup';
+    }
+    return `vjs-menu-button ${menuButtonClass} ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Get or set the localized control text that will be used for accessibility.
+   *
+   * > NOTE: This will come from the internal `menuButton_` element.
+   *
+   * @param {string} [text]
+   *        Control text for element.
+   *
+   * @param {Element} [el=this.menuButton_.el()]
+   *        Element to set the title on.
+   *
+   * @return {string}
+   *         - The control text when getting
+   */
+  controlText(text, el = this.menuButton_.el()) {
+    return this.menuButton_.controlText(text, el);
+  }
+
+  /**
+   * Dispose of the `menu-button` and all child components.
+   */
+  dispose() {
+    this.handleMouseLeave();
+    super.dispose();
+  }
+
+  /**
+   * Handle a click on a `MenuButton`.
+   * See {@link ClickableComponent#handleClick} for instances where this is called.
+   *
+   * @param {Event} event
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    if (this.buttonPressed_) {
+      this.unpressButton();
+    } else {
+      this.pressButton();
+    }
+  }
+
+  /**
+   * Handle `mouseleave` for `MenuButton`.
+   *
+   * @param {Event} event
+   *        The `mouseleave` event that caused this function to be called.
+   *
+   * @listens mouseleave
+   */
+  handleMouseLeave(event) {
+    this.removeClass('vjs-hover');
+    off(document__default["default"], 'keyup', this.handleMenuKeyUp_);
+  }
+
+  /**
+   * Set the focus to the actual button, not to this element
+   */
+  focus() {
+    this.menuButton_.focus();
+  }
+
+  /**
+   * Remove the focus from the actual button, not this element
+   */
+  blur() {
+    this.menuButton_.blur();
+  }
+
+  /**
+   * Handle tab, escape, down arrow, and up arrow keys for `MenuButton`. See
+   * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+   *
+   * @param {Event} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Escape or Tab unpress the 'button'
+    if (keycode__default["default"].isEventKey(event, 'Esc') || keycode__default["default"].isEventKey(event, 'Tab')) {
+      if (this.buttonPressed_) {
+        this.unpressButton();
+      }
+
+      // Don't preventDefault for Tab key - we still want to lose focus
+      if (!keycode__default["default"].isEventKey(event, 'Tab')) {
+        event.preventDefault();
+        // Set focus back to the menu button's button
+        this.menuButton_.focus();
+      }
+      // Up Arrow or Down Arrow also 'press' the button to open the menu
+    } else if (keycode__default["default"].isEventKey(event, 'Up') || keycode__default["default"].isEventKey(event, 'Down')) {
+      if (!this.buttonPressed_) {
+        event.preventDefault();
+        this.pressButton();
+      }
+    }
+  }
+
+  /**
+   * Handle a `keyup` event on a `MenuButton`. The listener for this is added in
+   * the constructor.
+   *
+   * @param {Event} event
+   *        Key press event
+   *
+   * @listens keyup
+   */
+  handleMenuKeyUp(event) {
+    // Escape hides popup menu
+    if (keycode__default["default"].isEventKey(event, 'Esc') || keycode__default["default"].isEventKey(event, 'Tab')) {
+      this.removeClass('vjs-hover');
+    }
+  }
+
+  /**
+   * This method name now delegates to `handleSubmenuKeyDown`. This means
+   * anyone calling `handleSubmenuKeyPress` will not see their method calls
+   * stop working.
+   *
+   * @param {Event} event
+   *        The event that caused this function to be called.
+   */
+  handleSubmenuKeyPress(event) {
+    this.handleSubmenuKeyDown(event);
+  }
+
+  /**
+   * Handle a `keydown` event on a sub-menu. The listener for this is added in
+   * the constructor.
+   *
+   * @param {Event} event
+   *        Key press event
+   *
+   * @listens keydown
+   */
+  handleSubmenuKeyDown(event) {
+    // Escape or Tab unpress the 'button'
+    if (keycode__default["default"].isEventKey(event, 'Esc') || keycode__default["default"].isEventKey(event, 'Tab')) {
+      if (this.buttonPressed_) {
+        this.unpressButton();
+      }
+      // Don't preventDefault for Tab key - we still want to lose focus
+      if (!keycode__default["default"].isEventKey(event, 'Tab')) {
+        event.preventDefault();
+        // Set focus back to the menu button's button
+        this.menuButton_.focus();
+      }
+    }
+  }
+
+  /**
+   * Put the current `MenuButton` into a pressed state.
+   */
+  pressButton() {
+    if (this.enabled_) {
+      this.buttonPressed_ = true;
+      this.menu.show();
+      this.menu.lockShowing();
+      this.menuButton_.el_.setAttribute('aria-expanded', 'true');
+
+      // set the focus into the submenu, except on iOS where it is resulting in
+      // undesired scrolling behavior when the player is in an iframe
+      if (IS_IOS && isInFrame()) {
+        // Return early so that the menu isn't focused
+        return;
+      }
+      this.menu.focus();
+    }
+  }
+
+  /**
+   * Take the current `MenuButton` out of a pressed state.
+   */
+  unpressButton() {
+    if (this.enabled_) {
+      this.buttonPressed_ = false;
+      this.menu.unlockShowing();
+      this.menu.hide();
+      this.menuButton_.el_.setAttribute('aria-expanded', 'false');
+    }
+  }
+
+  /**
+   * Disable the `MenuButton`. Don't allow it to be clicked.
+   */
+  disable() {
+    this.unpressButton();
+    this.enabled_ = false;
+    this.addClass('vjs-disabled');
+    this.menuButton_.disable();
+  }
+
+  /**
+   * Enable the `MenuButton`. Allow it to be clicked.
+   */
+  enable() {
+    this.enabled_ = true;
+    this.removeClass('vjs-disabled');
+    this.menuButton_.enable();
+  }
+}
+Component$1.registerComponent('MenuButton', MenuButton);
+
+/**
+ * @file track-button.js
+ */
+
+/**
+ * The base class for buttons that toggle specific  track types (e.g. subtitles).
+ *
+ * @extends MenuButton
+ */
+class TrackButton extends MenuButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    const tracks = options.tracks;
+    super(player, options);
+    if (this.items.length <= 1) {
+      this.hide();
+    }
+    if (!tracks) {
+      return;
+    }
+    const updateHandler = bind_(this, this.update);
+    tracks.addEventListener('removetrack', updateHandler);
+    tracks.addEventListener('addtrack', updateHandler);
+    tracks.addEventListener('labelchange', updateHandler);
+    this.player_.on('ready', updateHandler);
+    this.player_.on('dispose', function () {
+      tracks.removeEventListener('removetrack', updateHandler);
+      tracks.removeEventListener('addtrack', updateHandler);
+      tracks.removeEventListener('labelchange', updateHandler);
+    });
+  }
+}
+Component$1.registerComponent('TrackButton', TrackButton);
+
+/**
+ * @file menu-keys.js
+ */
+
+/**
+  * All keys used for operation of a menu (`MenuButton`, `Menu`, and `MenuItem`)
+  * Note that 'Enter' and 'Space' are not included here (otherwise they would
+  * prevent the `MenuButton` and `MenuItem` from being keyboard-clickable)
+ *
+  * @typedef MenuKeys
+  * @array
+  */
+const MenuKeys = ['Tab', 'Esc', 'Up', 'Down', 'Right', 'Left'];
+
+/**
+ * @file menu-item.js
+ */
+
+/**
+ * The component for a menu item. `<li>`
+ *
+ * @extends ClickableComponent
+ */
+class MenuItem extends ClickableComponent {
+  /**
+   * Creates an instance of the this class.
+   *
+   * @param { import('../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of player options.
+   *
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.selectable = options.selectable;
+    this.isSelected_ = options.selected || false;
+    this.multiSelectable = options.multiSelectable;
+    this.selected(this.isSelected_);
+    if (this.selectable) {
+      if (this.multiSelectable) {
+        this.el_.setAttribute('role', 'menuitemcheckbox');
+      } else {
+        this.el_.setAttribute('role', 'menuitemradio');
+      }
+    } else {
+      this.el_.setAttribute('role', 'menuitem');
+    }
+  }
+
+  /**
+   * Create the `MenuItem's DOM element
+   *
+   * @param {string} [type=li]
+   *        Element's node type, not actually used, always set to `li`.
+   *
+   * @param {Object} [props={}]
+   *        An object of properties that should be set on the element
+   *
+   * @param {Object} [attrs={}]
+   *        An object of attributes that should be set on the element
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl(type, props, attrs) {
+    // The control is textual, not just an icon
+    this.nonIconControl = true;
+    const el = super.createEl('li', Object.assign({
+      className: 'vjs-menu-item',
+      tabIndex: -1
+    }, props), attrs);
+
+    // swap icon with menu item text.
+    const menuItemEl = createEl('span', {
+      className: 'vjs-menu-item-text',
+      textContent: this.localize(this.options_.label)
+    });
+
+    // If using SVG icons, the element with vjs-icon-placeholder will be added separately.
+    if (this.player_.options_.experimentalSvgIcons) {
+      el.appendChild(menuItemEl);
+    } else {
+      el.replaceChild(menuItemEl, el.querySelector('.vjs-icon-placeholder'));
+    }
+    return el;
+  }
+
+  /**
+   * Ignore keys which are used by the menu, but pass any other ones up. See
+   * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    if (!MenuKeys.some(key => keycode__default["default"].isEventKey(event, key))) {
+      // Pass keydown handling up for unused keys
+      super.handleKeyDown(event);
+    }
+  }
+
+  /**
+   * Any click on a `MenuItem` puts it into the selected state.
+   * See {@link ClickableComponent#handleClick} for instances where this is called.
+   *
+   * @param {Event} event
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    this.selected(true);
+  }
+
+  /**
+   * Set the state for this menu item as selected or not.
+   *
+   * @param {boolean} selected
+   *        if the menu item is selected or not
+   */
+  selected(selected) {
+    if (this.selectable) {
+      if (selected) {
+        this.addClass('vjs-selected');
+        this.el_.setAttribute('aria-checked', 'true');
+        // aria-checked isn't fully supported by browsers/screen readers,
+        // so indicate selected state to screen reader in the control text.
+        this.controlText(', selected');
+        this.isSelected_ = true;
+      } else {
+        this.removeClass('vjs-selected');
+        this.el_.setAttribute('aria-checked', 'false');
+        // Indicate un-selected state to screen reader
+        this.controlText('');
+        this.isSelected_ = false;
+      }
+    }
+  }
+}
+Component$1.registerComponent('MenuItem', MenuItem);
+
+/**
+ * @file text-track-menu-item.js
+ */
+
+/**
+ * The specific menu item type for selecting a language within a text track kind
+ *
+ * @extends MenuItem
+ */
+class TextTrackMenuItem extends MenuItem {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    const track = options.track;
+    const tracks = player.textTracks();
+
+    // Modify options for parent MenuItem class's init.
+    options.label = track.label || track.language || 'Unknown';
+    options.selected = track.mode === 'showing';
+    super(player, options);
+    this.track = track;
+    // Determine the relevant kind(s) of tracks for this component and filter
+    // out empty kinds.
+    this.kinds = (options.kinds || [options.kind || this.track.kind]).filter(Boolean);
+    const changeHandler = (...args) => {
+      this.handleTracksChange.apply(this, args);
+    };
+    const selectedLanguageChangeHandler = (...args) => {
+      this.handleSelectedLanguageChange.apply(this, args);
+    };
+    player.on(['loadstart', 'texttrackchange'], changeHandler);
+    tracks.addEventListener('change', changeHandler);
+    tracks.addEventListener('selectedlanguagechange', selectedLanguageChangeHandler);
+    this.on('dispose', function () {
+      player.off(['loadstart', 'texttrackchange'], changeHandler);
+      tracks.removeEventListener('change', changeHandler);
+      tracks.removeEventListener('selectedlanguagechange', selectedLanguageChangeHandler);
+    });
+
+    // iOS7 doesn't dispatch change events to TextTrackLists when an
+    // associated track's mode changes. Without something like
+    // Object.observe() (also not present on iOS7), it's not
+    // possible to detect changes to the mode attribute and polyfill
+    // the change event. As a poor substitute, we manually dispatch
+    // change events whenever the controls modify the mode.
+    if (tracks.onchange === undefined) {
+      let event;
+      this.on(['tap', 'click'], function () {
+        if (typeof window__default["default"].Event !== 'object') {
+          // Android 2.3 throws an Illegal Constructor error for window.Event
+          try {
+            event = new window__default["default"].Event('change');
+          } catch (err) {
+            // continue regardless of error
+          }
+        }
+        if (!event) {
+          event = document__default["default"].createEvent('Event');
+          event.initEvent('change', true, true);
+        }
+        tracks.dispatchEvent(event);
+      });
+    }
+
+    // set the default state based on current tracks
+    this.handleTracksChange();
+  }
+
+  /**
+   * This gets called when an `TextTrackMenuItem` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} event
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    const referenceTrack = this.track;
+    const tracks = this.player_.textTracks();
+    super.handleClick(event);
+    if (!tracks) {
+      return;
+    }
+    for (let i = 0; i < tracks.length; i++) {
+      const track = tracks[i];
+
+      // If the track from the text tracks list is not of the right kind,
+      // skip it. We do not want to affect tracks of incompatible kind(s).
+      if (this.kinds.indexOf(track.kind) === -1) {
+        continue;
+      }
+
+      // If this text track is the component's track and it is not showing,
+      // set it to showing.
+      if (track === referenceTrack) {
+        if (track.mode !== 'showing') {
+          track.mode = 'showing';
+        }
+
+        // If this text track is not the component's track and it is not
+        // disabled, set it to disabled.
+      } else if (track.mode !== 'disabled') {
+        track.mode = 'disabled';
+      }
+    }
+  }
+
+  /**
+   * Handle text track list change
+   *
+   * @param {Event} event
+   *        The `change` event that caused this function to be called.
+   *
+   * @listens TextTrackList#change
+   */
+  handleTracksChange(event) {
+    const shouldBeSelected = this.track.mode === 'showing';
+
+    // Prevent redundant selected() calls because they may cause
+    // screen readers to read the appended control text unnecessarily
+    if (shouldBeSelected !== this.isSelected_) {
+      this.selected(shouldBeSelected);
+    }
+  }
+  handleSelectedLanguageChange(event) {
+    if (this.track.mode === 'showing') {
+      const selectedLanguage = this.player_.cache_.selectedLanguage;
+
+      // Don't replace the kind of track across the same language
+      if (selectedLanguage && selectedLanguage.enabled && selectedLanguage.language === this.track.language && selectedLanguage.kind !== this.track.kind) {
+        return;
+      }
+      this.player_.cache_.selectedLanguage = {
+        enabled: true,
+        language: this.track.language,
+        kind: this.track.kind
+      };
+    }
+  }
+  dispose() {
+    // remove reference to track object on dispose
+    this.track = null;
+    super.dispose();
+  }
+}
+Component$1.registerComponent('TextTrackMenuItem', TextTrackMenuItem);
+
+/**
+ * @file off-text-track-menu-item.js
+ */
+
+/**
+ * A special menu item for turning off a specific type of text track
+ *
+ * @extends TextTrackMenuItem
+ */
+class OffTextTrackMenuItem extends TextTrackMenuItem {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    // Create pseudo track info
+    // Requires options['kind']
+    options.track = {
+      player,
+      // it is no longer necessary to store `kind` or `kinds` on the track itself
+      // since they are now stored in the `kinds` property of all instances of
+      // TextTrackMenuItem, but this will remain for backwards compatibility
+      kind: options.kind,
+      kinds: options.kinds,
+      default: false,
+      mode: 'disabled'
+    };
+    if (!options.kinds) {
+      options.kinds = [options.kind];
+    }
+    if (options.label) {
+      options.track.label = options.label;
+    } else {
+      options.track.label = options.kinds.join(' and ') + ' off';
+    }
+
+    // MenuItem is selectable
+    options.selectable = true;
+    // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+    options.multiSelectable = false;
+    super(player, options);
+  }
+
+  /**
+   * Handle text track change
+   *
+   * @param {Event} event
+   *        The event that caused this function to run
+   */
+  handleTracksChange(event) {
+    const tracks = this.player().textTracks();
+    let shouldBeSelected = true;
+    for (let i = 0, l = tracks.length; i < l; i++) {
+      const track = tracks[i];
+      if (this.options_.kinds.indexOf(track.kind) > -1 && track.mode === 'showing') {
+        shouldBeSelected = false;
+        break;
+      }
+    }
+
+    // Prevent redundant selected() calls because they may cause
+    // screen readers to read the appended control text unnecessarily
+    if (shouldBeSelected !== this.isSelected_) {
+      this.selected(shouldBeSelected);
+    }
+  }
+  handleSelectedLanguageChange(event) {
+    const tracks = this.player().textTracks();
+    let allHidden = true;
+    for (let i = 0, l = tracks.length; i < l; i++) {
+      const track = tracks[i];
+      if (['captions', 'descriptions', 'subtitles'].indexOf(track.kind) > -1 && track.mode === 'showing') {
+        allHidden = false;
+        break;
+      }
+    }
+    if (allHidden) {
+      this.player_.cache_.selectedLanguage = {
+        enabled: false
+      };
+    }
+  }
+
+  /**
+   * Update control text and label on languagechange
+   */
+  handleLanguagechange() {
+    this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.label);
+    super.handleLanguagechange();
+  }
+}
+Component$1.registerComponent('OffTextTrackMenuItem', OffTextTrackMenuItem);
+
+/**
+ * @file text-track-button.js
+ */
+
+/**
+ * The base class for buttons that toggle specific text track types (e.g. subtitles)
+ *
+ * @extends MenuButton
+ */
+class TextTrackButton extends TrackButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of player options.
+   */
+  constructor(player, options = {}) {
+    options.tracks = player.textTracks();
+    super(player, options);
+  }
+
+  /**
+   * Create a menu item for each text track
+   *
+   * @param {TextTrackMenuItem[]} [items=[]]
+   *        Existing array of items to use during creation
+   *
+   * @return {TextTrackMenuItem[]}
+   *         Array of menu items that were created
+   */
+  createItems(items = [], TrackMenuItem = TextTrackMenuItem) {
+    // Label is an override for the [track] off label
+    // USed to localise captions/subtitles
+    let label;
+    if (this.label_) {
+      label = `${this.label_} off`;
+    }
+    // Add an OFF menu item to turn all tracks off
+    items.push(new OffTextTrackMenuItem(this.player_, {
+      kinds: this.kinds_,
+      kind: this.kind_,
+      label
+    }));
+    this.hideThreshold_ += 1;
+    const tracks = this.player_.textTracks();
+    if (!Array.isArray(this.kinds_)) {
+      this.kinds_ = [this.kind_];
+    }
+    for (let i = 0; i < tracks.length; i++) {
+      const track = tracks[i];
+
+      // only add tracks that are of an appropriate kind and have a label
+      if (this.kinds_.indexOf(track.kind) > -1) {
+        const item = new TrackMenuItem(this.player_, {
+          track,
+          kinds: this.kinds_,
+          kind: this.kind_,
+          // MenuItem is selectable
+          selectable: true,
+          // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+          multiSelectable: false
+        });
+        item.addClass(`vjs-${track.kind}-menu-item`);
+        items.push(item);
+      }
+    }
+    return items;
+  }
+}
+Component$1.registerComponent('TextTrackButton', TextTrackButton);
+
+/**
+ * @file chapters-track-menu-item.js
+ */
+
+/**
+ * The chapter track menu item
+ *
+ * @extends MenuItem
+ */
+class ChaptersTrackMenuItem extends MenuItem {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    const track = options.track;
+    const cue = options.cue;
+    const currentTime = player.currentTime();
+
+    // Modify options for parent MenuItem class's init.
+    options.selectable = true;
+    options.multiSelectable = false;
+    options.label = cue.text;
+    options.selected = cue.startTime <= currentTime && currentTime < cue.endTime;
+    super(player, options);
+    this.track = track;
+    this.cue = cue;
+  }
+
+  /**
+   * This gets called when an `ChaptersTrackMenuItem` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    super.handleClick();
+    this.player_.currentTime(this.cue.startTime);
+  }
+}
+Component$1.registerComponent('ChaptersTrackMenuItem', ChaptersTrackMenuItem);
+
+/**
+ * @file chapters-button.js
+ */
+
+/**
+ * The button component for toggling and selecting chapters
+ * Chapters act much differently than other text tracks
+ * Cues are navigation vs. other tracks of alternative languages
+ *
+ * @extends TextTrackButton
+ */
+class ChaptersButton extends TextTrackButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Function} [ready]
+   *        The function to call when this function is ready.
+   */
+  constructor(player, options, ready) {
+    super(player, options, ready);
+    this.setIcon('chapters');
+    this.selectCurrentItem_ = () => {
+      this.items.forEach(item => {
+        item.selected(this.track_.activeCues[0] === item.cue);
+      });
+    };
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-chapters-button ${super.buildCSSClass()}`;
+  }
+  buildWrapperCSSClass() {
+    return `vjs-chapters-button ${super.buildWrapperCSSClass()}`;
+  }
+
+  /**
+   * Update the menu based on the current state of its items.
+   *
+   * @param {Event} [event]
+   *        An event that triggered this function to run.
+   *
+   * @listens TextTrackList#addtrack
+   * @listens TextTrackList#removetrack
+   * @listens TextTrackList#change
+   */
+  update(event) {
+    if (event && event.track && event.track.kind !== 'chapters') {
+      return;
+    }
+    const track = this.findChaptersTrack();
+    if (track !== this.track_) {
+      this.setTrack(track);
+      super.update();
+    } else if (!this.items || track && track.cues && track.cues.length !== this.items.length) {
+      // Update the menu initially or if the number of cues has changed since set
+      super.update();
+    }
+  }
+
+  /**
+   * Set the currently selected track for the chapters button.
+   *
+   * @param {TextTrack} track
+   *        The new track to select. Nothing will change if this is the currently selected
+   *        track.
+   */
+  setTrack(track) {
+    if (this.track_ === track) {
+      return;
+    }
+    if (!this.updateHandler_) {
+      this.updateHandler_ = this.update.bind(this);
+    }
+
+    // here this.track_ refers to the old track instance
+    if (this.track_) {
+      const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
+      if (remoteTextTrackEl) {
+        remoteTextTrackEl.removeEventListener('load', this.updateHandler_);
+      }
+      this.track_.removeEventListener('cuechange', this.selectCurrentItem_);
+      this.track_ = null;
+    }
+    this.track_ = track;
+
+    // here this.track_ refers to the new track instance
+    if (this.track_) {
+      this.track_.mode = 'hidden';
+      const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
+      if (remoteTextTrackEl) {
+        remoteTextTrackEl.addEventListener('load', this.updateHandler_);
+      }
+      this.track_.addEventListener('cuechange', this.selectCurrentItem_);
+    }
+  }
+
+  /**
+   * Find the track object that is currently in use by this ChaptersButton
+   *
+   * @return {TextTrack|undefined}
+   *         The current track or undefined if none was found.
+   */
+  findChaptersTrack() {
+    const tracks = this.player_.textTracks() || [];
+    for (let i = tracks.length - 1; i >= 0; i--) {
+      // We will always choose the last track as our chaptersTrack
+      const track = tracks[i];
+      if (track.kind === this.kind_) {
+        return track;
+      }
+    }
+  }
+
+  /**
+   * Get the caption for the ChaptersButton based on the track label. This will also
+   * use the current tracks localized kind as a fallback if a label does not exist.
+   *
+   * @return {string}
+   *         The tracks current label or the localized track kind.
+   */
+  getMenuCaption() {
+    if (this.track_ && this.track_.label) {
+      return this.track_.label;
+    }
+    return this.localize(toTitleCase$1(this.kind_));
+  }
+
+  /**
+   * Create menu from chapter track
+   *
+   * @return { import('../../menu/menu').default }
+   *         New menu for the chapter buttons
+   */
+  createMenu() {
+    this.options_.title = this.getMenuCaption();
+    return super.createMenu();
+  }
+
+  /**
+   * Create a menu item for each text track
+   *
+   * @return  { import('./text-track-menu-item').default[] }
+   *         Array of menu items
+   */
+  createItems() {
+    const items = [];
+    if (!this.track_) {
+      return items;
+    }
+    const cues = this.track_.cues;
+    if (!cues) {
+      return items;
+    }
+    for (let i = 0, l = cues.length; i < l; i++) {
+      const cue = cues[i];
+      const mi = new ChaptersTrackMenuItem(this.player_, {
+        track: this.track_,
+        cue
+      });
+      items.push(mi);
+    }
+    return items;
+  }
+}
+
+/**
+ * `kind` of TextTrack to look for to associate it with this menu.
+ *
+ * @type {string}
+ * @private
+ */
+ChaptersButton.prototype.kind_ = 'chapters';
+
+/**
+ * The text that should display over the `ChaptersButton`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+ChaptersButton.prototype.controlText_ = 'Chapters';
+Component$1.registerComponent('ChaptersButton', ChaptersButton);
+
+/**
+ * @file descriptions-button.js
+ */
+
+/**
+ * The button component for toggling and selecting descriptions
+ *
+ * @extends TextTrackButton
+ */
+class DescriptionsButton extends TextTrackButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Function} [ready]
+   *        The function to call when this component is ready.
+   */
+  constructor(player, options, ready) {
+    super(player, options, ready);
+    this.setIcon('audio-description');
+    const tracks = player.textTracks();
+    const changeHandler = bind_(this, this.handleTracksChange);
+    tracks.addEventListener('change', changeHandler);
+    this.on('dispose', function () {
+      tracks.removeEventListener('change', changeHandler);
+    });
+  }
+
+  /**
+   * Handle text track change
+   *
+   * @param {Event} event
+   *        The event that caused this function to run
+   *
+   * @listens TextTrackList#change
+   */
+  handleTracksChange(event) {
+    const tracks = this.player().textTracks();
+    let disabled = false;
+
+    // Check whether a track of a different kind is showing
+    for (let i = 0, l = tracks.length; i < l; i++) {
+      const track = tracks[i];
+      if (track.kind !== this.kind_ && track.mode === 'showing') {
+        disabled = true;
+        break;
+      }
+    }
+
+    // If another track is showing, disable this menu button
+    if (disabled) {
+      this.disable();
+    } else {
+      this.enable();
+    }
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-descriptions-button ${super.buildCSSClass()}`;
+  }
+  buildWrapperCSSClass() {
+    return `vjs-descriptions-button ${super.buildWrapperCSSClass()}`;
+  }
+}
+
+/**
+ * `kind` of TextTrack to look for to associate it with this menu.
+ *
+ * @type {string}
+ * @private
+ */
+DescriptionsButton.prototype.kind_ = 'descriptions';
+
+/**
+ * The text that should display over the `DescriptionsButton`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+DescriptionsButton.prototype.controlText_ = 'Descriptions';
+Component$1.registerComponent('DescriptionsButton', DescriptionsButton);
+
+/**
+ * @file subtitles-button.js
+ */
+
+/**
+ * The button component for toggling and selecting subtitles
+ *
+ * @extends TextTrackButton
+ */
+class SubtitlesButton extends TextTrackButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Function} [ready]
+   *        The function to call when this component is ready.
+   */
+  constructor(player, options, ready) {
+    super(player, options, ready);
+    this.setIcon('subtitles');
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-subtitles-button ${super.buildCSSClass()}`;
+  }
+  buildWrapperCSSClass() {
+    return `vjs-subtitles-button ${super.buildWrapperCSSClass()}`;
+  }
+}
+
+/**
+ * `kind` of TextTrack to look for to associate it with this menu.
+ *
+ * @type {string}
+ * @private
+ */
+SubtitlesButton.prototype.kind_ = 'subtitles';
+
+/**
+ * The text that should display over the `SubtitlesButton`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+SubtitlesButton.prototype.controlText_ = 'Subtitles';
+Component$1.registerComponent('SubtitlesButton', SubtitlesButton);
+
+/**
+ * @file caption-settings-menu-item.js
+ */
+
+/**
+ * The menu item for caption track settings menu
+ *
+ * @extends TextTrackMenuItem
+ */
+class CaptionSettingsMenuItem extends TextTrackMenuItem {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    options.track = {
+      player,
+      kind: options.kind,
+      label: options.kind + ' settings',
+      selectable: false,
+      default: false,
+      mode: 'disabled'
+    };
+
+    // CaptionSettingsMenuItem has no concept of 'selected'
+    options.selectable = false;
+    options.name = 'CaptionSettingsMenuItem';
+    super(player, options);
+    this.addClass('vjs-texttrack-settings');
+    this.controlText(', opens ' + options.kind + ' settings dialog');
+  }
+
+  /**
+   * This gets called when an `CaptionSettingsMenuItem` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    this.player().getChild('textTrackSettings').open();
+  }
+
+  /**
+   * Update control text and label on languagechange
+   */
+  handleLanguagechange() {
+    this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.kind + ' settings');
+    super.handleLanguagechange();
+  }
+}
+Component$1.registerComponent('CaptionSettingsMenuItem', CaptionSettingsMenuItem);
+
+/**
+ * @file captions-button.js
+ */
+
+/**
+ * The button component for toggling and selecting captions
+ *
+ * @extends TextTrackButton
+ */
+class CaptionsButton extends TextTrackButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Function} [ready]
+   *        The function to call when this component is ready.
+   */
+  constructor(player, options, ready) {
+    super(player, options, ready);
+    this.setIcon('captions');
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-captions-button ${super.buildCSSClass()}`;
+  }
+  buildWrapperCSSClass() {
+    return `vjs-captions-button ${super.buildWrapperCSSClass()}`;
+  }
+
+  /**
+   * Create caption menu items
+   *
+   * @return {CaptionSettingsMenuItem[]}
+   *         The array of current menu items.
+   */
+  createItems() {
+    const items = [];
+    if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks) && this.player().getChild('textTrackSettings')) {
+      items.push(new CaptionSettingsMenuItem(this.player_, {
+        kind: this.kind_
+      }));
+      this.hideThreshold_ += 1;
+    }
+    return super.createItems(items);
+  }
+}
+
+/**
+ * `kind` of TextTrack to look for to associate it with this menu.
+ *
+ * @type {string}
+ * @private
+ */
+CaptionsButton.prototype.kind_ = 'captions';
+
+/**
+ * The text that should display over the `CaptionsButton`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+CaptionsButton.prototype.controlText_ = 'Captions';
+Component$1.registerComponent('CaptionsButton', CaptionsButton);
+
+/**
+ * @file subs-caps-menu-item.js
+ */
+
+/**
+ * SubsCapsMenuItem has an [cc] icon to distinguish captions from subtitles
+ * in the SubsCapsMenu.
+ *
+ * @extends TextTrackMenuItem
+ */
+class SubsCapsMenuItem extends TextTrackMenuItem {
+  createEl(type, props, attrs) {
+    const el = super.createEl(type, props, attrs);
+    const parentSpan = el.querySelector('.vjs-menu-item-text');
+    if (this.options_.track.kind === 'captions') {
+      if (this.player_.options_.experimentalSvgIcons) {
+        this.setIcon('captions', el);
+      } else {
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+      }
+      parentSpan.appendChild(createEl('span', {
+        className: 'vjs-control-text',
+        // space added as the text will visually flow with the
+        // label
+        textContent: ` ${this.localize('Captions')}`
+      }));
+    }
+    return el;
+  }
+}
+Component$1.registerComponent('SubsCapsMenuItem', SubsCapsMenuItem);
+
+/**
+ * @file sub-caps-button.js
+ */
+
+/**
+ * The button component for toggling and selecting captions and/or subtitles
+ *
+ * @extends TextTrackButton
+ */
+class SubsCapsButton extends TextTrackButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Function} [ready]
+   *        The function to call when this component is ready.
+   */
+  constructor(player, options = {}) {
+    super(player, options);
+
+    // Although North America uses "captions" in most cases for
+    // "captions and subtitles" other locales use "subtitles"
+    this.label_ = 'subtitles';
+    this.setIcon('subtitles');
+    if (['en', 'en-us', 'en-ca', 'fr-ca'].indexOf(this.player_.language_) > -1) {
+      this.label_ = 'captions';
+      this.setIcon('captions');
+    }
+    this.menuButton_.controlText(toTitleCase$1(this.label_));
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-subs-caps-button ${super.buildCSSClass()}`;
+  }
+  buildWrapperCSSClass() {
+    return `vjs-subs-caps-button ${super.buildWrapperCSSClass()}`;
+  }
+
+  /**
+   * Create caption/subtitles menu items
+   *
+   * @return {CaptionSettingsMenuItem[]}
+   *         The array of current menu items.
+   */
+  createItems() {
+    let items = [];
+    if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks) && this.player().getChild('textTrackSettings')) {
+      items.push(new CaptionSettingsMenuItem(this.player_, {
+        kind: this.label_
+      }));
+      this.hideThreshold_ += 1;
+    }
+    items = super.createItems(items, SubsCapsMenuItem);
+    return items;
+  }
+}
+
+/**
+ * `kind`s of TextTrack to look for to associate it with this menu.
+ *
+ * @type {array}
+ * @private
+ */
+SubsCapsButton.prototype.kinds_ = ['captions', 'subtitles'];
+
+/**
+ * The text that should display over the `SubsCapsButton`s controls.
+ *
+ *
+ * @type {string}
+ * @protected
+ */
+SubsCapsButton.prototype.controlText_ = 'Subtitles';
+Component$1.registerComponent('SubsCapsButton', SubsCapsButton);
+
+/**
+ * @file audio-track-menu-item.js
+ */
+
+/**
+ * An {@link AudioTrack} {@link MenuItem}
+ *
+ * @extends MenuItem
+ */
+class AudioTrackMenuItem extends MenuItem {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    const track = options.track;
+    const tracks = player.audioTracks();
+
+    // Modify options for parent MenuItem class's init.
+    options.label = track.label || track.language || 'Unknown';
+    options.selected = track.enabled;
+    super(player, options);
+    this.track = track;
+    this.addClass(`vjs-${track.kind}-menu-item`);
+    const changeHandler = (...args) => {
+      this.handleTracksChange.apply(this, args);
+    };
+    tracks.addEventListener('change', changeHandler);
+    this.on('dispose', () => {
+      tracks.removeEventListener('change', changeHandler);
+    });
+  }
+  createEl(type, props, attrs) {
+    const el = super.createEl(type, props, attrs);
+    const parentSpan = el.querySelector('.vjs-menu-item-text');
+    if (['main-desc', 'description'].indexOf(this.options_.track.kind) >= 0) {
+      parentSpan.appendChild(createEl('span', {
+        className: 'vjs-icon-placeholder'
+      }, {
+        'aria-hidden': true
+      }));
+      parentSpan.appendChild(createEl('span', {
+        className: 'vjs-control-text',
+        textContent: ' ' + this.localize('Descriptions')
+      }));
+    }
+    return el;
+  }
+
+  /**
+   * This gets called when an `AudioTrackMenuItem is "clicked". See {@link ClickableComponent}
+   * for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    super.handleClick(event);
+
+    // the audio track list will automatically toggle other tracks
+    // off for us.
+    this.track.enabled = true;
+
+    // when native audio tracks are used, we want to make sure that other tracks are turned off
+    if (this.player_.tech_.featuresNativeAudioTracks) {
+      const tracks = this.player_.audioTracks();
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+
+        // skip the current track since we enabled it above
+        if (track === this.track) {
+          continue;
+        }
+        track.enabled = track === this.track;
+      }
+    }
+  }
+
+  /**
+   * Handle any {@link AudioTrack} change.
+   *
+   * @param {Event} [event]
+   *        The {@link AudioTrackList#change} event that caused this to run.
+   *
+   * @listens AudioTrackList#change
+   */
+  handleTracksChange(event) {
+    this.selected(this.track.enabled);
+  }
+}
+Component$1.registerComponent('AudioTrackMenuItem', AudioTrackMenuItem);
+
+/**
+ * @file audio-track-button.js
+ */
+
+/**
+ * The base class for buttons that toggle specific {@link AudioTrack} types.
+ *
+ * @extends TrackButton
+ */
+class AudioTrackButton extends TrackButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param {Player} player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of player options.
+   */
+  constructor(player, options = {}) {
+    options.tracks = player.audioTracks();
+    super(player, options);
+    this.setIcon('audio');
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-audio-button ${super.buildCSSClass()}`;
+  }
+  buildWrapperCSSClass() {
+    return `vjs-audio-button ${super.buildWrapperCSSClass()}`;
+  }
+
+  /**
+   * Create a menu item for each audio track
+   *
+   * @param {AudioTrackMenuItem[]} [items=[]]
+   *        An array of existing menu items to use.
+   *
+   * @return {AudioTrackMenuItem[]}
+   *         An array of menu items
+   */
+  createItems(items = []) {
+    // if there's only one audio track, there no point in showing it
+    this.hideThreshold_ = 1;
+    const tracks = this.player_.audioTracks();
+    for (let i = 0; i < tracks.length; i++) {
+      const track = tracks[i];
+      items.push(new AudioTrackMenuItem(this.player_, {
+        track,
+        // MenuItem is selectable
+        selectable: true,
+        // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+        multiSelectable: false
+      }));
+    }
+    return items;
+  }
+}
+
+/**
+ * The text that should display over the `AudioTrackButton`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+AudioTrackButton.prototype.controlText_ = 'Audio Track';
+Component$1.registerComponent('AudioTrackButton', AudioTrackButton);
+
+/**
+ * @file playback-rate-menu-item.js
+ */
+
+/**
+ * The specific menu item type for selecting a playback rate.
+ *
+ * @extends MenuItem
+ */
+class PlaybackRateMenuItem extends MenuItem {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    const label = options.rate;
+    const rate = parseFloat(label, 10);
+
+    // Modify options for parent MenuItem class's init.
+    options.label = label;
+    options.selected = rate === player.playbackRate();
+    options.selectable = true;
+    options.multiSelectable = false;
+    super(player, options);
+    this.label = label;
+    this.rate = rate;
+    this.on(player, 'ratechange', e => this.update(e));
+  }
+
+  /**
+   * This gets called when an `PlaybackRateMenuItem` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    super.handleClick();
+    this.player().playbackRate(this.rate);
+  }
+
+  /**
+   * Update the PlaybackRateMenuItem when the playbackrate changes.
+   *
+   * @param {Event} [event]
+   *        The `ratechange` event that caused this function to run.
+   *
+   * @listens Player#ratechange
+   */
+  update(event) {
+    this.selected(this.player().playbackRate() === this.rate);
+  }
+}
+
+/**
+ * The text that should display over the `PlaybackRateMenuItem`s controls. Added for localization.
+ *
+ * @type {string}
+ * @private
+ */
+PlaybackRateMenuItem.prototype.contentElType = 'button';
+Component$1.registerComponent('PlaybackRateMenuItem', PlaybackRateMenuItem);
+
+/**
+ * @file playback-rate-menu-button.js
+ */
+
+/**
+ * The component for controlling the playback rate.
+ *
+ * @extends MenuButton
+ */
+class PlaybackRateMenuButton extends MenuButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);
+    this.updateVisibility();
+    this.updateLabel();
+    this.on(player, 'loadstart', e => this.updateVisibility(e));
+    this.on(player, 'ratechange', e => this.updateLabel(e));
+    this.on(player, 'playbackrateschange', e => this.handlePlaybackRateschange(e));
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const el = super.createEl();
+    this.labelElId_ = 'vjs-playback-rate-value-label-' + this.id_;
+    this.labelEl_ = createEl('div', {
+      className: 'vjs-playback-rate-value',
+      id: this.labelElId_,
+      textContent: '1x'
+    });
+    el.appendChild(this.labelEl_);
+    return el;
+  }
+  dispose() {
+    this.labelEl_ = null;
+    super.dispose();
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-playback-rate ${super.buildCSSClass()}`;
+  }
+  buildWrapperCSSClass() {
+    return `vjs-playback-rate ${super.buildWrapperCSSClass()}`;
+  }
+
+  /**
+   * Create the list of menu items. Specific to each subclass.
+   *
+   */
+  createItems() {
+    const rates = this.playbackRates();
+    const items = [];
+    for (let i = rates.length - 1; i >= 0; i--) {
+      items.push(new PlaybackRateMenuItem(this.player(), {
+        rate: rates[i] + 'x'
+      }));
+    }
+    return items;
+  }
+
+  /**
+   * On playbackrateschange, update the menu to account for the new items.
+   *
+   * @listens Player#playbackrateschange
+   */
+  handlePlaybackRateschange(event) {
+    this.update();
+  }
+
+  /**
+   * Get possible playback rates
+   *
+   * @return {Array}
+   *         All possible playback rates
+   */
+  playbackRates() {
+    const player = this.player();
+    return player.playbackRates && player.playbackRates() || [];
+  }
+
+  /**
+   * Get whether playback rates is supported by the tech
+   * and an array of playback rates exists
+   *
+   * @return {boolean}
+   *         Whether changing playback rate is supported
+   */
+  playbackRateSupported() {
+    return this.player().tech_ && this.player().tech_.featuresPlaybackRate && this.playbackRates() && this.playbackRates().length > 0;
+  }
+
+  /**
+   * Hide playback rate controls when they're no playback rate options to select
+   *
+   * @param {Event} [event]
+   *        The event that caused this function to run.
+   *
+   * @listens Player#loadstart
+   */
+  updateVisibility(event) {
+    if (this.playbackRateSupported()) {
+      this.removeClass('vjs-hidden');
+    } else {
+      this.addClass('vjs-hidden');
+    }
+  }
+
+  /**
+   * Update button label when rate changed
+   *
+   * @param {Event} [event]
+   *        The event that caused this function to run.
+   *
+   * @listens Player#ratechange
+   */
+  updateLabel(event) {
+    if (this.playbackRateSupported()) {
+      this.labelEl_.textContent = this.player().playbackRate() + 'x';
+    }
+  }
+}
+
+/**
+ * The text that should display over the `PlaybackRateMenuButton`s controls.
+ *
+ * Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+PlaybackRateMenuButton.prototype.controlText_ = 'Playback Rate';
+Component$1.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton);
+
+/**
+ * @file spacer.js
+ */
+
+/**
+ * Just an empty spacer element that can be used as an append point for plugins, etc.
+ * Also can be used to create space between elements when necessary.
+ *
+ * @extends Component
+ */
+class Spacer extends Component$1 {
+  /**
+  * Builds the default DOM `className`.
+  *
+  * @return {string}
+  *         The DOM `className` for this object.
+  */
+  buildCSSClass() {
+    return `vjs-spacer ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl(tag = 'div', props = {}, attributes = {}) {
+    if (!props.className) {
+      props.className = this.buildCSSClass();
+    }
+    return super.createEl(tag, props, attributes);
+  }
+}
+Component$1.registerComponent('Spacer', Spacer);
+
+/**
+ * @file custom-control-spacer.js
+ */
+
+/**
+ * Spacer specifically meant to be used as an insertion point for new plugins, etc.
+ *
+ * @extends Spacer
+ */
+class CustomControlSpacer extends Spacer {
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-custom-control-spacer ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: this.buildCSSClass(),
+      // No-flex/table-cell mode requires there be some content
+      // in the cell to fill the remaining space of the table.
+      textContent: '\u00a0'
+    });
+  }
+}
+Component$1.registerComponent('CustomControlSpacer', CustomControlSpacer);
+
+/**
+ * @file control-bar.js
+ */
+
+/**
+ * Container of main controls.
+ *
+ * @extends Component
+ */
+class ControlBar extends Component$1 {
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-control-bar',
+      dir: 'ltr'
+    });
+  }
+}
+
+/**
+ * Default options for `ControlBar`
+ *
+ * @type {Object}
+ * @private
+ */
+ControlBar.prototype.options_ = {
+  children: ['playToggle', 'skipBackward', 'skipForward', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'seekToLive', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'pictureInPictureToggle', 'fullscreenToggle']
+};
+Component$1.registerComponent('ControlBar', ControlBar);
+
+/**
+ * @file error-display.js
+ */
+
+/**
+ * A display that indicates an error has occurred. This means that the video
+ * is unplayable.
+ *
+ * @extends ModalDialog
+ */
+class ErrorDisplay extends ModalDialog {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param  { import('./player').default } player
+   *         The `Player` that this class should be attached to.
+   *
+   * @param  {Object} [options]
+   *         The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.on(player, 'error', e => {
+      this.open(e);
+    });
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   *
+   * @deprecated Since version 5.
+   */
+  buildCSSClass() {
+    return `vjs-error-display ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Gets the localized error message based on the `Player`s error.
+   *
+   * @return {string}
+   *         The `Player`s error message localized or an empty string.
+   */
+  content() {
+    const error = this.player().error();
+    return error ? this.localize(error.message) : '';
+  }
+}
+
+/**
+ * The default options for an `ErrorDisplay`.
+ *
+ * @private
+ */
+ErrorDisplay.prototype.options_ = Object.assign({}, ModalDialog.prototype.options_, {
+  pauseOnOpen: false,
+  fillAlways: true,
+  temporary: false,
+  uncloseable: true
+});
+Component$1.registerComponent('ErrorDisplay', ErrorDisplay);
+
+/**
+ * @file text-track-settings.js
+ */
+const LOCAL_STORAGE_KEY$1 = 'vjs-text-track-settings';
+const COLOR_BLACK = ['#000', 'Black'];
+const COLOR_BLUE = ['#00F', 'Blue'];
+const COLOR_CYAN = ['#0FF', 'Cyan'];
+const COLOR_GREEN = ['#0F0', 'Green'];
+const COLOR_MAGENTA = ['#F0F', 'Magenta'];
+const COLOR_RED = ['#F00', 'Red'];
+const COLOR_WHITE = ['#FFF', 'White'];
+const COLOR_YELLOW = ['#FF0', 'Yellow'];
+const OPACITY_OPAQUE = ['1', 'Opaque'];
+const OPACITY_SEMI = ['0.5', 'Semi-Transparent'];
+const OPACITY_TRANS = ['0', 'Transparent'];
+
+// Configuration for the various <select> elements in the DOM of this component.
+//
+// Possible keys include:
+//
+// `default`:
+//   The default option index. Only needs to be provided if not zero.
+// `parser`:
+//   A function which is used to parse the value from the selected option in
+//   a customized way.
+// `selector`:
+//   The selector used to find the associated <select> element.
+const selectConfigs = {
+  backgroundColor: {
+    selector: '.vjs-bg-color > select',
+    id: 'captions-background-color-%s',
+    label: 'Color',
+    options: [COLOR_BLACK, COLOR_WHITE, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
+  },
+  backgroundOpacity: {
+    selector: '.vjs-bg-opacity > select',
+    id: 'captions-background-opacity-%s',
+    label: 'Opacity',
+    options: [OPACITY_OPAQUE, OPACITY_SEMI, OPACITY_TRANS]
+  },
+  color: {
+    selector: '.vjs-text-color > select',
+    id: 'captions-foreground-color-%s',
+    label: 'Color',
+    options: [COLOR_WHITE, COLOR_BLACK, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
+  },
+  edgeStyle: {
+    selector: '.vjs-edge-style > select',
+    id: '%s',
+    label: 'Text Edge Style',
+    options: [['none', 'None'], ['raised', 'Raised'], ['depressed', 'Depressed'], ['uniform', 'Uniform'], ['dropshadow', 'Drop shadow']]
+  },
+  fontFamily: {
+    selector: '.vjs-font-family > select',
+    id: 'captions-font-family-%s',
+    label: 'Font Family',
+    options: [['proportionalSansSerif', 'Proportional Sans-Serif'], ['monospaceSansSerif', 'Monospace Sans-Serif'], ['proportionalSerif', 'Proportional Serif'], ['monospaceSerif', 'Monospace Serif'], ['casual', 'Casual'], ['script', 'Script'], ['small-caps', 'Small Caps']]
+  },
+  fontPercent: {
+    selector: '.vjs-font-percent > select',
+    id: 'captions-font-size-%s',
+    label: 'Font Size',
+    options: [['0.50', '50%'], ['0.75', '75%'], ['1.00', '100%'], ['1.25', '125%'], ['1.50', '150%'], ['1.75', '175%'], ['2.00', '200%'], ['3.00', '300%'], ['4.00', '400%']],
+    default: 2,
+    parser: v => v === '1.00' ? null : Number(v)
+  },
+  textOpacity: {
+    selector: '.vjs-text-opacity > select',
+    id: 'captions-foreground-opacity-%s',
+    label: 'Opacity',
+    options: [OPACITY_OPAQUE, OPACITY_SEMI]
+  },
+  // Options for this object are defined below.
+  windowColor: {
+    selector: '.vjs-window-color > select',
+    id: 'captions-window-color-%s',
+    label: 'Color'
+  },
+  // Options for this object are defined below.
+  windowOpacity: {
+    selector: '.vjs-window-opacity > select',
+    id: 'captions-window-opacity-%s',
+    label: 'Opacity',
+    options: [OPACITY_TRANS, OPACITY_SEMI, OPACITY_OPAQUE]
+  }
+};
+selectConfigs.windowColor.options = selectConfigs.backgroundColor.options;
+
+/**
+ * Get the actual value of an option.
+ *
+ * @param  {string} value
+ *         The value to get
+ *
+ * @param  {Function} [parser]
+ *         Optional function to adjust the value.
+ *
+ * @return {*}
+ *         - Will be `undefined` if no value exists
+ *         - Will be `undefined` if the given value is "none".
+ *         - Will be the actual value otherwise.
+ *
+ * @private
+ */
+function parseOptionValue(value, parser) {
+  if (parser) {
+    value = parser(value);
+  }
+  if (value && value !== 'none') {
+    return value;
+  }
+}
+
+/**
+ * Gets the value of the selected <option> element within a <select> element.
+ *
+ * @param  {Element} el
+ *         the element to look in
+ *
+ * @param  {Function} [parser]
+ *         Optional function to adjust the value.
+ *
+ * @return {*}
+ *         - Will be `undefined` if no value exists
+ *         - Will be `undefined` if the given value is "none".
+ *         - Will be the actual value otherwise.
+ *
+ * @private
+ */
+function getSelectedOptionValue(el, parser) {
+  const value = el.options[el.options.selectedIndex].value;
+  return parseOptionValue(value, parser);
+}
+
+/**
+ * Sets the selected <option> element within a <select> element based on a
+ * given value.
+ *
+ * @param {Element} el
+ *        The element to look in.
+ *
+ * @param {string} value
+ *        the property to look on.
+ *
+ * @param {Function} [parser]
+ *        Optional function to adjust the value before comparing.
+ *
+ * @private
+ */
+function setSelectedOption(el, value, parser) {
+  if (!value) {
+    return;
+  }
+  for (let i = 0; i < el.options.length; i++) {
+    if (parseOptionValue(el.options[i].value, parser) === value) {
+      el.selectedIndex = i;
+      break;
+    }
+  }
+}
+
+/**
+ * Manipulate Text Tracks settings.
+ *
+ * @extends ModalDialog
+ */
+class TextTrackSettings extends ModalDialog {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../player').default } player
+   *         The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *         The key/value store of player options.
+   */
+  constructor(player, options) {
+    options.temporary = false;
+    super(player, options);
+    this.updateDisplay = this.updateDisplay.bind(this);
+
+    // fill the modal and pretend we have opened it
+    this.fill();
+    this.hasBeenOpened_ = this.hasBeenFilled_ = true;
+    this.endDialog = createEl('p', {
+      className: 'vjs-control-text',
+      textContent: this.localize('End of dialog window.')
+    });
+    this.el().appendChild(this.endDialog);
+    this.setDefaults();
+
+    // Grab `persistTextTrackSettings` from the player options if not passed in child options
+    if (options.persistTextTrackSettings === undefined) {
+      this.options_.persistTextTrackSettings = this.options_.playerOptions.persistTextTrackSettings;
+    }
+    this.on(this.$('.vjs-done-button'), 'click', () => {
+      this.saveSettings();
+      this.close();
+    });
+    this.on(this.$('.vjs-default-button'), 'click', () => {
+      this.setDefaults();
+      this.updateDisplay();
+    });
+    each(selectConfigs, config => {
+      this.on(this.$(config.selector), 'change', this.updateDisplay);
+    });
+    if (this.options_.persistTextTrackSettings) {
+      this.restoreSettings();
+    }
+  }
+  dispose() {
+    this.endDialog = null;
+    super.dispose();
+  }
+
+  /**
+   * Create a <select> element with configured options.
+   *
+   * @param {string} key
+   *        Configuration key to use during creation.
+   *
+   * @param {string} [legendId]
+   *        Id of associated <legend>.
+   *
+   * @param {string} [type=label]
+   *        Type of labelling element, `label` or `legend`
+   *
+   * @return {string}
+   *         An HTML string.
+   *
+   * @private
+   */
+  createElSelect_(key, legendId = '', type = 'label') {
+    const config = selectConfigs[key];
+    const id = config.id.replace('%s', this.id_);
+    const selectLabelledbyIds = [legendId, id].join(' ').trim();
+    const guid = `vjs_select_${newGUID()}`;
+    return [`<${type} id="${id}"${type === 'label' ? ` for="${guid}" class="vjs-label"` : ''}>`, this.localize(config.label), `</${type}>`, `<select aria-labelledby="${selectLabelledbyIds}" id="${guid}">`].concat(config.options.map(o => {
+      const optionId = id + '-' + o[1].replace(/\W+/g, '');
+      return [`<option id="${optionId}" value="${o[0]}" `, `aria-labelledby="${selectLabelledbyIds} ${optionId}">`, this.localize(o[1]), '</option>'].join('');
+    })).concat('</select>').join('');
+  }
+
+  /**
+   * Create foreground color element for the component
+   *
+   * @return {string}
+   *         An HTML string.
+   *
+   * @private
+   */
+  createElFgColor_() {
+    const legendId = `captions-text-legend-${this.id_}`;
+    return ['<fieldset class="vjs-fg vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Text'), '</legend>', '<span class="vjs-text-color">', this.createElSelect_('color', legendId), '</span>', '<span class="vjs-text-opacity vjs-opacity">', this.createElSelect_('textOpacity', legendId), '</span>', '</fieldset>'].join('');
+  }
+
+  /**
+   * Create background color element for the component
+   *
+   * @return {string}
+   *         An HTML string.
+   *
+   * @private
+   */
+  createElBgColor_() {
+    const legendId = `captions-background-${this.id_}`;
+    return ['<fieldset class="vjs-bg vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Text Background'), '</legend>', '<span class="vjs-bg-color">', this.createElSelect_('backgroundColor', legendId), '</span>', '<span class="vjs-bg-opacity vjs-opacity">', this.createElSelect_('backgroundOpacity', legendId), '</span>', '</fieldset>'].join('');
+  }
+
+  /**
+   * Create window color element for the component
+   *
+   * @return {string}
+   *         An HTML string.
+   *
+   * @private
+   */
+  createElWinColor_() {
+    const legendId = `captions-window-${this.id_}`;
+    return ['<fieldset class="vjs-window vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Caption Area Background'), '</legend>', '<span class="vjs-window-color">', this.createElSelect_('windowColor', legendId), '</span>', '<span class="vjs-window-opacity vjs-opacity">', this.createElSelect_('windowOpacity', legendId), '</span>', '</fieldset>'].join('');
+  }
+
+  /**
+   * Create color elements for the component
+   *
+   * @return {Element}
+   *         The element that was created
+   *
+   * @private
+   */
+  createElColors_() {
+    return createEl('div', {
+      className: 'vjs-track-settings-colors',
+      innerHTML: [this.createElFgColor_(), this.createElBgColor_(), this.createElWinColor_()].join('')
+    });
+  }
+
+  /**
+   * Create font elements for the component
+   *
+   * @return {Element}
+   *         The element that was created.
+   *
+   * @private
+   */
+  createElFont_() {
+    return createEl('div', {
+      className: 'vjs-track-settings-font',
+      innerHTML: ['<fieldset class="vjs-font-percent vjs-track-setting">', this.createElSelect_('fontPercent', '', 'legend'), '</fieldset>', '<fieldset class="vjs-edge-style vjs-track-setting">', this.createElSelect_('edgeStyle', '', 'legend'), '</fieldset>', '<fieldset class="vjs-font-family vjs-track-setting">', this.createElSelect_('fontFamily', '', 'legend'), '</fieldset>'].join('')
+    });
+  }
+
+  /**
+   * Create controls for the component
+   *
+   * @return {Element}
+   *         The element that was created.
+   *
+   * @private
+   */
+  createElControls_() {
+    const defaultsDescription = this.localize('restore all settings to the default values');
+    return createEl('div', {
+      className: 'vjs-track-settings-controls',
+      innerHTML: [`<button type="button" class="vjs-default-button" title="${defaultsDescription}">`, this.localize('Reset'), `<span class="vjs-control-text"> ${defaultsDescription}</span>`, '</button>', `<button type="button" class="vjs-done-button">${this.localize('Done')}</button>`].join('')
+    });
+  }
+  content() {
+    return [this.createElColors_(), this.createElFont_(), this.createElControls_()];
+  }
+  label() {
+    return this.localize('Caption Settings Dialog');
+  }
+  description() {
+    return this.localize('Beginning of dialog window. Escape will cancel and close the window.');
+  }
+  buildCSSClass() {
+    return super.buildCSSClass() + ' vjs-text-track-settings';
+  }
+
+  /**
+   * Gets an object of text track settings (or null).
+   *
+   * @return {Object}
+   *         An object with config values parsed from the DOM or localStorage.
+   */
+  getValues() {
+    return reduce(selectConfigs, (accum, config, key) => {
+      const value = getSelectedOptionValue(this.$(config.selector), config.parser);
+      if (value !== undefined) {
+        accum[key] = value;
+      }
+      return accum;
+    }, {});
+  }
+
+  /**
+   * Sets text track settings from an object of values.
+   *
+   * @param {Object} values
+   *        An object with config values parsed from the DOM or localStorage.
+   */
+  setValues(values) {
+    each(selectConfigs, (config, key) => {
+      setSelectedOption(this.$(config.selector), values[key], config.parser);
+    });
+  }
+
+  /**
+   * Sets all `<select>` elements to their default values.
+   */
+  setDefaults() {
+    each(selectConfigs, config => {
+      const index = config.hasOwnProperty('default') ? config.default : 0;
+      this.$(config.selector).selectedIndex = index;
+    });
+  }
+
+  /**
+   * Restore texttrack settings from localStorage
+   */
+  restoreSettings() {
+    let values;
+    try {
+      values = JSON.parse(window__default["default"].localStorage.getItem(LOCAL_STORAGE_KEY$1));
+    } catch (err) {
+      log$1.warn(err);
+    }
+    if (values) {
+      this.setValues(values);
+    }
+  }
+
+  /**
+   * Save text track settings to localStorage
+   */
+  saveSettings() {
+    if (!this.options_.persistTextTrackSettings) {
+      return;
+    }
+    const values = this.getValues();
+    try {
+      if (Object.keys(values).length) {
+        window__default["default"].localStorage.setItem(LOCAL_STORAGE_KEY$1, JSON.stringify(values));
+      } else {
+        window__default["default"].localStorage.removeItem(LOCAL_STORAGE_KEY$1);
+      }
+    } catch (err) {
+      log$1.warn(err);
+    }
+  }
+
+  /**
+   * Update display of text track settings
+   */
+  updateDisplay() {
+    const ttDisplay = this.player_.getChild('textTrackDisplay');
+    if (ttDisplay) {
+      ttDisplay.updateDisplay();
+    }
+  }
+
+  /**
+   * conditionally blur the element and refocus the captions button
+   *
+   * @private
+   */
+  conditionalBlur_() {
+    this.previouslyActiveEl_ = null;
+    const cb = this.player_.controlBar;
+    const subsCapsBtn = cb && cb.subsCapsButton;
+    const ccBtn = cb && cb.captionsButton;
+    if (subsCapsBtn) {
+      subsCapsBtn.focus();
+    } else if (ccBtn) {
+      ccBtn.focus();
+    }
+  }
+
+  /**
+   * Repopulate dialog with new localizations on languagechange
+   */
+  handleLanguagechange() {
+    this.fill();
+  }
+}
+Component$1.registerComponent('TextTrackSettings', TextTrackSettings);
+
+/**
+ * @file resize-manager.js
+ */
+
+/**
+ * A Resize Manager. It is in charge of triggering `playerresize` on the player in the right conditions.
+ *
+ * It'll either create an iframe and use a debounced resize handler on it or use the new {@link https://wicg.github.io/ResizeObserver/|ResizeObserver}.
+ *
+ * If the ResizeObserver is available natively, it will be used. A polyfill can be passed in as an option.
+ * If a `playerresize` event is not needed, the ResizeManager component can be removed from the player, see the example below.
+ *
+ * @example <caption>How to disable the resize manager</caption>
+ * const player = videojs('#vid', {
+ *   resizeManager: false
+ * });
+ *
+ * @see {@link https://wicg.github.io/ResizeObserver/|ResizeObserver specification}
+ *
+ * @extends Component
+ */
+class ResizeManager extends Component$1 {
+  /**
+   * Create the ResizeManager.
+   *
+   * @param {Object} player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of ResizeManager options.
+   *
+   * @param {Object} [options.ResizeObserver]
+   *        A polyfill for ResizeObserver can be passed in here.
+   *        If this is set to null it will ignore the native ResizeObserver and fall back to the iframe fallback.
+   */
+  constructor(player, options) {
+    let RESIZE_OBSERVER_AVAILABLE = options.ResizeObserver || window__default["default"].ResizeObserver;
+
+    // if `null` was passed, we want to disable the ResizeObserver
+    if (options.ResizeObserver === null) {
+      RESIZE_OBSERVER_AVAILABLE = false;
+    }
+
+    // Only create an element when ResizeObserver isn't available
+    const options_ = merge$1({
+      createEl: !RESIZE_OBSERVER_AVAILABLE,
+      reportTouchActivity: false
+    }, options);
+    super(player, options_);
+    this.ResizeObserver = options.ResizeObserver || window__default["default"].ResizeObserver;
+    this.loadListener_ = null;
+    this.resizeObserver_ = null;
+    this.debouncedHandler_ = debounce(() => {
+      this.resizeHandler();
+    }, 100, false, this);
+    if (RESIZE_OBSERVER_AVAILABLE) {
+      this.resizeObserver_ = new this.ResizeObserver(this.debouncedHandler_);
+      this.resizeObserver_.observe(player.el());
+    } else {
+      this.loadListener_ = () => {
+        if (!this.el_ || !this.el_.contentWindow) {
+          return;
+        }
+        const debouncedHandler_ = this.debouncedHandler_;
+        let unloadListener_ = this.unloadListener_ = function () {
+          off(this, 'resize', debouncedHandler_);
+          off(this, 'unload', unloadListener_);
+          unloadListener_ = null;
+        };
+
+        // safari and edge can unload the iframe before resizemanager dispose
+        // we have to dispose of event handlers correctly before that happens
+        on(this.el_.contentWindow, 'unload', unloadListener_);
+        on(this.el_.contentWindow, 'resize', debouncedHandler_);
+      };
+      this.one('load', this.loadListener_);
+    }
+  }
+  createEl() {
+    return super.createEl('iframe', {
+      className: 'vjs-resize-manager',
+      tabIndex: -1,
+      title: this.localize('No content')
+    }, {
+      'aria-hidden': 'true'
+    });
+  }
+
+  /**
+   * Called when a resize is triggered on the iframe or a resize is observed via the ResizeObserver
+   *
+   * @fires Player#playerresize
+   */
+  resizeHandler() {
+    /**
+     * Called when the player size has changed
+     *
+     * @event Player#playerresize
+     * @type {Event}
+     */
+    // make sure player is still around to trigger
+    // prevents this from causing an error after dispose
+    if (!this.player_ || !this.player_.trigger) {
+      return;
+    }
+    this.player_.trigger('playerresize');
+  }
+  dispose() {
+    if (this.debouncedHandler_) {
+      this.debouncedHandler_.cancel();
+    }
+    if (this.resizeObserver_) {
+      if (this.player_.el()) {
+        this.resizeObserver_.unobserve(this.player_.el());
+      }
+      this.resizeObserver_.disconnect();
+    }
+    if (this.loadListener_) {
+      this.off('load', this.loadListener_);
+    }
+    if (this.el_ && this.el_.contentWindow && this.unloadListener_) {
+      this.unloadListener_.call(this.el_.contentWindow);
+    }
+    this.ResizeObserver = null;
+    this.resizeObserver = null;
+    this.debouncedHandler_ = null;
+    this.loadListener_ = null;
+    super.dispose();
+  }
+}
+Component$1.registerComponent('ResizeManager', ResizeManager);
+
+const defaults = {
+  trackingThreshold: 20,
+  liveTolerance: 15
+};
+
+/*
+  track when we are at the live edge, and other helpers for live playback */
+
+/**
+ * A class for checking live current time and determining when the player
+ * is at or behind the live edge.
+ */
+class LiveTracker extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {number} [options.trackingThreshold=20]
+   *        Number of seconds of live window (seekableEnd - seekableStart) that
+   *        media needs to have before the liveui will be shown.
+   *
+   * @param {number} [options.liveTolerance=15]
+   *        Number of seconds behind live that we have to be
+   *        before we will be considered non-live. Note that this will only
+   *        be used when playing at the live edge. This allows large seekable end
+   *        changes to not effect whether we are live or not.
+   */
+  constructor(player, options) {
+    // LiveTracker does not need an element
+    const options_ = merge$1(defaults, options, {
+      createEl: false
+    });
+    super(player, options_);
+    this.trackLiveHandler_ = () => this.trackLive_();
+    this.handlePlay_ = e => this.handlePlay(e);
+    this.handleFirstTimeupdate_ = e => this.handleFirstTimeupdate(e);
+    this.handleSeeked_ = e => this.handleSeeked(e);
+    this.seekToLiveEdge_ = e => this.seekToLiveEdge(e);
+    this.reset_();
+    this.on(this.player_, 'durationchange', e => this.handleDurationchange(e));
+    // we should try to toggle tracking on canplay as native playback engines, like Safari
+    // may not have the proper values for things like seekableEnd until then
+    this.on(this.player_, 'canplay', () => this.toggleTracking());
+  }
+
+  /**
+   * all the functionality for tracking when seek end changes
+   * and for tracking how far past seek end we should be
+   */
+  trackLive_() {
+    const seekable = this.player_.seekable();
+
+    // skip undefined seekable
+    if (!seekable || !seekable.length) {
+      return;
+    }
+    const newTime = Number(window__default["default"].performance.now().toFixed(4));
+    const deltaTime = this.lastTime_ === -1 ? 0 : (newTime - this.lastTime_) / 1000;
+    this.lastTime_ = newTime;
+    this.pastSeekEnd_ = this.pastSeekEnd() + deltaTime;
+    const liveCurrentTime = this.liveCurrentTime();
+    const currentTime = this.player_.currentTime();
+
+    // we are behind live if any are true
+    // 1. the player is paused
+    // 2. the user seeked to a location 2 seconds away from live
+    // 3. the difference between live and current time is greater
+    //    liveTolerance which defaults to 15s
+    let isBehind = this.player_.paused() || this.seekedBehindLive_ || Math.abs(liveCurrentTime - currentTime) > this.options_.liveTolerance;
+
+    // we cannot be behind if
+    // 1. until we have not seen a timeupdate yet
+    // 2. liveCurrentTime is Infinity, which happens on Android and Native Safari
+    if (!this.timeupdateSeen_ || liveCurrentTime === Infinity) {
+      isBehind = false;
+    }
+    if (isBehind !== this.behindLiveEdge_) {
+      this.behindLiveEdge_ = isBehind;
+      this.trigger('liveedgechange');
+    }
+  }
+
+  /**
+   * handle a durationchange event on the player
+   * and start/stop tracking accordingly.
+   */
+  handleDurationchange() {
+    this.toggleTracking();
+  }
+
+  /**
+   * start/stop tracking
+   */
+  toggleTracking() {
+    if (this.player_.duration() === Infinity && this.liveWindow() >= this.options_.trackingThreshold) {
+      if (this.player_.options_.liveui) {
+        this.player_.addClass('vjs-liveui');
+      }
+      this.startTracking();
+    } else {
+      this.player_.removeClass('vjs-liveui');
+      this.stopTracking();
+    }
+  }
+
+  /**
+   * start tracking live playback
+   */
+  startTracking() {
+    if (this.isTracking()) {
+      return;
+    }
+
+    // If we haven't seen a timeupdate, we need to check whether playback
+    // began before this component started tracking. This can happen commonly
+    // when using autoplay.
+    if (!this.timeupdateSeen_) {
+      this.timeupdateSeen_ = this.player_.hasStarted();
+    }
+    this.trackingInterval_ = this.setInterval(this.trackLiveHandler_, UPDATE_REFRESH_INTERVAL);
+    this.trackLive_();
+    this.on(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+    if (!this.timeupdateSeen_) {
+      this.one(this.player_, 'play', this.handlePlay_);
+      this.one(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+    } else {
+      this.on(this.player_, 'seeked', this.handleSeeked_);
+    }
+  }
+
+  /**
+   * handle the first timeupdate on the player if it wasn't already playing
+   * when live tracker started tracking.
+   */
+  handleFirstTimeupdate() {
+    this.timeupdateSeen_ = true;
+    this.on(this.player_, 'seeked', this.handleSeeked_);
+  }
+
+  /**
+   * Keep track of what time a seek starts, and listen for seeked
+   * to find where a seek ends.
+   */
+  handleSeeked() {
+    const timeDiff = Math.abs(this.liveCurrentTime() - this.player_.currentTime());
+    this.seekedBehindLive_ = this.nextSeekedFromUser_ && timeDiff > 2;
+    this.nextSeekedFromUser_ = false;
+    this.trackLive_();
+  }
+
+  /**
+   * handle the first play on the player, and make sure that we seek
+   * right to the live edge.
+   */
+  handlePlay() {
+    this.one(this.player_, 'timeupdate', this.seekToLiveEdge_);
+  }
+
+  /**
+   * Stop tracking, and set all internal variables to
+   * their initial value.
+   */
+  reset_() {
+    this.lastTime_ = -1;
+    this.pastSeekEnd_ = 0;
+    this.lastSeekEnd_ = -1;
+    this.behindLiveEdge_ = true;
+    this.timeupdateSeen_ = false;
+    this.seekedBehindLive_ = false;
+    this.nextSeekedFromUser_ = false;
+    this.clearInterval(this.trackingInterval_);
+    this.trackingInterval_ = null;
+    this.off(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+    this.off(this.player_, 'seeked', this.handleSeeked_);
+    this.off(this.player_, 'play', this.handlePlay_);
+    this.off(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+    this.off(this.player_, 'timeupdate', this.seekToLiveEdge_);
+  }
+
+  /**
+   * The next seeked event is from the user. Meaning that any seek
+   * > 2s behind live will be considered behind live for real and
+   * liveTolerance will be ignored.
+   */
+  nextSeekedFromUser() {
+    this.nextSeekedFromUser_ = true;
+  }
+
+  /**
+   * stop tracking live playback
+   */
+  stopTracking() {
+    if (!this.isTracking()) {
+      return;
+    }
+    this.reset_();
+    this.trigger('liveedgechange');
+  }
+
+  /**
+   * A helper to get the player seekable end
+   * so that we don't have to null check everywhere
+   *
+   * @return {number}
+   *         The furthest seekable end or Infinity.
+   */
+  seekableEnd() {
+    const seekable = this.player_.seekable();
+    const seekableEnds = [];
+    let i = seekable ? seekable.length : 0;
+    while (i--) {
+      seekableEnds.push(seekable.end(i));
+    }
+
+    // grab the furthest seekable end after sorting, or if there are none
+    // default to Infinity
+    return seekableEnds.length ? seekableEnds.sort()[seekableEnds.length - 1] : Infinity;
+  }
+
+  /**
+   * A helper to get the player seekable start
+   * so that we don't have to null check everywhere
+   *
+   * @return {number}
+   *         The earliest seekable start or 0.
+   */
+  seekableStart() {
+    const seekable = this.player_.seekable();
+    const seekableStarts = [];
+    let i = seekable ? seekable.length : 0;
+    while (i--) {
+      seekableStarts.push(seekable.start(i));
+    }
+
+    // grab the first seekable start after sorting, or if there are none
+    // default to 0
+    return seekableStarts.length ? seekableStarts.sort()[0] : 0;
+  }
+
+  /**
+   * Get the live time window aka
+   * the amount of time between seekable start and
+   * live current time.
+   *
+   * @return {number}
+   *         The amount of seconds that are seekable in
+   *         the live video.
+   */
+  liveWindow() {
+    const liveCurrentTime = this.liveCurrentTime();
+
+    // if liveCurrenTime is Infinity then we don't have a liveWindow at all
+    if (liveCurrentTime === Infinity) {
+      return 0;
+    }
+    return liveCurrentTime - this.seekableStart();
+  }
+
+  /**
+   * Determines if the player is live, only checks if this component
+   * is tracking live playback or not
+   *
+   * @return {boolean}
+   *         Whether liveTracker is tracking
+   */
+  isLive() {
+    return this.isTracking();
+  }
+
+  /**
+   * Determines if currentTime is at the live edge and won't fall behind
+   * on each seekableendchange
+   *
+   * @return {boolean}
+   *         Whether playback is at the live edge
+   */
+  atLiveEdge() {
+    return !this.behindLiveEdge();
+  }
+
+  /**
+   * get what we expect the live current time to be
+   *
+   * @return {number}
+   *         The expected live current time
+   */
+  liveCurrentTime() {
+    return this.pastSeekEnd() + this.seekableEnd();
+  }
+
+  /**
+   * The number of seconds that have occurred after seekable end
+   * changed. This will be reset to 0 once seekable end changes.
+   *
+   * @return {number}
+   *         Seconds past the current seekable end
+   */
+  pastSeekEnd() {
+    const seekableEnd = this.seekableEnd();
+    if (this.lastSeekEnd_ !== -1 && seekableEnd !== this.lastSeekEnd_) {
+      this.pastSeekEnd_ = 0;
+    }
+    this.lastSeekEnd_ = seekableEnd;
+    return this.pastSeekEnd_;
+  }
+
+  /**
+   * If we are currently behind the live edge, aka currentTime will be
+   * behind on a seekableendchange
+   *
+   * @return {boolean}
+   *         If we are behind the live edge
+   */
+  behindLiveEdge() {
+    return this.behindLiveEdge_;
+  }
+
+  /**
+   * Whether live tracker is currently tracking or not.
+   */
+  isTracking() {
+    return typeof this.trackingInterval_ === 'number';
+  }
+
+  /**
+   * Seek to the live edge if we are behind the live edge
+   */
+  seekToLiveEdge() {
+    this.seekedBehindLive_ = false;
+    if (this.atLiveEdge()) {
+      return;
+    }
+    this.nextSeekedFromUser_ = false;
+    this.player_.currentTime(this.liveCurrentTime());
+  }
+
+  /**
+   * Dispose of liveTracker
+   */
+  dispose() {
+    this.stopTracking();
+    super.dispose();
+  }
+}
+Component$1.registerComponent('LiveTracker', LiveTracker);
+
+/**
+ * Displays an element over the player which contains an optional title and
+ * description for the current content.
+ *
+ * Much of the code for this component originated in the now obsolete
+ * videojs-dock plugin: https://github.com/brightcove/videojs-dock/
+ *
+ * @extends Component
+ */
+class TitleBar extends Component$1 {
+  constructor(player, options) {
+    super(player, options);
+    this.on('statechanged', e => this.updateDom_());
+    this.updateDom_();
+  }
+
+  /**
+   * Create the `TitleBar`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    this.els = {
+      title: createEl('div', {
+        className: 'vjs-title-bar-title',
+        id: `vjs-title-bar-title-${newGUID()}`
+      }),
+      description: createEl('div', {
+        className: 'vjs-title-bar-description',
+        id: `vjs-title-bar-description-${newGUID()}`
+      })
+    };
+    return createEl('div', {
+      className: 'vjs-title-bar'
+    }, {}, values(this.els));
+  }
+
+  /**
+   * Updates the DOM based on the component's state object.
+   */
+  updateDom_() {
+    const tech = this.player_.tech_;
+    const techEl = tech && tech.el_;
+    const techAriaAttrs = {
+      title: 'aria-labelledby',
+      description: 'aria-describedby'
+    };
+    ['title', 'description'].forEach(k => {
+      const value = this.state[k];
+      const el = this.els[k];
+      const techAriaAttr = techAriaAttrs[k];
+      emptyEl(el);
+      if (value) {
+        textContent(el, value);
+      }
+
+      // If there is a tech element available, update its ARIA attributes
+      // according to whether a title and/or description have been provided.
+      if (techEl) {
+        techEl.removeAttribute(techAriaAttr);
+        if (value) {
+          techEl.setAttribute(techAriaAttr, el.id);
+        }
+      }
+    });
+    if (this.state.title || this.state.description) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  /**
+   * Update the contents of the title bar component with new title and
+   * description text.
+   *
+   * If both title and description are missing, the title bar will be hidden.
+   *
+   * If either title or description are present, the title bar will be visible.
+   *
+   * NOTE: Any previously set value will be preserved. To unset a previously
+   * set value, you must pass an empty string or null.
+   *
+   * For example:
+   *
+   * ```
+   * update({title: 'foo', description: 'bar'}) // title: 'foo', description: 'bar'
+   * update({description: 'bar2'}) // title: 'foo', description: 'bar2'
+   * update({title: ''}) // title: '', description: 'bar2'
+   * update({title: 'foo', description: null}) // title: 'foo', description: null
+   * ```
+   *
+   * @param  {Object} [options={}]
+   *         An options object. When empty, the title bar will be hidden.
+   *
+   * @param  {string} [options.title]
+   *         A title to display in the title bar.
+   *
+   * @param  {string} [options.description]
+   *         A description to display in the title bar.
+   */
+  update(options) {
+    this.setState(options);
+  }
+
+  /**
+   * Dispose the component.
+   */
+  dispose() {
+    const tech = this.player_.tech_;
+    const techEl = tech && tech.el_;
+    if (techEl) {
+      techEl.removeAttribute('aria-labelledby');
+      techEl.removeAttribute('aria-describedby');
+    }
+    super.dispose();
+    this.els = null;
+  }
+}
+Component$1.registerComponent('TitleBar', TitleBar);
+
+/**
+ * This function is used to fire a sourceset when there is something
+ * similar to `mediaEl.load()` being called. It will try to find the source via
+ * the `src` attribute and then the `<source>` elements. It will then fire `sourceset`
+ * with the source that was found or empty string if we cannot know. If it cannot
+ * find a source then `sourceset` will not be fired.
+ *
+ * @param { import('./html5').default } tech
+ *        The tech object that sourceset was setup on
+ *
+ * @return {boolean}
+ *         returns false if the sourceset was not fired and true otherwise.
+ */
+const sourcesetLoad = tech => {
+  const el = tech.el();
+
+  // if `el.src` is set, that source will be loaded.
+  if (el.hasAttribute('src')) {
+    tech.triggerSourceset(el.src);
+    return true;
+  }
+
+  /**
+   * Since there isn't a src property on the media element, source elements will be used for
+   * implementing the source selection algorithm. This happens asynchronously and
+   * for most cases were there is more than one source we cannot tell what source will
+   * be loaded, without re-implementing the source selection algorithm. At this time we are not
+   * going to do that. There are three special cases that we do handle here though:
+   *
+   * 1. If there are no sources, do not fire `sourceset`.
+   * 2. If there is only one `<source>` with a `src` property/attribute that is our `src`
+   * 3. If there is more than one `<source>` but all of them have the same `src` url.
+   *    That will be our src.
+   */
+  const sources = tech.$$('source');
+  const srcUrls = [];
+  let src = '';
+
+  // if there are no sources, do not fire sourceset
+  if (!sources.length) {
+    return false;
+  }
+
+  // only count valid/non-duplicate source elements
+  for (let i = 0; i < sources.length; i++) {
+    const url = sources[i].src;
+    if (url && srcUrls.indexOf(url) === -1) {
+      srcUrls.push(url);
+    }
+  }
+
+  // there were no valid sources
+  if (!srcUrls.length) {
+    return false;
+  }
+
+  // there is only one valid source element url
+  // use that
+  if (srcUrls.length === 1) {
+    src = srcUrls[0];
+  }
+  tech.triggerSourceset(src);
+  return true;
+};
+
+/**
+ * our implementation of an `innerHTML` descriptor for browsers
+ * that do not have one.
+ */
+const innerHTMLDescriptorPolyfill = Object.defineProperty({}, 'innerHTML', {
+  get() {
+    return this.cloneNode(true).innerHTML;
+  },
+  set(v) {
+    // make a dummy node to use innerHTML on
+    const dummy = document__default["default"].createElement(this.nodeName.toLowerCase());
+
+    // set innerHTML to the value provided
+    dummy.innerHTML = v;
+
+    // make a document fragment to hold the nodes from dummy
+    const docFrag = document__default["default"].createDocumentFragment();
+
+    // copy all of the nodes created by the innerHTML on dummy
+    // to the document fragment
+    while (dummy.childNodes.length) {
+      docFrag.appendChild(dummy.childNodes[0]);
+    }
+
+    // remove content
+    this.innerText = '';
+
+    // now we add all of that html in one by appending the
+    // document fragment. This is how innerHTML does it.
+    window__default["default"].Element.prototype.appendChild.call(this, docFrag);
+
+    // then return the result that innerHTML's setter would
+    return this.innerHTML;
+  }
+});
+
+/**
+ * Get a property descriptor given a list of priorities and the
+ * property to get.
+ */
+const getDescriptor = (priority, prop) => {
+  let descriptor = {};
+  for (let i = 0; i < priority.length; i++) {
+    descriptor = Object.getOwnPropertyDescriptor(priority[i], prop);
+    if (descriptor && descriptor.set && descriptor.get) {
+      break;
+    }
+  }
+  descriptor.enumerable = true;
+  descriptor.configurable = true;
+  return descriptor;
+};
+const getInnerHTMLDescriptor = tech => getDescriptor([tech.el(), window__default["default"].HTMLMediaElement.prototype, window__default["default"].Element.prototype, innerHTMLDescriptorPolyfill], 'innerHTML');
+
+/**
+ * Patches browser internal functions so that we can tell synchronously
+ * if a `<source>` was appended to the media element. For some reason this
+ * causes a `sourceset` if the the media element is ready and has no source.
+ * This happens when:
+ * - The page has just loaded and the media element does not have a source.
+ * - The media element was emptied of all sources, then `load()` was called.
+ *
+ * It does this by patching the following functions/properties when they are supported:
+ *
+ * - `append()` - can be used to add a `<source>` element to the media element
+ * - `appendChild()` - can be used to add a `<source>` element to the media element
+ * - `insertAdjacentHTML()` -  can be used to add a `<source>` element to the media element
+ * - `innerHTML` -  can be used to add a `<source>` element to the media element
+ *
+ * @param {Html5} tech
+ *        The tech object that sourceset is being setup on.
+ */
+const firstSourceWatch = function (tech) {
+  const el = tech.el();
+
+  // make sure firstSourceWatch isn't setup twice.
+  if (el.resetSourceWatch_) {
+    return;
+  }
+  const old = {};
+  const innerDescriptor = getInnerHTMLDescriptor(tech);
+  const appendWrapper = appendFn => (...args) => {
+    const retval = appendFn.apply(el, args);
+    sourcesetLoad(tech);
+    return retval;
+  };
+  ['append', 'appendChild', 'insertAdjacentHTML'].forEach(k => {
+    if (!el[k]) {
+      return;
+    }
+
+    // store the old function
+    old[k] = el[k];
+
+    // call the old function with a sourceset if a source
+    // was loaded
+    el[k] = appendWrapper(old[k]);
+  });
+  Object.defineProperty(el, 'innerHTML', merge$1(innerDescriptor, {
+    set: appendWrapper(innerDescriptor.set)
+  }));
+  el.resetSourceWatch_ = () => {
+    el.resetSourceWatch_ = null;
+    Object.keys(old).forEach(k => {
+      el[k] = old[k];
+    });
+    Object.defineProperty(el, 'innerHTML', innerDescriptor);
+  };
+
+  // on the first sourceset, we need to revert our changes
+  tech.one('sourceset', el.resetSourceWatch_);
+};
+
+/**
+ * our implementation of a `src` descriptor for browsers
+ * that do not have one
+ */
+const srcDescriptorPolyfill = Object.defineProperty({}, 'src', {
+  get() {
+    if (this.hasAttribute('src')) {
+      return getAbsoluteURL(window__default["default"].Element.prototype.getAttribute.call(this, 'src'));
+    }
+    return '';
+  },
+  set(v) {
+    window__default["default"].Element.prototype.setAttribute.call(this, 'src', v);
+    return v;
+  }
+});
+const getSrcDescriptor = tech => getDescriptor([tech.el(), window__default["default"].HTMLMediaElement.prototype, srcDescriptorPolyfill], 'src');
+
+/**
+ * setup `sourceset` handling on the `Html5` tech. This function
+ * patches the following element properties/functions:
+ *
+ * - `src` - to determine when `src` is set
+ * - `setAttribute()` - to determine when `src` is set
+ * - `load()` - this re-triggers the source selection algorithm, and can
+ *              cause a sourceset.
+ *
+ * If there is no source when we are adding `sourceset` support or during a `load()`
+ * we also patch the functions listed in `firstSourceWatch`.
+ *
+ * @param {Html5} tech
+ *        The tech to patch
+ */
+const setupSourceset = function (tech) {
+  if (!tech.featuresSourceset) {
+    return;
+  }
+  const el = tech.el();
+
+  // make sure sourceset isn't setup twice.
+  if (el.resetSourceset_) {
+    return;
+  }
+  const srcDescriptor = getSrcDescriptor(tech);
+  const oldSetAttribute = el.setAttribute;
+  const oldLoad = el.load;
+  Object.defineProperty(el, 'src', merge$1(srcDescriptor, {
+    set: v => {
+      const retval = srcDescriptor.set.call(el, v);
+
+      // we use the getter here to get the actual value set on src
+      tech.triggerSourceset(el.src);
+      return retval;
+    }
+  }));
+  el.setAttribute = (n, v) => {
+    const retval = oldSetAttribute.call(el, n, v);
+    if (/src/i.test(n)) {
+      tech.triggerSourceset(el.src);
+    }
+    return retval;
+  };
+  el.load = () => {
+    const retval = oldLoad.call(el);
+
+    // if load was called, but there was no source to fire
+    // sourceset on. We have to watch for a source append
+    // as that can trigger a `sourceset` when the media element
+    // has no source
+    if (!sourcesetLoad(tech)) {
+      tech.triggerSourceset('');
+      firstSourceWatch(tech);
+    }
+    return retval;
+  };
+  if (el.currentSrc) {
+    tech.triggerSourceset(el.currentSrc);
+  } else if (!sourcesetLoad(tech)) {
+    firstSourceWatch(tech);
+  }
+  el.resetSourceset_ = () => {
+    el.resetSourceset_ = null;
+    el.load = oldLoad;
+    el.setAttribute = oldSetAttribute;
+    Object.defineProperty(el, 'src', srcDescriptor);
+    if (el.resetSourceWatch_) {
+      el.resetSourceWatch_();
+    }
+  };
+};
+
+/**
+ * @file html5.js
+ */
+
+/**
+ * HTML5 Media Controller - Wrapper for HTML5 Media API
+ *
+ * @mixes Tech~SourceHandlerAdditions
+ * @extends Tech
+ */
+class Html5 extends Tech {
+  /**
+  * Create an instance of this Tech.
+  *
+  * @param {Object} [options]
+  *        The key/value store of player options.
+  *
+  * @param {Function} [ready]
+  *        Callback function to call when the `HTML5` Tech is ready.
+  */
+  constructor(options, ready) {
+    super(options, ready);
+    const source = options.source;
+    let crossoriginTracks = false;
+    this.featuresVideoFrameCallback = this.featuresVideoFrameCallback && this.el_.tagName === 'VIDEO';
+
+    // Set the source if one is provided
+    // 1) Check if the source is new (if not, we want to keep the original so playback isn't interrupted)
+    // 2) Check to see if the network state of the tag was failed at init, and if so, reset the source
+    // anyway so the error gets fired.
+    if (source && (this.el_.currentSrc !== source.src || options.tag && options.tag.initNetworkState_ === 3)) {
+      this.setSource(source);
+    } else {
+      this.handleLateInit_(this.el_);
+    }
+
+    // setup sourceset after late sourceset/init
+    if (options.enableSourceset) {
+      this.setupSourcesetHandling_();
+    }
+    this.isScrubbing_ = false;
+    if (this.el_.hasChildNodes()) {
+      const nodes = this.el_.childNodes;
+      let nodesLength = nodes.length;
+      const removeNodes = [];
+      while (nodesLength--) {
+        const node = nodes[nodesLength];
+        const nodeName = node.nodeName.toLowerCase();
+        if (nodeName === 'track') {
+          if (!this.featuresNativeTextTracks) {
+            // Empty video tag tracks so the built-in player doesn't use them also.
+            // This may not be fast enough to stop HTML5 browsers from reading the tags
+            // so we'll need to turn off any default tracks if we're manually doing
+            // captions and subtitles. videoElement.textTracks
+            removeNodes.push(node);
+          } else {
+            // store HTMLTrackElement and TextTrack to remote list
+            this.remoteTextTrackEls().addTrackElement_(node);
+            this.remoteTextTracks().addTrack(node.track);
+            this.textTracks().addTrack(node.track);
+            if (!crossoriginTracks && !this.el_.hasAttribute('crossorigin') && isCrossOrigin(node.src)) {
+              crossoriginTracks = true;
+            }
+          }
+        }
+      }
+      for (let i = 0; i < removeNodes.length; i++) {
+        this.el_.removeChild(removeNodes[i]);
+      }
+    }
+    this.proxyNativeTracks_();
+    if (this.featuresNativeTextTracks && crossoriginTracks) {
+      log$1.warn('Text Tracks are being loaded from another origin but the crossorigin attribute isn\'t used.\n' + 'This may prevent text tracks from loading.');
+    }
+
+    // prevent iOS Safari from disabling metadata text tracks during native playback
+    this.restoreMetadataTracksInIOSNativePlayer_();
+
+    // Determine if native controls should be used
+    // Our goal should be to get the custom controls on mobile solid everywhere
+    // so we can remove this all together. Right now this will block custom
+    // controls on touch enabled laptops like the Chrome Pixel
+    if ((TOUCH_ENABLED || IS_IPHONE) && options.nativeControlsForTouch === true) {
+      this.setControls(true);
+    }
+
+    // on iOS, we want to proxy `webkitbeginfullscreen` and `webkitendfullscreen`
+    // into a `fullscreenchange` event
+    this.proxyWebkitFullscreen_();
+    this.triggerReady();
+  }
+
+  /**
+   * Dispose of `HTML5` media element and remove all tracks.
+   */
+  dispose() {
+    if (this.el_ && this.el_.resetSourceset_) {
+      this.el_.resetSourceset_();
+    }
+    Html5.disposeMediaElement(this.el_);
+    this.options_ = null;
+
+    // tech will handle clearing of the emulated track list
+    super.dispose();
+  }
+
+  /**
+   * Modify the media element so that we can detect when
+   * the source is changed. Fires `sourceset` just after the source has changed
+   */
+  setupSourcesetHandling_() {
+    setupSourceset(this);
+  }
+
+  /**
+   * When a captions track is enabled in the iOS Safari native player, all other
+   * tracks are disabled (including metadata tracks), which nulls all of their
+   * associated cue points. This will restore metadata tracks to their pre-fullscreen
+   * state in those cases so that cue points are not needlessly lost.
+   *
+   * @private
+   */
+  restoreMetadataTracksInIOSNativePlayer_() {
+    const textTracks = this.textTracks();
+    let metadataTracksPreFullscreenState;
+
+    // captures a snapshot of every metadata track's current state
+    const takeMetadataTrackSnapshot = () => {
+      metadataTracksPreFullscreenState = [];
+      for (let i = 0; i < textTracks.length; i++) {
+        const track = textTracks[i];
+        if (track.kind === 'metadata') {
+          metadataTracksPreFullscreenState.push({
+            track,
+            storedMode: track.mode
+          });
+        }
+      }
+    };
+
+    // snapshot each metadata track's initial state, and update the snapshot
+    // each time there is a track 'change' event
+    takeMetadataTrackSnapshot();
+    textTracks.addEventListener('change', takeMetadataTrackSnapshot);
+    this.on('dispose', () => textTracks.removeEventListener('change', takeMetadataTrackSnapshot));
+    const restoreTrackMode = () => {
+      for (let i = 0; i < metadataTracksPreFullscreenState.length; i++) {
+        const storedTrack = metadataTracksPreFullscreenState[i];
+        if (storedTrack.track.mode === 'disabled' && storedTrack.track.mode !== storedTrack.storedMode) {
+          storedTrack.track.mode = storedTrack.storedMode;
+        }
+      }
+      // we only want this handler to be executed on the first 'change' event
+      textTracks.removeEventListener('change', restoreTrackMode);
+    };
+
+    // when we enter fullscreen playback, stop updating the snapshot and
+    // restore all track modes to their pre-fullscreen state
+    this.on('webkitbeginfullscreen', () => {
+      textTracks.removeEventListener('change', takeMetadataTrackSnapshot);
+
+      // remove the listener before adding it just in case it wasn't previously removed
+      textTracks.removeEventListener('change', restoreTrackMode);
+      textTracks.addEventListener('change', restoreTrackMode);
+    });
+
+    // start updating the snapshot again after leaving fullscreen
+    this.on('webkitendfullscreen', () => {
+      // remove the listener before adding it just in case it wasn't previously removed
+      textTracks.removeEventListener('change', takeMetadataTrackSnapshot);
+      textTracks.addEventListener('change', takeMetadataTrackSnapshot);
+
+      // remove the restoreTrackMode handler in case it wasn't triggered during fullscreen playback
+      textTracks.removeEventListener('change', restoreTrackMode);
+    });
+  }
+
+  /**
+   * Attempt to force override of tracks for the given type
+   *
+   * @param {string} type - Track type to override, possible values include 'Audio',
+   * 'Video', and 'Text'.
+   * @param {boolean} override - If set to true native audio/video will be overridden,
+   * otherwise native audio/video will potentially be used.
+   * @private
+   */
+  overrideNative_(type, override) {
+    // If there is no behavioral change don't add/remove listeners
+    if (override !== this[`featuresNative${type}Tracks`]) {
+      return;
+    }
+    const lowerCaseType = type.toLowerCase();
+    if (this[`${lowerCaseType}TracksListeners_`]) {
+      Object.keys(this[`${lowerCaseType}TracksListeners_`]).forEach(eventName => {
+        const elTracks = this.el()[`${lowerCaseType}Tracks`];
+        elTracks.removeEventListener(eventName, this[`${lowerCaseType}TracksListeners_`][eventName]);
+      });
+    }
+    this[`featuresNative${type}Tracks`] = !override;
+    this[`${lowerCaseType}TracksListeners_`] = null;
+    this.proxyNativeTracksForType_(lowerCaseType);
+  }
+
+  /**
+   * Attempt to force override of native audio tracks.
+   *
+   * @param {boolean} override - If set to true native audio will be overridden,
+   * otherwise native audio will potentially be used.
+   */
+  overrideNativeAudioTracks(override) {
+    this.overrideNative_('Audio', override);
+  }
+
+  /**
+   * Attempt to force override of native video tracks.
+   *
+   * @param {boolean} override - If set to true native video will be overridden,
+   * otherwise native video will potentially be used.
+   */
+  overrideNativeVideoTracks(override) {
+    this.overrideNative_('Video', override);
+  }
+
+  /**
+   * Proxy native track list events for the given type to our track
+   * lists if the browser we are playing in supports that type of track list.
+   *
+   * @param {string} name - Track type; values include 'audio', 'video', and 'text'
+   * @private
+   */
+  proxyNativeTracksForType_(name) {
+    const props = NORMAL[name];
+    const elTracks = this.el()[props.getterName];
+    const techTracks = this[props.getterName]();
+    if (!this[`featuresNative${props.capitalName}Tracks`] || !elTracks || !elTracks.addEventListener) {
+      return;
+    }
+    const listeners = {
+      change: e => {
+        const event = {
+          type: 'change',
+          target: techTracks,
+          currentTarget: techTracks,
+          srcElement: techTracks
+        };
+        techTracks.trigger(event);
+
+        // if we are a text track change event, we should also notify the
+        // remote text track list. This can potentially cause a false positive
+        // if we were to get a change event on a non-remote track and
+        // we triggered the event on the remote text track list which doesn't
+        // contain that track. However, best practices mean looping through the
+        // list of tracks and searching for the appropriate mode value, so,
+        // this shouldn't pose an issue
+        if (name === 'text') {
+          this[REMOTE.remoteText.getterName]().trigger(event);
+        }
+      },
+      addtrack(e) {
+        techTracks.addTrack(e.track);
+      },
+      removetrack(e) {
+        techTracks.removeTrack(e.track);
+      }
+    };
+    const removeOldTracks = function () {
+      const removeTracks = [];
+      for (let i = 0; i < techTracks.length; i++) {
+        let found = false;
+        for (let j = 0; j < elTracks.length; j++) {
+          if (elTracks[j] === techTracks[i]) {
+            found = true;
+            break;
+          }
+        }
+        if (!found) {
+          removeTracks.push(techTracks[i]);
+        }
+      }
+      while (removeTracks.length) {
+        techTracks.removeTrack(removeTracks.shift());
+      }
+    };
+    this[props.getterName + 'Listeners_'] = listeners;
+    Object.keys(listeners).forEach(eventName => {
+      const listener = listeners[eventName];
+      elTracks.addEventListener(eventName, listener);
+      this.on('dispose', e => elTracks.removeEventListener(eventName, listener));
+    });
+
+    // Remove (native) tracks that are not used anymore
+    this.on('loadstart', removeOldTracks);
+    this.on('dispose', e => this.off('loadstart', removeOldTracks));
+  }
+
+  /**
+   * Proxy all native track list events to our track lists if the browser we are playing
+   * in supports that type of track list.
+   *
+   * @private
+   */
+  proxyNativeTracks_() {
+    NORMAL.names.forEach(name => {
+      this.proxyNativeTracksForType_(name);
+    });
+  }
+
+  /**
+   * Create the `Html5` Tech's DOM element.
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl() {
+    let el = this.options_.tag;
+
+    // Check if this browser supports moving the element into the box.
+    // On the iPhone video will break if you move the element,
+    // So we have to create a brand new element.
+    // If we ingested the player div, we do not need to move the media element.
+    if (!el || !(this.options_.playerElIngest || this.movingMediaElementInDOM)) {
+      // If the original tag is still there, clone and remove it.
+      if (el) {
+        const clone = el.cloneNode(true);
+        if (el.parentNode) {
+          el.parentNode.insertBefore(clone, el);
+        }
+        Html5.disposeMediaElement(el);
+        el = clone;
+      } else {
+        el = document__default["default"].createElement('video');
+
+        // determine if native controls should be used
+        const tagAttributes = this.options_.tag && getAttributes(this.options_.tag);
+        const attributes = merge$1({}, tagAttributes);
+        if (!TOUCH_ENABLED || this.options_.nativeControlsForTouch !== true) {
+          delete attributes.controls;
+        }
+        setAttributes(el, Object.assign(attributes, {
+          id: this.options_.techId,
+          class: 'vjs-tech'
+        }));
+      }
+      el.playerId = this.options_.playerId;
+    }
+    if (typeof this.options_.preload !== 'undefined') {
+      setAttribute(el, 'preload', this.options_.preload);
+    }
+    if (this.options_.disablePictureInPicture !== undefined) {
+      el.disablePictureInPicture = this.options_.disablePictureInPicture;
+    }
+
+    // Update specific tag settings, in case they were overridden
+    // `autoplay` has to be *last* so that `muted` and `playsinline` are present
+    // when iOS/Safari or other browsers attempt to autoplay.
+    const settingsAttrs = ['loop', 'muted', 'playsinline', 'autoplay'];
+    for (let i = 0; i < settingsAttrs.length; i++) {
+      const attr = settingsAttrs[i];
+      const value = this.options_[attr];
+      if (typeof value !== 'undefined') {
+        if (value) {
+          setAttribute(el, attr, attr);
+        } else {
+          removeAttribute(el, attr);
+        }
+        el[attr] = value;
+      }
+    }
+    return el;
+  }
+
+  /**
+   * This will be triggered if the loadstart event has already fired, before videojs was
+   * ready. Two known examples of when this can happen are:
+   * 1. If we're loading the playback object after it has started loading
+   * 2. The media is already playing the (often with autoplay on) then
+   *
+   * This function will fire another loadstart so that videojs can catchup.
+   *
+   * @fires Tech#loadstart
+   *
+   * @return {undefined}
+   *         returns nothing.
+   */
+  handleLateInit_(el) {
+    if (el.networkState === 0 || el.networkState === 3) {
+      // The video element hasn't started loading the source yet
+      // or didn't find a source
+      return;
+    }
+    if (el.readyState === 0) {
+      // NetworkState is set synchronously BUT loadstart is fired at the
+      // end of the current stack, usually before setInterval(fn, 0).
+      // So at this point we know loadstart may have already fired or is
+      // about to fire, and either way the player hasn't seen it yet.
+      // We don't want to fire loadstart prematurely here and cause a
+      // double loadstart so we'll wait and see if it happens between now
+      // and the next loop, and fire it if not.
+      // HOWEVER, we also want to make sure it fires before loadedmetadata
+      // which could also happen between now and the next loop, so we'll
+      // watch for that also.
+      let loadstartFired = false;
+      const setLoadstartFired = function () {
+        loadstartFired = true;
+      };
+      this.on('loadstart', setLoadstartFired);
+      const triggerLoadstart = function () {
+        // We did miss the original loadstart. Make sure the player
+        // sees loadstart before loadedmetadata
+        if (!loadstartFired) {
+          this.trigger('loadstart');
+        }
+      };
+      this.on('loadedmetadata', triggerLoadstart);
+      this.ready(function () {
+        this.off('loadstart', setLoadstartFired);
+        this.off('loadedmetadata', triggerLoadstart);
+        if (!loadstartFired) {
+          // We did miss the original native loadstart. Fire it now.
+          this.trigger('loadstart');
+        }
+      });
+      return;
+    }
+
+    // From here on we know that loadstart already fired and we missed it.
+    // The other readyState events aren't as much of a problem if we double
+    // them, so not going to go to as much trouble as loadstart to prevent
+    // that unless we find reason to.
+    const eventsToTrigger = ['loadstart'];
+
+    // loadedmetadata: newly equal to HAVE_METADATA (1) or greater
+    eventsToTrigger.push('loadedmetadata');
+
+    // loadeddata: newly increased to HAVE_CURRENT_DATA (2) or greater
+    if (el.readyState >= 2) {
+      eventsToTrigger.push('loadeddata');
+    }
+
+    // canplay: newly increased to HAVE_FUTURE_DATA (3) or greater
+    if (el.readyState >= 3) {
+      eventsToTrigger.push('canplay');
+    }
+
+    // canplaythrough: newly equal to HAVE_ENOUGH_DATA (4)
+    if (el.readyState >= 4) {
+      eventsToTrigger.push('canplaythrough');
+    }
+
+    // We still need to give the player time to add event listeners
+    this.ready(function () {
+      eventsToTrigger.forEach(function (type) {
+        this.trigger(type);
+      }, this);
+    });
+  }
+
+  /**
+   * Set whether we are scrubbing or not.
+   * This is used to decide whether we should use `fastSeek` or not.
+   * `fastSeek` is used to provide trick play on Safari browsers.
+   *
+   * @param {boolean} isScrubbing
+   *                  - true for we are currently scrubbing
+   *                  - false for we are no longer scrubbing
+   */
+  setScrubbing(isScrubbing) {
+    this.isScrubbing_ = isScrubbing;
+  }
+
+  /**
+   * Get whether we are scrubbing or not.
+   *
+   * @return {boolean} isScrubbing
+   *                  - true for we are currently scrubbing
+   *                  - false for we are no longer scrubbing
+   */
+  scrubbing() {
+    return this.isScrubbing_;
+  }
+
+  /**
+   * Set current time for the `HTML5` tech.
+   *
+   * @param {number} seconds
+   *        Set the current time of the media to this.
+   */
+  setCurrentTime(seconds) {
+    try {
+      if (this.isScrubbing_ && this.el_.fastSeek && IS_ANY_SAFARI) {
+        this.el_.fastSeek(seconds);
+      } else {
+        this.el_.currentTime = seconds;
+      }
+    } catch (e) {
+      log$1(e, 'Video is not ready. (Video.js)');
+      // this.warning(VideoJS.warnings.videoNotReady);
+    }
+  }
+
+  /**
+   * Get the current duration of the HTML5 media element.
+   *
+   * @return {number}
+   *         The duration of the media or 0 if there is no duration.
+   */
+  duration() {
+    // Android Chrome will report duration as Infinity for VOD HLS until after
+    // playback has started, which triggers the live display erroneously.
+    // Return NaN if playback has not started and trigger a durationupdate once
+    // the duration can be reliably known.
+    if (this.el_.duration === Infinity && IS_ANDROID && IS_CHROME && this.el_.currentTime === 0) {
+      // Wait for the first `timeupdate` with currentTime > 0 - there may be
+      // several with 0
+      const checkProgress = () => {
+        if (this.el_.currentTime > 0) {
+          // Trigger durationchange for genuinely live video
+          if (this.el_.duration === Infinity) {
+            this.trigger('durationchange');
+          }
+          this.off('timeupdate', checkProgress);
+        }
+      };
+      this.on('timeupdate', checkProgress);
+      return NaN;
+    }
+    return this.el_.duration || NaN;
+  }
+
+  /**
+   * Get the current width of the HTML5 media element.
+   *
+   * @return {number}
+   *         The width of the HTML5 media element.
+   */
+  width() {
+    return this.el_.offsetWidth;
+  }
+
+  /**
+   * Get the current height of the HTML5 media element.
+   *
+   * @return {number}
+   *         The height of the HTML5 media element.
+   */
+  height() {
+    return this.el_.offsetHeight;
+  }
+
+  /**
+   * Proxy iOS `webkitbeginfullscreen` and `webkitendfullscreen` into
+   * `fullscreenchange` event.
+   *
+   * @private
+   * @fires fullscreenchange
+   * @listens webkitendfullscreen
+   * @listens webkitbeginfullscreen
+   * @listens webkitbeginfullscreen
+   */
+  proxyWebkitFullscreen_() {
+    if (!('webkitDisplayingFullscreen' in this.el_)) {
+      return;
+    }
+    const endFn = function () {
+      this.trigger('fullscreenchange', {
+        isFullscreen: false
+      });
+      // Safari will sometimes set controls on the videoelement when existing fullscreen.
+      if (this.el_.controls && !this.options_.nativeControlsForTouch && this.controls()) {
+        this.el_.controls = false;
+      }
+    };
+    const beginFn = function () {
+      if ('webkitPresentationMode' in this.el_ && this.el_.webkitPresentationMode !== 'picture-in-picture') {
+        this.one('webkitendfullscreen', endFn);
+        this.trigger('fullscreenchange', {
+          isFullscreen: true,
+          // set a flag in case another tech triggers fullscreenchange
+          nativeIOSFullscreen: true
+        });
+      }
+    };
+    this.on('webkitbeginfullscreen', beginFn);
+    this.on('dispose', () => {
+      this.off('webkitbeginfullscreen', beginFn);
+      this.off('webkitendfullscreen', endFn);
+    });
+  }
+
+  /**
+   * Check if fullscreen is supported on the video el.
+   *
+   * @return {boolean}
+   *         - True if fullscreen is supported.
+   *         - False if fullscreen is not supported.
+   */
+  supportsFullScreen() {
+    return typeof this.el_.webkitEnterFullScreen === 'function';
+  }
+
+  /**
+   * Request that the `HTML5` Tech enter fullscreen.
+   */
+  enterFullScreen() {
+    const video = this.el_;
+    if (video.paused && video.networkState <= video.HAVE_METADATA) {
+      // attempt to prime the video element for programmatic access
+      // this isn't necessary on the desktop but shouldn't hurt
+      silencePromise(this.el_.play());
+
+      // playing and pausing synchronously during the transition to fullscreen
+      // can get iOS ~6.1 devices into a play/pause loop
+      this.setTimeout(function () {
+        video.pause();
+        try {
+          video.webkitEnterFullScreen();
+        } catch (e) {
+          this.trigger('fullscreenerror', e);
+        }
+      }, 0);
+    } else {
+      try {
+        video.webkitEnterFullScreen();
+      } catch (e) {
+        this.trigger('fullscreenerror', e);
+      }
+    }
+  }
+
+  /**
+   * Request that the `HTML5` Tech exit fullscreen.
+   */
+  exitFullScreen() {
+    if (!this.el_.webkitDisplayingFullscreen) {
+      this.trigger('fullscreenerror', new Error('The video is not fullscreen'));
+      return;
+    }
+    this.el_.webkitExitFullScreen();
+  }
+
+  /**
+   * Create a floating video window always on top of other windows so that users may
+   * continue consuming media while they interact with other content sites, or
+   * applications on their device.
+   *
+   * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+   *
+   * @return {Promise}
+   *         A promise with a Picture-in-Picture window.
+   */
+  requestPictureInPicture() {
+    return this.el_.requestPictureInPicture();
+  }
+
+  /**
+   * Native requestVideoFrameCallback if supported by browser/tech, or fallback
+   * Don't use rVCF on Safari when DRM is playing, as it doesn't fire
+   * Needs to be checked later than the constructor
+   * This will be a false positive for clear sources loaded after a Fairplay source
+   *
+   * @param {function} cb function to call
+   * @return {number} id of request
+   */
+  requestVideoFrameCallback(cb) {
+    if (this.featuresVideoFrameCallback && !this.el_.webkitKeys) {
+      return this.el_.requestVideoFrameCallback(cb);
+    }
+    return super.requestVideoFrameCallback(cb);
+  }
+
+  /**
+   * Native or fallback requestVideoFrameCallback
+   *
+   * @param {number} id request id to cancel
+   */
+  cancelVideoFrameCallback(id) {
+    if (this.featuresVideoFrameCallback && !this.el_.webkitKeys) {
+      this.el_.cancelVideoFrameCallback(id);
+    } else {
+      super.cancelVideoFrameCallback(id);
+    }
+  }
+
+  /**
+   * A getter/setter for the `Html5` Tech's source object.
+   * > Note: Please use {@link Html5#setSource}
+   *
+   * @param {Tech~SourceObject} [src]
+   *        The source object you want to set on the `HTML5` techs element.
+   *
+   * @return {Tech~SourceObject|undefined}
+   *         - The current source object when a source is not passed in.
+   *         - undefined when setting
+   *
+   * @deprecated Since version 5.
+   */
+  src(src) {
+    if (src === undefined) {
+      return this.el_.src;
+    }
+
+    // Setting src through `src` instead of `setSrc` will be deprecated
+    this.setSrc(src);
+  }
+
+  /**
+   * Reset the tech by removing all sources and then calling
+   * {@link Html5.resetMediaElement}.
+   */
+  reset() {
+    Html5.resetMediaElement(this.el_);
+  }
+
+  /**
+   * Get the current source on the `HTML5` Tech. Falls back to returning the source from
+   * the HTML5 media element.
+   *
+   * @return {Tech~SourceObject}
+   *         The current source object from the HTML5 tech. With a fallback to the
+   *         elements source.
+   */
+  currentSrc() {
+    if (this.currentSource_) {
+      return this.currentSource_.src;
+    }
+    return this.el_.currentSrc;
+  }
+
+  /**
+   * Set controls attribute for the HTML5 media Element.
+   *
+   * @param {string} val
+   *        Value to set the controls attribute to
+   */
+  setControls(val) {
+    this.el_.controls = !!val;
+  }
+
+  /**
+   * Create and returns a remote {@link TextTrack} object.
+   *
+   * @param {string} kind
+   *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+   *
+   * @param {string} [label]
+   *        Label to identify the text track
+   *
+   * @param {string} [language]
+   *        Two letter language abbreviation
+   *
+   * @return {TextTrack}
+   *         The TextTrack that gets created.
+   */
+  addTextTrack(kind, label, language) {
+    if (!this.featuresNativeTextTracks) {
+      return super.addTextTrack(kind, label, language);
+    }
+    return this.el_.addTextTrack(kind, label, language);
+  }
+
+  /**
+   * Creates either native TextTrack or an emulated TextTrack depending
+   * on the value of `featuresNativeTextTracks`
+   *
+   * @param {Object} options
+   *        The object should contain the options to initialize the TextTrack with.
+   *
+   * @param {string} [options.kind]
+   *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+   *
+   * @param {string} [options.label]
+   *        Label to identify the text track
+   *
+   * @param {string} [options.language]
+   *        Two letter language abbreviation.
+   *
+   * @param {boolean} [options.default]
+   *        Default this track to on.
+   *
+   * @param {string} [options.id]
+   *        The internal id to assign this track.
+   *
+   * @param {string} [options.src]
+   *        A source url for the track.
+   *
+   * @return {HTMLTrackElement}
+   *         The track element that gets created.
+   */
+  createRemoteTextTrack(options) {
+    if (!this.featuresNativeTextTracks) {
+      return super.createRemoteTextTrack(options);
+    }
+    const htmlTrackElement = document__default["default"].createElement('track');
+    if (options.kind) {
+      htmlTrackElement.kind = options.kind;
+    }
+    if (options.label) {
+      htmlTrackElement.label = options.label;
+    }
+    if (options.language || options.srclang) {
+      htmlTrackElement.srclang = options.language || options.srclang;
+    }
+    if (options.default) {
+      htmlTrackElement.default = options.default;
+    }
+    if (options.id) {
+      htmlTrackElement.id = options.id;
+    }
+    if (options.src) {
+      htmlTrackElement.src = options.src;
+    }
+    return htmlTrackElement;
+  }
+
+  /**
+   * Creates a remote text track object and returns an html track element.
+   *
+   * @param {Object} options The object should contain values for
+   * kind, language, label, and src (location of the WebVTT file)
+   * @param {boolean} [manualCleanup=false] if set to true, the TextTrack
+   * will not be removed from the TextTrackList and HtmlTrackElementList
+   * after a source change
+   * @return {HTMLTrackElement} An Html Track Element.
+   * This can be an emulated {@link HTMLTrackElement} or a native one.
+   *
+   */
+  addRemoteTextTrack(options, manualCleanup) {
+    const htmlTrackElement = super.addRemoteTextTrack(options, manualCleanup);
+    if (this.featuresNativeTextTracks) {
+      this.el().appendChild(htmlTrackElement);
+    }
+    return htmlTrackElement;
+  }
+
+  /**
+   * Remove remote `TextTrack` from `TextTrackList` object
+   *
+   * @param {TextTrack} track
+   *        `TextTrack` object to remove
+   */
+  removeRemoteTextTrack(track) {
+    super.removeRemoteTextTrack(track);
+    if (this.featuresNativeTextTracks) {
+      const tracks = this.$$('track');
+      let i = tracks.length;
+      while (i--) {
+        if (track === tracks[i] || track === tracks[i].track) {
+          this.el().removeChild(tracks[i]);
+        }
+      }
+    }
+  }
+
+  /**
+   * Gets available media playback quality metrics as specified by the W3C's Media
+   * Playback Quality API.
+   *
+   * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+   *
+   * @return {Object}
+   *         An object with supported media playback quality metrics
+   */
+  getVideoPlaybackQuality() {
+    if (typeof this.el().getVideoPlaybackQuality === 'function') {
+      return this.el().getVideoPlaybackQuality();
+    }
+    const videoPlaybackQuality = {};
+    if (typeof this.el().webkitDroppedFrameCount !== 'undefined' && typeof this.el().webkitDecodedFrameCount !== 'undefined') {
+      videoPlaybackQuality.droppedVideoFrames = this.el().webkitDroppedFrameCount;
+      videoPlaybackQuality.totalVideoFrames = this.el().webkitDecodedFrameCount;
+    }
+    if (window__default["default"].performance) {
+      videoPlaybackQuality.creationTime = window__default["default"].performance.now();
+    }
+    return videoPlaybackQuality;
+  }
+}
+
+/* HTML5 Support Testing ---------------------------------------------------- */
+
+/**
+ * Element for testing browser HTML5 media capabilities
+ *
+ * @type {Element}
+ * @constant
+ * @private
+ */
+defineLazyProperty(Html5, 'TEST_VID', function () {
+  if (!isReal()) {
+    return;
+  }
+  const video = document__default["default"].createElement('video');
+  const track = document__default["default"].createElement('track');
+  track.kind = 'captions';
+  track.srclang = 'en';
+  track.label = 'English';
+  video.appendChild(track);
+  return video;
+});
+
+/**
+ * Check if HTML5 media is supported by this browser/device.
+ *
+ * @return {boolean}
+ *         - True if HTML5 media is supported.
+ *         - False if HTML5 media is not supported.
+ */
+Html5.isSupported = function () {
+  // IE with no Media Player is a LIAR! (#984)
+  try {
+    Html5.TEST_VID.volume = 0.5;
+  } catch (e) {
+    return false;
+  }
+  return !!(Html5.TEST_VID && Html5.TEST_VID.canPlayType);
+};
+
+/**
+ * Check if the tech can support the given type
+ *
+ * @param {string} type
+ *        The mimetype to check
+ * @return {string} 'probably', 'maybe', or '' (empty string)
+ */
+Html5.canPlayType = function (type) {
+  return Html5.TEST_VID.canPlayType(type);
+};
+
+/**
+ * Check if the tech can support the given source
+ *
+ * @param {Object} srcObj
+ *        The source object
+ * @param {Object} options
+ *        The options passed to the tech
+ * @return {string} 'probably', 'maybe', or '' (empty string)
+ */
+Html5.canPlaySource = function (srcObj, options) {
+  return Html5.canPlayType(srcObj.type);
+};
+
+/**
+ * Check if the volume can be changed in this browser/device.
+ * Volume cannot be changed in a lot of mobile devices.
+ * Specifically, it can't be changed from 1 on iOS.
+ *
+ * @return {boolean}
+ *         - True if volume can be controlled
+ *         - False otherwise
+ */
+Html5.canControlVolume = function () {
+  // IE will error if Windows Media Player not installed #3315
+  try {
+    const volume = Html5.TEST_VID.volume;
+    Html5.TEST_VID.volume = volume / 2 + 0.1;
+    const canControl = volume !== Html5.TEST_VID.volume;
+
+    // With the introduction of iOS 15, there are cases where the volume is read as
+    // changed but reverts back to its original state at the start of the next tick.
+    // To determine whether volume can be controlled on iOS,
+    // a timeout is set and the volume is checked asynchronously.
+    // Since `features` doesn't currently work asynchronously, the value is manually set.
+    if (canControl && IS_IOS) {
+      window__default["default"].setTimeout(() => {
+        if (Html5 && Html5.prototype) {
+          Html5.prototype.featuresVolumeControl = volume !== Html5.TEST_VID.volume;
+        }
+      });
+
+      // default iOS to false, which will be updated in the timeout above.
+      return false;
+    }
+    return canControl;
+  } catch (e) {
+    return false;
+  }
+};
+
+/**
+ * Check if the volume can be muted in this browser/device.
+ * Some devices, e.g. iOS, don't allow changing volume
+ * but permits muting/unmuting.
+ *
+ * @return {boolean}
+ *      - True if volume can be muted
+ *      - False otherwise
+ */
+Html5.canMuteVolume = function () {
+  try {
+    const muted = Html5.TEST_VID.muted;
+
+    // in some versions of iOS muted property doesn't always
+    // work, so we want to set both property and attribute
+    Html5.TEST_VID.muted = !muted;
+    if (Html5.TEST_VID.muted) {
+      setAttribute(Html5.TEST_VID, 'muted', 'muted');
+    } else {
+      removeAttribute(Html5.TEST_VID, 'muted', 'muted');
+    }
+    return muted !== Html5.TEST_VID.muted;
+  } catch (e) {
+    return false;
+  }
+};
+
+/**
+ * Check if the playback rate can be changed in this browser/device.
+ *
+ * @return {boolean}
+ *         - True if playback rate can be controlled
+ *         - False otherwise
+ */
+Html5.canControlPlaybackRate = function () {
+  // Playback rate API is implemented in Android Chrome, but doesn't do anything
+  // https://github.com/videojs/video.js/issues/3180
+  if (IS_ANDROID && IS_CHROME && CHROME_VERSION < 58) {
+    return false;
+  }
+  // IE will error if Windows Media Player not installed #3315
+  try {
+    const playbackRate = Html5.TEST_VID.playbackRate;
+    Html5.TEST_VID.playbackRate = playbackRate / 2 + 0.1;
+    return playbackRate !== Html5.TEST_VID.playbackRate;
+  } catch (e) {
+    return false;
+  }
+};
+
+/**
+ * Check if we can override a video/audio elements attributes, with
+ * Object.defineProperty.
+ *
+ * @return {boolean}
+ *         - True if builtin attributes can be overridden
+ *         - False otherwise
+ */
+Html5.canOverrideAttributes = function () {
+  // if we cannot overwrite the src/innerHTML property, there is no support
+  // iOS 7 safari for instance cannot do this.
+  try {
+    const noop = () => {};
+    Object.defineProperty(document__default["default"].createElement('video'), 'src', {
+      get: noop,
+      set: noop
+    });
+    Object.defineProperty(document__default["default"].createElement('audio'), 'src', {
+      get: noop,
+      set: noop
+    });
+    Object.defineProperty(document__default["default"].createElement('video'), 'innerHTML', {
+      get: noop,
+      set: noop
+    });
+    Object.defineProperty(document__default["default"].createElement('audio'), 'innerHTML', {
+      get: noop,
+      set: noop
+    });
+  } catch (e) {
+    return false;
+  }
+  return true;
+};
+
+/**
+ * Check to see if native `TextTrack`s are supported by this browser/device.
+ *
+ * @return {boolean}
+ *         - True if native `TextTrack`s are supported.
+ *         - False otherwise
+ */
+Html5.supportsNativeTextTracks = function () {
+  return IS_ANY_SAFARI || IS_IOS && IS_CHROME;
+};
+
+/**
+ * Check to see if native `VideoTrack`s are supported by this browser/device
+ *
+ * @return {boolean}
+ *        - True if native `VideoTrack`s are supported.
+ *        - False otherwise
+ */
+Html5.supportsNativeVideoTracks = function () {
+  return !!(Html5.TEST_VID && Html5.TEST_VID.videoTracks);
+};
+
+/**
+ * Check to see if native `AudioTrack`s are supported by this browser/device
+ *
+ * @return {boolean}
+ *        - True if native `AudioTrack`s are supported.
+ *        - False otherwise
+ */
+Html5.supportsNativeAudioTracks = function () {
+  return !!(Html5.TEST_VID && Html5.TEST_VID.audioTracks);
+};
+
+/**
+ * An array of events available on the Html5 tech.
+ *
+ * @private
+ * @type {Array}
+ */
+Html5.Events = ['loadstart', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'seeking', 'seeked', 'ended', 'durationchange', 'timeupdate', 'progress', 'play', 'pause', 'ratechange', 'resize', 'volumechange'];
+
+/**
+ * Boolean indicating whether the `Tech` supports volume control.
+ *
+ * @type {boolean}
+ * @default {@link Html5.canControlVolume}
+ */
+/**
+ * Boolean indicating whether the `Tech` supports muting volume.
+ *
+ * @type {boolean}
+ * @default {@link Html5.canMuteVolume}
+ */
+
+/**
+ * Boolean indicating whether the `Tech` supports changing the speed at which the media
+ * plays. Examples:
+ *   - Set player to play 2x (twice) as fast
+ *   - Set player to play 0.5x (half) as fast
+ *
+ * @type {boolean}
+ * @default {@link Html5.canControlPlaybackRate}
+ */
+
+/**
+ * Boolean indicating whether the `Tech` supports the `sourceset` event.
+ *
+ * @type {boolean}
+ * @default
+ */
+/**
+ * Boolean indicating whether the `HTML5` tech currently supports native `TextTrack`s.
+ *
+ * @type {boolean}
+ * @default {@link Html5.supportsNativeTextTracks}
+ */
+/**
+ * Boolean indicating whether the `HTML5` tech currently supports native `VideoTrack`s.
+ *
+ * @type {boolean}
+ * @default {@link Html5.supportsNativeVideoTracks}
+ */
+/**
+ * Boolean indicating whether the `HTML5` tech currently supports native `AudioTrack`s.
+ *
+ * @type {boolean}
+ * @default {@link Html5.supportsNativeAudioTracks}
+ */
+[['featuresMuteControl', 'canMuteVolume'], ['featuresPlaybackRate', 'canControlPlaybackRate'], ['featuresSourceset', 'canOverrideAttributes'], ['featuresNativeTextTracks', 'supportsNativeTextTracks'], ['featuresNativeVideoTracks', 'supportsNativeVideoTracks'], ['featuresNativeAudioTracks', 'supportsNativeAudioTracks']].forEach(function ([key, fn]) {
+  defineLazyProperty(Html5.prototype, key, () => Html5[fn](), true);
+});
+Html5.prototype.featuresVolumeControl = Html5.canControlVolume();
+
+/**
+ * Boolean indicating whether the `HTML5` tech currently supports the media element
+ * moving in the DOM. iOS breaks if you move the media element, so this is set this to
+ * false there. Everywhere else this should be true.
+ *
+ * @type {boolean}
+ * @default
+ */
+Html5.prototype.movingMediaElementInDOM = !IS_IOS;
+
+// TODO: Previous comment: No longer appears to be used. Can probably be removed.
+//       Is this true?
+/**
+ * Boolean indicating whether the `HTML5` tech currently supports automatic media resize
+ * when going into fullscreen.
+ *
+ * @type {boolean}
+ * @default
+ */
+Html5.prototype.featuresFullscreenResize = true;
+
+/**
+ * Boolean indicating whether the `HTML5` tech currently supports the progress event.
+ * If this is false, manual `progress` events will be triggered instead.
+ *
+ * @type {boolean}
+ * @default
+ */
+Html5.prototype.featuresProgressEvents = true;
+
+/**
+ * Boolean indicating whether the `HTML5` tech currently supports the timeupdate event.
+ * If this is false, manual `timeupdate` events will be triggered instead.
+ *
+ * @default
+ */
+Html5.prototype.featuresTimeupdateEvents = true;
+
+/**
+ * Whether the HTML5 el supports `requestVideoFrameCallback`
+ *
+ * @type {boolean}
+ */
+Html5.prototype.featuresVideoFrameCallback = !!(Html5.TEST_VID && Html5.TEST_VID.requestVideoFrameCallback);
+Html5.disposeMediaElement = function (el) {
+  if (!el) {
+    return;
+  }
+  if (el.parentNode) {
+    el.parentNode.removeChild(el);
+  }
+
+  // remove any child track or source nodes to prevent their loading
+  while (el.hasChildNodes()) {
+    el.removeChild(el.firstChild);
+  }
+
+  // remove any src reference. not setting `src=''` because that causes a warning
+  // in firefox
+  el.removeAttribute('src');
+
+  // force the media element to update its loading state by calling load()
+  // however IE on Windows 7N has a bug that throws an error so need a try/catch (#793)
+  if (typeof el.load === 'function') {
+    // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+    (function () {
+      try {
+        el.load();
+      } catch (e) {
+        // not supported
+      }
+    })();
+  }
+};
+Html5.resetMediaElement = function (el) {
+  if (!el) {
+    return;
+  }
+  const sources = el.querySelectorAll('source');
+  let i = sources.length;
+  while (i--) {
+    el.removeChild(sources[i]);
+  }
+
+  // remove any src reference.
+  // not setting `src=''` because that throws an error
+  el.removeAttribute('src');
+  if (typeof el.load === 'function') {
+    // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+    (function () {
+      try {
+        el.load();
+      } catch (e) {
+        // satisfy linter
+      }
+    })();
+  }
+};
+
+/* Native HTML5 element property wrapping ----------------------------------- */
+// Wrap native boolean attributes with getters that check both property and attribute
+// The list is as followed:
+// muted, defaultMuted, autoplay, controls, loop, playsinline
+[
+/**
+ * Get the value of `muted` from the media element. `muted` indicates
+ * that the volume for the media should be set to silent. This does not actually change
+ * the `volume` attribute.
+ *
+ * @method Html5#muted
+ * @return {boolean}
+ *         - True if the value of `volume` should be ignored and the audio set to silent.
+ *         - False if the value of `volume` should be used.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted}
+ */
+'muted',
+/**
+ * Get the value of `defaultMuted` from the media element. `defaultMuted` indicates
+ * whether the media should start muted or not. Only changes the default state of the
+ * media. `muted` and `defaultMuted` can have different values. {@link Html5#muted} indicates the
+ * current state.
+ *
+ * @method Html5#defaultMuted
+ * @return {boolean}
+ *         - The value of `defaultMuted` from the media element.
+ *         - True indicates that the media should start muted.
+ *         - False indicates that the media should not start muted
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted}
+ */
+'defaultMuted',
+/**
+ * Get the value of `autoplay` from the media element. `autoplay` indicates
+ * that the media should start to play as soon as the page is ready.
+ *
+ * @method Html5#autoplay
+ * @return {boolean}
+ *         - The value of `autoplay` from the media element.
+ *         - True indicates that the media should start as soon as the page loads.
+ *         - False indicates that the media should not start as soon as the page loads.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay}
+ */
+'autoplay',
+/**
+ * Get the value of `controls` from the media element. `controls` indicates
+ * whether the native media controls should be shown or hidden.
+ *
+ * @method Html5#controls
+ * @return {boolean}
+ *         - The value of `controls` from the media element.
+ *         - True indicates that native controls should be showing.
+ *         - False indicates that native controls should be hidden.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-controls}
+ */
+'controls',
+/**
+ * Get the value of `loop` from the media element. `loop` indicates
+ * that the media should return to the start of the media and continue playing once
+ * it reaches the end.
+ *
+ * @method Html5#loop
+ * @return {boolean}
+ *         - The value of `loop` from the media element.
+ *         - True indicates that playback should seek back to start once
+ *           the end of a media is reached.
+ *         - False indicates that playback should not loop back to the start when the
+ *           end of the media is reached.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop}
+ */
+'loop',
+/**
+ * Get the value of `playsinline` from the media element. `playsinline` indicates
+ * to the browser that non-fullscreen playback is preferred when fullscreen
+ * playback is the native default, such as in iOS Safari.
+ *
+ * @method Html5#playsinline
+ * @return {boolean}
+ *         - The value of `playsinline` from the media element.
+ *         - True indicates that the media should play inline.
+ *         - False indicates that the media should not play inline.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+ */
+'playsinline'].forEach(function (prop) {
+  Html5.prototype[prop] = function () {
+    return this.el_[prop] || this.el_.hasAttribute(prop);
+  };
+});
+
+// Wrap native boolean attributes with setters that set both property and attribute
+// The list is as followed:
+// setMuted, setDefaultMuted, setAutoplay, setLoop, setPlaysinline
+// setControls is special-cased above
+[
+/**
+ * Set the value of `muted` on the media element. `muted` indicates that the current
+ * audio level should be silent.
+ *
+ * @method Html5#setMuted
+ * @param {boolean} muted
+ *        - True if the audio should be set to silent
+ *        - False otherwise
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted}
+ */
+'muted',
+/**
+ * Set the value of `defaultMuted` on the media element. `defaultMuted` indicates that the current
+ * audio level should be silent, but will only effect the muted level on initial playback..
+ *
+ * @method Html5.prototype.setDefaultMuted
+ * @param {boolean} defaultMuted
+ *        - True if the audio should be set to silent
+ *        - False otherwise
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted}
+ */
+'defaultMuted',
+/**
+ * Set the value of `autoplay` on the media element. `autoplay` indicates
+ * that the media should start to play as soon as the page is ready.
+ *
+ * @method Html5#setAutoplay
+ * @param {boolean} autoplay
+ *         - True indicates that the media should start as soon as the page loads.
+ *         - False indicates that the media should not start as soon as the page loads.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay}
+ */
+'autoplay',
+/**
+ * Set the value of `loop` on the media element. `loop` indicates
+ * that the media should return to the start of the media and continue playing once
+ * it reaches the end.
+ *
+ * @method Html5#setLoop
+ * @param {boolean} loop
+ *         - True indicates that playback should seek back to start once
+ *           the end of a media is reached.
+ *         - False indicates that playback should not loop back to the start when the
+ *           end of the media is reached.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop}
+ */
+'loop',
+/**
+ * Set the value of `playsinline` from the media element. `playsinline` indicates
+ * to the browser that non-fullscreen playback is preferred when fullscreen
+ * playback is the native default, such as in iOS Safari.
+ *
+ * @method Html5#setPlaysinline
+ * @param {boolean} playsinline
+ *         - True indicates that the media should play inline.
+ *         - False indicates that the media should not play inline.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+ */
+'playsinline'].forEach(function (prop) {
+  Html5.prototype['set' + toTitleCase$1(prop)] = function (v) {
+    this.el_[prop] = v;
+    if (v) {
+      this.el_.setAttribute(prop, prop);
+    } else {
+      this.el_.removeAttribute(prop);
+    }
+  };
+});
+
+// Wrap native properties with a getter
+// The list is as followed
+// paused, currentTime, buffered, volume, poster, preload, error, seeking
+// seekable, ended, playbackRate, defaultPlaybackRate, disablePictureInPicture
+// played, networkState, readyState, videoWidth, videoHeight, crossOrigin
+[
+/**
+ * Get the value of `paused` from the media element. `paused` indicates whether the media element
+ * is currently paused or not.
+ *
+ * @method Html5#paused
+ * @return {boolean}
+ *         The value of `paused` from the media element.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-paused}
+ */
+'paused',
+/**
+ * Get the value of `currentTime` from the media element. `currentTime` indicates
+ * the current second that the media is at in playback.
+ *
+ * @method Html5#currentTime
+ * @return {number}
+ *         The value of `currentTime` from the media element.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-currenttime}
+ */
+'currentTime',
+/**
+ * Get the value of `buffered` from the media element. `buffered` is a `TimeRange`
+ * object that represents the parts of the media that are already downloaded and
+ * available for playback.
+ *
+ * @method Html5#buffered
+ * @return {TimeRange}
+ *         The value of `buffered` from the media element.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-buffered}
+ */
+'buffered',
+/**
+ * Get the value of `volume` from the media element. `volume` indicates
+ * the current playback volume of audio for a media. `volume` will be a value from 0
+ * (silent) to 1 (loudest and default).
+ *
+ * @method Html5#volume
+ * @return {number}
+ *         The value of `volume` from the media element. Value will be between 0-1.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume}
+ */
+'volume',
+/**
+ * Get the value of `poster` from the media element. `poster` indicates
+ * that the url of an image file that can/will be shown when no media data is available.
+ *
+ * @method Html5#poster
+ * @return {string}
+ *         The value of `poster` from the media element. Value will be a url to an
+ *         image.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-video-poster}
+ */
+'poster',
+/**
+ * Get the value of `preload` from the media element. `preload` indicates
+ * what should download before the media is interacted with. It can have the following
+ * values:
+ * - none: nothing should be downloaded
+ * - metadata: poster and the first few frames of the media may be downloaded to get
+ *   media dimensions and other metadata
+ * - auto: allow the media and metadata for the media to be downloaded before
+ *    interaction
+ *
+ * @method Html5#preload
+ * @return {string}
+ *         The value of `preload` from the media element. Will be 'none', 'metadata',
+ *         or 'auto'.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload}
+ */
+'preload',
+/**
+ * Get the value of the `error` from the media element. `error` indicates any
+ * MediaError that may have occurred during playback. If error returns null there is no
+ * current error.
+ *
+ * @method Html5#error
+ * @return {MediaError|null}
+ *         The value of `error` from the media element. Will be `MediaError` if there
+ *         is a current error and null otherwise.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-error}
+ */
+'error',
+/**
+ * Get the value of `seeking` from the media element. `seeking` indicates whether the
+ * media is currently seeking to a new position or not.
+ *
+ * @method Html5#seeking
+ * @return {boolean}
+ *         - The value of `seeking` from the media element.
+ *         - True indicates that the media is currently seeking to a new position.
+ *         - False indicates that the media is not seeking to a new position at this time.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seeking}
+ */
+'seeking',
+/**
+ * Get the value of `seekable` from the media element. `seekable` returns a
+ * `TimeRange` object indicating ranges of time that can currently be `seeked` to.
+ *
+ * @method Html5#seekable
+ * @return {TimeRange}
+ *         The value of `seekable` from the media element. A `TimeRange` object
+ *         indicating the current ranges of time that can be seeked to.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seekable}
+ */
+'seekable',
+/**
+ * Get the value of `ended` from the media element. `ended` indicates whether
+ * the media has reached the end or not.
+ *
+ * @method Html5#ended
+ * @return {boolean}
+ *         - The value of `ended` from the media element.
+ *         - True indicates that the media has ended.
+ *         - False indicates that the media has not ended.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-ended}
+ */
+'ended',
+/**
+ * Get the value of `playbackRate` from the media element. `playbackRate` indicates
+ * the rate at which the media is currently playing back. Examples:
+ *   - if playbackRate is set to 2, media will play twice as fast.
+ *   - if playbackRate is set to 0.5, media will play half as fast.
+ *
+ * @method Html5#playbackRate
+ * @return {number}
+ *         The value of `playbackRate` from the media element. A number indicating
+ *         the current playback speed of the media, where 1 is normal speed.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+ */
+'playbackRate',
+/**
+ * Get the value of `defaultPlaybackRate` from the media element. `defaultPlaybackRate` indicates
+ * the rate at which the media is currently playing back. This value will not indicate the current
+ * `playbackRate` after playback has started, use {@link Html5#playbackRate} for that.
+ *
+ * Examples:
+ *   - if defaultPlaybackRate is set to 2, media will play twice as fast.
+ *   - if defaultPlaybackRate is set to 0.5, media will play half as fast.
+ *
+ * @method Html5.prototype.defaultPlaybackRate
+ * @return {number}
+ *         The value of `defaultPlaybackRate` from the media element. A number indicating
+ *         the current playback speed of the media, where 1 is normal speed.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+ */
+'defaultPlaybackRate',
+/**
+ * Get the value of 'disablePictureInPicture' from the video element.
+ *
+ * @method Html5#disablePictureInPicture
+ * @return {boolean} value
+ *         - The value of `disablePictureInPicture` from the video element.
+ *         - True indicates that the video can't be played in Picture-In-Picture mode
+ *         - False indicates that the video can be played in Picture-In-Picture mode
+ *
+ * @see [Spec]{@link https://w3c.github.io/picture-in-picture/#disable-pip}
+ */
+'disablePictureInPicture',
+/**
+ * Get the value of `played` from the media element. `played` returns a `TimeRange`
+ * object representing points in the media timeline that have been played.
+ *
+ * @method Html5#played
+ * @return {TimeRange}
+ *         The value of `played` from the media element. A `TimeRange` object indicating
+ *         the ranges of time that have been played.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-played}
+ */
+'played',
+/**
+ * Get the value of `networkState` from the media element. `networkState` indicates
+ * the current network state. It returns an enumeration from the following list:
+ * - 0: NETWORK_EMPTY
+ * - 1: NETWORK_IDLE
+ * - 2: NETWORK_LOADING
+ * - 3: NETWORK_NO_SOURCE
+ *
+ * @method Html5#networkState
+ * @return {number}
+ *         The value of `networkState` from the media element. This will be a number
+ *         from the list in the description.
+ *
+ * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-networkstate}
+ */
+'networkState',
+/**
+ * Get the value of `readyState` from the media element. `readyState` indicates
+ * the current state of the media element. It returns an enumeration from the
+ * following list:
+ * - 0: HAVE_NOTHING
+ * - 1: HAVE_METADATA
+ * - 2: HAVE_CURRENT_DATA
+ * - 3: HAVE_FUTURE_DATA
+ * - 4: HAVE_ENOUGH_DATA
+ *
+ * @method Html5#readyState
+ * @return {number}
+ *         The value of `readyState` from the media element. This will be a number
+ *         from the list in the description.
+ *
+ * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#ready-states}
+ */
+'readyState',
+/**
+ * Get the value of `videoWidth` from the video element. `videoWidth` indicates
+ * the current width of the video in css pixels.
+ *
+ * @method Html5#videoWidth
+ * @return {number}
+ *         The value of `videoWidth` from the video element. This will be a number
+ *         in css pixels.
+ *
+ * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth}
+ */
+'videoWidth',
+/**
+ * Get the value of `videoHeight` from the video element. `videoHeight` indicates
+ * the current height of the video in css pixels.
+ *
+ * @method Html5#videoHeight
+ * @return {number}
+ *         The value of `videoHeight` from the video element. This will be a number
+ *         in css pixels.
+ *
+ * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth}
+ */
+'videoHeight',
+/**
+ * Get the value of `crossOrigin` from the media element. `crossOrigin` indicates
+ * to the browser that should sent the cookies along with the requests for the
+ * different assets/playlists
+ *
+ * @method Html5#crossOrigin
+ * @return {string}
+ *         - anonymous indicates that the media should not sent cookies.
+ *         - use-credentials indicates that the media should sent cookies along the requests.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/#attr-media-crossorigin}
+ */
+'crossOrigin'].forEach(function (prop) {
+  Html5.prototype[prop] = function () {
+    return this.el_[prop];
+  };
+});
+
+// Wrap native properties with a setter in this format:
+// set + toTitleCase(name)
+// The list is as follows:
+// setVolume, setSrc, setPoster, setPreload, setPlaybackRate, setDefaultPlaybackRate,
+// setDisablePictureInPicture, setCrossOrigin
+[
+/**
+ * Set the value of `volume` on the media element. `volume` indicates the current
+ * audio level as a percentage in decimal form. This means that 1 is 100%, 0.5 is 50%, and
+ * so on.
+ *
+ * @method Html5#setVolume
+ * @param {number} percentAsDecimal
+ *        The volume percent as a decimal. Valid range is from 0-1.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume}
+ */
+'volume',
+/**
+ * Set the value of `src` on the media element. `src` indicates the current
+ * {@link Tech~SourceObject} for the media.
+ *
+ * @method Html5#setSrc
+ * @param {Tech~SourceObject} src
+ *        The source object to set as the current source.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-src}
+ */
+'src',
+/**
+ * Set the value of `poster` on the media element. `poster` is the url to
+ * an image file that can/will be shown when no media data is available.
+ *
+ * @method Html5#setPoster
+ * @param {string} poster
+ *        The url to an image that should be used as the `poster` for the media
+ *        element.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-poster}
+ */
+'poster',
+/**
+ * Set the value of `preload` on the media element. `preload` indicates
+ * what should download before the media is interacted with. It can have the following
+ * values:
+ * - none: nothing should be downloaded
+ * - metadata: poster and the first few frames of the media may be downloaded to get
+ *   media dimensions and other metadata
+ * - auto: allow the media and metadata for the media to be downloaded before
+ *    interaction
+ *
+ * @method Html5#setPreload
+ * @param {string} preload
+ *         The value of `preload` to set on the media element. Must be 'none', 'metadata',
+ *         or 'auto'.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload}
+ */
+'preload',
+/**
+ * Set the value of `playbackRate` on the media element. `playbackRate` indicates
+ * the rate at which the media should play back. Examples:
+ *   - if playbackRate is set to 2, media will play twice as fast.
+ *   - if playbackRate is set to 0.5, media will play half as fast.
+ *
+ * @method Html5#setPlaybackRate
+ * @return {number}
+ *         The value of `playbackRate` from the media element. A number indicating
+ *         the current playback speed of the media, where 1 is normal speed.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+ */
+'playbackRate',
+/**
+ * Set the value of `defaultPlaybackRate` on the media element. `defaultPlaybackRate` indicates
+ * the rate at which the media should play back upon initial startup. Changing this value
+ * after a video has started will do nothing. Instead you should used {@link Html5#setPlaybackRate}.
+ *
+ * Example Values:
+ *   - if playbackRate is set to 2, media will play twice as fast.
+ *   - if playbackRate is set to 0.5, media will play half as fast.
+ *
+ * @method Html5.prototype.setDefaultPlaybackRate
+ * @return {number}
+ *         The value of `defaultPlaybackRate` from the media element. A number indicating
+ *         the current playback speed of the media, where 1 is normal speed.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultplaybackrate}
+ */
+'defaultPlaybackRate',
+/**
+ * Prevents the browser from suggesting a Picture-in-Picture context menu
+ * or to request Picture-in-Picture automatically in some cases.
+ *
+ * @method Html5#setDisablePictureInPicture
+ * @param {boolean} value
+ *         The true value will disable Picture-in-Picture mode.
+ *
+ * @see [Spec]{@link https://w3c.github.io/picture-in-picture/#disable-pip}
+ */
+'disablePictureInPicture',
+/**
+ * Set the value of `crossOrigin` from the media element. `crossOrigin` indicates
+ * to the browser that should sent the cookies along with the requests for the
+ * different assets/playlists
+ *
+ * @method Html5#setCrossOrigin
+ * @param {string} crossOrigin
+ *         - anonymous indicates that the media should not sent cookies.
+ *         - use-credentials indicates that the media should sent cookies along the requests.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/#attr-media-crossorigin}
+ */
+'crossOrigin'].forEach(function (prop) {
+  Html5.prototype['set' + toTitleCase$1(prop)] = function (v) {
+    this.el_[prop] = v;
+  };
+});
+
+// wrap native functions with a function
+// The list is as follows:
+// pause, load, play
+[
+/**
+ * A wrapper around the media elements `pause` function. This will call the `HTML5`
+ * media elements `pause` function.
+ *
+ * @method Html5#pause
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-pause}
+ */
+'pause',
+/**
+ * A wrapper around the media elements `load` function. This will call the `HTML5`s
+ * media element `load` function.
+ *
+ * @method Html5#load
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-load}
+ */
+'load',
+/**
+ * A wrapper around the media elements `play` function. This will call the `HTML5`s
+ * media element `play` function.
+ *
+ * @method Html5#play
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-play}
+ */
+'play'].forEach(function (prop) {
+  Html5.prototype[prop] = function () {
+    return this.el_[prop]();
+  };
+});
+Tech.withSourceHandlers(Html5);
+
+/**
+ * Native source handler for Html5, simply passes the source to the media element.
+ *
+ * @property {Tech~SourceObject} source
+ *        The source object
+ *
+ * @property {Html5} tech
+ *        The instance of the HTML5 tech.
+ */
+Html5.nativeSourceHandler = {};
+
+/**
+ * Check if the media element can play the given mime type.
+ *
+ * @param {string} type
+ *        The mimetype to check
+ *
+ * @return {string}
+ *         'probably', 'maybe', or '' (empty string)
+ */
+Html5.nativeSourceHandler.canPlayType = function (type) {
+  // IE without MediaPlayer throws an error (#519)
+  try {
+    return Html5.TEST_VID.canPlayType(type);
+  } catch (e) {
+    return '';
+  }
+};
+
+/**
+ * Check if the media element can handle a source natively.
+ *
+ * @param {Tech~SourceObject} source
+ *         The source object
+ *
+ * @param {Object} [options]
+ *         Options to be passed to the tech.
+ *
+ * @return {string}
+ *         'probably', 'maybe', or '' (empty string).
+ */
+Html5.nativeSourceHandler.canHandleSource = function (source, options) {
+  // If a type was provided we should rely on that
+  if (source.type) {
+    return Html5.nativeSourceHandler.canPlayType(source.type);
+
+    // If no type, fall back to checking 'video/[EXTENSION]'
+  } else if (source.src) {
+    const ext = getFileExtension(source.src);
+    return Html5.nativeSourceHandler.canPlayType(`video/${ext}`);
+  }
+  return '';
+};
+
+/**
+ * Pass the source to the native media element.
+ *
+ * @param {Tech~SourceObject} source
+ *        The source object
+ *
+ * @param {Html5} tech
+ *        The instance of the Html5 tech
+ *
+ * @param {Object} [options]
+ *        The options to pass to the source
+ */
+Html5.nativeSourceHandler.handleSource = function (source, tech, options) {
+  tech.setSrc(source.src);
+};
+
+/**
+ * A noop for the native dispose function, as cleanup is not needed.
+ */
+Html5.nativeSourceHandler.dispose = function () {};
+
+// Register the native source handler
+Html5.registerSourceHandler(Html5.nativeSourceHandler);
+Tech.registerTech('Html5', Html5);
+
+/**
+ * @file player.js
+ */
+
+// The following tech events are simply re-triggered
+// on the player when they happen
+const TECH_EVENTS_RETRIGGER = [
+/**
+ * Fired while the user agent is downloading media data.
+ *
+ * @event Player#progress
+ * @type {Event}
+ */
+/**
+ * Retrigger the `progress` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechProgress_
+ * @fires Player#progress
+ * @listens Tech#progress
+ */
+'progress',
+/**
+ * Fires when the loading of an audio/video is aborted.
+ *
+ * @event Player#abort
+ * @type {Event}
+ */
+/**
+ * Retrigger the `abort` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechAbort_
+ * @fires Player#abort
+ * @listens Tech#abort
+ */
+'abort',
+/**
+ * Fires when the browser is intentionally not getting media data.
+ *
+ * @event Player#suspend
+ * @type {Event}
+ */
+/**
+ * Retrigger the `suspend` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechSuspend_
+ * @fires Player#suspend
+ * @listens Tech#suspend
+ */
+'suspend',
+/**
+ * Fires when the current playlist is empty.
+ *
+ * @event Player#emptied
+ * @type {Event}
+ */
+/**
+ * Retrigger the `emptied` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechEmptied_
+ * @fires Player#emptied
+ * @listens Tech#emptied
+ */
+'emptied',
+/**
+ * Fires when the browser is trying to get media data, but data is not available.
+ *
+ * @event Player#stalled
+ * @type {Event}
+ */
+/**
+ * Retrigger the `stalled` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechStalled_
+ * @fires Player#stalled
+ * @listens Tech#stalled
+ */
+'stalled',
+/**
+ * Fires when the browser has loaded meta data for the audio/video.
+ *
+ * @event Player#loadedmetadata
+ * @type {Event}
+ */
+/**
+ * Retrigger the `loadedmetadata` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechLoadedmetadata_
+ * @fires Player#loadedmetadata
+ * @listens Tech#loadedmetadata
+ */
+'loadedmetadata',
+/**
+ * Fires when the browser has loaded the current frame of the audio/video.
+ *
+ * @event Player#loadeddata
+ * @type {event}
+ */
+/**
+ * Retrigger the `loadeddata` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechLoaddeddata_
+ * @fires Player#loadeddata
+ * @listens Tech#loadeddata
+ */
+'loadeddata',
+/**
+ * Fires when the current playback position has changed.
+ *
+ * @event Player#timeupdate
+ * @type {event}
+ */
+/**
+ * Retrigger the `timeupdate` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechTimeUpdate_
+ * @fires Player#timeupdate
+ * @listens Tech#timeupdate
+ */
+'timeupdate',
+/**
+ * Fires when the video's intrinsic dimensions change
+ *
+ * @event Player#resize
+ * @type {event}
+ */
+/**
+ * Retrigger the `resize` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechResize_
+ * @fires Player#resize
+ * @listens Tech#resize
+ */
+'resize',
+/**
+ * Fires when the volume has been changed
+ *
+ * @event Player#volumechange
+ * @type {event}
+ */
+/**
+ * Retrigger the `volumechange` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechVolumechange_
+ * @fires Player#volumechange
+ * @listens Tech#volumechange
+ */
+'volumechange',
+/**
+ * Fires when the text track has been changed
+ *
+ * @event Player#texttrackchange
+ * @type {event}
+ */
+/**
+ * Retrigger the `texttrackchange` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechTexttrackchange_
+ * @fires Player#texttrackchange
+ * @listens Tech#texttrackchange
+ */
+'texttrackchange'];
+
+// events to queue when playback rate is zero
+// this is a hash for the sole purpose of mapping non-camel-cased event names
+// to camel-cased function names
+const TECH_EVENTS_QUEUE = {
+  canplay: 'CanPlay',
+  canplaythrough: 'CanPlayThrough',
+  playing: 'Playing',
+  seeked: 'Seeked'
+};
+const BREAKPOINT_ORDER = ['tiny', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'huge'];
+const BREAKPOINT_CLASSES = {};
+
+// grep: vjs-layout-tiny
+// grep: vjs-layout-x-small
+// grep: vjs-layout-small
+// grep: vjs-layout-medium
+// grep: vjs-layout-large
+// grep: vjs-layout-x-large
+// grep: vjs-layout-huge
+BREAKPOINT_ORDER.forEach(k => {
+  const v = k.charAt(0) === 'x' ? `x-${k.substring(1)}` : k;
+  BREAKPOINT_CLASSES[k] = `vjs-layout-${v}`;
+});
+const DEFAULT_BREAKPOINTS = {
+  tiny: 210,
+  xsmall: 320,
+  small: 425,
+  medium: 768,
+  large: 1440,
+  xlarge: 2560,
+  huge: Infinity
+};
+
+/**
+ * An instance of the `Player` class is created when any of the Video.js setup methods
+ * are used to initialize a video.
+ *
+ * After an instance has been created it can be accessed globally in three ways:
+ * 1. By calling `videojs.getPlayer('example_video_1');`
+ * 2. By calling `videojs('example_video_1');` (not recommended)
+ * 2. By using it directly via `videojs.players.example_video_1;`
+ *
+ * @extends Component
+ * @global
+ */
+class Player extends Component$1 {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {Element} tag
+   *        The original video DOM element used for configuring options.
+   *
+   * @param {Object} [options]
+   *        Object of option names and values.
+   *
+   * @param {Function} [ready]
+   *        Ready callback function.
+   */
+  constructor(tag, options, ready) {
+    // Make sure tag ID exists
+    // also here.. probably better
+    tag.id = tag.id || options.id || `vjs_video_${newGUID()}`;
+
+    // Set Options
+    // The options argument overrides options set in the video tag
+    // which overrides globally set options.
+    // This latter part coincides with the load order
+    // (tag must exist before Player)
+    options = Object.assign(Player.getTagSettings(tag), options);
+
+    // Delay the initialization of children because we need to set up
+    // player properties first, and can't use `this` before `super()`
+    options.initChildren = false;
+
+    // Same with creating the element
+    options.createEl = false;
+
+    // don't auto mixin the evented mixin
+    options.evented = false;
+
+    // we don't want the player to report touch activity on itself
+    // see enableTouchActivity in Component
+    options.reportTouchActivity = false;
+
+    // If language is not set, get the closest lang attribute
+    if (!options.language) {
+      const closest = tag.closest('[lang]');
+      if (closest) {
+        options.language = closest.getAttribute('lang');
+      }
+    }
+
+    // Run base component initializing with new options
+    super(null, options, ready);
+
+    // Create bound methods for document listeners.
+    this.boundDocumentFullscreenChange_ = e => this.documentFullscreenChange_(e);
+    this.boundFullWindowOnEscKey_ = e => this.fullWindowOnEscKey(e);
+    this.boundUpdateStyleEl_ = e => this.updateStyleEl_(e);
+    this.boundApplyInitTime_ = e => this.applyInitTime_(e);
+    this.boundUpdateCurrentBreakpoint_ = e => this.updateCurrentBreakpoint_(e);
+    this.boundHandleTechClick_ = e => this.handleTechClick_(e);
+    this.boundHandleTechDoubleClick_ = e => this.handleTechDoubleClick_(e);
+    this.boundHandleTechTouchStart_ = e => this.handleTechTouchStart_(e);
+    this.boundHandleTechTouchMove_ = e => this.handleTechTouchMove_(e);
+    this.boundHandleTechTouchEnd_ = e => this.handleTechTouchEnd_(e);
+    this.boundHandleTechTap_ = e => this.handleTechTap_(e);
+
+    // default isFullscreen_ to false
+    this.isFullscreen_ = false;
+
+    // create logger
+    this.log = createLogger(this.id_);
+
+    // Hold our own reference to fullscreen api so it can be mocked in tests
+    this.fsApi_ = FullscreenApi;
+
+    // Tracks when a tech changes the poster
+    this.isPosterFromTech_ = false;
+
+    // Holds callback info that gets queued when playback rate is zero
+    // and a seek is happening
+    this.queuedCallbacks_ = [];
+
+    // Turn off API access because we're loading a new tech that might load asynchronously
+    this.isReady_ = false;
+
+    // Init state hasStarted_
+    this.hasStarted_ = false;
+
+    // Init state userActive_
+    this.userActive_ = false;
+
+    // Init debugEnabled_
+    this.debugEnabled_ = false;
+
+    // Init state audioOnlyMode_
+    this.audioOnlyMode_ = false;
+
+    // Init state audioPosterMode_
+    this.audioPosterMode_ = false;
+
+    // Init state audioOnlyCache_
+    this.audioOnlyCache_ = {
+      playerHeight: null,
+      hiddenChildren: []
+    };
+
+    // if the global option object was accidentally blown away by
+    // someone, bail early with an informative error
+    if (!this.options_ || !this.options_.techOrder || !this.options_.techOrder.length) {
+      throw new Error('No techOrder specified. Did you overwrite ' + 'videojs.options instead of just changing the ' + 'properties you want to override?');
+    }
+
+    // Store the original tag used to set options
+    this.tag = tag;
+
+    // Store the tag attributes used to restore html5 element
+    this.tagAttributes = tag && getAttributes(tag);
+
+    // Update current language
+    this.language(this.options_.language);
+
+    // Update Supported Languages
+    if (options.languages) {
+      // Normalise player option languages to lowercase
+      const languagesToLower = {};
+      Object.getOwnPropertyNames(options.languages).forEach(function (name) {
+        languagesToLower[name.toLowerCase()] = options.languages[name];
+      });
+      this.languages_ = languagesToLower;
+    } else {
+      this.languages_ = Player.prototype.options_.languages;
+    }
+    this.resetCache_();
+
+    // Set poster
+    /** @type string */
+    this.poster_ = options.poster || '';
+
+    // Set controls
+    /** @type {boolean} */
+    this.controls_ = !!options.controls;
+
+    // Original tag settings stored in options
+    // now remove immediately so native controls don't flash.
+    // May be turned back on by HTML5 tech if nativeControlsForTouch is true
+    tag.controls = false;
+    tag.removeAttribute('controls');
+    this.changingSrc_ = false;
+    this.playCallbacks_ = [];
+    this.playTerminatedQueue_ = [];
+
+    // the attribute overrides the option
+    if (tag.hasAttribute('autoplay')) {
+      this.autoplay(true);
+    } else {
+      // otherwise use the setter to validate and
+      // set the correct value.
+      this.autoplay(this.options_.autoplay);
+    }
+
+    // check plugins
+    if (options.plugins) {
+      Object.keys(options.plugins).forEach(name => {
+        if (typeof this[name] !== 'function') {
+          throw new Error(`plugin "${name}" does not exist`);
+        }
+      });
+    }
+
+    /*
+     * Store the internal state of scrubbing
+     *
+     * @private
+     * @return {Boolean} True if the user is scrubbing
+     */
+    this.scrubbing_ = false;
+    this.el_ = this.createEl();
+
+    // Make this an evented object and use `el_` as its event bus.
+    evented(this, {
+      eventBusKey: 'el_'
+    });
+
+    // listen to document and player fullscreenchange handlers so we receive those events
+    // before a user can receive them so we can update isFullscreen appropriately.
+    // make sure that we listen to fullscreenchange events before everything else to make sure that
+    // our isFullscreen method is updated properly for internal components as well as external.
+    if (this.fsApi_.requestFullscreen) {
+      on(document__default["default"], this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+      this.on(this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+    }
+    if (this.fluid_) {
+      this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+    }
+    // We also want to pass the original player options to each component and plugin
+    // as well so they don't need to reach back into the player for options later.
+    // We also need to do another copy of this.options_ so we don't end up with
+    // an infinite loop.
+    const playerOptionsCopy = merge$1(this.options_);
+
+    // Load plugins
+    if (options.plugins) {
+      Object.keys(options.plugins).forEach(name => {
+        this[name](options.plugins[name]);
+      });
+    }
+
+    // Enable debug mode to fire debugon event for all plugins.
+    if (options.debug) {
+      this.debug(true);
+    }
+    this.options_.playerOptions = playerOptionsCopy;
+    this.middleware_ = [];
+    this.playbackRates(options.playbackRates);
+    if (options.experimentalSvgIcons) {
+      // Add SVG Sprite to the DOM
+      const parser = new window__default["default"].DOMParser();
+      const parsedSVG = parser.parseFromString(icons, 'image/svg+xml');
+      const errorNode = parsedSVG.querySelector('parsererror');
+      if (errorNode) {
+        log$1.warn('Failed to load SVG Icons. Falling back to Font Icons.');
+        this.options_.experimentalSvgIcons = null;
+      } else {
+        const sprite = parsedSVG.documentElement;
+        sprite.style.display = 'none';
+        this.el_.appendChild(sprite);
+        this.addClass('vjs-svg-icons-enabled');
+      }
+    }
+    this.initChildren();
+
+    // Set isAudio based on whether or not an audio tag was used
+    this.isAudio(tag.nodeName.toLowerCase() === 'audio');
+
+    // Update controls className. Can't do this when the controls are initially
+    // set because the element doesn't exist yet.
+    if (this.controls()) {
+      this.addClass('vjs-controls-enabled');
+    } else {
+      this.addClass('vjs-controls-disabled');
+    }
+
+    // Set ARIA label and region role depending on player type
+    this.el_.setAttribute('role', 'region');
+    if (this.isAudio()) {
+      this.el_.setAttribute('aria-label', this.localize('Audio Player'));
+    } else {
+      this.el_.setAttribute('aria-label', this.localize('Video Player'));
+    }
+    if (this.isAudio()) {
+      this.addClass('vjs-audio');
+    }
+
+    // TODO: Make this smarter. Toggle user state between touching/mousing
+    // using events, since devices can have both touch and mouse events.
+    // TODO: Make this check be performed again when the window switches between monitors
+    // (See https://github.com/videojs/video.js/issues/5683)
+    if (TOUCH_ENABLED) {
+      this.addClass('vjs-touch-enabled');
+    }
+
+    // iOS Safari has broken hover handling
+    if (!IS_IOS) {
+      this.addClass('vjs-workinghover');
+    }
+
+    // Make player easily findable by ID
+    Player.players[this.id_] = this;
+
+    // Add a major version class to aid css in plugins
+    const majorVersion = version$6.split('.')[0];
+    this.addClass(`vjs-v${majorVersion}`);
+
+    // When the player is first initialized, trigger activity so components
+    // like the control bar show themselves if needed
+    this.userActive(true);
+    this.reportUserActivity();
+    this.one('play', e => this.listenForUserActivity_(e));
+    this.on('keydown', e => this.handleKeyDown(e));
+    this.on('languagechange', e => this.handleLanguagechange(e));
+    this.breakpoints(this.options_.breakpoints);
+    this.responsive(this.options_.responsive);
+
+    // Calling both the audio mode methods after the player is fully
+    // setup to be able to listen to the events triggered by them
+    this.on('ready', () => {
+      // Calling the audioPosterMode method first so that
+      // the audioOnlyMode can take precedence when both options are set to true
+      this.audioPosterMode(this.options_.audioPosterMode);
+      this.audioOnlyMode(this.options_.audioOnlyMode);
+    });
+  }
+
+  /**
+   * Destroys the video player and does any necessary cleanup.
+   *
+   * This is especially helpful if you are dynamically adding and removing videos
+   * to/from the DOM.
+   *
+   * @fires Player#dispose
+   */
+  dispose() {
+    /**
+     * Called when the player is being disposed of.
+     *
+     * @event Player#dispose
+     * @type {Event}
+     */
+    this.trigger('dispose');
+    // prevent dispose from being called twice
+    this.off('dispose');
+
+    // Make sure all player-specific document listeners are unbound. This is
+    off(document__default["default"], this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+    off(document__default["default"], 'keydown', this.boundFullWindowOnEscKey_);
+    if (this.styleEl_ && this.styleEl_.parentNode) {
+      this.styleEl_.parentNode.removeChild(this.styleEl_);
+      this.styleEl_ = null;
+    }
+
+    // Kill reference to this player
+    Player.players[this.id_] = null;
+    if (this.tag && this.tag.player) {
+      this.tag.player = null;
+    }
+    if (this.el_ && this.el_.player) {
+      this.el_.player = null;
+    }
+    if (this.tech_) {
+      this.tech_.dispose();
+      this.isPosterFromTech_ = false;
+      this.poster_ = '';
+    }
+    if (this.playerElIngest_) {
+      this.playerElIngest_ = null;
+    }
+    if (this.tag) {
+      this.tag = null;
+    }
+    clearCacheForPlayer(this);
+
+    // remove all event handlers for track lists
+    // all tracks and track listeners are removed on
+    // tech dispose
+    ALL.names.forEach(name => {
+      const props = ALL[name];
+      const list = this[props.getterName]();
+
+      // if it is not a native list
+      // we have to manually remove event listeners
+      if (list && list.off) {
+        list.off();
+      }
+    });
+
+    // the actual .el_ is removed here, or replaced if
+    super.dispose({
+      restoreEl: this.options_.restoreEl
+    });
+  }
+
+  /**
+   * Create the `Player`'s DOM element.
+   *
+   * @return {Element}
+   *         The DOM element that gets created.
+   */
+  createEl() {
+    let tag = this.tag;
+    let el;
+    let playerElIngest = this.playerElIngest_ = tag.parentNode && tag.parentNode.hasAttribute && tag.parentNode.hasAttribute('data-vjs-player');
+    const divEmbed = this.tag.tagName.toLowerCase() === 'video-js';
+    if (playerElIngest) {
+      el = this.el_ = tag.parentNode;
+    } else if (!divEmbed) {
+      el = this.el_ = super.createEl('div');
+    }
+
+    // Copy over all the attributes from the tag, including ID and class
+    // ID will now reference player box, not the video tag
+    const attrs = getAttributes(tag);
+    if (divEmbed) {
+      el = this.el_ = tag;
+      tag = this.tag = document__default["default"].createElement('video');
+      while (el.children.length) {
+        tag.appendChild(el.firstChild);
+      }
+      if (!hasClass(el, 'video-js')) {
+        addClass(el, 'video-js');
+      }
+      el.appendChild(tag);
+      playerElIngest = this.playerElIngest_ = el;
+      // move properties over from our custom `video-js` element
+      // to our new `video` element. This will move things like
+      // `src` or `controls` that were set via js before the player
+      // was initialized.
+      Object.keys(el).forEach(k => {
+        try {
+          tag[k] = el[k];
+        } catch (e) {
+          // we got a a property like outerHTML which we can't actually copy, ignore it
+        }
+      });
+    }
+
+    // set tabindex to -1 to remove the video element from the focus order
+    tag.setAttribute('tabindex', '-1');
+    attrs.tabindex = '-1';
+
+    // Workaround for #4583 on Chrome (on Windows) with JAWS.
+    // See https://github.com/FreedomScientific/VFO-standards-support/issues/78
+    // Note that we can't detect if JAWS is being used, but this ARIA attribute
+    // doesn't change behavior of Chrome if JAWS is not being used
+    if (IS_CHROME && IS_WINDOWS) {
+      tag.setAttribute('role', 'application');
+      attrs.role = 'application';
+    }
+
+    // Remove width/height attrs from tag so CSS can make it 100% width/height
+    tag.removeAttribute('width');
+    tag.removeAttribute('height');
+    if ('width' in attrs) {
+      delete attrs.width;
+    }
+    if ('height' in attrs) {
+      delete attrs.height;
+    }
+    Object.getOwnPropertyNames(attrs).forEach(function (attr) {
+      // don't copy over the class attribute to the player element when we're in a div embed
+      // the class is already set up properly in the divEmbed case
+      // and we want to make sure that the `video-js` class doesn't get lost
+      if (!(divEmbed && attr === 'class')) {
+        el.setAttribute(attr, attrs[attr]);
+      }
+      if (divEmbed) {
+        tag.setAttribute(attr, attrs[attr]);
+      }
+    });
+
+    // Update tag id/class for use as HTML5 playback tech
+    // Might think we should do this after embedding in container so .vjs-tech class
+    // doesn't flash 100% width/height, but class only applies with .video-js parent
+    tag.playerId = tag.id;
+    tag.id += '_html5_api';
+    tag.className = 'vjs-tech';
+
+    // Make player findable on elements
+    tag.player = el.player = this;
+    // Default state of video is paused
+    this.addClass('vjs-paused');
+    const deviceClassNames = ['IS_SMART_TV', 'IS_TIZEN', 'IS_WEBOS', 'IS_ANDROID', 'IS_IPAD', 'IS_IPHONE'].filter(key => browser[key]).map(key => {
+      return 'vjs-device-' + key.substring(3).toLowerCase().replace(/\_/g, '-');
+    });
+    this.addClass(...deviceClassNames);
+
+    // Add a style element in the player that we'll use to set the width/height
+    // of the player in a way that's still overridable by CSS, just like the
+    // video element
+    if (window__default["default"].VIDEOJS_NO_DYNAMIC_STYLE !== true) {
+      this.styleEl_ = createStyleElement('vjs-styles-dimensions');
+      const defaultsStyleEl = $('.vjs-styles-defaults');
+      const head = $('head');
+      head.insertBefore(this.styleEl_, defaultsStyleEl ? defaultsStyleEl.nextSibling : head.firstChild);
+    }
+    this.fill_ = false;
+    this.fluid_ = false;
+
+    // Pass in the width/height/aspectRatio options which will update the style el
+    this.width(this.options_.width);
+    this.height(this.options_.height);
+    this.fill(this.options_.fill);
+    this.fluid(this.options_.fluid);
+    this.aspectRatio(this.options_.aspectRatio);
+    // support both crossOrigin and crossorigin to reduce confusion and issues around the name
+    this.crossOrigin(this.options_.crossOrigin || this.options_.crossorigin);
+
+    // Hide any links within the video/audio tag,
+    // because IE doesn't hide them completely from screen readers.
+    const links = tag.getElementsByTagName('a');
+    for (let i = 0; i < links.length; i++) {
+      const linkEl = links.item(i);
+      addClass(linkEl, 'vjs-hidden');
+      linkEl.setAttribute('hidden', 'hidden');
+    }
+
+    // insertElFirst seems to cause the networkState to flicker from 3 to 2, so
+    // keep track of the original for later so we can know if the source originally failed
+    tag.initNetworkState_ = tag.networkState;
+
+    // Wrap video tag in div (el/box) container
+    if (tag.parentNode && !playerElIngest) {
+      tag.parentNode.insertBefore(el, tag);
+    }
+
+    // insert the tag as the first child of the player element
+    // then manually add it to the children array so that this.addChild
+    // will work properly for other components
+    //
+    // Breaks iPhone, fixed in HTML5 setup.
+    prependTo(tag, el);
+    this.children_.unshift(tag);
+
+    // Set lang attr on player to ensure CSS :lang() in consistent with player
+    // if it's been set to something different to the doc
+    this.el_.setAttribute('lang', this.language_);
+    this.el_.setAttribute('translate', 'no');
+    this.el_ = el;
+    return el;
+  }
+
+  /**
+   * Get or set the `Player`'s crossOrigin option. For the HTML5 player, this
+   * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+   * behavior.
+   *
+   * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+   *
+   * @param {string|null} [value]
+   *        The value to set the `Player`'s crossOrigin to. If an argument is
+   *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+   *
+   * @return {string|null|undefined}
+   *         - The current crossOrigin value of the `Player` when getting.
+   *         - undefined when setting
+   */
+  crossOrigin(value) {
+    // `null` can be set to unset a value
+    if (typeof value === 'undefined') {
+      return this.techGet_('crossOrigin');
+    }
+    if (value !== null && value !== 'anonymous' && value !== 'use-credentials') {
+      log$1.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${value}"`);
+      return;
+    }
+    this.techCall_('setCrossOrigin', value);
+    if (this.posterImage) {
+      this.posterImage.crossOrigin(value);
+    }
+    return;
+  }
+
+  /**
+   * A getter/setter for the `Player`'s width. Returns the player's configured value.
+   * To get the current width use `currentWidth()`.
+   *
+   * @param {number|string} [value]
+   *        CSS value to set the `Player`'s width to.
+   *
+   * @return {number|undefined}
+   *         - The current width of the `Player` when getting.
+   *         - Nothing when setting
+   */
+  width(value) {
+    return this.dimension('width', value);
+  }
+
+  /**
+   * A getter/setter for the `Player`'s height. Returns the player's configured value.
+   * To get the current height use `currentheight()`.
+   *
+   * @param {number|string} [value]
+   *        CSS value to set the `Player`'s height to.
+   *
+   * @return {number|undefined}
+   *         - The current height of the `Player` when getting.
+   *         - Nothing when setting
+   */
+  height(value) {
+    return this.dimension('height', value);
+  }
+
+  /**
+   * A getter/setter for the `Player`'s width & height.
+   *
+   * @param {string} dimension
+   *        This string can be:
+   *        - 'width'
+   *        - 'height'
+   *
+   * @param {number|string} [value]
+   *        Value for dimension specified in the first argument.
+   *
+   * @return {number}
+   *         The dimension arguments value when getting (width/height).
+   */
+  dimension(dimension, value) {
+    const privDimension = dimension + '_';
+    if (value === undefined) {
+      return this[privDimension] || 0;
+    }
+    if (value === '' || value === 'auto') {
+      // If an empty string is given, reset the dimension to be automatic
+      this[privDimension] = undefined;
+      this.updateStyleEl_();
+      return;
+    }
+    const parsedVal = parseFloat(value);
+    if (isNaN(parsedVal)) {
+      log$1.error(`Improper value "${value}" supplied for for ${dimension}`);
+      return;
+    }
+    this[privDimension] = parsedVal;
+    this.updateStyleEl_();
+  }
+
+  /**
+   * A getter/setter/toggler for the vjs-fluid `className` on the `Player`.
+   *
+   * Turning this on will turn off fill mode.
+   *
+   * @param {boolean} [bool]
+   *        - A value of true adds the class.
+   *        - A value of false removes the class.
+   *        - No value will be a getter.
+   *
+   * @return {boolean|undefined}
+   *         - The value of fluid when getting.
+   *         - `undefined` when setting.
+   */
+  fluid(bool) {
+    if (bool === undefined) {
+      return !!this.fluid_;
+    }
+    this.fluid_ = !!bool;
+    if (isEvented(this)) {
+      this.off(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+    }
+    if (bool) {
+      this.addClass('vjs-fluid');
+      this.fill(false);
+      addEventedCallback(this, () => {
+        this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+      });
+    } else {
+      this.removeClass('vjs-fluid');
+    }
+    this.updateStyleEl_();
+  }
+
+  /**
+   * A getter/setter/toggler for the vjs-fill `className` on the `Player`.
+   *
+   * Turning this on will turn off fluid mode.
+   *
+   * @param {boolean} [bool]
+   *        - A value of true adds the class.
+   *        - A value of false removes the class.
+   *        - No value will be a getter.
+   *
+   * @return {boolean|undefined}
+   *         - The value of fluid when getting.
+   *         - `undefined` when setting.
+   */
+  fill(bool) {
+    if (bool === undefined) {
+      return !!this.fill_;
+    }
+    this.fill_ = !!bool;
+    if (bool) {
+      this.addClass('vjs-fill');
+      this.fluid(false);
+    } else {
+      this.removeClass('vjs-fill');
+    }
+  }
+
+  /**
+   * Get/Set the aspect ratio
+   *
+   * @param {string} [ratio]
+   *        Aspect ratio for player
+   *
+   * @return {string|undefined}
+   *         returns the current aspect ratio when getting
+   */
+
+  /**
+   * A getter/setter for the `Player`'s aspect ratio.
+   *
+   * @param {string} [ratio]
+   *        The value to set the `Player`'s aspect ratio to.
+   *
+   * @return {string|undefined}
+   *         - The current aspect ratio of the `Player` when getting.
+   *         - undefined when setting
+   */
+  aspectRatio(ratio) {
+    if (ratio === undefined) {
+      return this.aspectRatio_;
+    }
+
+    // Check for width:height format
+    if (!/^\d+\:\d+$/.test(ratio)) {
+      throw new Error('Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.');
+    }
+    this.aspectRatio_ = ratio;
+
+    // We're assuming if you set an aspect ratio you want fluid mode,
+    // because in fixed mode you could calculate width and height yourself.
+    this.fluid(true);
+    this.updateStyleEl_();
+  }
+
+  /**
+   * Update styles of the `Player` element (height, width and aspect ratio).
+   *
+   * @private
+   * @listens Tech#loadedmetadata
+   */
+  updateStyleEl_() {
+    if (window__default["default"].VIDEOJS_NO_DYNAMIC_STYLE === true) {
+      const width = typeof this.width_ === 'number' ? this.width_ : this.options_.width;
+      const height = typeof this.height_ === 'number' ? this.height_ : this.options_.height;
+      const techEl = this.tech_ && this.tech_.el();
+      if (techEl) {
+        if (width >= 0) {
+          techEl.width = width;
+        }
+        if (height >= 0) {
+          techEl.height = height;
+        }
+      }
+      return;
+    }
+    let width;
+    let height;
+    let aspectRatio;
+    let idClass;
+
+    // The aspect ratio is either used directly or to calculate width and height.
+    if (this.aspectRatio_ !== undefined && this.aspectRatio_ !== 'auto') {
+      // Use any aspectRatio that's been specifically set
+      aspectRatio = this.aspectRatio_;
+    } else if (this.videoWidth() > 0) {
+      // Otherwise try to get the aspect ratio from the video metadata
+      aspectRatio = this.videoWidth() + ':' + this.videoHeight();
+    } else {
+      // Or use a default. The video element's is 2:1, but 16:9 is more common.
+      aspectRatio = '16:9';
+    }
+
+    // Get the ratio as a decimal we can use to calculate dimensions
+    const ratioParts = aspectRatio.split(':');
+    const ratioMultiplier = ratioParts[1] / ratioParts[0];
+    if (this.width_ !== undefined) {
+      // Use any width that's been specifically set
+      width = this.width_;
+    } else if (this.height_ !== undefined) {
+      // Or calculate the width from the aspect ratio if a height has been set
+      width = this.height_ / ratioMultiplier;
+    } else {
+      // Or use the video's metadata, or use the video el's default of 300
+      width = this.videoWidth() || 300;
+    }
+    if (this.height_ !== undefined) {
+      // Use any height that's been specifically set
+      height = this.height_;
+    } else {
+      // Otherwise calculate the height from the ratio and the width
+      height = width * ratioMultiplier;
+    }
+
+    // Ensure the CSS class is valid by starting with an alpha character
+    if (/^[^a-zA-Z]/.test(this.id())) {
+      idClass = 'dimensions-' + this.id();
+    } else {
+      idClass = this.id() + '-dimensions';
+    }
+
+    // Ensure the right class is still on the player for the style element
+    this.addClass(idClass);
+    setTextContent(this.styleEl_, `
+      .${idClass} {
+        width: ${width}px;
+        height: ${height}px;
+      }
+
+      .${idClass}.vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: ${ratioMultiplier * 100}%;
+      }
+    `);
+  }
+
+  /**
+   * Load/Create an instance of playback {@link Tech} including element
+   * and API methods. Then append the `Tech` element in `Player` as a child.
+   *
+   * @param {string} techName
+   *        name of the playback technology
+   *
+   * @param {string} source
+   *        video source
+   *
+   * @private
+   */
+  loadTech_(techName, source) {
+    // Pause and remove current playback technology
+    if (this.tech_) {
+      this.unloadTech_();
+    }
+    const titleTechName = toTitleCase$1(techName);
+    const camelTechName = techName.charAt(0).toLowerCase() + techName.slice(1);
+
+    // get rid of the HTML5 video tag as soon as we are using another tech
+    if (titleTechName !== 'Html5' && this.tag) {
+      Tech.getTech('Html5').disposeMediaElement(this.tag);
+      this.tag.player = null;
+      this.tag = null;
+    }
+    this.techName_ = titleTechName;
+
+    // Turn off API access because we're loading a new tech that might load asynchronously
+    this.isReady_ = false;
+    let autoplay = this.autoplay();
+
+    // if autoplay is a string (or `true` with normalizeAutoplay: true) we pass false to the tech
+    // because the player is going to handle autoplay on `loadstart`
+    if (typeof this.autoplay() === 'string' || this.autoplay() === true && this.options_.normalizeAutoplay) {
+      autoplay = false;
+    }
+
+    // Grab tech-specific options from player options and add source and parent element to use.
+    const techOptions = {
+      source,
+      autoplay,
+      'nativeControlsForTouch': this.options_.nativeControlsForTouch,
+      'playerId': this.id(),
+      'techId': `${this.id()}_${camelTechName}_api`,
+      'playsinline': this.options_.playsinline,
+      'preload': this.options_.preload,
+      'loop': this.options_.loop,
+      'disablePictureInPicture': this.options_.disablePictureInPicture,
+      'muted': this.options_.muted,
+      'poster': this.poster(),
+      'language': this.language(),
+      'playerElIngest': this.playerElIngest_ || false,
+      'vtt.js': this.options_['vtt.js'],
+      'canOverridePoster': !!this.options_.techCanOverridePoster,
+      'enableSourceset': this.options_.enableSourceset
+    };
+    ALL.names.forEach(name => {
+      const props = ALL[name];
+      techOptions[props.getterName] = this[props.privateName];
+    });
+    Object.assign(techOptions, this.options_[titleTechName]);
+    Object.assign(techOptions, this.options_[camelTechName]);
+    Object.assign(techOptions, this.options_[techName.toLowerCase()]);
+    if (this.tag) {
+      techOptions.tag = this.tag;
+    }
+    if (source && source.src === this.cache_.src && this.cache_.currentTime > 0) {
+      techOptions.startTime = this.cache_.currentTime;
+    }
+
+    // Initialize tech instance
+    const TechClass = Tech.getTech(techName);
+    if (!TechClass) {
+      throw new Error(`No Tech named '${titleTechName}' exists! '${titleTechName}' should be registered using videojs.registerTech()'`);
+    }
+    this.tech_ = new TechClass(techOptions);
+
+    // player.triggerReady is always async, so don't need this to be async
+    this.tech_.ready(bind_(this, this.handleTechReady_), true);
+    textTrackConverter.jsonToTextTracks(this.textTracksJson_ || [], this.tech_);
+
+    // Listen to all HTML5-defined events and trigger them on the player
+    TECH_EVENTS_RETRIGGER.forEach(event => {
+      this.on(this.tech_, event, e => this[`handleTech${toTitleCase$1(event)}_`](e));
+    });
+    Object.keys(TECH_EVENTS_QUEUE).forEach(event => {
+      this.on(this.tech_, event, eventObj => {
+        if (this.tech_.playbackRate() === 0 && this.tech_.seeking()) {
+          this.queuedCallbacks_.push({
+            callback: this[`handleTech${TECH_EVENTS_QUEUE[event]}_`].bind(this),
+            event: eventObj
+          });
+          return;
+        }
+        this[`handleTech${TECH_EVENTS_QUEUE[event]}_`](eventObj);
+      });
+    });
+    this.on(this.tech_, 'loadstart', e => this.handleTechLoadStart_(e));
+    this.on(this.tech_, 'sourceset', e => this.handleTechSourceset_(e));
+    this.on(this.tech_, 'waiting', e => this.handleTechWaiting_(e));
+    this.on(this.tech_, 'ended', e => this.handleTechEnded_(e));
+    this.on(this.tech_, 'seeking', e => this.handleTechSeeking_(e));
+    this.on(this.tech_, 'play', e => this.handleTechPlay_(e));
+    this.on(this.tech_, 'pause', e => this.handleTechPause_(e));
+    this.on(this.tech_, 'durationchange', e => this.handleTechDurationChange_(e));
+    this.on(this.tech_, 'fullscreenchange', (e, data) => this.handleTechFullscreenChange_(e, data));
+    this.on(this.tech_, 'fullscreenerror', (e, err) => this.handleTechFullscreenError_(e, err));
+    this.on(this.tech_, 'enterpictureinpicture', e => this.handleTechEnterPictureInPicture_(e));
+    this.on(this.tech_, 'leavepictureinpicture', e => this.handleTechLeavePictureInPicture_(e));
+    this.on(this.tech_, 'error', e => this.handleTechError_(e));
+    this.on(this.tech_, 'posterchange', e => this.handleTechPosterChange_(e));
+    this.on(this.tech_, 'textdata', e => this.handleTechTextData_(e));
+    this.on(this.tech_, 'ratechange', e => this.handleTechRateChange_(e));
+    this.on(this.tech_, 'loadedmetadata', this.boundUpdateStyleEl_);
+    this.usingNativeControls(this.techGet_('controls'));
+    if (this.controls() && !this.usingNativeControls()) {
+      this.addTechControlsListeners_();
+    }
+
+    // Add the tech element in the DOM if it was not already there
+    // Make sure to not insert the original video element if using Html5
+    if (this.tech_.el().parentNode !== this.el() && (titleTechName !== 'Html5' || !this.tag)) {
+      prependTo(this.tech_.el(), this.el());
+    }
+
+    // Get rid of the original video tag reference after the first tech is loaded
+    if (this.tag) {
+      this.tag.player = null;
+      this.tag = null;
+    }
+  }
+
+  /**
+   * Unload and dispose of the current playback {@link Tech}.
+   *
+   * @private
+   */
+  unloadTech_() {
+    // Save the current text tracks so that we can reuse the same text tracks with the next tech
+    ALL.names.forEach(name => {
+      const props = ALL[name];
+      this[props.privateName] = this[props.getterName]();
+    });
+    this.textTracksJson_ = textTrackConverter.textTracksToJson(this.tech_);
+    this.isReady_ = false;
+    this.tech_.dispose();
+    this.tech_ = false;
+    if (this.isPosterFromTech_) {
+      this.poster_ = '';
+      this.trigger('posterchange');
+    }
+    this.isPosterFromTech_ = false;
+  }
+
+  /**
+   * Return a reference to the current {@link Tech}.
+   * It will print a warning by default about the danger of using the tech directly
+   * but any argument that is passed in will silence the warning.
+   *
+   * @param {*} [safety]
+   *        Anything passed in to silence the warning
+   *
+   * @return {Tech}
+   *         The Tech
+   */
+  tech(safety) {
+    if (safety === undefined) {
+      log$1.warn('Using the tech directly can be dangerous. I hope you know what you\'re doing.\n' + 'See https://github.com/videojs/video.js/issues/2617 for more info.\n');
+    }
+    return this.tech_;
+  }
+
+  /**
+   * An object that contains Video.js version.
+   *
+   * @typedef {Object} PlayerVersion
+   *
+   * @property {string} 'video.js' - Video.js version
+   */
+
+  /**
+   * Returns an object with Video.js version.
+   *
+   * @return {PlayerVersion}
+   *          An object with Video.js version.
+   */
+  version() {
+    return {
+      'video.js': version$6
+    };
+  }
+
+  /**
+   * Set up click and touch listeners for the playback element
+   *
+   * - On desktops: a click on the video itself will toggle playback
+   * - On mobile devices: a click on the video toggles controls
+   *   which is done by toggling the user state between active and
+   *   inactive
+   * - A tap can signal that a user has become active or has become inactive
+   *   e.g. a quick tap on an iPhone movie should reveal the controls. Another
+   *   quick tap should hide them again (signaling the user is in an inactive
+   *   viewing state)
+   * - In addition to this, we still want the user to be considered inactive after
+   *   a few seconds of inactivity.
+   *
+   * > Note: the only part of iOS interaction we can't mimic with this setup
+   * is a touch and hold on the video element counting as activity in order to
+   * keep the controls showing, but that shouldn't be an issue. A touch and hold
+   * on any controls will still keep the user active
+   *
+   * @private
+   */
+  addTechControlsListeners_() {
+    // Make sure to remove all the previous listeners in case we are called multiple times.
+    this.removeTechControlsListeners_();
+    this.on(this.tech_, 'click', this.boundHandleTechClick_);
+    this.on(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
+
+    // If the controls were hidden we don't want that to change without a tap event
+    // so we'll check if the controls were already showing before reporting user
+    // activity
+    this.on(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+    this.on(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+    this.on(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+
+    // The tap listener needs to come after the touchend listener because the tap
+    // listener cancels out any reportedUserActivity when setting userActive(false)
+    this.on(this.tech_, 'tap', this.boundHandleTechTap_);
+  }
+
+  /**
+   * Remove the listeners used for click and tap controls. This is needed for
+   * toggling to controls disabled, where a tap/touch should do nothing.
+   *
+   * @private
+   */
+  removeTechControlsListeners_() {
+    // We don't want to just use `this.off()` because there might be other needed
+    // listeners added by techs that extend this.
+    this.off(this.tech_, 'tap', this.boundHandleTechTap_);
+    this.off(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+    this.off(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+    this.off(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+    this.off(this.tech_, 'click', this.boundHandleTechClick_);
+    this.off(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
+  }
+
+  /**
+   * Player waits for the tech to be ready
+   *
+   * @private
+   */
+  handleTechReady_() {
+    this.triggerReady();
+
+    // Keep the same volume as before
+    if (this.cache_.volume) {
+      this.techCall_('setVolume', this.cache_.volume);
+    }
+
+    // Look if the tech found a higher resolution poster while loading
+    this.handleTechPosterChange_();
+
+    // Update the duration if available
+    this.handleTechDurationChange_();
+  }
+
+  /**
+   * Retrigger the `loadstart` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#loadstart
+   * @listens Tech#loadstart
+   * @private
+   */
+  handleTechLoadStart_() {
+    // TODO: Update to use `emptied` event instead. See #1277.
+
+    this.removeClass('vjs-ended', 'vjs-seeking');
+
+    // reset the error state
+    this.error(null);
+
+    // Update the duration
+    this.handleTechDurationChange_();
+    if (!this.paused()) {
+      /**
+       * Fired when the user agent begins looking for media data
+       *
+       * @event Player#loadstart
+       * @type {Event}
+       */
+      this.trigger('loadstart');
+    } else {
+      // reset the hasStarted state
+      this.hasStarted(false);
+      this.trigger('loadstart');
+    }
+
+    // autoplay happens after loadstart for the browser,
+    // so we mimic that behavior
+    this.manualAutoplay_(this.autoplay() === true && this.options_.normalizeAutoplay ? 'play' : this.autoplay());
+  }
+
+  /**
+   * Handle autoplay string values, rather than the typical boolean
+   * values that should be handled by the tech. Note that this is not
+   * part of any specification. Valid values and what they do can be
+   * found on the autoplay getter at Player#autoplay()
+   */
+  manualAutoplay_(type) {
+    if (!this.tech_ || typeof type !== 'string') {
+      return;
+    }
+
+    // Save original muted() value, set muted to true, and attempt to play().
+    // On promise rejection, restore muted from saved value
+    const resolveMuted = () => {
+      const previouslyMuted = this.muted();
+      this.muted(true);
+      const restoreMuted = () => {
+        this.muted(previouslyMuted);
+      };
+
+      // restore muted on play terminatation
+      this.playTerminatedQueue_.push(restoreMuted);
+      const mutedPromise = this.play();
+      if (!isPromise(mutedPromise)) {
+        return;
+      }
+      return mutedPromise.catch(err => {
+        restoreMuted();
+        throw new Error(`Rejection at manualAutoplay. Restoring muted value. ${err ? err : ''}`);
+      });
+    };
+    let promise;
+
+    // if muted defaults to true
+    // the only thing we can do is call play
+    if (type === 'any' && !this.muted()) {
+      promise = this.play();
+      if (isPromise(promise)) {
+        promise = promise.catch(resolveMuted);
+      }
+    } else if (type === 'muted' && !this.muted()) {
+      promise = resolveMuted();
+    } else {
+      promise = this.play();
+    }
+    if (!isPromise(promise)) {
+      return;
+    }
+    return promise.then(() => {
+      this.trigger({
+        type: 'autoplay-success',
+        autoplay: type
+      });
+    }).catch(() => {
+      this.trigger({
+        type: 'autoplay-failure',
+        autoplay: type
+      });
+    });
+  }
+
+  /**
+   * Update the internal source caches so that we return the correct source from
+   * `src()`, `currentSource()`, and `currentSources()`.
+   *
+   * > Note: `currentSources` will not be updated if the source that is passed in exists
+   *         in the current `currentSources` cache.
+   *
+   *
+   * @param {Tech~SourceObject} srcObj
+   *        A string or object source to update our caches to.
+   */
+  updateSourceCaches_(srcObj = '') {
+    let src = srcObj;
+    let type = '';
+    if (typeof src !== 'string') {
+      src = srcObj.src;
+      type = srcObj.type;
+    }
+
+    // make sure all the caches are set to default values
+    // to prevent null checking
+    this.cache_.source = this.cache_.source || {};
+    this.cache_.sources = this.cache_.sources || [];
+
+    // try to get the type of the src that was passed in
+    if (src && !type) {
+      type = findMimetype(this, src);
+    }
+
+    // update `currentSource` cache always
+    this.cache_.source = merge$1({}, srcObj, {
+      src,
+      type
+    });
+    const matchingSources = this.cache_.sources.filter(s => s.src && s.src === src);
+    const sourceElSources = [];
+    const sourceEls = this.$$('source');
+    const matchingSourceEls = [];
+    for (let i = 0; i < sourceEls.length; i++) {
+      const sourceObj = getAttributes(sourceEls[i]);
+      sourceElSources.push(sourceObj);
+      if (sourceObj.src && sourceObj.src === src) {
+        matchingSourceEls.push(sourceObj.src);
+      }
+    }
+
+    // if we have matching source els but not matching sources
+    // the current source cache is not up to date
+    if (matchingSourceEls.length && !matchingSources.length) {
+      this.cache_.sources = sourceElSources;
+      // if we don't have matching source or source els set the
+      // sources cache to the `currentSource` cache
+    } else if (!matchingSources.length) {
+      this.cache_.sources = [this.cache_.source];
+    }
+
+    // update the tech `src` cache
+    this.cache_.src = src;
+  }
+
+  /**
+   * *EXPERIMENTAL* Fired when the source is set or changed on the {@link Tech}
+   * causing the media element to reload.
+   *
+   * It will fire for the initial source and each subsequent source.
+   * This event is a custom event from Video.js and is triggered by the {@link Tech}.
+   *
+   * The event object for this event contains a `src` property that will contain the source
+   * that was available when the event was triggered. This is generally only necessary if Video.js
+   * is switching techs while the source was being changed.
+   *
+   * It is also fired when `load` is called on the player (or media element)
+   * because the {@link https://html.spec.whatwg.org/multipage/media.html#dom-media-load|specification for `load`}
+   * says that the resource selection algorithm needs to be aborted and restarted.
+   * In this case, it is very likely that the `src` property will be set to the
+   * empty string `""` to indicate we do not know what the source will be but
+   * that it is changing.
+   *
+   * *This event is currently still experimental and may change in minor releases.*
+   * __To use this, pass `enableSourceset` option to the player.__
+   *
+   * @event Player#sourceset
+   * @type {Event}
+   * @prop {string} src
+   *                The source url available when the `sourceset` was triggered.
+   *                It will be an empty string if we cannot know what the source is
+   *                but know that the source will change.
+   */
+  /**
+   * Retrigger the `sourceset` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#sourceset
+   * @listens Tech#sourceset
+   * @private
+   */
+  handleTechSourceset_(event) {
+    // only update the source cache when the source
+    // was not updated using the player api
+    if (!this.changingSrc_) {
+      let updateSourceCaches = src => this.updateSourceCaches_(src);
+      const playerSrc = this.currentSource().src;
+      const eventSrc = event.src;
+
+      // if we have a playerSrc that is not a blob, and a tech src that is a blob
+      if (playerSrc && !/^blob:/.test(playerSrc) && /^blob:/.test(eventSrc)) {
+        // if both the tech source and the player source were updated we assume
+        // something like @videojs/http-streaming did the sourceset and skip updating the source cache.
+        if (!this.lastSource_ || this.lastSource_.tech !== eventSrc && this.lastSource_.player !== playerSrc) {
+          updateSourceCaches = () => {};
+        }
+      }
+
+      // update the source to the initial source right away
+      // in some cases this will be empty string
+      updateSourceCaches(eventSrc);
+
+      // if the `sourceset` `src` was an empty string
+      // wait for a `loadstart` to update the cache to `currentSrc`.
+      // If a sourceset happens before a `loadstart`, we reset the state
+      if (!event.src) {
+        this.tech_.any(['sourceset', 'loadstart'], e => {
+          // if a sourceset happens before a `loadstart` there
+          // is nothing to do as this `handleTechSourceset_`
+          // will be called again and this will be handled there.
+          if (e.type === 'sourceset') {
+            return;
+          }
+          const techSrc = this.techGet_('currentSrc');
+          this.lastSource_.tech = techSrc;
+          this.updateSourceCaches_(techSrc);
+        });
+      }
+    }
+    this.lastSource_ = {
+      player: this.currentSource().src,
+      tech: event.src
+    };
+    this.trigger({
+      src: event.src,
+      type: 'sourceset'
+    });
+  }
+
+  /**
+   * Add/remove the vjs-has-started class
+   *
+   *
+   * @param {boolean} request
+   *        - true: adds the class
+   *        - false: remove the class
+   *
+   * @return {boolean}
+   *         the boolean value of hasStarted_
+   */
+  hasStarted(request) {
+    if (request === undefined) {
+      // act as getter, if we have no request to change
+      return this.hasStarted_;
+    }
+    if (request === this.hasStarted_) {
+      return;
+    }
+    this.hasStarted_ = request;
+    if (this.hasStarted_) {
+      this.addClass('vjs-has-started');
+    } else {
+      this.removeClass('vjs-has-started');
+    }
+  }
+
+  /**
+   * Fired whenever the media begins or resumes playback
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play}
+   * @fires Player#play
+   * @listens Tech#play
+   * @private
+   */
+  handleTechPlay_() {
+    this.removeClass('vjs-ended', 'vjs-paused');
+    this.addClass('vjs-playing');
+
+    // hide the poster when the user hits play
+    this.hasStarted(true);
+    /**
+     * Triggered whenever an {@link Tech#play} event happens. Indicates that
+     * playback has started or resumed.
+     *
+     * @event Player#play
+     * @type {Event}
+     */
+    this.trigger('play');
+  }
+
+  /**
+   * Retrigger the `ratechange` event that was triggered by the {@link Tech}.
+   *
+   * If there were any events queued while the playback rate was zero, fire
+   * those events now.
+   *
+   * @private
+   * @method Player#handleTechRateChange_
+   * @fires Player#ratechange
+   * @listens Tech#ratechange
+   */
+  handleTechRateChange_() {
+    if (this.tech_.playbackRate() > 0 && this.cache_.lastPlaybackRate === 0) {
+      this.queuedCallbacks_.forEach(queued => queued.callback(queued.event));
+      this.queuedCallbacks_ = [];
+    }
+    this.cache_.lastPlaybackRate = this.tech_.playbackRate();
+    /**
+     * Fires when the playing speed of the audio/video is changed
+     *
+     * @event Player#ratechange
+     * @type {event}
+     */
+    this.trigger('ratechange');
+  }
+
+  /**
+   * Retrigger the `waiting` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#waiting
+   * @listens Tech#waiting
+   * @private
+   */
+  handleTechWaiting_() {
+    this.addClass('vjs-waiting');
+    /**
+     * A readyState change on the DOM element has caused playback to stop.
+     *
+     * @event Player#waiting
+     * @type {Event}
+     */
+    this.trigger('waiting');
+
+    // Browsers may emit a timeupdate event after a waiting event. In order to prevent
+    // premature removal of the waiting class, wait for the time to change.
+    const timeWhenWaiting = this.currentTime();
+    const timeUpdateListener = () => {
+      if (timeWhenWaiting !== this.currentTime()) {
+        this.removeClass('vjs-waiting');
+        this.off('timeupdate', timeUpdateListener);
+      }
+    };
+    this.on('timeupdate', timeUpdateListener);
+  }
+
+  /**
+   * Retrigger the `canplay` event that was triggered by the {@link Tech}.
+   * > Note: This is not consistent between browsers. See #1351
+   *
+   * @fires Player#canplay
+   * @listens Tech#canplay
+   * @private
+   */
+  handleTechCanPlay_() {
+    this.removeClass('vjs-waiting');
+    /**
+     * The media has a readyState of HAVE_FUTURE_DATA or greater.
+     *
+     * @event Player#canplay
+     * @type {Event}
+     */
+    this.trigger('canplay');
+  }
+
+  /**
+   * Retrigger the `canplaythrough` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#canplaythrough
+   * @listens Tech#canplaythrough
+   * @private
+   */
+  handleTechCanPlayThrough_() {
+    this.removeClass('vjs-waiting');
+    /**
+     * The media has a readyState of HAVE_ENOUGH_DATA or greater. This means that the
+     * entire media file can be played without buffering.
+     *
+     * @event Player#canplaythrough
+     * @type {Event}
+     */
+    this.trigger('canplaythrough');
+  }
+
+  /**
+   * Retrigger the `playing` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#playing
+   * @listens Tech#playing
+   * @private
+   */
+  handleTechPlaying_() {
+    this.removeClass('vjs-waiting');
+    /**
+     * The media is no longer blocked from playback, and has started playing.
+     *
+     * @event Player#playing
+     * @type {Event}
+     */
+    this.trigger('playing');
+  }
+
+  /**
+   * Retrigger the `seeking` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#seeking
+   * @listens Tech#seeking
+   * @private
+   */
+  handleTechSeeking_() {
+    this.addClass('vjs-seeking');
+    /**
+     * Fired whenever the player is jumping to a new time
+     *
+     * @event Player#seeking
+     * @type {Event}
+     */
+    this.trigger('seeking');
+  }
+
+  /**
+   * Retrigger the `seeked` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#seeked
+   * @listens Tech#seeked
+   * @private
+   */
+  handleTechSeeked_() {
+    this.removeClass('vjs-seeking', 'vjs-ended');
+    /**
+     * Fired when the player has finished jumping to a new time
+     *
+     * @event Player#seeked
+     * @type {Event}
+     */
+    this.trigger('seeked');
+  }
+
+  /**
+   * Retrigger the `pause` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#pause
+   * @listens Tech#pause
+   * @private
+   */
+  handleTechPause_() {
+    this.removeClass('vjs-playing');
+    this.addClass('vjs-paused');
+    /**
+     * Fired whenever the media has been paused
+     *
+     * @event Player#pause
+     * @type {Event}
+     */
+    this.trigger('pause');
+  }
+
+  /**
+   * Retrigger the `ended` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#ended
+   * @listens Tech#ended
+   * @private
+   */
+  handleTechEnded_() {
+    this.addClass('vjs-ended');
+    this.removeClass('vjs-waiting');
+    if (this.options_.loop) {
+      this.currentTime(0);
+      this.play();
+    } else if (!this.paused()) {
+      this.pause();
+    }
+
+    /**
+     * Fired when the end of the media resource is reached (currentTime == duration)
+     *
+     * @event Player#ended
+     * @type {Event}
+     */
+    this.trigger('ended');
+  }
+
+  /**
+   * Fired when the duration of the media resource is first known or changed
+   *
+   * @listens Tech#durationchange
+   * @private
+   */
+  handleTechDurationChange_() {
+    this.duration(this.techGet_('duration'));
+  }
+
+  /**
+   * Handle a click on the media element to play/pause
+   *
+   * @param {Event} event
+   *        the event that caused this function to trigger
+   *
+   * @listens Tech#click
+   * @private
+   */
+  handleTechClick_(event) {
+    // When controls are disabled a click should not toggle playback because
+    // the click is considered a control
+    if (!this.controls_) {
+      return;
+    }
+    if (this.options_ === undefined || this.options_.userActions === undefined || this.options_.userActions.click === undefined || this.options_.userActions.click !== false) {
+      if (this.options_ !== undefined && this.options_.userActions !== undefined && typeof this.options_.userActions.click === 'function') {
+        this.options_.userActions.click.call(this, event);
+      } else if (this.paused()) {
+        silencePromise(this.play());
+      } else {
+        this.pause();
+      }
+    }
+  }
+
+  /**
+   * Handle a double-click on the media element to enter/exit fullscreen
+   *
+   * @param {Event} event
+   *        the event that caused this function to trigger
+   *
+   * @listens Tech#dblclick
+   * @private
+   */
+  handleTechDoubleClick_(event) {
+    if (!this.controls_) {
+      return;
+    }
+
+    // we do not want to toggle fullscreen state
+    // when double-clicking inside a control bar or a modal
+    const inAllowedEls = Array.prototype.some.call(this.$$('.vjs-control-bar, .vjs-modal-dialog'), el => el.contains(event.target));
+    if (!inAllowedEls) {
+      /*
+       * options.userActions.doubleClick
+       *
+       * If `undefined` or `true`, double-click toggles fullscreen if controls are present
+       * Set to `false` to disable double-click handling
+       * Set to a function to substitute an external double-click handler
+       */
+      if (this.options_ === undefined || this.options_.userActions === undefined || this.options_.userActions.doubleClick === undefined || this.options_.userActions.doubleClick !== false) {
+        if (this.options_ !== undefined && this.options_.userActions !== undefined && typeof this.options_.userActions.doubleClick === 'function') {
+          this.options_.userActions.doubleClick.call(this, event);
+        } else if (this.isFullscreen()) {
+          this.exitFullscreen();
+        } else {
+          this.requestFullscreen();
+        }
+      }
+    }
+  }
+
+  /**
+   * Handle a tap on the media element. It will toggle the user
+   * activity state, which hides and shows the controls.
+   *
+   * @listens Tech#tap
+   * @private
+   */
+  handleTechTap_() {
+    this.userActive(!this.userActive());
+  }
+
+  /**
+   * Handle touch to start
+   *
+   * @listens Tech#touchstart
+   * @private
+   */
+  handleTechTouchStart_() {
+    this.userWasActive = this.userActive();
+  }
+
+  /**
+   * Handle touch to move
+   *
+   * @listens Tech#touchmove
+   * @private
+   */
+  handleTechTouchMove_() {
+    if (this.userWasActive) {
+      this.reportUserActivity();
+    }
+  }
+
+  /**
+   * Handle touch to end
+   *
+   * @param {Event} event
+   *        the touchend event that triggered
+   *        this function
+   *
+   * @listens Tech#touchend
+   * @private
+   */
+  handleTechTouchEnd_(event) {
+    // Stop the mouse events from also happening
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+  }
+
+  /**
+   * @private
+   */
+  toggleFullscreenClass_() {
+    if (this.isFullscreen()) {
+      this.addClass('vjs-fullscreen');
+    } else {
+      this.removeClass('vjs-fullscreen');
+    }
+  }
+
+  /**
+   * when the document fschange event triggers it calls this
+   */
+  documentFullscreenChange_(e) {
+    const targetPlayer = e.target.player;
+
+    // if another player was fullscreen
+    // do a null check for targetPlayer because older firefox's would put document as e.target
+    if (targetPlayer && targetPlayer !== this) {
+      return;
+    }
+    const el = this.el();
+    let isFs = document__default["default"][this.fsApi_.fullscreenElement] === el;
+    if (!isFs && el.matches) {
+      isFs = el.matches(':' + this.fsApi_.fullscreen);
+    }
+    this.isFullscreen(isFs);
+  }
+
+  /**
+   * Handle Tech Fullscreen Change
+   *
+   * @param {Event} event
+   *        the fullscreenchange event that triggered this function
+   *
+   * @param {Object} data
+   *        the data that was sent with the event
+   *
+   * @private
+   * @listens Tech#fullscreenchange
+   * @fires Player#fullscreenchange
+   */
+  handleTechFullscreenChange_(event, data) {
+    if (data) {
+      if (data.nativeIOSFullscreen) {
+        this.addClass('vjs-ios-native-fs');
+        this.tech_.one('webkitendfullscreen', () => {
+          this.removeClass('vjs-ios-native-fs');
+        });
+      }
+      this.isFullscreen(data.isFullscreen);
+    }
+  }
+  handleTechFullscreenError_(event, err) {
+    this.trigger('fullscreenerror', err);
+  }
+
+  /**
+   * @private
+   */
+  togglePictureInPictureClass_() {
+    if (this.isInPictureInPicture()) {
+      this.addClass('vjs-picture-in-picture');
+    } else {
+      this.removeClass('vjs-picture-in-picture');
+    }
+  }
+
+  /**
+   * Handle Tech Enter Picture-in-Picture.
+   *
+   * @param {Event} event
+   *        the enterpictureinpicture event that triggered this function
+   *
+   * @private
+   * @listens Tech#enterpictureinpicture
+   */
+  handleTechEnterPictureInPicture_(event) {
+    this.isInPictureInPicture(true);
+  }
+
+  /**
+   * Handle Tech Leave Picture-in-Picture.
+   *
+   * @param {Event} event
+   *        the leavepictureinpicture event that triggered this function
+   *
+   * @private
+   * @listens Tech#leavepictureinpicture
+   */
+  handleTechLeavePictureInPicture_(event) {
+    this.isInPictureInPicture(false);
+  }
+
+  /**
+   * Fires when an error occurred during the loading of an audio/video.
+   *
+   * @private
+   * @listens Tech#error
+   */
+  handleTechError_() {
+    const error = this.tech_.error();
+    if (error) {
+      this.error(error);
+    }
+  }
+
+  /**
+   * Retrigger the `textdata` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#textdata
+   * @listens Tech#textdata
+   * @private
+   */
+  handleTechTextData_() {
+    let data = null;
+    if (arguments.length > 1) {
+      data = arguments[1];
+    }
+
+    /**
+     * Fires when we get a textdata event from tech
+     *
+     * @event Player#textdata
+     * @type {Event}
+     */
+    this.trigger('textdata', data);
+  }
+
+  /**
+   * Get object for cached values.
+   *
+   * @return {Object}
+   *         get the current object cache
+   */
+  getCache() {
+    return this.cache_;
+  }
+
+  /**
+   * Resets the internal cache object.
+   *
+   * Using this function outside the player constructor or reset method may
+   * have unintended side-effects.
+   *
+   * @private
+   */
+  resetCache_() {
+    this.cache_ = {
+      // Right now, the currentTime is not _really_ cached because it is always
+      // retrieved from the tech (see: currentTime). However, for completeness,
+      // we set it to zero here to ensure that if we do start actually caching
+      // it, we reset it along with everything else.
+      currentTime: 0,
+      initTime: 0,
+      inactivityTimeout: this.options_.inactivityTimeout,
+      duration: NaN,
+      lastVolume: 1,
+      lastPlaybackRate: this.defaultPlaybackRate(),
+      media: null,
+      src: '',
+      source: {},
+      sources: [],
+      playbackRates: [],
+      volume: 1
+    };
+  }
+
+  /**
+   * Pass values to the playback tech
+   *
+   * @param {string} [method]
+   *        the method to call
+   *
+   * @param {Object} [arg]
+   *        the argument to pass
+   *
+   * @private
+   */
+  techCall_(method, arg) {
+    // If it's not ready yet, call method when it is
+
+    this.ready(function () {
+      if (method in allowedSetters) {
+        return set(this.middleware_, this.tech_, method, arg);
+      } else if (method in allowedMediators) {
+        return mediate(this.middleware_, this.tech_, method, arg);
+      }
+      try {
+        if (this.tech_) {
+          this.tech_[method](arg);
+        }
+      } catch (e) {
+        log$1(e);
+        throw e;
+      }
+    }, true);
+  }
+
+  /**
+   * Mediate attempt to call playback tech method
+   * and return the value of the method called.
+   *
+   * @param {string} method
+   *        Tech method
+   *
+   * @return {*}
+   *         Value returned by the tech method called, undefined if tech
+   *         is not ready or tech method is not present
+   *
+   * @private
+   */
+  techGet_(method) {
+    if (!this.tech_ || !this.tech_.isReady_) {
+      return;
+    }
+    if (method in allowedGetters) {
+      return get(this.middleware_, this.tech_, method);
+    } else if (method in allowedMediators) {
+      return mediate(this.middleware_, this.tech_, method);
+    }
+
+    // Log error when playback tech object is present but method
+    // is undefined or unavailable
+    try {
+      return this.tech_[method]();
+    } catch (e) {
+      // When building additional tech libs, an expected method may not be defined yet
+      if (this.tech_[method] === undefined) {
+        log$1(`Video.js: ${method} method not defined for ${this.techName_} playback technology.`, e);
+        throw e;
+      }
+
+      // When a method isn't available on the object it throws a TypeError
+      if (e.name === 'TypeError') {
+        log$1(`Video.js: ${method} unavailable on ${this.techName_} playback technology element.`, e);
+        this.tech_.isReady_ = false;
+        throw e;
+      }
+
+      // If error unknown, just log and throw
+      log$1(e);
+      throw e;
+    }
+  }
+
+  /**
+   * Attempt to begin playback at the first opportunity.
+   *
+   * @return {Promise|undefined}
+   *         Returns a promise if the browser supports Promises (or one
+   *         was passed in as an option). This promise will be resolved on
+   *         the return value of play. If this is undefined it will fulfill the
+   *         promise chain otherwise the promise chain will be fulfilled when
+   *         the promise from play is fulfilled.
+   */
+  play() {
+    return new Promise(resolve => {
+      this.play_(resolve);
+    });
+  }
+
+  /**
+   * The actual logic for play, takes a callback that will be resolved on the
+   * return value of play. This allows us to resolve to the play promise if there
+   * is one on modern browsers.
+   *
+   * @private
+   * @param {Function} [callback]
+   *        The callback that should be called when the techs play is actually called
+   */
+  play_(callback = silencePromise) {
+    this.playCallbacks_.push(callback);
+    const isSrcReady = Boolean(!this.changingSrc_ && (this.src() || this.currentSrc()));
+    const isSafariOrIOS = Boolean(IS_ANY_SAFARI || IS_IOS);
+
+    // treat calls to play_ somewhat like the `one` event function
+    if (this.waitToPlay_) {
+      this.off(['ready', 'loadstart'], this.waitToPlay_);
+      this.waitToPlay_ = null;
+    }
+
+    // if the player/tech is not ready or the src itself is not ready
+    // queue up a call to play on `ready` or `loadstart`
+    if (!this.isReady_ || !isSrcReady) {
+      this.waitToPlay_ = e => {
+        this.play_();
+      };
+      this.one(['ready', 'loadstart'], this.waitToPlay_);
+
+      // if we are in Safari, there is a high chance that loadstart will trigger after the gesture timeperiod
+      // in that case, we need to prime the video element by calling load so it'll be ready in time
+      if (!isSrcReady && isSafariOrIOS) {
+        this.load();
+      }
+      return;
+    }
+
+    // If the player/tech is ready and we have a source, we can attempt playback.
+    const val = this.techGet_('play');
+
+    // For native playback, reset the progress bar if we get a play call from a replay.
+    const isNativeReplay = isSafariOrIOS && this.hasClass('vjs-ended');
+    if (isNativeReplay) {
+      this.resetProgressBar_();
+    }
+    // play was terminated if the returned value is null
+    if (val === null) {
+      this.runPlayTerminatedQueue_();
+    } else {
+      this.runPlayCallbacks_(val);
+    }
+  }
+
+  /**
+   * These functions will be run when if play is terminated. If play
+   * runPlayCallbacks_ is run these function will not be run. This allows us
+   * to differentiate between a terminated play and an actual call to play.
+   */
+  runPlayTerminatedQueue_() {
+    const queue = this.playTerminatedQueue_.slice(0);
+    this.playTerminatedQueue_ = [];
+    queue.forEach(function (q) {
+      q();
+    });
+  }
+
+  /**
+   * When a callback to play is delayed we have to run these
+   * callbacks when play is actually called on the tech. This function
+   * runs the callbacks that were delayed and accepts the return value
+   * from the tech.
+   *
+   * @param {undefined|Promise} val
+   *        The return value from the tech.
+   */
+  runPlayCallbacks_(val) {
+    const callbacks = this.playCallbacks_.slice(0);
+    this.playCallbacks_ = [];
+    // clear play terminatedQueue since we finished a real play
+    this.playTerminatedQueue_ = [];
+    callbacks.forEach(function (cb) {
+      cb(val);
+    });
+  }
+
+  /**
+   * Pause the video playback
+   */
+  pause() {
+    this.techCall_('pause');
+  }
+
+  /**
+   * Check if the player is paused or has yet to play
+   *
+   * @return {boolean}
+   *         - false: if the media is currently playing
+   *         - true: if media is not currently playing
+   */
+  paused() {
+    // The initial state of paused should be true (in Safari it's actually false)
+    return this.techGet_('paused') === false ? false : true;
+  }
+
+  /**
+   * Get a TimeRange object representing the current ranges of time that the user
+   * has played.
+   *
+   * @return { import('./utils/time').TimeRange }
+   *         A time range object that represents all the increments of time that have
+   *         been played.
+   */
+  played() {
+    return this.techGet_('played') || createTimeRanges$1(0, 0);
+  }
+
+  /**
+   * Sets or returns whether or not the user is "scrubbing". Scrubbing is
+   * when the user has clicked the progress bar handle and is
+   * dragging it along the progress bar.
+   *
+   * @param {boolean} [isScrubbing]
+   *        whether the user is or is not scrubbing
+   *
+   * @return {boolean|undefined}
+   *         - The value of scrubbing when getting
+   *         - Nothing when setting
+   */
+  scrubbing(isScrubbing) {
+    if (typeof isScrubbing === 'undefined') {
+      return this.scrubbing_;
+    }
+    this.scrubbing_ = !!isScrubbing;
+    this.techCall_('setScrubbing', this.scrubbing_);
+    if (isScrubbing) {
+      this.addClass('vjs-scrubbing');
+    } else {
+      this.removeClass('vjs-scrubbing');
+    }
+  }
+
+  /**
+   * Get or set the current time (in seconds)
+   *
+   * @param {number|string} [seconds]
+   *        The time to seek to in seconds
+   *
+   * @return {number|undefined}
+   *         - the current time in seconds when getting
+   *         - Nothing when setting
+   */
+  currentTime(seconds) {
+    if (seconds === undefined) {
+      // cache last currentTime and return. default to 0 seconds
+      //
+      // Caching the currentTime is meant to prevent a massive amount of reads on the tech's
+      // currentTime when scrubbing, but may not provide much performance benefit after all.
+      // Should be tested. Also something has to read the actual current time or the cache will
+      // never get updated.
+      this.cache_.currentTime = this.techGet_('currentTime') || 0;
+      return this.cache_.currentTime;
+    }
+    if (seconds < 0) {
+      seconds = 0;
+    }
+    if (!this.isReady_ || this.changingSrc_ || !this.tech_ || !this.tech_.isReady_) {
+      this.cache_.initTime = seconds;
+      this.off('canplay', this.boundApplyInitTime_);
+      this.one('canplay', this.boundApplyInitTime_);
+      return;
+    }
+    this.techCall_('setCurrentTime', seconds);
+    this.cache_.initTime = 0;
+    if (isFinite(seconds)) {
+      this.cache_.currentTime = Number(seconds);
+    }
+  }
+
+  /**
+   * Apply the value of initTime stored in cache as currentTime.
+   *
+   * @private
+   */
+  applyInitTime_() {
+    this.currentTime(this.cache_.initTime);
+  }
+
+  /**
+   * Normally gets the length in time of the video in seconds;
+   * in all but the rarest use cases an argument will NOT be passed to the method
+   *
+   * > **NOTE**: The video must have started loading before the duration can be
+   * known, and depending on preload behaviour may not be known until the video starts
+   * playing.
+   *
+   * @fires Player#durationchange
+   *
+   * @param {number} [seconds]
+   *        The duration of the video to set in seconds
+   *
+   * @return {number|undefined}
+   *         - The duration of the video in seconds when getting
+   *         - Nothing when setting
+   */
+  duration(seconds) {
+    if (seconds === undefined) {
+      // return NaN if the duration is not known
+      return this.cache_.duration !== undefined ? this.cache_.duration : NaN;
+    }
+    seconds = parseFloat(seconds);
+
+    // Standardize on Infinity for signaling video is live
+    if (seconds < 0) {
+      seconds = Infinity;
+    }
+    if (seconds !== this.cache_.duration) {
+      // Cache the last set value for optimized scrubbing
+      this.cache_.duration = seconds;
+      if (seconds === Infinity) {
+        this.addClass('vjs-live');
+      } else {
+        this.removeClass('vjs-live');
+      }
+      if (!isNaN(seconds)) {
+        // Do not fire durationchange unless the duration value is known.
+        // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
+
+        /**
+         * @event Player#durationchange
+         * @type {Event}
+         */
+        this.trigger('durationchange');
+      }
+    }
+  }
+
+  /**
+   * Calculates how much time is left in the video. Not part
+   * of the native video API.
+   *
+   * @return {number}
+   *         The time remaining in seconds
+   */
+  remainingTime() {
+    return this.duration() - this.currentTime();
+  }
+
+  /**
+   * A remaining time function that is intended to be used when
+   * the time is to be displayed directly to the user.
+   *
+   * @return {number}
+   *         The rounded time remaining in seconds
+   */
+  remainingTimeDisplay() {
+    return Math.floor(this.duration()) - Math.floor(this.currentTime());
+  }
+
+  //
+  // Kind of like an array of portions of the video that have been downloaded.
+
+  /**
+   * Get a TimeRange object with an array of the times of the video
+   * that have been downloaded. If you just want the percent of the
+   * video that's been downloaded, use bufferedPercent.
+   *
+   * @see [Buffered Spec]{@link http://dev.w3.org/html5/spec/video.html#dom-media-buffered}
+   *
+   * @return { import('./utils/time').TimeRange }
+   *         A mock {@link TimeRanges} object (following HTML spec)
+   */
+  buffered() {
+    let buffered = this.techGet_('buffered');
+    if (!buffered || !buffered.length) {
+      buffered = createTimeRanges$1(0, 0);
+    }
+    return buffered;
+  }
+
+  /**
+   * Get the TimeRanges of the media that are currently available
+   * for seeking to.
+   *
+   * @see [Seekable Spec]{@link https://html.spec.whatwg.org/multipage/media.html#dom-media-seekable}
+   *
+   * @return { import('./utils/time').TimeRange }
+   *         A mock {@link TimeRanges} object (following HTML spec)
+   */
+  seekable() {
+    let seekable = this.techGet_('seekable');
+    if (!seekable || !seekable.length) {
+      seekable = createTimeRanges$1(0, 0);
+    }
+    return seekable;
+  }
+
+  /**
+   * Returns whether the player is in the "seeking" state.
+   *
+   * @return {boolean} True if the player is in the seeking state, false if not.
+   */
+  seeking() {
+    return this.techGet_('seeking');
+  }
+
+  /**
+   * Returns whether the player is in the "ended" state.
+   *
+   * @return {boolean} True if the player is in the ended state, false if not.
+   */
+  ended() {
+    return this.techGet_('ended');
+  }
+
+  /**
+   * Returns the current state of network activity for the element, from
+   * the codes in the list below.
+   * - NETWORK_EMPTY (numeric value 0)
+   *   The element has not yet been initialised. All attributes are in
+   *   their initial states.
+   * - NETWORK_IDLE (numeric value 1)
+   *   The element's resource selection algorithm is active and has
+   *   selected a resource, but it is not actually using the network at
+   *   this time.
+   * - NETWORK_LOADING (numeric value 2)
+   *   The user agent is actively trying to download data.
+   * - NETWORK_NO_SOURCE (numeric value 3)
+   *   The element's resource selection algorithm is active, but it has
+   *   not yet found a resource to use.
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states
+   * @return {number} the current network activity state
+   */
+  networkState() {
+    return this.techGet_('networkState');
+  }
+
+  /**
+   * Returns a value that expresses the current state of the element
+   * with respect to rendering the current playback position, from the
+   * codes in the list below.
+   * - HAVE_NOTHING (numeric value 0)
+   *   No information regarding the media resource is available.
+   * - HAVE_METADATA (numeric value 1)
+   *   Enough of the resource has been obtained that the duration of the
+   *   resource is available.
+   * - HAVE_CURRENT_DATA (numeric value 2)
+   *   Data for the immediate current playback position is available.
+   * - HAVE_FUTURE_DATA (numeric value 3)
+   *   Data for the immediate current playback position is available, as
+   *   well as enough data for the user agent to advance the current
+   *   playback position in the direction of playback.
+   * - HAVE_ENOUGH_DATA (numeric value 4)
+   *   The user agent estimates that enough data is available for
+   *   playback to proceed uninterrupted.
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate
+   * @return {number} the current playback rendering state
+   */
+  readyState() {
+    return this.techGet_('readyState');
+  }
+
+  /**
+   * Get the percent (as a decimal) of the video that's been downloaded.
+   * This method is not a part of the native HTML video API.
+   *
+   * @return {number}
+   *         A decimal between 0 and 1 representing the percent
+   *         that is buffered 0 being 0% and 1 being 100%
+   */
+  bufferedPercent() {
+    return bufferedPercent(this.buffered(), this.duration());
+  }
+
+  /**
+   * Get the ending time of the last buffered time range
+   * This is used in the progress bar to encapsulate all time ranges.
+   *
+   * @return {number}
+   *         The end of the last buffered time range
+   */
+  bufferedEnd() {
+    const buffered = this.buffered();
+    const duration = this.duration();
+    let end = buffered.end(buffered.length - 1);
+    if (end > duration) {
+      end = duration;
+    }
+    return end;
+  }
+
+  /**
+   * Get or set the current volume of the media
+   *
+   * @param  {number} [percentAsDecimal]
+   *         The new volume as a decimal percent:
+   *         - 0 is muted/0%/off
+   *         - 1.0 is 100%/full
+   *         - 0.5 is half volume or 50%
+   *
+   * @return {number|undefined}
+   *         The current volume as a percent when getting
+   */
+  volume(percentAsDecimal) {
+    let vol;
+    if (percentAsDecimal !== undefined) {
+      // Force value to between 0 and 1
+      vol = Math.max(0, Math.min(1, percentAsDecimal));
+      this.cache_.volume = vol;
+      this.techCall_('setVolume', vol);
+      if (vol > 0) {
+        this.lastVolume_(vol);
+      }
+      return;
+    }
+
+    // Default to 1 when returning current volume.
+    vol = parseFloat(this.techGet_('volume'));
+    return isNaN(vol) ? 1 : vol;
+  }
+
+  /**
+   * Get the current muted state, or turn mute on or off
+   *
+   * @param {boolean} [muted]
+   *        - true to mute
+   *        - false to unmute
+   *
+   * @return {boolean|undefined}
+   *         - true if mute is on and getting
+   *         - false if mute is off and getting
+   *         - nothing if setting
+   */
+  muted(muted) {
+    if (muted !== undefined) {
+      this.techCall_('setMuted', muted);
+      return;
+    }
+    return this.techGet_('muted') || false;
+  }
+
+  /**
+   * Get the current defaultMuted state, or turn defaultMuted on or off. defaultMuted
+   * indicates the state of muted on initial playback.
+   *
+   * ```js
+   *   var myPlayer = videojs('some-player-id');
+   *
+   *   myPlayer.src("http://www.example.com/path/to/video.mp4");
+   *
+   *   // get, should be false
+   *   console.log(myPlayer.defaultMuted());
+   *   // set to true
+   *   myPlayer.defaultMuted(true);
+   *   // get should be true
+   *   console.log(myPlayer.defaultMuted());
+   * ```
+   *
+   * @param {boolean} [defaultMuted]
+   *        - true to mute
+   *        - false to unmute
+   *
+   * @return {boolean|undefined}
+   *         - true if defaultMuted is on and getting
+   *         - false if defaultMuted is off and getting
+   *         - Nothing when setting
+   */
+  defaultMuted(defaultMuted) {
+    if (defaultMuted !== undefined) {
+      this.techCall_('setDefaultMuted', defaultMuted);
+    }
+    return this.techGet_('defaultMuted') || false;
+  }
+
+  /**
+   * Get the last volume, or set it
+   *
+   * @param  {number} [percentAsDecimal]
+   *         The new last volume as a decimal percent:
+   *         - 0 is muted/0%/off
+   *         - 1.0 is 100%/full
+   *         - 0.5 is half volume or 50%
+   *
+   * @return {number|undefined}
+   *         - The current value of lastVolume as a percent when getting
+   *         - Nothing when setting
+   *
+   * @private
+   */
+  lastVolume_(percentAsDecimal) {
+    if (percentAsDecimal !== undefined && percentAsDecimal !== 0) {
+      this.cache_.lastVolume = percentAsDecimal;
+      return;
+    }
+    return this.cache_.lastVolume;
+  }
+
+  /**
+   * Check if current tech can support native fullscreen
+   * (e.g. with built in controls like iOS)
+   *
+   * @return {boolean}
+   *         if native fullscreen is supported
+   */
+  supportsFullScreen() {
+    return this.techGet_('supportsFullScreen') || false;
+  }
+
+  /**
+   * Check if the player is in fullscreen mode or tell the player that it
+   * is or is not in fullscreen mode.
+   *
+   * > NOTE: As of the latest HTML5 spec, isFullscreen is no longer an official
+   * property and instead document.fullscreenElement is used. But isFullscreen is
+   * still a valuable property for internal player workings.
+   *
+   * @param  {boolean} [isFS]
+   *         Set the players current fullscreen state
+   *
+   * @return {boolean|undefined}
+   *         - true if fullscreen is on and getting
+   *         - false if fullscreen is off and getting
+   *         - Nothing when setting
+   */
+  isFullscreen(isFS) {
+    if (isFS !== undefined) {
+      const oldValue = this.isFullscreen_;
+      this.isFullscreen_ = Boolean(isFS);
+
+      // if we changed fullscreen state and we're in prefixed mode, trigger fullscreenchange
+      // this is the only place where we trigger fullscreenchange events for older browsers
+      // fullWindow mode is treated as a prefixed event and will get a fullscreenchange event as well
+      if (this.isFullscreen_ !== oldValue && this.fsApi_.prefixed) {
+        /**
+           * @event Player#fullscreenchange
+           * @type {Event}
+           */
+        this.trigger('fullscreenchange');
+      }
+      this.toggleFullscreenClass_();
+      return;
+    }
+    return this.isFullscreen_;
+  }
+
+  /**
+   * Increase the size of the video to full screen
+   * In some browsers, full screen is not supported natively, so it enters
+   * "full window mode", where the video fills the browser window.
+   * In browsers and devices that support native full screen, sometimes the
+   * browser's default controls will be shown, and not the Video.js custom skin.
+   * This includes most mobile devices (iOS, Android) and older versions of
+   * Safari.
+   *
+   * @param  {Object} [fullscreenOptions]
+   *         Override the player fullscreen options
+   *
+   * @fires Player#fullscreenchange
+   */
+  requestFullscreen(fullscreenOptions) {
+    if (this.isInPictureInPicture()) {
+      this.exitPictureInPicture();
+    }
+    const self = this;
+    return new Promise((resolve, reject) => {
+      function offHandler() {
+        self.off('fullscreenerror', errorHandler);
+        self.off('fullscreenchange', changeHandler);
+      }
+      function changeHandler() {
+        offHandler();
+        resolve();
+      }
+      function errorHandler(e, err) {
+        offHandler();
+        reject(err);
+      }
+      self.one('fullscreenchange', changeHandler);
+      self.one('fullscreenerror', errorHandler);
+      const promise = self.requestFullscreenHelper_(fullscreenOptions);
+      if (promise) {
+        promise.then(offHandler, offHandler);
+        promise.then(resolve, reject);
+      }
+    });
+  }
+  requestFullscreenHelper_(fullscreenOptions) {
+    let fsOptions;
+
+    // Only pass fullscreen options to requestFullscreen in spec-compliant browsers.
+    // Use defaults or player configured option unless passed directly to this method.
+    if (!this.fsApi_.prefixed) {
+      fsOptions = this.options_.fullscreen && this.options_.fullscreen.options || {};
+      if (fullscreenOptions !== undefined) {
+        fsOptions = fullscreenOptions;
+      }
+    }
+
+    // This method works as follows:
+    // 1. if a fullscreen api is available, use it
+    //   1. call requestFullscreen with potential options
+    //   2. if we got a promise from above, use it to update isFullscreen()
+    // 2. otherwise, if the tech supports fullscreen, call `enterFullScreen` on it.
+    //   This is particularly used for iPhone, older iPads, and non-safari browser on iOS.
+    // 3. otherwise, use "fullWindow" mode
+    if (this.fsApi_.requestFullscreen) {
+      const promise = this.el_[this.fsApi_.requestFullscreen](fsOptions);
+
+      // Even on browsers with promise support this may not return a promise
+      if (promise) {
+        promise.then(() => this.isFullscreen(true), () => this.isFullscreen(false));
+      }
+      return promise;
+    } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) {
+      // we can't take the video.js controls fullscreen but we can go fullscreen
+      // with native controls
+      this.techCall_('enterFullScreen');
+    } else {
+      // fullscreen isn't supported so we'll just stretch the video element to
+      // fill the viewport
+      this.enterFullWindow();
+    }
+  }
+
+  /**
+   * Return the video to its normal size after having been in full screen mode
+   *
+   * @fires Player#fullscreenchange
+   */
+  exitFullscreen() {
+    const self = this;
+    return new Promise((resolve, reject) => {
+      function offHandler() {
+        self.off('fullscreenerror', errorHandler);
+        self.off('fullscreenchange', changeHandler);
+      }
+      function changeHandler() {
+        offHandler();
+        resolve();
+      }
+      function errorHandler(e, err) {
+        offHandler();
+        reject(err);
+      }
+      self.one('fullscreenchange', changeHandler);
+      self.one('fullscreenerror', errorHandler);
+      const promise = self.exitFullscreenHelper_();
+      if (promise) {
+        promise.then(offHandler, offHandler);
+        // map the promise to our resolve/reject methods
+        promise.then(resolve, reject);
+      }
+    });
+  }
+  exitFullscreenHelper_() {
+    if (this.fsApi_.requestFullscreen) {
+      const promise = document__default["default"][this.fsApi_.exitFullscreen]();
+
+      // Even on browsers with promise support this may not return a promise
+      if (promise) {
+        // we're splitting the promise here, so, we want to catch the
+        // potential error so that this chain doesn't have unhandled errors
+        silencePromise(promise.then(() => this.isFullscreen(false)));
+      }
+      return promise;
+    } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) {
+      this.techCall_('exitFullScreen');
+    } else {
+      this.exitFullWindow();
+    }
+  }
+
+  /**
+   * When fullscreen isn't supported we can stretch the
+   * video container to as wide as the browser will let us.
+   *
+   * @fires Player#enterFullWindow
+   */
+  enterFullWindow() {
+    this.isFullscreen(true);
+    this.isFullWindow = true;
+
+    // Storing original doc overflow value to return to when fullscreen is off
+    this.docOrigOverflow = document__default["default"].documentElement.style.overflow;
+
+    // Add listener for esc key to exit fullscreen
+    on(document__default["default"], 'keydown', this.boundFullWindowOnEscKey_);
+
+    // Hide any scroll bars
+    document__default["default"].documentElement.style.overflow = 'hidden';
+
+    // Apply fullscreen styles
+    addClass(document__default["default"].body, 'vjs-full-window');
+
+    /**
+     * @event Player#enterFullWindow
+     * @type {Event}
+     */
+    this.trigger('enterFullWindow');
+  }
+
+  /**
+   * Check for call to either exit full window or
+   * full screen on ESC key
+   *
+   * @param {string} event
+   *        Event to check for key press
+   */
+  fullWindowOnEscKey(event) {
+    if (keycode__default["default"].isEventKey(event, 'Esc')) {
+      if (this.isFullscreen() === true) {
+        if (!this.isFullWindow) {
+          this.exitFullscreen();
+        } else {
+          this.exitFullWindow();
+        }
+      }
+    }
+  }
+
+  /**
+   * Exit full window
+   *
+   * @fires Player#exitFullWindow
+   */
+  exitFullWindow() {
+    this.isFullscreen(false);
+    this.isFullWindow = false;
+    off(document__default["default"], 'keydown', this.boundFullWindowOnEscKey_);
+
+    // Unhide scroll bars.
+    document__default["default"].documentElement.style.overflow = this.docOrigOverflow;
+
+    // Remove fullscreen styles
+    removeClass(document__default["default"].body, 'vjs-full-window');
+
+    // Resize the box, controller, and poster to original sizes
+    // this.positionAll();
+    /**
+     * @event Player#exitFullWindow
+     * @type {Event}
+     */
+    this.trigger('exitFullWindow');
+  }
+
+  /**
+   * Get or set disable Picture-in-Picture mode.
+   *
+   * @param {boolean} [value]
+   *                  - true will disable Picture-in-Picture mode
+   *                  - false will enable Picture-in-Picture mode
+   */
+  disablePictureInPicture(value) {
+    if (value === undefined) {
+      return this.techGet_('disablePictureInPicture');
+    }
+    this.techCall_('setDisablePictureInPicture', value);
+    this.options_.disablePictureInPicture = value;
+    this.trigger('disablepictureinpicturechanged');
+  }
+
+  /**
+   * Check if the player is in Picture-in-Picture mode or tell the player that it
+   * is or is not in Picture-in-Picture mode.
+   *
+   * @param  {boolean} [isPiP]
+   *         Set the players current Picture-in-Picture state
+   *
+   * @return {boolean|undefined}
+   *         - true if Picture-in-Picture is on and getting
+   *         - false if Picture-in-Picture is off and getting
+   *         - nothing if setting
+   */
+  isInPictureInPicture(isPiP) {
+    if (isPiP !== undefined) {
+      this.isInPictureInPicture_ = !!isPiP;
+      this.togglePictureInPictureClass_();
+      return;
+    }
+    return !!this.isInPictureInPicture_;
+  }
+
+  /**
+   * Create a floating video window always on top of other windows so that users may
+   * continue consuming media while they interact with other content sites, or
+   * applications on their device.
+   *
+   * This can use document picture-in-picture or element picture in picture
+   *
+   * Set `enableDocumentPictureInPicture` to `true` to use docPiP on a supported browser
+   * Else set `disablePictureInPicture` to `false` to disable elPiP on a supported browser
+   *
+   *
+   * @see [Spec]{@link https://w3c.github.io/picture-in-picture/}
+   * @see [Spec]{@link https://wicg.github.io/document-picture-in-picture/}
+   *
+   * @fires Player#enterpictureinpicture
+   *
+   * @return {Promise}
+   *         A promise with a Picture-in-Picture window.
+   */
+  requestPictureInPicture() {
+    if (this.options_.enableDocumentPictureInPicture && window__default["default"].documentPictureInPicture) {
+      const pipContainer = document__default["default"].createElement(this.el().tagName);
+      pipContainer.classList = this.el().classList;
+      pipContainer.classList.add('vjs-pip-container');
+      if (this.posterImage) {
+        pipContainer.appendChild(this.posterImage.el().cloneNode(true));
+      }
+      if (this.titleBar) {
+        pipContainer.appendChild(this.titleBar.el().cloneNode(true));
+      }
+      pipContainer.appendChild(createEl('p', {
+        className: 'vjs-pip-text'
+      }, {}, this.localize('Playing in picture-in-picture')));
+      return window__default["default"].documentPictureInPicture.requestWindow({
+        // The aspect ratio won't be correct, Chrome bug https://crbug.com/1407629
+        width: this.videoWidth(),
+        height: this.videoHeight()
+      }).then(pipWindow => {
+        copyStyleSheetsToWindow(pipWindow);
+        this.el_.parentNode.insertBefore(pipContainer, this.el_);
+        pipWindow.document.body.appendChild(this.el_);
+        pipWindow.document.body.classList.add('vjs-pip-window');
+        this.player_.isInPictureInPicture(true);
+        this.player_.trigger({
+          type: 'enterpictureinpicture',
+          pipWindow
+        });
+
+        // Listen for the PiP closing event to move the video back.
+        pipWindow.addEventListener('pagehide', event => {
+          const pipVideo = event.target.querySelector('.video-js');
+          pipContainer.parentNode.replaceChild(pipVideo, pipContainer);
+          this.player_.isInPictureInPicture(false);
+          this.player_.trigger('leavepictureinpicture');
+        });
+        return pipWindow;
+      });
+    }
+    if ('pictureInPictureEnabled' in document__default["default"] && this.disablePictureInPicture() === false) {
+      /**
+       * This event fires when the player enters picture in picture mode
+       *
+       * @event Player#enterpictureinpicture
+       * @type {Event}
+       */
+      return this.techGet_('requestPictureInPicture');
+    }
+    return Promise.reject('No PiP mode is available');
+  }
+
+  /**
+   * Exit Picture-in-Picture mode.
+   *
+   * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+   *
+   * @fires Player#leavepictureinpicture
+   *
+   * @return {Promise}
+   *         A promise.
+   */
+  exitPictureInPicture() {
+    if (window__default["default"].documentPictureInPicture && window__default["default"].documentPictureInPicture.window) {
+      // With documentPictureInPicture, Player#leavepictureinpicture is fired in the pagehide handler
+      window__default["default"].documentPictureInPicture.window.close();
+      return Promise.resolve();
+    }
+    if ('pictureInPictureEnabled' in document__default["default"]) {
+      /**
+       * This event fires when the player leaves picture in picture mode
+       *
+       * @event Player#leavepictureinpicture
+       * @type {Event}
+       */
+      return document__default["default"].exitPictureInPicture();
+    }
+  }
+
+  /**
+   * Called when this Player has focus and a key gets pressed down, or when
+   * any Component of this player receives a key press that it doesn't handle.
+   * This allows player-wide hotkeys (either as defined below, or optionally
+   * by an external function).
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    const {
+      userActions
+    } = this.options_;
+
+    // Bail out if hotkeys are not configured.
+    if (!userActions || !userActions.hotkeys) {
+      return;
+    }
+
+    // Function that determines whether or not to exclude an element from
+    // hotkeys handling.
+    const excludeElement = el => {
+      const tagName = el.tagName.toLowerCase();
+
+      // The first and easiest test is for `contenteditable` elements.
+      if (el.isContentEditable) {
+        return true;
+      }
+
+      // Inputs matching these types will still trigger hotkey handling as
+      // they are not text inputs.
+      const allowedInputTypes = ['button', 'checkbox', 'hidden', 'radio', 'reset', 'submit'];
+      if (tagName === 'input') {
+        return allowedInputTypes.indexOf(el.type) === -1;
+      }
+
+      // The final test is by tag name. These tags will be excluded entirely.
+      const excludedTags = ['textarea'];
+      return excludedTags.indexOf(tagName) !== -1;
+    };
+
+    // Bail out if the user is focused on an interactive form element.
+    if (excludeElement(this.el_.ownerDocument.activeElement)) {
+      return;
+    }
+    if (typeof userActions.hotkeys === 'function') {
+      userActions.hotkeys.call(this, event);
+    } else {
+      this.handleHotkeys(event);
+    }
+  }
+
+  /**
+   * Called when this Player receives a hotkey keydown event.
+   * Supported player-wide hotkeys are:
+   *
+   *   f          - toggle fullscreen
+   *   m          - toggle mute
+   *   k or Space - toggle play/pause
+   *
+   * @param {Event} event
+   *        The `keydown` event that caused this function to be called.
+   */
+  handleHotkeys(event) {
+    const hotkeys = this.options_.userActions ? this.options_.userActions.hotkeys : {};
+
+    // set fullscreenKey, muteKey, playPauseKey from `hotkeys`, use defaults if not set
+    const {
+      fullscreenKey = keydownEvent => keycode__default["default"].isEventKey(keydownEvent, 'f'),
+      muteKey = keydownEvent => keycode__default["default"].isEventKey(keydownEvent, 'm'),
+      playPauseKey = keydownEvent => keycode__default["default"].isEventKey(keydownEvent, 'k') || keycode__default["default"].isEventKey(keydownEvent, 'Space')
+    } = hotkeys;
+    if (fullscreenKey.call(this, event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const FSToggle = Component$1.getComponent('FullscreenToggle');
+      if (document__default["default"][this.fsApi_.fullscreenEnabled] !== false) {
+        FSToggle.prototype.handleClick.call(this, event);
+      }
+    } else if (muteKey.call(this, event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const MuteToggle = Component$1.getComponent('MuteToggle');
+      MuteToggle.prototype.handleClick.call(this, event);
+    } else if (playPauseKey.call(this, event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const PlayToggle = Component$1.getComponent('PlayToggle');
+      PlayToggle.prototype.handleClick.call(this, event);
+    }
+  }
+
+  /**
+   * Check whether the player can play a given mimetype
+   *
+   * @see https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype
+   *
+   * @param {string} type
+   *        The mimetype to check
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string)
+   */
+  canPlayType(type) {
+    let can;
+
+    // Loop through each playback technology in the options order
+    for (let i = 0, j = this.options_.techOrder; i < j.length; i++) {
+      const techName = j[i];
+      let tech = Tech.getTech(techName);
+
+      // Support old behavior of techs being registered as components.
+      // Remove once that deprecated behavior is removed.
+      if (!tech) {
+        tech = Component$1.getComponent(techName);
+      }
+
+      // Check if the current tech is defined before continuing
+      if (!tech) {
+        log$1.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+        continue;
+      }
+
+      // Check if the browser supports this technology
+      if (tech.isSupported()) {
+        can = tech.canPlayType(type);
+        if (can) {
+          return can;
+        }
+      }
+    }
+    return '';
+  }
+
+  /**
+   * Select source based on tech-order or source-order
+   * Uses source-order selection if `options.sourceOrder` is truthy. Otherwise,
+   * defaults to tech-order selection
+   *
+   * @param {Array} sources
+   *        The sources for a media asset
+   *
+   * @return {Object|boolean}
+   *         Object of source and tech order or false
+   */
+  selectSource(sources) {
+    // Get only the techs specified in `techOrder` that exist and are supported by the
+    // current platform
+    const techs = this.options_.techOrder.map(techName => {
+      return [techName, Tech.getTech(techName)];
+    }).filter(([techName, tech]) => {
+      // Check if the current tech is defined before continuing
+      if (tech) {
+        // Check if the browser supports this technology
+        return tech.isSupported();
+      }
+      log$1.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+      return false;
+    });
+
+    // Iterate over each `innerArray` element once per `outerArray` element and execute
+    // `tester` with both. If `tester` returns a non-falsy value, exit early and return
+    // that value.
+    const findFirstPassingTechSourcePair = function (outerArray, innerArray, tester) {
+      let found;
+      outerArray.some(outerChoice => {
+        return innerArray.some(innerChoice => {
+          found = tester(outerChoice, innerChoice);
+          if (found) {
+            return true;
+          }
+        });
+      });
+      return found;
+    };
+    let foundSourceAndTech;
+    const flip = fn => (a, b) => fn(b, a);
+    const finder = ([techName, tech], source) => {
+      if (tech.canPlaySource(source, this.options_[techName.toLowerCase()])) {
+        return {
+          source,
+          tech: techName
+        };
+      }
+    };
+
+    // Depending on the truthiness of `options.sourceOrder`, we swap the order of techs and sources
+    // to select from them based on their priority.
+    if (this.options_.sourceOrder) {
+      // Source-first ordering
+      foundSourceAndTech = findFirstPassingTechSourcePair(sources, techs, flip(finder));
+    } else {
+      // Tech-first ordering
+      foundSourceAndTech = findFirstPassingTechSourcePair(techs, sources, finder);
+    }
+    return foundSourceAndTech || false;
+  }
+
+  /**
+   * Executes source setting and getting logic
+   *
+   * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+   *        A SourceObject, an array of SourceObjects, or a string referencing
+   *        a URL to a media source. It is _highly recommended_ that an object
+   *        or array of objects is used here, so that source selection
+   *        algorithms can take the `type` into account.
+   *
+   *        If not provided, this method acts as a getter.
+   * @param {boolean} [isRetry]
+   *        Indicates whether this is being called internally as a result of a retry
+   *
+   * @return {string|undefined}
+   *         If the `source` argument is missing, returns the current source
+   *         URL. Otherwise, returns nothing/undefined.
+   */
+  handleSrc_(source, isRetry) {
+    // getter usage
+    if (typeof source === 'undefined') {
+      return this.cache_.src || '';
+    }
+
+    // Reset retry behavior for new source
+    if (this.resetRetryOnError_) {
+      this.resetRetryOnError_();
+    }
+
+    // filter out invalid sources and turn our source into
+    // an array of source objects
+    const sources = filterSource(source);
+
+    // if a source was passed in then it is invalid because
+    // it was filtered to a zero length Array. So we have to
+    // show an error
+    if (!sources.length) {
+      this.setTimeout(function () {
+        this.error({
+          code: 4,
+          message: this.options_.notSupportedMessage
+        });
+      }, 0);
+      return;
+    }
+
+    // initial sources
+    this.changingSrc_ = true;
+
+    // Only update the cached source list if we are not retrying a new source after error,
+    // since in that case we want to include the failed source(s) in the cache
+    if (!isRetry) {
+      this.cache_.sources = sources;
+    }
+    this.updateSourceCaches_(sources[0]);
+
+    // middlewareSource is the source after it has been changed by middleware
+    setSource(this, sources[0], (middlewareSource, mws) => {
+      this.middleware_ = mws;
+
+      // since sourceSet is async we have to update the cache again after we select a source since
+      // the source that is selected could be out of order from the cache update above this callback.
+      if (!isRetry) {
+        this.cache_.sources = sources;
+      }
+      this.updateSourceCaches_(middlewareSource);
+      const err = this.src_(middlewareSource);
+      if (err) {
+        if (sources.length > 1) {
+          return this.handleSrc_(sources.slice(1));
+        }
+        this.changingSrc_ = false;
+
+        // We need to wrap this in a timeout to give folks a chance to add error event handlers
+        this.setTimeout(function () {
+          this.error({
+            code: 4,
+            message: this.options_.notSupportedMessage
+          });
+        }, 0);
+
+        // we could not find an appropriate tech, but let's still notify the delegate that this is it
+        // this needs a better comment about why this is needed
+        this.triggerReady();
+        return;
+      }
+      setTech(mws, this.tech_);
+    });
+
+    // Try another available source if this one fails before playback.
+    if (sources.length > 1) {
+      const retry = () => {
+        // Remove the error modal
+        this.error(null);
+        this.handleSrc_(sources.slice(1), true);
+      };
+      const stopListeningForErrors = () => {
+        this.off('error', retry);
+      };
+      this.one('error', retry);
+      this.one('playing', stopListeningForErrors);
+      this.resetRetryOnError_ = () => {
+        this.off('error', retry);
+        this.off('playing', stopListeningForErrors);
+      };
+    }
+  }
+
+  /**
+   * Get or set the video source.
+   *
+   * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+   *        A SourceObject, an array of SourceObjects, or a string referencing
+   *        a URL to a media source. It is _highly recommended_ that an object
+   *        or array of objects is used here, so that source selection
+   *        algorithms can take the `type` into account.
+   *
+   *        If not provided, this method acts as a getter.
+   *
+   * @return {string|undefined}
+   *         If the `source` argument is missing, returns the current source
+   *         URL. Otherwise, returns nothing/undefined.
+   */
+  src(source) {
+    return this.handleSrc_(source, false);
+  }
+
+  /**
+   * Set the source object on the tech, returns a boolean that indicates whether
+   * there is a tech that can play the source or not
+   *
+   * @param {Tech~SourceObject} source
+   *        The source object to set on the Tech
+   *
+   * @return {boolean}
+   *         - True if there is no Tech to playback this source
+   *         - False otherwise
+   *
+   * @private
+   */
+  src_(source) {
+    const sourceTech = this.selectSource([source]);
+    if (!sourceTech) {
+      return true;
+    }
+    if (!titleCaseEquals(sourceTech.tech, this.techName_)) {
+      this.changingSrc_ = true;
+      // load this technology with the chosen source
+      this.loadTech_(sourceTech.tech, sourceTech.source);
+      this.tech_.ready(() => {
+        this.changingSrc_ = false;
+      });
+      return false;
+    }
+
+    // wait until the tech is ready to set the source
+    // and set it synchronously if possible (#2326)
+    this.ready(function () {
+      // The setSource tech method was added with source handlers
+      // so older techs won't support it
+      // We need to check the direct prototype for the case where subclasses
+      // of the tech do not support source handlers
+      if (this.tech_.constructor.prototype.hasOwnProperty('setSource')) {
+        this.techCall_('setSource', source);
+      } else {
+        this.techCall_('src', source.src);
+      }
+      this.changingSrc_ = false;
+    }, true);
+    return false;
+  }
+
+  /**
+   * Begin loading the src data.
+   */
+  load() {
+    // Workaround to use the load method with the VHS.
+    // Does not cover the case when the load method is called directly from the mediaElement.
+    if (this.tech_ && this.tech_.vhs) {
+      this.src(this.currentSource());
+      return;
+    }
+    this.techCall_('load');
+  }
+
+  /**
+   * Reset the player. Loads the first tech in the techOrder,
+   * removes all the text tracks in the existing `tech`,
+   * and calls `reset` on the `tech`.
+   */
+  reset() {
+    if (this.paused()) {
+      this.doReset_();
+    } else {
+      const playPromise = this.play();
+      silencePromise(playPromise.then(() => this.doReset_()));
+    }
+  }
+  doReset_() {
+    if (this.tech_) {
+      this.tech_.clearTracks('text');
+    }
+    this.removeClass('vjs-playing');
+    this.addClass('vjs-paused');
+    this.resetCache_();
+    this.poster('');
+    this.loadTech_(this.options_.techOrder[0], null);
+    this.techCall_('reset');
+    this.resetControlBarUI_();
+    this.error(null);
+    if (this.titleBar) {
+      this.titleBar.update({
+        title: undefined,
+        description: undefined
+      });
+    }
+    if (isEvented(this)) {
+      this.trigger('playerreset');
+    }
+  }
+
+  /**
+   * Reset Control Bar's UI by calling sub-methods that reset
+   * all of Control Bar's components
+   */
+  resetControlBarUI_() {
+    this.resetProgressBar_();
+    this.resetPlaybackRate_();
+    this.resetVolumeBar_();
+  }
+
+  /**
+   * Reset tech's progress so progress bar is reset in the UI
+   */
+  resetProgressBar_() {
+    this.currentTime(0);
+    const {
+      currentTimeDisplay,
+      durationDisplay,
+      progressControl,
+      remainingTimeDisplay
+    } = this.controlBar || {};
+    const {
+      seekBar
+    } = progressControl || {};
+    if (currentTimeDisplay) {
+      currentTimeDisplay.updateContent();
+    }
+    if (durationDisplay) {
+      durationDisplay.updateContent();
+    }
+    if (remainingTimeDisplay) {
+      remainingTimeDisplay.updateContent();
+    }
+    if (seekBar) {
+      seekBar.update();
+      if (seekBar.loadProgressBar) {
+        seekBar.loadProgressBar.update();
+      }
+    }
+  }
+
+  /**
+   * Reset Playback ratio
+   */
+  resetPlaybackRate_() {
+    this.playbackRate(this.defaultPlaybackRate());
+    this.handleTechRateChange_();
+  }
+
+  /**
+   * Reset Volume bar
+   */
+  resetVolumeBar_() {
+    this.volume(1.0);
+    this.trigger('volumechange');
+  }
+
+  /**
+   * Returns all of the current source objects.
+   *
+   * @return {Tech~SourceObject[]}
+   *         The current source objects
+   */
+  currentSources() {
+    const source = this.currentSource();
+    const sources = [];
+
+    // assume `{}` or `{ src }`
+    if (Object.keys(source).length !== 0) {
+      sources.push(source);
+    }
+    return this.cache_.sources || sources;
+  }
+
+  /**
+   * Returns the current source object.
+   *
+   * @return {Tech~SourceObject}
+   *         The current source object
+   */
+  currentSource() {
+    return this.cache_.source || {};
+  }
+
+  /**
+   * Returns the fully qualified URL of the current source value e.g. http://mysite.com/video.mp4
+   * Can be used in conjunction with `currentType` to assist in rebuilding the current source object.
+   *
+   * @return {string}
+   *         The current source
+   */
+  currentSrc() {
+    return this.currentSource() && this.currentSource().src || '';
+  }
+
+  /**
+   * Get the current source type e.g. video/mp4
+   * This can allow you rebuild the current source object so that you could load the same
+   * source and tech later
+   *
+   * @return {string}
+   *         The source MIME type
+   */
+  currentType() {
+    return this.currentSource() && this.currentSource().type || '';
+  }
+
+  /**
+   * Get or set the preload attribute
+   *
+   * @param {'none'|'auto'|'metadata'} [value]
+   *        Preload mode to pass to tech
+   *
+   * @return {string|undefined}
+   *         - The preload attribute value when getting
+   *         - Nothing when setting
+   */
+  preload(value) {
+    if (value !== undefined) {
+      this.techCall_('setPreload', value);
+      this.options_.preload = value;
+      return;
+    }
+    return this.techGet_('preload');
+  }
+
+  /**
+   * Get or set the autoplay option. When this is a boolean it will
+   * modify the attribute on the tech. When this is a string the attribute on
+   * the tech will be removed and `Player` will handle autoplay on loadstarts.
+   *
+   * @param {boolean|'play'|'muted'|'any'} [value]
+   *        - true: autoplay using the browser behavior
+   *        - false: do not autoplay
+   *        - 'play': call play() on every loadstart
+   *        - 'muted': call muted() then play() on every loadstart
+   *        - 'any': call play() on every loadstart. if that fails call muted() then play().
+   *        - *: values other than those listed here will be set `autoplay` to true
+   *
+   * @return {boolean|string|undefined}
+   *         - The current value of autoplay when getting
+   *         - Nothing when setting
+   */
+  autoplay(value) {
+    // getter usage
+    if (value === undefined) {
+      return this.options_.autoplay || false;
+    }
+    let techAutoplay;
+
+    // if the value is a valid string set it to that, or normalize `true` to 'play', if need be
+    if (typeof value === 'string' && /(any|play|muted)/.test(value) || value === true && this.options_.normalizeAutoplay) {
+      this.options_.autoplay = value;
+      this.manualAutoplay_(typeof value === 'string' ? value : 'play');
+      techAutoplay = false;
+
+      // any falsy value sets autoplay to false in the browser,
+      // lets do the same
+    } else if (!value) {
+      this.options_.autoplay = false;
+
+      // any other value (ie truthy) sets autoplay to true
+    } else {
+      this.options_.autoplay = true;
+    }
+    techAutoplay = typeof techAutoplay === 'undefined' ? this.options_.autoplay : techAutoplay;
+
+    // if we don't have a tech then we do not queue up
+    // a setAutoplay call on tech ready. We do this because the
+    // autoplay option will be passed in the constructor and we
+    // do not need to set it twice
+    if (this.tech_) {
+      this.techCall_('setAutoplay', techAutoplay);
+    }
+  }
+
+  /**
+   * Set or unset the playsinline attribute.
+   * Playsinline tells the browser that non-fullscreen playback is preferred.
+   *
+   * @param {boolean} [value]
+   *        - true means that we should try to play inline by default
+   *        - false means that we should use the browser's default playback mode,
+   *          which in most cases is inline. iOS Safari is a notable exception
+   *          and plays fullscreen by default.
+   *
+   * @return {string|undefined}
+   *         - the current value of playsinline
+   *         - Nothing when setting
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+   */
+  playsinline(value) {
+    if (value !== undefined) {
+      this.techCall_('setPlaysinline', value);
+      this.options_.playsinline = value;
+    }
+    return this.techGet_('playsinline');
+  }
+
+  /**
+   * Get or set the loop attribute on the video element.
+   *
+   * @param {boolean} [value]
+   *        - true means that we should loop the video
+   *        - false means that we should not loop the video
+   *
+   * @return {boolean|undefined}
+   *         - The current value of loop when getting
+   *         - Nothing when setting
+   */
+  loop(value) {
+    if (value !== undefined) {
+      this.techCall_('setLoop', value);
+      this.options_.loop = value;
+      return;
+    }
+    return this.techGet_('loop');
+  }
+
+  /**
+   * Get or set the poster image source url
+   *
+   * @fires Player#posterchange
+   *
+   * @param {string} [src]
+   *        Poster image source URL
+   *
+   * @return {string|undefined}
+   *         - The current value of poster when getting
+   *         - Nothing when setting
+   */
+  poster(src) {
+    if (src === undefined) {
+      return this.poster_;
+    }
+
+    // The correct way to remove a poster is to set as an empty string
+    // other falsey values will throw errors
+    if (!src) {
+      src = '';
+    }
+    if (src === this.poster_) {
+      return;
+    }
+
+    // update the internal poster variable
+    this.poster_ = src;
+
+    // update the tech's poster
+    this.techCall_('setPoster', src);
+    this.isPosterFromTech_ = false;
+
+    // alert components that the poster has been set
+    /**
+     * This event fires when the poster image is changed on the player.
+     *
+     * @event Player#posterchange
+     * @type {Event}
+     */
+    this.trigger('posterchange');
+  }
+
+  /**
+   * Some techs (e.g. YouTube) can provide a poster source in an
+   * asynchronous way. We want the poster component to use this
+   * poster source so that it covers up the tech's controls.
+   * (YouTube's play button). However we only want to use this
+   * source if the player user hasn't set a poster through
+   * the normal APIs.
+   *
+   * @fires Player#posterchange
+   * @listens Tech#posterchange
+   * @private
+   */
+  handleTechPosterChange_() {
+    if ((!this.poster_ || this.options_.techCanOverridePoster) && this.tech_ && this.tech_.poster) {
+      const newPoster = this.tech_.poster() || '';
+      if (newPoster !== this.poster_) {
+        this.poster_ = newPoster;
+        this.isPosterFromTech_ = true;
+
+        // Let components know the poster has changed
+        this.trigger('posterchange');
+      }
+    }
+  }
+
+  /**
+   * Get or set whether or not the controls are showing.
+   *
+   * @fires Player#controlsenabled
+   *
+   * @param {boolean} [bool]
+   *        - true to turn controls on
+   *        - false to turn controls off
+   *
+   * @return {boolean|undefined}
+   *         - The current value of controls when getting
+   *         - Nothing when setting
+   */
+  controls(bool) {
+    if (bool === undefined) {
+      return !!this.controls_;
+    }
+    bool = !!bool;
+
+    // Don't trigger a change event unless it actually changed
+    if (this.controls_ === bool) {
+      return;
+    }
+    this.controls_ = bool;
+    if (this.usingNativeControls()) {
+      this.techCall_('setControls', bool);
+    }
+    if (this.controls_) {
+      this.removeClass('vjs-controls-disabled');
+      this.addClass('vjs-controls-enabled');
+      /**
+       * @event Player#controlsenabled
+       * @type {Event}
+       */
+      this.trigger('controlsenabled');
+      if (!this.usingNativeControls()) {
+        this.addTechControlsListeners_();
+      }
+    } else {
+      this.removeClass('vjs-controls-enabled');
+      this.addClass('vjs-controls-disabled');
+      /**
+       * @event Player#controlsdisabled
+       * @type {Event}
+       */
+      this.trigger('controlsdisabled');
+      if (!this.usingNativeControls()) {
+        this.removeTechControlsListeners_();
+      }
+    }
+  }
+
+  /**
+   * Toggle native controls on/off. Native controls are the controls built into
+   * devices (e.g. default iPhone controls) or other techs
+   * (e.g. Vimeo Controls)
+   * **This should only be set by the current tech, because only the tech knows
+   * if it can support native controls**
+   *
+   * @fires Player#usingnativecontrols
+   * @fires Player#usingcustomcontrols
+   *
+   * @param {boolean} [bool]
+   *        - true to turn native controls on
+   *        - false to turn native controls off
+   *
+   * @return {boolean|undefined}
+   *         - The current value of native controls when getting
+   *         - Nothing when setting
+   */
+  usingNativeControls(bool) {
+    if (bool === undefined) {
+      return !!this.usingNativeControls_;
+    }
+    bool = !!bool;
+
+    // Don't trigger a change event unless it actually changed
+    if (this.usingNativeControls_ === bool) {
+      return;
+    }
+    this.usingNativeControls_ = bool;
+    if (this.usingNativeControls_) {
+      this.addClass('vjs-using-native-controls');
+
+      /**
+       * player is using the native device controls
+       *
+       * @event Player#usingnativecontrols
+       * @type {Event}
+       */
+      this.trigger('usingnativecontrols');
+    } else {
+      this.removeClass('vjs-using-native-controls');
+
+      /**
+       * player is using the custom HTML controls
+       *
+       * @event Player#usingcustomcontrols
+       * @type {Event}
+       */
+      this.trigger('usingcustomcontrols');
+    }
+  }
+
+  /**
+   * Set or get the current MediaError
+   *
+   * @fires Player#error
+   *
+   * @param  {MediaError|string|number} [err]
+   *         A MediaError or a string/number to be turned
+   *         into a MediaError
+   *
+   * @return {MediaError|null|undefined}
+   *         - The current MediaError when getting (or null)
+   *         - Nothing when setting
+   */
+  error(err) {
+    if (err === undefined) {
+      return this.error_ || null;
+    }
+
+    // allow hooks to modify error object
+    hooks('beforeerror').forEach(hookFunction => {
+      const newErr = hookFunction(this, err);
+      if (!(isObject(newErr) && !Array.isArray(newErr) || typeof newErr === 'string' || typeof newErr === 'number' || newErr === null)) {
+        this.log.error('please return a value that MediaError expects in beforeerror hooks');
+        return;
+      }
+      err = newErr;
+    });
+
+    // Suppress the first error message for no compatible source until
+    // user interaction
+    if (this.options_.suppressNotSupportedError && err && err.code === 4) {
+      const triggerSuppressedError = function () {
+        this.error(err);
+      };
+      this.options_.suppressNotSupportedError = false;
+      this.any(['click', 'touchstart'], triggerSuppressedError);
+      this.one('loadstart', function () {
+        this.off(['click', 'touchstart'], triggerSuppressedError);
+      });
+      return;
+    }
+
+    // restoring to default
+    if (err === null) {
+      this.error_ = null;
+      this.removeClass('vjs-error');
+      if (this.errorDisplay) {
+        this.errorDisplay.close();
+      }
+      return;
+    }
+    this.error_ = new MediaError(err);
+
+    // add the vjs-error classname to the player
+    this.addClass('vjs-error');
+
+    // log the name of the error type and any message
+    // IE11 logs "[object object]" and required you to expand message to see error object
+    log$1.error(`(CODE:${this.error_.code} ${MediaError.errorTypes[this.error_.code]})`, this.error_.message, this.error_);
+
+    /**
+     * @event Player#error
+     * @type {Event}
+     */
+    this.trigger('error');
+
+    // notify hooks of the per player error
+    hooks('error').forEach(hookFunction => hookFunction(this, this.error_));
+    return;
+  }
+
+  /**
+   * Report user activity
+   *
+   * @param {Object} event
+   *        Event object
+   */
+  reportUserActivity(event) {
+    this.userActivity_ = true;
+  }
+
+  /**
+   * Get/set if user is active
+   *
+   * @fires Player#useractive
+   * @fires Player#userinactive
+   *
+   * @param {boolean} [bool]
+   *        - true if the user is active
+   *        - false if the user is inactive
+   *
+   * @return {boolean|undefined}
+   *         - The current value of userActive when getting
+   *         - Nothing when setting
+   */
+  userActive(bool) {
+    if (bool === undefined) {
+      return this.userActive_;
+    }
+    bool = !!bool;
+    if (bool === this.userActive_) {
+      return;
+    }
+    this.userActive_ = bool;
+    if (this.userActive_) {
+      this.userActivity_ = true;
+      this.removeClass('vjs-user-inactive');
+      this.addClass('vjs-user-active');
+      /**
+       * @event Player#useractive
+       * @type {Event}
+       */
+      this.trigger('useractive');
+      return;
+    }
+
+    // Chrome/Safari/IE have bugs where when you change the cursor it can
+    // trigger a mousemove event. This causes an issue when you're hiding
+    // the cursor when the user is inactive, and a mousemove signals user
+    // activity. Making it impossible to go into inactive mode. Specifically
+    // this happens in fullscreen when we really need to hide the cursor.
+    //
+    // When this gets resolved in ALL browsers it can be removed
+    // https://code.google.com/p/chromium/issues/detail?id=103041
+    if (this.tech_) {
+      this.tech_.one('mousemove', function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+      });
+    }
+    this.userActivity_ = false;
+    this.removeClass('vjs-user-active');
+    this.addClass('vjs-user-inactive');
+    /**
+     * @event Player#userinactive
+     * @type {Event}
+     */
+    this.trigger('userinactive');
+  }
+
+  /**
+   * Listen for user activity based on timeout value
+   *
+   * @private
+   */
+  listenForUserActivity_() {
+    let mouseInProgress;
+    let lastMoveX;
+    let lastMoveY;
+    const handleActivity = bind_(this, this.reportUserActivity);
+    const handleMouseMove = function (e) {
+      // #1068 - Prevent mousemove spamming
+      // Chrome Bug: https://code.google.com/p/chromium/issues/detail?id=366970
+      if (e.screenX !== lastMoveX || e.screenY !== lastMoveY) {
+        lastMoveX = e.screenX;
+        lastMoveY = e.screenY;
+        handleActivity();
+      }
+    };
+    const handleMouseDown = function () {
+      handleActivity();
+      // For as long as the they are touching the device or have their mouse down,
+      // we consider them active even if they're not moving their finger or mouse.
+      // So we want to continue to update that they are active
+      this.clearInterval(mouseInProgress);
+      // Setting userActivity=true now and setting the interval to the same time
+      // as the activityCheck interval (250) should ensure we never miss the
+      // next activityCheck
+      mouseInProgress = this.setInterval(handleActivity, 250);
+    };
+    const handleMouseUpAndMouseLeave = function (event) {
+      handleActivity();
+      // Stop the interval that maintains activity if the mouse/touch is down
+      this.clearInterval(mouseInProgress);
+    };
+
+    // Any mouse movement will be considered user activity
+    this.on('mousedown', handleMouseDown);
+    this.on('mousemove', handleMouseMove);
+    this.on('mouseup', handleMouseUpAndMouseLeave);
+    this.on('mouseleave', handleMouseUpAndMouseLeave);
+    const controlBar = this.getChild('controlBar');
+
+    // Fixes bug on Android & iOS where when tapping progressBar (when control bar is displayed)
+    // controlBar would no longer be hidden by default timeout.
+    if (controlBar && !IS_IOS && !IS_ANDROID) {
+      controlBar.on('mouseenter', function (event) {
+        if (this.player().options_.inactivityTimeout !== 0) {
+          this.player().cache_.inactivityTimeout = this.player().options_.inactivityTimeout;
+        }
+        this.player().options_.inactivityTimeout = 0;
+      });
+      controlBar.on('mouseleave', function (event) {
+        this.player().options_.inactivityTimeout = this.player().cache_.inactivityTimeout;
+      });
+    }
+
+    // Listen for keyboard navigation
+    // Shouldn't need to use inProgress interval because of key repeat
+    this.on('keydown', handleActivity);
+    this.on('keyup', handleActivity);
+
+    // Run an interval every 250 milliseconds instead of stuffing everything into
+    // the mousemove/touchmove function itself, to prevent performance degradation.
+    // `this.reportUserActivity` simply sets this.userActivity_ to true, which
+    // then gets picked up by this loop
+    // http://ejohn.org/blog/learning-from-twitter/
+    let inactivityTimeout;
+
+    /** @this Player */
+    const activityCheck = function () {
+      // Check to see if mouse/touch activity has happened
+      if (!this.userActivity_) {
+        return;
+      }
+
+      // Reset the activity tracker
+      this.userActivity_ = false;
+
+      // If the user state was inactive, set the state to active
+      this.userActive(true);
+
+      // Clear any existing inactivity timeout to start the timer over
+      this.clearTimeout(inactivityTimeout);
+      const timeout = this.options_.inactivityTimeout;
+      if (timeout <= 0) {
+        return;
+      }
+
+      // In <timeout> milliseconds, if no more activity has occurred the
+      // user will be considered inactive
+      inactivityTimeout = this.setTimeout(function () {
+        // Protect against the case where the inactivityTimeout can trigger just
+        // before the next user activity is picked up by the activity check loop
+        // causing a flicker
+        if (!this.userActivity_) {
+          this.userActive(false);
+        }
+      }, timeout);
+    };
+    this.setInterval(activityCheck, 250);
+  }
+
+  /**
+   * Gets or sets the current playback rate. A playback rate of
+   * 1.0 represents normal speed and 0.5 would indicate half-speed
+   * playback, for instance.
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-playbackrate
+   *
+   * @param {number} [rate]
+   *       New playback rate to set.
+   *
+   * @return {number|undefined}
+   *         - The current playback rate when getting or 1.0
+   *         - Nothing when setting
+   */
+  playbackRate(rate) {
+    if (rate !== undefined) {
+      // NOTE: this.cache_.lastPlaybackRate is set from the tech handler
+      // that is registered above
+      this.techCall_('setPlaybackRate', rate);
+      return;
+    }
+    if (this.tech_ && this.tech_.featuresPlaybackRate) {
+      return this.cache_.lastPlaybackRate || this.techGet_('playbackRate');
+    }
+    return 1.0;
+  }
+
+  /**
+   * Gets or sets the current default playback rate. A default playback rate of
+   * 1.0 represents normal speed and 0.5 would indicate half-speed playback, for instance.
+   * defaultPlaybackRate will only represent what the initial playbackRate of a video was, not
+   * not the current playbackRate.
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-defaultplaybackrate
+   *
+   * @param {number} [rate]
+   *       New default playback rate to set.
+   *
+   * @return {number|undefined}
+   *         - The default playback rate when getting or 1.0
+   *         - Nothing when setting
+   */
+  defaultPlaybackRate(rate) {
+    if (rate !== undefined) {
+      return this.techCall_('setDefaultPlaybackRate', rate);
+    }
+    if (this.tech_ && this.tech_.featuresPlaybackRate) {
+      return this.techGet_('defaultPlaybackRate');
+    }
+    return 1.0;
+  }
+
+  /**
+   * Gets or sets the audio flag
+   *
+   * @param {boolean} [bool]
+   *        - true signals that this is an audio player
+   *        - false signals that this is not an audio player
+   *
+   * @return {boolean|undefined}
+   *         - The current value of isAudio when getting
+   *         - Nothing when setting
+   */
+  isAudio(bool) {
+    if (bool !== undefined) {
+      this.isAudio_ = !!bool;
+      return;
+    }
+    return !!this.isAudio_;
+  }
+  enableAudioOnlyUI_() {
+    // Update styling immediately to show the control bar so we can get its height
+    this.addClass('vjs-audio-only-mode');
+    const playerChildren = this.children();
+    const controlBar = this.getChild('ControlBar');
+    const controlBarHeight = controlBar && controlBar.currentHeight();
+
+    // Hide all player components except the control bar. Control bar components
+    // needed only for video are hidden with CSS
+    playerChildren.forEach(child => {
+      if (child === controlBar) {
+        return;
+      }
+      if (child.el_ && !child.hasClass('vjs-hidden')) {
+        child.hide();
+        this.audioOnlyCache_.hiddenChildren.push(child);
+      }
+    });
+    this.audioOnlyCache_.playerHeight = this.currentHeight();
+
+    // Set the player height the same as the control bar
+    this.height(controlBarHeight);
+    this.trigger('audioonlymodechange');
+  }
+  disableAudioOnlyUI_() {
+    this.removeClass('vjs-audio-only-mode');
+
+    // Show player components that were previously hidden
+    this.audioOnlyCache_.hiddenChildren.forEach(child => child.show());
+
+    // Reset player height
+    this.height(this.audioOnlyCache_.playerHeight);
+    this.trigger('audioonlymodechange');
+  }
+
+  /**
+   * Get the current audioOnlyMode state or set audioOnlyMode to true or false.
+   *
+   * Setting this to `true` will hide all player components except the control bar,
+   * as well as control bar components needed only for video.
+   *
+   * @param {boolean} [value]
+   *         The value to set audioOnlyMode to.
+   *
+   * @return {Promise|boolean}
+   *        A Promise is returned when setting the state, and a boolean when getting
+   *        the present state
+   */
+  audioOnlyMode(value) {
+    if (typeof value !== 'boolean' || value === this.audioOnlyMode_) {
+      return this.audioOnlyMode_;
+    }
+    this.audioOnlyMode_ = value;
+
+    // Enable Audio Only Mode
+    if (value) {
+      const exitPromises = [];
+
+      // Fullscreen and PiP are not supported in audioOnlyMode, so exit if we need to.
+      if (this.isInPictureInPicture()) {
+        exitPromises.push(this.exitPictureInPicture());
+      }
+      if (this.isFullscreen()) {
+        exitPromises.push(this.exitFullscreen());
+      }
+      if (this.audioPosterMode()) {
+        exitPromises.push(this.audioPosterMode(false));
+      }
+      return Promise.all(exitPromises).then(() => this.enableAudioOnlyUI_());
+    }
+
+    // Disable Audio Only Mode
+    return Promise.resolve().then(() => this.disableAudioOnlyUI_());
+  }
+  enablePosterModeUI_() {
+    // Hide the video element and show the poster image to enable posterModeUI
+    const tech = this.tech_ && this.tech_;
+    tech.hide();
+    this.addClass('vjs-audio-poster-mode');
+    this.trigger('audiopostermodechange');
+  }
+  disablePosterModeUI_() {
+    // Show the video element and hide the poster image to disable posterModeUI
+    const tech = this.tech_ && this.tech_;
+    tech.show();
+    this.removeClass('vjs-audio-poster-mode');
+    this.trigger('audiopostermodechange');
+  }
+
+  /**
+   * Get the current audioPosterMode state or set audioPosterMode to true or false
+   *
+   * @param {boolean} [value]
+   *         The value to set audioPosterMode to.
+   *
+   * @return {Promise|boolean}
+   *         A Promise is returned when setting the state, and a boolean when getting
+   *        the present state
+   */
+  audioPosterMode(value) {
+    if (typeof value !== 'boolean' || value === this.audioPosterMode_) {
+      return this.audioPosterMode_;
+    }
+    this.audioPosterMode_ = value;
+    if (value) {
+      if (this.audioOnlyMode()) {
+        const audioOnlyModePromise = this.audioOnlyMode(false);
+        return audioOnlyModePromise.then(() => {
+          // enable audio poster mode after audio only mode is disabled
+          this.enablePosterModeUI_();
+        });
+      }
+      return Promise.resolve().then(() => {
+        // enable audio poster mode
+        this.enablePosterModeUI_();
+      });
+    }
+    return Promise.resolve().then(() => {
+      // disable audio poster mode
+      this.disablePosterModeUI_();
+    });
+  }
+
+  /**
+   * A helper method for adding a {@link TextTrack} to our
+   * {@link TextTrackList}.
+   *
+   * In addition to the W3C settings we allow adding additional info through options.
+   *
+   * @see http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack
+   *
+   * @param {string} [kind]
+   *        the kind of TextTrack you are adding
+   *
+   * @param {string} [label]
+   *        the label to give the TextTrack label
+   *
+   * @param {string} [language]
+   *        the language to set on the TextTrack
+   *
+   * @return {TextTrack|undefined}
+   *         the TextTrack that was added or undefined
+   *         if there is no tech
+   */
+  addTextTrack(kind, label, language) {
+    if (this.tech_) {
+      return this.tech_.addTextTrack(kind, label, language);
+    }
+  }
+
+  /**
+   * Create a remote {@link TextTrack} and an {@link HTMLTrackElement}.
+   *
+   * @param {Object} options
+   *        Options to pass to {@link HTMLTrackElement} during creation. See
+   *        {@link HTMLTrackElement} for object properties that you should use.
+   *
+   * @param {boolean} [manualCleanup=false] if set to true, the TextTrack will not be removed
+   *                                        from the TextTrackList and HtmlTrackElementList
+   *                                        after a source change
+   *
+   * @return { import('./tracks/html-track-element').default }
+   *         the HTMLTrackElement that was created and added
+   *         to the HtmlTrackElementList and the remote
+   *         TextTrackList
+   *
+   */
+  addRemoteTextTrack(options, manualCleanup) {
+    if (this.tech_) {
+      return this.tech_.addRemoteTextTrack(options, manualCleanup);
+    }
+  }
+
+  /**
+   * Remove a remote {@link TextTrack} from the respective
+   * {@link TextTrackList} and {@link HtmlTrackElementList}.
+   *
+   * @param {Object} track
+   *        Remote {@link TextTrack} to remove
+   *
+   * @return {undefined}
+   *         does not return anything
+   */
+  removeRemoteTextTrack(obj = {}) {
+    let {
+      track
+    } = obj;
+    if (!track) {
+      track = obj;
+    }
+
+    // destructure the input into an object with a track argument, defaulting to arguments[0]
+    // default the whole argument to an empty object if nothing was passed in
+
+    if (this.tech_) {
+      return this.tech_.removeRemoteTextTrack(track);
+    }
+  }
+
+  /**
+   * Gets available media playback quality metrics as specified by the W3C's Media
+   * Playback Quality API.
+   *
+   * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+   *
+   * @return {Object|undefined}
+   *         An object with supported media playback quality metrics or undefined if there
+   *         is no tech or the tech does not support it.
+   */
+  getVideoPlaybackQuality() {
+    return this.techGet_('getVideoPlaybackQuality');
+  }
+
+  /**
+   * Get video width
+   *
+   * @return {number}
+   *         current video width
+   */
+  videoWidth() {
+    return this.tech_ && this.tech_.videoWidth && this.tech_.videoWidth() || 0;
+  }
+
+  /**
+   * Get video height
+   *
+   * @return {number}
+   *         current video height
+   */
+  videoHeight() {
+    return this.tech_ && this.tech_.videoHeight && this.tech_.videoHeight() || 0;
+  }
+
+  /**
+   * Set or get the player's language code.
+   *
+   * Changing the language will trigger
+   * [languagechange]{@link Player#event:languagechange}
+   * which Components can use to update control text.
+   * ClickableComponent will update its control text by default on
+   * [languagechange]{@link Player#event:languagechange}.
+   *
+   * @fires Player#languagechange
+   *
+   * @param {string} [code]
+   *        the language code to set the player to
+   *
+   * @return {string|undefined}
+   *         - The current language code when getting
+   *         - Nothing when setting
+   */
+  language(code) {
+    if (code === undefined) {
+      return this.language_;
+    }
+    if (this.language_ !== String(code).toLowerCase()) {
+      this.language_ = String(code).toLowerCase();
+
+      // during first init, it's possible some things won't be evented
+      if (isEvented(this)) {
+        /**
+        * fires when the player language change
+        *
+        * @event Player#languagechange
+        * @type {Event}
+        */
+        this.trigger('languagechange');
+      }
+    }
+  }
+
+  /**
+   * Get the player's language dictionary
+   * Merge every time, because a newly added plugin might call videojs.addLanguage() at any time
+   * Languages specified directly in the player options have precedence
+   *
+   * @return {Array}
+   *         An array of of supported languages
+   */
+  languages() {
+    return merge$1(Player.prototype.options_.languages, this.languages_);
+  }
+
+  /**
+   * returns a JavaScript object representing the current track
+   * information. **DOES not return it as JSON**
+   *
+   * @return {Object}
+   *         Object representing the current of track info
+   */
+  toJSON() {
+    const options = merge$1(this.options_);
+    const tracks = options.tracks;
+    options.tracks = [];
+    for (let i = 0; i < tracks.length; i++) {
+      let track = tracks[i];
+
+      // deep merge tracks and null out player so no circular references
+      track = merge$1(track);
+      track.player = undefined;
+      options.tracks[i] = track;
+    }
+    return options;
+  }
+
+  /**
+   * Creates a simple modal dialog (an instance of the {@link ModalDialog}
+   * component) that immediately overlays the player with arbitrary
+   * content and removes itself when closed.
+   *
+   * @param {string|Function|Element|Array|null} content
+   *        Same as {@link ModalDialog#content}'s param of the same name.
+   *        The most straight-forward usage is to provide a string or DOM
+   *        element.
+   *
+   * @param {Object} [options]
+   *        Extra options which will be passed on to the {@link ModalDialog}.
+   *
+   * @return {ModalDialog}
+   *         the {@link ModalDialog} that was created
+   */
+  createModal(content, options) {
+    options = options || {};
+    options.content = content || '';
+    const modal = new ModalDialog(this, options);
+    this.addChild(modal);
+    modal.on('dispose', () => {
+      this.removeChild(modal);
+    });
+    modal.open();
+    return modal;
+  }
+
+  /**
+   * Change breakpoint classes when the player resizes.
+   *
+   * @private
+   */
+  updateCurrentBreakpoint_() {
+    if (!this.responsive()) {
+      return;
+    }
+    const currentBreakpoint = this.currentBreakpoint();
+    const currentWidth = this.currentWidth();
+    for (let i = 0; i < BREAKPOINT_ORDER.length; i++) {
+      const candidateBreakpoint = BREAKPOINT_ORDER[i];
+      const maxWidth = this.breakpoints_[candidateBreakpoint];
+      if (currentWidth <= maxWidth) {
+        // The current breakpoint did not change, nothing to do.
+        if (currentBreakpoint === candidateBreakpoint) {
+          return;
+        }
+
+        // Only remove a class if there is a current breakpoint.
+        if (currentBreakpoint) {
+          this.removeClass(BREAKPOINT_CLASSES[currentBreakpoint]);
+        }
+        this.addClass(BREAKPOINT_CLASSES[candidateBreakpoint]);
+        this.breakpoint_ = candidateBreakpoint;
+        break;
+      }
+    }
+  }
+
+  /**
+   * Removes the current breakpoint.
+   *
+   * @private
+   */
+  removeCurrentBreakpoint_() {
+    const className = this.currentBreakpointClass();
+    this.breakpoint_ = '';
+    if (className) {
+      this.removeClass(className);
+    }
+  }
+
+  /**
+   * Get or set breakpoints on the player.
+   *
+   * Calling this method with an object or `true` will remove any previous
+   * custom breakpoints and start from the defaults again.
+   *
+   * @param  {Object|boolean} [breakpoints]
+   *         If an object is given, it can be used to provide custom
+   *         breakpoints. If `true` is given, will set default breakpoints.
+   *         If this argument is not given, will simply return the current
+   *         breakpoints.
+   *
+   * @param  {number} [breakpoints.tiny]
+   *         The maximum width for the "vjs-layout-tiny" class.
+   *
+   * @param  {number} [breakpoints.xsmall]
+   *         The maximum width for the "vjs-layout-x-small" class.
+   *
+   * @param  {number} [breakpoints.small]
+   *         The maximum width for the "vjs-layout-small" class.
+   *
+   * @param  {number} [breakpoints.medium]
+   *         The maximum width for the "vjs-layout-medium" class.
+   *
+   * @param  {number} [breakpoints.large]
+   *         The maximum width for the "vjs-layout-large" class.
+   *
+   * @param  {number} [breakpoints.xlarge]
+   *         The maximum width for the "vjs-layout-x-large" class.
+   *
+   * @param  {number} [breakpoints.huge]
+   *         The maximum width for the "vjs-layout-huge" class.
+   *
+   * @return {Object}
+   *         An object mapping breakpoint names to maximum width values.
+   */
+  breakpoints(breakpoints) {
+    // Used as a getter.
+    if (breakpoints === undefined) {
+      return Object.assign(this.breakpoints_);
+    }
+    this.breakpoint_ = '';
+    this.breakpoints_ = Object.assign({}, DEFAULT_BREAKPOINTS, breakpoints);
+
+    // When breakpoint definitions change, we need to update the currently
+    // selected breakpoint.
+    this.updateCurrentBreakpoint_();
+
+    // Clone the breakpoints before returning.
+    return Object.assign(this.breakpoints_);
+  }
+
+  /**
+   * Get or set a flag indicating whether or not this player should adjust
+   * its UI based on its dimensions.
+   *
+   * @param  {boolean} [value]
+   *         Should be `true` if the player should adjust its UI based on its
+   *         dimensions; otherwise, should be `false`.
+   *
+   * @return {boolean|undefined}
+   *         Will be `true` if this player should adjust its UI based on its
+   *         dimensions; otherwise, will be `false`.
+   *         Nothing if setting
+   */
+  responsive(value) {
+    // Used as a getter.
+    if (value === undefined) {
+      return this.responsive_;
+    }
+    value = Boolean(value);
+    const current = this.responsive_;
+
+    // Nothing changed.
+    if (value === current) {
+      return;
+    }
+
+    // The value actually changed, set it.
+    this.responsive_ = value;
+
+    // Start listening for breakpoints and set the initial breakpoint if the
+    // player is now responsive.
+    if (value) {
+      this.on('playerresize', this.boundUpdateCurrentBreakpoint_);
+      this.updateCurrentBreakpoint_();
+
+      // Stop listening for breakpoints if the player is no longer responsive.
+    } else {
+      this.off('playerresize', this.boundUpdateCurrentBreakpoint_);
+      this.removeCurrentBreakpoint_();
+    }
+    return value;
+  }
+
+  /**
+   * Get current breakpoint name, if any.
+   *
+   * @return {string}
+   *         If there is currently a breakpoint set, returns a the key from the
+   *         breakpoints object matching it. Otherwise, returns an empty string.
+   */
+  currentBreakpoint() {
+    return this.breakpoint_;
+  }
+
+  /**
+   * Get the current breakpoint class name.
+   *
+   * @return {string}
+   *         The matching class name (e.g. `"vjs-layout-tiny"` or
+   *         `"vjs-layout-large"`) for the current breakpoint. Empty string if
+   *         there is no current breakpoint.
+   */
+  currentBreakpointClass() {
+    return BREAKPOINT_CLASSES[this.breakpoint_] || '';
+  }
+
+  /**
+   * An object that describes a single piece of media.
+   *
+   * Properties that are not part of this type description will be retained; so,
+   * this can be viewed as a generic metadata storage mechanism as well.
+   *
+   * @see      {@link https://wicg.github.io/mediasession/#the-mediametadata-interface}
+   * @typedef  {Object} Player~MediaObject
+   *
+   * @property {string} [album]
+   *           Unused, except if this object is passed to the `MediaSession`
+   *           API.
+   *
+   * @property {string} [artist]
+   *           Unused, except if this object is passed to the `MediaSession`
+   *           API.
+   *
+   * @property {Object[]} [artwork]
+   *           Unused, except if this object is passed to the `MediaSession`
+   *           API. If not specified, will be populated via the `poster`, if
+   *           available.
+   *
+   * @property {string} [poster]
+   *           URL to an image that will display before playback.
+   *
+   * @property {Tech~SourceObject|Tech~SourceObject[]|string} [src]
+   *           A single source object, an array of source objects, or a string
+   *           referencing a URL to a media source. It is _highly recommended_
+   *           that an object or array of objects is used here, so that source
+   *           selection algorithms can take the `type` into account.
+   *
+   * @property {string} [title]
+   *           Unused, except if this object is passed to the `MediaSession`
+   *           API.
+   *
+   * @property {Object[]} [textTracks]
+   *           An array of objects to be used to create text tracks, following
+   *           the {@link https://www.w3.org/TR/html50/embedded-content-0.html#the-track-element|native track element format}.
+   *           For ease of removal, these will be created as "remote" text
+   *           tracks and set to automatically clean up on source changes.
+   *
+   *           These objects may have properties like `src`, `kind`, `label`,
+   *           and `language`, see {@link Tech#createRemoteTextTrack}.
+   */
+
+  /**
+   * Populate the player using a {@link Player~MediaObject|MediaObject}.
+   *
+   * @param  {Player~MediaObject} media
+   *         A media object.
+   *
+   * @param  {Function} ready
+   *         A callback to be called when the player is ready.
+   */
+  loadMedia(media, ready) {
+    if (!media || typeof media !== 'object') {
+      return;
+    }
+    const crossOrigin = this.crossOrigin();
+    this.reset();
+
+    // Clone the media object so it cannot be mutated from outside.
+    this.cache_.media = merge$1(media);
+    const {
+      artist,
+      artwork,
+      description,
+      poster,
+      src,
+      textTracks,
+      title
+    } = this.cache_.media;
+
+    // If `artwork` is not given, create it using `poster`.
+    if (!artwork && poster) {
+      this.cache_.media.artwork = [{
+        src: poster,
+        type: getMimetype(poster)
+      }];
+    }
+    if (crossOrigin) {
+      this.crossOrigin(crossOrigin);
+    }
+    if (src) {
+      this.src(src);
+    }
+    if (poster) {
+      this.poster(poster);
+    }
+    if (Array.isArray(textTracks)) {
+      textTracks.forEach(tt => this.addRemoteTextTrack(tt, false));
+    }
+    if (this.titleBar) {
+      this.titleBar.update({
+        title,
+        description: description || artist || ''
+      });
+    }
+    this.ready(ready);
+  }
+
+  /**
+   * Get a clone of the current {@link Player~MediaObject} for this player.
+   *
+   * If the `loadMedia` method has not been used, will attempt to return a
+   * {@link Player~MediaObject} based on the current state of the player.
+   *
+   * @return {Player~MediaObject}
+   */
+  getMedia() {
+    if (!this.cache_.media) {
+      const poster = this.poster();
+      const src = this.currentSources();
+      const textTracks = Array.prototype.map.call(this.remoteTextTracks(), tt => ({
+        kind: tt.kind,
+        label: tt.label,
+        language: tt.language,
+        src: tt.src
+      }));
+      const media = {
+        src,
+        textTracks
+      };
+      if (poster) {
+        media.poster = poster;
+        media.artwork = [{
+          src: media.poster,
+          type: getMimetype(media.poster)
+        }];
+      }
+      return media;
+    }
+    return merge$1(this.cache_.media);
+  }
+
+  /**
+   * Gets tag settings
+   *
+   * @param {Element} tag
+   *        The player tag
+   *
+   * @return {Object}
+   *         An object containing all of the settings
+   *         for a player tag
+   */
+  static getTagSettings(tag) {
+    const baseOptions = {
+      sources: [],
+      tracks: []
+    };
+    const tagOptions = getAttributes(tag);
+    const dataSetup = tagOptions['data-setup'];
+    if (hasClass(tag, 'vjs-fill')) {
+      tagOptions.fill = true;
+    }
+    if (hasClass(tag, 'vjs-fluid')) {
+      tagOptions.fluid = true;
+    }
+
+    // Check if data-setup attr exists.
+    if (dataSetup !== null) {
+      // Parse options JSON
+      // If empty string, make it a parsable json object.
+      const [err, data] = safeParseTuple__default["default"](dataSetup || '{}');
+      if (err) {
+        log$1.error(err);
+      }
+      Object.assign(tagOptions, data);
+    }
+    Object.assign(baseOptions, tagOptions);
+
+    // Get tag children settings
+    if (tag.hasChildNodes()) {
+      const children = tag.childNodes;
+      for (let i = 0, j = children.length; i < j; i++) {
+        const child = children[i];
+        // Change case needed: http://ejohn.org/blog/nodename-case-sensitivity/
+        const childName = child.nodeName.toLowerCase();
+        if (childName === 'source') {
+          baseOptions.sources.push(getAttributes(child));
+        } else if (childName === 'track') {
+          baseOptions.tracks.push(getAttributes(child));
+        }
+      }
+    }
+    return baseOptions;
+  }
+
+  /**
+   * Set debug mode to enable/disable logs at info level.
+   *
+   * @param {boolean} enabled
+   * @fires Player#debugon
+   * @fires Player#debugoff
+   * @return {boolean|undefined}
+   */
+  debug(enabled) {
+    if (enabled === undefined) {
+      return this.debugEnabled_;
+    }
+    if (enabled) {
+      this.trigger('debugon');
+      this.previousLogLevel_ = this.log.level;
+      this.log.level('debug');
+      this.debugEnabled_ = true;
+    } else {
+      this.trigger('debugoff');
+      this.log.level(this.previousLogLevel_);
+      this.previousLogLevel_ = undefined;
+      this.debugEnabled_ = false;
+    }
+  }
+
+  /**
+   * Set or get current playback rates.
+   * Takes an array and updates the playback rates menu with the new items.
+   * Pass in an empty array to hide the menu.
+   * Values other than arrays are ignored.
+   *
+   * @fires Player#playbackrateschange
+   * @param {number[]} [newRates]
+   *                   The new rates that the playback rates menu should update to.
+   *                   An empty array will hide the menu
+   * @return {number[]} When used as a getter will return the current playback rates
+   */
+  playbackRates(newRates) {
+    if (newRates === undefined) {
+      return this.cache_.playbackRates;
+    }
+
+    // ignore any value that isn't an array
+    if (!Array.isArray(newRates)) {
+      return;
+    }
+
+    // ignore any arrays that don't only contain numbers
+    if (!newRates.every(rate => typeof rate === 'number')) {
+      return;
+    }
+    this.cache_.playbackRates = newRates;
+
+    /**
+    * fires when the playback rates in a player are changed
+    *
+    * @event Player#playbackrateschange
+    * @type {Event}
+    */
+    this.trigger('playbackrateschange');
+  }
+}
+
+/**
+ * Get the {@link VideoTrackList}
+ *
+ * @link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist
+ *
+ * @return {VideoTrackList}
+ *         the current video track list
+ *
+ * @method Player.prototype.videoTracks
+ */
+
+/**
+ * Get the {@link AudioTrackList}
+ *
+ * @link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist
+ *
+ * @return {AudioTrackList}
+ *         the current audio track list
+ *
+ * @method Player.prototype.audioTracks
+ */
+
+/**
+ * Get the {@link TextTrackList}
+ *
+ * @link http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-texttracks
+ *
+ * @return {TextTrackList}
+ *         the current text track list
+ *
+ * @method Player.prototype.textTracks
+ */
+
+/**
+ * Get the remote {@link TextTrackList}
+ *
+ * @return {TextTrackList}
+ *         The current remote text track list
+ *
+ * @method Player.prototype.remoteTextTracks
+ */
+
+/**
+ * Get the remote {@link HtmlTrackElementList} tracks.
+ *
+ * @return {HtmlTrackElementList}
+ *         The current remote text track element list
+ *
+ * @method Player.prototype.remoteTextTrackEls
+ */
+
+ALL.names.forEach(function (name) {
+  const props = ALL[name];
+  Player.prototype[props.getterName] = function () {
+    if (this.tech_) {
+      return this.tech_[props.getterName]();
+    }
+
+    // if we have not yet loadTech_, we create {video,audio,text}Tracks_
+    // these will be passed to the tech during loading
+    this[props.privateName] = this[props.privateName] || new props.ListClass();
+    return this[props.privateName];
+  };
+});
+
+/**
+ * Get or set the `Player`'s crossorigin option. For the HTML5 player, this
+ * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+ * behavior.
+ *
+ * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+ *
+ * @param {string} [value]
+ *        The value to set the `Player`'s crossorigin to. If an argument is
+ *        given, must be one of `anonymous` or `use-credentials`.
+ *
+ * @return {string|undefined}
+ *         - The current crossorigin value of the `Player` when getting.
+ *         - undefined when setting
+ */
+Player.prototype.crossorigin = Player.prototype.crossOrigin;
+
+/**
+ * Global enumeration of players.
+ *
+ * The keys are the player IDs and the values are either the {@link Player}
+ * instance or `null` for disposed players.
+ *
+ * @type {Object}
+ */
+Player.players = {};
+const navigator = window__default["default"].navigator;
+
+/*
+ * Player instance options, surfaced using options
+ * options = Player.prototype.options_
+ * Make changes in options, not here.
+ *
+ * @type {Object}
+ * @private
+ */
+Player.prototype.options_ = {
+  // Default order of fallback technology
+  techOrder: Tech.defaultTechOrder_,
+  html5: {},
+  // enable sourceset by default
+  enableSourceset: true,
+  // default inactivity timeout
+  inactivityTimeout: 2000,
+  // default playback rates
+  playbackRates: [],
+  // Add playback rate selection by adding rates
+  // 'playbackRates': [0.5, 1, 1.5, 2],
+  liveui: false,
+  // Included control sets
+  children: ['mediaLoader', 'posterImage', 'titleBar', 'textTrackDisplay', 'loadingSpinner', 'bigPlayButton', 'liveTracker', 'controlBar', 'errorDisplay', 'textTrackSettings', 'resizeManager'],
+  language: navigator && (navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language) || 'en',
+  // locales and their language translations
+  languages: {},
+  // Default message to show when a video cannot be played.
+  notSupportedMessage: 'No compatible source was found for this media.',
+  normalizeAutoplay: false,
+  fullscreen: {
+    options: {
+      navigationUI: 'hide'
+    }
+  },
+  breakpoints: {},
+  responsive: false,
+  audioOnlyMode: false,
+  audioPosterMode: false,
+  // Default smooth seeking to false
+  enableSmoothSeeking: false
+};
+TECH_EVENTS_RETRIGGER.forEach(function (event) {
+  Player.prototype[`handleTech${toTitleCase$1(event)}_`] = function () {
+    return this.trigger(event);
+  };
+});
+
+/**
+ * Fired when the player has initial duration and dimension information
+ *
+ * @event Player#loadedmetadata
+ * @type {Event}
+ */
+
+/**
+ * Fired when the player has downloaded data at the current playback position
+ *
+ * @event Player#loadeddata
+ * @type {Event}
+ */
+
+/**
+ * Fired when the current playback position has changed *
+ * During playback this is fired every 15-250 milliseconds, depending on the
+ * playback technology in use.
+ *
+ * @event Player#timeupdate
+ * @type {Event}
+ */
+
+/**
+ * Fired when the volume changes
+ *
+ * @event Player#volumechange
+ * @type {Event}
+ */
+
+/**
+ * Reports whether or not a player has a plugin available.
+ *
+ * This does not report whether or not the plugin has ever been initialized
+ * on this player. For that, [usingPlugin]{@link Player#usingPlugin}.
+ *
+ * @method Player#hasPlugin
+ * @param  {string}  name
+ *         The name of a plugin.
+ *
+ * @return {boolean}
+ *         Whether or not this player has the requested plugin available.
+ */
+
+/**
+ * Reports whether or not a player is using a plugin by name.
+ *
+ * For basic plugins, this only reports whether the plugin has _ever_ been
+ * initialized on this player.
+ *
+ * @method Player#usingPlugin
+ * @param  {string} name
+ *         The name of a plugin.
+ *
+ * @return {boolean}
+ *         Whether or not this player is using the requested plugin.
+ */
+
+Component$1.registerComponent('Player', Player);
+
+/**
+ * @file plugin.js
+ */
+
+/**
+ * The base plugin name.
+ *
+ * @private
+ * @constant
+ * @type {string}
+ */
+const BASE_PLUGIN_NAME = 'plugin';
+
+/**
+ * The key on which a player's active plugins cache is stored.
+ *
+ * @private
+ * @constant
+ * @type     {string}
+ */
+const PLUGIN_CACHE_KEY = 'activePlugins_';
+
+/**
+ * Stores registered plugins in a private space.
+ *
+ * @private
+ * @type    {Object}
+ */
+const pluginStorage = {};
+
+/**
+ * Reports whether or not a plugin has been registered.
+ *
+ * @private
+ * @param   {string} name
+ *          The name of a plugin.
+ *
+ * @return {boolean}
+ *          Whether or not the plugin has been registered.
+ */
+const pluginExists = name => pluginStorage.hasOwnProperty(name);
+
+/**
+ * Get a single registered plugin by name.
+ *
+ * @private
+ * @param   {string} name
+ *          The name of a plugin.
+ *
+ * @return {typeof Plugin|Function|undefined}
+ *          The plugin (or undefined).
+ */
+const getPlugin = name => pluginExists(name) ? pluginStorage[name] : undefined;
+
+/**
+ * Marks a plugin as "active" on a player.
+ *
+ * Also, ensures that the player has an object for tracking active plugins.
+ *
+ * @private
+ * @param   {Player} player
+ *          A Video.js player instance.
+ *
+ * @param   {string} name
+ *          The name of a plugin.
+ */
+const markPluginAsActive = (player, name) => {
+  player[PLUGIN_CACHE_KEY] = player[PLUGIN_CACHE_KEY] || {};
+  player[PLUGIN_CACHE_KEY][name] = true;
+};
+
+/**
+ * Triggers a pair of plugin setup events.
+ *
+ * @private
+ * @param  {Player} player
+ *         A Video.js player instance.
+ *
+ * @param  {PluginEventHash} hash
+ *         A plugin event hash.
+ *
+ * @param  {boolean} [before]
+ *         If true, prefixes the event name with "before". In other words,
+ *         use this to trigger "beforepluginsetup" instead of "pluginsetup".
+ */
+const triggerSetupEvent = (player, hash, before) => {
+  const eventName = (before ? 'before' : '') + 'pluginsetup';
+  player.trigger(eventName, hash);
+  player.trigger(eventName + ':' + hash.name, hash);
+};
+
+/**
+ * Takes a basic plugin function and returns a wrapper function which marks
+ * on the player that the plugin has been activated.
+ *
+ * @private
+ * @param   {string} name
+ *          The name of the plugin.
+ *
+ * @param   {Function} plugin
+ *          The basic plugin.
+ *
+ * @return {Function}
+ *          A wrapper function for the given plugin.
+ */
+const createBasicPlugin = function (name, plugin) {
+  const basicPluginWrapper = function () {
+    // We trigger the "beforepluginsetup" and "pluginsetup" events on the player
+    // regardless, but we want the hash to be consistent with the hash provided
+    // for advanced plugins.
+    //
+    // The only potentially counter-intuitive thing here is the `instance` in
+    // the "pluginsetup" event is the value returned by the `plugin` function.
+    triggerSetupEvent(this, {
+      name,
+      plugin,
+      instance: null
+    }, true);
+    const instance = plugin.apply(this, arguments);
+    markPluginAsActive(this, name);
+    triggerSetupEvent(this, {
+      name,
+      plugin,
+      instance
+    });
+    return instance;
+  };
+  Object.keys(plugin).forEach(function (prop) {
+    basicPluginWrapper[prop] = plugin[prop];
+  });
+  return basicPluginWrapper;
+};
+
+/**
+ * Takes a plugin sub-class and returns a factory function for generating
+ * instances of it.
+ *
+ * This factory function will replace itself with an instance of the requested
+ * sub-class of Plugin.
+ *
+ * @private
+ * @param   {string} name
+ *          The name of the plugin.
+ *
+ * @param   {Plugin} PluginSubClass
+ *          The advanced plugin.
+ *
+ * @return {Function}
+ */
+const createPluginFactory = (name, PluginSubClass) => {
+  // Add a `name` property to the plugin prototype so that each plugin can
+  // refer to itself by name.
+  PluginSubClass.prototype.name = name;
+  return function (...args) {
+    triggerSetupEvent(this, {
+      name,
+      plugin: PluginSubClass,
+      instance: null
+    }, true);
+    const instance = new PluginSubClass(...[this, ...args]);
+
+    // The plugin is replaced by a function that returns the current instance.
+    this[name] = () => instance;
+    triggerSetupEvent(this, instance.getEventHash());
+    return instance;
+  };
+};
+
+/**
+ * Parent class for all advanced plugins.
+ *
+ * @mixes   module:evented~EventedMixin
+ * @mixes   module:stateful~StatefulMixin
+ * @fires   Player#beforepluginsetup
+ * @fires   Player#beforepluginsetup:$name
+ * @fires   Player#pluginsetup
+ * @fires   Player#pluginsetup:$name
+ * @listens Player#dispose
+ * @throws  {Error}
+ *          If attempting to instantiate the base {@link Plugin} class
+ *          directly instead of via a sub-class.
+ */
+class Plugin {
+  /**
+   * Creates an instance of this class.
+   *
+   * Sub-classes should call `super` to ensure plugins are properly initialized.
+   *
+   * @param {Player} player
+   *        A Video.js player instance.
+   */
+  constructor(player) {
+    if (this.constructor === Plugin) {
+      throw new Error('Plugin must be sub-classed; not directly instantiated.');
+    }
+    this.player = player;
+    if (!this.log) {
+      this.log = this.player.log.createLogger(this.name);
+    }
+
+    // Make this object evented, but remove the added `trigger` method so we
+    // use the prototype version instead.
+    evented(this);
+    delete this.trigger;
+    stateful(this, this.constructor.defaultState);
+    markPluginAsActive(player, this.name);
+
+    // Auto-bind the dispose method so we can use it as a listener and unbind
+    // it later easily.
+    this.dispose = this.dispose.bind(this);
+
+    // If the player is disposed, dispose the plugin.
+    player.on('dispose', this.dispose);
+  }
+
+  /**
+   * Get the version of the plugin that was set on <pluginName>.VERSION
+   */
+  version() {
+    return this.constructor.VERSION;
+  }
+
+  /**
+   * Each event triggered by plugins includes a hash of additional data with
+   * conventional properties.
+   *
+   * This returns that object or mutates an existing hash.
+   *
+   * @param   {Object} [hash={}]
+   *          An object to be used as event an event hash.
+   *
+   * @return {PluginEventHash}
+   *          An event hash object with provided properties mixed-in.
+   */
+  getEventHash(hash = {}) {
+    hash.name = this.name;
+    hash.plugin = this.constructor;
+    hash.instance = this;
+    return hash;
+  }
+
+  /**
+   * Triggers an event on the plugin object and overrides
+   * {@link module:evented~EventedMixin.trigger|EventedMixin.trigger}.
+   *
+   * @param   {string|Object} event
+   *          An event type or an object with a type property.
+   *
+   * @param   {Object} [hash={}]
+   *          Additional data hash to merge with a
+   *          {@link PluginEventHash|PluginEventHash}.
+   *
+   * @return {boolean}
+   *          Whether or not default was prevented.
+   */
+  trigger(event, hash = {}) {
+    return trigger(this.eventBusEl_, event, this.getEventHash(hash));
+  }
+
+  /**
+   * Handles "statechanged" events on the plugin. No-op by default, override by
+   * subclassing.
+   *
+   * @abstract
+   * @param    {Event} e
+   *           An event object provided by a "statechanged" event.
+   *
+   * @param    {Object} e.changes
+   *           An object describing changes that occurred with the "statechanged"
+   *           event.
+   */
+  handleStateChanged(e) {}
+
+  /**
+   * Disposes a plugin.
+   *
+   * Subclasses can override this if they want, but for the sake of safety,
+   * it's probably best to subscribe the "dispose" event.
+   *
+   * @fires Plugin#dispose
+   */
+  dispose() {
+    const {
+      name,
+      player
+    } = this;
+
+    /**
+     * Signals that a advanced plugin is about to be disposed.
+     *
+     * @event Plugin#dispose
+     * @type  {Event}
+     */
+    this.trigger('dispose');
+    this.off();
+    player.off('dispose', this.dispose);
+
+    // Eliminate any possible sources of leaking memory by clearing up
+    // references between the player and the plugin instance and nulling out
+    // the plugin's state and replacing methods with a function that throws.
+    player[PLUGIN_CACHE_KEY][name] = false;
+    this.player = this.state = null;
+
+    // Finally, replace the plugin name on the player with a new factory
+    // function, so that the plugin is ready to be set up again.
+    player[name] = createPluginFactory(name, pluginStorage[name]);
+  }
+
+  /**
+   * Determines if a plugin is a basic plugin (i.e. not a sub-class of `Plugin`).
+   *
+   * @param   {string|Function} plugin
+   *          If a string, matches the name of a plugin. If a function, will be
+   *          tested directly.
+   *
+   * @return {boolean}
+   *          Whether or not a plugin is a basic plugin.
+   */
+  static isBasic(plugin) {
+    const p = typeof plugin === 'string' ? getPlugin(plugin) : plugin;
+    return typeof p === 'function' && !Plugin.prototype.isPrototypeOf(p.prototype);
+  }
+
+  /**
+   * Register a Video.js plugin.
+   *
+   * @param   {string} name
+   *          The name of the plugin to be registered. Must be a string and
+   *          must not match an existing plugin or a method on the `Player`
+   *          prototype.
+   *
+   * @param   {typeof Plugin|Function} plugin
+   *          A sub-class of `Plugin` or a function for basic plugins.
+   *
+   * @return {typeof Plugin|Function}
+   *          For advanced plugins, a factory function for that plugin. For
+   *          basic plugins, a wrapper function that initializes the plugin.
+   */
+  static registerPlugin(name, plugin) {
+    if (typeof name !== 'string') {
+      throw new Error(`Illegal plugin name, "${name}", must be a string, was ${typeof name}.`);
+    }
+    if (pluginExists(name)) {
+      log$1.warn(`A plugin named "${name}" already exists. You may want to avoid re-registering plugins!`);
+    } else if (Player.prototype.hasOwnProperty(name)) {
+      throw new Error(`Illegal plugin name, "${name}", cannot share a name with an existing player method!`);
+    }
+    if (typeof plugin !== 'function') {
+      throw new Error(`Illegal plugin for "${name}", must be a function, was ${typeof plugin}.`);
+    }
+    pluginStorage[name] = plugin;
+
+    // Add a player prototype method for all sub-classed plugins (but not for
+    // the base Plugin class).
+    if (name !== BASE_PLUGIN_NAME) {
+      if (Plugin.isBasic(plugin)) {
+        Player.prototype[name] = createBasicPlugin(name, plugin);
+      } else {
+        Player.prototype[name] = createPluginFactory(name, plugin);
+      }
+    }
+    return plugin;
+  }
+
+  /**
+   * De-register a Video.js plugin.
+   *
+   * @param  {string} name
+   *         The name of the plugin to be de-registered. Must be a string that
+   *         matches an existing plugin.
+   *
+   * @throws {Error}
+   *         If an attempt is made to de-register the base plugin.
+   */
+  static deregisterPlugin(name) {
+    if (name === BASE_PLUGIN_NAME) {
+      throw new Error('Cannot de-register base plugin.');
+    }
+    if (pluginExists(name)) {
+      delete pluginStorage[name];
+      delete Player.prototype[name];
+    }
+  }
+
+  /**
+   * Gets an object containing multiple Video.js plugins.
+   *
+   * @param   {Array} [names]
+   *          If provided, should be an array of plugin names. Defaults to _all_
+   *          plugin names.
+   *
+   * @return {Object|undefined}
+   *          An object containing plugin(s) associated with their name(s) or
+   *          `undefined` if no matching plugins exist).
+   */
+  static getPlugins(names = Object.keys(pluginStorage)) {
+    let result;
+    names.forEach(name => {
+      const plugin = getPlugin(name);
+      if (plugin) {
+        result = result || {};
+        result[name] = plugin;
+      }
+    });
+    return result;
+  }
+
+  /**
+   * Gets a plugin's version, if available
+   *
+   * @param   {string} name
+   *          The name of a plugin.
+   *
+   * @return {string}
+   *          The plugin's version or an empty string.
+   */
+  static getPluginVersion(name) {
+    const plugin = getPlugin(name);
+    return plugin && plugin.VERSION || '';
+  }
+}
+
+/**
+ * Gets a plugin by name if it exists.
+ *
+ * @static
+ * @method   getPlugin
+ * @memberOf Plugin
+ * @param    {string} name
+ *           The name of a plugin.
+ *
+ * @returns  {typeof Plugin|Function|undefined}
+ *           The plugin (or `undefined`).
+ */
+Plugin.getPlugin = getPlugin;
+
+/**
+ * The name of the base plugin class as it is registered.
+ *
+ * @type {string}
+ */
+Plugin.BASE_PLUGIN_NAME = BASE_PLUGIN_NAME;
+Plugin.registerPlugin(BASE_PLUGIN_NAME, Plugin);
+
+/**
+ * Documented in player.js
+ *
+ * @ignore
+ */
+Player.prototype.usingPlugin = function (name) {
+  return !!this[PLUGIN_CACHE_KEY] && this[PLUGIN_CACHE_KEY][name] === true;
+};
+
+/**
+ * Documented in player.js
+ *
+ * @ignore
+ */
+Player.prototype.hasPlugin = function (name) {
+  return !!pluginExists(name);
+};
+
+/**
+ * Signals that a plugin is about to be set up on a player.
+ *
+ * @event    Player#beforepluginsetup
+ * @type     {PluginEventHash}
+ */
+
+/**
+ * Signals that a plugin is about to be set up on a player - by name. The name
+ * is the name of the plugin.
+ *
+ * @event    Player#beforepluginsetup:$name
+ * @type     {PluginEventHash}
+ */
+
+/**
+ * Signals that a plugin has just been set up on a player.
+ *
+ * @event    Player#pluginsetup
+ * @type     {PluginEventHash}
+ */
+
+/**
+ * Signals that a plugin has just been set up on a player - by name. The name
+ * is the name of the plugin.
+ *
+ * @event    Player#pluginsetup:$name
+ * @type     {PluginEventHash}
+ */
+
+/**
+ * @typedef  {Object} PluginEventHash
+ *
+ * @property {string} instance
+ *           For basic plugins, the return value of the plugin function. For
+ *           advanced plugins, the plugin instance on which the event is fired.
+ *
+ * @property {string} name
+ *           The name of the plugin.
+ *
+ * @property {string} plugin
+ *           For basic plugins, the plugin function. For advanced plugins, the
+ *           plugin class/constructor.
+ */
+
+/**
+ * @file deprecate.js
+ * @module deprecate
+ */
+
+/**
+ * Decorate a function with a deprecation message the first time it is called.
+ *
+ * @param  {string}   message
+ *         A deprecation message to log the first time the returned function
+ *         is called.
+ *
+ * @param  {Function} fn
+ *         The function to be deprecated.
+ *
+ * @return {Function}
+ *         A wrapper function that will log a deprecation warning the first
+ *         time it is called. The return value will be the return value of
+ *         the wrapped function.
+ */
+function deprecate(message, fn) {
+  let warned = false;
+  return function (...args) {
+    if (!warned) {
+      log$1.warn(message);
+    }
+    warned = true;
+    return fn.apply(this, args);
+  };
+}
+
+/**
+ * Internal function used to mark a function as deprecated in the next major
+ * version with consistent messaging.
+ *
+ * @param  {number}   major   The major version where it will be removed
+ * @param  {string}   oldName The old function name
+ * @param  {string}   newName The new function name
+ * @param  {Function} fn      The function to deprecate
+ * @return {Function}         The decorated function
+ */
+function deprecateForMajor(major, oldName, newName, fn) {
+  return deprecate(`${oldName} is deprecated and will be removed in ${major}.0; please use ${newName} instead.`, fn);
+}
+
+var VjsErrors = {
+  UnsupportedSidxContainer: 'unsupported-sidx-container-error',
+  DashManifestSidxParsingError: 'dash-manifest-sidx-parsing-error',
+  HlsPlaylistRequestError: 'hls-playlist-request-error',
+  SegmentUnsupportedMediaFormat: 'segment-unsupported-media-format-error',
+  UnsupportedMediaInitialization: 'unsupported-media-initialization-error',
+  SegmentSwitchError: 'segment-switch-error',
+  SegmentExceedsSourceBufferQuota: 'segment-exceeds-source-buffer-quota-error',
+  SegmentAppendError: 'segment-append-error',
+  VttLoadError: 'vtt-load-error',
+  VttCueParsingError: 'vtt-cue-parsing-error',
+  // Errors used in contrib-ads:
+  AdsBeforePrerollError: 'ads-before-preroll-error',
+  AdsPrerollError: 'ads-preroll-error',
+  AdsMidrollError: 'ads-midroll-error',
+  AdsPostrollError: 'ads-postroll-error',
+  AdsMacroReplacementFailed: 'ads-macro-replacement-failed',
+  AdsResumeContentFailed: 'ads-resume-content-failed',
+  // Errors used in contrib-eme:
+  EMEFailedToRequestMediaKeySystemAccess: 'eme-failed-request-media-key-system-access',
+  EMEFailedToCreateMediaKeys: 'eme-failed-create-media-keys',
+  EMEFailedToAttachMediaKeysToVideoElement: 'eme-failed-attach-media-keys-to-video',
+  EMEFailedToCreateMediaKeySession: 'eme-failed-create-media-key-session',
+  EMEFailedToSetServerCertificate: 'eme-failed-set-server-certificate',
+  EMEFailedToGenerateLicenseRequest: 'eme-failed-generate-license-request',
+  EMEFailedToUpdateSessionWithReceivedLicenseKeys: 'eme-failed-update-session',
+  EMEFailedToCloseSession: 'eme-failed-close-session',
+  EMEFailedToRemoveKeysFromSession: 'eme-failed-remove-keys',
+  EMEFailedToLoadSessionBySessionId: 'eme-failed-load-session'
+};
+
+/**
+ * @file video.js
+ * @module videojs
+ */
+
+/**
+ * Normalize an `id` value by trimming off a leading `#`
+ *
+ * @private
+ * @param   {string} id
+ *          A string, maybe with a leading `#`.
+ *
+ * @return {string}
+ *          The string, without any leading `#`.
+ */
+const normalizeId = id => id.indexOf('#') === 0 ? id.slice(1) : id;
+
+/**
+ * A callback that is called when a component is ready. Does not have any
+ * parameters and any callback value will be ignored. See: {@link Component~ReadyCallback}
+ *
+ * @callback ReadyCallback
+ */
+
+/**
+ * The `videojs()` function doubles as the main function for users to create a
+ * {@link Player} instance as well as the main library namespace.
+ *
+ * It can also be used as a getter for a pre-existing {@link Player} instance.
+ * However, we _strongly_ recommend using `videojs.getPlayer()` for this
+ * purpose because it avoids any potential for unintended initialization.
+ *
+ * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+ * of our JSDoc template, we cannot properly document this as both a function
+ * and a namespace, so its function signature is documented here.
+ *
+ * #### Arguments
+ * ##### id
+ * string|Element, **required**
+ *
+ * Video element or video element ID.
+ *
+ * ##### options
+ * Object, optional
+ *
+ * Options object for providing settings.
+ * See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+ *
+ * ##### ready
+ * {@link Component~ReadyCallback}, optional
+ *
+ * A function to be called when the {@link Player} and {@link Tech} are ready.
+ *
+ * #### Return Value
+ *
+ * The `videojs()` function returns a {@link Player} instance.
+ *
+ * @namespace
+ *
+ * @borrows AudioTrack as AudioTrack
+ * @borrows Component.getComponent as getComponent
+ * @borrows module:events.on as on
+ * @borrows module:events.one as one
+ * @borrows module:events.off as off
+ * @borrows module:events.trigger as trigger
+ * @borrows EventTarget as EventTarget
+ * @borrows module:middleware.use as use
+ * @borrows Player.players as players
+ * @borrows Plugin.registerPlugin as registerPlugin
+ * @borrows Plugin.deregisterPlugin as deregisterPlugin
+ * @borrows Plugin.getPlugins as getPlugins
+ * @borrows Plugin.getPlugin as getPlugin
+ * @borrows Plugin.getPluginVersion as getPluginVersion
+ * @borrows Tech.getTech as getTech
+ * @borrows Tech.registerTech as registerTech
+ * @borrows TextTrack as TextTrack
+ * @borrows VideoTrack as VideoTrack
+ *
+ * @param  {string|Element} id
+ *         Video element or video element ID.
+ *
+ * @param  {Object} [options]
+ *         Options object for providing settings.
+ *         See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+ *
+ * @param  {ReadyCallback} [ready]
+ *         A function to be called when the {@link Player} and {@link Tech} are
+ *         ready.
+ *
+ * @return {Player}
+ *         The `videojs()` function returns a {@link Player|Player} instance.
+ */
+function videojs(id, options, ready) {
+  let player = videojs.getPlayer(id);
+  if (player) {
+    if (options) {
+      log$1.warn(`Player "${id}" is already initialised. Options will not be applied.`);
+    }
+    if (ready) {
+      player.ready(ready);
+    }
+    return player;
+  }
+  const el = typeof id === 'string' ? $('#' + normalizeId(id)) : id;
+  if (!isEl(el)) {
+    throw new TypeError('The element or ID supplied is not valid. (videojs)');
+  }
+
+  // document.body.contains(el) will only check if el is contained within that one document.
+  // This causes problems for elements in iframes.
+  // Instead, use the element's ownerDocument instead of the global document.
+  // This will make sure that the element is indeed in the dom of that document.
+  // Additionally, check that the document in question has a default view.
+  // If the document is no longer attached to the dom, the defaultView of the document will be null.
+  // If element is inside Shadow DOM (e.g. is part of a Custom element), ownerDocument.body
+  // always returns false. Instead, use the Shadow DOM root.
+  const inShadowDom = 'getRootNode' in el ? el.getRootNode() instanceof window__default["default"].ShadowRoot : false;
+  const rootNode = inShadowDom ? el.getRootNode() : el.ownerDocument.body;
+  if (!el.ownerDocument.defaultView || !rootNode.contains(el)) {
+    log$1.warn('The element supplied is not included in the DOM');
+  }
+  options = options || {};
+
+  // Store a copy of the el before modification, if it is to be restored in destroy()
+  // If div ingest, store the parent div
+  if (options.restoreEl === true) {
+    options.restoreEl = (el.parentNode && el.parentNode.hasAttribute('data-vjs-player') ? el.parentNode : el).cloneNode(true);
+  }
+  hooks('beforesetup').forEach(hookFunction => {
+    const opts = hookFunction(el, merge$1(options));
+    if (!isObject(opts) || Array.isArray(opts)) {
+      log$1.error('please return an object in beforesetup hooks');
+      return;
+    }
+    options = merge$1(options, opts);
+  });
+
+  // We get the current "Player" component here in case an integration has
+  // replaced it with a custom player.
+  const PlayerComponent = Component$1.getComponent('Player');
+  player = new PlayerComponent(el, options, ready);
+  hooks('setup').forEach(hookFunction => hookFunction(player));
+  return player;
+}
+videojs.hooks_ = hooks_;
+videojs.hooks = hooks;
+videojs.hook = hook;
+videojs.hookOnce = hookOnce;
+videojs.removeHook = removeHook;
+
+// Add default styles
+if (window__default["default"].VIDEOJS_NO_DYNAMIC_STYLE !== true && isReal()) {
+  let style = $('.vjs-styles-defaults');
+  if (!style) {
+    style = createStyleElement('vjs-styles-defaults');
+    const head = $('head');
+    if (head) {
+      head.insertBefore(style, head.firstChild);
+    }
+    setTextContent(style, `
+      .video-js {
+        width: 300px;
+        height: 150px;
+      }
+
+      .vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: 56.25%
+      }
+    `);
+  }
+}
+
+// Run Auto-load players
+// You have to wait at least once in case this script is loaded after your
+// video in the DOM (weird behavior only with minified version)
+autoSetupTimeout(1, videojs);
+
+/**
+ * Current Video.js version. Follows [semantic versioning](https://semver.org/).
+ *
+ * @type {string}
+ */
+videojs.VERSION = version$6;
+
+/**
+ * The global options object. These are the settings that take effect
+ * if no overrides are specified when the player is created.
+ *
+ * @type {Object}
+ */
+videojs.options = Player.prototype.options_;
+
+/**
+ * Get an object with the currently created players, keyed by player ID
+ *
+ * @return {Object}
+ *         The created players
+ */
+videojs.getPlayers = () => Player.players;
+
+/**
+ * Get a single player based on an ID or DOM element.
+ *
+ * This is useful if you want to check if an element or ID has an associated
+ * Video.js player, but not create one if it doesn't.
+ *
+ * @param   {string|Element} id
+ *          An HTML element - `<video>`, `<audio>`, or `<video-js>` -
+ *          or a string matching the `id` of such an element.
+ *
+ * @return {Player|undefined}
+ *          A player instance or `undefined` if there is no player instance
+ *          matching the argument.
+ */
+videojs.getPlayer = id => {
+  const players = Player.players;
+  let tag;
+  if (typeof id === 'string') {
+    const nId = normalizeId(id);
+    const player = players[nId];
+    if (player) {
+      return player;
+    }
+    tag = $('#' + nId);
+  } else {
+    tag = id;
+  }
+  if (isEl(tag)) {
+    const {
+      player,
+      playerId
+    } = tag;
+
+    // Element may have a `player` property referring to an already created
+    // player instance. If so, return that.
+    if (player || players[playerId]) {
+      return player || players[playerId];
+    }
+  }
+};
+
+/**
+ * Returns an array of all current players.
+ *
+ * @return {Array}
+ *         An array of all players. The array will be in the order that
+ *         `Object.keys` provides, which could potentially vary between
+ *         JavaScript engines.
+ *
+ */
+videojs.getAllPlayers = () =>
+// Disposed players leave a key with a `null` value, so we need to make sure
+// we filter those out.
+Object.keys(Player.players).map(k => Player.players[k]).filter(Boolean);
+videojs.players = Player.players;
+videojs.getComponent = Component$1.getComponent;
+
+/**
+ * Register a component so it can referred to by name. Used when adding to other
+ * components, either through addChild `component.addChild('myComponent')` or through
+ * default children options  `{ children: ['myComponent'] }`.
+ *
+ * > NOTE: You could also just initialize the component before adding.
+ * `component.addChild(new MyComponent());`
+ *
+ * @param {string} name
+ *        The class name of the component
+ *
+ * @param {typeof Component} comp
+ *        The component class
+ *
+ * @return {typeof Component}
+ *         The newly registered component
+ */
+videojs.registerComponent = (name, comp) => {
+  if (Tech.isTech(comp)) {
+    log$1.warn(`The ${name} tech was registered as a component. It should instead be registered using videojs.registerTech(name, tech)`);
+  }
+  return Component$1.registerComponent.call(Component$1, name, comp);
+};
+videojs.getTech = Tech.getTech;
+videojs.registerTech = Tech.registerTech;
+videojs.use = use;
+
+/**
+ * An object that can be returned by a middleware to signify
+ * that the middleware is being terminated.
+ *
+ * @type {object}
+ * @property {object} middleware.TERMINATOR
+ */
+Object.defineProperty(videojs, 'middleware', {
+  value: {},
+  writeable: false,
+  enumerable: true
+});
+Object.defineProperty(videojs.middleware, 'TERMINATOR', {
+  value: TERMINATOR,
+  writeable: false,
+  enumerable: true
+});
+
+/**
+ * A reference to the {@link module:browser|browser utility module} as an object.
+ *
+ * @type {Object}
+ * @see  {@link module:browser|browser}
+ */
+videojs.browser = browser;
+
+/**
+ * A reference to the {@link module:obj|obj utility module} as an object.
+ *
+ * @type {Object}
+ * @see  {@link module:obj|obj}
+ */
+videojs.obj = Obj;
+
+/**
+ * Deprecated reference to the {@link module:obj.merge|merge function}
+ *
+ * @type {Function}
+ * @see {@link module:obj.merge|merge}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.obj.merge instead.
+ */
+videojs.mergeOptions = deprecateForMajor(9, 'videojs.mergeOptions', 'videojs.obj.merge', merge$1);
+
+/**
+ * Deprecated reference to the {@link module:obj.defineLazyProperty|defineLazyProperty function}
+ *
+ * @type {Function}
+ * @see {@link module:obj.defineLazyProperty|defineLazyProperty}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.obj.defineLazyProperty instead.
+ */
+videojs.defineLazyProperty = deprecateForMajor(9, 'videojs.defineLazyProperty', 'videojs.obj.defineLazyProperty', defineLazyProperty);
+
+/**
+ * Deprecated reference to the {@link module:fn.bind_|fn.bind_ function}
+ *
+ * @type {Function}
+ * @see {@link module:fn.bind_|fn.bind_}
+ * @deprecated Deprecated and will be removed in 9.0. Please use native Function.prototype.bind instead.
+ */
+videojs.bind = deprecateForMajor(9, 'videojs.bind', 'native Function.prototype.bind', bind_);
+videojs.registerPlugin = Plugin.registerPlugin;
+videojs.deregisterPlugin = Plugin.deregisterPlugin;
+
+/**
+ * Deprecated method to register a plugin with Video.js
+ *
+ * @deprecated Deprecated and will be removed in 9.0. Use videojs.registerPlugin() instead.
+ *
+ * @param {string} name
+ *        The plugin name
+*
+ * @param {typeof Plugin|Function} plugin
+ *         The plugin sub-class or function
+ *
+ * @return {typeof Plugin|Function}
+ */
+videojs.plugin = (name, plugin) => {
+  log$1.warn('videojs.plugin() is deprecated; use videojs.registerPlugin() instead');
+  return Plugin.registerPlugin(name, plugin);
+};
+videojs.getPlugins = Plugin.getPlugins;
+videojs.getPlugin = Plugin.getPlugin;
+videojs.getPluginVersion = Plugin.getPluginVersion;
+
+/**
+ * Adding languages so that they're available to all players.
+ * Example: `videojs.addLanguage('es', { 'Hello': 'Hola' });`
+ *
+ * @param {string} code
+ *        The language code or dictionary property
+ *
+ * @param {Object} data
+ *        The data values to be translated
+ *
+ * @return {Object}
+ *         The resulting language dictionary object
+ */
+videojs.addLanguage = function (code, data) {
+  code = ('' + code).toLowerCase();
+  videojs.options.languages = merge$1(videojs.options.languages, {
+    [code]: data
+  });
+  return videojs.options.languages[code];
+};
+
+/**
+ * A reference to the {@link module:log|log utility module} as an object.
+ *
+ * @type {Function}
+ * @see  {@link module:log|log}
+ */
+videojs.log = log$1;
+videojs.createLogger = createLogger;
+
+/**
+ * A reference to the {@link module:time|time utility module} as an object.
+ *
+ * @type {Object}
+ * @see {@link module:time|time}
+ */
+videojs.time = Time;
+
+/**
+ * Deprecated reference to the {@link module:time.createTimeRanges|createTimeRanges function}
+ *
+ * @type {Function}
+ * @see {@link module:time.createTimeRanges|createTimeRanges}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.createTimeRanges instead.
+ */
+videojs.createTimeRange = deprecateForMajor(9, 'videojs.createTimeRange', 'videojs.time.createTimeRanges', createTimeRanges$1);
+
+/**
+ * Deprecated reference to the {@link module:time.createTimeRanges|createTimeRanges function}
+ *
+ * @type {Function}
+ * @see {@link module:time.createTimeRanges|createTimeRanges}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.createTimeRanges instead.
+ */
+videojs.createTimeRanges = deprecateForMajor(9, 'videojs.createTimeRanges', 'videojs.time.createTimeRanges', createTimeRanges$1);
+
+/**
+ * Deprecated reference to the {@link module:time.formatTime|formatTime function}
+ *
+ * @type {Function}
+ * @see {@link module:time.formatTime|formatTime}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.format instead.
+ */
+videojs.formatTime = deprecateForMajor(9, 'videojs.formatTime', 'videojs.time.formatTime', formatTime);
+
+/**
+ * Deprecated reference to the {@link module:time.setFormatTime|setFormatTime function}
+ *
+ * @type {Function}
+ * @see {@link module:time.setFormatTime|setFormatTime}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.setFormat instead.
+ */
+videojs.setFormatTime = deprecateForMajor(9, 'videojs.setFormatTime', 'videojs.time.setFormatTime', setFormatTime);
+
+/**
+ * Deprecated reference to the {@link module:time.resetFormatTime|resetFormatTime function}
+ *
+ * @type {Function}
+ * @see {@link module:time.resetFormatTime|resetFormatTime}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.resetFormat instead.
+ */
+videojs.resetFormatTime = deprecateForMajor(9, 'videojs.resetFormatTime', 'videojs.time.resetFormatTime', resetFormatTime);
+
+/**
+ * Deprecated reference to the {@link module:url.parseUrl|Url.parseUrl function}
+ *
+ * @type {Function}
+ * @see {@link module:url.parseUrl|parseUrl}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.url.parseUrl instead.
+ */
+videojs.parseUrl = deprecateForMajor(9, 'videojs.parseUrl', 'videojs.url.parseUrl', parseUrl);
+
+/**
+ * Deprecated reference to the {@link module:url.isCrossOrigin|Url.isCrossOrigin function}
+ *
+ * @type {Function}
+ * @see {@link module:url.isCrossOrigin|isCrossOrigin}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.url.isCrossOrigin instead.
+ */
+videojs.isCrossOrigin = deprecateForMajor(9, 'videojs.isCrossOrigin', 'videojs.url.isCrossOrigin', isCrossOrigin);
+videojs.EventTarget = EventTarget$2;
+videojs.any = any;
+videojs.on = on;
+videojs.one = one;
+videojs.off = off;
+videojs.trigger = trigger;
+
+/**
+ * A cross-browser XMLHttpRequest wrapper.
+ *
+ * @function
+ * @param    {Object} options
+ *           Settings for the request.
+ *
+ * @return   {XMLHttpRequest|XDomainRequest}
+ *           The request object.
+ *
+ * @see      https://github.com/Raynos/xhr
+ */
+videojs.xhr = XHR__default["default"];
+videojs.TextTrack = TextTrack;
+videojs.AudioTrack = AudioTrack;
+videojs.VideoTrack = VideoTrack;
+['isEl', 'isTextNode', 'createEl', 'hasClass', 'addClass', 'removeClass', 'toggleClass', 'setAttributes', 'getAttributes', 'emptyEl', 'appendContent', 'insertContent'].forEach(k => {
+  videojs[k] = function () {
+    log$1.warn(`videojs.${k}() is deprecated; use videojs.dom.${k}() instead`);
+    return Dom[k].apply(null, arguments);
+  };
+});
+videojs.computedStyle = deprecateForMajor(9, 'videojs.computedStyle', 'videojs.dom.computedStyle', computedStyle);
+
+/**
+ * A reference to the {@link module:dom|DOM utility module} as an object.
+ *
+ * @type {Object}
+ * @see {@link module:dom|dom}
+ */
+videojs.dom = Dom;
+
+/**
+ * A reference to the {@link module:fn|fn utility module} as an object.
+ *
+ * @type {Object}
+ * @see {@link module:fn|fn}
+ */
+videojs.fn = Fn;
+
+/**
+ * A reference to the {@link module:num|num utility module} as an object.
+ *
+ * @type {Object}
+ * @see {@link module:num|num}
+ */
+videojs.num = Num;
+
+/**
+ * A reference to the {@link module:str|str utility module} as an object.
+ *
+ * @type {Object}
+ * @see {@link module:str|str}
+ */
+videojs.str = Str;
+
+/**
+ * A reference to the {@link module:url|URL utility module} as an object.
+ *
+ * @type {Object}
+ * @see {@link module:url|url}
+ */
+videojs.url = Url;
+
+// The list of possible error types to occur in video.js
+videojs.Error = VjsErrors;
+
+/*! @name videojs-contrib-quality-levels @version 4.1.0 @license Apache-2.0 */
+
+/**
+ * A single QualityLevel.
+ *
+ * interface QualityLevel {
+ *   readonly attribute DOMString id;
+ *            attribute DOMString label;
+ *   readonly attribute long width;
+ *   readonly attribute long height;
+ *   readonly attribute long bitrate;
+ *            attribute boolean enabled;
+ * };
+ *
+ * @class QualityLevel
+ */
+class QualityLevel {
+  /**
+   * Creates a QualityLevel
+   *
+   * @param {Representation|Object} representation The representation of the quality level
+   * @param {string}   representation.id        Unique id of the QualityLevel
+   * @param {number=}  representation.width     Resolution width of the QualityLevel
+   * @param {number=}  representation.height    Resolution height of the QualityLevel
+   * @param {number}   representation.bandwidth Bitrate of the QualityLevel
+   * @param {number=}  representation.frameRate Frame-rate of the QualityLevel
+   * @param {Function} representation.enabled   Callback to enable/disable QualityLevel
+   */
+  constructor(representation) {
+    let level = this; // eslint-disable-line
+
+    level.id = representation.id;
+    level.label = level.id;
+    level.width = representation.width;
+    level.height = representation.height;
+    level.bitrate = representation.bandwidth;
+    level.frameRate = representation.frameRate;
+    level.enabled_ = representation.enabled;
+    Object.defineProperty(level, 'enabled', {
+      /**
+       * Get whether the QualityLevel is enabled.
+       *
+       * @return {boolean} True if the QualityLevel is enabled.
+       */
+      get() {
+        return level.enabled_();
+      },
+      /**
+       * Enable or disable the QualityLevel.
+       *
+       * @param {boolean} enable true to enable QualityLevel, false to disable.
+       */
+      set(enable) {
+        level.enabled_(enable);
+      }
+    });
+    return level;
+  }
+}
+
+/**
+ * A list of QualityLevels.
+ *
+ * interface QualityLevelList : EventTarget {
+ *   getter QualityLevel (unsigned long index);
+ *   readonly attribute unsigned long length;
+ *   readonly attribute long selectedIndex;
+ *
+ *   void addQualityLevel(QualityLevel qualityLevel)
+ *   void removeQualityLevel(QualityLevel remove)
+ *   QualityLevel? getQualityLevelById(DOMString id);
+ *
+ *   attribute EventHandler onchange;
+ *   attribute EventHandler onaddqualitylevel;
+ *   attribute EventHandler onremovequalitylevel;
+ * };
+ *
+ * @extends videojs.EventTarget
+ * @class QualityLevelList
+ */
+class QualityLevelList extends videojs.EventTarget {
+  /**
+   * Creates a QualityLevelList.
+   */
+  constructor() {
+    super();
+    let list = this; // eslint-disable-line
+
+    list.levels_ = [];
+    list.selectedIndex_ = -1;
+
+    /**
+     * Get the index of the currently selected QualityLevel.
+     *
+     * @returns {number} The index of the selected QualityLevel. -1 if none selected.
+     * @readonly
+     */
+    Object.defineProperty(list, 'selectedIndex', {
+      get() {
+        return list.selectedIndex_;
+      }
+    });
+
+    /**
+     * Get the length of the list of QualityLevels.
+     *
+     * @returns {number} The length of the list.
+     * @readonly
+     */
+    Object.defineProperty(list, 'length', {
+      get() {
+        return list.levels_.length;
+      }
+    });
+    list[Symbol.iterator] = () => list.levels_.values();
+    return list;
+  }
+
+  /**
+   * Adds a quality level to the list.
+   *
+   * @param {Representation|Object} representation The representation of the quality level
+   * @param {string}   representation.id        Unique id of the QualityLevel
+   * @param {number=}  representation.width     Resolution width of the QualityLevel
+   * @param {number=}  representation.height    Resolution height of the QualityLevel
+   * @param {number}   representation.bandwidth Bitrate of the QualityLevel
+   * @param {number=}  representation.frameRate Frame-rate of the QualityLevel
+   * @param {Function} representation.enabled   Callback to enable/disable QualityLevel
+   * @return {QualityLevel} the QualityLevel added to the list
+   * @method addQualityLevel
+   */
+  addQualityLevel(representation) {
+    let qualityLevel = this.getQualityLevelById(representation.id);
+
+    // Do not add duplicate quality levels
+    if (qualityLevel) {
+      return qualityLevel;
+    }
+    const index = this.levels_.length;
+    qualityLevel = new QualityLevel(representation);
+    if (!('' + index in this)) {
+      Object.defineProperty(this, index, {
+        get() {
+          return this.levels_[index];
+        }
+      });
+    }
+    this.levels_.push(qualityLevel);
+    this.trigger({
+      qualityLevel,
+      type: 'addqualitylevel'
+    });
+    return qualityLevel;
+  }
+
+  /**
+   * Removes a quality level from the list.
+   *
+   * @param {QualityLevel} qualityLevel The QualityLevel to remove from the list.
+   * @return {QualityLevel|null} the QualityLevel removed or null if nothing removed
+   * @method removeQualityLevel
+   */
+  removeQualityLevel(qualityLevel) {
+    let removed = null;
+    for (let i = 0, l = this.length; i < l; i++) {
+      if (this[i] === qualityLevel) {
+        removed = this.levels_.splice(i, 1)[0];
+        if (this.selectedIndex_ === i) {
+          this.selectedIndex_ = -1;
+        } else if (this.selectedIndex_ > i) {
+          this.selectedIndex_--;
+        }
+        break;
+      }
+    }
+    if (removed) {
+      this.trigger({
+        qualityLevel,
+        type: 'removequalitylevel'
+      });
+    }
+    return removed;
+  }
+
+  /**
+   * Searches for a QualityLevel with the given id.
+   *
+   * @param {string} id The id of the QualityLevel to find.
+   * @return {QualityLevel|null} The QualityLevel with id, or null if not found.
+   * @method getQualityLevelById
+   */
+  getQualityLevelById(id) {
+    for (let i = 0, l = this.length; i < l; i++) {
+      const level = this[i];
+      if (level.id === id) {
+        return level;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Resets the list of QualityLevels to empty
+   *
+   * @method dispose
+   */
+  dispose() {
+    this.selectedIndex_ = -1;
+    this.levels_.length = 0;
+  }
+}
+
+/**
+ * change - The selected QualityLevel has changed.
+ * addqualitylevel - A QualityLevel has been added to the QualityLevelList.
+ * removequalitylevel - A QualityLevel has been removed from the QualityLevelList.
+ */
+QualityLevelList.prototype.allowedEvents_ = {
+  change: 'change',
+  addqualitylevel: 'addqualitylevel',
+  removequalitylevel: 'removequalitylevel'
+};
+
+// emulate attribute EventHandler support to allow for feature detection
+for (const event in QualityLevelList.prototype.allowedEvents_) {
+  QualityLevelList.prototype['on' + event] = null;
+}
+var version$5 = "4.1.0";
+
+/**
+ * Initialization function for the qualityLevels plugin. Sets up the QualityLevelList and
+ * event handlers.
+ *
+ * @param {Player} player Player object.
+ * @param {Object} options Plugin options object.
+ * @return {QualityLevelList} a list of QualityLevels
+ */
+const initPlugin$1 = function (player, options) {
+  const originalPluginFn = player.qualityLevels;
+  const qualityLevelList = new QualityLevelList();
+  const disposeHandler = function () {
+    qualityLevelList.dispose();
+    player.qualityLevels = originalPluginFn;
+    player.off('dispose', disposeHandler);
+  };
+  player.on('dispose', disposeHandler);
+  player.qualityLevels = () => qualityLevelList;
+  player.qualityLevels.VERSION = version$5;
+  return qualityLevelList;
+};
+
+/**
+ * A video.js plugin.
+ *
+ * In the plugin function, the value of `this` is a video.js `Player`
+ * instance. You cannot rely on the player being in a "ready" state here,
+ * depending on how the plugin is invoked. This may or may not be important
+ * to you; if not, remove the wait for "ready"!
+ *
+ * @param {Object} options Plugin options object
+ * @return {QualityLevelList} a list of QualityLevels
+ */
+const qualityLevels = function (options) {
+  return initPlugin$1(this, videojs.obj.merge({}, options));
+};
+
+// Register the plugin with video.js.
+videojs.registerPlugin('qualityLevels', qualityLevels);
+
+// Include the version number.
+qualityLevels.VERSION = version$5;
+
+/*! @name @videojs/http-streaming @version 3.12.1 @license Apache-2.0 */
+
+/**
+ * @file resolve-url.js - Handling how URLs are resolved and manipulated
+ */
+const resolveUrl = _resolveUrl__default["default"];
+/**
+ * If the xhr request was redirected, return the responseURL, otherwise,
+ * return the original url.
+ *
+ * @api private
+ *
+ * @param  {string} url - an url being requested
+ * @param  {XMLHttpRequest} req - xhr request result
+ *
+ * @return {string}
+ */
+
+const resolveManifestRedirect = (url, req) => {
+  // To understand how the responseURL below is set and generated:
+  // - https://fetch.spec.whatwg.org/#concept-response-url
+  // - https://fetch.spec.whatwg.org/#atomic-http-redirect-handling
+  if (req && req.responseURL && url !== req.responseURL) {
+    return req.responseURL;
+  }
+  return url;
+};
+const logger = source => {
+  if (videojs.log.debug) {
+    return videojs.log.debug.bind(videojs, 'VHS:', `${source} >`);
+  }
+  return function () {};
+};
+
+/**
+ * Provides a compatibility layer between Video.js 7 and 8 API changes for VHS.
+ */
+/**
+ * Delegates to videojs.obj.merge (Video.js 8) or
+ * videojs.mergeOptions (Video.js 7).
+ */
+
+function merge(...args) {
+  const context = videojs.obj || videojs;
+  const fn = context.merge || context.mergeOptions;
+  return fn.apply(context, args);
+}
+/**
+ * Delegates to videojs.time.createTimeRanges (Video.js 8) or
+ * videojs.createTimeRanges (Video.js 7).
+ */
+
+function createTimeRanges(...args) {
+  const context = videojs.time || videojs;
+  const fn = context.createTimeRanges || context.createTimeRanges;
+  return fn.apply(context, args);
+}
+/**
+ * Converts provided buffered ranges to a descriptive string
+ *
+ * @param {TimeRanges} buffered - received buffered time ranges
+ *
+ * @return {string} - descriptive string
+ */
+
+function bufferedRangesToString(buffered) {
+  if (buffered.length === 0) {
+    return 'Buffered Ranges are empty';
+  }
+  let bufferedRangesStr = 'Buffered Ranges: \n';
+  for (let i = 0; i < buffered.length; i++) {
+    const start = buffered.start(i);
+    const end = buffered.end(i);
+    bufferedRangesStr += `${start} --> ${end}. Duration (${end - start})\n`;
+  }
+  return bufferedRangesStr;
+}
+
+/**
+ * ranges
+ *
+ * Utilities for working with TimeRanges.
+ *
+ */
+
+const TIME_FUDGE_FACTOR = 1 / 30; // Comparisons between time values such as current time and the end of the buffered range
+// can be misleading because of precision differences or when the current media has poorly
+// aligned audio and video, which can cause values to be slightly off from what you would
+// expect. This value is what we consider to be safe to use in such comparisons to account
+// for these scenarios.
+
+const SAFE_TIME_DELTA = TIME_FUDGE_FACTOR * 3;
+const filterRanges = function (timeRanges, predicate) {
+  const results = [];
+  let i;
+  if (timeRanges && timeRanges.length) {
+    // Search for ranges that match the predicate
+    for (i = 0; i < timeRanges.length; i++) {
+      if (predicate(timeRanges.start(i), timeRanges.end(i))) {
+        results.push([timeRanges.start(i), timeRanges.end(i)]);
+      }
+    }
+  }
+  return createTimeRanges(results);
+};
+/**
+ * Attempts to find the buffered TimeRange that contains the specified
+ * time.
+ *
+ * @param {TimeRanges} buffered - the TimeRanges object to query
+ * @param {number} time  - the time to filter on.
+ * @return {TimeRanges} a new TimeRanges object
+ */
+
+const findRange = function (buffered, time) {
+  return filterRanges(buffered, function (start, end) {
+    return start - SAFE_TIME_DELTA <= time && end + SAFE_TIME_DELTA >= time;
+  });
+};
+/**
+ * Returns the TimeRanges that begin later than the specified time.
+ *
+ * @param {TimeRanges} timeRanges - the TimeRanges object to query
+ * @param {number} time - the time to filter on.
+ * @return {TimeRanges} a new TimeRanges object.
+ */
+
+const findNextRange = function (timeRanges, time) {
+  return filterRanges(timeRanges, function (start) {
+    return start - TIME_FUDGE_FACTOR >= time;
+  });
+};
+/**
+ * Returns gaps within a list of TimeRanges
+ *
+ * @param {TimeRanges} buffered - the TimeRanges object
+ * @return {TimeRanges} a TimeRanges object of gaps
+ */
+
+const findGaps = function (buffered) {
+  if (buffered.length < 2) {
+    return createTimeRanges();
+  }
+  const ranges = [];
+  for (let i = 1; i < buffered.length; i++) {
+    const start = buffered.end(i - 1);
+    const end = buffered.start(i);
+    ranges.push([start, end]);
+  }
+  return createTimeRanges(ranges);
+};
+/**
+ * Calculate the intersection of two TimeRanges
+ *
+ * @param {TimeRanges} bufferA
+ * @param {TimeRanges} bufferB
+ * @return {TimeRanges} The interesection of `bufferA` with `bufferB`
+ */
+
+const bufferIntersection = function (bufferA, bufferB) {
+  let start = null;
+  let end = null;
+  let arity = 0;
+  const extents = [];
+  const ranges = [];
+  if (!bufferA || !bufferA.length || !bufferB || !bufferB.length) {
+    return createTimeRanges();
+  } // Handle the case where we have both buffers and create an
+  // intersection of the two
+
+  let count = bufferA.length; // A) Gather up all start and end times
+
+  while (count--) {
+    extents.push({
+      time: bufferA.start(count),
+      type: 'start'
+    });
+    extents.push({
+      time: bufferA.end(count),
+      type: 'end'
+    });
+  }
+  count = bufferB.length;
+  while (count--) {
+    extents.push({
+      time: bufferB.start(count),
+      type: 'start'
+    });
+    extents.push({
+      time: bufferB.end(count),
+      type: 'end'
+    });
+  } // B) Sort them by time
+
+  extents.sort(function (a, b) {
+    return a.time - b.time;
+  }); // C) Go along one by one incrementing arity for start and decrementing
+  //    arity for ends
+
+  for (count = 0; count < extents.length; count++) {
+    if (extents[count].type === 'start') {
+      arity++; // D) If arity is ever incremented to 2 we are entering an
+      //    overlapping range
+
+      if (arity === 2) {
+        start = extents[count].time;
+      }
+    } else if (extents[count].type === 'end') {
+      arity--; // E) If arity is ever decremented to 1 we leaving an
+      //    overlapping range
+
+      if (arity === 1) {
+        end = extents[count].time;
+      }
+    } // F) Record overlapping ranges
+
+    if (start !== null && end !== null) {
+      ranges.push([start, end]);
+      start = null;
+      end = null;
+    }
+  }
+  return createTimeRanges(ranges);
+};
+/**
+ * Gets a human readable string for a TimeRange
+ *
+ * @param {TimeRange} range
+ * @return {string} a human readable string
+ */
+
+const printableRange = range => {
+  const strArr = [];
+  if (!range || !range.length) {
+    return '';
+  }
+  for (let i = 0; i < range.length; i++) {
+    strArr.push(range.start(i) + ' => ' + range.end(i));
+  }
+  return strArr.join(', ');
+};
+/**
+ * Calculates the amount of time left in seconds until the player hits the end of the
+ * buffer and causes a rebuffer
+ *
+ * @param {TimeRange} buffered
+ *        The state of the buffer
+ * @param {Numnber} currentTime
+ *        The current time of the player
+ * @param {number} playbackRate
+ *        The current playback rate of the player. Defaults to 1.
+ * @return {number}
+ *         Time until the player has to start rebuffering in seconds.
+ * @function timeUntilRebuffer
+ */
+
+const timeUntilRebuffer = function (buffered, currentTime, playbackRate = 1) {
+  const bufferedEnd = buffered.length ? buffered.end(buffered.length - 1) : 0;
+  return (bufferedEnd - currentTime) / playbackRate;
+};
+/**
+ * Converts a TimeRanges object into an array representation
+ *
+ * @param {TimeRanges} timeRanges
+ * @return {Array}
+ */
+
+const timeRangesToArray = timeRanges => {
+  const timeRangesList = [];
+  for (let i = 0; i < timeRanges.length; i++) {
+    timeRangesList.push({
+      start: timeRanges.start(i),
+      end: timeRanges.end(i)
+    });
+  }
+  return timeRangesList;
+};
+/**
+ * Determines if two time range objects are different.
+ *
+ * @param {TimeRange} a
+ *        the first time range object to check
+ *
+ * @param {TimeRange} b
+ *        the second time range object to check
+ *
+ * @return {Boolean}
+ *         Whether the time range objects differ
+ */
+
+const isRangeDifferent = function (a, b) {
+  // same object
+  if (a === b) {
+    return false;
+  } // one or the other is undefined
+
+  if (!a && b || !b && a) {
+    return true;
+  } // length is different
+
+  if (a.length !== b.length) {
+    return true;
+  } // see if any start/end pair is different
+
+  for (let i = 0; i < a.length; i++) {
+    if (a.start(i) !== b.start(i) || a.end(i) !== b.end(i)) {
+      return true;
+    }
+  } // if the length and every pair is the same
+  // this is the same time range
+
+  return false;
+};
+const lastBufferedEnd = function (a) {
+  if (!a || !a.length || !a.end) {
+    return;
+  }
+  return a.end(a.length - 1);
+};
+/**
+ * A utility function to add up the amount of time in a timeRange
+ * after a specified startTime.
+ * ie:[[0, 10], [20, 40], [50, 60]] with a startTime 0
+ *     would return 40 as there are 40s seconds after 0 in the timeRange
+ *
+ * @param {TimeRange} range
+ *        The range to check against
+ * @param {number} startTime
+ *        The time in the time range that you should start counting from
+ *
+ * @return {number}
+ *          The number of seconds in the buffer passed the specified time.
+ */
+
+const timeAheadOf = function (range, startTime) {
+  let time = 0;
+  if (!range || !range.length) {
+    return time;
+  }
+  for (let i = 0; i < range.length; i++) {
+    const start = range.start(i);
+    const end = range.end(i); // startTime is after this range entirely
+
+    if (startTime > end) {
+      continue;
+    } // startTime is within this range
+
+    if (startTime > start && startTime <= end) {
+      time += end - startTime;
+      continue;
+    } // startTime is before this range.
+
+    time += end - start;
+  }
+  return time;
+};
+
+/**
+ * @file playlist.js
+ *
+ * Playlist related utilities.
+ */
+/**
+ * Get the duration of a segment, with special cases for
+ * llhls segments that do not have a duration yet.
+ *
+ * @param {Object} playlist
+ *        the playlist that the segment belongs to.
+ * @param {Object} segment
+ *        the segment to get a duration for.
+ *
+ * @return {number}
+ *          the segment duration
+ */
+
+const segmentDurationWithParts = (playlist, segment) => {
+  // if this isn't a preload segment
+  // then we will have a segment duration that is accurate.
+  if (!segment.preload) {
+    return segment.duration;
+  } // otherwise we have to add up parts and preload hints
+  // to get an up to date duration.
+
+  let result = 0;
+  (segment.parts || []).forEach(function (p) {
+    result += p.duration;
+  }); // for preload hints we have to use partTargetDuration
+  // as they won't even have a duration yet.
+
+  (segment.preloadHints || []).forEach(function (p) {
+    if (p.type === 'PART') {
+      result += playlist.partTargetDuration;
+    }
+  });
+  return result;
+};
+/**
+ * A function to get a combined list of parts and segments with durations
+ * and indexes.
+ *
+ * @param {Playlist} playlist the playlist to get the list for.
+ *
+ * @return {Array} The part/segment list.
+ */
+
+const getPartsAndSegments = playlist => (playlist.segments || []).reduce((acc, segment, si) => {
+  if (segment.parts) {
+    segment.parts.forEach(function (part, pi) {
+      acc.push({
+        duration: part.duration,
+        segmentIndex: si,
+        partIndex: pi,
+        part,
+        segment
+      });
+    });
+  } else {
+    acc.push({
+      duration: segment.duration,
+      segmentIndex: si,
+      partIndex: null,
+      segment,
+      part: null
+    });
+  }
+  return acc;
+}, []);
+const getLastParts = media => {
+  const lastSegment = media.segments && media.segments.length && media.segments[media.segments.length - 1];
+  return lastSegment && lastSegment.parts || [];
+};
+const getKnownPartCount = ({
+  preloadSegment
+}) => {
+  if (!preloadSegment) {
+    return;
+  }
+  const {
+    parts,
+    preloadHints
+  } = preloadSegment;
+  let partCount = (preloadHints || []).reduce((count, hint) => count + (hint.type === 'PART' ? 1 : 0), 0);
+  partCount += parts && parts.length ? parts.length : 0;
+  return partCount;
+};
+/**
+ * Get the number of seconds to delay from the end of a
+ * live playlist.
+ *
+ * @param {Playlist} main the main playlist
+ * @param {Playlist} media the media playlist
+ * @return {number} the hold back in seconds.
+ */
+
+const liveEdgeDelay = (main, media) => {
+  if (media.endList) {
+    return 0;
+  } // dash suggestedPresentationDelay trumps everything
+
+  if (main && main.suggestedPresentationDelay) {
+    return main.suggestedPresentationDelay;
+  }
+  const hasParts = getLastParts(media).length > 0; // look for "part" delays from ll-hls first
+
+  if (hasParts && media.serverControl && media.serverControl.partHoldBack) {
+    return media.serverControl.partHoldBack;
+  } else if (hasParts && media.partTargetDuration) {
+    return media.partTargetDuration * 3; // finally look for full segment delays
+  } else if (media.serverControl && media.serverControl.holdBack) {
+    return media.serverControl.holdBack;
+  } else if (media.targetDuration) {
+    return media.targetDuration * 3;
+  }
+  return 0;
+};
+/**
+ * walk backward until we find a duration we can use
+ * or return a failure
+ *
+ * @param {Playlist} playlist the playlist to walk through
+ * @param {Number} endSequence the mediaSequence to stop walking on
+ */
+
+const backwardDuration = function (playlist, endSequence) {
+  let result = 0;
+  let i = endSequence - playlist.mediaSequence; // if a start time is available for segment immediately following
+  // the interval, use it
+
+  let segment = playlist.segments[i]; // Walk backward until we find the latest segment with timeline
+  // information that is earlier than endSequence
+
+  if (segment) {
+    if (typeof segment.start !== 'undefined') {
+      return {
+        result: segment.start,
+        precise: true
+      };
+    }
+    if (typeof segment.end !== 'undefined') {
+      return {
+        result: segment.end - segment.duration,
+        precise: true
+      };
+    }
+  }
+  while (i--) {
+    segment = playlist.segments[i];
+    if (typeof segment.end !== 'undefined') {
+      return {
+        result: result + segment.end,
+        precise: true
+      };
+    }
+    result += segmentDurationWithParts(playlist, segment);
+    if (typeof segment.start !== 'undefined') {
+      return {
+        result: result + segment.start,
+        precise: true
+      };
+    }
+  }
+  return {
+    result,
+    precise: false
+  };
+};
+/**
+ * walk forward until we find a duration we can use
+ * or return a failure
+ *
+ * @param {Playlist} playlist the playlist to walk through
+ * @param {number} endSequence the mediaSequence to stop walking on
+ */
+
+const forwardDuration = function (playlist, endSequence) {
+  let result = 0;
+  let segment;
+  let i = endSequence - playlist.mediaSequence; // Walk forward until we find the earliest segment with timeline
+  // information
+
+  for (; i < playlist.segments.length; i++) {
+    segment = playlist.segments[i];
+    if (typeof segment.start !== 'undefined') {
+      return {
+        result: segment.start - result,
+        precise: true
+      };
+    }
+    result += segmentDurationWithParts(playlist, segment);
+    if (typeof segment.end !== 'undefined') {
+      return {
+        result: segment.end - result,
+        precise: true
+      };
+    }
+  } // indicate we didn't find a useful duration estimate
+
+  return {
+    result: -1,
+    precise: false
+  };
+};
+/**
+  * Calculate the media duration from the segments associated with a
+  * playlist. The duration of a subinterval of the available segments
+  * may be calculated by specifying an end index.
+  *
+  * @param {Object} playlist a media playlist object
+  * @param {number=} endSequence an exclusive upper boundary
+  * for the playlist.  Defaults to playlist length.
+  * @param {number} expired the amount of time that has dropped
+  * off the front of the playlist in a live scenario
+  * @return {number} the duration between the first available segment
+  * and end index.
+  */
+
+const intervalDuration = function (playlist, endSequence, expired) {
+  if (typeof endSequence === 'undefined') {
+    endSequence = playlist.mediaSequence + playlist.segments.length;
+  }
+  if (endSequence < playlist.mediaSequence) {
+    return 0;
+  } // do a backward walk to estimate the duration
+
+  const backward = backwardDuration(playlist, endSequence);
+  if (backward.precise) {
+    // if we were able to base our duration estimate on timing
+    // information provided directly from the Media Source, return
+    // it
+    return backward.result;
+  } // walk forward to see if a precise duration estimate can be made
+  // that way
+
+  const forward = forwardDuration(playlist, endSequence);
+  if (forward.precise) {
+    // we found a segment that has been buffered and so it's
+    // position is known precisely
+    return forward.result;
+  } // return the less-precise, playlist-based duration estimate
+
+  return backward.result + expired;
+};
+/**
+  * Calculates the duration of a playlist. If a start and end index
+  * are specified, the duration will be for the subset of the media
+  * timeline between those two indices. The total duration for live
+  * playlists is always Infinity.
+  *
+  * @param {Object} playlist a media playlist object
+  * @param {number=} endSequence an exclusive upper
+  * boundary for the playlist. Defaults to the playlist media
+  * sequence number plus its length.
+  * @param {number=} expired the amount of time that has
+  * dropped off the front of the playlist in a live scenario
+  * @return {number} the duration between the start index and end
+  * index.
+  */
+
+const duration = function (playlist, endSequence, expired) {
+  if (!playlist) {
+    return 0;
+  }
+  if (typeof expired !== 'number') {
+    expired = 0;
+  } // if a slice of the total duration is not requested, use
+  // playlist-level duration indicators when they're present
+
+  if (typeof endSequence === 'undefined') {
+    // if present, use the duration specified in the playlist
+    if (playlist.totalDuration) {
+      return playlist.totalDuration;
+    } // duration should be Infinity for live playlists
+
+    if (!playlist.endList) {
+      return window__default["default"].Infinity;
+    }
+  } // calculate the total duration based on the segment durations
+
+  return intervalDuration(playlist, endSequence, expired);
+};
+/**
+  * Calculate the time between two indexes in the current playlist
+  * neight the start- nor the end-index need to be within the current
+  * playlist in which case, the targetDuration of the playlist is used
+  * to approximate the durations of the segments
+  *
+  * @param {Array} options.durationList list to iterate over for durations.
+  * @param {number} options.defaultDuration duration to use for elements before or after the durationList
+  * @param {number} options.startIndex partsAndSegments index to start
+  * @param {number} options.endIndex partsAndSegments index to end.
+  * @return {number} the number of seconds between startIndex and endIndex
+  */
+
+const sumDurations = function ({
+  defaultDuration,
+  durationList,
+  startIndex,
+  endIndex
+}) {
+  let durations = 0;
+  if (startIndex > endIndex) {
+    [startIndex, endIndex] = [endIndex, startIndex];
+  }
+  if (startIndex < 0) {
+    for (let i = startIndex; i < Math.min(0, endIndex); i++) {
+      durations += defaultDuration;
+    }
+    startIndex = 0;
+  }
+  for (let i = startIndex; i < endIndex; i++) {
+    durations += durationList[i].duration;
+  }
+  return durations;
+};
+/**
+ * Calculates the playlist end time
+ *
+ * @param {Object} playlist a media playlist object
+ * @param {number=} expired the amount of time that has
+ *                  dropped off the front of the playlist in a live scenario
+ * @param {boolean|false} useSafeLiveEnd a boolean value indicating whether or not the
+ *                        playlist end calculation should consider the safe live end
+ *                        (truncate the playlist end by three segments). This is normally
+ *                        used for calculating the end of the playlist's seekable range.
+ *                        This takes into account the value of liveEdgePadding.
+ *                        Setting liveEdgePadding to 0 is equivalent to setting this to false.
+ * @param {number} liveEdgePadding a number indicating how far from the end of the playlist we should be in seconds.
+ *                 If this is provided, it is used in the safe live end calculation.
+ *                 Setting useSafeLiveEnd=false or liveEdgePadding=0 are equivalent.
+ *                 Corresponds to suggestedPresentationDelay in DASH manifests.
+ * @return {number} the end time of playlist
+ * @function playlistEnd
+ */
+
+const playlistEnd = function (playlist, expired, useSafeLiveEnd, liveEdgePadding) {
+  if (!playlist || !playlist.segments) {
+    return null;
+  }
+  if (playlist.endList) {
+    return duration(playlist);
+  }
+  if (expired === null) {
+    return null;
+  }
+  expired = expired || 0;
+  let lastSegmentEndTime = intervalDuration(playlist, playlist.mediaSequence + playlist.segments.length, expired);
+  if (useSafeLiveEnd) {
+    liveEdgePadding = typeof liveEdgePadding === 'number' ? liveEdgePadding : liveEdgeDelay(null, playlist);
+    lastSegmentEndTime -= liveEdgePadding;
+  } // don't return a time less than zero
+
+  return Math.max(0, lastSegmentEndTime);
+};
+/**
+  * Calculates the interval of time that is currently seekable in a
+  * playlist. The returned time ranges are relative to the earliest
+  * moment in the specified playlist that is still available. A full
+  * seekable implementation for live streams would need to offset
+  * these values by the duration of content that has expired from the
+  * stream.
+  *
+  * @param {Object} playlist a media playlist object
+  * dropped off the front of the playlist in a live scenario
+  * @param {number=} expired the amount of time that has
+  * dropped off the front of the playlist in a live scenario
+  * @param {number} liveEdgePadding how far from the end of the playlist we should be in seconds.
+  *        Corresponds to suggestedPresentationDelay in DASH manifests.
+  * @return {TimeRanges} the periods of time that are valid targets
+  * for seeking
+  */
+
+const seekable = function (playlist, expired, liveEdgePadding) {
+  const useSafeLiveEnd = true;
+  const seekableStart = expired || 0;
+  let seekableEnd = playlistEnd(playlist, expired, useSafeLiveEnd, liveEdgePadding);
+  if (seekableEnd === null) {
+    return createTimeRanges();
+  } // Clamp seekable end since it can not be less than the seekable start
+
+  if (seekableEnd < seekableStart) {
+    seekableEnd = seekableStart;
+  }
+  return createTimeRanges(seekableStart, seekableEnd);
+};
+/**
+ * Determine the index and estimated starting time of the segment that
+ * contains a specified playback position in a media playlist.
+ *
+ * @param {Object} options.playlist the media playlist to query
+ * @param {number} options.currentTime The number of seconds since the earliest
+ * possible position to determine the containing segment for
+ * @param {number} options.startTime the time when the segment/part starts
+ * @param {number} options.startingSegmentIndex the segment index to start looking at.
+ * @param {number?} [options.startingPartIndex] the part index to look at within the segment.
+ *
+ * @return {Object} an object with partIndex, segmentIndex, and startTime.
+ */
+
+const getMediaInfoForTime = function ({
+  playlist,
+  currentTime,
+  startingSegmentIndex,
+  startingPartIndex,
+  startTime,
+  exactManifestTimings
+}) {
+  let time = currentTime - startTime;
+  const partsAndSegments = getPartsAndSegments(playlist);
+  let startIndex = 0;
+  for (let i = 0; i < partsAndSegments.length; i++) {
+    const partAndSegment = partsAndSegments[i];
+    if (startingSegmentIndex !== partAndSegment.segmentIndex) {
+      continue;
+    } // skip this if part index does not match.
+
+    if (typeof startingPartIndex === 'number' && typeof partAndSegment.partIndex === 'number' && startingPartIndex !== partAndSegment.partIndex) {
+      continue;
+    }
+    startIndex = i;
+    break;
+  }
+  if (time < 0) {
+    // Walk backward from startIndex in the playlist, adding durations
+    // until we find a segment that contains `time` and return it
+    if (startIndex > 0) {
+      for (let i = startIndex - 1; i >= 0; i--) {
+        const partAndSegment = partsAndSegments[i];
+        time += partAndSegment.duration;
+        if (exactManifestTimings) {
+          if (time < 0) {
+            continue;
+          }
+        } else if (time + TIME_FUDGE_FACTOR <= 0) {
+          continue;
+        }
+        return {
+          partIndex: partAndSegment.partIndex,
+          segmentIndex: partAndSegment.segmentIndex,
+          startTime: startTime - sumDurations({
+            defaultDuration: playlist.targetDuration,
+            durationList: partsAndSegments,
+            startIndex,
+            endIndex: i
+          })
+        };
+      }
+    } // We were unable to find a good segment within the playlist
+    // so select the first segment
+
+    return {
+      partIndex: partsAndSegments[0] && partsAndSegments[0].partIndex || null,
+      segmentIndex: partsAndSegments[0] && partsAndSegments[0].segmentIndex || 0,
+      startTime: currentTime
+    };
+  } // When startIndex is negative, we first walk forward to first segment
+  // adding target durations. If we "run out of time" before getting to
+  // the first segment, return the first segment
+
+  if (startIndex < 0) {
+    for (let i = startIndex; i < 0; i++) {
+      time -= playlist.targetDuration;
+      if (time < 0) {
+        return {
+          partIndex: partsAndSegments[0] && partsAndSegments[0].partIndex || null,
+          segmentIndex: partsAndSegments[0] && partsAndSegments[0].segmentIndex || 0,
+          startTime: currentTime
+        };
+      }
+    }
+    startIndex = 0;
+  } // Walk forward from startIndex in the playlist, subtracting durations
+  // until we find a segment that contains `time` and return it
+
+  for (let i = startIndex; i < partsAndSegments.length; i++) {
+    const partAndSegment = partsAndSegments[i];
+    time -= partAndSegment.duration;
+    const canUseFudgeFactor = partAndSegment.duration > TIME_FUDGE_FACTOR;
+    const isExactlyAtTheEnd = time === 0;
+    const isExtremelyCloseToTheEnd = canUseFudgeFactor && time + TIME_FUDGE_FACTOR >= 0;
+    if (isExactlyAtTheEnd || isExtremelyCloseToTheEnd) {
+      // 1) We are exactly at the end of the current segment.
+      // 2) We are extremely close to the end of the current segment (The difference is less than  1 / 30).
+      //    We may encounter this situation when
+      //    we don't have exact match between segment duration info in the manifest and the actual duration of the segment
+      //    For example:
+      //    We appended 3 segments 10 seconds each, meaning we should have 30 sec buffered,
+      //    but we the actual buffered is 29.99999
+      //
+      // In both cases:
+      // if we passed current time -> it means that we already played current segment
+      // if we passed buffered.end -> it means that this segment is already loaded and buffered
+      // we should select the next segment if we have one:
+      if (i !== partsAndSegments.length - 1) {
+        continue;
+      }
+    }
+    if (exactManifestTimings) {
+      if (time > 0) {
+        continue;
+      }
+    } else if (time - TIME_FUDGE_FACTOR >= 0) {
+      continue;
+    }
+    return {
+      partIndex: partAndSegment.partIndex,
+      segmentIndex: partAndSegment.segmentIndex,
+      startTime: startTime + sumDurations({
+        defaultDuration: playlist.targetDuration,
+        durationList: partsAndSegments,
+        startIndex,
+        endIndex: i
+      })
+    };
+  } // We are out of possible candidates so load the last one...
+
+  return {
+    segmentIndex: partsAndSegments[partsAndSegments.length - 1].segmentIndex,
+    partIndex: partsAndSegments[partsAndSegments.length - 1].partIndex,
+    startTime: currentTime
+  };
+};
+/**
+ * Check whether the playlist is excluded or not.
+ *
+ * @param {Object} playlist the media playlist object
+ * @return {boolean} whether the playlist is excluded or not
+ * @function isExcluded
+ */
+
+const isExcluded = function (playlist) {
+  return playlist.excludeUntil && playlist.excludeUntil > Date.now();
+};
+/**
+ * Check whether the playlist is compatible with current playback configuration or has
+ * been excluded permanently for being incompatible.
+ *
+ * @param {Object} playlist the media playlist object
+ * @return {boolean} whether the playlist is incompatible or not
+ * @function isIncompatible
+ */
+
+const isIncompatible = function (playlist) {
+  return playlist.excludeUntil && playlist.excludeUntil === Infinity;
+};
+/**
+ * Check whether the playlist is enabled or not.
+ *
+ * @param {Object} playlist the media playlist object
+ * @return {boolean} whether the playlist is enabled or not
+ * @function isEnabled
+ */
+
+const isEnabled = function (playlist) {
+  const excluded = isExcluded(playlist);
+  return !playlist.disabled && !excluded;
+};
+/**
+ * Check whether the playlist has been manually disabled through the representations api.
+ *
+ * @param {Object} playlist the media playlist object
+ * @return {boolean} whether the playlist is disabled manually or not
+ * @function isDisabled
+ */
+
+const isDisabled = function (playlist) {
+  return playlist.disabled;
+};
+/**
+ * Returns whether the current playlist is an AES encrypted HLS stream
+ *
+ * @return {boolean} true if it's an AES encrypted HLS stream
+ */
+
+const isAes = function (media) {
+  for (let i = 0; i < media.segments.length; i++) {
+    if (media.segments[i].key) {
+      return true;
+    }
+  }
+  return false;
+};
+/**
+ * Checks if the playlist has a value for the specified attribute
+ *
+ * @param {string} attr
+ *        Attribute to check for
+ * @param {Object} playlist
+ *        The media playlist object
+ * @return {boolean}
+ *         Whether the playlist contains a value for the attribute or not
+ * @function hasAttribute
+ */
+
+const hasAttribute = function (attr, playlist) {
+  return playlist.attributes && playlist.attributes[attr];
+};
+/**
+ * Estimates the time required to complete a segment download from the specified playlist
+ *
+ * @param {number} segmentDuration
+ *        Duration of requested segment
+ * @param {number} bandwidth
+ *        Current measured bandwidth of the player
+ * @param {Object} playlist
+ *        The media playlist object
+ * @param {number=} bytesReceived
+ *        Number of bytes already received for the request. Defaults to 0
+ * @return {number|NaN}
+ *         The estimated time to request the segment. NaN if bandwidth information for
+ *         the given playlist is unavailable
+ * @function estimateSegmentRequestTime
+ */
+
+const estimateSegmentRequestTime = function (segmentDuration, bandwidth, playlist, bytesReceived = 0) {
+  if (!hasAttribute('BANDWIDTH', playlist)) {
+    return NaN;
+  }
+  const size = segmentDuration * playlist.attributes.BANDWIDTH;
+  return (size - bytesReceived * 8) / bandwidth;
+};
+/*
+ * Returns whether the current playlist is the lowest rendition
+ *
+ * @return {Boolean} true if on lowest rendition
+ */
+
+const isLowestEnabledRendition = (main, media) => {
+  if (main.playlists.length === 1) {
+    return true;
+  }
+  const currentBandwidth = media.attributes.BANDWIDTH || Number.MAX_VALUE;
+  return main.playlists.filter(playlist => {
+    if (!isEnabled(playlist)) {
+      return false;
+    }
+    return (playlist.attributes.BANDWIDTH || 0) < currentBandwidth;
+  }).length === 0;
+};
+const playlistMatch = (a, b) => {
+  // both playlits are null
+  // or only one playlist is non-null
+  // no match
+  if (!a && !b || !a && b || a && !b) {
+    return false;
+  } // playlist objects are the same, match
+
+  if (a === b) {
+    return true;
+  } // first try to use id as it should be the most
+  // accurate
+
+  if (a.id && b.id && a.id === b.id) {
+    return true;
+  } // next try to use reslovedUri as it should be the
+  // second most accurate.
+
+  if (a.resolvedUri && b.resolvedUri && a.resolvedUri === b.resolvedUri) {
+    return true;
+  } // finally try to use uri as it should be accurate
+  // but might miss a few cases for relative uris
+
+  if (a.uri && b.uri && a.uri === b.uri) {
+    return true;
+  }
+  return false;
+};
+const someAudioVariant = function (main, callback) {
+  const AUDIO = main && main.mediaGroups && main.mediaGroups.AUDIO || {};
+  let found = false;
+  for (const groupName in AUDIO) {
+    for (const label in AUDIO[groupName]) {
+      found = callback(AUDIO[groupName][label]);
+      if (found) {
+        break;
+      }
+    }
+    if (found) {
+      break;
+    }
+  }
+  return !!found;
+};
+const isAudioOnly = main => {
+  // we are audio only if we have no main playlists but do
+  // have media group playlists.
+  if (!main || !main.playlists || !main.playlists.length) {
+    // without audio variants or playlists this
+    // is not an audio only main.
+    const found = someAudioVariant(main, variant => variant.playlists && variant.playlists.length || variant.uri);
+    return found;
+  } // if every playlist has only an audio codec it is audio only
+
+  for (let i = 0; i < main.playlists.length; i++) {
+    const playlist = main.playlists[i];
+    const CODECS = playlist.attributes && playlist.attributes.CODECS; // all codecs are audio, this is an audio playlist.
+
+    if (CODECS && CODECS.split(',').every(c => codecs_js.isAudioCodec(c))) {
+      continue;
+    } // playlist is in an audio group it is audio only
+
+    const found = someAudioVariant(main, variant => playlistMatch(playlist, variant));
+    if (found) {
+      continue;
+    } // if we make it here this playlist isn't audio and we
+    // are not audio only
+
+    return false;
+  } // if we make it past every playlist without returning, then
+  // this is an audio only playlist.
+
+  return true;
+}; // exports
+
+var Playlist = {
+  liveEdgeDelay,
+  duration,
+  seekable,
+  getMediaInfoForTime,
+  isEnabled,
+  isDisabled,
+  isExcluded,
+  isIncompatible,
+  playlistEnd,
+  isAes,
+  hasAttribute,
+  estimateSegmentRequestTime,
+  isLowestEnabledRendition,
+  isAudioOnly,
+  playlistMatch,
+  segmentDurationWithParts
+};
+const {
+  log
+} = videojs;
+const createPlaylistID = (index, uri) => {
+  return `${index}-${uri}`;
+}; // default function for creating a group id
+
+const groupID = (type, group, label) => {
+  return `placeholder-uri-${type}-${group}-${label}`;
+};
+/**
+ * Parses a given m3u8 playlist
+ *
+ * @param {Function} [onwarn]
+ *        a function to call when the parser triggers a warning event.
+ * @param {Function} [oninfo]
+ *        a function to call when the parser triggers an info event.
+ * @param {string} manifestString
+ *        The downloaded manifest string
+ * @param {Object[]} [customTagParsers]
+ *        An array of custom tag parsers for the m3u8-parser instance
+ * @param {Object[]} [customTagMappers]
+ *        An array of custom tag mappers for the m3u8-parser instance
+ * @param {boolean} [llhls]
+ *        Whether to keep ll-hls features in the manifest after parsing.
+ * @return {Object}
+ *         The manifest object
+ */
+
+const parseManifest = ({
+  onwarn,
+  oninfo,
+  manifestString,
+  customTagParsers = [],
+  customTagMappers = [],
+  llhls
+}) => {
+  const parser = new m3u8Parser.Parser();
+  if (onwarn) {
+    parser.on('warn', onwarn);
+  }
+  if (oninfo) {
+    parser.on('info', oninfo);
+  }
+  customTagParsers.forEach(customParser => parser.addParser(customParser));
+  customTagMappers.forEach(mapper => parser.addTagMapper(mapper));
+  parser.push(manifestString);
+  parser.end();
+  const manifest = parser.manifest; // remove llhls features from the parsed manifest
+  // if we don't want llhls support.
+
+  if (!llhls) {
+    ['preloadSegment', 'skip', 'serverControl', 'renditionReports', 'partInf', 'partTargetDuration'].forEach(function (k) {
+      if (manifest.hasOwnProperty(k)) {
+        delete manifest[k];
+      }
+    });
+    if (manifest.segments) {
+      manifest.segments.forEach(function (segment) {
+        ['parts', 'preloadHints'].forEach(function (k) {
+          if (segment.hasOwnProperty(k)) {
+            delete segment[k];
+          }
+        });
+      });
+    }
+  }
+  if (!manifest.targetDuration) {
+    let targetDuration = 10;
+    if (manifest.segments && manifest.segments.length) {
+      targetDuration = manifest.segments.reduce((acc, s) => Math.max(acc, s.duration), 0);
+    }
+    if (onwarn) {
+      onwarn({
+        message: `manifest has no targetDuration defaulting to ${targetDuration}`
+      });
+    }
+    manifest.targetDuration = targetDuration;
+  }
+  const parts = getLastParts(manifest);
+  if (parts.length && !manifest.partTargetDuration) {
+    const partTargetDuration = parts.reduce((acc, p) => Math.max(acc, p.duration), 0);
+    if (onwarn) {
+      onwarn({
+        message: `manifest has no partTargetDuration defaulting to ${partTargetDuration}`
+      });
+      log.error('LL-HLS manifest has parts but lacks required #EXT-X-PART-INF:PART-TARGET value. See https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis-09#section-4.4.3.7. Playback is not guaranteed.');
+    }
+    manifest.partTargetDuration = partTargetDuration;
+  }
+  return manifest;
+};
+/**
+ * Loops through all supported media groups in main and calls the provided
+ * callback for each group
+ *
+ * @param {Object} main
+ *        The parsed main manifest object
+ * @param {Function} callback
+ *        Callback to call for each media group
+ */
+
+const forEachMediaGroup = (main, callback) => {
+  if (!main.mediaGroups) {
+    return;
+  }
+  ['AUDIO', 'SUBTITLES'].forEach(mediaType => {
+    if (!main.mediaGroups[mediaType]) {
+      return;
+    }
+    for (const groupKey in main.mediaGroups[mediaType]) {
+      for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+        const mediaProperties = main.mediaGroups[mediaType][groupKey][labelKey];
+        callback(mediaProperties, mediaType, groupKey, labelKey);
+      }
+    }
+  });
+};
+/**
+ * Adds properties and attributes to the playlist to keep consistent functionality for
+ * playlists throughout VHS.
+ *
+ * @param {Object} config
+ *        Arguments object
+ * @param {Object} config.playlist
+ *        The media playlist
+ * @param {string} [config.uri]
+ *        The uri to the media playlist (if media playlist is not from within a main
+ *        playlist)
+ * @param {string} id
+ *        ID to use for the playlist
+ */
+
+const setupMediaPlaylist = ({
+  playlist,
+  uri,
+  id
+}) => {
+  playlist.id = id;
+  playlist.playlistErrors_ = 0;
+  if (uri) {
+    // For media playlists, m3u8-parser does not have access to a URI, as HLS media
+    // playlists do not contain their own source URI, but one is needed for consistency in
+    // VHS.
+    playlist.uri = uri;
+  } // For HLS main playlists, even though certain attributes MUST be defined, the
+  // stream may still be played without them.
+  // For HLS media playlists, m3u8-parser does not attach an attributes object to the
+  // manifest.
+  //
+  // To avoid undefined reference errors through the project, and make the code easier
+  // to write/read, add an empty attributes object for these cases.
+
+  playlist.attributes = playlist.attributes || {};
+};
+/**
+ * Adds ID, resolvedUri, and attributes properties to each playlist of the main, where
+ * necessary. In addition, creates playlist IDs for each playlist and adds playlist ID to
+ * playlist references to the playlists array.
+ *
+ * @param {Object} main
+ *        The main playlist
+ */
+
+const setupMediaPlaylists = main => {
+  let i = main.playlists.length;
+  while (i--) {
+    const playlist = main.playlists[i];
+    setupMediaPlaylist({
+      playlist,
+      id: createPlaylistID(i, playlist.uri)
+    });
+    playlist.resolvedUri = resolveUrl(main.uri, playlist.uri);
+    main.playlists[playlist.id] = playlist; // URI reference added for backwards compatibility
+
+    main.playlists[playlist.uri] = playlist; // Although the spec states an #EXT-X-STREAM-INF tag MUST have a BANDWIDTH attribute,
+    // the stream can be played without it. Although an attributes property may have been
+    // added to the playlist to prevent undefined references, issue a warning to fix the
+    // manifest.
+
+    if (!playlist.attributes.BANDWIDTH) {
+      log.warn('Invalid playlist STREAM-INF detected. Missing BANDWIDTH attribute.');
+    }
+  }
+};
+/**
+ * Adds resolvedUri properties to each media group.
+ *
+ * @param {Object} main
+ *        The main playlist
+ */
+
+const resolveMediaGroupUris = main => {
+  forEachMediaGroup(main, properties => {
+    if (properties.uri) {
+      properties.resolvedUri = resolveUrl(main.uri, properties.uri);
+    }
+  });
+};
+/**
+ * Creates a main playlist wrapper to insert a sole media playlist into.
+ *
+ * @param {Object} media
+ *        Media playlist
+ * @param {string} uri
+ *        The media URI
+ *
+ * @return {Object}
+ *         main playlist
+ */
+
+const mainForMedia = (media, uri) => {
+  const id = createPlaylistID(0, uri);
+  const main = {
+    mediaGroups: {
+      'AUDIO': {},
+      'VIDEO': {},
+      'CLOSED-CAPTIONS': {},
+      'SUBTITLES': {}
+    },
+    uri: window__default["default"].location.href,
+    resolvedUri: window__default["default"].location.href,
+    playlists: [{
+      uri,
+      id,
+      resolvedUri: uri,
+      // m3u8-parser does not attach an attributes property to media playlists so make
+      // sure that the property is attached to avoid undefined reference errors
+      attributes: {}
+    }]
+  }; // set up ID reference
+
+  main.playlists[id] = main.playlists[0]; // URI reference added for backwards compatibility
+
+  main.playlists[uri] = main.playlists[0];
+  return main;
+};
+/**
+ * Does an in-place update of the main manifest to add updated playlist URI references
+ * as well as other properties needed by VHS that aren't included by the parser.
+ *
+ * @param {Object} main
+ *        main manifest object
+ * @param {string} uri
+ *        The source URI
+ * @param {function} createGroupID
+ *        A function to determine how to create the groupID for mediaGroups
+ */
+
+const addPropertiesToMain = (main, uri, createGroupID = groupID) => {
+  main.uri = uri;
+  for (let i = 0; i < main.playlists.length; i++) {
+    if (!main.playlists[i].uri) {
+      // Set up phony URIs for the playlists since playlists are referenced by their URIs
+      // throughout VHS, but some formats (e.g., DASH) don't have external URIs
+      // TODO: consider adding dummy URIs in mpd-parser
+      const phonyUri = `placeholder-uri-${i}`;
+      main.playlists[i].uri = phonyUri;
+    }
+  }
+  const audioOnlyMain = isAudioOnly(main);
+  forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+    // add a playlist array under properties
+    if (!properties.playlists || !properties.playlists.length) {
+      // If the manifest is audio only and this media group does not have a uri, check
+      // if the media group is located in the main list of playlists. If it is, don't add
+      // placeholder properties as it shouldn't be considered an alternate audio track.
+      if (audioOnlyMain && mediaType === 'AUDIO' && !properties.uri) {
+        for (let i = 0; i < main.playlists.length; i++) {
+          const p = main.playlists[i];
+          if (p.attributes && p.attributes.AUDIO && p.attributes.AUDIO === groupKey) {
+            return;
+          }
+        }
+      }
+      properties.playlists = [_extends__default["default"]({}, properties)];
+    }
+    properties.playlists.forEach(function (p, i) {
+      const groupId = createGroupID(mediaType, groupKey, labelKey, p);
+      const id = createPlaylistID(i, groupId);
+      if (p.uri) {
+        p.resolvedUri = p.resolvedUri || resolveUrl(main.uri, p.uri);
+      } else {
+        // DEPRECATED, this has been added to prevent a breaking change.
+        // previously we only ever had a single media group playlist, so
+        // we mark the first playlist uri without prepending the index as we used to
+        // ideally we would do all of the playlists the same way.
+        p.uri = i === 0 ? groupId : id; // don't resolve a placeholder uri to an absolute url, just use
+        // the placeholder again
+
+        p.resolvedUri = p.uri;
+      }
+      p.id = p.id || id; // add an empty attributes object, all playlists are
+      // expected to have this.
+
+      p.attributes = p.attributes || {}; // setup ID and URI references (URI for backwards compatibility)
+
+      main.playlists[p.id] = p;
+      main.playlists[p.uri] = p;
+    });
+  });
+  setupMediaPlaylists(main);
+  resolveMediaGroupUris(main);
+};
+class DateRangesStorage {
+  constructor() {
+    this.offset_ = null;
+    this.pendingDateRanges_ = new Map();
+    this.processedDateRanges_ = new Map();
+  }
+  setOffset(segments = []) {
+    // already set
+    if (this.offset_ !== null) {
+      return;
+    } // no segment to process
+
+    if (!segments.length) {
+      return;
+    }
+    const [firstSegment] = segments; // no program date time
+
+    if (firstSegment.programDateTime === undefined) {
+      return;
+    } // Set offset as ProgramDateTime for the very first segment of the very first playlist load:
+
+    this.offset_ = firstSegment.programDateTime / 1000;
+  }
+  setPendingDateRanges(dateRanges = []) {
+    if (!dateRanges.length) {
+      return;
+    }
+    const [dateRange] = dateRanges;
+    const startTime = dateRange.startDate.getTime();
+    this.trimProcessedDateRanges_(startTime);
+    this.pendingDateRanges_ = dateRanges.reduce((map, pendingDateRange) => {
+      map.set(pendingDateRange.id, pendingDateRange);
+      return map;
+    }, new Map());
+  }
+  processDateRange(dateRange) {
+    this.pendingDateRanges_.delete(dateRange.id);
+    this.processedDateRanges_.set(dateRange.id, dateRange);
+  }
+  getDateRangesToProcess() {
+    if (this.offset_ === null) {
+      return [];
+    }
+    const dateRangeClasses = {};
+    const dateRangesToProcess = [];
+    this.pendingDateRanges_.forEach((dateRange, id) => {
+      if (this.processedDateRanges_.has(id)) {
+        return;
+      }
+      dateRange.startTime = dateRange.startDate.getTime() / 1000 - this.offset_;
+      dateRange.processDateRange = () => this.processDateRange(dateRange);
+      dateRangesToProcess.push(dateRange);
+      if (!dateRange.class) {
+        return;
+      }
+      if (dateRangeClasses[dateRange.class]) {
+        const length = dateRangeClasses[dateRange.class].push(dateRange);
+        dateRange.classListIndex = length - 1;
+      } else {
+        dateRangeClasses[dateRange.class] = [dateRange];
+        dateRange.classListIndex = 0;
+      }
+    });
+    for (const dateRange of dateRangesToProcess) {
+      const classList = dateRangeClasses[dateRange.class] || [];
+      if (dateRange.endDate) {
+        dateRange.endTime = dateRange.endDate.getTime() / 1000 - this.offset_;
+      } else if (dateRange.endOnNext && classList[dateRange.classListIndex + 1]) {
+        dateRange.endTime = classList[dateRange.classListIndex + 1].startTime;
+      } else if (dateRange.duration) {
+        dateRange.endTime = dateRange.startTime + dateRange.duration;
+      } else if (dateRange.plannedDuration) {
+        dateRange.endTime = dateRange.startTime + dateRange.plannedDuration;
+      } else {
+        dateRange.endTime = dateRange.startTime;
+      }
+    }
+    return dateRangesToProcess;
+  }
+  trimProcessedDateRanges_(startTime) {
+    const copy = new Map(this.processedDateRanges_);
+    copy.forEach((dateRange, id) => {
+      if (dateRange.startDate.getTime() < startTime) {
+        this.processedDateRanges_.delete(id);
+      }
+    });
+  }
+}
+const {
+  EventTarget: EventTarget$1
+} = videojs;
+const addLLHLSQueryDirectives = (uri, media) => {
+  if (media.endList || !media.serverControl) {
+    return uri;
+  }
+  const parameters = {};
+  if (media.serverControl.canBlockReload) {
+    const {
+      preloadSegment
+    } = media; // next msn is a zero based value, length is not.
+
+    let nextMSN = media.mediaSequence + media.segments.length; // If preload segment has parts then it is likely
+    // that we are going to request a part of that preload segment.
+    // the logic below is used to determine that.
+
+    if (preloadSegment) {
+      const parts = preloadSegment.parts || []; // _HLS_part is a zero based index
+
+      const nextPart = getKnownPartCount(media) - 1; // if nextPart is > -1 and not equal to just the
+      // length of parts, then we know we had part preload hints
+      // and we need to add the _HLS_part= query
+
+      if (nextPart > -1 && nextPart !== parts.length - 1) {
+        // add existing parts to our preload hints
+        // eslint-disable-next-line
+        parameters._HLS_part = nextPart;
+      } // this if statement makes sure that we request the msn
+      // of the preload segment if:
+      // 1. the preload segment had parts (and was not yet a full segment)
+      //    but was added to our segments array
+      // 2. the preload segment had preload hints for parts that are not in
+      //    the manifest yet.
+      // in all other cases we want the segment after the preload segment
+      // which will be given by using media.segments.length because it is 1 based
+      // rather than 0 based.
+
+      if (nextPart > -1 || parts.length) {
+        nextMSN--;
+      }
+    } // add _HLS_msn= in front of any _HLS_part query
+    // eslint-disable-next-line
+
+    parameters._HLS_msn = nextMSN;
+  }
+  if (media.serverControl && media.serverControl.canSkipUntil) {
+    // add _HLS_skip= infront of all other queries.
+    // eslint-disable-next-line
+    parameters._HLS_skip = media.serverControl.canSkipDateranges ? 'v2' : 'YES';
+  }
+  if (Object.keys(parameters).length) {
+    const parsedUri = new window__default["default"].URL(uri);
+    ['_HLS_skip', '_HLS_msn', '_HLS_part'].forEach(function (name) {
+      if (!parameters.hasOwnProperty(name)) {
+        return;
+      }
+      parsedUri.searchParams.set(name, parameters[name]);
+    });
+    uri = parsedUri.toString();
+  }
+  return uri;
+};
+/**
+ * Returns a new segment object with properties and
+ * the parts array merged.
+ *
+ * @param {Object} a the old segment
+ * @param {Object} b the new segment
+ *
+ * @return {Object} the merged segment
+ */
+
+const updateSegment = (a, b) => {
+  if (!a) {
+    return b;
+  }
+  const result = merge(a, b); // if only the old segment has preload hints
+  // and the new one does not, remove preload hints.
+
+  if (a.preloadHints && !b.preloadHints) {
+    delete result.preloadHints;
+  } // if only the old segment has parts
+  // then the parts are no longer valid
+
+  if (a.parts && !b.parts) {
+    delete result.parts; // if both segments have parts
+    // copy part propeties from the old segment
+    // to the new one.
+  } else if (a.parts && b.parts) {
+    for (let i = 0; i < b.parts.length; i++) {
+      if (a.parts && a.parts[i]) {
+        result.parts[i] = merge(a.parts[i], b.parts[i]);
+      }
+    }
+  } // set skipped to false for segments that have
+  // have had information merged from the old segment.
+
+  if (!a.skipped && b.skipped) {
+    result.skipped = false;
+  } // set preload to false for segments that have
+  // had information added in the new segment.
+
+  if (a.preload && !b.preload) {
+    result.preload = false;
+  }
+  return result;
+};
+/**
+ * Returns a new array of segments that is the result of merging
+ * properties from an older list of segments onto an updated
+ * list. No properties on the updated playlist will be ovewritten.
+ *
+ * @param {Array} original the outdated list of segments
+ * @param {Array} update the updated list of segments
+ * @param {number=} offset the index of the first update
+ * segment in the original segment list. For non-live playlists,
+ * this should always be zero and does not need to be
+ * specified. For live playlists, it should be the difference
+ * between the media sequence numbers in the original and updated
+ * playlists.
+ * @return {Array} a list of merged segment objects
+ */
+
+const updateSegments = (original, update, offset) => {
+  const oldSegments = original.slice();
+  const newSegments = update.slice();
+  offset = offset || 0;
+  const result = [];
+  let currentMap;
+  for (let newIndex = 0; newIndex < newSegments.length; newIndex++) {
+    const oldSegment = oldSegments[newIndex + offset];
+    const newSegment = newSegments[newIndex];
+    if (oldSegment) {
+      currentMap = oldSegment.map || currentMap;
+      result.push(updateSegment(oldSegment, newSegment));
+    } else {
+      // carry over map to new segment if it is missing
+      if (currentMap && !newSegment.map) {
+        newSegment.map = currentMap;
+      }
+      result.push(newSegment);
+    }
+  }
+  return result;
+};
+const resolveSegmentUris = (segment, baseUri) => {
+  // preloadSegment will not have a uri at all
+  // as the segment isn't actually in the manifest yet, only parts
+  if (!segment.resolvedUri && segment.uri) {
+    segment.resolvedUri = resolveUrl(baseUri, segment.uri);
+  }
+  if (segment.key && !segment.key.resolvedUri) {
+    segment.key.resolvedUri = resolveUrl(baseUri, segment.key.uri);
+  }
+  if (segment.map && !segment.map.resolvedUri) {
+    segment.map.resolvedUri = resolveUrl(baseUri, segment.map.uri);
+  }
+  if (segment.map && segment.map.key && !segment.map.key.resolvedUri) {
+    segment.map.key.resolvedUri = resolveUrl(baseUri, segment.map.key.uri);
+  }
+  if (segment.parts && segment.parts.length) {
+    segment.parts.forEach(p => {
+      if (p.resolvedUri) {
+        return;
+      }
+      p.resolvedUri = resolveUrl(baseUri, p.uri);
+    });
+  }
+  if (segment.preloadHints && segment.preloadHints.length) {
+    segment.preloadHints.forEach(p => {
+      if (p.resolvedUri) {
+        return;
+      }
+      p.resolvedUri = resolveUrl(baseUri, p.uri);
+    });
+  }
+};
+const getAllSegments = function (media) {
+  const segments = media.segments || [];
+  const preloadSegment = media.preloadSegment; // a preloadSegment with only preloadHints is not currently
+  // a usable segment, only include a preloadSegment that has
+  // parts.
+
+  if (preloadSegment && preloadSegment.parts && preloadSegment.parts.length) {
+    // if preloadHints has a MAP that means that the
+    // init segment is going to change. We cannot use any of the parts
+    // from this preload segment.
+    if (preloadSegment.preloadHints) {
+      for (let i = 0; i < preloadSegment.preloadHints.length; i++) {
+        if (preloadSegment.preloadHints[i].type === 'MAP') {
+          return segments;
+        }
+      }
+    } // set the duration for our preload segment to target duration.
+
+    preloadSegment.duration = media.targetDuration;
+    preloadSegment.preload = true;
+    segments.push(preloadSegment);
+  }
+  return segments;
+}; // consider the playlist unchanged if the playlist object is the same or
+// the number of segments is equal, the media sequence number is unchanged,
+// and this playlist hasn't become the end of the playlist
+
+const isPlaylistUnchanged = (a, b) => a === b || a.segments && b.segments && a.segments.length === b.segments.length && a.endList === b.endList && a.mediaSequence === b.mediaSequence && a.preloadSegment === b.preloadSegment;
+/**
+  * Returns a new main playlist that is the result of merging an
+  * updated media playlist into the original version. If the
+  * updated media playlist does not match any of the playlist
+  * entries in the original main playlist, null is returned.
+  *
+  * @param {Object} main a parsed main M3U8 object
+  * @param {Object} media a parsed media M3U8 object
+  * @return {Object} a new object that represents the original
+  * main playlist with the updated media playlist merged in, or
+  * null if the merge produced no change.
+  */
+
+const updateMain$1 = (main, newMedia, unchangedCheck = isPlaylistUnchanged) => {
+  const result = merge(main, {});
+  const oldMedia = result.playlists[newMedia.id];
+  if (!oldMedia) {
+    return null;
+  }
+  if (unchangedCheck(oldMedia, newMedia)) {
+    return null;
+  }
+  newMedia.segments = getAllSegments(newMedia);
+  const mergedPlaylist = merge(oldMedia, newMedia); // always use the new media's preload segment
+
+  if (mergedPlaylist.preloadSegment && !newMedia.preloadSegment) {
+    delete mergedPlaylist.preloadSegment;
+  } // if the update could overlap existing segment information, merge the two segment lists
+
+  if (oldMedia.segments) {
+    if (newMedia.skip) {
+      newMedia.segments = newMedia.segments || []; // add back in objects for skipped segments, so that we merge
+      // old properties into the new segments
+
+      for (let i = 0; i < newMedia.skip.skippedSegments; i++) {
+        newMedia.segments.unshift({
+          skipped: true
+        });
+      }
+    }
+    mergedPlaylist.segments = updateSegments(oldMedia.segments, newMedia.segments, newMedia.mediaSequence - oldMedia.mediaSequence);
+  } // resolve any segment URIs to prevent us from having to do it later
+
+  mergedPlaylist.segments.forEach(segment => {
+    resolveSegmentUris(segment, mergedPlaylist.resolvedUri);
+  }); // TODO Right now in the playlists array there are two references to each playlist, one
+  // that is referenced by index, and one by URI. The index reference may no longer be
+  // necessary.
+
+  for (let i = 0; i < result.playlists.length; i++) {
+    if (result.playlists[i].id === newMedia.id) {
+      result.playlists[i] = mergedPlaylist;
+    }
+  }
+  result.playlists[newMedia.id] = mergedPlaylist; // URI reference added for backwards compatibility
+
+  result.playlists[newMedia.uri] = mergedPlaylist; // update media group playlist references.
+
+  forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+    if (!properties.playlists) {
+      return;
+    }
+    for (let i = 0; i < properties.playlists.length; i++) {
+      if (newMedia.id === properties.playlists[i].id) {
+        properties.playlists[i] = mergedPlaylist;
+      }
+    }
+  });
+  return result;
+};
+/**
+ * Calculates the time to wait before refreshing a live playlist
+ *
+ * @param {Object} media
+ *        The current media
+ * @param {boolean} update
+ *        True if there were any updates from the last refresh, false otherwise
+ * @return {number}
+ *         The time in ms to wait before refreshing the live playlist
+ */
+
+const refreshDelay = (media, update) => {
+  const segments = media.segments || [];
+  const lastSegment = segments[segments.length - 1];
+  const lastPart = lastSegment && lastSegment.parts && lastSegment.parts[lastSegment.parts.length - 1];
+  const lastDuration = lastPart && lastPart.duration || lastSegment && lastSegment.duration;
+  if (update && lastDuration) {
+    return lastDuration * 1000;
+  } // if the playlist is unchanged since the last reload or last segment duration
+  // cannot be determined, try again after half the target duration
+
+  return (media.partTargetDuration || media.targetDuration || 10) * 500;
+};
+/**
+ * Load a playlist from a remote location
+ *
+ * @class PlaylistLoader
+ * @extends Stream
+ * @param {string|Object} src url or object of manifest
+ * @param {boolean} withCredentials the withCredentials xhr option
+ * @class
+ */
+
+class PlaylistLoader extends EventTarget$1 {
+  constructor(src, vhs, options = {}) {
+    super();
+    if (!src) {
+      throw new Error('A non-empty playlist URL or object is required');
+    }
+    this.logger_ = logger('PlaylistLoader');
+    const {
+      withCredentials = false
+    } = options;
+    this.src = src;
+    this.vhs_ = vhs;
+    this.withCredentials = withCredentials;
+    this.addDateRangesToTextTrack_ = options.addDateRangesToTextTrack;
+    const vhsOptions = vhs.options_;
+    this.customTagParsers = vhsOptions && vhsOptions.customTagParsers || [];
+    this.customTagMappers = vhsOptions && vhsOptions.customTagMappers || [];
+    this.llhls = vhsOptions && vhsOptions.llhls;
+    this.dateRangesStorage_ = new DateRangesStorage(); // initialize the loader state
+
+    this.state = 'HAVE_NOTHING'; // live playlist staleness timeout
+
+    this.handleMediaupdatetimeout_ = this.handleMediaupdatetimeout_.bind(this);
+    this.on('mediaupdatetimeout', this.handleMediaupdatetimeout_);
+    this.on('loadedplaylist', this.handleLoadedPlaylist_.bind(this));
+  }
+  handleLoadedPlaylist_() {
+    const mediaPlaylist = this.media();
+    if (!mediaPlaylist) {
+      return;
+    }
+    this.dateRangesStorage_.setOffset(mediaPlaylist.segments);
+    this.dateRangesStorage_.setPendingDateRanges(mediaPlaylist.dateRanges);
+    const availableDateRanges = this.dateRangesStorage_.getDateRangesToProcess();
+    if (!availableDateRanges.length || !this.addDateRangesToTextTrack_) {
+      return;
+    }
+    this.addDateRangesToTextTrack_(availableDateRanges);
+  }
+  handleMediaupdatetimeout_() {
+    if (this.state !== 'HAVE_METADATA') {
+      // only refresh the media playlist if no other activity is going on
+      return;
+    }
+    const media = this.media();
+    let uri = resolveUrl(this.main.uri, media.uri);
+    if (this.llhls) {
+      uri = addLLHLSQueryDirectives(uri, media);
+    }
+    this.state = 'HAVE_CURRENT_METADATA';
+    this.request = this.vhs_.xhr({
+      uri,
+      withCredentials: this.withCredentials,
+      requestType: 'hls-playlist'
+    }, (error, req) => {
+      // disposed
+      if (!this.request) {
+        return;
+      }
+      if (error) {
+        return this.playlistRequestError(this.request, this.media(), 'HAVE_METADATA');
+      }
+      this.haveMetadata({
+        playlistString: this.request.responseText,
+        url: this.media().uri,
+        id: this.media().id
+      });
+    });
+  }
+  playlistRequestError(xhr, playlist, startingState) {
+    const {
+      uri,
+      id
+    } = playlist; // any in-flight request is now finished
+
+    this.request = null;
+    if (startingState) {
+      this.state = startingState;
+    }
+    this.error = {
+      playlist: this.main.playlists[id],
+      status: xhr.status,
+      message: `HLS playlist request error at URL: ${uri}.`,
+      responseText: xhr.responseText,
+      code: xhr.status >= 500 ? 4 : 2,
+      metadata: {
+        errorType: videojs.Error.HlsPlaylistRequestError
+      }
+    };
+    this.trigger('error');
+  }
+  parseManifest_({
+    url,
+    manifestString
+  }) {
+    return parseManifest({
+      onwarn: ({
+        message
+      }) => this.logger_(`m3u8-parser warn for ${url}: ${message}`),
+      oninfo: ({
+        message
+      }) => this.logger_(`m3u8-parser info for ${url}: ${message}`),
+      manifestString,
+      customTagParsers: this.customTagParsers,
+      customTagMappers: this.customTagMappers,
+      llhls: this.llhls
+    });
+  }
+  /**
+   * Update the playlist loader's state in response to a new or updated playlist.
+   *
+   * @param {string} [playlistString]
+   *        Playlist string (if playlistObject is not provided)
+   * @param {Object} [playlistObject]
+   *        Playlist object (if playlistString is not provided)
+   * @param {string} url
+   *        URL of playlist
+   * @param {string} id
+   *        ID to use for playlist
+   */
+
+  haveMetadata({
+    playlistString,
+    playlistObject,
+    url,
+    id
+  }) {
+    // any in-flight request is now finished
+    this.request = null;
+    this.state = 'HAVE_METADATA';
+    const playlist = playlistObject || this.parseManifest_({
+      url,
+      manifestString: playlistString
+    });
+    playlist.lastRequest = Date.now();
+    setupMediaPlaylist({
+      playlist,
+      uri: url,
+      id
+    }); // merge this playlist into the main manifest
+
+    const update = updateMain$1(this.main, playlist);
+    this.targetDuration = playlist.partTargetDuration || playlist.targetDuration;
+    this.pendingMedia_ = null;
+    if (update) {
+      this.main = update;
+      this.media_ = this.main.playlists[id];
+    } else {
+      this.trigger('playlistunchanged');
+    }
+    this.updateMediaUpdateTimeout_(refreshDelay(this.media(), !!update));
+    this.trigger('loadedplaylist');
+  }
+  /**
+    * Abort any outstanding work and clean up.
+    */
+
+  dispose() {
+    this.trigger('dispose');
+    this.stopRequest();
+    window__default["default"].clearTimeout(this.mediaUpdateTimeout);
+    window__default["default"].clearTimeout(this.finalRenditionTimeout);
+    this.dateRangesStorage_ = new DateRangesStorage();
+    this.off();
+  }
+  stopRequest() {
+    if (this.request) {
+      const oldRequest = this.request;
+      this.request = null;
+      oldRequest.onreadystatechange = null;
+      oldRequest.abort();
+    }
+  }
+  /**
+    * When called without any arguments, returns the currently
+    * active media playlist. When called with a single argument,
+    * triggers the playlist loader to asynchronously switch to the
+    * specified media playlist. Calling this method while the
+    * loader is in the HAVE_NOTHING causes an error to be emitted
+    * but otherwise has no effect.
+    *
+    * @param {Object=} playlist the parsed media playlist
+    * object to switch to
+    * @param {boolean=} shouldDelay whether we should delay the request by half target duration
+    *
+    * @return {Playlist} the current loaded media
+    */
+
+  media(playlist, shouldDelay) {
+    // getter
+    if (!playlist) {
+      return this.media_;
+    } // setter
+
+    if (this.state === 'HAVE_NOTHING') {
+      throw new Error('Cannot switch media playlist from ' + this.state);
+    } // find the playlist object if the target playlist has been
+    // specified by URI
+
+    if (typeof playlist === 'string') {
+      if (!this.main.playlists[playlist]) {
+        throw new Error('Unknown playlist URI: ' + playlist);
+      }
+      playlist = this.main.playlists[playlist];
+    }
+    window__default["default"].clearTimeout(this.finalRenditionTimeout);
+    if (shouldDelay) {
+      const delay = (playlist.partTargetDuration || playlist.targetDuration) / 2 * 1000 || 5 * 1000;
+      this.finalRenditionTimeout = window__default["default"].setTimeout(this.media.bind(this, playlist, false), delay);
+      return;
+    }
+    const startingState = this.state;
+    const mediaChange = !this.media_ || playlist.id !== this.media_.id;
+    const mainPlaylistRef = this.main.playlists[playlist.id]; // switch to fully loaded playlists immediately
+
+    if (mainPlaylistRef && mainPlaylistRef.endList ||
+    // handle the case of a playlist object (e.g., if using vhs-json with a resolved
+    // media playlist or, for the case of demuxed audio, a resolved audio media group)
+    playlist.endList && playlist.segments.length) {
+      // abort outstanding playlist requests
+      if (this.request) {
+        this.request.onreadystatechange = null;
+        this.request.abort();
+        this.request = null;
+      }
+      this.state = 'HAVE_METADATA';
+      this.media_ = playlist; // trigger media change if the active media has been updated
+
+      if (mediaChange) {
+        this.trigger('mediachanging');
+        if (startingState === 'HAVE_MAIN_MANIFEST') {
+          // The initial playlist was a main manifest, and the first media selected was
+          // also provided (in the form of a resolved playlist object) as part of the
+          // source object (rather than just a URL). Therefore, since the media playlist
+          // doesn't need to be requested, loadedmetadata won't trigger as part of the
+          // normal flow, and needs an explicit trigger here.
+          this.trigger('loadedmetadata');
+        } else {
+          this.trigger('mediachange');
+        }
+      }
+      return;
+    } // We update/set the timeout here so that live playlists
+    // that are not a media change will "start" the loader as expected.
+    // We expect that this function will start the media update timeout
+    // cycle again. This also prevents a playlist switch failure from
+    // causing us to stall during live.
+
+    this.updateMediaUpdateTimeout_(refreshDelay(playlist, true)); // switching to the active playlist is a no-op
+
+    if (!mediaChange) {
+      return;
+    }
+    this.state = 'SWITCHING_MEDIA'; // there is already an outstanding playlist request
+
+    if (this.request) {
+      if (playlist.resolvedUri === this.request.url) {
+        // requesting to switch to the same playlist multiple times
+        // has no effect after the first
+        return;
+      }
+      this.request.onreadystatechange = null;
+      this.request.abort();
+      this.request = null;
+    } // request the new playlist
+
+    if (this.media_) {
+      this.trigger('mediachanging');
+    }
+    this.pendingMedia_ = playlist;
+    this.request = this.vhs_.xhr({
+      uri: playlist.resolvedUri,
+      withCredentials: this.withCredentials,
+      requestType: 'hls-playlist'
+    }, (error, req) => {
+      // disposed
+      if (!this.request) {
+        return;
+      }
+      playlist.lastRequest = Date.now();
+      playlist.resolvedUri = resolveManifestRedirect(playlist.resolvedUri, req);
+      if (error) {
+        return this.playlistRequestError(this.request, playlist, startingState);
+      }
+      this.haveMetadata({
+        playlistString: req.responseText,
+        url: playlist.uri,
+        id: playlist.id
+      }); // fire loadedmetadata the first time a media playlist is loaded
+
+      if (startingState === 'HAVE_MAIN_MANIFEST') {
+        this.trigger('loadedmetadata');
+      } else {
+        this.trigger('mediachange');
+      }
+    });
+  }
+  /**
+   * pause loading of the playlist
+   */
+
+  pause() {
+    if (this.mediaUpdateTimeout) {
+      window__default["default"].clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+    }
+    this.stopRequest();
+    if (this.state === 'HAVE_NOTHING') {
+      // If we pause the loader before any data has been retrieved, its as if we never
+      // started, so reset to an unstarted state.
+      this.started = false;
+    } // Need to restore state now that no activity is happening
+
+    if (this.state === 'SWITCHING_MEDIA') {
+      // if the loader was in the process of switching media, it should either return to
+      // HAVE_MAIN_MANIFEST or HAVE_METADATA depending on if the loader has loaded a media
+      // playlist yet. This is determined by the existence of loader.media_
+      if (this.media_) {
+        this.state = 'HAVE_METADATA';
+      } else {
+        this.state = 'HAVE_MAIN_MANIFEST';
+      }
+    } else if (this.state === 'HAVE_CURRENT_METADATA') {
+      this.state = 'HAVE_METADATA';
+    }
+  }
+  /**
+   * start loading of the playlist
+   */
+
+  load(shouldDelay) {
+    if (this.mediaUpdateTimeout) {
+      window__default["default"].clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+    }
+    const media = this.media();
+    if (shouldDelay) {
+      const delay = media ? (media.partTargetDuration || media.targetDuration) / 2 * 1000 : 5 * 1000;
+      this.mediaUpdateTimeout = window__default["default"].setTimeout(() => {
+        this.mediaUpdateTimeout = null;
+        this.load();
+      }, delay);
+      return;
+    }
+    if (!this.started) {
+      this.start();
+      return;
+    }
+    if (media && !media.endList) {
+      this.trigger('mediaupdatetimeout');
+    } else {
+      this.trigger('loadedplaylist');
+    }
+  }
+  updateMediaUpdateTimeout_(delay) {
+    if (this.mediaUpdateTimeout) {
+      window__default["default"].clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+    } // we only have use mediaupdatetimeout for live playlists.
+
+    if (!this.media() || this.media().endList) {
+      return;
+    }
+    this.mediaUpdateTimeout = window__default["default"].setTimeout(() => {
+      this.mediaUpdateTimeout = null;
+      this.trigger('mediaupdatetimeout');
+      this.updateMediaUpdateTimeout_(delay);
+    }, delay);
+  }
+  /**
+   * start loading of the playlist
+   */
+
+  start() {
+    this.started = true;
+    if (typeof this.src === 'object') {
+      // in the case of an entirely constructed manifest object (meaning there's no actual
+      // manifest on a server), default the uri to the page's href
+      if (!this.src.uri) {
+        this.src.uri = window__default["default"].location.href;
+      } // resolvedUri is added on internally after the initial request. Since there's no
+      // request for pre-resolved manifests, add on resolvedUri here.
+
+      this.src.resolvedUri = this.src.uri; // Since a manifest object was passed in as the source (instead of a URL), the first
+      // request can be skipped (since the top level of the manifest, at a minimum, is
+      // already available as a parsed manifest object). However, if the manifest object
+      // represents a main playlist, some media playlists may need to be resolved before
+      // the starting segment list is available. Therefore, go directly to setup of the
+      // initial playlist, and let the normal flow continue from there.
+      //
+      // Note that the call to setup is asynchronous, as other sections of VHS may assume
+      // that the first request is asynchronous.
+
+      setTimeout(() => {
+        this.setupInitialPlaylist(this.src);
+      }, 0);
+      return;
+    } // request the specified URL
+
+    this.request = this.vhs_.xhr({
+      uri: this.src,
+      withCredentials: this.withCredentials,
+      requestType: 'hls-playlist'
+    }, (error, req) => {
+      // disposed
+      if (!this.request) {
+        return;
+      } // clear the loader's request reference
+
+      this.request = null;
+      if (error) {
+        this.error = {
+          status: req.status,
+          message: `HLS playlist request error at URL: ${this.src}.`,
+          responseText: req.responseText,
+          // MEDIA_ERR_NETWORK
+          code: 2,
+          metadata: {
+            errorType: videojs.Error.HlsPlaylistRequestError
+          }
+        };
+        if (this.state === 'HAVE_NOTHING') {
+          this.started = false;
+        }
+        return this.trigger('error');
+      }
+      this.src = resolveManifestRedirect(this.src, req);
+      const manifest = this.parseManifest_({
+        manifestString: req.responseText,
+        url: this.src
+      });
+      this.setupInitialPlaylist(manifest);
+    });
+  }
+  srcUri() {
+    return typeof this.src === 'string' ? this.src : this.src.uri;
+  }
+  /**
+   * Given a manifest object that's either a main or media playlist, trigger the proper
+   * events and set the state of the playlist loader.
+   *
+   * If the manifest object represents a main playlist, `loadedplaylist` will be
+   * triggered to allow listeners to select a playlist. If none is selected, the loader
+   * will default to the first one in the playlists array.
+   *
+   * If the manifest object represents a media playlist, `loadedplaylist` will be
+   * triggered followed by `loadedmetadata`, as the only available playlist is loaded.
+   *
+   * In the case of a media playlist, a main playlist object wrapper with one playlist
+   * will be created so that all logic can handle playlists in the same fashion (as an
+   * assumed manifest object schema).
+   *
+   * @param {Object} manifest
+   *        The parsed manifest object
+   */
+
+  setupInitialPlaylist(manifest) {
+    this.state = 'HAVE_MAIN_MANIFEST';
+    if (manifest.playlists) {
+      this.main = manifest;
+      addPropertiesToMain(this.main, this.srcUri()); // If the initial main playlist has playlists wtih segments already resolved,
+      // then resolve URIs in advance, as they are usually done after a playlist request,
+      // which may not happen if the playlist is resolved.
+
+      manifest.playlists.forEach(playlist => {
+        playlist.segments = getAllSegments(playlist);
+        playlist.segments.forEach(segment => {
+          resolveSegmentUris(segment, playlist.resolvedUri);
+        });
+      });
+      this.trigger('loadedplaylist');
+      if (!this.request) {
+        // no media playlist was specifically selected so start
+        // from the first listed one
+        this.media(this.main.playlists[0]);
+      }
+      return;
+    } // In order to support media playlists passed in as vhs-json, the case where the uri
+    // is not provided as part of the manifest should be considered, and an appropriate
+    // default used.
+
+    const uri = this.srcUri() || window__default["default"].location.href;
+    this.main = mainForMedia(manifest, uri);
+    this.haveMetadata({
+      playlistObject: manifest,
+      url: uri,
+      id: this.main.playlists[0].id
+    });
+    this.trigger('loadedmetadata');
+  }
+  /**
+   * Updates or deletes a preexisting pathway clone.
+   * Ensures that all playlists related to the old pathway clone are
+   * either updated or deleted.
+   *
+   * @param {Object} clone On update, the pathway clone object for the newly updated pathway clone.
+   *        On delete, the old pathway clone object to be deleted.
+   * @param {boolean} isUpdate True if the pathway is to be updated,
+   *        false if it is meant to be deleted.
+   */
+
+  updateOrDeleteClone(clone, isUpdate) {
+    const main = this.main;
+    const pathway = clone.ID;
+    let i = main.playlists.length; // Iterate backwards through the playlist so we can remove playlists if necessary.
+
+    while (i--) {
+      const p = main.playlists[i];
+      if (p.attributes['PATHWAY-ID'] === pathway) {
+        const oldPlaylistUri = p.resolvedUri;
+        const oldPlaylistId = p.id; // update the indexed playlist and add new playlists by ID and URI
+
+        if (isUpdate) {
+          const newPlaylistUri = this.createCloneURI_(p.resolvedUri, clone);
+          const newPlaylistId = createPlaylistID(pathway, newPlaylistUri);
+          const attributes = this.createCloneAttributes_(pathway, p.attributes);
+          const updatedPlaylist = this.createClonePlaylist_(p, newPlaylistId, clone, attributes);
+          main.playlists[i] = updatedPlaylist;
+          main.playlists[newPlaylistId] = updatedPlaylist;
+          main.playlists[newPlaylistUri] = updatedPlaylist;
+        } else {
+          // Remove the indexed playlist.
+          main.playlists.splice(i, 1);
+        } // Remove playlists by the old ID and URI.
+
+        delete main.playlists[oldPlaylistId];
+        delete main.playlists[oldPlaylistUri];
+      }
+    }
+    this.updateOrDeleteCloneMedia(clone, isUpdate);
+  }
+  /**
+   * Updates or deletes media data based on the pathway clone object.
+   * Due to the complexity of the media groups and playlists, in all cases
+   * we remove all of the old media groups and playlists.
+   * On updates, we then create new media groups and playlists based on the
+   * new pathway clone object.
+   *
+   * @param {Object} clone The pathway clone object for the newly updated pathway clone.
+   * @param {boolean} isUpdate True if the pathway is to be updated,
+   *        false if it is meant to be deleted.
+   */
+
+  updateOrDeleteCloneMedia(clone, isUpdate) {
+    const main = this.main;
+    const id = clone.ID;
+    ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+      if (!main.mediaGroups[mediaType] || !main.mediaGroups[mediaType][id]) {
+        return;
+      }
+      for (const groupKey in main.mediaGroups[mediaType]) {
+        // Remove all media playlists for the media group for this pathway clone.
+        if (groupKey === id) {
+          for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+            const oldMedia = main.mediaGroups[mediaType][groupKey][labelKey];
+            oldMedia.playlists.forEach((p, i) => {
+              const oldMediaPlaylist = main.playlists[p.id];
+              const oldPlaylistId = oldMediaPlaylist.id;
+              const oldPlaylistUri = oldMediaPlaylist.resolvedUri;
+              delete main.playlists[oldPlaylistId];
+              delete main.playlists[oldPlaylistUri];
+            });
+          } // Delete the old media group.
+
+          delete main.mediaGroups[mediaType][groupKey];
+        }
+      }
+    }); // Create the new media groups and playlists if there is an update.
+
+    if (isUpdate) {
+      this.createClonedMediaGroups_(clone);
+    }
+  }
+  /**
+   * Given a pathway clone object, clones all necessary playlists.
+   *
+   * @param {Object} clone The pathway clone object.
+   * @param {Object} basePlaylist The original playlist to clone from.
+   */
+
+  addClonePathway(clone, basePlaylist = {}) {
+    const main = this.main;
+    const index = main.playlists.length;
+    const uri = this.createCloneURI_(basePlaylist.resolvedUri, clone);
+    const playlistId = createPlaylistID(clone.ID, uri);
+    const attributes = this.createCloneAttributes_(clone.ID, basePlaylist.attributes);
+    const playlist = this.createClonePlaylist_(basePlaylist, playlistId, clone, attributes);
+    main.playlists[index] = playlist; // add playlist by ID and URI
+
+    main.playlists[playlistId] = playlist;
+    main.playlists[uri] = playlist;
+    this.createClonedMediaGroups_(clone);
+  }
+  /**
+   * Given a pathway clone object we create clones of all media.
+   * In this function, all necessary information and updated playlists
+   * are added to the `mediaGroup` object.
+   * Playlists are also added to the `playlists` array so the media groups
+   * will be properly linked.
+   *
+   * @param {Object} clone The pathway clone object.
+   */
+
+  createClonedMediaGroups_(clone) {
+    const id = clone.ID;
+    const baseID = clone['BASE-ID'];
+    const main = this.main;
+    ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+      // If the media type doesn't exist, or there is already a clone, skip
+      // to the next media type.
+      if (!main.mediaGroups[mediaType] || main.mediaGroups[mediaType][id]) {
+        return;
+      }
+      for (const groupKey in main.mediaGroups[mediaType]) {
+        if (groupKey === baseID) {
+          // Create the group.
+          main.mediaGroups[mediaType][id] = {};
+        } else {
+          // There is no need to iterate over label keys in this case.
+          continue;
+        }
+        for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+          const oldMedia = main.mediaGroups[mediaType][groupKey][labelKey];
+          main.mediaGroups[mediaType][id][labelKey] = _extends__default["default"]({}, oldMedia);
+          const newMedia = main.mediaGroups[mediaType][id][labelKey]; // update URIs on the media
+
+          const newUri = this.createCloneURI_(oldMedia.resolvedUri, clone);
+          newMedia.resolvedUri = newUri;
+          newMedia.uri = newUri; // Reset playlists in the new media group.
+
+          newMedia.playlists = []; // Create new playlists in the newly cloned media group.
+
+          oldMedia.playlists.forEach((p, i) => {
+            const oldMediaPlaylist = main.playlists[p.id];
+            const group = groupID(mediaType, id, labelKey);
+            const newPlaylistID = createPlaylistID(id, group); // Check to see if it already exists
+
+            if (oldMediaPlaylist && !main.playlists[newPlaylistID]) {
+              const newMediaPlaylist = this.createClonePlaylist_(oldMediaPlaylist, newPlaylistID, clone);
+              const newPlaylistUri = newMediaPlaylist.resolvedUri;
+              main.playlists[newPlaylistID] = newMediaPlaylist;
+              main.playlists[newPlaylistUri] = newMediaPlaylist;
+            }
+            newMedia.playlists[i] = this.createClonePlaylist_(p, newPlaylistID, clone);
+          });
+        }
+      }
+    });
+  }
+  /**
+   * Using the original playlist to be cloned, and the pathway clone object
+   * information, we create a new playlist.
+   *
+   * @param {Object} basePlaylist  The original playlist to be cloned from.
+   * @param {string} id The desired id of the newly cloned playlist.
+   * @param {Object} clone The pathway clone object.
+   * @param {Object} attributes An optional object to populate the `attributes` property in the playlist.
+   *
+   * @return {Object} The combined cloned playlist.
+   */
+
+  createClonePlaylist_(basePlaylist, id, clone, attributes) {
+    const uri = this.createCloneURI_(basePlaylist.resolvedUri, clone);
+    const newProps = {
+      resolvedUri: uri,
+      uri,
+      id
+    }; // Remove all segments from previous playlist in the clone.
+
+    if (basePlaylist.segments) {
+      newProps.segments = [];
+    }
+    if (attributes) {
+      newProps.attributes = attributes;
+    }
+    return merge(basePlaylist, newProps);
+  }
+  /**
+   * Generates an updated URI for a cloned pathway based on the original
+   * pathway's URI and the paramaters from the pathway clone object in the
+   * content steering server response.
+   *
+   * @param {string} baseUri URI to be updated in the cloned pathway.
+   * @param {Object} clone The pathway clone object.
+   *
+   * @return {string} The updated URI for the cloned pathway.
+   */
+
+  createCloneURI_(baseURI, clone) {
+    const uri = new URL(baseURI);
+    uri.hostname = clone['URI-REPLACEMENT'].HOST;
+    const params = clone['URI-REPLACEMENT'].PARAMS; // Add params to the cloned URL.
+
+    for (const key of Object.keys(params)) {
+      uri.searchParams.set(key, params[key]);
+    }
+    return uri.href;
+  }
+  /**
+   * Helper function to create the attributes needed for the new clone.
+   * This mainly adds the necessary media attributes.
+   *
+   * @param {string} id The pathway clone object ID.
+   * @param {Object} oldAttributes The old attributes to compare to.
+   * @return {Object} The new attributes to add to the playlist.
+   */
+
+  createCloneAttributes_(id, oldAttributes) {
+    const attributes = {
+      ['PATHWAY-ID']: id
+    };
+    ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+      if (oldAttributes[mediaType]) {
+        attributes[mediaType] = id;
+      }
+    });
+    return attributes;
+  }
+  /**
+   * Returns the key ID set from a playlist
+   *
+   * @param {playlist} playlist to fetch the key ID set from.
+   * @return a Set of 32 digit hex strings that represent the unique keyIds for that playlist.
+   */
+
+  getKeyIdSet(playlist) {
+    if (playlist.contentProtection) {
+      const keyIds = new Set();
+      for (const keysystem in playlist.contentProtection) {
+        const keyId = playlist.contentProtection[keysystem].attributes.keyId;
+        if (keyId) {
+          keyIds.add(keyId.toLowerCase());
+        }
+      }
+      return keyIds;
+    }
+  }
+}
+
+/**
+ * @file xhr.js
+ */
+
+const callbackWrapper = function (request, error, response, callback) {
+  const reqResponse = request.responseType === 'arraybuffer' ? request.response : request.responseText;
+  if (!error && reqResponse) {
+    request.responseTime = Date.now();
+    request.roundTripTime = request.responseTime - request.requestTime;
+    request.bytesReceived = reqResponse.byteLength || reqResponse.length;
+    if (!request.bandwidth) {
+      request.bandwidth = Math.floor(request.bytesReceived / request.roundTripTime * 8 * 1000);
+    }
+  }
+  if (response.headers) {
+    request.responseHeaders = response.headers;
+  } // videojs.xhr now uses a specific code on the error
+  // object to signal that a request has timed out instead
+  // of setting a boolean on the request object
+
+  if (error && error.code === 'ETIMEDOUT') {
+    request.timedout = true;
+  } // videojs.xhr no longer considers status codes outside of 200 and 0
+  // (for file uris) to be errors, but the old XHR did, so emulate that
+  // behavior. Status 206 may be used in response to byterange requests.
+
+  if (!error && !request.aborted && response.statusCode !== 200 && response.statusCode !== 206 && response.statusCode !== 0) {
+    error = new Error('XHR Failed with a response of: ' + (request && (reqResponse || request.responseText)));
+  }
+  callback(error, request);
+};
+/**
+ * Iterates over the request hooks Set and calls them in order
+ *
+ * @param {Set} hooks the hook Set to iterate over
+ * @param {Object} options the request options to pass to the xhr wrapper
+ * @return the callback hook function return value, the modified or new options Object.
+ */
+
+const callAllRequestHooks = (requestSet, options) => {
+  if (!requestSet || !requestSet.size) {
+    return;
+  }
+  let newOptions = options;
+  requestSet.forEach(requestCallback => {
+    newOptions = requestCallback(newOptions);
+  });
+  return newOptions;
+};
+/**
+ * Iterates over the response hooks Set and calls them in order.
+ *
+ * @param {Set} hooks the hook Set to iterate over
+ * @param {Object} request the xhr request object
+ * @param {Object} error the xhr error object
+ * @param {Object} response the xhr response object
+ */
+
+const callAllResponseHooks = (responseSet, request, error, response) => {
+  if (!responseSet || !responseSet.size) {
+    return;
+  }
+  responseSet.forEach(responseCallback => {
+    responseCallback(request, error, response);
+  });
+};
+const xhrFactory = function () {
+  const xhr = function XhrFunction(options, callback) {
+    // Add a default timeout
+    options = merge({
+      timeout: 45e3
+    }, options); // Allow an optional user-specified function to modify the option
+    // object before we construct the xhr request
+    // TODO: Remove beforeRequest in the next major release.
+
+    const beforeRequest = XhrFunction.beforeRequest || videojs.Vhs.xhr.beforeRequest; // onRequest and onResponse hooks as a Set, at either the player or global level.
+    // TODO: new Set added here for beforeRequest alias. Remove this when beforeRequest is removed.
+
+    const _requestCallbackSet = XhrFunction._requestCallbackSet || videojs.Vhs.xhr._requestCallbackSet || new Set();
+    const _responseCallbackSet = XhrFunction._responseCallbackSet || videojs.Vhs.xhr._responseCallbackSet;
+    if (beforeRequest && typeof beforeRequest === 'function') {
+      videojs.log.warn('beforeRequest is deprecated, use onRequest instead.');
+      _requestCallbackSet.add(beforeRequest);
+    } // Use the standard videojs.xhr() method unless `videojs.Vhs.xhr` has been overriden
+    // TODO: switch back to videojs.Vhs.xhr.name === 'XhrFunction' when we drop IE11
+
+    const xhrMethod = videojs.Vhs.xhr.original === true ? videojs.xhr : videojs.Vhs.xhr; // call all registered onRequest hooks, assign new options.
+
+    const beforeRequestOptions = callAllRequestHooks(_requestCallbackSet, options); // Remove the beforeRequest function from the hooks set so stale beforeRequest functions are not called.
+
+    _requestCallbackSet.delete(beforeRequest); // xhrMethod will call XMLHttpRequest.open and XMLHttpRequest.send
+
+    const request = xhrMethod(beforeRequestOptions || options, function (error, response) {
+      // call all registered onResponse hooks
+      callAllResponseHooks(_responseCallbackSet, request, error, response);
+      return callbackWrapper(request, error, response, callback);
+    });
+    const originalAbort = request.abort;
+    request.abort = function () {
+      request.aborted = true;
+      return originalAbort.apply(request, arguments);
+    };
+    request.uri = options.uri;
+    request.requestTime = Date.now();
+    return request;
+  };
+  xhr.original = true;
+  return xhr;
+};
+/**
+ * Turns segment byterange into a string suitable for use in
+ * HTTP Range requests
+ *
+ * @param {Object} byterange - an object with two values defining the start and end
+ *                             of a byte-range
+ */
+
+const byterangeStr = function (byterange) {
+  // `byterangeEnd` is one less than `offset + length` because the HTTP range
+  // header uses inclusive ranges
+  let byterangeEnd;
+  const byterangeStart = byterange.offset;
+  if (typeof byterange.offset === 'bigint' || typeof byterange.length === 'bigint') {
+    byterangeEnd = window__default["default"].BigInt(byterange.offset) + window__default["default"].BigInt(byterange.length) - window__default["default"].BigInt(1);
+  } else {
+    byterangeEnd = byterange.offset + byterange.length - 1;
+  }
+  return 'bytes=' + byterangeStart + '-' + byterangeEnd;
+};
+/**
+ * Defines headers for use in the xhr request for a particular segment.
+ *
+ * @param {Object} segment - a simplified copy of the segmentInfo object
+ *                           from SegmentLoader
+ */
+
+const segmentXhrHeaders = function (segment) {
+  const headers = {};
+  if (segment.byterange) {
+    headers.Range = byterangeStr(segment.byterange);
+  }
+  return headers;
+};
+
+/**
+ * @file bin-utils.js
+ */
+
+/**
+ * convert a TimeRange to text
+ *
+ * @param {TimeRange} range the timerange to use for conversion
+ * @param {number} i the iterator on the range to convert
+ * @return {string} the range in string format
+ */
+
+const textRange = function (range, i) {
+  return range.start(i) + '-' + range.end(i);
+};
+/**
+ * format a number as hex string
+ *
+ * @param {number} e The number
+ * @param {number} i the iterator
+ * @return {string} the hex formatted number as a string
+ */
+
+const formatHexString = function (e, i) {
+  const value = e.toString(16);
+  return '00'.substring(0, 2 - value.length) + value + (i % 2 ? ' ' : '');
+};
+const formatAsciiString = function (e) {
+  if (e >= 0x20 && e < 0x7e) {
+    return String.fromCharCode(e);
+  }
+  return '.';
+};
+/**
+ * Creates an object for sending to a web worker modifying properties that are TypedArrays
+ * into a new object with seperated properties for the buffer, byteOffset, and byteLength.
+ *
+ * @param {Object} message
+ *        Object of properties and values to send to the web worker
+ * @return {Object}
+ *         Modified message with TypedArray values expanded
+ * @function createTransferableMessage
+ */
+
+const createTransferableMessage = function (message) {
+  const transferable = {};
+  Object.keys(message).forEach(key => {
+    const value = message[key];
+    if (byteHelpers.isArrayBufferView(value)) {
+      transferable[key] = {
+        bytes: value.buffer,
+        byteOffset: value.byteOffset,
+        byteLength: value.byteLength
+      };
+    } else {
+      transferable[key] = value;
+    }
+  });
+  return transferable;
+};
+/**
+ * Returns a unique string identifier for a media initialization
+ * segment.
+ *
+ * @param {Object} initSegment
+ *        the init segment object.
+ *
+ * @return {string} the generated init segment id
+ */
+
+const initSegmentId = function (initSegment) {
+  const byterange = initSegment.byterange || {
+    length: Infinity,
+    offset: 0
+  };
+  return [byterange.length, byterange.offset, initSegment.resolvedUri].join(',');
+};
+/**
+ * Returns a unique string identifier for a media segment key.
+ *
+ * @param {Object} key the encryption key
+ * @return {string} the unique id for the media segment key.
+ */
+
+const segmentKeyId = function (key) {
+  return key.resolvedUri;
+};
+/**
+ * utils to help dump binary data to the console
+ *
+ * @param {Array|TypedArray} data
+ *        data to dump to a string
+ *
+ * @return {string} the data as a hex string.
+ */
+
+const hexDump = data => {
+  const bytes = Array.prototype.slice.call(data);
+  const step = 16;
+  let result = '';
+  let hex;
+  let ascii;
+  for (let j = 0; j < bytes.length / step; j++) {
+    hex = bytes.slice(j * step, j * step + step).map(formatHexString).join('');
+    ascii = bytes.slice(j * step, j * step + step).map(formatAsciiString).join('');
+    result += hex + ' ' + ascii + '\n';
+  }
+  return result;
+};
+const tagDump = ({
+  bytes
+}) => hexDump(bytes);
+const textRanges = ranges => {
+  let result = '';
+  let i;
+  for (i = 0; i < ranges.length; i++) {
+    result += textRange(ranges, i) + ' ';
+  }
+  return result;
+};
+var utils = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  createTransferableMessage: createTransferableMessage,
+  initSegmentId: initSegmentId,
+  segmentKeyId: segmentKeyId,
+  hexDump: hexDump,
+  tagDump: tagDump,
+  textRanges: textRanges
+});
+
+// TODO handle fmp4 case where the timing info is accurate and doesn't involve transmux
+// 25% was arbitrarily chosen, and may need to be refined over time.
+
+const SEGMENT_END_FUDGE_PERCENT = 0.25;
+/**
+ * Converts a player time (any time that can be gotten/set from player.currentTime(),
+ * e.g., any time within player.seekable().start(0) to player.seekable().end(0)) to a
+ * program time (any time referencing the real world (e.g., EXT-X-PROGRAM-DATE-TIME)).
+ *
+ * The containing segment is required as the EXT-X-PROGRAM-DATE-TIME serves as an "anchor
+ * point" (a point where we have a mapping from program time to player time, with player
+ * time being the post transmux start of the segment).
+ *
+ * For more details, see [this doc](../../docs/program-time-from-player-time.md).
+ *
+ * @param {number} playerTime the player time
+ * @param {Object} segment the segment which contains the player time
+ * @return {Date} program time
+ */
+
+const playerTimeToProgramTime = (playerTime, segment) => {
+  if (!segment.dateTimeObject) {
+    // Can't convert without an "anchor point" for the program time (i.e., a time that can
+    // be used to map the start of a segment with a real world time).
+    return null;
+  }
+  const transmuxerPrependedSeconds = segment.videoTimingInfo.transmuxerPrependedSeconds;
+  const transmuxedStart = segment.videoTimingInfo.transmuxedPresentationStart; // get the start of the content from before old content is prepended
+
+  const startOfSegment = transmuxedStart + transmuxerPrependedSeconds;
+  const offsetFromSegmentStart = playerTime - startOfSegment;
+  return new Date(segment.dateTimeObject.getTime() + offsetFromSegmentStart * 1000);
+};
+const originalSegmentVideoDuration = videoTimingInfo => {
+  return videoTimingInfo.transmuxedPresentationEnd - videoTimingInfo.transmuxedPresentationStart - videoTimingInfo.transmuxerPrependedSeconds;
+};
+/**
+ * Finds a segment that contains the time requested given as an ISO-8601 string. The
+ * returned segment might be an estimate or an accurate match.
+ *
+ * @param {string} programTime The ISO-8601 programTime to find a match for
+ * @param {Object} playlist A playlist object to search within
+ */
+
+const findSegmentForProgramTime = (programTime, playlist) => {
+  // Assumptions:
+  //  - verifyProgramDateTimeTags has already been run
+  //  - live streams have been started
+  let dateTimeObject;
+  try {
+    dateTimeObject = new Date(programTime);
+  } catch (e) {
+    return null;
+  }
+  if (!playlist || !playlist.segments || playlist.segments.length === 0) {
+    return null;
+  }
+  let segment = playlist.segments[0];
+  if (dateTimeObject < new Date(segment.dateTimeObject)) {
+    // Requested time is before stream start.
+    return null;
+  }
+  for (let i = 0; i < playlist.segments.length - 1; i++) {
+    segment = playlist.segments[i];
+    const nextSegmentStart = new Date(playlist.segments[i + 1].dateTimeObject);
+    if (dateTimeObject < nextSegmentStart) {
+      break;
+    }
+  }
+  const lastSegment = playlist.segments[playlist.segments.length - 1];
+  const lastSegmentStart = lastSegment.dateTimeObject;
+  const lastSegmentDuration = lastSegment.videoTimingInfo ? originalSegmentVideoDuration(lastSegment.videoTimingInfo) : lastSegment.duration + lastSegment.duration * SEGMENT_END_FUDGE_PERCENT;
+  const lastSegmentEnd = new Date(lastSegmentStart.getTime() + lastSegmentDuration * 1000);
+  if (dateTimeObject > lastSegmentEnd) {
+    // Beyond the end of the stream, or our best guess of the end of the stream.
+    return null;
+  }
+  if (dateTimeObject > new Date(lastSegmentStart)) {
+    segment = lastSegment;
+  }
+  return {
+    segment,
+    estimatedStart: segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationStart : Playlist.duration(playlist, playlist.mediaSequence + playlist.segments.indexOf(segment)),
+    // Although, given that all segments have accurate date time objects, the segment
+    // selected should be accurate, unless the video has been transmuxed at some point
+    // (determined by the presence of the videoTimingInfo object), the segment's "player
+    // time" (the start time in the player) can't be considered accurate.
+    type: segment.videoTimingInfo ? 'accurate' : 'estimate'
+  };
+};
+/**
+ * Finds a segment that contains the given player time(in seconds).
+ *
+ * @param {number} time The player time to find a match for
+ * @param {Object} playlist A playlist object to search within
+ */
+
+const findSegmentForPlayerTime = (time, playlist) => {
+  // Assumptions:
+  // - there will always be a segment.duration
+  // - we can start from zero
+  // - segments are in time order
+  if (!playlist || !playlist.segments || playlist.segments.length === 0) {
+    return null;
+  }
+  let segmentEnd = 0;
+  let segment;
+  for (let i = 0; i < playlist.segments.length; i++) {
+    segment = playlist.segments[i]; // videoTimingInfo is set after the segment is downloaded and transmuxed, and
+    // should contain the most accurate values we have for the segment's player times.
+    //
+    // Use the accurate transmuxedPresentationEnd value if it is available, otherwise fall
+    // back to an estimate based on the manifest derived (inaccurate) segment.duration, to
+    // calculate an end value.
+
+    segmentEnd = segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationEnd : segmentEnd + segment.duration;
+    if (time <= segmentEnd) {
+      break;
+    }
+  }
+  const lastSegment = playlist.segments[playlist.segments.length - 1];
+  if (lastSegment.videoTimingInfo && lastSegment.videoTimingInfo.transmuxedPresentationEnd < time) {
+    // The time requested is beyond the stream end.
+    return null;
+  }
+  if (time > segmentEnd) {
+    // The time is within or beyond the last segment.
+    //
+    // Check to see if the time is beyond a reasonable guess of the end of the stream.
+    if (time > segmentEnd + lastSegment.duration * SEGMENT_END_FUDGE_PERCENT) {
+      // Technically, because the duration value is only an estimate, the time may still
+      // exist in the last segment, however, there isn't enough information to make even
+      // a reasonable estimate.
+      return null;
+    }
+    segment = lastSegment;
+  }
+  return {
+    segment,
+    estimatedStart: segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationStart : segmentEnd - segment.duration,
+    // Because videoTimingInfo is only set after transmux, it is the only way to get
+    // accurate timing values.
+    type: segment.videoTimingInfo ? 'accurate' : 'estimate'
+  };
+};
+/**
+ * Gives the offset of the comparisonTimestamp from the programTime timestamp in seconds.
+ * If the offset returned is positive, the programTime occurs after the
+ * comparisonTimestamp.
+ * If the offset is negative, the programTime occurs before the comparisonTimestamp.
+ *
+ * @param {string} comparisonTimeStamp An ISO-8601 timestamp to compare against
+ * @param {string} programTime The programTime as an ISO-8601 string
+ * @return {number} offset
+ */
+
+const getOffsetFromTimestamp = (comparisonTimeStamp, programTime) => {
+  let segmentDateTime;
+  let programDateTime;
+  try {
+    segmentDateTime = new Date(comparisonTimeStamp);
+    programDateTime = new Date(programTime);
+  } catch (e) {// TODO handle error
+  }
+  const segmentTimeEpoch = segmentDateTime.getTime();
+  const programTimeEpoch = programDateTime.getTime();
+  return (programTimeEpoch - segmentTimeEpoch) / 1000;
+};
+/**
+ * Checks that all segments in this playlist have programDateTime tags.
+ *
+ * @param {Object} playlist A playlist object
+ */
+
+const verifyProgramDateTimeTags = playlist => {
+  if (!playlist.segments || playlist.segments.length === 0) {
+    return false;
+  }
+  for (let i = 0; i < playlist.segments.length; i++) {
+    const segment = playlist.segments[i];
+    if (!segment.dateTimeObject) {
+      return false;
+    }
+  }
+  return true;
+};
+/**
+ * Returns the programTime of the media given a playlist and a playerTime.
+ * The playlist must have programDateTime tags for a programDateTime tag to be returned.
+ * If the segments containing the time requested have not been buffered yet, an estimate
+ * may be returned to the callback.
+ *
+ * @param {Object} args
+ * @param {Object} args.playlist A playlist object to search within
+ * @param {number} time A playerTime in seconds
+ * @param {Function} callback(err, programTime)
+ * @return {string} err.message A detailed error message
+ * @return {Object} programTime
+ * @return {number} programTime.mediaSeconds The streamTime in seconds
+ * @return {string} programTime.programDateTime The programTime as an ISO-8601 String
+ */
+
+const getProgramTime = ({
+  playlist,
+  time = undefined,
+  callback
+}) => {
+  if (!callback) {
+    throw new Error('getProgramTime: callback must be provided');
+  }
+  if (!playlist || time === undefined) {
+    return callback({
+      message: 'getProgramTime: playlist and time must be provided'
+    });
+  }
+  const matchedSegment = findSegmentForPlayerTime(time, playlist);
+  if (!matchedSegment) {
+    return callback({
+      message: 'valid programTime was not found'
+    });
+  }
+  if (matchedSegment.type === 'estimate') {
+    return callback({
+      message: 'Accurate programTime could not be determined.' + ' Please seek to e.seekTime and try again',
+      seekTime: matchedSegment.estimatedStart
+    });
+  }
+  const programTimeObject = {
+    mediaSeconds: time
+  };
+  const programTime = playerTimeToProgramTime(time, matchedSegment.segment);
+  if (programTime) {
+    programTimeObject.programDateTime = programTime.toISOString();
+  }
+  return callback(null, programTimeObject);
+};
+/**
+ * Seeks in the player to a time that matches the given programTime ISO-8601 string.
+ *
+ * @param {Object} args
+ * @param {string} args.programTime A programTime to seek to as an ISO-8601 String
+ * @param {Object} args.playlist A playlist to look within
+ * @param {number} args.retryCount The number of times to try for an accurate seek. Default is 2.
+ * @param {Function} args.seekTo A method to perform a seek
+ * @param {boolean} args.pauseAfterSeek Whether to end in a paused state after seeking. Default is true.
+ * @param {Object} args.tech The tech to seek on
+ * @param {Function} args.callback(err, newTime) A callback to return the new time to
+ * @return {string} err.message A detailed error message
+ * @return {number} newTime The exact time that was seeked to in seconds
+ */
+
+const seekToProgramTime = ({
+  programTime,
+  playlist,
+  retryCount = 2,
+  seekTo,
+  pauseAfterSeek = true,
+  tech,
+  callback
+}) => {
+  if (!callback) {
+    throw new Error('seekToProgramTime: callback must be provided');
+  }
+  if (typeof programTime === 'undefined' || !playlist || !seekTo) {
+    return callback({
+      message: 'seekToProgramTime: programTime, seekTo and playlist must be provided'
+    });
+  }
+  if (!playlist.endList && !tech.hasStarted_) {
+    return callback({
+      message: 'player must be playing a live stream to start buffering'
+    });
+  }
+  if (!verifyProgramDateTimeTags(playlist)) {
+    return callback({
+      message: 'programDateTime tags must be provided in the manifest ' + playlist.resolvedUri
+    });
+  }
+  const matchedSegment = findSegmentForProgramTime(programTime, playlist); // no match
+
+  if (!matchedSegment) {
+    return callback({
+      message: `${programTime} was not found in the stream`
+    });
+  }
+  const segment = matchedSegment.segment;
+  const mediaOffset = getOffsetFromTimestamp(segment.dateTimeObject, programTime);
+  if (matchedSegment.type === 'estimate') {
+    // we've run out of retries
+    if (retryCount === 0) {
+      return callback({
+        message: `${programTime} is not buffered yet. Try again`
+      });
+    }
+    seekTo(matchedSegment.estimatedStart + mediaOffset);
+    tech.one('seeked', () => {
+      seekToProgramTime({
+        programTime,
+        playlist,
+        retryCount: retryCount - 1,
+        seekTo,
+        pauseAfterSeek,
+        tech,
+        callback
+      });
+    });
+    return;
+  } // Since the segment.start value is determined from the buffered end or ending time
+  // of the prior segment, the seekToTime doesn't need to account for any transmuxer
+  // modifications.
+
+  const seekToTime = segment.start + mediaOffset;
+  const seekedCallback = () => {
+    return callback(null, tech.currentTime());
+  }; // listen for seeked event
+
+  tech.one('seeked', seekedCallback); // pause before seeking as video.js will restore this state
+
+  if (pauseAfterSeek) {
+    tech.pause();
+  }
+  seekTo(seekToTime);
+};
+
+// which will only happen if the request is complete.
+
+const callbackOnCompleted = (request, cb) => {
+  if (request.readyState === 4) {
+    return cb();
+  }
+  return;
+};
+const containerRequest = (uri, xhr, cb) => {
+  let bytes = [];
+  let id3Offset;
+  let finished = false;
+  const endRequestAndCallback = function (err, req, type, _bytes) {
+    req.abort();
+    finished = true;
+    return cb(err, req, type, _bytes);
+  };
+  const progressListener = function (error, request) {
+    if (finished) {
+      return;
+    }
+    if (error) {
+      return endRequestAndCallback(error, request, '', bytes);
+    } // grap the new part of content that was just downloaded
+
+    const newPart = request.responseText.substring(bytes && bytes.byteLength || 0, request.responseText.length); // add that onto bytes
+
+    bytes = byteHelpers.concatTypedArrays(bytes, byteHelpers.stringToBytes(newPart, true));
+    id3Offset = id3Offset || id3Helpers.getId3Offset(bytes); // we need at least 10 bytes to determine a type
+    // or we need at least two bytes after an id3Offset
+
+    if (bytes.length < 10 || id3Offset && bytes.length < id3Offset + 2) {
+      return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+    }
+    const type = containers.detectContainerForBytes(bytes); // if this looks like a ts segment but we don't have enough data
+    // to see the second sync byte, wait until we have enough data
+    // before declaring it ts
+
+    if (type === 'ts' && bytes.length < 188) {
+      return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+    } // this may be an unsynced ts segment
+    // wait for 376 bytes before detecting no container
+
+    if (!type && bytes.length < 376) {
+      return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+    }
+    return endRequestAndCallback(null, request, type, bytes);
+  };
+  const options = {
+    uri,
+    beforeSend(request) {
+      // this forces the browser to pass the bytes to us unprocessed
+      request.overrideMimeType('text/plain; charset=x-user-defined');
+      request.addEventListener('progress', function ({
+        total,
+        loaded
+      }) {
+        return callbackWrapper(request, null, {
+          statusCode: request.status
+        }, progressListener);
+      });
+    }
+  };
+  const request = xhr(options, function (error, response) {
+    return callbackWrapper(request, error, response, progressListener);
+  });
+  return request;
+};
+const {
+  EventTarget
+} = videojs;
+const dashPlaylistUnchanged = function (a, b) {
+  if (!isPlaylistUnchanged(a, b)) {
+    return false;
+  } // for dash the above check will often return true in scenarios where
+  // the playlist actually has changed because mediaSequence isn't a
+  // dash thing, and we often set it to 1. So if the playlists have the same amount
+  // of segments we return true.
+  // So for dash we need to make sure that the underlying segments are different.
+  // if sidx changed then the playlists are different.
+
+  if (a.sidx && b.sidx && (a.sidx.offset !== b.sidx.offset || a.sidx.length !== b.sidx.length)) {
+    return false;
+  } else if (!a.sidx && b.sidx || a.sidx && !b.sidx) {
+    return false;
+  } // one or the other does not have segments
+  // there was a change.
+
+  if (a.segments && !b.segments || !a.segments && b.segments) {
+    return false;
+  } // neither has segments nothing changed
+
+  if (!a.segments && !b.segments) {
+    return true;
+  } // check segments themselves
+
+  for (let i = 0; i < a.segments.length; i++) {
+    const aSegment = a.segments[i];
+    const bSegment = b.segments[i]; // if uris are different between segments there was a change
+
+    if (aSegment.uri !== bSegment.uri) {
+      return false;
+    } // neither segment has a byterange, there will be no byterange change.
+
+    if (!aSegment.byterange && !bSegment.byterange) {
+      continue;
+    }
+    const aByterange = aSegment.byterange;
+    const bByterange = bSegment.byterange; // if byterange only exists on one of the segments, there was a change.
+
+    if (aByterange && !bByterange || !aByterange && bByterange) {
+      return false;
+    } // if both segments have byterange with different offsets, there was a change.
+
+    if (aByterange.offset !== bByterange.offset || aByterange.length !== bByterange.length) {
+      return false;
+    }
+  } // if everything was the same with segments, this is the same playlist.
+
+  return true;
+};
+/**
+ * Use the representation IDs from the mpd object to create groupIDs, the NAME is set to mandatory representation
+ * ID in the parser. This allows for continuous playout across periods with the same representation IDs
+ * (continuous periods as defined in DASH-IF 3.2.12). This is assumed in the mpd-parser as well. If we want to support
+ * periods without continuous playback this function may need modification as well as the parser.
+ */
+
+const dashGroupId = (type, group, label, playlist) => {
+  // If the manifest somehow does not have an ID (non-dash compliant), use the label.
+  const playlistId = playlist.attributes.NAME || label;
+  return `placeholder-uri-${type}-${group}-${playlistId}`;
+};
+/**
+ * Parses the main XML string and updates playlist URI references.
+ *
+ * @param {Object} config
+ *        Object of arguments
+ * @param {string} config.mainXml
+ *        The mpd XML
+ * @param {string} config.srcUrl
+ *        The mpd URL
+ * @param {Date} config.clientOffset
+ *         A time difference between server and client
+ * @param {Object} config.sidxMapping
+ *        SIDX mappings for moof/mdat URIs and byte ranges
+ * @return {Object}
+ *         The parsed mpd manifest object
+ */
+
+const parseMainXml = ({
+  mainXml,
+  srcUrl,
+  clientOffset,
+  sidxMapping,
+  previousManifest
+}) => {
+  const manifest = mpdParser.parse(mainXml, {
+    manifestUri: srcUrl,
+    clientOffset,
+    sidxMapping,
+    previousManifest
+  });
+  addPropertiesToMain(manifest, srcUrl, dashGroupId);
+  return manifest;
+};
+/**
+ * Removes any mediaGroup labels that no longer exist in the newMain
+ *
+ * @param {Object} update
+ *         The previous mpd object being updated
+ * @param {Object} newMain
+ *         The new mpd object
+ */
+
+const removeOldMediaGroupLabels = (update, newMain) => {
+  forEachMediaGroup(update, (properties, type, group, label) => {
+    if (!(label in newMain.mediaGroups[type][group])) {
+      delete update.mediaGroups[type][group][label];
+    }
+  });
+};
+/**
+ * Returns a new main manifest that is the result of merging an updated main manifest
+ * into the original version.
+ *
+ * @param {Object} oldMain
+ *        The old parsed mpd object
+ * @param {Object} newMain
+ *        The updated parsed mpd object
+ * @return {Object}
+ *         A new object representing the original main manifest with the updated media
+ *         playlists merged in
+ */
+
+const updateMain = (oldMain, newMain, sidxMapping) => {
+  let noChanges = true;
+  let update = merge(oldMain, {
+    // These are top level properties that can be updated
+    duration: newMain.duration,
+    minimumUpdatePeriod: newMain.minimumUpdatePeriod,
+    timelineStarts: newMain.timelineStarts
+  }); // First update the playlists in playlist list
+
+  for (let i = 0; i < newMain.playlists.length; i++) {
+    const playlist = newMain.playlists[i];
+    if (playlist.sidx) {
+      const sidxKey = mpdParser.generateSidxKey(playlist.sidx); // add sidx segments to the playlist if we have all the sidx info already
+
+      if (sidxMapping && sidxMapping[sidxKey] && sidxMapping[sidxKey].sidx) {
+        mpdParser.addSidxSegmentsToPlaylist(playlist, sidxMapping[sidxKey].sidx, playlist.sidx.resolvedUri);
+      }
+    }
+    const playlistUpdate = updateMain$1(update, playlist, dashPlaylistUnchanged);
+    if (playlistUpdate) {
+      update = playlistUpdate;
+      noChanges = false;
+    }
+  } // Then update media group playlists
+
+  forEachMediaGroup(newMain, (properties, type, group, label) => {
+    if (properties.playlists && properties.playlists.length) {
+      const id = properties.playlists[0].id;
+      const playlistUpdate = updateMain$1(update, properties.playlists[0], dashPlaylistUnchanged);
+      if (playlistUpdate) {
+        update = playlistUpdate; // add new mediaGroup label if it doesn't exist and assign the new mediaGroup.
+
+        if (!(label in update.mediaGroups[type][group])) {
+          update.mediaGroups[type][group][label] = properties;
+        } // update the playlist reference within media groups
+
+        update.mediaGroups[type][group][label].playlists[0] = update.playlists[id];
+        noChanges = false;
+      }
+    }
+  }); // remove mediaGroup labels and references that no longer exist in the newMain
+
+  removeOldMediaGroupLabels(update, newMain);
+  if (newMain.minimumUpdatePeriod !== oldMain.minimumUpdatePeriod) {
+    noChanges = false;
+  }
+  if (noChanges) {
+    return null;
+  }
+  return update;
+}; // SIDX should be equivalent if the URI and byteranges of the SIDX match.
+// If the SIDXs have maps, the two maps should match,
+// both `a` and `b` missing SIDXs is considered matching.
+// If `a` or `b` but not both have a map, they aren't matching.
+
+const equivalentSidx = (a, b) => {
+  const neitherMap = Boolean(!a.map && !b.map);
+  const equivalentMap = neitherMap || Boolean(a.map && b.map && a.map.byterange.offset === b.map.byterange.offset && a.map.byterange.length === b.map.byterange.length);
+  return equivalentMap && a.uri === b.uri && a.byterange.offset === b.byterange.offset && a.byterange.length === b.byterange.length;
+}; // exported for testing
+
+const compareSidxEntry = (playlists, oldSidxMapping) => {
+  const newSidxMapping = {};
+  for (const id in playlists) {
+    const playlist = playlists[id];
+    const currentSidxInfo = playlist.sidx;
+    if (currentSidxInfo) {
+      const key = mpdParser.generateSidxKey(currentSidxInfo);
+      if (!oldSidxMapping[key]) {
+        break;
+      }
+      const savedSidxInfo = oldSidxMapping[key].sidxInfo;
+      if (equivalentSidx(savedSidxInfo, currentSidxInfo)) {
+        newSidxMapping[key] = oldSidxMapping[key];
+      }
+    }
+  }
+  return newSidxMapping;
+};
+/**
+ *  A function that filters out changed items as they need to be requested separately.
+ *
+ *  The method is exported for testing
+ *
+ *  @param {Object} main the parsed mpd XML returned via mpd-parser
+ *  @param {Object} oldSidxMapping the SIDX to compare against
+ */
+
+const filterChangedSidxMappings = (main, oldSidxMapping) => {
+  const videoSidx = compareSidxEntry(main.playlists, oldSidxMapping);
+  let mediaGroupSidx = videoSidx;
+  forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+    if (properties.playlists && properties.playlists.length) {
+      const playlists = properties.playlists;
+      mediaGroupSidx = merge(mediaGroupSidx, compareSidxEntry(playlists, oldSidxMapping));
+    }
+  });
+  return mediaGroupSidx;
+};
+class DashPlaylistLoader extends EventTarget {
+  // DashPlaylistLoader must accept either a src url or a playlist because subsequent
+  // playlist loader setups from media groups will expect to be able to pass a playlist
+  // (since there aren't external URLs to media playlists with DASH)
+  constructor(srcUrlOrPlaylist, vhs, options = {}, mainPlaylistLoader) {
+    super();
+    this.mainPlaylistLoader_ = mainPlaylistLoader || this;
+    if (!mainPlaylistLoader) {
+      this.isMain_ = true;
+    }
+    const {
+      withCredentials = false
+    } = options;
+    this.vhs_ = vhs;
+    this.withCredentials = withCredentials;
+    this.addMetadataToTextTrack = options.addMetadataToTextTrack;
+    if (!srcUrlOrPlaylist) {
+      throw new Error('A non-empty playlist URL or object is required');
+    } // event naming?
+
+    this.on('minimumUpdatePeriod', () => {
+      this.refreshXml_();
+    }); // live playlist staleness timeout
+
+    this.on('mediaupdatetimeout', () => {
+      this.refreshMedia_(this.media().id);
+    });
+    this.state = 'HAVE_NOTHING';
+    this.loadedPlaylists_ = {};
+    this.logger_ = logger('DashPlaylistLoader'); // initialize the loader state
+    // The mainPlaylistLoader will be created with a string
+
+    if (this.isMain_) {
+      this.mainPlaylistLoader_.srcUrl = srcUrlOrPlaylist; // TODO: reset sidxMapping between period changes
+      // once multi-period is refactored
+
+      this.mainPlaylistLoader_.sidxMapping_ = {};
+    } else {
+      this.childPlaylist_ = srcUrlOrPlaylist;
+    }
+  }
+  requestErrored_(err, request, startingState) {
+    // disposed
+    if (!this.request) {
+      return true;
+    } // pending request is cleared
+
+    this.request = null;
+    if (err) {
+      // use the provided error object or create one
+      // based on the request/response
+      this.error = typeof err === 'object' && !(err instanceof Error) ? err : {
+        status: request.status,
+        message: 'DASH request error at URL: ' + request.uri,
+        response: request.response,
+        // MEDIA_ERR_NETWORK
+        code: 2,
+        metadata: err.metadata
+      };
+      if (startingState) {
+        this.state = startingState;
+      }
+      this.trigger('error');
+      return true;
+    }
+  }
+  /**
+   * Verify that the container of the sidx segment can be parsed
+   * and if it can, get and parse that segment.
+   */
+
+  addSidxSegments_(playlist, startingState, cb) {
+    const sidxKey = playlist.sidx && mpdParser.generateSidxKey(playlist.sidx); // playlist lacks sidx or sidx segments were added to this playlist already.
+
+    if (!playlist.sidx || !sidxKey || this.mainPlaylistLoader_.sidxMapping_[sidxKey]) {
+      // keep this function async
+      this.mediaRequest_ = window__default["default"].setTimeout(() => cb(false), 0);
+      return;
+    } // resolve the segment URL relative to the playlist
+
+    const uri = resolveManifestRedirect(playlist.sidx.resolvedUri);
+    const fin = (err, request) => {
+      // TODO: add error metdata here once we create an error type in video.js
+      if (this.requestErrored_(err, request, startingState)) {
+        return;
+      }
+      const sidxMapping = this.mainPlaylistLoader_.sidxMapping_;
+      let sidx;
+      try {
+        sidx = parseSidx__default["default"](byteHelpers.toUint8(request.response).subarray(8));
+      } catch (e) {
+        e.metadata = {
+          errorType: videojs.Error.DashManifestSidxParsingError
+        }; // sidx parsing failed.
+
+        this.requestErrored_(e, request, startingState);
+        return;
+      }
+      sidxMapping[sidxKey] = {
+        sidxInfo: playlist.sidx,
+        sidx
+      };
+      mpdParser.addSidxSegmentsToPlaylist(playlist, sidx, playlist.sidx.resolvedUri);
+      return cb(true);
+    };
+    this.request = containerRequest(uri, this.vhs_.xhr, (err, request, container, bytes) => {
+      if (err) {
+        return fin(err, request);
+      }
+      if (!container || container !== 'mp4') {
+        const sidxContainer = container || 'unknown';
+        return fin({
+          status: request.status,
+          message: `Unsupported ${sidxContainer} container type for sidx segment at URL: ${uri}`,
+          // response is just bytes in this case
+          // but we really don't want to return that.
+          response: '',
+          playlist,
+          internal: true,
+          playlistExclusionDuration: Infinity,
+          // MEDIA_ERR_NETWORK
+          code: 2,
+          metadata: {
+            errorType: videojs.Error.UnsupportedSidxContainer,
+            sidxContainer
+          }
+        }, request);
+      } // if we already downloaded the sidx bytes in the container request, use them
+
+      const {
+        offset,
+        length
+      } = playlist.sidx.byterange;
+      if (bytes.length >= length + offset) {
+        return fin(err, {
+          response: bytes.subarray(offset, offset + length),
+          status: request.status,
+          uri: request.uri
+        });
+      } // otherwise request sidx bytes
+
+      this.request = this.vhs_.xhr({
+        uri,
+        responseType: 'arraybuffer',
+        headers: segmentXhrHeaders({
+          byterange: playlist.sidx.byterange
+        })
+      }, fin);
+    });
+  }
+  dispose() {
+    this.trigger('dispose');
+    this.stopRequest();
+    this.loadedPlaylists_ = {};
+    window__default["default"].clearTimeout(this.minimumUpdatePeriodTimeout_);
+    window__default["default"].clearTimeout(this.mediaRequest_);
+    window__default["default"].clearTimeout(this.mediaUpdateTimeout);
+    this.mediaUpdateTimeout = null;
+    this.mediaRequest_ = null;
+    this.minimumUpdatePeriodTimeout_ = null;
+    if (this.mainPlaylistLoader_.createMupOnMedia_) {
+      this.off('loadedmetadata', this.mainPlaylistLoader_.createMupOnMedia_);
+      this.mainPlaylistLoader_.createMupOnMedia_ = null;
+    }
+    this.off();
+  }
+  hasPendingRequest() {
+    return this.request || this.mediaRequest_;
+  }
+  stopRequest() {
+    if (this.request) {
+      const oldRequest = this.request;
+      this.request = null;
+      oldRequest.onreadystatechange = null;
+      oldRequest.abort();
+    }
+  }
+  media(playlist) {
+    // getter
+    if (!playlist) {
+      return this.media_;
+    } // setter
+
+    if (this.state === 'HAVE_NOTHING') {
+      throw new Error('Cannot switch media playlist from ' + this.state);
+    }
+    const startingState = this.state; // find the playlist object if the target playlist has been specified by URI
+
+    if (typeof playlist === 'string') {
+      if (!this.mainPlaylistLoader_.main.playlists[playlist]) {
+        throw new Error('Unknown playlist URI: ' + playlist);
+      }
+      playlist = this.mainPlaylistLoader_.main.playlists[playlist];
+    }
+    const mediaChange = !this.media_ || playlist.id !== this.media_.id; // switch to previously loaded playlists immediately
+
+    if (mediaChange && this.loadedPlaylists_[playlist.id] && this.loadedPlaylists_[playlist.id].endList) {
+      this.state = 'HAVE_METADATA';
+      this.media_ = playlist; // trigger media change if the active media has been updated
+
+      if (mediaChange) {
+        this.trigger('mediachanging');
+        this.trigger('mediachange');
+      }
+      return;
+    } // switching to the active playlist is a no-op
+
+    if (!mediaChange) {
+      return;
+    } // switching from an already loaded playlist
+
+    if (this.media_) {
+      this.trigger('mediachanging');
+    }
+    this.addSidxSegments_(playlist, startingState, sidxChanged => {
+      // everything is ready just continue to haveMetadata
+      this.haveMetadata({
+        startingState,
+        playlist
+      });
+    });
+  }
+  haveMetadata({
+    startingState,
+    playlist
+  }) {
+    this.state = 'HAVE_METADATA';
+    this.loadedPlaylists_[playlist.id] = playlist;
+    this.mediaRequest_ = null; // This will trigger loadedplaylist
+
+    this.refreshMedia_(playlist.id); // fire loadedmetadata the first time a media playlist is loaded
+    // to resolve setup of media groups
+
+    if (startingState === 'HAVE_MAIN_MANIFEST') {
+      this.trigger('loadedmetadata');
+    } else {
+      // trigger media change if the active media has been updated
+      this.trigger('mediachange');
+    }
+  }
+  pause() {
+    if (this.mainPlaylistLoader_.createMupOnMedia_) {
+      this.off('loadedmetadata', this.mainPlaylistLoader_.createMupOnMedia_);
+      this.mainPlaylistLoader_.createMupOnMedia_ = null;
+    }
+    this.stopRequest();
+    window__default["default"].clearTimeout(this.mediaUpdateTimeout);
+    this.mediaUpdateTimeout = null;
+    if (this.isMain_) {
+      window__default["default"].clearTimeout(this.mainPlaylistLoader_.minimumUpdatePeriodTimeout_);
+      this.mainPlaylistLoader_.minimumUpdatePeriodTimeout_ = null;
+    }
+    if (this.state === 'HAVE_NOTHING') {
+      // If we pause the loader before any data has been retrieved, its as if we never
+      // started, so reset to an unstarted state.
+      this.started = false;
+    }
+  }
+  load(isFinalRendition) {
+    window__default["default"].clearTimeout(this.mediaUpdateTimeout);
+    this.mediaUpdateTimeout = null;
+    const media = this.media();
+    if (isFinalRendition) {
+      const delay = media ? media.targetDuration / 2 * 1000 : 5 * 1000;
+      this.mediaUpdateTimeout = window__default["default"].setTimeout(() => this.load(), delay);
+      return;
+    } // because the playlists are internal to the manifest, load should either load the
+    // main manifest, or do nothing but trigger an event
+
+    if (!this.started) {
+      this.start();
+      return;
+    }
+    if (media && !media.endList) {
+      // Check to see if this is the main loader and the MUP was cleared (this happens
+      // when the loader was paused). `media` should be set at this point since one is always
+      // set during `start()`.
+      if (this.isMain_ && !this.minimumUpdatePeriodTimeout_) {
+        // Trigger minimumUpdatePeriod to refresh the main manifest
+        this.trigger('minimumUpdatePeriod'); // Since there was no prior minimumUpdatePeriodTimeout it should be recreated
+
+        this.updateMinimumUpdatePeriodTimeout_();
+      }
+      this.trigger('mediaupdatetimeout');
+    } else {
+      this.trigger('loadedplaylist');
+    }
+  }
+  start() {
+    this.started = true; // We don't need to request the main manifest again
+    // Call this asynchronously to match the xhr request behavior below
+
+    if (!this.isMain_) {
+      this.mediaRequest_ = window__default["default"].setTimeout(() => this.haveMain_(), 0);
+      return;
+    }
+    this.requestMain_((req, mainChanged) => {
+      this.haveMain_();
+      if (!this.hasPendingRequest() && !this.media_) {
+        this.media(this.mainPlaylistLoader_.main.playlists[0]);
+      }
+    });
+  }
+  requestMain_(cb) {
+    this.request = this.vhs_.xhr({
+      uri: this.mainPlaylistLoader_.srcUrl,
+      withCredentials: this.withCredentials,
+      requestType: 'dash-manifest'
+    }, (error, req) => {
+      if (this.requestErrored_(error, req)) {
+        if (this.state === 'HAVE_NOTHING') {
+          this.started = false;
+        }
+        return;
+      }
+      const mainChanged = req.responseText !== this.mainPlaylistLoader_.mainXml_;
+      this.mainPlaylistLoader_.mainXml_ = req.responseText;
+      if (req.responseHeaders && req.responseHeaders.date) {
+        this.mainLoaded_ = Date.parse(req.responseHeaders.date);
+      } else {
+        this.mainLoaded_ = Date.now();
+      }
+      this.mainPlaylistLoader_.srcUrl = resolveManifestRedirect(this.mainPlaylistLoader_.srcUrl, req);
+      if (mainChanged) {
+        this.handleMain_();
+        this.syncClientServerClock_(() => {
+          return cb(req, mainChanged);
+        });
+        return;
+      }
+      return cb(req, mainChanged);
+    });
+  }
+  /**
+   * Parses the main xml for UTCTiming node to sync the client clock to the server
+   * clock. If the UTCTiming node requires a HEAD or GET request, that request is made.
+   *
+   * @param {Function} done
+   *        Function to call when clock sync has completed
+   */
+
+  syncClientServerClock_(done) {
+    const utcTiming = mpdParser.parseUTCTiming(this.mainPlaylistLoader_.mainXml_); // No UTCTiming element found in the mpd. Use Date header from mpd request as the
+    // server clock
+
+    if (utcTiming === null) {
+      this.mainPlaylistLoader_.clientOffset_ = this.mainLoaded_ - Date.now();
+      return done();
+    }
+    if (utcTiming.method === 'DIRECT') {
+      this.mainPlaylistLoader_.clientOffset_ = utcTiming.value - Date.now();
+      return done();
+    }
+    this.request = this.vhs_.xhr({
+      uri: resolveUrl(this.mainPlaylistLoader_.srcUrl, utcTiming.value),
+      method: utcTiming.method,
+      withCredentials: this.withCredentials,
+      requestType: 'dash-clock-sync'
+    }, (error, req) => {
+      // disposed
+      if (!this.request) {
+        return;
+      }
+      if (error) {
+        // sync request failed, fall back to using date header from mpd
+        // TODO: log warning
+        this.mainPlaylistLoader_.clientOffset_ = this.mainLoaded_ - Date.now();
+        return done();
+      }
+      let serverTime;
+      if (utcTiming.method === 'HEAD') {
+        if (!req.responseHeaders || !req.responseHeaders.date) {
+          // expected date header not preset, fall back to using date header from mpd
+          // TODO: log warning
+          serverTime = this.mainLoaded_;
+        } else {
+          serverTime = Date.parse(req.responseHeaders.date);
+        }
+      } else {
+        serverTime = Date.parse(req.responseText);
+      }
+      this.mainPlaylistLoader_.clientOffset_ = serverTime - Date.now();
+      done();
+    });
+  }
+  haveMain_() {
+    this.state = 'HAVE_MAIN_MANIFEST';
+    if (this.isMain_) {
+      // We have the main playlist at this point, so
+      // trigger this to allow PlaylistController
+      // to make an initial playlist selection
+      this.trigger('loadedplaylist');
+    } else if (!this.media_) {
+      // no media playlist was specifically selected so select
+      // the one the child playlist loader was created with
+      this.media(this.childPlaylist_);
+    }
+  }
+  handleMain_() {
+    // clear media request
+    this.mediaRequest_ = null;
+    const oldMain = this.mainPlaylistLoader_.main;
+    let newMain = parseMainXml({
+      mainXml: this.mainPlaylistLoader_.mainXml_,
+      srcUrl: this.mainPlaylistLoader_.srcUrl,
+      clientOffset: this.mainPlaylistLoader_.clientOffset_,
+      sidxMapping: this.mainPlaylistLoader_.sidxMapping_,
+      previousManifest: oldMain
+    }); // if we have an old main to compare the new main against
+
+    if (oldMain) {
+      newMain = updateMain(oldMain, newMain, this.mainPlaylistLoader_.sidxMapping_);
+    } // only update main if we have a new main
+
+    this.mainPlaylistLoader_.main = newMain ? newMain : oldMain;
+    const location = this.mainPlaylistLoader_.main.locations && this.mainPlaylistLoader_.main.locations[0];
+    if (location && location !== this.mainPlaylistLoader_.srcUrl) {
+      this.mainPlaylistLoader_.srcUrl = location;
+    }
+    if (!oldMain || newMain && newMain.minimumUpdatePeriod !== oldMain.minimumUpdatePeriod) {
+      this.updateMinimumUpdatePeriodTimeout_();
+    }
+    this.addEventStreamToMetadataTrack_(newMain);
+    return Boolean(newMain);
+  }
+  updateMinimumUpdatePeriodTimeout_() {
+    const mpl = this.mainPlaylistLoader_; // cancel any pending creation of mup on media
+    // a new one will be added if needed.
+
+    if (mpl.createMupOnMedia_) {
+      mpl.off('loadedmetadata', mpl.createMupOnMedia_);
+      mpl.createMupOnMedia_ = null;
+    } // clear any pending timeouts
+
+    if (mpl.minimumUpdatePeriodTimeout_) {
+      window__default["default"].clearTimeout(mpl.minimumUpdatePeriodTimeout_);
+      mpl.minimumUpdatePeriodTimeout_ = null;
+    }
+    let mup = mpl.main && mpl.main.minimumUpdatePeriod; // If the minimumUpdatePeriod has a value of 0, that indicates that the current
+    // MPD has no future validity, so a new one will need to be acquired when new
+    // media segments are to be made available. Thus, we use the target duration
+    // in this case
+
+    if (mup === 0) {
+      if (mpl.media()) {
+        mup = mpl.media().targetDuration * 1000;
+      } else {
+        mpl.createMupOnMedia_ = mpl.updateMinimumUpdatePeriodTimeout_;
+        mpl.one('loadedmetadata', mpl.createMupOnMedia_);
+      }
+    } // if minimumUpdatePeriod is invalid or <= zero, which
+    // can happen when a live video becomes VOD. skip timeout
+    // creation.
+
+    if (typeof mup !== 'number' || mup <= 0) {
+      if (mup < 0) {
+        this.logger_(`found invalid minimumUpdatePeriod of ${mup}, not setting a timeout`);
+      }
+      return;
+    }
+    this.createMUPTimeout_(mup);
+  }
+  createMUPTimeout_(mup) {
+    const mpl = this.mainPlaylistLoader_;
+    mpl.minimumUpdatePeriodTimeout_ = window__default["default"].setTimeout(() => {
+      mpl.minimumUpdatePeriodTimeout_ = null;
+      mpl.trigger('minimumUpdatePeriod');
+      mpl.createMUPTimeout_(mup);
+    }, mup);
+  }
+  /**
+   * Sends request to refresh the main xml and updates the parsed main manifest
+   */
+
+  refreshXml_() {
+    this.requestMain_((req, mainChanged) => {
+      if (!mainChanged) {
+        return;
+      }
+      if (this.media_) {
+        this.media_ = this.mainPlaylistLoader_.main.playlists[this.media_.id];
+      } // This will filter out updated sidx info from the mapping
+
+      this.mainPlaylistLoader_.sidxMapping_ = filterChangedSidxMappings(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.sidxMapping_);
+      this.addSidxSegments_(this.media(), this.state, sidxChanged => {
+        // TODO: do we need to reload the current playlist?
+        this.refreshMedia_(this.media().id);
+      });
+    });
+  }
+  /**
+   * Refreshes the media playlist by re-parsing the main xml and updating playlist
+   * references. If this is an alternate loader, the updated parsed manifest is retrieved
+   * from the main loader.
+   */
+
+  refreshMedia_(mediaID) {
+    if (!mediaID) {
+      throw new Error('refreshMedia_ must take a media id');
+    } // for main we have to reparse the main xml
+    // to re-create segments based on current timing values
+    // which may change media. We only skip updating the main manifest
+    // if this is the first time this.media_ is being set.
+    // as main was just parsed in that case.
+
+    if (this.media_ && this.isMain_) {
+      this.handleMain_();
+    }
+    const playlists = this.mainPlaylistLoader_.main.playlists;
+    const mediaChanged = !this.media_ || this.media_ !== playlists[mediaID];
+    if (mediaChanged) {
+      this.media_ = playlists[mediaID];
+    } else {
+      this.trigger('playlistunchanged');
+    }
+    if (!this.mediaUpdateTimeout) {
+      const createMediaUpdateTimeout = () => {
+        if (this.media().endList) {
+          return;
+        }
+        this.mediaUpdateTimeout = window__default["default"].setTimeout(() => {
+          this.trigger('mediaupdatetimeout');
+          createMediaUpdateTimeout();
+        }, refreshDelay(this.media(), Boolean(mediaChanged)));
+      };
+      createMediaUpdateTimeout();
+    }
+    this.trigger('loadedplaylist');
+  }
+  /**
+   * Takes eventstream data from a parsed DASH manifest and adds it to the metadata text track.
+   *
+   * @param {manifest} newMain the newly parsed manifest
+   */
+
+  addEventStreamToMetadataTrack_(newMain) {
+    // Only add new event stream metadata if we have a new manifest.
+    if (newMain && this.mainPlaylistLoader_.main.eventStream) {
+      // convert EventStream to ID3-like data.
+      const metadataArray = this.mainPlaylistLoader_.main.eventStream.map(eventStreamNode => {
+        return {
+          cueTime: eventStreamNode.start,
+          frames: [{
+            data: eventStreamNode.messageData
+          }]
+        };
+      });
+      this.addMetadataToTextTrack('EventStream', metadataArray, this.mainPlaylistLoader_.main.duration);
+    }
+  }
+  /**
+   * Returns the key ID set from a playlist
+   *
+   * @param {playlist} playlist to fetch the key ID set from.
+   * @return a Set of 32 digit hex strings that represent the unique keyIds for that playlist.
+   */
+
+  getKeyIdSet(playlist) {
+    if (playlist.contentProtection) {
+      const keyIds = new Set();
+      for (const keysystem in playlist.contentProtection) {
+        const defaultKID = playlist.contentProtection[keysystem].attributes['cenc:default_KID'];
+        if (defaultKID) {
+          // DASH keyIds are separated by dashes.
+          keyIds.add(defaultKID.replace(/-/g, '').toLowerCase());
+        }
+      }
+      return keyIds;
+    }
+  }
+}
+var Config = {
+  GOAL_BUFFER_LENGTH: 30,
+  MAX_GOAL_BUFFER_LENGTH: 60,
+  BACK_BUFFER_LENGTH: 30,
+  GOAL_BUFFER_LENGTH_RATE: 1,
+  // 0.5 MB/s
+  INITIAL_BANDWIDTH: 4194304,
+  // A fudge factor to apply to advertised playlist bitrates to account for
+  // temporary flucations in client bandwidth
+  BANDWIDTH_VARIANCE: 1.2,
+  // How much of the buffer must be filled before we consider upswitching
+  BUFFER_LOW_WATER_LINE: 0,
+  MAX_BUFFER_LOW_WATER_LINE: 30,
+  // TODO: Remove this when experimentalBufferBasedABR is removed
+  EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE: 16,
+  BUFFER_LOW_WATER_LINE_RATE: 1,
+  // If the buffer is greater than the high water line, we won't switch down
+  BUFFER_HIGH_WATER_LINE: 30
+};
+const stringToArrayBuffer = string => {
+  const view = new Uint8Array(new ArrayBuffer(string.length));
+  for (let i = 0; i < string.length; i++) {
+    view[i] = string.charCodeAt(i);
+  }
+  return view.buffer;
+};
+
+/* global Blob, BlobBuilder, Worker */
+// unify worker interface
+const browserWorkerPolyFill = function (workerObj) {
+  // node only supports on/off
+  workerObj.on = workerObj.addEventListener;
+  workerObj.off = workerObj.removeEventListener;
+  return workerObj;
+};
+const createObjectURL = function (str) {
+  try {
+    return URL.createObjectURL(new Blob([str], {
+      type: 'application/javascript'
+    }));
+  } catch (e) {
+    const blob = new BlobBuilder();
+    blob.append(str);
+    return URL.createObjectURL(blob.getBlob());
+  }
+};
+const factory = function (code) {
+  return function () {
+    const objectUrl = createObjectURL(code);
+    const worker = browserWorkerPolyFill(new Worker(objectUrl));
+    worker.objURL = objectUrl;
+    const terminate = worker.terminate;
+    worker.on = worker.addEventListener;
+    worker.off = worker.removeEventListener;
+    worker.terminate = function () {
+      URL.revokeObjectURL(objectUrl);
+      return terminate.call(this);
+    };
+    return worker;
+  };
+};
+const transform = function (code) {
+  return `var browserWorkerPolyFill = ${browserWorkerPolyFill.toString()};\n` + 'browserWorkerPolyFill(self);\n' + code;
+};
+const getWorkerString = function (fn) {
+  return fn.toString().replace(/^function.+?{/, '').slice(0, -1);
+};
+
+/* rollup-plugin-worker-factory start for worker!/home/runner/work/http-streaming/http-streaming/src/transmuxer-worker.js */
+const workerCode$1 = transform(getWorkerString(function () {
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * A lightweight readable stream implemention that handles event dispatching.
+   * Objects that inherit from streams should call init in their constructors.
+   */
+
+  var Stream$8 = function () {
+    this.init = function () {
+      var listeners = {};
+      /**
+       * Add a listener for a specified event type.
+       * @param type {string} the event name
+       * @param listener {function} the callback to be invoked when an event of
+       * the specified type occurs
+       */
+
+      this.on = function (type, listener) {
+        if (!listeners[type]) {
+          listeners[type] = [];
+        }
+        listeners[type] = listeners[type].concat(listener);
+      };
+      /**
+       * Remove a listener for a specified event type.
+       * @param type {string} the event name
+       * @param listener {function} a function previously registered for this
+       * type of event through `on`
+       */
+
+      this.off = function (type, listener) {
+        var index;
+        if (!listeners[type]) {
+          return false;
+        }
+        index = listeners[type].indexOf(listener);
+        listeners[type] = listeners[type].slice();
+        listeners[type].splice(index, 1);
+        return index > -1;
+      };
+      /**
+       * Trigger an event of the specified type on this stream. Any additional
+       * arguments to this function are passed as parameters to event listeners.
+       * @param type {string} the event name
+       */
+
+      this.trigger = function (type) {
+        var callbacks, i, length, args;
+        callbacks = listeners[type];
+        if (!callbacks) {
+          return;
+        } // Slicing the arguments on every invocation of this method
+        // can add a significant amount of overhead. Avoid the
+        // intermediate object creation for the common case of a
+        // single callback argument
+
+        if (arguments.length === 2) {
+          length = callbacks.length;
+          for (i = 0; i < length; ++i) {
+            callbacks[i].call(this, arguments[1]);
+          }
+        } else {
+          args = [];
+          i = arguments.length;
+          for (i = 1; i < arguments.length; ++i) {
+            args.push(arguments[i]);
+          }
+          length = callbacks.length;
+          for (i = 0; i < length; ++i) {
+            callbacks[i].apply(this, args);
+          }
+        }
+      };
+      /**
+       * Destroys the stream and cleans up.
+       */
+
+      this.dispose = function () {
+        listeners = {};
+      };
+    };
+  };
+  /**
+   * Forwards all `data` events on this stream to the destination stream. The
+   * destination stream should provide a method `push` to receive the data
+   * events as they arrive.
+   * @param destination {stream} the stream that will receive all `data` events
+   * @param autoFlush {boolean} if false, we will not call `flush` on the destination
+   *                            when the current stream emits a 'done' event
+   * @see http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options
+   */
+
+  Stream$8.prototype.pipe = function (destination) {
+    this.on('data', function (data) {
+      destination.push(data);
+    });
+    this.on('done', function (flushSource) {
+      destination.flush(flushSource);
+    });
+    this.on('partialdone', function (flushSource) {
+      destination.partialFlush(flushSource);
+    });
+    this.on('endedtimeline', function (flushSource) {
+      destination.endTimeline(flushSource);
+    });
+    this.on('reset', function (flushSource) {
+      destination.reset(flushSource);
+    });
+    return destination;
+  }; // Default stream functions that are expected to be overridden to perform
+  // actual work. These are provided by the prototype as a sort of no-op
+  // implementation so that we don't have to check for their existence in the
+  // `pipe` function above.
+
+  Stream$8.prototype.push = function (data) {
+    this.trigger('data', data);
+  };
+  Stream$8.prototype.flush = function (flushSource) {
+    this.trigger('done', flushSource);
+  };
+  Stream$8.prototype.partialFlush = function (flushSource) {
+    this.trigger('partialdone', flushSource);
+  };
+  Stream$8.prototype.endTimeline = function (flushSource) {
+    this.trigger('endedtimeline', flushSource);
+  };
+  Stream$8.prototype.reset = function (flushSource) {
+    this.trigger('reset', flushSource);
+  };
+  var stream = Stream$8;
+  var MAX_UINT32$1 = Math.pow(2, 32);
+  var getUint64$3 = function (uint8) {
+    var dv = new DataView(uint8.buffer, uint8.byteOffset, uint8.byteLength);
+    var value;
+    if (dv.getBigUint64) {
+      value = dv.getBigUint64(0);
+      if (value < Number.MAX_SAFE_INTEGER) {
+        return Number(value);
+      }
+      return value;
+    }
+    return dv.getUint32(0) * MAX_UINT32$1 + dv.getUint32(4);
+  };
+  var numbers = {
+    getUint64: getUint64$3,
+    MAX_UINT32: MAX_UINT32$1
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Functions that generate fragmented MP4s suitable for use with Media
+   * Source Extensions.
+   */
+
+  var MAX_UINT32 = numbers.MAX_UINT32;
+  var box, dinf, esds, ftyp, mdat, mfhd, minf, moof, moov, mvex, mvhd, trak, tkhd, mdia, mdhd, hdlr, sdtp, stbl, stsd, traf, trex, trun$1, types, MAJOR_BRAND, MINOR_VERSION, AVC1_BRAND, VIDEO_HDLR, AUDIO_HDLR, HDLR_TYPES, VMHD, SMHD, DREF, STCO, STSC, STSZ, STTS; // pre-calculate constants
+
+  (function () {
+    var i;
+    types = {
+      avc1: [],
+      // codingname
+      avcC: [],
+      btrt: [],
+      dinf: [],
+      dref: [],
+      esds: [],
+      ftyp: [],
+      hdlr: [],
+      mdat: [],
+      mdhd: [],
+      mdia: [],
+      mfhd: [],
+      minf: [],
+      moof: [],
+      moov: [],
+      mp4a: [],
+      // codingname
+      mvex: [],
+      mvhd: [],
+      pasp: [],
+      sdtp: [],
+      smhd: [],
+      stbl: [],
+      stco: [],
+      stsc: [],
+      stsd: [],
+      stsz: [],
+      stts: [],
+      styp: [],
+      tfdt: [],
+      tfhd: [],
+      traf: [],
+      trak: [],
+      trun: [],
+      trex: [],
+      tkhd: [],
+      vmhd: []
+    }; // In environments where Uint8Array is undefined (e.g., IE8), skip set up so that we
+    // don't throw an error
+
+    if (typeof Uint8Array === 'undefined') {
+      return;
+    }
+    for (i in types) {
+      if (types.hasOwnProperty(i)) {
+        types[i] = [i.charCodeAt(0), i.charCodeAt(1), i.charCodeAt(2), i.charCodeAt(3)];
+      }
+    }
+    MAJOR_BRAND = new Uint8Array(['i'.charCodeAt(0), 's'.charCodeAt(0), 'o'.charCodeAt(0), 'm'.charCodeAt(0)]);
+    AVC1_BRAND = new Uint8Array(['a'.charCodeAt(0), 'v'.charCodeAt(0), 'c'.charCodeAt(0), '1'.charCodeAt(0)]);
+    MINOR_VERSION = new Uint8Array([0, 0, 0, 1]);
+    VIDEO_HDLR = new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00, 0x00, 0x00,
+    // pre_defined
+    0x76, 0x69, 0x64, 0x65,
+    // handler_type: 'vide'
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x56, 0x69, 0x64, 0x65, 0x6f, 0x48, 0x61, 0x6e, 0x64, 0x6c, 0x65, 0x72, 0x00 // name: 'VideoHandler'
+    ]);
+
+    AUDIO_HDLR = new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00, 0x00, 0x00,
+    // pre_defined
+    0x73, 0x6f, 0x75, 0x6e,
+    // handler_type: 'soun'
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x53, 0x6f, 0x75, 0x6e, 0x64, 0x48, 0x61, 0x6e, 0x64, 0x6c, 0x65, 0x72, 0x00 // name: 'SoundHandler'
+    ]);
+
+    HDLR_TYPES = {
+      video: VIDEO_HDLR,
+      audio: AUDIO_HDLR
+    };
+    DREF = new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00, 0x00, 0x01,
+    // entry_count
+    0x00, 0x00, 0x00, 0x0c,
+    // entry_size
+    0x75, 0x72, 0x6c, 0x20,
+    // 'url' type
+    0x00,
+    // version 0
+    0x00, 0x00, 0x01 // entry_flags
+    ]);
+
+    SMHD = new Uint8Array([0x00,
+    // version
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00,
+    // balance, 0 means centered
+    0x00, 0x00 // reserved
+    ]);
+
+    STCO = new Uint8Array([0x00,
+    // version
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00, 0x00, 0x00 // entry_count
+    ]);
+
+    STSC = STCO;
+    STSZ = new Uint8Array([0x00,
+    // version
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00, 0x00, 0x00,
+    // sample_size
+    0x00, 0x00, 0x00, 0x00 // sample_count
+    ]);
+
+    STTS = STCO;
+    VMHD = new Uint8Array([0x00,
+    // version
+    0x00, 0x00, 0x01,
+    // flags
+    0x00, 0x00,
+    // graphicsmode
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00 // opcolor
+    ]);
+  })();
+
+  box = function (type) {
+    var payload = [],
+      size = 0,
+      i,
+      result,
+      view;
+    for (i = 1; i < arguments.length; i++) {
+      payload.push(arguments[i]);
+    }
+    i = payload.length; // calculate the total size we need to allocate
+
+    while (i--) {
+      size += payload[i].byteLength;
+    }
+    result = new Uint8Array(size + 8);
+    view = new DataView(result.buffer, result.byteOffset, result.byteLength);
+    view.setUint32(0, result.byteLength);
+    result.set(type, 4); // copy the payload into the result
+
+    for (i = 0, size = 8; i < payload.length; i++) {
+      result.set(payload[i], size);
+      size += payload[i].byteLength;
+    }
+    return result;
+  };
+  dinf = function () {
+    return box(types.dinf, box(types.dref, DREF));
+  };
+  esds = function (track) {
+    return box(types.esds, new Uint8Array([0x00,
+    // version
+    0x00, 0x00, 0x00,
+    // flags
+    // ES_Descriptor
+    0x03,
+    // tag, ES_DescrTag
+    0x19,
+    // length
+    0x00, 0x00,
+    // ES_ID
+    0x00,
+    // streamDependenceFlag, URL_flag, reserved, streamPriority
+    // DecoderConfigDescriptor
+    0x04,
+    // tag, DecoderConfigDescrTag
+    0x11,
+    // length
+    0x40,
+    // object type
+    0x15,
+    // streamType
+    0x00, 0x06, 0x00,
+    // bufferSizeDB
+    0x00, 0x00, 0xda, 0xc0,
+    // maxBitrate
+    0x00, 0x00, 0xda, 0xc0,
+    // avgBitrate
+    // DecoderSpecificInfo
+    0x05,
+    // tag, DecoderSpecificInfoTag
+    0x02,
+    // length
+    // ISO/IEC 14496-3, AudioSpecificConfig
+    // for samplingFrequencyIndex see ISO/IEC 13818-7:2006, 8.1.3.2.2, Table 35
+    track.audioobjecttype << 3 | track.samplingfrequencyindex >>> 1, track.samplingfrequencyindex << 7 | track.channelcount << 3, 0x06, 0x01, 0x02 // GASpecificConfig
+    ]));
+  };
+
+  ftyp = function () {
+    return box(types.ftyp, MAJOR_BRAND, MINOR_VERSION, MAJOR_BRAND, AVC1_BRAND);
+  };
+  hdlr = function (type) {
+    return box(types.hdlr, HDLR_TYPES[type]);
+  };
+  mdat = function (data) {
+    return box(types.mdat, data);
+  };
+  mdhd = function (track) {
+    var result = new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00, 0x00, 0x02,
+    // creation_time
+    0x00, 0x00, 0x00, 0x03,
+    // modification_time
+    0x00, 0x01, 0x5f, 0x90,
+    // timescale, 90,000 "ticks" per second
+    track.duration >>> 24 & 0xFF, track.duration >>> 16 & 0xFF, track.duration >>> 8 & 0xFF, track.duration & 0xFF,
+    // duration
+    0x55, 0xc4,
+    // 'und' language (undetermined)
+    0x00, 0x00]); // Use the sample rate from the track metadata, when it is
+    // defined. The sample rate can be parsed out of an ADTS header, for
+    // instance.
+
+    if (track.samplerate) {
+      result[12] = track.samplerate >>> 24 & 0xFF;
+      result[13] = track.samplerate >>> 16 & 0xFF;
+      result[14] = track.samplerate >>> 8 & 0xFF;
+      result[15] = track.samplerate & 0xFF;
+    }
+    return box(types.mdhd, result);
+  };
+  mdia = function (track) {
+    return box(types.mdia, mdhd(track), hdlr(track.type), minf(track));
+  };
+  mfhd = function (sequenceNumber) {
+    return box(types.mfhd, new Uint8Array([0x00, 0x00, 0x00, 0x00,
+    // flags
+    (sequenceNumber & 0xFF000000) >> 24, (sequenceNumber & 0xFF0000) >> 16, (sequenceNumber & 0xFF00) >> 8, sequenceNumber & 0xFF // sequence_number
+    ]));
+  };
+
+  minf = function (track) {
+    return box(types.minf, track.type === 'video' ? box(types.vmhd, VMHD) : box(types.smhd, SMHD), dinf(), stbl(track));
+  };
+  moof = function (sequenceNumber, tracks) {
+    var trackFragments = [],
+      i = tracks.length; // build traf boxes for each track fragment
+
+    while (i--) {
+      trackFragments[i] = traf(tracks[i]);
+    }
+    return box.apply(null, [types.moof, mfhd(sequenceNumber)].concat(trackFragments));
+  };
+  /**
+   * Returns a movie box.
+   * @param tracks {array} the tracks associated with this movie
+   * @see ISO/IEC 14496-12:2012(E), section 8.2.1
+   */
+
+  moov = function (tracks) {
+    var i = tracks.length,
+      boxes = [];
+    while (i--) {
+      boxes[i] = trak(tracks[i]);
+    }
+    return box.apply(null, [types.moov, mvhd(0xffffffff)].concat(boxes).concat(mvex(tracks)));
+  };
+  mvex = function (tracks) {
+    var i = tracks.length,
+      boxes = [];
+    while (i--) {
+      boxes[i] = trex(tracks[i]);
+    }
+    return box.apply(null, [types.mvex].concat(boxes));
+  };
+  mvhd = function (duration) {
+    var bytes = new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00, 0x00, 0x01,
+    // creation_time
+    0x00, 0x00, 0x00, 0x02,
+    // modification_time
+    0x00, 0x01, 0x5f, 0x90,
+    // timescale, 90,000 "ticks" per second
+    (duration & 0xFF000000) >> 24, (duration & 0xFF0000) >> 16, (duration & 0xFF00) >> 8, duration & 0xFF,
+    // duration
+    0x00, 0x01, 0x00, 0x00,
+    // 1.0 rate
+    0x01, 0x00,
+    // 1.0 volume
+    0x00, 0x00,
+    // reserved
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x00,
+    // transformation: unity matrix
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // pre_defined
+    0xff, 0xff, 0xff, 0xff // next_track_ID
+    ]);
+
+    return box(types.mvhd, bytes);
+  };
+  sdtp = function (track) {
+    var samples = track.samples || [],
+      bytes = new Uint8Array(4 + samples.length),
+      flags,
+      i; // leave the full box header (4 bytes) all zero
+    // write the sample table
+
+    for (i = 0; i < samples.length; i++) {
+      flags = samples[i].flags;
+      bytes[i + 4] = flags.dependsOn << 4 | flags.isDependedOn << 2 | flags.hasRedundancy;
+    }
+    return box(types.sdtp, bytes);
+  };
+  stbl = function (track) {
+    return box(types.stbl, stsd(track), box(types.stts, STTS), box(types.stsc, STSC), box(types.stsz, STSZ), box(types.stco, STCO));
+  };
+  (function () {
+    var videoSample, audioSample;
+    stsd = function (track) {
+      return box(types.stsd, new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x01]), track.type === 'video' ? videoSample(track) : audioSample(track));
+    };
+    videoSample = function (track) {
+      var sps = track.sps || [],
+        pps = track.pps || [],
+        sequenceParameterSets = [],
+        pictureParameterSets = [],
+        i,
+        avc1Box; // assemble the SPSs
+
+      for (i = 0; i < sps.length; i++) {
+        sequenceParameterSets.push((sps[i].byteLength & 0xFF00) >>> 8);
+        sequenceParameterSets.push(sps[i].byteLength & 0xFF); // sequenceParameterSetLength
+
+        sequenceParameterSets = sequenceParameterSets.concat(Array.prototype.slice.call(sps[i])); // SPS
+      } // assemble the PPSs
+
+      for (i = 0; i < pps.length; i++) {
+        pictureParameterSets.push((pps[i].byteLength & 0xFF00) >>> 8);
+        pictureParameterSets.push(pps[i].byteLength & 0xFF);
+        pictureParameterSets = pictureParameterSets.concat(Array.prototype.slice.call(pps[i]));
+      }
+      avc1Box = [types.avc1, new Uint8Array([0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x01,
+      // data_reference_index
+      0x00, 0x00,
+      // pre_defined
+      0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      // pre_defined
+      (track.width & 0xff00) >> 8, track.width & 0xff,
+      // width
+      (track.height & 0xff00) >> 8, track.height & 0xff,
+      // height
+      0x00, 0x48, 0x00, 0x00,
+      // horizresolution
+      0x00, 0x48, 0x00, 0x00,
+      // vertresolution
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x01,
+      // frame_count
+      0x13, 0x76, 0x69, 0x64, 0x65, 0x6f, 0x6a, 0x73, 0x2d, 0x63, 0x6f, 0x6e, 0x74, 0x72, 0x69, 0x62, 0x2d, 0x68, 0x6c, 0x73, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      // compressorname
+      0x00, 0x18,
+      // depth = 24
+      0x11, 0x11 // pre_defined = -1
+      ]), box(types.avcC, new Uint8Array([0x01,
+      // configurationVersion
+      track.profileIdc,
+      // AVCProfileIndication
+      track.profileCompatibility,
+      // profile_compatibility
+      track.levelIdc,
+      // AVCLevelIndication
+      0xff // lengthSizeMinusOne, hard-coded to 4 bytes
+      ].concat([sps.length],
+      // numOfSequenceParameterSets
+      sequenceParameterSets,
+      // "SPS"
+      [pps.length],
+      // numOfPictureParameterSets
+      pictureParameterSets // "PPS"
+      ))), box(types.btrt, new Uint8Array([0x00, 0x1c, 0x9c, 0x80,
+      // bufferSizeDB
+      0x00, 0x2d, 0xc6, 0xc0,
+      // maxBitrate
+      0x00, 0x2d, 0xc6, 0xc0 // avgBitrate
+      ]))];
+
+      if (track.sarRatio) {
+        var hSpacing = track.sarRatio[0],
+          vSpacing = track.sarRatio[1];
+        avc1Box.push(box(types.pasp, new Uint8Array([(hSpacing & 0xFF000000) >> 24, (hSpacing & 0xFF0000) >> 16, (hSpacing & 0xFF00) >> 8, hSpacing & 0xFF, (vSpacing & 0xFF000000) >> 24, (vSpacing & 0xFF0000) >> 16, (vSpacing & 0xFF00) >> 8, vSpacing & 0xFF])));
+      }
+      return box.apply(null, avc1Box);
+    };
+    audioSample = function (track) {
+      return box(types.mp4a, new Uint8Array([
+      // SampleEntry, ISO/IEC 14496-12
+      0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x01,
+      // data_reference_index
+      // AudioSampleEntry, ISO/IEC 14496-12
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      (track.channelcount & 0xff00) >> 8, track.channelcount & 0xff,
+      // channelcount
+      (track.samplesize & 0xff00) >> 8, track.samplesize & 0xff,
+      // samplesize
+      0x00, 0x00,
+      // pre_defined
+      0x00, 0x00,
+      // reserved
+      (track.samplerate & 0xff00) >> 8, track.samplerate & 0xff, 0x00, 0x00 // samplerate, 16.16
+      // MP4AudioSampleEntry, ISO/IEC 14496-14
+      ]), esds(track));
+    };
+  })();
+  tkhd = function (track) {
+    var result = new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x07,
+    // flags
+    0x00, 0x00, 0x00, 0x00,
+    // creation_time
+    0x00, 0x00, 0x00, 0x00,
+    // modification_time
+    (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+    // track_ID
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    (track.duration & 0xFF000000) >> 24, (track.duration & 0xFF0000) >> 16, (track.duration & 0xFF00) >> 8, track.duration & 0xFF,
+    // duration
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x00, 0x00,
+    // layer
+    0x00, 0x00,
+    // alternate_group
+    0x01, 0x00,
+    // non-audio track volume
+    0x00, 0x00,
+    // reserved
+    0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x00,
+    // transformation: unity matrix
+    (track.width & 0xFF00) >> 8, track.width & 0xFF, 0x00, 0x00,
+    // width
+    (track.height & 0xFF00) >> 8, track.height & 0xFF, 0x00, 0x00 // height
+    ]);
+
+    return box(types.tkhd, result);
+  };
+  /**
+   * Generate a track fragment (traf) box. A traf box collects metadata
+   * about tracks in a movie fragment (moof) box.
+   */
+
+  traf = function (track) {
+    var trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun, sampleDependencyTable, dataOffset, upperWordBaseMediaDecodeTime, lowerWordBaseMediaDecodeTime;
+    trackFragmentHeader = box(types.tfhd, new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x3a,
+    // flags
+    (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+    // track_ID
+    0x00, 0x00, 0x00, 0x01,
+    // sample_description_index
+    0x00, 0x00, 0x00, 0x00,
+    // default_sample_duration
+    0x00, 0x00, 0x00, 0x00,
+    // default_sample_size
+    0x00, 0x00, 0x00, 0x00 // default_sample_flags
+    ]));
+
+    upperWordBaseMediaDecodeTime = Math.floor(track.baseMediaDecodeTime / MAX_UINT32);
+    lowerWordBaseMediaDecodeTime = Math.floor(track.baseMediaDecodeTime % MAX_UINT32);
+    trackFragmentDecodeTime = box(types.tfdt, new Uint8Array([0x01,
+    // version 1
+    0x00, 0x00, 0x00,
+    // flags
+    // baseMediaDecodeTime
+    upperWordBaseMediaDecodeTime >>> 24 & 0xFF, upperWordBaseMediaDecodeTime >>> 16 & 0xFF, upperWordBaseMediaDecodeTime >>> 8 & 0xFF, upperWordBaseMediaDecodeTime & 0xFF, lowerWordBaseMediaDecodeTime >>> 24 & 0xFF, lowerWordBaseMediaDecodeTime >>> 16 & 0xFF, lowerWordBaseMediaDecodeTime >>> 8 & 0xFF, lowerWordBaseMediaDecodeTime & 0xFF])); // the data offset specifies the number of bytes from the start of
+    // the containing moof to the first payload byte of the associated
+    // mdat
+
+    dataOffset = 32 +
+    // tfhd
+    20 +
+    // tfdt
+    8 +
+    // traf header
+    16 +
+    // mfhd
+    8 +
+    // moof header
+    8; // mdat header
+    // audio tracks require less metadata
+
+    if (track.type === 'audio') {
+      trackFragmentRun = trun$1(track, dataOffset);
+      return box(types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun);
+    } // video tracks should contain an independent and disposable samples
+    // box (sdtp)
+    // generate one and adjust offsets to match
+
+    sampleDependencyTable = sdtp(track);
+    trackFragmentRun = trun$1(track, sampleDependencyTable.length + dataOffset);
+    return box(types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun, sampleDependencyTable);
+  };
+  /**
+   * Generate a track box.
+   * @param track {object} a track definition
+   * @return {Uint8Array} the track box
+   */
+
+  trak = function (track) {
+    track.duration = track.duration || 0xffffffff;
+    return box(types.trak, tkhd(track), mdia(track));
+  };
+  trex = function (track) {
+    var result = new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x00,
+    // flags
+    (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+    // track_ID
+    0x00, 0x00, 0x00, 0x01,
+    // default_sample_description_index
+    0x00, 0x00, 0x00, 0x00,
+    // default_sample_duration
+    0x00, 0x00, 0x00, 0x00,
+    // default_sample_size
+    0x00, 0x01, 0x00, 0x01 // default_sample_flags
+    ]); // the last two bytes of default_sample_flags is the sample
+    // degradation priority, a hint about the importance of this sample
+    // relative to others. Lower the degradation priority for all sample
+    // types other than video.
+
+    if (track.type !== 'video') {
+      result[result.length - 1] = 0x00;
+    }
+    return box(types.trex, result);
+  };
+  (function () {
+    var audioTrun, videoTrun, trunHeader; // This method assumes all samples are uniform. That is, if a
+    // duration is present for the first sample, it will be present for
+    // all subsequent samples.
+    // see ISO/IEC 14496-12:2012, Section 8.8.8.1
+
+    trunHeader = function (samples, offset) {
+      var durationPresent = 0,
+        sizePresent = 0,
+        flagsPresent = 0,
+        compositionTimeOffset = 0; // trun flag constants
+
+      if (samples.length) {
+        if (samples[0].duration !== undefined) {
+          durationPresent = 0x1;
+        }
+        if (samples[0].size !== undefined) {
+          sizePresent = 0x2;
+        }
+        if (samples[0].flags !== undefined) {
+          flagsPresent = 0x4;
+        }
+        if (samples[0].compositionTimeOffset !== undefined) {
+          compositionTimeOffset = 0x8;
+        }
+      }
+      return [0x00,
+      // version 0
+      0x00, durationPresent | sizePresent | flagsPresent | compositionTimeOffset, 0x01,
+      // flags
+      (samples.length & 0xFF000000) >>> 24, (samples.length & 0xFF0000) >>> 16, (samples.length & 0xFF00) >>> 8, samples.length & 0xFF,
+      // sample_count
+      (offset & 0xFF000000) >>> 24, (offset & 0xFF0000) >>> 16, (offset & 0xFF00) >>> 8, offset & 0xFF // data_offset
+      ];
+    };
+
+    videoTrun = function (track, offset) {
+      var bytesOffest, bytes, header, samples, sample, i;
+      samples = track.samples || [];
+      offset += 8 + 12 + 16 * samples.length;
+      header = trunHeader(samples, offset);
+      bytes = new Uint8Array(header.length + samples.length * 16);
+      bytes.set(header);
+      bytesOffest = header.length;
+      for (i = 0; i < samples.length; i++) {
+        sample = samples[i];
+        bytes[bytesOffest++] = (sample.duration & 0xFF000000) >>> 24;
+        bytes[bytesOffest++] = (sample.duration & 0xFF0000) >>> 16;
+        bytes[bytesOffest++] = (sample.duration & 0xFF00) >>> 8;
+        bytes[bytesOffest++] = sample.duration & 0xFF; // sample_duration
+
+        bytes[bytesOffest++] = (sample.size & 0xFF000000) >>> 24;
+        bytes[bytesOffest++] = (sample.size & 0xFF0000) >>> 16;
+        bytes[bytesOffest++] = (sample.size & 0xFF00) >>> 8;
+        bytes[bytesOffest++] = sample.size & 0xFF; // sample_size
+
+        bytes[bytesOffest++] = sample.flags.isLeading << 2 | sample.flags.dependsOn;
+        bytes[bytesOffest++] = sample.flags.isDependedOn << 6 | sample.flags.hasRedundancy << 4 | sample.flags.paddingValue << 1 | sample.flags.isNonSyncSample;
+        bytes[bytesOffest++] = sample.flags.degradationPriority & 0xF0 << 8;
+        bytes[bytesOffest++] = sample.flags.degradationPriority & 0x0F; // sample_flags
+
+        bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF000000) >>> 24;
+        bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF0000) >>> 16;
+        bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF00) >>> 8;
+        bytes[bytesOffest++] = sample.compositionTimeOffset & 0xFF; // sample_composition_time_offset
+      }
+
+      return box(types.trun, bytes);
+    };
+    audioTrun = function (track, offset) {
+      var bytes, bytesOffest, header, samples, sample, i;
+      samples = track.samples || [];
+      offset += 8 + 12 + 8 * samples.length;
+      header = trunHeader(samples, offset);
+      bytes = new Uint8Array(header.length + samples.length * 8);
+      bytes.set(header);
+      bytesOffest = header.length;
+      for (i = 0; i < samples.length; i++) {
+        sample = samples[i];
+        bytes[bytesOffest++] = (sample.duration & 0xFF000000) >>> 24;
+        bytes[bytesOffest++] = (sample.duration & 0xFF0000) >>> 16;
+        bytes[bytesOffest++] = (sample.duration & 0xFF00) >>> 8;
+        bytes[bytesOffest++] = sample.duration & 0xFF; // sample_duration
+
+        bytes[bytesOffest++] = (sample.size & 0xFF000000) >>> 24;
+        bytes[bytesOffest++] = (sample.size & 0xFF0000) >>> 16;
+        bytes[bytesOffest++] = (sample.size & 0xFF00) >>> 8;
+        bytes[bytesOffest++] = sample.size & 0xFF; // sample_size
+      }
+
+      return box(types.trun, bytes);
+    };
+    trun$1 = function (track, offset) {
+      if (track.type === 'audio') {
+        return audioTrun(track, offset);
+      }
+      return videoTrun(track, offset);
+    };
+  })();
+  var mp4Generator = {
+    ftyp: ftyp,
+    mdat: mdat,
+    moof: moof,
+    moov: moov,
+    initSegment: function (tracks) {
+      var fileType = ftyp(),
+        movie = moov(tracks),
+        result;
+      result = new Uint8Array(fileType.byteLength + movie.byteLength);
+      result.set(fileType);
+      result.set(movie, fileType.byteLength);
+      return result;
+    }
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+  // composed of the nal units that make up that frame
+  // Also keep track of cummulative data about the frame from the nal units such
+  // as the frame duration, starting pts, etc.
+
+  var groupNalsIntoFrames = function (nalUnits) {
+    var i,
+      currentNal,
+      currentFrame = [],
+      frames = []; // TODO added for LHLS, make sure this is OK
+
+    frames.byteLength = 0;
+    frames.nalCount = 0;
+    frames.duration = 0;
+    currentFrame.byteLength = 0;
+    for (i = 0; i < nalUnits.length; i++) {
+      currentNal = nalUnits[i]; // Split on 'aud'-type nal units
+
+      if (currentNal.nalUnitType === 'access_unit_delimiter_rbsp') {
+        // Since the very first nal unit is expected to be an AUD
+        // only push to the frames array when currentFrame is not empty
+        if (currentFrame.length) {
+          currentFrame.duration = currentNal.dts - currentFrame.dts; // TODO added for LHLS, make sure this is OK
+
+          frames.byteLength += currentFrame.byteLength;
+          frames.nalCount += currentFrame.length;
+          frames.duration += currentFrame.duration;
+          frames.push(currentFrame);
+        }
+        currentFrame = [currentNal];
+        currentFrame.byteLength = currentNal.data.byteLength;
+        currentFrame.pts = currentNal.pts;
+        currentFrame.dts = currentNal.dts;
+      } else {
+        // Specifically flag key frames for ease of use later
+        if (currentNal.nalUnitType === 'slice_layer_without_partitioning_rbsp_idr') {
+          currentFrame.keyFrame = true;
+        }
+        currentFrame.duration = currentNal.dts - currentFrame.dts;
+        currentFrame.byteLength += currentNal.data.byteLength;
+        currentFrame.push(currentNal);
+      }
+    } // For the last frame, use the duration of the previous frame if we
+    // have nothing better to go on
+
+    if (frames.length && (!currentFrame.duration || currentFrame.duration <= 0)) {
+      currentFrame.duration = frames[frames.length - 1].duration;
+    } // Push the final frame
+    // TODO added for LHLS, make sure this is OK
+
+    frames.byteLength += currentFrame.byteLength;
+    frames.nalCount += currentFrame.length;
+    frames.duration += currentFrame.duration;
+    frames.push(currentFrame);
+    return frames;
+  }; // Convert an array of frames into an array of Gop with each Gop being composed
+  // of the frames that make up that Gop
+  // Also keep track of cummulative data about the Gop from the frames such as the
+  // Gop duration, starting pts, etc.
+
+  var groupFramesIntoGops = function (frames) {
+    var i,
+      currentFrame,
+      currentGop = [],
+      gops = []; // We must pre-set some of the values on the Gop since we
+    // keep running totals of these values
+
+    currentGop.byteLength = 0;
+    currentGop.nalCount = 0;
+    currentGop.duration = 0;
+    currentGop.pts = frames[0].pts;
+    currentGop.dts = frames[0].dts; // store some metadata about all the Gops
+
+    gops.byteLength = 0;
+    gops.nalCount = 0;
+    gops.duration = 0;
+    gops.pts = frames[0].pts;
+    gops.dts = frames[0].dts;
+    for (i = 0; i < frames.length; i++) {
+      currentFrame = frames[i];
+      if (currentFrame.keyFrame) {
+        // Since the very first frame is expected to be an keyframe
+        // only push to the gops array when currentGop is not empty
+        if (currentGop.length) {
+          gops.push(currentGop);
+          gops.byteLength += currentGop.byteLength;
+          gops.nalCount += currentGop.nalCount;
+          gops.duration += currentGop.duration;
+        }
+        currentGop = [currentFrame];
+        currentGop.nalCount = currentFrame.length;
+        currentGop.byteLength = currentFrame.byteLength;
+        currentGop.pts = currentFrame.pts;
+        currentGop.dts = currentFrame.dts;
+        currentGop.duration = currentFrame.duration;
+      } else {
+        currentGop.duration += currentFrame.duration;
+        currentGop.nalCount += currentFrame.length;
+        currentGop.byteLength += currentFrame.byteLength;
+        currentGop.push(currentFrame);
+      }
+    }
+    if (gops.length && currentGop.duration <= 0) {
+      currentGop.duration = gops[gops.length - 1].duration;
+    }
+    gops.byteLength += currentGop.byteLength;
+    gops.nalCount += currentGop.nalCount;
+    gops.duration += currentGop.duration; // push the final Gop
+
+    gops.push(currentGop);
+    return gops;
+  };
+  /*
+   * Search for the first keyframe in the GOPs and throw away all frames
+   * until that keyframe. Then extend the duration of the pulled keyframe
+   * and pull the PTS and DTS of the keyframe so that it covers the time
+   * range of the frames that were disposed.
+   *
+   * @param {Array} gops video GOPs
+   * @returns {Array} modified video GOPs
+   */
+
+  var extendFirstKeyFrame = function (gops) {
+    var currentGop;
+    if (!gops[0][0].keyFrame && gops.length > 1) {
+      // Remove the first GOP
+      currentGop = gops.shift();
+      gops.byteLength -= currentGop.byteLength;
+      gops.nalCount -= currentGop.nalCount; // Extend the first frame of what is now the
+      // first gop to cover the time period of the
+      // frames we just removed
+
+      gops[0][0].dts = currentGop.dts;
+      gops[0][0].pts = currentGop.pts;
+      gops[0][0].duration += currentGop.duration;
+    }
+    return gops;
+  };
+  /**
+   * Default sample object
+   * see ISO/IEC 14496-12:2012, section 8.6.4.3
+   */
+
+  var createDefaultSample = function () {
+    return {
+      size: 0,
+      flags: {
+        isLeading: 0,
+        dependsOn: 1,
+        isDependedOn: 0,
+        hasRedundancy: 0,
+        degradationPriority: 0,
+        isNonSyncSample: 1
+      }
+    };
+  };
+  /*
+   * Collates information from a video frame into an object for eventual
+   * entry into an MP4 sample table.
+   *
+   * @param {Object} frame the video frame
+   * @param {Number} dataOffset the byte offset to position the sample
+   * @return {Object} object containing sample table info for a frame
+   */
+
+  var sampleForFrame = function (frame, dataOffset) {
+    var sample = createDefaultSample();
+    sample.dataOffset = dataOffset;
+    sample.compositionTimeOffset = frame.pts - frame.dts;
+    sample.duration = frame.duration;
+    sample.size = 4 * frame.length; // Space for nal unit size
+
+    sample.size += frame.byteLength;
+    if (frame.keyFrame) {
+      sample.flags.dependsOn = 2;
+      sample.flags.isNonSyncSample = 0;
+    }
+    return sample;
+  }; // generate the track's sample table from an array of gops
+
+  var generateSampleTable$1 = function (gops, baseDataOffset) {
+    var h,
+      i,
+      sample,
+      currentGop,
+      currentFrame,
+      dataOffset = baseDataOffset || 0,
+      samples = [];
+    for (h = 0; h < gops.length; h++) {
+      currentGop = gops[h];
+      for (i = 0; i < currentGop.length; i++) {
+        currentFrame = currentGop[i];
+        sample = sampleForFrame(currentFrame, dataOffset);
+        dataOffset += sample.size;
+        samples.push(sample);
+      }
+    }
+    return samples;
+  }; // generate the track's raw mdat data from an array of gops
+
+  var concatenateNalData = function (gops) {
+    var h,
+      i,
+      j,
+      currentGop,
+      currentFrame,
+      currentNal,
+      dataOffset = 0,
+      nalsByteLength = gops.byteLength,
+      numberOfNals = gops.nalCount,
+      totalByteLength = nalsByteLength + 4 * numberOfNals,
+      data = new Uint8Array(totalByteLength),
+      view = new DataView(data.buffer); // For each Gop..
+
+    for (h = 0; h < gops.length; h++) {
+      currentGop = gops[h]; // For each Frame..
+
+      for (i = 0; i < currentGop.length; i++) {
+        currentFrame = currentGop[i]; // For each NAL..
+
+        for (j = 0; j < currentFrame.length; j++) {
+          currentNal = currentFrame[j];
+          view.setUint32(dataOffset, currentNal.data.byteLength);
+          dataOffset += 4;
+          data.set(currentNal.data, dataOffset);
+          dataOffset += currentNal.data.byteLength;
+        }
+      }
+    }
+    return data;
+  }; // generate the track's sample table from a frame
+
+  var generateSampleTableForFrame = function (frame, baseDataOffset) {
+    var sample,
+      dataOffset = baseDataOffset || 0,
+      samples = [];
+    sample = sampleForFrame(frame, dataOffset);
+    samples.push(sample);
+    return samples;
+  }; // generate the track's raw mdat data from a frame
+
+  var concatenateNalDataForFrame = function (frame) {
+    var i,
+      currentNal,
+      dataOffset = 0,
+      nalsByteLength = frame.byteLength,
+      numberOfNals = frame.length,
+      totalByteLength = nalsByteLength + 4 * numberOfNals,
+      data = new Uint8Array(totalByteLength),
+      view = new DataView(data.buffer); // For each NAL..
+
+    for (i = 0; i < frame.length; i++) {
+      currentNal = frame[i];
+      view.setUint32(dataOffset, currentNal.data.byteLength);
+      dataOffset += 4;
+      data.set(currentNal.data, dataOffset);
+      dataOffset += currentNal.data.byteLength;
+    }
+    return data;
+  };
+  var frameUtils$1 = {
+    groupNalsIntoFrames: groupNalsIntoFrames,
+    groupFramesIntoGops: groupFramesIntoGops,
+    extendFirstKeyFrame: extendFirstKeyFrame,
+    generateSampleTable: generateSampleTable$1,
+    concatenateNalData: concatenateNalData,
+    generateSampleTableForFrame: generateSampleTableForFrame,
+    concatenateNalDataForFrame: concatenateNalDataForFrame
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var highPrefix = [33, 16, 5, 32, 164, 27];
+  var lowPrefix = [33, 65, 108, 84, 1, 2, 4, 8, 168, 2, 4, 8, 17, 191, 252];
+  var zeroFill = function (count) {
+    var a = [];
+    while (count--) {
+      a.push(0);
+    }
+    return a;
+  };
+  var makeTable = function (metaTable) {
+    return Object.keys(metaTable).reduce(function (obj, key) {
+      obj[key] = new Uint8Array(metaTable[key].reduce(function (arr, part) {
+        return arr.concat(part);
+      }, []));
+      return obj;
+    }, {});
+  };
+  var silence;
+  var silence_1 = function () {
+    if (!silence) {
+      // Frames-of-silence to use for filling in missing AAC frames
+      var coneOfSilence = {
+        96000: [highPrefix, [227, 64], zeroFill(154), [56]],
+        88200: [highPrefix, [231], zeroFill(170), [56]],
+        64000: [highPrefix, [248, 192], zeroFill(240), [56]],
+        48000: [highPrefix, [255, 192], zeroFill(268), [55, 148, 128], zeroFill(54), [112]],
+        44100: [highPrefix, [255, 192], zeroFill(268), [55, 163, 128], zeroFill(84), [112]],
+        32000: [highPrefix, [255, 192], zeroFill(268), [55, 234], zeroFill(226), [112]],
+        24000: [highPrefix, [255, 192], zeroFill(268), [55, 255, 128], zeroFill(268), [111, 112], zeroFill(126), [224]],
+        16000: [highPrefix, [255, 192], zeroFill(268), [55, 255, 128], zeroFill(268), [111, 255], zeroFill(269), [223, 108], zeroFill(195), [1, 192]],
+        12000: [lowPrefix, zeroFill(268), [3, 127, 248], zeroFill(268), [6, 255, 240], zeroFill(268), [13, 255, 224], zeroFill(268), [27, 253, 128], zeroFill(259), [56]],
+        11025: [lowPrefix, zeroFill(268), [3, 127, 248], zeroFill(268), [6, 255, 240], zeroFill(268), [13, 255, 224], zeroFill(268), [27, 255, 192], zeroFill(268), [55, 175, 128], zeroFill(108), [112]],
+        8000: [lowPrefix, zeroFill(268), [3, 121, 16], zeroFill(47), [7]]
+      };
+      silence = makeTable(coneOfSilence);
+    }
+    return silence;
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var ONE_SECOND_IN_TS$4 = 90000,
+    // 90kHz clock
+    secondsToVideoTs,
+    secondsToAudioTs,
+    videoTsToSeconds,
+    audioTsToSeconds,
+    audioTsToVideoTs,
+    videoTsToAudioTs,
+    metadataTsToSeconds;
+  secondsToVideoTs = function (seconds) {
+    return seconds * ONE_SECOND_IN_TS$4;
+  };
+  secondsToAudioTs = function (seconds, sampleRate) {
+    return seconds * sampleRate;
+  };
+  videoTsToSeconds = function (timestamp) {
+    return timestamp / ONE_SECOND_IN_TS$4;
+  };
+  audioTsToSeconds = function (timestamp, sampleRate) {
+    return timestamp / sampleRate;
+  };
+  audioTsToVideoTs = function (timestamp, sampleRate) {
+    return secondsToVideoTs(audioTsToSeconds(timestamp, sampleRate));
+  };
+  videoTsToAudioTs = function (timestamp, sampleRate) {
+    return secondsToAudioTs(videoTsToSeconds(timestamp), sampleRate);
+  };
+  /**
+   * Adjust ID3 tag or caption timing information by the timeline pts values
+   * (if keepOriginalTimestamps is false) and convert to seconds
+   */
+
+  metadataTsToSeconds = function (timestamp, timelineStartPts, keepOriginalTimestamps) {
+    return videoTsToSeconds(keepOriginalTimestamps ? timestamp : timestamp - timelineStartPts);
+  };
+  var clock$2 = {
+    ONE_SECOND_IN_TS: ONE_SECOND_IN_TS$4,
+    secondsToVideoTs: secondsToVideoTs,
+    secondsToAudioTs: secondsToAudioTs,
+    videoTsToSeconds: videoTsToSeconds,
+    audioTsToSeconds: audioTsToSeconds,
+    audioTsToVideoTs: audioTsToVideoTs,
+    videoTsToAudioTs: videoTsToAudioTs,
+    metadataTsToSeconds: metadataTsToSeconds
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var coneOfSilence = silence_1;
+  var clock$1 = clock$2;
+  /**
+   * Sum the `byteLength` properties of the data in each AAC frame
+   */
+
+  var sumFrameByteLengths = function (array) {
+    var i,
+      currentObj,
+      sum = 0; // sum the byteLength's all each nal unit in the frame
+
+    for (i = 0; i < array.length; i++) {
+      currentObj = array[i];
+      sum += currentObj.data.byteLength;
+    }
+    return sum;
+  }; // Possibly pad (prefix) the audio track with silence if appending this track
+  // would lead to the introduction of a gap in the audio buffer
+
+  var prefixWithSilence = function (track, frames, audioAppendStartTs, videoBaseMediaDecodeTime) {
+    var baseMediaDecodeTimeTs,
+      frameDuration = 0,
+      audioGapDuration = 0,
+      audioFillFrameCount = 0,
+      audioFillDuration = 0,
+      silentFrame,
+      i,
+      firstFrame;
+    if (!frames.length) {
+      return;
+    }
+    baseMediaDecodeTimeTs = clock$1.audioTsToVideoTs(track.baseMediaDecodeTime, track.samplerate); // determine frame clock duration based on sample rate, round up to avoid overfills
+
+    frameDuration = Math.ceil(clock$1.ONE_SECOND_IN_TS / (track.samplerate / 1024));
+    if (audioAppendStartTs && videoBaseMediaDecodeTime) {
+      // insert the shortest possible amount (audio gap or audio to video gap)
+      audioGapDuration = baseMediaDecodeTimeTs - Math.max(audioAppendStartTs, videoBaseMediaDecodeTime); // number of full frames in the audio gap
+
+      audioFillFrameCount = Math.floor(audioGapDuration / frameDuration);
+      audioFillDuration = audioFillFrameCount * frameDuration;
+    } // don't attempt to fill gaps smaller than a single frame or larger
+    // than a half second
+
+    if (audioFillFrameCount < 1 || audioFillDuration > clock$1.ONE_SECOND_IN_TS / 2) {
+      return;
+    }
+    silentFrame = coneOfSilence()[track.samplerate];
+    if (!silentFrame) {
+      // we don't have a silent frame pregenerated for the sample rate, so use a frame
+      // from the content instead
+      silentFrame = frames[0].data;
+    }
+    for (i = 0; i < audioFillFrameCount; i++) {
+      firstFrame = frames[0];
+      frames.splice(0, 0, {
+        data: silentFrame,
+        dts: firstFrame.dts - frameDuration,
+        pts: firstFrame.pts - frameDuration
+      });
+    }
+    track.baseMediaDecodeTime -= Math.floor(clock$1.videoTsToAudioTs(audioFillDuration, track.samplerate));
+    return audioFillDuration;
+  }; // If the audio segment extends before the earliest allowed dts
+  // value, remove AAC frames until starts at or after the earliest
+  // allowed DTS so that we don't end up with a negative baseMedia-
+  // DecodeTime for the audio track
+
+  var trimAdtsFramesByEarliestDts = function (adtsFrames, track, earliestAllowedDts) {
+    if (track.minSegmentDts >= earliestAllowedDts) {
+      return adtsFrames;
+    } // We will need to recalculate the earliest segment Dts
+
+    track.minSegmentDts = Infinity;
+    return adtsFrames.filter(function (currentFrame) {
+      // If this is an allowed frame, keep it and record it's Dts
+      if (currentFrame.dts >= earliestAllowedDts) {
+        track.minSegmentDts = Math.min(track.minSegmentDts, currentFrame.dts);
+        track.minSegmentPts = track.minSegmentDts;
+        return true;
+      } // Otherwise, discard it
+
+      return false;
+    });
+  }; // generate the track's raw mdat data from an array of frames
+
+  var generateSampleTable = function (frames) {
+    var i,
+      currentFrame,
+      samples = [];
+    for (i = 0; i < frames.length; i++) {
+      currentFrame = frames[i];
+      samples.push({
+        size: currentFrame.data.byteLength,
+        duration: 1024 // For AAC audio, all samples contain 1024 samples
+      });
+    }
+
+    return samples;
+  }; // generate the track's sample table from an array of frames
+
+  var concatenateFrameData = function (frames) {
+    var i,
+      currentFrame,
+      dataOffset = 0,
+      data = new Uint8Array(sumFrameByteLengths(frames));
+    for (i = 0; i < frames.length; i++) {
+      currentFrame = frames[i];
+      data.set(currentFrame.data, dataOffset);
+      dataOffset += currentFrame.data.byteLength;
+    }
+    return data;
+  };
+  var audioFrameUtils$1 = {
+    prefixWithSilence: prefixWithSilence,
+    trimAdtsFramesByEarliestDts: trimAdtsFramesByEarliestDts,
+    generateSampleTable: generateSampleTable,
+    concatenateFrameData: concatenateFrameData
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var ONE_SECOND_IN_TS$3 = clock$2.ONE_SECOND_IN_TS;
+  /**
+   * Store information about the start and end of the track and the
+   * duration for each frame/sample we process in order to calculate
+   * the baseMediaDecodeTime
+   */
+
+  var collectDtsInfo = function (track, data) {
+    if (typeof data.pts === 'number') {
+      if (track.timelineStartInfo.pts === undefined) {
+        track.timelineStartInfo.pts = data.pts;
+      }
+      if (track.minSegmentPts === undefined) {
+        track.minSegmentPts = data.pts;
+      } else {
+        track.minSegmentPts = Math.min(track.minSegmentPts, data.pts);
+      }
+      if (track.maxSegmentPts === undefined) {
+        track.maxSegmentPts = data.pts;
+      } else {
+        track.maxSegmentPts = Math.max(track.maxSegmentPts, data.pts);
+      }
+    }
+    if (typeof data.dts === 'number') {
+      if (track.timelineStartInfo.dts === undefined) {
+        track.timelineStartInfo.dts = data.dts;
+      }
+      if (track.minSegmentDts === undefined) {
+        track.minSegmentDts = data.dts;
+      } else {
+        track.minSegmentDts = Math.min(track.minSegmentDts, data.dts);
+      }
+      if (track.maxSegmentDts === undefined) {
+        track.maxSegmentDts = data.dts;
+      } else {
+        track.maxSegmentDts = Math.max(track.maxSegmentDts, data.dts);
+      }
+    }
+  };
+  /**
+   * Clear values used to calculate the baseMediaDecodeTime between
+   * tracks
+   */
+
+  var clearDtsInfo = function (track) {
+    delete track.minSegmentDts;
+    delete track.maxSegmentDts;
+    delete track.minSegmentPts;
+    delete track.maxSegmentPts;
+  };
+  /**
+   * Calculate the track's baseMediaDecodeTime based on the earliest
+   * DTS the transmuxer has ever seen and the minimum DTS for the
+   * current track
+   * @param track {object} track metadata configuration
+   * @param keepOriginalTimestamps {boolean} If true, keep the timestamps
+   *        in the source; false to adjust the first segment to start at 0.
+   */
+
+  var calculateTrackBaseMediaDecodeTime = function (track, keepOriginalTimestamps) {
+    var baseMediaDecodeTime,
+      scale,
+      minSegmentDts = track.minSegmentDts; // Optionally adjust the time so the first segment starts at zero.
+
+    if (!keepOriginalTimestamps) {
+      minSegmentDts -= track.timelineStartInfo.dts;
+    } // track.timelineStartInfo.baseMediaDecodeTime is the location, in time, where
+    // we want the start of the first segment to be placed
+
+    baseMediaDecodeTime = track.timelineStartInfo.baseMediaDecodeTime; // Add to that the distance this segment is from the very first
+
+    baseMediaDecodeTime += minSegmentDts; // baseMediaDecodeTime must not become negative
+
+    baseMediaDecodeTime = Math.max(0, baseMediaDecodeTime);
+    if (track.type === 'audio') {
+      // Audio has a different clock equal to the sampling_rate so we need to
+      // scale the PTS values into the clock rate of the track
+      scale = track.samplerate / ONE_SECOND_IN_TS$3;
+      baseMediaDecodeTime *= scale;
+      baseMediaDecodeTime = Math.floor(baseMediaDecodeTime);
+    }
+    return baseMediaDecodeTime;
+  };
+  var trackDecodeInfo$1 = {
+    clearDtsInfo: clearDtsInfo,
+    calculateTrackBaseMediaDecodeTime: calculateTrackBaseMediaDecodeTime,
+    collectDtsInfo: collectDtsInfo
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Reads in-band caption information from a video elementary
+   * stream. Captions must follow the CEA-708 standard for injection
+   * into an MPEG-2 transport streams.
+   * @see https://en.wikipedia.org/wiki/CEA-708
+   * @see https://www.gpo.gov/fdsys/pkg/CFR-2007-title47-vol1/pdf/CFR-2007-title47-vol1-sec15-119.pdf
+   */
+  // payload type field to indicate how they are to be
+  // interpreted. CEAS-708 caption content is always transmitted with
+  // payload type 0x04.
+
+  var USER_DATA_REGISTERED_ITU_T_T35 = 4,
+    RBSP_TRAILING_BITS = 128;
+  /**
+    * Parse a supplemental enhancement information (SEI) NAL unit.
+    * Stops parsing once a message of type ITU T T35 has been found.
+    *
+    * @param bytes {Uint8Array} the bytes of a SEI NAL unit
+    * @return {object} the parsed SEI payload
+    * @see Rec. ITU-T H.264, 7.3.2.3.1
+    */
+
+  var parseSei = function (bytes) {
+    var i = 0,
+      result = {
+        payloadType: -1,
+        payloadSize: 0
+      },
+      payloadType = 0,
+      payloadSize = 0; // go through the sei_rbsp parsing each each individual sei_message
+
+    while (i < bytes.byteLength) {
+      // stop once we have hit the end of the sei_rbsp
+      if (bytes[i] === RBSP_TRAILING_BITS) {
+        break;
+      } // Parse payload type
+
+      while (bytes[i] === 0xFF) {
+        payloadType += 255;
+        i++;
+      }
+      payloadType += bytes[i++]; // Parse payload size
+
+      while (bytes[i] === 0xFF) {
+        payloadSize += 255;
+        i++;
+      }
+      payloadSize += bytes[i++]; // this sei_message is a 608/708 caption so save it and break
+      // there can only ever be one caption message in a frame's sei
+
+      if (!result.payload && payloadType === USER_DATA_REGISTERED_ITU_T_T35) {
+        var userIdentifier = String.fromCharCode(bytes[i + 3], bytes[i + 4], bytes[i + 5], bytes[i + 6]);
+        if (userIdentifier === 'GA94') {
+          result.payloadType = payloadType;
+          result.payloadSize = payloadSize;
+          result.payload = bytes.subarray(i, i + payloadSize);
+          break;
+        } else {
+          result.payload = void 0;
+        }
+      } // skip the payload and parse the next message
+
+      i += payloadSize;
+      payloadType = 0;
+      payloadSize = 0;
+    }
+    return result;
+  }; // see ANSI/SCTE 128-1 (2013), section 8.1
+
+  var parseUserData = function (sei) {
+    // itu_t_t35_contry_code must be 181 (United States) for
+    // captions
+    if (sei.payload[0] !== 181) {
+      return null;
+    } // itu_t_t35_provider_code should be 49 (ATSC) for captions
+
+    if ((sei.payload[1] << 8 | sei.payload[2]) !== 49) {
+      return null;
+    } // the user_identifier should be "GA94" to indicate ATSC1 data
+
+    if (String.fromCharCode(sei.payload[3], sei.payload[4], sei.payload[5], sei.payload[6]) !== 'GA94') {
+      return null;
+    } // finally, user_data_type_code should be 0x03 for caption data
+
+    if (sei.payload[7] !== 0x03) {
+      return null;
+    } // return the user_data_type_structure and strip the trailing
+    // marker bits
+
+    return sei.payload.subarray(8, sei.payload.length - 1);
+  }; // see CEA-708-D, section 4.4
+
+  var parseCaptionPackets = function (pts, userData) {
+    var results = [],
+      i,
+      count,
+      offset,
+      data; // if this is just filler, return immediately
+
+    if (!(userData[0] & 0x40)) {
+      return results;
+    } // parse out the cc_data_1 and cc_data_2 fields
+
+    count = userData[0] & 0x1f;
+    for (i = 0; i < count; i++) {
+      offset = i * 3;
+      data = {
+        type: userData[offset + 2] & 0x03,
+        pts: pts
+      }; // capture cc data when cc_valid is 1
+
+      if (userData[offset + 2] & 0x04) {
+        data.ccData = userData[offset + 3] << 8 | userData[offset + 4];
+        results.push(data);
+      }
+    }
+    return results;
+  };
+  var discardEmulationPreventionBytes$1 = function (data) {
+    var length = data.byteLength,
+      emulationPreventionBytesPositions = [],
+      i = 1,
+      newLength,
+      newData; // Find all `Emulation Prevention Bytes`
+
+    while (i < length - 2) {
+      if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0x03) {
+        emulationPreventionBytesPositions.push(i + 2);
+        i += 2;
+      } else {
+        i++;
+      }
+    } // If no Emulation Prevention Bytes were found just return the original
+    // array
+
+    if (emulationPreventionBytesPositions.length === 0) {
+      return data;
+    } // Create a new array to hold the NAL unit data
+
+    newLength = length - emulationPreventionBytesPositions.length;
+    newData = new Uint8Array(newLength);
+    var sourceIndex = 0;
+    for (i = 0; i < newLength; sourceIndex++, i++) {
+      if (sourceIndex === emulationPreventionBytesPositions[0]) {
+        // Skip this byte
+        sourceIndex++; // Remove this position index
+
+        emulationPreventionBytesPositions.shift();
+      }
+      newData[i] = data[sourceIndex];
+    }
+    return newData;
+  }; // exports
+
+  var captionPacketParser = {
+    parseSei: parseSei,
+    parseUserData: parseUserData,
+    parseCaptionPackets: parseCaptionPackets,
+    discardEmulationPreventionBytes: discardEmulationPreventionBytes$1,
+    USER_DATA_REGISTERED_ITU_T_T35: USER_DATA_REGISTERED_ITU_T_T35
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Reads in-band caption information from a video elementary
+   * stream. Captions must follow the CEA-708 standard for injection
+   * into an MPEG-2 transport streams.
+   * @see https://en.wikipedia.org/wiki/CEA-708
+   * @see https://www.gpo.gov/fdsys/pkg/CFR-2007-title47-vol1/pdf/CFR-2007-title47-vol1-sec15-119.pdf
+   */
+  // Link To Transport
+  // -----------------
+
+  var Stream$7 = stream;
+  var cea708Parser = captionPacketParser;
+  var CaptionStream$2 = function (options) {
+    options = options || {};
+    CaptionStream$2.prototype.init.call(this); // parse708captions flag, default to true
+
+    this.parse708captions_ = typeof options.parse708captions === 'boolean' ? options.parse708captions : true;
+    this.captionPackets_ = [];
+    this.ccStreams_ = [new Cea608Stream(0, 0),
+    // eslint-disable-line no-use-before-define
+    new Cea608Stream(0, 1),
+    // eslint-disable-line no-use-before-define
+    new Cea608Stream(1, 0),
+    // eslint-disable-line no-use-before-define
+    new Cea608Stream(1, 1) // eslint-disable-line no-use-before-define
+    ];
+
+    if (this.parse708captions_) {
+      this.cc708Stream_ = new Cea708Stream({
+        captionServices: options.captionServices
+      }); // eslint-disable-line no-use-before-define
+    }
+
+    this.reset(); // forward data and done events from CCs to this CaptionStream
+
+    this.ccStreams_.forEach(function (cc) {
+      cc.on('data', this.trigger.bind(this, 'data'));
+      cc.on('partialdone', this.trigger.bind(this, 'partialdone'));
+      cc.on('done', this.trigger.bind(this, 'done'));
+    }, this);
+    if (this.parse708captions_) {
+      this.cc708Stream_.on('data', this.trigger.bind(this, 'data'));
+      this.cc708Stream_.on('partialdone', this.trigger.bind(this, 'partialdone'));
+      this.cc708Stream_.on('done', this.trigger.bind(this, 'done'));
+    }
+  };
+  CaptionStream$2.prototype = new Stream$7();
+  CaptionStream$2.prototype.push = function (event) {
+    var sei, userData, newCaptionPackets; // only examine SEI NALs
+
+    if (event.nalUnitType !== 'sei_rbsp') {
+      return;
+    } // parse the sei
+
+    sei = cea708Parser.parseSei(event.escapedRBSP); // no payload data, skip
+
+    if (!sei.payload) {
+      return;
+    } // ignore everything but user_data_registered_itu_t_t35
+
+    if (sei.payloadType !== cea708Parser.USER_DATA_REGISTERED_ITU_T_T35) {
+      return;
+    } // parse out the user data payload
+
+    userData = cea708Parser.parseUserData(sei); // ignore unrecognized userData
+
+    if (!userData) {
+      return;
+    } // Sometimes, the same segment # will be downloaded twice. To stop the
+    // caption data from being processed twice, we track the latest dts we've
+    // received and ignore everything with a dts before that. However, since
+    // data for a specific dts can be split across packets on either side of
+    // a segment boundary, we need to make sure we *don't* ignore the packets
+    // from the *next* segment that have dts === this.latestDts_. By constantly
+    // tracking the number of packets received with dts === this.latestDts_, we
+    // know how many should be ignored once we start receiving duplicates.
+
+    if (event.dts < this.latestDts_) {
+      // We've started getting older data, so set the flag.
+      this.ignoreNextEqualDts_ = true;
+      return;
+    } else if (event.dts === this.latestDts_ && this.ignoreNextEqualDts_) {
+      this.numSameDts_--;
+      if (!this.numSameDts_) {
+        // We've received the last duplicate packet, time to start processing again
+        this.ignoreNextEqualDts_ = false;
+      }
+      return;
+    } // parse out CC data packets and save them for later
+
+    newCaptionPackets = cea708Parser.parseCaptionPackets(event.pts, userData);
+    this.captionPackets_ = this.captionPackets_.concat(newCaptionPackets);
+    if (this.latestDts_ !== event.dts) {
+      this.numSameDts_ = 0;
+    }
+    this.numSameDts_++;
+    this.latestDts_ = event.dts;
+  };
+  CaptionStream$2.prototype.flushCCStreams = function (flushType) {
+    this.ccStreams_.forEach(function (cc) {
+      return flushType === 'flush' ? cc.flush() : cc.partialFlush();
+    }, this);
+  };
+  CaptionStream$2.prototype.flushStream = function (flushType) {
+    // make sure we actually parsed captions before proceeding
+    if (!this.captionPackets_.length) {
+      this.flushCCStreams(flushType);
+      return;
+    } // In Chrome, the Array#sort function is not stable so add a
+    // presortIndex that we can use to ensure we get a stable-sort
+
+    this.captionPackets_.forEach(function (elem, idx) {
+      elem.presortIndex = idx;
+    }); // sort caption byte-pairs based on their PTS values
+
+    this.captionPackets_.sort(function (a, b) {
+      if (a.pts === b.pts) {
+        return a.presortIndex - b.presortIndex;
+      }
+      return a.pts - b.pts;
+    });
+    this.captionPackets_.forEach(function (packet) {
+      if (packet.type < 2) {
+        // Dispatch packet to the right Cea608Stream
+        this.dispatchCea608Packet(packet);
+      } else {
+        // Dispatch packet to the Cea708Stream
+        this.dispatchCea708Packet(packet);
+      }
+    }, this);
+    this.captionPackets_.length = 0;
+    this.flushCCStreams(flushType);
+  };
+  CaptionStream$2.prototype.flush = function () {
+    return this.flushStream('flush');
+  }; // Only called if handling partial data
+
+  CaptionStream$2.prototype.partialFlush = function () {
+    return this.flushStream('partialFlush');
+  };
+  CaptionStream$2.prototype.reset = function () {
+    this.latestDts_ = null;
+    this.ignoreNextEqualDts_ = false;
+    this.numSameDts_ = 0;
+    this.activeCea608Channel_ = [null, null];
+    this.ccStreams_.forEach(function (ccStream) {
+      ccStream.reset();
+    });
+  }; // From the CEA-608 spec:
+
+  /*
+   * When XDS sub-packets are interleaved with other services, the end of each sub-packet shall be followed
+   * by a control pair to change to a different service. When any of the control codes from 0x10 to 0x1F is
+   * used to begin a control code pair, it indicates the return to captioning or Text data. The control code pair
+   * and subsequent data should then be processed according to the FCC rules. It may be necessary for the
+   * line 21 data encoder to automatically insert a control code pair (i.e. RCL, RU2, RU3, RU4, RDC, or RTD)
+   * to switch to captioning or Text.
+  */
+  // With that in mind, we ignore any data between an XDS control code and a
+  // subsequent closed-captioning control code.
+
+  CaptionStream$2.prototype.dispatchCea608Packet = function (packet) {
+    // NOTE: packet.type is the CEA608 field
+    if (this.setsTextOrXDSActive(packet)) {
+      this.activeCea608Channel_[packet.type] = null;
+    } else if (this.setsChannel1Active(packet)) {
+      this.activeCea608Channel_[packet.type] = 0;
+    } else if (this.setsChannel2Active(packet)) {
+      this.activeCea608Channel_[packet.type] = 1;
+    }
+    if (this.activeCea608Channel_[packet.type] === null) {
+      // If we haven't received anything to set the active channel, or the
+      // packets are Text/XDS data, discard the data; we don't want jumbled
+      // captions
+      return;
+    }
+    this.ccStreams_[(packet.type << 1) + this.activeCea608Channel_[packet.type]].push(packet);
+  };
+  CaptionStream$2.prototype.setsChannel1Active = function (packet) {
+    return (packet.ccData & 0x7800) === 0x1000;
+  };
+  CaptionStream$2.prototype.setsChannel2Active = function (packet) {
+    return (packet.ccData & 0x7800) === 0x1800;
+  };
+  CaptionStream$2.prototype.setsTextOrXDSActive = function (packet) {
+    return (packet.ccData & 0x7100) === 0x0100 || (packet.ccData & 0x78fe) === 0x102a || (packet.ccData & 0x78fe) === 0x182a;
+  };
+  CaptionStream$2.prototype.dispatchCea708Packet = function (packet) {
+    if (this.parse708captions_) {
+      this.cc708Stream_.push(packet);
+    }
+  }; // ----------------------
+  // Session to Application
+  // ----------------------
+  // This hash maps special and extended character codes to their
+  // proper Unicode equivalent. The first one-byte key is just a
+  // non-standard character code. The two-byte keys that follow are
+  // the extended CEA708 character codes, along with the preceding
+  // 0x10 extended character byte to distinguish these codes from
+  // non-extended character codes. Every CEA708 character code that
+  // is not in this object maps directly to a standard unicode
+  // character code.
+  // The transparent space and non-breaking transparent space are
+  // technically not fully supported since there is no code to
+  // make them transparent, so they have normal non-transparent
+  // stand-ins.
+  // The special closed caption (CC) character isn't a standard
+  // unicode character, so a fairly similar unicode character was
+  // chosen in it's place.
+
+  var CHARACTER_TRANSLATION_708 = {
+    0x7f: 0x266a,
+    // ♪
+    0x1020: 0x20,
+    // Transparent Space
+    0x1021: 0xa0,
+    // Nob-breaking Transparent Space
+    0x1025: 0x2026,
+    // …
+    0x102a: 0x0160,
+    // Š
+    0x102c: 0x0152,
+    // Œ
+    0x1030: 0x2588,
+    // █
+    0x1031: 0x2018,
+    // ‘
+    0x1032: 0x2019,
+    // ’
+    0x1033: 0x201c,
+    // “
+    0x1034: 0x201d,
+    // ”
+    0x1035: 0x2022,
+    // •
+    0x1039: 0x2122,
+    // ™
+    0x103a: 0x0161,
+    // š
+    0x103c: 0x0153,
+    // œ
+    0x103d: 0x2120,
+    // ℠
+    0x103f: 0x0178,
+    // Ÿ
+    0x1076: 0x215b,
+    // ⅛
+    0x1077: 0x215c,
+    // ⅜
+    0x1078: 0x215d,
+    // ⅝
+    0x1079: 0x215e,
+    // ⅞
+    0x107a: 0x23d0,
+    // ⏐
+    0x107b: 0x23a4,
+    // ⎤
+    0x107c: 0x23a3,
+    // ⎣
+    0x107d: 0x23af,
+    // ⎯
+    0x107e: 0x23a6,
+    // ⎦
+    0x107f: 0x23a1,
+    // ⎡
+    0x10a0: 0x3138 // ㄸ (CC char)
+  };
+
+  var get708CharFromCode = function (code) {
+    var newCode = CHARACTER_TRANSLATION_708[code] || code;
+    if (code & 0x1000 && code === newCode) {
+      // Invalid extended code
+      return '';
+    }
+    return String.fromCharCode(newCode);
+  };
+  var within708TextBlock = function (b) {
+    return 0x20 <= b && b <= 0x7f || 0xa0 <= b && b <= 0xff;
+  };
+  var Cea708Window = function (windowNum) {
+    this.windowNum = windowNum;
+    this.reset();
+  };
+  Cea708Window.prototype.reset = function () {
+    this.clearText();
+    this.pendingNewLine = false;
+    this.winAttr = {};
+    this.penAttr = {};
+    this.penLoc = {};
+    this.penColor = {}; // These default values are arbitrary,
+    // defineWindow will usually override them
+
+    this.visible = 0;
+    this.rowLock = 0;
+    this.columnLock = 0;
+    this.priority = 0;
+    this.relativePositioning = 0;
+    this.anchorVertical = 0;
+    this.anchorHorizontal = 0;
+    this.anchorPoint = 0;
+    this.rowCount = 1;
+    this.virtualRowCount = this.rowCount + 1;
+    this.columnCount = 41;
+    this.windowStyle = 0;
+    this.penStyle = 0;
+  };
+  Cea708Window.prototype.getText = function () {
+    return this.rows.join('\n');
+  };
+  Cea708Window.prototype.clearText = function () {
+    this.rows = [''];
+    this.rowIdx = 0;
+  };
+  Cea708Window.prototype.newLine = function (pts) {
+    if (this.rows.length >= this.virtualRowCount && typeof this.beforeRowOverflow === 'function') {
+      this.beforeRowOverflow(pts);
+    }
+    if (this.rows.length > 0) {
+      this.rows.push('');
+      this.rowIdx++;
+    } // Show all virtual rows since there's no visible scrolling
+
+    while (this.rows.length > this.virtualRowCount) {
+      this.rows.shift();
+      this.rowIdx--;
+    }
+  };
+  Cea708Window.prototype.isEmpty = function () {
+    if (this.rows.length === 0) {
+      return true;
+    } else if (this.rows.length === 1) {
+      return this.rows[0] === '';
+    }
+    return false;
+  };
+  Cea708Window.prototype.addText = function (text) {
+    this.rows[this.rowIdx] += text;
+  };
+  Cea708Window.prototype.backspace = function () {
+    if (!this.isEmpty()) {
+      var row = this.rows[this.rowIdx];
+      this.rows[this.rowIdx] = row.substr(0, row.length - 1);
+    }
+  };
+  var Cea708Service = function (serviceNum, encoding, stream) {
+    this.serviceNum = serviceNum;
+    this.text = '';
+    this.currentWindow = new Cea708Window(-1);
+    this.windows = [];
+    this.stream = stream; // Try to setup a TextDecoder if an `encoding` value was provided
+
+    if (typeof encoding === 'string') {
+      this.createTextDecoder(encoding);
+    }
+  };
+  /**
+   * Initialize service windows
+   * Must be run before service use
+   *
+   * @param  {Integer}  pts               PTS value
+   * @param  {Function} beforeRowOverflow Function to execute before row overflow of a window
+   */
+
+  Cea708Service.prototype.init = function (pts, beforeRowOverflow) {
+    this.startPts = pts;
+    for (var win = 0; win < 8; win++) {
+      this.windows[win] = new Cea708Window(win);
+      if (typeof beforeRowOverflow === 'function') {
+        this.windows[win].beforeRowOverflow = beforeRowOverflow;
+      }
+    }
+  };
+  /**
+   * Set current window of service to be affected by commands
+   *
+   * @param  {Integer} windowNum Window number
+   */
+
+  Cea708Service.prototype.setCurrentWindow = function (windowNum) {
+    this.currentWindow = this.windows[windowNum];
+  };
+  /**
+   * Try to create a TextDecoder if it is natively supported
+   */
+
+  Cea708Service.prototype.createTextDecoder = function (encoding) {
+    if (typeof TextDecoder === 'undefined') {
+      this.stream.trigger('log', {
+        level: 'warn',
+        message: 'The `encoding` option is unsupported without TextDecoder support'
+      });
+    } else {
+      try {
+        this.textDecoder_ = new TextDecoder(encoding);
+      } catch (error) {
+        this.stream.trigger('log', {
+          level: 'warn',
+          message: 'TextDecoder could not be created with ' + encoding + ' encoding. ' + error
+        });
+      }
+    }
+  };
+  var Cea708Stream = function (options) {
+    options = options || {};
+    Cea708Stream.prototype.init.call(this);
+    var self = this;
+    var captionServices = options.captionServices || {};
+    var captionServiceEncodings = {};
+    var serviceProps; // Get service encodings from captionServices option block
+
+    Object.keys(captionServices).forEach(serviceName => {
+      serviceProps = captionServices[serviceName];
+      if (/^SERVICE/.test(serviceName)) {
+        captionServiceEncodings[serviceName] = serviceProps.encoding;
+      }
+    });
+    this.serviceEncodings = captionServiceEncodings;
+    this.current708Packet = null;
+    this.services = {};
+    this.push = function (packet) {
+      if (packet.type === 3) {
+        // 708 packet start
+        self.new708Packet();
+        self.add708Bytes(packet);
+      } else {
+        if (self.current708Packet === null) {
+          // This should only happen at the start of a file if there's no packet start.
+          self.new708Packet();
+        }
+        self.add708Bytes(packet);
+      }
+    };
+  };
+  Cea708Stream.prototype = new Stream$7();
+  /**
+   * Push current 708 packet, create new 708 packet.
+   */
+
+  Cea708Stream.prototype.new708Packet = function () {
+    if (this.current708Packet !== null) {
+      this.push708Packet();
+    }
+    this.current708Packet = {
+      data: [],
+      ptsVals: []
+    };
+  };
+  /**
+   * Add pts and both bytes from packet into current 708 packet.
+   */
+
+  Cea708Stream.prototype.add708Bytes = function (packet) {
+    var data = packet.ccData;
+    var byte0 = data >>> 8;
+    var byte1 = data & 0xff; // I would just keep a list of packets instead of bytes, but it isn't clear in the spec
+    // that service blocks will always line up with byte pairs.
+
+    this.current708Packet.ptsVals.push(packet.pts);
+    this.current708Packet.data.push(byte0);
+    this.current708Packet.data.push(byte1);
+  };
+  /**
+   * Parse completed 708 packet into service blocks and push each service block.
+   */
+
+  Cea708Stream.prototype.push708Packet = function () {
+    var packet708 = this.current708Packet;
+    var packetData = packet708.data;
+    var serviceNum = null;
+    var blockSize = null;
+    var i = 0;
+    var b = packetData[i++];
+    packet708.seq = b >> 6;
+    packet708.sizeCode = b & 0x3f; // 0b00111111;
+
+    for (; i < packetData.length; i++) {
+      b = packetData[i++];
+      serviceNum = b >> 5;
+      blockSize = b & 0x1f; // 0b00011111
+
+      if (serviceNum === 7 && blockSize > 0) {
+        // Extended service num
+        b = packetData[i++];
+        serviceNum = b;
+      }
+      this.pushServiceBlock(serviceNum, i, blockSize);
+      if (blockSize > 0) {
+        i += blockSize - 1;
+      }
+    }
+  };
+  /**
+   * Parse service block, execute commands, read text.
+   *
+   * Note: While many of these commands serve important purposes,
+   * many others just parse out the parameters or attributes, but
+   * nothing is done with them because this is not a full and complete
+   * implementation of the entire 708 spec.
+   *
+   * @param  {Integer} serviceNum Service number
+   * @param  {Integer} start      Start index of the 708 packet data
+   * @param  {Integer} size       Block size
+   */
+
+  Cea708Stream.prototype.pushServiceBlock = function (serviceNum, start, size) {
+    var b;
+    var i = start;
+    var packetData = this.current708Packet.data;
+    var service = this.services[serviceNum];
+    if (!service) {
+      service = this.initService(serviceNum, i);
+    }
+    for (; i < start + size && i < packetData.length; i++) {
+      b = packetData[i];
+      if (within708TextBlock(b)) {
+        i = this.handleText(i, service);
+      } else if (b === 0x18) {
+        i = this.multiByteCharacter(i, service);
+      } else if (b === 0x10) {
+        i = this.extendedCommands(i, service);
+      } else if (0x80 <= b && b <= 0x87) {
+        i = this.setCurrentWindow(i, service);
+      } else if (0x98 <= b && b <= 0x9f) {
+        i = this.defineWindow(i, service);
+      } else if (b === 0x88) {
+        i = this.clearWindows(i, service);
+      } else if (b === 0x8c) {
+        i = this.deleteWindows(i, service);
+      } else if (b === 0x89) {
+        i = this.displayWindows(i, service);
+      } else if (b === 0x8a) {
+        i = this.hideWindows(i, service);
+      } else if (b === 0x8b) {
+        i = this.toggleWindows(i, service);
+      } else if (b === 0x97) {
+        i = this.setWindowAttributes(i, service);
+      } else if (b === 0x90) {
+        i = this.setPenAttributes(i, service);
+      } else if (b === 0x91) {
+        i = this.setPenColor(i, service);
+      } else if (b === 0x92) {
+        i = this.setPenLocation(i, service);
+      } else if (b === 0x8f) {
+        service = this.reset(i, service);
+      } else if (b === 0x08) {
+        // BS: Backspace
+        service.currentWindow.backspace();
+      } else if (b === 0x0c) {
+        // FF: Form feed
+        service.currentWindow.clearText();
+      } else if (b === 0x0d) {
+        // CR: Carriage return
+        service.currentWindow.pendingNewLine = true;
+      } else if (b === 0x0e) {
+        // HCR: Horizontal carriage return
+        service.currentWindow.clearText();
+      } else if (b === 0x8d) {
+        // DLY: Delay, nothing to do
+        i++;
+      } else ;
+    }
+  };
+  /**
+   * Execute an extended command
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.extendedCommands = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[++i];
+    if (within708TextBlock(b)) {
+      i = this.handleText(i, service, {
+        isExtended: true
+      });
+    }
+    return i;
+  };
+  /**
+   * Get PTS value of a given byte index
+   *
+   * @param  {Integer} byteIndex  Index of the byte
+   * @return {Integer}            PTS
+   */
+
+  Cea708Stream.prototype.getPts = function (byteIndex) {
+    // There's 1 pts value per 2 bytes
+    return this.current708Packet.ptsVals[Math.floor(byteIndex / 2)];
+  };
+  /**
+   * Initializes a service
+   *
+   * @param  {Integer} serviceNum Service number
+   * @return {Service}            Initialized service object
+   */
+
+  Cea708Stream.prototype.initService = function (serviceNum, i) {
+    var serviceName = 'SERVICE' + serviceNum;
+    var self = this;
+    var serviceName;
+    var encoding;
+    if (serviceName in this.serviceEncodings) {
+      encoding = this.serviceEncodings[serviceName];
+    }
+    this.services[serviceNum] = new Cea708Service(serviceNum, encoding, self);
+    this.services[serviceNum].init(this.getPts(i), function (pts) {
+      self.flushDisplayed(pts, self.services[serviceNum]);
+    });
+    return this.services[serviceNum];
+  };
+  /**
+   * Execute text writing to current window
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.handleText = function (i, service, options) {
+    var isExtended = options && options.isExtended;
+    var isMultiByte = options && options.isMultiByte;
+    var packetData = this.current708Packet.data;
+    var extended = isExtended ? 0x1000 : 0x0000;
+    var currentByte = packetData[i];
+    var nextByte = packetData[i + 1];
+    var win = service.currentWindow;
+    var char;
+    var charCodeArray; // Converts an array of bytes to a unicode hex string.
+
+    function toHexString(byteArray) {
+      return byteArray.map(byte => {
+        return ('0' + (byte & 0xFF).toString(16)).slice(-2);
+      }).join('');
+    }
+    if (isMultiByte) {
+      charCodeArray = [currentByte, nextByte];
+      i++;
+    } else {
+      charCodeArray = [currentByte];
+    } // Use the TextDecoder if one was created for this service
+
+    if (service.textDecoder_ && !isExtended) {
+      char = service.textDecoder_.decode(new Uint8Array(charCodeArray));
+    } else {
+      // We assume any multi-byte char without a decoder is unicode.
+      if (isMultiByte) {
+        const unicode = toHexString(charCodeArray); // Takes a unicode hex string and creates a single character.
+
+        char = String.fromCharCode(parseInt(unicode, 16));
+      } else {
+        char = get708CharFromCode(extended | currentByte);
+      }
+    }
+    if (win.pendingNewLine && !win.isEmpty()) {
+      win.newLine(this.getPts(i));
+    }
+    win.pendingNewLine = false;
+    win.addText(char);
+    return i;
+  };
+  /**
+   * Handle decoding of multibyte character
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.multiByteCharacter = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var firstByte = packetData[i + 1];
+    var secondByte = packetData[i + 2];
+    if (within708TextBlock(firstByte) && within708TextBlock(secondByte)) {
+      i = this.handleText(++i, service, {
+        isMultiByte: true
+      });
+    }
+    return i;
+  };
+  /**
+   * Parse and execute the CW# command.
+   *
+   * Set the current window.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.setCurrentWindow = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[i];
+    var windowNum = b & 0x07;
+    service.setCurrentWindow(windowNum);
+    return i;
+  };
+  /**
+   * Parse and execute the DF# command.
+   *
+   * Define a window and set it as the current window.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.defineWindow = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[i];
+    var windowNum = b & 0x07;
+    service.setCurrentWindow(windowNum);
+    var win = service.currentWindow;
+    b = packetData[++i];
+    win.visible = (b & 0x20) >> 5; // v
+
+    win.rowLock = (b & 0x10) >> 4; // rl
+
+    win.columnLock = (b & 0x08) >> 3; // cl
+
+    win.priority = b & 0x07; // p
+
+    b = packetData[++i];
+    win.relativePositioning = (b & 0x80) >> 7; // rp
+
+    win.anchorVertical = b & 0x7f; // av
+
+    b = packetData[++i];
+    win.anchorHorizontal = b; // ah
+
+    b = packetData[++i];
+    win.anchorPoint = (b & 0xf0) >> 4; // ap
+
+    win.rowCount = b & 0x0f; // rc
+
+    b = packetData[++i];
+    win.columnCount = b & 0x3f; // cc
+
+    b = packetData[++i];
+    win.windowStyle = (b & 0x38) >> 3; // ws
+
+    win.penStyle = b & 0x07; // ps
+    // The spec says there are (rowCount+1) "virtual rows"
+
+    win.virtualRowCount = win.rowCount + 1;
+    return i;
+  };
+  /**
+   * Parse and execute the SWA command.
+   *
+   * Set attributes of the current window.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.setWindowAttributes = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[i];
+    var winAttr = service.currentWindow.winAttr;
+    b = packetData[++i];
+    winAttr.fillOpacity = (b & 0xc0) >> 6; // fo
+
+    winAttr.fillRed = (b & 0x30) >> 4; // fr
+
+    winAttr.fillGreen = (b & 0x0c) >> 2; // fg
+
+    winAttr.fillBlue = b & 0x03; // fb
+
+    b = packetData[++i];
+    winAttr.borderType = (b & 0xc0) >> 6; // bt
+
+    winAttr.borderRed = (b & 0x30) >> 4; // br
+
+    winAttr.borderGreen = (b & 0x0c) >> 2; // bg
+
+    winAttr.borderBlue = b & 0x03; // bb
+
+    b = packetData[++i];
+    winAttr.borderType += (b & 0x80) >> 5; // bt
+
+    winAttr.wordWrap = (b & 0x40) >> 6; // ww
+
+    winAttr.printDirection = (b & 0x30) >> 4; // pd
+
+    winAttr.scrollDirection = (b & 0x0c) >> 2; // sd
+
+    winAttr.justify = b & 0x03; // j
+
+    b = packetData[++i];
+    winAttr.effectSpeed = (b & 0xf0) >> 4; // es
+
+    winAttr.effectDirection = (b & 0x0c) >> 2; // ed
+
+    winAttr.displayEffect = b & 0x03; // de
+
+    return i;
+  };
+  /**
+   * Gather text from all displayed windows and push a caption to output.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   */
+
+  Cea708Stream.prototype.flushDisplayed = function (pts, service) {
+    var displayedText = []; // TODO: Positioning not supported, displaying multiple windows will not necessarily
+    // display text in the correct order, but sample files so far have not shown any issue.
+
+    for (var winId = 0; winId < 8; winId++) {
+      if (service.windows[winId].visible && !service.windows[winId].isEmpty()) {
+        displayedText.push(service.windows[winId].getText());
+      }
+    }
+    service.endPts = pts;
+    service.text = displayedText.join('\n\n');
+    this.pushCaption(service);
+    service.startPts = pts;
+  };
+  /**
+   * Push a caption to output if the caption contains text.
+   *
+   * @param  {Service} service  The service object to be affected
+   */
+
+  Cea708Stream.prototype.pushCaption = function (service) {
+    if (service.text !== '') {
+      this.trigger('data', {
+        startPts: service.startPts,
+        endPts: service.endPts,
+        text: service.text,
+        stream: 'cc708_' + service.serviceNum
+      });
+      service.text = '';
+      service.startPts = service.endPts;
+    }
+  };
+  /**
+   * Parse and execute the DSW command.
+   *
+   * Set visible property of windows based on the parsed bitmask.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.displayWindows = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[++i];
+    var pts = this.getPts(i);
+    this.flushDisplayed(pts, service);
+    for (var winId = 0; winId < 8; winId++) {
+      if (b & 0x01 << winId) {
+        service.windows[winId].visible = 1;
+      }
+    }
+    return i;
+  };
+  /**
+   * Parse and execute the HDW command.
+   *
+   * Set visible property of windows based on the parsed bitmask.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.hideWindows = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[++i];
+    var pts = this.getPts(i);
+    this.flushDisplayed(pts, service);
+    for (var winId = 0; winId < 8; winId++) {
+      if (b & 0x01 << winId) {
+        service.windows[winId].visible = 0;
+      }
+    }
+    return i;
+  };
+  /**
+   * Parse and execute the TGW command.
+   *
+   * Set visible property of windows based on the parsed bitmask.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.toggleWindows = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[++i];
+    var pts = this.getPts(i);
+    this.flushDisplayed(pts, service);
+    for (var winId = 0; winId < 8; winId++) {
+      if (b & 0x01 << winId) {
+        service.windows[winId].visible ^= 1;
+      }
+    }
+    return i;
+  };
+  /**
+   * Parse and execute the CLW command.
+   *
+   * Clear text of windows based on the parsed bitmask.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.clearWindows = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[++i];
+    var pts = this.getPts(i);
+    this.flushDisplayed(pts, service);
+    for (var winId = 0; winId < 8; winId++) {
+      if (b & 0x01 << winId) {
+        service.windows[winId].clearText();
+      }
+    }
+    return i;
+  };
+  /**
+   * Parse and execute the DLW command.
+   *
+   * Re-initialize windows based on the parsed bitmask.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.deleteWindows = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[++i];
+    var pts = this.getPts(i);
+    this.flushDisplayed(pts, service);
+    for (var winId = 0; winId < 8; winId++) {
+      if (b & 0x01 << winId) {
+        service.windows[winId].reset();
+      }
+    }
+    return i;
+  };
+  /**
+   * Parse and execute the SPA command.
+   *
+   * Set pen attributes of the current window.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.setPenAttributes = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[i];
+    var penAttr = service.currentWindow.penAttr;
+    b = packetData[++i];
+    penAttr.textTag = (b & 0xf0) >> 4; // tt
+
+    penAttr.offset = (b & 0x0c) >> 2; // o
+
+    penAttr.penSize = b & 0x03; // s
+
+    b = packetData[++i];
+    penAttr.italics = (b & 0x80) >> 7; // i
+
+    penAttr.underline = (b & 0x40) >> 6; // u
+
+    penAttr.edgeType = (b & 0x38) >> 3; // et
+
+    penAttr.fontStyle = b & 0x07; // fs
+
+    return i;
+  };
+  /**
+   * Parse and execute the SPC command.
+   *
+   * Set pen color of the current window.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.setPenColor = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[i];
+    var penColor = service.currentWindow.penColor;
+    b = packetData[++i];
+    penColor.fgOpacity = (b & 0xc0) >> 6; // fo
+
+    penColor.fgRed = (b & 0x30) >> 4; // fr
+
+    penColor.fgGreen = (b & 0x0c) >> 2; // fg
+
+    penColor.fgBlue = b & 0x03; // fb
+
+    b = packetData[++i];
+    penColor.bgOpacity = (b & 0xc0) >> 6; // bo
+
+    penColor.bgRed = (b & 0x30) >> 4; // br
+
+    penColor.bgGreen = (b & 0x0c) >> 2; // bg
+
+    penColor.bgBlue = b & 0x03; // bb
+
+    b = packetData[++i];
+    penColor.edgeRed = (b & 0x30) >> 4; // er
+
+    penColor.edgeGreen = (b & 0x0c) >> 2; // eg
+
+    penColor.edgeBlue = b & 0x03; // eb
+
+    return i;
+  };
+  /**
+   * Parse and execute the SPL command.
+   *
+   * Set pen location of the current window.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.setPenLocation = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[i];
+    var penLoc = service.currentWindow.penLoc; // Positioning isn't really supported at the moment, so this essentially just inserts a linebreak
+
+    service.currentWindow.pendingNewLine = true;
+    b = packetData[++i];
+    penLoc.row = b & 0x0f; // r
+
+    b = packetData[++i];
+    penLoc.column = b & 0x3f; // c
+
+    return i;
+  };
+  /**
+   * Execute the RST command.
+   *
+   * Reset service to a clean slate. Re-initialize.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Service}          Re-initialized service
+   */
+
+  Cea708Stream.prototype.reset = function (i, service) {
+    var pts = this.getPts(i);
+    this.flushDisplayed(pts, service);
+    return this.initService(service.serviceNum, i);
+  }; // This hash maps non-ASCII, special, and extended character codes to their
+  // proper Unicode equivalent. The first keys that are only a single byte
+  // are the non-standard ASCII characters, which simply map the CEA608 byte
+  // to the standard ASCII/Unicode. The two-byte keys that follow are the CEA608
+  // character codes, but have their MSB bitmasked with 0x03 so that a lookup
+  // can be performed regardless of the field and data channel on which the
+  // character code was received.
+
+  var CHARACTER_TRANSLATION = {
+    0x2a: 0xe1,
+    // á
+    0x5c: 0xe9,
+    // é
+    0x5e: 0xed,
+    // í
+    0x5f: 0xf3,
+    // ó
+    0x60: 0xfa,
+    // ú
+    0x7b: 0xe7,
+    // ç
+    0x7c: 0xf7,
+    // ÷
+    0x7d: 0xd1,
+    // Ñ
+    0x7e: 0xf1,
+    // ñ
+    0x7f: 0x2588,
+    // █
+    0x0130: 0xae,
+    // ®
+    0x0131: 0xb0,
+    // °
+    0x0132: 0xbd,
+    // ½
+    0x0133: 0xbf,
+    // ¿
+    0x0134: 0x2122,
+    // ™
+    0x0135: 0xa2,
+    // ¢
+    0x0136: 0xa3,
+    // £
+    0x0137: 0x266a,
+    // ♪
+    0x0138: 0xe0,
+    // à
+    0x0139: 0xa0,
+    //
+    0x013a: 0xe8,
+    // è
+    0x013b: 0xe2,
+    // â
+    0x013c: 0xea,
+    // ê
+    0x013d: 0xee,
+    // î
+    0x013e: 0xf4,
+    // ô
+    0x013f: 0xfb,
+    // û
+    0x0220: 0xc1,
+    // Á
+    0x0221: 0xc9,
+    // É
+    0x0222: 0xd3,
+    // Ó
+    0x0223: 0xda,
+    // Ú
+    0x0224: 0xdc,
+    // Ü
+    0x0225: 0xfc,
+    // ü
+    0x0226: 0x2018,
+    // ‘
+    0x0227: 0xa1,
+    // ¡
+    0x0228: 0x2a,
+    // *
+    0x0229: 0x27,
+    // '
+    0x022a: 0x2014,
+    // —
+    0x022b: 0xa9,
+    // ©
+    0x022c: 0x2120,
+    // ℠
+    0x022d: 0x2022,
+    // •
+    0x022e: 0x201c,
+    // “
+    0x022f: 0x201d,
+    // ”
+    0x0230: 0xc0,
+    // À
+    0x0231: 0xc2,
+    // Â
+    0x0232: 0xc7,
+    // Ç
+    0x0233: 0xc8,
+    // È
+    0x0234: 0xca,
+    // Ê
+    0x0235: 0xcb,
+    // Ë
+    0x0236: 0xeb,
+    // ë
+    0x0237: 0xce,
+    // Î
+    0x0238: 0xcf,
+    // Ï
+    0x0239: 0xef,
+    // ï
+    0x023a: 0xd4,
+    // Ô
+    0x023b: 0xd9,
+    // Ù
+    0x023c: 0xf9,
+    // ù
+    0x023d: 0xdb,
+    // Û
+    0x023e: 0xab,
+    // «
+    0x023f: 0xbb,
+    // »
+    0x0320: 0xc3,
+    // Ã
+    0x0321: 0xe3,
+    // ã
+    0x0322: 0xcd,
+    // Í
+    0x0323: 0xcc,
+    // Ì
+    0x0324: 0xec,
+    // ì
+    0x0325: 0xd2,
+    // Ò
+    0x0326: 0xf2,
+    // ò
+    0x0327: 0xd5,
+    // Õ
+    0x0328: 0xf5,
+    // õ
+    0x0329: 0x7b,
+    // {
+    0x032a: 0x7d,
+    // }
+    0x032b: 0x5c,
+    // \
+    0x032c: 0x5e,
+    // ^
+    0x032d: 0x5f,
+    // _
+    0x032e: 0x7c,
+    // |
+    0x032f: 0x7e,
+    // ~
+    0x0330: 0xc4,
+    // Ä
+    0x0331: 0xe4,
+    // ä
+    0x0332: 0xd6,
+    // Ö
+    0x0333: 0xf6,
+    // ö
+    0x0334: 0xdf,
+    // ß
+    0x0335: 0xa5,
+    // ¥
+    0x0336: 0xa4,
+    // ¤
+    0x0337: 0x2502,
+    // │
+    0x0338: 0xc5,
+    // Å
+    0x0339: 0xe5,
+    // å
+    0x033a: 0xd8,
+    // Ø
+    0x033b: 0xf8,
+    // ø
+    0x033c: 0x250c,
+    // ┌
+    0x033d: 0x2510,
+    // ┐
+    0x033e: 0x2514,
+    // └
+    0x033f: 0x2518 // ┘
+  };
+
+  var getCharFromCode = function (code) {
+    if (code === null) {
+      return '';
+    }
+    code = CHARACTER_TRANSLATION[code] || code;
+    return String.fromCharCode(code);
+  }; // the index of the last row in a CEA-608 display buffer
+
+  var BOTTOM_ROW = 14; // This array is used for mapping PACs -> row #, since there's no way of
+  // getting it through bit logic.
+
+  var ROWS = [0x1100, 0x1120, 0x1200, 0x1220, 0x1500, 0x1520, 0x1600, 0x1620, 0x1700, 0x1720, 0x1000, 0x1300, 0x1320, 0x1400, 0x1420]; // CEA-608 captions are rendered onto a 34x15 matrix of character
+  // cells. The "bottom" row is the last element in the outer array.
+  // We keep track of positioning information as we go by storing the
+  // number of indentations and the tab offset in this buffer.
+
+  var createDisplayBuffer = function () {
+    var result = [],
+      i = BOTTOM_ROW + 1;
+    while (i--) {
+      result.push({
+        text: '',
+        indent: 0,
+        offset: 0
+      });
+    }
+    return result;
+  };
+  var Cea608Stream = function (field, dataChannel) {
+    Cea608Stream.prototype.init.call(this);
+    this.field_ = field || 0;
+    this.dataChannel_ = dataChannel || 0;
+    this.name_ = 'CC' + ((this.field_ << 1 | this.dataChannel_) + 1);
+    this.setConstants();
+    this.reset();
+    this.push = function (packet) {
+      var data, swap, char0, char1, text; // remove the parity bits
+
+      data = packet.ccData & 0x7f7f; // ignore duplicate control codes; the spec demands they're sent twice
+
+      if (data === this.lastControlCode_) {
+        this.lastControlCode_ = null;
+        return;
+      } // Store control codes
+
+      if ((data & 0xf000) === 0x1000) {
+        this.lastControlCode_ = data;
+      } else if (data !== this.PADDING_) {
+        this.lastControlCode_ = null;
+      }
+      char0 = data >>> 8;
+      char1 = data & 0xff;
+      if (data === this.PADDING_) {
+        return;
+      } else if (data === this.RESUME_CAPTION_LOADING_) {
+        this.mode_ = 'popOn';
+      } else if (data === this.END_OF_CAPTION_) {
+        // If an EOC is received while in paint-on mode, the displayed caption
+        // text should be swapped to non-displayed memory as if it was a pop-on
+        // caption. Because of that, we should explicitly switch back to pop-on
+        // mode
+        this.mode_ = 'popOn';
+        this.clearFormatting(packet.pts); // if a caption was being displayed, it's gone now
+
+        this.flushDisplayed(packet.pts); // flip memory
+
+        swap = this.displayed_;
+        this.displayed_ = this.nonDisplayed_;
+        this.nonDisplayed_ = swap; // start measuring the time to display the caption
+
+        this.startPts_ = packet.pts;
+      } else if (data === this.ROLL_UP_2_ROWS_) {
+        this.rollUpRows_ = 2;
+        this.setRollUp(packet.pts);
+      } else if (data === this.ROLL_UP_3_ROWS_) {
+        this.rollUpRows_ = 3;
+        this.setRollUp(packet.pts);
+      } else if (data === this.ROLL_UP_4_ROWS_) {
+        this.rollUpRows_ = 4;
+        this.setRollUp(packet.pts);
+      } else if (data === this.CARRIAGE_RETURN_) {
+        this.clearFormatting(packet.pts);
+        this.flushDisplayed(packet.pts);
+        this.shiftRowsUp_();
+        this.startPts_ = packet.pts;
+      } else if (data === this.BACKSPACE_) {
+        if (this.mode_ === 'popOn') {
+          this.nonDisplayed_[this.row_].text = this.nonDisplayed_[this.row_].text.slice(0, -1);
+        } else {
+          this.displayed_[this.row_].text = this.displayed_[this.row_].text.slice(0, -1);
+        }
+      } else if (data === this.ERASE_DISPLAYED_MEMORY_) {
+        this.flushDisplayed(packet.pts);
+        this.displayed_ = createDisplayBuffer();
+      } else if (data === this.ERASE_NON_DISPLAYED_MEMORY_) {
+        this.nonDisplayed_ = createDisplayBuffer();
+      } else if (data === this.RESUME_DIRECT_CAPTIONING_) {
+        if (this.mode_ !== 'paintOn') {
+          // NOTE: This should be removed when proper caption positioning is
+          // implemented
+          this.flushDisplayed(packet.pts);
+          this.displayed_ = createDisplayBuffer();
+        }
+        this.mode_ = 'paintOn';
+        this.startPts_ = packet.pts; // Append special characters to caption text
+      } else if (this.isSpecialCharacter(char0, char1)) {
+        // Bitmask char0 so that we can apply character transformations
+        // regardless of field and data channel.
+        // Then byte-shift to the left and OR with char1 so we can pass the
+        // entire character code to `getCharFromCode`.
+        char0 = (char0 & 0x03) << 8;
+        text = getCharFromCode(char0 | char1);
+        this[this.mode_](packet.pts, text);
+        this.column_++; // Append extended characters to caption text
+      } else if (this.isExtCharacter(char0, char1)) {
+        // Extended characters always follow their "non-extended" equivalents.
+        // IE if a "è" is desired, you'll always receive "eè"; non-compliant
+        // decoders are supposed to drop the "è", while compliant decoders
+        // backspace the "e" and insert "è".
+        // Delete the previous character
+        if (this.mode_ === 'popOn') {
+          this.nonDisplayed_[this.row_].text = this.nonDisplayed_[this.row_].text.slice(0, -1);
+        } else {
+          this.displayed_[this.row_].text = this.displayed_[this.row_].text.slice(0, -1);
+        } // Bitmask char0 so that we can apply character transformations
+        // regardless of field and data channel.
+        // Then byte-shift to the left and OR with char1 so we can pass the
+        // entire character code to `getCharFromCode`.
+
+        char0 = (char0 & 0x03) << 8;
+        text = getCharFromCode(char0 | char1);
+        this[this.mode_](packet.pts, text);
+        this.column_++; // Process mid-row codes
+      } else if (this.isMidRowCode(char0, char1)) {
+        // Attributes are not additive, so clear all formatting
+        this.clearFormatting(packet.pts); // According to the standard, mid-row codes
+        // should be replaced with spaces, so add one now
+
+        this[this.mode_](packet.pts, ' ');
+        this.column_++;
+        if ((char1 & 0xe) === 0xe) {
+          this.addFormatting(packet.pts, ['i']);
+        }
+        if ((char1 & 0x1) === 0x1) {
+          this.addFormatting(packet.pts, ['u']);
+        } // Detect offset control codes and adjust cursor
+      } else if (this.isOffsetControlCode(char0, char1)) {
+        // Cursor position is set by indent PAC (see below) in 4-column
+        // increments, with an additional offset code of 1-3 to reach any
+        // of the 32 columns specified by CEA-608. So all we need to do
+        // here is increment the column cursor by the given offset.
+        const offset = char1 & 0x03; // For an offest value 1-3, set the offset for that caption
+        // in the non-displayed array.
+
+        this.nonDisplayed_[this.row_].offset = offset;
+        this.column_ += offset; // Detect PACs (Preamble Address Codes)
+      } else if (this.isPAC(char0, char1)) {
+        // There's no logic for PAC -> row mapping, so we have to just
+        // find the row code in an array and use its index :(
+        var row = ROWS.indexOf(data & 0x1f20); // Configure the caption window if we're in roll-up mode
+
+        if (this.mode_ === 'rollUp') {
+          // This implies that the base row is incorrectly set.
+          // As per the recommendation in CEA-608(Base Row Implementation), defer to the number
+          // of roll-up rows set.
+          if (row - this.rollUpRows_ + 1 < 0) {
+            row = this.rollUpRows_ - 1;
+          }
+          this.setRollUp(packet.pts, row);
+        } // Ensure the row is between 0 and 14, otherwise use the most
+        // recent or default row.
+
+        if (row !== this.row_ && row >= 0 && row <= 14) {
+          // formatting is only persistent for current row
+          this.clearFormatting(packet.pts);
+          this.row_ = row;
+        } // All PACs can apply underline, so detect and apply
+        // (All odd-numbered second bytes set underline)
+
+        if (char1 & 0x1 && this.formatting_.indexOf('u') === -1) {
+          this.addFormatting(packet.pts, ['u']);
+        }
+        if ((data & 0x10) === 0x10) {
+          // We've got an indent level code. Each successive even number
+          // increments the column cursor by 4, so we can get the desired
+          // column position by bit-shifting to the right (to get n/2)
+          // and multiplying by 4.
+          const indentations = (data & 0xe) >> 1;
+          this.column_ = indentations * 4; // add to the number of indentations for positioning
+
+          this.nonDisplayed_[this.row_].indent += indentations;
+        }
+        if (this.isColorPAC(char1)) {
+          // it's a color code, though we only support white, which
+          // can be either normal or italicized. white italics can be
+          // either 0x4e or 0x6e depending on the row, so we just
+          // bitwise-and with 0xe to see if italics should be turned on
+          if ((char1 & 0xe) === 0xe) {
+            this.addFormatting(packet.pts, ['i']);
+          }
+        } // We have a normal character in char0, and possibly one in char1
+      } else if (this.isNormalChar(char0)) {
+        if (char1 === 0x00) {
+          char1 = null;
+        }
+        text = getCharFromCode(char0);
+        text += getCharFromCode(char1);
+        this[this.mode_](packet.pts, text);
+        this.column_ += text.length;
+      } // finish data processing
+    };
+  };
+
+  Cea608Stream.prototype = new Stream$7(); // Trigger a cue point that captures the current state of the
+  // display buffer
+
+  Cea608Stream.prototype.flushDisplayed = function (pts) {
+    const logWarning = index => {
+      this.trigger('log', {
+        level: 'warn',
+        message: 'Skipping a malformed 608 caption at index ' + index + '.'
+      });
+    };
+    const content = [];
+    this.displayed_.forEach((row, i) => {
+      if (row && row.text && row.text.length) {
+        try {
+          // remove spaces from the start and end of the string
+          row.text = row.text.trim();
+        } catch (e) {
+          // Ordinarily, this shouldn't happen. However, caption
+          // parsing errors should not throw exceptions and
+          // break playback.
+          logWarning(i);
+        } // See the below link for more details on the following fields:
+        // https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#positioning-in-cea-608
+
+        if (row.text.length) {
+          content.push({
+            // The text to be displayed in the caption from this specific row, with whitespace removed.
+            text: row.text,
+            // Value between 1 and 15 representing the PAC row used to calculate line height.
+            line: i + 1,
+            // A number representing the indent position by percentage (CEA-608 PAC indent code).
+            // The value will be a number between 10 and 80. Offset is used to add an aditional
+            // value to the position if necessary.
+            position: 10 + Math.min(70, row.indent * 10) + row.offset * 2.5
+          });
+        }
+      } else if (row === undefined || row === null) {
+        logWarning(i);
+      }
+    });
+    if (content.length) {
+      this.trigger('data', {
+        startPts: this.startPts_,
+        endPts: pts,
+        content,
+        stream: this.name_
+      });
+    }
+  };
+  /**
+   * Zero out the data, used for startup and on seek
+   */
+
+  Cea608Stream.prototype.reset = function () {
+    this.mode_ = 'popOn'; // When in roll-up mode, the index of the last row that will
+    // actually display captions. If a caption is shifted to a row
+    // with a lower index than this, it is cleared from the display
+    // buffer
+
+    this.topRow_ = 0;
+    this.startPts_ = 0;
+    this.displayed_ = createDisplayBuffer();
+    this.nonDisplayed_ = createDisplayBuffer();
+    this.lastControlCode_ = null; // Track row and column for proper line-breaking and spacing
+
+    this.column_ = 0;
+    this.row_ = BOTTOM_ROW;
+    this.rollUpRows_ = 2; // This variable holds currently-applied formatting
+
+    this.formatting_ = [];
+  };
+  /**
+   * Sets up control code and related constants for this instance
+   */
+
+  Cea608Stream.prototype.setConstants = function () {
+    // The following attributes have these uses:
+    // ext_ :    char0 for mid-row codes, and the base for extended
+    //           chars (ext_+0, ext_+1, and ext_+2 are char0s for
+    //           extended codes)
+    // control_: char0 for control codes, except byte-shifted to the
+    //           left so that we can do this.control_ | CONTROL_CODE
+    // offset_:  char0 for tab offset codes
+    //
+    // It's also worth noting that control codes, and _only_ control codes,
+    // differ between field 1 and field2. Field 2 control codes are always
+    // their field 1 value plus 1. That's why there's the "| field" on the
+    // control value.
+    if (this.dataChannel_ === 0) {
+      this.BASE_ = 0x10;
+      this.EXT_ = 0x11;
+      this.CONTROL_ = (0x14 | this.field_) << 8;
+      this.OFFSET_ = 0x17;
+    } else if (this.dataChannel_ === 1) {
+      this.BASE_ = 0x18;
+      this.EXT_ = 0x19;
+      this.CONTROL_ = (0x1c | this.field_) << 8;
+      this.OFFSET_ = 0x1f;
+    } // Constants for the LSByte command codes recognized by Cea608Stream. This
+    // list is not exhaustive. For a more comprehensive listing and semantics see
+    // http://www.gpo.gov/fdsys/pkg/CFR-2010-title47-vol1/pdf/CFR-2010-title47-vol1-sec15-119.pdf
+    // Padding
+
+    this.PADDING_ = 0x0000; // Pop-on Mode
+
+    this.RESUME_CAPTION_LOADING_ = this.CONTROL_ | 0x20;
+    this.END_OF_CAPTION_ = this.CONTROL_ | 0x2f; // Roll-up Mode
+
+    this.ROLL_UP_2_ROWS_ = this.CONTROL_ | 0x25;
+    this.ROLL_UP_3_ROWS_ = this.CONTROL_ | 0x26;
+    this.ROLL_UP_4_ROWS_ = this.CONTROL_ | 0x27;
+    this.CARRIAGE_RETURN_ = this.CONTROL_ | 0x2d; // paint-on mode
+
+    this.RESUME_DIRECT_CAPTIONING_ = this.CONTROL_ | 0x29; // Erasure
+
+    this.BACKSPACE_ = this.CONTROL_ | 0x21;
+    this.ERASE_DISPLAYED_MEMORY_ = this.CONTROL_ | 0x2c;
+    this.ERASE_NON_DISPLAYED_MEMORY_ = this.CONTROL_ | 0x2e;
+  };
+  /**
+   * Detects if the 2-byte packet data is a special character
+   *
+   * Special characters have a second byte in the range 0x30 to 0x3f,
+   * with the first byte being 0x11 (for data channel 1) or 0x19 (for
+   * data channel 2).
+   *
+   * @param  {Integer} char0 The first byte
+   * @param  {Integer} char1 The second byte
+   * @return {Boolean}       Whether the 2 bytes are an special character
+   */
+
+  Cea608Stream.prototype.isSpecialCharacter = function (char0, char1) {
+    return char0 === this.EXT_ && char1 >= 0x30 && char1 <= 0x3f;
+  };
+  /**
+   * Detects if the 2-byte packet data is an extended character
+   *
+   * Extended characters have a second byte in the range 0x20 to 0x3f,
+   * with the first byte being 0x12 or 0x13 (for data channel 1) or
+   * 0x1a or 0x1b (for data channel 2).
+   *
+   * @param  {Integer} char0 The first byte
+   * @param  {Integer} char1 The second byte
+   * @return {Boolean}       Whether the 2 bytes are an extended character
+   */
+
+  Cea608Stream.prototype.isExtCharacter = function (char0, char1) {
+    return (char0 === this.EXT_ + 1 || char0 === this.EXT_ + 2) && char1 >= 0x20 && char1 <= 0x3f;
+  };
+  /**
+   * Detects if the 2-byte packet is a mid-row code
+   *
+   * Mid-row codes have a second byte in the range 0x20 to 0x2f, with
+   * the first byte being 0x11 (for data channel 1) or 0x19 (for data
+   * channel 2).
+   *
+   * @param  {Integer} char0 The first byte
+   * @param  {Integer} char1 The second byte
+   * @return {Boolean}       Whether the 2 bytes are a mid-row code
+   */
+
+  Cea608Stream.prototype.isMidRowCode = function (char0, char1) {
+    return char0 === this.EXT_ && char1 >= 0x20 && char1 <= 0x2f;
+  };
+  /**
+   * Detects if the 2-byte packet is an offset control code
+   *
+   * Offset control codes have a second byte in the range 0x21 to 0x23,
+   * with the first byte being 0x17 (for data channel 1) or 0x1f (for
+   * data channel 2).
+   *
+   * @param  {Integer} char0 The first byte
+   * @param  {Integer} char1 The second byte
+   * @return {Boolean}       Whether the 2 bytes are an offset control code
+   */
+
+  Cea608Stream.prototype.isOffsetControlCode = function (char0, char1) {
+    return char0 === this.OFFSET_ && char1 >= 0x21 && char1 <= 0x23;
+  };
+  /**
+   * Detects if the 2-byte packet is a Preamble Address Code
+   *
+   * PACs have a first byte in the range 0x10 to 0x17 (for data channel 1)
+   * or 0x18 to 0x1f (for data channel 2), with the second byte in the
+   * range 0x40 to 0x7f.
+   *
+   * @param  {Integer} char0 The first byte
+   * @param  {Integer} char1 The second byte
+   * @return {Boolean}       Whether the 2 bytes are a PAC
+   */
+
+  Cea608Stream.prototype.isPAC = function (char0, char1) {
+    return char0 >= this.BASE_ && char0 < this.BASE_ + 8 && char1 >= 0x40 && char1 <= 0x7f;
+  };
+  /**
+   * Detects if a packet's second byte is in the range of a PAC color code
+   *
+   * PAC color codes have the second byte be in the range 0x40 to 0x4f, or
+   * 0x60 to 0x6f.
+   *
+   * @param  {Integer} char1 The second byte
+   * @return {Boolean}       Whether the byte is a color PAC
+   */
+
+  Cea608Stream.prototype.isColorPAC = function (char1) {
+    return char1 >= 0x40 && char1 <= 0x4f || char1 >= 0x60 && char1 <= 0x7f;
+  };
+  /**
+   * Detects if a single byte is in the range of a normal character
+   *
+   * Normal text bytes are in the range 0x20 to 0x7f.
+   *
+   * @param  {Integer} char  The byte
+   * @return {Boolean}       Whether the byte is a normal character
+   */
+
+  Cea608Stream.prototype.isNormalChar = function (char) {
+    return char >= 0x20 && char <= 0x7f;
+  };
+  /**
+   * Configures roll-up
+   *
+   * @param  {Integer} pts         Current PTS
+   * @param  {Integer} newBaseRow  Used by PACs to slide the current window to
+   *                               a new position
+   */
+
+  Cea608Stream.prototype.setRollUp = function (pts, newBaseRow) {
+    // Reset the base row to the bottom row when switching modes
+    if (this.mode_ !== 'rollUp') {
+      this.row_ = BOTTOM_ROW;
+      this.mode_ = 'rollUp'; // Spec says to wipe memories when switching to roll-up
+
+      this.flushDisplayed(pts);
+      this.nonDisplayed_ = createDisplayBuffer();
+      this.displayed_ = createDisplayBuffer();
+    }
+    if (newBaseRow !== undefined && newBaseRow !== this.row_) {
+      // move currently displayed captions (up or down) to the new base row
+      for (var i = 0; i < this.rollUpRows_; i++) {
+        this.displayed_[newBaseRow - i] = this.displayed_[this.row_ - i];
+        this.displayed_[this.row_ - i] = {
+          text: '',
+          indent: 0,
+          offset: 0
+        };
+      }
+    }
+    if (newBaseRow === undefined) {
+      newBaseRow = this.row_;
+    }
+    this.topRow_ = newBaseRow - this.rollUpRows_ + 1;
+  }; // Adds the opening HTML tag for the passed character to the caption text,
+  // and keeps track of it for later closing
+
+  Cea608Stream.prototype.addFormatting = function (pts, format) {
+    this.formatting_ = this.formatting_.concat(format);
+    var text = format.reduce(function (text, format) {
+      return text + '<' + format + '>';
+    }, '');
+    this[this.mode_](pts, text);
+  }; // Adds HTML closing tags for current formatting to caption text and
+  // clears remembered formatting
+
+  Cea608Stream.prototype.clearFormatting = function (pts) {
+    if (!this.formatting_.length) {
+      return;
+    }
+    var text = this.formatting_.reverse().reduce(function (text, format) {
+      return text + '</' + format + '>';
+    }, '');
+    this.formatting_ = [];
+    this[this.mode_](pts, text);
+  }; // Mode Implementations
+
+  Cea608Stream.prototype.popOn = function (pts, text) {
+    var baseRow = this.nonDisplayed_[this.row_].text; // buffer characters
+
+    baseRow += text;
+    this.nonDisplayed_[this.row_].text = baseRow;
+  };
+  Cea608Stream.prototype.rollUp = function (pts, text) {
+    var baseRow = this.displayed_[this.row_].text;
+    baseRow += text;
+    this.displayed_[this.row_].text = baseRow;
+  };
+  Cea608Stream.prototype.shiftRowsUp_ = function () {
+    var i; // clear out inactive rows
+
+    for (i = 0; i < this.topRow_; i++) {
+      this.displayed_[i] = {
+        text: '',
+        indent: 0,
+        offset: 0
+      };
+    }
+    for (i = this.row_ + 1; i < BOTTOM_ROW + 1; i++) {
+      this.displayed_[i] = {
+        text: '',
+        indent: 0,
+        offset: 0
+      };
+    } // shift displayed rows up
+
+    for (i = this.topRow_; i < this.row_; i++) {
+      this.displayed_[i] = this.displayed_[i + 1];
+    } // clear out the bottom row
+
+    this.displayed_[this.row_] = {
+      text: '',
+      indent: 0,
+      offset: 0
+    };
+  };
+  Cea608Stream.prototype.paintOn = function (pts, text) {
+    var baseRow = this.displayed_[this.row_].text;
+    baseRow += text;
+    this.displayed_[this.row_].text = baseRow;
+  }; // exports
+
+  var captionStream = {
+    CaptionStream: CaptionStream$2,
+    Cea608Stream: Cea608Stream,
+    Cea708Stream: Cea708Stream
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var streamTypes = {
+    H264_STREAM_TYPE: 0x1B,
+    ADTS_STREAM_TYPE: 0x0F,
+    METADATA_STREAM_TYPE: 0x15
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Accepts program elementary stream (PES) data events and corrects
+   * decode and presentation time stamps to account for a rollover
+   * of the 33 bit value.
+   */
+
+  var Stream$6 = stream;
+  var MAX_TS = 8589934592;
+  var RO_THRESH = 4294967296;
+  var TYPE_SHARED = 'shared';
+  var handleRollover$1 = function (value, reference) {
+    var direction = 1;
+    if (value > reference) {
+      // If the current timestamp value is greater than our reference timestamp and we detect a
+      // timestamp rollover, this means the roll over is happening in the opposite direction.
+      // Example scenario: Enter a long stream/video just after a rollover occurred. The reference
+      // point will be set to a small number, e.g. 1. The user then seeks backwards over the
+      // rollover point. In loading this segment, the timestamp values will be very large,
+      // e.g. 2^33 - 1. Since this comes before the data we loaded previously, we want to adjust
+      // the time stamp to be `value - 2^33`.
+      direction = -1;
+    } // Note: A seek forwards or back that is greater than the RO_THRESH (2^32, ~13 hours) will
+    // cause an incorrect adjustment.
+
+    while (Math.abs(reference - value) > RO_THRESH) {
+      value += direction * MAX_TS;
+    }
+    return value;
+  };
+  var TimestampRolloverStream$1 = function (type) {
+    var lastDTS, referenceDTS;
+    TimestampRolloverStream$1.prototype.init.call(this); // The "shared" type is used in cases where a stream will contain muxed
+    // video and audio. We could use `undefined` here, but having a string
+    // makes debugging a little clearer.
+
+    this.type_ = type || TYPE_SHARED;
+    this.push = function (data) {
+      /**
+       * Rollover stream expects data from elementary stream.
+       * Elementary stream can push forward 2 types of data
+       * - Parsed Video/Audio/Timed-metadata PES (packetized elementary stream) packets
+       * - Tracks metadata from PMT (Program Map Table)
+       * Rollover stream expects pts/dts info to be available, since it stores lastDTS
+       * We should ignore non-PES packets since they may override lastDTS to undefined.
+       * lastDTS is important to signal the next segments
+       * about rollover from the previous segments.
+       */
+      if (data.type === 'metadata') {
+        this.trigger('data', data);
+        return;
+      } // Any "shared" rollover streams will accept _all_ data. Otherwise,
+      // streams will only accept data that matches their type.
+
+      if (this.type_ !== TYPE_SHARED && data.type !== this.type_) {
+        return;
+      }
+      if (referenceDTS === undefined) {
+        referenceDTS = data.dts;
+      }
+      data.dts = handleRollover$1(data.dts, referenceDTS);
+      data.pts = handleRollover$1(data.pts, referenceDTS);
+      lastDTS = data.dts;
+      this.trigger('data', data);
+    };
+    this.flush = function () {
+      referenceDTS = lastDTS;
+      this.trigger('done');
+    };
+    this.endTimeline = function () {
+      this.flush();
+      this.trigger('endedtimeline');
+    };
+    this.discontinuity = function () {
+      referenceDTS = void 0;
+      lastDTS = void 0;
+    };
+    this.reset = function () {
+      this.discontinuity();
+      this.trigger('reset');
+    };
+  };
+  TimestampRolloverStream$1.prototype = new Stream$6();
+  var timestampRolloverStream = {
+    TimestampRolloverStream: TimestampRolloverStream$1,
+    handleRollover: handleRollover$1
+  }; // Once IE11 support is dropped, this function should be removed.
+
+  var typedArrayIndexOf$1 = (typedArray, element, fromIndex) => {
+    if (!typedArray) {
+      return -1;
+    }
+    var currentIndex = fromIndex;
+    for (; currentIndex < typedArray.length; currentIndex++) {
+      if (typedArray[currentIndex] === element) {
+        return currentIndex;
+      }
+    }
+    return -1;
+  };
+  var typedArray = {
+    typedArrayIndexOf: typedArrayIndexOf$1
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Tools for parsing ID3 frame data
+   * @see http://id3.org/id3v2.3.0
+   */
+
+  var typedArrayIndexOf = typedArray.typedArrayIndexOf,
+    // Frames that allow different types of text encoding contain a text
+    // encoding description byte [ID3v2.4.0 section 4.]
+    textEncodingDescriptionByte = {
+      Iso88591: 0x00,
+      // ISO-8859-1, terminated with \0.
+      Utf16: 0x01,
+      // UTF-16 encoded Unicode BOM, terminated with \0\0
+      Utf16be: 0x02,
+      // UTF-16BE encoded Unicode, without BOM, terminated with \0\0
+      Utf8: 0x03 // UTF-8 encoded Unicode, terminated with \0
+    },
+    // return a percent-encoded representation of the specified byte range
+    // @see http://en.wikipedia.org/wiki/Percent-encoding 
+    percentEncode$1 = function (bytes, start, end) {
+      var i,
+        result = '';
+      for (i = start; i < end; i++) {
+        result += '%' + ('00' + bytes[i].toString(16)).slice(-2);
+      }
+      return result;
+    },
+    // return the string representation of the specified byte range,
+    // interpreted as UTf-8.
+    parseUtf8 = function (bytes, start, end) {
+      return decodeURIComponent(percentEncode$1(bytes, start, end));
+    },
+    // return the string representation of the specified byte range,
+    // interpreted as ISO-8859-1.
+    parseIso88591$1 = function (bytes, start, end) {
+      return unescape(percentEncode$1(bytes, start, end)); // jshint ignore:line
+    },
+    parseSyncSafeInteger$1 = function (data) {
+      return data[0] << 21 | data[1] << 14 | data[2] << 7 | data[3];
+    },
+    frameParsers = {
+      'APIC': function (frame) {
+        var i = 1,
+          mimeTypeEndIndex,
+          descriptionEndIndex,
+          LINK_MIME_TYPE = '-->';
+        if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+          // ignore frames with unrecognized character encodings
+          return;
+        } // parsing fields [ID3v2.4.0 section 4.14.]
+
+        mimeTypeEndIndex = typedArrayIndexOf(frame.data, 0, i);
+        if (mimeTypeEndIndex < 0) {
+          // malformed frame
+          return;
+        } // parsing Mime type field (terminated with \0)
+
+        frame.mimeType = parseIso88591$1(frame.data, i, mimeTypeEndIndex);
+        i = mimeTypeEndIndex + 1; // parsing 1-byte Picture Type field
+
+        frame.pictureType = frame.data[i];
+        i++;
+        descriptionEndIndex = typedArrayIndexOf(frame.data, 0, i);
+        if (descriptionEndIndex < 0) {
+          // malformed frame
+          return;
+        } // parsing Description field (terminated with \0)
+
+        frame.description = parseUtf8(frame.data, i, descriptionEndIndex);
+        i = descriptionEndIndex + 1;
+        if (frame.mimeType === LINK_MIME_TYPE) {
+          // parsing Picture Data field as URL (always represented as ISO-8859-1 [ID3v2.4.0 section 4.])
+          frame.url = parseIso88591$1(frame.data, i, frame.data.length);
+        } else {
+          // parsing Picture Data field as binary data
+          frame.pictureData = frame.data.subarray(i, frame.data.length);
+        }
+      },
+      'T*': function (frame) {
+        if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+          // ignore frames with unrecognized character encodings
+          return;
+        } // parse text field, do not include null terminator in the frame value
+        // frames that allow different types of encoding contain terminated text [ID3v2.4.0 section 4.]
+
+        frame.value = parseUtf8(frame.data, 1, frame.data.length).replace(/\0*$/, ''); // text information frames supports multiple strings, stored as a terminator separated list [ID3v2.4.0 section 4.2.]
+
+        frame.values = frame.value.split('\0');
+      },
+      'TXXX': function (frame) {
+        var descriptionEndIndex;
+        if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+          // ignore frames with unrecognized character encodings
+          return;
+        }
+        descriptionEndIndex = typedArrayIndexOf(frame.data, 0, 1);
+        if (descriptionEndIndex === -1) {
+          return;
+        } // parse the text fields
+
+        frame.description = parseUtf8(frame.data, 1, descriptionEndIndex); // do not include the null terminator in the tag value
+        // frames that allow different types of encoding contain terminated text
+        // [ID3v2.4.0 section 4.]
+
+        frame.value = parseUtf8(frame.data, descriptionEndIndex + 1, frame.data.length).replace(/\0*$/, '');
+        frame.data = frame.value;
+      },
+      'W*': function (frame) {
+        // parse URL field; URL fields are always represented as ISO-8859-1 [ID3v2.4.0 section 4.]
+        // if the value is followed by a string termination all the following information should be ignored [ID3v2.4.0 section 4.3]
+        frame.url = parseIso88591$1(frame.data, 0, frame.data.length).replace(/\0.*$/, '');
+      },
+      'WXXX': function (frame) {
+        var descriptionEndIndex;
+        if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+          // ignore frames with unrecognized character encodings
+          return;
+        }
+        descriptionEndIndex = typedArrayIndexOf(frame.data, 0, 1);
+        if (descriptionEndIndex === -1) {
+          return;
+        } // parse the description and URL fields
+
+        frame.description = parseUtf8(frame.data, 1, descriptionEndIndex); // URL fields are always represented as ISO-8859-1 [ID3v2.4.0 section 4.]
+        // if the value is followed by a string termination all the following information
+        // should be ignored [ID3v2.4.0 section 4.3]
+
+        frame.url = parseIso88591$1(frame.data, descriptionEndIndex + 1, frame.data.length).replace(/\0.*$/, '');
+      },
+      'PRIV': function (frame) {
+        var i;
+        for (i = 0; i < frame.data.length; i++) {
+          if (frame.data[i] === 0) {
+            // parse the description and URL fields
+            frame.owner = parseIso88591$1(frame.data, 0, i);
+            break;
+          }
+        }
+        frame.privateData = frame.data.subarray(i + 1);
+        frame.data = frame.privateData;
+      }
+    };
+  var parseId3Frames$1 = function (data) {
+    var frameSize,
+      frameHeader,
+      frameStart = 10,
+      tagSize = 0,
+      frames = []; // If we don't have enough data for a header, 10 bytes, 
+    // or 'ID3' in the first 3 bytes this is not a valid ID3 tag.
+
+    if (data.length < 10 || data[0] !== 'I'.charCodeAt(0) || data[1] !== 'D'.charCodeAt(0) || data[2] !== '3'.charCodeAt(0)) {
+      return;
+    } // the frame size is transmitted as a 28-bit integer in the
+    // last four bytes of the ID3 header.
+    // The most significant bit of each byte is dropped and the
+    // results concatenated to recover the actual value.
+
+    tagSize = parseSyncSafeInteger$1(data.subarray(6, 10)); // ID3 reports the tag size excluding the header but it's more
+    // convenient for our comparisons to include it
+
+    tagSize += 10; // check bit 6 of byte 5 for the extended header flag.
+
+    var hasExtendedHeader = data[5] & 0x40;
+    if (hasExtendedHeader) {
+      // advance the frame start past the extended header
+      frameStart += 4; // header size field
+
+      frameStart += parseSyncSafeInteger$1(data.subarray(10, 14));
+      tagSize -= parseSyncSafeInteger$1(data.subarray(16, 20)); // clip any padding off the end
+    } // parse one or more ID3 frames
+    // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+    do {
+      // determine the number of bytes in this frame
+      frameSize = parseSyncSafeInteger$1(data.subarray(frameStart + 4, frameStart + 8));
+      if (frameSize < 1) {
+        break;
+      }
+      frameHeader = String.fromCharCode(data[frameStart], data[frameStart + 1], data[frameStart + 2], data[frameStart + 3]);
+      var frame = {
+        id: frameHeader,
+        data: data.subarray(frameStart + 10, frameStart + frameSize + 10)
+      };
+      frame.key = frame.id; // parse frame values
+
+      if (frameParsers[frame.id]) {
+        // use frame specific parser
+        frameParsers[frame.id](frame);
+      } else if (frame.id[0] === 'T') {
+        // use text frame generic parser
+        frameParsers['T*'](frame);
+      } else if (frame.id[0] === 'W') {
+        // use URL link frame generic parser
+        frameParsers['W*'](frame);
+      }
+      frames.push(frame);
+      frameStart += 10; // advance past the frame header
+
+      frameStart += frameSize; // advance past the frame body
+    } while (frameStart < tagSize);
+    return frames;
+  };
+  var parseId3 = {
+    parseId3Frames: parseId3Frames$1,
+    parseSyncSafeInteger: parseSyncSafeInteger$1,
+    frameParsers: frameParsers
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Accepts program elementary stream (PES) data events and parses out
+   * ID3 metadata from them, if present.
+   * @see http://id3.org/id3v2.3.0
+   */
+
+  var Stream$5 = stream,
+    StreamTypes$3 = streamTypes,
+    id3 = parseId3,
+    MetadataStream;
+  MetadataStream = function (options) {
+    var settings = {
+        // the bytes of the program-level descriptor field in MP2T
+        // see ISO/IEC 13818-1:2013 (E), section 2.6 "Program and
+        // program element descriptors"
+        descriptor: options && options.descriptor
+      },
+      // the total size in bytes of the ID3 tag being parsed
+      tagSize = 0,
+      // tag data that is not complete enough to be parsed
+      buffer = [],
+      // the total number of bytes currently in the buffer
+      bufferSize = 0,
+      i;
+    MetadataStream.prototype.init.call(this); // calculate the text track in-band metadata track dispatch type
+    // https://html.spec.whatwg.org/multipage/embedded-content.html#steps-to-expose-a-media-resource-specific-text-track
+
+    this.dispatchType = StreamTypes$3.METADATA_STREAM_TYPE.toString(16);
+    if (settings.descriptor) {
+      for (i = 0; i < settings.descriptor.length; i++) {
+        this.dispatchType += ('00' + settings.descriptor[i].toString(16)).slice(-2);
+      }
+    }
+    this.push = function (chunk) {
+      var tag, frameStart, frameSize, frame, i, frameHeader;
+      if (chunk.type !== 'timed-metadata') {
+        return;
+      } // if data_alignment_indicator is set in the PES header,
+      // we must have the start of a new ID3 tag. Assume anything
+      // remaining in the buffer was malformed and throw it out
+
+      if (chunk.dataAlignmentIndicator) {
+        bufferSize = 0;
+        buffer.length = 0;
+      } // ignore events that don't look like ID3 data
+
+      if (buffer.length === 0 && (chunk.data.length < 10 || chunk.data[0] !== 'I'.charCodeAt(0) || chunk.data[1] !== 'D'.charCodeAt(0) || chunk.data[2] !== '3'.charCodeAt(0))) {
+        this.trigger('log', {
+          level: 'warn',
+          message: 'Skipping unrecognized metadata packet'
+        });
+        return;
+      } // add this chunk to the data we've collected so far
+
+      buffer.push(chunk);
+      bufferSize += chunk.data.byteLength; // grab the size of the entire frame from the ID3 header
+
+      if (buffer.length === 1) {
+        // the frame size is transmitted as a 28-bit integer in the
+        // last four bytes of the ID3 header.
+        // The most significant bit of each byte is dropped and the
+        // results concatenated to recover the actual value.
+        tagSize = id3.parseSyncSafeInteger(chunk.data.subarray(6, 10)); // ID3 reports the tag size excluding the header but it's more
+        // convenient for our comparisons to include it
+
+        tagSize += 10;
+      } // if the entire frame has not arrived, wait for more data
+
+      if (bufferSize < tagSize) {
+        return;
+      } // collect the entire frame so it can be parsed
+
+      tag = {
+        data: new Uint8Array(tagSize),
+        frames: [],
+        pts: buffer[0].pts,
+        dts: buffer[0].dts
+      };
+      for (i = 0; i < tagSize;) {
+        tag.data.set(buffer[0].data.subarray(0, tagSize - i), i);
+        i += buffer[0].data.byteLength;
+        bufferSize -= buffer[0].data.byteLength;
+        buffer.shift();
+      } // find the start of the first frame and the end of the tag
+
+      frameStart = 10;
+      if (tag.data[5] & 0x40) {
+        // advance the frame start past the extended header
+        frameStart += 4; // header size field
+
+        frameStart += id3.parseSyncSafeInteger(tag.data.subarray(10, 14)); // clip any padding off the end
+
+        tagSize -= id3.parseSyncSafeInteger(tag.data.subarray(16, 20));
+      } // parse one or more ID3 frames
+      // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+      do {
+        // determine the number of bytes in this frame
+        frameSize = id3.parseSyncSafeInteger(tag.data.subarray(frameStart + 4, frameStart + 8));
+        if (frameSize < 1) {
+          this.trigger('log', {
+            level: 'warn',
+            message: 'Malformed ID3 frame encountered. Skipping remaining metadata parsing.'
+          }); // If the frame is malformed, don't parse any further frames but allow previous valid parsed frames
+          // to be sent along.
+
+          break;
+        }
+        frameHeader = String.fromCharCode(tag.data[frameStart], tag.data[frameStart + 1], tag.data[frameStart + 2], tag.data[frameStart + 3]);
+        frame = {
+          id: frameHeader,
+          data: tag.data.subarray(frameStart + 10, frameStart + frameSize + 10)
+        };
+        frame.key = frame.id; // parse frame values
+
+        if (id3.frameParsers[frame.id]) {
+          // use frame specific parser
+          id3.frameParsers[frame.id](frame);
+        } else if (frame.id[0] === 'T') {
+          // use text frame generic parser
+          id3.frameParsers['T*'](frame);
+        } else if (frame.id[0] === 'W') {
+          // use URL link frame generic parser
+          id3.frameParsers['W*'](frame);
+        } // handle the special PRIV frame used to indicate the start
+        // time for raw AAC data
+
+        if (frame.owner === 'com.apple.streaming.transportStreamTimestamp') {
+          var d = frame.data,
+            size = (d[3] & 0x01) << 30 | d[4] << 22 | d[5] << 14 | d[6] << 6 | d[7] >>> 2;
+          size *= 4;
+          size += d[7] & 0x03;
+          frame.timeStamp = size; // in raw AAC, all subsequent data will be timestamped based
+          // on the value of this frame
+          // we couldn't have known the appropriate pts and dts before
+          // parsing this ID3 tag so set those values now
+
+          if (tag.pts === undefined && tag.dts === undefined) {
+            tag.pts = frame.timeStamp;
+            tag.dts = frame.timeStamp;
+          }
+          this.trigger('timestamp', frame);
+        }
+        tag.frames.push(frame);
+        frameStart += 10; // advance past the frame header
+
+        frameStart += frameSize; // advance past the frame body
+      } while (frameStart < tagSize);
+      this.trigger('data', tag);
+    };
+  };
+  MetadataStream.prototype = new Stream$5();
+  var metadataStream = MetadataStream;
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * A stream-based mp2t to mp4 converter. This utility can be used to
+   * deliver mp4s to a SourceBuffer on platforms that support native
+   * Media Source Extensions.
+   */
+
+  var Stream$4 = stream,
+    CaptionStream$1 = captionStream,
+    StreamTypes$2 = streamTypes,
+    TimestampRolloverStream = timestampRolloverStream.TimestampRolloverStream; // object types
+
+  var TransportPacketStream, TransportParseStream, ElementaryStream; // constants
+
+  var MP2T_PACKET_LENGTH$1 = 188,
+    // bytes
+    SYNC_BYTE$1 = 0x47;
+  /**
+   * Splits an incoming stream of binary data into MPEG-2 Transport
+   * Stream packets.
+   */
+
+  TransportPacketStream = function () {
+    var buffer = new Uint8Array(MP2T_PACKET_LENGTH$1),
+      bytesInBuffer = 0;
+    TransportPacketStream.prototype.init.call(this); // Deliver new bytes to the stream.
+
+    /**
+     * Split a stream of data into M2TS packets
+    **/
+
+    this.push = function (bytes) {
+      var startIndex = 0,
+        endIndex = MP2T_PACKET_LENGTH$1,
+        everything; // If there are bytes remaining from the last segment, prepend them to the
+      // bytes that were pushed in
+
+      if (bytesInBuffer) {
+        everything = new Uint8Array(bytes.byteLength + bytesInBuffer);
+        everything.set(buffer.subarray(0, bytesInBuffer));
+        everything.set(bytes, bytesInBuffer);
+        bytesInBuffer = 0;
+      } else {
+        everything = bytes;
+      } // While we have enough data for a packet
+
+      while (endIndex < everything.byteLength) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (everything[startIndex] === SYNC_BYTE$1 && everything[endIndex] === SYNC_BYTE$1) {
+          // We found a packet so emit it and jump one whole packet forward in
+          // the stream
+          this.trigger('data', everything.subarray(startIndex, endIndex));
+          startIndex += MP2T_PACKET_LENGTH$1;
+          endIndex += MP2T_PACKET_LENGTH$1;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex++;
+        endIndex++;
+      } // If there was some data left over at the end of the segment that couldn't
+      // possibly be a whole packet, keep it because it might be the start of a packet
+      // that continues in the next segment
+
+      if (startIndex < everything.byteLength) {
+        buffer.set(everything.subarray(startIndex), 0);
+        bytesInBuffer = everything.byteLength - startIndex;
+      }
+    };
+    /**
+     * Passes identified M2TS packets to the TransportParseStream to be parsed
+    **/
+
+    this.flush = function () {
+      // If the buffer contains a whole packet when we are being flushed, emit it
+      // and empty the buffer. Otherwise hold onto the data because it may be
+      // important for decoding the next segment
+      if (bytesInBuffer === MP2T_PACKET_LENGTH$1 && buffer[0] === SYNC_BYTE$1) {
+        this.trigger('data', buffer);
+        bytesInBuffer = 0;
+      }
+      this.trigger('done');
+    };
+    this.endTimeline = function () {
+      this.flush();
+      this.trigger('endedtimeline');
+    };
+    this.reset = function () {
+      bytesInBuffer = 0;
+      this.trigger('reset');
+    };
+  };
+  TransportPacketStream.prototype = new Stream$4();
+  /**
+   * Accepts an MP2T TransportPacketStream and emits data events with parsed
+   * forms of the individual transport stream packets.
+   */
+
+  TransportParseStream = function () {
+    var parsePsi, parsePat, parsePmt, self;
+    TransportParseStream.prototype.init.call(this);
+    self = this;
+    this.packetsWaitingForPmt = [];
+    this.programMapTable = undefined;
+    parsePsi = function (payload, psi) {
+      var offset = 0; // PSI packets may be split into multiple sections and those
+      // sections may be split into multiple packets. If a PSI
+      // section starts in this packet, the payload_unit_start_indicator
+      // will be true and the first byte of the payload will indicate
+      // the offset from the current position to the start of the
+      // section.
+
+      if (psi.payloadUnitStartIndicator) {
+        offset += payload[offset] + 1;
+      }
+      if (psi.type === 'pat') {
+        parsePat(payload.subarray(offset), psi);
+      } else {
+        parsePmt(payload.subarray(offset), psi);
+      }
+    };
+    parsePat = function (payload, pat) {
+      pat.section_number = payload[7]; // eslint-disable-line camelcase
+
+      pat.last_section_number = payload[8]; // eslint-disable-line camelcase
+      // skip the PSI header and parse the first PMT entry
+
+      self.pmtPid = (payload[10] & 0x1F) << 8 | payload[11];
+      pat.pmtPid = self.pmtPid;
+    };
+    /**
+     * Parse out the relevant fields of a Program Map Table (PMT).
+     * @param payload {Uint8Array} the PMT-specific portion of an MP2T
+     * packet. The first byte in this array should be the table_id
+     * field.
+     * @param pmt {object} the object that should be decorated with
+     * fields parsed from the PMT.
+     */
+
+    parsePmt = function (payload, pmt) {
+      var sectionLength, tableEnd, programInfoLength, offset; // PMTs can be sent ahead of the time when they should actually
+      // take effect. We don't believe this should ever be the case
+      // for HLS but we'll ignore "forward" PMT declarations if we see
+      // them. Future PMT declarations have the current_next_indicator
+      // set to zero.
+
+      if (!(payload[5] & 0x01)) {
+        return;
+      } // overwrite any existing program map table
+
+      self.programMapTable = {
+        video: null,
+        audio: null,
+        'timed-metadata': {}
+      }; // the mapping table ends at the end of the current section
+
+      sectionLength = (payload[1] & 0x0f) << 8 | payload[2];
+      tableEnd = 3 + sectionLength - 4; // to determine where the table is, we have to figure out how
+      // long the program info descriptors are
+
+      programInfoLength = (payload[10] & 0x0f) << 8 | payload[11]; // advance the offset to the first entry in the mapping table
+
+      offset = 12 + programInfoLength;
+      while (offset < tableEnd) {
+        var streamType = payload[offset];
+        var pid = (payload[offset + 1] & 0x1F) << 8 | payload[offset + 2]; // only map a single elementary_pid for audio and video stream types
+        // TODO: should this be done for metadata too? for now maintain behavior of
+        //       multiple metadata streams
+
+        if (streamType === StreamTypes$2.H264_STREAM_TYPE && self.programMapTable.video === null) {
+          self.programMapTable.video = pid;
+        } else if (streamType === StreamTypes$2.ADTS_STREAM_TYPE && self.programMapTable.audio === null) {
+          self.programMapTable.audio = pid;
+        } else if (streamType === StreamTypes$2.METADATA_STREAM_TYPE) {
+          // map pid to stream type for metadata streams
+          self.programMapTable['timed-metadata'][pid] = streamType;
+        } // move to the next table entry
+        // skip past the elementary stream descriptors, if present
+
+        offset += ((payload[offset + 3] & 0x0F) << 8 | payload[offset + 4]) + 5;
+      } // record the map on the packet as well
+
+      pmt.programMapTable = self.programMapTable;
+    };
+    /**
+     * Deliver a new MP2T packet to the next stream in the pipeline.
+     */
+
+    this.push = function (packet) {
+      var result = {},
+        offset = 4;
+      result.payloadUnitStartIndicator = !!(packet[1] & 0x40); // pid is a 13-bit field starting at the last bit of packet[1]
+
+      result.pid = packet[1] & 0x1f;
+      result.pid <<= 8;
+      result.pid |= packet[2]; // if an adaption field is present, its length is specified by the
+      // fifth byte of the TS packet header. The adaptation field is
+      // used to add stuffing to PES packets that don't fill a complete
+      // TS packet, and to specify some forms of timing and control data
+      // that we do not currently use.
+
+      if ((packet[3] & 0x30) >>> 4 > 0x01) {
+        offset += packet[offset] + 1;
+      } // parse the rest of the packet based on the type
+
+      if (result.pid === 0) {
+        result.type = 'pat';
+        parsePsi(packet.subarray(offset), result);
+        this.trigger('data', result);
+      } else if (result.pid === this.pmtPid) {
+        result.type = 'pmt';
+        parsePsi(packet.subarray(offset), result);
+        this.trigger('data', result); // if there are any packets waiting for a PMT to be found, process them now
+
+        while (this.packetsWaitingForPmt.length) {
+          this.processPes_.apply(this, this.packetsWaitingForPmt.shift());
+        }
+      } else if (this.programMapTable === undefined) {
+        // When we have not seen a PMT yet, defer further processing of
+        // PES packets until one has been parsed
+        this.packetsWaitingForPmt.push([packet, offset, result]);
+      } else {
+        this.processPes_(packet, offset, result);
+      }
+    };
+    this.processPes_ = function (packet, offset, result) {
+      // set the appropriate stream type
+      if (result.pid === this.programMapTable.video) {
+        result.streamType = StreamTypes$2.H264_STREAM_TYPE;
+      } else if (result.pid === this.programMapTable.audio) {
+        result.streamType = StreamTypes$2.ADTS_STREAM_TYPE;
+      } else {
+        // if not video or audio, it is timed-metadata or unknown
+        // if unknown, streamType will be undefined
+        result.streamType = this.programMapTable['timed-metadata'][result.pid];
+      }
+      result.type = 'pes';
+      result.data = packet.subarray(offset);
+      this.trigger('data', result);
+    };
+  };
+  TransportParseStream.prototype = new Stream$4();
+  TransportParseStream.STREAM_TYPES = {
+    h264: 0x1b,
+    adts: 0x0f
+  };
+  /**
+   * Reconsistutes program elementary stream (PES) packets from parsed
+   * transport stream packets. That is, if you pipe an
+   * mp2t.TransportParseStream into a mp2t.ElementaryStream, the output
+   * events will be events which capture the bytes for individual PES
+   * packets plus relevant metadata that has been extracted from the
+   * container.
+   */
+
+  ElementaryStream = function () {
+    var self = this,
+      segmentHadPmt = false,
+      // PES packet fragments
+      video = {
+        data: [],
+        size: 0
+      },
+      audio = {
+        data: [],
+        size: 0
+      },
+      timedMetadata = {
+        data: [],
+        size: 0
+      },
+      programMapTable,
+      parsePes = function (payload, pes) {
+        var ptsDtsFlags;
+        const startPrefix = payload[0] << 16 | payload[1] << 8 | payload[2]; // default to an empty array
+
+        pes.data = new Uint8Array(); // In certain live streams, the start of a TS fragment has ts packets
+        // that are frame data that is continuing from the previous fragment. This
+        // is to check that the pes data is the start of a new pes payload
+
+        if (startPrefix !== 1) {
+          return;
+        } // get the packet length, this will be 0 for video
+
+        pes.packetLength = 6 + (payload[4] << 8 | payload[5]); // find out if this packets starts a new keyframe
+
+        pes.dataAlignmentIndicator = (payload[6] & 0x04) !== 0; // PES packets may be annotated with a PTS value, or a PTS value
+        // and a DTS value. Determine what combination of values is
+        // available to work with.
+
+        ptsDtsFlags = payload[7]; // PTS and DTS are normally stored as a 33-bit number.  Javascript
+        // performs all bitwise operations on 32-bit integers but javascript
+        // supports a much greater range (52-bits) of integer using standard
+        // mathematical operations.
+        // We construct a 31-bit value using bitwise operators over the 31
+        // most significant bits and then multiply by 4 (equal to a left-shift
+        // of 2) before we add the final 2 least significant bits of the
+        // timestamp (equal to an OR.)
+
+        if (ptsDtsFlags & 0xC0) {
+          // the PTS and DTS are not written out directly. For information
+          // on how they are encoded, see
+          // http://dvd.sourceforge.net/dvdinfo/pes-hdr.html
+          pes.pts = (payload[9] & 0x0E) << 27 | (payload[10] & 0xFF) << 20 | (payload[11] & 0xFE) << 12 | (payload[12] & 0xFF) << 5 | (payload[13] & 0xFE) >>> 3;
+          pes.pts *= 4; // Left shift by 2
+
+          pes.pts += (payload[13] & 0x06) >>> 1; // OR by the two LSBs
+
+          pes.dts = pes.pts;
+          if (ptsDtsFlags & 0x40) {
+            pes.dts = (payload[14] & 0x0E) << 27 | (payload[15] & 0xFF) << 20 | (payload[16] & 0xFE) << 12 | (payload[17] & 0xFF) << 5 | (payload[18] & 0xFE) >>> 3;
+            pes.dts *= 4; // Left shift by 2
+
+            pes.dts += (payload[18] & 0x06) >>> 1; // OR by the two LSBs
+          }
+        } // the data section starts immediately after the PES header.
+        // pes_header_data_length specifies the number of header bytes
+        // that follow the last byte of the field.
+
+        pes.data = payload.subarray(9 + payload[8]);
+      },
+      /**
+        * Pass completely parsed PES packets to the next stream in the pipeline
+       **/
+      flushStream = function (stream, type, forceFlush) {
+        var packetData = new Uint8Array(stream.size),
+          event = {
+            type: type
+          },
+          i = 0,
+          offset = 0,
+          packetFlushable = false,
+          fragment; // do nothing if there is not enough buffered data for a complete
+        // PES header
+
+        if (!stream.data.length || stream.size < 9) {
+          return;
+        }
+        event.trackId = stream.data[0].pid; // reassemble the packet
+
+        for (i = 0; i < stream.data.length; i++) {
+          fragment = stream.data[i];
+          packetData.set(fragment.data, offset);
+          offset += fragment.data.byteLength;
+        } // parse assembled packet's PES header
+
+        parsePes(packetData, event); // non-video PES packets MUST have a non-zero PES_packet_length
+        // check that there is enough stream data to fill the packet
+
+        packetFlushable = type === 'video' || event.packetLength <= stream.size; // flush pending packets if the conditions are right
+
+        if (forceFlush || packetFlushable) {
+          stream.size = 0;
+          stream.data.length = 0;
+        } // only emit packets that are complete. this is to avoid assembling
+        // incomplete PES packets due to poor segmentation
+
+        if (packetFlushable) {
+          self.trigger('data', event);
+        }
+      };
+    ElementaryStream.prototype.init.call(this);
+    /**
+     * Identifies M2TS packet types and parses PES packets using metadata
+     * parsed from the PMT
+     **/
+
+    this.push = function (data) {
+      ({
+        pat: function () {// we have to wait for the PMT to arrive as well before we
+          // have any meaningful metadata
+        },
+        pes: function () {
+          var stream, streamType;
+          switch (data.streamType) {
+            case StreamTypes$2.H264_STREAM_TYPE:
+              stream = video;
+              streamType = 'video';
+              break;
+            case StreamTypes$2.ADTS_STREAM_TYPE:
+              stream = audio;
+              streamType = 'audio';
+              break;
+            case StreamTypes$2.METADATA_STREAM_TYPE:
+              stream = timedMetadata;
+              streamType = 'timed-metadata';
+              break;
+            default:
+              // ignore unknown stream types
+              return;
+          } // if a new packet is starting, we can flush the completed
+          // packet
+
+          if (data.payloadUnitStartIndicator) {
+            flushStream(stream, streamType, true);
+          } // buffer this fragment until we are sure we've received the
+          // complete payload
+
+          stream.data.push(data);
+          stream.size += data.data.byteLength;
+        },
+        pmt: function () {
+          var event = {
+            type: 'metadata',
+            tracks: []
+          };
+          programMapTable = data.programMapTable; // translate audio and video streams to tracks
+
+          if (programMapTable.video !== null) {
+            event.tracks.push({
+              timelineStartInfo: {
+                baseMediaDecodeTime: 0
+              },
+              id: +programMapTable.video,
+              codec: 'avc',
+              type: 'video'
+            });
+          }
+          if (programMapTable.audio !== null) {
+            event.tracks.push({
+              timelineStartInfo: {
+                baseMediaDecodeTime: 0
+              },
+              id: +programMapTable.audio,
+              codec: 'adts',
+              type: 'audio'
+            });
+          }
+          segmentHadPmt = true;
+          self.trigger('data', event);
+        }
+      })[data.type]();
+    };
+    this.reset = function () {
+      video.size = 0;
+      video.data.length = 0;
+      audio.size = 0;
+      audio.data.length = 0;
+      this.trigger('reset');
+    };
+    /**
+     * Flush any remaining input. Video PES packets may be of variable
+     * length. Normally, the start of a new video packet can trigger the
+     * finalization of the previous packet. That is not possible if no
+     * more video is forthcoming, however. In that case, some other
+     * mechanism (like the end of the file) has to be employed. When it is
+     * clear that no additional data is forthcoming, calling this method
+     * will flush the buffered packets.
+     */
+
+    this.flushStreams_ = function () {
+      // !!THIS ORDER IS IMPORTANT!!
+      // video first then audio
+      flushStream(video, 'video');
+      flushStream(audio, 'audio');
+      flushStream(timedMetadata, 'timed-metadata');
+    };
+    this.flush = function () {
+      // if on flush we haven't had a pmt emitted
+      // and we have a pmt to emit. emit the pmt
+      // so that we trigger a trackinfo downstream.
+      if (!segmentHadPmt && programMapTable) {
+        var pmt = {
+          type: 'metadata',
+          tracks: []
+        }; // translate audio and video streams to tracks
+
+        if (programMapTable.video !== null) {
+          pmt.tracks.push({
+            timelineStartInfo: {
+              baseMediaDecodeTime: 0
+            },
+            id: +programMapTable.video,
+            codec: 'avc',
+            type: 'video'
+          });
+        }
+        if (programMapTable.audio !== null) {
+          pmt.tracks.push({
+            timelineStartInfo: {
+              baseMediaDecodeTime: 0
+            },
+            id: +programMapTable.audio,
+            codec: 'adts',
+            type: 'audio'
+          });
+        }
+        self.trigger('data', pmt);
+      }
+      segmentHadPmt = false;
+      this.flushStreams_();
+      this.trigger('done');
+    };
+  };
+  ElementaryStream.prototype = new Stream$4();
+  var m2ts$1 = {
+    PAT_PID: 0x0000,
+    MP2T_PACKET_LENGTH: MP2T_PACKET_LENGTH$1,
+    TransportPacketStream: TransportPacketStream,
+    TransportParseStream: TransportParseStream,
+    ElementaryStream: ElementaryStream,
+    TimestampRolloverStream: TimestampRolloverStream,
+    CaptionStream: CaptionStream$1.CaptionStream,
+    Cea608Stream: CaptionStream$1.Cea608Stream,
+    Cea708Stream: CaptionStream$1.Cea708Stream,
+    MetadataStream: metadataStream
+  };
+  for (var type in StreamTypes$2) {
+    if (StreamTypes$2.hasOwnProperty(type)) {
+      m2ts$1[type] = StreamTypes$2[type];
+    }
+  }
+  var m2ts_1 = m2ts$1;
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var Stream$3 = stream;
+  var ONE_SECOND_IN_TS$2 = clock$2.ONE_SECOND_IN_TS;
+  var AdtsStream$1;
+  var ADTS_SAMPLING_FREQUENCIES$1 = [96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350];
+  /*
+   * Accepts a ElementaryStream and emits data events with parsed
+   * AAC Audio Frames of the individual packets. Input audio in ADTS
+   * format is unpacked and re-emitted as AAC frames.
+   *
+   * @see http://wiki.multimedia.cx/index.php?title=ADTS
+   * @see http://wiki.multimedia.cx/?title=Understanding_AAC
+   */
+
+  AdtsStream$1 = function (handlePartialSegments) {
+    var buffer,
+      frameNum = 0;
+    AdtsStream$1.prototype.init.call(this);
+    this.skipWarn_ = function (start, end) {
+      this.trigger('log', {
+        level: 'warn',
+        message: `adts skiping bytes ${start} to ${end} in frame ${frameNum} outside syncword`
+      });
+    };
+    this.push = function (packet) {
+      var i = 0,
+        frameLength,
+        protectionSkipBytes,
+        oldBuffer,
+        sampleCount,
+        adtsFrameDuration;
+      if (!handlePartialSegments) {
+        frameNum = 0;
+      }
+      if (packet.type !== 'audio') {
+        // ignore non-audio data
+        return;
+      } // Prepend any data in the buffer to the input data so that we can parse
+      // aac frames the cross a PES packet boundary
+
+      if (buffer && buffer.length) {
+        oldBuffer = buffer;
+        buffer = new Uint8Array(oldBuffer.byteLength + packet.data.byteLength);
+        buffer.set(oldBuffer);
+        buffer.set(packet.data, oldBuffer.byteLength);
+      } else {
+        buffer = packet.data;
+      } // unpack any ADTS frames which have been fully received
+      // for details on the ADTS header, see http://wiki.multimedia.cx/index.php?title=ADTS
+
+      var skip; // We use i + 7 here because we want to be able to parse the entire header.
+      // If we don't have enough bytes to do that, then we definitely won't have a full frame.
+
+      while (i + 7 < buffer.length) {
+        // Look for the start of an ADTS header..
+        if (buffer[i] !== 0xFF || (buffer[i + 1] & 0xF6) !== 0xF0) {
+          if (typeof skip !== 'number') {
+            skip = i;
+          } // If a valid header was not found,  jump one forward and attempt to
+          // find a valid ADTS header starting at the next byte
+
+          i++;
+          continue;
+        }
+        if (typeof skip === 'number') {
+          this.skipWarn_(skip, i);
+          skip = null;
+        } // The protection skip bit tells us if we have 2 bytes of CRC data at the
+        // end of the ADTS header
+
+        protectionSkipBytes = (~buffer[i + 1] & 0x01) * 2; // Frame length is a 13 bit integer starting 16 bits from the
+        // end of the sync sequence
+        // NOTE: frame length includes the size of the header
+
+        frameLength = (buffer[i + 3] & 0x03) << 11 | buffer[i + 4] << 3 | (buffer[i + 5] & 0xe0) >> 5;
+        sampleCount = ((buffer[i + 6] & 0x03) + 1) * 1024;
+        adtsFrameDuration = sampleCount * ONE_SECOND_IN_TS$2 / ADTS_SAMPLING_FREQUENCIES$1[(buffer[i + 2] & 0x3c) >>> 2]; // If we don't have enough data to actually finish this ADTS frame,
+        // then we have to wait for more data
+
+        if (buffer.byteLength - i < frameLength) {
+          break;
+        } // Otherwise, deliver the complete AAC frame
+
+        this.trigger('data', {
+          pts: packet.pts + frameNum * adtsFrameDuration,
+          dts: packet.dts + frameNum * adtsFrameDuration,
+          sampleCount: sampleCount,
+          audioobjecttype: (buffer[i + 2] >>> 6 & 0x03) + 1,
+          channelcount: (buffer[i + 2] & 1) << 2 | (buffer[i + 3] & 0xc0) >>> 6,
+          samplerate: ADTS_SAMPLING_FREQUENCIES$1[(buffer[i + 2] & 0x3c) >>> 2],
+          samplingfrequencyindex: (buffer[i + 2] & 0x3c) >>> 2,
+          // assume ISO/IEC 14496-12 AudioSampleEntry default of 16
+          samplesize: 16,
+          // data is the frame without it's header
+          data: buffer.subarray(i + 7 + protectionSkipBytes, i + frameLength)
+        });
+        frameNum++;
+        i += frameLength;
+      }
+      if (typeof skip === 'number') {
+        this.skipWarn_(skip, i);
+        skip = null;
+      } // remove processed bytes from the buffer.
+
+      buffer = buffer.subarray(i);
+    };
+    this.flush = function () {
+      frameNum = 0;
+      this.trigger('done');
+    };
+    this.reset = function () {
+      buffer = void 0;
+      this.trigger('reset');
+    };
+    this.endTimeline = function () {
+      buffer = void 0;
+      this.trigger('endedtimeline');
+    };
+  };
+  AdtsStream$1.prototype = new Stream$3();
+  var adts = AdtsStream$1;
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var ExpGolomb$1;
+  /**
+   * Parser for exponential Golomb codes, a variable-bitwidth number encoding
+   * scheme used by h264.
+   */
+
+  ExpGolomb$1 = function (workingData) {
+    var
+      // the number of bytes left to examine in workingData
+      workingBytesAvailable = workingData.byteLength,
+      // the current word being examined
+      workingWord = 0,
+      // :uint
+      // the number of bits left to examine in the current word
+      workingBitsAvailable = 0; // :uint;
+    // ():uint
+
+    this.length = function () {
+      return 8 * workingBytesAvailable;
+    }; // ():uint
+
+    this.bitsAvailable = function () {
+      return 8 * workingBytesAvailable + workingBitsAvailable;
+    }; // ():void
+
+    this.loadWord = function () {
+      var position = workingData.byteLength - workingBytesAvailable,
+        workingBytes = new Uint8Array(4),
+        availableBytes = Math.min(4, workingBytesAvailable);
+      if (availableBytes === 0) {
+        throw new Error('no bytes available');
+      }
+      workingBytes.set(workingData.subarray(position, position + availableBytes));
+      workingWord = new DataView(workingBytes.buffer).getUint32(0); // track the amount of workingData that has been processed
+
+      workingBitsAvailable = availableBytes * 8;
+      workingBytesAvailable -= availableBytes;
+    }; // (count:int):void
+
+    this.skipBits = function (count) {
+      var skipBytes; // :int
+
+      if (workingBitsAvailable > count) {
+        workingWord <<= count;
+        workingBitsAvailable -= count;
+      } else {
+        count -= workingBitsAvailable;
+        skipBytes = Math.floor(count / 8);
+        count -= skipBytes * 8;
+        workingBytesAvailable -= skipBytes;
+        this.loadWord();
+        workingWord <<= count;
+        workingBitsAvailable -= count;
+      }
+    }; // (size:int):uint
+
+    this.readBits = function (size) {
+      var bits = Math.min(workingBitsAvailable, size),
+        // :uint
+        valu = workingWord >>> 32 - bits; // :uint
+      // if size > 31, handle error
+
+      workingBitsAvailable -= bits;
+      if (workingBitsAvailable > 0) {
+        workingWord <<= bits;
+      } else if (workingBytesAvailable > 0) {
+        this.loadWord();
+      }
+      bits = size - bits;
+      if (bits > 0) {
+        return valu << bits | this.readBits(bits);
+      }
+      return valu;
+    }; // ():uint
+
+    this.skipLeadingZeros = function () {
+      var leadingZeroCount; // :uint
+
+      for (leadingZeroCount = 0; leadingZeroCount < workingBitsAvailable; ++leadingZeroCount) {
+        if ((workingWord & 0x80000000 >>> leadingZeroCount) !== 0) {
+          // the first bit of working word is 1
+          workingWord <<= leadingZeroCount;
+          workingBitsAvailable -= leadingZeroCount;
+          return leadingZeroCount;
+        }
+      } // we exhausted workingWord and still have not found a 1
+
+      this.loadWord();
+      return leadingZeroCount + this.skipLeadingZeros();
+    }; // ():void
+
+    this.skipUnsignedExpGolomb = function () {
+      this.skipBits(1 + this.skipLeadingZeros());
+    }; // ():void
+
+    this.skipExpGolomb = function () {
+      this.skipBits(1 + this.skipLeadingZeros());
+    }; // ():uint
+
+    this.readUnsignedExpGolomb = function () {
+      var clz = this.skipLeadingZeros(); // :uint
+
+      return this.readBits(clz + 1) - 1;
+    }; // ():int
+
+    this.readExpGolomb = function () {
+      var valu = this.readUnsignedExpGolomb(); // :int
+
+      if (0x01 & valu) {
+        // the number is odd if the low order bit is set
+        return 1 + valu >>> 1; // add 1 to make it even, and divide by 2
+      }
+
+      return -1 * (valu >>> 1); // divide by two then make it negative
+    }; // Some convenience functions
+    // :Boolean
+
+    this.readBoolean = function () {
+      return this.readBits(1) === 1;
+    }; // ():int
+
+    this.readUnsignedByte = function () {
+      return this.readBits(8);
+    };
+    this.loadWord();
+  };
+  var expGolomb = ExpGolomb$1;
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var Stream$2 = stream;
+  var ExpGolomb = expGolomb;
+  var H264Stream$1, NalByteStream;
+  var PROFILES_WITH_OPTIONAL_SPS_DATA;
+  /**
+   * Accepts a NAL unit byte stream and unpacks the embedded NAL units.
+   */
+
+  NalByteStream = function () {
+    var syncPoint = 0,
+      i,
+      buffer;
+    NalByteStream.prototype.init.call(this);
+    /*
+     * Scans a byte stream and triggers a data event with the NAL units found.
+     * @param {Object} data Event received from H264Stream
+     * @param {Uint8Array} data.data The h264 byte stream to be scanned
+     *
+     * @see H264Stream.push
+     */
+
+    this.push = function (data) {
+      var swapBuffer;
+      if (!buffer) {
+        buffer = data.data;
+      } else {
+        swapBuffer = new Uint8Array(buffer.byteLength + data.data.byteLength);
+        swapBuffer.set(buffer);
+        swapBuffer.set(data.data, buffer.byteLength);
+        buffer = swapBuffer;
+      }
+      var len = buffer.byteLength; // Rec. ITU-T H.264, Annex B
+      // scan for NAL unit boundaries
+      // a match looks like this:
+      // 0 0 1 .. NAL .. 0 0 1
+      // ^ sync point        ^ i
+      // or this:
+      // 0 0 1 .. NAL .. 0 0 0
+      // ^ sync point        ^ i
+      // advance the sync point to a NAL start, if necessary
+
+      for (; syncPoint < len - 3; syncPoint++) {
+        if (buffer[syncPoint + 2] === 1) {
+          // the sync point is properly aligned
+          i = syncPoint + 5;
+          break;
+        }
+      }
+      while (i < len) {
+        // look at the current byte to determine if we've hit the end of
+        // a NAL unit boundary
+        switch (buffer[i]) {
+          case 0:
+            // skip past non-sync sequences
+            if (buffer[i - 1] !== 0) {
+              i += 2;
+              break;
+            } else if (buffer[i - 2] !== 0) {
+              i++;
+              break;
+            } // deliver the NAL unit if it isn't empty
+
+            if (syncPoint + 3 !== i - 2) {
+              this.trigger('data', buffer.subarray(syncPoint + 3, i - 2));
+            } // drop trailing zeroes
+
+            do {
+              i++;
+            } while (buffer[i] !== 1 && i < len);
+            syncPoint = i - 2;
+            i += 3;
+            break;
+          case 1:
+            // skip past non-sync sequences
+            if (buffer[i - 1] !== 0 || buffer[i - 2] !== 0) {
+              i += 3;
+              break;
+            } // deliver the NAL unit
+
+            this.trigger('data', buffer.subarray(syncPoint + 3, i - 2));
+            syncPoint = i - 2;
+            i += 3;
+            break;
+          default:
+            // the current byte isn't a one or zero, so it cannot be part
+            // of a sync sequence
+            i += 3;
+            break;
+        }
+      } // filter out the NAL units that were delivered
+
+      buffer = buffer.subarray(syncPoint);
+      i -= syncPoint;
+      syncPoint = 0;
+    };
+    this.reset = function () {
+      buffer = null;
+      syncPoint = 0;
+      this.trigger('reset');
+    };
+    this.flush = function () {
+      // deliver the last buffered NAL unit
+      if (buffer && buffer.byteLength > 3) {
+        this.trigger('data', buffer.subarray(syncPoint + 3));
+      } // reset the stream state
+
+      buffer = null;
+      syncPoint = 0;
+      this.trigger('done');
+    };
+    this.endTimeline = function () {
+      this.flush();
+      this.trigger('endedtimeline');
+    };
+  };
+  NalByteStream.prototype = new Stream$2(); // values of profile_idc that indicate additional fields are included in the SPS
+  // see Recommendation ITU-T H.264 (4/2013),
+  // 7.3.2.1.1 Sequence parameter set data syntax
+
+  PROFILES_WITH_OPTIONAL_SPS_DATA = {
+    100: true,
+    110: true,
+    122: true,
+    244: true,
+    44: true,
+    83: true,
+    86: true,
+    118: true,
+    128: true,
+    // TODO: the three profiles below don't
+    // appear to have sps data in the specificiation anymore?
+    138: true,
+    139: true,
+    134: true
+  };
+  /**
+   * Accepts input from a ElementaryStream and produces H.264 NAL unit data
+   * events.
+   */
+
+  H264Stream$1 = function () {
+    var nalByteStream = new NalByteStream(),
+      self,
+      trackId,
+      currentPts,
+      currentDts,
+      discardEmulationPreventionBytes,
+      readSequenceParameterSet,
+      skipScalingList;
+    H264Stream$1.prototype.init.call(this);
+    self = this;
+    /*
+     * Pushes a packet from a stream onto the NalByteStream
+     *
+     * @param {Object} packet - A packet received from a stream
+     * @param {Uint8Array} packet.data - The raw bytes of the packet
+     * @param {Number} packet.dts - Decode timestamp of the packet
+     * @param {Number} packet.pts - Presentation timestamp of the packet
+     * @param {Number} packet.trackId - The id of the h264 track this packet came from
+     * @param {('video'|'audio')} packet.type - The type of packet
+     *
+     */
+
+    this.push = function (packet) {
+      if (packet.type !== 'video') {
+        return;
+      }
+      trackId = packet.trackId;
+      currentPts = packet.pts;
+      currentDts = packet.dts;
+      nalByteStream.push(packet);
+    };
+    /*
+     * Identify NAL unit types and pass on the NALU, trackId, presentation and decode timestamps
+     * for the NALUs to the next stream component.
+     * Also, preprocess caption and sequence parameter NALUs.
+     *
+     * @param {Uint8Array} data - A NAL unit identified by `NalByteStream.push`
+     * @see NalByteStream.push
+     */
+
+    nalByteStream.on('data', function (data) {
+      var event = {
+        trackId: trackId,
+        pts: currentPts,
+        dts: currentDts,
+        data: data,
+        nalUnitTypeCode: data[0] & 0x1f
+      };
+      switch (event.nalUnitTypeCode) {
+        case 0x05:
+          event.nalUnitType = 'slice_layer_without_partitioning_rbsp_idr';
+          break;
+        case 0x06:
+          event.nalUnitType = 'sei_rbsp';
+          event.escapedRBSP = discardEmulationPreventionBytes(data.subarray(1));
+          break;
+        case 0x07:
+          event.nalUnitType = 'seq_parameter_set_rbsp';
+          event.escapedRBSP = discardEmulationPreventionBytes(data.subarray(1));
+          event.config = readSequenceParameterSet(event.escapedRBSP);
+          break;
+        case 0x08:
+          event.nalUnitType = 'pic_parameter_set_rbsp';
+          break;
+        case 0x09:
+          event.nalUnitType = 'access_unit_delimiter_rbsp';
+          break;
+      } // This triggers data on the H264Stream
+
+      self.trigger('data', event);
+    });
+    nalByteStream.on('done', function () {
+      self.trigger('done');
+    });
+    nalByteStream.on('partialdone', function () {
+      self.trigger('partialdone');
+    });
+    nalByteStream.on('reset', function () {
+      self.trigger('reset');
+    });
+    nalByteStream.on('endedtimeline', function () {
+      self.trigger('endedtimeline');
+    });
+    this.flush = function () {
+      nalByteStream.flush();
+    };
+    this.partialFlush = function () {
+      nalByteStream.partialFlush();
+    };
+    this.reset = function () {
+      nalByteStream.reset();
+    };
+    this.endTimeline = function () {
+      nalByteStream.endTimeline();
+    };
+    /**
+     * Advance the ExpGolomb decoder past a scaling list. The scaling
+     * list is optionally transmitted as part of a sequence parameter
+     * set and is not relevant to transmuxing.
+     * @param count {number} the number of entries in this scaling list
+     * @param expGolombDecoder {object} an ExpGolomb pointed to the
+     * start of a scaling list
+     * @see Recommendation ITU-T H.264, Section 7.3.2.1.1.1
+     */
+
+    skipScalingList = function (count, expGolombDecoder) {
+      var lastScale = 8,
+        nextScale = 8,
+        j,
+        deltaScale;
+      for (j = 0; j < count; j++) {
+        if (nextScale !== 0) {
+          deltaScale = expGolombDecoder.readExpGolomb();
+          nextScale = (lastScale + deltaScale + 256) % 256;
+        }
+        lastScale = nextScale === 0 ? lastScale : nextScale;
+      }
+    };
+    /**
+     * Expunge any "Emulation Prevention" bytes from a "Raw Byte
+     * Sequence Payload"
+     * @param data {Uint8Array} the bytes of a RBSP from a NAL
+     * unit
+     * @return {Uint8Array} the RBSP without any Emulation
+     * Prevention Bytes
+     */
+
+    discardEmulationPreventionBytes = function (data) {
+      var length = data.byteLength,
+        emulationPreventionBytesPositions = [],
+        i = 1,
+        newLength,
+        newData; // Find all `Emulation Prevention Bytes`
+
+      while (i < length - 2) {
+        if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0x03) {
+          emulationPreventionBytesPositions.push(i + 2);
+          i += 2;
+        } else {
+          i++;
+        }
+      } // If no Emulation Prevention Bytes were found just return the original
+      // array
+
+      if (emulationPreventionBytesPositions.length === 0) {
+        return data;
+      } // Create a new array to hold the NAL unit data
+
+      newLength = length - emulationPreventionBytesPositions.length;
+      newData = new Uint8Array(newLength);
+      var sourceIndex = 0;
+      for (i = 0; i < newLength; sourceIndex++, i++) {
+        if (sourceIndex === emulationPreventionBytesPositions[0]) {
+          // Skip this byte
+          sourceIndex++; // Remove this position index
+
+          emulationPreventionBytesPositions.shift();
+        }
+        newData[i] = data[sourceIndex];
+      }
+      return newData;
+    };
+    /**
+     * Read a sequence parameter set and return some interesting video
+     * properties. A sequence parameter set is the H264 metadata that
+     * describes the properties of upcoming video frames.
+     * @param data {Uint8Array} the bytes of a sequence parameter set
+     * @return {object} an object with configuration parsed from the
+     * sequence parameter set, including the dimensions of the
+     * associated video frames.
+     */
+
+    readSequenceParameterSet = function (data) {
+      var frameCropLeftOffset = 0,
+        frameCropRightOffset = 0,
+        frameCropTopOffset = 0,
+        frameCropBottomOffset = 0,
+        expGolombDecoder,
+        profileIdc,
+        levelIdc,
+        profileCompatibility,
+        chromaFormatIdc,
+        picOrderCntType,
+        numRefFramesInPicOrderCntCycle,
+        picWidthInMbsMinus1,
+        picHeightInMapUnitsMinus1,
+        frameMbsOnlyFlag,
+        scalingListCount,
+        sarRatio = [1, 1],
+        aspectRatioIdc,
+        i;
+      expGolombDecoder = new ExpGolomb(data);
+      profileIdc = expGolombDecoder.readUnsignedByte(); // profile_idc
+
+      profileCompatibility = expGolombDecoder.readUnsignedByte(); // constraint_set[0-5]_flag
+
+      levelIdc = expGolombDecoder.readUnsignedByte(); // level_idc u(8)
+
+      expGolombDecoder.skipUnsignedExpGolomb(); // seq_parameter_set_id
+      // some profiles have more optional data we don't need
+
+      if (PROFILES_WITH_OPTIONAL_SPS_DATA[profileIdc]) {
+        chromaFormatIdc = expGolombDecoder.readUnsignedExpGolomb();
+        if (chromaFormatIdc === 3) {
+          expGolombDecoder.skipBits(1); // separate_colour_plane_flag
+        }
+
+        expGolombDecoder.skipUnsignedExpGolomb(); // bit_depth_luma_minus8
+
+        expGolombDecoder.skipUnsignedExpGolomb(); // bit_depth_chroma_minus8
+
+        expGolombDecoder.skipBits(1); // qpprime_y_zero_transform_bypass_flag
+
+        if (expGolombDecoder.readBoolean()) {
+          // seq_scaling_matrix_present_flag
+          scalingListCount = chromaFormatIdc !== 3 ? 8 : 12;
+          for (i = 0; i < scalingListCount; i++) {
+            if (expGolombDecoder.readBoolean()) {
+              // seq_scaling_list_present_flag[ i ]
+              if (i < 6) {
+                skipScalingList(16, expGolombDecoder);
+              } else {
+                skipScalingList(64, expGolombDecoder);
+              }
+            }
+          }
+        }
+      }
+      expGolombDecoder.skipUnsignedExpGolomb(); // log2_max_frame_num_minus4
+
+      picOrderCntType = expGolombDecoder.readUnsignedExpGolomb();
+      if (picOrderCntType === 0) {
+        expGolombDecoder.readUnsignedExpGolomb(); // log2_max_pic_order_cnt_lsb_minus4
+      } else if (picOrderCntType === 1) {
+        expGolombDecoder.skipBits(1); // delta_pic_order_always_zero_flag
+
+        expGolombDecoder.skipExpGolomb(); // offset_for_non_ref_pic
+
+        expGolombDecoder.skipExpGolomb(); // offset_for_top_to_bottom_field
+
+        numRefFramesInPicOrderCntCycle = expGolombDecoder.readUnsignedExpGolomb();
+        for (i = 0; i < numRefFramesInPicOrderCntCycle; i++) {
+          expGolombDecoder.skipExpGolomb(); // offset_for_ref_frame[ i ]
+        }
+      }
+
+      expGolombDecoder.skipUnsignedExpGolomb(); // max_num_ref_frames
+
+      expGolombDecoder.skipBits(1); // gaps_in_frame_num_value_allowed_flag
+
+      picWidthInMbsMinus1 = expGolombDecoder.readUnsignedExpGolomb();
+      picHeightInMapUnitsMinus1 = expGolombDecoder.readUnsignedExpGolomb();
+      frameMbsOnlyFlag = expGolombDecoder.readBits(1);
+      if (frameMbsOnlyFlag === 0) {
+        expGolombDecoder.skipBits(1); // mb_adaptive_frame_field_flag
+      }
+
+      expGolombDecoder.skipBits(1); // direct_8x8_inference_flag
+
+      if (expGolombDecoder.readBoolean()) {
+        // frame_cropping_flag
+        frameCropLeftOffset = expGolombDecoder.readUnsignedExpGolomb();
+        frameCropRightOffset = expGolombDecoder.readUnsignedExpGolomb();
+        frameCropTopOffset = expGolombDecoder.readUnsignedExpGolomb();
+        frameCropBottomOffset = expGolombDecoder.readUnsignedExpGolomb();
+      }
+      if (expGolombDecoder.readBoolean()) {
+        // vui_parameters_present_flag
+        if (expGolombDecoder.readBoolean()) {
+          // aspect_ratio_info_present_flag
+          aspectRatioIdc = expGolombDecoder.readUnsignedByte();
+          switch (aspectRatioIdc) {
+            case 1:
+              sarRatio = [1, 1];
+              break;
+            case 2:
+              sarRatio = [12, 11];
+              break;
+            case 3:
+              sarRatio = [10, 11];
+              break;
+            case 4:
+              sarRatio = [16, 11];
+              break;
+            case 5:
+              sarRatio = [40, 33];
+              break;
+            case 6:
+              sarRatio = [24, 11];
+              break;
+            case 7:
+              sarRatio = [20, 11];
+              break;
+            case 8:
+              sarRatio = [32, 11];
+              break;
+            case 9:
+              sarRatio = [80, 33];
+              break;
+            case 10:
+              sarRatio = [18, 11];
+              break;
+            case 11:
+              sarRatio = [15, 11];
+              break;
+            case 12:
+              sarRatio = [64, 33];
+              break;
+            case 13:
+              sarRatio = [160, 99];
+              break;
+            case 14:
+              sarRatio = [4, 3];
+              break;
+            case 15:
+              sarRatio = [3, 2];
+              break;
+            case 16:
+              sarRatio = [2, 1];
+              break;
+            case 255:
+              {
+                sarRatio = [expGolombDecoder.readUnsignedByte() << 8 | expGolombDecoder.readUnsignedByte(), expGolombDecoder.readUnsignedByte() << 8 | expGolombDecoder.readUnsignedByte()];
+                break;
+              }
+          }
+          if (sarRatio) {
+            sarRatio[0] / sarRatio[1];
+          }
+        }
+      }
+      return {
+        profileIdc: profileIdc,
+        levelIdc: levelIdc,
+        profileCompatibility: profileCompatibility,
+        width: (picWidthInMbsMinus1 + 1) * 16 - frameCropLeftOffset * 2 - frameCropRightOffset * 2,
+        height: (2 - frameMbsOnlyFlag) * (picHeightInMapUnitsMinus1 + 1) * 16 - frameCropTopOffset * 2 - frameCropBottomOffset * 2,
+        // sar is sample aspect ratio
+        sarRatio: sarRatio
+      };
+    };
+  };
+  H264Stream$1.prototype = new Stream$2();
+  var h264 = {
+    H264Stream: H264Stream$1,
+    NalByteStream: NalByteStream
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Utilities to detect basic properties and metadata about Aac data.
+   */
+
+  var ADTS_SAMPLING_FREQUENCIES = [96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350];
+  var parseId3TagSize = function (header, byteIndex) {
+    var returnSize = header[byteIndex + 6] << 21 | header[byteIndex + 7] << 14 | header[byteIndex + 8] << 7 | header[byteIndex + 9],
+      flags = header[byteIndex + 5],
+      footerPresent = (flags & 16) >> 4; // if we get a negative returnSize clamp it to 0
+
+    returnSize = returnSize >= 0 ? returnSize : 0;
+    if (footerPresent) {
+      return returnSize + 20;
+    }
+    return returnSize + 10;
+  };
+  var getId3Offset = function (data, offset) {
+    if (data.length - offset < 10 || data[offset] !== 'I'.charCodeAt(0) || data[offset + 1] !== 'D'.charCodeAt(0) || data[offset + 2] !== '3'.charCodeAt(0)) {
+      return offset;
+    }
+    offset += parseId3TagSize(data, offset);
+    return getId3Offset(data, offset);
+  }; // TODO: use vhs-utils
+
+  var isLikelyAacData$1 = function (data) {
+    var offset = getId3Offset(data, 0);
+    return data.length >= offset + 2 && (data[offset] & 0xFF) === 0xFF && (data[offset + 1] & 0xF0) === 0xF0 &&
+    // verify that the 2 layer bits are 0, aka this
+    // is not mp3 data but aac data.
+    (data[offset + 1] & 0x16) === 0x10;
+  };
+  var parseSyncSafeInteger = function (data) {
+    return data[0] << 21 | data[1] << 14 | data[2] << 7 | data[3];
+  }; // return a percent-encoded representation of the specified byte range
+  // @see http://en.wikipedia.org/wiki/Percent-encoding
+
+  var percentEncode = function (bytes, start, end) {
+    var i,
+      result = '';
+    for (i = start; i < end; i++) {
+      result += '%' + ('00' + bytes[i].toString(16)).slice(-2);
+    }
+    return result;
+  }; // return the string representation of the specified byte range,
+  // interpreted as ISO-8859-1.
+
+  var parseIso88591 = function (bytes, start, end) {
+    return unescape(percentEncode(bytes, start, end)); // jshint ignore:line
+  };
+
+  var parseAdtsSize = function (header, byteIndex) {
+    var lowThree = (header[byteIndex + 5] & 0xE0) >> 5,
+      middle = header[byteIndex + 4] << 3,
+      highTwo = header[byteIndex + 3] & 0x3 << 11;
+    return highTwo | middle | lowThree;
+  };
+  var parseType$4 = function (header, byteIndex) {
+    if (header[byteIndex] === 'I'.charCodeAt(0) && header[byteIndex + 1] === 'D'.charCodeAt(0) && header[byteIndex + 2] === '3'.charCodeAt(0)) {
+      return 'timed-metadata';
+    } else if (header[byteIndex] & 0xff === 0xff && (header[byteIndex + 1] & 0xf0) === 0xf0) {
+      return 'audio';
+    }
+    return null;
+  };
+  var parseSampleRate = function (packet) {
+    var i = 0;
+    while (i + 5 < packet.length) {
+      if (packet[i] !== 0xFF || (packet[i + 1] & 0xF6) !== 0xF0) {
+        // If a valid header was not found,  jump one forward and attempt to
+        // find a valid ADTS header starting at the next byte
+        i++;
+        continue;
+      }
+      return ADTS_SAMPLING_FREQUENCIES[(packet[i + 2] & 0x3c) >>> 2];
+    }
+    return null;
+  };
+  var parseAacTimestamp = function (packet) {
+    var frameStart, frameSize, frame, frameHeader; // find the start of the first frame and the end of the tag
+
+    frameStart = 10;
+    if (packet[5] & 0x40) {
+      // advance the frame start past the extended header
+      frameStart += 4; // header size field
+
+      frameStart += parseSyncSafeInteger(packet.subarray(10, 14));
+    } // parse one or more ID3 frames
+    // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+    do {
+      // determine the number of bytes in this frame
+      frameSize = parseSyncSafeInteger(packet.subarray(frameStart + 4, frameStart + 8));
+      if (frameSize < 1) {
+        return null;
+      }
+      frameHeader = String.fromCharCode(packet[frameStart], packet[frameStart + 1], packet[frameStart + 2], packet[frameStart + 3]);
+      if (frameHeader === 'PRIV') {
+        frame = packet.subarray(frameStart + 10, frameStart + frameSize + 10);
+        for (var i = 0; i < frame.byteLength; i++) {
+          if (frame[i] === 0) {
+            var owner = parseIso88591(frame, 0, i);
+            if (owner === 'com.apple.streaming.transportStreamTimestamp') {
+              var d = frame.subarray(i + 1);
+              var size = (d[3] & 0x01) << 30 | d[4] << 22 | d[5] << 14 | d[6] << 6 | d[7] >>> 2;
+              size *= 4;
+              size += d[7] & 0x03;
+              return size;
+            }
+            break;
+          }
+        }
+      }
+      frameStart += 10; // advance past the frame header
+
+      frameStart += frameSize; // advance past the frame body
+    } while (frameStart < packet.byteLength);
+    return null;
+  };
+  var utils = {
+    isLikelyAacData: isLikelyAacData$1,
+    parseId3TagSize: parseId3TagSize,
+    parseAdtsSize: parseAdtsSize,
+    parseType: parseType$4,
+    parseSampleRate: parseSampleRate,
+    parseAacTimestamp: parseAacTimestamp
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * A stream-based aac to mp4 converter. This utility can be used to
+   * deliver mp4s to a SourceBuffer on platforms that support native
+   * Media Source Extensions.
+   */
+
+  var Stream$1 = stream;
+  var aacUtils = utils; // Constants
+
+  var AacStream$1;
+  /**
+   * Splits an incoming stream of binary data into ADTS and ID3 Frames.
+   */
+
+  AacStream$1 = function () {
+    var everything = new Uint8Array(),
+      timeStamp = 0;
+    AacStream$1.prototype.init.call(this);
+    this.setTimestamp = function (timestamp) {
+      timeStamp = timestamp;
+    };
+    this.push = function (bytes) {
+      var frameSize = 0,
+        byteIndex = 0,
+        bytesLeft,
+        chunk,
+        packet,
+        tempLength; // If there are bytes remaining from the last segment, prepend them to the
+      // bytes that were pushed in
+
+      if (everything.length) {
+        tempLength = everything.length;
+        everything = new Uint8Array(bytes.byteLength + tempLength);
+        everything.set(everything.subarray(0, tempLength));
+        everything.set(bytes, tempLength);
+      } else {
+        everything = bytes;
+      }
+      while (everything.length - byteIndex >= 3) {
+        if (everything[byteIndex] === 'I'.charCodeAt(0) && everything[byteIndex + 1] === 'D'.charCodeAt(0) && everything[byteIndex + 2] === '3'.charCodeAt(0)) {
+          // Exit early because we don't have enough to parse
+          // the ID3 tag header
+          if (everything.length - byteIndex < 10) {
+            break;
+          } // check framesize
+
+          frameSize = aacUtils.parseId3TagSize(everything, byteIndex); // Exit early if we don't have enough in the buffer
+          // to emit a full packet
+          // Add to byteIndex to support multiple ID3 tags in sequence
+
+          if (byteIndex + frameSize > everything.length) {
+            break;
+          }
+          chunk = {
+            type: 'timed-metadata',
+            data: everything.subarray(byteIndex, byteIndex + frameSize)
+          };
+          this.trigger('data', chunk);
+          byteIndex += frameSize;
+          continue;
+        } else if ((everything[byteIndex] & 0xff) === 0xff && (everything[byteIndex + 1] & 0xf0) === 0xf0) {
+          // Exit early because we don't have enough to parse
+          // the ADTS frame header
+          if (everything.length - byteIndex < 7) {
+            break;
+          }
+          frameSize = aacUtils.parseAdtsSize(everything, byteIndex); // Exit early if we don't have enough in the buffer
+          // to emit a full packet
+
+          if (byteIndex + frameSize > everything.length) {
+            break;
+          }
+          packet = {
+            type: 'audio',
+            data: everything.subarray(byteIndex, byteIndex + frameSize),
+            pts: timeStamp,
+            dts: timeStamp
+          };
+          this.trigger('data', packet);
+          byteIndex += frameSize;
+          continue;
+        }
+        byteIndex++;
+      }
+      bytesLeft = everything.length - byteIndex;
+      if (bytesLeft > 0) {
+        everything = everything.subarray(byteIndex);
+      } else {
+        everything = new Uint8Array();
+      }
+    };
+    this.reset = function () {
+      everything = new Uint8Array();
+      this.trigger('reset');
+    };
+    this.endTimeline = function () {
+      everything = new Uint8Array();
+      this.trigger('endedtimeline');
+    };
+  };
+  AacStream$1.prototype = new Stream$1();
+  var aac = AacStream$1;
+  var AUDIO_PROPERTIES$1 = ['audioobjecttype', 'channelcount', 'samplerate', 'samplingfrequencyindex', 'samplesize'];
+  var audioProperties = AUDIO_PROPERTIES$1;
+  var VIDEO_PROPERTIES$1 = ['width', 'height', 'profileIdc', 'levelIdc', 'profileCompatibility', 'sarRatio'];
+  var videoProperties = VIDEO_PROPERTIES$1;
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * A stream-based mp2t to mp4 converter. This utility can be used to
+   * deliver mp4s to a SourceBuffer on platforms that support native
+   * Media Source Extensions.
+   */
+
+  var Stream = stream;
+  var mp4 = mp4Generator;
+  var frameUtils = frameUtils$1;
+  var audioFrameUtils = audioFrameUtils$1;
+  var trackDecodeInfo = trackDecodeInfo$1;
+  var m2ts = m2ts_1;
+  var clock = clock$2;
+  var AdtsStream = adts;
+  var H264Stream = h264.H264Stream;
+  var AacStream = aac;
+  var isLikelyAacData = utils.isLikelyAacData;
+  var ONE_SECOND_IN_TS$1 = clock$2.ONE_SECOND_IN_TS;
+  var AUDIO_PROPERTIES = audioProperties;
+  var VIDEO_PROPERTIES = videoProperties; // object types
+
+  var VideoSegmentStream, AudioSegmentStream, Transmuxer, CoalesceStream;
+  var retriggerForStream = function (key, event) {
+    event.stream = key;
+    this.trigger('log', event);
+  };
+  var addPipelineLogRetriggers = function (transmuxer, pipeline) {
+    var keys = Object.keys(pipeline);
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i]; // skip non-stream keys and headOfPipeline
+      // which is just a duplicate
+
+      if (key === 'headOfPipeline' || !pipeline[key].on) {
+        continue;
+      }
+      pipeline[key].on('log', retriggerForStream.bind(transmuxer, key));
+    }
+  };
+  /**
+   * Compare two arrays (even typed) for same-ness
+   */
+
+  var arrayEquals = function (a, b) {
+    var i;
+    if (a.length !== b.length) {
+      return false;
+    } // compare the value of each element in the array
+
+    for (i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) {
+        return false;
+      }
+    }
+    return true;
+  };
+  var generateSegmentTimingInfo = function (baseMediaDecodeTime, startDts, startPts, endDts, endPts, prependedContentDuration) {
+    var ptsOffsetFromDts = startPts - startDts,
+      decodeDuration = endDts - startDts,
+      presentationDuration = endPts - startPts; // The PTS and DTS values are based on the actual stream times from the segment,
+    // however, the player time values will reflect a start from the baseMediaDecodeTime.
+    // In order to provide relevant values for the player times, base timing info on the
+    // baseMediaDecodeTime and the DTS and PTS durations of the segment.
+
+    return {
+      start: {
+        dts: baseMediaDecodeTime,
+        pts: baseMediaDecodeTime + ptsOffsetFromDts
+      },
+      end: {
+        dts: baseMediaDecodeTime + decodeDuration,
+        pts: baseMediaDecodeTime + presentationDuration
+      },
+      prependedContentDuration: prependedContentDuration,
+      baseMediaDecodeTime: baseMediaDecodeTime
+    };
+  };
+  /**
+   * Constructs a single-track, ISO BMFF media segment from AAC data
+   * events. The output of this stream can be fed to a SourceBuffer
+   * configured with a suitable initialization segment.
+   * @param track {object} track metadata configuration
+   * @param options {object} transmuxer options object
+   * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+   *        in the source; false to adjust the first segment to start at 0.
+   */
+
+  AudioSegmentStream = function (track, options) {
+    var adtsFrames = [],
+      sequenceNumber,
+      earliestAllowedDts = 0,
+      audioAppendStartTs = 0,
+      videoBaseMediaDecodeTime = Infinity;
+    options = options || {};
+    sequenceNumber = options.firstSequenceNumber || 0;
+    AudioSegmentStream.prototype.init.call(this);
+    this.push = function (data) {
+      trackDecodeInfo.collectDtsInfo(track, data);
+      if (track) {
+        AUDIO_PROPERTIES.forEach(function (prop) {
+          track[prop] = data[prop];
+        });
+      } // buffer audio data until end() is called
+
+      adtsFrames.push(data);
+    };
+    this.setEarliestDts = function (earliestDts) {
+      earliestAllowedDts = earliestDts;
+    };
+    this.setVideoBaseMediaDecodeTime = function (baseMediaDecodeTime) {
+      videoBaseMediaDecodeTime = baseMediaDecodeTime;
+    };
+    this.setAudioAppendStart = function (timestamp) {
+      audioAppendStartTs = timestamp;
+    };
+    this.flush = function () {
+      var frames, moof, mdat, boxes, frameDuration, segmentDuration, videoClockCyclesOfSilencePrefixed; // return early if no audio data has been observed
+
+      if (adtsFrames.length === 0) {
+        this.trigger('done', 'AudioSegmentStream');
+        return;
+      }
+      frames = audioFrameUtils.trimAdtsFramesByEarliestDts(adtsFrames, track, earliestAllowedDts);
+      track.baseMediaDecodeTime = trackDecodeInfo.calculateTrackBaseMediaDecodeTime(track, options.keepOriginalTimestamps); // amount of audio filled but the value is in video clock rather than audio clock
+
+      videoClockCyclesOfSilencePrefixed = audioFrameUtils.prefixWithSilence(track, frames, audioAppendStartTs, videoBaseMediaDecodeTime); // we have to build the index from byte locations to
+      // samples (that is, adts frames) in the audio data
+
+      track.samples = audioFrameUtils.generateSampleTable(frames); // concatenate the audio data to constuct the mdat
+
+      mdat = mp4.mdat(audioFrameUtils.concatenateFrameData(frames));
+      adtsFrames = [];
+      moof = mp4.moof(sequenceNumber, [track]);
+      boxes = new Uint8Array(moof.byteLength + mdat.byteLength); // bump the sequence number for next time
+
+      sequenceNumber++;
+      boxes.set(moof);
+      boxes.set(mdat, moof.byteLength);
+      trackDecodeInfo.clearDtsInfo(track);
+      frameDuration = Math.ceil(ONE_SECOND_IN_TS$1 * 1024 / track.samplerate); // TODO this check was added to maintain backwards compatibility (particularly with
+      // tests) on adding the timingInfo event. However, it seems unlikely that there's a
+      // valid use-case where an init segment/data should be triggered without associated
+      // frames. Leaving for now, but should be looked into.
+
+      if (frames.length) {
+        segmentDuration = frames.length * frameDuration;
+        this.trigger('segmentTimingInfo', generateSegmentTimingInfo(
+        // The audio track's baseMediaDecodeTime is in audio clock cycles, but the
+        // frame info is in video clock cycles. Convert to match expectation of
+        // listeners (that all timestamps will be based on video clock cycles).
+        clock.audioTsToVideoTs(track.baseMediaDecodeTime, track.samplerate),
+        // frame times are already in video clock, as is segment duration
+        frames[0].dts, frames[0].pts, frames[0].dts + segmentDuration, frames[0].pts + segmentDuration, videoClockCyclesOfSilencePrefixed || 0));
+        this.trigger('timingInfo', {
+          start: frames[0].pts,
+          end: frames[0].pts + segmentDuration
+        });
+      }
+      this.trigger('data', {
+        track: track,
+        boxes: boxes
+      });
+      this.trigger('done', 'AudioSegmentStream');
+    };
+    this.reset = function () {
+      trackDecodeInfo.clearDtsInfo(track);
+      adtsFrames = [];
+      this.trigger('reset');
+    };
+  };
+  AudioSegmentStream.prototype = new Stream();
+  /**
+   * Constructs a single-track, ISO BMFF media segment from H264 data
+   * events. The output of this stream can be fed to a SourceBuffer
+   * configured with a suitable initialization segment.
+   * @param track {object} track metadata configuration
+   * @param options {object} transmuxer options object
+   * @param options.alignGopsAtEnd {boolean} If true, start from the end of the
+   *        gopsToAlignWith list when attempting to align gop pts
+   * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+   *        in the source; false to adjust the first segment to start at 0.
+   */
+
+  VideoSegmentStream = function (track, options) {
+    var sequenceNumber,
+      nalUnits = [],
+      gopsToAlignWith = [],
+      config,
+      pps;
+    options = options || {};
+    sequenceNumber = options.firstSequenceNumber || 0;
+    VideoSegmentStream.prototype.init.call(this);
+    delete track.minPTS;
+    this.gopCache_ = [];
+    /**
+      * Constructs a ISO BMFF segment given H264 nalUnits
+      * @param {Object} nalUnit A data event representing a nalUnit
+      * @param {String} nalUnit.nalUnitType
+      * @param {Object} nalUnit.config Properties for a mp4 track
+      * @param {Uint8Array} nalUnit.data The nalUnit bytes
+      * @see lib/codecs/h264.js
+     **/
+
+    this.push = function (nalUnit) {
+      trackDecodeInfo.collectDtsInfo(track, nalUnit); // record the track config
+
+      if (nalUnit.nalUnitType === 'seq_parameter_set_rbsp' && !config) {
+        config = nalUnit.config;
+        track.sps = [nalUnit.data];
+        VIDEO_PROPERTIES.forEach(function (prop) {
+          track[prop] = config[prop];
+        }, this);
+      }
+      if (nalUnit.nalUnitType === 'pic_parameter_set_rbsp' && !pps) {
+        pps = nalUnit.data;
+        track.pps = [nalUnit.data];
+      } // buffer video until flush() is called
+
+      nalUnits.push(nalUnit);
+    };
+    /**
+      * Pass constructed ISO BMFF track and boxes on to the
+      * next stream in the pipeline
+     **/
+
+    this.flush = function () {
+      var frames,
+        gopForFusion,
+        gops,
+        moof,
+        mdat,
+        boxes,
+        prependedContentDuration = 0,
+        firstGop,
+        lastGop; // Throw away nalUnits at the start of the byte stream until
+      // we find the first AUD
+
+      while (nalUnits.length) {
+        if (nalUnits[0].nalUnitType === 'access_unit_delimiter_rbsp') {
+          break;
+        }
+        nalUnits.shift();
+      } // Return early if no video data has been observed
+
+      if (nalUnits.length === 0) {
+        this.resetStream_();
+        this.trigger('done', 'VideoSegmentStream');
+        return;
+      } // Organize the raw nal-units into arrays that represent
+      // higher-level constructs such as frames and gops
+      // (group-of-pictures)
+
+      frames = frameUtils.groupNalsIntoFrames(nalUnits);
+      gops = frameUtils.groupFramesIntoGops(frames); // If the first frame of this fragment is not a keyframe we have
+      // a problem since MSE (on Chrome) requires a leading keyframe.
+      //
+      // We have two approaches to repairing this situation:
+      // 1) GOP-FUSION:
+      //    This is where we keep track of the GOPS (group-of-pictures)
+      //    from previous fragments and attempt to find one that we can
+      //    prepend to the current fragment in order to create a valid
+      //    fragment.
+      // 2) KEYFRAME-PULLING:
+      //    Here we search for the first keyframe in the fragment and
+      //    throw away all the frames between the start of the fragment
+      //    and that keyframe. We then extend the duration and pull the
+      //    PTS of the keyframe forward so that it covers the time range
+      //    of the frames that were disposed of.
+      //
+      // #1 is far prefereable over #2 which can cause "stuttering" but
+      // requires more things to be just right.
+
+      if (!gops[0][0].keyFrame) {
+        // Search for a gop for fusion from our gopCache
+        gopForFusion = this.getGopForFusion_(nalUnits[0], track);
+        if (gopForFusion) {
+          // in order to provide more accurate timing information about the segment, save
+          // the number of seconds prepended to the original segment due to GOP fusion
+          prependedContentDuration = gopForFusion.duration;
+          gops.unshift(gopForFusion); // Adjust Gops' metadata to account for the inclusion of the
+          // new gop at the beginning
+
+          gops.byteLength += gopForFusion.byteLength;
+          gops.nalCount += gopForFusion.nalCount;
+          gops.pts = gopForFusion.pts;
+          gops.dts = gopForFusion.dts;
+          gops.duration += gopForFusion.duration;
+        } else {
+          // If we didn't find a candidate gop fall back to keyframe-pulling
+          gops = frameUtils.extendFirstKeyFrame(gops);
+        }
+      } // Trim gops to align with gopsToAlignWith
+
+      if (gopsToAlignWith.length) {
+        var alignedGops;
+        if (options.alignGopsAtEnd) {
+          alignedGops = this.alignGopsAtEnd_(gops);
+        } else {
+          alignedGops = this.alignGopsAtStart_(gops);
+        }
+        if (!alignedGops) {
+          // save all the nals in the last GOP into the gop cache
+          this.gopCache_.unshift({
+            gop: gops.pop(),
+            pps: track.pps,
+            sps: track.sps
+          }); // Keep a maximum of 6 GOPs in the cache
+
+          this.gopCache_.length = Math.min(6, this.gopCache_.length); // Clear nalUnits
+
+          nalUnits = []; // return early no gops can be aligned with desired gopsToAlignWith
+
+          this.resetStream_();
+          this.trigger('done', 'VideoSegmentStream');
+          return;
+        } // Some gops were trimmed. clear dts info so minSegmentDts and pts are correct
+        // when recalculated before sending off to CoalesceStream
+
+        trackDecodeInfo.clearDtsInfo(track);
+        gops = alignedGops;
+      }
+      trackDecodeInfo.collectDtsInfo(track, gops); // First, we have to build the index from byte locations to
+      // samples (that is, frames) in the video data
+
+      track.samples = frameUtils.generateSampleTable(gops); // Concatenate the video data and construct the mdat
+
+      mdat = mp4.mdat(frameUtils.concatenateNalData(gops));
+      track.baseMediaDecodeTime = trackDecodeInfo.calculateTrackBaseMediaDecodeTime(track, options.keepOriginalTimestamps);
+      this.trigger('processedGopsInfo', gops.map(function (gop) {
+        return {
+          pts: gop.pts,
+          dts: gop.dts,
+          byteLength: gop.byteLength
+        };
+      }));
+      firstGop = gops[0];
+      lastGop = gops[gops.length - 1];
+      this.trigger('segmentTimingInfo', generateSegmentTimingInfo(track.baseMediaDecodeTime, firstGop.dts, firstGop.pts, lastGop.dts + lastGop.duration, lastGop.pts + lastGop.duration, prependedContentDuration));
+      this.trigger('timingInfo', {
+        start: gops[0].pts,
+        end: gops[gops.length - 1].pts + gops[gops.length - 1].duration
+      }); // save all the nals in the last GOP into the gop cache
+
+      this.gopCache_.unshift({
+        gop: gops.pop(),
+        pps: track.pps,
+        sps: track.sps
+      }); // Keep a maximum of 6 GOPs in the cache
+
+      this.gopCache_.length = Math.min(6, this.gopCache_.length); // Clear nalUnits
+
+      nalUnits = [];
+      this.trigger('baseMediaDecodeTime', track.baseMediaDecodeTime);
+      this.trigger('timelineStartInfo', track.timelineStartInfo);
+      moof = mp4.moof(sequenceNumber, [track]); // it would be great to allocate this array up front instead of
+      // throwing away hundreds of media segment fragments
+
+      boxes = new Uint8Array(moof.byteLength + mdat.byteLength); // Bump the sequence number for next time
+
+      sequenceNumber++;
+      boxes.set(moof);
+      boxes.set(mdat, moof.byteLength);
+      this.trigger('data', {
+        track: track,
+        boxes: boxes
+      });
+      this.resetStream_(); // Continue with the flush process now
+
+      this.trigger('done', 'VideoSegmentStream');
+    };
+    this.reset = function () {
+      this.resetStream_();
+      nalUnits = [];
+      this.gopCache_.length = 0;
+      gopsToAlignWith.length = 0;
+      this.trigger('reset');
+    };
+    this.resetStream_ = function () {
+      trackDecodeInfo.clearDtsInfo(track); // reset config and pps because they may differ across segments
+      // for instance, when we are rendition switching
+
+      config = undefined;
+      pps = undefined;
+    }; // Search for a candidate Gop for gop-fusion from the gop cache and
+    // return it or return null if no good candidate was found
+
+    this.getGopForFusion_ = function (nalUnit) {
+      var halfSecond = 45000,
+        // Half-a-second in a 90khz clock
+        allowableOverlap = 10000,
+        // About 3 frames @ 30fps
+        nearestDistance = Infinity,
+        dtsDistance,
+        nearestGopObj,
+        currentGop,
+        currentGopObj,
+        i; // Search for the GOP nearest to the beginning of this nal unit
+
+      for (i = 0; i < this.gopCache_.length; i++) {
+        currentGopObj = this.gopCache_[i];
+        currentGop = currentGopObj.gop; // Reject Gops with different SPS or PPS
+
+        if (!(track.pps && arrayEquals(track.pps[0], currentGopObj.pps[0])) || !(track.sps && arrayEquals(track.sps[0], currentGopObj.sps[0]))) {
+          continue;
+        } // Reject Gops that would require a negative baseMediaDecodeTime
+
+        if (currentGop.dts < track.timelineStartInfo.dts) {
+          continue;
+        } // The distance between the end of the gop and the start of the nalUnit
+
+        dtsDistance = nalUnit.dts - currentGop.dts - currentGop.duration; // Only consider GOPS that start before the nal unit and end within
+        // a half-second of the nal unit
+
+        if (dtsDistance >= -allowableOverlap && dtsDistance <= halfSecond) {
+          // Always use the closest GOP we found if there is more than
+          // one candidate
+          if (!nearestGopObj || nearestDistance > dtsDistance) {
+            nearestGopObj = currentGopObj;
+            nearestDistance = dtsDistance;
+          }
+        }
+      }
+      if (nearestGopObj) {
+        return nearestGopObj.gop;
+      }
+      return null;
+    }; // trim gop list to the first gop found that has a matching pts with a gop in the list
+    // of gopsToAlignWith starting from the START of the list
+
+    this.alignGopsAtStart_ = function (gops) {
+      var alignIndex, gopIndex, align, gop, byteLength, nalCount, duration, alignedGops;
+      byteLength = gops.byteLength;
+      nalCount = gops.nalCount;
+      duration = gops.duration;
+      alignIndex = gopIndex = 0;
+      while (alignIndex < gopsToAlignWith.length && gopIndex < gops.length) {
+        align = gopsToAlignWith[alignIndex];
+        gop = gops[gopIndex];
+        if (align.pts === gop.pts) {
+          break;
+        }
+        if (gop.pts > align.pts) {
+          // this current gop starts after the current gop we want to align on, so increment
+          // align index
+          alignIndex++;
+          continue;
+        } // current gop starts before the current gop we want to align on. so increment gop
+        // index
+
+        gopIndex++;
+        byteLength -= gop.byteLength;
+        nalCount -= gop.nalCount;
+        duration -= gop.duration;
+      }
+      if (gopIndex === 0) {
+        // no gops to trim
+        return gops;
+      }
+      if (gopIndex === gops.length) {
+        // all gops trimmed, skip appending all gops
+        return null;
+      }
+      alignedGops = gops.slice(gopIndex);
+      alignedGops.byteLength = byteLength;
+      alignedGops.duration = duration;
+      alignedGops.nalCount = nalCount;
+      alignedGops.pts = alignedGops[0].pts;
+      alignedGops.dts = alignedGops[0].dts;
+      return alignedGops;
+    }; // trim gop list to the first gop found that has a matching pts with a gop in the list
+    // of gopsToAlignWith starting from the END of the list
+
+    this.alignGopsAtEnd_ = function (gops) {
+      var alignIndex, gopIndex, align, gop, alignEndIndex, matchFound;
+      alignIndex = gopsToAlignWith.length - 1;
+      gopIndex = gops.length - 1;
+      alignEndIndex = null;
+      matchFound = false;
+      while (alignIndex >= 0 && gopIndex >= 0) {
+        align = gopsToAlignWith[alignIndex];
+        gop = gops[gopIndex];
+        if (align.pts === gop.pts) {
+          matchFound = true;
+          break;
+        }
+        if (align.pts > gop.pts) {
+          alignIndex--;
+          continue;
+        }
+        if (alignIndex === gopsToAlignWith.length - 1) {
+          // gop.pts is greater than the last alignment candidate. If no match is found
+          // by the end of this loop, we still want to append gops that come after this
+          // point
+          alignEndIndex = gopIndex;
+        }
+        gopIndex--;
+      }
+      if (!matchFound && alignEndIndex === null) {
+        return null;
+      }
+      var trimIndex;
+      if (matchFound) {
+        trimIndex = gopIndex;
+      } else {
+        trimIndex = alignEndIndex;
+      }
+      if (trimIndex === 0) {
+        return gops;
+      }
+      var alignedGops = gops.slice(trimIndex);
+      var metadata = alignedGops.reduce(function (total, gop) {
+        total.byteLength += gop.byteLength;
+        total.duration += gop.duration;
+        total.nalCount += gop.nalCount;
+        return total;
+      }, {
+        byteLength: 0,
+        duration: 0,
+        nalCount: 0
+      });
+      alignedGops.byteLength = metadata.byteLength;
+      alignedGops.duration = metadata.duration;
+      alignedGops.nalCount = metadata.nalCount;
+      alignedGops.pts = alignedGops[0].pts;
+      alignedGops.dts = alignedGops[0].dts;
+      return alignedGops;
+    };
+    this.alignGopsWith = function (newGopsToAlignWith) {
+      gopsToAlignWith = newGopsToAlignWith;
+    };
+  };
+  VideoSegmentStream.prototype = new Stream();
+  /**
+   * A Stream that can combine multiple streams (ie. audio & video)
+   * into a single output segment for MSE. Also supports audio-only
+   * and video-only streams.
+   * @param options {object} transmuxer options object
+   * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+   *        in the source; false to adjust the first segment to start at media timeline start.
+   */
+
+  CoalesceStream = function (options, metadataStream) {
+    // Number of Tracks per output segment
+    // If greater than 1, we combine multiple
+    // tracks into a single segment
+    this.numberOfTracks = 0;
+    this.metadataStream = metadataStream;
+    options = options || {};
+    if (typeof options.remux !== 'undefined') {
+      this.remuxTracks = !!options.remux;
+    } else {
+      this.remuxTracks = true;
+    }
+    if (typeof options.keepOriginalTimestamps === 'boolean') {
+      this.keepOriginalTimestamps = options.keepOriginalTimestamps;
+    } else {
+      this.keepOriginalTimestamps = false;
+    }
+    this.pendingTracks = [];
+    this.videoTrack = null;
+    this.pendingBoxes = [];
+    this.pendingCaptions = [];
+    this.pendingMetadata = [];
+    this.pendingBytes = 0;
+    this.emittedTracks = 0;
+    CoalesceStream.prototype.init.call(this); // Take output from multiple
+
+    this.push = function (output) {
+      // buffer incoming captions until the associated video segment
+      // finishes
+      if (output.content || output.text) {
+        return this.pendingCaptions.push(output);
+      } // buffer incoming id3 tags until the final flush
+
+      if (output.frames) {
+        return this.pendingMetadata.push(output);
+      } // Add this track to the list of pending tracks and store
+      // important information required for the construction of
+      // the final segment
+
+      this.pendingTracks.push(output.track);
+      this.pendingBytes += output.boxes.byteLength; // TODO: is there an issue for this against chrome?
+      // We unshift audio and push video because
+      // as of Chrome 75 when switching from
+      // one init segment to another if the video
+      // mdat does not appear after the audio mdat
+      // only audio will play for the duration of our transmux.
+
+      if (output.track.type === 'video') {
+        this.videoTrack = output.track;
+        this.pendingBoxes.push(output.boxes);
+      }
+      if (output.track.type === 'audio') {
+        this.audioTrack = output.track;
+        this.pendingBoxes.unshift(output.boxes);
+      }
+    };
+  };
+  CoalesceStream.prototype = new Stream();
+  CoalesceStream.prototype.flush = function (flushSource) {
+    var offset = 0,
+      event = {
+        captions: [],
+        captionStreams: {},
+        metadata: [],
+        info: {}
+      },
+      caption,
+      id3,
+      initSegment,
+      timelineStartPts = 0,
+      i;
+    if (this.pendingTracks.length < this.numberOfTracks) {
+      if (flushSource !== 'VideoSegmentStream' && flushSource !== 'AudioSegmentStream') {
+        // Return because we haven't received a flush from a data-generating
+        // portion of the segment (meaning that we have only recieved meta-data
+        // or captions.)
+        return;
+      } else if (this.remuxTracks) {
+        // Return until we have enough tracks from the pipeline to remux (if we
+        // are remuxing audio and video into a single MP4)
+        return;
+      } else if (this.pendingTracks.length === 0) {
+        // In the case where we receive a flush without any data having been
+        // received we consider it an emitted track for the purposes of coalescing
+        // `done` events.
+        // We do this for the case where there is an audio and video track in the
+        // segment but no audio data. (seen in several playlists with alternate
+        // audio tracks and no audio present in the main TS segments.)
+        this.emittedTracks++;
+        if (this.emittedTracks >= this.numberOfTracks) {
+          this.trigger('done');
+          this.emittedTracks = 0;
+        }
+        return;
+      }
+    }
+    if (this.videoTrack) {
+      timelineStartPts = this.videoTrack.timelineStartInfo.pts;
+      VIDEO_PROPERTIES.forEach(function (prop) {
+        event.info[prop] = this.videoTrack[prop];
+      }, this);
+    } else if (this.audioTrack) {
+      timelineStartPts = this.audioTrack.timelineStartInfo.pts;
+      AUDIO_PROPERTIES.forEach(function (prop) {
+        event.info[prop] = this.audioTrack[prop];
+      }, this);
+    }
+    if (this.videoTrack || this.audioTrack) {
+      if (this.pendingTracks.length === 1) {
+        event.type = this.pendingTracks[0].type;
+      } else {
+        event.type = 'combined';
+      }
+      this.emittedTracks += this.pendingTracks.length;
+      initSegment = mp4.initSegment(this.pendingTracks); // Create a new typed array to hold the init segment
+
+      event.initSegment = new Uint8Array(initSegment.byteLength); // Create an init segment containing a moov
+      // and track definitions
+
+      event.initSegment.set(initSegment); // Create a new typed array to hold the moof+mdats
+
+      event.data = new Uint8Array(this.pendingBytes); // Append each moof+mdat (one per track) together
+
+      for (i = 0; i < this.pendingBoxes.length; i++) {
+        event.data.set(this.pendingBoxes[i], offset);
+        offset += this.pendingBoxes[i].byteLength;
+      } // Translate caption PTS times into second offsets to match the
+      // video timeline for the segment, and add track info
+
+      for (i = 0; i < this.pendingCaptions.length; i++) {
+        caption = this.pendingCaptions[i];
+        caption.startTime = clock.metadataTsToSeconds(caption.startPts, timelineStartPts, this.keepOriginalTimestamps);
+        caption.endTime = clock.metadataTsToSeconds(caption.endPts, timelineStartPts, this.keepOriginalTimestamps);
+        event.captionStreams[caption.stream] = true;
+        event.captions.push(caption);
+      } // Translate ID3 frame PTS times into second offsets to match the
+      // video timeline for the segment
+
+      for (i = 0; i < this.pendingMetadata.length; i++) {
+        id3 = this.pendingMetadata[i];
+        id3.cueTime = clock.metadataTsToSeconds(id3.pts, timelineStartPts, this.keepOriginalTimestamps);
+        event.metadata.push(id3);
+      } // We add this to every single emitted segment even though we only need
+      // it for the first
+
+      event.metadata.dispatchType = this.metadataStream.dispatchType; // Reset stream state
+
+      this.pendingTracks.length = 0;
+      this.videoTrack = null;
+      this.pendingBoxes.length = 0;
+      this.pendingCaptions.length = 0;
+      this.pendingBytes = 0;
+      this.pendingMetadata.length = 0; // Emit the built segment
+      // We include captions and ID3 tags for backwards compatibility,
+      // ideally we should send only video and audio in the data event
+
+      this.trigger('data', event); // Emit each caption to the outside world
+      // Ideally, this would happen immediately on parsing captions,
+      // but we need to ensure that video data is sent back first
+      // so that caption timing can be adjusted to match video timing
+
+      for (i = 0; i < event.captions.length; i++) {
+        caption = event.captions[i];
+        this.trigger('caption', caption);
+      } // Emit each id3 tag to the outside world
+      // Ideally, this would happen immediately on parsing the tag,
+      // but we need to ensure that video data is sent back first
+      // so that ID3 frame timing can be adjusted to match video timing
+
+      for (i = 0; i < event.metadata.length; i++) {
+        id3 = event.metadata[i];
+        this.trigger('id3Frame', id3);
+      }
+    } // Only emit `done` if all tracks have been flushed and emitted
+
+    if (this.emittedTracks >= this.numberOfTracks) {
+      this.trigger('done');
+      this.emittedTracks = 0;
+    }
+  };
+  CoalesceStream.prototype.setRemux = function (val) {
+    this.remuxTracks = val;
+  };
+  /**
+   * A Stream that expects MP2T binary data as input and produces
+   * corresponding media segments, suitable for use with Media Source
+   * Extension (MSE) implementations that support the ISO BMFF byte
+   * stream format, like Chrome.
+   */
+
+  Transmuxer = function (options) {
+    var self = this,
+      hasFlushed = true,
+      videoTrack,
+      audioTrack;
+    Transmuxer.prototype.init.call(this);
+    options = options || {};
+    this.baseMediaDecodeTime = options.baseMediaDecodeTime || 0;
+    this.transmuxPipeline_ = {};
+    this.setupAacPipeline = function () {
+      var pipeline = {};
+      this.transmuxPipeline_ = pipeline;
+      pipeline.type = 'aac';
+      pipeline.metadataStream = new m2ts.MetadataStream(); // set up the parsing pipeline
+
+      pipeline.aacStream = new AacStream();
+      pipeline.audioTimestampRolloverStream = new m2ts.TimestampRolloverStream('audio');
+      pipeline.timedMetadataTimestampRolloverStream = new m2ts.TimestampRolloverStream('timed-metadata');
+      pipeline.adtsStream = new AdtsStream();
+      pipeline.coalesceStream = new CoalesceStream(options, pipeline.metadataStream);
+      pipeline.headOfPipeline = pipeline.aacStream;
+      pipeline.aacStream.pipe(pipeline.audioTimestampRolloverStream).pipe(pipeline.adtsStream);
+      pipeline.aacStream.pipe(pipeline.timedMetadataTimestampRolloverStream).pipe(pipeline.metadataStream).pipe(pipeline.coalesceStream);
+      pipeline.metadataStream.on('timestamp', function (frame) {
+        pipeline.aacStream.setTimestamp(frame.timeStamp);
+      });
+      pipeline.aacStream.on('data', function (data) {
+        if (data.type !== 'timed-metadata' && data.type !== 'audio' || pipeline.audioSegmentStream) {
+          return;
+        }
+        audioTrack = audioTrack || {
+          timelineStartInfo: {
+            baseMediaDecodeTime: self.baseMediaDecodeTime
+          },
+          codec: 'adts',
+          type: 'audio'
+        }; // hook up the audio segment stream to the first track with aac data
+
+        pipeline.coalesceStream.numberOfTracks++;
+        pipeline.audioSegmentStream = new AudioSegmentStream(audioTrack, options);
+        pipeline.audioSegmentStream.on('log', self.getLogTrigger_('audioSegmentStream'));
+        pipeline.audioSegmentStream.on('timingInfo', self.trigger.bind(self, 'audioTimingInfo')); // Set up the final part of the audio pipeline
+
+        pipeline.adtsStream.pipe(pipeline.audioSegmentStream).pipe(pipeline.coalesceStream); // emit pmt info
+
+        self.trigger('trackinfo', {
+          hasAudio: !!audioTrack,
+          hasVideo: !!videoTrack
+        });
+      }); // Re-emit any data coming from the coalesce stream to the outside world
+
+      pipeline.coalesceStream.on('data', this.trigger.bind(this, 'data')); // Let the consumer know we have finished flushing the entire pipeline
+
+      pipeline.coalesceStream.on('done', this.trigger.bind(this, 'done'));
+      addPipelineLogRetriggers(this, pipeline);
+    };
+    this.setupTsPipeline = function () {
+      var pipeline = {};
+      this.transmuxPipeline_ = pipeline;
+      pipeline.type = 'ts';
+      pipeline.metadataStream = new m2ts.MetadataStream(); // set up the parsing pipeline
+
+      pipeline.packetStream = new m2ts.TransportPacketStream();
+      pipeline.parseStream = new m2ts.TransportParseStream();
+      pipeline.elementaryStream = new m2ts.ElementaryStream();
+      pipeline.timestampRolloverStream = new m2ts.TimestampRolloverStream();
+      pipeline.adtsStream = new AdtsStream();
+      pipeline.h264Stream = new H264Stream();
+      pipeline.captionStream = new m2ts.CaptionStream(options);
+      pipeline.coalesceStream = new CoalesceStream(options, pipeline.metadataStream);
+      pipeline.headOfPipeline = pipeline.packetStream; // disassemble MPEG2-TS packets into elementary streams
+
+      pipeline.packetStream.pipe(pipeline.parseStream).pipe(pipeline.elementaryStream).pipe(pipeline.timestampRolloverStream); // !!THIS ORDER IS IMPORTANT!!
+      // demux the streams
+
+      pipeline.timestampRolloverStream.pipe(pipeline.h264Stream);
+      pipeline.timestampRolloverStream.pipe(pipeline.adtsStream);
+      pipeline.timestampRolloverStream.pipe(pipeline.metadataStream).pipe(pipeline.coalesceStream); // Hook up CEA-608/708 caption stream
+
+      pipeline.h264Stream.pipe(pipeline.captionStream).pipe(pipeline.coalesceStream);
+      pipeline.elementaryStream.on('data', function (data) {
+        var i;
+        if (data.type === 'metadata') {
+          i = data.tracks.length; // scan the tracks listed in the metadata
+
+          while (i--) {
+            if (!videoTrack && data.tracks[i].type === 'video') {
+              videoTrack = data.tracks[i];
+              videoTrack.timelineStartInfo.baseMediaDecodeTime = self.baseMediaDecodeTime;
+            } else if (!audioTrack && data.tracks[i].type === 'audio') {
+              audioTrack = data.tracks[i];
+              audioTrack.timelineStartInfo.baseMediaDecodeTime = self.baseMediaDecodeTime;
+            }
+          } // hook up the video segment stream to the first track with h264 data
+
+          if (videoTrack && !pipeline.videoSegmentStream) {
+            pipeline.coalesceStream.numberOfTracks++;
+            pipeline.videoSegmentStream = new VideoSegmentStream(videoTrack, options);
+            pipeline.videoSegmentStream.on('log', self.getLogTrigger_('videoSegmentStream'));
+            pipeline.videoSegmentStream.on('timelineStartInfo', function (timelineStartInfo) {
+              // When video emits timelineStartInfo data after a flush, we forward that
+              // info to the AudioSegmentStream, if it exists, because video timeline
+              // data takes precedence.  Do not do this if keepOriginalTimestamps is set,
+              // because this is a particularly subtle form of timestamp alteration.
+              if (audioTrack && !options.keepOriginalTimestamps) {
+                audioTrack.timelineStartInfo = timelineStartInfo; // On the first segment we trim AAC frames that exist before the
+                // very earliest DTS we have seen in video because Chrome will
+                // interpret any video track with a baseMediaDecodeTime that is
+                // non-zero as a gap.
+
+                pipeline.audioSegmentStream.setEarliestDts(timelineStartInfo.dts - self.baseMediaDecodeTime);
+              }
+            });
+            pipeline.videoSegmentStream.on('processedGopsInfo', self.trigger.bind(self, 'gopInfo'));
+            pipeline.videoSegmentStream.on('segmentTimingInfo', self.trigger.bind(self, 'videoSegmentTimingInfo'));
+            pipeline.videoSegmentStream.on('baseMediaDecodeTime', function (baseMediaDecodeTime) {
+              if (audioTrack) {
+                pipeline.audioSegmentStream.setVideoBaseMediaDecodeTime(baseMediaDecodeTime);
+              }
+            });
+            pipeline.videoSegmentStream.on('timingInfo', self.trigger.bind(self, 'videoTimingInfo')); // Set up the final part of the video pipeline
+
+            pipeline.h264Stream.pipe(pipeline.videoSegmentStream).pipe(pipeline.coalesceStream);
+          }
+          if (audioTrack && !pipeline.audioSegmentStream) {
+            // hook up the audio segment stream to the first track with aac data
+            pipeline.coalesceStream.numberOfTracks++;
+            pipeline.audioSegmentStream = new AudioSegmentStream(audioTrack, options);
+            pipeline.audioSegmentStream.on('log', self.getLogTrigger_('audioSegmentStream'));
+            pipeline.audioSegmentStream.on('timingInfo', self.trigger.bind(self, 'audioTimingInfo'));
+            pipeline.audioSegmentStream.on('segmentTimingInfo', self.trigger.bind(self, 'audioSegmentTimingInfo')); // Set up the final part of the audio pipeline
+
+            pipeline.adtsStream.pipe(pipeline.audioSegmentStream).pipe(pipeline.coalesceStream);
+          } // emit pmt info
+
+          self.trigger('trackinfo', {
+            hasAudio: !!audioTrack,
+            hasVideo: !!videoTrack
+          });
+        }
+      }); // Re-emit any data coming from the coalesce stream to the outside world
+
+      pipeline.coalesceStream.on('data', this.trigger.bind(this, 'data'));
+      pipeline.coalesceStream.on('id3Frame', function (id3Frame) {
+        id3Frame.dispatchType = pipeline.metadataStream.dispatchType;
+        self.trigger('id3Frame', id3Frame);
+      });
+      pipeline.coalesceStream.on('caption', this.trigger.bind(this, 'caption')); // Let the consumer know we have finished flushing the entire pipeline
+
+      pipeline.coalesceStream.on('done', this.trigger.bind(this, 'done'));
+      addPipelineLogRetriggers(this, pipeline);
+    }; // hook up the segment streams once track metadata is delivered
+
+    this.setBaseMediaDecodeTime = function (baseMediaDecodeTime) {
+      var pipeline = this.transmuxPipeline_;
+      if (!options.keepOriginalTimestamps) {
+        this.baseMediaDecodeTime = baseMediaDecodeTime;
+      }
+      if (audioTrack) {
+        audioTrack.timelineStartInfo.dts = undefined;
+        audioTrack.timelineStartInfo.pts = undefined;
+        trackDecodeInfo.clearDtsInfo(audioTrack);
+        if (pipeline.audioTimestampRolloverStream) {
+          pipeline.audioTimestampRolloverStream.discontinuity();
+        }
+      }
+      if (videoTrack) {
+        if (pipeline.videoSegmentStream) {
+          pipeline.videoSegmentStream.gopCache_ = [];
+        }
+        videoTrack.timelineStartInfo.dts = undefined;
+        videoTrack.timelineStartInfo.pts = undefined;
+        trackDecodeInfo.clearDtsInfo(videoTrack);
+        pipeline.captionStream.reset();
+      }
+      if (pipeline.timestampRolloverStream) {
+        pipeline.timestampRolloverStream.discontinuity();
+      }
+    };
+    this.setAudioAppendStart = function (timestamp) {
+      if (audioTrack) {
+        this.transmuxPipeline_.audioSegmentStream.setAudioAppendStart(timestamp);
+      }
+    };
+    this.setRemux = function (val) {
+      var pipeline = this.transmuxPipeline_;
+      options.remux = val;
+      if (pipeline && pipeline.coalesceStream) {
+        pipeline.coalesceStream.setRemux(val);
+      }
+    };
+    this.alignGopsWith = function (gopsToAlignWith) {
+      if (videoTrack && this.transmuxPipeline_.videoSegmentStream) {
+        this.transmuxPipeline_.videoSegmentStream.alignGopsWith(gopsToAlignWith);
+      }
+    };
+    this.getLogTrigger_ = function (key) {
+      var self = this;
+      return function (event) {
+        event.stream = key;
+        self.trigger('log', event);
+      };
+    }; // feed incoming data to the front of the parsing pipeline
+
+    this.push = function (data) {
+      if (hasFlushed) {
+        var isAac = isLikelyAacData(data);
+        if (isAac && this.transmuxPipeline_.type !== 'aac') {
+          this.setupAacPipeline();
+        } else if (!isAac && this.transmuxPipeline_.type !== 'ts') {
+          this.setupTsPipeline();
+        }
+        hasFlushed = false;
+      }
+      this.transmuxPipeline_.headOfPipeline.push(data);
+    }; // flush any buffered data
+
+    this.flush = function () {
+      hasFlushed = true; // Start at the top of the pipeline and flush all pending work
+
+      this.transmuxPipeline_.headOfPipeline.flush();
+    };
+    this.endTimeline = function () {
+      this.transmuxPipeline_.headOfPipeline.endTimeline();
+    };
+    this.reset = function () {
+      if (this.transmuxPipeline_.headOfPipeline) {
+        this.transmuxPipeline_.headOfPipeline.reset();
+      }
+    }; // Caption data has to be reset when seeking outside buffered range
+
+    this.resetCaptions = function () {
+      if (this.transmuxPipeline_.captionStream) {
+        this.transmuxPipeline_.captionStream.reset();
+      }
+    };
+  };
+  Transmuxer.prototype = new Stream();
+  var transmuxer = {
+    Transmuxer: Transmuxer,
+    VideoSegmentStream: VideoSegmentStream,
+    AudioSegmentStream: AudioSegmentStream,
+    AUDIO_PROPERTIES: AUDIO_PROPERTIES,
+    VIDEO_PROPERTIES: VIDEO_PROPERTIES,
+    // exported for testing
+    generateSegmentTimingInfo: generateSegmentTimingInfo
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var toUnsigned$3 = function (value) {
+    return value >>> 0;
+  };
+  var toHexString$1 = function (value) {
+    return ('00' + value.toString(16)).slice(-2);
+  };
+  var bin = {
+    toUnsigned: toUnsigned$3,
+    toHexString: toHexString$1
+  };
+  var parseType$3 = function (buffer) {
+    var result = '';
+    result += String.fromCharCode(buffer[0]);
+    result += String.fromCharCode(buffer[1]);
+    result += String.fromCharCode(buffer[2]);
+    result += String.fromCharCode(buffer[3]);
+    return result;
+  };
+  var parseType_1 = parseType$3;
+  var toUnsigned$2 = bin.toUnsigned;
+  var parseType$2 = parseType_1;
+  var findBox$2 = function (data, path) {
+    var results = [],
+      i,
+      size,
+      type,
+      end,
+      subresults;
+    if (!path.length) {
+      // short-circuit the search for empty paths
+      return null;
+    }
+    for (i = 0; i < data.byteLength;) {
+      size = toUnsigned$2(data[i] << 24 | data[i + 1] << 16 | data[i + 2] << 8 | data[i + 3]);
+      type = parseType$2(data.subarray(i + 4, i + 8));
+      end = size > 1 ? i + size : data.byteLength;
+      if (type === path[0]) {
+        if (path.length === 1) {
+          // this is the end of the path and we've found the box we were
+          // looking for
+          results.push(data.subarray(i + 8, end));
+        } else {
+          // recursively search for the next box along the path
+          subresults = findBox$2(data.subarray(i + 8, end), path.slice(1));
+          if (subresults.length) {
+            results = results.concat(subresults);
+          }
+        }
+      }
+      i = end;
+    } // we've finished searching all of data
+
+    return results;
+  };
+  var findBox_1 = findBox$2;
+  var toUnsigned$1 = bin.toUnsigned;
+  var getUint64$2 = numbers.getUint64;
+  var tfdt = function (data) {
+    var result = {
+      version: data[0],
+      flags: new Uint8Array(data.subarray(1, 4))
+    };
+    if (result.version === 1) {
+      result.baseMediaDecodeTime = getUint64$2(data.subarray(4));
+    } else {
+      result.baseMediaDecodeTime = toUnsigned$1(data[4] << 24 | data[5] << 16 | data[6] << 8 | data[7]);
+    }
+    return result;
+  };
+  var parseTfdt$2 = tfdt;
+  var parseSampleFlags$1 = function (flags) {
+    return {
+      isLeading: (flags[0] & 0x0c) >>> 2,
+      dependsOn: flags[0] & 0x03,
+      isDependedOn: (flags[1] & 0xc0) >>> 6,
+      hasRedundancy: (flags[1] & 0x30) >>> 4,
+      paddingValue: (flags[1] & 0x0e) >>> 1,
+      isNonSyncSample: flags[1] & 0x01,
+      degradationPriority: flags[2] << 8 | flags[3]
+    };
+  };
+  var parseSampleFlags_1 = parseSampleFlags$1;
+  var parseSampleFlags = parseSampleFlags_1;
+  var trun = function (data) {
+    var result = {
+        version: data[0],
+        flags: new Uint8Array(data.subarray(1, 4)),
+        samples: []
+      },
+      view = new DataView(data.buffer, data.byteOffset, data.byteLength),
+      // Flag interpretation
+      dataOffsetPresent = result.flags[2] & 0x01,
+      // compare with 2nd byte of 0x1
+      firstSampleFlagsPresent = result.flags[2] & 0x04,
+      // compare with 2nd byte of 0x4
+      sampleDurationPresent = result.flags[1] & 0x01,
+      // compare with 2nd byte of 0x100
+      sampleSizePresent = result.flags[1] & 0x02,
+      // compare with 2nd byte of 0x200
+      sampleFlagsPresent = result.flags[1] & 0x04,
+      // compare with 2nd byte of 0x400
+      sampleCompositionTimeOffsetPresent = result.flags[1] & 0x08,
+      // compare with 2nd byte of 0x800
+      sampleCount = view.getUint32(4),
+      offset = 8,
+      sample;
+    if (dataOffsetPresent) {
+      // 32 bit signed integer
+      result.dataOffset = view.getInt32(offset);
+      offset += 4;
+    } // Overrides the flags for the first sample only. The order of
+    // optional values will be: duration, size, compositionTimeOffset
+
+    if (firstSampleFlagsPresent && sampleCount) {
+      sample = {
+        flags: parseSampleFlags(data.subarray(offset, offset + 4))
+      };
+      offset += 4;
+      if (sampleDurationPresent) {
+        sample.duration = view.getUint32(offset);
+        offset += 4;
+      }
+      if (sampleSizePresent) {
+        sample.size = view.getUint32(offset);
+        offset += 4;
+      }
+      if (sampleCompositionTimeOffsetPresent) {
+        if (result.version === 1) {
+          sample.compositionTimeOffset = view.getInt32(offset);
+        } else {
+          sample.compositionTimeOffset = view.getUint32(offset);
+        }
+        offset += 4;
+      }
+      result.samples.push(sample);
+      sampleCount--;
+    }
+    while (sampleCount--) {
+      sample = {};
+      if (sampleDurationPresent) {
+        sample.duration = view.getUint32(offset);
+        offset += 4;
+      }
+      if (sampleSizePresent) {
+        sample.size = view.getUint32(offset);
+        offset += 4;
+      }
+      if (sampleFlagsPresent) {
+        sample.flags = parseSampleFlags(data.subarray(offset, offset + 4));
+        offset += 4;
+      }
+      if (sampleCompositionTimeOffsetPresent) {
+        if (result.version === 1) {
+          sample.compositionTimeOffset = view.getInt32(offset);
+        } else {
+          sample.compositionTimeOffset = view.getUint32(offset);
+        }
+        offset += 4;
+      }
+      result.samples.push(sample);
+    }
+    return result;
+  };
+  var parseTrun$2 = trun;
+  var tfhd = function (data) {
+    var view = new DataView(data.buffer, data.byteOffset, data.byteLength),
+      result = {
+        version: data[0],
+        flags: new Uint8Array(data.subarray(1, 4)),
+        trackId: view.getUint32(4)
+      },
+      baseDataOffsetPresent = result.flags[2] & 0x01,
+      sampleDescriptionIndexPresent = result.flags[2] & 0x02,
+      defaultSampleDurationPresent = result.flags[2] & 0x08,
+      defaultSampleSizePresent = result.flags[2] & 0x10,
+      defaultSampleFlagsPresent = result.flags[2] & 0x20,
+      durationIsEmpty = result.flags[0] & 0x010000,
+      defaultBaseIsMoof = result.flags[0] & 0x020000,
+      i;
+    i = 8;
+    if (baseDataOffsetPresent) {
+      i += 4; // truncate top 4 bytes
+      // FIXME: should we read the full 64 bits?
+
+      result.baseDataOffset = view.getUint32(12);
+      i += 4;
+    }
+    if (sampleDescriptionIndexPresent) {
+      result.sampleDescriptionIndex = view.getUint32(i);
+      i += 4;
+    }
+    if (defaultSampleDurationPresent) {
+      result.defaultSampleDuration = view.getUint32(i);
+      i += 4;
+    }
+    if (defaultSampleSizePresent) {
+      result.defaultSampleSize = view.getUint32(i);
+      i += 4;
+    }
+    if (defaultSampleFlagsPresent) {
+      result.defaultSampleFlags = view.getUint32(i);
+    }
+    if (durationIsEmpty) {
+      result.durationIsEmpty = true;
+    }
+    if (!baseDataOffsetPresent && defaultBaseIsMoof) {
+      result.baseDataOffsetIsMoof = true;
+    }
+    return result;
+  };
+  var parseTfhd$2 = tfhd;
+  var win;
+  if (typeof window !== "undefined") {
+    win = window;
+  } else if (typeof commonjsGlobal !== "undefined") {
+    win = commonjsGlobal;
+  } else if (typeof self !== "undefined") {
+    win = self;
+  } else {
+    win = {};
+  }
+  var window_1 = win;
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Reads in-band CEA-708 captions out of FMP4 segments.
+   * @see https://en.wikipedia.org/wiki/CEA-708
+   */
+
+  var discardEmulationPreventionBytes = captionPacketParser.discardEmulationPreventionBytes;
+  var CaptionStream = captionStream.CaptionStream;
+  var findBox$1 = findBox_1;
+  var parseTfdt$1 = parseTfdt$2;
+  var parseTrun$1 = parseTrun$2;
+  var parseTfhd$1 = parseTfhd$2;
+  var window$2 = window_1;
+  /**
+    * Maps an offset in the mdat to a sample based on the the size of the samples.
+    * Assumes that `parseSamples` has been called first.
+    *
+    * @param {Number} offset - The offset into the mdat
+    * @param {Object[]} samples - An array of samples, parsed using `parseSamples`
+    * @return {?Object} The matching sample, or null if no match was found.
+    *
+    * @see ISO-BMFF-12/2015, Section 8.8.8
+   **/
+
+  var mapToSample = function (offset, samples) {
+    var approximateOffset = offset;
+    for (var i = 0; i < samples.length; i++) {
+      var sample = samples[i];
+      if (approximateOffset < sample.size) {
+        return sample;
+      }
+      approximateOffset -= sample.size;
+    }
+    return null;
+  };
+  /**
+    * Finds SEI nal units contained in a Media Data Box.
+    * Assumes that `parseSamples` has been called first.
+    *
+    * @param {Uint8Array} avcStream - The bytes of the mdat
+    * @param {Object[]} samples - The samples parsed out by `parseSamples`
+    * @param {Number} trackId - The trackId of this video track
+    * @return {Object[]} seiNals - the parsed SEI NALUs found.
+    *   The contents of the seiNal should match what is expected by
+    *   CaptionStream.push (nalUnitType, size, data, escapedRBSP, pts, dts)
+    *
+    * @see ISO-BMFF-12/2015, Section 8.1.1
+    * @see Rec. ITU-T H.264, 7.3.2.3.1
+   **/
+
+  var findSeiNals = function (avcStream, samples, trackId) {
+    var avcView = new DataView(avcStream.buffer, avcStream.byteOffset, avcStream.byteLength),
+      result = {
+        logs: [],
+        seiNals: []
+      },
+      seiNal,
+      i,
+      length,
+      lastMatchedSample;
+    for (i = 0; i + 4 < avcStream.length; i += length) {
+      length = avcView.getUint32(i);
+      i += 4; // Bail if this doesn't appear to be an H264 stream
+
+      if (length <= 0) {
+        continue;
+      }
+      switch (avcStream[i] & 0x1F) {
+        case 0x06:
+          var data = avcStream.subarray(i + 1, i + 1 + length);
+          var matchingSample = mapToSample(i, samples);
+          seiNal = {
+            nalUnitType: 'sei_rbsp',
+            size: length,
+            data: data,
+            escapedRBSP: discardEmulationPreventionBytes(data),
+            trackId: trackId
+          };
+          if (matchingSample) {
+            seiNal.pts = matchingSample.pts;
+            seiNal.dts = matchingSample.dts;
+            lastMatchedSample = matchingSample;
+          } else if (lastMatchedSample) {
+            // If a matching sample cannot be found, use the last
+            // sample's values as they should be as close as possible
+            seiNal.pts = lastMatchedSample.pts;
+            seiNal.dts = lastMatchedSample.dts;
+          } else {
+            result.logs.push({
+              level: 'warn',
+              message: 'We\'ve encountered a nal unit without data at ' + i + ' for trackId ' + trackId + '. See mux.js#223.'
+            });
+            break;
+          }
+          result.seiNals.push(seiNal);
+          break;
+      }
+    }
+    return result;
+  };
+  /**
+    * Parses sample information out of Track Run Boxes and calculates
+    * the absolute presentation and decode timestamps of each sample.
+    *
+    * @param {Array<Uint8Array>} truns - The Trun Run boxes to be parsed
+    * @param {Number|BigInt} baseMediaDecodeTime - base media decode time from tfdt
+        @see ISO-BMFF-12/2015, Section 8.8.12
+    * @param {Object} tfhd - The parsed Track Fragment Header
+    *   @see inspect.parseTfhd
+    * @return {Object[]} the parsed samples
+    *
+    * @see ISO-BMFF-12/2015, Section 8.8.8
+   **/
+
+  var parseSamples = function (truns, baseMediaDecodeTime, tfhd) {
+    var currentDts = baseMediaDecodeTime;
+    var defaultSampleDuration = tfhd.defaultSampleDuration || 0;
+    var defaultSampleSize = tfhd.defaultSampleSize || 0;
+    var trackId = tfhd.trackId;
+    var allSamples = [];
+    truns.forEach(function (trun) {
+      // Note: We currently do not parse the sample table as well
+      // as the trun. It's possible some sources will require this.
+      // moov > trak > mdia > minf > stbl
+      var trackRun = parseTrun$1(trun);
+      var samples = trackRun.samples;
+      samples.forEach(function (sample) {
+        if (sample.duration === undefined) {
+          sample.duration = defaultSampleDuration;
+        }
+        if (sample.size === undefined) {
+          sample.size = defaultSampleSize;
+        }
+        sample.trackId = trackId;
+        sample.dts = currentDts;
+        if (sample.compositionTimeOffset === undefined) {
+          sample.compositionTimeOffset = 0;
+        }
+        if (typeof currentDts === 'bigint') {
+          sample.pts = currentDts + window$2.BigInt(sample.compositionTimeOffset);
+          currentDts += window$2.BigInt(sample.duration);
+        } else {
+          sample.pts = currentDts + sample.compositionTimeOffset;
+          currentDts += sample.duration;
+        }
+      });
+      allSamples = allSamples.concat(samples);
+    });
+    return allSamples;
+  };
+  /**
+    * Parses out caption nals from an FMP4 segment's video tracks.
+    *
+    * @param {Uint8Array} segment - The bytes of a single segment
+    * @param {Number} videoTrackId - The trackId of a video track in the segment
+    * @return {Object.<Number, Object[]>} A mapping of video trackId to
+    *   a list of seiNals found in that track
+   **/
+
+  var parseCaptionNals = function (segment, videoTrackId) {
+    // To get the samples
+    var trafs = findBox$1(segment, ['moof', 'traf']); // To get SEI NAL units
+
+    var mdats = findBox$1(segment, ['mdat']);
+    var captionNals = {};
+    var mdatTrafPairs = []; // Pair up each traf with a mdat as moofs and mdats are in pairs
+
+    mdats.forEach(function (mdat, index) {
+      var matchingTraf = trafs[index];
+      mdatTrafPairs.push({
+        mdat: mdat,
+        traf: matchingTraf
+      });
+    });
+    mdatTrafPairs.forEach(function (pair) {
+      var mdat = pair.mdat;
+      var traf = pair.traf;
+      var tfhd = findBox$1(traf, ['tfhd']); // Exactly 1 tfhd per traf
+
+      var headerInfo = parseTfhd$1(tfhd[0]);
+      var trackId = headerInfo.trackId;
+      var tfdt = findBox$1(traf, ['tfdt']); // Either 0 or 1 tfdt per traf
+
+      var baseMediaDecodeTime = tfdt.length > 0 ? parseTfdt$1(tfdt[0]).baseMediaDecodeTime : 0;
+      var truns = findBox$1(traf, ['trun']);
+      var samples;
+      var result; // Only parse video data for the chosen video track
+
+      if (videoTrackId === trackId && truns.length > 0) {
+        samples = parseSamples(truns, baseMediaDecodeTime, headerInfo);
+        result = findSeiNals(mdat, samples, trackId);
+        if (!captionNals[trackId]) {
+          captionNals[trackId] = {
+            seiNals: [],
+            logs: []
+          };
+        }
+        captionNals[trackId].seiNals = captionNals[trackId].seiNals.concat(result.seiNals);
+        captionNals[trackId].logs = captionNals[trackId].logs.concat(result.logs);
+      }
+    });
+    return captionNals;
+  };
+  /**
+    * Parses out inband captions from an MP4 container and returns
+    * caption objects that can be used by WebVTT and the TextTrack API.
+    * @see https://developer.mozilla.org/en-US/docs/Web/API/VTTCue
+    * @see https://developer.mozilla.org/en-US/docs/Web/API/TextTrack
+    * Assumes that `probe.getVideoTrackIds` and `probe.timescale` have been called first
+    *
+    * @param {Uint8Array} segment - The fmp4 segment containing embedded captions
+    * @param {Number} trackId - The id of the video track to parse
+    * @param {Number} timescale - The timescale for the video track from the init segment
+    *
+    * @return {?Object[]} parsedCaptions - A list of captions or null if no video tracks
+    * @return {Number} parsedCaptions[].startTime - The time to show the caption in seconds
+    * @return {Number} parsedCaptions[].endTime - The time to stop showing the caption in seconds
+    * @return {Object[]} parsedCaptions[].content - A list of individual caption segments
+    * @return {String} parsedCaptions[].content.text - The visible content of the caption segment
+    * @return {Number} parsedCaptions[].content.line - The line height from 1-15 for positioning of the caption segment
+    * @return {Number} parsedCaptions[].content.position - The column indent percentage for cue positioning from 10-80
+   **/
+
+  var parseEmbeddedCaptions = function (segment, trackId, timescale) {
+    var captionNals; // the ISO-BMFF spec says that trackId can't be zero, but there's some broken content out there
+
+    if (trackId === null) {
+      return null;
+    }
+    captionNals = parseCaptionNals(segment, trackId);
+    var trackNals = captionNals[trackId] || {};
+    return {
+      seiNals: trackNals.seiNals,
+      logs: trackNals.logs,
+      timescale: timescale
+    };
+  };
+  /**
+    * Converts SEI NALUs into captions that can be used by video.js
+   **/
+
+  var CaptionParser = function () {
+    var isInitialized = false;
+    var captionStream; // Stores segments seen before trackId and timescale are set
+
+    var segmentCache; // Stores video track ID of the track being parsed
+
+    var trackId; // Stores the timescale of the track being parsed
+
+    var timescale; // Stores captions parsed so far
+
+    var parsedCaptions; // Stores whether we are receiving partial data or not
+
+    var parsingPartial;
+    /**
+      * A method to indicate whether a CaptionParser has been initalized
+      * @returns {Boolean}
+     **/
+
+    this.isInitialized = function () {
+      return isInitialized;
+    };
+    /**
+      * Initializes the underlying CaptionStream, SEI NAL parsing
+      * and management, and caption collection
+     **/
+
+    this.init = function (options) {
+      captionStream = new CaptionStream();
+      isInitialized = true;
+      parsingPartial = options ? options.isPartial : false; // Collect dispatched captions
+
+      captionStream.on('data', function (event) {
+        // Convert to seconds in the source's timescale
+        event.startTime = event.startPts / timescale;
+        event.endTime = event.endPts / timescale;
+        parsedCaptions.captions.push(event);
+        parsedCaptions.captionStreams[event.stream] = true;
+      });
+      captionStream.on('log', function (log) {
+        parsedCaptions.logs.push(log);
+      });
+    };
+    /**
+      * Determines if a new video track will be selected
+      * or if the timescale changed
+      * @return {Boolean}
+     **/
+
+    this.isNewInit = function (videoTrackIds, timescales) {
+      if (videoTrackIds && videoTrackIds.length === 0 || timescales && typeof timescales === 'object' && Object.keys(timescales).length === 0) {
+        return false;
+      }
+      return trackId !== videoTrackIds[0] || timescale !== timescales[trackId];
+    };
+    /**
+      * Parses out SEI captions and interacts with underlying
+      * CaptionStream to return dispatched captions
+      *
+      * @param {Uint8Array} segment - The fmp4 segment containing embedded captions
+      * @param {Number[]} videoTrackIds - A list of video tracks found in the init segment
+      * @param {Object.<Number, Number>} timescales - The timescales found in the init segment
+      * @see parseEmbeddedCaptions
+      * @see m2ts/caption-stream.js
+     **/
+
+    this.parse = function (segment, videoTrackIds, timescales) {
+      var parsedData;
+      if (!this.isInitialized()) {
+        return null; // This is not likely to be a video segment
+      } else if (!videoTrackIds || !timescales) {
+        return null;
+      } else if (this.isNewInit(videoTrackIds, timescales)) {
+        // Use the first video track only as there is no
+        // mechanism to switch to other video tracks
+        trackId = videoTrackIds[0];
+        timescale = timescales[trackId]; // If an init segment has not been seen yet, hold onto segment
+        // data until we have one.
+        // the ISO-BMFF spec says that trackId can't be zero, but there's some broken content out there
+      } else if (trackId === null || !timescale) {
+        segmentCache.push(segment);
+        return null;
+      } // Now that a timescale and trackId is set, parse cached segments
+
+      while (segmentCache.length > 0) {
+        var cachedSegment = segmentCache.shift();
+        this.parse(cachedSegment, videoTrackIds, timescales);
+      }
+      parsedData = parseEmbeddedCaptions(segment, trackId, timescale);
+      if (parsedData && parsedData.logs) {
+        parsedCaptions.logs = parsedCaptions.logs.concat(parsedData.logs);
+      }
+      if (parsedData === null || !parsedData.seiNals) {
+        if (parsedCaptions.logs.length) {
+          return {
+            logs: parsedCaptions.logs,
+            captions: [],
+            captionStreams: []
+          };
+        }
+        return null;
+      }
+      this.pushNals(parsedData.seiNals); // Force the parsed captions to be dispatched
+
+      this.flushStream();
+      return parsedCaptions;
+    };
+    /**
+      * Pushes SEI NALUs onto CaptionStream
+      * @param {Object[]} nals - A list of SEI nals parsed using `parseCaptionNals`
+      * Assumes that `parseCaptionNals` has been called first
+      * @see m2ts/caption-stream.js
+      **/
+
+    this.pushNals = function (nals) {
+      if (!this.isInitialized() || !nals || nals.length === 0) {
+        return null;
+      }
+      nals.forEach(function (nal) {
+        captionStream.push(nal);
+      });
+    };
+    /**
+      * Flushes underlying CaptionStream to dispatch processed, displayable captions
+      * @see m2ts/caption-stream.js
+     **/
+
+    this.flushStream = function () {
+      if (!this.isInitialized()) {
+        return null;
+      }
+      if (!parsingPartial) {
+        captionStream.flush();
+      } else {
+        captionStream.partialFlush();
+      }
+    };
+    /**
+      * Reset caption buckets for new data
+     **/
+
+    this.clearParsedCaptions = function () {
+      parsedCaptions.captions = [];
+      parsedCaptions.captionStreams = {};
+      parsedCaptions.logs = [];
+    };
+    /**
+      * Resets underlying CaptionStream
+      * @see m2ts/caption-stream.js
+     **/
+
+    this.resetCaptionStream = function () {
+      if (!this.isInitialized()) {
+        return null;
+      }
+      captionStream.reset();
+    };
+    /**
+      * Convenience method to clear all captions flushed from the
+      * CaptionStream and still being parsed
+      * @see m2ts/caption-stream.js
+     **/
+
+    this.clearAllCaptions = function () {
+      this.clearParsedCaptions();
+      this.resetCaptionStream();
+    };
+    /**
+      * Reset caption parser
+     **/
+
+    this.reset = function () {
+      segmentCache = [];
+      trackId = null;
+      timescale = null;
+      if (!parsedCaptions) {
+        parsedCaptions = {
+          captions: [],
+          // CC1, CC2, CC3, CC4
+          captionStreams: {},
+          logs: []
+        };
+      } else {
+        this.clearParsedCaptions();
+      }
+      this.resetCaptionStream();
+    };
+    this.reset();
+  };
+  var captionParser = CaptionParser;
+  /**
+   * Returns the first string in the data array ending with a null char '\0'
+   * @param {UInt8} data 
+   * @returns the string with the null char
+   */
+
+  var uint8ToCString$1 = function (data) {
+    var index = 0;
+    var curChar = String.fromCharCode(data[index]);
+    var retString = '';
+    while (curChar !== '\0') {
+      retString += curChar;
+      index++;
+      curChar = String.fromCharCode(data[index]);
+    } // Add nullChar
+
+    retString += curChar;
+    return retString;
+  };
+  var string = {
+    uint8ToCString: uint8ToCString$1
+  };
+  var uint8ToCString = string.uint8ToCString;
+  var getUint64$1 = numbers.getUint64;
+  /**
+   * Based on: ISO/IEC 23009 Section: 5.10.3.3
+   * References:
+   * https://dashif-documents.azurewebsites.net/Events/master/event.html#emsg-format
+   * https://aomediacodec.github.io/id3-emsg/
+   * 
+   * Takes emsg box data as a uint8 array and returns a emsg box object
+   * @param {UInt8Array} boxData data from emsg box
+   * @returns A parsed emsg box object
+   */
+
+  var parseEmsgBox = function (boxData) {
+    // version + flags
+    var offset = 4;
+    var version = boxData[0];
+    var scheme_id_uri, value, timescale, presentation_time, presentation_time_delta, event_duration, id, message_data;
+    if (version === 0) {
+      scheme_id_uri = uint8ToCString(boxData.subarray(offset));
+      offset += scheme_id_uri.length;
+      value = uint8ToCString(boxData.subarray(offset));
+      offset += value.length;
+      var dv = new DataView(boxData.buffer);
+      timescale = dv.getUint32(offset);
+      offset += 4;
+      presentation_time_delta = dv.getUint32(offset);
+      offset += 4;
+      event_duration = dv.getUint32(offset);
+      offset += 4;
+      id = dv.getUint32(offset);
+      offset += 4;
+    } else if (version === 1) {
+      var dv = new DataView(boxData.buffer);
+      timescale = dv.getUint32(offset);
+      offset += 4;
+      presentation_time = getUint64$1(boxData.subarray(offset));
+      offset += 8;
+      event_duration = dv.getUint32(offset);
+      offset += 4;
+      id = dv.getUint32(offset);
+      offset += 4;
+      scheme_id_uri = uint8ToCString(boxData.subarray(offset));
+      offset += scheme_id_uri.length;
+      value = uint8ToCString(boxData.subarray(offset));
+      offset += value.length;
+    }
+    message_data = new Uint8Array(boxData.subarray(offset, boxData.byteLength));
+    var emsgBox = {
+      scheme_id_uri,
+      value,
+      // if timescale is undefined or 0 set to 1 
+      timescale: timescale ? timescale : 1,
+      presentation_time,
+      presentation_time_delta,
+      event_duration,
+      id,
+      message_data
+    };
+    return isValidEmsgBox(version, emsgBox) ? emsgBox : undefined;
+  };
+  /**
+   * Scales a presentation time or time delta with an offset with a provided timescale
+   * @param {number} presentationTime 
+   * @param {number} timescale 
+   * @param {number} timeDelta 
+   * @param {number} offset 
+   * @returns the scaled time as a number
+   */
+
+  var scaleTime = function (presentationTime, timescale, timeDelta, offset) {
+    return presentationTime || presentationTime === 0 ? presentationTime / timescale : offset + timeDelta / timescale;
+  };
+  /**
+   * Checks the emsg box data for validity based on the version
+   * @param {number} version of the emsg box to validate
+   * @param {Object} emsg the emsg data to validate
+   * @returns if the box is valid as a boolean
+   */
+
+  var isValidEmsgBox = function (version, emsg) {
+    var hasScheme = emsg.scheme_id_uri !== '\0';
+    var isValidV0Box = version === 0 && isDefined(emsg.presentation_time_delta) && hasScheme;
+    var isValidV1Box = version === 1 && isDefined(emsg.presentation_time) && hasScheme; // Only valid versions of emsg are 0 and 1
+
+    return !(version > 1) && isValidV0Box || isValidV1Box;
+  }; // Utility function to check if an object is defined
+
+  var isDefined = function (data) {
+    return data !== undefined || data !== null;
+  };
+  var emsg$1 = {
+    parseEmsgBox: parseEmsgBox,
+    scaleTime: scaleTime
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Utilities to detect basic properties and metadata about MP4s.
+   */
+
+  var toUnsigned = bin.toUnsigned;
+  var toHexString = bin.toHexString;
+  var findBox = findBox_1;
+  var parseType$1 = parseType_1;
+  var emsg = emsg$1;
+  var parseTfhd = parseTfhd$2;
+  var parseTrun = parseTrun$2;
+  var parseTfdt = parseTfdt$2;
+  var getUint64 = numbers.getUint64;
+  var timescale, startTime, compositionStartTime, getVideoTrackIds, getTracks, getTimescaleFromMediaHeader, getEmsgID3;
+  var window$1 = window_1;
+  var parseId3Frames = parseId3.parseId3Frames;
+  /**
+   * Parses an MP4 initialization segment and extracts the timescale
+   * values for any declared tracks. Timescale values indicate the
+   * number of clock ticks per second to assume for time-based values
+   * elsewhere in the MP4.
+   *
+   * To determine the start time of an MP4, you need two pieces of
+   * information: the timescale unit and the earliest base media decode
+   * time. Multiple timescales can be specified within an MP4 but the
+   * base media decode time is always expressed in the timescale from
+   * the media header box for the track:
+   * ```
+   * moov > trak > mdia > mdhd.timescale
+   * ```
+   * @param init {Uint8Array} the bytes of the init segment
+   * @return {object} a hash of track ids to timescale values or null if
+   * the init segment is malformed.
+   */
+
+  timescale = function (init) {
+    var result = {},
+      traks = findBox(init, ['moov', 'trak']); // mdhd timescale
+
+    return traks.reduce(function (result, trak) {
+      var tkhd, version, index, id, mdhd;
+      tkhd = findBox(trak, ['tkhd'])[0];
+      if (!tkhd) {
+        return null;
+      }
+      version = tkhd[0];
+      index = version === 0 ? 12 : 20;
+      id = toUnsigned(tkhd[index] << 24 | tkhd[index + 1] << 16 | tkhd[index + 2] << 8 | tkhd[index + 3]);
+      mdhd = findBox(trak, ['mdia', 'mdhd'])[0];
+      if (!mdhd) {
+        return null;
+      }
+      version = mdhd[0];
+      index = version === 0 ? 12 : 20;
+      result[id] = toUnsigned(mdhd[index] << 24 | mdhd[index + 1] << 16 | mdhd[index + 2] << 8 | mdhd[index + 3]);
+      return result;
+    }, result);
+  };
+  /**
+   * Determine the base media decode start time, in seconds, for an MP4
+   * fragment. If multiple fragments are specified, the earliest time is
+   * returned.
+   *
+   * The base media decode time can be parsed from track fragment
+   * metadata:
+   * ```
+   * moof > traf > tfdt.baseMediaDecodeTime
+   * ```
+   * It requires the timescale value from the mdhd to interpret.
+   *
+   * @param timescale {object} a hash of track ids to timescale values.
+   * @return {number} the earliest base media decode start time for the
+   * fragment, in seconds
+   */
+
+  startTime = function (timescale, fragment) {
+    var trafs; // we need info from two childrend of each track fragment box
+
+    trafs = findBox(fragment, ['moof', 'traf']); // determine the start times for each track
+
+    var lowestTime = trafs.reduce(function (acc, traf) {
+      var tfhd = findBox(traf, ['tfhd'])[0]; // get the track id from the tfhd
+
+      var id = toUnsigned(tfhd[4] << 24 | tfhd[5] << 16 | tfhd[6] << 8 | tfhd[7]); // assume a 90kHz clock if no timescale was specified
+
+      var scale = timescale[id] || 90e3; // get the base media decode time from the tfdt
+
+      var tfdt = findBox(traf, ['tfdt'])[0];
+      var dv = new DataView(tfdt.buffer, tfdt.byteOffset, tfdt.byteLength);
+      var baseTime; // version 1 is 64 bit
+
+      if (tfdt[0] === 1) {
+        baseTime = getUint64(tfdt.subarray(4, 12));
+      } else {
+        baseTime = dv.getUint32(4);
+      } // convert base time to seconds if it is a valid number.
+
+      let seconds;
+      if (typeof baseTime === 'bigint') {
+        seconds = baseTime / window$1.BigInt(scale);
+      } else if (typeof baseTime === 'number' && !isNaN(baseTime)) {
+        seconds = baseTime / scale;
+      }
+      if (seconds < Number.MAX_SAFE_INTEGER) {
+        seconds = Number(seconds);
+      }
+      if (seconds < acc) {
+        acc = seconds;
+      }
+      return acc;
+    }, Infinity);
+    return typeof lowestTime === 'bigint' || isFinite(lowestTime) ? lowestTime : 0;
+  };
+  /**
+   * Determine the composition start, in seconds, for an MP4
+   * fragment.
+   *
+   * The composition start time of a fragment can be calculated using the base
+   * media decode time, composition time offset, and timescale, as follows:
+   *
+   * compositionStartTime = (baseMediaDecodeTime + compositionTimeOffset) / timescale
+   *
+   * All of the aforementioned information is contained within a media fragment's
+   * `traf` box, except for timescale info, which comes from the initialization
+   * segment, so a track id (also contained within a `traf`) is also necessary to
+   * associate it with a timescale
+   *
+   *
+   * @param timescales {object} - a hash of track ids to timescale values.
+   * @param fragment {Unit8Array} - the bytes of a media segment
+   * @return {number} the composition start time for the fragment, in seconds
+   **/
+
+  compositionStartTime = function (timescales, fragment) {
+    var trafBoxes = findBox(fragment, ['moof', 'traf']);
+    var baseMediaDecodeTime = 0;
+    var compositionTimeOffset = 0;
+    var trackId;
+    if (trafBoxes && trafBoxes.length) {
+      // The spec states that track run samples contained within a `traf` box are contiguous, but
+      // it does not explicitly state whether the `traf` boxes themselves are contiguous.
+      // We will assume that they are, so we only need the first to calculate start time.
+      var tfhd = findBox(trafBoxes[0], ['tfhd'])[0];
+      var trun = findBox(trafBoxes[0], ['trun'])[0];
+      var tfdt = findBox(trafBoxes[0], ['tfdt'])[0];
+      if (tfhd) {
+        var parsedTfhd = parseTfhd(tfhd);
+        trackId = parsedTfhd.trackId;
+      }
+      if (tfdt) {
+        var parsedTfdt = parseTfdt(tfdt);
+        baseMediaDecodeTime = parsedTfdt.baseMediaDecodeTime;
+      }
+      if (trun) {
+        var parsedTrun = parseTrun(trun);
+        if (parsedTrun.samples && parsedTrun.samples.length) {
+          compositionTimeOffset = parsedTrun.samples[0].compositionTimeOffset || 0;
+        }
+      }
+    } // Get timescale for this specific track. Assume a 90kHz clock if no timescale was
+    // specified.
+
+    var timescale = timescales[trackId] || 90e3; // return the composition start time, in seconds
+
+    if (typeof baseMediaDecodeTime === 'bigint') {
+      compositionTimeOffset = window$1.BigInt(compositionTimeOffset);
+      timescale = window$1.BigInt(timescale);
+    }
+    var result = (baseMediaDecodeTime + compositionTimeOffset) / timescale;
+    if (typeof result === 'bigint' && result < Number.MAX_SAFE_INTEGER) {
+      result = Number(result);
+    }
+    return result;
+  };
+  /**
+    * Find the trackIds of the video tracks in this source.
+    * Found by parsing the Handler Reference and Track Header Boxes:
+    *   moov > trak > mdia > hdlr
+    *   moov > trak > tkhd
+    *
+    * @param {Uint8Array} init - The bytes of the init segment for this source
+    * @return {Number[]} A list of trackIds
+    *
+    * @see ISO-BMFF-12/2015, Section 8.4.3
+   **/
+
+  getVideoTrackIds = function (init) {
+    var traks = findBox(init, ['moov', 'trak']);
+    var videoTrackIds = [];
+    traks.forEach(function (trak) {
+      var hdlrs = findBox(trak, ['mdia', 'hdlr']);
+      var tkhds = findBox(trak, ['tkhd']);
+      hdlrs.forEach(function (hdlr, index) {
+        var handlerType = parseType$1(hdlr.subarray(8, 12));
+        var tkhd = tkhds[index];
+        var view;
+        var version;
+        var trackId;
+        if (handlerType === 'vide') {
+          view = new DataView(tkhd.buffer, tkhd.byteOffset, tkhd.byteLength);
+          version = view.getUint8(0);
+          trackId = version === 0 ? view.getUint32(12) : view.getUint32(20);
+          videoTrackIds.push(trackId);
+        }
+      });
+    });
+    return videoTrackIds;
+  };
+  getTimescaleFromMediaHeader = function (mdhd) {
+    // mdhd is a FullBox, meaning it will have its own version as the first byte
+    var version = mdhd[0];
+    var index = version === 0 ? 12 : 20;
+    return toUnsigned(mdhd[index] << 24 | mdhd[index + 1] << 16 | mdhd[index + 2] << 8 | mdhd[index + 3]);
+  };
+  /**
+   * Get all the video, audio, and hint tracks from a non fragmented
+   * mp4 segment
+   */
+
+  getTracks = function (init) {
+    var traks = findBox(init, ['moov', 'trak']);
+    var tracks = [];
+    traks.forEach(function (trak) {
+      var track = {};
+      var tkhd = findBox(trak, ['tkhd'])[0];
+      var view, tkhdVersion; // id
+
+      if (tkhd) {
+        view = new DataView(tkhd.buffer, tkhd.byteOffset, tkhd.byteLength);
+        tkhdVersion = view.getUint8(0);
+        track.id = tkhdVersion === 0 ? view.getUint32(12) : view.getUint32(20);
+      }
+      var hdlr = findBox(trak, ['mdia', 'hdlr'])[0]; // type
+
+      if (hdlr) {
+        var type = parseType$1(hdlr.subarray(8, 12));
+        if (type === 'vide') {
+          track.type = 'video';
+        } else if (type === 'soun') {
+          track.type = 'audio';
+        } else {
+          track.type = type;
+        }
+      } // codec
+
+      var stsd = findBox(trak, ['mdia', 'minf', 'stbl', 'stsd'])[0];
+      if (stsd) {
+        var sampleDescriptions = stsd.subarray(8); // gives the codec type string
+
+        track.codec = parseType$1(sampleDescriptions.subarray(4, 8));
+        var codecBox = findBox(sampleDescriptions, [track.codec])[0];
+        var codecConfig, codecConfigType;
+        if (codecBox) {
+          // https://tools.ietf.org/html/rfc6381#section-3.3
+          if (/^[asm]vc[1-9]$/i.test(track.codec)) {
+            // we don't need anything but the "config" parameter of the
+            // avc1 codecBox
+            codecConfig = codecBox.subarray(78);
+            codecConfigType = parseType$1(codecConfig.subarray(4, 8));
+            if (codecConfigType === 'avcC' && codecConfig.length > 11) {
+              track.codec += '.'; // left padded with zeroes for single digit hex
+              // profile idc
+
+              track.codec += toHexString(codecConfig[9]); // the byte containing the constraint_set flags
+
+              track.codec += toHexString(codecConfig[10]); // level idc
+
+              track.codec += toHexString(codecConfig[11]);
+            } else {
+              // TODO: show a warning that we couldn't parse the codec
+              // and are using the default
+              track.codec = 'avc1.4d400d';
+            }
+          } else if (/^mp4[a,v]$/i.test(track.codec)) {
+            // we do not need anything but the streamDescriptor of the mp4a codecBox
+            codecConfig = codecBox.subarray(28);
+            codecConfigType = parseType$1(codecConfig.subarray(4, 8));
+            if (codecConfigType === 'esds' && codecConfig.length > 20 && codecConfig[19] !== 0) {
+              track.codec += '.' + toHexString(codecConfig[19]); // this value is only a single digit
+
+              track.codec += '.' + toHexString(codecConfig[20] >>> 2 & 0x3f).replace(/^0/, '');
+            } else {
+              // TODO: show a warning that we couldn't parse the codec
+              // and are using the default
+              track.codec = 'mp4a.40.2';
+            }
+          } else {
+            // flac, opus, etc
+            track.codec = track.codec.toLowerCase();
+          }
+        }
+      }
+      var mdhd = findBox(trak, ['mdia', 'mdhd'])[0];
+      if (mdhd) {
+        track.timescale = getTimescaleFromMediaHeader(mdhd);
+      }
+      tracks.push(track);
+    });
+    return tracks;
+  };
+  /**
+   * Returns an array of emsg ID3 data from the provided segmentData.
+   * An offset can also be provided as the Latest Arrival Time to calculate 
+   * the Event Start Time of v0 EMSG boxes. 
+   * See: https://dashif-documents.azurewebsites.net/Events/master/event.html#Inband-event-timing
+   * 
+   * @param {Uint8Array} segmentData the segment byte array.
+   * @param {number} offset the segment start time or Latest Arrival Time, 
+   * @return {Object[]} an array of ID3 parsed from EMSG boxes
+   */
+
+  getEmsgID3 = function (segmentData, offset = 0) {
+    var emsgBoxes = findBox(segmentData, ['emsg']);
+    return emsgBoxes.map(data => {
+      var parsedBox = emsg.parseEmsgBox(new Uint8Array(data));
+      var parsedId3Frames = parseId3Frames(parsedBox.message_data);
+      return {
+        cueTime: emsg.scaleTime(parsedBox.presentation_time, parsedBox.timescale, parsedBox.presentation_time_delta, offset),
+        duration: emsg.scaleTime(parsedBox.event_duration, parsedBox.timescale),
+        frames: parsedId3Frames
+      };
+    });
+  };
+  var probe$2 = {
+    // export mp4 inspector's findBox and parseType for backwards compatibility
+    findBox: findBox,
+    parseType: parseType$1,
+    timescale: timescale,
+    startTime: startTime,
+    compositionStartTime: compositionStartTime,
+    videoTrackIds: getVideoTrackIds,
+    tracks: getTracks,
+    getTimescaleFromMediaHeader: getTimescaleFromMediaHeader,
+    getEmsgID3: getEmsgID3
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Utilities to detect basic properties and metadata about TS Segments.
+   */
+
+  var StreamTypes$1 = streamTypes;
+  var parsePid = function (packet) {
+    var pid = packet[1] & 0x1f;
+    pid <<= 8;
+    pid |= packet[2];
+    return pid;
+  };
+  var parsePayloadUnitStartIndicator = function (packet) {
+    return !!(packet[1] & 0x40);
+  };
+  var parseAdaptionField = function (packet) {
+    var offset = 0; // if an adaption field is present, its length is specified by the
+    // fifth byte of the TS packet header. The adaptation field is
+    // used to add stuffing to PES packets that don't fill a complete
+    // TS packet, and to specify some forms of timing and control data
+    // that we do not currently use.
+
+    if ((packet[3] & 0x30) >>> 4 > 0x01) {
+      offset += packet[4] + 1;
+    }
+    return offset;
+  };
+  var parseType = function (packet, pmtPid) {
+    var pid = parsePid(packet);
+    if (pid === 0) {
+      return 'pat';
+    } else if (pid === pmtPid) {
+      return 'pmt';
+    } else if (pmtPid) {
+      return 'pes';
+    }
+    return null;
+  };
+  var parsePat = function (packet) {
+    var pusi = parsePayloadUnitStartIndicator(packet);
+    var offset = 4 + parseAdaptionField(packet);
+    if (pusi) {
+      offset += packet[offset] + 1;
+    }
+    return (packet[offset + 10] & 0x1f) << 8 | packet[offset + 11];
+  };
+  var parsePmt = function (packet) {
+    var programMapTable = {};
+    var pusi = parsePayloadUnitStartIndicator(packet);
+    var payloadOffset = 4 + parseAdaptionField(packet);
+    if (pusi) {
+      payloadOffset += packet[payloadOffset] + 1;
+    } // PMTs can be sent ahead of the time when they should actually
+    // take effect. We don't believe this should ever be the case
+    // for HLS but we'll ignore "forward" PMT declarations if we see
+    // them. Future PMT declarations have the current_next_indicator
+    // set to zero.
+
+    if (!(packet[payloadOffset + 5] & 0x01)) {
+      return;
+    }
+    var sectionLength, tableEnd, programInfoLength; // the mapping table ends at the end of the current section
+
+    sectionLength = (packet[payloadOffset + 1] & 0x0f) << 8 | packet[payloadOffset + 2];
+    tableEnd = 3 + sectionLength - 4; // to determine where the table is, we have to figure out how
+    // long the program info descriptors are
+
+    programInfoLength = (packet[payloadOffset + 10] & 0x0f) << 8 | packet[payloadOffset + 11]; // advance the offset to the first entry in the mapping table
+
+    var offset = 12 + programInfoLength;
+    while (offset < tableEnd) {
+      var i = payloadOffset + offset; // add an entry that maps the elementary_pid to the stream_type
+
+      programMapTable[(packet[i + 1] & 0x1F) << 8 | packet[i + 2]] = packet[i]; // move to the next table entry
+      // skip past the elementary stream descriptors, if present
+
+      offset += ((packet[i + 3] & 0x0F) << 8 | packet[i + 4]) + 5;
+    }
+    return programMapTable;
+  };
+  var parsePesType = function (packet, programMapTable) {
+    var pid = parsePid(packet);
+    var type = programMapTable[pid];
+    switch (type) {
+      case StreamTypes$1.H264_STREAM_TYPE:
+        return 'video';
+      case StreamTypes$1.ADTS_STREAM_TYPE:
+        return 'audio';
+      case StreamTypes$1.METADATA_STREAM_TYPE:
+        return 'timed-metadata';
+      default:
+        return null;
+    }
+  };
+  var parsePesTime = function (packet) {
+    var pusi = parsePayloadUnitStartIndicator(packet);
+    if (!pusi) {
+      return null;
+    }
+    var offset = 4 + parseAdaptionField(packet);
+    if (offset >= packet.byteLength) {
+      // From the H 222.0 MPEG-TS spec
+      // "For transport stream packets carrying PES packets, stuffing is needed when there
+      //  is insufficient PES packet data to completely fill the transport stream packet
+      //  payload bytes. Stuffing is accomplished by defining an adaptation field longer than
+      //  the sum of the lengths of the data elements in it, so that the payload bytes
+      //  remaining after the adaptation field exactly accommodates the available PES packet
+      //  data."
+      //
+      // If the offset is >= the length of the packet, then the packet contains no data
+      // and instead is just adaption field stuffing bytes
+      return null;
+    }
+    var pes = null;
+    var ptsDtsFlags; // PES packets may be annotated with a PTS value, or a PTS value
+    // and a DTS value. Determine what combination of values is
+    // available to work with.
+
+    ptsDtsFlags = packet[offset + 7]; // PTS and DTS are normally stored as a 33-bit number.  Javascript
+    // performs all bitwise operations on 32-bit integers but javascript
+    // supports a much greater range (52-bits) of integer using standard
+    // mathematical operations.
+    // We construct a 31-bit value using bitwise operators over the 31
+    // most significant bits and then multiply by 4 (equal to a left-shift
+    // of 2) before we add the final 2 least significant bits of the
+    // timestamp (equal to an OR.)
+
+    if (ptsDtsFlags & 0xC0) {
+      pes = {}; // the PTS and DTS are not written out directly. For information
+      // on how they are encoded, see
+      // http://dvd.sourceforge.net/dvdinfo/pes-hdr.html
+
+      pes.pts = (packet[offset + 9] & 0x0E) << 27 | (packet[offset + 10] & 0xFF) << 20 | (packet[offset + 11] & 0xFE) << 12 | (packet[offset + 12] & 0xFF) << 5 | (packet[offset + 13] & 0xFE) >>> 3;
+      pes.pts *= 4; // Left shift by 2
+
+      pes.pts += (packet[offset + 13] & 0x06) >>> 1; // OR by the two LSBs
+
+      pes.dts = pes.pts;
+      if (ptsDtsFlags & 0x40) {
+        pes.dts = (packet[offset + 14] & 0x0E) << 27 | (packet[offset + 15] & 0xFF) << 20 | (packet[offset + 16] & 0xFE) << 12 | (packet[offset + 17] & 0xFF) << 5 | (packet[offset + 18] & 0xFE) >>> 3;
+        pes.dts *= 4; // Left shift by 2
+
+        pes.dts += (packet[offset + 18] & 0x06) >>> 1; // OR by the two LSBs
+      }
+    }
+
+    return pes;
+  };
+  var parseNalUnitType = function (type) {
+    switch (type) {
+      case 0x05:
+        return 'slice_layer_without_partitioning_rbsp_idr';
+      case 0x06:
+        return 'sei_rbsp';
+      case 0x07:
+        return 'seq_parameter_set_rbsp';
+      case 0x08:
+        return 'pic_parameter_set_rbsp';
+      case 0x09:
+        return 'access_unit_delimiter_rbsp';
+      default:
+        return null;
+    }
+  };
+  var videoPacketContainsKeyFrame = function (packet) {
+    var offset = 4 + parseAdaptionField(packet);
+    var frameBuffer = packet.subarray(offset);
+    var frameI = 0;
+    var frameSyncPoint = 0;
+    var foundKeyFrame = false;
+    var nalType; // advance the sync point to a NAL start, if necessary
+
+    for (; frameSyncPoint < frameBuffer.byteLength - 3; frameSyncPoint++) {
+      if (frameBuffer[frameSyncPoint + 2] === 1) {
+        // the sync point is properly aligned
+        frameI = frameSyncPoint + 5;
+        break;
+      }
+    }
+    while (frameI < frameBuffer.byteLength) {
+      // look at the current byte to determine if we've hit the end of
+      // a NAL unit boundary
+      switch (frameBuffer[frameI]) {
+        case 0:
+          // skip past non-sync sequences
+          if (frameBuffer[frameI - 1] !== 0) {
+            frameI += 2;
+            break;
+          } else if (frameBuffer[frameI - 2] !== 0) {
+            frameI++;
+            break;
+          }
+          if (frameSyncPoint + 3 !== frameI - 2) {
+            nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+            if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+              foundKeyFrame = true;
+            }
+          } // drop trailing zeroes
+
+          do {
+            frameI++;
+          } while (frameBuffer[frameI] !== 1 && frameI < frameBuffer.length);
+          frameSyncPoint = frameI - 2;
+          frameI += 3;
+          break;
+        case 1:
+          // skip past non-sync sequences
+          if (frameBuffer[frameI - 1] !== 0 || frameBuffer[frameI - 2] !== 0) {
+            frameI += 3;
+            break;
+          }
+          nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+          if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+            foundKeyFrame = true;
+          }
+          frameSyncPoint = frameI - 2;
+          frameI += 3;
+          break;
+        default:
+          // the current byte isn't a one or zero, so it cannot be part
+          // of a sync sequence
+          frameI += 3;
+          break;
+      }
+    }
+    frameBuffer = frameBuffer.subarray(frameSyncPoint);
+    frameI -= frameSyncPoint;
+    frameSyncPoint = 0; // parse the final nal
+
+    if (frameBuffer && frameBuffer.byteLength > 3) {
+      nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+      if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+        foundKeyFrame = true;
+      }
+    }
+    return foundKeyFrame;
+  };
+  var probe$1 = {
+    parseType: parseType,
+    parsePat: parsePat,
+    parsePmt: parsePmt,
+    parsePayloadUnitStartIndicator: parsePayloadUnitStartIndicator,
+    parsePesType: parsePesType,
+    parsePesTime: parsePesTime,
+    videoPacketContainsKeyFrame: videoPacketContainsKeyFrame
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Parse mpeg2 transport stream packets to extract basic timing information
+   */
+
+  var StreamTypes = streamTypes;
+  var handleRollover = timestampRolloverStream.handleRollover;
+  var probe = {};
+  probe.ts = probe$1;
+  probe.aac = utils;
+  var ONE_SECOND_IN_TS = clock$2.ONE_SECOND_IN_TS;
+  var MP2T_PACKET_LENGTH = 188,
+    // bytes
+    SYNC_BYTE = 0x47;
+  /**
+   * walks through segment data looking for pat and pmt packets to parse out
+   * program map table information
+   */
+
+  var parsePsi_ = function (bytes, pmt) {
+    var startIndex = 0,
+      endIndex = MP2T_PACKET_LENGTH,
+      packet,
+      type;
+    while (endIndex < bytes.byteLength) {
+      // Look for a pair of start and end sync bytes in the data..
+      if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+        // We found a packet
+        packet = bytes.subarray(startIndex, endIndex);
+        type = probe.ts.parseType(packet, pmt.pid);
+        switch (type) {
+          case 'pat':
+            pmt.pid = probe.ts.parsePat(packet);
+            break;
+          case 'pmt':
+            var table = probe.ts.parsePmt(packet);
+            pmt.table = pmt.table || {};
+            Object.keys(table).forEach(function (key) {
+              pmt.table[key] = table[key];
+            });
+            break;
+        }
+        startIndex += MP2T_PACKET_LENGTH;
+        endIndex += MP2T_PACKET_LENGTH;
+        continue;
+      } // If we get here, we have somehow become de-synchronized and we need to step
+      // forward one byte at a time until we find a pair of sync bytes that denote
+      // a packet
+
+      startIndex++;
+      endIndex++;
+    }
+  };
+  /**
+   * walks through the segment data from the start and end to get timing information
+   * for the first and last audio pes packets
+   */
+
+  var parseAudioPes_ = function (bytes, pmt, result) {
+    var startIndex = 0,
+      endIndex = MP2T_PACKET_LENGTH,
+      packet,
+      type,
+      pesType,
+      pusi,
+      parsed;
+    var endLoop = false; // Start walking from start of segment to get first audio packet
+
+    while (endIndex <= bytes.byteLength) {
+      // Look for a pair of start and end sync bytes in the data..
+      if (bytes[startIndex] === SYNC_BYTE && (bytes[endIndex] === SYNC_BYTE || endIndex === bytes.byteLength)) {
+        // We found a packet
+        packet = bytes.subarray(startIndex, endIndex);
+        type = probe.ts.parseType(packet, pmt.pid);
+        switch (type) {
+          case 'pes':
+            pesType = probe.ts.parsePesType(packet, pmt.table);
+            pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+            if (pesType === 'audio' && pusi) {
+              parsed = probe.ts.parsePesTime(packet);
+              if (parsed) {
+                parsed.type = 'audio';
+                result.audio.push(parsed);
+                endLoop = true;
+              }
+            }
+            break;
+        }
+        if (endLoop) {
+          break;
+        }
+        startIndex += MP2T_PACKET_LENGTH;
+        endIndex += MP2T_PACKET_LENGTH;
+        continue;
+      } // If we get here, we have somehow become de-synchronized and we need to step
+      // forward one byte at a time until we find a pair of sync bytes that denote
+      // a packet
+
+      startIndex++;
+      endIndex++;
+    } // Start walking from end of segment to get last audio packet
+
+    endIndex = bytes.byteLength;
+    startIndex = endIndex - MP2T_PACKET_LENGTH;
+    endLoop = false;
+    while (startIndex >= 0) {
+      // Look for a pair of start and end sync bytes in the data..
+      if (bytes[startIndex] === SYNC_BYTE && (bytes[endIndex] === SYNC_BYTE || endIndex === bytes.byteLength)) {
+        // We found a packet
+        packet = bytes.subarray(startIndex, endIndex);
+        type = probe.ts.parseType(packet, pmt.pid);
+        switch (type) {
+          case 'pes':
+            pesType = probe.ts.parsePesType(packet, pmt.table);
+            pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+            if (pesType === 'audio' && pusi) {
+              parsed = probe.ts.parsePesTime(packet);
+              if (parsed) {
+                parsed.type = 'audio';
+                result.audio.push(parsed);
+                endLoop = true;
+              }
+            }
+            break;
+        }
+        if (endLoop) {
+          break;
+        }
+        startIndex -= MP2T_PACKET_LENGTH;
+        endIndex -= MP2T_PACKET_LENGTH;
+        continue;
+      } // If we get here, we have somehow become de-synchronized and we need to step
+      // forward one byte at a time until we find a pair of sync bytes that denote
+      // a packet
+
+      startIndex--;
+      endIndex--;
+    }
+  };
+  /**
+   * walks through the segment data from the start and end to get timing information
+   * for the first and last video pes packets as well as timing information for the first
+   * key frame.
+   */
+
+  var parseVideoPes_ = function (bytes, pmt, result) {
+    var startIndex = 0,
+      endIndex = MP2T_PACKET_LENGTH,
+      packet,
+      type,
+      pesType,
+      pusi,
+      parsed,
+      frame,
+      i,
+      pes;
+    var endLoop = false;
+    var currentFrame = {
+      data: [],
+      size: 0
+    }; // Start walking from start of segment to get first video packet
+
+    while (endIndex < bytes.byteLength) {
+      // Look for a pair of start and end sync bytes in the data..
+      if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+        // We found a packet
+        packet = bytes.subarray(startIndex, endIndex);
+        type = probe.ts.parseType(packet, pmt.pid);
+        switch (type) {
+          case 'pes':
+            pesType = probe.ts.parsePesType(packet, pmt.table);
+            pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+            if (pesType === 'video') {
+              if (pusi && !endLoop) {
+                parsed = probe.ts.parsePesTime(packet);
+                if (parsed) {
+                  parsed.type = 'video';
+                  result.video.push(parsed);
+                  endLoop = true;
+                }
+              }
+              if (!result.firstKeyFrame) {
+                if (pusi) {
+                  if (currentFrame.size !== 0) {
+                    frame = new Uint8Array(currentFrame.size);
+                    i = 0;
+                    while (currentFrame.data.length) {
+                      pes = currentFrame.data.shift();
+                      frame.set(pes, i);
+                      i += pes.byteLength;
+                    }
+                    if (probe.ts.videoPacketContainsKeyFrame(frame)) {
+                      var firstKeyFrame = probe.ts.parsePesTime(frame); // PTS/DTS may not be available. Simply *not* setting
+                      // the keyframe seems to work fine with HLS playback
+                      // and definitely preferable to a crash with TypeError...
+
+                      if (firstKeyFrame) {
+                        result.firstKeyFrame = firstKeyFrame;
+                        result.firstKeyFrame.type = 'video';
+                      } else {
+                        // eslint-disable-next-line
+                        console.warn('Failed to extract PTS/DTS from PES at first keyframe. ' + 'This could be an unusual TS segment, or else mux.js did not ' + 'parse your TS segment correctly. If you know your TS ' + 'segments do contain PTS/DTS on keyframes please file a bug ' + 'report! You can try ffprobe to double check for yourself.');
+                      }
+                    }
+                    currentFrame.size = 0;
+                  }
+                }
+                currentFrame.data.push(packet);
+                currentFrame.size += packet.byteLength;
+              }
+            }
+            break;
+        }
+        if (endLoop && result.firstKeyFrame) {
+          break;
+        }
+        startIndex += MP2T_PACKET_LENGTH;
+        endIndex += MP2T_PACKET_LENGTH;
+        continue;
+      } // If we get here, we have somehow become de-synchronized and we need to step
+      // forward one byte at a time until we find a pair of sync bytes that denote
+      // a packet
+
+      startIndex++;
+      endIndex++;
+    } // Start walking from end of segment to get last video packet
+
+    endIndex = bytes.byteLength;
+    startIndex = endIndex - MP2T_PACKET_LENGTH;
+    endLoop = false;
+    while (startIndex >= 0) {
+      // Look for a pair of start and end sync bytes in the data..
+      if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+        // We found a packet
+        packet = bytes.subarray(startIndex, endIndex);
+        type = probe.ts.parseType(packet, pmt.pid);
+        switch (type) {
+          case 'pes':
+            pesType = probe.ts.parsePesType(packet, pmt.table);
+            pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+            if (pesType === 'video' && pusi) {
+              parsed = probe.ts.parsePesTime(packet);
+              if (parsed) {
+                parsed.type = 'video';
+                result.video.push(parsed);
+                endLoop = true;
+              }
+            }
+            break;
+        }
+        if (endLoop) {
+          break;
+        }
+        startIndex -= MP2T_PACKET_LENGTH;
+        endIndex -= MP2T_PACKET_LENGTH;
+        continue;
+      } // If we get here, we have somehow become de-synchronized and we need to step
+      // forward one byte at a time until we find a pair of sync bytes that denote
+      // a packet
+
+      startIndex--;
+      endIndex--;
+    }
+  };
+  /**
+   * Adjusts the timestamp information for the segment to account for
+   * rollover and convert to seconds based on pes packet timescale (90khz clock)
+   */
+
+  var adjustTimestamp_ = function (segmentInfo, baseTimestamp) {
+    if (segmentInfo.audio && segmentInfo.audio.length) {
+      var audioBaseTimestamp = baseTimestamp;
+      if (typeof audioBaseTimestamp === 'undefined' || isNaN(audioBaseTimestamp)) {
+        audioBaseTimestamp = segmentInfo.audio[0].dts;
+      }
+      segmentInfo.audio.forEach(function (info) {
+        info.dts = handleRollover(info.dts, audioBaseTimestamp);
+        info.pts = handleRollover(info.pts, audioBaseTimestamp); // time in seconds
+
+        info.dtsTime = info.dts / ONE_SECOND_IN_TS;
+        info.ptsTime = info.pts / ONE_SECOND_IN_TS;
+      });
+    }
+    if (segmentInfo.video && segmentInfo.video.length) {
+      var videoBaseTimestamp = baseTimestamp;
+      if (typeof videoBaseTimestamp === 'undefined' || isNaN(videoBaseTimestamp)) {
+        videoBaseTimestamp = segmentInfo.video[0].dts;
+      }
+      segmentInfo.video.forEach(function (info) {
+        info.dts = handleRollover(info.dts, videoBaseTimestamp);
+        info.pts = handleRollover(info.pts, videoBaseTimestamp); // time in seconds
+
+        info.dtsTime = info.dts / ONE_SECOND_IN_TS;
+        info.ptsTime = info.pts / ONE_SECOND_IN_TS;
+      });
+      if (segmentInfo.firstKeyFrame) {
+        var frame = segmentInfo.firstKeyFrame;
+        frame.dts = handleRollover(frame.dts, videoBaseTimestamp);
+        frame.pts = handleRollover(frame.pts, videoBaseTimestamp); // time in seconds
+
+        frame.dtsTime = frame.dts / ONE_SECOND_IN_TS;
+        frame.ptsTime = frame.pts / ONE_SECOND_IN_TS;
+      }
+    }
+  };
+  /**
+   * inspects the aac data stream for start and end time information
+   */
+
+  var inspectAac_ = function (bytes) {
+    var endLoop = false,
+      audioCount = 0,
+      sampleRate = null,
+      timestamp = null,
+      frameSize = 0,
+      byteIndex = 0,
+      packet;
+    while (bytes.length - byteIndex >= 3) {
+      var type = probe.aac.parseType(bytes, byteIndex);
+      switch (type) {
+        case 'timed-metadata':
+          // Exit early because we don't have enough to parse
+          // the ID3 tag header
+          if (bytes.length - byteIndex < 10) {
+            endLoop = true;
+            break;
+          }
+          frameSize = probe.aac.parseId3TagSize(bytes, byteIndex); // Exit early if we don't have enough in the buffer
+          // to emit a full packet
+
+          if (frameSize > bytes.length) {
+            endLoop = true;
+            break;
+          }
+          if (timestamp === null) {
+            packet = bytes.subarray(byteIndex, byteIndex + frameSize);
+            timestamp = probe.aac.parseAacTimestamp(packet);
+          }
+          byteIndex += frameSize;
+          break;
+        case 'audio':
+          // Exit early because we don't have enough to parse
+          // the ADTS frame header
+          if (bytes.length - byteIndex < 7) {
+            endLoop = true;
+            break;
+          }
+          frameSize = probe.aac.parseAdtsSize(bytes, byteIndex); // Exit early if we don't have enough in the buffer
+          // to emit a full packet
+
+          if (frameSize > bytes.length) {
+            endLoop = true;
+            break;
+          }
+          if (sampleRate === null) {
+            packet = bytes.subarray(byteIndex, byteIndex + frameSize);
+            sampleRate = probe.aac.parseSampleRate(packet);
+          }
+          audioCount++;
+          byteIndex += frameSize;
+          break;
+        default:
+          byteIndex++;
+          break;
+      }
+      if (endLoop) {
+        return null;
+      }
+    }
+    if (sampleRate === null || timestamp === null) {
+      return null;
+    }
+    var audioTimescale = ONE_SECOND_IN_TS / sampleRate;
+    var result = {
+      audio: [{
+        type: 'audio',
+        dts: timestamp,
+        pts: timestamp
+      }, {
+        type: 'audio',
+        dts: timestamp + audioCount * 1024 * audioTimescale,
+        pts: timestamp + audioCount * 1024 * audioTimescale
+      }]
+    };
+    return result;
+  };
+  /**
+   * inspects the transport stream segment data for start and end time information
+   * of the audio and video tracks (when present) as well as the first key frame's
+   * start time.
+   */
+
+  var inspectTs_ = function (bytes) {
+    var pmt = {
+      pid: null,
+      table: null
+    };
+    var result = {};
+    parsePsi_(bytes, pmt);
+    for (var pid in pmt.table) {
+      if (pmt.table.hasOwnProperty(pid)) {
+        var type = pmt.table[pid];
+        switch (type) {
+          case StreamTypes.H264_STREAM_TYPE:
+            result.video = [];
+            parseVideoPes_(bytes, pmt, result);
+            if (result.video.length === 0) {
+              delete result.video;
+            }
+            break;
+          case StreamTypes.ADTS_STREAM_TYPE:
+            result.audio = [];
+            parseAudioPes_(bytes, pmt, result);
+            if (result.audio.length === 0) {
+              delete result.audio;
+            }
+            break;
+        }
+      }
+    }
+    return result;
+  };
+  /**
+   * Inspects segment byte data and returns an object with start and end timing information
+   *
+   * @param {Uint8Array} bytes The segment byte data
+   * @param {Number} baseTimestamp Relative reference timestamp used when adjusting frame
+   *  timestamps for rollover. This value must be in 90khz clock.
+   * @return {Object} Object containing start and end frame timing info of segment.
+   */
+
+  var inspect = function (bytes, baseTimestamp) {
+    var isAacData = probe.aac.isLikelyAacData(bytes);
+    var result;
+    if (isAacData) {
+      result = inspectAac_(bytes);
+    } else {
+      result = inspectTs_(bytes);
+    }
+    if (!result || !result.audio && !result.video) {
+      return null;
+    }
+    adjustTimestamp_(result, baseTimestamp);
+    return result;
+  };
+  var tsInspector = {
+    inspect: inspect,
+    parseAudioPes_: parseAudioPes_
+  };
+  /* global self */
+
+  /**
+   * Re-emits transmuxer events by converting them into messages to the
+   * world outside the worker.
+   *
+   * @param {Object} transmuxer the transmuxer to wire events on
+   * @private
+   */
+
+  const wireTransmuxerEvents = function (self, transmuxer) {
+    transmuxer.on('data', function (segment) {
+      // transfer ownership of the underlying ArrayBuffer
+      // instead of doing a copy to save memory
+      // ArrayBuffers are transferable but generic TypedArrays are not
+      // @link https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Passing_data_by_transferring_ownership_(transferable_objects)
+      const initArray = segment.initSegment;
+      segment.initSegment = {
+        data: initArray.buffer,
+        byteOffset: initArray.byteOffset,
+        byteLength: initArray.byteLength
+      };
+      const typedArray = segment.data;
+      segment.data = typedArray.buffer;
+      self.postMessage({
+        action: 'data',
+        segment,
+        byteOffset: typedArray.byteOffset,
+        byteLength: typedArray.byteLength
+      }, [segment.data]);
+    });
+    transmuxer.on('done', function (data) {
+      self.postMessage({
+        action: 'done'
+      });
+    });
+    transmuxer.on('gopInfo', function (gopInfo) {
+      self.postMessage({
+        action: 'gopInfo',
+        gopInfo
+      });
+    });
+    transmuxer.on('videoSegmentTimingInfo', function (timingInfo) {
+      const videoSegmentTimingInfo = {
+        start: {
+          decode: clock$2.videoTsToSeconds(timingInfo.start.dts),
+          presentation: clock$2.videoTsToSeconds(timingInfo.start.pts)
+        },
+        end: {
+          decode: clock$2.videoTsToSeconds(timingInfo.end.dts),
+          presentation: clock$2.videoTsToSeconds(timingInfo.end.pts)
+        },
+        baseMediaDecodeTime: clock$2.videoTsToSeconds(timingInfo.baseMediaDecodeTime)
+      };
+      if (timingInfo.prependedContentDuration) {
+        videoSegmentTimingInfo.prependedContentDuration = clock$2.videoTsToSeconds(timingInfo.prependedContentDuration);
+      }
+      self.postMessage({
+        action: 'videoSegmentTimingInfo',
+        videoSegmentTimingInfo
+      });
+    });
+    transmuxer.on('audioSegmentTimingInfo', function (timingInfo) {
+      // Note that all times for [audio/video]SegmentTimingInfo events are in video clock
+      const audioSegmentTimingInfo = {
+        start: {
+          decode: clock$2.videoTsToSeconds(timingInfo.start.dts),
+          presentation: clock$2.videoTsToSeconds(timingInfo.start.pts)
+        },
+        end: {
+          decode: clock$2.videoTsToSeconds(timingInfo.end.dts),
+          presentation: clock$2.videoTsToSeconds(timingInfo.end.pts)
+        },
+        baseMediaDecodeTime: clock$2.videoTsToSeconds(timingInfo.baseMediaDecodeTime)
+      };
+      if (timingInfo.prependedContentDuration) {
+        audioSegmentTimingInfo.prependedContentDuration = clock$2.videoTsToSeconds(timingInfo.prependedContentDuration);
+      }
+      self.postMessage({
+        action: 'audioSegmentTimingInfo',
+        audioSegmentTimingInfo
+      });
+    });
+    transmuxer.on('id3Frame', function (id3Frame) {
+      self.postMessage({
+        action: 'id3Frame',
+        id3Frame
+      });
+    });
+    transmuxer.on('caption', function (caption) {
+      self.postMessage({
+        action: 'caption',
+        caption
+      });
+    });
+    transmuxer.on('trackinfo', function (trackInfo) {
+      self.postMessage({
+        action: 'trackinfo',
+        trackInfo
+      });
+    });
+    transmuxer.on('audioTimingInfo', function (audioTimingInfo) {
+      // convert to video TS since we prioritize video time over audio
+      self.postMessage({
+        action: 'audioTimingInfo',
+        audioTimingInfo: {
+          start: clock$2.videoTsToSeconds(audioTimingInfo.start),
+          end: clock$2.videoTsToSeconds(audioTimingInfo.end)
+        }
+      });
+    });
+    transmuxer.on('videoTimingInfo', function (videoTimingInfo) {
+      self.postMessage({
+        action: 'videoTimingInfo',
+        videoTimingInfo: {
+          start: clock$2.videoTsToSeconds(videoTimingInfo.start),
+          end: clock$2.videoTsToSeconds(videoTimingInfo.end)
+        }
+      });
+    });
+    transmuxer.on('log', function (log) {
+      self.postMessage({
+        action: 'log',
+        log
+      });
+    });
+  };
+  /**
+   * All incoming messages route through this hash. If no function exists
+   * to handle an incoming message, then we ignore the message.
+   *
+   * @class MessageHandlers
+   * @param {Object} options the options to initialize with
+   */
+
+  class MessageHandlers {
+    constructor(self, options) {
+      this.options = options || {};
+      this.self = self;
+      this.init();
+    }
+    /**
+     * initialize our web worker and wire all the events.
+     */
+
+    init() {
+      if (this.transmuxer) {
+        this.transmuxer.dispose();
+      }
+      this.transmuxer = new transmuxer.Transmuxer(this.options);
+      wireTransmuxerEvents(this.self, this.transmuxer);
+    }
+    pushMp4Captions(data) {
+      if (!this.captionParser) {
+        this.captionParser = new captionParser();
+        this.captionParser.init();
+      }
+      const segment = new Uint8Array(data.data, data.byteOffset, data.byteLength);
+      const parsed = this.captionParser.parse(segment, data.trackIds, data.timescales);
+      this.self.postMessage({
+        action: 'mp4Captions',
+        captions: parsed && parsed.captions || [],
+        logs: parsed && parsed.logs || [],
+        data: segment.buffer
+      }, [segment.buffer]);
+    }
+    probeMp4StartTime({
+      timescales,
+      data
+    }) {
+      const startTime = probe$2.startTime(timescales, data);
+      this.self.postMessage({
+        action: 'probeMp4StartTime',
+        startTime,
+        data
+      }, [data.buffer]);
+    }
+    probeMp4Tracks({
+      data
+    }) {
+      const tracks = probe$2.tracks(data);
+      this.self.postMessage({
+        action: 'probeMp4Tracks',
+        tracks,
+        data
+      }, [data.buffer]);
+    }
+    /**
+     * Probes an mp4 segment for EMSG boxes containing ID3 data.
+     * https://aomediacodec.github.io/id3-emsg/
+     *
+     * @param {Uint8Array} data segment data
+     * @param {number} offset segment start time
+     * @return {Object[]} an array of ID3 frames
+     */
+
+    probeEmsgID3({
+      data,
+      offset
+    }) {
+      const id3Frames = probe$2.getEmsgID3(data, offset);
+      this.self.postMessage({
+        action: 'probeEmsgID3',
+        id3Frames,
+        emsgData: data
+      }, [data.buffer]);
+    }
+    /**
+     * Probe an mpeg2-ts segment to determine the start time of the segment in it's
+     * internal "media time," as well as whether it contains video and/or audio.
+     *
+     * @private
+     * @param {Uint8Array} bytes - segment bytes
+     * @param {number} baseStartTime
+     *        Relative reference timestamp used when adjusting frame timestamps for rollover.
+     *        This value should be in seconds, as it's converted to a 90khz clock within the
+     *        function body.
+     * @return {Object} The start time of the current segment in "media time" as well as
+     *                  whether it contains video and/or audio
+     */
+
+    probeTs({
+      data,
+      baseStartTime
+    }) {
+      const tsStartTime = typeof baseStartTime === 'number' && !isNaN(baseStartTime) ? baseStartTime * clock$2.ONE_SECOND_IN_TS : void 0;
+      const timeInfo = tsInspector.inspect(data, tsStartTime);
+      let result = null;
+      if (timeInfo) {
+        result = {
+          // each type's time info comes back as an array of 2 times, start and end
+          hasVideo: timeInfo.video && timeInfo.video.length === 2 || false,
+          hasAudio: timeInfo.audio && timeInfo.audio.length === 2 || false
+        };
+        if (result.hasVideo) {
+          result.videoStart = timeInfo.video[0].ptsTime;
+        }
+        if (result.hasAudio) {
+          result.audioStart = timeInfo.audio[0].ptsTime;
+        }
+      }
+      this.self.postMessage({
+        action: 'probeTs',
+        result,
+        data
+      }, [data.buffer]);
+    }
+    clearAllMp4Captions() {
+      if (this.captionParser) {
+        this.captionParser.clearAllCaptions();
+      }
+    }
+    clearParsedMp4Captions() {
+      if (this.captionParser) {
+        this.captionParser.clearParsedCaptions();
+      }
+    }
+    /**
+     * Adds data (a ts segment) to the start of the transmuxer pipeline for
+     * processing.
+     *
+     * @param {ArrayBuffer} data data to push into the muxer
+     */
+
+    push(data) {
+      // Cast array buffer to correct type for transmuxer
+      const segment = new Uint8Array(data.data, data.byteOffset, data.byteLength);
+      this.transmuxer.push(segment);
+    }
+    /**
+     * Recreate the transmuxer so that the next segment added via `push`
+     * start with a fresh transmuxer.
+     */
+
+    reset() {
+      this.transmuxer.reset();
+    }
+    /**
+     * Set the value that will be used as the `baseMediaDecodeTime` time for the
+     * next segment pushed in. Subsequent segments will have their `baseMediaDecodeTime`
+     * set relative to the first based on the PTS values.
+     *
+     * @param {Object} data used to set the timestamp offset in the muxer
+     */
+
+    setTimestampOffset(data) {
+      const timestampOffset = data.timestampOffset || 0;
+      this.transmuxer.setBaseMediaDecodeTime(Math.round(clock$2.secondsToVideoTs(timestampOffset)));
+    }
+    setAudioAppendStart(data) {
+      this.transmuxer.setAudioAppendStart(Math.ceil(clock$2.secondsToVideoTs(data.appendStart)));
+    }
+    setRemux(data) {
+      this.transmuxer.setRemux(data.remux);
+    }
+    /**
+     * Forces the pipeline to finish processing the last segment and emit it's
+     * results.
+     *
+     * @param {Object} data event data, not really used
+     */
+
+    flush(data) {
+      this.transmuxer.flush(); // transmuxed done action is fired after both audio/video pipelines are flushed
+
+      self.postMessage({
+        action: 'done',
+        type: 'transmuxed'
+      });
+    }
+    endTimeline() {
+      this.transmuxer.endTimeline(); // transmuxed endedtimeline action is fired after both audio/video pipelines end their
+      // timelines
+
+      self.postMessage({
+        action: 'endedtimeline',
+        type: 'transmuxed'
+      });
+    }
+    alignGopsWith(data) {
+      this.transmuxer.alignGopsWith(data.gopsToAlignWith.slice());
+    }
+  }
+  /**
+   * Our web worker interface so that things can talk to mux.js
+   * that will be running in a web worker. the scope is passed to this by
+   * webworkify.
+   *
+   * @param {Object} self the scope for the web worker
+   */
+
+  self.onmessage = function (event) {
+    if (event.data.action === 'init' && event.data.options) {
+      this.messageHandlers = new MessageHandlers(self, event.data.options);
+      return;
+    }
+    if (!this.messageHandlers) {
+      this.messageHandlers = new MessageHandlers(self);
+    }
+    if (event.data && event.data.action && event.data.action !== 'init') {
+      if (this.messageHandlers[event.data.action]) {
+        this.messageHandlers[event.data.action](event.data);
+      }
+    }
+  };
+}));
+var TransmuxWorker = factory(workerCode$1);
+/* rollup-plugin-worker-factory end for worker!/home/runner/work/http-streaming/http-streaming/src/transmuxer-worker.js */
+
+const handleData_ = (event, transmuxedData, callback) => {
+  const {
+    type,
+    initSegment,
+    captions,
+    captionStreams,
+    metadata,
+    videoFrameDtsTime,
+    videoFramePtsTime
+  } = event.data.segment;
+  transmuxedData.buffer.push({
+    captions,
+    captionStreams,
+    metadata
+  });
+  const boxes = event.data.segment.boxes || {
+    data: event.data.segment.data
+  };
+  const result = {
+    type,
+    // cast ArrayBuffer to TypedArray
+    data: new Uint8Array(boxes.data, boxes.data.byteOffset, boxes.data.byteLength),
+    initSegment: new Uint8Array(initSegment.data, initSegment.byteOffset, initSegment.byteLength)
+  };
+  if (typeof videoFrameDtsTime !== 'undefined') {
+    result.videoFrameDtsTime = videoFrameDtsTime;
+  }
+  if (typeof videoFramePtsTime !== 'undefined') {
+    result.videoFramePtsTime = videoFramePtsTime;
+  }
+  callback(result);
+};
+const handleDone_ = ({
+  transmuxedData,
+  callback
+}) => {
+  // Previously we only returned data on data events,
+  // not on done events. Clear out the buffer to keep that consistent.
+  transmuxedData.buffer = []; // all buffers should have been flushed from the muxer, so start processing anything we
+  // have received
+
+  callback(transmuxedData);
+};
+const handleGopInfo_ = (event, transmuxedData) => {
+  transmuxedData.gopInfo = event.data.gopInfo;
+};
+const processTransmux = options => {
+  const {
+    transmuxer,
+    bytes,
+    audioAppendStart,
+    gopsToAlignWith,
+    remux,
+    onData,
+    onTrackInfo,
+    onAudioTimingInfo,
+    onVideoTimingInfo,
+    onVideoSegmentTimingInfo,
+    onAudioSegmentTimingInfo,
+    onId3,
+    onCaptions,
+    onDone,
+    onEndedTimeline,
+    onTransmuxerLog,
+    isEndOfTimeline
+  } = options;
+  const transmuxedData = {
+    buffer: []
+  };
+  let waitForEndedTimelineEvent = isEndOfTimeline;
+  const handleMessage = event => {
+    if (transmuxer.currentTransmux !== options) {
+      // disposed
+      return;
+    }
+    if (event.data.action === 'data') {
+      handleData_(event, transmuxedData, onData);
+    }
+    if (event.data.action === 'trackinfo') {
+      onTrackInfo(event.data.trackInfo);
+    }
+    if (event.data.action === 'gopInfo') {
+      handleGopInfo_(event, transmuxedData);
+    }
+    if (event.data.action === 'audioTimingInfo') {
+      onAudioTimingInfo(event.data.audioTimingInfo);
+    }
+    if (event.data.action === 'videoTimingInfo') {
+      onVideoTimingInfo(event.data.videoTimingInfo);
+    }
+    if (event.data.action === 'videoSegmentTimingInfo') {
+      onVideoSegmentTimingInfo(event.data.videoSegmentTimingInfo);
+    }
+    if (event.data.action === 'audioSegmentTimingInfo') {
+      onAudioSegmentTimingInfo(event.data.audioSegmentTimingInfo);
+    }
+    if (event.data.action === 'id3Frame') {
+      onId3([event.data.id3Frame], event.data.id3Frame.dispatchType);
+    }
+    if (event.data.action === 'caption') {
+      onCaptions(event.data.caption);
+    }
+    if (event.data.action === 'endedtimeline') {
+      waitForEndedTimelineEvent = false;
+      onEndedTimeline();
+    }
+    if (event.data.action === 'log') {
+      onTransmuxerLog(event.data.log);
+    } // wait for the transmuxed event since we may have audio and video
+
+    if (event.data.type !== 'transmuxed') {
+      return;
+    } // If the "endedtimeline" event has not yet fired, and this segment represents the end
+    // of a timeline, that means there may still be data events before the segment
+    // processing can be considerred complete. In that case, the final event should be
+    // an "endedtimeline" event with the type "transmuxed."
+
+    if (waitForEndedTimelineEvent) {
+      return;
+    }
+    transmuxer.onmessage = null;
+    handleDone_({
+      transmuxedData,
+      callback: onDone
+    });
+    /* eslint-disable no-use-before-define */
+
+    dequeue(transmuxer);
+    /* eslint-enable */
+  };
+
+  transmuxer.onmessage = handleMessage;
+  if (audioAppendStart) {
+    transmuxer.postMessage({
+      action: 'setAudioAppendStart',
+      appendStart: audioAppendStart
+    });
+  } // allow empty arrays to be passed to clear out GOPs
+
+  if (Array.isArray(gopsToAlignWith)) {
+    transmuxer.postMessage({
+      action: 'alignGopsWith',
+      gopsToAlignWith
+    });
+  }
+  if (typeof remux !== 'undefined') {
+    transmuxer.postMessage({
+      action: 'setRemux',
+      remux
+    });
+  }
+  if (bytes.byteLength) {
+    const buffer = bytes instanceof ArrayBuffer ? bytes : bytes.buffer;
+    const byteOffset = bytes instanceof ArrayBuffer ? 0 : bytes.byteOffset;
+    transmuxer.postMessage({
+      action: 'push',
+      // Send the typed-array of data as an ArrayBuffer so that
+      // it can be sent as a "Transferable" and avoid the costly
+      // memory copy
+      data: buffer,
+      // To recreate the original typed-array, we need information
+      // about what portion of the ArrayBuffer it was a view into
+      byteOffset,
+      byteLength: bytes.byteLength
+    }, [buffer]);
+  }
+  if (isEndOfTimeline) {
+    transmuxer.postMessage({
+      action: 'endTimeline'
+    });
+  } // even if we didn't push any bytes, we have to make sure we flush in case we reached
+  // the end of the segment
+
+  transmuxer.postMessage({
+    action: 'flush'
+  });
+};
+const dequeue = transmuxer => {
+  transmuxer.currentTransmux = null;
+  if (transmuxer.transmuxQueue.length) {
+    transmuxer.currentTransmux = transmuxer.transmuxQueue.shift();
+    if (typeof transmuxer.currentTransmux === 'function') {
+      transmuxer.currentTransmux();
+    } else {
+      processTransmux(transmuxer.currentTransmux);
+    }
+  }
+};
+const processAction = (transmuxer, action) => {
+  transmuxer.postMessage({
+    action
+  });
+  dequeue(transmuxer);
+};
+const enqueueAction = (action, transmuxer) => {
+  if (!transmuxer.currentTransmux) {
+    transmuxer.currentTransmux = action;
+    processAction(transmuxer, action);
+    return;
+  }
+  transmuxer.transmuxQueue.push(processAction.bind(null, transmuxer, action));
+};
+const reset = transmuxer => {
+  enqueueAction('reset', transmuxer);
+};
+const endTimeline = transmuxer => {
+  enqueueAction('endTimeline', transmuxer);
+};
+const transmux = options => {
+  if (!options.transmuxer.currentTransmux) {
+    options.transmuxer.currentTransmux = options;
+    processTransmux(options);
+    return;
+  }
+  options.transmuxer.transmuxQueue.push(options);
+};
+const createTransmuxer = options => {
+  const transmuxer = new TransmuxWorker();
+  transmuxer.currentTransmux = null;
+  transmuxer.transmuxQueue = [];
+  const term = transmuxer.terminate;
+  transmuxer.terminate = () => {
+    transmuxer.currentTransmux = null;
+    transmuxer.transmuxQueue.length = 0;
+    return term.call(transmuxer);
+  };
+  transmuxer.postMessage({
+    action: 'init',
+    options
+  });
+  return transmuxer;
+};
+var segmentTransmuxer = {
+  reset,
+  endTimeline,
+  transmux,
+  createTransmuxer
+};
+const workerCallback = function (options) {
+  const transmuxer = options.transmuxer;
+  const endAction = options.endAction || options.action;
+  const callback = options.callback;
+  const message = _extends__default["default"]({}, options, {
+    endAction: null,
+    transmuxer: null,
+    callback: null
+  });
+  const listenForEndEvent = event => {
+    if (event.data.action !== endAction) {
+      return;
+    }
+    transmuxer.removeEventListener('message', listenForEndEvent); // transfer ownership of bytes back to us.
+
+    if (event.data.data) {
+      event.data.data = new Uint8Array(event.data.data, options.byteOffset || 0, options.byteLength || event.data.data.byteLength);
+      if (options.data) {
+        options.data = event.data.data;
+      }
+    }
+    callback(event.data);
+  };
+  transmuxer.addEventListener('message', listenForEndEvent);
+  if (options.data) {
+    const isArrayBuffer = options.data instanceof ArrayBuffer;
+    message.byteOffset = isArrayBuffer ? 0 : options.data.byteOffset;
+    message.byteLength = options.data.byteLength;
+    const transfers = [isArrayBuffer ? options.data : options.data.buffer];
+    transmuxer.postMessage(message, transfers);
+  } else {
+    transmuxer.postMessage(message);
+  }
+};
+const REQUEST_ERRORS = {
+  FAILURE: 2,
+  TIMEOUT: -101,
+  ABORTED: -102
+};
+/**
+ * Abort all requests
+ *
+ * @param {Object} activeXhrs - an object that tracks all XHR requests
+ */
+
+const abortAll = activeXhrs => {
+  activeXhrs.forEach(xhr => {
+    xhr.abort();
+  });
+};
+/**
+ * Gather important bandwidth stats once a request has completed
+ *
+ * @param {Object} request - the XHR request from which to gather stats
+ */
+
+const getRequestStats = request => {
+  return {
+    bandwidth: request.bandwidth,
+    bytesReceived: request.bytesReceived || 0,
+    roundTripTime: request.roundTripTime || 0
+  };
+};
+/**
+ * If possible gather bandwidth stats as a request is in
+ * progress
+ *
+ * @param {Event} progressEvent - an event object from an XHR's progress event
+ */
+
+const getProgressStats = progressEvent => {
+  const request = progressEvent.target;
+  const roundTripTime = Date.now() - request.requestTime;
+  const stats = {
+    bandwidth: Infinity,
+    bytesReceived: 0,
+    roundTripTime: roundTripTime || 0
+  };
+  stats.bytesReceived = progressEvent.loaded; // This can result in Infinity if stats.roundTripTime is 0 but that is ok
+  // because we should only use bandwidth stats on progress to determine when
+  // abort a request early due to insufficient bandwidth
+
+  stats.bandwidth = Math.floor(stats.bytesReceived / stats.roundTripTime * 8 * 1000);
+  return stats;
+};
+/**
+ * Handle all error conditions in one place and return an object
+ * with all the information
+ *
+ * @param {Error|null} error - if non-null signals an error occured with the XHR
+ * @param {Object} request -  the XHR request that possibly generated the error
+ */
+
+const handleErrors = (error, request) => {
+  if (request.timedout) {
+    return {
+      status: request.status,
+      message: 'HLS request timed-out at URL: ' + request.uri,
+      code: REQUEST_ERRORS.TIMEOUT,
+      xhr: request
+    };
+  }
+  if (request.aborted) {
+    return {
+      status: request.status,
+      message: 'HLS request aborted at URL: ' + request.uri,
+      code: REQUEST_ERRORS.ABORTED,
+      xhr: request
+    };
+  }
+  if (error) {
+    return {
+      status: request.status,
+      message: 'HLS request errored at URL: ' + request.uri,
+      code: REQUEST_ERRORS.FAILURE,
+      xhr: request
+    };
+  }
+  if (request.responseType === 'arraybuffer' && request.response.byteLength === 0) {
+    return {
+      status: request.status,
+      message: 'Empty HLS response at URL: ' + request.uri,
+      code: REQUEST_ERRORS.FAILURE,
+      xhr: request
+    };
+  }
+  return null;
+};
+/**
+ * Handle responses for key data and convert the key data to the correct format
+ * for the decryption step later
+ *
+ * @param {Object} segment - a simplified copy of the segmentInfo object
+ *                           from SegmentLoader
+ * @param {Array} objects - objects to add the key bytes to.
+ * @param {Function} finishProcessingFn - a callback to execute to continue processing
+ *                                        this request
+ */
+
+const handleKeyResponse = (segment, objects, finishProcessingFn) => (error, request) => {
+  const response = request.response;
+  const errorObj = handleErrors(error, request);
+  if (errorObj) {
+    return finishProcessingFn(errorObj, segment);
+  }
+  if (response.byteLength !== 16) {
+    return finishProcessingFn({
+      status: request.status,
+      message: 'Invalid HLS key at URL: ' + request.uri,
+      code: REQUEST_ERRORS.FAILURE,
+      xhr: request
+    }, segment);
+  }
+  const view = new DataView(response);
+  const bytes = new Uint32Array([view.getUint32(0), view.getUint32(4), view.getUint32(8), view.getUint32(12)]);
+  for (let i = 0; i < objects.length; i++) {
+    objects[i].bytes = bytes;
+  }
+  return finishProcessingFn(null, segment);
+};
+const parseInitSegment = (segment, callback) => {
+  const type = containers.detectContainerForBytes(segment.map.bytes); // TODO: We should also handle ts init segments here, but we
+  // only know how to parse mp4 init segments at the moment
+
+  if (type !== 'mp4') {
+    const uri = segment.map.resolvedUri || segment.map.uri;
+    const mediaType = type || 'unknown';
+    return callback({
+      internal: true,
+      message: `Found unsupported ${mediaType} container for initialization segment at URL: ${uri}`,
+      code: REQUEST_ERRORS.FAILURE,
+      metadata: {
+        errorType: videojs.Error.UnsupportedMediaInitialization,
+        mediaType
+      }
+    });
+  }
+  workerCallback({
+    action: 'probeMp4Tracks',
+    data: segment.map.bytes,
+    transmuxer: segment.transmuxer,
+    callback: ({
+      tracks,
+      data
+    }) => {
+      // transfer bytes back to us
+      segment.map.bytes = data;
+      tracks.forEach(function (track) {
+        segment.map.tracks = segment.map.tracks || {}; // only support one track of each type for now
+
+        if (segment.map.tracks[track.type]) {
+          return;
+        }
+        segment.map.tracks[track.type] = track;
+        if (typeof track.id === 'number' && track.timescale) {
+          segment.map.timescales = segment.map.timescales || {};
+          segment.map.timescales[track.id] = track.timescale;
+        }
+      });
+      return callback(null);
+    }
+  });
+};
+/**
+ * Handle init-segment responses
+ *
+ * @param {Object} segment - a simplified copy of the segmentInfo object
+ *                           from SegmentLoader
+ * @param {Function} finishProcessingFn - a callback to execute to continue processing
+ *                                        this request
+ */
+
+const handleInitSegmentResponse = ({
+  segment,
+  finishProcessingFn
+}) => (error, request) => {
+  const errorObj = handleErrors(error, request);
+  if (errorObj) {
+    return finishProcessingFn(errorObj, segment);
+  }
+  const bytes = new Uint8Array(request.response); // init segment is encypted, we will have to wait
+  // until the key request is done to decrypt.
+
+  if (segment.map.key) {
+    segment.map.encryptedBytes = bytes;
+    return finishProcessingFn(null, segment);
+  }
+  segment.map.bytes = bytes;
+  parseInitSegment(segment, function (parseError) {
+    if (parseError) {
+      parseError.xhr = request;
+      parseError.status = request.status;
+      return finishProcessingFn(parseError, segment);
+    }
+    finishProcessingFn(null, segment);
+  });
+};
+/**
+ * Response handler for segment-requests being sure to set the correct
+ * property depending on whether the segment is encryped or not
+ * Also records and keeps track of stats that are used for ABR purposes
+ *
+ * @param {Object} segment - a simplified copy of the segmentInfo object
+ *                           from SegmentLoader
+ * @param {Function} finishProcessingFn - a callback to execute to continue processing
+ *                                        this request
+ */
+
+const handleSegmentResponse = ({
+  segment,
+  finishProcessingFn,
+  responseType
+}) => (error, request) => {
+  const errorObj = handleErrors(error, request);
+  if (errorObj) {
+    return finishProcessingFn(errorObj, segment);
+  }
+  const newBytes =
+  // although responseText "should" exist, this guard serves to prevent an error being
+  // thrown for two primary cases:
+  // 1. the mime type override stops working, or is not implemented for a specific
+  //    browser
+  // 2. when using mock XHR libraries like sinon that do not allow the override behavior
+  responseType === 'arraybuffer' || !request.responseText ? request.response : stringToArrayBuffer(request.responseText.substring(segment.lastReachedChar || 0));
+  segment.stats = getRequestStats(request);
+  if (segment.key) {
+    segment.encryptedBytes = new Uint8Array(newBytes);
+  } else {
+    segment.bytes = new Uint8Array(newBytes);
+  }
+  return finishProcessingFn(null, segment);
+};
+const transmuxAndNotify = ({
+  segment,
+  bytes,
+  trackInfoFn,
+  timingInfoFn,
+  videoSegmentTimingInfoFn,
+  audioSegmentTimingInfoFn,
+  id3Fn,
+  captionsFn,
+  isEndOfTimeline,
+  endedTimelineFn,
+  dataFn,
+  doneFn,
+  onTransmuxerLog
+}) => {
+  const fmp4Tracks = segment.map && segment.map.tracks || {};
+  const isMuxed = Boolean(fmp4Tracks.audio && fmp4Tracks.video); // Keep references to each function so we can null them out after we're done with them.
+  // One reason for this is that in the case of full segments, we want to trust start
+  // times from the probe, rather than the transmuxer.
+
+  let audioStartFn = timingInfoFn.bind(null, segment, 'audio', 'start');
+  const audioEndFn = timingInfoFn.bind(null, segment, 'audio', 'end');
+  let videoStartFn = timingInfoFn.bind(null, segment, 'video', 'start');
+  const videoEndFn = timingInfoFn.bind(null, segment, 'video', 'end');
+  const finish = () => transmux({
+    bytes,
+    transmuxer: segment.transmuxer,
+    audioAppendStart: segment.audioAppendStart,
+    gopsToAlignWith: segment.gopsToAlignWith,
+    remux: isMuxed,
+    onData: result => {
+      result.type = result.type === 'combined' ? 'video' : result.type;
+      dataFn(segment, result);
+    },
+    onTrackInfo: trackInfo => {
+      if (trackInfoFn) {
+        if (isMuxed) {
+          trackInfo.isMuxed = true;
+        }
+        trackInfoFn(segment, trackInfo);
+      }
+    },
+    onAudioTimingInfo: audioTimingInfo => {
+      // we only want the first start value we encounter
+      if (audioStartFn && typeof audioTimingInfo.start !== 'undefined') {
+        audioStartFn(audioTimingInfo.start);
+        audioStartFn = null;
+      } // we want to continually update the end time
+
+      if (audioEndFn && typeof audioTimingInfo.end !== 'undefined') {
+        audioEndFn(audioTimingInfo.end);
+      }
+    },
+    onVideoTimingInfo: videoTimingInfo => {
+      // we only want the first start value we encounter
+      if (videoStartFn && typeof videoTimingInfo.start !== 'undefined') {
+        videoStartFn(videoTimingInfo.start);
+        videoStartFn = null;
+      } // we want to continually update the end time
+
+      if (videoEndFn && typeof videoTimingInfo.end !== 'undefined') {
+        videoEndFn(videoTimingInfo.end);
+      }
+    },
+    onVideoSegmentTimingInfo: videoSegmentTimingInfo => {
+      videoSegmentTimingInfoFn(videoSegmentTimingInfo);
+    },
+    onAudioSegmentTimingInfo: audioSegmentTimingInfo => {
+      audioSegmentTimingInfoFn(audioSegmentTimingInfo);
+    },
+    onId3: (id3Frames, dispatchType) => {
+      id3Fn(segment, id3Frames, dispatchType);
+    },
+    onCaptions: captions => {
+      captionsFn(segment, [captions]);
+    },
+    isEndOfTimeline,
+    onEndedTimeline: () => {
+      endedTimelineFn();
+    },
+    onTransmuxerLog,
+    onDone: result => {
+      if (!doneFn) {
+        return;
+      }
+      result.type = result.type === 'combined' ? 'video' : result.type;
+      doneFn(null, segment, result);
+    }
+  }); // In the transmuxer, we don't yet have the ability to extract a "proper" start time.
+  // Meaning cached frame data may corrupt our notion of where this segment
+  // really starts. To get around this, probe for the info needed.
+
+  workerCallback({
+    action: 'probeTs',
+    transmuxer: segment.transmuxer,
+    data: bytes,
+    baseStartTime: segment.baseStartTime,
+    callback: data => {
+      segment.bytes = bytes = data.data;
+      const probeResult = data.result;
+      if (probeResult) {
+        trackInfoFn(segment, {
+          hasAudio: probeResult.hasAudio,
+          hasVideo: probeResult.hasVideo,
+          isMuxed
+        });
+        trackInfoFn = null;
+      }
+      finish();
+    }
+  });
+};
+const handleSegmentBytes = ({
+  segment,
+  bytes,
+  trackInfoFn,
+  timingInfoFn,
+  videoSegmentTimingInfoFn,
+  audioSegmentTimingInfoFn,
+  id3Fn,
+  captionsFn,
+  isEndOfTimeline,
+  endedTimelineFn,
+  dataFn,
+  doneFn,
+  onTransmuxerLog
+}) => {
+  let bytesAsUint8Array = new Uint8Array(bytes); // TODO:
+  // We should have a handler that fetches the number of bytes required
+  // to check if something is fmp4. This will allow us to save bandwidth
+  // because we can only exclude a playlist and abort requests
+  // by codec after trackinfo triggers.
+
+  if (containers.isLikelyFmp4MediaSegment(bytesAsUint8Array)) {
+    segment.isFmp4 = true;
+    const {
+      tracks
+    } = segment.map;
+    const trackInfo = {
+      isFmp4: true,
+      hasVideo: !!tracks.video,
+      hasAudio: !!tracks.audio
+    }; // if we have a audio track, with a codec that is not set to
+    // encrypted audio
+
+    if (tracks.audio && tracks.audio.codec && tracks.audio.codec !== 'enca') {
+      trackInfo.audioCodec = tracks.audio.codec;
+    } // if we have a video track, with a codec that is not set to
+    // encrypted video
+
+    if (tracks.video && tracks.video.codec && tracks.video.codec !== 'encv') {
+      trackInfo.videoCodec = tracks.video.codec;
+    }
+    if (tracks.video && tracks.audio) {
+      trackInfo.isMuxed = true;
+    } // since we don't support appending fmp4 data on progress, we know we have the full
+    // segment here
+
+    trackInfoFn(segment, trackInfo); // The probe doesn't provide the segment end time, so only callback with the start
+    // time. The end time can be roughly calculated by the receiver using the duration.
+    //
+    // Note that the start time returned by the probe reflects the baseMediaDecodeTime, as
+    // that is the true start of the segment (where the playback engine should begin
+    // decoding).
+
+    const finishLoading = (captions, id3Frames) => {
+      // if the track still has audio at this point it is only possible
+      // for it to be audio only. See `tracks.video && tracks.audio` if statement
+      // above.
+      // we make sure to use segment.bytes here as that
+      dataFn(segment, {
+        data: bytesAsUint8Array,
+        type: trackInfo.hasAudio && !trackInfo.isMuxed ? 'audio' : 'video'
+      });
+      if (id3Frames && id3Frames.length) {
+        id3Fn(segment, id3Frames);
+      }
+      if (captions && captions.length) {
+        captionsFn(segment, captions);
+      }
+      doneFn(null, segment, {});
+    };
+    workerCallback({
+      action: 'probeMp4StartTime',
+      timescales: segment.map.timescales,
+      data: bytesAsUint8Array,
+      transmuxer: segment.transmuxer,
+      callback: ({
+        data,
+        startTime
+      }) => {
+        // transfer bytes back to us
+        bytes = data.buffer;
+        segment.bytes = bytesAsUint8Array = data;
+        if (trackInfo.hasAudio && !trackInfo.isMuxed) {
+          timingInfoFn(segment, 'audio', 'start', startTime);
+        }
+        if (trackInfo.hasVideo) {
+          timingInfoFn(segment, 'video', 'start', startTime);
+        }
+        workerCallback({
+          action: 'probeEmsgID3',
+          data: bytesAsUint8Array,
+          transmuxer: segment.transmuxer,
+          offset: startTime,
+          callback: ({
+            emsgData,
+            id3Frames
+          }) => {
+            // transfer bytes back to us
+            bytes = emsgData.buffer;
+            segment.bytes = bytesAsUint8Array = emsgData; // Run through the CaptionParser in case there are captions.
+            // Initialize CaptionParser if it hasn't been yet
+
+            if (!tracks.video || !emsgData.byteLength || !segment.transmuxer) {
+              finishLoading(undefined, id3Frames);
+              return;
+            }
+            workerCallback({
+              action: 'pushMp4Captions',
+              endAction: 'mp4Captions',
+              transmuxer: segment.transmuxer,
+              data: bytesAsUint8Array,
+              timescales: segment.map.timescales,
+              trackIds: [tracks.video.id],
+              callback: message => {
+                // transfer bytes back to us
+                bytes = message.data.buffer;
+                segment.bytes = bytesAsUint8Array = message.data;
+                message.logs.forEach(function (log) {
+                  onTransmuxerLog(merge(log, {
+                    stream: 'mp4CaptionParser'
+                  }));
+                });
+                finishLoading(message.captions, id3Frames);
+              }
+            });
+          }
+        });
+      }
+    });
+    return;
+  } // VTT or other segments that don't need processing
+
+  if (!segment.transmuxer) {
+    doneFn(null, segment, {});
+    return;
+  }
+  if (typeof segment.container === 'undefined') {
+    segment.container = containers.detectContainerForBytes(bytesAsUint8Array);
+  }
+  if (segment.container !== 'ts' && segment.container !== 'aac') {
+    trackInfoFn(segment, {
+      hasAudio: false,
+      hasVideo: false
+    });
+    doneFn(null, segment, {});
+    return;
+  } // ts or aac
+
+  transmuxAndNotify({
+    segment,
+    bytes,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  });
+};
+const decrypt = function ({
+  id,
+  key,
+  encryptedBytes,
+  decryptionWorker
+}, callback) {
+  const decryptionHandler = event => {
+    if (event.data.source === id) {
+      decryptionWorker.removeEventListener('message', decryptionHandler);
+      const decrypted = event.data.decrypted;
+      callback(new Uint8Array(decrypted.bytes, decrypted.byteOffset, decrypted.byteLength));
+    }
+  };
+  decryptionWorker.addEventListener('message', decryptionHandler);
+  let keyBytes;
+  if (key.bytes.slice) {
+    keyBytes = key.bytes.slice();
+  } else {
+    keyBytes = new Uint32Array(Array.prototype.slice.call(key.bytes));
+  } // incrementally decrypt the bytes
+
+  decryptionWorker.postMessage(createTransferableMessage({
+    source: id,
+    encrypted: encryptedBytes,
+    key: keyBytes,
+    iv: key.iv
+  }), [encryptedBytes.buffer, keyBytes.buffer]);
+};
+/**
+ * Decrypt the segment via the decryption web worker
+ *
+ * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128 decryption
+ *                                       routines
+ * @param {Object} segment - a simplified copy of the segmentInfo object
+ *                           from SegmentLoader
+ * @param {Function} trackInfoFn - a callback that receives track info
+ * @param {Function} timingInfoFn - a callback that receives timing info
+ * @param {Function} videoSegmentTimingInfoFn
+ *                   a callback that receives video timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {Function} audioSegmentTimingInfoFn
+ *                   a callback that receives audio timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {boolean}  isEndOfTimeline
+ *                   true if this segment represents the last segment in a timeline
+ * @param {Function} endedTimelineFn
+ *                   a callback made when a timeline is ended, will only be called if
+ *                   isEndOfTimeline is true
+ * @param {Function} dataFn - a callback that is executed when segment bytes are available
+ *                            and ready to use
+ * @param {Function} doneFn - a callback that is executed after decryption has completed
+ */
+
+const decryptSegment = ({
+  decryptionWorker,
+  segment,
+  trackInfoFn,
+  timingInfoFn,
+  videoSegmentTimingInfoFn,
+  audioSegmentTimingInfoFn,
+  id3Fn,
+  captionsFn,
+  isEndOfTimeline,
+  endedTimelineFn,
+  dataFn,
+  doneFn,
+  onTransmuxerLog
+}) => {
+  decrypt({
+    id: segment.requestId,
+    key: segment.key,
+    encryptedBytes: segment.encryptedBytes,
+    decryptionWorker
+  }, decryptedBytes => {
+    segment.bytes = decryptedBytes;
+    handleSegmentBytes({
+      segment,
+      bytes: segment.bytes,
+      trackInfoFn,
+      timingInfoFn,
+      videoSegmentTimingInfoFn,
+      audioSegmentTimingInfoFn,
+      id3Fn,
+      captionsFn,
+      isEndOfTimeline,
+      endedTimelineFn,
+      dataFn,
+      doneFn,
+      onTransmuxerLog
+    });
+  });
+};
+/**
+ * This function waits for all XHRs to finish (with either success or failure)
+ * before continueing processing via it's callback. The function gathers errors
+ * from each request into a single errors array so that the error status for
+ * each request can be examined later.
+ *
+ * @param {Object} activeXhrs - an object that tracks all XHR requests
+ * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128 decryption
+ *                                       routines
+ * @param {Function} trackInfoFn - a callback that receives track info
+ * @param {Function} timingInfoFn - a callback that receives timing info
+ * @param {Function} videoSegmentTimingInfoFn
+ *                   a callback that receives video timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {Function} audioSegmentTimingInfoFn
+ *                   a callback that receives audio timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {Function} id3Fn - a callback that receives ID3 metadata
+ * @param {Function} captionsFn - a callback that receives captions
+ * @param {boolean}  isEndOfTimeline
+ *                   true if this segment represents the last segment in a timeline
+ * @param {Function} endedTimelineFn
+ *                   a callback made when a timeline is ended, will only be called if
+ *                   isEndOfTimeline is true
+ * @param {Function} dataFn - a callback that is executed when segment bytes are available
+ *                            and ready to use
+ * @param {Function} doneFn - a callback that is executed after all resources have been
+ *                            downloaded and any decryption completed
+ */
+
+const waitForCompletion = ({
+  activeXhrs,
+  decryptionWorker,
+  trackInfoFn,
+  timingInfoFn,
+  videoSegmentTimingInfoFn,
+  audioSegmentTimingInfoFn,
+  id3Fn,
+  captionsFn,
+  isEndOfTimeline,
+  endedTimelineFn,
+  dataFn,
+  doneFn,
+  onTransmuxerLog
+}) => {
+  let count = 0;
+  let didError = false;
+  return (error, segment) => {
+    if (didError) {
+      return;
+    }
+    if (error) {
+      didError = true; // If there are errors, we have to abort any outstanding requests
+
+      abortAll(activeXhrs); // Even though the requests above are aborted, and in theory we could wait until we
+      // handle the aborted events from those requests, there are some cases where we may
+      // never get an aborted event. For instance, if the network connection is lost and
+      // there were two requests, the first may have triggered an error immediately, while
+      // the second request remains unsent. In that case, the aborted algorithm will not
+      // trigger an abort: see https://xhr.spec.whatwg.org/#the-abort()-method
+      //
+      // We also can't rely on the ready state of the XHR, since the request that
+      // triggered the connection error may also show as a ready state of 0 (unsent).
+      // Therefore, we have to finish this group of requests immediately after the first
+      // seen error.
+
+      return doneFn(error, segment);
+    }
+    count += 1;
+    if (count === activeXhrs.length) {
+      const segmentFinish = function () {
+        if (segment.encryptedBytes) {
+          return decryptSegment({
+            decryptionWorker,
+            segment,
+            trackInfoFn,
+            timingInfoFn,
+            videoSegmentTimingInfoFn,
+            audioSegmentTimingInfoFn,
+            id3Fn,
+            captionsFn,
+            isEndOfTimeline,
+            endedTimelineFn,
+            dataFn,
+            doneFn,
+            onTransmuxerLog
+          });
+        } // Otherwise, everything is ready just continue
+
+        handleSegmentBytes({
+          segment,
+          bytes: segment.bytes,
+          trackInfoFn,
+          timingInfoFn,
+          videoSegmentTimingInfoFn,
+          audioSegmentTimingInfoFn,
+          id3Fn,
+          captionsFn,
+          isEndOfTimeline,
+          endedTimelineFn,
+          dataFn,
+          doneFn,
+          onTransmuxerLog
+        });
+      }; // Keep track of when *all* of the requests have completed
+
+      segment.endOfAllRequests = Date.now();
+      if (segment.map && segment.map.encryptedBytes && !segment.map.bytes) {
+        return decrypt({
+          decryptionWorker,
+          // add -init to the "id" to differentiate between segment
+          // and init segment decryption, just in case they happen
+          // at the same time at some point in the future.
+          id: segment.requestId + '-init',
+          encryptedBytes: segment.map.encryptedBytes,
+          key: segment.map.key
+        }, decryptedBytes => {
+          segment.map.bytes = decryptedBytes;
+          parseInitSegment(segment, parseError => {
+            if (parseError) {
+              abortAll(activeXhrs);
+              return doneFn(parseError, segment);
+            }
+            segmentFinish();
+          });
+        });
+      }
+      segmentFinish();
+    }
+  };
+};
+/**
+ * Calls the abort callback if any request within the batch was aborted. Will only call
+ * the callback once per batch of requests, even if multiple were aborted.
+ *
+ * @param {Object} loadendState - state to check to see if the abort function was called
+ * @param {Function} abortFn - callback to call for abort
+ */
+
+const handleLoadEnd = ({
+  loadendState,
+  abortFn
+}) => event => {
+  const request = event.target;
+  if (request.aborted && abortFn && !loadendState.calledAbortFn) {
+    abortFn();
+    loadendState.calledAbortFn = true;
+  }
+};
+/**
+ * Simple progress event callback handler that gathers some stats before
+ * executing a provided callback with the `segment` object
+ *
+ * @param {Object} segment - a simplified copy of the segmentInfo object
+ *                           from SegmentLoader
+ * @param {Function} progressFn - a callback that is executed each time a progress event
+ *                                is received
+ * @param {Function} trackInfoFn - a callback that receives track info
+ * @param {Function} timingInfoFn - a callback that receives timing info
+ * @param {Function} videoSegmentTimingInfoFn
+ *                   a callback that receives video timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {Function} audioSegmentTimingInfoFn
+ *                   a callback that receives audio timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {boolean}  isEndOfTimeline
+ *                   true if this segment represents the last segment in a timeline
+ * @param {Function} endedTimelineFn
+ *                   a callback made when a timeline is ended, will only be called if
+ *                   isEndOfTimeline is true
+ * @param {Function} dataFn - a callback that is executed when segment bytes are available
+ *                            and ready to use
+ * @param {Event} event - the progress event object from XMLHttpRequest
+ */
+
+const handleProgress = ({
+  segment,
+  progressFn,
+  trackInfoFn,
+  timingInfoFn,
+  videoSegmentTimingInfoFn,
+  audioSegmentTimingInfoFn,
+  id3Fn,
+  captionsFn,
+  isEndOfTimeline,
+  endedTimelineFn,
+  dataFn
+}) => event => {
+  const request = event.target;
+  if (request.aborted) {
+    return;
+  }
+  segment.stats = merge(segment.stats, getProgressStats(event)); // record the time that we receive the first byte of data
+
+  if (!segment.stats.firstBytesReceivedAt && segment.stats.bytesReceived) {
+    segment.stats.firstBytesReceivedAt = Date.now();
+  }
+  return progressFn(event, segment);
+};
+/**
+ * Load all resources and does any processing necessary for a media-segment
+ *
+ * Features:
+ *   decrypts the media-segment if it has a key uri and an iv
+ *   aborts *all* requests if *any* one request fails
+ *
+ * The segment object, at minimum, has the following format:
+ * {
+ *   resolvedUri: String,
+ *   [transmuxer]: Object,
+ *   [byterange]: {
+ *     offset: Number,
+ *     length: Number
+ *   },
+ *   [key]: {
+ *     resolvedUri: String
+ *     [byterange]: {
+ *       offset: Number,
+ *       length: Number
+ *     },
+ *     iv: {
+ *       bytes: Uint32Array
+ *     }
+ *   },
+ *   [map]: {
+ *     resolvedUri: String,
+ *     [byterange]: {
+ *       offset: Number,
+ *       length: Number
+ *     },
+ *     [bytes]: Uint8Array
+ *   }
+ * }
+ * ...where [name] denotes optional properties
+ *
+ * @param {Function} xhr - an instance of the xhr wrapper in xhr.js
+ * @param {Object} xhrOptions - the base options to provide to all xhr requests
+ * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128
+ *                                       decryption routines
+ * @param {Object} segment - a simplified copy of the segmentInfo object
+ *                           from SegmentLoader
+ * @param {Function} abortFn - a callback called (only once) if any piece of a request was
+ *                             aborted
+ * @param {Function} progressFn - a callback that receives progress events from the main
+ *                                segment's xhr request
+ * @param {Function} trackInfoFn - a callback that receives track info
+ * @param {Function} timingInfoFn - a callback that receives timing info
+ * @param {Function} videoSegmentTimingInfoFn
+ *                   a callback that receives video timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {Function} audioSegmentTimingInfoFn
+ *                   a callback that receives audio timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {Function} id3Fn - a callback that receives ID3 metadata
+ * @param {Function} captionsFn - a callback that receives captions
+ * @param {boolean}  isEndOfTimeline
+ *                   true if this segment represents the last segment in a timeline
+ * @param {Function} endedTimelineFn
+ *                   a callback made when a timeline is ended, will only be called if
+ *                   isEndOfTimeline is true
+ * @param {Function} dataFn - a callback that receives data from the main segment's xhr
+ *                            request, transmuxed if needed
+ * @param {Function} doneFn - a callback that is executed only once all requests have
+ *                            succeeded or failed
+ * @return {Function} a function that, when invoked, immediately aborts all
+ *                     outstanding requests
+ */
+
+const mediaSegmentRequest = ({
+  xhr,
+  xhrOptions,
+  decryptionWorker,
+  segment,
+  abortFn,
+  progressFn,
+  trackInfoFn,
+  timingInfoFn,
+  videoSegmentTimingInfoFn,
+  audioSegmentTimingInfoFn,
+  id3Fn,
+  captionsFn,
+  isEndOfTimeline,
+  endedTimelineFn,
+  dataFn,
+  doneFn,
+  onTransmuxerLog
+}) => {
+  const activeXhrs = [];
+  const finishProcessingFn = waitForCompletion({
+    activeXhrs,
+    decryptionWorker,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }); // optionally, request the decryption key
+
+  if (segment.key && !segment.key.bytes) {
+    const objects = [segment.key];
+    if (segment.map && !segment.map.bytes && segment.map.key && segment.map.key.resolvedUri === segment.key.resolvedUri) {
+      objects.push(segment.map.key);
+    }
+    const keyRequestOptions = merge(xhrOptions, {
+      uri: segment.key.resolvedUri,
+      responseType: 'arraybuffer',
+      requestType: 'segment-key'
+    });
+    const keyRequestCallback = handleKeyResponse(segment, objects, finishProcessingFn);
+    const keyXhr = xhr(keyRequestOptions, keyRequestCallback);
+    activeXhrs.push(keyXhr);
+  } // optionally, request the associated media init segment
+
+  if (segment.map && !segment.map.bytes) {
+    const differentMapKey = segment.map.key && (!segment.key || segment.key.resolvedUri !== segment.map.key.resolvedUri);
+    if (differentMapKey) {
+      const mapKeyRequestOptions = merge(xhrOptions, {
+        uri: segment.map.key.resolvedUri,
+        responseType: 'arraybuffer',
+        requestType: 'segment-key'
+      });
+      const mapKeyRequestCallback = handleKeyResponse(segment, [segment.map.key], finishProcessingFn);
+      const mapKeyXhr = xhr(mapKeyRequestOptions, mapKeyRequestCallback);
+      activeXhrs.push(mapKeyXhr);
+    }
+    const initSegmentOptions = merge(xhrOptions, {
+      uri: segment.map.resolvedUri,
+      responseType: 'arraybuffer',
+      headers: segmentXhrHeaders(segment.map),
+      requestType: 'segment-media-initialization'
+    });
+    const initSegmentRequestCallback = handleInitSegmentResponse({
+      segment,
+      finishProcessingFn
+    });
+    const initSegmentXhr = xhr(initSegmentOptions, initSegmentRequestCallback);
+    activeXhrs.push(initSegmentXhr);
+  }
+  const segmentRequestOptions = merge(xhrOptions, {
+    uri: segment.part && segment.part.resolvedUri || segment.resolvedUri,
+    responseType: 'arraybuffer',
+    headers: segmentXhrHeaders(segment),
+    requestType: 'segment'
+  });
+  const segmentRequestCallback = handleSegmentResponse({
+    segment,
+    finishProcessingFn,
+    responseType: segmentRequestOptions.responseType
+  });
+  const segmentXhr = xhr(segmentRequestOptions, segmentRequestCallback);
+  segmentXhr.addEventListener('progress', handleProgress({
+    segment,
+    progressFn,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn
+  }));
+  activeXhrs.push(segmentXhr); // since all parts of the request must be considered, but should not make callbacks
+  // multiple times, provide a shared state object
+
+  const loadendState = {};
+  activeXhrs.forEach(activeXhr => {
+    activeXhr.addEventListener('loadend', handleLoadEnd({
+      loadendState,
+      abortFn
+    }));
+  });
+  return () => abortAll(activeXhrs);
+};
+
+/**
+ * @file - codecs.js - Handles tasks regarding codec strings such as translating them to
+ * codec strings, or translating codec strings into objects that can be examined.
+ */
+const logFn$1 = logger('CodecUtils');
+/**
+ * Returns a set of codec strings parsed from the playlist or the default
+ * codec strings if no codecs were specified in the playlist
+ *
+ * @param {Playlist} media the current media playlist
+ * @return {Object} an object with the video and audio codecs
+ */
+
+const getCodecs = function (media) {
+  // if the codecs were explicitly specified, use them instead of the
+  // defaults
+  const mediaAttributes = media.attributes || {};
+  if (mediaAttributes.CODECS) {
+    return codecs_js.parseCodecs(mediaAttributes.CODECS);
+  }
+};
+const isMaat = (main, media) => {
+  const mediaAttributes = media.attributes || {};
+  return main && main.mediaGroups && main.mediaGroups.AUDIO && mediaAttributes.AUDIO && main.mediaGroups.AUDIO[mediaAttributes.AUDIO];
+};
+const isMuxed = (main, media) => {
+  if (!isMaat(main, media)) {
+    return true;
+  }
+  const mediaAttributes = media.attributes || {};
+  const audioGroup = main.mediaGroups.AUDIO[mediaAttributes.AUDIO];
+  for (const groupId in audioGroup) {
+    // If an audio group has a URI (the case for HLS, as HLS will use external playlists),
+    // or there are listed playlists (the case for DASH, as the manifest will have already
+    // provided all of the details necessary to generate the audio playlist, as opposed to
+    // HLS' externally requested playlists), then the content is demuxed.
+    if (!audioGroup[groupId].uri && !audioGroup[groupId].playlists) {
+      return true;
+    }
+  }
+  return false;
+};
+const unwrapCodecList = function (codecList) {
+  const codecs = {};
+  codecList.forEach(({
+    mediaType,
+    type,
+    details
+  }) => {
+    codecs[mediaType] = codecs[mediaType] || [];
+    codecs[mediaType].push(codecs_js.translateLegacyCodec(`${type}${details}`));
+  });
+  Object.keys(codecs).forEach(function (mediaType) {
+    if (codecs[mediaType].length > 1) {
+      logFn$1(`multiple ${mediaType} codecs found as attributes: ${codecs[mediaType].join(', ')}. Setting playlist codecs to null so that we wait for mux.js to probe segments for real codecs.`);
+      codecs[mediaType] = null;
+      return;
+    }
+    codecs[mediaType] = codecs[mediaType][0];
+  });
+  return codecs;
+};
+const codecCount = function (codecObj) {
+  let count = 0;
+  if (codecObj.audio) {
+    count++;
+  }
+  if (codecObj.video) {
+    count++;
+  }
+  return count;
+};
+/**
+ * Calculates the codec strings for a working configuration of
+ * SourceBuffers to play variant streams in a main playlist. If
+ * there is no possible working configuration, an empty object will be
+ * returned.
+ *
+ * @param main {Object} the m3u8 object for the main playlist
+ * @param media {Object} the m3u8 object for the variant playlist
+ * @return {Object} the codec strings.
+ *
+ * @private
+ */
+
+const codecsForPlaylist = function (main, media) {
+  const mediaAttributes = media.attributes || {};
+  const codecInfo = unwrapCodecList(getCodecs(media) || []); // HLS with multiple-audio tracks must always get an audio codec.
+  // Put another way, there is no way to have a video-only multiple-audio HLS!
+
+  if (isMaat(main, media) && !codecInfo.audio) {
+    if (!isMuxed(main, media)) {
+      // It is possible for codecs to be specified on the audio media group playlist but
+      // not on the rendition playlist. This is mostly the case for DASH, where audio and
+      // video are always separate (and separately specified).
+      const defaultCodecs = unwrapCodecList(codecs_js.codecsFromDefault(main, mediaAttributes.AUDIO) || []);
+      if (defaultCodecs.audio) {
+        codecInfo.audio = defaultCodecs.audio;
+      }
+    }
+  }
+  return codecInfo;
+};
+const logFn = logger('PlaylistSelector');
+const representationToString = function (representation) {
+  if (!representation || !representation.playlist) {
+    return;
+  }
+  const playlist = representation.playlist;
+  return JSON.stringify({
+    id: playlist.id,
+    bandwidth: representation.bandwidth,
+    width: representation.width,
+    height: representation.height,
+    codecs: playlist.attributes && playlist.attributes.CODECS || ''
+  });
+}; // Utilities
+
+/**
+ * Returns the CSS value for the specified property on an element
+ * using `getComputedStyle`. Firefox has a long-standing issue where
+ * getComputedStyle() may return null when running in an iframe with
+ * `display: none`.
+ *
+ * @see https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+ * @param {HTMLElement} el the htmlelement to work on
+ * @param {string} the proprety to get the style for
+ */
+
+const safeGetComputedStyle = function (el, property) {
+  if (!el) {
+    return '';
+  }
+  const result = window__default["default"].getComputedStyle(el);
+  if (!result) {
+    return '';
+  }
+  return result[property];
+};
+/**
+ * Resuable stable sort function
+ *
+ * @param {Playlists} array
+ * @param {Function} sortFn Different comparators
+ * @function stableSort
+ */
+
+const stableSort = function (array, sortFn) {
+  const newArray = array.slice();
+  array.sort(function (left, right) {
+    const cmp = sortFn(left, right);
+    if (cmp === 0) {
+      return newArray.indexOf(left) - newArray.indexOf(right);
+    }
+    return cmp;
+  });
+};
+/**
+ * A comparator function to sort two playlist object by bandwidth.
+ *
+ * @param {Object} left a media playlist object
+ * @param {Object} right a media playlist object
+ * @return {number} Greater than zero if the bandwidth attribute of
+ * left is greater than the corresponding attribute of right. Less
+ * than zero if the bandwidth of right is greater than left and
+ * exactly zero if the two are equal.
+ */
+
+const comparePlaylistBandwidth = function (left, right) {
+  let leftBandwidth;
+  let rightBandwidth;
+  if (left.attributes.BANDWIDTH) {
+    leftBandwidth = left.attributes.BANDWIDTH;
+  }
+  leftBandwidth = leftBandwidth || window__default["default"].Number.MAX_VALUE;
+  if (right.attributes.BANDWIDTH) {
+    rightBandwidth = right.attributes.BANDWIDTH;
+  }
+  rightBandwidth = rightBandwidth || window__default["default"].Number.MAX_VALUE;
+  return leftBandwidth - rightBandwidth;
+};
+/**
+ * A comparator function to sort two playlist object by resolution (width).
+ *
+ * @param {Object} left a media playlist object
+ * @param {Object} right a media playlist object
+ * @return {number} Greater than zero if the resolution.width attribute of
+ * left is greater than the corresponding attribute of right. Less
+ * than zero if the resolution.width of right is greater than left and
+ * exactly zero if the two are equal.
+ */
+
+const comparePlaylistResolution = function (left, right) {
+  let leftWidth;
+  let rightWidth;
+  if (left.attributes.RESOLUTION && left.attributes.RESOLUTION.width) {
+    leftWidth = left.attributes.RESOLUTION.width;
+  }
+  leftWidth = leftWidth || window__default["default"].Number.MAX_VALUE;
+  if (right.attributes.RESOLUTION && right.attributes.RESOLUTION.width) {
+    rightWidth = right.attributes.RESOLUTION.width;
+  }
+  rightWidth = rightWidth || window__default["default"].Number.MAX_VALUE; // NOTE - Fallback to bandwidth sort as appropriate in cases where multiple renditions
+  // have the same media dimensions/ resolution
+
+  if (leftWidth === rightWidth && left.attributes.BANDWIDTH && right.attributes.BANDWIDTH) {
+    return left.attributes.BANDWIDTH - right.attributes.BANDWIDTH;
+  }
+  return leftWidth - rightWidth;
+};
+/**
+ * Chooses the appropriate media playlist based on bandwidth and player size
+ *
+ * @param {Object} main
+ *        Object representation of the main manifest
+ * @param {number} playerBandwidth
+ *        Current calculated bandwidth of the player
+ * @param {number} playerWidth
+ *        Current width of the player element (should account for the device pixel ratio)
+ * @param {number} playerHeight
+ *        Current height of the player element (should account for the device pixel ratio)
+ * @param {boolean} limitRenditionByPlayerDimensions
+ *        True if the player width and height should be used during the selection, false otherwise
+ * @param {Object} playlistController
+ *        the current playlistController object
+ * @return {Playlist} the highest bitrate playlist less than the
+ * currently detected bandwidth, accounting for some amount of
+ * bandwidth variance
+ */
+
+let simpleSelector = function (main, playerBandwidth, playerWidth, playerHeight, limitRenditionByPlayerDimensions, playlistController) {
+  // If we end up getting called before `main` is available, exit early
+  if (!main) {
+    return;
+  }
+  const options = {
+    bandwidth: playerBandwidth,
+    width: playerWidth,
+    height: playerHeight,
+    limitRenditionByPlayerDimensions
+  };
+  let playlists = main.playlists; // if playlist is audio only, select between currently active audio group playlists.
+
+  if (Playlist.isAudioOnly(main)) {
+    playlists = playlistController.getAudioTrackPlaylists_(); // add audioOnly to options so that we log audioOnly: true
+    // at the buttom of this function for debugging.
+
+    options.audioOnly = true;
+  } // convert the playlists to an intermediary representation to make comparisons easier
+
+  let sortedPlaylistReps = playlists.map(playlist => {
+    let bandwidth;
+    const width = playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.width;
+    const height = playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.height;
+    bandwidth = playlist.attributes && playlist.attributes.BANDWIDTH;
+    bandwidth = bandwidth || window__default["default"].Number.MAX_VALUE;
+    return {
+      bandwidth,
+      width,
+      height,
+      playlist
+    };
+  });
+  stableSort(sortedPlaylistReps, (left, right) => left.bandwidth - right.bandwidth); // filter out any playlists that have been excluded due to
+  // incompatible configurations
+
+  sortedPlaylistReps = sortedPlaylistReps.filter(rep => !Playlist.isIncompatible(rep.playlist)); // filter out any playlists that have been disabled manually through the representations
+  // api or excluded temporarily due to playback errors.
+
+  let enabledPlaylistReps = sortedPlaylistReps.filter(rep => Playlist.isEnabled(rep.playlist));
+  if (!enabledPlaylistReps.length) {
+    // if there are no enabled playlists, then they have all been excluded or disabled
+    // by the user through the representations api. In this case, ignore exclusion and
+    // fallback to what the user wants by using playlists the user has not disabled.
+    enabledPlaylistReps = sortedPlaylistReps.filter(rep => !Playlist.isDisabled(rep.playlist));
+  } // filter out any variant that has greater effective bitrate
+  // than the current estimated bandwidth
+
+  const bandwidthPlaylistReps = enabledPlaylistReps.filter(rep => rep.bandwidth * Config.BANDWIDTH_VARIANCE < playerBandwidth);
+  let highestRemainingBandwidthRep = bandwidthPlaylistReps[bandwidthPlaylistReps.length - 1]; // get all of the renditions with the same (highest) bandwidth
+  // and then taking the very first element
+
+  const bandwidthBestRep = bandwidthPlaylistReps.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0]; // if we're not going to limit renditions by player size, make an early decision.
+
+  if (limitRenditionByPlayerDimensions === false) {
+    const chosenRep = bandwidthBestRep || enabledPlaylistReps[0] || sortedPlaylistReps[0];
+    if (chosenRep && chosenRep.playlist) {
+      let type = 'sortedPlaylistReps';
+      if (bandwidthBestRep) {
+        type = 'bandwidthBestRep';
+      }
+      if (enabledPlaylistReps[0]) {
+        type = 'enabledPlaylistReps';
+      }
+      logFn(`choosing ${representationToString(chosenRep)} using ${type} with options`, options);
+      return chosenRep.playlist;
+    }
+    logFn('could not choose a playlist with options', options);
+    return null;
+  } // filter out playlists without resolution information
+
+  const haveResolution = bandwidthPlaylistReps.filter(rep => rep.width && rep.height); // sort variants by resolution
+
+  stableSort(haveResolution, (left, right) => left.width - right.width); // if we have the exact resolution as the player use it
+
+  const resolutionBestRepList = haveResolution.filter(rep => rep.width === playerWidth && rep.height === playerHeight);
+  highestRemainingBandwidthRep = resolutionBestRepList[resolutionBestRepList.length - 1]; // ensure that we pick the highest bandwidth variant that have exact resolution
+
+  const resolutionBestRep = resolutionBestRepList.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0];
+  let resolutionPlusOneList;
+  let resolutionPlusOneSmallest;
+  let resolutionPlusOneRep; // find the smallest variant that is larger than the player
+  // if there is no match of exact resolution
+
+  if (!resolutionBestRep) {
+    resolutionPlusOneList = haveResolution.filter(rep => rep.width > playerWidth || rep.height > playerHeight); // find all the variants have the same smallest resolution
+
+    resolutionPlusOneSmallest = resolutionPlusOneList.filter(rep => rep.width === resolutionPlusOneList[0].width && rep.height === resolutionPlusOneList[0].height); // ensure that we also pick the highest bandwidth variant that
+    // is just-larger-than the video player
+
+    highestRemainingBandwidthRep = resolutionPlusOneSmallest[resolutionPlusOneSmallest.length - 1];
+    resolutionPlusOneRep = resolutionPlusOneSmallest.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0];
+  }
+  let leastPixelDiffRep; // If this selector proves to be better than others,
+  // resolutionPlusOneRep and resolutionBestRep and all
+  // the code involving them should be removed.
+
+  if (playlistController.leastPixelDiffSelector) {
+    // find the variant that is closest to the player's pixel size
+    const leastPixelDiffList = haveResolution.map(rep => {
+      rep.pixelDiff = Math.abs(rep.width - playerWidth) + Math.abs(rep.height - playerHeight);
+      return rep;
+    }); // get the highest bandwidth, closest resolution playlist
+
+    stableSort(leastPixelDiffList, (left, right) => {
+      // sort by highest bandwidth if pixelDiff is the same
+      if (left.pixelDiff === right.pixelDiff) {
+        return right.bandwidth - left.bandwidth;
+      }
+      return left.pixelDiff - right.pixelDiff;
+    });
+    leastPixelDiffRep = leastPixelDiffList[0];
+  } // fallback chain of variants
+
+  const chosenRep = leastPixelDiffRep || resolutionPlusOneRep || resolutionBestRep || bandwidthBestRep || enabledPlaylistReps[0] || sortedPlaylistReps[0];
+  if (chosenRep && chosenRep.playlist) {
+    let type = 'sortedPlaylistReps';
+    if (leastPixelDiffRep) {
+      type = 'leastPixelDiffRep';
+    } else if (resolutionPlusOneRep) {
+      type = 'resolutionPlusOneRep';
+    } else if (resolutionBestRep) {
+      type = 'resolutionBestRep';
+    } else if (bandwidthBestRep) {
+      type = 'bandwidthBestRep';
+    } else if (enabledPlaylistReps[0]) {
+      type = 'enabledPlaylistReps';
+    }
+    logFn(`choosing ${representationToString(chosenRep)} using ${type} with options`, options);
+    return chosenRep.playlist;
+  }
+  logFn('could not choose a playlist with options', options);
+  return null;
+};
+
+/**
+ * Chooses the appropriate media playlist based on the most recent
+ * bandwidth estimate and the player size.
+ *
+ * Expects to be called within the context of an instance of VhsHandler
+ *
+ * @return {Playlist} the highest bitrate playlist less than the
+ * currently detected bandwidth, accounting for some amount of
+ * bandwidth variance
+ */
+
+const lastBandwidthSelector = function () {
+  let pixelRatio = this.useDevicePixelRatio ? window__default["default"].devicePixelRatio || 1 : 1;
+  if (!isNaN(this.customPixelRatio)) {
+    pixelRatio = this.customPixelRatio;
+  }
+  return simpleSelector(this.playlists.main, this.systemBandwidth, parseInt(safeGetComputedStyle(this.tech_.el(), 'width'), 10) * pixelRatio, parseInt(safeGetComputedStyle(this.tech_.el(), 'height'), 10) * pixelRatio, this.limitRenditionByPlayerDimensions, this.playlistController_);
+};
+/**
+ * Chooses the appropriate media playlist based on an
+ * exponential-weighted moving average of the bandwidth after
+ * filtering for player size.
+ *
+ * Expects to be called within the context of an instance of VhsHandler
+ *
+ * @param {number} decay - a number between 0 and 1. Higher values of
+ * this parameter will cause previous bandwidth estimates to lose
+ * significance more quickly.
+ * @return {Function} a function which can be invoked to create a new
+ * playlist selector function.
+ * @see https://en.wikipedia.org/wiki/Moving_average#Exponential_moving_average
+ */
+
+const movingAverageBandwidthSelector = function (decay) {
+  let average = -1;
+  let lastSystemBandwidth = -1;
+  if (decay < 0 || decay > 1) {
+    throw new Error('Moving average bandwidth decay must be between 0 and 1.');
+  }
+  return function () {
+    let pixelRatio = this.useDevicePixelRatio ? window__default["default"].devicePixelRatio || 1 : 1;
+    if (!isNaN(this.customPixelRatio)) {
+      pixelRatio = this.customPixelRatio;
+    }
+    if (average < 0) {
+      average = this.systemBandwidth;
+      lastSystemBandwidth = this.systemBandwidth;
+    } // stop the average value from decaying for every 250ms
+    // when the systemBandwidth is constant
+    // and
+    // stop average from setting to a very low value when the
+    // systemBandwidth becomes 0 in case of chunk cancellation
+
+    if (this.systemBandwidth > 0 && this.systemBandwidth !== lastSystemBandwidth) {
+      average = decay * this.systemBandwidth + (1 - decay) * average;
+      lastSystemBandwidth = this.systemBandwidth;
+    }
+    return simpleSelector(this.playlists.main, average, parseInt(safeGetComputedStyle(this.tech_.el(), 'width'), 10) * pixelRatio, parseInt(safeGetComputedStyle(this.tech_.el(), 'height'), 10) * pixelRatio, this.limitRenditionByPlayerDimensions, this.playlistController_);
+  };
+};
+/**
+ * Chooses the appropriate media playlist based on the potential to rebuffer
+ *
+ * @param {Object} settings
+ *        Object of information required to use this selector
+ * @param {Object} settings.main
+ *        Object representation of the main manifest
+ * @param {number} settings.currentTime
+ *        The current time of the player
+ * @param {number} settings.bandwidth
+ *        Current measured bandwidth
+ * @param {number} settings.duration
+ *        Duration of the media
+ * @param {number} settings.segmentDuration
+ *        Segment duration to be used in round trip time calculations
+ * @param {number} settings.timeUntilRebuffer
+ *        Time left in seconds until the player has to rebuffer
+ * @param {number} settings.currentTimeline
+ *        The current timeline segments are being loaded from
+ * @param {SyncController} settings.syncController
+ *        SyncController for determining if we have a sync point for a given playlist
+ * @return {Object|null}
+ *         {Object} return.playlist
+ *         The highest bandwidth playlist with the least amount of rebuffering
+ *         {Number} return.rebufferingImpact
+ *         The amount of time in seconds switching to this playlist will rebuffer. A
+ *         negative value means that switching will cause zero rebuffering.
+ */
+
+const minRebufferMaxBandwidthSelector = function (settings) {
+  const {
+    main,
+    currentTime,
+    bandwidth,
+    duration,
+    segmentDuration,
+    timeUntilRebuffer,
+    currentTimeline,
+    syncController
+  } = settings; // filter out any playlists that have been excluded due to
+  // incompatible configurations
+
+  const compatiblePlaylists = main.playlists.filter(playlist => !Playlist.isIncompatible(playlist)); // filter out any playlists that have been disabled manually through the representations
+  // api or excluded temporarily due to playback errors.
+
+  let enabledPlaylists = compatiblePlaylists.filter(Playlist.isEnabled);
+  if (!enabledPlaylists.length) {
+    // if there are no enabled playlists, then they have all been excluded or disabled
+    // by the user through the representations api. In this case, ignore exclusion and
+    // fallback to what the user wants by using playlists the user has not disabled.
+    enabledPlaylists = compatiblePlaylists.filter(playlist => !Playlist.isDisabled(playlist));
+  }
+  const bandwidthPlaylists = enabledPlaylists.filter(Playlist.hasAttribute.bind(null, 'BANDWIDTH'));
+  const rebufferingEstimates = bandwidthPlaylists.map(playlist => {
+    const syncPoint = syncController.getSyncPoint(playlist, duration, currentTimeline, currentTime); // If there is no sync point for this playlist, switching to it will require a
+    // sync request first. This will double the request time
+
+    const numRequests = syncPoint ? 1 : 2;
+    const requestTimeEstimate = Playlist.estimateSegmentRequestTime(segmentDuration, bandwidth, playlist);
+    const rebufferingImpact = requestTimeEstimate * numRequests - timeUntilRebuffer;
+    return {
+      playlist,
+      rebufferingImpact
+    };
+  });
+  const noRebufferingPlaylists = rebufferingEstimates.filter(estimate => estimate.rebufferingImpact <= 0); // Sort by bandwidth DESC
+
+  stableSort(noRebufferingPlaylists, (a, b) => comparePlaylistBandwidth(b.playlist, a.playlist));
+  if (noRebufferingPlaylists.length) {
+    return noRebufferingPlaylists[0];
+  }
+  stableSort(rebufferingEstimates, (a, b) => a.rebufferingImpact - b.rebufferingImpact);
+  return rebufferingEstimates[0] || null;
+};
+/**
+ * Chooses the appropriate media playlist, which in this case is the lowest bitrate
+ * one with video.  If no renditions with video exist, return the lowest audio rendition.
+ *
+ * Expects to be called within the context of an instance of VhsHandler
+ *
+ * @return {Object|null}
+ *         {Object} return.playlist
+ *         The lowest bitrate playlist that contains a video codec.  If no such rendition
+ *         exists pick the lowest audio rendition.
+ */
+
+const lowestBitrateCompatibleVariantSelector = function () {
+  // filter out any playlists that have been excluded due to
+  // incompatible configurations or playback errors
+  const playlists = this.playlists.main.playlists.filter(Playlist.isEnabled); // Sort ascending by bitrate
+
+  stableSort(playlists, (a, b) => comparePlaylistBandwidth(a, b)); // Parse and assume that playlists with no video codec have no video
+  // (this is not necessarily true, although it is generally true).
+  //
+  // If an entire manifest has no valid videos everything will get filtered
+  // out.
+
+  const playlistsWithVideo = playlists.filter(playlist => !!codecsForPlaylist(this.playlists.main, playlist).video);
+  return playlistsWithVideo[0] || null;
+};
+
+/**
+ * Combine all segments into a single Uint8Array
+ *
+ * @param {Object} segmentObj
+ * @return {Uint8Array} concatenated bytes
+ * @private
+ */
+const concatSegments = segmentObj => {
+  let offset = 0;
+  let tempBuffer;
+  if (segmentObj.bytes) {
+    tempBuffer = new Uint8Array(segmentObj.bytes); // combine the individual segments into one large typed-array
+
+    segmentObj.segments.forEach(segment => {
+      tempBuffer.set(segment, offset);
+      offset += segment.byteLength;
+    });
+  }
+  return tempBuffer;
+};
+/**
+ * Example:
+ * https://host.com/path1/path2/path3/segment.ts?arg1=val1
+ * -->
+ * path3/segment.ts
+ *
+ * @param resolvedUri
+ * @return {string}
+ */
+
+function compactSegmentUrlDescription(resolvedUri) {
+  try {
+    return new URL(resolvedUri).pathname.split('/').slice(-2).join('/');
+  } catch (e) {
+    return '';
+  }
+}
+
+/**
+ * @file text-tracks.js
+ */
+/**
+ * Create captions text tracks on video.js if they do not exist
+ *
+ * @param {Object} inbandTextTracks a reference to current inbandTextTracks
+ * @param {Object} tech the video.js tech
+ * @param {Object} captionStream the caption stream to create
+ * @private
+ */
+
+const createCaptionsTrackIfNotExists = function (inbandTextTracks, tech, captionStream) {
+  if (!inbandTextTracks[captionStream]) {
+    tech.trigger({
+      type: 'usage',
+      name: 'vhs-608'
+    });
+    let instreamId = captionStream; // we need to translate SERVICEn for 708 to how mux.js currently labels them
+
+    if (/^cc708_/.test(captionStream)) {
+      instreamId = 'SERVICE' + captionStream.split('_')[1];
+    }
+    const track = tech.textTracks().getTrackById(instreamId);
+    if (track) {
+      // Resuse an existing track with a CC# id because this was
+      // very likely created by videojs-contrib-hls from information
+      // in the m3u8 for us to use
+      inbandTextTracks[captionStream] = track;
+    } else {
+      // This section gets called when we have caption services that aren't specified in the manifest.
+      // Manifest level caption services are handled in media-groups.js under CLOSED-CAPTIONS.
+      const captionServices = tech.options_.vhs && tech.options_.vhs.captionServices || {};
+      let label = captionStream;
+      let language = captionStream;
+      let def = false;
+      const captionService = captionServices[instreamId];
+      if (captionService) {
+        label = captionService.label;
+        language = captionService.language;
+        def = captionService.default;
+      } // Otherwise, create a track with the default `CC#` label and
+      // without a language
+
+      inbandTextTracks[captionStream] = tech.addRemoteTextTrack({
+        kind: 'captions',
+        id: instreamId,
+        // TODO: investigate why this doesn't seem to turn the caption on by default
+        default: def,
+        label,
+        language
+      }, false).track;
+    }
+  }
+};
+/**
+ * Add caption text track data to a source handler given an array of captions
+ *
+ * @param {Object}
+ *   @param {Object} inbandTextTracks the inband text tracks
+ *   @param {number} timestampOffset the timestamp offset of the source buffer
+ *   @param {Array} captionArray an array of caption data
+ * @private
+ */
+
+const addCaptionData = function ({
+  inbandTextTracks,
+  captionArray,
+  timestampOffset
+}) {
+  if (!captionArray) {
+    return;
+  }
+  const Cue = window__default["default"].WebKitDataCue || window__default["default"].VTTCue;
+  captionArray.forEach(caption => {
+    const track = caption.stream; // in CEA 608 captions, video.js/mux.js sends a content array
+    // with positioning data
+
+    if (caption.content) {
+      caption.content.forEach(value => {
+        const cue = new Cue(caption.startTime + timestampOffset, caption.endTime + timestampOffset, value.text);
+        cue.line = value.line;
+        cue.align = 'left';
+        cue.position = value.position;
+        cue.positionAlign = 'line-left';
+        inbandTextTracks[track].addCue(cue);
+      });
+    } else {
+      // otherwise, a text value with combined captions is sent
+      inbandTextTracks[track].addCue(new Cue(caption.startTime + timestampOffset, caption.endTime + timestampOffset, caption.text));
+    }
+  });
+};
+/**
+ * Define properties on a cue for backwards compatability,
+ * but warn the user that the way that they are using it
+ * is depricated and will be removed at a later date.
+ *
+ * @param {Cue} cue the cue to add the properties on
+ * @private
+ */
+
+const deprecateOldCue = function (cue) {
+  Object.defineProperties(cue.frame, {
+    id: {
+      get() {
+        videojs.log.warn('cue.frame.id is deprecated. Use cue.value.key instead.');
+        return cue.value.key;
+      }
+    },
+    value: {
+      get() {
+        videojs.log.warn('cue.frame.value is deprecated. Use cue.value.data instead.');
+        return cue.value.data;
+      }
+    },
+    privateData: {
+      get() {
+        videojs.log.warn('cue.frame.privateData is deprecated. Use cue.value.data instead.');
+        return cue.value.data;
+      }
+    }
+  });
+};
+/**
+ * Add metadata text track data to a source handler given an array of metadata
+ *
+ * @param {Object}
+ *   @param {Object} inbandTextTracks the inband text tracks
+ *   @param {Array} metadataArray an array of meta data
+ *   @param {number} timestampOffset the timestamp offset of the source buffer
+ *   @param {number} videoDuration the duration of the video
+ * @private
+ */
+
+const addMetadata = ({
+  inbandTextTracks,
+  metadataArray,
+  timestampOffset,
+  videoDuration
+}) => {
+  if (!metadataArray) {
+    return;
+  }
+  const Cue = window__default["default"].WebKitDataCue || window__default["default"].VTTCue;
+  const metadataTrack = inbandTextTracks.metadataTrack_;
+  if (!metadataTrack) {
+    return;
+  }
+  metadataArray.forEach(metadata => {
+    const time = metadata.cueTime + timestampOffset; // if time isn't a finite number between 0 and Infinity, like NaN,
+    // ignore this bit of metadata.
+    // This likely occurs when you have an non-timed ID3 tag like TIT2,
+    // which is the "Title/Songname/Content description" frame
+
+    if (typeof time !== 'number' || window__default["default"].isNaN(time) || time < 0 || !(time < Infinity)) {
+      return;
+    } // If we have no frames, we can't create a cue.
+
+    if (!metadata.frames || !metadata.frames.length) {
+      return;
+    }
+    metadata.frames.forEach(frame => {
+      const cue = new Cue(time, time, frame.value || frame.url || frame.data || '');
+      cue.frame = frame;
+      cue.value = frame;
+      deprecateOldCue(cue);
+      metadataTrack.addCue(cue);
+    });
+  });
+  if (!metadataTrack.cues || !metadataTrack.cues.length) {
+    return;
+  } // Updating the metadeta cues so that
+  // the endTime of each cue is the startTime of the next cue
+  // the endTime of last cue is the duration of the video
+
+  const cues = metadataTrack.cues;
+  const cuesArray = []; // Create a copy of the TextTrackCueList...
+  // ...disregarding cues with a falsey value
+
+  for (let i = 0; i < cues.length; i++) {
+    if (cues[i]) {
+      cuesArray.push(cues[i]);
+    }
+  } // Group cues by their startTime value
+
+  const cuesGroupedByStartTime = cuesArray.reduce((obj, cue) => {
+    const timeSlot = obj[cue.startTime] || [];
+    timeSlot.push(cue);
+    obj[cue.startTime] = timeSlot;
+    return obj;
+  }, {}); // Sort startTimes by ascending order
+
+  const sortedStartTimes = Object.keys(cuesGroupedByStartTime).sort((a, b) => Number(a) - Number(b)); // Map each cue group's endTime to the next group's startTime
+
+  sortedStartTimes.forEach((startTime, idx) => {
+    const cueGroup = cuesGroupedByStartTime[startTime];
+    const finiteDuration = isFinite(videoDuration) ? videoDuration : startTime;
+    const nextTime = Number(sortedStartTimes[idx + 1]) || finiteDuration; // Map each cue's endTime the next group's startTime
+
+    cueGroup.forEach(cue => {
+      cue.endTime = nextTime;
+    });
+  });
+}; // object for mapping daterange attributes
+
+const dateRangeAttr = {
+  id: 'ID',
+  class: 'CLASS',
+  startDate: 'START-DATE',
+  duration: 'DURATION',
+  endDate: 'END-DATE',
+  endOnNext: 'END-ON-NEXT',
+  plannedDuration: 'PLANNED-DURATION',
+  scte35Out: 'SCTE35-OUT',
+  scte35In: 'SCTE35-IN'
+};
+const dateRangeKeysToOmit = new Set(['id', 'class', 'startDate', 'duration', 'endDate', 'endOnNext', 'startTime', 'endTime', 'processDateRange']);
+/**
+ * Add DateRange metadata text track to a source handler given an array of metadata
+ *
+ * @param {Object}
+ *   @param {Object} inbandTextTracks the inband text tracks
+ *   @param {Array} dateRanges parsed media playlist
+ * @private
+ */
+
+const addDateRangeMetadata = ({
+  inbandTextTracks,
+  dateRanges
+}) => {
+  const metadataTrack = inbandTextTracks.metadataTrack_;
+  if (!metadataTrack) {
+    return;
+  }
+  const Cue = window__default["default"].WebKitDataCue || window__default["default"].VTTCue;
+  dateRanges.forEach(dateRange => {
+    // we generate multiple cues for each date range with different attributes
+    for (const key of Object.keys(dateRange)) {
+      if (dateRangeKeysToOmit.has(key)) {
+        continue;
+      }
+      const cue = new Cue(dateRange.startTime, dateRange.endTime, '');
+      cue.id = dateRange.id;
+      cue.type = 'com.apple.quicktime.HLS';
+      cue.value = {
+        key: dateRangeAttr[key],
+        data: dateRange[key]
+      };
+      if (key === 'scte35Out' || key === 'scte35In') {
+        cue.value.data = new Uint8Array(cue.value.data.match(/[\da-f]{2}/gi)).buffer;
+      }
+      metadataTrack.addCue(cue);
+    }
+    dateRange.processDateRange();
+  });
+};
+/**
+ * Create metadata text track on video.js if it does not exist
+ *
+ * @param {Object} inbandTextTracks a reference to current inbandTextTracks
+ * @param {string} dispatchType the inband metadata track dispatch type
+ * @param {Object} tech the video.js tech
+ * @private
+ */
+
+const createMetadataTrackIfNotExists = (inbandTextTracks, dispatchType, tech) => {
+  if (inbandTextTracks.metadataTrack_) {
+    return;
+  }
+  inbandTextTracks.metadataTrack_ = tech.addRemoteTextTrack({
+    kind: 'metadata',
+    label: 'Timed Metadata'
+  }, false).track;
+  if (!videojs.browser.IS_ANY_SAFARI) {
+    inbandTextTracks.metadataTrack_.inBandMetadataTrackDispatchType = dispatchType;
+  }
+};
+/**
+ * Remove cues from a track on video.js.
+ *
+ * @param {Double} start start of where we should remove the cue
+ * @param {Double} end end of where the we should remove the cue
+ * @param {Object} track the text track to remove the cues from
+ * @private
+ */
+
+const removeCuesFromTrack = function (start, end, track) {
+  let i;
+  let cue;
+  if (!track) {
+    return;
+  }
+  if (!track.cues) {
+    return;
+  }
+  i = track.cues.length;
+  while (i--) {
+    cue = track.cues[i]; // Remove any cue within the provided start and end time
+
+    if (cue.startTime >= start && cue.endTime <= end) {
+      track.removeCue(cue);
+    }
+  }
+};
+/**
+ * Remove duplicate cues from a track on video.js (a cue is considered a
+ * duplicate if it has the same time interval and text as another)
+ *
+ * @param {Object} track the text track to remove the duplicate cues from
+ * @private
+ */
+
+const removeDuplicateCuesFromTrack = function (track) {
+  const cues = track.cues;
+  if (!cues) {
+    return;
+  }
+  const uniqueCues = {};
+  for (let i = cues.length - 1; i >= 0; i--) {
+    const cue = cues[i];
+    const cueKey = `${cue.startTime}-${cue.endTime}-${cue.text}`;
+    if (uniqueCues[cueKey]) {
+      track.removeCue(cue);
+    } else {
+      uniqueCues[cueKey] = cue;
+    }
+  }
+};
+
+/**
+ * Returns a list of gops in the buffer that have a pts value of 3 seconds or more in
+ * front of current time.
+ *
+ * @param {Array} buffer
+ *        The current buffer of gop information
+ * @param {number} currentTime
+ *        The current time
+ * @param {Double} mapping
+ *        Offset to map display time to stream presentation time
+ * @return {Array}
+ *         List of gops considered safe to append over
+ */
+
+const gopsSafeToAlignWith = (buffer, currentTime, mapping) => {
+  if (typeof currentTime === 'undefined' || currentTime === null || !buffer.length) {
+    return [];
+  } // pts value for current time + 3 seconds to give a bit more wiggle room
+
+  const currentTimePts = Math.ceil((currentTime - mapping + 3) * clock.ONE_SECOND_IN_TS);
+  let i;
+  for (i = 0; i < buffer.length; i++) {
+    if (buffer[i].pts > currentTimePts) {
+      break;
+    }
+  }
+  return buffer.slice(i);
+};
+/**
+ * Appends gop information (timing and byteLength) received by the transmuxer for the
+ * gops appended in the last call to appendBuffer
+ *
+ * @param {Array} buffer
+ *        The current buffer of gop information
+ * @param {Array} gops
+ *        List of new gop information
+ * @param {boolean} replace
+ *        If true, replace the buffer with the new gop information. If false, append the
+ *        new gop information to the buffer in the right location of time.
+ * @return {Array}
+ *         Updated list of gop information
+ */
+
+const updateGopBuffer = (buffer, gops, replace) => {
+  if (!gops.length) {
+    return buffer;
+  }
+  if (replace) {
+    // If we are in safe append mode, then completely overwrite the gop buffer
+    // with the most recent appeneded data. This will make sure that when appending
+    // future segments, we only try to align with gops that are both ahead of current
+    // time and in the last segment appended.
+    return gops.slice();
+  }
+  const start = gops[0].pts;
+  let i = 0;
+  for (i; i < buffer.length; i++) {
+    if (buffer[i].pts >= start) {
+      break;
+    }
+  }
+  return buffer.slice(0, i).concat(gops);
+};
+/**
+ * Removes gop information in buffer that overlaps with provided start and end
+ *
+ * @param {Array} buffer
+ *        The current buffer of gop information
+ * @param {Double} start
+ *        position to start the remove at
+ * @param {Double} end
+ *        position to end the remove at
+ * @param {Double} mapping
+ *        Offset to map display time to stream presentation time
+ */
+
+const removeGopBuffer = (buffer, start, end, mapping) => {
+  const startPts = Math.ceil((start - mapping) * clock.ONE_SECOND_IN_TS);
+  const endPts = Math.ceil((end - mapping) * clock.ONE_SECOND_IN_TS);
+  const updatedBuffer = buffer.slice();
+  let i = buffer.length;
+  while (i--) {
+    if (buffer[i].pts <= endPts) {
+      break;
+    }
+  }
+  if (i === -1) {
+    // no removal because end of remove range is before start of buffer
+    return updatedBuffer;
+  }
+  let j = i + 1;
+  while (j--) {
+    if (buffer[j].pts <= startPts) {
+      break;
+    }
+  } // clamp remove range start to 0 index
+
+  j = Math.max(j, 0);
+  updatedBuffer.splice(j, i - j + 1);
+  return updatedBuffer;
+};
+const shallowEqual = function (a, b) {
+  // if both are undefined
+  // or one or the other is undefined
+  // they are not equal
+  if (!a && !b || !a && b || a && !b) {
+    return false;
+  } // they are the same object and thus, equal
+
+  if (a === b) {
+    return true;
+  } // sort keys so we can make sure they have
+  // all the same keys later.
+
+  const akeys = Object.keys(a).sort();
+  const bkeys = Object.keys(b).sort(); // different number of keys, not equal
+
+  if (akeys.length !== bkeys.length) {
+    return false;
+  }
+  for (let i = 0; i < akeys.length; i++) {
+    const key = akeys[i]; // different sorted keys, not equal
+
+    if (key !== bkeys[i]) {
+      return false;
+    } // different values, not equal
+
+    if (a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+};
+
+// https://www.w3.org/TR/WebIDL-1/#quotaexceedederror
+const QUOTA_EXCEEDED_ERR = 22;
+
+/**
+ * The segment loader has no recourse except to fetch a segment in the
+ * current playlist and use the internal timestamps in that segment to
+ * generate a syncPoint. This function returns a good candidate index
+ * for that process.
+ *
+ * @param {Array} segments - the segments array from a playlist.
+ * @return {number} An index of a segment from the playlist to load
+ */
+
+const getSyncSegmentCandidate = function (currentTimeline, segments, targetTime) {
+  segments = segments || [];
+  const timelineSegments = [];
+  let time = 0;
+  for (let i = 0; i < segments.length; i++) {
+    const segment = segments[i];
+    if (currentTimeline === segment.timeline) {
+      timelineSegments.push(i);
+      time += segment.duration;
+      if (time > targetTime) {
+        return i;
+      }
+    }
+  }
+  if (timelineSegments.length === 0) {
+    return 0;
+  } // default to the last timeline segment
+
+  return timelineSegments[timelineSegments.length - 1];
+}; // In the event of a quota exceeded error, keep at least one second of back buffer. This
+// number was arbitrarily chosen and may be updated in the future, but seemed reasonable
+// as a start to prevent any potential issues with removing content too close to the
+// playhead.
+
+const MIN_BACK_BUFFER = 1; // in ms
+
+const CHECK_BUFFER_DELAY = 500;
+const finite = num => typeof num === 'number' && isFinite(num); // With most content hovering around 30fps, if a segment has a duration less than a half
+// frame at 30fps or one frame at 60fps, the bandwidth and throughput calculations will
+// not accurately reflect the rest of the content.
+
+const MIN_SEGMENT_DURATION_TO_SAVE_STATS = 1 / 60;
+const illegalMediaSwitch = (loaderType, startingMedia, trackInfo) => {
+  // Although these checks should most likely cover non 'main' types, for now it narrows
+  // the scope of our checks.
+  if (loaderType !== 'main' || !startingMedia || !trackInfo) {
+    return null;
+  }
+  if (!trackInfo.hasAudio && !trackInfo.hasVideo) {
+    return 'Neither audio nor video found in segment.';
+  }
+  if (startingMedia.hasVideo && !trackInfo.hasVideo) {
+    return 'Only audio found in segment when we expected video.' + ' We can\'t switch to audio only from a stream that had video.' + ' To get rid of this message, please add codec information to the manifest.';
+  }
+  if (!startingMedia.hasVideo && trackInfo.hasVideo) {
+    return 'Video found in segment when we expected only audio.' + ' We can\'t switch to a stream with video from an audio only stream.' + ' To get rid of this message, please add codec information to the manifest.';
+  }
+  return null;
+};
+/**
+ * Calculates a time value that is safe to remove from the back buffer without interrupting
+ * playback.
+ *
+ * @param {TimeRange} seekable
+ *        The current seekable range
+ * @param {number} currentTime
+ *        The current time of the player
+ * @param {number} targetDuration
+ *        The target duration of the current playlist
+ * @return {number}
+ *         Time that is safe to remove from the back buffer without interrupting playback
+ */
+
+const safeBackBufferTrimTime = (seekable, currentTime, targetDuration) => {
+  // 30 seconds before the playhead provides a safe default for trimming.
+  //
+  // Choosing a reasonable default is particularly important for high bitrate content and
+  // VOD videos/live streams with large windows, as the buffer may end up overfilled and
+  // throw an APPEND_BUFFER_ERR.
+  let trimTime = currentTime - Config.BACK_BUFFER_LENGTH;
+  if (seekable.length) {
+    // Some live playlists may have a shorter window of content than the full allowed back
+    // buffer. For these playlists, don't save content that's no longer within the window.
+    trimTime = Math.max(trimTime, seekable.start(0));
+  } // Don't remove within target duration of the current time to avoid the possibility of
+  // removing the GOP currently being played, as removing it can cause playback stalls.
+
+  const maxTrimTime = currentTime - targetDuration;
+  return Math.min(maxTrimTime, trimTime);
+};
+const segmentInfoString = segmentInfo => {
+  const {
+    startOfSegment,
+    duration,
+    segment,
+    part,
+    playlist: {
+      mediaSequence: seq,
+      id,
+      segments = []
+    },
+    mediaIndex: index,
+    partIndex,
+    timeline
+  } = segmentInfo;
+  const segmentLen = segments.length - 1;
+  let selection = 'mediaIndex/partIndex increment';
+  if (segmentInfo.getMediaInfoForTime) {
+    selection = `getMediaInfoForTime (${segmentInfo.getMediaInfoForTime})`;
+  } else if (segmentInfo.isSyncRequest) {
+    selection = 'getSyncSegmentCandidate (isSyncRequest)';
+  }
+  if (segmentInfo.independent) {
+    selection += ` with independent ${segmentInfo.independent}`;
+  }
+  const hasPartIndex = typeof partIndex === 'number';
+  const name = segmentInfo.segment.uri ? 'segment' : 'pre-segment';
+  const zeroBasedPartCount = hasPartIndex ? getKnownPartCount({
+    preloadSegment: segment
+  }) - 1 : 0;
+  return `${name} [${seq + index}/${seq + segmentLen}]` + (hasPartIndex ? ` part [${partIndex}/${zeroBasedPartCount}]` : '') + ` segment start/end [${segment.start} => ${segment.end}]` + (hasPartIndex ? ` part start/end [${part.start} => ${part.end}]` : '') + ` startOfSegment [${startOfSegment}]` + ` duration [${duration}]` + ` timeline [${timeline}]` + ` selected by [${selection}]` + ` playlist [${id}]`;
+};
+const timingInfoPropertyForMedia = mediaType => `${mediaType}TimingInfo`;
+/**
+ * Returns the timestamp offset to use for the segment.
+ *
+ * @param {number} segmentTimeline
+ *        The timeline of the segment
+ * @param {number} currentTimeline
+ *        The timeline currently being followed by the loader
+ * @param {number} startOfSegment
+ *        The estimated segment start
+ * @param {TimeRange[]} buffered
+ *        The loader's buffer
+ * @param {boolean} overrideCheck
+ *        If true, no checks are made to see if the timestamp offset value should be set,
+ *        but sets it directly to a value.
+ *
+ * @return {number|null}
+ *         Either a number representing a new timestamp offset, or null if the segment is
+ *         part of the same timeline
+ */
+
+const timestampOffsetForSegment = ({
+  segmentTimeline,
+  currentTimeline,
+  startOfSegment,
+  buffered,
+  overrideCheck
+}) => {
+  // Check to see if we are crossing a discontinuity to see if we need to set the
+  // timestamp offset on the transmuxer and source buffer.
+  //
+  // Previously, we changed the timestampOffset if the start of this segment was less than
+  // the currently set timestampOffset, but this isn't desirable as it can produce bad
+  // behavior, especially around long running live streams.
+  if (!overrideCheck && segmentTimeline === currentTimeline) {
+    return null;
+  } // When changing renditions, it's possible to request a segment on an older timeline. For
+  // instance, given two renditions with the following:
+  //
+  // #EXTINF:10
+  // segment1
+  // #EXT-X-DISCONTINUITY
+  // #EXTINF:10
+  // segment2
+  // #EXTINF:10
+  // segment3
+  //
+  // And the current player state:
+  //
+  // current time: 8
+  // buffer: 0 => 20
+  //
+  // The next segment on the current rendition would be segment3, filling the buffer from
+  // 20s onwards. However, if a rendition switch happens after segment2 was requested,
+  // then the next segment to be requested will be segment1 from the new rendition in
+  // order to fill time 8 and onwards. Using the buffered end would result in repeated
+  // content (since it would position segment1 of the new rendition starting at 20s). This
+  // case can be identified when the new segment's timeline is a prior value. Instead of
+  // using the buffered end, the startOfSegment can be used, which, hopefully, will be
+  // more accurate to the actual start time of the segment.
+
+  if (segmentTimeline < currentTimeline) {
+    return startOfSegment;
+  } // segmentInfo.startOfSegment used to be used as the timestamp offset, however, that
+  // value uses the end of the last segment if it is available. While this value
+  // should often be correct, it's better to rely on the buffered end, as the new
+  // content post discontinuity should line up with the buffered end as if it were
+  // time 0 for the new content.
+
+  return buffered.length ? buffered.end(buffered.length - 1) : startOfSegment;
+};
+/**
+ * Returns whether or not the loader should wait for a timeline change from the timeline
+ * change controller before processing the segment.
+ *
+ * Primary timing in VHS goes by video. This is different from most media players, as
+ * audio is more often used as the primary timing source. For the foreseeable future, VHS
+ * will continue to use video as the primary timing source, due to the current logic and
+ * expectations built around it.
+
+ * Since the timing follows video, in order to maintain sync, the video loader is
+ * responsible for setting both audio and video source buffer timestamp offsets.
+ *
+ * Setting different values for audio and video source buffers could lead to
+ * desyncing. The following examples demonstrate some of the situations where this
+ * distinction is important. Note that all of these cases involve demuxed content. When
+ * content is muxed, the audio and video are packaged together, therefore syncing
+ * separate media playlists is not an issue.
+ *
+ * CASE 1: Audio prepares to load a new timeline before video:
+ *
+ * Timeline:       0                 1
+ * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+ * Audio Loader:                     ^
+ * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+ * Video Loader              ^
+ *
+ * In the above example, the audio loader is preparing to load the 6th segment, the first
+ * after a discontinuity, while the video loader is still loading the 5th segment, before
+ * the discontinuity.
+ *
+ * If the audio loader goes ahead and loads and appends the 6th segment before the video
+ * loader crosses the discontinuity, then when appended, the 6th audio segment will use
+ * the timestamp offset from timeline 0. This will likely lead to desyncing. In addition,
+ * the audio loader must provide the audioAppendStart value to trim the content in the
+ * transmuxer, and that value relies on the audio timestamp offset. Since the audio
+ * timestamp offset is set by the video (main) loader, the audio loader shouldn't load the
+ * segment until that value is provided.
+ *
+ * CASE 2: Video prepares to load a new timeline before audio:
+ *
+ * Timeline:       0                 1
+ * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+ * Audio Loader:             ^
+ * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+ * Video Loader                      ^
+ *
+ * In the above example, the video loader is preparing to load the 6th segment, the first
+ * after a discontinuity, while the audio loader is still loading the 5th segment, before
+ * the discontinuity.
+ *
+ * If the video loader goes ahead and loads and appends the 6th segment, then once the
+ * segment is loaded and processed, both the video and audio timestamp offsets will be
+ * set, since video is used as the primary timing source. This is to ensure content lines
+ * up appropriately, as any modifications to the video timing are reflected by audio when
+ * the video loader sets the audio and video timestamp offsets to the same value. However,
+ * setting the timestamp offset for audio before audio has had a chance to change
+ * timelines will likely lead to desyncing, as the audio loader will append segment 5 with
+ * a timestamp intended to apply to segments from timeline 1 rather than timeline 0.
+ *
+ * CASE 3: When seeking, audio prepares to load a new timeline before video
+ *
+ * Timeline:       0                 1
+ * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+ * Audio Loader:           ^
+ * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+ * Video Loader            ^
+ *
+ * In the above example, both audio and video loaders are loading segments from timeline
+ * 0, but imagine that the seek originated from timeline 1.
+ *
+ * When seeking to a new timeline, the timestamp offset will be set based on the expected
+ * segment start of the loaded video segment. In order to maintain sync, the audio loader
+ * must wait for the video loader to load its segment and update both the audio and video
+ * timestamp offsets before it may load and append its own segment. This is the case
+ * whether the seek results in a mismatched segment request (e.g., the audio loader
+ * chooses to load segment 3 and the video loader chooses to load segment 4) or the
+ * loaders choose to load the same segment index from each playlist, as the segments may
+ * not be aligned perfectly, even for matching segment indexes.
+ *
+ * @param {Object} timelinechangeController
+ * @param {number} currentTimeline
+ *        The timeline currently being followed by the loader
+ * @param {number} segmentTimeline
+ *        The timeline of the segment being loaded
+ * @param {('main'|'audio')} loaderType
+ *        The loader type
+ * @param {boolean} audioDisabled
+ *        Whether the audio is disabled for the loader. This should only be true when the
+ *        loader may have muxed audio in its segment, but should not append it, e.g., for
+ *        the main loader when an alternate audio playlist is active.
+ *
+ * @return {boolean}
+ *         Whether the loader should wait for a timeline change from the timeline change
+ *         controller before processing the segment
+ */
+
+const shouldWaitForTimelineChange = ({
+  timelineChangeController,
+  currentTimeline,
+  segmentTimeline,
+  loaderType,
+  audioDisabled
+}) => {
+  if (currentTimeline === segmentTimeline) {
+    return false;
+  }
+  if (loaderType === 'audio') {
+    const lastMainTimelineChange = timelineChangeController.lastTimelineChange({
+      type: 'main'
+    }); // Audio loader should wait if:
+    //
+    // * main hasn't had a timeline change yet (thus has not loaded its first segment)
+    // * main hasn't yet changed to the timeline audio is looking to load
+
+    return !lastMainTimelineChange || lastMainTimelineChange.to !== segmentTimeline;
+  } // The main loader only needs to wait for timeline changes if there's demuxed audio.
+  // Otherwise, there's nothing to wait for, since audio would be muxed into the main
+  // loader's segments (or the content is audio/video only and handled by the main
+  // loader).
+
+  if (loaderType === 'main' && audioDisabled) {
+    const pendingAudioTimelineChange = timelineChangeController.pendingTimelineChange({
+      type: 'audio'
+    }); // Main loader should wait for the audio loader if audio is not pending a timeline
+    // change to the current timeline.
+    //
+    // Since the main loader is responsible for setting the timestamp offset for both
+    // audio and video, the main loader must wait for audio to be about to change to its
+    // timeline before setting the offset, otherwise, if audio is behind in loading,
+    // segments from the previous timeline would be adjusted by the new timestamp offset.
+    //
+    // This requirement means that video will not cross a timeline until the audio is
+    // about to cross to it, so that way audio and video will always cross the timeline
+    // together.
+    //
+    // In addition to normal timeline changes, these rules also apply to the start of a
+    // stream (going from a non-existent timeline, -1, to timeline 0). It's important
+    // that these rules apply to the first timeline change because if they did not, it's
+    // possible that the main loader will cross two timelines before the audio loader has
+    // crossed one. Logic may be implemented to handle the startup as a special case, but
+    // it's easier to simply treat all timeline changes the same.
+
+    if (pendingAudioTimelineChange && pendingAudioTimelineChange.to === segmentTimeline) {
+      return false;
+    }
+    return true;
+  }
+  return false;
+};
+const mediaDuration = timingInfos => {
+  let maxDuration = 0;
+  ['video', 'audio'].forEach(function (type) {
+    const typeTimingInfo = timingInfos[`${type}TimingInfo`];
+    if (!typeTimingInfo) {
+      return;
+    }
+    const {
+      start,
+      end
+    } = typeTimingInfo;
+    let duration;
+    if (typeof start === 'bigint' || typeof end === 'bigint') {
+      duration = window__default["default"].BigInt(end) - window__default["default"].BigInt(start);
+    } else if (typeof start === 'number' && typeof end === 'number') {
+      duration = end - start;
+    }
+    if (typeof duration !== 'undefined' && duration > maxDuration) {
+      maxDuration = duration;
+    }
+  }); // convert back to a number if it is lower than MAX_SAFE_INTEGER
+  // as we only need BigInt when we are above that.
+
+  if (typeof maxDuration === 'bigint' && maxDuration < Number.MAX_SAFE_INTEGER) {
+    maxDuration = Number(maxDuration);
+  }
+  return maxDuration;
+};
+const segmentTooLong = ({
+  segmentDuration,
+  maxDuration
+}) => {
+  // 0 duration segments are most likely due to metadata only segments or a lack of
+  // information.
+  if (!segmentDuration) {
+    return false;
+  } // For HLS:
+  //
+  // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.3.1
+  // The EXTINF duration of each Media Segment in the Playlist
+  // file, when rounded to the nearest integer, MUST be less than or equal
+  // to the target duration; longer segments can trigger playback stalls
+  // or other errors.
+  //
+  // For DASH, the mpd-parser uses the largest reported segment duration as the target
+  // duration. Although that reported duration is occasionally approximate (i.e., not
+  // exact), a strict check may report that a segment is too long more often in DASH.
+
+  return Math.round(segmentDuration) > maxDuration + TIME_FUDGE_FACTOR;
+};
+const getTroublesomeSegmentDurationMessage = (segmentInfo, sourceType) => {
+  // Right now we aren't following DASH's timing model exactly, so only perform
+  // this check for HLS content.
+  if (sourceType !== 'hls') {
+    return null;
+  }
+  const segmentDuration = mediaDuration({
+    audioTimingInfo: segmentInfo.audioTimingInfo,
+    videoTimingInfo: segmentInfo.videoTimingInfo
+  }); // Don't report if we lack information.
+  //
+  // If the segment has a duration of 0 it is either a lack of information or a
+  // metadata only segment and shouldn't be reported here.
+
+  if (!segmentDuration) {
+    return null;
+  }
+  const targetDuration = segmentInfo.playlist.targetDuration;
+  const isSegmentWayTooLong = segmentTooLong({
+    segmentDuration,
+    maxDuration: targetDuration * 2
+  });
+  const isSegmentSlightlyTooLong = segmentTooLong({
+    segmentDuration,
+    maxDuration: targetDuration
+  });
+  const segmentTooLongMessage = `Segment with index ${segmentInfo.mediaIndex} ` + `from playlist ${segmentInfo.playlist.id} ` + `has a duration of ${segmentDuration} ` + `when the reported duration is ${segmentInfo.duration} ` + `and the target duration is ${targetDuration}. ` + 'For HLS content, a duration in excess of the target duration may result in ' + 'playback issues. See the HLS specification section on EXT-X-TARGETDURATION for ' + 'more details: ' + 'https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.3.1';
+  if (isSegmentWayTooLong || isSegmentSlightlyTooLong) {
+    return {
+      severity: isSegmentWayTooLong ? 'warn' : 'info',
+      message: segmentTooLongMessage
+    };
+  }
+  return null;
+};
+/**
+ * An object that manages segment loading and appending.
+ *
+ * @class SegmentLoader
+ * @param {Object} options required and optional options
+ * @extends videojs.EventTarget
+ */
+
+class SegmentLoader extends videojs.EventTarget {
+  constructor(settings, options = {}) {
+    super(); // check pre-conditions
+
+    if (!settings) {
+      throw new TypeError('Initialization settings are required');
+    }
+    if (typeof settings.currentTime !== 'function') {
+      throw new TypeError('No currentTime getter specified');
+    }
+    if (!settings.mediaSource) {
+      throw new TypeError('No MediaSource specified');
+    } // public properties
+
+    this.bandwidth = settings.bandwidth;
+    this.throughput = {
+      rate: 0,
+      count: 0
+    };
+    this.roundTrip = NaN;
+    this.resetStats_();
+    this.mediaIndex = null;
+    this.partIndex = null; // private settings
+
+    this.hasPlayed_ = settings.hasPlayed;
+    this.currentTime_ = settings.currentTime;
+    this.seekable_ = settings.seekable;
+    this.seeking_ = settings.seeking;
+    this.duration_ = settings.duration;
+    this.mediaSource_ = settings.mediaSource;
+    this.vhs_ = settings.vhs;
+    this.loaderType_ = settings.loaderType;
+    this.currentMediaInfo_ = void 0;
+    this.startingMediaInfo_ = void 0;
+    this.segmentMetadataTrack_ = settings.segmentMetadataTrack;
+    this.goalBufferLength_ = settings.goalBufferLength;
+    this.sourceType_ = settings.sourceType;
+    this.sourceUpdater_ = settings.sourceUpdater;
+    this.inbandTextTracks_ = settings.inbandTextTracks;
+    this.state_ = 'INIT';
+    this.timelineChangeController_ = settings.timelineChangeController;
+    this.shouldSaveSegmentTimingInfo_ = true;
+    this.parse708captions_ = settings.parse708captions;
+    this.useDtsForTimestampOffset_ = settings.useDtsForTimestampOffset;
+    this.captionServices_ = settings.captionServices;
+    this.exactManifestTimings = settings.exactManifestTimings;
+    this.addMetadataToTextTrack = settings.addMetadataToTextTrack; // private instance variables
+
+    this.checkBufferTimeout_ = null;
+    this.error_ = void 0;
+    this.currentTimeline_ = -1;
+    this.shouldForceTimestampOffsetAfterResync_ = false;
+    this.pendingSegment_ = null;
+    this.xhrOptions_ = null;
+    this.pendingSegments_ = [];
+    this.audioDisabled_ = false;
+    this.isPendingTimestampOffset_ = false; // TODO possibly move gopBuffer and timeMapping info to a separate controller
+
+    this.gopBuffer_ = [];
+    this.timeMapping_ = 0;
+    this.safeAppend_ = false;
+    this.appendInitSegment_ = {
+      audio: true,
+      video: true
+    };
+    this.playlistOfLastInitSegment_ = {
+      audio: null,
+      video: null
+    };
+    this.callQueue_ = []; // If the segment loader prepares to load a segment, but does not have enough
+    // information yet to start the loading process (e.g., if the audio loader wants to
+    // load a segment from the next timeline but the main loader hasn't yet crossed that
+    // timeline), then the load call will be added to the queue until it is ready to be
+    // processed.
+
+    this.loadQueue_ = [];
+    this.metadataQueue_ = {
+      id3: [],
+      caption: []
+    };
+    this.waitingOnRemove_ = false;
+    this.quotaExceededErrorRetryTimeout_ = null; // Fragmented mp4 playback
+
+    this.activeInitSegmentId_ = null;
+    this.initSegments_ = {}; // HLSe playback
+
+    this.cacheEncryptionKeys_ = settings.cacheEncryptionKeys;
+    this.keyCache_ = {};
+    this.decrypter_ = settings.decrypter; // Manages the tracking and generation of sync-points, mappings
+    // between a time in the display time and a segment index within
+    // a playlist
+
+    this.syncController_ = settings.syncController;
+    this.syncPoint_ = {
+      segmentIndex: 0,
+      time: 0
+    };
+    this.transmuxer_ = this.createTransmuxer_();
+    this.triggerSyncInfoUpdate_ = () => this.trigger('syncinfoupdate');
+    this.syncController_.on('syncinfoupdate', this.triggerSyncInfoUpdate_);
+    this.mediaSource_.addEventListener('sourceopen', () => {
+      if (!this.isEndOfStream_()) {
+        this.ended_ = false;
+      }
+    }); // ...for determining the fetch location
+
+    this.fetchAtBuffer_ = false;
+    this.logger_ = logger(`SegmentLoader[${this.loaderType_}]`);
+    Object.defineProperty(this, 'state', {
+      get() {
+        return this.state_;
+      },
+      set(newState) {
+        if (newState !== this.state_) {
+          this.logger_(`${this.state_} -> ${newState}`);
+          this.state_ = newState;
+          this.trigger('statechange');
+        }
+      }
+    });
+    this.sourceUpdater_.on('ready', () => {
+      if (this.hasEnoughInfoToAppend_()) {
+        this.processCallQueue_();
+      }
+    }); // Only the main loader needs to listen for pending timeline changes, as the main
+    // loader should wait for audio to be ready to change its timeline so that both main
+    // and audio timelines change together. For more details, see the
+    // shouldWaitForTimelineChange function.
+
+    if (this.loaderType_ === 'main') {
+      this.timelineChangeController_.on('pendingtimelinechange', () => {
+        if (this.hasEnoughInfoToAppend_()) {
+          this.processCallQueue_();
+        }
+      });
+    } // The main loader only listens on pending timeline changes, but the audio loader,
+    // since its loads follow main, needs to listen on timeline changes. For more details,
+    // see the shouldWaitForTimelineChange function.
+
+    if (this.loaderType_ === 'audio') {
+      this.timelineChangeController_.on('timelinechange', () => {
+        if (this.hasEnoughInfoToLoad_()) {
+          this.processLoadQueue_();
+        }
+        if (this.hasEnoughInfoToAppend_()) {
+          this.processCallQueue_();
+        }
+      });
+    }
+  }
+  /**
+   * TODO: Current sync controller consists of many hls-specific strategies
+   * media sequence sync is also hls-specific, and we would like to be protocol-agnostic on this level
+   * this should be a part of the sync-controller and sync controller should expect different strategy list based on the protocol.
+   *
+   * @return {MediaSequenceSync|null}
+   * @private
+   */
+
+  get mediaSequenceSync_() {
+    return this.syncController_.getMediaSequenceSync(this.loaderType_);
+  }
+  createTransmuxer_() {
+    return segmentTransmuxer.createTransmuxer({
+      remux: false,
+      alignGopsAtEnd: this.safeAppend_,
+      keepOriginalTimestamps: true,
+      parse708captions: this.parse708captions_,
+      captionServices: this.captionServices_
+    });
+  }
+  /**
+   * reset all of our media stats
+   *
+   * @private
+   */
+
+  resetStats_() {
+    this.mediaBytesTransferred = 0;
+    this.mediaRequests = 0;
+    this.mediaRequestsAborted = 0;
+    this.mediaRequestsTimedout = 0;
+    this.mediaRequestsErrored = 0;
+    this.mediaTransferDuration = 0;
+    this.mediaSecondsLoaded = 0;
+    this.mediaAppends = 0;
+  }
+  /**
+   * dispose of the SegmentLoader and reset to the default state
+   */
+
+  dispose() {
+    this.trigger('dispose');
+    this.state = 'DISPOSED';
+    this.pause();
+    this.abort_();
+    if (this.transmuxer_) {
+      this.transmuxer_.terminate();
+    }
+    this.resetStats_();
+    if (this.checkBufferTimeout_) {
+      window__default["default"].clearTimeout(this.checkBufferTimeout_);
+    }
+    if (this.syncController_ && this.triggerSyncInfoUpdate_) {
+      this.syncController_.off('syncinfoupdate', this.triggerSyncInfoUpdate_);
+    }
+    this.off();
+  }
+  setAudio(enable) {
+    this.audioDisabled_ = !enable;
+    if (enable) {
+      this.appendInitSegment_.audio = true;
+    } else {
+      // remove current track audio if it gets disabled
+      this.sourceUpdater_.removeAudio(0, this.duration_());
+    }
+  }
+  /**
+   * abort anything that is currently doing on with the SegmentLoader
+   * and reset to a default state
+   */
+
+  abort() {
+    if (this.state !== 'WAITING') {
+      if (this.pendingSegment_) {
+        this.pendingSegment_ = null;
+      }
+      return;
+    }
+    this.abort_(); // We aborted the requests we were waiting on, so reset the loader's state to READY
+    // since we are no longer "waiting" on any requests. XHR callback is not always run
+    // when the request is aborted. This will prevent the loader from being stuck in the
+    // WAITING state indefinitely.
+
+    this.state = 'READY'; // don't wait for buffer check timeouts to begin fetching the
+    // next segment
+
+    if (!this.paused()) {
+      this.monitorBuffer_();
+    }
+  }
+  /**
+   * abort all pending xhr requests and null any pending segements
+   *
+   * @private
+   */
+
+  abort_() {
+    if (this.pendingSegment_ && this.pendingSegment_.abortRequests) {
+      this.pendingSegment_.abortRequests();
+    } // clear out the segment being processed
+
+    this.pendingSegment_ = null;
+    this.callQueue_ = [];
+    this.loadQueue_ = [];
+    this.metadataQueue_.id3 = [];
+    this.metadataQueue_.caption = [];
+    this.timelineChangeController_.clearPendingTimelineChange(this.loaderType_);
+    this.waitingOnRemove_ = false;
+    window__default["default"].clearTimeout(this.quotaExceededErrorRetryTimeout_);
+    this.quotaExceededErrorRetryTimeout_ = null;
+  }
+  checkForAbort_(requestId) {
+    // If the state is APPENDING, then aborts will not modify the state, meaning the first
+    // callback that happens should reset the state to READY so that loading can continue.
+    if (this.state === 'APPENDING' && !this.pendingSegment_) {
+      this.state = 'READY';
+      return true;
+    }
+    if (!this.pendingSegment_ || this.pendingSegment_.requestId !== requestId) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * set an error on the segment loader and null out any pending segements
+   *
+   * @param {Error} error the error to set on the SegmentLoader
+   * @return {Error} the error that was set or that is currently set
+   */
+
+  error(error) {
+    if (typeof error !== 'undefined') {
+      this.logger_('error occurred:', error);
+      this.error_ = error;
+    }
+    this.pendingSegment_ = null;
+    return this.error_;
+  }
+  endOfStream() {
+    this.ended_ = true;
+    if (this.transmuxer_) {
+      // need to clear out any cached data to prepare for the new segment
+      segmentTransmuxer.reset(this.transmuxer_);
+    }
+    this.gopBuffer_.length = 0;
+    this.pause();
+    this.trigger('ended');
+  }
+  /**
+   * Indicates which time ranges are buffered
+   *
+   * @return {TimeRange}
+   *         TimeRange object representing the current buffered ranges
+   */
+
+  buffered_() {
+    const trackInfo = this.getMediaInfo_();
+    if (!this.sourceUpdater_ || !trackInfo) {
+      return createTimeRanges();
+    }
+    if (this.loaderType_ === 'main') {
+      const {
+        hasAudio,
+        hasVideo,
+        isMuxed
+      } = trackInfo;
+      if (hasVideo && hasAudio && !this.audioDisabled_ && !isMuxed) {
+        return this.sourceUpdater_.buffered();
+      }
+      if (hasVideo) {
+        return this.sourceUpdater_.videoBuffered();
+      }
+    } // One case that can be ignored for now is audio only with alt audio,
+    // as we don't yet have proper support for that.
+
+    return this.sourceUpdater_.audioBuffered();
+  }
+  /**
+   * Gets and sets init segment for the provided map
+   *
+   * @param {Object} map
+   *        The map object representing the init segment to get or set
+   * @param {boolean=} set
+   *        If true, the init segment for the provided map should be saved
+   * @return {Object}
+   *         map object for desired init segment
+   */
+
+  initSegmentForMap(map, set = false) {
+    if (!map) {
+      return null;
+    }
+    const id = initSegmentId(map);
+    let storedMap = this.initSegments_[id];
+    if (set && !storedMap && map.bytes) {
+      this.initSegments_[id] = storedMap = {
+        resolvedUri: map.resolvedUri,
+        byterange: map.byterange,
+        bytes: map.bytes,
+        tracks: map.tracks,
+        timescales: map.timescales
+      };
+    }
+    return storedMap || map;
+  }
+  /**
+   * Gets and sets key for the provided key
+   *
+   * @param {Object} key
+   *        The key object representing the key to get or set
+   * @param {boolean=} set
+   *        If true, the key for the provided key should be saved
+   * @return {Object}
+   *         Key object for desired key
+   */
+
+  segmentKey(key, set = false) {
+    if (!key) {
+      return null;
+    }
+    const id = segmentKeyId(key);
+    let storedKey = this.keyCache_[id]; // TODO: We should use the HTTP Expires header to invalidate our cache per
+    // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-6.2.3
+
+    if (this.cacheEncryptionKeys_ && set && !storedKey && key.bytes) {
+      this.keyCache_[id] = storedKey = {
+        resolvedUri: key.resolvedUri,
+        bytes: key.bytes
+      };
+    }
+    const result = {
+      resolvedUri: (storedKey || key).resolvedUri
+    };
+    if (storedKey) {
+      result.bytes = storedKey.bytes;
+    }
+    return result;
+  }
+  /**
+   * Returns true if all configuration required for loading is present, otherwise false.
+   *
+   * @return {boolean} True if the all configuration is ready for loading
+   * @private
+   */
+
+  couldBeginLoading_() {
+    return this.playlist_ && !this.paused();
+  }
+  /**
+   * load a playlist and start to fill the buffer
+   */
+
+  load() {
+    // un-pause
+    this.monitorBuffer_(); // if we don't have a playlist yet, keep waiting for one to be
+    // specified
+
+    if (!this.playlist_) {
+      return;
+    } // if all the configuration is ready, initialize and begin loading
+
+    if (this.state === 'INIT' && this.couldBeginLoading_()) {
+      return this.init_();
+    } // if we're in the middle of processing a segment already, don't
+    // kick off an additional segment request
+
+    if (!this.couldBeginLoading_() || this.state !== 'READY' && this.state !== 'INIT') {
+      return;
+    }
+    this.state = 'READY';
+  }
+  /**
+   * Once all the starting parameters have been specified, begin
+   * operation. This method should only be invoked from the INIT
+   * state.
+   *
+   * @private
+   */
+
+  init_() {
+    this.state = 'READY'; // if this is the audio segment loader, and it hasn't been inited before, then any old
+    // audio data from the muxed content should be removed
+
+    this.resetEverything();
+    return this.monitorBuffer_();
+  }
+  /**
+   * set a playlist on the segment loader
+   *
+   * @param {PlaylistLoader} media the playlist to set on the segment loader
+   */
+
+  playlist(newPlaylist, options = {}) {
+    if (!newPlaylist) {
+      return;
+    }
+    const oldPlaylist = this.playlist_;
+    const segmentInfo = this.pendingSegment_;
+    this.playlist_ = newPlaylist;
+    this.xhrOptions_ = options; // when we haven't started playing yet, the start of a live playlist
+    // is always our zero-time so force a sync update each time the playlist
+    // is refreshed from the server
+    //
+    // Use the INIT state to determine if playback has started, as the playlist sync info
+    // should be fixed once requests begin (as sync points are generated based on sync
+    // info), but not before then.
+
+    if (this.state === 'INIT') {
+      newPlaylist.syncInfo = {
+        mediaSequence: newPlaylist.mediaSequence,
+        time: 0
+      }; // Setting the date time mapping means mapping the program date time (if available)
+      // to time 0 on the player's timeline. The playlist's syncInfo serves a similar
+      // purpose, mapping the initial mediaSequence to time zero. Since the syncInfo can
+      // be updated as the playlist is refreshed before the loader starts loading, the
+      // program date time mapping needs to be updated as well.
+      //
+      // This mapping is only done for the main loader because a program date time should
+      // map equivalently between playlists.
+
+      if (this.loaderType_ === 'main') {
+        this.syncController_.setDateTimeMappingForStart(newPlaylist);
+      }
+    }
+    let oldId = null;
+    if (oldPlaylist) {
+      if (oldPlaylist.id) {
+        oldId = oldPlaylist.id;
+      } else if (oldPlaylist.uri) {
+        oldId = oldPlaylist.uri;
+      }
+    }
+    this.logger_(`playlist update [${oldId} => ${newPlaylist.id || newPlaylist.uri}]`);
+    if (this.mediaSequenceSync_) {
+      this.mediaSequenceSync_.update(newPlaylist, this.currentTime_());
+      this.logger_(`Playlist update:
+currentTime: ${this.currentTime_()}
+bufferedEnd: ${lastBufferedEnd(this.buffered_())}
+`, this.mediaSequenceSync_.diagnostics);
+    } // in VOD, this is always a rendition switch (or we updated our syncInfo above)
+    // in LIVE, we always want to update with new playlists (including refreshes)
+
+    this.trigger('syncinfoupdate'); // if we were unpaused but waiting for a playlist, start
+    // buffering now
+
+    if (this.state === 'INIT' && this.couldBeginLoading_()) {
+      return this.init_();
+    }
+    if (!oldPlaylist || oldPlaylist.uri !== newPlaylist.uri) {
+      if (this.mediaIndex !== null) {
+        // we must reset/resync the segment loader when we switch renditions and
+        // the segment loader is already synced to the previous rendition
+        // We only want to reset the loader here for LLHLS playback, as resetLoader sets fetchAtBuffer_
+        // to false, resulting in fetching segments at currentTime and causing repeated
+        // same-segment requests on playlist change. This erroneously drives up the playback watcher
+        // stalled segment count, as re-requesting segments at the currentTime or browser cached segments
+        // will not change the buffer.
+        // Reference for LLHLS fixes: https://github.com/videojs/http-streaming/pull/1201
+        const isLLHLS = !newPlaylist.endList && typeof newPlaylist.partTargetDuration === 'number';
+        if (isLLHLS) {
+          this.resetLoader();
+        } else {
+          this.resyncLoader();
+        }
+      }
+      this.currentMediaInfo_ = void 0;
+      this.trigger('playlistupdate'); // the rest of this function depends on `oldPlaylist` being defined
+
+      return;
+    } // we reloaded the same playlist so we are in a live scenario
+    // and we will likely need to adjust the mediaIndex
+
+    const mediaSequenceDiff = newPlaylist.mediaSequence - oldPlaylist.mediaSequence;
+    this.logger_(`live window shift [${mediaSequenceDiff}]`); // update the mediaIndex on the SegmentLoader
+    // this is important because we can abort a request and this value must be
+    // equal to the last appended mediaIndex
+
+    if (this.mediaIndex !== null) {
+      this.mediaIndex -= mediaSequenceDiff; // this can happen if we are going to load the first segment, but get a playlist
+      // update during that. mediaIndex would go from 0 to -1 if mediaSequence in the
+      // new playlist was incremented by 1.
+
+      if (this.mediaIndex < 0) {
+        this.mediaIndex = null;
+        this.partIndex = null;
+      } else {
+        const segment = this.playlist_.segments[this.mediaIndex]; // partIndex should remain the same for the same segment
+        // unless parts fell off of the playlist for this segment.
+        // In that case we need to reset partIndex and resync
+
+        if (this.partIndex && (!segment.parts || !segment.parts.length || !segment.parts[this.partIndex])) {
+          const mediaIndex = this.mediaIndex;
+          this.logger_(`currently processing part (index ${this.partIndex}) no longer exists.`);
+          this.resetLoader(); // We want to throw away the partIndex and the data associated with it,
+          // as the part was dropped from our current playlists segment.
+          // The mediaIndex will still be valid so keep that around.
+
+          this.mediaIndex = mediaIndex;
+        }
+      }
+    } // update the mediaIndex on the SegmentInfo object
+    // this is important because we will update this.mediaIndex with this value
+    // in `handleAppendsDone_` after the segment has been successfully appended
+
+    if (segmentInfo) {
+      segmentInfo.mediaIndex -= mediaSequenceDiff;
+      if (segmentInfo.mediaIndex < 0) {
+        segmentInfo.mediaIndex = null;
+        segmentInfo.partIndex = null;
+      } else {
+        // we need to update the referenced segment so that timing information is
+        // saved for the new playlist's segment, however, if the segment fell off the
+        // playlist, we can leave the old reference and just lose the timing info
+        if (segmentInfo.mediaIndex >= 0) {
+          segmentInfo.segment = newPlaylist.segments[segmentInfo.mediaIndex];
+        }
+        if (segmentInfo.partIndex >= 0 && segmentInfo.segment.parts) {
+          segmentInfo.part = segmentInfo.segment.parts[segmentInfo.partIndex];
+        }
+      }
+    }
+    this.syncController_.saveExpiredSegmentInfo(oldPlaylist, newPlaylist);
+  }
+  /**
+   * Prevent the loader from fetching additional segments. If there
+   * is a segment request outstanding, it will finish processing
+   * before the loader halts. A segment loader can be unpaused by
+   * calling load().
+   */
+
+  pause() {
+    if (this.checkBufferTimeout_) {
+      window__default["default"].clearTimeout(this.checkBufferTimeout_);
+      this.checkBufferTimeout_ = null;
+    }
+  }
+  /**
+   * Returns whether the segment loader is fetching additional
+   * segments when given the opportunity. This property can be
+   * modified through calls to pause() and load().
+   */
+
+  paused() {
+    return this.checkBufferTimeout_ === null;
+  }
+  /**
+   * Delete all the buffered data and reset the SegmentLoader
+   *
+   * @param {Function} [done] an optional callback to be executed when the remove
+   * operation is complete
+   */
+
+  resetEverything(done) {
+    this.ended_ = false;
+    this.activeInitSegmentId_ = null;
+    this.appendInitSegment_ = {
+      audio: true,
+      video: true
+    };
+    this.resetLoader(); // remove from 0, the earliest point, to Infinity, to signify removal of everything.
+    // VTT Segment Loader doesn't need to do anything but in the regular SegmentLoader,
+    // we then clamp the value to duration if necessary.
+
+    this.remove(0, Infinity, done); // clears fmp4 captions
+
+    if (this.transmuxer_) {
+      this.transmuxer_.postMessage({
+        action: 'clearAllMp4Captions'
+      }); // reset the cache in the transmuxer
+
+      this.transmuxer_.postMessage({
+        action: 'reset'
+      });
+    }
+  }
+  /**
+   * Force the SegmentLoader to resync and start loading around the currentTime instead
+   * of starting at the end of the buffer
+   *
+   * Useful for fast quality changes
+   */
+
+  resetLoader() {
+    this.fetchAtBuffer_ = false;
+    if (this.mediaSequenceSync_) {
+      this.mediaSequenceSync_.resetAppendedStatus();
+    }
+    this.resyncLoader();
+  }
+  /**
+   * Force the SegmentLoader to restart synchronization and make a conservative guess
+   * before returning to the simple walk-forward method
+   */
+
+  resyncLoader() {
+    if (this.transmuxer_) {
+      // need to clear out any cached data to prepare for the new segment
+      segmentTransmuxer.reset(this.transmuxer_);
+    }
+    this.mediaIndex = null;
+    this.partIndex = null;
+    this.syncPoint_ = null;
+    this.isPendingTimestampOffset_ = false; // this is mainly to sync timing-info when switching between renditions with and without timestamp-rollover,
+    // so we don't want it for DASH or fragmented mp4 segments.
+
+    const isFmp4 = this.currentMediaInfo_ && this.currentMediaInfo_.isFmp4;
+    const isHlsTs = this.sourceType_ === 'hls' && !isFmp4;
+    if (isHlsTs) {
+      this.shouldForceTimestampOffsetAfterResync_ = true;
+    }
+    this.callQueue_ = [];
+    this.loadQueue_ = [];
+    this.metadataQueue_.id3 = [];
+    this.metadataQueue_.caption = [];
+    this.abort();
+    if (this.transmuxer_) {
+      this.transmuxer_.postMessage({
+        action: 'clearParsedMp4Captions'
+      });
+    }
+  }
+  /**
+   * Remove any data in the source buffer between start and end times
+   *
+   * @param {number} start - the start time of the region to remove from the buffer
+   * @param {number} end - the end time of the region to remove from the buffer
+   * @param {Function} [done] - an optional callback to be executed when the remove
+   * @param {boolean} force - force all remove operations to happen
+   * operation is complete
+   */
+
+  remove(start, end, done = () => {}, force = false) {
+    // clamp end to duration if we need to remove everything.
+    // This is due to a browser bug that causes issues if we remove to Infinity.
+    // videojs/videojs-contrib-hls#1225
+    if (end === Infinity) {
+      end = this.duration_();
+    } // skip removes that would throw an error
+    // commonly happens during a rendition switch at the start of a video
+    // from start 0 to end 0
+
+    if (end <= start) {
+      this.logger_('skipping remove because end ${end} is <= start ${start}');
+      return;
+    }
+    if (!this.sourceUpdater_ || !this.getMediaInfo_()) {
+      this.logger_('skipping remove because no source updater or starting media info'); // nothing to remove if we haven't processed any media
+
+      return;
+    } // set it to one to complete this function's removes
+
+    let removesRemaining = 1;
+    const removeFinished = () => {
+      removesRemaining--;
+      if (removesRemaining === 0) {
+        done();
+      }
+    };
+    if (force || !this.audioDisabled_) {
+      removesRemaining++;
+      this.sourceUpdater_.removeAudio(start, end, removeFinished);
+    } // While it would be better to only remove video if the main loader has video, this
+    // should be safe with audio only as removeVideo will call back even if there's no
+    // video buffer.
+    //
+    // In theory we can check to see if there's video before calling the remove, but in
+    // the event that we're switching between renditions and from video to audio only
+    // (when we add support for that), we may need to clear the video contents despite
+    // what the new media will contain.
+
+    if (force || this.loaderType_ === 'main') {
+      this.gopBuffer_ = removeGopBuffer(this.gopBuffer_, start, end, this.timeMapping_);
+      removesRemaining++;
+      this.sourceUpdater_.removeVideo(start, end, removeFinished);
+    } // remove any captions and ID3 tags
+
+    for (const track in this.inbandTextTracks_) {
+      removeCuesFromTrack(start, end, this.inbandTextTracks_[track]);
+    }
+    removeCuesFromTrack(start, end, this.segmentMetadataTrack_); // finished this function's removes
+
+    removeFinished();
+  }
+  /**
+   * (re-)schedule monitorBufferTick_ to run as soon as possible
+   *
+   * @private
+   */
+
+  monitorBuffer_() {
+    if (this.checkBufferTimeout_) {
+      window__default["default"].clearTimeout(this.checkBufferTimeout_);
+    }
+    this.checkBufferTimeout_ = window__default["default"].setTimeout(this.monitorBufferTick_.bind(this), 1);
+  }
+  /**
+   * As long as the SegmentLoader is in the READY state, periodically
+   * invoke fillBuffer_().
+   *
+   * @private
+   */
+
+  monitorBufferTick_() {
+    if (this.state === 'READY') {
+      this.fillBuffer_();
+    }
+    if (this.checkBufferTimeout_) {
+      window__default["default"].clearTimeout(this.checkBufferTimeout_);
+    }
+    this.checkBufferTimeout_ = window__default["default"].setTimeout(this.monitorBufferTick_.bind(this), CHECK_BUFFER_DELAY);
+  }
+  /**
+   * fill the buffer with segements unless the sourceBuffers are
+   * currently updating
+   *
+   * Note: this function should only ever be called by monitorBuffer_
+   * and never directly
+   *
+   * @private
+   */
+
+  fillBuffer_() {
+    // TODO since the source buffer maintains a queue, and we shouldn't call this function
+    // except when we're ready for the next segment, this check can most likely be removed
+    if (this.sourceUpdater_.updating()) {
+      return;
+    } // see if we need to begin loading immediately
+
+    const segmentInfo = this.chooseNextRequest_();
+    if (!segmentInfo) {
+      return;
+    }
+    if (typeof segmentInfo.timestampOffset === 'number') {
+      this.isPendingTimestampOffset_ = false;
+      this.timelineChangeController_.pendingTimelineChange({
+        type: this.loaderType_,
+        from: this.currentTimeline_,
+        to: segmentInfo.timeline
+      });
+    }
+    this.loadSegment_(segmentInfo);
+  }
+  /**
+   * Determines if we should call endOfStream on the media source based
+   * on the state of the buffer or if appened segment was the final
+   * segment in the playlist.
+   *
+   * @param {number} [mediaIndex] the media index of segment we last appended
+   * @param {Object} [playlist] a media playlist object
+   * @return {boolean} do we need to call endOfStream on the MediaSource
+   */
+
+  isEndOfStream_(mediaIndex = this.mediaIndex, playlist = this.playlist_, partIndex = this.partIndex) {
+    if (!playlist || !this.mediaSource_) {
+      return false;
+    }
+    const segment = typeof mediaIndex === 'number' && playlist.segments[mediaIndex]; // mediaIndex is zero based but length is 1 based
+
+    const appendedLastSegment = mediaIndex + 1 === playlist.segments.length; // true if there are no parts, or this is the last part.
+
+    const appendedLastPart = !segment || !segment.parts || partIndex + 1 === segment.parts.length; // if we've buffered to the end of the video, we need to call endOfStream
+    // so that MediaSources can trigger the `ended` event when it runs out of
+    // buffered data instead of waiting for me
+
+    return playlist.endList && this.mediaSource_.readyState === 'open' && appendedLastSegment && appendedLastPart;
+  }
+  /**
+   * Determines what request should be made given current segment loader state.
+   *
+   * @return {Object} a request object that describes the segment/part to load
+   */
+
+  chooseNextRequest_() {
+    const buffered = this.buffered_();
+    const bufferedEnd = lastBufferedEnd(buffered) || 0;
+    const bufferedTime = timeAheadOf(buffered, this.currentTime_());
+    const preloaded = !this.hasPlayed_() && bufferedTime >= 1;
+    const haveEnoughBuffer = bufferedTime >= this.goalBufferLength_();
+    const segments = this.playlist_.segments; // return no segment if:
+    // 1. we don't have segments
+    // 2. The video has not yet played and we already downloaded a segment
+    // 3. we already have enough buffered time
+
+    if (!segments.length || preloaded || haveEnoughBuffer) {
+      return null;
+    }
+    this.syncPoint_ = this.syncPoint_ || this.syncController_.getSyncPoint(this.playlist_, this.duration_(), this.currentTimeline_, this.currentTime_(), this.loaderType_);
+    const next = {
+      partIndex: null,
+      mediaIndex: null,
+      startOfSegment: null,
+      playlist: this.playlist_,
+      isSyncRequest: Boolean(!this.syncPoint_)
+    };
+    if (next.isSyncRequest) {
+      next.mediaIndex = getSyncSegmentCandidate(this.currentTimeline_, segments, bufferedEnd);
+      this.logger_(`choose next request. Can not find sync point. Fallback to media Index: ${next.mediaIndex}`);
+    } else if (this.mediaIndex !== null) {
+      const segment = segments[this.mediaIndex];
+      const partIndex = typeof this.partIndex === 'number' ? this.partIndex : -1;
+      next.startOfSegment = segment.end ? segment.end : bufferedEnd;
+      if (segment.parts && segment.parts[partIndex + 1]) {
+        next.mediaIndex = this.mediaIndex;
+        next.partIndex = partIndex + 1;
+      } else {
+        next.mediaIndex = this.mediaIndex + 1;
+      }
+    } else {
+      let segmentIndex;
+      let partIndex;
+      let startTime;
+      const targetTime = this.fetchAtBuffer_ ? bufferedEnd : this.currentTime_();
+      if (this.mediaSequenceSync_) {
+        this.logger_(`chooseNextRequest_ request after Quality Switch:
+For TargetTime: ${targetTime}.
+CurrentTime: ${this.currentTime_()}
+BufferedEnd: ${bufferedEnd}
+Fetch At Buffer: ${this.fetchAtBuffer_}
+`, this.mediaSequenceSync_.diagnostics);
+      }
+      if (this.mediaSequenceSync_ && this.mediaSequenceSync_.isReliable) {
+        const syncInfo = this.getSyncInfoFromMediaSequenceSync_(targetTime);
+        if (!syncInfo) {
+          this.logger_('chooseNextRequest_ - no sync info found using media sequence sync'); // no match
+
+          return null;
+        }
+        this.logger_(`chooseNextRequest_ mediaSequence syncInfo (${syncInfo.start} --> ${syncInfo.end})`);
+        segmentIndex = syncInfo.segmentIndex;
+        partIndex = syncInfo.partIndex;
+        startTime = syncInfo.start;
+      } else {
+        this.logger_('chooseNextRequest_ - fallback to a regular segment selection algorithm, based on a syncPoint.'); // fallback
+
+        const mediaInfoForTime = Playlist.getMediaInfoForTime({
+          exactManifestTimings: this.exactManifestTimings,
+          playlist: this.playlist_,
+          currentTime: targetTime,
+          startingPartIndex: this.syncPoint_.partIndex,
+          startingSegmentIndex: this.syncPoint_.segmentIndex,
+          startTime: this.syncPoint_.time
+        });
+        segmentIndex = mediaInfoForTime.segmentIndex;
+        partIndex = mediaInfoForTime.partIndex;
+        startTime = mediaInfoForTime.startTime;
+      }
+      next.getMediaInfoForTime = this.fetchAtBuffer_ ? `bufferedEnd ${targetTime}` : `currentTime ${targetTime}`;
+      next.mediaIndex = segmentIndex;
+      next.startOfSegment = startTime;
+      next.partIndex = partIndex;
+      this.logger_(`choose next request. Playlist switched and we have a sync point. Media Index: ${next.mediaIndex} `);
+    }
+    const nextSegment = segments[next.mediaIndex];
+    let nextPart = nextSegment && typeof next.partIndex === 'number' && nextSegment.parts && nextSegment.parts[next.partIndex]; // if the next segment index is invalid or
+    // the next partIndex is invalid do not choose a next segment.
+
+    if (!nextSegment || typeof next.partIndex === 'number' && !nextPart) {
+      return null;
+    } // if the next segment has parts, and we don't have a partIndex.
+    // Set partIndex to 0
+
+    if (typeof next.partIndex !== 'number' && nextSegment.parts) {
+      next.partIndex = 0;
+      nextPart = nextSegment.parts[0];
+    } // independentSegments applies to every segment in a playlist. If independentSegments appears in a main playlist,
+    // it applies to each segment in each media playlist.
+    // https://datatracker.ietf.org/doc/html/draft-pantos-http-live-streaming-23#section-4.3.5.1
+
+    const hasIndependentSegments = this.vhs_.playlists && this.vhs_.playlists.main && this.vhs_.playlists.main.independentSegments || this.playlist_.independentSegments; // if we have no buffered data then we need to make sure
+    // that the next part we append is "independent" if possible.
+    // So we check if the previous part is independent, and request
+    // it if it is.
+
+    if (!bufferedTime && nextPart && !hasIndependentSegments && !nextPart.independent) {
+      if (next.partIndex === 0) {
+        const lastSegment = segments[next.mediaIndex - 1];
+        const lastSegmentLastPart = lastSegment.parts && lastSegment.parts.length && lastSegment.parts[lastSegment.parts.length - 1];
+        if (lastSegmentLastPart && lastSegmentLastPart.independent) {
+          next.mediaIndex -= 1;
+          next.partIndex = lastSegment.parts.length - 1;
+          next.independent = 'previous segment';
+        }
+      } else if (nextSegment.parts[next.partIndex - 1].independent) {
+        next.partIndex -= 1;
+        next.independent = 'previous part';
+      }
+    }
+    const ended = this.mediaSource_ && this.mediaSource_.readyState === 'ended'; // do not choose a next segment if all of the following:
+    // 1. this is the last segment in the playlist
+    // 2. end of stream has been called on the media source already
+    // 3. the player is not seeking
+
+    if (next.mediaIndex >= segments.length - 1 && ended && !this.seeking_()) {
+      return null;
+    }
+    if (this.shouldForceTimestampOffsetAfterResync_) {
+      this.shouldForceTimestampOffsetAfterResync_ = false;
+      next.forceTimestampOffset = true;
+      this.logger_('choose next request. Force timestamp offset after loader resync');
+    }
+    return this.generateSegmentInfo_(next);
+  }
+  getSyncInfoFromMediaSequenceSync_(targetTime) {
+    if (!this.mediaSequenceSync_) {
+      return null;
+    } // we should pull the target time to the least available time if we drop out of sync for any reason
+
+    const finalTargetTime = Math.max(targetTime, this.mediaSequenceSync_.start);
+    if (targetTime !== finalTargetTime) {
+      this.logger_(`getSyncInfoFromMediaSequenceSync_. Pulled target time from ${targetTime} to ${finalTargetTime}`);
+    }
+    const mediaSequenceSyncInfo = this.mediaSequenceSync_.getSyncInfoForTime(finalTargetTime);
+    if (!mediaSequenceSyncInfo) {
+      // no match at all
+      return null;
+    }
+    if (!mediaSequenceSyncInfo.isAppended) {
+      // has a perfect match
+      return mediaSequenceSyncInfo;
+    } // has match, but segment was already appended.
+    // attempt to auto-advance to the nearest next segment:
+
+    const nextMediaSequenceSyncInfo = this.mediaSequenceSync_.getSyncInfoForTime(mediaSequenceSyncInfo.end);
+    if (!nextMediaSequenceSyncInfo) {
+      // no match at all
+      return null;
+    }
+    if (nextMediaSequenceSyncInfo.isAppended) {
+      this.logger_('getSyncInfoFromMediaSequenceSync_: We encounter unexpected scenario where next media sequence sync info is also appended!');
+    } // got match with the nearest next segment
+
+    return nextMediaSequenceSyncInfo;
+  }
+  generateSegmentInfo_(options) {
+    const {
+      independent,
+      playlist,
+      mediaIndex,
+      startOfSegment,
+      isSyncRequest,
+      partIndex,
+      forceTimestampOffset,
+      getMediaInfoForTime
+    } = options;
+    const segment = playlist.segments[mediaIndex];
+    const part = typeof partIndex === 'number' && segment.parts[partIndex];
+    const segmentInfo = {
+      requestId: 'segment-loader-' + Math.random(),
+      // resolve the segment URL relative to the playlist
+      uri: part && part.resolvedUri || segment.resolvedUri,
+      // the segment's mediaIndex at the time it was requested
+      mediaIndex,
+      partIndex: part ? partIndex : null,
+      // whether or not to update the SegmentLoader's state with this
+      // segment's mediaIndex
+      isSyncRequest,
+      startOfSegment,
+      // the segment's playlist
+      playlist,
+      // unencrypted bytes of the segment
+      bytes: null,
+      // when a key is defined for this segment, the encrypted bytes
+      encryptedBytes: null,
+      // The target timestampOffset for this segment when we append it
+      // to the source buffer
+      timestampOffset: null,
+      // The timeline that the segment is in
+      timeline: segment.timeline,
+      // The expected duration of the segment in seconds
+      duration: part && part.duration || segment.duration,
+      // retain the segment in case the playlist updates while doing an async process
+      segment,
+      part,
+      byteLength: 0,
+      transmuxer: this.transmuxer_,
+      // type of getMediaInfoForTime that was used to get this segment
+      getMediaInfoForTime,
+      independent
+    };
+    const overrideCheck = typeof forceTimestampOffset !== 'undefined' ? forceTimestampOffset : this.isPendingTimestampOffset_;
+    segmentInfo.timestampOffset = this.timestampOffsetForSegment_({
+      segmentTimeline: segment.timeline,
+      currentTimeline: this.currentTimeline_,
+      startOfSegment,
+      buffered: this.buffered_(),
+      overrideCheck
+    });
+    const audioBufferedEnd = lastBufferedEnd(this.sourceUpdater_.audioBuffered());
+    if (typeof audioBufferedEnd === 'number') {
+      // since the transmuxer is using the actual timing values, but the buffer is
+      // adjusted by the timestamp offset, we must adjust the value here
+      segmentInfo.audioAppendStart = audioBufferedEnd - this.sourceUpdater_.audioTimestampOffset();
+    }
+    if (this.sourceUpdater_.videoBuffered().length) {
+      segmentInfo.gopsToAlignWith = gopsSafeToAlignWith(this.gopBuffer_,
+      // since the transmuxer is using the actual timing values, but the time is
+      // adjusted by the timestmap offset, we must adjust the value here
+      this.currentTime_() - this.sourceUpdater_.videoTimestampOffset(), this.timeMapping_);
+    }
+    return segmentInfo;
+  } // get the timestampoffset for a segment,
+  // added so that vtt segment loader can override and prevent
+  // adding timestamp offsets.
+
+  timestampOffsetForSegment_(options) {
+    return timestampOffsetForSegment(options);
+  }
+  /**
+   * Determines if the network has enough bandwidth to complete the current segment
+   * request in a timely manner. If not, the request will be aborted early and bandwidth
+   * updated to trigger a playlist switch.
+   *
+   * @param {Object} stats
+   *        Object containing stats about the request timing and size
+   * @private
+   */
+
+  earlyAbortWhenNeeded_(stats) {
+    if (this.vhs_.tech_.paused() ||
+    // Don't abort if the current playlist is on the lowestEnabledRendition
+    // TODO: Replace using timeout with a boolean indicating whether this playlist is
+    //       the lowestEnabledRendition.
+    !this.xhrOptions_.timeout ||
+    // Don't abort if we have no bandwidth information to estimate segment sizes
+    !this.playlist_.attributes.BANDWIDTH) {
+      return;
+    } // Wait at least 1 second since the first byte of data has been received before
+    // using the calculated bandwidth from the progress event to allow the bitrate
+    // to stabilize
+
+    if (Date.now() - (stats.firstBytesReceivedAt || Date.now()) < 1000) {
+      return;
+    }
+    const currentTime = this.currentTime_();
+    const measuredBandwidth = stats.bandwidth;
+    const segmentDuration = this.pendingSegment_.duration;
+    const requestTimeRemaining = Playlist.estimateSegmentRequestTime(segmentDuration, measuredBandwidth, this.playlist_, stats.bytesReceived); // Subtract 1 from the timeUntilRebuffer so we still consider an early abort
+    // if we are only left with less than 1 second when the request completes.
+    // A negative timeUntilRebuffering indicates we are already rebuffering
+
+    const timeUntilRebuffer$1 = timeUntilRebuffer(this.buffered_(), currentTime, this.vhs_.tech_.playbackRate()) - 1; // Only consider aborting early if the estimated time to finish the download
+    // is larger than the estimated time until the player runs out of forward buffer
+
+    if (requestTimeRemaining <= timeUntilRebuffer$1) {
+      return;
+    }
+    const switchCandidate = minRebufferMaxBandwidthSelector({
+      main: this.vhs_.playlists.main,
+      currentTime,
+      bandwidth: measuredBandwidth,
+      duration: this.duration_(),
+      segmentDuration,
+      timeUntilRebuffer: timeUntilRebuffer$1,
+      currentTimeline: this.currentTimeline_,
+      syncController: this.syncController_
+    });
+    if (!switchCandidate) {
+      return;
+    }
+    const rebufferingImpact = requestTimeRemaining - timeUntilRebuffer$1;
+    const timeSavedBySwitching = rebufferingImpact - switchCandidate.rebufferingImpact;
+    let minimumTimeSaving = 0.5; // If we are already rebuffering, increase the amount of variance we add to the
+    // potential round trip time of the new request so that we are not too aggressive
+    // with switching to a playlist that might save us a fraction of a second.
+
+    if (timeUntilRebuffer$1 <= TIME_FUDGE_FACTOR) {
+      minimumTimeSaving = 1;
+    }
+    if (!switchCandidate.playlist || switchCandidate.playlist.uri === this.playlist_.uri || timeSavedBySwitching < minimumTimeSaving) {
+      return;
+    } // set the bandwidth to that of the desired playlist being sure to scale by
+    // BANDWIDTH_VARIANCE and add one so the playlist selector does not exclude it
+    // don't trigger a bandwidthupdate as the bandwidth is artifial
+
+    this.bandwidth = switchCandidate.playlist.attributes.BANDWIDTH * Config.BANDWIDTH_VARIANCE + 1;
+    this.trigger('earlyabort');
+  }
+  handleAbort_(segmentInfo) {
+    this.logger_(`Aborting ${segmentInfoString(segmentInfo)}`);
+    this.mediaRequestsAborted += 1;
+  }
+  /**
+   * XHR `progress` event handler
+   *
+   * @param {Event}
+   *        The XHR `progress` event
+   * @param {Object} simpleSegment
+   *        A simplified segment object copy
+   * @private
+   */
+
+  handleProgress_(event, simpleSegment) {
+    this.earlyAbortWhenNeeded_(simpleSegment.stats);
+    if (this.checkForAbort_(simpleSegment.requestId)) {
+      return;
+    }
+    this.trigger('progress');
+  }
+  handleTrackInfo_(simpleSegment, trackInfo) {
+    this.earlyAbortWhenNeeded_(simpleSegment.stats);
+    if (this.checkForAbort_(simpleSegment.requestId)) {
+      return;
+    }
+    if (this.checkForIllegalMediaSwitch(trackInfo)) {
+      return;
+    }
+    trackInfo = trackInfo || {}; // When we have track info, determine what media types this loader is dealing with.
+    // Guard against cases where we're not getting track info at all until we are
+    // certain that all streams will provide it.
+
+    if (!shallowEqual(this.currentMediaInfo_, trackInfo)) {
+      this.appendInitSegment_ = {
+        audio: true,
+        video: true
+      };
+      this.startingMediaInfo_ = trackInfo;
+      this.currentMediaInfo_ = trackInfo;
+      this.logger_('trackinfo update', trackInfo);
+      this.trigger('trackinfo');
+    } // trackinfo may cause an abort if the trackinfo
+    // causes a codec change to an unsupported codec.
+
+    if (this.checkForAbort_(simpleSegment.requestId)) {
+      return;
+    } // set trackinfo on the pending segment so that
+    // it can append.
+
+    this.pendingSegment_.trackInfo = trackInfo; // check if any calls were waiting on the track info
+
+    if (this.hasEnoughInfoToAppend_()) {
+      this.processCallQueue_();
+    }
+  }
+  handleTimingInfo_(simpleSegment, mediaType, timeType, time) {
+    this.earlyAbortWhenNeeded_(simpleSegment.stats);
+    if (this.checkForAbort_(simpleSegment.requestId)) {
+      return;
+    }
+    const segmentInfo = this.pendingSegment_;
+    const timingInfoProperty = timingInfoPropertyForMedia(mediaType);
+    segmentInfo[timingInfoProperty] = segmentInfo[timingInfoProperty] || {};
+    segmentInfo[timingInfoProperty][timeType] = time;
+    this.logger_(`timinginfo: ${mediaType} - ${timeType} - ${time}`); // check if any calls were waiting on the timing info
+
+    if (this.hasEnoughInfoToAppend_()) {
+      this.processCallQueue_();
+    }
+  }
+  handleCaptions_(simpleSegment, captionData) {
+    this.earlyAbortWhenNeeded_(simpleSegment.stats);
+    if (this.checkForAbort_(simpleSegment.requestId)) {
+      return;
+    } // This could only happen with fmp4 segments, but
+    // should still not happen in general
+
+    if (captionData.length === 0) {
+      this.logger_('SegmentLoader received no captions from a caption event');
+      return;
+    }
+    const segmentInfo = this.pendingSegment_; // Wait until we have some video data so that caption timing
+    // can be adjusted by the timestamp offset
+
+    if (!segmentInfo.hasAppendedData_) {
+      this.metadataQueue_.caption.push(this.handleCaptions_.bind(this, simpleSegment, captionData));
+      return;
+    }
+    const timestampOffset = this.sourceUpdater_.videoTimestampOffset() === null ? this.sourceUpdater_.audioTimestampOffset() : this.sourceUpdater_.videoTimestampOffset();
+    const captionTracks = {}; // get total start/end and captions for each track/stream
+
+    captionData.forEach(caption => {
+      // caption.stream is actually a track name...
+      // set to the existing values in tracks or default values
+      captionTracks[caption.stream] = captionTracks[caption.stream] || {
+        // Infinity, as any other value will be less than this
+        startTime: Infinity,
+        captions: [],
+        // 0 as an other value will be more than this
+        endTime: 0
+      };
+      const captionTrack = captionTracks[caption.stream];
+      captionTrack.startTime = Math.min(captionTrack.startTime, caption.startTime + timestampOffset);
+      captionTrack.endTime = Math.max(captionTrack.endTime, caption.endTime + timestampOffset);
+      captionTrack.captions.push(caption);
+    });
+    Object.keys(captionTracks).forEach(trackName => {
+      const {
+        startTime,
+        endTime,
+        captions
+      } = captionTracks[trackName];
+      const inbandTextTracks = this.inbandTextTracks_;
+      this.logger_(`adding cues from ${startTime} -> ${endTime} for ${trackName}`);
+      createCaptionsTrackIfNotExists(inbandTextTracks, this.vhs_.tech_, trackName); // clear out any cues that start and end at the same time period for the same track.
+      // We do this because a rendition change that also changes the timescale for captions
+      // will result in captions being re-parsed for certain segments. If we add them again
+      // without clearing we will have two of the same captions visible.
+
+      removeCuesFromTrack(startTime, endTime, inbandTextTracks[trackName]);
+      addCaptionData({
+        captionArray: captions,
+        inbandTextTracks,
+        timestampOffset
+      });
+    }); // Reset stored captions since we added parsed
+    // captions to a text track at this point
+
+    if (this.transmuxer_) {
+      this.transmuxer_.postMessage({
+        action: 'clearParsedMp4Captions'
+      });
+    }
+  }
+  handleId3_(simpleSegment, id3Frames, dispatchType) {
+    this.earlyAbortWhenNeeded_(simpleSegment.stats);
+    if (this.checkForAbort_(simpleSegment.requestId)) {
+      return;
+    }
+    const segmentInfo = this.pendingSegment_; // we need to have appended data in order for the timestamp offset to be set
+
+    if (!segmentInfo.hasAppendedData_) {
+      this.metadataQueue_.id3.push(this.handleId3_.bind(this, simpleSegment, id3Frames, dispatchType));
+      return;
+    }
+    this.addMetadataToTextTrack(dispatchType, id3Frames, this.duration_());
+  }
+  processMetadataQueue_() {
+    this.metadataQueue_.id3.forEach(fn => fn());
+    this.metadataQueue_.caption.forEach(fn => fn());
+    this.metadataQueue_.id3 = [];
+    this.metadataQueue_.caption = [];
+  }
+  processCallQueue_() {
+    const callQueue = this.callQueue_; // Clear out the queue before the queued functions are run, since some of the
+    // functions may check the length of the load queue and default to pushing themselves
+    // back onto the queue.
+
+    this.callQueue_ = [];
+    callQueue.forEach(fun => fun());
+  }
+  processLoadQueue_() {
+    const loadQueue = this.loadQueue_; // Clear out the queue before the queued functions are run, since some of the
+    // functions may check the length of the load queue and default to pushing themselves
+    // back onto the queue.
+
+    this.loadQueue_ = [];
+    loadQueue.forEach(fun => fun());
+  }
+  /**
+   * Determines whether the loader has enough info to load the next segment.
+   *
+   * @return {boolean}
+   *         Whether or not the loader has enough info to load the next segment
+   */
+
+  hasEnoughInfoToLoad_() {
+    // Since primary timing goes by video, only the audio loader potentially needs to wait
+    // to load.
+    if (this.loaderType_ !== 'audio') {
+      return true;
+    }
+    const segmentInfo = this.pendingSegment_; // A fill buffer must have already run to establish a pending segment before there's
+    // enough info to load.
+
+    if (!segmentInfo) {
+      return false;
+    } // The first segment can and should be loaded immediately so that source buffers are
+    // created together (before appending). Source buffer creation uses the presence of
+    // audio and video data to determine whether to create audio/video source buffers, and
+    // uses processed (transmuxed or parsed) media to determine the types required.
+
+    if (!this.getCurrentMediaInfo_()) {
+      return true;
+    }
+    if (
+    // Technically, instead of waiting to load a segment on timeline changes, a segment
+    // can be requested and downloaded and only wait before it is transmuxed or parsed.
+    // But in practice, there are a few reasons why it is better to wait until a loader
+    // is ready to append that segment before requesting and downloading:
+    //
+    // 1. Because audio and main loaders cross discontinuities together, if this loader
+    //    is waiting for the other to catch up, then instead of requesting another
+    //    segment and using up more bandwidth, by not yet loading, more bandwidth is
+    //    allotted to the loader currently behind.
+    // 2. media-segment-request doesn't have to have logic to consider whether a segment
+    // is ready to be processed or not, isolating the queueing behavior to the loader.
+    // 3. The audio loader bases some of its segment properties on timing information
+    //    provided by the main loader, meaning that, if the logic for waiting on
+    //    processing was in media-segment-request, then it would also need to know how
+    //    to re-generate the segment information after the main loader caught up.
+    shouldWaitForTimelineChange({
+      timelineChangeController: this.timelineChangeController_,
+      currentTimeline: this.currentTimeline_,
+      segmentTimeline: segmentInfo.timeline,
+      loaderType: this.loaderType_,
+      audioDisabled: this.audioDisabled_
+    })) {
+      return false;
+    }
+    return true;
+  }
+  getCurrentMediaInfo_(segmentInfo = this.pendingSegment_) {
+    return segmentInfo && segmentInfo.trackInfo || this.currentMediaInfo_;
+  }
+  getMediaInfo_(segmentInfo = this.pendingSegment_) {
+    return this.getCurrentMediaInfo_(segmentInfo) || this.startingMediaInfo_;
+  }
+  getPendingSegmentPlaylist() {
+    return this.pendingSegment_ ? this.pendingSegment_.playlist : null;
+  }
+  hasEnoughInfoToAppend_() {
+    if (!this.sourceUpdater_.ready()) {
+      return false;
+    } // If content needs to be removed or the loader is waiting on an append reattempt,
+    // then no additional content should be appended until the prior append is resolved.
+
+    if (this.waitingOnRemove_ || this.quotaExceededErrorRetryTimeout_) {
+      return false;
+    }
+    const segmentInfo = this.pendingSegment_;
+    const trackInfo = this.getCurrentMediaInfo_(); // no segment to append any data for or
+    // we do not have information on this specific
+    // segment yet
+
+    if (!segmentInfo || !trackInfo) {
+      return false;
+    }
+    const {
+      hasAudio,
+      hasVideo,
+      isMuxed
+    } = trackInfo;
+    if (hasVideo && !segmentInfo.videoTimingInfo) {
+      return false;
+    } // muxed content only relies on video timing information for now.
+
+    if (hasAudio && !this.audioDisabled_ && !isMuxed && !segmentInfo.audioTimingInfo) {
+      return false;
+    }
+    if (shouldWaitForTimelineChange({
+      timelineChangeController: this.timelineChangeController_,
+      currentTimeline: this.currentTimeline_,
+      segmentTimeline: segmentInfo.timeline,
+      loaderType: this.loaderType_,
+      audioDisabled: this.audioDisabled_
+    })) {
+      return false;
+    }
+    return true;
+  }
+  handleData_(simpleSegment, result) {
+    this.earlyAbortWhenNeeded_(simpleSegment.stats);
+    if (this.checkForAbort_(simpleSegment.requestId)) {
+      return;
+    } // If there's anything in the call queue, then this data came later and should be
+    // executed after the calls currently queued.
+
+    if (this.callQueue_.length || !this.hasEnoughInfoToAppend_()) {
+      this.callQueue_.push(this.handleData_.bind(this, simpleSegment, result));
+      return;
+    }
+    const segmentInfo = this.pendingSegment_; // update the time mapping so we can translate from display time to media time
+
+    this.setTimeMapping_(segmentInfo.timeline); // for tracking overall stats
+
+    this.updateMediaSecondsLoaded_(segmentInfo.part || segmentInfo.segment); // Note that the state isn't changed from loading to appending. This is because abort
+    // logic may change behavior depending on the state, and changing state too early may
+    // inflate our estimates of bandwidth. In the future this should be re-examined to
+    // note more granular states.
+    // don't process and append data if the mediaSource is closed
+
+    if (this.mediaSource_.readyState === 'closed') {
+      return;
+    } // if this request included an initialization segment, save that data
+    // to the initSegment cache
+
+    if (simpleSegment.map) {
+      simpleSegment.map = this.initSegmentForMap(simpleSegment.map, true); // move over init segment properties to media request
+
+      segmentInfo.segment.map = simpleSegment.map;
+    } // if this request included a segment key, save that data in the cache
+
+    if (simpleSegment.key) {
+      this.segmentKey(simpleSegment.key, true);
+    }
+    segmentInfo.isFmp4 = simpleSegment.isFmp4;
+    segmentInfo.timingInfo = segmentInfo.timingInfo || {};
+    if (segmentInfo.isFmp4) {
+      this.trigger('fmp4');
+      segmentInfo.timingInfo.start = segmentInfo[timingInfoPropertyForMedia(result.type)].start;
+    } else {
+      const trackInfo = this.getCurrentMediaInfo_();
+      const useVideoTimingInfo = this.loaderType_ === 'main' && trackInfo && trackInfo.hasVideo;
+      let firstVideoFrameTimeForData;
+      if (useVideoTimingInfo) {
+        firstVideoFrameTimeForData = segmentInfo.videoTimingInfo.start;
+      } // Segment loader knows more about segment timing than the transmuxer (in certain
+      // aspects), so make any changes required for a more accurate start time.
+      // Don't set the end time yet, as the segment may not be finished processing.
+
+      segmentInfo.timingInfo.start = this.trueSegmentStart_({
+        currentStart: segmentInfo.timingInfo.start,
+        playlist: segmentInfo.playlist,
+        mediaIndex: segmentInfo.mediaIndex,
+        currentVideoTimestampOffset: this.sourceUpdater_.videoTimestampOffset(),
+        useVideoTimingInfo,
+        firstVideoFrameTimeForData,
+        videoTimingInfo: segmentInfo.videoTimingInfo,
+        audioTimingInfo: segmentInfo.audioTimingInfo
+      });
+    } // Init segments for audio and video only need to be appended in certain cases. Now
+    // that data is about to be appended, we can check the final cases to determine
+    // whether we should append an init segment.
+
+    this.updateAppendInitSegmentStatus(segmentInfo, result.type); // Timestamp offset should be updated once we get new data and have its timing info,
+    // as we use the start of the segment to offset the best guess (playlist provided)
+    // timestamp offset.
+
+    this.updateSourceBufferTimestampOffset_(segmentInfo); // if this is a sync request we need to determine whether it should
+    // be appended or not.
+
+    if (segmentInfo.isSyncRequest) {
+      // first save/update our timing info for this segment.
+      // this is what allows us to choose an accurate segment
+      // and the main reason we make a sync request.
+      this.updateTimingInfoEnd_(segmentInfo);
+      this.syncController_.saveSegmentTimingInfo({
+        segmentInfo,
+        shouldSaveTimelineMapping: this.loaderType_ === 'main'
+      });
+      const next = this.chooseNextRequest_(); // If the sync request isn't the segment that would be requested next
+      // after taking into account its timing info, do not append it.
+
+      if (next.mediaIndex !== segmentInfo.mediaIndex || next.partIndex !== segmentInfo.partIndex) {
+        this.logger_('sync segment was incorrect, not appending');
+        return;
+      } // otherwise append it like any other segment as our guess was correct.
+
+      this.logger_('sync segment was correct, appending');
+    } // Save some state so that in the future anything waiting on first append (and/or
+    // timestamp offset(s)) can process immediately. While the extra state isn't optimal,
+    // we need some notion of whether the timestamp offset or other relevant information
+    // has had a chance to be set.
+
+    segmentInfo.hasAppendedData_ = true; // Now that the timestamp offset should be set, we can append any waiting ID3 tags.
+
+    this.processMetadataQueue_();
+    this.appendData_(segmentInfo, result);
+  }
+  updateAppendInitSegmentStatus(segmentInfo, type) {
+    // alt audio doesn't manage timestamp offset
+    if (this.loaderType_ === 'main' && typeof segmentInfo.timestampOffset === 'number' &&
+    // in the case that we're handling partial data, we don't want to append an init
+    // segment for each chunk
+    !segmentInfo.changedTimestampOffset) {
+      // if the timestamp offset changed, the timeline may have changed, so we have to re-
+      // append init segments
+      this.appendInitSegment_ = {
+        audio: true,
+        video: true
+      };
+    }
+    if (this.playlistOfLastInitSegment_[type] !== segmentInfo.playlist) {
+      // make sure we append init segment on playlist changes, in case the media config
+      // changed
+      this.appendInitSegment_[type] = true;
+    }
+  }
+  getInitSegmentAndUpdateState_({
+    type,
+    initSegment,
+    map,
+    playlist
+  }) {
+    // "The EXT-X-MAP tag specifies how to obtain the Media Initialization Section
+    // (Section 3) required to parse the applicable Media Segments.  It applies to every
+    // Media Segment that appears after it in the Playlist until the next EXT-X-MAP tag
+    // or until the end of the playlist."
+    // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.2.5
+    if (map) {
+      const id = initSegmentId(map);
+      if (this.activeInitSegmentId_ === id) {
+        // don't need to re-append the init segment if the ID matches
+        return null;
+      } // a map-specified init segment takes priority over any transmuxed (or otherwise
+      // obtained) init segment
+      //
+      // this also caches the init segment for later use
+
+      initSegment = this.initSegmentForMap(map, true).bytes;
+      this.activeInitSegmentId_ = id;
+    } // We used to always prepend init segments for video, however, that shouldn't be
+    // necessary. Instead, we should only append on changes, similar to what we've always
+    // done for audio. This is more important (though may not be that important) for
+    // frame-by-frame appending for LHLS, simply because of the increased quantity of
+    // appends.
+
+    if (initSegment && this.appendInitSegment_[type]) {
+      // Make sure we track the playlist that we last used for the init segment, so that
+      // we can re-append the init segment in the event that we get data from a new
+      // playlist. Discontinuities and track changes are handled in other sections.
+      this.playlistOfLastInitSegment_[type] = playlist; // Disable future init segment appends for this type. Until a change is necessary.
+
+      this.appendInitSegment_[type] = false; // we need to clear out the fmp4 active init segment id, since
+      // we are appending the muxer init segment
+
+      this.activeInitSegmentId_ = null;
+      return initSegment;
+    }
+    return null;
+  }
+  handleQuotaExceededError_({
+    segmentInfo,
+    type,
+    bytes
+  }, error) {
+    const audioBuffered = this.sourceUpdater_.audioBuffered();
+    const videoBuffered = this.sourceUpdater_.videoBuffered(); // For now we're ignoring any notion of gaps in the buffer, but they, in theory,
+    // should be cleared out during the buffer removals. However, log in case it helps
+    // debug.
+
+    if (audioBuffered.length > 1) {
+      this.logger_('On QUOTA_EXCEEDED_ERR, found gaps in the audio buffer: ' + timeRangesToArray(audioBuffered).join(', '));
+    }
+    if (videoBuffered.length > 1) {
+      this.logger_('On QUOTA_EXCEEDED_ERR, found gaps in the video buffer: ' + timeRangesToArray(videoBuffered).join(', '));
+    }
+    const audioBufferStart = audioBuffered.length ? audioBuffered.start(0) : 0;
+    const audioBufferEnd = audioBuffered.length ? audioBuffered.end(audioBuffered.length - 1) : 0;
+    const videoBufferStart = videoBuffered.length ? videoBuffered.start(0) : 0;
+    const videoBufferEnd = videoBuffered.length ? videoBuffered.end(videoBuffered.length - 1) : 0;
+    if (audioBufferEnd - audioBufferStart <= MIN_BACK_BUFFER && videoBufferEnd - videoBufferStart <= MIN_BACK_BUFFER) {
+      // Can't remove enough buffer to make room for new segment (or the browser doesn't
+      // allow for appends of segments this size). In the future, it may be possible to
+      // split up the segment and append in pieces, but for now, error out this playlist
+      // in an attempt to switch to a more manageable rendition.
+      this.logger_('On QUOTA_EXCEEDED_ERR, single segment too large to append to ' + 'buffer, triggering an error. ' + `Appended byte length: ${bytes.byteLength}, ` + `audio buffer: ${timeRangesToArray(audioBuffered).join(', ')}, ` + `video buffer: ${timeRangesToArray(videoBuffered).join(', ')}, `);
+      this.error({
+        message: 'Quota exceeded error with append of a single segment of content',
+        excludeUntil: Infinity,
+        metadata: {
+          errorType: videojs.Error.SegmentExceedsSourceBufferQuota
+        }
+      });
+      this.trigger('error');
+      return;
+    } // To try to resolve the quota exceeded error, clear back buffer and retry. This means
+    // that the segment-loader should block on future events until this one is handled, so
+    // that it doesn't keep moving onto further segments. Adding the call to the call
+    // queue will prevent further appends until waitingOnRemove_ and
+    // quotaExceededErrorRetryTimeout_ are cleared.
+    //
+    // Note that this will only block the current loader. In the case of demuxed content,
+    // the other load may keep filling as fast as possible. In practice, this should be
+    // OK, as it is a rare case when either audio has a high enough bitrate to fill up a
+    // source buffer, or video fills without enough room for audio to append (and without
+    // the availability of clearing out seconds of back buffer to make room for audio).
+    // But it might still be good to handle this case in the future as a TODO.
+
+    this.waitingOnRemove_ = true;
+    this.callQueue_.push(this.appendToSourceBuffer_.bind(this, {
+      segmentInfo,
+      type,
+      bytes
+    }));
+    const currentTime = this.currentTime_(); // Try to remove as much audio and video as possible to make room for new content
+    // before retrying.
+
+    const timeToRemoveUntil = currentTime - MIN_BACK_BUFFER;
+    this.logger_(`On QUOTA_EXCEEDED_ERR, removing audio/video from 0 to ${timeToRemoveUntil}`);
+    this.remove(0, timeToRemoveUntil, () => {
+      this.logger_(`On QUOTA_EXCEEDED_ERR, retrying append in ${MIN_BACK_BUFFER}s`);
+      this.waitingOnRemove_ = false; // wait the length of time alotted in the back buffer to prevent wasted
+      // attempts (since we can't clear less than the minimum)
+
+      this.quotaExceededErrorRetryTimeout_ = window__default["default"].setTimeout(() => {
+        this.logger_('On QUOTA_EXCEEDED_ERR, re-processing call queue');
+        this.quotaExceededErrorRetryTimeout_ = null;
+        this.processCallQueue_();
+      }, MIN_BACK_BUFFER * 1000);
+    }, true);
+  }
+  handleAppendError_({
+    segmentInfo,
+    type,
+    bytes
+  }, error) {
+    // if there's no error, nothing to do
+    if (!error) {
+      return;
+    }
+    if (error.code === QUOTA_EXCEEDED_ERR) {
+      this.handleQuotaExceededError_({
+        segmentInfo,
+        type,
+        bytes
+      }); // A quota exceeded error should be recoverable with a future re-append, so no need
+      // to trigger an append error.
+
+      return;
+    }
+    this.logger_('Received non QUOTA_EXCEEDED_ERR on append', error); // If an append errors, we often can't recover.
+    // (see https://w3c.github.io/media-source/#sourcebuffer-append-error).
+    //
+    // Trigger a special error so that it can be handled separately from normal,
+    // recoverable errors.
+
+    this.error({
+      message: `${type} append of ${bytes.length}b failed for segment ` + `#${segmentInfo.mediaIndex} in playlist ${segmentInfo.playlist.id}`,
+      metadata: {
+        errorType: videojs.Error.SegmentAppendError
+      }
+    });
+    this.trigger('appenderror');
+  }
+  appendToSourceBuffer_({
+    segmentInfo,
+    type,
+    initSegment,
+    data,
+    bytes
+  }) {
+    // If this is a re-append, bytes were already created and don't need to be recreated
+    if (!bytes) {
+      const segments = [data];
+      let byteLength = data.byteLength;
+      if (initSegment) {
+        // if the media initialization segment is changing, append it before the content
+        // segment
+        segments.unshift(initSegment);
+        byteLength += initSegment.byteLength;
+      } // Technically we should be OK appending the init segment separately, however, we
+      // haven't yet tested that, and prepending is how we have always done things.
+
+      bytes = concatSegments({
+        bytes: byteLength,
+        segments
+      });
+    }
+    this.sourceUpdater_.appendBuffer({
+      segmentInfo,
+      type,
+      bytes
+    }, this.handleAppendError_.bind(this, {
+      segmentInfo,
+      type,
+      bytes
+    }));
+  }
+  handleSegmentTimingInfo_(type, requestId, segmentTimingInfo) {
+    if (!this.pendingSegment_ || requestId !== this.pendingSegment_.requestId) {
+      return;
+    }
+    const segment = this.pendingSegment_.segment;
+    const timingInfoProperty = `${type}TimingInfo`;
+    if (!segment[timingInfoProperty]) {
+      segment[timingInfoProperty] = {};
+    }
+    segment[timingInfoProperty].transmuxerPrependedSeconds = segmentTimingInfo.prependedContentDuration || 0;
+    segment[timingInfoProperty].transmuxedPresentationStart = segmentTimingInfo.start.presentation;
+    segment[timingInfoProperty].transmuxedDecodeStart = segmentTimingInfo.start.decode;
+    segment[timingInfoProperty].transmuxedPresentationEnd = segmentTimingInfo.end.presentation;
+    segment[timingInfoProperty].transmuxedDecodeEnd = segmentTimingInfo.end.decode; // mainly used as a reference for debugging
+
+    segment[timingInfoProperty].baseMediaDecodeTime = segmentTimingInfo.baseMediaDecodeTime;
+  }
+  appendData_(segmentInfo, result) {
+    const {
+      type,
+      data
+    } = result;
+    if (!data || !data.byteLength) {
+      return;
+    }
+    if (type === 'audio' && this.audioDisabled_) {
+      return;
+    }
+    const initSegment = this.getInitSegmentAndUpdateState_({
+      type,
+      initSegment: result.initSegment,
+      playlist: segmentInfo.playlist,
+      map: segmentInfo.isFmp4 ? segmentInfo.segment.map : null
+    });
+    this.appendToSourceBuffer_({
+      segmentInfo,
+      type,
+      initSegment,
+      data
+    });
+  }
+  /**
+   * load a specific segment from a request into the buffer
+   *
+   * @private
+   */
+
+  loadSegment_(segmentInfo) {
+    this.state = 'WAITING';
+    this.pendingSegment_ = segmentInfo;
+    this.trimBackBuffer_(segmentInfo);
+    if (typeof segmentInfo.timestampOffset === 'number') {
+      if (this.transmuxer_) {
+        this.transmuxer_.postMessage({
+          action: 'clearAllMp4Captions'
+        });
+      }
+    }
+    if (!this.hasEnoughInfoToLoad_()) {
+      this.loadQueue_.push(() => {
+        // regenerate the audioAppendStart, timestampOffset, etc as they
+        // may have changed since this function was added to the queue.
+        const options = _extends__default["default"]({}, segmentInfo, {
+          forceTimestampOffset: true
+        });
+        _extends__default["default"](segmentInfo, this.generateSegmentInfo_(options));
+        this.isPendingTimestampOffset_ = false;
+        this.updateTransmuxerAndRequestSegment_(segmentInfo);
+      });
+      return;
+    }
+    this.updateTransmuxerAndRequestSegment_(segmentInfo);
+  }
+  updateTransmuxerAndRequestSegment_(segmentInfo) {
+    // We'll update the source buffer's timestamp offset once we have transmuxed data, but
+    // the transmuxer still needs to be updated before then.
+    //
+    // Even though keepOriginalTimestamps is set to true for the transmuxer, timestamp
+    // offset must be passed to the transmuxer for stream correcting adjustments.
+    if (this.shouldUpdateTransmuxerTimestampOffset_(segmentInfo.timestampOffset)) {
+      this.gopBuffer_.length = 0; // gopsToAlignWith was set before the GOP buffer was cleared
+
+      segmentInfo.gopsToAlignWith = [];
+      this.timeMapping_ = 0; // reset values in the transmuxer since a discontinuity should start fresh
+
+      this.transmuxer_.postMessage({
+        action: 'reset'
+      });
+      this.transmuxer_.postMessage({
+        action: 'setTimestampOffset',
+        timestampOffset: segmentInfo.timestampOffset
+      });
+    }
+    const simpleSegment = this.createSimplifiedSegmentObj_(segmentInfo);
+    const isEndOfStream = this.isEndOfStream_(segmentInfo.mediaIndex, segmentInfo.playlist, segmentInfo.partIndex);
+    const isWalkingForward = this.mediaIndex !== null;
+    const isDiscontinuity = segmentInfo.timeline !== this.currentTimeline_ &&
+    // currentTimeline starts at -1, so we shouldn't end the timeline switching to 0,
+    // the first timeline
+    segmentInfo.timeline > 0;
+    const isEndOfTimeline = isEndOfStream || isWalkingForward && isDiscontinuity;
+    this.logger_(`Requesting
+${compactSegmentUrlDescription(segmentInfo.uri)}
+${segmentInfoString(segmentInfo)}`); // If there's an init segment associated with this segment, but it is not cached (identified by a lack of bytes),
+    // then this init segment has never been seen before and should be appended.
+    //
+    // At this point the content type (audio/video or both) is not yet known, but it should be safe to set
+    // both to true and leave the decision of whether to append the init segment to append time.
+
+    if (simpleSegment.map && !simpleSegment.map.bytes) {
+      this.logger_('going to request init segment.');
+      this.appendInitSegment_ = {
+        video: true,
+        audio: true
+      };
+    }
+    segmentInfo.abortRequests = mediaSegmentRequest({
+      xhr: this.vhs_.xhr,
+      xhrOptions: this.xhrOptions_,
+      decryptionWorker: this.decrypter_,
+      segment: simpleSegment,
+      abortFn: this.handleAbort_.bind(this, segmentInfo),
+      progressFn: this.handleProgress_.bind(this),
+      trackInfoFn: this.handleTrackInfo_.bind(this),
+      timingInfoFn: this.handleTimingInfo_.bind(this),
+      videoSegmentTimingInfoFn: this.handleSegmentTimingInfo_.bind(this, 'video', segmentInfo.requestId),
+      audioSegmentTimingInfoFn: this.handleSegmentTimingInfo_.bind(this, 'audio', segmentInfo.requestId),
+      captionsFn: this.handleCaptions_.bind(this),
+      isEndOfTimeline,
+      endedTimelineFn: () => {
+        this.logger_('received endedtimeline callback');
+      },
+      id3Fn: this.handleId3_.bind(this),
+      dataFn: this.handleData_.bind(this),
+      doneFn: this.segmentRequestFinished_.bind(this),
+      onTransmuxerLog: ({
+        message,
+        level,
+        stream
+      }) => {
+        this.logger_(`${segmentInfoString(segmentInfo)} logged from transmuxer stream ${stream} as a ${level}: ${message}`);
+      }
+    });
+  }
+  /**
+   * trim the back buffer so that we don't have too much data
+   * in the source buffer
+   *
+   * @private
+   *
+   * @param {Object} segmentInfo - the current segment
+   */
+
+  trimBackBuffer_(segmentInfo) {
+    const removeToTime = safeBackBufferTrimTime(this.seekable_(), this.currentTime_(), this.playlist_.targetDuration || 10); // Chrome has a hard limit of 150MB of
+    // buffer and a very conservative "garbage collector"
+    // We manually clear out the old buffer to ensure
+    // we don't trigger the QuotaExceeded error
+    // on the source buffer during subsequent appends
+
+    if (removeToTime > 0) {
+      this.remove(0, removeToTime);
+    }
+  }
+  /**
+   * created a simplified copy of the segment object with just the
+   * information necessary to perform the XHR and decryption
+   *
+   * @private
+   *
+   * @param {Object} segmentInfo - the current segment
+   * @return {Object} a simplified segment object copy
+   */
+
+  createSimplifiedSegmentObj_(segmentInfo) {
+    const segment = segmentInfo.segment;
+    const part = segmentInfo.part;
+    const simpleSegment = {
+      resolvedUri: part ? part.resolvedUri : segment.resolvedUri,
+      byterange: part ? part.byterange : segment.byterange,
+      requestId: segmentInfo.requestId,
+      transmuxer: segmentInfo.transmuxer,
+      audioAppendStart: segmentInfo.audioAppendStart,
+      gopsToAlignWith: segmentInfo.gopsToAlignWith,
+      part: segmentInfo.part
+    };
+    const previousSegment = segmentInfo.playlist.segments[segmentInfo.mediaIndex - 1];
+    if (previousSegment && previousSegment.timeline === segment.timeline) {
+      // The baseStartTime of a segment is used to handle rollover when probing the TS
+      // segment to retrieve timing information. Since the probe only looks at the media's
+      // times (e.g., PTS and DTS values of the segment), and doesn't consider the
+      // player's time (e.g., player.currentTime()), baseStartTime should reflect the
+      // media time as well. transmuxedDecodeEnd represents the end time of a segment, in
+      // seconds of media time, so should be used here. The previous segment is used since
+      // the end of the previous segment should represent the beginning of the current
+      // segment, so long as they are on the same timeline.
+      if (previousSegment.videoTimingInfo) {
+        simpleSegment.baseStartTime = previousSegment.videoTimingInfo.transmuxedDecodeEnd;
+      } else if (previousSegment.audioTimingInfo) {
+        simpleSegment.baseStartTime = previousSegment.audioTimingInfo.transmuxedDecodeEnd;
+      }
+    }
+    if (segment.key) {
+      // if the media sequence is greater than 2^32, the IV will be incorrect
+      // assuming 10s segments, that would be about 1300 years
+      const iv = segment.key.iv || new Uint32Array([0, 0, 0, segmentInfo.mediaIndex + segmentInfo.playlist.mediaSequence]);
+      simpleSegment.key = this.segmentKey(segment.key);
+      simpleSegment.key.iv = iv;
+    }
+    if (segment.map) {
+      simpleSegment.map = this.initSegmentForMap(segment.map);
+    }
+    return simpleSegment;
+  }
+  saveTransferStats_(stats) {
+    // every request counts as a media request even if it has been aborted
+    // or canceled due to a timeout
+    this.mediaRequests += 1;
+    if (stats) {
+      this.mediaBytesTransferred += stats.bytesReceived;
+      this.mediaTransferDuration += stats.roundTripTime;
+    }
+  }
+  saveBandwidthRelatedStats_(duration, stats) {
+    // byteLength will be used for throughput, and should be based on bytes receieved,
+    // which we only know at the end of the request and should reflect total bytes
+    // downloaded rather than just bytes processed from components of the segment
+    this.pendingSegment_.byteLength = stats.bytesReceived;
+    if (duration < MIN_SEGMENT_DURATION_TO_SAVE_STATS) {
+      this.logger_(`Ignoring segment's bandwidth because its duration of ${duration}` + ` is less than the min to record ${MIN_SEGMENT_DURATION_TO_SAVE_STATS}`);
+      return;
+    }
+    this.bandwidth = stats.bandwidth;
+    this.roundTrip = stats.roundTripTime;
+  }
+  handleTimeout_() {
+    // although the VTT segment loader bandwidth isn't really used, it's good to
+    // maintain functinality between segment loaders
+    this.mediaRequestsTimedout += 1;
+    this.bandwidth = 1;
+    this.roundTrip = NaN;
+    this.trigger('bandwidthupdate');
+    this.trigger('timeout');
+  }
+  /**
+   * Handle the callback from the segmentRequest function and set the
+   * associated SegmentLoader state and errors if necessary
+   *
+   * @private
+   */
+
+  segmentRequestFinished_(error, simpleSegment, result) {
+    // TODO handle special cases, e.g., muxed audio/video but only audio in the segment
+    // check the call queue directly since this function doesn't need to deal with any
+    // data, and can continue even if the source buffers are not set up and we didn't get
+    // any data from the segment
+    if (this.callQueue_.length) {
+      this.callQueue_.push(this.segmentRequestFinished_.bind(this, error, simpleSegment, result));
+      return;
+    }
+    this.saveTransferStats_(simpleSegment.stats); // The request was aborted and the SegmentLoader has already been reset
+
+    if (!this.pendingSegment_) {
+      return;
+    } // the request was aborted and the SegmentLoader has already started
+    // another request. this can happen when the timeout for an aborted
+    // request triggers due to a limitation in the XHR library
+    // do not count this as any sort of request or we risk double-counting
+
+    if (simpleSegment.requestId !== this.pendingSegment_.requestId) {
+      return;
+    } // an error occurred from the active pendingSegment_ so reset everything
+
+    if (error) {
+      this.pendingSegment_ = null;
+      this.state = 'READY'; // aborts are not a true error condition and nothing corrective needs to be done
+
+      if (error.code === REQUEST_ERRORS.ABORTED) {
+        return;
+      }
+      this.pause(); // the error is really just that at least one of the requests timed-out
+      // set the bandwidth to a very low value and trigger an ABR switch to
+      // take emergency action
+
+      if (error.code === REQUEST_ERRORS.TIMEOUT) {
+        this.handleTimeout_();
+        return;
+      } // if control-flow has arrived here, then the error is real
+      // emit an error event to exclude the current playlist
+
+      this.mediaRequestsErrored += 1;
+      this.error(error);
+      this.trigger('error');
+      return;
+    }
+    const segmentInfo = this.pendingSegment_; // the response was a success so set any bandwidth stats the request
+    // generated for ABR purposes
+
+    this.saveBandwidthRelatedStats_(segmentInfo.duration, simpleSegment.stats);
+    segmentInfo.endOfAllRequests = simpleSegment.endOfAllRequests;
+    if (result.gopInfo) {
+      this.gopBuffer_ = updateGopBuffer(this.gopBuffer_, result.gopInfo, this.safeAppend_);
+    } // Although we may have already started appending on progress, we shouldn't switch the
+    // state away from loading until we are officially done loading the segment data.
+
+    this.state = 'APPENDING'; // used for testing
+
+    this.trigger('appending');
+    this.waitForAppendsToComplete_(segmentInfo);
+  }
+  setTimeMapping_(timeline) {
+    const timelineMapping = this.syncController_.mappingForTimeline(timeline);
+    if (timelineMapping !== null) {
+      this.timeMapping_ = timelineMapping;
+    }
+  }
+  updateMediaSecondsLoaded_(segment) {
+    if (typeof segment.start === 'number' && typeof segment.end === 'number') {
+      this.mediaSecondsLoaded += segment.end - segment.start;
+    } else {
+      this.mediaSecondsLoaded += segment.duration;
+    }
+  }
+  shouldUpdateTransmuxerTimestampOffset_(timestampOffset) {
+    if (timestampOffset === null) {
+      return false;
+    } // note that we're potentially using the same timestamp offset for both video and
+    // audio
+
+    if (this.loaderType_ === 'main' && timestampOffset !== this.sourceUpdater_.videoTimestampOffset()) {
+      return true;
+    }
+    if (!this.audioDisabled_ && timestampOffset !== this.sourceUpdater_.audioTimestampOffset()) {
+      return true;
+    }
+    return false;
+  }
+  trueSegmentStart_({
+    currentStart,
+    playlist,
+    mediaIndex,
+    firstVideoFrameTimeForData,
+    currentVideoTimestampOffset,
+    useVideoTimingInfo,
+    videoTimingInfo,
+    audioTimingInfo
+  }) {
+    if (typeof currentStart !== 'undefined') {
+      // if start was set once, keep using it
+      return currentStart;
+    }
+    if (!useVideoTimingInfo) {
+      return audioTimingInfo.start;
+    }
+    const previousSegment = playlist.segments[mediaIndex - 1]; // The start of a segment should be the start of the first full frame contained
+    // within that segment. Since the transmuxer maintains a cache of incomplete data
+    // from and/or the last frame seen, the start time may reflect a frame that starts
+    // in the previous segment. Check for that case and ensure the start time is
+    // accurate for the segment.
+
+    if (mediaIndex === 0 || !previousSegment || typeof previousSegment.start === 'undefined' || previousSegment.end !== firstVideoFrameTimeForData + currentVideoTimestampOffset) {
+      return firstVideoFrameTimeForData;
+    }
+    return videoTimingInfo.start;
+  }
+  waitForAppendsToComplete_(segmentInfo) {
+    const trackInfo = this.getCurrentMediaInfo_(segmentInfo);
+    if (!trackInfo) {
+      this.error({
+        message: 'No starting media returned, likely due to an unsupported media format.',
+        playlistExclusionDuration: Infinity,
+        metadata: {
+          errorType: videojs.Error.SegmentUnsupportedMediaFormat
+        }
+      });
+      this.trigger('error');
+      return;
+    } // Although transmuxing is done, appends may not yet be finished. Throw a marker
+    // on each queue this loader is responsible for to ensure that the appends are
+    // complete.
+
+    const {
+      hasAudio,
+      hasVideo,
+      isMuxed
+    } = trackInfo;
+    const waitForVideo = this.loaderType_ === 'main' && hasVideo;
+    const waitForAudio = !this.audioDisabled_ && hasAudio && !isMuxed;
+    segmentInfo.waitingOnAppends = 0; // segments with no data
+
+    if (!segmentInfo.hasAppendedData_) {
+      if (!segmentInfo.timingInfo && typeof segmentInfo.timestampOffset === 'number') {
+        // When there's no audio or video data in the segment, there's no audio or video
+        // timing information.
+        //
+        // If there's no audio or video timing information, then the timestamp offset
+        // can't be adjusted to the appropriate value for the transmuxer and source
+        // buffers.
+        //
+        // Therefore, the next segment should be used to set the timestamp offset.
+        this.isPendingTimestampOffset_ = true;
+      } // override settings for metadata only segments
+
+      segmentInfo.timingInfo = {
+        start: 0
+      };
+      segmentInfo.waitingOnAppends++;
+      if (!this.isPendingTimestampOffset_) {
+        // update the timestampoffset
+        this.updateSourceBufferTimestampOffset_(segmentInfo); // make sure the metadata queue is processed even though we have
+        // no video/audio data.
+
+        this.processMetadataQueue_();
+      } // append is "done" instantly with no data.
+
+      this.checkAppendsDone_(segmentInfo);
+      return;
+    } // Since source updater could call back synchronously, do the increments first.
+
+    if (waitForVideo) {
+      segmentInfo.waitingOnAppends++;
+    }
+    if (waitForAudio) {
+      segmentInfo.waitingOnAppends++;
+    }
+    if (waitForVideo) {
+      this.sourceUpdater_.videoQueueCallback(this.checkAppendsDone_.bind(this, segmentInfo));
+    }
+    if (waitForAudio) {
+      this.sourceUpdater_.audioQueueCallback(this.checkAppendsDone_.bind(this, segmentInfo));
+    }
+  }
+  checkAppendsDone_(segmentInfo) {
+    if (this.checkForAbort_(segmentInfo.requestId)) {
+      return;
+    }
+    segmentInfo.waitingOnAppends--;
+    if (segmentInfo.waitingOnAppends === 0) {
+      this.handleAppendsDone_();
+    }
+  }
+  checkForIllegalMediaSwitch(trackInfo) {
+    const illegalMediaSwitchError = illegalMediaSwitch(this.loaderType_, this.getCurrentMediaInfo_(), trackInfo);
+    if (illegalMediaSwitchError) {
+      this.error({
+        message: illegalMediaSwitchError,
+        playlistExclusionDuration: Infinity,
+        metadata: {
+          errorType: videojs.Error.SegmentSwitchError
+        }
+      });
+      this.trigger('error');
+      return true;
+    }
+    return false;
+  }
+  updateSourceBufferTimestampOffset_(segmentInfo) {
+    if (segmentInfo.timestampOffset === null ||
+    // we don't yet have the start for whatever media type (video or audio) has
+    // priority, timing-wise, so we must wait
+    typeof segmentInfo.timingInfo.start !== 'number' ||
+    // already updated the timestamp offset for this segment
+    segmentInfo.changedTimestampOffset ||
+    // the alt audio loader should not be responsible for setting the timestamp offset
+    this.loaderType_ !== 'main') {
+      return;
+    }
+    let didChange = false; // Primary timing goes by video, and audio is trimmed in the transmuxer, meaning that
+    // the timing info here comes from video. In the event that the audio is longer than
+    // the video, this will trim the start of the audio.
+    // This also trims any offset from 0 at the beginning of the media
+
+    segmentInfo.timestampOffset -= this.getSegmentStartTimeForTimestampOffsetCalculation_({
+      videoTimingInfo: segmentInfo.segment.videoTimingInfo,
+      audioTimingInfo: segmentInfo.segment.audioTimingInfo,
+      timingInfo: segmentInfo.timingInfo
+    }); // In the event that there are part segment downloads, each will try to update the
+    // timestamp offset. Retaining this bit of state prevents us from updating in the
+    // future (within the same segment), however, there may be a better way to handle it.
+
+    segmentInfo.changedTimestampOffset = true;
+    if (segmentInfo.timestampOffset !== this.sourceUpdater_.videoTimestampOffset()) {
+      this.sourceUpdater_.videoTimestampOffset(segmentInfo.timestampOffset);
+      didChange = true;
+    }
+    if (segmentInfo.timestampOffset !== this.sourceUpdater_.audioTimestampOffset()) {
+      this.sourceUpdater_.audioTimestampOffset(segmentInfo.timestampOffset);
+      didChange = true;
+    }
+    if (didChange) {
+      this.trigger('timestampoffset');
+    }
+  }
+  getSegmentStartTimeForTimestampOffsetCalculation_({
+    videoTimingInfo,
+    audioTimingInfo,
+    timingInfo
+  }) {
+    if (!this.useDtsForTimestampOffset_) {
+      return timingInfo.start;
+    }
+    if (videoTimingInfo && typeof videoTimingInfo.transmuxedDecodeStart === 'number') {
+      return videoTimingInfo.transmuxedDecodeStart;
+    } // handle audio only
+
+    if (audioTimingInfo && typeof audioTimingInfo.transmuxedDecodeStart === 'number') {
+      return audioTimingInfo.transmuxedDecodeStart;
+    } // handle content not transmuxed (e.g., MP4)
+
+    return timingInfo.start;
+  }
+  updateTimingInfoEnd_(segmentInfo) {
+    segmentInfo.timingInfo = segmentInfo.timingInfo || {};
+    const trackInfo = this.getMediaInfo_();
+    const useVideoTimingInfo = this.loaderType_ === 'main' && trackInfo && trackInfo.hasVideo;
+    const prioritizedTimingInfo = useVideoTimingInfo && segmentInfo.videoTimingInfo ? segmentInfo.videoTimingInfo : segmentInfo.audioTimingInfo;
+    if (!prioritizedTimingInfo) {
+      return;
+    }
+    segmentInfo.timingInfo.end = typeof prioritizedTimingInfo.end === 'number' ?
+    // End time may not exist in a case where we aren't parsing the full segment (one
+    // current example is the case of fmp4), so use the rough duration to calculate an
+    // end time.
+    prioritizedTimingInfo.end : prioritizedTimingInfo.start + segmentInfo.duration;
+  }
+  /**
+   * callback to run when appendBuffer is finished. detects if we are
+   * in a good state to do things with the data we got, or if we need
+   * to wait for more
+   *
+   * @private
+   */
+
+  handleAppendsDone_() {
+    // appendsdone can cause an abort
+    if (this.pendingSegment_) {
+      this.trigger('appendsdone');
+    }
+    if (!this.pendingSegment_) {
+      this.state = 'READY'; // TODO should this move into this.checkForAbort to speed up requests post abort in
+      // all appending cases?
+
+      if (!this.paused()) {
+        this.monitorBuffer_();
+      }
+      return;
+    }
+    const segmentInfo = this.pendingSegment_;
+    if (segmentInfo.part && segmentInfo.part.syncInfo) {
+      // low-latency flow
+      segmentInfo.part.syncInfo.markAppended();
+    } else if (segmentInfo.segment.syncInfo) {
+      // normal flow
+      segmentInfo.segment.syncInfo.markAppended();
+    } // Now that the end of the segment has been reached, we can set the end time. It's
+    // best to wait until all appends are done so we're sure that the primary media is
+    // finished (and we have its end time).
+
+    this.updateTimingInfoEnd_(segmentInfo);
+    if (this.shouldSaveSegmentTimingInfo_) {
+      // Timeline mappings should only be saved for the main loader. This is for multiple
+      // reasons:
+      //
+      // 1) Only one mapping is saved per timeline, meaning that if both the audio loader
+      //    and the main loader try to save the timeline mapping, whichever comes later
+      //    will overwrite the first. In theory this is OK, as the mappings should be the
+      //    same, however, it breaks for (2)
+      // 2) In the event of a live stream, the initial live point will make for a somewhat
+      //    arbitrary mapping. If audio and video streams are not perfectly in-sync, then
+      //    the mapping will be off for one of the streams, dependent on which one was
+      //    first saved (see (1)).
+      // 3) Primary timing goes by video in VHS, so the mapping should be video.
+      //
+      // Since the audio loader will wait for the main loader to load the first segment,
+      // the main loader will save the first timeline mapping, and ensure that there won't
+      // be a case where audio loads two segments without saving a mapping (thus leading
+      // to missing segment timing info).
+      this.syncController_.saveSegmentTimingInfo({
+        segmentInfo,
+        shouldSaveTimelineMapping: this.loaderType_ === 'main'
+      });
+    }
+    const segmentDurationMessage = getTroublesomeSegmentDurationMessage(segmentInfo, this.sourceType_);
+    if (segmentDurationMessage) {
+      if (segmentDurationMessage.severity === 'warn') {
+        videojs.log.warn(segmentDurationMessage.message);
+      } else {
+        this.logger_(segmentDurationMessage.message);
+      }
+    }
+    this.recordThroughput_(segmentInfo);
+    this.pendingSegment_ = null;
+    this.state = 'READY';
+    if (segmentInfo.isSyncRequest) {
+      this.trigger('syncinfoupdate'); // if the sync request was not appended
+      // then it was not the correct segment.
+      // throw it away and use the data it gave us
+      // to get the correct one.
+
+      if (!segmentInfo.hasAppendedData_) {
+        this.logger_(`Throwing away un-appended sync request ${segmentInfoString(segmentInfo)}`);
+        return;
+      }
+    }
+    this.logger_(`Appended ${segmentInfoString(segmentInfo)}`);
+    this.addSegmentMetadataCue_(segmentInfo);
+    this.fetchAtBuffer_ = true;
+    if (this.currentTimeline_ !== segmentInfo.timeline) {
+      this.timelineChangeController_.lastTimelineChange({
+        type: this.loaderType_,
+        from: this.currentTimeline_,
+        to: segmentInfo.timeline
+      }); // If audio is not disabled, the main segment loader is responsible for updating
+      // the audio timeline as well. If the content is video only, this won't have any
+      // impact.
+
+      if (this.loaderType_ === 'main' && !this.audioDisabled_) {
+        this.timelineChangeController_.lastTimelineChange({
+          type: 'audio',
+          from: this.currentTimeline_,
+          to: segmentInfo.timeline
+        });
+      }
+    }
+    this.currentTimeline_ = segmentInfo.timeline; // We must update the syncinfo to recalculate the seekable range before
+    // the following conditional otherwise it may consider this a bad "guess"
+    // and attempt to resync when the post-update seekable window and live
+    // point would mean that this was the perfect segment to fetch
+
+    this.trigger('syncinfoupdate');
+    const segment = segmentInfo.segment;
+    const part = segmentInfo.part;
+    const badSegmentGuess = segment.end && this.currentTime_() - segment.end > segmentInfo.playlist.targetDuration * 3;
+    const badPartGuess = part && part.end && this.currentTime_() - part.end > segmentInfo.playlist.partTargetDuration * 3; // If we previously appended a segment/part that ends more than 3 part/targetDurations before
+    // the currentTime_ that means that our conservative guess was too conservative.
+    // In that case, reset the loader state so that we try to use any information gained
+    // from the previous request to create a new, more accurate, sync-point.
+
+    if (badSegmentGuess || badPartGuess) {
+      this.logger_(`bad ${badSegmentGuess ? 'segment' : 'part'} ${segmentInfoString(segmentInfo)}`);
+      this.resetEverything();
+      return;
+    }
+    const isWalkingForward = this.mediaIndex !== null; // Don't do a rendition switch unless we have enough time to get a sync segment
+    // and conservatively guess
+
+    if (isWalkingForward) {
+      this.trigger('bandwidthupdate');
+    }
+    this.trigger('progress');
+    this.mediaIndex = segmentInfo.mediaIndex;
+    this.partIndex = segmentInfo.partIndex; // any time an update finishes and the last segment is in the
+    // buffer, end the stream. this ensures the "ended" event will
+    // fire if playback reaches that point.
+
+    if (this.isEndOfStream_(segmentInfo.mediaIndex, segmentInfo.playlist, segmentInfo.partIndex)) {
+      this.endOfStream();
+    } // used for testing
+
+    this.trigger('appended');
+    if (segmentInfo.hasAppendedData_) {
+      this.mediaAppends++;
+    }
+    if (!this.paused()) {
+      this.monitorBuffer_();
+    }
+  }
+  /**
+   * Records the current throughput of the decrypt, transmux, and append
+   * portion of the semgment pipeline. `throughput.rate` is a the cumulative
+   * moving average of the throughput. `throughput.count` is the number of
+   * data points in the average.
+   *
+   * @private
+   * @param {Object} segmentInfo the object returned by loadSegment
+   */
+
+  recordThroughput_(segmentInfo) {
+    if (segmentInfo.duration < MIN_SEGMENT_DURATION_TO_SAVE_STATS) {
+      this.logger_(`Ignoring segment's throughput because its duration of ${segmentInfo.duration}` + ` is less than the min to record ${MIN_SEGMENT_DURATION_TO_SAVE_STATS}`);
+      return;
+    }
+    const rate = this.throughput.rate; // Add one to the time to ensure that we don't accidentally attempt to divide
+    // by zero in the case where the throughput is ridiculously high
+
+    const segmentProcessingTime = Date.now() - segmentInfo.endOfAllRequests + 1; // Multiply by 8000 to convert from bytes/millisecond to bits/second
+
+    const segmentProcessingThroughput = Math.floor(segmentInfo.byteLength / segmentProcessingTime * 8 * 1000); // This is just a cumulative moving average calculation:
+    //   newAvg = oldAvg + (sample - oldAvg) / (sampleCount + 1)
+
+    this.throughput.rate += (segmentProcessingThroughput - rate) / ++this.throughput.count;
+  }
+  /**
+   * Adds a cue to the segment-metadata track with some metadata information about the
+   * segment
+   *
+   * @private
+   * @param {Object} segmentInfo
+   *        the object returned by loadSegment
+   * @method addSegmentMetadataCue_
+   */
+
+  addSegmentMetadataCue_(segmentInfo) {
+    if (!this.segmentMetadataTrack_) {
+      return;
+    }
+    const segment = segmentInfo.segment;
+    const start = segment.start;
+    const end = segment.end; // Do not try adding the cue if the start and end times are invalid.
+
+    if (!finite(start) || !finite(end)) {
+      return;
+    }
+    removeCuesFromTrack(start, end, this.segmentMetadataTrack_);
+    const Cue = window__default["default"].WebKitDataCue || window__default["default"].VTTCue;
+    const value = {
+      custom: segment.custom,
+      dateTimeObject: segment.dateTimeObject,
+      dateTimeString: segment.dateTimeString,
+      programDateTime: segment.programDateTime,
+      bandwidth: segmentInfo.playlist.attributes.BANDWIDTH,
+      resolution: segmentInfo.playlist.attributes.RESOLUTION,
+      codecs: segmentInfo.playlist.attributes.CODECS,
+      byteLength: segmentInfo.byteLength,
+      uri: segmentInfo.uri,
+      timeline: segmentInfo.timeline,
+      playlist: segmentInfo.playlist.id,
+      start,
+      end
+    };
+    const data = JSON.stringify(value);
+    const cue = new Cue(start, end, data); // Attach the metadata to the value property of the cue to keep consistency between
+    // the differences of WebKitDataCue in safari and VTTCue in other browsers
+
+    cue.value = value;
+    this.segmentMetadataTrack_.addCue(cue);
+  }
+}
+function noop() {}
+const toTitleCase = function (string) {
+  if (typeof string !== 'string') {
+    return string;
+  }
+  return string.replace(/./, w => w.toUpperCase());
+};
+
+/**
+ * @file source-updater.js
+ */
+const bufferTypes = ['video', 'audio'];
+const updating = (type, sourceUpdater) => {
+  const sourceBuffer = sourceUpdater[`${type}Buffer`];
+  return sourceBuffer && sourceBuffer.updating || sourceUpdater.queuePending[type];
+};
+const nextQueueIndexOfType = (type, queue) => {
+  for (let i = 0; i < queue.length; i++) {
+    const queueEntry = queue[i];
+    if (queueEntry.type === 'mediaSource') {
+      // If the next entry is a media source entry (uses multiple source buffers), block
+      // processing to allow it to go through first.
+      return null;
+    }
+    if (queueEntry.type === type) {
+      return i;
+    }
+  }
+  return null;
+};
+const shiftQueue = (type, sourceUpdater) => {
+  if (sourceUpdater.queue.length === 0) {
+    return;
+  }
+  let queueIndex = 0;
+  let queueEntry = sourceUpdater.queue[queueIndex];
+  if (queueEntry.type === 'mediaSource') {
+    if (!sourceUpdater.updating() && sourceUpdater.mediaSource.readyState !== 'closed') {
+      sourceUpdater.queue.shift();
+      queueEntry.action(sourceUpdater);
+      if (queueEntry.doneFn) {
+        queueEntry.doneFn();
+      } // Only specific source buffer actions must wait for async updateend events. Media
+      // Source actions process synchronously. Therefore, both audio and video source
+      // buffers are now clear to process the next queue entries.
+
+      shiftQueue('audio', sourceUpdater);
+      shiftQueue('video', sourceUpdater);
+    } // Media Source actions require both source buffers, so if the media source action
+    // couldn't process yet (because one or both source buffers are busy), block other
+    // queue actions until both are available and the media source action can process.
+
+    return;
+  }
+  if (type === 'mediaSource') {
+    // If the queue was shifted by a media source action (this happens when pushing a
+    // media source action onto the queue), then it wasn't from an updateend event from an
+    // audio or video source buffer, so there's no change from previous state, and no
+    // processing should be done.
+    return;
+  } // Media source queue entries don't need to consider whether the source updater is
+  // started (i.e., source buffers are created) as they don't need the source buffers, but
+  // source buffer queue entries do.
+
+  if (!sourceUpdater.ready() || sourceUpdater.mediaSource.readyState === 'closed' || updating(type, sourceUpdater)) {
+    return;
+  }
+  if (queueEntry.type !== type) {
+    queueIndex = nextQueueIndexOfType(type, sourceUpdater.queue);
+    if (queueIndex === null) {
+      // Either there's no queue entry that uses this source buffer type in the queue, or
+      // there's a media source queue entry before the next entry of this type, in which
+      // case wait for that action to process first.
+      return;
+    }
+    queueEntry = sourceUpdater.queue[queueIndex];
+  }
+  sourceUpdater.queue.splice(queueIndex, 1); // Keep a record that this source buffer type is in use.
+  //
+  // The queue pending operation must be set before the action is performed in the event
+  // that the action results in a synchronous event that is acted upon. For instance, if
+  // an exception is thrown that can be handled, it's possible that new actions will be
+  // appended to an empty queue and immediately executed, but would not have the correct
+  // pending information if this property was set after the action was performed.
+
+  sourceUpdater.queuePending[type] = queueEntry;
+  queueEntry.action(type, sourceUpdater);
+  if (!queueEntry.doneFn) {
+    // synchronous operation, process next entry
+    sourceUpdater.queuePending[type] = null;
+    shiftQueue(type, sourceUpdater);
+    return;
+  }
+};
+const cleanupBuffer = (type, sourceUpdater) => {
+  const buffer = sourceUpdater[`${type}Buffer`];
+  const titleType = toTitleCase(type);
+  if (!buffer) {
+    return;
+  }
+  buffer.removeEventListener('updateend', sourceUpdater[`on${titleType}UpdateEnd_`]);
+  buffer.removeEventListener('error', sourceUpdater[`on${titleType}Error_`]);
+  sourceUpdater.codecs[type] = null;
+  sourceUpdater[`${type}Buffer`] = null;
+};
+const inSourceBuffers = (mediaSource, sourceBuffer) => mediaSource && sourceBuffer && Array.prototype.indexOf.call(mediaSource.sourceBuffers, sourceBuffer) !== -1;
+const actions = {
+  appendBuffer: (bytes, segmentInfo, onError) => (type, sourceUpdater) => {
+    const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+    // or the media source does not contain this source buffer.
+
+    if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+      return;
+    }
+    sourceUpdater.logger_(`Appending segment ${segmentInfo.mediaIndex}'s ${bytes.length} bytes to ${type}Buffer`);
+    try {
+      sourceBuffer.appendBuffer(bytes);
+    } catch (e) {
+      sourceUpdater.logger_(`Error with code ${e.code} ` + (e.code === QUOTA_EXCEEDED_ERR ? '(QUOTA_EXCEEDED_ERR) ' : '') + `when appending segment ${segmentInfo.mediaIndex} to ${type}Buffer`);
+      sourceUpdater.queuePending[type] = null;
+      onError(e);
+    }
+  },
+  remove: (start, end) => (type, sourceUpdater) => {
+    const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+    // or the media source does not contain this source buffer.
+
+    if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+      return;
+    }
+    sourceUpdater.logger_(`Removing ${start} to ${end} from ${type}Buffer`);
+    try {
+      sourceBuffer.remove(start, end);
+    } catch (e) {
+      sourceUpdater.logger_(`Remove ${start} to ${end} from ${type}Buffer failed`);
+    }
+  },
+  timestampOffset: offset => (type, sourceUpdater) => {
+    const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+    // or the media source does not contain this source buffer.
+
+    if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+      return;
+    }
+    sourceUpdater.logger_(`Setting ${type}timestampOffset to ${offset}`);
+    sourceBuffer.timestampOffset = offset;
+  },
+  callback: callback => (type, sourceUpdater) => {
+    callback();
+  },
+  endOfStream: error => sourceUpdater => {
+    if (sourceUpdater.mediaSource.readyState !== 'open') {
+      return;
+    }
+    sourceUpdater.logger_(`Calling mediaSource endOfStream(${error || ''})`);
+    try {
+      sourceUpdater.mediaSource.endOfStream(error);
+    } catch (e) {
+      videojs.log.warn('Failed to call media source endOfStream', e);
+    }
+  },
+  duration: duration => sourceUpdater => {
+    sourceUpdater.logger_(`Setting mediaSource duration to ${duration}`);
+    try {
+      sourceUpdater.mediaSource.duration = duration;
+    } catch (e) {
+      videojs.log.warn('Failed to set media source duration', e);
+    }
+  },
+  abort: () => (type, sourceUpdater) => {
+    if (sourceUpdater.mediaSource.readyState !== 'open') {
+      return;
+    }
+    const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+    // or the media source does not contain this source buffer.
+
+    if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+      return;
+    }
+    sourceUpdater.logger_(`calling abort on ${type}Buffer`);
+    try {
+      sourceBuffer.abort();
+    } catch (e) {
+      videojs.log.warn(`Failed to abort on ${type}Buffer`, e);
+    }
+  },
+  addSourceBuffer: (type, codec) => sourceUpdater => {
+    const titleType = toTitleCase(type);
+    const mime = codecs_js.getMimeForCodec(codec);
+    sourceUpdater.logger_(`Adding ${type}Buffer with codec ${codec} to mediaSource`);
+    const sourceBuffer = sourceUpdater.mediaSource.addSourceBuffer(mime);
+    sourceBuffer.addEventListener('updateend', sourceUpdater[`on${titleType}UpdateEnd_`]);
+    sourceBuffer.addEventListener('error', sourceUpdater[`on${titleType}Error_`]);
+    sourceUpdater.codecs[type] = codec;
+    sourceUpdater[`${type}Buffer`] = sourceBuffer;
+  },
+  removeSourceBuffer: type => sourceUpdater => {
+    const sourceBuffer = sourceUpdater[`${type}Buffer`];
+    cleanupBuffer(type, sourceUpdater); // can't do anything if the media source / source buffer is null
+    // or the media source does not contain this source buffer.
+
+    if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+      return;
+    }
+    sourceUpdater.logger_(`Removing ${type}Buffer with codec ${sourceUpdater.codecs[type]} from mediaSource`);
+    try {
+      sourceUpdater.mediaSource.removeSourceBuffer(sourceBuffer);
+    } catch (e) {
+      videojs.log.warn(`Failed to removeSourceBuffer ${type}Buffer`, e);
+    }
+  },
+  changeType: codec => (type, sourceUpdater) => {
+    const sourceBuffer = sourceUpdater[`${type}Buffer`];
+    const mime = codecs_js.getMimeForCodec(codec); // can't do anything if the media source / source buffer is null
+    // or the media source does not contain this source buffer.
+
+    if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+      return;
+    } // do not update codec if we don't need to.
+    // Only update if we change the codec base.
+    // For example, going from avc1.640028 to avc1.64001f does not require a changeType call.
+
+    const newCodecBase = codec.substring(0, codec.indexOf('.'));
+    const oldCodec = sourceUpdater.codecs[type];
+    const oldCodecBase = oldCodec.substring(0, oldCodec.indexOf('.'));
+    if (oldCodecBase === newCodecBase) {
+      return;
+    }
+    sourceUpdater.logger_(`changing ${type}Buffer codec from ${sourceUpdater.codecs[type]} to ${codec}`); // check if change to the provided type is supported
+
+    try {
+      sourceBuffer.changeType(mime);
+      sourceUpdater.codecs[type] = codec;
+    } catch (e) {
+      videojs.log.warn(`Failed to changeType on ${type}Buffer`, e);
+    }
+  }
+};
+const pushQueue = ({
+  type,
+  sourceUpdater,
+  action,
+  doneFn,
+  name
+}) => {
+  sourceUpdater.queue.push({
+    type,
+    action,
+    doneFn,
+    name
+  });
+  shiftQueue(type, sourceUpdater);
+};
+const onUpdateend = (type, sourceUpdater) => e => {
+  // Although there should, in theory, be a pending action for any updateend receieved,
+  // there are some actions that may trigger updateend events without set definitions in
+  // the w3c spec. For instance, setting the duration on the media source may trigger
+  // updateend events on source buffers. This does not appear to be in the spec. As such,
+  // if we encounter an updateend without a corresponding pending action from our queue
+  // for that source buffer type, process the next action.
+  const bufferedRangesForType = sourceUpdater[`${type}Buffered`]();
+  const descriptiveString = bufferedRangesToString(bufferedRangesForType);
+  sourceUpdater.logger_(`received "updateend" event for ${type} Source Buffer: `, descriptiveString);
+  if (sourceUpdater.queuePending[type]) {
+    const doneFn = sourceUpdater.queuePending[type].doneFn;
+    sourceUpdater.queuePending[type] = null;
+    if (doneFn) {
+      // if there's an error, report it
+      doneFn(sourceUpdater[`${type}Error_`]);
+    }
+  }
+  shiftQueue(type, sourceUpdater);
+};
+/**
+ * A queue of callbacks to be serialized and applied when a
+ * MediaSource and its associated SourceBuffers are not in the
+ * updating state. It is used by the segment loader to update the
+ * underlying SourceBuffers when new data is loaded, for instance.
+ *
+ * @class SourceUpdater
+ * @param {MediaSource} mediaSource the MediaSource to create the SourceBuffer from
+ * @param {string} mimeType the desired MIME type of the underlying SourceBuffer
+ */
+
+class SourceUpdater extends videojs.EventTarget {
+  constructor(mediaSource) {
+    super();
+    this.mediaSource = mediaSource;
+    this.sourceopenListener_ = () => shiftQueue('mediaSource', this);
+    this.mediaSource.addEventListener('sourceopen', this.sourceopenListener_);
+    this.logger_ = logger('SourceUpdater'); // initial timestamp offset is 0
+
+    this.audioTimestampOffset_ = 0;
+    this.videoTimestampOffset_ = 0;
+    this.queue = [];
+    this.queuePending = {
+      audio: null,
+      video: null
+    };
+    this.delayedAudioAppendQueue_ = [];
+    this.videoAppendQueued_ = false;
+    this.codecs = {};
+    this.onVideoUpdateEnd_ = onUpdateend('video', this);
+    this.onAudioUpdateEnd_ = onUpdateend('audio', this);
+    this.onVideoError_ = e => {
+      // used for debugging
+      this.videoError_ = e;
+    };
+    this.onAudioError_ = e => {
+      // used for debugging
+      this.audioError_ = e;
+    };
+    this.createdSourceBuffers_ = false;
+    this.initializedEme_ = false;
+    this.triggeredReady_ = false;
+  }
+  initializedEme() {
+    this.initializedEme_ = true;
+    this.triggerReady();
+  }
+  hasCreatedSourceBuffers() {
+    // if false, likely waiting on one of the segment loaders to get enough data to create
+    // source buffers
+    return this.createdSourceBuffers_;
+  }
+  hasInitializedAnyEme() {
+    return this.initializedEme_;
+  }
+  ready() {
+    return this.hasCreatedSourceBuffers() && this.hasInitializedAnyEme();
+  }
+  createSourceBuffers(codecs) {
+    if (this.hasCreatedSourceBuffers()) {
+      // already created them before
+      return;
+    } // the intial addOrChangeSourceBuffers will always be
+    // two add buffers.
+
+    this.addOrChangeSourceBuffers(codecs);
+    this.createdSourceBuffers_ = true;
+    this.trigger('createdsourcebuffers');
+    this.triggerReady();
+  }
+  triggerReady() {
+    // only allow ready to be triggered once, this prevents the case
+    // where:
+    // 1. we trigger createdsourcebuffers
+    // 2. ie 11 synchronously initializates eme
+    // 3. the synchronous initialization causes us to trigger ready
+    // 4. We go back to the ready check in createSourceBuffers and ready is triggered again.
+    if (this.ready() && !this.triggeredReady_) {
+      this.triggeredReady_ = true;
+      this.trigger('ready');
+    }
+  }
+  /**
+   * Add a type of source buffer to the media source.
+   *
+   * @param {string} type
+   *        The type of source buffer to add.
+   *
+   * @param {string} codec
+   *        The codec to add the source buffer with.
+   */
+
+  addSourceBuffer(type, codec) {
+    pushQueue({
+      type: 'mediaSource',
+      sourceUpdater: this,
+      action: actions.addSourceBuffer(type, codec),
+      name: 'addSourceBuffer'
+    });
+  }
+  /**
+   * call abort on a source buffer.
+   *
+   * @param {string} type
+   *        The type of source buffer to call abort on.
+   */
+
+  abort(type) {
+    pushQueue({
+      type,
+      sourceUpdater: this,
+      action: actions.abort(type),
+      name: 'abort'
+    });
+  }
+  /**
+   * Call removeSourceBuffer and remove a specific type
+   * of source buffer on the mediaSource.
+   *
+   * @param {string} type
+   *        The type of source buffer to remove.
+   */
+
+  removeSourceBuffer(type) {
+    if (!this.canRemoveSourceBuffer()) {
+      videojs.log.error('removeSourceBuffer is not supported!');
+      return;
+    }
+    pushQueue({
+      type: 'mediaSource',
+      sourceUpdater: this,
+      action: actions.removeSourceBuffer(type),
+      name: 'removeSourceBuffer'
+    });
+  }
+  /**
+   * Whether or not the removeSourceBuffer function is supported
+   * on the mediaSource.
+   *
+   * @return {boolean}
+   *          if removeSourceBuffer can be called.
+   */
+
+  canRemoveSourceBuffer() {
+    // As of Firefox 83 removeSourceBuffer
+    // throws errors, so we report that it does not support this.
+    return !videojs.browser.IS_FIREFOX && window__default["default"].MediaSource && window__default["default"].MediaSource.prototype && typeof window__default["default"].MediaSource.prototype.removeSourceBuffer === 'function';
+  }
+  /**
+   * Whether or not the changeType function is supported
+   * on our SourceBuffers.
+   *
+   * @return {boolean}
+   *         if changeType can be called.
+   */
+
+  static canChangeType() {
+    return window__default["default"].SourceBuffer && window__default["default"].SourceBuffer.prototype && typeof window__default["default"].SourceBuffer.prototype.changeType === 'function';
+  }
+  /**
+   * Whether or not the changeType function is supported
+   * on our SourceBuffers.
+   *
+   * @return {boolean}
+   *         if changeType can be called.
+   */
+
+  canChangeType() {
+    return this.constructor.canChangeType();
+  }
+  /**
+   * Call the changeType function on a source buffer, given the code and type.
+   *
+   * @param {string} type
+   *        The type of source buffer to call changeType on.
+   *
+   * @param {string} codec
+   *        The codec string to change type with on the source buffer.
+   */
+
+  changeType(type, codec) {
+    if (!this.canChangeType()) {
+      videojs.log.error('changeType is not supported!');
+      return;
+    }
+    pushQueue({
+      type,
+      sourceUpdater: this,
+      action: actions.changeType(codec),
+      name: 'changeType'
+    });
+  }
+  /**
+   * Add source buffers with a codec or, if they are already created,
+   * call changeType on source buffers using changeType.
+   *
+   * @param {Object} codecs
+   *        Codecs to switch to
+   */
+
+  addOrChangeSourceBuffers(codecs) {
+    if (!codecs || typeof codecs !== 'object' || Object.keys(codecs).length === 0) {
+      throw new Error('Cannot addOrChangeSourceBuffers to undefined codecs');
+    }
+    Object.keys(codecs).forEach(type => {
+      const codec = codecs[type];
+      if (!this.hasCreatedSourceBuffers()) {
+        return this.addSourceBuffer(type, codec);
+      }
+      if (this.canChangeType()) {
+        this.changeType(type, codec);
+      }
+    });
+  }
+  /**
+   * Queue an update to append an ArrayBuffer.
+   *
+   * @param {MediaObject} object containing audioBytes and/or videoBytes
+   * @param {Function} done the function to call when done
+   * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-appendBuffer-void-ArrayBuffer-data
+   */
+
+  appendBuffer(options, doneFn) {
+    const {
+      segmentInfo,
+      type,
+      bytes
+    } = options;
+    this.processedAppend_ = true;
+    if (type === 'audio' && this.videoBuffer && !this.videoAppendQueued_) {
+      this.delayedAudioAppendQueue_.push([options, doneFn]);
+      this.logger_(`delayed audio append of ${bytes.length} until video append`);
+      return;
+    } // In the case of certain errors, for instance, QUOTA_EXCEEDED_ERR, updateend will
+    // not be fired. This means that the queue will be blocked until the next action
+    // taken by the segment-loader. Provide a mechanism for segment-loader to handle
+    // these errors by calling the doneFn with the specific error.
+
+    const onError = doneFn;
+    pushQueue({
+      type,
+      sourceUpdater: this,
+      action: actions.appendBuffer(bytes, segmentInfo || {
+        mediaIndex: -1
+      }, onError),
+      doneFn,
+      name: 'appendBuffer'
+    });
+    if (type === 'video') {
+      this.videoAppendQueued_ = true;
+      if (!this.delayedAudioAppendQueue_.length) {
+        return;
+      }
+      const queue = this.delayedAudioAppendQueue_.slice();
+      this.logger_(`queuing delayed audio ${queue.length} appendBuffers`);
+      this.delayedAudioAppendQueue_.length = 0;
+      queue.forEach(que => {
+        this.appendBuffer.apply(this, que);
+      });
+    }
+  }
+  /**
+   * Get the audio buffer's buffered timerange.
+   *
+   * @return {TimeRange}
+   *         The audio buffer's buffered time range
+   */
+
+  audioBuffered() {
+    // no media source/source buffer or it isn't in the media sources
+    // source buffer list
+    if (!inSourceBuffers(this.mediaSource, this.audioBuffer)) {
+      return createTimeRanges();
+    }
+    return this.audioBuffer.buffered ? this.audioBuffer.buffered : createTimeRanges();
+  }
+  /**
+   * Get the video buffer's buffered timerange.
+   *
+   * @return {TimeRange}
+   *         The video buffer's buffered time range
+   */
+
+  videoBuffered() {
+    // no media source/source buffer or it isn't in the media sources
+    // source buffer list
+    if (!inSourceBuffers(this.mediaSource, this.videoBuffer)) {
+      return createTimeRanges();
+    }
+    return this.videoBuffer.buffered ? this.videoBuffer.buffered : createTimeRanges();
+  }
+  /**
+   * Get a combined video/audio buffer's buffered timerange.
+   *
+   * @return {TimeRange}
+   *         the combined time range
+   */
+
+  buffered() {
+    const video = inSourceBuffers(this.mediaSource, this.videoBuffer) ? this.videoBuffer : null;
+    const audio = inSourceBuffers(this.mediaSource, this.audioBuffer) ? this.audioBuffer : null;
+    if (audio && !video) {
+      return this.audioBuffered();
+    }
+    if (video && !audio) {
+      return this.videoBuffered();
+    }
+    return bufferIntersection(this.audioBuffered(), this.videoBuffered());
+  }
+  /**
+   * Add a callback to the queue that will set duration on the mediaSource.
+   *
+   * @param {number} duration
+   *        The duration to set
+   *
+   * @param {Function} [doneFn]
+   *        function to run after duration has been set.
+   */
+
+  setDuration(duration, doneFn = noop) {
+    // In order to set the duration on the media source, it's necessary to wait for all
+    // source buffers to no longer be updating. "If the updating attribute equals true on
+    // any SourceBuffer in sourceBuffers, then throw an InvalidStateError exception and
+    // abort these steps." (source: https://www.w3.org/TR/media-source/#attributes).
+    pushQueue({
+      type: 'mediaSource',
+      sourceUpdater: this,
+      action: actions.duration(duration),
+      name: 'duration',
+      doneFn
+    });
+  }
+  /**
+   * Add a mediaSource endOfStream call to the queue
+   *
+   * @param {Error} [error]
+   *        Call endOfStream with an error
+   *
+   * @param {Function} [doneFn]
+   *        A function that should be called when the
+   *        endOfStream call has finished.
+   */
+
+  endOfStream(error = null, doneFn = noop) {
+    if (typeof error !== 'string') {
+      error = undefined;
+    } // In order to set the duration on the media source, it's necessary to wait for all
+    // source buffers to no longer be updating. "If the updating attribute equals true on
+    // any SourceBuffer in sourceBuffers, then throw an InvalidStateError exception and
+    // abort these steps." (source: https://www.w3.org/TR/media-source/#attributes).
+
+    pushQueue({
+      type: 'mediaSource',
+      sourceUpdater: this,
+      action: actions.endOfStream(error),
+      name: 'endOfStream',
+      doneFn
+    });
+  }
+  /**
+   * Queue an update to remove a time range from the buffer.
+   *
+   * @param {number} start where to start the removal
+   * @param {number} end where to end the removal
+   * @param {Function} [done=noop] optional callback to be executed when the remove
+   * operation is complete
+   * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end
+   */
+
+  removeAudio(start, end, done = noop) {
+    if (!this.audioBuffered().length || this.audioBuffered().end(0) === 0) {
+      done();
+      return;
+    }
+    pushQueue({
+      type: 'audio',
+      sourceUpdater: this,
+      action: actions.remove(start, end),
+      doneFn: done,
+      name: 'remove'
+    });
+  }
+  /**
+   * Queue an update to remove a time range from the buffer.
+   *
+   * @param {number} start where to start the removal
+   * @param {number} end where to end the removal
+   * @param {Function} [done=noop] optional callback to be executed when the remove
+   * operation is complete
+   * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end
+   */
+
+  removeVideo(start, end, done = noop) {
+    if (!this.videoBuffered().length || this.videoBuffered().end(0) === 0) {
+      done();
+      return;
+    }
+    pushQueue({
+      type: 'video',
+      sourceUpdater: this,
+      action: actions.remove(start, end),
+      doneFn: done,
+      name: 'remove'
+    });
+  }
+  /**
+   * Whether the underlying sourceBuffer is updating or not
+   *
+   * @return {boolean} the updating status of the SourceBuffer
+   */
+
+  updating() {
+    // the audio/video source buffer is updating
+    if (updating('audio', this) || updating('video', this)) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Set/get the timestampoffset on the audio SourceBuffer
+   *
+   * @return {number} the timestamp offset
+   */
+
+  audioTimestampOffset(offset) {
+    if (typeof offset !== 'undefined' && this.audioBuffer &&
+    // no point in updating if it's the same
+    this.audioTimestampOffset_ !== offset) {
+      pushQueue({
+        type: 'audio',
+        sourceUpdater: this,
+        action: actions.timestampOffset(offset),
+        name: 'timestampOffset'
+      });
+      this.audioTimestampOffset_ = offset;
+    }
+    return this.audioTimestampOffset_;
+  }
+  /**
+   * Set/get the timestampoffset on the video SourceBuffer
+   *
+   * @return {number} the timestamp offset
+   */
+
+  videoTimestampOffset(offset) {
+    if (typeof offset !== 'undefined' && this.videoBuffer &&
+    // no point in updating if it's the same
+    this.videoTimestampOffset !== offset) {
+      pushQueue({
+        type: 'video',
+        sourceUpdater: this,
+        action: actions.timestampOffset(offset),
+        name: 'timestampOffset'
+      });
+      this.videoTimestampOffset_ = offset;
+    }
+    return this.videoTimestampOffset_;
+  }
+  /**
+   * Add a function to the queue that will be called
+   * when it is its turn to run in the audio queue.
+   *
+   * @param {Function} callback
+   *        The callback to queue.
+   */
+
+  audioQueueCallback(callback) {
+    if (!this.audioBuffer) {
+      return;
+    }
+    pushQueue({
+      type: 'audio',
+      sourceUpdater: this,
+      action: actions.callback(callback),
+      name: 'callback'
+    });
+  }
+  /**
+   * Add a function to the queue that will be called
+   * when it is its turn to run in the video queue.
+   *
+   * @param {Function} callback
+   *        The callback to queue.
+   */
+
+  videoQueueCallback(callback) {
+    if (!this.videoBuffer) {
+      return;
+    }
+    pushQueue({
+      type: 'video',
+      sourceUpdater: this,
+      action: actions.callback(callback),
+      name: 'callback'
+    });
+  }
+  /**
+   * dispose of the source updater and the underlying sourceBuffer
+   */
+
+  dispose() {
+    this.trigger('dispose');
+    bufferTypes.forEach(type => {
+      this.abort(type);
+      if (this.canRemoveSourceBuffer()) {
+        this.removeSourceBuffer(type);
+      } else {
+        this[`${type}QueueCallback`](() => cleanupBuffer(type, this));
+      }
+    });
+    this.videoAppendQueued_ = false;
+    this.delayedAudioAppendQueue_.length = 0;
+    if (this.sourceopenListener_) {
+      this.mediaSource.removeEventListener('sourceopen', this.sourceopenListener_);
+    }
+    this.off();
+  }
+}
+const uint8ToUtf8 = uintArray => decodeURIComponent(escape(String.fromCharCode.apply(null, uintArray)));
+const bufferToHexString = buffer => {
+  const uInt8Buffer = new Uint8Array(buffer);
+  return Array.from(uInt8Buffer).map(byte => byte.toString(16).padStart(2, '0')).join('');
+};
+
+/**
+ * @file vtt-segment-loader.js
+ */
+const VTT_LINE_TERMINATORS = new Uint8Array('\n\n'.split('').map(char => char.charCodeAt(0)));
+class NoVttJsError extends Error {
+  constructor() {
+    super('Trying to parse received VTT cues, but there is no WebVTT. Make sure vtt.js is loaded.');
+  }
+}
+/**
+ * An object that manages segment loading and appending.
+ *
+ * @class VTTSegmentLoader
+ * @param {Object} options required and optional options
+ * @extends videojs.EventTarget
+ */
+
+class VTTSegmentLoader extends SegmentLoader {
+  constructor(settings, options = {}) {
+    super(settings, options); // SegmentLoader requires a MediaSource be specified or it will throw an error;
+    // however, VTTSegmentLoader has no need of a media source, so delete the reference
+
+    this.mediaSource_ = null;
+    this.subtitlesTrack_ = null;
+    this.featuresNativeTextTracks_ = settings.featuresNativeTextTracks;
+    this.loadVttJs = settings.loadVttJs; // The VTT segment will have its own time mappings. Saving VTT segment timing info in
+    // the sync controller leads to improper behavior.
+
+    this.shouldSaveSegmentTimingInfo_ = false;
+  }
+  createTransmuxer_() {
+    // don't need to transmux any subtitles
+    return null;
+  }
+  /**
+   * Indicates which time ranges are buffered
+   *
+   * @return {TimeRange}
+   *         TimeRange object representing the current buffered ranges
+   */
+
+  buffered_() {
+    if (!this.subtitlesTrack_ || !this.subtitlesTrack_.cues || !this.subtitlesTrack_.cues.length) {
+      return createTimeRanges();
+    }
+    const cues = this.subtitlesTrack_.cues;
+    const start = cues[0].startTime;
+    const end = cues[cues.length - 1].startTime;
+    return createTimeRanges([[start, end]]);
+  }
+  /**
+   * Gets and sets init segment for the provided map
+   *
+   * @param {Object} map
+   *        The map object representing the init segment to get or set
+   * @param {boolean=} set
+   *        If true, the init segment for the provided map should be saved
+   * @return {Object}
+   *         map object for desired init segment
+   */
+
+  initSegmentForMap(map, set = false) {
+    if (!map) {
+      return null;
+    }
+    const id = initSegmentId(map);
+    let storedMap = this.initSegments_[id];
+    if (set && !storedMap && map.bytes) {
+      // append WebVTT line terminators to the media initialization segment if it exists
+      // to follow the WebVTT spec (https://w3c.github.io/webvtt/#file-structure) that
+      // requires two or more WebVTT line terminators between the WebVTT header and the
+      // rest of the file
+      const combinedByteLength = VTT_LINE_TERMINATORS.byteLength + map.bytes.byteLength;
+      const combinedSegment = new Uint8Array(combinedByteLength);
+      combinedSegment.set(map.bytes);
+      combinedSegment.set(VTT_LINE_TERMINATORS, map.bytes.byteLength);
+      this.initSegments_[id] = storedMap = {
+        resolvedUri: map.resolvedUri,
+        byterange: map.byterange,
+        bytes: combinedSegment
+      };
+    }
+    return storedMap || map;
+  }
+  /**
+   * Returns true if all configuration required for loading is present, otherwise false.
+   *
+   * @return {boolean} True if the all configuration is ready for loading
+   * @private
+   */
+
+  couldBeginLoading_() {
+    return this.playlist_ && this.subtitlesTrack_ && !this.paused();
+  }
+  /**
+   * Once all the starting parameters have been specified, begin
+   * operation. This method should only be invoked from the INIT
+   * state.
+   *
+   * @private
+   */
+
+  init_() {
+    this.state = 'READY';
+    this.resetEverything();
+    return this.monitorBuffer_();
+  }
+  /**
+   * Set a subtitle track on the segment loader to add subtitles to
+   *
+   * @param {TextTrack=} track
+   *        The text track to add loaded subtitles to
+   * @return {TextTrack}
+   *        Returns the subtitles track
+   */
+
+  track(track) {
+    if (typeof track === 'undefined') {
+      return this.subtitlesTrack_;
+    }
+    this.subtitlesTrack_ = track; // if we were unpaused but waiting for a sourceUpdater, start
+    // buffering now
+
+    if (this.state === 'INIT' && this.couldBeginLoading_()) {
+      this.init_();
+    }
+    return this.subtitlesTrack_;
+  }
+  /**
+   * Remove any data in the source buffer between start and end times
+   *
+   * @param {number} start - the start time of the region to remove from the buffer
+   * @param {number} end - the end time of the region to remove from the buffer
+   */
+
+  remove(start, end) {
+    removeCuesFromTrack(start, end, this.subtitlesTrack_);
+  }
+  /**
+   * fill the buffer with segements unless the sourceBuffers are
+   * currently updating
+   *
+   * Note: this function should only ever be called by monitorBuffer_
+   * and never directly
+   *
+   * @private
+   */
+
+  fillBuffer_() {
+    // see if we need to begin loading immediately
+    const segmentInfo = this.chooseNextRequest_();
+    if (!segmentInfo) {
+      return;
+    }
+    if (this.syncController_.timestampOffsetForTimeline(segmentInfo.timeline) === null) {
+      // We don't have the timestamp offset that we need to sync subtitles.
+      // Rerun on a timestamp offset or user interaction.
+      const checkTimestampOffset = () => {
+        this.state = 'READY';
+        if (!this.paused()) {
+          // if not paused, queue a buffer check as soon as possible
+          this.monitorBuffer_();
+        }
+      };
+      this.syncController_.one('timestampoffset', checkTimestampOffset);
+      this.state = 'WAITING_ON_TIMELINE';
+      return;
+    }
+    this.loadSegment_(segmentInfo);
+  } // never set a timestamp offset for vtt segments.
+
+  timestampOffsetForSegment_() {
+    return null;
+  }
+  chooseNextRequest_() {
+    return this.skipEmptySegments_(super.chooseNextRequest_());
+  }
+  /**
+   * Prevents the segment loader from requesting segments we know contain no subtitles
+   * by walking forward until we find the next segment that we don't know whether it is
+   * empty or not.
+   *
+   * @param {Object} segmentInfo
+   *        a segment info object that describes the current segment
+   * @return {Object}
+   *         a segment info object that describes the current segment
+   */
+
+  skipEmptySegments_(segmentInfo) {
+    while (segmentInfo && segmentInfo.segment.empty) {
+      // stop at the last possible segmentInfo
+      if (segmentInfo.mediaIndex + 1 >= segmentInfo.playlist.segments.length) {
+        segmentInfo = null;
+        break;
+      }
+      segmentInfo = this.generateSegmentInfo_({
+        playlist: segmentInfo.playlist,
+        mediaIndex: segmentInfo.mediaIndex + 1,
+        startOfSegment: segmentInfo.startOfSegment + segmentInfo.duration,
+        isSyncRequest: segmentInfo.isSyncRequest
+      });
+    }
+    return segmentInfo;
+  }
+  stopForError(error) {
+    this.error(error);
+    this.state = 'READY';
+    this.pause();
+    this.trigger('error');
+  }
+  /**
+   * append a decrypted segement to the SourceBuffer through a SourceUpdater
+   *
+   * @private
+   */
+
+  segmentRequestFinished_(error, simpleSegment, result) {
+    if (!this.subtitlesTrack_) {
+      this.state = 'READY';
+      return;
+    }
+    this.saveTransferStats_(simpleSegment.stats); // the request was aborted
+
+    if (!this.pendingSegment_) {
+      this.state = 'READY';
+      this.mediaRequestsAborted += 1;
+      return;
+    }
+    if (error) {
+      if (error.code === REQUEST_ERRORS.TIMEOUT) {
+        this.handleTimeout_();
+      }
+      if (error.code === REQUEST_ERRORS.ABORTED) {
+        this.mediaRequestsAborted += 1;
+      } else {
+        this.mediaRequestsErrored += 1;
+      }
+      this.stopForError(error);
+      return;
+    }
+    const segmentInfo = this.pendingSegment_; // although the VTT segment loader bandwidth isn't really used, it's good to
+    // maintain functionality between segment loaders
+
+    this.saveBandwidthRelatedStats_(segmentInfo.duration, simpleSegment.stats); // if this request included a segment key, save that data in the cache
+
+    if (simpleSegment.key) {
+      this.segmentKey(simpleSegment.key, true);
+    }
+    this.state = 'APPENDING'; // used for tests
+
+    this.trigger('appending');
+    const segment = segmentInfo.segment;
+    if (segment.map) {
+      segment.map.bytes = simpleSegment.map.bytes;
+    }
+    segmentInfo.bytes = simpleSegment.bytes; // Make sure that vttjs has loaded, otherwise, load it and wait till it finished loading
+
+    if (typeof window__default["default"].WebVTT !== 'function' && typeof this.loadVttJs === 'function') {
+      this.state = 'WAITING_ON_VTTJS'; // should be fine to call multiple times
+      // script will be loaded once but multiple listeners will be added to the queue, which is expected.
+
+      this.loadVttJs().then(() => this.segmentRequestFinished_(error, simpleSegment, result), () => this.stopForError({
+        message: 'Error loading vtt.js',
+        metadata: {
+          errorType: videojs.Error.VttLoadError
+        }
+      }));
+      return;
+    }
+    segment.requested = true;
+    try {
+      this.parseVTTCues_(segmentInfo);
+    } catch (e) {
+      this.stopForError({
+        message: e.message,
+        metadata: {
+          errorType: videojs.Error.VttCueParsingError
+        }
+      });
+      return;
+    }
+    this.updateTimeMapping_(segmentInfo, this.syncController_.timelines[segmentInfo.timeline], this.playlist_);
+    if (segmentInfo.cues.length) {
+      segmentInfo.timingInfo = {
+        start: segmentInfo.cues[0].startTime,
+        end: segmentInfo.cues[segmentInfo.cues.length - 1].endTime
+      };
+    } else {
+      segmentInfo.timingInfo = {
+        start: segmentInfo.startOfSegment,
+        end: segmentInfo.startOfSegment + segmentInfo.duration
+      };
+    }
+    if (segmentInfo.isSyncRequest) {
+      this.trigger('syncinfoupdate');
+      this.pendingSegment_ = null;
+      this.state = 'READY';
+      return;
+    }
+    segmentInfo.byteLength = segmentInfo.bytes.byteLength;
+    this.mediaSecondsLoaded += segment.duration; // Create VTTCue instances for each cue in the new segment and add them to
+    // the subtitle track
+
+    segmentInfo.cues.forEach(cue => {
+      this.subtitlesTrack_.addCue(this.featuresNativeTextTracks_ ? new window__default["default"].VTTCue(cue.startTime, cue.endTime, cue.text) : cue);
+    }); // Remove any duplicate cues from the subtitle track. The WebVTT spec allows
+    // cues to have identical time-intervals, but if the text is also identical
+    // we can safely assume it is a duplicate that can be removed (ex. when a cue
+    // "overlaps" VTT segments)
+
+    removeDuplicateCuesFromTrack(this.subtitlesTrack_);
+    this.handleAppendsDone_();
+  }
+  handleData_() {// noop as we shouldn't be getting video/audio data captions
+    // that we do not support here.
+  }
+  updateTimingInfoEnd_() {// noop
+  }
+  /**
+   * Uses the WebVTT parser to parse the segment response
+   *
+   * @throws NoVttJsError
+   *
+   * @param {Object} segmentInfo
+   *        a segment info object that describes the current segment
+   * @private
+   */
+
+  parseVTTCues_(segmentInfo) {
+    let decoder;
+    let decodeBytesToString = false;
+    if (typeof window__default["default"].WebVTT !== 'function') {
+      // caller is responsible for exception handling.
+      throw new NoVttJsError();
+    }
+    if (typeof window__default["default"].TextDecoder === 'function') {
+      decoder = new window__default["default"].TextDecoder('utf8');
+    } else {
+      decoder = window__default["default"].WebVTT.StringDecoder();
+      decodeBytesToString = true;
+    }
+    const parser = new window__default["default"].WebVTT.Parser(window__default["default"], window__default["default"].vttjs, decoder);
+    segmentInfo.cues = [];
+    segmentInfo.timestampmap = {
+      MPEGTS: 0,
+      LOCAL: 0
+    };
+    parser.oncue = segmentInfo.cues.push.bind(segmentInfo.cues);
+    parser.ontimestampmap = map => {
+      segmentInfo.timestampmap = map;
+    };
+    parser.onparsingerror = error => {
+      videojs.log.warn('Error encountered when parsing cues: ' + error.message);
+    };
+    if (segmentInfo.segment.map) {
+      let mapData = segmentInfo.segment.map.bytes;
+      if (decodeBytesToString) {
+        mapData = uint8ToUtf8(mapData);
+      }
+      parser.parse(mapData);
+    }
+    let segmentData = segmentInfo.bytes;
+    if (decodeBytesToString) {
+      segmentData = uint8ToUtf8(segmentData);
+    }
+    parser.parse(segmentData);
+    parser.flush();
+  }
+  /**
+   * Updates the start and end times of any cues parsed by the WebVTT parser using
+   * the information parsed from the X-TIMESTAMP-MAP header and a TS to media time mapping
+   * from the SyncController
+   *
+   * @param {Object} segmentInfo
+   *        a segment info object that describes the current segment
+   * @param {Object} mappingObj
+   *        object containing a mapping from TS to media time
+   * @param {Object} playlist
+   *        the playlist object containing the segment
+   * @private
+   */
+
+  updateTimeMapping_(segmentInfo, mappingObj, playlist) {
+    const segment = segmentInfo.segment;
+    if (!mappingObj) {
+      // If the sync controller does not have a mapping of TS to Media Time for the
+      // timeline, then we don't have enough information to update the cue
+      // start/end times
+      return;
+    }
+    if (!segmentInfo.cues.length) {
+      // If there are no cues, we also do not have enough information to figure out
+      // segment timing. Mark that the segment contains no cues so we don't re-request
+      // an empty segment.
+      segment.empty = true;
+      return;
+    }
+    const {
+      MPEGTS,
+      LOCAL
+    } = segmentInfo.timestampmap;
+    /**
+     * From the spec:
+     * The MPEGTS media timestamp MUST use a 90KHz timescale,
+     * even when non-WebVTT Media Segments use a different timescale.
+     */
+
+    const mpegTsInSeconds = MPEGTS / clock.ONE_SECOND_IN_TS;
+    const diff = mpegTsInSeconds - LOCAL + mappingObj.mapping;
+    segmentInfo.cues.forEach(cue => {
+      const duration = cue.endTime - cue.startTime;
+      const startTime = MPEGTS === 0 ? cue.startTime + diff : this.handleRollover_(cue.startTime + diff, mappingObj.time);
+      cue.startTime = Math.max(startTime, 0);
+      cue.endTime = Math.max(startTime + duration, 0);
+    });
+    if (!playlist.syncInfo) {
+      const firstStart = segmentInfo.cues[0].startTime;
+      const lastStart = segmentInfo.cues[segmentInfo.cues.length - 1].startTime;
+      playlist.syncInfo = {
+        mediaSequence: playlist.mediaSequence + segmentInfo.mediaIndex,
+        time: Math.min(firstStart, lastStart - segment.duration)
+      };
+    }
+  }
+  /**
+   * MPEG-TS PES timestamps are limited to 2^33.
+   * Once they reach 2^33, they roll over to 0.
+   * mux.js handles PES timestamp rollover for the following scenarios:
+   * [forward rollover(right)] ->
+   *    PES timestamps monotonically increase, and once they reach 2^33, they roll over to 0
+   * [backward rollover(left)] -->
+   *    we seek back to position before rollover.
+   *
+   * According to the HLS SPEC:
+   * When synchronizing WebVTT with PES timestamps, clients SHOULD account
+   * for cases where the 33-bit PES timestamps have wrapped and the WebVTT
+   * cue times have not.  When the PES timestamp wraps, the WebVTT Segment
+   * SHOULD have a X-TIMESTAMP-MAP header that maps the current WebVTT
+   * time to the new (low valued) PES timestamp.
+   *
+   * So we want to handle rollover here and align VTT Cue start/end time to the player's time.
+   */
+
+  handleRollover_(value, reference) {
+    if (reference === null) {
+      return value;
+    }
+    let valueIn90khz = value * clock.ONE_SECOND_IN_TS;
+    const referenceIn90khz = reference * clock.ONE_SECOND_IN_TS;
+    let offset;
+    if (referenceIn90khz < valueIn90khz) {
+      // - 2^33
+      offset = -8589934592;
+    } else {
+      // + 2^33
+      offset = 8589934592;
+    } // distance(value - reference) > 2^32
+
+    while (Math.abs(valueIn90khz - referenceIn90khz) > 4294967296) {
+      valueIn90khz += offset;
+    }
+    return valueIn90khz / clock.ONE_SECOND_IN_TS;
+  }
+}
+
+/**
+ * @file ad-cue-tags.js
+ */
+/**
+ * Searches for an ad cue that overlaps with the given mediaTime
+ *
+ * @param {Object} track
+ *        the track to find the cue for
+ *
+ * @param {number} mediaTime
+ *        the time to find the cue at
+ *
+ * @return {Object|null}
+ *         the found cue or null
+ */
+
+const findAdCue = function (track, mediaTime) {
+  const cues = track.cues;
+  for (let i = 0; i < cues.length; i++) {
+    const cue = cues[i];
+    if (mediaTime >= cue.adStartTime && mediaTime <= cue.adEndTime) {
+      return cue;
+    }
+  }
+  return null;
+};
+const updateAdCues = function (media, track, offset = 0) {
+  if (!media.segments) {
+    return;
+  }
+  let mediaTime = offset;
+  let cue;
+  for (let i = 0; i < media.segments.length; i++) {
+    const segment = media.segments[i];
+    if (!cue) {
+      // Since the cues will span for at least the segment duration, adding a fudge
+      // factor of half segment duration will prevent duplicate cues from being
+      // created when timing info is not exact (e.g. cue start time initialized
+      // at 10.006677, but next call mediaTime is 10.003332 )
+      cue = findAdCue(track, mediaTime + segment.duration / 2);
+    }
+    if (cue) {
+      if ('cueIn' in segment) {
+        // Found a CUE-IN so end the cue
+        cue.endTime = mediaTime;
+        cue.adEndTime = mediaTime;
+        mediaTime += segment.duration;
+        cue = null;
+        continue;
+      }
+      if (mediaTime < cue.endTime) {
+        // Already processed this mediaTime for this cue
+        mediaTime += segment.duration;
+        continue;
+      } // otherwise extend cue until a CUE-IN is found
+
+      cue.endTime += segment.duration;
+    } else {
+      if ('cueOut' in segment) {
+        cue = new window__default["default"].VTTCue(mediaTime, mediaTime + segment.duration, segment.cueOut);
+        cue.adStartTime = mediaTime; // Assumes tag format to be
+        // #EXT-X-CUE-OUT:30
+
+        cue.adEndTime = mediaTime + parseFloat(segment.cueOut);
+        track.addCue(cue);
+      }
+      if ('cueOutCont' in segment) {
+        // Entered into the middle of an ad cue
+        // Assumes tag formate to be
+        // #EXT-X-CUE-OUT-CONT:10/30
+        const [adOffset, adTotal] = segment.cueOutCont.split('/').map(parseFloat);
+        cue = new window__default["default"].VTTCue(mediaTime, mediaTime + segment.duration, '');
+        cue.adStartTime = mediaTime - adOffset;
+        cue.adEndTime = cue.adStartTime + adTotal;
+        track.addCue(cue);
+      }
+    }
+    mediaTime += segment.duration;
+  }
+};
+class SyncInfo {
+  /**
+   * @param {number} start - media sequence start
+   * @param {number} end - media sequence end
+   * @param {number} segmentIndex - index for associated segment
+   * @param {number|null} [partIndex] - index for associated part
+   * @param {boolean} [appended] - appended indicator
+   *
+   */
+  constructor({
+    start,
+    end,
+    segmentIndex,
+    partIndex = null,
+    appended = false
+  }) {
+    this.start_ = start;
+    this.end_ = end;
+    this.segmentIndex_ = segmentIndex;
+    this.partIndex_ = partIndex;
+    this.appended_ = appended;
+  }
+  isInRange(targetTime) {
+    return targetTime >= this.start && targetTime < this.end;
+  }
+  markAppended() {
+    this.appended_ = true;
+  }
+  resetAppendedStatus() {
+    this.appended_ = false;
+  }
+  get isAppended() {
+    return this.appended_;
+  }
+  get start() {
+    return this.start_;
+  }
+  get end() {
+    return this.end_;
+  }
+  get segmentIndex() {
+    return this.segmentIndex_;
+  }
+  get partIndex() {
+    return this.partIndex_;
+  }
+}
+class SyncInfoData {
+  /**
+   *
+   * @param {SyncInfo} segmentSyncInfo - sync info for a given segment
+   * @param {Array<SyncInfo>} [partsSyncInfo] - sync infos for a list of parts for a given segment
+   */
+  constructor(segmentSyncInfo, partsSyncInfo = []) {
+    this.segmentSyncInfo_ = segmentSyncInfo;
+    this.partsSyncInfo_ = partsSyncInfo;
+  }
+  get segmentSyncInfo() {
+    return this.segmentSyncInfo_;
+  }
+  get partsSyncInfo() {
+    return this.partsSyncInfo_;
+  }
+  get hasPartsSyncInfo() {
+    return this.partsSyncInfo_.length > 0;
+  }
+  resetAppendStatus() {
+    this.segmentSyncInfo_.resetAppendedStatus();
+    this.partsSyncInfo_.forEach(partSyncInfo => partSyncInfo.resetAppendedStatus());
+  }
+}
+class MediaSequenceSync {
+  constructor() {
+    /**
+     * @type {Map<number, SyncInfoData>}
+     * @private
+     */
+    this.storage_ = new Map();
+    this.diagnostics_ = '';
+    this.isReliable_ = false;
+    this.start_ = -Infinity;
+    this.end_ = Infinity;
+  }
+  get start() {
+    return this.start_;
+  }
+  get end() {
+    return this.end_;
+  }
+  get diagnostics() {
+    return this.diagnostics_;
+  }
+  get isReliable() {
+    return this.isReliable_;
+  }
+  resetAppendedStatus() {
+    this.storage_.forEach(syncInfoData => syncInfoData.resetAppendStatus());
+  }
+  /**
+   * update sync storage
+   *
+   * @param {Object} playlist
+   * @param {number} currentTime
+   *
+   * @return {void}
+   */
+
+  update(playlist, currentTime) {
+    const {
+      mediaSequence,
+      segments
+    } = playlist;
+    this.isReliable_ = this.isReliablePlaylist_(mediaSequence, segments);
+    if (!this.isReliable_) {
+      return;
+    }
+    return this.updateStorage_(segments, mediaSequence, this.calculateBaseTime_(mediaSequence, currentTime));
+  }
+  /**
+   * @param {number} targetTime
+   * @return {SyncInfo|null}
+   */
+
+  getSyncInfoForTime(targetTime) {
+    for (const {
+      segmentSyncInfo,
+      partsSyncInfo
+    } of this.storage_.values()) {
+      // Normal segment flow:
+      if (!partsSyncInfo.length) {
+        if (segmentSyncInfo.isInRange(targetTime)) {
+          return segmentSyncInfo;
+        }
+      } else {
+        // Low latency flow:
+        for (const partSyncInfo of partsSyncInfo) {
+          if (partSyncInfo.isInRange(targetTime)) {
+            return partSyncInfo;
+          }
+        }
+      }
+    }
+    return null;
+  }
+  updateStorage_(segments, startingMediaSequence, startingTime) {
+    const newStorage = new Map();
+    let newDiagnostics = '\n';
+    let currentStart = startingTime;
+    let currentMediaSequence = startingMediaSequence;
+    this.start_ = currentStart;
+    segments.forEach((segment, segmentIndex) => {
+      const prevSyncInfoData = this.storage_.get(currentMediaSequence);
+      const segmentStart = currentStart;
+      const segmentEnd = segmentStart + segment.duration;
+      const segmentIsAppended = Boolean(prevSyncInfoData && prevSyncInfoData.segmentSyncInfo && prevSyncInfoData.segmentSyncInfo.isAppended);
+      const segmentSyncInfo = new SyncInfo({
+        start: segmentStart,
+        end: segmentEnd,
+        appended: segmentIsAppended,
+        segmentIndex
+      });
+      segment.syncInfo = segmentSyncInfo;
+      let currentPartStart = currentStart;
+      const partsSyncInfo = (segment.parts || []).map((part, partIndex) => {
+        const partStart = currentPartStart;
+        const partEnd = currentPartStart + part.duration;
+        const partIsAppended = Boolean(prevSyncInfoData && prevSyncInfoData.partsSyncInfo && prevSyncInfoData.partsSyncInfo[partIndex] && prevSyncInfoData.partsSyncInfo[partIndex].isAppended);
+        const partSyncInfo = new SyncInfo({
+          start: partStart,
+          end: partEnd,
+          appended: partIsAppended,
+          segmentIndex,
+          partIndex
+        });
+        currentPartStart = partEnd;
+        newDiagnostics += `Media Sequence: ${currentMediaSequence}.${partIndex} | Range: ${partStart} --> ${partEnd} | Appended: ${partIsAppended}\n`;
+        part.syncInfo = partSyncInfo;
+        return partSyncInfo;
+      });
+      newStorage.set(currentMediaSequence, new SyncInfoData(segmentSyncInfo, partsSyncInfo));
+      newDiagnostics += `${compactSegmentUrlDescription(segment.resolvedUri)} | Media Sequence: ${currentMediaSequence} | Range: ${segmentStart} --> ${segmentEnd} | Appended: ${segmentIsAppended}\n`;
+      currentMediaSequence++;
+      currentStart = segmentEnd;
+    });
+    this.end_ = currentStart;
+    this.storage_ = newStorage;
+    this.diagnostics_ = newDiagnostics;
+  }
+  calculateBaseTime_(mediaSequence, fallback) {
+    if (!this.storage_.size) {
+      // Initial setup flow.
+      return 0;
+    }
+    if (this.storage_.has(mediaSequence)) {
+      // Normal flow.
+      return this.storage_.get(mediaSequence).segmentSyncInfo.start;
+    } // Fallback flow.
+    // There is a gap between last recorded playlist and a new one received.
+
+    return fallback;
+  }
+  isReliablePlaylist_(mediaSequence, segments) {
+    return mediaSequence !== undefined && mediaSequence !== null && Array.isArray(segments) && segments.length;
+  }
+}
+
+/**
+ * @file sync-controller.js
+ */
+// synchronize expired playlist segments.
+// the max media sequence diff is 48 hours of live stream
+// content with two second segments. Anything larger than that
+// will likely be invalid.
+
+const MAX_MEDIA_SEQUENCE_DIFF_FOR_SYNC = 86400;
+const syncPointStrategies = [
+// Stategy "VOD": Handle the VOD-case where the sync-point is *always*
+//                the equivalence display-time 0 === segment-index 0
+{
+  name: 'VOD',
+  run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+    if (duration !== Infinity) {
+      const syncPoint = {
+        time: 0,
+        segmentIndex: 0,
+        partIndex: null
+      };
+      return syncPoint;
+    }
+    return null;
+  }
+}, {
+  name: 'MediaSequence',
+  /**
+   * run media sequence strategy
+   *
+   * @param {SyncController} syncController
+   * @param {Object} playlist
+   * @param {number} duration
+   * @param {number} currentTimeline
+   * @param {number} currentTime
+   * @param {string} type
+   */
+  run: (syncController, playlist, duration, currentTimeline, currentTime, type) => {
+    const mediaSequenceSync = syncController.getMediaSequenceSync(type);
+    if (!mediaSequenceSync) {
+      return null;
+    }
+    if (!mediaSequenceSync.isReliable) {
+      return null;
+    }
+    const syncInfo = mediaSequenceSync.getSyncInfoForTime(currentTime);
+    if (!syncInfo) {
+      return null;
+    }
+    return {
+      time: syncInfo.start,
+      partIndex: syncInfo.partIndex,
+      segmentIndex: syncInfo.segmentIndex
+    };
+  }
+},
+// Stategy "ProgramDateTime": We have a program-date-time tag in this playlist
+{
+  name: 'ProgramDateTime',
+  run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+    if (!Object.keys(syncController.timelineToDatetimeMappings).length) {
+      return null;
+    }
+    let syncPoint = null;
+    let lastDistance = null;
+    const partsAndSegments = getPartsAndSegments(playlist);
+    currentTime = currentTime || 0;
+    for (let i = 0; i < partsAndSegments.length; i++) {
+      // start from the end and loop backwards for live
+      // or start from the front and loop forwards for non-live
+      const index = playlist.endList || currentTime === 0 ? i : partsAndSegments.length - (i + 1);
+      const partAndSegment = partsAndSegments[index];
+      const segment = partAndSegment.segment;
+      const datetimeMapping = syncController.timelineToDatetimeMappings[segment.timeline];
+      if (!datetimeMapping || !segment.dateTimeObject) {
+        continue;
+      }
+      const segmentTime = segment.dateTimeObject.getTime() / 1000;
+      let start = segmentTime + datetimeMapping; // take part duration into account.
+
+      if (segment.parts && typeof partAndSegment.partIndex === 'number') {
+        for (let z = 0; z < partAndSegment.partIndex; z++) {
+          start += segment.parts[z].duration;
+        }
+      }
+      const distance = Math.abs(currentTime - start); // Once the distance begins to increase, or if distance is 0, we have passed
+      // currentTime and can stop looking for better candidates
+
+      if (lastDistance !== null && (distance === 0 || lastDistance < distance)) {
+        break;
+      }
+      lastDistance = distance;
+      syncPoint = {
+        time: start,
+        segmentIndex: partAndSegment.segmentIndex,
+        partIndex: partAndSegment.partIndex
+      };
+    }
+    return syncPoint;
+  }
+},
+// Stategy "Segment": We have a known time mapping for a timeline and a
+//                    segment in the current timeline with timing data
+{
+  name: 'Segment',
+  run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+    let syncPoint = null;
+    let lastDistance = null;
+    currentTime = currentTime || 0;
+    const partsAndSegments = getPartsAndSegments(playlist);
+    for (let i = 0; i < partsAndSegments.length; i++) {
+      // start from the end and loop backwards for live
+      // or start from the front and loop forwards for non-live
+      const index = playlist.endList || currentTime === 0 ? i : partsAndSegments.length - (i + 1);
+      const partAndSegment = partsAndSegments[index];
+      const segment = partAndSegment.segment;
+      const start = partAndSegment.part && partAndSegment.part.start || segment && segment.start;
+      if (segment.timeline === currentTimeline && typeof start !== 'undefined') {
+        const distance = Math.abs(currentTime - start); // Once the distance begins to increase, we have passed
+        // currentTime and can stop looking for better candidates
+
+        if (lastDistance !== null && lastDistance < distance) {
+          break;
+        }
+        if (!syncPoint || lastDistance === null || lastDistance >= distance) {
+          lastDistance = distance;
+          syncPoint = {
+            time: start,
+            segmentIndex: partAndSegment.segmentIndex,
+            partIndex: partAndSegment.partIndex
+          };
+        }
+      }
+    }
+    return syncPoint;
+  }
+},
+// Stategy "Discontinuity": We have a discontinuity with a known
+//                          display-time
+{
+  name: 'Discontinuity',
+  run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+    let syncPoint = null;
+    currentTime = currentTime || 0;
+    if (playlist.discontinuityStarts && playlist.discontinuityStarts.length) {
+      let lastDistance = null;
+      for (let i = 0; i < playlist.discontinuityStarts.length; i++) {
+        const segmentIndex = playlist.discontinuityStarts[i];
+        const discontinuity = playlist.discontinuitySequence + i + 1;
+        const discontinuitySync = syncController.discontinuities[discontinuity];
+        if (discontinuitySync) {
+          const distance = Math.abs(currentTime - discontinuitySync.time); // Once the distance begins to increase, we have passed
+          // currentTime and can stop looking for better candidates
+
+          if (lastDistance !== null && lastDistance < distance) {
+            break;
+          }
+          if (!syncPoint || lastDistance === null || lastDistance >= distance) {
+            lastDistance = distance;
+            syncPoint = {
+              time: discontinuitySync.time,
+              segmentIndex,
+              partIndex: null
+            };
+          }
+        }
+      }
+    }
+    return syncPoint;
+  }
+},
+// Stategy "Playlist": We have a playlist with a known mapping of
+//                     segment index to display time
+{
+  name: 'Playlist',
+  run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+    if (playlist.syncInfo) {
+      const syncPoint = {
+        time: playlist.syncInfo.time,
+        segmentIndex: playlist.syncInfo.mediaSequence - playlist.mediaSequence,
+        partIndex: null
+      };
+      return syncPoint;
+    }
+    return null;
+  }
+}];
+class SyncController extends videojs.EventTarget {
+  constructor(options = {}) {
+    super(); // ...for synching across variants
+
+    this.timelines = [];
+    this.discontinuities = [];
+    this.timelineToDatetimeMappings = {}; // TODO: this map should be only available for HLS. Since only HLS has MediaSequence.
+    //  For some reason this map helps with syncing between quality switch for MPEG-DASH as well.
+    //  Moreover if we disable this map for MPEG-DASH - quality switch will be broken.
+    //  MPEG-DASH should have its own separate sync strategy
+
+    this.mediaSequenceStorage_ = {
+      main: new MediaSequenceSync(),
+      audio: new MediaSequenceSync(),
+      vtt: new MediaSequenceSync()
+    };
+    this.logger_ = logger('SyncController');
+  }
+  /**
+   *
+   * @param {string} loaderType
+   * @return {MediaSequenceSync|null}
+   */
+
+  getMediaSequenceSync(loaderType) {
+    return this.mediaSequenceStorage_[loaderType] || null;
+  }
+  /**
+   * Find a sync-point for the playlist specified
+   *
+   * A sync-point is defined as a known mapping from display-time to
+   * a segment-index in the current playlist.
+   *
+   * @param {Playlist} playlist
+   *        The playlist that needs a sync-point
+   * @param {number} duration
+   *        Duration of the MediaSource (Infinite if playing a live source)
+   * @param {number} currentTimeline
+   *        The last timeline from which a segment was loaded
+   * @param {number} currentTime
+   *        Current player's time
+   * @param {string} type
+   *        Segment loader type
+   * @return {Object}
+   *          A sync-point object
+   */
+
+  getSyncPoint(playlist, duration, currentTimeline, currentTime, type) {
+    // Always use VOD sync point for VOD
+    if (duration !== Infinity) {
+      const vodSyncPointStrategy = syncPointStrategies.find(({
+        name
+      }) => name === 'VOD');
+      return vodSyncPointStrategy.run(this, playlist, duration);
+    }
+    const syncPoints = this.runStrategies_(playlist, duration, currentTimeline, currentTime, type);
+    if (!syncPoints.length) {
+      // Signal that we need to attempt to get a sync-point manually
+      // by fetching a segment in the playlist and constructing
+      // a sync-point from that information
+      return null;
+    } // If we have exact match just return it instead of finding the nearest distance
+
+    for (const syncPointInfo of syncPoints) {
+      const {
+        syncPoint,
+        strategy
+      } = syncPointInfo;
+      const {
+        segmentIndex,
+        time
+      } = syncPoint;
+      if (segmentIndex < 0) {
+        continue;
+      }
+      const selectedSegment = playlist.segments[segmentIndex];
+      const start = time;
+      const end = start + selectedSegment.duration;
+      this.logger_(`Strategy: ${strategy}. Current time: ${currentTime}. selected segment: ${segmentIndex}. Time: [${start} -> ${end}]}`);
+      if (currentTime >= start && currentTime < end) {
+        this.logger_('Found sync point with exact match: ', syncPoint);
+        return syncPoint;
+      }
+    } // Now find the sync-point that is closest to the currentTime because
+    // that should result in the most accurate guess about which segment
+    // to fetch
+
+    return this.selectSyncPoint_(syncPoints, {
+      key: 'time',
+      value: currentTime
+    });
+  }
+  /**
+   * Calculate the amount of time that has expired off the playlist during playback
+   *
+   * @param {Playlist} playlist
+   *        Playlist object to calculate expired from
+   * @param {number} duration
+   *        Duration of the MediaSource (Infinity if playling a live source)
+   * @return {number|null}
+   *          The amount of time that has expired off the playlist during playback. Null
+   *          if no sync-points for the playlist can be found.
+   */
+
+  getExpiredTime(playlist, duration) {
+    if (!playlist || !playlist.segments) {
+      return null;
+    }
+    const syncPoints = this.runStrategies_(playlist, duration, playlist.discontinuitySequence, 0); // Without sync-points, there is not enough information to determine the expired time
+
+    if (!syncPoints.length) {
+      return null;
+    }
+    const syncPoint = this.selectSyncPoint_(syncPoints, {
+      key: 'segmentIndex',
+      value: 0
+    }); // If the sync-point is beyond the start of the playlist, we want to subtract the
+    // duration from index 0 to syncPoint.segmentIndex instead of adding.
+
+    if (syncPoint.segmentIndex > 0) {
+      syncPoint.time *= -1;
+    }
+    return Math.abs(syncPoint.time + sumDurations({
+      defaultDuration: playlist.targetDuration,
+      durationList: playlist.segments,
+      startIndex: syncPoint.segmentIndex,
+      endIndex: 0
+    }));
+  }
+  /**
+   * Runs each sync-point strategy and returns a list of sync-points returned by the
+   * strategies
+   *
+   * @private
+   * @param {Playlist} playlist
+   *        The playlist that needs a sync-point
+   * @param {number} duration
+   *        Duration of the MediaSource (Infinity if playing a live source)
+   * @param {number} currentTimeline
+   *        The last timeline from which a segment was loaded
+   * @param {number} currentTime
+   *        Current player's time
+   * @param {string} type
+   *        Segment loader type
+   * @return {Array}
+   *          A list of sync-point objects
+   */
+
+  runStrategies_(playlist, duration, currentTimeline, currentTime, type) {
+    const syncPoints = []; // Try to find a sync-point in by utilizing various strategies...
+
+    for (let i = 0; i < syncPointStrategies.length; i++) {
+      const strategy = syncPointStrategies[i];
+      const syncPoint = strategy.run(this, playlist, duration, currentTimeline, currentTime, type);
+      if (syncPoint) {
+        syncPoint.strategy = strategy.name;
+        syncPoints.push({
+          strategy: strategy.name,
+          syncPoint
+        });
+      }
+    }
+    return syncPoints;
+  }
+  /**
+   * Selects the sync-point nearest the specified target
+   *
+   * @private
+   * @param {Array} syncPoints
+   *        List of sync-points to select from
+   * @param {Object} target
+   *        Object specifying the property and value we are targeting
+   * @param {string} target.key
+   *        Specifies the property to target. Must be either 'time' or 'segmentIndex'
+   * @param {number} target.value
+   *        The value to target for the specified key.
+   * @return {Object}
+   *          The sync-point nearest the target
+   */
+
+  selectSyncPoint_(syncPoints, target) {
+    let bestSyncPoint = syncPoints[0].syncPoint;
+    let bestDistance = Math.abs(syncPoints[0].syncPoint[target.key] - target.value);
+    let bestStrategy = syncPoints[0].strategy;
+    for (let i = 1; i < syncPoints.length; i++) {
+      const newDistance = Math.abs(syncPoints[i].syncPoint[target.key] - target.value);
+      if (newDistance < bestDistance) {
+        bestDistance = newDistance;
+        bestSyncPoint = syncPoints[i].syncPoint;
+        bestStrategy = syncPoints[i].strategy;
+      }
+    }
+    this.logger_(`syncPoint for [${target.key}: ${target.value}] chosen with strategy` + ` [${bestStrategy}]: [time:${bestSyncPoint.time},` + ` segmentIndex:${bestSyncPoint.segmentIndex}` + (typeof bestSyncPoint.partIndex === 'number' ? `,partIndex:${bestSyncPoint.partIndex}` : '') + ']');
+    return bestSyncPoint;
+  }
+  /**
+   * Save any meta-data present on the segments when segments leave
+   * the live window to the playlist to allow for synchronization at the
+   * playlist level later.
+   *
+   * @param {Playlist} oldPlaylist - The previous active playlist
+   * @param {Playlist} newPlaylist - The updated and most current playlist
+   */
+
+  saveExpiredSegmentInfo(oldPlaylist, newPlaylist) {
+    const mediaSequenceDiff = newPlaylist.mediaSequence - oldPlaylist.mediaSequence; // Ignore large media sequence gaps
+
+    if (mediaSequenceDiff > MAX_MEDIA_SEQUENCE_DIFF_FOR_SYNC) {
+      videojs.log.warn(`Not saving expired segment info. Media sequence gap ${mediaSequenceDiff} is too large.`);
+      return;
+    } // When a segment expires from the playlist and it has a start time
+    // save that information as a possible sync-point reference in future
+
+    for (let i = mediaSequenceDiff - 1; i >= 0; i--) {
+      const lastRemovedSegment = oldPlaylist.segments[i];
+      if (lastRemovedSegment && typeof lastRemovedSegment.start !== 'undefined') {
+        newPlaylist.syncInfo = {
+          mediaSequence: oldPlaylist.mediaSequence + i,
+          time: lastRemovedSegment.start
+        };
+        this.logger_(`playlist refresh sync: [time:${newPlaylist.syncInfo.time},` + ` mediaSequence: ${newPlaylist.syncInfo.mediaSequence}]`);
+        this.trigger('syncinfoupdate');
+        break;
+      }
+    }
+  }
+  /**
+   * Save the mapping from playlist's ProgramDateTime to display. This should only happen
+   * before segments start to load.
+   *
+   * @param {Playlist} playlist - The currently active playlist
+   */
+
+  setDateTimeMappingForStart(playlist) {
+    // It's possible for the playlist to be updated before playback starts, meaning time
+    // zero is not yet set. If, during these playlist refreshes, a discontinuity is
+    // crossed, then the old time zero mapping (for the prior timeline) would be retained
+    // unless the mappings are cleared.
+    this.timelineToDatetimeMappings = {};
+    if (playlist.segments && playlist.segments.length && playlist.segments[0].dateTimeObject) {
+      const firstSegment = playlist.segments[0];
+      const playlistTimestamp = firstSegment.dateTimeObject.getTime() / 1000;
+      this.timelineToDatetimeMappings[firstSegment.timeline] = -playlistTimestamp;
+    }
+  }
+  /**
+   * Calculates and saves timeline mappings, playlist sync info, and segment timing values
+   * based on the latest timing information.
+   *
+   * @param {Object} options
+   *        Options object
+   * @param {SegmentInfo} options.segmentInfo
+   *        The current active request information
+   * @param {boolean} options.shouldSaveTimelineMapping
+   *        If there's a timeline change, determines if the timeline mapping should be
+   *        saved for timeline mapping and program date time mappings.
+   */
+
+  saveSegmentTimingInfo({
+    segmentInfo,
+    shouldSaveTimelineMapping
+  }) {
+    const didCalculateSegmentTimeMapping = this.calculateSegmentTimeMapping_(segmentInfo, segmentInfo.timingInfo, shouldSaveTimelineMapping);
+    const segment = segmentInfo.segment;
+    if (didCalculateSegmentTimeMapping) {
+      this.saveDiscontinuitySyncInfo_(segmentInfo); // If the playlist does not have sync information yet, record that information
+      // now with segment timing information
+
+      if (!segmentInfo.playlist.syncInfo) {
+        segmentInfo.playlist.syncInfo = {
+          mediaSequence: segmentInfo.playlist.mediaSequence + segmentInfo.mediaIndex,
+          time: segment.start
+        };
+      }
+    }
+    const dateTime = segment.dateTimeObject;
+    if (segment.discontinuity && shouldSaveTimelineMapping && dateTime) {
+      this.timelineToDatetimeMappings[segment.timeline] = -(dateTime.getTime() / 1000);
+    }
+  }
+  timestampOffsetForTimeline(timeline) {
+    if (typeof this.timelines[timeline] === 'undefined') {
+      return null;
+    }
+    return this.timelines[timeline].time;
+  }
+  mappingForTimeline(timeline) {
+    if (typeof this.timelines[timeline] === 'undefined') {
+      return null;
+    }
+    return this.timelines[timeline].mapping;
+  }
+  /**
+   * Use the "media time" for a segment to generate a mapping to "display time" and
+   * save that display time to the segment.
+   *
+   * @private
+   * @param {SegmentInfo} segmentInfo
+   *        The current active request information
+   * @param {Object} timingInfo
+   *        The start and end time of the current segment in "media time"
+   * @param {boolean} shouldSaveTimelineMapping
+   *        If there's a timeline change, determines if the timeline mapping should be
+   *        saved in timelines.
+   * @return {boolean}
+   *          Returns false if segment time mapping could not be calculated
+   */
+
+  calculateSegmentTimeMapping_(segmentInfo, timingInfo, shouldSaveTimelineMapping) {
+    // TODO: remove side effects
+    const segment = segmentInfo.segment;
+    const part = segmentInfo.part;
+    let mappingObj = this.timelines[segmentInfo.timeline];
+    let start;
+    let end;
+    if (typeof segmentInfo.timestampOffset === 'number') {
+      mappingObj = {
+        time: segmentInfo.startOfSegment,
+        mapping: segmentInfo.startOfSegment - timingInfo.start
+      };
+      if (shouldSaveTimelineMapping) {
+        this.timelines[segmentInfo.timeline] = mappingObj;
+        this.trigger('timestampoffset');
+        this.logger_(`time mapping for timeline ${segmentInfo.timeline}: ` + `[time: ${mappingObj.time}] [mapping: ${mappingObj.mapping}]`);
+      }
+      start = segmentInfo.startOfSegment;
+      end = timingInfo.end + mappingObj.mapping;
+    } else if (mappingObj) {
+      start = timingInfo.start + mappingObj.mapping;
+      end = timingInfo.end + mappingObj.mapping;
+    } else {
+      return false;
+    }
+    if (part) {
+      part.start = start;
+      part.end = end;
+    } // If we don't have a segment start yet or the start value we got
+    // is less than our current segment.start value, save a new start value.
+    // We have to do this because parts will have segment timing info saved
+    // multiple times and we want segment start to be the earliest part start
+    // value for that segment.
+
+    if (!segment.start || start < segment.start) {
+      segment.start = start;
+    }
+    segment.end = end;
+    return true;
+  }
+  /**
+   * Each time we have discontinuity in the playlist, attempt to calculate the location
+   * in display of the start of the discontinuity and save that. We also save an accuracy
+   * value so that we save values with the most accuracy (closest to 0.)
+   *
+   * @private
+   * @param {SegmentInfo} segmentInfo - The current active request information
+   */
+
+  saveDiscontinuitySyncInfo_(segmentInfo) {
+    const playlist = segmentInfo.playlist;
+    const segment = segmentInfo.segment; // If the current segment is a discontinuity then we know exactly where
+    // the start of the range and it's accuracy is 0 (greater accuracy values
+    // mean more approximation)
+
+    if (segment.discontinuity) {
+      this.discontinuities[segment.timeline] = {
+        time: segment.start,
+        accuracy: 0
+      };
+    } else if (playlist.discontinuityStarts && playlist.discontinuityStarts.length) {
+      // Search for future discontinuities that we can provide better timing
+      // information for and save that information for sync purposes
+      for (let i = 0; i < playlist.discontinuityStarts.length; i++) {
+        const segmentIndex = playlist.discontinuityStarts[i];
+        const discontinuity = playlist.discontinuitySequence + i + 1;
+        const mediaIndexDiff = segmentIndex - segmentInfo.mediaIndex;
+        const accuracy = Math.abs(mediaIndexDiff);
+        if (!this.discontinuities[discontinuity] || this.discontinuities[discontinuity].accuracy > accuracy) {
+          let time;
+          if (mediaIndexDiff < 0) {
+            time = segment.start - sumDurations({
+              defaultDuration: playlist.targetDuration,
+              durationList: playlist.segments,
+              startIndex: segmentInfo.mediaIndex,
+              endIndex: segmentIndex
+            });
+          } else {
+            time = segment.end + sumDurations({
+              defaultDuration: playlist.targetDuration,
+              durationList: playlist.segments,
+              startIndex: segmentInfo.mediaIndex + 1,
+              endIndex: segmentIndex
+            });
+          }
+          this.discontinuities[discontinuity] = {
+            time,
+            accuracy
+          };
+        }
+      }
+    }
+  }
+  dispose() {
+    this.trigger('dispose');
+    this.off();
+  }
+}
+
+/**
+ * The TimelineChangeController acts as a source for segment loaders to listen for and
+ * keep track of latest and pending timeline changes. This is useful to ensure proper
+ * sync, as each loader may need to make a consideration for what timeline the other
+ * loader is on before making changes which could impact the other loader's media.
+ *
+ * @class TimelineChangeController
+ * @extends videojs.EventTarget
+ */
+
+class TimelineChangeController extends videojs.EventTarget {
+  constructor() {
+    super();
+    this.pendingTimelineChanges_ = {};
+    this.lastTimelineChanges_ = {};
+  }
+  clearPendingTimelineChange(type) {
+    this.pendingTimelineChanges_[type] = null;
+    this.trigger('pendingtimelinechange');
+  }
+  pendingTimelineChange({
+    type,
+    from,
+    to
+  }) {
+    if (typeof from === 'number' && typeof to === 'number') {
+      this.pendingTimelineChanges_[type] = {
+        type,
+        from,
+        to
+      };
+      this.trigger('pendingtimelinechange');
+    }
+    return this.pendingTimelineChanges_[type];
+  }
+  lastTimelineChange({
+    type,
+    from,
+    to
+  }) {
+    if (typeof from === 'number' && typeof to === 'number') {
+      this.lastTimelineChanges_[type] = {
+        type,
+        from,
+        to
+      };
+      delete this.pendingTimelineChanges_[type];
+      this.trigger('timelinechange');
+    }
+    return this.lastTimelineChanges_[type];
+  }
+  dispose() {
+    this.trigger('dispose');
+    this.pendingTimelineChanges_ = {};
+    this.lastTimelineChanges_ = {};
+    this.off();
+  }
+}
+
+/* rollup-plugin-worker-factory start for worker!/home/runner/work/http-streaming/http-streaming/src/decrypter-worker.js */
+const workerCode = transform(getWorkerString(function () {
+  /**
+   * @file stream.js
+   */
+
+  /**
+   * A lightweight readable stream implemention that handles event dispatching.
+   *
+   * @class Stream
+   */
+
+  var Stream = /*#__PURE__*/function () {
+    function Stream() {
+      this.listeners = {};
+    }
+    /**
+     * Add a listener for a specified event type.
+     *
+     * @param {string} type the event name
+     * @param {Function} listener the callback to be invoked when an event of
+     * the specified type occurs
+     */
+
+    var _proto = Stream.prototype;
+    _proto.on = function on(type, listener) {
+      if (!this.listeners[type]) {
+        this.listeners[type] = [];
+      }
+      this.listeners[type].push(listener);
+    }
+    /**
+     * Remove a listener for a specified event type.
+     *
+     * @param {string} type the event name
+     * @param {Function} listener  a function previously registered for this
+     * type of event through `on`
+     * @return {boolean} if we could turn it off or not
+     */;
+
+    _proto.off = function off(type, listener) {
+      if (!this.listeners[type]) {
+        return false;
+      }
+      var index = this.listeners[type].indexOf(listener); // TODO: which is better?
+      // In Video.js we slice listener functions
+      // on trigger so that it does not mess up the order
+      // while we loop through.
+      //
+      // Here we slice on off so that the loop in trigger
+      // can continue using it's old reference to loop without
+      // messing up the order.
+
+      this.listeners[type] = this.listeners[type].slice(0);
+      this.listeners[type].splice(index, 1);
+      return index > -1;
+    }
+    /**
+     * Trigger an event of the specified type on this stream. Any additional
+     * arguments to this function are passed as parameters to event listeners.
+     *
+     * @param {string} type the event name
+     */;
+
+    _proto.trigger = function trigger(type) {
+      var callbacks = this.listeners[type];
+      if (!callbacks) {
+        return;
+      } // Slicing the arguments on every invocation of this method
+      // can add a significant amount of overhead. Avoid the
+      // intermediate object creation for the common case of a
+      // single callback argument
+
+      if (arguments.length === 2) {
+        var length = callbacks.length;
+        for (var i = 0; i < length; ++i) {
+          callbacks[i].call(this, arguments[1]);
+        }
+      } else {
+        var args = Array.prototype.slice.call(arguments, 1);
+        var _length = callbacks.length;
+        for (var _i = 0; _i < _length; ++_i) {
+          callbacks[_i].apply(this, args);
+        }
+      }
+    }
+    /**
+     * Destroys the stream and cleans up.
+     */;
+
+    _proto.dispose = function dispose() {
+      this.listeners = {};
+    }
+    /**
+     * Forwards all `data` events on this stream to the destination stream. The
+     * destination stream should provide a method `push` to receive the data
+     * events as they arrive.
+     *
+     * @param {Stream} destination the stream that will receive all `data` events
+     * @see http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options
+     */;
+
+    _proto.pipe = function pipe(destination) {
+      this.on('data', function (data) {
+        destination.push(data);
+      });
+    };
+    return Stream;
+  }();
+  /*! @name pkcs7 @version 1.0.4 @license Apache-2.0 */
+
+  /**
+   * Returns the subarray of a Uint8Array without PKCS#7 padding.
+   *
+   * @param padded {Uint8Array} unencrypted bytes that have been padded
+   * @return {Uint8Array} the unpadded bytes
+   * @see http://tools.ietf.org/html/rfc5652
+   */
+
+  function unpad(padded) {
+    return padded.subarray(0, padded.byteLength - padded[padded.byteLength - 1]);
+  }
+  /*! @name aes-decrypter @version 4.0.1 @license Apache-2.0 */
+
+  /**
+   * @file aes.js
+   *
+   * This file contains an adaptation of the AES decryption algorithm
+   * from the Standford Javascript Cryptography Library. That work is
+   * covered by the following copyright and permissions notice:
+   *
+   * Copyright 2009-2010 Emily Stark, Mike Hamburg, Dan Boneh.
+   * All rights reserved.
+   *
+   * Redistribution and use in source and binary forms, with or without
+   * modification, are permitted provided that the following conditions are
+   * met:
+   *
+   * 1. Redistributions of source code must retain the above copyright
+   *    notice, this list of conditions and the following disclaimer.
+   *
+   * 2. Redistributions in binary form must reproduce the above
+   *    copyright notice, this list of conditions and the following
+   *    disclaimer in the documentation and/or other materials provided
+   *    with the distribution.
+   *
+   * THIS SOFTWARE IS PROVIDED BY THE AUTHORS ``AS IS'' AND ANY EXPRESS OR
+   * IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+   * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+   * DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> OR CONTRIBUTORS BE
+   * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+   * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+   * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
+   * BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+   * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
+   * OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN
+   * IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+   *
+   * The views and conclusions contained in the software and documentation
+   * are those of the authors and should not be interpreted as representing
+   * official policies, either expressed or implied, of the authors.
+   */
+
+  /**
+   * Expand the S-box tables.
+   *
+   * @private
+   */
+
+  const precompute = function () {
+    const tables = [[[], [], [], [], []], [[], [], [], [], []]];
+    const encTable = tables[0];
+    const decTable = tables[1];
+    const sbox = encTable[4];
+    const sboxInv = decTable[4];
+    let i;
+    let x;
+    let xInv;
+    const d = [];
+    const th = [];
+    let x2;
+    let x4;
+    let x8;
+    let s;
+    let tEnc;
+    let tDec; // Compute double and third tables
+
+    for (i = 0; i < 256; i++) {
+      th[(d[i] = i << 1 ^ (i >> 7) * 283) ^ i] = i;
+    }
+    for (x = xInv = 0; !sbox[x]; x ^= x2 || 1, xInv = th[xInv] || 1) {
+      // Compute sbox
+      s = xInv ^ xInv << 1 ^ xInv << 2 ^ xInv << 3 ^ xInv << 4;
+      s = s >> 8 ^ s & 255 ^ 99;
+      sbox[x] = s;
+      sboxInv[s] = x; // Compute MixColumns
+
+      x8 = d[x4 = d[x2 = d[x]]];
+      tDec = x8 * 0x1010101 ^ x4 * 0x10001 ^ x2 * 0x101 ^ x * 0x1010100;
+      tEnc = d[s] * 0x101 ^ s * 0x1010100;
+      for (i = 0; i < 4; i++) {
+        encTable[i][x] = tEnc = tEnc << 24 ^ tEnc >>> 8;
+        decTable[i][s] = tDec = tDec << 24 ^ tDec >>> 8;
+      }
+    } // Compactify. Considerable speedup on Firefox.
+
+    for (i = 0; i < 5; i++) {
+      encTable[i] = encTable[i].slice(0);
+      decTable[i] = decTable[i].slice(0);
+    }
+    return tables;
+  };
+  let aesTables = null;
+  /**
+   * Schedule out an AES key for both encryption and decryption. This
+   * is a low-level class. Use a cipher mode to do bulk encryption.
+   *
+   * @class AES
+   * @param key {Array} The key as an array of 4, 6 or 8 words.
+   */
+
+  class AES {
+    constructor(key) {
+      /**
+      * The expanded S-box and inverse S-box tables. These will be computed
+      * on the client so that we don't have to send them down the wire.
+      *
+      * There are two tables, _tables[0] is for encryption and
+      * _tables[1] is for decryption.
+      *
+      * The first 4 sub-tables are the expanded S-box with MixColumns. The
+      * last (_tables[01][4]) is the S-box itself.
+      *
+      * @private
+      */
+      // if we have yet to precompute the S-box tables
+      // do so now
+      if (!aesTables) {
+        aesTables = precompute();
+      } // then make a copy of that object for use
+
+      this._tables = [[aesTables[0][0].slice(), aesTables[0][1].slice(), aesTables[0][2].slice(), aesTables[0][3].slice(), aesTables[0][4].slice()], [aesTables[1][0].slice(), aesTables[1][1].slice(), aesTables[1][2].slice(), aesTables[1][3].slice(), aesTables[1][4].slice()]];
+      let i;
+      let j;
+      let tmp;
+      const sbox = this._tables[0][4];
+      const decTable = this._tables[1];
+      const keyLen = key.length;
+      let rcon = 1;
+      if (keyLen !== 4 && keyLen !== 6 && keyLen !== 8) {
+        throw new Error('Invalid aes key size');
+      }
+      const encKey = key.slice(0);
+      const decKey = [];
+      this._key = [encKey, decKey]; // schedule encryption keys
+
+      for (i = keyLen; i < 4 * keyLen + 28; i++) {
+        tmp = encKey[i - 1]; // apply sbox
+
+        if (i % keyLen === 0 || keyLen === 8 && i % keyLen === 4) {
+          tmp = sbox[tmp >>> 24] << 24 ^ sbox[tmp >> 16 & 255] << 16 ^ sbox[tmp >> 8 & 255] << 8 ^ sbox[tmp & 255]; // shift rows and add rcon
+
+          if (i % keyLen === 0) {
+            tmp = tmp << 8 ^ tmp >>> 24 ^ rcon << 24;
+            rcon = rcon << 1 ^ (rcon >> 7) * 283;
+          }
+        }
+        encKey[i] = encKey[i - keyLen] ^ tmp;
+      } // schedule decryption keys
+
+      for (j = 0; i; j++, i--) {
+        tmp = encKey[j & 3 ? i : i - 4];
+        if (i <= 4 || j < 4) {
+          decKey[j] = tmp;
+        } else {
+          decKey[j] = decTable[0][sbox[tmp >>> 24]] ^ decTable[1][sbox[tmp >> 16 & 255]] ^ decTable[2][sbox[tmp >> 8 & 255]] ^ decTable[3][sbox[tmp & 255]];
+        }
+      }
+    }
+    /**
+     * Decrypt 16 bytes, specified as four 32-bit words.
+     *
+     * @param {number} encrypted0 the first word to decrypt
+     * @param {number} encrypted1 the second word to decrypt
+     * @param {number} encrypted2 the third word to decrypt
+     * @param {number} encrypted3 the fourth word to decrypt
+     * @param {Int32Array} out the array to write the decrypted words
+     * into
+     * @param {number} offset the offset into the output array to start
+     * writing results
+     * @return {Array} The plaintext.
+     */
+
+    decrypt(encrypted0, encrypted1, encrypted2, encrypted3, out, offset) {
+      const key = this._key[1]; // state variables a,b,c,d are loaded with pre-whitened data
+
+      let a = encrypted0 ^ key[0];
+      let b = encrypted3 ^ key[1];
+      let c = encrypted2 ^ key[2];
+      let d = encrypted1 ^ key[3];
+      let a2;
+      let b2;
+      let c2; // key.length === 2 ?
+
+      const nInnerRounds = key.length / 4 - 2;
+      let i;
+      let kIndex = 4;
+      const table = this._tables[1]; // load up the tables
+
+      const table0 = table[0];
+      const table1 = table[1];
+      const table2 = table[2];
+      const table3 = table[3];
+      const sbox = table[4]; // Inner rounds. Cribbed from OpenSSL.
+
+      for (i = 0; i < nInnerRounds; i++) {
+        a2 = table0[a >>> 24] ^ table1[b >> 16 & 255] ^ table2[c >> 8 & 255] ^ table3[d & 255] ^ key[kIndex];
+        b2 = table0[b >>> 24] ^ table1[c >> 16 & 255] ^ table2[d >> 8 & 255] ^ table3[a & 255] ^ key[kIndex + 1];
+        c2 = table0[c >>> 24] ^ table1[d >> 16 & 255] ^ table2[a >> 8 & 255] ^ table3[b & 255] ^ key[kIndex + 2];
+        d = table0[d >>> 24] ^ table1[a >> 16 & 255] ^ table2[b >> 8 & 255] ^ table3[c & 255] ^ key[kIndex + 3];
+        kIndex += 4;
+        a = a2;
+        b = b2;
+        c = c2;
+      } // Last round.
+
+      for (i = 0; i < 4; i++) {
+        out[(3 & -i) + offset] = sbox[a >>> 24] << 24 ^ sbox[b >> 16 & 255] << 16 ^ sbox[c >> 8 & 255] << 8 ^ sbox[d & 255] ^ key[kIndex++];
+        a2 = a;
+        a = b;
+        b = c;
+        c = d;
+        d = a2;
+      }
+    }
+  }
+  /**
+   * @file async-stream.js
+   */
+
+  /**
+   * A wrapper around the Stream class to use setTimeout
+   * and run stream "jobs" Asynchronously
+   *
+   * @class AsyncStream
+   * @extends Stream
+   */
+
+  class AsyncStream extends Stream {
+    constructor() {
+      super(Stream);
+      this.jobs = [];
+      this.delay = 1;
+      this.timeout_ = null;
+    }
+    /**
+     * process an async job
+     *
+     * @private
+     */
+
+    processJob_() {
+      this.jobs.shift()();
+      if (this.jobs.length) {
+        this.timeout_ = setTimeout(this.processJob_.bind(this), this.delay);
+      } else {
+        this.timeout_ = null;
+      }
+    }
+    /**
+     * push a job into the stream
+     *
+     * @param {Function} job the job to push into the stream
+     */
+
+    push(job) {
+      this.jobs.push(job);
+      if (!this.timeout_) {
+        this.timeout_ = setTimeout(this.processJob_.bind(this), this.delay);
+      }
+    }
+  }
+  /**
+   * @file decrypter.js
+   *
+   * An asynchronous implementation of AES-128 CBC decryption with
+   * PKCS#7 padding.
+   */
+
+  /**
+   * Convert network-order (big-endian) bytes into their little-endian
+   * representation.
+   */
+
+  const ntoh = function (word) {
+    return word << 24 | (word & 0xff00) << 8 | (word & 0xff0000) >> 8 | word >>> 24;
+  };
+  /**
+   * Decrypt bytes using AES-128 with CBC and PKCS#7 padding.
+   *
+   * @param {Uint8Array} encrypted the encrypted bytes
+   * @param {Uint32Array} key the bytes of the decryption key
+   * @param {Uint32Array} initVector the initialization vector (IV) to
+   * use for the first round of CBC.
+   * @return {Uint8Array} the decrypted bytes
+   *
+   * @see http://en.wikipedia.org/wiki/Advanced_Encryption_Standard
+   * @see http://en.wikipedia.org/wiki/Block_cipher_mode_of_operation#Cipher_Block_Chaining_.28CBC.29
+   * @see https://tools.ietf.org/html/rfc2315
+   */
+
+  const decrypt = function (encrypted, key, initVector) {
+    // word-level access to the encrypted bytes
+    const encrypted32 = new Int32Array(encrypted.buffer, encrypted.byteOffset, encrypted.byteLength >> 2);
+    const decipher = new AES(Array.prototype.slice.call(key)); // byte and word-level access for the decrypted output
+
+    const decrypted = new Uint8Array(encrypted.byteLength);
+    const decrypted32 = new Int32Array(decrypted.buffer); // temporary variables for working with the IV, encrypted, and
+    // decrypted data
+
+    let init0;
+    let init1;
+    let init2;
+    let init3;
+    let encrypted0;
+    let encrypted1;
+    let encrypted2;
+    let encrypted3; // iteration variable
+
+    let wordIx; // pull out the words of the IV to ensure we don't modify the
+    // passed-in reference and easier access
+
+    init0 = initVector[0];
+    init1 = initVector[1];
+    init2 = initVector[2];
+    init3 = initVector[3]; // decrypt four word sequences, applying cipher-block chaining (CBC)
+    // to each decrypted block
+
+    for (wordIx = 0; wordIx < encrypted32.length; wordIx += 4) {
+      // convert big-endian (network order) words into little-endian
+      // (javascript order)
+      encrypted0 = ntoh(encrypted32[wordIx]);
+      encrypted1 = ntoh(encrypted32[wordIx + 1]);
+      encrypted2 = ntoh(encrypted32[wordIx + 2]);
+      encrypted3 = ntoh(encrypted32[wordIx + 3]); // decrypt the block
+
+      decipher.decrypt(encrypted0, encrypted1, encrypted2, encrypted3, decrypted32, wordIx); // XOR with the IV, and restore network byte-order to obtain the
+      // plaintext
+
+      decrypted32[wordIx] = ntoh(decrypted32[wordIx] ^ init0);
+      decrypted32[wordIx + 1] = ntoh(decrypted32[wordIx + 1] ^ init1);
+      decrypted32[wordIx + 2] = ntoh(decrypted32[wordIx + 2] ^ init2);
+      decrypted32[wordIx + 3] = ntoh(decrypted32[wordIx + 3] ^ init3); // setup the IV for the next round
+
+      init0 = encrypted0;
+      init1 = encrypted1;
+      init2 = encrypted2;
+      init3 = encrypted3;
+    }
+    return decrypted;
+  };
+  /**
+   * The `Decrypter` class that manages decryption of AES
+   * data through `AsyncStream` objects and the `decrypt`
+   * function
+   *
+   * @param {Uint8Array} encrypted the encrypted bytes
+   * @param {Uint32Array} key the bytes of the decryption key
+   * @param {Uint32Array} initVector the initialization vector (IV) to
+   * @param {Function} done the function to run when done
+   * @class Decrypter
+   */
+
+  class Decrypter {
+    constructor(encrypted, key, initVector, done) {
+      const step = Decrypter.STEP;
+      const encrypted32 = new Int32Array(encrypted.buffer);
+      const decrypted = new Uint8Array(encrypted.byteLength);
+      let i = 0;
+      this.asyncStream_ = new AsyncStream(); // split up the encryption job and do the individual chunks asynchronously
+
+      this.asyncStream_.push(this.decryptChunk_(encrypted32.subarray(i, i + step), key, initVector, decrypted));
+      for (i = step; i < encrypted32.length; i += step) {
+        initVector = new Uint32Array([ntoh(encrypted32[i - 4]), ntoh(encrypted32[i - 3]), ntoh(encrypted32[i - 2]), ntoh(encrypted32[i - 1])]);
+        this.asyncStream_.push(this.decryptChunk_(encrypted32.subarray(i, i + step), key, initVector, decrypted));
+      } // invoke the done() callback when everything is finished
+
+      this.asyncStream_.push(function () {
+        // remove pkcs#7 padding from the decrypted bytes
+        done(null, unpad(decrypted));
+      });
+    }
+    /**
+     * a getter for step the maximum number of bytes to process at one time
+     *
+     * @return {number} the value of step 32000
+     */
+
+    static get STEP() {
+      // 4 * 8000;
+      return 32000;
+    }
+    /**
+     * @private
+     */
+
+    decryptChunk_(encrypted, key, initVector, decrypted) {
+      return function () {
+        const bytes = decrypt(encrypted, key, initVector);
+        decrypted.set(bytes, encrypted.byteOffset);
+      };
+    }
+  }
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+  var win;
+  if (typeof window !== "undefined") {
+    win = window;
+  } else if (typeof commonjsGlobal !== "undefined") {
+    win = commonjsGlobal;
+  } else if (typeof self !== "undefined") {
+    win = self;
+  } else {
+    win = {};
+  }
+  var window_1 = win;
+  var isArrayBufferView = function isArrayBufferView(obj) {
+    if (ArrayBuffer.isView === 'function') {
+      return ArrayBuffer.isView(obj);
+    }
+    return obj && obj.buffer instanceof ArrayBuffer;
+  };
+  var BigInt = window_1.BigInt || Number;
+  [BigInt('0x1'), BigInt('0x100'), BigInt('0x10000'), BigInt('0x1000000'), BigInt('0x100000000'), BigInt('0x10000000000'), BigInt('0x1000000000000'), BigInt('0x100000000000000'), BigInt('0x10000000000000000')];
+  (function () {
+    var a = new Uint16Array([0xFFCC]);
+    var b = new Uint8Array(a.buffer, a.byteOffset, a.byteLength);
+    if (b[0] === 0xFF) {
+      return 'big';
+    }
+    if (b[0] === 0xCC) {
+      return 'little';
+    }
+    return 'unknown';
+  })();
+  /**
+   * Creates an object for sending to a web worker modifying properties that are TypedArrays
+   * into a new object with seperated properties for the buffer, byteOffset, and byteLength.
+   *
+   * @param {Object} message
+   *        Object of properties and values to send to the web worker
+   * @return {Object}
+   *         Modified message with TypedArray values expanded
+   * @function createTransferableMessage
+   */
+
+  const createTransferableMessage = function (message) {
+    const transferable = {};
+    Object.keys(message).forEach(key => {
+      const value = message[key];
+      if (isArrayBufferView(value)) {
+        transferable[key] = {
+          bytes: value.buffer,
+          byteOffset: value.byteOffset,
+          byteLength: value.byteLength
+        };
+      } else {
+        transferable[key] = value;
+      }
+    });
+    return transferable;
+  };
+  /* global self */
+
+  /**
+   * Our web worker interface so that things can talk to aes-decrypter
+   * that will be running in a web worker. the scope is passed to this by
+   * webworkify.
+   */
+
+  self.onmessage = function (event) {
+    const data = event.data;
+    const encrypted = new Uint8Array(data.encrypted.bytes, data.encrypted.byteOffset, data.encrypted.byteLength);
+    const key = new Uint32Array(data.key.bytes, data.key.byteOffset, data.key.byteLength / 4);
+    const iv = new Uint32Array(data.iv.bytes, data.iv.byteOffset, data.iv.byteLength / 4);
+    /* eslint-disable no-new, handle-callback-err */
+
+    new Decrypter(encrypted, key, iv, function (err, bytes) {
+      self.postMessage(createTransferableMessage({
+        source: data.source,
+        decrypted: bytes
+      }), [bytes.buffer]);
+    });
+    /* eslint-enable */
+  };
+}));
+
+var Decrypter = factory(workerCode);
+/* rollup-plugin-worker-factory end for worker!/home/runner/work/http-streaming/http-streaming/src/decrypter-worker.js */
+
+/**
+ * Convert the properties of an HLS track into an audioTrackKind.
+ *
+ * @private
+ */
+
+const audioTrackKind_ = properties => {
+  let kind = properties.default ? 'main' : 'alternative';
+  if (properties.characteristics && properties.characteristics.indexOf('public.accessibility.describes-video') >= 0) {
+    kind = 'main-desc';
+  }
+  return kind;
+};
+/**
+ * Pause provided segment loader and playlist loader if active
+ *
+ * @param {SegmentLoader} segmentLoader
+ *        SegmentLoader to pause
+ * @param {Object} mediaType
+ *        Active media type
+ * @function stopLoaders
+ */
+
+const stopLoaders = (segmentLoader, mediaType) => {
+  segmentLoader.abort();
+  segmentLoader.pause();
+  if (mediaType && mediaType.activePlaylistLoader) {
+    mediaType.activePlaylistLoader.pause();
+    mediaType.activePlaylistLoader = null;
+  }
+};
+/**
+ * Start loading provided segment loader and playlist loader
+ *
+ * @param {PlaylistLoader} playlistLoader
+ *        PlaylistLoader to start loading
+ * @param {Object} mediaType
+ *        Active media type
+ * @function startLoaders
+ */
+
+const startLoaders = (playlistLoader, mediaType) => {
+  // Segment loader will be started after `loadedmetadata` or `loadedplaylist` from the
+  // playlist loader
+  mediaType.activePlaylistLoader = playlistLoader;
+  playlistLoader.load();
+};
+/**
+ * Returns a function to be called when the media group changes. It performs a
+ * non-destructive (preserve the buffer) resync of the SegmentLoader. This is because a
+ * change of group is merely a rendition switch of the same content at another encoding,
+ * rather than a change of content, such as switching audio from English to Spanish.
+ *
+ * @param {string} type
+ *        MediaGroup type
+ * @param {Object} settings
+ *        Object containing required information for media groups
+ * @return {Function}
+ *         Handler for a non-destructive resync of SegmentLoader when the active media
+ *         group changes.
+ * @function onGroupChanged
+ */
+
+const onGroupChanged = (type, settings) => () => {
+  const {
+    segmentLoaders: {
+      [type]: segmentLoader,
+      main: mainSegmentLoader
+    },
+    mediaTypes: {
+      [type]: mediaType
+    }
+  } = settings;
+  const activeTrack = mediaType.activeTrack();
+  const activeGroup = mediaType.getActiveGroup();
+  const previousActiveLoader = mediaType.activePlaylistLoader;
+  const lastGroup = mediaType.lastGroup_; // the group did not change do nothing
+
+  if (activeGroup && lastGroup && activeGroup.id === lastGroup.id) {
+    return;
+  }
+  mediaType.lastGroup_ = activeGroup;
+  mediaType.lastTrack_ = activeTrack;
+  stopLoaders(segmentLoader, mediaType);
+  if (!activeGroup || activeGroup.isMainPlaylist) {
+    // there is no group active or active group is a main playlist and won't change
+    return;
+  }
+  if (!activeGroup.playlistLoader) {
+    if (previousActiveLoader) {
+      // The previous group had a playlist loader but the new active group does not
+      // this means we are switching from demuxed to muxed audio. In this case we want to
+      // do a destructive reset of the main segment loader and not restart the audio
+      // loaders.
+      mainSegmentLoader.resetEverything();
+    }
+    return;
+  } // Non-destructive resync
+
+  segmentLoader.resyncLoader();
+  startLoaders(activeGroup.playlistLoader, mediaType);
+};
+const onGroupChanging = (type, settings) => () => {
+  const {
+    segmentLoaders: {
+      [type]: segmentLoader
+    },
+    mediaTypes: {
+      [type]: mediaType
+    }
+  } = settings;
+  mediaType.lastGroup_ = null;
+  segmentLoader.abort();
+  segmentLoader.pause();
+};
+/**
+ * Returns a function to be called when the media track changes. It performs a
+ * destructive reset of the SegmentLoader to ensure we start loading as close to
+ * currentTime as possible.
+ *
+ * @param {string} type
+ *        MediaGroup type
+ * @param {Object} settings
+ *        Object containing required information for media groups
+ * @return {Function}
+ *         Handler for a destructive reset of SegmentLoader when the active media
+ *         track changes.
+ * @function onTrackChanged
+ */
+
+const onTrackChanged = (type, settings) => () => {
+  const {
+    mainPlaylistLoader,
+    segmentLoaders: {
+      [type]: segmentLoader,
+      main: mainSegmentLoader
+    },
+    mediaTypes: {
+      [type]: mediaType
+    }
+  } = settings;
+  const activeTrack = mediaType.activeTrack();
+  const activeGroup = mediaType.getActiveGroup();
+  const previousActiveLoader = mediaType.activePlaylistLoader;
+  const lastTrack = mediaType.lastTrack_; // track did not change, do nothing
+
+  if (lastTrack && activeTrack && lastTrack.id === activeTrack.id) {
+    return;
+  }
+  mediaType.lastGroup_ = activeGroup;
+  mediaType.lastTrack_ = activeTrack;
+  stopLoaders(segmentLoader, mediaType);
+  if (!activeGroup) {
+    // there is no group active so we do not want to restart loaders
+    return;
+  }
+  if (activeGroup.isMainPlaylist) {
+    // track did not change, do nothing
+    if (!activeTrack || !lastTrack || activeTrack.id === lastTrack.id) {
+      return;
+    }
+    const pc = settings.vhs.playlistController_;
+    const newPlaylist = pc.selectPlaylist(); // media will not change do nothing
+
+    if (pc.media() === newPlaylist) {
+      return;
+    }
+    mediaType.logger_(`track change. Switching main audio from ${lastTrack.id} to ${activeTrack.id}`);
+    mainPlaylistLoader.pause();
+    mainSegmentLoader.resetEverything();
+    pc.fastQualityChange_(newPlaylist);
+    return;
+  }
+  if (type === 'AUDIO') {
+    if (!activeGroup.playlistLoader) {
+      // when switching from demuxed audio/video to muxed audio/video (noted by no
+      // playlist loader for the audio group), we want to do a destructive reset of the
+      // main segment loader and not restart the audio loaders
+      mainSegmentLoader.setAudio(true); // don't have to worry about disabling the audio of the audio segment loader since
+      // it should be stopped
+
+      mainSegmentLoader.resetEverything();
+      return;
+    } // although the segment loader is an audio segment loader, call the setAudio
+    // function to ensure it is prepared to re-append the init segment (or handle other
+    // config changes)
+
+    segmentLoader.setAudio(true);
+    mainSegmentLoader.setAudio(false);
+  }
+  if (previousActiveLoader === activeGroup.playlistLoader) {
+    // Nothing has actually changed. This can happen because track change events can fire
+    // multiple times for a "single" change. One for enabling the new active track, and
+    // one for disabling the track that was active
+    startLoaders(activeGroup.playlistLoader, mediaType);
+    return;
+  }
+  if (segmentLoader.track) {
+    // For WebVTT, set the new text track in the segmentloader
+    segmentLoader.track(activeTrack);
+  } // destructive reset
+
+  segmentLoader.resetEverything();
+  startLoaders(activeGroup.playlistLoader, mediaType);
+};
+const onError = {
+  /**
+   * Returns a function to be called when a SegmentLoader or PlaylistLoader encounters
+   * an error.
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Error handler. Logs warning (or error if the playlist is excluded) to
+   *         console and switches back to default audio track.
+   * @function onError.AUDIO
+   */
+  AUDIO: (type, settings) => () => {
+    const {
+      mediaTypes: {
+        [type]: mediaType
+      },
+      excludePlaylist
+    } = settings; // switch back to default audio track
+
+    const activeTrack = mediaType.activeTrack();
+    const activeGroup = mediaType.activeGroup();
+    const id = (activeGroup.filter(group => group.default)[0] || activeGroup[0]).id;
+    const defaultTrack = mediaType.tracks[id];
+    if (activeTrack === defaultTrack) {
+      // Default track encountered an error. All we can do now is exclude the current
+      // rendition and hope another will switch audio groups
+      excludePlaylist({
+        error: {
+          message: 'Problem encountered loading the default audio track.'
+        }
+      });
+      return;
+    }
+    videojs.log.warn('Problem encountered loading the alternate audio track.' + 'Switching back to default.');
+    for (const trackId in mediaType.tracks) {
+      mediaType.tracks[trackId].enabled = mediaType.tracks[trackId] === defaultTrack;
+    }
+    mediaType.onTrackChanged();
+  },
+  /**
+   * Returns a function to be called when a SegmentLoader or PlaylistLoader encounters
+   * an error.
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Error handler. Logs warning to console and disables the active subtitle track
+   * @function onError.SUBTITLES
+   */
+  SUBTITLES: (type, settings) => () => {
+    const {
+      mediaTypes: {
+        [type]: mediaType
+      }
+    } = settings;
+    videojs.log.warn('Problem encountered loading the subtitle track.' + 'Disabling subtitle track.');
+    const track = mediaType.activeTrack();
+    if (track) {
+      track.mode = 'disabled';
+    }
+    mediaType.onTrackChanged();
+  }
+};
+const setupListeners = {
+  /**
+   * Setup event listeners for audio playlist loader
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {PlaylistLoader|null} playlistLoader
+   *        PlaylistLoader to register listeners on
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @function setupListeners.AUDIO
+   */
+  AUDIO: (type, playlistLoader, settings) => {
+    if (!playlistLoader) {
+      // no playlist loader means audio will be muxed with the video
+      return;
+    }
+    const {
+      tech,
+      requestOptions,
+      segmentLoaders: {
+        [type]: segmentLoader
+      }
+    } = settings;
+    playlistLoader.on('loadedmetadata', () => {
+      const media = playlistLoader.media();
+      segmentLoader.playlist(media, requestOptions); // if the video is already playing, or if this isn't a live video and preload
+      // permits, start downloading segments
+
+      if (!tech.paused() || media.endList && tech.preload() !== 'none') {
+        segmentLoader.load();
+      }
+    });
+    playlistLoader.on('loadedplaylist', () => {
+      segmentLoader.playlist(playlistLoader.media(), requestOptions); // If the player isn't paused, ensure that the segment loader is running
+
+      if (!tech.paused()) {
+        segmentLoader.load();
+      }
+    });
+    playlistLoader.on('error', onError[type](type, settings));
+  },
+  /**
+   * Setup event listeners for subtitle playlist loader
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {PlaylistLoader|null} playlistLoader
+   *        PlaylistLoader to register listeners on
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @function setupListeners.SUBTITLES
+   */
+  SUBTITLES: (type, playlistLoader, settings) => {
+    const {
+      tech,
+      requestOptions,
+      segmentLoaders: {
+        [type]: segmentLoader
+      },
+      mediaTypes: {
+        [type]: mediaType
+      }
+    } = settings;
+    playlistLoader.on('loadedmetadata', () => {
+      const media = playlistLoader.media();
+      segmentLoader.playlist(media, requestOptions);
+      segmentLoader.track(mediaType.activeTrack()); // if the video is already playing, or if this isn't a live video and preload
+      // permits, start downloading segments
+
+      if (!tech.paused() || media.endList && tech.preload() !== 'none') {
+        segmentLoader.load();
+      }
+    });
+    playlistLoader.on('loadedplaylist', () => {
+      segmentLoader.playlist(playlistLoader.media(), requestOptions); // If the player isn't paused, ensure that the segment loader is running
+
+      if (!tech.paused()) {
+        segmentLoader.load();
+      }
+    });
+    playlistLoader.on('error', onError[type](type, settings));
+  }
+};
+const initialize = {
+  /**
+   * Setup PlaylistLoaders and AudioTracks for the audio groups
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @function initialize.AUDIO
+   */
+  'AUDIO': (type, settings) => {
+    const {
+      vhs,
+      sourceType,
+      segmentLoaders: {
+        [type]: segmentLoader
+      },
+      requestOptions,
+      main: {
+        mediaGroups
+      },
+      mediaTypes: {
+        [type]: {
+          groups,
+          tracks,
+          logger_
+        }
+      },
+      mainPlaylistLoader
+    } = settings;
+    const audioOnlyMain = isAudioOnly(mainPlaylistLoader.main); // force a default if we have none
+
+    if (!mediaGroups[type] || Object.keys(mediaGroups[type]).length === 0) {
+      mediaGroups[type] = {
+        main: {
+          default: {
+            default: true
+          }
+        }
+      };
+      if (audioOnlyMain) {
+        mediaGroups[type].main.default.playlists = mainPlaylistLoader.main.playlists;
+      }
+    }
+    for (const groupId in mediaGroups[type]) {
+      if (!groups[groupId]) {
+        groups[groupId] = [];
+      }
+      for (const variantLabel in mediaGroups[type][groupId]) {
+        let properties = mediaGroups[type][groupId][variantLabel];
+        let playlistLoader;
+        if (audioOnlyMain) {
+          logger_(`AUDIO group '${groupId}' label '${variantLabel}' is a main playlist`);
+          properties.isMainPlaylist = true;
+          playlistLoader = null; // if vhs-json was provided as the source, and the media playlist was resolved,
+          // use the resolved media playlist object
+        } else if (sourceType === 'vhs-json' && properties.playlists) {
+          playlistLoader = new PlaylistLoader(properties.playlists[0], vhs, requestOptions);
+        } else if (properties.resolvedUri) {
+          playlistLoader = new PlaylistLoader(properties.resolvedUri, vhs, requestOptions); // TODO: dash isn't the only type with properties.playlists
+          // should we even have properties.playlists in this check.
+        } else if (properties.playlists && sourceType === 'dash') {
+          playlistLoader = new DashPlaylistLoader(properties.playlists[0], vhs, requestOptions, mainPlaylistLoader);
+        } else {
+          // no resolvedUri means the audio is muxed with the video when using this
+          // audio track
+          playlistLoader = null;
+        }
+        properties = merge({
+          id: variantLabel,
+          playlistLoader
+        }, properties);
+        setupListeners[type](type, properties.playlistLoader, settings);
+        groups[groupId].push(properties);
+        if (typeof tracks[variantLabel] === 'undefined') {
+          const track = new videojs.AudioTrack({
+            id: variantLabel,
+            kind: audioTrackKind_(properties),
+            enabled: false,
+            language: properties.language,
+            default: properties.default,
+            label: variantLabel
+          });
+          tracks[variantLabel] = track;
+        }
+      }
+    } // setup single error event handler for the segment loader
+
+    segmentLoader.on('error', onError[type](type, settings));
+  },
+  /**
+   * Setup PlaylistLoaders and TextTracks for the subtitle groups
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @function initialize.SUBTITLES
+   */
+  'SUBTITLES': (type, settings) => {
+    const {
+      tech,
+      vhs,
+      sourceType,
+      segmentLoaders: {
+        [type]: segmentLoader
+      },
+      requestOptions,
+      main: {
+        mediaGroups
+      },
+      mediaTypes: {
+        [type]: {
+          groups,
+          tracks
+        }
+      },
+      mainPlaylistLoader
+    } = settings;
+    for (const groupId in mediaGroups[type]) {
+      if (!groups[groupId]) {
+        groups[groupId] = [];
+      }
+      for (const variantLabel in mediaGroups[type][groupId]) {
+        if (!vhs.options_.useForcedSubtitles && mediaGroups[type][groupId][variantLabel].forced) {
+          // Subtitle playlists with the forced attribute are not selectable in Safari.
+          // According to Apple's HLS Authoring Specification:
+          //   If content has forced subtitles and regular subtitles in a given language,
+          //   the regular subtitles track in that language MUST contain both the forced
+          //   subtitles and the regular subtitles for that language.
+          // Because of this requirement and that Safari does not add forced subtitles,
+          // forced subtitles are skipped here to maintain consistent experience across
+          // all platforms
+          continue;
+        }
+        let properties = mediaGroups[type][groupId][variantLabel];
+        let playlistLoader;
+        if (sourceType === 'hls') {
+          playlistLoader = new PlaylistLoader(properties.resolvedUri, vhs, requestOptions);
+        } else if (sourceType === 'dash') {
+          const playlists = properties.playlists.filter(p => p.excludeUntil !== Infinity);
+          if (!playlists.length) {
+            return;
+          }
+          playlistLoader = new DashPlaylistLoader(properties.playlists[0], vhs, requestOptions, mainPlaylistLoader);
+        } else if (sourceType === 'vhs-json') {
+          playlistLoader = new PlaylistLoader(
+          // if the vhs-json object included the media playlist, use the media playlist
+          // as provided, otherwise use the resolved URI to load the playlist
+          properties.playlists ? properties.playlists[0] : properties.resolvedUri, vhs, requestOptions);
+        }
+        properties = merge({
+          id: variantLabel,
+          playlistLoader
+        }, properties);
+        setupListeners[type](type, properties.playlistLoader, settings);
+        groups[groupId].push(properties);
+        if (typeof tracks[variantLabel] === 'undefined') {
+          const track = tech.addRemoteTextTrack({
+            id: variantLabel,
+            kind: 'subtitles',
+            default: properties.default && properties.autoselect,
+            language: properties.language,
+            label: variantLabel
+          }, false).track;
+          tracks[variantLabel] = track;
+        }
+      }
+    } // setup single error event handler for the segment loader
+
+    segmentLoader.on('error', onError[type](type, settings));
+  },
+  /**
+   * Setup TextTracks for the closed-caption groups
+   *
+   * @param {String} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @function initialize['CLOSED-CAPTIONS']
+   */
+  'CLOSED-CAPTIONS': (type, settings) => {
+    const {
+      tech,
+      main: {
+        mediaGroups
+      },
+      mediaTypes: {
+        [type]: {
+          groups,
+          tracks
+        }
+      }
+    } = settings;
+    for (const groupId in mediaGroups[type]) {
+      if (!groups[groupId]) {
+        groups[groupId] = [];
+      }
+      for (const variantLabel in mediaGroups[type][groupId]) {
+        const properties = mediaGroups[type][groupId][variantLabel]; // Look for either 608 (CCn) or 708 (SERVICEn) caption services
+
+        if (!/^(?:CC|SERVICE)/.test(properties.instreamId)) {
+          continue;
+        }
+        const captionServices = tech.options_.vhs && tech.options_.vhs.captionServices || {};
+        let newProps = {
+          label: variantLabel,
+          language: properties.language,
+          instreamId: properties.instreamId,
+          default: properties.default && properties.autoselect
+        };
+        if (captionServices[newProps.instreamId]) {
+          newProps = merge(newProps, captionServices[newProps.instreamId]);
+        }
+        if (newProps.default === undefined) {
+          delete newProps.default;
+        } // No PlaylistLoader is required for Closed-Captions because the captions are
+        // embedded within the video stream
+
+        groups[groupId].push(merge({
+          id: variantLabel
+        }, properties));
+        if (typeof tracks[variantLabel] === 'undefined') {
+          const track = tech.addRemoteTextTrack({
+            id: newProps.instreamId,
+            kind: 'captions',
+            default: newProps.default,
+            language: newProps.language,
+            label: newProps.label
+          }, false).track;
+          tracks[variantLabel] = track;
+        }
+      }
+    }
+  }
+};
+const groupMatch = (list, media) => {
+  for (let i = 0; i < list.length; i++) {
+    if (playlistMatch(media, list[i])) {
+      return true;
+    }
+    if (list[i].playlists && groupMatch(list[i].playlists, media)) {
+      return true;
+    }
+  }
+  return false;
+};
+/**
+ * Returns a function used to get the active group of the provided type
+ *
+ * @param {string} type
+ *        MediaGroup type
+ * @param {Object} settings
+ *        Object containing required information for media groups
+ * @return {Function}
+ *         Function that returns the active media group for the provided type. Takes an
+ *         optional parameter {TextTrack} track. If no track is provided, a list of all
+ *         variants in the group, otherwise the variant corresponding to the provided
+ *         track is returned.
+ * @function activeGroup
+ */
+
+const activeGroup = (type, settings) => track => {
+  const {
+    mainPlaylistLoader,
+    mediaTypes: {
+      [type]: {
+        groups
+      }
+    }
+  } = settings;
+  const media = mainPlaylistLoader.media();
+  if (!media) {
+    return null;
+  }
+  let variants = null; // set to variants to main media active group
+
+  if (media.attributes[type]) {
+    variants = groups[media.attributes[type]];
+  }
+  const groupKeys = Object.keys(groups);
+  if (!variants) {
+    // find the mainPlaylistLoader media
+    // that is in a media group if we are dealing
+    // with audio only
+    if (type === 'AUDIO' && groupKeys.length > 1 && isAudioOnly(settings.main)) {
+      for (let i = 0; i < groupKeys.length; i++) {
+        const groupPropertyList = groups[groupKeys[i]];
+        if (groupMatch(groupPropertyList, media)) {
+          variants = groupPropertyList;
+          break;
+        }
+      } // use the main group if it exists
+    } else if (groups.main) {
+      variants = groups.main; // only one group, use that one
+    } else if (groupKeys.length === 1) {
+      variants = groups[groupKeys[0]];
+    }
+  }
+  if (typeof track === 'undefined') {
+    return variants;
+  }
+  if (track === null || !variants) {
+    // An active track was specified so a corresponding group is expected. track === null
+    // means no track is currently active so there is no corresponding group
+    return null;
+  }
+  return variants.filter(props => props.id === track.id)[0] || null;
+};
+const activeTrack = {
+  /**
+   * Returns a function used to get the active track of type provided
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Function that returns the active media track for the provided type. Returns
+   *         null if no track is active
+   * @function activeTrack.AUDIO
+   */
+  AUDIO: (type, settings) => () => {
+    const {
+      mediaTypes: {
+        [type]: {
+          tracks
+        }
+      }
+    } = settings;
+    for (const id in tracks) {
+      if (tracks[id].enabled) {
+        return tracks[id];
+      }
+    }
+    return null;
+  },
+  /**
+   * Returns a function used to get the active track of type provided
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Function that returns the active media track for the provided type. Returns
+   *         null if no track is active
+   * @function activeTrack.SUBTITLES
+   */
+  SUBTITLES: (type, settings) => () => {
+    const {
+      mediaTypes: {
+        [type]: {
+          tracks
+        }
+      }
+    } = settings;
+    for (const id in tracks) {
+      if (tracks[id].mode === 'showing' || tracks[id].mode === 'hidden') {
+        return tracks[id];
+      }
+    }
+    return null;
+  }
+};
+const getActiveGroup = (type, {
+  mediaTypes
+}) => () => {
+  const activeTrack_ = mediaTypes[type].activeTrack();
+  if (!activeTrack_) {
+    return null;
+  }
+  return mediaTypes[type].activeGroup(activeTrack_);
+};
+/**
+ * Setup PlaylistLoaders and Tracks for media groups (Audio, Subtitles,
+ * Closed-Captions) specified in the main manifest.
+ *
+ * @param {Object} settings
+ *        Object containing required information for setting up the media groups
+ * @param {Tech} settings.tech
+ *        The tech of the player
+ * @param {Object} settings.requestOptions
+ *        XHR request options used by the segment loaders
+ * @param {PlaylistLoader} settings.mainPlaylistLoader
+ *        PlaylistLoader for the main source
+ * @param {VhsHandler} settings.vhs
+ *        VHS SourceHandler
+ * @param {Object} settings.main
+ *        The parsed main manifest
+ * @param {Object} settings.mediaTypes
+ *        Object to store the loaders, tracks, and utility methods for each media type
+ * @param {Function} settings.excludePlaylist
+ *        Excludes the current rendition and forces a rendition switch.
+ * @function setupMediaGroups
+ */
+
+const setupMediaGroups = settings => {
+  ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+    initialize[type](type, settings);
+  });
+  const {
+    mediaTypes,
+    mainPlaylistLoader,
+    tech,
+    vhs,
+    segmentLoaders: {
+      ['AUDIO']: audioSegmentLoader,
+      main: mainSegmentLoader
+    }
+  } = settings; // setup active group and track getters and change event handlers
+
+  ['AUDIO', 'SUBTITLES'].forEach(type => {
+    mediaTypes[type].activeGroup = activeGroup(type, settings);
+    mediaTypes[type].activeTrack = activeTrack[type](type, settings);
+    mediaTypes[type].onGroupChanged = onGroupChanged(type, settings);
+    mediaTypes[type].onGroupChanging = onGroupChanging(type, settings);
+    mediaTypes[type].onTrackChanged = onTrackChanged(type, settings);
+    mediaTypes[type].getActiveGroup = getActiveGroup(type, settings);
+  }); // DO NOT enable the default subtitle or caption track.
+  // DO enable the default audio track
+
+  const audioGroup = mediaTypes.AUDIO.activeGroup();
+  if (audioGroup) {
+    const groupId = (audioGroup.filter(group => group.default)[0] || audioGroup[0]).id;
+    mediaTypes.AUDIO.tracks[groupId].enabled = true;
+    mediaTypes.AUDIO.onGroupChanged();
+    mediaTypes.AUDIO.onTrackChanged();
+    const activeAudioGroup = mediaTypes.AUDIO.getActiveGroup(); // a similar check for handling setAudio on each loader is run again each time the
+    // track is changed, but needs to be handled here since the track may not be considered
+    // changed on the first call to onTrackChanged
+
+    if (!activeAudioGroup.playlistLoader) {
+      // either audio is muxed with video or the stream is audio only
+      mainSegmentLoader.setAudio(true);
+    } else {
+      // audio is demuxed
+      mainSegmentLoader.setAudio(false);
+      audioSegmentLoader.setAudio(true);
+    }
+  }
+  mainPlaylistLoader.on('mediachange', () => {
+    ['AUDIO', 'SUBTITLES'].forEach(type => mediaTypes[type].onGroupChanged());
+  });
+  mainPlaylistLoader.on('mediachanging', () => {
+    ['AUDIO', 'SUBTITLES'].forEach(type => mediaTypes[type].onGroupChanging());
+  }); // custom audio track change event handler for usage event
+
+  const onAudioTrackChanged = () => {
+    mediaTypes.AUDIO.onTrackChanged();
+    tech.trigger({
+      type: 'usage',
+      name: 'vhs-audio-change'
+    });
+  };
+  tech.audioTracks().addEventListener('change', onAudioTrackChanged);
+  tech.remoteTextTracks().addEventListener('change', mediaTypes.SUBTITLES.onTrackChanged);
+  vhs.on('dispose', () => {
+    tech.audioTracks().removeEventListener('change', onAudioTrackChanged);
+    tech.remoteTextTracks().removeEventListener('change', mediaTypes.SUBTITLES.onTrackChanged);
+  }); // clear existing audio tracks and add the ones we just created
+
+  tech.clearTracks('audio');
+  for (const id in mediaTypes.AUDIO.tracks) {
+    tech.audioTracks().addTrack(mediaTypes.AUDIO.tracks[id]);
+  }
+};
+/**
+ * Creates skeleton object used to store the loaders, tracks, and utility methods for each
+ * media type
+ *
+ * @return {Object}
+ *         Object to store the loaders, tracks, and utility methods for each media type
+ * @function createMediaTypes
+ */
+
+const createMediaTypes = () => {
+  const mediaTypes = {};
+  ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+    mediaTypes[type] = {
+      groups: {},
+      tracks: {},
+      activePlaylistLoader: null,
+      activeGroup: noop,
+      activeTrack: noop,
+      getActiveGroup: noop,
+      onGroupChanged: noop,
+      onTrackChanged: noop,
+      lastTrack_: null,
+      logger_: logger(`MediaGroups[${type}]`)
+    };
+  });
+  return mediaTypes;
+};
+
+/**
+ * A utility class for setting properties and maintaining the state of the content steering manifest.
+ *
+ * Content Steering manifest format:
+ * VERSION: number (required) currently only version 1 is supported.
+ * TTL: number in seconds (optional) until the next content steering manifest reload.
+ * RELOAD-URI: string (optional) uri to fetch the next content steering manifest.
+ * SERVICE-LOCATION-PRIORITY or PATHWAY-PRIORITY a non empty array of unique string values.
+ * PATHWAY-CLONES: array (optional) (HLS only) pathway clone objects to copy from other playlists.
+ */
+
+class SteeringManifest {
+  constructor() {
+    this.priority_ = [];
+    this.pathwayClones_ = new Map();
+  }
+  set version(number) {
+    // Only version 1 is currently supported for both DASH and HLS.
+    if (number === 1) {
+      this.version_ = number;
+    }
+  }
+  set ttl(seconds) {
+    // TTL = time-to-live, default = 300 seconds.
+    this.ttl_ = seconds || 300;
+  }
+  set reloadUri(uri) {
+    if (uri) {
+      // reload URI can be relative to the previous reloadUri.
+      this.reloadUri_ = resolveUrl(this.reloadUri_, uri);
+    }
+  }
+  set priority(array) {
+    // priority must be non-empty and unique values.
+    if (array && array.length) {
+      this.priority_ = array;
+    }
+  }
+  set pathwayClones(array) {
+    // pathwayClones must be non-empty.
+    if (array && array.length) {
+      this.pathwayClones_ = new Map(array.map(clone => [clone.ID, clone]));
+    }
+  }
+  get version() {
+    return this.version_;
+  }
+  get ttl() {
+    return this.ttl_;
+  }
+  get reloadUri() {
+    return this.reloadUri_;
+  }
+  get priority() {
+    return this.priority_;
+  }
+  get pathwayClones() {
+    return this.pathwayClones_;
+  }
+}
+/**
+ * This class represents a content steering manifest and associated state. See both HLS and DASH specifications.
+ * HLS: https://developer.apple.com/streaming/HLSContentSteeringSpecification.pdf and
+ * https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/ section 4.4.6.6.
+ * DASH: https://dashif.org/docs/DASH-IF-CTS-00XX-Content-Steering-Community-Review.pdf
+ *
+ * @param {function} xhr for making a network request from the browser.
+ * @param {function} bandwidth for fetching the current bandwidth from the main segment loader.
+ */
+
+class ContentSteeringController extends videojs.EventTarget {
+  constructor(xhr, bandwidth) {
+    super();
+    this.currentPathway = null;
+    this.defaultPathway = null;
+    this.queryBeforeStart = false;
+    this.availablePathways_ = new Set();
+    this.steeringManifest = new SteeringManifest();
+    this.proxyServerUrl_ = null;
+    this.manifestType_ = null;
+    this.ttlTimeout_ = null;
+    this.request_ = null;
+    this.currentPathwayClones = new Map();
+    this.nextPathwayClones = new Map();
+    this.excludedSteeringManifestURLs = new Set();
+    this.logger_ = logger('Content Steering');
+    this.xhr_ = xhr;
+    this.getBandwidth_ = bandwidth;
+  }
+  /**
+   * Assigns the content steering tag properties to the steering controller
+   *
+   * @param {string} baseUrl the baseURL from the main manifest for resolving the steering manifest url
+   * @param {Object} steeringTag the content steering tag from the main manifest
+   */
+
+  assignTagProperties(baseUrl, steeringTag) {
+    this.manifestType_ = steeringTag.serverUri ? 'HLS' : 'DASH'; // serverUri is HLS serverURL is DASH
+
+    const steeringUri = steeringTag.serverUri || steeringTag.serverURL;
+    if (!steeringUri) {
+      this.logger_(`steering manifest URL is ${steeringUri}, cannot request steering manifest.`);
+      this.trigger('error');
+      return;
+    } // Content steering manifests can be encoded as a data URI. We can decode, parse and return early if that's the case.
+
+    if (steeringUri.startsWith('data:')) {
+      this.decodeDataUriManifest_(steeringUri.substring(steeringUri.indexOf(',') + 1));
+      return;
+    } // reloadUri is the resolution of the main manifest URL and steering URL.
+
+    this.steeringManifest.reloadUri = resolveUrl(baseUrl, steeringUri); // pathwayId is HLS defaultServiceLocation is DASH
+
+    this.defaultPathway = steeringTag.pathwayId || steeringTag.defaultServiceLocation; // currently only DASH supports the following properties on <ContentSteering> tags.
+
+    this.queryBeforeStart = steeringTag.queryBeforeStart;
+    this.proxyServerUrl_ = steeringTag.proxyServerURL; // trigger a steering event if we have a pathway from the content steering tag.
+    // this tells VHS which segment pathway to start with.
+    // If queryBeforeStart is true we need to wait for the steering manifest response.
+
+    if (this.defaultPathway && !this.queryBeforeStart) {
+      this.trigger('content-steering');
+    }
+  }
+  /**
+   * Requests the content steering manifest and parse the response. This should only be called after
+   * assignTagProperties was called with a content steering tag.
+   *
+   * @param {string} initialUri The optional uri to make the request with.
+   *    If set, the request should be made with exactly what is passed in this variable.
+   *    This scenario should only happen once on initalization.
+   */
+
+  requestSteeringManifest(initial) {
+    const reloadUri = this.steeringManifest.reloadUri;
+    if (!reloadUri) {
+      return;
+    } // We currently don't support passing MPD query parameters directly to the content steering URL as this requires
+    // ExtUrlQueryInfo tag support. See the DASH content steering spec section 8.1.
+    // This request URI accounts for manifest URIs that have been excluded.
+
+    const uri = initial ? reloadUri : this.getRequestURI(reloadUri); // If there are no valid manifest URIs, we should stop content steering.
+
+    if (!uri) {
+      this.logger_('No valid content steering manifest URIs. Stopping content steering.');
+      this.trigger('error');
+      this.dispose();
+      return;
+    }
+    this.request_ = this.xhr_({
+      uri,
+      requestType: 'content-steering-manifest'
+    }, (error, errorInfo) => {
+      if (error) {
+        // If the client receives HTTP 410 Gone in response to a manifest request,
+        // it MUST NOT issue another request for that URI for the remainder of the
+        // playback session. It MAY continue to use the most-recently obtained set
+        // of Pathways.
+        if (errorInfo.status === 410) {
+          this.logger_(`manifest request 410 ${error}.`);
+          this.logger_(`There will be no more content steering requests to ${uri} this session.`);
+          this.excludedSteeringManifestURLs.add(uri);
+          return;
+        } // If the client receives HTTP 429 Too Many Requests with a Retry-After
+        // header in response to a manifest request, it SHOULD wait until the time
+        // specified by the Retry-After header to reissue the request.
+
+        if (errorInfo.status === 429) {
+          const retrySeconds = errorInfo.responseHeaders['retry-after'];
+          this.logger_(`manifest request 429 ${error}.`);
+          this.logger_(`content steering will retry in ${retrySeconds} seconds.`);
+          this.startTTLTimeout_(parseInt(retrySeconds, 10));
+          return;
+        } // If the Steering Manifest cannot be loaded and parsed correctly, the
+        // client SHOULD continue to use the previous values and attempt to reload
+        // it after waiting for the previously-specified TTL (or 5 minutes if
+        // none).
+
+        this.logger_(`manifest failed to load ${error}.`);
+        this.startTTLTimeout_();
+        return;
+      }
+      const steeringManifestJson = JSON.parse(this.request_.responseText);
+      this.assignSteeringProperties_(steeringManifestJson);
+      this.startTTLTimeout_();
+    });
+  }
+  /**
+   * Set the proxy server URL and add the steering manifest url as a URI encoded parameter.
+   *
+   * @param {string} steeringUrl the steering manifest url
+   * @return the steering manifest url to a proxy server with all parameters set
+   */
+
+  setProxyServerUrl_(steeringUrl) {
+    const steeringUrlObject = new window__default["default"].URL(steeringUrl);
+    const proxyServerUrlObject = new window__default["default"].URL(this.proxyServerUrl_);
+    proxyServerUrlObject.searchParams.set('url', encodeURI(steeringUrlObject.toString()));
+    return this.setSteeringParams_(proxyServerUrlObject.toString());
+  }
+  /**
+   * Decodes and parses the data uri encoded steering manifest
+   *
+   * @param {string} dataUri the data uri to be decoded and parsed.
+   */
+
+  decodeDataUriManifest_(dataUri) {
+    const steeringManifestJson = JSON.parse(window__default["default"].atob(dataUri));
+    this.assignSteeringProperties_(steeringManifestJson);
+  }
+  /**
+   * Set the HLS or DASH content steering manifest request query parameters. For example:
+   * _HLS_pathway="<CURRENT-PATHWAY-ID>" and _HLS_throughput=<THROUGHPUT>
+   * _DASH_pathway and _DASH_throughput
+   *
+   * @param {string} uri to add content steering server parameters to.
+   * @return a new uri as a string with the added steering query parameters.
+   */
+
+  setSteeringParams_(url) {
+    const urlObject = new window__default["default"].URL(url);
+    const path = this.getPathway();
+    const networkThroughput = this.getBandwidth_();
+    if (path) {
+      const pathwayKey = `_${this.manifestType_}_pathway`;
+      urlObject.searchParams.set(pathwayKey, path);
+    }
+    if (networkThroughput) {
+      const throughputKey = `_${this.manifestType_}_throughput`;
+      urlObject.searchParams.set(throughputKey, networkThroughput);
+    }
+    return urlObject.toString();
+  }
+  /**
+   * Assigns the current steering manifest properties and to the SteeringManifest object
+   *
+   * @param {Object} steeringJson the raw JSON steering manifest
+   */
+
+  assignSteeringProperties_(steeringJson) {
+    this.steeringManifest.version = steeringJson.VERSION;
+    if (!this.steeringManifest.version) {
+      this.logger_(`manifest version is ${steeringJson.VERSION}, which is not supported.`);
+      this.trigger('error');
+      return;
+    }
+    this.steeringManifest.ttl = steeringJson.TTL;
+    this.steeringManifest.reloadUri = steeringJson['RELOAD-URI']; // HLS = PATHWAY-PRIORITY required. DASH = SERVICE-LOCATION-PRIORITY optional
+
+    this.steeringManifest.priority = steeringJson['PATHWAY-PRIORITY'] || steeringJson['SERVICE-LOCATION-PRIORITY']; // Pathway clones to be created/updated in HLS.
+    // See section 7.2 https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/
+
+    this.steeringManifest.pathwayClones = steeringJson['PATHWAY-CLONES'];
+    this.nextPathwayClones = this.steeringManifest.pathwayClones; // 1. apply first pathway from the array.
+    // 2. if first pathway doesn't exist in manifest, try next pathway.
+    //    a. if all pathways are exhausted, ignore the steering manifest priority.
+    // 3. if segments fail from an established pathway, try all variants/renditions, then exclude the failed pathway.
+    //    a. exclude a pathway for a minimum of the last TTL duration. Meaning, from the next steering response,
+    //       the excluded pathway will be ignored.
+    //       See excludePathway usage in excludePlaylist().
+    // If there are no available pathways, we need to stop content steering.
+
+    if (!this.availablePathways_.size) {
+      this.logger_('There are no available pathways for content steering. Ending content steering.');
+      this.trigger('error');
+      this.dispose();
+    }
+    const chooseNextPathway = pathwaysByPriority => {
+      for (const path of pathwaysByPriority) {
+        if (this.availablePathways_.has(path)) {
+          return path;
+        }
+      } // If no pathway matches, ignore the manifest and choose the first available.
+
+      return [...this.availablePathways_][0];
+    };
+    const nextPathway = chooseNextPathway(this.steeringManifest.priority);
+    if (this.currentPathway !== nextPathway) {
+      this.currentPathway = nextPathway;
+      this.trigger('content-steering');
+    }
+  }
+  /**
+   * Returns the pathway to use for steering decisions
+   *
+   * @return {string} returns the current pathway or the default
+   */
+
+  getPathway() {
+    return this.currentPathway || this.defaultPathway;
+  }
+  /**
+   * Chooses the manifest request URI based on proxy URIs and server URLs.
+   * Also accounts for exclusion on certain manifest URIs.
+   *
+   * @param {string} reloadUri the base uri before parameters
+   *
+   * @return {string} the final URI for the request to the manifest server.
+   */
+
+  getRequestURI(reloadUri) {
+    if (!reloadUri) {
+      return null;
+    }
+    const isExcluded = uri => this.excludedSteeringManifestURLs.has(uri);
+    if (this.proxyServerUrl_) {
+      const proxyURI = this.setProxyServerUrl_(reloadUri);
+      if (!isExcluded(proxyURI)) {
+        return proxyURI;
+      }
+    }
+    const steeringURI = this.setSteeringParams_(reloadUri);
+    if (!isExcluded(steeringURI)) {
+      return steeringURI;
+    } // Return nothing if all valid manifest URIs are excluded.
+
+    return null;
+  }
+  /**
+   * Start the timeout for re-requesting the steering manifest at the TTL interval.
+   *
+   * @param {number} ttl time in seconds of the timeout. Defaults to the
+   *        ttl interval in the steering manifest
+   */
+
+  startTTLTimeout_(ttl = this.steeringManifest.ttl) {
+    // 300 (5 minutes) is the default value.
+    const ttlMS = ttl * 1000;
+    this.ttlTimeout_ = window__default["default"].setTimeout(() => {
+      this.requestSteeringManifest();
+    }, ttlMS);
+  }
+  /**
+   * Clear the TTL timeout if necessary.
+   */
+
+  clearTTLTimeout_() {
+    window__default["default"].clearTimeout(this.ttlTimeout_);
+    this.ttlTimeout_ = null;
+  }
+  /**
+   * aborts any current steering xhr and sets the current request object to null
+   */
+
+  abort() {
+    if (this.request_) {
+      this.request_.abort();
+    }
+    this.request_ = null;
+  }
+  /**
+   * aborts steering requests clears the ttl timeout and resets all properties.
+   */
+
+  dispose() {
+    this.off('content-steering');
+    this.off('error');
+    this.abort();
+    this.clearTTLTimeout_();
+    this.currentPathway = null;
+    this.defaultPathway = null;
+    this.queryBeforeStart = null;
+    this.proxyServerUrl_ = null;
+    this.manifestType_ = null;
+    this.ttlTimeout_ = null;
+    this.request_ = null;
+    this.excludedSteeringManifestURLs = new Set();
+    this.availablePathways_ = new Set();
+    this.steeringManifest = new SteeringManifest();
+  }
+  /**
+   * adds a pathway to the available pathways set
+   *
+   * @param {string} pathway the pathway string to add
+   */
+
+  addAvailablePathway(pathway) {
+    if (pathway) {
+      this.availablePathways_.add(pathway);
+    }
+  }
+  /**
+   * Clears all pathways from the available pathways set
+   */
+
+  clearAvailablePathways() {
+    this.availablePathways_.clear();
+  }
+  /**
+   * Removes a pathway from the available pathways set.
+   */
+
+  excludePathway(pathway) {
+    return this.availablePathways_.delete(pathway);
+  }
+  /**
+   * Checks the refreshed DASH manifest content steering tag for changes.
+   *
+   * @param {string} baseURL new steering tag on DASH manifest refresh
+   * @param {Object} newTag the new tag to check for changes
+   * @return a true or false whether the new tag has different values
+   */
+
+  didDASHTagChange(baseURL, newTag) {
+    return !newTag && this.steeringManifest.reloadUri || newTag && (resolveUrl(baseURL, newTag.serverURL) !== this.steeringManifest.reloadUri || newTag.defaultServiceLocation !== this.defaultPathway || newTag.queryBeforeStart !== this.queryBeforeStart || newTag.proxyServerURL !== this.proxyServerUrl_);
+  }
+  getAvailablePathways() {
+    return this.availablePathways_;
+  }
+}
+
+/**
+ * @file playlist-controller.js
+ */
+const ABORT_EARLY_EXCLUSION_SECONDS = 10;
+let Vhs$1; // SegmentLoader stats that need to have each loader's
+// values summed to calculate the final value
+
+const loaderStats = ['mediaRequests', 'mediaRequestsAborted', 'mediaRequestsTimedout', 'mediaRequestsErrored', 'mediaTransferDuration', 'mediaBytesTransferred', 'mediaAppends'];
+const sumLoaderStat = function (stat) {
+  return this.audioSegmentLoader_[stat] + this.mainSegmentLoader_[stat];
+};
+const shouldSwitchToMedia = function ({
+  currentPlaylist,
+  buffered,
+  currentTime,
+  nextPlaylist,
+  bufferLowWaterLine,
+  bufferHighWaterLine,
+  duration,
+  bufferBasedABR,
+  log
+}) {
+  // we have no other playlist to switch to
+  if (!nextPlaylist) {
+    videojs.log.warn('We received no playlist to switch to. Please check your stream.');
+    return false;
+  }
+  const sharedLogLine = `allowing switch ${currentPlaylist && currentPlaylist.id || 'null'} -> ${nextPlaylist.id}`;
+  if (!currentPlaylist) {
+    log(`${sharedLogLine} as current playlist is not set`);
+    return true;
+  } // no need to switch if playlist is the same
+
+  if (nextPlaylist.id === currentPlaylist.id) {
+    return false;
+  } // determine if current time is in a buffered range.
+
+  const isBuffered = Boolean(findRange(buffered, currentTime).length); // If the playlist is live, then we want to not take low water line into account.
+  // This is because in LIVE, the player plays 3 segments from the end of the
+  // playlist, and if `BUFFER_LOW_WATER_LINE` is greater than the duration availble
+  // in those segments, a viewer will never experience a rendition upswitch.
+
+  if (!currentPlaylist.endList) {
+    // For LLHLS live streams, don't switch renditions before playback has started, as it almost
+    // doubles the time to first playback.
+    if (!isBuffered && typeof currentPlaylist.partTargetDuration === 'number') {
+      log(`not ${sharedLogLine} as current playlist is live llhls, but currentTime isn't in buffered.`);
+      return false;
+    }
+    log(`${sharedLogLine} as current playlist is live`);
+    return true;
+  }
+  const forwardBuffer = timeAheadOf(buffered, currentTime);
+  const maxBufferLowWaterLine = bufferBasedABR ? Config.EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE : Config.MAX_BUFFER_LOW_WATER_LINE; // For the same reason as LIVE, we ignore the low water line when the VOD
+  // duration is below the max potential low water line
+
+  if (duration < maxBufferLowWaterLine) {
+    log(`${sharedLogLine} as duration < max low water line (${duration} < ${maxBufferLowWaterLine})`);
+    return true;
+  }
+  const nextBandwidth = nextPlaylist.attributes.BANDWIDTH;
+  const currBandwidth = currentPlaylist.attributes.BANDWIDTH; // when switching down, if our buffer is lower than the high water line,
+  // we can switch down
+
+  if (nextBandwidth < currBandwidth && (!bufferBasedABR || forwardBuffer < bufferHighWaterLine)) {
+    let logLine = `${sharedLogLine} as next bandwidth < current bandwidth (${nextBandwidth} < ${currBandwidth})`;
+    if (bufferBasedABR) {
+      logLine += ` and forwardBuffer < bufferHighWaterLine (${forwardBuffer} < ${bufferHighWaterLine})`;
+    }
+    log(logLine);
+    return true;
+  } // and if our buffer is higher than the low water line,
+  // we can switch up
+
+  if ((!bufferBasedABR || nextBandwidth > currBandwidth) && forwardBuffer >= bufferLowWaterLine) {
+    let logLine = `${sharedLogLine} as forwardBuffer >= bufferLowWaterLine (${forwardBuffer} >= ${bufferLowWaterLine})`;
+    if (bufferBasedABR) {
+      logLine += ` and next bandwidth > current bandwidth (${nextBandwidth} > ${currBandwidth})`;
+    }
+    log(logLine);
+    return true;
+  }
+  log(`not ${sharedLogLine} as no switching criteria met`);
+  return false;
+};
+/**
+ * the main playlist controller controller all interactons
+ * between playlists and segmentloaders. At this time this mainly
+ * involves a main playlist and a series of audio playlists
+ * if they are available
+ *
+ * @class PlaylistController
+ * @extends videojs.EventTarget
+ */
+
+class PlaylistController extends videojs.EventTarget {
+  constructor(options) {
+    super();
+    const {
+      src,
+      withCredentials,
+      tech,
+      bandwidth,
+      externVhs,
+      useCueTags,
+      playlistExclusionDuration,
+      enableLowInitialPlaylist,
+      sourceType,
+      cacheEncryptionKeys,
+      bufferBasedABR,
+      leastPixelDiffSelector,
+      captionServices
+    } = options;
+    if (!src) {
+      throw new Error('A non-empty playlist URL or JSON manifest string is required');
+    }
+    let {
+      maxPlaylistRetries
+    } = options;
+    if (maxPlaylistRetries === null || typeof maxPlaylistRetries === 'undefined') {
+      maxPlaylistRetries = Infinity;
+    }
+    Vhs$1 = externVhs;
+    this.bufferBasedABR = Boolean(bufferBasedABR);
+    this.leastPixelDiffSelector = Boolean(leastPixelDiffSelector);
+    this.withCredentials = withCredentials;
+    this.tech_ = tech;
+    this.vhs_ = tech.vhs;
+    this.sourceType_ = sourceType;
+    this.useCueTags_ = useCueTags;
+    this.playlistExclusionDuration = playlistExclusionDuration;
+    this.maxPlaylistRetries = maxPlaylistRetries;
+    this.enableLowInitialPlaylist = enableLowInitialPlaylist;
+    if (this.useCueTags_) {
+      this.cueTagsTrack_ = this.tech_.addTextTrack('metadata', 'ad-cues');
+      this.cueTagsTrack_.inBandMetadataTrackDispatchType = '';
+    }
+    this.requestOptions_ = {
+      withCredentials,
+      maxPlaylistRetries,
+      timeout: null
+    };
+    this.on('error', this.pauseLoading);
+    this.mediaTypes_ = createMediaTypes();
+    this.mediaSource = new window__default["default"].MediaSource();
+    this.handleDurationChange_ = this.handleDurationChange_.bind(this);
+    this.handleSourceOpen_ = this.handleSourceOpen_.bind(this);
+    this.handleSourceEnded_ = this.handleSourceEnded_.bind(this);
+    this.mediaSource.addEventListener('durationchange', this.handleDurationChange_); // load the media source into the player
+
+    this.mediaSource.addEventListener('sourceopen', this.handleSourceOpen_);
+    this.mediaSource.addEventListener('sourceended', this.handleSourceEnded_); // we don't have to handle sourceclose since dispose will handle termination of
+    // everything, and the MediaSource should not be detached without a proper disposal
+
+    this.seekable_ = createTimeRanges();
+    this.hasPlayed_ = false;
+    this.syncController_ = new SyncController(options);
+    this.segmentMetadataTrack_ = tech.addRemoteTextTrack({
+      kind: 'metadata',
+      label: 'segment-metadata'
+    }, false).track;
+    this.decrypter_ = new Decrypter();
+    this.sourceUpdater_ = new SourceUpdater(this.mediaSource);
+    this.inbandTextTracks_ = {};
+    this.timelineChangeController_ = new TimelineChangeController();
+    this.keyStatusMap_ = new Map();
+    const segmentLoaderSettings = {
+      vhs: this.vhs_,
+      parse708captions: options.parse708captions,
+      useDtsForTimestampOffset: options.useDtsForTimestampOffset,
+      captionServices,
+      mediaSource: this.mediaSource,
+      currentTime: this.tech_.currentTime.bind(this.tech_),
+      seekable: () => this.seekable(),
+      seeking: () => this.tech_.seeking(),
+      duration: () => this.duration(),
+      hasPlayed: () => this.hasPlayed_,
+      goalBufferLength: () => this.goalBufferLength(),
+      bandwidth,
+      syncController: this.syncController_,
+      decrypter: this.decrypter_,
+      sourceType: this.sourceType_,
+      inbandTextTracks: this.inbandTextTracks_,
+      cacheEncryptionKeys,
+      sourceUpdater: this.sourceUpdater_,
+      timelineChangeController: this.timelineChangeController_,
+      exactManifestTimings: options.exactManifestTimings,
+      addMetadataToTextTrack: this.addMetadataToTextTrack.bind(this)
+    }; // The source type check not only determines whether a special DASH playlist loader
+    // should be used, but also covers the case where the provided src is a vhs-json
+    // manifest object (instead of a URL). In the case of vhs-json, the default
+    // PlaylistLoader should be used.
+
+    this.mainPlaylistLoader_ = this.sourceType_ === 'dash' ? new DashPlaylistLoader(src, this.vhs_, merge(this.requestOptions_, {
+      addMetadataToTextTrack: this.addMetadataToTextTrack.bind(this)
+    })) : new PlaylistLoader(src, this.vhs_, merge(this.requestOptions_, {
+      addDateRangesToTextTrack: this.addDateRangesToTextTrack_.bind(this)
+    }));
+    this.setupMainPlaylistLoaderListeners_(); // setup segment loaders
+    // combined audio/video or just video when alternate audio track is selected
+
+    this.mainSegmentLoader_ = new SegmentLoader(merge(segmentLoaderSettings, {
+      segmentMetadataTrack: this.segmentMetadataTrack_,
+      loaderType: 'main'
+    }), options); // alternate audio track
+
+    this.audioSegmentLoader_ = new SegmentLoader(merge(segmentLoaderSettings, {
+      loaderType: 'audio'
+    }), options);
+    this.subtitleSegmentLoader_ = new VTTSegmentLoader(merge(segmentLoaderSettings, {
+      loaderType: 'vtt',
+      featuresNativeTextTracks: this.tech_.featuresNativeTextTracks,
+      loadVttJs: () => new Promise((resolve, reject) => {
+        function onLoad() {
+          tech.off('vttjserror', onError);
+          resolve();
+        }
+        function onError() {
+          tech.off('vttjsloaded', onLoad);
+          reject();
+        }
+        tech.one('vttjsloaded', onLoad);
+        tech.one('vttjserror', onError); // safe to call multiple times, script will be loaded only once:
+
+        tech.addWebVttScript_();
+      })
+    }), options);
+    const getBandwidth = () => {
+      return this.mainSegmentLoader_.bandwidth;
+    };
+    this.contentSteeringController_ = new ContentSteeringController(this.vhs_.xhr, getBandwidth);
+    this.setupSegmentLoaderListeners_();
+    if (this.bufferBasedABR) {
+      this.mainPlaylistLoader_.one('loadedplaylist', () => this.startABRTimer_());
+      this.tech_.on('pause', () => this.stopABRTimer_());
+      this.tech_.on('play', () => this.startABRTimer_());
+    } // Create SegmentLoader stat-getters
+    // mediaRequests_
+    // mediaRequestsAborted_
+    // mediaRequestsTimedout_
+    // mediaRequestsErrored_
+    // mediaTransferDuration_
+    // mediaBytesTransferred_
+    // mediaAppends_
+
+    loaderStats.forEach(stat => {
+      this[stat + '_'] = sumLoaderStat.bind(this, stat);
+    });
+    this.logger_ = logger('pc');
+    this.triggeredFmp4Usage = false;
+    if (this.tech_.preload() === 'none') {
+      this.loadOnPlay_ = () => {
+        this.loadOnPlay_ = null;
+        this.mainPlaylistLoader_.load();
+      };
+      this.tech_.one('play', this.loadOnPlay_);
+    } else {
+      this.mainPlaylistLoader_.load();
+    }
+    this.timeToLoadedData__ = -1;
+    this.mainAppendsToLoadedData__ = -1;
+    this.audioAppendsToLoadedData__ = -1;
+    const event = this.tech_.preload() === 'none' ? 'play' : 'loadstart'; // start the first frame timer on loadstart or play (for preload none)
+
+    this.tech_.one(event, () => {
+      const timeToLoadedDataStart = Date.now();
+      this.tech_.one('loadeddata', () => {
+        this.timeToLoadedData__ = Date.now() - timeToLoadedDataStart;
+        this.mainAppendsToLoadedData__ = this.mainSegmentLoader_.mediaAppends;
+        this.audioAppendsToLoadedData__ = this.audioSegmentLoader_.mediaAppends;
+      });
+    });
+  }
+  mainAppendsToLoadedData_() {
+    return this.mainAppendsToLoadedData__;
+  }
+  audioAppendsToLoadedData_() {
+    return this.audioAppendsToLoadedData__;
+  }
+  appendsToLoadedData_() {
+    const main = this.mainAppendsToLoadedData_();
+    const audio = this.audioAppendsToLoadedData_();
+    if (main === -1 || audio === -1) {
+      return -1;
+    }
+    return main + audio;
+  }
+  timeToLoadedData_() {
+    return this.timeToLoadedData__;
+  }
+  /**
+   * Run selectPlaylist and switch to the new playlist if we should
+   *
+   * @param {string} [reason=abr] a reason for why the ABR check is made
+   * @private
+   */
+
+  checkABR_(reason = 'abr') {
+    const nextPlaylist = this.selectPlaylist();
+    if (nextPlaylist && this.shouldSwitchToMedia_(nextPlaylist)) {
+      this.switchMedia_(nextPlaylist, reason);
+    }
+  }
+  switchMedia_(playlist, cause, delay) {
+    const oldMedia = this.media();
+    const oldId = oldMedia && (oldMedia.id || oldMedia.uri);
+    const newId = playlist && (playlist.id || playlist.uri);
+    if (oldId && oldId !== newId) {
+      this.logger_(`switch media ${oldId} -> ${newId} from ${cause}`);
+      this.tech_.trigger({
+        type: 'usage',
+        name: `vhs-rendition-change-${cause}`
+      });
+    }
+    this.mainPlaylistLoader_.media(playlist, delay);
+  }
+  /**
+   * A function that ensures we switch our playlists inside of `mediaTypes`
+   * to match the current `serviceLocation` provided by the contentSteering controller.
+   * We want to check media types of `AUDIO`, `SUBTITLES`, and `CLOSED-CAPTIONS`.
+   *
+   * This should only be called on a DASH playback scenario while using content steering.
+   * This is necessary due to differences in how media in HLS manifests are generally tied to
+   * a video playlist, where in DASH that is not always the case.
+   */
+
+  switchMediaForDASHContentSteering_() {
+    ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+      const mediaType = this.mediaTypes_[type];
+      const activeGroup = mediaType ? mediaType.activeGroup() : null;
+      const pathway = this.contentSteeringController_.getPathway();
+      if (activeGroup && pathway) {
+        // activeGroup can be an array or a single group
+        const mediaPlaylists = activeGroup.length ? activeGroup[0].playlists : activeGroup.playlists;
+        const dashMediaPlaylists = mediaPlaylists.filter(p => p.attributes.serviceLocation === pathway); // Switch the current active playlist to the correct CDN
+
+        if (dashMediaPlaylists.length) {
+          this.mediaTypes_[type].activePlaylistLoader.media(dashMediaPlaylists[0]);
+        }
+      }
+    });
+  }
+  /**
+   * Start a timer that periodically calls checkABR_
+   *
+   * @private
+   */
+
+  startABRTimer_() {
+    this.stopABRTimer_();
+    this.abrTimer_ = window__default["default"].setInterval(() => this.checkABR_(), 250);
+  }
+  /**
+   * Stop the timer that periodically calls checkABR_
+   *
+   * @private
+   */
+
+  stopABRTimer_() {
+    // if we're scrubbing, we don't need to pause.
+    // This getter will be added to Video.js in version 7.11.
+    if (this.tech_.scrubbing && this.tech_.scrubbing()) {
+      return;
+    }
+    window__default["default"].clearInterval(this.abrTimer_);
+    this.abrTimer_ = null;
+  }
+  /**
+   * Get a list of playlists for the currently selected audio playlist
+   *
+   * @return {Array} the array of audio playlists
+   */
+
+  getAudioTrackPlaylists_() {
+    const main = this.main();
+    const defaultPlaylists = main && main.playlists || []; // if we don't have any audio groups then we can only
+    // assume that the audio tracks are contained in main
+    // playlist array, use that or an empty array.
+
+    if (!main || !main.mediaGroups || !main.mediaGroups.AUDIO) {
+      return defaultPlaylists;
+    }
+    const AUDIO = main.mediaGroups.AUDIO;
+    const groupKeys = Object.keys(AUDIO);
+    let track; // get the current active track
+
+    if (Object.keys(this.mediaTypes_.AUDIO.groups).length) {
+      track = this.mediaTypes_.AUDIO.activeTrack(); // or get the default track from main if mediaTypes_ isn't setup yet
+    } else {
+      // default group is `main` or just the first group.
+      const defaultGroup = AUDIO.main || groupKeys.length && AUDIO[groupKeys[0]];
+      for (const label in defaultGroup) {
+        if (defaultGroup[label].default) {
+          track = {
+            label
+          };
+          break;
+        }
+      }
+    } // no active track no playlists.
+
+    if (!track) {
+      return defaultPlaylists;
+    }
+    const playlists = []; // get all of the playlists that are possible for the
+    // active track.
+
+    for (const group in AUDIO) {
+      if (AUDIO[group][track.label]) {
+        const properties = AUDIO[group][track.label];
+        if (properties.playlists && properties.playlists.length) {
+          playlists.push.apply(playlists, properties.playlists);
+        } else if (properties.uri) {
+          playlists.push(properties);
+        } else if (main.playlists.length) {
+          // if an audio group does not have a uri
+          // see if we have main playlists that use it as a group.
+          // if we do then add those to the playlists list.
+          for (let i = 0; i < main.playlists.length; i++) {
+            const playlist = main.playlists[i];
+            if (playlist.attributes && playlist.attributes.AUDIO && playlist.attributes.AUDIO === group) {
+              playlists.push(playlist);
+            }
+          }
+        }
+      }
+    }
+    if (!playlists.length) {
+      return defaultPlaylists;
+    }
+    return playlists;
+  }
+  /**
+   * Register event handlers on the main playlist loader. A helper
+   * function for construction time.
+   *
+   * @private
+   */
+
+  setupMainPlaylistLoaderListeners_() {
+    this.mainPlaylistLoader_.on('loadedmetadata', () => {
+      const media = this.mainPlaylistLoader_.media();
+      const requestTimeout = media.targetDuration * 1.5 * 1000; // If we don't have any more available playlists, we don't want to
+      // timeout the request.
+
+      if (isLowestEnabledRendition(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.media())) {
+        this.requestOptions_.timeout = 0;
+      } else {
+        this.requestOptions_.timeout = requestTimeout;
+      } // if this isn't a live video and preload permits, start
+      // downloading segments
+
+      if (media.endList && this.tech_.preload() !== 'none') {
+        this.mainSegmentLoader_.playlist(media, this.requestOptions_);
+        this.mainSegmentLoader_.load();
+      }
+      setupMediaGroups({
+        sourceType: this.sourceType_,
+        segmentLoaders: {
+          AUDIO: this.audioSegmentLoader_,
+          SUBTITLES: this.subtitleSegmentLoader_,
+          main: this.mainSegmentLoader_
+        },
+        tech: this.tech_,
+        requestOptions: this.requestOptions_,
+        mainPlaylistLoader: this.mainPlaylistLoader_,
+        vhs: this.vhs_,
+        main: this.main(),
+        mediaTypes: this.mediaTypes_,
+        excludePlaylist: this.excludePlaylist.bind(this)
+      });
+      this.triggerPresenceUsage_(this.main(), media);
+      this.setupFirstPlay();
+      if (!this.mediaTypes_.AUDIO.activePlaylistLoader || this.mediaTypes_.AUDIO.activePlaylistLoader.media()) {
+        this.trigger('selectedinitialmedia');
+      } else {
+        // We must wait for the active audio playlist loader to
+        // finish setting up before triggering this event so the
+        // representations API and EME setup is correct
+        this.mediaTypes_.AUDIO.activePlaylistLoader.one('loadedmetadata', () => {
+          this.trigger('selectedinitialmedia');
+        });
+      }
+    });
+    this.mainPlaylistLoader_.on('loadedplaylist', () => {
+      if (this.loadOnPlay_) {
+        this.tech_.off('play', this.loadOnPlay_);
+      }
+      let updatedPlaylist = this.mainPlaylistLoader_.media();
+      if (!updatedPlaylist) {
+        // Add content steering listeners on first load and init.
+        this.attachContentSteeringListeners_();
+        this.initContentSteeringController_(); // exclude any variants that are not supported by the browser before selecting
+        // an initial media as the playlist selectors do not consider browser support
+
+        this.excludeUnsupportedVariants_();
+        let selectedMedia;
+        if (this.enableLowInitialPlaylist) {
+          selectedMedia = this.selectInitialPlaylist();
+        }
+        if (!selectedMedia) {
+          selectedMedia = this.selectPlaylist();
+        }
+        if (!selectedMedia || !this.shouldSwitchToMedia_(selectedMedia)) {
+          return;
+        }
+        this.initialMedia_ = selectedMedia;
+        this.switchMedia_(this.initialMedia_, 'initial'); // Under the standard case where a source URL is provided, loadedplaylist will
+        // fire again since the playlist will be requested. In the case of vhs-json
+        // (where the manifest object is provided as the source), when the media
+        // playlist's `segments` list is already available, a media playlist won't be
+        // requested, and loadedplaylist won't fire again, so the playlist handler must be
+        // called on its own here.
+
+        const haveJsonSource = this.sourceType_ === 'vhs-json' && this.initialMedia_.segments;
+        if (!haveJsonSource) {
+          return;
+        }
+        updatedPlaylist = this.initialMedia_;
+      }
+      this.handleUpdatedMediaPlaylist(updatedPlaylist);
+    });
+    this.mainPlaylistLoader_.on('error', () => {
+      const error = this.mainPlaylistLoader_.error;
+      this.excludePlaylist({
+        playlistToExclude: error.playlist,
+        error
+      });
+    });
+    this.mainPlaylistLoader_.on('mediachanging', () => {
+      this.mainSegmentLoader_.abort();
+      this.mainSegmentLoader_.pause();
+    });
+    this.mainPlaylistLoader_.on('mediachange', () => {
+      const media = this.mainPlaylistLoader_.media();
+      const requestTimeout = media.targetDuration * 1.5 * 1000; // If we don't have any more available playlists, we don't want to
+      // timeout the request.
+
+      if (isLowestEnabledRendition(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.media())) {
+        this.requestOptions_.timeout = 0;
+      } else {
+        this.requestOptions_.timeout = requestTimeout;
+      }
+      if (this.sourceType_ === 'dash') {
+        // we don't want to re-request the same hls playlist right after it was changed
+        this.mainPlaylistLoader_.load();
+      } // TODO: Create a new event on the PlaylistLoader that signals
+      // that the segments have changed in some way and use that to
+      // update the SegmentLoader instead of doing it twice here and
+      // on `loadedplaylist`
+
+      this.mainSegmentLoader_.pause();
+      this.mainSegmentLoader_.playlist(media, this.requestOptions_);
+      if (this.waitingForFastQualityPlaylistReceived_) {
+        this.runFastQualitySwitch_();
+      } else {
+        this.mainSegmentLoader_.load();
+      }
+      this.tech_.trigger({
+        type: 'mediachange',
+        bubbles: true
+      });
+    });
+    this.mainPlaylistLoader_.on('playlistunchanged', () => {
+      const updatedPlaylist = this.mainPlaylistLoader_.media(); // ignore unchanged playlists that have already been
+      // excluded for not-changing. We likely just have a really slowly updating
+      // playlist.
+
+      if (updatedPlaylist.lastExcludeReason_ === 'playlist-unchanged') {
+        return;
+      }
+      const playlistOutdated = this.stuckAtPlaylistEnd_(updatedPlaylist);
+      if (playlistOutdated) {
+        // Playlist has stopped updating and we're stuck at its end. Try to
+        // exclude it and switch to another playlist in the hope that that
+        // one is updating (and give the player a chance to re-adjust to the
+        // safe live point).
+        this.excludePlaylist({
+          error: {
+            message: 'Playlist no longer updating.',
+            reason: 'playlist-unchanged'
+          }
+        }); // useful for monitoring QoS
+
+        this.tech_.trigger('playliststuck');
+      }
+    });
+    this.mainPlaylistLoader_.on('renditiondisabled', () => {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-rendition-disabled'
+      });
+    });
+    this.mainPlaylistLoader_.on('renditionenabled', () => {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-rendition-enabled'
+      });
+    });
+  }
+  /**
+   * Given an updated media playlist (whether it was loaded for the first time, or
+   * refreshed for live playlists), update any relevant properties and state to reflect
+   * changes in the media that should be accounted for (e.g., cues and duration).
+   *
+   * @param {Object} updatedPlaylist the updated media playlist object
+   *
+   * @private
+   */
+
+  handleUpdatedMediaPlaylist(updatedPlaylist) {
+    if (this.useCueTags_) {
+      this.updateAdCues_(updatedPlaylist);
+    } // TODO: Create a new event on the PlaylistLoader that signals
+    // that the segments have changed in some way and use that to
+    // update the SegmentLoader instead of doing it twice here and
+    // on `mediachange`
+
+    this.mainSegmentLoader_.pause();
+    this.mainSegmentLoader_.playlist(updatedPlaylist, this.requestOptions_);
+    if (this.waitingForFastQualityPlaylistReceived_) {
+      this.runFastQualitySwitch_();
+    }
+    this.updateDuration(!updatedPlaylist.endList); // If the player isn't paused, ensure that the segment loader is running,
+    // as it is possible that it was temporarily stopped while waiting for
+    // a playlist (e.g., in case the playlist errored and we re-requested it).
+
+    if (!this.tech_.paused()) {
+      this.mainSegmentLoader_.load();
+      if (this.audioSegmentLoader_) {
+        this.audioSegmentLoader_.load();
+      }
+    }
+  }
+  /**
+   * A helper function for triggerring presence usage events once per source
+   *
+   * @private
+   */
+
+  triggerPresenceUsage_(main, media) {
+    const mediaGroups = main.mediaGroups || {};
+    let defaultDemuxed = true;
+    const audioGroupKeys = Object.keys(mediaGroups.AUDIO);
+    for (const mediaGroup in mediaGroups.AUDIO) {
+      for (const label in mediaGroups.AUDIO[mediaGroup]) {
+        const properties = mediaGroups.AUDIO[mediaGroup][label];
+        if (!properties.uri) {
+          defaultDemuxed = false;
+        }
+      }
+    }
+    if (defaultDemuxed) {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-demuxed'
+      });
+    }
+    if (Object.keys(mediaGroups.SUBTITLES).length) {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-webvtt'
+      });
+    }
+    if (Vhs$1.Playlist.isAes(media)) {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-aes'
+      });
+    }
+    if (audioGroupKeys.length && Object.keys(mediaGroups.AUDIO[audioGroupKeys[0]]).length > 1) {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-alternate-audio'
+      });
+    }
+    if (this.useCueTags_) {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-playlist-cue-tags'
+      });
+    }
+  }
+  shouldSwitchToMedia_(nextPlaylist) {
+    const currentPlaylist = this.mainPlaylistLoader_.media() || this.mainPlaylistLoader_.pendingMedia_;
+    const currentTime = this.tech_.currentTime();
+    const bufferLowWaterLine = this.bufferLowWaterLine();
+    const bufferHighWaterLine = this.bufferHighWaterLine();
+    const buffered = this.tech_.buffered();
+    return shouldSwitchToMedia({
+      buffered,
+      currentTime,
+      currentPlaylist,
+      nextPlaylist,
+      bufferLowWaterLine,
+      bufferHighWaterLine,
+      duration: this.duration(),
+      bufferBasedABR: this.bufferBasedABR,
+      log: this.logger_
+    });
+  }
+  /**
+   * Register event handlers on the segment loaders. A helper function
+   * for construction time.
+   *
+   * @private
+   */
+
+  setupSegmentLoaderListeners_() {
+    this.mainSegmentLoader_.on('bandwidthupdate', () => {
+      // Whether or not buffer based ABR or another ABR is used, on a bandwidth change it's
+      // useful to check to see if a rendition switch should be made.
+      this.checkABR_('bandwidthupdate');
+      this.tech_.trigger('bandwidthupdate');
+    });
+    this.mainSegmentLoader_.on('timeout', () => {
+      if (this.bufferBasedABR) {
+        // If a rendition change is needed, then it would've be done on `bandwidthupdate`.
+        // Here the only consideration is that for buffer based ABR there's no guarantee
+        // of an immediate switch (since the bandwidth is averaged with a timeout
+        // bandwidth value of 1), so force a load on the segment loader to keep it going.
+        this.mainSegmentLoader_.load();
+      }
+    }); // `progress` events are not reliable enough of a bandwidth measure to trigger buffer
+    // based ABR.
+
+    if (!this.bufferBasedABR) {
+      this.mainSegmentLoader_.on('progress', () => {
+        this.trigger('progress');
+      });
+    }
+    this.mainSegmentLoader_.on('error', () => {
+      const error = this.mainSegmentLoader_.error();
+      this.excludePlaylist({
+        playlistToExclude: error.playlist,
+        error
+      });
+    });
+    this.mainSegmentLoader_.on('appenderror', () => {
+      this.error = this.mainSegmentLoader_.error_;
+      this.trigger('error');
+    });
+    this.mainSegmentLoader_.on('syncinfoupdate', () => {
+      this.onSyncInfoUpdate_();
+    });
+    this.mainSegmentLoader_.on('timestampoffset', () => {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-timestamp-offset'
+      });
+    });
+    this.audioSegmentLoader_.on('syncinfoupdate', () => {
+      this.onSyncInfoUpdate_();
+    });
+    this.audioSegmentLoader_.on('appenderror', () => {
+      this.error = this.audioSegmentLoader_.error_;
+      this.trigger('error');
+    });
+    this.mainSegmentLoader_.on('ended', () => {
+      this.logger_('main segment loader ended');
+      this.onEndOfStream();
+    });
+    this.mainSegmentLoader_.on('earlyabort', event => {
+      // never try to early abort with the new ABR algorithm
+      if (this.bufferBasedABR) {
+        return;
+      }
+      this.delegateLoaders_('all', ['abort']);
+      this.excludePlaylist({
+        error: {
+          message: 'Aborted early because there isn\'t enough bandwidth to complete ' + 'the request without rebuffering.'
+        },
+        playlistExclusionDuration: ABORT_EARLY_EXCLUSION_SECONDS
+      });
+    });
+    const updateCodecs = () => {
+      if (!this.sourceUpdater_.hasCreatedSourceBuffers()) {
+        return this.tryToCreateSourceBuffers_();
+      }
+      const codecs = this.getCodecsOrExclude_(); // no codecs means that the playlist was excluded
+
+      if (!codecs) {
+        return;
+      }
+      this.sourceUpdater_.addOrChangeSourceBuffers(codecs);
+    };
+    this.mainSegmentLoader_.on('trackinfo', updateCodecs);
+    this.audioSegmentLoader_.on('trackinfo', updateCodecs);
+    this.mainSegmentLoader_.on('fmp4', () => {
+      if (!this.triggeredFmp4Usage) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-fmp4'
+        });
+        this.triggeredFmp4Usage = true;
+      }
+    });
+    this.audioSegmentLoader_.on('fmp4', () => {
+      if (!this.triggeredFmp4Usage) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-fmp4'
+        });
+        this.triggeredFmp4Usage = true;
+      }
+    });
+    this.audioSegmentLoader_.on('ended', () => {
+      this.logger_('audioSegmentLoader ended');
+      this.onEndOfStream();
+    });
+  }
+  mediaSecondsLoaded_() {
+    return Math.max(this.audioSegmentLoader_.mediaSecondsLoaded + this.mainSegmentLoader_.mediaSecondsLoaded);
+  }
+  /**
+   * Call load on our SegmentLoaders
+   */
+
+  load() {
+    this.mainSegmentLoader_.load();
+    if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+      this.audioSegmentLoader_.load();
+    }
+    if (this.mediaTypes_.SUBTITLES.activePlaylistLoader) {
+      this.subtitleSegmentLoader_.load();
+    }
+  }
+  /**
+   * Re-tune playback quality level for the current player
+   * conditions. This method will perform destructive actions like removing
+   * already buffered content in order to readjust the currently active
+   * playlist quickly. This is good for manual quality changes
+   *
+   * @private
+   */
+
+  fastQualityChange_(media = this.selectPlaylist()) {
+    if (media && media === this.mainPlaylistLoader_.media()) {
+      this.logger_('skipping fastQualityChange because new media is same as old');
+      return;
+    }
+    this.switchMedia_(media, 'fast-quality'); // we would like to avoid race condition when we call fastQuality,
+    // reset everything and start loading segments from prev segments instead of new because new playlist is not received yet
+
+    this.waitingForFastQualityPlaylistReceived_ = true;
+  }
+  runFastQualitySwitch_() {
+    this.waitingForFastQualityPlaylistReceived_ = false; // Delete all buffered data to allow an immediate quality switch, then seek to give
+    // the browser a kick to remove any cached frames from the previous rendtion (.04 seconds
+    // ahead was roughly the minimum that will accomplish this across a variety of content
+    // in IE and Edge, but seeking in place is sufficient on all other browsers)
+    // Edge/IE bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14600375/
+    // Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=651904
+
+    this.mainSegmentLoader_.pause();
+    this.mainSegmentLoader_.resetEverything(() => {
+      this.tech_.setCurrentTime(this.tech_.currentTime());
+    }); // don't need to reset audio as it is reset when media changes
+  }
+  /**
+   * Begin playback.
+   */
+
+  play() {
+    if (this.setupFirstPlay()) {
+      return;
+    }
+    if (this.tech_.ended()) {
+      this.tech_.setCurrentTime(0);
+    }
+    if (this.hasPlayed_) {
+      this.load();
+    }
+    const seekable = this.tech_.seekable(); // if the viewer has paused and we fell out of the live window,
+    // seek forward to the live point
+
+    if (this.tech_.duration() === Infinity) {
+      if (this.tech_.currentTime() < seekable.start(0)) {
+        return this.tech_.setCurrentTime(seekable.end(seekable.length - 1));
+      }
+    }
+  }
+  /**
+   * Seek to the latest media position if this is a live video and the
+   * player and video are loaded and initialized.
+   */
+
+  setupFirstPlay() {
+    const media = this.mainPlaylistLoader_.media(); // Check that everything is ready to begin buffering for the first call to play
+    //  If 1) there is no active media
+    //     2) the player is paused
+    //     3) the first play has already been setup
+    // then exit early
+
+    if (!media || this.tech_.paused() || this.hasPlayed_) {
+      return false;
+    } // when the video is a live stream and/or has a start time
+
+    if (!media.endList || media.start) {
+      const seekable = this.seekable();
+      if (!seekable.length) {
+        // without a seekable range, the player cannot seek to begin buffering at the
+        // live or start point
+        return false;
+      }
+      const seekableEnd = seekable.end(0);
+      let startPoint = seekableEnd;
+      if (media.start) {
+        const offset = media.start.timeOffset;
+        if (offset < 0) {
+          startPoint = Math.max(seekableEnd + offset, seekable.start(0));
+        } else {
+          startPoint = Math.min(seekableEnd, offset);
+        }
+      } // trigger firstplay to inform the source handler to ignore the next seek event
+
+      this.trigger('firstplay'); // seek to the live point
+
+      this.tech_.setCurrentTime(startPoint);
+    }
+    this.hasPlayed_ = true; // we can begin loading now that everything is ready
+
+    this.load();
+    return true;
+  }
+  /**
+   * handle the sourceopen event on the MediaSource
+   *
+   * @private
+   */
+
+  handleSourceOpen_() {
+    // Only attempt to create the source buffer if none already exist.
+    // handleSourceOpen is also called when we are "re-opening" a source buffer
+    // after `endOfStream` has been called (in response to a seek for instance)
+    this.tryToCreateSourceBuffers_(); // if autoplay is enabled, begin playback. This is duplicative of
+    // code in video.js but is required because play() must be invoked
+    // *after* the media source has opened.
+
+    if (this.tech_.autoplay()) {
+      const playPromise = this.tech_.play(); // Catch/silence error when a pause interrupts a play request
+      // on browsers which return a promise
+
+      if (typeof playPromise !== 'undefined' && typeof playPromise.then === 'function') {
+        playPromise.then(null, e => {});
+      }
+    }
+    this.trigger('sourceopen');
+  }
+  /**
+   * handle the sourceended event on the MediaSource
+   *
+   * @private
+   */
+
+  handleSourceEnded_() {
+    if (!this.inbandTextTracks_.metadataTrack_) {
+      return;
+    }
+    const cues = this.inbandTextTracks_.metadataTrack_.cues;
+    if (!cues || !cues.length) {
+      return;
+    }
+    const duration = this.duration();
+    cues[cues.length - 1].endTime = isNaN(duration) || Math.abs(duration) === Infinity ? Number.MAX_VALUE : duration;
+  }
+  /**
+   * handle the durationchange event on the MediaSource
+   *
+   * @private
+   */
+
+  handleDurationChange_() {
+    this.tech_.trigger('durationchange');
+  }
+  /**
+   * Calls endOfStream on the media source when all active stream types have called
+   * endOfStream
+   *
+   * @param {string} streamType
+   *        Stream type of the segment loader that called endOfStream
+   * @private
+   */
+
+  onEndOfStream() {
+    let isEndOfStream = this.mainSegmentLoader_.ended_;
+    if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+      const mainMediaInfo = this.mainSegmentLoader_.getCurrentMediaInfo_(); // if the audio playlist loader exists, then alternate audio is active
+
+      if (!mainMediaInfo || mainMediaInfo.hasVideo) {
+        // if we do not know if the main segment loader contains video yet or if we
+        // definitively know the main segment loader contains video, then we need to wait
+        // for both main and audio segment loaders to call endOfStream
+        isEndOfStream = isEndOfStream && this.audioSegmentLoader_.ended_;
+      } else {
+        // otherwise just rely on the audio loader
+        isEndOfStream = this.audioSegmentLoader_.ended_;
+      }
+    }
+    if (!isEndOfStream) {
+      return;
+    }
+    this.stopABRTimer_();
+    this.sourceUpdater_.endOfStream();
+  }
+  /**
+   * Check if a playlist has stopped being updated
+   *
+   * @param {Object} playlist the media playlist object
+   * @return {boolean} whether the playlist has stopped being updated or not
+   */
+
+  stuckAtPlaylistEnd_(playlist) {
+    const seekable = this.seekable();
+    if (!seekable.length) {
+      // playlist doesn't have enough information to determine whether we are stuck
+      return false;
+    }
+    const expired = this.syncController_.getExpiredTime(playlist, this.duration());
+    if (expired === null) {
+      return false;
+    } // does not use the safe live end to calculate playlist end, since we
+    // don't want to say we are stuck while there is still content
+
+    const absolutePlaylistEnd = Vhs$1.Playlist.playlistEnd(playlist, expired);
+    const currentTime = this.tech_.currentTime();
+    const buffered = this.tech_.buffered();
+    if (!buffered.length) {
+      // return true if the playhead reached the absolute end of the playlist
+      return absolutePlaylistEnd - currentTime <= SAFE_TIME_DELTA;
+    }
+    const bufferedEnd = buffered.end(buffered.length - 1); // return true if there is too little buffer left and buffer has reached absolute
+    // end of playlist
+
+    return bufferedEnd - currentTime <= SAFE_TIME_DELTA && absolutePlaylistEnd - bufferedEnd <= SAFE_TIME_DELTA;
+  }
+  /**
+   * Exclude a playlist for a set amount of time, making it unavailable for selection by
+   * the rendition selection algorithm, then force a new playlist (rendition) selection.
+   *
+   * @param {Object=} playlistToExclude
+   *                  the playlist to exclude, defaults to the currently selected playlist
+   * @param {Object=} error
+   *                  an optional error
+   * @param {number=} playlistExclusionDuration
+   *                  an optional number of seconds to exclude the playlist
+   */
+
+  excludePlaylist({
+    playlistToExclude = this.mainPlaylistLoader_.media(),
+    error = {},
+    playlistExclusionDuration
+  }) {
+    // If the `error` was generated by the playlist loader, it will contain
+    // the playlist we were trying to load (but failed) and that should be
+    // excluded instead of the currently selected playlist which is likely
+    // out-of-date in this scenario
+    playlistToExclude = playlistToExclude || this.mainPlaylistLoader_.media();
+    playlistExclusionDuration = playlistExclusionDuration || error.playlistExclusionDuration || this.playlistExclusionDuration; // If there is no current playlist, then an error occurred while we were
+    // trying to load the main OR while we were disposing of the tech
+
+    if (!playlistToExclude) {
+      this.error = error;
+      if (this.mediaSource.readyState !== 'open') {
+        this.trigger('error');
+      } else {
+        this.sourceUpdater_.endOfStream('network');
+      }
+      return;
+    }
+    playlistToExclude.playlistErrors_++;
+    const playlists = this.mainPlaylistLoader_.main.playlists;
+    const enabledPlaylists = playlists.filter(isEnabled);
+    const isFinalRendition = enabledPlaylists.length === 1 && enabledPlaylists[0] === playlistToExclude; // Don't exclude the only playlist unless it was excluded
+    // forever
+
+    if (playlists.length === 1 && playlistExclusionDuration !== Infinity) {
+      videojs.log.warn(`Problem encountered with playlist ${playlistToExclude.id}. ` + 'Trying again since it is the only playlist.');
+      this.tech_.trigger('retryplaylist'); // if this is a final rendition, we should delay
+
+      return this.mainPlaylistLoader_.load(isFinalRendition);
+    }
+    if (isFinalRendition) {
+      // If we're content steering, try other pathways.
+      if (this.main().contentSteering) {
+        const pathway = this.pathwayAttribute_(playlistToExclude); // Ignore at least 1 steering manifest refresh.
+
+        const reIncludeDelay = this.contentSteeringController_.steeringManifest.ttl * 1000;
+        this.contentSteeringController_.excludePathway(pathway);
+        this.excludeThenChangePathway_();
+        setTimeout(() => {
+          this.contentSteeringController_.addAvailablePathway(pathway);
+        }, reIncludeDelay);
+        return;
+      } // Since we're on the final non-excluded playlist, and we're about to exclude
+      // it, instead of erring the player or retrying this playlist, clear out the current
+      // exclusion list. This allows other playlists to be attempted in case any have been
+      // fixed.
+
+      let reincluded = false;
+      playlists.forEach(playlist => {
+        // skip current playlist which is about to be excluded
+        if (playlist === playlistToExclude) {
+          return;
+        }
+        const excludeUntil = playlist.excludeUntil; // a playlist cannot be reincluded if it wasn't excluded to begin with.
+
+        if (typeof excludeUntil !== 'undefined' && excludeUntil !== Infinity) {
+          reincluded = true;
+          delete playlist.excludeUntil;
+        }
+      });
+      if (reincluded) {
+        videojs.log.warn('Removing other playlists from the exclusion list because the last ' + 'rendition is about to be excluded.'); // Technically we are retrying a playlist, in that we are simply retrying a previous
+        // playlist. This is needed for users relying on the retryplaylist event to catch a
+        // case where the player might be stuck and looping through "dead" playlists.
+
+        this.tech_.trigger('retryplaylist');
+      }
+    } // Exclude this playlist
+
+    let excludeUntil;
+    if (playlistToExclude.playlistErrors_ > this.maxPlaylistRetries) {
+      excludeUntil = Infinity;
+    } else {
+      excludeUntil = Date.now() + playlistExclusionDuration * 1000;
+    }
+    playlistToExclude.excludeUntil = excludeUntil;
+    if (error.reason) {
+      playlistToExclude.lastExcludeReason_ = error.reason;
+    }
+    this.tech_.trigger('excludeplaylist');
+    this.tech_.trigger({
+      type: 'usage',
+      name: 'vhs-rendition-excluded'
+    }); // TODO: only load a new playlist if we're excluding the current playlist
+    // If this function was called with a playlist that's not the current active playlist
+    // (e.g., media().id !== playlistToExclude.id),
+    // then a new playlist should not be selected and loaded, as there's nothing wrong with the current playlist.
+
+    const nextPlaylist = this.selectPlaylist();
+    if (!nextPlaylist) {
+      this.error = 'Playback cannot continue. No available working or supported playlists.';
+      this.trigger('error');
+      return;
+    }
+    const logFn = error.internal ? this.logger_ : videojs.log.warn;
+    const errorMessage = error.message ? ' ' + error.message : '';
+    logFn(`${error.internal ? 'Internal problem' : 'Problem'} encountered with playlist ${playlistToExclude.id}.` + `${errorMessage} Switching to playlist ${nextPlaylist.id}.`); // if audio group changed reset audio loaders
+
+    if (nextPlaylist.attributes.AUDIO !== playlistToExclude.attributes.AUDIO) {
+      this.delegateLoaders_('audio', ['abort', 'pause']);
+    } // if subtitle group changed reset subtitle loaders
+
+    if (nextPlaylist.attributes.SUBTITLES !== playlistToExclude.attributes.SUBTITLES) {
+      this.delegateLoaders_('subtitle', ['abort', 'pause']);
+    }
+    this.delegateLoaders_('main', ['abort', 'pause']);
+    const delayDuration = nextPlaylist.targetDuration / 2 * 1000 || 5 * 1000;
+    const shouldDelay = typeof nextPlaylist.lastRequest === 'number' && Date.now() - nextPlaylist.lastRequest <= delayDuration; // delay if it's a final rendition or if the last refresh is sooner than half targetDuration
+
+    return this.switchMedia_(nextPlaylist, 'exclude', isFinalRendition || shouldDelay);
+  }
+  /**
+   * Pause all segment/playlist loaders
+   */
+
+  pauseLoading() {
+    this.delegateLoaders_('all', ['abort', 'pause']);
+    this.stopABRTimer_();
+  }
+  /**
+   * Call a set of functions in order on playlist loaders, segment loaders,
+   * or both types of loaders.
+   *
+   * @param {string} filter
+   *        Filter loaders that should call fnNames using a string. Can be:
+   *        * all - run on all loaders
+   *        * audio - run on all audio loaders
+   *        * subtitle - run on all subtitle loaders
+   *        * main - run on the main loaders
+   *
+   * @param {Array|string} fnNames
+   *        A string or array of function names to call.
+   */
+
+  delegateLoaders_(filter, fnNames) {
+    const loaders = [];
+    const dontFilterPlaylist = filter === 'all';
+    if (dontFilterPlaylist || filter === 'main') {
+      loaders.push(this.mainPlaylistLoader_);
+    }
+    const mediaTypes = [];
+    if (dontFilterPlaylist || filter === 'audio') {
+      mediaTypes.push('AUDIO');
+    }
+    if (dontFilterPlaylist || filter === 'subtitle') {
+      mediaTypes.push('CLOSED-CAPTIONS');
+      mediaTypes.push('SUBTITLES');
+    }
+    mediaTypes.forEach(mediaType => {
+      const loader = this.mediaTypes_[mediaType] && this.mediaTypes_[mediaType].activePlaylistLoader;
+      if (loader) {
+        loaders.push(loader);
+      }
+    });
+    ['main', 'audio', 'subtitle'].forEach(name => {
+      const loader = this[`${name}SegmentLoader_`];
+      if (loader && (filter === name || filter === 'all')) {
+        loaders.push(loader);
+      }
+    });
+    loaders.forEach(loader => fnNames.forEach(fnName => {
+      if (typeof loader[fnName] === 'function') {
+        loader[fnName]();
+      }
+    }));
+  }
+  /**
+   * set the current time on all segment loaders
+   *
+   * @param {TimeRange} currentTime the current time to set
+   * @return {TimeRange} the current time
+   */
+
+  setCurrentTime(currentTime) {
+    const buffered = findRange(this.tech_.buffered(), currentTime);
+    if (!(this.mainPlaylistLoader_ && this.mainPlaylistLoader_.media())) {
+      // return immediately if the metadata is not ready yet
+      return 0;
+    } // it's clearly an edge-case but don't thrown an error if asked to
+    // seek within an empty playlist
+
+    if (!this.mainPlaylistLoader_.media().segments) {
+      return 0;
+    } // if the seek location is already buffered, continue buffering as usual
+
+    if (buffered && buffered.length) {
+      return currentTime;
+    } // cancel outstanding requests so we begin buffering at the new
+    // location
+
+    this.mainSegmentLoader_.pause();
+    this.mainSegmentLoader_.resetEverything();
+    if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+      this.audioSegmentLoader_.pause();
+      this.audioSegmentLoader_.resetEverything();
+    }
+    if (this.mediaTypes_.SUBTITLES.activePlaylistLoader) {
+      this.subtitleSegmentLoader_.pause();
+      this.subtitleSegmentLoader_.resetEverything();
+    } // start segment loader loading in case they are paused
+
+    this.load();
+  }
+  /**
+   * get the current duration
+   *
+   * @return {TimeRange} the duration
+   */
+
+  duration() {
+    if (!this.mainPlaylistLoader_) {
+      return 0;
+    }
+    const media = this.mainPlaylistLoader_.media();
+    if (!media) {
+      // no playlists loaded yet, so can't determine a duration
+      return 0;
+    } // Don't rely on the media source for duration in the case of a live playlist since
+    // setting the native MediaSource's duration to infinity ends up with consequences to
+    // seekable behavior. See https://github.com/w3c/media-source/issues/5 for details.
+    //
+    // This is resolved in the spec by https://github.com/w3c/media-source/pull/92,
+    // however, few browsers have support for setLiveSeekableRange()
+    // https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/setLiveSeekableRange
+    //
+    // Until a time when the duration of the media source can be set to infinity, and a
+    // seekable range specified across browsers, just return Infinity.
+
+    if (!media.endList) {
+      return Infinity;
+    } // Since this is a VOD video, it is safe to rely on the media source's duration (if
+    // available). If it's not available, fall back to a playlist-calculated estimate.
+
+    if (this.mediaSource) {
+      return this.mediaSource.duration;
+    }
+    return Vhs$1.Playlist.duration(media);
+  }
+  /**
+   * check the seekable range
+   *
+   * @return {TimeRange} the seekable range
+   */
+
+  seekable() {
+    return this.seekable_;
+  }
+  onSyncInfoUpdate_() {
+    let audioSeekable; // TODO check for creation of both source buffers before updating seekable
+    //
+    // A fix was made to this function where a check for
+    // this.sourceUpdater_.hasCreatedSourceBuffers
+    // was added to ensure that both source buffers were created before seekable was
+    // updated. However, it originally had a bug where it was checking for a true and
+    // returning early instead of checking for false. Setting it to check for false to
+    // return early though created other issues. A call to play() would check for seekable
+    // end without verifying that a seekable range was present. In addition, even checking
+    // for that didn't solve some issues, as handleFirstPlay is sometimes worked around
+    // due to a media update calling load on the segment loaders, skipping a seek to live,
+    // thereby starting live streams at the beginning of the stream rather than at the end.
+    //
+    // This conditional should be fixed to wait for the creation of two source buffers at
+    // the same time as the other sections of code are fixed to properly seek to live and
+    // not throw an error due to checking for a seekable end when no seekable range exists.
+    //
+    // For now, fall back to the older behavior, with the understanding that the seekable
+    // range may not be completely correct, leading to a suboptimal initial live point.
+
+    if (!this.mainPlaylistLoader_) {
+      return;
+    }
+    let media = this.mainPlaylistLoader_.media();
+    if (!media) {
+      return;
+    }
+    let expired = this.syncController_.getExpiredTime(media, this.duration());
+    if (expired === null) {
+      // not enough information to update seekable
+      return;
+    }
+    const main = this.mainPlaylistLoader_.main;
+    const mainSeekable = Vhs$1.Playlist.seekable(media, expired, Vhs$1.Playlist.liveEdgeDelay(main, media));
+    if (mainSeekable.length === 0) {
+      return;
+    }
+    if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+      media = this.mediaTypes_.AUDIO.activePlaylistLoader.media();
+      expired = this.syncController_.getExpiredTime(media, this.duration());
+      if (expired === null) {
+        return;
+      }
+      audioSeekable = Vhs$1.Playlist.seekable(media, expired, Vhs$1.Playlist.liveEdgeDelay(main, media));
+      if (audioSeekable.length === 0) {
+        return;
+      }
+    }
+    let oldEnd;
+    let oldStart;
+    if (this.seekable_ && this.seekable_.length) {
+      oldEnd = this.seekable_.end(0);
+      oldStart = this.seekable_.start(0);
+    }
+    if (!audioSeekable) {
+      // seekable has been calculated based on buffering video data so it
+      // can be returned directly
+      this.seekable_ = mainSeekable;
+    } else if (audioSeekable.start(0) > mainSeekable.end(0) || mainSeekable.start(0) > audioSeekable.end(0)) {
+      // seekables are pretty far off, rely on main
+      this.seekable_ = mainSeekable;
+    } else {
+      this.seekable_ = createTimeRanges([[audioSeekable.start(0) > mainSeekable.start(0) ? audioSeekable.start(0) : mainSeekable.start(0), audioSeekable.end(0) < mainSeekable.end(0) ? audioSeekable.end(0) : mainSeekable.end(0)]]);
+    } // seekable is the same as last time
+
+    if (this.seekable_ && this.seekable_.length) {
+      if (this.seekable_.end(0) === oldEnd && this.seekable_.start(0) === oldStart) {
+        return;
+      }
+    }
+    this.logger_(`seekable updated [${printableRange(this.seekable_)}]`);
+    this.tech_.trigger('seekablechanged');
+  }
+  /**
+   * Update the player duration
+   */
+
+  updateDuration(isLive) {
+    if (this.updateDuration_) {
+      this.mediaSource.removeEventListener('sourceopen', this.updateDuration_);
+      this.updateDuration_ = null;
+    }
+    if (this.mediaSource.readyState !== 'open') {
+      this.updateDuration_ = this.updateDuration.bind(this, isLive);
+      this.mediaSource.addEventListener('sourceopen', this.updateDuration_);
+      return;
+    }
+    if (isLive) {
+      const seekable = this.seekable();
+      if (!seekable.length) {
+        return;
+      } // Even in the case of a live playlist, the native MediaSource's duration should not
+      // be set to Infinity (even though this would be expected for a live playlist), since
+      // setting the native MediaSource's duration to infinity ends up with consequences to
+      // seekable behavior. See https://github.com/w3c/media-source/issues/5 for details.
+      //
+      // This is resolved in the spec by https://github.com/w3c/media-source/pull/92,
+      // however, few browsers have support for setLiveSeekableRange()
+      // https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/setLiveSeekableRange
+      //
+      // Until a time when the duration of the media source can be set to infinity, and a
+      // seekable range specified across browsers, the duration should be greater than or
+      // equal to the last possible seekable value.
+      // MediaSource duration starts as NaN
+      // It is possible (and probable) that this case will never be reached for many
+      // sources, since the MediaSource reports duration as the highest value without
+      // accounting for timestamp offset. For example, if the timestamp offset is -100 and
+      // we buffered times 0 to 100 with real times of 100 to 200, even though current
+      // time will be between 0 and 100, the native media source may report the duration
+      // as 200. However, since we report duration separate from the media source (as
+      // Infinity), and as long as the native media source duration value is greater than
+      // our reported seekable range, seeks will work as expected. The large number as
+      // duration for live is actually a strategy used by some players to work around the
+      // issue of live seekable ranges cited above.
+
+      if (isNaN(this.mediaSource.duration) || this.mediaSource.duration < seekable.end(seekable.length - 1)) {
+        this.sourceUpdater_.setDuration(seekable.end(seekable.length - 1));
+      }
+      return;
+    }
+    const buffered = this.tech_.buffered();
+    let duration = Vhs$1.Playlist.duration(this.mainPlaylistLoader_.media());
+    if (buffered.length > 0) {
+      duration = Math.max(duration, buffered.end(buffered.length - 1));
+    }
+    if (this.mediaSource.duration !== duration) {
+      this.sourceUpdater_.setDuration(duration);
+    }
+  }
+  /**
+   * dispose of the PlaylistController and everything
+   * that it controls
+   */
+
+  dispose() {
+    this.trigger('dispose');
+    this.decrypter_.terminate();
+    this.mainPlaylistLoader_.dispose();
+    this.mainSegmentLoader_.dispose();
+    this.contentSteeringController_.dispose();
+    this.keyStatusMap_.clear();
+    if (this.loadOnPlay_) {
+      this.tech_.off('play', this.loadOnPlay_);
+    }
+    ['AUDIO', 'SUBTITLES'].forEach(type => {
+      const groups = this.mediaTypes_[type].groups;
+      for (const id in groups) {
+        groups[id].forEach(group => {
+          if (group.playlistLoader) {
+            group.playlistLoader.dispose();
+          }
+        });
+      }
+    });
+    this.audioSegmentLoader_.dispose();
+    this.subtitleSegmentLoader_.dispose();
+    this.sourceUpdater_.dispose();
+    this.timelineChangeController_.dispose();
+    this.stopABRTimer_();
+    if (this.updateDuration_) {
+      this.mediaSource.removeEventListener('sourceopen', this.updateDuration_);
+    }
+    this.mediaSource.removeEventListener('durationchange', this.handleDurationChange_); // load the media source into the player
+
+    this.mediaSource.removeEventListener('sourceopen', this.handleSourceOpen_);
+    this.mediaSource.removeEventListener('sourceended', this.handleSourceEnded_);
+    this.off();
+  }
+  /**
+   * return the main playlist object if we have one
+   *
+   * @return {Object} the main playlist object that we parsed
+   */
+
+  main() {
+    return this.mainPlaylistLoader_.main;
+  }
+  /**
+   * return the currently selected playlist
+   *
+   * @return {Object} the currently selected playlist object that we parsed
+   */
+
+  media() {
+    // playlist loader will not return media if it has not been fully loaded
+    return this.mainPlaylistLoader_.media() || this.initialMedia_;
+  }
+  areMediaTypesKnown_() {
+    const usingAudioLoader = !!this.mediaTypes_.AUDIO.activePlaylistLoader;
+    const hasMainMediaInfo = !!this.mainSegmentLoader_.getCurrentMediaInfo_(); // if we are not using an audio loader, then we have audio media info
+    // otherwise check on the segment loader.
+
+    const hasAudioMediaInfo = !usingAudioLoader ? true : !!this.audioSegmentLoader_.getCurrentMediaInfo_(); // one or both loaders has not loaded sufficently to get codecs
+
+    if (!hasMainMediaInfo || !hasAudioMediaInfo) {
+      return false;
+    }
+    return true;
+  }
+  getCodecsOrExclude_() {
+    const media = {
+      main: this.mainSegmentLoader_.getCurrentMediaInfo_() || {},
+      audio: this.audioSegmentLoader_.getCurrentMediaInfo_() || {}
+    };
+    const playlist = this.mainSegmentLoader_.getPendingSegmentPlaylist() || this.media(); // set "main" media equal to video
+
+    media.video = media.main;
+    const playlistCodecs = codecsForPlaylist(this.main(), playlist);
+    const codecs = {};
+    const usingAudioLoader = !!this.mediaTypes_.AUDIO.activePlaylistLoader;
+    if (media.main.hasVideo) {
+      codecs.video = playlistCodecs.video || media.main.videoCodec || codecs_js.DEFAULT_VIDEO_CODEC;
+    }
+    if (media.main.isMuxed) {
+      codecs.video += `,${playlistCodecs.audio || media.main.audioCodec || codecs_js.DEFAULT_AUDIO_CODEC}`;
+    }
+    if (media.main.hasAudio && !media.main.isMuxed || media.audio.hasAudio || usingAudioLoader) {
+      codecs.audio = playlistCodecs.audio || media.main.audioCodec || media.audio.audioCodec || codecs_js.DEFAULT_AUDIO_CODEC; // set audio isFmp4 so we use the correct "supports" function below
+
+      media.audio.isFmp4 = media.main.hasAudio && !media.main.isMuxed ? media.main.isFmp4 : media.audio.isFmp4;
+    } // no codecs, no playback.
+
+    if (!codecs.audio && !codecs.video) {
+      this.excludePlaylist({
+        playlistToExclude: playlist,
+        error: {
+          message: 'Could not determine codecs for playlist.'
+        },
+        playlistExclusionDuration: Infinity
+      });
+      return;
+    } // fmp4 relies on browser support, while ts relies on muxer support
+
+    const supportFunction = (isFmp4, codec) => isFmp4 ? codecs_js.browserSupportsCodec(codec) : codecs_js.muxerSupportsCodec(codec);
+    const unsupportedCodecs = {};
+    let unsupportedAudio;
+    ['video', 'audio'].forEach(function (type) {
+      if (codecs.hasOwnProperty(type) && !supportFunction(media[type].isFmp4, codecs[type])) {
+        const supporter = media[type].isFmp4 ? 'browser' : 'muxer';
+        unsupportedCodecs[supporter] = unsupportedCodecs[supporter] || [];
+        unsupportedCodecs[supporter].push(codecs[type]);
+        if (type === 'audio') {
+          unsupportedAudio = supporter;
+        }
+      }
+    });
+    if (usingAudioLoader && unsupportedAudio && playlist.attributes.AUDIO) {
+      const audioGroup = playlist.attributes.AUDIO;
+      this.main().playlists.forEach(variant => {
+        const variantAudioGroup = variant.attributes && variant.attributes.AUDIO;
+        if (variantAudioGroup === audioGroup && variant !== playlist) {
+          variant.excludeUntil = Infinity;
+        }
+      });
+      this.logger_(`excluding audio group ${audioGroup} as ${unsupportedAudio} does not support codec(s): "${codecs.audio}"`);
+    } // if we have any unsupported codecs exclude this playlist.
+
+    if (Object.keys(unsupportedCodecs).length) {
+      const message = Object.keys(unsupportedCodecs).reduce((acc, supporter) => {
+        if (acc) {
+          acc += ', ';
+        }
+        acc += `${supporter} does not support codec(s): "${unsupportedCodecs[supporter].join(',')}"`;
+        return acc;
+      }, '') + '.';
+      this.excludePlaylist({
+        playlistToExclude: playlist,
+        error: {
+          internal: true,
+          message
+        },
+        playlistExclusionDuration: Infinity
+      });
+      return;
+    } // check if codec switching is happening
+
+    if (this.sourceUpdater_.hasCreatedSourceBuffers() && !this.sourceUpdater_.canChangeType()) {
+      const switchMessages = [];
+      ['video', 'audio'].forEach(type => {
+        const newCodec = (codecs_js.parseCodecs(this.sourceUpdater_.codecs[type] || '')[0] || {}).type;
+        const oldCodec = (codecs_js.parseCodecs(codecs[type] || '')[0] || {}).type;
+        if (newCodec && oldCodec && newCodec.toLowerCase() !== oldCodec.toLowerCase()) {
+          switchMessages.push(`"${this.sourceUpdater_.codecs[type]}" -> "${codecs[type]}"`);
+        }
+      });
+      if (switchMessages.length) {
+        this.excludePlaylist({
+          playlistToExclude: playlist,
+          error: {
+            message: `Codec switching not supported: ${switchMessages.join(', ')}.`,
+            internal: true
+          },
+          playlistExclusionDuration: Infinity
+        });
+        return;
+      }
+    } // TODO: when using the muxer shouldn't we just return
+    // the codecs that the muxer outputs?
+
+    return codecs;
+  }
+  /**
+   * Create source buffers and exlude any incompatible renditions.
+   *
+   * @private
+   */
+
+  tryToCreateSourceBuffers_() {
+    // media source is not ready yet or sourceBuffers are already
+    // created.
+    if (this.mediaSource.readyState !== 'open' || this.sourceUpdater_.hasCreatedSourceBuffers()) {
+      return;
+    }
+    if (!this.areMediaTypesKnown_()) {
+      return;
+    }
+    const codecs = this.getCodecsOrExclude_(); // no codecs means that the playlist was excluded
+
+    if (!codecs) {
+      return;
+    }
+    this.sourceUpdater_.createSourceBuffers(codecs);
+    const codecString = [codecs.video, codecs.audio].filter(Boolean).join(',');
+    this.excludeIncompatibleVariants_(codecString);
+  }
+  /**
+   * Excludes playlists with codecs that are unsupported by the muxer and browser.
+   */
+
+  excludeUnsupportedVariants_() {
+    const playlists = this.main().playlists;
+    const ids = []; // TODO: why don't we have a property to loop through all
+    // playlist? Why did we ever mix indexes and keys?
+
+    Object.keys(playlists).forEach(key => {
+      const variant = playlists[key]; // check if we already processed this playlist.
+
+      if (ids.indexOf(variant.id) !== -1) {
+        return;
+      }
+      ids.push(variant.id);
+      const codecs = codecsForPlaylist(this.main, variant);
+      const unsupported = [];
+      if (codecs.audio && !codecs_js.muxerSupportsCodec(codecs.audio) && !codecs_js.browserSupportsCodec(codecs.audio)) {
+        unsupported.push(`audio codec ${codecs.audio}`);
+      }
+      if (codecs.video && !codecs_js.muxerSupportsCodec(codecs.video) && !codecs_js.browserSupportsCodec(codecs.video)) {
+        unsupported.push(`video codec ${codecs.video}`);
+      }
+      if (codecs.text && codecs.text === 'stpp.ttml.im1t') {
+        unsupported.push(`text codec ${codecs.text}`);
+      }
+      if (unsupported.length) {
+        variant.excludeUntil = Infinity;
+        this.logger_(`excluding ${variant.id} for unsupported: ${unsupported.join(', ')}`);
+      }
+    });
+  }
+  /**
+   * Exclude playlists that are known to be codec or
+   * stream-incompatible with the SourceBuffer configuration. For
+   * instance, Media Source Extensions would cause the video element to
+   * stall waiting for video data if you switched from a variant with
+   * video and audio to an audio-only one.
+   *
+   * @param {Object} media a media playlist compatible with the current
+   * set of SourceBuffers. Variants in the current main playlist that
+   * do not appear to have compatible codec or stream configurations
+   * will be excluded from the default playlist selection algorithm
+   * indefinitely.
+   * @private
+   */
+
+  excludeIncompatibleVariants_(codecString) {
+    const ids = [];
+    const playlists = this.main().playlists;
+    const codecs = unwrapCodecList(codecs_js.parseCodecs(codecString));
+    const codecCount_ = codecCount(codecs);
+    const videoDetails = codecs.video && codecs_js.parseCodecs(codecs.video)[0] || null;
+    const audioDetails = codecs.audio && codecs_js.parseCodecs(codecs.audio)[0] || null;
+    Object.keys(playlists).forEach(key => {
+      const variant = playlists[key]; // check if we already processed this playlist.
+      // or it if it is already excluded forever.
+
+      if (ids.indexOf(variant.id) !== -1 || variant.excludeUntil === Infinity) {
+        return;
+      }
+      ids.push(variant.id);
+      const exclusionReasons = []; // get codecs from the playlist for this variant
+
+      const variantCodecs = codecsForPlaylist(this.mainPlaylistLoader_.main, variant);
+      const variantCodecCount = codecCount(variantCodecs); // if no codecs are listed, we cannot determine that this
+      // variant is incompatible. Wait for mux.js to probe
+
+      if (!variantCodecs.audio && !variantCodecs.video) {
+        return;
+      } // TODO: we can support this by removing the
+      // old media source and creating a new one, but it will take some work.
+      // The number of streams cannot change
+
+      if (variantCodecCount !== codecCount_) {
+        exclusionReasons.push(`codec count "${variantCodecCount}" !== "${codecCount_}"`);
+      } // only exclude playlists by codec change, if codecs cannot switch
+      // during playback.
+
+      if (!this.sourceUpdater_.canChangeType()) {
+        const variantVideoDetails = variantCodecs.video && codecs_js.parseCodecs(variantCodecs.video)[0] || null;
+        const variantAudioDetails = variantCodecs.audio && codecs_js.parseCodecs(variantCodecs.audio)[0] || null; // the video codec cannot change
+
+        if (variantVideoDetails && videoDetails && variantVideoDetails.type.toLowerCase() !== videoDetails.type.toLowerCase()) {
+          exclusionReasons.push(`video codec "${variantVideoDetails.type}" !== "${videoDetails.type}"`);
+        } // the audio codec cannot change
+
+        if (variantAudioDetails && audioDetails && variantAudioDetails.type.toLowerCase() !== audioDetails.type.toLowerCase()) {
+          exclusionReasons.push(`audio codec "${variantAudioDetails.type}" !== "${audioDetails.type}"`);
+        }
+      }
+      if (exclusionReasons.length) {
+        variant.excludeUntil = Infinity;
+        this.logger_(`excluding ${variant.id}: ${exclusionReasons.join(' && ')}`);
+      }
+    });
+  }
+  updateAdCues_(media) {
+    let offset = 0;
+    const seekable = this.seekable();
+    if (seekable.length) {
+      offset = seekable.start(0);
+    }
+    updateAdCues(media, this.cueTagsTrack_, offset);
+  }
+  /**
+   * Calculates the desired forward buffer length based on current time
+   *
+   * @return {number} Desired forward buffer length in seconds
+   */
+
+  goalBufferLength() {
+    const currentTime = this.tech_.currentTime();
+    const initial = Config.GOAL_BUFFER_LENGTH;
+    const rate = Config.GOAL_BUFFER_LENGTH_RATE;
+    const max = Math.max(initial, Config.MAX_GOAL_BUFFER_LENGTH);
+    return Math.min(initial + currentTime * rate, max);
+  }
+  /**
+   * Calculates the desired buffer low water line based on current time
+   *
+   * @return {number} Desired buffer low water line in seconds
+   */
+
+  bufferLowWaterLine() {
+    const currentTime = this.tech_.currentTime();
+    const initial = Config.BUFFER_LOW_WATER_LINE;
+    const rate = Config.BUFFER_LOW_WATER_LINE_RATE;
+    const max = Math.max(initial, Config.MAX_BUFFER_LOW_WATER_LINE);
+    const newMax = Math.max(initial, Config.EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE);
+    return Math.min(initial + currentTime * rate, this.bufferBasedABR ? newMax : max);
+  }
+  bufferHighWaterLine() {
+    return Config.BUFFER_HIGH_WATER_LINE;
+  }
+  addDateRangesToTextTrack_(dateRanges) {
+    createMetadataTrackIfNotExists(this.inbandTextTracks_, 'com.apple.streaming', this.tech_);
+    addDateRangeMetadata({
+      inbandTextTracks: this.inbandTextTracks_,
+      dateRanges
+    });
+  }
+  addMetadataToTextTrack(dispatchType, metadataArray, videoDuration) {
+    const timestampOffset = this.sourceUpdater_.videoBuffer ? this.sourceUpdater_.videoTimestampOffset() : this.sourceUpdater_.audioTimestampOffset(); // There's potentially an issue where we could double add metadata if there's a muxed
+    // audio/video source with a metadata track, and an alt audio with a metadata track.
+    // However, this probably won't happen, and if it does it can be handled then.
+
+    createMetadataTrackIfNotExists(this.inbandTextTracks_, dispatchType, this.tech_);
+    addMetadata({
+      inbandTextTracks: this.inbandTextTracks_,
+      metadataArray,
+      timestampOffset,
+      videoDuration
+    });
+  }
+  /**
+   * Utility for getting the pathway or service location from an HLS or DASH playlist.
+   *
+   * @param {Object} playlist for getting pathway from.
+   * @return the pathway attribute of a playlist
+   */
+
+  pathwayAttribute_(playlist) {
+    return playlist.attributes['PATHWAY-ID'] || playlist.attributes.serviceLocation;
+  }
+  /**
+   * Initialize available pathways and apply the tag properties.
+   */
+
+  initContentSteeringController_() {
+    const main = this.main();
+    if (!main.contentSteering) {
+      return;
+    }
+    for (const playlist of main.playlists) {
+      this.contentSteeringController_.addAvailablePathway(this.pathwayAttribute_(playlist));
+    }
+    this.contentSteeringController_.assignTagProperties(main.uri, main.contentSteering); // request the steering manifest immediately if queryBeforeStart is set.
+
+    if (this.contentSteeringController_.queryBeforeStart) {
+      // When queryBeforeStart is true, initial request should omit steering parameters.
+      this.contentSteeringController_.requestSteeringManifest(true);
+      return;
+    } // otherwise start content steering after playback starts
+
+    this.tech_.one('canplay', () => {
+      this.contentSteeringController_.requestSteeringManifest();
+    });
+  }
+  /**
+   * Reset the content steering controller and re-init.
+   */
+
+  resetContentSteeringController_() {
+    this.contentSteeringController_.clearAvailablePathways();
+    this.contentSteeringController_.dispose();
+    this.initContentSteeringController_();
+  }
+  /**
+   * Attaches the listeners for content steering.
+   */
+
+  attachContentSteeringListeners_() {
+    this.contentSteeringController_.on('content-steering', this.excludeThenChangePathway_.bind(this));
+    if (this.sourceType_ === 'dash') {
+      this.mainPlaylistLoader_.on('loadedplaylist', () => {
+        const main = this.main(); // check if steering tag or pathways changed.
+
+        const didDashTagChange = this.contentSteeringController_.didDASHTagChange(main.uri, main.contentSteering);
+        const didPathwaysChange = () => {
+          const availablePathways = this.contentSteeringController_.getAvailablePathways();
+          const newPathways = [];
+          for (const playlist of main.playlists) {
+            const serviceLocation = playlist.attributes.serviceLocation;
+            if (serviceLocation) {
+              newPathways.push(serviceLocation);
+              if (!availablePathways.has(serviceLocation)) {
+                return true;
+              }
+            }
+          } // If we have no new serviceLocations and previously had availablePathways
+
+          if (!newPathways.length && availablePathways.size) {
+            return true;
+          }
+          return false;
+        };
+        if (didDashTagChange || didPathwaysChange()) {
+          this.resetContentSteeringController_();
+        }
+      });
+    }
+  }
+  /**
+   * Simple exclude and change playlist logic for content steering.
+   */
+
+  excludeThenChangePathway_() {
+    const currentPathway = this.contentSteeringController_.getPathway();
+    if (!currentPathway) {
+      return;
+    }
+    this.handlePathwayClones_();
+    const main = this.main();
+    const playlists = main.playlists;
+    const ids = new Set();
+    let didEnablePlaylists = false;
+    Object.keys(playlists).forEach(key => {
+      const variant = playlists[key];
+      const pathwayId = this.pathwayAttribute_(variant);
+      const differentPathwayId = pathwayId && currentPathway !== pathwayId;
+      const steeringExclusion = variant.excludeUntil === Infinity && variant.lastExcludeReason_ === 'content-steering';
+      if (steeringExclusion && !differentPathwayId) {
+        delete variant.excludeUntil;
+        delete variant.lastExcludeReason_;
+        didEnablePlaylists = true;
+      }
+      const noExcludeUntil = !variant.excludeUntil && variant.excludeUntil !== Infinity;
+      const shouldExclude = !ids.has(variant.id) && differentPathwayId && noExcludeUntil;
+      if (!shouldExclude) {
+        return;
+      }
+      ids.add(variant.id);
+      variant.excludeUntil = Infinity;
+      variant.lastExcludeReason_ = 'content-steering'; // TODO: kind of spammy, maybe move this.
+
+      this.logger_(`excluding ${variant.id} for ${variant.lastExcludeReason_}`);
+    });
+    if (this.contentSteeringController_.manifestType_ === 'DASH') {
+      Object.keys(this.mediaTypes_).forEach(key => {
+        const type = this.mediaTypes_[key];
+        if (type.activePlaylistLoader) {
+          const currentPlaylist = type.activePlaylistLoader.media_; // Check if the current media playlist matches the current CDN
+
+          if (currentPlaylist && currentPlaylist.attributes.serviceLocation !== currentPathway) {
+            didEnablePlaylists = true;
+          }
+        }
+      });
+    }
+    if (didEnablePlaylists) {
+      this.changeSegmentPathway_();
+    }
+  }
+  /**
+   * Add, update, or delete playlists and media groups for
+   * the pathway clones for HLS Content Steering.
+   *
+   * See https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/
+   *
+   * NOTE: Pathway cloning does not currently support the `PER_VARIANT_URIS` and
+   * `PER_RENDITION_URIS` as we do not handle `STABLE-VARIANT-ID` or
+   * `STABLE-RENDITION-ID` values.
+   */
+
+  handlePathwayClones_() {
+    const main = this.main();
+    const playlists = main.playlists;
+    const currentPathwayClones = this.contentSteeringController_.currentPathwayClones;
+    const nextPathwayClones = this.contentSteeringController_.nextPathwayClones;
+    const hasClones = currentPathwayClones && currentPathwayClones.size || nextPathwayClones && nextPathwayClones.size;
+    if (!hasClones) {
+      return;
+    }
+    for (const [id, clone] of currentPathwayClones.entries()) {
+      const newClone = nextPathwayClones.get(id); // Delete the old pathway clone.
+
+      if (!newClone) {
+        this.mainPlaylistLoader_.updateOrDeleteClone(clone);
+        this.contentSteeringController_.excludePathway(id);
+      }
+    }
+    for (const [id, clone] of nextPathwayClones.entries()) {
+      const oldClone = currentPathwayClones.get(id); // Create a new pathway if it is a new pathway clone object.
+
+      if (!oldClone) {
+        const playlistsToClone = playlists.filter(p => {
+          return p.attributes['PATHWAY-ID'] === clone['BASE-ID'];
+        });
+        playlistsToClone.forEach(p => {
+          this.mainPlaylistLoader_.addClonePathway(clone, p);
+        });
+        this.contentSteeringController_.addAvailablePathway(id);
+        continue;
+      } // There have not been changes to the pathway clone object, so skip.
+
+      if (this.equalPathwayClones_(oldClone, clone)) {
+        continue;
+      } // Update a preexisting cloned pathway.
+      // True is set for the update flag.
+
+      this.mainPlaylistLoader_.updateOrDeleteClone(clone, true);
+      this.contentSteeringController_.addAvailablePathway(id);
+    } // Deep copy contents of next to current pathways.
+
+    this.contentSteeringController_.currentPathwayClones = new Map(JSON.parse(JSON.stringify([...nextPathwayClones])));
+  }
+  /**
+   * Determines whether two pathway clone objects are equivalent.
+   *
+   * @param {Object} a The first pathway clone object.
+   * @param {Object} b The second pathway clone object.
+   * @return {boolean} True if the pathway clone objects are equal, false otherwise.
+   */
+
+  equalPathwayClones_(a, b) {
+    if (a['BASE-ID'] !== b['BASE-ID'] || a.ID !== b.ID || a['URI-REPLACEMENT'].HOST !== b['URI-REPLACEMENT'].HOST) {
+      return false;
+    }
+    const aParams = a['URI-REPLACEMENT'].PARAMS;
+    const bParams = b['URI-REPLACEMENT'].PARAMS; // We need to iterate through both lists of params because one could be
+    // missing a parameter that the other has.
+
+    for (const p in aParams) {
+      if (aParams[p] !== bParams[p]) {
+        return false;
+      }
+    }
+    for (const p in bParams) {
+      if (aParams[p] !== bParams[p]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  /**
+   * Changes the current playlists for audio, video and subtitles after a new pathway
+   * is chosen from content steering.
+   */
+
+  changeSegmentPathway_() {
+    const nextPlaylist = this.selectPlaylist();
+    this.pauseLoading(); // Switch audio and text track playlists if necessary in DASH
+
+    if (this.contentSteeringController_.manifestType_ === 'DASH') {
+      this.switchMediaForDASHContentSteering_();
+    }
+    this.switchMedia_(nextPlaylist, 'content-steering');
+  }
+  /**
+   * Iterates through playlists and check their keyId set and compare with the
+   * keyStatusMap, only enable playlists that have a usable key. If the playlist
+   * has no keyId leave it enabled by default.
+   */
+
+  excludeNonUsablePlaylistsByKeyId_() {
+    if (!this.mainPlaylistLoader_ || !this.mainPlaylistLoader_.main) {
+      return;
+    }
+    let nonUsableKeyStatusCount = 0;
+    const NON_USABLE = 'non-usable';
+    this.mainPlaylistLoader_.main.playlists.forEach(playlist => {
+      const keyIdSet = this.mainPlaylistLoader_.getKeyIdSet(playlist); // If the playlist doesn't have keyIDs lets not exclude it.
+
+      if (!keyIdSet || !keyIdSet.size) {
+        return;
+      }
+      keyIdSet.forEach(key => {
+        const USABLE = 'usable';
+        const hasUsableKeyStatus = this.keyStatusMap_.has(key) && this.keyStatusMap_.get(key) === USABLE;
+        const nonUsableExclusion = playlist.lastExcludeReason_ === NON_USABLE && playlist.excludeUntil === Infinity;
+        if (!hasUsableKeyStatus) {
+          // Only exclude playlists that haven't already been excluded as non-usable.
+          if (playlist.excludeUntil !== Infinity && playlist.lastExcludeReason_ !== NON_USABLE) {
+            playlist.excludeUntil = Infinity;
+            playlist.lastExcludeReason_ = NON_USABLE;
+            this.logger_(`excluding playlist ${playlist.id} because the key ID ${key} doesn't exist in the keyStatusMap or is not ${USABLE}`);
+          } // count all nonUsableKeyStatus
+
+          nonUsableKeyStatusCount++;
+        } else if (hasUsableKeyStatus && nonUsableExclusion) {
+          delete playlist.excludeUntil;
+          delete playlist.lastExcludeReason_;
+          this.logger_(`enabling playlist ${playlist.id} because key ID ${key} is ${USABLE}`);
+        }
+      });
+    }); // If for whatever reason every playlist has a non usable key status. Lets try re-including the SD renditions as a failsafe.
+
+    if (nonUsableKeyStatusCount >= this.mainPlaylistLoader_.main.playlists.length) {
+      this.mainPlaylistLoader_.main.playlists.forEach(playlist => {
+        const isNonHD = playlist && playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.height < 720;
+        const excludedForNonUsableKey = playlist.excludeUntil === Infinity && playlist.lastExcludeReason_ === NON_USABLE;
+        if (isNonHD && excludedForNonUsableKey) {
+          // Only delete the excludeUntil so we don't try and re-exclude these playlists.
+          delete playlist.excludeUntil;
+          videojs.log.warn(`enabling non-HD playlist ${playlist.id} because all playlists were excluded due to ${NON_USABLE} key IDs`);
+        }
+      });
+    }
+  }
+  /**
+   * Adds a keystatus to the keystatus map, tries to convert to string if necessary.
+   *
+   * @param {any} keyId the keyId to add a status for
+   * @param {string} status the status of the keyId
+   */
+
+  addKeyStatus_(keyId, status) {
+    const isString = typeof keyId === 'string';
+    const keyIdHexString = isString ? keyId : bufferToHexString(keyId);
+    const formattedKeyIdString = keyIdHexString.slice(0, 32).toLowerCase();
+    this.logger_(`KeyStatus '${status}' with key ID ${formattedKeyIdString} added to the keyStatusMap`);
+    this.keyStatusMap_.set(formattedKeyIdString, status);
+  }
+  /**
+   * Utility function for adding key status to the keyStatusMap and filtering usable encrypted playlists.
+   *
+   * @param {any} keyId the keyId from the keystatuschange event
+   * @param {string} status the key status string
+   */
+
+  updatePlaylistByKeyStatus(keyId, status) {
+    this.addKeyStatus_(keyId, status);
+    if (!this.waitingForFastQualityPlaylistReceived_) {
+      this.excludeNonUsableThenChangePlaylist_();
+    } // Listen to loadedplaylist with a single listener and check for new contentProtection elements when a playlist is updated.
+
+    this.mainPlaylistLoader_.off('loadedplaylist', this.excludeNonUsableThenChangePlaylist_.bind(this));
+    this.mainPlaylistLoader_.on('loadedplaylist', this.excludeNonUsableThenChangePlaylist_.bind(this));
+  }
+  excludeNonUsableThenChangePlaylist_() {
+    this.excludeNonUsablePlaylistsByKeyId_();
+    this.fastQualityChange_();
+  }
+}
+
+/**
+ * Returns a function that acts as the Enable/disable playlist function.
+ *
+ * @param {PlaylistLoader} loader - The main playlist loader
+ * @param {string} playlistID - id of the playlist
+ * @param {Function} changePlaylistFn - A function to be called after a
+ * playlist's enabled-state has been changed. Will NOT be called if a
+ * playlist's enabled-state is unchanged
+ * @param {boolean=} enable - Value to set the playlist enabled-state to
+ * or if undefined returns the current enabled-state for the playlist
+ * @return {Function} Function for setting/getting enabled
+ */
+
+const enableFunction = (loader, playlistID, changePlaylistFn) => enable => {
+  const playlist = loader.main.playlists[playlistID];
+  const incompatible = isIncompatible(playlist);
+  const currentlyEnabled = isEnabled(playlist);
+  if (typeof enable === 'undefined') {
+    return currentlyEnabled;
+  }
+  if (enable) {
+    delete playlist.disabled;
+  } else {
+    playlist.disabled = true;
+  }
+  if (enable !== currentlyEnabled && !incompatible) {
+    // Ensure the outside world knows about our changes
+    changePlaylistFn(playlist);
+    if (enable) {
+      loader.trigger('renditionenabled');
+    } else {
+      loader.trigger('renditiondisabled');
+    }
+  }
+  return enable;
+};
+/**
+ * The representation object encapsulates the publicly visible information
+ * in a media playlist along with a setter/getter-type function (enabled)
+ * for changing the enabled-state of a particular playlist entry
+ *
+ * @class Representation
+ */
+
+class Representation {
+  constructor(vhsHandler, playlist, id) {
+    const {
+      playlistController_: pc
+    } = vhsHandler;
+    const qualityChangeFunction = pc.fastQualityChange_.bind(pc); // some playlist attributes are optional
+
+    if (playlist.attributes) {
+      const resolution = playlist.attributes.RESOLUTION;
+      this.width = resolution && resolution.width;
+      this.height = resolution && resolution.height;
+      this.bandwidth = playlist.attributes.BANDWIDTH;
+      this.frameRate = playlist.attributes['FRAME-RATE'];
+    }
+    this.codecs = codecsForPlaylist(pc.main(), playlist);
+    this.playlist = playlist; // The id is simply the ordinality of the media playlist
+    // within the main playlist
+
+    this.id = id; // Partially-apply the enableFunction to create a playlist-
+    // specific variant
+
+    this.enabled = enableFunction(vhsHandler.playlists, playlist.id, qualityChangeFunction);
+  }
+}
+/**
+ * A mixin function that adds the `representations` api to an instance
+ * of the VhsHandler class
+ *
+ * @param {VhsHandler} vhsHandler - An instance of VhsHandler to add the
+ * representation API into
+ */
+
+const renditionSelectionMixin = function (vhsHandler) {
+  // Add a single API-specific function to the VhsHandler instance
+  vhsHandler.representations = () => {
+    const main = vhsHandler.playlistController_.main();
+    const playlists = isAudioOnly(main) ? vhsHandler.playlistController_.getAudioTrackPlaylists_() : main.playlists;
+    if (!playlists) {
+      return [];
+    }
+    return playlists.filter(media => !isIncompatible(media)).map((e, i) => new Representation(vhsHandler, e, e.id));
+  };
+};
+
+/**
+ * @file playback-watcher.js
+ *
+ * Playback starts, and now my watch begins. It shall not end until my death. I shall
+ * take no wait, hold no uncleared timeouts, father no bad seeks. I shall wear no crowns
+ * and win no glory. I shall live and die at my post. I am the corrector of the underflow.
+ * I am the watcher of gaps. I am the shield that guards the realms of seekable. I pledge
+ * my life and honor to the Playback Watch, for this Player and all the Players to come.
+ */
+
+const timerCancelEvents = ['seeking', 'seeked', 'pause', 'playing', 'error'];
+/**
+ * @class PlaybackWatcher
+ */
+
+class PlaybackWatcher {
+  /**
+   * Represents an PlaybackWatcher object.
+   *
+   * @class
+   * @param {Object} options an object that includes the tech and settings
+   */
+  constructor(options) {
+    this.playlistController_ = options.playlistController;
+    this.tech_ = options.tech;
+    this.seekable = options.seekable;
+    this.allowSeeksWithinUnsafeLiveWindow = options.allowSeeksWithinUnsafeLiveWindow;
+    this.liveRangeSafeTimeDelta = options.liveRangeSafeTimeDelta;
+    this.media = options.media;
+    this.consecutiveUpdates = 0;
+    this.lastRecordedTime = null;
+    this.checkCurrentTimeTimeout_ = null;
+    this.logger_ = logger('PlaybackWatcher');
+    this.logger_('initialize');
+    const playHandler = () => this.monitorCurrentTime_();
+    const canPlayHandler = () => this.monitorCurrentTime_();
+    const waitingHandler = () => this.techWaiting_();
+    const cancelTimerHandler = () => this.resetTimeUpdate_();
+    const pc = this.playlistController_;
+    const loaderTypes = ['main', 'subtitle', 'audio'];
+    const loaderChecks = {};
+    loaderTypes.forEach(type => {
+      loaderChecks[type] = {
+        reset: () => this.resetSegmentDownloads_(type),
+        updateend: () => this.checkSegmentDownloads_(type)
+      };
+      pc[`${type}SegmentLoader_`].on('appendsdone', loaderChecks[type].updateend); // If a rendition switch happens during a playback stall where the buffer
+      // isn't changing we want to reset. We cannot assume that the new rendition
+      // will also be stalled, until after new appends.
+
+      pc[`${type}SegmentLoader_`].on('playlistupdate', loaderChecks[type].reset); // Playback stalls should not be detected right after seeking.
+      // This prevents one segment playlists (single vtt or single segment content)
+      // from being detected as stalling. As the buffer will not change in those cases, since
+      // the buffer is the entire video duration.
+
+      this.tech_.on(['seeked', 'seeking'], loaderChecks[type].reset);
+    });
+    /**
+     * We check if a seek was into a gap through the following steps:
+     * 1. We get a seeking event and we do not get a seeked event. This means that
+     *    a seek was attempted but not completed.
+     * 2. We run `fixesBadSeeks_` on segment loader appends. This means that we already
+     *    removed everything from our buffer and appended a segment, and should be ready
+     *    to check for gaps.
+     */
+
+    const setSeekingHandlers = fn => {
+      ['main', 'audio'].forEach(type => {
+        pc[`${type}SegmentLoader_`][fn]('appended', this.seekingAppendCheck_);
+      });
+    };
+    this.seekingAppendCheck_ = () => {
+      if (this.fixesBadSeeks_()) {
+        this.consecutiveUpdates = 0;
+        this.lastRecordedTime = this.tech_.currentTime();
+        setSeekingHandlers('off');
+      }
+    };
+    this.clearSeekingAppendCheck_ = () => setSeekingHandlers('off');
+    this.watchForBadSeeking_ = () => {
+      this.clearSeekingAppendCheck_();
+      setSeekingHandlers('on');
+    };
+    this.tech_.on('seeked', this.clearSeekingAppendCheck_);
+    this.tech_.on('seeking', this.watchForBadSeeking_);
+    this.tech_.on('waiting', waitingHandler);
+    this.tech_.on(timerCancelEvents, cancelTimerHandler);
+    this.tech_.on('canplay', canPlayHandler);
+    /*
+      An edge case exists that results in gaps not being skipped when they exist at the beginning of a stream. This case
+      is surfaced in one of two ways:
+       1)  The `waiting` event is fired before the player has buffered content, making it impossible
+          to find or skip the gap. The `waiting` event is followed by a `play` event. On first play
+          we can check if playback is stalled due to a gap, and skip the gap if necessary.
+      2)  A source with a gap at the beginning of the stream is loaded programatically while the player
+          is in a playing state. To catch this case, it's important that our one-time play listener is setup
+          even if the player is in a playing state
+    */
+
+    this.tech_.one('play', playHandler); // Define the dispose function to clean up our events
+
+    this.dispose = () => {
+      this.clearSeekingAppendCheck_();
+      this.logger_('dispose');
+      this.tech_.off('waiting', waitingHandler);
+      this.tech_.off(timerCancelEvents, cancelTimerHandler);
+      this.tech_.off('canplay', canPlayHandler);
+      this.tech_.off('play', playHandler);
+      this.tech_.off('seeking', this.watchForBadSeeking_);
+      this.tech_.off('seeked', this.clearSeekingAppendCheck_);
+      loaderTypes.forEach(type => {
+        pc[`${type}SegmentLoader_`].off('appendsdone', loaderChecks[type].updateend);
+        pc[`${type}SegmentLoader_`].off('playlistupdate', loaderChecks[type].reset);
+        this.tech_.off(['seeked', 'seeking'], loaderChecks[type].reset);
+      });
+      if (this.checkCurrentTimeTimeout_) {
+        window__default["default"].clearTimeout(this.checkCurrentTimeTimeout_);
+      }
+      this.resetTimeUpdate_();
+    };
+  }
+  /**
+   * Periodically check current time to see if playback stopped
+   *
+   * @private
+   */
+
+  monitorCurrentTime_() {
+    this.checkCurrentTime_();
+    if (this.checkCurrentTimeTimeout_) {
+      window__default["default"].clearTimeout(this.checkCurrentTimeTimeout_);
+    } // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
+
+    this.checkCurrentTimeTimeout_ = window__default["default"].setTimeout(this.monitorCurrentTime_.bind(this), 250);
+  }
+  /**
+   * Reset stalled download stats for a specific type of loader
+   *
+   * @param {string} type
+   *        The segment loader type to check.
+   *
+   * @listens SegmentLoader#playlistupdate
+   * @listens Tech#seeking
+   * @listens Tech#seeked
+   */
+
+  resetSegmentDownloads_(type) {
+    const loader = this.playlistController_[`${type}SegmentLoader_`];
+    if (this[`${type}StalledDownloads_`] > 0) {
+      this.logger_(`resetting possible stalled download count for ${type} loader`);
+    }
+    this[`${type}StalledDownloads_`] = 0;
+    this[`${type}Buffered_`] = loader.buffered_();
+  }
+  /**
+   * Checks on every segment `appendsdone` to see
+   * if segment appends are making progress. If they are not
+   * and we are still downloading bytes. We exclude the playlist.
+   *
+   * @param {string} type
+   *        The segment loader type to check.
+   *
+   * @listens SegmentLoader#appendsdone
+   */
+
+  checkSegmentDownloads_(type) {
+    const pc = this.playlistController_;
+    const loader = pc[`${type}SegmentLoader_`];
+    const buffered = loader.buffered_();
+    const isBufferedDifferent = isRangeDifferent(this[`${type}Buffered_`], buffered);
+    this[`${type}Buffered_`] = buffered; // if another watcher is going to fix the issue or
+    // the buffered value for this loader changed
+    // appends are working
+
+    if (isBufferedDifferent) {
+      this.resetSegmentDownloads_(type);
+      return;
+    }
+    this[`${type}StalledDownloads_`]++;
+    this.logger_(`found #${this[`${type}StalledDownloads_`]} ${type} appends that did not increase buffer (possible stalled download)`, {
+      playlistId: loader.playlist_ && loader.playlist_.id,
+      buffered: timeRangesToArray(buffered)
+    }); // after 10 possibly stalled appends with no reset, exclude
+
+    if (this[`${type}StalledDownloads_`] < 10) {
+      return;
+    }
+    this.logger_(`${type} loader stalled download exclusion`);
+    this.resetSegmentDownloads_(type);
+    this.tech_.trigger({
+      type: 'usage',
+      name: `vhs-${type}-download-exclusion`
+    });
+    if (type === 'subtitle') {
+      return;
+    } // TODO: should we exclude audio tracks rather than main tracks
+    // when type is audio?
+
+    pc.excludePlaylist({
+      error: {
+        message: `Excessive ${type} segment downloading detected.`
+      },
+      playlistExclusionDuration: Infinity
+    });
+  }
+  /**
+   * The purpose of this function is to emulate the "waiting" event on
+   * browsers that do not emit it when they are waiting for more
+   * data to continue playback
+   *
+   * @private
+   */
+
+  checkCurrentTime_() {
+    if (this.tech_.paused() || this.tech_.seeking()) {
+      return;
+    }
+    const currentTime = this.tech_.currentTime();
+    const buffered = this.tech_.buffered();
+    if (this.lastRecordedTime === currentTime && (!buffered.length || currentTime + SAFE_TIME_DELTA >= buffered.end(buffered.length - 1))) {
+      // If current time is at the end of the final buffered region, then any playback
+      // stall is most likely caused by buffering in a low bandwidth environment. The tech
+      // should fire a `waiting` event in this scenario, but due to browser and tech
+      // inconsistencies. Calling `techWaiting_` here allows us to simulate
+      // responding to a native `waiting` event when the tech fails to emit one.
+      return this.techWaiting_();
+    }
+    if (this.consecutiveUpdates >= 5 && currentTime === this.lastRecordedTime) {
+      this.consecutiveUpdates++;
+      this.waiting_();
+    } else if (currentTime === this.lastRecordedTime) {
+      this.consecutiveUpdates++;
+    } else {
+      this.consecutiveUpdates = 0;
+      this.lastRecordedTime = currentTime;
+    }
+  }
+  /**
+   * Resets the 'timeupdate' mechanism designed to detect that we are stalled
+   *
+   * @private
+   */
+
+  resetTimeUpdate_() {
+    this.consecutiveUpdates = 0;
+  }
+  /**
+   * Fixes situations where there's a bad seek
+   *
+   * @return {boolean} whether an action was taken to fix the seek
+   * @private
+   */
+
+  fixesBadSeeks_() {
+    const seeking = this.tech_.seeking();
+    if (!seeking) {
+      return false;
+    } // TODO: It's possible that these seekable checks should be moved out of this function
+    // and into a function that runs on seekablechange. It's also possible that we only need
+    // afterSeekableWindow as the buffered check at the bottom is good enough to handle before
+    // seekable range.
+
+    const seekable = this.seekable();
+    const currentTime = this.tech_.currentTime();
+    const isAfterSeekableRange = this.afterSeekableWindow_(seekable, currentTime, this.media(), this.allowSeeksWithinUnsafeLiveWindow);
+    let seekTo;
+    if (isAfterSeekableRange) {
+      const seekableEnd = seekable.end(seekable.length - 1); // sync to live point (if VOD, our seekable was updated and we're simply adjusting)
+
+      seekTo = seekableEnd;
+    }
+    if (this.beforeSeekableWindow_(seekable, currentTime)) {
+      const seekableStart = seekable.start(0); // sync to the beginning of the live window
+      // provide a buffer of .1 seconds to handle rounding/imprecise numbers
+
+      seekTo = seekableStart + (
+      // if the playlist is too short and the seekable range is an exact time (can
+      // happen in live with a 3 segment playlist), then don't use a time delta
+      seekableStart === seekable.end(0) ? 0 : SAFE_TIME_DELTA);
+    }
+    if (typeof seekTo !== 'undefined') {
+      this.logger_(`Trying to seek outside of seekable at time ${currentTime} with ` + `seekable range ${printableRange(seekable)}. Seeking to ` + `${seekTo}.`);
+      this.tech_.setCurrentTime(seekTo);
+      return true;
+    }
+    const sourceUpdater = this.playlistController_.sourceUpdater_;
+    const buffered = this.tech_.buffered();
+    const audioBuffered = sourceUpdater.audioBuffer ? sourceUpdater.audioBuffered() : null;
+    const videoBuffered = sourceUpdater.videoBuffer ? sourceUpdater.videoBuffered() : null;
+    const media = this.media(); // verify that at least two segment durations or one part duration have been
+    // appended before checking for a gap.
+
+    const minAppendedDuration = media.partTargetDuration ? media.partTargetDuration : (media.targetDuration - TIME_FUDGE_FACTOR) * 2; // verify that at least two segment durations have been
+    // appended before checking for a gap.
+
+    const bufferedToCheck = [audioBuffered, videoBuffered];
+    for (let i = 0; i < bufferedToCheck.length; i++) {
+      // skip null buffered
+      if (!bufferedToCheck[i]) {
+        continue;
+      }
+      const timeAhead = timeAheadOf(bufferedToCheck[i], currentTime); // if we are less than two video/audio segment durations or one part
+      // duration behind we haven't appended enough to call this a bad seek.
+
+      if (timeAhead < minAppendedDuration) {
+        return false;
+      }
+    }
+    const nextRange = findNextRange(buffered, currentTime); // we have appended enough content, but we don't have anything buffered
+    // to seek over the gap
+
+    if (nextRange.length === 0) {
+      return false;
+    }
+    seekTo = nextRange.start(0) + SAFE_TIME_DELTA;
+    this.logger_(`Buffered region starts (${nextRange.start(0)}) ` + ` just beyond seek point (${currentTime}). Seeking to ${seekTo}.`);
+    this.tech_.setCurrentTime(seekTo);
+    return true;
+  }
+  /**
+   * Handler for situations when we determine the player is waiting.
+   *
+   * @private
+   */
+
+  waiting_() {
+    if (this.techWaiting_()) {
+      return;
+    } // All tech waiting checks failed. Use last resort correction
+
+    const currentTime = this.tech_.currentTime();
+    const buffered = this.tech_.buffered();
+    const currentRange = findRange(buffered, currentTime); // Sometimes the player can stall for unknown reasons within a contiguous buffered
+    // region with no indication that anything is amiss (seen in Firefox). Seeking to
+    // currentTime is usually enough to kickstart the player. This checks that the player
+    // is currently within a buffered region before attempting a corrective seek.
+    // Chrome does not appear to continue `timeupdate` events after a `waiting` event
+    // until there is ~ 3 seconds of forward buffer available. PlaybackWatcher should also
+    // make sure there is ~3 seconds of forward buffer before taking any corrective action
+    // to avoid triggering an `unknownwaiting` event when the network is slow.
+
+    if (currentRange.length && currentTime + 3 <= currentRange.end(0)) {
+      this.resetTimeUpdate_();
+      this.tech_.setCurrentTime(currentTime);
+      this.logger_(`Stopped at ${currentTime} while inside a buffered region ` + `[${currentRange.start(0)} -> ${currentRange.end(0)}]. Attempting to resume ` + 'playback by seeking to the current time.'); // unknown waiting corrections may be useful for monitoring QoS
+
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-unknown-waiting'
+      });
+      return;
+    }
+  }
+  /**
+   * Handler for situations when the tech fires a `waiting` event
+   *
+   * @return {boolean}
+   *         True if an action (or none) was needed to correct the waiting. False if no
+   *         checks passed
+   * @private
+   */
+
+  techWaiting_() {
+    const seekable = this.seekable();
+    const currentTime = this.tech_.currentTime();
+    if (this.tech_.seeking()) {
+      // Tech is seeking or already waiting on another action, no action needed
+      return true;
+    }
+    if (this.beforeSeekableWindow_(seekable, currentTime)) {
+      const livePoint = seekable.end(seekable.length - 1);
+      this.logger_(`Fell out of live window at time ${currentTime}. Seeking to ` + `live point (seekable end) ${livePoint}`);
+      this.resetTimeUpdate_();
+      this.tech_.setCurrentTime(livePoint); // live window resyncs may be useful for monitoring QoS
+
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-live-resync'
+      });
+      return true;
+    }
+    const sourceUpdater = this.tech_.vhs.playlistController_.sourceUpdater_;
+    const buffered = this.tech_.buffered();
+    const videoUnderflow = this.videoUnderflow_({
+      audioBuffered: sourceUpdater.audioBuffered(),
+      videoBuffered: sourceUpdater.videoBuffered(),
+      currentTime
+    });
+    if (videoUnderflow) {
+      // Even though the video underflowed and was stuck in a gap, the audio overplayed
+      // the gap, leading currentTime into a buffered range. Seeking to currentTime
+      // allows the video to catch up to the audio position without losing any audio
+      // (only suffering ~3 seconds of frozen video and a pause in audio playback).
+      this.resetTimeUpdate_();
+      this.tech_.setCurrentTime(currentTime); // video underflow may be useful for monitoring QoS
+
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-video-underflow'
+      });
+      return true;
+    }
+    const nextRange = findNextRange(buffered, currentTime); // check for gap
+
+    if (nextRange.length > 0) {
+      this.logger_(`Stopped at ${currentTime} and seeking to ${nextRange.start(0)}`);
+      this.resetTimeUpdate_();
+      this.skipTheGap_(currentTime);
+      return true;
+    } // All checks failed. Returning false to indicate failure to correct waiting
+
+    return false;
+  }
+  afterSeekableWindow_(seekable, currentTime, playlist, allowSeeksWithinUnsafeLiveWindow = false) {
+    if (!seekable.length) {
+      // we can't make a solid case if there's no seekable, default to false
+      return false;
+    }
+    let allowedEnd = seekable.end(seekable.length - 1) + SAFE_TIME_DELTA;
+    const isLive = !playlist.endList;
+    const isLLHLS = typeof playlist.partTargetDuration === 'number';
+    if (isLive && (isLLHLS || allowSeeksWithinUnsafeLiveWindow)) {
+      allowedEnd = seekable.end(seekable.length - 1) + playlist.targetDuration * 3;
+    }
+    if (currentTime > allowedEnd) {
+      return true;
+    }
+    return false;
+  }
+  beforeSeekableWindow_(seekable, currentTime) {
+    if (seekable.length &&
+    // can't fall before 0 and 0 seekable start identifies VOD stream
+    seekable.start(0) > 0 && currentTime < seekable.start(0) - this.liveRangeSafeTimeDelta) {
+      return true;
+    }
+    return false;
+  }
+  videoUnderflow_({
+    videoBuffered,
+    audioBuffered,
+    currentTime
+  }) {
+    // audio only content will not have video underflow :)
+    if (!videoBuffered) {
+      return;
+    }
+    let gap; // find a gap in demuxed content.
+
+    if (videoBuffered.length && audioBuffered.length) {
+      // in Chrome audio will continue to play for ~3s when we run out of video
+      // so we have to check that the video buffer did have some buffer in the
+      // past.
+      const lastVideoRange = findRange(videoBuffered, currentTime - 3);
+      const videoRange = findRange(videoBuffered, currentTime);
+      const audioRange = findRange(audioBuffered, currentTime);
+      if (audioRange.length && !videoRange.length && lastVideoRange.length) {
+        gap = {
+          start: lastVideoRange.end(0),
+          end: audioRange.end(0)
+        };
+      } // find a gap in muxed content.
+    } else {
+      const nextRange = findNextRange(videoBuffered, currentTime); // Even if there is no available next range, there is still a possibility we are
+      // stuck in a gap due to video underflow.
+
+      if (!nextRange.length) {
+        gap = this.gapFromVideoUnderflow_(videoBuffered, currentTime);
+      }
+    }
+    if (gap) {
+      this.logger_(`Encountered a gap in video from ${gap.start} to ${gap.end}. ` + `Seeking to current time ${currentTime}`);
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Timer callback. If playback still has not proceeded, then we seek
+   * to the start of the next buffered region.
+   *
+   * @private
+   */
+
+  skipTheGap_(scheduledCurrentTime) {
+    const buffered = this.tech_.buffered();
+    const currentTime = this.tech_.currentTime();
+    const nextRange = findNextRange(buffered, currentTime);
+    this.resetTimeUpdate_();
+    if (nextRange.length === 0 || currentTime !== scheduledCurrentTime) {
+      return;
+    }
+    this.logger_('skipTheGap_:', 'currentTime:', currentTime, 'scheduled currentTime:', scheduledCurrentTime, 'nextRange start:', nextRange.start(0)); // only seek if we still have not played
+
+    this.tech_.setCurrentTime(nextRange.start(0) + TIME_FUDGE_FACTOR);
+    this.tech_.trigger({
+      type: 'usage',
+      name: 'vhs-gap-skip'
+    });
+  }
+  gapFromVideoUnderflow_(buffered, currentTime) {
+    // At least in Chrome, if there is a gap in the video buffer, the audio will continue
+    // playing for ~3 seconds after the video gap starts. This is done to account for
+    // video buffer underflow/underrun (note that this is not done when there is audio
+    // buffer underflow/underrun -- in that case the video will stop as soon as it
+    // encounters the gap, as audio stalls are more noticeable/jarring to a user than
+    // video stalls). The player's time will reflect the playthrough of audio, so the
+    // time will appear as if we are in a buffered region, even if we are stuck in a
+    // "gap."
+    //
+    // Example:
+    // video buffer:   0 => 10.1, 10.2 => 20
+    // audio buffer:   0 => 20
+    // overall buffer: 0 => 10.1, 10.2 => 20
+    // current time: 13
+    //
+    // Chrome's video froze at 10 seconds, where the video buffer encountered the gap,
+    // however, the audio continued playing until it reached ~3 seconds past the gap
+    // (13 seconds), at which point it stops as well. Since current time is past the
+    // gap, findNextRange will return no ranges.
+    //
+    // To check for this issue, we see if there is a gap that starts somewhere within
+    // a 3 second range (3 seconds +/- 1 second) back from our current time.
+    const gaps = findGaps(buffered);
+    for (let i = 0; i < gaps.length; i++) {
+      const start = gaps.start(i);
+      const end = gaps.end(i); // gap is starts no more than 4 seconds back
+
+      if (currentTime - start < 4 && currentTime - start > 2) {
+        return {
+          start,
+          end
+        };
+      }
+    }
+    return null;
+  }
+}
+const defaultOptions = {
+  errorInterval: 30,
+  getSource(next) {
+    const tech = this.tech({
+      IWillNotUseThisInPlugins: true
+    });
+    const sourceObj = tech.currentSource_ || this.currentSource();
+    return next(sourceObj);
+  }
+};
+/**
+ * Main entry point for the plugin
+ *
+ * @param {Player} player a reference to a videojs Player instance
+ * @param {Object} [options] an object with plugin options
+ * @private
+ */
+
+const initPlugin = function (player, options) {
+  let lastCalled = 0;
+  let seekTo = 0;
+  const localOptions = merge(defaultOptions, options);
+  player.ready(() => {
+    player.trigger({
+      type: 'usage',
+      name: 'vhs-error-reload-initialized'
+    });
+  });
+  /**
+   * Player modifications to perform that must wait until `loadedmetadata`
+   * has been triggered
+   *
+   * @private
+   */
+
+  const loadedMetadataHandler = function () {
+    if (seekTo) {
+      player.currentTime(seekTo);
+    }
+  };
+  /**
+   * Set the source on the player element, play, and seek if necessary
+   *
+   * @param {Object} sourceObj An object specifying the source url and mime-type to play
+   * @private
+   */
+
+  const setSource = function (sourceObj) {
+    if (sourceObj === null || sourceObj === undefined) {
+      return;
+    }
+    seekTo = player.duration() !== Infinity && player.currentTime() || 0;
+    player.one('loadedmetadata', loadedMetadataHandler);
+    player.src(sourceObj);
+    player.trigger({
+      type: 'usage',
+      name: 'vhs-error-reload'
+    });
+    player.play();
+  };
+  /**
+   * Attempt to get a source from either the built-in getSource function
+   * or a custom function provided via the options
+   *
+   * @private
+   */
+
+  const errorHandler = function () {
+    // Do not attempt to reload the source if a source-reload occurred before
+    // 'errorInterval' time has elapsed since the last source-reload
+    if (Date.now() - lastCalled < localOptions.errorInterval * 1000) {
+      player.trigger({
+        type: 'usage',
+        name: 'vhs-error-reload-canceled'
+      });
+      return;
+    }
+    if (!localOptions.getSource || typeof localOptions.getSource !== 'function') {
+      videojs.log.error('ERROR: reloadSourceOnError - The option getSource must be a function!');
+      return;
+    }
+    lastCalled = Date.now();
+    return localOptions.getSource.call(player, setSource);
+  };
+  /**
+   * Unbind any event handlers that were bound by the plugin
+   *
+   * @private
+   */
+
+  const cleanupEvents = function () {
+    player.off('loadedmetadata', loadedMetadataHandler);
+    player.off('error', errorHandler);
+    player.off('dispose', cleanupEvents);
+  };
+  /**
+   * Cleanup before re-initializing the plugin
+   *
+   * @param {Object} [newOptions] an object with plugin options
+   * @private
+   */
+
+  const reinitPlugin = function (newOptions) {
+    cleanupEvents();
+    initPlugin(player, newOptions);
+  };
+  player.on('error', errorHandler);
+  player.on('dispose', cleanupEvents); // Overwrite the plugin function so that we can correctly cleanup before
+  // initializing the plugin
+
+  player.reloadSourceOnError = reinitPlugin;
+};
+/**
+ * Reload the source when an error is detected as long as there
+ * wasn't an error previously within the last 30 seconds
+ *
+ * @param {Object} [options] an object with plugin options
+ */
+
+const reloadSourceOnError = function (options) {
+  initPlugin(this, options);
+};
+var version$4 = "3.12.1";
+var version$3 = "7.0.3";
+var version$2 = "1.3.0";
+var version$1 = "7.1.0";
+var version = "4.0.1";
+
+/**
+ * @file videojs-http-streaming.js
+ *
+ * The main file for the VHS project.
+ * License: https://github.com/videojs/videojs-http-streaming/blob/main/LICENSE
+ */
+const Vhs = {
+  PlaylistLoader,
+  Playlist,
+  utils,
+  STANDARD_PLAYLIST_SELECTOR: lastBandwidthSelector,
+  INITIAL_PLAYLIST_SELECTOR: lowestBitrateCompatibleVariantSelector,
+  lastBandwidthSelector,
+  movingAverageBandwidthSelector,
+  comparePlaylistBandwidth,
+  comparePlaylistResolution,
+  xhr: xhrFactory()
+}; // Define getter/setters for config properties
+
+Object.keys(Config).forEach(prop => {
+  Object.defineProperty(Vhs, prop, {
+    get() {
+      videojs.log.warn(`using Vhs.${prop} is UNSAFE be sure you know what you are doing`);
+      return Config[prop];
+    },
+    set(value) {
+      videojs.log.warn(`using Vhs.${prop} is UNSAFE be sure you know what you are doing`);
+      if (typeof value !== 'number' || value < 0) {
+        videojs.log.warn(`value of Vhs.${prop} must be greater than or equal to 0`);
+        return;
+      }
+      Config[prop] = value;
+    }
+  });
+});
+const LOCAL_STORAGE_KEY = 'videojs-vhs';
+/**
+ * Updates the selectedIndex of the QualityLevelList when a mediachange happens in vhs.
+ *
+ * @param {QualityLevelList} qualityLevels The QualityLevelList to update.
+ * @param {PlaylistLoader} playlistLoader PlaylistLoader containing the new media info.
+ * @function handleVhsMediaChange
+ */
+
+const handleVhsMediaChange = function (qualityLevels, playlistLoader) {
+  const newPlaylist = playlistLoader.media();
+  let selectedIndex = -1;
+  for (let i = 0; i < qualityLevels.length; i++) {
+    if (qualityLevels[i].id === newPlaylist.id) {
+      selectedIndex = i;
+      break;
+    }
+  }
+  qualityLevels.selectedIndex_ = selectedIndex;
+  qualityLevels.trigger({
+    selectedIndex,
+    type: 'change'
+  });
+};
+/**
+ * Adds quality levels to list once playlist metadata is available
+ *
+ * @param {QualityLevelList} qualityLevels The QualityLevelList to attach events to.
+ * @param {Object} vhs Vhs object to listen to for media events.
+ * @function handleVhsLoadedMetadata
+ */
+
+const handleVhsLoadedMetadata = function (qualityLevels, vhs) {
+  vhs.representations().forEach(rep => {
+    qualityLevels.addQualityLevel(rep);
+  });
+  handleVhsMediaChange(qualityLevels, vhs.playlists);
+}; // VHS is a source handler, not a tech. Make sure attempts to use it
+// as one do not cause exceptions.
+
+Vhs.canPlaySource = function () {
+  return videojs.log.warn('VHS is no longer a tech. Please remove it from ' + 'your player\'s techOrder.');
+};
+const emeKeySystems = (keySystemOptions, mainPlaylist, audioPlaylist) => {
+  if (!keySystemOptions) {
+    return keySystemOptions;
+  }
+  let codecs = {};
+  if (mainPlaylist && mainPlaylist.attributes && mainPlaylist.attributes.CODECS) {
+    codecs = unwrapCodecList(codecs_js.parseCodecs(mainPlaylist.attributes.CODECS));
+  }
+  if (audioPlaylist && audioPlaylist.attributes && audioPlaylist.attributes.CODECS) {
+    codecs.audio = audioPlaylist.attributes.CODECS;
+  }
+  const videoContentType = codecs_js.getMimeForCodec(codecs.video);
+  const audioContentType = codecs_js.getMimeForCodec(codecs.audio); // upsert the content types based on the selected playlist
+
+  const keySystemContentTypes = {};
+  for (const keySystem in keySystemOptions) {
+    keySystemContentTypes[keySystem] = {};
+    if (audioContentType) {
+      keySystemContentTypes[keySystem].audioContentType = audioContentType;
+    }
+    if (videoContentType) {
+      keySystemContentTypes[keySystem].videoContentType = videoContentType;
+    } // Default to using the video playlist's PSSH even though they may be different, as
+    // videojs-contrib-eme will only accept one in the options.
+    //
+    // This shouldn't be an issue for most cases as early intialization will handle all
+    // unique PSSH values, and if they aren't, then encrypted events should have the
+    // specific information needed for the unique license.
+
+    if (mainPlaylist.contentProtection && mainPlaylist.contentProtection[keySystem] && mainPlaylist.contentProtection[keySystem].pssh) {
+      keySystemContentTypes[keySystem].pssh = mainPlaylist.contentProtection[keySystem].pssh;
+    } // videojs-contrib-eme accepts the option of specifying: 'com.some.cdm': 'url'
+    // so we need to prevent overwriting the URL entirely
+
+    if (typeof keySystemOptions[keySystem] === 'string') {
+      keySystemContentTypes[keySystem].url = keySystemOptions[keySystem];
+    }
+  }
+  return merge(keySystemOptions, keySystemContentTypes);
+};
+/**
+ * @typedef {Object} KeySystems
+ *
+ * keySystems configuration for https://github.com/videojs/videojs-contrib-eme
+ * Note: not all options are listed here.
+ *
+ * @property {Uint8Array} [pssh]
+ *           Protection System Specific Header
+ */
+
+/**
+ * Goes through all the playlists and collects an array of KeySystems options objects
+ * containing each playlist's keySystems and their pssh values, if available.
+ *
+ * @param {Object[]} playlists
+ *        The playlists to look through
+ * @param {string[]} keySystems
+ *        The keySystems to collect pssh values for
+ *
+ * @return {KeySystems[]}
+ *         An array of KeySystems objects containing available key systems and their
+ *         pssh values
+ */
+
+const getAllPsshKeySystemsOptions = (playlists, keySystems) => {
+  return playlists.reduce((keySystemsArr, playlist) => {
+    if (!playlist.contentProtection) {
+      return keySystemsArr;
+    }
+    const keySystemsOptions = keySystems.reduce((keySystemsObj, keySystem) => {
+      const keySystemOptions = playlist.contentProtection[keySystem];
+      if (keySystemOptions && keySystemOptions.pssh) {
+        keySystemsObj[keySystem] = {
+          pssh: keySystemOptions.pssh
+        };
+      }
+      return keySystemsObj;
+    }, {});
+    if (Object.keys(keySystemsOptions).length) {
+      keySystemsArr.push(keySystemsOptions);
+    }
+    return keySystemsArr;
+  }, []);
+};
+/**
+ * Returns a promise that waits for the
+ * [eme plugin](https://github.com/videojs/videojs-contrib-eme) to create a key session.
+ *
+ * Works around https://bugs.chromium.org/p/chromium/issues/detail?id=895449 in non-IE11
+ * browsers.
+ *
+ * As per the above ticket, this is particularly important for Chrome, where, if
+ * unencrypted content is appended before encrypted content and the key session has not
+ * been created, a MEDIA_ERR_DECODE will be thrown once the encrypted content is reached
+ * during playback.
+ *
+ * @param {Object} player
+ *        The player instance
+ * @param {Object[]} sourceKeySystems
+ *        The key systems options from the player source
+ * @param {Object} [audioMedia]
+ *        The active audio media playlist (optional)
+ * @param {Object[]} mainPlaylists
+ *        The playlists found on the main playlist object
+ *
+ * @return {Object}
+ *         Promise that resolves when the key session has been created
+ */
+
+const waitForKeySessionCreation = ({
+  player,
+  sourceKeySystems,
+  audioMedia,
+  mainPlaylists
+}) => {
+  if (!player.eme.initializeMediaKeys) {
+    return Promise.resolve();
+  } // TODO should all audio PSSH values be initialized for DRM?
+  //
+  // All unique video rendition pssh values are initialized for DRM, but here only
+  // the initial audio playlist license is initialized. In theory, an encrypted
+  // event should be fired if the user switches to an alternative audio playlist
+  // where a license is required, but this case hasn't yet been tested. In addition, there
+  // may be many alternate audio playlists unlikely to be used (e.g., multiple different
+  // languages).
+
+  const playlists = audioMedia ? mainPlaylists.concat([audioMedia]) : mainPlaylists;
+  const keySystemsOptionsArr = getAllPsshKeySystemsOptions(playlists, Object.keys(sourceKeySystems));
+  const initializationFinishedPromises = [];
+  const keySessionCreatedPromises = []; // Since PSSH values are interpreted as initData, EME will dedupe any duplicates. The
+  // only place where it should not be deduped is for ms-prefixed APIs, but
+  // the existence of modern EME APIs in addition to
+  // ms-prefixed APIs on Edge should prevent this from being a concern.
+  // initializeMediaKeys also won't use the webkit-prefixed APIs.
+
+  keySystemsOptionsArr.forEach(keySystemsOptions => {
+    keySessionCreatedPromises.push(new Promise((resolve, reject) => {
+      player.tech_.one('keysessioncreated', resolve);
+    }));
+    initializationFinishedPromises.push(new Promise((resolve, reject) => {
+      player.eme.initializeMediaKeys({
+        keySystems: keySystemsOptions
+      }, err => {
+        if (err) {
+          reject(err);
+          return;
+        }
+        resolve();
+      });
+    }));
+  }); // The reasons Promise.race is chosen over Promise.any:
+  //
+  // * Promise.any is only available in Safari 14+.
+  // * None of these promises are expected to reject. If they do reject, it might be
+  //   better here for the race to surface the rejection, rather than mask it by using
+  //   Promise.any.
+
+  return Promise.race([
+  // If a session was previously created, these will all finish resolving without
+  // creating a new session, otherwise it will take until the end of all license
+  // requests, which is why the key session check is used (to make setup much faster).
+  Promise.all(initializationFinishedPromises),
+  // Once a single session is created, the browser knows DRM will be used.
+  Promise.race(keySessionCreatedPromises)]);
+};
+/**
+ * If the [eme](https://github.com/videojs/videojs-contrib-eme) plugin is available, and
+ * there are keySystems on the source, sets up source options to prepare the source for
+ * eme.
+ *
+ * @param {Object} player
+ *        The player instance
+ * @param {Object[]} sourceKeySystems
+ *        The key systems options from the player source
+ * @param {Object} media
+ *        The active media playlist
+ * @param {Object} [audioMedia]
+ *        The active audio media playlist (optional)
+ *
+ * @return {boolean}
+ *         Whether or not options were configured and EME is available
+ */
+
+const setupEmeOptions = ({
+  player,
+  sourceKeySystems,
+  media,
+  audioMedia
+}) => {
+  const sourceOptions = emeKeySystems(sourceKeySystems, media, audioMedia);
+  if (!sourceOptions) {
+    return false;
+  }
+  player.currentSource().keySystems = sourceOptions; // eme handles the rest of the setup, so if it is missing
+  // do nothing.
+
+  if (sourceOptions && !player.eme) {
+    videojs.log.warn('DRM encrypted source cannot be decrypted without a DRM plugin');
+    return false;
+  }
+  return true;
+};
+const getVhsLocalStorage = () => {
+  if (!window__default["default"].localStorage) {
+    return null;
+  }
+  const storedObject = window__default["default"].localStorage.getItem(LOCAL_STORAGE_KEY);
+  if (!storedObject) {
+    return null;
+  }
+  try {
+    return JSON.parse(storedObject);
+  } catch (e) {
+    // someone may have tampered with the value
+    return null;
+  }
+};
+const updateVhsLocalStorage = options => {
+  if (!window__default["default"].localStorage) {
+    return false;
+  }
+  let objectToStore = getVhsLocalStorage();
+  objectToStore = objectToStore ? merge(objectToStore, options) : options;
+  try {
+    window__default["default"].localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(objectToStore));
+  } catch (e) {
+    // Throws if storage is full (e.g., always on iOS 5+ Safari private mode, where
+    // storage is set to 0).
+    // https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem#Exceptions
+    // No need to perform any operation.
+    return false;
+  }
+  return objectToStore;
+};
+/**
+ * Parses VHS-supported media types from data URIs. See
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
+ * for information on data URIs.
+ *
+ * @param {string} dataUri
+ *        The data URI
+ *
+ * @return {string|Object}
+ *         The parsed object/string, or the original string if no supported media type
+ *         was found
+ */
+
+const expandDataUri = dataUri => {
+  if (dataUri.toLowerCase().indexOf('data:application/vnd.videojs.vhs+json,') === 0) {
+    return JSON.parse(dataUri.substring(dataUri.indexOf(',') + 1));
+  } // no known case for this data URI, return the string as-is
+
+  return dataUri;
+};
+/**
+ * Adds a request hook to an xhr object
+ *
+ * @param {Object} xhr object to add the onRequest hook to
+ * @param {function} callback hook function for an xhr request
+ */
+
+const addOnRequestHook = (xhr, callback) => {
+  if (!xhr._requestCallbackSet) {
+    xhr._requestCallbackSet = new Set();
+  }
+  xhr._requestCallbackSet.add(callback);
+};
+/**
+ * Adds a response hook to an xhr object
+ *
+ * @param {Object} xhr object to add the onResponse hook to
+ * @param {function} callback hook function for an xhr response
+ */
+
+const addOnResponseHook = (xhr, callback) => {
+  if (!xhr._responseCallbackSet) {
+    xhr._responseCallbackSet = new Set();
+  }
+  xhr._responseCallbackSet.add(callback);
+};
+/**
+ * Removes a request hook on an xhr object, deletes the onRequest set if empty.
+ *
+ * @param {Object} xhr object to remove the onRequest hook from
+ * @param {function} callback hook function to remove
+ */
+
+const removeOnRequestHook = (xhr, callback) => {
+  if (!xhr._requestCallbackSet) {
+    return;
+  }
+  xhr._requestCallbackSet.delete(callback);
+  if (!xhr._requestCallbackSet.size) {
+    delete xhr._requestCallbackSet;
+  }
+};
+/**
+ * Removes a response hook on an xhr object, deletes the onResponse set if empty.
+ *
+ * @param {Object} xhr object to remove the onResponse hook from
+ * @param {function} callback hook function to remove
+ */
+
+const removeOnResponseHook = (xhr, callback) => {
+  if (!xhr._responseCallbackSet) {
+    return;
+  }
+  xhr._responseCallbackSet.delete(callback);
+  if (!xhr._responseCallbackSet.size) {
+    delete xhr._responseCallbackSet;
+  }
+};
+/**
+ * Whether the browser has built-in HLS support.
+ */
+
+Vhs.supportsNativeHls = function () {
+  if (!document__default["default"] || !document__default["default"].createElement) {
+    return false;
+  }
+  const video = document__default["default"].createElement('video'); // native HLS is definitely not supported if HTML5 video isn't
+
+  if (!videojs.getTech('Html5').isSupported()) {
+    return false;
+  } // HLS manifests can go by many mime-types
+
+  const canPlay = [
+  // Apple santioned
+  'application/vnd.apple.mpegurl',
+  // Apple sanctioned for backwards compatibility
+  'audio/mpegurl',
+  // Very common
+  'audio/x-mpegurl',
+  // Very common
+  'application/x-mpegurl',
+  // Included for completeness
+  'video/x-mpegurl', 'video/mpegurl', 'application/mpegurl'];
+  return canPlay.some(function (canItPlay) {
+    return /maybe|probably/i.test(video.canPlayType(canItPlay));
+  });
+}();
+Vhs.supportsNativeDash = function () {
+  if (!document__default["default"] || !document__default["default"].createElement || !videojs.getTech('Html5').isSupported()) {
+    return false;
+  }
+  return /maybe|probably/i.test(document__default["default"].createElement('video').canPlayType('application/dash+xml'));
+}();
+Vhs.supportsTypeNatively = type => {
+  if (type === 'hls') {
+    return Vhs.supportsNativeHls;
+  }
+  if (type === 'dash') {
+    return Vhs.supportsNativeDash;
+  }
+  return false;
+};
+/**
+ * VHS is a source handler, not a tech. Make sure attempts to use it
+ * as one do not cause exceptions.
+ */
+
+Vhs.isSupported = function () {
+  return videojs.log.warn('VHS is no longer a tech. Please remove it from ' + 'your player\'s techOrder.');
+};
+/**
+ * A global function for setting an onRequest hook
+ *
+ * @param {function} callback for request modifiction
+ */
+
+Vhs.xhr.onRequest = function (callback) {
+  addOnRequestHook(Vhs.xhr, callback);
+};
+/**
+ * A global function for setting an onResponse hook
+ *
+ * @param {callback} callback for response data retrieval
+ */
+
+Vhs.xhr.onResponse = function (callback) {
+  addOnResponseHook(Vhs.xhr, callback);
+};
+/**
+ * Deletes a global onRequest callback if it exists
+ *
+ * @param {function} callback to delete from the global set
+ */
+
+Vhs.xhr.offRequest = function (callback) {
+  removeOnRequestHook(Vhs.xhr, callback);
+};
+/**
+ * Deletes a global onResponse callback if it exists
+ *
+ * @param {function} callback to delete from the global set
+ */
+
+Vhs.xhr.offResponse = function (callback) {
+  removeOnResponseHook(Vhs.xhr, callback);
+};
+const Component = videojs.getComponent('Component');
+/**
+ * The Vhs Handler object, where we orchestrate all of the parts
+ * of VHS to interact with video.js
+ *
+ * @class VhsHandler
+ * @extends videojs.Component
+ * @param {Object} source the soruce object
+ * @param {Tech} tech the parent tech object
+ * @param {Object} options optional and required options
+ */
+
+class VhsHandler extends Component {
+  constructor(source, tech, options) {
+    super(tech, options.vhs); // if a tech level `initialBandwidth` option was passed
+    // use that over the VHS level `bandwidth` option
+
+    if (typeof options.initialBandwidth === 'number') {
+      this.options_.bandwidth = options.initialBandwidth;
+    }
+    this.logger_ = logger('VhsHandler'); // we need access to the player in some cases,
+    // so, get it from Video.js via the `playerId`
+
+    if (tech.options_ && tech.options_.playerId) {
+      const _player = videojs.getPlayer(tech.options_.playerId);
+      this.player_ = _player;
+    }
+    this.tech_ = tech;
+    this.source_ = source;
+    this.stats = {};
+    this.ignoreNextSeekingEvent_ = false;
+    this.setOptions_();
+    if (this.options_.overrideNative && tech.overrideNativeAudioTracks && tech.overrideNativeVideoTracks) {
+      tech.overrideNativeAudioTracks(true);
+      tech.overrideNativeVideoTracks(true);
+    } else if (this.options_.overrideNative && (tech.featuresNativeVideoTracks || tech.featuresNativeAudioTracks)) {
+      // overriding native VHS only works if audio tracks have been emulated
+      // error early if we're misconfigured
+      throw new Error('Overriding native VHS requires emulated tracks. ' + 'See https://git.io/vMpjB');
+    } // listen for fullscreenchange events for this player so that we
+    // can adjust our quality selection quickly
+
+    this.on(document__default["default"], ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'], event => {
+      const fullscreenElement = document__default["default"].fullscreenElement || document__default["default"].webkitFullscreenElement || document__default["default"].mozFullScreenElement || document__default["default"].msFullscreenElement;
+      if (fullscreenElement && fullscreenElement.contains(this.tech_.el())) {
+        this.playlistController_.fastQualityChange_();
+      } else {
+        // When leaving fullscreen, since the in page pixel dimensions should be smaller
+        // than full screen, see if there should be a rendition switch down to preserve
+        // bandwidth.
+        this.playlistController_.checkABR_();
+      }
+    });
+    this.on(this.tech_, 'seeking', function () {
+      if (this.ignoreNextSeekingEvent_) {
+        this.ignoreNextSeekingEvent_ = false;
+        return;
+      }
+      this.setCurrentTime(this.tech_.currentTime());
+    });
+    this.on(this.tech_, 'error', function () {
+      // verify that the error was real and we are loaded
+      // enough to have pc loaded.
+      if (this.tech_.error() && this.playlistController_) {
+        this.playlistController_.pauseLoading();
+      }
+    });
+    this.on(this.tech_, 'play', this.play);
+  }
+  /**
+   * Set VHS options based on options from configuration, as well as partial
+   * options to be passed at a later time.
+   *
+   * @param {Object} options A partial chunk of config options
+   */
+
+  setOptions_(options = {}) {
+    this.options_ = merge(this.options_, options); // defaults
+
+    this.options_.withCredentials = this.options_.withCredentials || false;
+    this.options_.limitRenditionByPlayerDimensions = this.options_.limitRenditionByPlayerDimensions === false ? false : true;
+    this.options_.useDevicePixelRatio = this.options_.useDevicePixelRatio || false;
+    this.options_.useBandwidthFromLocalStorage = typeof this.source_.useBandwidthFromLocalStorage !== 'undefined' ? this.source_.useBandwidthFromLocalStorage : this.options_.useBandwidthFromLocalStorage || false;
+    this.options_.useForcedSubtitles = this.options_.useForcedSubtitles || false;
+    this.options_.useNetworkInformationApi = this.options_.useNetworkInformationApi || false;
+    this.options_.useDtsForTimestampOffset = this.options_.useDtsForTimestampOffset || false;
+    this.options_.customTagParsers = this.options_.customTagParsers || [];
+    this.options_.customTagMappers = this.options_.customTagMappers || [];
+    this.options_.cacheEncryptionKeys = this.options_.cacheEncryptionKeys || false;
+    this.options_.llhls = this.options_.llhls === false ? false : true;
+    this.options_.bufferBasedABR = this.options_.bufferBasedABR || false;
+    if (typeof this.options_.playlistExclusionDuration !== 'number') {
+      this.options_.playlistExclusionDuration = 60;
+    }
+    if (typeof this.options_.bandwidth !== 'number') {
+      if (this.options_.useBandwidthFromLocalStorage) {
+        const storedObject = getVhsLocalStorage();
+        if (storedObject && storedObject.bandwidth) {
+          this.options_.bandwidth = storedObject.bandwidth;
+          this.tech_.trigger({
+            type: 'usage',
+            name: 'vhs-bandwidth-from-local-storage'
+          });
+        }
+        if (storedObject && storedObject.throughput) {
+          this.options_.throughput = storedObject.throughput;
+          this.tech_.trigger({
+            type: 'usage',
+            name: 'vhs-throughput-from-local-storage'
+          });
+        }
+      }
+    } // if bandwidth was not set by options or pulled from local storage, start playlist
+    // selection at a reasonable bandwidth
+
+    if (typeof this.options_.bandwidth !== 'number') {
+      this.options_.bandwidth = Config.INITIAL_BANDWIDTH;
+    } // If the bandwidth number is unchanged from the initial setting
+    // then this takes precedence over the enableLowInitialPlaylist option
+
+    this.options_.enableLowInitialPlaylist = this.options_.enableLowInitialPlaylist && this.options_.bandwidth === Config.INITIAL_BANDWIDTH; // grab options passed to player.src
+
+    ['withCredentials', 'useDevicePixelRatio', 'customPixelRatio', 'limitRenditionByPlayerDimensions', 'bandwidth', 'customTagParsers', 'customTagMappers', 'cacheEncryptionKeys', 'playlistSelector', 'initialPlaylistSelector', 'bufferBasedABR', 'liveRangeSafeTimeDelta', 'llhls', 'useForcedSubtitles', 'useNetworkInformationApi', 'useDtsForTimestampOffset', 'exactManifestTimings', 'leastPixelDiffSelector'].forEach(option => {
+      if (typeof this.source_[option] !== 'undefined') {
+        this.options_[option] = this.source_[option];
+      }
+    });
+    this.limitRenditionByPlayerDimensions = this.options_.limitRenditionByPlayerDimensions;
+    this.useDevicePixelRatio = this.options_.useDevicePixelRatio;
+    const customPixelRatio = this.options_.customPixelRatio; // Ensure the custom pixel ratio is a number greater than or equal to 0
+
+    if (typeof customPixelRatio === 'number' && customPixelRatio >= 0) {
+      this.customPixelRatio = customPixelRatio;
+    }
+  } // alias for public method to set options
+
+  setOptions(options = {}) {
+    this.setOptions_(options);
+  }
+  /**
+   * called when player.src gets called, handle a new source
+   *
+   * @param {Object} src the source object to handle
+   */
+
+  src(src, type) {
+    // do nothing if the src is falsey
+    if (!src) {
+      return;
+    }
+    this.setOptions_(); // add main playlist controller options
+
+    this.options_.src = expandDataUri(this.source_.src);
+    this.options_.tech = this.tech_;
+    this.options_.externVhs = Vhs;
+    this.options_.sourceType = mediaTypes_js.simpleTypeFromSourceType(type); // Whenever we seek internally, we should update the tech
+
+    this.options_.seekTo = time => {
+      this.tech_.setCurrentTime(time);
+    };
+    this.playlistController_ = new PlaylistController(this.options_);
+    const playbackWatcherOptions = merge({
+      liveRangeSafeTimeDelta: SAFE_TIME_DELTA
+    }, this.options_, {
+      seekable: () => this.seekable(),
+      media: () => this.playlistController_.media(),
+      playlistController: this.playlistController_
+    });
+    this.playbackWatcher_ = new PlaybackWatcher(playbackWatcherOptions);
+    this.playlistController_.on('error', () => {
+      const player = videojs.players[this.tech_.options_.playerId];
+      let error = this.playlistController_.error;
+      if (typeof error === 'object' && !error.code) {
+        error.code = 3;
+      } else if (typeof error === 'string') {
+        error = {
+          message: error,
+          code: 3
+        };
+      }
+      player.error(error);
+    });
+    const defaultSelector = this.options_.bufferBasedABR ? Vhs.movingAverageBandwidthSelector(0.55) : Vhs.STANDARD_PLAYLIST_SELECTOR; // `this` in selectPlaylist should be the VhsHandler for backwards
+    // compatibility with < v2
+
+    this.playlistController_.selectPlaylist = this.selectPlaylist ? this.selectPlaylist.bind(this) : defaultSelector.bind(this);
+    this.playlistController_.selectInitialPlaylist = Vhs.INITIAL_PLAYLIST_SELECTOR.bind(this); // re-expose some internal objects for backwards compatibility with < v2
+
+    this.playlists = this.playlistController_.mainPlaylistLoader_;
+    this.mediaSource = this.playlistController_.mediaSource; // Proxy assignment of some properties to the main playlist
+    // controller. Using a custom property for backwards compatibility
+    // with < v2
+
+    Object.defineProperties(this, {
+      selectPlaylist: {
+        get() {
+          return this.playlistController_.selectPlaylist;
+        },
+        set(selectPlaylist) {
+          this.playlistController_.selectPlaylist = selectPlaylist.bind(this);
+        }
+      },
+      throughput: {
+        get() {
+          return this.playlistController_.mainSegmentLoader_.throughput.rate;
+        },
+        set(throughput) {
+          this.playlistController_.mainSegmentLoader_.throughput.rate = throughput; // By setting `count` to 1 the throughput value becomes the starting value
+          // for the cumulative average
+
+          this.playlistController_.mainSegmentLoader_.throughput.count = 1;
+        }
+      },
+      bandwidth: {
+        get() {
+          let playerBandwidthEst = this.playlistController_.mainSegmentLoader_.bandwidth;
+          const networkInformation = window__default["default"].navigator.connection || window__default["default"].navigator.mozConnection || window__default["default"].navigator.webkitConnection;
+          const tenMbpsAsBitsPerSecond = 10e6;
+          if (this.options_.useNetworkInformationApi && networkInformation) {
+            // downlink returns Mbps
+            // https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/downlink
+            const networkInfoBandwidthEstBitsPerSec = networkInformation.downlink * 1000 * 1000; // downlink maxes out at 10 Mbps. In the event that both networkInformationApi and the player
+            // estimate a bandwidth greater than 10 Mbps, use the larger of the two estimates to ensure that
+            // high quality streams are not filtered out.
+
+            if (networkInfoBandwidthEstBitsPerSec >= tenMbpsAsBitsPerSecond && playerBandwidthEst >= tenMbpsAsBitsPerSecond) {
+              playerBandwidthEst = Math.max(playerBandwidthEst, networkInfoBandwidthEstBitsPerSec);
+            } else {
+              playerBandwidthEst = networkInfoBandwidthEstBitsPerSec;
+            }
+          }
+          return playerBandwidthEst;
+        },
+        set(bandwidth) {
+          this.playlistController_.mainSegmentLoader_.bandwidth = bandwidth; // setting the bandwidth manually resets the throughput counter
+          // `count` is set to zero that current value of `rate` isn't included
+          // in the cumulative average
+
+          this.playlistController_.mainSegmentLoader_.throughput = {
+            rate: 0,
+            count: 0
+          };
+        }
+      },
+      /**
+       * `systemBandwidth` is a combination of two serial processes bit-rates. The first
+       * is the network bitrate provided by `bandwidth` and the second is the bitrate of
+       * the entire process after that - decryption, transmuxing, and appending - provided
+       * by `throughput`.
+       *
+       * Since the two process are serial, the overall system bandwidth is given by:
+       *   sysBandwidth = 1 / (1 / bandwidth + 1 / throughput)
+       */
+      systemBandwidth: {
+        get() {
+          const invBandwidth = 1 / (this.bandwidth || 1);
+          let invThroughput;
+          if (this.throughput > 0) {
+            invThroughput = 1 / this.throughput;
+          } else {
+            invThroughput = 0;
+          }
+          const systemBitrate = Math.floor(1 / (invBandwidth + invThroughput));
+          return systemBitrate;
+        },
+        set() {
+          videojs.log.error('The "systemBandwidth" property is read-only');
+        }
+      }
+    });
+    if (this.options_.bandwidth) {
+      this.bandwidth = this.options_.bandwidth;
+    }
+    if (this.options_.throughput) {
+      this.throughput = this.options_.throughput;
+    }
+    Object.defineProperties(this.stats, {
+      bandwidth: {
+        get: () => this.bandwidth || 0,
+        enumerable: true
+      },
+      mediaRequests: {
+        get: () => this.playlistController_.mediaRequests_() || 0,
+        enumerable: true
+      },
+      mediaRequestsAborted: {
+        get: () => this.playlistController_.mediaRequestsAborted_() || 0,
+        enumerable: true
+      },
+      mediaRequestsTimedout: {
+        get: () => this.playlistController_.mediaRequestsTimedout_() || 0,
+        enumerable: true
+      },
+      mediaRequestsErrored: {
+        get: () => this.playlistController_.mediaRequestsErrored_() || 0,
+        enumerable: true
+      },
+      mediaTransferDuration: {
+        get: () => this.playlistController_.mediaTransferDuration_() || 0,
+        enumerable: true
+      },
+      mediaBytesTransferred: {
+        get: () => this.playlistController_.mediaBytesTransferred_() || 0,
+        enumerable: true
+      },
+      mediaSecondsLoaded: {
+        get: () => this.playlistController_.mediaSecondsLoaded_() || 0,
+        enumerable: true
+      },
+      mediaAppends: {
+        get: () => this.playlistController_.mediaAppends_() || 0,
+        enumerable: true
+      },
+      mainAppendsToLoadedData: {
+        get: () => this.playlistController_.mainAppendsToLoadedData_() || 0,
+        enumerable: true
+      },
+      audioAppendsToLoadedData: {
+        get: () => this.playlistController_.audioAppendsToLoadedData_() || 0,
+        enumerable: true
+      },
+      appendsToLoadedData: {
+        get: () => this.playlistController_.appendsToLoadedData_() || 0,
+        enumerable: true
+      },
+      timeToLoadedData: {
+        get: () => this.playlistController_.timeToLoadedData_() || 0,
+        enumerable: true
+      },
+      buffered: {
+        get: () => timeRangesToArray(this.tech_.buffered()),
+        enumerable: true
+      },
+      currentTime: {
+        get: () => this.tech_.currentTime(),
+        enumerable: true
+      },
+      currentSource: {
+        get: () => this.tech_.currentSource_,
+        enumerable: true
+      },
+      currentTech: {
+        get: () => this.tech_.name_,
+        enumerable: true
+      },
+      duration: {
+        get: () => this.tech_.duration(),
+        enumerable: true
+      },
+      main: {
+        get: () => this.playlists.main,
+        enumerable: true
+      },
+      playerDimensions: {
+        get: () => this.tech_.currentDimensions(),
+        enumerable: true
+      },
+      seekable: {
+        get: () => timeRangesToArray(this.tech_.seekable()),
+        enumerable: true
+      },
+      timestamp: {
+        get: () => Date.now(),
+        enumerable: true
+      },
+      videoPlaybackQuality: {
+        get: () => this.tech_.getVideoPlaybackQuality(),
+        enumerable: true
+      }
+    });
+    this.tech_.one('canplay', this.playlistController_.setupFirstPlay.bind(this.playlistController_));
+    this.tech_.on('bandwidthupdate', () => {
+      if (this.options_.useBandwidthFromLocalStorage) {
+        updateVhsLocalStorage({
+          bandwidth: this.bandwidth,
+          throughput: Math.round(this.throughput)
+        });
+      }
+    });
+    this.playlistController_.on('selectedinitialmedia', () => {
+      // Add the manual rendition mix-in to VhsHandler
+      renditionSelectionMixin(this);
+    });
+    this.playlistController_.sourceUpdater_.on('createdsourcebuffers', () => {
+      this.setupEme_();
+    }); // the bandwidth of the primary segment loader is our best
+    // estimate of overall bandwidth
+
+    this.on(this.playlistController_, 'progress', function () {
+      this.tech_.trigger('progress');
+    }); // In the live case, we need to ignore the very first `seeking` event since
+    // that will be the result of the seek-to-live behavior
+
+    this.on(this.playlistController_, 'firstplay', function () {
+      this.ignoreNextSeekingEvent_ = true;
+    });
+    this.setupQualityLevels_(); // do nothing if the tech has been disposed already
+    // this can occur if someone sets the src in player.ready(), for instance
+
+    if (!this.tech_.el()) {
+      return;
+    }
+    this.mediaSourceUrl_ = window__default["default"].URL.createObjectURL(this.playlistController_.mediaSource);
+    this.tech_.src(this.mediaSourceUrl_);
+  }
+  createKeySessions_() {
+    const audioPlaylistLoader = this.playlistController_.mediaTypes_.AUDIO.activePlaylistLoader;
+    this.logger_('waiting for EME key session creation');
+    waitForKeySessionCreation({
+      player: this.player_,
+      sourceKeySystems: this.source_.keySystems,
+      audioMedia: audioPlaylistLoader && audioPlaylistLoader.media(),
+      mainPlaylists: this.playlists.main.playlists
+    }).then(() => {
+      this.logger_('created EME key session');
+      this.playlistController_.sourceUpdater_.initializedEme();
+    }).catch(err => {
+      this.logger_('error while creating EME key session', err);
+      this.player_.error({
+        message: 'Failed to initialize media keys for EME',
+        code: 3,
+        metadata: {
+          errorType: videojs.Error.EMEKeySessionCreationError
+        }
+      });
+    });
+  }
+  handleWaitingForKey_() {
+    // If waitingforkey is fired, it's possible that the data that's necessary to retrieve
+    // the key is in the manifest. While this should've happened on initial source load, it
+    // may happen again in live streams where the keys change, and the manifest info
+    // reflects the update.
+    //
+    // Because videojs-contrib-eme compares the PSSH data we send to that of PSSH data it's
+    // already requested keys for, we don't have to worry about this generating extraneous
+    // requests.
+    this.logger_('waitingforkey fired, attempting to create any new key sessions');
+    this.createKeySessions_();
+  }
+  /**
+   * If necessary and EME is available, sets up EME options and waits for key session
+   * creation.
+   *
+   * This function also updates the source updater so taht it can be used, as for some
+   * browsers, EME must be configured before content is appended (if appending unencrypted
+   * content before encrypted content).
+   */
+
+  setupEme_() {
+    const audioPlaylistLoader = this.playlistController_.mediaTypes_.AUDIO.activePlaylistLoader;
+    const didSetupEmeOptions = setupEmeOptions({
+      player: this.player_,
+      sourceKeySystems: this.source_.keySystems,
+      media: this.playlists.media(),
+      audioMedia: audioPlaylistLoader && audioPlaylistLoader.media()
+    });
+    this.player_.tech_.on('keystatuschange', e => {
+      this.playlistController_.updatePlaylistByKeyStatus(e.keyId, e.status);
+    });
+    this.handleWaitingForKey_ = this.handleWaitingForKey_.bind(this);
+    this.player_.tech_.on('waitingforkey', this.handleWaitingForKey_);
+    if (!didSetupEmeOptions) {
+      // If EME options were not set up, we've done all we could to initialize EME.
+      this.playlistController_.sourceUpdater_.initializedEme();
+      return;
+    }
+    this.createKeySessions_();
+  }
+  /**
+   * Initializes the quality levels and sets listeners to update them.
+   *
+   * @method setupQualityLevels_
+   * @private
+   */
+
+  setupQualityLevels_() {
+    const player = videojs.players[this.tech_.options_.playerId]; // if there isn't a player or there isn't a qualityLevels plugin
+    // or qualityLevels_ listeners have already been setup, do nothing.
+
+    if (!player || !player.qualityLevels || this.qualityLevels_) {
+      return;
+    }
+    this.qualityLevels_ = player.qualityLevels();
+    this.playlistController_.on('selectedinitialmedia', () => {
+      handleVhsLoadedMetadata(this.qualityLevels_, this);
+    });
+    this.playlists.on('mediachange', () => {
+      handleVhsMediaChange(this.qualityLevels_, this.playlists);
+    });
+  }
+  /**
+   * return the version
+   */
+
+  static version() {
+    return {
+      '@videojs/http-streaming': version$4,
+      'mux.js': version$3,
+      'mpd-parser': version$2,
+      'm3u8-parser': version$1,
+      'aes-decrypter': version
+    };
+  }
+  /**
+   * return the version
+   */
+
+  version() {
+    return this.constructor.version();
+  }
+  canChangeType() {
+    return SourceUpdater.canChangeType();
+  }
+  /**
+   * Begin playing the video.
+   */
+
+  play() {
+    this.playlistController_.play();
+  }
+  /**
+   * a wrapper around the function in PlaylistController
+   */
+
+  setCurrentTime(currentTime) {
+    this.playlistController_.setCurrentTime(currentTime);
+  }
+  /**
+   * a wrapper around the function in PlaylistController
+   */
+
+  duration() {
+    return this.playlistController_.duration();
+  }
+  /**
+   * a wrapper around the function in PlaylistController
+   */
+
+  seekable() {
+    return this.playlistController_.seekable();
+  }
+  /**
+   * Abort all outstanding work and cleanup.
+   */
+
+  dispose() {
+    if (this.playbackWatcher_) {
+      this.playbackWatcher_.dispose();
+    }
+    if (this.playlistController_) {
+      this.playlistController_.dispose();
+    }
+    if (this.qualityLevels_) {
+      this.qualityLevels_.dispose();
+    }
+    if (this.tech_ && this.tech_.vhs) {
+      delete this.tech_.vhs;
+    }
+    if (this.mediaSourceUrl_ && window__default["default"].URL.revokeObjectURL) {
+      window__default["default"].URL.revokeObjectURL(this.mediaSourceUrl_);
+      this.mediaSourceUrl_ = null;
+    }
+    if (this.tech_) {
+      this.tech_.off('waitingforkey', this.handleWaitingForKey_);
+    }
+    super.dispose();
+  }
+  convertToProgramTime(time, callback) {
+    return getProgramTime({
+      playlist: this.playlistController_.media(),
+      time,
+      callback
+    });
+  } // the player must be playing before calling this
+
+  seekToProgramTime(programTime, callback, pauseAfterSeek = true, retryCount = 2) {
+    return seekToProgramTime({
+      programTime,
+      playlist: this.playlistController_.media(),
+      retryCount,
+      pauseAfterSeek,
+      seekTo: this.options_.seekTo,
+      tech: this.options_.tech,
+      callback
+    });
+  }
+  /**
+   * Adds the onRequest, onResponse, offRequest and offResponse functions
+   * to the VhsHandler xhr Object.
+   */
+
+  setupXhrHooks_() {
+    /**
+     * A player function for setting an onRequest hook
+     *
+     * @param {function} callback for request modifiction
+     */
+    this.xhr.onRequest = callback => {
+      addOnRequestHook(this.xhr, callback);
+    };
+    /**
+     * A player function for setting an onResponse hook
+     *
+     * @param {callback} callback for response data retrieval
+     */
+
+    this.xhr.onResponse = callback => {
+      addOnResponseHook(this.xhr, callback);
+    };
+    /**
+     * Deletes a player onRequest callback if it exists
+     *
+     * @param {function} callback to delete from the player set
+     */
+
+    this.xhr.offRequest = callback => {
+      removeOnRequestHook(this.xhr, callback);
+    };
+    /**
+     * Deletes a player onResponse callback if it exists
+     *
+     * @param {function} callback to delete from the player set
+     */
+
+    this.xhr.offResponse = callback => {
+      removeOnResponseHook(this.xhr, callback);
+    }; // Trigger an event on the player to notify the user that vhs is ready to set xhr hooks.
+    // This allows hooks to be set before the source is set to vhs when handleSource is called.
+
+    this.player_.trigger('xhr-hooks-ready');
+  }
+}
+/**
+ * The Source Handler object, which informs video.js what additional
+ * MIME types are supported and sets up playback. It is registered
+ * automatically to the appropriate tech based on the capabilities of
+ * the browser it is running in. It is not necessary to use or modify
+ * this object in normal usage.
+ */
+
+const VhsSourceHandler = {
+  name: 'videojs-http-streaming',
+  VERSION: version$4,
+  canHandleSource(srcObj, options = {}) {
+    const localOptions = merge(videojs.options, options);
+    return VhsSourceHandler.canPlayType(srcObj.type, localOptions);
+  },
+  handleSource(source, tech, options = {}) {
+    const localOptions = merge(videojs.options, options);
+    tech.vhs = new VhsHandler(source, tech, localOptions);
+    tech.vhs.xhr = xhrFactory();
+    tech.vhs.setupXhrHooks_();
+    tech.vhs.src(source.src, source.type);
+    return tech.vhs;
+  },
+  canPlayType(type, options) {
+    const simpleType = mediaTypes_js.simpleTypeFromSourceType(type);
+    if (!simpleType) {
+      return '';
+    }
+    const overrideNative = VhsSourceHandler.getOverrideNative(options);
+    const supportsTypeNatively = Vhs.supportsTypeNatively(simpleType);
+    const canUseMsePlayback = !supportsTypeNatively || overrideNative;
+    return canUseMsePlayback ? 'maybe' : '';
+  },
+  getOverrideNative(options = {}) {
+    const {
+      vhs = {}
+    } = options;
+    const defaultOverrideNative = !(videojs.browser.IS_ANY_SAFARI || videojs.browser.IS_IOS);
+    const {
+      overrideNative = defaultOverrideNative
+    } = vhs;
+    return overrideNative;
+  }
+};
+/**
+ * Check to see if the native MediaSource object exists and supports
+ * an MP4 container with both H.264 video and AAC-LC audio.
+ *
+ * @return {boolean} if  native media sources are supported
+ */
+
+const supportsNativeMediaSources = () => {
+  return codecs_js.browserSupportsCodec('avc1.4d400d,mp4a.40.2');
+}; // register source handlers with the appropriate techs
+
+if (supportsNativeMediaSources()) {
+  videojs.getTech('Html5').registerSourceHandler(VhsSourceHandler, 0);
+}
+videojs.VhsHandler = VhsHandler;
+videojs.VhsSourceHandler = VhsSourceHandler;
+videojs.Vhs = Vhs;
+if (!videojs.use) {
+  videojs.registerComponent('Vhs', Vhs);
+}
+videojs.options.vhs = videojs.options.vhs || {};
+if (!videojs.getPlugin || !videojs.getPlugin('reloadSourceOnError')) {
+  videojs.registerPlugin('reloadSourceOnError', reloadSourceOnError);
+}
+
+module.exports = videojs;
diff --git a/priv/static/video.js/video.es.js b/priv/static/video.js/video.es.js
new file mode 100644
index 0000000..2cc0305
--- /dev/null
+++ b/priv/static/video.js/video.es.js
@@ -0,0 +1,52506 @@
+/**
+ * @license
+ * Video.js 8.12.0 <http://videojs.com/>
+ * Copyright Brightcove, Inc. <https://www.brightcove.com/>
+ * Available under Apache License Version 2.0
+ * <https://github.com/videojs/video.js/blob/main/LICENSE>
+ *
+ * Includes vtt.js <https://github.com/mozilla/vtt.js>
+ * Available under Apache License Version 2.0
+ * <https://github.com/mozilla/vtt.js/blob/main/LICENSE>
+ */
+
+import window$1 from 'global/window';
+import document from 'global/document';
+import keycode from 'keycode';
+import safeParseTuple from 'safe-json-parse/tuple';
+import XHR from '@videojs/xhr';
+import vtt from 'videojs-vtt.js';
+import _extends from '@babel/runtime/helpers/extends';
+import _resolveUrl from '@videojs/vhs-utils/es/resolve-url.js';
+import { Parser } from 'm3u8-parser';
+import { DEFAULT_VIDEO_CODEC, DEFAULT_AUDIO_CODEC, parseCodecs, muxerSupportsCodec, browserSupportsCodec, translateLegacyCodec, codecsFromDefault, isAudioCodec, getMimeForCodec } from '@videojs/vhs-utils/es/codecs.js';
+import { simpleTypeFromSourceType } from '@videojs/vhs-utils/es/media-types.js';
+import { isArrayBufferView, concatTypedArrays, stringToBytes, toUint8 } from '@videojs/vhs-utils/es/byte-helpers';
+import { generateSidxKey, parseUTCTiming, parse, addSidxSegmentsToPlaylist } from 'mpd-parser';
+import parseSidx from 'mux.js/lib/tools/parse-sidx';
+import { getId3Offset } from '@videojs/vhs-utils/es/id3-helpers';
+import { detectContainerForBytes, isLikelyFmp4MediaSegment } from '@videojs/vhs-utils/es/containers';
+import { ONE_SECOND_IN_TS } from 'mux.js/lib/utils/clock';
+
+var version$6 = "8.12.0";
+
+/**
+ * An Object that contains lifecycle hooks as keys which point to an array
+ * of functions that are run when a lifecycle is triggered
+ *
+ * @private
+ */
+const hooks_ = {};
+
+/**
+ * Get a list of hooks for a specific lifecycle
+ *
+ * @param  {string} type
+ *         the lifecycle to get hooks from
+ *
+ * @param  {Function|Function[]} [fn]
+ *         Optionally add a hook (or hooks) to the lifecycle that your are getting.
+ *
+ * @return {Array}
+ *         an array of hooks, or an empty array if there are none.
+ */
+const hooks = function (type, fn) {
+  hooks_[type] = hooks_[type] || [];
+  if (fn) {
+    hooks_[type] = hooks_[type].concat(fn);
+  }
+  return hooks_[type];
+};
+
+/**
+ * Add a function hook to a specific videojs lifecycle.
+ *
+ * @param {string} type
+ *        the lifecycle to hook the function to.
+ *
+ * @param {Function|Function[]}
+ *        The function or array of functions to attach.
+ */
+const hook = function (type, fn) {
+  hooks(type, fn);
+};
+
+/**
+ * Remove a hook from a specific videojs lifecycle.
+ *
+ * @param  {string} type
+ *         the lifecycle that the function hooked to
+ *
+ * @param  {Function} fn
+ *         The hooked function to remove
+ *
+ * @return {boolean}
+ *         The function that was removed or undef
+ */
+const removeHook = function (type, fn) {
+  const index = hooks(type).indexOf(fn);
+  if (index <= -1) {
+    return false;
+  }
+  hooks_[type] = hooks_[type].slice();
+  hooks_[type].splice(index, 1);
+  return true;
+};
+
+/**
+ * Add a function hook that will only run once to a specific videojs lifecycle.
+ *
+ * @param {string} type
+ *        the lifecycle to hook the function to.
+ *
+ * @param {Function|Function[]}
+ *        The function or array of functions to attach.
+ */
+const hookOnce = function (type, fn) {
+  hooks(type, [].concat(fn).map(original => {
+    const wrapper = (...args) => {
+      removeHook(type, wrapper);
+      return original(...args);
+    };
+    return wrapper;
+  }));
+};
+
+/**
+ * @file fullscreen-api.js
+ * @module fullscreen-api
+ */
+
+/**
+ * Store the browser-specific methods for the fullscreen API.
+ *
+ * @type {Object}
+ * @see [Specification]{@link https://fullscreen.spec.whatwg.org}
+ * @see [Map Approach From Screenfull.js]{@link https://github.com/sindresorhus/screenfull.js}
+ */
+const FullscreenApi = {
+  prefixed: true
+};
+
+// browser API methods
+const apiMap = [['requestFullscreen', 'exitFullscreen', 'fullscreenElement', 'fullscreenEnabled', 'fullscreenchange', 'fullscreenerror', 'fullscreen'],
+// WebKit
+['webkitRequestFullscreen', 'webkitExitFullscreen', 'webkitFullscreenElement', 'webkitFullscreenEnabled', 'webkitfullscreenchange', 'webkitfullscreenerror', '-webkit-full-screen']];
+const specApi = apiMap[0];
+let browserApi;
+
+// determine the supported set of functions
+for (let i = 0; i < apiMap.length; i++) {
+  // check for exitFullscreen function
+  if (apiMap[i][1] in document) {
+    browserApi = apiMap[i];
+    break;
+  }
+}
+
+// map the browser API names to the spec API names
+if (browserApi) {
+  for (let i = 0; i < browserApi.length; i++) {
+    FullscreenApi[specApi[i]] = browserApi[i];
+  }
+  FullscreenApi.prefixed = browserApi[0] !== specApi[0];
+}
+
+/**
+ * @file create-logger.js
+ * @module create-logger
+ */
+
+// This is the private tracking variable for the logging history.
+let history = [];
+
+/**
+ * Log messages to the console and history based on the type of message
+ *
+ * @private
+ * @param  {string} name
+ *         The name of the console method to use.
+ *
+ * @param  {Object} log
+ *         The arguments to be passed to the matching console method.
+ *
+ * @param {string} [styles]
+ *        styles for name
+ */
+const LogByTypeFactory = (name, log, styles) => (type, level, args) => {
+  const lvl = log.levels[level];
+  const lvlRegExp = new RegExp(`^(${lvl})$`);
+  let resultName = name;
+  if (type !== 'log') {
+    // Add the type to the front of the message when it's not "log".
+    args.unshift(type.toUpperCase() + ':');
+  }
+  if (styles) {
+    resultName = `%c${name}`;
+    args.unshift(styles);
+  }
+
+  // Add console prefix after adding to history.
+  args.unshift(resultName + ':');
+
+  // Add a clone of the args at this point to history.
+  if (history) {
+    history.push([].concat(args));
+
+    // only store 1000 history entries
+    const splice = history.length - 1000;
+    history.splice(0, splice > 0 ? splice : 0);
+  }
+
+  // If there's no console then don't try to output messages, but they will
+  // still be stored in history.
+  if (!window$1.console) {
+    return;
+  }
+
+  // Was setting these once outside of this function, but containing them
+  // in the function makes it easier to test cases where console doesn't exist
+  // when the module is executed.
+  let fn = window$1.console[type];
+  if (!fn && type === 'debug') {
+    // Certain browsers don't have support for console.debug. For those, we
+    // should default to the closest comparable log.
+    fn = window$1.console.info || window$1.console.log;
+  }
+
+  // Bail out if there's no console or if this type is not allowed by the
+  // current logging level.
+  if (!fn || !lvl || !lvlRegExp.test(type)) {
+    return;
+  }
+  fn[Array.isArray(args) ? 'apply' : 'call'](window$1.console, args);
+};
+function createLogger$1(name, delimiter = ':', styles = '') {
+  // This is the private tracking variable for logging level.
+  let level = 'info';
+
+  // the curried logByType bound to the specific log and history
+  let logByType;
+
+  /**
+   * Logs plain debug messages. Similar to `console.log`.
+   *
+   * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+   * of our JSDoc template, we cannot properly document this as both a function
+   * and a namespace, so its function signature is documented here.
+   *
+   * #### Arguments
+   * ##### *args
+   * *[]
+   *
+   * Any combination of values that could be passed to `console.log()`.
+   *
+   * #### Return Value
+   *
+   * `undefined`
+   *
+   * @namespace
+   * @param    {...*} args
+   *           One or more messages or objects that should be logged.
+   */
+  const log = function (...args) {
+    logByType('log', level, args);
+  };
+
+  // This is the logByType helper that the logging methods below use
+  logByType = LogByTypeFactory(name, log, styles);
+
+  /**
+   * Create a new subLogger which chains the old name to the new name.
+   *
+   * For example, doing `videojs.log.createLogger('player')` and then using that logger will log the following:
+   * ```js
+   *  mylogger('foo');
+   *  // > VIDEOJS: player: foo
+   * ```
+   *
+   * @param {string} subName
+   *        The name to add call the new logger
+   * @param {string} [subDelimiter]
+   *        Optional delimiter
+   * @param {string} [subStyles]
+   *        Optional styles
+   * @return {Object}
+   */
+  log.createLogger = (subName, subDelimiter, subStyles) => {
+    const resultDelimiter = subDelimiter !== undefined ? subDelimiter : delimiter;
+    const resultStyles = subStyles !== undefined ? subStyles : styles;
+    const resultName = `${name} ${resultDelimiter} ${subName}`;
+    return createLogger$1(resultName, resultDelimiter, resultStyles);
+  };
+
+  /**
+   * Create a new logger.
+   *
+   * @param {string} newName
+   *        The name for the new logger
+   * @param {string} [newDelimiter]
+   *        Optional delimiter
+   * @param {string} [newStyles]
+   *        Optional styles
+   * @return {Object}
+   */
+  log.createNewLogger = (newName, newDelimiter, newStyles) => {
+    return createLogger$1(newName, newDelimiter, newStyles);
+  };
+
+  /**
+   * Enumeration of available logging levels, where the keys are the level names
+   * and the values are `|`-separated strings containing logging methods allowed
+   * in that logging level. These strings are used to create a regular expression
+   * matching the function name being called.
+   *
+   * Levels provided by Video.js are:
+   *
+   * - `off`: Matches no calls. Any value that can be cast to `false` will have
+   *   this effect. The most restrictive.
+   * - `all`: Matches only Video.js-provided functions (`debug`, `log`,
+   *   `log.warn`, and `log.error`).
+   * - `debug`: Matches `log.debug`, `log`, `log.warn`, and `log.error` calls.
+   * - `info` (default): Matches `log`, `log.warn`, and `log.error` calls.
+   * - `warn`: Matches `log.warn` and `log.error` calls.
+   * - `error`: Matches only `log.error` calls.
+   *
+   * @type {Object}
+   */
+  log.levels = {
+    all: 'debug|log|warn|error',
+    off: '',
+    debug: 'debug|log|warn|error',
+    info: 'log|warn|error',
+    warn: 'warn|error',
+    error: 'error',
+    DEFAULT: level
+  };
+
+  /**
+   * Get or set the current logging level.
+   *
+   * If a string matching a key from {@link module:log.levels} is provided, acts
+   * as a setter.
+   *
+   * @param  {'all'|'debug'|'info'|'warn'|'error'|'off'} [lvl]
+   *         Pass a valid level to set a new logging level.
+   *
+   * @return {string}
+   *         The current logging level.
+   */
+  log.level = lvl => {
+    if (typeof lvl === 'string') {
+      if (!log.levels.hasOwnProperty(lvl)) {
+        throw new Error(`"${lvl}" in not a valid log level`);
+      }
+      level = lvl;
+    }
+    return level;
+  };
+
+  /**
+   * Returns an array containing everything that has been logged to the history.
+   *
+   * This array is a shallow clone of the internal history record. However, its
+   * contents are _not_ cloned; so, mutating objects inside this array will
+   * mutate them in history.
+   *
+   * @return {Array}
+   */
+  log.history = () => history ? [].concat(history) : [];
+
+  /**
+   * Allows you to filter the history by the given logger name
+   *
+   * @param {string} fname
+   *        The name to filter by
+   *
+   * @return {Array}
+   *         The filtered list to return
+   */
+  log.history.filter = fname => {
+    return (history || []).filter(historyItem => {
+      // if the first item in each historyItem includes `fname`, then it's a match
+      return new RegExp(`.*${fname}.*`).test(historyItem[0]);
+    });
+  };
+
+  /**
+   * Clears the internal history tracking, but does not prevent further history
+   * tracking.
+   */
+  log.history.clear = () => {
+    if (history) {
+      history.length = 0;
+    }
+  };
+
+  /**
+   * Disable history tracking if it is currently enabled.
+   */
+  log.history.disable = () => {
+    if (history !== null) {
+      history.length = 0;
+      history = null;
+    }
+  };
+
+  /**
+   * Enable history tracking if it is currently disabled.
+   */
+  log.history.enable = () => {
+    if (history === null) {
+      history = [];
+    }
+  };
+
+  /**
+   * Logs error messages. Similar to `console.error`.
+   *
+   * @param {...*} args
+   *        One or more messages or objects that should be logged as an error
+   */
+  log.error = (...args) => logByType('error', level, args);
+
+  /**
+   * Logs warning messages. Similar to `console.warn`.
+   *
+   * @param {...*} args
+   *        One or more messages or objects that should be logged as a warning.
+   */
+  log.warn = (...args) => logByType('warn', level, args);
+
+  /**
+   * Logs debug messages. Similar to `console.debug`, but may also act as a comparable
+   * log if `console.debug` is not available
+   *
+   * @param {...*} args
+   *        One or more messages or objects that should be logged as debug.
+   */
+  log.debug = (...args) => logByType('debug', level, args);
+  return log;
+}
+
+/**
+ * @file log.js
+ * @module log
+ */
+const log$1 = createLogger$1('VIDEOJS');
+const createLogger = log$1.createLogger;
+
+/**
+ * @file obj.js
+ * @module obj
+ */
+
+/**
+ * @callback obj:EachCallback
+ *
+ * @param {*} value
+ *        The current key for the object that is being iterated over.
+ *
+ * @param {string} key
+ *        The current key-value for object that is being iterated over
+ */
+
+/**
+ * @callback obj:ReduceCallback
+ *
+ * @param {*} accum
+ *        The value that is accumulating over the reduce loop.
+ *
+ * @param {*} value
+ *        The current key for the object that is being iterated over.
+ *
+ * @param {string} key
+ *        The current key-value for object that is being iterated over
+ *
+ * @return {*}
+ *         The new accumulated value.
+ */
+const toString = Object.prototype.toString;
+
+/**
+ * Get the keys of an Object
+ *
+ * @param {Object}
+ *        The Object to get the keys from
+ *
+ * @return {string[]}
+ *         An array of the keys from the object. Returns an empty array if the
+ *         object passed in was invalid or had no keys.
+ *
+ * @private
+ */
+const keys = function (object) {
+  return isObject(object) ? Object.keys(object) : [];
+};
+
+/**
+ * Array-like iteration for objects.
+ *
+ * @param {Object} object
+ *        The object to iterate over
+ *
+ * @param {obj:EachCallback} fn
+ *        The callback function which is called for each key in the object.
+ */
+function each(object, fn) {
+  keys(object).forEach(key => fn(object[key], key));
+}
+
+/**
+ * Array-like reduce for objects.
+ *
+ * @param {Object} object
+ *        The Object that you want to reduce.
+ *
+ * @param {Function} fn
+ *         A callback function which is called for each key in the object. It
+ *         receives the accumulated value and the per-iteration value and key
+ *         as arguments.
+ *
+ * @param {*} [initial = 0]
+ *        Starting value
+ *
+ * @return {*}
+ *         The final accumulated value.
+ */
+function reduce(object, fn, initial = 0) {
+  return keys(object).reduce((accum, key) => fn(accum, object[key], key), initial);
+}
+
+/**
+ * Returns whether a value is an object of any kind - including DOM nodes,
+ * arrays, regular expressions, etc. Not functions, though.
+ *
+ * This avoids the gotcha where using `typeof` on a `null` value
+ * results in `'object'`.
+ *
+ * @param  {Object} value
+ * @return {boolean}
+ */
+function isObject(value) {
+  return !!value && typeof value === 'object';
+}
+
+/**
+ * Returns whether an object appears to be a "plain" object - that is, a
+ * direct instance of `Object`.
+ *
+ * @param  {Object} value
+ * @return {boolean}
+ */
+function isPlain(value) {
+  return isObject(value) && toString.call(value) === '[object Object]' && value.constructor === Object;
+}
+
+/**
+ * Merge two objects recursively.
+ *
+ * Performs a deep merge like
+ * {@link https://lodash.com/docs/4.17.10#merge|lodash.merge}, but only merges
+ * plain objects (not arrays, elements, or anything else).
+ *
+ * Non-plain object values will be copied directly from the right-most
+ * argument.
+ *
+ * @param   {Object[]} sources
+ *          One or more objects to merge into a new object.
+ *
+ * @return {Object}
+ *          A new object that is the merged result of all sources.
+ */
+function merge$1(...sources) {
+  const result = {};
+  sources.forEach(source => {
+    if (!source) {
+      return;
+    }
+    each(source, (value, key) => {
+      if (!isPlain(value)) {
+        result[key] = value;
+        return;
+      }
+      if (!isPlain(result[key])) {
+        result[key] = {};
+      }
+      result[key] = merge$1(result[key], value);
+    });
+  });
+  return result;
+}
+
+/**
+ * Returns an array of values for a given object
+ *
+ * @param  {Object} source - target object
+ * @return {Array<unknown>} - object values
+ */
+function values(source = {}) {
+  const result = [];
+  for (const key in source) {
+    if (source.hasOwnProperty(key)) {
+      const value = source[key];
+      result.push(value);
+    }
+  }
+  return result;
+}
+
+/**
+ * Object.defineProperty but "lazy", which means that the value is only set after
+ * it is retrieved the first time, rather than being set right away.
+ *
+ * @param {Object} obj the object to set the property on
+ * @param {string} key the key for the property to set
+ * @param {Function} getValue the function used to get the value when it is needed.
+ * @param {boolean} setter whether a setter should be allowed or not
+ */
+function defineLazyProperty(obj, key, getValue, setter = true) {
+  const set = value => Object.defineProperty(obj, key, {
+    value,
+    enumerable: true,
+    writable: true
+  });
+  const options = {
+    configurable: true,
+    enumerable: true,
+    get() {
+      const value = getValue();
+      set(value);
+      return value;
+    }
+  };
+  if (setter) {
+    options.set = set;
+  }
+  return Object.defineProperty(obj, key, options);
+}
+
+var Obj = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  each: each,
+  reduce: reduce,
+  isObject: isObject,
+  isPlain: isPlain,
+  merge: merge$1,
+  values: values,
+  defineLazyProperty: defineLazyProperty
+});
+
+/**
+ * @file browser.js
+ * @module browser
+ */
+
+/**
+ * Whether or not this device is an iPod.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_IPOD = false;
+
+/**
+ * The detected iOS version - or `null`.
+ *
+ * @static
+ * @type {string|null}
+ */
+let IOS_VERSION = null;
+
+/**
+ * Whether or not this is an Android device.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_ANDROID = false;
+
+/**
+ * The detected Android version - or `null` if not Android or indeterminable.
+ *
+ * @static
+ * @type {number|string|null}
+ */
+let ANDROID_VERSION;
+
+/**
+ * Whether or not this is Mozilla Firefox.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_FIREFOX = false;
+
+/**
+ * Whether or not this is Microsoft Edge.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_EDGE = false;
+
+/**
+ * Whether or not this is any Chromium Browser
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_CHROMIUM = false;
+
+/**
+ * Whether or not this is any Chromium browser that is not Edge.
+ *
+ * This will also be `true` for Chrome on iOS, which will have different support
+ * as it is actually Safari under the hood.
+ *
+ * Deprecated, as the behaviour to not match Edge was to prevent Legacy Edge's UA matching.
+ * IS_CHROMIUM should be used instead.
+ * "Chromium but not Edge" could be explicitly tested with IS_CHROMIUM && !IS_EDGE
+ *
+ * @static
+ * @deprecated
+ * @type {Boolean}
+ */
+let IS_CHROME = false;
+
+/**
+ * The detected Chromium version - or `null`.
+ *
+ * @static
+ * @type {number|null}
+ */
+let CHROMIUM_VERSION = null;
+
+/**
+ * The detected Google Chrome version - or `null`.
+ * This has always been the _Chromium_ version, i.e. would return on Chromium Edge.
+ * Deprecated, use CHROMIUM_VERSION instead.
+ *
+ * @static
+ * @deprecated
+ * @type {number|null}
+ */
+let CHROME_VERSION = null;
+
+/**
+ * The detected Internet Explorer version - or `null`.
+ *
+ * @static
+ * @deprecated
+ * @type {number|null}
+ */
+let IE_VERSION = null;
+
+/**
+ * Whether or not this is desktop Safari.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_SAFARI = false;
+
+/**
+ * Whether or not this is a Windows machine.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_WINDOWS = false;
+
+/**
+ * Whether or not this device is an iPad.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_IPAD = false;
+
+/**
+ * Whether or not this device is an iPhone.
+ *
+ * @static
+ * @type {Boolean}
+ */
+// The Facebook app's UIWebView identifies as both an iPhone and iPad, so
+// to identify iPhones, we need to exclude iPads.
+// http://artsy.github.io/blog/2012/10/18/the-perils-of-ios-user-agent-sniffing/
+let IS_IPHONE = false;
+
+/**
+ * Whether or not this is a Tizen device.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_TIZEN = false;
+
+/**
+ * Whether or not this is a WebOS device.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_WEBOS = false;
+
+/**
+ * Whether or not this is a Smart TV (Tizen or WebOS) device.
+ *
+ * @static
+ * @type {Boolean}
+ */
+let IS_SMART_TV = false;
+
+/**
+ * Whether or not this device is touch-enabled.
+ *
+ * @static
+ * @const
+ * @type {Boolean}
+ */
+const TOUCH_ENABLED = Boolean(isReal() && ('ontouchstart' in window$1 || window$1.navigator.maxTouchPoints || window$1.DocumentTouch && window$1.document instanceof window$1.DocumentTouch));
+const UAD = window$1.navigator && window$1.navigator.userAgentData;
+if (UAD && UAD.platform && UAD.brands) {
+  // If userAgentData is present, use it instead of userAgent to avoid warnings
+  // Currently only implemented on Chromium
+  // userAgentData does not expose Android version, so ANDROID_VERSION remains `null`
+
+  IS_ANDROID = UAD.platform === 'Android';
+  IS_EDGE = Boolean(UAD.brands.find(b => b.brand === 'Microsoft Edge'));
+  IS_CHROMIUM = Boolean(UAD.brands.find(b => b.brand === 'Chromium'));
+  IS_CHROME = !IS_EDGE && IS_CHROMIUM;
+  CHROMIUM_VERSION = CHROME_VERSION = (UAD.brands.find(b => b.brand === 'Chromium') || {}).version || null;
+  IS_WINDOWS = UAD.platform === 'Windows';
+}
+
+// If the browser is not Chromium, either userAgentData is not present which could be an old Chromium browser,
+//  or it's a browser that has added userAgentData since that we don't have tests for yet. In either case,
+// the checks need to be made agiainst the regular userAgent string.
+if (!IS_CHROMIUM) {
+  const USER_AGENT = window$1.navigator && window$1.navigator.userAgent || '';
+  IS_IPOD = /iPod/i.test(USER_AGENT);
+  IOS_VERSION = function () {
+    const match = USER_AGENT.match(/OS (\d+)_/i);
+    if (match && match[1]) {
+      return match[1];
+    }
+    return null;
+  }();
+  IS_ANDROID = /Android/i.test(USER_AGENT);
+  ANDROID_VERSION = function () {
+    // This matches Android Major.Minor.Patch versions
+    // ANDROID_VERSION is Major.Minor as a Number, if Minor isn't available, then only Major is returned
+    const match = USER_AGENT.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i);
+    if (!match) {
+      return null;
+    }
+    const major = match[1] && parseFloat(match[1]);
+    const minor = match[2] && parseFloat(match[2]);
+    if (major && minor) {
+      return parseFloat(match[1] + '.' + match[2]);
+    } else if (major) {
+      return major;
+    }
+    return null;
+  }();
+  IS_FIREFOX = /Firefox/i.test(USER_AGENT);
+  IS_EDGE = /Edg/i.test(USER_AGENT);
+  IS_CHROMIUM = /Chrome/i.test(USER_AGENT) || /CriOS/i.test(USER_AGENT);
+  IS_CHROME = !IS_EDGE && IS_CHROMIUM;
+  CHROMIUM_VERSION = CHROME_VERSION = function () {
+    const match = USER_AGENT.match(/(Chrome|CriOS)\/(\d+)/);
+    if (match && match[2]) {
+      return parseFloat(match[2]);
+    }
+    return null;
+  }();
+  IE_VERSION = function () {
+    const result = /MSIE\s(\d+)\.\d/.exec(USER_AGENT);
+    let version = result && parseFloat(result[1]);
+    if (!version && /Trident\/7.0/i.test(USER_AGENT) && /rv:11.0/.test(USER_AGENT)) {
+      // IE 11 has a different user agent string than other IE versions
+      version = 11.0;
+    }
+    return version;
+  }();
+  IS_TIZEN = /Tizen/i.test(USER_AGENT);
+  IS_WEBOS = /Web0S/i.test(USER_AGENT);
+  IS_SMART_TV = IS_TIZEN || IS_WEBOS;
+  IS_SAFARI = /Safari/i.test(USER_AGENT) && !IS_CHROME && !IS_ANDROID && !IS_EDGE && !IS_SMART_TV;
+  IS_WINDOWS = /Windows/i.test(USER_AGENT);
+  IS_IPAD = /iPad/i.test(USER_AGENT) || IS_SAFARI && TOUCH_ENABLED && !/iPhone/i.test(USER_AGENT);
+  IS_IPHONE = /iPhone/i.test(USER_AGENT) && !IS_IPAD;
+}
+
+/**
+ * Whether or not this is an iOS device.
+ *
+ * @static
+ * @const
+ * @type {Boolean}
+ */
+const IS_IOS = IS_IPHONE || IS_IPAD || IS_IPOD;
+
+/**
+ * Whether or not this is any flavor of Safari - including iOS.
+ *
+ * @static
+ * @const
+ * @type {Boolean}
+ */
+const IS_ANY_SAFARI = (IS_SAFARI || IS_IOS) && !IS_CHROME;
+
+var browser = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  get IS_IPOD () { return IS_IPOD; },
+  get IOS_VERSION () { return IOS_VERSION; },
+  get IS_ANDROID () { return IS_ANDROID; },
+  get ANDROID_VERSION () { return ANDROID_VERSION; },
+  get IS_FIREFOX () { return IS_FIREFOX; },
+  get IS_EDGE () { return IS_EDGE; },
+  get IS_CHROMIUM () { return IS_CHROMIUM; },
+  get IS_CHROME () { return IS_CHROME; },
+  get CHROMIUM_VERSION () { return CHROMIUM_VERSION; },
+  get CHROME_VERSION () { return CHROME_VERSION; },
+  get IE_VERSION () { return IE_VERSION; },
+  get IS_SAFARI () { return IS_SAFARI; },
+  get IS_WINDOWS () { return IS_WINDOWS; },
+  get IS_IPAD () { return IS_IPAD; },
+  get IS_IPHONE () { return IS_IPHONE; },
+  get IS_TIZEN () { return IS_TIZEN; },
+  get IS_WEBOS () { return IS_WEBOS; },
+  get IS_SMART_TV () { return IS_SMART_TV; },
+  TOUCH_ENABLED: TOUCH_ENABLED,
+  IS_IOS: IS_IOS,
+  IS_ANY_SAFARI: IS_ANY_SAFARI
+});
+
+/**
+ * @file dom.js
+ * @module dom
+ */
+
+/**
+ * Detect if a value is a string with any non-whitespace characters.
+ *
+ * @private
+ * @param  {string} str
+ *         The string to check
+ *
+ * @return {boolean}
+ *         Will be `true` if the string is non-blank, `false` otherwise.
+ *
+ */
+function isNonBlankString(str) {
+  // we use str.trim as it will trim any whitespace characters
+  // from the front or back of non-whitespace characters. aka
+  // Any string that contains non-whitespace characters will
+  // still contain them after `trim` but whitespace only strings
+  // will have a length of 0, failing this check.
+  return typeof str === 'string' && Boolean(str.trim());
+}
+
+/**
+ * Throws an error if the passed string has whitespace. This is used by
+ * class methods to be relatively consistent with the classList API.
+ *
+ * @private
+ * @param  {string} str
+ *         The string to check for whitespace.
+ *
+ * @throws {Error}
+ *         Throws an error if there is whitespace in the string.
+ */
+function throwIfWhitespace(str) {
+  // str.indexOf instead of regex because str.indexOf is faster performance wise.
+  if (str.indexOf(' ') >= 0) {
+    throw new Error('class has illegal whitespace characters');
+  }
+}
+
+/**
+ * Whether the current DOM interface appears to be real (i.e. not simulated).
+ *
+ * @return {boolean}
+ *         Will be `true` if the DOM appears to be real, `false` otherwise.
+ */
+function isReal() {
+  // Both document and window will never be undefined thanks to `global`.
+  return document === window$1.document;
+}
+
+/**
+ * Determines, via duck typing, whether or not a value is a DOM element.
+ *
+ * @param  {*} value
+ *         The value to check.
+ *
+ * @return {boolean}
+ *         Will be `true` if the value is a DOM element, `false` otherwise.
+ */
+function isEl(value) {
+  return isObject(value) && value.nodeType === 1;
+}
+
+/**
+ * Determines if the current DOM is embedded in an iframe.
+ *
+ * @return {boolean}
+ *         Will be `true` if the DOM is embedded in an iframe, `false`
+ *         otherwise.
+ */
+function isInFrame() {
+  // We need a try/catch here because Safari will throw errors when attempting
+  // to get either `parent` or `self`
+  try {
+    return window$1.parent !== window$1.self;
+  } catch (x) {
+    return true;
+  }
+}
+
+/**
+ * Creates functions to query the DOM using a given method.
+ *
+ * @private
+ * @param   {string} method
+ *          The method to create the query with.
+ *
+ * @return  {Function}
+ *          The query method
+ */
+function createQuerier(method) {
+  return function (selector, context) {
+    if (!isNonBlankString(selector)) {
+      return document[method](null);
+    }
+    if (isNonBlankString(context)) {
+      context = document.querySelector(context);
+    }
+    const ctx = isEl(context) ? context : document;
+    return ctx[method] && ctx[method](selector);
+  };
+}
+
+/**
+ * Creates an element and applies properties, attributes, and inserts content.
+ *
+ * @param  {string} [tagName='div']
+ *         Name of tag to be created.
+ *
+ * @param  {Object} [properties={}]
+ *         Element properties to be applied.
+ *
+ * @param  {Object} [attributes={}]
+ *         Element attributes to be applied.
+ *
+ * @param {ContentDescriptor} [content]
+ *        A content descriptor object.
+ *
+ * @return {Element}
+ *         The element that was created.
+ */
+function createEl(tagName = 'div', properties = {}, attributes = {}, content) {
+  const el = document.createElement(tagName);
+  Object.getOwnPropertyNames(properties).forEach(function (propName) {
+    const val = properties[propName];
+
+    // Handle textContent since it's not supported everywhere and we have a
+    // method for it.
+    if (propName === 'textContent') {
+      textContent(el, val);
+    } else if (el[propName] !== val || propName === 'tabIndex') {
+      el[propName] = val;
+    }
+  });
+  Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
+    el.setAttribute(attrName, attributes[attrName]);
+  });
+  if (content) {
+    appendContent(el, content);
+  }
+  return el;
+}
+
+/**
+ * Injects text into an element, replacing any existing contents entirely.
+ *
+ * @param  {HTMLElement} el
+ *         The element to add text content into
+ *
+ * @param  {string} text
+ *         The text content to add.
+ *
+ * @return {Element}
+ *         The element with added text content.
+ */
+function textContent(el, text) {
+  if (typeof el.textContent === 'undefined') {
+    el.innerText = text;
+  } else {
+    el.textContent = text;
+  }
+  return el;
+}
+
+/**
+ * Insert an element as the first child node of another
+ *
+ * @param {Element} child
+ *        Element to insert
+ *
+ * @param {Element} parent
+ *        Element to insert child into
+ */
+function prependTo(child, parent) {
+  if (parent.firstChild) {
+    parent.insertBefore(child, parent.firstChild);
+  } else {
+    parent.appendChild(child);
+  }
+}
+
+/**
+ * Check if an element has a class name.
+ *
+ * @param  {Element} element
+ *         Element to check
+ *
+ * @param  {string} classToCheck
+ *         Class name to check for
+ *
+ * @return {boolean}
+ *         Will be `true` if the element has a class, `false` otherwise.
+ *
+ * @throws {Error}
+ *         Throws an error if `classToCheck` has white space.
+ */
+function hasClass(element, classToCheck) {
+  throwIfWhitespace(classToCheck);
+  return element.classList.contains(classToCheck);
+}
+
+/**
+ * Add a class name to an element.
+ *
+ * @param  {Element} element
+ *         Element to add class name to.
+ *
+ * @param  {...string} classesToAdd
+ *         One or more class name to add.
+ *
+ * @return {Element}
+ *         The DOM element with the added class name.
+ */
+function addClass(element, ...classesToAdd) {
+  element.classList.add(...classesToAdd.reduce((prev, current) => prev.concat(current.split(/\s+/)), []));
+  return element;
+}
+
+/**
+ * Remove a class name from an element.
+ *
+ * @param  {Element} element
+ *         Element to remove a class name from.
+ *
+ * @param  {...string} classesToRemove
+ *         One or more class name to remove.
+ *
+ * @return {Element}
+ *         The DOM element with class name removed.
+ */
+function removeClass(element, ...classesToRemove) {
+  // Protect in case the player gets disposed
+  if (!element) {
+    log$1.warn("removeClass was called with an element that doesn't exist");
+    return null;
+  }
+  element.classList.remove(...classesToRemove.reduce((prev, current) => prev.concat(current.split(/\s+/)), []));
+  return element;
+}
+
+/**
+ * The callback definition for toggleClass.
+ *
+ * @callback module:dom~PredicateCallback
+ * @param    {Element} element
+ *           The DOM element of the Component.
+ *
+ * @param    {string} classToToggle
+ *           The `className` that wants to be toggled
+ *
+ * @return   {boolean|undefined}
+ *           If `true` is returned, the `classToToggle` will be added to the
+ *           `element`. If `false`, the `classToToggle` will be removed from
+ *           the `element`. If `undefined`, the callback will be ignored.
+ */
+
+/**
+ * Adds or removes a class name to/from an element depending on an optional
+ * condition or the presence/absence of the class name.
+ *
+ * @param  {Element} element
+ *         The element to toggle a class name on.
+ *
+ * @param  {string} classToToggle
+ *         The class that should be toggled.
+ *
+ * @param  {boolean|module:dom~PredicateCallback} [predicate]
+ *         See the return value for {@link module:dom~PredicateCallback}
+ *
+ * @return {Element}
+ *         The element with a class that has been toggled.
+ */
+function toggleClass(element, classToToggle, predicate) {
+  if (typeof predicate === 'function') {
+    predicate = predicate(element, classToToggle);
+  }
+  if (typeof predicate !== 'boolean') {
+    predicate = undefined;
+  }
+  classToToggle.split(/\s+/).forEach(className => element.classList.toggle(className, predicate));
+  return element;
+}
+
+/**
+ * Apply attributes to an HTML element.
+ *
+ * @param {Element} el
+ *        Element to add attributes to.
+ *
+ * @param {Object} [attributes]
+ *        Attributes to be applied.
+ */
+function setAttributes(el, attributes) {
+  Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
+    const attrValue = attributes[attrName];
+    if (attrValue === null || typeof attrValue === 'undefined' || attrValue === false) {
+      el.removeAttribute(attrName);
+    } else {
+      el.setAttribute(attrName, attrValue === true ? '' : attrValue);
+    }
+  });
+}
+
+/**
+ * Get an element's attribute values, as defined on the HTML tag.
+ *
+ * Attributes are not the same as properties. They're defined on the tag
+ * or with setAttribute.
+ *
+ * @param  {Element} tag
+ *         Element from which to get tag attributes.
+ *
+ * @return {Object}
+ *         All attributes of the element. Boolean attributes will be `true` or
+ *         `false`, others will be strings.
+ */
+function getAttributes(tag) {
+  const obj = {};
+
+  // known boolean attributes
+  // we can check for matching boolean properties, but not all browsers
+  // and not all tags know about these attributes, so, we still want to check them manually
+  const knownBooleans = ['autoplay', 'controls', 'playsinline', 'loop', 'muted', 'default', 'defaultMuted'];
+  if (tag && tag.attributes && tag.attributes.length > 0) {
+    const attrs = tag.attributes;
+    for (let i = attrs.length - 1; i >= 0; i--) {
+      const attrName = attrs[i].name;
+      /** @type {boolean|string} */
+      let attrVal = attrs[i].value;
+
+      // check for known booleans
+      // the matching element property will return a value for typeof
+      if (knownBooleans.includes(attrName)) {
+        // the value of an included boolean attribute is typically an empty
+        // string ('') which would equal false if we just check for a false value.
+        // we also don't want support bad code like autoplay='false'
+        attrVal = attrVal !== null ? true : false;
+      }
+      obj[attrName] = attrVal;
+    }
+  }
+  return obj;
+}
+
+/**
+ * Get the value of an element's attribute.
+ *
+ * @param {Element} el
+ *        A DOM element.
+ *
+ * @param {string} attribute
+ *        Attribute to get the value of.
+ *
+ * @return {string}
+ *         The value of the attribute.
+ */
+function getAttribute(el, attribute) {
+  return el.getAttribute(attribute);
+}
+
+/**
+ * Set the value of an element's attribute.
+ *
+ * @param {Element} el
+ *        A DOM element.
+ *
+ * @param {string} attribute
+ *        Attribute to set.
+ *
+ * @param {string} value
+ *        Value to set the attribute to.
+ */
+function setAttribute(el, attribute, value) {
+  el.setAttribute(attribute, value);
+}
+
+/**
+ * Remove an element's attribute.
+ *
+ * @param {Element} el
+ *        A DOM element.
+ *
+ * @param {string} attribute
+ *        Attribute to remove.
+ */
+function removeAttribute(el, attribute) {
+  el.removeAttribute(attribute);
+}
+
+/**
+ * Attempt to block the ability to select text.
+ */
+function blockTextSelection() {
+  document.body.focus();
+  document.onselectstart = function () {
+    return false;
+  };
+}
+
+/**
+ * Turn off text selection blocking.
+ */
+function unblockTextSelection() {
+  document.onselectstart = function () {
+    return true;
+  };
+}
+
+/**
+ * Identical to the native `getBoundingClientRect` function, but ensures that
+ * the method is supported at all (it is in all browsers we claim to support)
+ * and that the element is in the DOM before continuing.
+ *
+ * This wrapper function also shims properties which are not provided by some
+ * older browsers (namely, IE8).
+ *
+ * Additionally, some browsers do not support adding properties to a
+ * `ClientRect`/`DOMRect` object; so, we shallow-copy it with the standard
+ * properties (except `x` and `y` which are not widely supported). This helps
+ * avoid implementations where keys are non-enumerable.
+ *
+ * @param  {Element} el
+ *         Element whose `ClientRect` we want to calculate.
+ *
+ * @return {Object|undefined}
+ *         Always returns a plain object - or `undefined` if it cannot.
+ */
+function getBoundingClientRect(el) {
+  if (el && el.getBoundingClientRect && el.parentNode) {
+    const rect = el.getBoundingClientRect();
+    const result = {};
+    ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach(k => {
+      if (rect[k] !== undefined) {
+        result[k] = rect[k];
+      }
+    });
+    if (!result.height) {
+      result.height = parseFloat(computedStyle(el, 'height'));
+    }
+    if (!result.width) {
+      result.width = parseFloat(computedStyle(el, 'width'));
+    }
+    return result;
+  }
+}
+
+/**
+ * Represents the position of a DOM element on the page.
+ *
+ * @typedef  {Object} module:dom~Position
+ *
+ * @property {number} left
+ *           Pixels to the left.
+ *
+ * @property {number} top
+ *           Pixels from the top.
+ */
+
+/**
+ * Get the position of an element in the DOM.
+ *
+ * Uses `getBoundingClientRect` technique from John Resig.
+ *
+ * @see http://ejohn.org/blog/getboundingclientrect-is-awesome/
+ *
+ * @param  {Element} el
+ *         Element from which to get offset.
+ *
+ * @return {module:dom~Position}
+ *         The position of the element that was passed in.
+ */
+function findPosition(el) {
+  if (!el || el && !el.offsetParent) {
+    return {
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0
+    };
+  }
+  const width = el.offsetWidth;
+  const height = el.offsetHeight;
+  let left = 0;
+  let top = 0;
+  while (el.offsetParent && el !== document[FullscreenApi.fullscreenElement]) {
+    left += el.offsetLeft;
+    top += el.offsetTop;
+    el = el.offsetParent;
+  }
+  return {
+    left,
+    top,
+    width,
+    height
+  };
+}
+
+/**
+ * Represents x and y coordinates for a DOM element or mouse pointer.
+ *
+ * @typedef  {Object} module:dom~Coordinates
+ *
+ * @property {number} x
+ *           x coordinate in pixels
+ *
+ * @property {number} y
+ *           y coordinate in pixels
+ */
+
+/**
+ * Get the pointer position within an element.
+ *
+ * The base on the coordinates are the bottom left of the element.
+ *
+ * @param  {Element} el
+ *         Element on which to get the pointer position on.
+ *
+ * @param  {Event} event
+ *         Event object.
+ *
+ * @return {module:dom~Coordinates}
+ *         A coordinates object corresponding to the mouse position.
+ *
+ */
+function getPointerPosition(el, event) {
+  const translated = {
+    x: 0,
+    y: 0
+  };
+  if (IS_IOS) {
+    let item = el;
+    while (item && item.nodeName.toLowerCase() !== 'html') {
+      const transform = computedStyle(item, 'transform');
+      if (/^matrix/.test(transform)) {
+        const values = transform.slice(7, -1).split(/,\s/).map(Number);
+        translated.x += values[4];
+        translated.y += values[5];
+      } else if (/^matrix3d/.test(transform)) {
+        const values = transform.slice(9, -1).split(/,\s/).map(Number);
+        translated.x += values[12];
+        translated.y += values[13];
+      }
+      item = item.parentNode;
+    }
+  }
+  const position = {};
+  const boxTarget = findPosition(event.target);
+  const box = findPosition(el);
+  const boxW = box.width;
+  const boxH = box.height;
+  let offsetY = event.offsetY - (box.top - boxTarget.top);
+  let offsetX = event.offsetX - (box.left - boxTarget.left);
+  if (event.changedTouches) {
+    offsetX = event.changedTouches[0].pageX - box.left;
+    offsetY = event.changedTouches[0].pageY + box.top;
+    if (IS_IOS) {
+      offsetX -= translated.x;
+      offsetY -= translated.y;
+    }
+  }
+  position.y = 1 - Math.max(0, Math.min(1, offsetY / boxH));
+  position.x = Math.max(0, Math.min(1, offsetX / boxW));
+  return position;
+}
+
+/**
+ * Determines, via duck typing, whether or not a value is a text node.
+ *
+ * @param  {*} value
+ *         Check if this value is a text node.
+ *
+ * @return {boolean}
+ *         Will be `true` if the value is a text node, `false` otherwise.
+ */
+function isTextNode(value) {
+  return isObject(value) && value.nodeType === 3;
+}
+
+/**
+ * Empties the contents of an element.
+ *
+ * @param  {Element} el
+ *         The element to empty children from
+ *
+ * @return {Element}
+ *         The element with no children
+ */
+function emptyEl(el) {
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+  return el;
+}
+
+/**
+ * This is a mixed value that describes content to be injected into the DOM
+ * via some method. It can be of the following types:
+ *
+ * Type       | Description
+ * -----------|-------------
+ * `string`   | The value will be normalized into a text node.
+ * `Element`  | The value will be accepted as-is.
+ * `Text`     | A TextNode. The value will be accepted as-is.
+ * `Array`    | A one-dimensional array of strings, elements, text nodes, or functions. These functions should return a string, element, or text node (any other return value, like an array, will be ignored).
+ * `Function` | A function, which is expected to return a string, element, text node, or array - any of the other possible values described above. This means that a content descriptor could be a function that returns an array of functions, but those second-level functions must return strings, elements, or text nodes.
+ *
+ * @typedef {string|Element|Text|Array|Function} ContentDescriptor
+ */
+
+/**
+ * Normalizes content for eventual insertion into the DOM.
+ *
+ * This allows a wide range of content definition methods, but helps protect
+ * from falling into the trap of simply writing to `innerHTML`, which could
+ * be an XSS concern.
+ *
+ * The content for an element can be passed in multiple types and
+ * combinations, whose behavior is as follows:
+ *
+ * @param {ContentDescriptor} content
+ *        A content descriptor value.
+ *
+ * @return {Array}
+ *         All of the content that was passed in, normalized to an array of
+ *         elements or text nodes.
+ */
+function normalizeContent(content) {
+  // First, invoke content if it is a function. If it produces an array,
+  // that needs to happen before normalization.
+  if (typeof content === 'function') {
+    content = content();
+  }
+
+  // Next up, normalize to an array, so one or many items can be normalized,
+  // filtered, and returned.
+  return (Array.isArray(content) ? content : [content]).map(value => {
+    // First, invoke value if it is a function to produce a new value,
+    // which will be subsequently normalized to a Node of some kind.
+    if (typeof value === 'function') {
+      value = value();
+    }
+    if (isEl(value) || isTextNode(value)) {
+      return value;
+    }
+    if (typeof value === 'string' && /\S/.test(value)) {
+      return document.createTextNode(value);
+    }
+  }).filter(value => value);
+}
+
+/**
+ * Normalizes and appends content to an element.
+ *
+ * @param  {Element} el
+ *         Element to append normalized content to.
+ *
+ * @param {ContentDescriptor} content
+ *        A content descriptor value.
+ *
+ * @return {Element}
+ *         The element with appended normalized content.
+ */
+function appendContent(el, content) {
+  normalizeContent(content).forEach(node => el.appendChild(node));
+  return el;
+}
+
+/**
+ * Normalizes and inserts content into an element; this is identical to
+ * `appendContent()`, except it empties the element first.
+ *
+ * @param {Element} el
+ *        Element to insert normalized content into.
+ *
+ * @param {ContentDescriptor} content
+ *        A content descriptor value.
+ *
+ * @return {Element}
+ *         The element with inserted normalized content.
+ */
+function insertContent(el, content) {
+  return appendContent(emptyEl(el), content);
+}
+
+/**
+ * Check if an event was a single left click.
+ *
+ * @param  {MouseEvent} event
+ *         Event object.
+ *
+ * @return {boolean}
+ *         Will be `true` if a single left click, `false` otherwise.
+ */
+function isSingleLeftClick(event) {
+  // Note: if you create something draggable, be sure to
+  // call it on both `mousedown` and `mousemove` event,
+  // otherwise `mousedown` should be enough for a button
+
+  if (event.button === undefined && event.buttons === undefined) {
+    // Why do we need `buttons` ?
+    // Because, middle mouse sometimes have this:
+    // e.button === 0 and e.buttons === 4
+    // Furthermore, we want to prevent combination click, something like
+    // HOLD middlemouse then left click, that would be
+    // e.button === 0, e.buttons === 5
+    // just `button` is not gonna work
+
+    // Alright, then what this block does ?
+    // this is for chrome `simulate mobile devices`
+    // I want to support this as well
+
+    return true;
+  }
+  if (event.button === 0 && event.buttons === undefined) {
+    // Touch screen, sometimes on some specific device, `buttons`
+    // doesn't have anything (safari on ios, blackberry...)
+
+    return true;
+  }
+
+  // `mouseup` event on a single left click has
+  // `button` and `buttons` equal to 0
+  if (event.type === 'mouseup' && event.button === 0 && event.buttons === 0) {
+    return true;
+  }
+  if (event.button !== 0 || event.buttons !== 1) {
+    // This is the reason we have those if else block above
+    // if any special case we can catch and let it slide
+    // we do it above, when get to here, this definitely
+    // is-not-left-click
+
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Finds a single DOM element matching `selector` within the optional
+ * `context` of another DOM element (defaulting to `document`).
+ *
+ * @param  {string} selector
+ *         A valid CSS selector, which will be passed to `querySelector`.
+ *
+ * @param  {Element|String} [context=document]
+ *         A DOM element within which to query. Can also be a selector
+ *         string in which case the first matching element will be used
+ *         as context. If missing (or no element matches selector), falls
+ *         back to `document`.
+ *
+ * @return {Element|null}
+ *         The element that was found or null.
+ */
+const $ = createQuerier('querySelector');
+
+/**
+ * Finds a all DOM elements matching `selector` within the optional
+ * `context` of another DOM element (defaulting to `document`).
+ *
+ * @param  {string} selector
+ *         A valid CSS selector, which will be passed to `querySelectorAll`.
+ *
+ * @param  {Element|String} [context=document]
+ *         A DOM element within which to query. Can also be a selector
+ *         string in which case the first matching element will be used
+ *         as context. If missing (or no element matches selector), falls
+ *         back to `document`.
+ *
+ * @return {NodeList}
+ *         A element list of elements that were found. Will be empty if none
+ *         were found.
+ *
+ */
+const $$ = createQuerier('querySelectorAll');
+
+/**
+ * A safe getComputedStyle.
+ *
+ * This is needed because in Firefox, if the player is loaded in an iframe with
+ * `display:none`, then `getComputedStyle` returns `null`, so, we do a
+ * null-check to make sure that the player doesn't break in these cases.
+ *
+ * @param    {Element} el
+ *           The element you want the computed style of
+ *
+ * @param    {string} prop
+ *           The property name you want
+ *
+ * @see      https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+ */
+function computedStyle(el, prop) {
+  if (!el || !prop) {
+    return '';
+  }
+  if (typeof window$1.getComputedStyle === 'function') {
+    let computedStyleValue;
+    try {
+      computedStyleValue = window$1.getComputedStyle(el);
+    } catch (e) {
+      return '';
+    }
+    return computedStyleValue ? computedStyleValue.getPropertyValue(prop) || computedStyleValue[prop] : '';
+  }
+  return '';
+}
+
+/**
+ * Copy document style sheets to another window.
+ *
+ * @param    {Window} win
+ *           The window element you want to copy the document style sheets to.
+ *
+ */
+function copyStyleSheetsToWindow(win) {
+  [...document.styleSheets].forEach(styleSheet => {
+    try {
+      const cssRules = [...styleSheet.cssRules].map(rule => rule.cssText).join('');
+      const style = document.createElement('style');
+      style.textContent = cssRules;
+      win.document.head.appendChild(style);
+    } catch (e) {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.type = styleSheet.type;
+      // For older Safari this has to be the string; on other browsers setting the MediaList works
+      link.media = styleSheet.media.mediaText;
+      link.href = styleSheet.href;
+      win.document.head.appendChild(link);
+    }
+  });
+}
+
+var Dom = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  isReal: isReal,
+  isEl: isEl,
+  isInFrame: isInFrame,
+  createEl: createEl,
+  textContent: textContent,
+  prependTo: prependTo,
+  hasClass: hasClass,
+  addClass: addClass,
+  removeClass: removeClass,
+  toggleClass: toggleClass,
+  setAttributes: setAttributes,
+  getAttributes: getAttributes,
+  getAttribute: getAttribute,
+  setAttribute: setAttribute,
+  removeAttribute: removeAttribute,
+  blockTextSelection: blockTextSelection,
+  unblockTextSelection: unblockTextSelection,
+  getBoundingClientRect: getBoundingClientRect,
+  findPosition: findPosition,
+  getPointerPosition: getPointerPosition,
+  isTextNode: isTextNode,
+  emptyEl: emptyEl,
+  normalizeContent: normalizeContent,
+  appendContent: appendContent,
+  insertContent: insertContent,
+  isSingleLeftClick: isSingleLeftClick,
+  $: $,
+  $$: $$,
+  computedStyle: computedStyle,
+  copyStyleSheetsToWindow: copyStyleSheetsToWindow
+});
+
+/**
+ * @file setup.js - Functions for setting up a player without
+ * user interaction based on the data-setup `attribute` of the video tag.
+ *
+ * @module setup
+ */
+let _windowLoaded = false;
+let videojs$1;
+
+/**
+ * Set up any tags that have a data-setup `attribute` when the player is started.
+ */
+const autoSetup = function () {
+  if (videojs$1.options.autoSetup === false) {
+    return;
+  }
+  const vids = Array.prototype.slice.call(document.getElementsByTagName('video'));
+  const audios = Array.prototype.slice.call(document.getElementsByTagName('audio'));
+  const divs = Array.prototype.slice.call(document.getElementsByTagName('video-js'));
+  const mediaEls = vids.concat(audios, divs);
+
+  // Check if any media elements exist
+  if (mediaEls && mediaEls.length > 0) {
+    for (let i = 0, e = mediaEls.length; i < e; i++) {
+      const mediaEl = mediaEls[i];
+
+      // Check if element exists, has getAttribute func.
+      if (mediaEl && mediaEl.getAttribute) {
+        // Make sure this player hasn't already been set up.
+        if (mediaEl.player === undefined) {
+          const options = mediaEl.getAttribute('data-setup');
+
+          // Check if data-setup attr exists.
+          // We only auto-setup if they've added the data-setup attr.
+          if (options !== null) {
+            // Create new video.js instance.
+            videojs$1(mediaEl);
+          }
+        }
+
+        // If getAttribute isn't defined, we need to wait for the DOM.
+      } else {
+        autoSetupTimeout(1);
+        break;
+      }
+    }
+
+    // No videos were found, so keep looping unless page is finished loading.
+  } else if (!_windowLoaded) {
+    autoSetupTimeout(1);
+  }
+};
+
+/**
+ * Wait until the page is loaded before running autoSetup. This will be called in
+ * autoSetup if `hasLoaded` returns false.
+ *
+ * @param {number} wait
+ *        How long to wait in ms
+ *
+ * @param {module:videojs} [vjs]
+ *        The videojs library function
+ */
+function autoSetupTimeout(wait, vjs) {
+  // Protect against breakage in non-browser environments
+  if (!isReal()) {
+    return;
+  }
+  if (vjs) {
+    videojs$1 = vjs;
+  }
+  window$1.setTimeout(autoSetup, wait);
+}
+
+/**
+ * Used to set the internal tracking of window loaded state to true.
+ *
+ * @private
+ */
+function setWindowLoaded() {
+  _windowLoaded = true;
+  window$1.removeEventListener('load', setWindowLoaded);
+}
+if (isReal()) {
+  if (document.readyState === 'complete') {
+    setWindowLoaded();
+  } else {
+    /**
+     * Listen for the load event on window, and set _windowLoaded to true.
+     *
+     * We use a standard event listener here to avoid incrementing the GUID
+     * before any players are created.
+     *
+     * @listens load
+     */
+    window$1.addEventListener('load', setWindowLoaded);
+  }
+}
+
+/**
+ * @file stylesheet.js
+ * @module stylesheet
+ */
+
+/**
+ * Create a DOM style element given a className for it.
+ *
+ * @param {string} className
+ *        The className to add to the created style element.
+ *
+ * @return {Element}
+ *         The element that was created.
+ */
+const createStyleElement = function (className) {
+  const style = document.createElement('style');
+  style.className = className;
+  return style;
+};
+
+/**
+ * Add text to a DOM element.
+ *
+ * @param {Element} el
+ *        The Element to add text content to.
+ *
+ * @param {string} content
+ *        The text to add to the element.
+ */
+const setTextContent = function (el, content) {
+  if (el.styleSheet) {
+    el.styleSheet.cssText = content;
+  } else {
+    el.textContent = content;
+  }
+};
+
+/**
+ * @file dom-data.js
+ * @module dom-data
+ */
+
+/**
+ * Element Data Store.
+ *
+ * Allows for binding data to an element without putting it directly on the
+ * element. Ex. Event listeners are stored here.
+ * (also from jsninja.com, slightly modified and updated for closure compiler)
+ *
+ * @type {Object}
+ * @private
+ */
+var DomData = new WeakMap();
+
+/**
+ * @file guid.js
+ * @module guid
+ */
+
+// Default value for GUIDs. This allows us to reset the GUID counter in tests.
+//
+// The initial GUID is 3 because some users have come to rely on the first
+// default player ID ending up as `vjs_video_3`.
+//
+// See: https://github.com/videojs/video.js/pull/6216
+const _initialGuid = 3;
+
+/**
+ * Unique ID for an element or function
+ *
+ * @type {Number}
+ */
+let _guid = _initialGuid;
+
+/**
+ * Get a unique auto-incrementing ID by number that has not been returned before.
+ *
+ * @return {number}
+ *         A new unique ID.
+ */
+function newGUID() {
+  return _guid++;
+}
+
+/**
+ * @file events.js. An Event System (John Resig - Secrets of a JS Ninja http://jsninja.com/)
+ * (Original book version wasn't completely usable, so fixed some things and made Closure Compiler compatible)
+ * This should work very similarly to jQuery's events, however it's based off the book version which isn't as
+ * robust as jquery's, so there's probably some differences.
+ *
+ * @file events.js
+ * @module events
+ */
+
+/**
+ * Clean up the listener cache and dispatchers
+ *
+ * @param {Element|Object} elem
+ *        Element to clean up
+ *
+ * @param {string} type
+ *        Type of event to clean up
+ */
+function _cleanUpEvents(elem, type) {
+  if (!DomData.has(elem)) {
+    return;
+  }
+  const data = DomData.get(elem);
+
+  // Remove the events of a particular type if there are none left
+  if (data.handlers[type].length === 0) {
+    delete data.handlers[type];
+    // data.handlers[type] = null;
+    // Setting to null was causing an error with data.handlers
+
+    // Remove the meta-handler from the element
+    if (elem.removeEventListener) {
+      elem.removeEventListener(type, data.dispatcher, false);
+    } else if (elem.detachEvent) {
+      elem.detachEvent('on' + type, data.dispatcher);
+    }
+  }
+
+  // Remove the events object if there are no types left
+  if (Object.getOwnPropertyNames(data.handlers).length <= 0) {
+    delete data.handlers;
+    delete data.dispatcher;
+    delete data.disabled;
+  }
+
+  // Finally remove the element data if there is no data left
+  if (Object.getOwnPropertyNames(data).length === 0) {
+    DomData.delete(elem);
+  }
+}
+
+/**
+ * Loops through an array of event types and calls the requested method for each type.
+ *
+ * @param {Function} fn
+ *        The event method we want to use.
+ *
+ * @param {Element|Object} elem
+ *        Element or object to bind listeners to
+ *
+ * @param {string[]} types
+ *        Type of event to bind to.
+ *
+ * @param {Function} callback
+ *        Event listener.
+ */
+function _handleMultipleEvents(fn, elem, types, callback) {
+  types.forEach(function (type) {
+    // Call the event method for each one of the types
+    fn(elem, type, callback);
+  });
+}
+
+/**
+ * Fix a native event to have standard property values
+ *
+ * @param {Object} event
+ *        Event object to fix.
+ *
+ * @return {Object}
+ *         Fixed event object.
+ */
+function fixEvent(event) {
+  if (event.fixed_) {
+    return event;
+  }
+  function returnTrue() {
+    return true;
+  }
+  function returnFalse() {
+    return false;
+  }
+
+  // Test if fixing up is needed
+  // Used to check if !event.stopPropagation instead of isPropagationStopped
+  // But native events return true for stopPropagation, but don't have
+  // other expected methods like isPropagationStopped. Seems to be a problem
+  // with the Javascript Ninja code. So we're just overriding all events now.
+  if (!event || !event.isPropagationStopped || !event.isImmediatePropagationStopped) {
+    const old = event || window$1.event;
+    event = {};
+    // Clone the old object so that we can modify the values event = {};
+    // IE8 Doesn't like when you mess with native event properties
+    // Firefox returns false for event.hasOwnProperty('type') and other props
+    //  which makes copying more difficult.
+    // TODO: Probably best to create a whitelist of event props
+    for (const key in old) {
+      // Safari 6.0.3 warns you if you try to copy deprecated layerX/Y
+      // Chrome warns you if you try to copy deprecated keyboardEvent.keyLocation
+      // and webkitMovementX/Y
+      // Lighthouse complains if Event.path is copied
+      if (key !== 'layerX' && key !== 'layerY' && key !== 'keyLocation' && key !== 'webkitMovementX' && key !== 'webkitMovementY' && key !== 'path') {
+        // Chrome 32+ warns if you try to copy deprecated returnValue, but
+        // we still want to if preventDefault isn't supported (IE8).
+        if (!(key === 'returnValue' && old.preventDefault)) {
+          event[key] = old[key];
+        }
+      }
+    }
+
+    // The event occurred on this element
+    if (!event.target) {
+      event.target = event.srcElement || document;
+    }
+
+    // Handle which other element the event is related to
+    if (!event.relatedTarget) {
+      event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
+    }
+
+    // Stop the default browser action
+    event.preventDefault = function () {
+      if (old.preventDefault) {
+        old.preventDefault();
+      }
+      event.returnValue = false;
+      old.returnValue = false;
+      event.defaultPrevented = true;
+    };
+    event.defaultPrevented = false;
+
+    // Stop the event from bubbling
+    event.stopPropagation = function () {
+      if (old.stopPropagation) {
+        old.stopPropagation();
+      }
+      event.cancelBubble = true;
+      old.cancelBubble = true;
+      event.isPropagationStopped = returnTrue;
+    };
+    event.isPropagationStopped = returnFalse;
+
+    // Stop the event from bubbling and executing other handlers
+    event.stopImmediatePropagation = function () {
+      if (old.stopImmediatePropagation) {
+        old.stopImmediatePropagation();
+      }
+      event.isImmediatePropagationStopped = returnTrue;
+      event.stopPropagation();
+    };
+    event.isImmediatePropagationStopped = returnFalse;
+
+    // Handle mouse position
+    if (event.clientX !== null && event.clientX !== undefined) {
+      const doc = document.documentElement;
+      const body = document.body;
+      event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
+      event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
+    }
+
+    // Handle key presses
+    event.which = event.charCode || event.keyCode;
+
+    // Fix button for mouse clicks:
+    // 0 == left; 1 == middle; 2 == right
+    if (event.button !== null && event.button !== undefined) {
+      // The following is disabled because it does not pass videojs-standard
+      // and... yikes.
+      /* eslint-disable */
+      event.button = event.button & 1 ? 0 : event.button & 4 ? 1 : event.button & 2 ? 2 : 0;
+      /* eslint-enable */
+    }
+  }
+
+  event.fixed_ = true;
+  // Returns fixed-up instance
+  return event;
+}
+
+/**
+ * Whether passive event listeners are supported
+ */
+let _supportsPassive;
+const supportsPassive = function () {
+  if (typeof _supportsPassive !== 'boolean') {
+    _supportsPassive = false;
+    try {
+      const opts = Object.defineProperty({}, 'passive', {
+        get() {
+          _supportsPassive = true;
+        }
+      });
+      window$1.addEventListener('test', null, opts);
+      window$1.removeEventListener('test', null, opts);
+    } catch (e) {
+      // disregard
+    }
+  }
+  return _supportsPassive;
+};
+
+/**
+ * Touch events Chrome expects to be passive
+ */
+const passiveEvents = ['touchstart', 'touchmove'];
+
+/**
+ * Add an event listener to element
+ * It stores the handler function in a separate cache object
+ * and adds a generic handler to the element's event,
+ * along with a unique id (guid) to the element.
+ *
+ * @param {Element|Object} elem
+ *        Element or object to bind listeners to
+ *
+ * @param {string|string[]} type
+ *        Type of event to bind to.
+ *
+ * @param {Function} fn
+ *        Event listener.
+ */
+function on(elem, type, fn) {
+  if (Array.isArray(type)) {
+    return _handleMultipleEvents(on, elem, type, fn);
+  }
+  if (!DomData.has(elem)) {
+    DomData.set(elem, {});
+  }
+  const data = DomData.get(elem);
+
+  // We need a place to store all our handler data
+  if (!data.handlers) {
+    data.handlers = {};
+  }
+  if (!data.handlers[type]) {
+    data.handlers[type] = [];
+  }
+  if (!fn.guid) {
+    fn.guid = newGUID();
+  }
+  data.handlers[type].push(fn);
+  if (!data.dispatcher) {
+    data.disabled = false;
+    data.dispatcher = function (event, hash) {
+      if (data.disabled) {
+        return;
+      }
+      event = fixEvent(event);
+      const handlers = data.handlers[event.type];
+      if (handlers) {
+        // Copy handlers so if handlers are added/removed during the process it doesn't throw everything off.
+        const handlersCopy = handlers.slice(0);
+        for (let m = 0, n = handlersCopy.length; m < n; m++) {
+          if (event.isImmediatePropagationStopped()) {
+            break;
+          } else {
+            try {
+              handlersCopy[m].call(elem, event, hash);
+            } catch (e) {
+              log$1.error(e);
+            }
+          }
+        }
+      }
+    };
+  }
+  if (data.handlers[type].length === 1) {
+    if (elem.addEventListener) {
+      let options = false;
+      if (supportsPassive() && passiveEvents.indexOf(type) > -1) {
+        options = {
+          passive: true
+        };
+      }
+      elem.addEventListener(type, data.dispatcher, options);
+    } else if (elem.attachEvent) {
+      elem.attachEvent('on' + type, data.dispatcher);
+    }
+  }
+}
+
+/**
+ * Removes event listeners from an element
+ *
+ * @param {Element|Object} elem
+ *        Object to remove listeners from.
+ *
+ * @param {string|string[]} [type]
+ *        Type of listener to remove. Don't include to remove all events from element.
+ *
+ * @param {Function} [fn]
+ *        Specific listener to remove. Don't include to remove listeners for an event
+ *        type.
+ */
+function off(elem, type, fn) {
+  // Don't want to add a cache object through getElData if not needed
+  if (!DomData.has(elem)) {
+    return;
+  }
+  const data = DomData.get(elem);
+
+  // If no events exist, nothing to unbind
+  if (!data.handlers) {
+    return;
+  }
+  if (Array.isArray(type)) {
+    return _handleMultipleEvents(off, elem, type, fn);
+  }
+
+  // Utility function
+  const removeType = function (el, t) {
+    data.handlers[t] = [];
+    _cleanUpEvents(el, t);
+  };
+
+  // Are we removing all bound events?
+  if (type === undefined) {
+    for (const t in data.handlers) {
+      if (Object.prototype.hasOwnProperty.call(data.handlers || {}, t)) {
+        removeType(elem, t);
+      }
+    }
+    return;
+  }
+  const handlers = data.handlers[type];
+
+  // If no handlers exist, nothing to unbind
+  if (!handlers) {
+    return;
+  }
+
+  // If no listener was provided, remove all listeners for type
+  if (!fn) {
+    removeType(elem, type);
+    return;
+  }
+
+  // We're only removing a single handler
+  if (fn.guid) {
+    for (let n = 0; n < handlers.length; n++) {
+      if (handlers[n].guid === fn.guid) {
+        handlers.splice(n--, 1);
+      }
+    }
+  }
+  _cleanUpEvents(elem, type);
+}
+
+/**
+ * Trigger an event for an element
+ *
+ * @param {Element|Object} elem
+ *        Element to trigger an event on
+ *
+ * @param {EventTarget~Event|string} event
+ *        A string (the type) or an event object with a type attribute
+ *
+ * @param {Object} [hash]
+ *        data hash to pass along with the event
+ *
+ * @return {boolean|undefined}
+ *         Returns the opposite of `defaultPrevented` if default was
+ *         prevented. Otherwise, returns `undefined`
+ */
+function trigger(elem, event, hash) {
+  // Fetches element data and a reference to the parent (for bubbling).
+  // Don't want to add a data object to cache for every parent,
+  // so checking hasElData first.
+  const elemData = DomData.has(elem) ? DomData.get(elem) : {};
+  const parent = elem.parentNode || elem.ownerDocument;
+  // type = event.type || event,
+  // handler;
+
+  // If an event name was passed as a string, creates an event out of it
+  if (typeof event === 'string') {
+    event = {
+      type: event,
+      target: elem
+    };
+  } else if (!event.target) {
+    event.target = elem;
+  }
+
+  // Normalizes the event properties.
+  event = fixEvent(event);
+
+  // If the passed element has a dispatcher, executes the established handlers.
+  if (elemData.dispatcher) {
+    elemData.dispatcher.call(elem, event, hash);
+  }
+
+  // Unless explicitly stopped or the event does not bubble (e.g. media events)
+  // recursively calls this function to bubble the event up the DOM.
+  if (parent && !event.isPropagationStopped() && event.bubbles === true) {
+    trigger.call(null, parent, event, hash);
+
+    // If at the top of the DOM, triggers the default action unless disabled.
+  } else if (!parent && !event.defaultPrevented && event.target && event.target[event.type]) {
+    if (!DomData.has(event.target)) {
+      DomData.set(event.target, {});
+    }
+    const targetData = DomData.get(event.target);
+
+    // Checks if the target has a default action for this event.
+    if (event.target[event.type]) {
+      // Temporarily disables event dispatching on the target as we have already executed the handler.
+      targetData.disabled = true;
+      // Executes the default action.
+      if (typeof event.target[event.type] === 'function') {
+        event.target[event.type]();
+      }
+      // Re-enables event dispatching.
+      targetData.disabled = false;
+    }
+  }
+
+  // Inform the triggerer if the default was prevented by returning false
+  return !event.defaultPrevented;
+}
+
+/**
+ * Trigger a listener only once for an event.
+ *
+ * @param {Element|Object} elem
+ *        Element or object to bind to.
+ *
+ * @param {string|string[]} type
+ *        Name/type of event
+ *
+ * @param {Event~EventListener} fn
+ *        Event listener function
+ */
+function one(elem, type, fn) {
+  if (Array.isArray(type)) {
+    return _handleMultipleEvents(one, elem, type, fn);
+  }
+  const func = function () {
+    off(elem, type, func);
+    fn.apply(this, arguments);
+  };
+
+  // copy the guid to the new function so it can removed using the original function's ID
+  func.guid = fn.guid = fn.guid || newGUID();
+  on(elem, type, func);
+}
+
+/**
+ * Trigger a listener only once and then turn if off for all
+ * configured events
+ *
+ * @param {Element|Object} elem
+ *        Element or object to bind to.
+ *
+ * @param {string|string[]} type
+ *        Name/type of event
+ *
+ * @param {Event~EventListener} fn
+ *        Event listener function
+ */
+function any(elem, type, fn) {
+  const func = function () {
+    off(elem, type, func);
+    fn.apply(this, arguments);
+  };
+
+  // copy the guid to the new function so it can removed using the original function's ID
+  func.guid = fn.guid = fn.guid || newGUID();
+
+  // multiple ons, but one off for everything
+  on(elem, type, func);
+}
+
+var Events = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  fixEvent: fixEvent,
+  on: on,
+  off: off,
+  trigger: trigger,
+  one: one,
+  any: any
+});
+
+/**
+ * @file fn.js
+ * @module fn
+ */
+const UPDATE_REFRESH_INTERVAL = 30;
+
+/**
+ * A private, internal-only function for changing the context of a function.
+ *
+ * It also stores a unique id on the function so it can be easily removed from
+ * events.
+ *
+ * @private
+ * @function
+ * @param    {*} context
+ *           The object to bind as scope.
+ *
+ * @param    {Function} fn
+ *           The function to be bound to a scope.
+ *
+ * @param    {number} [uid]
+ *           An optional unique ID for the function to be set
+ *
+ * @return   {Function}
+ *           The new function that will be bound into the context given
+ */
+const bind_ = function (context, fn, uid) {
+  // Make sure the function has a unique ID
+  if (!fn.guid) {
+    fn.guid = newGUID();
+  }
+
+  // Create the new function that changes the context
+  const bound = fn.bind(context);
+
+  // Allow for the ability to individualize this function
+  // Needed in the case where multiple objects might share the same prototype
+  // IF both items add an event listener with the same function, then you try to remove just one
+  // it will remove both because they both have the same guid.
+  // when using this, you need to use the bind method when you remove the listener as well.
+  // currently used in text tracks
+  bound.guid = uid ? uid + '_' + fn.guid : fn.guid;
+  return bound;
+};
+
+/**
+ * Wraps the given function, `fn`, with a new function that only invokes `fn`
+ * at most once per every `wait` milliseconds.
+ *
+ * @function
+ * @param    {Function} fn
+ *           The function to be throttled.
+ *
+ * @param    {number}   wait
+ *           The number of milliseconds by which to throttle.
+ *
+ * @return   {Function}
+ */
+const throttle = function (fn, wait) {
+  let last = window$1.performance.now();
+  const throttled = function (...args) {
+    const now = window$1.performance.now();
+    if (now - last >= wait) {
+      fn(...args);
+      last = now;
+    }
+  };
+  return throttled;
+};
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked.
+ *
+ * Inspired by lodash and underscore implementations.
+ *
+ * @function
+ * @param    {Function} func
+ *           The function to wrap with debounce behavior.
+ *
+ * @param    {number} wait
+ *           The number of milliseconds to wait after the last invocation.
+ *
+ * @param    {boolean} [immediate]
+ *           Whether or not to invoke the function immediately upon creation.
+ *
+ * @param    {Object} [context=window]
+ *           The "context" in which the debounced function should debounce. For
+ *           example, if this function should be tied to a Video.js player,
+ *           the player can be passed here. Alternatively, defaults to the
+ *           global `window` object.
+ *
+ * @return   {Function}
+ *           A debounced function.
+ */
+const debounce = function (func, wait, immediate, context = window$1) {
+  let timeout;
+  const cancel = () => {
+    context.clearTimeout(timeout);
+    timeout = null;
+  };
+
+  /* eslint-disable consistent-this */
+  const debounced = function () {
+    const self = this;
+    const args = arguments;
+    let later = function () {
+      timeout = null;
+      later = null;
+      if (!immediate) {
+        func.apply(self, args);
+      }
+    };
+    if (!timeout && immediate) {
+      func.apply(self, args);
+    }
+    context.clearTimeout(timeout);
+    timeout = context.setTimeout(later, wait);
+  };
+  /* eslint-enable consistent-this */
+
+  debounced.cancel = cancel;
+  return debounced;
+};
+
+var Fn = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  UPDATE_REFRESH_INTERVAL: UPDATE_REFRESH_INTERVAL,
+  bind_: bind_,
+  throttle: throttle,
+  debounce: debounce
+});
+
+/**
+ * @file src/js/event-target.js
+ */
+let EVENT_MAP;
+
+/**
+ * `EventTarget` is a class that can have the same API as the DOM `EventTarget`. It
+ * adds shorthand functions that wrap around lengthy functions. For example:
+ * the `on` function is a wrapper around `addEventListener`.
+ *
+ * @see [EventTarget Spec]{@link https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget}
+ * @class EventTarget
+ */
+class EventTarget$2 {
+  /**
+   * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+   * function that will get called when an event with a certain name gets triggered.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} fn
+   *        The function to call with `EventTarget`s
+   */
+  on(type, fn) {
+    // Remove the addEventListener alias before calling Events.on
+    // so we don't get into an infinite type loop
+    const ael = this.addEventListener;
+    this.addEventListener = () => {};
+    on(this, type, fn);
+    this.addEventListener = ael;
+  }
+  /**
+   * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+   * This makes it so that the `event listener` will no longer get called when the
+   * named event happens.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} fn
+   *        The function to remove.
+   */
+  off(type, fn) {
+    off(this, type, fn);
+  }
+  /**
+   * This function will add an `event listener` that gets triggered only once. After the
+   * first trigger it will get removed. This is like adding an `event listener`
+   * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} fn
+   *        The function to be called once for each event name.
+   */
+  one(type, fn) {
+    // Remove the addEventListener aliasing Events.on
+    // so we don't get into an infinite type loop
+    const ael = this.addEventListener;
+    this.addEventListener = () => {};
+    one(this, type, fn);
+    this.addEventListener = ael;
+  }
+  /**
+   * This function will add an `event listener` that gets triggered only once and is
+   * removed from all events. This is like adding an array of `event listener`s
+   * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+   * first time it is triggered.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} fn
+   *        The function to be called once for each event name.
+   */
+  any(type, fn) {
+    // Remove the addEventListener aliasing Events.on
+    // so we don't get into an infinite type loop
+    const ael = this.addEventListener;
+    this.addEventListener = () => {};
+    any(this, type, fn);
+    this.addEventListener = ael;
+  }
+  /**
+   * This function causes an event to happen. This will then cause any `event listeners`
+   * that are waiting for that event, to get called. If there are no `event listeners`
+   * for an event then nothing will happen.
+   *
+   * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+   * Trigger will also call the `on` + `uppercaseEventName` function.
+   *
+   * Example:
+   * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+   * `onClick` if it exists.
+   *
+   * @param {string|EventTarget~Event|Object} event
+   *        The name of the event, an `Event`, or an object with a key of type set to
+   *        an event name.
+   */
+  trigger(event) {
+    const type = event.type || event;
+
+    // deprecation
+    // In a future version we should default target to `this`
+    // similar to how we default the target to `elem` in
+    // `Events.trigger`. Right now the default `target` will be
+    // `document` due to the `Event.fixEvent` call.
+    if (typeof event === 'string') {
+      event = {
+        type
+      };
+    }
+    event = fixEvent(event);
+    if (this.allowedEvents_[type] && this['on' + type]) {
+      this['on' + type](event);
+    }
+    trigger(this, event);
+  }
+  queueTrigger(event) {
+    // only set up EVENT_MAP if it'll be used
+    if (!EVENT_MAP) {
+      EVENT_MAP = new Map();
+    }
+    const type = event.type || event;
+    let map = EVENT_MAP.get(this);
+    if (!map) {
+      map = new Map();
+      EVENT_MAP.set(this, map);
+    }
+    const oldTimeout = map.get(type);
+    map.delete(type);
+    window$1.clearTimeout(oldTimeout);
+    const timeout = window$1.setTimeout(() => {
+      map.delete(type);
+      // if we cleared out all timeouts for the current target, delete its map
+      if (map.size === 0) {
+        map = null;
+        EVENT_MAP.delete(this);
+      }
+      this.trigger(event);
+    }, 0);
+    map.set(type, timeout);
+  }
+}
+
+/**
+ * A Custom DOM event.
+ *
+ * @typedef {CustomEvent} Event
+ * @see [Properties]{@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent}
+ */
+
+/**
+ * All event listeners should follow the following format.
+ *
+ * @callback EventListener
+ * @this {EventTarget}
+ *
+ * @param {Event} event
+ *        the event that triggered this function
+ *
+ * @param {Object} [hash]
+ *        hash of data sent during the event
+ */
+
+/**
+ * An object containing event names as keys and booleans as values.
+ *
+ * > NOTE: If an event name is set to a true value here {@link EventTarget#trigger}
+ *         will have extra functionality. See that function for more information.
+ *
+ * @property EventTarget.prototype.allowedEvents_
+ * @protected
+ */
+EventTarget$2.prototype.allowedEvents_ = {};
+
+/**
+ * An alias of {@link EventTarget#on}. Allows `EventTarget` to mimic
+ * the standard DOM API.
+ *
+ * @function
+ * @see {@link EventTarget#on}
+ */
+EventTarget$2.prototype.addEventListener = EventTarget$2.prototype.on;
+
+/**
+ * An alias of {@link EventTarget#off}. Allows `EventTarget` to mimic
+ * the standard DOM API.
+ *
+ * @function
+ * @see {@link EventTarget#off}
+ */
+EventTarget$2.prototype.removeEventListener = EventTarget$2.prototype.off;
+
+/**
+ * An alias of {@link EventTarget#trigger}. Allows `EventTarget` to mimic
+ * the standard DOM API.
+ *
+ * @function
+ * @see {@link EventTarget#trigger}
+ */
+EventTarget$2.prototype.dispatchEvent = EventTarget$2.prototype.trigger;
+
+/**
+ * @file mixins/evented.js
+ * @module evented
+ */
+const objName = obj => {
+  if (typeof obj.name === 'function') {
+    return obj.name();
+  }
+  if (typeof obj.name === 'string') {
+    return obj.name;
+  }
+  if (obj.name_) {
+    return obj.name_;
+  }
+  if (obj.constructor && obj.constructor.name) {
+    return obj.constructor.name;
+  }
+  return typeof obj;
+};
+
+/**
+ * Returns whether or not an object has had the evented mixin applied.
+ *
+ * @param  {Object} object
+ *         An object to test.
+ *
+ * @return {boolean}
+ *         Whether or not the object appears to be evented.
+ */
+const isEvented = object => object instanceof EventTarget$2 || !!object.eventBusEl_ && ['on', 'one', 'off', 'trigger'].every(k => typeof object[k] === 'function');
+
+/**
+ * Adds a callback to run after the evented mixin applied.
+ *
+ * @param  {Object} target
+ *         An object to Add
+ * @param  {Function} callback
+ *         The callback to run.
+ */
+const addEventedCallback = (target, callback) => {
+  if (isEvented(target)) {
+    callback();
+  } else {
+    if (!target.eventedCallbacks) {
+      target.eventedCallbacks = [];
+    }
+    target.eventedCallbacks.push(callback);
+  }
+};
+
+/**
+ * Whether a value is a valid event type - non-empty string or array.
+ *
+ * @private
+ * @param  {string|Array} type
+ *         The type value to test.
+ *
+ * @return {boolean}
+ *         Whether or not the type is a valid event type.
+ */
+const isValidEventType = type =>
+// The regex here verifies that the `type` contains at least one non-
+// whitespace character.
+typeof type === 'string' && /\S/.test(type) || Array.isArray(type) && !!type.length;
+
+/**
+ * Validates a value to determine if it is a valid event target. Throws if not.
+ *
+ * @private
+ * @throws {Error}
+ *         If the target does not appear to be a valid event target.
+ *
+ * @param  {Object} target
+ *         The object to test.
+ *
+ * @param  {Object} obj
+ *         The evented object we are validating for
+ *
+ * @param  {string} fnName
+ *         The name of the evented mixin function that called this.
+ */
+const validateTarget = (target, obj, fnName) => {
+  if (!target || !target.nodeName && !isEvented(target)) {
+    throw new Error(`Invalid target for ${objName(obj)}#${fnName}; must be a DOM node or evented object.`);
+  }
+};
+
+/**
+ * Validates a value to determine if it is a valid event target. Throws if not.
+ *
+ * @private
+ * @throws {Error}
+ *         If the type does not appear to be a valid event type.
+ *
+ * @param  {string|Array} type
+ *         The type to test.
+ *
+ * @param  {Object} obj
+*         The evented object we are validating for
+ *
+ * @param  {string} fnName
+ *         The name of the evented mixin function that called this.
+ */
+const validateEventType = (type, obj, fnName) => {
+  if (!isValidEventType(type)) {
+    throw new Error(`Invalid event type for ${objName(obj)}#${fnName}; must be a non-empty string or array.`);
+  }
+};
+
+/**
+ * Validates a value to determine if it is a valid listener. Throws if not.
+ *
+ * @private
+ * @throws {Error}
+ *         If the listener is not a function.
+ *
+ * @param  {Function} listener
+ *         The listener to test.
+ *
+ * @param  {Object} obj
+ *         The evented object we are validating for
+ *
+ * @param  {string} fnName
+ *         The name of the evented mixin function that called this.
+ */
+const validateListener = (listener, obj, fnName) => {
+  if (typeof listener !== 'function') {
+    throw new Error(`Invalid listener for ${objName(obj)}#${fnName}; must be a function.`);
+  }
+};
+
+/**
+ * Takes an array of arguments given to `on()` or `one()`, validates them, and
+ * normalizes them into an object.
+ *
+ * @private
+ * @param  {Object} self
+ *         The evented object on which `on()` or `one()` was called. This
+ *         object will be bound as the `this` value for the listener.
+ *
+ * @param  {Array} args
+ *         An array of arguments passed to `on()` or `one()`.
+ *
+ * @param  {string} fnName
+ *         The name of the evented mixin function that called this.
+ *
+ * @return {Object}
+ *         An object containing useful values for `on()` or `one()` calls.
+ */
+const normalizeListenArgs = (self, args, fnName) => {
+  // If the number of arguments is less than 3, the target is always the
+  // evented object itself.
+  const isTargetingSelf = args.length < 3 || args[0] === self || args[0] === self.eventBusEl_;
+  let target;
+  let type;
+  let listener;
+  if (isTargetingSelf) {
+    target = self.eventBusEl_;
+
+    // Deal with cases where we got 3 arguments, but we are still listening to
+    // the evented object itself.
+    if (args.length >= 3) {
+      args.shift();
+    }
+    [type, listener] = args;
+  } else {
+    [target, type, listener] = args;
+  }
+  validateTarget(target, self, fnName);
+  validateEventType(type, self, fnName);
+  validateListener(listener, self, fnName);
+  listener = bind_(self, listener);
+  return {
+    isTargetingSelf,
+    target,
+    type,
+    listener
+  };
+};
+
+/**
+ * Adds the listener to the event type(s) on the target, normalizing for
+ * the type of target.
+ *
+ * @private
+ * @param  {Element|Object} target
+ *         A DOM node or evented object.
+ *
+ * @param  {string} method
+ *         The event binding method to use ("on" or "one").
+ *
+ * @param  {string|Array} type
+ *         One or more event type(s).
+ *
+ * @param  {Function} listener
+ *         A listener function.
+ */
+const listen = (target, method, type, listener) => {
+  validateTarget(target, target, method);
+  if (target.nodeName) {
+    Events[method](target, type, listener);
+  } else {
+    target[method](type, listener);
+  }
+};
+
+/**
+ * Contains methods that provide event capabilities to an object which is passed
+ * to {@link module:evented|evented}.
+ *
+ * @mixin EventedMixin
+ */
+const EventedMixin = {
+  /**
+   * Add a listener to an event (or events) on this object or another evented
+   * object.
+   *
+   * @param  {string|Array|Element|Object} targetOrType
+   *         If this is a string or array, it represents the event type(s)
+   *         that will trigger the listener.
+   *
+   *         Another evented object can be passed here instead, which will
+   *         cause the listener to listen for events on _that_ object.
+   *
+   *         In either case, the listener's `this` value will be bound to
+   *         this object.
+   *
+   * @param  {string|Array|Function} typeOrListener
+   *         If the first argument was a string or array, this should be the
+   *         listener function. Otherwise, this is a string or array of event
+   *         type(s).
+   *
+   * @param  {Function} [listener]
+   *         If the first argument was another evented object, this will be
+   *         the listener function.
+   */
+  on(...args) {
+    const {
+      isTargetingSelf,
+      target,
+      type,
+      listener
+    } = normalizeListenArgs(this, args, 'on');
+    listen(target, 'on', type, listener);
+
+    // If this object is listening to another evented object.
+    if (!isTargetingSelf) {
+      // If this object is disposed, remove the listener.
+      const removeListenerOnDispose = () => this.off(target, type, listener);
+
+      // Use the same function ID as the listener so we can remove it later it
+      // using the ID of the original listener.
+      removeListenerOnDispose.guid = listener.guid;
+
+      // Add a listener to the target's dispose event as well. This ensures
+      // that if the target is disposed BEFORE this object, we remove the
+      // removal listener that was just added. Otherwise, we create a memory leak.
+      const removeRemoverOnTargetDispose = () => this.off('dispose', removeListenerOnDispose);
+
+      // Use the same function ID as the listener so we can remove it later
+      // it using the ID of the original listener.
+      removeRemoverOnTargetDispose.guid = listener.guid;
+      listen(this, 'on', 'dispose', removeListenerOnDispose);
+      listen(target, 'on', 'dispose', removeRemoverOnTargetDispose);
+    }
+  },
+  /**
+   * Add a listener to an event (or events) on this object or another evented
+   * object. The listener will be called once per event and then removed.
+   *
+   * @param  {string|Array|Element|Object} targetOrType
+   *         If this is a string or array, it represents the event type(s)
+   *         that will trigger the listener.
+   *
+   *         Another evented object can be passed here instead, which will
+   *         cause the listener to listen for events on _that_ object.
+   *
+   *         In either case, the listener's `this` value will be bound to
+   *         this object.
+   *
+   * @param  {string|Array|Function} typeOrListener
+   *         If the first argument was a string or array, this should be the
+   *         listener function. Otherwise, this is a string or array of event
+   *         type(s).
+   *
+   * @param  {Function} [listener]
+   *         If the first argument was another evented object, this will be
+   *         the listener function.
+   */
+  one(...args) {
+    const {
+      isTargetingSelf,
+      target,
+      type,
+      listener
+    } = normalizeListenArgs(this, args, 'one');
+
+    // Targeting this evented object.
+    if (isTargetingSelf) {
+      listen(target, 'one', type, listener);
+
+      // Targeting another evented object.
+    } else {
+      // TODO: This wrapper is incorrect! It should only
+      //       remove the wrapper for the event type that called it.
+      //       Instead all listeners are removed on the first trigger!
+      //       see https://github.com/videojs/video.js/issues/5962
+      const wrapper = (...largs) => {
+        this.off(target, type, wrapper);
+        listener.apply(null, largs);
+      };
+
+      // Use the same function ID as the listener so we can remove it later
+      // it using the ID of the original listener.
+      wrapper.guid = listener.guid;
+      listen(target, 'one', type, wrapper);
+    }
+  },
+  /**
+   * Add a listener to an event (or events) on this object or another evented
+   * object. The listener will only be called once for the first event that is triggered
+   * then removed.
+   *
+   * @param  {string|Array|Element|Object} targetOrType
+   *         If this is a string or array, it represents the event type(s)
+   *         that will trigger the listener.
+   *
+   *         Another evented object can be passed here instead, which will
+   *         cause the listener to listen for events on _that_ object.
+   *
+   *         In either case, the listener's `this` value will be bound to
+   *         this object.
+   *
+   * @param  {string|Array|Function} typeOrListener
+   *         If the first argument was a string or array, this should be the
+   *         listener function. Otherwise, this is a string or array of event
+   *         type(s).
+   *
+   * @param  {Function} [listener]
+   *         If the first argument was another evented object, this will be
+   *         the listener function.
+   */
+  any(...args) {
+    const {
+      isTargetingSelf,
+      target,
+      type,
+      listener
+    } = normalizeListenArgs(this, args, 'any');
+
+    // Targeting this evented object.
+    if (isTargetingSelf) {
+      listen(target, 'any', type, listener);
+
+      // Targeting another evented object.
+    } else {
+      const wrapper = (...largs) => {
+        this.off(target, type, wrapper);
+        listener.apply(null, largs);
+      };
+
+      // Use the same function ID as the listener so we can remove it later
+      // it using the ID of the original listener.
+      wrapper.guid = listener.guid;
+      listen(target, 'any', type, wrapper);
+    }
+  },
+  /**
+   * Removes listener(s) from event(s) on an evented object.
+   *
+   * @param  {string|Array|Element|Object} [targetOrType]
+   *         If this is a string or array, it represents the event type(s).
+   *
+   *         Another evented object can be passed here instead, in which case
+   *         ALL 3 arguments are _required_.
+   *
+   * @param  {string|Array|Function} [typeOrListener]
+   *         If the first argument was a string or array, this may be the
+   *         listener function. Otherwise, this is a string or array of event
+   *         type(s).
+   *
+   * @param  {Function} [listener]
+   *         If the first argument was another evented object, this will be
+   *         the listener function; otherwise, _all_ listeners bound to the
+   *         event type(s) will be removed.
+   */
+  off(targetOrType, typeOrListener, listener) {
+    // Targeting this evented object.
+    if (!targetOrType || isValidEventType(targetOrType)) {
+      off(this.eventBusEl_, targetOrType, typeOrListener);
+
+      // Targeting another evented object.
+    } else {
+      const target = targetOrType;
+      const type = typeOrListener;
+
+      // Fail fast and in a meaningful way!
+      validateTarget(target, this, 'off');
+      validateEventType(type, this, 'off');
+      validateListener(listener, this, 'off');
+
+      // Ensure there's at least a guid, even if the function hasn't been used
+      listener = bind_(this, listener);
+
+      // Remove the dispose listener on this evented object, which was given
+      // the same guid as the event listener in on().
+      this.off('dispose', listener);
+      if (target.nodeName) {
+        off(target, type, listener);
+        off(target, 'dispose', listener);
+      } else if (isEvented(target)) {
+        target.off(type, listener);
+        target.off('dispose', listener);
+      }
+    }
+  },
+  /**
+   * Fire an event on this evented object, causing its listeners to be called.
+   *
+   * @param   {string|Object} event
+   *          An event type or an object with a type property.
+   *
+   * @param   {Object} [hash]
+   *          An additional object to pass along to listeners.
+   *
+   * @return {boolean}
+   *          Whether or not the default behavior was prevented.
+   */
+  trigger(event, hash) {
+    validateTarget(this.eventBusEl_, this, 'trigger');
+    const type = event && typeof event !== 'string' ? event.type : event;
+    if (!isValidEventType(type)) {
+      throw new Error(`Invalid event type for ${objName(this)}#trigger; ` + 'must be a non-empty string or object with a type key that has a non-empty value.');
+    }
+    return trigger(this.eventBusEl_, event, hash);
+  }
+};
+
+/**
+ * Applies {@link module:evented~EventedMixin|EventedMixin} to a target object.
+ *
+ * @param  {Object} target
+ *         The object to which to add event methods.
+ *
+ * @param  {Object} [options={}]
+ *         Options for customizing the mixin behavior.
+ *
+ * @param  {string} [options.eventBusKey]
+ *         By default, adds a `eventBusEl_` DOM element to the target object,
+ *         which is used as an event bus. If the target object already has a
+ *         DOM element that should be used, pass its key here.
+ *
+ * @return {Object}
+ *         The target object.
+ */
+function evented(target, options = {}) {
+  const {
+    eventBusKey
+  } = options;
+
+  // Set or create the eventBusEl_.
+  if (eventBusKey) {
+    if (!target[eventBusKey].nodeName) {
+      throw new Error(`The eventBusKey "${eventBusKey}" does not refer to an element.`);
+    }
+    target.eventBusEl_ = target[eventBusKey];
+  } else {
+    target.eventBusEl_ = createEl('span', {
+      className: 'vjs-event-bus'
+    });
+  }
+  Object.assign(target, EventedMixin);
+  if (target.eventedCallbacks) {
+    target.eventedCallbacks.forEach(callback => {
+      callback();
+    });
+  }
+
+  // When any evented object is disposed, it removes all its listeners.
+  target.on('dispose', () => {
+    target.off();
+    [target, target.el_, target.eventBusEl_].forEach(function (val) {
+      if (val && DomData.has(val)) {
+        DomData.delete(val);
+      }
+    });
+    window$1.setTimeout(() => {
+      target.eventBusEl_ = null;
+    }, 0);
+  });
+  return target;
+}
+
+/**
+ * @file mixins/stateful.js
+ * @module stateful
+ */
+
+/**
+ * Contains methods that provide statefulness to an object which is passed
+ * to {@link module:stateful}.
+ *
+ * @mixin StatefulMixin
+ */
+const StatefulMixin = {
+  /**
+   * A hash containing arbitrary keys and values representing the state of
+   * the object.
+   *
+   * @type {Object}
+   */
+  state: {},
+  /**
+   * Set the state of an object by mutating its
+   * {@link module:stateful~StatefulMixin.state|state} object in place.
+   *
+   * @fires   module:stateful~StatefulMixin#statechanged
+   * @param   {Object|Function} stateUpdates
+   *          A new set of properties to shallow-merge into the plugin state.
+   *          Can be a plain object or a function returning a plain object.
+   *
+   * @return {Object|undefined}
+   *          An object containing changes that occurred. If no changes
+   *          occurred, returns `undefined`.
+   */
+  setState(stateUpdates) {
+    // Support providing the `stateUpdates` state as a function.
+    if (typeof stateUpdates === 'function') {
+      stateUpdates = stateUpdates();
+    }
+    let changes;
+    each(stateUpdates, (value, key) => {
+      // Record the change if the value is different from what's in the
+      // current state.
+      if (this.state[key] !== value) {
+        changes = changes || {};
+        changes[key] = {
+          from: this.state[key],
+          to: value
+        };
+      }
+      this.state[key] = value;
+    });
+
+    // Only trigger "statechange" if there were changes AND we have a trigger
+    // function. This allows us to not require that the target object be an
+    // evented object.
+    if (changes && isEvented(this)) {
+      /**
+       * An event triggered on an object that is both
+       * {@link module:stateful|stateful} and {@link module:evented|evented}
+       * indicating that its state has changed.
+       *
+       * @event    module:stateful~StatefulMixin#statechanged
+       * @type     {Object}
+       * @property {Object} changes
+       *           A hash containing the properties that were changed and
+       *           the values they were changed `from` and `to`.
+       */
+      this.trigger({
+        changes,
+        type: 'statechanged'
+      });
+    }
+    return changes;
+  }
+};
+
+/**
+ * Applies {@link module:stateful~StatefulMixin|StatefulMixin} to a target
+ * object.
+ *
+ * If the target object is {@link module:evented|evented} and has a
+ * `handleStateChanged` method, that method will be automatically bound to the
+ * `statechanged` event on itself.
+ *
+ * @param   {Object} target
+ *          The object to be made stateful.
+ *
+ * @param   {Object} [defaultState]
+ *          A default set of properties to populate the newly-stateful object's
+ *          `state` property.
+ *
+ * @return {Object}
+ *          Returns the `target`.
+ */
+function stateful(target, defaultState) {
+  Object.assign(target, StatefulMixin);
+
+  // This happens after the mixing-in because we need to replace the `state`
+  // added in that step.
+  target.state = Object.assign({}, target.state, defaultState);
+
+  // Auto-bind the `handleStateChanged` method of the target object if it exists.
+  if (typeof target.handleStateChanged === 'function' && isEvented(target)) {
+    target.on('statechanged', target.handleStateChanged);
+  }
+  return target;
+}
+
+/**
+ * @file str.js
+ * @module to-lower-case
+ */
+
+/**
+ * Lowercase the first letter of a string.
+ *
+ * @param {string} string
+ *        String to be lowercased
+ *
+ * @return {string}
+ *         The string with a lowercased first letter
+ */
+const toLowerCase = function (string) {
+  if (typeof string !== 'string') {
+    return string;
+  }
+  return string.replace(/./, w => w.toLowerCase());
+};
+
+/**
+ * Uppercase the first letter of a string.
+ *
+ * @param {string} string
+ *        String to be uppercased
+ *
+ * @return {string}
+ *         The string with an uppercased first letter
+ */
+const toTitleCase$1 = function (string) {
+  if (typeof string !== 'string') {
+    return string;
+  }
+  return string.replace(/./, w => w.toUpperCase());
+};
+
+/**
+ * Compares the TitleCase versions of the two strings for equality.
+ *
+ * @param {string} str1
+ *        The first string to compare
+ *
+ * @param {string} str2
+ *        The second string to compare
+ *
+ * @return {boolean}
+ *         Whether the TitleCase versions of the strings are equal
+ */
+const titleCaseEquals = function (str1, str2) {
+  return toTitleCase$1(str1) === toTitleCase$1(str2);
+};
+
+var Str = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  toLowerCase: toLowerCase,
+  toTitleCase: toTitleCase$1,
+  titleCaseEquals: titleCaseEquals
+});
+
+/**
+ * Player Component - Base class for all UI objects
+ *
+ * @file component.js
+ */
+
+/**
+ * Base class for all UI Components.
+ * Components are UI objects which represent both a javascript object and an element
+ * in the DOM. They can be children of other components, and can have
+ * children themselves.
+ *
+ * Components can also use methods from {@link EventTarget}
+ */
+class Component$1 {
+  /**
+   * A callback that is called when a component is ready. Does not have any
+   * parameters and any callback value will be ignored.
+   *
+   * @callback ReadyCallback
+   * @this Component
+   */
+
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of component options.
+   *
+   * @param {Object[]} [options.children]
+   *        An array of children objects to initialize this component with. Children objects have
+   *        a name property that will be used if more than one component of the same type needs to be
+   *        added.
+   *
+   * @param  {string} [options.className]
+   *         A class or space separated list of classes to add the component
+   *
+   * @param {ReadyCallback} [ready]
+   *        Function that gets called when the `Component` is ready.
+   */
+  constructor(player, options, ready) {
+    // The component might be the player itself and we can't pass `this` to super
+    if (!player && this.play) {
+      this.player_ = player = this; // eslint-disable-line
+    } else {
+      this.player_ = player;
+    }
+    this.isDisposed_ = false;
+
+    // Hold the reference to the parent component via `addChild` method
+    this.parentComponent_ = null;
+
+    // Make a copy of prototype.options_ to protect against overriding defaults
+    this.options_ = merge$1({}, this.options_);
+
+    // Updated options with supplied options
+    options = this.options_ = merge$1(this.options_, options);
+
+    // Get ID from options or options element if one is supplied
+    this.id_ = options.id || options.el && options.el.id;
+
+    // If there was no ID from the options, generate one
+    if (!this.id_) {
+      // Don't require the player ID function in the case of mock players
+      const id = player && player.id && player.id() || 'no_player';
+      this.id_ = `${id}_component_${newGUID()}`;
+    }
+    this.name_ = options.name || null;
+
+    // Create element if one wasn't provided in options
+    if (options.el) {
+      this.el_ = options.el;
+    } else if (options.createEl !== false) {
+      this.el_ = this.createEl();
+    }
+    if (options.className && this.el_) {
+      options.className.split(' ').forEach(c => this.addClass(c));
+    }
+
+    // Remove the placeholder event methods. If the component is evented, the
+    // real methods are added next
+    ['on', 'off', 'one', 'any', 'trigger'].forEach(fn => {
+      this[fn] = undefined;
+    });
+
+    // if evented is anything except false, we want to mixin in evented
+    if (options.evented !== false) {
+      // Make this an evented object and use `el_`, if available, as its event bus
+      evented(this, {
+        eventBusKey: this.el_ ? 'el_' : null
+      });
+      this.handleLanguagechange = this.handleLanguagechange.bind(this);
+      this.on(this.player_, 'languagechange', this.handleLanguagechange);
+    }
+    stateful(this, this.constructor.defaultState);
+    this.children_ = [];
+    this.childIndex_ = {};
+    this.childNameIndex_ = {};
+    this.setTimeoutIds_ = new Set();
+    this.setIntervalIds_ = new Set();
+    this.rafIds_ = new Set();
+    this.namedRafs_ = new Map();
+    this.clearingTimersOnDispose_ = false;
+
+    // Add any child components in options
+    if (options.initChildren !== false) {
+      this.initChildren();
+    }
+
+    // Don't want to trigger ready here or it will go before init is actually
+    // finished for all children that run this constructor
+    this.ready(ready);
+    if (options.reportTouchActivity !== false) {
+      this.enableTouchActivity();
+    }
+  }
+
+  // `on`, `off`, `one`, `any` and `trigger` are here so tsc includes them in definitions.
+  // They are replaced or removed in the constructor
+
+  /**
+   * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+   * function that will get called when an event with a certain name gets triggered.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} fn
+   *        The function to call with `EventTarget`s
+   */
+  on(type, fn) {}
+
+  /**
+   * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+   * This makes it so that the `event listener` will no longer get called when the
+   * named event happens.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} [fn]
+   *        The function to remove. If not specified, all listeners managed by Video.js will be removed.
+   */
+  off(type, fn) {}
+
+  /**
+   * This function will add an `event listener` that gets triggered only once. After the
+   * first trigger it will get removed. This is like adding an `event listener`
+   * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} fn
+   *        The function to be called once for each event name.
+   */
+  one(type, fn) {}
+
+  /**
+   * This function will add an `event listener` that gets triggered only once and is
+   * removed from all events. This is like adding an array of `event listener`s
+   * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+   * first time it is triggered.
+   *
+   * @param {string|string[]} type
+   *        An event name or an array of event names.
+   *
+   * @param {Function} fn
+   *        The function to be called once for each event name.
+   */
+  any(type, fn) {}
+
+  /**
+   * This function causes an event to happen. This will then cause any `event listeners`
+   * that are waiting for that event, to get called. If there are no `event listeners`
+   * for an event then nothing will happen.
+   *
+   * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+   * Trigger will also call the `on` + `uppercaseEventName` function.
+   *
+   * Example:
+   * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+   * `onClick` if it exists.
+   *
+   * @param {string|Event|Object} event
+   *        The name of the event, an `Event`, or an object with a key of type set to
+   *        an event name.
+   *
+   * @param {Object} [hash]
+   *        Optionally extra argument to pass through to an event listener
+   */
+  trigger(event, hash) {}
+
+  /**
+   * Dispose of the `Component` and all child components.
+   *
+   * @fires Component#dispose
+   *
+   * @param {Object} options
+   * @param {Element} options.originalEl element with which to replace player element
+   */
+  dispose(options = {}) {
+    // Bail out if the component has already been disposed.
+    if (this.isDisposed_) {
+      return;
+    }
+    if (this.readyQueue_) {
+      this.readyQueue_.length = 0;
+    }
+
+    /**
+     * Triggered when a `Component` is disposed.
+     *
+     * @event Component#dispose
+     * @type {Event}
+     *
+     * @property {boolean} [bubbles=false]
+     *           set to false so that the dispose event does not
+     *           bubble up
+     */
+    this.trigger({
+      type: 'dispose',
+      bubbles: false
+    });
+    this.isDisposed_ = true;
+
+    // Dispose all children.
+    if (this.children_) {
+      for (let i = this.children_.length - 1; i >= 0; i--) {
+        if (this.children_[i].dispose) {
+          this.children_[i].dispose();
+        }
+      }
+    }
+
+    // Delete child references
+    this.children_ = null;
+    this.childIndex_ = null;
+    this.childNameIndex_ = null;
+    this.parentComponent_ = null;
+    if (this.el_) {
+      // Remove element from DOM
+      if (this.el_.parentNode) {
+        if (options.restoreEl) {
+          this.el_.parentNode.replaceChild(options.restoreEl, this.el_);
+        } else {
+          this.el_.parentNode.removeChild(this.el_);
+        }
+      }
+      this.el_ = null;
+    }
+
+    // remove reference to the player after disposing of the element
+    this.player_ = null;
+  }
+
+  /**
+   * Determine whether or not this component has been disposed.
+   *
+   * @return {boolean}
+   *         If the component has been disposed, will be `true`. Otherwise, `false`.
+   */
+  isDisposed() {
+    return Boolean(this.isDisposed_);
+  }
+
+  /**
+   * Return the {@link Player} that the `Component` has attached to.
+   *
+   * @return { import('./player').default }
+   *         The player that this `Component` has attached to.
+   */
+  player() {
+    return this.player_;
+  }
+
+  /**
+   * Deep merge of options objects with new options.
+   * > Note: When both `obj` and `options` contain properties whose values are objects.
+   *         The two properties get merged using {@link module:obj.merge}
+   *
+   * @param {Object} obj
+   *        The object that contains new options.
+   *
+   * @return {Object}
+   *         A new object of `this.options_` and `obj` merged together.
+   */
+  options(obj) {
+    if (!obj) {
+      return this.options_;
+    }
+    this.options_ = merge$1(this.options_, obj);
+    return this.options_;
+  }
+
+  /**
+   * Get the `Component`s DOM element
+   *
+   * @return {Element}
+   *         The DOM element for this `Component`.
+   */
+  el() {
+    return this.el_;
+  }
+
+  /**
+   * Create the `Component`s DOM element.
+   *
+   * @param {string} [tagName]
+   *        Element's DOM node type. e.g. 'div'
+   *
+   * @param {Object} [properties]
+   *        An object of properties that should be set.
+   *
+   * @param {Object} [attributes]
+   *        An object of attributes that should be set.
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl(tagName, properties, attributes) {
+    return createEl(tagName, properties, attributes);
+  }
+
+  /**
+   * Localize a string given the string in english.
+   *
+   * If tokens are provided, it'll try and run a simple token replacement on the provided string.
+   * The tokens it looks for look like `{1}` with the index being 1-indexed into the tokens array.
+   *
+   * If a `defaultValue` is provided, it'll use that over `string`,
+   * if a value isn't found in provided language files.
+   * This is useful if you want to have a descriptive key for token replacement
+   * but have a succinct localized string and not require `en.json` to be included.
+   *
+   * Currently, it is used for the progress bar timing.
+   * ```js
+   * {
+   *   "progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
+   * }
+   * ```
+   * It is then used like so:
+   * ```js
+   * this.localize('progress bar timing: currentTime={1} duration{2}',
+   *               [this.player_.currentTime(), this.player_.duration()],
+   *               '{1} of {2}');
+   * ```
+   *
+   * Which outputs something like: `01:23 of 24:56`.
+   *
+   *
+   * @param {string} string
+   *        The string to localize and the key to lookup in the language files.
+   * @param {string[]} [tokens]
+   *        If the current item has token replacements, provide the tokens here.
+   * @param {string} [defaultValue]
+   *        Defaults to `string`. Can be a default value to use for token replacement
+   *        if the lookup key is needed to be separate.
+   *
+   * @return {string}
+   *         The localized string or if no localization exists the english string.
+   */
+  localize(string, tokens, defaultValue = string) {
+    const code = this.player_.language && this.player_.language();
+    const languages = this.player_.languages && this.player_.languages();
+    const language = languages && languages[code];
+    const primaryCode = code && code.split('-')[0];
+    const primaryLang = languages && languages[primaryCode];
+    let localizedString = defaultValue;
+    if (language && language[string]) {
+      localizedString = language[string];
+    } else if (primaryLang && primaryLang[string]) {
+      localizedString = primaryLang[string];
+    }
+    if (tokens) {
+      localizedString = localizedString.replace(/\{(\d+)\}/g, function (match, index) {
+        const value = tokens[index - 1];
+        let ret = value;
+        if (typeof value === 'undefined') {
+          ret = match;
+        }
+        return ret;
+      });
+    }
+    return localizedString;
+  }
+
+  /**
+   * Handles language change for the player in components. Should be overridden by sub-components.
+   *
+   * @abstract
+   */
+  handleLanguagechange() {}
+
+  /**
+   * Return the `Component`s DOM element. This is where children get inserted.
+   * This will usually be the the same as the element returned in {@link Component#el}.
+   *
+   * @return {Element}
+   *         The content element for this `Component`.
+   */
+  contentEl() {
+    return this.contentEl_ || this.el_;
+  }
+
+  /**
+   * Get this `Component`s ID
+   *
+   * @return {string}
+   *         The id of this `Component`
+   */
+  id() {
+    return this.id_;
+  }
+
+  /**
+   * Get the `Component`s name. The name gets used to reference the `Component`
+   * and is set during registration.
+   *
+   * @return {string}
+   *         The name of this `Component`.
+   */
+  name() {
+    return this.name_;
+  }
+
+  /**
+   * Get an array of all child components
+   *
+   * @return {Array}
+   *         The children
+   */
+  children() {
+    return this.children_;
+  }
+
+  /**
+   * Returns the child `Component` with the given `id`.
+   *
+   * @param {string} id
+   *        The id of the child `Component` to get.
+   *
+   * @return {Component|undefined}
+   *         The child `Component` with the given `id` or undefined.
+   */
+  getChildById(id) {
+    return this.childIndex_[id];
+  }
+
+  /**
+   * Returns the child `Component` with the given `name`.
+   *
+   * @param {string} name
+   *        The name of the child `Component` to get.
+   *
+   * @return {Component|undefined}
+   *         The child `Component` with the given `name` or undefined.
+   */
+  getChild(name) {
+    if (!name) {
+      return;
+    }
+    return this.childNameIndex_[name];
+  }
+
+  /**
+   * Returns the descendant `Component` following the givent
+   * descendant `names`. For instance ['foo', 'bar', 'baz'] would
+   * try to get 'foo' on the current component, 'bar' on the 'foo'
+   * component and 'baz' on the 'bar' component and return undefined
+   * if any of those don't exist.
+   *
+   * @param {...string[]|...string} names
+   *        The name of the child `Component` to get.
+   *
+   * @return {Component|undefined}
+   *         The descendant `Component` following the given descendant
+   *         `names` or undefined.
+   */
+  getDescendant(...names) {
+    // flatten array argument into the main array
+    names = names.reduce((acc, n) => acc.concat(n), []);
+    let currentChild = this;
+    for (let i = 0; i < names.length; i++) {
+      currentChild = currentChild.getChild(names[i]);
+      if (!currentChild || !currentChild.getChild) {
+        return;
+      }
+    }
+    return currentChild;
+  }
+
+  /**
+   * Adds an SVG icon element to another element or component.
+   *
+   * @param {string} iconName
+   *        The name of icon. A list of all the icon names can be found at 'sandbox/svg-icons.html'
+   *
+   * @param {Element} [el=this.el()]
+   *        Element to set the title on. Defaults to the current Component's element.
+   *
+   * @return {Element}
+   *        The newly created icon element.
+   */
+  setIcon(iconName, el = this.el()) {
+    // TODO: In v9 of video.js, we will want to remove font icons entirely.
+    // This means this check, as well as the others throughout the code, and
+    // the unecessary CSS for font icons, will need to be removed.
+    // See https://github.com/videojs/video.js/pull/8260 as to which components
+    // need updating.
+    if (!this.player_.options_.experimentalSvgIcons) {
+      return;
+    }
+    const xmlnsURL = 'http://www.w3.org/2000/svg';
+
+    // The below creates an element in the format of:
+    // <span><svg><use>....</use></svg></span>
+    const iconContainer = createEl('span', {
+      className: 'vjs-icon-placeholder vjs-svg-icon'
+    }, {
+      'aria-hidden': 'true'
+    });
+    const svgEl = document.createElementNS(xmlnsURL, 'svg');
+    svgEl.setAttributeNS(null, 'viewBox', '0 0 512 512');
+    const useEl = document.createElementNS(xmlnsURL, 'use');
+    svgEl.appendChild(useEl);
+    useEl.setAttributeNS(null, 'href', `#vjs-icon-${iconName}`);
+    iconContainer.appendChild(svgEl);
+
+    // Replace a pre-existing icon if one exists.
+    if (this.iconIsSet_) {
+      el.replaceChild(iconContainer, el.querySelector('.vjs-icon-placeholder'));
+    } else {
+      el.appendChild(iconContainer);
+    }
+    this.iconIsSet_ = true;
+    return iconContainer;
+  }
+
+  /**
+   * Add a child `Component` inside the current `Component`.
+   *
+   * @param {string|Component} child
+   *        The name or instance of a child to add.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of options that will get passed to children of
+   *        the child.
+   *
+   * @param {number} [index=this.children_.length]
+   *        The index to attempt to add a child into.
+   *
+   *
+   * @return {Component}
+   *         The `Component` that gets added as a child. When using a string the
+   *         `Component` will get created by this process.
+   */
+  addChild(child, options = {}, index = this.children_.length) {
+    let component;
+    let componentName;
+
+    // If child is a string, create component with options
+    if (typeof child === 'string') {
+      componentName = toTitleCase$1(child);
+      const componentClassName = options.componentClass || componentName;
+
+      // Set name through options
+      options.name = componentName;
+
+      // Create a new object & element for this controls set
+      // If there's no .player_, this is a player
+      const ComponentClass = Component$1.getComponent(componentClassName);
+      if (!ComponentClass) {
+        throw new Error(`Component ${componentClassName} does not exist`);
+      }
+
+      // data stored directly on the videojs object may be
+      // misidentified as a component to retain
+      // backwards-compatibility with 4.x. check to make sure the
+      // component class can be instantiated.
+      if (typeof ComponentClass !== 'function') {
+        return null;
+      }
+      component = new ComponentClass(this.player_ || this, options);
+
+      // child is a component instance
+    } else {
+      component = child;
+    }
+    if (component.parentComponent_) {
+      component.parentComponent_.removeChild(component);
+    }
+    this.children_.splice(index, 0, component);
+    component.parentComponent_ = this;
+    if (typeof component.id === 'function') {
+      this.childIndex_[component.id()] = component;
+    }
+
+    // If a name wasn't used to create the component, check if we can use the
+    // name function of the component
+    componentName = componentName || component.name && toTitleCase$1(component.name());
+    if (componentName) {
+      this.childNameIndex_[componentName] = component;
+      this.childNameIndex_[toLowerCase(componentName)] = component;
+    }
+
+    // Add the UI object's element to the container div (box)
+    // Having an element is not required
+    if (typeof component.el === 'function' && component.el()) {
+      // If inserting before a component, insert before that component's element
+      let refNode = null;
+      if (this.children_[index + 1]) {
+        // Most children are components, but the video tech is an HTML element
+        if (this.children_[index + 1].el_) {
+          refNode = this.children_[index + 1].el_;
+        } else if (isEl(this.children_[index + 1])) {
+          refNode = this.children_[index + 1];
+        }
+      }
+      this.contentEl().insertBefore(component.el(), refNode);
+    }
+
+    // Return so it can stored on parent object if desired.
+    return component;
+  }
+
+  /**
+   * Remove a child `Component` from this `Component`s list of children. Also removes
+   * the child `Component`s element from this `Component`s element.
+   *
+   * @param {Component} component
+   *        The child `Component` to remove.
+   */
+  removeChild(component) {
+    if (typeof component === 'string') {
+      component = this.getChild(component);
+    }
+    if (!component || !this.children_) {
+      return;
+    }
+    let childFound = false;
+    for (let i = this.children_.length - 1; i >= 0; i--) {
+      if (this.children_[i] === component) {
+        childFound = true;
+        this.children_.splice(i, 1);
+        break;
+      }
+    }
+    if (!childFound) {
+      return;
+    }
+    component.parentComponent_ = null;
+    this.childIndex_[component.id()] = null;
+    this.childNameIndex_[toTitleCase$1(component.name())] = null;
+    this.childNameIndex_[toLowerCase(component.name())] = null;
+    const compEl = component.el();
+    if (compEl && compEl.parentNode === this.contentEl()) {
+      this.contentEl().removeChild(component.el());
+    }
+  }
+
+  /**
+   * Add and initialize default child `Component`s based upon options.
+   */
+  initChildren() {
+    const children = this.options_.children;
+    if (children) {
+      // `this` is `parent`
+      const parentOptions = this.options_;
+      const handleAdd = child => {
+        const name = child.name;
+        let opts = child.opts;
+
+        // Allow options for children to be set at the parent options
+        // e.g. videojs(id, { controlBar: false });
+        // instead of videojs(id, { children: { controlBar: false });
+        if (parentOptions[name] !== undefined) {
+          opts = parentOptions[name];
+        }
+
+        // Allow for disabling default components
+        // e.g. options['children']['posterImage'] = false
+        if (opts === false) {
+          return;
+        }
+
+        // Allow options to be passed as a simple boolean if no configuration
+        // is necessary.
+        if (opts === true) {
+          opts = {};
+        }
+
+        // We also want to pass the original player options
+        // to each component as well so they don't need to
+        // reach back into the player for options later.
+        opts.playerOptions = this.options_.playerOptions;
+
+        // Create and add the child component.
+        // Add a direct reference to the child by name on the parent instance.
+        // If two of the same component are used, different names should be supplied
+        // for each
+        const newChild = this.addChild(name, opts);
+        if (newChild) {
+          this[name] = newChild;
+        }
+      };
+
+      // Allow for an array of children details to passed in the options
+      let workingChildren;
+      const Tech = Component$1.getComponent('Tech');
+      if (Array.isArray(children)) {
+        workingChildren = children;
+      } else {
+        workingChildren = Object.keys(children);
+      }
+      workingChildren
+      // children that are in this.options_ but also in workingChildren  would
+      // give us extra children we do not want. So, we want to filter them out.
+      .concat(Object.keys(this.options_).filter(function (child) {
+        return !workingChildren.some(function (wchild) {
+          if (typeof wchild === 'string') {
+            return child === wchild;
+          }
+          return child === wchild.name;
+        });
+      })).map(child => {
+        let name;
+        let opts;
+        if (typeof child === 'string') {
+          name = child;
+          opts = children[name] || this.options_[name] || {};
+        } else {
+          name = child.name;
+          opts = child;
+        }
+        return {
+          name,
+          opts
+        };
+      }).filter(child => {
+        // we have to make sure that child.name isn't in the techOrder since
+        // techs are registered as Components but can't aren't compatible
+        // See https://github.com/videojs/video.js/issues/2772
+        const c = Component$1.getComponent(child.opts.componentClass || toTitleCase$1(child.name));
+        return c && !Tech.isTech(c);
+      }).forEach(handleAdd);
+    }
+  }
+
+  /**
+   * Builds the default DOM class name. Should be overridden by sub-components.
+   *
+   * @return {string}
+   *         The DOM class name for this object.
+   *
+   * @abstract
+   */
+  buildCSSClass() {
+    // Child classes can include a function that does:
+    // return 'CLASS NAME' + this._super();
+    return '';
+  }
+
+  /**
+   * Bind a listener to the component's ready state.
+   * Different from event listeners in that if the ready event has already happened
+   * it will trigger the function immediately.
+   *
+   * @param {ReadyCallback} fn
+   *        Function that gets called when the `Component` is ready.
+   *
+   * @return {Component}
+   *         Returns itself; method can be chained.
+   */
+  ready(fn, sync = false) {
+    if (!fn) {
+      return;
+    }
+    if (!this.isReady_) {
+      this.readyQueue_ = this.readyQueue_ || [];
+      this.readyQueue_.push(fn);
+      return;
+    }
+    if (sync) {
+      fn.call(this);
+    } else {
+      // Call the function asynchronously by default for consistency
+      this.setTimeout(fn, 1);
+    }
+  }
+
+  /**
+   * Trigger all the ready listeners for this `Component`.
+   *
+   * @fires Component#ready
+   */
+  triggerReady() {
+    this.isReady_ = true;
+
+    // Ensure ready is triggered asynchronously
+    this.setTimeout(function () {
+      const readyQueue = this.readyQueue_;
+
+      // Reset Ready Queue
+      this.readyQueue_ = [];
+      if (readyQueue && readyQueue.length > 0) {
+        readyQueue.forEach(function (fn) {
+          fn.call(this);
+        }, this);
+      }
+
+      // Allow for using event listeners also
+      /**
+       * Triggered when a `Component` is ready.
+       *
+       * @event Component#ready
+       * @type {Event}
+       */
+      this.trigger('ready');
+    }, 1);
+  }
+
+  /**
+   * Find a single DOM element matching a `selector`. This can be within the `Component`s
+   * `contentEl()` or another custom context.
+   *
+   * @param {string} selector
+   *        A valid CSS selector, which will be passed to `querySelector`.
+   *
+   * @param {Element|string} [context=this.contentEl()]
+   *        A DOM element within which to query. Can also be a selector string in
+   *        which case the first matching element will get used as context. If
+   *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+   *        nothing it falls back to `document`.
+   *
+   * @return {Element|null}
+   *         the dom element that was found, or null
+   *
+   * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+   */
+  $(selector, context) {
+    return $(selector, context || this.contentEl());
+  }
+
+  /**
+   * Finds all DOM element matching a `selector`. This can be within the `Component`s
+   * `contentEl()` or another custom context.
+   *
+   * @param {string} selector
+   *        A valid CSS selector, which will be passed to `querySelectorAll`.
+   *
+   * @param {Element|string} [context=this.contentEl()]
+   *        A DOM element within which to query. Can also be a selector string in
+   *        which case the first matching element will get used as context. If
+   *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+   *        nothing it falls back to `document`.
+   *
+   * @return {NodeList}
+   *         a list of dom elements that were found
+   *
+   * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+   */
+  $$(selector, context) {
+    return $$(selector, context || this.contentEl());
+  }
+
+  /**
+   * Check if a component's element has a CSS class name.
+   *
+   * @param {string} classToCheck
+   *        CSS class name to check.
+   *
+   * @return {boolean}
+   *         - True if the `Component` has the class.
+   *         - False if the `Component` does not have the class`
+   */
+  hasClass(classToCheck) {
+    return hasClass(this.el_, classToCheck);
+  }
+
+  /**
+   * Add a CSS class name to the `Component`s element.
+   *
+   * @param {...string} classesToAdd
+   *        One or more CSS class name to add.
+   */
+  addClass(...classesToAdd) {
+    addClass(this.el_, ...classesToAdd);
+  }
+
+  /**
+   * Remove a CSS class name from the `Component`s element.
+   *
+   * @param {...string} classesToRemove
+   *        One or more CSS class name to remove.
+   */
+  removeClass(...classesToRemove) {
+    removeClass(this.el_, ...classesToRemove);
+  }
+
+  /**
+   * Add or remove a CSS class name from the component's element.
+   * - `classToToggle` gets added when {@link Component#hasClass} would return false.
+   * - `classToToggle` gets removed when {@link Component#hasClass} would return true.
+   *
+   * @param  {string} classToToggle
+   *         The class to add or remove based on (@link Component#hasClass}
+   *
+   * @param  {boolean|Dom~predicate} [predicate]
+   *         An {@link Dom~predicate} function or a boolean
+   */
+  toggleClass(classToToggle, predicate) {
+    toggleClass(this.el_, classToToggle, predicate);
+  }
+
+  /**
+   * Show the `Component`s element if it is hidden by removing the
+   * 'vjs-hidden' class name from it.
+   */
+  show() {
+    this.removeClass('vjs-hidden');
+  }
+
+  /**
+   * Hide the `Component`s element if it is currently showing by adding the
+   * 'vjs-hidden` class name to it.
+   */
+  hide() {
+    this.addClass('vjs-hidden');
+  }
+
+  /**
+   * Lock a `Component`s element in its visible state by adding the 'vjs-lock-showing'
+   * class name to it. Used during fadeIn/fadeOut.
+   *
+   * @private
+   */
+  lockShowing() {
+    this.addClass('vjs-lock-showing');
+  }
+
+  /**
+   * Unlock a `Component`s element from its visible state by removing the 'vjs-lock-showing'
+   * class name from it. Used during fadeIn/fadeOut.
+   *
+   * @private
+   */
+  unlockShowing() {
+    this.removeClass('vjs-lock-showing');
+  }
+
+  /**
+   * Get the value of an attribute on the `Component`s element.
+   *
+   * @param {string} attribute
+   *        Name of the attribute to get the value from.
+   *
+   * @return {string|null}
+   *         - The value of the attribute that was asked for.
+   *         - Can be an empty string on some browsers if the attribute does not exist
+   *           or has no value
+   *         - Most browsers will return null if the attribute does not exist or has
+   *           no value.
+   *
+   * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute}
+   */
+  getAttribute(attribute) {
+    return getAttribute(this.el_, attribute);
+  }
+
+  /**
+   * Set the value of an attribute on the `Component`'s element
+   *
+   * @param {string} attribute
+   *        Name of the attribute to set.
+   *
+   * @param {string} value
+   *        Value to set the attribute to.
+   *
+   * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute}
+   */
+  setAttribute(attribute, value) {
+    setAttribute(this.el_, attribute, value);
+  }
+
+  /**
+   * Remove an attribute from the `Component`s element.
+   *
+   * @param {string} attribute
+   *        Name of the attribute to remove.
+   *
+   * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute}
+   */
+  removeAttribute(attribute) {
+    removeAttribute(this.el_, attribute);
+  }
+
+  /**
+   * Get or set the width of the component based upon the CSS styles.
+   * See {@link Component#dimension} for more detailed information.
+   *
+   * @param {number|string} [num]
+   *        The width that you want to set postfixed with '%', 'px' or nothing.
+   *
+   * @param {boolean} [skipListeners]
+   *        Skip the componentresize event trigger
+   *
+   * @return {number|undefined}
+   *         The width when getting, zero if there is no width
+   */
+  width(num, skipListeners) {
+    return this.dimension('width', num, skipListeners);
+  }
+
+  /**
+   * Get or set the height of the component based upon the CSS styles.
+   * See {@link Component#dimension} for more detailed information.
+   *
+   * @param {number|string} [num]
+   *        The height that you want to set postfixed with '%', 'px' or nothing.
+   *
+   * @param {boolean} [skipListeners]
+   *        Skip the componentresize event trigger
+   *
+   * @return {number|undefined}
+   *         The height when getting, zero if there is no height
+   */
+  height(num, skipListeners) {
+    return this.dimension('height', num, skipListeners);
+  }
+
+  /**
+   * Set both the width and height of the `Component` element at the same time.
+   *
+   * @param  {number|string} width
+   *         Width to set the `Component`s element to.
+   *
+   * @param  {number|string} height
+   *         Height to set the `Component`s element to.
+   */
+  dimensions(width, height) {
+    // Skip componentresize listeners on width for optimization
+    this.width(width, true);
+    this.height(height);
+  }
+
+  /**
+   * Get or set width or height of the `Component` element. This is the shared code
+   * for the {@link Component#width} and {@link Component#height}.
+   *
+   * Things to know:
+   * - If the width or height in an number this will return the number postfixed with 'px'.
+   * - If the width/height is a percent this will return the percent postfixed with '%'
+   * - Hidden elements have a width of 0 with `window.getComputedStyle`. This function
+   *   defaults to the `Component`s `style.width` and falls back to `window.getComputedStyle`.
+   *   See [this]{@link http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/}
+   *   for more information
+   * - If you want the computed style of the component, use {@link Component#currentWidth}
+   *   and {@link {Component#currentHeight}
+   *
+   * @fires Component#componentresize
+   *
+   * @param {string} widthOrHeight
+   8        'width' or 'height'
+   *
+   * @param  {number|string} [num]
+   8         New dimension
+   *
+   * @param  {boolean} [skipListeners]
+   *         Skip componentresize event trigger
+   *
+   * @return {number|undefined}
+   *         The dimension when getting or 0 if unset
+   */
+  dimension(widthOrHeight, num, skipListeners) {
+    if (num !== undefined) {
+      // Set to zero if null or literally NaN (NaN !== NaN)
+      if (num === null || num !== num) {
+        num = 0;
+      }
+
+      // Check if using css width/height (% or px) and adjust
+      if (('' + num).indexOf('%') !== -1 || ('' + num).indexOf('px') !== -1) {
+        this.el_.style[widthOrHeight] = num;
+      } else if (num === 'auto') {
+        this.el_.style[widthOrHeight] = '';
+      } else {
+        this.el_.style[widthOrHeight] = num + 'px';
+      }
+
+      // skipListeners allows us to avoid triggering the resize event when setting both width and height
+      if (!skipListeners) {
+        /**
+         * Triggered when a component is resized.
+         *
+         * @event Component#componentresize
+         * @type {Event}
+         */
+        this.trigger('componentresize');
+      }
+      return;
+    }
+
+    // Not setting a value, so getting it
+    // Make sure element exists
+    if (!this.el_) {
+      return 0;
+    }
+
+    // Get dimension value from style
+    const val = this.el_.style[widthOrHeight];
+    const pxIndex = val.indexOf('px');
+    if (pxIndex !== -1) {
+      // Return the pixel value with no 'px'
+      return parseInt(val.slice(0, pxIndex), 10);
+    }
+
+    // No px so using % or no style was set, so falling back to offsetWidth/height
+    // If component has display:none, offset will return 0
+    // TODO: handle display:none and no dimension style using px
+    return parseInt(this.el_['offset' + toTitleCase$1(widthOrHeight)], 10);
+  }
+
+  /**
+   * Get the computed width or the height of the component's element.
+   *
+   * Uses `window.getComputedStyle`.
+   *
+   * @param {string} widthOrHeight
+   *        A string containing 'width' or 'height'. Whichever one you want to get.
+   *
+   * @return {number}
+   *         The dimension that gets asked for or 0 if nothing was set
+   *         for that dimension.
+   */
+  currentDimension(widthOrHeight) {
+    let computedWidthOrHeight = 0;
+    if (widthOrHeight !== 'width' && widthOrHeight !== 'height') {
+      throw new Error('currentDimension only accepts width or height value');
+    }
+    computedWidthOrHeight = computedStyle(this.el_, widthOrHeight);
+
+    // remove 'px' from variable and parse as integer
+    computedWidthOrHeight = parseFloat(computedWidthOrHeight);
+
+    // if the computed value is still 0, it's possible that the browser is lying
+    // and we want to check the offset values.
+    // This code also runs wherever getComputedStyle doesn't exist.
+    if (computedWidthOrHeight === 0 || isNaN(computedWidthOrHeight)) {
+      const rule = `offset${toTitleCase$1(widthOrHeight)}`;
+      computedWidthOrHeight = this.el_[rule];
+    }
+    return computedWidthOrHeight;
+  }
+
+  /**
+   * An object that contains width and height values of the `Component`s
+   * computed style. Uses `window.getComputedStyle`.
+   *
+   * @typedef {Object} Component~DimensionObject
+   *
+   * @property {number} width
+   *           The width of the `Component`s computed style.
+   *
+   * @property {number} height
+   *           The height of the `Component`s computed style.
+   */
+
+  /**
+   * Get an object that contains computed width and height values of the
+   * component's element.
+   *
+   * Uses `window.getComputedStyle`.
+   *
+   * @return {Component~DimensionObject}
+   *         The computed dimensions of the component's element.
+   */
+  currentDimensions() {
+    return {
+      width: this.currentDimension('width'),
+      height: this.currentDimension('height')
+    };
+  }
+
+  /**
+   * Get the computed width of the component's element.
+   *
+   * Uses `window.getComputedStyle`.
+   *
+   * @return {number}
+   *         The computed width of the component's element.
+   */
+  currentWidth() {
+    return this.currentDimension('width');
+  }
+
+  /**
+   * Get the computed height of the component's element.
+   *
+   * Uses `window.getComputedStyle`.
+   *
+   * @return {number}
+   *         The computed height of the component's element.
+   */
+  currentHeight() {
+    return this.currentDimension('height');
+  }
+
+  /**
+   * Set the focus to this component
+   */
+  focus() {
+    this.el_.focus();
+  }
+
+  /**
+   * Remove the focus from this component
+   */
+  blur() {
+    this.el_.blur();
+  }
+
+  /**
+   * When this Component receives a `keydown` event which it does not process,
+   *  it passes the event to the Player for handling.
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   */
+  handleKeyDown(event) {
+    if (this.player_) {
+      // We only stop propagation here because we want unhandled events to fall
+      // back to the browser. Exclude Tab for focus trapping.
+      if (!keycode.isEventKey(event, 'Tab')) {
+        event.stopPropagation();
+      }
+      this.player_.handleKeyDown(event);
+    }
+  }
+
+  /**
+   * Many components used to have a `handleKeyPress` method, which was poorly
+   * named because it listened to a `keydown` event. This method name now
+   * delegates to `handleKeyDown`. This means anyone calling `handleKeyPress`
+   * will not see their method calls stop working.
+   *
+   * @param {KeyboardEvent} event
+   *        The event that caused this function to be called.
+   */
+  handleKeyPress(event) {
+    this.handleKeyDown(event);
+  }
+
+  /**
+   * Emit a 'tap' events when touch event support gets detected. This gets used to
+   * support toggling the controls through a tap on the video. They get enabled
+   * because every sub-component would have extra overhead otherwise.
+   *
+   * @protected
+   * @fires Component#tap
+   * @listens Component#touchstart
+   * @listens Component#touchmove
+   * @listens Component#touchleave
+   * @listens Component#touchcancel
+   * @listens Component#touchend
+    */
+  emitTapEvents() {
+    // Track the start time so we can determine how long the touch lasted
+    let touchStart = 0;
+    let firstTouch = null;
+
+    // Maximum movement allowed during a touch event to still be considered a tap
+    // Other popular libs use anywhere from 2 (hammer.js) to 15,
+    // so 10 seems like a nice, round number.
+    const tapMovementThreshold = 10;
+
+    // The maximum length a touch can be while still being considered a tap
+    const touchTimeThreshold = 200;
+    let couldBeTap;
+    this.on('touchstart', function (event) {
+      // If more than one finger, don't consider treating this as a click
+      if (event.touches.length === 1) {
+        // Copy pageX/pageY from the object
+        firstTouch = {
+          pageX: event.touches[0].pageX,
+          pageY: event.touches[0].pageY
+        };
+        // Record start time so we can detect a tap vs. "touch and hold"
+        touchStart = window$1.performance.now();
+        // Reset couldBeTap tracking
+        couldBeTap = true;
+      }
+    });
+    this.on('touchmove', function (event) {
+      // If more than one finger, don't consider treating this as a click
+      if (event.touches.length > 1) {
+        couldBeTap = false;
+      } else if (firstTouch) {
+        // Some devices will throw touchmoves for all but the slightest of taps.
+        // So, if we moved only a small distance, this could still be a tap
+        const xdiff = event.touches[0].pageX - firstTouch.pageX;
+        const ydiff = event.touches[0].pageY - firstTouch.pageY;
+        const touchDistance = Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+        if (touchDistance > tapMovementThreshold) {
+          couldBeTap = false;
+        }
+      }
+    });
+    const noTap = function () {
+      couldBeTap = false;
+    };
+
+    // TODO: Listen to the original target. http://youtu.be/DujfpXOKUp8?t=13m8s
+    this.on('touchleave', noTap);
+    this.on('touchcancel', noTap);
+
+    // When the touch ends, measure how long it took and trigger the appropriate
+    // event
+    this.on('touchend', function (event) {
+      firstTouch = null;
+      // Proceed only if the touchmove/leave/cancel event didn't happen
+      if (couldBeTap === true) {
+        // Measure how long the touch lasted
+        const touchTime = window$1.performance.now() - touchStart;
+
+        // Make sure the touch was less than the threshold to be considered a tap
+        if (touchTime < touchTimeThreshold) {
+          // Don't let browser turn this into a click
+          event.preventDefault();
+          /**
+           * Triggered when a `Component` is tapped.
+           *
+           * @event Component#tap
+           * @type {MouseEvent}
+           */
+          this.trigger('tap');
+          // It may be good to copy the touchend event object and change the
+          // type to tap, if the other event properties aren't exact after
+          // Events.fixEvent runs (e.g. event.target)
+        }
+      }
+    });
+  }
+
+  /**
+   * This function reports user activity whenever touch events happen. This can get
+   * turned off by any sub-components that wants touch events to act another way.
+   *
+   * Report user touch activity when touch events occur. User activity gets used to
+   * determine when controls should show/hide. It is simple when it comes to mouse
+   * events, because any mouse event should show the controls. So we capture mouse
+   * events that bubble up to the player and report activity when that happens.
+   * With touch events it isn't as easy as `touchstart` and `touchend` toggle player
+   * controls. So touch events can't help us at the player level either.
+   *
+   * User activity gets checked asynchronously. So what could happen is a tap event
+   * on the video turns the controls off. Then the `touchend` event bubbles up to
+   * the player. Which, if it reported user activity, would turn the controls right
+   * back on. We also don't want to completely block touch events from bubbling up.
+   * Furthermore a `touchmove` event and anything other than a tap, should not turn
+   * controls back on.
+   *
+   * @listens Component#touchstart
+   * @listens Component#touchmove
+   * @listens Component#touchend
+   * @listens Component#touchcancel
+   */
+  enableTouchActivity() {
+    // Don't continue if the root player doesn't support reporting user activity
+    if (!this.player() || !this.player().reportUserActivity) {
+      return;
+    }
+
+    // listener for reporting that the user is active
+    const report = bind_(this.player(), this.player().reportUserActivity);
+    let touchHolding;
+    this.on('touchstart', function () {
+      report();
+      // For as long as the they are touching the device or have their mouse down,
+      // we consider them active even if they're not moving their finger or mouse.
+      // So we want to continue to update that they are active
+      this.clearInterval(touchHolding);
+      // report at the same interval as activityCheck
+      touchHolding = this.setInterval(report, 250);
+    });
+    const touchEnd = function (event) {
+      report();
+      // stop the interval that maintains activity if the touch is holding
+      this.clearInterval(touchHolding);
+    };
+    this.on('touchmove', report);
+    this.on('touchend', touchEnd);
+    this.on('touchcancel', touchEnd);
+  }
+
+  /**
+   * A callback that has no parameters and is bound into `Component`s context.
+   *
+   * @callback Component~GenericCallback
+   * @this Component
+   */
+
+  /**
+   * Creates a function that runs after an `x` millisecond timeout. This function is a
+   * wrapper around `window.setTimeout`. There are a few reasons to use this one
+   * instead though:
+   * 1. It gets cleared via  {@link Component#clearTimeout} when
+   *    {@link Component#dispose} gets called.
+   * 2. The function callback will gets turned into a {@link Component~GenericCallback}
+   *
+   * > Note: You can't use `window.clearTimeout` on the id returned by this function. This
+   *         will cause its dispose listener not to get cleaned up! Please use
+   *         {@link Component#clearTimeout} or {@link Component#dispose} instead.
+   *
+   * @param {Component~GenericCallback} fn
+   *        The function that will be run after `timeout`.
+   *
+   * @param {number} timeout
+   *        Timeout in milliseconds to delay before executing the specified function.
+   *
+   * @return {number}
+   *         Returns a timeout ID that gets used to identify the timeout. It can also
+   *         get used in {@link Component#clearTimeout} to clear the timeout that
+   *         was set.
+   *
+   * @listens Component#dispose
+   * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout}
+   */
+  setTimeout(fn, timeout) {
+    // declare as variables so they are properly available in timeout function
+    // eslint-disable-next-line
+    var timeoutId;
+    fn = bind_(this, fn);
+    this.clearTimersOnDispose_();
+    timeoutId = window$1.setTimeout(() => {
+      if (this.setTimeoutIds_.has(timeoutId)) {
+        this.setTimeoutIds_.delete(timeoutId);
+      }
+      fn();
+    }, timeout);
+    this.setTimeoutIds_.add(timeoutId);
+    return timeoutId;
+  }
+
+  /**
+   * Clears a timeout that gets created via `window.setTimeout` or
+   * {@link Component#setTimeout}. If you set a timeout via {@link Component#setTimeout}
+   * use this function instead of `window.clearTimout`. If you don't your dispose
+   * listener will not get cleaned up until {@link Component#dispose}!
+   *
+   * @param {number} timeoutId
+   *        The id of the timeout to clear. The return value of
+   *        {@link Component#setTimeout} or `window.setTimeout`.
+   *
+   * @return {number}
+   *         Returns the timeout id that was cleared.
+   *
+   * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout}
+   */
+  clearTimeout(timeoutId) {
+    if (this.setTimeoutIds_.has(timeoutId)) {
+      this.setTimeoutIds_.delete(timeoutId);
+      window$1.clearTimeout(timeoutId);
+    }
+    return timeoutId;
+  }
+
+  /**
+   * Creates a function that gets run every `x` milliseconds. This function is a wrapper
+   * around `window.setInterval`. There are a few reasons to use this one instead though.
+   * 1. It gets cleared via  {@link Component#clearInterval} when
+   *    {@link Component#dispose} gets called.
+   * 2. The function callback will be a {@link Component~GenericCallback}
+   *
+   * @param {Component~GenericCallback} fn
+   *        The function to run every `x` seconds.
+   *
+   * @param {number} interval
+   *        Execute the specified function every `x` milliseconds.
+   *
+   * @return {number}
+   *         Returns an id that can be used to identify the interval. It can also be be used in
+   *         {@link Component#clearInterval} to clear the interval.
+   *
+   * @listens Component#dispose
+   * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval}
+   */
+  setInterval(fn, interval) {
+    fn = bind_(this, fn);
+    this.clearTimersOnDispose_();
+    const intervalId = window$1.setInterval(fn, interval);
+    this.setIntervalIds_.add(intervalId);
+    return intervalId;
+  }
+
+  /**
+   * Clears an interval that gets created via `window.setInterval` or
+   * {@link Component#setInterval}. If you set an interval via {@link Component#setInterval}
+   * use this function instead of `window.clearInterval`. If you don't your dispose
+   * listener will not get cleaned up until {@link Component#dispose}!
+   *
+   * @param {number} intervalId
+   *        The id of the interval to clear. The return value of
+   *        {@link Component#setInterval} or `window.setInterval`.
+   *
+   * @return {number}
+   *         Returns the interval id that was cleared.
+   *
+   * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval}
+   */
+  clearInterval(intervalId) {
+    if (this.setIntervalIds_.has(intervalId)) {
+      this.setIntervalIds_.delete(intervalId);
+      window$1.clearInterval(intervalId);
+    }
+    return intervalId;
+  }
+
+  /**
+   * Queues up a callback to be passed to requestAnimationFrame (rAF), but
+   * with a few extra bonuses:
+   *
+   * - Supports browsers that do not support rAF by falling back to
+   *   {@link Component#setTimeout}.
+   *
+   * - The callback is turned into a {@link Component~GenericCallback} (i.e.
+   *   bound to the component).
+   *
+   * - Automatic cancellation of the rAF callback is handled if the component
+   *   is disposed before it is called.
+   *
+   * @param  {Component~GenericCallback} fn
+   *         A function that will be bound to this component and executed just
+   *         before the browser's next repaint.
+   *
+   * @return {number}
+   *         Returns an rAF ID that gets used to identify the timeout. It can
+   *         also be used in {@link Component#cancelAnimationFrame} to cancel
+   *         the animation frame callback.
+   *
+   * @listens Component#dispose
+   * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame}
+   */
+  requestAnimationFrame(fn) {
+    this.clearTimersOnDispose_();
+
+    // declare as variables so they are properly available in rAF function
+    // eslint-disable-next-line
+    var id;
+    fn = bind_(this, fn);
+    id = window$1.requestAnimationFrame(() => {
+      if (this.rafIds_.has(id)) {
+        this.rafIds_.delete(id);
+      }
+      fn();
+    });
+    this.rafIds_.add(id);
+    return id;
+  }
+
+  /**
+   * Request an animation frame, but only one named animation
+   * frame will be queued. Another will never be added until
+   * the previous one finishes.
+   *
+   * @param {string} name
+   *        The name to give this requestAnimationFrame
+   *
+   * @param  {Component~GenericCallback} fn
+   *         A function that will be bound to this component and executed just
+   *         before the browser's next repaint.
+   */
+  requestNamedAnimationFrame(name, fn) {
+    if (this.namedRafs_.has(name)) {
+      return;
+    }
+    this.clearTimersOnDispose_();
+    fn = bind_(this, fn);
+    const id = this.requestAnimationFrame(() => {
+      fn();
+      if (this.namedRafs_.has(name)) {
+        this.namedRafs_.delete(name);
+      }
+    });
+    this.namedRafs_.set(name, id);
+    return name;
+  }
+
+  /**
+   * Cancels a current named animation frame if it exists.
+   *
+   * @param {string} name
+   *        The name of the requestAnimationFrame to cancel.
+   */
+  cancelNamedAnimationFrame(name) {
+    if (!this.namedRafs_.has(name)) {
+      return;
+    }
+    this.cancelAnimationFrame(this.namedRafs_.get(name));
+    this.namedRafs_.delete(name);
+  }
+
+  /**
+   * Cancels a queued callback passed to {@link Component#requestAnimationFrame}
+   * (rAF).
+   *
+   * If you queue an rAF callback via {@link Component#requestAnimationFrame},
+   * use this function instead of `window.cancelAnimationFrame`. If you don't,
+   * your dispose listener will not get cleaned up until {@link Component#dispose}!
+   *
+   * @param {number} id
+   *        The rAF ID to clear. The return value of {@link Component#requestAnimationFrame}.
+   *
+   * @return {number}
+   *         Returns the rAF ID that was cleared.
+   *
+   * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/cancelAnimationFrame}
+   */
+  cancelAnimationFrame(id) {
+    if (this.rafIds_.has(id)) {
+      this.rafIds_.delete(id);
+      window$1.cancelAnimationFrame(id);
+    }
+    return id;
+  }
+
+  /**
+   * A function to setup `requestAnimationFrame`, `setTimeout`,
+   * and `setInterval`, clearing on dispose.
+   *
+   * > Previously each timer added and removed dispose listeners on it's own.
+   * For better performance it was decided to batch them all, and use `Set`s
+   * to track outstanding timer ids.
+   *
+   * @private
+   */
+  clearTimersOnDispose_() {
+    if (this.clearingTimersOnDispose_) {
+      return;
+    }
+    this.clearingTimersOnDispose_ = true;
+    this.one('dispose', () => {
+      [['namedRafs_', 'cancelNamedAnimationFrame'], ['rafIds_', 'cancelAnimationFrame'], ['setTimeoutIds_', 'clearTimeout'], ['setIntervalIds_', 'clearInterval']].forEach(([idName, cancelName]) => {
+        // for a `Set` key will actually be the value again
+        // so forEach((val, val) =>` but for maps we want to use
+        // the key.
+        this[idName].forEach((val, key) => this[cancelName](key));
+      });
+      this.clearingTimersOnDispose_ = false;
+    });
+  }
+
+  /**
+   * Register a `Component` with `videojs` given the name and the component.
+   *
+   * > NOTE: {@link Tech}s should not be registered as a `Component`. {@link Tech}s
+   *         should be registered using {@link Tech.registerTech} or
+   *         {@link videojs:videojs.registerTech}.
+   *
+   * > NOTE: This function can also be seen on videojs as
+   *         {@link videojs:videojs.registerComponent}.
+   *
+   * @param {string} name
+   *        The name of the `Component` to register.
+   *
+   * @param {Component} ComponentToRegister
+   *        The `Component` class to register.
+   *
+   * @return {Component}
+   *         The `Component` that was registered.
+   */
+  static registerComponent(name, ComponentToRegister) {
+    if (typeof name !== 'string' || !name) {
+      throw new Error(`Illegal component name, "${name}"; must be a non-empty string.`);
+    }
+    const Tech = Component$1.getComponent('Tech');
+
+    // We need to make sure this check is only done if Tech has been registered.
+    const isTech = Tech && Tech.isTech(ComponentToRegister);
+    const isComp = Component$1 === ComponentToRegister || Component$1.prototype.isPrototypeOf(ComponentToRegister.prototype);
+    if (isTech || !isComp) {
+      let reason;
+      if (isTech) {
+        reason = 'techs must be registered using Tech.registerTech()';
+      } else {
+        reason = 'must be a Component subclass';
+      }
+      throw new Error(`Illegal component, "${name}"; ${reason}.`);
+    }
+    name = toTitleCase$1(name);
+    if (!Component$1.components_) {
+      Component$1.components_ = {};
+    }
+    const Player = Component$1.getComponent('Player');
+    if (name === 'Player' && Player && Player.players) {
+      const players = Player.players;
+      const playerNames = Object.keys(players);
+
+      // If we have players that were disposed, then their name will still be
+      // in Players.players. So, we must loop through and verify that the value
+      // for each item is not null. This allows registration of the Player component
+      // after all players have been disposed or before any were created.
+      if (players && playerNames.length > 0 && playerNames.map(pname => players[pname]).every(Boolean)) {
+        throw new Error('Can not register Player component after player has been created.');
+      }
+    }
+    Component$1.components_[name] = ComponentToRegister;
+    Component$1.components_[toLowerCase(name)] = ComponentToRegister;
+    return ComponentToRegister;
+  }
+
+  /**
+   * Get a `Component` based on the name it was registered with.
+   *
+   * @param {string} name
+   *        The Name of the component to get.
+   *
+   * @return {typeof Component}
+   *         The `Component` that got registered under the given name.
+   */
+  static getComponent(name) {
+    if (!name || !Component$1.components_) {
+      return;
+    }
+    return Component$1.components_[name];
+  }
+}
+Component$1.registerComponent('Component', Component$1);
+
+/**
+ * @file time.js
+ * @module time
+ */
+
+/**
+ * Returns the time for the specified index at the start or end
+ * of a TimeRange object.
+ *
+ * @typedef    {Function} TimeRangeIndex
+ *
+ * @param      {number} [index=0]
+ *             The range number to return the time for.
+ *
+ * @return     {number}
+ *             The time offset at the specified index.
+ *
+ * @deprecated The index argument must be provided.
+ *             In the future, leaving it out will throw an error.
+ */
+
+/**
+ * An object that contains ranges of time, which mimics {@link TimeRanges}.
+ *
+ * @typedef  {Object} TimeRange
+ *
+ * @property {number} length
+ *           The number of time ranges represented by this object.
+ *
+ * @property {module:time~TimeRangeIndex} start
+ *           Returns the time offset at which a specified time range begins.
+ *
+ * @property {module:time~TimeRangeIndex} end
+ *           Returns the time offset at which a specified time range ends.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges
+ */
+
+/**
+ * Check if any of the time ranges are over the maximum index.
+ *
+ * @private
+ * @param   {string} fnName
+ *          The function name to use for logging
+ *
+ * @param   {number} index
+ *          The index to check
+ *
+ * @param   {number} maxIndex
+ *          The maximum possible index
+ *
+ * @throws  {Error} if the timeRanges provided are over the maxIndex
+ */
+function rangeCheck(fnName, index, maxIndex) {
+  if (typeof index !== 'number' || index < 0 || index > maxIndex) {
+    throw new Error(`Failed to execute '${fnName}' on 'TimeRanges': The index provided (${index}) is non-numeric or out of bounds (0-${maxIndex}).`);
+  }
+}
+
+/**
+ * Get the time for the specified index at the start or end
+ * of a TimeRange object.
+ *
+ * @private
+ * @param      {string} fnName
+ *             The function name to use for logging
+ *
+ * @param      {string} valueIndex
+ *             The property that should be used to get the time. should be
+ *             'start' or 'end'
+ *
+ * @param      {Array} ranges
+ *             An array of time ranges
+ *
+ * @param      {Array} [rangeIndex=0]
+ *             The index to start the search at
+ *
+ * @return     {number}
+ *             The time that offset at the specified index.
+ *
+ * @deprecated rangeIndex must be set to a value, in the future this will throw an error.
+ * @throws     {Error} if rangeIndex is more than the length of ranges
+ */
+function getRange(fnName, valueIndex, ranges, rangeIndex) {
+  rangeCheck(fnName, rangeIndex, ranges.length - 1);
+  return ranges[rangeIndex][valueIndex];
+}
+
+/**
+ * Create a time range object given ranges of time.
+ *
+ * @private
+ * @param   {Array} [ranges]
+ *          An array of time ranges.
+ *
+ * @return  {TimeRange}
+ */
+function createTimeRangesObj(ranges) {
+  let timeRangesObj;
+  if (ranges === undefined || ranges.length === 0) {
+    timeRangesObj = {
+      length: 0,
+      start() {
+        throw new Error('This TimeRanges object is empty');
+      },
+      end() {
+        throw new Error('This TimeRanges object is empty');
+      }
+    };
+  } else {
+    timeRangesObj = {
+      length: ranges.length,
+      start: getRange.bind(null, 'start', 0, ranges),
+      end: getRange.bind(null, 'end', 1, ranges)
+    };
+  }
+  if (window$1.Symbol && window$1.Symbol.iterator) {
+    timeRangesObj[window$1.Symbol.iterator] = () => (ranges || []).values();
+  }
+  return timeRangesObj;
+}
+
+/**
+ * Create a `TimeRange` object which mimics an
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges|HTML5 TimeRanges instance}.
+ *
+ * @param {number|Array[]} start
+ *        The start of a single range (a number) or an array of ranges (an
+ *        array of arrays of two numbers each).
+ *
+ * @param {number} end
+ *        The end of a single range. Cannot be used with the array form of
+ *        the `start` argument.
+ *
+ * @return {TimeRange}
+ */
+function createTimeRanges$1(start, end) {
+  if (Array.isArray(start)) {
+    return createTimeRangesObj(start);
+  } else if (start === undefined || end === undefined) {
+    return createTimeRangesObj();
+  }
+  return createTimeRangesObj([[start, end]]);
+}
+
+/**
+ * Format seconds as a time string, H:MM:SS or M:SS. Supplying a guide (in
+ * seconds) will force a number of leading zeros to cover the length of the
+ * guide.
+ *
+ * @private
+ * @param  {number} seconds
+ *         Number of seconds to be turned into a string
+ *
+ * @param  {number} guide
+ *         Number (in seconds) to model the string after
+ *
+ * @return {string}
+ *         Time formatted as H:MM:SS or M:SS
+ */
+const defaultImplementation = function (seconds, guide) {
+  seconds = seconds < 0 ? 0 : seconds;
+  let s = Math.floor(seconds % 60);
+  let m = Math.floor(seconds / 60 % 60);
+  let h = Math.floor(seconds / 3600);
+  const gm = Math.floor(guide / 60 % 60);
+  const gh = Math.floor(guide / 3600);
+
+  // handle invalid times
+  if (isNaN(seconds) || seconds === Infinity) {
+    // '-' is false for all relational operators (e.g. <, >=) so this setting
+    // will add the minimum number of fields specified by the guide
+    h = m = s = '-';
+  }
+
+  // Check if we need to show hours
+  h = h > 0 || gh > 0 ? h + ':' : '';
+
+  // If hours are showing, we may need to add a leading zero.
+  // Always show at least one digit of minutes.
+  m = ((h || gm >= 10) && m < 10 ? '0' + m : m) + ':';
+
+  // Check if leading zero is need for seconds
+  s = s < 10 ? '0' + s : s;
+  return h + m + s;
+};
+
+// Internal pointer to the current implementation.
+let implementation = defaultImplementation;
+
+/**
+ * Replaces the default formatTime implementation with a custom implementation.
+ *
+ * @param {Function} customImplementation
+ *        A function which will be used in place of the default formatTime
+ *        implementation. Will receive the current time in seconds and the
+ *        guide (in seconds) as arguments.
+ */
+function setFormatTime(customImplementation) {
+  implementation = customImplementation;
+}
+
+/**
+ * Resets formatTime to the default implementation.
+ */
+function resetFormatTime() {
+  implementation = defaultImplementation;
+}
+
+/**
+ * Delegates to either the default time formatting function or a custom
+ * function supplied via `setFormatTime`.
+ *
+ * Formats seconds as a time string (H:MM:SS or M:SS). Supplying a
+ * guide (in seconds) will force a number of leading zeros to cover the
+ * length of the guide.
+ *
+ * @example  formatTime(125, 600) === "02:05"
+ * @param    {number} seconds
+ *           Number of seconds to be turned into a string
+ *
+ * @param    {number} guide
+ *           Number (in seconds) to model the string after
+ *
+ * @return   {string}
+ *           Time formatted as H:MM:SS or M:SS
+ */
+function formatTime(seconds, guide = seconds) {
+  return implementation(seconds, guide);
+}
+
+var Time = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  createTimeRanges: createTimeRanges$1,
+  createTimeRange: createTimeRanges$1,
+  setFormatTime: setFormatTime,
+  resetFormatTime: resetFormatTime,
+  formatTime: formatTime
+});
+
+/**
+ * @file buffer.js
+ * @module buffer
+ */
+
+/**
+ * Compute the percentage of the media that has been buffered.
+ *
+ * @param { import('./time').TimeRange } buffered
+ *        The current `TimeRanges` object representing buffered time ranges
+ *
+ * @param {number} duration
+ *        Total duration of the media
+ *
+ * @return {number}
+ *         Percent buffered of the total duration in decimal form.
+ */
+function bufferedPercent(buffered, duration) {
+  let bufferedDuration = 0;
+  let start;
+  let end;
+  if (!duration) {
+    return 0;
+  }
+  if (!buffered || !buffered.length) {
+    buffered = createTimeRanges$1(0, 0);
+  }
+  for (let i = 0; i < buffered.length; i++) {
+    start = buffered.start(i);
+    end = buffered.end(i);
+
+    // buffered end can be bigger than duration by a very small fraction
+    if (end > duration) {
+      end = duration;
+    }
+    bufferedDuration += end - start;
+  }
+  return bufferedDuration / duration;
+}
+
+/**
+ * @file media-error.js
+ */
+
+/**
+ * A Custom `MediaError` class which mimics the standard HTML5 `MediaError` class.
+ *
+ * @param {number|string|Object|MediaError} value
+ *        This can be of multiple types:
+ *        - number: should be a standard error code
+ *        - string: an error message (the code will be 0)
+ *        - Object: arbitrary properties
+ *        - `MediaError` (native): used to populate a video.js `MediaError` object
+ *        - `MediaError` (video.js): will return itself if it's already a
+ *          video.js `MediaError` object.
+ *
+ * @see [MediaError Spec]{@link https://dev.w3.org/html5/spec-author-view/video.html#mediaerror}
+ * @see [Encrypted MediaError Spec]{@link https://www.w3.org/TR/2013/WD-encrypted-media-20130510/#error-codes}
+ *
+ * @class MediaError
+ */
+function MediaError(value) {
+  // Allow redundant calls to this constructor to avoid having `instanceof`
+  // checks peppered around the code.
+  if (value instanceof MediaError) {
+    return value;
+  }
+  if (typeof value === 'number') {
+    this.code = value;
+  } else if (typeof value === 'string') {
+    // default code is zero, so this is a custom error
+    this.message = value;
+  } else if (isObject(value)) {
+    // We assign the `code` property manually because native `MediaError` objects
+    // do not expose it as an own/enumerable property of the object.
+    if (typeof value.code === 'number') {
+      this.code = value.code;
+    }
+    Object.assign(this, value);
+  }
+  if (!this.message) {
+    this.message = MediaError.defaultMessages[this.code] || '';
+  }
+}
+
+/**
+ * The error code that refers two one of the defined `MediaError` types
+ *
+ * @type {Number}
+ */
+MediaError.prototype.code = 0;
+
+/**
+ * An optional message that to show with the error. Message is not part of the HTML5
+ * video spec but allows for more informative custom errors.
+ *
+ * @type {String}
+ */
+MediaError.prototype.message = '';
+
+/**
+ * An optional status code that can be set by plugins to allow even more detail about
+ * the error. For example a plugin might provide a specific HTTP status code and an
+ * error message for that code. Then when the plugin gets that error this class will
+ * know how to display an error message for it. This allows a custom message to show
+ * up on the `Player` error overlay.
+ *
+ * @type {Array}
+ */
+MediaError.prototype.status = null;
+
+/**
+ * An object containing an error type, as well as other information regarding the error.
+ *
+ * @typedef {{errorType: string, [key: string]: any}} ErrorMetadata
+ */
+
+/**
+ * An optional object to give more detail about the error. This can be used to give
+ * a higher level of specificity to an error versus the more generic MediaError codes.
+ * `metadata` expects an `errorType` string that should align with the values from videojs.Error.
+ *
+ * @type {ErrorMetadata}
+ */
+MediaError.prototype.metadata = null;
+
+/**
+ * Errors indexed by the W3C standard. The order **CANNOT CHANGE**! See the
+ * specification listed under {@link MediaError} for more information.
+ *
+ * @enum {array}
+ * @readonly
+ * @property {string} 0 - MEDIA_ERR_CUSTOM
+ * @property {string} 1 - MEDIA_ERR_ABORTED
+ * @property {string} 2 - MEDIA_ERR_NETWORK
+ * @property {string} 3 - MEDIA_ERR_DECODE
+ * @property {string} 4 - MEDIA_ERR_SRC_NOT_SUPPORTED
+ * @property {string} 5 - MEDIA_ERR_ENCRYPTED
+ */
+MediaError.errorTypes = ['MEDIA_ERR_CUSTOM', 'MEDIA_ERR_ABORTED', 'MEDIA_ERR_NETWORK', 'MEDIA_ERR_DECODE', 'MEDIA_ERR_SRC_NOT_SUPPORTED', 'MEDIA_ERR_ENCRYPTED'];
+
+/**
+ * The default `MediaError` messages based on the {@link MediaError.errorTypes}.
+ *
+ * @type {Array}
+ * @constant
+ */
+MediaError.defaultMessages = {
+  1: 'You aborted the media playback',
+  2: 'A network error caused the media download to fail part-way.',
+  3: 'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.',
+  4: 'The media could not be loaded, either because the server or network failed or because the format is not supported.',
+  5: 'The media is encrypted and we do not have the keys to decrypt it.'
+};
+
+/**
+ * W3C error code for any custom error.
+ *
+ * @member MediaError#MEDIA_ERR_CUSTOM
+ * @constant {number}
+ * @default 0
+ */
+MediaError.MEDIA_ERR_CUSTOM = 0;
+
+/**
+ * W3C error code for any custom error.
+ *
+ * @member MediaError.MEDIA_ERR_CUSTOM
+ * @constant {number}
+ * @default 0
+ */
+MediaError.prototype.MEDIA_ERR_CUSTOM = 0;
+
+/**
+ * W3C error code for media error aborted.
+ *
+ * @member MediaError#MEDIA_ERR_ABORTED
+ * @constant {number}
+ * @default 1
+ */
+MediaError.MEDIA_ERR_ABORTED = 1;
+
+/**
+ * W3C error code for media error aborted.
+ *
+ * @member MediaError.MEDIA_ERR_ABORTED
+ * @constant {number}
+ * @default 1
+ */
+MediaError.prototype.MEDIA_ERR_ABORTED = 1;
+
+/**
+ * W3C error code for any network error.
+ *
+ * @member MediaError#MEDIA_ERR_NETWORK
+ * @constant {number}
+ * @default 2
+ */
+MediaError.MEDIA_ERR_NETWORK = 2;
+
+/**
+ * W3C error code for any network error.
+ *
+ * @member MediaError.MEDIA_ERR_NETWORK
+ * @constant {number}
+ * @default 2
+ */
+MediaError.prototype.MEDIA_ERR_NETWORK = 2;
+
+/**
+ * W3C error code for any decoding error.
+ *
+ * @member MediaError#MEDIA_ERR_DECODE
+ * @constant {number}
+ * @default 3
+ */
+MediaError.MEDIA_ERR_DECODE = 3;
+
+/**
+ * W3C error code for any decoding error.
+ *
+ * @member MediaError.MEDIA_ERR_DECODE
+ * @constant {number}
+ * @default 3
+ */
+MediaError.prototype.MEDIA_ERR_DECODE = 3;
+
+/**
+ * W3C error code for any time that a source is not supported.
+ *
+ * @member MediaError#MEDIA_ERR_SRC_NOT_SUPPORTED
+ * @constant {number}
+ * @default 4
+ */
+MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+
+/**
+ * W3C error code for any time that a source is not supported.
+ *
+ * @member MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
+ * @constant {number}
+ * @default 4
+ */
+MediaError.prototype.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+
+/**
+ * W3C error code for any time that a source is encrypted.
+ *
+ * @member MediaError#MEDIA_ERR_ENCRYPTED
+ * @constant {number}
+ * @default 5
+ */
+MediaError.MEDIA_ERR_ENCRYPTED = 5;
+
+/**
+ * W3C error code for any time that a source is encrypted.
+ *
+ * @member MediaError.MEDIA_ERR_ENCRYPTED
+ * @constant {number}
+ * @default 5
+ */
+MediaError.prototype.MEDIA_ERR_ENCRYPTED = 5;
+
+/**
+ * Returns whether an object is `Promise`-like (i.e. has a `then` method).
+ *
+ * @param  {Object}  value
+ *         An object that may or may not be `Promise`-like.
+ *
+ * @return {boolean}
+ *         Whether or not the object is `Promise`-like.
+ */
+function isPromise(value) {
+  return value !== undefined && value !== null && typeof value.then === 'function';
+}
+
+/**
+ * Silence a Promise-like object.
+ *
+ * This is useful for avoiding non-harmful, but potentially confusing "uncaught
+ * play promise" rejection error messages.
+ *
+ * @param  {Object} value
+ *         An object that may or may not be `Promise`-like.
+ */
+function silencePromise(value) {
+  if (isPromise(value)) {
+    value.then(null, e => {});
+  }
+}
+
+/**
+ * @file text-track-list-converter.js Utilities for capturing text track state and
+ * re-creating tracks based on a capture.
+ *
+ * @module text-track-list-converter
+ */
+
+/**
+ * Examine a single {@link TextTrack} and return a JSON-compatible javascript object that
+ * represents the {@link TextTrack}'s state.
+ *
+ * @param {TextTrack} track
+ *        The text track to query.
+ *
+ * @return {Object}
+ *         A serializable javascript representation of the TextTrack.
+ * @private
+ */
+const trackToJson_ = function (track) {
+  const ret = ['kind', 'label', 'language', 'id', 'inBandMetadataTrackDispatchType', 'mode', 'src'].reduce((acc, prop, i) => {
+    if (track[prop]) {
+      acc[prop] = track[prop];
+    }
+    return acc;
+  }, {
+    cues: track.cues && Array.prototype.map.call(track.cues, function (cue) {
+      return {
+        startTime: cue.startTime,
+        endTime: cue.endTime,
+        text: cue.text,
+        id: cue.id
+      };
+    })
+  });
+  return ret;
+};
+
+/**
+ * Examine a {@link Tech} and return a JSON-compatible javascript array that represents the
+ * state of all {@link TextTrack}s currently configured. The return array is compatible with
+ * {@link text-track-list-converter:jsonToTextTracks}.
+ *
+ * @param { import('../tech/tech').default } tech
+ *        The tech object to query
+ *
+ * @return {Array}
+ *         A serializable javascript representation of the {@link Tech}s
+ *         {@link TextTrackList}.
+ */
+const textTracksToJson = function (tech) {
+  const trackEls = tech.$$('track');
+  const trackObjs = Array.prototype.map.call(trackEls, t => t.track);
+  const tracks = Array.prototype.map.call(trackEls, function (trackEl) {
+    const json = trackToJson_(trackEl.track);
+    if (trackEl.src) {
+      json.src = trackEl.src;
+    }
+    return json;
+  });
+  return tracks.concat(Array.prototype.filter.call(tech.textTracks(), function (track) {
+    return trackObjs.indexOf(track) === -1;
+  }).map(trackToJson_));
+};
+
+/**
+ * Create a set of remote {@link TextTrack}s on a {@link Tech} based on an array of javascript
+ * object {@link TextTrack} representations.
+ *
+ * @param {Array} json
+ *        An array of `TextTrack` representation objects, like those that would be
+ *        produced by `textTracksToJson`.
+ *
+ * @param {Tech} tech
+ *        The `Tech` to create the `TextTrack`s on.
+ */
+const jsonToTextTracks = function (json, tech) {
+  json.forEach(function (track) {
+    const addedTrack = tech.addRemoteTextTrack(track).track;
+    if (!track.src && track.cues) {
+      track.cues.forEach(cue => addedTrack.addCue(cue));
+    }
+  });
+  return tech.textTracks();
+};
+var textTrackConverter = {
+  textTracksToJson,
+  jsonToTextTracks,
+  trackToJson_
+};
+
+/**
+ * @file modal-dialog.js
+ */
+const MODAL_CLASS_NAME = 'vjs-modal-dialog';
+
+/**
+ * The `ModalDialog` displays over the video and its controls, which blocks
+ * interaction with the player until it is closed.
+ *
+ * Modal dialogs include a "Close" button and will close when that button
+ * is activated - or when ESC is pressed anywhere.
+ *
+ * @extends Component
+ */
+class ModalDialog extends Component$1 {
+  /**
+   * Create an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param { import('./utils/dom').ContentDescriptor} [options.content=undefined]
+   *        Provide customized content for this modal.
+   *
+   * @param {string} [options.description]
+   *        A text description for the modal, primarily for accessibility.
+   *
+   * @param {boolean} [options.fillAlways=false]
+   *        Normally, modals are automatically filled only the first time
+   *        they open. This tells the modal to refresh its content
+   *        every time it opens.
+   *
+   * @param {string} [options.label]
+   *        A text label for the modal, primarily for accessibility.
+   *
+   * @param {boolean} [options.pauseOnOpen=true]
+   *        If `true`, playback will will be paused if playing when
+   *        the modal opens, and resumed when it closes.
+   *
+   * @param {boolean} [options.temporary=true]
+   *        If `true`, the modal can only be opened once; it will be
+   *        disposed as soon as it's closed.
+   *
+   * @param {boolean} [options.uncloseable=false]
+   *        If `true`, the user will not be able to close the modal
+   *        through the UI in the normal ways. Programmatic closing is
+   *        still possible.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.handleKeyDown_ = e => this.handleKeyDown(e);
+    this.close_ = e => this.close(e);
+    this.opened_ = this.hasBeenOpened_ = this.hasBeenFilled_ = false;
+    this.closeable(!this.options_.uncloseable);
+    this.content(this.options_.content);
+
+    // Make sure the contentEl is defined AFTER any children are initialized
+    // because we only want the contents of the modal in the contentEl
+    // (not the UI elements like the close button).
+    this.contentEl_ = createEl('div', {
+      className: `${MODAL_CLASS_NAME}-content`
+    }, {
+      role: 'document'
+    });
+    this.descEl_ = createEl('p', {
+      className: `${MODAL_CLASS_NAME}-description vjs-control-text`,
+      id: this.el().getAttribute('aria-describedby')
+    });
+    textContent(this.descEl_, this.description());
+    this.el_.appendChild(this.descEl_);
+    this.el_.appendChild(this.contentEl_);
+  }
+
+  /**
+   * Create the `ModalDialog`'s DOM element
+   *
+   * @return {Element}
+   *         The DOM element that gets created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: this.buildCSSClass(),
+      tabIndex: -1
+    }, {
+      'aria-describedby': `${this.id()}_description`,
+      'aria-hidden': 'true',
+      'aria-label': this.label(),
+      'role': 'dialog',
+      'aria-live': 'polite'
+    });
+  }
+  dispose() {
+    this.contentEl_ = null;
+    this.descEl_ = null;
+    this.previouslyActiveEl_ = null;
+    super.dispose();
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `${MODAL_CLASS_NAME} vjs-hidden ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Returns the label string for this modal. Primarily used for accessibility.
+   *
+   * @return {string}
+   *         the localized or raw label of this modal.
+   */
+  label() {
+    return this.localize(this.options_.label || 'Modal Window');
+  }
+
+  /**
+   * Returns the description string for this modal. Primarily used for
+   * accessibility.
+   *
+   * @return {string}
+   *         The localized or raw description of this modal.
+   */
+  description() {
+    let desc = this.options_.description || this.localize('This is a modal window.');
+
+    // Append a universal closeability message if the modal is closeable.
+    if (this.closeable()) {
+      desc += ' ' + this.localize('This modal can be closed by pressing the Escape key or activating the close button.');
+    }
+    return desc;
+  }
+
+  /**
+   * Opens the modal.
+   *
+   * @fires ModalDialog#beforemodalopen
+   * @fires ModalDialog#modalopen
+   */
+  open() {
+    if (this.opened_) {
+      if (this.options_.fillAlways) {
+        this.fill();
+      }
+      return;
+    }
+    const player = this.player();
+
+    /**
+      * Fired just before a `ModalDialog` is opened.
+      *
+      * @event ModalDialog#beforemodalopen
+      * @type {Event}
+      */
+    this.trigger('beforemodalopen');
+    this.opened_ = true;
+
+    // Fill content if the modal has never opened before and
+    // never been filled.
+    if (this.options_.fillAlways || !this.hasBeenOpened_ && !this.hasBeenFilled_) {
+      this.fill();
+    }
+
+    // If the player was playing, pause it and take note of its previously
+    // playing state.
+    this.wasPlaying_ = !player.paused();
+    if (this.options_.pauseOnOpen && this.wasPlaying_) {
+      player.pause();
+    }
+    this.on('keydown', this.handleKeyDown_);
+
+    // Hide controls and note if they were enabled.
+    this.hadControls_ = player.controls();
+    player.controls(false);
+    this.show();
+    this.conditionalFocus_();
+    this.el().setAttribute('aria-hidden', 'false');
+
+    /**
+      * Fired just after a `ModalDialog` is opened.
+      *
+      * @event ModalDialog#modalopen
+      * @type {Event}
+      */
+    this.trigger('modalopen');
+    this.hasBeenOpened_ = true;
+  }
+
+  /**
+   * If the `ModalDialog` is currently open or closed.
+   *
+   * @param  {boolean} [value]
+   *         If given, it will open (`true`) or close (`false`) the modal.
+   *
+   * @return {boolean}
+   *         the current open state of the modaldialog
+   */
+  opened(value) {
+    if (typeof value === 'boolean') {
+      this[value ? 'open' : 'close']();
+    }
+    return this.opened_;
+  }
+
+  /**
+   * Closes the modal, does nothing if the `ModalDialog` is
+   * not open.
+   *
+   * @fires ModalDialog#beforemodalclose
+   * @fires ModalDialog#modalclose
+   */
+  close() {
+    if (!this.opened_) {
+      return;
+    }
+    const player = this.player();
+
+    /**
+      * Fired just before a `ModalDialog` is closed.
+      *
+      * @event ModalDialog#beforemodalclose
+      * @type {Event}
+      */
+    this.trigger('beforemodalclose');
+    this.opened_ = false;
+    if (this.wasPlaying_ && this.options_.pauseOnOpen) {
+      player.play();
+    }
+    this.off('keydown', this.handleKeyDown_);
+    if (this.hadControls_) {
+      player.controls(true);
+    }
+    this.hide();
+    this.el().setAttribute('aria-hidden', 'true');
+
+    /**
+      * Fired just after a `ModalDialog` is closed.
+      *
+      * @event ModalDialog#modalclose
+      * @type {Event}
+      */
+    this.trigger('modalclose');
+    this.conditionalBlur_();
+    if (this.options_.temporary) {
+      this.dispose();
+    }
+  }
+
+  /**
+   * Check to see if the `ModalDialog` is closeable via the UI.
+   *
+   * @param  {boolean} [value]
+   *         If given as a boolean, it will set the `closeable` option.
+   *
+   * @return {boolean}
+   *         Returns the final value of the closable option.
+   */
+  closeable(value) {
+    if (typeof value === 'boolean') {
+      const closeable = this.closeable_ = !!value;
+      let close = this.getChild('closeButton');
+
+      // If this is being made closeable and has no close button, add one.
+      if (closeable && !close) {
+        // The close button should be a child of the modal - not its
+        // content element, so temporarily change the content element.
+        const temp = this.contentEl_;
+        this.contentEl_ = this.el_;
+        close = this.addChild('closeButton', {
+          controlText: 'Close Modal Dialog'
+        });
+        this.contentEl_ = temp;
+        this.on(close, 'close', this.close_);
+      }
+
+      // If this is being made uncloseable and has a close button, remove it.
+      if (!closeable && close) {
+        this.off(close, 'close', this.close_);
+        this.removeChild(close);
+        close.dispose();
+      }
+    }
+    return this.closeable_;
+  }
+
+  /**
+   * Fill the modal's content element with the modal's "content" option.
+   * The content element will be emptied before this change takes place.
+   */
+  fill() {
+    this.fillWith(this.content());
+  }
+
+  /**
+   * Fill the modal's content element with arbitrary content.
+   * The content element will be emptied before this change takes place.
+   *
+   * @fires ModalDialog#beforemodalfill
+   * @fires ModalDialog#modalfill
+   *
+   * @param { import('./utils/dom').ContentDescriptor} [content]
+   *        The same rules apply to this as apply to the `content` option.
+   */
+  fillWith(content) {
+    const contentEl = this.contentEl();
+    const parentEl = contentEl.parentNode;
+    const nextSiblingEl = contentEl.nextSibling;
+
+    /**
+      * Fired just before a `ModalDialog` is filled with content.
+      *
+      * @event ModalDialog#beforemodalfill
+      * @type {Event}
+      */
+    this.trigger('beforemodalfill');
+    this.hasBeenFilled_ = true;
+
+    // Detach the content element from the DOM before performing
+    // manipulation to avoid modifying the live DOM multiple times.
+    parentEl.removeChild(contentEl);
+    this.empty();
+    insertContent(contentEl, content);
+    /**
+     * Fired just after a `ModalDialog` is filled with content.
+     *
+     * @event ModalDialog#modalfill
+     * @type {Event}
+     */
+    this.trigger('modalfill');
+
+    // Re-inject the re-filled content element.
+    if (nextSiblingEl) {
+      parentEl.insertBefore(contentEl, nextSiblingEl);
+    } else {
+      parentEl.appendChild(contentEl);
+    }
+
+    // make sure that the close button is last in the dialog DOM
+    const closeButton = this.getChild('closeButton');
+    if (closeButton) {
+      parentEl.appendChild(closeButton.el_);
+    }
+  }
+
+  /**
+   * Empties the content element. This happens anytime the modal is filled.
+   *
+   * @fires ModalDialog#beforemodalempty
+   * @fires ModalDialog#modalempty
+   */
+  empty() {
+    /**
+    * Fired just before a `ModalDialog` is emptied.
+    *
+    * @event ModalDialog#beforemodalempty
+    * @type {Event}
+    */
+    this.trigger('beforemodalempty');
+    emptyEl(this.contentEl());
+
+    /**
+    * Fired just after a `ModalDialog` is emptied.
+    *
+    * @event ModalDialog#modalempty
+    * @type {Event}
+    */
+    this.trigger('modalempty');
+  }
+
+  /**
+   * Gets or sets the modal content, which gets normalized before being
+   * rendered into the DOM.
+   *
+   * This does not update the DOM or fill the modal, but it is called during
+   * that process.
+   *
+   * @param  { import('./utils/dom').ContentDescriptor} [value]
+   *         If defined, sets the internal content value to be used on the
+   *         next call(s) to `fill`. This value is normalized before being
+   *         inserted. To "clear" the internal content value, pass `null`.
+   *
+   * @return { import('./utils/dom').ContentDescriptor}
+   *         The current content of the modal dialog
+   */
+  content(value) {
+    if (typeof value !== 'undefined') {
+      this.content_ = value;
+    }
+    return this.content_;
+  }
+
+  /**
+   * conditionally focus the modal dialog if focus was previously on the player.
+   *
+   * @private
+   */
+  conditionalFocus_() {
+    const activeEl = document.activeElement;
+    const playerEl = this.player_.el_;
+    this.previouslyActiveEl_ = null;
+    if (playerEl.contains(activeEl) || playerEl === activeEl) {
+      this.previouslyActiveEl_ = activeEl;
+      this.focus();
+    }
+  }
+
+  /**
+   * conditionally blur the element and refocus the last focused element
+   *
+   * @private
+   */
+  conditionalBlur_() {
+    if (this.previouslyActiveEl_) {
+      this.previouslyActiveEl_.focus();
+      this.previouslyActiveEl_ = null;
+    }
+  }
+
+  /**
+   * Keydown handler. Attached when modal is focused.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Do not allow keydowns to reach out of the modal dialog.
+    event.stopPropagation();
+    if (keycode.isEventKey(event, 'Escape') && this.closeable()) {
+      event.preventDefault();
+      this.close();
+      return;
+    }
+
+    // exit early if it isn't a tab key
+    if (!keycode.isEventKey(event, 'Tab')) {
+      return;
+    }
+    const focusableEls = this.focusableEls_();
+    const activeEl = this.el_.querySelector(':focus');
+    let focusIndex;
+    for (let i = 0; i < focusableEls.length; i++) {
+      if (activeEl === focusableEls[i]) {
+        focusIndex = i;
+        break;
+      }
+    }
+    if (document.activeElement === this.el_) {
+      focusIndex = 0;
+    }
+    if (event.shiftKey && focusIndex === 0) {
+      focusableEls[focusableEls.length - 1].focus();
+      event.preventDefault();
+    } else if (!event.shiftKey && focusIndex === focusableEls.length - 1) {
+      focusableEls[0].focus();
+      event.preventDefault();
+    }
+  }
+
+  /**
+   * get all focusable elements
+   *
+   * @private
+   */
+  focusableEls_() {
+    const allChildren = this.el_.querySelectorAll('*');
+    return Array.prototype.filter.call(allChildren, child => {
+      return (child instanceof window$1.HTMLAnchorElement || child instanceof window$1.HTMLAreaElement) && child.hasAttribute('href') || (child instanceof window$1.HTMLInputElement || child instanceof window$1.HTMLSelectElement || child instanceof window$1.HTMLTextAreaElement || child instanceof window$1.HTMLButtonElement) && !child.hasAttribute('disabled') || child instanceof window$1.HTMLIFrameElement || child instanceof window$1.HTMLObjectElement || child instanceof window$1.HTMLEmbedElement || child.hasAttribute('tabindex') && child.getAttribute('tabindex') !== -1 || child.hasAttribute('contenteditable');
+    });
+  }
+}
+
+/**
+ * Default options for `ModalDialog` default options.
+ *
+ * @type {Object}
+ * @private
+ */
+ModalDialog.prototype.options_ = {
+  pauseOnOpen: true,
+  temporary: true
+};
+Component$1.registerComponent('ModalDialog', ModalDialog);
+
+/**
+ * @file track-list.js
+ */
+
+/**
+ * Common functionaliy between {@link TextTrackList}, {@link AudioTrackList}, and
+ * {@link VideoTrackList}
+ *
+ * @extends EventTarget
+ */
+class TrackList extends EventTarget$2 {
+  /**
+   * Create an instance of this class
+   *
+   * @param { import('./track').default[] } tracks
+   *        A list of tracks to initialize the list with.
+   *
+   * @abstract
+   */
+  constructor(tracks = []) {
+    super();
+    this.tracks_ = [];
+
+    /**
+     * @memberof TrackList
+     * @member {number} length
+     *         The current number of `Track`s in the this Trackist.
+     * @instance
+     */
+    Object.defineProperty(this, 'length', {
+      get() {
+        return this.tracks_.length;
+      }
+    });
+    for (let i = 0; i < tracks.length; i++) {
+      this.addTrack(tracks[i]);
+    }
+  }
+
+  /**
+   * Add a {@link Track} to the `TrackList`
+   *
+   * @param { import('./track').default } track
+   *        The audio, video, or text track to add to the list.
+   *
+   * @fires TrackList#addtrack
+   */
+  addTrack(track) {
+    const index = this.tracks_.length;
+    if (!('' + index in this)) {
+      Object.defineProperty(this, index, {
+        get() {
+          return this.tracks_[index];
+        }
+      });
+    }
+
+    // Do not add duplicate tracks
+    if (this.tracks_.indexOf(track) === -1) {
+      this.tracks_.push(track);
+      /**
+       * Triggered when a track is added to a track list.
+       *
+       * @event TrackList#addtrack
+       * @type {Event}
+       * @property {Track} track
+       *           A reference to track that was added.
+       */
+      this.trigger({
+        track,
+        type: 'addtrack',
+        target: this
+      });
+    }
+
+    /**
+     * Triggered when a track label is changed.
+     *
+     * @event TrackList#addtrack
+     * @type {Event}
+     * @property {Track} track
+     *           A reference to track that was added.
+     */
+    track.labelchange_ = () => {
+      this.trigger({
+        track,
+        type: 'labelchange',
+        target: this
+      });
+    };
+    if (isEvented(track)) {
+      track.addEventListener('labelchange', track.labelchange_);
+    }
+  }
+
+  /**
+   * Remove a {@link Track} from the `TrackList`
+   *
+   * @param { import('./track').default } rtrack
+   *        The audio, video, or text track to remove from the list.
+   *
+   * @fires TrackList#removetrack
+   */
+  removeTrack(rtrack) {
+    let track;
+    for (let i = 0, l = this.length; i < l; i++) {
+      if (this[i] === rtrack) {
+        track = this[i];
+        if (track.off) {
+          track.off();
+        }
+        this.tracks_.splice(i, 1);
+        break;
+      }
+    }
+    if (!track) {
+      return;
+    }
+
+    /**
+     * Triggered when a track is removed from track list.
+     *
+     * @event TrackList#removetrack
+     * @type {Event}
+     * @property {Track} track
+     *           A reference to track that was removed.
+     */
+    this.trigger({
+      track,
+      type: 'removetrack',
+      target: this
+    });
+  }
+
+  /**
+   * Get a Track from the TrackList by a tracks id
+   *
+   * @param {string} id - the id of the track to get
+   * @method getTrackById
+   * @return { import('./track').default }
+   * @private
+   */
+  getTrackById(id) {
+    let result = null;
+    for (let i = 0, l = this.length; i < l; i++) {
+      const track = this[i];
+      if (track.id === id) {
+        result = track;
+        break;
+      }
+    }
+    return result;
+  }
+}
+
+/**
+ * Triggered when a different track is selected/enabled.
+ *
+ * @event TrackList#change
+ * @type {Event}
+ */
+
+/**
+ * Events that can be called with on + eventName. See {@link EventHandler}.
+ *
+ * @property {Object} TrackList#allowedEvents_
+ * @protected
+ */
+TrackList.prototype.allowedEvents_ = {
+  change: 'change',
+  addtrack: 'addtrack',
+  removetrack: 'removetrack',
+  labelchange: 'labelchange'
+};
+
+// emulate attribute EventHandler support to allow for feature detection
+for (const event in TrackList.prototype.allowedEvents_) {
+  TrackList.prototype['on' + event] = null;
+}
+
+/**
+ * @file audio-track-list.js
+ */
+
+/**
+ * Anywhere we call this function we diverge from the spec
+ * as we only support one enabled audiotrack at a time
+ *
+ * @param {AudioTrackList} list
+ *        list to work on
+ *
+ * @param { import('./audio-track').default } track
+ *        The track to skip
+ *
+ * @private
+ */
+const disableOthers$1 = function (list, track) {
+  for (let i = 0; i < list.length; i++) {
+    if (!Object.keys(list[i]).length || track.id === list[i].id) {
+      continue;
+    }
+    // another audio track is enabled, disable it
+    list[i].enabled = false;
+  }
+};
+
+/**
+ * The current list of {@link AudioTrack} for a media file.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist}
+ * @extends TrackList
+ */
+class AudioTrackList extends TrackList {
+  /**
+   * Create an instance of this class.
+   *
+   * @param { import('./audio-track').default[] } [tracks=[]]
+   *        A list of `AudioTrack` to instantiate the list with.
+   */
+  constructor(tracks = []) {
+    // make sure only 1 track is enabled
+    // sorted from last index to first index
+    for (let i = tracks.length - 1; i >= 0; i--) {
+      if (tracks[i].enabled) {
+        disableOthers$1(tracks, tracks[i]);
+        break;
+      }
+    }
+    super(tracks);
+    this.changing_ = false;
+  }
+
+  /**
+   * Add an {@link AudioTrack} to the `AudioTrackList`.
+   *
+   * @param { import('./audio-track').default } track
+   *        The AudioTrack to add to the list
+   *
+   * @fires TrackList#addtrack
+   */
+  addTrack(track) {
+    if (track.enabled) {
+      disableOthers$1(this, track);
+    }
+    super.addTrack(track);
+    // native tracks don't have this
+    if (!track.addEventListener) {
+      return;
+    }
+    track.enabledChange_ = () => {
+      // when we are disabling other tracks (since we don't support
+      // more than one track at a time) we will set changing_
+      // to true so that we don't trigger additional change events
+      if (this.changing_) {
+        return;
+      }
+      this.changing_ = true;
+      disableOthers$1(this, track);
+      this.changing_ = false;
+      this.trigger('change');
+    };
+
+    /**
+     * @listens AudioTrack#enabledchange
+     * @fires TrackList#change
+     */
+    track.addEventListener('enabledchange', track.enabledChange_);
+  }
+  removeTrack(rtrack) {
+    super.removeTrack(rtrack);
+    if (rtrack.removeEventListener && rtrack.enabledChange_) {
+      rtrack.removeEventListener('enabledchange', rtrack.enabledChange_);
+      rtrack.enabledChange_ = null;
+    }
+  }
+}
+
+/**
+ * @file video-track-list.js
+ */
+
+/**
+ * Un-select all other {@link VideoTrack}s that are selected.
+ *
+ * @param {VideoTrackList} list
+ *        list to work on
+ *
+ * @param { import('./video-track').default } track
+ *        The track to skip
+ *
+ * @private
+ */
+const disableOthers = function (list, track) {
+  for (let i = 0; i < list.length; i++) {
+    if (!Object.keys(list[i]).length || track.id === list[i].id) {
+      continue;
+    }
+    // another video track is enabled, disable it
+    list[i].selected = false;
+  }
+};
+
+/**
+ * The current list of {@link VideoTrack} for a video.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist}
+ * @extends TrackList
+ */
+class VideoTrackList extends TrackList {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {VideoTrack[]} [tracks=[]]
+   *        A list of `VideoTrack` to instantiate the list with.
+   */
+  constructor(tracks = []) {
+    // make sure only 1 track is enabled
+    // sorted from last index to first index
+    for (let i = tracks.length - 1; i >= 0; i--) {
+      if (tracks[i].selected) {
+        disableOthers(tracks, tracks[i]);
+        break;
+      }
+    }
+    super(tracks);
+    this.changing_ = false;
+
+    /**
+     * @member {number} VideoTrackList#selectedIndex
+     *         The current index of the selected {@link VideoTrack`}.
+     */
+    Object.defineProperty(this, 'selectedIndex', {
+      get() {
+        for (let i = 0; i < this.length; i++) {
+          if (this[i].selected) {
+            return i;
+          }
+        }
+        return -1;
+      },
+      set() {}
+    });
+  }
+
+  /**
+   * Add a {@link VideoTrack} to the `VideoTrackList`.
+   *
+   * @param { import('./video-track').default } track
+   *        The VideoTrack to add to the list
+   *
+   * @fires TrackList#addtrack
+   */
+  addTrack(track) {
+    if (track.selected) {
+      disableOthers(this, track);
+    }
+    super.addTrack(track);
+    // native tracks don't have this
+    if (!track.addEventListener) {
+      return;
+    }
+    track.selectedChange_ = () => {
+      if (this.changing_) {
+        return;
+      }
+      this.changing_ = true;
+      disableOthers(this, track);
+      this.changing_ = false;
+      this.trigger('change');
+    };
+
+    /**
+     * @listens VideoTrack#selectedchange
+     * @fires TrackList#change
+     */
+    track.addEventListener('selectedchange', track.selectedChange_);
+  }
+  removeTrack(rtrack) {
+    super.removeTrack(rtrack);
+    if (rtrack.removeEventListener && rtrack.selectedChange_) {
+      rtrack.removeEventListener('selectedchange', rtrack.selectedChange_);
+      rtrack.selectedChange_ = null;
+    }
+  }
+}
+
+/**
+ * @file text-track-list.js
+ */
+
+/**
+ * The current list of {@link TextTrack} for a media file.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttracklist}
+ * @extends TrackList
+ */
+class TextTrackList extends TrackList {
+  /**
+   * Add a {@link TextTrack} to the `TextTrackList`
+   *
+   * @param { import('./text-track').default } track
+   *        The text track to add to the list.
+   *
+   * @fires TrackList#addtrack
+   */
+  addTrack(track) {
+    super.addTrack(track);
+    if (!this.queueChange_) {
+      this.queueChange_ = () => this.queueTrigger('change');
+    }
+    if (!this.triggerSelectedlanguagechange) {
+      this.triggerSelectedlanguagechange_ = () => this.trigger('selectedlanguagechange');
+    }
+
+    /**
+     * @listens TextTrack#modechange
+     * @fires TrackList#change
+     */
+    track.addEventListener('modechange', this.queueChange_);
+    const nonLanguageTextTrackKind = ['metadata', 'chapters'];
+    if (nonLanguageTextTrackKind.indexOf(track.kind) === -1) {
+      track.addEventListener('modechange', this.triggerSelectedlanguagechange_);
+    }
+  }
+  removeTrack(rtrack) {
+    super.removeTrack(rtrack);
+
+    // manually remove the event handlers we added
+    if (rtrack.removeEventListener) {
+      if (this.queueChange_) {
+        rtrack.removeEventListener('modechange', this.queueChange_);
+      }
+      if (this.selectedlanguagechange_) {
+        rtrack.removeEventListener('modechange', this.triggerSelectedlanguagechange_);
+      }
+    }
+  }
+}
+
+/**
+ * @file html-track-element-list.js
+ */
+
+/**
+ * The current list of {@link HtmlTrackElement}s.
+ */
+class HtmlTrackElementList {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {HtmlTrackElement[]} [tracks=[]]
+   *        A list of `HtmlTrackElement` to instantiate the list with.
+   */
+  constructor(trackElements = []) {
+    this.trackElements_ = [];
+
+    /**
+     * @memberof HtmlTrackElementList
+     * @member {number} length
+     *         The current number of `Track`s in the this Trackist.
+     * @instance
+     */
+    Object.defineProperty(this, 'length', {
+      get() {
+        return this.trackElements_.length;
+      }
+    });
+    for (let i = 0, length = trackElements.length; i < length; i++) {
+      this.addTrackElement_(trackElements[i]);
+    }
+  }
+
+  /**
+   * Add an {@link HtmlTrackElement} to the `HtmlTrackElementList`
+   *
+   * @param {HtmlTrackElement} trackElement
+   *        The track element to add to the list.
+   *
+   * @private
+   */
+  addTrackElement_(trackElement) {
+    const index = this.trackElements_.length;
+    if (!('' + index in this)) {
+      Object.defineProperty(this, index, {
+        get() {
+          return this.trackElements_[index];
+        }
+      });
+    }
+
+    // Do not add duplicate elements
+    if (this.trackElements_.indexOf(trackElement) === -1) {
+      this.trackElements_.push(trackElement);
+    }
+  }
+
+  /**
+   * Get an {@link HtmlTrackElement} from the `HtmlTrackElementList` given an
+   * {@link TextTrack}.
+   *
+   * @param {TextTrack} track
+   *        The track associated with a track element.
+   *
+   * @return {HtmlTrackElement|undefined}
+   *         The track element that was found or undefined.
+   *
+   * @private
+   */
+  getTrackElementByTrack_(track) {
+    let trackElement_;
+    for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+      if (track === this.trackElements_[i].track) {
+        trackElement_ = this.trackElements_[i];
+        break;
+      }
+    }
+    return trackElement_;
+  }
+
+  /**
+   * Remove a {@link HtmlTrackElement} from the `HtmlTrackElementList`
+   *
+   * @param {HtmlTrackElement} trackElement
+   *        The track element to remove from the list.
+   *
+   * @private
+   */
+  removeTrackElement_(trackElement) {
+    for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+      if (trackElement === this.trackElements_[i]) {
+        if (this.trackElements_[i].track && typeof this.trackElements_[i].track.off === 'function') {
+          this.trackElements_[i].track.off();
+        }
+        if (typeof this.trackElements_[i].off === 'function') {
+          this.trackElements_[i].off();
+        }
+        this.trackElements_.splice(i, 1);
+        break;
+      }
+    }
+  }
+}
+
+/**
+ * @file text-track-cue-list.js
+ */
+
+/**
+ * @typedef {Object} TextTrackCueList~TextTrackCue
+ *
+ * @property {string} id
+ *           The unique id for this text track cue
+ *
+ * @property {number} startTime
+ *           The start time for this text track cue
+ *
+ * @property {number} endTime
+ *           The end time for this text track cue
+ *
+ * @property {boolean} pauseOnExit
+ *           Pause when the end time is reached if true.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue}
+ */
+
+/**
+ * A List of TextTrackCues.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcuelist}
+ */
+class TextTrackCueList {
+  /**
+   * Create an instance of this class..
+   *
+   * @param {Array} cues
+   *        A list of cues to be initialized with
+   */
+  constructor(cues) {
+    TextTrackCueList.prototype.setCues_.call(this, cues);
+
+    /**
+     * @memberof TextTrackCueList
+     * @member {number} length
+     *         The current number of `TextTrackCue`s in the TextTrackCueList.
+     * @instance
+     */
+    Object.defineProperty(this, 'length', {
+      get() {
+        return this.length_;
+      }
+    });
+  }
+
+  /**
+   * A setter for cues in this list. Creates getters
+   * an an index for the cues.
+   *
+   * @param {Array} cues
+   *        An array of cues to set
+   *
+   * @private
+   */
+  setCues_(cues) {
+    const oldLength = this.length || 0;
+    let i = 0;
+    const l = cues.length;
+    this.cues_ = cues;
+    this.length_ = cues.length;
+    const defineProp = function (index) {
+      if (!('' + index in this)) {
+        Object.defineProperty(this, '' + index, {
+          get() {
+            return this.cues_[index];
+          }
+        });
+      }
+    };
+    if (oldLength < l) {
+      i = oldLength;
+      for (; i < l; i++) {
+        defineProp.call(this, i);
+      }
+    }
+  }
+
+  /**
+   * Get a `TextTrackCue` that is currently in the `TextTrackCueList` by id.
+   *
+   * @param {string} id
+   *        The id of the cue that should be searched for.
+   *
+   * @return {TextTrackCueList~TextTrackCue|null}
+   *         A single cue or null if none was found.
+   */
+  getCueById(id) {
+    let result = null;
+    for (let i = 0, l = this.length; i < l; i++) {
+      const cue = this[i];
+      if (cue.id === id) {
+        result = cue;
+        break;
+      }
+    }
+    return result;
+  }
+}
+
+/**
+ * @file track-kinds.js
+ */
+
+/**
+ * All possible `VideoTrackKind`s
+ *
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-videotrack-kind
+ * @typedef VideoTrack~Kind
+ * @enum
+ */
+const VideoTrackKind = {
+  alternative: 'alternative',
+  captions: 'captions',
+  main: 'main',
+  sign: 'sign',
+  subtitles: 'subtitles',
+  commentary: 'commentary'
+};
+
+/**
+ * All possible `AudioTrackKind`s
+ *
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-kind
+ * @typedef AudioTrack~Kind
+ * @enum
+ */
+const AudioTrackKind = {
+  'alternative': 'alternative',
+  'descriptions': 'descriptions',
+  'main': 'main',
+  'main-desc': 'main-desc',
+  'translation': 'translation',
+  'commentary': 'commentary'
+};
+
+/**
+ * All possible `TextTrackKind`s
+ *
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-texttrack-kind
+ * @typedef TextTrack~Kind
+ * @enum
+ */
+const TextTrackKind = {
+  subtitles: 'subtitles',
+  captions: 'captions',
+  descriptions: 'descriptions',
+  chapters: 'chapters',
+  metadata: 'metadata'
+};
+
+/**
+ * All possible `TextTrackMode`s
+ *
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackmode
+ * @typedef TextTrack~Mode
+ * @enum
+ */
+const TextTrackMode = {
+  disabled: 'disabled',
+  hidden: 'hidden',
+  showing: 'showing'
+};
+
+/**
+ * @file track.js
+ */
+
+/**
+ * A Track class that contains all of the common functionality for {@link AudioTrack},
+ * {@link VideoTrack}, and {@link TextTrack}.
+ *
+ * > Note: This class should not be used directly
+ *
+ * @see {@link https://html.spec.whatwg.org/multipage/embedded-content.html}
+ * @extends EventTarget
+ * @abstract
+ */
+class Track extends EventTarget$2 {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {Object} [options={}]
+   *        Object of option names and values
+   *
+   * @param {string} [options.kind='']
+   *        A valid kind for the track type you are creating.
+   *
+   * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+   *        A unique id for this AudioTrack.
+   *
+   * @param {string} [options.label='']
+   *        The menu label for this track.
+   *
+   * @param {string} [options.language='']
+   *        A valid two character language code.
+   *
+   * @abstract
+   */
+  constructor(options = {}) {
+    super();
+    const trackProps = {
+      id: options.id || 'vjs_track_' + newGUID(),
+      kind: options.kind || '',
+      language: options.language || ''
+    };
+    let label = options.label || '';
+
+    /**
+     * @memberof Track
+     * @member {string} id
+     *         The id of this track. Cannot be changed after creation.
+     * @instance
+     *
+     * @readonly
+     */
+
+    /**
+     * @memberof Track
+     * @member {string} kind
+     *         The kind of track that this is. Cannot be changed after creation.
+     * @instance
+     *
+     * @readonly
+     */
+
+    /**
+     * @memberof Track
+     * @member {string} language
+     *         The two letter language code for this track. Cannot be changed after
+     *         creation.
+     * @instance
+     *
+     * @readonly
+     */
+
+    for (const key in trackProps) {
+      Object.defineProperty(this, key, {
+        get() {
+          return trackProps[key];
+        },
+        set() {}
+      });
+    }
+
+    /**
+     * @memberof Track
+     * @member {string} label
+     *         The label of this track. Cannot be changed after creation.
+     * @instance
+     *
+     * @fires Track#labelchange
+     */
+    Object.defineProperty(this, 'label', {
+      get() {
+        return label;
+      },
+      set(newLabel) {
+        if (newLabel !== label) {
+          label = newLabel;
+
+          /**
+           * An event that fires when label changes on this track.
+           *
+           * > Note: This is not part of the spec!
+           *
+           * @event Track#labelchange
+           * @type {Event}
+           */
+          this.trigger('labelchange');
+        }
+      }
+    });
+  }
+}
+
+/**
+ * @file url.js
+ * @module url
+ */
+
+/**
+ * @typedef {Object} url:URLObject
+ *
+ * @property {string} protocol
+ *           The protocol of the url that was parsed.
+ *
+ * @property {string} hostname
+ *           The hostname of the url that was parsed.
+ *
+ * @property {string} port
+ *           The port of the url that was parsed.
+ *
+ * @property {string} pathname
+ *           The pathname of the url that was parsed.
+ *
+ * @property {string} search
+ *           The search query of the url that was parsed.
+ *
+ * @property {string} hash
+ *           The hash of the url that was parsed.
+ *
+ * @property {string} host
+ *           The host of the url that was parsed.
+ */
+
+/**
+ * Resolve and parse the elements of a URL.
+ *
+ * @function
+ * @param    {String} url
+ *           The url to parse
+ *
+ * @return   {url:URLObject}
+ *           An object of url details
+ */
+const parseUrl = function (url) {
+  // This entire method can be replace with URL once we are able to drop IE11
+
+  const props = ['protocol', 'hostname', 'port', 'pathname', 'search', 'hash', 'host'];
+
+  // add the url to an anchor and let the browser parse the URL
+  const a = document.createElement('a');
+  a.href = url;
+
+  // Copy the specific URL properties to a new object
+  // This is also needed for IE because the anchor loses its
+  // properties when it's removed from the dom
+  const details = {};
+  for (let i = 0; i < props.length; i++) {
+    details[props[i]] = a[props[i]];
+  }
+
+  // IE adds the port to the host property unlike everyone else. If
+  // a port identifier is added for standard ports, strip it.
+  if (details.protocol === 'http:') {
+    details.host = details.host.replace(/:80$/, '');
+  }
+  if (details.protocol === 'https:') {
+    details.host = details.host.replace(/:443$/, '');
+  }
+  if (!details.protocol) {
+    details.protocol = window$1.location.protocol;
+  }
+
+  /* istanbul ignore if */
+  if (!details.host) {
+    details.host = window$1.location.host;
+  }
+  return details;
+};
+
+/**
+ * Get absolute version of relative URL.
+ *
+ * @function
+ * @param    {string} url
+ *           URL to make absolute
+ *
+ * @return   {string}
+ *           Absolute URL
+ *
+ * @see      http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
+ */
+const getAbsoluteURL = function (url) {
+  // Check if absolute URL
+  if (!url.match(/^https?:\/\//)) {
+    // Add the url to an anchor and let the browser parse it to convert to an absolute url
+    const a = document.createElement('a');
+    a.href = url;
+    url = a.href;
+  }
+  return url;
+};
+
+/**
+ * Returns the extension of the passed file name. It will return an empty string
+ * if passed an invalid path.
+ *
+ * @function
+ * @param    {string} path
+ *           The fileName path like '/path/to/file.mp4'
+ *
+ * @return  {string}
+ *           The extension in lower case or an empty string if no
+ *           extension could be found.
+ */
+const getFileExtension = function (path) {
+  if (typeof path === 'string') {
+    const splitPathRe = /^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/;
+    const pathParts = splitPathRe.exec(path);
+    if (pathParts) {
+      return pathParts.pop().toLowerCase();
+    }
+  }
+  return '';
+};
+
+/**
+ * Returns whether the url passed is a cross domain request or not.
+ *
+ * @function
+ * @param    {string} url
+ *           The url to check.
+ *
+ * @param    {Object} [winLoc]
+ *           the domain to check the url against, defaults to window.location
+ *
+ * @param    {string} [winLoc.protocol]
+ *           The window location protocol defaults to window.location.protocol
+ *
+ * @param    {string} [winLoc.host]
+ *           The window location host defaults to window.location.host
+ *
+ * @return   {boolean}
+ *           Whether it is a cross domain request or not.
+ */
+const isCrossOrigin = function (url, winLoc = window$1.location) {
+  const urlInfo = parseUrl(url);
+
+  // IE8 protocol relative urls will return ':' for protocol
+  const srcProtocol = urlInfo.protocol === ':' ? winLoc.protocol : urlInfo.protocol;
+
+  // Check if url is for another domain/origin
+  // IE8 doesn't know location.origin, so we won't rely on it here
+  const crossOrigin = srcProtocol + urlInfo.host !== winLoc.protocol + winLoc.host;
+  return crossOrigin;
+};
+
+var Url = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  parseUrl: parseUrl,
+  getAbsoluteURL: getAbsoluteURL,
+  getFileExtension: getFileExtension,
+  isCrossOrigin: isCrossOrigin
+});
+
+/**
+ * @file text-track.js
+ */
+
+/**
+ * Takes a webvtt file contents and parses it into cues
+ *
+ * @param {string} srcContent
+ *        webVTT file contents
+ *
+ * @param {TextTrack} track
+ *        TextTrack to add cues to. Cues come from the srcContent.
+ *
+ * @private
+ */
+const parseCues = function (srcContent, track) {
+  const parser = new window$1.WebVTT.Parser(window$1, window$1.vttjs, window$1.WebVTT.StringDecoder());
+  const errors = [];
+  parser.oncue = function (cue) {
+    track.addCue(cue);
+  };
+  parser.onparsingerror = function (error) {
+    errors.push(error);
+  };
+  parser.onflush = function () {
+    track.trigger({
+      type: 'loadeddata',
+      target: track
+    });
+  };
+  parser.parse(srcContent);
+  if (errors.length > 0) {
+    if (window$1.console && window$1.console.groupCollapsed) {
+      window$1.console.groupCollapsed(`Text Track parsing errors for ${track.src}`);
+    }
+    errors.forEach(error => log$1.error(error));
+    if (window$1.console && window$1.console.groupEnd) {
+      window$1.console.groupEnd();
+    }
+  }
+  parser.flush();
+};
+
+/**
+ * Load a `TextTrack` from a specified url.
+ *
+ * @param {string} src
+ *        Url to load track from.
+ *
+ * @param {TextTrack} track
+ *        Track to add cues to. Comes from the content at the end of `url`.
+ *
+ * @private
+ */
+const loadTrack = function (src, track) {
+  const opts = {
+    uri: src
+  };
+  const crossOrigin = isCrossOrigin(src);
+  if (crossOrigin) {
+    opts.cors = crossOrigin;
+  }
+  const withCredentials = track.tech_.crossOrigin() === 'use-credentials';
+  if (withCredentials) {
+    opts.withCredentials = withCredentials;
+  }
+  XHR(opts, bind_(this, function (err, response, responseBody) {
+    if (err) {
+      return log$1.error(err, response);
+    }
+    track.loaded_ = true;
+
+    // Make sure that vttjs has loaded, otherwise, wait till it finished loading
+    // NOTE: this is only used for the alt/video.novtt.js build
+    if (typeof window$1.WebVTT !== 'function') {
+      if (track.tech_) {
+        // to prevent use before define eslint error, we define loadHandler
+        // as a let here
+        track.tech_.any(['vttjsloaded', 'vttjserror'], event => {
+          if (event.type === 'vttjserror') {
+            log$1.error(`vttjs failed to load, stopping trying to process ${track.src}`);
+            return;
+          }
+          return parseCues(responseBody, track);
+        });
+      }
+    } else {
+      parseCues(responseBody, track);
+    }
+  }));
+};
+
+/**
+ * A representation of a single `TextTrack`.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrack}
+ * @extends Track
+ */
+class TextTrack extends Track {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {Object} options={}
+   *        Object of option names and values
+   *
+   * @param { import('../tech/tech').default } options.tech
+   *        A reference to the tech that owns this TextTrack.
+   *
+   * @param {TextTrack~Kind} [options.kind='subtitles']
+   *        A valid text track kind.
+   *
+   * @param {TextTrack~Mode} [options.mode='disabled']
+   *        A valid text track mode.
+   *
+   * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+   *        A unique id for this TextTrack.
+   *
+   * @param {string} [options.label='']
+   *        The menu label for this track.
+   *
+   * @param {string} [options.language='']
+   *        A valid two character language code.
+   *
+   * @param {string} [options.srclang='']
+   *        A valid two character language code. An alternative, but deprioritized
+   *        version of `options.language`
+   *
+   * @param {string} [options.src]
+   *        A url to TextTrack cues.
+   *
+   * @param {boolean} [options.default]
+   *        If this track should default to on or off.
+   */
+  constructor(options = {}) {
+    if (!options.tech) {
+      throw new Error('A tech was not provided.');
+    }
+    const settings = merge$1(options, {
+      kind: TextTrackKind[options.kind] || 'subtitles',
+      language: options.language || options.srclang || ''
+    });
+    let mode = TextTrackMode[settings.mode] || 'disabled';
+    const default_ = settings.default;
+    if (settings.kind === 'metadata' || settings.kind === 'chapters') {
+      mode = 'hidden';
+    }
+    super(settings);
+    this.tech_ = settings.tech;
+    this.cues_ = [];
+    this.activeCues_ = [];
+    this.preload_ = this.tech_.preloadTextTracks !== false;
+    const cues = new TextTrackCueList(this.cues_);
+    const activeCues = new TextTrackCueList(this.activeCues_);
+    let changed = false;
+    this.timeupdateHandler = bind_(this, function (event = {}) {
+      if (this.tech_.isDisposed()) {
+        return;
+      }
+      if (!this.tech_.isReady_) {
+        if (event.type !== 'timeupdate') {
+          this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+        }
+        return;
+      }
+
+      // Accessing this.activeCues for the side-effects of updating itself
+      // due to its nature as a getter function. Do not remove or cues will
+      // stop updating!
+      // Use the setter to prevent deletion from uglify (pure_getters rule)
+      this.activeCues = this.activeCues;
+      if (changed) {
+        this.trigger('cuechange');
+        changed = false;
+      }
+      if (event.type !== 'timeupdate') {
+        this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+      }
+    });
+    const disposeHandler = () => {
+      this.stopTracking();
+    };
+    this.tech_.one('dispose', disposeHandler);
+    if (mode !== 'disabled') {
+      this.startTracking();
+    }
+    Object.defineProperties(this, {
+      /**
+       * @memberof TextTrack
+       * @member {boolean} default
+       *         If this track was set to be on or off by default. Cannot be changed after
+       *         creation.
+       * @instance
+       *
+       * @readonly
+       */
+      default: {
+        get() {
+          return default_;
+        },
+        set() {}
+      },
+      /**
+       * @memberof TextTrack
+       * @member {string} mode
+       *         Set the mode of this TextTrack to a valid {@link TextTrack~Mode}. Will
+       *         not be set if setting to an invalid mode.
+       * @instance
+       *
+       * @fires TextTrack#modechange
+       */
+      mode: {
+        get() {
+          return mode;
+        },
+        set(newMode) {
+          if (!TextTrackMode[newMode]) {
+            return;
+          }
+          if (mode === newMode) {
+            return;
+          }
+          mode = newMode;
+          if (!this.preload_ && mode !== 'disabled' && this.cues.length === 0) {
+            // On-demand load.
+            loadTrack(this.src, this);
+          }
+          this.stopTracking();
+          if (mode !== 'disabled') {
+            this.startTracking();
+          }
+          /**
+           * An event that fires when mode changes on this track. This allows
+           * the TextTrackList that holds this track to act accordingly.
+           *
+           * > Note: This is not part of the spec!
+           *
+           * @event TextTrack#modechange
+           * @type {Event}
+           */
+          this.trigger('modechange');
+        }
+      },
+      /**
+       * @memberof TextTrack
+       * @member {TextTrackCueList} cues
+       *         The text track cue list for this TextTrack.
+       * @instance
+       */
+      cues: {
+        get() {
+          if (!this.loaded_) {
+            return null;
+          }
+          return cues;
+        },
+        set() {}
+      },
+      /**
+       * @memberof TextTrack
+       * @member {TextTrackCueList} activeCues
+       *         The list text track cues that are currently active for this TextTrack.
+       * @instance
+       */
+      activeCues: {
+        get() {
+          if (!this.loaded_) {
+            return null;
+          }
+
+          // nothing to do
+          if (this.cues.length === 0) {
+            return activeCues;
+          }
+          const ct = this.tech_.currentTime();
+          const active = [];
+          for (let i = 0, l = this.cues.length; i < l; i++) {
+            const cue = this.cues[i];
+            if (cue.startTime <= ct && cue.endTime >= ct) {
+              active.push(cue);
+            }
+          }
+          changed = false;
+          if (active.length !== this.activeCues_.length) {
+            changed = true;
+          } else {
+            for (let i = 0; i < active.length; i++) {
+              if (this.activeCues_.indexOf(active[i]) === -1) {
+                changed = true;
+              }
+            }
+          }
+          this.activeCues_ = active;
+          activeCues.setCues_(this.activeCues_);
+          return activeCues;
+        },
+        // /!\ Keep this setter empty (see the timeupdate handler above)
+        set() {}
+      }
+    });
+    if (settings.src) {
+      this.src = settings.src;
+      if (!this.preload_) {
+        // Tracks will load on-demand.
+        // Act like we're loaded for other purposes.
+        this.loaded_ = true;
+      }
+      if (this.preload_ || settings.kind !== 'subtitles' && settings.kind !== 'captions') {
+        loadTrack(this.src, this);
+      }
+    } else {
+      this.loaded_ = true;
+    }
+  }
+  startTracking() {
+    // More precise cues based on requestVideoFrameCallback with a requestAnimationFram fallback
+    this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+    // Also listen to timeupdate in case rVFC/rAF stops (window in background, audio in video el)
+    this.tech_.on('timeupdate', this.timeupdateHandler);
+  }
+  stopTracking() {
+    if (this.rvf_) {
+      this.tech_.cancelVideoFrameCallback(this.rvf_);
+      this.rvf_ = undefined;
+    }
+    this.tech_.off('timeupdate', this.timeupdateHandler);
+  }
+
+  /**
+   * Add a cue to the internal list of cues.
+   *
+   * @param {TextTrack~Cue} cue
+   *        The cue to add to our internal list
+   */
+  addCue(originalCue) {
+    let cue = originalCue;
+
+    // Testing if the cue is a VTTCue in a way that survives minification
+    if (!('getCueAsHTML' in cue)) {
+      cue = new window$1.vttjs.VTTCue(originalCue.startTime, originalCue.endTime, originalCue.text);
+      for (const prop in originalCue) {
+        if (!(prop in cue)) {
+          cue[prop] = originalCue[prop];
+        }
+      }
+
+      // make sure that `id` is copied over
+      cue.id = originalCue.id;
+      cue.originalCue_ = originalCue;
+    }
+    const tracks = this.tech_.textTracks();
+    for (let i = 0; i < tracks.length; i++) {
+      if (tracks[i] !== this) {
+        tracks[i].removeCue(cue);
+      }
+    }
+    this.cues_.push(cue);
+    this.cues.setCues_(this.cues_);
+  }
+
+  /**
+   * Remove a cue from our internal list
+   *
+   * @param {TextTrack~Cue} removeCue
+   *        The cue to remove from our internal list
+   */
+  removeCue(removeCue) {
+    let i = this.cues_.length;
+    while (i--) {
+      const cue = this.cues_[i];
+      if (cue === removeCue || cue.originalCue_ && cue.originalCue_ === removeCue) {
+        this.cues_.splice(i, 1);
+        this.cues.setCues_(this.cues_);
+        break;
+      }
+    }
+  }
+}
+
+/**
+ * cuechange - One or more cues in the track have become active or stopped being active.
+ * @protected
+ */
+TextTrack.prototype.allowedEvents_ = {
+  cuechange: 'cuechange'
+};
+
+/**
+ * A representation of a single `AudioTrack`. If it is part of an {@link AudioTrackList}
+ * only one `AudioTrack` in the list will be enabled at a time.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotrack}
+ * @extends Track
+ */
+class AudioTrack extends Track {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {Object} [options={}]
+   *        Object of option names and values
+   *
+   * @param {AudioTrack~Kind} [options.kind='']
+   *        A valid audio track kind
+   *
+   * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+   *        A unique id for this AudioTrack.
+   *
+   * @param {string} [options.label='']
+   *        The menu label for this track.
+   *
+   * @param {string} [options.language='']
+   *        A valid two character language code.
+   *
+   * @param {boolean} [options.enabled]
+   *        If this track is the one that is currently playing. If this track is part of
+   *        an {@link AudioTrackList}, only one {@link AudioTrack} will be enabled.
+   */
+  constructor(options = {}) {
+    const settings = merge$1(options, {
+      kind: AudioTrackKind[options.kind] || ''
+    });
+    super(settings);
+    let enabled = false;
+
+    /**
+     * @memberof AudioTrack
+     * @member {boolean} enabled
+     *         If this `AudioTrack` is enabled or not. When setting this will
+     *         fire {@link AudioTrack#enabledchange} if the state of enabled is changed.
+     * @instance
+     *
+     * @fires VideoTrack#selectedchange
+     */
+    Object.defineProperty(this, 'enabled', {
+      get() {
+        return enabled;
+      },
+      set(newEnabled) {
+        // an invalid or unchanged value
+        if (typeof newEnabled !== 'boolean' || newEnabled === enabled) {
+          return;
+        }
+        enabled = newEnabled;
+
+        /**
+         * An event that fires when enabled changes on this track. This allows
+         * the AudioTrackList that holds this track to act accordingly.
+         *
+         * > Note: This is not part of the spec! Native tracks will do
+         *         this internally without an event.
+         *
+         * @event AudioTrack#enabledchange
+         * @type {Event}
+         */
+        this.trigger('enabledchange');
+      }
+    });
+
+    // if the user sets this track to selected then
+    // set selected to that true value otherwise
+    // we keep it false
+    if (settings.enabled) {
+      this.enabled = settings.enabled;
+    }
+    this.loaded_ = true;
+  }
+}
+
+/**
+ * A representation of a single `VideoTrack`.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotrack}
+ * @extends Track
+ */
+class VideoTrack extends Track {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {Object} [options={}]
+   *        Object of option names and values
+   *
+   * @param {string} [options.kind='']
+   *        A valid {@link VideoTrack~Kind}
+   *
+   * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+   *        A unique id for this AudioTrack.
+   *
+   * @param {string} [options.label='']
+   *        The menu label for this track.
+   *
+   * @param {string} [options.language='']
+   *        A valid two character language code.
+   *
+   * @param {boolean} [options.selected]
+   *        If this track is the one that is currently playing.
+   */
+  constructor(options = {}) {
+    const settings = merge$1(options, {
+      kind: VideoTrackKind[options.kind] || ''
+    });
+    super(settings);
+    let selected = false;
+
+    /**
+     * @memberof VideoTrack
+     * @member {boolean} selected
+     *         If this `VideoTrack` is selected or not. When setting this will
+     *         fire {@link VideoTrack#selectedchange} if the state of selected changed.
+     * @instance
+     *
+     * @fires VideoTrack#selectedchange
+     */
+    Object.defineProperty(this, 'selected', {
+      get() {
+        return selected;
+      },
+      set(newSelected) {
+        // an invalid or unchanged value
+        if (typeof newSelected !== 'boolean' || newSelected === selected) {
+          return;
+        }
+        selected = newSelected;
+
+        /**
+         * An event that fires when selected changes on this track. This allows
+         * the VideoTrackList that holds this track to act accordingly.
+         *
+         * > Note: This is not part of the spec! Native tracks will do
+         *         this internally without an event.
+         *
+         * @event VideoTrack#selectedchange
+         * @type {Event}
+         */
+        this.trigger('selectedchange');
+      }
+    });
+
+    // if the user sets this track to selected then
+    // set selected to that true value otherwise
+    // we keep it false
+    if (settings.selected) {
+      this.selected = settings.selected;
+    }
+  }
+}
+
+/**
+ * @file html-track-element.js
+ */
+
+/**
+ * A single track represented in the DOM.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#htmltrackelement}
+ * @extends EventTarget
+ */
+class HTMLTrackElement extends EventTarget$2 {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {Object} options={}
+   *        Object of option names and values
+   *
+   * @param { import('../tech/tech').default } options.tech
+   *        A reference to the tech that owns this HTMLTrackElement.
+   *
+   * @param {TextTrack~Kind} [options.kind='subtitles']
+   *        A valid text track kind.
+   *
+   * @param {TextTrack~Mode} [options.mode='disabled']
+   *        A valid text track mode.
+   *
+   * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+   *        A unique id for this TextTrack.
+   *
+   * @param {string} [options.label='']
+   *        The menu label for this track.
+   *
+   * @param {string} [options.language='']
+   *        A valid two character language code.
+   *
+   * @param {string} [options.srclang='']
+   *        A valid two character language code. An alternative, but deprioritized
+   *        version of `options.language`
+   *
+   * @param {string} [options.src]
+   *        A url to TextTrack cues.
+   *
+   * @param {boolean} [options.default]
+   *        If this track should default to on or off.
+   */
+  constructor(options = {}) {
+    super();
+    let readyState;
+    const track = new TextTrack(options);
+    this.kind = track.kind;
+    this.src = track.src;
+    this.srclang = track.language;
+    this.label = track.label;
+    this.default = track.default;
+    Object.defineProperties(this, {
+      /**
+       * @memberof HTMLTrackElement
+       * @member {HTMLTrackElement~ReadyState} readyState
+       *         The current ready state of the track element.
+       * @instance
+       */
+      readyState: {
+        get() {
+          return readyState;
+        }
+      },
+      /**
+       * @memberof HTMLTrackElement
+       * @member {TextTrack} track
+       *         The underlying TextTrack object.
+       * @instance
+       *
+       */
+      track: {
+        get() {
+          return track;
+        }
+      }
+    });
+    readyState = HTMLTrackElement.NONE;
+
+    /**
+     * @listens TextTrack#loadeddata
+     * @fires HTMLTrackElement#load
+     */
+    track.addEventListener('loadeddata', () => {
+      readyState = HTMLTrackElement.LOADED;
+      this.trigger({
+        type: 'load',
+        target: this
+      });
+    });
+  }
+}
+
+/**
+ * @protected
+ */
+HTMLTrackElement.prototype.allowedEvents_ = {
+  load: 'load'
+};
+
+/**
+ * The text track not loaded state.
+ *
+ * @type {number}
+ * @static
+ */
+HTMLTrackElement.NONE = 0;
+
+/**
+ * The text track loading state.
+ *
+ * @type {number}
+ * @static
+ */
+HTMLTrackElement.LOADING = 1;
+
+/**
+ * The text track loaded state.
+ *
+ * @type {number}
+ * @static
+ */
+HTMLTrackElement.LOADED = 2;
+
+/**
+ * The text track failed to load state.
+ *
+ * @type {number}
+ * @static
+ */
+HTMLTrackElement.ERROR = 3;
+
+/*
+ * This file contains all track properties that are used in
+ * player.js, tech.js, html5.js and possibly other techs in the future.
+ */
+
+const NORMAL = {
+  audio: {
+    ListClass: AudioTrackList,
+    TrackClass: AudioTrack,
+    capitalName: 'Audio'
+  },
+  video: {
+    ListClass: VideoTrackList,
+    TrackClass: VideoTrack,
+    capitalName: 'Video'
+  },
+  text: {
+    ListClass: TextTrackList,
+    TrackClass: TextTrack,
+    capitalName: 'Text'
+  }
+};
+Object.keys(NORMAL).forEach(function (type) {
+  NORMAL[type].getterName = `${type}Tracks`;
+  NORMAL[type].privateName = `${type}Tracks_`;
+});
+const REMOTE = {
+  remoteText: {
+    ListClass: TextTrackList,
+    TrackClass: TextTrack,
+    capitalName: 'RemoteText',
+    getterName: 'remoteTextTracks',
+    privateName: 'remoteTextTracks_'
+  },
+  remoteTextEl: {
+    ListClass: HtmlTrackElementList,
+    TrackClass: HTMLTrackElement,
+    capitalName: 'RemoteTextTrackEls',
+    getterName: 'remoteTextTrackEls',
+    privateName: 'remoteTextTrackEls_'
+  }
+};
+const ALL = Object.assign({}, NORMAL, REMOTE);
+REMOTE.names = Object.keys(REMOTE);
+NORMAL.names = Object.keys(NORMAL);
+ALL.names = [].concat(REMOTE.names).concat(NORMAL.names);
+
+/**
+ * @file tech.js
+ */
+
+/**
+ * An Object containing a structure like: `{src: 'url', type: 'mimetype'}` or string
+ * that just contains the src url alone.
+ * * `var SourceObject = {src: 'http://ex.com/video.mp4', type: 'video/mp4'};`
+   * `var SourceString = 'http://example.com/some-video.mp4';`
+ *
+ * @typedef {Object|string} SourceObject
+ *
+ * @property {string} src
+ *           The url to the source
+ *
+ * @property {string} type
+ *           The mime type of the source
+ */
+
+/**
+ * A function used by {@link Tech} to create a new {@link TextTrack}.
+ *
+ * @private
+ *
+ * @param {Tech} self
+ *        An instance of the Tech class.
+ *
+ * @param {string} kind
+ *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+ *
+ * @param {string} [label]
+ *        Label to identify the text track
+ *
+ * @param {string} [language]
+ *        Two letter language abbreviation
+ *
+ * @param {Object} [options={}]
+ *        An object with additional text track options
+ *
+ * @return {TextTrack}
+ *          The text track that was created.
+ */
+function createTrackHelper(self, kind, label, language, options = {}) {
+  const tracks = self.textTracks();
+  options.kind = kind;
+  if (label) {
+    options.label = label;
+  }
+  if (language) {
+    options.language = language;
+  }
+  options.tech = self;
+  const track = new ALL.text.TrackClass(options);
+  tracks.addTrack(track);
+  return track;
+}
+
+/**
+ * This is the base class for media playback technology controllers, such as
+ * {@link HTML5}
+ *
+ * @extends Component
+ */
+class Tech extends Component$1 {
+  /**
+  * Create an instance of this Tech.
+  *
+  * @param {Object} [options]
+  *        The key/value store of player options.
+  *
+  * @param {Function} [ready]
+  *        Callback function to call when the `HTML5` Tech is ready.
+  */
+  constructor(options = {}, ready = function () {}) {
+    // we don't want the tech to report user activity automatically.
+    // This is done manually in addControlsListeners
+    options.reportTouchActivity = false;
+    super(null, options, ready);
+    this.onDurationChange_ = e => this.onDurationChange(e);
+    this.trackProgress_ = e => this.trackProgress(e);
+    this.trackCurrentTime_ = e => this.trackCurrentTime(e);
+    this.stopTrackingCurrentTime_ = e => this.stopTrackingCurrentTime(e);
+    this.disposeSourceHandler_ = e => this.disposeSourceHandler(e);
+    this.queuedHanders_ = new Set();
+
+    // keep track of whether the current source has played at all to
+    // implement a very limited played()
+    this.hasStarted_ = false;
+    this.on('playing', function () {
+      this.hasStarted_ = true;
+    });
+    this.on('loadstart', function () {
+      this.hasStarted_ = false;
+    });
+    ALL.names.forEach(name => {
+      const props = ALL[name];
+      if (options && options[props.getterName]) {
+        this[props.privateName] = options[props.getterName];
+      }
+    });
+
+    // Manually track progress in cases where the browser/tech doesn't report it.
+    if (!this.featuresProgressEvents) {
+      this.manualProgressOn();
+    }
+
+    // Manually track timeupdates in cases where the browser/tech doesn't report it.
+    if (!this.featuresTimeupdateEvents) {
+      this.manualTimeUpdatesOn();
+    }
+    ['Text', 'Audio', 'Video'].forEach(track => {
+      if (options[`native${track}Tracks`] === false) {
+        this[`featuresNative${track}Tracks`] = false;
+      }
+    });
+    if (options.nativeCaptions === false || options.nativeTextTracks === false) {
+      this.featuresNativeTextTracks = false;
+    } else if (options.nativeCaptions === true || options.nativeTextTracks === true) {
+      this.featuresNativeTextTracks = true;
+    }
+    if (!this.featuresNativeTextTracks) {
+      this.emulateTextTracks();
+    }
+    this.preloadTextTracks = options.preloadTextTracks !== false;
+    this.autoRemoteTextTracks_ = new ALL.text.ListClass();
+    this.initTrackListeners();
+
+    // Turn on component tap events only if not using native controls
+    if (!options.nativeControlsForTouch) {
+      this.emitTapEvents();
+    }
+    if (this.constructor) {
+      this.name_ = this.constructor.name || 'Unknown Tech';
+    }
+  }
+
+  /**
+   * A special function to trigger source set in a way that will allow player
+   * to re-trigger if the player or tech are not ready yet.
+   *
+   * @fires Tech#sourceset
+   * @param {string} src The source string at the time of the source changing.
+   */
+  triggerSourceset(src) {
+    if (!this.isReady_) {
+      // on initial ready we have to trigger source set
+      // 1ms after ready so that player can watch for it.
+      this.one('ready', () => this.setTimeout(() => this.triggerSourceset(src), 1));
+    }
+
+    /**
+     * Fired when the source is set on the tech causing the media element
+     * to reload.
+     *
+     * @see {@link Player#event:sourceset}
+     * @event Tech#sourceset
+     * @type {Event}
+     */
+    this.trigger({
+      src,
+      type: 'sourceset'
+    });
+  }
+
+  /* Fallbacks for unsupported event types
+  ================================================================================ */
+
+  /**
+   * Polyfill the `progress` event for browsers that don't support it natively.
+   *
+   * @see {@link Tech#trackProgress}
+   */
+  manualProgressOn() {
+    this.on('durationchange', this.onDurationChange_);
+    this.manualProgress = true;
+
+    // Trigger progress watching when a source begins loading
+    this.one('ready', this.trackProgress_);
+  }
+
+  /**
+   * Turn off the polyfill for `progress` events that was created in
+   * {@link Tech#manualProgressOn}
+   */
+  manualProgressOff() {
+    this.manualProgress = false;
+    this.stopTrackingProgress();
+    this.off('durationchange', this.onDurationChange_);
+  }
+
+  /**
+   * This is used to trigger a `progress` event when the buffered percent changes. It
+   * sets an interval function that will be called every 500 milliseconds to check if the
+   * buffer end percent has changed.
+   *
+   * > This function is called by {@link Tech#manualProgressOn}
+   *
+   * @param {Event} event
+   *        The `ready` event that caused this to run.
+   *
+   * @listens Tech#ready
+   * @fires Tech#progress
+   */
+  trackProgress(event) {
+    this.stopTrackingProgress();
+    this.progressInterval = this.setInterval(bind_(this, function () {
+      // Don't trigger unless buffered amount is greater than last time
+
+      const numBufferedPercent = this.bufferedPercent();
+      if (this.bufferedPercent_ !== numBufferedPercent) {
+        /**
+         * See {@link Player#progress}
+         *
+         * @event Tech#progress
+         * @type {Event}
+         */
+        this.trigger('progress');
+      }
+      this.bufferedPercent_ = numBufferedPercent;
+      if (numBufferedPercent === 1) {
+        this.stopTrackingProgress();
+      }
+    }), 500);
+  }
+
+  /**
+   * Update our internal duration on a `durationchange` event by calling
+   * {@link Tech#duration}.
+   *
+   * @param {Event} event
+   *        The `durationchange` event that caused this to run.
+   *
+   * @listens Tech#durationchange
+   */
+  onDurationChange(event) {
+    this.duration_ = this.duration();
+  }
+
+  /**
+   * Get and create a `TimeRange` object for buffering.
+   *
+   * @return { import('../utils/time').TimeRange }
+   *         The time range object that was created.
+   */
+  buffered() {
+    return createTimeRanges$1(0, 0);
+  }
+
+  /**
+   * Get the percentage of the current video that is currently buffered.
+   *
+   * @return {number}
+   *         A number from 0 to 1 that represents the decimal percentage of the
+   *         video that is buffered.
+   *
+   */
+  bufferedPercent() {
+    return bufferedPercent(this.buffered(), this.duration_);
+  }
+
+  /**
+   * Turn off the polyfill for `progress` events that was created in
+   * {@link Tech#manualProgressOn}
+   * Stop manually tracking progress events by clearing the interval that was set in
+   * {@link Tech#trackProgress}.
+   */
+  stopTrackingProgress() {
+    this.clearInterval(this.progressInterval);
+  }
+
+  /**
+   * Polyfill the `timeupdate` event for browsers that don't support it.
+   *
+   * @see {@link Tech#trackCurrentTime}
+   */
+  manualTimeUpdatesOn() {
+    this.manualTimeUpdates = true;
+    this.on('play', this.trackCurrentTime_);
+    this.on('pause', this.stopTrackingCurrentTime_);
+  }
+
+  /**
+   * Turn off the polyfill for `timeupdate` events that was created in
+   * {@link Tech#manualTimeUpdatesOn}
+   */
+  manualTimeUpdatesOff() {
+    this.manualTimeUpdates = false;
+    this.stopTrackingCurrentTime();
+    this.off('play', this.trackCurrentTime_);
+    this.off('pause', this.stopTrackingCurrentTime_);
+  }
+
+  /**
+   * Sets up an interval function to track current time and trigger `timeupdate` every
+   * 250 milliseconds.
+   *
+   * @listens Tech#play
+   * @triggers Tech#timeupdate
+   */
+  trackCurrentTime() {
+    if (this.currentTimeInterval) {
+      this.stopTrackingCurrentTime();
+    }
+    this.currentTimeInterval = this.setInterval(function () {
+      /**
+       * Triggered at an interval of 250ms to indicated that time is passing in the video.
+       *
+       * @event Tech#timeupdate
+       * @type {Event}
+       */
+      this.trigger({
+        type: 'timeupdate',
+        target: this,
+        manuallyTriggered: true
+      });
+
+      // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
+    }, 250);
+  }
+
+  /**
+   * Stop the interval function created in {@link Tech#trackCurrentTime} so that the
+   * `timeupdate` event is no longer triggered.
+   *
+   * @listens {Tech#pause}
+   */
+  stopTrackingCurrentTime() {
+    this.clearInterval(this.currentTimeInterval);
+
+    // #1002 - if the video ends right before the next timeupdate would happen,
+    // the progress bar won't make it all the way to the end
+    this.trigger({
+      type: 'timeupdate',
+      target: this,
+      manuallyTriggered: true
+    });
+  }
+
+  /**
+   * Turn off all event polyfills, clear the `Tech`s {@link AudioTrackList},
+   * {@link VideoTrackList}, and {@link TextTrackList}, and dispose of this Tech.
+   *
+   * @fires Component#dispose
+   */
+  dispose() {
+    // clear out all tracks because we can't reuse them between techs
+    this.clearTracks(NORMAL.names);
+
+    // Turn off any manual progress or timeupdate tracking
+    if (this.manualProgress) {
+      this.manualProgressOff();
+    }
+    if (this.manualTimeUpdates) {
+      this.manualTimeUpdatesOff();
+    }
+    super.dispose();
+  }
+
+  /**
+   * Clear out a single `TrackList` or an array of `TrackLists` given their names.
+   *
+   * > Note: Techs without source handlers should call this between sources for `video`
+   *         & `audio` tracks. You don't want to use them between tracks!
+   *
+   * @param {string[]|string} types
+   *        TrackList names to clear, valid names are `video`, `audio`, and
+   *        `text`.
+   */
+  clearTracks(types) {
+    types = [].concat(types);
+    // clear out all tracks because we can't reuse them between techs
+    types.forEach(type => {
+      const list = this[`${type}Tracks`]() || [];
+      let i = list.length;
+      while (i--) {
+        const track = list[i];
+        if (type === 'text') {
+          this.removeRemoteTextTrack(track);
+        }
+        list.removeTrack(track);
+      }
+    });
+  }
+
+  /**
+   * Remove any TextTracks added via addRemoteTextTrack that are
+   * flagged for automatic garbage collection
+   */
+  cleanupAutoTextTracks() {
+    const list = this.autoRemoteTextTracks_ || [];
+    let i = list.length;
+    while (i--) {
+      const track = list[i];
+      this.removeRemoteTextTrack(track);
+    }
+  }
+
+  /**
+   * Reset the tech, which will removes all sources and reset the internal readyState.
+   *
+   * @abstract
+   */
+  reset() {}
+
+  /**
+   * Get the value of `crossOrigin` from the tech.
+   *
+   * @abstract
+   *
+   * @see {Html5#crossOrigin}
+   */
+  crossOrigin() {}
+
+  /**
+   * Set the value of `crossOrigin` on the tech.
+   *
+   * @abstract
+   *
+   * @param {string} crossOrigin the crossOrigin value
+   * @see {Html5#setCrossOrigin}
+   */
+  setCrossOrigin() {}
+
+  /**
+   * Get or set an error on the Tech.
+   *
+   * @param {MediaError} [err]
+   *        Error to set on the Tech
+   *
+   * @return {MediaError|null}
+   *         The current error object on the tech, or null if there isn't one.
+   */
+  error(err) {
+    if (err !== undefined) {
+      this.error_ = new MediaError(err);
+      this.trigger('error');
+    }
+    return this.error_;
+  }
+
+  /**
+   * Returns the `TimeRange`s that have been played through for the current source.
+   *
+   * > NOTE: This implementation is incomplete. It does not track the played `TimeRange`.
+   *         It only checks whether the source has played at all or not.
+   *
+   * @return { import('../utils/time').TimeRange }
+   *         - A single time range if this video has played
+   *         - An empty set of ranges if not.
+   */
+  played() {
+    if (this.hasStarted_) {
+      return createTimeRanges$1(0, 0);
+    }
+    return createTimeRanges$1();
+  }
+
+  /**
+   * Start playback
+   *
+   * @abstract
+   *
+   * @see {Html5#play}
+   */
+  play() {}
+
+  /**
+   * Set whether we are scrubbing or not
+   *
+   * @abstract
+   * @param {boolean} _isScrubbing
+   *                  - true for we are currently scrubbing
+   *                  - false for we are no longer scrubbing
+   *
+   * @see {Html5#setScrubbing}
+   */
+  setScrubbing(_isScrubbing) {}
+
+  /**
+   * Get whether we are scrubbing or not
+   *
+   * @abstract
+   *
+   * @see {Html5#scrubbing}
+   */
+  scrubbing() {}
+
+  /**
+   * Causes a manual time update to occur if {@link Tech#manualTimeUpdatesOn} was
+   * previously called.
+   *
+   * @param {number} _seconds
+   *        Set the current time of the media to this.
+   * @fires Tech#timeupdate
+   */
+  setCurrentTime(_seconds) {
+    // improve the accuracy of manual timeupdates
+    if (this.manualTimeUpdates) {
+      /**
+       * A manual `timeupdate` event.
+       *
+       * @event Tech#timeupdate
+       * @type {Event}
+       */
+      this.trigger({
+        type: 'timeupdate',
+        target: this,
+        manuallyTriggered: true
+      });
+    }
+  }
+
+  /**
+   * Turn on listeners for {@link VideoTrackList}, {@link {AudioTrackList}, and
+   * {@link TextTrackList} events.
+   *
+   * This adds {@link EventTarget~EventListeners} for `addtrack`, and  `removetrack`.
+   *
+   * @fires Tech#audiotrackchange
+   * @fires Tech#videotrackchange
+   * @fires Tech#texttrackchange
+   */
+  initTrackListeners() {
+    /**
+      * Triggered when tracks are added or removed on the Tech {@link AudioTrackList}
+      *
+      * @event Tech#audiotrackchange
+      * @type {Event}
+      */
+
+    /**
+      * Triggered when tracks are added or removed on the Tech {@link VideoTrackList}
+      *
+      * @event Tech#videotrackchange
+      * @type {Event}
+      */
+
+    /**
+      * Triggered when tracks are added or removed on the Tech {@link TextTrackList}
+      *
+      * @event Tech#texttrackchange
+      * @type {Event}
+      */
+    NORMAL.names.forEach(name => {
+      const props = NORMAL[name];
+      const trackListChanges = () => {
+        this.trigger(`${name}trackchange`);
+      };
+      const tracks = this[props.getterName]();
+      tracks.addEventListener('removetrack', trackListChanges);
+      tracks.addEventListener('addtrack', trackListChanges);
+      this.on('dispose', () => {
+        tracks.removeEventListener('removetrack', trackListChanges);
+        tracks.removeEventListener('addtrack', trackListChanges);
+      });
+    });
+  }
+
+  /**
+   * Emulate TextTracks using vtt.js if necessary
+   *
+   * @fires Tech#vttjsloaded
+   * @fires Tech#vttjserror
+   */
+  addWebVttScript_() {
+    if (window$1.WebVTT) {
+      return;
+    }
+
+    // Initially, Tech.el_ is a child of a dummy-div wait until the Component system
+    // signals that the Tech is ready at which point Tech.el_ is part of the DOM
+    // before inserting the WebVTT script
+    if (document.body.contains(this.el())) {
+      // load via require if available and vtt.js script location was not passed in
+      // as an option. novtt builds will turn the above require call into an empty object
+      // which will cause this if check to always fail.
+      if (!this.options_['vtt.js'] && isPlain(vtt) && Object.keys(vtt).length > 0) {
+        this.trigger('vttjsloaded');
+        return;
+      }
+
+      // load vtt.js via the script location option or the cdn of no location was
+      // passed in
+      const script = document.createElement('script');
+      script.src = this.options_['vtt.js'] || 'https://vjs.zencdn.net/vttjs/0.14.1/vtt.min.js';
+      script.onload = () => {
+        /**
+         * Fired when vtt.js is loaded.
+         *
+         * @event Tech#vttjsloaded
+         * @type {Event}
+         */
+        this.trigger('vttjsloaded');
+      };
+      script.onerror = () => {
+        /**
+         * Fired when vtt.js was not loaded due to an error
+         *
+         * @event Tech#vttjsloaded
+         * @type {Event}
+         */
+        this.trigger('vttjserror');
+      };
+      this.on('dispose', () => {
+        script.onload = null;
+        script.onerror = null;
+      });
+      // but have not loaded yet and we set it to true before the inject so that
+      // we don't overwrite the injected window.WebVTT if it loads right away
+      window$1.WebVTT = true;
+      this.el().parentNode.appendChild(script);
+    } else {
+      this.ready(this.addWebVttScript_);
+    }
+  }
+
+  /**
+   * Emulate texttracks
+   *
+   */
+  emulateTextTracks() {
+    const tracks = this.textTracks();
+    const remoteTracks = this.remoteTextTracks();
+    const handleAddTrack = e => tracks.addTrack(e.track);
+    const handleRemoveTrack = e => tracks.removeTrack(e.track);
+    remoteTracks.on('addtrack', handleAddTrack);
+    remoteTracks.on('removetrack', handleRemoveTrack);
+    this.addWebVttScript_();
+    const updateDisplay = () => this.trigger('texttrackchange');
+    const textTracksChanges = () => {
+      updateDisplay();
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        track.removeEventListener('cuechange', updateDisplay);
+        if (track.mode === 'showing') {
+          track.addEventListener('cuechange', updateDisplay);
+        }
+      }
+    };
+    textTracksChanges();
+    tracks.addEventListener('change', textTracksChanges);
+    tracks.addEventListener('addtrack', textTracksChanges);
+    tracks.addEventListener('removetrack', textTracksChanges);
+    this.on('dispose', function () {
+      remoteTracks.off('addtrack', handleAddTrack);
+      remoteTracks.off('removetrack', handleRemoveTrack);
+      tracks.removeEventListener('change', textTracksChanges);
+      tracks.removeEventListener('addtrack', textTracksChanges);
+      tracks.removeEventListener('removetrack', textTracksChanges);
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        track.removeEventListener('cuechange', updateDisplay);
+      }
+    });
+  }
+
+  /**
+   * Create and returns a remote {@link TextTrack} object.
+   *
+   * @param {string} kind
+   *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+   *
+   * @param {string} [label]
+   *        Label to identify the text track
+   *
+   * @param {string} [language]
+   *        Two letter language abbreviation
+   *
+   * @return {TextTrack}
+   *         The TextTrack that gets created.
+   */
+  addTextTrack(kind, label, language) {
+    if (!kind) {
+      throw new Error('TextTrack kind is required but was not provided');
+    }
+    return createTrackHelper(this, kind, label, language);
+  }
+
+  /**
+   * Create an emulated TextTrack for use by addRemoteTextTrack
+   *
+   * This is intended to be overridden by classes that inherit from
+   * Tech in order to create native or custom TextTracks.
+   *
+   * @param {Object} options
+   *        The object should contain the options to initialize the TextTrack with.
+   *
+   * @param {string} [options.kind]
+   *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+   *
+   * @param {string} [options.label].
+   *        Label to identify the text track
+   *
+   * @param {string} [options.language]
+   *        Two letter language abbreviation.
+   *
+   * @return {HTMLTrackElement}
+   *         The track element that gets created.
+   */
+  createRemoteTextTrack(options) {
+    const track = merge$1(options, {
+      tech: this
+    });
+    return new REMOTE.remoteTextEl.TrackClass(track);
+  }
+
+  /**
+   * Creates a remote text track object and returns an html track element.
+   *
+   * > Note: This can be an emulated {@link HTMLTrackElement} or a native one.
+   *
+   * @param {Object} options
+   *        See {@link Tech#createRemoteTextTrack} for more detailed properties.
+   *
+   * @param {boolean} [manualCleanup=false]
+   *        - When false: the TextTrack will be automatically removed from the video
+   *          element whenever the source changes
+   *        - When True: The TextTrack will have to be cleaned up manually
+   *
+   * @return {HTMLTrackElement}
+   *         An Html Track Element.
+   *
+   */
+  addRemoteTextTrack(options = {}, manualCleanup) {
+    const htmlTrackElement = this.createRemoteTextTrack(options);
+    if (typeof manualCleanup !== 'boolean') {
+      manualCleanup = false;
+    }
+
+    // store HTMLTrackElement and TextTrack to remote list
+    this.remoteTextTrackEls().addTrackElement_(htmlTrackElement);
+    this.remoteTextTracks().addTrack(htmlTrackElement.track);
+    if (manualCleanup === false) {
+      // create the TextTrackList if it doesn't exist
+      this.ready(() => this.autoRemoteTextTracks_.addTrack(htmlTrackElement.track));
+    }
+    return htmlTrackElement;
+  }
+
+  /**
+   * Remove a remote text track from the remote `TextTrackList`.
+   *
+   * @param {TextTrack} track
+   *        `TextTrack` to remove from the `TextTrackList`
+   */
+  removeRemoteTextTrack(track) {
+    const trackElement = this.remoteTextTrackEls().getTrackElementByTrack_(track);
+
+    // remove HTMLTrackElement and TextTrack from remote list
+    this.remoteTextTrackEls().removeTrackElement_(trackElement);
+    this.remoteTextTracks().removeTrack(track);
+    this.autoRemoteTextTracks_.removeTrack(track);
+  }
+
+  /**
+   * Gets available media playback quality metrics as specified by the W3C's Media
+   * Playback Quality API.
+   *
+   * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+   *
+   * @return {Object}
+   *         An object with supported media playback quality metrics
+   *
+   * @abstract
+   */
+  getVideoPlaybackQuality() {
+    return {};
+  }
+
+  /**
+   * Attempt to create a floating video window always on top of other windows
+   * so that users may continue consuming media while they interact with other
+   * content sites, or applications on their device.
+   *
+   * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+   *
+   * @return {Promise|undefined}
+   *         A promise with a Picture-in-Picture window if the browser supports
+   *         Promises (or one was passed in as an option). It returns undefined
+   *         otherwise.
+   *
+   * @abstract
+   */
+  requestPictureInPicture() {
+    return Promise.reject();
+  }
+
+  /**
+   * A method to check for the value of the 'disablePictureInPicture' <video> property.
+   * Defaults to true, as it should be considered disabled if the tech does not support pip
+   *
+   * @abstract
+   */
+  disablePictureInPicture() {
+    return true;
+  }
+
+  /**
+   * A method to set or unset the 'disablePictureInPicture' <video> property.
+   *
+   * @abstract
+   */
+  setDisablePictureInPicture() {}
+
+  /**
+   * A fallback implementation of requestVideoFrameCallback using requestAnimationFrame
+   *
+   * @param {function} cb
+   * @return {number} request id
+   */
+  requestVideoFrameCallback(cb) {
+    const id = newGUID();
+    if (!this.isReady_ || this.paused()) {
+      this.queuedHanders_.add(id);
+      this.one('playing', () => {
+        if (this.queuedHanders_.has(id)) {
+          this.queuedHanders_.delete(id);
+          cb();
+        }
+      });
+    } else {
+      this.requestNamedAnimationFrame(id, cb);
+    }
+    return id;
+  }
+
+  /**
+   * A fallback implementation of cancelVideoFrameCallback
+   *
+   * @param {number} id id of callback to be cancelled
+   */
+  cancelVideoFrameCallback(id) {
+    if (this.queuedHanders_.has(id)) {
+      this.queuedHanders_.delete(id);
+    } else {
+      this.cancelNamedAnimationFrame(id);
+    }
+  }
+
+  /**
+   * A method to set a poster from a `Tech`.
+   *
+   * @abstract
+   */
+  setPoster() {}
+
+  /**
+   * A method to check for the presence of the 'playsinline' <video> attribute.
+   *
+   * @abstract
+   */
+  playsinline() {}
+
+  /**
+   * A method to set or unset the 'playsinline' <video> attribute.
+   *
+   * @abstract
+   */
+  setPlaysinline() {}
+
+  /**
+   * Attempt to force override of native audio tracks.
+   *
+   * @param {boolean} override - If set to true native audio will be overridden,
+   * otherwise native audio will potentially be used.
+   *
+   * @abstract
+   */
+  overrideNativeAudioTracks(override) {}
+
+  /**
+   * Attempt to force override of native video tracks.
+   *
+   * @param {boolean} override - If set to true native video will be overridden,
+   * otherwise native video will potentially be used.
+   *
+   * @abstract
+   */
+  overrideNativeVideoTracks(override) {}
+
+  /**
+   * Check if the tech can support the given mime-type.
+   *
+   * The base tech does not support any type, but source handlers might
+   * overwrite this.
+   *
+   * @param  {string} _type
+   *         The mimetype to check for support
+   *
+   * @return {string}
+   *         'probably', 'maybe', or empty string
+   *
+   * @see [Spec]{@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType}
+   *
+   * @abstract
+   */
+  canPlayType(_type) {
+    return '';
+  }
+
+  /**
+   * Check if the type is supported by this tech.
+   *
+   * The base tech does not support any type, but source handlers might
+   * overwrite this.
+   *
+   * @param {string} _type
+   *        The media type to check
+   * @return {string} Returns the native video element's response
+   */
+  static canPlayType(_type) {
+    return '';
+  }
+
+  /**
+   * Check if the tech can support the given source
+   *
+   * @param {Object} srcObj
+   *        The source object
+   * @param {Object} options
+   *        The options passed to the tech
+   * @return {string} 'probably', 'maybe', or '' (empty string)
+   */
+  static canPlaySource(srcObj, options) {
+    return Tech.canPlayType(srcObj.type);
+  }
+
+  /*
+   * Return whether the argument is a Tech or not.
+   * Can be passed either a Class like `Html5` or a instance like `player.tech_`
+   *
+   * @param {Object} component
+   *        The item to check
+   *
+   * @return {boolean}
+   *         Whether it is a tech or not
+   *         - True if it is a tech
+   *         - False if it is not
+   */
+  static isTech(component) {
+    return component.prototype instanceof Tech || component instanceof Tech || component === Tech;
+  }
+
+  /**
+   * Registers a `Tech` into a shared list for videojs.
+   *
+   * @param {string} name
+   *        Name of the `Tech` to register.
+   *
+   * @param {Object} tech
+   *        The `Tech` class to register.
+   */
+  static registerTech(name, tech) {
+    if (!Tech.techs_) {
+      Tech.techs_ = {};
+    }
+    if (!Tech.isTech(tech)) {
+      throw new Error(`Tech ${name} must be a Tech`);
+    }
+    if (!Tech.canPlayType) {
+      throw new Error('Techs must have a static canPlayType method on them');
+    }
+    if (!Tech.canPlaySource) {
+      throw new Error('Techs must have a static canPlaySource method on them');
+    }
+    name = toTitleCase$1(name);
+    Tech.techs_[name] = tech;
+    Tech.techs_[toLowerCase(name)] = tech;
+    if (name !== 'Tech') {
+      // camel case the techName for use in techOrder
+      Tech.defaultTechOrder_.push(name);
+    }
+    return tech;
+  }
+
+  /**
+   * Get a `Tech` from the shared list by name.
+   *
+   * @param {string} name
+   *        `camelCase` or `TitleCase` name of the Tech to get
+   *
+   * @return {Tech|undefined}
+   *         The `Tech` or undefined if there was no tech with the name requested.
+   */
+  static getTech(name) {
+    if (!name) {
+      return;
+    }
+    if (Tech.techs_ && Tech.techs_[name]) {
+      return Tech.techs_[name];
+    }
+    name = toTitleCase$1(name);
+    if (window$1 && window$1.videojs && window$1.videojs[name]) {
+      log$1.warn(`The ${name} tech was added to the videojs object when it should be registered using videojs.registerTech(name, tech)`);
+      return window$1.videojs[name];
+    }
+  }
+}
+
+/**
+ * Get the {@link VideoTrackList}
+ *
+ * @returns {VideoTrackList}
+ * @method Tech.prototype.videoTracks
+ */
+
+/**
+ * Get the {@link AudioTrackList}
+ *
+ * @returns {AudioTrackList}
+ * @method Tech.prototype.audioTracks
+ */
+
+/**
+ * Get the {@link TextTrackList}
+ *
+ * @returns {TextTrackList}
+ * @method Tech.prototype.textTracks
+ */
+
+/**
+ * Get the remote element {@link TextTrackList}
+ *
+ * @returns {TextTrackList}
+ * @method Tech.prototype.remoteTextTracks
+ */
+
+/**
+ * Get the remote element {@link HtmlTrackElementList}
+ *
+ * @returns {HtmlTrackElementList}
+ * @method Tech.prototype.remoteTextTrackEls
+ */
+
+ALL.names.forEach(function (name) {
+  const props = ALL[name];
+  Tech.prototype[props.getterName] = function () {
+    this[props.privateName] = this[props.privateName] || new props.ListClass();
+    return this[props.privateName];
+  };
+});
+
+/**
+ * List of associated text tracks
+ *
+ * @type {TextTrackList}
+ * @private
+ * @property Tech#textTracks_
+ */
+
+/**
+ * List of associated audio tracks.
+ *
+ * @type {AudioTrackList}
+ * @private
+ * @property Tech#audioTracks_
+ */
+
+/**
+ * List of associated video tracks.
+ *
+ * @type {VideoTrackList}
+ * @private
+ * @property Tech#videoTracks_
+ */
+
+/**
+ * Boolean indicating whether the `Tech` supports volume control.
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresVolumeControl = true;
+
+/**
+ * Boolean indicating whether the `Tech` supports muting volume.
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresMuteControl = true;
+
+/**
+ * Boolean indicating whether the `Tech` supports fullscreen resize control.
+ * Resizing plugins using request fullscreen reloads the plugin
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresFullscreenResize = false;
+
+/**
+ * Boolean indicating whether the `Tech` supports changing the speed at which the video
+ * plays. Examples:
+ *   - Set player to play 2x (twice) as fast
+ *   - Set player to play 0.5x (half) as fast
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresPlaybackRate = false;
+
+/**
+ * Boolean indicating whether the `Tech` supports the `progress` event.
+ * This will be used to determine if {@link Tech#manualProgressOn} should be called.
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresProgressEvents = false;
+
+/**
+ * Boolean indicating whether the `Tech` supports the `sourceset` event.
+ *
+ * A tech should set this to `true` and then use {@link Tech#triggerSourceset}
+ * to trigger a {@link Tech#event:sourceset} at the earliest time after getting
+ * a new source.
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresSourceset = false;
+
+/**
+ * Boolean indicating whether the `Tech` supports the `timeupdate` event.
+ * This will be used to determine if {@link Tech#manualTimeUpdates} should be called.
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresTimeupdateEvents = false;
+
+/**
+ * Boolean indicating whether the `Tech` supports the native `TextTrack`s.
+ * This will help us integrate with native `TextTrack`s if the browser supports them.
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresNativeTextTracks = false;
+
+/**
+ * Boolean indicating whether the `Tech` supports `requestVideoFrameCallback`.
+ *
+ * @type {boolean}
+ * @default
+ */
+Tech.prototype.featuresVideoFrameCallback = false;
+
+/**
+ * A functional mixin for techs that want to use the Source Handler pattern.
+ * Source handlers are scripts for handling specific formats.
+ * The source handler pattern is used for adaptive formats (HLS, DASH) that
+ * manually load video data and feed it into a Source Buffer (Media Source Extensions)
+ * Example: `Tech.withSourceHandlers.call(MyTech);`
+ *
+ * @param {Tech} _Tech
+ *        The tech to add source handler functions to.
+ *
+ * @mixes Tech~SourceHandlerAdditions
+ */
+Tech.withSourceHandlers = function (_Tech) {
+  /**
+   * Register a source handler
+   *
+   * @param {Function} handler
+   *        The source handler class
+   *
+   * @param {number} [index]
+   *        Register it at the following index
+   */
+  _Tech.registerSourceHandler = function (handler, index) {
+    let handlers = _Tech.sourceHandlers;
+    if (!handlers) {
+      handlers = _Tech.sourceHandlers = [];
+    }
+    if (index === undefined) {
+      // add to the end of the list
+      index = handlers.length;
+    }
+    handlers.splice(index, 0, handler);
+  };
+
+  /**
+   * Check if the tech can support the given type. Also checks the
+   * Techs sourceHandlers.
+   *
+   * @param {string} type
+   *         The mimetype to check.
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string)
+   */
+  _Tech.canPlayType = function (type) {
+    const handlers = _Tech.sourceHandlers || [];
+    let can;
+    for (let i = 0; i < handlers.length; i++) {
+      can = handlers[i].canPlayType(type);
+      if (can) {
+        return can;
+      }
+    }
+    return '';
+  };
+
+  /**
+   * Returns the first source handler that supports the source.
+   *
+   * TODO: Answer question: should 'probably' be prioritized over 'maybe'
+   *
+   * @param {SourceObject} source
+   *        The source object
+   *
+   * @param {Object} options
+   *        The options passed to the tech
+   *
+   * @return {SourceHandler|null}
+   *          The first source handler that supports the source or null if
+   *          no SourceHandler supports the source
+   */
+  _Tech.selectSourceHandler = function (source, options) {
+    const handlers = _Tech.sourceHandlers || [];
+    let can;
+    for (let i = 0; i < handlers.length; i++) {
+      can = handlers[i].canHandleSource(source, options);
+      if (can) {
+        return handlers[i];
+      }
+    }
+    return null;
+  };
+
+  /**
+   * Check if the tech can support the given source.
+   *
+   * @param {SourceObject} srcObj
+   *        The source object
+   *
+   * @param {Object} options
+   *        The options passed to the tech
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string)
+   */
+  _Tech.canPlaySource = function (srcObj, options) {
+    const sh = _Tech.selectSourceHandler(srcObj, options);
+    if (sh) {
+      return sh.canHandleSource(srcObj, options);
+    }
+    return '';
+  };
+
+  /**
+   * When using a source handler, prefer its implementation of
+   * any function normally provided by the tech.
+   */
+  const deferrable = ['seekable', 'seeking', 'duration'];
+
+  /**
+   * A wrapper around {@link Tech#seekable} that will call a `SourceHandler`s seekable
+   * function if it exists, with a fallback to the Techs seekable function.
+   *
+   * @method _Tech.seekable
+   */
+
+  /**
+   * A wrapper around {@link Tech#duration} that will call a `SourceHandler`s duration
+   * function if it exists, otherwise it will fallback to the techs duration function.
+   *
+   * @method _Tech.duration
+   */
+
+  deferrable.forEach(function (fnName) {
+    const originalFn = this[fnName];
+    if (typeof originalFn !== 'function') {
+      return;
+    }
+    this[fnName] = function () {
+      if (this.sourceHandler_ && this.sourceHandler_[fnName]) {
+        return this.sourceHandler_[fnName].apply(this.sourceHandler_, arguments);
+      }
+      return originalFn.apply(this, arguments);
+    };
+  }, _Tech.prototype);
+
+  /**
+   * Create a function for setting the source using a source object
+   * and source handlers.
+   * Should never be called unless a source handler was found.
+   *
+   * @param {SourceObject} source
+   *        A source object with src and type keys
+   */
+  _Tech.prototype.setSource = function (source) {
+    let sh = _Tech.selectSourceHandler(source, this.options_);
+    if (!sh) {
+      // Fall back to a native source handler when unsupported sources are
+      // deliberately set
+      if (_Tech.nativeSourceHandler) {
+        sh = _Tech.nativeSourceHandler;
+      } else {
+        log$1.error('No source handler found for the current source.');
+      }
+    }
+
+    // Dispose any existing source handler
+    this.disposeSourceHandler();
+    this.off('dispose', this.disposeSourceHandler_);
+    if (sh !== _Tech.nativeSourceHandler) {
+      this.currentSource_ = source;
+    }
+    this.sourceHandler_ = sh.handleSource(source, this, this.options_);
+    this.one('dispose', this.disposeSourceHandler_);
+  };
+
+  /**
+   * Clean up any existing SourceHandlers and listeners when the Tech is disposed.
+   *
+   * @listens Tech#dispose
+   */
+  _Tech.prototype.disposeSourceHandler = function () {
+    // if we have a source and get another one
+    // then we are loading something new
+    // than clear all of our current tracks
+    if (this.currentSource_) {
+      this.clearTracks(['audio', 'video']);
+      this.currentSource_ = null;
+    }
+
+    // always clean up auto-text tracks
+    this.cleanupAutoTextTracks();
+    if (this.sourceHandler_) {
+      if (this.sourceHandler_.dispose) {
+        this.sourceHandler_.dispose();
+      }
+      this.sourceHandler_ = null;
+    }
+  };
+};
+
+// The base Tech class needs to be registered as a Component. It is the only
+// Tech that can be registered as a Component.
+Component$1.registerComponent('Tech', Tech);
+Tech.registerTech('Tech', Tech);
+
+/**
+ * A list of techs that should be added to techOrder on Players
+ *
+ * @private
+ */
+Tech.defaultTechOrder_ = [];
+
+/**
+ * @file middleware.js
+ * @module middleware
+ */
+const middlewares = {};
+const middlewareInstances = {};
+const TERMINATOR = {};
+
+/**
+ * A middleware object is a plain JavaScript object that has methods that
+ * match the {@link Tech} methods found in the lists of allowed
+ * {@link module:middleware.allowedGetters|getters},
+ * {@link module:middleware.allowedSetters|setters}, and
+ * {@link module:middleware.allowedMediators|mediators}.
+ *
+ * @typedef {Object} MiddlewareObject
+ */
+
+/**
+ * A middleware factory function that should return a
+ * {@link module:middleware~MiddlewareObject|MiddlewareObject}.
+ *
+ * This factory will be called for each player when needed, with the player
+ * passed in as an argument.
+ *
+ * @callback MiddlewareFactory
+ * @param { import('../player').default } player
+ *        A Video.js player.
+ */
+
+/**
+ * Define a middleware that the player should use by way of a factory function
+ * that returns a middleware object.
+ *
+ * @param  {string} type
+ *         The MIME type to match or `"*"` for all MIME types.
+ *
+ * @param  {MiddlewareFactory} middleware
+ *         A middleware factory function that will be executed for
+ *         matching types.
+ */
+function use(type, middleware) {
+  middlewares[type] = middlewares[type] || [];
+  middlewares[type].push(middleware);
+}
+
+/**
+ * Asynchronously sets a source using middleware by recursing through any
+ * matching middlewares and calling `setSource` on each, passing along the
+ * previous returned value each time.
+ *
+ * @param  { import('../player').default } player
+ *         A {@link Player} instance.
+ *
+ * @param  {Tech~SourceObject} src
+ *         A source object.
+ *
+ * @param  {Function}
+ *         The next middleware to run.
+ */
+function setSource(player, src, next) {
+  player.setTimeout(() => setSourceHelper(src, middlewares[src.type], next, player), 1);
+}
+
+/**
+ * When the tech is set, passes the tech to each middleware's `setTech` method.
+ *
+ * @param {Object[]} middleware
+ *        An array of middleware instances.
+ *
+ * @param { import('../tech/tech').default } tech
+ *        A Video.js tech.
+ */
+function setTech(middleware, tech) {
+  middleware.forEach(mw => mw.setTech && mw.setTech(tech));
+}
+
+/**
+ * Calls a getter on the tech first, through each middleware
+ * from right to left to the player.
+ *
+ * @param  {Object[]} middleware
+ *         An array of middleware instances.
+ *
+ * @param  { import('../tech/tech').default } tech
+ *         The current tech.
+ *
+ * @param  {string} method
+ *         A method name.
+ *
+ * @return {*}
+ *         The final value from the tech after middleware has intercepted it.
+ */
+function get(middleware, tech, method) {
+  return middleware.reduceRight(middlewareIterator(method), tech[method]());
+}
+
+/**
+ * Takes the argument given to the player and calls the setter method on each
+ * middleware from left to right to the tech.
+ *
+ * @param  {Object[]} middleware
+ *         An array of middleware instances.
+ *
+ * @param  { import('../tech/tech').default } tech
+ *         The current tech.
+ *
+ * @param  {string} method
+ *         A method name.
+ *
+ * @param  {*} arg
+ *         The value to set on the tech.
+ *
+ * @return {*}
+ *         The return value of the `method` of the `tech`.
+ */
+function set(middleware, tech, method, arg) {
+  return tech[method](middleware.reduce(middlewareIterator(method), arg));
+}
+
+/**
+ * Takes the argument given to the player and calls the `call` version of the
+ * method on each middleware from left to right.
+ *
+ * Then, call the passed in method on the tech and return the result unchanged
+ * back to the player, through middleware, this time from right to left.
+ *
+ * @param  {Object[]} middleware
+ *         An array of middleware instances.
+ *
+ * @param  { import('../tech/tech').default } tech
+ *         The current tech.
+ *
+ * @param  {string} method
+ *         A method name.
+ *
+ * @param  {*} arg
+ *         The value to set on the tech.
+ *
+ * @return {*}
+ *         The return value of the `method` of the `tech`, regardless of the
+ *         return values of middlewares.
+ */
+function mediate(middleware, tech, method, arg = null) {
+  const callMethod = 'call' + toTitleCase$1(method);
+  const middlewareValue = middleware.reduce(middlewareIterator(callMethod), arg);
+  const terminated = middlewareValue === TERMINATOR;
+  // deprecated. The `null` return value should instead return TERMINATOR to
+  // prevent confusion if a techs method actually returns null.
+  const returnValue = terminated ? null : tech[method](middlewareValue);
+  executeRight(middleware, method, returnValue, terminated);
+  return returnValue;
+}
+
+/**
+ * Enumeration of allowed getters where the keys are method names.
+ *
+ * @type {Object}
+ */
+const allowedGetters = {
+  buffered: 1,
+  currentTime: 1,
+  duration: 1,
+  muted: 1,
+  played: 1,
+  paused: 1,
+  seekable: 1,
+  volume: 1,
+  ended: 1
+};
+
+/**
+ * Enumeration of allowed setters where the keys are method names.
+ *
+ * @type {Object}
+ */
+const allowedSetters = {
+  setCurrentTime: 1,
+  setMuted: 1,
+  setVolume: 1
+};
+
+/**
+ * Enumeration of allowed mediators where the keys are method names.
+ *
+ * @type {Object}
+ */
+const allowedMediators = {
+  play: 1,
+  pause: 1
+};
+function middlewareIterator(method) {
+  return (value, mw) => {
+    // if the previous middleware terminated, pass along the termination
+    if (value === TERMINATOR) {
+      return TERMINATOR;
+    }
+    if (mw[method]) {
+      return mw[method](value);
+    }
+    return value;
+  };
+}
+function executeRight(mws, method, value, terminated) {
+  for (let i = mws.length - 1; i >= 0; i--) {
+    const mw = mws[i];
+    if (mw[method]) {
+      mw[method](terminated, value);
+    }
+  }
+}
+
+/**
+ * Clear the middleware cache for a player.
+ *
+ * @param  { import('../player').default } player
+ *         A {@link Player} instance.
+ */
+function clearCacheForPlayer(player) {
+  middlewareInstances[player.id()] = null;
+}
+
+/**
+ * {
+ *  [playerId]: [[mwFactory, mwInstance], ...]
+ * }
+ *
+ * @private
+ */
+function getOrCreateFactory(player, mwFactory) {
+  const mws = middlewareInstances[player.id()];
+  let mw = null;
+  if (mws === undefined || mws === null) {
+    mw = mwFactory(player);
+    middlewareInstances[player.id()] = [[mwFactory, mw]];
+    return mw;
+  }
+  for (let i = 0; i < mws.length; i++) {
+    const [mwf, mwi] = mws[i];
+    if (mwf !== mwFactory) {
+      continue;
+    }
+    mw = mwi;
+  }
+  if (mw === null) {
+    mw = mwFactory(player);
+    mws.push([mwFactory, mw]);
+  }
+  return mw;
+}
+function setSourceHelper(src = {}, middleware = [], next, player, acc = [], lastRun = false) {
+  const [mwFactory, ...mwrest] = middleware;
+
+  // if mwFactory is a string, then we're at a fork in the road
+  if (typeof mwFactory === 'string') {
+    setSourceHelper(src, middlewares[mwFactory], next, player, acc, lastRun);
+
+    // if we have an mwFactory, call it with the player to get the mw,
+    // then call the mw's setSource method
+  } else if (mwFactory) {
+    const mw = getOrCreateFactory(player, mwFactory);
+
+    // if setSource isn't present, implicitly select this middleware
+    if (!mw.setSource) {
+      acc.push(mw);
+      return setSourceHelper(src, mwrest, next, player, acc, lastRun);
+    }
+    mw.setSource(Object.assign({}, src), function (err, _src) {
+      // something happened, try the next middleware on the current level
+      // make sure to use the old src
+      if (err) {
+        return setSourceHelper(src, mwrest, next, player, acc, lastRun);
+      }
+
+      // we've succeeded, now we need to go deeper
+      acc.push(mw);
+
+      // if it's the same type, continue down the current chain
+      // otherwise, we want to go down the new chain
+      setSourceHelper(_src, src.type === _src.type ? mwrest : middlewares[_src.type], next, player, acc, lastRun);
+    });
+  } else if (mwrest.length) {
+    setSourceHelper(src, mwrest, next, player, acc, lastRun);
+  } else if (lastRun) {
+    next(src, acc);
+  } else {
+    setSourceHelper(src, middlewares['*'], next, player, acc, true);
+  }
+}
+
+/**
+ * Mimetypes
+ *
+ * @see https://www.iana.org/assignments/media-types/media-types.xhtml
+ * @typedef Mimetypes~Kind
+ * @enum
+ */
+const MimetypesKind = {
+  opus: 'video/ogg',
+  ogv: 'video/ogg',
+  mp4: 'video/mp4',
+  mov: 'video/mp4',
+  m4v: 'video/mp4',
+  mkv: 'video/x-matroska',
+  m4a: 'audio/mp4',
+  mp3: 'audio/mpeg',
+  aac: 'audio/aac',
+  caf: 'audio/x-caf',
+  flac: 'audio/flac',
+  oga: 'audio/ogg',
+  wav: 'audio/wav',
+  m3u8: 'application/x-mpegURL',
+  mpd: 'application/dash+xml',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  png: 'image/png',
+  svg: 'image/svg+xml',
+  webp: 'image/webp'
+};
+
+/**
+ * Get the mimetype of a given src url if possible
+ *
+ * @param {string} src
+ *        The url to the src
+ *
+ * @return {string}
+ *         return the mimetype if it was known or empty string otherwise
+ */
+const getMimetype = function (src = '') {
+  const ext = getFileExtension(src);
+  const mimetype = MimetypesKind[ext.toLowerCase()];
+  return mimetype || '';
+};
+
+/**
+ * Find the mime type of a given source string if possible. Uses the player
+ * source cache.
+ *
+ * @param { import('../player').default } player
+ *        The player object
+ *
+ * @param {string} src
+ *        The source string
+ *
+ * @return {string}
+ *         The type that was found
+ */
+const findMimetype = (player, src) => {
+  if (!src) {
+    return '';
+  }
+
+  // 1. check for the type in the `source` cache
+  if (player.cache_.source.src === src && player.cache_.source.type) {
+    return player.cache_.source.type;
+  }
+
+  // 2. see if we have this source in our `currentSources` cache
+  const matchingSources = player.cache_.sources.filter(s => s.src === src);
+  if (matchingSources.length) {
+    return matchingSources[0].type;
+  }
+
+  // 3. look for the src url in source elements and use the type there
+  const sources = player.$$('source');
+  for (let i = 0; i < sources.length; i++) {
+    const s = sources[i];
+    if (s.type && s.src && s.src === src) {
+      return s.type;
+    }
+  }
+
+  // 4. finally fallback to our list of mime types based on src url extension
+  return getMimetype(src);
+};
+
+/**
+ * @module filter-source
+ */
+
+/**
+ * Filter out single bad source objects or multiple source objects in an
+ * array. Also flattens nested source object arrays into a 1 dimensional
+ * array of source objects.
+ *
+ * @param {Tech~SourceObject|Tech~SourceObject[]} src
+ *        The src object to filter
+ *
+ * @return {Tech~SourceObject[]}
+ *         An array of sourceobjects containing only valid sources
+ *
+ * @private
+ */
+const filterSource = function (src) {
+  // traverse array
+  if (Array.isArray(src)) {
+    let newsrc = [];
+    src.forEach(function (srcobj) {
+      srcobj = filterSource(srcobj);
+      if (Array.isArray(srcobj)) {
+        newsrc = newsrc.concat(srcobj);
+      } else if (isObject(srcobj)) {
+        newsrc.push(srcobj);
+      }
+    });
+    src = newsrc;
+  } else if (typeof src === 'string' && src.trim()) {
+    // convert string into object
+    src = [fixSource({
+      src
+    })];
+  } else if (isObject(src) && typeof src.src === 'string' && src.src && src.src.trim()) {
+    // src is already valid
+    src = [fixSource(src)];
+  } else {
+    // invalid source, turn it into an empty array
+    src = [];
+  }
+  return src;
+};
+
+/**
+ * Checks src mimetype, adding it when possible
+ *
+ * @param {Tech~SourceObject} src
+ *        The src object to check
+ * @return {Tech~SourceObject}
+ *        src Object with known type
+ */
+function fixSource(src) {
+  if (!src.type) {
+    const mimetype = getMimetype(src.src);
+    if (mimetype) {
+      src.type = mimetype;
+    }
+  }
+  return src;
+}
+
+var icons = "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-play\">\n      <path d=\"M16 10v28l22-14z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-pause\">\n      <path d=\"M12 38h8V10h-8v28zm16-28v28h8V10h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-audio\">\n      <path d=\"M24 2C14.06 2 6 10.06 6 20v14c0 3.31 2.69 6 6 6h6V24h-8v-4c0-7.73 6.27-14 14-14s14 6.27 14 14v4h-8v16h6c3.31 0 6-2.69 6-6V20c0-9.94-8.06-18-18-18z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-captions\">\n      <path d=\"M38 8H10c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM22 22h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2zm14 0h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-subtitles\">\n      <path d=\"M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-fullscreen-enter\">\n      <path d=\"M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-fullscreen-exit\">\n      <path d=\"M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-play-circle\">\n      <path d=\"M20 33l12-9-12-9v18zm4-29C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-mute\">\n      <path d=\"M33 24c0-3.53-2.04-6.58-5-8.05v4.42l4.91 4.91c.06-.42.09-.85.09-1.28zm5 0c0 1.88-.41 3.65-1.08 5.28l3.03 3.03C41.25 29.82 42 27 42 24c0-8.56-5.99-15.72-14-17.54v4.13c5.78 1.72 10 7.07 10 13.41zM8.55 6L6 8.55 15.45 18H6v12h8l10 10V26.55l8.51 8.51c-1.34 1.03-2.85 1.86-4.51 2.36v4.13a17.94 17.94 0 0 0 7.37-3.62L39.45 42 42 39.45l-18-18L8.55 6zM24 8l-4.18 4.18L24 16.36V8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-low\">\n      <path d=\"M14 18v12h8l10 10V8L22 18h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-medium\">\n      <path d=\"M37 24c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zm-27-6v12h8l10 10V8L18 18h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-high\">\n      <path d=\"M6 18v12h8l10 10V8L14 18H6zm27 6c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zM28 6.46v4.13c5.78 1.72 10 7.07 10 13.41s-4.22 11.69-10 13.41v4.13c8.01-1.82 14-8.97 14-17.54S36.01 8.28 28 6.46z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-spinner\">\n      <path d=\"M18.8 21l9.53-16.51C26.94 4.18 25.49 4 24 4c-4.8 0-9.19 1.69-12.64 4.51l7.33 12.69.11-.2zm24.28-3c-1.84-5.85-6.3-10.52-11.99-12.68L23.77 18h19.31zm.52 2H28.62l.58 1 9.53 16.5C41.99 33.94 44 29.21 44 24c0-1.37-.14-2.71-.4-4zm-26.53 4l-7.8-13.5C6.01 14.06 4 18.79 4 24c0 1.37.14 2.71.4 4h14.98l-2.31-4zM4.92 30c1.84 5.85 6.3 10.52 11.99 12.68L24.23 30H4.92zm22.54 0l-7.8 13.51c1.4.31 2.85.49 4.34.49 4.8 0 9.19-1.69 12.64-4.51L29.31 26.8 27.46 30z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 24 24\" id=\"vjs-icon-hd\">\n      <path d=\"M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-chapters\">\n      <path d=\"M6 26h4v-4H6v4zm0 8h4v-4H6v4zm0-16h4v-4H6v4zm8 8h28v-4H14v4zm0 8h28v-4H14v4zm0-20v4h28v-4H14z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 40 40\" id=\"vjs-icon-downloading\">\n      <path d=\"M18.208 36.875q-3.208-.292-5.979-1.729-2.771-1.438-4.812-3.729-2.042-2.292-3.188-5.229-1.146-2.938-1.146-6.23 0-6.583 4.334-11.416 4.333-4.834 10.833-5.5v3.166q-5.167.75-8.583 4.646Q6.25 14.75 6.25 19.958q0 5.209 3.396 9.104 3.396 3.896 8.562 4.646zM20 28.417L11.542 20l2.083-2.083 4.917 4.916v-11.25h2.916v11.25l4.875-4.916L28.417 20zm1.792 8.458v-3.167q1.833-.25 3.541-.958 1.709-.708 3.167-1.875l2.333 2.292q-1.958 1.583-4.25 2.541-2.291.959-4.791 1.167zm6.791-27.792q-1.541-1.125-3.25-1.854-1.708-.729-3.541-1.021V3.042q2.5.25 4.77 1.208 2.271.958 4.271 2.5zm4.584 21.584l-2.25-2.25q1.166-1.5 1.854-3.209.687-1.708.937-3.541h3.209q-.292 2.5-1.229 4.791-.938 2.292-2.521 4.209zm.541-12.417q-.291-1.833-.958-3.562-.667-1.73-1.833-3.188l2.375-2.208q1.541 1.916 2.458 4.208.917 2.292 1.167 4.75z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download\">\n      <path d=\"M10.8 40.55q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h26.35v-7.7h3.4v7.7q0 1.4-1 2.4t-2.4 1zM24 32.1L13.9 22.05l2.45-2.45 5.95 5.95V7.15h3.4v18.4l5.95-5.95 2.45 2.45z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download-done\">\n      <path d=\"M9.8 40.5v-3.45h28.4v3.45zm9.2-9.05L7.4 19.85l2.45-2.35L19 26.65l19.2-19.2 2.4 2.4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download-off\">\n      <path d=\"M4.9 4.75L43.25 43.1 41 45.3l-4.75-4.75q-.05.05-.075.025-.025-.025-.075-.025H10.8q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h22.05l-7-7-1.85 1.8L13.9 21.9l1.85-1.85L2.7 7zm26.75 14.7l2.45 2.45-3.75 3.8-2.45-2.5zM25.7 7.15V21.1l-3.4-3.45V7.15z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-share\">\n      <path d=\"M36 32.17c-1.52 0-2.89.59-3.93 1.54L17.82 25.4c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31A5.83 5.83 0 1 0 36 32.17z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cog\">\n      <path d=\"M38.86 25.95c.08-.64.14-1.29.14-1.95s-.06-1.31-.14-1.95l4.23-3.31c.38-.3.49-.84.24-1.28l-4-6.93c-.25-.43-.77-.61-1.22-.43l-4.98 2.01c-1.03-.79-2.16-1.46-3.38-1.97L29 4.84c-.09-.47-.5-.84-1-.84h-8c-.5 0-.91.37-.99.84l-.75 5.3a14.8 14.8 0 0 0-3.38 1.97L9.9 10.1a1 1 0 0 0-1.22.43l-4 6.93c-.25.43-.14.97.24 1.28l4.22 3.31C9.06 22.69 9 23.34 9 24s.06 1.31.14 1.95l-4.22 3.31c-.38.3-.49.84-.24 1.28l4 6.93c.25.43.77.61 1.22.43l4.98-2.01c1.03.79 2.16 1.46 3.38 1.97l.75 5.3c.08.47.49.84.99.84h8c.5 0 .91-.37.99-.84l.75-5.3a14.8 14.8 0 0 0 3.38-1.97l4.98 2.01a1 1 0 0 0 1.22-.43l4-6.93c.25-.43.14-.97-.24-1.28l-4.22-3.31zM24 31c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-square\">\n      <path d=\"M36 8H12c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H12V12h24v24z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle\">\n      <circle cx=\"24\" cy=\"24\" r=\"20\"></circle>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle-outline\">\n      <path d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle-inner-circle\">\n      <path d=\"M24 4C12.97 4 4 12.97 4 24s8.97 20 20 20 20-8.97 20-20S35.03 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm6-16c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6 6 2.69 6 6z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cancel\">\n      <path d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-replay\">\n      <path d=\"M24 10V2L14 12l10 10v-8c6.63 0 12 5.37 12 12s-5.37 12-12 12-12-5.37-12-12H8c0 8.84 7.16 16 16 16s16-7.16 16-16-7.16-16-16-16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-repeat\">\n      <path d=\"M14 14h20v6l8-8-8-8v6H10v12h4v-8zm20 20H14v-6l-8 8 8 8v-6h24V26h-4v8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-5\">\n      <path d=\"M17.689 98l-8.697 8.696 8.697 8.697 2.486-2.485-4.32-4.319h1.302c4.93 0 9.071 1.722 12.424 5.165 3.352 3.443 5.029 7.638 5.029 12.584h3.55c0-2.958-.553-5.73-1.658-8.313-1.104-2.583-2.622-4.841-4.555-6.774-1.932-1.932-4.19-3.45-6.773-4.555-2.584-1.104-5.355-1.657-8.313-1.657H15.5l4.615-4.615zm-8.08 21.659v13.861h11.357v5.008H9.609V143h12.7c.834 0 1.55-.298 2.146-.894.596-.597.895-1.31.895-2.145v-7.781c0-.835-.299-1.55-.895-2.147a2.929 2.929 0 0 0-2.147-.894h-8.227v-5.096H25.35v-4.384z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-10\">\n      <path d=\"M42.315 125.63c0-4.997-1.694-9.235-5.08-12.713-3.388-3.479-7.571-5.218-12.552-5.218h-1.315l4.363 4.363-2.51 2.51-8.787-8.786L25.221 97l2.45 2.45-4.662 4.663h1.375c2.988 0 5.788.557 8.397 1.673 2.61 1.116 4.892 2.65 6.844 4.602 1.953 1.953 3.487 4.234 4.602 6.844 1.116 2.61 1.674 5.41 1.674 8.398zM8.183 142v-19.657H3.176V117.8h9.643V142zm13.63 0c-1.156 0-2.127-.393-2.912-1.178-.778-.778-1.168-1.746-1.168-2.902v-16.04c0-1.156.393-2.127 1.178-2.912.779-.779 1.746-1.168 2.902-1.168h7.696c1.156 0 2.126.392 2.911 1.177.779.78 1.168 1.747 1.168 2.903v16.04c0 1.156-.392 2.127-1.177 2.912-.779.779-1.746 1.168-2.902 1.168zm.556-4.636h6.583v-15.02H22.37z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-30\">\n      <path d=\"M26.047 97l-8.733 8.732 8.733 8.733 2.496-2.494-4.336-4.338h1.307c4.95 0 9.108 1.73 12.474 5.187 3.367 3.458 5.051 7.668 5.051 12.635h3.565c0-2.97-.556-5.751-1.665-8.346-1.109-2.594-2.633-4.862-4.574-6.802-1.94-1.941-4.208-3.466-6.803-4.575-2.594-1.109-5.375-1.664-8.345-1.664H23.85l4.634-4.634zM2.555 117.531v4.688h10.297v5.25H5.873v4.687h6.979v5.156H2.555V142H13.36c1.061 0 1.95-.395 2.668-1.186.718-.79 1.076-1.772 1.076-2.94v-16.218c0-1.168-.358-2.149-1.076-2.94-.717-.79-1.607-1.185-2.668-1.185zm22.482.14c-1.149 0-2.11.39-2.885 1.165-.78.78-1.172 1.744-1.172 2.893v15.943c0 1.149.388 2.11 1.163 2.885.78.78 1.745 1.172 2.894 1.172h7.649c1.148 0 2.11-.388 2.884-1.163.78-.78 1.17-1.745 1.17-2.894v-15.943c0-1.15-.386-2.111-1.16-2.885-.78-.78-1.746-1.172-2.894-1.172zm.553 4.518h6.545v14.93H25.59z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-5\">\n      <path d=\"M29.508 97l-2.431 2.43 4.625 4.625h-1.364c-2.965 0-5.742.554-8.332 1.66-2.589 1.107-4.851 2.629-6.788 4.566-1.937 1.937-3.458 4.2-4.565 6.788-1.107 2.59-1.66 5.367-1.66 8.331h3.557c0-4.957 1.68-9.16 5.04-12.611 3.36-3.45 7.51-5.177 12.451-5.177h1.304l-4.326 4.33 2.49 2.49 8.715-8.716zm-9.783 21.61v13.89h11.382v5.018H19.725V142h12.727a2.93 2.93 0 0 0 2.15-.896 2.93 2.93 0 0 0 .896-2.15v-7.798c0-.837-.299-1.554-.896-2.152a2.93 2.93 0 0 0-2.15-.896h-8.245V123h11.29v-4.392z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-10\">\n      <path d=\"M23.119 97l-2.386 2.383 4.538 4.538h-1.339c-2.908 0-5.633.543-8.173 1.63-2.54 1.085-4.76 2.577-6.66 4.478-1.9 1.9-3.392 4.12-4.478 6.66-1.085 2.54-1.629 5.264-1.629 8.172h3.49c0-4.863 1.648-8.986 4.944-12.372 3.297-3.385 7.368-5.078 12.216-5.078h1.279l-4.245 4.247 2.443 2.442 8.55-8.55zm-9.52 21.45v4.42h4.871V142h4.513v-23.55zm18.136 0c-1.125 0-2.066.377-2.824 1.135-.764.764-1.148 1.709-1.148 2.834v15.612c0 1.124.38 2.066 1.139 2.824.764.764 1.708 1.145 2.833 1.145h7.489c1.125 0 2.066-.378 2.824-1.136.764-.764 1.145-1.709 1.145-2.833v-15.612c0-1.125-.378-2.067-1.136-2.825-.764-.764-1.708-1.145-2.833-1.145zm.54 4.42h6.408v14.617h-6.407z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-30\">\n      <path d=\"M25.549 97l-2.437 2.434 4.634 4.635H26.38c-2.97 0-5.753.555-8.347 1.664-2.594 1.109-4.861 2.633-6.802 4.574-1.94 1.94-3.465 4.207-4.574 6.802-1.109 2.594-1.664 5.377-1.664 8.347h3.565c0-4.967 1.683-9.178 5.05-12.636 3.366-3.458 7.525-5.187 12.475-5.187h1.307l-4.335 4.338 2.495 2.494 8.732-8.732zm-11.553 20.53v4.689h10.297v5.249h-6.978v4.688h6.978v5.156H13.996V142h10.808c1.06 0 1.948-.395 2.666-1.186.718-.79 1.077-1.771 1.077-2.94v-16.217c0-1.169-.36-2.15-1.077-2.94-.718-.79-1.605-1.186-2.666-1.186zm21.174.168c-1.149 0-2.11.389-2.884 1.163-.78.78-1.172 1.745-1.172 2.894v15.942c0 1.15.388 2.11 1.162 2.885.78.78 1.745 1.17 2.894 1.17h7.649c1.149 0 2.11-.386 2.885-1.16.78-.78 1.17-1.746 1.17-2.895v-15.942c0-1.15-.387-2.11-1.161-2.885-.78-.78-1.745-1.172-2.894-1.172zm.552 4.516h6.542v14.931h-6.542z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 512 512\" id=\"vjs-icon-audio-description\">\n      <g fill-rule=\"evenodd\"><path d=\"M227.29 381.351V162.993c50.38-1.017 89.108-3.028 117.631 17.126 27.374 19.342 48.734 56.965 44.89 105.325-4.067 51.155-41.335 94.139-89.776 98.475-24.085 2.155-71.972 0-71.972 0s-.84-1.352-.773-2.568m48.755-54.804c31.43 1.26 53.208-16.633 56.495-45.386 4.403-38.51-21.188-63.552-58.041-60.796v103.612c-.036 1.466.575 2.22 1.546 2.57\"></path><path d=\"M383.78 381.328c13.336 3.71 17.387-11.06 23.215-21.408 12.722-22.571 22.294-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.226 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894\"></path><path d=\"M425.154 381.328c13.336 3.71 17.384-11.061 23.215-21.408 12.721-22.571 22.291-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.511c-.586 3.874 2.226 7.315 3.866 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894\"></path><path d=\"M466.26 381.328c13.337 3.71 17.385-11.061 23.216-21.408 12.722-22.571 22.292-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.225 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894M4.477 383.005H72.58l18.573-28.484 64.169-.135s.065 19.413.065 28.62h48.756V160.307h-58.816c-5.653 9.537-140.85 222.697-140.85 222.697zm152.667-145.282v71.158l-40.453-.27 40.453-70.888z\"></path></g>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-next-item\">\n      <path d=\"M12 36l17-12-17-12v24zm20-24v24h4V12h-4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-previous-item\">\n      <path d=\"M12 12h4v24h-4zm7 12l17 12V12z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-shuffle\">\n      <path d=\"M21.17 18.34L10.83 8 8 10.83l10.34 10.34 2.83-2.83zM29 8l4.09 4.09L8 37.17 10.83 40l25.09-25.09L40 19V8H29zm.66 18.83l-2.83 2.83 6.26 6.26L29 40h11V29l-4.09 4.09-6.25-6.26z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cast\">\n      <path d=\"M42 6H6c-2.21 0-4 1.79-4 4v6h4v-6h36v28H28v4h14c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4zM2 36v6h6c0-3.31-2.69-6-6-6zm0-8v4c5.52 0 10 4.48 10 10h4c0-7.73-6.27-14-14-14zm0-8v4c9.94 0 18 8.06 18 18h4c0-12.15-9.85-22-22-22z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-picture-in-picture-enter\">\n      <path d=\"M38 22H22v11.99h16V22zm8 16V9.96C46 7.76 44.2 6 42 6H6C3.8 6 2 7.76 2 9.96V38c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4zm-4 .04H6V9.94h36v28.1z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 22 18\" id=\"vjs-icon-picture-in-picture-exit\">\n      <path d=\"M18 4H4v10h14V4zm4 12V1.98C22 .88 21.1 0 20 0H2C.9 0 0 .88 0 1.98V16c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H2V1.97h18v14.05z\"></path>\n      <path fill=\"none\" d=\"M-1-3h24v24H-1z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-facebook\">\n      <path d=\"M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759H734V905H479V609h255V391q0-186 104-288.5T1115 0q147 0 228 12z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-linkedin\">\n      <path d=\"M477 625v991H147V625h330zm21-306q1 73-50.5 122T312 490h-2q-82 0-132-49t-50-122q0-74 51.5-122.5T314 148t133 48.5T498 319zm1166 729v568h-329v-530q0-105-40.5-164.5T1168 862q-63 0-105.5 34.5T999 982q-11 30-11 81v553H659q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5T1285 602q171 0 275 113.5t104 332.5z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-twitter\">\n      <path d=\"M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5T1369.5 1125 1185 1335.5t-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5T285 1033q33 5 61 5 43 0 85-11-112-23-185.5-111.5T172 710v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5T884 653q-8-38-8-74 0-134 94.5-228.5T1199 256q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-tumblr\">\n      <path d=\"M1328 1329l80 237q-23 35-111 66t-177 32q-104 2-190.5-26T787 1564t-95-106-55.5-120-16.5-118V676H452V461q72-26 129-69.5t91-90 58-102 34-99T779 12q1-5 4.5-8.5T791 0h244v424h333v252h-334v518q0 30 6.5 56t22.5 52.5 49.5 41.5 81.5 14q78-2 134-29z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-pinterest\">\n      <path d=\"M1664 896q0 209-103 385.5T1281.5 1561 896 1664q-111 0-218-32 59-93 78-164 9-34 54-211 20 39 73 67.5t114 28.5q121 0 216-68.5t147-188.5 52-270q0-114-59.5-214T1180 449t-255-63q-105 0-196 29t-154.5 77-109 110.5-67 129.5T377 866q0 104 40 183t117 111q30 12 38-20 2-7 8-31t8-30q6-23-11-43-51-61-51-151 0-151 104.5-259.5T904 517q151 0 235.5 82t84.5 213q0 170-68.5 289T980 1220q-61 0-98-43.5T859 1072q8-35 26.5-93.5t30-103T927 800q0-50-27-83t-77-33q-62 0-105 57t-43 142q0 73 25 122l-99 418q-17 70-13 177-206-91-333-281T128 896q0-209 103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z\"></path>\n    </symbol>\n  </defs>\n</svg>";
+
+/**
+ * @file loader.js
+ */
+
+/**
+ * The `MediaLoader` is the `Component` that decides which playback technology to load
+ * when a player is initialized.
+ *
+ * @extends Component
+ */
+class MediaLoader extends Component$1 {
+  /**
+   * Create an instance of this class.
+   *
+   * @param { import('../player').default } player
+   *        The `Player` that this class should attach to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Function} [ready]
+   *        The function that is run when this component is ready.
+   */
+  constructor(player, options, ready) {
+    // MediaLoader has no element
+    const options_ = merge$1({
+      createEl: false
+    }, options);
+    super(player, options_, ready);
+
+    // If there are no sources when the player is initialized,
+    // load the first supported playback technology.
+
+    if (!options.playerOptions.sources || options.playerOptions.sources.length === 0) {
+      for (let i = 0, j = options.playerOptions.techOrder; i < j.length; i++) {
+        const techName = toTitleCase$1(j[i]);
+        let tech = Tech.getTech(techName);
+
+        // Support old behavior of techs being registered as components.
+        // Remove once that deprecated behavior is removed.
+        if (!techName) {
+          tech = Component$1.getComponent(techName);
+        }
+
+        // Check if the browser supports this technology
+        if (tech && tech.isSupported()) {
+          player.loadTech_(techName);
+          break;
+        }
+      }
+    } else {
+      // Loop through playback technologies (e.g. HTML5) and check for support.
+      // Then load the best source.
+      // A few assumptions here:
+      //   All playback technologies respect preload false.
+      player.src(options.playerOptions.sources);
+    }
+  }
+}
+Component$1.registerComponent('MediaLoader', MediaLoader);
+
+/**
+ * @file clickable-component.js
+ */
+
+/**
+ * Component which is clickable or keyboard actionable, but is not a
+ * native HTML button.
+ *
+ * @extends Component
+ */
+class ClickableComponent extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param  { import('./player').default } player
+   *         The `Player` that this class should be attached to.
+   *
+   * @param  {Object} [options]
+   *         The key/value store of component options.
+   *
+   * @param  {function} [options.clickHandler]
+   *         The function to call when the button is clicked / activated
+   *
+   * @param  {string} [options.controlText]
+   *         The text to set on the button
+   *
+   * @param  {string} [options.className]
+   *         A class or space separated list of classes to add the component
+   *
+   */
+  constructor(player, options) {
+    super(player, options);
+    if (this.options_.controlText) {
+      this.controlText(this.options_.controlText);
+    }
+    this.handleMouseOver_ = e => this.handleMouseOver(e);
+    this.handleMouseOut_ = e => this.handleMouseOut(e);
+    this.handleClick_ = e => this.handleClick(e);
+    this.handleKeyDown_ = e => this.handleKeyDown(e);
+    this.emitTapEvents();
+    this.enable();
+  }
+
+  /**
+   * Create the `ClickableComponent`s DOM element.
+   *
+   * @param {string} [tag=div]
+   *        The element's node type.
+   *
+   * @param {Object} [props={}]
+   *        An object of properties that should be set on the element.
+   *
+   * @param {Object} [attributes={}]
+   *        An object of attributes that should be set on the element.
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl(tag = 'div', props = {}, attributes = {}) {
+    props = Object.assign({
+      className: this.buildCSSClass(),
+      tabIndex: 0
+    }, props);
+    if (tag === 'button') {
+      log$1.error(`Creating a ClickableComponent with an HTML element of ${tag} is not supported; use a Button instead.`);
+    }
+
+    // Add ARIA attributes for clickable element which is not a native HTML button
+    attributes = Object.assign({
+      role: 'button'
+    }, attributes);
+    this.tabIndex_ = props.tabIndex;
+    const el = createEl(tag, props, attributes);
+    if (!this.player_.options_.experimentalSvgIcons) {
+      el.appendChild(createEl('span', {
+        className: 'vjs-icon-placeholder'
+      }, {
+        'aria-hidden': true
+      }));
+    }
+    this.createControlTextEl(el);
+    return el;
+  }
+  dispose() {
+    // remove controlTextEl_ on dispose
+    this.controlTextEl_ = null;
+    super.dispose();
+  }
+
+  /**
+   * Create a control text element on this `ClickableComponent`
+   *
+   * @param {Element} [el]
+   *        Parent element for the control text.
+   *
+   * @return {Element}
+   *         The control text element that gets created.
+   */
+  createControlTextEl(el) {
+    this.controlTextEl_ = createEl('span', {
+      className: 'vjs-control-text'
+    }, {
+      // let the screen reader user know that the text of the element may change
+      'aria-live': 'polite'
+    });
+    if (el) {
+      el.appendChild(this.controlTextEl_);
+    }
+    this.controlText(this.controlText_, el);
+    return this.controlTextEl_;
+  }
+
+  /**
+   * Get or set the localize text to use for the controls on the `ClickableComponent`.
+   *
+   * @param {string} [text]
+   *        Control text for element.
+   *
+   * @param {Element} [el=this.el()]
+   *        Element to set the title on.
+   *
+   * @return {string}
+   *         - The control text when getting
+   */
+  controlText(text, el = this.el()) {
+    if (text === undefined) {
+      return this.controlText_ || 'Need Text';
+    }
+    const localizedText = this.localize(text);
+
+    /** @protected */
+    this.controlText_ = text;
+    textContent(this.controlTextEl_, localizedText);
+    if (!this.nonIconControl && !this.player_.options_.noUITitleAttributes) {
+      // Set title attribute if only an icon is shown
+      el.setAttribute('title', localizedText);
+    }
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-control vjs-button ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Enable this `ClickableComponent`
+   */
+  enable() {
+    if (!this.enabled_) {
+      this.enabled_ = true;
+      this.removeClass('vjs-disabled');
+      this.el_.setAttribute('aria-disabled', 'false');
+      if (typeof this.tabIndex_ !== 'undefined') {
+        this.el_.setAttribute('tabIndex', this.tabIndex_);
+      }
+      this.on(['tap', 'click'], this.handleClick_);
+      this.on('keydown', this.handleKeyDown_);
+    }
+  }
+
+  /**
+   * Disable this `ClickableComponent`
+   */
+  disable() {
+    this.enabled_ = false;
+    this.addClass('vjs-disabled');
+    this.el_.setAttribute('aria-disabled', 'true');
+    if (typeof this.tabIndex_ !== 'undefined') {
+      this.el_.removeAttribute('tabIndex');
+    }
+    this.off('mouseover', this.handleMouseOver_);
+    this.off('mouseout', this.handleMouseOut_);
+    this.off(['tap', 'click'], this.handleClick_);
+    this.off('keydown', this.handleKeyDown_);
+  }
+
+  /**
+   * Handles language change in ClickableComponent for the player in components
+   *
+   *
+   */
+  handleLanguagechange() {
+    this.controlText(this.controlText_);
+  }
+
+  /**
+   * Event handler that is called when a `ClickableComponent` receives a
+   * `click` or `tap` event.
+   *
+   * @param {Event} event
+   *        The `tap` or `click` event that caused this function to be called.
+   *
+   * @listens tap
+   * @listens click
+   * @abstract
+   */
+  handleClick(event) {
+    if (this.options_.clickHandler) {
+      this.options_.clickHandler.call(this, arguments);
+    }
+  }
+
+  /**
+   * Event handler that is called when a `ClickableComponent` receives a
+   * `keydown` event.
+   *
+   * By default, if the key is Space or Enter, it will trigger a `click` event.
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Support Space or Enter key operation to fire a click event. Also,
+    // prevent the event from propagating through the DOM and triggering
+    // Player hotkeys.
+    if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.trigger('click');
+    } else {
+      // Pass keypress handling up for unsupported keys
+      super.handleKeyDown(event);
+    }
+  }
+}
+Component$1.registerComponent('ClickableComponent', ClickableComponent);
+
+/**
+ * @file poster-image.js
+ */
+
+/**
+ * A `ClickableComponent` that handles showing the poster image for the player.
+ *
+ * @extends ClickableComponent
+ */
+class PosterImage extends ClickableComponent {
+  /**
+   * Create an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should attach to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.update();
+    this.update_ = e => this.update(e);
+    player.on('posterchange', this.update_);
+  }
+
+  /**
+   * Clean up and dispose of the `PosterImage`.
+   */
+  dispose() {
+    this.player().off('posterchange', this.update_);
+    super.dispose();
+  }
+
+  /**
+   * Create the `PosterImage`s DOM element.
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl() {
+    // The el is an empty div to keep position in the DOM
+    // A picture and img el will be inserted when a source is set
+    return createEl('div', {
+      className: 'vjs-poster'
+    });
+  }
+
+  /**
+   * Get or set the `PosterImage`'s crossOrigin option.
+   *
+   * @param {string|null} [value]
+   *        The value to set the crossOrigin to. If an argument is
+   *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+   *
+   * @return {string|null}
+   *         - The current crossOrigin value of the `Player` when getting.
+   *         - undefined when setting
+   */
+  crossOrigin(value) {
+    // `null` can be set to unset a value
+    if (typeof value === 'undefined') {
+      if (this.$('img')) {
+        // If the poster's element exists, give its value
+        return this.$('img').crossOrigin;
+      } else if (this.player_.tech_ && this.player_.tech_.isReady_) {
+        // If not but the tech is ready, query the tech
+        return this.player_.crossOrigin();
+      }
+      // Otherwise check options as the  poster is usually set before the state of crossorigin
+      // can be retrieved by the getter
+      return this.player_.options_.crossOrigin || this.player_.options_.crossorigin || null;
+    }
+    if (value !== null && value !== 'anonymous' && value !== 'use-credentials') {
+      this.player_.log.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${value}"`);
+      return;
+    }
+    if (this.$('img')) {
+      this.$('img').crossOrigin = value;
+    }
+    return;
+  }
+
+  /**
+   * An {@link EventTarget~EventListener} for {@link Player#posterchange} events.
+   *
+   * @listens Player#posterchange
+   *
+   * @param {Event} [event]
+   *        The `Player#posterchange` event that triggered this function.
+   */
+  update(event) {
+    const url = this.player().poster();
+    this.setSrc(url);
+
+    // If there's no poster source we should display:none on this component
+    // so it's not still clickable or right-clickable
+    if (url) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  /**
+   * Set the source of the `PosterImage` depending on the display method. (Re)creates
+   * the inner picture and img elementss when needed.
+   *
+   * @param {string} [url]
+   *        The URL to the source for the `PosterImage`. If not specified or falsy,
+   *        any source and ant inner picture/img are removed.
+   */
+  setSrc(url) {
+    if (!url) {
+      this.el_.textContent = '';
+      return;
+    }
+    if (!this.$('img')) {
+      this.el_.appendChild(createEl('picture', {
+        className: 'vjs-poster',
+        // Don't want poster to be tabbable.
+        tabIndex: -1
+      }, {}, createEl('img', {
+        loading: 'lazy',
+        crossOrigin: this.crossOrigin()
+      }, {
+        alt: ''
+      })));
+    }
+    this.$('img').src = url;
+  }
+
+  /**
+   * An {@link EventTarget~EventListener} for clicks on the `PosterImage`. See
+   * {@link ClickableComponent#handleClick} for instances where this will be triggered.
+   *
+   * @listens tap
+   * @listens click
+   * @listens keydown
+   *
+   * @param {Event} event
+   +        The `click`, `tap` or `keydown` event that caused this function to be called.
+   */
+  handleClick(event) {
+    // We don't want a click to trigger playback when controls are disabled
+    if (!this.player_.controls()) {
+      return;
+    }
+    if (this.player_.tech(true)) {
+      this.player_.tech(true).focus();
+    }
+    if (this.player_.paused()) {
+      silencePromise(this.player_.play());
+    } else {
+      this.player_.pause();
+    }
+  }
+}
+
+/**
+ * Get or set the `PosterImage`'s crossorigin option. For the HTML5 player, this
+ * sets the `crossOrigin` property on the `<img>` tag to control the CORS
+ * behavior.
+ *
+ * @param {string|null} [value]
+ *        The value to set the `PosterImages`'s crossorigin to. If an argument is
+ *        given, must be one of `anonymous` or `use-credentials`.
+ *
+ * @return {string|null|undefined}
+ *         - The current crossorigin value of the `Player` when getting.
+ *         - undefined when setting
+ */
+PosterImage.prototype.crossorigin = PosterImage.prototype.crossOrigin;
+Component$1.registerComponent('PosterImage', PosterImage);
+
+/**
+ * @file text-track-display.js
+ */
+const darkGray = '#222';
+const lightGray = '#ccc';
+const fontMap = {
+  monospace: 'monospace',
+  sansSerif: 'sans-serif',
+  serif: 'serif',
+  monospaceSansSerif: '"Andale Mono", "Lucida Console", monospace',
+  monospaceSerif: '"Courier New", monospace',
+  proportionalSansSerif: 'sans-serif',
+  proportionalSerif: 'serif',
+  casual: '"Comic Sans MS", Impact, fantasy',
+  script: '"Monotype Corsiva", cursive',
+  smallcaps: '"Andale Mono", "Lucida Console", monospace, sans-serif'
+};
+
+/**
+ * Construct an rgba color from a given hex color code.
+ *
+ * @param {number} color
+ *        Hex number for color, like #f0e or #f604e2.
+ *
+ * @param {number} opacity
+ *        Value for opacity, 0.0 - 1.0.
+ *
+ * @return {string}
+ *         The rgba color that was created, like 'rgba(255, 0, 0, 0.3)'.
+ */
+function constructColor(color, opacity) {
+  let hex;
+  if (color.length === 4) {
+    // color looks like "#f0e"
+    hex = color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+  } else if (color.length === 7) {
+    // color looks like "#f604e2"
+    hex = color.slice(1);
+  } else {
+    throw new Error('Invalid color code provided, ' + color + '; must be formatted as e.g. #f0e or #f604e2.');
+  }
+  return 'rgba(' + parseInt(hex.slice(0, 2), 16) + ',' + parseInt(hex.slice(2, 4), 16) + ',' + parseInt(hex.slice(4, 6), 16) + ',' + opacity + ')';
+}
+
+/**
+ * Try to update the style of a DOM element. Some style changes will throw an error,
+ * particularly in IE8. Those should be noops.
+ *
+ * @param {Element} el
+ *        The DOM element to be styled.
+ *
+ * @param {string} style
+ *        The CSS property on the element that should be styled.
+ *
+ * @param {string} rule
+ *        The style rule that should be applied to the property.
+ *
+ * @private
+ */
+function tryUpdateStyle(el, style, rule) {
+  try {
+    el.style[style] = rule;
+  } catch (e) {
+    // Satisfies linter.
+    return;
+  }
+}
+
+/**
+ * Converts the CSS top/right/bottom/left property numeric value to string in pixels.
+ *
+ * @param {number} position
+ *        The CSS top/right/bottom/left property value.
+ *
+ * @return {string}
+ *          The CSS property value that was created, like '10px'.
+ *
+ * @private
+ */
+function getCSSPositionValue(position) {
+  return position ? `${position}px` : '';
+}
+
+/**
+ * The component for displaying text track cues.
+ *
+ * @extends Component
+ */
+class TextTrackDisplay extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Function} [ready]
+   *        The function to call when `TextTrackDisplay` is ready.
+   */
+  constructor(player, options, ready) {
+    super(player, options, ready);
+    const updateDisplayTextHandler = e => this.updateDisplay(e);
+    const updateDisplayHandler = e => {
+      this.updateDisplayOverlay();
+      this.updateDisplay(e);
+    };
+    player.on('loadstart', e => this.toggleDisplay(e));
+    player.on('texttrackchange', updateDisplayTextHandler);
+    player.on('loadedmetadata', e => {
+      this.updateDisplayOverlay();
+      this.preselectTrack(e);
+    });
+
+    // This used to be called during player init, but was causing an error
+    // if a track should show by default and the display hadn't loaded yet.
+    // Should probably be moved to an external track loader when we support
+    // tracks that don't need a display.
+    player.ready(bind_(this, function () {
+      if (player.tech_ && player.tech_.featuresNativeTextTracks) {
+        this.hide();
+        return;
+      }
+      player.on('fullscreenchange', updateDisplayHandler);
+      player.on('playerresize', updateDisplayHandler);
+      const screenOrientation = window$1.screen.orientation || window$1;
+      const changeOrientationEvent = window$1.screen.orientation ? 'change' : 'orientationchange';
+      screenOrientation.addEventListener(changeOrientationEvent, updateDisplayHandler);
+      player.on('dispose', () => screenOrientation.removeEventListener(changeOrientationEvent, updateDisplayHandler));
+      const tracks = this.options_.playerOptions.tracks || [];
+      for (let i = 0; i < tracks.length; i++) {
+        this.player_.addRemoteTextTrack(tracks[i], true);
+      }
+      this.preselectTrack();
+    }));
+  }
+
+  /**
+  * Preselect a track following this precedence:
+  * - matches the previously selected {@link TextTrack}'s language and kind
+  * - matches the previously selected {@link TextTrack}'s language only
+  * - is the first default captions track
+  * - is the first default descriptions track
+  *
+  * @listens Player#loadstart
+  */
+  preselectTrack() {
+    const modes = {
+      captions: 1,
+      subtitles: 1
+    };
+    const trackList = this.player_.textTracks();
+    const userPref = this.player_.cache_.selectedLanguage;
+    let firstDesc;
+    let firstCaptions;
+    let preferredTrack;
+    for (let i = 0; i < trackList.length; i++) {
+      const track = trackList[i];
+      if (userPref && userPref.enabled && userPref.language && userPref.language === track.language && track.kind in modes) {
+        // Always choose the track that matches both language and kind
+        if (track.kind === userPref.kind) {
+          preferredTrack = track;
+          // or choose the first track that matches language
+        } else if (!preferredTrack) {
+          preferredTrack = track;
+        }
+
+        // clear everything if offTextTrackMenuItem was clicked
+      } else if (userPref && !userPref.enabled) {
+        preferredTrack = null;
+        firstDesc = null;
+        firstCaptions = null;
+      } else if (track.default) {
+        if (track.kind === 'descriptions' && !firstDesc) {
+          firstDesc = track;
+        } else if (track.kind in modes && !firstCaptions) {
+          firstCaptions = track;
+        }
+      }
+    }
+
+    // The preferredTrack matches the user preference and takes
+    // precedence over all the other tracks.
+    // So, display the preferredTrack before the first default track
+    // and the subtitles/captions track before the descriptions track
+    if (preferredTrack) {
+      preferredTrack.mode = 'showing';
+    } else if (firstCaptions) {
+      firstCaptions.mode = 'showing';
+    } else if (firstDesc) {
+      firstDesc.mode = 'showing';
+    }
+  }
+
+  /**
+   * Turn display of {@link TextTrack}'s from the current state into the other state.
+   * There are only two states:
+   * - 'shown'
+   * - 'hidden'
+   *
+   * @listens Player#loadstart
+   */
+  toggleDisplay() {
+    if (this.player_.tech_ && this.player_.tech_.featuresNativeTextTracks) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  /**
+   * Create the {@link Component}'s DOM element.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-text-track-display'
+    }, {
+      'translate': 'yes',
+      'aria-live': 'off',
+      'aria-atomic': 'true'
+    });
+  }
+
+  /**
+   * Clear all displayed {@link TextTrack}s.
+   */
+  clearDisplay() {
+    if (typeof window$1.WebVTT === 'function') {
+      window$1.WebVTT.processCues(window$1, [], this.el_);
+    }
+  }
+
+  /**
+   * Update the displayed TextTrack when a either a {@link Player#texttrackchange} or
+   * a {@link Player#fullscreenchange} is fired.
+   *
+   * @listens Player#texttrackchange
+   * @listens Player#fullscreenchange
+   */
+  updateDisplay() {
+    const tracks = this.player_.textTracks();
+    const allowMultipleShowingTracks = this.options_.allowMultipleShowingTracks;
+    this.clearDisplay();
+    if (allowMultipleShowingTracks) {
+      const showingTracks = [];
+      for (let i = 0; i < tracks.length; ++i) {
+        const track = tracks[i];
+        if (track.mode !== 'showing') {
+          continue;
+        }
+        showingTracks.push(track);
+      }
+      this.updateForTrack(showingTracks);
+      return;
+    }
+
+    //  Track display prioritization model: if multiple tracks are 'showing',
+    //  display the first 'subtitles' or 'captions' track which is 'showing',
+    //  otherwise display the first 'descriptions' track which is 'showing'
+
+    let descriptionsTrack = null;
+    let captionsSubtitlesTrack = null;
+    let i = tracks.length;
+    while (i--) {
+      const track = tracks[i];
+      if (track.mode === 'showing') {
+        if (track.kind === 'descriptions') {
+          descriptionsTrack = track;
+        } else {
+          captionsSubtitlesTrack = track;
+        }
+      }
+    }
+    if (captionsSubtitlesTrack) {
+      if (this.getAttribute('aria-live') !== 'off') {
+        this.setAttribute('aria-live', 'off');
+      }
+      this.updateForTrack(captionsSubtitlesTrack);
+    } else if (descriptionsTrack) {
+      if (this.getAttribute('aria-live') !== 'assertive') {
+        this.setAttribute('aria-live', 'assertive');
+      }
+      this.updateForTrack(descriptionsTrack);
+    }
+  }
+
+  /**
+   * Updates the displayed TextTrack to be sure it overlays the video when a either
+   * a {@link Player#texttrackchange} or a {@link Player#fullscreenchange} is fired.
+   */
+  updateDisplayOverlay() {
+    // inset-inline and inset-block are not supprted on old chrome, but these are
+    // only likely to be used on TV devices
+    if (!this.player_.videoHeight() || !window$1.CSS.supports('inset-inline: 10px')) {
+      return;
+    }
+    const playerWidth = this.player_.currentWidth();
+    const playerHeight = this.player_.currentHeight();
+    const playerAspectRatio = playerWidth / playerHeight;
+    const videoAspectRatio = this.player_.videoWidth() / this.player_.videoHeight();
+    let insetInlineMatch = 0;
+    let insetBlockMatch = 0;
+    if (Math.abs(playerAspectRatio - videoAspectRatio) > 0.1) {
+      if (playerAspectRatio > videoAspectRatio) {
+        insetInlineMatch = Math.round((playerWidth - playerHeight * videoAspectRatio) / 2);
+      } else {
+        insetBlockMatch = Math.round((playerHeight - playerWidth / videoAspectRatio) / 2);
+      }
+    }
+    tryUpdateStyle(this.el_, 'insetInline', getCSSPositionValue(insetInlineMatch));
+    tryUpdateStyle(this.el_, 'insetBlock', getCSSPositionValue(insetBlockMatch));
+  }
+
+  /**
+   * Style {@Link TextTrack} activeCues according to {@Link TextTrackSettings}.
+   *
+   * @param {TextTrack} track
+   *        Text track object containing active cues to style.
+   */
+  updateDisplayState(track) {
+    const overrides = this.player_.textTrackSettings.getValues();
+    const cues = track.activeCues;
+    let i = cues.length;
+    while (i--) {
+      const cue = cues[i];
+      if (!cue) {
+        continue;
+      }
+      const cueDiv = cue.displayState;
+      if (overrides.color) {
+        cueDiv.firstChild.style.color = overrides.color;
+      }
+      if (overrides.textOpacity) {
+        tryUpdateStyle(cueDiv.firstChild, 'color', constructColor(overrides.color || '#fff', overrides.textOpacity));
+      }
+      if (overrides.backgroundColor) {
+        cueDiv.firstChild.style.backgroundColor = overrides.backgroundColor;
+      }
+      if (overrides.backgroundOpacity) {
+        tryUpdateStyle(cueDiv.firstChild, 'backgroundColor', constructColor(overrides.backgroundColor || '#000', overrides.backgroundOpacity));
+      }
+      if (overrides.windowColor) {
+        if (overrides.windowOpacity) {
+          tryUpdateStyle(cueDiv, 'backgroundColor', constructColor(overrides.windowColor, overrides.windowOpacity));
+        } else {
+          cueDiv.style.backgroundColor = overrides.windowColor;
+        }
+      }
+      if (overrides.edgeStyle) {
+        if (overrides.edgeStyle === 'dropshadow') {
+          cueDiv.firstChild.style.textShadow = `2px 2px 3px ${darkGray}, 2px 2px 4px ${darkGray}, 2px 2px 5px ${darkGray}`;
+        } else if (overrides.edgeStyle === 'raised') {
+          cueDiv.firstChild.style.textShadow = `1px 1px ${darkGray}, 2px 2px ${darkGray}, 3px 3px ${darkGray}`;
+        } else if (overrides.edgeStyle === 'depressed') {
+          cueDiv.firstChild.style.textShadow = `1px 1px ${lightGray}, 0 1px ${lightGray}, -1px -1px ${darkGray}, 0 -1px ${darkGray}`;
+        } else if (overrides.edgeStyle === 'uniform') {
+          cueDiv.firstChild.style.textShadow = `0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}`;
+        }
+      }
+      if (overrides.fontPercent && overrides.fontPercent !== 1) {
+        const fontSize = window$1.parseFloat(cueDiv.style.fontSize);
+        cueDiv.style.fontSize = fontSize * overrides.fontPercent + 'px';
+        cueDiv.style.height = 'auto';
+        cueDiv.style.top = 'auto';
+      }
+      if (overrides.fontFamily && overrides.fontFamily !== 'default') {
+        if (overrides.fontFamily === 'small-caps') {
+          cueDiv.firstChild.style.fontVariant = 'small-caps';
+        } else {
+          cueDiv.firstChild.style.fontFamily = fontMap[overrides.fontFamily];
+        }
+      }
+    }
+  }
+
+  /**
+   * Add an {@link TextTrack} to to the {@link Tech}s {@link TextTrackList}.
+   *
+   * @param {TextTrack|TextTrack[]} tracks
+   *        Text track object or text track array to be added to the list.
+   */
+  updateForTrack(tracks) {
+    if (!Array.isArray(tracks)) {
+      tracks = [tracks];
+    }
+    if (typeof window$1.WebVTT !== 'function' || tracks.every(track => {
+      return !track.activeCues;
+    })) {
+      return;
+    }
+    const cues = [];
+
+    // push all active track cues
+    for (let i = 0; i < tracks.length; ++i) {
+      const track = tracks[i];
+      for (let j = 0; j < track.activeCues.length; ++j) {
+        cues.push(track.activeCues[j]);
+      }
+    }
+
+    // removes all cues before it processes new ones
+    window$1.WebVTT.processCues(window$1, cues, this.el_);
+
+    // add unique class to each language text track & add settings styling if necessary
+    for (let i = 0; i < tracks.length; ++i) {
+      const track = tracks[i];
+      for (let j = 0; j < track.activeCues.length; ++j) {
+        const cueEl = track.activeCues[j].displayState;
+        addClass(cueEl, 'vjs-text-track-cue', 'vjs-text-track-cue-' + (track.language ? track.language : i));
+        if (track.language) {
+          setAttribute(cueEl, 'lang', track.language);
+        }
+      }
+      if (this.player_.textTrackSettings) {
+        this.updateDisplayState(track);
+      }
+    }
+  }
+}
+Component$1.registerComponent('TextTrackDisplay', TextTrackDisplay);
+
+/**
+ * @file loading-spinner.js
+ */
+
+/**
+ * A loading spinner for use during waiting/loading events.
+ *
+ * @extends Component
+ */
+class LoadingSpinner extends Component$1 {
+  /**
+   * Create the `LoadingSpinner`s DOM element.
+   *
+   * @return {Element}
+   *         The dom element that gets created.
+   */
+  createEl() {
+    const isAudio = this.player_.isAudio();
+    const playerType = this.localize(isAudio ? 'Audio Player' : 'Video Player');
+    const controlText = createEl('span', {
+      className: 'vjs-control-text',
+      textContent: this.localize('{1} is loading.', [playerType])
+    });
+    const el = super.createEl('div', {
+      className: 'vjs-loading-spinner',
+      dir: 'ltr'
+    });
+    el.appendChild(controlText);
+    return el;
+  }
+
+  /**
+   * Update control text on languagechange
+   */
+  handleLanguagechange() {
+    this.$('.vjs-control-text').textContent = this.localize('{1} is loading.', [this.player_.isAudio() ? 'Audio Player' : 'Video Player']);
+  }
+}
+Component$1.registerComponent('LoadingSpinner', LoadingSpinner);
+
+/**
+ * @file button.js
+ */
+
+/**
+ * Base class for all buttons.
+ *
+ * @extends ClickableComponent
+ */
+class Button extends ClickableComponent {
+  /**
+   * Create the `Button`s DOM element.
+   *
+   * @param {string} [tag="button"]
+   *        The element's node type. This argument is IGNORED: no matter what
+   *        is passed, it will always create a `button` element.
+   *
+   * @param {Object} [props={}]
+   *        An object of properties that should be set on the element.
+   *
+   * @param {Object} [attributes={}]
+   *        An object of attributes that should be set on the element.
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl(tag, props = {}, attributes = {}) {
+    tag = 'button';
+    props = Object.assign({
+      className: this.buildCSSClass()
+    }, props);
+
+    // Add attributes for button element
+    attributes = Object.assign({
+      // Necessary since the default button type is "submit"
+      type: 'button'
+    }, attributes);
+    const el = createEl(tag, props, attributes);
+    if (!this.player_.options_.experimentalSvgIcons) {
+      el.appendChild(createEl('span', {
+        className: 'vjs-icon-placeholder'
+      }, {
+        'aria-hidden': true
+      }));
+    }
+    this.createControlTextEl(el);
+    return el;
+  }
+
+  /**
+   * Add a child `Component` inside of this `Button`.
+   *
+   * @param {string|Component} child
+   *        The name or instance of a child to add.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of options that will get passed to children of
+   *        the child.
+   *
+   * @return {Component}
+   *         The `Component` that gets added as a child. When using a string the
+   *         `Component` will get created by this process.
+   *
+   * @deprecated since version 5
+   */
+  addChild(child, options = {}) {
+    const className = this.constructor.name;
+    log$1.warn(`Adding an actionable (user controllable) child to a Button (${className}) is not supported; use a ClickableComponent instead.`);
+
+    // Avoid the error message generated by ClickableComponent's addChild method
+    return Component$1.prototype.addChild.call(this, child, options);
+  }
+
+  /**
+   * Enable the `Button` element so that it can be activated or clicked. Use this with
+   * {@link Button#disable}.
+   */
+  enable() {
+    super.enable();
+    this.el_.removeAttribute('disabled');
+  }
+
+  /**
+   * Disable the `Button` element so that it cannot be activated or clicked. Use this with
+   * {@link Button#enable}.
+   */
+  disable() {
+    super.disable();
+    this.el_.setAttribute('disabled', 'disabled');
+  }
+
+  /**
+   * This gets called when a `Button` has focus and `keydown` is triggered via a key
+   * press.
+   *
+   * @param {KeyboardEvent} event
+   *        The event that caused this function to get called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Ignore Space or Enter key operation, which is handled by the browser for
+    // a button - though not for its super class, ClickableComponent. Also,
+    // prevent the event from propagating through the DOM and triggering Player
+    // hotkeys. We do not preventDefault here because we _want_ the browser to
+    // handle it.
+    if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+      event.stopPropagation();
+      return;
+    }
+
+    // Pass keypress handling up for unsupported keys
+    super.handleKeyDown(event);
+  }
+}
+Component$1.registerComponent('Button', Button);
+
+/**
+ * @file big-play-button.js
+ */
+
+/**
+ * The initial play button that shows before the video has played. The hiding of the
+ * `BigPlayButton` get done via CSS and `Player` states.
+ *
+ * @extends Button
+ */
+class BigPlayButton extends Button {
+  constructor(player, options) {
+    super(player, options);
+    this.mouseused_ = false;
+    this.setIcon('play');
+    this.on('mousedown', e => this.handleMouseDown(e));
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object. Always returns 'vjs-big-play-button'.
+   */
+  buildCSSClass() {
+    return 'vjs-big-play-button';
+  }
+
+  /**
+   * This gets called when a `BigPlayButton` "clicked". See {@link ClickableComponent}
+   * for more detailed information on what a click can be.
+   *
+   * @param {KeyboardEvent|MouseEvent|TouchEvent} event
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    const playPromise = this.player_.play();
+
+    // exit early if clicked via the mouse
+    if (this.mouseused_ && 'clientX' in event && 'clientY' in event) {
+      silencePromise(playPromise);
+      if (this.player_.tech(true)) {
+        this.player_.tech(true).focus();
+      }
+      return;
+    }
+    const cb = this.player_.getChild('controlBar');
+    const playToggle = cb && cb.getChild('playToggle');
+    if (!playToggle) {
+      this.player_.tech(true).focus();
+      return;
+    }
+    const playFocus = () => playToggle.focus();
+    if (isPromise(playPromise)) {
+      playPromise.then(playFocus, () => {});
+    } else {
+      this.setTimeout(playFocus, 1);
+    }
+  }
+
+  /**
+   * Event handler that is called when a `BigPlayButton` receives a
+   * `keydown` event.
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    this.mouseused_ = false;
+    super.handleKeyDown(event);
+  }
+
+  /**
+   * Handle `mousedown` events on the `BigPlayButton`.
+   *
+   * @param {MouseEvent} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   */
+  handleMouseDown(event) {
+    this.mouseused_ = true;
+  }
+}
+
+/**
+ * The text that should display over the `BigPlayButton`s controls. Added to for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+BigPlayButton.prototype.controlText_ = 'Play Video';
+Component$1.registerComponent('BigPlayButton', BigPlayButton);
+
+/**
+ * @file close-button.js
+ */
+
+/**
+ * The `CloseButton` is a `{@link Button}` that fires a `close` event when
+ * it gets clicked.
+ *
+ * @extends Button
+ */
+class CloseButton extends Button {
+  /**
+  * Creates an instance of the this class.
+  *
+  * @param  { import('./player').default } player
+  *         The `Player` that this class should be attached to.
+  *
+  * @param  {Object} [options]
+  *         The key/value store of player options.
+  */
+  constructor(player, options) {
+    super(player, options);
+    this.setIcon('cancel');
+    this.controlText(options && options.controlText || this.localize('Close'));
+  }
+
+  /**
+  * Builds the default DOM `className`.
+  *
+  * @return {string}
+  *         The DOM `className` for this object.
+  */
+  buildCSSClass() {
+    return `vjs-close-button ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * This gets called when a `CloseButton` gets clicked. See
+   * {@link ClickableComponent#handleClick} for more information on when
+   * this will be triggered
+   *
+   * @param {Event} event
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   * @fires CloseButton#close
+   */
+  handleClick(event) {
+    /**
+     * Triggered when the a `CloseButton` is clicked.
+     *
+     * @event CloseButton#close
+     * @type {Event}
+     *
+     * @property {boolean} [bubbles=false]
+     *           set to false so that the close event does not
+     *           bubble up to parents if there is no listener
+     */
+    this.trigger({
+      type: 'close',
+      bubbles: false
+    });
+  }
+  /**
+   * Event handler that is called when a `CloseButton` receives a
+   * `keydown` event.
+   *
+   * By default, if the key is Esc, it will trigger a `click` event.
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Esc button will trigger `click` event
+    if (keycode.isEventKey(event, 'Esc')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.trigger('click');
+    } else {
+      // Pass keypress handling up for unsupported keys
+      super.handleKeyDown(event);
+    }
+  }
+}
+Component$1.registerComponent('CloseButton', CloseButton);
+
+/**
+ * @file play-toggle.js
+ */
+
+/**
+ * Button to toggle between play and pause.
+ *
+ * @extends Button
+ */
+class PlayToggle extends Button {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of player options.
+   */
+  constructor(player, options = {}) {
+    super(player, options);
+
+    // show or hide replay icon
+    options.replay = options.replay === undefined || options.replay;
+    this.setIcon('play');
+    this.on(player, 'play', e => this.handlePlay(e));
+    this.on(player, 'pause', e => this.handlePause(e));
+    if (options.replay) {
+      this.on(player, 'ended', e => this.handleEnded(e));
+    }
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-play-control ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * This gets called when an `PlayToggle` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    if (this.player_.paused()) {
+      silencePromise(this.player_.play());
+    } else {
+      this.player_.pause();
+    }
+  }
+
+  /**
+   * This gets called once after the video has ended and the user seeks so that
+   * we can change the replay button back to a play button.
+   *
+   * @param {Event} [event]
+   *        The event that caused this function to run.
+   *
+   * @listens Player#seeked
+   */
+  handleSeeked(event) {
+    this.removeClass('vjs-ended');
+    if (this.player_.paused()) {
+      this.handlePause(event);
+    } else {
+      this.handlePlay(event);
+    }
+  }
+
+  /**
+   * Add the vjs-playing class to the element so it can change appearance.
+   *
+   * @param {Event} [event]
+   *        The event that caused this function to run.
+   *
+   * @listens Player#play
+   */
+  handlePlay(event) {
+    this.removeClass('vjs-ended', 'vjs-paused');
+    this.addClass('vjs-playing');
+    // change the button text to "Pause"
+    this.setIcon('pause');
+    this.controlText('Pause');
+  }
+
+  /**
+   * Add the vjs-paused class to the element so it can change appearance.
+   *
+   * @param {Event} [event]
+   *        The event that caused this function to run.
+   *
+   * @listens Player#pause
+   */
+  handlePause(event) {
+    this.removeClass('vjs-playing');
+    this.addClass('vjs-paused');
+    // change the button text to "Play"
+    this.setIcon('play');
+    this.controlText('Play');
+  }
+
+  /**
+   * Add the vjs-ended class to the element so it can change appearance
+   *
+   * @param {Event} [event]
+   *        The event that caused this function to run.
+   *
+   * @listens Player#ended
+   */
+  handleEnded(event) {
+    this.removeClass('vjs-playing');
+    this.addClass('vjs-ended');
+    // change the button text to "Replay"
+    this.setIcon('replay');
+    this.controlText('Replay');
+
+    // on the next seek remove the replay button
+    this.one(this.player_, 'seeked', e => this.handleSeeked(e));
+  }
+}
+
+/**
+ * The text that should display over the `PlayToggle`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+PlayToggle.prototype.controlText_ = 'Play';
+Component$1.registerComponent('PlayToggle', PlayToggle);
+
+/**
+ * @file time-display.js
+ */
+
+/**
+ * Displays time information about the video
+ *
+ * @extends Component
+ */
+class TimeDisplay extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.on(player, ['timeupdate', 'ended', 'seeking'], e => this.update(e));
+    this.updateTextNode_();
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const className = this.buildCSSClass();
+    const el = super.createEl('div', {
+      className: `${className} vjs-time-control vjs-control`
+    });
+    const span = createEl('span', {
+      className: 'vjs-control-text',
+      textContent: `${this.localize(this.labelText_)}\u00a0`
+    }, {
+      role: 'presentation'
+    });
+    el.appendChild(span);
+    this.contentEl_ = createEl('span', {
+      className: `${className}-display`
+    }, {
+      // span elements have no implicit role, but some screen readers (notably VoiceOver)
+      // treat them as a break between items in the DOM when using arrow keys
+      // (or left-to-right swipes on iOS) to read contents of a page. Using
+      // role='presentation' causes VoiceOver to NOT treat this span as a break.
+      role: 'presentation'
+    });
+    el.appendChild(this.contentEl_);
+    return el;
+  }
+  dispose() {
+    this.contentEl_ = null;
+    this.textNode_ = null;
+    super.dispose();
+  }
+
+  /**
+   * Updates the displayed time according to the `updateContent` function which is defined in the child class.
+   *
+   * @param {Event} [event]
+   *          The `timeupdate`, `ended` or `seeking` (if enableSmoothSeeking is true) event that caused this function to be called.
+   */
+  update(event) {
+    if (!this.player_.options_.enableSmoothSeeking && event.type === 'seeking') {
+      return;
+    }
+    this.updateContent(event);
+  }
+
+  /**
+   * Updates the time display text node with a new time
+   *
+   * @param {number} [time=0] the time to update to
+   *
+   * @private
+   */
+  updateTextNode_(time = 0) {
+    time = formatTime(time);
+    if (this.formattedTime_ === time) {
+      return;
+    }
+    this.formattedTime_ = time;
+    this.requestNamedAnimationFrame('TimeDisplay#updateTextNode_', () => {
+      if (!this.contentEl_) {
+        return;
+      }
+      let oldNode = this.textNode_;
+      if (oldNode && this.contentEl_.firstChild !== oldNode) {
+        oldNode = null;
+        log$1.warn('TimeDisplay#updateTextnode_: Prevented replacement of text node element since it was no longer a child of this node. Appending a new node instead.');
+      }
+      this.textNode_ = document.createTextNode(this.formattedTime_);
+      if (!this.textNode_) {
+        return;
+      }
+      if (oldNode) {
+        this.contentEl_.replaceChild(this.textNode_, oldNode);
+      } else {
+        this.contentEl_.appendChild(this.textNode_);
+      }
+    });
+  }
+
+  /**
+   * To be filled out in the child class, should update the displayed time
+   * in accordance with the fact that the current time has changed.
+   *
+   * @param {Event} [event]
+   *        The `timeupdate`  event that caused this to run.
+   *
+   * @listens Player#timeupdate
+   */
+  updateContent(event) {}
+}
+
+/**
+ * The text that is added to the `TimeDisplay` for screen reader users.
+ *
+ * @type {string}
+ * @private
+ */
+TimeDisplay.prototype.labelText_ = 'Time';
+
+/**
+ * The text that should display over the `TimeDisplay`s controls. Added to for localization.
+ *
+ * @type {string}
+ * @protected
+ *
+ * @deprecated in v7; controlText_ is not used in non-active display Components
+ */
+TimeDisplay.prototype.controlText_ = 'Time';
+Component$1.registerComponent('TimeDisplay', TimeDisplay);
+
+/**
+ * @file current-time-display.js
+ */
+
+/**
+ * Displays the current time
+ *
+ * @extends Component
+ */
+class CurrentTimeDisplay extends TimeDisplay {
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return 'vjs-current-time';
+  }
+
+  /**
+   * Update current time display
+   *
+   * @param {Event} [event]
+   *        The `timeupdate` event that caused this function to run.
+   *
+   * @listens Player#timeupdate
+   */
+  updateContent(event) {
+    // Allows for smooth scrubbing, when player can't keep up.
+    let time;
+    if (this.player_.ended()) {
+      time = this.player_.duration();
+    } else {
+      time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+    }
+    this.updateTextNode_(time);
+  }
+}
+
+/**
+ * The text that is added to the `CurrentTimeDisplay` for screen reader users.
+ *
+ * @type {string}
+ * @private
+ */
+CurrentTimeDisplay.prototype.labelText_ = 'Current Time';
+
+/**
+ * The text that should display over the `CurrentTimeDisplay`s controls. Added to for localization.
+ *
+ * @type {string}
+ * @protected
+ *
+ * @deprecated in v7; controlText_ is not used in non-active display Components
+ */
+CurrentTimeDisplay.prototype.controlText_ = 'Current Time';
+Component$1.registerComponent('CurrentTimeDisplay', CurrentTimeDisplay);
+
+/**
+ * @file duration-display.js
+ */
+
+/**
+ * Displays the duration
+ *
+ * @extends Component
+ */
+class DurationDisplay extends TimeDisplay {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    const updateContent = e => this.updateContent(e);
+
+    // we do not want to/need to throttle duration changes,
+    // as they should always display the changed duration as
+    // it has changed
+    this.on(player, 'durationchange', updateContent);
+
+    // Listen to loadstart because the player duration is reset when a new media element is loaded,
+    // but the durationchange on the user agent will not fire.
+    // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
+    this.on(player, 'loadstart', updateContent);
+
+    // Also listen for timeupdate (in the parent) and loadedmetadata because removing those
+    // listeners could have broken dependent applications/libraries. These
+    // can likely be removed for 7.0.
+    this.on(player, 'loadedmetadata', updateContent);
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return 'vjs-duration';
+  }
+
+  /**
+   * Update duration time display.
+   *
+   * @param {Event} [event]
+   *        The `durationchange`, `timeupdate`, or `loadedmetadata` event that caused
+   *        this function to be called.
+   *
+   * @listens Player#durationchange
+   * @listens Player#timeupdate
+   * @listens Player#loadedmetadata
+   */
+  updateContent(event) {
+    const duration = this.player_.duration();
+    this.updateTextNode_(duration);
+  }
+}
+
+/**
+ * The text that is added to the `DurationDisplay` for screen reader users.
+ *
+ * @type {string}
+ * @private
+ */
+DurationDisplay.prototype.labelText_ = 'Duration';
+
+/**
+ * The text that should display over the `DurationDisplay`s controls. Added to for localization.
+ *
+ * @type {string}
+ * @protected
+ *
+ * @deprecated in v7; controlText_ is not used in non-active display Components
+ */
+DurationDisplay.prototype.controlText_ = 'Duration';
+Component$1.registerComponent('DurationDisplay', DurationDisplay);
+
+/**
+ * @file time-divider.js
+ */
+
+/**
+ * The separator between the current time and duration.
+ * Can be hidden if it's not needed in the design.
+ *
+ * @extends Component
+ */
+class TimeDivider extends Component$1 {
+  /**
+   * Create the component's DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const el = super.createEl('div', {
+      className: 'vjs-time-control vjs-time-divider'
+    }, {
+      // this element and its contents can be hidden from assistive techs since
+      // it is made extraneous by the announcement of the control text
+      // for the current time and duration displays
+      'aria-hidden': true
+    });
+    const div = super.createEl('div');
+    const span = super.createEl('span', {
+      textContent: '/'
+    });
+    div.appendChild(span);
+    el.appendChild(div);
+    return el;
+  }
+}
+Component$1.registerComponent('TimeDivider', TimeDivider);
+
+/**
+ * @file remaining-time-display.js
+ */
+
+/**
+ * Displays the time left in the video
+ *
+ * @extends Component
+ */
+class RemainingTimeDisplay extends TimeDisplay {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.on(player, 'durationchange', e => this.updateContent(e));
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return 'vjs-remaining-time';
+  }
+
+  /**
+   * Create the `Component`'s DOM element with the "minus" character prepend to the time
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const el = super.createEl();
+    if (this.options_.displayNegative !== false) {
+      el.insertBefore(createEl('span', {}, {
+        'aria-hidden': true
+      }, '-'), this.contentEl_);
+    }
+    return el;
+  }
+
+  /**
+   * Update remaining time display.
+   *
+   * @param {Event} [event]
+   *        The `timeupdate` or `durationchange` event that caused this to run.
+   *
+   * @listens Player#timeupdate
+   * @listens Player#durationchange
+   */
+  updateContent(event) {
+    if (typeof this.player_.duration() !== 'number') {
+      return;
+    }
+    let time;
+
+    // @deprecated We should only use remainingTimeDisplay
+    // as of video.js 7
+    if (this.player_.ended()) {
+      time = 0;
+    } else if (this.player_.remainingTimeDisplay) {
+      time = this.player_.remainingTimeDisplay();
+    } else {
+      time = this.player_.remainingTime();
+    }
+    this.updateTextNode_(time);
+  }
+}
+
+/**
+ * The text that is added to the `RemainingTimeDisplay` for screen reader users.
+ *
+ * @type {string}
+ * @private
+ */
+RemainingTimeDisplay.prototype.labelText_ = 'Remaining Time';
+
+/**
+ * The text that should display over the `RemainingTimeDisplay`s controls. Added to for localization.
+ *
+ * @type {string}
+ * @protected
+ *
+ * @deprecated in v7; controlText_ is not used in non-active display Components
+ */
+RemainingTimeDisplay.prototype.controlText_ = 'Remaining Time';
+Component$1.registerComponent('RemainingTimeDisplay', RemainingTimeDisplay);
+
+/**
+ * @file live-display.js
+ */
+
+// TODO - Future make it click to snap to live
+
+/**
+ * Displays the live indicator when duration is Infinity.
+ *
+ * @extends Component
+ */
+class LiveDisplay extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.updateShowing();
+    this.on(this.player(), 'durationchange', e => this.updateShowing(e));
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const el = super.createEl('div', {
+      className: 'vjs-live-control vjs-control'
+    });
+    this.contentEl_ = createEl('div', {
+      className: 'vjs-live-display'
+    }, {
+      'aria-live': 'off'
+    });
+    this.contentEl_.appendChild(createEl('span', {
+      className: 'vjs-control-text',
+      textContent: `${this.localize('Stream Type')}\u00a0`
+    }));
+    this.contentEl_.appendChild(document.createTextNode(this.localize('LIVE')));
+    el.appendChild(this.contentEl_);
+    return el;
+  }
+  dispose() {
+    this.contentEl_ = null;
+    super.dispose();
+  }
+
+  /**
+   * Check the duration to see if the LiveDisplay should be showing or not. Then show/hide
+   * it accordingly
+   *
+   * @param {Event} [event]
+   *        The {@link Player#durationchange} event that caused this function to run.
+   *
+   * @listens Player#durationchange
+   */
+  updateShowing(event) {
+    if (this.player().duration() === Infinity) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+}
+Component$1.registerComponent('LiveDisplay', LiveDisplay);
+
+/**
+ * @file seek-to-live.js
+ */
+
+/**
+ * Displays the live indicator when duration is Infinity.
+ *
+ * @extends Component
+ */
+class SeekToLive extends Button {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.updateLiveEdgeStatus();
+    if (this.player_.liveTracker) {
+      this.updateLiveEdgeStatusHandler_ = e => this.updateLiveEdgeStatus(e);
+      this.on(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
+    }
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const el = super.createEl('button', {
+      className: 'vjs-seek-to-live-control vjs-control'
+    });
+    this.setIcon('circle', el);
+    this.textEl_ = createEl('span', {
+      className: 'vjs-seek-to-live-text',
+      textContent: this.localize('LIVE')
+    }, {
+      'aria-hidden': 'true'
+    });
+    el.appendChild(this.textEl_);
+    return el;
+  }
+
+  /**
+   * Update the state of this button if we are at the live edge
+   * or not
+   */
+  updateLiveEdgeStatus() {
+    // default to live edge
+    if (!this.player_.liveTracker || this.player_.liveTracker.atLiveEdge()) {
+      this.setAttribute('aria-disabled', true);
+      this.addClass('vjs-at-live-edge');
+      this.controlText('Seek to live, currently playing live');
+    } else {
+      this.setAttribute('aria-disabled', false);
+      this.removeClass('vjs-at-live-edge');
+      this.controlText('Seek to live, currently behind live');
+    }
+  }
+
+  /**
+   * On click bring us as near to the live point as possible.
+   * This requires that we wait for the next `live-seekable-change`
+   * event which will happen every segment length seconds.
+   */
+  handleClick() {
+    this.player_.liveTracker.seekToLiveEdge();
+  }
+
+  /**
+   * Dispose of the element and stop tracking
+   */
+  dispose() {
+    if (this.player_.liveTracker) {
+      this.off(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
+    }
+    this.textEl_ = null;
+    super.dispose();
+  }
+}
+/**
+ * The text that should display over the `SeekToLive`s control. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+SeekToLive.prototype.controlText_ = 'Seek to live, currently playing live';
+Component$1.registerComponent('SeekToLive', SeekToLive);
+
+/**
+ * @file num.js
+ * @module num
+ */
+
+/**
+ * Keep a number between a min and a max value
+ *
+ * @param {number} number
+ *        The number to clamp
+ *
+ * @param {number} min
+ *        The minimum value
+ * @param {number} max
+ *        The maximum value
+ *
+ * @return {number}
+ *         the clamped number
+ */
+function clamp(number, min, max) {
+  number = Number(number);
+  return Math.min(max, Math.max(min, isNaN(number) ? min : number));
+}
+
+var Num = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  clamp: clamp
+});
+
+/**
+ * @file slider.js
+ */
+
+/**
+ * The base functionality for a slider. Can be vertical or horizontal.
+ * For instance the volume bar or the seek bar on a video is a slider.
+ *
+ * @extends Component
+ */
+class Slider extends Component$1 {
+  /**
+  * Create an instance of this class
+  *
+  * @param { import('../player').default } player
+  *        The `Player` that this class should be attached to.
+  *
+  * @param {Object} [options]
+  *        The key/value store of player options.
+  */
+  constructor(player, options) {
+    super(player, options);
+    this.handleMouseDown_ = e => this.handleMouseDown(e);
+    this.handleMouseUp_ = e => this.handleMouseUp(e);
+    this.handleKeyDown_ = e => this.handleKeyDown(e);
+    this.handleClick_ = e => this.handleClick(e);
+    this.handleMouseMove_ = e => this.handleMouseMove(e);
+    this.update_ = e => this.update(e);
+
+    // Set property names to bar to match with the child Slider class is looking for
+    this.bar = this.getChild(this.options_.barName);
+
+    // Set a horizontal or vertical class on the slider depending on the slider type
+    this.vertical(!!this.options_.vertical);
+    this.enable();
+  }
+
+  /**
+   * Are controls are currently enabled for this slider or not.
+   *
+   * @return {boolean}
+   *         true if controls are enabled, false otherwise
+   */
+  enabled() {
+    return this.enabled_;
+  }
+
+  /**
+   * Enable controls for this slider if they are disabled
+   */
+  enable() {
+    if (this.enabled()) {
+      return;
+    }
+    this.on('mousedown', this.handleMouseDown_);
+    this.on('touchstart', this.handleMouseDown_);
+    this.on('keydown', this.handleKeyDown_);
+    this.on('click', this.handleClick_);
+
+    // TODO: deprecated, controlsvisible does not seem to be fired
+    this.on(this.player_, 'controlsvisible', this.update);
+    if (this.playerEvent) {
+      this.on(this.player_, this.playerEvent, this.update);
+    }
+    this.removeClass('disabled');
+    this.setAttribute('tabindex', 0);
+    this.enabled_ = true;
+  }
+
+  /**
+   * Disable controls for this slider if they are enabled
+   */
+  disable() {
+    if (!this.enabled()) {
+      return;
+    }
+    const doc = this.bar.el_.ownerDocument;
+    this.off('mousedown', this.handleMouseDown_);
+    this.off('touchstart', this.handleMouseDown_);
+    this.off('keydown', this.handleKeyDown_);
+    this.off('click', this.handleClick_);
+    this.off(this.player_, 'controlsvisible', this.update_);
+    this.off(doc, 'mousemove', this.handleMouseMove_);
+    this.off(doc, 'mouseup', this.handleMouseUp_);
+    this.off(doc, 'touchmove', this.handleMouseMove_);
+    this.off(doc, 'touchend', this.handleMouseUp_);
+    this.removeAttribute('tabindex');
+    this.addClass('disabled');
+    if (this.playerEvent) {
+      this.off(this.player_, this.playerEvent, this.update);
+    }
+    this.enabled_ = false;
+  }
+
+  /**
+   * Create the `Slider`s DOM element.
+   *
+   * @param {string} type
+   *        Type of element to create.
+   *
+   * @param {Object} [props={}]
+   *        List of properties in Object form.
+   *
+   * @param {Object} [attributes={}]
+   *        list of attributes in Object form.
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl(type, props = {}, attributes = {}) {
+    // Add the slider element class to all sub classes
+    props.className = props.className + ' vjs-slider';
+    props = Object.assign({
+      tabIndex: 0
+    }, props);
+    attributes = Object.assign({
+      'role': 'slider',
+      'aria-valuenow': 0,
+      'aria-valuemin': 0,
+      'aria-valuemax': 100
+    }, attributes);
+    return super.createEl(type, props, attributes);
+  }
+
+  /**
+   * Handle `mousedown` or `touchstart` events on the `Slider`.
+   *
+   * @param {MouseEvent} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   * @listens touchstart
+   * @fires Slider#slideractive
+   */
+  handleMouseDown(event) {
+    const doc = this.bar.el_.ownerDocument;
+    if (event.type === 'mousedown') {
+      event.preventDefault();
+    }
+    // Do not call preventDefault() on touchstart in Chrome
+    // to avoid console warnings. Use a 'touch-action: none' style
+    // instead to prevent unintended scrolling.
+    // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+    if (event.type === 'touchstart' && !IS_CHROME) {
+      event.preventDefault();
+    }
+    blockTextSelection();
+    this.addClass('vjs-sliding');
+    /**
+     * Triggered when the slider is in an active state
+     *
+     * @event Slider#slideractive
+     * @type {MouseEvent}
+     */
+    this.trigger('slideractive');
+    this.on(doc, 'mousemove', this.handleMouseMove_);
+    this.on(doc, 'mouseup', this.handleMouseUp_);
+    this.on(doc, 'touchmove', this.handleMouseMove_);
+    this.on(doc, 'touchend', this.handleMouseUp_);
+    this.handleMouseMove(event, true);
+  }
+
+  /**
+   * Handle the `mousemove`, `touchmove`, and `mousedown` events on this `Slider`.
+   * The `mousemove` and `touchmove` events will only only trigger this function during
+   * `mousedown` and `touchstart`. This is due to {@link Slider#handleMouseDown} and
+   * {@link Slider#handleMouseUp}.
+   *
+   * @param {MouseEvent} event
+   *        `mousedown`, `mousemove`, `touchstart`, or `touchmove` event that triggered
+   *        this function
+   * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false.
+   *
+   * @listens mousemove
+   * @listens touchmove
+   */
+  handleMouseMove(event) {}
+
+  /**
+   * Handle `mouseup` or `touchend` events on the `Slider`.
+   *
+   * @param {MouseEvent} event
+   *        `mouseup` or `touchend` event that triggered this function.
+   *
+   * @listens touchend
+   * @listens mouseup
+   * @fires Slider#sliderinactive
+   */
+  handleMouseUp(event) {
+    const doc = this.bar.el_.ownerDocument;
+    unblockTextSelection();
+    this.removeClass('vjs-sliding');
+    /**
+     * Triggered when the slider is no longer in an active state.
+     *
+     * @event Slider#sliderinactive
+     * @type {Event}
+     */
+    this.trigger('sliderinactive');
+    this.off(doc, 'mousemove', this.handleMouseMove_);
+    this.off(doc, 'mouseup', this.handleMouseUp_);
+    this.off(doc, 'touchmove', this.handleMouseMove_);
+    this.off(doc, 'touchend', this.handleMouseUp_);
+    this.update();
+  }
+
+  /**
+   * Update the progress bar of the `Slider`.
+   *
+   * @return {number}
+   *          The percentage of progress the progress bar represents as a
+   *          number from 0 to 1.
+   */
+  update() {
+    // In VolumeBar init we have a setTimeout for update that pops and update
+    // to the end of the execution stack. The player is destroyed before then
+    // update will cause an error
+    // If there's no bar...
+    if (!this.el_ || !this.bar) {
+      return;
+    }
+
+    // clamp progress between 0 and 1
+    // and only round to four decimal places, as we round to two below
+    const progress = this.getProgress();
+    if (progress === this.progress_) {
+      return progress;
+    }
+    this.progress_ = progress;
+    this.requestNamedAnimationFrame('Slider#update', () => {
+      // Set the new bar width or height
+      const sizeKey = this.vertical() ? 'height' : 'width';
+
+      // Convert to a percentage for css value
+      this.bar.el().style[sizeKey] = (progress * 100).toFixed(2) + '%';
+    });
+    return progress;
+  }
+
+  /**
+   * Get the percentage of the bar that should be filled
+   * but clamped and rounded.
+   *
+   * @return {number}
+   *         percentage filled that the slider is
+   */
+  getProgress() {
+    return Number(clamp(this.getPercent(), 0, 1).toFixed(4));
+  }
+
+  /**
+   * Calculate distance for slider
+   *
+   * @param {Event} event
+   *        The event that caused this function to run.
+   *
+   * @return {number}
+   *         The current position of the Slider.
+   *         - position.x for vertical `Slider`s
+   *         - position.y for horizontal `Slider`s
+   */
+  calculateDistance(event) {
+    const position = getPointerPosition(this.el_, event);
+    if (this.vertical()) {
+      return position.y;
+    }
+    return position.x;
+  }
+
+  /**
+   * Handle a `keydown` event on the `Slider`. Watches for left, right, up, and down
+   * arrow keys. This function will only be called when the slider has focus. See
+   * {@link Slider#handleFocus} and {@link Slider#handleBlur}.
+   *
+   * @param {KeyboardEvent} event
+   *        the `keydown` event that caused this function to run.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Left and Down Arrows
+    if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.stepBack();
+
+      // Up and Right Arrows
+    } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.stepForward();
+    } else {
+      // Pass keydown handling up for unsupported keys
+      super.handleKeyDown(event);
+    }
+  }
+
+  /**
+   * Listener for click events on slider, used to prevent clicks
+   *   from bubbling up to parent elements like button menus.
+   *
+   * @param {Object} event
+   *        Event that caused this object to run
+   */
+  handleClick(event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  /**
+   * Get/set if slider is horizontal for vertical
+   *
+   * @param {boolean} [bool]
+   *        - true if slider is vertical,
+   *        - false is horizontal
+   *
+   * @return {boolean}
+   *         - true if slider is vertical, and getting
+   *         - false if the slider is horizontal, and getting
+   */
+  vertical(bool) {
+    if (bool === undefined) {
+      return this.vertical_ || false;
+    }
+    this.vertical_ = !!bool;
+    if (this.vertical_) {
+      this.addClass('vjs-slider-vertical');
+    } else {
+      this.addClass('vjs-slider-horizontal');
+    }
+  }
+}
+Component$1.registerComponent('Slider', Slider);
+
+/**
+ * @file load-progress-bar.js
+ */
+
+// get the percent width of a time compared to the total end
+const percentify = (time, end) => clamp(time / end * 100, 0, 100).toFixed(2) + '%';
+
+/**
+ * Shows loading progress
+ *
+ * @extends Component
+ */
+class LoadProgressBar extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.partEls_ = [];
+    this.on(player, 'progress', e => this.update(e));
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const el = super.createEl('div', {
+      className: 'vjs-load-progress'
+    });
+    const wrapper = createEl('span', {
+      className: 'vjs-control-text'
+    });
+    const loadedText = createEl('span', {
+      textContent: this.localize('Loaded')
+    });
+    const separator = document.createTextNode(': ');
+    this.percentageEl_ = createEl('span', {
+      className: 'vjs-control-text-loaded-percentage',
+      textContent: '0%'
+    });
+    el.appendChild(wrapper);
+    wrapper.appendChild(loadedText);
+    wrapper.appendChild(separator);
+    wrapper.appendChild(this.percentageEl_);
+    return el;
+  }
+  dispose() {
+    this.partEls_ = null;
+    this.percentageEl_ = null;
+    super.dispose();
+  }
+
+  /**
+   * Update progress bar
+   *
+   * @param {Event} [event]
+   *        The `progress` event that caused this function to run.
+   *
+   * @listens Player#progress
+   */
+  update(event) {
+    this.requestNamedAnimationFrame('LoadProgressBar#update', () => {
+      const liveTracker = this.player_.liveTracker;
+      const buffered = this.player_.buffered();
+      const duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
+      const bufferedEnd = this.player_.bufferedEnd();
+      const children = this.partEls_;
+      const percent = percentify(bufferedEnd, duration);
+      if (this.percent_ !== percent) {
+        // update the width of the progress bar
+        this.el_.style.width = percent;
+        // update the control-text
+        textContent(this.percentageEl_, percent);
+        this.percent_ = percent;
+      }
+
+      // add child elements to represent the individual buffered time ranges
+      for (let i = 0; i < buffered.length; i++) {
+        const start = buffered.start(i);
+        const end = buffered.end(i);
+        let part = children[i];
+        if (!part) {
+          part = this.el_.appendChild(createEl());
+          children[i] = part;
+        }
+
+        //  only update if changed
+        if (part.dataset.start === start && part.dataset.end === end) {
+          continue;
+        }
+        part.dataset.start = start;
+        part.dataset.end = end;
+
+        // set the percent based on the width of the progress bar (bufferedEnd)
+        part.style.left = percentify(start, bufferedEnd);
+        part.style.width = percentify(end - start, bufferedEnd);
+      }
+
+      // remove unused buffered range elements
+      for (let i = children.length; i > buffered.length; i--) {
+        this.el_.removeChild(children[i - 1]);
+      }
+      children.length = buffered.length;
+    });
+  }
+}
+Component$1.registerComponent('LoadProgressBar', LoadProgressBar);
+
+/**
+ * @file time-tooltip.js
+ */
+
+/**
+ * Time tooltips display a time above the progress bar.
+ *
+ * @extends Component
+ */
+class TimeTooltip extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The {@link Player} that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+  }
+
+  /**
+   * Create the time tooltip DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-time-tooltip'
+    }, {
+      'aria-hidden': 'true'
+    });
+  }
+
+  /**
+   * Updates the position of the time tooltip relative to the `SeekBar`.
+   *
+   * @param {Object} seekBarRect
+   *        The `ClientRect` for the {@link SeekBar} element.
+   *
+   * @param {number} seekBarPoint
+   *        A number from 0 to 1, representing a horizontal reference point
+   *        from the left edge of the {@link SeekBar}
+   */
+  update(seekBarRect, seekBarPoint, content) {
+    const tooltipRect = findPosition(this.el_);
+    const playerRect = getBoundingClientRect(this.player_.el());
+    const seekBarPointPx = seekBarRect.width * seekBarPoint;
+
+    // do nothing if either rect isn't available
+    // for example, if the player isn't in the DOM for testing
+    if (!playerRect || !tooltipRect) {
+      return;
+    }
+
+    // This is the space left of the `seekBarPoint` available within the bounds
+    // of the player. We calculate any gap between the left edge of the player
+    // and the left edge of the `SeekBar` and add the number of pixels in the
+    // `SeekBar` before hitting the `seekBarPoint`
+    let spaceLeftOfPoint = seekBarRect.left - playerRect.left + seekBarPointPx;
+
+    // This is the space right of the `seekBarPoint` available within the bounds
+    // of the player. We calculate the number of pixels from the `seekBarPoint`
+    // to the right edge of the `SeekBar` and add to that any gap between the
+    // right edge of the `SeekBar` and the player.
+    let spaceRightOfPoint = seekBarRect.width - seekBarPointPx + (playerRect.right - seekBarRect.right);
+
+    // spaceRightOfPoint is always NaN for mouse time display
+    // because the seekbarRect does not have a right property. This causes
+    // the mouse tool tip to be truncated when it's close to the right edge of the player.
+    // In such cases, we ignore the `playerRect.right - seekBarRect.right` value when calculating.
+    // For the sake of consistency, we ignore seekBarRect.left - playerRect.left for the left edge.
+    if (!spaceRightOfPoint) {
+      spaceRightOfPoint = seekBarRect.width - seekBarPointPx;
+      spaceLeftOfPoint = seekBarPointPx;
+    }
+    // This is the number of pixels by which the tooltip will need to be pulled
+    // further to the right to center it over the `seekBarPoint`.
+    let pullTooltipBy = tooltipRect.width / 2;
+
+    // Adjust the `pullTooltipBy` distance to the left or right depending on
+    // the results of the space calculations above.
+    if (spaceLeftOfPoint < pullTooltipBy) {
+      pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
+    } else if (spaceRightOfPoint < pullTooltipBy) {
+      pullTooltipBy = spaceRightOfPoint;
+    }
+
+    // Due to the imprecision of decimal/ratio based calculations and varying
+    // rounding behaviors, there are cases where the spacing adjustment is off
+    // by a pixel or two. This adds insurance to these calculations.
+    if (pullTooltipBy < 0) {
+      pullTooltipBy = 0;
+    } else if (pullTooltipBy > tooltipRect.width) {
+      pullTooltipBy = tooltipRect.width;
+    }
+
+    // prevent small width fluctuations within 0.4px from
+    // changing the value below.
+    // This really helps for live to prevent the play
+    // progress time tooltip from jittering
+    pullTooltipBy = Math.round(pullTooltipBy);
+    this.el_.style.right = `-${pullTooltipBy}px`;
+    this.write(content);
+  }
+
+  /**
+   * Write the time to the tooltip DOM element.
+   *
+   * @param {string} content
+   *        The formatted time for the tooltip.
+   */
+  write(content) {
+    textContent(this.el_, content);
+  }
+
+  /**
+   * Updates the position of the time tooltip relative to the `SeekBar`.
+   *
+   * @param {Object} seekBarRect
+   *        The `ClientRect` for the {@link SeekBar} element.
+   *
+   * @param {number} seekBarPoint
+   *        A number from 0 to 1, representing a horizontal reference point
+   *        from the left edge of the {@link SeekBar}
+   *
+   * @param {number} time
+   *        The time to update the tooltip to, not used during live playback
+   *
+   * @param {Function} cb
+   *        A function that will be called during the request animation frame
+   *        for tooltips that need to do additional animations from the default
+   */
+  updateTime(seekBarRect, seekBarPoint, time, cb) {
+    this.requestNamedAnimationFrame('TimeTooltip#updateTime', () => {
+      let content;
+      const duration = this.player_.duration();
+      if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+        const liveWindow = this.player_.liveTracker.liveWindow();
+        const secondsBehind = liveWindow - seekBarPoint * liveWindow;
+        content = (secondsBehind < 1 ? '' : '-') + formatTime(secondsBehind, liveWindow);
+      } else {
+        content = formatTime(time, duration);
+      }
+      this.update(seekBarRect, seekBarPoint, content);
+      if (cb) {
+        cb();
+      }
+    });
+  }
+}
+Component$1.registerComponent('TimeTooltip', TimeTooltip);
+
+/**
+ * @file play-progress-bar.js
+ */
+
+/**
+ * Used by {@link SeekBar} to display media playback progress as part of the
+ * {@link ProgressControl}.
+ *
+ * @extends Component
+ */
+class PlayProgressBar extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The {@link Player} that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.setIcon('circle');
+    this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+  }
+
+  /**
+   * Create the the DOM element for this class.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-play-progress vjs-slider-bar'
+    }, {
+      'aria-hidden': 'true'
+    });
+  }
+
+  /**
+   * Enqueues updates to its own DOM as well as the DOM of its
+   * {@link TimeTooltip} child.
+   *
+   * @param {Object} seekBarRect
+   *        The `ClientRect` for the {@link SeekBar} element.
+   *
+   * @param {number} seekBarPoint
+   *        A number from 0 to 1, representing a horizontal reference point
+   *        from the left edge of the {@link SeekBar}
+   */
+  update(seekBarRect, seekBarPoint) {
+    const timeTooltip = this.getChild('timeTooltip');
+    if (!timeTooltip) {
+      return;
+    }
+    const time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+    timeTooltip.updateTime(seekBarRect, seekBarPoint, time);
+  }
+}
+
+/**
+ * Default options for {@link PlayProgressBar}.
+ *
+ * @type {Object}
+ * @private
+ */
+PlayProgressBar.prototype.options_ = {
+  children: []
+};
+
+// Time tooltips should not be added to a player on mobile devices
+if (!IS_IOS && !IS_ANDROID) {
+  PlayProgressBar.prototype.options_.children.push('timeTooltip');
+}
+Component$1.registerComponent('PlayProgressBar', PlayProgressBar);
+
+/**
+ * @file mouse-time-display.js
+ */
+
+/**
+ * The {@link MouseTimeDisplay} component tracks mouse movement over the
+ * {@link ProgressControl}. It displays an indicator and a {@link TimeTooltip}
+ * indicating the time which is represented by a given point in the
+ * {@link ProgressControl}.
+ *
+ * @extends Component
+ */
+class MouseTimeDisplay extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The {@link Player} that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+  }
+
+  /**
+   * Create the DOM element for this class.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-mouse-display'
+    });
+  }
+
+  /**
+   * Enqueues updates to its own DOM as well as the DOM of its
+   * {@link TimeTooltip} child.
+   *
+   * @param {Object} seekBarRect
+   *        The `ClientRect` for the {@link SeekBar} element.
+   *
+   * @param {number} seekBarPoint
+   *        A number from 0 to 1, representing a horizontal reference point
+   *        from the left edge of the {@link SeekBar}
+   */
+  update(seekBarRect, seekBarPoint) {
+    const time = seekBarPoint * this.player_.duration();
+    this.getChild('timeTooltip').updateTime(seekBarRect, seekBarPoint, time, () => {
+      this.el_.style.left = `${seekBarRect.width * seekBarPoint}px`;
+    });
+  }
+}
+
+/**
+ * Default options for `MouseTimeDisplay`
+ *
+ * @type {Object}
+ * @private
+ */
+MouseTimeDisplay.prototype.options_ = {
+  children: ['timeTooltip']
+};
+Component$1.registerComponent('MouseTimeDisplay', MouseTimeDisplay);
+
+/**
+ * @file seek-bar.js
+ */
+
+// The number of seconds the `step*` functions move the timeline.
+const STEP_SECONDS = 5;
+
+// The multiplier of STEP_SECONDS that PgUp/PgDown move the timeline.
+const PAGE_KEY_MULTIPLIER = 12;
+
+/**
+ * Seek bar and container for the progress bars. Uses {@link PlayProgressBar}
+ * as its `bar`.
+ *
+ * @extends Slider
+ */
+class SeekBar extends Slider {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.setEventHandlers_();
+  }
+
+  /**
+   * Sets the event handlers
+   *
+   * @private
+   */
+  setEventHandlers_() {
+    this.update_ = bind_(this, this.update);
+    this.update = throttle(this.update_, UPDATE_REFRESH_INTERVAL);
+    this.on(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
+    if (this.player_.liveTracker) {
+      this.on(this.player_.liveTracker, 'liveedgechange', this.update);
+    }
+
+    // when playing, let's ensure we smoothly update the play progress bar
+    // via an interval
+    this.updateInterval = null;
+    this.enableIntervalHandler_ = e => this.enableInterval_(e);
+    this.disableIntervalHandler_ = e => this.disableInterval_(e);
+    this.on(this.player_, ['playing'], this.enableIntervalHandler_);
+    this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
+
+    // we don't need to update the play progress if the document is hidden,
+    // also, this causes the CPU to spike and eventually crash the page on IE11.
+    if ('hidden' in document && 'visibilityState' in document) {
+      this.on(document, 'visibilitychange', this.toggleVisibility_);
+    }
+  }
+  toggleVisibility_(e) {
+    if (document.visibilityState === 'hidden') {
+      this.cancelNamedAnimationFrame('SeekBar#update');
+      this.cancelNamedAnimationFrame('Slider#update');
+      this.disableInterval_(e);
+    } else {
+      if (!this.player_.ended() && !this.player_.paused()) {
+        this.enableInterval_();
+      }
+
+      // we just switched back to the page and someone may be looking, so, update ASAP
+      this.update();
+    }
+  }
+  enableInterval_() {
+    if (this.updateInterval) {
+      return;
+    }
+    this.updateInterval = this.setInterval(this.update, UPDATE_REFRESH_INTERVAL);
+  }
+  disableInterval_(e) {
+    if (this.player_.liveTracker && this.player_.liveTracker.isLive() && e && e.type !== 'ended') {
+      return;
+    }
+    if (!this.updateInterval) {
+      return;
+    }
+    this.clearInterval(this.updateInterval);
+    this.updateInterval = null;
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-progress-holder'
+    }, {
+      'aria-label': this.localize('Progress Bar')
+    });
+  }
+
+  /**
+   * This function updates the play progress bar and accessibility
+   * attributes to whatever is passed in.
+   *
+   * @param {Event} [event]
+   *        The `timeupdate` or `ended` event that caused this to run.
+   *
+   * @listens Player#timeupdate
+   *
+   * @return {number}
+   *          The current percent at a number from 0-1
+   */
+  update(event) {
+    // ignore updates while the tab is hidden
+    if (document.visibilityState === 'hidden') {
+      return;
+    }
+    const percent = super.update();
+    this.requestNamedAnimationFrame('SeekBar#update', () => {
+      const currentTime = this.player_.ended() ? this.player_.duration() : this.getCurrentTime_();
+      const liveTracker = this.player_.liveTracker;
+      let duration = this.player_.duration();
+      if (liveTracker && liveTracker.isLive()) {
+        duration = this.player_.liveTracker.liveCurrentTime();
+      }
+      if (this.percent_ !== percent) {
+        // machine readable value of progress bar (percentage complete)
+        this.el_.setAttribute('aria-valuenow', (percent * 100).toFixed(2));
+        this.percent_ = percent;
+      }
+      if (this.currentTime_ !== currentTime || this.duration_ !== duration) {
+        // human readable value of progress bar (time complete)
+        this.el_.setAttribute('aria-valuetext', this.localize('progress bar timing: currentTime={1} duration={2}', [formatTime(currentTime, duration), formatTime(duration, duration)], '{1} of {2}'));
+        this.currentTime_ = currentTime;
+        this.duration_ = duration;
+      }
+
+      // update the progress bar time tooltip with the current time
+      if (this.bar) {
+        this.bar.update(getBoundingClientRect(this.el()), this.getProgress());
+      }
+    });
+    return percent;
+  }
+
+  /**
+   * Prevent liveThreshold from causing seeks to seem like they
+   * are not happening from a user perspective.
+   *
+   * @param {number} ct
+   *        current time to seek to
+   */
+  userSeek_(ct) {
+    if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+      this.player_.liveTracker.nextSeekedFromUser();
+    }
+    this.player_.currentTime(ct);
+  }
+
+  /**
+   * Get the value of current time but allows for smooth scrubbing,
+   * when player can't keep up.
+   *
+   * @return {number}
+   *         The current time value to display
+   *
+   * @private
+   */
+  getCurrentTime_() {
+    return this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+  }
+
+  /**
+   * Get the percentage of media played so far.
+   *
+   * @return {number}
+   *         The percentage of media played so far (0 to 1).
+   */
+  getPercent() {
+    const currentTime = this.getCurrentTime_();
+    let percent;
+    const liveTracker = this.player_.liveTracker;
+    if (liveTracker && liveTracker.isLive()) {
+      percent = (currentTime - liveTracker.seekableStart()) / liveTracker.liveWindow();
+
+      // prevent the percent from changing at the live edge
+      if (liveTracker.atLiveEdge()) {
+        percent = 1;
+      }
+    } else {
+      percent = currentTime / this.player_.duration();
+    }
+    return percent;
+  }
+
+  /**
+   * Handle mouse down on seek bar
+   *
+   * @param {MouseEvent} event
+   *        The `mousedown` event that caused this to run.
+   *
+   * @listens mousedown
+   */
+  handleMouseDown(event) {
+    if (!isSingleLeftClick(event)) {
+      return;
+    }
+
+    // Stop event propagation to prevent double fire in progress-control.js
+    event.stopPropagation();
+    this.videoWasPlaying = !this.player_.paused();
+    this.player_.pause();
+    super.handleMouseDown(event);
+  }
+
+  /**
+   * Handle mouse move on seek bar
+   *
+   * @param {MouseEvent} event
+   *        The `mousemove` event that caused this to run.
+   * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false
+   *
+   * @listens mousemove
+   */
+  handleMouseMove(event, mouseDown = false) {
+    if (!isSingleLeftClick(event) || isNaN(this.player_.duration())) {
+      return;
+    }
+    if (!mouseDown && !this.player_.scrubbing()) {
+      this.player_.scrubbing(true);
+    }
+    let newTime;
+    const distance = this.calculateDistance(event);
+    const liveTracker = this.player_.liveTracker;
+    if (!liveTracker || !liveTracker.isLive()) {
+      newTime = distance * this.player_.duration();
+
+      // Don't let video end while scrubbing.
+      if (newTime === this.player_.duration()) {
+        newTime = newTime - 0.1;
+      }
+    } else {
+      if (distance >= 0.99) {
+        liveTracker.seekToLiveEdge();
+        return;
+      }
+      const seekableStart = liveTracker.seekableStart();
+      const seekableEnd = liveTracker.liveCurrentTime();
+      newTime = seekableStart + distance * liveTracker.liveWindow();
+
+      // Don't let video end while scrubbing.
+      if (newTime >= seekableEnd) {
+        newTime = seekableEnd;
+      }
+
+      // Compensate for precision differences so that currentTime is not less
+      // than seekable start
+      if (newTime <= seekableStart) {
+        newTime = seekableStart + 0.1;
+      }
+
+      // On android seekableEnd can be Infinity sometimes,
+      // this will cause newTime to be Infinity, which is
+      // not a valid currentTime.
+      if (newTime === Infinity) {
+        return;
+      }
+    }
+
+    // Set new time (tell player to seek to new time)
+    this.userSeek_(newTime);
+    if (this.player_.options_.enableSmoothSeeking) {
+      this.update();
+    }
+  }
+  enable() {
+    super.enable();
+    const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+    if (!mouseTimeDisplay) {
+      return;
+    }
+    mouseTimeDisplay.show();
+  }
+  disable() {
+    super.disable();
+    const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+    if (!mouseTimeDisplay) {
+      return;
+    }
+    mouseTimeDisplay.hide();
+  }
+
+  /**
+   * Handle mouse up on seek bar
+   *
+   * @param {MouseEvent} event
+   *        The `mouseup` event that caused this to run.
+   *
+   * @listens mouseup
+   */
+  handleMouseUp(event) {
+    super.handleMouseUp(event);
+
+    // Stop event propagation to prevent double fire in progress-control.js
+    if (event) {
+      event.stopPropagation();
+    }
+    this.player_.scrubbing(false);
+
+    /**
+     * Trigger timeupdate because we're done seeking and the time has changed.
+     * This is particularly useful for if the player is paused to time the time displays.
+     *
+     * @event Tech#timeupdate
+     * @type {Event}
+     */
+    this.player_.trigger({
+      type: 'timeupdate',
+      target: this,
+      manuallyTriggered: true
+    });
+    if (this.videoWasPlaying) {
+      silencePromise(this.player_.play());
+    } else {
+      // We're done seeking and the time has changed.
+      // If the player is paused, make sure we display the correct time on the seek bar.
+      this.update_();
+    }
+  }
+
+  /**
+   * Move more quickly fast forward for keyboard-only users
+   */
+  stepForward() {
+    this.userSeek_(this.player_.currentTime() + STEP_SECONDS);
+  }
+
+  /**
+   * Move more quickly rewind for keyboard-only users
+   */
+  stepBack() {
+    this.userSeek_(this.player_.currentTime() - STEP_SECONDS);
+  }
+
+  /**
+   * Toggles the playback state of the player
+   * This gets called when enter or space is used on the seekbar
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called
+   *
+   */
+  handleAction(event) {
+    if (this.player_.paused()) {
+      this.player_.play();
+    } else {
+      this.player_.pause();
+    }
+  }
+
+  /**
+   * Called when this SeekBar has focus and a key gets pressed down.
+   * Supports the following keys:
+   *
+   *   Space or Enter key fire a click event
+   *   Home key moves to start of the timeline
+   *   End key moves to end of the timeline
+   *   Digit "0" through "9" keys move to 0%, 10% ... 80%, 90% of the timeline
+   *   PageDown key moves back a larger step than ArrowDown
+   *   PageUp key moves forward a large step
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    const liveTracker = this.player_.liveTracker;
+    if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.handleAction(event);
+    } else if (keycode.isEventKey(event, 'Home')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.userSeek_(0);
+    } else if (keycode.isEventKey(event, 'End')) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (liveTracker && liveTracker.isLive()) {
+        this.userSeek_(liveTracker.liveCurrentTime());
+      } else {
+        this.userSeek_(this.player_.duration());
+      }
+    } else if (/^[0-9]$/.test(keycode(event))) {
+      event.preventDefault();
+      event.stopPropagation();
+      const gotoFraction = (keycode.codes[keycode(event)] - keycode.codes['0']) * 10.0 / 100.0;
+      if (liveTracker && liveTracker.isLive()) {
+        this.userSeek_(liveTracker.seekableStart() + liveTracker.liveWindow() * gotoFraction);
+      } else {
+        this.userSeek_(this.player_.duration() * gotoFraction);
+      }
+    } else if (keycode.isEventKey(event, 'PgDn')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.userSeek_(this.player_.currentTime() - STEP_SECONDS * PAGE_KEY_MULTIPLIER);
+    } else if (keycode.isEventKey(event, 'PgUp')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.userSeek_(this.player_.currentTime() + STEP_SECONDS * PAGE_KEY_MULTIPLIER);
+    } else {
+      // Pass keydown handling up for unsupported keys
+      super.handleKeyDown(event);
+    }
+  }
+  dispose() {
+    this.disableInterval_();
+    this.off(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
+    if (this.player_.liveTracker) {
+      this.off(this.player_.liveTracker, 'liveedgechange', this.update);
+    }
+    this.off(this.player_, ['playing'], this.enableIntervalHandler_);
+    this.off(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
+
+    // we don't need to update the play progress if the document is hidden,
+    // also, this causes the CPU to spike and eventually crash the page on IE11.
+    if ('hidden' in document && 'visibilityState' in document) {
+      this.off(document, 'visibilitychange', this.toggleVisibility_);
+    }
+    super.dispose();
+  }
+}
+
+/**
+ * Default options for the `SeekBar`
+ *
+ * @type {Object}
+ * @private
+ */
+SeekBar.prototype.options_ = {
+  children: ['loadProgressBar', 'playProgressBar'],
+  barName: 'playProgressBar'
+};
+
+// MouseTimeDisplay tooltips should not be added to a player on mobile devices
+if (!IS_IOS && !IS_ANDROID) {
+  SeekBar.prototype.options_.children.splice(1, 0, 'mouseTimeDisplay');
+}
+Component$1.registerComponent('SeekBar', SeekBar);
+
+/**
+ * @file progress-control.js
+ */
+
+/**
+ * The Progress Control component contains the seek bar, load progress,
+ * and play progress.
+ *
+ * @extends Component
+ */
+class ProgressControl extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.handleMouseMove = throttle(bind_(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+    this.throttledHandleMouseSeek = throttle(bind_(this, this.handleMouseSeek), UPDATE_REFRESH_INTERVAL);
+    this.handleMouseUpHandler_ = e => this.handleMouseUp(e);
+    this.handleMouseDownHandler_ = e => this.handleMouseDown(e);
+    this.enable();
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-progress-control vjs-control'
+    });
+  }
+
+  /**
+   * When the mouse moves over the `ProgressControl`, the pointer position
+   * gets passed down to the `MouseTimeDisplay` component.
+   *
+   * @param {Event} event
+   *        The `mousemove` event that caused this function to run.
+   *
+   * @listen mousemove
+   */
+  handleMouseMove(event) {
+    const seekBar = this.getChild('seekBar');
+    if (!seekBar) {
+      return;
+    }
+    const playProgressBar = seekBar.getChild('playProgressBar');
+    const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
+    if (!playProgressBar && !mouseTimeDisplay) {
+      return;
+    }
+    const seekBarEl = seekBar.el();
+    const seekBarRect = findPosition(seekBarEl);
+    let seekBarPoint = getPointerPosition(seekBarEl, event).x;
+
+    // The default skin has a gap on either side of the `SeekBar`. This means
+    // that it's possible to trigger this behavior outside the boundaries of
+    // the `SeekBar`. This ensures we stay within it at all times.
+    seekBarPoint = clamp(seekBarPoint, 0, 1);
+    if (mouseTimeDisplay) {
+      mouseTimeDisplay.update(seekBarRect, seekBarPoint);
+    }
+    if (playProgressBar) {
+      playProgressBar.update(seekBarRect, seekBar.getProgress());
+    }
+  }
+
+  /**
+   * A throttled version of the {@link ProgressControl#handleMouseSeek} listener.
+   *
+   * @method ProgressControl#throttledHandleMouseSeek
+   * @param {Event} event
+   *        The `mousemove` event that caused this function to run.
+   *
+   * @listen mousemove
+   * @listen touchmove
+   */
+
+  /**
+   * Handle `mousemove` or `touchmove` events on the `ProgressControl`.
+   *
+   * @param {Event} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousemove
+   * @listens touchmove
+   */
+  handleMouseSeek(event) {
+    const seekBar = this.getChild('seekBar');
+    if (seekBar) {
+      seekBar.handleMouseMove(event);
+    }
+  }
+
+  /**
+   * Are controls are currently enabled for this progress control.
+   *
+   * @return {boolean}
+   *         true if controls are enabled, false otherwise
+   */
+  enabled() {
+    return this.enabled_;
+  }
+
+  /**
+   * Disable all controls on the progress control and its children
+   */
+  disable() {
+    this.children().forEach(child => child.disable && child.disable());
+    if (!this.enabled()) {
+      return;
+    }
+    this.off(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
+    this.off(this.el_, 'mousemove', this.handleMouseMove);
+    this.removeListenersAddedOnMousedownAndTouchstart();
+    this.addClass('disabled');
+    this.enabled_ = false;
+
+    // Restore normal playback state if controls are disabled while scrubbing
+    if (this.player_.scrubbing()) {
+      const seekBar = this.getChild('seekBar');
+      this.player_.scrubbing(false);
+      if (seekBar.videoWasPlaying) {
+        silencePromise(this.player_.play());
+      }
+    }
+  }
+
+  /**
+   * Enable all controls on the progress control and its children
+   */
+  enable() {
+    this.children().forEach(child => child.enable && child.enable());
+    if (this.enabled()) {
+      return;
+    }
+    this.on(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
+    this.on(this.el_, 'mousemove', this.handleMouseMove);
+    this.removeClass('disabled');
+    this.enabled_ = true;
+  }
+
+  /**
+   * Cleanup listeners after the user finishes interacting with the progress controls
+   */
+  removeListenersAddedOnMousedownAndTouchstart() {
+    const doc = this.el_.ownerDocument;
+    this.off(doc, 'mousemove', this.throttledHandleMouseSeek);
+    this.off(doc, 'touchmove', this.throttledHandleMouseSeek);
+    this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.off(doc, 'touchend', this.handleMouseUpHandler_);
+  }
+
+  /**
+   * Handle `mousedown` or `touchstart` events on the `ProgressControl`.
+   *
+   * @param {Event} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   * @listens touchstart
+   */
+  handleMouseDown(event) {
+    const doc = this.el_.ownerDocument;
+    const seekBar = this.getChild('seekBar');
+    if (seekBar) {
+      seekBar.handleMouseDown(event);
+    }
+    this.on(doc, 'mousemove', this.throttledHandleMouseSeek);
+    this.on(doc, 'touchmove', this.throttledHandleMouseSeek);
+    this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.on(doc, 'touchend', this.handleMouseUpHandler_);
+  }
+
+  /**
+   * Handle `mouseup` or `touchend` events on the `ProgressControl`.
+   *
+   * @param {Event} event
+   *        `mouseup` or `touchend` event that triggered this function.
+   *
+   * @listens touchend
+   * @listens mouseup
+   */
+  handleMouseUp(event) {
+    const seekBar = this.getChild('seekBar');
+    if (seekBar) {
+      seekBar.handleMouseUp(event);
+    }
+    this.removeListenersAddedOnMousedownAndTouchstart();
+  }
+}
+
+/**
+ * Default options for `ProgressControl`
+ *
+ * @type {Object}
+ * @private
+ */
+ProgressControl.prototype.options_ = {
+  children: ['seekBar']
+};
+Component$1.registerComponent('ProgressControl', ProgressControl);
+
+/**
+ * @file picture-in-picture-toggle.js
+ */
+
+/**
+ * Toggle Picture-in-Picture mode
+ *
+ * @extends Button
+ */
+class PictureInPictureToggle extends Button {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @listens Player#enterpictureinpicture
+   * @listens Player#leavepictureinpicture
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.setIcon('picture-in-picture-enter');
+    this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], e => this.handlePictureInPictureChange(e));
+    this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], e => this.handlePictureInPictureEnabledChange(e));
+    this.on(player, ['loadedmetadata', 'audioonlymodechange', 'audiopostermodechange'], () => this.handlePictureInPictureAudioModeChange());
+
+    // TODO: Deactivate button on player emptied event.
+    this.disable();
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-picture-in-picture-control vjs-hidden ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Displays or hides the button depending on the audio mode detection.
+   * Exits picture-in-picture if it is enabled when switching to audio mode.
+   */
+  handlePictureInPictureAudioModeChange() {
+    // This audio detection will not detect HLS or DASH audio-only streams because there was no reliable way to detect them at the time
+    const isSourceAudio = this.player_.currentType().substring(0, 5) === 'audio';
+    const isAudioMode = isSourceAudio || this.player_.audioPosterMode() || this.player_.audioOnlyMode();
+    if (!isAudioMode) {
+      this.show();
+      return;
+    }
+    if (this.player_.isInPictureInPicture()) {
+      this.player_.exitPictureInPicture();
+    }
+    this.hide();
+  }
+
+  /**
+   * Enables or disables button based on availability of a Picture-In-Picture mode.
+   *
+   * Enabled if
+   * - `player.options().enableDocumentPictureInPicture` is true and
+   *   window.documentPictureInPicture is available; or
+   * - `player.disablePictureInPicture()` is false and
+   *   element.requestPictureInPicture is available
+   */
+  handlePictureInPictureEnabledChange() {
+    if (document.pictureInPictureEnabled && this.player_.disablePictureInPicture() === false || this.player_.options_.enableDocumentPictureInPicture && 'documentPictureInPicture' in window$1) {
+      this.enable();
+    } else {
+      this.disable();
+    }
+  }
+
+  /**
+   * Handles enterpictureinpicture and leavepictureinpicture on the player and change control text accordingly.
+   *
+   * @param {Event} [event]
+   *        The {@link Player#enterpictureinpicture} or {@link Player#leavepictureinpicture} event that caused this function to be
+   *        called.
+   *
+   * @listens Player#enterpictureinpicture
+   * @listens Player#leavepictureinpicture
+   */
+  handlePictureInPictureChange(event) {
+    if (this.player_.isInPictureInPicture()) {
+      this.setIcon('picture-in-picture-exit');
+      this.controlText('Exit Picture-in-Picture');
+    } else {
+      this.setIcon('picture-in-picture-enter');
+      this.controlText('Picture-in-Picture');
+    }
+    this.handlePictureInPictureEnabledChange();
+  }
+
+  /**
+   * This gets called when an `PictureInPictureToggle` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    if (!this.player_.isInPictureInPicture()) {
+      this.player_.requestPictureInPicture();
+    } else {
+      this.player_.exitPictureInPicture();
+    }
+  }
+
+  /**
+   * Show the `Component`s element if it is hidden by removing the
+   * 'vjs-hidden' class name from it only in browsers that support the Picture-in-Picture API.
+   */
+  show() {
+    // Does not allow to display the pictureInPictureToggle in browsers that do not support the Picture-in-Picture API, e.g. Firefox.
+    if (typeof document.exitPictureInPicture !== 'function') {
+      return;
+    }
+    super.show();
+  }
+}
+
+/**
+ * The text that should display over the `PictureInPictureToggle`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+PictureInPictureToggle.prototype.controlText_ = 'Picture-in-Picture';
+Component$1.registerComponent('PictureInPictureToggle', PictureInPictureToggle);
+
+/**
+ * @file fullscreen-toggle.js
+ */
+
+/**
+ * Toggle fullscreen video
+ *
+ * @extends Button
+ */
+class FullscreenToggle extends Button {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.setIcon('fullscreen-enter');
+    this.on(player, 'fullscreenchange', e => this.handleFullscreenChange(e));
+    if (document[player.fsApi_.fullscreenEnabled] === false) {
+      this.disable();
+    }
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-fullscreen-control ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Handles fullscreenchange on the player and change control text accordingly.
+   *
+   * @param {Event} [event]
+   *        The {@link Player#fullscreenchange} event that caused this function to be
+   *        called.
+   *
+   * @listens Player#fullscreenchange
+   */
+  handleFullscreenChange(event) {
+    if (this.player_.isFullscreen()) {
+      this.controlText('Exit Fullscreen');
+      this.setIcon('fullscreen-exit');
+    } else {
+      this.controlText('Fullscreen');
+      this.setIcon('fullscreen-enter');
+    }
+  }
+
+  /**
+   * This gets called when an `FullscreenToggle` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    if (!this.player_.isFullscreen()) {
+      this.player_.requestFullscreen();
+    } else {
+      this.player_.exitFullscreen();
+    }
+  }
+}
+
+/**
+ * The text that should display over the `FullscreenToggle`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+FullscreenToggle.prototype.controlText_ = 'Fullscreen';
+Component$1.registerComponent('FullscreenToggle', FullscreenToggle);
+
+/**
+ * Check if volume control is supported and if it isn't hide the
+ * `Component` that was passed  using the `vjs-hidden` class.
+ *
+ * @param { import('../../component').default } self
+ *        The component that should be hidden if volume is unsupported
+ *
+ * @param { import('../../player').default } player
+ *        A reference to the player
+ *
+ * @private
+ */
+const checkVolumeSupport = function (self, player) {
+  // hide volume controls when they're not supported by the current tech
+  if (player.tech_ && !player.tech_.featuresVolumeControl) {
+    self.addClass('vjs-hidden');
+  }
+  self.on(player, 'loadstart', function () {
+    if (!player.tech_.featuresVolumeControl) {
+      self.addClass('vjs-hidden');
+    } else {
+      self.removeClass('vjs-hidden');
+    }
+  });
+};
+
+/**
+ * @file volume-level.js
+ */
+
+/**
+ * Shows volume level
+ *
+ * @extends Component
+ */
+class VolumeLevel extends Component$1 {
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const el = super.createEl('div', {
+      className: 'vjs-volume-level'
+    });
+    this.setIcon('circle', el);
+    el.appendChild(super.createEl('span', {
+      className: 'vjs-control-text'
+    }));
+    return el;
+  }
+}
+Component$1.registerComponent('VolumeLevel', VolumeLevel);
+
+/**
+ * @file volume-level-tooltip.js
+ */
+
+/**
+ * Volume level tooltips display a volume above or side by side the volume bar.
+ *
+ * @extends Component
+ */
+class VolumeLevelTooltip extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The {@link Player} that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+  }
+
+  /**
+   * Create the volume tooltip DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-volume-tooltip'
+    }, {
+      'aria-hidden': 'true'
+    });
+  }
+
+  /**
+   * Updates the position of the tooltip relative to the `VolumeBar` and
+   * its content text.
+   *
+   * @param {Object} rangeBarRect
+   *        The `ClientRect` for the {@link VolumeBar} element.
+   *
+   * @param {number} rangeBarPoint
+   *        A number from 0 to 1, representing a horizontal/vertical reference point
+   *        from the left edge of the {@link VolumeBar}
+   *
+   * @param {boolean} vertical
+   *        Referees to the Volume control position
+   *        in the control bar{@link VolumeControl}
+   *
+   */
+  update(rangeBarRect, rangeBarPoint, vertical, content) {
+    if (!vertical) {
+      const tooltipRect = getBoundingClientRect(this.el_);
+      const playerRect = getBoundingClientRect(this.player_.el());
+      const volumeBarPointPx = rangeBarRect.width * rangeBarPoint;
+      if (!playerRect || !tooltipRect) {
+        return;
+      }
+      const spaceLeftOfPoint = rangeBarRect.left - playerRect.left + volumeBarPointPx;
+      const spaceRightOfPoint = rangeBarRect.width - volumeBarPointPx + (playerRect.right - rangeBarRect.right);
+      let pullTooltipBy = tooltipRect.width / 2;
+      if (spaceLeftOfPoint < pullTooltipBy) {
+        pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
+      } else if (spaceRightOfPoint < pullTooltipBy) {
+        pullTooltipBy = spaceRightOfPoint;
+      }
+      if (pullTooltipBy < 0) {
+        pullTooltipBy = 0;
+      } else if (pullTooltipBy > tooltipRect.width) {
+        pullTooltipBy = tooltipRect.width;
+      }
+      this.el_.style.right = `-${pullTooltipBy}px`;
+    }
+    this.write(`${content}%`);
+  }
+
+  /**
+   * Write the volume to the tooltip DOM element.
+   *
+   * @param {string} content
+   *        The formatted volume for the tooltip.
+   */
+  write(content) {
+    textContent(this.el_, content);
+  }
+
+  /**
+   * Updates the position of the volume tooltip relative to the `VolumeBar`.
+   *
+   * @param {Object} rangeBarRect
+   *        The `ClientRect` for the {@link VolumeBar} element.
+   *
+   * @param {number} rangeBarPoint
+   *        A number from 0 to 1, representing a horizontal/vertical reference point
+   *        from the left edge of the {@link VolumeBar}
+   *
+   * @param {boolean} vertical
+   *        Referees to the Volume control position
+   *        in the control bar{@link VolumeControl}
+   *
+   * @param {number} volume
+   *        The volume level to update the tooltip to
+   *
+   * @param {Function} cb
+   *        A function that will be called during the request animation frame
+   *        for tooltips that need to do additional animations from the default
+   */
+  updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, cb) {
+    this.requestNamedAnimationFrame('VolumeLevelTooltip#updateVolume', () => {
+      this.update(rangeBarRect, rangeBarPoint, vertical, volume.toFixed(0));
+      if (cb) {
+        cb();
+      }
+    });
+  }
+}
+Component$1.registerComponent('VolumeLevelTooltip', VolumeLevelTooltip);
+
+/**
+ * @file mouse-volume-level-display.js
+ */
+
+/**
+ * The {@link MouseVolumeLevelDisplay} component tracks mouse movement over the
+ * {@link VolumeControl}. It displays an indicator and a {@link VolumeLevelTooltip}
+ * indicating the volume level which is represented by a given point in the
+ * {@link VolumeBar}.
+ *
+ * @extends Component
+ */
+class MouseVolumeLevelDisplay extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The {@link Player} that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+  }
+
+  /**
+   * Create the DOM element for this class.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-mouse-display'
+    });
+  }
+
+  /**
+   * Enquires updates to its own DOM as well as the DOM of its
+   * {@link VolumeLevelTooltip} child.
+   *
+   * @param {Object} rangeBarRect
+   *        The `ClientRect` for the {@link VolumeBar} element.
+   *
+   * @param {number} rangeBarPoint
+   *        A number from 0 to 1, representing a horizontal/vertical reference point
+   *        from the left edge of the {@link VolumeBar}
+   *
+   * @param {boolean} vertical
+   *        Referees to the Volume control position
+   *        in the control bar{@link VolumeControl}
+   *
+   */
+  update(rangeBarRect, rangeBarPoint, vertical) {
+    const volume = 100 * rangeBarPoint;
+    this.getChild('volumeLevelTooltip').updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, () => {
+      if (vertical) {
+        this.el_.style.bottom = `${rangeBarRect.height * rangeBarPoint}px`;
+      } else {
+        this.el_.style.left = `${rangeBarRect.width * rangeBarPoint}px`;
+      }
+    });
+  }
+}
+
+/**
+ * Default options for `MouseVolumeLevelDisplay`
+ *
+ * @type {Object}
+ * @private
+ */
+MouseVolumeLevelDisplay.prototype.options_ = {
+  children: ['volumeLevelTooltip']
+};
+Component$1.registerComponent('MouseVolumeLevelDisplay', MouseVolumeLevelDisplay);
+
+/**
+ * @file volume-bar.js
+ */
+
+/**
+ * The bar that contains the volume level and can be clicked on to adjust the level
+ *
+ * @extends Slider
+ */
+class VolumeBar extends Slider {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.on('slideractive', e => this.updateLastVolume_(e));
+    this.on(player, 'volumechange', e => this.updateARIAAttributes(e));
+    player.ready(() => this.updateARIAAttributes());
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-volume-bar vjs-slider-bar'
+    }, {
+      'aria-label': this.localize('Volume Level'),
+      'aria-live': 'polite'
+    });
+  }
+
+  /**
+   * Handle mouse down on volume bar
+   *
+   * @param {Event} event
+   *        The `mousedown` event that caused this to run.
+   *
+   * @listens mousedown
+   */
+  handleMouseDown(event) {
+    if (!isSingleLeftClick(event)) {
+      return;
+    }
+    super.handleMouseDown(event);
+  }
+
+  /**
+   * Handle movement events on the {@link VolumeMenuButton}.
+   *
+   * @param {Event} event
+   *        The event that caused this function to run.
+   *
+   * @listens mousemove
+   */
+  handleMouseMove(event) {
+    const mouseVolumeLevelDisplay = this.getChild('mouseVolumeLevelDisplay');
+    if (mouseVolumeLevelDisplay) {
+      const volumeBarEl = this.el();
+      const volumeBarRect = getBoundingClientRect(volumeBarEl);
+      const vertical = this.vertical();
+      let volumeBarPoint = getPointerPosition(volumeBarEl, event);
+      volumeBarPoint = vertical ? volumeBarPoint.y : volumeBarPoint.x;
+      // The default skin has a gap on either side of the `VolumeBar`. This means
+      // that it's possible to trigger this behavior outside the boundaries of
+      // the `VolumeBar`. This ensures we stay within it at all times.
+      volumeBarPoint = clamp(volumeBarPoint, 0, 1);
+      mouseVolumeLevelDisplay.update(volumeBarRect, volumeBarPoint, vertical);
+    }
+    if (!isSingleLeftClick(event)) {
+      return;
+    }
+    this.checkMuted();
+    this.player_.volume(this.calculateDistance(event));
+  }
+
+  /**
+   * If the player is muted unmute it.
+   */
+  checkMuted() {
+    if (this.player_.muted()) {
+      this.player_.muted(false);
+    }
+  }
+
+  /**
+   * Get percent of volume level
+   *
+   * @return {number}
+   *         Volume level percent as a decimal number.
+   */
+  getPercent() {
+    if (this.player_.muted()) {
+      return 0;
+    }
+    return this.player_.volume();
+  }
+
+  /**
+   * Increase volume level for keyboard users
+   */
+  stepForward() {
+    this.checkMuted();
+    this.player_.volume(this.player_.volume() + 0.1);
+  }
+
+  /**
+   * Decrease volume level for keyboard users
+   */
+  stepBack() {
+    this.checkMuted();
+    this.player_.volume(this.player_.volume() - 0.1);
+  }
+
+  /**
+   * Update ARIA accessibility attributes
+   *
+   * @param {Event} [event]
+   *        The `volumechange` event that caused this function to run.
+   *
+   * @listens Player#volumechange
+   */
+  updateARIAAttributes(event) {
+    const ariaValue = this.player_.muted() ? 0 : this.volumeAsPercentage_();
+    this.el_.setAttribute('aria-valuenow', ariaValue);
+    this.el_.setAttribute('aria-valuetext', ariaValue + '%');
+  }
+
+  /**
+   * Returns the current value of the player volume as a percentage
+   *
+   * @private
+   */
+  volumeAsPercentage_() {
+    return Math.round(this.player_.volume() * 100);
+  }
+
+  /**
+   * When user starts dragging the VolumeBar, store the volume and listen for
+   * the end of the drag. When the drag ends, if the volume was set to zero,
+   * set lastVolume to the stored volume.
+   *
+   * @listens slideractive
+   * @private
+   */
+  updateLastVolume_() {
+    const volumeBeforeDrag = this.player_.volume();
+    this.one('sliderinactive', () => {
+      if (this.player_.volume() === 0) {
+        this.player_.lastVolume_(volumeBeforeDrag);
+      }
+    });
+  }
+}
+
+/**
+ * Default options for the `VolumeBar`
+ *
+ * @type {Object}
+ * @private
+ */
+VolumeBar.prototype.options_ = {
+  children: ['volumeLevel'],
+  barName: 'volumeLevel'
+};
+
+// MouseVolumeLevelDisplay tooltip should not be added to a player on mobile devices
+if (!IS_IOS && !IS_ANDROID) {
+  VolumeBar.prototype.options_.children.splice(0, 0, 'mouseVolumeLevelDisplay');
+}
+
+/**
+ * Call the update event for this Slider when this event happens on the player.
+ *
+ * @type {string}
+ */
+VolumeBar.prototype.playerEvent = 'volumechange';
+Component$1.registerComponent('VolumeBar', VolumeBar);
+
+/**
+ * @file volume-control.js
+ */
+
+/**
+ * The component for controlling the volume level
+ *
+ * @extends Component
+ */
+class VolumeControl extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of player options.
+   */
+  constructor(player, options = {}) {
+    options.vertical = options.vertical || false;
+
+    // Pass the vertical option down to the VolumeBar if
+    // the VolumeBar is turned on.
+    if (typeof options.volumeBar === 'undefined' || isPlain(options.volumeBar)) {
+      options.volumeBar = options.volumeBar || {};
+      options.volumeBar.vertical = options.vertical;
+    }
+    super(player, options);
+
+    // hide this control if volume support is missing
+    checkVolumeSupport(this, player);
+    this.throttledHandleMouseMove = throttle(bind_(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+    this.handleMouseUpHandler_ = e => this.handleMouseUp(e);
+    this.on('mousedown', e => this.handleMouseDown(e));
+    this.on('touchstart', e => this.handleMouseDown(e));
+    this.on('mousemove', e => this.handleMouseMove(e));
+
+    // while the slider is active (the mouse has been pressed down and
+    // is dragging) or in focus we do not want to hide the VolumeBar
+    this.on(this.volumeBar, ['focus', 'slideractive'], () => {
+      this.volumeBar.addClass('vjs-slider-active');
+      this.addClass('vjs-slider-active');
+      this.trigger('slideractive');
+    });
+    this.on(this.volumeBar, ['blur', 'sliderinactive'], () => {
+      this.volumeBar.removeClass('vjs-slider-active');
+      this.removeClass('vjs-slider-active');
+      this.trigger('sliderinactive');
+    });
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    let orientationClass = 'vjs-volume-horizontal';
+    if (this.options_.vertical) {
+      orientationClass = 'vjs-volume-vertical';
+    }
+    return super.createEl('div', {
+      className: `vjs-volume-control vjs-control ${orientationClass}`
+    });
+  }
+
+  /**
+   * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+   *
+   * @param {Event} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   * @listens touchstart
+   */
+  handleMouseDown(event) {
+    const doc = this.el_.ownerDocument;
+    this.on(doc, 'mousemove', this.throttledHandleMouseMove);
+    this.on(doc, 'touchmove', this.throttledHandleMouseMove);
+    this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.on(doc, 'touchend', this.handleMouseUpHandler_);
+  }
+
+  /**
+   * Handle `mouseup` or `touchend` events on the `VolumeControl`.
+   *
+   * @param {Event} event
+   *        `mouseup` or `touchend` event that triggered this function.
+   *
+   * @listens touchend
+   * @listens mouseup
+   */
+  handleMouseUp(event) {
+    const doc = this.el_.ownerDocument;
+    this.off(doc, 'mousemove', this.throttledHandleMouseMove);
+    this.off(doc, 'touchmove', this.throttledHandleMouseMove);
+    this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.off(doc, 'touchend', this.handleMouseUpHandler_);
+  }
+
+  /**
+   * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+   *
+   * @param {Event} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   * @listens touchstart
+   */
+  handleMouseMove(event) {
+    this.volumeBar.handleMouseMove(event);
+  }
+}
+
+/**
+ * Default options for the `VolumeControl`
+ *
+ * @type {Object}
+ * @private
+ */
+VolumeControl.prototype.options_ = {
+  children: ['volumeBar']
+};
+Component$1.registerComponent('VolumeControl', VolumeControl);
+
+/**
+ * Check if muting volume is supported and if it isn't hide the mute toggle
+ * button.
+ *
+ * @param { import('../../component').default } self
+ *        A reference to the mute toggle button
+ *
+ * @param { import('../../player').default } player
+ *        A reference to the player
+ *
+ * @private
+ */
+const checkMuteSupport = function (self, player) {
+  // hide mute toggle button if it's not supported by the current tech
+  if (player.tech_ && !player.tech_.featuresMuteControl) {
+    self.addClass('vjs-hidden');
+  }
+  self.on(player, 'loadstart', function () {
+    if (!player.tech_.featuresMuteControl) {
+      self.addClass('vjs-hidden');
+    } else {
+      self.removeClass('vjs-hidden');
+    }
+  });
+};
+
+/**
+ * @file mute-toggle.js
+ */
+
+/**
+ * A button component for muting the audio.
+ *
+ * @extends Button
+ */
+class MuteToggle extends Button {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+
+    // hide this control if volume support is missing
+    checkMuteSupport(this, player);
+    this.on(player, ['loadstart', 'volumechange'], e => this.update(e));
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-mute-control ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * This gets called when an `MuteToggle` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    const vol = this.player_.volume();
+    const lastVolume = this.player_.lastVolume_();
+    if (vol === 0) {
+      const volumeToSet = lastVolume < 0.1 ? 0.1 : lastVolume;
+      this.player_.volume(volumeToSet);
+      this.player_.muted(false);
+    } else {
+      this.player_.muted(this.player_.muted() ? false : true);
+    }
+  }
+
+  /**
+   * Update the `MuteToggle` button based on the state of `volume` and `muted`
+   * on the player.
+   *
+   * @param {Event} [event]
+   *        The {@link Player#loadstart} event if this function was called
+   *        through an event.
+   *
+   * @listens Player#loadstart
+   * @listens Player#volumechange
+   */
+  update(event) {
+    this.updateIcon_();
+    this.updateControlText_();
+  }
+
+  /**
+   * Update the appearance of the `MuteToggle` icon.
+   *
+   * Possible states (given `level` variable below):
+   * - 0: crossed out
+   * - 1: zero bars of volume
+   * - 2: one bar of volume
+   * - 3: two bars of volume
+   *
+   * @private
+   */
+  updateIcon_() {
+    const vol = this.player_.volume();
+    let level = 3;
+    this.setIcon('volume-high');
+
+    // in iOS when a player is loaded with muted attribute
+    // and volume is changed with a native mute button
+    // we want to make sure muted state is updated
+    if (IS_IOS && this.player_.tech_ && this.player_.tech_.el_) {
+      this.player_.muted(this.player_.tech_.el_.muted);
+    }
+    if (vol === 0 || this.player_.muted()) {
+      this.setIcon('volume-mute');
+      level = 0;
+    } else if (vol < 0.33) {
+      this.setIcon('volume-low');
+      level = 1;
+    } else if (vol < 0.67) {
+      this.setIcon('volume-medium');
+      level = 2;
+    }
+    removeClass(this.el_, [0, 1, 2, 3].reduce((str, i) => str + `${i ? ' ' : ''}vjs-vol-${i}`, ''));
+    addClass(this.el_, `vjs-vol-${level}`);
+  }
+
+  /**
+   * If `muted` has changed on the player, update the control text
+   * (`title` attribute on `vjs-mute-control` element and content of
+   * `vjs-control-text` element).
+   *
+   * @private
+   */
+  updateControlText_() {
+    const soundOff = this.player_.muted() || this.player_.volume() === 0;
+    const text = soundOff ? 'Unmute' : 'Mute';
+    if (this.controlText() !== text) {
+      this.controlText(text);
+    }
+  }
+}
+
+/**
+ * The text that should display over the `MuteToggle`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+MuteToggle.prototype.controlText_ = 'Mute';
+Component$1.registerComponent('MuteToggle', MuteToggle);
+
+/**
+ * @file volume-control.js
+ */
+
+/**
+ * A Component to contain the MuteToggle and VolumeControl so that
+ * they can work together.
+ *
+ * @extends Component
+ */
+class VolumePanel extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of player options.
+   */
+  constructor(player, options = {}) {
+    if (typeof options.inline !== 'undefined') {
+      options.inline = options.inline;
+    } else {
+      options.inline = true;
+    }
+
+    // pass the inline option down to the VolumeControl as vertical if
+    // the VolumeControl is on.
+    if (typeof options.volumeControl === 'undefined' || isPlain(options.volumeControl)) {
+      options.volumeControl = options.volumeControl || {};
+      options.volumeControl.vertical = !options.inline;
+    }
+    super(player, options);
+
+    // this handler is used by mouse handler methods below
+    this.handleKeyPressHandler_ = e => this.handleKeyPress(e);
+    this.on(player, ['loadstart'], e => this.volumePanelState_(e));
+    this.on(this.muteToggle, 'keyup', e => this.handleKeyPress(e));
+    this.on(this.volumeControl, 'keyup', e => this.handleVolumeControlKeyUp(e));
+    this.on('keydown', e => this.handleKeyPress(e));
+    this.on('mouseover', e => this.handleMouseOver(e));
+    this.on('mouseout', e => this.handleMouseOut(e));
+
+    // while the slider is active (the mouse has been pressed down and
+    // is dragging) we do not want to hide the VolumeBar
+    this.on(this.volumeControl, ['slideractive'], this.sliderActive_);
+    this.on(this.volumeControl, ['sliderinactive'], this.sliderInactive_);
+  }
+
+  /**
+   * Add vjs-slider-active class to the VolumePanel
+   *
+   * @listens VolumeControl#slideractive
+   * @private
+   */
+  sliderActive_() {
+    this.addClass('vjs-slider-active');
+  }
+
+  /**
+   * Removes vjs-slider-active class to the VolumePanel
+   *
+   * @listens VolumeControl#sliderinactive
+   * @private
+   */
+  sliderInactive_() {
+    this.removeClass('vjs-slider-active');
+  }
+
+  /**
+   * Adds vjs-hidden or vjs-mute-toggle-only to the VolumePanel
+   * depending on MuteToggle and VolumeControl state
+   *
+   * @listens Player#loadstart
+   * @private
+   */
+  volumePanelState_() {
+    // hide volume panel if neither volume control or mute toggle
+    // are displayed
+    if (this.volumeControl.hasClass('vjs-hidden') && this.muteToggle.hasClass('vjs-hidden')) {
+      this.addClass('vjs-hidden');
+    }
+
+    // if only mute toggle is visible we don't want
+    // volume panel expanding when hovered or active
+    if (this.volumeControl.hasClass('vjs-hidden') && !this.muteToggle.hasClass('vjs-hidden')) {
+      this.addClass('vjs-mute-toggle-only');
+    }
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    let orientationClass = 'vjs-volume-panel-horizontal';
+    if (!this.options_.inline) {
+      orientationClass = 'vjs-volume-panel-vertical';
+    }
+    return super.createEl('div', {
+      className: `vjs-volume-panel vjs-control ${orientationClass}`
+    });
+  }
+
+  /**
+   * Dispose of the `volume-panel` and all child components.
+   */
+  dispose() {
+    this.handleMouseOut();
+    super.dispose();
+  }
+
+  /**
+   * Handles `keyup` events on the `VolumeControl`, looking for ESC, which closes
+   * the volume panel and sets focus on `MuteToggle`.
+   *
+   * @param {Event} event
+   *        The `keyup` event that caused this function to be called.
+   *
+   * @listens keyup
+   */
+  handleVolumeControlKeyUp(event) {
+    if (keycode.isEventKey(event, 'Esc')) {
+      this.muteToggle.focus();
+    }
+  }
+
+  /**
+   * This gets called when a `VolumePanel` gains hover via a `mouseover` event.
+   * Turns on listening for `mouseover` event. When they happen it
+   * calls `this.handleMouseOver`.
+   *
+   * @param {Event} event
+   *        The `mouseover` event that caused this function to be called.
+   *
+   * @listens mouseover
+   */
+  handleMouseOver(event) {
+    this.addClass('vjs-hover');
+    on(document, 'keyup', this.handleKeyPressHandler_);
+  }
+
+  /**
+   * This gets called when a `VolumePanel` gains hover via a `mouseout` event.
+   * Turns on listening for `mouseout` event. When they happen it
+   * calls `this.handleMouseOut`.
+   *
+   * @param {Event} event
+   *        The `mouseout` event that caused this function to be called.
+   *
+   * @listens mouseout
+   */
+  handleMouseOut(event) {
+    this.removeClass('vjs-hover');
+    off(document, 'keyup', this.handleKeyPressHandler_);
+  }
+
+  /**
+   * Handles `keyup` event on the document or `keydown` event on the `VolumePanel`,
+   * looking for ESC, which hides the `VolumeControl`.
+   *
+   * @param {Event} event
+   *        The keypress that triggered this event.
+   *
+   * @listens keydown | keyup
+   */
+  handleKeyPress(event) {
+    if (keycode.isEventKey(event, 'Esc')) {
+      this.handleMouseOut();
+    }
+  }
+}
+
+/**
+ * Default options for the `VolumeControl`
+ *
+ * @type {Object}
+ * @private
+ */
+VolumePanel.prototype.options_ = {
+  children: ['muteToggle', 'volumeControl']
+};
+Component$1.registerComponent('VolumePanel', VolumePanel);
+
+/**
+ * Button to skip forward a configurable amount of time
+ * through a video. Renders in the control bar.
+ *
+ * e.g. options: {controlBar: {skipButtons: forward: 5}}
+ *
+ * @extends Button
+ */
+class SkipForward extends Button {
+  constructor(player, options) {
+    super(player, options);
+    this.validOptions = [5, 10, 30];
+    this.skipTime = this.getSkipForwardTime();
+    if (this.skipTime && this.validOptions.includes(this.skipTime)) {
+      this.setIcon(`forward-${this.skipTime}`);
+      this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime.toLocaleString(player.language())]));
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+  getSkipForwardTime() {
+    const playerOptions = this.options_.playerOptions;
+    return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.forward;
+  }
+  buildCSSClass() {
+    return `vjs-skip-forward-${this.getSkipForwardTime()} ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * On click, skips forward in the duration/seekable range by a configurable amount of seconds.
+   * If the time left in the duration/seekable range is less than the configured 'skip forward' time,
+   * skips to end of duration/seekable range.
+   *
+   * Handle a click on a `SkipForward` button
+   *
+   * @param {EventTarget~Event} event
+   *        The `click` event that caused this function
+   *        to be called
+   */
+  handleClick(event) {
+    if (isNaN(this.player_.duration())) {
+      return;
+    }
+    const currentVideoTime = this.player_.currentTime();
+    const liveTracker = this.player_.liveTracker;
+    const duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
+    let newTime;
+    if (currentVideoTime + this.skipTime <= duration) {
+      newTime = currentVideoTime + this.skipTime;
+    } else {
+      newTime = duration;
+    }
+    this.player_.currentTime(newTime);
+  }
+
+  /**
+   * Update control text on languagechange
+   */
+  handleLanguagechange() {
+    this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime]));
+  }
+}
+SkipForward.prototype.controlText_ = 'Skip Forward';
+Component$1.registerComponent('SkipForward', SkipForward);
+
+/**
+ * Button to skip backward a configurable amount of time
+ * through a video. Renders in the control bar.
+ *
+ *  * e.g. options: {controlBar: {skipButtons: backward: 5}}
+ *
+ * @extends Button
+ */
+class SkipBackward extends Button {
+  constructor(player, options) {
+    super(player, options);
+    this.validOptions = [5, 10, 30];
+    this.skipTime = this.getSkipBackwardTime();
+    if (this.skipTime && this.validOptions.includes(this.skipTime)) {
+      this.setIcon(`replay-${this.skipTime}`);
+      this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime.toLocaleString(player.language())]));
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+  getSkipBackwardTime() {
+    const playerOptions = this.options_.playerOptions;
+    return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.backward;
+  }
+  buildCSSClass() {
+    return `vjs-skip-backward-${this.getSkipBackwardTime()} ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * On click, skips backward in the video by a configurable amount of seconds.
+   * If the current time in the video is less than the configured 'skip backward' time,
+   * skips to beginning of video or seekable range.
+   *
+   * Handle a click on a `SkipBackward` button
+   *
+   * @param {EventTarget~Event} event
+   *        The `click` event that caused this function
+   *        to be called
+   */
+  handleClick(event) {
+    const currentVideoTime = this.player_.currentTime();
+    const liveTracker = this.player_.liveTracker;
+    const seekableStart = liveTracker && liveTracker.isLive() && liveTracker.seekableStart();
+    let newTime;
+    if (seekableStart && currentVideoTime - this.skipTime <= seekableStart) {
+      newTime = seekableStart;
+    } else if (currentVideoTime >= this.skipTime) {
+      newTime = currentVideoTime - this.skipTime;
+    } else {
+      newTime = 0;
+    }
+    this.player_.currentTime(newTime);
+  }
+
+  /**
+   * Update control text on languagechange
+   */
+  handleLanguagechange() {
+    this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime]));
+  }
+}
+SkipBackward.prototype.controlText_ = 'Skip Backward';
+Component$1.registerComponent('SkipBackward', SkipBackward);
+
+/**
+ * @file menu.js
+ */
+
+/**
+ * The Menu component is used to build popup menus, including subtitle and
+ * captions selection menus.
+ *
+ * @extends Component
+ */
+class Menu extends Component$1 {
+  /**
+   * Create an instance of this class.
+   *
+   * @param { import('../player').default } player
+   *        the player that this component should attach to
+   *
+   * @param {Object} [options]
+   *        Object of option names and values
+   *
+   */
+  constructor(player, options) {
+    super(player, options);
+    if (options) {
+      this.menuButton_ = options.menuButton;
+    }
+    this.focusedChild_ = -1;
+    this.on('keydown', e => this.handleKeyDown(e));
+
+    // All the menu item instances share the same blur handler provided by the menu container.
+    this.boundHandleBlur_ = e => this.handleBlur(e);
+    this.boundHandleTapClick_ = e => this.handleTapClick(e);
+  }
+
+  /**
+   * Add event listeners to the {@link MenuItem}.
+   *
+   * @param {Object} component
+   *        The instance of the `MenuItem` to add listeners to.
+   *
+   */
+  addEventListenerForItem(component) {
+    if (!(component instanceof Component$1)) {
+      return;
+    }
+    this.on(component, 'blur', this.boundHandleBlur_);
+    this.on(component, ['tap', 'click'], this.boundHandleTapClick_);
+  }
+
+  /**
+   * Remove event listeners from the {@link MenuItem}.
+   *
+   * @param {Object} component
+   *        The instance of the `MenuItem` to remove listeners.
+   *
+   */
+  removeEventListenerForItem(component) {
+    if (!(component instanceof Component$1)) {
+      return;
+    }
+    this.off(component, 'blur', this.boundHandleBlur_);
+    this.off(component, ['tap', 'click'], this.boundHandleTapClick_);
+  }
+
+  /**
+   * This method will be called indirectly when the component has been added
+   * before the component adds to the new menu instance by `addItem`.
+   * In this case, the original menu instance will remove the component
+   * by calling `removeChild`.
+   *
+   * @param {Object} component
+   *        The instance of the `MenuItem`
+   */
+  removeChild(component) {
+    if (typeof component === 'string') {
+      component = this.getChild(component);
+    }
+    this.removeEventListenerForItem(component);
+    super.removeChild(component);
+  }
+
+  /**
+   * Add a {@link MenuItem} to the menu.
+   *
+   * @param {Object|string} component
+   *        The name or instance of the `MenuItem` to add.
+   *
+   */
+  addItem(component) {
+    const childComponent = this.addChild(component);
+    if (childComponent) {
+      this.addEventListenerForItem(childComponent);
+    }
+  }
+
+  /**
+   * Create the `Menu`s DOM element.
+   *
+   * @return {Element}
+   *         the element that was created
+   */
+  createEl() {
+    const contentElType = this.options_.contentElType || 'ul';
+    this.contentEl_ = createEl(contentElType, {
+      className: 'vjs-menu-content'
+    });
+    this.contentEl_.setAttribute('role', 'menu');
+    const el = super.createEl('div', {
+      append: this.contentEl_,
+      className: 'vjs-menu'
+    });
+    el.appendChild(this.contentEl_);
+
+    // Prevent clicks from bubbling up. Needed for Menu Buttons,
+    // where a click on the parent is significant
+    on(el, 'click', function (event) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    });
+    return el;
+  }
+  dispose() {
+    this.contentEl_ = null;
+    this.boundHandleBlur_ = null;
+    this.boundHandleTapClick_ = null;
+    super.dispose();
+  }
+
+  /**
+   * Called when a `MenuItem` loses focus.
+   *
+   * @param {Event} event
+   *        The `blur` event that caused this function to be called.
+   *
+   * @listens blur
+   */
+  handleBlur(event) {
+    const relatedTarget = event.relatedTarget || document.activeElement;
+
+    // Close menu popup when a user clicks outside the menu
+    if (!this.children().some(element => {
+      return element.el() === relatedTarget;
+    })) {
+      const btn = this.menuButton_;
+      if (btn && btn.buttonPressed_ && relatedTarget !== btn.el().firstChild) {
+        btn.unpressButton();
+      }
+    }
+  }
+
+  /**
+   * Called when a `MenuItem` gets clicked or tapped.
+   *
+   * @param {Event} event
+   *        The `click` or `tap` event that caused this function to be called.
+   *
+   * @listens click,tap
+   */
+  handleTapClick(event) {
+    // Unpress the associated MenuButton, and move focus back to it
+    if (this.menuButton_) {
+      this.menuButton_.unpressButton();
+      const childComponents = this.children();
+      if (!Array.isArray(childComponents)) {
+        return;
+      }
+      const foundComponent = childComponents.filter(component => component.el() === event.target)[0];
+      if (!foundComponent) {
+        return;
+      }
+
+      // don't focus menu button if item is a caption settings item
+      // because focus will move elsewhere
+      if (foundComponent.name() !== 'CaptionSettingsMenuItem') {
+        this.menuButton_.focus();
+      }
+    }
+  }
+
+  /**
+   * Handle a `keydown` event on this menu. This listener is added in the constructor.
+   *
+   * @param {KeyboardEvent} event
+   *        A `keydown` event that happened on the menu.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Left and Down Arrows
+    if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.stepForward();
+
+      // Up and Right Arrows
+    } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.stepBack();
+    }
+  }
+
+  /**
+   * Move to next (lower) menu item for keyboard users.
+   */
+  stepForward() {
+    let stepChild = 0;
+    if (this.focusedChild_ !== undefined) {
+      stepChild = this.focusedChild_ + 1;
+    }
+    this.focus(stepChild);
+  }
+
+  /**
+   * Move to previous (higher) menu item for keyboard users.
+   */
+  stepBack() {
+    let stepChild = 0;
+    if (this.focusedChild_ !== undefined) {
+      stepChild = this.focusedChild_ - 1;
+    }
+    this.focus(stepChild);
+  }
+
+  /**
+   * Set focus on a {@link MenuItem} in the `Menu`.
+   *
+   * @param {Object|string} [item=0]
+   *        Index of child item set focus on.
+   */
+  focus(item = 0) {
+    const children = this.children().slice();
+    const haveTitle = children.length && children[0].hasClass('vjs-menu-title');
+    if (haveTitle) {
+      children.shift();
+    }
+    if (children.length > 0) {
+      if (item < 0) {
+        item = 0;
+      } else if (item >= children.length) {
+        item = children.length - 1;
+      }
+      this.focusedChild_ = item;
+      children[item].el_.focus();
+    }
+  }
+}
+Component$1.registerComponent('Menu', Menu);
+
+/**
+ * @file menu-button.js
+ */
+
+/**
+ * A `MenuButton` class for any popup {@link Menu}.
+ *
+ * @extends Component
+ */
+class MenuButton extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of player options.
+   */
+  constructor(player, options = {}) {
+    super(player, options);
+    this.menuButton_ = new Button(player, options);
+    this.menuButton_.controlText(this.controlText_);
+    this.menuButton_.el_.setAttribute('aria-haspopup', 'true');
+
+    // Add buildCSSClass values to the button, not the wrapper
+    const buttonClass = Button.prototype.buildCSSClass();
+    this.menuButton_.el_.className = this.buildCSSClass() + ' ' + buttonClass;
+    this.menuButton_.removeClass('vjs-control');
+    this.addChild(this.menuButton_);
+    this.update();
+    this.enabled_ = true;
+    const handleClick = e => this.handleClick(e);
+    this.handleMenuKeyUp_ = e => this.handleMenuKeyUp(e);
+    this.on(this.menuButton_, 'tap', handleClick);
+    this.on(this.menuButton_, 'click', handleClick);
+    this.on(this.menuButton_, 'keydown', e => this.handleKeyDown(e));
+    this.on(this.menuButton_, 'mouseenter', () => {
+      this.addClass('vjs-hover');
+      this.menu.show();
+      on(document, 'keyup', this.handleMenuKeyUp_);
+    });
+    this.on('mouseleave', e => this.handleMouseLeave(e));
+    this.on('keydown', e => this.handleSubmenuKeyDown(e));
+  }
+
+  /**
+   * Update the menu based on the current state of its items.
+   */
+  update() {
+    const menu = this.createMenu();
+    if (this.menu) {
+      this.menu.dispose();
+      this.removeChild(this.menu);
+    }
+    this.menu = menu;
+    this.addChild(menu);
+
+    /**
+     * Track the state of the menu button
+     *
+     * @type {Boolean}
+     * @private
+     */
+    this.buttonPressed_ = false;
+    this.menuButton_.el_.setAttribute('aria-expanded', 'false');
+    if (this.items && this.items.length <= this.hideThreshold_) {
+      this.hide();
+      this.menu.contentEl_.removeAttribute('role');
+    } else {
+      this.show();
+      this.menu.contentEl_.setAttribute('role', 'menu');
+    }
+  }
+
+  /**
+   * Create the menu and add all items to it.
+   *
+   * @return {Menu}
+   *         The constructed menu
+   */
+  createMenu() {
+    const menu = new Menu(this.player_, {
+      menuButton: this
+    });
+
+    /**
+     * Hide the menu if the number of items is less than or equal to this threshold. This defaults
+     * to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list
+     * it here because every time we run `createMenu` we need to reset the value.
+     *
+     * @protected
+     * @type {Number}
+     */
+    this.hideThreshold_ = 0;
+
+    // Add a title list item to the top
+    if (this.options_.title) {
+      const titleEl = createEl('li', {
+        className: 'vjs-menu-title',
+        textContent: toTitleCase$1(this.options_.title),
+        tabIndex: -1
+      });
+      const titleComponent = new Component$1(this.player_, {
+        el: titleEl
+      });
+      menu.addItem(titleComponent);
+    }
+    this.items = this.createItems();
+    if (this.items) {
+      // Add menu items to the menu
+      for (let i = 0; i < this.items.length; i++) {
+        menu.addItem(this.items[i]);
+      }
+    }
+    return menu;
+  }
+
+  /**
+   * Create the list of menu items. Specific to each subclass.
+   *
+   * @abstract
+   */
+  createItems() {}
+
+  /**
+   * Create the `MenuButtons`s DOM element.
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: this.buildWrapperCSSClass()
+    }, {});
+  }
+
+  /**
+   * Overwrites the `setIcon` method from `Component`.
+   * In this case, we want the icon to be appended to the menuButton.
+   *
+   * @param {string} name
+   *         The icon name to be added.
+   */
+  setIcon(name) {
+    super.setIcon(name, this.menuButton_.el_);
+  }
+
+  /**
+   * Allow sub components to stack CSS class names for the wrapper element
+   *
+   * @return {string}
+   *         The constructed wrapper DOM `className`
+   */
+  buildWrapperCSSClass() {
+    let menuButtonClass = 'vjs-menu-button';
+
+    // If the inline option is passed, we want to use different styles altogether.
+    if (this.options_.inline === true) {
+      menuButtonClass += '-inline';
+    } else {
+      menuButtonClass += '-popup';
+    }
+
+    // TODO: Fix the CSS so that this isn't necessary
+    const buttonClass = Button.prototype.buildCSSClass();
+    return `vjs-menu-button ${menuButtonClass} ${buttonClass} ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    let menuButtonClass = 'vjs-menu-button';
+
+    // If the inline option is passed, we want to use different styles altogether.
+    if (this.options_.inline === true) {
+      menuButtonClass += '-inline';
+    } else {
+      menuButtonClass += '-popup';
+    }
+    return `vjs-menu-button ${menuButtonClass} ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Get or set the localized control text that will be used for accessibility.
+   *
+   * > NOTE: This will come from the internal `menuButton_` element.
+   *
+   * @param {string} [text]
+   *        Control text for element.
+   *
+   * @param {Element} [el=this.menuButton_.el()]
+   *        Element to set the title on.
+   *
+   * @return {string}
+   *         - The control text when getting
+   */
+  controlText(text, el = this.menuButton_.el()) {
+    return this.menuButton_.controlText(text, el);
+  }
+
+  /**
+   * Dispose of the `menu-button` and all child components.
+   */
+  dispose() {
+    this.handleMouseLeave();
+    super.dispose();
+  }
+
+  /**
+   * Handle a click on a `MenuButton`.
+   * See {@link ClickableComponent#handleClick} for instances where this is called.
+   *
+   * @param {Event} event
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    if (this.buttonPressed_) {
+      this.unpressButton();
+    } else {
+      this.pressButton();
+    }
+  }
+
+  /**
+   * Handle `mouseleave` for `MenuButton`.
+   *
+   * @param {Event} event
+   *        The `mouseleave` event that caused this function to be called.
+   *
+   * @listens mouseleave
+   */
+  handleMouseLeave(event) {
+    this.removeClass('vjs-hover');
+    off(document, 'keyup', this.handleMenuKeyUp_);
+  }
+
+  /**
+   * Set the focus to the actual button, not to this element
+   */
+  focus() {
+    this.menuButton_.focus();
+  }
+
+  /**
+   * Remove the focus from the actual button, not this element
+   */
+  blur() {
+    this.menuButton_.blur();
+  }
+
+  /**
+   * Handle tab, escape, down arrow, and up arrow keys for `MenuButton`. See
+   * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+   *
+   * @param {Event} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Escape or Tab unpress the 'button'
+    if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+      if (this.buttonPressed_) {
+        this.unpressButton();
+      }
+
+      // Don't preventDefault for Tab key - we still want to lose focus
+      if (!keycode.isEventKey(event, 'Tab')) {
+        event.preventDefault();
+        // Set focus back to the menu button's button
+        this.menuButton_.focus();
+      }
+      // Up Arrow or Down Arrow also 'press' the button to open the menu
+    } else if (keycode.isEventKey(event, 'Up') || keycode.isEventKey(event, 'Down')) {
+      if (!this.buttonPressed_) {
+        event.preventDefault();
+        this.pressButton();
+      }
+    }
+  }
+
+  /**
+   * Handle a `keyup` event on a `MenuButton`. The listener for this is added in
+   * the constructor.
+   *
+   * @param {Event} event
+   *        Key press event
+   *
+   * @listens keyup
+   */
+  handleMenuKeyUp(event) {
+    // Escape hides popup menu
+    if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+      this.removeClass('vjs-hover');
+    }
+  }
+
+  /**
+   * This method name now delegates to `handleSubmenuKeyDown`. This means
+   * anyone calling `handleSubmenuKeyPress` will not see their method calls
+   * stop working.
+   *
+   * @param {Event} event
+   *        The event that caused this function to be called.
+   */
+  handleSubmenuKeyPress(event) {
+    this.handleSubmenuKeyDown(event);
+  }
+
+  /**
+   * Handle a `keydown` event on a sub-menu. The listener for this is added in
+   * the constructor.
+   *
+   * @param {Event} event
+   *        Key press event
+   *
+   * @listens keydown
+   */
+  handleSubmenuKeyDown(event) {
+    // Escape or Tab unpress the 'button'
+    if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+      if (this.buttonPressed_) {
+        this.unpressButton();
+      }
+      // Don't preventDefault for Tab key - we still want to lose focus
+      if (!keycode.isEventKey(event, 'Tab')) {
+        event.preventDefault();
+        // Set focus back to the menu button's button
+        this.menuButton_.focus();
+      }
+    }
+  }
+
+  /**
+   * Put the current `MenuButton` into a pressed state.
+   */
+  pressButton() {
+    if (this.enabled_) {
+      this.buttonPressed_ = true;
+      this.menu.show();
+      this.menu.lockShowing();
+      this.menuButton_.el_.setAttribute('aria-expanded', 'true');
+
+      // set the focus into the submenu, except on iOS where it is resulting in
+      // undesired scrolling behavior when the player is in an iframe
+      if (IS_IOS && isInFrame()) {
+        // Return early so that the menu isn't focused
+        return;
+      }
+      this.menu.focus();
+    }
+  }
+
+  /**
+   * Take the current `MenuButton` out of a pressed state.
+   */
+  unpressButton() {
+    if (this.enabled_) {
+      this.buttonPressed_ = false;
+      this.menu.unlockShowing();
+      this.menu.hide();
+      this.menuButton_.el_.setAttribute('aria-expanded', 'false');
+    }
+  }
+
+  /**
+   * Disable the `MenuButton`. Don't allow it to be clicked.
+   */
+  disable() {
+    this.unpressButton();
+    this.enabled_ = false;
+    this.addClass('vjs-disabled');
+    this.menuButton_.disable();
+  }
+
+  /**
+   * Enable the `MenuButton`. Allow it to be clicked.
+   */
+  enable() {
+    this.enabled_ = true;
+    this.removeClass('vjs-disabled');
+    this.menuButton_.enable();
+  }
+}
+Component$1.registerComponent('MenuButton', MenuButton);
+
+/**
+ * @file track-button.js
+ */
+
+/**
+ * The base class for buttons that toggle specific  track types (e.g. subtitles).
+ *
+ * @extends MenuButton
+ */
+class TrackButton extends MenuButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    const tracks = options.tracks;
+    super(player, options);
+    if (this.items.length <= 1) {
+      this.hide();
+    }
+    if (!tracks) {
+      return;
+    }
+    const updateHandler = bind_(this, this.update);
+    tracks.addEventListener('removetrack', updateHandler);
+    tracks.addEventListener('addtrack', updateHandler);
+    tracks.addEventListener('labelchange', updateHandler);
+    this.player_.on('ready', updateHandler);
+    this.player_.on('dispose', function () {
+      tracks.removeEventListener('removetrack', updateHandler);
+      tracks.removeEventListener('addtrack', updateHandler);
+      tracks.removeEventListener('labelchange', updateHandler);
+    });
+  }
+}
+Component$1.registerComponent('TrackButton', TrackButton);
+
+/**
+ * @file menu-keys.js
+ */
+
+/**
+  * All keys used for operation of a menu (`MenuButton`, `Menu`, and `MenuItem`)
+  * Note that 'Enter' and 'Space' are not included here (otherwise they would
+  * prevent the `MenuButton` and `MenuItem` from being keyboard-clickable)
+ *
+  * @typedef MenuKeys
+  * @array
+  */
+const MenuKeys = ['Tab', 'Esc', 'Up', 'Down', 'Right', 'Left'];
+
+/**
+ * @file menu-item.js
+ */
+
+/**
+ * The component for a menu item. `<li>`
+ *
+ * @extends ClickableComponent
+ */
+class MenuItem extends ClickableComponent {
+  /**
+   * Creates an instance of the this class.
+   *
+   * @param { import('../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of player options.
+   *
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.selectable = options.selectable;
+    this.isSelected_ = options.selected || false;
+    this.multiSelectable = options.multiSelectable;
+    this.selected(this.isSelected_);
+    if (this.selectable) {
+      if (this.multiSelectable) {
+        this.el_.setAttribute('role', 'menuitemcheckbox');
+      } else {
+        this.el_.setAttribute('role', 'menuitemradio');
+      }
+    } else {
+      this.el_.setAttribute('role', 'menuitem');
+    }
+  }
+
+  /**
+   * Create the `MenuItem's DOM element
+   *
+   * @param {string} [type=li]
+   *        Element's node type, not actually used, always set to `li`.
+   *
+   * @param {Object} [props={}]
+   *        An object of properties that should be set on the element
+   *
+   * @param {Object} [attrs={}]
+   *        An object of attributes that should be set on the element
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl(type, props, attrs) {
+    // The control is textual, not just an icon
+    this.nonIconControl = true;
+    const el = super.createEl('li', Object.assign({
+      className: 'vjs-menu-item',
+      tabIndex: -1
+    }, props), attrs);
+
+    // swap icon with menu item text.
+    const menuItemEl = createEl('span', {
+      className: 'vjs-menu-item-text',
+      textContent: this.localize(this.options_.label)
+    });
+
+    // If using SVG icons, the element with vjs-icon-placeholder will be added separately.
+    if (this.player_.options_.experimentalSvgIcons) {
+      el.appendChild(menuItemEl);
+    } else {
+      el.replaceChild(menuItemEl, el.querySelector('.vjs-icon-placeholder'));
+    }
+    return el;
+  }
+
+  /**
+   * Ignore keys which are used by the menu, but pass any other ones up. See
+   * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    if (!MenuKeys.some(key => keycode.isEventKey(event, key))) {
+      // Pass keydown handling up for unused keys
+      super.handleKeyDown(event);
+    }
+  }
+
+  /**
+   * Any click on a `MenuItem` puts it into the selected state.
+   * See {@link ClickableComponent#handleClick} for instances where this is called.
+   *
+   * @param {Event} event
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    this.selected(true);
+  }
+
+  /**
+   * Set the state for this menu item as selected or not.
+   *
+   * @param {boolean} selected
+   *        if the menu item is selected or not
+   */
+  selected(selected) {
+    if (this.selectable) {
+      if (selected) {
+        this.addClass('vjs-selected');
+        this.el_.setAttribute('aria-checked', 'true');
+        // aria-checked isn't fully supported by browsers/screen readers,
+        // so indicate selected state to screen reader in the control text.
+        this.controlText(', selected');
+        this.isSelected_ = true;
+      } else {
+        this.removeClass('vjs-selected');
+        this.el_.setAttribute('aria-checked', 'false');
+        // Indicate un-selected state to screen reader
+        this.controlText('');
+        this.isSelected_ = false;
+      }
+    }
+  }
+}
+Component$1.registerComponent('MenuItem', MenuItem);
+
+/**
+ * @file text-track-menu-item.js
+ */
+
+/**
+ * The specific menu item type for selecting a language within a text track kind
+ *
+ * @extends MenuItem
+ */
+class TextTrackMenuItem extends MenuItem {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    const track = options.track;
+    const tracks = player.textTracks();
+
+    // Modify options for parent MenuItem class's init.
+    options.label = track.label || track.language || 'Unknown';
+    options.selected = track.mode === 'showing';
+    super(player, options);
+    this.track = track;
+    // Determine the relevant kind(s) of tracks for this component and filter
+    // out empty kinds.
+    this.kinds = (options.kinds || [options.kind || this.track.kind]).filter(Boolean);
+    const changeHandler = (...args) => {
+      this.handleTracksChange.apply(this, args);
+    };
+    const selectedLanguageChangeHandler = (...args) => {
+      this.handleSelectedLanguageChange.apply(this, args);
+    };
+    player.on(['loadstart', 'texttrackchange'], changeHandler);
+    tracks.addEventListener('change', changeHandler);
+    tracks.addEventListener('selectedlanguagechange', selectedLanguageChangeHandler);
+    this.on('dispose', function () {
+      player.off(['loadstart', 'texttrackchange'], changeHandler);
+      tracks.removeEventListener('change', changeHandler);
+      tracks.removeEventListener('selectedlanguagechange', selectedLanguageChangeHandler);
+    });
+
+    // iOS7 doesn't dispatch change events to TextTrackLists when an
+    // associated track's mode changes. Without something like
+    // Object.observe() (also not present on iOS7), it's not
+    // possible to detect changes to the mode attribute and polyfill
+    // the change event. As a poor substitute, we manually dispatch
+    // change events whenever the controls modify the mode.
+    if (tracks.onchange === undefined) {
+      let event;
+      this.on(['tap', 'click'], function () {
+        if (typeof window$1.Event !== 'object') {
+          // Android 2.3 throws an Illegal Constructor error for window.Event
+          try {
+            event = new window$1.Event('change');
+          } catch (err) {
+            // continue regardless of error
+          }
+        }
+        if (!event) {
+          event = document.createEvent('Event');
+          event.initEvent('change', true, true);
+        }
+        tracks.dispatchEvent(event);
+      });
+    }
+
+    // set the default state based on current tracks
+    this.handleTracksChange();
+  }
+
+  /**
+   * This gets called when an `TextTrackMenuItem` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} event
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    const referenceTrack = this.track;
+    const tracks = this.player_.textTracks();
+    super.handleClick(event);
+    if (!tracks) {
+      return;
+    }
+    for (let i = 0; i < tracks.length; i++) {
+      const track = tracks[i];
+
+      // If the track from the text tracks list is not of the right kind,
+      // skip it. We do not want to affect tracks of incompatible kind(s).
+      if (this.kinds.indexOf(track.kind) === -1) {
+        continue;
+      }
+
+      // If this text track is the component's track and it is not showing,
+      // set it to showing.
+      if (track === referenceTrack) {
+        if (track.mode !== 'showing') {
+          track.mode = 'showing';
+        }
+
+        // If this text track is not the component's track and it is not
+        // disabled, set it to disabled.
+      } else if (track.mode !== 'disabled') {
+        track.mode = 'disabled';
+      }
+    }
+  }
+
+  /**
+   * Handle text track list change
+   *
+   * @param {Event} event
+   *        The `change` event that caused this function to be called.
+   *
+   * @listens TextTrackList#change
+   */
+  handleTracksChange(event) {
+    const shouldBeSelected = this.track.mode === 'showing';
+
+    // Prevent redundant selected() calls because they may cause
+    // screen readers to read the appended control text unnecessarily
+    if (shouldBeSelected !== this.isSelected_) {
+      this.selected(shouldBeSelected);
+    }
+  }
+  handleSelectedLanguageChange(event) {
+    if (this.track.mode === 'showing') {
+      const selectedLanguage = this.player_.cache_.selectedLanguage;
+
+      // Don't replace the kind of track across the same language
+      if (selectedLanguage && selectedLanguage.enabled && selectedLanguage.language === this.track.language && selectedLanguage.kind !== this.track.kind) {
+        return;
+      }
+      this.player_.cache_.selectedLanguage = {
+        enabled: true,
+        language: this.track.language,
+        kind: this.track.kind
+      };
+    }
+  }
+  dispose() {
+    // remove reference to track object on dispose
+    this.track = null;
+    super.dispose();
+  }
+}
+Component$1.registerComponent('TextTrackMenuItem', TextTrackMenuItem);
+
+/**
+ * @file off-text-track-menu-item.js
+ */
+
+/**
+ * A special menu item for turning off a specific type of text track
+ *
+ * @extends TextTrackMenuItem
+ */
+class OffTextTrackMenuItem extends TextTrackMenuItem {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    // Create pseudo track info
+    // Requires options['kind']
+    options.track = {
+      player,
+      // it is no longer necessary to store `kind` or `kinds` on the track itself
+      // since they are now stored in the `kinds` property of all instances of
+      // TextTrackMenuItem, but this will remain for backwards compatibility
+      kind: options.kind,
+      kinds: options.kinds,
+      default: false,
+      mode: 'disabled'
+    };
+    if (!options.kinds) {
+      options.kinds = [options.kind];
+    }
+    if (options.label) {
+      options.track.label = options.label;
+    } else {
+      options.track.label = options.kinds.join(' and ') + ' off';
+    }
+
+    // MenuItem is selectable
+    options.selectable = true;
+    // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+    options.multiSelectable = false;
+    super(player, options);
+  }
+
+  /**
+   * Handle text track change
+   *
+   * @param {Event} event
+   *        The event that caused this function to run
+   */
+  handleTracksChange(event) {
+    const tracks = this.player().textTracks();
+    let shouldBeSelected = true;
+    for (let i = 0, l = tracks.length; i < l; i++) {
+      const track = tracks[i];
+      if (this.options_.kinds.indexOf(track.kind) > -1 && track.mode === 'showing') {
+        shouldBeSelected = false;
+        break;
+      }
+    }
+
+    // Prevent redundant selected() calls because they may cause
+    // screen readers to read the appended control text unnecessarily
+    if (shouldBeSelected !== this.isSelected_) {
+      this.selected(shouldBeSelected);
+    }
+  }
+  handleSelectedLanguageChange(event) {
+    const tracks = this.player().textTracks();
+    let allHidden = true;
+    for (let i = 0, l = tracks.length; i < l; i++) {
+      const track = tracks[i];
+      if (['captions', 'descriptions', 'subtitles'].indexOf(track.kind) > -1 && track.mode === 'showing') {
+        allHidden = false;
+        break;
+      }
+    }
+    if (allHidden) {
+      this.player_.cache_.selectedLanguage = {
+        enabled: false
+      };
+    }
+  }
+
+  /**
+   * Update control text and label on languagechange
+   */
+  handleLanguagechange() {
+    this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.label);
+    super.handleLanguagechange();
+  }
+}
+Component$1.registerComponent('OffTextTrackMenuItem', OffTextTrackMenuItem);
+
+/**
+ * @file text-track-button.js
+ */
+
+/**
+ * The base class for buttons that toggle specific text track types (e.g. subtitles)
+ *
+ * @extends MenuButton
+ */
+class TextTrackButton extends TrackButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of player options.
+   */
+  constructor(player, options = {}) {
+    options.tracks = player.textTracks();
+    super(player, options);
+  }
+
+  /**
+   * Create a menu item for each text track
+   *
+   * @param {TextTrackMenuItem[]} [items=[]]
+   *        Existing array of items to use during creation
+   *
+   * @return {TextTrackMenuItem[]}
+   *         Array of menu items that were created
+   */
+  createItems(items = [], TrackMenuItem = TextTrackMenuItem) {
+    // Label is an override for the [track] off label
+    // USed to localise captions/subtitles
+    let label;
+    if (this.label_) {
+      label = `${this.label_} off`;
+    }
+    // Add an OFF menu item to turn all tracks off
+    items.push(new OffTextTrackMenuItem(this.player_, {
+      kinds: this.kinds_,
+      kind: this.kind_,
+      label
+    }));
+    this.hideThreshold_ += 1;
+    const tracks = this.player_.textTracks();
+    if (!Array.isArray(this.kinds_)) {
+      this.kinds_ = [this.kind_];
+    }
+    for (let i = 0; i < tracks.length; i++) {
+      const track = tracks[i];
+
+      // only add tracks that are of an appropriate kind and have a label
+      if (this.kinds_.indexOf(track.kind) > -1) {
+        const item = new TrackMenuItem(this.player_, {
+          track,
+          kinds: this.kinds_,
+          kind: this.kind_,
+          // MenuItem is selectable
+          selectable: true,
+          // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+          multiSelectable: false
+        });
+        item.addClass(`vjs-${track.kind}-menu-item`);
+        items.push(item);
+      }
+    }
+    return items;
+  }
+}
+Component$1.registerComponent('TextTrackButton', TextTrackButton);
+
+/**
+ * @file chapters-track-menu-item.js
+ */
+
+/**
+ * The chapter track menu item
+ *
+ * @extends MenuItem
+ */
+class ChaptersTrackMenuItem extends MenuItem {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    const track = options.track;
+    const cue = options.cue;
+    const currentTime = player.currentTime();
+
+    // Modify options for parent MenuItem class's init.
+    options.selectable = true;
+    options.multiSelectable = false;
+    options.label = cue.text;
+    options.selected = cue.startTime <= currentTime && currentTime < cue.endTime;
+    super(player, options);
+    this.track = track;
+    this.cue = cue;
+  }
+
+  /**
+   * This gets called when an `ChaptersTrackMenuItem` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    super.handleClick();
+    this.player_.currentTime(this.cue.startTime);
+  }
+}
+Component$1.registerComponent('ChaptersTrackMenuItem', ChaptersTrackMenuItem);
+
+/**
+ * @file chapters-button.js
+ */
+
+/**
+ * The button component for toggling and selecting chapters
+ * Chapters act much differently than other text tracks
+ * Cues are navigation vs. other tracks of alternative languages
+ *
+ * @extends TextTrackButton
+ */
+class ChaptersButton extends TextTrackButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Function} [ready]
+   *        The function to call when this function is ready.
+   */
+  constructor(player, options, ready) {
+    super(player, options, ready);
+    this.setIcon('chapters');
+    this.selectCurrentItem_ = () => {
+      this.items.forEach(item => {
+        item.selected(this.track_.activeCues[0] === item.cue);
+      });
+    };
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-chapters-button ${super.buildCSSClass()}`;
+  }
+  buildWrapperCSSClass() {
+    return `vjs-chapters-button ${super.buildWrapperCSSClass()}`;
+  }
+
+  /**
+   * Update the menu based on the current state of its items.
+   *
+   * @param {Event} [event]
+   *        An event that triggered this function to run.
+   *
+   * @listens TextTrackList#addtrack
+   * @listens TextTrackList#removetrack
+   * @listens TextTrackList#change
+   */
+  update(event) {
+    if (event && event.track && event.track.kind !== 'chapters') {
+      return;
+    }
+    const track = this.findChaptersTrack();
+    if (track !== this.track_) {
+      this.setTrack(track);
+      super.update();
+    } else if (!this.items || track && track.cues && track.cues.length !== this.items.length) {
+      // Update the menu initially or if the number of cues has changed since set
+      super.update();
+    }
+  }
+
+  /**
+   * Set the currently selected track for the chapters button.
+   *
+   * @param {TextTrack} track
+   *        The new track to select. Nothing will change if this is the currently selected
+   *        track.
+   */
+  setTrack(track) {
+    if (this.track_ === track) {
+      return;
+    }
+    if (!this.updateHandler_) {
+      this.updateHandler_ = this.update.bind(this);
+    }
+
+    // here this.track_ refers to the old track instance
+    if (this.track_) {
+      const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
+      if (remoteTextTrackEl) {
+        remoteTextTrackEl.removeEventListener('load', this.updateHandler_);
+      }
+      this.track_.removeEventListener('cuechange', this.selectCurrentItem_);
+      this.track_ = null;
+    }
+    this.track_ = track;
+
+    // here this.track_ refers to the new track instance
+    if (this.track_) {
+      this.track_.mode = 'hidden';
+      const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
+      if (remoteTextTrackEl) {
+        remoteTextTrackEl.addEventListener('load', this.updateHandler_);
+      }
+      this.track_.addEventListener('cuechange', this.selectCurrentItem_);
+    }
+  }
+
+  /**
+   * Find the track object that is currently in use by this ChaptersButton
+   *
+   * @return {TextTrack|undefined}
+   *         The current track or undefined if none was found.
+   */
+  findChaptersTrack() {
+    const tracks = this.player_.textTracks() || [];
+    for (let i = tracks.length - 1; i >= 0; i--) {
+      // We will always choose the last track as our chaptersTrack
+      const track = tracks[i];
+      if (track.kind === this.kind_) {
+        return track;
+      }
+    }
+  }
+
+  /**
+   * Get the caption for the ChaptersButton based on the track label. This will also
+   * use the current tracks localized kind as a fallback if a label does not exist.
+   *
+   * @return {string}
+   *         The tracks current label or the localized track kind.
+   */
+  getMenuCaption() {
+    if (this.track_ && this.track_.label) {
+      return this.track_.label;
+    }
+    return this.localize(toTitleCase$1(this.kind_));
+  }
+
+  /**
+   * Create menu from chapter track
+   *
+   * @return { import('../../menu/menu').default }
+   *         New menu for the chapter buttons
+   */
+  createMenu() {
+    this.options_.title = this.getMenuCaption();
+    return super.createMenu();
+  }
+
+  /**
+   * Create a menu item for each text track
+   *
+   * @return  { import('./text-track-menu-item').default[] }
+   *         Array of menu items
+   */
+  createItems() {
+    const items = [];
+    if (!this.track_) {
+      return items;
+    }
+    const cues = this.track_.cues;
+    if (!cues) {
+      return items;
+    }
+    for (let i = 0, l = cues.length; i < l; i++) {
+      const cue = cues[i];
+      const mi = new ChaptersTrackMenuItem(this.player_, {
+        track: this.track_,
+        cue
+      });
+      items.push(mi);
+    }
+    return items;
+  }
+}
+
+/**
+ * `kind` of TextTrack to look for to associate it with this menu.
+ *
+ * @type {string}
+ * @private
+ */
+ChaptersButton.prototype.kind_ = 'chapters';
+
+/**
+ * The text that should display over the `ChaptersButton`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+ChaptersButton.prototype.controlText_ = 'Chapters';
+Component$1.registerComponent('ChaptersButton', ChaptersButton);
+
+/**
+ * @file descriptions-button.js
+ */
+
+/**
+ * The button component for toggling and selecting descriptions
+ *
+ * @extends TextTrackButton
+ */
+class DescriptionsButton extends TextTrackButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Function} [ready]
+   *        The function to call when this component is ready.
+   */
+  constructor(player, options, ready) {
+    super(player, options, ready);
+    this.setIcon('audio-description');
+    const tracks = player.textTracks();
+    const changeHandler = bind_(this, this.handleTracksChange);
+    tracks.addEventListener('change', changeHandler);
+    this.on('dispose', function () {
+      tracks.removeEventListener('change', changeHandler);
+    });
+  }
+
+  /**
+   * Handle text track change
+   *
+   * @param {Event} event
+   *        The event that caused this function to run
+   *
+   * @listens TextTrackList#change
+   */
+  handleTracksChange(event) {
+    const tracks = this.player().textTracks();
+    let disabled = false;
+
+    // Check whether a track of a different kind is showing
+    for (let i = 0, l = tracks.length; i < l; i++) {
+      const track = tracks[i];
+      if (track.kind !== this.kind_ && track.mode === 'showing') {
+        disabled = true;
+        break;
+      }
+    }
+
+    // If another track is showing, disable this menu button
+    if (disabled) {
+      this.disable();
+    } else {
+      this.enable();
+    }
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-descriptions-button ${super.buildCSSClass()}`;
+  }
+  buildWrapperCSSClass() {
+    return `vjs-descriptions-button ${super.buildWrapperCSSClass()}`;
+  }
+}
+
+/**
+ * `kind` of TextTrack to look for to associate it with this menu.
+ *
+ * @type {string}
+ * @private
+ */
+DescriptionsButton.prototype.kind_ = 'descriptions';
+
+/**
+ * The text that should display over the `DescriptionsButton`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+DescriptionsButton.prototype.controlText_ = 'Descriptions';
+Component$1.registerComponent('DescriptionsButton', DescriptionsButton);
+
+/**
+ * @file subtitles-button.js
+ */
+
+/**
+ * The button component for toggling and selecting subtitles
+ *
+ * @extends TextTrackButton
+ */
+class SubtitlesButton extends TextTrackButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Function} [ready]
+   *        The function to call when this component is ready.
+   */
+  constructor(player, options, ready) {
+    super(player, options, ready);
+    this.setIcon('subtitles');
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-subtitles-button ${super.buildCSSClass()}`;
+  }
+  buildWrapperCSSClass() {
+    return `vjs-subtitles-button ${super.buildWrapperCSSClass()}`;
+  }
+}
+
+/**
+ * `kind` of TextTrack to look for to associate it with this menu.
+ *
+ * @type {string}
+ * @private
+ */
+SubtitlesButton.prototype.kind_ = 'subtitles';
+
+/**
+ * The text that should display over the `SubtitlesButton`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+SubtitlesButton.prototype.controlText_ = 'Subtitles';
+Component$1.registerComponent('SubtitlesButton', SubtitlesButton);
+
+/**
+ * @file caption-settings-menu-item.js
+ */
+
+/**
+ * The menu item for caption track settings menu
+ *
+ * @extends TextTrackMenuItem
+ */
+class CaptionSettingsMenuItem extends TextTrackMenuItem {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    options.track = {
+      player,
+      kind: options.kind,
+      label: options.kind + ' settings',
+      selectable: false,
+      default: false,
+      mode: 'disabled'
+    };
+
+    // CaptionSettingsMenuItem has no concept of 'selected'
+    options.selectable = false;
+    options.name = 'CaptionSettingsMenuItem';
+    super(player, options);
+    this.addClass('vjs-texttrack-settings');
+    this.controlText(', opens ' + options.kind + ' settings dialog');
+  }
+
+  /**
+   * This gets called when an `CaptionSettingsMenuItem` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    this.player().getChild('textTrackSettings').open();
+  }
+
+  /**
+   * Update control text and label on languagechange
+   */
+  handleLanguagechange() {
+    this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.kind + ' settings');
+    super.handleLanguagechange();
+  }
+}
+Component$1.registerComponent('CaptionSettingsMenuItem', CaptionSettingsMenuItem);
+
+/**
+ * @file captions-button.js
+ */
+
+/**
+ * The button component for toggling and selecting captions
+ *
+ * @extends TextTrackButton
+ */
+class CaptionsButton extends TextTrackButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Function} [ready]
+   *        The function to call when this component is ready.
+   */
+  constructor(player, options, ready) {
+    super(player, options, ready);
+    this.setIcon('captions');
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-captions-button ${super.buildCSSClass()}`;
+  }
+  buildWrapperCSSClass() {
+    return `vjs-captions-button ${super.buildWrapperCSSClass()}`;
+  }
+
+  /**
+   * Create caption menu items
+   *
+   * @return {CaptionSettingsMenuItem[]}
+   *         The array of current menu items.
+   */
+  createItems() {
+    const items = [];
+    if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks) && this.player().getChild('textTrackSettings')) {
+      items.push(new CaptionSettingsMenuItem(this.player_, {
+        kind: this.kind_
+      }));
+      this.hideThreshold_ += 1;
+    }
+    return super.createItems(items);
+  }
+}
+
+/**
+ * `kind` of TextTrack to look for to associate it with this menu.
+ *
+ * @type {string}
+ * @private
+ */
+CaptionsButton.prototype.kind_ = 'captions';
+
+/**
+ * The text that should display over the `CaptionsButton`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+CaptionsButton.prototype.controlText_ = 'Captions';
+Component$1.registerComponent('CaptionsButton', CaptionsButton);
+
+/**
+ * @file subs-caps-menu-item.js
+ */
+
+/**
+ * SubsCapsMenuItem has an [cc] icon to distinguish captions from subtitles
+ * in the SubsCapsMenu.
+ *
+ * @extends TextTrackMenuItem
+ */
+class SubsCapsMenuItem extends TextTrackMenuItem {
+  createEl(type, props, attrs) {
+    const el = super.createEl(type, props, attrs);
+    const parentSpan = el.querySelector('.vjs-menu-item-text');
+    if (this.options_.track.kind === 'captions') {
+      if (this.player_.options_.experimentalSvgIcons) {
+        this.setIcon('captions', el);
+      } else {
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+      }
+      parentSpan.appendChild(createEl('span', {
+        className: 'vjs-control-text',
+        // space added as the text will visually flow with the
+        // label
+        textContent: ` ${this.localize('Captions')}`
+      }));
+    }
+    return el;
+  }
+}
+Component$1.registerComponent('SubsCapsMenuItem', SubsCapsMenuItem);
+
+/**
+ * @file sub-caps-button.js
+ */
+
+/**
+ * The button component for toggling and selecting captions and/or subtitles
+ *
+ * @extends TextTrackButton
+ */
+class SubsCapsButton extends TextTrackButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Function} [ready]
+   *        The function to call when this component is ready.
+   */
+  constructor(player, options = {}) {
+    super(player, options);
+
+    // Although North America uses "captions" in most cases for
+    // "captions and subtitles" other locales use "subtitles"
+    this.label_ = 'subtitles';
+    this.setIcon('subtitles');
+    if (['en', 'en-us', 'en-ca', 'fr-ca'].indexOf(this.player_.language_) > -1) {
+      this.label_ = 'captions';
+      this.setIcon('captions');
+    }
+    this.menuButton_.controlText(toTitleCase$1(this.label_));
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-subs-caps-button ${super.buildCSSClass()}`;
+  }
+  buildWrapperCSSClass() {
+    return `vjs-subs-caps-button ${super.buildWrapperCSSClass()}`;
+  }
+
+  /**
+   * Create caption/subtitles menu items
+   *
+   * @return {CaptionSettingsMenuItem[]}
+   *         The array of current menu items.
+   */
+  createItems() {
+    let items = [];
+    if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks) && this.player().getChild('textTrackSettings')) {
+      items.push(new CaptionSettingsMenuItem(this.player_, {
+        kind: this.label_
+      }));
+      this.hideThreshold_ += 1;
+    }
+    items = super.createItems(items, SubsCapsMenuItem);
+    return items;
+  }
+}
+
+/**
+ * `kind`s of TextTrack to look for to associate it with this menu.
+ *
+ * @type {array}
+ * @private
+ */
+SubsCapsButton.prototype.kinds_ = ['captions', 'subtitles'];
+
+/**
+ * The text that should display over the `SubsCapsButton`s controls.
+ *
+ *
+ * @type {string}
+ * @protected
+ */
+SubsCapsButton.prototype.controlText_ = 'Subtitles';
+Component$1.registerComponent('SubsCapsButton', SubsCapsButton);
+
+/**
+ * @file audio-track-menu-item.js
+ */
+
+/**
+ * An {@link AudioTrack} {@link MenuItem}
+ *
+ * @extends MenuItem
+ */
+class AudioTrackMenuItem extends MenuItem {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    const track = options.track;
+    const tracks = player.audioTracks();
+
+    // Modify options for parent MenuItem class's init.
+    options.label = track.label || track.language || 'Unknown';
+    options.selected = track.enabled;
+    super(player, options);
+    this.track = track;
+    this.addClass(`vjs-${track.kind}-menu-item`);
+    const changeHandler = (...args) => {
+      this.handleTracksChange.apply(this, args);
+    };
+    tracks.addEventListener('change', changeHandler);
+    this.on('dispose', () => {
+      tracks.removeEventListener('change', changeHandler);
+    });
+  }
+  createEl(type, props, attrs) {
+    const el = super.createEl(type, props, attrs);
+    const parentSpan = el.querySelector('.vjs-menu-item-text');
+    if (['main-desc', 'description'].indexOf(this.options_.track.kind) >= 0) {
+      parentSpan.appendChild(createEl('span', {
+        className: 'vjs-icon-placeholder'
+      }, {
+        'aria-hidden': true
+      }));
+      parentSpan.appendChild(createEl('span', {
+        className: 'vjs-control-text',
+        textContent: ' ' + this.localize('Descriptions')
+      }));
+    }
+    return el;
+  }
+
+  /**
+   * This gets called when an `AudioTrackMenuItem is "clicked". See {@link ClickableComponent}
+   * for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    super.handleClick(event);
+
+    // the audio track list will automatically toggle other tracks
+    // off for us.
+    this.track.enabled = true;
+
+    // when native audio tracks are used, we want to make sure that other tracks are turned off
+    if (this.player_.tech_.featuresNativeAudioTracks) {
+      const tracks = this.player_.audioTracks();
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+
+        // skip the current track since we enabled it above
+        if (track === this.track) {
+          continue;
+        }
+        track.enabled = track === this.track;
+      }
+    }
+  }
+
+  /**
+   * Handle any {@link AudioTrack} change.
+   *
+   * @param {Event} [event]
+   *        The {@link AudioTrackList#change} event that caused this to run.
+   *
+   * @listens AudioTrackList#change
+   */
+  handleTracksChange(event) {
+    this.selected(this.track.enabled);
+  }
+}
+Component$1.registerComponent('AudioTrackMenuItem', AudioTrackMenuItem);
+
+/**
+ * @file audio-track-button.js
+ */
+
+/**
+ * The base class for buttons that toggle specific {@link AudioTrack} types.
+ *
+ * @extends TrackButton
+ */
+class AudioTrackButton extends TrackButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param {Player} player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options={}]
+   *        The key/value store of player options.
+   */
+  constructor(player, options = {}) {
+    options.tracks = player.audioTracks();
+    super(player, options);
+    this.setIcon('audio');
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-audio-button ${super.buildCSSClass()}`;
+  }
+  buildWrapperCSSClass() {
+    return `vjs-audio-button ${super.buildWrapperCSSClass()}`;
+  }
+
+  /**
+   * Create a menu item for each audio track
+   *
+   * @param {AudioTrackMenuItem[]} [items=[]]
+   *        An array of existing menu items to use.
+   *
+   * @return {AudioTrackMenuItem[]}
+   *         An array of menu items
+   */
+  createItems(items = []) {
+    // if there's only one audio track, there no point in showing it
+    this.hideThreshold_ = 1;
+    const tracks = this.player_.audioTracks();
+    for (let i = 0; i < tracks.length; i++) {
+      const track = tracks[i];
+      items.push(new AudioTrackMenuItem(this.player_, {
+        track,
+        // MenuItem is selectable
+        selectable: true,
+        // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+        multiSelectable: false
+      }));
+    }
+    return items;
+  }
+}
+
+/**
+ * The text that should display over the `AudioTrackButton`s controls. Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+AudioTrackButton.prototype.controlText_ = 'Audio Track';
+Component$1.registerComponent('AudioTrackButton', AudioTrackButton);
+
+/**
+ * @file playback-rate-menu-item.js
+ */
+
+/**
+ * The specific menu item type for selecting a playback rate.
+ *
+ * @extends MenuItem
+ */
+class PlaybackRateMenuItem extends MenuItem {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    const label = options.rate;
+    const rate = parseFloat(label, 10);
+
+    // Modify options for parent MenuItem class's init.
+    options.label = label;
+    options.selected = rate === player.playbackRate();
+    options.selectable = true;
+    options.multiSelectable = false;
+    super(player, options);
+    this.label = label;
+    this.rate = rate;
+    this.on(player, 'ratechange', e => this.update(e));
+  }
+
+  /**
+   * This gets called when an `PlaybackRateMenuItem` is "clicked". See
+   * {@link ClickableComponent} for more detailed information on what a click can be.
+   *
+   * @param {Event} [event]
+   *        The `keydown`, `tap`, or `click` event that caused this function to be
+   *        called.
+   *
+   * @listens tap
+   * @listens click
+   */
+  handleClick(event) {
+    super.handleClick();
+    this.player().playbackRate(this.rate);
+  }
+
+  /**
+   * Update the PlaybackRateMenuItem when the playbackrate changes.
+   *
+   * @param {Event} [event]
+   *        The `ratechange` event that caused this function to run.
+   *
+   * @listens Player#ratechange
+   */
+  update(event) {
+    this.selected(this.player().playbackRate() === this.rate);
+  }
+}
+
+/**
+ * The text that should display over the `PlaybackRateMenuItem`s controls. Added for localization.
+ *
+ * @type {string}
+ * @private
+ */
+PlaybackRateMenuItem.prototype.contentElType = 'button';
+Component$1.registerComponent('PlaybackRateMenuItem', PlaybackRateMenuItem);
+
+/**
+ * @file playback-rate-menu-button.js
+ */
+
+/**
+ * The component for controlling the playback rate.
+ *
+ * @extends MenuButton
+ */
+class PlaybackRateMenuButton extends MenuButton {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../../player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);
+    this.updateVisibility();
+    this.updateLabel();
+    this.on(player, 'loadstart', e => this.updateVisibility(e));
+    this.on(player, 'ratechange', e => this.updateLabel(e));
+    this.on(player, 'playbackrateschange', e => this.handlePlaybackRateschange(e));
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    const el = super.createEl();
+    this.labelElId_ = 'vjs-playback-rate-value-label-' + this.id_;
+    this.labelEl_ = createEl('div', {
+      className: 'vjs-playback-rate-value',
+      id: this.labelElId_,
+      textContent: '1x'
+    });
+    el.appendChild(this.labelEl_);
+    return el;
+  }
+  dispose() {
+    this.labelEl_ = null;
+    super.dispose();
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-playback-rate ${super.buildCSSClass()}`;
+  }
+  buildWrapperCSSClass() {
+    return `vjs-playback-rate ${super.buildWrapperCSSClass()}`;
+  }
+
+  /**
+   * Create the list of menu items. Specific to each subclass.
+   *
+   */
+  createItems() {
+    const rates = this.playbackRates();
+    const items = [];
+    for (let i = rates.length - 1; i >= 0; i--) {
+      items.push(new PlaybackRateMenuItem(this.player(), {
+        rate: rates[i] + 'x'
+      }));
+    }
+    return items;
+  }
+
+  /**
+   * On playbackrateschange, update the menu to account for the new items.
+   *
+   * @listens Player#playbackrateschange
+   */
+  handlePlaybackRateschange(event) {
+    this.update();
+  }
+
+  /**
+   * Get possible playback rates
+   *
+   * @return {Array}
+   *         All possible playback rates
+   */
+  playbackRates() {
+    const player = this.player();
+    return player.playbackRates && player.playbackRates() || [];
+  }
+
+  /**
+   * Get whether playback rates is supported by the tech
+   * and an array of playback rates exists
+   *
+   * @return {boolean}
+   *         Whether changing playback rate is supported
+   */
+  playbackRateSupported() {
+    return this.player().tech_ && this.player().tech_.featuresPlaybackRate && this.playbackRates() && this.playbackRates().length > 0;
+  }
+
+  /**
+   * Hide playback rate controls when they're no playback rate options to select
+   *
+   * @param {Event} [event]
+   *        The event that caused this function to run.
+   *
+   * @listens Player#loadstart
+   */
+  updateVisibility(event) {
+    if (this.playbackRateSupported()) {
+      this.removeClass('vjs-hidden');
+    } else {
+      this.addClass('vjs-hidden');
+    }
+  }
+
+  /**
+   * Update button label when rate changed
+   *
+   * @param {Event} [event]
+   *        The event that caused this function to run.
+   *
+   * @listens Player#ratechange
+   */
+  updateLabel(event) {
+    if (this.playbackRateSupported()) {
+      this.labelEl_.textContent = this.player().playbackRate() + 'x';
+    }
+  }
+}
+
+/**
+ * The text that should display over the `PlaybackRateMenuButton`s controls.
+ *
+ * Added for localization.
+ *
+ * @type {string}
+ * @protected
+ */
+PlaybackRateMenuButton.prototype.controlText_ = 'Playback Rate';
+Component$1.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton);
+
+/**
+ * @file spacer.js
+ */
+
+/**
+ * Just an empty spacer element that can be used as an append point for plugins, etc.
+ * Also can be used to create space between elements when necessary.
+ *
+ * @extends Component
+ */
+class Spacer extends Component$1 {
+  /**
+  * Builds the default DOM `className`.
+  *
+  * @return {string}
+  *         The DOM `className` for this object.
+  */
+  buildCSSClass() {
+    return `vjs-spacer ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl(tag = 'div', props = {}, attributes = {}) {
+    if (!props.className) {
+      props.className = this.buildCSSClass();
+    }
+    return super.createEl(tag, props, attributes);
+  }
+}
+Component$1.registerComponent('Spacer', Spacer);
+
+/**
+ * @file custom-control-spacer.js
+ */
+
+/**
+ * Spacer specifically meant to be used as an insertion point for new plugins, etc.
+ *
+ * @extends Spacer
+ */
+class CustomControlSpacer extends Spacer {
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-custom-control-spacer ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: this.buildCSSClass(),
+      // No-flex/table-cell mode requires there be some content
+      // in the cell to fill the remaining space of the table.
+      textContent: '\u00a0'
+    });
+  }
+}
+Component$1.registerComponent('CustomControlSpacer', CustomControlSpacer);
+
+/**
+ * @file control-bar.js
+ */
+
+/**
+ * Container of main controls.
+ *
+ * @extends Component
+ */
+class ControlBar extends Component$1 {
+  /**
+   * Create the `Component`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-control-bar',
+      dir: 'ltr'
+    });
+  }
+}
+
+/**
+ * Default options for `ControlBar`
+ *
+ * @type {Object}
+ * @private
+ */
+ControlBar.prototype.options_ = {
+  children: ['playToggle', 'skipBackward', 'skipForward', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'seekToLive', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'pictureInPictureToggle', 'fullscreenToggle']
+};
+Component$1.registerComponent('ControlBar', ControlBar);
+
+/**
+ * @file error-display.js
+ */
+
+/**
+ * A display that indicates an error has occurred. This means that the video
+ * is unplayable.
+ *
+ * @extends ModalDialog
+ */
+class ErrorDisplay extends ModalDialog {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param  { import('./player').default } player
+   *         The `Player` that this class should be attached to.
+   *
+   * @param  {Object} [options]
+   *         The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.on(player, 'error', e => {
+      this.open(e);
+    });
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   *
+   * @deprecated Since version 5.
+   */
+  buildCSSClass() {
+    return `vjs-error-display ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Gets the localized error message based on the `Player`s error.
+   *
+   * @return {string}
+   *         The `Player`s error message localized or an empty string.
+   */
+  content() {
+    const error = this.player().error();
+    return error ? this.localize(error.message) : '';
+  }
+}
+
+/**
+ * The default options for an `ErrorDisplay`.
+ *
+ * @private
+ */
+ErrorDisplay.prototype.options_ = Object.assign({}, ModalDialog.prototype.options_, {
+  pauseOnOpen: false,
+  fillAlways: true,
+  temporary: false,
+  uncloseable: true
+});
+Component$1.registerComponent('ErrorDisplay', ErrorDisplay);
+
+/**
+ * @file text-track-settings.js
+ */
+const LOCAL_STORAGE_KEY$1 = 'vjs-text-track-settings';
+const COLOR_BLACK = ['#000', 'Black'];
+const COLOR_BLUE = ['#00F', 'Blue'];
+const COLOR_CYAN = ['#0FF', 'Cyan'];
+const COLOR_GREEN = ['#0F0', 'Green'];
+const COLOR_MAGENTA = ['#F0F', 'Magenta'];
+const COLOR_RED = ['#F00', 'Red'];
+const COLOR_WHITE = ['#FFF', 'White'];
+const COLOR_YELLOW = ['#FF0', 'Yellow'];
+const OPACITY_OPAQUE = ['1', 'Opaque'];
+const OPACITY_SEMI = ['0.5', 'Semi-Transparent'];
+const OPACITY_TRANS = ['0', 'Transparent'];
+
+// Configuration for the various <select> elements in the DOM of this component.
+//
+// Possible keys include:
+//
+// `default`:
+//   The default option index. Only needs to be provided if not zero.
+// `parser`:
+//   A function which is used to parse the value from the selected option in
+//   a customized way.
+// `selector`:
+//   The selector used to find the associated <select> element.
+const selectConfigs = {
+  backgroundColor: {
+    selector: '.vjs-bg-color > select',
+    id: 'captions-background-color-%s',
+    label: 'Color',
+    options: [COLOR_BLACK, COLOR_WHITE, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
+  },
+  backgroundOpacity: {
+    selector: '.vjs-bg-opacity > select',
+    id: 'captions-background-opacity-%s',
+    label: 'Opacity',
+    options: [OPACITY_OPAQUE, OPACITY_SEMI, OPACITY_TRANS]
+  },
+  color: {
+    selector: '.vjs-text-color > select',
+    id: 'captions-foreground-color-%s',
+    label: 'Color',
+    options: [COLOR_WHITE, COLOR_BLACK, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
+  },
+  edgeStyle: {
+    selector: '.vjs-edge-style > select',
+    id: '%s',
+    label: 'Text Edge Style',
+    options: [['none', 'None'], ['raised', 'Raised'], ['depressed', 'Depressed'], ['uniform', 'Uniform'], ['dropshadow', 'Drop shadow']]
+  },
+  fontFamily: {
+    selector: '.vjs-font-family > select',
+    id: 'captions-font-family-%s',
+    label: 'Font Family',
+    options: [['proportionalSansSerif', 'Proportional Sans-Serif'], ['monospaceSansSerif', 'Monospace Sans-Serif'], ['proportionalSerif', 'Proportional Serif'], ['monospaceSerif', 'Monospace Serif'], ['casual', 'Casual'], ['script', 'Script'], ['small-caps', 'Small Caps']]
+  },
+  fontPercent: {
+    selector: '.vjs-font-percent > select',
+    id: 'captions-font-size-%s',
+    label: 'Font Size',
+    options: [['0.50', '50%'], ['0.75', '75%'], ['1.00', '100%'], ['1.25', '125%'], ['1.50', '150%'], ['1.75', '175%'], ['2.00', '200%'], ['3.00', '300%'], ['4.00', '400%']],
+    default: 2,
+    parser: v => v === '1.00' ? null : Number(v)
+  },
+  textOpacity: {
+    selector: '.vjs-text-opacity > select',
+    id: 'captions-foreground-opacity-%s',
+    label: 'Opacity',
+    options: [OPACITY_OPAQUE, OPACITY_SEMI]
+  },
+  // Options for this object are defined below.
+  windowColor: {
+    selector: '.vjs-window-color > select',
+    id: 'captions-window-color-%s',
+    label: 'Color'
+  },
+  // Options for this object are defined below.
+  windowOpacity: {
+    selector: '.vjs-window-opacity > select',
+    id: 'captions-window-opacity-%s',
+    label: 'Opacity',
+    options: [OPACITY_TRANS, OPACITY_SEMI, OPACITY_OPAQUE]
+  }
+};
+selectConfigs.windowColor.options = selectConfigs.backgroundColor.options;
+
+/**
+ * Get the actual value of an option.
+ *
+ * @param  {string} value
+ *         The value to get
+ *
+ * @param  {Function} [parser]
+ *         Optional function to adjust the value.
+ *
+ * @return {*}
+ *         - Will be `undefined` if no value exists
+ *         - Will be `undefined` if the given value is "none".
+ *         - Will be the actual value otherwise.
+ *
+ * @private
+ */
+function parseOptionValue(value, parser) {
+  if (parser) {
+    value = parser(value);
+  }
+  if (value && value !== 'none') {
+    return value;
+  }
+}
+
+/**
+ * Gets the value of the selected <option> element within a <select> element.
+ *
+ * @param  {Element} el
+ *         the element to look in
+ *
+ * @param  {Function} [parser]
+ *         Optional function to adjust the value.
+ *
+ * @return {*}
+ *         - Will be `undefined` if no value exists
+ *         - Will be `undefined` if the given value is "none".
+ *         - Will be the actual value otherwise.
+ *
+ * @private
+ */
+function getSelectedOptionValue(el, parser) {
+  const value = el.options[el.options.selectedIndex].value;
+  return parseOptionValue(value, parser);
+}
+
+/**
+ * Sets the selected <option> element within a <select> element based on a
+ * given value.
+ *
+ * @param {Element} el
+ *        The element to look in.
+ *
+ * @param {string} value
+ *        the property to look on.
+ *
+ * @param {Function} [parser]
+ *        Optional function to adjust the value before comparing.
+ *
+ * @private
+ */
+function setSelectedOption(el, value, parser) {
+  if (!value) {
+    return;
+  }
+  for (let i = 0; i < el.options.length; i++) {
+    if (parseOptionValue(el.options[i].value, parser) === value) {
+      el.selectedIndex = i;
+      break;
+    }
+  }
+}
+
+/**
+ * Manipulate Text Tracks settings.
+ *
+ * @extends ModalDialog
+ */
+class TextTrackSettings extends ModalDialog {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('../player').default } player
+   *         The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *         The key/value store of player options.
+   */
+  constructor(player, options) {
+    options.temporary = false;
+    super(player, options);
+    this.updateDisplay = this.updateDisplay.bind(this);
+
+    // fill the modal and pretend we have opened it
+    this.fill();
+    this.hasBeenOpened_ = this.hasBeenFilled_ = true;
+    this.endDialog = createEl('p', {
+      className: 'vjs-control-text',
+      textContent: this.localize('End of dialog window.')
+    });
+    this.el().appendChild(this.endDialog);
+    this.setDefaults();
+
+    // Grab `persistTextTrackSettings` from the player options if not passed in child options
+    if (options.persistTextTrackSettings === undefined) {
+      this.options_.persistTextTrackSettings = this.options_.playerOptions.persistTextTrackSettings;
+    }
+    this.on(this.$('.vjs-done-button'), 'click', () => {
+      this.saveSettings();
+      this.close();
+    });
+    this.on(this.$('.vjs-default-button'), 'click', () => {
+      this.setDefaults();
+      this.updateDisplay();
+    });
+    each(selectConfigs, config => {
+      this.on(this.$(config.selector), 'change', this.updateDisplay);
+    });
+    if (this.options_.persistTextTrackSettings) {
+      this.restoreSettings();
+    }
+  }
+  dispose() {
+    this.endDialog = null;
+    super.dispose();
+  }
+
+  /**
+   * Create a <select> element with configured options.
+   *
+   * @param {string} key
+   *        Configuration key to use during creation.
+   *
+   * @param {string} [legendId]
+   *        Id of associated <legend>.
+   *
+   * @param {string} [type=label]
+   *        Type of labelling element, `label` or `legend`
+   *
+   * @return {string}
+   *         An HTML string.
+   *
+   * @private
+   */
+  createElSelect_(key, legendId = '', type = 'label') {
+    const config = selectConfigs[key];
+    const id = config.id.replace('%s', this.id_);
+    const selectLabelledbyIds = [legendId, id].join(' ').trim();
+    const guid = `vjs_select_${newGUID()}`;
+    return [`<${type} id="${id}"${type === 'label' ? ` for="${guid}" class="vjs-label"` : ''}>`, this.localize(config.label), `</${type}>`, `<select aria-labelledby="${selectLabelledbyIds}" id="${guid}">`].concat(config.options.map(o => {
+      const optionId = id + '-' + o[1].replace(/\W+/g, '');
+      return [`<option id="${optionId}" value="${o[0]}" `, `aria-labelledby="${selectLabelledbyIds} ${optionId}">`, this.localize(o[1]), '</option>'].join('');
+    })).concat('</select>').join('');
+  }
+
+  /**
+   * Create foreground color element for the component
+   *
+   * @return {string}
+   *         An HTML string.
+   *
+   * @private
+   */
+  createElFgColor_() {
+    const legendId = `captions-text-legend-${this.id_}`;
+    return ['<fieldset class="vjs-fg vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Text'), '</legend>', '<span class="vjs-text-color">', this.createElSelect_('color', legendId), '</span>', '<span class="vjs-text-opacity vjs-opacity">', this.createElSelect_('textOpacity', legendId), '</span>', '</fieldset>'].join('');
+  }
+
+  /**
+   * Create background color element for the component
+   *
+   * @return {string}
+   *         An HTML string.
+   *
+   * @private
+   */
+  createElBgColor_() {
+    const legendId = `captions-background-${this.id_}`;
+    return ['<fieldset class="vjs-bg vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Text Background'), '</legend>', '<span class="vjs-bg-color">', this.createElSelect_('backgroundColor', legendId), '</span>', '<span class="vjs-bg-opacity vjs-opacity">', this.createElSelect_('backgroundOpacity', legendId), '</span>', '</fieldset>'].join('');
+  }
+
+  /**
+   * Create window color element for the component
+   *
+   * @return {string}
+   *         An HTML string.
+   *
+   * @private
+   */
+  createElWinColor_() {
+    const legendId = `captions-window-${this.id_}`;
+    return ['<fieldset class="vjs-window vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Caption Area Background'), '</legend>', '<span class="vjs-window-color">', this.createElSelect_('windowColor', legendId), '</span>', '<span class="vjs-window-opacity vjs-opacity">', this.createElSelect_('windowOpacity', legendId), '</span>', '</fieldset>'].join('');
+  }
+
+  /**
+   * Create color elements for the component
+   *
+   * @return {Element}
+   *         The element that was created
+   *
+   * @private
+   */
+  createElColors_() {
+    return createEl('div', {
+      className: 'vjs-track-settings-colors',
+      innerHTML: [this.createElFgColor_(), this.createElBgColor_(), this.createElWinColor_()].join('')
+    });
+  }
+
+  /**
+   * Create font elements for the component
+   *
+   * @return {Element}
+   *         The element that was created.
+   *
+   * @private
+   */
+  createElFont_() {
+    return createEl('div', {
+      className: 'vjs-track-settings-font',
+      innerHTML: ['<fieldset class="vjs-font-percent vjs-track-setting">', this.createElSelect_('fontPercent', '', 'legend'), '</fieldset>', '<fieldset class="vjs-edge-style vjs-track-setting">', this.createElSelect_('edgeStyle', '', 'legend'), '</fieldset>', '<fieldset class="vjs-font-family vjs-track-setting">', this.createElSelect_('fontFamily', '', 'legend'), '</fieldset>'].join('')
+    });
+  }
+
+  /**
+   * Create controls for the component
+   *
+   * @return {Element}
+   *         The element that was created.
+   *
+   * @private
+   */
+  createElControls_() {
+    const defaultsDescription = this.localize('restore all settings to the default values');
+    return createEl('div', {
+      className: 'vjs-track-settings-controls',
+      innerHTML: [`<button type="button" class="vjs-default-button" title="${defaultsDescription}">`, this.localize('Reset'), `<span class="vjs-control-text"> ${defaultsDescription}</span>`, '</button>', `<button type="button" class="vjs-done-button">${this.localize('Done')}</button>`].join('')
+    });
+  }
+  content() {
+    return [this.createElColors_(), this.createElFont_(), this.createElControls_()];
+  }
+  label() {
+    return this.localize('Caption Settings Dialog');
+  }
+  description() {
+    return this.localize('Beginning of dialog window. Escape will cancel and close the window.');
+  }
+  buildCSSClass() {
+    return super.buildCSSClass() + ' vjs-text-track-settings';
+  }
+
+  /**
+   * Gets an object of text track settings (or null).
+   *
+   * @return {Object}
+   *         An object with config values parsed from the DOM or localStorage.
+   */
+  getValues() {
+    return reduce(selectConfigs, (accum, config, key) => {
+      const value = getSelectedOptionValue(this.$(config.selector), config.parser);
+      if (value !== undefined) {
+        accum[key] = value;
+      }
+      return accum;
+    }, {});
+  }
+
+  /**
+   * Sets text track settings from an object of values.
+   *
+   * @param {Object} values
+   *        An object with config values parsed from the DOM or localStorage.
+   */
+  setValues(values) {
+    each(selectConfigs, (config, key) => {
+      setSelectedOption(this.$(config.selector), values[key], config.parser);
+    });
+  }
+
+  /**
+   * Sets all `<select>` elements to their default values.
+   */
+  setDefaults() {
+    each(selectConfigs, config => {
+      const index = config.hasOwnProperty('default') ? config.default : 0;
+      this.$(config.selector).selectedIndex = index;
+    });
+  }
+
+  /**
+   * Restore texttrack settings from localStorage
+   */
+  restoreSettings() {
+    let values;
+    try {
+      values = JSON.parse(window$1.localStorage.getItem(LOCAL_STORAGE_KEY$1));
+    } catch (err) {
+      log$1.warn(err);
+    }
+    if (values) {
+      this.setValues(values);
+    }
+  }
+
+  /**
+   * Save text track settings to localStorage
+   */
+  saveSettings() {
+    if (!this.options_.persistTextTrackSettings) {
+      return;
+    }
+    const values = this.getValues();
+    try {
+      if (Object.keys(values).length) {
+        window$1.localStorage.setItem(LOCAL_STORAGE_KEY$1, JSON.stringify(values));
+      } else {
+        window$1.localStorage.removeItem(LOCAL_STORAGE_KEY$1);
+      }
+    } catch (err) {
+      log$1.warn(err);
+    }
+  }
+
+  /**
+   * Update display of text track settings
+   */
+  updateDisplay() {
+    const ttDisplay = this.player_.getChild('textTrackDisplay');
+    if (ttDisplay) {
+      ttDisplay.updateDisplay();
+    }
+  }
+
+  /**
+   * conditionally blur the element and refocus the captions button
+   *
+   * @private
+   */
+  conditionalBlur_() {
+    this.previouslyActiveEl_ = null;
+    const cb = this.player_.controlBar;
+    const subsCapsBtn = cb && cb.subsCapsButton;
+    const ccBtn = cb && cb.captionsButton;
+    if (subsCapsBtn) {
+      subsCapsBtn.focus();
+    } else if (ccBtn) {
+      ccBtn.focus();
+    }
+  }
+
+  /**
+   * Repopulate dialog with new localizations on languagechange
+   */
+  handleLanguagechange() {
+    this.fill();
+  }
+}
+Component$1.registerComponent('TextTrackSettings', TextTrackSettings);
+
+/**
+ * @file resize-manager.js
+ */
+
+/**
+ * A Resize Manager. It is in charge of triggering `playerresize` on the player in the right conditions.
+ *
+ * It'll either create an iframe and use a debounced resize handler on it or use the new {@link https://wicg.github.io/ResizeObserver/|ResizeObserver}.
+ *
+ * If the ResizeObserver is available natively, it will be used. A polyfill can be passed in as an option.
+ * If a `playerresize` event is not needed, the ResizeManager component can be removed from the player, see the example below.
+ *
+ * @example <caption>How to disable the resize manager</caption>
+ * const player = videojs('#vid', {
+ *   resizeManager: false
+ * });
+ *
+ * @see {@link https://wicg.github.io/ResizeObserver/|ResizeObserver specification}
+ *
+ * @extends Component
+ */
+class ResizeManager extends Component$1 {
+  /**
+   * Create the ResizeManager.
+   *
+   * @param {Object} player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of ResizeManager options.
+   *
+   * @param {Object} [options.ResizeObserver]
+   *        A polyfill for ResizeObserver can be passed in here.
+   *        If this is set to null it will ignore the native ResizeObserver and fall back to the iframe fallback.
+   */
+  constructor(player, options) {
+    let RESIZE_OBSERVER_AVAILABLE = options.ResizeObserver || window$1.ResizeObserver;
+
+    // if `null` was passed, we want to disable the ResizeObserver
+    if (options.ResizeObserver === null) {
+      RESIZE_OBSERVER_AVAILABLE = false;
+    }
+
+    // Only create an element when ResizeObserver isn't available
+    const options_ = merge$1({
+      createEl: !RESIZE_OBSERVER_AVAILABLE,
+      reportTouchActivity: false
+    }, options);
+    super(player, options_);
+    this.ResizeObserver = options.ResizeObserver || window$1.ResizeObserver;
+    this.loadListener_ = null;
+    this.resizeObserver_ = null;
+    this.debouncedHandler_ = debounce(() => {
+      this.resizeHandler();
+    }, 100, false, this);
+    if (RESIZE_OBSERVER_AVAILABLE) {
+      this.resizeObserver_ = new this.ResizeObserver(this.debouncedHandler_);
+      this.resizeObserver_.observe(player.el());
+    } else {
+      this.loadListener_ = () => {
+        if (!this.el_ || !this.el_.contentWindow) {
+          return;
+        }
+        const debouncedHandler_ = this.debouncedHandler_;
+        let unloadListener_ = this.unloadListener_ = function () {
+          off(this, 'resize', debouncedHandler_);
+          off(this, 'unload', unloadListener_);
+          unloadListener_ = null;
+        };
+
+        // safari and edge can unload the iframe before resizemanager dispose
+        // we have to dispose of event handlers correctly before that happens
+        on(this.el_.contentWindow, 'unload', unloadListener_);
+        on(this.el_.contentWindow, 'resize', debouncedHandler_);
+      };
+      this.one('load', this.loadListener_);
+    }
+  }
+  createEl() {
+    return super.createEl('iframe', {
+      className: 'vjs-resize-manager',
+      tabIndex: -1,
+      title: this.localize('No content')
+    }, {
+      'aria-hidden': 'true'
+    });
+  }
+
+  /**
+   * Called when a resize is triggered on the iframe or a resize is observed via the ResizeObserver
+   *
+   * @fires Player#playerresize
+   */
+  resizeHandler() {
+    /**
+     * Called when the player size has changed
+     *
+     * @event Player#playerresize
+     * @type {Event}
+     */
+    // make sure player is still around to trigger
+    // prevents this from causing an error after dispose
+    if (!this.player_ || !this.player_.trigger) {
+      return;
+    }
+    this.player_.trigger('playerresize');
+  }
+  dispose() {
+    if (this.debouncedHandler_) {
+      this.debouncedHandler_.cancel();
+    }
+    if (this.resizeObserver_) {
+      if (this.player_.el()) {
+        this.resizeObserver_.unobserve(this.player_.el());
+      }
+      this.resizeObserver_.disconnect();
+    }
+    if (this.loadListener_) {
+      this.off('load', this.loadListener_);
+    }
+    if (this.el_ && this.el_.contentWindow && this.unloadListener_) {
+      this.unloadListener_.call(this.el_.contentWindow);
+    }
+    this.ResizeObserver = null;
+    this.resizeObserver = null;
+    this.debouncedHandler_ = null;
+    this.loadListener_ = null;
+    super.dispose();
+  }
+}
+Component$1.registerComponent('ResizeManager', ResizeManager);
+
+const defaults = {
+  trackingThreshold: 20,
+  liveTolerance: 15
+};
+
+/*
+  track when we are at the live edge, and other helpers for live playback */
+
+/**
+ * A class for checking live current time and determining when the player
+ * is at or behind the live edge.
+ */
+class LiveTracker extends Component$1 {
+  /**
+   * Creates an instance of this class.
+   *
+   * @param { import('./player').default } player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {number} [options.trackingThreshold=20]
+   *        Number of seconds of live window (seekableEnd - seekableStart) that
+   *        media needs to have before the liveui will be shown.
+   *
+   * @param {number} [options.liveTolerance=15]
+   *        Number of seconds behind live that we have to be
+   *        before we will be considered non-live. Note that this will only
+   *        be used when playing at the live edge. This allows large seekable end
+   *        changes to not effect whether we are live or not.
+   */
+  constructor(player, options) {
+    // LiveTracker does not need an element
+    const options_ = merge$1(defaults, options, {
+      createEl: false
+    });
+    super(player, options_);
+    this.trackLiveHandler_ = () => this.trackLive_();
+    this.handlePlay_ = e => this.handlePlay(e);
+    this.handleFirstTimeupdate_ = e => this.handleFirstTimeupdate(e);
+    this.handleSeeked_ = e => this.handleSeeked(e);
+    this.seekToLiveEdge_ = e => this.seekToLiveEdge(e);
+    this.reset_();
+    this.on(this.player_, 'durationchange', e => this.handleDurationchange(e));
+    // we should try to toggle tracking on canplay as native playback engines, like Safari
+    // may not have the proper values for things like seekableEnd until then
+    this.on(this.player_, 'canplay', () => this.toggleTracking());
+  }
+
+  /**
+   * all the functionality for tracking when seek end changes
+   * and for tracking how far past seek end we should be
+   */
+  trackLive_() {
+    const seekable = this.player_.seekable();
+
+    // skip undefined seekable
+    if (!seekable || !seekable.length) {
+      return;
+    }
+    const newTime = Number(window$1.performance.now().toFixed(4));
+    const deltaTime = this.lastTime_ === -1 ? 0 : (newTime - this.lastTime_) / 1000;
+    this.lastTime_ = newTime;
+    this.pastSeekEnd_ = this.pastSeekEnd() + deltaTime;
+    const liveCurrentTime = this.liveCurrentTime();
+    const currentTime = this.player_.currentTime();
+
+    // we are behind live if any are true
+    // 1. the player is paused
+    // 2. the user seeked to a location 2 seconds away from live
+    // 3. the difference between live and current time is greater
+    //    liveTolerance which defaults to 15s
+    let isBehind = this.player_.paused() || this.seekedBehindLive_ || Math.abs(liveCurrentTime - currentTime) > this.options_.liveTolerance;
+
+    // we cannot be behind if
+    // 1. until we have not seen a timeupdate yet
+    // 2. liveCurrentTime is Infinity, which happens on Android and Native Safari
+    if (!this.timeupdateSeen_ || liveCurrentTime === Infinity) {
+      isBehind = false;
+    }
+    if (isBehind !== this.behindLiveEdge_) {
+      this.behindLiveEdge_ = isBehind;
+      this.trigger('liveedgechange');
+    }
+  }
+
+  /**
+   * handle a durationchange event on the player
+   * and start/stop tracking accordingly.
+   */
+  handleDurationchange() {
+    this.toggleTracking();
+  }
+
+  /**
+   * start/stop tracking
+   */
+  toggleTracking() {
+    if (this.player_.duration() === Infinity && this.liveWindow() >= this.options_.trackingThreshold) {
+      if (this.player_.options_.liveui) {
+        this.player_.addClass('vjs-liveui');
+      }
+      this.startTracking();
+    } else {
+      this.player_.removeClass('vjs-liveui');
+      this.stopTracking();
+    }
+  }
+
+  /**
+   * start tracking live playback
+   */
+  startTracking() {
+    if (this.isTracking()) {
+      return;
+    }
+
+    // If we haven't seen a timeupdate, we need to check whether playback
+    // began before this component started tracking. This can happen commonly
+    // when using autoplay.
+    if (!this.timeupdateSeen_) {
+      this.timeupdateSeen_ = this.player_.hasStarted();
+    }
+    this.trackingInterval_ = this.setInterval(this.trackLiveHandler_, UPDATE_REFRESH_INTERVAL);
+    this.trackLive_();
+    this.on(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+    if (!this.timeupdateSeen_) {
+      this.one(this.player_, 'play', this.handlePlay_);
+      this.one(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+    } else {
+      this.on(this.player_, 'seeked', this.handleSeeked_);
+    }
+  }
+
+  /**
+   * handle the first timeupdate on the player if it wasn't already playing
+   * when live tracker started tracking.
+   */
+  handleFirstTimeupdate() {
+    this.timeupdateSeen_ = true;
+    this.on(this.player_, 'seeked', this.handleSeeked_);
+  }
+
+  /**
+   * Keep track of what time a seek starts, and listen for seeked
+   * to find where a seek ends.
+   */
+  handleSeeked() {
+    const timeDiff = Math.abs(this.liveCurrentTime() - this.player_.currentTime());
+    this.seekedBehindLive_ = this.nextSeekedFromUser_ && timeDiff > 2;
+    this.nextSeekedFromUser_ = false;
+    this.trackLive_();
+  }
+
+  /**
+   * handle the first play on the player, and make sure that we seek
+   * right to the live edge.
+   */
+  handlePlay() {
+    this.one(this.player_, 'timeupdate', this.seekToLiveEdge_);
+  }
+
+  /**
+   * Stop tracking, and set all internal variables to
+   * their initial value.
+   */
+  reset_() {
+    this.lastTime_ = -1;
+    this.pastSeekEnd_ = 0;
+    this.lastSeekEnd_ = -1;
+    this.behindLiveEdge_ = true;
+    this.timeupdateSeen_ = false;
+    this.seekedBehindLive_ = false;
+    this.nextSeekedFromUser_ = false;
+    this.clearInterval(this.trackingInterval_);
+    this.trackingInterval_ = null;
+    this.off(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+    this.off(this.player_, 'seeked', this.handleSeeked_);
+    this.off(this.player_, 'play', this.handlePlay_);
+    this.off(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+    this.off(this.player_, 'timeupdate', this.seekToLiveEdge_);
+  }
+
+  /**
+   * The next seeked event is from the user. Meaning that any seek
+   * > 2s behind live will be considered behind live for real and
+   * liveTolerance will be ignored.
+   */
+  nextSeekedFromUser() {
+    this.nextSeekedFromUser_ = true;
+  }
+
+  /**
+   * stop tracking live playback
+   */
+  stopTracking() {
+    if (!this.isTracking()) {
+      return;
+    }
+    this.reset_();
+    this.trigger('liveedgechange');
+  }
+
+  /**
+   * A helper to get the player seekable end
+   * so that we don't have to null check everywhere
+   *
+   * @return {number}
+   *         The furthest seekable end or Infinity.
+   */
+  seekableEnd() {
+    const seekable = this.player_.seekable();
+    const seekableEnds = [];
+    let i = seekable ? seekable.length : 0;
+    while (i--) {
+      seekableEnds.push(seekable.end(i));
+    }
+
+    // grab the furthest seekable end after sorting, or if there are none
+    // default to Infinity
+    return seekableEnds.length ? seekableEnds.sort()[seekableEnds.length - 1] : Infinity;
+  }
+
+  /**
+   * A helper to get the player seekable start
+   * so that we don't have to null check everywhere
+   *
+   * @return {number}
+   *         The earliest seekable start or 0.
+   */
+  seekableStart() {
+    const seekable = this.player_.seekable();
+    const seekableStarts = [];
+    let i = seekable ? seekable.length : 0;
+    while (i--) {
+      seekableStarts.push(seekable.start(i));
+    }
+
+    // grab the first seekable start after sorting, or if there are none
+    // default to 0
+    return seekableStarts.length ? seekableStarts.sort()[0] : 0;
+  }
+
+  /**
+   * Get the live time window aka
+   * the amount of time between seekable start and
+   * live current time.
+   *
+   * @return {number}
+   *         The amount of seconds that are seekable in
+   *         the live video.
+   */
+  liveWindow() {
+    const liveCurrentTime = this.liveCurrentTime();
+
+    // if liveCurrenTime is Infinity then we don't have a liveWindow at all
+    if (liveCurrentTime === Infinity) {
+      return 0;
+    }
+    return liveCurrentTime - this.seekableStart();
+  }
+
+  /**
+   * Determines if the player is live, only checks if this component
+   * is tracking live playback or not
+   *
+   * @return {boolean}
+   *         Whether liveTracker is tracking
+   */
+  isLive() {
+    return this.isTracking();
+  }
+
+  /**
+   * Determines if currentTime is at the live edge and won't fall behind
+   * on each seekableendchange
+   *
+   * @return {boolean}
+   *         Whether playback is at the live edge
+   */
+  atLiveEdge() {
+    return !this.behindLiveEdge();
+  }
+
+  /**
+   * get what we expect the live current time to be
+   *
+   * @return {number}
+   *         The expected live current time
+   */
+  liveCurrentTime() {
+    return this.pastSeekEnd() + this.seekableEnd();
+  }
+
+  /**
+   * The number of seconds that have occurred after seekable end
+   * changed. This will be reset to 0 once seekable end changes.
+   *
+   * @return {number}
+   *         Seconds past the current seekable end
+   */
+  pastSeekEnd() {
+    const seekableEnd = this.seekableEnd();
+    if (this.lastSeekEnd_ !== -1 && seekableEnd !== this.lastSeekEnd_) {
+      this.pastSeekEnd_ = 0;
+    }
+    this.lastSeekEnd_ = seekableEnd;
+    return this.pastSeekEnd_;
+  }
+
+  /**
+   * If we are currently behind the live edge, aka currentTime will be
+   * behind on a seekableendchange
+   *
+   * @return {boolean}
+   *         If we are behind the live edge
+   */
+  behindLiveEdge() {
+    return this.behindLiveEdge_;
+  }
+
+  /**
+   * Whether live tracker is currently tracking or not.
+   */
+  isTracking() {
+    return typeof this.trackingInterval_ === 'number';
+  }
+
+  /**
+   * Seek to the live edge if we are behind the live edge
+   */
+  seekToLiveEdge() {
+    this.seekedBehindLive_ = false;
+    if (this.atLiveEdge()) {
+      return;
+    }
+    this.nextSeekedFromUser_ = false;
+    this.player_.currentTime(this.liveCurrentTime());
+  }
+
+  /**
+   * Dispose of liveTracker
+   */
+  dispose() {
+    this.stopTracking();
+    super.dispose();
+  }
+}
+Component$1.registerComponent('LiveTracker', LiveTracker);
+
+/**
+ * Displays an element over the player which contains an optional title and
+ * description for the current content.
+ *
+ * Much of the code for this component originated in the now obsolete
+ * videojs-dock plugin: https://github.com/brightcove/videojs-dock/
+ *
+ * @extends Component
+ */
+class TitleBar extends Component$1 {
+  constructor(player, options) {
+    super(player, options);
+    this.on('statechanged', e => this.updateDom_());
+    this.updateDom_();
+  }
+
+  /**
+   * Create the `TitleBar`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    this.els = {
+      title: createEl('div', {
+        className: 'vjs-title-bar-title',
+        id: `vjs-title-bar-title-${newGUID()}`
+      }),
+      description: createEl('div', {
+        className: 'vjs-title-bar-description',
+        id: `vjs-title-bar-description-${newGUID()}`
+      })
+    };
+    return createEl('div', {
+      className: 'vjs-title-bar'
+    }, {}, values(this.els));
+  }
+
+  /**
+   * Updates the DOM based on the component's state object.
+   */
+  updateDom_() {
+    const tech = this.player_.tech_;
+    const techEl = tech && tech.el_;
+    const techAriaAttrs = {
+      title: 'aria-labelledby',
+      description: 'aria-describedby'
+    };
+    ['title', 'description'].forEach(k => {
+      const value = this.state[k];
+      const el = this.els[k];
+      const techAriaAttr = techAriaAttrs[k];
+      emptyEl(el);
+      if (value) {
+        textContent(el, value);
+      }
+
+      // If there is a tech element available, update its ARIA attributes
+      // according to whether a title and/or description have been provided.
+      if (techEl) {
+        techEl.removeAttribute(techAriaAttr);
+        if (value) {
+          techEl.setAttribute(techAriaAttr, el.id);
+        }
+      }
+    });
+    if (this.state.title || this.state.description) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  /**
+   * Update the contents of the title bar component with new title and
+   * description text.
+   *
+   * If both title and description are missing, the title bar will be hidden.
+   *
+   * If either title or description are present, the title bar will be visible.
+   *
+   * NOTE: Any previously set value will be preserved. To unset a previously
+   * set value, you must pass an empty string or null.
+   *
+   * For example:
+   *
+   * ```
+   * update({title: 'foo', description: 'bar'}) // title: 'foo', description: 'bar'
+   * update({description: 'bar2'}) // title: 'foo', description: 'bar2'
+   * update({title: ''}) // title: '', description: 'bar2'
+   * update({title: 'foo', description: null}) // title: 'foo', description: null
+   * ```
+   *
+   * @param  {Object} [options={}]
+   *         An options object. When empty, the title bar will be hidden.
+   *
+   * @param  {string} [options.title]
+   *         A title to display in the title bar.
+   *
+   * @param  {string} [options.description]
+   *         A description to display in the title bar.
+   */
+  update(options) {
+    this.setState(options);
+  }
+
+  /**
+   * Dispose the component.
+   */
+  dispose() {
+    const tech = this.player_.tech_;
+    const techEl = tech && tech.el_;
+    if (techEl) {
+      techEl.removeAttribute('aria-labelledby');
+      techEl.removeAttribute('aria-describedby');
+    }
+    super.dispose();
+    this.els = null;
+  }
+}
+Component$1.registerComponent('TitleBar', TitleBar);
+
+/**
+ * This function is used to fire a sourceset when there is something
+ * similar to `mediaEl.load()` being called. It will try to find the source via
+ * the `src` attribute and then the `<source>` elements. It will then fire `sourceset`
+ * with the source that was found or empty string if we cannot know. If it cannot
+ * find a source then `sourceset` will not be fired.
+ *
+ * @param { import('./html5').default } tech
+ *        The tech object that sourceset was setup on
+ *
+ * @return {boolean}
+ *         returns false if the sourceset was not fired and true otherwise.
+ */
+const sourcesetLoad = tech => {
+  const el = tech.el();
+
+  // if `el.src` is set, that source will be loaded.
+  if (el.hasAttribute('src')) {
+    tech.triggerSourceset(el.src);
+    return true;
+  }
+
+  /**
+   * Since there isn't a src property on the media element, source elements will be used for
+   * implementing the source selection algorithm. This happens asynchronously and
+   * for most cases were there is more than one source we cannot tell what source will
+   * be loaded, without re-implementing the source selection algorithm. At this time we are not
+   * going to do that. There are three special cases that we do handle here though:
+   *
+   * 1. If there are no sources, do not fire `sourceset`.
+   * 2. If there is only one `<source>` with a `src` property/attribute that is our `src`
+   * 3. If there is more than one `<source>` but all of them have the same `src` url.
+   *    That will be our src.
+   */
+  const sources = tech.$$('source');
+  const srcUrls = [];
+  let src = '';
+
+  // if there are no sources, do not fire sourceset
+  if (!sources.length) {
+    return false;
+  }
+
+  // only count valid/non-duplicate source elements
+  for (let i = 0; i < sources.length; i++) {
+    const url = sources[i].src;
+    if (url && srcUrls.indexOf(url) === -1) {
+      srcUrls.push(url);
+    }
+  }
+
+  // there were no valid sources
+  if (!srcUrls.length) {
+    return false;
+  }
+
+  // there is only one valid source element url
+  // use that
+  if (srcUrls.length === 1) {
+    src = srcUrls[0];
+  }
+  tech.triggerSourceset(src);
+  return true;
+};
+
+/**
+ * our implementation of an `innerHTML` descriptor for browsers
+ * that do not have one.
+ */
+const innerHTMLDescriptorPolyfill = Object.defineProperty({}, 'innerHTML', {
+  get() {
+    return this.cloneNode(true).innerHTML;
+  },
+  set(v) {
+    // make a dummy node to use innerHTML on
+    const dummy = document.createElement(this.nodeName.toLowerCase());
+
+    // set innerHTML to the value provided
+    dummy.innerHTML = v;
+
+    // make a document fragment to hold the nodes from dummy
+    const docFrag = document.createDocumentFragment();
+
+    // copy all of the nodes created by the innerHTML on dummy
+    // to the document fragment
+    while (dummy.childNodes.length) {
+      docFrag.appendChild(dummy.childNodes[0]);
+    }
+
+    // remove content
+    this.innerText = '';
+
+    // now we add all of that html in one by appending the
+    // document fragment. This is how innerHTML does it.
+    window$1.Element.prototype.appendChild.call(this, docFrag);
+
+    // then return the result that innerHTML's setter would
+    return this.innerHTML;
+  }
+});
+
+/**
+ * Get a property descriptor given a list of priorities and the
+ * property to get.
+ */
+const getDescriptor = (priority, prop) => {
+  let descriptor = {};
+  for (let i = 0; i < priority.length; i++) {
+    descriptor = Object.getOwnPropertyDescriptor(priority[i], prop);
+    if (descriptor && descriptor.set && descriptor.get) {
+      break;
+    }
+  }
+  descriptor.enumerable = true;
+  descriptor.configurable = true;
+  return descriptor;
+};
+const getInnerHTMLDescriptor = tech => getDescriptor([tech.el(), window$1.HTMLMediaElement.prototype, window$1.Element.prototype, innerHTMLDescriptorPolyfill], 'innerHTML');
+
+/**
+ * Patches browser internal functions so that we can tell synchronously
+ * if a `<source>` was appended to the media element. For some reason this
+ * causes a `sourceset` if the the media element is ready and has no source.
+ * This happens when:
+ * - The page has just loaded and the media element does not have a source.
+ * - The media element was emptied of all sources, then `load()` was called.
+ *
+ * It does this by patching the following functions/properties when they are supported:
+ *
+ * - `append()` - can be used to add a `<source>` element to the media element
+ * - `appendChild()` - can be used to add a `<source>` element to the media element
+ * - `insertAdjacentHTML()` -  can be used to add a `<source>` element to the media element
+ * - `innerHTML` -  can be used to add a `<source>` element to the media element
+ *
+ * @param {Html5} tech
+ *        The tech object that sourceset is being setup on.
+ */
+const firstSourceWatch = function (tech) {
+  const el = tech.el();
+
+  // make sure firstSourceWatch isn't setup twice.
+  if (el.resetSourceWatch_) {
+    return;
+  }
+  const old = {};
+  const innerDescriptor = getInnerHTMLDescriptor(tech);
+  const appendWrapper = appendFn => (...args) => {
+    const retval = appendFn.apply(el, args);
+    sourcesetLoad(tech);
+    return retval;
+  };
+  ['append', 'appendChild', 'insertAdjacentHTML'].forEach(k => {
+    if (!el[k]) {
+      return;
+    }
+
+    // store the old function
+    old[k] = el[k];
+
+    // call the old function with a sourceset if a source
+    // was loaded
+    el[k] = appendWrapper(old[k]);
+  });
+  Object.defineProperty(el, 'innerHTML', merge$1(innerDescriptor, {
+    set: appendWrapper(innerDescriptor.set)
+  }));
+  el.resetSourceWatch_ = () => {
+    el.resetSourceWatch_ = null;
+    Object.keys(old).forEach(k => {
+      el[k] = old[k];
+    });
+    Object.defineProperty(el, 'innerHTML', innerDescriptor);
+  };
+
+  // on the first sourceset, we need to revert our changes
+  tech.one('sourceset', el.resetSourceWatch_);
+};
+
+/**
+ * our implementation of a `src` descriptor for browsers
+ * that do not have one
+ */
+const srcDescriptorPolyfill = Object.defineProperty({}, 'src', {
+  get() {
+    if (this.hasAttribute('src')) {
+      return getAbsoluteURL(window$1.Element.prototype.getAttribute.call(this, 'src'));
+    }
+    return '';
+  },
+  set(v) {
+    window$1.Element.prototype.setAttribute.call(this, 'src', v);
+    return v;
+  }
+});
+const getSrcDescriptor = tech => getDescriptor([tech.el(), window$1.HTMLMediaElement.prototype, srcDescriptorPolyfill], 'src');
+
+/**
+ * setup `sourceset` handling on the `Html5` tech. This function
+ * patches the following element properties/functions:
+ *
+ * - `src` - to determine when `src` is set
+ * - `setAttribute()` - to determine when `src` is set
+ * - `load()` - this re-triggers the source selection algorithm, and can
+ *              cause a sourceset.
+ *
+ * If there is no source when we are adding `sourceset` support or during a `load()`
+ * we also patch the functions listed in `firstSourceWatch`.
+ *
+ * @param {Html5} tech
+ *        The tech to patch
+ */
+const setupSourceset = function (tech) {
+  if (!tech.featuresSourceset) {
+    return;
+  }
+  const el = tech.el();
+
+  // make sure sourceset isn't setup twice.
+  if (el.resetSourceset_) {
+    return;
+  }
+  const srcDescriptor = getSrcDescriptor(tech);
+  const oldSetAttribute = el.setAttribute;
+  const oldLoad = el.load;
+  Object.defineProperty(el, 'src', merge$1(srcDescriptor, {
+    set: v => {
+      const retval = srcDescriptor.set.call(el, v);
+
+      // we use the getter here to get the actual value set on src
+      tech.triggerSourceset(el.src);
+      return retval;
+    }
+  }));
+  el.setAttribute = (n, v) => {
+    const retval = oldSetAttribute.call(el, n, v);
+    if (/src/i.test(n)) {
+      tech.triggerSourceset(el.src);
+    }
+    return retval;
+  };
+  el.load = () => {
+    const retval = oldLoad.call(el);
+
+    // if load was called, but there was no source to fire
+    // sourceset on. We have to watch for a source append
+    // as that can trigger a `sourceset` when the media element
+    // has no source
+    if (!sourcesetLoad(tech)) {
+      tech.triggerSourceset('');
+      firstSourceWatch(tech);
+    }
+    return retval;
+  };
+  if (el.currentSrc) {
+    tech.triggerSourceset(el.currentSrc);
+  } else if (!sourcesetLoad(tech)) {
+    firstSourceWatch(tech);
+  }
+  el.resetSourceset_ = () => {
+    el.resetSourceset_ = null;
+    el.load = oldLoad;
+    el.setAttribute = oldSetAttribute;
+    Object.defineProperty(el, 'src', srcDescriptor);
+    if (el.resetSourceWatch_) {
+      el.resetSourceWatch_();
+    }
+  };
+};
+
+/**
+ * @file html5.js
+ */
+
+/**
+ * HTML5 Media Controller - Wrapper for HTML5 Media API
+ *
+ * @mixes Tech~SourceHandlerAdditions
+ * @extends Tech
+ */
+class Html5 extends Tech {
+  /**
+  * Create an instance of this Tech.
+  *
+  * @param {Object} [options]
+  *        The key/value store of player options.
+  *
+  * @param {Function} [ready]
+  *        Callback function to call when the `HTML5` Tech is ready.
+  */
+  constructor(options, ready) {
+    super(options, ready);
+    const source = options.source;
+    let crossoriginTracks = false;
+    this.featuresVideoFrameCallback = this.featuresVideoFrameCallback && this.el_.tagName === 'VIDEO';
+
+    // Set the source if one is provided
+    // 1) Check if the source is new (if not, we want to keep the original so playback isn't interrupted)
+    // 2) Check to see if the network state of the tag was failed at init, and if so, reset the source
+    // anyway so the error gets fired.
+    if (source && (this.el_.currentSrc !== source.src || options.tag && options.tag.initNetworkState_ === 3)) {
+      this.setSource(source);
+    } else {
+      this.handleLateInit_(this.el_);
+    }
+
+    // setup sourceset after late sourceset/init
+    if (options.enableSourceset) {
+      this.setupSourcesetHandling_();
+    }
+    this.isScrubbing_ = false;
+    if (this.el_.hasChildNodes()) {
+      const nodes = this.el_.childNodes;
+      let nodesLength = nodes.length;
+      const removeNodes = [];
+      while (nodesLength--) {
+        const node = nodes[nodesLength];
+        const nodeName = node.nodeName.toLowerCase();
+        if (nodeName === 'track') {
+          if (!this.featuresNativeTextTracks) {
+            // Empty video tag tracks so the built-in player doesn't use them also.
+            // This may not be fast enough to stop HTML5 browsers from reading the tags
+            // so we'll need to turn off any default tracks if we're manually doing
+            // captions and subtitles. videoElement.textTracks
+            removeNodes.push(node);
+          } else {
+            // store HTMLTrackElement and TextTrack to remote list
+            this.remoteTextTrackEls().addTrackElement_(node);
+            this.remoteTextTracks().addTrack(node.track);
+            this.textTracks().addTrack(node.track);
+            if (!crossoriginTracks && !this.el_.hasAttribute('crossorigin') && isCrossOrigin(node.src)) {
+              crossoriginTracks = true;
+            }
+          }
+        }
+      }
+      for (let i = 0; i < removeNodes.length; i++) {
+        this.el_.removeChild(removeNodes[i]);
+      }
+    }
+    this.proxyNativeTracks_();
+    if (this.featuresNativeTextTracks && crossoriginTracks) {
+      log$1.warn('Text Tracks are being loaded from another origin but the crossorigin attribute isn\'t used.\n' + 'This may prevent text tracks from loading.');
+    }
+
+    // prevent iOS Safari from disabling metadata text tracks during native playback
+    this.restoreMetadataTracksInIOSNativePlayer_();
+
+    // Determine if native controls should be used
+    // Our goal should be to get the custom controls on mobile solid everywhere
+    // so we can remove this all together. Right now this will block custom
+    // controls on touch enabled laptops like the Chrome Pixel
+    if ((TOUCH_ENABLED || IS_IPHONE) && options.nativeControlsForTouch === true) {
+      this.setControls(true);
+    }
+
+    // on iOS, we want to proxy `webkitbeginfullscreen` and `webkitendfullscreen`
+    // into a `fullscreenchange` event
+    this.proxyWebkitFullscreen_();
+    this.triggerReady();
+  }
+
+  /**
+   * Dispose of `HTML5` media element and remove all tracks.
+   */
+  dispose() {
+    if (this.el_ && this.el_.resetSourceset_) {
+      this.el_.resetSourceset_();
+    }
+    Html5.disposeMediaElement(this.el_);
+    this.options_ = null;
+
+    // tech will handle clearing of the emulated track list
+    super.dispose();
+  }
+
+  /**
+   * Modify the media element so that we can detect when
+   * the source is changed. Fires `sourceset` just after the source has changed
+   */
+  setupSourcesetHandling_() {
+    setupSourceset(this);
+  }
+
+  /**
+   * When a captions track is enabled in the iOS Safari native player, all other
+   * tracks are disabled (including metadata tracks), which nulls all of their
+   * associated cue points. This will restore metadata tracks to their pre-fullscreen
+   * state in those cases so that cue points are not needlessly lost.
+   *
+   * @private
+   */
+  restoreMetadataTracksInIOSNativePlayer_() {
+    const textTracks = this.textTracks();
+    let metadataTracksPreFullscreenState;
+
+    // captures a snapshot of every metadata track's current state
+    const takeMetadataTrackSnapshot = () => {
+      metadataTracksPreFullscreenState = [];
+      for (let i = 0; i < textTracks.length; i++) {
+        const track = textTracks[i];
+        if (track.kind === 'metadata') {
+          metadataTracksPreFullscreenState.push({
+            track,
+            storedMode: track.mode
+          });
+        }
+      }
+    };
+
+    // snapshot each metadata track's initial state, and update the snapshot
+    // each time there is a track 'change' event
+    takeMetadataTrackSnapshot();
+    textTracks.addEventListener('change', takeMetadataTrackSnapshot);
+    this.on('dispose', () => textTracks.removeEventListener('change', takeMetadataTrackSnapshot));
+    const restoreTrackMode = () => {
+      for (let i = 0; i < metadataTracksPreFullscreenState.length; i++) {
+        const storedTrack = metadataTracksPreFullscreenState[i];
+        if (storedTrack.track.mode === 'disabled' && storedTrack.track.mode !== storedTrack.storedMode) {
+          storedTrack.track.mode = storedTrack.storedMode;
+        }
+      }
+      // we only want this handler to be executed on the first 'change' event
+      textTracks.removeEventListener('change', restoreTrackMode);
+    };
+
+    // when we enter fullscreen playback, stop updating the snapshot and
+    // restore all track modes to their pre-fullscreen state
+    this.on('webkitbeginfullscreen', () => {
+      textTracks.removeEventListener('change', takeMetadataTrackSnapshot);
+
+      // remove the listener before adding it just in case it wasn't previously removed
+      textTracks.removeEventListener('change', restoreTrackMode);
+      textTracks.addEventListener('change', restoreTrackMode);
+    });
+
+    // start updating the snapshot again after leaving fullscreen
+    this.on('webkitendfullscreen', () => {
+      // remove the listener before adding it just in case it wasn't previously removed
+      textTracks.removeEventListener('change', takeMetadataTrackSnapshot);
+      textTracks.addEventListener('change', takeMetadataTrackSnapshot);
+
+      // remove the restoreTrackMode handler in case it wasn't triggered during fullscreen playback
+      textTracks.removeEventListener('change', restoreTrackMode);
+    });
+  }
+
+  /**
+   * Attempt to force override of tracks for the given type
+   *
+   * @param {string} type - Track type to override, possible values include 'Audio',
+   * 'Video', and 'Text'.
+   * @param {boolean} override - If set to true native audio/video will be overridden,
+   * otherwise native audio/video will potentially be used.
+   * @private
+   */
+  overrideNative_(type, override) {
+    // If there is no behavioral change don't add/remove listeners
+    if (override !== this[`featuresNative${type}Tracks`]) {
+      return;
+    }
+    const lowerCaseType = type.toLowerCase();
+    if (this[`${lowerCaseType}TracksListeners_`]) {
+      Object.keys(this[`${lowerCaseType}TracksListeners_`]).forEach(eventName => {
+        const elTracks = this.el()[`${lowerCaseType}Tracks`];
+        elTracks.removeEventListener(eventName, this[`${lowerCaseType}TracksListeners_`][eventName]);
+      });
+    }
+    this[`featuresNative${type}Tracks`] = !override;
+    this[`${lowerCaseType}TracksListeners_`] = null;
+    this.proxyNativeTracksForType_(lowerCaseType);
+  }
+
+  /**
+   * Attempt to force override of native audio tracks.
+   *
+   * @param {boolean} override - If set to true native audio will be overridden,
+   * otherwise native audio will potentially be used.
+   */
+  overrideNativeAudioTracks(override) {
+    this.overrideNative_('Audio', override);
+  }
+
+  /**
+   * Attempt to force override of native video tracks.
+   *
+   * @param {boolean} override - If set to true native video will be overridden,
+   * otherwise native video will potentially be used.
+   */
+  overrideNativeVideoTracks(override) {
+    this.overrideNative_('Video', override);
+  }
+
+  /**
+   * Proxy native track list events for the given type to our track
+   * lists if the browser we are playing in supports that type of track list.
+   *
+   * @param {string} name - Track type; values include 'audio', 'video', and 'text'
+   * @private
+   */
+  proxyNativeTracksForType_(name) {
+    const props = NORMAL[name];
+    const elTracks = this.el()[props.getterName];
+    const techTracks = this[props.getterName]();
+    if (!this[`featuresNative${props.capitalName}Tracks`] || !elTracks || !elTracks.addEventListener) {
+      return;
+    }
+    const listeners = {
+      change: e => {
+        const event = {
+          type: 'change',
+          target: techTracks,
+          currentTarget: techTracks,
+          srcElement: techTracks
+        };
+        techTracks.trigger(event);
+
+        // if we are a text track change event, we should also notify the
+        // remote text track list. This can potentially cause a false positive
+        // if we were to get a change event on a non-remote track and
+        // we triggered the event on the remote text track list which doesn't
+        // contain that track. However, best practices mean looping through the
+        // list of tracks and searching for the appropriate mode value, so,
+        // this shouldn't pose an issue
+        if (name === 'text') {
+          this[REMOTE.remoteText.getterName]().trigger(event);
+        }
+      },
+      addtrack(e) {
+        techTracks.addTrack(e.track);
+      },
+      removetrack(e) {
+        techTracks.removeTrack(e.track);
+      }
+    };
+    const removeOldTracks = function () {
+      const removeTracks = [];
+      for (let i = 0; i < techTracks.length; i++) {
+        let found = false;
+        for (let j = 0; j < elTracks.length; j++) {
+          if (elTracks[j] === techTracks[i]) {
+            found = true;
+            break;
+          }
+        }
+        if (!found) {
+          removeTracks.push(techTracks[i]);
+        }
+      }
+      while (removeTracks.length) {
+        techTracks.removeTrack(removeTracks.shift());
+      }
+    };
+    this[props.getterName + 'Listeners_'] = listeners;
+    Object.keys(listeners).forEach(eventName => {
+      const listener = listeners[eventName];
+      elTracks.addEventListener(eventName, listener);
+      this.on('dispose', e => elTracks.removeEventListener(eventName, listener));
+    });
+
+    // Remove (native) tracks that are not used anymore
+    this.on('loadstart', removeOldTracks);
+    this.on('dispose', e => this.off('loadstart', removeOldTracks));
+  }
+
+  /**
+   * Proxy all native track list events to our track lists if the browser we are playing
+   * in supports that type of track list.
+   *
+   * @private
+   */
+  proxyNativeTracks_() {
+    NORMAL.names.forEach(name => {
+      this.proxyNativeTracksForType_(name);
+    });
+  }
+
+  /**
+   * Create the `Html5` Tech's DOM element.
+   *
+   * @return {Element}
+   *         The element that gets created.
+   */
+  createEl() {
+    let el = this.options_.tag;
+
+    // Check if this browser supports moving the element into the box.
+    // On the iPhone video will break if you move the element,
+    // So we have to create a brand new element.
+    // If we ingested the player div, we do not need to move the media element.
+    if (!el || !(this.options_.playerElIngest || this.movingMediaElementInDOM)) {
+      // If the original tag is still there, clone and remove it.
+      if (el) {
+        const clone = el.cloneNode(true);
+        if (el.parentNode) {
+          el.parentNode.insertBefore(clone, el);
+        }
+        Html5.disposeMediaElement(el);
+        el = clone;
+      } else {
+        el = document.createElement('video');
+
+        // determine if native controls should be used
+        const tagAttributes = this.options_.tag && getAttributes(this.options_.tag);
+        const attributes = merge$1({}, tagAttributes);
+        if (!TOUCH_ENABLED || this.options_.nativeControlsForTouch !== true) {
+          delete attributes.controls;
+        }
+        setAttributes(el, Object.assign(attributes, {
+          id: this.options_.techId,
+          class: 'vjs-tech'
+        }));
+      }
+      el.playerId = this.options_.playerId;
+    }
+    if (typeof this.options_.preload !== 'undefined') {
+      setAttribute(el, 'preload', this.options_.preload);
+    }
+    if (this.options_.disablePictureInPicture !== undefined) {
+      el.disablePictureInPicture = this.options_.disablePictureInPicture;
+    }
+
+    // Update specific tag settings, in case they were overridden
+    // `autoplay` has to be *last* so that `muted` and `playsinline` are present
+    // when iOS/Safari or other browsers attempt to autoplay.
+    const settingsAttrs = ['loop', 'muted', 'playsinline', 'autoplay'];
+    for (let i = 0; i < settingsAttrs.length; i++) {
+      const attr = settingsAttrs[i];
+      const value = this.options_[attr];
+      if (typeof value !== 'undefined') {
+        if (value) {
+          setAttribute(el, attr, attr);
+        } else {
+          removeAttribute(el, attr);
+        }
+        el[attr] = value;
+      }
+    }
+    return el;
+  }
+
+  /**
+   * This will be triggered if the loadstart event has already fired, before videojs was
+   * ready. Two known examples of when this can happen are:
+   * 1. If we're loading the playback object after it has started loading
+   * 2. The media is already playing the (often with autoplay on) then
+   *
+   * This function will fire another loadstart so that videojs can catchup.
+   *
+   * @fires Tech#loadstart
+   *
+   * @return {undefined}
+   *         returns nothing.
+   */
+  handleLateInit_(el) {
+    if (el.networkState === 0 || el.networkState === 3) {
+      // The video element hasn't started loading the source yet
+      // or didn't find a source
+      return;
+    }
+    if (el.readyState === 0) {
+      // NetworkState is set synchronously BUT loadstart is fired at the
+      // end of the current stack, usually before setInterval(fn, 0).
+      // So at this point we know loadstart may have already fired or is
+      // about to fire, and either way the player hasn't seen it yet.
+      // We don't want to fire loadstart prematurely here and cause a
+      // double loadstart so we'll wait and see if it happens between now
+      // and the next loop, and fire it if not.
+      // HOWEVER, we also want to make sure it fires before loadedmetadata
+      // which could also happen between now and the next loop, so we'll
+      // watch for that also.
+      let loadstartFired = false;
+      const setLoadstartFired = function () {
+        loadstartFired = true;
+      };
+      this.on('loadstart', setLoadstartFired);
+      const triggerLoadstart = function () {
+        // We did miss the original loadstart. Make sure the player
+        // sees loadstart before loadedmetadata
+        if (!loadstartFired) {
+          this.trigger('loadstart');
+        }
+      };
+      this.on('loadedmetadata', triggerLoadstart);
+      this.ready(function () {
+        this.off('loadstart', setLoadstartFired);
+        this.off('loadedmetadata', triggerLoadstart);
+        if (!loadstartFired) {
+          // We did miss the original native loadstart. Fire it now.
+          this.trigger('loadstart');
+        }
+      });
+      return;
+    }
+
+    // From here on we know that loadstart already fired and we missed it.
+    // The other readyState events aren't as much of a problem if we double
+    // them, so not going to go to as much trouble as loadstart to prevent
+    // that unless we find reason to.
+    const eventsToTrigger = ['loadstart'];
+
+    // loadedmetadata: newly equal to HAVE_METADATA (1) or greater
+    eventsToTrigger.push('loadedmetadata');
+
+    // loadeddata: newly increased to HAVE_CURRENT_DATA (2) or greater
+    if (el.readyState >= 2) {
+      eventsToTrigger.push('loadeddata');
+    }
+
+    // canplay: newly increased to HAVE_FUTURE_DATA (3) or greater
+    if (el.readyState >= 3) {
+      eventsToTrigger.push('canplay');
+    }
+
+    // canplaythrough: newly equal to HAVE_ENOUGH_DATA (4)
+    if (el.readyState >= 4) {
+      eventsToTrigger.push('canplaythrough');
+    }
+
+    // We still need to give the player time to add event listeners
+    this.ready(function () {
+      eventsToTrigger.forEach(function (type) {
+        this.trigger(type);
+      }, this);
+    });
+  }
+
+  /**
+   * Set whether we are scrubbing or not.
+   * This is used to decide whether we should use `fastSeek` or not.
+   * `fastSeek` is used to provide trick play on Safari browsers.
+   *
+   * @param {boolean} isScrubbing
+   *                  - true for we are currently scrubbing
+   *                  - false for we are no longer scrubbing
+   */
+  setScrubbing(isScrubbing) {
+    this.isScrubbing_ = isScrubbing;
+  }
+
+  /**
+   * Get whether we are scrubbing or not.
+   *
+   * @return {boolean} isScrubbing
+   *                  - true for we are currently scrubbing
+   *                  - false for we are no longer scrubbing
+   */
+  scrubbing() {
+    return this.isScrubbing_;
+  }
+
+  /**
+   * Set current time for the `HTML5` tech.
+   *
+   * @param {number} seconds
+   *        Set the current time of the media to this.
+   */
+  setCurrentTime(seconds) {
+    try {
+      if (this.isScrubbing_ && this.el_.fastSeek && IS_ANY_SAFARI) {
+        this.el_.fastSeek(seconds);
+      } else {
+        this.el_.currentTime = seconds;
+      }
+    } catch (e) {
+      log$1(e, 'Video is not ready. (Video.js)');
+      // this.warning(VideoJS.warnings.videoNotReady);
+    }
+  }
+
+  /**
+   * Get the current duration of the HTML5 media element.
+   *
+   * @return {number}
+   *         The duration of the media or 0 if there is no duration.
+   */
+  duration() {
+    // Android Chrome will report duration as Infinity for VOD HLS until after
+    // playback has started, which triggers the live display erroneously.
+    // Return NaN if playback has not started and trigger a durationupdate once
+    // the duration can be reliably known.
+    if (this.el_.duration === Infinity && IS_ANDROID && IS_CHROME && this.el_.currentTime === 0) {
+      // Wait for the first `timeupdate` with currentTime > 0 - there may be
+      // several with 0
+      const checkProgress = () => {
+        if (this.el_.currentTime > 0) {
+          // Trigger durationchange for genuinely live video
+          if (this.el_.duration === Infinity) {
+            this.trigger('durationchange');
+          }
+          this.off('timeupdate', checkProgress);
+        }
+      };
+      this.on('timeupdate', checkProgress);
+      return NaN;
+    }
+    return this.el_.duration || NaN;
+  }
+
+  /**
+   * Get the current width of the HTML5 media element.
+   *
+   * @return {number}
+   *         The width of the HTML5 media element.
+   */
+  width() {
+    return this.el_.offsetWidth;
+  }
+
+  /**
+   * Get the current height of the HTML5 media element.
+   *
+   * @return {number}
+   *         The height of the HTML5 media element.
+   */
+  height() {
+    return this.el_.offsetHeight;
+  }
+
+  /**
+   * Proxy iOS `webkitbeginfullscreen` and `webkitendfullscreen` into
+   * `fullscreenchange` event.
+   *
+   * @private
+   * @fires fullscreenchange
+   * @listens webkitendfullscreen
+   * @listens webkitbeginfullscreen
+   * @listens webkitbeginfullscreen
+   */
+  proxyWebkitFullscreen_() {
+    if (!('webkitDisplayingFullscreen' in this.el_)) {
+      return;
+    }
+    const endFn = function () {
+      this.trigger('fullscreenchange', {
+        isFullscreen: false
+      });
+      // Safari will sometimes set controls on the videoelement when existing fullscreen.
+      if (this.el_.controls && !this.options_.nativeControlsForTouch && this.controls()) {
+        this.el_.controls = false;
+      }
+    };
+    const beginFn = function () {
+      if ('webkitPresentationMode' in this.el_ && this.el_.webkitPresentationMode !== 'picture-in-picture') {
+        this.one('webkitendfullscreen', endFn);
+        this.trigger('fullscreenchange', {
+          isFullscreen: true,
+          // set a flag in case another tech triggers fullscreenchange
+          nativeIOSFullscreen: true
+        });
+      }
+    };
+    this.on('webkitbeginfullscreen', beginFn);
+    this.on('dispose', () => {
+      this.off('webkitbeginfullscreen', beginFn);
+      this.off('webkitendfullscreen', endFn);
+    });
+  }
+
+  /**
+   * Check if fullscreen is supported on the video el.
+   *
+   * @return {boolean}
+   *         - True if fullscreen is supported.
+   *         - False if fullscreen is not supported.
+   */
+  supportsFullScreen() {
+    return typeof this.el_.webkitEnterFullScreen === 'function';
+  }
+
+  /**
+   * Request that the `HTML5` Tech enter fullscreen.
+   */
+  enterFullScreen() {
+    const video = this.el_;
+    if (video.paused && video.networkState <= video.HAVE_METADATA) {
+      // attempt to prime the video element for programmatic access
+      // this isn't necessary on the desktop but shouldn't hurt
+      silencePromise(this.el_.play());
+
+      // playing and pausing synchronously during the transition to fullscreen
+      // can get iOS ~6.1 devices into a play/pause loop
+      this.setTimeout(function () {
+        video.pause();
+        try {
+          video.webkitEnterFullScreen();
+        } catch (e) {
+          this.trigger('fullscreenerror', e);
+        }
+      }, 0);
+    } else {
+      try {
+        video.webkitEnterFullScreen();
+      } catch (e) {
+        this.trigger('fullscreenerror', e);
+      }
+    }
+  }
+
+  /**
+   * Request that the `HTML5` Tech exit fullscreen.
+   */
+  exitFullScreen() {
+    if (!this.el_.webkitDisplayingFullscreen) {
+      this.trigger('fullscreenerror', new Error('The video is not fullscreen'));
+      return;
+    }
+    this.el_.webkitExitFullScreen();
+  }
+
+  /**
+   * Create a floating video window always on top of other windows so that users may
+   * continue consuming media while they interact with other content sites, or
+   * applications on their device.
+   *
+   * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+   *
+   * @return {Promise}
+   *         A promise with a Picture-in-Picture window.
+   */
+  requestPictureInPicture() {
+    return this.el_.requestPictureInPicture();
+  }
+
+  /**
+   * Native requestVideoFrameCallback if supported by browser/tech, or fallback
+   * Don't use rVCF on Safari when DRM is playing, as it doesn't fire
+   * Needs to be checked later than the constructor
+   * This will be a false positive for clear sources loaded after a Fairplay source
+   *
+   * @param {function} cb function to call
+   * @return {number} id of request
+   */
+  requestVideoFrameCallback(cb) {
+    if (this.featuresVideoFrameCallback && !this.el_.webkitKeys) {
+      return this.el_.requestVideoFrameCallback(cb);
+    }
+    return super.requestVideoFrameCallback(cb);
+  }
+
+  /**
+   * Native or fallback requestVideoFrameCallback
+   *
+   * @param {number} id request id to cancel
+   */
+  cancelVideoFrameCallback(id) {
+    if (this.featuresVideoFrameCallback && !this.el_.webkitKeys) {
+      this.el_.cancelVideoFrameCallback(id);
+    } else {
+      super.cancelVideoFrameCallback(id);
+    }
+  }
+
+  /**
+   * A getter/setter for the `Html5` Tech's source object.
+   * > Note: Please use {@link Html5#setSource}
+   *
+   * @param {Tech~SourceObject} [src]
+   *        The source object you want to set on the `HTML5` techs element.
+   *
+   * @return {Tech~SourceObject|undefined}
+   *         - The current source object when a source is not passed in.
+   *         - undefined when setting
+   *
+   * @deprecated Since version 5.
+   */
+  src(src) {
+    if (src === undefined) {
+      return this.el_.src;
+    }
+
+    // Setting src through `src` instead of `setSrc` will be deprecated
+    this.setSrc(src);
+  }
+
+  /**
+   * Reset the tech by removing all sources and then calling
+   * {@link Html5.resetMediaElement}.
+   */
+  reset() {
+    Html5.resetMediaElement(this.el_);
+  }
+
+  /**
+   * Get the current source on the `HTML5` Tech. Falls back to returning the source from
+   * the HTML5 media element.
+   *
+   * @return {Tech~SourceObject}
+   *         The current source object from the HTML5 tech. With a fallback to the
+   *         elements source.
+   */
+  currentSrc() {
+    if (this.currentSource_) {
+      return this.currentSource_.src;
+    }
+    return this.el_.currentSrc;
+  }
+
+  /**
+   * Set controls attribute for the HTML5 media Element.
+   *
+   * @param {string} val
+   *        Value to set the controls attribute to
+   */
+  setControls(val) {
+    this.el_.controls = !!val;
+  }
+
+  /**
+   * Create and returns a remote {@link TextTrack} object.
+   *
+   * @param {string} kind
+   *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+   *
+   * @param {string} [label]
+   *        Label to identify the text track
+   *
+   * @param {string} [language]
+   *        Two letter language abbreviation
+   *
+   * @return {TextTrack}
+   *         The TextTrack that gets created.
+   */
+  addTextTrack(kind, label, language) {
+    if (!this.featuresNativeTextTracks) {
+      return super.addTextTrack(kind, label, language);
+    }
+    return this.el_.addTextTrack(kind, label, language);
+  }
+
+  /**
+   * Creates either native TextTrack or an emulated TextTrack depending
+   * on the value of `featuresNativeTextTracks`
+   *
+   * @param {Object} options
+   *        The object should contain the options to initialize the TextTrack with.
+   *
+   * @param {string} [options.kind]
+   *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+   *
+   * @param {string} [options.label]
+   *        Label to identify the text track
+   *
+   * @param {string} [options.language]
+   *        Two letter language abbreviation.
+   *
+   * @param {boolean} [options.default]
+   *        Default this track to on.
+   *
+   * @param {string} [options.id]
+   *        The internal id to assign this track.
+   *
+   * @param {string} [options.src]
+   *        A source url for the track.
+   *
+   * @return {HTMLTrackElement}
+   *         The track element that gets created.
+   */
+  createRemoteTextTrack(options) {
+    if (!this.featuresNativeTextTracks) {
+      return super.createRemoteTextTrack(options);
+    }
+    const htmlTrackElement = document.createElement('track');
+    if (options.kind) {
+      htmlTrackElement.kind = options.kind;
+    }
+    if (options.label) {
+      htmlTrackElement.label = options.label;
+    }
+    if (options.language || options.srclang) {
+      htmlTrackElement.srclang = options.language || options.srclang;
+    }
+    if (options.default) {
+      htmlTrackElement.default = options.default;
+    }
+    if (options.id) {
+      htmlTrackElement.id = options.id;
+    }
+    if (options.src) {
+      htmlTrackElement.src = options.src;
+    }
+    return htmlTrackElement;
+  }
+
+  /**
+   * Creates a remote text track object and returns an html track element.
+   *
+   * @param {Object} options The object should contain values for
+   * kind, language, label, and src (location of the WebVTT file)
+   * @param {boolean} [manualCleanup=false] if set to true, the TextTrack
+   * will not be removed from the TextTrackList and HtmlTrackElementList
+   * after a source change
+   * @return {HTMLTrackElement} An Html Track Element.
+   * This can be an emulated {@link HTMLTrackElement} or a native one.
+   *
+   */
+  addRemoteTextTrack(options, manualCleanup) {
+    const htmlTrackElement = super.addRemoteTextTrack(options, manualCleanup);
+    if (this.featuresNativeTextTracks) {
+      this.el().appendChild(htmlTrackElement);
+    }
+    return htmlTrackElement;
+  }
+
+  /**
+   * Remove remote `TextTrack` from `TextTrackList` object
+   *
+   * @param {TextTrack} track
+   *        `TextTrack` object to remove
+   */
+  removeRemoteTextTrack(track) {
+    super.removeRemoteTextTrack(track);
+    if (this.featuresNativeTextTracks) {
+      const tracks = this.$$('track');
+      let i = tracks.length;
+      while (i--) {
+        if (track === tracks[i] || track === tracks[i].track) {
+          this.el().removeChild(tracks[i]);
+        }
+      }
+    }
+  }
+
+  /**
+   * Gets available media playback quality metrics as specified by the W3C's Media
+   * Playback Quality API.
+   *
+   * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+   *
+   * @return {Object}
+   *         An object with supported media playback quality metrics
+   */
+  getVideoPlaybackQuality() {
+    if (typeof this.el().getVideoPlaybackQuality === 'function') {
+      return this.el().getVideoPlaybackQuality();
+    }
+    const videoPlaybackQuality = {};
+    if (typeof this.el().webkitDroppedFrameCount !== 'undefined' && typeof this.el().webkitDecodedFrameCount !== 'undefined') {
+      videoPlaybackQuality.droppedVideoFrames = this.el().webkitDroppedFrameCount;
+      videoPlaybackQuality.totalVideoFrames = this.el().webkitDecodedFrameCount;
+    }
+    if (window$1.performance) {
+      videoPlaybackQuality.creationTime = window$1.performance.now();
+    }
+    return videoPlaybackQuality;
+  }
+}
+
+/* HTML5 Support Testing ---------------------------------------------------- */
+
+/**
+ * Element for testing browser HTML5 media capabilities
+ *
+ * @type {Element}
+ * @constant
+ * @private
+ */
+defineLazyProperty(Html5, 'TEST_VID', function () {
+  if (!isReal()) {
+    return;
+  }
+  const video = document.createElement('video');
+  const track = document.createElement('track');
+  track.kind = 'captions';
+  track.srclang = 'en';
+  track.label = 'English';
+  video.appendChild(track);
+  return video;
+});
+
+/**
+ * Check if HTML5 media is supported by this browser/device.
+ *
+ * @return {boolean}
+ *         - True if HTML5 media is supported.
+ *         - False if HTML5 media is not supported.
+ */
+Html5.isSupported = function () {
+  // IE with no Media Player is a LIAR! (#984)
+  try {
+    Html5.TEST_VID.volume = 0.5;
+  } catch (e) {
+    return false;
+  }
+  return !!(Html5.TEST_VID && Html5.TEST_VID.canPlayType);
+};
+
+/**
+ * Check if the tech can support the given type
+ *
+ * @param {string} type
+ *        The mimetype to check
+ * @return {string} 'probably', 'maybe', or '' (empty string)
+ */
+Html5.canPlayType = function (type) {
+  return Html5.TEST_VID.canPlayType(type);
+};
+
+/**
+ * Check if the tech can support the given source
+ *
+ * @param {Object} srcObj
+ *        The source object
+ * @param {Object} options
+ *        The options passed to the tech
+ * @return {string} 'probably', 'maybe', or '' (empty string)
+ */
+Html5.canPlaySource = function (srcObj, options) {
+  return Html5.canPlayType(srcObj.type);
+};
+
+/**
+ * Check if the volume can be changed in this browser/device.
+ * Volume cannot be changed in a lot of mobile devices.
+ * Specifically, it can't be changed from 1 on iOS.
+ *
+ * @return {boolean}
+ *         - True if volume can be controlled
+ *         - False otherwise
+ */
+Html5.canControlVolume = function () {
+  // IE will error if Windows Media Player not installed #3315
+  try {
+    const volume = Html5.TEST_VID.volume;
+    Html5.TEST_VID.volume = volume / 2 + 0.1;
+    const canControl = volume !== Html5.TEST_VID.volume;
+
+    // With the introduction of iOS 15, there are cases where the volume is read as
+    // changed but reverts back to its original state at the start of the next tick.
+    // To determine whether volume can be controlled on iOS,
+    // a timeout is set and the volume is checked asynchronously.
+    // Since `features` doesn't currently work asynchronously, the value is manually set.
+    if (canControl && IS_IOS) {
+      window$1.setTimeout(() => {
+        if (Html5 && Html5.prototype) {
+          Html5.prototype.featuresVolumeControl = volume !== Html5.TEST_VID.volume;
+        }
+      });
+
+      // default iOS to false, which will be updated in the timeout above.
+      return false;
+    }
+    return canControl;
+  } catch (e) {
+    return false;
+  }
+};
+
+/**
+ * Check if the volume can be muted in this browser/device.
+ * Some devices, e.g. iOS, don't allow changing volume
+ * but permits muting/unmuting.
+ *
+ * @return {boolean}
+ *      - True if volume can be muted
+ *      - False otherwise
+ */
+Html5.canMuteVolume = function () {
+  try {
+    const muted = Html5.TEST_VID.muted;
+
+    // in some versions of iOS muted property doesn't always
+    // work, so we want to set both property and attribute
+    Html5.TEST_VID.muted = !muted;
+    if (Html5.TEST_VID.muted) {
+      setAttribute(Html5.TEST_VID, 'muted', 'muted');
+    } else {
+      removeAttribute(Html5.TEST_VID, 'muted', 'muted');
+    }
+    return muted !== Html5.TEST_VID.muted;
+  } catch (e) {
+    return false;
+  }
+};
+
+/**
+ * Check if the playback rate can be changed in this browser/device.
+ *
+ * @return {boolean}
+ *         - True if playback rate can be controlled
+ *         - False otherwise
+ */
+Html5.canControlPlaybackRate = function () {
+  // Playback rate API is implemented in Android Chrome, but doesn't do anything
+  // https://github.com/videojs/video.js/issues/3180
+  if (IS_ANDROID && IS_CHROME && CHROME_VERSION < 58) {
+    return false;
+  }
+  // IE will error if Windows Media Player not installed #3315
+  try {
+    const playbackRate = Html5.TEST_VID.playbackRate;
+    Html5.TEST_VID.playbackRate = playbackRate / 2 + 0.1;
+    return playbackRate !== Html5.TEST_VID.playbackRate;
+  } catch (e) {
+    return false;
+  }
+};
+
+/**
+ * Check if we can override a video/audio elements attributes, with
+ * Object.defineProperty.
+ *
+ * @return {boolean}
+ *         - True if builtin attributes can be overridden
+ *         - False otherwise
+ */
+Html5.canOverrideAttributes = function () {
+  // if we cannot overwrite the src/innerHTML property, there is no support
+  // iOS 7 safari for instance cannot do this.
+  try {
+    const noop = () => {};
+    Object.defineProperty(document.createElement('video'), 'src', {
+      get: noop,
+      set: noop
+    });
+    Object.defineProperty(document.createElement('audio'), 'src', {
+      get: noop,
+      set: noop
+    });
+    Object.defineProperty(document.createElement('video'), 'innerHTML', {
+      get: noop,
+      set: noop
+    });
+    Object.defineProperty(document.createElement('audio'), 'innerHTML', {
+      get: noop,
+      set: noop
+    });
+  } catch (e) {
+    return false;
+  }
+  return true;
+};
+
+/**
+ * Check to see if native `TextTrack`s are supported by this browser/device.
+ *
+ * @return {boolean}
+ *         - True if native `TextTrack`s are supported.
+ *         - False otherwise
+ */
+Html5.supportsNativeTextTracks = function () {
+  return IS_ANY_SAFARI || IS_IOS && IS_CHROME;
+};
+
+/**
+ * Check to see if native `VideoTrack`s are supported by this browser/device
+ *
+ * @return {boolean}
+ *        - True if native `VideoTrack`s are supported.
+ *        - False otherwise
+ */
+Html5.supportsNativeVideoTracks = function () {
+  return !!(Html5.TEST_VID && Html5.TEST_VID.videoTracks);
+};
+
+/**
+ * Check to see if native `AudioTrack`s are supported by this browser/device
+ *
+ * @return {boolean}
+ *        - True if native `AudioTrack`s are supported.
+ *        - False otherwise
+ */
+Html5.supportsNativeAudioTracks = function () {
+  return !!(Html5.TEST_VID && Html5.TEST_VID.audioTracks);
+};
+
+/**
+ * An array of events available on the Html5 tech.
+ *
+ * @private
+ * @type {Array}
+ */
+Html5.Events = ['loadstart', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'seeking', 'seeked', 'ended', 'durationchange', 'timeupdate', 'progress', 'play', 'pause', 'ratechange', 'resize', 'volumechange'];
+
+/**
+ * Boolean indicating whether the `Tech` supports volume control.
+ *
+ * @type {boolean}
+ * @default {@link Html5.canControlVolume}
+ */
+/**
+ * Boolean indicating whether the `Tech` supports muting volume.
+ *
+ * @type {boolean}
+ * @default {@link Html5.canMuteVolume}
+ */
+
+/**
+ * Boolean indicating whether the `Tech` supports changing the speed at which the media
+ * plays. Examples:
+ *   - Set player to play 2x (twice) as fast
+ *   - Set player to play 0.5x (half) as fast
+ *
+ * @type {boolean}
+ * @default {@link Html5.canControlPlaybackRate}
+ */
+
+/**
+ * Boolean indicating whether the `Tech` supports the `sourceset` event.
+ *
+ * @type {boolean}
+ * @default
+ */
+/**
+ * Boolean indicating whether the `HTML5` tech currently supports native `TextTrack`s.
+ *
+ * @type {boolean}
+ * @default {@link Html5.supportsNativeTextTracks}
+ */
+/**
+ * Boolean indicating whether the `HTML5` tech currently supports native `VideoTrack`s.
+ *
+ * @type {boolean}
+ * @default {@link Html5.supportsNativeVideoTracks}
+ */
+/**
+ * Boolean indicating whether the `HTML5` tech currently supports native `AudioTrack`s.
+ *
+ * @type {boolean}
+ * @default {@link Html5.supportsNativeAudioTracks}
+ */
+[['featuresMuteControl', 'canMuteVolume'], ['featuresPlaybackRate', 'canControlPlaybackRate'], ['featuresSourceset', 'canOverrideAttributes'], ['featuresNativeTextTracks', 'supportsNativeTextTracks'], ['featuresNativeVideoTracks', 'supportsNativeVideoTracks'], ['featuresNativeAudioTracks', 'supportsNativeAudioTracks']].forEach(function ([key, fn]) {
+  defineLazyProperty(Html5.prototype, key, () => Html5[fn](), true);
+});
+Html5.prototype.featuresVolumeControl = Html5.canControlVolume();
+
+/**
+ * Boolean indicating whether the `HTML5` tech currently supports the media element
+ * moving in the DOM. iOS breaks if you move the media element, so this is set this to
+ * false there. Everywhere else this should be true.
+ *
+ * @type {boolean}
+ * @default
+ */
+Html5.prototype.movingMediaElementInDOM = !IS_IOS;
+
+// TODO: Previous comment: No longer appears to be used. Can probably be removed.
+//       Is this true?
+/**
+ * Boolean indicating whether the `HTML5` tech currently supports automatic media resize
+ * when going into fullscreen.
+ *
+ * @type {boolean}
+ * @default
+ */
+Html5.prototype.featuresFullscreenResize = true;
+
+/**
+ * Boolean indicating whether the `HTML5` tech currently supports the progress event.
+ * If this is false, manual `progress` events will be triggered instead.
+ *
+ * @type {boolean}
+ * @default
+ */
+Html5.prototype.featuresProgressEvents = true;
+
+/**
+ * Boolean indicating whether the `HTML5` tech currently supports the timeupdate event.
+ * If this is false, manual `timeupdate` events will be triggered instead.
+ *
+ * @default
+ */
+Html5.prototype.featuresTimeupdateEvents = true;
+
+/**
+ * Whether the HTML5 el supports `requestVideoFrameCallback`
+ *
+ * @type {boolean}
+ */
+Html5.prototype.featuresVideoFrameCallback = !!(Html5.TEST_VID && Html5.TEST_VID.requestVideoFrameCallback);
+Html5.disposeMediaElement = function (el) {
+  if (!el) {
+    return;
+  }
+  if (el.parentNode) {
+    el.parentNode.removeChild(el);
+  }
+
+  // remove any child track or source nodes to prevent their loading
+  while (el.hasChildNodes()) {
+    el.removeChild(el.firstChild);
+  }
+
+  // remove any src reference. not setting `src=''` because that causes a warning
+  // in firefox
+  el.removeAttribute('src');
+
+  // force the media element to update its loading state by calling load()
+  // however IE on Windows 7N has a bug that throws an error so need a try/catch (#793)
+  if (typeof el.load === 'function') {
+    // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+    (function () {
+      try {
+        el.load();
+      } catch (e) {
+        // not supported
+      }
+    })();
+  }
+};
+Html5.resetMediaElement = function (el) {
+  if (!el) {
+    return;
+  }
+  const sources = el.querySelectorAll('source');
+  let i = sources.length;
+  while (i--) {
+    el.removeChild(sources[i]);
+  }
+
+  // remove any src reference.
+  // not setting `src=''` because that throws an error
+  el.removeAttribute('src');
+  if (typeof el.load === 'function') {
+    // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+    (function () {
+      try {
+        el.load();
+      } catch (e) {
+        // satisfy linter
+      }
+    })();
+  }
+};
+
+/* Native HTML5 element property wrapping ----------------------------------- */
+// Wrap native boolean attributes with getters that check both property and attribute
+// The list is as followed:
+// muted, defaultMuted, autoplay, controls, loop, playsinline
+[
+/**
+ * Get the value of `muted` from the media element. `muted` indicates
+ * that the volume for the media should be set to silent. This does not actually change
+ * the `volume` attribute.
+ *
+ * @method Html5#muted
+ * @return {boolean}
+ *         - True if the value of `volume` should be ignored and the audio set to silent.
+ *         - False if the value of `volume` should be used.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted}
+ */
+'muted',
+/**
+ * Get the value of `defaultMuted` from the media element. `defaultMuted` indicates
+ * whether the media should start muted or not. Only changes the default state of the
+ * media. `muted` and `defaultMuted` can have different values. {@link Html5#muted} indicates the
+ * current state.
+ *
+ * @method Html5#defaultMuted
+ * @return {boolean}
+ *         - The value of `defaultMuted` from the media element.
+ *         - True indicates that the media should start muted.
+ *         - False indicates that the media should not start muted
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted}
+ */
+'defaultMuted',
+/**
+ * Get the value of `autoplay` from the media element. `autoplay` indicates
+ * that the media should start to play as soon as the page is ready.
+ *
+ * @method Html5#autoplay
+ * @return {boolean}
+ *         - The value of `autoplay` from the media element.
+ *         - True indicates that the media should start as soon as the page loads.
+ *         - False indicates that the media should not start as soon as the page loads.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay}
+ */
+'autoplay',
+/**
+ * Get the value of `controls` from the media element. `controls` indicates
+ * whether the native media controls should be shown or hidden.
+ *
+ * @method Html5#controls
+ * @return {boolean}
+ *         - The value of `controls` from the media element.
+ *         - True indicates that native controls should be showing.
+ *         - False indicates that native controls should be hidden.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-controls}
+ */
+'controls',
+/**
+ * Get the value of `loop` from the media element. `loop` indicates
+ * that the media should return to the start of the media and continue playing once
+ * it reaches the end.
+ *
+ * @method Html5#loop
+ * @return {boolean}
+ *         - The value of `loop` from the media element.
+ *         - True indicates that playback should seek back to start once
+ *           the end of a media is reached.
+ *         - False indicates that playback should not loop back to the start when the
+ *           end of the media is reached.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop}
+ */
+'loop',
+/**
+ * Get the value of `playsinline` from the media element. `playsinline` indicates
+ * to the browser that non-fullscreen playback is preferred when fullscreen
+ * playback is the native default, such as in iOS Safari.
+ *
+ * @method Html5#playsinline
+ * @return {boolean}
+ *         - The value of `playsinline` from the media element.
+ *         - True indicates that the media should play inline.
+ *         - False indicates that the media should not play inline.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+ */
+'playsinline'].forEach(function (prop) {
+  Html5.prototype[prop] = function () {
+    return this.el_[prop] || this.el_.hasAttribute(prop);
+  };
+});
+
+// Wrap native boolean attributes with setters that set both property and attribute
+// The list is as followed:
+// setMuted, setDefaultMuted, setAutoplay, setLoop, setPlaysinline
+// setControls is special-cased above
+[
+/**
+ * Set the value of `muted` on the media element. `muted` indicates that the current
+ * audio level should be silent.
+ *
+ * @method Html5#setMuted
+ * @param {boolean} muted
+ *        - True if the audio should be set to silent
+ *        - False otherwise
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted}
+ */
+'muted',
+/**
+ * Set the value of `defaultMuted` on the media element. `defaultMuted` indicates that the current
+ * audio level should be silent, but will only effect the muted level on initial playback..
+ *
+ * @method Html5.prototype.setDefaultMuted
+ * @param {boolean} defaultMuted
+ *        - True if the audio should be set to silent
+ *        - False otherwise
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted}
+ */
+'defaultMuted',
+/**
+ * Set the value of `autoplay` on the media element. `autoplay` indicates
+ * that the media should start to play as soon as the page is ready.
+ *
+ * @method Html5#setAutoplay
+ * @param {boolean} autoplay
+ *         - True indicates that the media should start as soon as the page loads.
+ *         - False indicates that the media should not start as soon as the page loads.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay}
+ */
+'autoplay',
+/**
+ * Set the value of `loop` on the media element. `loop` indicates
+ * that the media should return to the start of the media and continue playing once
+ * it reaches the end.
+ *
+ * @method Html5#setLoop
+ * @param {boolean} loop
+ *         - True indicates that playback should seek back to start once
+ *           the end of a media is reached.
+ *         - False indicates that playback should not loop back to the start when the
+ *           end of the media is reached.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop}
+ */
+'loop',
+/**
+ * Set the value of `playsinline` from the media element. `playsinline` indicates
+ * to the browser that non-fullscreen playback is preferred when fullscreen
+ * playback is the native default, such as in iOS Safari.
+ *
+ * @method Html5#setPlaysinline
+ * @param {boolean} playsinline
+ *         - True indicates that the media should play inline.
+ *         - False indicates that the media should not play inline.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+ */
+'playsinline'].forEach(function (prop) {
+  Html5.prototype['set' + toTitleCase$1(prop)] = function (v) {
+    this.el_[prop] = v;
+    if (v) {
+      this.el_.setAttribute(prop, prop);
+    } else {
+      this.el_.removeAttribute(prop);
+    }
+  };
+});
+
+// Wrap native properties with a getter
+// The list is as followed
+// paused, currentTime, buffered, volume, poster, preload, error, seeking
+// seekable, ended, playbackRate, defaultPlaybackRate, disablePictureInPicture
+// played, networkState, readyState, videoWidth, videoHeight, crossOrigin
+[
+/**
+ * Get the value of `paused` from the media element. `paused` indicates whether the media element
+ * is currently paused or not.
+ *
+ * @method Html5#paused
+ * @return {boolean}
+ *         The value of `paused` from the media element.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-paused}
+ */
+'paused',
+/**
+ * Get the value of `currentTime` from the media element. `currentTime` indicates
+ * the current second that the media is at in playback.
+ *
+ * @method Html5#currentTime
+ * @return {number}
+ *         The value of `currentTime` from the media element.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-currenttime}
+ */
+'currentTime',
+/**
+ * Get the value of `buffered` from the media element. `buffered` is a `TimeRange`
+ * object that represents the parts of the media that are already downloaded and
+ * available for playback.
+ *
+ * @method Html5#buffered
+ * @return {TimeRange}
+ *         The value of `buffered` from the media element.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-buffered}
+ */
+'buffered',
+/**
+ * Get the value of `volume` from the media element. `volume` indicates
+ * the current playback volume of audio for a media. `volume` will be a value from 0
+ * (silent) to 1 (loudest and default).
+ *
+ * @method Html5#volume
+ * @return {number}
+ *         The value of `volume` from the media element. Value will be between 0-1.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume}
+ */
+'volume',
+/**
+ * Get the value of `poster` from the media element. `poster` indicates
+ * that the url of an image file that can/will be shown when no media data is available.
+ *
+ * @method Html5#poster
+ * @return {string}
+ *         The value of `poster` from the media element. Value will be a url to an
+ *         image.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-video-poster}
+ */
+'poster',
+/**
+ * Get the value of `preload` from the media element. `preload` indicates
+ * what should download before the media is interacted with. It can have the following
+ * values:
+ * - none: nothing should be downloaded
+ * - metadata: poster and the first few frames of the media may be downloaded to get
+ *   media dimensions and other metadata
+ * - auto: allow the media and metadata for the media to be downloaded before
+ *    interaction
+ *
+ * @method Html5#preload
+ * @return {string}
+ *         The value of `preload` from the media element. Will be 'none', 'metadata',
+ *         or 'auto'.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload}
+ */
+'preload',
+/**
+ * Get the value of the `error` from the media element. `error` indicates any
+ * MediaError that may have occurred during playback. If error returns null there is no
+ * current error.
+ *
+ * @method Html5#error
+ * @return {MediaError|null}
+ *         The value of `error` from the media element. Will be `MediaError` if there
+ *         is a current error and null otherwise.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-error}
+ */
+'error',
+/**
+ * Get the value of `seeking` from the media element. `seeking` indicates whether the
+ * media is currently seeking to a new position or not.
+ *
+ * @method Html5#seeking
+ * @return {boolean}
+ *         - The value of `seeking` from the media element.
+ *         - True indicates that the media is currently seeking to a new position.
+ *         - False indicates that the media is not seeking to a new position at this time.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seeking}
+ */
+'seeking',
+/**
+ * Get the value of `seekable` from the media element. `seekable` returns a
+ * `TimeRange` object indicating ranges of time that can currently be `seeked` to.
+ *
+ * @method Html5#seekable
+ * @return {TimeRange}
+ *         The value of `seekable` from the media element. A `TimeRange` object
+ *         indicating the current ranges of time that can be seeked to.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seekable}
+ */
+'seekable',
+/**
+ * Get the value of `ended` from the media element. `ended` indicates whether
+ * the media has reached the end or not.
+ *
+ * @method Html5#ended
+ * @return {boolean}
+ *         - The value of `ended` from the media element.
+ *         - True indicates that the media has ended.
+ *         - False indicates that the media has not ended.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-ended}
+ */
+'ended',
+/**
+ * Get the value of `playbackRate` from the media element. `playbackRate` indicates
+ * the rate at which the media is currently playing back. Examples:
+ *   - if playbackRate is set to 2, media will play twice as fast.
+ *   - if playbackRate is set to 0.5, media will play half as fast.
+ *
+ * @method Html5#playbackRate
+ * @return {number}
+ *         The value of `playbackRate` from the media element. A number indicating
+ *         the current playback speed of the media, where 1 is normal speed.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+ */
+'playbackRate',
+/**
+ * Get the value of `defaultPlaybackRate` from the media element. `defaultPlaybackRate` indicates
+ * the rate at which the media is currently playing back. This value will not indicate the current
+ * `playbackRate` after playback has started, use {@link Html5#playbackRate} for that.
+ *
+ * Examples:
+ *   - if defaultPlaybackRate is set to 2, media will play twice as fast.
+ *   - if defaultPlaybackRate is set to 0.5, media will play half as fast.
+ *
+ * @method Html5.prototype.defaultPlaybackRate
+ * @return {number}
+ *         The value of `defaultPlaybackRate` from the media element. A number indicating
+ *         the current playback speed of the media, where 1 is normal speed.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+ */
+'defaultPlaybackRate',
+/**
+ * Get the value of 'disablePictureInPicture' from the video element.
+ *
+ * @method Html5#disablePictureInPicture
+ * @return {boolean} value
+ *         - The value of `disablePictureInPicture` from the video element.
+ *         - True indicates that the video can't be played in Picture-In-Picture mode
+ *         - False indicates that the video can be played in Picture-In-Picture mode
+ *
+ * @see [Spec]{@link https://w3c.github.io/picture-in-picture/#disable-pip}
+ */
+'disablePictureInPicture',
+/**
+ * Get the value of `played` from the media element. `played` returns a `TimeRange`
+ * object representing points in the media timeline that have been played.
+ *
+ * @method Html5#played
+ * @return {TimeRange}
+ *         The value of `played` from the media element. A `TimeRange` object indicating
+ *         the ranges of time that have been played.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-played}
+ */
+'played',
+/**
+ * Get the value of `networkState` from the media element. `networkState` indicates
+ * the current network state. It returns an enumeration from the following list:
+ * - 0: NETWORK_EMPTY
+ * - 1: NETWORK_IDLE
+ * - 2: NETWORK_LOADING
+ * - 3: NETWORK_NO_SOURCE
+ *
+ * @method Html5#networkState
+ * @return {number}
+ *         The value of `networkState` from the media element. This will be a number
+ *         from the list in the description.
+ *
+ * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-networkstate}
+ */
+'networkState',
+/**
+ * Get the value of `readyState` from the media element. `readyState` indicates
+ * the current state of the media element. It returns an enumeration from the
+ * following list:
+ * - 0: HAVE_NOTHING
+ * - 1: HAVE_METADATA
+ * - 2: HAVE_CURRENT_DATA
+ * - 3: HAVE_FUTURE_DATA
+ * - 4: HAVE_ENOUGH_DATA
+ *
+ * @method Html5#readyState
+ * @return {number}
+ *         The value of `readyState` from the media element. This will be a number
+ *         from the list in the description.
+ *
+ * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#ready-states}
+ */
+'readyState',
+/**
+ * Get the value of `videoWidth` from the video element. `videoWidth` indicates
+ * the current width of the video in css pixels.
+ *
+ * @method Html5#videoWidth
+ * @return {number}
+ *         The value of `videoWidth` from the video element. This will be a number
+ *         in css pixels.
+ *
+ * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth}
+ */
+'videoWidth',
+/**
+ * Get the value of `videoHeight` from the video element. `videoHeight` indicates
+ * the current height of the video in css pixels.
+ *
+ * @method Html5#videoHeight
+ * @return {number}
+ *         The value of `videoHeight` from the video element. This will be a number
+ *         in css pixels.
+ *
+ * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth}
+ */
+'videoHeight',
+/**
+ * Get the value of `crossOrigin` from the media element. `crossOrigin` indicates
+ * to the browser that should sent the cookies along with the requests for the
+ * different assets/playlists
+ *
+ * @method Html5#crossOrigin
+ * @return {string}
+ *         - anonymous indicates that the media should not sent cookies.
+ *         - use-credentials indicates that the media should sent cookies along the requests.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/#attr-media-crossorigin}
+ */
+'crossOrigin'].forEach(function (prop) {
+  Html5.prototype[prop] = function () {
+    return this.el_[prop];
+  };
+});
+
+// Wrap native properties with a setter in this format:
+// set + toTitleCase(name)
+// The list is as follows:
+// setVolume, setSrc, setPoster, setPreload, setPlaybackRate, setDefaultPlaybackRate,
+// setDisablePictureInPicture, setCrossOrigin
+[
+/**
+ * Set the value of `volume` on the media element. `volume` indicates the current
+ * audio level as a percentage in decimal form. This means that 1 is 100%, 0.5 is 50%, and
+ * so on.
+ *
+ * @method Html5#setVolume
+ * @param {number} percentAsDecimal
+ *        The volume percent as a decimal. Valid range is from 0-1.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume}
+ */
+'volume',
+/**
+ * Set the value of `src` on the media element. `src` indicates the current
+ * {@link Tech~SourceObject} for the media.
+ *
+ * @method Html5#setSrc
+ * @param {Tech~SourceObject} src
+ *        The source object to set as the current source.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-src}
+ */
+'src',
+/**
+ * Set the value of `poster` on the media element. `poster` is the url to
+ * an image file that can/will be shown when no media data is available.
+ *
+ * @method Html5#setPoster
+ * @param {string} poster
+ *        The url to an image that should be used as the `poster` for the media
+ *        element.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-poster}
+ */
+'poster',
+/**
+ * Set the value of `preload` on the media element. `preload` indicates
+ * what should download before the media is interacted with. It can have the following
+ * values:
+ * - none: nothing should be downloaded
+ * - metadata: poster and the first few frames of the media may be downloaded to get
+ *   media dimensions and other metadata
+ * - auto: allow the media and metadata for the media to be downloaded before
+ *    interaction
+ *
+ * @method Html5#setPreload
+ * @param {string} preload
+ *         The value of `preload` to set on the media element. Must be 'none', 'metadata',
+ *         or 'auto'.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload}
+ */
+'preload',
+/**
+ * Set the value of `playbackRate` on the media element. `playbackRate` indicates
+ * the rate at which the media should play back. Examples:
+ *   - if playbackRate is set to 2, media will play twice as fast.
+ *   - if playbackRate is set to 0.5, media will play half as fast.
+ *
+ * @method Html5#setPlaybackRate
+ * @return {number}
+ *         The value of `playbackRate` from the media element. A number indicating
+ *         the current playback speed of the media, where 1 is normal speed.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+ */
+'playbackRate',
+/**
+ * Set the value of `defaultPlaybackRate` on the media element. `defaultPlaybackRate` indicates
+ * the rate at which the media should play back upon initial startup. Changing this value
+ * after a video has started will do nothing. Instead you should used {@link Html5#setPlaybackRate}.
+ *
+ * Example Values:
+ *   - if playbackRate is set to 2, media will play twice as fast.
+ *   - if playbackRate is set to 0.5, media will play half as fast.
+ *
+ * @method Html5.prototype.setDefaultPlaybackRate
+ * @return {number}
+ *         The value of `defaultPlaybackRate` from the media element. A number indicating
+ *         the current playback speed of the media, where 1 is normal speed.
+ *
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultplaybackrate}
+ */
+'defaultPlaybackRate',
+/**
+ * Prevents the browser from suggesting a Picture-in-Picture context menu
+ * or to request Picture-in-Picture automatically in some cases.
+ *
+ * @method Html5#setDisablePictureInPicture
+ * @param {boolean} value
+ *         The true value will disable Picture-in-Picture mode.
+ *
+ * @see [Spec]{@link https://w3c.github.io/picture-in-picture/#disable-pip}
+ */
+'disablePictureInPicture',
+/**
+ * Set the value of `crossOrigin` from the media element. `crossOrigin` indicates
+ * to the browser that should sent the cookies along with the requests for the
+ * different assets/playlists
+ *
+ * @method Html5#setCrossOrigin
+ * @param {string} crossOrigin
+ *         - anonymous indicates that the media should not sent cookies.
+ *         - use-credentials indicates that the media should sent cookies along the requests.
+ *
+ * @see [Spec]{@link https://html.spec.whatwg.org/#attr-media-crossorigin}
+ */
+'crossOrigin'].forEach(function (prop) {
+  Html5.prototype['set' + toTitleCase$1(prop)] = function (v) {
+    this.el_[prop] = v;
+  };
+});
+
+// wrap native functions with a function
+// The list is as follows:
+// pause, load, play
+[
+/**
+ * A wrapper around the media elements `pause` function. This will call the `HTML5`
+ * media elements `pause` function.
+ *
+ * @method Html5#pause
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-pause}
+ */
+'pause',
+/**
+ * A wrapper around the media elements `load` function. This will call the `HTML5`s
+ * media element `load` function.
+ *
+ * @method Html5#load
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-load}
+ */
+'load',
+/**
+ * A wrapper around the media elements `play` function. This will call the `HTML5`s
+ * media element `play` function.
+ *
+ * @method Html5#play
+ * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-play}
+ */
+'play'].forEach(function (prop) {
+  Html5.prototype[prop] = function () {
+    return this.el_[prop]();
+  };
+});
+Tech.withSourceHandlers(Html5);
+
+/**
+ * Native source handler for Html5, simply passes the source to the media element.
+ *
+ * @property {Tech~SourceObject} source
+ *        The source object
+ *
+ * @property {Html5} tech
+ *        The instance of the HTML5 tech.
+ */
+Html5.nativeSourceHandler = {};
+
+/**
+ * Check if the media element can play the given mime type.
+ *
+ * @param {string} type
+ *        The mimetype to check
+ *
+ * @return {string}
+ *         'probably', 'maybe', or '' (empty string)
+ */
+Html5.nativeSourceHandler.canPlayType = function (type) {
+  // IE without MediaPlayer throws an error (#519)
+  try {
+    return Html5.TEST_VID.canPlayType(type);
+  } catch (e) {
+    return '';
+  }
+};
+
+/**
+ * Check if the media element can handle a source natively.
+ *
+ * @param {Tech~SourceObject} source
+ *         The source object
+ *
+ * @param {Object} [options]
+ *         Options to be passed to the tech.
+ *
+ * @return {string}
+ *         'probably', 'maybe', or '' (empty string).
+ */
+Html5.nativeSourceHandler.canHandleSource = function (source, options) {
+  // If a type was provided we should rely on that
+  if (source.type) {
+    return Html5.nativeSourceHandler.canPlayType(source.type);
+
+    // If no type, fall back to checking 'video/[EXTENSION]'
+  } else if (source.src) {
+    const ext = getFileExtension(source.src);
+    return Html5.nativeSourceHandler.canPlayType(`video/${ext}`);
+  }
+  return '';
+};
+
+/**
+ * Pass the source to the native media element.
+ *
+ * @param {Tech~SourceObject} source
+ *        The source object
+ *
+ * @param {Html5} tech
+ *        The instance of the Html5 tech
+ *
+ * @param {Object} [options]
+ *        The options to pass to the source
+ */
+Html5.nativeSourceHandler.handleSource = function (source, tech, options) {
+  tech.setSrc(source.src);
+};
+
+/**
+ * A noop for the native dispose function, as cleanup is not needed.
+ */
+Html5.nativeSourceHandler.dispose = function () {};
+
+// Register the native source handler
+Html5.registerSourceHandler(Html5.nativeSourceHandler);
+Tech.registerTech('Html5', Html5);
+
+/**
+ * @file player.js
+ */
+
+// The following tech events are simply re-triggered
+// on the player when they happen
+const TECH_EVENTS_RETRIGGER = [
+/**
+ * Fired while the user agent is downloading media data.
+ *
+ * @event Player#progress
+ * @type {Event}
+ */
+/**
+ * Retrigger the `progress` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechProgress_
+ * @fires Player#progress
+ * @listens Tech#progress
+ */
+'progress',
+/**
+ * Fires when the loading of an audio/video is aborted.
+ *
+ * @event Player#abort
+ * @type {Event}
+ */
+/**
+ * Retrigger the `abort` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechAbort_
+ * @fires Player#abort
+ * @listens Tech#abort
+ */
+'abort',
+/**
+ * Fires when the browser is intentionally not getting media data.
+ *
+ * @event Player#suspend
+ * @type {Event}
+ */
+/**
+ * Retrigger the `suspend` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechSuspend_
+ * @fires Player#suspend
+ * @listens Tech#suspend
+ */
+'suspend',
+/**
+ * Fires when the current playlist is empty.
+ *
+ * @event Player#emptied
+ * @type {Event}
+ */
+/**
+ * Retrigger the `emptied` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechEmptied_
+ * @fires Player#emptied
+ * @listens Tech#emptied
+ */
+'emptied',
+/**
+ * Fires when the browser is trying to get media data, but data is not available.
+ *
+ * @event Player#stalled
+ * @type {Event}
+ */
+/**
+ * Retrigger the `stalled` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechStalled_
+ * @fires Player#stalled
+ * @listens Tech#stalled
+ */
+'stalled',
+/**
+ * Fires when the browser has loaded meta data for the audio/video.
+ *
+ * @event Player#loadedmetadata
+ * @type {Event}
+ */
+/**
+ * Retrigger the `loadedmetadata` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechLoadedmetadata_
+ * @fires Player#loadedmetadata
+ * @listens Tech#loadedmetadata
+ */
+'loadedmetadata',
+/**
+ * Fires when the browser has loaded the current frame of the audio/video.
+ *
+ * @event Player#loadeddata
+ * @type {event}
+ */
+/**
+ * Retrigger the `loadeddata` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechLoaddeddata_
+ * @fires Player#loadeddata
+ * @listens Tech#loadeddata
+ */
+'loadeddata',
+/**
+ * Fires when the current playback position has changed.
+ *
+ * @event Player#timeupdate
+ * @type {event}
+ */
+/**
+ * Retrigger the `timeupdate` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechTimeUpdate_
+ * @fires Player#timeupdate
+ * @listens Tech#timeupdate
+ */
+'timeupdate',
+/**
+ * Fires when the video's intrinsic dimensions change
+ *
+ * @event Player#resize
+ * @type {event}
+ */
+/**
+ * Retrigger the `resize` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechResize_
+ * @fires Player#resize
+ * @listens Tech#resize
+ */
+'resize',
+/**
+ * Fires when the volume has been changed
+ *
+ * @event Player#volumechange
+ * @type {event}
+ */
+/**
+ * Retrigger the `volumechange` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechVolumechange_
+ * @fires Player#volumechange
+ * @listens Tech#volumechange
+ */
+'volumechange',
+/**
+ * Fires when the text track has been changed
+ *
+ * @event Player#texttrackchange
+ * @type {event}
+ */
+/**
+ * Retrigger the `texttrackchange` event that was triggered by the {@link Tech}.
+ *
+ * @private
+ * @method Player#handleTechTexttrackchange_
+ * @fires Player#texttrackchange
+ * @listens Tech#texttrackchange
+ */
+'texttrackchange'];
+
+// events to queue when playback rate is zero
+// this is a hash for the sole purpose of mapping non-camel-cased event names
+// to camel-cased function names
+const TECH_EVENTS_QUEUE = {
+  canplay: 'CanPlay',
+  canplaythrough: 'CanPlayThrough',
+  playing: 'Playing',
+  seeked: 'Seeked'
+};
+const BREAKPOINT_ORDER = ['tiny', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'huge'];
+const BREAKPOINT_CLASSES = {};
+
+// grep: vjs-layout-tiny
+// grep: vjs-layout-x-small
+// grep: vjs-layout-small
+// grep: vjs-layout-medium
+// grep: vjs-layout-large
+// grep: vjs-layout-x-large
+// grep: vjs-layout-huge
+BREAKPOINT_ORDER.forEach(k => {
+  const v = k.charAt(0) === 'x' ? `x-${k.substring(1)}` : k;
+  BREAKPOINT_CLASSES[k] = `vjs-layout-${v}`;
+});
+const DEFAULT_BREAKPOINTS = {
+  tiny: 210,
+  xsmall: 320,
+  small: 425,
+  medium: 768,
+  large: 1440,
+  xlarge: 2560,
+  huge: Infinity
+};
+
+/**
+ * An instance of the `Player` class is created when any of the Video.js setup methods
+ * are used to initialize a video.
+ *
+ * After an instance has been created it can be accessed globally in three ways:
+ * 1. By calling `videojs.getPlayer('example_video_1');`
+ * 2. By calling `videojs('example_video_1');` (not recommended)
+ * 2. By using it directly via `videojs.players.example_video_1;`
+ *
+ * @extends Component
+ * @global
+ */
+class Player extends Component$1 {
+  /**
+   * Create an instance of this class.
+   *
+   * @param {Element} tag
+   *        The original video DOM element used for configuring options.
+   *
+   * @param {Object} [options]
+   *        Object of option names and values.
+   *
+   * @param {Function} [ready]
+   *        Ready callback function.
+   */
+  constructor(tag, options, ready) {
+    // Make sure tag ID exists
+    // also here.. probably better
+    tag.id = tag.id || options.id || `vjs_video_${newGUID()}`;
+
+    // Set Options
+    // The options argument overrides options set in the video tag
+    // which overrides globally set options.
+    // This latter part coincides with the load order
+    // (tag must exist before Player)
+    options = Object.assign(Player.getTagSettings(tag), options);
+
+    // Delay the initialization of children because we need to set up
+    // player properties first, and can't use `this` before `super()`
+    options.initChildren = false;
+
+    // Same with creating the element
+    options.createEl = false;
+
+    // don't auto mixin the evented mixin
+    options.evented = false;
+
+    // we don't want the player to report touch activity on itself
+    // see enableTouchActivity in Component
+    options.reportTouchActivity = false;
+
+    // If language is not set, get the closest lang attribute
+    if (!options.language) {
+      const closest = tag.closest('[lang]');
+      if (closest) {
+        options.language = closest.getAttribute('lang');
+      }
+    }
+
+    // Run base component initializing with new options
+    super(null, options, ready);
+
+    // Create bound methods for document listeners.
+    this.boundDocumentFullscreenChange_ = e => this.documentFullscreenChange_(e);
+    this.boundFullWindowOnEscKey_ = e => this.fullWindowOnEscKey(e);
+    this.boundUpdateStyleEl_ = e => this.updateStyleEl_(e);
+    this.boundApplyInitTime_ = e => this.applyInitTime_(e);
+    this.boundUpdateCurrentBreakpoint_ = e => this.updateCurrentBreakpoint_(e);
+    this.boundHandleTechClick_ = e => this.handleTechClick_(e);
+    this.boundHandleTechDoubleClick_ = e => this.handleTechDoubleClick_(e);
+    this.boundHandleTechTouchStart_ = e => this.handleTechTouchStart_(e);
+    this.boundHandleTechTouchMove_ = e => this.handleTechTouchMove_(e);
+    this.boundHandleTechTouchEnd_ = e => this.handleTechTouchEnd_(e);
+    this.boundHandleTechTap_ = e => this.handleTechTap_(e);
+
+    // default isFullscreen_ to false
+    this.isFullscreen_ = false;
+
+    // create logger
+    this.log = createLogger(this.id_);
+
+    // Hold our own reference to fullscreen api so it can be mocked in tests
+    this.fsApi_ = FullscreenApi;
+
+    // Tracks when a tech changes the poster
+    this.isPosterFromTech_ = false;
+
+    // Holds callback info that gets queued when playback rate is zero
+    // and a seek is happening
+    this.queuedCallbacks_ = [];
+
+    // Turn off API access because we're loading a new tech that might load asynchronously
+    this.isReady_ = false;
+
+    // Init state hasStarted_
+    this.hasStarted_ = false;
+
+    // Init state userActive_
+    this.userActive_ = false;
+
+    // Init debugEnabled_
+    this.debugEnabled_ = false;
+
+    // Init state audioOnlyMode_
+    this.audioOnlyMode_ = false;
+
+    // Init state audioPosterMode_
+    this.audioPosterMode_ = false;
+
+    // Init state audioOnlyCache_
+    this.audioOnlyCache_ = {
+      playerHeight: null,
+      hiddenChildren: []
+    };
+
+    // if the global option object was accidentally blown away by
+    // someone, bail early with an informative error
+    if (!this.options_ || !this.options_.techOrder || !this.options_.techOrder.length) {
+      throw new Error('No techOrder specified. Did you overwrite ' + 'videojs.options instead of just changing the ' + 'properties you want to override?');
+    }
+
+    // Store the original tag used to set options
+    this.tag = tag;
+
+    // Store the tag attributes used to restore html5 element
+    this.tagAttributes = tag && getAttributes(tag);
+
+    // Update current language
+    this.language(this.options_.language);
+
+    // Update Supported Languages
+    if (options.languages) {
+      // Normalise player option languages to lowercase
+      const languagesToLower = {};
+      Object.getOwnPropertyNames(options.languages).forEach(function (name) {
+        languagesToLower[name.toLowerCase()] = options.languages[name];
+      });
+      this.languages_ = languagesToLower;
+    } else {
+      this.languages_ = Player.prototype.options_.languages;
+    }
+    this.resetCache_();
+
+    // Set poster
+    /** @type string */
+    this.poster_ = options.poster || '';
+
+    // Set controls
+    /** @type {boolean} */
+    this.controls_ = !!options.controls;
+
+    // Original tag settings stored in options
+    // now remove immediately so native controls don't flash.
+    // May be turned back on by HTML5 tech if nativeControlsForTouch is true
+    tag.controls = false;
+    tag.removeAttribute('controls');
+    this.changingSrc_ = false;
+    this.playCallbacks_ = [];
+    this.playTerminatedQueue_ = [];
+
+    // the attribute overrides the option
+    if (tag.hasAttribute('autoplay')) {
+      this.autoplay(true);
+    } else {
+      // otherwise use the setter to validate and
+      // set the correct value.
+      this.autoplay(this.options_.autoplay);
+    }
+
+    // check plugins
+    if (options.plugins) {
+      Object.keys(options.plugins).forEach(name => {
+        if (typeof this[name] !== 'function') {
+          throw new Error(`plugin "${name}" does not exist`);
+        }
+      });
+    }
+
+    /*
+     * Store the internal state of scrubbing
+     *
+     * @private
+     * @return {Boolean} True if the user is scrubbing
+     */
+    this.scrubbing_ = false;
+    this.el_ = this.createEl();
+
+    // Make this an evented object and use `el_` as its event bus.
+    evented(this, {
+      eventBusKey: 'el_'
+    });
+
+    // listen to document and player fullscreenchange handlers so we receive those events
+    // before a user can receive them so we can update isFullscreen appropriately.
+    // make sure that we listen to fullscreenchange events before everything else to make sure that
+    // our isFullscreen method is updated properly for internal components as well as external.
+    if (this.fsApi_.requestFullscreen) {
+      on(document, this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+      this.on(this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+    }
+    if (this.fluid_) {
+      this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+    }
+    // We also want to pass the original player options to each component and plugin
+    // as well so they don't need to reach back into the player for options later.
+    // We also need to do another copy of this.options_ so we don't end up with
+    // an infinite loop.
+    const playerOptionsCopy = merge$1(this.options_);
+
+    // Load plugins
+    if (options.plugins) {
+      Object.keys(options.plugins).forEach(name => {
+        this[name](options.plugins[name]);
+      });
+    }
+
+    // Enable debug mode to fire debugon event for all plugins.
+    if (options.debug) {
+      this.debug(true);
+    }
+    this.options_.playerOptions = playerOptionsCopy;
+    this.middleware_ = [];
+    this.playbackRates(options.playbackRates);
+    if (options.experimentalSvgIcons) {
+      // Add SVG Sprite to the DOM
+      const parser = new window$1.DOMParser();
+      const parsedSVG = parser.parseFromString(icons, 'image/svg+xml');
+      const errorNode = parsedSVG.querySelector('parsererror');
+      if (errorNode) {
+        log$1.warn('Failed to load SVG Icons. Falling back to Font Icons.');
+        this.options_.experimentalSvgIcons = null;
+      } else {
+        const sprite = parsedSVG.documentElement;
+        sprite.style.display = 'none';
+        this.el_.appendChild(sprite);
+        this.addClass('vjs-svg-icons-enabled');
+      }
+    }
+    this.initChildren();
+
+    // Set isAudio based on whether or not an audio tag was used
+    this.isAudio(tag.nodeName.toLowerCase() === 'audio');
+
+    // Update controls className. Can't do this when the controls are initially
+    // set because the element doesn't exist yet.
+    if (this.controls()) {
+      this.addClass('vjs-controls-enabled');
+    } else {
+      this.addClass('vjs-controls-disabled');
+    }
+
+    // Set ARIA label and region role depending on player type
+    this.el_.setAttribute('role', 'region');
+    if (this.isAudio()) {
+      this.el_.setAttribute('aria-label', this.localize('Audio Player'));
+    } else {
+      this.el_.setAttribute('aria-label', this.localize('Video Player'));
+    }
+    if (this.isAudio()) {
+      this.addClass('vjs-audio');
+    }
+
+    // TODO: Make this smarter. Toggle user state between touching/mousing
+    // using events, since devices can have both touch and mouse events.
+    // TODO: Make this check be performed again when the window switches between monitors
+    // (See https://github.com/videojs/video.js/issues/5683)
+    if (TOUCH_ENABLED) {
+      this.addClass('vjs-touch-enabled');
+    }
+
+    // iOS Safari has broken hover handling
+    if (!IS_IOS) {
+      this.addClass('vjs-workinghover');
+    }
+
+    // Make player easily findable by ID
+    Player.players[this.id_] = this;
+
+    // Add a major version class to aid css in plugins
+    const majorVersion = version$6.split('.')[0];
+    this.addClass(`vjs-v${majorVersion}`);
+
+    // When the player is first initialized, trigger activity so components
+    // like the control bar show themselves if needed
+    this.userActive(true);
+    this.reportUserActivity();
+    this.one('play', e => this.listenForUserActivity_(e));
+    this.on('keydown', e => this.handleKeyDown(e));
+    this.on('languagechange', e => this.handleLanguagechange(e));
+    this.breakpoints(this.options_.breakpoints);
+    this.responsive(this.options_.responsive);
+
+    // Calling both the audio mode methods after the player is fully
+    // setup to be able to listen to the events triggered by them
+    this.on('ready', () => {
+      // Calling the audioPosterMode method first so that
+      // the audioOnlyMode can take precedence when both options are set to true
+      this.audioPosterMode(this.options_.audioPosterMode);
+      this.audioOnlyMode(this.options_.audioOnlyMode);
+    });
+  }
+
+  /**
+   * Destroys the video player and does any necessary cleanup.
+   *
+   * This is especially helpful if you are dynamically adding and removing videos
+   * to/from the DOM.
+   *
+   * @fires Player#dispose
+   */
+  dispose() {
+    /**
+     * Called when the player is being disposed of.
+     *
+     * @event Player#dispose
+     * @type {Event}
+     */
+    this.trigger('dispose');
+    // prevent dispose from being called twice
+    this.off('dispose');
+
+    // Make sure all player-specific document listeners are unbound. This is
+    off(document, this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+    off(document, 'keydown', this.boundFullWindowOnEscKey_);
+    if (this.styleEl_ && this.styleEl_.parentNode) {
+      this.styleEl_.parentNode.removeChild(this.styleEl_);
+      this.styleEl_ = null;
+    }
+
+    // Kill reference to this player
+    Player.players[this.id_] = null;
+    if (this.tag && this.tag.player) {
+      this.tag.player = null;
+    }
+    if (this.el_ && this.el_.player) {
+      this.el_.player = null;
+    }
+    if (this.tech_) {
+      this.tech_.dispose();
+      this.isPosterFromTech_ = false;
+      this.poster_ = '';
+    }
+    if (this.playerElIngest_) {
+      this.playerElIngest_ = null;
+    }
+    if (this.tag) {
+      this.tag = null;
+    }
+    clearCacheForPlayer(this);
+
+    // remove all event handlers for track lists
+    // all tracks and track listeners are removed on
+    // tech dispose
+    ALL.names.forEach(name => {
+      const props = ALL[name];
+      const list = this[props.getterName]();
+
+      // if it is not a native list
+      // we have to manually remove event listeners
+      if (list && list.off) {
+        list.off();
+      }
+    });
+
+    // the actual .el_ is removed here, or replaced if
+    super.dispose({
+      restoreEl: this.options_.restoreEl
+    });
+  }
+
+  /**
+   * Create the `Player`'s DOM element.
+   *
+   * @return {Element}
+   *         The DOM element that gets created.
+   */
+  createEl() {
+    let tag = this.tag;
+    let el;
+    let playerElIngest = this.playerElIngest_ = tag.parentNode && tag.parentNode.hasAttribute && tag.parentNode.hasAttribute('data-vjs-player');
+    const divEmbed = this.tag.tagName.toLowerCase() === 'video-js';
+    if (playerElIngest) {
+      el = this.el_ = tag.parentNode;
+    } else if (!divEmbed) {
+      el = this.el_ = super.createEl('div');
+    }
+
+    // Copy over all the attributes from the tag, including ID and class
+    // ID will now reference player box, not the video tag
+    const attrs = getAttributes(tag);
+    if (divEmbed) {
+      el = this.el_ = tag;
+      tag = this.tag = document.createElement('video');
+      while (el.children.length) {
+        tag.appendChild(el.firstChild);
+      }
+      if (!hasClass(el, 'video-js')) {
+        addClass(el, 'video-js');
+      }
+      el.appendChild(tag);
+      playerElIngest = this.playerElIngest_ = el;
+      // move properties over from our custom `video-js` element
+      // to our new `video` element. This will move things like
+      // `src` or `controls` that were set via js before the player
+      // was initialized.
+      Object.keys(el).forEach(k => {
+        try {
+          tag[k] = el[k];
+        } catch (e) {
+          // we got a a property like outerHTML which we can't actually copy, ignore it
+        }
+      });
+    }
+
+    // set tabindex to -1 to remove the video element from the focus order
+    tag.setAttribute('tabindex', '-1');
+    attrs.tabindex = '-1';
+
+    // Workaround for #4583 on Chrome (on Windows) with JAWS.
+    // See https://github.com/FreedomScientific/VFO-standards-support/issues/78
+    // Note that we can't detect if JAWS is being used, but this ARIA attribute
+    // doesn't change behavior of Chrome if JAWS is not being used
+    if (IS_CHROME && IS_WINDOWS) {
+      tag.setAttribute('role', 'application');
+      attrs.role = 'application';
+    }
+
+    // Remove width/height attrs from tag so CSS can make it 100% width/height
+    tag.removeAttribute('width');
+    tag.removeAttribute('height');
+    if ('width' in attrs) {
+      delete attrs.width;
+    }
+    if ('height' in attrs) {
+      delete attrs.height;
+    }
+    Object.getOwnPropertyNames(attrs).forEach(function (attr) {
+      // don't copy over the class attribute to the player element when we're in a div embed
+      // the class is already set up properly in the divEmbed case
+      // and we want to make sure that the `video-js` class doesn't get lost
+      if (!(divEmbed && attr === 'class')) {
+        el.setAttribute(attr, attrs[attr]);
+      }
+      if (divEmbed) {
+        tag.setAttribute(attr, attrs[attr]);
+      }
+    });
+
+    // Update tag id/class for use as HTML5 playback tech
+    // Might think we should do this after embedding in container so .vjs-tech class
+    // doesn't flash 100% width/height, but class only applies with .video-js parent
+    tag.playerId = tag.id;
+    tag.id += '_html5_api';
+    tag.className = 'vjs-tech';
+
+    // Make player findable on elements
+    tag.player = el.player = this;
+    // Default state of video is paused
+    this.addClass('vjs-paused');
+    const deviceClassNames = ['IS_SMART_TV', 'IS_TIZEN', 'IS_WEBOS', 'IS_ANDROID', 'IS_IPAD', 'IS_IPHONE'].filter(key => browser[key]).map(key => {
+      return 'vjs-device-' + key.substring(3).toLowerCase().replace(/\_/g, '-');
+    });
+    this.addClass(...deviceClassNames);
+
+    // Add a style element in the player that we'll use to set the width/height
+    // of the player in a way that's still overridable by CSS, just like the
+    // video element
+    if (window$1.VIDEOJS_NO_DYNAMIC_STYLE !== true) {
+      this.styleEl_ = createStyleElement('vjs-styles-dimensions');
+      const defaultsStyleEl = $('.vjs-styles-defaults');
+      const head = $('head');
+      head.insertBefore(this.styleEl_, defaultsStyleEl ? defaultsStyleEl.nextSibling : head.firstChild);
+    }
+    this.fill_ = false;
+    this.fluid_ = false;
+
+    // Pass in the width/height/aspectRatio options which will update the style el
+    this.width(this.options_.width);
+    this.height(this.options_.height);
+    this.fill(this.options_.fill);
+    this.fluid(this.options_.fluid);
+    this.aspectRatio(this.options_.aspectRatio);
+    // support both crossOrigin and crossorigin to reduce confusion and issues around the name
+    this.crossOrigin(this.options_.crossOrigin || this.options_.crossorigin);
+
+    // Hide any links within the video/audio tag,
+    // because IE doesn't hide them completely from screen readers.
+    const links = tag.getElementsByTagName('a');
+    for (let i = 0; i < links.length; i++) {
+      const linkEl = links.item(i);
+      addClass(linkEl, 'vjs-hidden');
+      linkEl.setAttribute('hidden', 'hidden');
+    }
+
+    // insertElFirst seems to cause the networkState to flicker from 3 to 2, so
+    // keep track of the original for later so we can know if the source originally failed
+    tag.initNetworkState_ = tag.networkState;
+
+    // Wrap video tag in div (el/box) container
+    if (tag.parentNode && !playerElIngest) {
+      tag.parentNode.insertBefore(el, tag);
+    }
+
+    // insert the tag as the first child of the player element
+    // then manually add it to the children array so that this.addChild
+    // will work properly for other components
+    //
+    // Breaks iPhone, fixed in HTML5 setup.
+    prependTo(tag, el);
+    this.children_.unshift(tag);
+
+    // Set lang attr on player to ensure CSS :lang() in consistent with player
+    // if it's been set to something different to the doc
+    this.el_.setAttribute('lang', this.language_);
+    this.el_.setAttribute('translate', 'no');
+    this.el_ = el;
+    return el;
+  }
+
+  /**
+   * Get or set the `Player`'s crossOrigin option. For the HTML5 player, this
+   * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+   * behavior.
+   *
+   * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+   *
+   * @param {string|null} [value]
+   *        The value to set the `Player`'s crossOrigin to. If an argument is
+   *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+   *
+   * @return {string|null|undefined}
+   *         - The current crossOrigin value of the `Player` when getting.
+   *         - undefined when setting
+   */
+  crossOrigin(value) {
+    // `null` can be set to unset a value
+    if (typeof value === 'undefined') {
+      return this.techGet_('crossOrigin');
+    }
+    if (value !== null && value !== 'anonymous' && value !== 'use-credentials') {
+      log$1.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${value}"`);
+      return;
+    }
+    this.techCall_('setCrossOrigin', value);
+    if (this.posterImage) {
+      this.posterImage.crossOrigin(value);
+    }
+    return;
+  }
+
+  /**
+   * A getter/setter for the `Player`'s width. Returns the player's configured value.
+   * To get the current width use `currentWidth()`.
+   *
+   * @param {number|string} [value]
+   *        CSS value to set the `Player`'s width to.
+   *
+   * @return {number|undefined}
+   *         - The current width of the `Player` when getting.
+   *         - Nothing when setting
+   */
+  width(value) {
+    return this.dimension('width', value);
+  }
+
+  /**
+   * A getter/setter for the `Player`'s height. Returns the player's configured value.
+   * To get the current height use `currentheight()`.
+   *
+   * @param {number|string} [value]
+   *        CSS value to set the `Player`'s height to.
+   *
+   * @return {number|undefined}
+   *         - The current height of the `Player` when getting.
+   *         - Nothing when setting
+   */
+  height(value) {
+    return this.dimension('height', value);
+  }
+
+  /**
+   * A getter/setter for the `Player`'s width & height.
+   *
+   * @param {string} dimension
+   *        This string can be:
+   *        - 'width'
+   *        - 'height'
+   *
+   * @param {number|string} [value]
+   *        Value for dimension specified in the first argument.
+   *
+   * @return {number}
+   *         The dimension arguments value when getting (width/height).
+   */
+  dimension(dimension, value) {
+    const privDimension = dimension + '_';
+    if (value === undefined) {
+      return this[privDimension] || 0;
+    }
+    if (value === '' || value === 'auto') {
+      // If an empty string is given, reset the dimension to be automatic
+      this[privDimension] = undefined;
+      this.updateStyleEl_();
+      return;
+    }
+    const parsedVal = parseFloat(value);
+    if (isNaN(parsedVal)) {
+      log$1.error(`Improper value "${value}" supplied for for ${dimension}`);
+      return;
+    }
+    this[privDimension] = parsedVal;
+    this.updateStyleEl_();
+  }
+
+  /**
+   * A getter/setter/toggler for the vjs-fluid `className` on the `Player`.
+   *
+   * Turning this on will turn off fill mode.
+   *
+   * @param {boolean} [bool]
+   *        - A value of true adds the class.
+   *        - A value of false removes the class.
+   *        - No value will be a getter.
+   *
+   * @return {boolean|undefined}
+   *         - The value of fluid when getting.
+   *         - `undefined` when setting.
+   */
+  fluid(bool) {
+    if (bool === undefined) {
+      return !!this.fluid_;
+    }
+    this.fluid_ = !!bool;
+    if (isEvented(this)) {
+      this.off(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+    }
+    if (bool) {
+      this.addClass('vjs-fluid');
+      this.fill(false);
+      addEventedCallback(this, () => {
+        this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+      });
+    } else {
+      this.removeClass('vjs-fluid');
+    }
+    this.updateStyleEl_();
+  }
+
+  /**
+   * A getter/setter/toggler for the vjs-fill `className` on the `Player`.
+   *
+   * Turning this on will turn off fluid mode.
+   *
+   * @param {boolean} [bool]
+   *        - A value of true adds the class.
+   *        - A value of false removes the class.
+   *        - No value will be a getter.
+   *
+   * @return {boolean|undefined}
+   *         - The value of fluid when getting.
+   *         - `undefined` when setting.
+   */
+  fill(bool) {
+    if (bool === undefined) {
+      return !!this.fill_;
+    }
+    this.fill_ = !!bool;
+    if (bool) {
+      this.addClass('vjs-fill');
+      this.fluid(false);
+    } else {
+      this.removeClass('vjs-fill');
+    }
+  }
+
+  /**
+   * Get/Set the aspect ratio
+   *
+   * @param {string} [ratio]
+   *        Aspect ratio for player
+   *
+   * @return {string|undefined}
+   *         returns the current aspect ratio when getting
+   */
+
+  /**
+   * A getter/setter for the `Player`'s aspect ratio.
+   *
+   * @param {string} [ratio]
+   *        The value to set the `Player`'s aspect ratio to.
+   *
+   * @return {string|undefined}
+   *         - The current aspect ratio of the `Player` when getting.
+   *         - undefined when setting
+   */
+  aspectRatio(ratio) {
+    if (ratio === undefined) {
+      return this.aspectRatio_;
+    }
+
+    // Check for width:height format
+    if (!/^\d+\:\d+$/.test(ratio)) {
+      throw new Error('Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.');
+    }
+    this.aspectRatio_ = ratio;
+
+    // We're assuming if you set an aspect ratio you want fluid mode,
+    // because in fixed mode you could calculate width and height yourself.
+    this.fluid(true);
+    this.updateStyleEl_();
+  }
+
+  /**
+   * Update styles of the `Player` element (height, width and aspect ratio).
+   *
+   * @private
+   * @listens Tech#loadedmetadata
+   */
+  updateStyleEl_() {
+    if (window$1.VIDEOJS_NO_DYNAMIC_STYLE === true) {
+      const width = typeof this.width_ === 'number' ? this.width_ : this.options_.width;
+      const height = typeof this.height_ === 'number' ? this.height_ : this.options_.height;
+      const techEl = this.tech_ && this.tech_.el();
+      if (techEl) {
+        if (width >= 0) {
+          techEl.width = width;
+        }
+        if (height >= 0) {
+          techEl.height = height;
+        }
+      }
+      return;
+    }
+    let width;
+    let height;
+    let aspectRatio;
+    let idClass;
+
+    // The aspect ratio is either used directly or to calculate width and height.
+    if (this.aspectRatio_ !== undefined && this.aspectRatio_ !== 'auto') {
+      // Use any aspectRatio that's been specifically set
+      aspectRatio = this.aspectRatio_;
+    } else if (this.videoWidth() > 0) {
+      // Otherwise try to get the aspect ratio from the video metadata
+      aspectRatio = this.videoWidth() + ':' + this.videoHeight();
+    } else {
+      // Or use a default. The video element's is 2:1, but 16:9 is more common.
+      aspectRatio = '16:9';
+    }
+
+    // Get the ratio as a decimal we can use to calculate dimensions
+    const ratioParts = aspectRatio.split(':');
+    const ratioMultiplier = ratioParts[1] / ratioParts[0];
+    if (this.width_ !== undefined) {
+      // Use any width that's been specifically set
+      width = this.width_;
+    } else if (this.height_ !== undefined) {
+      // Or calculate the width from the aspect ratio if a height has been set
+      width = this.height_ / ratioMultiplier;
+    } else {
+      // Or use the video's metadata, or use the video el's default of 300
+      width = this.videoWidth() || 300;
+    }
+    if (this.height_ !== undefined) {
+      // Use any height that's been specifically set
+      height = this.height_;
+    } else {
+      // Otherwise calculate the height from the ratio and the width
+      height = width * ratioMultiplier;
+    }
+
+    // Ensure the CSS class is valid by starting with an alpha character
+    if (/^[^a-zA-Z]/.test(this.id())) {
+      idClass = 'dimensions-' + this.id();
+    } else {
+      idClass = this.id() + '-dimensions';
+    }
+
+    // Ensure the right class is still on the player for the style element
+    this.addClass(idClass);
+    setTextContent(this.styleEl_, `
+      .${idClass} {
+        width: ${width}px;
+        height: ${height}px;
+      }
+
+      .${idClass}.vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: ${ratioMultiplier * 100}%;
+      }
+    `);
+  }
+
+  /**
+   * Load/Create an instance of playback {@link Tech} including element
+   * and API methods. Then append the `Tech` element in `Player` as a child.
+   *
+   * @param {string} techName
+   *        name of the playback technology
+   *
+   * @param {string} source
+   *        video source
+   *
+   * @private
+   */
+  loadTech_(techName, source) {
+    // Pause and remove current playback technology
+    if (this.tech_) {
+      this.unloadTech_();
+    }
+    const titleTechName = toTitleCase$1(techName);
+    const camelTechName = techName.charAt(0).toLowerCase() + techName.slice(1);
+
+    // get rid of the HTML5 video tag as soon as we are using another tech
+    if (titleTechName !== 'Html5' && this.tag) {
+      Tech.getTech('Html5').disposeMediaElement(this.tag);
+      this.tag.player = null;
+      this.tag = null;
+    }
+    this.techName_ = titleTechName;
+
+    // Turn off API access because we're loading a new tech that might load asynchronously
+    this.isReady_ = false;
+    let autoplay = this.autoplay();
+
+    // if autoplay is a string (or `true` with normalizeAutoplay: true) we pass false to the tech
+    // because the player is going to handle autoplay on `loadstart`
+    if (typeof this.autoplay() === 'string' || this.autoplay() === true && this.options_.normalizeAutoplay) {
+      autoplay = false;
+    }
+
+    // Grab tech-specific options from player options and add source and parent element to use.
+    const techOptions = {
+      source,
+      autoplay,
+      'nativeControlsForTouch': this.options_.nativeControlsForTouch,
+      'playerId': this.id(),
+      'techId': `${this.id()}_${camelTechName}_api`,
+      'playsinline': this.options_.playsinline,
+      'preload': this.options_.preload,
+      'loop': this.options_.loop,
+      'disablePictureInPicture': this.options_.disablePictureInPicture,
+      'muted': this.options_.muted,
+      'poster': this.poster(),
+      'language': this.language(),
+      'playerElIngest': this.playerElIngest_ || false,
+      'vtt.js': this.options_['vtt.js'],
+      'canOverridePoster': !!this.options_.techCanOverridePoster,
+      'enableSourceset': this.options_.enableSourceset
+    };
+    ALL.names.forEach(name => {
+      const props = ALL[name];
+      techOptions[props.getterName] = this[props.privateName];
+    });
+    Object.assign(techOptions, this.options_[titleTechName]);
+    Object.assign(techOptions, this.options_[camelTechName]);
+    Object.assign(techOptions, this.options_[techName.toLowerCase()]);
+    if (this.tag) {
+      techOptions.tag = this.tag;
+    }
+    if (source && source.src === this.cache_.src && this.cache_.currentTime > 0) {
+      techOptions.startTime = this.cache_.currentTime;
+    }
+
+    // Initialize tech instance
+    const TechClass = Tech.getTech(techName);
+    if (!TechClass) {
+      throw new Error(`No Tech named '${titleTechName}' exists! '${titleTechName}' should be registered using videojs.registerTech()'`);
+    }
+    this.tech_ = new TechClass(techOptions);
+
+    // player.triggerReady is always async, so don't need this to be async
+    this.tech_.ready(bind_(this, this.handleTechReady_), true);
+    textTrackConverter.jsonToTextTracks(this.textTracksJson_ || [], this.tech_);
+
+    // Listen to all HTML5-defined events and trigger them on the player
+    TECH_EVENTS_RETRIGGER.forEach(event => {
+      this.on(this.tech_, event, e => this[`handleTech${toTitleCase$1(event)}_`](e));
+    });
+    Object.keys(TECH_EVENTS_QUEUE).forEach(event => {
+      this.on(this.tech_, event, eventObj => {
+        if (this.tech_.playbackRate() === 0 && this.tech_.seeking()) {
+          this.queuedCallbacks_.push({
+            callback: this[`handleTech${TECH_EVENTS_QUEUE[event]}_`].bind(this),
+            event: eventObj
+          });
+          return;
+        }
+        this[`handleTech${TECH_EVENTS_QUEUE[event]}_`](eventObj);
+      });
+    });
+    this.on(this.tech_, 'loadstart', e => this.handleTechLoadStart_(e));
+    this.on(this.tech_, 'sourceset', e => this.handleTechSourceset_(e));
+    this.on(this.tech_, 'waiting', e => this.handleTechWaiting_(e));
+    this.on(this.tech_, 'ended', e => this.handleTechEnded_(e));
+    this.on(this.tech_, 'seeking', e => this.handleTechSeeking_(e));
+    this.on(this.tech_, 'play', e => this.handleTechPlay_(e));
+    this.on(this.tech_, 'pause', e => this.handleTechPause_(e));
+    this.on(this.tech_, 'durationchange', e => this.handleTechDurationChange_(e));
+    this.on(this.tech_, 'fullscreenchange', (e, data) => this.handleTechFullscreenChange_(e, data));
+    this.on(this.tech_, 'fullscreenerror', (e, err) => this.handleTechFullscreenError_(e, err));
+    this.on(this.tech_, 'enterpictureinpicture', e => this.handleTechEnterPictureInPicture_(e));
+    this.on(this.tech_, 'leavepictureinpicture', e => this.handleTechLeavePictureInPicture_(e));
+    this.on(this.tech_, 'error', e => this.handleTechError_(e));
+    this.on(this.tech_, 'posterchange', e => this.handleTechPosterChange_(e));
+    this.on(this.tech_, 'textdata', e => this.handleTechTextData_(e));
+    this.on(this.tech_, 'ratechange', e => this.handleTechRateChange_(e));
+    this.on(this.tech_, 'loadedmetadata', this.boundUpdateStyleEl_);
+    this.usingNativeControls(this.techGet_('controls'));
+    if (this.controls() && !this.usingNativeControls()) {
+      this.addTechControlsListeners_();
+    }
+
+    // Add the tech element in the DOM if it was not already there
+    // Make sure to not insert the original video element if using Html5
+    if (this.tech_.el().parentNode !== this.el() && (titleTechName !== 'Html5' || !this.tag)) {
+      prependTo(this.tech_.el(), this.el());
+    }
+
+    // Get rid of the original video tag reference after the first tech is loaded
+    if (this.tag) {
+      this.tag.player = null;
+      this.tag = null;
+    }
+  }
+
+  /**
+   * Unload and dispose of the current playback {@link Tech}.
+   *
+   * @private
+   */
+  unloadTech_() {
+    // Save the current text tracks so that we can reuse the same text tracks with the next tech
+    ALL.names.forEach(name => {
+      const props = ALL[name];
+      this[props.privateName] = this[props.getterName]();
+    });
+    this.textTracksJson_ = textTrackConverter.textTracksToJson(this.tech_);
+    this.isReady_ = false;
+    this.tech_.dispose();
+    this.tech_ = false;
+    if (this.isPosterFromTech_) {
+      this.poster_ = '';
+      this.trigger('posterchange');
+    }
+    this.isPosterFromTech_ = false;
+  }
+
+  /**
+   * Return a reference to the current {@link Tech}.
+   * It will print a warning by default about the danger of using the tech directly
+   * but any argument that is passed in will silence the warning.
+   *
+   * @param {*} [safety]
+   *        Anything passed in to silence the warning
+   *
+   * @return {Tech}
+   *         The Tech
+   */
+  tech(safety) {
+    if (safety === undefined) {
+      log$1.warn('Using the tech directly can be dangerous. I hope you know what you\'re doing.\n' + 'See https://github.com/videojs/video.js/issues/2617 for more info.\n');
+    }
+    return this.tech_;
+  }
+
+  /**
+   * An object that contains Video.js version.
+   *
+   * @typedef {Object} PlayerVersion
+   *
+   * @property {string} 'video.js' - Video.js version
+   */
+
+  /**
+   * Returns an object with Video.js version.
+   *
+   * @return {PlayerVersion}
+   *          An object with Video.js version.
+   */
+  version() {
+    return {
+      'video.js': version$6
+    };
+  }
+
+  /**
+   * Set up click and touch listeners for the playback element
+   *
+   * - On desktops: a click on the video itself will toggle playback
+   * - On mobile devices: a click on the video toggles controls
+   *   which is done by toggling the user state between active and
+   *   inactive
+   * - A tap can signal that a user has become active or has become inactive
+   *   e.g. a quick tap on an iPhone movie should reveal the controls. Another
+   *   quick tap should hide them again (signaling the user is in an inactive
+   *   viewing state)
+   * - In addition to this, we still want the user to be considered inactive after
+   *   a few seconds of inactivity.
+   *
+   * > Note: the only part of iOS interaction we can't mimic with this setup
+   * is a touch and hold on the video element counting as activity in order to
+   * keep the controls showing, but that shouldn't be an issue. A touch and hold
+   * on any controls will still keep the user active
+   *
+   * @private
+   */
+  addTechControlsListeners_() {
+    // Make sure to remove all the previous listeners in case we are called multiple times.
+    this.removeTechControlsListeners_();
+    this.on(this.tech_, 'click', this.boundHandleTechClick_);
+    this.on(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
+
+    // If the controls were hidden we don't want that to change without a tap event
+    // so we'll check if the controls were already showing before reporting user
+    // activity
+    this.on(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+    this.on(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+    this.on(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+
+    // The tap listener needs to come after the touchend listener because the tap
+    // listener cancels out any reportedUserActivity when setting userActive(false)
+    this.on(this.tech_, 'tap', this.boundHandleTechTap_);
+  }
+
+  /**
+   * Remove the listeners used for click and tap controls. This is needed for
+   * toggling to controls disabled, where a tap/touch should do nothing.
+   *
+   * @private
+   */
+  removeTechControlsListeners_() {
+    // We don't want to just use `this.off()` because there might be other needed
+    // listeners added by techs that extend this.
+    this.off(this.tech_, 'tap', this.boundHandleTechTap_);
+    this.off(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+    this.off(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+    this.off(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+    this.off(this.tech_, 'click', this.boundHandleTechClick_);
+    this.off(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
+  }
+
+  /**
+   * Player waits for the tech to be ready
+   *
+   * @private
+   */
+  handleTechReady_() {
+    this.triggerReady();
+
+    // Keep the same volume as before
+    if (this.cache_.volume) {
+      this.techCall_('setVolume', this.cache_.volume);
+    }
+
+    // Look if the tech found a higher resolution poster while loading
+    this.handleTechPosterChange_();
+
+    // Update the duration if available
+    this.handleTechDurationChange_();
+  }
+
+  /**
+   * Retrigger the `loadstart` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#loadstart
+   * @listens Tech#loadstart
+   * @private
+   */
+  handleTechLoadStart_() {
+    // TODO: Update to use `emptied` event instead. See #1277.
+
+    this.removeClass('vjs-ended', 'vjs-seeking');
+
+    // reset the error state
+    this.error(null);
+
+    // Update the duration
+    this.handleTechDurationChange_();
+    if (!this.paused()) {
+      /**
+       * Fired when the user agent begins looking for media data
+       *
+       * @event Player#loadstart
+       * @type {Event}
+       */
+      this.trigger('loadstart');
+    } else {
+      // reset the hasStarted state
+      this.hasStarted(false);
+      this.trigger('loadstart');
+    }
+
+    // autoplay happens after loadstart for the browser,
+    // so we mimic that behavior
+    this.manualAutoplay_(this.autoplay() === true && this.options_.normalizeAutoplay ? 'play' : this.autoplay());
+  }
+
+  /**
+   * Handle autoplay string values, rather than the typical boolean
+   * values that should be handled by the tech. Note that this is not
+   * part of any specification. Valid values and what they do can be
+   * found on the autoplay getter at Player#autoplay()
+   */
+  manualAutoplay_(type) {
+    if (!this.tech_ || typeof type !== 'string') {
+      return;
+    }
+
+    // Save original muted() value, set muted to true, and attempt to play().
+    // On promise rejection, restore muted from saved value
+    const resolveMuted = () => {
+      const previouslyMuted = this.muted();
+      this.muted(true);
+      const restoreMuted = () => {
+        this.muted(previouslyMuted);
+      };
+
+      // restore muted on play terminatation
+      this.playTerminatedQueue_.push(restoreMuted);
+      const mutedPromise = this.play();
+      if (!isPromise(mutedPromise)) {
+        return;
+      }
+      return mutedPromise.catch(err => {
+        restoreMuted();
+        throw new Error(`Rejection at manualAutoplay. Restoring muted value. ${err ? err : ''}`);
+      });
+    };
+    let promise;
+
+    // if muted defaults to true
+    // the only thing we can do is call play
+    if (type === 'any' && !this.muted()) {
+      promise = this.play();
+      if (isPromise(promise)) {
+        promise = promise.catch(resolveMuted);
+      }
+    } else if (type === 'muted' && !this.muted()) {
+      promise = resolveMuted();
+    } else {
+      promise = this.play();
+    }
+    if (!isPromise(promise)) {
+      return;
+    }
+    return promise.then(() => {
+      this.trigger({
+        type: 'autoplay-success',
+        autoplay: type
+      });
+    }).catch(() => {
+      this.trigger({
+        type: 'autoplay-failure',
+        autoplay: type
+      });
+    });
+  }
+
+  /**
+   * Update the internal source caches so that we return the correct source from
+   * `src()`, `currentSource()`, and `currentSources()`.
+   *
+   * > Note: `currentSources` will not be updated if the source that is passed in exists
+   *         in the current `currentSources` cache.
+   *
+   *
+   * @param {Tech~SourceObject} srcObj
+   *        A string or object source to update our caches to.
+   */
+  updateSourceCaches_(srcObj = '') {
+    let src = srcObj;
+    let type = '';
+    if (typeof src !== 'string') {
+      src = srcObj.src;
+      type = srcObj.type;
+    }
+
+    // make sure all the caches are set to default values
+    // to prevent null checking
+    this.cache_.source = this.cache_.source || {};
+    this.cache_.sources = this.cache_.sources || [];
+
+    // try to get the type of the src that was passed in
+    if (src && !type) {
+      type = findMimetype(this, src);
+    }
+
+    // update `currentSource` cache always
+    this.cache_.source = merge$1({}, srcObj, {
+      src,
+      type
+    });
+    const matchingSources = this.cache_.sources.filter(s => s.src && s.src === src);
+    const sourceElSources = [];
+    const sourceEls = this.$$('source');
+    const matchingSourceEls = [];
+    for (let i = 0; i < sourceEls.length; i++) {
+      const sourceObj = getAttributes(sourceEls[i]);
+      sourceElSources.push(sourceObj);
+      if (sourceObj.src && sourceObj.src === src) {
+        matchingSourceEls.push(sourceObj.src);
+      }
+    }
+
+    // if we have matching source els but not matching sources
+    // the current source cache is not up to date
+    if (matchingSourceEls.length && !matchingSources.length) {
+      this.cache_.sources = sourceElSources;
+      // if we don't have matching source or source els set the
+      // sources cache to the `currentSource` cache
+    } else if (!matchingSources.length) {
+      this.cache_.sources = [this.cache_.source];
+    }
+
+    // update the tech `src` cache
+    this.cache_.src = src;
+  }
+
+  /**
+   * *EXPERIMENTAL* Fired when the source is set or changed on the {@link Tech}
+   * causing the media element to reload.
+   *
+   * It will fire for the initial source and each subsequent source.
+   * This event is a custom event from Video.js and is triggered by the {@link Tech}.
+   *
+   * The event object for this event contains a `src` property that will contain the source
+   * that was available when the event was triggered. This is generally only necessary if Video.js
+   * is switching techs while the source was being changed.
+   *
+   * It is also fired when `load` is called on the player (or media element)
+   * because the {@link https://html.spec.whatwg.org/multipage/media.html#dom-media-load|specification for `load`}
+   * says that the resource selection algorithm needs to be aborted and restarted.
+   * In this case, it is very likely that the `src` property will be set to the
+   * empty string `""` to indicate we do not know what the source will be but
+   * that it is changing.
+   *
+   * *This event is currently still experimental and may change in minor releases.*
+   * __To use this, pass `enableSourceset` option to the player.__
+   *
+   * @event Player#sourceset
+   * @type {Event}
+   * @prop {string} src
+   *                The source url available when the `sourceset` was triggered.
+   *                It will be an empty string if we cannot know what the source is
+   *                but know that the source will change.
+   */
+  /**
+   * Retrigger the `sourceset` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#sourceset
+   * @listens Tech#sourceset
+   * @private
+   */
+  handleTechSourceset_(event) {
+    // only update the source cache when the source
+    // was not updated using the player api
+    if (!this.changingSrc_) {
+      let updateSourceCaches = src => this.updateSourceCaches_(src);
+      const playerSrc = this.currentSource().src;
+      const eventSrc = event.src;
+
+      // if we have a playerSrc that is not a blob, and a tech src that is a blob
+      if (playerSrc && !/^blob:/.test(playerSrc) && /^blob:/.test(eventSrc)) {
+        // if both the tech source and the player source were updated we assume
+        // something like @videojs/http-streaming did the sourceset and skip updating the source cache.
+        if (!this.lastSource_ || this.lastSource_.tech !== eventSrc && this.lastSource_.player !== playerSrc) {
+          updateSourceCaches = () => {};
+        }
+      }
+
+      // update the source to the initial source right away
+      // in some cases this will be empty string
+      updateSourceCaches(eventSrc);
+
+      // if the `sourceset` `src` was an empty string
+      // wait for a `loadstart` to update the cache to `currentSrc`.
+      // If a sourceset happens before a `loadstart`, we reset the state
+      if (!event.src) {
+        this.tech_.any(['sourceset', 'loadstart'], e => {
+          // if a sourceset happens before a `loadstart` there
+          // is nothing to do as this `handleTechSourceset_`
+          // will be called again and this will be handled there.
+          if (e.type === 'sourceset') {
+            return;
+          }
+          const techSrc = this.techGet_('currentSrc');
+          this.lastSource_.tech = techSrc;
+          this.updateSourceCaches_(techSrc);
+        });
+      }
+    }
+    this.lastSource_ = {
+      player: this.currentSource().src,
+      tech: event.src
+    };
+    this.trigger({
+      src: event.src,
+      type: 'sourceset'
+    });
+  }
+
+  /**
+   * Add/remove the vjs-has-started class
+   *
+   *
+   * @param {boolean} request
+   *        - true: adds the class
+   *        - false: remove the class
+   *
+   * @return {boolean}
+   *         the boolean value of hasStarted_
+   */
+  hasStarted(request) {
+    if (request === undefined) {
+      // act as getter, if we have no request to change
+      return this.hasStarted_;
+    }
+    if (request === this.hasStarted_) {
+      return;
+    }
+    this.hasStarted_ = request;
+    if (this.hasStarted_) {
+      this.addClass('vjs-has-started');
+    } else {
+      this.removeClass('vjs-has-started');
+    }
+  }
+
+  /**
+   * Fired whenever the media begins or resumes playback
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play}
+   * @fires Player#play
+   * @listens Tech#play
+   * @private
+   */
+  handleTechPlay_() {
+    this.removeClass('vjs-ended', 'vjs-paused');
+    this.addClass('vjs-playing');
+
+    // hide the poster when the user hits play
+    this.hasStarted(true);
+    /**
+     * Triggered whenever an {@link Tech#play} event happens. Indicates that
+     * playback has started or resumed.
+     *
+     * @event Player#play
+     * @type {Event}
+     */
+    this.trigger('play');
+  }
+
+  /**
+   * Retrigger the `ratechange` event that was triggered by the {@link Tech}.
+   *
+   * If there were any events queued while the playback rate was zero, fire
+   * those events now.
+   *
+   * @private
+   * @method Player#handleTechRateChange_
+   * @fires Player#ratechange
+   * @listens Tech#ratechange
+   */
+  handleTechRateChange_() {
+    if (this.tech_.playbackRate() > 0 && this.cache_.lastPlaybackRate === 0) {
+      this.queuedCallbacks_.forEach(queued => queued.callback(queued.event));
+      this.queuedCallbacks_ = [];
+    }
+    this.cache_.lastPlaybackRate = this.tech_.playbackRate();
+    /**
+     * Fires when the playing speed of the audio/video is changed
+     *
+     * @event Player#ratechange
+     * @type {event}
+     */
+    this.trigger('ratechange');
+  }
+
+  /**
+   * Retrigger the `waiting` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#waiting
+   * @listens Tech#waiting
+   * @private
+   */
+  handleTechWaiting_() {
+    this.addClass('vjs-waiting');
+    /**
+     * A readyState change on the DOM element has caused playback to stop.
+     *
+     * @event Player#waiting
+     * @type {Event}
+     */
+    this.trigger('waiting');
+
+    // Browsers may emit a timeupdate event after a waiting event. In order to prevent
+    // premature removal of the waiting class, wait for the time to change.
+    const timeWhenWaiting = this.currentTime();
+    const timeUpdateListener = () => {
+      if (timeWhenWaiting !== this.currentTime()) {
+        this.removeClass('vjs-waiting');
+        this.off('timeupdate', timeUpdateListener);
+      }
+    };
+    this.on('timeupdate', timeUpdateListener);
+  }
+
+  /**
+   * Retrigger the `canplay` event that was triggered by the {@link Tech}.
+   * > Note: This is not consistent between browsers. See #1351
+   *
+   * @fires Player#canplay
+   * @listens Tech#canplay
+   * @private
+   */
+  handleTechCanPlay_() {
+    this.removeClass('vjs-waiting');
+    /**
+     * The media has a readyState of HAVE_FUTURE_DATA or greater.
+     *
+     * @event Player#canplay
+     * @type {Event}
+     */
+    this.trigger('canplay');
+  }
+
+  /**
+   * Retrigger the `canplaythrough` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#canplaythrough
+   * @listens Tech#canplaythrough
+   * @private
+   */
+  handleTechCanPlayThrough_() {
+    this.removeClass('vjs-waiting');
+    /**
+     * The media has a readyState of HAVE_ENOUGH_DATA or greater. This means that the
+     * entire media file can be played without buffering.
+     *
+     * @event Player#canplaythrough
+     * @type {Event}
+     */
+    this.trigger('canplaythrough');
+  }
+
+  /**
+   * Retrigger the `playing` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#playing
+   * @listens Tech#playing
+   * @private
+   */
+  handleTechPlaying_() {
+    this.removeClass('vjs-waiting');
+    /**
+     * The media is no longer blocked from playback, and has started playing.
+     *
+     * @event Player#playing
+     * @type {Event}
+     */
+    this.trigger('playing');
+  }
+
+  /**
+   * Retrigger the `seeking` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#seeking
+   * @listens Tech#seeking
+   * @private
+   */
+  handleTechSeeking_() {
+    this.addClass('vjs-seeking');
+    /**
+     * Fired whenever the player is jumping to a new time
+     *
+     * @event Player#seeking
+     * @type {Event}
+     */
+    this.trigger('seeking');
+  }
+
+  /**
+   * Retrigger the `seeked` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#seeked
+   * @listens Tech#seeked
+   * @private
+   */
+  handleTechSeeked_() {
+    this.removeClass('vjs-seeking', 'vjs-ended');
+    /**
+     * Fired when the player has finished jumping to a new time
+     *
+     * @event Player#seeked
+     * @type {Event}
+     */
+    this.trigger('seeked');
+  }
+
+  /**
+   * Retrigger the `pause` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#pause
+   * @listens Tech#pause
+   * @private
+   */
+  handleTechPause_() {
+    this.removeClass('vjs-playing');
+    this.addClass('vjs-paused');
+    /**
+     * Fired whenever the media has been paused
+     *
+     * @event Player#pause
+     * @type {Event}
+     */
+    this.trigger('pause');
+  }
+
+  /**
+   * Retrigger the `ended` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#ended
+   * @listens Tech#ended
+   * @private
+   */
+  handleTechEnded_() {
+    this.addClass('vjs-ended');
+    this.removeClass('vjs-waiting');
+    if (this.options_.loop) {
+      this.currentTime(0);
+      this.play();
+    } else if (!this.paused()) {
+      this.pause();
+    }
+
+    /**
+     * Fired when the end of the media resource is reached (currentTime == duration)
+     *
+     * @event Player#ended
+     * @type {Event}
+     */
+    this.trigger('ended');
+  }
+
+  /**
+   * Fired when the duration of the media resource is first known or changed
+   *
+   * @listens Tech#durationchange
+   * @private
+   */
+  handleTechDurationChange_() {
+    this.duration(this.techGet_('duration'));
+  }
+
+  /**
+   * Handle a click on the media element to play/pause
+   *
+   * @param {Event} event
+   *        the event that caused this function to trigger
+   *
+   * @listens Tech#click
+   * @private
+   */
+  handleTechClick_(event) {
+    // When controls are disabled a click should not toggle playback because
+    // the click is considered a control
+    if (!this.controls_) {
+      return;
+    }
+    if (this.options_ === undefined || this.options_.userActions === undefined || this.options_.userActions.click === undefined || this.options_.userActions.click !== false) {
+      if (this.options_ !== undefined && this.options_.userActions !== undefined && typeof this.options_.userActions.click === 'function') {
+        this.options_.userActions.click.call(this, event);
+      } else if (this.paused()) {
+        silencePromise(this.play());
+      } else {
+        this.pause();
+      }
+    }
+  }
+
+  /**
+   * Handle a double-click on the media element to enter/exit fullscreen
+   *
+   * @param {Event} event
+   *        the event that caused this function to trigger
+   *
+   * @listens Tech#dblclick
+   * @private
+   */
+  handleTechDoubleClick_(event) {
+    if (!this.controls_) {
+      return;
+    }
+
+    // we do not want to toggle fullscreen state
+    // when double-clicking inside a control bar or a modal
+    const inAllowedEls = Array.prototype.some.call(this.$$('.vjs-control-bar, .vjs-modal-dialog'), el => el.contains(event.target));
+    if (!inAllowedEls) {
+      /*
+       * options.userActions.doubleClick
+       *
+       * If `undefined` or `true`, double-click toggles fullscreen if controls are present
+       * Set to `false` to disable double-click handling
+       * Set to a function to substitute an external double-click handler
+       */
+      if (this.options_ === undefined || this.options_.userActions === undefined || this.options_.userActions.doubleClick === undefined || this.options_.userActions.doubleClick !== false) {
+        if (this.options_ !== undefined && this.options_.userActions !== undefined && typeof this.options_.userActions.doubleClick === 'function') {
+          this.options_.userActions.doubleClick.call(this, event);
+        } else if (this.isFullscreen()) {
+          this.exitFullscreen();
+        } else {
+          this.requestFullscreen();
+        }
+      }
+    }
+  }
+
+  /**
+   * Handle a tap on the media element. It will toggle the user
+   * activity state, which hides and shows the controls.
+   *
+   * @listens Tech#tap
+   * @private
+   */
+  handleTechTap_() {
+    this.userActive(!this.userActive());
+  }
+
+  /**
+   * Handle touch to start
+   *
+   * @listens Tech#touchstart
+   * @private
+   */
+  handleTechTouchStart_() {
+    this.userWasActive = this.userActive();
+  }
+
+  /**
+   * Handle touch to move
+   *
+   * @listens Tech#touchmove
+   * @private
+   */
+  handleTechTouchMove_() {
+    if (this.userWasActive) {
+      this.reportUserActivity();
+    }
+  }
+
+  /**
+   * Handle touch to end
+   *
+   * @param {Event} event
+   *        the touchend event that triggered
+   *        this function
+   *
+   * @listens Tech#touchend
+   * @private
+   */
+  handleTechTouchEnd_(event) {
+    // Stop the mouse events from also happening
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+  }
+
+  /**
+   * @private
+   */
+  toggleFullscreenClass_() {
+    if (this.isFullscreen()) {
+      this.addClass('vjs-fullscreen');
+    } else {
+      this.removeClass('vjs-fullscreen');
+    }
+  }
+
+  /**
+   * when the document fschange event triggers it calls this
+   */
+  documentFullscreenChange_(e) {
+    const targetPlayer = e.target.player;
+
+    // if another player was fullscreen
+    // do a null check for targetPlayer because older firefox's would put document as e.target
+    if (targetPlayer && targetPlayer !== this) {
+      return;
+    }
+    const el = this.el();
+    let isFs = document[this.fsApi_.fullscreenElement] === el;
+    if (!isFs && el.matches) {
+      isFs = el.matches(':' + this.fsApi_.fullscreen);
+    }
+    this.isFullscreen(isFs);
+  }
+
+  /**
+   * Handle Tech Fullscreen Change
+   *
+   * @param {Event} event
+   *        the fullscreenchange event that triggered this function
+   *
+   * @param {Object} data
+   *        the data that was sent with the event
+   *
+   * @private
+   * @listens Tech#fullscreenchange
+   * @fires Player#fullscreenchange
+   */
+  handleTechFullscreenChange_(event, data) {
+    if (data) {
+      if (data.nativeIOSFullscreen) {
+        this.addClass('vjs-ios-native-fs');
+        this.tech_.one('webkitendfullscreen', () => {
+          this.removeClass('vjs-ios-native-fs');
+        });
+      }
+      this.isFullscreen(data.isFullscreen);
+    }
+  }
+  handleTechFullscreenError_(event, err) {
+    this.trigger('fullscreenerror', err);
+  }
+
+  /**
+   * @private
+   */
+  togglePictureInPictureClass_() {
+    if (this.isInPictureInPicture()) {
+      this.addClass('vjs-picture-in-picture');
+    } else {
+      this.removeClass('vjs-picture-in-picture');
+    }
+  }
+
+  /**
+   * Handle Tech Enter Picture-in-Picture.
+   *
+   * @param {Event} event
+   *        the enterpictureinpicture event that triggered this function
+   *
+   * @private
+   * @listens Tech#enterpictureinpicture
+   */
+  handleTechEnterPictureInPicture_(event) {
+    this.isInPictureInPicture(true);
+  }
+
+  /**
+   * Handle Tech Leave Picture-in-Picture.
+   *
+   * @param {Event} event
+   *        the leavepictureinpicture event that triggered this function
+   *
+   * @private
+   * @listens Tech#leavepictureinpicture
+   */
+  handleTechLeavePictureInPicture_(event) {
+    this.isInPictureInPicture(false);
+  }
+
+  /**
+   * Fires when an error occurred during the loading of an audio/video.
+   *
+   * @private
+   * @listens Tech#error
+   */
+  handleTechError_() {
+    const error = this.tech_.error();
+    if (error) {
+      this.error(error);
+    }
+  }
+
+  /**
+   * Retrigger the `textdata` event that was triggered by the {@link Tech}.
+   *
+   * @fires Player#textdata
+   * @listens Tech#textdata
+   * @private
+   */
+  handleTechTextData_() {
+    let data = null;
+    if (arguments.length > 1) {
+      data = arguments[1];
+    }
+
+    /**
+     * Fires when we get a textdata event from tech
+     *
+     * @event Player#textdata
+     * @type {Event}
+     */
+    this.trigger('textdata', data);
+  }
+
+  /**
+   * Get object for cached values.
+   *
+   * @return {Object}
+   *         get the current object cache
+   */
+  getCache() {
+    return this.cache_;
+  }
+
+  /**
+   * Resets the internal cache object.
+   *
+   * Using this function outside the player constructor or reset method may
+   * have unintended side-effects.
+   *
+   * @private
+   */
+  resetCache_() {
+    this.cache_ = {
+      // Right now, the currentTime is not _really_ cached because it is always
+      // retrieved from the tech (see: currentTime). However, for completeness,
+      // we set it to zero here to ensure that if we do start actually caching
+      // it, we reset it along with everything else.
+      currentTime: 0,
+      initTime: 0,
+      inactivityTimeout: this.options_.inactivityTimeout,
+      duration: NaN,
+      lastVolume: 1,
+      lastPlaybackRate: this.defaultPlaybackRate(),
+      media: null,
+      src: '',
+      source: {},
+      sources: [],
+      playbackRates: [],
+      volume: 1
+    };
+  }
+
+  /**
+   * Pass values to the playback tech
+   *
+   * @param {string} [method]
+   *        the method to call
+   *
+   * @param {Object} [arg]
+   *        the argument to pass
+   *
+   * @private
+   */
+  techCall_(method, arg) {
+    // If it's not ready yet, call method when it is
+
+    this.ready(function () {
+      if (method in allowedSetters) {
+        return set(this.middleware_, this.tech_, method, arg);
+      } else if (method in allowedMediators) {
+        return mediate(this.middleware_, this.tech_, method, arg);
+      }
+      try {
+        if (this.tech_) {
+          this.tech_[method](arg);
+        }
+      } catch (e) {
+        log$1(e);
+        throw e;
+      }
+    }, true);
+  }
+
+  /**
+   * Mediate attempt to call playback tech method
+   * and return the value of the method called.
+   *
+   * @param {string} method
+   *        Tech method
+   *
+   * @return {*}
+   *         Value returned by the tech method called, undefined if tech
+   *         is not ready or tech method is not present
+   *
+   * @private
+   */
+  techGet_(method) {
+    if (!this.tech_ || !this.tech_.isReady_) {
+      return;
+    }
+    if (method in allowedGetters) {
+      return get(this.middleware_, this.tech_, method);
+    } else if (method in allowedMediators) {
+      return mediate(this.middleware_, this.tech_, method);
+    }
+
+    // Log error when playback tech object is present but method
+    // is undefined or unavailable
+    try {
+      return this.tech_[method]();
+    } catch (e) {
+      // When building additional tech libs, an expected method may not be defined yet
+      if (this.tech_[method] === undefined) {
+        log$1(`Video.js: ${method} method not defined for ${this.techName_} playback technology.`, e);
+        throw e;
+      }
+
+      // When a method isn't available on the object it throws a TypeError
+      if (e.name === 'TypeError') {
+        log$1(`Video.js: ${method} unavailable on ${this.techName_} playback technology element.`, e);
+        this.tech_.isReady_ = false;
+        throw e;
+      }
+
+      // If error unknown, just log and throw
+      log$1(e);
+      throw e;
+    }
+  }
+
+  /**
+   * Attempt to begin playback at the first opportunity.
+   *
+   * @return {Promise|undefined}
+   *         Returns a promise if the browser supports Promises (or one
+   *         was passed in as an option). This promise will be resolved on
+   *         the return value of play. If this is undefined it will fulfill the
+   *         promise chain otherwise the promise chain will be fulfilled when
+   *         the promise from play is fulfilled.
+   */
+  play() {
+    return new Promise(resolve => {
+      this.play_(resolve);
+    });
+  }
+
+  /**
+   * The actual logic for play, takes a callback that will be resolved on the
+   * return value of play. This allows us to resolve to the play promise if there
+   * is one on modern browsers.
+   *
+   * @private
+   * @param {Function} [callback]
+   *        The callback that should be called when the techs play is actually called
+   */
+  play_(callback = silencePromise) {
+    this.playCallbacks_.push(callback);
+    const isSrcReady = Boolean(!this.changingSrc_ && (this.src() || this.currentSrc()));
+    const isSafariOrIOS = Boolean(IS_ANY_SAFARI || IS_IOS);
+
+    // treat calls to play_ somewhat like the `one` event function
+    if (this.waitToPlay_) {
+      this.off(['ready', 'loadstart'], this.waitToPlay_);
+      this.waitToPlay_ = null;
+    }
+
+    // if the player/tech is not ready or the src itself is not ready
+    // queue up a call to play on `ready` or `loadstart`
+    if (!this.isReady_ || !isSrcReady) {
+      this.waitToPlay_ = e => {
+        this.play_();
+      };
+      this.one(['ready', 'loadstart'], this.waitToPlay_);
+
+      // if we are in Safari, there is a high chance that loadstart will trigger after the gesture timeperiod
+      // in that case, we need to prime the video element by calling load so it'll be ready in time
+      if (!isSrcReady && isSafariOrIOS) {
+        this.load();
+      }
+      return;
+    }
+
+    // If the player/tech is ready and we have a source, we can attempt playback.
+    const val = this.techGet_('play');
+
+    // For native playback, reset the progress bar if we get a play call from a replay.
+    const isNativeReplay = isSafariOrIOS && this.hasClass('vjs-ended');
+    if (isNativeReplay) {
+      this.resetProgressBar_();
+    }
+    // play was terminated if the returned value is null
+    if (val === null) {
+      this.runPlayTerminatedQueue_();
+    } else {
+      this.runPlayCallbacks_(val);
+    }
+  }
+
+  /**
+   * These functions will be run when if play is terminated. If play
+   * runPlayCallbacks_ is run these function will not be run. This allows us
+   * to differentiate between a terminated play and an actual call to play.
+   */
+  runPlayTerminatedQueue_() {
+    const queue = this.playTerminatedQueue_.slice(0);
+    this.playTerminatedQueue_ = [];
+    queue.forEach(function (q) {
+      q();
+    });
+  }
+
+  /**
+   * When a callback to play is delayed we have to run these
+   * callbacks when play is actually called on the tech. This function
+   * runs the callbacks that were delayed and accepts the return value
+   * from the tech.
+   *
+   * @param {undefined|Promise} val
+   *        The return value from the tech.
+   */
+  runPlayCallbacks_(val) {
+    const callbacks = this.playCallbacks_.slice(0);
+    this.playCallbacks_ = [];
+    // clear play terminatedQueue since we finished a real play
+    this.playTerminatedQueue_ = [];
+    callbacks.forEach(function (cb) {
+      cb(val);
+    });
+  }
+
+  /**
+   * Pause the video playback
+   */
+  pause() {
+    this.techCall_('pause');
+  }
+
+  /**
+   * Check if the player is paused or has yet to play
+   *
+   * @return {boolean}
+   *         - false: if the media is currently playing
+   *         - true: if media is not currently playing
+   */
+  paused() {
+    // The initial state of paused should be true (in Safari it's actually false)
+    return this.techGet_('paused') === false ? false : true;
+  }
+
+  /**
+   * Get a TimeRange object representing the current ranges of time that the user
+   * has played.
+   *
+   * @return { import('./utils/time').TimeRange }
+   *         A time range object that represents all the increments of time that have
+   *         been played.
+   */
+  played() {
+    return this.techGet_('played') || createTimeRanges$1(0, 0);
+  }
+
+  /**
+   * Sets or returns whether or not the user is "scrubbing". Scrubbing is
+   * when the user has clicked the progress bar handle and is
+   * dragging it along the progress bar.
+   *
+   * @param {boolean} [isScrubbing]
+   *        whether the user is or is not scrubbing
+   *
+   * @return {boolean|undefined}
+   *         - The value of scrubbing when getting
+   *         - Nothing when setting
+   */
+  scrubbing(isScrubbing) {
+    if (typeof isScrubbing === 'undefined') {
+      return this.scrubbing_;
+    }
+    this.scrubbing_ = !!isScrubbing;
+    this.techCall_('setScrubbing', this.scrubbing_);
+    if (isScrubbing) {
+      this.addClass('vjs-scrubbing');
+    } else {
+      this.removeClass('vjs-scrubbing');
+    }
+  }
+
+  /**
+   * Get or set the current time (in seconds)
+   *
+   * @param {number|string} [seconds]
+   *        The time to seek to in seconds
+   *
+   * @return {number|undefined}
+   *         - the current time in seconds when getting
+   *         - Nothing when setting
+   */
+  currentTime(seconds) {
+    if (seconds === undefined) {
+      // cache last currentTime and return. default to 0 seconds
+      //
+      // Caching the currentTime is meant to prevent a massive amount of reads on the tech's
+      // currentTime when scrubbing, but may not provide much performance benefit after all.
+      // Should be tested. Also something has to read the actual current time or the cache will
+      // never get updated.
+      this.cache_.currentTime = this.techGet_('currentTime') || 0;
+      return this.cache_.currentTime;
+    }
+    if (seconds < 0) {
+      seconds = 0;
+    }
+    if (!this.isReady_ || this.changingSrc_ || !this.tech_ || !this.tech_.isReady_) {
+      this.cache_.initTime = seconds;
+      this.off('canplay', this.boundApplyInitTime_);
+      this.one('canplay', this.boundApplyInitTime_);
+      return;
+    }
+    this.techCall_('setCurrentTime', seconds);
+    this.cache_.initTime = 0;
+    if (isFinite(seconds)) {
+      this.cache_.currentTime = Number(seconds);
+    }
+  }
+
+  /**
+   * Apply the value of initTime stored in cache as currentTime.
+   *
+   * @private
+   */
+  applyInitTime_() {
+    this.currentTime(this.cache_.initTime);
+  }
+
+  /**
+   * Normally gets the length in time of the video in seconds;
+   * in all but the rarest use cases an argument will NOT be passed to the method
+   *
+   * > **NOTE**: The video must have started loading before the duration can be
+   * known, and depending on preload behaviour may not be known until the video starts
+   * playing.
+   *
+   * @fires Player#durationchange
+   *
+   * @param {number} [seconds]
+   *        The duration of the video to set in seconds
+   *
+   * @return {number|undefined}
+   *         - The duration of the video in seconds when getting
+   *         - Nothing when setting
+   */
+  duration(seconds) {
+    if (seconds === undefined) {
+      // return NaN if the duration is not known
+      return this.cache_.duration !== undefined ? this.cache_.duration : NaN;
+    }
+    seconds = parseFloat(seconds);
+
+    // Standardize on Infinity for signaling video is live
+    if (seconds < 0) {
+      seconds = Infinity;
+    }
+    if (seconds !== this.cache_.duration) {
+      // Cache the last set value for optimized scrubbing
+      this.cache_.duration = seconds;
+      if (seconds === Infinity) {
+        this.addClass('vjs-live');
+      } else {
+        this.removeClass('vjs-live');
+      }
+      if (!isNaN(seconds)) {
+        // Do not fire durationchange unless the duration value is known.
+        // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
+
+        /**
+         * @event Player#durationchange
+         * @type {Event}
+         */
+        this.trigger('durationchange');
+      }
+    }
+  }
+
+  /**
+   * Calculates how much time is left in the video. Not part
+   * of the native video API.
+   *
+   * @return {number}
+   *         The time remaining in seconds
+   */
+  remainingTime() {
+    return this.duration() - this.currentTime();
+  }
+
+  /**
+   * A remaining time function that is intended to be used when
+   * the time is to be displayed directly to the user.
+   *
+   * @return {number}
+   *         The rounded time remaining in seconds
+   */
+  remainingTimeDisplay() {
+    return Math.floor(this.duration()) - Math.floor(this.currentTime());
+  }
+
+  //
+  // Kind of like an array of portions of the video that have been downloaded.
+
+  /**
+   * Get a TimeRange object with an array of the times of the video
+   * that have been downloaded. If you just want the percent of the
+   * video that's been downloaded, use bufferedPercent.
+   *
+   * @see [Buffered Spec]{@link http://dev.w3.org/html5/spec/video.html#dom-media-buffered}
+   *
+   * @return { import('./utils/time').TimeRange }
+   *         A mock {@link TimeRanges} object (following HTML spec)
+   */
+  buffered() {
+    let buffered = this.techGet_('buffered');
+    if (!buffered || !buffered.length) {
+      buffered = createTimeRanges$1(0, 0);
+    }
+    return buffered;
+  }
+
+  /**
+   * Get the TimeRanges of the media that are currently available
+   * for seeking to.
+   *
+   * @see [Seekable Spec]{@link https://html.spec.whatwg.org/multipage/media.html#dom-media-seekable}
+   *
+   * @return { import('./utils/time').TimeRange }
+   *         A mock {@link TimeRanges} object (following HTML spec)
+   */
+  seekable() {
+    let seekable = this.techGet_('seekable');
+    if (!seekable || !seekable.length) {
+      seekable = createTimeRanges$1(0, 0);
+    }
+    return seekable;
+  }
+
+  /**
+   * Returns whether the player is in the "seeking" state.
+   *
+   * @return {boolean} True if the player is in the seeking state, false if not.
+   */
+  seeking() {
+    return this.techGet_('seeking');
+  }
+
+  /**
+   * Returns whether the player is in the "ended" state.
+   *
+   * @return {boolean} True if the player is in the ended state, false if not.
+   */
+  ended() {
+    return this.techGet_('ended');
+  }
+
+  /**
+   * Returns the current state of network activity for the element, from
+   * the codes in the list below.
+   * - NETWORK_EMPTY (numeric value 0)
+   *   The element has not yet been initialised. All attributes are in
+   *   their initial states.
+   * - NETWORK_IDLE (numeric value 1)
+   *   The element's resource selection algorithm is active and has
+   *   selected a resource, but it is not actually using the network at
+   *   this time.
+   * - NETWORK_LOADING (numeric value 2)
+   *   The user agent is actively trying to download data.
+   * - NETWORK_NO_SOURCE (numeric value 3)
+   *   The element's resource selection algorithm is active, but it has
+   *   not yet found a resource to use.
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states
+   * @return {number} the current network activity state
+   */
+  networkState() {
+    return this.techGet_('networkState');
+  }
+
+  /**
+   * Returns a value that expresses the current state of the element
+   * with respect to rendering the current playback position, from the
+   * codes in the list below.
+   * - HAVE_NOTHING (numeric value 0)
+   *   No information regarding the media resource is available.
+   * - HAVE_METADATA (numeric value 1)
+   *   Enough of the resource has been obtained that the duration of the
+   *   resource is available.
+   * - HAVE_CURRENT_DATA (numeric value 2)
+   *   Data for the immediate current playback position is available.
+   * - HAVE_FUTURE_DATA (numeric value 3)
+   *   Data for the immediate current playback position is available, as
+   *   well as enough data for the user agent to advance the current
+   *   playback position in the direction of playback.
+   * - HAVE_ENOUGH_DATA (numeric value 4)
+   *   The user agent estimates that enough data is available for
+   *   playback to proceed uninterrupted.
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate
+   * @return {number} the current playback rendering state
+   */
+  readyState() {
+    return this.techGet_('readyState');
+  }
+
+  /**
+   * Get the percent (as a decimal) of the video that's been downloaded.
+   * This method is not a part of the native HTML video API.
+   *
+   * @return {number}
+   *         A decimal between 0 and 1 representing the percent
+   *         that is buffered 0 being 0% and 1 being 100%
+   */
+  bufferedPercent() {
+    return bufferedPercent(this.buffered(), this.duration());
+  }
+
+  /**
+   * Get the ending time of the last buffered time range
+   * This is used in the progress bar to encapsulate all time ranges.
+   *
+   * @return {number}
+   *         The end of the last buffered time range
+   */
+  bufferedEnd() {
+    const buffered = this.buffered();
+    const duration = this.duration();
+    let end = buffered.end(buffered.length - 1);
+    if (end > duration) {
+      end = duration;
+    }
+    return end;
+  }
+
+  /**
+   * Get or set the current volume of the media
+   *
+   * @param  {number} [percentAsDecimal]
+   *         The new volume as a decimal percent:
+   *         - 0 is muted/0%/off
+   *         - 1.0 is 100%/full
+   *         - 0.5 is half volume or 50%
+   *
+   * @return {number|undefined}
+   *         The current volume as a percent when getting
+   */
+  volume(percentAsDecimal) {
+    let vol;
+    if (percentAsDecimal !== undefined) {
+      // Force value to between 0 and 1
+      vol = Math.max(0, Math.min(1, percentAsDecimal));
+      this.cache_.volume = vol;
+      this.techCall_('setVolume', vol);
+      if (vol > 0) {
+        this.lastVolume_(vol);
+      }
+      return;
+    }
+
+    // Default to 1 when returning current volume.
+    vol = parseFloat(this.techGet_('volume'));
+    return isNaN(vol) ? 1 : vol;
+  }
+
+  /**
+   * Get the current muted state, or turn mute on or off
+   *
+   * @param {boolean} [muted]
+   *        - true to mute
+   *        - false to unmute
+   *
+   * @return {boolean|undefined}
+   *         - true if mute is on and getting
+   *         - false if mute is off and getting
+   *         - nothing if setting
+   */
+  muted(muted) {
+    if (muted !== undefined) {
+      this.techCall_('setMuted', muted);
+      return;
+    }
+    return this.techGet_('muted') || false;
+  }
+
+  /**
+   * Get the current defaultMuted state, or turn defaultMuted on or off. defaultMuted
+   * indicates the state of muted on initial playback.
+   *
+   * ```js
+   *   var myPlayer = videojs('some-player-id');
+   *
+   *   myPlayer.src("http://www.example.com/path/to/video.mp4");
+   *
+   *   // get, should be false
+   *   console.log(myPlayer.defaultMuted());
+   *   // set to true
+   *   myPlayer.defaultMuted(true);
+   *   // get should be true
+   *   console.log(myPlayer.defaultMuted());
+   * ```
+   *
+   * @param {boolean} [defaultMuted]
+   *        - true to mute
+   *        - false to unmute
+   *
+   * @return {boolean|undefined}
+   *         - true if defaultMuted is on and getting
+   *         - false if defaultMuted is off and getting
+   *         - Nothing when setting
+   */
+  defaultMuted(defaultMuted) {
+    if (defaultMuted !== undefined) {
+      this.techCall_('setDefaultMuted', defaultMuted);
+    }
+    return this.techGet_('defaultMuted') || false;
+  }
+
+  /**
+   * Get the last volume, or set it
+   *
+   * @param  {number} [percentAsDecimal]
+   *         The new last volume as a decimal percent:
+   *         - 0 is muted/0%/off
+   *         - 1.0 is 100%/full
+   *         - 0.5 is half volume or 50%
+   *
+   * @return {number|undefined}
+   *         - The current value of lastVolume as a percent when getting
+   *         - Nothing when setting
+   *
+   * @private
+   */
+  lastVolume_(percentAsDecimal) {
+    if (percentAsDecimal !== undefined && percentAsDecimal !== 0) {
+      this.cache_.lastVolume = percentAsDecimal;
+      return;
+    }
+    return this.cache_.lastVolume;
+  }
+
+  /**
+   * Check if current tech can support native fullscreen
+   * (e.g. with built in controls like iOS)
+   *
+   * @return {boolean}
+   *         if native fullscreen is supported
+   */
+  supportsFullScreen() {
+    return this.techGet_('supportsFullScreen') || false;
+  }
+
+  /**
+   * Check if the player is in fullscreen mode or tell the player that it
+   * is or is not in fullscreen mode.
+   *
+   * > NOTE: As of the latest HTML5 spec, isFullscreen is no longer an official
+   * property and instead document.fullscreenElement is used. But isFullscreen is
+   * still a valuable property for internal player workings.
+   *
+   * @param  {boolean} [isFS]
+   *         Set the players current fullscreen state
+   *
+   * @return {boolean|undefined}
+   *         - true if fullscreen is on and getting
+   *         - false if fullscreen is off and getting
+   *         - Nothing when setting
+   */
+  isFullscreen(isFS) {
+    if (isFS !== undefined) {
+      const oldValue = this.isFullscreen_;
+      this.isFullscreen_ = Boolean(isFS);
+
+      // if we changed fullscreen state and we're in prefixed mode, trigger fullscreenchange
+      // this is the only place where we trigger fullscreenchange events for older browsers
+      // fullWindow mode is treated as a prefixed event and will get a fullscreenchange event as well
+      if (this.isFullscreen_ !== oldValue && this.fsApi_.prefixed) {
+        /**
+           * @event Player#fullscreenchange
+           * @type {Event}
+           */
+        this.trigger('fullscreenchange');
+      }
+      this.toggleFullscreenClass_();
+      return;
+    }
+    return this.isFullscreen_;
+  }
+
+  /**
+   * Increase the size of the video to full screen
+   * In some browsers, full screen is not supported natively, so it enters
+   * "full window mode", where the video fills the browser window.
+   * In browsers and devices that support native full screen, sometimes the
+   * browser's default controls will be shown, and not the Video.js custom skin.
+   * This includes most mobile devices (iOS, Android) and older versions of
+   * Safari.
+   *
+   * @param  {Object} [fullscreenOptions]
+   *         Override the player fullscreen options
+   *
+   * @fires Player#fullscreenchange
+   */
+  requestFullscreen(fullscreenOptions) {
+    if (this.isInPictureInPicture()) {
+      this.exitPictureInPicture();
+    }
+    const self = this;
+    return new Promise((resolve, reject) => {
+      function offHandler() {
+        self.off('fullscreenerror', errorHandler);
+        self.off('fullscreenchange', changeHandler);
+      }
+      function changeHandler() {
+        offHandler();
+        resolve();
+      }
+      function errorHandler(e, err) {
+        offHandler();
+        reject(err);
+      }
+      self.one('fullscreenchange', changeHandler);
+      self.one('fullscreenerror', errorHandler);
+      const promise = self.requestFullscreenHelper_(fullscreenOptions);
+      if (promise) {
+        promise.then(offHandler, offHandler);
+        promise.then(resolve, reject);
+      }
+    });
+  }
+  requestFullscreenHelper_(fullscreenOptions) {
+    let fsOptions;
+
+    // Only pass fullscreen options to requestFullscreen in spec-compliant browsers.
+    // Use defaults or player configured option unless passed directly to this method.
+    if (!this.fsApi_.prefixed) {
+      fsOptions = this.options_.fullscreen && this.options_.fullscreen.options || {};
+      if (fullscreenOptions !== undefined) {
+        fsOptions = fullscreenOptions;
+      }
+    }
+
+    // This method works as follows:
+    // 1. if a fullscreen api is available, use it
+    //   1. call requestFullscreen with potential options
+    //   2. if we got a promise from above, use it to update isFullscreen()
+    // 2. otherwise, if the tech supports fullscreen, call `enterFullScreen` on it.
+    //   This is particularly used for iPhone, older iPads, and non-safari browser on iOS.
+    // 3. otherwise, use "fullWindow" mode
+    if (this.fsApi_.requestFullscreen) {
+      const promise = this.el_[this.fsApi_.requestFullscreen](fsOptions);
+
+      // Even on browsers with promise support this may not return a promise
+      if (promise) {
+        promise.then(() => this.isFullscreen(true), () => this.isFullscreen(false));
+      }
+      return promise;
+    } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) {
+      // we can't take the video.js controls fullscreen but we can go fullscreen
+      // with native controls
+      this.techCall_('enterFullScreen');
+    } else {
+      // fullscreen isn't supported so we'll just stretch the video element to
+      // fill the viewport
+      this.enterFullWindow();
+    }
+  }
+
+  /**
+   * Return the video to its normal size after having been in full screen mode
+   *
+   * @fires Player#fullscreenchange
+   */
+  exitFullscreen() {
+    const self = this;
+    return new Promise((resolve, reject) => {
+      function offHandler() {
+        self.off('fullscreenerror', errorHandler);
+        self.off('fullscreenchange', changeHandler);
+      }
+      function changeHandler() {
+        offHandler();
+        resolve();
+      }
+      function errorHandler(e, err) {
+        offHandler();
+        reject(err);
+      }
+      self.one('fullscreenchange', changeHandler);
+      self.one('fullscreenerror', errorHandler);
+      const promise = self.exitFullscreenHelper_();
+      if (promise) {
+        promise.then(offHandler, offHandler);
+        // map the promise to our resolve/reject methods
+        promise.then(resolve, reject);
+      }
+    });
+  }
+  exitFullscreenHelper_() {
+    if (this.fsApi_.requestFullscreen) {
+      const promise = document[this.fsApi_.exitFullscreen]();
+
+      // Even on browsers with promise support this may not return a promise
+      if (promise) {
+        // we're splitting the promise here, so, we want to catch the
+        // potential error so that this chain doesn't have unhandled errors
+        silencePromise(promise.then(() => this.isFullscreen(false)));
+      }
+      return promise;
+    } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) {
+      this.techCall_('exitFullScreen');
+    } else {
+      this.exitFullWindow();
+    }
+  }
+
+  /**
+   * When fullscreen isn't supported we can stretch the
+   * video container to as wide as the browser will let us.
+   *
+   * @fires Player#enterFullWindow
+   */
+  enterFullWindow() {
+    this.isFullscreen(true);
+    this.isFullWindow = true;
+
+    // Storing original doc overflow value to return to when fullscreen is off
+    this.docOrigOverflow = document.documentElement.style.overflow;
+
+    // Add listener for esc key to exit fullscreen
+    on(document, 'keydown', this.boundFullWindowOnEscKey_);
+
+    // Hide any scroll bars
+    document.documentElement.style.overflow = 'hidden';
+
+    // Apply fullscreen styles
+    addClass(document.body, 'vjs-full-window');
+
+    /**
+     * @event Player#enterFullWindow
+     * @type {Event}
+     */
+    this.trigger('enterFullWindow');
+  }
+
+  /**
+   * Check for call to either exit full window or
+   * full screen on ESC key
+   *
+   * @param {string} event
+   *        Event to check for key press
+   */
+  fullWindowOnEscKey(event) {
+    if (keycode.isEventKey(event, 'Esc')) {
+      if (this.isFullscreen() === true) {
+        if (!this.isFullWindow) {
+          this.exitFullscreen();
+        } else {
+          this.exitFullWindow();
+        }
+      }
+    }
+  }
+
+  /**
+   * Exit full window
+   *
+   * @fires Player#exitFullWindow
+   */
+  exitFullWindow() {
+    this.isFullscreen(false);
+    this.isFullWindow = false;
+    off(document, 'keydown', this.boundFullWindowOnEscKey_);
+
+    // Unhide scroll bars.
+    document.documentElement.style.overflow = this.docOrigOverflow;
+
+    // Remove fullscreen styles
+    removeClass(document.body, 'vjs-full-window');
+
+    // Resize the box, controller, and poster to original sizes
+    // this.positionAll();
+    /**
+     * @event Player#exitFullWindow
+     * @type {Event}
+     */
+    this.trigger('exitFullWindow');
+  }
+
+  /**
+   * Get or set disable Picture-in-Picture mode.
+   *
+   * @param {boolean} [value]
+   *                  - true will disable Picture-in-Picture mode
+   *                  - false will enable Picture-in-Picture mode
+   */
+  disablePictureInPicture(value) {
+    if (value === undefined) {
+      return this.techGet_('disablePictureInPicture');
+    }
+    this.techCall_('setDisablePictureInPicture', value);
+    this.options_.disablePictureInPicture = value;
+    this.trigger('disablepictureinpicturechanged');
+  }
+
+  /**
+   * Check if the player is in Picture-in-Picture mode or tell the player that it
+   * is or is not in Picture-in-Picture mode.
+   *
+   * @param  {boolean} [isPiP]
+   *         Set the players current Picture-in-Picture state
+   *
+   * @return {boolean|undefined}
+   *         - true if Picture-in-Picture is on and getting
+   *         - false if Picture-in-Picture is off and getting
+   *         - nothing if setting
+   */
+  isInPictureInPicture(isPiP) {
+    if (isPiP !== undefined) {
+      this.isInPictureInPicture_ = !!isPiP;
+      this.togglePictureInPictureClass_();
+      return;
+    }
+    return !!this.isInPictureInPicture_;
+  }
+
+  /**
+   * Create a floating video window always on top of other windows so that users may
+   * continue consuming media while they interact with other content sites, or
+   * applications on their device.
+   *
+   * This can use document picture-in-picture or element picture in picture
+   *
+   * Set `enableDocumentPictureInPicture` to `true` to use docPiP on a supported browser
+   * Else set `disablePictureInPicture` to `false` to disable elPiP on a supported browser
+   *
+   *
+   * @see [Spec]{@link https://w3c.github.io/picture-in-picture/}
+   * @see [Spec]{@link https://wicg.github.io/document-picture-in-picture/}
+   *
+   * @fires Player#enterpictureinpicture
+   *
+   * @return {Promise}
+   *         A promise with a Picture-in-Picture window.
+   */
+  requestPictureInPicture() {
+    if (this.options_.enableDocumentPictureInPicture && window$1.documentPictureInPicture) {
+      const pipContainer = document.createElement(this.el().tagName);
+      pipContainer.classList = this.el().classList;
+      pipContainer.classList.add('vjs-pip-container');
+      if (this.posterImage) {
+        pipContainer.appendChild(this.posterImage.el().cloneNode(true));
+      }
+      if (this.titleBar) {
+        pipContainer.appendChild(this.titleBar.el().cloneNode(true));
+      }
+      pipContainer.appendChild(createEl('p', {
+        className: 'vjs-pip-text'
+      }, {}, this.localize('Playing in picture-in-picture')));
+      return window$1.documentPictureInPicture.requestWindow({
+        // The aspect ratio won't be correct, Chrome bug https://crbug.com/1407629
+        width: this.videoWidth(),
+        height: this.videoHeight()
+      }).then(pipWindow => {
+        copyStyleSheetsToWindow(pipWindow);
+        this.el_.parentNode.insertBefore(pipContainer, this.el_);
+        pipWindow.document.body.appendChild(this.el_);
+        pipWindow.document.body.classList.add('vjs-pip-window');
+        this.player_.isInPictureInPicture(true);
+        this.player_.trigger({
+          type: 'enterpictureinpicture',
+          pipWindow
+        });
+
+        // Listen for the PiP closing event to move the video back.
+        pipWindow.addEventListener('pagehide', event => {
+          const pipVideo = event.target.querySelector('.video-js');
+          pipContainer.parentNode.replaceChild(pipVideo, pipContainer);
+          this.player_.isInPictureInPicture(false);
+          this.player_.trigger('leavepictureinpicture');
+        });
+        return pipWindow;
+      });
+    }
+    if ('pictureInPictureEnabled' in document && this.disablePictureInPicture() === false) {
+      /**
+       * This event fires when the player enters picture in picture mode
+       *
+       * @event Player#enterpictureinpicture
+       * @type {Event}
+       */
+      return this.techGet_('requestPictureInPicture');
+    }
+    return Promise.reject('No PiP mode is available');
+  }
+
+  /**
+   * Exit Picture-in-Picture mode.
+   *
+   * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+   *
+   * @fires Player#leavepictureinpicture
+   *
+   * @return {Promise}
+   *         A promise.
+   */
+  exitPictureInPicture() {
+    if (window$1.documentPictureInPicture && window$1.documentPictureInPicture.window) {
+      // With documentPictureInPicture, Player#leavepictureinpicture is fired in the pagehide handler
+      window$1.documentPictureInPicture.window.close();
+      return Promise.resolve();
+    }
+    if ('pictureInPictureEnabled' in document) {
+      /**
+       * This event fires when the player leaves picture in picture mode
+       *
+       * @event Player#leavepictureinpicture
+       * @type {Event}
+       */
+      return document.exitPictureInPicture();
+    }
+  }
+
+  /**
+   * Called when this Player has focus and a key gets pressed down, or when
+   * any Component of this player receives a key press that it doesn't handle.
+   * This allows player-wide hotkeys (either as defined below, or optionally
+   * by an external function).
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    const {
+      userActions
+    } = this.options_;
+
+    // Bail out if hotkeys are not configured.
+    if (!userActions || !userActions.hotkeys) {
+      return;
+    }
+
+    // Function that determines whether or not to exclude an element from
+    // hotkeys handling.
+    const excludeElement = el => {
+      const tagName = el.tagName.toLowerCase();
+
+      // The first and easiest test is for `contenteditable` elements.
+      if (el.isContentEditable) {
+        return true;
+      }
+
+      // Inputs matching these types will still trigger hotkey handling as
+      // they are not text inputs.
+      const allowedInputTypes = ['button', 'checkbox', 'hidden', 'radio', 'reset', 'submit'];
+      if (tagName === 'input') {
+        return allowedInputTypes.indexOf(el.type) === -1;
+      }
+
+      // The final test is by tag name. These tags will be excluded entirely.
+      const excludedTags = ['textarea'];
+      return excludedTags.indexOf(tagName) !== -1;
+    };
+
+    // Bail out if the user is focused on an interactive form element.
+    if (excludeElement(this.el_.ownerDocument.activeElement)) {
+      return;
+    }
+    if (typeof userActions.hotkeys === 'function') {
+      userActions.hotkeys.call(this, event);
+    } else {
+      this.handleHotkeys(event);
+    }
+  }
+
+  /**
+   * Called when this Player receives a hotkey keydown event.
+   * Supported player-wide hotkeys are:
+   *
+   *   f          - toggle fullscreen
+   *   m          - toggle mute
+   *   k or Space - toggle play/pause
+   *
+   * @param {Event} event
+   *        The `keydown` event that caused this function to be called.
+   */
+  handleHotkeys(event) {
+    const hotkeys = this.options_.userActions ? this.options_.userActions.hotkeys : {};
+
+    // set fullscreenKey, muteKey, playPauseKey from `hotkeys`, use defaults if not set
+    const {
+      fullscreenKey = keydownEvent => keycode.isEventKey(keydownEvent, 'f'),
+      muteKey = keydownEvent => keycode.isEventKey(keydownEvent, 'm'),
+      playPauseKey = keydownEvent => keycode.isEventKey(keydownEvent, 'k') || keycode.isEventKey(keydownEvent, 'Space')
+    } = hotkeys;
+    if (fullscreenKey.call(this, event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const FSToggle = Component$1.getComponent('FullscreenToggle');
+      if (document[this.fsApi_.fullscreenEnabled] !== false) {
+        FSToggle.prototype.handleClick.call(this, event);
+      }
+    } else if (muteKey.call(this, event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const MuteToggle = Component$1.getComponent('MuteToggle');
+      MuteToggle.prototype.handleClick.call(this, event);
+    } else if (playPauseKey.call(this, event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const PlayToggle = Component$1.getComponent('PlayToggle');
+      PlayToggle.prototype.handleClick.call(this, event);
+    }
+  }
+
+  /**
+   * Check whether the player can play a given mimetype
+   *
+   * @see https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype
+   *
+   * @param {string} type
+   *        The mimetype to check
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string)
+   */
+  canPlayType(type) {
+    let can;
+
+    // Loop through each playback technology in the options order
+    for (let i = 0, j = this.options_.techOrder; i < j.length; i++) {
+      const techName = j[i];
+      let tech = Tech.getTech(techName);
+
+      // Support old behavior of techs being registered as components.
+      // Remove once that deprecated behavior is removed.
+      if (!tech) {
+        tech = Component$1.getComponent(techName);
+      }
+
+      // Check if the current tech is defined before continuing
+      if (!tech) {
+        log$1.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+        continue;
+      }
+
+      // Check if the browser supports this technology
+      if (tech.isSupported()) {
+        can = tech.canPlayType(type);
+        if (can) {
+          return can;
+        }
+      }
+    }
+    return '';
+  }
+
+  /**
+   * Select source based on tech-order or source-order
+   * Uses source-order selection if `options.sourceOrder` is truthy. Otherwise,
+   * defaults to tech-order selection
+   *
+   * @param {Array} sources
+   *        The sources for a media asset
+   *
+   * @return {Object|boolean}
+   *         Object of source and tech order or false
+   */
+  selectSource(sources) {
+    // Get only the techs specified in `techOrder` that exist and are supported by the
+    // current platform
+    const techs = this.options_.techOrder.map(techName => {
+      return [techName, Tech.getTech(techName)];
+    }).filter(([techName, tech]) => {
+      // Check if the current tech is defined before continuing
+      if (tech) {
+        // Check if the browser supports this technology
+        return tech.isSupported();
+      }
+      log$1.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+      return false;
+    });
+
+    // Iterate over each `innerArray` element once per `outerArray` element and execute
+    // `tester` with both. If `tester` returns a non-falsy value, exit early and return
+    // that value.
+    const findFirstPassingTechSourcePair = function (outerArray, innerArray, tester) {
+      let found;
+      outerArray.some(outerChoice => {
+        return innerArray.some(innerChoice => {
+          found = tester(outerChoice, innerChoice);
+          if (found) {
+            return true;
+          }
+        });
+      });
+      return found;
+    };
+    let foundSourceAndTech;
+    const flip = fn => (a, b) => fn(b, a);
+    const finder = ([techName, tech], source) => {
+      if (tech.canPlaySource(source, this.options_[techName.toLowerCase()])) {
+        return {
+          source,
+          tech: techName
+        };
+      }
+    };
+
+    // Depending on the truthiness of `options.sourceOrder`, we swap the order of techs and sources
+    // to select from them based on their priority.
+    if (this.options_.sourceOrder) {
+      // Source-first ordering
+      foundSourceAndTech = findFirstPassingTechSourcePair(sources, techs, flip(finder));
+    } else {
+      // Tech-first ordering
+      foundSourceAndTech = findFirstPassingTechSourcePair(techs, sources, finder);
+    }
+    return foundSourceAndTech || false;
+  }
+
+  /**
+   * Executes source setting and getting logic
+   *
+   * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+   *        A SourceObject, an array of SourceObjects, or a string referencing
+   *        a URL to a media source. It is _highly recommended_ that an object
+   *        or array of objects is used here, so that source selection
+   *        algorithms can take the `type` into account.
+   *
+   *        If not provided, this method acts as a getter.
+   * @param {boolean} [isRetry]
+   *        Indicates whether this is being called internally as a result of a retry
+   *
+   * @return {string|undefined}
+   *         If the `source` argument is missing, returns the current source
+   *         URL. Otherwise, returns nothing/undefined.
+   */
+  handleSrc_(source, isRetry) {
+    // getter usage
+    if (typeof source === 'undefined') {
+      return this.cache_.src || '';
+    }
+
+    // Reset retry behavior for new source
+    if (this.resetRetryOnError_) {
+      this.resetRetryOnError_();
+    }
+
+    // filter out invalid sources and turn our source into
+    // an array of source objects
+    const sources = filterSource(source);
+
+    // if a source was passed in then it is invalid because
+    // it was filtered to a zero length Array. So we have to
+    // show an error
+    if (!sources.length) {
+      this.setTimeout(function () {
+        this.error({
+          code: 4,
+          message: this.options_.notSupportedMessage
+        });
+      }, 0);
+      return;
+    }
+
+    // initial sources
+    this.changingSrc_ = true;
+
+    // Only update the cached source list if we are not retrying a new source after error,
+    // since in that case we want to include the failed source(s) in the cache
+    if (!isRetry) {
+      this.cache_.sources = sources;
+    }
+    this.updateSourceCaches_(sources[0]);
+
+    // middlewareSource is the source after it has been changed by middleware
+    setSource(this, sources[0], (middlewareSource, mws) => {
+      this.middleware_ = mws;
+
+      // since sourceSet is async we have to update the cache again after we select a source since
+      // the source that is selected could be out of order from the cache update above this callback.
+      if (!isRetry) {
+        this.cache_.sources = sources;
+      }
+      this.updateSourceCaches_(middlewareSource);
+      const err = this.src_(middlewareSource);
+      if (err) {
+        if (sources.length > 1) {
+          return this.handleSrc_(sources.slice(1));
+        }
+        this.changingSrc_ = false;
+
+        // We need to wrap this in a timeout to give folks a chance to add error event handlers
+        this.setTimeout(function () {
+          this.error({
+            code: 4,
+            message: this.options_.notSupportedMessage
+          });
+        }, 0);
+
+        // we could not find an appropriate tech, but let's still notify the delegate that this is it
+        // this needs a better comment about why this is needed
+        this.triggerReady();
+        return;
+      }
+      setTech(mws, this.tech_);
+    });
+
+    // Try another available source if this one fails before playback.
+    if (sources.length > 1) {
+      const retry = () => {
+        // Remove the error modal
+        this.error(null);
+        this.handleSrc_(sources.slice(1), true);
+      };
+      const stopListeningForErrors = () => {
+        this.off('error', retry);
+      };
+      this.one('error', retry);
+      this.one('playing', stopListeningForErrors);
+      this.resetRetryOnError_ = () => {
+        this.off('error', retry);
+        this.off('playing', stopListeningForErrors);
+      };
+    }
+  }
+
+  /**
+   * Get or set the video source.
+   *
+   * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+   *        A SourceObject, an array of SourceObjects, or a string referencing
+   *        a URL to a media source. It is _highly recommended_ that an object
+   *        or array of objects is used here, so that source selection
+   *        algorithms can take the `type` into account.
+   *
+   *        If not provided, this method acts as a getter.
+   *
+   * @return {string|undefined}
+   *         If the `source` argument is missing, returns the current source
+   *         URL. Otherwise, returns nothing/undefined.
+   */
+  src(source) {
+    return this.handleSrc_(source, false);
+  }
+
+  /**
+   * Set the source object on the tech, returns a boolean that indicates whether
+   * there is a tech that can play the source or not
+   *
+   * @param {Tech~SourceObject} source
+   *        The source object to set on the Tech
+   *
+   * @return {boolean}
+   *         - True if there is no Tech to playback this source
+   *         - False otherwise
+   *
+   * @private
+   */
+  src_(source) {
+    const sourceTech = this.selectSource([source]);
+    if (!sourceTech) {
+      return true;
+    }
+    if (!titleCaseEquals(sourceTech.tech, this.techName_)) {
+      this.changingSrc_ = true;
+      // load this technology with the chosen source
+      this.loadTech_(sourceTech.tech, sourceTech.source);
+      this.tech_.ready(() => {
+        this.changingSrc_ = false;
+      });
+      return false;
+    }
+
+    // wait until the tech is ready to set the source
+    // and set it synchronously if possible (#2326)
+    this.ready(function () {
+      // The setSource tech method was added with source handlers
+      // so older techs won't support it
+      // We need to check the direct prototype for the case where subclasses
+      // of the tech do not support source handlers
+      if (this.tech_.constructor.prototype.hasOwnProperty('setSource')) {
+        this.techCall_('setSource', source);
+      } else {
+        this.techCall_('src', source.src);
+      }
+      this.changingSrc_ = false;
+    }, true);
+    return false;
+  }
+
+  /**
+   * Begin loading the src data.
+   */
+  load() {
+    // Workaround to use the load method with the VHS.
+    // Does not cover the case when the load method is called directly from the mediaElement.
+    if (this.tech_ && this.tech_.vhs) {
+      this.src(this.currentSource());
+      return;
+    }
+    this.techCall_('load');
+  }
+
+  /**
+   * Reset the player. Loads the first tech in the techOrder,
+   * removes all the text tracks in the existing `tech`,
+   * and calls `reset` on the `tech`.
+   */
+  reset() {
+    if (this.paused()) {
+      this.doReset_();
+    } else {
+      const playPromise = this.play();
+      silencePromise(playPromise.then(() => this.doReset_()));
+    }
+  }
+  doReset_() {
+    if (this.tech_) {
+      this.tech_.clearTracks('text');
+    }
+    this.removeClass('vjs-playing');
+    this.addClass('vjs-paused');
+    this.resetCache_();
+    this.poster('');
+    this.loadTech_(this.options_.techOrder[0], null);
+    this.techCall_('reset');
+    this.resetControlBarUI_();
+    this.error(null);
+    if (this.titleBar) {
+      this.titleBar.update({
+        title: undefined,
+        description: undefined
+      });
+    }
+    if (isEvented(this)) {
+      this.trigger('playerreset');
+    }
+  }
+
+  /**
+   * Reset Control Bar's UI by calling sub-methods that reset
+   * all of Control Bar's components
+   */
+  resetControlBarUI_() {
+    this.resetProgressBar_();
+    this.resetPlaybackRate_();
+    this.resetVolumeBar_();
+  }
+
+  /**
+   * Reset tech's progress so progress bar is reset in the UI
+   */
+  resetProgressBar_() {
+    this.currentTime(0);
+    const {
+      currentTimeDisplay,
+      durationDisplay,
+      progressControl,
+      remainingTimeDisplay
+    } = this.controlBar || {};
+    const {
+      seekBar
+    } = progressControl || {};
+    if (currentTimeDisplay) {
+      currentTimeDisplay.updateContent();
+    }
+    if (durationDisplay) {
+      durationDisplay.updateContent();
+    }
+    if (remainingTimeDisplay) {
+      remainingTimeDisplay.updateContent();
+    }
+    if (seekBar) {
+      seekBar.update();
+      if (seekBar.loadProgressBar) {
+        seekBar.loadProgressBar.update();
+      }
+    }
+  }
+
+  /**
+   * Reset Playback ratio
+   */
+  resetPlaybackRate_() {
+    this.playbackRate(this.defaultPlaybackRate());
+    this.handleTechRateChange_();
+  }
+
+  /**
+   * Reset Volume bar
+   */
+  resetVolumeBar_() {
+    this.volume(1.0);
+    this.trigger('volumechange');
+  }
+
+  /**
+   * Returns all of the current source objects.
+   *
+   * @return {Tech~SourceObject[]}
+   *         The current source objects
+   */
+  currentSources() {
+    const source = this.currentSource();
+    const sources = [];
+
+    // assume `{}` or `{ src }`
+    if (Object.keys(source).length !== 0) {
+      sources.push(source);
+    }
+    return this.cache_.sources || sources;
+  }
+
+  /**
+   * Returns the current source object.
+   *
+   * @return {Tech~SourceObject}
+   *         The current source object
+   */
+  currentSource() {
+    return this.cache_.source || {};
+  }
+
+  /**
+   * Returns the fully qualified URL of the current source value e.g. http://mysite.com/video.mp4
+   * Can be used in conjunction with `currentType` to assist in rebuilding the current source object.
+   *
+   * @return {string}
+   *         The current source
+   */
+  currentSrc() {
+    return this.currentSource() && this.currentSource().src || '';
+  }
+
+  /**
+   * Get the current source type e.g. video/mp4
+   * This can allow you rebuild the current source object so that you could load the same
+   * source and tech later
+   *
+   * @return {string}
+   *         The source MIME type
+   */
+  currentType() {
+    return this.currentSource() && this.currentSource().type || '';
+  }
+
+  /**
+   * Get or set the preload attribute
+   *
+   * @param {'none'|'auto'|'metadata'} [value]
+   *        Preload mode to pass to tech
+   *
+   * @return {string|undefined}
+   *         - The preload attribute value when getting
+   *         - Nothing when setting
+   */
+  preload(value) {
+    if (value !== undefined) {
+      this.techCall_('setPreload', value);
+      this.options_.preload = value;
+      return;
+    }
+    return this.techGet_('preload');
+  }
+
+  /**
+   * Get or set the autoplay option. When this is a boolean it will
+   * modify the attribute on the tech. When this is a string the attribute on
+   * the tech will be removed and `Player` will handle autoplay on loadstarts.
+   *
+   * @param {boolean|'play'|'muted'|'any'} [value]
+   *        - true: autoplay using the browser behavior
+   *        - false: do not autoplay
+   *        - 'play': call play() on every loadstart
+   *        - 'muted': call muted() then play() on every loadstart
+   *        - 'any': call play() on every loadstart. if that fails call muted() then play().
+   *        - *: values other than those listed here will be set `autoplay` to true
+   *
+   * @return {boolean|string|undefined}
+   *         - The current value of autoplay when getting
+   *         - Nothing when setting
+   */
+  autoplay(value) {
+    // getter usage
+    if (value === undefined) {
+      return this.options_.autoplay || false;
+    }
+    let techAutoplay;
+
+    // if the value is a valid string set it to that, or normalize `true` to 'play', if need be
+    if (typeof value === 'string' && /(any|play|muted)/.test(value) || value === true && this.options_.normalizeAutoplay) {
+      this.options_.autoplay = value;
+      this.manualAutoplay_(typeof value === 'string' ? value : 'play');
+      techAutoplay = false;
+
+      // any falsy value sets autoplay to false in the browser,
+      // lets do the same
+    } else if (!value) {
+      this.options_.autoplay = false;
+
+      // any other value (ie truthy) sets autoplay to true
+    } else {
+      this.options_.autoplay = true;
+    }
+    techAutoplay = typeof techAutoplay === 'undefined' ? this.options_.autoplay : techAutoplay;
+
+    // if we don't have a tech then we do not queue up
+    // a setAutoplay call on tech ready. We do this because the
+    // autoplay option will be passed in the constructor and we
+    // do not need to set it twice
+    if (this.tech_) {
+      this.techCall_('setAutoplay', techAutoplay);
+    }
+  }
+
+  /**
+   * Set or unset the playsinline attribute.
+   * Playsinline tells the browser that non-fullscreen playback is preferred.
+   *
+   * @param {boolean} [value]
+   *        - true means that we should try to play inline by default
+   *        - false means that we should use the browser's default playback mode,
+   *          which in most cases is inline. iOS Safari is a notable exception
+   *          and plays fullscreen by default.
+   *
+   * @return {string|undefined}
+   *         - the current value of playsinline
+   *         - Nothing when setting
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+   */
+  playsinline(value) {
+    if (value !== undefined) {
+      this.techCall_('setPlaysinline', value);
+      this.options_.playsinline = value;
+    }
+    return this.techGet_('playsinline');
+  }
+
+  /**
+   * Get or set the loop attribute on the video element.
+   *
+   * @param {boolean} [value]
+   *        - true means that we should loop the video
+   *        - false means that we should not loop the video
+   *
+   * @return {boolean|undefined}
+   *         - The current value of loop when getting
+   *         - Nothing when setting
+   */
+  loop(value) {
+    if (value !== undefined) {
+      this.techCall_('setLoop', value);
+      this.options_.loop = value;
+      return;
+    }
+    return this.techGet_('loop');
+  }
+
+  /**
+   * Get or set the poster image source url
+   *
+   * @fires Player#posterchange
+   *
+   * @param {string} [src]
+   *        Poster image source URL
+   *
+   * @return {string|undefined}
+   *         - The current value of poster when getting
+   *         - Nothing when setting
+   */
+  poster(src) {
+    if (src === undefined) {
+      return this.poster_;
+    }
+
+    // The correct way to remove a poster is to set as an empty string
+    // other falsey values will throw errors
+    if (!src) {
+      src = '';
+    }
+    if (src === this.poster_) {
+      return;
+    }
+
+    // update the internal poster variable
+    this.poster_ = src;
+
+    // update the tech's poster
+    this.techCall_('setPoster', src);
+    this.isPosterFromTech_ = false;
+
+    // alert components that the poster has been set
+    /**
+     * This event fires when the poster image is changed on the player.
+     *
+     * @event Player#posterchange
+     * @type {Event}
+     */
+    this.trigger('posterchange');
+  }
+
+  /**
+   * Some techs (e.g. YouTube) can provide a poster source in an
+   * asynchronous way. We want the poster component to use this
+   * poster source so that it covers up the tech's controls.
+   * (YouTube's play button). However we only want to use this
+   * source if the player user hasn't set a poster through
+   * the normal APIs.
+   *
+   * @fires Player#posterchange
+   * @listens Tech#posterchange
+   * @private
+   */
+  handleTechPosterChange_() {
+    if ((!this.poster_ || this.options_.techCanOverridePoster) && this.tech_ && this.tech_.poster) {
+      const newPoster = this.tech_.poster() || '';
+      if (newPoster !== this.poster_) {
+        this.poster_ = newPoster;
+        this.isPosterFromTech_ = true;
+
+        // Let components know the poster has changed
+        this.trigger('posterchange');
+      }
+    }
+  }
+
+  /**
+   * Get or set whether or not the controls are showing.
+   *
+   * @fires Player#controlsenabled
+   *
+   * @param {boolean} [bool]
+   *        - true to turn controls on
+   *        - false to turn controls off
+   *
+   * @return {boolean|undefined}
+   *         - The current value of controls when getting
+   *         - Nothing when setting
+   */
+  controls(bool) {
+    if (bool === undefined) {
+      return !!this.controls_;
+    }
+    bool = !!bool;
+
+    // Don't trigger a change event unless it actually changed
+    if (this.controls_ === bool) {
+      return;
+    }
+    this.controls_ = bool;
+    if (this.usingNativeControls()) {
+      this.techCall_('setControls', bool);
+    }
+    if (this.controls_) {
+      this.removeClass('vjs-controls-disabled');
+      this.addClass('vjs-controls-enabled');
+      /**
+       * @event Player#controlsenabled
+       * @type {Event}
+       */
+      this.trigger('controlsenabled');
+      if (!this.usingNativeControls()) {
+        this.addTechControlsListeners_();
+      }
+    } else {
+      this.removeClass('vjs-controls-enabled');
+      this.addClass('vjs-controls-disabled');
+      /**
+       * @event Player#controlsdisabled
+       * @type {Event}
+       */
+      this.trigger('controlsdisabled');
+      if (!this.usingNativeControls()) {
+        this.removeTechControlsListeners_();
+      }
+    }
+  }
+
+  /**
+   * Toggle native controls on/off. Native controls are the controls built into
+   * devices (e.g. default iPhone controls) or other techs
+   * (e.g. Vimeo Controls)
+   * **This should only be set by the current tech, because only the tech knows
+   * if it can support native controls**
+   *
+   * @fires Player#usingnativecontrols
+   * @fires Player#usingcustomcontrols
+   *
+   * @param {boolean} [bool]
+   *        - true to turn native controls on
+   *        - false to turn native controls off
+   *
+   * @return {boolean|undefined}
+   *         - The current value of native controls when getting
+   *         - Nothing when setting
+   */
+  usingNativeControls(bool) {
+    if (bool === undefined) {
+      return !!this.usingNativeControls_;
+    }
+    bool = !!bool;
+
+    // Don't trigger a change event unless it actually changed
+    if (this.usingNativeControls_ === bool) {
+      return;
+    }
+    this.usingNativeControls_ = bool;
+    if (this.usingNativeControls_) {
+      this.addClass('vjs-using-native-controls');
+
+      /**
+       * player is using the native device controls
+       *
+       * @event Player#usingnativecontrols
+       * @type {Event}
+       */
+      this.trigger('usingnativecontrols');
+    } else {
+      this.removeClass('vjs-using-native-controls');
+
+      /**
+       * player is using the custom HTML controls
+       *
+       * @event Player#usingcustomcontrols
+       * @type {Event}
+       */
+      this.trigger('usingcustomcontrols');
+    }
+  }
+
+  /**
+   * Set or get the current MediaError
+   *
+   * @fires Player#error
+   *
+   * @param  {MediaError|string|number} [err]
+   *         A MediaError or a string/number to be turned
+   *         into a MediaError
+   *
+   * @return {MediaError|null|undefined}
+   *         - The current MediaError when getting (or null)
+   *         - Nothing when setting
+   */
+  error(err) {
+    if (err === undefined) {
+      return this.error_ || null;
+    }
+
+    // allow hooks to modify error object
+    hooks('beforeerror').forEach(hookFunction => {
+      const newErr = hookFunction(this, err);
+      if (!(isObject(newErr) && !Array.isArray(newErr) || typeof newErr === 'string' || typeof newErr === 'number' || newErr === null)) {
+        this.log.error('please return a value that MediaError expects in beforeerror hooks');
+        return;
+      }
+      err = newErr;
+    });
+
+    // Suppress the first error message for no compatible source until
+    // user interaction
+    if (this.options_.suppressNotSupportedError && err && err.code === 4) {
+      const triggerSuppressedError = function () {
+        this.error(err);
+      };
+      this.options_.suppressNotSupportedError = false;
+      this.any(['click', 'touchstart'], triggerSuppressedError);
+      this.one('loadstart', function () {
+        this.off(['click', 'touchstart'], triggerSuppressedError);
+      });
+      return;
+    }
+
+    // restoring to default
+    if (err === null) {
+      this.error_ = null;
+      this.removeClass('vjs-error');
+      if (this.errorDisplay) {
+        this.errorDisplay.close();
+      }
+      return;
+    }
+    this.error_ = new MediaError(err);
+
+    // add the vjs-error classname to the player
+    this.addClass('vjs-error');
+
+    // log the name of the error type and any message
+    // IE11 logs "[object object]" and required you to expand message to see error object
+    log$1.error(`(CODE:${this.error_.code} ${MediaError.errorTypes[this.error_.code]})`, this.error_.message, this.error_);
+
+    /**
+     * @event Player#error
+     * @type {Event}
+     */
+    this.trigger('error');
+
+    // notify hooks of the per player error
+    hooks('error').forEach(hookFunction => hookFunction(this, this.error_));
+    return;
+  }
+
+  /**
+   * Report user activity
+   *
+   * @param {Object} event
+   *        Event object
+   */
+  reportUserActivity(event) {
+    this.userActivity_ = true;
+  }
+
+  /**
+   * Get/set if user is active
+   *
+   * @fires Player#useractive
+   * @fires Player#userinactive
+   *
+   * @param {boolean} [bool]
+   *        - true if the user is active
+   *        - false if the user is inactive
+   *
+   * @return {boolean|undefined}
+   *         - The current value of userActive when getting
+   *         - Nothing when setting
+   */
+  userActive(bool) {
+    if (bool === undefined) {
+      return this.userActive_;
+    }
+    bool = !!bool;
+    if (bool === this.userActive_) {
+      return;
+    }
+    this.userActive_ = bool;
+    if (this.userActive_) {
+      this.userActivity_ = true;
+      this.removeClass('vjs-user-inactive');
+      this.addClass('vjs-user-active');
+      /**
+       * @event Player#useractive
+       * @type {Event}
+       */
+      this.trigger('useractive');
+      return;
+    }
+
+    // Chrome/Safari/IE have bugs where when you change the cursor it can
+    // trigger a mousemove event. This causes an issue when you're hiding
+    // the cursor when the user is inactive, and a mousemove signals user
+    // activity. Making it impossible to go into inactive mode. Specifically
+    // this happens in fullscreen when we really need to hide the cursor.
+    //
+    // When this gets resolved in ALL browsers it can be removed
+    // https://code.google.com/p/chromium/issues/detail?id=103041
+    if (this.tech_) {
+      this.tech_.one('mousemove', function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+      });
+    }
+    this.userActivity_ = false;
+    this.removeClass('vjs-user-active');
+    this.addClass('vjs-user-inactive');
+    /**
+     * @event Player#userinactive
+     * @type {Event}
+     */
+    this.trigger('userinactive');
+  }
+
+  /**
+   * Listen for user activity based on timeout value
+   *
+   * @private
+   */
+  listenForUserActivity_() {
+    let mouseInProgress;
+    let lastMoveX;
+    let lastMoveY;
+    const handleActivity = bind_(this, this.reportUserActivity);
+    const handleMouseMove = function (e) {
+      // #1068 - Prevent mousemove spamming
+      // Chrome Bug: https://code.google.com/p/chromium/issues/detail?id=366970
+      if (e.screenX !== lastMoveX || e.screenY !== lastMoveY) {
+        lastMoveX = e.screenX;
+        lastMoveY = e.screenY;
+        handleActivity();
+      }
+    };
+    const handleMouseDown = function () {
+      handleActivity();
+      // For as long as the they are touching the device or have their mouse down,
+      // we consider them active even if they're not moving their finger or mouse.
+      // So we want to continue to update that they are active
+      this.clearInterval(mouseInProgress);
+      // Setting userActivity=true now and setting the interval to the same time
+      // as the activityCheck interval (250) should ensure we never miss the
+      // next activityCheck
+      mouseInProgress = this.setInterval(handleActivity, 250);
+    };
+    const handleMouseUpAndMouseLeave = function (event) {
+      handleActivity();
+      // Stop the interval that maintains activity if the mouse/touch is down
+      this.clearInterval(mouseInProgress);
+    };
+
+    // Any mouse movement will be considered user activity
+    this.on('mousedown', handleMouseDown);
+    this.on('mousemove', handleMouseMove);
+    this.on('mouseup', handleMouseUpAndMouseLeave);
+    this.on('mouseleave', handleMouseUpAndMouseLeave);
+    const controlBar = this.getChild('controlBar');
+
+    // Fixes bug on Android & iOS where when tapping progressBar (when control bar is displayed)
+    // controlBar would no longer be hidden by default timeout.
+    if (controlBar && !IS_IOS && !IS_ANDROID) {
+      controlBar.on('mouseenter', function (event) {
+        if (this.player().options_.inactivityTimeout !== 0) {
+          this.player().cache_.inactivityTimeout = this.player().options_.inactivityTimeout;
+        }
+        this.player().options_.inactivityTimeout = 0;
+      });
+      controlBar.on('mouseleave', function (event) {
+        this.player().options_.inactivityTimeout = this.player().cache_.inactivityTimeout;
+      });
+    }
+
+    // Listen for keyboard navigation
+    // Shouldn't need to use inProgress interval because of key repeat
+    this.on('keydown', handleActivity);
+    this.on('keyup', handleActivity);
+
+    // Run an interval every 250 milliseconds instead of stuffing everything into
+    // the mousemove/touchmove function itself, to prevent performance degradation.
+    // `this.reportUserActivity` simply sets this.userActivity_ to true, which
+    // then gets picked up by this loop
+    // http://ejohn.org/blog/learning-from-twitter/
+    let inactivityTimeout;
+
+    /** @this Player */
+    const activityCheck = function () {
+      // Check to see if mouse/touch activity has happened
+      if (!this.userActivity_) {
+        return;
+      }
+
+      // Reset the activity tracker
+      this.userActivity_ = false;
+
+      // If the user state was inactive, set the state to active
+      this.userActive(true);
+
+      // Clear any existing inactivity timeout to start the timer over
+      this.clearTimeout(inactivityTimeout);
+      const timeout = this.options_.inactivityTimeout;
+      if (timeout <= 0) {
+        return;
+      }
+
+      // In <timeout> milliseconds, if no more activity has occurred the
+      // user will be considered inactive
+      inactivityTimeout = this.setTimeout(function () {
+        // Protect against the case where the inactivityTimeout can trigger just
+        // before the next user activity is picked up by the activity check loop
+        // causing a flicker
+        if (!this.userActivity_) {
+          this.userActive(false);
+        }
+      }, timeout);
+    };
+    this.setInterval(activityCheck, 250);
+  }
+
+  /**
+   * Gets or sets the current playback rate. A playback rate of
+   * 1.0 represents normal speed and 0.5 would indicate half-speed
+   * playback, for instance.
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-playbackrate
+   *
+   * @param {number} [rate]
+   *       New playback rate to set.
+   *
+   * @return {number|undefined}
+   *         - The current playback rate when getting or 1.0
+   *         - Nothing when setting
+   */
+  playbackRate(rate) {
+    if (rate !== undefined) {
+      // NOTE: this.cache_.lastPlaybackRate is set from the tech handler
+      // that is registered above
+      this.techCall_('setPlaybackRate', rate);
+      return;
+    }
+    if (this.tech_ && this.tech_.featuresPlaybackRate) {
+      return this.cache_.lastPlaybackRate || this.techGet_('playbackRate');
+    }
+    return 1.0;
+  }
+
+  /**
+   * Gets or sets the current default playback rate. A default playback rate of
+   * 1.0 represents normal speed and 0.5 would indicate half-speed playback, for instance.
+   * defaultPlaybackRate will only represent what the initial playbackRate of a video was, not
+   * not the current playbackRate.
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-defaultplaybackrate
+   *
+   * @param {number} [rate]
+   *       New default playback rate to set.
+   *
+   * @return {number|undefined}
+   *         - The default playback rate when getting or 1.0
+   *         - Nothing when setting
+   */
+  defaultPlaybackRate(rate) {
+    if (rate !== undefined) {
+      return this.techCall_('setDefaultPlaybackRate', rate);
+    }
+    if (this.tech_ && this.tech_.featuresPlaybackRate) {
+      return this.techGet_('defaultPlaybackRate');
+    }
+    return 1.0;
+  }
+
+  /**
+   * Gets or sets the audio flag
+   *
+   * @param {boolean} [bool]
+   *        - true signals that this is an audio player
+   *        - false signals that this is not an audio player
+   *
+   * @return {boolean|undefined}
+   *         - The current value of isAudio when getting
+   *         - Nothing when setting
+   */
+  isAudio(bool) {
+    if (bool !== undefined) {
+      this.isAudio_ = !!bool;
+      return;
+    }
+    return !!this.isAudio_;
+  }
+  enableAudioOnlyUI_() {
+    // Update styling immediately to show the control bar so we can get its height
+    this.addClass('vjs-audio-only-mode');
+    const playerChildren = this.children();
+    const controlBar = this.getChild('ControlBar');
+    const controlBarHeight = controlBar && controlBar.currentHeight();
+
+    // Hide all player components except the control bar. Control bar components
+    // needed only for video are hidden with CSS
+    playerChildren.forEach(child => {
+      if (child === controlBar) {
+        return;
+      }
+      if (child.el_ && !child.hasClass('vjs-hidden')) {
+        child.hide();
+        this.audioOnlyCache_.hiddenChildren.push(child);
+      }
+    });
+    this.audioOnlyCache_.playerHeight = this.currentHeight();
+
+    // Set the player height the same as the control bar
+    this.height(controlBarHeight);
+    this.trigger('audioonlymodechange');
+  }
+  disableAudioOnlyUI_() {
+    this.removeClass('vjs-audio-only-mode');
+
+    // Show player components that were previously hidden
+    this.audioOnlyCache_.hiddenChildren.forEach(child => child.show());
+
+    // Reset player height
+    this.height(this.audioOnlyCache_.playerHeight);
+    this.trigger('audioonlymodechange');
+  }
+
+  /**
+   * Get the current audioOnlyMode state or set audioOnlyMode to true or false.
+   *
+   * Setting this to `true` will hide all player components except the control bar,
+   * as well as control bar components needed only for video.
+   *
+   * @param {boolean} [value]
+   *         The value to set audioOnlyMode to.
+   *
+   * @return {Promise|boolean}
+   *        A Promise is returned when setting the state, and a boolean when getting
+   *        the present state
+   */
+  audioOnlyMode(value) {
+    if (typeof value !== 'boolean' || value === this.audioOnlyMode_) {
+      return this.audioOnlyMode_;
+    }
+    this.audioOnlyMode_ = value;
+
+    // Enable Audio Only Mode
+    if (value) {
+      const exitPromises = [];
+
+      // Fullscreen and PiP are not supported in audioOnlyMode, so exit if we need to.
+      if (this.isInPictureInPicture()) {
+        exitPromises.push(this.exitPictureInPicture());
+      }
+      if (this.isFullscreen()) {
+        exitPromises.push(this.exitFullscreen());
+      }
+      if (this.audioPosterMode()) {
+        exitPromises.push(this.audioPosterMode(false));
+      }
+      return Promise.all(exitPromises).then(() => this.enableAudioOnlyUI_());
+    }
+
+    // Disable Audio Only Mode
+    return Promise.resolve().then(() => this.disableAudioOnlyUI_());
+  }
+  enablePosterModeUI_() {
+    // Hide the video element and show the poster image to enable posterModeUI
+    const tech = this.tech_ && this.tech_;
+    tech.hide();
+    this.addClass('vjs-audio-poster-mode');
+    this.trigger('audiopostermodechange');
+  }
+  disablePosterModeUI_() {
+    // Show the video element and hide the poster image to disable posterModeUI
+    const tech = this.tech_ && this.tech_;
+    tech.show();
+    this.removeClass('vjs-audio-poster-mode');
+    this.trigger('audiopostermodechange');
+  }
+
+  /**
+   * Get the current audioPosterMode state or set audioPosterMode to true or false
+   *
+   * @param {boolean} [value]
+   *         The value to set audioPosterMode to.
+   *
+   * @return {Promise|boolean}
+   *         A Promise is returned when setting the state, and a boolean when getting
+   *        the present state
+   */
+  audioPosterMode(value) {
+    if (typeof value !== 'boolean' || value === this.audioPosterMode_) {
+      return this.audioPosterMode_;
+    }
+    this.audioPosterMode_ = value;
+    if (value) {
+      if (this.audioOnlyMode()) {
+        const audioOnlyModePromise = this.audioOnlyMode(false);
+        return audioOnlyModePromise.then(() => {
+          // enable audio poster mode after audio only mode is disabled
+          this.enablePosterModeUI_();
+        });
+      }
+      return Promise.resolve().then(() => {
+        // enable audio poster mode
+        this.enablePosterModeUI_();
+      });
+    }
+    return Promise.resolve().then(() => {
+      // disable audio poster mode
+      this.disablePosterModeUI_();
+    });
+  }
+
+  /**
+   * A helper method for adding a {@link TextTrack} to our
+   * {@link TextTrackList}.
+   *
+   * In addition to the W3C settings we allow adding additional info through options.
+   *
+   * @see http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack
+   *
+   * @param {string} [kind]
+   *        the kind of TextTrack you are adding
+   *
+   * @param {string} [label]
+   *        the label to give the TextTrack label
+   *
+   * @param {string} [language]
+   *        the language to set on the TextTrack
+   *
+   * @return {TextTrack|undefined}
+   *         the TextTrack that was added or undefined
+   *         if there is no tech
+   */
+  addTextTrack(kind, label, language) {
+    if (this.tech_) {
+      return this.tech_.addTextTrack(kind, label, language);
+    }
+  }
+
+  /**
+   * Create a remote {@link TextTrack} and an {@link HTMLTrackElement}.
+   *
+   * @param {Object} options
+   *        Options to pass to {@link HTMLTrackElement} during creation. See
+   *        {@link HTMLTrackElement} for object properties that you should use.
+   *
+   * @param {boolean} [manualCleanup=false] if set to true, the TextTrack will not be removed
+   *                                        from the TextTrackList and HtmlTrackElementList
+   *                                        after a source change
+   *
+   * @return { import('./tracks/html-track-element').default }
+   *         the HTMLTrackElement that was created and added
+   *         to the HtmlTrackElementList and the remote
+   *         TextTrackList
+   *
+   */
+  addRemoteTextTrack(options, manualCleanup) {
+    if (this.tech_) {
+      return this.tech_.addRemoteTextTrack(options, manualCleanup);
+    }
+  }
+
+  /**
+   * Remove a remote {@link TextTrack} from the respective
+   * {@link TextTrackList} and {@link HtmlTrackElementList}.
+   *
+   * @param {Object} track
+   *        Remote {@link TextTrack} to remove
+   *
+   * @return {undefined}
+   *         does not return anything
+   */
+  removeRemoteTextTrack(obj = {}) {
+    let {
+      track
+    } = obj;
+    if (!track) {
+      track = obj;
+    }
+
+    // destructure the input into an object with a track argument, defaulting to arguments[0]
+    // default the whole argument to an empty object if nothing was passed in
+
+    if (this.tech_) {
+      return this.tech_.removeRemoteTextTrack(track);
+    }
+  }
+
+  /**
+   * Gets available media playback quality metrics as specified by the W3C's Media
+   * Playback Quality API.
+   *
+   * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+   *
+   * @return {Object|undefined}
+   *         An object with supported media playback quality metrics or undefined if there
+   *         is no tech or the tech does not support it.
+   */
+  getVideoPlaybackQuality() {
+    return this.techGet_('getVideoPlaybackQuality');
+  }
+
+  /**
+   * Get video width
+   *
+   * @return {number}
+   *         current video width
+   */
+  videoWidth() {
+    return this.tech_ && this.tech_.videoWidth && this.tech_.videoWidth() || 0;
+  }
+
+  /**
+   * Get video height
+   *
+   * @return {number}
+   *         current video height
+   */
+  videoHeight() {
+    return this.tech_ && this.tech_.videoHeight && this.tech_.videoHeight() || 0;
+  }
+
+  /**
+   * Set or get the player's language code.
+   *
+   * Changing the language will trigger
+   * [languagechange]{@link Player#event:languagechange}
+   * which Components can use to update control text.
+   * ClickableComponent will update its control text by default on
+   * [languagechange]{@link Player#event:languagechange}.
+   *
+   * @fires Player#languagechange
+   *
+   * @param {string} [code]
+   *        the language code to set the player to
+   *
+   * @return {string|undefined}
+   *         - The current language code when getting
+   *         - Nothing when setting
+   */
+  language(code) {
+    if (code === undefined) {
+      return this.language_;
+    }
+    if (this.language_ !== String(code).toLowerCase()) {
+      this.language_ = String(code).toLowerCase();
+
+      // during first init, it's possible some things won't be evented
+      if (isEvented(this)) {
+        /**
+        * fires when the player language change
+        *
+        * @event Player#languagechange
+        * @type {Event}
+        */
+        this.trigger('languagechange');
+      }
+    }
+  }
+
+  /**
+   * Get the player's language dictionary
+   * Merge every time, because a newly added plugin might call videojs.addLanguage() at any time
+   * Languages specified directly in the player options have precedence
+   *
+   * @return {Array}
+   *         An array of of supported languages
+   */
+  languages() {
+    return merge$1(Player.prototype.options_.languages, this.languages_);
+  }
+
+  /**
+   * returns a JavaScript object representing the current track
+   * information. **DOES not return it as JSON**
+   *
+   * @return {Object}
+   *         Object representing the current of track info
+   */
+  toJSON() {
+    const options = merge$1(this.options_);
+    const tracks = options.tracks;
+    options.tracks = [];
+    for (let i = 0; i < tracks.length; i++) {
+      let track = tracks[i];
+
+      // deep merge tracks and null out player so no circular references
+      track = merge$1(track);
+      track.player = undefined;
+      options.tracks[i] = track;
+    }
+    return options;
+  }
+
+  /**
+   * Creates a simple modal dialog (an instance of the {@link ModalDialog}
+   * component) that immediately overlays the player with arbitrary
+   * content and removes itself when closed.
+   *
+   * @param {string|Function|Element|Array|null} content
+   *        Same as {@link ModalDialog#content}'s param of the same name.
+   *        The most straight-forward usage is to provide a string or DOM
+   *        element.
+   *
+   * @param {Object} [options]
+   *        Extra options which will be passed on to the {@link ModalDialog}.
+   *
+   * @return {ModalDialog}
+   *         the {@link ModalDialog} that was created
+   */
+  createModal(content, options) {
+    options = options || {};
+    options.content = content || '';
+    const modal = new ModalDialog(this, options);
+    this.addChild(modal);
+    modal.on('dispose', () => {
+      this.removeChild(modal);
+    });
+    modal.open();
+    return modal;
+  }
+
+  /**
+   * Change breakpoint classes when the player resizes.
+   *
+   * @private
+   */
+  updateCurrentBreakpoint_() {
+    if (!this.responsive()) {
+      return;
+    }
+    const currentBreakpoint = this.currentBreakpoint();
+    const currentWidth = this.currentWidth();
+    for (let i = 0; i < BREAKPOINT_ORDER.length; i++) {
+      const candidateBreakpoint = BREAKPOINT_ORDER[i];
+      const maxWidth = this.breakpoints_[candidateBreakpoint];
+      if (currentWidth <= maxWidth) {
+        // The current breakpoint did not change, nothing to do.
+        if (currentBreakpoint === candidateBreakpoint) {
+          return;
+        }
+
+        // Only remove a class if there is a current breakpoint.
+        if (currentBreakpoint) {
+          this.removeClass(BREAKPOINT_CLASSES[currentBreakpoint]);
+        }
+        this.addClass(BREAKPOINT_CLASSES[candidateBreakpoint]);
+        this.breakpoint_ = candidateBreakpoint;
+        break;
+      }
+    }
+  }
+
+  /**
+   * Removes the current breakpoint.
+   *
+   * @private
+   */
+  removeCurrentBreakpoint_() {
+    const className = this.currentBreakpointClass();
+    this.breakpoint_ = '';
+    if (className) {
+      this.removeClass(className);
+    }
+  }
+
+  /**
+   * Get or set breakpoints on the player.
+   *
+   * Calling this method with an object or `true` will remove any previous
+   * custom breakpoints and start from the defaults again.
+   *
+   * @param  {Object|boolean} [breakpoints]
+   *         If an object is given, it can be used to provide custom
+   *         breakpoints. If `true` is given, will set default breakpoints.
+   *         If this argument is not given, will simply return the current
+   *         breakpoints.
+   *
+   * @param  {number} [breakpoints.tiny]
+   *         The maximum width for the "vjs-layout-tiny" class.
+   *
+   * @param  {number} [breakpoints.xsmall]
+   *         The maximum width for the "vjs-layout-x-small" class.
+   *
+   * @param  {number} [breakpoints.small]
+   *         The maximum width for the "vjs-layout-small" class.
+   *
+   * @param  {number} [breakpoints.medium]
+   *         The maximum width for the "vjs-layout-medium" class.
+   *
+   * @param  {number} [breakpoints.large]
+   *         The maximum width for the "vjs-layout-large" class.
+   *
+   * @param  {number} [breakpoints.xlarge]
+   *         The maximum width for the "vjs-layout-x-large" class.
+   *
+   * @param  {number} [breakpoints.huge]
+   *         The maximum width for the "vjs-layout-huge" class.
+   *
+   * @return {Object}
+   *         An object mapping breakpoint names to maximum width values.
+   */
+  breakpoints(breakpoints) {
+    // Used as a getter.
+    if (breakpoints === undefined) {
+      return Object.assign(this.breakpoints_);
+    }
+    this.breakpoint_ = '';
+    this.breakpoints_ = Object.assign({}, DEFAULT_BREAKPOINTS, breakpoints);
+
+    // When breakpoint definitions change, we need to update the currently
+    // selected breakpoint.
+    this.updateCurrentBreakpoint_();
+
+    // Clone the breakpoints before returning.
+    return Object.assign(this.breakpoints_);
+  }
+
+  /**
+   * Get or set a flag indicating whether or not this player should adjust
+   * its UI based on its dimensions.
+   *
+   * @param  {boolean} [value]
+   *         Should be `true` if the player should adjust its UI based on its
+   *         dimensions; otherwise, should be `false`.
+   *
+   * @return {boolean|undefined}
+   *         Will be `true` if this player should adjust its UI based on its
+   *         dimensions; otherwise, will be `false`.
+   *         Nothing if setting
+   */
+  responsive(value) {
+    // Used as a getter.
+    if (value === undefined) {
+      return this.responsive_;
+    }
+    value = Boolean(value);
+    const current = this.responsive_;
+
+    // Nothing changed.
+    if (value === current) {
+      return;
+    }
+
+    // The value actually changed, set it.
+    this.responsive_ = value;
+
+    // Start listening for breakpoints and set the initial breakpoint if the
+    // player is now responsive.
+    if (value) {
+      this.on('playerresize', this.boundUpdateCurrentBreakpoint_);
+      this.updateCurrentBreakpoint_();
+
+      // Stop listening for breakpoints if the player is no longer responsive.
+    } else {
+      this.off('playerresize', this.boundUpdateCurrentBreakpoint_);
+      this.removeCurrentBreakpoint_();
+    }
+    return value;
+  }
+
+  /**
+   * Get current breakpoint name, if any.
+   *
+   * @return {string}
+   *         If there is currently a breakpoint set, returns a the key from the
+   *         breakpoints object matching it. Otherwise, returns an empty string.
+   */
+  currentBreakpoint() {
+    return this.breakpoint_;
+  }
+
+  /**
+   * Get the current breakpoint class name.
+   *
+   * @return {string}
+   *         The matching class name (e.g. `"vjs-layout-tiny"` or
+   *         `"vjs-layout-large"`) for the current breakpoint. Empty string if
+   *         there is no current breakpoint.
+   */
+  currentBreakpointClass() {
+    return BREAKPOINT_CLASSES[this.breakpoint_] || '';
+  }
+
+  /**
+   * An object that describes a single piece of media.
+   *
+   * Properties that are not part of this type description will be retained; so,
+   * this can be viewed as a generic metadata storage mechanism as well.
+   *
+   * @see      {@link https://wicg.github.io/mediasession/#the-mediametadata-interface}
+   * @typedef  {Object} Player~MediaObject
+   *
+   * @property {string} [album]
+   *           Unused, except if this object is passed to the `MediaSession`
+   *           API.
+   *
+   * @property {string} [artist]
+   *           Unused, except if this object is passed to the `MediaSession`
+   *           API.
+   *
+   * @property {Object[]} [artwork]
+   *           Unused, except if this object is passed to the `MediaSession`
+   *           API. If not specified, will be populated via the `poster`, if
+   *           available.
+   *
+   * @property {string} [poster]
+   *           URL to an image that will display before playback.
+   *
+   * @property {Tech~SourceObject|Tech~SourceObject[]|string} [src]
+   *           A single source object, an array of source objects, or a string
+   *           referencing a URL to a media source. It is _highly recommended_
+   *           that an object or array of objects is used here, so that source
+   *           selection algorithms can take the `type` into account.
+   *
+   * @property {string} [title]
+   *           Unused, except if this object is passed to the `MediaSession`
+   *           API.
+   *
+   * @property {Object[]} [textTracks]
+   *           An array of objects to be used to create text tracks, following
+   *           the {@link https://www.w3.org/TR/html50/embedded-content-0.html#the-track-element|native track element format}.
+   *           For ease of removal, these will be created as "remote" text
+   *           tracks and set to automatically clean up on source changes.
+   *
+   *           These objects may have properties like `src`, `kind`, `label`,
+   *           and `language`, see {@link Tech#createRemoteTextTrack}.
+   */
+
+  /**
+   * Populate the player using a {@link Player~MediaObject|MediaObject}.
+   *
+   * @param  {Player~MediaObject} media
+   *         A media object.
+   *
+   * @param  {Function} ready
+   *         A callback to be called when the player is ready.
+   */
+  loadMedia(media, ready) {
+    if (!media || typeof media !== 'object') {
+      return;
+    }
+    const crossOrigin = this.crossOrigin();
+    this.reset();
+
+    // Clone the media object so it cannot be mutated from outside.
+    this.cache_.media = merge$1(media);
+    const {
+      artist,
+      artwork,
+      description,
+      poster,
+      src,
+      textTracks,
+      title
+    } = this.cache_.media;
+
+    // If `artwork` is not given, create it using `poster`.
+    if (!artwork && poster) {
+      this.cache_.media.artwork = [{
+        src: poster,
+        type: getMimetype(poster)
+      }];
+    }
+    if (crossOrigin) {
+      this.crossOrigin(crossOrigin);
+    }
+    if (src) {
+      this.src(src);
+    }
+    if (poster) {
+      this.poster(poster);
+    }
+    if (Array.isArray(textTracks)) {
+      textTracks.forEach(tt => this.addRemoteTextTrack(tt, false));
+    }
+    if (this.titleBar) {
+      this.titleBar.update({
+        title,
+        description: description || artist || ''
+      });
+    }
+    this.ready(ready);
+  }
+
+  /**
+   * Get a clone of the current {@link Player~MediaObject} for this player.
+   *
+   * If the `loadMedia` method has not been used, will attempt to return a
+   * {@link Player~MediaObject} based on the current state of the player.
+   *
+   * @return {Player~MediaObject}
+   */
+  getMedia() {
+    if (!this.cache_.media) {
+      const poster = this.poster();
+      const src = this.currentSources();
+      const textTracks = Array.prototype.map.call(this.remoteTextTracks(), tt => ({
+        kind: tt.kind,
+        label: tt.label,
+        language: tt.language,
+        src: tt.src
+      }));
+      const media = {
+        src,
+        textTracks
+      };
+      if (poster) {
+        media.poster = poster;
+        media.artwork = [{
+          src: media.poster,
+          type: getMimetype(media.poster)
+        }];
+      }
+      return media;
+    }
+    return merge$1(this.cache_.media);
+  }
+
+  /**
+   * Gets tag settings
+   *
+   * @param {Element} tag
+   *        The player tag
+   *
+   * @return {Object}
+   *         An object containing all of the settings
+   *         for a player tag
+   */
+  static getTagSettings(tag) {
+    const baseOptions = {
+      sources: [],
+      tracks: []
+    };
+    const tagOptions = getAttributes(tag);
+    const dataSetup = tagOptions['data-setup'];
+    if (hasClass(tag, 'vjs-fill')) {
+      tagOptions.fill = true;
+    }
+    if (hasClass(tag, 'vjs-fluid')) {
+      tagOptions.fluid = true;
+    }
+
+    // Check if data-setup attr exists.
+    if (dataSetup !== null) {
+      // Parse options JSON
+      // If empty string, make it a parsable json object.
+      const [err, data] = safeParseTuple(dataSetup || '{}');
+      if (err) {
+        log$1.error(err);
+      }
+      Object.assign(tagOptions, data);
+    }
+    Object.assign(baseOptions, tagOptions);
+
+    // Get tag children settings
+    if (tag.hasChildNodes()) {
+      const children = tag.childNodes;
+      for (let i = 0, j = children.length; i < j; i++) {
+        const child = children[i];
+        // Change case needed: http://ejohn.org/blog/nodename-case-sensitivity/
+        const childName = child.nodeName.toLowerCase();
+        if (childName === 'source') {
+          baseOptions.sources.push(getAttributes(child));
+        } else if (childName === 'track') {
+          baseOptions.tracks.push(getAttributes(child));
+        }
+      }
+    }
+    return baseOptions;
+  }
+
+  /**
+   * Set debug mode to enable/disable logs at info level.
+   *
+   * @param {boolean} enabled
+   * @fires Player#debugon
+   * @fires Player#debugoff
+   * @return {boolean|undefined}
+   */
+  debug(enabled) {
+    if (enabled === undefined) {
+      return this.debugEnabled_;
+    }
+    if (enabled) {
+      this.trigger('debugon');
+      this.previousLogLevel_ = this.log.level;
+      this.log.level('debug');
+      this.debugEnabled_ = true;
+    } else {
+      this.trigger('debugoff');
+      this.log.level(this.previousLogLevel_);
+      this.previousLogLevel_ = undefined;
+      this.debugEnabled_ = false;
+    }
+  }
+
+  /**
+   * Set or get current playback rates.
+   * Takes an array and updates the playback rates menu with the new items.
+   * Pass in an empty array to hide the menu.
+   * Values other than arrays are ignored.
+   *
+   * @fires Player#playbackrateschange
+   * @param {number[]} [newRates]
+   *                   The new rates that the playback rates menu should update to.
+   *                   An empty array will hide the menu
+   * @return {number[]} When used as a getter will return the current playback rates
+   */
+  playbackRates(newRates) {
+    if (newRates === undefined) {
+      return this.cache_.playbackRates;
+    }
+
+    // ignore any value that isn't an array
+    if (!Array.isArray(newRates)) {
+      return;
+    }
+
+    // ignore any arrays that don't only contain numbers
+    if (!newRates.every(rate => typeof rate === 'number')) {
+      return;
+    }
+    this.cache_.playbackRates = newRates;
+
+    /**
+    * fires when the playback rates in a player are changed
+    *
+    * @event Player#playbackrateschange
+    * @type {Event}
+    */
+    this.trigger('playbackrateschange');
+  }
+}
+
+/**
+ * Get the {@link VideoTrackList}
+ *
+ * @link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist
+ *
+ * @return {VideoTrackList}
+ *         the current video track list
+ *
+ * @method Player.prototype.videoTracks
+ */
+
+/**
+ * Get the {@link AudioTrackList}
+ *
+ * @link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist
+ *
+ * @return {AudioTrackList}
+ *         the current audio track list
+ *
+ * @method Player.prototype.audioTracks
+ */
+
+/**
+ * Get the {@link TextTrackList}
+ *
+ * @link http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-texttracks
+ *
+ * @return {TextTrackList}
+ *         the current text track list
+ *
+ * @method Player.prototype.textTracks
+ */
+
+/**
+ * Get the remote {@link TextTrackList}
+ *
+ * @return {TextTrackList}
+ *         The current remote text track list
+ *
+ * @method Player.prototype.remoteTextTracks
+ */
+
+/**
+ * Get the remote {@link HtmlTrackElementList} tracks.
+ *
+ * @return {HtmlTrackElementList}
+ *         The current remote text track element list
+ *
+ * @method Player.prototype.remoteTextTrackEls
+ */
+
+ALL.names.forEach(function (name) {
+  const props = ALL[name];
+  Player.prototype[props.getterName] = function () {
+    if (this.tech_) {
+      return this.tech_[props.getterName]();
+    }
+
+    // if we have not yet loadTech_, we create {video,audio,text}Tracks_
+    // these will be passed to the tech during loading
+    this[props.privateName] = this[props.privateName] || new props.ListClass();
+    return this[props.privateName];
+  };
+});
+
+/**
+ * Get or set the `Player`'s crossorigin option. For the HTML5 player, this
+ * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+ * behavior.
+ *
+ * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+ *
+ * @param {string} [value]
+ *        The value to set the `Player`'s crossorigin to. If an argument is
+ *        given, must be one of `anonymous` or `use-credentials`.
+ *
+ * @return {string|undefined}
+ *         - The current crossorigin value of the `Player` when getting.
+ *         - undefined when setting
+ */
+Player.prototype.crossorigin = Player.prototype.crossOrigin;
+
+/**
+ * Global enumeration of players.
+ *
+ * The keys are the player IDs and the values are either the {@link Player}
+ * instance or `null` for disposed players.
+ *
+ * @type {Object}
+ */
+Player.players = {};
+const navigator = window$1.navigator;
+
+/*
+ * Player instance options, surfaced using options
+ * options = Player.prototype.options_
+ * Make changes in options, not here.
+ *
+ * @type {Object}
+ * @private
+ */
+Player.prototype.options_ = {
+  // Default order of fallback technology
+  techOrder: Tech.defaultTechOrder_,
+  html5: {},
+  // enable sourceset by default
+  enableSourceset: true,
+  // default inactivity timeout
+  inactivityTimeout: 2000,
+  // default playback rates
+  playbackRates: [],
+  // Add playback rate selection by adding rates
+  // 'playbackRates': [0.5, 1, 1.5, 2],
+  liveui: false,
+  // Included control sets
+  children: ['mediaLoader', 'posterImage', 'titleBar', 'textTrackDisplay', 'loadingSpinner', 'bigPlayButton', 'liveTracker', 'controlBar', 'errorDisplay', 'textTrackSettings', 'resizeManager'],
+  language: navigator && (navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language) || 'en',
+  // locales and their language translations
+  languages: {},
+  // Default message to show when a video cannot be played.
+  notSupportedMessage: 'No compatible source was found for this media.',
+  normalizeAutoplay: false,
+  fullscreen: {
+    options: {
+      navigationUI: 'hide'
+    }
+  },
+  breakpoints: {},
+  responsive: false,
+  audioOnlyMode: false,
+  audioPosterMode: false,
+  // Default smooth seeking to false
+  enableSmoothSeeking: false
+};
+TECH_EVENTS_RETRIGGER.forEach(function (event) {
+  Player.prototype[`handleTech${toTitleCase$1(event)}_`] = function () {
+    return this.trigger(event);
+  };
+});
+
+/**
+ * Fired when the player has initial duration and dimension information
+ *
+ * @event Player#loadedmetadata
+ * @type {Event}
+ */
+
+/**
+ * Fired when the player has downloaded data at the current playback position
+ *
+ * @event Player#loadeddata
+ * @type {Event}
+ */
+
+/**
+ * Fired when the current playback position has changed *
+ * During playback this is fired every 15-250 milliseconds, depending on the
+ * playback technology in use.
+ *
+ * @event Player#timeupdate
+ * @type {Event}
+ */
+
+/**
+ * Fired when the volume changes
+ *
+ * @event Player#volumechange
+ * @type {Event}
+ */
+
+/**
+ * Reports whether or not a player has a plugin available.
+ *
+ * This does not report whether or not the plugin has ever been initialized
+ * on this player. For that, [usingPlugin]{@link Player#usingPlugin}.
+ *
+ * @method Player#hasPlugin
+ * @param  {string}  name
+ *         The name of a plugin.
+ *
+ * @return {boolean}
+ *         Whether or not this player has the requested plugin available.
+ */
+
+/**
+ * Reports whether or not a player is using a plugin by name.
+ *
+ * For basic plugins, this only reports whether the plugin has _ever_ been
+ * initialized on this player.
+ *
+ * @method Player#usingPlugin
+ * @param  {string} name
+ *         The name of a plugin.
+ *
+ * @return {boolean}
+ *         Whether or not this player is using the requested plugin.
+ */
+
+Component$1.registerComponent('Player', Player);
+
+/**
+ * @file plugin.js
+ */
+
+/**
+ * The base plugin name.
+ *
+ * @private
+ * @constant
+ * @type {string}
+ */
+const BASE_PLUGIN_NAME = 'plugin';
+
+/**
+ * The key on which a player's active plugins cache is stored.
+ *
+ * @private
+ * @constant
+ * @type     {string}
+ */
+const PLUGIN_CACHE_KEY = 'activePlugins_';
+
+/**
+ * Stores registered plugins in a private space.
+ *
+ * @private
+ * @type    {Object}
+ */
+const pluginStorage = {};
+
+/**
+ * Reports whether or not a plugin has been registered.
+ *
+ * @private
+ * @param   {string} name
+ *          The name of a plugin.
+ *
+ * @return {boolean}
+ *          Whether or not the plugin has been registered.
+ */
+const pluginExists = name => pluginStorage.hasOwnProperty(name);
+
+/**
+ * Get a single registered plugin by name.
+ *
+ * @private
+ * @param   {string} name
+ *          The name of a plugin.
+ *
+ * @return {typeof Plugin|Function|undefined}
+ *          The plugin (or undefined).
+ */
+const getPlugin = name => pluginExists(name) ? pluginStorage[name] : undefined;
+
+/**
+ * Marks a plugin as "active" on a player.
+ *
+ * Also, ensures that the player has an object for tracking active plugins.
+ *
+ * @private
+ * @param   {Player} player
+ *          A Video.js player instance.
+ *
+ * @param   {string} name
+ *          The name of a plugin.
+ */
+const markPluginAsActive = (player, name) => {
+  player[PLUGIN_CACHE_KEY] = player[PLUGIN_CACHE_KEY] || {};
+  player[PLUGIN_CACHE_KEY][name] = true;
+};
+
+/**
+ * Triggers a pair of plugin setup events.
+ *
+ * @private
+ * @param  {Player} player
+ *         A Video.js player instance.
+ *
+ * @param  {PluginEventHash} hash
+ *         A plugin event hash.
+ *
+ * @param  {boolean} [before]
+ *         If true, prefixes the event name with "before". In other words,
+ *         use this to trigger "beforepluginsetup" instead of "pluginsetup".
+ */
+const triggerSetupEvent = (player, hash, before) => {
+  const eventName = (before ? 'before' : '') + 'pluginsetup';
+  player.trigger(eventName, hash);
+  player.trigger(eventName + ':' + hash.name, hash);
+};
+
+/**
+ * Takes a basic plugin function and returns a wrapper function which marks
+ * on the player that the plugin has been activated.
+ *
+ * @private
+ * @param   {string} name
+ *          The name of the plugin.
+ *
+ * @param   {Function} plugin
+ *          The basic plugin.
+ *
+ * @return {Function}
+ *          A wrapper function for the given plugin.
+ */
+const createBasicPlugin = function (name, plugin) {
+  const basicPluginWrapper = function () {
+    // We trigger the "beforepluginsetup" and "pluginsetup" events on the player
+    // regardless, but we want the hash to be consistent with the hash provided
+    // for advanced plugins.
+    //
+    // The only potentially counter-intuitive thing here is the `instance` in
+    // the "pluginsetup" event is the value returned by the `plugin` function.
+    triggerSetupEvent(this, {
+      name,
+      plugin,
+      instance: null
+    }, true);
+    const instance = plugin.apply(this, arguments);
+    markPluginAsActive(this, name);
+    triggerSetupEvent(this, {
+      name,
+      plugin,
+      instance
+    });
+    return instance;
+  };
+  Object.keys(plugin).forEach(function (prop) {
+    basicPluginWrapper[prop] = plugin[prop];
+  });
+  return basicPluginWrapper;
+};
+
+/**
+ * Takes a plugin sub-class and returns a factory function for generating
+ * instances of it.
+ *
+ * This factory function will replace itself with an instance of the requested
+ * sub-class of Plugin.
+ *
+ * @private
+ * @param   {string} name
+ *          The name of the plugin.
+ *
+ * @param   {Plugin} PluginSubClass
+ *          The advanced plugin.
+ *
+ * @return {Function}
+ */
+const createPluginFactory = (name, PluginSubClass) => {
+  // Add a `name` property to the plugin prototype so that each plugin can
+  // refer to itself by name.
+  PluginSubClass.prototype.name = name;
+  return function (...args) {
+    triggerSetupEvent(this, {
+      name,
+      plugin: PluginSubClass,
+      instance: null
+    }, true);
+    const instance = new PluginSubClass(...[this, ...args]);
+
+    // The plugin is replaced by a function that returns the current instance.
+    this[name] = () => instance;
+    triggerSetupEvent(this, instance.getEventHash());
+    return instance;
+  };
+};
+
+/**
+ * Parent class for all advanced plugins.
+ *
+ * @mixes   module:evented~EventedMixin
+ * @mixes   module:stateful~StatefulMixin
+ * @fires   Player#beforepluginsetup
+ * @fires   Player#beforepluginsetup:$name
+ * @fires   Player#pluginsetup
+ * @fires   Player#pluginsetup:$name
+ * @listens Player#dispose
+ * @throws  {Error}
+ *          If attempting to instantiate the base {@link Plugin} class
+ *          directly instead of via a sub-class.
+ */
+class Plugin {
+  /**
+   * Creates an instance of this class.
+   *
+   * Sub-classes should call `super` to ensure plugins are properly initialized.
+   *
+   * @param {Player} player
+   *        A Video.js player instance.
+   */
+  constructor(player) {
+    if (this.constructor === Plugin) {
+      throw new Error('Plugin must be sub-classed; not directly instantiated.');
+    }
+    this.player = player;
+    if (!this.log) {
+      this.log = this.player.log.createLogger(this.name);
+    }
+
+    // Make this object evented, but remove the added `trigger` method so we
+    // use the prototype version instead.
+    evented(this);
+    delete this.trigger;
+    stateful(this, this.constructor.defaultState);
+    markPluginAsActive(player, this.name);
+
+    // Auto-bind the dispose method so we can use it as a listener and unbind
+    // it later easily.
+    this.dispose = this.dispose.bind(this);
+
+    // If the player is disposed, dispose the plugin.
+    player.on('dispose', this.dispose);
+  }
+
+  /**
+   * Get the version of the plugin that was set on <pluginName>.VERSION
+   */
+  version() {
+    return this.constructor.VERSION;
+  }
+
+  /**
+   * Each event triggered by plugins includes a hash of additional data with
+   * conventional properties.
+   *
+   * This returns that object or mutates an existing hash.
+   *
+   * @param   {Object} [hash={}]
+   *          An object to be used as event an event hash.
+   *
+   * @return {PluginEventHash}
+   *          An event hash object with provided properties mixed-in.
+   */
+  getEventHash(hash = {}) {
+    hash.name = this.name;
+    hash.plugin = this.constructor;
+    hash.instance = this;
+    return hash;
+  }
+
+  /**
+   * Triggers an event on the plugin object and overrides
+   * {@link module:evented~EventedMixin.trigger|EventedMixin.trigger}.
+   *
+   * @param   {string|Object} event
+   *          An event type or an object with a type property.
+   *
+   * @param   {Object} [hash={}]
+   *          Additional data hash to merge with a
+   *          {@link PluginEventHash|PluginEventHash}.
+   *
+   * @return {boolean}
+   *          Whether or not default was prevented.
+   */
+  trigger(event, hash = {}) {
+    return trigger(this.eventBusEl_, event, this.getEventHash(hash));
+  }
+
+  /**
+   * Handles "statechanged" events on the plugin. No-op by default, override by
+   * subclassing.
+   *
+   * @abstract
+   * @param    {Event} e
+   *           An event object provided by a "statechanged" event.
+   *
+   * @param    {Object} e.changes
+   *           An object describing changes that occurred with the "statechanged"
+   *           event.
+   */
+  handleStateChanged(e) {}
+
+  /**
+   * Disposes a plugin.
+   *
+   * Subclasses can override this if they want, but for the sake of safety,
+   * it's probably best to subscribe the "dispose" event.
+   *
+   * @fires Plugin#dispose
+   */
+  dispose() {
+    const {
+      name,
+      player
+    } = this;
+
+    /**
+     * Signals that a advanced plugin is about to be disposed.
+     *
+     * @event Plugin#dispose
+     * @type  {Event}
+     */
+    this.trigger('dispose');
+    this.off();
+    player.off('dispose', this.dispose);
+
+    // Eliminate any possible sources of leaking memory by clearing up
+    // references between the player and the plugin instance and nulling out
+    // the plugin's state and replacing methods with a function that throws.
+    player[PLUGIN_CACHE_KEY][name] = false;
+    this.player = this.state = null;
+
+    // Finally, replace the plugin name on the player with a new factory
+    // function, so that the plugin is ready to be set up again.
+    player[name] = createPluginFactory(name, pluginStorage[name]);
+  }
+
+  /**
+   * Determines if a plugin is a basic plugin (i.e. not a sub-class of `Plugin`).
+   *
+   * @param   {string|Function} plugin
+   *          If a string, matches the name of a plugin. If a function, will be
+   *          tested directly.
+   *
+   * @return {boolean}
+   *          Whether or not a plugin is a basic plugin.
+   */
+  static isBasic(plugin) {
+    const p = typeof plugin === 'string' ? getPlugin(plugin) : plugin;
+    return typeof p === 'function' && !Plugin.prototype.isPrototypeOf(p.prototype);
+  }
+
+  /**
+   * Register a Video.js plugin.
+   *
+   * @param   {string} name
+   *          The name of the plugin to be registered. Must be a string and
+   *          must not match an existing plugin or a method on the `Player`
+   *          prototype.
+   *
+   * @param   {typeof Plugin|Function} plugin
+   *          A sub-class of `Plugin` or a function for basic plugins.
+   *
+   * @return {typeof Plugin|Function}
+   *          For advanced plugins, a factory function for that plugin. For
+   *          basic plugins, a wrapper function that initializes the plugin.
+   */
+  static registerPlugin(name, plugin) {
+    if (typeof name !== 'string') {
+      throw new Error(`Illegal plugin name, "${name}", must be a string, was ${typeof name}.`);
+    }
+    if (pluginExists(name)) {
+      log$1.warn(`A plugin named "${name}" already exists. You may want to avoid re-registering plugins!`);
+    } else if (Player.prototype.hasOwnProperty(name)) {
+      throw new Error(`Illegal plugin name, "${name}", cannot share a name with an existing player method!`);
+    }
+    if (typeof plugin !== 'function') {
+      throw new Error(`Illegal plugin for "${name}", must be a function, was ${typeof plugin}.`);
+    }
+    pluginStorage[name] = plugin;
+
+    // Add a player prototype method for all sub-classed plugins (but not for
+    // the base Plugin class).
+    if (name !== BASE_PLUGIN_NAME) {
+      if (Plugin.isBasic(plugin)) {
+        Player.prototype[name] = createBasicPlugin(name, plugin);
+      } else {
+        Player.prototype[name] = createPluginFactory(name, plugin);
+      }
+    }
+    return plugin;
+  }
+
+  /**
+   * De-register a Video.js plugin.
+   *
+   * @param  {string} name
+   *         The name of the plugin to be de-registered. Must be a string that
+   *         matches an existing plugin.
+   *
+   * @throws {Error}
+   *         If an attempt is made to de-register the base plugin.
+   */
+  static deregisterPlugin(name) {
+    if (name === BASE_PLUGIN_NAME) {
+      throw new Error('Cannot de-register base plugin.');
+    }
+    if (pluginExists(name)) {
+      delete pluginStorage[name];
+      delete Player.prototype[name];
+    }
+  }
+
+  /**
+   * Gets an object containing multiple Video.js plugins.
+   *
+   * @param   {Array} [names]
+   *          If provided, should be an array of plugin names. Defaults to _all_
+   *          plugin names.
+   *
+   * @return {Object|undefined}
+   *          An object containing plugin(s) associated with their name(s) or
+   *          `undefined` if no matching plugins exist).
+   */
+  static getPlugins(names = Object.keys(pluginStorage)) {
+    let result;
+    names.forEach(name => {
+      const plugin = getPlugin(name);
+      if (plugin) {
+        result = result || {};
+        result[name] = plugin;
+      }
+    });
+    return result;
+  }
+
+  /**
+   * Gets a plugin's version, if available
+   *
+   * @param   {string} name
+   *          The name of a plugin.
+   *
+   * @return {string}
+   *          The plugin's version or an empty string.
+   */
+  static getPluginVersion(name) {
+    const plugin = getPlugin(name);
+    return plugin && plugin.VERSION || '';
+  }
+}
+
+/**
+ * Gets a plugin by name if it exists.
+ *
+ * @static
+ * @method   getPlugin
+ * @memberOf Plugin
+ * @param    {string} name
+ *           The name of a plugin.
+ *
+ * @returns  {typeof Plugin|Function|undefined}
+ *           The plugin (or `undefined`).
+ */
+Plugin.getPlugin = getPlugin;
+
+/**
+ * The name of the base plugin class as it is registered.
+ *
+ * @type {string}
+ */
+Plugin.BASE_PLUGIN_NAME = BASE_PLUGIN_NAME;
+Plugin.registerPlugin(BASE_PLUGIN_NAME, Plugin);
+
+/**
+ * Documented in player.js
+ *
+ * @ignore
+ */
+Player.prototype.usingPlugin = function (name) {
+  return !!this[PLUGIN_CACHE_KEY] && this[PLUGIN_CACHE_KEY][name] === true;
+};
+
+/**
+ * Documented in player.js
+ *
+ * @ignore
+ */
+Player.prototype.hasPlugin = function (name) {
+  return !!pluginExists(name);
+};
+
+/**
+ * Signals that a plugin is about to be set up on a player.
+ *
+ * @event    Player#beforepluginsetup
+ * @type     {PluginEventHash}
+ */
+
+/**
+ * Signals that a plugin is about to be set up on a player - by name. The name
+ * is the name of the plugin.
+ *
+ * @event    Player#beforepluginsetup:$name
+ * @type     {PluginEventHash}
+ */
+
+/**
+ * Signals that a plugin has just been set up on a player.
+ *
+ * @event    Player#pluginsetup
+ * @type     {PluginEventHash}
+ */
+
+/**
+ * Signals that a plugin has just been set up on a player - by name. The name
+ * is the name of the plugin.
+ *
+ * @event    Player#pluginsetup:$name
+ * @type     {PluginEventHash}
+ */
+
+/**
+ * @typedef  {Object} PluginEventHash
+ *
+ * @property {string} instance
+ *           For basic plugins, the return value of the plugin function. For
+ *           advanced plugins, the plugin instance on which the event is fired.
+ *
+ * @property {string} name
+ *           The name of the plugin.
+ *
+ * @property {string} plugin
+ *           For basic plugins, the plugin function. For advanced plugins, the
+ *           plugin class/constructor.
+ */
+
+/**
+ * @file deprecate.js
+ * @module deprecate
+ */
+
+/**
+ * Decorate a function with a deprecation message the first time it is called.
+ *
+ * @param  {string}   message
+ *         A deprecation message to log the first time the returned function
+ *         is called.
+ *
+ * @param  {Function} fn
+ *         The function to be deprecated.
+ *
+ * @return {Function}
+ *         A wrapper function that will log a deprecation warning the first
+ *         time it is called. The return value will be the return value of
+ *         the wrapped function.
+ */
+function deprecate(message, fn) {
+  let warned = false;
+  return function (...args) {
+    if (!warned) {
+      log$1.warn(message);
+    }
+    warned = true;
+    return fn.apply(this, args);
+  };
+}
+
+/**
+ * Internal function used to mark a function as deprecated in the next major
+ * version with consistent messaging.
+ *
+ * @param  {number}   major   The major version where it will be removed
+ * @param  {string}   oldName The old function name
+ * @param  {string}   newName The new function name
+ * @param  {Function} fn      The function to deprecate
+ * @return {Function}         The decorated function
+ */
+function deprecateForMajor(major, oldName, newName, fn) {
+  return deprecate(`${oldName} is deprecated and will be removed in ${major}.0; please use ${newName} instead.`, fn);
+}
+
+var VjsErrors = {
+  UnsupportedSidxContainer: 'unsupported-sidx-container-error',
+  DashManifestSidxParsingError: 'dash-manifest-sidx-parsing-error',
+  HlsPlaylistRequestError: 'hls-playlist-request-error',
+  SegmentUnsupportedMediaFormat: 'segment-unsupported-media-format-error',
+  UnsupportedMediaInitialization: 'unsupported-media-initialization-error',
+  SegmentSwitchError: 'segment-switch-error',
+  SegmentExceedsSourceBufferQuota: 'segment-exceeds-source-buffer-quota-error',
+  SegmentAppendError: 'segment-append-error',
+  VttLoadError: 'vtt-load-error',
+  VttCueParsingError: 'vtt-cue-parsing-error',
+  // Errors used in contrib-ads:
+  AdsBeforePrerollError: 'ads-before-preroll-error',
+  AdsPrerollError: 'ads-preroll-error',
+  AdsMidrollError: 'ads-midroll-error',
+  AdsPostrollError: 'ads-postroll-error',
+  AdsMacroReplacementFailed: 'ads-macro-replacement-failed',
+  AdsResumeContentFailed: 'ads-resume-content-failed',
+  // Errors used in contrib-eme:
+  EMEFailedToRequestMediaKeySystemAccess: 'eme-failed-request-media-key-system-access',
+  EMEFailedToCreateMediaKeys: 'eme-failed-create-media-keys',
+  EMEFailedToAttachMediaKeysToVideoElement: 'eme-failed-attach-media-keys-to-video',
+  EMEFailedToCreateMediaKeySession: 'eme-failed-create-media-key-session',
+  EMEFailedToSetServerCertificate: 'eme-failed-set-server-certificate',
+  EMEFailedToGenerateLicenseRequest: 'eme-failed-generate-license-request',
+  EMEFailedToUpdateSessionWithReceivedLicenseKeys: 'eme-failed-update-session',
+  EMEFailedToCloseSession: 'eme-failed-close-session',
+  EMEFailedToRemoveKeysFromSession: 'eme-failed-remove-keys',
+  EMEFailedToLoadSessionBySessionId: 'eme-failed-load-session'
+};
+
+/**
+ * @file video.js
+ * @module videojs
+ */
+
+/**
+ * Normalize an `id` value by trimming off a leading `#`
+ *
+ * @private
+ * @param   {string} id
+ *          A string, maybe with a leading `#`.
+ *
+ * @return {string}
+ *          The string, without any leading `#`.
+ */
+const normalizeId = id => id.indexOf('#') === 0 ? id.slice(1) : id;
+
+/**
+ * A callback that is called when a component is ready. Does not have any
+ * parameters and any callback value will be ignored. See: {@link Component~ReadyCallback}
+ *
+ * @callback ReadyCallback
+ */
+
+/**
+ * The `videojs()` function doubles as the main function for users to create a
+ * {@link Player} instance as well as the main library namespace.
+ *
+ * It can also be used as a getter for a pre-existing {@link Player} instance.
+ * However, we _strongly_ recommend using `videojs.getPlayer()` for this
+ * purpose because it avoids any potential for unintended initialization.
+ *
+ * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+ * of our JSDoc template, we cannot properly document this as both a function
+ * and a namespace, so its function signature is documented here.
+ *
+ * #### Arguments
+ * ##### id
+ * string|Element, **required**
+ *
+ * Video element or video element ID.
+ *
+ * ##### options
+ * Object, optional
+ *
+ * Options object for providing settings.
+ * See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+ *
+ * ##### ready
+ * {@link Component~ReadyCallback}, optional
+ *
+ * A function to be called when the {@link Player} and {@link Tech} are ready.
+ *
+ * #### Return Value
+ *
+ * The `videojs()` function returns a {@link Player} instance.
+ *
+ * @namespace
+ *
+ * @borrows AudioTrack as AudioTrack
+ * @borrows Component.getComponent as getComponent
+ * @borrows module:events.on as on
+ * @borrows module:events.one as one
+ * @borrows module:events.off as off
+ * @borrows module:events.trigger as trigger
+ * @borrows EventTarget as EventTarget
+ * @borrows module:middleware.use as use
+ * @borrows Player.players as players
+ * @borrows Plugin.registerPlugin as registerPlugin
+ * @borrows Plugin.deregisterPlugin as deregisterPlugin
+ * @borrows Plugin.getPlugins as getPlugins
+ * @borrows Plugin.getPlugin as getPlugin
+ * @borrows Plugin.getPluginVersion as getPluginVersion
+ * @borrows Tech.getTech as getTech
+ * @borrows Tech.registerTech as registerTech
+ * @borrows TextTrack as TextTrack
+ * @borrows VideoTrack as VideoTrack
+ *
+ * @param  {string|Element} id
+ *         Video element or video element ID.
+ *
+ * @param  {Object} [options]
+ *         Options object for providing settings.
+ *         See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+ *
+ * @param  {ReadyCallback} [ready]
+ *         A function to be called when the {@link Player} and {@link Tech} are
+ *         ready.
+ *
+ * @return {Player}
+ *         The `videojs()` function returns a {@link Player|Player} instance.
+ */
+function videojs(id, options, ready) {
+  let player = videojs.getPlayer(id);
+  if (player) {
+    if (options) {
+      log$1.warn(`Player "${id}" is already initialised. Options will not be applied.`);
+    }
+    if (ready) {
+      player.ready(ready);
+    }
+    return player;
+  }
+  const el = typeof id === 'string' ? $('#' + normalizeId(id)) : id;
+  if (!isEl(el)) {
+    throw new TypeError('The element or ID supplied is not valid. (videojs)');
+  }
+
+  // document.body.contains(el) will only check if el is contained within that one document.
+  // This causes problems for elements in iframes.
+  // Instead, use the element's ownerDocument instead of the global document.
+  // This will make sure that the element is indeed in the dom of that document.
+  // Additionally, check that the document in question has a default view.
+  // If the document is no longer attached to the dom, the defaultView of the document will be null.
+  // If element is inside Shadow DOM (e.g. is part of a Custom element), ownerDocument.body
+  // always returns false. Instead, use the Shadow DOM root.
+  const inShadowDom = 'getRootNode' in el ? el.getRootNode() instanceof window$1.ShadowRoot : false;
+  const rootNode = inShadowDom ? el.getRootNode() : el.ownerDocument.body;
+  if (!el.ownerDocument.defaultView || !rootNode.contains(el)) {
+    log$1.warn('The element supplied is not included in the DOM');
+  }
+  options = options || {};
+
+  // Store a copy of the el before modification, if it is to be restored in destroy()
+  // If div ingest, store the parent div
+  if (options.restoreEl === true) {
+    options.restoreEl = (el.parentNode && el.parentNode.hasAttribute('data-vjs-player') ? el.parentNode : el).cloneNode(true);
+  }
+  hooks('beforesetup').forEach(hookFunction => {
+    const opts = hookFunction(el, merge$1(options));
+    if (!isObject(opts) || Array.isArray(opts)) {
+      log$1.error('please return an object in beforesetup hooks');
+      return;
+    }
+    options = merge$1(options, opts);
+  });
+
+  // We get the current "Player" component here in case an integration has
+  // replaced it with a custom player.
+  const PlayerComponent = Component$1.getComponent('Player');
+  player = new PlayerComponent(el, options, ready);
+  hooks('setup').forEach(hookFunction => hookFunction(player));
+  return player;
+}
+videojs.hooks_ = hooks_;
+videojs.hooks = hooks;
+videojs.hook = hook;
+videojs.hookOnce = hookOnce;
+videojs.removeHook = removeHook;
+
+// Add default styles
+if (window$1.VIDEOJS_NO_DYNAMIC_STYLE !== true && isReal()) {
+  let style = $('.vjs-styles-defaults');
+  if (!style) {
+    style = createStyleElement('vjs-styles-defaults');
+    const head = $('head');
+    if (head) {
+      head.insertBefore(style, head.firstChild);
+    }
+    setTextContent(style, `
+      .video-js {
+        width: 300px;
+        height: 150px;
+      }
+
+      .vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: 56.25%
+      }
+    `);
+  }
+}
+
+// Run Auto-load players
+// You have to wait at least once in case this script is loaded after your
+// video in the DOM (weird behavior only with minified version)
+autoSetupTimeout(1, videojs);
+
+/**
+ * Current Video.js version. Follows [semantic versioning](https://semver.org/).
+ *
+ * @type {string}
+ */
+videojs.VERSION = version$6;
+
+/**
+ * The global options object. These are the settings that take effect
+ * if no overrides are specified when the player is created.
+ *
+ * @type {Object}
+ */
+videojs.options = Player.prototype.options_;
+
+/**
+ * Get an object with the currently created players, keyed by player ID
+ *
+ * @return {Object}
+ *         The created players
+ */
+videojs.getPlayers = () => Player.players;
+
+/**
+ * Get a single player based on an ID or DOM element.
+ *
+ * This is useful if you want to check if an element or ID has an associated
+ * Video.js player, but not create one if it doesn't.
+ *
+ * @param   {string|Element} id
+ *          An HTML element - `<video>`, `<audio>`, or `<video-js>` -
+ *          or a string matching the `id` of such an element.
+ *
+ * @return {Player|undefined}
+ *          A player instance or `undefined` if there is no player instance
+ *          matching the argument.
+ */
+videojs.getPlayer = id => {
+  const players = Player.players;
+  let tag;
+  if (typeof id === 'string') {
+    const nId = normalizeId(id);
+    const player = players[nId];
+    if (player) {
+      return player;
+    }
+    tag = $('#' + nId);
+  } else {
+    tag = id;
+  }
+  if (isEl(tag)) {
+    const {
+      player,
+      playerId
+    } = tag;
+
+    // Element may have a `player` property referring to an already created
+    // player instance. If so, return that.
+    if (player || players[playerId]) {
+      return player || players[playerId];
+    }
+  }
+};
+
+/**
+ * Returns an array of all current players.
+ *
+ * @return {Array}
+ *         An array of all players. The array will be in the order that
+ *         `Object.keys` provides, which could potentially vary between
+ *         JavaScript engines.
+ *
+ */
+videojs.getAllPlayers = () =>
+// Disposed players leave a key with a `null` value, so we need to make sure
+// we filter those out.
+Object.keys(Player.players).map(k => Player.players[k]).filter(Boolean);
+videojs.players = Player.players;
+videojs.getComponent = Component$1.getComponent;
+
+/**
+ * Register a component so it can referred to by name. Used when adding to other
+ * components, either through addChild `component.addChild('myComponent')` or through
+ * default children options  `{ children: ['myComponent'] }`.
+ *
+ * > NOTE: You could also just initialize the component before adding.
+ * `component.addChild(new MyComponent());`
+ *
+ * @param {string} name
+ *        The class name of the component
+ *
+ * @param {typeof Component} comp
+ *        The component class
+ *
+ * @return {typeof Component}
+ *         The newly registered component
+ */
+videojs.registerComponent = (name, comp) => {
+  if (Tech.isTech(comp)) {
+    log$1.warn(`The ${name} tech was registered as a component. It should instead be registered using videojs.registerTech(name, tech)`);
+  }
+  return Component$1.registerComponent.call(Component$1, name, comp);
+};
+videojs.getTech = Tech.getTech;
+videojs.registerTech = Tech.registerTech;
+videojs.use = use;
+
+/**
+ * An object that can be returned by a middleware to signify
+ * that the middleware is being terminated.
+ *
+ * @type {object}
+ * @property {object} middleware.TERMINATOR
+ */
+Object.defineProperty(videojs, 'middleware', {
+  value: {},
+  writeable: false,
+  enumerable: true
+});
+Object.defineProperty(videojs.middleware, 'TERMINATOR', {
+  value: TERMINATOR,
+  writeable: false,
+  enumerable: true
+});
+
+/**
+ * A reference to the {@link module:browser|browser utility module} as an object.
+ *
+ * @type {Object}
+ * @see  {@link module:browser|browser}
+ */
+videojs.browser = browser;
+
+/**
+ * A reference to the {@link module:obj|obj utility module} as an object.
+ *
+ * @type {Object}
+ * @see  {@link module:obj|obj}
+ */
+videojs.obj = Obj;
+
+/**
+ * Deprecated reference to the {@link module:obj.merge|merge function}
+ *
+ * @type {Function}
+ * @see {@link module:obj.merge|merge}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.obj.merge instead.
+ */
+videojs.mergeOptions = deprecateForMajor(9, 'videojs.mergeOptions', 'videojs.obj.merge', merge$1);
+
+/**
+ * Deprecated reference to the {@link module:obj.defineLazyProperty|defineLazyProperty function}
+ *
+ * @type {Function}
+ * @see {@link module:obj.defineLazyProperty|defineLazyProperty}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.obj.defineLazyProperty instead.
+ */
+videojs.defineLazyProperty = deprecateForMajor(9, 'videojs.defineLazyProperty', 'videojs.obj.defineLazyProperty', defineLazyProperty);
+
+/**
+ * Deprecated reference to the {@link module:fn.bind_|fn.bind_ function}
+ *
+ * @type {Function}
+ * @see {@link module:fn.bind_|fn.bind_}
+ * @deprecated Deprecated and will be removed in 9.0. Please use native Function.prototype.bind instead.
+ */
+videojs.bind = deprecateForMajor(9, 'videojs.bind', 'native Function.prototype.bind', bind_);
+videojs.registerPlugin = Plugin.registerPlugin;
+videojs.deregisterPlugin = Plugin.deregisterPlugin;
+
+/**
+ * Deprecated method to register a plugin with Video.js
+ *
+ * @deprecated Deprecated and will be removed in 9.0. Use videojs.registerPlugin() instead.
+ *
+ * @param {string} name
+ *        The plugin name
+*
+ * @param {typeof Plugin|Function} plugin
+ *         The plugin sub-class or function
+ *
+ * @return {typeof Plugin|Function}
+ */
+videojs.plugin = (name, plugin) => {
+  log$1.warn('videojs.plugin() is deprecated; use videojs.registerPlugin() instead');
+  return Plugin.registerPlugin(name, plugin);
+};
+videojs.getPlugins = Plugin.getPlugins;
+videojs.getPlugin = Plugin.getPlugin;
+videojs.getPluginVersion = Plugin.getPluginVersion;
+
+/**
+ * Adding languages so that they're available to all players.
+ * Example: `videojs.addLanguage('es', { 'Hello': 'Hola' });`
+ *
+ * @param {string} code
+ *        The language code or dictionary property
+ *
+ * @param {Object} data
+ *        The data values to be translated
+ *
+ * @return {Object}
+ *         The resulting language dictionary object
+ */
+videojs.addLanguage = function (code, data) {
+  code = ('' + code).toLowerCase();
+  videojs.options.languages = merge$1(videojs.options.languages, {
+    [code]: data
+  });
+  return videojs.options.languages[code];
+};
+
+/**
+ * A reference to the {@link module:log|log utility module} as an object.
+ *
+ * @type {Function}
+ * @see  {@link module:log|log}
+ */
+videojs.log = log$1;
+videojs.createLogger = createLogger;
+
+/**
+ * A reference to the {@link module:time|time utility module} as an object.
+ *
+ * @type {Object}
+ * @see {@link module:time|time}
+ */
+videojs.time = Time;
+
+/**
+ * Deprecated reference to the {@link module:time.createTimeRanges|createTimeRanges function}
+ *
+ * @type {Function}
+ * @see {@link module:time.createTimeRanges|createTimeRanges}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.createTimeRanges instead.
+ */
+videojs.createTimeRange = deprecateForMajor(9, 'videojs.createTimeRange', 'videojs.time.createTimeRanges', createTimeRanges$1);
+
+/**
+ * Deprecated reference to the {@link module:time.createTimeRanges|createTimeRanges function}
+ *
+ * @type {Function}
+ * @see {@link module:time.createTimeRanges|createTimeRanges}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.createTimeRanges instead.
+ */
+videojs.createTimeRanges = deprecateForMajor(9, 'videojs.createTimeRanges', 'videojs.time.createTimeRanges', createTimeRanges$1);
+
+/**
+ * Deprecated reference to the {@link module:time.formatTime|formatTime function}
+ *
+ * @type {Function}
+ * @see {@link module:time.formatTime|formatTime}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.format instead.
+ */
+videojs.formatTime = deprecateForMajor(9, 'videojs.formatTime', 'videojs.time.formatTime', formatTime);
+
+/**
+ * Deprecated reference to the {@link module:time.setFormatTime|setFormatTime function}
+ *
+ * @type {Function}
+ * @see {@link module:time.setFormatTime|setFormatTime}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.setFormat instead.
+ */
+videojs.setFormatTime = deprecateForMajor(9, 'videojs.setFormatTime', 'videojs.time.setFormatTime', setFormatTime);
+
+/**
+ * Deprecated reference to the {@link module:time.resetFormatTime|resetFormatTime function}
+ *
+ * @type {Function}
+ * @see {@link module:time.resetFormatTime|resetFormatTime}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.resetFormat instead.
+ */
+videojs.resetFormatTime = deprecateForMajor(9, 'videojs.resetFormatTime', 'videojs.time.resetFormatTime', resetFormatTime);
+
+/**
+ * Deprecated reference to the {@link module:url.parseUrl|Url.parseUrl function}
+ *
+ * @type {Function}
+ * @see {@link module:url.parseUrl|parseUrl}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.url.parseUrl instead.
+ */
+videojs.parseUrl = deprecateForMajor(9, 'videojs.parseUrl', 'videojs.url.parseUrl', parseUrl);
+
+/**
+ * Deprecated reference to the {@link module:url.isCrossOrigin|Url.isCrossOrigin function}
+ *
+ * @type {Function}
+ * @see {@link module:url.isCrossOrigin|isCrossOrigin}
+ * @deprecated Deprecated and will be removed in 9.0. Please use videojs.url.isCrossOrigin instead.
+ */
+videojs.isCrossOrigin = deprecateForMajor(9, 'videojs.isCrossOrigin', 'videojs.url.isCrossOrigin', isCrossOrigin);
+videojs.EventTarget = EventTarget$2;
+videojs.any = any;
+videojs.on = on;
+videojs.one = one;
+videojs.off = off;
+videojs.trigger = trigger;
+
+/**
+ * A cross-browser XMLHttpRequest wrapper.
+ *
+ * @function
+ * @param    {Object} options
+ *           Settings for the request.
+ *
+ * @return   {XMLHttpRequest|XDomainRequest}
+ *           The request object.
+ *
+ * @see      https://github.com/Raynos/xhr
+ */
+videojs.xhr = XHR;
+videojs.TextTrack = TextTrack;
+videojs.AudioTrack = AudioTrack;
+videojs.VideoTrack = VideoTrack;
+['isEl', 'isTextNode', 'createEl', 'hasClass', 'addClass', 'removeClass', 'toggleClass', 'setAttributes', 'getAttributes', 'emptyEl', 'appendContent', 'insertContent'].forEach(k => {
+  videojs[k] = function () {
+    log$1.warn(`videojs.${k}() is deprecated; use videojs.dom.${k}() instead`);
+    return Dom[k].apply(null, arguments);
+  };
+});
+videojs.computedStyle = deprecateForMajor(9, 'videojs.computedStyle', 'videojs.dom.computedStyle', computedStyle);
+
+/**
+ * A reference to the {@link module:dom|DOM utility module} as an object.
+ *
+ * @type {Object}
+ * @see {@link module:dom|dom}
+ */
+videojs.dom = Dom;
+
+/**
+ * A reference to the {@link module:fn|fn utility module} as an object.
+ *
+ * @type {Object}
+ * @see {@link module:fn|fn}
+ */
+videojs.fn = Fn;
+
+/**
+ * A reference to the {@link module:num|num utility module} as an object.
+ *
+ * @type {Object}
+ * @see {@link module:num|num}
+ */
+videojs.num = Num;
+
+/**
+ * A reference to the {@link module:str|str utility module} as an object.
+ *
+ * @type {Object}
+ * @see {@link module:str|str}
+ */
+videojs.str = Str;
+
+/**
+ * A reference to the {@link module:url|URL utility module} as an object.
+ *
+ * @type {Object}
+ * @see {@link module:url|url}
+ */
+videojs.url = Url;
+
+// The list of possible error types to occur in video.js
+videojs.Error = VjsErrors;
+
+/*! @name videojs-contrib-quality-levels @version 4.1.0 @license Apache-2.0 */
+
+/**
+ * A single QualityLevel.
+ *
+ * interface QualityLevel {
+ *   readonly attribute DOMString id;
+ *            attribute DOMString label;
+ *   readonly attribute long width;
+ *   readonly attribute long height;
+ *   readonly attribute long bitrate;
+ *            attribute boolean enabled;
+ * };
+ *
+ * @class QualityLevel
+ */
+class QualityLevel {
+  /**
+   * Creates a QualityLevel
+   *
+   * @param {Representation|Object} representation The representation of the quality level
+   * @param {string}   representation.id        Unique id of the QualityLevel
+   * @param {number=}  representation.width     Resolution width of the QualityLevel
+   * @param {number=}  representation.height    Resolution height of the QualityLevel
+   * @param {number}   representation.bandwidth Bitrate of the QualityLevel
+   * @param {number=}  representation.frameRate Frame-rate of the QualityLevel
+   * @param {Function} representation.enabled   Callback to enable/disable QualityLevel
+   */
+  constructor(representation) {
+    let level = this; // eslint-disable-line
+
+    level.id = representation.id;
+    level.label = level.id;
+    level.width = representation.width;
+    level.height = representation.height;
+    level.bitrate = representation.bandwidth;
+    level.frameRate = representation.frameRate;
+    level.enabled_ = representation.enabled;
+    Object.defineProperty(level, 'enabled', {
+      /**
+       * Get whether the QualityLevel is enabled.
+       *
+       * @return {boolean} True if the QualityLevel is enabled.
+       */
+      get() {
+        return level.enabled_();
+      },
+      /**
+       * Enable or disable the QualityLevel.
+       *
+       * @param {boolean} enable true to enable QualityLevel, false to disable.
+       */
+      set(enable) {
+        level.enabled_(enable);
+      }
+    });
+    return level;
+  }
+}
+
+/**
+ * A list of QualityLevels.
+ *
+ * interface QualityLevelList : EventTarget {
+ *   getter QualityLevel (unsigned long index);
+ *   readonly attribute unsigned long length;
+ *   readonly attribute long selectedIndex;
+ *
+ *   void addQualityLevel(QualityLevel qualityLevel)
+ *   void removeQualityLevel(QualityLevel remove)
+ *   QualityLevel? getQualityLevelById(DOMString id);
+ *
+ *   attribute EventHandler onchange;
+ *   attribute EventHandler onaddqualitylevel;
+ *   attribute EventHandler onremovequalitylevel;
+ * };
+ *
+ * @extends videojs.EventTarget
+ * @class QualityLevelList
+ */
+class QualityLevelList extends videojs.EventTarget {
+  /**
+   * Creates a QualityLevelList.
+   */
+  constructor() {
+    super();
+    let list = this; // eslint-disable-line
+
+    list.levels_ = [];
+    list.selectedIndex_ = -1;
+
+    /**
+     * Get the index of the currently selected QualityLevel.
+     *
+     * @returns {number} The index of the selected QualityLevel. -1 if none selected.
+     * @readonly
+     */
+    Object.defineProperty(list, 'selectedIndex', {
+      get() {
+        return list.selectedIndex_;
+      }
+    });
+
+    /**
+     * Get the length of the list of QualityLevels.
+     *
+     * @returns {number} The length of the list.
+     * @readonly
+     */
+    Object.defineProperty(list, 'length', {
+      get() {
+        return list.levels_.length;
+      }
+    });
+    list[Symbol.iterator] = () => list.levels_.values();
+    return list;
+  }
+
+  /**
+   * Adds a quality level to the list.
+   *
+   * @param {Representation|Object} representation The representation of the quality level
+   * @param {string}   representation.id        Unique id of the QualityLevel
+   * @param {number=}  representation.width     Resolution width of the QualityLevel
+   * @param {number=}  representation.height    Resolution height of the QualityLevel
+   * @param {number}   representation.bandwidth Bitrate of the QualityLevel
+   * @param {number=}  representation.frameRate Frame-rate of the QualityLevel
+   * @param {Function} representation.enabled   Callback to enable/disable QualityLevel
+   * @return {QualityLevel} the QualityLevel added to the list
+   * @method addQualityLevel
+   */
+  addQualityLevel(representation) {
+    let qualityLevel = this.getQualityLevelById(representation.id);
+
+    // Do not add duplicate quality levels
+    if (qualityLevel) {
+      return qualityLevel;
+    }
+    const index = this.levels_.length;
+    qualityLevel = new QualityLevel(representation);
+    if (!('' + index in this)) {
+      Object.defineProperty(this, index, {
+        get() {
+          return this.levels_[index];
+        }
+      });
+    }
+    this.levels_.push(qualityLevel);
+    this.trigger({
+      qualityLevel,
+      type: 'addqualitylevel'
+    });
+    return qualityLevel;
+  }
+
+  /**
+   * Removes a quality level from the list.
+   *
+   * @param {QualityLevel} qualityLevel The QualityLevel to remove from the list.
+   * @return {QualityLevel|null} the QualityLevel removed or null if nothing removed
+   * @method removeQualityLevel
+   */
+  removeQualityLevel(qualityLevel) {
+    let removed = null;
+    for (let i = 0, l = this.length; i < l; i++) {
+      if (this[i] === qualityLevel) {
+        removed = this.levels_.splice(i, 1)[0];
+        if (this.selectedIndex_ === i) {
+          this.selectedIndex_ = -1;
+        } else if (this.selectedIndex_ > i) {
+          this.selectedIndex_--;
+        }
+        break;
+      }
+    }
+    if (removed) {
+      this.trigger({
+        qualityLevel,
+        type: 'removequalitylevel'
+      });
+    }
+    return removed;
+  }
+
+  /**
+   * Searches for a QualityLevel with the given id.
+   *
+   * @param {string} id The id of the QualityLevel to find.
+   * @return {QualityLevel|null} The QualityLevel with id, or null if not found.
+   * @method getQualityLevelById
+   */
+  getQualityLevelById(id) {
+    for (let i = 0, l = this.length; i < l; i++) {
+      const level = this[i];
+      if (level.id === id) {
+        return level;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Resets the list of QualityLevels to empty
+   *
+   * @method dispose
+   */
+  dispose() {
+    this.selectedIndex_ = -1;
+    this.levels_.length = 0;
+  }
+}
+
+/**
+ * change - The selected QualityLevel has changed.
+ * addqualitylevel - A QualityLevel has been added to the QualityLevelList.
+ * removequalitylevel - A QualityLevel has been removed from the QualityLevelList.
+ */
+QualityLevelList.prototype.allowedEvents_ = {
+  change: 'change',
+  addqualitylevel: 'addqualitylevel',
+  removequalitylevel: 'removequalitylevel'
+};
+
+// emulate attribute EventHandler support to allow for feature detection
+for (const event in QualityLevelList.prototype.allowedEvents_) {
+  QualityLevelList.prototype['on' + event] = null;
+}
+var version$5 = "4.1.0";
+
+/**
+ * Initialization function for the qualityLevels plugin. Sets up the QualityLevelList and
+ * event handlers.
+ *
+ * @param {Player} player Player object.
+ * @param {Object} options Plugin options object.
+ * @return {QualityLevelList} a list of QualityLevels
+ */
+const initPlugin$1 = function (player, options) {
+  const originalPluginFn = player.qualityLevels;
+  const qualityLevelList = new QualityLevelList();
+  const disposeHandler = function () {
+    qualityLevelList.dispose();
+    player.qualityLevels = originalPluginFn;
+    player.off('dispose', disposeHandler);
+  };
+  player.on('dispose', disposeHandler);
+  player.qualityLevels = () => qualityLevelList;
+  player.qualityLevels.VERSION = version$5;
+  return qualityLevelList;
+};
+
+/**
+ * A video.js plugin.
+ *
+ * In the plugin function, the value of `this` is a video.js `Player`
+ * instance. You cannot rely on the player being in a "ready" state here,
+ * depending on how the plugin is invoked. This may or may not be important
+ * to you; if not, remove the wait for "ready"!
+ *
+ * @param {Object} options Plugin options object
+ * @return {QualityLevelList} a list of QualityLevels
+ */
+const qualityLevels = function (options) {
+  return initPlugin$1(this, videojs.obj.merge({}, options));
+};
+
+// Register the plugin with video.js.
+videojs.registerPlugin('qualityLevels', qualityLevels);
+
+// Include the version number.
+qualityLevels.VERSION = version$5;
+
+/*! @name @videojs/http-streaming @version 3.12.1 @license Apache-2.0 */
+
+/**
+ * @file resolve-url.js - Handling how URLs are resolved and manipulated
+ */
+const resolveUrl = _resolveUrl;
+/**
+ * If the xhr request was redirected, return the responseURL, otherwise,
+ * return the original url.
+ *
+ * @api private
+ *
+ * @param  {string} url - an url being requested
+ * @param  {XMLHttpRequest} req - xhr request result
+ *
+ * @return {string}
+ */
+
+const resolveManifestRedirect = (url, req) => {
+  // To understand how the responseURL below is set and generated:
+  // - https://fetch.spec.whatwg.org/#concept-response-url
+  // - https://fetch.spec.whatwg.org/#atomic-http-redirect-handling
+  if (req && req.responseURL && url !== req.responseURL) {
+    return req.responseURL;
+  }
+  return url;
+};
+const logger = source => {
+  if (videojs.log.debug) {
+    return videojs.log.debug.bind(videojs, 'VHS:', `${source} >`);
+  }
+  return function () {};
+};
+
+/**
+ * Provides a compatibility layer between Video.js 7 and 8 API changes for VHS.
+ */
+/**
+ * Delegates to videojs.obj.merge (Video.js 8) or
+ * videojs.mergeOptions (Video.js 7).
+ */
+
+function merge(...args) {
+  const context = videojs.obj || videojs;
+  const fn = context.merge || context.mergeOptions;
+  return fn.apply(context, args);
+}
+/**
+ * Delegates to videojs.time.createTimeRanges (Video.js 8) or
+ * videojs.createTimeRanges (Video.js 7).
+ */
+
+function createTimeRanges(...args) {
+  const context = videojs.time || videojs;
+  const fn = context.createTimeRanges || context.createTimeRanges;
+  return fn.apply(context, args);
+}
+/**
+ * Converts provided buffered ranges to a descriptive string
+ *
+ * @param {TimeRanges} buffered - received buffered time ranges
+ *
+ * @return {string} - descriptive string
+ */
+
+function bufferedRangesToString(buffered) {
+  if (buffered.length === 0) {
+    return 'Buffered Ranges are empty';
+  }
+  let bufferedRangesStr = 'Buffered Ranges: \n';
+  for (let i = 0; i < buffered.length; i++) {
+    const start = buffered.start(i);
+    const end = buffered.end(i);
+    bufferedRangesStr += `${start} --> ${end}. Duration (${end - start})\n`;
+  }
+  return bufferedRangesStr;
+}
+
+/**
+ * ranges
+ *
+ * Utilities for working with TimeRanges.
+ *
+ */
+
+const TIME_FUDGE_FACTOR = 1 / 30; // Comparisons between time values such as current time and the end of the buffered range
+// can be misleading because of precision differences or when the current media has poorly
+// aligned audio and video, which can cause values to be slightly off from what you would
+// expect. This value is what we consider to be safe to use in such comparisons to account
+// for these scenarios.
+
+const SAFE_TIME_DELTA = TIME_FUDGE_FACTOR * 3;
+const filterRanges = function (timeRanges, predicate) {
+  const results = [];
+  let i;
+  if (timeRanges && timeRanges.length) {
+    // Search for ranges that match the predicate
+    for (i = 0; i < timeRanges.length; i++) {
+      if (predicate(timeRanges.start(i), timeRanges.end(i))) {
+        results.push([timeRanges.start(i), timeRanges.end(i)]);
+      }
+    }
+  }
+  return createTimeRanges(results);
+};
+/**
+ * Attempts to find the buffered TimeRange that contains the specified
+ * time.
+ *
+ * @param {TimeRanges} buffered - the TimeRanges object to query
+ * @param {number} time  - the time to filter on.
+ * @return {TimeRanges} a new TimeRanges object
+ */
+
+const findRange = function (buffered, time) {
+  return filterRanges(buffered, function (start, end) {
+    return start - SAFE_TIME_DELTA <= time && end + SAFE_TIME_DELTA >= time;
+  });
+};
+/**
+ * Returns the TimeRanges that begin later than the specified time.
+ *
+ * @param {TimeRanges} timeRanges - the TimeRanges object to query
+ * @param {number} time - the time to filter on.
+ * @return {TimeRanges} a new TimeRanges object.
+ */
+
+const findNextRange = function (timeRanges, time) {
+  return filterRanges(timeRanges, function (start) {
+    return start - TIME_FUDGE_FACTOR >= time;
+  });
+};
+/**
+ * Returns gaps within a list of TimeRanges
+ *
+ * @param {TimeRanges} buffered - the TimeRanges object
+ * @return {TimeRanges} a TimeRanges object of gaps
+ */
+
+const findGaps = function (buffered) {
+  if (buffered.length < 2) {
+    return createTimeRanges();
+  }
+  const ranges = [];
+  for (let i = 1; i < buffered.length; i++) {
+    const start = buffered.end(i - 1);
+    const end = buffered.start(i);
+    ranges.push([start, end]);
+  }
+  return createTimeRanges(ranges);
+};
+/**
+ * Calculate the intersection of two TimeRanges
+ *
+ * @param {TimeRanges} bufferA
+ * @param {TimeRanges} bufferB
+ * @return {TimeRanges} The interesection of `bufferA` with `bufferB`
+ */
+
+const bufferIntersection = function (bufferA, bufferB) {
+  let start = null;
+  let end = null;
+  let arity = 0;
+  const extents = [];
+  const ranges = [];
+  if (!bufferA || !bufferA.length || !bufferB || !bufferB.length) {
+    return createTimeRanges();
+  } // Handle the case where we have both buffers and create an
+  // intersection of the two
+
+  let count = bufferA.length; // A) Gather up all start and end times
+
+  while (count--) {
+    extents.push({
+      time: bufferA.start(count),
+      type: 'start'
+    });
+    extents.push({
+      time: bufferA.end(count),
+      type: 'end'
+    });
+  }
+  count = bufferB.length;
+  while (count--) {
+    extents.push({
+      time: bufferB.start(count),
+      type: 'start'
+    });
+    extents.push({
+      time: bufferB.end(count),
+      type: 'end'
+    });
+  } // B) Sort them by time
+
+  extents.sort(function (a, b) {
+    return a.time - b.time;
+  }); // C) Go along one by one incrementing arity for start and decrementing
+  //    arity for ends
+
+  for (count = 0; count < extents.length; count++) {
+    if (extents[count].type === 'start') {
+      arity++; // D) If arity is ever incremented to 2 we are entering an
+      //    overlapping range
+
+      if (arity === 2) {
+        start = extents[count].time;
+      }
+    } else if (extents[count].type === 'end') {
+      arity--; // E) If arity is ever decremented to 1 we leaving an
+      //    overlapping range
+
+      if (arity === 1) {
+        end = extents[count].time;
+      }
+    } // F) Record overlapping ranges
+
+    if (start !== null && end !== null) {
+      ranges.push([start, end]);
+      start = null;
+      end = null;
+    }
+  }
+  return createTimeRanges(ranges);
+};
+/**
+ * Gets a human readable string for a TimeRange
+ *
+ * @param {TimeRange} range
+ * @return {string} a human readable string
+ */
+
+const printableRange = range => {
+  const strArr = [];
+  if (!range || !range.length) {
+    return '';
+  }
+  for (let i = 0; i < range.length; i++) {
+    strArr.push(range.start(i) + ' => ' + range.end(i));
+  }
+  return strArr.join(', ');
+};
+/**
+ * Calculates the amount of time left in seconds until the player hits the end of the
+ * buffer and causes a rebuffer
+ *
+ * @param {TimeRange} buffered
+ *        The state of the buffer
+ * @param {Numnber} currentTime
+ *        The current time of the player
+ * @param {number} playbackRate
+ *        The current playback rate of the player. Defaults to 1.
+ * @return {number}
+ *         Time until the player has to start rebuffering in seconds.
+ * @function timeUntilRebuffer
+ */
+
+const timeUntilRebuffer = function (buffered, currentTime, playbackRate = 1) {
+  const bufferedEnd = buffered.length ? buffered.end(buffered.length - 1) : 0;
+  return (bufferedEnd - currentTime) / playbackRate;
+};
+/**
+ * Converts a TimeRanges object into an array representation
+ *
+ * @param {TimeRanges} timeRanges
+ * @return {Array}
+ */
+
+const timeRangesToArray = timeRanges => {
+  const timeRangesList = [];
+  for (let i = 0; i < timeRanges.length; i++) {
+    timeRangesList.push({
+      start: timeRanges.start(i),
+      end: timeRanges.end(i)
+    });
+  }
+  return timeRangesList;
+};
+/**
+ * Determines if two time range objects are different.
+ *
+ * @param {TimeRange} a
+ *        the first time range object to check
+ *
+ * @param {TimeRange} b
+ *        the second time range object to check
+ *
+ * @return {Boolean}
+ *         Whether the time range objects differ
+ */
+
+const isRangeDifferent = function (a, b) {
+  // same object
+  if (a === b) {
+    return false;
+  } // one or the other is undefined
+
+  if (!a && b || !b && a) {
+    return true;
+  } // length is different
+
+  if (a.length !== b.length) {
+    return true;
+  } // see if any start/end pair is different
+
+  for (let i = 0; i < a.length; i++) {
+    if (a.start(i) !== b.start(i) || a.end(i) !== b.end(i)) {
+      return true;
+    }
+  } // if the length and every pair is the same
+  // this is the same time range
+
+  return false;
+};
+const lastBufferedEnd = function (a) {
+  if (!a || !a.length || !a.end) {
+    return;
+  }
+  return a.end(a.length - 1);
+};
+/**
+ * A utility function to add up the amount of time in a timeRange
+ * after a specified startTime.
+ * ie:[[0, 10], [20, 40], [50, 60]] with a startTime 0
+ *     would return 40 as there are 40s seconds after 0 in the timeRange
+ *
+ * @param {TimeRange} range
+ *        The range to check against
+ * @param {number} startTime
+ *        The time in the time range that you should start counting from
+ *
+ * @return {number}
+ *          The number of seconds in the buffer passed the specified time.
+ */
+
+const timeAheadOf = function (range, startTime) {
+  let time = 0;
+  if (!range || !range.length) {
+    return time;
+  }
+  for (let i = 0; i < range.length; i++) {
+    const start = range.start(i);
+    const end = range.end(i); // startTime is after this range entirely
+
+    if (startTime > end) {
+      continue;
+    } // startTime is within this range
+
+    if (startTime > start && startTime <= end) {
+      time += end - startTime;
+      continue;
+    } // startTime is before this range.
+
+    time += end - start;
+  }
+  return time;
+};
+
+/**
+ * @file playlist.js
+ *
+ * Playlist related utilities.
+ */
+/**
+ * Get the duration of a segment, with special cases for
+ * llhls segments that do not have a duration yet.
+ *
+ * @param {Object} playlist
+ *        the playlist that the segment belongs to.
+ * @param {Object} segment
+ *        the segment to get a duration for.
+ *
+ * @return {number}
+ *          the segment duration
+ */
+
+const segmentDurationWithParts = (playlist, segment) => {
+  // if this isn't a preload segment
+  // then we will have a segment duration that is accurate.
+  if (!segment.preload) {
+    return segment.duration;
+  } // otherwise we have to add up parts and preload hints
+  // to get an up to date duration.
+
+  let result = 0;
+  (segment.parts || []).forEach(function (p) {
+    result += p.duration;
+  }); // for preload hints we have to use partTargetDuration
+  // as they won't even have a duration yet.
+
+  (segment.preloadHints || []).forEach(function (p) {
+    if (p.type === 'PART') {
+      result += playlist.partTargetDuration;
+    }
+  });
+  return result;
+};
+/**
+ * A function to get a combined list of parts and segments with durations
+ * and indexes.
+ *
+ * @param {Playlist} playlist the playlist to get the list for.
+ *
+ * @return {Array} The part/segment list.
+ */
+
+const getPartsAndSegments = playlist => (playlist.segments || []).reduce((acc, segment, si) => {
+  if (segment.parts) {
+    segment.parts.forEach(function (part, pi) {
+      acc.push({
+        duration: part.duration,
+        segmentIndex: si,
+        partIndex: pi,
+        part,
+        segment
+      });
+    });
+  } else {
+    acc.push({
+      duration: segment.duration,
+      segmentIndex: si,
+      partIndex: null,
+      segment,
+      part: null
+    });
+  }
+  return acc;
+}, []);
+const getLastParts = media => {
+  const lastSegment = media.segments && media.segments.length && media.segments[media.segments.length - 1];
+  return lastSegment && lastSegment.parts || [];
+};
+const getKnownPartCount = ({
+  preloadSegment
+}) => {
+  if (!preloadSegment) {
+    return;
+  }
+  const {
+    parts,
+    preloadHints
+  } = preloadSegment;
+  let partCount = (preloadHints || []).reduce((count, hint) => count + (hint.type === 'PART' ? 1 : 0), 0);
+  partCount += parts && parts.length ? parts.length : 0;
+  return partCount;
+};
+/**
+ * Get the number of seconds to delay from the end of a
+ * live playlist.
+ *
+ * @param {Playlist} main the main playlist
+ * @param {Playlist} media the media playlist
+ * @return {number} the hold back in seconds.
+ */
+
+const liveEdgeDelay = (main, media) => {
+  if (media.endList) {
+    return 0;
+  } // dash suggestedPresentationDelay trumps everything
+
+  if (main && main.suggestedPresentationDelay) {
+    return main.suggestedPresentationDelay;
+  }
+  const hasParts = getLastParts(media).length > 0; // look for "part" delays from ll-hls first
+
+  if (hasParts && media.serverControl && media.serverControl.partHoldBack) {
+    return media.serverControl.partHoldBack;
+  } else if (hasParts && media.partTargetDuration) {
+    return media.partTargetDuration * 3; // finally look for full segment delays
+  } else if (media.serverControl && media.serverControl.holdBack) {
+    return media.serverControl.holdBack;
+  } else if (media.targetDuration) {
+    return media.targetDuration * 3;
+  }
+  return 0;
+};
+/**
+ * walk backward until we find a duration we can use
+ * or return a failure
+ *
+ * @param {Playlist} playlist the playlist to walk through
+ * @param {Number} endSequence the mediaSequence to stop walking on
+ */
+
+const backwardDuration = function (playlist, endSequence) {
+  let result = 0;
+  let i = endSequence - playlist.mediaSequence; // if a start time is available for segment immediately following
+  // the interval, use it
+
+  let segment = playlist.segments[i]; // Walk backward until we find the latest segment with timeline
+  // information that is earlier than endSequence
+
+  if (segment) {
+    if (typeof segment.start !== 'undefined') {
+      return {
+        result: segment.start,
+        precise: true
+      };
+    }
+    if (typeof segment.end !== 'undefined') {
+      return {
+        result: segment.end - segment.duration,
+        precise: true
+      };
+    }
+  }
+  while (i--) {
+    segment = playlist.segments[i];
+    if (typeof segment.end !== 'undefined') {
+      return {
+        result: result + segment.end,
+        precise: true
+      };
+    }
+    result += segmentDurationWithParts(playlist, segment);
+    if (typeof segment.start !== 'undefined') {
+      return {
+        result: result + segment.start,
+        precise: true
+      };
+    }
+  }
+  return {
+    result,
+    precise: false
+  };
+};
+/**
+ * walk forward until we find a duration we can use
+ * or return a failure
+ *
+ * @param {Playlist} playlist the playlist to walk through
+ * @param {number} endSequence the mediaSequence to stop walking on
+ */
+
+const forwardDuration = function (playlist, endSequence) {
+  let result = 0;
+  let segment;
+  let i = endSequence - playlist.mediaSequence; // Walk forward until we find the earliest segment with timeline
+  // information
+
+  for (; i < playlist.segments.length; i++) {
+    segment = playlist.segments[i];
+    if (typeof segment.start !== 'undefined') {
+      return {
+        result: segment.start - result,
+        precise: true
+      };
+    }
+    result += segmentDurationWithParts(playlist, segment);
+    if (typeof segment.end !== 'undefined') {
+      return {
+        result: segment.end - result,
+        precise: true
+      };
+    }
+  } // indicate we didn't find a useful duration estimate
+
+  return {
+    result: -1,
+    precise: false
+  };
+};
+/**
+  * Calculate the media duration from the segments associated with a
+  * playlist. The duration of a subinterval of the available segments
+  * may be calculated by specifying an end index.
+  *
+  * @param {Object} playlist a media playlist object
+  * @param {number=} endSequence an exclusive upper boundary
+  * for the playlist.  Defaults to playlist length.
+  * @param {number} expired the amount of time that has dropped
+  * off the front of the playlist in a live scenario
+  * @return {number} the duration between the first available segment
+  * and end index.
+  */
+
+const intervalDuration = function (playlist, endSequence, expired) {
+  if (typeof endSequence === 'undefined') {
+    endSequence = playlist.mediaSequence + playlist.segments.length;
+  }
+  if (endSequence < playlist.mediaSequence) {
+    return 0;
+  } // do a backward walk to estimate the duration
+
+  const backward = backwardDuration(playlist, endSequence);
+  if (backward.precise) {
+    // if we were able to base our duration estimate on timing
+    // information provided directly from the Media Source, return
+    // it
+    return backward.result;
+  } // walk forward to see if a precise duration estimate can be made
+  // that way
+
+  const forward = forwardDuration(playlist, endSequence);
+  if (forward.precise) {
+    // we found a segment that has been buffered and so it's
+    // position is known precisely
+    return forward.result;
+  } // return the less-precise, playlist-based duration estimate
+
+  return backward.result + expired;
+};
+/**
+  * Calculates the duration of a playlist. If a start and end index
+  * are specified, the duration will be for the subset of the media
+  * timeline between those two indices. The total duration for live
+  * playlists is always Infinity.
+  *
+  * @param {Object} playlist a media playlist object
+  * @param {number=} endSequence an exclusive upper
+  * boundary for the playlist. Defaults to the playlist media
+  * sequence number plus its length.
+  * @param {number=} expired the amount of time that has
+  * dropped off the front of the playlist in a live scenario
+  * @return {number} the duration between the start index and end
+  * index.
+  */
+
+const duration = function (playlist, endSequence, expired) {
+  if (!playlist) {
+    return 0;
+  }
+  if (typeof expired !== 'number') {
+    expired = 0;
+  } // if a slice of the total duration is not requested, use
+  // playlist-level duration indicators when they're present
+
+  if (typeof endSequence === 'undefined') {
+    // if present, use the duration specified in the playlist
+    if (playlist.totalDuration) {
+      return playlist.totalDuration;
+    } // duration should be Infinity for live playlists
+
+    if (!playlist.endList) {
+      return window$1.Infinity;
+    }
+  } // calculate the total duration based on the segment durations
+
+  return intervalDuration(playlist, endSequence, expired);
+};
+/**
+  * Calculate the time between two indexes in the current playlist
+  * neight the start- nor the end-index need to be within the current
+  * playlist in which case, the targetDuration of the playlist is used
+  * to approximate the durations of the segments
+  *
+  * @param {Array} options.durationList list to iterate over for durations.
+  * @param {number} options.defaultDuration duration to use for elements before or after the durationList
+  * @param {number} options.startIndex partsAndSegments index to start
+  * @param {number} options.endIndex partsAndSegments index to end.
+  * @return {number} the number of seconds between startIndex and endIndex
+  */
+
+const sumDurations = function ({
+  defaultDuration,
+  durationList,
+  startIndex,
+  endIndex
+}) {
+  let durations = 0;
+  if (startIndex > endIndex) {
+    [startIndex, endIndex] = [endIndex, startIndex];
+  }
+  if (startIndex < 0) {
+    for (let i = startIndex; i < Math.min(0, endIndex); i++) {
+      durations += defaultDuration;
+    }
+    startIndex = 0;
+  }
+  for (let i = startIndex; i < endIndex; i++) {
+    durations += durationList[i].duration;
+  }
+  return durations;
+};
+/**
+ * Calculates the playlist end time
+ *
+ * @param {Object} playlist a media playlist object
+ * @param {number=} expired the amount of time that has
+ *                  dropped off the front of the playlist in a live scenario
+ * @param {boolean|false} useSafeLiveEnd a boolean value indicating whether or not the
+ *                        playlist end calculation should consider the safe live end
+ *                        (truncate the playlist end by three segments). This is normally
+ *                        used for calculating the end of the playlist's seekable range.
+ *                        This takes into account the value of liveEdgePadding.
+ *                        Setting liveEdgePadding to 0 is equivalent to setting this to false.
+ * @param {number} liveEdgePadding a number indicating how far from the end of the playlist we should be in seconds.
+ *                 If this is provided, it is used in the safe live end calculation.
+ *                 Setting useSafeLiveEnd=false or liveEdgePadding=0 are equivalent.
+ *                 Corresponds to suggestedPresentationDelay in DASH manifests.
+ * @return {number} the end time of playlist
+ * @function playlistEnd
+ */
+
+const playlistEnd = function (playlist, expired, useSafeLiveEnd, liveEdgePadding) {
+  if (!playlist || !playlist.segments) {
+    return null;
+  }
+  if (playlist.endList) {
+    return duration(playlist);
+  }
+  if (expired === null) {
+    return null;
+  }
+  expired = expired || 0;
+  let lastSegmentEndTime = intervalDuration(playlist, playlist.mediaSequence + playlist.segments.length, expired);
+  if (useSafeLiveEnd) {
+    liveEdgePadding = typeof liveEdgePadding === 'number' ? liveEdgePadding : liveEdgeDelay(null, playlist);
+    lastSegmentEndTime -= liveEdgePadding;
+  } // don't return a time less than zero
+
+  return Math.max(0, lastSegmentEndTime);
+};
+/**
+  * Calculates the interval of time that is currently seekable in a
+  * playlist. The returned time ranges are relative to the earliest
+  * moment in the specified playlist that is still available. A full
+  * seekable implementation for live streams would need to offset
+  * these values by the duration of content that has expired from the
+  * stream.
+  *
+  * @param {Object} playlist a media playlist object
+  * dropped off the front of the playlist in a live scenario
+  * @param {number=} expired the amount of time that has
+  * dropped off the front of the playlist in a live scenario
+  * @param {number} liveEdgePadding how far from the end of the playlist we should be in seconds.
+  *        Corresponds to suggestedPresentationDelay in DASH manifests.
+  * @return {TimeRanges} the periods of time that are valid targets
+  * for seeking
+  */
+
+const seekable = function (playlist, expired, liveEdgePadding) {
+  const useSafeLiveEnd = true;
+  const seekableStart = expired || 0;
+  let seekableEnd = playlistEnd(playlist, expired, useSafeLiveEnd, liveEdgePadding);
+  if (seekableEnd === null) {
+    return createTimeRanges();
+  } // Clamp seekable end since it can not be less than the seekable start
+
+  if (seekableEnd < seekableStart) {
+    seekableEnd = seekableStart;
+  }
+  return createTimeRanges(seekableStart, seekableEnd);
+};
+/**
+ * Determine the index and estimated starting time of the segment that
+ * contains a specified playback position in a media playlist.
+ *
+ * @param {Object} options.playlist the media playlist to query
+ * @param {number} options.currentTime The number of seconds since the earliest
+ * possible position to determine the containing segment for
+ * @param {number} options.startTime the time when the segment/part starts
+ * @param {number} options.startingSegmentIndex the segment index to start looking at.
+ * @param {number?} [options.startingPartIndex] the part index to look at within the segment.
+ *
+ * @return {Object} an object with partIndex, segmentIndex, and startTime.
+ */
+
+const getMediaInfoForTime = function ({
+  playlist,
+  currentTime,
+  startingSegmentIndex,
+  startingPartIndex,
+  startTime,
+  exactManifestTimings
+}) {
+  let time = currentTime - startTime;
+  const partsAndSegments = getPartsAndSegments(playlist);
+  let startIndex = 0;
+  for (let i = 0; i < partsAndSegments.length; i++) {
+    const partAndSegment = partsAndSegments[i];
+    if (startingSegmentIndex !== partAndSegment.segmentIndex) {
+      continue;
+    } // skip this if part index does not match.
+
+    if (typeof startingPartIndex === 'number' && typeof partAndSegment.partIndex === 'number' && startingPartIndex !== partAndSegment.partIndex) {
+      continue;
+    }
+    startIndex = i;
+    break;
+  }
+  if (time < 0) {
+    // Walk backward from startIndex in the playlist, adding durations
+    // until we find a segment that contains `time` and return it
+    if (startIndex > 0) {
+      for (let i = startIndex - 1; i >= 0; i--) {
+        const partAndSegment = partsAndSegments[i];
+        time += partAndSegment.duration;
+        if (exactManifestTimings) {
+          if (time < 0) {
+            continue;
+          }
+        } else if (time + TIME_FUDGE_FACTOR <= 0) {
+          continue;
+        }
+        return {
+          partIndex: partAndSegment.partIndex,
+          segmentIndex: partAndSegment.segmentIndex,
+          startTime: startTime - sumDurations({
+            defaultDuration: playlist.targetDuration,
+            durationList: partsAndSegments,
+            startIndex,
+            endIndex: i
+          })
+        };
+      }
+    } // We were unable to find a good segment within the playlist
+    // so select the first segment
+
+    return {
+      partIndex: partsAndSegments[0] && partsAndSegments[0].partIndex || null,
+      segmentIndex: partsAndSegments[0] && partsAndSegments[0].segmentIndex || 0,
+      startTime: currentTime
+    };
+  } // When startIndex is negative, we first walk forward to first segment
+  // adding target durations. If we "run out of time" before getting to
+  // the first segment, return the first segment
+
+  if (startIndex < 0) {
+    for (let i = startIndex; i < 0; i++) {
+      time -= playlist.targetDuration;
+      if (time < 0) {
+        return {
+          partIndex: partsAndSegments[0] && partsAndSegments[0].partIndex || null,
+          segmentIndex: partsAndSegments[0] && partsAndSegments[0].segmentIndex || 0,
+          startTime: currentTime
+        };
+      }
+    }
+    startIndex = 0;
+  } // Walk forward from startIndex in the playlist, subtracting durations
+  // until we find a segment that contains `time` and return it
+
+  for (let i = startIndex; i < partsAndSegments.length; i++) {
+    const partAndSegment = partsAndSegments[i];
+    time -= partAndSegment.duration;
+    const canUseFudgeFactor = partAndSegment.duration > TIME_FUDGE_FACTOR;
+    const isExactlyAtTheEnd = time === 0;
+    const isExtremelyCloseToTheEnd = canUseFudgeFactor && time + TIME_FUDGE_FACTOR >= 0;
+    if (isExactlyAtTheEnd || isExtremelyCloseToTheEnd) {
+      // 1) We are exactly at the end of the current segment.
+      // 2) We are extremely close to the end of the current segment (The difference is less than  1 / 30).
+      //    We may encounter this situation when
+      //    we don't have exact match between segment duration info in the manifest and the actual duration of the segment
+      //    For example:
+      //    We appended 3 segments 10 seconds each, meaning we should have 30 sec buffered,
+      //    but we the actual buffered is 29.99999
+      //
+      // In both cases:
+      // if we passed current time -> it means that we already played current segment
+      // if we passed buffered.end -> it means that this segment is already loaded and buffered
+      // we should select the next segment if we have one:
+      if (i !== partsAndSegments.length - 1) {
+        continue;
+      }
+    }
+    if (exactManifestTimings) {
+      if (time > 0) {
+        continue;
+      }
+    } else if (time - TIME_FUDGE_FACTOR >= 0) {
+      continue;
+    }
+    return {
+      partIndex: partAndSegment.partIndex,
+      segmentIndex: partAndSegment.segmentIndex,
+      startTime: startTime + sumDurations({
+        defaultDuration: playlist.targetDuration,
+        durationList: partsAndSegments,
+        startIndex,
+        endIndex: i
+      })
+    };
+  } // We are out of possible candidates so load the last one...
+
+  return {
+    segmentIndex: partsAndSegments[partsAndSegments.length - 1].segmentIndex,
+    partIndex: partsAndSegments[partsAndSegments.length - 1].partIndex,
+    startTime: currentTime
+  };
+};
+/**
+ * Check whether the playlist is excluded or not.
+ *
+ * @param {Object} playlist the media playlist object
+ * @return {boolean} whether the playlist is excluded or not
+ * @function isExcluded
+ */
+
+const isExcluded = function (playlist) {
+  return playlist.excludeUntil && playlist.excludeUntil > Date.now();
+};
+/**
+ * Check whether the playlist is compatible with current playback configuration or has
+ * been excluded permanently for being incompatible.
+ *
+ * @param {Object} playlist the media playlist object
+ * @return {boolean} whether the playlist is incompatible or not
+ * @function isIncompatible
+ */
+
+const isIncompatible = function (playlist) {
+  return playlist.excludeUntil && playlist.excludeUntil === Infinity;
+};
+/**
+ * Check whether the playlist is enabled or not.
+ *
+ * @param {Object} playlist the media playlist object
+ * @return {boolean} whether the playlist is enabled or not
+ * @function isEnabled
+ */
+
+const isEnabled = function (playlist) {
+  const excluded = isExcluded(playlist);
+  return !playlist.disabled && !excluded;
+};
+/**
+ * Check whether the playlist has been manually disabled through the representations api.
+ *
+ * @param {Object} playlist the media playlist object
+ * @return {boolean} whether the playlist is disabled manually or not
+ * @function isDisabled
+ */
+
+const isDisabled = function (playlist) {
+  return playlist.disabled;
+};
+/**
+ * Returns whether the current playlist is an AES encrypted HLS stream
+ *
+ * @return {boolean} true if it's an AES encrypted HLS stream
+ */
+
+const isAes = function (media) {
+  for (let i = 0; i < media.segments.length; i++) {
+    if (media.segments[i].key) {
+      return true;
+    }
+  }
+  return false;
+};
+/**
+ * Checks if the playlist has a value for the specified attribute
+ *
+ * @param {string} attr
+ *        Attribute to check for
+ * @param {Object} playlist
+ *        The media playlist object
+ * @return {boolean}
+ *         Whether the playlist contains a value for the attribute or not
+ * @function hasAttribute
+ */
+
+const hasAttribute = function (attr, playlist) {
+  return playlist.attributes && playlist.attributes[attr];
+};
+/**
+ * Estimates the time required to complete a segment download from the specified playlist
+ *
+ * @param {number} segmentDuration
+ *        Duration of requested segment
+ * @param {number} bandwidth
+ *        Current measured bandwidth of the player
+ * @param {Object} playlist
+ *        The media playlist object
+ * @param {number=} bytesReceived
+ *        Number of bytes already received for the request. Defaults to 0
+ * @return {number|NaN}
+ *         The estimated time to request the segment. NaN if bandwidth information for
+ *         the given playlist is unavailable
+ * @function estimateSegmentRequestTime
+ */
+
+const estimateSegmentRequestTime = function (segmentDuration, bandwidth, playlist, bytesReceived = 0) {
+  if (!hasAttribute('BANDWIDTH', playlist)) {
+    return NaN;
+  }
+  const size = segmentDuration * playlist.attributes.BANDWIDTH;
+  return (size - bytesReceived * 8) / bandwidth;
+};
+/*
+ * Returns whether the current playlist is the lowest rendition
+ *
+ * @return {Boolean} true if on lowest rendition
+ */
+
+const isLowestEnabledRendition = (main, media) => {
+  if (main.playlists.length === 1) {
+    return true;
+  }
+  const currentBandwidth = media.attributes.BANDWIDTH || Number.MAX_VALUE;
+  return main.playlists.filter(playlist => {
+    if (!isEnabled(playlist)) {
+      return false;
+    }
+    return (playlist.attributes.BANDWIDTH || 0) < currentBandwidth;
+  }).length === 0;
+};
+const playlistMatch = (a, b) => {
+  // both playlits are null
+  // or only one playlist is non-null
+  // no match
+  if (!a && !b || !a && b || a && !b) {
+    return false;
+  } // playlist objects are the same, match
+
+  if (a === b) {
+    return true;
+  } // first try to use id as it should be the most
+  // accurate
+
+  if (a.id && b.id && a.id === b.id) {
+    return true;
+  } // next try to use reslovedUri as it should be the
+  // second most accurate.
+
+  if (a.resolvedUri && b.resolvedUri && a.resolvedUri === b.resolvedUri) {
+    return true;
+  } // finally try to use uri as it should be accurate
+  // but might miss a few cases for relative uris
+
+  if (a.uri && b.uri && a.uri === b.uri) {
+    return true;
+  }
+  return false;
+};
+const someAudioVariant = function (main, callback) {
+  const AUDIO = main && main.mediaGroups && main.mediaGroups.AUDIO || {};
+  let found = false;
+  for (const groupName in AUDIO) {
+    for (const label in AUDIO[groupName]) {
+      found = callback(AUDIO[groupName][label]);
+      if (found) {
+        break;
+      }
+    }
+    if (found) {
+      break;
+    }
+  }
+  return !!found;
+};
+const isAudioOnly = main => {
+  // we are audio only if we have no main playlists but do
+  // have media group playlists.
+  if (!main || !main.playlists || !main.playlists.length) {
+    // without audio variants or playlists this
+    // is not an audio only main.
+    const found = someAudioVariant(main, variant => variant.playlists && variant.playlists.length || variant.uri);
+    return found;
+  } // if every playlist has only an audio codec it is audio only
+
+  for (let i = 0; i < main.playlists.length; i++) {
+    const playlist = main.playlists[i];
+    const CODECS = playlist.attributes && playlist.attributes.CODECS; // all codecs are audio, this is an audio playlist.
+
+    if (CODECS && CODECS.split(',').every(c => isAudioCodec(c))) {
+      continue;
+    } // playlist is in an audio group it is audio only
+
+    const found = someAudioVariant(main, variant => playlistMatch(playlist, variant));
+    if (found) {
+      continue;
+    } // if we make it here this playlist isn't audio and we
+    // are not audio only
+
+    return false;
+  } // if we make it past every playlist without returning, then
+  // this is an audio only playlist.
+
+  return true;
+}; // exports
+
+var Playlist = {
+  liveEdgeDelay,
+  duration,
+  seekable,
+  getMediaInfoForTime,
+  isEnabled,
+  isDisabled,
+  isExcluded,
+  isIncompatible,
+  playlistEnd,
+  isAes,
+  hasAttribute,
+  estimateSegmentRequestTime,
+  isLowestEnabledRendition,
+  isAudioOnly,
+  playlistMatch,
+  segmentDurationWithParts
+};
+const {
+  log
+} = videojs;
+const createPlaylistID = (index, uri) => {
+  return `${index}-${uri}`;
+}; // default function for creating a group id
+
+const groupID = (type, group, label) => {
+  return `placeholder-uri-${type}-${group}-${label}`;
+};
+/**
+ * Parses a given m3u8 playlist
+ *
+ * @param {Function} [onwarn]
+ *        a function to call when the parser triggers a warning event.
+ * @param {Function} [oninfo]
+ *        a function to call when the parser triggers an info event.
+ * @param {string} manifestString
+ *        The downloaded manifest string
+ * @param {Object[]} [customTagParsers]
+ *        An array of custom tag parsers for the m3u8-parser instance
+ * @param {Object[]} [customTagMappers]
+ *        An array of custom tag mappers for the m3u8-parser instance
+ * @param {boolean} [llhls]
+ *        Whether to keep ll-hls features in the manifest after parsing.
+ * @return {Object}
+ *         The manifest object
+ */
+
+const parseManifest = ({
+  onwarn,
+  oninfo,
+  manifestString,
+  customTagParsers = [],
+  customTagMappers = [],
+  llhls
+}) => {
+  const parser = new Parser();
+  if (onwarn) {
+    parser.on('warn', onwarn);
+  }
+  if (oninfo) {
+    parser.on('info', oninfo);
+  }
+  customTagParsers.forEach(customParser => parser.addParser(customParser));
+  customTagMappers.forEach(mapper => parser.addTagMapper(mapper));
+  parser.push(manifestString);
+  parser.end();
+  const manifest = parser.manifest; // remove llhls features from the parsed manifest
+  // if we don't want llhls support.
+
+  if (!llhls) {
+    ['preloadSegment', 'skip', 'serverControl', 'renditionReports', 'partInf', 'partTargetDuration'].forEach(function (k) {
+      if (manifest.hasOwnProperty(k)) {
+        delete manifest[k];
+      }
+    });
+    if (manifest.segments) {
+      manifest.segments.forEach(function (segment) {
+        ['parts', 'preloadHints'].forEach(function (k) {
+          if (segment.hasOwnProperty(k)) {
+            delete segment[k];
+          }
+        });
+      });
+    }
+  }
+  if (!manifest.targetDuration) {
+    let targetDuration = 10;
+    if (manifest.segments && manifest.segments.length) {
+      targetDuration = manifest.segments.reduce((acc, s) => Math.max(acc, s.duration), 0);
+    }
+    if (onwarn) {
+      onwarn({
+        message: `manifest has no targetDuration defaulting to ${targetDuration}`
+      });
+    }
+    manifest.targetDuration = targetDuration;
+  }
+  const parts = getLastParts(manifest);
+  if (parts.length && !manifest.partTargetDuration) {
+    const partTargetDuration = parts.reduce((acc, p) => Math.max(acc, p.duration), 0);
+    if (onwarn) {
+      onwarn({
+        message: `manifest has no partTargetDuration defaulting to ${partTargetDuration}`
+      });
+      log.error('LL-HLS manifest has parts but lacks required #EXT-X-PART-INF:PART-TARGET value. See https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis-09#section-4.4.3.7. Playback is not guaranteed.');
+    }
+    manifest.partTargetDuration = partTargetDuration;
+  }
+  return manifest;
+};
+/**
+ * Loops through all supported media groups in main and calls the provided
+ * callback for each group
+ *
+ * @param {Object} main
+ *        The parsed main manifest object
+ * @param {Function} callback
+ *        Callback to call for each media group
+ */
+
+const forEachMediaGroup = (main, callback) => {
+  if (!main.mediaGroups) {
+    return;
+  }
+  ['AUDIO', 'SUBTITLES'].forEach(mediaType => {
+    if (!main.mediaGroups[mediaType]) {
+      return;
+    }
+    for (const groupKey in main.mediaGroups[mediaType]) {
+      for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+        const mediaProperties = main.mediaGroups[mediaType][groupKey][labelKey];
+        callback(mediaProperties, mediaType, groupKey, labelKey);
+      }
+    }
+  });
+};
+/**
+ * Adds properties and attributes to the playlist to keep consistent functionality for
+ * playlists throughout VHS.
+ *
+ * @param {Object} config
+ *        Arguments object
+ * @param {Object} config.playlist
+ *        The media playlist
+ * @param {string} [config.uri]
+ *        The uri to the media playlist (if media playlist is not from within a main
+ *        playlist)
+ * @param {string} id
+ *        ID to use for the playlist
+ */
+
+const setupMediaPlaylist = ({
+  playlist,
+  uri,
+  id
+}) => {
+  playlist.id = id;
+  playlist.playlistErrors_ = 0;
+  if (uri) {
+    // For media playlists, m3u8-parser does not have access to a URI, as HLS media
+    // playlists do not contain their own source URI, but one is needed for consistency in
+    // VHS.
+    playlist.uri = uri;
+  } // For HLS main playlists, even though certain attributes MUST be defined, the
+  // stream may still be played without them.
+  // For HLS media playlists, m3u8-parser does not attach an attributes object to the
+  // manifest.
+  //
+  // To avoid undefined reference errors through the project, and make the code easier
+  // to write/read, add an empty attributes object for these cases.
+
+  playlist.attributes = playlist.attributes || {};
+};
+/**
+ * Adds ID, resolvedUri, and attributes properties to each playlist of the main, where
+ * necessary. In addition, creates playlist IDs for each playlist and adds playlist ID to
+ * playlist references to the playlists array.
+ *
+ * @param {Object} main
+ *        The main playlist
+ */
+
+const setupMediaPlaylists = main => {
+  let i = main.playlists.length;
+  while (i--) {
+    const playlist = main.playlists[i];
+    setupMediaPlaylist({
+      playlist,
+      id: createPlaylistID(i, playlist.uri)
+    });
+    playlist.resolvedUri = resolveUrl(main.uri, playlist.uri);
+    main.playlists[playlist.id] = playlist; // URI reference added for backwards compatibility
+
+    main.playlists[playlist.uri] = playlist; // Although the spec states an #EXT-X-STREAM-INF tag MUST have a BANDWIDTH attribute,
+    // the stream can be played without it. Although an attributes property may have been
+    // added to the playlist to prevent undefined references, issue a warning to fix the
+    // manifest.
+
+    if (!playlist.attributes.BANDWIDTH) {
+      log.warn('Invalid playlist STREAM-INF detected. Missing BANDWIDTH attribute.');
+    }
+  }
+};
+/**
+ * Adds resolvedUri properties to each media group.
+ *
+ * @param {Object} main
+ *        The main playlist
+ */
+
+const resolveMediaGroupUris = main => {
+  forEachMediaGroup(main, properties => {
+    if (properties.uri) {
+      properties.resolvedUri = resolveUrl(main.uri, properties.uri);
+    }
+  });
+};
+/**
+ * Creates a main playlist wrapper to insert a sole media playlist into.
+ *
+ * @param {Object} media
+ *        Media playlist
+ * @param {string} uri
+ *        The media URI
+ *
+ * @return {Object}
+ *         main playlist
+ */
+
+const mainForMedia = (media, uri) => {
+  const id = createPlaylistID(0, uri);
+  const main = {
+    mediaGroups: {
+      'AUDIO': {},
+      'VIDEO': {},
+      'CLOSED-CAPTIONS': {},
+      'SUBTITLES': {}
+    },
+    uri: window$1.location.href,
+    resolvedUri: window$1.location.href,
+    playlists: [{
+      uri,
+      id,
+      resolvedUri: uri,
+      // m3u8-parser does not attach an attributes property to media playlists so make
+      // sure that the property is attached to avoid undefined reference errors
+      attributes: {}
+    }]
+  }; // set up ID reference
+
+  main.playlists[id] = main.playlists[0]; // URI reference added for backwards compatibility
+
+  main.playlists[uri] = main.playlists[0];
+  return main;
+};
+/**
+ * Does an in-place update of the main manifest to add updated playlist URI references
+ * as well as other properties needed by VHS that aren't included by the parser.
+ *
+ * @param {Object} main
+ *        main manifest object
+ * @param {string} uri
+ *        The source URI
+ * @param {function} createGroupID
+ *        A function to determine how to create the groupID for mediaGroups
+ */
+
+const addPropertiesToMain = (main, uri, createGroupID = groupID) => {
+  main.uri = uri;
+  for (let i = 0; i < main.playlists.length; i++) {
+    if (!main.playlists[i].uri) {
+      // Set up phony URIs for the playlists since playlists are referenced by their URIs
+      // throughout VHS, but some formats (e.g., DASH) don't have external URIs
+      // TODO: consider adding dummy URIs in mpd-parser
+      const phonyUri = `placeholder-uri-${i}`;
+      main.playlists[i].uri = phonyUri;
+    }
+  }
+  const audioOnlyMain = isAudioOnly(main);
+  forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+    // add a playlist array under properties
+    if (!properties.playlists || !properties.playlists.length) {
+      // If the manifest is audio only and this media group does not have a uri, check
+      // if the media group is located in the main list of playlists. If it is, don't add
+      // placeholder properties as it shouldn't be considered an alternate audio track.
+      if (audioOnlyMain && mediaType === 'AUDIO' && !properties.uri) {
+        for (let i = 0; i < main.playlists.length; i++) {
+          const p = main.playlists[i];
+          if (p.attributes && p.attributes.AUDIO && p.attributes.AUDIO === groupKey) {
+            return;
+          }
+        }
+      }
+      properties.playlists = [_extends({}, properties)];
+    }
+    properties.playlists.forEach(function (p, i) {
+      const groupId = createGroupID(mediaType, groupKey, labelKey, p);
+      const id = createPlaylistID(i, groupId);
+      if (p.uri) {
+        p.resolvedUri = p.resolvedUri || resolveUrl(main.uri, p.uri);
+      } else {
+        // DEPRECATED, this has been added to prevent a breaking change.
+        // previously we only ever had a single media group playlist, so
+        // we mark the first playlist uri without prepending the index as we used to
+        // ideally we would do all of the playlists the same way.
+        p.uri = i === 0 ? groupId : id; // don't resolve a placeholder uri to an absolute url, just use
+        // the placeholder again
+
+        p.resolvedUri = p.uri;
+      }
+      p.id = p.id || id; // add an empty attributes object, all playlists are
+      // expected to have this.
+
+      p.attributes = p.attributes || {}; // setup ID and URI references (URI for backwards compatibility)
+
+      main.playlists[p.id] = p;
+      main.playlists[p.uri] = p;
+    });
+  });
+  setupMediaPlaylists(main);
+  resolveMediaGroupUris(main);
+};
+class DateRangesStorage {
+  constructor() {
+    this.offset_ = null;
+    this.pendingDateRanges_ = new Map();
+    this.processedDateRanges_ = new Map();
+  }
+  setOffset(segments = []) {
+    // already set
+    if (this.offset_ !== null) {
+      return;
+    } // no segment to process
+
+    if (!segments.length) {
+      return;
+    }
+    const [firstSegment] = segments; // no program date time
+
+    if (firstSegment.programDateTime === undefined) {
+      return;
+    } // Set offset as ProgramDateTime for the very first segment of the very first playlist load:
+
+    this.offset_ = firstSegment.programDateTime / 1000;
+  }
+  setPendingDateRanges(dateRanges = []) {
+    if (!dateRanges.length) {
+      return;
+    }
+    const [dateRange] = dateRanges;
+    const startTime = dateRange.startDate.getTime();
+    this.trimProcessedDateRanges_(startTime);
+    this.pendingDateRanges_ = dateRanges.reduce((map, pendingDateRange) => {
+      map.set(pendingDateRange.id, pendingDateRange);
+      return map;
+    }, new Map());
+  }
+  processDateRange(dateRange) {
+    this.pendingDateRanges_.delete(dateRange.id);
+    this.processedDateRanges_.set(dateRange.id, dateRange);
+  }
+  getDateRangesToProcess() {
+    if (this.offset_ === null) {
+      return [];
+    }
+    const dateRangeClasses = {};
+    const dateRangesToProcess = [];
+    this.pendingDateRanges_.forEach((dateRange, id) => {
+      if (this.processedDateRanges_.has(id)) {
+        return;
+      }
+      dateRange.startTime = dateRange.startDate.getTime() / 1000 - this.offset_;
+      dateRange.processDateRange = () => this.processDateRange(dateRange);
+      dateRangesToProcess.push(dateRange);
+      if (!dateRange.class) {
+        return;
+      }
+      if (dateRangeClasses[dateRange.class]) {
+        const length = dateRangeClasses[dateRange.class].push(dateRange);
+        dateRange.classListIndex = length - 1;
+      } else {
+        dateRangeClasses[dateRange.class] = [dateRange];
+        dateRange.classListIndex = 0;
+      }
+    });
+    for (const dateRange of dateRangesToProcess) {
+      const classList = dateRangeClasses[dateRange.class] || [];
+      if (dateRange.endDate) {
+        dateRange.endTime = dateRange.endDate.getTime() / 1000 - this.offset_;
+      } else if (dateRange.endOnNext && classList[dateRange.classListIndex + 1]) {
+        dateRange.endTime = classList[dateRange.classListIndex + 1].startTime;
+      } else if (dateRange.duration) {
+        dateRange.endTime = dateRange.startTime + dateRange.duration;
+      } else if (dateRange.plannedDuration) {
+        dateRange.endTime = dateRange.startTime + dateRange.plannedDuration;
+      } else {
+        dateRange.endTime = dateRange.startTime;
+      }
+    }
+    return dateRangesToProcess;
+  }
+  trimProcessedDateRanges_(startTime) {
+    const copy = new Map(this.processedDateRanges_);
+    copy.forEach((dateRange, id) => {
+      if (dateRange.startDate.getTime() < startTime) {
+        this.processedDateRanges_.delete(id);
+      }
+    });
+  }
+}
+const {
+  EventTarget: EventTarget$1
+} = videojs;
+const addLLHLSQueryDirectives = (uri, media) => {
+  if (media.endList || !media.serverControl) {
+    return uri;
+  }
+  const parameters = {};
+  if (media.serverControl.canBlockReload) {
+    const {
+      preloadSegment
+    } = media; // next msn is a zero based value, length is not.
+
+    let nextMSN = media.mediaSequence + media.segments.length; // If preload segment has parts then it is likely
+    // that we are going to request a part of that preload segment.
+    // the logic below is used to determine that.
+
+    if (preloadSegment) {
+      const parts = preloadSegment.parts || []; // _HLS_part is a zero based index
+
+      const nextPart = getKnownPartCount(media) - 1; // if nextPart is > -1 and not equal to just the
+      // length of parts, then we know we had part preload hints
+      // and we need to add the _HLS_part= query
+
+      if (nextPart > -1 && nextPart !== parts.length - 1) {
+        // add existing parts to our preload hints
+        // eslint-disable-next-line
+        parameters._HLS_part = nextPart;
+      } // this if statement makes sure that we request the msn
+      // of the preload segment if:
+      // 1. the preload segment had parts (and was not yet a full segment)
+      //    but was added to our segments array
+      // 2. the preload segment had preload hints for parts that are not in
+      //    the manifest yet.
+      // in all other cases we want the segment after the preload segment
+      // which will be given by using media.segments.length because it is 1 based
+      // rather than 0 based.
+
+      if (nextPart > -1 || parts.length) {
+        nextMSN--;
+      }
+    } // add _HLS_msn= in front of any _HLS_part query
+    // eslint-disable-next-line
+
+    parameters._HLS_msn = nextMSN;
+  }
+  if (media.serverControl && media.serverControl.canSkipUntil) {
+    // add _HLS_skip= infront of all other queries.
+    // eslint-disable-next-line
+    parameters._HLS_skip = media.serverControl.canSkipDateranges ? 'v2' : 'YES';
+  }
+  if (Object.keys(parameters).length) {
+    const parsedUri = new window$1.URL(uri);
+    ['_HLS_skip', '_HLS_msn', '_HLS_part'].forEach(function (name) {
+      if (!parameters.hasOwnProperty(name)) {
+        return;
+      }
+      parsedUri.searchParams.set(name, parameters[name]);
+    });
+    uri = parsedUri.toString();
+  }
+  return uri;
+};
+/**
+ * Returns a new segment object with properties and
+ * the parts array merged.
+ *
+ * @param {Object} a the old segment
+ * @param {Object} b the new segment
+ *
+ * @return {Object} the merged segment
+ */
+
+const updateSegment = (a, b) => {
+  if (!a) {
+    return b;
+  }
+  const result = merge(a, b); // if only the old segment has preload hints
+  // and the new one does not, remove preload hints.
+
+  if (a.preloadHints && !b.preloadHints) {
+    delete result.preloadHints;
+  } // if only the old segment has parts
+  // then the parts are no longer valid
+
+  if (a.parts && !b.parts) {
+    delete result.parts; // if both segments have parts
+    // copy part propeties from the old segment
+    // to the new one.
+  } else if (a.parts && b.parts) {
+    for (let i = 0; i < b.parts.length; i++) {
+      if (a.parts && a.parts[i]) {
+        result.parts[i] = merge(a.parts[i], b.parts[i]);
+      }
+    }
+  } // set skipped to false for segments that have
+  // have had information merged from the old segment.
+
+  if (!a.skipped && b.skipped) {
+    result.skipped = false;
+  } // set preload to false for segments that have
+  // had information added in the new segment.
+
+  if (a.preload && !b.preload) {
+    result.preload = false;
+  }
+  return result;
+};
+/**
+ * Returns a new array of segments that is the result of merging
+ * properties from an older list of segments onto an updated
+ * list. No properties on the updated playlist will be ovewritten.
+ *
+ * @param {Array} original the outdated list of segments
+ * @param {Array} update the updated list of segments
+ * @param {number=} offset the index of the first update
+ * segment in the original segment list. For non-live playlists,
+ * this should always be zero and does not need to be
+ * specified. For live playlists, it should be the difference
+ * between the media sequence numbers in the original and updated
+ * playlists.
+ * @return {Array} a list of merged segment objects
+ */
+
+const updateSegments = (original, update, offset) => {
+  const oldSegments = original.slice();
+  const newSegments = update.slice();
+  offset = offset || 0;
+  const result = [];
+  let currentMap;
+  for (let newIndex = 0; newIndex < newSegments.length; newIndex++) {
+    const oldSegment = oldSegments[newIndex + offset];
+    const newSegment = newSegments[newIndex];
+    if (oldSegment) {
+      currentMap = oldSegment.map || currentMap;
+      result.push(updateSegment(oldSegment, newSegment));
+    } else {
+      // carry over map to new segment if it is missing
+      if (currentMap && !newSegment.map) {
+        newSegment.map = currentMap;
+      }
+      result.push(newSegment);
+    }
+  }
+  return result;
+};
+const resolveSegmentUris = (segment, baseUri) => {
+  // preloadSegment will not have a uri at all
+  // as the segment isn't actually in the manifest yet, only parts
+  if (!segment.resolvedUri && segment.uri) {
+    segment.resolvedUri = resolveUrl(baseUri, segment.uri);
+  }
+  if (segment.key && !segment.key.resolvedUri) {
+    segment.key.resolvedUri = resolveUrl(baseUri, segment.key.uri);
+  }
+  if (segment.map && !segment.map.resolvedUri) {
+    segment.map.resolvedUri = resolveUrl(baseUri, segment.map.uri);
+  }
+  if (segment.map && segment.map.key && !segment.map.key.resolvedUri) {
+    segment.map.key.resolvedUri = resolveUrl(baseUri, segment.map.key.uri);
+  }
+  if (segment.parts && segment.parts.length) {
+    segment.parts.forEach(p => {
+      if (p.resolvedUri) {
+        return;
+      }
+      p.resolvedUri = resolveUrl(baseUri, p.uri);
+    });
+  }
+  if (segment.preloadHints && segment.preloadHints.length) {
+    segment.preloadHints.forEach(p => {
+      if (p.resolvedUri) {
+        return;
+      }
+      p.resolvedUri = resolveUrl(baseUri, p.uri);
+    });
+  }
+};
+const getAllSegments = function (media) {
+  const segments = media.segments || [];
+  const preloadSegment = media.preloadSegment; // a preloadSegment with only preloadHints is not currently
+  // a usable segment, only include a preloadSegment that has
+  // parts.
+
+  if (preloadSegment && preloadSegment.parts && preloadSegment.parts.length) {
+    // if preloadHints has a MAP that means that the
+    // init segment is going to change. We cannot use any of the parts
+    // from this preload segment.
+    if (preloadSegment.preloadHints) {
+      for (let i = 0; i < preloadSegment.preloadHints.length; i++) {
+        if (preloadSegment.preloadHints[i].type === 'MAP') {
+          return segments;
+        }
+      }
+    } // set the duration for our preload segment to target duration.
+
+    preloadSegment.duration = media.targetDuration;
+    preloadSegment.preload = true;
+    segments.push(preloadSegment);
+  }
+  return segments;
+}; // consider the playlist unchanged if the playlist object is the same or
+// the number of segments is equal, the media sequence number is unchanged,
+// and this playlist hasn't become the end of the playlist
+
+const isPlaylistUnchanged = (a, b) => a === b || a.segments && b.segments && a.segments.length === b.segments.length && a.endList === b.endList && a.mediaSequence === b.mediaSequence && a.preloadSegment === b.preloadSegment;
+/**
+  * Returns a new main playlist that is the result of merging an
+  * updated media playlist into the original version. If the
+  * updated media playlist does not match any of the playlist
+  * entries in the original main playlist, null is returned.
+  *
+  * @param {Object} main a parsed main M3U8 object
+  * @param {Object} media a parsed media M3U8 object
+  * @return {Object} a new object that represents the original
+  * main playlist with the updated media playlist merged in, or
+  * null if the merge produced no change.
+  */
+
+const updateMain$1 = (main, newMedia, unchangedCheck = isPlaylistUnchanged) => {
+  const result = merge(main, {});
+  const oldMedia = result.playlists[newMedia.id];
+  if (!oldMedia) {
+    return null;
+  }
+  if (unchangedCheck(oldMedia, newMedia)) {
+    return null;
+  }
+  newMedia.segments = getAllSegments(newMedia);
+  const mergedPlaylist = merge(oldMedia, newMedia); // always use the new media's preload segment
+
+  if (mergedPlaylist.preloadSegment && !newMedia.preloadSegment) {
+    delete mergedPlaylist.preloadSegment;
+  } // if the update could overlap existing segment information, merge the two segment lists
+
+  if (oldMedia.segments) {
+    if (newMedia.skip) {
+      newMedia.segments = newMedia.segments || []; // add back in objects for skipped segments, so that we merge
+      // old properties into the new segments
+
+      for (let i = 0; i < newMedia.skip.skippedSegments; i++) {
+        newMedia.segments.unshift({
+          skipped: true
+        });
+      }
+    }
+    mergedPlaylist.segments = updateSegments(oldMedia.segments, newMedia.segments, newMedia.mediaSequence - oldMedia.mediaSequence);
+  } // resolve any segment URIs to prevent us from having to do it later
+
+  mergedPlaylist.segments.forEach(segment => {
+    resolveSegmentUris(segment, mergedPlaylist.resolvedUri);
+  }); // TODO Right now in the playlists array there are two references to each playlist, one
+  // that is referenced by index, and one by URI. The index reference may no longer be
+  // necessary.
+
+  for (let i = 0; i < result.playlists.length; i++) {
+    if (result.playlists[i].id === newMedia.id) {
+      result.playlists[i] = mergedPlaylist;
+    }
+  }
+  result.playlists[newMedia.id] = mergedPlaylist; // URI reference added for backwards compatibility
+
+  result.playlists[newMedia.uri] = mergedPlaylist; // update media group playlist references.
+
+  forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+    if (!properties.playlists) {
+      return;
+    }
+    for (let i = 0; i < properties.playlists.length; i++) {
+      if (newMedia.id === properties.playlists[i].id) {
+        properties.playlists[i] = mergedPlaylist;
+      }
+    }
+  });
+  return result;
+};
+/**
+ * Calculates the time to wait before refreshing a live playlist
+ *
+ * @param {Object} media
+ *        The current media
+ * @param {boolean} update
+ *        True if there were any updates from the last refresh, false otherwise
+ * @return {number}
+ *         The time in ms to wait before refreshing the live playlist
+ */
+
+const refreshDelay = (media, update) => {
+  const segments = media.segments || [];
+  const lastSegment = segments[segments.length - 1];
+  const lastPart = lastSegment && lastSegment.parts && lastSegment.parts[lastSegment.parts.length - 1];
+  const lastDuration = lastPart && lastPart.duration || lastSegment && lastSegment.duration;
+  if (update && lastDuration) {
+    return lastDuration * 1000;
+  } // if the playlist is unchanged since the last reload or last segment duration
+  // cannot be determined, try again after half the target duration
+
+  return (media.partTargetDuration || media.targetDuration || 10) * 500;
+};
+/**
+ * Load a playlist from a remote location
+ *
+ * @class PlaylistLoader
+ * @extends Stream
+ * @param {string|Object} src url or object of manifest
+ * @param {boolean} withCredentials the withCredentials xhr option
+ * @class
+ */
+
+class PlaylistLoader extends EventTarget$1 {
+  constructor(src, vhs, options = {}) {
+    super();
+    if (!src) {
+      throw new Error('A non-empty playlist URL or object is required');
+    }
+    this.logger_ = logger('PlaylistLoader');
+    const {
+      withCredentials = false
+    } = options;
+    this.src = src;
+    this.vhs_ = vhs;
+    this.withCredentials = withCredentials;
+    this.addDateRangesToTextTrack_ = options.addDateRangesToTextTrack;
+    const vhsOptions = vhs.options_;
+    this.customTagParsers = vhsOptions && vhsOptions.customTagParsers || [];
+    this.customTagMappers = vhsOptions && vhsOptions.customTagMappers || [];
+    this.llhls = vhsOptions && vhsOptions.llhls;
+    this.dateRangesStorage_ = new DateRangesStorage(); // initialize the loader state
+
+    this.state = 'HAVE_NOTHING'; // live playlist staleness timeout
+
+    this.handleMediaupdatetimeout_ = this.handleMediaupdatetimeout_.bind(this);
+    this.on('mediaupdatetimeout', this.handleMediaupdatetimeout_);
+    this.on('loadedplaylist', this.handleLoadedPlaylist_.bind(this));
+  }
+  handleLoadedPlaylist_() {
+    const mediaPlaylist = this.media();
+    if (!mediaPlaylist) {
+      return;
+    }
+    this.dateRangesStorage_.setOffset(mediaPlaylist.segments);
+    this.dateRangesStorage_.setPendingDateRanges(mediaPlaylist.dateRanges);
+    const availableDateRanges = this.dateRangesStorage_.getDateRangesToProcess();
+    if (!availableDateRanges.length || !this.addDateRangesToTextTrack_) {
+      return;
+    }
+    this.addDateRangesToTextTrack_(availableDateRanges);
+  }
+  handleMediaupdatetimeout_() {
+    if (this.state !== 'HAVE_METADATA') {
+      // only refresh the media playlist if no other activity is going on
+      return;
+    }
+    const media = this.media();
+    let uri = resolveUrl(this.main.uri, media.uri);
+    if (this.llhls) {
+      uri = addLLHLSQueryDirectives(uri, media);
+    }
+    this.state = 'HAVE_CURRENT_METADATA';
+    this.request = this.vhs_.xhr({
+      uri,
+      withCredentials: this.withCredentials,
+      requestType: 'hls-playlist'
+    }, (error, req) => {
+      // disposed
+      if (!this.request) {
+        return;
+      }
+      if (error) {
+        return this.playlistRequestError(this.request, this.media(), 'HAVE_METADATA');
+      }
+      this.haveMetadata({
+        playlistString: this.request.responseText,
+        url: this.media().uri,
+        id: this.media().id
+      });
+    });
+  }
+  playlistRequestError(xhr, playlist, startingState) {
+    const {
+      uri,
+      id
+    } = playlist; // any in-flight request is now finished
+
+    this.request = null;
+    if (startingState) {
+      this.state = startingState;
+    }
+    this.error = {
+      playlist: this.main.playlists[id],
+      status: xhr.status,
+      message: `HLS playlist request error at URL: ${uri}.`,
+      responseText: xhr.responseText,
+      code: xhr.status >= 500 ? 4 : 2,
+      metadata: {
+        errorType: videojs.Error.HlsPlaylistRequestError
+      }
+    };
+    this.trigger('error');
+  }
+  parseManifest_({
+    url,
+    manifestString
+  }) {
+    return parseManifest({
+      onwarn: ({
+        message
+      }) => this.logger_(`m3u8-parser warn for ${url}: ${message}`),
+      oninfo: ({
+        message
+      }) => this.logger_(`m3u8-parser info for ${url}: ${message}`),
+      manifestString,
+      customTagParsers: this.customTagParsers,
+      customTagMappers: this.customTagMappers,
+      llhls: this.llhls
+    });
+  }
+  /**
+   * Update the playlist loader's state in response to a new or updated playlist.
+   *
+   * @param {string} [playlistString]
+   *        Playlist string (if playlistObject is not provided)
+   * @param {Object} [playlistObject]
+   *        Playlist object (if playlistString is not provided)
+   * @param {string} url
+   *        URL of playlist
+   * @param {string} id
+   *        ID to use for playlist
+   */
+
+  haveMetadata({
+    playlistString,
+    playlistObject,
+    url,
+    id
+  }) {
+    // any in-flight request is now finished
+    this.request = null;
+    this.state = 'HAVE_METADATA';
+    const playlist = playlistObject || this.parseManifest_({
+      url,
+      manifestString: playlistString
+    });
+    playlist.lastRequest = Date.now();
+    setupMediaPlaylist({
+      playlist,
+      uri: url,
+      id
+    }); // merge this playlist into the main manifest
+
+    const update = updateMain$1(this.main, playlist);
+    this.targetDuration = playlist.partTargetDuration || playlist.targetDuration;
+    this.pendingMedia_ = null;
+    if (update) {
+      this.main = update;
+      this.media_ = this.main.playlists[id];
+    } else {
+      this.trigger('playlistunchanged');
+    }
+    this.updateMediaUpdateTimeout_(refreshDelay(this.media(), !!update));
+    this.trigger('loadedplaylist');
+  }
+  /**
+    * Abort any outstanding work and clean up.
+    */
+
+  dispose() {
+    this.trigger('dispose');
+    this.stopRequest();
+    window$1.clearTimeout(this.mediaUpdateTimeout);
+    window$1.clearTimeout(this.finalRenditionTimeout);
+    this.dateRangesStorage_ = new DateRangesStorage();
+    this.off();
+  }
+  stopRequest() {
+    if (this.request) {
+      const oldRequest = this.request;
+      this.request = null;
+      oldRequest.onreadystatechange = null;
+      oldRequest.abort();
+    }
+  }
+  /**
+    * When called without any arguments, returns the currently
+    * active media playlist. When called with a single argument,
+    * triggers the playlist loader to asynchronously switch to the
+    * specified media playlist. Calling this method while the
+    * loader is in the HAVE_NOTHING causes an error to be emitted
+    * but otherwise has no effect.
+    *
+    * @param {Object=} playlist the parsed media playlist
+    * object to switch to
+    * @param {boolean=} shouldDelay whether we should delay the request by half target duration
+    *
+    * @return {Playlist} the current loaded media
+    */
+
+  media(playlist, shouldDelay) {
+    // getter
+    if (!playlist) {
+      return this.media_;
+    } // setter
+
+    if (this.state === 'HAVE_NOTHING') {
+      throw new Error('Cannot switch media playlist from ' + this.state);
+    } // find the playlist object if the target playlist has been
+    // specified by URI
+
+    if (typeof playlist === 'string') {
+      if (!this.main.playlists[playlist]) {
+        throw new Error('Unknown playlist URI: ' + playlist);
+      }
+      playlist = this.main.playlists[playlist];
+    }
+    window$1.clearTimeout(this.finalRenditionTimeout);
+    if (shouldDelay) {
+      const delay = (playlist.partTargetDuration || playlist.targetDuration) / 2 * 1000 || 5 * 1000;
+      this.finalRenditionTimeout = window$1.setTimeout(this.media.bind(this, playlist, false), delay);
+      return;
+    }
+    const startingState = this.state;
+    const mediaChange = !this.media_ || playlist.id !== this.media_.id;
+    const mainPlaylistRef = this.main.playlists[playlist.id]; // switch to fully loaded playlists immediately
+
+    if (mainPlaylistRef && mainPlaylistRef.endList ||
+    // handle the case of a playlist object (e.g., if using vhs-json with a resolved
+    // media playlist or, for the case of demuxed audio, a resolved audio media group)
+    playlist.endList && playlist.segments.length) {
+      // abort outstanding playlist requests
+      if (this.request) {
+        this.request.onreadystatechange = null;
+        this.request.abort();
+        this.request = null;
+      }
+      this.state = 'HAVE_METADATA';
+      this.media_ = playlist; // trigger media change if the active media has been updated
+
+      if (mediaChange) {
+        this.trigger('mediachanging');
+        if (startingState === 'HAVE_MAIN_MANIFEST') {
+          // The initial playlist was a main manifest, and the first media selected was
+          // also provided (in the form of a resolved playlist object) as part of the
+          // source object (rather than just a URL). Therefore, since the media playlist
+          // doesn't need to be requested, loadedmetadata won't trigger as part of the
+          // normal flow, and needs an explicit trigger here.
+          this.trigger('loadedmetadata');
+        } else {
+          this.trigger('mediachange');
+        }
+      }
+      return;
+    } // We update/set the timeout here so that live playlists
+    // that are not a media change will "start" the loader as expected.
+    // We expect that this function will start the media update timeout
+    // cycle again. This also prevents a playlist switch failure from
+    // causing us to stall during live.
+
+    this.updateMediaUpdateTimeout_(refreshDelay(playlist, true)); // switching to the active playlist is a no-op
+
+    if (!mediaChange) {
+      return;
+    }
+    this.state = 'SWITCHING_MEDIA'; // there is already an outstanding playlist request
+
+    if (this.request) {
+      if (playlist.resolvedUri === this.request.url) {
+        // requesting to switch to the same playlist multiple times
+        // has no effect after the first
+        return;
+      }
+      this.request.onreadystatechange = null;
+      this.request.abort();
+      this.request = null;
+    } // request the new playlist
+
+    if (this.media_) {
+      this.trigger('mediachanging');
+    }
+    this.pendingMedia_ = playlist;
+    this.request = this.vhs_.xhr({
+      uri: playlist.resolvedUri,
+      withCredentials: this.withCredentials,
+      requestType: 'hls-playlist'
+    }, (error, req) => {
+      // disposed
+      if (!this.request) {
+        return;
+      }
+      playlist.lastRequest = Date.now();
+      playlist.resolvedUri = resolveManifestRedirect(playlist.resolvedUri, req);
+      if (error) {
+        return this.playlistRequestError(this.request, playlist, startingState);
+      }
+      this.haveMetadata({
+        playlistString: req.responseText,
+        url: playlist.uri,
+        id: playlist.id
+      }); // fire loadedmetadata the first time a media playlist is loaded
+
+      if (startingState === 'HAVE_MAIN_MANIFEST') {
+        this.trigger('loadedmetadata');
+      } else {
+        this.trigger('mediachange');
+      }
+    });
+  }
+  /**
+   * pause loading of the playlist
+   */
+
+  pause() {
+    if (this.mediaUpdateTimeout) {
+      window$1.clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+    }
+    this.stopRequest();
+    if (this.state === 'HAVE_NOTHING') {
+      // If we pause the loader before any data has been retrieved, its as if we never
+      // started, so reset to an unstarted state.
+      this.started = false;
+    } // Need to restore state now that no activity is happening
+
+    if (this.state === 'SWITCHING_MEDIA') {
+      // if the loader was in the process of switching media, it should either return to
+      // HAVE_MAIN_MANIFEST or HAVE_METADATA depending on if the loader has loaded a media
+      // playlist yet. This is determined by the existence of loader.media_
+      if (this.media_) {
+        this.state = 'HAVE_METADATA';
+      } else {
+        this.state = 'HAVE_MAIN_MANIFEST';
+      }
+    } else if (this.state === 'HAVE_CURRENT_METADATA') {
+      this.state = 'HAVE_METADATA';
+    }
+  }
+  /**
+   * start loading of the playlist
+   */
+
+  load(shouldDelay) {
+    if (this.mediaUpdateTimeout) {
+      window$1.clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+    }
+    const media = this.media();
+    if (shouldDelay) {
+      const delay = media ? (media.partTargetDuration || media.targetDuration) / 2 * 1000 : 5 * 1000;
+      this.mediaUpdateTimeout = window$1.setTimeout(() => {
+        this.mediaUpdateTimeout = null;
+        this.load();
+      }, delay);
+      return;
+    }
+    if (!this.started) {
+      this.start();
+      return;
+    }
+    if (media && !media.endList) {
+      this.trigger('mediaupdatetimeout');
+    } else {
+      this.trigger('loadedplaylist');
+    }
+  }
+  updateMediaUpdateTimeout_(delay) {
+    if (this.mediaUpdateTimeout) {
+      window$1.clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+    } // we only have use mediaupdatetimeout for live playlists.
+
+    if (!this.media() || this.media().endList) {
+      return;
+    }
+    this.mediaUpdateTimeout = window$1.setTimeout(() => {
+      this.mediaUpdateTimeout = null;
+      this.trigger('mediaupdatetimeout');
+      this.updateMediaUpdateTimeout_(delay);
+    }, delay);
+  }
+  /**
+   * start loading of the playlist
+   */
+
+  start() {
+    this.started = true;
+    if (typeof this.src === 'object') {
+      // in the case of an entirely constructed manifest object (meaning there's no actual
+      // manifest on a server), default the uri to the page's href
+      if (!this.src.uri) {
+        this.src.uri = window$1.location.href;
+      } // resolvedUri is added on internally after the initial request. Since there's no
+      // request for pre-resolved manifests, add on resolvedUri here.
+
+      this.src.resolvedUri = this.src.uri; // Since a manifest object was passed in as the source (instead of a URL), the first
+      // request can be skipped (since the top level of the manifest, at a minimum, is
+      // already available as a parsed manifest object). However, if the manifest object
+      // represents a main playlist, some media playlists may need to be resolved before
+      // the starting segment list is available. Therefore, go directly to setup of the
+      // initial playlist, and let the normal flow continue from there.
+      //
+      // Note that the call to setup is asynchronous, as other sections of VHS may assume
+      // that the first request is asynchronous.
+
+      setTimeout(() => {
+        this.setupInitialPlaylist(this.src);
+      }, 0);
+      return;
+    } // request the specified URL
+
+    this.request = this.vhs_.xhr({
+      uri: this.src,
+      withCredentials: this.withCredentials,
+      requestType: 'hls-playlist'
+    }, (error, req) => {
+      // disposed
+      if (!this.request) {
+        return;
+      } // clear the loader's request reference
+
+      this.request = null;
+      if (error) {
+        this.error = {
+          status: req.status,
+          message: `HLS playlist request error at URL: ${this.src}.`,
+          responseText: req.responseText,
+          // MEDIA_ERR_NETWORK
+          code: 2,
+          metadata: {
+            errorType: videojs.Error.HlsPlaylistRequestError
+          }
+        };
+        if (this.state === 'HAVE_NOTHING') {
+          this.started = false;
+        }
+        return this.trigger('error');
+      }
+      this.src = resolveManifestRedirect(this.src, req);
+      const manifest = this.parseManifest_({
+        manifestString: req.responseText,
+        url: this.src
+      });
+      this.setupInitialPlaylist(manifest);
+    });
+  }
+  srcUri() {
+    return typeof this.src === 'string' ? this.src : this.src.uri;
+  }
+  /**
+   * Given a manifest object that's either a main or media playlist, trigger the proper
+   * events and set the state of the playlist loader.
+   *
+   * If the manifest object represents a main playlist, `loadedplaylist` will be
+   * triggered to allow listeners to select a playlist. If none is selected, the loader
+   * will default to the first one in the playlists array.
+   *
+   * If the manifest object represents a media playlist, `loadedplaylist` will be
+   * triggered followed by `loadedmetadata`, as the only available playlist is loaded.
+   *
+   * In the case of a media playlist, a main playlist object wrapper with one playlist
+   * will be created so that all logic can handle playlists in the same fashion (as an
+   * assumed manifest object schema).
+   *
+   * @param {Object} manifest
+   *        The parsed manifest object
+   */
+
+  setupInitialPlaylist(manifest) {
+    this.state = 'HAVE_MAIN_MANIFEST';
+    if (manifest.playlists) {
+      this.main = manifest;
+      addPropertiesToMain(this.main, this.srcUri()); // If the initial main playlist has playlists wtih segments already resolved,
+      // then resolve URIs in advance, as they are usually done after a playlist request,
+      // which may not happen if the playlist is resolved.
+
+      manifest.playlists.forEach(playlist => {
+        playlist.segments = getAllSegments(playlist);
+        playlist.segments.forEach(segment => {
+          resolveSegmentUris(segment, playlist.resolvedUri);
+        });
+      });
+      this.trigger('loadedplaylist');
+      if (!this.request) {
+        // no media playlist was specifically selected so start
+        // from the first listed one
+        this.media(this.main.playlists[0]);
+      }
+      return;
+    } // In order to support media playlists passed in as vhs-json, the case where the uri
+    // is not provided as part of the manifest should be considered, and an appropriate
+    // default used.
+
+    const uri = this.srcUri() || window$1.location.href;
+    this.main = mainForMedia(manifest, uri);
+    this.haveMetadata({
+      playlistObject: manifest,
+      url: uri,
+      id: this.main.playlists[0].id
+    });
+    this.trigger('loadedmetadata');
+  }
+  /**
+   * Updates or deletes a preexisting pathway clone.
+   * Ensures that all playlists related to the old pathway clone are
+   * either updated or deleted.
+   *
+   * @param {Object} clone On update, the pathway clone object for the newly updated pathway clone.
+   *        On delete, the old pathway clone object to be deleted.
+   * @param {boolean} isUpdate True if the pathway is to be updated,
+   *        false if it is meant to be deleted.
+   */
+
+  updateOrDeleteClone(clone, isUpdate) {
+    const main = this.main;
+    const pathway = clone.ID;
+    let i = main.playlists.length; // Iterate backwards through the playlist so we can remove playlists if necessary.
+
+    while (i--) {
+      const p = main.playlists[i];
+      if (p.attributes['PATHWAY-ID'] === pathway) {
+        const oldPlaylistUri = p.resolvedUri;
+        const oldPlaylistId = p.id; // update the indexed playlist and add new playlists by ID and URI
+
+        if (isUpdate) {
+          const newPlaylistUri = this.createCloneURI_(p.resolvedUri, clone);
+          const newPlaylistId = createPlaylistID(pathway, newPlaylistUri);
+          const attributes = this.createCloneAttributes_(pathway, p.attributes);
+          const updatedPlaylist = this.createClonePlaylist_(p, newPlaylistId, clone, attributes);
+          main.playlists[i] = updatedPlaylist;
+          main.playlists[newPlaylistId] = updatedPlaylist;
+          main.playlists[newPlaylistUri] = updatedPlaylist;
+        } else {
+          // Remove the indexed playlist.
+          main.playlists.splice(i, 1);
+        } // Remove playlists by the old ID and URI.
+
+        delete main.playlists[oldPlaylistId];
+        delete main.playlists[oldPlaylistUri];
+      }
+    }
+    this.updateOrDeleteCloneMedia(clone, isUpdate);
+  }
+  /**
+   * Updates or deletes media data based on the pathway clone object.
+   * Due to the complexity of the media groups and playlists, in all cases
+   * we remove all of the old media groups and playlists.
+   * On updates, we then create new media groups and playlists based on the
+   * new pathway clone object.
+   *
+   * @param {Object} clone The pathway clone object for the newly updated pathway clone.
+   * @param {boolean} isUpdate True if the pathway is to be updated,
+   *        false if it is meant to be deleted.
+   */
+
+  updateOrDeleteCloneMedia(clone, isUpdate) {
+    const main = this.main;
+    const id = clone.ID;
+    ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+      if (!main.mediaGroups[mediaType] || !main.mediaGroups[mediaType][id]) {
+        return;
+      }
+      for (const groupKey in main.mediaGroups[mediaType]) {
+        // Remove all media playlists for the media group for this pathway clone.
+        if (groupKey === id) {
+          for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+            const oldMedia = main.mediaGroups[mediaType][groupKey][labelKey];
+            oldMedia.playlists.forEach((p, i) => {
+              const oldMediaPlaylist = main.playlists[p.id];
+              const oldPlaylistId = oldMediaPlaylist.id;
+              const oldPlaylistUri = oldMediaPlaylist.resolvedUri;
+              delete main.playlists[oldPlaylistId];
+              delete main.playlists[oldPlaylistUri];
+            });
+          } // Delete the old media group.
+
+          delete main.mediaGroups[mediaType][groupKey];
+        }
+      }
+    }); // Create the new media groups and playlists if there is an update.
+
+    if (isUpdate) {
+      this.createClonedMediaGroups_(clone);
+    }
+  }
+  /**
+   * Given a pathway clone object, clones all necessary playlists.
+   *
+   * @param {Object} clone The pathway clone object.
+   * @param {Object} basePlaylist The original playlist to clone from.
+   */
+
+  addClonePathway(clone, basePlaylist = {}) {
+    const main = this.main;
+    const index = main.playlists.length;
+    const uri = this.createCloneURI_(basePlaylist.resolvedUri, clone);
+    const playlistId = createPlaylistID(clone.ID, uri);
+    const attributes = this.createCloneAttributes_(clone.ID, basePlaylist.attributes);
+    const playlist = this.createClonePlaylist_(basePlaylist, playlistId, clone, attributes);
+    main.playlists[index] = playlist; // add playlist by ID and URI
+
+    main.playlists[playlistId] = playlist;
+    main.playlists[uri] = playlist;
+    this.createClonedMediaGroups_(clone);
+  }
+  /**
+   * Given a pathway clone object we create clones of all media.
+   * In this function, all necessary information and updated playlists
+   * are added to the `mediaGroup` object.
+   * Playlists are also added to the `playlists` array so the media groups
+   * will be properly linked.
+   *
+   * @param {Object} clone The pathway clone object.
+   */
+
+  createClonedMediaGroups_(clone) {
+    const id = clone.ID;
+    const baseID = clone['BASE-ID'];
+    const main = this.main;
+    ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+      // If the media type doesn't exist, or there is already a clone, skip
+      // to the next media type.
+      if (!main.mediaGroups[mediaType] || main.mediaGroups[mediaType][id]) {
+        return;
+      }
+      for (const groupKey in main.mediaGroups[mediaType]) {
+        if (groupKey === baseID) {
+          // Create the group.
+          main.mediaGroups[mediaType][id] = {};
+        } else {
+          // There is no need to iterate over label keys in this case.
+          continue;
+        }
+        for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+          const oldMedia = main.mediaGroups[mediaType][groupKey][labelKey];
+          main.mediaGroups[mediaType][id][labelKey] = _extends({}, oldMedia);
+          const newMedia = main.mediaGroups[mediaType][id][labelKey]; // update URIs on the media
+
+          const newUri = this.createCloneURI_(oldMedia.resolvedUri, clone);
+          newMedia.resolvedUri = newUri;
+          newMedia.uri = newUri; // Reset playlists in the new media group.
+
+          newMedia.playlists = []; // Create new playlists in the newly cloned media group.
+
+          oldMedia.playlists.forEach((p, i) => {
+            const oldMediaPlaylist = main.playlists[p.id];
+            const group = groupID(mediaType, id, labelKey);
+            const newPlaylistID = createPlaylistID(id, group); // Check to see if it already exists
+
+            if (oldMediaPlaylist && !main.playlists[newPlaylistID]) {
+              const newMediaPlaylist = this.createClonePlaylist_(oldMediaPlaylist, newPlaylistID, clone);
+              const newPlaylistUri = newMediaPlaylist.resolvedUri;
+              main.playlists[newPlaylistID] = newMediaPlaylist;
+              main.playlists[newPlaylistUri] = newMediaPlaylist;
+            }
+            newMedia.playlists[i] = this.createClonePlaylist_(p, newPlaylistID, clone);
+          });
+        }
+      }
+    });
+  }
+  /**
+   * Using the original playlist to be cloned, and the pathway clone object
+   * information, we create a new playlist.
+   *
+   * @param {Object} basePlaylist  The original playlist to be cloned from.
+   * @param {string} id The desired id of the newly cloned playlist.
+   * @param {Object} clone The pathway clone object.
+   * @param {Object} attributes An optional object to populate the `attributes` property in the playlist.
+   *
+   * @return {Object} The combined cloned playlist.
+   */
+
+  createClonePlaylist_(basePlaylist, id, clone, attributes) {
+    const uri = this.createCloneURI_(basePlaylist.resolvedUri, clone);
+    const newProps = {
+      resolvedUri: uri,
+      uri,
+      id
+    }; // Remove all segments from previous playlist in the clone.
+
+    if (basePlaylist.segments) {
+      newProps.segments = [];
+    }
+    if (attributes) {
+      newProps.attributes = attributes;
+    }
+    return merge(basePlaylist, newProps);
+  }
+  /**
+   * Generates an updated URI for a cloned pathway based on the original
+   * pathway's URI and the paramaters from the pathway clone object in the
+   * content steering server response.
+   *
+   * @param {string} baseUri URI to be updated in the cloned pathway.
+   * @param {Object} clone The pathway clone object.
+   *
+   * @return {string} The updated URI for the cloned pathway.
+   */
+
+  createCloneURI_(baseURI, clone) {
+    const uri = new URL(baseURI);
+    uri.hostname = clone['URI-REPLACEMENT'].HOST;
+    const params = clone['URI-REPLACEMENT'].PARAMS; // Add params to the cloned URL.
+
+    for (const key of Object.keys(params)) {
+      uri.searchParams.set(key, params[key]);
+    }
+    return uri.href;
+  }
+  /**
+   * Helper function to create the attributes needed for the new clone.
+   * This mainly adds the necessary media attributes.
+   *
+   * @param {string} id The pathway clone object ID.
+   * @param {Object} oldAttributes The old attributes to compare to.
+   * @return {Object} The new attributes to add to the playlist.
+   */
+
+  createCloneAttributes_(id, oldAttributes) {
+    const attributes = {
+      ['PATHWAY-ID']: id
+    };
+    ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+      if (oldAttributes[mediaType]) {
+        attributes[mediaType] = id;
+      }
+    });
+    return attributes;
+  }
+  /**
+   * Returns the key ID set from a playlist
+   *
+   * @param {playlist} playlist to fetch the key ID set from.
+   * @return a Set of 32 digit hex strings that represent the unique keyIds for that playlist.
+   */
+
+  getKeyIdSet(playlist) {
+    if (playlist.contentProtection) {
+      const keyIds = new Set();
+      for (const keysystem in playlist.contentProtection) {
+        const keyId = playlist.contentProtection[keysystem].attributes.keyId;
+        if (keyId) {
+          keyIds.add(keyId.toLowerCase());
+        }
+      }
+      return keyIds;
+    }
+  }
+}
+
+/**
+ * @file xhr.js
+ */
+
+const callbackWrapper = function (request, error, response, callback) {
+  const reqResponse = request.responseType === 'arraybuffer' ? request.response : request.responseText;
+  if (!error && reqResponse) {
+    request.responseTime = Date.now();
+    request.roundTripTime = request.responseTime - request.requestTime;
+    request.bytesReceived = reqResponse.byteLength || reqResponse.length;
+    if (!request.bandwidth) {
+      request.bandwidth = Math.floor(request.bytesReceived / request.roundTripTime * 8 * 1000);
+    }
+  }
+  if (response.headers) {
+    request.responseHeaders = response.headers;
+  } // videojs.xhr now uses a specific code on the error
+  // object to signal that a request has timed out instead
+  // of setting a boolean on the request object
+
+  if (error && error.code === 'ETIMEDOUT') {
+    request.timedout = true;
+  } // videojs.xhr no longer considers status codes outside of 200 and 0
+  // (for file uris) to be errors, but the old XHR did, so emulate that
+  // behavior. Status 206 may be used in response to byterange requests.
+
+  if (!error && !request.aborted && response.statusCode !== 200 && response.statusCode !== 206 && response.statusCode !== 0) {
+    error = new Error('XHR Failed with a response of: ' + (request && (reqResponse || request.responseText)));
+  }
+  callback(error, request);
+};
+/**
+ * Iterates over the request hooks Set and calls them in order
+ *
+ * @param {Set} hooks the hook Set to iterate over
+ * @param {Object} options the request options to pass to the xhr wrapper
+ * @return the callback hook function return value, the modified or new options Object.
+ */
+
+const callAllRequestHooks = (requestSet, options) => {
+  if (!requestSet || !requestSet.size) {
+    return;
+  }
+  let newOptions = options;
+  requestSet.forEach(requestCallback => {
+    newOptions = requestCallback(newOptions);
+  });
+  return newOptions;
+};
+/**
+ * Iterates over the response hooks Set and calls them in order.
+ *
+ * @param {Set} hooks the hook Set to iterate over
+ * @param {Object} request the xhr request object
+ * @param {Object} error the xhr error object
+ * @param {Object} response the xhr response object
+ */
+
+const callAllResponseHooks = (responseSet, request, error, response) => {
+  if (!responseSet || !responseSet.size) {
+    return;
+  }
+  responseSet.forEach(responseCallback => {
+    responseCallback(request, error, response);
+  });
+};
+const xhrFactory = function () {
+  const xhr = function XhrFunction(options, callback) {
+    // Add a default timeout
+    options = merge({
+      timeout: 45e3
+    }, options); // Allow an optional user-specified function to modify the option
+    // object before we construct the xhr request
+    // TODO: Remove beforeRequest in the next major release.
+
+    const beforeRequest = XhrFunction.beforeRequest || videojs.Vhs.xhr.beforeRequest; // onRequest and onResponse hooks as a Set, at either the player or global level.
+    // TODO: new Set added here for beforeRequest alias. Remove this when beforeRequest is removed.
+
+    const _requestCallbackSet = XhrFunction._requestCallbackSet || videojs.Vhs.xhr._requestCallbackSet || new Set();
+    const _responseCallbackSet = XhrFunction._responseCallbackSet || videojs.Vhs.xhr._responseCallbackSet;
+    if (beforeRequest && typeof beforeRequest === 'function') {
+      videojs.log.warn('beforeRequest is deprecated, use onRequest instead.');
+      _requestCallbackSet.add(beforeRequest);
+    } // Use the standard videojs.xhr() method unless `videojs.Vhs.xhr` has been overriden
+    // TODO: switch back to videojs.Vhs.xhr.name === 'XhrFunction' when we drop IE11
+
+    const xhrMethod = videojs.Vhs.xhr.original === true ? videojs.xhr : videojs.Vhs.xhr; // call all registered onRequest hooks, assign new options.
+
+    const beforeRequestOptions = callAllRequestHooks(_requestCallbackSet, options); // Remove the beforeRequest function from the hooks set so stale beforeRequest functions are not called.
+
+    _requestCallbackSet.delete(beforeRequest); // xhrMethod will call XMLHttpRequest.open and XMLHttpRequest.send
+
+    const request = xhrMethod(beforeRequestOptions || options, function (error, response) {
+      // call all registered onResponse hooks
+      callAllResponseHooks(_responseCallbackSet, request, error, response);
+      return callbackWrapper(request, error, response, callback);
+    });
+    const originalAbort = request.abort;
+    request.abort = function () {
+      request.aborted = true;
+      return originalAbort.apply(request, arguments);
+    };
+    request.uri = options.uri;
+    request.requestTime = Date.now();
+    return request;
+  };
+  xhr.original = true;
+  return xhr;
+};
+/**
+ * Turns segment byterange into a string suitable for use in
+ * HTTP Range requests
+ *
+ * @param {Object} byterange - an object with two values defining the start and end
+ *                             of a byte-range
+ */
+
+const byterangeStr = function (byterange) {
+  // `byterangeEnd` is one less than `offset + length` because the HTTP range
+  // header uses inclusive ranges
+  let byterangeEnd;
+  const byterangeStart = byterange.offset;
+  if (typeof byterange.offset === 'bigint' || typeof byterange.length === 'bigint') {
+    byterangeEnd = window$1.BigInt(byterange.offset) + window$1.BigInt(byterange.length) - window$1.BigInt(1);
+  } else {
+    byterangeEnd = byterange.offset + byterange.length - 1;
+  }
+  return 'bytes=' + byterangeStart + '-' + byterangeEnd;
+};
+/**
+ * Defines headers for use in the xhr request for a particular segment.
+ *
+ * @param {Object} segment - a simplified copy of the segmentInfo object
+ *                           from SegmentLoader
+ */
+
+const segmentXhrHeaders = function (segment) {
+  const headers = {};
+  if (segment.byterange) {
+    headers.Range = byterangeStr(segment.byterange);
+  }
+  return headers;
+};
+
+/**
+ * @file bin-utils.js
+ */
+
+/**
+ * convert a TimeRange to text
+ *
+ * @param {TimeRange} range the timerange to use for conversion
+ * @param {number} i the iterator on the range to convert
+ * @return {string} the range in string format
+ */
+
+const textRange = function (range, i) {
+  return range.start(i) + '-' + range.end(i);
+};
+/**
+ * format a number as hex string
+ *
+ * @param {number} e The number
+ * @param {number} i the iterator
+ * @return {string} the hex formatted number as a string
+ */
+
+const formatHexString = function (e, i) {
+  const value = e.toString(16);
+  return '00'.substring(0, 2 - value.length) + value + (i % 2 ? ' ' : '');
+};
+const formatAsciiString = function (e) {
+  if (e >= 0x20 && e < 0x7e) {
+    return String.fromCharCode(e);
+  }
+  return '.';
+};
+/**
+ * Creates an object for sending to a web worker modifying properties that are TypedArrays
+ * into a new object with seperated properties for the buffer, byteOffset, and byteLength.
+ *
+ * @param {Object} message
+ *        Object of properties and values to send to the web worker
+ * @return {Object}
+ *         Modified message with TypedArray values expanded
+ * @function createTransferableMessage
+ */
+
+const createTransferableMessage = function (message) {
+  const transferable = {};
+  Object.keys(message).forEach(key => {
+    const value = message[key];
+    if (isArrayBufferView(value)) {
+      transferable[key] = {
+        bytes: value.buffer,
+        byteOffset: value.byteOffset,
+        byteLength: value.byteLength
+      };
+    } else {
+      transferable[key] = value;
+    }
+  });
+  return transferable;
+};
+/**
+ * Returns a unique string identifier for a media initialization
+ * segment.
+ *
+ * @param {Object} initSegment
+ *        the init segment object.
+ *
+ * @return {string} the generated init segment id
+ */
+
+const initSegmentId = function (initSegment) {
+  const byterange = initSegment.byterange || {
+    length: Infinity,
+    offset: 0
+  };
+  return [byterange.length, byterange.offset, initSegment.resolvedUri].join(',');
+};
+/**
+ * Returns a unique string identifier for a media segment key.
+ *
+ * @param {Object} key the encryption key
+ * @return {string} the unique id for the media segment key.
+ */
+
+const segmentKeyId = function (key) {
+  return key.resolvedUri;
+};
+/**
+ * utils to help dump binary data to the console
+ *
+ * @param {Array|TypedArray} data
+ *        data to dump to a string
+ *
+ * @return {string} the data as a hex string.
+ */
+
+const hexDump = data => {
+  const bytes = Array.prototype.slice.call(data);
+  const step = 16;
+  let result = '';
+  let hex;
+  let ascii;
+  for (let j = 0; j < bytes.length / step; j++) {
+    hex = bytes.slice(j * step, j * step + step).map(formatHexString).join('');
+    ascii = bytes.slice(j * step, j * step + step).map(formatAsciiString).join('');
+    result += hex + ' ' + ascii + '\n';
+  }
+  return result;
+};
+const tagDump = ({
+  bytes
+}) => hexDump(bytes);
+const textRanges = ranges => {
+  let result = '';
+  let i;
+  for (i = 0; i < ranges.length; i++) {
+    result += textRange(ranges, i) + ' ';
+  }
+  return result;
+};
+var utils = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  createTransferableMessage: createTransferableMessage,
+  initSegmentId: initSegmentId,
+  segmentKeyId: segmentKeyId,
+  hexDump: hexDump,
+  tagDump: tagDump,
+  textRanges: textRanges
+});
+
+// TODO handle fmp4 case where the timing info is accurate and doesn't involve transmux
+// 25% was arbitrarily chosen, and may need to be refined over time.
+
+const SEGMENT_END_FUDGE_PERCENT = 0.25;
+/**
+ * Converts a player time (any time that can be gotten/set from player.currentTime(),
+ * e.g., any time within player.seekable().start(0) to player.seekable().end(0)) to a
+ * program time (any time referencing the real world (e.g., EXT-X-PROGRAM-DATE-TIME)).
+ *
+ * The containing segment is required as the EXT-X-PROGRAM-DATE-TIME serves as an "anchor
+ * point" (a point where we have a mapping from program time to player time, with player
+ * time being the post transmux start of the segment).
+ *
+ * For more details, see [this doc](../../docs/program-time-from-player-time.md).
+ *
+ * @param {number} playerTime the player time
+ * @param {Object} segment the segment which contains the player time
+ * @return {Date} program time
+ */
+
+const playerTimeToProgramTime = (playerTime, segment) => {
+  if (!segment.dateTimeObject) {
+    // Can't convert without an "anchor point" for the program time (i.e., a time that can
+    // be used to map the start of a segment with a real world time).
+    return null;
+  }
+  const transmuxerPrependedSeconds = segment.videoTimingInfo.transmuxerPrependedSeconds;
+  const transmuxedStart = segment.videoTimingInfo.transmuxedPresentationStart; // get the start of the content from before old content is prepended
+
+  const startOfSegment = transmuxedStart + transmuxerPrependedSeconds;
+  const offsetFromSegmentStart = playerTime - startOfSegment;
+  return new Date(segment.dateTimeObject.getTime() + offsetFromSegmentStart * 1000);
+};
+const originalSegmentVideoDuration = videoTimingInfo => {
+  return videoTimingInfo.transmuxedPresentationEnd - videoTimingInfo.transmuxedPresentationStart - videoTimingInfo.transmuxerPrependedSeconds;
+};
+/**
+ * Finds a segment that contains the time requested given as an ISO-8601 string. The
+ * returned segment might be an estimate or an accurate match.
+ *
+ * @param {string} programTime The ISO-8601 programTime to find a match for
+ * @param {Object} playlist A playlist object to search within
+ */
+
+const findSegmentForProgramTime = (programTime, playlist) => {
+  // Assumptions:
+  //  - verifyProgramDateTimeTags has already been run
+  //  - live streams have been started
+  let dateTimeObject;
+  try {
+    dateTimeObject = new Date(programTime);
+  } catch (e) {
+    return null;
+  }
+  if (!playlist || !playlist.segments || playlist.segments.length === 0) {
+    return null;
+  }
+  let segment = playlist.segments[0];
+  if (dateTimeObject < new Date(segment.dateTimeObject)) {
+    // Requested time is before stream start.
+    return null;
+  }
+  for (let i = 0; i < playlist.segments.length - 1; i++) {
+    segment = playlist.segments[i];
+    const nextSegmentStart = new Date(playlist.segments[i + 1].dateTimeObject);
+    if (dateTimeObject < nextSegmentStart) {
+      break;
+    }
+  }
+  const lastSegment = playlist.segments[playlist.segments.length - 1];
+  const lastSegmentStart = lastSegment.dateTimeObject;
+  const lastSegmentDuration = lastSegment.videoTimingInfo ? originalSegmentVideoDuration(lastSegment.videoTimingInfo) : lastSegment.duration + lastSegment.duration * SEGMENT_END_FUDGE_PERCENT;
+  const lastSegmentEnd = new Date(lastSegmentStart.getTime() + lastSegmentDuration * 1000);
+  if (dateTimeObject > lastSegmentEnd) {
+    // Beyond the end of the stream, or our best guess of the end of the stream.
+    return null;
+  }
+  if (dateTimeObject > new Date(lastSegmentStart)) {
+    segment = lastSegment;
+  }
+  return {
+    segment,
+    estimatedStart: segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationStart : Playlist.duration(playlist, playlist.mediaSequence + playlist.segments.indexOf(segment)),
+    // Although, given that all segments have accurate date time objects, the segment
+    // selected should be accurate, unless the video has been transmuxed at some point
+    // (determined by the presence of the videoTimingInfo object), the segment's "player
+    // time" (the start time in the player) can't be considered accurate.
+    type: segment.videoTimingInfo ? 'accurate' : 'estimate'
+  };
+};
+/**
+ * Finds a segment that contains the given player time(in seconds).
+ *
+ * @param {number} time The player time to find a match for
+ * @param {Object} playlist A playlist object to search within
+ */
+
+const findSegmentForPlayerTime = (time, playlist) => {
+  // Assumptions:
+  // - there will always be a segment.duration
+  // - we can start from zero
+  // - segments are in time order
+  if (!playlist || !playlist.segments || playlist.segments.length === 0) {
+    return null;
+  }
+  let segmentEnd = 0;
+  let segment;
+  for (let i = 0; i < playlist.segments.length; i++) {
+    segment = playlist.segments[i]; // videoTimingInfo is set after the segment is downloaded and transmuxed, and
+    // should contain the most accurate values we have for the segment's player times.
+    //
+    // Use the accurate transmuxedPresentationEnd value if it is available, otherwise fall
+    // back to an estimate based on the manifest derived (inaccurate) segment.duration, to
+    // calculate an end value.
+
+    segmentEnd = segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationEnd : segmentEnd + segment.duration;
+    if (time <= segmentEnd) {
+      break;
+    }
+  }
+  const lastSegment = playlist.segments[playlist.segments.length - 1];
+  if (lastSegment.videoTimingInfo && lastSegment.videoTimingInfo.transmuxedPresentationEnd < time) {
+    // The time requested is beyond the stream end.
+    return null;
+  }
+  if (time > segmentEnd) {
+    // The time is within or beyond the last segment.
+    //
+    // Check to see if the time is beyond a reasonable guess of the end of the stream.
+    if (time > segmentEnd + lastSegment.duration * SEGMENT_END_FUDGE_PERCENT) {
+      // Technically, because the duration value is only an estimate, the time may still
+      // exist in the last segment, however, there isn't enough information to make even
+      // a reasonable estimate.
+      return null;
+    }
+    segment = lastSegment;
+  }
+  return {
+    segment,
+    estimatedStart: segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationStart : segmentEnd - segment.duration,
+    // Because videoTimingInfo is only set after transmux, it is the only way to get
+    // accurate timing values.
+    type: segment.videoTimingInfo ? 'accurate' : 'estimate'
+  };
+};
+/**
+ * Gives the offset of the comparisonTimestamp from the programTime timestamp in seconds.
+ * If the offset returned is positive, the programTime occurs after the
+ * comparisonTimestamp.
+ * If the offset is negative, the programTime occurs before the comparisonTimestamp.
+ *
+ * @param {string} comparisonTimeStamp An ISO-8601 timestamp to compare against
+ * @param {string} programTime The programTime as an ISO-8601 string
+ * @return {number} offset
+ */
+
+const getOffsetFromTimestamp = (comparisonTimeStamp, programTime) => {
+  let segmentDateTime;
+  let programDateTime;
+  try {
+    segmentDateTime = new Date(comparisonTimeStamp);
+    programDateTime = new Date(programTime);
+  } catch (e) {// TODO handle error
+  }
+  const segmentTimeEpoch = segmentDateTime.getTime();
+  const programTimeEpoch = programDateTime.getTime();
+  return (programTimeEpoch - segmentTimeEpoch) / 1000;
+};
+/**
+ * Checks that all segments in this playlist have programDateTime tags.
+ *
+ * @param {Object} playlist A playlist object
+ */
+
+const verifyProgramDateTimeTags = playlist => {
+  if (!playlist.segments || playlist.segments.length === 0) {
+    return false;
+  }
+  for (let i = 0; i < playlist.segments.length; i++) {
+    const segment = playlist.segments[i];
+    if (!segment.dateTimeObject) {
+      return false;
+    }
+  }
+  return true;
+};
+/**
+ * Returns the programTime of the media given a playlist and a playerTime.
+ * The playlist must have programDateTime tags for a programDateTime tag to be returned.
+ * If the segments containing the time requested have not been buffered yet, an estimate
+ * may be returned to the callback.
+ *
+ * @param {Object} args
+ * @param {Object} args.playlist A playlist object to search within
+ * @param {number} time A playerTime in seconds
+ * @param {Function} callback(err, programTime)
+ * @return {string} err.message A detailed error message
+ * @return {Object} programTime
+ * @return {number} programTime.mediaSeconds The streamTime in seconds
+ * @return {string} programTime.programDateTime The programTime as an ISO-8601 String
+ */
+
+const getProgramTime = ({
+  playlist,
+  time = undefined,
+  callback
+}) => {
+  if (!callback) {
+    throw new Error('getProgramTime: callback must be provided');
+  }
+  if (!playlist || time === undefined) {
+    return callback({
+      message: 'getProgramTime: playlist and time must be provided'
+    });
+  }
+  const matchedSegment = findSegmentForPlayerTime(time, playlist);
+  if (!matchedSegment) {
+    return callback({
+      message: 'valid programTime was not found'
+    });
+  }
+  if (matchedSegment.type === 'estimate') {
+    return callback({
+      message: 'Accurate programTime could not be determined.' + ' Please seek to e.seekTime and try again',
+      seekTime: matchedSegment.estimatedStart
+    });
+  }
+  const programTimeObject = {
+    mediaSeconds: time
+  };
+  const programTime = playerTimeToProgramTime(time, matchedSegment.segment);
+  if (programTime) {
+    programTimeObject.programDateTime = programTime.toISOString();
+  }
+  return callback(null, programTimeObject);
+};
+/**
+ * Seeks in the player to a time that matches the given programTime ISO-8601 string.
+ *
+ * @param {Object} args
+ * @param {string} args.programTime A programTime to seek to as an ISO-8601 String
+ * @param {Object} args.playlist A playlist to look within
+ * @param {number} args.retryCount The number of times to try for an accurate seek. Default is 2.
+ * @param {Function} args.seekTo A method to perform a seek
+ * @param {boolean} args.pauseAfterSeek Whether to end in a paused state after seeking. Default is true.
+ * @param {Object} args.tech The tech to seek on
+ * @param {Function} args.callback(err, newTime) A callback to return the new time to
+ * @return {string} err.message A detailed error message
+ * @return {number} newTime The exact time that was seeked to in seconds
+ */
+
+const seekToProgramTime = ({
+  programTime,
+  playlist,
+  retryCount = 2,
+  seekTo,
+  pauseAfterSeek = true,
+  tech,
+  callback
+}) => {
+  if (!callback) {
+    throw new Error('seekToProgramTime: callback must be provided');
+  }
+  if (typeof programTime === 'undefined' || !playlist || !seekTo) {
+    return callback({
+      message: 'seekToProgramTime: programTime, seekTo and playlist must be provided'
+    });
+  }
+  if (!playlist.endList && !tech.hasStarted_) {
+    return callback({
+      message: 'player must be playing a live stream to start buffering'
+    });
+  }
+  if (!verifyProgramDateTimeTags(playlist)) {
+    return callback({
+      message: 'programDateTime tags must be provided in the manifest ' + playlist.resolvedUri
+    });
+  }
+  const matchedSegment = findSegmentForProgramTime(programTime, playlist); // no match
+
+  if (!matchedSegment) {
+    return callback({
+      message: `${programTime} was not found in the stream`
+    });
+  }
+  const segment = matchedSegment.segment;
+  const mediaOffset = getOffsetFromTimestamp(segment.dateTimeObject, programTime);
+  if (matchedSegment.type === 'estimate') {
+    // we've run out of retries
+    if (retryCount === 0) {
+      return callback({
+        message: `${programTime} is not buffered yet. Try again`
+      });
+    }
+    seekTo(matchedSegment.estimatedStart + mediaOffset);
+    tech.one('seeked', () => {
+      seekToProgramTime({
+        programTime,
+        playlist,
+        retryCount: retryCount - 1,
+        seekTo,
+        pauseAfterSeek,
+        tech,
+        callback
+      });
+    });
+    return;
+  } // Since the segment.start value is determined from the buffered end or ending time
+  // of the prior segment, the seekToTime doesn't need to account for any transmuxer
+  // modifications.
+
+  const seekToTime = segment.start + mediaOffset;
+  const seekedCallback = () => {
+    return callback(null, tech.currentTime());
+  }; // listen for seeked event
+
+  tech.one('seeked', seekedCallback); // pause before seeking as video.js will restore this state
+
+  if (pauseAfterSeek) {
+    tech.pause();
+  }
+  seekTo(seekToTime);
+};
+
+// which will only happen if the request is complete.
+
+const callbackOnCompleted = (request, cb) => {
+  if (request.readyState === 4) {
+    return cb();
+  }
+  return;
+};
+const containerRequest = (uri, xhr, cb) => {
+  let bytes = [];
+  let id3Offset;
+  let finished = false;
+  const endRequestAndCallback = function (err, req, type, _bytes) {
+    req.abort();
+    finished = true;
+    return cb(err, req, type, _bytes);
+  };
+  const progressListener = function (error, request) {
+    if (finished) {
+      return;
+    }
+    if (error) {
+      return endRequestAndCallback(error, request, '', bytes);
+    } // grap the new part of content that was just downloaded
+
+    const newPart = request.responseText.substring(bytes && bytes.byteLength || 0, request.responseText.length); // add that onto bytes
+
+    bytes = concatTypedArrays(bytes, stringToBytes(newPart, true));
+    id3Offset = id3Offset || getId3Offset(bytes); // we need at least 10 bytes to determine a type
+    // or we need at least two bytes after an id3Offset
+
+    if (bytes.length < 10 || id3Offset && bytes.length < id3Offset + 2) {
+      return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+    }
+    const type = detectContainerForBytes(bytes); // if this looks like a ts segment but we don't have enough data
+    // to see the second sync byte, wait until we have enough data
+    // before declaring it ts
+
+    if (type === 'ts' && bytes.length < 188) {
+      return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+    } // this may be an unsynced ts segment
+    // wait for 376 bytes before detecting no container
+
+    if (!type && bytes.length < 376) {
+      return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+    }
+    return endRequestAndCallback(null, request, type, bytes);
+  };
+  const options = {
+    uri,
+    beforeSend(request) {
+      // this forces the browser to pass the bytes to us unprocessed
+      request.overrideMimeType('text/plain; charset=x-user-defined');
+      request.addEventListener('progress', function ({
+        total,
+        loaded
+      }) {
+        return callbackWrapper(request, null, {
+          statusCode: request.status
+        }, progressListener);
+      });
+    }
+  };
+  const request = xhr(options, function (error, response) {
+    return callbackWrapper(request, error, response, progressListener);
+  });
+  return request;
+};
+const {
+  EventTarget
+} = videojs;
+const dashPlaylistUnchanged = function (a, b) {
+  if (!isPlaylistUnchanged(a, b)) {
+    return false;
+  } // for dash the above check will often return true in scenarios where
+  // the playlist actually has changed because mediaSequence isn't a
+  // dash thing, and we often set it to 1. So if the playlists have the same amount
+  // of segments we return true.
+  // So for dash we need to make sure that the underlying segments are different.
+  // if sidx changed then the playlists are different.
+
+  if (a.sidx && b.sidx && (a.sidx.offset !== b.sidx.offset || a.sidx.length !== b.sidx.length)) {
+    return false;
+  } else if (!a.sidx && b.sidx || a.sidx && !b.sidx) {
+    return false;
+  } // one or the other does not have segments
+  // there was a change.
+
+  if (a.segments && !b.segments || !a.segments && b.segments) {
+    return false;
+  } // neither has segments nothing changed
+
+  if (!a.segments && !b.segments) {
+    return true;
+  } // check segments themselves
+
+  for (let i = 0; i < a.segments.length; i++) {
+    const aSegment = a.segments[i];
+    const bSegment = b.segments[i]; // if uris are different between segments there was a change
+
+    if (aSegment.uri !== bSegment.uri) {
+      return false;
+    } // neither segment has a byterange, there will be no byterange change.
+
+    if (!aSegment.byterange && !bSegment.byterange) {
+      continue;
+    }
+    const aByterange = aSegment.byterange;
+    const bByterange = bSegment.byterange; // if byterange only exists on one of the segments, there was a change.
+
+    if (aByterange && !bByterange || !aByterange && bByterange) {
+      return false;
+    } // if both segments have byterange with different offsets, there was a change.
+
+    if (aByterange.offset !== bByterange.offset || aByterange.length !== bByterange.length) {
+      return false;
+    }
+  } // if everything was the same with segments, this is the same playlist.
+
+  return true;
+};
+/**
+ * Use the representation IDs from the mpd object to create groupIDs, the NAME is set to mandatory representation
+ * ID in the parser. This allows for continuous playout across periods with the same representation IDs
+ * (continuous periods as defined in DASH-IF 3.2.12). This is assumed in the mpd-parser as well. If we want to support
+ * periods without continuous playback this function may need modification as well as the parser.
+ */
+
+const dashGroupId = (type, group, label, playlist) => {
+  // If the manifest somehow does not have an ID (non-dash compliant), use the label.
+  const playlistId = playlist.attributes.NAME || label;
+  return `placeholder-uri-${type}-${group}-${playlistId}`;
+};
+/**
+ * Parses the main XML string and updates playlist URI references.
+ *
+ * @param {Object} config
+ *        Object of arguments
+ * @param {string} config.mainXml
+ *        The mpd XML
+ * @param {string} config.srcUrl
+ *        The mpd URL
+ * @param {Date} config.clientOffset
+ *         A time difference between server and client
+ * @param {Object} config.sidxMapping
+ *        SIDX mappings for moof/mdat URIs and byte ranges
+ * @return {Object}
+ *         The parsed mpd manifest object
+ */
+
+const parseMainXml = ({
+  mainXml,
+  srcUrl,
+  clientOffset,
+  sidxMapping,
+  previousManifest
+}) => {
+  const manifest = parse(mainXml, {
+    manifestUri: srcUrl,
+    clientOffset,
+    sidxMapping,
+    previousManifest
+  });
+  addPropertiesToMain(manifest, srcUrl, dashGroupId);
+  return manifest;
+};
+/**
+ * Removes any mediaGroup labels that no longer exist in the newMain
+ *
+ * @param {Object} update
+ *         The previous mpd object being updated
+ * @param {Object} newMain
+ *         The new mpd object
+ */
+
+const removeOldMediaGroupLabels = (update, newMain) => {
+  forEachMediaGroup(update, (properties, type, group, label) => {
+    if (!(label in newMain.mediaGroups[type][group])) {
+      delete update.mediaGroups[type][group][label];
+    }
+  });
+};
+/**
+ * Returns a new main manifest that is the result of merging an updated main manifest
+ * into the original version.
+ *
+ * @param {Object} oldMain
+ *        The old parsed mpd object
+ * @param {Object} newMain
+ *        The updated parsed mpd object
+ * @return {Object}
+ *         A new object representing the original main manifest with the updated media
+ *         playlists merged in
+ */
+
+const updateMain = (oldMain, newMain, sidxMapping) => {
+  let noChanges = true;
+  let update = merge(oldMain, {
+    // These are top level properties that can be updated
+    duration: newMain.duration,
+    minimumUpdatePeriod: newMain.minimumUpdatePeriod,
+    timelineStarts: newMain.timelineStarts
+  }); // First update the playlists in playlist list
+
+  for (let i = 0; i < newMain.playlists.length; i++) {
+    const playlist = newMain.playlists[i];
+    if (playlist.sidx) {
+      const sidxKey = generateSidxKey(playlist.sidx); // add sidx segments to the playlist if we have all the sidx info already
+
+      if (sidxMapping && sidxMapping[sidxKey] && sidxMapping[sidxKey].sidx) {
+        addSidxSegmentsToPlaylist(playlist, sidxMapping[sidxKey].sidx, playlist.sidx.resolvedUri);
+      }
+    }
+    const playlistUpdate = updateMain$1(update, playlist, dashPlaylistUnchanged);
+    if (playlistUpdate) {
+      update = playlistUpdate;
+      noChanges = false;
+    }
+  } // Then update media group playlists
+
+  forEachMediaGroup(newMain, (properties, type, group, label) => {
+    if (properties.playlists && properties.playlists.length) {
+      const id = properties.playlists[0].id;
+      const playlistUpdate = updateMain$1(update, properties.playlists[0], dashPlaylistUnchanged);
+      if (playlistUpdate) {
+        update = playlistUpdate; // add new mediaGroup label if it doesn't exist and assign the new mediaGroup.
+
+        if (!(label in update.mediaGroups[type][group])) {
+          update.mediaGroups[type][group][label] = properties;
+        } // update the playlist reference within media groups
+
+        update.mediaGroups[type][group][label].playlists[0] = update.playlists[id];
+        noChanges = false;
+      }
+    }
+  }); // remove mediaGroup labels and references that no longer exist in the newMain
+
+  removeOldMediaGroupLabels(update, newMain);
+  if (newMain.minimumUpdatePeriod !== oldMain.minimumUpdatePeriod) {
+    noChanges = false;
+  }
+  if (noChanges) {
+    return null;
+  }
+  return update;
+}; // SIDX should be equivalent if the URI and byteranges of the SIDX match.
+// If the SIDXs have maps, the two maps should match,
+// both `a` and `b` missing SIDXs is considered matching.
+// If `a` or `b` but not both have a map, they aren't matching.
+
+const equivalentSidx = (a, b) => {
+  const neitherMap = Boolean(!a.map && !b.map);
+  const equivalentMap = neitherMap || Boolean(a.map && b.map && a.map.byterange.offset === b.map.byterange.offset && a.map.byterange.length === b.map.byterange.length);
+  return equivalentMap && a.uri === b.uri && a.byterange.offset === b.byterange.offset && a.byterange.length === b.byterange.length;
+}; // exported for testing
+
+const compareSidxEntry = (playlists, oldSidxMapping) => {
+  const newSidxMapping = {};
+  for (const id in playlists) {
+    const playlist = playlists[id];
+    const currentSidxInfo = playlist.sidx;
+    if (currentSidxInfo) {
+      const key = generateSidxKey(currentSidxInfo);
+      if (!oldSidxMapping[key]) {
+        break;
+      }
+      const savedSidxInfo = oldSidxMapping[key].sidxInfo;
+      if (equivalentSidx(savedSidxInfo, currentSidxInfo)) {
+        newSidxMapping[key] = oldSidxMapping[key];
+      }
+    }
+  }
+  return newSidxMapping;
+};
+/**
+ *  A function that filters out changed items as they need to be requested separately.
+ *
+ *  The method is exported for testing
+ *
+ *  @param {Object} main the parsed mpd XML returned via mpd-parser
+ *  @param {Object} oldSidxMapping the SIDX to compare against
+ */
+
+const filterChangedSidxMappings = (main, oldSidxMapping) => {
+  const videoSidx = compareSidxEntry(main.playlists, oldSidxMapping);
+  let mediaGroupSidx = videoSidx;
+  forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+    if (properties.playlists && properties.playlists.length) {
+      const playlists = properties.playlists;
+      mediaGroupSidx = merge(mediaGroupSidx, compareSidxEntry(playlists, oldSidxMapping));
+    }
+  });
+  return mediaGroupSidx;
+};
+class DashPlaylistLoader extends EventTarget {
+  // DashPlaylistLoader must accept either a src url or a playlist because subsequent
+  // playlist loader setups from media groups will expect to be able to pass a playlist
+  // (since there aren't external URLs to media playlists with DASH)
+  constructor(srcUrlOrPlaylist, vhs, options = {}, mainPlaylistLoader) {
+    super();
+    this.mainPlaylistLoader_ = mainPlaylistLoader || this;
+    if (!mainPlaylistLoader) {
+      this.isMain_ = true;
+    }
+    const {
+      withCredentials = false
+    } = options;
+    this.vhs_ = vhs;
+    this.withCredentials = withCredentials;
+    this.addMetadataToTextTrack = options.addMetadataToTextTrack;
+    if (!srcUrlOrPlaylist) {
+      throw new Error('A non-empty playlist URL or object is required');
+    } // event naming?
+
+    this.on('minimumUpdatePeriod', () => {
+      this.refreshXml_();
+    }); // live playlist staleness timeout
+
+    this.on('mediaupdatetimeout', () => {
+      this.refreshMedia_(this.media().id);
+    });
+    this.state = 'HAVE_NOTHING';
+    this.loadedPlaylists_ = {};
+    this.logger_ = logger('DashPlaylistLoader'); // initialize the loader state
+    // The mainPlaylistLoader will be created with a string
+
+    if (this.isMain_) {
+      this.mainPlaylistLoader_.srcUrl = srcUrlOrPlaylist; // TODO: reset sidxMapping between period changes
+      // once multi-period is refactored
+
+      this.mainPlaylistLoader_.sidxMapping_ = {};
+    } else {
+      this.childPlaylist_ = srcUrlOrPlaylist;
+    }
+  }
+  requestErrored_(err, request, startingState) {
+    // disposed
+    if (!this.request) {
+      return true;
+    } // pending request is cleared
+
+    this.request = null;
+    if (err) {
+      // use the provided error object or create one
+      // based on the request/response
+      this.error = typeof err === 'object' && !(err instanceof Error) ? err : {
+        status: request.status,
+        message: 'DASH request error at URL: ' + request.uri,
+        response: request.response,
+        // MEDIA_ERR_NETWORK
+        code: 2,
+        metadata: err.metadata
+      };
+      if (startingState) {
+        this.state = startingState;
+      }
+      this.trigger('error');
+      return true;
+    }
+  }
+  /**
+   * Verify that the container of the sidx segment can be parsed
+   * and if it can, get and parse that segment.
+   */
+
+  addSidxSegments_(playlist, startingState, cb) {
+    const sidxKey = playlist.sidx && generateSidxKey(playlist.sidx); // playlist lacks sidx or sidx segments were added to this playlist already.
+
+    if (!playlist.sidx || !sidxKey || this.mainPlaylistLoader_.sidxMapping_[sidxKey]) {
+      // keep this function async
+      this.mediaRequest_ = window$1.setTimeout(() => cb(false), 0);
+      return;
+    } // resolve the segment URL relative to the playlist
+
+    const uri = resolveManifestRedirect(playlist.sidx.resolvedUri);
+    const fin = (err, request) => {
+      // TODO: add error metdata here once we create an error type in video.js
+      if (this.requestErrored_(err, request, startingState)) {
+        return;
+      }
+      const sidxMapping = this.mainPlaylistLoader_.sidxMapping_;
+      let sidx;
+      try {
+        sidx = parseSidx(toUint8(request.response).subarray(8));
+      } catch (e) {
+        e.metadata = {
+          errorType: videojs.Error.DashManifestSidxParsingError
+        }; // sidx parsing failed.
+
+        this.requestErrored_(e, request, startingState);
+        return;
+      }
+      sidxMapping[sidxKey] = {
+        sidxInfo: playlist.sidx,
+        sidx
+      };
+      addSidxSegmentsToPlaylist(playlist, sidx, playlist.sidx.resolvedUri);
+      return cb(true);
+    };
+    this.request = containerRequest(uri, this.vhs_.xhr, (err, request, container, bytes) => {
+      if (err) {
+        return fin(err, request);
+      }
+      if (!container || container !== 'mp4') {
+        const sidxContainer = container || 'unknown';
+        return fin({
+          status: request.status,
+          message: `Unsupported ${sidxContainer} container type for sidx segment at URL: ${uri}`,
+          // response is just bytes in this case
+          // but we really don't want to return that.
+          response: '',
+          playlist,
+          internal: true,
+          playlistExclusionDuration: Infinity,
+          // MEDIA_ERR_NETWORK
+          code: 2,
+          metadata: {
+            errorType: videojs.Error.UnsupportedSidxContainer,
+            sidxContainer
+          }
+        }, request);
+      } // if we already downloaded the sidx bytes in the container request, use them
+
+      const {
+        offset,
+        length
+      } = playlist.sidx.byterange;
+      if (bytes.length >= length + offset) {
+        return fin(err, {
+          response: bytes.subarray(offset, offset + length),
+          status: request.status,
+          uri: request.uri
+        });
+      } // otherwise request sidx bytes
+
+      this.request = this.vhs_.xhr({
+        uri,
+        responseType: 'arraybuffer',
+        headers: segmentXhrHeaders({
+          byterange: playlist.sidx.byterange
+        })
+      }, fin);
+    });
+  }
+  dispose() {
+    this.trigger('dispose');
+    this.stopRequest();
+    this.loadedPlaylists_ = {};
+    window$1.clearTimeout(this.minimumUpdatePeriodTimeout_);
+    window$1.clearTimeout(this.mediaRequest_);
+    window$1.clearTimeout(this.mediaUpdateTimeout);
+    this.mediaUpdateTimeout = null;
+    this.mediaRequest_ = null;
+    this.minimumUpdatePeriodTimeout_ = null;
+    if (this.mainPlaylistLoader_.createMupOnMedia_) {
+      this.off('loadedmetadata', this.mainPlaylistLoader_.createMupOnMedia_);
+      this.mainPlaylistLoader_.createMupOnMedia_ = null;
+    }
+    this.off();
+  }
+  hasPendingRequest() {
+    return this.request || this.mediaRequest_;
+  }
+  stopRequest() {
+    if (this.request) {
+      const oldRequest = this.request;
+      this.request = null;
+      oldRequest.onreadystatechange = null;
+      oldRequest.abort();
+    }
+  }
+  media(playlist) {
+    // getter
+    if (!playlist) {
+      return this.media_;
+    } // setter
+
+    if (this.state === 'HAVE_NOTHING') {
+      throw new Error('Cannot switch media playlist from ' + this.state);
+    }
+    const startingState = this.state; // find the playlist object if the target playlist has been specified by URI
+
+    if (typeof playlist === 'string') {
+      if (!this.mainPlaylistLoader_.main.playlists[playlist]) {
+        throw new Error('Unknown playlist URI: ' + playlist);
+      }
+      playlist = this.mainPlaylistLoader_.main.playlists[playlist];
+    }
+    const mediaChange = !this.media_ || playlist.id !== this.media_.id; // switch to previously loaded playlists immediately
+
+    if (mediaChange && this.loadedPlaylists_[playlist.id] && this.loadedPlaylists_[playlist.id].endList) {
+      this.state = 'HAVE_METADATA';
+      this.media_ = playlist; // trigger media change if the active media has been updated
+
+      if (mediaChange) {
+        this.trigger('mediachanging');
+        this.trigger('mediachange');
+      }
+      return;
+    } // switching to the active playlist is a no-op
+
+    if (!mediaChange) {
+      return;
+    } // switching from an already loaded playlist
+
+    if (this.media_) {
+      this.trigger('mediachanging');
+    }
+    this.addSidxSegments_(playlist, startingState, sidxChanged => {
+      // everything is ready just continue to haveMetadata
+      this.haveMetadata({
+        startingState,
+        playlist
+      });
+    });
+  }
+  haveMetadata({
+    startingState,
+    playlist
+  }) {
+    this.state = 'HAVE_METADATA';
+    this.loadedPlaylists_[playlist.id] = playlist;
+    this.mediaRequest_ = null; // This will trigger loadedplaylist
+
+    this.refreshMedia_(playlist.id); // fire loadedmetadata the first time a media playlist is loaded
+    // to resolve setup of media groups
+
+    if (startingState === 'HAVE_MAIN_MANIFEST') {
+      this.trigger('loadedmetadata');
+    } else {
+      // trigger media change if the active media has been updated
+      this.trigger('mediachange');
+    }
+  }
+  pause() {
+    if (this.mainPlaylistLoader_.createMupOnMedia_) {
+      this.off('loadedmetadata', this.mainPlaylistLoader_.createMupOnMedia_);
+      this.mainPlaylistLoader_.createMupOnMedia_ = null;
+    }
+    this.stopRequest();
+    window$1.clearTimeout(this.mediaUpdateTimeout);
+    this.mediaUpdateTimeout = null;
+    if (this.isMain_) {
+      window$1.clearTimeout(this.mainPlaylistLoader_.minimumUpdatePeriodTimeout_);
+      this.mainPlaylistLoader_.minimumUpdatePeriodTimeout_ = null;
+    }
+    if (this.state === 'HAVE_NOTHING') {
+      // If we pause the loader before any data has been retrieved, its as if we never
+      // started, so reset to an unstarted state.
+      this.started = false;
+    }
+  }
+  load(isFinalRendition) {
+    window$1.clearTimeout(this.mediaUpdateTimeout);
+    this.mediaUpdateTimeout = null;
+    const media = this.media();
+    if (isFinalRendition) {
+      const delay = media ? media.targetDuration / 2 * 1000 : 5 * 1000;
+      this.mediaUpdateTimeout = window$1.setTimeout(() => this.load(), delay);
+      return;
+    } // because the playlists are internal to the manifest, load should either load the
+    // main manifest, or do nothing but trigger an event
+
+    if (!this.started) {
+      this.start();
+      return;
+    }
+    if (media && !media.endList) {
+      // Check to see if this is the main loader and the MUP was cleared (this happens
+      // when the loader was paused). `media` should be set at this point since one is always
+      // set during `start()`.
+      if (this.isMain_ && !this.minimumUpdatePeriodTimeout_) {
+        // Trigger minimumUpdatePeriod to refresh the main manifest
+        this.trigger('minimumUpdatePeriod'); // Since there was no prior minimumUpdatePeriodTimeout it should be recreated
+
+        this.updateMinimumUpdatePeriodTimeout_();
+      }
+      this.trigger('mediaupdatetimeout');
+    } else {
+      this.trigger('loadedplaylist');
+    }
+  }
+  start() {
+    this.started = true; // We don't need to request the main manifest again
+    // Call this asynchronously to match the xhr request behavior below
+
+    if (!this.isMain_) {
+      this.mediaRequest_ = window$1.setTimeout(() => this.haveMain_(), 0);
+      return;
+    }
+    this.requestMain_((req, mainChanged) => {
+      this.haveMain_();
+      if (!this.hasPendingRequest() && !this.media_) {
+        this.media(this.mainPlaylistLoader_.main.playlists[0]);
+      }
+    });
+  }
+  requestMain_(cb) {
+    this.request = this.vhs_.xhr({
+      uri: this.mainPlaylistLoader_.srcUrl,
+      withCredentials: this.withCredentials,
+      requestType: 'dash-manifest'
+    }, (error, req) => {
+      if (this.requestErrored_(error, req)) {
+        if (this.state === 'HAVE_NOTHING') {
+          this.started = false;
+        }
+        return;
+      }
+      const mainChanged = req.responseText !== this.mainPlaylistLoader_.mainXml_;
+      this.mainPlaylistLoader_.mainXml_ = req.responseText;
+      if (req.responseHeaders && req.responseHeaders.date) {
+        this.mainLoaded_ = Date.parse(req.responseHeaders.date);
+      } else {
+        this.mainLoaded_ = Date.now();
+      }
+      this.mainPlaylistLoader_.srcUrl = resolveManifestRedirect(this.mainPlaylistLoader_.srcUrl, req);
+      if (mainChanged) {
+        this.handleMain_();
+        this.syncClientServerClock_(() => {
+          return cb(req, mainChanged);
+        });
+        return;
+      }
+      return cb(req, mainChanged);
+    });
+  }
+  /**
+   * Parses the main xml for UTCTiming node to sync the client clock to the server
+   * clock. If the UTCTiming node requires a HEAD or GET request, that request is made.
+   *
+   * @param {Function} done
+   *        Function to call when clock sync has completed
+   */
+
+  syncClientServerClock_(done) {
+    const utcTiming = parseUTCTiming(this.mainPlaylistLoader_.mainXml_); // No UTCTiming element found in the mpd. Use Date header from mpd request as the
+    // server clock
+
+    if (utcTiming === null) {
+      this.mainPlaylistLoader_.clientOffset_ = this.mainLoaded_ - Date.now();
+      return done();
+    }
+    if (utcTiming.method === 'DIRECT') {
+      this.mainPlaylistLoader_.clientOffset_ = utcTiming.value - Date.now();
+      return done();
+    }
+    this.request = this.vhs_.xhr({
+      uri: resolveUrl(this.mainPlaylistLoader_.srcUrl, utcTiming.value),
+      method: utcTiming.method,
+      withCredentials: this.withCredentials,
+      requestType: 'dash-clock-sync'
+    }, (error, req) => {
+      // disposed
+      if (!this.request) {
+        return;
+      }
+      if (error) {
+        // sync request failed, fall back to using date header from mpd
+        // TODO: log warning
+        this.mainPlaylistLoader_.clientOffset_ = this.mainLoaded_ - Date.now();
+        return done();
+      }
+      let serverTime;
+      if (utcTiming.method === 'HEAD') {
+        if (!req.responseHeaders || !req.responseHeaders.date) {
+          // expected date header not preset, fall back to using date header from mpd
+          // TODO: log warning
+          serverTime = this.mainLoaded_;
+        } else {
+          serverTime = Date.parse(req.responseHeaders.date);
+        }
+      } else {
+        serverTime = Date.parse(req.responseText);
+      }
+      this.mainPlaylistLoader_.clientOffset_ = serverTime - Date.now();
+      done();
+    });
+  }
+  haveMain_() {
+    this.state = 'HAVE_MAIN_MANIFEST';
+    if (this.isMain_) {
+      // We have the main playlist at this point, so
+      // trigger this to allow PlaylistController
+      // to make an initial playlist selection
+      this.trigger('loadedplaylist');
+    } else if (!this.media_) {
+      // no media playlist was specifically selected so select
+      // the one the child playlist loader was created with
+      this.media(this.childPlaylist_);
+    }
+  }
+  handleMain_() {
+    // clear media request
+    this.mediaRequest_ = null;
+    const oldMain = this.mainPlaylistLoader_.main;
+    let newMain = parseMainXml({
+      mainXml: this.mainPlaylistLoader_.mainXml_,
+      srcUrl: this.mainPlaylistLoader_.srcUrl,
+      clientOffset: this.mainPlaylistLoader_.clientOffset_,
+      sidxMapping: this.mainPlaylistLoader_.sidxMapping_,
+      previousManifest: oldMain
+    }); // if we have an old main to compare the new main against
+
+    if (oldMain) {
+      newMain = updateMain(oldMain, newMain, this.mainPlaylistLoader_.sidxMapping_);
+    } // only update main if we have a new main
+
+    this.mainPlaylistLoader_.main = newMain ? newMain : oldMain;
+    const location = this.mainPlaylistLoader_.main.locations && this.mainPlaylistLoader_.main.locations[0];
+    if (location && location !== this.mainPlaylistLoader_.srcUrl) {
+      this.mainPlaylistLoader_.srcUrl = location;
+    }
+    if (!oldMain || newMain && newMain.minimumUpdatePeriod !== oldMain.minimumUpdatePeriod) {
+      this.updateMinimumUpdatePeriodTimeout_();
+    }
+    this.addEventStreamToMetadataTrack_(newMain);
+    return Boolean(newMain);
+  }
+  updateMinimumUpdatePeriodTimeout_() {
+    const mpl = this.mainPlaylistLoader_; // cancel any pending creation of mup on media
+    // a new one will be added if needed.
+
+    if (mpl.createMupOnMedia_) {
+      mpl.off('loadedmetadata', mpl.createMupOnMedia_);
+      mpl.createMupOnMedia_ = null;
+    } // clear any pending timeouts
+
+    if (mpl.minimumUpdatePeriodTimeout_) {
+      window$1.clearTimeout(mpl.minimumUpdatePeriodTimeout_);
+      mpl.minimumUpdatePeriodTimeout_ = null;
+    }
+    let mup = mpl.main && mpl.main.minimumUpdatePeriod; // If the minimumUpdatePeriod has a value of 0, that indicates that the current
+    // MPD has no future validity, so a new one will need to be acquired when new
+    // media segments are to be made available. Thus, we use the target duration
+    // in this case
+
+    if (mup === 0) {
+      if (mpl.media()) {
+        mup = mpl.media().targetDuration * 1000;
+      } else {
+        mpl.createMupOnMedia_ = mpl.updateMinimumUpdatePeriodTimeout_;
+        mpl.one('loadedmetadata', mpl.createMupOnMedia_);
+      }
+    } // if minimumUpdatePeriod is invalid or <= zero, which
+    // can happen when a live video becomes VOD. skip timeout
+    // creation.
+
+    if (typeof mup !== 'number' || mup <= 0) {
+      if (mup < 0) {
+        this.logger_(`found invalid minimumUpdatePeriod of ${mup}, not setting a timeout`);
+      }
+      return;
+    }
+    this.createMUPTimeout_(mup);
+  }
+  createMUPTimeout_(mup) {
+    const mpl = this.mainPlaylistLoader_;
+    mpl.minimumUpdatePeriodTimeout_ = window$1.setTimeout(() => {
+      mpl.minimumUpdatePeriodTimeout_ = null;
+      mpl.trigger('minimumUpdatePeriod');
+      mpl.createMUPTimeout_(mup);
+    }, mup);
+  }
+  /**
+   * Sends request to refresh the main xml and updates the parsed main manifest
+   */
+
+  refreshXml_() {
+    this.requestMain_((req, mainChanged) => {
+      if (!mainChanged) {
+        return;
+      }
+      if (this.media_) {
+        this.media_ = this.mainPlaylistLoader_.main.playlists[this.media_.id];
+      } // This will filter out updated sidx info from the mapping
+
+      this.mainPlaylistLoader_.sidxMapping_ = filterChangedSidxMappings(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.sidxMapping_);
+      this.addSidxSegments_(this.media(), this.state, sidxChanged => {
+        // TODO: do we need to reload the current playlist?
+        this.refreshMedia_(this.media().id);
+      });
+    });
+  }
+  /**
+   * Refreshes the media playlist by re-parsing the main xml and updating playlist
+   * references. If this is an alternate loader, the updated parsed manifest is retrieved
+   * from the main loader.
+   */
+
+  refreshMedia_(mediaID) {
+    if (!mediaID) {
+      throw new Error('refreshMedia_ must take a media id');
+    } // for main we have to reparse the main xml
+    // to re-create segments based on current timing values
+    // which may change media. We only skip updating the main manifest
+    // if this is the first time this.media_ is being set.
+    // as main was just parsed in that case.
+
+    if (this.media_ && this.isMain_) {
+      this.handleMain_();
+    }
+    const playlists = this.mainPlaylistLoader_.main.playlists;
+    const mediaChanged = !this.media_ || this.media_ !== playlists[mediaID];
+    if (mediaChanged) {
+      this.media_ = playlists[mediaID];
+    } else {
+      this.trigger('playlistunchanged');
+    }
+    if (!this.mediaUpdateTimeout) {
+      const createMediaUpdateTimeout = () => {
+        if (this.media().endList) {
+          return;
+        }
+        this.mediaUpdateTimeout = window$1.setTimeout(() => {
+          this.trigger('mediaupdatetimeout');
+          createMediaUpdateTimeout();
+        }, refreshDelay(this.media(), Boolean(mediaChanged)));
+      };
+      createMediaUpdateTimeout();
+    }
+    this.trigger('loadedplaylist');
+  }
+  /**
+   * Takes eventstream data from a parsed DASH manifest and adds it to the metadata text track.
+   *
+   * @param {manifest} newMain the newly parsed manifest
+   */
+
+  addEventStreamToMetadataTrack_(newMain) {
+    // Only add new event stream metadata if we have a new manifest.
+    if (newMain && this.mainPlaylistLoader_.main.eventStream) {
+      // convert EventStream to ID3-like data.
+      const metadataArray = this.mainPlaylistLoader_.main.eventStream.map(eventStreamNode => {
+        return {
+          cueTime: eventStreamNode.start,
+          frames: [{
+            data: eventStreamNode.messageData
+          }]
+        };
+      });
+      this.addMetadataToTextTrack('EventStream', metadataArray, this.mainPlaylistLoader_.main.duration);
+    }
+  }
+  /**
+   * Returns the key ID set from a playlist
+   *
+   * @param {playlist} playlist to fetch the key ID set from.
+   * @return a Set of 32 digit hex strings that represent the unique keyIds for that playlist.
+   */
+
+  getKeyIdSet(playlist) {
+    if (playlist.contentProtection) {
+      const keyIds = new Set();
+      for (const keysystem in playlist.contentProtection) {
+        const defaultKID = playlist.contentProtection[keysystem].attributes['cenc:default_KID'];
+        if (defaultKID) {
+          // DASH keyIds are separated by dashes.
+          keyIds.add(defaultKID.replace(/-/g, '').toLowerCase());
+        }
+      }
+      return keyIds;
+    }
+  }
+}
+var Config = {
+  GOAL_BUFFER_LENGTH: 30,
+  MAX_GOAL_BUFFER_LENGTH: 60,
+  BACK_BUFFER_LENGTH: 30,
+  GOAL_BUFFER_LENGTH_RATE: 1,
+  // 0.5 MB/s
+  INITIAL_BANDWIDTH: 4194304,
+  // A fudge factor to apply to advertised playlist bitrates to account for
+  // temporary flucations in client bandwidth
+  BANDWIDTH_VARIANCE: 1.2,
+  // How much of the buffer must be filled before we consider upswitching
+  BUFFER_LOW_WATER_LINE: 0,
+  MAX_BUFFER_LOW_WATER_LINE: 30,
+  // TODO: Remove this when experimentalBufferBasedABR is removed
+  EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE: 16,
+  BUFFER_LOW_WATER_LINE_RATE: 1,
+  // If the buffer is greater than the high water line, we won't switch down
+  BUFFER_HIGH_WATER_LINE: 30
+};
+const stringToArrayBuffer = string => {
+  const view = new Uint8Array(new ArrayBuffer(string.length));
+  for (let i = 0; i < string.length; i++) {
+    view[i] = string.charCodeAt(i);
+  }
+  return view.buffer;
+};
+
+/* global Blob, BlobBuilder, Worker */
+// unify worker interface
+const browserWorkerPolyFill = function (workerObj) {
+  // node only supports on/off
+  workerObj.on = workerObj.addEventListener;
+  workerObj.off = workerObj.removeEventListener;
+  return workerObj;
+};
+const createObjectURL = function (str) {
+  try {
+    return URL.createObjectURL(new Blob([str], {
+      type: 'application/javascript'
+    }));
+  } catch (e) {
+    const blob = new BlobBuilder();
+    blob.append(str);
+    return URL.createObjectURL(blob.getBlob());
+  }
+};
+const factory = function (code) {
+  return function () {
+    const objectUrl = createObjectURL(code);
+    const worker = browserWorkerPolyFill(new Worker(objectUrl));
+    worker.objURL = objectUrl;
+    const terminate = worker.terminate;
+    worker.on = worker.addEventListener;
+    worker.off = worker.removeEventListener;
+    worker.terminate = function () {
+      URL.revokeObjectURL(objectUrl);
+      return terminate.call(this);
+    };
+    return worker;
+  };
+};
+const transform = function (code) {
+  return `var browserWorkerPolyFill = ${browserWorkerPolyFill.toString()};\n` + 'browserWorkerPolyFill(self);\n' + code;
+};
+const getWorkerString = function (fn) {
+  return fn.toString().replace(/^function.+?{/, '').slice(0, -1);
+};
+
+/* rollup-plugin-worker-factory start for worker!/home/runner/work/http-streaming/http-streaming/src/transmuxer-worker.js */
+const workerCode$1 = transform(getWorkerString(function () {
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * A lightweight readable stream implemention that handles event dispatching.
+   * Objects that inherit from streams should call init in their constructors.
+   */
+
+  var Stream$8 = function () {
+    this.init = function () {
+      var listeners = {};
+      /**
+       * Add a listener for a specified event type.
+       * @param type {string} the event name
+       * @param listener {function} the callback to be invoked when an event of
+       * the specified type occurs
+       */
+
+      this.on = function (type, listener) {
+        if (!listeners[type]) {
+          listeners[type] = [];
+        }
+        listeners[type] = listeners[type].concat(listener);
+      };
+      /**
+       * Remove a listener for a specified event type.
+       * @param type {string} the event name
+       * @param listener {function} a function previously registered for this
+       * type of event through `on`
+       */
+
+      this.off = function (type, listener) {
+        var index;
+        if (!listeners[type]) {
+          return false;
+        }
+        index = listeners[type].indexOf(listener);
+        listeners[type] = listeners[type].slice();
+        listeners[type].splice(index, 1);
+        return index > -1;
+      };
+      /**
+       * Trigger an event of the specified type on this stream. Any additional
+       * arguments to this function are passed as parameters to event listeners.
+       * @param type {string} the event name
+       */
+
+      this.trigger = function (type) {
+        var callbacks, i, length, args;
+        callbacks = listeners[type];
+        if (!callbacks) {
+          return;
+        } // Slicing the arguments on every invocation of this method
+        // can add a significant amount of overhead. Avoid the
+        // intermediate object creation for the common case of a
+        // single callback argument
+
+        if (arguments.length === 2) {
+          length = callbacks.length;
+          for (i = 0; i < length; ++i) {
+            callbacks[i].call(this, arguments[1]);
+          }
+        } else {
+          args = [];
+          i = arguments.length;
+          for (i = 1; i < arguments.length; ++i) {
+            args.push(arguments[i]);
+          }
+          length = callbacks.length;
+          for (i = 0; i < length; ++i) {
+            callbacks[i].apply(this, args);
+          }
+        }
+      };
+      /**
+       * Destroys the stream and cleans up.
+       */
+
+      this.dispose = function () {
+        listeners = {};
+      };
+    };
+  };
+  /**
+   * Forwards all `data` events on this stream to the destination stream. The
+   * destination stream should provide a method `push` to receive the data
+   * events as they arrive.
+   * @param destination {stream} the stream that will receive all `data` events
+   * @param autoFlush {boolean} if false, we will not call `flush` on the destination
+   *                            when the current stream emits a 'done' event
+   * @see http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options
+   */
+
+  Stream$8.prototype.pipe = function (destination) {
+    this.on('data', function (data) {
+      destination.push(data);
+    });
+    this.on('done', function (flushSource) {
+      destination.flush(flushSource);
+    });
+    this.on('partialdone', function (flushSource) {
+      destination.partialFlush(flushSource);
+    });
+    this.on('endedtimeline', function (flushSource) {
+      destination.endTimeline(flushSource);
+    });
+    this.on('reset', function (flushSource) {
+      destination.reset(flushSource);
+    });
+    return destination;
+  }; // Default stream functions that are expected to be overridden to perform
+  // actual work. These are provided by the prototype as a sort of no-op
+  // implementation so that we don't have to check for their existence in the
+  // `pipe` function above.
+
+  Stream$8.prototype.push = function (data) {
+    this.trigger('data', data);
+  };
+  Stream$8.prototype.flush = function (flushSource) {
+    this.trigger('done', flushSource);
+  };
+  Stream$8.prototype.partialFlush = function (flushSource) {
+    this.trigger('partialdone', flushSource);
+  };
+  Stream$8.prototype.endTimeline = function (flushSource) {
+    this.trigger('endedtimeline', flushSource);
+  };
+  Stream$8.prototype.reset = function (flushSource) {
+    this.trigger('reset', flushSource);
+  };
+  var stream = Stream$8;
+  var MAX_UINT32$1 = Math.pow(2, 32);
+  var getUint64$3 = function (uint8) {
+    var dv = new DataView(uint8.buffer, uint8.byteOffset, uint8.byteLength);
+    var value;
+    if (dv.getBigUint64) {
+      value = dv.getBigUint64(0);
+      if (value < Number.MAX_SAFE_INTEGER) {
+        return Number(value);
+      }
+      return value;
+    }
+    return dv.getUint32(0) * MAX_UINT32$1 + dv.getUint32(4);
+  };
+  var numbers = {
+    getUint64: getUint64$3,
+    MAX_UINT32: MAX_UINT32$1
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Functions that generate fragmented MP4s suitable for use with Media
+   * Source Extensions.
+   */
+
+  var MAX_UINT32 = numbers.MAX_UINT32;
+  var box, dinf, esds, ftyp, mdat, mfhd, minf, moof, moov, mvex, mvhd, trak, tkhd, mdia, mdhd, hdlr, sdtp, stbl, stsd, traf, trex, trun$1, types, MAJOR_BRAND, MINOR_VERSION, AVC1_BRAND, VIDEO_HDLR, AUDIO_HDLR, HDLR_TYPES, VMHD, SMHD, DREF, STCO, STSC, STSZ, STTS; // pre-calculate constants
+
+  (function () {
+    var i;
+    types = {
+      avc1: [],
+      // codingname
+      avcC: [],
+      btrt: [],
+      dinf: [],
+      dref: [],
+      esds: [],
+      ftyp: [],
+      hdlr: [],
+      mdat: [],
+      mdhd: [],
+      mdia: [],
+      mfhd: [],
+      minf: [],
+      moof: [],
+      moov: [],
+      mp4a: [],
+      // codingname
+      mvex: [],
+      mvhd: [],
+      pasp: [],
+      sdtp: [],
+      smhd: [],
+      stbl: [],
+      stco: [],
+      stsc: [],
+      stsd: [],
+      stsz: [],
+      stts: [],
+      styp: [],
+      tfdt: [],
+      tfhd: [],
+      traf: [],
+      trak: [],
+      trun: [],
+      trex: [],
+      tkhd: [],
+      vmhd: []
+    }; // In environments where Uint8Array is undefined (e.g., IE8), skip set up so that we
+    // don't throw an error
+
+    if (typeof Uint8Array === 'undefined') {
+      return;
+    }
+    for (i in types) {
+      if (types.hasOwnProperty(i)) {
+        types[i] = [i.charCodeAt(0), i.charCodeAt(1), i.charCodeAt(2), i.charCodeAt(3)];
+      }
+    }
+    MAJOR_BRAND = new Uint8Array(['i'.charCodeAt(0), 's'.charCodeAt(0), 'o'.charCodeAt(0), 'm'.charCodeAt(0)]);
+    AVC1_BRAND = new Uint8Array(['a'.charCodeAt(0), 'v'.charCodeAt(0), 'c'.charCodeAt(0), '1'.charCodeAt(0)]);
+    MINOR_VERSION = new Uint8Array([0, 0, 0, 1]);
+    VIDEO_HDLR = new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00, 0x00, 0x00,
+    // pre_defined
+    0x76, 0x69, 0x64, 0x65,
+    // handler_type: 'vide'
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x56, 0x69, 0x64, 0x65, 0x6f, 0x48, 0x61, 0x6e, 0x64, 0x6c, 0x65, 0x72, 0x00 // name: 'VideoHandler'
+    ]);
+
+    AUDIO_HDLR = new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00, 0x00, 0x00,
+    // pre_defined
+    0x73, 0x6f, 0x75, 0x6e,
+    // handler_type: 'soun'
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x53, 0x6f, 0x75, 0x6e, 0x64, 0x48, 0x61, 0x6e, 0x64, 0x6c, 0x65, 0x72, 0x00 // name: 'SoundHandler'
+    ]);
+
+    HDLR_TYPES = {
+      video: VIDEO_HDLR,
+      audio: AUDIO_HDLR
+    };
+    DREF = new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00, 0x00, 0x01,
+    // entry_count
+    0x00, 0x00, 0x00, 0x0c,
+    // entry_size
+    0x75, 0x72, 0x6c, 0x20,
+    // 'url' type
+    0x00,
+    // version 0
+    0x00, 0x00, 0x01 // entry_flags
+    ]);
+
+    SMHD = new Uint8Array([0x00,
+    // version
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00,
+    // balance, 0 means centered
+    0x00, 0x00 // reserved
+    ]);
+
+    STCO = new Uint8Array([0x00,
+    // version
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00, 0x00, 0x00 // entry_count
+    ]);
+
+    STSC = STCO;
+    STSZ = new Uint8Array([0x00,
+    // version
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00, 0x00, 0x00,
+    // sample_size
+    0x00, 0x00, 0x00, 0x00 // sample_count
+    ]);
+
+    STTS = STCO;
+    VMHD = new Uint8Array([0x00,
+    // version
+    0x00, 0x00, 0x01,
+    // flags
+    0x00, 0x00,
+    // graphicsmode
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00 // opcolor
+    ]);
+  })();
+
+  box = function (type) {
+    var payload = [],
+      size = 0,
+      i,
+      result,
+      view;
+    for (i = 1; i < arguments.length; i++) {
+      payload.push(arguments[i]);
+    }
+    i = payload.length; // calculate the total size we need to allocate
+
+    while (i--) {
+      size += payload[i].byteLength;
+    }
+    result = new Uint8Array(size + 8);
+    view = new DataView(result.buffer, result.byteOffset, result.byteLength);
+    view.setUint32(0, result.byteLength);
+    result.set(type, 4); // copy the payload into the result
+
+    for (i = 0, size = 8; i < payload.length; i++) {
+      result.set(payload[i], size);
+      size += payload[i].byteLength;
+    }
+    return result;
+  };
+  dinf = function () {
+    return box(types.dinf, box(types.dref, DREF));
+  };
+  esds = function (track) {
+    return box(types.esds, new Uint8Array([0x00,
+    // version
+    0x00, 0x00, 0x00,
+    // flags
+    // ES_Descriptor
+    0x03,
+    // tag, ES_DescrTag
+    0x19,
+    // length
+    0x00, 0x00,
+    // ES_ID
+    0x00,
+    // streamDependenceFlag, URL_flag, reserved, streamPriority
+    // DecoderConfigDescriptor
+    0x04,
+    // tag, DecoderConfigDescrTag
+    0x11,
+    // length
+    0x40,
+    // object type
+    0x15,
+    // streamType
+    0x00, 0x06, 0x00,
+    // bufferSizeDB
+    0x00, 0x00, 0xda, 0xc0,
+    // maxBitrate
+    0x00, 0x00, 0xda, 0xc0,
+    // avgBitrate
+    // DecoderSpecificInfo
+    0x05,
+    // tag, DecoderSpecificInfoTag
+    0x02,
+    // length
+    // ISO/IEC 14496-3, AudioSpecificConfig
+    // for samplingFrequencyIndex see ISO/IEC 13818-7:2006, 8.1.3.2.2, Table 35
+    track.audioobjecttype << 3 | track.samplingfrequencyindex >>> 1, track.samplingfrequencyindex << 7 | track.channelcount << 3, 0x06, 0x01, 0x02 // GASpecificConfig
+    ]));
+  };
+
+  ftyp = function () {
+    return box(types.ftyp, MAJOR_BRAND, MINOR_VERSION, MAJOR_BRAND, AVC1_BRAND);
+  };
+  hdlr = function (type) {
+    return box(types.hdlr, HDLR_TYPES[type]);
+  };
+  mdat = function (data) {
+    return box(types.mdat, data);
+  };
+  mdhd = function (track) {
+    var result = new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00, 0x00, 0x02,
+    // creation_time
+    0x00, 0x00, 0x00, 0x03,
+    // modification_time
+    0x00, 0x01, 0x5f, 0x90,
+    // timescale, 90,000 "ticks" per second
+    track.duration >>> 24 & 0xFF, track.duration >>> 16 & 0xFF, track.duration >>> 8 & 0xFF, track.duration & 0xFF,
+    // duration
+    0x55, 0xc4,
+    // 'und' language (undetermined)
+    0x00, 0x00]); // Use the sample rate from the track metadata, when it is
+    // defined. The sample rate can be parsed out of an ADTS header, for
+    // instance.
+
+    if (track.samplerate) {
+      result[12] = track.samplerate >>> 24 & 0xFF;
+      result[13] = track.samplerate >>> 16 & 0xFF;
+      result[14] = track.samplerate >>> 8 & 0xFF;
+      result[15] = track.samplerate & 0xFF;
+    }
+    return box(types.mdhd, result);
+  };
+  mdia = function (track) {
+    return box(types.mdia, mdhd(track), hdlr(track.type), minf(track));
+  };
+  mfhd = function (sequenceNumber) {
+    return box(types.mfhd, new Uint8Array([0x00, 0x00, 0x00, 0x00,
+    // flags
+    (sequenceNumber & 0xFF000000) >> 24, (sequenceNumber & 0xFF0000) >> 16, (sequenceNumber & 0xFF00) >> 8, sequenceNumber & 0xFF // sequence_number
+    ]));
+  };
+
+  minf = function (track) {
+    return box(types.minf, track.type === 'video' ? box(types.vmhd, VMHD) : box(types.smhd, SMHD), dinf(), stbl(track));
+  };
+  moof = function (sequenceNumber, tracks) {
+    var trackFragments = [],
+      i = tracks.length; // build traf boxes for each track fragment
+
+    while (i--) {
+      trackFragments[i] = traf(tracks[i]);
+    }
+    return box.apply(null, [types.moof, mfhd(sequenceNumber)].concat(trackFragments));
+  };
+  /**
+   * Returns a movie box.
+   * @param tracks {array} the tracks associated with this movie
+   * @see ISO/IEC 14496-12:2012(E), section 8.2.1
+   */
+
+  moov = function (tracks) {
+    var i = tracks.length,
+      boxes = [];
+    while (i--) {
+      boxes[i] = trak(tracks[i]);
+    }
+    return box.apply(null, [types.moov, mvhd(0xffffffff)].concat(boxes).concat(mvex(tracks)));
+  };
+  mvex = function (tracks) {
+    var i = tracks.length,
+      boxes = [];
+    while (i--) {
+      boxes[i] = trex(tracks[i]);
+    }
+    return box.apply(null, [types.mvex].concat(boxes));
+  };
+  mvhd = function (duration) {
+    var bytes = new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x00,
+    // flags
+    0x00, 0x00, 0x00, 0x01,
+    // creation_time
+    0x00, 0x00, 0x00, 0x02,
+    // modification_time
+    0x00, 0x01, 0x5f, 0x90,
+    // timescale, 90,000 "ticks" per second
+    (duration & 0xFF000000) >> 24, (duration & 0xFF0000) >> 16, (duration & 0xFF00) >> 8, duration & 0xFF,
+    // duration
+    0x00, 0x01, 0x00, 0x00,
+    // 1.0 rate
+    0x01, 0x00,
+    // 1.0 volume
+    0x00, 0x00,
+    // reserved
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x00,
+    // transformation: unity matrix
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // pre_defined
+    0xff, 0xff, 0xff, 0xff // next_track_ID
+    ]);
+
+    return box(types.mvhd, bytes);
+  };
+  sdtp = function (track) {
+    var samples = track.samples || [],
+      bytes = new Uint8Array(4 + samples.length),
+      flags,
+      i; // leave the full box header (4 bytes) all zero
+    // write the sample table
+
+    for (i = 0; i < samples.length; i++) {
+      flags = samples[i].flags;
+      bytes[i + 4] = flags.dependsOn << 4 | flags.isDependedOn << 2 | flags.hasRedundancy;
+    }
+    return box(types.sdtp, bytes);
+  };
+  stbl = function (track) {
+    return box(types.stbl, stsd(track), box(types.stts, STTS), box(types.stsc, STSC), box(types.stsz, STSZ), box(types.stco, STCO));
+  };
+  (function () {
+    var videoSample, audioSample;
+    stsd = function (track) {
+      return box(types.stsd, new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x01]), track.type === 'video' ? videoSample(track) : audioSample(track));
+    };
+    videoSample = function (track) {
+      var sps = track.sps || [],
+        pps = track.pps || [],
+        sequenceParameterSets = [],
+        pictureParameterSets = [],
+        i,
+        avc1Box; // assemble the SPSs
+
+      for (i = 0; i < sps.length; i++) {
+        sequenceParameterSets.push((sps[i].byteLength & 0xFF00) >>> 8);
+        sequenceParameterSets.push(sps[i].byteLength & 0xFF); // sequenceParameterSetLength
+
+        sequenceParameterSets = sequenceParameterSets.concat(Array.prototype.slice.call(sps[i])); // SPS
+      } // assemble the PPSs
+
+      for (i = 0; i < pps.length; i++) {
+        pictureParameterSets.push((pps[i].byteLength & 0xFF00) >>> 8);
+        pictureParameterSets.push(pps[i].byteLength & 0xFF);
+        pictureParameterSets = pictureParameterSets.concat(Array.prototype.slice.call(pps[i]));
+      }
+      avc1Box = [types.avc1, new Uint8Array([0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x01,
+      // data_reference_index
+      0x00, 0x00,
+      // pre_defined
+      0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      // pre_defined
+      (track.width & 0xff00) >> 8, track.width & 0xff,
+      // width
+      (track.height & 0xff00) >> 8, track.height & 0xff,
+      // height
+      0x00, 0x48, 0x00, 0x00,
+      // horizresolution
+      0x00, 0x48, 0x00, 0x00,
+      // vertresolution
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x01,
+      // frame_count
+      0x13, 0x76, 0x69, 0x64, 0x65, 0x6f, 0x6a, 0x73, 0x2d, 0x63, 0x6f, 0x6e, 0x74, 0x72, 0x69, 0x62, 0x2d, 0x68, 0x6c, 0x73, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      // compressorname
+      0x00, 0x18,
+      // depth = 24
+      0x11, 0x11 // pre_defined = -1
+      ]), box(types.avcC, new Uint8Array([0x01,
+      // configurationVersion
+      track.profileIdc,
+      // AVCProfileIndication
+      track.profileCompatibility,
+      // profile_compatibility
+      track.levelIdc,
+      // AVCLevelIndication
+      0xff // lengthSizeMinusOne, hard-coded to 4 bytes
+      ].concat([sps.length],
+      // numOfSequenceParameterSets
+      sequenceParameterSets,
+      // "SPS"
+      [pps.length],
+      // numOfPictureParameterSets
+      pictureParameterSets // "PPS"
+      ))), box(types.btrt, new Uint8Array([0x00, 0x1c, 0x9c, 0x80,
+      // bufferSizeDB
+      0x00, 0x2d, 0xc6, 0xc0,
+      // maxBitrate
+      0x00, 0x2d, 0xc6, 0xc0 // avgBitrate
+      ]))];
+
+      if (track.sarRatio) {
+        var hSpacing = track.sarRatio[0],
+          vSpacing = track.sarRatio[1];
+        avc1Box.push(box(types.pasp, new Uint8Array([(hSpacing & 0xFF000000) >> 24, (hSpacing & 0xFF0000) >> 16, (hSpacing & 0xFF00) >> 8, hSpacing & 0xFF, (vSpacing & 0xFF000000) >> 24, (vSpacing & 0xFF0000) >> 16, (vSpacing & 0xFF00) >> 8, vSpacing & 0xFF])));
+      }
+      return box.apply(null, avc1Box);
+    };
+    audioSample = function (track) {
+      return box(types.mp4a, new Uint8Array([
+      // SampleEntry, ISO/IEC 14496-12
+      0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x01,
+      // data_reference_index
+      // AudioSampleEntry, ISO/IEC 14496-12
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      (track.channelcount & 0xff00) >> 8, track.channelcount & 0xff,
+      // channelcount
+      (track.samplesize & 0xff00) >> 8, track.samplesize & 0xff,
+      // samplesize
+      0x00, 0x00,
+      // pre_defined
+      0x00, 0x00,
+      // reserved
+      (track.samplerate & 0xff00) >> 8, track.samplerate & 0xff, 0x00, 0x00 // samplerate, 16.16
+      // MP4AudioSampleEntry, ISO/IEC 14496-14
+      ]), esds(track));
+    };
+  })();
+  tkhd = function (track) {
+    var result = new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x07,
+    // flags
+    0x00, 0x00, 0x00, 0x00,
+    // creation_time
+    0x00, 0x00, 0x00, 0x00,
+    // modification_time
+    (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+    // track_ID
+    0x00, 0x00, 0x00, 0x00,
+    // reserved
+    (track.duration & 0xFF000000) >> 24, (track.duration & 0xFF0000) >> 16, (track.duration & 0xFF00) >> 8, track.duration & 0xFF,
+    // duration
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // reserved
+    0x00, 0x00,
+    // layer
+    0x00, 0x00,
+    // alternate_group
+    0x01, 0x00,
+    // non-audio track volume
+    0x00, 0x00,
+    // reserved
+    0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x00,
+    // transformation: unity matrix
+    (track.width & 0xFF00) >> 8, track.width & 0xFF, 0x00, 0x00,
+    // width
+    (track.height & 0xFF00) >> 8, track.height & 0xFF, 0x00, 0x00 // height
+    ]);
+
+    return box(types.tkhd, result);
+  };
+  /**
+   * Generate a track fragment (traf) box. A traf box collects metadata
+   * about tracks in a movie fragment (moof) box.
+   */
+
+  traf = function (track) {
+    var trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun, sampleDependencyTable, dataOffset, upperWordBaseMediaDecodeTime, lowerWordBaseMediaDecodeTime;
+    trackFragmentHeader = box(types.tfhd, new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x3a,
+    // flags
+    (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+    // track_ID
+    0x00, 0x00, 0x00, 0x01,
+    // sample_description_index
+    0x00, 0x00, 0x00, 0x00,
+    // default_sample_duration
+    0x00, 0x00, 0x00, 0x00,
+    // default_sample_size
+    0x00, 0x00, 0x00, 0x00 // default_sample_flags
+    ]));
+
+    upperWordBaseMediaDecodeTime = Math.floor(track.baseMediaDecodeTime / MAX_UINT32);
+    lowerWordBaseMediaDecodeTime = Math.floor(track.baseMediaDecodeTime % MAX_UINT32);
+    trackFragmentDecodeTime = box(types.tfdt, new Uint8Array([0x01,
+    // version 1
+    0x00, 0x00, 0x00,
+    // flags
+    // baseMediaDecodeTime
+    upperWordBaseMediaDecodeTime >>> 24 & 0xFF, upperWordBaseMediaDecodeTime >>> 16 & 0xFF, upperWordBaseMediaDecodeTime >>> 8 & 0xFF, upperWordBaseMediaDecodeTime & 0xFF, lowerWordBaseMediaDecodeTime >>> 24 & 0xFF, lowerWordBaseMediaDecodeTime >>> 16 & 0xFF, lowerWordBaseMediaDecodeTime >>> 8 & 0xFF, lowerWordBaseMediaDecodeTime & 0xFF])); // the data offset specifies the number of bytes from the start of
+    // the containing moof to the first payload byte of the associated
+    // mdat
+
+    dataOffset = 32 +
+    // tfhd
+    20 +
+    // tfdt
+    8 +
+    // traf header
+    16 +
+    // mfhd
+    8 +
+    // moof header
+    8; // mdat header
+    // audio tracks require less metadata
+
+    if (track.type === 'audio') {
+      trackFragmentRun = trun$1(track, dataOffset);
+      return box(types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun);
+    } // video tracks should contain an independent and disposable samples
+    // box (sdtp)
+    // generate one and adjust offsets to match
+
+    sampleDependencyTable = sdtp(track);
+    trackFragmentRun = trun$1(track, sampleDependencyTable.length + dataOffset);
+    return box(types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun, sampleDependencyTable);
+  };
+  /**
+   * Generate a track box.
+   * @param track {object} a track definition
+   * @return {Uint8Array} the track box
+   */
+
+  trak = function (track) {
+    track.duration = track.duration || 0xffffffff;
+    return box(types.trak, tkhd(track), mdia(track));
+  };
+  trex = function (track) {
+    var result = new Uint8Array([0x00,
+    // version 0
+    0x00, 0x00, 0x00,
+    // flags
+    (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+    // track_ID
+    0x00, 0x00, 0x00, 0x01,
+    // default_sample_description_index
+    0x00, 0x00, 0x00, 0x00,
+    // default_sample_duration
+    0x00, 0x00, 0x00, 0x00,
+    // default_sample_size
+    0x00, 0x01, 0x00, 0x01 // default_sample_flags
+    ]); // the last two bytes of default_sample_flags is the sample
+    // degradation priority, a hint about the importance of this sample
+    // relative to others. Lower the degradation priority for all sample
+    // types other than video.
+
+    if (track.type !== 'video') {
+      result[result.length - 1] = 0x00;
+    }
+    return box(types.trex, result);
+  };
+  (function () {
+    var audioTrun, videoTrun, trunHeader; // This method assumes all samples are uniform. That is, if a
+    // duration is present for the first sample, it will be present for
+    // all subsequent samples.
+    // see ISO/IEC 14496-12:2012, Section 8.8.8.1
+
+    trunHeader = function (samples, offset) {
+      var durationPresent = 0,
+        sizePresent = 0,
+        flagsPresent = 0,
+        compositionTimeOffset = 0; // trun flag constants
+
+      if (samples.length) {
+        if (samples[0].duration !== undefined) {
+          durationPresent = 0x1;
+        }
+        if (samples[0].size !== undefined) {
+          sizePresent = 0x2;
+        }
+        if (samples[0].flags !== undefined) {
+          flagsPresent = 0x4;
+        }
+        if (samples[0].compositionTimeOffset !== undefined) {
+          compositionTimeOffset = 0x8;
+        }
+      }
+      return [0x00,
+      // version 0
+      0x00, durationPresent | sizePresent | flagsPresent | compositionTimeOffset, 0x01,
+      // flags
+      (samples.length & 0xFF000000) >>> 24, (samples.length & 0xFF0000) >>> 16, (samples.length & 0xFF00) >>> 8, samples.length & 0xFF,
+      // sample_count
+      (offset & 0xFF000000) >>> 24, (offset & 0xFF0000) >>> 16, (offset & 0xFF00) >>> 8, offset & 0xFF // data_offset
+      ];
+    };
+
+    videoTrun = function (track, offset) {
+      var bytesOffest, bytes, header, samples, sample, i;
+      samples = track.samples || [];
+      offset += 8 + 12 + 16 * samples.length;
+      header = trunHeader(samples, offset);
+      bytes = new Uint8Array(header.length + samples.length * 16);
+      bytes.set(header);
+      bytesOffest = header.length;
+      for (i = 0; i < samples.length; i++) {
+        sample = samples[i];
+        bytes[bytesOffest++] = (sample.duration & 0xFF000000) >>> 24;
+        bytes[bytesOffest++] = (sample.duration & 0xFF0000) >>> 16;
+        bytes[bytesOffest++] = (sample.duration & 0xFF00) >>> 8;
+        bytes[bytesOffest++] = sample.duration & 0xFF; // sample_duration
+
+        bytes[bytesOffest++] = (sample.size & 0xFF000000) >>> 24;
+        bytes[bytesOffest++] = (sample.size & 0xFF0000) >>> 16;
+        bytes[bytesOffest++] = (sample.size & 0xFF00) >>> 8;
+        bytes[bytesOffest++] = sample.size & 0xFF; // sample_size
+
+        bytes[bytesOffest++] = sample.flags.isLeading << 2 | sample.flags.dependsOn;
+        bytes[bytesOffest++] = sample.flags.isDependedOn << 6 | sample.flags.hasRedundancy << 4 | sample.flags.paddingValue << 1 | sample.flags.isNonSyncSample;
+        bytes[bytesOffest++] = sample.flags.degradationPriority & 0xF0 << 8;
+        bytes[bytesOffest++] = sample.flags.degradationPriority & 0x0F; // sample_flags
+
+        bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF000000) >>> 24;
+        bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF0000) >>> 16;
+        bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF00) >>> 8;
+        bytes[bytesOffest++] = sample.compositionTimeOffset & 0xFF; // sample_composition_time_offset
+      }
+
+      return box(types.trun, bytes);
+    };
+    audioTrun = function (track, offset) {
+      var bytes, bytesOffest, header, samples, sample, i;
+      samples = track.samples || [];
+      offset += 8 + 12 + 8 * samples.length;
+      header = trunHeader(samples, offset);
+      bytes = new Uint8Array(header.length + samples.length * 8);
+      bytes.set(header);
+      bytesOffest = header.length;
+      for (i = 0; i < samples.length; i++) {
+        sample = samples[i];
+        bytes[bytesOffest++] = (sample.duration & 0xFF000000) >>> 24;
+        bytes[bytesOffest++] = (sample.duration & 0xFF0000) >>> 16;
+        bytes[bytesOffest++] = (sample.duration & 0xFF00) >>> 8;
+        bytes[bytesOffest++] = sample.duration & 0xFF; // sample_duration
+
+        bytes[bytesOffest++] = (sample.size & 0xFF000000) >>> 24;
+        bytes[bytesOffest++] = (sample.size & 0xFF0000) >>> 16;
+        bytes[bytesOffest++] = (sample.size & 0xFF00) >>> 8;
+        bytes[bytesOffest++] = sample.size & 0xFF; // sample_size
+      }
+
+      return box(types.trun, bytes);
+    };
+    trun$1 = function (track, offset) {
+      if (track.type === 'audio') {
+        return audioTrun(track, offset);
+      }
+      return videoTrun(track, offset);
+    };
+  })();
+  var mp4Generator = {
+    ftyp: ftyp,
+    mdat: mdat,
+    moof: moof,
+    moov: moov,
+    initSegment: function (tracks) {
+      var fileType = ftyp(),
+        movie = moov(tracks),
+        result;
+      result = new Uint8Array(fileType.byteLength + movie.byteLength);
+      result.set(fileType);
+      result.set(movie, fileType.byteLength);
+      return result;
+    }
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+  // composed of the nal units that make up that frame
+  // Also keep track of cummulative data about the frame from the nal units such
+  // as the frame duration, starting pts, etc.
+
+  var groupNalsIntoFrames = function (nalUnits) {
+    var i,
+      currentNal,
+      currentFrame = [],
+      frames = []; // TODO added for LHLS, make sure this is OK
+
+    frames.byteLength = 0;
+    frames.nalCount = 0;
+    frames.duration = 0;
+    currentFrame.byteLength = 0;
+    for (i = 0; i < nalUnits.length; i++) {
+      currentNal = nalUnits[i]; // Split on 'aud'-type nal units
+
+      if (currentNal.nalUnitType === 'access_unit_delimiter_rbsp') {
+        // Since the very first nal unit is expected to be an AUD
+        // only push to the frames array when currentFrame is not empty
+        if (currentFrame.length) {
+          currentFrame.duration = currentNal.dts - currentFrame.dts; // TODO added for LHLS, make sure this is OK
+
+          frames.byteLength += currentFrame.byteLength;
+          frames.nalCount += currentFrame.length;
+          frames.duration += currentFrame.duration;
+          frames.push(currentFrame);
+        }
+        currentFrame = [currentNal];
+        currentFrame.byteLength = currentNal.data.byteLength;
+        currentFrame.pts = currentNal.pts;
+        currentFrame.dts = currentNal.dts;
+      } else {
+        // Specifically flag key frames for ease of use later
+        if (currentNal.nalUnitType === 'slice_layer_without_partitioning_rbsp_idr') {
+          currentFrame.keyFrame = true;
+        }
+        currentFrame.duration = currentNal.dts - currentFrame.dts;
+        currentFrame.byteLength += currentNal.data.byteLength;
+        currentFrame.push(currentNal);
+      }
+    } // For the last frame, use the duration of the previous frame if we
+    // have nothing better to go on
+
+    if (frames.length && (!currentFrame.duration || currentFrame.duration <= 0)) {
+      currentFrame.duration = frames[frames.length - 1].duration;
+    } // Push the final frame
+    // TODO added for LHLS, make sure this is OK
+
+    frames.byteLength += currentFrame.byteLength;
+    frames.nalCount += currentFrame.length;
+    frames.duration += currentFrame.duration;
+    frames.push(currentFrame);
+    return frames;
+  }; // Convert an array of frames into an array of Gop with each Gop being composed
+  // of the frames that make up that Gop
+  // Also keep track of cummulative data about the Gop from the frames such as the
+  // Gop duration, starting pts, etc.
+
+  var groupFramesIntoGops = function (frames) {
+    var i,
+      currentFrame,
+      currentGop = [],
+      gops = []; // We must pre-set some of the values on the Gop since we
+    // keep running totals of these values
+
+    currentGop.byteLength = 0;
+    currentGop.nalCount = 0;
+    currentGop.duration = 0;
+    currentGop.pts = frames[0].pts;
+    currentGop.dts = frames[0].dts; // store some metadata about all the Gops
+
+    gops.byteLength = 0;
+    gops.nalCount = 0;
+    gops.duration = 0;
+    gops.pts = frames[0].pts;
+    gops.dts = frames[0].dts;
+    for (i = 0; i < frames.length; i++) {
+      currentFrame = frames[i];
+      if (currentFrame.keyFrame) {
+        // Since the very first frame is expected to be an keyframe
+        // only push to the gops array when currentGop is not empty
+        if (currentGop.length) {
+          gops.push(currentGop);
+          gops.byteLength += currentGop.byteLength;
+          gops.nalCount += currentGop.nalCount;
+          gops.duration += currentGop.duration;
+        }
+        currentGop = [currentFrame];
+        currentGop.nalCount = currentFrame.length;
+        currentGop.byteLength = currentFrame.byteLength;
+        currentGop.pts = currentFrame.pts;
+        currentGop.dts = currentFrame.dts;
+        currentGop.duration = currentFrame.duration;
+      } else {
+        currentGop.duration += currentFrame.duration;
+        currentGop.nalCount += currentFrame.length;
+        currentGop.byteLength += currentFrame.byteLength;
+        currentGop.push(currentFrame);
+      }
+    }
+    if (gops.length && currentGop.duration <= 0) {
+      currentGop.duration = gops[gops.length - 1].duration;
+    }
+    gops.byteLength += currentGop.byteLength;
+    gops.nalCount += currentGop.nalCount;
+    gops.duration += currentGop.duration; // push the final Gop
+
+    gops.push(currentGop);
+    return gops;
+  };
+  /*
+   * Search for the first keyframe in the GOPs and throw away all frames
+   * until that keyframe. Then extend the duration of the pulled keyframe
+   * and pull the PTS and DTS of the keyframe so that it covers the time
+   * range of the frames that were disposed.
+   *
+   * @param {Array} gops video GOPs
+   * @returns {Array} modified video GOPs
+   */
+
+  var extendFirstKeyFrame = function (gops) {
+    var currentGop;
+    if (!gops[0][0].keyFrame && gops.length > 1) {
+      // Remove the first GOP
+      currentGop = gops.shift();
+      gops.byteLength -= currentGop.byteLength;
+      gops.nalCount -= currentGop.nalCount; // Extend the first frame of what is now the
+      // first gop to cover the time period of the
+      // frames we just removed
+
+      gops[0][0].dts = currentGop.dts;
+      gops[0][0].pts = currentGop.pts;
+      gops[0][0].duration += currentGop.duration;
+    }
+    return gops;
+  };
+  /**
+   * Default sample object
+   * see ISO/IEC 14496-12:2012, section 8.6.4.3
+   */
+
+  var createDefaultSample = function () {
+    return {
+      size: 0,
+      flags: {
+        isLeading: 0,
+        dependsOn: 1,
+        isDependedOn: 0,
+        hasRedundancy: 0,
+        degradationPriority: 0,
+        isNonSyncSample: 1
+      }
+    };
+  };
+  /*
+   * Collates information from a video frame into an object for eventual
+   * entry into an MP4 sample table.
+   *
+   * @param {Object} frame the video frame
+   * @param {Number} dataOffset the byte offset to position the sample
+   * @return {Object} object containing sample table info for a frame
+   */
+
+  var sampleForFrame = function (frame, dataOffset) {
+    var sample = createDefaultSample();
+    sample.dataOffset = dataOffset;
+    sample.compositionTimeOffset = frame.pts - frame.dts;
+    sample.duration = frame.duration;
+    sample.size = 4 * frame.length; // Space for nal unit size
+
+    sample.size += frame.byteLength;
+    if (frame.keyFrame) {
+      sample.flags.dependsOn = 2;
+      sample.flags.isNonSyncSample = 0;
+    }
+    return sample;
+  }; // generate the track's sample table from an array of gops
+
+  var generateSampleTable$1 = function (gops, baseDataOffset) {
+    var h,
+      i,
+      sample,
+      currentGop,
+      currentFrame,
+      dataOffset = baseDataOffset || 0,
+      samples = [];
+    for (h = 0; h < gops.length; h++) {
+      currentGop = gops[h];
+      for (i = 0; i < currentGop.length; i++) {
+        currentFrame = currentGop[i];
+        sample = sampleForFrame(currentFrame, dataOffset);
+        dataOffset += sample.size;
+        samples.push(sample);
+      }
+    }
+    return samples;
+  }; // generate the track's raw mdat data from an array of gops
+
+  var concatenateNalData = function (gops) {
+    var h,
+      i,
+      j,
+      currentGop,
+      currentFrame,
+      currentNal,
+      dataOffset = 0,
+      nalsByteLength = gops.byteLength,
+      numberOfNals = gops.nalCount,
+      totalByteLength = nalsByteLength + 4 * numberOfNals,
+      data = new Uint8Array(totalByteLength),
+      view = new DataView(data.buffer); // For each Gop..
+
+    for (h = 0; h < gops.length; h++) {
+      currentGop = gops[h]; // For each Frame..
+
+      for (i = 0; i < currentGop.length; i++) {
+        currentFrame = currentGop[i]; // For each NAL..
+
+        for (j = 0; j < currentFrame.length; j++) {
+          currentNal = currentFrame[j];
+          view.setUint32(dataOffset, currentNal.data.byteLength);
+          dataOffset += 4;
+          data.set(currentNal.data, dataOffset);
+          dataOffset += currentNal.data.byteLength;
+        }
+      }
+    }
+    return data;
+  }; // generate the track's sample table from a frame
+
+  var generateSampleTableForFrame = function (frame, baseDataOffset) {
+    var sample,
+      dataOffset = baseDataOffset || 0,
+      samples = [];
+    sample = sampleForFrame(frame, dataOffset);
+    samples.push(sample);
+    return samples;
+  }; // generate the track's raw mdat data from a frame
+
+  var concatenateNalDataForFrame = function (frame) {
+    var i,
+      currentNal,
+      dataOffset = 0,
+      nalsByteLength = frame.byteLength,
+      numberOfNals = frame.length,
+      totalByteLength = nalsByteLength + 4 * numberOfNals,
+      data = new Uint8Array(totalByteLength),
+      view = new DataView(data.buffer); // For each NAL..
+
+    for (i = 0; i < frame.length; i++) {
+      currentNal = frame[i];
+      view.setUint32(dataOffset, currentNal.data.byteLength);
+      dataOffset += 4;
+      data.set(currentNal.data, dataOffset);
+      dataOffset += currentNal.data.byteLength;
+    }
+    return data;
+  };
+  var frameUtils$1 = {
+    groupNalsIntoFrames: groupNalsIntoFrames,
+    groupFramesIntoGops: groupFramesIntoGops,
+    extendFirstKeyFrame: extendFirstKeyFrame,
+    generateSampleTable: generateSampleTable$1,
+    concatenateNalData: concatenateNalData,
+    generateSampleTableForFrame: generateSampleTableForFrame,
+    concatenateNalDataForFrame: concatenateNalDataForFrame
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var highPrefix = [33, 16, 5, 32, 164, 27];
+  var lowPrefix = [33, 65, 108, 84, 1, 2, 4, 8, 168, 2, 4, 8, 17, 191, 252];
+  var zeroFill = function (count) {
+    var a = [];
+    while (count--) {
+      a.push(0);
+    }
+    return a;
+  };
+  var makeTable = function (metaTable) {
+    return Object.keys(metaTable).reduce(function (obj, key) {
+      obj[key] = new Uint8Array(metaTable[key].reduce(function (arr, part) {
+        return arr.concat(part);
+      }, []));
+      return obj;
+    }, {});
+  };
+  var silence;
+  var silence_1 = function () {
+    if (!silence) {
+      // Frames-of-silence to use for filling in missing AAC frames
+      var coneOfSilence = {
+        96000: [highPrefix, [227, 64], zeroFill(154), [56]],
+        88200: [highPrefix, [231], zeroFill(170), [56]],
+        64000: [highPrefix, [248, 192], zeroFill(240), [56]],
+        48000: [highPrefix, [255, 192], zeroFill(268), [55, 148, 128], zeroFill(54), [112]],
+        44100: [highPrefix, [255, 192], zeroFill(268), [55, 163, 128], zeroFill(84), [112]],
+        32000: [highPrefix, [255, 192], zeroFill(268), [55, 234], zeroFill(226), [112]],
+        24000: [highPrefix, [255, 192], zeroFill(268), [55, 255, 128], zeroFill(268), [111, 112], zeroFill(126), [224]],
+        16000: [highPrefix, [255, 192], zeroFill(268), [55, 255, 128], zeroFill(268), [111, 255], zeroFill(269), [223, 108], zeroFill(195), [1, 192]],
+        12000: [lowPrefix, zeroFill(268), [3, 127, 248], zeroFill(268), [6, 255, 240], zeroFill(268), [13, 255, 224], zeroFill(268), [27, 253, 128], zeroFill(259), [56]],
+        11025: [lowPrefix, zeroFill(268), [3, 127, 248], zeroFill(268), [6, 255, 240], zeroFill(268), [13, 255, 224], zeroFill(268), [27, 255, 192], zeroFill(268), [55, 175, 128], zeroFill(108), [112]],
+        8000: [lowPrefix, zeroFill(268), [3, 121, 16], zeroFill(47), [7]]
+      };
+      silence = makeTable(coneOfSilence);
+    }
+    return silence;
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var ONE_SECOND_IN_TS$4 = 90000,
+    // 90kHz clock
+    secondsToVideoTs,
+    secondsToAudioTs,
+    videoTsToSeconds,
+    audioTsToSeconds,
+    audioTsToVideoTs,
+    videoTsToAudioTs,
+    metadataTsToSeconds;
+  secondsToVideoTs = function (seconds) {
+    return seconds * ONE_SECOND_IN_TS$4;
+  };
+  secondsToAudioTs = function (seconds, sampleRate) {
+    return seconds * sampleRate;
+  };
+  videoTsToSeconds = function (timestamp) {
+    return timestamp / ONE_SECOND_IN_TS$4;
+  };
+  audioTsToSeconds = function (timestamp, sampleRate) {
+    return timestamp / sampleRate;
+  };
+  audioTsToVideoTs = function (timestamp, sampleRate) {
+    return secondsToVideoTs(audioTsToSeconds(timestamp, sampleRate));
+  };
+  videoTsToAudioTs = function (timestamp, sampleRate) {
+    return secondsToAudioTs(videoTsToSeconds(timestamp), sampleRate);
+  };
+  /**
+   * Adjust ID3 tag or caption timing information by the timeline pts values
+   * (if keepOriginalTimestamps is false) and convert to seconds
+   */
+
+  metadataTsToSeconds = function (timestamp, timelineStartPts, keepOriginalTimestamps) {
+    return videoTsToSeconds(keepOriginalTimestamps ? timestamp : timestamp - timelineStartPts);
+  };
+  var clock$2 = {
+    ONE_SECOND_IN_TS: ONE_SECOND_IN_TS$4,
+    secondsToVideoTs: secondsToVideoTs,
+    secondsToAudioTs: secondsToAudioTs,
+    videoTsToSeconds: videoTsToSeconds,
+    audioTsToSeconds: audioTsToSeconds,
+    audioTsToVideoTs: audioTsToVideoTs,
+    videoTsToAudioTs: videoTsToAudioTs,
+    metadataTsToSeconds: metadataTsToSeconds
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var coneOfSilence = silence_1;
+  var clock$1 = clock$2;
+  /**
+   * Sum the `byteLength` properties of the data in each AAC frame
+   */
+
+  var sumFrameByteLengths = function (array) {
+    var i,
+      currentObj,
+      sum = 0; // sum the byteLength's all each nal unit in the frame
+
+    for (i = 0; i < array.length; i++) {
+      currentObj = array[i];
+      sum += currentObj.data.byteLength;
+    }
+    return sum;
+  }; // Possibly pad (prefix) the audio track with silence if appending this track
+  // would lead to the introduction of a gap in the audio buffer
+
+  var prefixWithSilence = function (track, frames, audioAppendStartTs, videoBaseMediaDecodeTime) {
+    var baseMediaDecodeTimeTs,
+      frameDuration = 0,
+      audioGapDuration = 0,
+      audioFillFrameCount = 0,
+      audioFillDuration = 0,
+      silentFrame,
+      i,
+      firstFrame;
+    if (!frames.length) {
+      return;
+    }
+    baseMediaDecodeTimeTs = clock$1.audioTsToVideoTs(track.baseMediaDecodeTime, track.samplerate); // determine frame clock duration based on sample rate, round up to avoid overfills
+
+    frameDuration = Math.ceil(clock$1.ONE_SECOND_IN_TS / (track.samplerate / 1024));
+    if (audioAppendStartTs && videoBaseMediaDecodeTime) {
+      // insert the shortest possible amount (audio gap or audio to video gap)
+      audioGapDuration = baseMediaDecodeTimeTs - Math.max(audioAppendStartTs, videoBaseMediaDecodeTime); // number of full frames in the audio gap
+
+      audioFillFrameCount = Math.floor(audioGapDuration / frameDuration);
+      audioFillDuration = audioFillFrameCount * frameDuration;
+    } // don't attempt to fill gaps smaller than a single frame or larger
+    // than a half second
+
+    if (audioFillFrameCount < 1 || audioFillDuration > clock$1.ONE_SECOND_IN_TS / 2) {
+      return;
+    }
+    silentFrame = coneOfSilence()[track.samplerate];
+    if (!silentFrame) {
+      // we don't have a silent frame pregenerated for the sample rate, so use a frame
+      // from the content instead
+      silentFrame = frames[0].data;
+    }
+    for (i = 0; i < audioFillFrameCount; i++) {
+      firstFrame = frames[0];
+      frames.splice(0, 0, {
+        data: silentFrame,
+        dts: firstFrame.dts - frameDuration,
+        pts: firstFrame.pts - frameDuration
+      });
+    }
+    track.baseMediaDecodeTime -= Math.floor(clock$1.videoTsToAudioTs(audioFillDuration, track.samplerate));
+    return audioFillDuration;
+  }; // If the audio segment extends before the earliest allowed dts
+  // value, remove AAC frames until starts at or after the earliest
+  // allowed DTS so that we don't end up with a negative baseMedia-
+  // DecodeTime for the audio track
+
+  var trimAdtsFramesByEarliestDts = function (adtsFrames, track, earliestAllowedDts) {
+    if (track.minSegmentDts >= earliestAllowedDts) {
+      return adtsFrames;
+    } // We will need to recalculate the earliest segment Dts
+
+    track.minSegmentDts = Infinity;
+    return adtsFrames.filter(function (currentFrame) {
+      // If this is an allowed frame, keep it and record it's Dts
+      if (currentFrame.dts >= earliestAllowedDts) {
+        track.minSegmentDts = Math.min(track.minSegmentDts, currentFrame.dts);
+        track.minSegmentPts = track.minSegmentDts;
+        return true;
+      } // Otherwise, discard it
+
+      return false;
+    });
+  }; // generate the track's raw mdat data from an array of frames
+
+  var generateSampleTable = function (frames) {
+    var i,
+      currentFrame,
+      samples = [];
+    for (i = 0; i < frames.length; i++) {
+      currentFrame = frames[i];
+      samples.push({
+        size: currentFrame.data.byteLength,
+        duration: 1024 // For AAC audio, all samples contain 1024 samples
+      });
+    }
+
+    return samples;
+  }; // generate the track's sample table from an array of frames
+
+  var concatenateFrameData = function (frames) {
+    var i,
+      currentFrame,
+      dataOffset = 0,
+      data = new Uint8Array(sumFrameByteLengths(frames));
+    for (i = 0; i < frames.length; i++) {
+      currentFrame = frames[i];
+      data.set(currentFrame.data, dataOffset);
+      dataOffset += currentFrame.data.byteLength;
+    }
+    return data;
+  };
+  var audioFrameUtils$1 = {
+    prefixWithSilence: prefixWithSilence,
+    trimAdtsFramesByEarliestDts: trimAdtsFramesByEarliestDts,
+    generateSampleTable: generateSampleTable,
+    concatenateFrameData: concatenateFrameData
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var ONE_SECOND_IN_TS$3 = clock$2.ONE_SECOND_IN_TS;
+  /**
+   * Store information about the start and end of the track and the
+   * duration for each frame/sample we process in order to calculate
+   * the baseMediaDecodeTime
+   */
+
+  var collectDtsInfo = function (track, data) {
+    if (typeof data.pts === 'number') {
+      if (track.timelineStartInfo.pts === undefined) {
+        track.timelineStartInfo.pts = data.pts;
+      }
+      if (track.minSegmentPts === undefined) {
+        track.minSegmentPts = data.pts;
+      } else {
+        track.minSegmentPts = Math.min(track.minSegmentPts, data.pts);
+      }
+      if (track.maxSegmentPts === undefined) {
+        track.maxSegmentPts = data.pts;
+      } else {
+        track.maxSegmentPts = Math.max(track.maxSegmentPts, data.pts);
+      }
+    }
+    if (typeof data.dts === 'number') {
+      if (track.timelineStartInfo.dts === undefined) {
+        track.timelineStartInfo.dts = data.dts;
+      }
+      if (track.minSegmentDts === undefined) {
+        track.minSegmentDts = data.dts;
+      } else {
+        track.minSegmentDts = Math.min(track.minSegmentDts, data.dts);
+      }
+      if (track.maxSegmentDts === undefined) {
+        track.maxSegmentDts = data.dts;
+      } else {
+        track.maxSegmentDts = Math.max(track.maxSegmentDts, data.dts);
+      }
+    }
+  };
+  /**
+   * Clear values used to calculate the baseMediaDecodeTime between
+   * tracks
+   */
+
+  var clearDtsInfo = function (track) {
+    delete track.minSegmentDts;
+    delete track.maxSegmentDts;
+    delete track.minSegmentPts;
+    delete track.maxSegmentPts;
+  };
+  /**
+   * Calculate the track's baseMediaDecodeTime based on the earliest
+   * DTS the transmuxer has ever seen and the minimum DTS for the
+   * current track
+   * @param track {object} track metadata configuration
+   * @param keepOriginalTimestamps {boolean} If true, keep the timestamps
+   *        in the source; false to adjust the first segment to start at 0.
+   */
+
+  var calculateTrackBaseMediaDecodeTime = function (track, keepOriginalTimestamps) {
+    var baseMediaDecodeTime,
+      scale,
+      minSegmentDts = track.minSegmentDts; // Optionally adjust the time so the first segment starts at zero.
+
+    if (!keepOriginalTimestamps) {
+      minSegmentDts -= track.timelineStartInfo.dts;
+    } // track.timelineStartInfo.baseMediaDecodeTime is the location, in time, where
+    // we want the start of the first segment to be placed
+
+    baseMediaDecodeTime = track.timelineStartInfo.baseMediaDecodeTime; // Add to that the distance this segment is from the very first
+
+    baseMediaDecodeTime += minSegmentDts; // baseMediaDecodeTime must not become negative
+
+    baseMediaDecodeTime = Math.max(0, baseMediaDecodeTime);
+    if (track.type === 'audio') {
+      // Audio has a different clock equal to the sampling_rate so we need to
+      // scale the PTS values into the clock rate of the track
+      scale = track.samplerate / ONE_SECOND_IN_TS$3;
+      baseMediaDecodeTime *= scale;
+      baseMediaDecodeTime = Math.floor(baseMediaDecodeTime);
+    }
+    return baseMediaDecodeTime;
+  };
+  var trackDecodeInfo$1 = {
+    clearDtsInfo: clearDtsInfo,
+    calculateTrackBaseMediaDecodeTime: calculateTrackBaseMediaDecodeTime,
+    collectDtsInfo: collectDtsInfo
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Reads in-band caption information from a video elementary
+   * stream. Captions must follow the CEA-708 standard for injection
+   * into an MPEG-2 transport streams.
+   * @see https://en.wikipedia.org/wiki/CEA-708
+   * @see https://www.gpo.gov/fdsys/pkg/CFR-2007-title47-vol1/pdf/CFR-2007-title47-vol1-sec15-119.pdf
+   */
+  // payload type field to indicate how they are to be
+  // interpreted. CEAS-708 caption content is always transmitted with
+  // payload type 0x04.
+
+  var USER_DATA_REGISTERED_ITU_T_T35 = 4,
+    RBSP_TRAILING_BITS = 128;
+  /**
+    * Parse a supplemental enhancement information (SEI) NAL unit.
+    * Stops parsing once a message of type ITU T T35 has been found.
+    *
+    * @param bytes {Uint8Array} the bytes of a SEI NAL unit
+    * @return {object} the parsed SEI payload
+    * @see Rec. ITU-T H.264, 7.3.2.3.1
+    */
+
+  var parseSei = function (bytes) {
+    var i = 0,
+      result = {
+        payloadType: -1,
+        payloadSize: 0
+      },
+      payloadType = 0,
+      payloadSize = 0; // go through the sei_rbsp parsing each each individual sei_message
+
+    while (i < bytes.byteLength) {
+      // stop once we have hit the end of the sei_rbsp
+      if (bytes[i] === RBSP_TRAILING_BITS) {
+        break;
+      } // Parse payload type
+
+      while (bytes[i] === 0xFF) {
+        payloadType += 255;
+        i++;
+      }
+      payloadType += bytes[i++]; // Parse payload size
+
+      while (bytes[i] === 0xFF) {
+        payloadSize += 255;
+        i++;
+      }
+      payloadSize += bytes[i++]; // this sei_message is a 608/708 caption so save it and break
+      // there can only ever be one caption message in a frame's sei
+
+      if (!result.payload && payloadType === USER_DATA_REGISTERED_ITU_T_T35) {
+        var userIdentifier = String.fromCharCode(bytes[i + 3], bytes[i + 4], bytes[i + 5], bytes[i + 6]);
+        if (userIdentifier === 'GA94') {
+          result.payloadType = payloadType;
+          result.payloadSize = payloadSize;
+          result.payload = bytes.subarray(i, i + payloadSize);
+          break;
+        } else {
+          result.payload = void 0;
+        }
+      } // skip the payload and parse the next message
+
+      i += payloadSize;
+      payloadType = 0;
+      payloadSize = 0;
+    }
+    return result;
+  }; // see ANSI/SCTE 128-1 (2013), section 8.1
+
+  var parseUserData = function (sei) {
+    // itu_t_t35_contry_code must be 181 (United States) for
+    // captions
+    if (sei.payload[0] !== 181) {
+      return null;
+    } // itu_t_t35_provider_code should be 49 (ATSC) for captions
+
+    if ((sei.payload[1] << 8 | sei.payload[2]) !== 49) {
+      return null;
+    } // the user_identifier should be "GA94" to indicate ATSC1 data
+
+    if (String.fromCharCode(sei.payload[3], sei.payload[4], sei.payload[5], sei.payload[6]) !== 'GA94') {
+      return null;
+    } // finally, user_data_type_code should be 0x03 for caption data
+
+    if (sei.payload[7] !== 0x03) {
+      return null;
+    } // return the user_data_type_structure and strip the trailing
+    // marker bits
+
+    return sei.payload.subarray(8, sei.payload.length - 1);
+  }; // see CEA-708-D, section 4.4
+
+  var parseCaptionPackets = function (pts, userData) {
+    var results = [],
+      i,
+      count,
+      offset,
+      data; // if this is just filler, return immediately
+
+    if (!(userData[0] & 0x40)) {
+      return results;
+    } // parse out the cc_data_1 and cc_data_2 fields
+
+    count = userData[0] & 0x1f;
+    for (i = 0; i < count; i++) {
+      offset = i * 3;
+      data = {
+        type: userData[offset + 2] & 0x03,
+        pts: pts
+      }; // capture cc data when cc_valid is 1
+
+      if (userData[offset + 2] & 0x04) {
+        data.ccData = userData[offset + 3] << 8 | userData[offset + 4];
+        results.push(data);
+      }
+    }
+    return results;
+  };
+  var discardEmulationPreventionBytes$1 = function (data) {
+    var length = data.byteLength,
+      emulationPreventionBytesPositions = [],
+      i = 1,
+      newLength,
+      newData; // Find all `Emulation Prevention Bytes`
+
+    while (i < length - 2) {
+      if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0x03) {
+        emulationPreventionBytesPositions.push(i + 2);
+        i += 2;
+      } else {
+        i++;
+      }
+    } // If no Emulation Prevention Bytes were found just return the original
+    // array
+
+    if (emulationPreventionBytesPositions.length === 0) {
+      return data;
+    } // Create a new array to hold the NAL unit data
+
+    newLength = length - emulationPreventionBytesPositions.length;
+    newData = new Uint8Array(newLength);
+    var sourceIndex = 0;
+    for (i = 0; i < newLength; sourceIndex++, i++) {
+      if (sourceIndex === emulationPreventionBytesPositions[0]) {
+        // Skip this byte
+        sourceIndex++; // Remove this position index
+
+        emulationPreventionBytesPositions.shift();
+      }
+      newData[i] = data[sourceIndex];
+    }
+    return newData;
+  }; // exports
+
+  var captionPacketParser = {
+    parseSei: parseSei,
+    parseUserData: parseUserData,
+    parseCaptionPackets: parseCaptionPackets,
+    discardEmulationPreventionBytes: discardEmulationPreventionBytes$1,
+    USER_DATA_REGISTERED_ITU_T_T35: USER_DATA_REGISTERED_ITU_T_T35
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Reads in-band caption information from a video elementary
+   * stream. Captions must follow the CEA-708 standard for injection
+   * into an MPEG-2 transport streams.
+   * @see https://en.wikipedia.org/wiki/CEA-708
+   * @see https://www.gpo.gov/fdsys/pkg/CFR-2007-title47-vol1/pdf/CFR-2007-title47-vol1-sec15-119.pdf
+   */
+  // Link To Transport
+  // -----------------
+
+  var Stream$7 = stream;
+  var cea708Parser = captionPacketParser;
+  var CaptionStream$2 = function (options) {
+    options = options || {};
+    CaptionStream$2.prototype.init.call(this); // parse708captions flag, default to true
+
+    this.parse708captions_ = typeof options.parse708captions === 'boolean' ? options.parse708captions : true;
+    this.captionPackets_ = [];
+    this.ccStreams_ = [new Cea608Stream(0, 0),
+    // eslint-disable-line no-use-before-define
+    new Cea608Stream(0, 1),
+    // eslint-disable-line no-use-before-define
+    new Cea608Stream(1, 0),
+    // eslint-disable-line no-use-before-define
+    new Cea608Stream(1, 1) // eslint-disable-line no-use-before-define
+    ];
+
+    if (this.parse708captions_) {
+      this.cc708Stream_ = new Cea708Stream({
+        captionServices: options.captionServices
+      }); // eslint-disable-line no-use-before-define
+    }
+
+    this.reset(); // forward data and done events from CCs to this CaptionStream
+
+    this.ccStreams_.forEach(function (cc) {
+      cc.on('data', this.trigger.bind(this, 'data'));
+      cc.on('partialdone', this.trigger.bind(this, 'partialdone'));
+      cc.on('done', this.trigger.bind(this, 'done'));
+    }, this);
+    if (this.parse708captions_) {
+      this.cc708Stream_.on('data', this.trigger.bind(this, 'data'));
+      this.cc708Stream_.on('partialdone', this.trigger.bind(this, 'partialdone'));
+      this.cc708Stream_.on('done', this.trigger.bind(this, 'done'));
+    }
+  };
+  CaptionStream$2.prototype = new Stream$7();
+  CaptionStream$2.prototype.push = function (event) {
+    var sei, userData, newCaptionPackets; // only examine SEI NALs
+
+    if (event.nalUnitType !== 'sei_rbsp') {
+      return;
+    } // parse the sei
+
+    sei = cea708Parser.parseSei(event.escapedRBSP); // no payload data, skip
+
+    if (!sei.payload) {
+      return;
+    } // ignore everything but user_data_registered_itu_t_t35
+
+    if (sei.payloadType !== cea708Parser.USER_DATA_REGISTERED_ITU_T_T35) {
+      return;
+    } // parse out the user data payload
+
+    userData = cea708Parser.parseUserData(sei); // ignore unrecognized userData
+
+    if (!userData) {
+      return;
+    } // Sometimes, the same segment # will be downloaded twice. To stop the
+    // caption data from being processed twice, we track the latest dts we've
+    // received and ignore everything with a dts before that. However, since
+    // data for a specific dts can be split across packets on either side of
+    // a segment boundary, we need to make sure we *don't* ignore the packets
+    // from the *next* segment that have dts === this.latestDts_. By constantly
+    // tracking the number of packets received with dts === this.latestDts_, we
+    // know how many should be ignored once we start receiving duplicates.
+
+    if (event.dts < this.latestDts_) {
+      // We've started getting older data, so set the flag.
+      this.ignoreNextEqualDts_ = true;
+      return;
+    } else if (event.dts === this.latestDts_ && this.ignoreNextEqualDts_) {
+      this.numSameDts_--;
+      if (!this.numSameDts_) {
+        // We've received the last duplicate packet, time to start processing again
+        this.ignoreNextEqualDts_ = false;
+      }
+      return;
+    } // parse out CC data packets and save them for later
+
+    newCaptionPackets = cea708Parser.parseCaptionPackets(event.pts, userData);
+    this.captionPackets_ = this.captionPackets_.concat(newCaptionPackets);
+    if (this.latestDts_ !== event.dts) {
+      this.numSameDts_ = 0;
+    }
+    this.numSameDts_++;
+    this.latestDts_ = event.dts;
+  };
+  CaptionStream$2.prototype.flushCCStreams = function (flushType) {
+    this.ccStreams_.forEach(function (cc) {
+      return flushType === 'flush' ? cc.flush() : cc.partialFlush();
+    }, this);
+  };
+  CaptionStream$2.prototype.flushStream = function (flushType) {
+    // make sure we actually parsed captions before proceeding
+    if (!this.captionPackets_.length) {
+      this.flushCCStreams(flushType);
+      return;
+    } // In Chrome, the Array#sort function is not stable so add a
+    // presortIndex that we can use to ensure we get a stable-sort
+
+    this.captionPackets_.forEach(function (elem, idx) {
+      elem.presortIndex = idx;
+    }); // sort caption byte-pairs based on their PTS values
+
+    this.captionPackets_.sort(function (a, b) {
+      if (a.pts === b.pts) {
+        return a.presortIndex - b.presortIndex;
+      }
+      return a.pts - b.pts;
+    });
+    this.captionPackets_.forEach(function (packet) {
+      if (packet.type < 2) {
+        // Dispatch packet to the right Cea608Stream
+        this.dispatchCea608Packet(packet);
+      } else {
+        // Dispatch packet to the Cea708Stream
+        this.dispatchCea708Packet(packet);
+      }
+    }, this);
+    this.captionPackets_.length = 0;
+    this.flushCCStreams(flushType);
+  };
+  CaptionStream$2.prototype.flush = function () {
+    return this.flushStream('flush');
+  }; // Only called if handling partial data
+
+  CaptionStream$2.prototype.partialFlush = function () {
+    return this.flushStream('partialFlush');
+  };
+  CaptionStream$2.prototype.reset = function () {
+    this.latestDts_ = null;
+    this.ignoreNextEqualDts_ = false;
+    this.numSameDts_ = 0;
+    this.activeCea608Channel_ = [null, null];
+    this.ccStreams_.forEach(function (ccStream) {
+      ccStream.reset();
+    });
+  }; // From the CEA-608 spec:
+
+  /*
+   * When XDS sub-packets are interleaved with other services, the end of each sub-packet shall be followed
+   * by a control pair to change to a different service. When any of the control codes from 0x10 to 0x1F is
+   * used to begin a control code pair, it indicates the return to captioning or Text data. The control code pair
+   * and subsequent data should then be processed according to the FCC rules. It may be necessary for the
+   * line 21 data encoder to automatically insert a control code pair (i.e. RCL, RU2, RU3, RU4, RDC, or RTD)
+   * to switch to captioning or Text.
+  */
+  // With that in mind, we ignore any data between an XDS control code and a
+  // subsequent closed-captioning control code.
+
+  CaptionStream$2.prototype.dispatchCea608Packet = function (packet) {
+    // NOTE: packet.type is the CEA608 field
+    if (this.setsTextOrXDSActive(packet)) {
+      this.activeCea608Channel_[packet.type] = null;
+    } else if (this.setsChannel1Active(packet)) {
+      this.activeCea608Channel_[packet.type] = 0;
+    } else if (this.setsChannel2Active(packet)) {
+      this.activeCea608Channel_[packet.type] = 1;
+    }
+    if (this.activeCea608Channel_[packet.type] === null) {
+      // If we haven't received anything to set the active channel, or the
+      // packets are Text/XDS data, discard the data; we don't want jumbled
+      // captions
+      return;
+    }
+    this.ccStreams_[(packet.type << 1) + this.activeCea608Channel_[packet.type]].push(packet);
+  };
+  CaptionStream$2.prototype.setsChannel1Active = function (packet) {
+    return (packet.ccData & 0x7800) === 0x1000;
+  };
+  CaptionStream$2.prototype.setsChannel2Active = function (packet) {
+    return (packet.ccData & 0x7800) === 0x1800;
+  };
+  CaptionStream$2.prototype.setsTextOrXDSActive = function (packet) {
+    return (packet.ccData & 0x7100) === 0x0100 || (packet.ccData & 0x78fe) === 0x102a || (packet.ccData & 0x78fe) === 0x182a;
+  };
+  CaptionStream$2.prototype.dispatchCea708Packet = function (packet) {
+    if (this.parse708captions_) {
+      this.cc708Stream_.push(packet);
+    }
+  }; // ----------------------
+  // Session to Application
+  // ----------------------
+  // This hash maps special and extended character codes to their
+  // proper Unicode equivalent. The first one-byte key is just a
+  // non-standard character code. The two-byte keys that follow are
+  // the extended CEA708 character codes, along with the preceding
+  // 0x10 extended character byte to distinguish these codes from
+  // non-extended character codes. Every CEA708 character code that
+  // is not in this object maps directly to a standard unicode
+  // character code.
+  // The transparent space and non-breaking transparent space are
+  // technically not fully supported since there is no code to
+  // make them transparent, so they have normal non-transparent
+  // stand-ins.
+  // The special closed caption (CC) character isn't a standard
+  // unicode character, so a fairly similar unicode character was
+  // chosen in it's place.
+
+  var CHARACTER_TRANSLATION_708 = {
+    0x7f: 0x266a,
+    // ♪
+    0x1020: 0x20,
+    // Transparent Space
+    0x1021: 0xa0,
+    // Nob-breaking Transparent Space
+    0x1025: 0x2026,
+    // …
+    0x102a: 0x0160,
+    // Š
+    0x102c: 0x0152,
+    // Œ
+    0x1030: 0x2588,
+    // █
+    0x1031: 0x2018,
+    // ‘
+    0x1032: 0x2019,
+    // ’
+    0x1033: 0x201c,
+    // “
+    0x1034: 0x201d,
+    // ”
+    0x1035: 0x2022,
+    // •
+    0x1039: 0x2122,
+    // ™
+    0x103a: 0x0161,
+    // š
+    0x103c: 0x0153,
+    // œ
+    0x103d: 0x2120,
+    // ℠
+    0x103f: 0x0178,
+    // Ÿ
+    0x1076: 0x215b,
+    // ⅛
+    0x1077: 0x215c,
+    // ⅜
+    0x1078: 0x215d,
+    // ⅝
+    0x1079: 0x215e,
+    // ⅞
+    0x107a: 0x23d0,
+    // ⏐
+    0x107b: 0x23a4,
+    // ⎤
+    0x107c: 0x23a3,
+    // ⎣
+    0x107d: 0x23af,
+    // ⎯
+    0x107e: 0x23a6,
+    // ⎦
+    0x107f: 0x23a1,
+    // ⎡
+    0x10a0: 0x3138 // ㄸ (CC char)
+  };
+
+  var get708CharFromCode = function (code) {
+    var newCode = CHARACTER_TRANSLATION_708[code] || code;
+    if (code & 0x1000 && code === newCode) {
+      // Invalid extended code
+      return '';
+    }
+    return String.fromCharCode(newCode);
+  };
+  var within708TextBlock = function (b) {
+    return 0x20 <= b && b <= 0x7f || 0xa0 <= b && b <= 0xff;
+  };
+  var Cea708Window = function (windowNum) {
+    this.windowNum = windowNum;
+    this.reset();
+  };
+  Cea708Window.prototype.reset = function () {
+    this.clearText();
+    this.pendingNewLine = false;
+    this.winAttr = {};
+    this.penAttr = {};
+    this.penLoc = {};
+    this.penColor = {}; // These default values are arbitrary,
+    // defineWindow will usually override them
+
+    this.visible = 0;
+    this.rowLock = 0;
+    this.columnLock = 0;
+    this.priority = 0;
+    this.relativePositioning = 0;
+    this.anchorVertical = 0;
+    this.anchorHorizontal = 0;
+    this.anchorPoint = 0;
+    this.rowCount = 1;
+    this.virtualRowCount = this.rowCount + 1;
+    this.columnCount = 41;
+    this.windowStyle = 0;
+    this.penStyle = 0;
+  };
+  Cea708Window.prototype.getText = function () {
+    return this.rows.join('\n');
+  };
+  Cea708Window.prototype.clearText = function () {
+    this.rows = [''];
+    this.rowIdx = 0;
+  };
+  Cea708Window.prototype.newLine = function (pts) {
+    if (this.rows.length >= this.virtualRowCount && typeof this.beforeRowOverflow === 'function') {
+      this.beforeRowOverflow(pts);
+    }
+    if (this.rows.length > 0) {
+      this.rows.push('');
+      this.rowIdx++;
+    } // Show all virtual rows since there's no visible scrolling
+
+    while (this.rows.length > this.virtualRowCount) {
+      this.rows.shift();
+      this.rowIdx--;
+    }
+  };
+  Cea708Window.prototype.isEmpty = function () {
+    if (this.rows.length === 0) {
+      return true;
+    } else if (this.rows.length === 1) {
+      return this.rows[0] === '';
+    }
+    return false;
+  };
+  Cea708Window.prototype.addText = function (text) {
+    this.rows[this.rowIdx] += text;
+  };
+  Cea708Window.prototype.backspace = function () {
+    if (!this.isEmpty()) {
+      var row = this.rows[this.rowIdx];
+      this.rows[this.rowIdx] = row.substr(0, row.length - 1);
+    }
+  };
+  var Cea708Service = function (serviceNum, encoding, stream) {
+    this.serviceNum = serviceNum;
+    this.text = '';
+    this.currentWindow = new Cea708Window(-1);
+    this.windows = [];
+    this.stream = stream; // Try to setup a TextDecoder if an `encoding` value was provided
+
+    if (typeof encoding === 'string') {
+      this.createTextDecoder(encoding);
+    }
+  };
+  /**
+   * Initialize service windows
+   * Must be run before service use
+   *
+   * @param  {Integer}  pts               PTS value
+   * @param  {Function} beforeRowOverflow Function to execute before row overflow of a window
+   */
+
+  Cea708Service.prototype.init = function (pts, beforeRowOverflow) {
+    this.startPts = pts;
+    for (var win = 0; win < 8; win++) {
+      this.windows[win] = new Cea708Window(win);
+      if (typeof beforeRowOverflow === 'function') {
+        this.windows[win].beforeRowOverflow = beforeRowOverflow;
+      }
+    }
+  };
+  /**
+   * Set current window of service to be affected by commands
+   *
+   * @param  {Integer} windowNum Window number
+   */
+
+  Cea708Service.prototype.setCurrentWindow = function (windowNum) {
+    this.currentWindow = this.windows[windowNum];
+  };
+  /**
+   * Try to create a TextDecoder if it is natively supported
+   */
+
+  Cea708Service.prototype.createTextDecoder = function (encoding) {
+    if (typeof TextDecoder === 'undefined') {
+      this.stream.trigger('log', {
+        level: 'warn',
+        message: 'The `encoding` option is unsupported without TextDecoder support'
+      });
+    } else {
+      try {
+        this.textDecoder_ = new TextDecoder(encoding);
+      } catch (error) {
+        this.stream.trigger('log', {
+          level: 'warn',
+          message: 'TextDecoder could not be created with ' + encoding + ' encoding. ' + error
+        });
+      }
+    }
+  };
+  var Cea708Stream = function (options) {
+    options = options || {};
+    Cea708Stream.prototype.init.call(this);
+    var self = this;
+    var captionServices = options.captionServices || {};
+    var captionServiceEncodings = {};
+    var serviceProps; // Get service encodings from captionServices option block
+
+    Object.keys(captionServices).forEach(serviceName => {
+      serviceProps = captionServices[serviceName];
+      if (/^SERVICE/.test(serviceName)) {
+        captionServiceEncodings[serviceName] = serviceProps.encoding;
+      }
+    });
+    this.serviceEncodings = captionServiceEncodings;
+    this.current708Packet = null;
+    this.services = {};
+    this.push = function (packet) {
+      if (packet.type === 3) {
+        // 708 packet start
+        self.new708Packet();
+        self.add708Bytes(packet);
+      } else {
+        if (self.current708Packet === null) {
+          // This should only happen at the start of a file if there's no packet start.
+          self.new708Packet();
+        }
+        self.add708Bytes(packet);
+      }
+    };
+  };
+  Cea708Stream.prototype = new Stream$7();
+  /**
+   * Push current 708 packet, create new 708 packet.
+   */
+
+  Cea708Stream.prototype.new708Packet = function () {
+    if (this.current708Packet !== null) {
+      this.push708Packet();
+    }
+    this.current708Packet = {
+      data: [],
+      ptsVals: []
+    };
+  };
+  /**
+   * Add pts and both bytes from packet into current 708 packet.
+   */
+
+  Cea708Stream.prototype.add708Bytes = function (packet) {
+    var data = packet.ccData;
+    var byte0 = data >>> 8;
+    var byte1 = data & 0xff; // I would just keep a list of packets instead of bytes, but it isn't clear in the spec
+    // that service blocks will always line up with byte pairs.
+
+    this.current708Packet.ptsVals.push(packet.pts);
+    this.current708Packet.data.push(byte0);
+    this.current708Packet.data.push(byte1);
+  };
+  /**
+   * Parse completed 708 packet into service blocks and push each service block.
+   */
+
+  Cea708Stream.prototype.push708Packet = function () {
+    var packet708 = this.current708Packet;
+    var packetData = packet708.data;
+    var serviceNum = null;
+    var blockSize = null;
+    var i = 0;
+    var b = packetData[i++];
+    packet708.seq = b >> 6;
+    packet708.sizeCode = b & 0x3f; // 0b00111111;
+
+    for (; i < packetData.length; i++) {
+      b = packetData[i++];
+      serviceNum = b >> 5;
+      blockSize = b & 0x1f; // 0b00011111
+
+      if (serviceNum === 7 && blockSize > 0) {
+        // Extended service num
+        b = packetData[i++];
+        serviceNum = b;
+      }
+      this.pushServiceBlock(serviceNum, i, blockSize);
+      if (blockSize > 0) {
+        i += blockSize - 1;
+      }
+    }
+  };
+  /**
+   * Parse service block, execute commands, read text.
+   *
+   * Note: While many of these commands serve important purposes,
+   * many others just parse out the parameters or attributes, but
+   * nothing is done with them because this is not a full and complete
+   * implementation of the entire 708 spec.
+   *
+   * @param  {Integer} serviceNum Service number
+   * @param  {Integer} start      Start index of the 708 packet data
+   * @param  {Integer} size       Block size
+   */
+
+  Cea708Stream.prototype.pushServiceBlock = function (serviceNum, start, size) {
+    var b;
+    var i = start;
+    var packetData = this.current708Packet.data;
+    var service = this.services[serviceNum];
+    if (!service) {
+      service = this.initService(serviceNum, i);
+    }
+    for (; i < start + size && i < packetData.length; i++) {
+      b = packetData[i];
+      if (within708TextBlock(b)) {
+        i = this.handleText(i, service);
+      } else if (b === 0x18) {
+        i = this.multiByteCharacter(i, service);
+      } else if (b === 0x10) {
+        i = this.extendedCommands(i, service);
+      } else if (0x80 <= b && b <= 0x87) {
+        i = this.setCurrentWindow(i, service);
+      } else if (0x98 <= b && b <= 0x9f) {
+        i = this.defineWindow(i, service);
+      } else if (b === 0x88) {
+        i = this.clearWindows(i, service);
+      } else if (b === 0x8c) {
+        i = this.deleteWindows(i, service);
+      } else if (b === 0x89) {
+        i = this.displayWindows(i, service);
+      } else if (b === 0x8a) {
+        i = this.hideWindows(i, service);
+      } else if (b === 0x8b) {
+        i = this.toggleWindows(i, service);
+      } else if (b === 0x97) {
+        i = this.setWindowAttributes(i, service);
+      } else if (b === 0x90) {
+        i = this.setPenAttributes(i, service);
+      } else if (b === 0x91) {
+        i = this.setPenColor(i, service);
+      } else if (b === 0x92) {
+        i = this.setPenLocation(i, service);
+      } else if (b === 0x8f) {
+        service = this.reset(i, service);
+      } else if (b === 0x08) {
+        // BS: Backspace
+        service.currentWindow.backspace();
+      } else if (b === 0x0c) {
+        // FF: Form feed
+        service.currentWindow.clearText();
+      } else if (b === 0x0d) {
+        // CR: Carriage return
+        service.currentWindow.pendingNewLine = true;
+      } else if (b === 0x0e) {
+        // HCR: Horizontal carriage return
+        service.currentWindow.clearText();
+      } else if (b === 0x8d) {
+        // DLY: Delay, nothing to do
+        i++;
+      } else ;
+    }
+  };
+  /**
+   * Execute an extended command
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.extendedCommands = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[++i];
+    if (within708TextBlock(b)) {
+      i = this.handleText(i, service, {
+        isExtended: true
+      });
+    }
+    return i;
+  };
+  /**
+   * Get PTS value of a given byte index
+   *
+   * @param  {Integer} byteIndex  Index of the byte
+   * @return {Integer}            PTS
+   */
+
+  Cea708Stream.prototype.getPts = function (byteIndex) {
+    // There's 1 pts value per 2 bytes
+    return this.current708Packet.ptsVals[Math.floor(byteIndex / 2)];
+  };
+  /**
+   * Initializes a service
+   *
+   * @param  {Integer} serviceNum Service number
+   * @return {Service}            Initialized service object
+   */
+
+  Cea708Stream.prototype.initService = function (serviceNum, i) {
+    var serviceName = 'SERVICE' + serviceNum;
+    var self = this;
+    var serviceName;
+    var encoding;
+    if (serviceName in this.serviceEncodings) {
+      encoding = this.serviceEncodings[serviceName];
+    }
+    this.services[serviceNum] = new Cea708Service(serviceNum, encoding, self);
+    this.services[serviceNum].init(this.getPts(i), function (pts) {
+      self.flushDisplayed(pts, self.services[serviceNum]);
+    });
+    return this.services[serviceNum];
+  };
+  /**
+   * Execute text writing to current window
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.handleText = function (i, service, options) {
+    var isExtended = options && options.isExtended;
+    var isMultiByte = options && options.isMultiByte;
+    var packetData = this.current708Packet.data;
+    var extended = isExtended ? 0x1000 : 0x0000;
+    var currentByte = packetData[i];
+    var nextByte = packetData[i + 1];
+    var win = service.currentWindow;
+    var char;
+    var charCodeArray; // Converts an array of bytes to a unicode hex string.
+
+    function toHexString(byteArray) {
+      return byteArray.map(byte => {
+        return ('0' + (byte & 0xFF).toString(16)).slice(-2);
+      }).join('');
+    }
+    if (isMultiByte) {
+      charCodeArray = [currentByte, nextByte];
+      i++;
+    } else {
+      charCodeArray = [currentByte];
+    } // Use the TextDecoder if one was created for this service
+
+    if (service.textDecoder_ && !isExtended) {
+      char = service.textDecoder_.decode(new Uint8Array(charCodeArray));
+    } else {
+      // We assume any multi-byte char without a decoder is unicode.
+      if (isMultiByte) {
+        const unicode = toHexString(charCodeArray); // Takes a unicode hex string and creates a single character.
+
+        char = String.fromCharCode(parseInt(unicode, 16));
+      } else {
+        char = get708CharFromCode(extended | currentByte);
+      }
+    }
+    if (win.pendingNewLine && !win.isEmpty()) {
+      win.newLine(this.getPts(i));
+    }
+    win.pendingNewLine = false;
+    win.addText(char);
+    return i;
+  };
+  /**
+   * Handle decoding of multibyte character
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.multiByteCharacter = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var firstByte = packetData[i + 1];
+    var secondByte = packetData[i + 2];
+    if (within708TextBlock(firstByte) && within708TextBlock(secondByte)) {
+      i = this.handleText(++i, service, {
+        isMultiByte: true
+      });
+    }
+    return i;
+  };
+  /**
+   * Parse and execute the CW# command.
+   *
+   * Set the current window.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.setCurrentWindow = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[i];
+    var windowNum = b & 0x07;
+    service.setCurrentWindow(windowNum);
+    return i;
+  };
+  /**
+   * Parse and execute the DF# command.
+   *
+   * Define a window and set it as the current window.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.defineWindow = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[i];
+    var windowNum = b & 0x07;
+    service.setCurrentWindow(windowNum);
+    var win = service.currentWindow;
+    b = packetData[++i];
+    win.visible = (b & 0x20) >> 5; // v
+
+    win.rowLock = (b & 0x10) >> 4; // rl
+
+    win.columnLock = (b & 0x08) >> 3; // cl
+
+    win.priority = b & 0x07; // p
+
+    b = packetData[++i];
+    win.relativePositioning = (b & 0x80) >> 7; // rp
+
+    win.anchorVertical = b & 0x7f; // av
+
+    b = packetData[++i];
+    win.anchorHorizontal = b; // ah
+
+    b = packetData[++i];
+    win.anchorPoint = (b & 0xf0) >> 4; // ap
+
+    win.rowCount = b & 0x0f; // rc
+
+    b = packetData[++i];
+    win.columnCount = b & 0x3f; // cc
+
+    b = packetData[++i];
+    win.windowStyle = (b & 0x38) >> 3; // ws
+
+    win.penStyle = b & 0x07; // ps
+    // The spec says there are (rowCount+1) "virtual rows"
+
+    win.virtualRowCount = win.rowCount + 1;
+    return i;
+  };
+  /**
+   * Parse and execute the SWA command.
+   *
+   * Set attributes of the current window.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.setWindowAttributes = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[i];
+    var winAttr = service.currentWindow.winAttr;
+    b = packetData[++i];
+    winAttr.fillOpacity = (b & 0xc0) >> 6; // fo
+
+    winAttr.fillRed = (b & 0x30) >> 4; // fr
+
+    winAttr.fillGreen = (b & 0x0c) >> 2; // fg
+
+    winAttr.fillBlue = b & 0x03; // fb
+
+    b = packetData[++i];
+    winAttr.borderType = (b & 0xc0) >> 6; // bt
+
+    winAttr.borderRed = (b & 0x30) >> 4; // br
+
+    winAttr.borderGreen = (b & 0x0c) >> 2; // bg
+
+    winAttr.borderBlue = b & 0x03; // bb
+
+    b = packetData[++i];
+    winAttr.borderType += (b & 0x80) >> 5; // bt
+
+    winAttr.wordWrap = (b & 0x40) >> 6; // ww
+
+    winAttr.printDirection = (b & 0x30) >> 4; // pd
+
+    winAttr.scrollDirection = (b & 0x0c) >> 2; // sd
+
+    winAttr.justify = b & 0x03; // j
+
+    b = packetData[++i];
+    winAttr.effectSpeed = (b & 0xf0) >> 4; // es
+
+    winAttr.effectDirection = (b & 0x0c) >> 2; // ed
+
+    winAttr.displayEffect = b & 0x03; // de
+
+    return i;
+  };
+  /**
+   * Gather text from all displayed windows and push a caption to output.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   */
+
+  Cea708Stream.prototype.flushDisplayed = function (pts, service) {
+    var displayedText = []; // TODO: Positioning not supported, displaying multiple windows will not necessarily
+    // display text in the correct order, but sample files so far have not shown any issue.
+
+    for (var winId = 0; winId < 8; winId++) {
+      if (service.windows[winId].visible && !service.windows[winId].isEmpty()) {
+        displayedText.push(service.windows[winId].getText());
+      }
+    }
+    service.endPts = pts;
+    service.text = displayedText.join('\n\n');
+    this.pushCaption(service);
+    service.startPts = pts;
+  };
+  /**
+   * Push a caption to output if the caption contains text.
+   *
+   * @param  {Service} service  The service object to be affected
+   */
+
+  Cea708Stream.prototype.pushCaption = function (service) {
+    if (service.text !== '') {
+      this.trigger('data', {
+        startPts: service.startPts,
+        endPts: service.endPts,
+        text: service.text,
+        stream: 'cc708_' + service.serviceNum
+      });
+      service.text = '';
+      service.startPts = service.endPts;
+    }
+  };
+  /**
+   * Parse and execute the DSW command.
+   *
+   * Set visible property of windows based on the parsed bitmask.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.displayWindows = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[++i];
+    var pts = this.getPts(i);
+    this.flushDisplayed(pts, service);
+    for (var winId = 0; winId < 8; winId++) {
+      if (b & 0x01 << winId) {
+        service.windows[winId].visible = 1;
+      }
+    }
+    return i;
+  };
+  /**
+   * Parse and execute the HDW command.
+   *
+   * Set visible property of windows based on the parsed bitmask.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.hideWindows = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[++i];
+    var pts = this.getPts(i);
+    this.flushDisplayed(pts, service);
+    for (var winId = 0; winId < 8; winId++) {
+      if (b & 0x01 << winId) {
+        service.windows[winId].visible = 0;
+      }
+    }
+    return i;
+  };
+  /**
+   * Parse and execute the TGW command.
+   *
+   * Set visible property of windows based on the parsed bitmask.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.toggleWindows = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[++i];
+    var pts = this.getPts(i);
+    this.flushDisplayed(pts, service);
+    for (var winId = 0; winId < 8; winId++) {
+      if (b & 0x01 << winId) {
+        service.windows[winId].visible ^= 1;
+      }
+    }
+    return i;
+  };
+  /**
+   * Parse and execute the CLW command.
+   *
+   * Clear text of windows based on the parsed bitmask.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.clearWindows = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[++i];
+    var pts = this.getPts(i);
+    this.flushDisplayed(pts, service);
+    for (var winId = 0; winId < 8; winId++) {
+      if (b & 0x01 << winId) {
+        service.windows[winId].clearText();
+      }
+    }
+    return i;
+  };
+  /**
+   * Parse and execute the DLW command.
+   *
+   * Re-initialize windows based on the parsed bitmask.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.deleteWindows = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[++i];
+    var pts = this.getPts(i);
+    this.flushDisplayed(pts, service);
+    for (var winId = 0; winId < 8; winId++) {
+      if (b & 0x01 << winId) {
+        service.windows[winId].reset();
+      }
+    }
+    return i;
+  };
+  /**
+   * Parse and execute the SPA command.
+   *
+   * Set pen attributes of the current window.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.setPenAttributes = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[i];
+    var penAttr = service.currentWindow.penAttr;
+    b = packetData[++i];
+    penAttr.textTag = (b & 0xf0) >> 4; // tt
+
+    penAttr.offset = (b & 0x0c) >> 2; // o
+
+    penAttr.penSize = b & 0x03; // s
+
+    b = packetData[++i];
+    penAttr.italics = (b & 0x80) >> 7; // i
+
+    penAttr.underline = (b & 0x40) >> 6; // u
+
+    penAttr.edgeType = (b & 0x38) >> 3; // et
+
+    penAttr.fontStyle = b & 0x07; // fs
+
+    return i;
+  };
+  /**
+   * Parse and execute the SPC command.
+   *
+   * Set pen color of the current window.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.setPenColor = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[i];
+    var penColor = service.currentWindow.penColor;
+    b = packetData[++i];
+    penColor.fgOpacity = (b & 0xc0) >> 6; // fo
+
+    penColor.fgRed = (b & 0x30) >> 4; // fr
+
+    penColor.fgGreen = (b & 0x0c) >> 2; // fg
+
+    penColor.fgBlue = b & 0x03; // fb
+
+    b = packetData[++i];
+    penColor.bgOpacity = (b & 0xc0) >> 6; // bo
+
+    penColor.bgRed = (b & 0x30) >> 4; // br
+
+    penColor.bgGreen = (b & 0x0c) >> 2; // bg
+
+    penColor.bgBlue = b & 0x03; // bb
+
+    b = packetData[++i];
+    penColor.edgeRed = (b & 0x30) >> 4; // er
+
+    penColor.edgeGreen = (b & 0x0c) >> 2; // eg
+
+    penColor.edgeBlue = b & 0x03; // eb
+
+    return i;
+  };
+  /**
+   * Parse and execute the SPL command.
+   *
+   * Set pen location of the current window.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Integer}          New index after parsing
+   */
+
+  Cea708Stream.prototype.setPenLocation = function (i, service) {
+    var packetData = this.current708Packet.data;
+    var b = packetData[i];
+    var penLoc = service.currentWindow.penLoc; // Positioning isn't really supported at the moment, so this essentially just inserts a linebreak
+
+    service.currentWindow.pendingNewLine = true;
+    b = packetData[++i];
+    penLoc.row = b & 0x0f; // r
+
+    b = packetData[++i];
+    penLoc.column = b & 0x3f; // c
+
+    return i;
+  };
+  /**
+   * Execute the RST command.
+   *
+   * Reset service to a clean slate. Re-initialize.
+   *
+   * @param  {Integer} i        Current index in the 708 packet
+   * @param  {Service} service  The service object to be affected
+   * @return {Service}          Re-initialized service
+   */
+
+  Cea708Stream.prototype.reset = function (i, service) {
+    var pts = this.getPts(i);
+    this.flushDisplayed(pts, service);
+    return this.initService(service.serviceNum, i);
+  }; // This hash maps non-ASCII, special, and extended character codes to their
+  // proper Unicode equivalent. The first keys that are only a single byte
+  // are the non-standard ASCII characters, which simply map the CEA608 byte
+  // to the standard ASCII/Unicode. The two-byte keys that follow are the CEA608
+  // character codes, but have their MSB bitmasked with 0x03 so that a lookup
+  // can be performed regardless of the field and data channel on which the
+  // character code was received.
+
+  var CHARACTER_TRANSLATION = {
+    0x2a: 0xe1,
+    // á
+    0x5c: 0xe9,
+    // é
+    0x5e: 0xed,
+    // í
+    0x5f: 0xf3,
+    // ó
+    0x60: 0xfa,
+    // ú
+    0x7b: 0xe7,
+    // ç
+    0x7c: 0xf7,
+    // ÷
+    0x7d: 0xd1,
+    // Ñ
+    0x7e: 0xf1,
+    // ñ
+    0x7f: 0x2588,
+    // █
+    0x0130: 0xae,
+    // ®
+    0x0131: 0xb0,
+    // °
+    0x0132: 0xbd,
+    // ½
+    0x0133: 0xbf,
+    // ¿
+    0x0134: 0x2122,
+    // ™
+    0x0135: 0xa2,
+    // ¢
+    0x0136: 0xa3,
+    // £
+    0x0137: 0x266a,
+    // ♪
+    0x0138: 0xe0,
+    // à
+    0x0139: 0xa0,
+    //
+    0x013a: 0xe8,
+    // è
+    0x013b: 0xe2,
+    // â
+    0x013c: 0xea,
+    // ê
+    0x013d: 0xee,
+    // î
+    0x013e: 0xf4,
+    // ô
+    0x013f: 0xfb,
+    // û
+    0x0220: 0xc1,
+    // Á
+    0x0221: 0xc9,
+    // É
+    0x0222: 0xd3,
+    // Ó
+    0x0223: 0xda,
+    // Ú
+    0x0224: 0xdc,
+    // Ü
+    0x0225: 0xfc,
+    // ü
+    0x0226: 0x2018,
+    // ‘
+    0x0227: 0xa1,
+    // ¡
+    0x0228: 0x2a,
+    // *
+    0x0229: 0x27,
+    // '
+    0x022a: 0x2014,
+    // —
+    0x022b: 0xa9,
+    // ©
+    0x022c: 0x2120,
+    // ℠
+    0x022d: 0x2022,
+    // •
+    0x022e: 0x201c,
+    // “
+    0x022f: 0x201d,
+    // ”
+    0x0230: 0xc0,
+    // À
+    0x0231: 0xc2,
+    // Â
+    0x0232: 0xc7,
+    // Ç
+    0x0233: 0xc8,
+    // È
+    0x0234: 0xca,
+    // Ê
+    0x0235: 0xcb,
+    // Ë
+    0x0236: 0xeb,
+    // ë
+    0x0237: 0xce,
+    // Î
+    0x0238: 0xcf,
+    // Ï
+    0x0239: 0xef,
+    // ï
+    0x023a: 0xd4,
+    // Ô
+    0x023b: 0xd9,
+    // Ù
+    0x023c: 0xf9,
+    // ù
+    0x023d: 0xdb,
+    // Û
+    0x023e: 0xab,
+    // «
+    0x023f: 0xbb,
+    // »
+    0x0320: 0xc3,
+    // Ã
+    0x0321: 0xe3,
+    // ã
+    0x0322: 0xcd,
+    // Í
+    0x0323: 0xcc,
+    // Ì
+    0x0324: 0xec,
+    // ì
+    0x0325: 0xd2,
+    // Ò
+    0x0326: 0xf2,
+    // ò
+    0x0327: 0xd5,
+    // Õ
+    0x0328: 0xf5,
+    // õ
+    0x0329: 0x7b,
+    // {
+    0x032a: 0x7d,
+    // }
+    0x032b: 0x5c,
+    // \
+    0x032c: 0x5e,
+    // ^
+    0x032d: 0x5f,
+    // _
+    0x032e: 0x7c,
+    // |
+    0x032f: 0x7e,
+    // ~
+    0x0330: 0xc4,
+    // Ä
+    0x0331: 0xe4,
+    // ä
+    0x0332: 0xd6,
+    // Ö
+    0x0333: 0xf6,
+    // ö
+    0x0334: 0xdf,
+    // ß
+    0x0335: 0xa5,
+    // ¥
+    0x0336: 0xa4,
+    // ¤
+    0x0337: 0x2502,
+    // │
+    0x0338: 0xc5,
+    // Å
+    0x0339: 0xe5,
+    // å
+    0x033a: 0xd8,
+    // Ø
+    0x033b: 0xf8,
+    // ø
+    0x033c: 0x250c,
+    // ┌
+    0x033d: 0x2510,
+    // ┐
+    0x033e: 0x2514,
+    // └
+    0x033f: 0x2518 // ┘
+  };
+
+  var getCharFromCode = function (code) {
+    if (code === null) {
+      return '';
+    }
+    code = CHARACTER_TRANSLATION[code] || code;
+    return String.fromCharCode(code);
+  }; // the index of the last row in a CEA-608 display buffer
+
+  var BOTTOM_ROW = 14; // This array is used for mapping PACs -> row #, since there's no way of
+  // getting it through bit logic.
+
+  var ROWS = [0x1100, 0x1120, 0x1200, 0x1220, 0x1500, 0x1520, 0x1600, 0x1620, 0x1700, 0x1720, 0x1000, 0x1300, 0x1320, 0x1400, 0x1420]; // CEA-608 captions are rendered onto a 34x15 matrix of character
+  // cells. The "bottom" row is the last element in the outer array.
+  // We keep track of positioning information as we go by storing the
+  // number of indentations and the tab offset in this buffer.
+
+  var createDisplayBuffer = function () {
+    var result = [],
+      i = BOTTOM_ROW + 1;
+    while (i--) {
+      result.push({
+        text: '',
+        indent: 0,
+        offset: 0
+      });
+    }
+    return result;
+  };
+  var Cea608Stream = function (field, dataChannel) {
+    Cea608Stream.prototype.init.call(this);
+    this.field_ = field || 0;
+    this.dataChannel_ = dataChannel || 0;
+    this.name_ = 'CC' + ((this.field_ << 1 | this.dataChannel_) + 1);
+    this.setConstants();
+    this.reset();
+    this.push = function (packet) {
+      var data, swap, char0, char1, text; // remove the parity bits
+
+      data = packet.ccData & 0x7f7f; // ignore duplicate control codes; the spec demands they're sent twice
+
+      if (data === this.lastControlCode_) {
+        this.lastControlCode_ = null;
+        return;
+      } // Store control codes
+
+      if ((data & 0xf000) === 0x1000) {
+        this.lastControlCode_ = data;
+      } else if (data !== this.PADDING_) {
+        this.lastControlCode_ = null;
+      }
+      char0 = data >>> 8;
+      char1 = data & 0xff;
+      if (data === this.PADDING_) {
+        return;
+      } else if (data === this.RESUME_CAPTION_LOADING_) {
+        this.mode_ = 'popOn';
+      } else if (data === this.END_OF_CAPTION_) {
+        // If an EOC is received while in paint-on mode, the displayed caption
+        // text should be swapped to non-displayed memory as if it was a pop-on
+        // caption. Because of that, we should explicitly switch back to pop-on
+        // mode
+        this.mode_ = 'popOn';
+        this.clearFormatting(packet.pts); // if a caption was being displayed, it's gone now
+
+        this.flushDisplayed(packet.pts); // flip memory
+
+        swap = this.displayed_;
+        this.displayed_ = this.nonDisplayed_;
+        this.nonDisplayed_ = swap; // start measuring the time to display the caption
+
+        this.startPts_ = packet.pts;
+      } else if (data === this.ROLL_UP_2_ROWS_) {
+        this.rollUpRows_ = 2;
+        this.setRollUp(packet.pts);
+      } else if (data === this.ROLL_UP_3_ROWS_) {
+        this.rollUpRows_ = 3;
+        this.setRollUp(packet.pts);
+      } else if (data === this.ROLL_UP_4_ROWS_) {
+        this.rollUpRows_ = 4;
+        this.setRollUp(packet.pts);
+      } else if (data === this.CARRIAGE_RETURN_) {
+        this.clearFormatting(packet.pts);
+        this.flushDisplayed(packet.pts);
+        this.shiftRowsUp_();
+        this.startPts_ = packet.pts;
+      } else if (data === this.BACKSPACE_) {
+        if (this.mode_ === 'popOn') {
+          this.nonDisplayed_[this.row_].text = this.nonDisplayed_[this.row_].text.slice(0, -1);
+        } else {
+          this.displayed_[this.row_].text = this.displayed_[this.row_].text.slice(0, -1);
+        }
+      } else if (data === this.ERASE_DISPLAYED_MEMORY_) {
+        this.flushDisplayed(packet.pts);
+        this.displayed_ = createDisplayBuffer();
+      } else if (data === this.ERASE_NON_DISPLAYED_MEMORY_) {
+        this.nonDisplayed_ = createDisplayBuffer();
+      } else if (data === this.RESUME_DIRECT_CAPTIONING_) {
+        if (this.mode_ !== 'paintOn') {
+          // NOTE: This should be removed when proper caption positioning is
+          // implemented
+          this.flushDisplayed(packet.pts);
+          this.displayed_ = createDisplayBuffer();
+        }
+        this.mode_ = 'paintOn';
+        this.startPts_ = packet.pts; // Append special characters to caption text
+      } else if (this.isSpecialCharacter(char0, char1)) {
+        // Bitmask char0 so that we can apply character transformations
+        // regardless of field and data channel.
+        // Then byte-shift to the left and OR with char1 so we can pass the
+        // entire character code to `getCharFromCode`.
+        char0 = (char0 & 0x03) << 8;
+        text = getCharFromCode(char0 | char1);
+        this[this.mode_](packet.pts, text);
+        this.column_++; // Append extended characters to caption text
+      } else if (this.isExtCharacter(char0, char1)) {
+        // Extended characters always follow their "non-extended" equivalents.
+        // IE if a "è" is desired, you'll always receive "eè"; non-compliant
+        // decoders are supposed to drop the "è", while compliant decoders
+        // backspace the "e" and insert "è".
+        // Delete the previous character
+        if (this.mode_ === 'popOn') {
+          this.nonDisplayed_[this.row_].text = this.nonDisplayed_[this.row_].text.slice(0, -1);
+        } else {
+          this.displayed_[this.row_].text = this.displayed_[this.row_].text.slice(0, -1);
+        } // Bitmask char0 so that we can apply character transformations
+        // regardless of field and data channel.
+        // Then byte-shift to the left and OR with char1 so we can pass the
+        // entire character code to `getCharFromCode`.
+
+        char0 = (char0 & 0x03) << 8;
+        text = getCharFromCode(char0 | char1);
+        this[this.mode_](packet.pts, text);
+        this.column_++; // Process mid-row codes
+      } else if (this.isMidRowCode(char0, char1)) {
+        // Attributes are not additive, so clear all formatting
+        this.clearFormatting(packet.pts); // According to the standard, mid-row codes
+        // should be replaced with spaces, so add one now
+
+        this[this.mode_](packet.pts, ' ');
+        this.column_++;
+        if ((char1 & 0xe) === 0xe) {
+          this.addFormatting(packet.pts, ['i']);
+        }
+        if ((char1 & 0x1) === 0x1) {
+          this.addFormatting(packet.pts, ['u']);
+        } // Detect offset control codes and adjust cursor
+      } else if (this.isOffsetControlCode(char0, char1)) {
+        // Cursor position is set by indent PAC (see below) in 4-column
+        // increments, with an additional offset code of 1-3 to reach any
+        // of the 32 columns specified by CEA-608. So all we need to do
+        // here is increment the column cursor by the given offset.
+        const offset = char1 & 0x03; // For an offest value 1-3, set the offset for that caption
+        // in the non-displayed array.
+
+        this.nonDisplayed_[this.row_].offset = offset;
+        this.column_ += offset; // Detect PACs (Preamble Address Codes)
+      } else if (this.isPAC(char0, char1)) {
+        // There's no logic for PAC -> row mapping, so we have to just
+        // find the row code in an array and use its index :(
+        var row = ROWS.indexOf(data & 0x1f20); // Configure the caption window if we're in roll-up mode
+
+        if (this.mode_ === 'rollUp') {
+          // This implies that the base row is incorrectly set.
+          // As per the recommendation in CEA-608(Base Row Implementation), defer to the number
+          // of roll-up rows set.
+          if (row - this.rollUpRows_ + 1 < 0) {
+            row = this.rollUpRows_ - 1;
+          }
+          this.setRollUp(packet.pts, row);
+        } // Ensure the row is between 0 and 14, otherwise use the most
+        // recent or default row.
+
+        if (row !== this.row_ && row >= 0 && row <= 14) {
+          // formatting is only persistent for current row
+          this.clearFormatting(packet.pts);
+          this.row_ = row;
+        } // All PACs can apply underline, so detect and apply
+        // (All odd-numbered second bytes set underline)
+
+        if (char1 & 0x1 && this.formatting_.indexOf('u') === -1) {
+          this.addFormatting(packet.pts, ['u']);
+        }
+        if ((data & 0x10) === 0x10) {
+          // We've got an indent level code. Each successive even number
+          // increments the column cursor by 4, so we can get the desired
+          // column position by bit-shifting to the right (to get n/2)
+          // and multiplying by 4.
+          const indentations = (data & 0xe) >> 1;
+          this.column_ = indentations * 4; // add to the number of indentations for positioning
+
+          this.nonDisplayed_[this.row_].indent += indentations;
+        }
+        if (this.isColorPAC(char1)) {
+          // it's a color code, though we only support white, which
+          // can be either normal or italicized. white italics can be
+          // either 0x4e or 0x6e depending on the row, so we just
+          // bitwise-and with 0xe to see if italics should be turned on
+          if ((char1 & 0xe) === 0xe) {
+            this.addFormatting(packet.pts, ['i']);
+          }
+        } // We have a normal character in char0, and possibly one in char1
+      } else if (this.isNormalChar(char0)) {
+        if (char1 === 0x00) {
+          char1 = null;
+        }
+        text = getCharFromCode(char0);
+        text += getCharFromCode(char1);
+        this[this.mode_](packet.pts, text);
+        this.column_ += text.length;
+      } // finish data processing
+    };
+  };
+
+  Cea608Stream.prototype = new Stream$7(); // Trigger a cue point that captures the current state of the
+  // display buffer
+
+  Cea608Stream.prototype.flushDisplayed = function (pts) {
+    const logWarning = index => {
+      this.trigger('log', {
+        level: 'warn',
+        message: 'Skipping a malformed 608 caption at index ' + index + '.'
+      });
+    };
+    const content = [];
+    this.displayed_.forEach((row, i) => {
+      if (row && row.text && row.text.length) {
+        try {
+          // remove spaces from the start and end of the string
+          row.text = row.text.trim();
+        } catch (e) {
+          // Ordinarily, this shouldn't happen. However, caption
+          // parsing errors should not throw exceptions and
+          // break playback.
+          logWarning(i);
+        } // See the below link for more details on the following fields:
+        // https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#positioning-in-cea-608
+
+        if (row.text.length) {
+          content.push({
+            // The text to be displayed in the caption from this specific row, with whitespace removed.
+            text: row.text,
+            // Value between 1 and 15 representing the PAC row used to calculate line height.
+            line: i + 1,
+            // A number representing the indent position by percentage (CEA-608 PAC indent code).
+            // The value will be a number between 10 and 80. Offset is used to add an aditional
+            // value to the position if necessary.
+            position: 10 + Math.min(70, row.indent * 10) + row.offset * 2.5
+          });
+        }
+      } else if (row === undefined || row === null) {
+        logWarning(i);
+      }
+    });
+    if (content.length) {
+      this.trigger('data', {
+        startPts: this.startPts_,
+        endPts: pts,
+        content,
+        stream: this.name_
+      });
+    }
+  };
+  /**
+   * Zero out the data, used for startup and on seek
+   */
+
+  Cea608Stream.prototype.reset = function () {
+    this.mode_ = 'popOn'; // When in roll-up mode, the index of the last row that will
+    // actually display captions. If a caption is shifted to a row
+    // with a lower index than this, it is cleared from the display
+    // buffer
+
+    this.topRow_ = 0;
+    this.startPts_ = 0;
+    this.displayed_ = createDisplayBuffer();
+    this.nonDisplayed_ = createDisplayBuffer();
+    this.lastControlCode_ = null; // Track row and column for proper line-breaking and spacing
+
+    this.column_ = 0;
+    this.row_ = BOTTOM_ROW;
+    this.rollUpRows_ = 2; // This variable holds currently-applied formatting
+
+    this.formatting_ = [];
+  };
+  /**
+   * Sets up control code and related constants for this instance
+   */
+
+  Cea608Stream.prototype.setConstants = function () {
+    // The following attributes have these uses:
+    // ext_ :    char0 for mid-row codes, and the base for extended
+    //           chars (ext_+0, ext_+1, and ext_+2 are char0s for
+    //           extended codes)
+    // control_: char0 for control codes, except byte-shifted to the
+    //           left so that we can do this.control_ | CONTROL_CODE
+    // offset_:  char0 for tab offset codes
+    //
+    // It's also worth noting that control codes, and _only_ control codes,
+    // differ between field 1 and field2. Field 2 control codes are always
+    // their field 1 value plus 1. That's why there's the "| field" on the
+    // control value.
+    if (this.dataChannel_ === 0) {
+      this.BASE_ = 0x10;
+      this.EXT_ = 0x11;
+      this.CONTROL_ = (0x14 | this.field_) << 8;
+      this.OFFSET_ = 0x17;
+    } else if (this.dataChannel_ === 1) {
+      this.BASE_ = 0x18;
+      this.EXT_ = 0x19;
+      this.CONTROL_ = (0x1c | this.field_) << 8;
+      this.OFFSET_ = 0x1f;
+    } // Constants for the LSByte command codes recognized by Cea608Stream. This
+    // list is not exhaustive. For a more comprehensive listing and semantics see
+    // http://www.gpo.gov/fdsys/pkg/CFR-2010-title47-vol1/pdf/CFR-2010-title47-vol1-sec15-119.pdf
+    // Padding
+
+    this.PADDING_ = 0x0000; // Pop-on Mode
+
+    this.RESUME_CAPTION_LOADING_ = this.CONTROL_ | 0x20;
+    this.END_OF_CAPTION_ = this.CONTROL_ | 0x2f; // Roll-up Mode
+
+    this.ROLL_UP_2_ROWS_ = this.CONTROL_ | 0x25;
+    this.ROLL_UP_3_ROWS_ = this.CONTROL_ | 0x26;
+    this.ROLL_UP_4_ROWS_ = this.CONTROL_ | 0x27;
+    this.CARRIAGE_RETURN_ = this.CONTROL_ | 0x2d; // paint-on mode
+
+    this.RESUME_DIRECT_CAPTIONING_ = this.CONTROL_ | 0x29; // Erasure
+
+    this.BACKSPACE_ = this.CONTROL_ | 0x21;
+    this.ERASE_DISPLAYED_MEMORY_ = this.CONTROL_ | 0x2c;
+    this.ERASE_NON_DISPLAYED_MEMORY_ = this.CONTROL_ | 0x2e;
+  };
+  /**
+   * Detects if the 2-byte packet data is a special character
+   *
+   * Special characters have a second byte in the range 0x30 to 0x3f,
+   * with the first byte being 0x11 (for data channel 1) or 0x19 (for
+   * data channel 2).
+   *
+   * @param  {Integer} char0 The first byte
+   * @param  {Integer} char1 The second byte
+   * @return {Boolean}       Whether the 2 bytes are an special character
+   */
+
+  Cea608Stream.prototype.isSpecialCharacter = function (char0, char1) {
+    return char0 === this.EXT_ && char1 >= 0x30 && char1 <= 0x3f;
+  };
+  /**
+   * Detects if the 2-byte packet data is an extended character
+   *
+   * Extended characters have a second byte in the range 0x20 to 0x3f,
+   * with the first byte being 0x12 or 0x13 (for data channel 1) or
+   * 0x1a or 0x1b (for data channel 2).
+   *
+   * @param  {Integer} char0 The first byte
+   * @param  {Integer} char1 The second byte
+   * @return {Boolean}       Whether the 2 bytes are an extended character
+   */
+
+  Cea608Stream.prototype.isExtCharacter = function (char0, char1) {
+    return (char0 === this.EXT_ + 1 || char0 === this.EXT_ + 2) && char1 >= 0x20 && char1 <= 0x3f;
+  };
+  /**
+   * Detects if the 2-byte packet is a mid-row code
+   *
+   * Mid-row codes have a second byte in the range 0x20 to 0x2f, with
+   * the first byte being 0x11 (for data channel 1) or 0x19 (for data
+   * channel 2).
+   *
+   * @param  {Integer} char0 The first byte
+   * @param  {Integer} char1 The second byte
+   * @return {Boolean}       Whether the 2 bytes are a mid-row code
+   */
+
+  Cea608Stream.prototype.isMidRowCode = function (char0, char1) {
+    return char0 === this.EXT_ && char1 >= 0x20 && char1 <= 0x2f;
+  };
+  /**
+   * Detects if the 2-byte packet is an offset control code
+   *
+   * Offset control codes have a second byte in the range 0x21 to 0x23,
+   * with the first byte being 0x17 (for data channel 1) or 0x1f (for
+   * data channel 2).
+   *
+   * @param  {Integer} char0 The first byte
+   * @param  {Integer} char1 The second byte
+   * @return {Boolean}       Whether the 2 bytes are an offset control code
+   */
+
+  Cea608Stream.prototype.isOffsetControlCode = function (char0, char1) {
+    return char0 === this.OFFSET_ && char1 >= 0x21 && char1 <= 0x23;
+  };
+  /**
+   * Detects if the 2-byte packet is a Preamble Address Code
+   *
+   * PACs have a first byte in the range 0x10 to 0x17 (for data channel 1)
+   * or 0x18 to 0x1f (for data channel 2), with the second byte in the
+   * range 0x40 to 0x7f.
+   *
+   * @param  {Integer} char0 The first byte
+   * @param  {Integer} char1 The second byte
+   * @return {Boolean}       Whether the 2 bytes are a PAC
+   */
+
+  Cea608Stream.prototype.isPAC = function (char0, char1) {
+    return char0 >= this.BASE_ && char0 < this.BASE_ + 8 && char1 >= 0x40 && char1 <= 0x7f;
+  };
+  /**
+   * Detects if a packet's second byte is in the range of a PAC color code
+   *
+   * PAC color codes have the second byte be in the range 0x40 to 0x4f, or
+   * 0x60 to 0x6f.
+   *
+   * @param  {Integer} char1 The second byte
+   * @return {Boolean}       Whether the byte is a color PAC
+   */
+
+  Cea608Stream.prototype.isColorPAC = function (char1) {
+    return char1 >= 0x40 && char1 <= 0x4f || char1 >= 0x60 && char1 <= 0x7f;
+  };
+  /**
+   * Detects if a single byte is in the range of a normal character
+   *
+   * Normal text bytes are in the range 0x20 to 0x7f.
+   *
+   * @param  {Integer} char  The byte
+   * @return {Boolean}       Whether the byte is a normal character
+   */
+
+  Cea608Stream.prototype.isNormalChar = function (char) {
+    return char >= 0x20 && char <= 0x7f;
+  };
+  /**
+   * Configures roll-up
+   *
+   * @param  {Integer} pts         Current PTS
+   * @param  {Integer} newBaseRow  Used by PACs to slide the current window to
+   *                               a new position
+   */
+
+  Cea608Stream.prototype.setRollUp = function (pts, newBaseRow) {
+    // Reset the base row to the bottom row when switching modes
+    if (this.mode_ !== 'rollUp') {
+      this.row_ = BOTTOM_ROW;
+      this.mode_ = 'rollUp'; // Spec says to wipe memories when switching to roll-up
+
+      this.flushDisplayed(pts);
+      this.nonDisplayed_ = createDisplayBuffer();
+      this.displayed_ = createDisplayBuffer();
+    }
+    if (newBaseRow !== undefined && newBaseRow !== this.row_) {
+      // move currently displayed captions (up or down) to the new base row
+      for (var i = 0; i < this.rollUpRows_; i++) {
+        this.displayed_[newBaseRow - i] = this.displayed_[this.row_ - i];
+        this.displayed_[this.row_ - i] = {
+          text: '',
+          indent: 0,
+          offset: 0
+        };
+      }
+    }
+    if (newBaseRow === undefined) {
+      newBaseRow = this.row_;
+    }
+    this.topRow_ = newBaseRow - this.rollUpRows_ + 1;
+  }; // Adds the opening HTML tag for the passed character to the caption text,
+  // and keeps track of it for later closing
+
+  Cea608Stream.prototype.addFormatting = function (pts, format) {
+    this.formatting_ = this.formatting_.concat(format);
+    var text = format.reduce(function (text, format) {
+      return text + '<' + format + '>';
+    }, '');
+    this[this.mode_](pts, text);
+  }; // Adds HTML closing tags for current formatting to caption text and
+  // clears remembered formatting
+
+  Cea608Stream.prototype.clearFormatting = function (pts) {
+    if (!this.formatting_.length) {
+      return;
+    }
+    var text = this.formatting_.reverse().reduce(function (text, format) {
+      return text + '</' + format + '>';
+    }, '');
+    this.formatting_ = [];
+    this[this.mode_](pts, text);
+  }; // Mode Implementations
+
+  Cea608Stream.prototype.popOn = function (pts, text) {
+    var baseRow = this.nonDisplayed_[this.row_].text; // buffer characters
+
+    baseRow += text;
+    this.nonDisplayed_[this.row_].text = baseRow;
+  };
+  Cea608Stream.prototype.rollUp = function (pts, text) {
+    var baseRow = this.displayed_[this.row_].text;
+    baseRow += text;
+    this.displayed_[this.row_].text = baseRow;
+  };
+  Cea608Stream.prototype.shiftRowsUp_ = function () {
+    var i; // clear out inactive rows
+
+    for (i = 0; i < this.topRow_; i++) {
+      this.displayed_[i] = {
+        text: '',
+        indent: 0,
+        offset: 0
+      };
+    }
+    for (i = this.row_ + 1; i < BOTTOM_ROW + 1; i++) {
+      this.displayed_[i] = {
+        text: '',
+        indent: 0,
+        offset: 0
+      };
+    } // shift displayed rows up
+
+    for (i = this.topRow_; i < this.row_; i++) {
+      this.displayed_[i] = this.displayed_[i + 1];
+    } // clear out the bottom row
+
+    this.displayed_[this.row_] = {
+      text: '',
+      indent: 0,
+      offset: 0
+    };
+  };
+  Cea608Stream.prototype.paintOn = function (pts, text) {
+    var baseRow = this.displayed_[this.row_].text;
+    baseRow += text;
+    this.displayed_[this.row_].text = baseRow;
+  }; // exports
+
+  var captionStream = {
+    CaptionStream: CaptionStream$2,
+    Cea608Stream: Cea608Stream,
+    Cea708Stream: Cea708Stream
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var streamTypes = {
+    H264_STREAM_TYPE: 0x1B,
+    ADTS_STREAM_TYPE: 0x0F,
+    METADATA_STREAM_TYPE: 0x15
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Accepts program elementary stream (PES) data events and corrects
+   * decode and presentation time stamps to account for a rollover
+   * of the 33 bit value.
+   */
+
+  var Stream$6 = stream;
+  var MAX_TS = 8589934592;
+  var RO_THRESH = 4294967296;
+  var TYPE_SHARED = 'shared';
+  var handleRollover$1 = function (value, reference) {
+    var direction = 1;
+    if (value > reference) {
+      // If the current timestamp value is greater than our reference timestamp and we detect a
+      // timestamp rollover, this means the roll over is happening in the opposite direction.
+      // Example scenario: Enter a long stream/video just after a rollover occurred. The reference
+      // point will be set to a small number, e.g. 1. The user then seeks backwards over the
+      // rollover point. In loading this segment, the timestamp values will be very large,
+      // e.g. 2^33 - 1. Since this comes before the data we loaded previously, we want to adjust
+      // the time stamp to be `value - 2^33`.
+      direction = -1;
+    } // Note: A seek forwards or back that is greater than the RO_THRESH (2^32, ~13 hours) will
+    // cause an incorrect adjustment.
+
+    while (Math.abs(reference - value) > RO_THRESH) {
+      value += direction * MAX_TS;
+    }
+    return value;
+  };
+  var TimestampRolloverStream$1 = function (type) {
+    var lastDTS, referenceDTS;
+    TimestampRolloverStream$1.prototype.init.call(this); // The "shared" type is used in cases where a stream will contain muxed
+    // video and audio. We could use `undefined` here, but having a string
+    // makes debugging a little clearer.
+
+    this.type_ = type || TYPE_SHARED;
+    this.push = function (data) {
+      /**
+       * Rollover stream expects data from elementary stream.
+       * Elementary stream can push forward 2 types of data
+       * - Parsed Video/Audio/Timed-metadata PES (packetized elementary stream) packets
+       * - Tracks metadata from PMT (Program Map Table)
+       * Rollover stream expects pts/dts info to be available, since it stores lastDTS
+       * We should ignore non-PES packets since they may override lastDTS to undefined.
+       * lastDTS is important to signal the next segments
+       * about rollover from the previous segments.
+       */
+      if (data.type === 'metadata') {
+        this.trigger('data', data);
+        return;
+      } // Any "shared" rollover streams will accept _all_ data. Otherwise,
+      // streams will only accept data that matches their type.
+
+      if (this.type_ !== TYPE_SHARED && data.type !== this.type_) {
+        return;
+      }
+      if (referenceDTS === undefined) {
+        referenceDTS = data.dts;
+      }
+      data.dts = handleRollover$1(data.dts, referenceDTS);
+      data.pts = handleRollover$1(data.pts, referenceDTS);
+      lastDTS = data.dts;
+      this.trigger('data', data);
+    };
+    this.flush = function () {
+      referenceDTS = lastDTS;
+      this.trigger('done');
+    };
+    this.endTimeline = function () {
+      this.flush();
+      this.trigger('endedtimeline');
+    };
+    this.discontinuity = function () {
+      referenceDTS = void 0;
+      lastDTS = void 0;
+    };
+    this.reset = function () {
+      this.discontinuity();
+      this.trigger('reset');
+    };
+  };
+  TimestampRolloverStream$1.prototype = new Stream$6();
+  var timestampRolloverStream = {
+    TimestampRolloverStream: TimestampRolloverStream$1,
+    handleRollover: handleRollover$1
+  }; // Once IE11 support is dropped, this function should be removed.
+
+  var typedArrayIndexOf$1 = (typedArray, element, fromIndex) => {
+    if (!typedArray) {
+      return -1;
+    }
+    var currentIndex = fromIndex;
+    for (; currentIndex < typedArray.length; currentIndex++) {
+      if (typedArray[currentIndex] === element) {
+        return currentIndex;
+      }
+    }
+    return -1;
+  };
+  var typedArray = {
+    typedArrayIndexOf: typedArrayIndexOf$1
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Tools for parsing ID3 frame data
+   * @see http://id3.org/id3v2.3.0
+   */
+
+  var typedArrayIndexOf = typedArray.typedArrayIndexOf,
+    // Frames that allow different types of text encoding contain a text
+    // encoding description byte [ID3v2.4.0 section 4.]
+    textEncodingDescriptionByte = {
+      Iso88591: 0x00,
+      // ISO-8859-1, terminated with \0.
+      Utf16: 0x01,
+      // UTF-16 encoded Unicode BOM, terminated with \0\0
+      Utf16be: 0x02,
+      // UTF-16BE encoded Unicode, without BOM, terminated with \0\0
+      Utf8: 0x03 // UTF-8 encoded Unicode, terminated with \0
+    },
+    // return a percent-encoded representation of the specified byte range
+    // @see http://en.wikipedia.org/wiki/Percent-encoding 
+    percentEncode$1 = function (bytes, start, end) {
+      var i,
+        result = '';
+      for (i = start; i < end; i++) {
+        result += '%' + ('00' + bytes[i].toString(16)).slice(-2);
+      }
+      return result;
+    },
+    // return the string representation of the specified byte range,
+    // interpreted as UTf-8.
+    parseUtf8 = function (bytes, start, end) {
+      return decodeURIComponent(percentEncode$1(bytes, start, end));
+    },
+    // return the string representation of the specified byte range,
+    // interpreted as ISO-8859-1.
+    parseIso88591$1 = function (bytes, start, end) {
+      return unescape(percentEncode$1(bytes, start, end)); // jshint ignore:line
+    },
+    parseSyncSafeInteger$1 = function (data) {
+      return data[0] << 21 | data[1] << 14 | data[2] << 7 | data[3];
+    },
+    frameParsers = {
+      'APIC': function (frame) {
+        var i = 1,
+          mimeTypeEndIndex,
+          descriptionEndIndex,
+          LINK_MIME_TYPE = '-->';
+        if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+          // ignore frames with unrecognized character encodings
+          return;
+        } // parsing fields [ID3v2.4.0 section 4.14.]
+
+        mimeTypeEndIndex = typedArrayIndexOf(frame.data, 0, i);
+        if (mimeTypeEndIndex < 0) {
+          // malformed frame
+          return;
+        } // parsing Mime type field (terminated with \0)
+
+        frame.mimeType = parseIso88591$1(frame.data, i, mimeTypeEndIndex);
+        i = mimeTypeEndIndex + 1; // parsing 1-byte Picture Type field
+
+        frame.pictureType = frame.data[i];
+        i++;
+        descriptionEndIndex = typedArrayIndexOf(frame.data, 0, i);
+        if (descriptionEndIndex < 0) {
+          // malformed frame
+          return;
+        } // parsing Description field (terminated with \0)
+
+        frame.description = parseUtf8(frame.data, i, descriptionEndIndex);
+        i = descriptionEndIndex + 1;
+        if (frame.mimeType === LINK_MIME_TYPE) {
+          // parsing Picture Data field as URL (always represented as ISO-8859-1 [ID3v2.4.0 section 4.])
+          frame.url = parseIso88591$1(frame.data, i, frame.data.length);
+        } else {
+          // parsing Picture Data field as binary data
+          frame.pictureData = frame.data.subarray(i, frame.data.length);
+        }
+      },
+      'T*': function (frame) {
+        if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+          // ignore frames with unrecognized character encodings
+          return;
+        } // parse text field, do not include null terminator in the frame value
+        // frames that allow different types of encoding contain terminated text [ID3v2.4.0 section 4.]
+
+        frame.value = parseUtf8(frame.data, 1, frame.data.length).replace(/\0*$/, ''); // text information frames supports multiple strings, stored as a terminator separated list [ID3v2.4.0 section 4.2.]
+
+        frame.values = frame.value.split('\0');
+      },
+      'TXXX': function (frame) {
+        var descriptionEndIndex;
+        if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+          // ignore frames with unrecognized character encodings
+          return;
+        }
+        descriptionEndIndex = typedArrayIndexOf(frame.data, 0, 1);
+        if (descriptionEndIndex === -1) {
+          return;
+        } // parse the text fields
+
+        frame.description = parseUtf8(frame.data, 1, descriptionEndIndex); // do not include the null terminator in the tag value
+        // frames that allow different types of encoding contain terminated text
+        // [ID3v2.4.0 section 4.]
+
+        frame.value = parseUtf8(frame.data, descriptionEndIndex + 1, frame.data.length).replace(/\0*$/, '');
+        frame.data = frame.value;
+      },
+      'W*': function (frame) {
+        // parse URL field; URL fields are always represented as ISO-8859-1 [ID3v2.4.0 section 4.]
+        // if the value is followed by a string termination all the following information should be ignored [ID3v2.4.0 section 4.3]
+        frame.url = parseIso88591$1(frame.data, 0, frame.data.length).replace(/\0.*$/, '');
+      },
+      'WXXX': function (frame) {
+        var descriptionEndIndex;
+        if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+          // ignore frames with unrecognized character encodings
+          return;
+        }
+        descriptionEndIndex = typedArrayIndexOf(frame.data, 0, 1);
+        if (descriptionEndIndex === -1) {
+          return;
+        } // parse the description and URL fields
+
+        frame.description = parseUtf8(frame.data, 1, descriptionEndIndex); // URL fields are always represented as ISO-8859-1 [ID3v2.4.0 section 4.]
+        // if the value is followed by a string termination all the following information
+        // should be ignored [ID3v2.4.0 section 4.3]
+
+        frame.url = parseIso88591$1(frame.data, descriptionEndIndex + 1, frame.data.length).replace(/\0.*$/, '');
+      },
+      'PRIV': function (frame) {
+        var i;
+        for (i = 0; i < frame.data.length; i++) {
+          if (frame.data[i] === 0) {
+            // parse the description and URL fields
+            frame.owner = parseIso88591$1(frame.data, 0, i);
+            break;
+          }
+        }
+        frame.privateData = frame.data.subarray(i + 1);
+        frame.data = frame.privateData;
+      }
+    };
+  var parseId3Frames$1 = function (data) {
+    var frameSize,
+      frameHeader,
+      frameStart = 10,
+      tagSize = 0,
+      frames = []; // If we don't have enough data for a header, 10 bytes, 
+    // or 'ID3' in the first 3 bytes this is not a valid ID3 tag.
+
+    if (data.length < 10 || data[0] !== 'I'.charCodeAt(0) || data[1] !== 'D'.charCodeAt(0) || data[2] !== '3'.charCodeAt(0)) {
+      return;
+    } // the frame size is transmitted as a 28-bit integer in the
+    // last four bytes of the ID3 header.
+    // The most significant bit of each byte is dropped and the
+    // results concatenated to recover the actual value.
+
+    tagSize = parseSyncSafeInteger$1(data.subarray(6, 10)); // ID3 reports the tag size excluding the header but it's more
+    // convenient for our comparisons to include it
+
+    tagSize += 10; // check bit 6 of byte 5 for the extended header flag.
+
+    var hasExtendedHeader = data[5] & 0x40;
+    if (hasExtendedHeader) {
+      // advance the frame start past the extended header
+      frameStart += 4; // header size field
+
+      frameStart += parseSyncSafeInteger$1(data.subarray(10, 14));
+      tagSize -= parseSyncSafeInteger$1(data.subarray(16, 20)); // clip any padding off the end
+    } // parse one or more ID3 frames
+    // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+    do {
+      // determine the number of bytes in this frame
+      frameSize = parseSyncSafeInteger$1(data.subarray(frameStart + 4, frameStart + 8));
+      if (frameSize < 1) {
+        break;
+      }
+      frameHeader = String.fromCharCode(data[frameStart], data[frameStart + 1], data[frameStart + 2], data[frameStart + 3]);
+      var frame = {
+        id: frameHeader,
+        data: data.subarray(frameStart + 10, frameStart + frameSize + 10)
+      };
+      frame.key = frame.id; // parse frame values
+
+      if (frameParsers[frame.id]) {
+        // use frame specific parser
+        frameParsers[frame.id](frame);
+      } else if (frame.id[0] === 'T') {
+        // use text frame generic parser
+        frameParsers['T*'](frame);
+      } else if (frame.id[0] === 'W') {
+        // use URL link frame generic parser
+        frameParsers['W*'](frame);
+      }
+      frames.push(frame);
+      frameStart += 10; // advance past the frame header
+
+      frameStart += frameSize; // advance past the frame body
+    } while (frameStart < tagSize);
+    return frames;
+  };
+  var parseId3 = {
+    parseId3Frames: parseId3Frames$1,
+    parseSyncSafeInteger: parseSyncSafeInteger$1,
+    frameParsers: frameParsers
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Accepts program elementary stream (PES) data events and parses out
+   * ID3 metadata from them, if present.
+   * @see http://id3.org/id3v2.3.0
+   */
+
+  var Stream$5 = stream,
+    StreamTypes$3 = streamTypes,
+    id3 = parseId3,
+    MetadataStream;
+  MetadataStream = function (options) {
+    var settings = {
+        // the bytes of the program-level descriptor field in MP2T
+        // see ISO/IEC 13818-1:2013 (E), section 2.6 "Program and
+        // program element descriptors"
+        descriptor: options && options.descriptor
+      },
+      // the total size in bytes of the ID3 tag being parsed
+      tagSize = 0,
+      // tag data that is not complete enough to be parsed
+      buffer = [],
+      // the total number of bytes currently in the buffer
+      bufferSize = 0,
+      i;
+    MetadataStream.prototype.init.call(this); // calculate the text track in-band metadata track dispatch type
+    // https://html.spec.whatwg.org/multipage/embedded-content.html#steps-to-expose-a-media-resource-specific-text-track
+
+    this.dispatchType = StreamTypes$3.METADATA_STREAM_TYPE.toString(16);
+    if (settings.descriptor) {
+      for (i = 0; i < settings.descriptor.length; i++) {
+        this.dispatchType += ('00' + settings.descriptor[i].toString(16)).slice(-2);
+      }
+    }
+    this.push = function (chunk) {
+      var tag, frameStart, frameSize, frame, i, frameHeader;
+      if (chunk.type !== 'timed-metadata') {
+        return;
+      } // if data_alignment_indicator is set in the PES header,
+      // we must have the start of a new ID3 tag. Assume anything
+      // remaining in the buffer was malformed and throw it out
+
+      if (chunk.dataAlignmentIndicator) {
+        bufferSize = 0;
+        buffer.length = 0;
+      } // ignore events that don't look like ID3 data
+
+      if (buffer.length === 0 && (chunk.data.length < 10 || chunk.data[0] !== 'I'.charCodeAt(0) || chunk.data[1] !== 'D'.charCodeAt(0) || chunk.data[2] !== '3'.charCodeAt(0))) {
+        this.trigger('log', {
+          level: 'warn',
+          message: 'Skipping unrecognized metadata packet'
+        });
+        return;
+      } // add this chunk to the data we've collected so far
+
+      buffer.push(chunk);
+      bufferSize += chunk.data.byteLength; // grab the size of the entire frame from the ID3 header
+
+      if (buffer.length === 1) {
+        // the frame size is transmitted as a 28-bit integer in the
+        // last four bytes of the ID3 header.
+        // The most significant bit of each byte is dropped and the
+        // results concatenated to recover the actual value.
+        tagSize = id3.parseSyncSafeInteger(chunk.data.subarray(6, 10)); // ID3 reports the tag size excluding the header but it's more
+        // convenient for our comparisons to include it
+
+        tagSize += 10;
+      } // if the entire frame has not arrived, wait for more data
+
+      if (bufferSize < tagSize) {
+        return;
+      } // collect the entire frame so it can be parsed
+
+      tag = {
+        data: new Uint8Array(tagSize),
+        frames: [],
+        pts: buffer[0].pts,
+        dts: buffer[0].dts
+      };
+      for (i = 0; i < tagSize;) {
+        tag.data.set(buffer[0].data.subarray(0, tagSize - i), i);
+        i += buffer[0].data.byteLength;
+        bufferSize -= buffer[0].data.byteLength;
+        buffer.shift();
+      } // find the start of the first frame and the end of the tag
+
+      frameStart = 10;
+      if (tag.data[5] & 0x40) {
+        // advance the frame start past the extended header
+        frameStart += 4; // header size field
+
+        frameStart += id3.parseSyncSafeInteger(tag.data.subarray(10, 14)); // clip any padding off the end
+
+        tagSize -= id3.parseSyncSafeInteger(tag.data.subarray(16, 20));
+      } // parse one or more ID3 frames
+      // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+      do {
+        // determine the number of bytes in this frame
+        frameSize = id3.parseSyncSafeInteger(tag.data.subarray(frameStart + 4, frameStart + 8));
+        if (frameSize < 1) {
+          this.trigger('log', {
+            level: 'warn',
+            message: 'Malformed ID3 frame encountered. Skipping remaining metadata parsing.'
+          }); // If the frame is malformed, don't parse any further frames but allow previous valid parsed frames
+          // to be sent along.
+
+          break;
+        }
+        frameHeader = String.fromCharCode(tag.data[frameStart], tag.data[frameStart + 1], tag.data[frameStart + 2], tag.data[frameStart + 3]);
+        frame = {
+          id: frameHeader,
+          data: tag.data.subarray(frameStart + 10, frameStart + frameSize + 10)
+        };
+        frame.key = frame.id; // parse frame values
+
+        if (id3.frameParsers[frame.id]) {
+          // use frame specific parser
+          id3.frameParsers[frame.id](frame);
+        } else if (frame.id[0] === 'T') {
+          // use text frame generic parser
+          id3.frameParsers['T*'](frame);
+        } else if (frame.id[0] === 'W') {
+          // use URL link frame generic parser
+          id3.frameParsers['W*'](frame);
+        } // handle the special PRIV frame used to indicate the start
+        // time for raw AAC data
+
+        if (frame.owner === 'com.apple.streaming.transportStreamTimestamp') {
+          var d = frame.data,
+            size = (d[3] & 0x01) << 30 | d[4] << 22 | d[5] << 14 | d[6] << 6 | d[7] >>> 2;
+          size *= 4;
+          size += d[7] & 0x03;
+          frame.timeStamp = size; // in raw AAC, all subsequent data will be timestamped based
+          // on the value of this frame
+          // we couldn't have known the appropriate pts and dts before
+          // parsing this ID3 tag so set those values now
+
+          if (tag.pts === undefined && tag.dts === undefined) {
+            tag.pts = frame.timeStamp;
+            tag.dts = frame.timeStamp;
+          }
+          this.trigger('timestamp', frame);
+        }
+        tag.frames.push(frame);
+        frameStart += 10; // advance past the frame header
+
+        frameStart += frameSize; // advance past the frame body
+      } while (frameStart < tagSize);
+      this.trigger('data', tag);
+    };
+  };
+  MetadataStream.prototype = new Stream$5();
+  var metadataStream = MetadataStream;
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * A stream-based mp2t to mp4 converter. This utility can be used to
+   * deliver mp4s to a SourceBuffer on platforms that support native
+   * Media Source Extensions.
+   */
+
+  var Stream$4 = stream,
+    CaptionStream$1 = captionStream,
+    StreamTypes$2 = streamTypes,
+    TimestampRolloverStream = timestampRolloverStream.TimestampRolloverStream; // object types
+
+  var TransportPacketStream, TransportParseStream, ElementaryStream; // constants
+
+  var MP2T_PACKET_LENGTH$1 = 188,
+    // bytes
+    SYNC_BYTE$1 = 0x47;
+  /**
+   * Splits an incoming stream of binary data into MPEG-2 Transport
+   * Stream packets.
+   */
+
+  TransportPacketStream = function () {
+    var buffer = new Uint8Array(MP2T_PACKET_LENGTH$1),
+      bytesInBuffer = 0;
+    TransportPacketStream.prototype.init.call(this); // Deliver new bytes to the stream.
+
+    /**
+     * Split a stream of data into M2TS packets
+    **/
+
+    this.push = function (bytes) {
+      var startIndex = 0,
+        endIndex = MP2T_PACKET_LENGTH$1,
+        everything; // If there are bytes remaining from the last segment, prepend them to the
+      // bytes that were pushed in
+
+      if (bytesInBuffer) {
+        everything = new Uint8Array(bytes.byteLength + bytesInBuffer);
+        everything.set(buffer.subarray(0, bytesInBuffer));
+        everything.set(bytes, bytesInBuffer);
+        bytesInBuffer = 0;
+      } else {
+        everything = bytes;
+      } // While we have enough data for a packet
+
+      while (endIndex < everything.byteLength) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (everything[startIndex] === SYNC_BYTE$1 && everything[endIndex] === SYNC_BYTE$1) {
+          // We found a packet so emit it and jump one whole packet forward in
+          // the stream
+          this.trigger('data', everything.subarray(startIndex, endIndex));
+          startIndex += MP2T_PACKET_LENGTH$1;
+          endIndex += MP2T_PACKET_LENGTH$1;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex++;
+        endIndex++;
+      } // If there was some data left over at the end of the segment that couldn't
+      // possibly be a whole packet, keep it because it might be the start of a packet
+      // that continues in the next segment
+
+      if (startIndex < everything.byteLength) {
+        buffer.set(everything.subarray(startIndex), 0);
+        bytesInBuffer = everything.byteLength - startIndex;
+      }
+    };
+    /**
+     * Passes identified M2TS packets to the TransportParseStream to be parsed
+    **/
+
+    this.flush = function () {
+      // If the buffer contains a whole packet when we are being flushed, emit it
+      // and empty the buffer. Otherwise hold onto the data because it may be
+      // important for decoding the next segment
+      if (bytesInBuffer === MP2T_PACKET_LENGTH$1 && buffer[0] === SYNC_BYTE$1) {
+        this.trigger('data', buffer);
+        bytesInBuffer = 0;
+      }
+      this.trigger('done');
+    };
+    this.endTimeline = function () {
+      this.flush();
+      this.trigger('endedtimeline');
+    };
+    this.reset = function () {
+      bytesInBuffer = 0;
+      this.trigger('reset');
+    };
+  };
+  TransportPacketStream.prototype = new Stream$4();
+  /**
+   * Accepts an MP2T TransportPacketStream and emits data events with parsed
+   * forms of the individual transport stream packets.
+   */
+
+  TransportParseStream = function () {
+    var parsePsi, parsePat, parsePmt, self;
+    TransportParseStream.prototype.init.call(this);
+    self = this;
+    this.packetsWaitingForPmt = [];
+    this.programMapTable = undefined;
+    parsePsi = function (payload, psi) {
+      var offset = 0; // PSI packets may be split into multiple sections and those
+      // sections may be split into multiple packets. If a PSI
+      // section starts in this packet, the payload_unit_start_indicator
+      // will be true and the first byte of the payload will indicate
+      // the offset from the current position to the start of the
+      // section.
+
+      if (psi.payloadUnitStartIndicator) {
+        offset += payload[offset] + 1;
+      }
+      if (psi.type === 'pat') {
+        parsePat(payload.subarray(offset), psi);
+      } else {
+        parsePmt(payload.subarray(offset), psi);
+      }
+    };
+    parsePat = function (payload, pat) {
+      pat.section_number = payload[7]; // eslint-disable-line camelcase
+
+      pat.last_section_number = payload[8]; // eslint-disable-line camelcase
+      // skip the PSI header and parse the first PMT entry
+
+      self.pmtPid = (payload[10] & 0x1F) << 8 | payload[11];
+      pat.pmtPid = self.pmtPid;
+    };
+    /**
+     * Parse out the relevant fields of a Program Map Table (PMT).
+     * @param payload {Uint8Array} the PMT-specific portion of an MP2T
+     * packet. The first byte in this array should be the table_id
+     * field.
+     * @param pmt {object} the object that should be decorated with
+     * fields parsed from the PMT.
+     */
+
+    parsePmt = function (payload, pmt) {
+      var sectionLength, tableEnd, programInfoLength, offset; // PMTs can be sent ahead of the time when they should actually
+      // take effect. We don't believe this should ever be the case
+      // for HLS but we'll ignore "forward" PMT declarations if we see
+      // them. Future PMT declarations have the current_next_indicator
+      // set to zero.
+
+      if (!(payload[5] & 0x01)) {
+        return;
+      } // overwrite any existing program map table
+
+      self.programMapTable = {
+        video: null,
+        audio: null,
+        'timed-metadata': {}
+      }; // the mapping table ends at the end of the current section
+
+      sectionLength = (payload[1] & 0x0f) << 8 | payload[2];
+      tableEnd = 3 + sectionLength - 4; // to determine where the table is, we have to figure out how
+      // long the program info descriptors are
+
+      programInfoLength = (payload[10] & 0x0f) << 8 | payload[11]; // advance the offset to the first entry in the mapping table
+
+      offset = 12 + programInfoLength;
+      while (offset < tableEnd) {
+        var streamType = payload[offset];
+        var pid = (payload[offset + 1] & 0x1F) << 8 | payload[offset + 2]; // only map a single elementary_pid for audio and video stream types
+        // TODO: should this be done for metadata too? for now maintain behavior of
+        //       multiple metadata streams
+
+        if (streamType === StreamTypes$2.H264_STREAM_TYPE && self.programMapTable.video === null) {
+          self.programMapTable.video = pid;
+        } else if (streamType === StreamTypes$2.ADTS_STREAM_TYPE && self.programMapTable.audio === null) {
+          self.programMapTable.audio = pid;
+        } else if (streamType === StreamTypes$2.METADATA_STREAM_TYPE) {
+          // map pid to stream type for metadata streams
+          self.programMapTable['timed-metadata'][pid] = streamType;
+        } // move to the next table entry
+        // skip past the elementary stream descriptors, if present
+
+        offset += ((payload[offset + 3] & 0x0F) << 8 | payload[offset + 4]) + 5;
+      } // record the map on the packet as well
+
+      pmt.programMapTable = self.programMapTable;
+    };
+    /**
+     * Deliver a new MP2T packet to the next stream in the pipeline.
+     */
+
+    this.push = function (packet) {
+      var result = {},
+        offset = 4;
+      result.payloadUnitStartIndicator = !!(packet[1] & 0x40); // pid is a 13-bit field starting at the last bit of packet[1]
+
+      result.pid = packet[1] & 0x1f;
+      result.pid <<= 8;
+      result.pid |= packet[2]; // if an adaption field is present, its length is specified by the
+      // fifth byte of the TS packet header. The adaptation field is
+      // used to add stuffing to PES packets that don't fill a complete
+      // TS packet, and to specify some forms of timing and control data
+      // that we do not currently use.
+
+      if ((packet[3] & 0x30) >>> 4 > 0x01) {
+        offset += packet[offset] + 1;
+      } // parse the rest of the packet based on the type
+
+      if (result.pid === 0) {
+        result.type = 'pat';
+        parsePsi(packet.subarray(offset), result);
+        this.trigger('data', result);
+      } else if (result.pid === this.pmtPid) {
+        result.type = 'pmt';
+        parsePsi(packet.subarray(offset), result);
+        this.trigger('data', result); // if there are any packets waiting for a PMT to be found, process them now
+
+        while (this.packetsWaitingForPmt.length) {
+          this.processPes_.apply(this, this.packetsWaitingForPmt.shift());
+        }
+      } else if (this.programMapTable === undefined) {
+        // When we have not seen a PMT yet, defer further processing of
+        // PES packets until one has been parsed
+        this.packetsWaitingForPmt.push([packet, offset, result]);
+      } else {
+        this.processPes_(packet, offset, result);
+      }
+    };
+    this.processPes_ = function (packet, offset, result) {
+      // set the appropriate stream type
+      if (result.pid === this.programMapTable.video) {
+        result.streamType = StreamTypes$2.H264_STREAM_TYPE;
+      } else if (result.pid === this.programMapTable.audio) {
+        result.streamType = StreamTypes$2.ADTS_STREAM_TYPE;
+      } else {
+        // if not video or audio, it is timed-metadata or unknown
+        // if unknown, streamType will be undefined
+        result.streamType = this.programMapTable['timed-metadata'][result.pid];
+      }
+      result.type = 'pes';
+      result.data = packet.subarray(offset);
+      this.trigger('data', result);
+    };
+  };
+  TransportParseStream.prototype = new Stream$4();
+  TransportParseStream.STREAM_TYPES = {
+    h264: 0x1b,
+    adts: 0x0f
+  };
+  /**
+   * Reconsistutes program elementary stream (PES) packets from parsed
+   * transport stream packets. That is, if you pipe an
+   * mp2t.TransportParseStream into a mp2t.ElementaryStream, the output
+   * events will be events which capture the bytes for individual PES
+   * packets plus relevant metadata that has been extracted from the
+   * container.
+   */
+
+  ElementaryStream = function () {
+    var self = this,
+      segmentHadPmt = false,
+      // PES packet fragments
+      video = {
+        data: [],
+        size: 0
+      },
+      audio = {
+        data: [],
+        size: 0
+      },
+      timedMetadata = {
+        data: [],
+        size: 0
+      },
+      programMapTable,
+      parsePes = function (payload, pes) {
+        var ptsDtsFlags;
+        const startPrefix = payload[0] << 16 | payload[1] << 8 | payload[2]; // default to an empty array
+
+        pes.data = new Uint8Array(); // In certain live streams, the start of a TS fragment has ts packets
+        // that are frame data that is continuing from the previous fragment. This
+        // is to check that the pes data is the start of a new pes payload
+
+        if (startPrefix !== 1) {
+          return;
+        } // get the packet length, this will be 0 for video
+
+        pes.packetLength = 6 + (payload[4] << 8 | payload[5]); // find out if this packets starts a new keyframe
+
+        pes.dataAlignmentIndicator = (payload[6] & 0x04) !== 0; // PES packets may be annotated with a PTS value, or a PTS value
+        // and a DTS value. Determine what combination of values is
+        // available to work with.
+
+        ptsDtsFlags = payload[7]; // PTS and DTS are normally stored as a 33-bit number.  Javascript
+        // performs all bitwise operations on 32-bit integers but javascript
+        // supports a much greater range (52-bits) of integer using standard
+        // mathematical operations.
+        // We construct a 31-bit value using bitwise operators over the 31
+        // most significant bits and then multiply by 4 (equal to a left-shift
+        // of 2) before we add the final 2 least significant bits of the
+        // timestamp (equal to an OR.)
+
+        if (ptsDtsFlags & 0xC0) {
+          // the PTS and DTS are not written out directly. For information
+          // on how they are encoded, see
+          // http://dvd.sourceforge.net/dvdinfo/pes-hdr.html
+          pes.pts = (payload[9] & 0x0E) << 27 | (payload[10] & 0xFF) << 20 | (payload[11] & 0xFE) << 12 | (payload[12] & 0xFF) << 5 | (payload[13] & 0xFE) >>> 3;
+          pes.pts *= 4; // Left shift by 2
+
+          pes.pts += (payload[13] & 0x06) >>> 1; // OR by the two LSBs
+
+          pes.dts = pes.pts;
+          if (ptsDtsFlags & 0x40) {
+            pes.dts = (payload[14] & 0x0E) << 27 | (payload[15] & 0xFF) << 20 | (payload[16] & 0xFE) << 12 | (payload[17] & 0xFF) << 5 | (payload[18] & 0xFE) >>> 3;
+            pes.dts *= 4; // Left shift by 2
+
+            pes.dts += (payload[18] & 0x06) >>> 1; // OR by the two LSBs
+          }
+        } // the data section starts immediately after the PES header.
+        // pes_header_data_length specifies the number of header bytes
+        // that follow the last byte of the field.
+
+        pes.data = payload.subarray(9 + payload[8]);
+      },
+      /**
+        * Pass completely parsed PES packets to the next stream in the pipeline
+       **/
+      flushStream = function (stream, type, forceFlush) {
+        var packetData = new Uint8Array(stream.size),
+          event = {
+            type: type
+          },
+          i = 0,
+          offset = 0,
+          packetFlushable = false,
+          fragment; // do nothing if there is not enough buffered data for a complete
+        // PES header
+
+        if (!stream.data.length || stream.size < 9) {
+          return;
+        }
+        event.trackId = stream.data[0].pid; // reassemble the packet
+
+        for (i = 0; i < stream.data.length; i++) {
+          fragment = stream.data[i];
+          packetData.set(fragment.data, offset);
+          offset += fragment.data.byteLength;
+        } // parse assembled packet's PES header
+
+        parsePes(packetData, event); // non-video PES packets MUST have a non-zero PES_packet_length
+        // check that there is enough stream data to fill the packet
+
+        packetFlushable = type === 'video' || event.packetLength <= stream.size; // flush pending packets if the conditions are right
+
+        if (forceFlush || packetFlushable) {
+          stream.size = 0;
+          stream.data.length = 0;
+        } // only emit packets that are complete. this is to avoid assembling
+        // incomplete PES packets due to poor segmentation
+
+        if (packetFlushable) {
+          self.trigger('data', event);
+        }
+      };
+    ElementaryStream.prototype.init.call(this);
+    /**
+     * Identifies M2TS packet types and parses PES packets using metadata
+     * parsed from the PMT
+     **/
+
+    this.push = function (data) {
+      ({
+        pat: function () {// we have to wait for the PMT to arrive as well before we
+          // have any meaningful metadata
+        },
+        pes: function () {
+          var stream, streamType;
+          switch (data.streamType) {
+            case StreamTypes$2.H264_STREAM_TYPE:
+              stream = video;
+              streamType = 'video';
+              break;
+            case StreamTypes$2.ADTS_STREAM_TYPE:
+              stream = audio;
+              streamType = 'audio';
+              break;
+            case StreamTypes$2.METADATA_STREAM_TYPE:
+              stream = timedMetadata;
+              streamType = 'timed-metadata';
+              break;
+            default:
+              // ignore unknown stream types
+              return;
+          } // if a new packet is starting, we can flush the completed
+          // packet
+
+          if (data.payloadUnitStartIndicator) {
+            flushStream(stream, streamType, true);
+          } // buffer this fragment until we are sure we've received the
+          // complete payload
+
+          stream.data.push(data);
+          stream.size += data.data.byteLength;
+        },
+        pmt: function () {
+          var event = {
+            type: 'metadata',
+            tracks: []
+          };
+          programMapTable = data.programMapTable; // translate audio and video streams to tracks
+
+          if (programMapTable.video !== null) {
+            event.tracks.push({
+              timelineStartInfo: {
+                baseMediaDecodeTime: 0
+              },
+              id: +programMapTable.video,
+              codec: 'avc',
+              type: 'video'
+            });
+          }
+          if (programMapTable.audio !== null) {
+            event.tracks.push({
+              timelineStartInfo: {
+                baseMediaDecodeTime: 0
+              },
+              id: +programMapTable.audio,
+              codec: 'adts',
+              type: 'audio'
+            });
+          }
+          segmentHadPmt = true;
+          self.trigger('data', event);
+        }
+      })[data.type]();
+    };
+    this.reset = function () {
+      video.size = 0;
+      video.data.length = 0;
+      audio.size = 0;
+      audio.data.length = 0;
+      this.trigger('reset');
+    };
+    /**
+     * Flush any remaining input. Video PES packets may be of variable
+     * length. Normally, the start of a new video packet can trigger the
+     * finalization of the previous packet. That is not possible if no
+     * more video is forthcoming, however. In that case, some other
+     * mechanism (like the end of the file) has to be employed. When it is
+     * clear that no additional data is forthcoming, calling this method
+     * will flush the buffered packets.
+     */
+
+    this.flushStreams_ = function () {
+      // !!THIS ORDER IS IMPORTANT!!
+      // video first then audio
+      flushStream(video, 'video');
+      flushStream(audio, 'audio');
+      flushStream(timedMetadata, 'timed-metadata');
+    };
+    this.flush = function () {
+      // if on flush we haven't had a pmt emitted
+      // and we have a pmt to emit. emit the pmt
+      // so that we trigger a trackinfo downstream.
+      if (!segmentHadPmt && programMapTable) {
+        var pmt = {
+          type: 'metadata',
+          tracks: []
+        }; // translate audio and video streams to tracks
+
+        if (programMapTable.video !== null) {
+          pmt.tracks.push({
+            timelineStartInfo: {
+              baseMediaDecodeTime: 0
+            },
+            id: +programMapTable.video,
+            codec: 'avc',
+            type: 'video'
+          });
+        }
+        if (programMapTable.audio !== null) {
+          pmt.tracks.push({
+            timelineStartInfo: {
+              baseMediaDecodeTime: 0
+            },
+            id: +programMapTable.audio,
+            codec: 'adts',
+            type: 'audio'
+          });
+        }
+        self.trigger('data', pmt);
+      }
+      segmentHadPmt = false;
+      this.flushStreams_();
+      this.trigger('done');
+    };
+  };
+  ElementaryStream.prototype = new Stream$4();
+  var m2ts$1 = {
+    PAT_PID: 0x0000,
+    MP2T_PACKET_LENGTH: MP2T_PACKET_LENGTH$1,
+    TransportPacketStream: TransportPacketStream,
+    TransportParseStream: TransportParseStream,
+    ElementaryStream: ElementaryStream,
+    TimestampRolloverStream: TimestampRolloverStream,
+    CaptionStream: CaptionStream$1.CaptionStream,
+    Cea608Stream: CaptionStream$1.Cea608Stream,
+    Cea708Stream: CaptionStream$1.Cea708Stream,
+    MetadataStream: metadataStream
+  };
+  for (var type in StreamTypes$2) {
+    if (StreamTypes$2.hasOwnProperty(type)) {
+      m2ts$1[type] = StreamTypes$2[type];
+    }
+  }
+  var m2ts_1 = m2ts$1;
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var Stream$3 = stream;
+  var ONE_SECOND_IN_TS$2 = clock$2.ONE_SECOND_IN_TS;
+  var AdtsStream$1;
+  var ADTS_SAMPLING_FREQUENCIES$1 = [96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350];
+  /*
+   * Accepts a ElementaryStream and emits data events with parsed
+   * AAC Audio Frames of the individual packets. Input audio in ADTS
+   * format is unpacked and re-emitted as AAC frames.
+   *
+   * @see http://wiki.multimedia.cx/index.php?title=ADTS
+   * @see http://wiki.multimedia.cx/?title=Understanding_AAC
+   */
+
+  AdtsStream$1 = function (handlePartialSegments) {
+    var buffer,
+      frameNum = 0;
+    AdtsStream$1.prototype.init.call(this);
+    this.skipWarn_ = function (start, end) {
+      this.trigger('log', {
+        level: 'warn',
+        message: `adts skiping bytes ${start} to ${end} in frame ${frameNum} outside syncword`
+      });
+    };
+    this.push = function (packet) {
+      var i = 0,
+        frameLength,
+        protectionSkipBytes,
+        oldBuffer,
+        sampleCount,
+        adtsFrameDuration;
+      if (!handlePartialSegments) {
+        frameNum = 0;
+      }
+      if (packet.type !== 'audio') {
+        // ignore non-audio data
+        return;
+      } // Prepend any data in the buffer to the input data so that we can parse
+      // aac frames the cross a PES packet boundary
+
+      if (buffer && buffer.length) {
+        oldBuffer = buffer;
+        buffer = new Uint8Array(oldBuffer.byteLength + packet.data.byteLength);
+        buffer.set(oldBuffer);
+        buffer.set(packet.data, oldBuffer.byteLength);
+      } else {
+        buffer = packet.data;
+      } // unpack any ADTS frames which have been fully received
+      // for details on the ADTS header, see http://wiki.multimedia.cx/index.php?title=ADTS
+
+      var skip; // We use i + 7 here because we want to be able to parse the entire header.
+      // If we don't have enough bytes to do that, then we definitely won't have a full frame.
+
+      while (i + 7 < buffer.length) {
+        // Look for the start of an ADTS header..
+        if (buffer[i] !== 0xFF || (buffer[i + 1] & 0xF6) !== 0xF0) {
+          if (typeof skip !== 'number') {
+            skip = i;
+          } // If a valid header was not found,  jump one forward and attempt to
+          // find a valid ADTS header starting at the next byte
+
+          i++;
+          continue;
+        }
+        if (typeof skip === 'number') {
+          this.skipWarn_(skip, i);
+          skip = null;
+        } // The protection skip bit tells us if we have 2 bytes of CRC data at the
+        // end of the ADTS header
+
+        protectionSkipBytes = (~buffer[i + 1] & 0x01) * 2; // Frame length is a 13 bit integer starting 16 bits from the
+        // end of the sync sequence
+        // NOTE: frame length includes the size of the header
+
+        frameLength = (buffer[i + 3] & 0x03) << 11 | buffer[i + 4] << 3 | (buffer[i + 5] & 0xe0) >> 5;
+        sampleCount = ((buffer[i + 6] & 0x03) + 1) * 1024;
+        adtsFrameDuration = sampleCount * ONE_SECOND_IN_TS$2 / ADTS_SAMPLING_FREQUENCIES$1[(buffer[i + 2] & 0x3c) >>> 2]; // If we don't have enough data to actually finish this ADTS frame,
+        // then we have to wait for more data
+
+        if (buffer.byteLength - i < frameLength) {
+          break;
+        } // Otherwise, deliver the complete AAC frame
+
+        this.trigger('data', {
+          pts: packet.pts + frameNum * adtsFrameDuration,
+          dts: packet.dts + frameNum * adtsFrameDuration,
+          sampleCount: sampleCount,
+          audioobjecttype: (buffer[i + 2] >>> 6 & 0x03) + 1,
+          channelcount: (buffer[i + 2] & 1) << 2 | (buffer[i + 3] & 0xc0) >>> 6,
+          samplerate: ADTS_SAMPLING_FREQUENCIES$1[(buffer[i + 2] & 0x3c) >>> 2],
+          samplingfrequencyindex: (buffer[i + 2] & 0x3c) >>> 2,
+          // assume ISO/IEC 14496-12 AudioSampleEntry default of 16
+          samplesize: 16,
+          // data is the frame without it's header
+          data: buffer.subarray(i + 7 + protectionSkipBytes, i + frameLength)
+        });
+        frameNum++;
+        i += frameLength;
+      }
+      if (typeof skip === 'number') {
+        this.skipWarn_(skip, i);
+        skip = null;
+      } // remove processed bytes from the buffer.
+
+      buffer = buffer.subarray(i);
+    };
+    this.flush = function () {
+      frameNum = 0;
+      this.trigger('done');
+    };
+    this.reset = function () {
+      buffer = void 0;
+      this.trigger('reset');
+    };
+    this.endTimeline = function () {
+      buffer = void 0;
+      this.trigger('endedtimeline');
+    };
+  };
+  AdtsStream$1.prototype = new Stream$3();
+  var adts = AdtsStream$1;
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var ExpGolomb$1;
+  /**
+   * Parser for exponential Golomb codes, a variable-bitwidth number encoding
+   * scheme used by h264.
+   */
+
+  ExpGolomb$1 = function (workingData) {
+    var
+      // the number of bytes left to examine in workingData
+      workingBytesAvailable = workingData.byteLength,
+      // the current word being examined
+      workingWord = 0,
+      // :uint
+      // the number of bits left to examine in the current word
+      workingBitsAvailable = 0; // :uint;
+    // ():uint
+
+    this.length = function () {
+      return 8 * workingBytesAvailable;
+    }; // ():uint
+
+    this.bitsAvailable = function () {
+      return 8 * workingBytesAvailable + workingBitsAvailable;
+    }; // ():void
+
+    this.loadWord = function () {
+      var position = workingData.byteLength - workingBytesAvailable,
+        workingBytes = new Uint8Array(4),
+        availableBytes = Math.min(4, workingBytesAvailable);
+      if (availableBytes === 0) {
+        throw new Error('no bytes available');
+      }
+      workingBytes.set(workingData.subarray(position, position + availableBytes));
+      workingWord = new DataView(workingBytes.buffer).getUint32(0); // track the amount of workingData that has been processed
+
+      workingBitsAvailable = availableBytes * 8;
+      workingBytesAvailable -= availableBytes;
+    }; // (count:int):void
+
+    this.skipBits = function (count) {
+      var skipBytes; // :int
+
+      if (workingBitsAvailable > count) {
+        workingWord <<= count;
+        workingBitsAvailable -= count;
+      } else {
+        count -= workingBitsAvailable;
+        skipBytes = Math.floor(count / 8);
+        count -= skipBytes * 8;
+        workingBytesAvailable -= skipBytes;
+        this.loadWord();
+        workingWord <<= count;
+        workingBitsAvailable -= count;
+      }
+    }; // (size:int):uint
+
+    this.readBits = function (size) {
+      var bits = Math.min(workingBitsAvailable, size),
+        // :uint
+        valu = workingWord >>> 32 - bits; // :uint
+      // if size > 31, handle error
+
+      workingBitsAvailable -= bits;
+      if (workingBitsAvailable > 0) {
+        workingWord <<= bits;
+      } else if (workingBytesAvailable > 0) {
+        this.loadWord();
+      }
+      bits = size - bits;
+      if (bits > 0) {
+        return valu << bits | this.readBits(bits);
+      }
+      return valu;
+    }; // ():uint
+
+    this.skipLeadingZeros = function () {
+      var leadingZeroCount; // :uint
+
+      for (leadingZeroCount = 0; leadingZeroCount < workingBitsAvailable; ++leadingZeroCount) {
+        if ((workingWord & 0x80000000 >>> leadingZeroCount) !== 0) {
+          // the first bit of working word is 1
+          workingWord <<= leadingZeroCount;
+          workingBitsAvailable -= leadingZeroCount;
+          return leadingZeroCount;
+        }
+      } // we exhausted workingWord and still have not found a 1
+
+      this.loadWord();
+      return leadingZeroCount + this.skipLeadingZeros();
+    }; // ():void
+
+    this.skipUnsignedExpGolomb = function () {
+      this.skipBits(1 + this.skipLeadingZeros());
+    }; // ():void
+
+    this.skipExpGolomb = function () {
+      this.skipBits(1 + this.skipLeadingZeros());
+    }; // ():uint
+
+    this.readUnsignedExpGolomb = function () {
+      var clz = this.skipLeadingZeros(); // :uint
+
+      return this.readBits(clz + 1) - 1;
+    }; // ():int
+
+    this.readExpGolomb = function () {
+      var valu = this.readUnsignedExpGolomb(); // :int
+
+      if (0x01 & valu) {
+        // the number is odd if the low order bit is set
+        return 1 + valu >>> 1; // add 1 to make it even, and divide by 2
+      }
+
+      return -1 * (valu >>> 1); // divide by two then make it negative
+    }; // Some convenience functions
+    // :Boolean
+
+    this.readBoolean = function () {
+      return this.readBits(1) === 1;
+    }; // ():int
+
+    this.readUnsignedByte = function () {
+      return this.readBits(8);
+    };
+    this.loadWord();
+  };
+  var expGolomb = ExpGolomb$1;
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var Stream$2 = stream;
+  var ExpGolomb = expGolomb;
+  var H264Stream$1, NalByteStream;
+  var PROFILES_WITH_OPTIONAL_SPS_DATA;
+  /**
+   * Accepts a NAL unit byte stream and unpacks the embedded NAL units.
+   */
+
+  NalByteStream = function () {
+    var syncPoint = 0,
+      i,
+      buffer;
+    NalByteStream.prototype.init.call(this);
+    /*
+     * Scans a byte stream and triggers a data event with the NAL units found.
+     * @param {Object} data Event received from H264Stream
+     * @param {Uint8Array} data.data The h264 byte stream to be scanned
+     *
+     * @see H264Stream.push
+     */
+
+    this.push = function (data) {
+      var swapBuffer;
+      if (!buffer) {
+        buffer = data.data;
+      } else {
+        swapBuffer = new Uint8Array(buffer.byteLength + data.data.byteLength);
+        swapBuffer.set(buffer);
+        swapBuffer.set(data.data, buffer.byteLength);
+        buffer = swapBuffer;
+      }
+      var len = buffer.byteLength; // Rec. ITU-T H.264, Annex B
+      // scan for NAL unit boundaries
+      // a match looks like this:
+      // 0 0 1 .. NAL .. 0 0 1
+      // ^ sync point        ^ i
+      // or this:
+      // 0 0 1 .. NAL .. 0 0 0
+      // ^ sync point        ^ i
+      // advance the sync point to a NAL start, if necessary
+
+      for (; syncPoint < len - 3; syncPoint++) {
+        if (buffer[syncPoint + 2] === 1) {
+          // the sync point is properly aligned
+          i = syncPoint + 5;
+          break;
+        }
+      }
+      while (i < len) {
+        // look at the current byte to determine if we've hit the end of
+        // a NAL unit boundary
+        switch (buffer[i]) {
+          case 0:
+            // skip past non-sync sequences
+            if (buffer[i - 1] !== 0) {
+              i += 2;
+              break;
+            } else if (buffer[i - 2] !== 0) {
+              i++;
+              break;
+            } // deliver the NAL unit if it isn't empty
+
+            if (syncPoint + 3 !== i - 2) {
+              this.trigger('data', buffer.subarray(syncPoint + 3, i - 2));
+            } // drop trailing zeroes
+
+            do {
+              i++;
+            } while (buffer[i] !== 1 && i < len);
+            syncPoint = i - 2;
+            i += 3;
+            break;
+          case 1:
+            // skip past non-sync sequences
+            if (buffer[i - 1] !== 0 || buffer[i - 2] !== 0) {
+              i += 3;
+              break;
+            } // deliver the NAL unit
+
+            this.trigger('data', buffer.subarray(syncPoint + 3, i - 2));
+            syncPoint = i - 2;
+            i += 3;
+            break;
+          default:
+            // the current byte isn't a one or zero, so it cannot be part
+            // of a sync sequence
+            i += 3;
+            break;
+        }
+      } // filter out the NAL units that were delivered
+
+      buffer = buffer.subarray(syncPoint);
+      i -= syncPoint;
+      syncPoint = 0;
+    };
+    this.reset = function () {
+      buffer = null;
+      syncPoint = 0;
+      this.trigger('reset');
+    };
+    this.flush = function () {
+      // deliver the last buffered NAL unit
+      if (buffer && buffer.byteLength > 3) {
+        this.trigger('data', buffer.subarray(syncPoint + 3));
+      } // reset the stream state
+
+      buffer = null;
+      syncPoint = 0;
+      this.trigger('done');
+    };
+    this.endTimeline = function () {
+      this.flush();
+      this.trigger('endedtimeline');
+    };
+  };
+  NalByteStream.prototype = new Stream$2(); // values of profile_idc that indicate additional fields are included in the SPS
+  // see Recommendation ITU-T H.264 (4/2013),
+  // 7.3.2.1.1 Sequence parameter set data syntax
+
+  PROFILES_WITH_OPTIONAL_SPS_DATA = {
+    100: true,
+    110: true,
+    122: true,
+    244: true,
+    44: true,
+    83: true,
+    86: true,
+    118: true,
+    128: true,
+    // TODO: the three profiles below don't
+    // appear to have sps data in the specificiation anymore?
+    138: true,
+    139: true,
+    134: true
+  };
+  /**
+   * Accepts input from a ElementaryStream and produces H.264 NAL unit data
+   * events.
+   */
+
+  H264Stream$1 = function () {
+    var nalByteStream = new NalByteStream(),
+      self,
+      trackId,
+      currentPts,
+      currentDts,
+      discardEmulationPreventionBytes,
+      readSequenceParameterSet,
+      skipScalingList;
+    H264Stream$1.prototype.init.call(this);
+    self = this;
+    /*
+     * Pushes a packet from a stream onto the NalByteStream
+     *
+     * @param {Object} packet - A packet received from a stream
+     * @param {Uint8Array} packet.data - The raw bytes of the packet
+     * @param {Number} packet.dts - Decode timestamp of the packet
+     * @param {Number} packet.pts - Presentation timestamp of the packet
+     * @param {Number} packet.trackId - The id of the h264 track this packet came from
+     * @param {('video'|'audio')} packet.type - The type of packet
+     *
+     */
+
+    this.push = function (packet) {
+      if (packet.type !== 'video') {
+        return;
+      }
+      trackId = packet.trackId;
+      currentPts = packet.pts;
+      currentDts = packet.dts;
+      nalByteStream.push(packet);
+    };
+    /*
+     * Identify NAL unit types and pass on the NALU, trackId, presentation and decode timestamps
+     * for the NALUs to the next stream component.
+     * Also, preprocess caption and sequence parameter NALUs.
+     *
+     * @param {Uint8Array} data - A NAL unit identified by `NalByteStream.push`
+     * @see NalByteStream.push
+     */
+
+    nalByteStream.on('data', function (data) {
+      var event = {
+        trackId: trackId,
+        pts: currentPts,
+        dts: currentDts,
+        data: data,
+        nalUnitTypeCode: data[0] & 0x1f
+      };
+      switch (event.nalUnitTypeCode) {
+        case 0x05:
+          event.nalUnitType = 'slice_layer_without_partitioning_rbsp_idr';
+          break;
+        case 0x06:
+          event.nalUnitType = 'sei_rbsp';
+          event.escapedRBSP = discardEmulationPreventionBytes(data.subarray(1));
+          break;
+        case 0x07:
+          event.nalUnitType = 'seq_parameter_set_rbsp';
+          event.escapedRBSP = discardEmulationPreventionBytes(data.subarray(1));
+          event.config = readSequenceParameterSet(event.escapedRBSP);
+          break;
+        case 0x08:
+          event.nalUnitType = 'pic_parameter_set_rbsp';
+          break;
+        case 0x09:
+          event.nalUnitType = 'access_unit_delimiter_rbsp';
+          break;
+      } // This triggers data on the H264Stream
+
+      self.trigger('data', event);
+    });
+    nalByteStream.on('done', function () {
+      self.trigger('done');
+    });
+    nalByteStream.on('partialdone', function () {
+      self.trigger('partialdone');
+    });
+    nalByteStream.on('reset', function () {
+      self.trigger('reset');
+    });
+    nalByteStream.on('endedtimeline', function () {
+      self.trigger('endedtimeline');
+    });
+    this.flush = function () {
+      nalByteStream.flush();
+    };
+    this.partialFlush = function () {
+      nalByteStream.partialFlush();
+    };
+    this.reset = function () {
+      nalByteStream.reset();
+    };
+    this.endTimeline = function () {
+      nalByteStream.endTimeline();
+    };
+    /**
+     * Advance the ExpGolomb decoder past a scaling list. The scaling
+     * list is optionally transmitted as part of a sequence parameter
+     * set and is not relevant to transmuxing.
+     * @param count {number} the number of entries in this scaling list
+     * @param expGolombDecoder {object} an ExpGolomb pointed to the
+     * start of a scaling list
+     * @see Recommendation ITU-T H.264, Section 7.3.2.1.1.1
+     */
+
+    skipScalingList = function (count, expGolombDecoder) {
+      var lastScale = 8,
+        nextScale = 8,
+        j,
+        deltaScale;
+      for (j = 0; j < count; j++) {
+        if (nextScale !== 0) {
+          deltaScale = expGolombDecoder.readExpGolomb();
+          nextScale = (lastScale + deltaScale + 256) % 256;
+        }
+        lastScale = nextScale === 0 ? lastScale : nextScale;
+      }
+    };
+    /**
+     * Expunge any "Emulation Prevention" bytes from a "Raw Byte
+     * Sequence Payload"
+     * @param data {Uint8Array} the bytes of a RBSP from a NAL
+     * unit
+     * @return {Uint8Array} the RBSP without any Emulation
+     * Prevention Bytes
+     */
+
+    discardEmulationPreventionBytes = function (data) {
+      var length = data.byteLength,
+        emulationPreventionBytesPositions = [],
+        i = 1,
+        newLength,
+        newData; // Find all `Emulation Prevention Bytes`
+
+      while (i < length - 2) {
+        if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0x03) {
+          emulationPreventionBytesPositions.push(i + 2);
+          i += 2;
+        } else {
+          i++;
+        }
+      } // If no Emulation Prevention Bytes were found just return the original
+      // array
+
+      if (emulationPreventionBytesPositions.length === 0) {
+        return data;
+      } // Create a new array to hold the NAL unit data
+
+      newLength = length - emulationPreventionBytesPositions.length;
+      newData = new Uint8Array(newLength);
+      var sourceIndex = 0;
+      for (i = 0; i < newLength; sourceIndex++, i++) {
+        if (sourceIndex === emulationPreventionBytesPositions[0]) {
+          // Skip this byte
+          sourceIndex++; // Remove this position index
+
+          emulationPreventionBytesPositions.shift();
+        }
+        newData[i] = data[sourceIndex];
+      }
+      return newData;
+    };
+    /**
+     * Read a sequence parameter set and return some interesting video
+     * properties. A sequence parameter set is the H264 metadata that
+     * describes the properties of upcoming video frames.
+     * @param data {Uint8Array} the bytes of a sequence parameter set
+     * @return {object} an object with configuration parsed from the
+     * sequence parameter set, including the dimensions of the
+     * associated video frames.
+     */
+
+    readSequenceParameterSet = function (data) {
+      var frameCropLeftOffset = 0,
+        frameCropRightOffset = 0,
+        frameCropTopOffset = 0,
+        frameCropBottomOffset = 0,
+        expGolombDecoder,
+        profileIdc,
+        levelIdc,
+        profileCompatibility,
+        chromaFormatIdc,
+        picOrderCntType,
+        numRefFramesInPicOrderCntCycle,
+        picWidthInMbsMinus1,
+        picHeightInMapUnitsMinus1,
+        frameMbsOnlyFlag,
+        scalingListCount,
+        sarRatio = [1, 1],
+        aspectRatioIdc,
+        i;
+      expGolombDecoder = new ExpGolomb(data);
+      profileIdc = expGolombDecoder.readUnsignedByte(); // profile_idc
+
+      profileCompatibility = expGolombDecoder.readUnsignedByte(); // constraint_set[0-5]_flag
+
+      levelIdc = expGolombDecoder.readUnsignedByte(); // level_idc u(8)
+
+      expGolombDecoder.skipUnsignedExpGolomb(); // seq_parameter_set_id
+      // some profiles have more optional data we don't need
+
+      if (PROFILES_WITH_OPTIONAL_SPS_DATA[profileIdc]) {
+        chromaFormatIdc = expGolombDecoder.readUnsignedExpGolomb();
+        if (chromaFormatIdc === 3) {
+          expGolombDecoder.skipBits(1); // separate_colour_plane_flag
+        }
+
+        expGolombDecoder.skipUnsignedExpGolomb(); // bit_depth_luma_minus8
+
+        expGolombDecoder.skipUnsignedExpGolomb(); // bit_depth_chroma_minus8
+
+        expGolombDecoder.skipBits(1); // qpprime_y_zero_transform_bypass_flag
+
+        if (expGolombDecoder.readBoolean()) {
+          // seq_scaling_matrix_present_flag
+          scalingListCount = chromaFormatIdc !== 3 ? 8 : 12;
+          for (i = 0; i < scalingListCount; i++) {
+            if (expGolombDecoder.readBoolean()) {
+              // seq_scaling_list_present_flag[ i ]
+              if (i < 6) {
+                skipScalingList(16, expGolombDecoder);
+              } else {
+                skipScalingList(64, expGolombDecoder);
+              }
+            }
+          }
+        }
+      }
+      expGolombDecoder.skipUnsignedExpGolomb(); // log2_max_frame_num_minus4
+
+      picOrderCntType = expGolombDecoder.readUnsignedExpGolomb();
+      if (picOrderCntType === 0) {
+        expGolombDecoder.readUnsignedExpGolomb(); // log2_max_pic_order_cnt_lsb_minus4
+      } else if (picOrderCntType === 1) {
+        expGolombDecoder.skipBits(1); // delta_pic_order_always_zero_flag
+
+        expGolombDecoder.skipExpGolomb(); // offset_for_non_ref_pic
+
+        expGolombDecoder.skipExpGolomb(); // offset_for_top_to_bottom_field
+
+        numRefFramesInPicOrderCntCycle = expGolombDecoder.readUnsignedExpGolomb();
+        for (i = 0; i < numRefFramesInPicOrderCntCycle; i++) {
+          expGolombDecoder.skipExpGolomb(); // offset_for_ref_frame[ i ]
+        }
+      }
+
+      expGolombDecoder.skipUnsignedExpGolomb(); // max_num_ref_frames
+
+      expGolombDecoder.skipBits(1); // gaps_in_frame_num_value_allowed_flag
+
+      picWidthInMbsMinus1 = expGolombDecoder.readUnsignedExpGolomb();
+      picHeightInMapUnitsMinus1 = expGolombDecoder.readUnsignedExpGolomb();
+      frameMbsOnlyFlag = expGolombDecoder.readBits(1);
+      if (frameMbsOnlyFlag === 0) {
+        expGolombDecoder.skipBits(1); // mb_adaptive_frame_field_flag
+      }
+
+      expGolombDecoder.skipBits(1); // direct_8x8_inference_flag
+
+      if (expGolombDecoder.readBoolean()) {
+        // frame_cropping_flag
+        frameCropLeftOffset = expGolombDecoder.readUnsignedExpGolomb();
+        frameCropRightOffset = expGolombDecoder.readUnsignedExpGolomb();
+        frameCropTopOffset = expGolombDecoder.readUnsignedExpGolomb();
+        frameCropBottomOffset = expGolombDecoder.readUnsignedExpGolomb();
+      }
+      if (expGolombDecoder.readBoolean()) {
+        // vui_parameters_present_flag
+        if (expGolombDecoder.readBoolean()) {
+          // aspect_ratio_info_present_flag
+          aspectRatioIdc = expGolombDecoder.readUnsignedByte();
+          switch (aspectRatioIdc) {
+            case 1:
+              sarRatio = [1, 1];
+              break;
+            case 2:
+              sarRatio = [12, 11];
+              break;
+            case 3:
+              sarRatio = [10, 11];
+              break;
+            case 4:
+              sarRatio = [16, 11];
+              break;
+            case 5:
+              sarRatio = [40, 33];
+              break;
+            case 6:
+              sarRatio = [24, 11];
+              break;
+            case 7:
+              sarRatio = [20, 11];
+              break;
+            case 8:
+              sarRatio = [32, 11];
+              break;
+            case 9:
+              sarRatio = [80, 33];
+              break;
+            case 10:
+              sarRatio = [18, 11];
+              break;
+            case 11:
+              sarRatio = [15, 11];
+              break;
+            case 12:
+              sarRatio = [64, 33];
+              break;
+            case 13:
+              sarRatio = [160, 99];
+              break;
+            case 14:
+              sarRatio = [4, 3];
+              break;
+            case 15:
+              sarRatio = [3, 2];
+              break;
+            case 16:
+              sarRatio = [2, 1];
+              break;
+            case 255:
+              {
+                sarRatio = [expGolombDecoder.readUnsignedByte() << 8 | expGolombDecoder.readUnsignedByte(), expGolombDecoder.readUnsignedByte() << 8 | expGolombDecoder.readUnsignedByte()];
+                break;
+              }
+          }
+          if (sarRatio) {
+            sarRatio[0] / sarRatio[1];
+          }
+        }
+      }
+      return {
+        profileIdc: profileIdc,
+        levelIdc: levelIdc,
+        profileCompatibility: profileCompatibility,
+        width: (picWidthInMbsMinus1 + 1) * 16 - frameCropLeftOffset * 2 - frameCropRightOffset * 2,
+        height: (2 - frameMbsOnlyFlag) * (picHeightInMapUnitsMinus1 + 1) * 16 - frameCropTopOffset * 2 - frameCropBottomOffset * 2,
+        // sar is sample aspect ratio
+        sarRatio: sarRatio
+      };
+    };
+  };
+  H264Stream$1.prototype = new Stream$2();
+  var h264 = {
+    H264Stream: H264Stream$1,
+    NalByteStream: NalByteStream
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Utilities to detect basic properties and metadata about Aac data.
+   */
+
+  var ADTS_SAMPLING_FREQUENCIES = [96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350];
+  var parseId3TagSize = function (header, byteIndex) {
+    var returnSize = header[byteIndex + 6] << 21 | header[byteIndex + 7] << 14 | header[byteIndex + 8] << 7 | header[byteIndex + 9],
+      flags = header[byteIndex + 5],
+      footerPresent = (flags & 16) >> 4; // if we get a negative returnSize clamp it to 0
+
+    returnSize = returnSize >= 0 ? returnSize : 0;
+    if (footerPresent) {
+      return returnSize + 20;
+    }
+    return returnSize + 10;
+  };
+  var getId3Offset = function (data, offset) {
+    if (data.length - offset < 10 || data[offset] !== 'I'.charCodeAt(0) || data[offset + 1] !== 'D'.charCodeAt(0) || data[offset + 2] !== '3'.charCodeAt(0)) {
+      return offset;
+    }
+    offset += parseId3TagSize(data, offset);
+    return getId3Offset(data, offset);
+  }; // TODO: use vhs-utils
+
+  var isLikelyAacData$1 = function (data) {
+    var offset = getId3Offset(data, 0);
+    return data.length >= offset + 2 && (data[offset] & 0xFF) === 0xFF && (data[offset + 1] & 0xF0) === 0xF0 &&
+    // verify that the 2 layer bits are 0, aka this
+    // is not mp3 data but aac data.
+    (data[offset + 1] & 0x16) === 0x10;
+  };
+  var parseSyncSafeInteger = function (data) {
+    return data[0] << 21 | data[1] << 14 | data[2] << 7 | data[3];
+  }; // return a percent-encoded representation of the specified byte range
+  // @see http://en.wikipedia.org/wiki/Percent-encoding
+
+  var percentEncode = function (bytes, start, end) {
+    var i,
+      result = '';
+    for (i = start; i < end; i++) {
+      result += '%' + ('00' + bytes[i].toString(16)).slice(-2);
+    }
+    return result;
+  }; // return the string representation of the specified byte range,
+  // interpreted as ISO-8859-1.
+
+  var parseIso88591 = function (bytes, start, end) {
+    return unescape(percentEncode(bytes, start, end)); // jshint ignore:line
+  };
+
+  var parseAdtsSize = function (header, byteIndex) {
+    var lowThree = (header[byteIndex + 5] & 0xE0) >> 5,
+      middle = header[byteIndex + 4] << 3,
+      highTwo = header[byteIndex + 3] & 0x3 << 11;
+    return highTwo | middle | lowThree;
+  };
+  var parseType$4 = function (header, byteIndex) {
+    if (header[byteIndex] === 'I'.charCodeAt(0) && header[byteIndex + 1] === 'D'.charCodeAt(0) && header[byteIndex + 2] === '3'.charCodeAt(0)) {
+      return 'timed-metadata';
+    } else if (header[byteIndex] & 0xff === 0xff && (header[byteIndex + 1] & 0xf0) === 0xf0) {
+      return 'audio';
+    }
+    return null;
+  };
+  var parseSampleRate = function (packet) {
+    var i = 0;
+    while (i + 5 < packet.length) {
+      if (packet[i] !== 0xFF || (packet[i + 1] & 0xF6) !== 0xF0) {
+        // If a valid header was not found,  jump one forward and attempt to
+        // find a valid ADTS header starting at the next byte
+        i++;
+        continue;
+      }
+      return ADTS_SAMPLING_FREQUENCIES[(packet[i + 2] & 0x3c) >>> 2];
+    }
+    return null;
+  };
+  var parseAacTimestamp = function (packet) {
+    var frameStart, frameSize, frame, frameHeader; // find the start of the first frame and the end of the tag
+
+    frameStart = 10;
+    if (packet[5] & 0x40) {
+      // advance the frame start past the extended header
+      frameStart += 4; // header size field
+
+      frameStart += parseSyncSafeInteger(packet.subarray(10, 14));
+    } // parse one or more ID3 frames
+    // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+    do {
+      // determine the number of bytes in this frame
+      frameSize = parseSyncSafeInteger(packet.subarray(frameStart + 4, frameStart + 8));
+      if (frameSize < 1) {
+        return null;
+      }
+      frameHeader = String.fromCharCode(packet[frameStart], packet[frameStart + 1], packet[frameStart + 2], packet[frameStart + 3]);
+      if (frameHeader === 'PRIV') {
+        frame = packet.subarray(frameStart + 10, frameStart + frameSize + 10);
+        for (var i = 0; i < frame.byteLength; i++) {
+          if (frame[i] === 0) {
+            var owner = parseIso88591(frame, 0, i);
+            if (owner === 'com.apple.streaming.transportStreamTimestamp') {
+              var d = frame.subarray(i + 1);
+              var size = (d[3] & 0x01) << 30 | d[4] << 22 | d[5] << 14 | d[6] << 6 | d[7] >>> 2;
+              size *= 4;
+              size += d[7] & 0x03;
+              return size;
+            }
+            break;
+          }
+        }
+      }
+      frameStart += 10; // advance past the frame header
+
+      frameStart += frameSize; // advance past the frame body
+    } while (frameStart < packet.byteLength);
+    return null;
+  };
+  var utils = {
+    isLikelyAacData: isLikelyAacData$1,
+    parseId3TagSize: parseId3TagSize,
+    parseAdtsSize: parseAdtsSize,
+    parseType: parseType$4,
+    parseSampleRate: parseSampleRate,
+    parseAacTimestamp: parseAacTimestamp
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * A stream-based aac to mp4 converter. This utility can be used to
+   * deliver mp4s to a SourceBuffer on platforms that support native
+   * Media Source Extensions.
+   */
+
+  var Stream$1 = stream;
+  var aacUtils = utils; // Constants
+
+  var AacStream$1;
+  /**
+   * Splits an incoming stream of binary data into ADTS and ID3 Frames.
+   */
+
+  AacStream$1 = function () {
+    var everything = new Uint8Array(),
+      timeStamp = 0;
+    AacStream$1.prototype.init.call(this);
+    this.setTimestamp = function (timestamp) {
+      timeStamp = timestamp;
+    };
+    this.push = function (bytes) {
+      var frameSize = 0,
+        byteIndex = 0,
+        bytesLeft,
+        chunk,
+        packet,
+        tempLength; // If there are bytes remaining from the last segment, prepend them to the
+      // bytes that were pushed in
+
+      if (everything.length) {
+        tempLength = everything.length;
+        everything = new Uint8Array(bytes.byteLength + tempLength);
+        everything.set(everything.subarray(0, tempLength));
+        everything.set(bytes, tempLength);
+      } else {
+        everything = bytes;
+      }
+      while (everything.length - byteIndex >= 3) {
+        if (everything[byteIndex] === 'I'.charCodeAt(0) && everything[byteIndex + 1] === 'D'.charCodeAt(0) && everything[byteIndex + 2] === '3'.charCodeAt(0)) {
+          // Exit early because we don't have enough to parse
+          // the ID3 tag header
+          if (everything.length - byteIndex < 10) {
+            break;
+          } // check framesize
+
+          frameSize = aacUtils.parseId3TagSize(everything, byteIndex); // Exit early if we don't have enough in the buffer
+          // to emit a full packet
+          // Add to byteIndex to support multiple ID3 tags in sequence
+
+          if (byteIndex + frameSize > everything.length) {
+            break;
+          }
+          chunk = {
+            type: 'timed-metadata',
+            data: everything.subarray(byteIndex, byteIndex + frameSize)
+          };
+          this.trigger('data', chunk);
+          byteIndex += frameSize;
+          continue;
+        } else if ((everything[byteIndex] & 0xff) === 0xff && (everything[byteIndex + 1] & 0xf0) === 0xf0) {
+          // Exit early because we don't have enough to parse
+          // the ADTS frame header
+          if (everything.length - byteIndex < 7) {
+            break;
+          }
+          frameSize = aacUtils.parseAdtsSize(everything, byteIndex); // Exit early if we don't have enough in the buffer
+          // to emit a full packet
+
+          if (byteIndex + frameSize > everything.length) {
+            break;
+          }
+          packet = {
+            type: 'audio',
+            data: everything.subarray(byteIndex, byteIndex + frameSize),
+            pts: timeStamp,
+            dts: timeStamp
+          };
+          this.trigger('data', packet);
+          byteIndex += frameSize;
+          continue;
+        }
+        byteIndex++;
+      }
+      bytesLeft = everything.length - byteIndex;
+      if (bytesLeft > 0) {
+        everything = everything.subarray(byteIndex);
+      } else {
+        everything = new Uint8Array();
+      }
+    };
+    this.reset = function () {
+      everything = new Uint8Array();
+      this.trigger('reset');
+    };
+    this.endTimeline = function () {
+      everything = new Uint8Array();
+      this.trigger('endedtimeline');
+    };
+  };
+  AacStream$1.prototype = new Stream$1();
+  var aac = AacStream$1;
+  var AUDIO_PROPERTIES$1 = ['audioobjecttype', 'channelcount', 'samplerate', 'samplingfrequencyindex', 'samplesize'];
+  var audioProperties = AUDIO_PROPERTIES$1;
+  var VIDEO_PROPERTIES$1 = ['width', 'height', 'profileIdc', 'levelIdc', 'profileCompatibility', 'sarRatio'];
+  var videoProperties = VIDEO_PROPERTIES$1;
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * A stream-based mp2t to mp4 converter. This utility can be used to
+   * deliver mp4s to a SourceBuffer on platforms that support native
+   * Media Source Extensions.
+   */
+
+  var Stream = stream;
+  var mp4 = mp4Generator;
+  var frameUtils = frameUtils$1;
+  var audioFrameUtils = audioFrameUtils$1;
+  var trackDecodeInfo = trackDecodeInfo$1;
+  var m2ts = m2ts_1;
+  var clock = clock$2;
+  var AdtsStream = adts;
+  var H264Stream = h264.H264Stream;
+  var AacStream = aac;
+  var isLikelyAacData = utils.isLikelyAacData;
+  var ONE_SECOND_IN_TS$1 = clock$2.ONE_SECOND_IN_TS;
+  var AUDIO_PROPERTIES = audioProperties;
+  var VIDEO_PROPERTIES = videoProperties; // object types
+
+  var VideoSegmentStream, AudioSegmentStream, Transmuxer, CoalesceStream;
+  var retriggerForStream = function (key, event) {
+    event.stream = key;
+    this.trigger('log', event);
+  };
+  var addPipelineLogRetriggers = function (transmuxer, pipeline) {
+    var keys = Object.keys(pipeline);
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i]; // skip non-stream keys and headOfPipeline
+      // which is just a duplicate
+
+      if (key === 'headOfPipeline' || !pipeline[key].on) {
+        continue;
+      }
+      pipeline[key].on('log', retriggerForStream.bind(transmuxer, key));
+    }
+  };
+  /**
+   * Compare two arrays (even typed) for same-ness
+   */
+
+  var arrayEquals = function (a, b) {
+    var i;
+    if (a.length !== b.length) {
+      return false;
+    } // compare the value of each element in the array
+
+    for (i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) {
+        return false;
+      }
+    }
+    return true;
+  };
+  var generateSegmentTimingInfo = function (baseMediaDecodeTime, startDts, startPts, endDts, endPts, prependedContentDuration) {
+    var ptsOffsetFromDts = startPts - startDts,
+      decodeDuration = endDts - startDts,
+      presentationDuration = endPts - startPts; // The PTS and DTS values are based on the actual stream times from the segment,
+    // however, the player time values will reflect a start from the baseMediaDecodeTime.
+    // In order to provide relevant values for the player times, base timing info on the
+    // baseMediaDecodeTime and the DTS and PTS durations of the segment.
+
+    return {
+      start: {
+        dts: baseMediaDecodeTime,
+        pts: baseMediaDecodeTime + ptsOffsetFromDts
+      },
+      end: {
+        dts: baseMediaDecodeTime + decodeDuration,
+        pts: baseMediaDecodeTime + presentationDuration
+      },
+      prependedContentDuration: prependedContentDuration,
+      baseMediaDecodeTime: baseMediaDecodeTime
+    };
+  };
+  /**
+   * Constructs a single-track, ISO BMFF media segment from AAC data
+   * events. The output of this stream can be fed to a SourceBuffer
+   * configured with a suitable initialization segment.
+   * @param track {object} track metadata configuration
+   * @param options {object} transmuxer options object
+   * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+   *        in the source; false to adjust the first segment to start at 0.
+   */
+
+  AudioSegmentStream = function (track, options) {
+    var adtsFrames = [],
+      sequenceNumber,
+      earliestAllowedDts = 0,
+      audioAppendStartTs = 0,
+      videoBaseMediaDecodeTime = Infinity;
+    options = options || {};
+    sequenceNumber = options.firstSequenceNumber || 0;
+    AudioSegmentStream.prototype.init.call(this);
+    this.push = function (data) {
+      trackDecodeInfo.collectDtsInfo(track, data);
+      if (track) {
+        AUDIO_PROPERTIES.forEach(function (prop) {
+          track[prop] = data[prop];
+        });
+      } // buffer audio data until end() is called
+
+      adtsFrames.push(data);
+    };
+    this.setEarliestDts = function (earliestDts) {
+      earliestAllowedDts = earliestDts;
+    };
+    this.setVideoBaseMediaDecodeTime = function (baseMediaDecodeTime) {
+      videoBaseMediaDecodeTime = baseMediaDecodeTime;
+    };
+    this.setAudioAppendStart = function (timestamp) {
+      audioAppendStartTs = timestamp;
+    };
+    this.flush = function () {
+      var frames, moof, mdat, boxes, frameDuration, segmentDuration, videoClockCyclesOfSilencePrefixed; // return early if no audio data has been observed
+
+      if (adtsFrames.length === 0) {
+        this.trigger('done', 'AudioSegmentStream');
+        return;
+      }
+      frames = audioFrameUtils.trimAdtsFramesByEarliestDts(adtsFrames, track, earliestAllowedDts);
+      track.baseMediaDecodeTime = trackDecodeInfo.calculateTrackBaseMediaDecodeTime(track, options.keepOriginalTimestamps); // amount of audio filled but the value is in video clock rather than audio clock
+
+      videoClockCyclesOfSilencePrefixed = audioFrameUtils.prefixWithSilence(track, frames, audioAppendStartTs, videoBaseMediaDecodeTime); // we have to build the index from byte locations to
+      // samples (that is, adts frames) in the audio data
+
+      track.samples = audioFrameUtils.generateSampleTable(frames); // concatenate the audio data to constuct the mdat
+
+      mdat = mp4.mdat(audioFrameUtils.concatenateFrameData(frames));
+      adtsFrames = [];
+      moof = mp4.moof(sequenceNumber, [track]);
+      boxes = new Uint8Array(moof.byteLength + mdat.byteLength); // bump the sequence number for next time
+
+      sequenceNumber++;
+      boxes.set(moof);
+      boxes.set(mdat, moof.byteLength);
+      trackDecodeInfo.clearDtsInfo(track);
+      frameDuration = Math.ceil(ONE_SECOND_IN_TS$1 * 1024 / track.samplerate); // TODO this check was added to maintain backwards compatibility (particularly with
+      // tests) on adding the timingInfo event. However, it seems unlikely that there's a
+      // valid use-case where an init segment/data should be triggered without associated
+      // frames. Leaving for now, but should be looked into.
+
+      if (frames.length) {
+        segmentDuration = frames.length * frameDuration;
+        this.trigger('segmentTimingInfo', generateSegmentTimingInfo(
+        // The audio track's baseMediaDecodeTime is in audio clock cycles, but the
+        // frame info is in video clock cycles. Convert to match expectation of
+        // listeners (that all timestamps will be based on video clock cycles).
+        clock.audioTsToVideoTs(track.baseMediaDecodeTime, track.samplerate),
+        // frame times are already in video clock, as is segment duration
+        frames[0].dts, frames[0].pts, frames[0].dts + segmentDuration, frames[0].pts + segmentDuration, videoClockCyclesOfSilencePrefixed || 0));
+        this.trigger('timingInfo', {
+          start: frames[0].pts,
+          end: frames[0].pts + segmentDuration
+        });
+      }
+      this.trigger('data', {
+        track: track,
+        boxes: boxes
+      });
+      this.trigger('done', 'AudioSegmentStream');
+    };
+    this.reset = function () {
+      trackDecodeInfo.clearDtsInfo(track);
+      adtsFrames = [];
+      this.trigger('reset');
+    };
+  };
+  AudioSegmentStream.prototype = new Stream();
+  /**
+   * Constructs a single-track, ISO BMFF media segment from H264 data
+   * events. The output of this stream can be fed to a SourceBuffer
+   * configured with a suitable initialization segment.
+   * @param track {object} track metadata configuration
+   * @param options {object} transmuxer options object
+   * @param options.alignGopsAtEnd {boolean} If true, start from the end of the
+   *        gopsToAlignWith list when attempting to align gop pts
+   * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+   *        in the source; false to adjust the first segment to start at 0.
+   */
+
+  VideoSegmentStream = function (track, options) {
+    var sequenceNumber,
+      nalUnits = [],
+      gopsToAlignWith = [],
+      config,
+      pps;
+    options = options || {};
+    sequenceNumber = options.firstSequenceNumber || 0;
+    VideoSegmentStream.prototype.init.call(this);
+    delete track.minPTS;
+    this.gopCache_ = [];
+    /**
+      * Constructs a ISO BMFF segment given H264 nalUnits
+      * @param {Object} nalUnit A data event representing a nalUnit
+      * @param {String} nalUnit.nalUnitType
+      * @param {Object} nalUnit.config Properties for a mp4 track
+      * @param {Uint8Array} nalUnit.data The nalUnit bytes
+      * @see lib/codecs/h264.js
+     **/
+
+    this.push = function (nalUnit) {
+      trackDecodeInfo.collectDtsInfo(track, nalUnit); // record the track config
+
+      if (nalUnit.nalUnitType === 'seq_parameter_set_rbsp' && !config) {
+        config = nalUnit.config;
+        track.sps = [nalUnit.data];
+        VIDEO_PROPERTIES.forEach(function (prop) {
+          track[prop] = config[prop];
+        }, this);
+      }
+      if (nalUnit.nalUnitType === 'pic_parameter_set_rbsp' && !pps) {
+        pps = nalUnit.data;
+        track.pps = [nalUnit.data];
+      } // buffer video until flush() is called
+
+      nalUnits.push(nalUnit);
+    };
+    /**
+      * Pass constructed ISO BMFF track and boxes on to the
+      * next stream in the pipeline
+     **/
+
+    this.flush = function () {
+      var frames,
+        gopForFusion,
+        gops,
+        moof,
+        mdat,
+        boxes,
+        prependedContentDuration = 0,
+        firstGop,
+        lastGop; // Throw away nalUnits at the start of the byte stream until
+      // we find the first AUD
+
+      while (nalUnits.length) {
+        if (nalUnits[0].nalUnitType === 'access_unit_delimiter_rbsp') {
+          break;
+        }
+        nalUnits.shift();
+      } // Return early if no video data has been observed
+
+      if (nalUnits.length === 0) {
+        this.resetStream_();
+        this.trigger('done', 'VideoSegmentStream');
+        return;
+      } // Organize the raw nal-units into arrays that represent
+      // higher-level constructs such as frames and gops
+      // (group-of-pictures)
+
+      frames = frameUtils.groupNalsIntoFrames(nalUnits);
+      gops = frameUtils.groupFramesIntoGops(frames); // If the first frame of this fragment is not a keyframe we have
+      // a problem since MSE (on Chrome) requires a leading keyframe.
+      //
+      // We have two approaches to repairing this situation:
+      // 1) GOP-FUSION:
+      //    This is where we keep track of the GOPS (group-of-pictures)
+      //    from previous fragments and attempt to find one that we can
+      //    prepend to the current fragment in order to create a valid
+      //    fragment.
+      // 2) KEYFRAME-PULLING:
+      //    Here we search for the first keyframe in the fragment and
+      //    throw away all the frames between the start of the fragment
+      //    and that keyframe. We then extend the duration and pull the
+      //    PTS of the keyframe forward so that it covers the time range
+      //    of the frames that were disposed of.
+      //
+      // #1 is far prefereable over #2 which can cause "stuttering" but
+      // requires more things to be just right.
+
+      if (!gops[0][0].keyFrame) {
+        // Search for a gop for fusion from our gopCache
+        gopForFusion = this.getGopForFusion_(nalUnits[0], track);
+        if (gopForFusion) {
+          // in order to provide more accurate timing information about the segment, save
+          // the number of seconds prepended to the original segment due to GOP fusion
+          prependedContentDuration = gopForFusion.duration;
+          gops.unshift(gopForFusion); // Adjust Gops' metadata to account for the inclusion of the
+          // new gop at the beginning
+
+          gops.byteLength += gopForFusion.byteLength;
+          gops.nalCount += gopForFusion.nalCount;
+          gops.pts = gopForFusion.pts;
+          gops.dts = gopForFusion.dts;
+          gops.duration += gopForFusion.duration;
+        } else {
+          // If we didn't find a candidate gop fall back to keyframe-pulling
+          gops = frameUtils.extendFirstKeyFrame(gops);
+        }
+      } // Trim gops to align with gopsToAlignWith
+
+      if (gopsToAlignWith.length) {
+        var alignedGops;
+        if (options.alignGopsAtEnd) {
+          alignedGops = this.alignGopsAtEnd_(gops);
+        } else {
+          alignedGops = this.alignGopsAtStart_(gops);
+        }
+        if (!alignedGops) {
+          // save all the nals in the last GOP into the gop cache
+          this.gopCache_.unshift({
+            gop: gops.pop(),
+            pps: track.pps,
+            sps: track.sps
+          }); // Keep a maximum of 6 GOPs in the cache
+
+          this.gopCache_.length = Math.min(6, this.gopCache_.length); // Clear nalUnits
+
+          nalUnits = []; // return early no gops can be aligned with desired gopsToAlignWith
+
+          this.resetStream_();
+          this.trigger('done', 'VideoSegmentStream');
+          return;
+        } // Some gops were trimmed. clear dts info so minSegmentDts and pts are correct
+        // when recalculated before sending off to CoalesceStream
+
+        trackDecodeInfo.clearDtsInfo(track);
+        gops = alignedGops;
+      }
+      trackDecodeInfo.collectDtsInfo(track, gops); // First, we have to build the index from byte locations to
+      // samples (that is, frames) in the video data
+
+      track.samples = frameUtils.generateSampleTable(gops); // Concatenate the video data and construct the mdat
+
+      mdat = mp4.mdat(frameUtils.concatenateNalData(gops));
+      track.baseMediaDecodeTime = trackDecodeInfo.calculateTrackBaseMediaDecodeTime(track, options.keepOriginalTimestamps);
+      this.trigger('processedGopsInfo', gops.map(function (gop) {
+        return {
+          pts: gop.pts,
+          dts: gop.dts,
+          byteLength: gop.byteLength
+        };
+      }));
+      firstGop = gops[0];
+      lastGop = gops[gops.length - 1];
+      this.trigger('segmentTimingInfo', generateSegmentTimingInfo(track.baseMediaDecodeTime, firstGop.dts, firstGop.pts, lastGop.dts + lastGop.duration, lastGop.pts + lastGop.duration, prependedContentDuration));
+      this.trigger('timingInfo', {
+        start: gops[0].pts,
+        end: gops[gops.length - 1].pts + gops[gops.length - 1].duration
+      }); // save all the nals in the last GOP into the gop cache
+
+      this.gopCache_.unshift({
+        gop: gops.pop(),
+        pps: track.pps,
+        sps: track.sps
+      }); // Keep a maximum of 6 GOPs in the cache
+
+      this.gopCache_.length = Math.min(6, this.gopCache_.length); // Clear nalUnits
+
+      nalUnits = [];
+      this.trigger('baseMediaDecodeTime', track.baseMediaDecodeTime);
+      this.trigger('timelineStartInfo', track.timelineStartInfo);
+      moof = mp4.moof(sequenceNumber, [track]); // it would be great to allocate this array up front instead of
+      // throwing away hundreds of media segment fragments
+
+      boxes = new Uint8Array(moof.byteLength + mdat.byteLength); // Bump the sequence number for next time
+
+      sequenceNumber++;
+      boxes.set(moof);
+      boxes.set(mdat, moof.byteLength);
+      this.trigger('data', {
+        track: track,
+        boxes: boxes
+      });
+      this.resetStream_(); // Continue with the flush process now
+
+      this.trigger('done', 'VideoSegmentStream');
+    };
+    this.reset = function () {
+      this.resetStream_();
+      nalUnits = [];
+      this.gopCache_.length = 0;
+      gopsToAlignWith.length = 0;
+      this.trigger('reset');
+    };
+    this.resetStream_ = function () {
+      trackDecodeInfo.clearDtsInfo(track); // reset config and pps because they may differ across segments
+      // for instance, when we are rendition switching
+
+      config = undefined;
+      pps = undefined;
+    }; // Search for a candidate Gop for gop-fusion from the gop cache and
+    // return it or return null if no good candidate was found
+
+    this.getGopForFusion_ = function (nalUnit) {
+      var halfSecond = 45000,
+        // Half-a-second in a 90khz clock
+        allowableOverlap = 10000,
+        // About 3 frames @ 30fps
+        nearestDistance = Infinity,
+        dtsDistance,
+        nearestGopObj,
+        currentGop,
+        currentGopObj,
+        i; // Search for the GOP nearest to the beginning of this nal unit
+
+      for (i = 0; i < this.gopCache_.length; i++) {
+        currentGopObj = this.gopCache_[i];
+        currentGop = currentGopObj.gop; // Reject Gops with different SPS or PPS
+
+        if (!(track.pps && arrayEquals(track.pps[0], currentGopObj.pps[0])) || !(track.sps && arrayEquals(track.sps[0], currentGopObj.sps[0]))) {
+          continue;
+        } // Reject Gops that would require a negative baseMediaDecodeTime
+
+        if (currentGop.dts < track.timelineStartInfo.dts) {
+          continue;
+        } // The distance between the end of the gop and the start of the nalUnit
+
+        dtsDistance = nalUnit.dts - currentGop.dts - currentGop.duration; // Only consider GOPS that start before the nal unit and end within
+        // a half-second of the nal unit
+
+        if (dtsDistance >= -allowableOverlap && dtsDistance <= halfSecond) {
+          // Always use the closest GOP we found if there is more than
+          // one candidate
+          if (!nearestGopObj || nearestDistance > dtsDistance) {
+            nearestGopObj = currentGopObj;
+            nearestDistance = dtsDistance;
+          }
+        }
+      }
+      if (nearestGopObj) {
+        return nearestGopObj.gop;
+      }
+      return null;
+    }; // trim gop list to the first gop found that has a matching pts with a gop in the list
+    // of gopsToAlignWith starting from the START of the list
+
+    this.alignGopsAtStart_ = function (gops) {
+      var alignIndex, gopIndex, align, gop, byteLength, nalCount, duration, alignedGops;
+      byteLength = gops.byteLength;
+      nalCount = gops.nalCount;
+      duration = gops.duration;
+      alignIndex = gopIndex = 0;
+      while (alignIndex < gopsToAlignWith.length && gopIndex < gops.length) {
+        align = gopsToAlignWith[alignIndex];
+        gop = gops[gopIndex];
+        if (align.pts === gop.pts) {
+          break;
+        }
+        if (gop.pts > align.pts) {
+          // this current gop starts after the current gop we want to align on, so increment
+          // align index
+          alignIndex++;
+          continue;
+        } // current gop starts before the current gop we want to align on. so increment gop
+        // index
+
+        gopIndex++;
+        byteLength -= gop.byteLength;
+        nalCount -= gop.nalCount;
+        duration -= gop.duration;
+      }
+      if (gopIndex === 0) {
+        // no gops to trim
+        return gops;
+      }
+      if (gopIndex === gops.length) {
+        // all gops trimmed, skip appending all gops
+        return null;
+      }
+      alignedGops = gops.slice(gopIndex);
+      alignedGops.byteLength = byteLength;
+      alignedGops.duration = duration;
+      alignedGops.nalCount = nalCount;
+      alignedGops.pts = alignedGops[0].pts;
+      alignedGops.dts = alignedGops[0].dts;
+      return alignedGops;
+    }; // trim gop list to the first gop found that has a matching pts with a gop in the list
+    // of gopsToAlignWith starting from the END of the list
+
+    this.alignGopsAtEnd_ = function (gops) {
+      var alignIndex, gopIndex, align, gop, alignEndIndex, matchFound;
+      alignIndex = gopsToAlignWith.length - 1;
+      gopIndex = gops.length - 1;
+      alignEndIndex = null;
+      matchFound = false;
+      while (alignIndex >= 0 && gopIndex >= 0) {
+        align = gopsToAlignWith[alignIndex];
+        gop = gops[gopIndex];
+        if (align.pts === gop.pts) {
+          matchFound = true;
+          break;
+        }
+        if (align.pts > gop.pts) {
+          alignIndex--;
+          continue;
+        }
+        if (alignIndex === gopsToAlignWith.length - 1) {
+          // gop.pts is greater than the last alignment candidate. If no match is found
+          // by the end of this loop, we still want to append gops that come after this
+          // point
+          alignEndIndex = gopIndex;
+        }
+        gopIndex--;
+      }
+      if (!matchFound && alignEndIndex === null) {
+        return null;
+      }
+      var trimIndex;
+      if (matchFound) {
+        trimIndex = gopIndex;
+      } else {
+        trimIndex = alignEndIndex;
+      }
+      if (trimIndex === 0) {
+        return gops;
+      }
+      var alignedGops = gops.slice(trimIndex);
+      var metadata = alignedGops.reduce(function (total, gop) {
+        total.byteLength += gop.byteLength;
+        total.duration += gop.duration;
+        total.nalCount += gop.nalCount;
+        return total;
+      }, {
+        byteLength: 0,
+        duration: 0,
+        nalCount: 0
+      });
+      alignedGops.byteLength = metadata.byteLength;
+      alignedGops.duration = metadata.duration;
+      alignedGops.nalCount = metadata.nalCount;
+      alignedGops.pts = alignedGops[0].pts;
+      alignedGops.dts = alignedGops[0].dts;
+      return alignedGops;
+    };
+    this.alignGopsWith = function (newGopsToAlignWith) {
+      gopsToAlignWith = newGopsToAlignWith;
+    };
+  };
+  VideoSegmentStream.prototype = new Stream();
+  /**
+   * A Stream that can combine multiple streams (ie. audio & video)
+   * into a single output segment for MSE. Also supports audio-only
+   * and video-only streams.
+   * @param options {object} transmuxer options object
+   * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+   *        in the source; false to adjust the first segment to start at media timeline start.
+   */
+
+  CoalesceStream = function (options, metadataStream) {
+    // Number of Tracks per output segment
+    // If greater than 1, we combine multiple
+    // tracks into a single segment
+    this.numberOfTracks = 0;
+    this.metadataStream = metadataStream;
+    options = options || {};
+    if (typeof options.remux !== 'undefined') {
+      this.remuxTracks = !!options.remux;
+    } else {
+      this.remuxTracks = true;
+    }
+    if (typeof options.keepOriginalTimestamps === 'boolean') {
+      this.keepOriginalTimestamps = options.keepOriginalTimestamps;
+    } else {
+      this.keepOriginalTimestamps = false;
+    }
+    this.pendingTracks = [];
+    this.videoTrack = null;
+    this.pendingBoxes = [];
+    this.pendingCaptions = [];
+    this.pendingMetadata = [];
+    this.pendingBytes = 0;
+    this.emittedTracks = 0;
+    CoalesceStream.prototype.init.call(this); // Take output from multiple
+
+    this.push = function (output) {
+      // buffer incoming captions until the associated video segment
+      // finishes
+      if (output.content || output.text) {
+        return this.pendingCaptions.push(output);
+      } // buffer incoming id3 tags until the final flush
+
+      if (output.frames) {
+        return this.pendingMetadata.push(output);
+      } // Add this track to the list of pending tracks and store
+      // important information required for the construction of
+      // the final segment
+
+      this.pendingTracks.push(output.track);
+      this.pendingBytes += output.boxes.byteLength; // TODO: is there an issue for this against chrome?
+      // We unshift audio and push video because
+      // as of Chrome 75 when switching from
+      // one init segment to another if the video
+      // mdat does not appear after the audio mdat
+      // only audio will play for the duration of our transmux.
+
+      if (output.track.type === 'video') {
+        this.videoTrack = output.track;
+        this.pendingBoxes.push(output.boxes);
+      }
+      if (output.track.type === 'audio') {
+        this.audioTrack = output.track;
+        this.pendingBoxes.unshift(output.boxes);
+      }
+    };
+  };
+  CoalesceStream.prototype = new Stream();
+  CoalesceStream.prototype.flush = function (flushSource) {
+    var offset = 0,
+      event = {
+        captions: [],
+        captionStreams: {},
+        metadata: [],
+        info: {}
+      },
+      caption,
+      id3,
+      initSegment,
+      timelineStartPts = 0,
+      i;
+    if (this.pendingTracks.length < this.numberOfTracks) {
+      if (flushSource !== 'VideoSegmentStream' && flushSource !== 'AudioSegmentStream') {
+        // Return because we haven't received a flush from a data-generating
+        // portion of the segment (meaning that we have only recieved meta-data
+        // or captions.)
+        return;
+      } else if (this.remuxTracks) {
+        // Return until we have enough tracks from the pipeline to remux (if we
+        // are remuxing audio and video into a single MP4)
+        return;
+      } else if (this.pendingTracks.length === 0) {
+        // In the case where we receive a flush without any data having been
+        // received we consider it an emitted track for the purposes of coalescing
+        // `done` events.
+        // We do this for the case where there is an audio and video track in the
+        // segment but no audio data. (seen in several playlists with alternate
+        // audio tracks and no audio present in the main TS segments.)
+        this.emittedTracks++;
+        if (this.emittedTracks >= this.numberOfTracks) {
+          this.trigger('done');
+          this.emittedTracks = 0;
+        }
+        return;
+      }
+    }
+    if (this.videoTrack) {
+      timelineStartPts = this.videoTrack.timelineStartInfo.pts;
+      VIDEO_PROPERTIES.forEach(function (prop) {
+        event.info[prop] = this.videoTrack[prop];
+      }, this);
+    } else if (this.audioTrack) {
+      timelineStartPts = this.audioTrack.timelineStartInfo.pts;
+      AUDIO_PROPERTIES.forEach(function (prop) {
+        event.info[prop] = this.audioTrack[prop];
+      }, this);
+    }
+    if (this.videoTrack || this.audioTrack) {
+      if (this.pendingTracks.length === 1) {
+        event.type = this.pendingTracks[0].type;
+      } else {
+        event.type = 'combined';
+      }
+      this.emittedTracks += this.pendingTracks.length;
+      initSegment = mp4.initSegment(this.pendingTracks); // Create a new typed array to hold the init segment
+
+      event.initSegment = new Uint8Array(initSegment.byteLength); // Create an init segment containing a moov
+      // and track definitions
+
+      event.initSegment.set(initSegment); // Create a new typed array to hold the moof+mdats
+
+      event.data = new Uint8Array(this.pendingBytes); // Append each moof+mdat (one per track) together
+
+      for (i = 0; i < this.pendingBoxes.length; i++) {
+        event.data.set(this.pendingBoxes[i], offset);
+        offset += this.pendingBoxes[i].byteLength;
+      } // Translate caption PTS times into second offsets to match the
+      // video timeline for the segment, and add track info
+
+      for (i = 0; i < this.pendingCaptions.length; i++) {
+        caption = this.pendingCaptions[i];
+        caption.startTime = clock.metadataTsToSeconds(caption.startPts, timelineStartPts, this.keepOriginalTimestamps);
+        caption.endTime = clock.metadataTsToSeconds(caption.endPts, timelineStartPts, this.keepOriginalTimestamps);
+        event.captionStreams[caption.stream] = true;
+        event.captions.push(caption);
+      } // Translate ID3 frame PTS times into second offsets to match the
+      // video timeline for the segment
+
+      for (i = 0; i < this.pendingMetadata.length; i++) {
+        id3 = this.pendingMetadata[i];
+        id3.cueTime = clock.metadataTsToSeconds(id3.pts, timelineStartPts, this.keepOriginalTimestamps);
+        event.metadata.push(id3);
+      } // We add this to every single emitted segment even though we only need
+      // it for the first
+
+      event.metadata.dispatchType = this.metadataStream.dispatchType; // Reset stream state
+
+      this.pendingTracks.length = 0;
+      this.videoTrack = null;
+      this.pendingBoxes.length = 0;
+      this.pendingCaptions.length = 0;
+      this.pendingBytes = 0;
+      this.pendingMetadata.length = 0; // Emit the built segment
+      // We include captions and ID3 tags for backwards compatibility,
+      // ideally we should send only video and audio in the data event
+
+      this.trigger('data', event); // Emit each caption to the outside world
+      // Ideally, this would happen immediately on parsing captions,
+      // but we need to ensure that video data is sent back first
+      // so that caption timing can be adjusted to match video timing
+
+      for (i = 0; i < event.captions.length; i++) {
+        caption = event.captions[i];
+        this.trigger('caption', caption);
+      } // Emit each id3 tag to the outside world
+      // Ideally, this would happen immediately on parsing the tag,
+      // but we need to ensure that video data is sent back first
+      // so that ID3 frame timing can be adjusted to match video timing
+
+      for (i = 0; i < event.metadata.length; i++) {
+        id3 = event.metadata[i];
+        this.trigger('id3Frame', id3);
+      }
+    } // Only emit `done` if all tracks have been flushed and emitted
+
+    if (this.emittedTracks >= this.numberOfTracks) {
+      this.trigger('done');
+      this.emittedTracks = 0;
+    }
+  };
+  CoalesceStream.prototype.setRemux = function (val) {
+    this.remuxTracks = val;
+  };
+  /**
+   * A Stream that expects MP2T binary data as input and produces
+   * corresponding media segments, suitable for use with Media Source
+   * Extension (MSE) implementations that support the ISO BMFF byte
+   * stream format, like Chrome.
+   */
+
+  Transmuxer = function (options) {
+    var self = this,
+      hasFlushed = true,
+      videoTrack,
+      audioTrack;
+    Transmuxer.prototype.init.call(this);
+    options = options || {};
+    this.baseMediaDecodeTime = options.baseMediaDecodeTime || 0;
+    this.transmuxPipeline_ = {};
+    this.setupAacPipeline = function () {
+      var pipeline = {};
+      this.transmuxPipeline_ = pipeline;
+      pipeline.type = 'aac';
+      pipeline.metadataStream = new m2ts.MetadataStream(); // set up the parsing pipeline
+
+      pipeline.aacStream = new AacStream();
+      pipeline.audioTimestampRolloverStream = new m2ts.TimestampRolloverStream('audio');
+      pipeline.timedMetadataTimestampRolloverStream = new m2ts.TimestampRolloverStream('timed-metadata');
+      pipeline.adtsStream = new AdtsStream();
+      pipeline.coalesceStream = new CoalesceStream(options, pipeline.metadataStream);
+      pipeline.headOfPipeline = pipeline.aacStream;
+      pipeline.aacStream.pipe(pipeline.audioTimestampRolloverStream).pipe(pipeline.adtsStream);
+      pipeline.aacStream.pipe(pipeline.timedMetadataTimestampRolloverStream).pipe(pipeline.metadataStream).pipe(pipeline.coalesceStream);
+      pipeline.metadataStream.on('timestamp', function (frame) {
+        pipeline.aacStream.setTimestamp(frame.timeStamp);
+      });
+      pipeline.aacStream.on('data', function (data) {
+        if (data.type !== 'timed-metadata' && data.type !== 'audio' || pipeline.audioSegmentStream) {
+          return;
+        }
+        audioTrack = audioTrack || {
+          timelineStartInfo: {
+            baseMediaDecodeTime: self.baseMediaDecodeTime
+          },
+          codec: 'adts',
+          type: 'audio'
+        }; // hook up the audio segment stream to the first track with aac data
+
+        pipeline.coalesceStream.numberOfTracks++;
+        pipeline.audioSegmentStream = new AudioSegmentStream(audioTrack, options);
+        pipeline.audioSegmentStream.on('log', self.getLogTrigger_('audioSegmentStream'));
+        pipeline.audioSegmentStream.on('timingInfo', self.trigger.bind(self, 'audioTimingInfo')); // Set up the final part of the audio pipeline
+
+        pipeline.adtsStream.pipe(pipeline.audioSegmentStream).pipe(pipeline.coalesceStream); // emit pmt info
+
+        self.trigger('trackinfo', {
+          hasAudio: !!audioTrack,
+          hasVideo: !!videoTrack
+        });
+      }); // Re-emit any data coming from the coalesce stream to the outside world
+
+      pipeline.coalesceStream.on('data', this.trigger.bind(this, 'data')); // Let the consumer know we have finished flushing the entire pipeline
+
+      pipeline.coalesceStream.on('done', this.trigger.bind(this, 'done'));
+      addPipelineLogRetriggers(this, pipeline);
+    };
+    this.setupTsPipeline = function () {
+      var pipeline = {};
+      this.transmuxPipeline_ = pipeline;
+      pipeline.type = 'ts';
+      pipeline.metadataStream = new m2ts.MetadataStream(); // set up the parsing pipeline
+
+      pipeline.packetStream = new m2ts.TransportPacketStream();
+      pipeline.parseStream = new m2ts.TransportParseStream();
+      pipeline.elementaryStream = new m2ts.ElementaryStream();
+      pipeline.timestampRolloverStream = new m2ts.TimestampRolloverStream();
+      pipeline.adtsStream = new AdtsStream();
+      pipeline.h264Stream = new H264Stream();
+      pipeline.captionStream = new m2ts.CaptionStream(options);
+      pipeline.coalesceStream = new CoalesceStream(options, pipeline.metadataStream);
+      pipeline.headOfPipeline = pipeline.packetStream; // disassemble MPEG2-TS packets into elementary streams
+
+      pipeline.packetStream.pipe(pipeline.parseStream).pipe(pipeline.elementaryStream).pipe(pipeline.timestampRolloverStream); // !!THIS ORDER IS IMPORTANT!!
+      // demux the streams
+
+      pipeline.timestampRolloverStream.pipe(pipeline.h264Stream);
+      pipeline.timestampRolloverStream.pipe(pipeline.adtsStream);
+      pipeline.timestampRolloverStream.pipe(pipeline.metadataStream).pipe(pipeline.coalesceStream); // Hook up CEA-608/708 caption stream
+
+      pipeline.h264Stream.pipe(pipeline.captionStream).pipe(pipeline.coalesceStream);
+      pipeline.elementaryStream.on('data', function (data) {
+        var i;
+        if (data.type === 'metadata') {
+          i = data.tracks.length; // scan the tracks listed in the metadata
+
+          while (i--) {
+            if (!videoTrack && data.tracks[i].type === 'video') {
+              videoTrack = data.tracks[i];
+              videoTrack.timelineStartInfo.baseMediaDecodeTime = self.baseMediaDecodeTime;
+            } else if (!audioTrack && data.tracks[i].type === 'audio') {
+              audioTrack = data.tracks[i];
+              audioTrack.timelineStartInfo.baseMediaDecodeTime = self.baseMediaDecodeTime;
+            }
+          } // hook up the video segment stream to the first track with h264 data
+
+          if (videoTrack && !pipeline.videoSegmentStream) {
+            pipeline.coalesceStream.numberOfTracks++;
+            pipeline.videoSegmentStream = new VideoSegmentStream(videoTrack, options);
+            pipeline.videoSegmentStream.on('log', self.getLogTrigger_('videoSegmentStream'));
+            pipeline.videoSegmentStream.on('timelineStartInfo', function (timelineStartInfo) {
+              // When video emits timelineStartInfo data after a flush, we forward that
+              // info to the AudioSegmentStream, if it exists, because video timeline
+              // data takes precedence.  Do not do this if keepOriginalTimestamps is set,
+              // because this is a particularly subtle form of timestamp alteration.
+              if (audioTrack && !options.keepOriginalTimestamps) {
+                audioTrack.timelineStartInfo = timelineStartInfo; // On the first segment we trim AAC frames that exist before the
+                // very earliest DTS we have seen in video because Chrome will
+                // interpret any video track with a baseMediaDecodeTime that is
+                // non-zero as a gap.
+
+                pipeline.audioSegmentStream.setEarliestDts(timelineStartInfo.dts - self.baseMediaDecodeTime);
+              }
+            });
+            pipeline.videoSegmentStream.on('processedGopsInfo', self.trigger.bind(self, 'gopInfo'));
+            pipeline.videoSegmentStream.on('segmentTimingInfo', self.trigger.bind(self, 'videoSegmentTimingInfo'));
+            pipeline.videoSegmentStream.on('baseMediaDecodeTime', function (baseMediaDecodeTime) {
+              if (audioTrack) {
+                pipeline.audioSegmentStream.setVideoBaseMediaDecodeTime(baseMediaDecodeTime);
+              }
+            });
+            pipeline.videoSegmentStream.on('timingInfo', self.trigger.bind(self, 'videoTimingInfo')); // Set up the final part of the video pipeline
+
+            pipeline.h264Stream.pipe(pipeline.videoSegmentStream).pipe(pipeline.coalesceStream);
+          }
+          if (audioTrack && !pipeline.audioSegmentStream) {
+            // hook up the audio segment stream to the first track with aac data
+            pipeline.coalesceStream.numberOfTracks++;
+            pipeline.audioSegmentStream = new AudioSegmentStream(audioTrack, options);
+            pipeline.audioSegmentStream.on('log', self.getLogTrigger_('audioSegmentStream'));
+            pipeline.audioSegmentStream.on('timingInfo', self.trigger.bind(self, 'audioTimingInfo'));
+            pipeline.audioSegmentStream.on('segmentTimingInfo', self.trigger.bind(self, 'audioSegmentTimingInfo')); // Set up the final part of the audio pipeline
+
+            pipeline.adtsStream.pipe(pipeline.audioSegmentStream).pipe(pipeline.coalesceStream);
+          } // emit pmt info
+
+          self.trigger('trackinfo', {
+            hasAudio: !!audioTrack,
+            hasVideo: !!videoTrack
+          });
+        }
+      }); // Re-emit any data coming from the coalesce stream to the outside world
+
+      pipeline.coalesceStream.on('data', this.trigger.bind(this, 'data'));
+      pipeline.coalesceStream.on('id3Frame', function (id3Frame) {
+        id3Frame.dispatchType = pipeline.metadataStream.dispatchType;
+        self.trigger('id3Frame', id3Frame);
+      });
+      pipeline.coalesceStream.on('caption', this.trigger.bind(this, 'caption')); // Let the consumer know we have finished flushing the entire pipeline
+
+      pipeline.coalesceStream.on('done', this.trigger.bind(this, 'done'));
+      addPipelineLogRetriggers(this, pipeline);
+    }; // hook up the segment streams once track metadata is delivered
+
+    this.setBaseMediaDecodeTime = function (baseMediaDecodeTime) {
+      var pipeline = this.transmuxPipeline_;
+      if (!options.keepOriginalTimestamps) {
+        this.baseMediaDecodeTime = baseMediaDecodeTime;
+      }
+      if (audioTrack) {
+        audioTrack.timelineStartInfo.dts = undefined;
+        audioTrack.timelineStartInfo.pts = undefined;
+        trackDecodeInfo.clearDtsInfo(audioTrack);
+        if (pipeline.audioTimestampRolloverStream) {
+          pipeline.audioTimestampRolloverStream.discontinuity();
+        }
+      }
+      if (videoTrack) {
+        if (pipeline.videoSegmentStream) {
+          pipeline.videoSegmentStream.gopCache_ = [];
+        }
+        videoTrack.timelineStartInfo.dts = undefined;
+        videoTrack.timelineStartInfo.pts = undefined;
+        trackDecodeInfo.clearDtsInfo(videoTrack);
+        pipeline.captionStream.reset();
+      }
+      if (pipeline.timestampRolloverStream) {
+        pipeline.timestampRolloverStream.discontinuity();
+      }
+    };
+    this.setAudioAppendStart = function (timestamp) {
+      if (audioTrack) {
+        this.transmuxPipeline_.audioSegmentStream.setAudioAppendStart(timestamp);
+      }
+    };
+    this.setRemux = function (val) {
+      var pipeline = this.transmuxPipeline_;
+      options.remux = val;
+      if (pipeline && pipeline.coalesceStream) {
+        pipeline.coalesceStream.setRemux(val);
+      }
+    };
+    this.alignGopsWith = function (gopsToAlignWith) {
+      if (videoTrack && this.transmuxPipeline_.videoSegmentStream) {
+        this.transmuxPipeline_.videoSegmentStream.alignGopsWith(gopsToAlignWith);
+      }
+    };
+    this.getLogTrigger_ = function (key) {
+      var self = this;
+      return function (event) {
+        event.stream = key;
+        self.trigger('log', event);
+      };
+    }; // feed incoming data to the front of the parsing pipeline
+
+    this.push = function (data) {
+      if (hasFlushed) {
+        var isAac = isLikelyAacData(data);
+        if (isAac && this.transmuxPipeline_.type !== 'aac') {
+          this.setupAacPipeline();
+        } else if (!isAac && this.transmuxPipeline_.type !== 'ts') {
+          this.setupTsPipeline();
+        }
+        hasFlushed = false;
+      }
+      this.transmuxPipeline_.headOfPipeline.push(data);
+    }; // flush any buffered data
+
+    this.flush = function () {
+      hasFlushed = true; // Start at the top of the pipeline and flush all pending work
+
+      this.transmuxPipeline_.headOfPipeline.flush();
+    };
+    this.endTimeline = function () {
+      this.transmuxPipeline_.headOfPipeline.endTimeline();
+    };
+    this.reset = function () {
+      if (this.transmuxPipeline_.headOfPipeline) {
+        this.transmuxPipeline_.headOfPipeline.reset();
+      }
+    }; // Caption data has to be reset when seeking outside buffered range
+
+    this.resetCaptions = function () {
+      if (this.transmuxPipeline_.captionStream) {
+        this.transmuxPipeline_.captionStream.reset();
+      }
+    };
+  };
+  Transmuxer.prototype = new Stream();
+  var transmuxer = {
+    Transmuxer: Transmuxer,
+    VideoSegmentStream: VideoSegmentStream,
+    AudioSegmentStream: AudioSegmentStream,
+    AUDIO_PROPERTIES: AUDIO_PROPERTIES,
+    VIDEO_PROPERTIES: VIDEO_PROPERTIES,
+    // exported for testing
+    generateSegmentTimingInfo: generateSegmentTimingInfo
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+
+  var toUnsigned$3 = function (value) {
+    return value >>> 0;
+  };
+  var toHexString$1 = function (value) {
+    return ('00' + value.toString(16)).slice(-2);
+  };
+  var bin = {
+    toUnsigned: toUnsigned$3,
+    toHexString: toHexString$1
+  };
+  var parseType$3 = function (buffer) {
+    var result = '';
+    result += String.fromCharCode(buffer[0]);
+    result += String.fromCharCode(buffer[1]);
+    result += String.fromCharCode(buffer[2]);
+    result += String.fromCharCode(buffer[3]);
+    return result;
+  };
+  var parseType_1 = parseType$3;
+  var toUnsigned$2 = bin.toUnsigned;
+  var parseType$2 = parseType_1;
+  var findBox$2 = function (data, path) {
+    var results = [],
+      i,
+      size,
+      type,
+      end,
+      subresults;
+    if (!path.length) {
+      // short-circuit the search for empty paths
+      return null;
+    }
+    for (i = 0; i < data.byteLength;) {
+      size = toUnsigned$2(data[i] << 24 | data[i + 1] << 16 | data[i + 2] << 8 | data[i + 3]);
+      type = parseType$2(data.subarray(i + 4, i + 8));
+      end = size > 1 ? i + size : data.byteLength;
+      if (type === path[0]) {
+        if (path.length === 1) {
+          // this is the end of the path and we've found the box we were
+          // looking for
+          results.push(data.subarray(i + 8, end));
+        } else {
+          // recursively search for the next box along the path
+          subresults = findBox$2(data.subarray(i + 8, end), path.slice(1));
+          if (subresults.length) {
+            results = results.concat(subresults);
+          }
+        }
+      }
+      i = end;
+    } // we've finished searching all of data
+
+    return results;
+  };
+  var findBox_1 = findBox$2;
+  var toUnsigned$1 = bin.toUnsigned;
+  var getUint64$2 = numbers.getUint64;
+  var tfdt = function (data) {
+    var result = {
+      version: data[0],
+      flags: new Uint8Array(data.subarray(1, 4))
+    };
+    if (result.version === 1) {
+      result.baseMediaDecodeTime = getUint64$2(data.subarray(4));
+    } else {
+      result.baseMediaDecodeTime = toUnsigned$1(data[4] << 24 | data[5] << 16 | data[6] << 8 | data[7]);
+    }
+    return result;
+  };
+  var parseTfdt$2 = tfdt;
+  var parseSampleFlags$1 = function (flags) {
+    return {
+      isLeading: (flags[0] & 0x0c) >>> 2,
+      dependsOn: flags[0] & 0x03,
+      isDependedOn: (flags[1] & 0xc0) >>> 6,
+      hasRedundancy: (flags[1] & 0x30) >>> 4,
+      paddingValue: (flags[1] & 0x0e) >>> 1,
+      isNonSyncSample: flags[1] & 0x01,
+      degradationPriority: flags[2] << 8 | flags[3]
+    };
+  };
+  var parseSampleFlags_1 = parseSampleFlags$1;
+  var parseSampleFlags = parseSampleFlags_1;
+  var trun = function (data) {
+    var result = {
+        version: data[0],
+        flags: new Uint8Array(data.subarray(1, 4)),
+        samples: []
+      },
+      view = new DataView(data.buffer, data.byteOffset, data.byteLength),
+      // Flag interpretation
+      dataOffsetPresent = result.flags[2] & 0x01,
+      // compare with 2nd byte of 0x1
+      firstSampleFlagsPresent = result.flags[2] & 0x04,
+      // compare with 2nd byte of 0x4
+      sampleDurationPresent = result.flags[1] & 0x01,
+      // compare with 2nd byte of 0x100
+      sampleSizePresent = result.flags[1] & 0x02,
+      // compare with 2nd byte of 0x200
+      sampleFlagsPresent = result.flags[1] & 0x04,
+      // compare with 2nd byte of 0x400
+      sampleCompositionTimeOffsetPresent = result.flags[1] & 0x08,
+      // compare with 2nd byte of 0x800
+      sampleCount = view.getUint32(4),
+      offset = 8,
+      sample;
+    if (dataOffsetPresent) {
+      // 32 bit signed integer
+      result.dataOffset = view.getInt32(offset);
+      offset += 4;
+    } // Overrides the flags for the first sample only. The order of
+    // optional values will be: duration, size, compositionTimeOffset
+
+    if (firstSampleFlagsPresent && sampleCount) {
+      sample = {
+        flags: parseSampleFlags(data.subarray(offset, offset + 4))
+      };
+      offset += 4;
+      if (sampleDurationPresent) {
+        sample.duration = view.getUint32(offset);
+        offset += 4;
+      }
+      if (sampleSizePresent) {
+        sample.size = view.getUint32(offset);
+        offset += 4;
+      }
+      if (sampleCompositionTimeOffsetPresent) {
+        if (result.version === 1) {
+          sample.compositionTimeOffset = view.getInt32(offset);
+        } else {
+          sample.compositionTimeOffset = view.getUint32(offset);
+        }
+        offset += 4;
+      }
+      result.samples.push(sample);
+      sampleCount--;
+    }
+    while (sampleCount--) {
+      sample = {};
+      if (sampleDurationPresent) {
+        sample.duration = view.getUint32(offset);
+        offset += 4;
+      }
+      if (sampleSizePresent) {
+        sample.size = view.getUint32(offset);
+        offset += 4;
+      }
+      if (sampleFlagsPresent) {
+        sample.flags = parseSampleFlags(data.subarray(offset, offset + 4));
+        offset += 4;
+      }
+      if (sampleCompositionTimeOffsetPresent) {
+        if (result.version === 1) {
+          sample.compositionTimeOffset = view.getInt32(offset);
+        } else {
+          sample.compositionTimeOffset = view.getUint32(offset);
+        }
+        offset += 4;
+      }
+      result.samples.push(sample);
+    }
+    return result;
+  };
+  var parseTrun$2 = trun;
+  var tfhd = function (data) {
+    var view = new DataView(data.buffer, data.byteOffset, data.byteLength),
+      result = {
+        version: data[0],
+        flags: new Uint8Array(data.subarray(1, 4)),
+        trackId: view.getUint32(4)
+      },
+      baseDataOffsetPresent = result.flags[2] & 0x01,
+      sampleDescriptionIndexPresent = result.flags[2] & 0x02,
+      defaultSampleDurationPresent = result.flags[2] & 0x08,
+      defaultSampleSizePresent = result.flags[2] & 0x10,
+      defaultSampleFlagsPresent = result.flags[2] & 0x20,
+      durationIsEmpty = result.flags[0] & 0x010000,
+      defaultBaseIsMoof = result.flags[0] & 0x020000,
+      i;
+    i = 8;
+    if (baseDataOffsetPresent) {
+      i += 4; // truncate top 4 bytes
+      // FIXME: should we read the full 64 bits?
+
+      result.baseDataOffset = view.getUint32(12);
+      i += 4;
+    }
+    if (sampleDescriptionIndexPresent) {
+      result.sampleDescriptionIndex = view.getUint32(i);
+      i += 4;
+    }
+    if (defaultSampleDurationPresent) {
+      result.defaultSampleDuration = view.getUint32(i);
+      i += 4;
+    }
+    if (defaultSampleSizePresent) {
+      result.defaultSampleSize = view.getUint32(i);
+      i += 4;
+    }
+    if (defaultSampleFlagsPresent) {
+      result.defaultSampleFlags = view.getUint32(i);
+    }
+    if (durationIsEmpty) {
+      result.durationIsEmpty = true;
+    }
+    if (!baseDataOffsetPresent && defaultBaseIsMoof) {
+      result.baseDataOffsetIsMoof = true;
+    }
+    return result;
+  };
+  var parseTfhd$2 = tfhd;
+  var win;
+  if (typeof window !== "undefined") {
+    win = window;
+  } else if (typeof commonjsGlobal !== "undefined") {
+    win = commonjsGlobal;
+  } else if (typeof self !== "undefined") {
+    win = self;
+  } else {
+    win = {};
+  }
+  var window_1 = win;
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Reads in-band CEA-708 captions out of FMP4 segments.
+   * @see https://en.wikipedia.org/wiki/CEA-708
+   */
+
+  var discardEmulationPreventionBytes = captionPacketParser.discardEmulationPreventionBytes;
+  var CaptionStream = captionStream.CaptionStream;
+  var findBox$1 = findBox_1;
+  var parseTfdt$1 = parseTfdt$2;
+  var parseTrun$1 = parseTrun$2;
+  var parseTfhd$1 = parseTfhd$2;
+  var window$2 = window_1;
+  /**
+    * Maps an offset in the mdat to a sample based on the the size of the samples.
+    * Assumes that `parseSamples` has been called first.
+    *
+    * @param {Number} offset - The offset into the mdat
+    * @param {Object[]} samples - An array of samples, parsed using `parseSamples`
+    * @return {?Object} The matching sample, or null if no match was found.
+    *
+    * @see ISO-BMFF-12/2015, Section 8.8.8
+   **/
+
+  var mapToSample = function (offset, samples) {
+    var approximateOffset = offset;
+    for (var i = 0; i < samples.length; i++) {
+      var sample = samples[i];
+      if (approximateOffset < sample.size) {
+        return sample;
+      }
+      approximateOffset -= sample.size;
+    }
+    return null;
+  };
+  /**
+    * Finds SEI nal units contained in a Media Data Box.
+    * Assumes that `parseSamples` has been called first.
+    *
+    * @param {Uint8Array} avcStream - The bytes of the mdat
+    * @param {Object[]} samples - The samples parsed out by `parseSamples`
+    * @param {Number} trackId - The trackId of this video track
+    * @return {Object[]} seiNals - the parsed SEI NALUs found.
+    *   The contents of the seiNal should match what is expected by
+    *   CaptionStream.push (nalUnitType, size, data, escapedRBSP, pts, dts)
+    *
+    * @see ISO-BMFF-12/2015, Section 8.1.1
+    * @see Rec. ITU-T H.264, 7.3.2.3.1
+   **/
+
+  var findSeiNals = function (avcStream, samples, trackId) {
+    var avcView = new DataView(avcStream.buffer, avcStream.byteOffset, avcStream.byteLength),
+      result = {
+        logs: [],
+        seiNals: []
+      },
+      seiNal,
+      i,
+      length,
+      lastMatchedSample;
+    for (i = 0; i + 4 < avcStream.length; i += length) {
+      length = avcView.getUint32(i);
+      i += 4; // Bail if this doesn't appear to be an H264 stream
+
+      if (length <= 0) {
+        continue;
+      }
+      switch (avcStream[i] & 0x1F) {
+        case 0x06:
+          var data = avcStream.subarray(i + 1, i + 1 + length);
+          var matchingSample = mapToSample(i, samples);
+          seiNal = {
+            nalUnitType: 'sei_rbsp',
+            size: length,
+            data: data,
+            escapedRBSP: discardEmulationPreventionBytes(data),
+            trackId: trackId
+          };
+          if (matchingSample) {
+            seiNal.pts = matchingSample.pts;
+            seiNal.dts = matchingSample.dts;
+            lastMatchedSample = matchingSample;
+          } else if (lastMatchedSample) {
+            // If a matching sample cannot be found, use the last
+            // sample's values as they should be as close as possible
+            seiNal.pts = lastMatchedSample.pts;
+            seiNal.dts = lastMatchedSample.dts;
+          } else {
+            result.logs.push({
+              level: 'warn',
+              message: 'We\'ve encountered a nal unit without data at ' + i + ' for trackId ' + trackId + '. See mux.js#223.'
+            });
+            break;
+          }
+          result.seiNals.push(seiNal);
+          break;
+      }
+    }
+    return result;
+  };
+  /**
+    * Parses sample information out of Track Run Boxes and calculates
+    * the absolute presentation and decode timestamps of each sample.
+    *
+    * @param {Array<Uint8Array>} truns - The Trun Run boxes to be parsed
+    * @param {Number|BigInt} baseMediaDecodeTime - base media decode time from tfdt
+        @see ISO-BMFF-12/2015, Section 8.8.12
+    * @param {Object} tfhd - The parsed Track Fragment Header
+    *   @see inspect.parseTfhd
+    * @return {Object[]} the parsed samples
+    *
+    * @see ISO-BMFF-12/2015, Section 8.8.8
+   **/
+
+  var parseSamples = function (truns, baseMediaDecodeTime, tfhd) {
+    var currentDts = baseMediaDecodeTime;
+    var defaultSampleDuration = tfhd.defaultSampleDuration || 0;
+    var defaultSampleSize = tfhd.defaultSampleSize || 0;
+    var trackId = tfhd.trackId;
+    var allSamples = [];
+    truns.forEach(function (trun) {
+      // Note: We currently do not parse the sample table as well
+      // as the trun. It's possible some sources will require this.
+      // moov > trak > mdia > minf > stbl
+      var trackRun = parseTrun$1(trun);
+      var samples = trackRun.samples;
+      samples.forEach(function (sample) {
+        if (sample.duration === undefined) {
+          sample.duration = defaultSampleDuration;
+        }
+        if (sample.size === undefined) {
+          sample.size = defaultSampleSize;
+        }
+        sample.trackId = trackId;
+        sample.dts = currentDts;
+        if (sample.compositionTimeOffset === undefined) {
+          sample.compositionTimeOffset = 0;
+        }
+        if (typeof currentDts === 'bigint') {
+          sample.pts = currentDts + window$2.BigInt(sample.compositionTimeOffset);
+          currentDts += window$2.BigInt(sample.duration);
+        } else {
+          sample.pts = currentDts + sample.compositionTimeOffset;
+          currentDts += sample.duration;
+        }
+      });
+      allSamples = allSamples.concat(samples);
+    });
+    return allSamples;
+  };
+  /**
+    * Parses out caption nals from an FMP4 segment's video tracks.
+    *
+    * @param {Uint8Array} segment - The bytes of a single segment
+    * @param {Number} videoTrackId - The trackId of a video track in the segment
+    * @return {Object.<Number, Object[]>} A mapping of video trackId to
+    *   a list of seiNals found in that track
+   **/
+
+  var parseCaptionNals = function (segment, videoTrackId) {
+    // To get the samples
+    var trafs = findBox$1(segment, ['moof', 'traf']); // To get SEI NAL units
+
+    var mdats = findBox$1(segment, ['mdat']);
+    var captionNals = {};
+    var mdatTrafPairs = []; // Pair up each traf with a mdat as moofs and mdats are in pairs
+
+    mdats.forEach(function (mdat, index) {
+      var matchingTraf = trafs[index];
+      mdatTrafPairs.push({
+        mdat: mdat,
+        traf: matchingTraf
+      });
+    });
+    mdatTrafPairs.forEach(function (pair) {
+      var mdat = pair.mdat;
+      var traf = pair.traf;
+      var tfhd = findBox$1(traf, ['tfhd']); // Exactly 1 tfhd per traf
+
+      var headerInfo = parseTfhd$1(tfhd[0]);
+      var trackId = headerInfo.trackId;
+      var tfdt = findBox$1(traf, ['tfdt']); // Either 0 or 1 tfdt per traf
+
+      var baseMediaDecodeTime = tfdt.length > 0 ? parseTfdt$1(tfdt[0]).baseMediaDecodeTime : 0;
+      var truns = findBox$1(traf, ['trun']);
+      var samples;
+      var result; // Only parse video data for the chosen video track
+
+      if (videoTrackId === trackId && truns.length > 0) {
+        samples = parseSamples(truns, baseMediaDecodeTime, headerInfo);
+        result = findSeiNals(mdat, samples, trackId);
+        if (!captionNals[trackId]) {
+          captionNals[trackId] = {
+            seiNals: [],
+            logs: []
+          };
+        }
+        captionNals[trackId].seiNals = captionNals[trackId].seiNals.concat(result.seiNals);
+        captionNals[trackId].logs = captionNals[trackId].logs.concat(result.logs);
+      }
+    });
+    return captionNals;
+  };
+  /**
+    * Parses out inband captions from an MP4 container and returns
+    * caption objects that can be used by WebVTT and the TextTrack API.
+    * @see https://developer.mozilla.org/en-US/docs/Web/API/VTTCue
+    * @see https://developer.mozilla.org/en-US/docs/Web/API/TextTrack
+    * Assumes that `probe.getVideoTrackIds` and `probe.timescale` have been called first
+    *
+    * @param {Uint8Array} segment - The fmp4 segment containing embedded captions
+    * @param {Number} trackId - The id of the video track to parse
+    * @param {Number} timescale - The timescale for the video track from the init segment
+    *
+    * @return {?Object[]} parsedCaptions - A list of captions or null if no video tracks
+    * @return {Number} parsedCaptions[].startTime - The time to show the caption in seconds
+    * @return {Number} parsedCaptions[].endTime - The time to stop showing the caption in seconds
+    * @return {Object[]} parsedCaptions[].content - A list of individual caption segments
+    * @return {String} parsedCaptions[].content.text - The visible content of the caption segment
+    * @return {Number} parsedCaptions[].content.line - The line height from 1-15 for positioning of the caption segment
+    * @return {Number} parsedCaptions[].content.position - The column indent percentage for cue positioning from 10-80
+   **/
+
+  var parseEmbeddedCaptions = function (segment, trackId, timescale) {
+    var captionNals; // the ISO-BMFF spec says that trackId can't be zero, but there's some broken content out there
+
+    if (trackId === null) {
+      return null;
+    }
+    captionNals = parseCaptionNals(segment, trackId);
+    var trackNals = captionNals[trackId] || {};
+    return {
+      seiNals: trackNals.seiNals,
+      logs: trackNals.logs,
+      timescale: timescale
+    };
+  };
+  /**
+    * Converts SEI NALUs into captions that can be used by video.js
+   **/
+
+  var CaptionParser = function () {
+    var isInitialized = false;
+    var captionStream; // Stores segments seen before trackId and timescale are set
+
+    var segmentCache; // Stores video track ID of the track being parsed
+
+    var trackId; // Stores the timescale of the track being parsed
+
+    var timescale; // Stores captions parsed so far
+
+    var parsedCaptions; // Stores whether we are receiving partial data or not
+
+    var parsingPartial;
+    /**
+      * A method to indicate whether a CaptionParser has been initalized
+      * @returns {Boolean}
+     **/
+
+    this.isInitialized = function () {
+      return isInitialized;
+    };
+    /**
+      * Initializes the underlying CaptionStream, SEI NAL parsing
+      * and management, and caption collection
+     **/
+
+    this.init = function (options) {
+      captionStream = new CaptionStream();
+      isInitialized = true;
+      parsingPartial = options ? options.isPartial : false; // Collect dispatched captions
+
+      captionStream.on('data', function (event) {
+        // Convert to seconds in the source's timescale
+        event.startTime = event.startPts / timescale;
+        event.endTime = event.endPts / timescale;
+        parsedCaptions.captions.push(event);
+        parsedCaptions.captionStreams[event.stream] = true;
+      });
+      captionStream.on('log', function (log) {
+        parsedCaptions.logs.push(log);
+      });
+    };
+    /**
+      * Determines if a new video track will be selected
+      * or if the timescale changed
+      * @return {Boolean}
+     **/
+
+    this.isNewInit = function (videoTrackIds, timescales) {
+      if (videoTrackIds && videoTrackIds.length === 0 || timescales && typeof timescales === 'object' && Object.keys(timescales).length === 0) {
+        return false;
+      }
+      return trackId !== videoTrackIds[0] || timescale !== timescales[trackId];
+    };
+    /**
+      * Parses out SEI captions and interacts with underlying
+      * CaptionStream to return dispatched captions
+      *
+      * @param {Uint8Array} segment - The fmp4 segment containing embedded captions
+      * @param {Number[]} videoTrackIds - A list of video tracks found in the init segment
+      * @param {Object.<Number, Number>} timescales - The timescales found in the init segment
+      * @see parseEmbeddedCaptions
+      * @see m2ts/caption-stream.js
+     **/
+
+    this.parse = function (segment, videoTrackIds, timescales) {
+      var parsedData;
+      if (!this.isInitialized()) {
+        return null; // This is not likely to be a video segment
+      } else if (!videoTrackIds || !timescales) {
+        return null;
+      } else if (this.isNewInit(videoTrackIds, timescales)) {
+        // Use the first video track only as there is no
+        // mechanism to switch to other video tracks
+        trackId = videoTrackIds[0];
+        timescale = timescales[trackId]; // If an init segment has not been seen yet, hold onto segment
+        // data until we have one.
+        // the ISO-BMFF spec says that trackId can't be zero, but there's some broken content out there
+      } else if (trackId === null || !timescale) {
+        segmentCache.push(segment);
+        return null;
+      } // Now that a timescale and trackId is set, parse cached segments
+
+      while (segmentCache.length > 0) {
+        var cachedSegment = segmentCache.shift();
+        this.parse(cachedSegment, videoTrackIds, timescales);
+      }
+      parsedData = parseEmbeddedCaptions(segment, trackId, timescale);
+      if (parsedData && parsedData.logs) {
+        parsedCaptions.logs = parsedCaptions.logs.concat(parsedData.logs);
+      }
+      if (parsedData === null || !parsedData.seiNals) {
+        if (parsedCaptions.logs.length) {
+          return {
+            logs: parsedCaptions.logs,
+            captions: [],
+            captionStreams: []
+          };
+        }
+        return null;
+      }
+      this.pushNals(parsedData.seiNals); // Force the parsed captions to be dispatched
+
+      this.flushStream();
+      return parsedCaptions;
+    };
+    /**
+      * Pushes SEI NALUs onto CaptionStream
+      * @param {Object[]} nals - A list of SEI nals parsed using `parseCaptionNals`
+      * Assumes that `parseCaptionNals` has been called first
+      * @see m2ts/caption-stream.js
+      **/
+
+    this.pushNals = function (nals) {
+      if (!this.isInitialized() || !nals || nals.length === 0) {
+        return null;
+      }
+      nals.forEach(function (nal) {
+        captionStream.push(nal);
+      });
+    };
+    /**
+      * Flushes underlying CaptionStream to dispatch processed, displayable captions
+      * @see m2ts/caption-stream.js
+     **/
+
+    this.flushStream = function () {
+      if (!this.isInitialized()) {
+        return null;
+      }
+      if (!parsingPartial) {
+        captionStream.flush();
+      } else {
+        captionStream.partialFlush();
+      }
+    };
+    /**
+      * Reset caption buckets for new data
+     **/
+
+    this.clearParsedCaptions = function () {
+      parsedCaptions.captions = [];
+      parsedCaptions.captionStreams = {};
+      parsedCaptions.logs = [];
+    };
+    /**
+      * Resets underlying CaptionStream
+      * @see m2ts/caption-stream.js
+     **/
+
+    this.resetCaptionStream = function () {
+      if (!this.isInitialized()) {
+        return null;
+      }
+      captionStream.reset();
+    };
+    /**
+      * Convenience method to clear all captions flushed from the
+      * CaptionStream and still being parsed
+      * @see m2ts/caption-stream.js
+     **/
+
+    this.clearAllCaptions = function () {
+      this.clearParsedCaptions();
+      this.resetCaptionStream();
+    };
+    /**
+      * Reset caption parser
+     **/
+
+    this.reset = function () {
+      segmentCache = [];
+      trackId = null;
+      timescale = null;
+      if (!parsedCaptions) {
+        parsedCaptions = {
+          captions: [],
+          // CC1, CC2, CC3, CC4
+          captionStreams: {},
+          logs: []
+        };
+      } else {
+        this.clearParsedCaptions();
+      }
+      this.resetCaptionStream();
+    };
+    this.reset();
+  };
+  var captionParser = CaptionParser;
+  /**
+   * Returns the first string in the data array ending with a null char '\0'
+   * @param {UInt8} data 
+   * @returns the string with the null char
+   */
+
+  var uint8ToCString$1 = function (data) {
+    var index = 0;
+    var curChar = String.fromCharCode(data[index]);
+    var retString = '';
+    while (curChar !== '\0') {
+      retString += curChar;
+      index++;
+      curChar = String.fromCharCode(data[index]);
+    } // Add nullChar
+
+    retString += curChar;
+    return retString;
+  };
+  var string = {
+    uint8ToCString: uint8ToCString$1
+  };
+  var uint8ToCString = string.uint8ToCString;
+  var getUint64$1 = numbers.getUint64;
+  /**
+   * Based on: ISO/IEC 23009 Section: 5.10.3.3
+   * References:
+   * https://dashif-documents.azurewebsites.net/Events/master/event.html#emsg-format
+   * https://aomediacodec.github.io/id3-emsg/
+   * 
+   * Takes emsg box data as a uint8 array and returns a emsg box object
+   * @param {UInt8Array} boxData data from emsg box
+   * @returns A parsed emsg box object
+   */
+
+  var parseEmsgBox = function (boxData) {
+    // version + flags
+    var offset = 4;
+    var version = boxData[0];
+    var scheme_id_uri, value, timescale, presentation_time, presentation_time_delta, event_duration, id, message_data;
+    if (version === 0) {
+      scheme_id_uri = uint8ToCString(boxData.subarray(offset));
+      offset += scheme_id_uri.length;
+      value = uint8ToCString(boxData.subarray(offset));
+      offset += value.length;
+      var dv = new DataView(boxData.buffer);
+      timescale = dv.getUint32(offset);
+      offset += 4;
+      presentation_time_delta = dv.getUint32(offset);
+      offset += 4;
+      event_duration = dv.getUint32(offset);
+      offset += 4;
+      id = dv.getUint32(offset);
+      offset += 4;
+    } else if (version === 1) {
+      var dv = new DataView(boxData.buffer);
+      timescale = dv.getUint32(offset);
+      offset += 4;
+      presentation_time = getUint64$1(boxData.subarray(offset));
+      offset += 8;
+      event_duration = dv.getUint32(offset);
+      offset += 4;
+      id = dv.getUint32(offset);
+      offset += 4;
+      scheme_id_uri = uint8ToCString(boxData.subarray(offset));
+      offset += scheme_id_uri.length;
+      value = uint8ToCString(boxData.subarray(offset));
+      offset += value.length;
+    }
+    message_data = new Uint8Array(boxData.subarray(offset, boxData.byteLength));
+    var emsgBox = {
+      scheme_id_uri,
+      value,
+      // if timescale is undefined or 0 set to 1 
+      timescale: timescale ? timescale : 1,
+      presentation_time,
+      presentation_time_delta,
+      event_duration,
+      id,
+      message_data
+    };
+    return isValidEmsgBox(version, emsgBox) ? emsgBox : undefined;
+  };
+  /**
+   * Scales a presentation time or time delta with an offset with a provided timescale
+   * @param {number} presentationTime 
+   * @param {number} timescale 
+   * @param {number} timeDelta 
+   * @param {number} offset 
+   * @returns the scaled time as a number
+   */
+
+  var scaleTime = function (presentationTime, timescale, timeDelta, offset) {
+    return presentationTime || presentationTime === 0 ? presentationTime / timescale : offset + timeDelta / timescale;
+  };
+  /**
+   * Checks the emsg box data for validity based on the version
+   * @param {number} version of the emsg box to validate
+   * @param {Object} emsg the emsg data to validate
+   * @returns if the box is valid as a boolean
+   */
+
+  var isValidEmsgBox = function (version, emsg) {
+    var hasScheme = emsg.scheme_id_uri !== '\0';
+    var isValidV0Box = version === 0 && isDefined(emsg.presentation_time_delta) && hasScheme;
+    var isValidV1Box = version === 1 && isDefined(emsg.presentation_time) && hasScheme; // Only valid versions of emsg are 0 and 1
+
+    return !(version > 1) && isValidV0Box || isValidV1Box;
+  }; // Utility function to check if an object is defined
+
+  var isDefined = function (data) {
+    return data !== undefined || data !== null;
+  };
+  var emsg$1 = {
+    parseEmsgBox: parseEmsgBox,
+    scaleTime: scaleTime
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Utilities to detect basic properties and metadata about MP4s.
+   */
+
+  var toUnsigned = bin.toUnsigned;
+  var toHexString = bin.toHexString;
+  var findBox = findBox_1;
+  var parseType$1 = parseType_1;
+  var emsg = emsg$1;
+  var parseTfhd = parseTfhd$2;
+  var parseTrun = parseTrun$2;
+  var parseTfdt = parseTfdt$2;
+  var getUint64 = numbers.getUint64;
+  var timescale, startTime, compositionStartTime, getVideoTrackIds, getTracks, getTimescaleFromMediaHeader, getEmsgID3;
+  var window$1 = window_1;
+  var parseId3Frames = parseId3.parseId3Frames;
+  /**
+   * Parses an MP4 initialization segment and extracts the timescale
+   * values for any declared tracks. Timescale values indicate the
+   * number of clock ticks per second to assume for time-based values
+   * elsewhere in the MP4.
+   *
+   * To determine the start time of an MP4, you need two pieces of
+   * information: the timescale unit and the earliest base media decode
+   * time. Multiple timescales can be specified within an MP4 but the
+   * base media decode time is always expressed in the timescale from
+   * the media header box for the track:
+   * ```
+   * moov > trak > mdia > mdhd.timescale
+   * ```
+   * @param init {Uint8Array} the bytes of the init segment
+   * @return {object} a hash of track ids to timescale values or null if
+   * the init segment is malformed.
+   */
+
+  timescale = function (init) {
+    var result = {},
+      traks = findBox(init, ['moov', 'trak']); // mdhd timescale
+
+    return traks.reduce(function (result, trak) {
+      var tkhd, version, index, id, mdhd;
+      tkhd = findBox(trak, ['tkhd'])[0];
+      if (!tkhd) {
+        return null;
+      }
+      version = tkhd[0];
+      index = version === 0 ? 12 : 20;
+      id = toUnsigned(tkhd[index] << 24 | tkhd[index + 1] << 16 | tkhd[index + 2] << 8 | tkhd[index + 3]);
+      mdhd = findBox(trak, ['mdia', 'mdhd'])[0];
+      if (!mdhd) {
+        return null;
+      }
+      version = mdhd[0];
+      index = version === 0 ? 12 : 20;
+      result[id] = toUnsigned(mdhd[index] << 24 | mdhd[index + 1] << 16 | mdhd[index + 2] << 8 | mdhd[index + 3]);
+      return result;
+    }, result);
+  };
+  /**
+   * Determine the base media decode start time, in seconds, for an MP4
+   * fragment. If multiple fragments are specified, the earliest time is
+   * returned.
+   *
+   * The base media decode time can be parsed from track fragment
+   * metadata:
+   * ```
+   * moof > traf > tfdt.baseMediaDecodeTime
+   * ```
+   * It requires the timescale value from the mdhd to interpret.
+   *
+   * @param timescale {object} a hash of track ids to timescale values.
+   * @return {number} the earliest base media decode start time for the
+   * fragment, in seconds
+   */
+
+  startTime = function (timescale, fragment) {
+    var trafs; // we need info from two childrend of each track fragment box
+
+    trafs = findBox(fragment, ['moof', 'traf']); // determine the start times for each track
+
+    var lowestTime = trafs.reduce(function (acc, traf) {
+      var tfhd = findBox(traf, ['tfhd'])[0]; // get the track id from the tfhd
+
+      var id = toUnsigned(tfhd[4] << 24 | tfhd[5] << 16 | tfhd[6] << 8 | tfhd[7]); // assume a 90kHz clock if no timescale was specified
+
+      var scale = timescale[id] || 90e3; // get the base media decode time from the tfdt
+
+      var tfdt = findBox(traf, ['tfdt'])[0];
+      var dv = new DataView(tfdt.buffer, tfdt.byteOffset, tfdt.byteLength);
+      var baseTime; // version 1 is 64 bit
+
+      if (tfdt[0] === 1) {
+        baseTime = getUint64(tfdt.subarray(4, 12));
+      } else {
+        baseTime = dv.getUint32(4);
+      } // convert base time to seconds if it is a valid number.
+
+      let seconds;
+      if (typeof baseTime === 'bigint') {
+        seconds = baseTime / window$1.BigInt(scale);
+      } else if (typeof baseTime === 'number' && !isNaN(baseTime)) {
+        seconds = baseTime / scale;
+      }
+      if (seconds < Number.MAX_SAFE_INTEGER) {
+        seconds = Number(seconds);
+      }
+      if (seconds < acc) {
+        acc = seconds;
+      }
+      return acc;
+    }, Infinity);
+    return typeof lowestTime === 'bigint' || isFinite(lowestTime) ? lowestTime : 0;
+  };
+  /**
+   * Determine the composition start, in seconds, for an MP4
+   * fragment.
+   *
+   * The composition start time of a fragment can be calculated using the base
+   * media decode time, composition time offset, and timescale, as follows:
+   *
+   * compositionStartTime = (baseMediaDecodeTime + compositionTimeOffset) / timescale
+   *
+   * All of the aforementioned information is contained within a media fragment's
+   * `traf` box, except for timescale info, which comes from the initialization
+   * segment, so a track id (also contained within a `traf`) is also necessary to
+   * associate it with a timescale
+   *
+   *
+   * @param timescales {object} - a hash of track ids to timescale values.
+   * @param fragment {Unit8Array} - the bytes of a media segment
+   * @return {number} the composition start time for the fragment, in seconds
+   **/
+
+  compositionStartTime = function (timescales, fragment) {
+    var trafBoxes = findBox(fragment, ['moof', 'traf']);
+    var baseMediaDecodeTime = 0;
+    var compositionTimeOffset = 0;
+    var trackId;
+    if (trafBoxes && trafBoxes.length) {
+      // The spec states that track run samples contained within a `traf` box are contiguous, but
+      // it does not explicitly state whether the `traf` boxes themselves are contiguous.
+      // We will assume that they are, so we only need the first to calculate start time.
+      var tfhd = findBox(trafBoxes[0], ['tfhd'])[0];
+      var trun = findBox(trafBoxes[0], ['trun'])[0];
+      var tfdt = findBox(trafBoxes[0], ['tfdt'])[0];
+      if (tfhd) {
+        var parsedTfhd = parseTfhd(tfhd);
+        trackId = parsedTfhd.trackId;
+      }
+      if (tfdt) {
+        var parsedTfdt = parseTfdt(tfdt);
+        baseMediaDecodeTime = parsedTfdt.baseMediaDecodeTime;
+      }
+      if (trun) {
+        var parsedTrun = parseTrun(trun);
+        if (parsedTrun.samples && parsedTrun.samples.length) {
+          compositionTimeOffset = parsedTrun.samples[0].compositionTimeOffset || 0;
+        }
+      }
+    } // Get timescale for this specific track. Assume a 90kHz clock if no timescale was
+    // specified.
+
+    var timescale = timescales[trackId] || 90e3; // return the composition start time, in seconds
+
+    if (typeof baseMediaDecodeTime === 'bigint') {
+      compositionTimeOffset = window$1.BigInt(compositionTimeOffset);
+      timescale = window$1.BigInt(timescale);
+    }
+    var result = (baseMediaDecodeTime + compositionTimeOffset) / timescale;
+    if (typeof result === 'bigint' && result < Number.MAX_SAFE_INTEGER) {
+      result = Number(result);
+    }
+    return result;
+  };
+  /**
+    * Find the trackIds of the video tracks in this source.
+    * Found by parsing the Handler Reference and Track Header Boxes:
+    *   moov > trak > mdia > hdlr
+    *   moov > trak > tkhd
+    *
+    * @param {Uint8Array} init - The bytes of the init segment for this source
+    * @return {Number[]} A list of trackIds
+    *
+    * @see ISO-BMFF-12/2015, Section 8.4.3
+   **/
+
+  getVideoTrackIds = function (init) {
+    var traks = findBox(init, ['moov', 'trak']);
+    var videoTrackIds = [];
+    traks.forEach(function (trak) {
+      var hdlrs = findBox(trak, ['mdia', 'hdlr']);
+      var tkhds = findBox(trak, ['tkhd']);
+      hdlrs.forEach(function (hdlr, index) {
+        var handlerType = parseType$1(hdlr.subarray(8, 12));
+        var tkhd = tkhds[index];
+        var view;
+        var version;
+        var trackId;
+        if (handlerType === 'vide') {
+          view = new DataView(tkhd.buffer, tkhd.byteOffset, tkhd.byteLength);
+          version = view.getUint8(0);
+          trackId = version === 0 ? view.getUint32(12) : view.getUint32(20);
+          videoTrackIds.push(trackId);
+        }
+      });
+    });
+    return videoTrackIds;
+  };
+  getTimescaleFromMediaHeader = function (mdhd) {
+    // mdhd is a FullBox, meaning it will have its own version as the first byte
+    var version = mdhd[0];
+    var index = version === 0 ? 12 : 20;
+    return toUnsigned(mdhd[index] << 24 | mdhd[index + 1] << 16 | mdhd[index + 2] << 8 | mdhd[index + 3]);
+  };
+  /**
+   * Get all the video, audio, and hint tracks from a non fragmented
+   * mp4 segment
+   */
+
+  getTracks = function (init) {
+    var traks = findBox(init, ['moov', 'trak']);
+    var tracks = [];
+    traks.forEach(function (trak) {
+      var track = {};
+      var tkhd = findBox(trak, ['tkhd'])[0];
+      var view, tkhdVersion; // id
+
+      if (tkhd) {
+        view = new DataView(tkhd.buffer, tkhd.byteOffset, tkhd.byteLength);
+        tkhdVersion = view.getUint8(0);
+        track.id = tkhdVersion === 0 ? view.getUint32(12) : view.getUint32(20);
+      }
+      var hdlr = findBox(trak, ['mdia', 'hdlr'])[0]; // type
+
+      if (hdlr) {
+        var type = parseType$1(hdlr.subarray(8, 12));
+        if (type === 'vide') {
+          track.type = 'video';
+        } else if (type === 'soun') {
+          track.type = 'audio';
+        } else {
+          track.type = type;
+        }
+      } // codec
+
+      var stsd = findBox(trak, ['mdia', 'minf', 'stbl', 'stsd'])[0];
+      if (stsd) {
+        var sampleDescriptions = stsd.subarray(8); // gives the codec type string
+
+        track.codec = parseType$1(sampleDescriptions.subarray(4, 8));
+        var codecBox = findBox(sampleDescriptions, [track.codec])[0];
+        var codecConfig, codecConfigType;
+        if (codecBox) {
+          // https://tools.ietf.org/html/rfc6381#section-3.3
+          if (/^[asm]vc[1-9]$/i.test(track.codec)) {
+            // we don't need anything but the "config" parameter of the
+            // avc1 codecBox
+            codecConfig = codecBox.subarray(78);
+            codecConfigType = parseType$1(codecConfig.subarray(4, 8));
+            if (codecConfigType === 'avcC' && codecConfig.length > 11) {
+              track.codec += '.'; // left padded with zeroes for single digit hex
+              // profile idc
+
+              track.codec += toHexString(codecConfig[9]); // the byte containing the constraint_set flags
+
+              track.codec += toHexString(codecConfig[10]); // level idc
+
+              track.codec += toHexString(codecConfig[11]);
+            } else {
+              // TODO: show a warning that we couldn't parse the codec
+              // and are using the default
+              track.codec = 'avc1.4d400d';
+            }
+          } else if (/^mp4[a,v]$/i.test(track.codec)) {
+            // we do not need anything but the streamDescriptor of the mp4a codecBox
+            codecConfig = codecBox.subarray(28);
+            codecConfigType = parseType$1(codecConfig.subarray(4, 8));
+            if (codecConfigType === 'esds' && codecConfig.length > 20 && codecConfig[19] !== 0) {
+              track.codec += '.' + toHexString(codecConfig[19]); // this value is only a single digit
+
+              track.codec += '.' + toHexString(codecConfig[20] >>> 2 & 0x3f).replace(/^0/, '');
+            } else {
+              // TODO: show a warning that we couldn't parse the codec
+              // and are using the default
+              track.codec = 'mp4a.40.2';
+            }
+          } else {
+            // flac, opus, etc
+            track.codec = track.codec.toLowerCase();
+          }
+        }
+      }
+      var mdhd = findBox(trak, ['mdia', 'mdhd'])[0];
+      if (mdhd) {
+        track.timescale = getTimescaleFromMediaHeader(mdhd);
+      }
+      tracks.push(track);
+    });
+    return tracks;
+  };
+  /**
+   * Returns an array of emsg ID3 data from the provided segmentData.
+   * An offset can also be provided as the Latest Arrival Time to calculate 
+   * the Event Start Time of v0 EMSG boxes. 
+   * See: https://dashif-documents.azurewebsites.net/Events/master/event.html#Inband-event-timing
+   * 
+   * @param {Uint8Array} segmentData the segment byte array.
+   * @param {number} offset the segment start time or Latest Arrival Time, 
+   * @return {Object[]} an array of ID3 parsed from EMSG boxes
+   */
+
+  getEmsgID3 = function (segmentData, offset = 0) {
+    var emsgBoxes = findBox(segmentData, ['emsg']);
+    return emsgBoxes.map(data => {
+      var parsedBox = emsg.parseEmsgBox(new Uint8Array(data));
+      var parsedId3Frames = parseId3Frames(parsedBox.message_data);
+      return {
+        cueTime: emsg.scaleTime(parsedBox.presentation_time, parsedBox.timescale, parsedBox.presentation_time_delta, offset),
+        duration: emsg.scaleTime(parsedBox.event_duration, parsedBox.timescale),
+        frames: parsedId3Frames
+      };
+    });
+  };
+  var probe$2 = {
+    // export mp4 inspector's findBox and parseType for backwards compatibility
+    findBox: findBox,
+    parseType: parseType$1,
+    timescale: timescale,
+    startTime: startTime,
+    compositionStartTime: compositionStartTime,
+    videoTrackIds: getVideoTrackIds,
+    tracks: getTracks,
+    getTimescaleFromMediaHeader: getTimescaleFromMediaHeader,
+    getEmsgID3: getEmsgID3
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Utilities to detect basic properties and metadata about TS Segments.
+   */
+
+  var StreamTypes$1 = streamTypes;
+  var parsePid = function (packet) {
+    var pid = packet[1] & 0x1f;
+    pid <<= 8;
+    pid |= packet[2];
+    return pid;
+  };
+  var parsePayloadUnitStartIndicator = function (packet) {
+    return !!(packet[1] & 0x40);
+  };
+  var parseAdaptionField = function (packet) {
+    var offset = 0; // if an adaption field is present, its length is specified by the
+    // fifth byte of the TS packet header. The adaptation field is
+    // used to add stuffing to PES packets that don't fill a complete
+    // TS packet, and to specify some forms of timing and control data
+    // that we do not currently use.
+
+    if ((packet[3] & 0x30) >>> 4 > 0x01) {
+      offset += packet[4] + 1;
+    }
+    return offset;
+  };
+  var parseType = function (packet, pmtPid) {
+    var pid = parsePid(packet);
+    if (pid === 0) {
+      return 'pat';
+    } else if (pid === pmtPid) {
+      return 'pmt';
+    } else if (pmtPid) {
+      return 'pes';
+    }
+    return null;
+  };
+  var parsePat = function (packet) {
+    var pusi = parsePayloadUnitStartIndicator(packet);
+    var offset = 4 + parseAdaptionField(packet);
+    if (pusi) {
+      offset += packet[offset] + 1;
+    }
+    return (packet[offset + 10] & 0x1f) << 8 | packet[offset + 11];
+  };
+  var parsePmt = function (packet) {
+    var programMapTable = {};
+    var pusi = parsePayloadUnitStartIndicator(packet);
+    var payloadOffset = 4 + parseAdaptionField(packet);
+    if (pusi) {
+      payloadOffset += packet[payloadOffset] + 1;
+    } // PMTs can be sent ahead of the time when they should actually
+    // take effect. We don't believe this should ever be the case
+    // for HLS but we'll ignore "forward" PMT declarations if we see
+    // them. Future PMT declarations have the current_next_indicator
+    // set to zero.
+
+    if (!(packet[payloadOffset + 5] & 0x01)) {
+      return;
+    }
+    var sectionLength, tableEnd, programInfoLength; // the mapping table ends at the end of the current section
+
+    sectionLength = (packet[payloadOffset + 1] & 0x0f) << 8 | packet[payloadOffset + 2];
+    tableEnd = 3 + sectionLength - 4; // to determine where the table is, we have to figure out how
+    // long the program info descriptors are
+
+    programInfoLength = (packet[payloadOffset + 10] & 0x0f) << 8 | packet[payloadOffset + 11]; // advance the offset to the first entry in the mapping table
+
+    var offset = 12 + programInfoLength;
+    while (offset < tableEnd) {
+      var i = payloadOffset + offset; // add an entry that maps the elementary_pid to the stream_type
+
+      programMapTable[(packet[i + 1] & 0x1F) << 8 | packet[i + 2]] = packet[i]; // move to the next table entry
+      // skip past the elementary stream descriptors, if present
+
+      offset += ((packet[i + 3] & 0x0F) << 8 | packet[i + 4]) + 5;
+    }
+    return programMapTable;
+  };
+  var parsePesType = function (packet, programMapTable) {
+    var pid = parsePid(packet);
+    var type = programMapTable[pid];
+    switch (type) {
+      case StreamTypes$1.H264_STREAM_TYPE:
+        return 'video';
+      case StreamTypes$1.ADTS_STREAM_TYPE:
+        return 'audio';
+      case StreamTypes$1.METADATA_STREAM_TYPE:
+        return 'timed-metadata';
+      default:
+        return null;
+    }
+  };
+  var parsePesTime = function (packet) {
+    var pusi = parsePayloadUnitStartIndicator(packet);
+    if (!pusi) {
+      return null;
+    }
+    var offset = 4 + parseAdaptionField(packet);
+    if (offset >= packet.byteLength) {
+      // From the H 222.0 MPEG-TS spec
+      // "For transport stream packets carrying PES packets, stuffing is needed when there
+      //  is insufficient PES packet data to completely fill the transport stream packet
+      //  payload bytes. Stuffing is accomplished by defining an adaptation field longer than
+      //  the sum of the lengths of the data elements in it, so that the payload bytes
+      //  remaining after the adaptation field exactly accommodates the available PES packet
+      //  data."
+      //
+      // If the offset is >= the length of the packet, then the packet contains no data
+      // and instead is just adaption field stuffing bytes
+      return null;
+    }
+    var pes = null;
+    var ptsDtsFlags; // PES packets may be annotated with a PTS value, or a PTS value
+    // and a DTS value. Determine what combination of values is
+    // available to work with.
+
+    ptsDtsFlags = packet[offset + 7]; // PTS and DTS are normally stored as a 33-bit number.  Javascript
+    // performs all bitwise operations on 32-bit integers but javascript
+    // supports a much greater range (52-bits) of integer using standard
+    // mathematical operations.
+    // We construct a 31-bit value using bitwise operators over the 31
+    // most significant bits and then multiply by 4 (equal to a left-shift
+    // of 2) before we add the final 2 least significant bits of the
+    // timestamp (equal to an OR.)
+
+    if (ptsDtsFlags & 0xC0) {
+      pes = {}; // the PTS and DTS are not written out directly. For information
+      // on how they are encoded, see
+      // http://dvd.sourceforge.net/dvdinfo/pes-hdr.html
+
+      pes.pts = (packet[offset + 9] & 0x0E) << 27 | (packet[offset + 10] & 0xFF) << 20 | (packet[offset + 11] & 0xFE) << 12 | (packet[offset + 12] & 0xFF) << 5 | (packet[offset + 13] & 0xFE) >>> 3;
+      pes.pts *= 4; // Left shift by 2
+
+      pes.pts += (packet[offset + 13] & 0x06) >>> 1; // OR by the two LSBs
+
+      pes.dts = pes.pts;
+      if (ptsDtsFlags & 0x40) {
+        pes.dts = (packet[offset + 14] & 0x0E) << 27 | (packet[offset + 15] & 0xFF) << 20 | (packet[offset + 16] & 0xFE) << 12 | (packet[offset + 17] & 0xFF) << 5 | (packet[offset + 18] & 0xFE) >>> 3;
+        pes.dts *= 4; // Left shift by 2
+
+        pes.dts += (packet[offset + 18] & 0x06) >>> 1; // OR by the two LSBs
+      }
+    }
+
+    return pes;
+  };
+  var parseNalUnitType = function (type) {
+    switch (type) {
+      case 0x05:
+        return 'slice_layer_without_partitioning_rbsp_idr';
+      case 0x06:
+        return 'sei_rbsp';
+      case 0x07:
+        return 'seq_parameter_set_rbsp';
+      case 0x08:
+        return 'pic_parameter_set_rbsp';
+      case 0x09:
+        return 'access_unit_delimiter_rbsp';
+      default:
+        return null;
+    }
+  };
+  var videoPacketContainsKeyFrame = function (packet) {
+    var offset = 4 + parseAdaptionField(packet);
+    var frameBuffer = packet.subarray(offset);
+    var frameI = 0;
+    var frameSyncPoint = 0;
+    var foundKeyFrame = false;
+    var nalType; // advance the sync point to a NAL start, if necessary
+
+    for (; frameSyncPoint < frameBuffer.byteLength - 3; frameSyncPoint++) {
+      if (frameBuffer[frameSyncPoint + 2] === 1) {
+        // the sync point is properly aligned
+        frameI = frameSyncPoint + 5;
+        break;
+      }
+    }
+    while (frameI < frameBuffer.byteLength) {
+      // look at the current byte to determine if we've hit the end of
+      // a NAL unit boundary
+      switch (frameBuffer[frameI]) {
+        case 0:
+          // skip past non-sync sequences
+          if (frameBuffer[frameI - 1] !== 0) {
+            frameI += 2;
+            break;
+          } else if (frameBuffer[frameI - 2] !== 0) {
+            frameI++;
+            break;
+          }
+          if (frameSyncPoint + 3 !== frameI - 2) {
+            nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+            if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+              foundKeyFrame = true;
+            }
+          } // drop trailing zeroes
+
+          do {
+            frameI++;
+          } while (frameBuffer[frameI] !== 1 && frameI < frameBuffer.length);
+          frameSyncPoint = frameI - 2;
+          frameI += 3;
+          break;
+        case 1:
+          // skip past non-sync sequences
+          if (frameBuffer[frameI - 1] !== 0 || frameBuffer[frameI - 2] !== 0) {
+            frameI += 3;
+            break;
+          }
+          nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+          if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+            foundKeyFrame = true;
+          }
+          frameSyncPoint = frameI - 2;
+          frameI += 3;
+          break;
+        default:
+          // the current byte isn't a one or zero, so it cannot be part
+          // of a sync sequence
+          frameI += 3;
+          break;
+      }
+    }
+    frameBuffer = frameBuffer.subarray(frameSyncPoint);
+    frameI -= frameSyncPoint;
+    frameSyncPoint = 0; // parse the final nal
+
+    if (frameBuffer && frameBuffer.byteLength > 3) {
+      nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+      if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+        foundKeyFrame = true;
+      }
+    }
+    return foundKeyFrame;
+  };
+  var probe$1 = {
+    parseType: parseType,
+    parsePat: parsePat,
+    parsePmt: parsePmt,
+    parsePayloadUnitStartIndicator: parsePayloadUnitStartIndicator,
+    parsePesType: parsePesType,
+    parsePesTime: parsePesTime,
+    videoPacketContainsKeyFrame: videoPacketContainsKeyFrame
+  };
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   *
+   * Parse mpeg2 transport stream packets to extract basic timing information
+   */
+
+  var StreamTypes = streamTypes;
+  var handleRollover = timestampRolloverStream.handleRollover;
+  var probe = {};
+  probe.ts = probe$1;
+  probe.aac = utils;
+  var ONE_SECOND_IN_TS = clock$2.ONE_SECOND_IN_TS;
+  var MP2T_PACKET_LENGTH = 188,
+    // bytes
+    SYNC_BYTE = 0x47;
+  /**
+   * walks through segment data looking for pat and pmt packets to parse out
+   * program map table information
+   */
+
+  var parsePsi_ = function (bytes, pmt) {
+    var startIndex = 0,
+      endIndex = MP2T_PACKET_LENGTH,
+      packet,
+      type;
+    while (endIndex < bytes.byteLength) {
+      // Look for a pair of start and end sync bytes in the data..
+      if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+        // We found a packet
+        packet = bytes.subarray(startIndex, endIndex);
+        type = probe.ts.parseType(packet, pmt.pid);
+        switch (type) {
+          case 'pat':
+            pmt.pid = probe.ts.parsePat(packet);
+            break;
+          case 'pmt':
+            var table = probe.ts.parsePmt(packet);
+            pmt.table = pmt.table || {};
+            Object.keys(table).forEach(function (key) {
+              pmt.table[key] = table[key];
+            });
+            break;
+        }
+        startIndex += MP2T_PACKET_LENGTH;
+        endIndex += MP2T_PACKET_LENGTH;
+        continue;
+      } // If we get here, we have somehow become de-synchronized and we need to step
+      // forward one byte at a time until we find a pair of sync bytes that denote
+      // a packet
+
+      startIndex++;
+      endIndex++;
+    }
+  };
+  /**
+   * walks through the segment data from the start and end to get timing information
+   * for the first and last audio pes packets
+   */
+
+  var parseAudioPes_ = function (bytes, pmt, result) {
+    var startIndex = 0,
+      endIndex = MP2T_PACKET_LENGTH,
+      packet,
+      type,
+      pesType,
+      pusi,
+      parsed;
+    var endLoop = false; // Start walking from start of segment to get first audio packet
+
+    while (endIndex <= bytes.byteLength) {
+      // Look for a pair of start and end sync bytes in the data..
+      if (bytes[startIndex] === SYNC_BYTE && (bytes[endIndex] === SYNC_BYTE || endIndex === bytes.byteLength)) {
+        // We found a packet
+        packet = bytes.subarray(startIndex, endIndex);
+        type = probe.ts.parseType(packet, pmt.pid);
+        switch (type) {
+          case 'pes':
+            pesType = probe.ts.parsePesType(packet, pmt.table);
+            pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+            if (pesType === 'audio' && pusi) {
+              parsed = probe.ts.parsePesTime(packet);
+              if (parsed) {
+                parsed.type = 'audio';
+                result.audio.push(parsed);
+                endLoop = true;
+              }
+            }
+            break;
+        }
+        if (endLoop) {
+          break;
+        }
+        startIndex += MP2T_PACKET_LENGTH;
+        endIndex += MP2T_PACKET_LENGTH;
+        continue;
+      } // If we get here, we have somehow become de-synchronized and we need to step
+      // forward one byte at a time until we find a pair of sync bytes that denote
+      // a packet
+
+      startIndex++;
+      endIndex++;
+    } // Start walking from end of segment to get last audio packet
+
+    endIndex = bytes.byteLength;
+    startIndex = endIndex - MP2T_PACKET_LENGTH;
+    endLoop = false;
+    while (startIndex >= 0) {
+      // Look for a pair of start and end sync bytes in the data..
+      if (bytes[startIndex] === SYNC_BYTE && (bytes[endIndex] === SYNC_BYTE || endIndex === bytes.byteLength)) {
+        // We found a packet
+        packet = bytes.subarray(startIndex, endIndex);
+        type = probe.ts.parseType(packet, pmt.pid);
+        switch (type) {
+          case 'pes':
+            pesType = probe.ts.parsePesType(packet, pmt.table);
+            pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+            if (pesType === 'audio' && pusi) {
+              parsed = probe.ts.parsePesTime(packet);
+              if (parsed) {
+                parsed.type = 'audio';
+                result.audio.push(parsed);
+                endLoop = true;
+              }
+            }
+            break;
+        }
+        if (endLoop) {
+          break;
+        }
+        startIndex -= MP2T_PACKET_LENGTH;
+        endIndex -= MP2T_PACKET_LENGTH;
+        continue;
+      } // If we get here, we have somehow become de-synchronized and we need to step
+      // forward one byte at a time until we find a pair of sync bytes that denote
+      // a packet
+
+      startIndex--;
+      endIndex--;
+    }
+  };
+  /**
+   * walks through the segment data from the start and end to get timing information
+   * for the first and last video pes packets as well as timing information for the first
+   * key frame.
+   */
+
+  var parseVideoPes_ = function (bytes, pmt, result) {
+    var startIndex = 0,
+      endIndex = MP2T_PACKET_LENGTH,
+      packet,
+      type,
+      pesType,
+      pusi,
+      parsed,
+      frame,
+      i,
+      pes;
+    var endLoop = false;
+    var currentFrame = {
+      data: [],
+      size: 0
+    }; // Start walking from start of segment to get first video packet
+
+    while (endIndex < bytes.byteLength) {
+      // Look for a pair of start and end sync bytes in the data..
+      if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+        // We found a packet
+        packet = bytes.subarray(startIndex, endIndex);
+        type = probe.ts.parseType(packet, pmt.pid);
+        switch (type) {
+          case 'pes':
+            pesType = probe.ts.parsePesType(packet, pmt.table);
+            pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+            if (pesType === 'video') {
+              if (pusi && !endLoop) {
+                parsed = probe.ts.parsePesTime(packet);
+                if (parsed) {
+                  parsed.type = 'video';
+                  result.video.push(parsed);
+                  endLoop = true;
+                }
+              }
+              if (!result.firstKeyFrame) {
+                if (pusi) {
+                  if (currentFrame.size !== 0) {
+                    frame = new Uint8Array(currentFrame.size);
+                    i = 0;
+                    while (currentFrame.data.length) {
+                      pes = currentFrame.data.shift();
+                      frame.set(pes, i);
+                      i += pes.byteLength;
+                    }
+                    if (probe.ts.videoPacketContainsKeyFrame(frame)) {
+                      var firstKeyFrame = probe.ts.parsePesTime(frame); // PTS/DTS may not be available. Simply *not* setting
+                      // the keyframe seems to work fine with HLS playback
+                      // and definitely preferable to a crash with TypeError...
+
+                      if (firstKeyFrame) {
+                        result.firstKeyFrame = firstKeyFrame;
+                        result.firstKeyFrame.type = 'video';
+                      } else {
+                        // eslint-disable-next-line
+                        console.warn('Failed to extract PTS/DTS from PES at first keyframe. ' + 'This could be an unusual TS segment, or else mux.js did not ' + 'parse your TS segment correctly. If you know your TS ' + 'segments do contain PTS/DTS on keyframes please file a bug ' + 'report! You can try ffprobe to double check for yourself.');
+                      }
+                    }
+                    currentFrame.size = 0;
+                  }
+                }
+                currentFrame.data.push(packet);
+                currentFrame.size += packet.byteLength;
+              }
+            }
+            break;
+        }
+        if (endLoop && result.firstKeyFrame) {
+          break;
+        }
+        startIndex += MP2T_PACKET_LENGTH;
+        endIndex += MP2T_PACKET_LENGTH;
+        continue;
+      } // If we get here, we have somehow become de-synchronized and we need to step
+      // forward one byte at a time until we find a pair of sync bytes that denote
+      // a packet
+
+      startIndex++;
+      endIndex++;
+    } // Start walking from end of segment to get last video packet
+
+    endIndex = bytes.byteLength;
+    startIndex = endIndex - MP2T_PACKET_LENGTH;
+    endLoop = false;
+    while (startIndex >= 0) {
+      // Look for a pair of start and end sync bytes in the data..
+      if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+        // We found a packet
+        packet = bytes.subarray(startIndex, endIndex);
+        type = probe.ts.parseType(packet, pmt.pid);
+        switch (type) {
+          case 'pes':
+            pesType = probe.ts.parsePesType(packet, pmt.table);
+            pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+            if (pesType === 'video' && pusi) {
+              parsed = probe.ts.parsePesTime(packet);
+              if (parsed) {
+                parsed.type = 'video';
+                result.video.push(parsed);
+                endLoop = true;
+              }
+            }
+            break;
+        }
+        if (endLoop) {
+          break;
+        }
+        startIndex -= MP2T_PACKET_LENGTH;
+        endIndex -= MP2T_PACKET_LENGTH;
+        continue;
+      } // If we get here, we have somehow become de-synchronized and we need to step
+      // forward one byte at a time until we find a pair of sync bytes that denote
+      // a packet
+
+      startIndex--;
+      endIndex--;
+    }
+  };
+  /**
+   * Adjusts the timestamp information for the segment to account for
+   * rollover and convert to seconds based on pes packet timescale (90khz clock)
+   */
+
+  var adjustTimestamp_ = function (segmentInfo, baseTimestamp) {
+    if (segmentInfo.audio && segmentInfo.audio.length) {
+      var audioBaseTimestamp = baseTimestamp;
+      if (typeof audioBaseTimestamp === 'undefined' || isNaN(audioBaseTimestamp)) {
+        audioBaseTimestamp = segmentInfo.audio[0].dts;
+      }
+      segmentInfo.audio.forEach(function (info) {
+        info.dts = handleRollover(info.dts, audioBaseTimestamp);
+        info.pts = handleRollover(info.pts, audioBaseTimestamp); // time in seconds
+
+        info.dtsTime = info.dts / ONE_SECOND_IN_TS;
+        info.ptsTime = info.pts / ONE_SECOND_IN_TS;
+      });
+    }
+    if (segmentInfo.video && segmentInfo.video.length) {
+      var videoBaseTimestamp = baseTimestamp;
+      if (typeof videoBaseTimestamp === 'undefined' || isNaN(videoBaseTimestamp)) {
+        videoBaseTimestamp = segmentInfo.video[0].dts;
+      }
+      segmentInfo.video.forEach(function (info) {
+        info.dts = handleRollover(info.dts, videoBaseTimestamp);
+        info.pts = handleRollover(info.pts, videoBaseTimestamp); // time in seconds
+
+        info.dtsTime = info.dts / ONE_SECOND_IN_TS;
+        info.ptsTime = info.pts / ONE_SECOND_IN_TS;
+      });
+      if (segmentInfo.firstKeyFrame) {
+        var frame = segmentInfo.firstKeyFrame;
+        frame.dts = handleRollover(frame.dts, videoBaseTimestamp);
+        frame.pts = handleRollover(frame.pts, videoBaseTimestamp); // time in seconds
+
+        frame.dtsTime = frame.dts / ONE_SECOND_IN_TS;
+        frame.ptsTime = frame.pts / ONE_SECOND_IN_TS;
+      }
+    }
+  };
+  /**
+   * inspects the aac data stream for start and end time information
+   */
+
+  var inspectAac_ = function (bytes) {
+    var endLoop = false,
+      audioCount = 0,
+      sampleRate = null,
+      timestamp = null,
+      frameSize = 0,
+      byteIndex = 0,
+      packet;
+    while (bytes.length - byteIndex >= 3) {
+      var type = probe.aac.parseType(bytes, byteIndex);
+      switch (type) {
+        case 'timed-metadata':
+          // Exit early because we don't have enough to parse
+          // the ID3 tag header
+          if (bytes.length - byteIndex < 10) {
+            endLoop = true;
+            break;
+          }
+          frameSize = probe.aac.parseId3TagSize(bytes, byteIndex); // Exit early if we don't have enough in the buffer
+          // to emit a full packet
+
+          if (frameSize > bytes.length) {
+            endLoop = true;
+            break;
+          }
+          if (timestamp === null) {
+            packet = bytes.subarray(byteIndex, byteIndex + frameSize);
+            timestamp = probe.aac.parseAacTimestamp(packet);
+          }
+          byteIndex += frameSize;
+          break;
+        case 'audio':
+          // Exit early because we don't have enough to parse
+          // the ADTS frame header
+          if (bytes.length - byteIndex < 7) {
+            endLoop = true;
+            break;
+          }
+          frameSize = probe.aac.parseAdtsSize(bytes, byteIndex); // Exit early if we don't have enough in the buffer
+          // to emit a full packet
+
+          if (frameSize > bytes.length) {
+            endLoop = true;
+            break;
+          }
+          if (sampleRate === null) {
+            packet = bytes.subarray(byteIndex, byteIndex + frameSize);
+            sampleRate = probe.aac.parseSampleRate(packet);
+          }
+          audioCount++;
+          byteIndex += frameSize;
+          break;
+        default:
+          byteIndex++;
+          break;
+      }
+      if (endLoop) {
+        return null;
+      }
+    }
+    if (sampleRate === null || timestamp === null) {
+      return null;
+    }
+    var audioTimescale = ONE_SECOND_IN_TS / sampleRate;
+    var result = {
+      audio: [{
+        type: 'audio',
+        dts: timestamp,
+        pts: timestamp
+      }, {
+        type: 'audio',
+        dts: timestamp + audioCount * 1024 * audioTimescale,
+        pts: timestamp + audioCount * 1024 * audioTimescale
+      }]
+    };
+    return result;
+  };
+  /**
+   * inspects the transport stream segment data for start and end time information
+   * of the audio and video tracks (when present) as well as the first key frame's
+   * start time.
+   */
+
+  var inspectTs_ = function (bytes) {
+    var pmt = {
+      pid: null,
+      table: null
+    };
+    var result = {};
+    parsePsi_(bytes, pmt);
+    for (var pid in pmt.table) {
+      if (pmt.table.hasOwnProperty(pid)) {
+        var type = pmt.table[pid];
+        switch (type) {
+          case StreamTypes.H264_STREAM_TYPE:
+            result.video = [];
+            parseVideoPes_(bytes, pmt, result);
+            if (result.video.length === 0) {
+              delete result.video;
+            }
+            break;
+          case StreamTypes.ADTS_STREAM_TYPE:
+            result.audio = [];
+            parseAudioPes_(bytes, pmt, result);
+            if (result.audio.length === 0) {
+              delete result.audio;
+            }
+            break;
+        }
+      }
+    }
+    return result;
+  };
+  /**
+   * Inspects segment byte data and returns an object with start and end timing information
+   *
+   * @param {Uint8Array} bytes The segment byte data
+   * @param {Number} baseTimestamp Relative reference timestamp used when adjusting frame
+   *  timestamps for rollover. This value must be in 90khz clock.
+   * @return {Object} Object containing start and end frame timing info of segment.
+   */
+
+  var inspect = function (bytes, baseTimestamp) {
+    var isAacData = probe.aac.isLikelyAacData(bytes);
+    var result;
+    if (isAacData) {
+      result = inspectAac_(bytes);
+    } else {
+      result = inspectTs_(bytes);
+    }
+    if (!result || !result.audio && !result.video) {
+      return null;
+    }
+    adjustTimestamp_(result, baseTimestamp);
+    return result;
+  };
+  var tsInspector = {
+    inspect: inspect,
+    parseAudioPes_: parseAudioPes_
+  };
+  /* global self */
+
+  /**
+   * Re-emits transmuxer events by converting them into messages to the
+   * world outside the worker.
+   *
+   * @param {Object} transmuxer the transmuxer to wire events on
+   * @private
+   */
+
+  const wireTransmuxerEvents = function (self, transmuxer) {
+    transmuxer.on('data', function (segment) {
+      // transfer ownership of the underlying ArrayBuffer
+      // instead of doing a copy to save memory
+      // ArrayBuffers are transferable but generic TypedArrays are not
+      // @link https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Passing_data_by_transferring_ownership_(transferable_objects)
+      const initArray = segment.initSegment;
+      segment.initSegment = {
+        data: initArray.buffer,
+        byteOffset: initArray.byteOffset,
+        byteLength: initArray.byteLength
+      };
+      const typedArray = segment.data;
+      segment.data = typedArray.buffer;
+      self.postMessage({
+        action: 'data',
+        segment,
+        byteOffset: typedArray.byteOffset,
+        byteLength: typedArray.byteLength
+      }, [segment.data]);
+    });
+    transmuxer.on('done', function (data) {
+      self.postMessage({
+        action: 'done'
+      });
+    });
+    transmuxer.on('gopInfo', function (gopInfo) {
+      self.postMessage({
+        action: 'gopInfo',
+        gopInfo
+      });
+    });
+    transmuxer.on('videoSegmentTimingInfo', function (timingInfo) {
+      const videoSegmentTimingInfo = {
+        start: {
+          decode: clock$2.videoTsToSeconds(timingInfo.start.dts),
+          presentation: clock$2.videoTsToSeconds(timingInfo.start.pts)
+        },
+        end: {
+          decode: clock$2.videoTsToSeconds(timingInfo.end.dts),
+          presentation: clock$2.videoTsToSeconds(timingInfo.end.pts)
+        },
+        baseMediaDecodeTime: clock$2.videoTsToSeconds(timingInfo.baseMediaDecodeTime)
+      };
+      if (timingInfo.prependedContentDuration) {
+        videoSegmentTimingInfo.prependedContentDuration = clock$2.videoTsToSeconds(timingInfo.prependedContentDuration);
+      }
+      self.postMessage({
+        action: 'videoSegmentTimingInfo',
+        videoSegmentTimingInfo
+      });
+    });
+    transmuxer.on('audioSegmentTimingInfo', function (timingInfo) {
+      // Note that all times for [audio/video]SegmentTimingInfo events are in video clock
+      const audioSegmentTimingInfo = {
+        start: {
+          decode: clock$2.videoTsToSeconds(timingInfo.start.dts),
+          presentation: clock$2.videoTsToSeconds(timingInfo.start.pts)
+        },
+        end: {
+          decode: clock$2.videoTsToSeconds(timingInfo.end.dts),
+          presentation: clock$2.videoTsToSeconds(timingInfo.end.pts)
+        },
+        baseMediaDecodeTime: clock$2.videoTsToSeconds(timingInfo.baseMediaDecodeTime)
+      };
+      if (timingInfo.prependedContentDuration) {
+        audioSegmentTimingInfo.prependedContentDuration = clock$2.videoTsToSeconds(timingInfo.prependedContentDuration);
+      }
+      self.postMessage({
+        action: 'audioSegmentTimingInfo',
+        audioSegmentTimingInfo
+      });
+    });
+    transmuxer.on('id3Frame', function (id3Frame) {
+      self.postMessage({
+        action: 'id3Frame',
+        id3Frame
+      });
+    });
+    transmuxer.on('caption', function (caption) {
+      self.postMessage({
+        action: 'caption',
+        caption
+      });
+    });
+    transmuxer.on('trackinfo', function (trackInfo) {
+      self.postMessage({
+        action: 'trackinfo',
+        trackInfo
+      });
+    });
+    transmuxer.on('audioTimingInfo', function (audioTimingInfo) {
+      // convert to video TS since we prioritize video time over audio
+      self.postMessage({
+        action: 'audioTimingInfo',
+        audioTimingInfo: {
+          start: clock$2.videoTsToSeconds(audioTimingInfo.start),
+          end: clock$2.videoTsToSeconds(audioTimingInfo.end)
+        }
+      });
+    });
+    transmuxer.on('videoTimingInfo', function (videoTimingInfo) {
+      self.postMessage({
+        action: 'videoTimingInfo',
+        videoTimingInfo: {
+          start: clock$2.videoTsToSeconds(videoTimingInfo.start),
+          end: clock$2.videoTsToSeconds(videoTimingInfo.end)
+        }
+      });
+    });
+    transmuxer.on('log', function (log) {
+      self.postMessage({
+        action: 'log',
+        log
+      });
+    });
+  };
+  /**
+   * All incoming messages route through this hash. If no function exists
+   * to handle an incoming message, then we ignore the message.
+   *
+   * @class MessageHandlers
+   * @param {Object} options the options to initialize with
+   */
+
+  class MessageHandlers {
+    constructor(self, options) {
+      this.options = options || {};
+      this.self = self;
+      this.init();
+    }
+    /**
+     * initialize our web worker and wire all the events.
+     */
+
+    init() {
+      if (this.transmuxer) {
+        this.transmuxer.dispose();
+      }
+      this.transmuxer = new transmuxer.Transmuxer(this.options);
+      wireTransmuxerEvents(this.self, this.transmuxer);
+    }
+    pushMp4Captions(data) {
+      if (!this.captionParser) {
+        this.captionParser = new captionParser();
+        this.captionParser.init();
+      }
+      const segment = new Uint8Array(data.data, data.byteOffset, data.byteLength);
+      const parsed = this.captionParser.parse(segment, data.trackIds, data.timescales);
+      this.self.postMessage({
+        action: 'mp4Captions',
+        captions: parsed && parsed.captions || [],
+        logs: parsed && parsed.logs || [],
+        data: segment.buffer
+      }, [segment.buffer]);
+    }
+    probeMp4StartTime({
+      timescales,
+      data
+    }) {
+      const startTime = probe$2.startTime(timescales, data);
+      this.self.postMessage({
+        action: 'probeMp4StartTime',
+        startTime,
+        data
+      }, [data.buffer]);
+    }
+    probeMp4Tracks({
+      data
+    }) {
+      const tracks = probe$2.tracks(data);
+      this.self.postMessage({
+        action: 'probeMp4Tracks',
+        tracks,
+        data
+      }, [data.buffer]);
+    }
+    /**
+     * Probes an mp4 segment for EMSG boxes containing ID3 data.
+     * https://aomediacodec.github.io/id3-emsg/
+     *
+     * @param {Uint8Array} data segment data
+     * @param {number} offset segment start time
+     * @return {Object[]} an array of ID3 frames
+     */
+
+    probeEmsgID3({
+      data,
+      offset
+    }) {
+      const id3Frames = probe$2.getEmsgID3(data, offset);
+      this.self.postMessage({
+        action: 'probeEmsgID3',
+        id3Frames,
+        emsgData: data
+      }, [data.buffer]);
+    }
+    /**
+     * Probe an mpeg2-ts segment to determine the start time of the segment in it's
+     * internal "media time," as well as whether it contains video and/or audio.
+     *
+     * @private
+     * @param {Uint8Array} bytes - segment bytes
+     * @param {number} baseStartTime
+     *        Relative reference timestamp used when adjusting frame timestamps for rollover.
+     *        This value should be in seconds, as it's converted to a 90khz clock within the
+     *        function body.
+     * @return {Object} The start time of the current segment in "media time" as well as
+     *                  whether it contains video and/or audio
+     */
+
+    probeTs({
+      data,
+      baseStartTime
+    }) {
+      const tsStartTime = typeof baseStartTime === 'number' && !isNaN(baseStartTime) ? baseStartTime * clock$2.ONE_SECOND_IN_TS : void 0;
+      const timeInfo = tsInspector.inspect(data, tsStartTime);
+      let result = null;
+      if (timeInfo) {
+        result = {
+          // each type's time info comes back as an array of 2 times, start and end
+          hasVideo: timeInfo.video && timeInfo.video.length === 2 || false,
+          hasAudio: timeInfo.audio && timeInfo.audio.length === 2 || false
+        };
+        if (result.hasVideo) {
+          result.videoStart = timeInfo.video[0].ptsTime;
+        }
+        if (result.hasAudio) {
+          result.audioStart = timeInfo.audio[0].ptsTime;
+        }
+      }
+      this.self.postMessage({
+        action: 'probeTs',
+        result,
+        data
+      }, [data.buffer]);
+    }
+    clearAllMp4Captions() {
+      if (this.captionParser) {
+        this.captionParser.clearAllCaptions();
+      }
+    }
+    clearParsedMp4Captions() {
+      if (this.captionParser) {
+        this.captionParser.clearParsedCaptions();
+      }
+    }
+    /**
+     * Adds data (a ts segment) to the start of the transmuxer pipeline for
+     * processing.
+     *
+     * @param {ArrayBuffer} data data to push into the muxer
+     */
+
+    push(data) {
+      // Cast array buffer to correct type for transmuxer
+      const segment = new Uint8Array(data.data, data.byteOffset, data.byteLength);
+      this.transmuxer.push(segment);
+    }
+    /**
+     * Recreate the transmuxer so that the next segment added via `push`
+     * start with a fresh transmuxer.
+     */
+
+    reset() {
+      this.transmuxer.reset();
+    }
+    /**
+     * Set the value that will be used as the `baseMediaDecodeTime` time for the
+     * next segment pushed in. Subsequent segments will have their `baseMediaDecodeTime`
+     * set relative to the first based on the PTS values.
+     *
+     * @param {Object} data used to set the timestamp offset in the muxer
+     */
+
+    setTimestampOffset(data) {
+      const timestampOffset = data.timestampOffset || 0;
+      this.transmuxer.setBaseMediaDecodeTime(Math.round(clock$2.secondsToVideoTs(timestampOffset)));
+    }
+    setAudioAppendStart(data) {
+      this.transmuxer.setAudioAppendStart(Math.ceil(clock$2.secondsToVideoTs(data.appendStart)));
+    }
+    setRemux(data) {
+      this.transmuxer.setRemux(data.remux);
+    }
+    /**
+     * Forces the pipeline to finish processing the last segment and emit it's
+     * results.
+     *
+     * @param {Object} data event data, not really used
+     */
+
+    flush(data) {
+      this.transmuxer.flush(); // transmuxed done action is fired after both audio/video pipelines are flushed
+
+      self.postMessage({
+        action: 'done',
+        type: 'transmuxed'
+      });
+    }
+    endTimeline() {
+      this.transmuxer.endTimeline(); // transmuxed endedtimeline action is fired after both audio/video pipelines end their
+      // timelines
+
+      self.postMessage({
+        action: 'endedtimeline',
+        type: 'transmuxed'
+      });
+    }
+    alignGopsWith(data) {
+      this.transmuxer.alignGopsWith(data.gopsToAlignWith.slice());
+    }
+  }
+  /**
+   * Our web worker interface so that things can talk to mux.js
+   * that will be running in a web worker. the scope is passed to this by
+   * webworkify.
+   *
+   * @param {Object} self the scope for the web worker
+   */
+
+  self.onmessage = function (event) {
+    if (event.data.action === 'init' && event.data.options) {
+      this.messageHandlers = new MessageHandlers(self, event.data.options);
+      return;
+    }
+    if (!this.messageHandlers) {
+      this.messageHandlers = new MessageHandlers(self);
+    }
+    if (event.data && event.data.action && event.data.action !== 'init') {
+      if (this.messageHandlers[event.data.action]) {
+        this.messageHandlers[event.data.action](event.data);
+      }
+    }
+  };
+}));
+var TransmuxWorker = factory(workerCode$1);
+/* rollup-plugin-worker-factory end for worker!/home/runner/work/http-streaming/http-streaming/src/transmuxer-worker.js */
+
+const handleData_ = (event, transmuxedData, callback) => {
+  const {
+    type,
+    initSegment,
+    captions,
+    captionStreams,
+    metadata,
+    videoFrameDtsTime,
+    videoFramePtsTime
+  } = event.data.segment;
+  transmuxedData.buffer.push({
+    captions,
+    captionStreams,
+    metadata
+  });
+  const boxes = event.data.segment.boxes || {
+    data: event.data.segment.data
+  };
+  const result = {
+    type,
+    // cast ArrayBuffer to TypedArray
+    data: new Uint8Array(boxes.data, boxes.data.byteOffset, boxes.data.byteLength),
+    initSegment: new Uint8Array(initSegment.data, initSegment.byteOffset, initSegment.byteLength)
+  };
+  if (typeof videoFrameDtsTime !== 'undefined') {
+    result.videoFrameDtsTime = videoFrameDtsTime;
+  }
+  if (typeof videoFramePtsTime !== 'undefined') {
+    result.videoFramePtsTime = videoFramePtsTime;
+  }
+  callback(result);
+};
+const handleDone_ = ({
+  transmuxedData,
+  callback
+}) => {
+  // Previously we only returned data on data events,
+  // not on done events. Clear out the buffer to keep that consistent.
+  transmuxedData.buffer = []; // all buffers should have been flushed from the muxer, so start processing anything we
+  // have received
+
+  callback(transmuxedData);
+};
+const handleGopInfo_ = (event, transmuxedData) => {
+  transmuxedData.gopInfo = event.data.gopInfo;
+};
+const processTransmux = options => {
+  const {
+    transmuxer,
+    bytes,
+    audioAppendStart,
+    gopsToAlignWith,
+    remux,
+    onData,
+    onTrackInfo,
+    onAudioTimingInfo,
+    onVideoTimingInfo,
+    onVideoSegmentTimingInfo,
+    onAudioSegmentTimingInfo,
+    onId3,
+    onCaptions,
+    onDone,
+    onEndedTimeline,
+    onTransmuxerLog,
+    isEndOfTimeline
+  } = options;
+  const transmuxedData = {
+    buffer: []
+  };
+  let waitForEndedTimelineEvent = isEndOfTimeline;
+  const handleMessage = event => {
+    if (transmuxer.currentTransmux !== options) {
+      // disposed
+      return;
+    }
+    if (event.data.action === 'data') {
+      handleData_(event, transmuxedData, onData);
+    }
+    if (event.data.action === 'trackinfo') {
+      onTrackInfo(event.data.trackInfo);
+    }
+    if (event.data.action === 'gopInfo') {
+      handleGopInfo_(event, transmuxedData);
+    }
+    if (event.data.action === 'audioTimingInfo') {
+      onAudioTimingInfo(event.data.audioTimingInfo);
+    }
+    if (event.data.action === 'videoTimingInfo') {
+      onVideoTimingInfo(event.data.videoTimingInfo);
+    }
+    if (event.data.action === 'videoSegmentTimingInfo') {
+      onVideoSegmentTimingInfo(event.data.videoSegmentTimingInfo);
+    }
+    if (event.data.action === 'audioSegmentTimingInfo') {
+      onAudioSegmentTimingInfo(event.data.audioSegmentTimingInfo);
+    }
+    if (event.data.action === 'id3Frame') {
+      onId3([event.data.id3Frame], event.data.id3Frame.dispatchType);
+    }
+    if (event.data.action === 'caption') {
+      onCaptions(event.data.caption);
+    }
+    if (event.data.action === 'endedtimeline') {
+      waitForEndedTimelineEvent = false;
+      onEndedTimeline();
+    }
+    if (event.data.action === 'log') {
+      onTransmuxerLog(event.data.log);
+    } // wait for the transmuxed event since we may have audio and video
+
+    if (event.data.type !== 'transmuxed') {
+      return;
+    } // If the "endedtimeline" event has not yet fired, and this segment represents the end
+    // of a timeline, that means there may still be data events before the segment
+    // processing can be considerred complete. In that case, the final event should be
+    // an "endedtimeline" event with the type "transmuxed."
+
+    if (waitForEndedTimelineEvent) {
+      return;
+    }
+    transmuxer.onmessage = null;
+    handleDone_({
+      transmuxedData,
+      callback: onDone
+    });
+    /* eslint-disable no-use-before-define */
+
+    dequeue(transmuxer);
+    /* eslint-enable */
+  };
+
+  transmuxer.onmessage = handleMessage;
+  if (audioAppendStart) {
+    transmuxer.postMessage({
+      action: 'setAudioAppendStart',
+      appendStart: audioAppendStart
+    });
+  } // allow empty arrays to be passed to clear out GOPs
+
+  if (Array.isArray(gopsToAlignWith)) {
+    transmuxer.postMessage({
+      action: 'alignGopsWith',
+      gopsToAlignWith
+    });
+  }
+  if (typeof remux !== 'undefined') {
+    transmuxer.postMessage({
+      action: 'setRemux',
+      remux
+    });
+  }
+  if (bytes.byteLength) {
+    const buffer = bytes instanceof ArrayBuffer ? bytes : bytes.buffer;
+    const byteOffset = bytes instanceof ArrayBuffer ? 0 : bytes.byteOffset;
+    transmuxer.postMessage({
+      action: 'push',
+      // Send the typed-array of data as an ArrayBuffer so that
+      // it can be sent as a "Transferable" and avoid the costly
+      // memory copy
+      data: buffer,
+      // To recreate the original typed-array, we need information
+      // about what portion of the ArrayBuffer it was a view into
+      byteOffset,
+      byteLength: bytes.byteLength
+    }, [buffer]);
+  }
+  if (isEndOfTimeline) {
+    transmuxer.postMessage({
+      action: 'endTimeline'
+    });
+  } // even if we didn't push any bytes, we have to make sure we flush in case we reached
+  // the end of the segment
+
+  transmuxer.postMessage({
+    action: 'flush'
+  });
+};
+const dequeue = transmuxer => {
+  transmuxer.currentTransmux = null;
+  if (transmuxer.transmuxQueue.length) {
+    transmuxer.currentTransmux = transmuxer.transmuxQueue.shift();
+    if (typeof transmuxer.currentTransmux === 'function') {
+      transmuxer.currentTransmux();
+    } else {
+      processTransmux(transmuxer.currentTransmux);
+    }
+  }
+};
+const processAction = (transmuxer, action) => {
+  transmuxer.postMessage({
+    action
+  });
+  dequeue(transmuxer);
+};
+const enqueueAction = (action, transmuxer) => {
+  if (!transmuxer.currentTransmux) {
+    transmuxer.currentTransmux = action;
+    processAction(transmuxer, action);
+    return;
+  }
+  transmuxer.transmuxQueue.push(processAction.bind(null, transmuxer, action));
+};
+const reset = transmuxer => {
+  enqueueAction('reset', transmuxer);
+};
+const endTimeline = transmuxer => {
+  enqueueAction('endTimeline', transmuxer);
+};
+const transmux = options => {
+  if (!options.transmuxer.currentTransmux) {
+    options.transmuxer.currentTransmux = options;
+    processTransmux(options);
+    return;
+  }
+  options.transmuxer.transmuxQueue.push(options);
+};
+const createTransmuxer = options => {
+  const transmuxer = new TransmuxWorker();
+  transmuxer.currentTransmux = null;
+  transmuxer.transmuxQueue = [];
+  const term = transmuxer.terminate;
+  transmuxer.terminate = () => {
+    transmuxer.currentTransmux = null;
+    transmuxer.transmuxQueue.length = 0;
+    return term.call(transmuxer);
+  };
+  transmuxer.postMessage({
+    action: 'init',
+    options
+  });
+  return transmuxer;
+};
+var segmentTransmuxer = {
+  reset,
+  endTimeline,
+  transmux,
+  createTransmuxer
+};
+const workerCallback = function (options) {
+  const transmuxer = options.transmuxer;
+  const endAction = options.endAction || options.action;
+  const callback = options.callback;
+  const message = _extends({}, options, {
+    endAction: null,
+    transmuxer: null,
+    callback: null
+  });
+  const listenForEndEvent = event => {
+    if (event.data.action !== endAction) {
+      return;
+    }
+    transmuxer.removeEventListener('message', listenForEndEvent); // transfer ownership of bytes back to us.
+
+    if (event.data.data) {
+      event.data.data = new Uint8Array(event.data.data, options.byteOffset || 0, options.byteLength || event.data.data.byteLength);
+      if (options.data) {
+        options.data = event.data.data;
+      }
+    }
+    callback(event.data);
+  };
+  transmuxer.addEventListener('message', listenForEndEvent);
+  if (options.data) {
+    const isArrayBuffer = options.data instanceof ArrayBuffer;
+    message.byteOffset = isArrayBuffer ? 0 : options.data.byteOffset;
+    message.byteLength = options.data.byteLength;
+    const transfers = [isArrayBuffer ? options.data : options.data.buffer];
+    transmuxer.postMessage(message, transfers);
+  } else {
+    transmuxer.postMessage(message);
+  }
+};
+const REQUEST_ERRORS = {
+  FAILURE: 2,
+  TIMEOUT: -101,
+  ABORTED: -102
+};
+/**
+ * Abort all requests
+ *
+ * @param {Object} activeXhrs - an object that tracks all XHR requests
+ */
+
+const abortAll = activeXhrs => {
+  activeXhrs.forEach(xhr => {
+    xhr.abort();
+  });
+};
+/**
+ * Gather important bandwidth stats once a request has completed
+ *
+ * @param {Object} request - the XHR request from which to gather stats
+ */
+
+const getRequestStats = request => {
+  return {
+    bandwidth: request.bandwidth,
+    bytesReceived: request.bytesReceived || 0,
+    roundTripTime: request.roundTripTime || 0
+  };
+};
+/**
+ * If possible gather bandwidth stats as a request is in
+ * progress
+ *
+ * @param {Event} progressEvent - an event object from an XHR's progress event
+ */
+
+const getProgressStats = progressEvent => {
+  const request = progressEvent.target;
+  const roundTripTime = Date.now() - request.requestTime;
+  const stats = {
+    bandwidth: Infinity,
+    bytesReceived: 0,
+    roundTripTime: roundTripTime || 0
+  };
+  stats.bytesReceived = progressEvent.loaded; // This can result in Infinity if stats.roundTripTime is 0 but that is ok
+  // because we should only use bandwidth stats on progress to determine when
+  // abort a request early due to insufficient bandwidth
+
+  stats.bandwidth = Math.floor(stats.bytesReceived / stats.roundTripTime * 8 * 1000);
+  return stats;
+};
+/**
+ * Handle all error conditions in one place and return an object
+ * with all the information
+ *
+ * @param {Error|null} error - if non-null signals an error occured with the XHR
+ * @param {Object} request -  the XHR request that possibly generated the error
+ */
+
+const handleErrors = (error, request) => {
+  if (request.timedout) {
+    return {
+      status: request.status,
+      message: 'HLS request timed-out at URL: ' + request.uri,
+      code: REQUEST_ERRORS.TIMEOUT,
+      xhr: request
+    };
+  }
+  if (request.aborted) {
+    return {
+      status: request.status,
+      message: 'HLS request aborted at URL: ' + request.uri,
+      code: REQUEST_ERRORS.ABORTED,
+      xhr: request
+    };
+  }
+  if (error) {
+    return {
+      status: request.status,
+      message: 'HLS request errored at URL: ' + request.uri,
+      code: REQUEST_ERRORS.FAILURE,
+      xhr: request
+    };
+  }
+  if (request.responseType === 'arraybuffer' && request.response.byteLength === 0) {
+    return {
+      status: request.status,
+      message: 'Empty HLS response at URL: ' + request.uri,
+      code: REQUEST_ERRORS.FAILURE,
+      xhr: request
+    };
+  }
+  return null;
+};
+/**
+ * Handle responses for key data and convert the key data to the correct format
+ * for the decryption step later
+ *
+ * @param {Object} segment - a simplified copy of the segmentInfo object
+ *                           from SegmentLoader
+ * @param {Array} objects - objects to add the key bytes to.
+ * @param {Function} finishProcessingFn - a callback to execute to continue processing
+ *                                        this request
+ */
+
+const handleKeyResponse = (segment, objects, finishProcessingFn) => (error, request) => {
+  const response = request.response;
+  const errorObj = handleErrors(error, request);
+  if (errorObj) {
+    return finishProcessingFn(errorObj, segment);
+  }
+  if (response.byteLength !== 16) {
+    return finishProcessingFn({
+      status: request.status,
+      message: 'Invalid HLS key at URL: ' + request.uri,
+      code: REQUEST_ERRORS.FAILURE,
+      xhr: request
+    }, segment);
+  }
+  const view = new DataView(response);
+  const bytes = new Uint32Array([view.getUint32(0), view.getUint32(4), view.getUint32(8), view.getUint32(12)]);
+  for (let i = 0; i < objects.length; i++) {
+    objects[i].bytes = bytes;
+  }
+  return finishProcessingFn(null, segment);
+};
+const parseInitSegment = (segment, callback) => {
+  const type = detectContainerForBytes(segment.map.bytes); // TODO: We should also handle ts init segments here, but we
+  // only know how to parse mp4 init segments at the moment
+
+  if (type !== 'mp4') {
+    const uri = segment.map.resolvedUri || segment.map.uri;
+    const mediaType = type || 'unknown';
+    return callback({
+      internal: true,
+      message: `Found unsupported ${mediaType} container for initialization segment at URL: ${uri}`,
+      code: REQUEST_ERRORS.FAILURE,
+      metadata: {
+        errorType: videojs.Error.UnsupportedMediaInitialization,
+        mediaType
+      }
+    });
+  }
+  workerCallback({
+    action: 'probeMp4Tracks',
+    data: segment.map.bytes,
+    transmuxer: segment.transmuxer,
+    callback: ({
+      tracks,
+      data
+    }) => {
+      // transfer bytes back to us
+      segment.map.bytes = data;
+      tracks.forEach(function (track) {
+        segment.map.tracks = segment.map.tracks || {}; // only support one track of each type for now
+
+        if (segment.map.tracks[track.type]) {
+          return;
+        }
+        segment.map.tracks[track.type] = track;
+        if (typeof track.id === 'number' && track.timescale) {
+          segment.map.timescales = segment.map.timescales || {};
+          segment.map.timescales[track.id] = track.timescale;
+        }
+      });
+      return callback(null);
+    }
+  });
+};
+/**
+ * Handle init-segment responses
+ *
+ * @param {Object} segment - a simplified copy of the segmentInfo object
+ *                           from SegmentLoader
+ * @param {Function} finishProcessingFn - a callback to execute to continue processing
+ *                                        this request
+ */
+
+const handleInitSegmentResponse = ({
+  segment,
+  finishProcessingFn
+}) => (error, request) => {
+  const errorObj = handleErrors(error, request);
+  if (errorObj) {
+    return finishProcessingFn(errorObj, segment);
+  }
+  const bytes = new Uint8Array(request.response); // init segment is encypted, we will have to wait
+  // until the key request is done to decrypt.
+
+  if (segment.map.key) {
+    segment.map.encryptedBytes = bytes;
+    return finishProcessingFn(null, segment);
+  }
+  segment.map.bytes = bytes;
+  parseInitSegment(segment, function (parseError) {
+    if (parseError) {
+      parseError.xhr = request;
+      parseError.status = request.status;
+      return finishProcessingFn(parseError, segment);
+    }
+    finishProcessingFn(null, segment);
+  });
+};
+/**
+ * Response handler for segment-requests being sure to set the correct
+ * property depending on whether the segment is encryped or not
+ * Also records and keeps track of stats that are used for ABR purposes
+ *
+ * @param {Object} segment - a simplified copy of the segmentInfo object
+ *                           from SegmentLoader
+ * @param {Function} finishProcessingFn - a callback to execute to continue processing
+ *                                        this request
+ */
+
+const handleSegmentResponse = ({
+  segment,
+  finishProcessingFn,
+  responseType
+}) => (error, request) => {
+  const errorObj = handleErrors(error, request);
+  if (errorObj) {
+    return finishProcessingFn(errorObj, segment);
+  }
+  const newBytes =
+  // although responseText "should" exist, this guard serves to prevent an error being
+  // thrown for two primary cases:
+  // 1. the mime type override stops working, or is not implemented for a specific
+  //    browser
+  // 2. when using mock XHR libraries like sinon that do not allow the override behavior
+  responseType === 'arraybuffer' || !request.responseText ? request.response : stringToArrayBuffer(request.responseText.substring(segment.lastReachedChar || 0));
+  segment.stats = getRequestStats(request);
+  if (segment.key) {
+    segment.encryptedBytes = new Uint8Array(newBytes);
+  } else {
+    segment.bytes = new Uint8Array(newBytes);
+  }
+  return finishProcessingFn(null, segment);
+};
+const transmuxAndNotify = ({
+  segment,
+  bytes,
+  trackInfoFn,
+  timingInfoFn,
+  videoSegmentTimingInfoFn,
+  audioSegmentTimingInfoFn,
+  id3Fn,
+  captionsFn,
+  isEndOfTimeline,
+  endedTimelineFn,
+  dataFn,
+  doneFn,
+  onTransmuxerLog
+}) => {
+  const fmp4Tracks = segment.map && segment.map.tracks || {};
+  const isMuxed = Boolean(fmp4Tracks.audio && fmp4Tracks.video); // Keep references to each function so we can null them out after we're done with them.
+  // One reason for this is that in the case of full segments, we want to trust start
+  // times from the probe, rather than the transmuxer.
+
+  let audioStartFn = timingInfoFn.bind(null, segment, 'audio', 'start');
+  const audioEndFn = timingInfoFn.bind(null, segment, 'audio', 'end');
+  let videoStartFn = timingInfoFn.bind(null, segment, 'video', 'start');
+  const videoEndFn = timingInfoFn.bind(null, segment, 'video', 'end');
+  const finish = () => transmux({
+    bytes,
+    transmuxer: segment.transmuxer,
+    audioAppendStart: segment.audioAppendStart,
+    gopsToAlignWith: segment.gopsToAlignWith,
+    remux: isMuxed,
+    onData: result => {
+      result.type = result.type === 'combined' ? 'video' : result.type;
+      dataFn(segment, result);
+    },
+    onTrackInfo: trackInfo => {
+      if (trackInfoFn) {
+        if (isMuxed) {
+          trackInfo.isMuxed = true;
+        }
+        trackInfoFn(segment, trackInfo);
+      }
+    },
+    onAudioTimingInfo: audioTimingInfo => {
+      // we only want the first start value we encounter
+      if (audioStartFn && typeof audioTimingInfo.start !== 'undefined') {
+        audioStartFn(audioTimingInfo.start);
+        audioStartFn = null;
+      } // we want to continually update the end time
+
+      if (audioEndFn && typeof audioTimingInfo.end !== 'undefined') {
+        audioEndFn(audioTimingInfo.end);
+      }
+    },
+    onVideoTimingInfo: videoTimingInfo => {
+      // we only want the first start value we encounter
+      if (videoStartFn && typeof videoTimingInfo.start !== 'undefined') {
+        videoStartFn(videoTimingInfo.start);
+        videoStartFn = null;
+      } // we want to continually update the end time
+
+      if (videoEndFn && typeof videoTimingInfo.end !== 'undefined') {
+        videoEndFn(videoTimingInfo.end);
+      }
+    },
+    onVideoSegmentTimingInfo: videoSegmentTimingInfo => {
+      videoSegmentTimingInfoFn(videoSegmentTimingInfo);
+    },
+    onAudioSegmentTimingInfo: audioSegmentTimingInfo => {
+      audioSegmentTimingInfoFn(audioSegmentTimingInfo);
+    },
+    onId3: (id3Frames, dispatchType) => {
+      id3Fn(segment, id3Frames, dispatchType);
+    },
+    onCaptions: captions => {
+      captionsFn(segment, [captions]);
+    },
+    isEndOfTimeline,
+    onEndedTimeline: () => {
+      endedTimelineFn();
+    },
+    onTransmuxerLog,
+    onDone: result => {
+      if (!doneFn) {
+        return;
+      }
+      result.type = result.type === 'combined' ? 'video' : result.type;
+      doneFn(null, segment, result);
+    }
+  }); // In the transmuxer, we don't yet have the ability to extract a "proper" start time.
+  // Meaning cached frame data may corrupt our notion of where this segment
+  // really starts. To get around this, probe for the info needed.
+
+  workerCallback({
+    action: 'probeTs',
+    transmuxer: segment.transmuxer,
+    data: bytes,
+    baseStartTime: segment.baseStartTime,
+    callback: data => {
+      segment.bytes = bytes = data.data;
+      const probeResult = data.result;
+      if (probeResult) {
+        trackInfoFn(segment, {
+          hasAudio: probeResult.hasAudio,
+          hasVideo: probeResult.hasVideo,
+          isMuxed
+        });
+        trackInfoFn = null;
+      }
+      finish();
+    }
+  });
+};
+const handleSegmentBytes = ({
+  segment,
+  bytes,
+  trackInfoFn,
+  timingInfoFn,
+  videoSegmentTimingInfoFn,
+  audioSegmentTimingInfoFn,
+  id3Fn,
+  captionsFn,
+  isEndOfTimeline,
+  endedTimelineFn,
+  dataFn,
+  doneFn,
+  onTransmuxerLog
+}) => {
+  let bytesAsUint8Array = new Uint8Array(bytes); // TODO:
+  // We should have a handler that fetches the number of bytes required
+  // to check if something is fmp4. This will allow us to save bandwidth
+  // because we can only exclude a playlist and abort requests
+  // by codec after trackinfo triggers.
+
+  if (isLikelyFmp4MediaSegment(bytesAsUint8Array)) {
+    segment.isFmp4 = true;
+    const {
+      tracks
+    } = segment.map;
+    const trackInfo = {
+      isFmp4: true,
+      hasVideo: !!tracks.video,
+      hasAudio: !!tracks.audio
+    }; // if we have a audio track, with a codec that is not set to
+    // encrypted audio
+
+    if (tracks.audio && tracks.audio.codec && tracks.audio.codec !== 'enca') {
+      trackInfo.audioCodec = tracks.audio.codec;
+    } // if we have a video track, with a codec that is not set to
+    // encrypted video
+
+    if (tracks.video && tracks.video.codec && tracks.video.codec !== 'encv') {
+      trackInfo.videoCodec = tracks.video.codec;
+    }
+    if (tracks.video && tracks.audio) {
+      trackInfo.isMuxed = true;
+    } // since we don't support appending fmp4 data on progress, we know we have the full
+    // segment here
+
+    trackInfoFn(segment, trackInfo); // The probe doesn't provide the segment end time, so only callback with the start
+    // time. The end time can be roughly calculated by the receiver using the duration.
+    //
+    // Note that the start time returned by the probe reflects the baseMediaDecodeTime, as
+    // that is the true start of the segment (where the playback engine should begin
+    // decoding).
+
+    const finishLoading = (captions, id3Frames) => {
+      // if the track still has audio at this point it is only possible
+      // for it to be audio only. See `tracks.video && tracks.audio` if statement
+      // above.
+      // we make sure to use segment.bytes here as that
+      dataFn(segment, {
+        data: bytesAsUint8Array,
+        type: trackInfo.hasAudio && !trackInfo.isMuxed ? 'audio' : 'video'
+      });
+      if (id3Frames && id3Frames.length) {
+        id3Fn(segment, id3Frames);
+      }
+      if (captions && captions.length) {
+        captionsFn(segment, captions);
+      }
+      doneFn(null, segment, {});
+    };
+    workerCallback({
+      action: 'probeMp4StartTime',
+      timescales: segment.map.timescales,
+      data: bytesAsUint8Array,
+      transmuxer: segment.transmuxer,
+      callback: ({
+        data,
+        startTime
+      }) => {
+        // transfer bytes back to us
+        bytes = data.buffer;
+        segment.bytes = bytesAsUint8Array = data;
+        if (trackInfo.hasAudio && !trackInfo.isMuxed) {
+          timingInfoFn(segment, 'audio', 'start', startTime);
+        }
+        if (trackInfo.hasVideo) {
+          timingInfoFn(segment, 'video', 'start', startTime);
+        }
+        workerCallback({
+          action: 'probeEmsgID3',
+          data: bytesAsUint8Array,
+          transmuxer: segment.transmuxer,
+          offset: startTime,
+          callback: ({
+            emsgData,
+            id3Frames
+          }) => {
+            // transfer bytes back to us
+            bytes = emsgData.buffer;
+            segment.bytes = bytesAsUint8Array = emsgData; // Run through the CaptionParser in case there are captions.
+            // Initialize CaptionParser if it hasn't been yet
+
+            if (!tracks.video || !emsgData.byteLength || !segment.transmuxer) {
+              finishLoading(undefined, id3Frames);
+              return;
+            }
+            workerCallback({
+              action: 'pushMp4Captions',
+              endAction: 'mp4Captions',
+              transmuxer: segment.transmuxer,
+              data: bytesAsUint8Array,
+              timescales: segment.map.timescales,
+              trackIds: [tracks.video.id],
+              callback: message => {
+                // transfer bytes back to us
+                bytes = message.data.buffer;
+                segment.bytes = bytesAsUint8Array = message.data;
+                message.logs.forEach(function (log) {
+                  onTransmuxerLog(merge(log, {
+                    stream: 'mp4CaptionParser'
+                  }));
+                });
+                finishLoading(message.captions, id3Frames);
+              }
+            });
+          }
+        });
+      }
+    });
+    return;
+  } // VTT or other segments that don't need processing
+
+  if (!segment.transmuxer) {
+    doneFn(null, segment, {});
+    return;
+  }
+  if (typeof segment.container === 'undefined') {
+    segment.container = detectContainerForBytes(bytesAsUint8Array);
+  }
+  if (segment.container !== 'ts' && segment.container !== 'aac') {
+    trackInfoFn(segment, {
+      hasAudio: false,
+      hasVideo: false
+    });
+    doneFn(null, segment, {});
+    return;
+  } // ts or aac
+
+  transmuxAndNotify({
+    segment,
+    bytes,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  });
+};
+const decrypt = function ({
+  id,
+  key,
+  encryptedBytes,
+  decryptionWorker
+}, callback) {
+  const decryptionHandler = event => {
+    if (event.data.source === id) {
+      decryptionWorker.removeEventListener('message', decryptionHandler);
+      const decrypted = event.data.decrypted;
+      callback(new Uint8Array(decrypted.bytes, decrypted.byteOffset, decrypted.byteLength));
+    }
+  };
+  decryptionWorker.addEventListener('message', decryptionHandler);
+  let keyBytes;
+  if (key.bytes.slice) {
+    keyBytes = key.bytes.slice();
+  } else {
+    keyBytes = new Uint32Array(Array.prototype.slice.call(key.bytes));
+  } // incrementally decrypt the bytes
+
+  decryptionWorker.postMessage(createTransferableMessage({
+    source: id,
+    encrypted: encryptedBytes,
+    key: keyBytes,
+    iv: key.iv
+  }), [encryptedBytes.buffer, keyBytes.buffer]);
+};
+/**
+ * Decrypt the segment via the decryption web worker
+ *
+ * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128 decryption
+ *                                       routines
+ * @param {Object} segment - a simplified copy of the segmentInfo object
+ *                           from SegmentLoader
+ * @param {Function} trackInfoFn - a callback that receives track info
+ * @param {Function} timingInfoFn - a callback that receives timing info
+ * @param {Function} videoSegmentTimingInfoFn
+ *                   a callback that receives video timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {Function} audioSegmentTimingInfoFn
+ *                   a callback that receives audio timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {boolean}  isEndOfTimeline
+ *                   true if this segment represents the last segment in a timeline
+ * @param {Function} endedTimelineFn
+ *                   a callback made when a timeline is ended, will only be called if
+ *                   isEndOfTimeline is true
+ * @param {Function} dataFn - a callback that is executed when segment bytes are available
+ *                            and ready to use
+ * @param {Function} doneFn - a callback that is executed after decryption has completed
+ */
+
+const decryptSegment = ({
+  decryptionWorker,
+  segment,
+  trackInfoFn,
+  timingInfoFn,
+  videoSegmentTimingInfoFn,
+  audioSegmentTimingInfoFn,
+  id3Fn,
+  captionsFn,
+  isEndOfTimeline,
+  endedTimelineFn,
+  dataFn,
+  doneFn,
+  onTransmuxerLog
+}) => {
+  decrypt({
+    id: segment.requestId,
+    key: segment.key,
+    encryptedBytes: segment.encryptedBytes,
+    decryptionWorker
+  }, decryptedBytes => {
+    segment.bytes = decryptedBytes;
+    handleSegmentBytes({
+      segment,
+      bytes: segment.bytes,
+      trackInfoFn,
+      timingInfoFn,
+      videoSegmentTimingInfoFn,
+      audioSegmentTimingInfoFn,
+      id3Fn,
+      captionsFn,
+      isEndOfTimeline,
+      endedTimelineFn,
+      dataFn,
+      doneFn,
+      onTransmuxerLog
+    });
+  });
+};
+/**
+ * This function waits for all XHRs to finish (with either success or failure)
+ * before continueing processing via it's callback. The function gathers errors
+ * from each request into a single errors array so that the error status for
+ * each request can be examined later.
+ *
+ * @param {Object} activeXhrs - an object that tracks all XHR requests
+ * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128 decryption
+ *                                       routines
+ * @param {Function} trackInfoFn - a callback that receives track info
+ * @param {Function} timingInfoFn - a callback that receives timing info
+ * @param {Function} videoSegmentTimingInfoFn
+ *                   a callback that receives video timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {Function} audioSegmentTimingInfoFn
+ *                   a callback that receives audio timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {Function} id3Fn - a callback that receives ID3 metadata
+ * @param {Function} captionsFn - a callback that receives captions
+ * @param {boolean}  isEndOfTimeline
+ *                   true if this segment represents the last segment in a timeline
+ * @param {Function} endedTimelineFn
+ *                   a callback made when a timeline is ended, will only be called if
+ *                   isEndOfTimeline is true
+ * @param {Function} dataFn - a callback that is executed when segment bytes are available
+ *                            and ready to use
+ * @param {Function} doneFn - a callback that is executed after all resources have been
+ *                            downloaded and any decryption completed
+ */
+
+const waitForCompletion = ({
+  activeXhrs,
+  decryptionWorker,
+  trackInfoFn,
+  timingInfoFn,
+  videoSegmentTimingInfoFn,
+  audioSegmentTimingInfoFn,
+  id3Fn,
+  captionsFn,
+  isEndOfTimeline,
+  endedTimelineFn,
+  dataFn,
+  doneFn,
+  onTransmuxerLog
+}) => {
+  let count = 0;
+  let didError = false;
+  return (error, segment) => {
+    if (didError) {
+      return;
+    }
+    if (error) {
+      didError = true; // If there are errors, we have to abort any outstanding requests
+
+      abortAll(activeXhrs); // Even though the requests above are aborted, and in theory we could wait until we
+      // handle the aborted events from those requests, there are some cases where we may
+      // never get an aborted event. For instance, if the network connection is lost and
+      // there were two requests, the first may have triggered an error immediately, while
+      // the second request remains unsent. In that case, the aborted algorithm will not
+      // trigger an abort: see https://xhr.spec.whatwg.org/#the-abort()-method
+      //
+      // We also can't rely on the ready state of the XHR, since the request that
+      // triggered the connection error may also show as a ready state of 0 (unsent).
+      // Therefore, we have to finish this group of requests immediately after the first
+      // seen error.
+
+      return doneFn(error, segment);
+    }
+    count += 1;
+    if (count === activeXhrs.length) {
+      const segmentFinish = function () {
+        if (segment.encryptedBytes) {
+          return decryptSegment({
+            decryptionWorker,
+            segment,
+            trackInfoFn,
+            timingInfoFn,
+            videoSegmentTimingInfoFn,
+            audioSegmentTimingInfoFn,
+            id3Fn,
+            captionsFn,
+            isEndOfTimeline,
+            endedTimelineFn,
+            dataFn,
+            doneFn,
+            onTransmuxerLog
+          });
+        } // Otherwise, everything is ready just continue
+
+        handleSegmentBytes({
+          segment,
+          bytes: segment.bytes,
+          trackInfoFn,
+          timingInfoFn,
+          videoSegmentTimingInfoFn,
+          audioSegmentTimingInfoFn,
+          id3Fn,
+          captionsFn,
+          isEndOfTimeline,
+          endedTimelineFn,
+          dataFn,
+          doneFn,
+          onTransmuxerLog
+        });
+      }; // Keep track of when *all* of the requests have completed
+
+      segment.endOfAllRequests = Date.now();
+      if (segment.map && segment.map.encryptedBytes && !segment.map.bytes) {
+        return decrypt({
+          decryptionWorker,
+          // add -init to the "id" to differentiate between segment
+          // and init segment decryption, just in case they happen
+          // at the same time at some point in the future.
+          id: segment.requestId + '-init',
+          encryptedBytes: segment.map.encryptedBytes,
+          key: segment.map.key
+        }, decryptedBytes => {
+          segment.map.bytes = decryptedBytes;
+          parseInitSegment(segment, parseError => {
+            if (parseError) {
+              abortAll(activeXhrs);
+              return doneFn(parseError, segment);
+            }
+            segmentFinish();
+          });
+        });
+      }
+      segmentFinish();
+    }
+  };
+};
+/**
+ * Calls the abort callback if any request within the batch was aborted. Will only call
+ * the callback once per batch of requests, even if multiple were aborted.
+ *
+ * @param {Object} loadendState - state to check to see if the abort function was called
+ * @param {Function} abortFn - callback to call for abort
+ */
+
+const handleLoadEnd = ({
+  loadendState,
+  abortFn
+}) => event => {
+  const request = event.target;
+  if (request.aborted && abortFn && !loadendState.calledAbortFn) {
+    abortFn();
+    loadendState.calledAbortFn = true;
+  }
+};
+/**
+ * Simple progress event callback handler that gathers some stats before
+ * executing a provided callback with the `segment` object
+ *
+ * @param {Object} segment - a simplified copy of the segmentInfo object
+ *                           from SegmentLoader
+ * @param {Function} progressFn - a callback that is executed each time a progress event
+ *                                is received
+ * @param {Function} trackInfoFn - a callback that receives track info
+ * @param {Function} timingInfoFn - a callback that receives timing info
+ * @param {Function} videoSegmentTimingInfoFn
+ *                   a callback that receives video timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {Function} audioSegmentTimingInfoFn
+ *                   a callback that receives audio timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {boolean}  isEndOfTimeline
+ *                   true if this segment represents the last segment in a timeline
+ * @param {Function} endedTimelineFn
+ *                   a callback made when a timeline is ended, will only be called if
+ *                   isEndOfTimeline is true
+ * @param {Function} dataFn - a callback that is executed when segment bytes are available
+ *                            and ready to use
+ * @param {Event} event - the progress event object from XMLHttpRequest
+ */
+
+const handleProgress = ({
+  segment,
+  progressFn,
+  trackInfoFn,
+  timingInfoFn,
+  videoSegmentTimingInfoFn,
+  audioSegmentTimingInfoFn,
+  id3Fn,
+  captionsFn,
+  isEndOfTimeline,
+  endedTimelineFn,
+  dataFn
+}) => event => {
+  const request = event.target;
+  if (request.aborted) {
+    return;
+  }
+  segment.stats = merge(segment.stats, getProgressStats(event)); // record the time that we receive the first byte of data
+
+  if (!segment.stats.firstBytesReceivedAt && segment.stats.bytesReceived) {
+    segment.stats.firstBytesReceivedAt = Date.now();
+  }
+  return progressFn(event, segment);
+};
+/**
+ * Load all resources and does any processing necessary for a media-segment
+ *
+ * Features:
+ *   decrypts the media-segment if it has a key uri and an iv
+ *   aborts *all* requests if *any* one request fails
+ *
+ * The segment object, at minimum, has the following format:
+ * {
+ *   resolvedUri: String,
+ *   [transmuxer]: Object,
+ *   [byterange]: {
+ *     offset: Number,
+ *     length: Number
+ *   },
+ *   [key]: {
+ *     resolvedUri: String
+ *     [byterange]: {
+ *       offset: Number,
+ *       length: Number
+ *     },
+ *     iv: {
+ *       bytes: Uint32Array
+ *     }
+ *   },
+ *   [map]: {
+ *     resolvedUri: String,
+ *     [byterange]: {
+ *       offset: Number,
+ *       length: Number
+ *     },
+ *     [bytes]: Uint8Array
+ *   }
+ * }
+ * ...where [name] denotes optional properties
+ *
+ * @param {Function} xhr - an instance of the xhr wrapper in xhr.js
+ * @param {Object} xhrOptions - the base options to provide to all xhr requests
+ * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128
+ *                                       decryption routines
+ * @param {Object} segment - a simplified copy of the segmentInfo object
+ *                           from SegmentLoader
+ * @param {Function} abortFn - a callback called (only once) if any piece of a request was
+ *                             aborted
+ * @param {Function} progressFn - a callback that receives progress events from the main
+ *                                segment's xhr request
+ * @param {Function} trackInfoFn - a callback that receives track info
+ * @param {Function} timingInfoFn - a callback that receives timing info
+ * @param {Function} videoSegmentTimingInfoFn
+ *                   a callback that receives video timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {Function} audioSegmentTimingInfoFn
+ *                   a callback that receives audio timing info based on media times and
+ *                   any adjustments made by the transmuxer
+ * @param {Function} id3Fn - a callback that receives ID3 metadata
+ * @param {Function} captionsFn - a callback that receives captions
+ * @param {boolean}  isEndOfTimeline
+ *                   true if this segment represents the last segment in a timeline
+ * @param {Function} endedTimelineFn
+ *                   a callback made when a timeline is ended, will only be called if
+ *                   isEndOfTimeline is true
+ * @param {Function} dataFn - a callback that receives data from the main segment's xhr
+ *                            request, transmuxed if needed
+ * @param {Function} doneFn - a callback that is executed only once all requests have
+ *                            succeeded or failed
+ * @return {Function} a function that, when invoked, immediately aborts all
+ *                     outstanding requests
+ */
+
+const mediaSegmentRequest = ({
+  xhr,
+  xhrOptions,
+  decryptionWorker,
+  segment,
+  abortFn,
+  progressFn,
+  trackInfoFn,
+  timingInfoFn,
+  videoSegmentTimingInfoFn,
+  audioSegmentTimingInfoFn,
+  id3Fn,
+  captionsFn,
+  isEndOfTimeline,
+  endedTimelineFn,
+  dataFn,
+  doneFn,
+  onTransmuxerLog
+}) => {
+  const activeXhrs = [];
+  const finishProcessingFn = waitForCompletion({
+    activeXhrs,
+    decryptionWorker,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }); // optionally, request the decryption key
+
+  if (segment.key && !segment.key.bytes) {
+    const objects = [segment.key];
+    if (segment.map && !segment.map.bytes && segment.map.key && segment.map.key.resolvedUri === segment.key.resolvedUri) {
+      objects.push(segment.map.key);
+    }
+    const keyRequestOptions = merge(xhrOptions, {
+      uri: segment.key.resolvedUri,
+      responseType: 'arraybuffer',
+      requestType: 'segment-key'
+    });
+    const keyRequestCallback = handleKeyResponse(segment, objects, finishProcessingFn);
+    const keyXhr = xhr(keyRequestOptions, keyRequestCallback);
+    activeXhrs.push(keyXhr);
+  } // optionally, request the associated media init segment
+
+  if (segment.map && !segment.map.bytes) {
+    const differentMapKey = segment.map.key && (!segment.key || segment.key.resolvedUri !== segment.map.key.resolvedUri);
+    if (differentMapKey) {
+      const mapKeyRequestOptions = merge(xhrOptions, {
+        uri: segment.map.key.resolvedUri,
+        responseType: 'arraybuffer',
+        requestType: 'segment-key'
+      });
+      const mapKeyRequestCallback = handleKeyResponse(segment, [segment.map.key], finishProcessingFn);
+      const mapKeyXhr = xhr(mapKeyRequestOptions, mapKeyRequestCallback);
+      activeXhrs.push(mapKeyXhr);
+    }
+    const initSegmentOptions = merge(xhrOptions, {
+      uri: segment.map.resolvedUri,
+      responseType: 'arraybuffer',
+      headers: segmentXhrHeaders(segment.map),
+      requestType: 'segment-media-initialization'
+    });
+    const initSegmentRequestCallback = handleInitSegmentResponse({
+      segment,
+      finishProcessingFn
+    });
+    const initSegmentXhr = xhr(initSegmentOptions, initSegmentRequestCallback);
+    activeXhrs.push(initSegmentXhr);
+  }
+  const segmentRequestOptions = merge(xhrOptions, {
+    uri: segment.part && segment.part.resolvedUri || segment.resolvedUri,
+    responseType: 'arraybuffer',
+    headers: segmentXhrHeaders(segment),
+    requestType: 'segment'
+  });
+  const segmentRequestCallback = handleSegmentResponse({
+    segment,
+    finishProcessingFn,
+    responseType: segmentRequestOptions.responseType
+  });
+  const segmentXhr = xhr(segmentRequestOptions, segmentRequestCallback);
+  segmentXhr.addEventListener('progress', handleProgress({
+    segment,
+    progressFn,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn
+  }));
+  activeXhrs.push(segmentXhr); // since all parts of the request must be considered, but should not make callbacks
+  // multiple times, provide a shared state object
+
+  const loadendState = {};
+  activeXhrs.forEach(activeXhr => {
+    activeXhr.addEventListener('loadend', handleLoadEnd({
+      loadendState,
+      abortFn
+    }));
+  });
+  return () => abortAll(activeXhrs);
+};
+
+/**
+ * @file - codecs.js - Handles tasks regarding codec strings such as translating them to
+ * codec strings, or translating codec strings into objects that can be examined.
+ */
+const logFn$1 = logger('CodecUtils');
+/**
+ * Returns a set of codec strings parsed from the playlist or the default
+ * codec strings if no codecs were specified in the playlist
+ *
+ * @param {Playlist} media the current media playlist
+ * @return {Object} an object with the video and audio codecs
+ */
+
+const getCodecs = function (media) {
+  // if the codecs were explicitly specified, use them instead of the
+  // defaults
+  const mediaAttributes = media.attributes || {};
+  if (mediaAttributes.CODECS) {
+    return parseCodecs(mediaAttributes.CODECS);
+  }
+};
+const isMaat = (main, media) => {
+  const mediaAttributes = media.attributes || {};
+  return main && main.mediaGroups && main.mediaGroups.AUDIO && mediaAttributes.AUDIO && main.mediaGroups.AUDIO[mediaAttributes.AUDIO];
+};
+const isMuxed = (main, media) => {
+  if (!isMaat(main, media)) {
+    return true;
+  }
+  const mediaAttributes = media.attributes || {};
+  const audioGroup = main.mediaGroups.AUDIO[mediaAttributes.AUDIO];
+  for (const groupId in audioGroup) {
+    // If an audio group has a URI (the case for HLS, as HLS will use external playlists),
+    // or there are listed playlists (the case for DASH, as the manifest will have already
+    // provided all of the details necessary to generate the audio playlist, as opposed to
+    // HLS' externally requested playlists), then the content is demuxed.
+    if (!audioGroup[groupId].uri && !audioGroup[groupId].playlists) {
+      return true;
+    }
+  }
+  return false;
+};
+const unwrapCodecList = function (codecList) {
+  const codecs = {};
+  codecList.forEach(({
+    mediaType,
+    type,
+    details
+  }) => {
+    codecs[mediaType] = codecs[mediaType] || [];
+    codecs[mediaType].push(translateLegacyCodec(`${type}${details}`));
+  });
+  Object.keys(codecs).forEach(function (mediaType) {
+    if (codecs[mediaType].length > 1) {
+      logFn$1(`multiple ${mediaType} codecs found as attributes: ${codecs[mediaType].join(', ')}. Setting playlist codecs to null so that we wait for mux.js to probe segments for real codecs.`);
+      codecs[mediaType] = null;
+      return;
+    }
+    codecs[mediaType] = codecs[mediaType][0];
+  });
+  return codecs;
+};
+const codecCount = function (codecObj) {
+  let count = 0;
+  if (codecObj.audio) {
+    count++;
+  }
+  if (codecObj.video) {
+    count++;
+  }
+  return count;
+};
+/**
+ * Calculates the codec strings for a working configuration of
+ * SourceBuffers to play variant streams in a main playlist. If
+ * there is no possible working configuration, an empty object will be
+ * returned.
+ *
+ * @param main {Object} the m3u8 object for the main playlist
+ * @param media {Object} the m3u8 object for the variant playlist
+ * @return {Object} the codec strings.
+ *
+ * @private
+ */
+
+const codecsForPlaylist = function (main, media) {
+  const mediaAttributes = media.attributes || {};
+  const codecInfo = unwrapCodecList(getCodecs(media) || []); // HLS with multiple-audio tracks must always get an audio codec.
+  // Put another way, there is no way to have a video-only multiple-audio HLS!
+
+  if (isMaat(main, media) && !codecInfo.audio) {
+    if (!isMuxed(main, media)) {
+      // It is possible for codecs to be specified on the audio media group playlist but
+      // not on the rendition playlist. This is mostly the case for DASH, where audio and
+      // video are always separate (and separately specified).
+      const defaultCodecs = unwrapCodecList(codecsFromDefault(main, mediaAttributes.AUDIO) || []);
+      if (defaultCodecs.audio) {
+        codecInfo.audio = defaultCodecs.audio;
+      }
+    }
+  }
+  return codecInfo;
+};
+const logFn = logger('PlaylistSelector');
+const representationToString = function (representation) {
+  if (!representation || !representation.playlist) {
+    return;
+  }
+  const playlist = representation.playlist;
+  return JSON.stringify({
+    id: playlist.id,
+    bandwidth: representation.bandwidth,
+    width: representation.width,
+    height: representation.height,
+    codecs: playlist.attributes && playlist.attributes.CODECS || ''
+  });
+}; // Utilities
+
+/**
+ * Returns the CSS value for the specified property on an element
+ * using `getComputedStyle`. Firefox has a long-standing issue where
+ * getComputedStyle() may return null when running in an iframe with
+ * `display: none`.
+ *
+ * @see https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+ * @param {HTMLElement} el the htmlelement to work on
+ * @param {string} the proprety to get the style for
+ */
+
+const safeGetComputedStyle = function (el, property) {
+  if (!el) {
+    return '';
+  }
+  const result = window$1.getComputedStyle(el);
+  if (!result) {
+    return '';
+  }
+  return result[property];
+};
+/**
+ * Resuable stable sort function
+ *
+ * @param {Playlists} array
+ * @param {Function} sortFn Different comparators
+ * @function stableSort
+ */
+
+const stableSort = function (array, sortFn) {
+  const newArray = array.slice();
+  array.sort(function (left, right) {
+    const cmp = sortFn(left, right);
+    if (cmp === 0) {
+      return newArray.indexOf(left) - newArray.indexOf(right);
+    }
+    return cmp;
+  });
+};
+/**
+ * A comparator function to sort two playlist object by bandwidth.
+ *
+ * @param {Object} left a media playlist object
+ * @param {Object} right a media playlist object
+ * @return {number} Greater than zero if the bandwidth attribute of
+ * left is greater than the corresponding attribute of right. Less
+ * than zero if the bandwidth of right is greater than left and
+ * exactly zero if the two are equal.
+ */
+
+const comparePlaylistBandwidth = function (left, right) {
+  let leftBandwidth;
+  let rightBandwidth;
+  if (left.attributes.BANDWIDTH) {
+    leftBandwidth = left.attributes.BANDWIDTH;
+  }
+  leftBandwidth = leftBandwidth || window$1.Number.MAX_VALUE;
+  if (right.attributes.BANDWIDTH) {
+    rightBandwidth = right.attributes.BANDWIDTH;
+  }
+  rightBandwidth = rightBandwidth || window$1.Number.MAX_VALUE;
+  return leftBandwidth - rightBandwidth;
+};
+/**
+ * A comparator function to sort two playlist object by resolution (width).
+ *
+ * @param {Object} left a media playlist object
+ * @param {Object} right a media playlist object
+ * @return {number} Greater than zero if the resolution.width attribute of
+ * left is greater than the corresponding attribute of right. Less
+ * than zero if the resolution.width of right is greater than left and
+ * exactly zero if the two are equal.
+ */
+
+const comparePlaylistResolution = function (left, right) {
+  let leftWidth;
+  let rightWidth;
+  if (left.attributes.RESOLUTION && left.attributes.RESOLUTION.width) {
+    leftWidth = left.attributes.RESOLUTION.width;
+  }
+  leftWidth = leftWidth || window$1.Number.MAX_VALUE;
+  if (right.attributes.RESOLUTION && right.attributes.RESOLUTION.width) {
+    rightWidth = right.attributes.RESOLUTION.width;
+  }
+  rightWidth = rightWidth || window$1.Number.MAX_VALUE; // NOTE - Fallback to bandwidth sort as appropriate in cases where multiple renditions
+  // have the same media dimensions/ resolution
+
+  if (leftWidth === rightWidth && left.attributes.BANDWIDTH && right.attributes.BANDWIDTH) {
+    return left.attributes.BANDWIDTH - right.attributes.BANDWIDTH;
+  }
+  return leftWidth - rightWidth;
+};
+/**
+ * Chooses the appropriate media playlist based on bandwidth and player size
+ *
+ * @param {Object} main
+ *        Object representation of the main manifest
+ * @param {number} playerBandwidth
+ *        Current calculated bandwidth of the player
+ * @param {number} playerWidth
+ *        Current width of the player element (should account for the device pixel ratio)
+ * @param {number} playerHeight
+ *        Current height of the player element (should account for the device pixel ratio)
+ * @param {boolean} limitRenditionByPlayerDimensions
+ *        True if the player width and height should be used during the selection, false otherwise
+ * @param {Object} playlistController
+ *        the current playlistController object
+ * @return {Playlist} the highest bitrate playlist less than the
+ * currently detected bandwidth, accounting for some amount of
+ * bandwidth variance
+ */
+
+let simpleSelector = function (main, playerBandwidth, playerWidth, playerHeight, limitRenditionByPlayerDimensions, playlistController) {
+  // If we end up getting called before `main` is available, exit early
+  if (!main) {
+    return;
+  }
+  const options = {
+    bandwidth: playerBandwidth,
+    width: playerWidth,
+    height: playerHeight,
+    limitRenditionByPlayerDimensions
+  };
+  let playlists = main.playlists; // if playlist is audio only, select between currently active audio group playlists.
+
+  if (Playlist.isAudioOnly(main)) {
+    playlists = playlistController.getAudioTrackPlaylists_(); // add audioOnly to options so that we log audioOnly: true
+    // at the buttom of this function for debugging.
+
+    options.audioOnly = true;
+  } // convert the playlists to an intermediary representation to make comparisons easier
+
+  let sortedPlaylistReps = playlists.map(playlist => {
+    let bandwidth;
+    const width = playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.width;
+    const height = playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.height;
+    bandwidth = playlist.attributes && playlist.attributes.BANDWIDTH;
+    bandwidth = bandwidth || window$1.Number.MAX_VALUE;
+    return {
+      bandwidth,
+      width,
+      height,
+      playlist
+    };
+  });
+  stableSort(sortedPlaylistReps, (left, right) => left.bandwidth - right.bandwidth); // filter out any playlists that have been excluded due to
+  // incompatible configurations
+
+  sortedPlaylistReps = sortedPlaylistReps.filter(rep => !Playlist.isIncompatible(rep.playlist)); // filter out any playlists that have been disabled manually through the representations
+  // api or excluded temporarily due to playback errors.
+
+  let enabledPlaylistReps = sortedPlaylistReps.filter(rep => Playlist.isEnabled(rep.playlist));
+  if (!enabledPlaylistReps.length) {
+    // if there are no enabled playlists, then they have all been excluded or disabled
+    // by the user through the representations api. In this case, ignore exclusion and
+    // fallback to what the user wants by using playlists the user has not disabled.
+    enabledPlaylistReps = sortedPlaylistReps.filter(rep => !Playlist.isDisabled(rep.playlist));
+  } // filter out any variant that has greater effective bitrate
+  // than the current estimated bandwidth
+
+  const bandwidthPlaylistReps = enabledPlaylistReps.filter(rep => rep.bandwidth * Config.BANDWIDTH_VARIANCE < playerBandwidth);
+  let highestRemainingBandwidthRep = bandwidthPlaylistReps[bandwidthPlaylistReps.length - 1]; // get all of the renditions with the same (highest) bandwidth
+  // and then taking the very first element
+
+  const bandwidthBestRep = bandwidthPlaylistReps.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0]; // if we're not going to limit renditions by player size, make an early decision.
+
+  if (limitRenditionByPlayerDimensions === false) {
+    const chosenRep = bandwidthBestRep || enabledPlaylistReps[0] || sortedPlaylistReps[0];
+    if (chosenRep && chosenRep.playlist) {
+      let type = 'sortedPlaylistReps';
+      if (bandwidthBestRep) {
+        type = 'bandwidthBestRep';
+      }
+      if (enabledPlaylistReps[0]) {
+        type = 'enabledPlaylistReps';
+      }
+      logFn(`choosing ${representationToString(chosenRep)} using ${type} with options`, options);
+      return chosenRep.playlist;
+    }
+    logFn('could not choose a playlist with options', options);
+    return null;
+  } // filter out playlists without resolution information
+
+  const haveResolution = bandwidthPlaylistReps.filter(rep => rep.width && rep.height); // sort variants by resolution
+
+  stableSort(haveResolution, (left, right) => left.width - right.width); // if we have the exact resolution as the player use it
+
+  const resolutionBestRepList = haveResolution.filter(rep => rep.width === playerWidth && rep.height === playerHeight);
+  highestRemainingBandwidthRep = resolutionBestRepList[resolutionBestRepList.length - 1]; // ensure that we pick the highest bandwidth variant that have exact resolution
+
+  const resolutionBestRep = resolutionBestRepList.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0];
+  let resolutionPlusOneList;
+  let resolutionPlusOneSmallest;
+  let resolutionPlusOneRep; // find the smallest variant that is larger than the player
+  // if there is no match of exact resolution
+
+  if (!resolutionBestRep) {
+    resolutionPlusOneList = haveResolution.filter(rep => rep.width > playerWidth || rep.height > playerHeight); // find all the variants have the same smallest resolution
+
+    resolutionPlusOneSmallest = resolutionPlusOneList.filter(rep => rep.width === resolutionPlusOneList[0].width && rep.height === resolutionPlusOneList[0].height); // ensure that we also pick the highest bandwidth variant that
+    // is just-larger-than the video player
+
+    highestRemainingBandwidthRep = resolutionPlusOneSmallest[resolutionPlusOneSmallest.length - 1];
+    resolutionPlusOneRep = resolutionPlusOneSmallest.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0];
+  }
+  let leastPixelDiffRep; // If this selector proves to be better than others,
+  // resolutionPlusOneRep and resolutionBestRep and all
+  // the code involving them should be removed.
+
+  if (playlistController.leastPixelDiffSelector) {
+    // find the variant that is closest to the player's pixel size
+    const leastPixelDiffList = haveResolution.map(rep => {
+      rep.pixelDiff = Math.abs(rep.width - playerWidth) + Math.abs(rep.height - playerHeight);
+      return rep;
+    }); // get the highest bandwidth, closest resolution playlist
+
+    stableSort(leastPixelDiffList, (left, right) => {
+      // sort by highest bandwidth if pixelDiff is the same
+      if (left.pixelDiff === right.pixelDiff) {
+        return right.bandwidth - left.bandwidth;
+      }
+      return left.pixelDiff - right.pixelDiff;
+    });
+    leastPixelDiffRep = leastPixelDiffList[0];
+  } // fallback chain of variants
+
+  const chosenRep = leastPixelDiffRep || resolutionPlusOneRep || resolutionBestRep || bandwidthBestRep || enabledPlaylistReps[0] || sortedPlaylistReps[0];
+  if (chosenRep && chosenRep.playlist) {
+    let type = 'sortedPlaylistReps';
+    if (leastPixelDiffRep) {
+      type = 'leastPixelDiffRep';
+    } else if (resolutionPlusOneRep) {
+      type = 'resolutionPlusOneRep';
+    } else if (resolutionBestRep) {
+      type = 'resolutionBestRep';
+    } else if (bandwidthBestRep) {
+      type = 'bandwidthBestRep';
+    } else if (enabledPlaylistReps[0]) {
+      type = 'enabledPlaylistReps';
+    }
+    logFn(`choosing ${representationToString(chosenRep)} using ${type} with options`, options);
+    return chosenRep.playlist;
+  }
+  logFn('could not choose a playlist with options', options);
+  return null;
+};
+
+/**
+ * Chooses the appropriate media playlist based on the most recent
+ * bandwidth estimate and the player size.
+ *
+ * Expects to be called within the context of an instance of VhsHandler
+ *
+ * @return {Playlist} the highest bitrate playlist less than the
+ * currently detected bandwidth, accounting for some amount of
+ * bandwidth variance
+ */
+
+const lastBandwidthSelector = function () {
+  let pixelRatio = this.useDevicePixelRatio ? window$1.devicePixelRatio || 1 : 1;
+  if (!isNaN(this.customPixelRatio)) {
+    pixelRatio = this.customPixelRatio;
+  }
+  return simpleSelector(this.playlists.main, this.systemBandwidth, parseInt(safeGetComputedStyle(this.tech_.el(), 'width'), 10) * pixelRatio, parseInt(safeGetComputedStyle(this.tech_.el(), 'height'), 10) * pixelRatio, this.limitRenditionByPlayerDimensions, this.playlistController_);
+};
+/**
+ * Chooses the appropriate media playlist based on an
+ * exponential-weighted moving average of the bandwidth after
+ * filtering for player size.
+ *
+ * Expects to be called within the context of an instance of VhsHandler
+ *
+ * @param {number} decay - a number between 0 and 1. Higher values of
+ * this parameter will cause previous bandwidth estimates to lose
+ * significance more quickly.
+ * @return {Function} a function which can be invoked to create a new
+ * playlist selector function.
+ * @see https://en.wikipedia.org/wiki/Moving_average#Exponential_moving_average
+ */
+
+const movingAverageBandwidthSelector = function (decay) {
+  let average = -1;
+  let lastSystemBandwidth = -1;
+  if (decay < 0 || decay > 1) {
+    throw new Error('Moving average bandwidth decay must be between 0 and 1.');
+  }
+  return function () {
+    let pixelRatio = this.useDevicePixelRatio ? window$1.devicePixelRatio || 1 : 1;
+    if (!isNaN(this.customPixelRatio)) {
+      pixelRatio = this.customPixelRatio;
+    }
+    if (average < 0) {
+      average = this.systemBandwidth;
+      lastSystemBandwidth = this.systemBandwidth;
+    } // stop the average value from decaying for every 250ms
+    // when the systemBandwidth is constant
+    // and
+    // stop average from setting to a very low value when the
+    // systemBandwidth becomes 0 in case of chunk cancellation
+
+    if (this.systemBandwidth > 0 && this.systemBandwidth !== lastSystemBandwidth) {
+      average = decay * this.systemBandwidth + (1 - decay) * average;
+      lastSystemBandwidth = this.systemBandwidth;
+    }
+    return simpleSelector(this.playlists.main, average, parseInt(safeGetComputedStyle(this.tech_.el(), 'width'), 10) * pixelRatio, parseInt(safeGetComputedStyle(this.tech_.el(), 'height'), 10) * pixelRatio, this.limitRenditionByPlayerDimensions, this.playlistController_);
+  };
+};
+/**
+ * Chooses the appropriate media playlist based on the potential to rebuffer
+ *
+ * @param {Object} settings
+ *        Object of information required to use this selector
+ * @param {Object} settings.main
+ *        Object representation of the main manifest
+ * @param {number} settings.currentTime
+ *        The current time of the player
+ * @param {number} settings.bandwidth
+ *        Current measured bandwidth
+ * @param {number} settings.duration
+ *        Duration of the media
+ * @param {number} settings.segmentDuration
+ *        Segment duration to be used in round trip time calculations
+ * @param {number} settings.timeUntilRebuffer
+ *        Time left in seconds until the player has to rebuffer
+ * @param {number} settings.currentTimeline
+ *        The current timeline segments are being loaded from
+ * @param {SyncController} settings.syncController
+ *        SyncController for determining if we have a sync point for a given playlist
+ * @return {Object|null}
+ *         {Object} return.playlist
+ *         The highest bandwidth playlist with the least amount of rebuffering
+ *         {Number} return.rebufferingImpact
+ *         The amount of time in seconds switching to this playlist will rebuffer. A
+ *         negative value means that switching will cause zero rebuffering.
+ */
+
+const minRebufferMaxBandwidthSelector = function (settings) {
+  const {
+    main,
+    currentTime,
+    bandwidth,
+    duration,
+    segmentDuration,
+    timeUntilRebuffer,
+    currentTimeline,
+    syncController
+  } = settings; // filter out any playlists that have been excluded due to
+  // incompatible configurations
+
+  const compatiblePlaylists = main.playlists.filter(playlist => !Playlist.isIncompatible(playlist)); // filter out any playlists that have been disabled manually through the representations
+  // api or excluded temporarily due to playback errors.
+
+  let enabledPlaylists = compatiblePlaylists.filter(Playlist.isEnabled);
+  if (!enabledPlaylists.length) {
+    // if there are no enabled playlists, then they have all been excluded or disabled
+    // by the user through the representations api. In this case, ignore exclusion and
+    // fallback to what the user wants by using playlists the user has not disabled.
+    enabledPlaylists = compatiblePlaylists.filter(playlist => !Playlist.isDisabled(playlist));
+  }
+  const bandwidthPlaylists = enabledPlaylists.filter(Playlist.hasAttribute.bind(null, 'BANDWIDTH'));
+  const rebufferingEstimates = bandwidthPlaylists.map(playlist => {
+    const syncPoint = syncController.getSyncPoint(playlist, duration, currentTimeline, currentTime); // If there is no sync point for this playlist, switching to it will require a
+    // sync request first. This will double the request time
+
+    const numRequests = syncPoint ? 1 : 2;
+    const requestTimeEstimate = Playlist.estimateSegmentRequestTime(segmentDuration, bandwidth, playlist);
+    const rebufferingImpact = requestTimeEstimate * numRequests - timeUntilRebuffer;
+    return {
+      playlist,
+      rebufferingImpact
+    };
+  });
+  const noRebufferingPlaylists = rebufferingEstimates.filter(estimate => estimate.rebufferingImpact <= 0); // Sort by bandwidth DESC
+
+  stableSort(noRebufferingPlaylists, (a, b) => comparePlaylistBandwidth(b.playlist, a.playlist));
+  if (noRebufferingPlaylists.length) {
+    return noRebufferingPlaylists[0];
+  }
+  stableSort(rebufferingEstimates, (a, b) => a.rebufferingImpact - b.rebufferingImpact);
+  return rebufferingEstimates[0] || null;
+};
+/**
+ * Chooses the appropriate media playlist, which in this case is the lowest bitrate
+ * one with video.  If no renditions with video exist, return the lowest audio rendition.
+ *
+ * Expects to be called within the context of an instance of VhsHandler
+ *
+ * @return {Object|null}
+ *         {Object} return.playlist
+ *         The lowest bitrate playlist that contains a video codec.  If no such rendition
+ *         exists pick the lowest audio rendition.
+ */
+
+const lowestBitrateCompatibleVariantSelector = function () {
+  // filter out any playlists that have been excluded due to
+  // incompatible configurations or playback errors
+  const playlists = this.playlists.main.playlists.filter(Playlist.isEnabled); // Sort ascending by bitrate
+
+  stableSort(playlists, (a, b) => comparePlaylistBandwidth(a, b)); // Parse and assume that playlists with no video codec have no video
+  // (this is not necessarily true, although it is generally true).
+  //
+  // If an entire manifest has no valid videos everything will get filtered
+  // out.
+
+  const playlistsWithVideo = playlists.filter(playlist => !!codecsForPlaylist(this.playlists.main, playlist).video);
+  return playlistsWithVideo[0] || null;
+};
+
+/**
+ * Combine all segments into a single Uint8Array
+ *
+ * @param {Object} segmentObj
+ * @return {Uint8Array} concatenated bytes
+ * @private
+ */
+const concatSegments = segmentObj => {
+  let offset = 0;
+  let tempBuffer;
+  if (segmentObj.bytes) {
+    tempBuffer = new Uint8Array(segmentObj.bytes); // combine the individual segments into one large typed-array
+
+    segmentObj.segments.forEach(segment => {
+      tempBuffer.set(segment, offset);
+      offset += segment.byteLength;
+    });
+  }
+  return tempBuffer;
+};
+/**
+ * Example:
+ * https://host.com/path1/path2/path3/segment.ts?arg1=val1
+ * -->
+ * path3/segment.ts
+ *
+ * @param resolvedUri
+ * @return {string}
+ */
+
+function compactSegmentUrlDescription(resolvedUri) {
+  try {
+    return new URL(resolvedUri).pathname.split('/').slice(-2).join('/');
+  } catch (e) {
+    return '';
+  }
+}
+
+/**
+ * @file text-tracks.js
+ */
+/**
+ * Create captions text tracks on video.js if they do not exist
+ *
+ * @param {Object} inbandTextTracks a reference to current inbandTextTracks
+ * @param {Object} tech the video.js tech
+ * @param {Object} captionStream the caption stream to create
+ * @private
+ */
+
+const createCaptionsTrackIfNotExists = function (inbandTextTracks, tech, captionStream) {
+  if (!inbandTextTracks[captionStream]) {
+    tech.trigger({
+      type: 'usage',
+      name: 'vhs-608'
+    });
+    let instreamId = captionStream; // we need to translate SERVICEn for 708 to how mux.js currently labels them
+
+    if (/^cc708_/.test(captionStream)) {
+      instreamId = 'SERVICE' + captionStream.split('_')[1];
+    }
+    const track = tech.textTracks().getTrackById(instreamId);
+    if (track) {
+      // Resuse an existing track with a CC# id because this was
+      // very likely created by videojs-contrib-hls from information
+      // in the m3u8 for us to use
+      inbandTextTracks[captionStream] = track;
+    } else {
+      // This section gets called when we have caption services that aren't specified in the manifest.
+      // Manifest level caption services are handled in media-groups.js under CLOSED-CAPTIONS.
+      const captionServices = tech.options_.vhs && tech.options_.vhs.captionServices || {};
+      let label = captionStream;
+      let language = captionStream;
+      let def = false;
+      const captionService = captionServices[instreamId];
+      if (captionService) {
+        label = captionService.label;
+        language = captionService.language;
+        def = captionService.default;
+      } // Otherwise, create a track with the default `CC#` label and
+      // without a language
+
+      inbandTextTracks[captionStream] = tech.addRemoteTextTrack({
+        kind: 'captions',
+        id: instreamId,
+        // TODO: investigate why this doesn't seem to turn the caption on by default
+        default: def,
+        label,
+        language
+      }, false).track;
+    }
+  }
+};
+/**
+ * Add caption text track data to a source handler given an array of captions
+ *
+ * @param {Object}
+ *   @param {Object} inbandTextTracks the inband text tracks
+ *   @param {number} timestampOffset the timestamp offset of the source buffer
+ *   @param {Array} captionArray an array of caption data
+ * @private
+ */
+
+const addCaptionData = function ({
+  inbandTextTracks,
+  captionArray,
+  timestampOffset
+}) {
+  if (!captionArray) {
+    return;
+  }
+  const Cue = window$1.WebKitDataCue || window$1.VTTCue;
+  captionArray.forEach(caption => {
+    const track = caption.stream; // in CEA 608 captions, video.js/mux.js sends a content array
+    // with positioning data
+
+    if (caption.content) {
+      caption.content.forEach(value => {
+        const cue = new Cue(caption.startTime + timestampOffset, caption.endTime + timestampOffset, value.text);
+        cue.line = value.line;
+        cue.align = 'left';
+        cue.position = value.position;
+        cue.positionAlign = 'line-left';
+        inbandTextTracks[track].addCue(cue);
+      });
+    } else {
+      // otherwise, a text value with combined captions is sent
+      inbandTextTracks[track].addCue(new Cue(caption.startTime + timestampOffset, caption.endTime + timestampOffset, caption.text));
+    }
+  });
+};
+/**
+ * Define properties on a cue for backwards compatability,
+ * but warn the user that the way that they are using it
+ * is depricated and will be removed at a later date.
+ *
+ * @param {Cue} cue the cue to add the properties on
+ * @private
+ */
+
+const deprecateOldCue = function (cue) {
+  Object.defineProperties(cue.frame, {
+    id: {
+      get() {
+        videojs.log.warn('cue.frame.id is deprecated. Use cue.value.key instead.');
+        return cue.value.key;
+      }
+    },
+    value: {
+      get() {
+        videojs.log.warn('cue.frame.value is deprecated. Use cue.value.data instead.');
+        return cue.value.data;
+      }
+    },
+    privateData: {
+      get() {
+        videojs.log.warn('cue.frame.privateData is deprecated. Use cue.value.data instead.');
+        return cue.value.data;
+      }
+    }
+  });
+};
+/**
+ * Add metadata text track data to a source handler given an array of metadata
+ *
+ * @param {Object}
+ *   @param {Object} inbandTextTracks the inband text tracks
+ *   @param {Array} metadataArray an array of meta data
+ *   @param {number} timestampOffset the timestamp offset of the source buffer
+ *   @param {number} videoDuration the duration of the video
+ * @private
+ */
+
+const addMetadata = ({
+  inbandTextTracks,
+  metadataArray,
+  timestampOffset,
+  videoDuration
+}) => {
+  if (!metadataArray) {
+    return;
+  }
+  const Cue = window$1.WebKitDataCue || window$1.VTTCue;
+  const metadataTrack = inbandTextTracks.metadataTrack_;
+  if (!metadataTrack) {
+    return;
+  }
+  metadataArray.forEach(metadata => {
+    const time = metadata.cueTime + timestampOffset; // if time isn't a finite number between 0 and Infinity, like NaN,
+    // ignore this bit of metadata.
+    // This likely occurs when you have an non-timed ID3 tag like TIT2,
+    // which is the "Title/Songname/Content description" frame
+
+    if (typeof time !== 'number' || window$1.isNaN(time) || time < 0 || !(time < Infinity)) {
+      return;
+    } // If we have no frames, we can't create a cue.
+
+    if (!metadata.frames || !metadata.frames.length) {
+      return;
+    }
+    metadata.frames.forEach(frame => {
+      const cue = new Cue(time, time, frame.value || frame.url || frame.data || '');
+      cue.frame = frame;
+      cue.value = frame;
+      deprecateOldCue(cue);
+      metadataTrack.addCue(cue);
+    });
+  });
+  if (!metadataTrack.cues || !metadataTrack.cues.length) {
+    return;
+  } // Updating the metadeta cues so that
+  // the endTime of each cue is the startTime of the next cue
+  // the endTime of last cue is the duration of the video
+
+  const cues = metadataTrack.cues;
+  const cuesArray = []; // Create a copy of the TextTrackCueList...
+  // ...disregarding cues with a falsey value
+
+  for (let i = 0; i < cues.length; i++) {
+    if (cues[i]) {
+      cuesArray.push(cues[i]);
+    }
+  } // Group cues by their startTime value
+
+  const cuesGroupedByStartTime = cuesArray.reduce((obj, cue) => {
+    const timeSlot = obj[cue.startTime] || [];
+    timeSlot.push(cue);
+    obj[cue.startTime] = timeSlot;
+    return obj;
+  }, {}); // Sort startTimes by ascending order
+
+  const sortedStartTimes = Object.keys(cuesGroupedByStartTime).sort((a, b) => Number(a) - Number(b)); // Map each cue group's endTime to the next group's startTime
+
+  sortedStartTimes.forEach((startTime, idx) => {
+    const cueGroup = cuesGroupedByStartTime[startTime];
+    const finiteDuration = isFinite(videoDuration) ? videoDuration : startTime;
+    const nextTime = Number(sortedStartTimes[idx + 1]) || finiteDuration; // Map each cue's endTime the next group's startTime
+
+    cueGroup.forEach(cue => {
+      cue.endTime = nextTime;
+    });
+  });
+}; // object for mapping daterange attributes
+
+const dateRangeAttr = {
+  id: 'ID',
+  class: 'CLASS',
+  startDate: 'START-DATE',
+  duration: 'DURATION',
+  endDate: 'END-DATE',
+  endOnNext: 'END-ON-NEXT',
+  plannedDuration: 'PLANNED-DURATION',
+  scte35Out: 'SCTE35-OUT',
+  scte35In: 'SCTE35-IN'
+};
+const dateRangeKeysToOmit = new Set(['id', 'class', 'startDate', 'duration', 'endDate', 'endOnNext', 'startTime', 'endTime', 'processDateRange']);
+/**
+ * Add DateRange metadata text track to a source handler given an array of metadata
+ *
+ * @param {Object}
+ *   @param {Object} inbandTextTracks the inband text tracks
+ *   @param {Array} dateRanges parsed media playlist
+ * @private
+ */
+
+const addDateRangeMetadata = ({
+  inbandTextTracks,
+  dateRanges
+}) => {
+  const metadataTrack = inbandTextTracks.metadataTrack_;
+  if (!metadataTrack) {
+    return;
+  }
+  const Cue = window$1.WebKitDataCue || window$1.VTTCue;
+  dateRanges.forEach(dateRange => {
+    // we generate multiple cues for each date range with different attributes
+    for (const key of Object.keys(dateRange)) {
+      if (dateRangeKeysToOmit.has(key)) {
+        continue;
+      }
+      const cue = new Cue(dateRange.startTime, dateRange.endTime, '');
+      cue.id = dateRange.id;
+      cue.type = 'com.apple.quicktime.HLS';
+      cue.value = {
+        key: dateRangeAttr[key],
+        data: dateRange[key]
+      };
+      if (key === 'scte35Out' || key === 'scte35In') {
+        cue.value.data = new Uint8Array(cue.value.data.match(/[\da-f]{2}/gi)).buffer;
+      }
+      metadataTrack.addCue(cue);
+    }
+    dateRange.processDateRange();
+  });
+};
+/**
+ * Create metadata text track on video.js if it does not exist
+ *
+ * @param {Object} inbandTextTracks a reference to current inbandTextTracks
+ * @param {string} dispatchType the inband metadata track dispatch type
+ * @param {Object} tech the video.js tech
+ * @private
+ */
+
+const createMetadataTrackIfNotExists = (inbandTextTracks, dispatchType, tech) => {
+  if (inbandTextTracks.metadataTrack_) {
+    return;
+  }
+  inbandTextTracks.metadataTrack_ = tech.addRemoteTextTrack({
+    kind: 'metadata',
+    label: 'Timed Metadata'
+  }, false).track;
+  if (!videojs.browser.IS_ANY_SAFARI) {
+    inbandTextTracks.metadataTrack_.inBandMetadataTrackDispatchType = dispatchType;
+  }
+};
+/**
+ * Remove cues from a track on video.js.
+ *
+ * @param {Double} start start of where we should remove the cue
+ * @param {Double} end end of where the we should remove the cue
+ * @param {Object} track the text track to remove the cues from
+ * @private
+ */
+
+const removeCuesFromTrack = function (start, end, track) {
+  let i;
+  let cue;
+  if (!track) {
+    return;
+  }
+  if (!track.cues) {
+    return;
+  }
+  i = track.cues.length;
+  while (i--) {
+    cue = track.cues[i]; // Remove any cue within the provided start and end time
+
+    if (cue.startTime >= start && cue.endTime <= end) {
+      track.removeCue(cue);
+    }
+  }
+};
+/**
+ * Remove duplicate cues from a track on video.js (a cue is considered a
+ * duplicate if it has the same time interval and text as another)
+ *
+ * @param {Object} track the text track to remove the duplicate cues from
+ * @private
+ */
+
+const removeDuplicateCuesFromTrack = function (track) {
+  const cues = track.cues;
+  if (!cues) {
+    return;
+  }
+  const uniqueCues = {};
+  for (let i = cues.length - 1; i >= 0; i--) {
+    const cue = cues[i];
+    const cueKey = `${cue.startTime}-${cue.endTime}-${cue.text}`;
+    if (uniqueCues[cueKey]) {
+      track.removeCue(cue);
+    } else {
+      uniqueCues[cueKey] = cue;
+    }
+  }
+};
+
+/**
+ * Returns a list of gops in the buffer that have a pts value of 3 seconds or more in
+ * front of current time.
+ *
+ * @param {Array} buffer
+ *        The current buffer of gop information
+ * @param {number} currentTime
+ *        The current time
+ * @param {Double} mapping
+ *        Offset to map display time to stream presentation time
+ * @return {Array}
+ *         List of gops considered safe to append over
+ */
+
+const gopsSafeToAlignWith = (buffer, currentTime, mapping) => {
+  if (typeof currentTime === 'undefined' || currentTime === null || !buffer.length) {
+    return [];
+  } // pts value for current time + 3 seconds to give a bit more wiggle room
+
+  const currentTimePts = Math.ceil((currentTime - mapping + 3) * ONE_SECOND_IN_TS);
+  let i;
+  for (i = 0; i < buffer.length; i++) {
+    if (buffer[i].pts > currentTimePts) {
+      break;
+    }
+  }
+  return buffer.slice(i);
+};
+/**
+ * Appends gop information (timing and byteLength) received by the transmuxer for the
+ * gops appended in the last call to appendBuffer
+ *
+ * @param {Array} buffer
+ *        The current buffer of gop information
+ * @param {Array} gops
+ *        List of new gop information
+ * @param {boolean} replace
+ *        If true, replace the buffer with the new gop information. If false, append the
+ *        new gop information to the buffer in the right location of time.
+ * @return {Array}
+ *         Updated list of gop information
+ */
+
+const updateGopBuffer = (buffer, gops, replace) => {
+  if (!gops.length) {
+    return buffer;
+  }
+  if (replace) {
+    // If we are in safe append mode, then completely overwrite the gop buffer
+    // with the most recent appeneded data. This will make sure that when appending
+    // future segments, we only try to align with gops that are both ahead of current
+    // time and in the last segment appended.
+    return gops.slice();
+  }
+  const start = gops[0].pts;
+  let i = 0;
+  for (i; i < buffer.length; i++) {
+    if (buffer[i].pts >= start) {
+      break;
+    }
+  }
+  return buffer.slice(0, i).concat(gops);
+};
+/**
+ * Removes gop information in buffer that overlaps with provided start and end
+ *
+ * @param {Array} buffer
+ *        The current buffer of gop information
+ * @param {Double} start
+ *        position to start the remove at
+ * @param {Double} end
+ *        position to end the remove at
+ * @param {Double} mapping
+ *        Offset to map display time to stream presentation time
+ */
+
+const removeGopBuffer = (buffer, start, end, mapping) => {
+  const startPts = Math.ceil((start - mapping) * ONE_SECOND_IN_TS);
+  const endPts = Math.ceil((end - mapping) * ONE_SECOND_IN_TS);
+  const updatedBuffer = buffer.slice();
+  let i = buffer.length;
+  while (i--) {
+    if (buffer[i].pts <= endPts) {
+      break;
+    }
+  }
+  if (i === -1) {
+    // no removal because end of remove range is before start of buffer
+    return updatedBuffer;
+  }
+  let j = i + 1;
+  while (j--) {
+    if (buffer[j].pts <= startPts) {
+      break;
+    }
+  } // clamp remove range start to 0 index
+
+  j = Math.max(j, 0);
+  updatedBuffer.splice(j, i - j + 1);
+  return updatedBuffer;
+};
+const shallowEqual = function (a, b) {
+  // if both are undefined
+  // or one or the other is undefined
+  // they are not equal
+  if (!a && !b || !a && b || a && !b) {
+    return false;
+  } // they are the same object and thus, equal
+
+  if (a === b) {
+    return true;
+  } // sort keys so we can make sure they have
+  // all the same keys later.
+
+  const akeys = Object.keys(a).sort();
+  const bkeys = Object.keys(b).sort(); // different number of keys, not equal
+
+  if (akeys.length !== bkeys.length) {
+    return false;
+  }
+  for (let i = 0; i < akeys.length; i++) {
+    const key = akeys[i]; // different sorted keys, not equal
+
+    if (key !== bkeys[i]) {
+      return false;
+    } // different values, not equal
+
+    if (a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+};
+
+// https://www.w3.org/TR/WebIDL-1/#quotaexceedederror
+const QUOTA_EXCEEDED_ERR = 22;
+
+/**
+ * The segment loader has no recourse except to fetch a segment in the
+ * current playlist and use the internal timestamps in that segment to
+ * generate a syncPoint. This function returns a good candidate index
+ * for that process.
+ *
+ * @param {Array} segments - the segments array from a playlist.
+ * @return {number} An index of a segment from the playlist to load
+ */
+
+const getSyncSegmentCandidate = function (currentTimeline, segments, targetTime) {
+  segments = segments || [];
+  const timelineSegments = [];
+  let time = 0;
+  for (let i = 0; i < segments.length; i++) {
+    const segment = segments[i];
+    if (currentTimeline === segment.timeline) {
+      timelineSegments.push(i);
+      time += segment.duration;
+      if (time > targetTime) {
+        return i;
+      }
+    }
+  }
+  if (timelineSegments.length === 0) {
+    return 0;
+  } // default to the last timeline segment
+
+  return timelineSegments[timelineSegments.length - 1];
+}; // In the event of a quota exceeded error, keep at least one second of back buffer. This
+// number was arbitrarily chosen and may be updated in the future, but seemed reasonable
+// as a start to prevent any potential issues with removing content too close to the
+// playhead.
+
+const MIN_BACK_BUFFER = 1; // in ms
+
+const CHECK_BUFFER_DELAY = 500;
+const finite = num => typeof num === 'number' && isFinite(num); // With most content hovering around 30fps, if a segment has a duration less than a half
+// frame at 30fps or one frame at 60fps, the bandwidth and throughput calculations will
+// not accurately reflect the rest of the content.
+
+const MIN_SEGMENT_DURATION_TO_SAVE_STATS = 1 / 60;
+const illegalMediaSwitch = (loaderType, startingMedia, trackInfo) => {
+  // Although these checks should most likely cover non 'main' types, for now it narrows
+  // the scope of our checks.
+  if (loaderType !== 'main' || !startingMedia || !trackInfo) {
+    return null;
+  }
+  if (!trackInfo.hasAudio && !trackInfo.hasVideo) {
+    return 'Neither audio nor video found in segment.';
+  }
+  if (startingMedia.hasVideo && !trackInfo.hasVideo) {
+    return 'Only audio found in segment when we expected video.' + ' We can\'t switch to audio only from a stream that had video.' + ' To get rid of this message, please add codec information to the manifest.';
+  }
+  if (!startingMedia.hasVideo && trackInfo.hasVideo) {
+    return 'Video found in segment when we expected only audio.' + ' We can\'t switch to a stream with video from an audio only stream.' + ' To get rid of this message, please add codec information to the manifest.';
+  }
+  return null;
+};
+/**
+ * Calculates a time value that is safe to remove from the back buffer without interrupting
+ * playback.
+ *
+ * @param {TimeRange} seekable
+ *        The current seekable range
+ * @param {number} currentTime
+ *        The current time of the player
+ * @param {number} targetDuration
+ *        The target duration of the current playlist
+ * @return {number}
+ *         Time that is safe to remove from the back buffer without interrupting playback
+ */
+
+const safeBackBufferTrimTime = (seekable, currentTime, targetDuration) => {
+  // 30 seconds before the playhead provides a safe default for trimming.
+  //
+  // Choosing a reasonable default is particularly important for high bitrate content and
+  // VOD videos/live streams with large windows, as the buffer may end up overfilled and
+  // throw an APPEND_BUFFER_ERR.
+  let trimTime = currentTime - Config.BACK_BUFFER_LENGTH;
+  if (seekable.length) {
+    // Some live playlists may have a shorter window of content than the full allowed back
+    // buffer. For these playlists, don't save content that's no longer within the window.
+    trimTime = Math.max(trimTime, seekable.start(0));
+  } // Don't remove within target duration of the current time to avoid the possibility of
+  // removing the GOP currently being played, as removing it can cause playback stalls.
+
+  const maxTrimTime = currentTime - targetDuration;
+  return Math.min(maxTrimTime, trimTime);
+};
+const segmentInfoString = segmentInfo => {
+  const {
+    startOfSegment,
+    duration,
+    segment,
+    part,
+    playlist: {
+      mediaSequence: seq,
+      id,
+      segments = []
+    },
+    mediaIndex: index,
+    partIndex,
+    timeline
+  } = segmentInfo;
+  const segmentLen = segments.length - 1;
+  let selection = 'mediaIndex/partIndex increment';
+  if (segmentInfo.getMediaInfoForTime) {
+    selection = `getMediaInfoForTime (${segmentInfo.getMediaInfoForTime})`;
+  } else if (segmentInfo.isSyncRequest) {
+    selection = 'getSyncSegmentCandidate (isSyncRequest)';
+  }
+  if (segmentInfo.independent) {
+    selection += ` with independent ${segmentInfo.independent}`;
+  }
+  const hasPartIndex = typeof partIndex === 'number';
+  const name = segmentInfo.segment.uri ? 'segment' : 'pre-segment';
+  const zeroBasedPartCount = hasPartIndex ? getKnownPartCount({
+    preloadSegment: segment
+  }) - 1 : 0;
+  return `${name} [${seq + index}/${seq + segmentLen}]` + (hasPartIndex ? ` part [${partIndex}/${zeroBasedPartCount}]` : '') + ` segment start/end [${segment.start} => ${segment.end}]` + (hasPartIndex ? ` part start/end [${part.start} => ${part.end}]` : '') + ` startOfSegment [${startOfSegment}]` + ` duration [${duration}]` + ` timeline [${timeline}]` + ` selected by [${selection}]` + ` playlist [${id}]`;
+};
+const timingInfoPropertyForMedia = mediaType => `${mediaType}TimingInfo`;
+/**
+ * Returns the timestamp offset to use for the segment.
+ *
+ * @param {number} segmentTimeline
+ *        The timeline of the segment
+ * @param {number} currentTimeline
+ *        The timeline currently being followed by the loader
+ * @param {number} startOfSegment
+ *        The estimated segment start
+ * @param {TimeRange[]} buffered
+ *        The loader's buffer
+ * @param {boolean} overrideCheck
+ *        If true, no checks are made to see if the timestamp offset value should be set,
+ *        but sets it directly to a value.
+ *
+ * @return {number|null}
+ *         Either a number representing a new timestamp offset, or null if the segment is
+ *         part of the same timeline
+ */
+
+const timestampOffsetForSegment = ({
+  segmentTimeline,
+  currentTimeline,
+  startOfSegment,
+  buffered,
+  overrideCheck
+}) => {
+  // Check to see if we are crossing a discontinuity to see if we need to set the
+  // timestamp offset on the transmuxer and source buffer.
+  //
+  // Previously, we changed the timestampOffset if the start of this segment was less than
+  // the currently set timestampOffset, but this isn't desirable as it can produce bad
+  // behavior, especially around long running live streams.
+  if (!overrideCheck && segmentTimeline === currentTimeline) {
+    return null;
+  } // When changing renditions, it's possible to request a segment on an older timeline. For
+  // instance, given two renditions with the following:
+  //
+  // #EXTINF:10
+  // segment1
+  // #EXT-X-DISCONTINUITY
+  // #EXTINF:10
+  // segment2
+  // #EXTINF:10
+  // segment3
+  //
+  // And the current player state:
+  //
+  // current time: 8
+  // buffer: 0 => 20
+  //
+  // The next segment on the current rendition would be segment3, filling the buffer from
+  // 20s onwards. However, if a rendition switch happens after segment2 was requested,
+  // then the next segment to be requested will be segment1 from the new rendition in
+  // order to fill time 8 and onwards. Using the buffered end would result in repeated
+  // content (since it would position segment1 of the new rendition starting at 20s). This
+  // case can be identified when the new segment's timeline is a prior value. Instead of
+  // using the buffered end, the startOfSegment can be used, which, hopefully, will be
+  // more accurate to the actual start time of the segment.
+
+  if (segmentTimeline < currentTimeline) {
+    return startOfSegment;
+  } // segmentInfo.startOfSegment used to be used as the timestamp offset, however, that
+  // value uses the end of the last segment if it is available. While this value
+  // should often be correct, it's better to rely on the buffered end, as the new
+  // content post discontinuity should line up with the buffered end as if it were
+  // time 0 for the new content.
+
+  return buffered.length ? buffered.end(buffered.length - 1) : startOfSegment;
+};
+/**
+ * Returns whether or not the loader should wait for a timeline change from the timeline
+ * change controller before processing the segment.
+ *
+ * Primary timing in VHS goes by video. This is different from most media players, as
+ * audio is more often used as the primary timing source. For the foreseeable future, VHS
+ * will continue to use video as the primary timing source, due to the current logic and
+ * expectations built around it.
+
+ * Since the timing follows video, in order to maintain sync, the video loader is
+ * responsible for setting both audio and video source buffer timestamp offsets.
+ *
+ * Setting different values for audio and video source buffers could lead to
+ * desyncing. The following examples demonstrate some of the situations where this
+ * distinction is important. Note that all of these cases involve demuxed content. When
+ * content is muxed, the audio and video are packaged together, therefore syncing
+ * separate media playlists is not an issue.
+ *
+ * CASE 1: Audio prepares to load a new timeline before video:
+ *
+ * Timeline:       0                 1
+ * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+ * Audio Loader:                     ^
+ * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+ * Video Loader              ^
+ *
+ * In the above example, the audio loader is preparing to load the 6th segment, the first
+ * after a discontinuity, while the video loader is still loading the 5th segment, before
+ * the discontinuity.
+ *
+ * If the audio loader goes ahead and loads and appends the 6th segment before the video
+ * loader crosses the discontinuity, then when appended, the 6th audio segment will use
+ * the timestamp offset from timeline 0. This will likely lead to desyncing. In addition,
+ * the audio loader must provide the audioAppendStart value to trim the content in the
+ * transmuxer, and that value relies on the audio timestamp offset. Since the audio
+ * timestamp offset is set by the video (main) loader, the audio loader shouldn't load the
+ * segment until that value is provided.
+ *
+ * CASE 2: Video prepares to load a new timeline before audio:
+ *
+ * Timeline:       0                 1
+ * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+ * Audio Loader:             ^
+ * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+ * Video Loader                      ^
+ *
+ * In the above example, the video loader is preparing to load the 6th segment, the first
+ * after a discontinuity, while the audio loader is still loading the 5th segment, before
+ * the discontinuity.
+ *
+ * If the video loader goes ahead and loads and appends the 6th segment, then once the
+ * segment is loaded and processed, both the video and audio timestamp offsets will be
+ * set, since video is used as the primary timing source. This is to ensure content lines
+ * up appropriately, as any modifications to the video timing are reflected by audio when
+ * the video loader sets the audio and video timestamp offsets to the same value. However,
+ * setting the timestamp offset for audio before audio has had a chance to change
+ * timelines will likely lead to desyncing, as the audio loader will append segment 5 with
+ * a timestamp intended to apply to segments from timeline 1 rather than timeline 0.
+ *
+ * CASE 3: When seeking, audio prepares to load a new timeline before video
+ *
+ * Timeline:       0                 1
+ * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+ * Audio Loader:           ^
+ * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+ * Video Loader            ^
+ *
+ * In the above example, both audio and video loaders are loading segments from timeline
+ * 0, but imagine that the seek originated from timeline 1.
+ *
+ * When seeking to a new timeline, the timestamp offset will be set based on the expected
+ * segment start of the loaded video segment. In order to maintain sync, the audio loader
+ * must wait for the video loader to load its segment and update both the audio and video
+ * timestamp offsets before it may load and append its own segment. This is the case
+ * whether the seek results in a mismatched segment request (e.g., the audio loader
+ * chooses to load segment 3 and the video loader chooses to load segment 4) or the
+ * loaders choose to load the same segment index from each playlist, as the segments may
+ * not be aligned perfectly, even for matching segment indexes.
+ *
+ * @param {Object} timelinechangeController
+ * @param {number} currentTimeline
+ *        The timeline currently being followed by the loader
+ * @param {number} segmentTimeline
+ *        The timeline of the segment being loaded
+ * @param {('main'|'audio')} loaderType
+ *        The loader type
+ * @param {boolean} audioDisabled
+ *        Whether the audio is disabled for the loader. This should only be true when the
+ *        loader may have muxed audio in its segment, but should not append it, e.g., for
+ *        the main loader when an alternate audio playlist is active.
+ *
+ * @return {boolean}
+ *         Whether the loader should wait for a timeline change from the timeline change
+ *         controller before processing the segment
+ */
+
+const shouldWaitForTimelineChange = ({
+  timelineChangeController,
+  currentTimeline,
+  segmentTimeline,
+  loaderType,
+  audioDisabled
+}) => {
+  if (currentTimeline === segmentTimeline) {
+    return false;
+  }
+  if (loaderType === 'audio') {
+    const lastMainTimelineChange = timelineChangeController.lastTimelineChange({
+      type: 'main'
+    }); // Audio loader should wait if:
+    //
+    // * main hasn't had a timeline change yet (thus has not loaded its first segment)
+    // * main hasn't yet changed to the timeline audio is looking to load
+
+    return !lastMainTimelineChange || lastMainTimelineChange.to !== segmentTimeline;
+  } // The main loader only needs to wait for timeline changes if there's demuxed audio.
+  // Otherwise, there's nothing to wait for, since audio would be muxed into the main
+  // loader's segments (or the content is audio/video only and handled by the main
+  // loader).
+
+  if (loaderType === 'main' && audioDisabled) {
+    const pendingAudioTimelineChange = timelineChangeController.pendingTimelineChange({
+      type: 'audio'
+    }); // Main loader should wait for the audio loader if audio is not pending a timeline
+    // change to the current timeline.
+    //
+    // Since the main loader is responsible for setting the timestamp offset for both
+    // audio and video, the main loader must wait for audio to be about to change to its
+    // timeline before setting the offset, otherwise, if audio is behind in loading,
+    // segments from the previous timeline would be adjusted by the new timestamp offset.
+    //
+    // This requirement means that video will not cross a timeline until the audio is
+    // about to cross to it, so that way audio and video will always cross the timeline
+    // together.
+    //
+    // In addition to normal timeline changes, these rules also apply to the start of a
+    // stream (going from a non-existent timeline, -1, to timeline 0). It's important
+    // that these rules apply to the first timeline change because if they did not, it's
+    // possible that the main loader will cross two timelines before the audio loader has
+    // crossed one. Logic may be implemented to handle the startup as a special case, but
+    // it's easier to simply treat all timeline changes the same.
+
+    if (pendingAudioTimelineChange && pendingAudioTimelineChange.to === segmentTimeline) {
+      return false;
+    }
+    return true;
+  }
+  return false;
+};
+const mediaDuration = timingInfos => {
+  let maxDuration = 0;
+  ['video', 'audio'].forEach(function (type) {
+    const typeTimingInfo = timingInfos[`${type}TimingInfo`];
+    if (!typeTimingInfo) {
+      return;
+    }
+    const {
+      start,
+      end
+    } = typeTimingInfo;
+    let duration;
+    if (typeof start === 'bigint' || typeof end === 'bigint') {
+      duration = window$1.BigInt(end) - window$1.BigInt(start);
+    } else if (typeof start === 'number' && typeof end === 'number') {
+      duration = end - start;
+    }
+    if (typeof duration !== 'undefined' && duration > maxDuration) {
+      maxDuration = duration;
+    }
+  }); // convert back to a number if it is lower than MAX_SAFE_INTEGER
+  // as we only need BigInt when we are above that.
+
+  if (typeof maxDuration === 'bigint' && maxDuration < Number.MAX_SAFE_INTEGER) {
+    maxDuration = Number(maxDuration);
+  }
+  return maxDuration;
+};
+const segmentTooLong = ({
+  segmentDuration,
+  maxDuration
+}) => {
+  // 0 duration segments are most likely due to metadata only segments or a lack of
+  // information.
+  if (!segmentDuration) {
+    return false;
+  } // For HLS:
+  //
+  // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.3.1
+  // The EXTINF duration of each Media Segment in the Playlist
+  // file, when rounded to the nearest integer, MUST be less than or equal
+  // to the target duration; longer segments can trigger playback stalls
+  // or other errors.
+  //
+  // For DASH, the mpd-parser uses the largest reported segment duration as the target
+  // duration. Although that reported duration is occasionally approximate (i.e., not
+  // exact), a strict check may report that a segment is too long more often in DASH.
+
+  return Math.round(segmentDuration) > maxDuration + TIME_FUDGE_FACTOR;
+};
+const getTroublesomeSegmentDurationMessage = (segmentInfo, sourceType) => {
+  // Right now we aren't following DASH's timing model exactly, so only perform
+  // this check for HLS content.
+  if (sourceType !== 'hls') {
+    return null;
+  }
+  const segmentDuration = mediaDuration({
+    audioTimingInfo: segmentInfo.audioTimingInfo,
+    videoTimingInfo: segmentInfo.videoTimingInfo
+  }); // Don't report if we lack information.
+  //
+  // If the segment has a duration of 0 it is either a lack of information or a
+  // metadata only segment and shouldn't be reported here.
+
+  if (!segmentDuration) {
+    return null;
+  }
+  const targetDuration = segmentInfo.playlist.targetDuration;
+  const isSegmentWayTooLong = segmentTooLong({
+    segmentDuration,
+    maxDuration: targetDuration * 2
+  });
+  const isSegmentSlightlyTooLong = segmentTooLong({
+    segmentDuration,
+    maxDuration: targetDuration
+  });
+  const segmentTooLongMessage = `Segment with index ${segmentInfo.mediaIndex} ` + `from playlist ${segmentInfo.playlist.id} ` + `has a duration of ${segmentDuration} ` + `when the reported duration is ${segmentInfo.duration} ` + `and the target duration is ${targetDuration}. ` + 'For HLS content, a duration in excess of the target duration may result in ' + 'playback issues. See the HLS specification section on EXT-X-TARGETDURATION for ' + 'more details: ' + 'https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.3.1';
+  if (isSegmentWayTooLong || isSegmentSlightlyTooLong) {
+    return {
+      severity: isSegmentWayTooLong ? 'warn' : 'info',
+      message: segmentTooLongMessage
+    };
+  }
+  return null;
+};
+/**
+ * An object that manages segment loading and appending.
+ *
+ * @class SegmentLoader
+ * @param {Object} options required and optional options
+ * @extends videojs.EventTarget
+ */
+
+class SegmentLoader extends videojs.EventTarget {
+  constructor(settings, options = {}) {
+    super(); // check pre-conditions
+
+    if (!settings) {
+      throw new TypeError('Initialization settings are required');
+    }
+    if (typeof settings.currentTime !== 'function') {
+      throw new TypeError('No currentTime getter specified');
+    }
+    if (!settings.mediaSource) {
+      throw new TypeError('No MediaSource specified');
+    } // public properties
+
+    this.bandwidth = settings.bandwidth;
+    this.throughput = {
+      rate: 0,
+      count: 0
+    };
+    this.roundTrip = NaN;
+    this.resetStats_();
+    this.mediaIndex = null;
+    this.partIndex = null; // private settings
+
+    this.hasPlayed_ = settings.hasPlayed;
+    this.currentTime_ = settings.currentTime;
+    this.seekable_ = settings.seekable;
+    this.seeking_ = settings.seeking;
+    this.duration_ = settings.duration;
+    this.mediaSource_ = settings.mediaSource;
+    this.vhs_ = settings.vhs;
+    this.loaderType_ = settings.loaderType;
+    this.currentMediaInfo_ = void 0;
+    this.startingMediaInfo_ = void 0;
+    this.segmentMetadataTrack_ = settings.segmentMetadataTrack;
+    this.goalBufferLength_ = settings.goalBufferLength;
+    this.sourceType_ = settings.sourceType;
+    this.sourceUpdater_ = settings.sourceUpdater;
+    this.inbandTextTracks_ = settings.inbandTextTracks;
+    this.state_ = 'INIT';
+    this.timelineChangeController_ = settings.timelineChangeController;
+    this.shouldSaveSegmentTimingInfo_ = true;
+    this.parse708captions_ = settings.parse708captions;
+    this.useDtsForTimestampOffset_ = settings.useDtsForTimestampOffset;
+    this.captionServices_ = settings.captionServices;
+    this.exactManifestTimings = settings.exactManifestTimings;
+    this.addMetadataToTextTrack = settings.addMetadataToTextTrack; // private instance variables
+
+    this.checkBufferTimeout_ = null;
+    this.error_ = void 0;
+    this.currentTimeline_ = -1;
+    this.shouldForceTimestampOffsetAfterResync_ = false;
+    this.pendingSegment_ = null;
+    this.xhrOptions_ = null;
+    this.pendingSegments_ = [];
+    this.audioDisabled_ = false;
+    this.isPendingTimestampOffset_ = false; // TODO possibly move gopBuffer and timeMapping info to a separate controller
+
+    this.gopBuffer_ = [];
+    this.timeMapping_ = 0;
+    this.safeAppend_ = false;
+    this.appendInitSegment_ = {
+      audio: true,
+      video: true
+    };
+    this.playlistOfLastInitSegment_ = {
+      audio: null,
+      video: null
+    };
+    this.callQueue_ = []; // If the segment loader prepares to load a segment, but does not have enough
+    // information yet to start the loading process (e.g., if the audio loader wants to
+    // load a segment from the next timeline but the main loader hasn't yet crossed that
+    // timeline), then the load call will be added to the queue until it is ready to be
+    // processed.
+
+    this.loadQueue_ = [];
+    this.metadataQueue_ = {
+      id3: [],
+      caption: []
+    };
+    this.waitingOnRemove_ = false;
+    this.quotaExceededErrorRetryTimeout_ = null; // Fragmented mp4 playback
+
+    this.activeInitSegmentId_ = null;
+    this.initSegments_ = {}; // HLSe playback
+
+    this.cacheEncryptionKeys_ = settings.cacheEncryptionKeys;
+    this.keyCache_ = {};
+    this.decrypter_ = settings.decrypter; // Manages the tracking and generation of sync-points, mappings
+    // between a time in the display time and a segment index within
+    // a playlist
+
+    this.syncController_ = settings.syncController;
+    this.syncPoint_ = {
+      segmentIndex: 0,
+      time: 0
+    };
+    this.transmuxer_ = this.createTransmuxer_();
+    this.triggerSyncInfoUpdate_ = () => this.trigger('syncinfoupdate');
+    this.syncController_.on('syncinfoupdate', this.triggerSyncInfoUpdate_);
+    this.mediaSource_.addEventListener('sourceopen', () => {
+      if (!this.isEndOfStream_()) {
+        this.ended_ = false;
+      }
+    }); // ...for determining the fetch location
+
+    this.fetchAtBuffer_ = false;
+    this.logger_ = logger(`SegmentLoader[${this.loaderType_}]`);
+    Object.defineProperty(this, 'state', {
+      get() {
+        return this.state_;
+      },
+      set(newState) {
+        if (newState !== this.state_) {
+          this.logger_(`${this.state_} -> ${newState}`);
+          this.state_ = newState;
+          this.trigger('statechange');
+        }
+      }
+    });
+    this.sourceUpdater_.on('ready', () => {
+      if (this.hasEnoughInfoToAppend_()) {
+        this.processCallQueue_();
+      }
+    }); // Only the main loader needs to listen for pending timeline changes, as the main
+    // loader should wait for audio to be ready to change its timeline so that both main
+    // and audio timelines change together. For more details, see the
+    // shouldWaitForTimelineChange function.
+
+    if (this.loaderType_ === 'main') {
+      this.timelineChangeController_.on('pendingtimelinechange', () => {
+        if (this.hasEnoughInfoToAppend_()) {
+          this.processCallQueue_();
+        }
+      });
+    } // The main loader only listens on pending timeline changes, but the audio loader,
+    // since its loads follow main, needs to listen on timeline changes. For more details,
+    // see the shouldWaitForTimelineChange function.
+
+    if (this.loaderType_ === 'audio') {
+      this.timelineChangeController_.on('timelinechange', () => {
+        if (this.hasEnoughInfoToLoad_()) {
+          this.processLoadQueue_();
+        }
+        if (this.hasEnoughInfoToAppend_()) {
+          this.processCallQueue_();
+        }
+      });
+    }
+  }
+  /**
+   * TODO: Current sync controller consists of many hls-specific strategies
+   * media sequence sync is also hls-specific, and we would like to be protocol-agnostic on this level
+   * this should be a part of the sync-controller and sync controller should expect different strategy list based on the protocol.
+   *
+   * @return {MediaSequenceSync|null}
+   * @private
+   */
+
+  get mediaSequenceSync_() {
+    return this.syncController_.getMediaSequenceSync(this.loaderType_);
+  }
+  createTransmuxer_() {
+    return segmentTransmuxer.createTransmuxer({
+      remux: false,
+      alignGopsAtEnd: this.safeAppend_,
+      keepOriginalTimestamps: true,
+      parse708captions: this.parse708captions_,
+      captionServices: this.captionServices_
+    });
+  }
+  /**
+   * reset all of our media stats
+   *
+   * @private
+   */
+
+  resetStats_() {
+    this.mediaBytesTransferred = 0;
+    this.mediaRequests = 0;
+    this.mediaRequestsAborted = 0;
+    this.mediaRequestsTimedout = 0;
+    this.mediaRequestsErrored = 0;
+    this.mediaTransferDuration = 0;
+    this.mediaSecondsLoaded = 0;
+    this.mediaAppends = 0;
+  }
+  /**
+   * dispose of the SegmentLoader and reset to the default state
+   */
+
+  dispose() {
+    this.trigger('dispose');
+    this.state = 'DISPOSED';
+    this.pause();
+    this.abort_();
+    if (this.transmuxer_) {
+      this.transmuxer_.terminate();
+    }
+    this.resetStats_();
+    if (this.checkBufferTimeout_) {
+      window$1.clearTimeout(this.checkBufferTimeout_);
+    }
+    if (this.syncController_ && this.triggerSyncInfoUpdate_) {
+      this.syncController_.off('syncinfoupdate', this.triggerSyncInfoUpdate_);
+    }
+    this.off();
+  }
+  setAudio(enable) {
+    this.audioDisabled_ = !enable;
+    if (enable) {
+      this.appendInitSegment_.audio = true;
+    } else {
+      // remove current track audio if it gets disabled
+      this.sourceUpdater_.removeAudio(0, this.duration_());
+    }
+  }
+  /**
+   * abort anything that is currently doing on with the SegmentLoader
+   * and reset to a default state
+   */
+
+  abort() {
+    if (this.state !== 'WAITING') {
+      if (this.pendingSegment_) {
+        this.pendingSegment_ = null;
+      }
+      return;
+    }
+    this.abort_(); // We aborted the requests we were waiting on, so reset the loader's state to READY
+    // since we are no longer "waiting" on any requests. XHR callback is not always run
+    // when the request is aborted. This will prevent the loader from being stuck in the
+    // WAITING state indefinitely.
+
+    this.state = 'READY'; // don't wait for buffer check timeouts to begin fetching the
+    // next segment
+
+    if (!this.paused()) {
+      this.monitorBuffer_();
+    }
+  }
+  /**
+   * abort all pending xhr requests and null any pending segements
+   *
+   * @private
+   */
+
+  abort_() {
+    if (this.pendingSegment_ && this.pendingSegment_.abortRequests) {
+      this.pendingSegment_.abortRequests();
+    } // clear out the segment being processed
+
+    this.pendingSegment_ = null;
+    this.callQueue_ = [];
+    this.loadQueue_ = [];
+    this.metadataQueue_.id3 = [];
+    this.metadataQueue_.caption = [];
+    this.timelineChangeController_.clearPendingTimelineChange(this.loaderType_);
+    this.waitingOnRemove_ = false;
+    window$1.clearTimeout(this.quotaExceededErrorRetryTimeout_);
+    this.quotaExceededErrorRetryTimeout_ = null;
+  }
+  checkForAbort_(requestId) {
+    // If the state is APPENDING, then aborts will not modify the state, meaning the first
+    // callback that happens should reset the state to READY so that loading can continue.
+    if (this.state === 'APPENDING' && !this.pendingSegment_) {
+      this.state = 'READY';
+      return true;
+    }
+    if (!this.pendingSegment_ || this.pendingSegment_.requestId !== requestId) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * set an error on the segment loader and null out any pending segements
+   *
+   * @param {Error} error the error to set on the SegmentLoader
+   * @return {Error} the error that was set or that is currently set
+   */
+
+  error(error) {
+    if (typeof error !== 'undefined') {
+      this.logger_('error occurred:', error);
+      this.error_ = error;
+    }
+    this.pendingSegment_ = null;
+    return this.error_;
+  }
+  endOfStream() {
+    this.ended_ = true;
+    if (this.transmuxer_) {
+      // need to clear out any cached data to prepare for the new segment
+      segmentTransmuxer.reset(this.transmuxer_);
+    }
+    this.gopBuffer_.length = 0;
+    this.pause();
+    this.trigger('ended');
+  }
+  /**
+   * Indicates which time ranges are buffered
+   *
+   * @return {TimeRange}
+   *         TimeRange object representing the current buffered ranges
+   */
+
+  buffered_() {
+    const trackInfo = this.getMediaInfo_();
+    if (!this.sourceUpdater_ || !trackInfo) {
+      return createTimeRanges();
+    }
+    if (this.loaderType_ === 'main') {
+      const {
+        hasAudio,
+        hasVideo,
+        isMuxed
+      } = trackInfo;
+      if (hasVideo && hasAudio && !this.audioDisabled_ && !isMuxed) {
+        return this.sourceUpdater_.buffered();
+      }
+      if (hasVideo) {
+        return this.sourceUpdater_.videoBuffered();
+      }
+    } // One case that can be ignored for now is audio only with alt audio,
+    // as we don't yet have proper support for that.
+
+    return this.sourceUpdater_.audioBuffered();
+  }
+  /**
+   * Gets and sets init segment for the provided map
+   *
+   * @param {Object} map
+   *        The map object representing the init segment to get or set
+   * @param {boolean=} set
+   *        If true, the init segment for the provided map should be saved
+   * @return {Object}
+   *         map object for desired init segment
+   */
+
+  initSegmentForMap(map, set = false) {
+    if (!map) {
+      return null;
+    }
+    const id = initSegmentId(map);
+    let storedMap = this.initSegments_[id];
+    if (set && !storedMap && map.bytes) {
+      this.initSegments_[id] = storedMap = {
+        resolvedUri: map.resolvedUri,
+        byterange: map.byterange,
+        bytes: map.bytes,
+        tracks: map.tracks,
+        timescales: map.timescales
+      };
+    }
+    return storedMap || map;
+  }
+  /**
+   * Gets and sets key for the provided key
+   *
+   * @param {Object} key
+   *        The key object representing the key to get or set
+   * @param {boolean=} set
+   *        If true, the key for the provided key should be saved
+   * @return {Object}
+   *         Key object for desired key
+   */
+
+  segmentKey(key, set = false) {
+    if (!key) {
+      return null;
+    }
+    const id = segmentKeyId(key);
+    let storedKey = this.keyCache_[id]; // TODO: We should use the HTTP Expires header to invalidate our cache per
+    // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-6.2.3
+
+    if (this.cacheEncryptionKeys_ && set && !storedKey && key.bytes) {
+      this.keyCache_[id] = storedKey = {
+        resolvedUri: key.resolvedUri,
+        bytes: key.bytes
+      };
+    }
+    const result = {
+      resolvedUri: (storedKey || key).resolvedUri
+    };
+    if (storedKey) {
+      result.bytes = storedKey.bytes;
+    }
+    return result;
+  }
+  /**
+   * Returns true if all configuration required for loading is present, otherwise false.
+   *
+   * @return {boolean} True if the all configuration is ready for loading
+   * @private
+   */
+
+  couldBeginLoading_() {
+    return this.playlist_ && !this.paused();
+  }
+  /**
+   * load a playlist and start to fill the buffer
+   */
+
+  load() {
+    // un-pause
+    this.monitorBuffer_(); // if we don't have a playlist yet, keep waiting for one to be
+    // specified
+
+    if (!this.playlist_) {
+      return;
+    } // if all the configuration is ready, initialize and begin loading
+
+    if (this.state === 'INIT' && this.couldBeginLoading_()) {
+      return this.init_();
+    } // if we're in the middle of processing a segment already, don't
+    // kick off an additional segment request
+
+    if (!this.couldBeginLoading_() || this.state !== 'READY' && this.state !== 'INIT') {
+      return;
+    }
+    this.state = 'READY';
+  }
+  /**
+   * Once all the starting parameters have been specified, begin
+   * operation. This method should only be invoked from the INIT
+   * state.
+   *
+   * @private
+   */
+
+  init_() {
+    this.state = 'READY'; // if this is the audio segment loader, and it hasn't been inited before, then any old
+    // audio data from the muxed content should be removed
+
+    this.resetEverything();
+    return this.monitorBuffer_();
+  }
+  /**
+   * set a playlist on the segment loader
+   *
+   * @param {PlaylistLoader} media the playlist to set on the segment loader
+   */
+
+  playlist(newPlaylist, options = {}) {
+    if (!newPlaylist) {
+      return;
+    }
+    const oldPlaylist = this.playlist_;
+    const segmentInfo = this.pendingSegment_;
+    this.playlist_ = newPlaylist;
+    this.xhrOptions_ = options; // when we haven't started playing yet, the start of a live playlist
+    // is always our zero-time so force a sync update each time the playlist
+    // is refreshed from the server
+    //
+    // Use the INIT state to determine if playback has started, as the playlist sync info
+    // should be fixed once requests begin (as sync points are generated based on sync
+    // info), but not before then.
+
+    if (this.state === 'INIT') {
+      newPlaylist.syncInfo = {
+        mediaSequence: newPlaylist.mediaSequence,
+        time: 0
+      }; // Setting the date time mapping means mapping the program date time (if available)
+      // to time 0 on the player's timeline. The playlist's syncInfo serves a similar
+      // purpose, mapping the initial mediaSequence to time zero. Since the syncInfo can
+      // be updated as the playlist is refreshed before the loader starts loading, the
+      // program date time mapping needs to be updated as well.
+      //
+      // This mapping is only done for the main loader because a program date time should
+      // map equivalently between playlists.
+
+      if (this.loaderType_ === 'main') {
+        this.syncController_.setDateTimeMappingForStart(newPlaylist);
+      }
+    }
+    let oldId = null;
+    if (oldPlaylist) {
+      if (oldPlaylist.id) {
+        oldId = oldPlaylist.id;
+      } else if (oldPlaylist.uri) {
+        oldId = oldPlaylist.uri;
+      }
+    }
+    this.logger_(`playlist update [${oldId} => ${newPlaylist.id || newPlaylist.uri}]`);
+    if (this.mediaSequenceSync_) {
+      this.mediaSequenceSync_.update(newPlaylist, this.currentTime_());
+      this.logger_(`Playlist update:
+currentTime: ${this.currentTime_()}
+bufferedEnd: ${lastBufferedEnd(this.buffered_())}
+`, this.mediaSequenceSync_.diagnostics);
+    } // in VOD, this is always a rendition switch (or we updated our syncInfo above)
+    // in LIVE, we always want to update with new playlists (including refreshes)
+
+    this.trigger('syncinfoupdate'); // if we were unpaused but waiting for a playlist, start
+    // buffering now
+
+    if (this.state === 'INIT' && this.couldBeginLoading_()) {
+      return this.init_();
+    }
+    if (!oldPlaylist || oldPlaylist.uri !== newPlaylist.uri) {
+      if (this.mediaIndex !== null) {
+        // we must reset/resync the segment loader when we switch renditions and
+        // the segment loader is already synced to the previous rendition
+        // We only want to reset the loader here for LLHLS playback, as resetLoader sets fetchAtBuffer_
+        // to false, resulting in fetching segments at currentTime and causing repeated
+        // same-segment requests on playlist change. This erroneously drives up the playback watcher
+        // stalled segment count, as re-requesting segments at the currentTime or browser cached segments
+        // will not change the buffer.
+        // Reference for LLHLS fixes: https://github.com/videojs/http-streaming/pull/1201
+        const isLLHLS = !newPlaylist.endList && typeof newPlaylist.partTargetDuration === 'number';
+        if (isLLHLS) {
+          this.resetLoader();
+        } else {
+          this.resyncLoader();
+        }
+      }
+      this.currentMediaInfo_ = void 0;
+      this.trigger('playlistupdate'); // the rest of this function depends on `oldPlaylist` being defined
+
+      return;
+    } // we reloaded the same playlist so we are in a live scenario
+    // and we will likely need to adjust the mediaIndex
+
+    const mediaSequenceDiff = newPlaylist.mediaSequence - oldPlaylist.mediaSequence;
+    this.logger_(`live window shift [${mediaSequenceDiff}]`); // update the mediaIndex on the SegmentLoader
+    // this is important because we can abort a request and this value must be
+    // equal to the last appended mediaIndex
+
+    if (this.mediaIndex !== null) {
+      this.mediaIndex -= mediaSequenceDiff; // this can happen if we are going to load the first segment, but get a playlist
+      // update during that. mediaIndex would go from 0 to -1 if mediaSequence in the
+      // new playlist was incremented by 1.
+
+      if (this.mediaIndex < 0) {
+        this.mediaIndex = null;
+        this.partIndex = null;
+      } else {
+        const segment = this.playlist_.segments[this.mediaIndex]; // partIndex should remain the same for the same segment
+        // unless parts fell off of the playlist for this segment.
+        // In that case we need to reset partIndex and resync
+
+        if (this.partIndex && (!segment.parts || !segment.parts.length || !segment.parts[this.partIndex])) {
+          const mediaIndex = this.mediaIndex;
+          this.logger_(`currently processing part (index ${this.partIndex}) no longer exists.`);
+          this.resetLoader(); // We want to throw away the partIndex and the data associated with it,
+          // as the part was dropped from our current playlists segment.
+          // The mediaIndex will still be valid so keep that around.
+
+          this.mediaIndex = mediaIndex;
+        }
+      }
+    } // update the mediaIndex on the SegmentInfo object
+    // this is important because we will update this.mediaIndex with this value
+    // in `handleAppendsDone_` after the segment has been successfully appended
+
+    if (segmentInfo) {
+      segmentInfo.mediaIndex -= mediaSequenceDiff;
+      if (segmentInfo.mediaIndex < 0) {
+        segmentInfo.mediaIndex = null;
+        segmentInfo.partIndex = null;
+      } else {
+        // we need to update the referenced segment so that timing information is
+        // saved for the new playlist's segment, however, if the segment fell off the
+        // playlist, we can leave the old reference and just lose the timing info
+        if (segmentInfo.mediaIndex >= 0) {
+          segmentInfo.segment = newPlaylist.segments[segmentInfo.mediaIndex];
+        }
+        if (segmentInfo.partIndex >= 0 && segmentInfo.segment.parts) {
+          segmentInfo.part = segmentInfo.segment.parts[segmentInfo.partIndex];
+        }
+      }
+    }
+    this.syncController_.saveExpiredSegmentInfo(oldPlaylist, newPlaylist);
+  }
+  /**
+   * Prevent the loader from fetching additional segments. If there
+   * is a segment request outstanding, it will finish processing
+   * before the loader halts. A segment loader can be unpaused by
+   * calling load().
+   */
+
+  pause() {
+    if (this.checkBufferTimeout_) {
+      window$1.clearTimeout(this.checkBufferTimeout_);
+      this.checkBufferTimeout_ = null;
+    }
+  }
+  /**
+   * Returns whether the segment loader is fetching additional
+   * segments when given the opportunity. This property can be
+   * modified through calls to pause() and load().
+   */
+
+  paused() {
+    return this.checkBufferTimeout_ === null;
+  }
+  /**
+   * Delete all the buffered data and reset the SegmentLoader
+   *
+   * @param {Function} [done] an optional callback to be executed when the remove
+   * operation is complete
+   */
+
+  resetEverything(done) {
+    this.ended_ = false;
+    this.activeInitSegmentId_ = null;
+    this.appendInitSegment_ = {
+      audio: true,
+      video: true
+    };
+    this.resetLoader(); // remove from 0, the earliest point, to Infinity, to signify removal of everything.
+    // VTT Segment Loader doesn't need to do anything but in the regular SegmentLoader,
+    // we then clamp the value to duration if necessary.
+
+    this.remove(0, Infinity, done); // clears fmp4 captions
+
+    if (this.transmuxer_) {
+      this.transmuxer_.postMessage({
+        action: 'clearAllMp4Captions'
+      }); // reset the cache in the transmuxer
+
+      this.transmuxer_.postMessage({
+        action: 'reset'
+      });
+    }
+  }
+  /**
+   * Force the SegmentLoader to resync and start loading around the currentTime instead
+   * of starting at the end of the buffer
+   *
+   * Useful for fast quality changes
+   */
+
+  resetLoader() {
+    this.fetchAtBuffer_ = false;
+    if (this.mediaSequenceSync_) {
+      this.mediaSequenceSync_.resetAppendedStatus();
+    }
+    this.resyncLoader();
+  }
+  /**
+   * Force the SegmentLoader to restart synchronization and make a conservative guess
+   * before returning to the simple walk-forward method
+   */
+
+  resyncLoader() {
+    if (this.transmuxer_) {
+      // need to clear out any cached data to prepare for the new segment
+      segmentTransmuxer.reset(this.transmuxer_);
+    }
+    this.mediaIndex = null;
+    this.partIndex = null;
+    this.syncPoint_ = null;
+    this.isPendingTimestampOffset_ = false; // this is mainly to sync timing-info when switching between renditions with and without timestamp-rollover,
+    // so we don't want it for DASH or fragmented mp4 segments.
+
+    const isFmp4 = this.currentMediaInfo_ && this.currentMediaInfo_.isFmp4;
+    const isHlsTs = this.sourceType_ === 'hls' && !isFmp4;
+    if (isHlsTs) {
+      this.shouldForceTimestampOffsetAfterResync_ = true;
+    }
+    this.callQueue_ = [];
+    this.loadQueue_ = [];
+    this.metadataQueue_.id3 = [];
+    this.metadataQueue_.caption = [];
+    this.abort();
+    if (this.transmuxer_) {
+      this.transmuxer_.postMessage({
+        action: 'clearParsedMp4Captions'
+      });
+    }
+  }
+  /**
+   * Remove any data in the source buffer between start and end times
+   *
+   * @param {number} start - the start time of the region to remove from the buffer
+   * @param {number} end - the end time of the region to remove from the buffer
+   * @param {Function} [done] - an optional callback to be executed when the remove
+   * @param {boolean} force - force all remove operations to happen
+   * operation is complete
+   */
+
+  remove(start, end, done = () => {}, force = false) {
+    // clamp end to duration if we need to remove everything.
+    // This is due to a browser bug that causes issues if we remove to Infinity.
+    // videojs/videojs-contrib-hls#1225
+    if (end === Infinity) {
+      end = this.duration_();
+    } // skip removes that would throw an error
+    // commonly happens during a rendition switch at the start of a video
+    // from start 0 to end 0
+
+    if (end <= start) {
+      this.logger_('skipping remove because end ${end} is <= start ${start}');
+      return;
+    }
+    if (!this.sourceUpdater_ || !this.getMediaInfo_()) {
+      this.logger_('skipping remove because no source updater or starting media info'); // nothing to remove if we haven't processed any media
+
+      return;
+    } // set it to one to complete this function's removes
+
+    let removesRemaining = 1;
+    const removeFinished = () => {
+      removesRemaining--;
+      if (removesRemaining === 0) {
+        done();
+      }
+    };
+    if (force || !this.audioDisabled_) {
+      removesRemaining++;
+      this.sourceUpdater_.removeAudio(start, end, removeFinished);
+    } // While it would be better to only remove video if the main loader has video, this
+    // should be safe with audio only as removeVideo will call back even if there's no
+    // video buffer.
+    //
+    // In theory we can check to see if there's video before calling the remove, but in
+    // the event that we're switching between renditions and from video to audio only
+    // (when we add support for that), we may need to clear the video contents despite
+    // what the new media will contain.
+
+    if (force || this.loaderType_ === 'main') {
+      this.gopBuffer_ = removeGopBuffer(this.gopBuffer_, start, end, this.timeMapping_);
+      removesRemaining++;
+      this.sourceUpdater_.removeVideo(start, end, removeFinished);
+    } // remove any captions and ID3 tags
+
+    for (const track in this.inbandTextTracks_) {
+      removeCuesFromTrack(start, end, this.inbandTextTracks_[track]);
+    }
+    removeCuesFromTrack(start, end, this.segmentMetadataTrack_); // finished this function's removes
+
+    removeFinished();
+  }
+  /**
+   * (re-)schedule monitorBufferTick_ to run as soon as possible
+   *
+   * @private
+   */
+
+  monitorBuffer_() {
+    if (this.checkBufferTimeout_) {
+      window$1.clearTimeout(this.checkBufferTimeout_);
+    }
+    this.checkBufferTimeout_ = window$1.setTimeout(this.monitorBufferTick_.bind(this), 1);
+  }
+  /**
+   * As long as the SegmentLoader is in the READY state, periodically
+   * invoke fillBuffer_().
+   *
+   * @private
+   */
+
+  monitorBufferTick_() {
+    if (this.state === 'READY') {
+      this.fillBuffer_();
+    }
+    if (this.checkBufferTimeout_) {
+      window$1.clearTimeout(this.checkBufferTimeout_);
+    }
+    this.checkBufferTimeout_ = window$1.setTimeout(this.monitorBufferTick_.bind(this), CHECK_BUFFER_DELAY);
+  }
+  /**
+   * fill the buffer with segements unless the sourceBuffers are
+   * currently updating
+   *
+   * Note: this function should only ever be called by monitorBuffer_
+   * and never directly
+   *
+   * @private
+   */
+
+  fillBuffer_() {
+    // TODO since the source buffer maintains a queue, and we shouldn't call this function
+    // except when we're ready for the next segment, this check can most likely be removed
+    if (this.sourceUpdater_.updating()) {
+      return;
+    } // see if we need to begin loading immediately
+
+    const segmentInfo = this.chooseNextRequest_();
+    if (!segmentInfo) {
+      return;
+    }
+    if (typeof segmentInfo.timestampOffset === 'number') {
+      this.isPendingTimestampOffset_ = false;
+      this.timelineChangeController_.pendingTimelineChange({
+        type: this.loaderType_,
+        from: this.currentTimeline_,
+        to: segmentInfo.timeline
+      });
+    }
+    this.loadSegment_(segmentInfo);
+  }
+  /**
+   * Determines if we should call endOfStream on the media source based
+   * on the state of the buffer or if appened segment was the final
+   * segment in the playlist.
+   *
+   * @param {number} [mediaIndex] the media index of segment we last appended
+   * @param {Object} [playlist] a media playlist object
+   * @return {boolean} do we need to call endOfStream on the MediaSource
+   */
+
+  isEndOfStream_(mediaIndex = this.mediaIndex, playlist = this.playlist_, partIndex = this.partIndex) {
+    if (!playlist || !this.mediaSource_) {
+      return false;
+    }
+    const segment = typeof mediaIndex === 'number' && playlist.segments[mediaIndex]; // mediaIndex is zero based but length is 1 based
+
+    const appendedLastSegment = mediaIndex + 1 === playlist.segments.length; // true if there are no parts, or this is the last part.
+
+    const appendedLastPart = !segment || !segment.parts || partIndex + 1 === segment.parts.length; // if we've buffered to the end of the video, we need to call endOfStream
+    // so that MediaSources can trigger the `ended` event when it runs out of
+    // buffered data instead of waiting for me
+
+    return playlist.endList && this.mediaSource_.readyState === 'open' && appendedLastSegment && appendedLastPart;
+  }
+  /**
+   * Determines what request should be made given current segment loader state.
+   *
+   * @return {Object} a request object that describes the segment/part to load
+   */
+
+  chooseNextRequest_() {
+    const buffered = this.buffered_();
+    const bufferedEnd = lastBufferedEnd(buffered) || 0;
+    const bufferedTime = timeAheadOf(buffered, this.currentTime_());
+    const preloaded = !this.hasPlayed_() && bufferedTime >= 1;
+    const haveEnoughBuffer = bufferedTime >= this.goalBufferLength_();
+    const segments = this.playlist_.segments; // return no segment if:
+    // 1. we don't have segments
+    // 2. The video has not yet played and we already downloaded a segment
+    // 3. we already have enough buffered time
+
+    if (!segments.length || preloaded || haveEnoughBuffer) {
+      return null;
+    }
+    this.syncPoint_ = this.syncPoint_ || this.syncController_.getSyncPoint(this.playlist_, this.duration_(), this.currentTimeline_, this.currentTime_(), this.loaderType_);
+    const next = {
+      partIndex: null,
+      mediaIndex: null,
+      startOfSegment: null,
+      playlist: this.playlist_,
+      isSyncRequest: Boolean(!this.syncPoint_)
+    };
+    if (next.isSyncRequest) {
+      next.mediaIndex = getSyncSegmentCandidate(this.currentTimeline_, segments, bufferedEnd);
+      this.logger_(`choose next request. Can not find sync point. Fallback to media Index: ${next.mediaIndex}`);
+    } else if (this.mediaIndex !== null) {
+      const segment = segments[this.mediaIndex];
+      const partIndex = typeof this.partIndex === 'number' ? this.partIndex : -1;
+      next.startOfSegment = segment.end ? segment.end : bufferedEnd;
+      if (segment.parts && segment.parts[partIndex + 1]) {
+        next.mediaIndex = this.mediaIndex;
+        next.partIndex = partIndex + 1;
+      } else {
+        next.mediaIndex = this.mediaIndex + 1;
+      }
+    } else {
+      let segmentIndex;
+      let partIndex;
+      let startTime;
+      const targetTime = this.fetchAtBuffer_ ? bufferedEnd : this.currentTime_();
+      if (this.mediaSequenceSync_) {
+        this.logger_(`chooseNextRequest_ request after Quality Switch:
+For TargetTime: ${targetTime}.
+CurrentTime: ${this.currentTime_()}
+BufferedEnd: ${bufferedEnd}
+Fetch At Buffer: ${this.fetchAtBuffer_}
+`, this.mediaSequenceSync_.diagnostics);
+      }
+      if (this.mediaSequenceSync_ && this.mediaSequenceSync_.isReliable) {
+        const syncInfo = this.getSyncInfoFromMediaSequenceSync_(targetTime);
+        if (!syncInfo) {
+          this.logger_('chooseNextRequest_ - no sync info found using media sequence sync'); // no match
+
+          return null;
+        }
+        this.logger_(`chooseNextRequest_ mediaSequence syncInfo (${syncInfo.start} --> ${syncInfo.end})`);
+        segmentIndex = syncInfo.segmentIndex;
+        partIndex = syncInfo.partIndex;
+        startTime = syncInfo.start;
+      } else {
+        this.logger_('chooseNextRequest_ - fallback to a regular segment selection algorithm, based on a syncPoint.'); // fallback
+
+        const mediaInfoForTime = Playlist.getMediaInfoForTime({
+          exactManifestTimings: this.exactManifestTimings,
+          playlist: this.playlist_,
+          currentTime: targetTime,
+          startingPartIndex: this.syncPoint_.partIndex,
+          startingSegmentIndex: this.syncPoint_.segmentIndex,
+          startTime: this.syncPoint_.time
+        });
+        segmentIndex = mediaInfoForTime.segmentIndex;
+        partIndex = mediaInfoForTime.partIndex;
+        startTime = mediaInfoForTime.startTime;
+      }
+      next.getMediaInfoForTime = this.fetchAtBuffer_ ? `bufferedEnd ${targetTime}` : `currentTime ${targetTime}`;
+      next.mediaIndex = segmentIndex;
+      next.startOfSegment = startTime;
+      next.partIndex = partIndex;
+      this.logger_(`choose next request. Playlist switched and we have a sync point. Media Index: ${next.mediaIndex} `);
+    }
+    const nextSegment = segments[next.mediaIndex];
+    let nextPart = nextSegment && typeof next.partIndex === 'number' && nextSegment.parts && nextSegment.parts[next.partIndex]; // if the next segment index is invalid or
+    // the next partIndex is invalid do not choose a next segment.
+
+    if (!nextSegment || typeof next.partIndex === 'number' && !nextPart) {
+      return null;
+    } // if the next segment has parts, and we don't have a partIndex.
+    // Set partIndex to 0
+
+    if (typeof next.partIndex !== 'number' && nextSegment.parts) {
+      next.partIndex = 0;
+      nextPart = nextSegment.parts[0];
+    } // independentSegments applies to every segment in a playlist. If independentSegments appears in a main playlist,
+    // it applies to each segment in each media playlist.
+    // https://datatracker.ietf.org/doc/html/draft-pantos-http-live-streaming-23#section-4.3.5.1
+
+    const hasIndependentSegments = this.vhs_.playlists && this.vhs_.playlists.main && this.vhs_.playlists.main.independentSegments || this.playlist_.independentSegments; // if we have no buffered data then we need to make sure
+    // that the next part we append is "independent" if possible.
+    // So we check if the previous part is independent, and request
+    // it if it is.
+
+    if (!bufferedTime && nextPart && !hasIndependentSegments && !nextPart.independent) {
+      if (next.partIndex === 0) {
+        const lastSegment = segments[next.mediaIndex - 1];
+        const lastSegmentLastPart = lastSegment.parts && lastSegment.parts.length && lastSegment.parts[lastSegment.parts.length - 1];
+        if (lastSegmentLastPart && lastSegmentLastPart.independent) {
+          next.mediaIndex -= 1;
+          next.partIndex = lastSegment.parts.length - 1;
+          next.independent = 'previous segment';
+        }
+      } else if (nextSegment.parts[next.partIndex - 1].independent) {
+        next.partIndex -= 1;
+        next.independent = 'previous part';
+      }
+    }
+    const ended = this.mediaSource_ && this.mediaSource_.readyState === 'ended'; // do not choose a next segment if all of the following:
+    // 1. this is the last segment in the playlist
+    // 2. end of stream has been called on the media source already
+    // 3. the player is not seeking
+
+    if (next.mediaIndex >= segments.length - 1 && ended && !this.seeking_()) {
+      return null;
+    }
+    if (this.shouldForceTimestampOffsetAfterResync_) {
+      this.shouldForceTimestampOffsetAfterResync_ = false;
+      next.forceTimestampOffset = true;
+      this.logger_('choose next request. Force timestamp offset after loader resync');
+    }
+    return this.generateSegmentInfo_(next);
+  }
+  getSyncInfoFromMediaSequenceSync_(targetTime) {
+    if (!this.mediaSequenceSync_) {
+      return null;
+    } // we should pull the target time to the least available time if we drop out of sync for any reason
+
+    const finalTargetTime = Math.max(targetTime, this.mediaSequenceSync_.start);
+    if (targetTime !== finalTargetTime) {
+      this.logger_(`getSyncInfoFromMediaSequenceSync_. Pulled target time from ${targetTime} to ${finalTargetTime}`);
+    }
+    const mediaSequenceSyncInfo = this.mediaSequenceSync_.getSyncInfoForTime(finalTargetTime);
+    if (!mediaSequenceSyncInfo) {
+      // no match at all
+      return null;
+    }
+    if (!mediaSequenceSyncInfo.isAppended) {
+      // has a perfect match
+      return mediaSequenceSyncInfo;
+    } // has match, but segment was already appended.
+    // attempt to auto-advance to the nearest next segment:
+
+    const nextMediaSequenceSyncInfo = this.mediaSequenceSync_.getSyncInfoForTime(mediaSequenceSyncInfo.end);
+    if (!nextMediaSequenceSyncInfo) {
+      // no match at all
+      return null;
+    }
+    if (nextMediaSequenceSyncInfo.isAppended) {
+      this.logger_('getSyncInfoFromMediaSequenceSync_: We encounter unexpected scenario where next media sequence sync info is also appended!');
+    } // got match with the nearest next segment
+
+    return nextMediaSequenceSyncInfo;
+  }
+  generateSegmentInfo_(options) {
+    const {
+      independent,
+      playlist,
+      mediaIndex,
+      startOfSegment,
+      isSyncRequest,
+      partIndex,
+      forceTimestampOffset,
+      getMediaInfoForTime
+    } = options;
+    const segment = playlist.segments[mediaIndex];
+    const part = typeof partIndex === 'number' && segment.parts[partIndex];
+    const segmentInfo = {
+      requestId: 'segment-loader-' + Math.random(),
+      // resolve the segment URL relative to the playlist
+      uri: part && part.resolvedUri || segment.resolvedUri,
+      // the segment's mediaIndex at the time it was requested
+      mediaIndex,
+      partIndex: part ? partIndex : null,
+      // whether or not to update the SegmentLoader's state with this
+      // segment's mediaIndex
+      isSyncRequest,
+      startOfSegment,
+      // the segment's playlist
+      playlist,
+      // unencrypted bytes of the segment
+      bytes: null,
+      // when a key is defined for this segment, the encrypted bytes
+      encryptedBytes: null,
+      // The target timestampOffset for this segment when we append it
+      // to the source buffer
+      timestampOffset: null,
+      // The timeline that the segment is in
+      timeline: segment.timeline,
+      // The expected duration of the segment in seconds
+      duration: part && part.duration || segment.duration,
+      // retain the segment in case the playlist updates while doing an async process
+      segment,
+      part,
+      byteLength: 0,
+      transmuxer: this.transmuxer_,
+      // type of getMediaInfoForTime that was used to get this segment
+      getMediaInfoForTime,
+      independent
+    };
+    const overrideCheck = typeof forceTimestampOffset !== 'undefined' ? forceTimestampOffset : this.isPendingTimestampOffset_;
+    segmentInfo.timestampOffset = this.timestampOffsetForSegment_({
+      segmentTimeline: segment.timeline,
+      currentTimeline: this.currentTimeline_,
+      startOfSegment,
+      buffered: this.buffered_(),
+      overrideCheck
+    });
+    const audioBufferedEnd = lastBufferedEnd(this.sourceUpdater_.audioBuffered());
+    if (typeof audioBufferedEnd === 'number') {
+      // since the transmuxer is using the actual timing values, but the buffer is
+      // adjusted by the timestamp offset, we must adjust the value here
+      segmentInfo.audioAppendStart = audioBufferedEnd - this.sourceUpdater_.audioTimestampOffset();
+    }
+    if (this.sourceUpdater_.videoBuffered().length) {
+      segmentInfo.gopsToAlignWith = gopsSafeToAlignWith(this.gopBuffer_,
+      // since the transmuxer is using the actual timing values, but the time is
+      // adjusted by the timestmap offset, we must adjust the value here
+      this.currentTime_() - this.sourceUpdater_.videoTimestampOffset(), this.timeMapping_);
+    }
+    return segmentInfo;
+  } // get the timestampoffset for a segment,
+  // added so that vtt segment loader can override and prevent
+  // adding timestamp offsets.
+
+  timestampOffsetForSegment_(options) {
+    return timestampOffsetForSegment(options);
+  }
+  /**
+   * Determines if the network has enough bandwidth to complete the current segment
+   * request in a timely manner. If not, the request will be aborted early and bandwidth
+   * updated to trigger a playlist switch.
+   *
+   * @param {Object} stats
+   *        Object containing stats about the request timing and size
+   * @private
+   */
+
+  earlyAbortWhenNeeded_(stats) {
+    if (this.vhs_.tech_.paused() ||
+    // Don't abort if the current playlist is on the lowestEnabledRendition
+    // TODO: Replace using timeout with a boolean indicating whether this playlist is
+    //       the lowestEnabledRendition.
+    !this.xhrOptions_.timeout ||
+    // Don't abort if we have no bandwidth information to estimate segment sizes
+    !this.playlist_.attributes.BANDWIDTH) {
+      return;
+    } // Wait at least 1 second since the first byte of data has been received before
+    // using the calculated bandwidth from the progress event to allow the bitrate
+    // to stabilize
+
+    if (Date.now() - (stats.firstBytesReceivedAt || Date.now()) < 1000) {
+      return;
+    }
+    const currentTime = this.currentTime_();
+    const measuredBandwidth = stats.bandwidth;
+    const segmentDuration = this.pendingSegment_.duration;
+    const requestTimeRemaining = Playlist.estimateSegmentRequestTime(segmentDuration, measuredBandwidth, this.playlist_, stats.bytesReceived); // Subtract 1 from the timeUntilRebuffer so we still consider an early abort
+    // if we are only left with less than 1 second when the request completes.
+    // A negative timeUntilRebuffering indicates we are already rebuffering
+
+    const timeUntilRebuffer$1 = timeUntilRebuffer(this.buffered_(), currentTime, this.vhs_.tech_.playbackRate()) - 1; // Only consider aborting early if the estimated time to finish the download
+    // is larger than the estimated time until the player runs out of forward buffer
+
+    if (requestTimeRemaining <= timeUntilRebuffer$1) {
+      return;
+    }
+    const switchCandidate = minRebufferMaxBandwidthSelector({
+      main: this.vhs_.playlists.main,
+      currentTime,
+      bandwidth: measuredBandwidth,
+      duration: this.duration_(),
+      segmentDuration,
+      timeUntilRebuffer: timeUntilRebuffer$1,
+      currentTimeline: this.currentTimeline_,
+      syncController: this.syncController_
+    });
+    if (!switchCandidate) {
+      return;
+    }
+    const rebufferingImpact = requestTimeRemaining - timeUntilRebuffer$1;
+    const timeSavedBySwitching = rebufferingImpact - switchCandidate.rebufferingImpact;
+    let minimumTimeSaving = 0.5; // If we are already rebuffering, increase the amount of variance we add to the
+    // potential round trip time of the new request so that we are not too aggressive
+    // with switching to a playlist that might save us a fraction of a second.
+
+    if (timeUntilRebuffer$1 <= TIME_FUDGE_FACTOR) {
+      minimumTimeSaving = 1;
+    }
+    if (!switchCandidate.playlist || switchCandidate.playlist.uri === this.playlist_.uri || timeSavedBySwitching < minimumTimeSaving) {
+      return;
+    } // set the bandwidth to that of the desired playlist being sure to scale by
+    // BANDWIDTH_VARIANCE and add one so the playlist selector does not exclude it
+    // don't trigger a bandwidthupdate as the bandwidth is artifial
+
+    this.bandwidth = switchCandidate.playlist.attributes.BANDWIDTH * Config.BANDWIDTH_VARIANCE + 1;
+    this.trigger('earlyabort');
+  }
+  handleAbort_(segmentInfo) {
+    this.logger_(`Aborting ${segmentInfoString(segmentInfo)}`);
+    this.mediaRequestsAborted += 1;
+  }
+  /**
+   * XHR `progress` event handler
+   *
+   * @param {Event}
+   *        The XHR `progress` event
+   * @param {Object} simpleSegment
+   *        A simplified segment object copy
+   * @private
+   */
+
+  handleProgress_(event, simpleSegment) {
+    this.earlyAbortWhenNeeded_(simpleSegment.stats);
+    if (this.checkForAbort_(simpleSegment.requestId)) {
+      return;
+    }
+    this.trigger('progress');
+  }
+  handleTrackInfo_(simpleSegment, trackInfo) {
+    this.earlyAbortWhenNeeded_(simpleSegment.stats);
+    if (this.checkForAbort_(simpleSegment.requestId)) {
+      return;
+    }
+    if (this.checkForIllegalMediaSwitch(trackInfo)) {
+      return;
+    }
+    trackInfo = trackInfo || {}; // When we have track info, determine what media types this loader is dealing with.
+    // Guard against cases where we're not getting track info at all until we are
+    // certain that all streams will provide it.
+
+    if (!shallowEqual(this.currentMediaInfo_, trackInfo)) {
+      this.appendInitSegment_ = {
+        audio: true,
+        video: true
+      };
+      this.startingMediaInfo_ = trackInfo;
+      this.currentMediaInfo_ = trackInfo;
+      this.logger_('trackinfo update', trackInfo);
+      this.trigger('trackinfo');
+    } // trackinfo may cause an abort if the trackinfo
+    // causes a codec change to an unsupported codec.
+
+    if (this.checkForAbort_(simpleSegment.requestId)) {
+      return;
+    } // set trackinfo on the pending segment so that
+    // it can append.
+
+    this.pendingSegment_.trackInfo = trackInfo; // check if any calls were waiting on the track info
+
+    if (this.hasEnoughInfoToAppend_()) {
+      this.processCallQueue_();
+    }
+  }
+  handleTimingInfo_(simpleSegment, mediaType, timeType, time) {
+    this.earlyAbortWhenNeeded_(simpleSegment.stats);
+    if (this.checkForAbort_(simpleSegment.requestId)) {
+      return;
+    }
+    const segmentInfo = this.pendingSegment_;
+    const timingInfoProperty = timingInfoPropertyForMedia(mediaType);
+    segmentInfo[timingInfoProperty] = segmentInfo[timingInfoProperty] || {};
+    segmentInfo[timingInfoProperty][timeType] = time;
+    this.logger_(`timinginfo: ${mediaType} - ${timeType} - ${time}`); // check if any calls were waiting on the timing info
+
+    if (this.hasEnoughInfoToAppend_()) {
+      this.processCallQueue_();
+    }
+  }
+  handleCaptions_(simpleSegment, captionData) {
+    this.earlyAbortWhenNeeded_(simpleSegment.stats);
+    if (this.checkForAbort_(simpleSegment.requestId)) {
+      return;
+    } // This could only happen with fmp4 segments, but
+    // should still not happen in general
+
+    if (captionData.length === 0) {
+      this.logger_('SegmentLoader received no captions from a caption event');
+      return;
+    }
+    const segmentInfo = this.pendingSegment_; // Wait until we have some video data so that caption timing
+    // can be adjusted by the timestamp offset
+
+    if (!segmentInfo.hasAppendedData_) {
+      this.metadataQueue_.caption.push(this.handleCaptions_.bind(this, simpleSegment, captionData));
+      return;
+    }
+    const timestampOffset = this.sourceUpdater_.videoTimestampOffset() === null ? this.sourceUpdater_.audioTimestampOffset() : this.sourceUpdater_.videoTimestampOffset();
+    const captionTracks = {}; // get total start/end and captions for each track/stream
+
+    captionData.forEach(caption => {
+      // caption.stream is actually a track name...
+      // set to the existing values in tracks or default values
+      captionTracks[caption.stream] = captionTracks[caption.stream] || {
+        // Infinity, as any other value will be less than this
+        startTime: Infinity,
+        captions: [],
+        // 0 as an other value will be more than this
+        endTime: 0
+      };
+      const captionTrack = captionTracks[caption.stream];
+      captionTrack.startTime = Math.min(captionTrack.startTime, caption.startTime + timestampOffset);
+      captionTrack.endTime = Math.max(captionTrack.endTime, caption.endTime + timestampOffset);
+      captionTrack.captions.push(caption);
+    });
+    Object.keys(captionTracks).forEach(trackName => {
+      const {
+        startTime,
+        endTime,
+        captions
+      } = captionTracks[trackName];
+      const inbandTextTracks = this.inbandTextTracks_;
+      this.logger_(`adding cues from ${startTime} -> ${endTime} for ${trackName}`);
+      createCaptionsTrackIfNotExists(inbandTextTracks, this.vhs_.tech_, trackName); // clear out any cues that start and end at the same time period for the same track.
+      // We do this because a rendition change that also changes the timescale for captions
+      // will result in captions being re-parsed for certain segments. If we add them again
+      // without clearing we will have two of the same captions visible.
+
+      removeCuesFromTrack(startTime, endTime, inbandTextTracks[trackName]);
+      addCaptionData({
+        captionArray: captions,
+        inbandTextTracks,
+        timestampOffset
+      });
+    }); // Reset stored captions since we added parsed
+    // captions to a text track at this point
+
+    if (this.transmuxer_) {
+      this.transmuxer_.postMessage({
+        action: 'clearParsedMp4Captions'
+      });
+    }
+  }
+  handleId3_(simpleSegment, id3Frames, dispatchType) {
+    this.earlyAbortWhenNeeded_(simpleSegment.stats);
+    if (this.checkForAbort_(simpleSegment.requestId)) {
+      return;
+    }
+    const segmentInfo = this.pendingSegment_; // we need to have appended data in order for the timestamp offset to be set
+
+    if (!segmentInfo.hasAppendedData_) {
+      this.metadataQueue_.id3.push(this.handleId3_.bind(this, simpleSegment, id3Frames, dispatchType));
+      return;
+    }
+    this.addMetadataToTextTrack(dispatchType, id3Frames, this.duration_());
+  }
+  processMetadataQueue_() {
+    this.metadataQueue_.id3.forEach(fn => fn());
+    this.metadataQueue_.caption.forEach(fn => fn());
+    this.metadataQueue_.id3 = [];
+    this.metadataQueue_.caption = [];
+  }
+  processCallQueue_() {
+    const callQueue = this.callQueue_; // Clear out the queue before the queued functions are run, since some of the
+    // functions may check the length of the load queue and default to pushing themselves
+    // back onto the queue.
+
+    this.callQueue_ = [];
+    callQueue.forEach(fun => fun());
+  }
+  processLoadQueue_() {
+    const loadQueue = this.loadQueue_; // Clear out the queue before the queued functions are run, since some of the
+    // functions may check the length of the load queue and default to pushing themselves
+    // back onto the queue.
+
+    this.loadQueue_ = [];
+    loadQueue.forEach(fun => fun());
+  }
+  /**
+   * Determines whether the loader has enough info to load the next segment.
+   *
+   * @return {boolean}
+   *         Whether or not the loader has enough info to load the next segment
+   */
+
+  hasEnoughInfoToLoad_() {
+    // Since primary timing goes by video, only the audio loader potentially needs to wait
+    // to load.
+    if (this.loaderType_ !== 'audio') {
+      return true;
+    }
+    const segmentInfo = this.pendingSegment_; // A fill buffer must have already run to establish a pending segment before there's
+    // enough info to load.
+
+    if (!segmentInfo) {
+      return false;
+    } // The first segment can and should be loaded immediately so that source buffers are
+    // created together (before appending). Source buffer creation uses the presence of
+    // audio and video data to determine whether to create audio/video source buffers, and
+    // uses processed (transmuxed or parsed) media to determine the types required.
+
+    if (!this.getCurrentMediaInfo_()) {
+      return true;
+    }
+    if (
+    // Technically, instead of waiting to load a segment on timeline changes, a segment
+    // can be requested and downloaded and only wait before it is transmuxed or parsed.
+    // But in practice, there are a few reasons why it is better to wait until a loader
+    // is ready to append that segment before requesting and downloading:
+    //
+    // 1. Because audio and main loaders cross discontinuities together, if this loader
+    //    is waiting for the other to catch up, then instead of requesting another
+    //    segment and using up more bandwidth, by not yet loading, more bandwidth is
+    //    allotted to the loader currently behind.
+    // 2. media-segment-request doesn't have to have logic to consider whether a segment
+    // is ready to be processed or not, isolating the queueing behavior to the loader.
+    // 3. The audio loader bases some of its segment properties on timing information
+    //    provided by the main loader, meaning that, if the logic for waiting on
+    //    processing was in media-segment-request, then it would also need to know how
+    //    to re-generate the segment information after the main loader caught up.
+    shouldWaitForTimelineChange({
+      timelineChangeController: this.timelineChangeController_,
+      currentTimeline: this.currentTimeline_,
+      segmentTimeline: segmentInfo.timeline,
+      loaderType: this.loaderType_,
+      audioDisabled: this.audioDisabled_
+    })) {
+      return false;
+    }
+    return true;
+  }
+  getCurrentMediaInfo_(segmentInfo = this.pendingSegment_) {
+    return segmentInfo && segmentInfo.trackInfo || this.currentMediaInfo_;
+  }
+  getMediaInfo_(segmentInfo = this.pendingSegment_) {
+    return this.getCurrentMediaInfo_(segmentInfo) || this.startingMediaInfo_;
+  }
+  getPendingSegmentPlaylist() {
+    return this.pendingSegment_ ? this.pendingSegment_.playlist : null;
+  }
+  hasEnoughInfoToAppend_() {
+    if (!this.sourceUpdater_.ready()) {
+      return false;
+    } // If content needs to be removed or the loader is waiting on an append reattempt,
+    // then no additional content should be appended until the prior append is resolved.
+
+    if (this.waitingOnRemove_ || this.quotaExceededErrorRetryTimeout_) {
+      return false;
+    }
+    const segmentInfo = this.pendingSegment_;
+    const trackInfo = this.getCurrentMediaInfo_(); // no segment to append any data for or
+    // we do not have information on this specific
+    // segment yet
+
+    if (!segmentInfo || !trackInfo) {
+      return false;
+    }
+    const {
+      hasAudio,
+      hasVideo,
+      isMuxed
+    } = trackInfo;
+    if (hasVideo && !segmentInfo.videoTimingInfo) {
+      return false;
+    } // muxed content only relies on video timing information for now.
+
+    if (hasAudio && !this.audioDisabled_ && !isMuxed && !segmentInfo.audioTimingInfo) {
+      return false;
+    }
+    if (shouldWaitForTimelineChange({
+      timelineChangeController: this.timelineChangeController_,
+      currentTimeline: this.currentTimeline_,
+      segmentTimeline: segmentInfo.timeline,
+      loaderType: this.loaderType_,
+      audioDisabled: this.audioDisabled_
+    })) {
+      return false;
+    }
+    return true;
+  }
+  handleData_(simpleSegment, result) {
+    this.earlyAbortWhenNeeded_(simpleSegment.stats);
+    if (this.checkForAbort_(simpleSegment.requestId)) {
+      return;
+    } // If there's anything in the call queue, then this data came later and should be
+    // executed after the calls currently queued.
+
+    if (this.callQueue_.length || !this.hasEnoughInfoToAppend_()) {
+      this.callQueue_.push(this.handleData_.bind(this, simpleSegment, result));
+      return;
+    }
+    const segmentInfo = this.pendingSegment_; // update the time mapping so we can translate from display time to media time
+
+    this.setTimeMapping_(segmentInfo.timeline); // for tracking overall stats
+
+    this.updateMediaSecondsLoaded_(segmentInfo.part || segmentInfo.segment); // Note that the state isn't changed from loading to appending. This is because abort
+    // logic may change behavior depending on the state, and changing state too early may
+    // inflate our estimates of bandwidth. In the future this should be re-examined to
+    // note more granular states.
+    // don't process and append data if the mediaSource is closed
+
+    if (this.mediaSource_.readyState === 'closed') {
+      return;
+    } // if this request included an initialization segment, save that data
+    // to the initSegment cache
+
+    if (simpleSegment.map) {
+      simpleSegment.map = this.initSegmentForMap(simpleSegment.map, true); // move over init segment properties to media request
+
+      segmentInfo.segment.map = simpleSegment.map;
+    } // if this request included a segment key, save that data in the cache
+
+    if (simpleSegment.key) {
+      this.segmentKey(simpleSegment.key, true);
+    }
+    segmentInfo.isFmp4 = simpleSegment.isFmp4;
+    segmentInfo.timingInfo = segmentInfo.timingInfo || {};
+    if (segmentInfo.isFmp4) {
+      this.trigger('fmp4');
+      segmentInfo.timingInfo.start = segmentInfo[timingInfoPropertyForMedia(result.type)].start;
+    } else {
+      const trackInfo = this.getCurrentMediaInfo_();
+      const useVideoTimingInfo = this.loaderType_ === 'main' && trackInfo && trackInfo.hasVideo;
+      let firstVideoFrameTimeForData;
+      if (useVideoTimingInfo) {
+        firstVideoFrameTimeForData = segmentInfo.videoTimingInfo.start;
+      } // Segment loader knows more about segment timing than the transmuxer (in certain
+      // aspects), so make any changes required for a more accurate start time.
+      // Don't set the end time yet, as the segment may not be finished processing.
+
+      segmentInfo.timingInfo.start = this.trueSegmentStart_({
+        currentStart: segmentInfo.timingInfo.start,
+        playlist: segmentInfo.playlist,
+        mediaIndex: segmentInfo.mediaIndex,
+        currentVideoTimestampOffset: this.sourceUpdater_.videoTimestampOffset(),
+        useVideoTimingInfo,
+        firstVideoFrameTimeForData,
+        videoTimingInfo: segmentInfo.videoTimingInfo,
+        audioTimingInfo: segmentInfo.audioTimingInfo
+      });
+    } // Init segments for audio and video only need to be appended in certain cases. Now
+    // that data is about to be appended, we can check the final cases to determine
+    // whether we should append an init segment.
+
+    this.updateAppendInitSegmentStatus(segmentInfo, result.type); // Timestamp offset should be updated once we get new data and have its timing info,
+    // as we use the start of the segment to offset the best guess (playlist provided)
+    // timestamp offset.
+
+    this.updateSourceBufferTimestampOffset_(segmentInfo); // if this is a sync request we need to determine whether it should
+    // be appended or not.
+
+    if (segmentInfo.isSyncRequest) {
+      // first save/update our timing info for this segment.
+      // this is what allows us to choose an accurate segment
+      // and the main reason we make a sync request.
+      this.updateTimingInfoEnd_(segmentInfo);
+      this.syncController_.saveSegmentTimingInfo({
+        segmentInfo,
+        shouldSaveTimelineMapping: this.loaderType_ === 'main'
+      });
+      const next = this.chooseNextRequest_(); // If the sync request isn't the segment that would be requested next
+      // after taking into account its timing info, do not append it.
+
+      if (next.mediaIndex !== segmentInfo.mediaIndex || next.partIndex !== segmentInfo.partIndex) {
+        this.logger_('sync segment was incorrect, not appending');
+        return;
+      } // otherwise append it like any other segment as our guess was correct.
+
+      this.logger_('sync segment was correct, appending');
+    } // Save some state so that in the future anything waiting on first append (and/or
+    // timestamp offset(s)) can process immediately. While the extra state isn't optimal,
+    // we need some notion of whether the timestamp offset or other relevant information
+    // has had a chance to be set.
+
+    segmentInfo.hasAppendedData_ = true; // Now that the timestamp offset should be set, we can append any waiting ID3 tags.
+
+    this.processMetadataQueue_();
+    this.appendData_(segmentInfo, result);
+  }
+  updateAppendInitSegmentStatus(segmentInfo, type) {
+    // alt audio doesn't manage timestamp offset
+    if (this.loaderType_ === 'main' && typeof segmentInfo.timestampOffset === 'number' &&
+    // in the case that we're handling partial data, we don't want to append an init
+    // segment for each chunk
+    !segmentInfo.changedTimestampOffset) {
+      // if the timestamp offset changed, the timeline may have changed, so we have to re-
+      // append init segments
+      this.appendInitSegment_ = {
+        audio: true,
+        video: true
+      };
+    }
+    if (this.playlistOfLastInitSegment_[type] !== segmentInfo.playlist) {
+      // make sure we append init segment on playlist changes, in case the media config
+      // changed
+      this.appendInitSegment_[type] = true;
+    }
+  }
+  getInitSegmentAndUpdateState_({
+    type,
+    initSegment,
+    map,
+    playlist
+  }) {
+    // "The EXT-X-MAP tag specifies how to obtain the Media Initialization Section
+    // (Section 3) required to parse the applicable Media Segments.  It applies to every
+    // Media Segment that appears after it in the Playlist until the next EXT-X-MAP tag
+    // or until the end of the playlist."
+    // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.2.5
+    if (map) {
+      const id = initSegmentId(map);
+      if (this.activeInitSegmentId_ === id) {
+        // don't need to re-append the init segment if the ID matches
+        return null;
+      } // a map-specified init segment takes priority over any transmuxed (or otherwise
+      // obtained) init segment
+      //
+      // this also caches the init segment for later use
+
+      initSegment = this.initSegmentForMap(map, true).bytes;
+      this.activeInitSegmentId_ = id;
+    } // We used to always prepend init segments for video, however, that shouldn't be
+    // necessary. Instead, we should only append on changes, similar to what we've always
+    // done for audio. This is more important (though may not be that important) for
+    // frame-by-frame appending for LHLS, simply because of the increased quantity of
+    // appends.
+
+    if (initSegment && this.appendInitSegment_[type]) {
+      // Make sure we track the playlist that we last used for the init segment, so that
+      // we can re-append the init segment in the event that we get data from a new
+      // playlist. Discontinuities and track changes are handled in other sections.
+      this.playlistOfLastInitSegment_[type] = playlist; // Disable future init segment appends for this type. Until a change is necessary.
+
+      this.appendInitSegment_[type] = false; // we need to clear out the fmp4 active init segment id, since
+      // we are appending the muxer init segment
+
+      this.activeInitSegmentId_ = null;
+      return initSegment;
+    }
+    return null;
+  }
+  handleQuotaExceededError_({
+    segmentInfo,
+    type,
+    bytes
+  }, error) {
+    const audioBuffered = this.sourceUpdater_.audioBuffered();
+    const videoBuffered = this.sourceUpdater_.videoBuffered(); // For now we're ignoring any notion of gaps in the buffer, but they, in theory,
+    // should be cleared out during the buffer removals. However, log in case it helps
+    // debug.
+
+    if (audioBuffered.length > 1) {
+      this.logger_('On QUOTA_EXCEEDED_ERR, found gaps in the audio buffer: ' + timeRangesToArray(audioBuffered).join(', '));
+    }
+    if (videoBuffered.length > 1) {
+      this.logger_('On QUOTA_EXCEEDED_ERR, found gaps in the video buffer: ' + timeRangesToArray(videoBuffered).join(', '));
+    }
+    const audioBufferStart = audioBuffered.length ? audioBuffered.start(0) : 0;
+    const audioBufferEnd = audioBuffered.length ? audioBuffered.end(audioBuffered.length - 1) : 0;
+    const videoBufferStart = videoBuffered.length ? videoBuffered.start(0) : 0;
+    const videoBufferEnd = videoBuffered.length ? videoBuffered.end(videoBuffered.length - 1) : 0;
+    if (audioBufferEnd - audioBufferStart <= MIN_BACK_BUFFER && videoBufferEnd - videoBufferStart <= MIN_BACK_BUFFER) {
+      // Can't remove enough buffer to make room for new segment (or the browser doesn't
+      // allow for appends of segments this size). In the future, it may be possible to
+      // split up the segment and append in pieces, but for now, error out this playlist
+      // in an attempt to switch to a more manageable rendition.
+      this.logger_('On QUOTA_EXCEEDED_ERR, single segment too large to append to ' + 'buffer, triggering an error. ' + `Appended byte length: ${bytes.byteLength}, ` + `audio buffer: ${timeRangesToArray(audioBuffered).join(', ')}, ` + `video buffer: ${timeRangesToArray(videoBuffered).join(', ')}, `);
+      this.error({
+        message: 'Quota exceeded error with append of a single segment of content',
+        excludeUntil: Infinity,
+        metadata: {
+          errorType: videojs.Error.SegmentExceedsSourceBufferQuota
+        }
+      });
+      this.trigger('error');
+      return;
+    } // To try to resolve the quota exceeded error, clear back buffer and retry. This means
+    // that the segment-loader should block on future events until this one is handled, so
+    // that it doesn't keep moving onto further segments. Adding the call to the call
+    // queue will prevent further appends until waitingOnRemove_ and
+    // quotaExceededErrorRetryTimeout_ are cleared.
+    //
+    // Note that this will only block the current loader. In the case of demuxed content,
+    // the other load may keep filling as fast as possible. In practice, this should be
+    // OK, as it is a rare case when either audio has a high enough bitrate to fill up a
+    // source buffer, or video fills without enough room for audio to append (and without
+    // the availability of clearing out seconds of back buffer to make room for audio).
+    // But it might still be good to handle this case in the future as a TODO.
+
+    this.waitingOnRemove_ = true;
+    this.callQueue_.push(this.appendToSourceBuffer_.bind(this, {
+      segmentInfo,
+      type,
+      bytes
+    }));
+    const currentTime = this.currentTime_(); // Try to remove as much audio and video as possible to make room for new content
+    // before retrying.
+
+    const timeToRemoveUntil = currentTime - MIN_BACK_BUFFER;
+    this.logger_(`On QUOTA_EXCEEDED_ERR, removing audio/video from 0 to ${timeToRemoveUntil}`);
+    this.remove(0, timeToRemoveUntil, () => {
+      this.logger_(`On QUOTA_EXCEEDED_ERR, retrying append in ${MIN_BACK_BUFFER}s`);
+      this.waitingOnRemove_ = false; // wait the length of time alotted in the back buffer to prevent wasted
+      // attempts (since we can't clear less than the minimum)
+
+      this.quotaExceededErrorRetryTimeout_ = window$1.setTimeout(() => {
+        this.logger_('On QUOTA_EXCEEDED_ERR, re-processing call queue');
+        this.quotaExceededErrorRetryTimeout_ = null;
+        this.processCallQueue_();
+      }, MIN_BACK_BUFFER * 1000);
+    }, true);
+  }
+  handleAppendError_({
+    segmentInfo,
+    type,
+    bytes
+  }, error) {
+    // if there's no error, nothing to do
+    if (!error) {
+      return;
+    }
+    if (error.code === QUOTA_EXCEEDED_ERR) {
+      this.handleQuotaExceededError_({
+        segmentInfo,
+        type,
+        bytes
+      }); // A quota exceeded error should be recoverable with a future re-append, so no need
+      // to trigger an append error.
+
+      return;
+    }
+    this.logger_('Received non QUOTA_EXCEEDED_ERR on append', error); // If an append errors, we often can't recover.
+    // (see https://w3c.github.io/media-source/#sourcebuffer-append-error).
+    //
+    // Trigger a special error so that it can be handled separately from normal,
+    // recoverable errors.
+
+    this.error({
+      message: `${type} append of ${bytes.length}b failed for segment ` + `#${segmentInfo.mediaIndex} in playlist ${segmentInfo.playlist.id}`,
+      metadata: {
+        errorType: videojs.Error.SegmentAppendError
+      }
+    });
+    this.trigger('appenderror');
+  }
+  appendToSourceBuffer_({
+    segmentInfo,
+    type,
+    initSegment,
+    data,
+    bytes
+  }) {
+    // If this is a re-append, bytes were already created and don't need to be recreated
+    if (!bytes) {
+      const segments = [data];
+      let byteLength = data.byteLength;
+      if (initSegment) {
+        // if the media initialization segment is changing, append it before the content
+        // segment
+        segments.unshift(initSegment);
+        byteLength += initSegment.byteLength;
+      } // Technically we should be OK appending the init segment separately, however, we
+      // haven't yet tested that, and prepending is how we have always done things.
+
+      bytes = concatSegments({
+        bytes: byteLength,
+        segments
+      });
+    }
+    this.sourceUpdater_.appendBuffer({
+      segmentInfo,
+      type,
+      bytes
+    }, this.handleAppendError_.bind(this, {
+      segmentInfo,
+      type,
+      bytes
+    }));
+  }
+  handleSegmentTimingInfo_(type, requestId, segmentTimingInfo) {
+    if (!this.pendingSegment_ || requestId !== this.pendingSegment_.requestId) {
+      return;
+    }
+    const segment = this.pendingSegment_.segment;
+    const timingInfoProperty = `${type}TimingInfo`;
+    if (!segment[timingInfoProperty]) {
+      segment[timingInfoProperty] = {};
+    }
+    segment[timingInfoProperty].transmuxerPrependedSeconds = segmentTimingInfo.prependedContentDuration || 0;
+    segment[timingInfoProperty].transmuxedPresentationStart = segmentTimingInfo.start.presentation;
+    segment[timingInfoProperty].transmuxedDecodeStart = segmentTimingInfo.start.decode;
+    segment[timingInfoProperty].transmuxedPresentationEnd = segmentTimingInfo.end.presentation;
+    segment[timingInfoProperty].transmuxedDecodeEnd = segmentTimingInfo.end.decode; // mainly used as a reference for debugging
+
+    segment[timingInfoProperty].baseMediaDecodeTime = segmentTimingInfo.baseMediaDecodeTime;
+  }
+  appendData_(segmentInfo, result) {
+    const {
+      type,
+      data
+    } = result;
+    if (!data || !data.byteLength) {
+      return;
+    }
+    if (type === 'audio' && this.audioDisabled_) {
+      return;
+    }
+    const initSegment = this.getInitSegmentAndUpdateState_({
+      type,
+      initSegment: result.initSegment,
+      playlist: segmentInfo.playlist,
+      map: segmentInfo.isFmp4 ? segmentInfo.segment.map : null
+    });
+    this.appendToSourceBuffer_({
+      segmentInfo,
+      type,
+      initSegment,
+      data
+    });
+  }
+  /**
+   * load a specific segment from a request into the buffer
+   *
+   * @private
+   */
+
+  loadSegment_(segmentInfo) {
+    this.state = 'WAITING';
+    this.pendingSegment_ = segmentInfo;
+    this.trimBackBuffer_(segmentInfo);
+    if (typeof segmentInfo.timestampOffset === 'number') {
+      if (this.transmuxer_) {
+        this.transmuxer_.postMessage({
+          action: 'clearAllMp4Captions'
+        });
+      }
+    }
+    if (!this.hasEnoughInfoToLoad_()) {
+      this.loadQueue_.push(() => {
+        // regenerate the audioAppendStart, timestampOffset, etc as they
+        // may have changed since this function was added to the queue.
+        const options = _extends({}, segmentInfo, {
+          forceTimestampOffset: true
+        });
+        _extends(segmentInfo, this.generateSegmentInfo_(options));
+        this.isPendingTimestampOffset_ = false;
+        this.updateTransmuxerAndRequestSegment_(segmentInfo);
+      });
+      return;
+    }
+    this.updateTransmuxerAndRequestSegment_(segmentInfo);
+  }
+  updateTransmuxerAndRequestSegment_(segmentInfo) {
+    // We'll update the source buffer's timestamp offset once we have transmuxed data, but
+    // the transmuxer still needs to be updated before then.
+    //
+    // Even though keepOriginalTimestamps is set to true for the transmuxer, timestamp
+    // offset must be passed to the transmuxer for stream correcting adjustments.
+    if (this.shouldUpdateTransmuxerTimestampOffset_(segmentInfo.timestampOffset)) {
+      this.gopBuffer_.length = 0; // gopsToAlignWith was set before the GOP buffer was cleared
+
+      segmentInfo.gopsToAlignWith = [];
+      this.timeMapping_ = 0; // reset values in the transmuxer since a discontinuity should start fresh
+
+      this.transmuxer_.postMessage({
+        action: 'reset'
+      });
+      this.transmuxer_.postMessage({
+        action: 'setTimestampOffset',
+        timestampOffset: segmentInfo.timestampOffset
+      });
+    }
+    const simpleSegment = this.createSimplifiedSegmentObj_(segmentInfo);
+    const isEndOfStream = this.isEndOfStream_(segmentInfo.mediaIndex, segmentInfo.playlist, segmentInfo.partIndex);
+    const isWalkingForward = this.mediaIndex !== null;
+    const isDiscontinuity = segmentInfo.timeline !== this.currentTimeline_ &&
+    // currentTimeline starts at -1, so we shouldn't end the timeline switching to 0,
+    // the first timeline
+    segmentInfo.timeline > 0;
+    const isEndOfTimeline = isEndOfStream || isWalkingForward && isDiscontinuity;
+    this.logger_(`Requesting
+${compactSegmentUrlDescription(segmentInfo.uri)}
+${segmentInfoString(segmentInfo)}`); // If there's an init segment associated with this segment, but it is not cached (identified by a lack of bytes),
+    // then this init segment has never been seen before and should be appended.
+    //
+    // At this point the content type (audio/video or both) is not yet known, but it should be safe to set
+    // both to true and leave the decision of whether to append the init segment to append time.
+
+    if (simpleSegment.map && !simpleSegment.map.bytes) {
+      this.logger_('going to request init segment.');
+      this.appendInitSegment_ = {
+        video: true,
+        audio: true
+      };
+    }
+    segmentInfo.abortRequests = mediaSegmentRequest({
+      xhr: this.vhs_.xhr,
+      xhrOptions: this.xhrOptions_,
+      decryptionWorker: this.decrypter_,
+      segment: simpleSegment,
+      abortFn: this.handleAbort_.bind(this, segmentInfo),
+      progressFn: this.handleProgress_.bind(this),
+      trackInfoFn: this.handleTrackInfo_.bind(this),
+      timingInfoFn: this.handleTimingInfo_.bind(this),
+      videoSegmentTimingInfoFn: this.handleSegmentTimingInfo_.bind(this, 'video', segmentInfo.requestId),
+      audioSegmentTimingInfoFn: this.handleSegmentTimingInfo_.bind(this, 'audio', segmentInfo.requestId),
+      captionsFn: this.handleCaptions_.bind(this),
+      isEndOfTimeline,
+      endedTimelineFn: () => {
+        this.logger_('received endedtimeline callback');
+      },
+      id3Fn: this.handleId3_.bind(this),
+      dataFn: this.handleData_.bind(this),
+      doneFn: this.segmentRequestFinished_.bind(this),
+      onTransmuxerLog: ({
+        message,
+        level,
+        stream
+      }) => {
+        this.logger_(`${segmentInfoString(segmentInfo)} logged from transmuxer stream ${stream} as a ${level}: ${message}`);
+      }
+    });
+  }
+  /**
+   * trim the back buffer so that we don't have too much data
+   * in the source buffer
+   *
+   * @private
+   *
+   * @param {Object} segmentInfo - the current segment
+   */
+
+  trimBackBuffer_(segmentInfo) {
+    const removeToTime = safeBackBufferTrimTime(this.seekable_(), this.currentTime_(), this.playlist_.targetDuration || 10); // Chrome has a hard limit of 150MB of
+    // buffer and a very conservative "garbage collector"
+    // We manually clear out the old buffer to ensure
+    // we don't trigger the QuotaExceeded error
+    // on the source buffer during subsequent appends
+
+    if (removeToTime > 0) {
+      this.remove(0, removeToTime);
+    }
+  }
+  /**
+   * created a simplified copy of the segment object with just the
+   * information necessary to perform the XHR and decryption
+   *
+   * @private
+   *
+   * @param {Object} segmentInfo - the current segment
+   * @return {Object} a simplified segment object copy
+   */
+
+  createSimplifiedSegmentObj_(segmentInfo) {
+    const segment = segmentInfo.segment;
+    const part = segmentInfo.part;
+    const simpleSegment = {
+      resolvedUri: part ? part.resolvedUri : segment.resolvedUri,
+      byterange: part ? part.byterange : segment.byterange,
+      requestId: segmentInfo.requestId,
+      transmuxer: segmentInfo.transmuxer,
+      audioAppendStart: segmentInfo.audioAppendStart,
+      gopsToAlignWith: segmentInfo.gopsToAlignWith,
+      part: segmentInfo.part
+    };
+    const previousSegment = segmentInfo.playlist.segments[segmentInfo.mediaIndex - 1];
+    if (previousSegment && previousSegment.timeline === segment.timeline) {
+      // The baseStartTime of a segment is used to handle rollover when probing the TS
+      // segment to retrieve timing information. Since the probe only looks at the media's
+      // times (e.g., PTS and DTS values of the segment), and doesn't consider the
+      // player's time (e.g., player.currentTime()), baseStartTime should reflect the
+      // media time as well. transmuxedDecodeEnd represents the end time of a segment, in
+      // seconds of media time, so should be used here. The previous segment is used since
+      // the end of the previous segment should represent the beginning of the current
+      // segment, so long as they are on the same timeline.
+      if (previousSegment.videoTimingInfo) {
+        simpleSegment.baseStartTime = previousSegment.videoTimingInfo.transmuxedDecodeEnd;
+      } else if (previousSegment.audioTimingInfo) {
+        simpleSegment.baseStartTime = previousSegment.audioTimingInfo.transmuxedDecodeEnd;
+      }
+    }
+    if (segment.key) {
+      // if the media sequence is greater than 2^32, the IV will be incorrect
+      // assuming 10s segments, that would be about 1300 years
+      const iv = segment.key.iv || new Uint32Array([0, 0, 0, segmentInfo.mediaIndex + segmentInfo.playlist.mediaSequence]);
+      simpleSegment.key = this.segmentKey(segment.key);
+      simpleSegment.key.iv = iv;
+    }
+    if (segment.map) {
+      simpleSegment.map = this.initSegmentForMap(segment.map);
+    }
+    return simpleSegment;
+  }
+  saveTransferStats_(stats) {
+    // every request counts as a media request even if it has been aborted
+    // or canceled due to a timeout
+    this.mediaRequests += 1;
+    if (stats) {
+      this.mediaBytesTransferred += stats.bytesReceived;
+      this.mediaTransferDuration += stats.roundTripTime;
+    }
+  }
+  saveBandwidthRelatedStats_(duration, stats) {
+    // byteLength will be used for throughput, and should be based on bytes receieved,
+    // which we only know at the end of the request and should reflect total bytes
+    // downloaded rather than just bytes processed from components of the segment
+    this.pendingSegment_.byteLength = stats.bytesReceived;
+    if (duration < MIN_SEGMENT_DURATION_TO_SAVE_STATS) {
+      this.logger_(`Ignoring segment's bandwidth because its duration of ${duration}` + ` is less than the min to record ${MIN_SEGMENT_DURATION_TO_SAVE_STATS}`);
+      return;
+    }
+    this.bandwidth = stats.bandwidth;
+    this.roundTrip = stats.roundTripTime;
+  }
+  handleTimeout_() {
+    // although the VTT segment loader bandwidth isn't really used, it's good to
+    // maintain functinality between segment loaders
+    this.mediaRequestsTimedout += 1;
+    this.bandwidth = 1;
+    this.roundTrip = NaN;
+    this.trigger('bandwidthupdate');
+    this.trigger('timeout');
+  }
+  /**
+   * Handle the callback from the segmentRequest function and set the
+   * associated SegmentLoader state and errors if necessary
+   *
+   * @private
+   */
+
+  segmentRequestFinished_(error, simpleSegment, result) {
+    // TODO handle special cases, e.g., muxed audio/video but only audio in the segment
+    // check the call queue directly since this function doesn't need to deal with any
+    // data, and can continue even if the source buffers are not set up and we didn't get
+    // any data from the segment
+    if (this.callQueue_.length) {
+      this.callQueue_.push(this.segmentRequestFinished_.bind(this, error, simpleSegment, result));
+      return;
+    }
+    this.saveTransferStats_(simpleSegment.stats); // The request was aborted and the SegmentLoader has already been reset
+
+    if (!this.pendingSegment_) {
+      return;
+    } // the request was aborted and the SegmentLoader has already started
+    // another request. this can happen when the timeout for an aborted
+    // request triggers due to a limitation in the XHR library
+    // do not count this as any sort of request or we risk double-counting
+
+    if (simpleSegment.requestId !== this.pendingSegment_.requestId) {
+      return;
+    } // an error occurred from the active pendingSegment_ so reset everything
+
+    if (error) {
+      this.pendingSegment_ = null;
+      this.state = 'READY'; // aborts are not a true error condition and nothing corrective needs to be done
+
+      if (error.code === REQUEST_ERRORS.ABORTED) {
+        return;
+      }
+      this.pause(); // the error is really just that at least one of the requests timed-out
+      // set the bandwidth to a very low value and trigger an ABR switch to
+      // take emergency action
+
+      if (error.code === REQUEST_ERRORS.TIMEOUT) {
+        this.handleTimeout_();
+        return;
+      } // if control-flow has arrived here, then the error is real
+      // emit an error event to exclude the current playlist
+
+      this.mediaRequestsErrored += 1;
+      this.error(error);
+      this.trigger('error');
+      return;
+    }
+    const segmentInfo = this.pendingSegment_; // the response was a success so set any bandwidth stats the request
+    // generated for ABR purposes
+
+    this.saveBandwidthRelatedStats_(segmentInfo.duration, simpleSegment.stats);
+    segmentInfo.endOfAllRequests = simpleSegment.endOfAllRequests;
+    if (result.gopInfo) {
+      this.gopBuffer_ = updateGopBuffer(this.gopBuffer_, result.gopInfo, this.safeAppend_);
+    } // Although we may have already started appending on progress, we shouldn't switch the
+    // state away from loading until we are officially done loading the segment data.
+
+    this.state = 'APPENDING'; // used for testing
+
+    this.trigger('appending');
+    this.waitForAppendsToComplete_(segmentInfo);
+  }
+  setTimeMapping_(timeline) {
+    const timelineMapping = this.syncController_.mappingForTimeline(timeline);
+    if (timelineMapping !== null) {
+      this.timeMapping_ = timelineMapping;
+    }
+  }
+  updateMediaSecondsLoaded_(segment) {
+    if (typeof segment.start === 'number' && typeof segment.end === 'number') {
+      this.mediaSecondsLoaded += segment.end - segment.start;
+    } else {
+      this.mediaSecondsLoaded += segment.duration;
+    }
+  }
+  shouldUpdateTransmuxerTimestampOffset_(timestampOffset) {
+    if (timestampOffset === null) {
+      return false;
+    } // note that we're potentially using the same timestamp offset for both video and
+    // audio
+
+    if (this.loaderType_ === 'main' && timestampOffset !== this.sourceUpdater_.videoTimestampOffset()) {
+      return true;
+    }
+    if (!this.audioDisabled_ && timestampOffset !== this.sourceUpdater_.audioTimestampOffset()) {
+      return true;
+    }
+    return false;
+  }
+  trueSegmentStart_({
+    currentStart,
+    playlist,
+    mediaIndex,
+    firstVideoFrameTimeForData,
+    currentVideoTimestampOffset,
+    useVideoTimingInfo,
+    videoTimingInfo,
+    audioTimingInfo
+  }) {
+    if (typeof currentStart !== 'undefined') {
+      // if start was set once, keep using it
+      return currentStart;
+    }
+    if (!useVideoTimingInfo) {
+      return audioTimingInfo.start;
+    }
+    const previousSegment = playlist.segments[mediaIndex - 1]; // The start of a segment should be the start of the first full frame contained
+    // within that segment. Since the transmuxer maintains a cache of incomplete data
+    // from and/or the last frame seen, the start time may reflect a frame that starts
+    // in the previous segment. Check for that case and ensure the start time is
+    // accurate for the segment.
+
+    if (mediaIndex === 0 || !previousSegment || typeof previousSegment.start === 'undefined' || previousSegment.end !== firstVideoFrameTimeForData + currentVideoTimestampOffset) {
+      return firstVideoFrameTimeForData;
+    }
+    return videoTimingInfo.start;
+  }
+  waitForAppendsToComplete_(segmentInfo) {
+    const trackInfo = this.getCurrentMediaInfo_(segmentInfo);
+    if (!trackInfo) {
+      this.error({
+        message: 'No starting media returned, likely due to an unsupported media format.',
+        playlistExclusionDuration: Infinity,
+        metadata: {
+          errorType: videojs.Error.SegmentUnsupportedMediaFormat
+        }
+      });
+      this.trigger('error');
+      return;
+    } // Although transmuxing is done, appends may not yet be finished. Throw a marker
+    // on each queue this loader is responsible for to ensure that the appends are
+    // complete.
+
+    const {
+      hasAudio,
+      hasVideo,
+      isMuxed
+    } = trackInfo;
+    const waitForVideo = this.loaderType_ === 'main' && hasVideo;
+    const waitForAudio = !this.audioDisabled_ && hasAudio && !isMuxed;
+    segmentInfo.waitingOnAppends = 0; // segments with no data
+
+    if (!segmentInfo.hasAppendedData_) {
+      if (!segmentInfo.timingInfo && typeof segmentInfo.timestampOffset === 'number') {
+        // When there's no audio or video data in the segment, there's no audio or video
+        // timing information.
+        //
+        // If there's no audio or video timing information, then the timestamp offset
+        // can't be adjusted to the appropriate value for the transmuxer and source
+        // buffers.
+        //
+        // Therefore, the next segment should be used to set the timestamp offset.
+        this.isPendingTimestampOffset_ = true;
+      } // override settings for metadata only segments
+
+      segmentInfo.timingInfo = {
+        start: 0
+      };
+      segmentInfo.waitingOnAppends++;
+      if (!this.isPendingTimestampOffset_) {
+        // update the timestampoffset
+        this.updateSourceBufferTimestampOffset_(segmentInfo); // make sure the metadata queue is processed even though we have
+        // no video/audio data.
+
+        this.processMetadataQueue_();
+      } // append is "done" instantly with no data.
+
+      this.checkAppendsDone_(segmentInfo);
+      return;
+    } // Since source updater could call back synchronously, do the increments first.
+
+    if (waitForVideo) {
+      segmentInfo.waitingOnAppends++;
+    }
+    if (waitForAudio) {
+      segmentInfo.waitingOnAppends++;
+    }
+    if (waitForVideo) {
+      this.sourceUpdater_.videoQueueCallback(this.checkAppendsDone_.bind(this, segmentInfo));
+    }
+    if (waitForAudio) {
+      this.sourceUpdater_.audioQueueCallback(this.checkAppendsDone_.bind(this, segmentInfo));
+    }
+  }
+  checkAppendsDone_(segmentInfo) {
+    if (this.checkForAbort_(segmentInfo.requestId)) {
+      return;
+    }
+    segmentInfo.waitingOnAppends--;
+    if (segmentInfo.waitingOnAppends === 0) {
+      this.handleAppendsDone_();
+    }
+  }
+  checkForIllegalMediaSwitch(trackInfo) {
+    const illegalMediaSwitchError = illegalMediaSwitch(this.loaderType_, this.getCurrentMediaInfo_(), trackInfo);
+    if (illegalMediaSwitchError) {
+      this.error({
+        message: illegalMediaSwitchError,
+        playlistExclusionDuration: Infinity,
+        metadata: {
+          errorType: videojs.Error.SegmentSwitchError
+        }
+      });
+      this.trigger('error');
+      return true;
+    }
+    return false;
+  }
+  updateSourceBufferTimestampOffset_(segmentInfo) {
+    if (segmentInfo.timestampOffset === null ||
+    // we don't yet have the start for whatever media type (video or audio) has
+    // priority, timing-wise, so we must wait
+    typeof segmentInfo.timingInfo.start !== 'number' ||
+    // already updated the timestamp offset for this segment
+    segmentInfo.changedTimestampOffset ||
+    // the alt audio loader should not be responsible for setting the timestamp offset
+    this.loaderType_ !== 'main') {
+      return;
+    }
+    let didChange = false; // Primary timing goes by video, and audio is trimmed in the transmuxer, meaning that
+    // the timing info here comes from video. In the event that the audio is longer than
+    // the video, this will trim the start of the audio.
+    // This also trims any offset from 0 at the beginning of the media
+
+    segmentInfo.timestampOffset -= this.getSegmentStartTimeForTimestampOffsetCalculation_({
+      videoTimingInfo: segmentInfo.segment.videoTimingInfo,
+      audioTimingInfo: segmentInfo.segment.audioTimingInfo,
+      timingInfo: segmentInfo.timingInfo
+    }); // In the event that there are part segment downloads, each will try to update the
+    // timestamp offset. Retaining this bit of state prevents us from updating in the
+    // future (within the same segment), however, there may be a better way to handle it.
+
+    segmentInfo.changedTimestampOffset = true;
+    if (segmentInfo.timestampOffset !== this.sourceUpdater_.videoTimestampOffset()) {
+      this.sourceUpdater_.videoTimestampOffset(segmentInfo.timestampOffset);
+      didChange = true;
+    }
+    if (segmentInfo.timestampOffset !== this.sourceUpdater_.audioTimestampOffset()) {
+      this.sourceUpdater_.audioTimestampOffset(segmentInfo.timestampOffset);
+      didChange = true;
+    }
+    if (didChange) {
+      this.trigger('timestampoffset');
+    }
+  }
+  getSegmentStartTimeForTimestampOffsetCalculation_({
+    videoTimingInfo,
+    audioTimingInfo,
+    timingInfo
+  }) {
+    if (!this.useDtsForTimestampOffset_) {
+      return timingInfo.start;
+    }
+    if (videoTimingInfo && typeof videoTimingInfo.transmuxedDecodeStart === 'number') {
+      return videoTimingInfo.transmuxedDecodeStart;
+    } // handle audio only
+
+    if (audioTimingInfo && typeof audioTimingInfo.transmuxedDecodeStart === 'number') {
+      return audioTimingInfo.transmuxedDecodeStart;
+    } // handle content not transmuxed (e.g., MP4)
+
+    return timingInfo.start;
+  }
+  updateTimingInfoEnd_(segmentInfo) {
+    segmentInfo.timingInfo = segmentInfo.timingInfo || {};
+    const trackInfo = this.getMediaInfo_();
+    const useVideoTimingInfo = this.loaderType_ === 'main' && trackInfo && trackInfo.hasVideo;
+    const prioritizedTimingInfo = useVideoTimingInfo && segmentInfo.videoTimingInfo ? segmentInfo.videoTimingInfo : segmentInfo.audioTimingInfo;
+    if (!prioritizedTimingInfo) {
+      return;
+    }
+    segmentInfo.timingInfo.end = typeof prioritizedTimingInfo.end === 'number' ?
+    // End time may not exist in a case where we aren't parsing the full segment (one
+    // current example is the case of fmp4), so use the rough duration to calculate an
+    // end time.
+    prioritizedTimingInfo.end : prioritizedTimingInfo.start + segmentInfo.duration;
+  }
+  /**
+   * callback to run when appendBuffer is finished. detects if we are
+   * in a good state to do things with the data we got, or if we need
+   * to wait for more
+   *
+   * @private
+   */
+
+  handleAppendsDone_() {
+    // appendsdone can cause an abort
+    if (this.pendingSegment_) {
+      this.trigger('appendsdone');
+    }
+    if (!this.pendingSegment_) {
+      this.state = 'READY'; // TODO should this move into this.checkForAbort to speed up requests post abort in
+      // all appending cases?
+
+      if (!this.paused()) {
+        this.monitorBuffer_();
+      }
+      return;
+    }
+    const segmentInfo = this.pendingSegment_;
+    if (segmentInfo.part && segmentInfo.part.syncInfo) {
+      // low-latency flow
+      segmentInfo.part.syncInfo.markAppended();
+    } else if (segmentInfo.segment.syncInfo) {
+      // normal flow
+      segmentInfo.segment.syncInfo.markAppended();
+    } // Now that the end of the segment has been reached, we can set the end time. It's
+    // best to wait until all appends are done so we're sure that the primary media is
+    // finished (and we have its end time).
+
+    this.updateTimingInfoEnd_(segmentInfo);
+    if (this.shouldSaveSegmentTimingInfo_) {
+      // Timeline mappings should only be saved for the main loader. This is for multiple
+      // reasons:
+      //
+      // 1) Only one mapping is saved per timeline, meaning that if both the audio loader
+      //    and the main loader try to save the timeline mapping, whichever comes later
+      //    will overwrite the first. In theory this is OK, as the mappings should be the
+      //    same, however, it breaks for (2)
+      // 2) In the event of a live stream, the initial live point will make for a somewhat
+      //    arbitrary mapping. If audio and video streams are not perfectly in-sync, then
+      //    the mapping will be off for one of the streams, dependent on which one was
+      //    first saved (see (1)).
+      // 3) Primary timing goes by video in VHS, so the mapping should be video.
+      //
+      // Since the audio loader will wait for the main loader to load the first segment,
+      // the main loader will save the first timeline mapping, and ensure that there won't
+      // be a case where audio loads two segments without saving a mapping (thus leading
+      // to missing segment timing info).
+      this.syncController_.saveSegmentTimingInfo({
+        segmentInfo,
+        shouldSaveTimelineMapping: this.loaderType_ === 'main'
+      });
+    }
+    const segmentDurationMessage = getTroublesomeSegmentDurationMessage(segmentInfo, this.sourceType_);
+    if (segmentDurationMessage) {
+      if (segmentDurationMessage.severity === 'warn') {
+        videojs.log.warn(segmentDurationMessage.message);
+      } else {
+        this.logger_(segmentDurationMessage.message);
+      }
+    }
+    this.recordThroughput_(segmentInfo);
+    this.pendingSegment_ = null;
+    this.state = 'READY';
+    if (segmentInfo.isSyncRequest) {
+      this.trigger('syncinfoupdate'); // if the sync request was not appended
+      // then it was not the correct segment.
+      // throw it away and use the data it gave us
+      // to get the correct one.
+
+      if (!segmentInfo.hasAppendedData_) {
+        this.logger_(`Throwing away un-appended sync request ${segmentInfoString(segmentInfo)}`);
+        return;
+      }
+    }
+    this.logger_(`Appended ${segmentInfoString(segmentInfo)}`);
+    this.addSegmentMetadataCue_(segmentInfo);
+    this.fetchAtBuffer_ = true;
+    if (this.currentTimeline_ !== segmentInfo.timeline) {
+      this.timelineChangeController_.lastTimelineChange({
+        type: this.loaderType_,
+        from: this.currentTimeline_,
+        to: segmentInfo.timeline
+      }); // If audio is not disabled, the main segment loader is responsible for updating
+      // the audio timeline as well. If the content is video only, this won't have any
+      // impact.
+
+      if (this.loaderType_ === 'main' && !this.audioDisabled_) {
+        this.timelineChangeController_.lastTimelineChange({
+          type: 'audio',
+          from: this.currentTimeline_,
+          to: segmentInfo.timeline
+        });
+      }
+    }
+    this.currentTimeline_ = segmentInfo.timeline; // We must update the syncinfo to recalculate the seekable range before
+    // the following conditional otherwise it may consider this a bad "guess"
+    // and attempt to resync when the post-update seekable window and live
+    // point would mean that this was the perfect segment to fetch
+
+    this.trigger('syncinfoupdate');
+    const segment = segmentInfo.segment;
+    const part = segmentInfo.part;
+    const badSegmentGuess = segment.end && this.currentTime_() - segment.end > segmentInfo.playlist.targetDuration * 3;
+    const badPartGuess = part && part.end && this.currentTime_() - part.end > segmentInfo.playlist.partTargetDuration * 3; // If we previously appended a segment/part that ends more than 3 part/targetDurations before
+    // the currentTime_ that means that our conservative guess was too conservative.
+    // In that case, reset the loader state so that we try to use any information gained
+    // from the previous request to create a new, more accurate, sync-point.
+
+    if (badSegmentGuess || badPartGuess) {
+      this.logger_(`bad ${badSegmentGuess ? 'segment' : 'part'} ${segmentInfoString(segmentInfo)}`);
+      this.resetEverything();
+      return;
+    }
+    const isWalkingForward = this.mediaIndex !== null; // Don't do a rendition switch unless we have enough time to get a sync segment
+    // and conservatively guess
+
+    if (isWalkingForward) {
+      this.trigger('bandwidthupdate');
+    }
+    this.trigger('progress');
+    this.mediaIndex = segmentInfo.mediaIndex;
+    this.partIndex = segmentInfo.partIndex; // any time an update finishes and the last segment is in the
+    // buffer, end the stream. this ensures the "ended" event will
+    // fire if playback reaches that point.
+
+    if (this.isEndOfStream_(segmentInfo.mediaIndex, segmentInfo.playlist, segmentInfo.partIndex)) {
+      this.endOfStream();
+    } // used for testing
+
+    this.trigger('appended');
+    if (segmentInfo.hasAppendedData_) {
+      this.mediaAppends++;
+    }
+    if (!this.paused()) {
+      this.monitorBuffer_();
+    }
+  }
+  /**
+   * Records the current throughput of the decrypt, transmux, and append
+   * portion of the semgment pipeline. `throughput.rate` is a the cumulative
+   * moving average of the throughput. `throughput.count` is the number of
+   * data points in the average.
+   *
+   * @private
+   * @param {Object} segmentInfo the object returned by loadSegment
+   */
+
+  recordThroughput_(segmentInfo) {
+    if (segmentInfo.duration < MIN_SEGMENT_DURATION_TO_SAVE_STATS) {
+      this.logger_(`Ignoring segment's throughput because its duration of ${segmentInfo.duration}` + ` is less than the min to record ${MIN_SEGMENT_DURATION_TO_SAVE_STATS}`);
+      return;
+    }
+    const rate = this.throughput.rate; // Add one to the time to ensure that we don't accidentally attempt to divide
+    // by zero in the case where the throughput is ridiculously high
+
+    const segmentProcessingTime = Date.now() - segmentInfo.endOfAllRequests + 1; // Multiply by 8000 to convert from bytes/millisecond to bits/second
+
+    const segmentProcessingThroughput = Math.floor(segmentInfo.byteLength / segmentProcessingTime * 8 * 1000); // This is just a cumulative moving average calculation:
+    //   newAvg = oldAvg + (sample - oldAvg) / (sampleCount + 1)
+
+    this.throughput.rate += (segmentProcessingThroughput - rate) / ++this.throughput.count;
+  }
+  /**
+   * Adds a cue to the segment-metadata track with some metadata information about the
+   * segment
+   *
+   * @private
+   * @param {Object} segmentInfo
+   *        the object returned by loadSegment
+   * @method addSegmentMetadataCue_
+   */
+
+  addSegmentMetadataCue_(segmentInfo) {
+    if (!this.segmentMetadataTrack_) {
+      return;
+    }
+    const segment = segmentInfo.segment;
+    const start = segment.start;
+    const end = segment.end; // Do not try adding the cue if the start and end times are invalid.
+
+    if (!finite(start) || !finite(end)) {
+      return;
+    }
+    removeCuesFromTrack(start, end, this.segmentMetadataTrack_);
+    const Cue = window$1.WebKitDataCue || window$1.VTTCue;
+    const value = {
+      custom: segment.custom,
+      dateTimeObject: segment.dateTimeObject,
+      dateTimeString: segment.dateTimeString,
+      programDateTime: segment.programDateTime,
+      bandwidth: segmentInfo.playlist.attributes.BANDWIDTH,
+      resolution: segmentInfo.playlist.attributes.RESOLUTION,
+      codecs: segmentInfo.playlist.attributes.CODECS,
+      byteLength: segmentInfo.byteLength,
+      uri: segmentInfo.uri,
+      timeline: segmentInfo.timeline,
+      playlist: segmentInfo.playlist.id,
+      start,
+      end
+    };
+    const data = JSON.stringify(value);
+    const cue = new Cue(start, end, data); // Attach the metadata to the value property of the cue to keep consistency between
+    // the differences of WebKitDataCue in safari and VTTCue in other browsers
+
+    cue.value = value;
+    this.segmentMetadataTrack_.addCue(cue);
+  }
+}
+function noop() {}
+const toTitleCase = function (string) {
+  if (typeof string !== 'string') {
+    return string;
+  }
+  return string.replace(/./, w => w.toUpperCase());
+};
+
+/**
+ * @file source-updater.js
+ */
+const bufferTypes = ['video', 'audio'];
+const updating = (type, sourceUpdater) => {
+  const sourceBuffer = sourceUpdater[`${type}Buffer`];
+  return sourceBuffer && sourceBuffer.updating || sourceUpdater.queuePending[type];
+};
+const nextQueueIndexOfType = (type, queue) => {
+  for (let i = 0; i < queue.length; i++) {
+    const queueEntry = queue[i];
+    if (queueEntry.type === 'mediaSource') {
+      // If the next entry is a media source entry (uses multiple source buffers), block
+      // processing to allow it to go through first.
+      return null;
+    }
+    if (queueEntry.type === type) {
+      return i;
+    }
+  }
+  return null;
+};
+const shiftQueue = (type, sourceUpdater) => {
+  if (sourceUpdater.queue.length === 0) {
+    return;
+  }
+  let queueIndex = 0;
+  let queueEntry = sourceUpdater.queue[queueIndex];
+  if (queueEntry.type === 'mediaSource') {
+    if (!sourceUpdater.updating() && sourceUpdater.mediaSource.readyState !== 'closed') {
+      sourceUpdater.queue.shift();
+      queueEntry.action(sourceUpdater);
+      if (queueEntry.doneFn) {
+        queueEntry.doneFn();
+      } // Only specific source buffer actions must wait for async updateend events. Media
+      // Source actions process synchronously. Therefore, both audio and video source
+      // buffers are now clear to process the next queue entries.
+
+      shiftQueue('audio', sourceUpdater);
+      shiftQueue('video', sourceUpdater);
+    } // Media Source actions require both source buffers, so if the media source action
+    // couldn't process yet (because one or both source buffers are busy), block other
+    // queue actions until both are available and the media source action can process.
+
+    return;
+  }
+  if (type === 'mediaSource') {
+    // If the queue was shifted by a media source action (this happens when pushing a
+    // media source action onto the queue), then it wasn't from an updateend event from an
+    // audio or video source buffer, so there's no change from previous state, and no
+    // processing should be done.
+    return;
+  } // Media source queue entries don't need to consider whether the source updater is
+  // started (i.e., source buffers are created) as they don't need the source buffers, but
+  // source buffer queue entries do.
+
+  if (!sourceUpdater.ready() || sourceUpdater.mediaSource.readyState === 'closed' || updating(type, sourceUpdater)) {
+    return;
+  }
+  if (queueEntry.type !== type) {
+    queueIndex = nextQueueIndexOfType(type, sourceUpdater.queue);
+    if (queueIndex === null) {
+      // Either there's no queue entry that uses this source buffer type in the queue, or
+      // there's a media source queue entry before the next entry of this type, in which
+      // case wait for that action to process first.
+      return;
+    }
+    queueEntry = sourceUpdater.queue[queueIndex];
+  }
+  sourceUpdater.queue.splice(queueIndex, 1); // Keep a record that this source buffer type is in use.
+  //
+  // The queue pending operation must be set before the action is performed in the event
+  // that the action results in a synchronous event that is acted upon. For instance, if
+  // an exception is thrown that can be handled, it's possible that new actions will be
+  // appended to an empty queue and immediately executed, but would not have the correct
+  // pending information if this property was set after the action was performed.
+
+  sourceUpdater.queuePending[type] = queueEntry;
+  queueEntry.action(type, sourceUpdater);
+  if (!queueEntry.doneFn) {
+    // synchronous operation, process next entry
+    sourceUpdater.queuePending[type] = null;
+    shiftQueue(type, sourceUpdater);
+    return;
+  }
+};
+const cleanupBuffer = (type, sourceUpdater) => {
+  const buffer = sourceUpdater[`${type}Buffer`];
+  const titleType = toTitleCase(type);
+  if (!buffer) {
+    return;
+  }
+  buffer.removeEventListener('updateend', sourceUpdater[`on${titleType}UpdateEnd_`]);
+  buffer.removeEventListener('error', sourceUpdater[`on${titleType}Error_`]);
+  sourceUpdater.codecs[type] = null;
+  sourceUpdater[`${type}Buffer`] = null;
+};
+const inSourceBuffers = (mediaSource, sourceBuffer) => mediaSource && sourceBuffer && Array.prototype.indexOf.call(mediaSource.sourceBuffers, sourceBuffer) !== -1;
+const actions = {
+  appendBuffer: (bytes, segmentInfo, onError) => (type, sourceUpdater) => {
+    const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+    // or the media source does not contain this source buffer.
+
+    if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+      return;
+    }
+    sourceUpdater.logger_(`Appending segment ${segmentInfo.mediaIndex}'s ${bytes.length} bytes to ${type}Buffer`);
+    try {
+      sourceBuffer.appendBuffer(bytes);
+    } catch (e) {
+      sourceUpdater.logger_(`Error with code ${e.code} ` + (e.code === QUOTA_EXCEEDED_ERR ? '(QUOTA_EXCEEDED_ERR) ' : '') + `when appending segment ${segmentInfo.mediaIndex} to ${type}Buffer`);
+      sourceUpdater.queuePending[type] = null;
+      onError(e);
+    }
+  },
+  remove: (start, end) => (type, sourceUpdater) => {
+    const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+    // or the media source does not contain this source buffer.
+
+    if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+      return;
+    }
+    sourceUpdater.logger_(`Removing ${start} to ${end} from ${type}Buffer`);
+    try {
+      sourceBuffer.remove(start, end);
+    } catch (e) {
+      sourceUpdater.logger_(`Remove ${start} to ${end} from ${type}Buffer failed`);
+    }
+  },
+  timestampOffset: offset => (type, sourceUpdater) => {
+    const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+    // or the media source does not contain this source buffer.
+
+    if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+      return;
+    }
+    sourceUpdater.logger_(`Setting ${type}timestampOffset to ${offset}`);
+    sourceBuffer.timestampOffset = offset;
+  },
+  callback: callback => (type, sourceUpdater) => {
+    callback();
+  },
+  endOfStream: error => sourceUpdater => {
+    if (sourceUpdater.mediaSource.readyState !== 'open') {
+      return;
+    }
+    sourceUpdater.logger_(`Calling mediaSource endOfStream(${error || ''})`);
+    try {
+      sourceUpdater.mediaSource.endOfStream(error);
+    } catch (e) {
+      videojs.log.warn('Failed to call media source endOfStream', e);
+    }
+  },
+  duration: duration => sourceUpdater => {
+    sourceUpdater.logger_(`Setting mediaSource duration to ${duration}`);
+    try {
+      sourceUpdater.mediaSource.duration = duration;
+    } catch (e) {
+      videojs.log.warn('Failed to set media source duration', e);
+    }
+  },
+  abort: () => (type, sourceUpdater) => {
+    if (sourceUpdater.mediaSource.readyState !== 'open') {
+      return;
+    }
+    const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+    // or the media source does not contain this source buffer.
+
+    if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+      return;
+    }
+    sourceUpdater.logger_(`calling abort on ${type}Buffer`);
+    try {
+      sourceBuffer.abort();
+    } catch (e) {
+      videojs.log.warn(`Failed to abort on ${type}Buffer`, e);
+    }
+  },
+  addSourceBuffer: (type, codec) => sourceUpdater => {
+    const titleType = toTitleCase(type);
+    const mime = getMimeForCodec(codec);
+    sourceUpdater.logger_(`Adding ${type}Buffer with codec ${codec} to mediaSource`);
+    const sourceBuffer = sourceUpdater.mediaSource.addSourceBuffer(mime);
+    sourceBuffer.addEventListener('updateend', sourceUpdater[`on${titleType}UpdateEnd_`]);
+    sourceBuffer.addEventListener('error', sourceUpdater[`on${titleType}Error_`]);
+    sourceUpdater.codecs[type] = codec;
+    sourceUpdater[`${type}Buffer`] = sourceBuffer;
+  },
+  removeSourceBuffer: type => sourceUpdater => {
+    const sourceBuffer = sourceUpdater[`${type}Buffer`];
+    cleanupBuffer(type, sourceUpdater); // can't do anything if the media source / source buffer is null
+    // or the media source does not contain this source buffer.
+
+    if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+      return;
+    }
+    sourceUpdater.logger_(`Removing ${type}Buffer with codec ${sourceUpdater.codecs[type]} from mediaSource`);
+    try {
+      sourceUpdater.mediaSource.removeSourceBuffer(sourceBuffer);
+    } catch (e) {
+      videojs.log.warn(`Failed to removeSourceBuffer ${type}Buffer`, e);
+    }
+  },
+  changeType: codec => (type, sourceUpdater) => {
+    const sourceBuffer = sourceUpdater[`${type}Buffer`];
+    const mime = getMimeForCodec(codec); // can't do anything if the media source / source buffer is null
+    // or the media source does not contain this source buffer.
+
+    if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+      return;
+    } // do not update codec if we don't need to.
+    // Only update if we change the codec base.
+    // For example, going from avc1.640028 to avc1.64001f does not require a changeType call.
+
+    const newCodecBase = codec.substring(0, codec.indexOf('.'));
+    const oldCodec = sourceUpdater.codecs[type];
+    const oldCodecBase = oldCodec.substring(0, oldCodec.indexOf('.'));
+    if (oldCodecBase === newCodecBase) {
+      return;
+    }
+    sourceUpdater.logger_(`changing ${type}Buffer codec from ${sourceUpdater.codecs[type]} to ${codec}`); // check if change to the provided type is supported
+
+    try {
+      sourceBuffer.changeType(mime);
+      sourceUpdater.codecs[type] = codec;
+    } catch (e) {
+      videojs.log.warn(`Failed to changeType on ${type}Buffer`, e);
+    }
+  }
+};
+const pushQueue = ({
+  type,
+  sourceUpdater,
+  action,
+  doneFn,
+  name
+}) => {
+  sourceUpdater.queue.push({
+    type,
+    action,
+    doneFn,
+    name
+  });
+  shiftQueue(type, sourceUpdater);
+};
+const onUpdateend = (type, sourceUpdater) => e => {
+  // Although there should, in theory, be a pending action for any updateend receieved,
+  // there are some actions that may trigger updateend events without set definitions in
+  // the w3c spec. For instance, setting the duration on the media source may trigger
+  // updateend events on source buffers. This does not appear to be in the spec. As such,
+  // if we encounter an updateend without a corresponding pending action from our queue
+  // for that source buffer type, process the next action.
+  const bufferedRangesForType = sourceUpdater[`${type}Buffered`]();
+  const descriptiveString = bufferedRangesToString(bufferedRangesForType);
+  sourceUpdater.logger_(`received "updateend" event for ${type} Source Buffer: `, descriptiveString);
+  if (sourceUpdater.queuePending[type]) {
+    const doneFn = sourceUpdater.queuePending[type].doneFn;
+    sourceUpdater.queuePending[type] = null;
+    if (doneFn) {
+      // if there's an error, report it
+      doneFn(sourceUpdater[`${type}Error_`]);
+    }
+  }
+  shiftQueue(type, sourceUpdater);
+};
+/**
+ * A queue of callbacks to be serialized and applied when a
+ * MediaSource and its associated SourceBuffers are not in the
+ * updating state. It is used by the segment loader to update the
+ * underlying SourceBuffers when new data is loaded, for instance.
+ *
+ * @class SourceUpdater
+ * @param {MediaSource} mediaSource the MediaSource to create the SourceBuffer from
+ * @param {string} mimeType the desired MIME type of the underlying SourceBuffer
+ */
+
+class SourceUpdater extends videojs.EventTarget {
+  constructor(mediaSource) {
+    super();
+    this.mediaSource = mediaSource;
+    this.sourceopenListener_ = () => shiftQueue('mediaSource', this);
+    this.mediaSource.addEventListener('sourceopen', this.sourceopenListener_);
+    this.logger_ = logger('SourceUpdater'); // initial timestamp offset is 0
+
+    this.audioTimestampOffset_ = 0;
+    this.videoTimestampOffset_ = 0;
+    this.queue = [];
+    this.queuePending = {
+      audio: null,
+      video: null
+    };
+    this.delayedAudioAppendQueue_ = [];
+    this.videoAppendQueued_ = false;
+    this.codecs = {};
+    this.onVideoUpdateEnd_ = onUpdateend('video', this);
+    this.onAudioUpdateEnd_ = onUpdateend('audio', this);
+    this.onVideoError_ = e => {
+      // used for debugging
+      this.videoError_ = e;
+    };
+    this.onAudioError_ = e => {
+      // used for debugging
+      this.audioError_ = e;
+    };
+    this.createdSourceBuffers_ = false;
+    this.initializedEme_ = false;
+    this.triggeredReady_ = false;
+  }
+  initializedEme() {
+    this.initializedEme_ = true;
+    this.triggerReady();
+  }
+  hasCreatedSourceBuffers() {
+    // if false, likely waiting on one of the segment loaders to get enough data to create
+    // source buffers
+    return this.createdSourceBuffers_;
+  }
+  hasInitializedAnyEme() {
+    return this.initializedEme_;
+  }
+  ready() {
+    return this.hasCreatedSourceBuffers() && this.hasInitializedAnyEme();
+  }
+  createSourceBuffers(codecs) {
+    if (this.hasCreatedSourceBuffers()) {
+      // already created them before
+      return;
+    } // the intial addOrChangeSourceBuffers will always be
+    // two add buffers.
+
+    this.addOrChangeSourceBuffers(codecs);
+    this.createdSourceBuffers_ = true;
+    this.trigger('createdsourcebuffers');
+    this.triggerReady();
+  }
+  triggerReady() {
+    // only allow ready to be triggered once, this prevents the case
+    // where:
+    // 1. we trigger createdsourcebuffers
+    // 2. ie 11 synchronously initializates eme
+    // 3. the synchronous initialization causes us to trigger ready
+    // 4. We go back to the ready check in createSourceBuffers and ready is triggered again.
+    if (this.ready() && !this.triggeredReady_) {
+      this.triggeredReady_ = true;
+      this.trigger('ready');
+    }
+  }
+  /**
+   * Add a type of source buffer to the media source.
+   *
+   * @param {string} type
+   *        The type of source buffer to add.
+   *
+   * @param {string} codec
+   *        The codec to add the source buffer with.
+   */
+
+  addSourceBuffer(type, codec) {
+    pushQueue({
+      type: 'mediaSource',
+      sourceUpdater: this,
+      action: actions.addSourceBuffer(type, codec),
+      name: 'addSourceBuffer'
+    });
+  }
+  /**
+   * call abort on a source buffer.
+   *
+   * @param {string} type
+   *        The type of source buffer to call abort on.
+   */
+
+  abort(type) {
+    pushQueue({
+      type,
+      sourceUpdater: this,
+      action: actions.abort(type),
+      name: 'abort'
+    });
+  }
+  /**
+   * Call removeSourceBuffer and remove a specific type
+   * of source buffer on the mediaSource.
+   *
+   * @param {string} type
+   *        The type of source buffer to remove.
+   */
+
+  removeSourceBuffer(type) {
+    if (!this.canRemoveSourceBuffer()) {
+      videojs.log.error('removeSourceBuffer is not supported!');
+      return;
+    }
+    pushQueue({
+      type: 'mediaSource',
+      sourceUpdater: this,
+      action: actions.removeSourceBuffer(type),
+      name: 'removeSourceBuffer'
+    });
+  }
+  /**
+   * Whether or not the removeSourceBuffer function is supported
+   * on the mediaSource.
+   *
+   * @return {boolean}
+   *          if removeSourceBuffer can be called.
+   */
+
+  canRemoveSourceBuffer() {
+    // As of Firefox 83 removeSourceBuffer
+    // throws errors, so we report that it does not support this.
+    return !videojs.browser.IS_FIREFOX && window$1.MediaSource && window$1.MediaSource.prototype && typeof window$1.MediaSource.prototype.removeSourceBuffer === 'function';
+  }
+  /**
+   * Whether or not the changeType function is supported
+   * on our SourceBuffers.
+   *
+   * @return {boolean}
+   *         if changeType can be called.
+   */
+
+  static canChangeType() {
+    return window$1.SourceBuffer && window$1.SourceBuffer.prototype && typeof window$1.SourceBuffer.prototype.changeType === 'function';
+  }
+  /**
+   * Whether or not the changeType function is supported
+   * on our SourceBuffers.
+   *
+   * @return {boolean}
+   *         if changeType can be called.
+   */
+
+  canChangeType() {
+    return this.constructor.canChangeType();
+  }
+  /**
+   * Call the changeType function on a source buffer, given the code and type.
+   *
+   * @param {string} type
+   *        The type of source buffer to call changeType on.
+   *
+   * @param {string} codec
+   *        The codec string to change type with on the source buffer.
+   */
+
+  changeType(type, codec) {
+    if (!this.canChangeType()) {
+      videojs.log.error('changeType is not supported!');
+      return;
+    }
+    pushQueue({
+      type,
+      sourceUpdater: this,
+      action: actions.changeType(codec),
+      name: 'changeType'
+    });
+  }
+  /**
+   * Add source buffers with a codec or, if they are already created,
+   * call changeType on source buffers using changeType.
+   *
+   * @param {Object} codecs
+   *        Codecs to switch to
+   */
+
+  addOrChangeSourceBuffers(codecs) {
+    if (!codecs || typeof codecs !== 'object' || Object.keys(codecs).length === 0) {
+      throw new Error('Cannot addOrChangeSourceBuffers to undefined codecs');
+    }
+    Object.keys(codecs).forEach(type => {
+      const codec = codecs[type];
+      if (!this.hasCreatedSourceBuffers()) {
+        return this.addSourceBuffer(type, codec);
+      }
+      if (this.canChangeType()) {
+        this.changeType(type, codec);
+      }
+    });
+  }
+  /**
+   * Queue an update to append an ArrayBuffer.
+   *
+   * @param {MediaObject} object containing audioBytes and/or videoBytes
+   * @param {Function} done the function to call when done
+   * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-appendBuffer-void-ArrayBuffer-data
+   */
+
+  appendBuffer(options, doneFn) {
+    const {
+      segmentInfo,
+      type,
+      bytes
+    } = options;
+    this.processedAppend_ = true;
+    if (type === 'audio' && this.videoBuffer && !this.videoAppendQueued_) {
+      this.delayedAudioAppendQueue_.push([options, doneFn]);
+      this.logger_(`delayed audio append of ${bytes.length} until video append`);
+      return;
+    } // In the case of certain errors, for instance, QUOTA_EXCEEDED_ERR, updateend will
+    // not be fired. This means that the queue will be blocked until the next action
+    // taken by the segment-loader. Provide a mechanism for segment-loader to handle
+    // these errors by calling the doneFn with the specific error.
+
+    const onError = doneFn;
+    pushQueue({
+      type,
+      sourceUpdater: this,
+      action: actions.appendBuffer(bytes, segmentInfo || {
+        mediaIndex: -1
+      }, onError),
+      doneFn,
+      name: 'appendBuffer'
+    });
+    if (type === 'video') {
+      this.videoAppendQueued_ = true;
+      if (!this.delayedAudioAppendQueue_.length) {
+        return;
+      }
+      const queue = this.delayedAudioAppendQueue_.slice();
+      this.logger_(`queuing delayed audio ${queue.length} appendBuffers`);
+      this.delayedAudioAppendQueue_.length = 0;
+      queue.forEach(que => {
+        this.appendBuffer.apply(this, que);
+      });
+    }
+  }
+  /**
+   * Get the audio buffer's buffered timerange.
+   *
+   * @return {TimeRange}
+   *         The audio buffer's buffered time range
+   */
+
+  audioBuffered() {
+    // no media source/source buffer or it isn't in the media sources
+    // source buffer list
+    if (!inSourceBuffers(this.mediaSource, this.audioBuffer)) {
+      return createTimeRanges();
+    }
+    return this.audioBuffer.buffered ? this.audioBuffer.buffered : createTimeRanges();
+  }
+  /**
+   * Get the video buffer's buffered timerange.
+   *
+   * @return {TimeRange}
+   *         The video buffer's buffered time range
+   */
+
+  videoBuffered() {
+    // no media source/source buffer or it isn't in the media sources
+    // source buffer list
+    if (!inSourceBuffers(this.mediaSource, this.videoBuffer)) {
+      return createTimeRanges();
+    }
+    return this.videoBuffer.buffered ? this.videoBuffer.buffered : createTimeRanges();
+  }
+  /**
+   * Get a combined video/audio buffer's buffered timerange.
+   *
+   * @return {TimeRange}
+   *         the combined time range
+   */
+
+  buffered() {
+    const video = inSourceBuffers(this.mediaSource, this.videoBuffer) ? this.videoBuffer : null;
+    const audio = inSourceBuffers(this.mediaSource, this.audioBuffer) ? this.audioBuffer : null;
+    if (audio && !video) {
+      return this.audioBuffered();
+    }
+    if (video && !audio) {
+      return this.videoBuffered();
+    }
+    return bufferIntersection(this.audioBuffered(), this.videoBuffered());
+  }
+  /**
+   * Add a callback to the queue that will set duration on the mediaSource.
+   *
+   * @param {number} duration
+   *        The duration to set
+   *
+   * @param {Function} [doneFn]
+   *        function to run after duration has been set.
+   */
+
+  setDuration(duration, doneFn = noop) {
+    // In order to set the duration on the media source, it's necessary to wait for all
+    // source buffers to no longer be updating. "If the updating attribute equals true on
+    // any SourceBuffer in sourceBuffers, then throw an InvalidStateError exception and
+    // abort these steps." (source: https://www.w3.org/TR/media-source/#attributes).
+    pushQueue({
+      type: 'mediaSource',
+      sourceUpdater: this,
+      action: actions.duration(duration),
+      name: 'duration',
+      doneFn
+    });
+  }
+  /**
+   * Add a mediaSource endOfStream call to the queue
+   *
+   * @param {Error} [error]
+   *        Call endOfStream with an error
+   *
+   * @param {Function} [doneFn]
+   *        A function that should be called when the
+   *        endOfStream call has finished.
+   */
+
+  endOfStream(error = null, doneFn = noop) {
+    if (typeof error !== 'string') {
+      error = undefined;
+    } // In order to set the duration on the media source, it's necessary to wait for all
+    // source buffers to no longer be updating. "If the updating attribute equals true on
+    // any SourceBuffer in sourceBuffers, then throw an InvalidStateError exception and
+    // abort these steps." (source: https://www.w3.org/TR/media-source/#attributes).
+
+    pushQueue({
+      type: 'mediaSource',
+      sourceUpdater: this,
+      action: actions.endOfStream(error),
+      name: 'endOfStream',
+      doneFn
+    });
+  }
+  /**
+   * Queue an update to remove a time range from the buffer.
+   *
+   * @param {number} start where to start the removal
+   * @param {number} end where to end the removal
+   * @param {Function} [done=noop] optional callback to be executed when the remove
+   * operation is complete
+   * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end
+   */
+
+  removeAudio(start, end, done = noop) {
+    if (!this.audioBuffered().length || this.audioBuffered().end(0) === 0) {
+      done();
+      return;
+    }
+    pushQueue({
+      type: 'audio',
+      sourceUpdater: this,
+      action: actions.remove(start, end),
+      doneFn: done,
+      name: 'remove'
+    });
+  }
+  /**
+   * Queue an update to remove a time range from the buffer.
+   *
+   * @param {number} start where to start the removal
+   * @param {number} end where to end the removal
+   * @param {Function} [done=noop] optional callback to be executed when the remove
+   * operation is complete
+   * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end
+   */
+
+  removeVideo(start, end, done = noop) {
+    if (!this.videoBuffered().length || this.videoBuffered().end(0) === 0) {
+      done();
+      return;
+    }
+    pushQueue({
+      type: 'video',
+      sourceUpdater: this,
+      action: actions.remove(start, end),
+      doneFn: done,
+      name: 'remove'
+    });
+  }
+  /**
+   * Whether the underlying sourceBuffer is updating or not
+   *
+   * @return {boolean} the updating status of the SourceBuffer
+   */
+
+  updating() {
+    // the audio/video source buffer is updating
+    if (updating('audio', this) || updating('video', this)) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Set/get the timestampoffset on the audio SourceBuffer
+   *
+   * @return {number} the timestamp offset
+   */
+
+  audioTimestampOffset(offset) {
+    if (typeof offset !== 'undefined' && this.audioBuffer &&
+    // no point in updating if it's the same
+    this.audioTimestampOffset_ !== offset) {
+      pushQueue({
+        type: 'audio',
+        sourceUpdater: this,
+        action: actions.timestampOffset(offset),
+        name: 'timestampOffset'
+      });
+      this.audioTimestampOffset_ = offset;
+    }
+    return this.audioTimestampOffset_;
+  }
+  /**
+   * Set/get the timestampoffset on the video SourceBuffer
+   *
+   * @return {number} the timestamp offset
+   */
+
+  videoTimestampOffset(offset) {
+    if (typeof offset !== 'undefined' && this.videoBuffer &&
+    // no point in updating if it's the same
+    this.videoTimestampOffset !== offset) {
+      pushQueue({
+        type: 'video',
+        sourceUpdater: this,
+        action: actions.timestampOffset(offset),
+        name: 'timestampOffset'
+      });
+      this.videoTimestampOffset_ = offset;
+    }
+    return this.videoTimestampOffset_;
+  }
+  /**
+   * Add a function to the queue that will be called
+   * when it is its turn to run in the audio queue.
+   *
+   * @param {Function} callback
+   *        The callback to queue.
+   */
+
+  audioQueueCallback(callback) {
+    if (!this.audioBuffer) {
+      return;
+    }
+    pushQueue({
+      type: 'audio',
+      sourceUpdater: this,
+      action: actions.callback(callback),
+      name: 'callback'
+    });
+  }
+  /**
+   * Add a function to the queue that will be called
+   * when it is its turn to run in the video queue.
+   *
+   * @param {Function} callback
+   *        The callback to queue.
+   */
+
+  videoQueueCallback(callback) {
+    if (!this.videoBuffer) {
+      return;
+    }
+    pushQueue({
+      type: 'video',
+      sourceUpdater: this,
+      action: actions.callback(callback),
+      name: 'callback'
+    });
+  }
+  /**
+   * dispose of the source updater and the underlying sourceBuffer
+   */
+
+  dispose() {
+    this.trigger('dispose');
+    bufferTypes.forEach(type => {
+      this.abort(type);
+      if (this.canRemoveSourceBuffer()) {
+        this.removeSourceBuffer(type);
+      } else {
+        this[`${type}QueueCallback`](() => cleanupBuffer(type, this));
+      }
+    });
+    this.videoAppendQueued_ = false;
+    this.delayedAudioAppendQueue_.length = 0;
+    if (this.sourceopenListener_) {
+      this.mediaSource.removeEventListener('sourceopen', this.sourceopenListener_);
+    }
+    this.off();
+  }
+}
+const uint8ToUtf8 = uintArray => decodeURIComponent(escape(String.fromCharCode.apply(null, uintArray)));
+const bufferToHexString = buffer => {
+  const uInt8Buffer = new Uint8Array(buffer);
+  return Array.from(uInt8Buffer).map(byte => byte.toString(16).padStart(2, '0')).join('');
+};
+
+/**
+ * @file vtt-segment-loader.js
+ */
+const VTT_LINE_TERMINATORS = new Uint8Array('\n\n'.split('').map(char => char.charCodeAt(0)));
+class NoVttJsError extends Error {
+  constructor() {
+    super('Trying to parse received VTT cues, but there is no WebVTT. Make sure vtt.js is loaded.');
+  }
+}
+/**
+ * An object that manages segment loading and appending.
+ *
+ * @class VTTSegmentLoader
+ * @param {Object} options required and optional options
+ * @extends videojs.EventTarget
+ */
+
+class VTTSegmentLoader extends SegmentLoader {
+  constructor(settings, options = {}) {
+    super(settings, options); // SegmentLoader requires a MediaSource be specified or it will throw an error;
+    // however, VTTSegmentLoader has no need of a media source, so delete the reference
+
+    this.mediaSource_ = null;
+    this.subtitlesTrack_ = null;
+    this.featuresNativeTextTracks_ = settings.featuresNativeTextTracks;
+    this.loadVttJs = settings.loadVttJs; // The VTT segment will have its own time mappings. Saving VTT segment timing info in
+    // the sync controller leads to improper behavior.
+
+    this.shouldSaveSegmentTimingInfo_ = false;
+  }
+  createTransmuxer_() {
+    // don't need to transmux any subtitles
+    return null;
+  }
+  /**
+   * Indicates which time ranges are buffered
+   *
+   * @return {TimeRange}
+   *         TimeRange object representing the current buffered ranges
+   */
+
+  buffered_() {
+    if (!this.subtitlesTrack_ || !this.subtitlesTrack_.cues || !this.subtitlesTrack_.cues.length) {
+      return createTimeRanges();
+    }
+    const cues = this.subtitlesTrack_.cues;
+    const start = cues[0].startTime;
+    const end = cues[cues.length - 1].startTime;
+    return createTimeRanges([[start, end]]);
+  }
+  /**
+   * Gets and sets init segment for the provided map
+   *
+   * @param {Object} map
+   *        The map object representing the init segment to get or set
+   * @param {boolean=} set
+   *        If true, the init segment for the provided map should be saved
+   * @return {Object}
+   *         map object for desired init segment
+   */
+
+  initSegmentForMap(map, set = false) {
+    if (!map) {
+      return null;
+    }
+    const id = initSegmentId(map);
+    let storedMap = this.initSegments_[id];
+    if (set && !storedMap && map.bytes) {
+      // append WebVTT line terminators to the media initialization segment if it exists
+      // to follow the WebVTT spec (https://w3c.github.io/webvtt/#file-structure) that
+      // requires two or more WebVTT line terminators between the WebVTT header and the
+      // rest of the file
+      const combinedByteLength = VTT_LINE_TERMINATORS.byteLength + map.bytes.byteLength;
+      const combinedSegment = new Uint8Array(combinedByteLength);
+      combinedSegment.set(map.bytes);
+      combinedSegment.set(VTT_LINE_TERMINATORS, map.bytes.byteLength);
+      this.initSegments_[id] = storedMap = {
+        resolvedUri: map.resolvedUri,
+        byterange: map.byterange,
+        bytes: combinedSegment
+      };
+    }
+    return storedMap || map;
+  }
+  /**
+   * Returns true if all configuration required for loading is present, otherwise false.
+   *
+   * @return {boolean} True if the all configuration is ready for loading
+   * @private
+   */
+
+  couldBeginLoading_() {
+    return this.playlist_ && this.subtitlesTrack_ && !this.paused();
+  }
+  /**
+   * Once all the starting parameters have been specified, begin
+   * operation. This method should only be invoked from the INIT
+   * state.
+   *
+   * @private
+   */
+
+  init_() {
+    this.state = 'READY';
+    this.resetEverything();
+    return this.monitorBuffer_();
+  }
+  /**
+   * Set a subtitle track on the segment loader to add subtitles to
+   *
+   * @param {TextTrack=} track
+   *        The text track to add loaded subtitles to
+   * @return {TextTrack}
+   *        Returns the subtitles track
+   */
+
+  track(track) {
+    if (typeof track === 'undefined') {
+      return this.subtitlesTrack_;
+    }
+    this.subtitlesTrack_ = track; // if we were unpaused but waiting for a sourceUpdater, start
+    // buffering now
+
+    if (this.state === 'INIT' && this.couldBeginLoading_()) {
+      this.init_();
+    }
+    return this.subtitlesTrack_;
+  }
+  /**
+   * Remove any data in the source buffer between start and end times
+   *
+   * @param {number} start - the start time of the region to remove from the buffer
+   * @param {number} end - the end time of the region to remove from the buffer
+   */
+
+  remove(start, end) {
+    removeCuesFromTrack(start, end, this.subtitlesTrack_);
+  }
+  /**
+   * fill the buffer with segements unless the sourceBuffers are
+   * currently updating
+   *
+   * Note: this function should only ever be called by monitorBuffer_
+   * and never directly
+   *
+   * @private
+   */
+
+  fillBuffer_() {
+    // see if we need to begin loading immediately
+    const segmentInfo = this.chooseNextRequest_();
+    if (!segmentInfo) {
+      return;
+    }
+    if (this.syncController_.timestampOffsetForTimeline(segmentInfo.timeline) === null) {
+      // We don't have the timestamp offset that we need to sync subtitles.
+      // Rerun on a timestamp offset or user interaction.
+      const checkTimestampOffset = () => {
+        this.state = 'READY';
+        if (!this.paused()) {
+          // if not paused, queue a buffer check as soon as possible
+          this.monitorBuffer_();
+        }
+      };
+      this.syncController_.one('timestampoffset', checkTimestampOffset);
+      this.state = 'WAITING_ON_TIMELINE';
+      return;
+    }
+    this.loadSegment_(segmentInfo);
+  } // never set a timestamp offset for vtt segments.
+
+  timestampOffsetForSegment_() {
+    return null;
+  }
+  chooseNextRequest_() {
+    return this.skipEmptySegments_(super.chooseNextRequest_());
+  }
+  /**
+   * Prevents the segment loader from requesting segments we know contain no subtitles
+   * by walking forward until we find the next segment that we don't know whether it is
+   * empty or not.
+   *
+   * @param {Object} segmentInfo
+   *        a segment info object that describes the current segment
+   * @return {Object}
+   *         a segment info object that describes the current segment
+   */
+
+  skipEmptySegments_(segmentInfo) {
+    while (segmentInfo && segmentInfo.segment.empty) {
+      // stop at the last possible segmentInfo
+      if (segmentInfo.mediaIndex + 1 >= segmentInfo.playlist.segments.length) {
+        segmentInfo = null;
+        break;
+      }
+      segmentInfo = this.generateSegmentInfo_({
+        playlist: segmentInfo.playlist,
+        mediaIndex: segmentInfo.mediaIndex + 1,
+        startOfSegment: segmentInfo.startOfSegment + segmentInfo.duration,
+        isSyncRequest: segmentInfo.isSyncRequest
+      });
+    }
+    return segmentInfo;
+  }
+  stopForError(error) {
+    this.error(error);
+    this.state = 'READY';
+    this.pause();
+    this.trigger('error');
+  }
+  /**
+   * append a decrypted segement to the SourceBuffer through a SourceUpdater
+   *
+   * @private
+   */
+
+  segmentRequestFinished_(error, simpleSegment, result) {
+    if (!this.subtitlesTrack_) {
+      this.state = 'READY';
+      return;
+    }
+    this.saveTransferStats_(simpleSegment.stats); // the request was aborted
+
+    if (!this.pendingSegment_) {
+      this.state = 'READY';
+      this.mediaRequestsAborted += 1;
+      return;
+    }
+    if (error) {
+      if (error.code === REQUEST_ERRORS.TIMEOUT) {
+        this.handleTimeout_();
+      }
+      if (error.code === REQUEST_ERRORS.ABORTED) {
+        this.mediaRequestsAborted += 1;
+      } else {
+        this.mediaRequestsErrored += 1;
+      }
+      this.stopForError(error);
+      return;
+    }
+    const segmentInfo = this.pendingSegment_; // although the VTT segment loader bandwidth isn't really used, it's good to
+    // maintain functionality between segment loaders
+
+    this.saveBandwidthRelatedStats_(segmentInfo.duration, simpleSegment.stats); // if this request included a segment key, save that data in the cache
+
+    if (simpleSegment.key) {
+      this.segmentKey(simpleSegment.key, true);
+    }
+    this.state = 'APPENDING'; // used for tests
+
+    this.trigger('appending');
+    const segment = segmentInfo.segment;
+    if (segment.map) {
+      segment.map.bytes = simpleSegment.map.bytes;
+    }
+    segmentInfo.bytes = simpleSegment.bytes; // Make sure that vttjs has loaded, otherwise, load it and wait till it finished loading
+
+    if (typeof window$1.WebVTT !== 'function' && typeof this.loadVttJs === 'function') {
+      this.state = 'WAITING_ON_VTTJS'; // should be fine to call multiple times
+      // script will be loaded once but multiple listeners will be added to the queue, which is expected.
+
+      this.loadVttJs().then(() => this.segmentRequestFinished_(error, simpleSegment, result), () => this.stopForError({
+        message: 'Error loading vtt.js',
+        metadata: {
+          errorType: videojs.Error.VttLoadError
+        }
+      }));
+      return;
+    }
+    segment.requested = true;
+    try {
+      this.parseVTTCues_(segmentInfo);
+    } catch (e) {
+      this.stopForError({
+        message: e.message,
+        metadata: {
+          errorType: videojs.Error.VttCueParsingError
+        }
+      });
+      return;
+    }
+    this.updateTimeMapping_(segmentInfo, this.syncController_.timelines[segmentInfo.timeline], this.playlist_);
+    if (segmentInfo.cues.length) {
+      segmentInfo.timingInfo = {
+        start: segmentInfo.cues[0].startTime,
+        end: segmentInfo.cues[segmentInfo.cues.length - 1].endTime
+      };
+    } else {
+      segmentInfo.timingInfo = {
+        start: segmentInfo.startOfSegment,
+        end: segmentInfo.startOfSegment + segmentInfo.duration
+      };
+    }
+    if (segmentInfo.isSyncRequest) {
+      this.trigger('syncinfoupdate');
+      this.pendingSegment_ = null;
+      this.state = 'READY';
+      return;
+    }
+    segmentInfo.byteLength = segmentInfo.bytes.byteLength;
+    this.mediaSecondsLoaded += segment.duration; // Create VTTCue instances for each cue in the new segment and add them to
+    // the subtitle track
+
+    segmentInfo.cues.forEach(cue => {
+      this.subtitlesTrack_.addCue(this.featuresNativeTextTracks_ ? new window$1.VTTCue(cue.startTime, cue.endTime, cue.text) : cue);
+    }); // Remove any duplicate cues from the subtitle track. The WebVTT spec allows
+    // cues to have identical time-intervals, but if the text is also identical
+    // we can safely assume it is a duplicate that can be removed (ex. when a cue
+    // "overlaps" VTT segments)
+
+    removeDuplicateCuesFromTrack(this.subtitlesTrack_);
+    this.handleAppendsDone_();
+  }
+  handleData_() {// noop as we shouldn't be getting video/audio data captions
+    // that we do not support here.
+  }
+  updateTimingInfoEnd_() {// noop
+  }
+  /**
+   * Uses the WebVTT parser to parse the segment response
+   *
+   * @throws NoVttJsError
+   *
+   * @param {Object} segmentInfo
+   *        a segment info object that describes the current segment
+   * @private
+   */
+
+  parseVTTCues_(segmentInfo) {
+    let decoder;
+    let decodeBytesToString = false;
+    if (typeof window$1.WebVTT !== 'function') {
+      // caller is responsible for exception handling.
+      throw new NoVttJsError();
+    }
+    if (typeof window$1.TextDecoder === 'function') {
+      decoder = new window$1.TextDecoder('utf8');
+    } else {
+      decoder = window$1.WebVTT.StringDecoder();
+      decodeBytesToString = true;
+    }
+    const parser = new window$1.WebVTT.Parser(window$1, window$1.vttjs, decoder);
+    segmentInfo.cues = [];
+    segmentInfo.timestampmap = {
+      MPEGTS: 0,
+      LOCAL: 0
+    };
+    parser.oncue = segmentInfo.cues.push.bind(segmentInfo.cues);
+    parser.ontimestampmap = map => {
+      segmentInfo.timestampmap = map;
+    };
+    parser.onparsingerror = error => {
+      videojs.log.warn('Error encountered when parsing cues: ' + error.message);
+    };
+    if (segmentInfo.segment.map) {
+      let mapData = segmentInfo.segment.map.bytes;
+      if (decodeBytesToString) {
+        mapData = uint8ToUtf8(mapData);
+      }
+      parser.parse(mapData);
+    }
+    let segmentData = segmentInfo.bytes;
+    if (decodeBytesToString) {
+      segmentData = uint8ToUtf8(segmentData);
+    }
+    parser.parse(segmentData);
+    parser.flush();
+  }
+  /**
+   * Updates the start and end times of any cues parsed by the WebVTT parser using
+   * the information parsed from the X-TIMESTAMP-MAP header and a TS to media time mapping
+   * from the SyncController
+   *
+   * @param {Object} segmentInfo
+   *        a segment info object that describes the current segment
+   * @param {Object} mappingObj
+   *        object containing a mapping from TS to media time
+   * @param {Object} playlist
+   *        the playlist object containing the segment
+   * @private
+   */
+
+  updateTimeMapping_(segmentInfo, mappingObj, playlist) {
+    const segment = segmentInfo.segment;
+    if (!mappingObj) {
+      // If the sync controller does not have a mapping of TS to Media Time for the
+      // timeline, then we don't have enough information to update the cue
+      // start/end times
+      return;
+    }
+    if (!segmentInfo.cues.length) {
+      // If there are no cues, we also do not have enough information to figure out
+      // segment timing. Mark that the segment contains no cues so we don't re-request
+      // an empty segment.
+      segment.empty = true;
+      return;
+    }
+    const {
+      MPEGTS,
+      LOCAL
+    } = segmentInfo.timestampmap;
+    /**
+     * From the spec:
+     * The MPEGTS media timestamp MUST use a 90KHz timescale,
+     * even when non-WebVTT Media Segments use a different timescale.
+     */
+
+    const mpegTsInSeconds = MPEGTS / ONE_SECOND_IN_TS;
+    const diff = mpegTsInSeconds - LOCAL + mappingObj.mapping;
+    segmentInfo.cues.forEach(cue => {
+      const duration = cue.endTime - cue.startTime;
+      const startTime = MPEGTS === 0 ? cue.startTime + diff : this.handleRollover_(cue.startTime + diff, mappingObj.time);
+      cue.startTime = Math.max(startTime, 0);
+      cue.endTime = Math.max(startTime + duration, 0);
+    });
+    if (!playlist.syncInfo) {
+      const firstStart = segmentInfo.cues[0].startTime;
+      const lastStart = segmentInfo.cues[segmentInfo.cues.length - 1].startTime;
+      playlist.syncInfo = {
+        mediaSequence: playlist.mediaSequence + segmentInfo.mediaIndex,
+        time: Math.min(firstStart, lastStart - segment.duration)
+      };
+    }
+  }
+  /**
+   * MPEG-TS PES timestamps are limited to 2^33.
+   * Once they reach 2^33, they roll over to 0.
+   * mux.js handles PES timestamp rollover for the following scenarios:
+   * [forward rollover(right)] ->
+   *    PES timestamps monotonically increase, and once they reach 2^33, they roll over to 0
+   * [backward rollover(left)] -->
+   *    we seek back to position before rollover.
+   *
+   * According to the HLS SPEC:
+   * When synchronizing WebVTT with PES timestamps, clients SHOULD account
+   * for cases where the 33-bit PES timestamps have wrapped and the WebVTT
+   * cue times have not.  When the PES timestamp wraps, the WebVTT Segment
+   * SHOULD have a X-TIMESTAMP-MAP header that maps the current WebVTT
+   * time to the new (low valued) PES timestamp.
+   *
+   * So we want to handle rollover here and align VTT Cue start/end time to the player's time.
+   */
+
+  handleRollover_(value, reference) {
+    if (reference === null) {
+      return value;
+    }
+    let valueIn90khz = value * ONE_SECOND_IN_TS;
+    const referenceIn90khz = reference * ONE_SECOND_IN_TS;
+    let offset;
+    if (referenceIn90khz < valueIn90khz) {
+      // - 2^33
+      offset = -8589934592;
+    } else {
+      // + 2^33
+      offset = 8589934592;
+    } // distance(value - reference) > 2^32
+
+    while (Math.abs(valueIn90khz - referenceIn90khz) > 4294967296) {
+      valueIn90khz += offset;
+    }
+    return valueIn90khz / ONE_SECOND_IN_TS;
+  }
+}
+
+/**
+ * @file ad-cue-tags.js
+ */
+/**
+ * Searches for an ad cue that overlaps with the given mediaTime
+ *
+ * @param {Object} track
+ *        the track to find the cue for
+ *
+ * @param {number} mediaTime
+ *        the time to find the cue at
+ *
+ * @return {Object|null}
+ *         the found cue or null
+ */
+
+const findAdCue = function (track, mediaTime) {
+  const cues = track.cues;
+  for (let i = 0; i < cues.length; i++) {
+    const cue = cues[i];
+    if (mediaTime >= cue.adStartTime && mediaTime <= cue.adEndTime) {
+      return cue;
+    }
+  }
+  return null;
+};
+const updateAdCues = function (media, track, offset = 0) {
+  if (!media.segments) {
+    return;
+  }
+  let mediaTime = offset;
+  let cue;
+  for (let i = 0; i < media.segments.length; i++) {
+    const segment = media.segments[i];
+    if (!cue) {
+      // Since the cues will span for at least the segment duration, adding a fudge
+      // factor of half segment duration will prevent duplicate cues from being
+      // created when timing info is not exact (e.g. cue start time initialized
+      // at 10.006677, but next call mediaTime is 10.003332 )
+      cue = findAdCue(track, mediaTime + segment.duration / 2);
+    }
+    if (cue) {
+      if ('cueIn' in segment) {
+        // Found a CUE-IN so end the cue
+        cue.endTime = mediaTime;
+        cue.adEndTime = mediaTime;
+        mediaTime += segment.duration;
+        cue = null;
+        continue;
+      }
+      if (mediaTime < cue.endTime) {
+        // Already processed this mediaTime for this cue
+        mediaTime += segment.duration;
+        continue;
+      } // otherwise extend cue until a CUE-IN is found
+
+      cue.endTime += segment.duration;
+    } else {
+      if ('cueOut' in segment) {
+        cue = new window$1.VTTCue(mediaTime, mediaTime + segment.duration, segment.cueOut);
+        cue.adStartTime = mediaTime; // Assumes tag format to be
+        // #EXT-X-CUE-OUT:30
+
+        cue.adEndTime = mediaTime + parseFloat(segment.cueOut);
+        track.addCue(cue);
+      }
+      if ('cueOutCont' in segment) {
+        // Entered into the middle of an ad cue
+        // Assumes tag formate to be
+        // #EXT-X-CUE-OUT-CONT:10/30
+        const [adOffset, adTotal] = segment.cueOutCont.split('/').map(parseFloat);
+        cue = new window$1.VTTCue(mediaTime, mediaTime + segment.duration, '');
+        cue.adStartTime = mediaTime - adOffset;
+        cue.adEndTime = cue.adStartTime + adTotal;
+        track.addCue(cue);
+      }
+    }
+    mediaTime += segment.duration;
+  }
+};
+class SyncInfo {
+  /**
+   * @param {number} start - media sequence start
+   * @param {number} end - media sequence end
+   * @param {number} segmentIndex - index for associated segment
+   * @param {number|null} [partIndex] - index for associated part
+   * @param {boolean} [appended] - appended indicator
+   *
+   */
+  constructor({
+    start,
+    end,
+    segmentIndex,
+    partIndex = null,
+    appended = false
+  }) {
+    this.start_ = start;
+    this.end_ = end;
+    this.segmentIndex_ = segmentIndex;
+    this.partIndex_ = partIndex;
+    this.appended_ = appended;
+  }
+  isInRange(targetTime) {
+    return targetTime >= this.start && targetTime < this.end;
+  }
+  markAppended() {
+    this.appended_ = true;
+  }
+  resetAppendedStatus() {
+    this.appended_ = false;
+  }
+  get isAppended() {
+    return this.appended_;
+  }
+  get start() {
+    return this.start_;
+  }
+  get end() {
+    return this.end_;
+  }
+  get segmentIndex() {
+    return this.segmentIndex_;
+  }
+  get partIndex() {
+    return this.partIndex_;
+  }
+}
+class SyncInfoData {
+  /**
+   *
+   * @param {SyncInfo} segmentSyncInfo - sync info for a given segment
+   * @param {Array<SyncInfo>} [partsSyncInfo] - sync infos for a list of parts for a given segment
+   */
+  constructor(segmentSyncInfo, partsSyncInfo = []) {
+    this.segmentSyncInfo_ = segmentSyncInfo;
+    this.partsSyncInfo_ = partsSyncInfo;
+  }
+  get segmentSyncInfo() {
+    return this.segmentSyncInfo_;
+  }
+  get partsSyncInfo() {
+    return this.partsSyncInfo_;
+  }
+  get hasPartsSyncInfo() {
+    return this.partsSyncInfo_.length > 0;
+  }
+  resetAppendStatus() {
+    this.segmentSyncInfo_.resetAppendedStatus();
+    this.partsSyncInfo_.forEach(partSyncInfo => partSyncInfo.resetAppendedStatus());
+  }
+}
+class MediaSequenceSync {
+  constructor() {
+    /**
+     * @type {Map<number, SyncInfoData>}
+     * @private
+     */
+    this.storage_ = new Map();
+    this.diagnostics_ = '';
+    this.isReliable_ = false;
+    this.start_ = -Infinity;
+    this.end_ = Infinity;
+  }
+  get start() {
+    return this.start_;
+  }
+  get end() {
+    return this.end_;
+  }
+  get diagnostics() {
+    return this.diagnostics_;
+  }
+  get isReliable() {
+    return this.isReliable_;
+  }
+  resetAppendedStatus() {
+    this.storage_.forEach(syncInfoData => syncInfoData.resetAppendStatus());
+  }
+  /**
+   * update sync storage
+   *
+   * @param {Object} playlist
+   * @param {number} currentTime
+   *
+   * @return {void}
+   */
+
+  update(playlist, currentTime) {
+    const {
+      mediaSequence,
+      segments
+    } = playlist;
+    this.isReliable_ = this.isReliablePlaylist_(mediaSequence, segments);
+    if (!this.isReliable_) {
+      return;
+    }
+    return this.updateStorage_(segments, mediaSequence, this.calculateBaseTime_(mediaSequence, currentTime));
+  }
+  /**
+   * @param {number} targetTime
+   * @return {SyncInfo|null}
+   */
+
+  getSyncInfoForTime(targetTime) {
+    for (const {
+      segmentSyncInfo,
+      partsSyncInfo
+    } of this.storage_.values()) {
+      // Normal segment flow:
+      if (!partsSyncInfo.length) {
+        if (segmentSyncInfo.isInRange(targetTime)) {
+          return segmentSyncInfo;
+        }
+      } else {
+        // Low latency flow:
+        for (const partSyncInfo of partsSyncInfo) {
+          if (partSyncInfo.isInRange(targetTime)) {
+            return partSyncInfo;
+          }
+        }
+      }
+    }
+    return null;
+  }
+  updateStorage_(segments, startingMediaSequence, startingTime) {
+    const newStorage = new Map();
+    let newDiagnostics = '\n';
+    let currentStart = startingTime;
+    let currentMediaSequence = startingMediaSequence;
+    this.start_ = currentStart;
+    segments.forEach((segment, segmentIndex) => {
+      const prevSyncInfoData = this.storage_.get(currentMediaSequence);
+      const segmentStart = currentStart;
+      const segmentEnd = segmentStart + segment.duration;
+      const segmentIsAppended = Boolean(prevSyncInfoData && prevSyncInfoData.segmentSyncInfo && prevSyncInfoData.segmentSyncInfo.isAppended);
+      const segmentSyncInfo = new SyncInfo({
+        start: segmentStart,
+        end: segmentEnd,
+        appended: segmentIsAppended,
+        segmentIndex
+      });
+      segment.syncInfo = segmentSyncInfo;
+      let currentPartStart = currentStart;
+      const partsSyncInfo = (segment.parts || []).map((part, partIndex) => {
+        const partStart = currentPartStart;
+        const partEnd = currentPartStart + part.duration;
+        const partIsAppended = Boolean(prevSyncInfoData && prevSyncInfoData.partsSyncInfo && prevSyncInfoData.partsSyncInfo[partIndex] && prevSyncInfoData.partsSyncInfo[partIndex].isAppended);
+        const partSyncInfo = new SyncInfo({
+          start: partStart,
+          end: partEnd,
+          appended: partIsAppended,
+          segmentIndex,
+          partIndex
+        });
+        currentPartStart = partEnd;
+        newDiagnostics += `Media Sequence: ${currentMediaSequence}.${partIndex} | Range: ${partStart} --> ${partEnd} | Appended: ${partIsAppended}\n`;
+        part.syncInfo = partSyncInfo;
+        return partSyncInfo;
+      });
+      newStorage.set(currentMediaSequence, new SyncInfoData(segmentSyncInfo, partsSyncInfo));
+      newDiagnostics += `${compactSegmentUrlDescription(segment.resolvedUri)} | Media Sequence: ${currentMediaSequence} | Range: ${segmentStart} --> ${segmentEnd} | Appended: ${segmentIsAppended}\n`;
+      currentMediaSequence++;
+      currentStart = segmentEnd;
+    });
+    this.end_ = currentStart;
+    this.storage_ = newStorage;
+    this.diagnostics_ = newDiagnostics;
+  }
+  calculateBaseTime_(mediaSequence, fallback) {
+    if (!this.storage_.size) {
+      // Initial setup flow.
+      return 0;
+    }
+    if (this.storage_.has(mediaSequence)) {
+      // Normal flow.
+      return this.storage_.get(mediaSequence).segmentSyncInfo.start;
+    } // Fallback flow.
+    // There is a gap between last recorded playlist and a new one received.
+
+    return fallback;
+  }
+  isReliablePlaylist_(mediaSequence, segments) {
+    return mediaSequence !== undefined && mediaSequence !== null && Array.isArray(segments) && segments.length;
+  }
+}
+
+/**
+ * @file sync-controller.js
+ */
+// synchronize expired playlist segments.
+// the max media sequence diff is 48 hours of live stream
+// content with two second segments. Anything larger than that
+// will likely be invalid.
+
+const MAX_MEDIA_SEQUENCE_DIFF_FOR_SYNC = 86400;
+const syncPointStrategies = [
+// Stategy "VOD": Handle the VOD-case where the sync-point is *always*
+//                the equivalence display-time 0 === segment-index 0
+{
+  name: 'VOD',
+  run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+    if (duration !== Infinity) {
+      const syncPoint = {
+        time: 0,
+        segmentIndex: 0,
+        partIndex: null
+      };
+      return syncPoint;
+    }
+    return null;
+  }
+}, {
+  name: 'MediaSequence',
+  /**
+   * run media sequence strategy
+   *
+   * @param {SyncController} syncController
+   * @param {Object} playlist
+   * @param {number} duration
+   * @param {number} currentTimeline
+   * @param {number} currentTime
+   * @param {string} type
+   */
+  run: (syncController, playlist, duration, currentTimeline, currentTime, type) => {
+    const mediaSequenceSync = syncController.getMediaSequenceSync(type);
+    if (!mediaSequenceSync) {
+      return null;
+    }
+    if (!mediaSequenceSync.isReliable) {
+      return null;
+    }
+    const syncInfo = mediaSequenceSync.getSyncInfoForTime(currentTime);
+    if (!syncInfo) {
+      return null;
+    }
+    return {
+      time: syncInfo.start,
+      partIndex: syncInfo.partIndex,
+      segmentIndex: syncInfo.segmentIndex
+    };
+  }
+},
+// Stategy "ProgramDateTime": We have a program-date-time tag in this playlist
+{
+  name: 'ProgramDateTime',
+  run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+    if (!Object.keys(syncController.timelineToDatetimeMappings).length) {
+      return null;
+    }
+    let syncPoint = null;
+    let lastDistance = null;
+    const partsAndSegments = getPartsAndSegments(playlist);
+    currentTime = currentTime || 0;
+    for (let i = 0; i < partsAndSegments.length; i++) {
+      // start from the end and loop backwards for live
+      // or start from the front and loop forwards for non-live
+      const index = playlist.endList || currentTime === 0 ? i : partsAndSegments.length - (i + 1);
+      const partAndSegment = partsAndSegments[index];
+      const segment = partAndSegment.segment;
+      const datetimeMapping = syncController.timelineToDatetimeMappings[segment.timeline];
+      if (!datetimeMapping || !segment.dateTimeObject) {
+        continue;
+      }
+      const segmentTime = segment.dateTimeObject.getTime() / 1000;
+      let start = segmentTime + datetimeMapping; // take part duration into account.
+
+      if (segment.parts && typeof partAndSegment.partIndex === 'number') {
+        for (let z = 0; z < partAndSegment.partIndex; z++) {
+          start += segment.parts[z].duration;
+        }
+      }
+      const distance = Math.abs(currentTime - start); // Once the distance begins to increase, or if distance is 0, we have passed
+      // currentTime and can stop looking for better candidates
+
+      if (lastDistance !== null && (distance === 0 || lastDistance < distance)) {
+        break;
+      }
+      lastDistance = distance;
+      syncPoint = {
+        time: start,
+        segmentIndex: partAndSegment.segmentIndex,
+        partIndex: partAndSegment.partIndex
+      };
+    }
+    return syncPoint;
+  }
+},
+// Stategy "Segment": We have a known time mapping for a timeline and a
+//                    segment in the current timeline with timing data
+{
+  name: 'Segment',
+  run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+    let syncPoint = null;
+    let lastDistance = null;
+    currentTime = currentTime || 0;
+    const partsAndSegments = getPartsAndSegments(playlist);
+    for (let i = 0; i < partsAndSegments.length; i++) {
+      // start from the end and loop backwards for live
+      // or start from the front and loop forwards for non-live
+      const index = playlist.endList || currentTime === 0 ? i : partsAndSegments.length - (i + 1);
+      const partAndSegment = partsAndSegments[index];
+      const segment = partAndSegment.segment;
+      const start = partAndSegment.part && partAndSegment.part.start || segment && segment.start;
+      if (segment.timeline === currentTimeline && typeof start !== 'undefined') {
+        const distance = Math.abs(currentTime - start); // Once the distance begins to increase, we have passed
+        // currentTime and can stop looking for better candidates
+
+        if (lastDistance !== null && lastDistance < distance) {
+          break;
+        }
+        if (!syncPoint || lastDistance === null || lastDistance >= distance) {
+          lastDistance = distance;
+          syncPoint = {
+            time: start,
+            segmentIndex: partAndSegment.segmentIndex,
+            partIndex: partAndSegment.partIndex
+          };
+        }
+      }
+    }
+    return syncPoint;
+  }
+},
+// Stategy "Discontinuity": We have a discontinuity with a known
+//                          display-time
+{
+  name: 'Discontinuity',
+  run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+    let syncPoint = null;
+    currentTime = currentTime || 0;
+    if (playlist.discontinuityStarts && playlist.discontinuityStarts.length) {
+      let lastDistance = null;
+      for (let i = 0; i < playlist.discontinuityStarts.length; i++) {
+        const segmentIndex = playlist.discontinuityStarts[i];
+        const discontinuity = playlist.discontinuitySequence + i + 1;
+        const discontinuitySync = syncController.discontinuities[discontinuity];
+        if (discontinuitySync) {
+          const distance = Math.abs(currentTime - discontinuitySync.time); // Once the distance begins to increase, we have passed
+          // currentTime and can stop looking for better candidates
+
+          if (lastDistance !== null && lastDistance < distance) {
+            break;
+          }
+          if (!syncPoint || lastDistance === null || lastDistance >= distance) {
+            lastDistance = distance;
+            syncPoint = {
+              time: discontinuitySync.time,
+              segmentIndex,
+              partIndex: null
+            };
+          }
+        }
+      }
+    }
+    return syncPoint;
+  }
+},
+// Stategy "Playlist": We have a playlist with a known mapping of
+//                     segment index to display time
+{
+  name: 'Playlist',
+  run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+    if (playlist.syncInfo) {
+      const syncPoint = {
+        time: playlist.syncInfo.time,
+        segmentIndex: playlist.syncInfo.mediaSequence - playlist.mediaSequence,
+        partIndex: null
+      };
+      return syncPoint;
+    }
+    return null;
+  }
+}];
+class SyncController extends videojs.EventTarget {
+  constructor(options = {}) {
+    super(); // ...for synching across variants
+
+    this.timelines = [];
+    this.discontinuities = [];
+    this.timelineToDatetimeMappings = {}; // TODO: this map should be only available for HLS. Since only HLS has MediaSequence.
+    //  For some reason this map helps with syncing between quality switch for MPEG-DASH as well.
+    //  Moreover if we disable this map for MPEG-DASH - quality switch will be broken.
+    //  MPEG-DASH should have its own separate sync strategy
+
+    this.mediaSequenceStorage_ = {
+      main: new MediaSequenceSync(),
+      audio: new MediaSequenceSync(),
+      vtt: new MediaSequenceSync()
+    };
+    this.logger_ = logger('SyncController');
+  }
+  /**
+   *
+   * @param {string} loaderType
+   * @return {MediaSequenceSync|null}
+   */
+
+  getMediaSequenceSync(loaderType) {
+    return this.mediaSequenceStorage_[loaderType] || null;
+  }
+  /**
+   * Find a sync-point for the playlist specified
+   *
+   * A sync-point is defined as a known mapping from display-time to
+   * a segment-index in the current playlist.
+   *
+   * @param {Playlist} playlist
+   *        The playlist that needs a sync-point
+   * @param {number} duration
+   *        Duration of the MediaSource (Infinite if playing a live source)
+   * @param {number} currentTimeline
+   *        The last timeline from which a segment was loaded
+   * @param {number} currentTime
+   *        Current player's time
+   * @param {string} type
+   *        Segment loader type
+   * @return {Object}
+   *          A sync-point object
+   */
+
+  getSyncPoint(playlist, duration, currentTimeline, currentTime, type) {
+    // Always use VOD sync point for VOD
+    if (duration !== Infinity) {
+      const vodSyncPointStrategy = syncPointStrategies.find(({
+        name
+      }) => name === 'VOD');
+      return vodSyncPointStrategy.run(this, playlist, duration);
+    }
+    const syncPoints = this.runStrategies_(playlist, duration, currentTimeline, currentTime, type);
+    if (!syncPoints.length) {
+      // Signal that we need to attempt to get a sync-point manually
+      // by fetching a segment in the playlist and constructing
+      // a sync-point from that information
+      return null;
+    } // If we have exact match just return it instead of finding the nearest distance
+
+    for (const syncPointInfo of syncPoints) {
+      const {
+        syncPoint,
+        strategy
+      } = syncPointInfo;
+      const {
+        segmentIndex,
+        time
+      } = syncPoint;
+      if (segmentIndex < 0) {
+        continue;
+      }
+      const selectedSegment = playlist.segments[segmentIndex];
+      const start = time;
+      const end = start + selectedSegment.duration;
+      this.logger_(`Strategy: ${strategy}. Current time: ${currentTime}. selected segment: ${segmentIndex}. Time: [${start} -> ${end}]}`);
+      if (currentTime >= start && currentTime < end) {
+        this.logger_('Found sync point with exact match: ', syncPoint);
+        return syncPoint;
+      }
+    } // Now find the sync-point that is closest to the currentTime because
+    // that should result in the most accurate guess about which segment
+    // to fetch
+
+    return this.selectSyncPoint_(syncPoints, {
+      key: 'time',
+      value: currentTime
+    });
+  }
+  /**
+   * Calculate the amount of time that has expired off the playlist during playback
+   *
+   * @param {Playlist} playlist
+   *        Playlist object to calculate expired from
+   * @param {number} duration
+   *        Duration of the MediaSource (Infinity if playling a live source)
+   * @return {number|null}
+   *          The amount of time that has expired off the playlist during playback. Null
+   *          if no sync-points for the playlist can be found.
+   */
+
+  getExpiredTime(playlist, duration) {
+    if (!playlist || !playlist.segments) {
+      return null;
+    }
+    const syncPoints = this.runStrategies_(playlist, duration, playlist.discontinuitySequence, 0); // Without sync-points, there is not enough information to determine the expired time
+
+    if (!syncPoints.length) {
+      return null;
+    }
+    const syncPoint = this.selectSyncPoint_(syncPoints, {
+      key: 'segmentIndex',
+      value: 0
+    }); // If the sync-point is beyond the start of the playlist, we want to subtract the
+    // duration from index 0 to syncPoint.segmentIndex instead of adding.
+
+    if (syncPoint.segmentIndex > 0) {
+      syncPoint.time *= -1;
+    }
+    return Math.abs(syncPoint.time + sumDurations({
+      defaultDuration: playlist.targetDuration,
+      durationList: playlist.segments,
+      startIndex: syncPoint.segmentIndex,
+      endIndex: 0
+    }));
+  }
+  /**
+   * Runs each sync-point strategy and returns a list of sync-points returned by the
+   * strategies
+   *
+   * @private
+   * @param {Playlist} playlist
+   *        The playlist that needs a sync-point
+   * @param {number} duration
+   *        Duration of the MediaSource (Infinity if playing a live source)
+   * @param {number} currentTimeline
+   *        The last timeline from which a segment was loaded
+   * @param {number} currentTime
+   *        Current player's time
+   * @param {string} type
+   *        Segment loader type
+   * @return {Array}
+   *          A list of sync-point objects
+   */
+
+  runStrategies_(playlist, duration, currentTimeline, currentTime, type) {
+    const syncPoints = []; // Try to find a sync-point in by utilizing various strategies...
+
+    for (let i = 0; i < syncPointStrategies.length; i++) {
+      const strategy = syncPointStrategies[i];
+      const syncPoint = strategy.run(this, playlist, duration, currentTimeline, currentTime, type);
+      if (syncPoint) {
+        syncPoint.strategy = strategy.name;
+        syncPoints.push({
+          strategy: strategy.name,
+          syncPoint
+        });
+      }
+    }
+    return syncPoints;
+  }
+  /**
+   * Selects the sync-point nearest the specified target
+   *
+   * @private
+   * @param {Array} syncPoints
+   *        List of sync-points to select from
+   * @param {Object} target
+   *        Object specifying the property and value we are targeting
+   * @param {string} target.key
+   *        Specifies the property to target. Must be either 'time' or 'segmentIndex'
+   * @param {number} target.value
+   *        The value to target for the specified key.
+   * @return {Object}
+   *          The sync-point nearest the target
+   */
+
+  selectSyncPoint_(syncPoints, target) {
+    let bestSyncPoint = syncPoints[0].syncPoint;
+    let bestDistance = Math.abs(syncPoints[0].syncPoint[target.key] - target.value);
+    let bestStrategy = syncPoints[0].strategy;
+    for (let i = 1; i < syncPoints.length; i++) {
+      const newDistance = Math.abs(syncPoints[i].syncPoint[target.key] - target.value);
+      if (newDistance < bestDistance) {
+        bestDistance = newDistance;
+        bestSyncPoint = syncPoints[i].syncPoint;
+        bestStrategy = syncPoints[i].strategy;
+      }
+    }
+    this.logger_(`syncPoint for [${target.key}: ${target.value}] chosen with strategy` + ` [${bestStrategy}]: [time:${bestSyncPoint.time},` + ` segmentIndex:${bestSyncPoint.segmentIndex}` + (typeof bestSyncPoint.partIndex === 'number' ? `,partIndex:${bestSyncPoint.partIndex}` : '') + ']');
+    return bestSyncPoint;
+  }
+  /**
+   * Save any meta-data present on the segments when segments leave
+   * the live window to the playlist to allow for synchronization at the
+   * playlist level later.
+   *
+   * @param {Playlist} oldPlaylist - The previous active playlist
+   * @param {Playlist} newPlaylist - The updated and most current playlist
+   */
+
+  saveExpiredSegmentInfo(oldPlaylist, newPlaylist) {
+    const mediaSequenceDiff = newPlaylist.mediaSequence - oldPlaylist.mediaSequence; // Ignore large media sequence gaps
+
+    if (mediaSequenceDiff > MAX_MEDIA_SEQUENCE_DIFF_FOR_SYNC) {
+      videojs.log.warn(`Not saving expired segment info. Media sequence gap ${mediaSequenceDiff} is too large.`);
+      return;
+    } // When a segment expires from the playlist and it has a start time
+    // save that information as a possible sync-point reference in future
+
+    for (let i = mediaSequenceDiff - 1; i >= 0; i--) {
+      const lastRemovedSegment = oldPlaylist.segments[i];
+      if (lastRemovedSegment && typeof lastRemovedSegment.start !== 'undefined') {
+        newPlaylist.syncInfo = {
+          mediaSequence: oldPlaylist.mediaSequence + i,
+          time: lastRemovedSegment.start
+        };
+        this.logger_(`playlist refresh sync: [time:${newPlaylist.syncInfo.time},` + ` mediaSequence: ${newPlaylist.syncInfo.mediaSequence}]`);
+        this.trigger('syncinfoupdate');
+        break;
+      }
+    }
+  }
+  /**
+   * Save the mapping from playlist's ProgramDateTime to display. This should only happen
+   * before segments start to load.
+   *
+   * @param {Playlist} playlist - The currently active playlist
+   */
+
+  setDateTimeMappingForStart(playlist) {
+    // It's possible for the playlist to be updated before playback starts, meaning time
+    // zero is not yet set. If, during these playlist refreshes, a discontinuity is
+    // crossed, then the old time zero mapping (for the prior timeline) would be retained
+    // unless the mappings are cleared.
+    this.timelineToDatetimeMappings = {};
+    if (playlist.segments && playlist.segments.length && playlist.segments[0].dateTimeObject) {
+      const firstSegment = playlist.segments[0];
+      const playlistTimestamp = firstSegment.dateTimeObject.getTime() / 1000;
+      this.timelineToDatetimeMappings[firstSegment.timeline] = -playlistTimestamp;
+    }
+  }
+  /**
+   * Calculates and saves timeline mappings, playlist sync info, and segment timing values
+   * based on the latest timing information.
+   *
+   * @param {Object} options
+   *        Options object
+   * @param {SegmentInfo} options.segmentInfo
+   *        The current active request information
+   * @param {boolean} options.shouldSaveTimelineMapping
+   *        If there's a timeline change, determines if the timeline mapping should be
+   *        saved for timeline mapping and program date time mappings.
+   */
+
+  saveSegmentTimingInfo({
+    segmentInfo,
+    shouldSaveTimelineMapping
+  }) {
+    const didCalculateSegmentTimeMapping = this.calculateSegmentTimeMapping_(segmentInfo, segmentInfo.timingInfo, shouldSaveTimelineMapping);
+    const segment = segmentInfo.segment;
+    if (didCalculateSegmentTimeMapping) {
+      this.saveDiscontinuitySyncInfo_(segmentInfo); // If the playlist does not have sync information yet, record that information
+      // now with segment timing information
+
+      if (!segmentInfo.playlist.syncInfo) {
+        segmentInfo.playlist.syncInfo = {
+          mediaSequence: segmentInfo.playlist.mediaSequence + segmentInfo.mediaIndex,
+          time: segment.start
+        };
+      }
+    }
+    const dateTime = segment.dateTimeObject;
+    if (segment.discontinuity && shouldSaveTimelineMapping && dateTime) {
+      this.timelineToDatetimeMappings[segment.timeline] = -(dateTime.getTime() / 1000);
+    }
+  }
+  timestampOffsetForTimeline(timeline) {
+    if (typeof this.timelines[timeline] === 'undefined') {
+      return null;
+    }
+    return this.timelines[timeline].time;
+  }
+  mappingForTimeline(timeline) {
+    if (typeof this.timelines[timeline] === 'undefined') {
+      return null;
+    }
+    return this.timelines[timeline].mapping;
+  }
+  /**
+   * Use the "media time" for a segment to generate a mapping to "display time" and
+   * save that display time to the segment.
+   *
+   * @private
+   * @param {SegmentInfo} segmentInfo
+   *        The current active request information
+   * @param {Object} timingInfo
+   *        The start and end time of the current segment in "media time"
+   * @param {boolean} shouldSaveTimelineMapping
+   *        If there's a timeline change, determines if the timeline mapping should be
+   *        saved in timelines.
+   * @return {boolean}
+   *          Returns false if segment time mapping could not be calculated
+   */
+
+  calculateSegmentTimeMapping_(segmentInfo, timingInfo, shouldSaveTimelineMapping) {
+    // TODO: remove side effects
+    const segment = segmentInfo.segment;
+    const part = segmentInfo.part;
+    let mappingObj = this.timelines[segmentInfo.timeline];
+    let start;
+    let end;
+    if (typeof segmentInfo.timestampOffset === 'number') {
+      mappingObj = {
+        time: segmentInfo.startOfSegment,
+        mapping: segmentInfo.startOfSegment - timingInfo.start
+      };
+      if (shouldSaveTimelineMapping) {
+        this.timelines[segmentInfo.timeline] = mappingObj;
+        this.trigger('timestampoffset');
+        this.logger_(`time mapping for timeline ${segmentInfo.timeline}: ` + `[time: ${mappingObj.time}] [mapping: ${mappingObj.mapping}]`);
+      }
+      start = segmentInfo.startOfSegment;
+      end = timingInfo.end + mappingObj.mapping;
+    } else if (mappingObj) {
+      start = timingInfo.start + mappingObj.mapping;
+      end = timingInfo.end + mappingObj.mapping;
+    } else {
+      return false;
+    }
+    if (part) {
+      part.start = start;
+      part.end = end;
+    } // If we don't have a segment start yet or the start value we got
+    // is less than our current segment.start value, save a new start value.
+    // We have to do this because parts will have segment timing info saved
+    // multiple times and we want segment start to be the earliest part start
+    // value for that segment.
+
+    if (!segment.start || start < segment.start) {
+      segment.start = start;
+    }
+    segment.end = end;
+    return true;
+  }
+  /**
+   * Each time we have discontinuity in the playlist, attempt to calculate the location
+   * in display of the start of the discontinuity and save that. We also save an accuracy
+   * value so that we save values with the most accuracy (closest to 0.)
+   *
+   * @private
+   * @param {SegmentInfo} segmentInfo - The current active request information
+   */
+
+  saveDiscontinuitySyncInfo_(segmentInfo) {
+    const playlist = segmentInfo.playlist;
+    const segment = segmentInfo.segment; // If the current segment is a discontinuity then we know exactly where
+    // the start of the range and it's accuracy is 0 (greater accuracy values
+    // mean more approximation)
+
+    if (segment.discontinuity) {
+      this.discontinuities[segment.timeline] = {
+        time: segment.start,
+        accuracy: 0
+      };
+    } else if (playlist.discontinuityStarts && playlist.discontinuityStarts.length) {
+      // Search for future discontinuities that we can provide better timing
+      // information for and save that information for sync purposes
+      for (let i = 0; i < playlist.discontinuityStarts.length; i++) {
+        const segmentIndex = playlist.discontinuityStarts[i];
+        const discontinuity = playlist.discontinuitySequence + i + 1;
+        const mediaIndexDiff = segmentIndex - segmentInfo.mediaIndex;
+        const accuracy = Math.abs(mediaIndexDiff);
+        if (!this.discontinuities[discontinuity] || this.discontinuities[discontinuity].accuracy > accuracy) {
+          let time;
+          if (mediaIndexDiff < 0) {
+            time = segment.start - sumDurations({
+              defaultDuration: playlist.targetDuration,
+              durationList: playlist.segments,
+              startIndex: segmentInfo.mediaIndex,
+              endIndex: segmentIndex
+            });
+          } else {
+            time = segment.end + sumDurations({
+              defaultDuration: playlist.targetDuration,
+              durationList: playlist.segments,
+              startIndex: segmentInfo.mediaIndex + 1,
+              endIndex: segmentIndex
+            });
+          }
+          this.discontinuities[discontinuity] = {
+            time,
+            accuracy
+          };
+        }
+      }
+    }
+  }
+  dispose() {
+    this.trigger('dispose');
+    this.off();
+  }
+}
+
+/**
+ * The TimelineChangeController acts as a source for segment loaders to listen for and
+ * keep track of latest and pending timeline changes. This is useful to ensure proper
+ * sync, as each loader may need to make a consideration for what timeline the other
+ * loader is on before making changes which could impact the other loader's media.
+ *
+ * @class TimelineChangeController
+ * @extends videojs.EventTarget
+ */
+
+class TimelineChangeController extends videojs.EventTarget {
+  constructor() {
+    super();
+    this.pendingTimelineChanges_ = {};
+    this.lastTimelineChanges_ = {};
+  }
+  clearPendingTimelineChange(type) {
+    this.pendingTimelineChanges_[type] = null;
+    this.trigger('pendingtimelinechange');
+  }
+  pendingTimelineChange({
+    type,
+    from,
+    to
+  }) {
+    if (typeof from === 'number' && typeof to === 'number') {
+      this.pendingTimelineChanges_[type] = {
+        type,
+        from,
+        to
+      };
+      this.trigger('pendingtimelinechange');
+    }
+    return this.pendingTimelineChanges_[type];
+  }
+  lastTimelineChange({
+    type,
+    from,
+    to
+  }) {
+    if (typeof from === 'number' && typeof to === 'number') {
+      this.lastTimelineChanges_[type] = {
+        type,
+        from,
+        to
+      };
+      delete this.pendingTimelineChanges_[type];
+      this.trigger('timelinechange');
+    }
+    return this.lastTimelineChanges_[type];
+  }
+  dispose() {
+    this.trigger('dispose');
+    this.pendingTimelineChanges_ = {};
+    this.lastTimelineChanges_ = {};
+    this.off();
+  }
+}
+
+/* rollup-plugin-worker-factory start for worker!/home/runner/work/http-streaming/http-streaming/src/decrypter-worker.js */
+const workerCode = transform(getWorkerString(function () {
+  /**
+   * @file stream.js
+   */
+
+  /**
+   * A lightweight readable stream implemention that handles event dispatching.
+   *
+   * @class Stream
+   */
+
+  var Stream = /*#__PURE__*/function () {
+    function Stream() {
+      this.listeners = {};
+    }
+    /**
+     * Add a listener for a specified event type.
+     *
+     * @param {string} type the event name
+     * @param {Function} listener the callback to be invoked when an event of
+     * the specified type occurs
+     */
+
+    var _proto = Stream.prototype;
+    _proto.on = function on(type, listener) {
+      if (!this.listeners[type]) {
+        this.listeners[type] = [];
+      }
+      this.listeners[type].push(listener);
+    }
+    /**
+     * Remove a listener for a specified event type.
+     *
+     * @param {string} type the event name
+     * @param {Function} listener  a function previously registered for this
+     * type of event through `on`
+     * @return {boolean} if we could turn it off or not
+     */;
+
+    _proto.off = function off(type, listener) {
+      if (!this.listeners[type]) {
+        return false;
+      }
+      var index = this.listeners[type].indexOf(listener); // TODO: which is better?
+      // In Video.js we slice listener functions
+      // on trigger so that it does not mess up the order
+      // while we loop through.
+      //
+      // Here we slice on off so that the loop in trigger
+      // can continue using it's old reference to loop without
+      // messing up the order.
+
+      this.listeners[type] = this.listeners[type].slice(0);
+      this.listeners[type].splice(index, 1);
+      return index > -1;
+    }
+    /**
+     * Trigger an event of the specified type on this stream. Any additional
+     * arguments to this function are passed as parameters to event listeners.
+     *
+     * @param {string} type the event name
+     */;
+
+    _proto.trigger = function trigger(type) {
+      var callbacks = this.listeners[type];
+      if (!callbacks) {
+        return;
+      } // Slicing the arguments on every invocation of this method
+      // can add a significant amount of overhead. Avoid the
+      // intermediate object creation for the common case of a
+      // single callback argument
+
+      if (arguments.length === 2) {
+        var length = callbacks.length;
+        for (var i = 0; i < length; ++i) {
+          callbacks[i].call(this, arguments[1]);
+        }
+      } else {
+        var args = Array.prototype.slice.call(arguments, 1);
+        var _length = callbacks.length;
+        for (var _i = 0; _i < _length; ++_i) {
+          callbacks[_i].apply(this, args);
+        }
+      }
+    }
+    /**
+     * Destroys the stream and cleans up.
+     */;
+
+    _proto.dispose = function dispose() {
+      this.listeners = {};
+    }
+    /**
+     * Forwards all `data` events on this stream to the destination stream. The
+     * destination stream should provide a method `push` to receive the data
+     * events as they arrive.
+     *
+     * @param {Stream} destination the stream that will receive all `data` events
+     * @see http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options
+     */;
+
+    _proto.pipe = function pipe(destination) {
+      this.on('data', function (data) {
+        destination.push(data);
+      });
+    };
+    return Stream;
+  }();
+  /*! @name pkcs7 @version 1.0.4 @license Apache-2.0 */
+
+  /**
+   * Returns the subarray of a Uint8Array without PKCS#7 padding.
+   *
+   * @param padded {Uint8Array} unencrypted bytes that have been padded
+   * @return {Uint8Array} the unpadded bytes
+   * @see http://tools.ietf.org/html/rfc5652
+   */
+
+  function unpad(padded) {
+    return padded.subarray(0, padded.byteLength - padded[padded.byteLength - 1]);
+  }
+  /*! @name aes-decrypter @version 4.0.1 @license Apache-2.0 */
+
+  /**
+   * @file aes.js
+   *
+   * This file contains an adaptation of the AES decryption algorithm
+   * from the Standford Javascript Cryptography Library. That work is
+   * covered by the following copyright and permissions notice:
+   *
+   * Copyright 2009-2010 Emily Stark, Mike Hamburg, Dan Boneh.
+   * All rights reserved.
+   *
+   * Redistribution and use in source and binary forms, with or without
+   * modification, are permitted provided that the following conditions are
+   * met:
+   *
+   * 1. Redistributions of source code must retain the above copyright
+   *    notice, this list of conditions and the following disclaimer.
+   *
+   * 2. Redistributions in binary form must reproduce the above
+   *    copyright notice, this list of conditions and the following
+   *    disclaimer in the documentation and/or other materials provided
+   *    with the distribution.
+   *
+   * THIS SOFTWARE IS PROVIDED BY THE AUTHORS ``AS IS'' AND ANY EXPRESS OR
+   * IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+   * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+   * DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> OR CONTRIBUTORS BE
+   * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+   * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+   * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
+   * BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+   * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
+   * OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN
+   * IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+   *
+   * The views and conclusions contained in the software and documentation
+   * are those of the authors and should not be interpreted as representing
+   * official policies, either expressed or implied, of the authors.
+   */
+
+  /**
+   * Expand the S-box tables.
+   *
+   * @private
+   */
+
+  const precompute = function () {
+    const tables = [[[], [], [], [], []], [[], [], [], [], []]];
+    const encTable = tables[0];
+    const decTable = tables[1];
+    const sbox = encTable[4];
+    const sboxInv = decTable[4];
+    let i;
+    let x;
+    let xInv;
+    const d = [];
+    const th = [];
+    let x2;
+    let x4;
+    let x8;
+    let s;
+    let tEnc;
+    let tDec; // Compute double and third tables
+
+    for (i = 0; i < 256; i++) {
+      th[(d[i] = i << 1 ^ (i >> 7) * 283) ^ i] = i;
+    }
+    for (x = xInv = 0; !sbox[x]; x ^= x2 || 1, xInv = th[xInv] || 1) {
+      // Compute sbox
+      s = xInv ^ xInv << 1 ^ xInv << 2 ^ xInv << 3 ^ xInv << 4;
+      s = s >> 8 ^ s & 255 ^ 99;
+      sbox[x] = s;
+      sboxInv[s] = x; // Compute MixColumns
+
+      x8 = d[x4 = d[x2 = d[x]]];
+      tDec = x8 * 0x1010101 ^ x4 * 0x10001 ^ x2 * 0x101 ^ x * 0x1010100;
+      tEnc = d[s] * 0x101 ^ s * 0x1010100;
+      for (i = 0; i < 4; i++) {
+        encTable[i][x] = tEnc = tEnc << 24 ^ tEnc >>> 8;
+        decTable[i][s] = tDec = tDec << 24 ^ tDec >>> 8;
+      }
+    } // Compactify. Considerable speedup on Firefox.
+
+    for (i = 0; i < 5; i++) {
+      encTable[i] = encTable[i].slice(0);
+      decTable[i] = decTable[i].slice(0);
+    }
+    return tables;
+  };
+  let aesTables = null;
+  /**
+   * Schedule out an AES key for both encryption and decryption. This
+   * is a low-level class. Use a cipher mode to do bulk encryption.
+   *
+   * @class AES
+   * @param key {Array} The key as an array of 4, 6 or 8 words.
+   */
+
+  class AES {
+    constructor(key) {
+      /**
+      * The expanded S-box and inverse S-box tables. These will be computed
+      * on the client so that we don't have to send them down the wire.
+      *
+      * There are two tables, _tables[0] is for encryption and
+      * _tables[1] is for decryption.
+      *
+      * The first 4 sub-tables are the expanded S-box with MixColumns. The
+      * last (_tables[01][4]) is the S-box itself.
+      *
+      * @private
+      */
+      // if we have yet to precompute the S-box tables
+      // do so now
+      if (!aesTables) {
+        aesTables = precompute();
+      } // then make a copy of that object for use
+
+      this._tables = [[aesTables[0][0].slice(), aesTables[0][1].slice(), aesTables[0][2].slice(), aesTables[0][3].slice(), aesTables[0][4].slice()], [aesTables[1][0].slice(), aesTables[1][1].slice(), aesTables[1][2].slice(), aesTables[1][3].slice(), aesTables[1][4].slice()]];
+      let i;
+      let j;
+      let tmp;
+      const sbox = this._tables[0][4];
+      const decTable = this._tables[1];
+      const keyLen = key.length;
+      let rcon = 1;
+      if (keyLen !== 4 && keyLen !== 6 && keyLen !== 8) {
+        throw new Error('Invalid aes key size');
+      }
+      const encKey = key.slice(0);
+      const decKey = [];
+      this._key = [encKey, decKey]; // schedule encryption keys
+
+      for (i = keyLen; i < 4 * keyLen + 28; i++) {
+        tmp = encKey[i - 1]; // apply sbox
+
+        if (i % keyLen === 0 || keyLen === 8 && i % keyLen === 4) {
+          tmp = sbox[tmp >>> 24] << 24 ^ sbox[tmp >> 16 & 255] << 16 ^ sbox[tmp >> 8 & 255] << 8 ^ sbox[tmp & 255]; // shift rows and add rcon
+
+          if (i % keyLen === 0) {
+            tmp = tmp << 8 ^ tmp >>> 24 ^ rcon << 24;
+            rcon = rcon << 1 ^ (rcon >> 7) * 283;
+          }
+        }
+        encKey[i] = encKey[i - keyLen] ^ tmp;
+      } // schedule decryption keys
+
+      for (j = 0; i; j++, i--) {
+        tmp = encKey[j & 3 ? i : i - 4];
+        if (i <= 4 || j < 4) {
+          decKey[j] = tmp;
+        } else {
+          decKey[j] = decTable[0][sbox[tmp >>> 24]] ^ decTable[1][sbox[tmp >> 16 & 255]] ^ decTable[2][sbox[tmp >> 8 & 255]] ^ decTable[3][sbox[tmp & 255]];
+        }
+      }
+    }
+    /**
+     * Decrypt 16 bytes, specified as four 32-bit words.
+     *
+     * @param {number} encrypted0 the first word to decrypt
+     * @param {number} encrypted1 the second word to decrypt
+     * @param {number} encrypted2 the third word to decrypt
+     * @param {number} encrypted3 the fourth word to decrypt
+     * @param {Int32Array} out the array to write the decrypted words
+     * into
+     * @param {number} offset the offset into the output array to start
+     * writing results
+     * @return {Array} The plaintext.
+     */
+
+    decrypt(encrypted0, encrypted1, encrypted2, encrypted3, out, offset) {
+      const key = this._key[1]; // state variables a,b,c,d are loaded with pre-whitened data
+
+      let a = encrypted0 ^ key[0];
+      let b = encrypted3 ^ key[1];
+      let c = encrypted2 ^ key[2];
+      let d = encrypted1 ^ key[3];
+      let a2;
+      let b2;
+      let c2; // key.length === 2 ?
+
+      const nInnerRounds = key.length / 4 - 2;
+      let i;
+      let kIndex = 4;
+      const table = this._tables[1]; // load up the tables
+
+      const table0 = table[0];
+      const table1 = table[1];
+      const table2 = table[2];
+      const table3 = table[3];
+      const sbox = table[4]; // Inner rounds. Cribbed from OpenSSL.
+
+      for (i = 0; i < nInnerRounds; i++) {
+        a2 = table0[a >>> 24] ^ table1[b >> 16 & 255] ^ table2[c >> 8 & 255] ^ table3[d & 255] ^ key[kIndex];
+        b2 = table0[b >>> 24] ^ table1[c >> 16 & 255] ^ table2[d >> 8 & 255] ^ table3[a & 255] ^ key[kIndex + 1];
+        c2 = table0[c >>> 24] ^ table1[d >> 16 & 255] ^ table2[a >> 8 & 255] ^ table3[b & 255] ^ key[kIndex + 2];
+        d = table0[d >>> 24] ^ table1[a >> 16 & 255] ^ table2[b >> 8 & 255] ^ table3[c & 255] ^ key[kIndex + 3];
+        kIndex += 4;
+        a = a2;
+        b = b2;
+        c = c2;
+      } // Last round.
+
+      for (i = 0; i < 4; i++) {
+        out[(3 & -i) + offset] = sbox[a >>> 24] << 24 ^ sbox[b >> 16 & 255] << 16 ^ sbox[c >> 8 & 255] << 8 ^ sbox[d & 255] ^ key[kIndex++];
+        a2 = a;
+        a = b;
+        b = c;
+        c = d;
+        d = a2;
+      }
+    }
+  }
+  /**
+   * @file async-stream.js
+   */
+
+  /**
+   * A wrapper around the Stream class to use setTimeout
+   * and run stream "jobs" Asynchronously
+   *
+   * @class AsyncStream
+   * @extends Stream
+   */
+
+  class AsyncStream extends Stream {
+    constructor() {
+      super(Stream);
+      this.jobs = [];
+      this.delay = 1;
+      this.timeout_ = null;
+    }
+    /**
+     * process an async job
+     *
+     * @private
+     */
+
+    processJob_() {
+      this.jobs.shift()();
+      if (this.jobs.length) {
+        this.timeout_ = setTimeout(this.processJob_.bind(this), this.delay);
+      } else {
+        this.timeout_ = null;
+      }
+    }
+    /**
+     * push a job into the stream
+     *
+     * @param {Function} job the job to push into the stream
+     */
+
+    push(job) {
+      this.jobs.push(job);
+      if (!this.timeout_) {
+        this.timeout_ = setTimeout(this.processJob_.bind(this), this.delay);
+      }
+    }
+  }
+  /**
+   * @file decrypter.js
+   *
+   * An asynchronous implementation of AES-128 CBC decryption with
+   * PKCS#7 padding.
+   */
+
+  /**
+   * Convert network-order (big-endian) bytes into their little-endian
+   * representation.
+   */
+
+  const ntoh = function (word) {
+    return word << 24 | (word & 0xff00) << 8 | (word & 0xff0000) >> 8 | word >>> 24;
+  };
+  /**
+   * Decrypt bytes using AES-128 with CBC and PKCS#7 padding.
+   *
+   * @param {Uint8Array} encrypted the encrypted bytes
+   * @param {Uint32Array} key the bytes of the decryption key
+   * @param {Uint32Array} initVector the initialization vector (IV) to
+   * use for the first round of CBC.
+   * @return {Uint8Array} the decrypted bytes
+   *
+   * @see http://en.wikipedia.org/wiki/Advanced_Encryption_Standard
+   * @see http://en.wikipedia.org/wiki/Block_cipher_mode_of_operation#Cipher_Block_Chaining_.28CBC.29
+   * @see https://tools.ietf.org/html/rfc2315
+   */
+
+  const decrypt = function (encrypted, key, initVector) {
+    // word-level access to the encrypted bytes
+    const encrypted32 = new Int32Array(encrypted.buffer, encrypted.byteOffset, encrypted.byteLength >> 2);
+    const decipher = new AES(Array.prototype.slice.call(key)); // byte and word-level access for the decrypted output
+
+    const decrypted = new Uint8Array(encrypted.byteLength);
+    const decrypted32 = new Int32Array(decrypted.buffer); // temporary variables for working with the IV, encrypted, and
+    // decrypted data
+
+    let init0;
+    let init1;
+    let init2;
+    let init3;
+    let encrypted0;
+    let encrypted1;
+    let encrypted2;
+    let encrypted3; // iteration variable
+
+    let wordIx; // pull out the words of the IV to ensure we don't modify the
+    // passed-in reference and easier access
+
+    init0 = initVector[0];
+    init1 = initVector[1];
+    init2 = initVector[2];
+    init3 = initVector[3]; // decrypt four word sequences, applying cipher-block chaining (CBC)
+    // to each decrypted block
+
+    for (wordIx = 0; wordIx < encrypted32.length; wordIx += 4) {
+      // convert big-endian (network order) words into little-endian
+      // (javascript order)
+      encrypted0 = ntoh(encrypted32[wordIx]);
+      encrypted1 = ntoh(encrypted32[wordIx + 1]);
+      encrypted2 = ntoh(encrypted32[wordIx + 2]);
+      encrypted3 = ntoh(encrypted32[wordIx + 3]); // decrypt the block
+
+      decipher.decrypt(encrypted0, encrypted1, encrypted2, encrypted3, decrypted32, wordIx); // XOR with the IV, and restore network byte-order to obtain the
+      // plaintext
+
+      decrypted32[wordIx] = ntoh(decrypted32[wordIx] ^ init0);
+      decrypted32[wordIx + 1] = ntoh(decrypted32[wordIx + 1] ^ init1);
+      decrypted32[wordIx + 2] = ntoh(decrypted32[wordIx + 2] ^ init2);
+      decrypted32[wordIx + 3] = ntoh(decrypted32[wordIx + 3] ^ init3); // setup the IV for the next round
+
+      init0 = encrypted0;
+      init1 = encrypted1;
+      init2 = encrypted2;
+      init3 = encrypted3;
+    }
+    return decrypted;
+  };
+  /**
+   * The `Decrypter` class that manages decryption of AES
+   * data through `AsyncStream` objects and the `decrypt`
+   * function
+   *
+   * @param {Uint8Array} encrypted the encrypted bytes
+   * @param {Uint32Array} key the bytes of the decryption key
+   * @param {Uint32Array} initVector the initialization vector (IV) to
+   * @param {Function} done the function to run when done
+   * @class Decrypter
+   */
+
+  class Decrypter {
+    constructor(encrypted, key, initVector, done) {
+      const step = Decrypter.STEP;
+      const encrypted32 = new Int32Array(encrypted.buffer);
+      const decrypted = new Uint8Array(encrypted.byteLength);
+      let i = 0;
+      this.asyncStream_ = new AsyncStream(); // split up the encryption job and do the individual chunks asynchronously
+
+      this.asyncStream_.push(this.decryptChunk_(encrypted32.subarray(i, i + step), key, initVector, decrypted));
+      for (i = step; i < encrypted32.length; i += step) {
+        initVector = new Uint32Array([ntoh(encrypted32[i - 4]), ntoh(encrypted32[i - 3]), ntoh(encrypted32[i - 2]), ntoh(encrypted32[i - 1])]);
+        this.asyncStream_.push(this.decryptChunk_(encrypted32.subarray(i, i + step), key, initVector, decrypted));
+      } // invoke the done() callback when everything is finished
+
+      this.asyncStream_.push(function () {
+        // remove pkcs#7 padding from the decrypted bytes
+        done(null, unpad(decrypted));
+      });
+    }
+    /**
+     * a getter for step the maximum number of bytes to process at one time
+     *
+     * @return {number} the value of step 32000
+     */
+
+    static get STEP() {
+      // 4 * 8000;
+      return 32000;
+    }
+    /**
+     * @private
+     */
+
+    decryptChunk_(encrypted, key, initVector, decrypted) {
+      return function () {
+        const bytes = decrypt(encrypted, key, initVector);
+        decrypted.set(bytes, encrypted.byteOffset);
+      };
+    }
+  }
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+  var win;
+  if (typeof window !== "undefined") {
+    win = window;
+  } else if (typeof commonjsGlobal !== "undefined") {
+    win = commonjsGlobal;
+  } else if (typeof self !== "undefined") {
+    win = self;
+  } else {
+    win = {};
+  }
+  var window_1 = win;
+  var isArrayBufferView = function isArrayBufferView(obj) {
+    if (ArrayBuffer.isView === 'function') {
+      return ArrayBuffer.isView(obj);
+    }
+    return obj && obj.buffer instanceof ArrayBuffer;
+  };
+  var BigInt = window_1.BigInt || Number;
+  [BigInt('0x1'), BigInt('0x100'), BigInt('0x10000'), BigInt('0x1000000'), BigInt('0x100000000'), BigInt('0x10000000000'), BigInt('0x1000000000000'), BigInt('0x100000000000000'), BigInt('0x10000000000000000')];
+  (function () {
+    var a = new Uint16Array([0xFFCC]);
+    var b = new Uint8Array(a.buffer, a.byteOffset, a.byteLength);
+    if (b[0] === 0xFF) {
+      return 'big';
+    }
+    if (b[0] === 0xCC) {
+      return 'little';
+    }
+    return 'unknown';
+  })();
+  /**
+   * Creates an object for sending to a web worker modifying properties that are TypedArrays
+   * into a new object with seperated properties for the buffer, byteOffset, and byteLength.
+   *
+   * @param {Object} message
+   *        Object of properties and values to send to the web worker
+   * @return {Object}
+   *         Modified message with TypedArray values expanded
+   * @function createTransferableMessage
+   */
+
+  const createTransferableMessage = function (message) {
+    const transferable = {};
+    Object.keys(message).forEach(key => {
+      const value = message[key];
+      if (isArrayBufferView(value)) {
+        transferable[key] = {
+          bytes: value.buffer,
+          byteOffset: value.byteOffset,
+          byteLength: value.byteLength
+        };
+      } else {
+        transferable[key] = value;
+      }
+    });
+    return transferable;
+  };
+  /* global self */
+
+  /**
+   * Our web worker interface so that things can talk to aes-decrypter
+   * that will be running in a web worker. the scope is passed to this by
+   * webworkify.
+   */
+
+  self.onmessage = function (event) {
+    const data = event.data;
+    const encrypted = new Uint8Array(data.encrypted.bytes, data.encrypted.byteOffset, data.encrypted.byteLength);
+    const key = new Uint32Array(data.key.bytes, data.key.byteOffset, data.key.byteLength / 4);
+    const iv = new Uint32Array(data.iv.bytes, data.iv.byteOffset, data.iv.byteLength / 4);
+    /* eslint-disable no-new, handle-callback-err */
+
+    new Decrypter(encrypted, key, iv, function (err, bytes) {
+      self.postMessage(createTransferableMessage({
+        source: data.source,
+        decrypted: bytes
+      }), [bytes.buffer]);
+    });
+    /* eslint-enable */
+  };
+}));
+
+var Decrypter = factory(workerCode);
+/* rollup-plugin-worker-factory end for worker!/home/runner/work/http-streaming/http-streaming/src/decrypter-worker.js */
+
+/**
+ * Convert the properties of an HLS track into an audioTrackKind.
+ *
+ * @private
+ */
+
+const audioTrackKind_ = properties => {
+  let kind = properties.default ? 'main' : 'alternative';
+  if (properties.characteristics && properties.characteristics.indexOf('public.accessibility.describes-video') >= 0) {
+    kind = 'main-desc';
+  }
+  return kind;
+};
+/**
+ * Pause provided segment loader and playlist loader if active
+ *
+ * @param {SegmentLoader} segmentLoader
+ *        SegmentLoader to pause
+ * @param {Object} mediaType
+ *        Active media type
+ * @function stopLoaders
+ */
+
+const stopLoaders = (segmentLoader, mediaType) => {
+  segmentLoader.abort();
+  segmentLoader.pause();
+  if (mediaType && mediaType.activePlaylistLoader) {
+    mediaType.activePlaylistLoader.pause();
+    mediaType.activePlaylistLoader = null;
+  }
+};
+/**
+ * Start loading provided segment loader and playlist loader
+ *
+ * @param {PlaylistLoader} playlistLoader
+ *        PlaylistLoader to start loading
+ * @param {Object} mediaType
+ *        Active media type
+ * @function startLoaders
+ */
+
+const startLoaders = (playlistLoader, mediaType) => {
+  // Segment loader will be started after `loadedmetadata` or `loadedplaylist` from the
+  // playlist loader
+  mediaType.activePlaylistLoader = playlistLoader;
+  playlistLoader.load();
+};
+/**
+ * Returns a function to be called when the media group changes. It performs a
+ * non-destructive (preserve the buffer) resync of the SegmentLoader. This is because a
+ * change of group is merely a rendition switch of the same content at another encoding,
+ * rather than a change of content, such as switching audio from English to Spanish.
+ *
+ * @param {string} type
+ *        MediaGroup type
+ * @param {Object} settings
+ *        Object containing required information for media groups
+ * @return {Function}
+ *         Handler for a non-destructive resync of SegmentLoader when the active media
+ *         group changes.
+ * @function onGroupChanged
+ */
+
+const onGroupChanged = (type, settings) => () => {
+  const {
+    segmentLoaders: {
+      [type]: segmentLoader,
+      main: mainSegmentLoader
+    },
+    mediaTypes: {
+      [type]: mediaType
+    }
+  } = settings;
+  const activeTrack = mediaType.activeTrack();
+  const activeGroup = mediaType.getActiveGroup();
+  const previousActiveLoader = mediaType.activePlaylistLoader;
+  const lastGroup = mediaType.lastGroup_; // the group did not change do nothing
+
+  if (activeGroup && lastGroup && activeGroup.id === lastGroup.id) {
+    return;
+  }
+  mediaType.lastGroup_ = activeGroup;
+  mediaType.lastTrack_ = activeTrack;
+  stopLoaders(segmentLoader, mediaType);
+  if (!activeGroup || activeGroup.isMainPlaylist) {
+    // there is no group active or active group is a main playlist and won't change
+    return;
+  }
+  if (!activeGroup.playlistLoader) {
+    if (previousActiveLoader) {
+      // The previous group had a playlist loader but the new active group does not
+      // this means we are switching from demuxed to muxed audio. In this case we want to
+      // do a destructive reset of the main segment loader and not restart the audio
+      // loaders.
+      mainSegmentLoader.resetEverything();
+    }
+    return;
+  } // Non-destructive resync
+
+  segmentLoader.resyncLoader();
+  startLoaders(activeGroup.playlistLoader, mediaType);
+};
+const onGroupChanging = (type, settings) => () => {
+  const {
+    segmentLoaders: {
+      [type]: segmentLoader
+    },
+    mediaTypes: {
+      [type]: mediaType
+    }
+  } = settings;
+  mediaType.lastGroup_ = null;
+  segmentLoader.abort();
+  segmentLoader.pause();
+};
+/**
+ * Returns a function to be called when the media track changes. It performs a
+ * destructive reset of the SegmentLoader to ensure we start loading as close to
+ * currentTime as possible.
+ *
+ * @param {string} type
+ *        MediaGroup type
+ * @param {Object} settings
+ *        Object containing required information for media groups
+ * @return {Function}
+ *         Handler for a destructive reset of SegmentLoader when the active media
+ *         track changes.
+ * @function onTrackChanged
+ */
+
+const onTrackChanged = (type, settings) => () => {
+  const {
+    mainPlaylistLoader,
+    segmentLoaders: {
+      [type]: segmentLoader,
+      main: mainSegmentLoader
+    },
+    mediaTypes: {
+      [type]: mediaType
+    }
+  } = settings;
+  const activeTrack = mediaType.activeTrack();
+  const activeGroup = mediaType.getActiveGroup();
+  const previousActiveLoader = mediaType.activePlaylistLoader;
+  const lastTrack = mediaType.lastTrack_; // track did not change, do nothing
+
+  if (lastTrack && activeTrack && lastTrack.id === activeTrack.id) {
+    return;
+  }
+  mediaType.lastGroup_ = activeGroup;
+  mediaType.lastTrack_ = activeTrack;
+  stopLoaders(segmentLoader, mediaType);
+  if (!activeGroup) {
+    // there is no group active so we do not want to restart loaders
+    return;
+  }
+  if (activeGroup.isMainPlaylist) {
+    // track did not change, do nothing
+    if (!activeTrack || !lastTrack || activeTrack.id === lastTrack.id) {
+      return;
+    }
+    const pc = settings.vhs.playlistController_;
+    const newPlaylist = pc.selectPlaylist(); // media will not change do nothing
+
+    if (pc.media() === newPlaylist) {
+      return;
+    }
+    mediaType.logger_(`track change. Switching main audio from ${lastTrack.id} to ${activeTrack.id}`);
+    mainPlaylistLoader.pause();
+    mainSegmentLoader.resetEverything();
+    pc.fastQualityChange_(newPlaylist);
+    return;
+  }
+  if (type === 'AUDIO') {
+    if (!activeGroup.playlistLoader) {
+      // when switching from demuxed audio/video to muxed audio/video (noted by no
+      // playlist loader for the audio group), we want to do a destructive reset of the
+      // main segment loader and not restart the audio loaders
+      mainSegmentLoader.setAudio(true); // don't have to worry about disabling the audio of the audio segment loader since
+      // it should be stopped
+
+      mainSegmentLoader.resetEverything();
+      return;
+    } // although the segment loader is an audio segment loader, call the setAudio
+    // function to ensure it is prepared to re-append the init segment (or handle other
+    // config changes)
+
+    segmentLoader.setAudio(true);
+    mainSegmentLoader.setAudio(false);
+  }
+  if (previousActiveLoader === activeGroup.playlistLoader) {
+    // Nothing has actually changed. This can happen because track change events can fire
+    // multiple times for a "single" change. One for enabling the new active track, and
+    // one for disabling the track that was active
+    startLoaders(activeGroup.playlistLoader, mediaType);
+    return;
+  }
+  if (segmentLoader.track) {
+    // For WebVTT, set the new text track in the segmentloader
+    segmentLoader.track(activeTrack);
+  } // destructive reset
+
+  segmentLoader.resetEverything();
+  startLoaders(activeGroup.playlistLoader, mediaType);
+};
+const onError = {
+  /**
+   * Returns a function to be called when a SegmentLoader or PlaylistLoader encounters
+   * an error.
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Error handler. Logs warning (or error if the playlist is excluded) to
+   *         console and switches back to default audio track.
+   * @function onError.AUDIO
+   */
+  AUDIO: (type, settings) => () => {
+    const {
+      mediaTypes: {
+        [type]: mediaType
+      },
+      excludePlaylist
+    } = settings; // switch back to default audio track
+
+    const activeTrack = mediaType.activeTrack();
+    const activeGroup = mediaType.activeGroup();
+    const id = (activeGroup.filter(group => group.default)[0] || activeGroup[0]).id;
+    const defaultTrack = mediaType.tracks[id];
+    if (activeTrack === defaultTrack) {
+      // Default track encountered an error. All we can do now is exclude the current
+      // rendition and hope another will switch audio groups
+      excludePlaylist({
+        error: {
+          message: 'Problem encountered loading the default audio track.'
+        }
+      });
+      return;
+    }
+    videojs.log.warn('Problem encountered loading the alternate audio track.' + 'Switching back to default.');
+    for (const trackId in mediaType.tracks) {
+      mediaType.tracks[trackId].enabled = mediaType.tracks[trackId] === defaultTrack;
+    }
+    mediaType.onTrackChanged();
+  },
+  /**
+   * Returns a function to be called when a SegmentLoader or PlaylistLoader encounters
+   * an error.
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Error handler. Logs warning to console and disables the active subtitle track
+   * @function onError.SUBTITLES
+   */
+  SUBTITLES: (type, settings) => () => {
+    const {
+      mediaTypes: {
+        [type]: mediaType
+      }
+    } = settings;
+    videojs.log.warn('Problem encountered loading the subtitle track.' + 'Disabling subtitle track.');
+    const track = mediaType.activeTrack();
+    if (track) {
+      track.mode = 'disabled';
+    }
+    mediaType.onTrackChanged();
+  }
+};
+const setupListeners = {
+  /**
+   * Setup event listeners for audio playlist loader
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {PlaylistLoader|null} playlistLoader
+   *        PlaylistLoader to register listeners on
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @function setupListeners.AUDIO
+   */
+  AUDIO: (type, playlistLoader, settings) => {
+    if (!playlistLoader) {
+      // no playlist loader means audio will be muxed with the video
+      return;
+    }
+    const {
+      tech,
+      requestOptions,
+      segmentLoaders: {
+        [type]: segmentLoader
+      }
+    } = settings;
+    playlistLoader.on('loadedmetadata', () => {
+      const media = playlistLoader.media();
+      segmentLoader.playlist(media, requestOptions); // if the video is already playing, or if this isn't a live video and preload
+      // permits, start downloading segments
+
+      if (!tech.paused() || media.endList && tech.preload() !== 'none') {
+        segmentLoader.load();
+      }
+    });
+    playlistLoader.on('loadedplaylist', () => {
+      segmentLoader.playlist(playlistLoader.media(), requestOptions); // If the player isn't paused, ensure that the segment loader is running
+
+      if (!tech.paused()) {
+        segmentLoader.load();
+      }
+    });
+    playlistLoader.on('error', onError[type](type, settings));
+  },
+  /**
+   * Setup event listeners for subtitle playlist loader
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {PlaylistLoader|null} playlistLoader
+   *        PlaylistLoader to register listeners on
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @function setupListeners.SUBTITLES
+   */
+  SUBTITLES: (type, playlistLoader, settings) => {
+    const {
+      tech,
+      requestOptions,
+      segmentLoaders: {
+        [type]: segmentLoader
+      },
+      mediaTypes: {
+        [type]: mediaType
+      }
+    } = settings;
+    playlistLoader.on('loadedmetadata', () => {
+      const media = playlistLoader.media();
+      segmentLoader.playlist(media, requestOptions);
+      segmentLoader.track(mediaType.activeTrack()); // if the video is already playing, or if this isn't a live video and preload
+      // permits, start downloading segments
+
+      if (!tech.paused() || media.endList && tech.preload() !== 'none') {
+        segmentLoader.load();
+      }
+    });
+    playlistLoader.on('loadedplaylist', () => {
+      segmentLoader.playlist(playlistLoader.media(), requestOptions); // If the player isn't paused, ensure that the segment loader is running
+
+      if (!tech.paused()) {
+        segmentLoader.load();
+      }
+    });
+    playlistLoader.on('error', onError[type](type, settings));
+  }
+};
+const initialize = {
+  /**
+   * Setup PlaylistLoaders and AudioTracks for the audio groups
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @function initialize.AUDIO
+   */
+  'AUDIO': (type, settings) => {
+    const {
+      vhs,
+      sourceType,
+      segmentLoaders: {
+        [type]: segmentLoader
+      },
+      requestOptions,
+      main: {
+        mediaGroups
+      },
+      mediaTypes: {
+        [type]: {
+          groups,
+          tracks,
+          logger_
+        }
+      },
+      mainPlaylistLoader
+    } = settings;
+    const audioOnlyMain = isAudioOnly(mainPlaylistLoader.main); // force a default if we have none
+
+    if (!mediaGroups[type] || Object.keys(mediaGroups[type]).length === 0) {
+      mediaGroups[type] = {
+        main: {
+          default: {
+            default: true
+          }
+        }
+      };
+      if (audioOnlyMain) {
+        mediaGroups[type].main.default.playlists = mainPlaylistLoader.main.playlists;
+      }
+    }
+    for (const groupId in mediaGroups[type]) {
+      if (!groups[groupId]) {
+        groups[groupId] = [];
+      }
+      for (const variantLabel in mediaGroups[type][groupId]) {
+        let properties = mediaGroups[type][groupId][variantLabel];
+        let playlistLoader;
+        if (audioOnlyMain) {
+          logger_(`AUDIO group '${groupId}' label '${variantLabel}' is a main playlist`);
+          properties.isMainPlaylist = true;
+          playlistLoader = null; // if vhs-json was provided as the source, and the media playlist was resolved,
+          // use the resolved media playlist object
+        } else if (sourceType === 'vhs-json' && properties.playlists) {
+          playlistLoader = new PlaylistLoader(properties.playlists[0], vhs, requestOptions);
+        } else if (properties.resolvedUri) {
+          playlistLoader = new PlaylistLoader(properties.resolvedUri, vhs, requestOptions); // TODO: dash isn't the only type with properties.playlists
+          // should we even have properties.playlists in this check.
+        } else if (properties.playlists && sourceType === 'dash') {
+          playlistLoader = new DashPlaylistLoader(properties.playlists[0], vhs, requestOptions, mainPlaylistLoader);
+        } else {
+          // no resolvedUri means the audio is muxed with the video when using this
+          // audio track
+          playlistLoader = null;
+        }
+        properties = merge({
+          id: variantLabel,
+          playlistLoader
+        }, properties);
+        setupListeners[type](type, properties.playlistLoader, settings);
+        groups[groupId].push(properties);
+        if (typeof tracks[variantLabel] === 'undefined') {
+          const track = new videojs.AudioTrack({
+            id: variantLabel,
+            kind: audioTrackKind_(properties),
+            enabled: false,
+            language: properties.language,
+            default: properties.default,
+            label: variantLabel
+          });
+          tracks[variantLabel] = track;
+        }
+      }
+    } // setup single error event handler for the segment loader
+
+    segmentLoader.on('error', onError[type](type, settings));
+  },
+  /**
+   * Setup PlaylistLoaders and TextTracks for the subtitle groups
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @function initialize.SUBTITLES
+   */
+  'SUBTITLES': (type, settings) => {
+    const {
+      tech,
+      vhs,
+      sourceType,
+      segmentLoaders: {
+        [type]: segmentLoader
+      },
+      requestOptions,
+      main: {
+        mediaGroups
+      },
+      mediaTypes: {
+        [type]: {
+          groups,
+          tracks
+        }
+      },
+      mainPlaylistLoader
+    } = settings;
+    for (const groupId in mediaGroups[type]) {
+      if (!groups[groupId]) {
+        groups[groupId] = [];
+      }
+      for (const variantLabel in mediaGroups[type][groupId]) {
+        if (!vhs.options_.useForcedSubtitles && mediaGroups[type][groupId][variantLabel].forced) {
+          // Subtitle playlists with the forced attribute are not selectable in Safari.
+          // According to Apple's HLS Authoring Specification:
+          //   If content has forced subtitles and regular subtitles in a given language,
+          //   the regular subtitles track in that language MUST contain both the forced
+          //   subtitles and the regular subtitles for that language.
+          // Because of this requirement and that Safari does not add forced subtitles,
+          // forced subtitles are skipped here to maintain consistent experience across
+          // all platforms
+          continue;
+        }
+        let properties = mediaGroups[type][groupId][variantLabel];
+        let playlistLoader;
+        if (sourceType === 'hls') {
+          playlistLoader = new PlaylistLoader(properties.resolvedUri, vhs, requestOptions);
+        } else if (sourceType === 'dash') {
+          const playlists = properties.playlists.filter(p => p.excludeUntil !== Infinity);
+          if (!playlists.length) {
+            return;
+          }
+          playlistLoader = new DashPlaylistLoader(properties.playlists[0], vhs, requestOptions, mainPlaylistLoader);
+        } else if (sourceType === 'vhs-json') {
+          playlistLoader = new PlaylistLoader(
+          // if the vhs-json object included the media playlist, use the media playlist
+          // as provided, otherwise use the resolved URI to load the playlist
+          properties.playlists ? properties.playlists[0] : properties.resolvedUri, vhs, requestOptions);
+        }
+        properties = merge({
+          id: variantLabel,
+          playlistLoader
+        }, properties);
+        setupListeners[type](type, properties.playlistLoader, settings);
+        groups[groupId].push(properties);
+        if (typeof tracks[variantLabel] === 'undefined') {
+          const track = tech.addRemoteTextTrack({
+            id: variantLabel,
+            kind: 'subtitles',
+            default: properties.default && properties.autoselect,
+            language: properties.language,
+            label: variantLabel
+          }, false).track;
+          tracks[variantLabel] = track;
+        }
+      }
+    } // setup single error event handler for the segment loader
+
+    segmentLoader.on('error', onError[type](type, settings));
+  },
+  /**
+   * Setup TextTracks for the closed-caption groups
+   *
+   * @param {String} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @function initialize['CLOSED-CAPTIONS']
+   */
+  'CLOSED-CAPTIONS': (type, settings) => {
+    const {
+      tech,
+      main: {
+        mediaGroups
+      },
+      mediaTypes: {
+        [type]: {
+          groups,
+          tracks
+        }
+      }
+    } = settings;
+    for (const groupId in mediaGroups[type]) {
+      if (!groups[groupId]) {
+        groups[groupId] = [];
+      }
+      for (const variantLabel in mediaGroups[type][groupId]) {
+        const properties = mediaGroups[type][groupId][variantLabel]; // Look for either 608 (CCn) or 708 (SERVICEn) caption services
+
+        if (!/^(?:CC|SERVICE)/.test(properties.instreamId)) {
+          continue;
+        }
+        const captionServices = tech.options_.vhs && tech.options_.vhs.captionServices || {};
+        let newProps = {
+          label: variantLabel,
+          language: properties.language,
+          instreamId: properties.instreamId,
+          default: properties.default && properties.autoselect
+        };
+        if (captionServices[newProps.instreamId]) {
+          newProps = merge(newProps, captionServices[newProps.instreamId]);
+        }
+        if (newProps.default === undefined) {
+          delete newProps.default;
+        } // No PlaylistLoader is required for Closed-Captions because the captions are
+        // embedded within the video stream
+
+        groups[groupId].push(merge({
+          id: variantLabel
+        }, properties));
+        if (typeof tracks[variantLabel] === 'undefined') {
+          const track = tech.addRemoteTextTrack({
+            id: newProps.instreamId,
+            kind: 'captions',
+            default: newProps.default,
+            language: newProps.language,
+            label: newProps.label
+          }, false).track;
+          tracks[variantLabel] = track;
+        }
+      }
+    }
+  }
+};
+const groupMatch = (list, media) => {
+  for (let i = 0; i < list.length; i++) {
+    if (playlistMatch(media, list[i])) {
+      return true;
+    }
+    if (list[i].playlists && groupMatch(list[i].playlists, media)) {
+      return true;
+    }
+  }
+  return false;
+};
+/**
+ * Returns a function used to get the active group of the provided type
+ *
+ * @param {string} type
+ *        MediaGroup type
+ * @param {Object} settings
+ *        Object containing required information for media groups
+ * @return {Function}
+ *         Function that returns the active media group for the provided type. Takes an
+ *         optional parameter {TextTrack} track. If no track is provided, a list of all
+ *         variants in the group, otherwise the variant corresponding to the provided
+ *         track is returned.
+ * @function activeGroup
+ */
+
+const activeGroup = (type, settings) => track => {
+  const {
+    mainPlaylistLoader,
+    mediaTypes: {
+      [type]: {
+        groups
+      }
+    }
+  } = settings;
+  const media = mainPlaylistLoader.media();
+  if (!media) {
+    return null;
+  }
+  let variants = null; // set to variants to main media active group
+
+  if (media.attributes[type]) {
+    variants = groups[media.attributes[type]];
+  }
+  const groupKeys = Object.keys(groups);
+  if (!variants) {
+    // find the mainPlaylistLoader media
+    // that is in a media group if we are dealing
+    // with audio only
+    if (type === 'AUDIO' && groupKeys.length > 1 && isAudioOnly(settings.main)) {
+      for (let i = 0; i < groupKeys.length; i++) {
+        const groupPropertyList = groups[groupKeys[i]];
+        if (groupMatch(groupPropertyList, media)) {
+          variants = groupPropertyList;
+          break;
+        }
+      } // use the main group if it exists
+    } else if (groups.main) {
+      variants = groups.main; // only one group, use that one
+    } else if (groupKeys.length === 1) {
+      variants = groups[groupKeys[0]];
+    }
+  }
+  if (typeof track === 'undefined') {
+    return variants;
+  }
+  if (track === null || !variants) {
+    // An active track was specified so a corresponding group is expected. track === null
+    // means no track is currently active so there is no corresponding group
+    return null;
+  }
+  return variants.filter(props => props.id === track.id)[0] || null;
+};
+const activeTrack = {
+  /**
+   * Returns a function used to get the active track of type provided
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Function that returns the active media track for the provided type. Returns
+   *         null if no track is active
+   * @function activeTrack.AUDIO
+   */
+  AUDIO: (type, settings) => () => {
+    const {
+      mediaTypes: {
+        [type]: {
+          tracks
+        }
+      }
+    } = settings;
+    for (const id in tracks) {
+      if (tracks[id].enabled) {
+        return tracks[id];
+      }
+    }
+    return null;
+  },
+  /**
+   * Returns a function used to get the active track of type provided
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Function that returns the active media track for the provided type. Returns
+   *         null if no track is active
+   * @function activeTrack.SUBTITLES
+   */
+  SUBTITLES: (type, settings) => () => {
+    const {
+      mediaTypes: {
+        [type]: {
+          tracks
+        }
+      }
+    } = settings;
+    for (const id in tracks) {
+      if (tracks[id].mode === 'showing' || tracks[id].mode === 'hidden') {
+        return tracks[id];
+      }
+    }
+    return null;
+  }
+};
+const getActiveGroup = (type, {
+  mediaTypes
+}) => () => {
+  const activeTrack_ = mediaTypes[type].activeTrack();
+  if (!activeTrack_) {
+    return null;
+  }
+  return mediaTypes[type].activeGroup(activeTrack_);
+};
+/**
+ * Setup PlaylistLoaders and Tracks for media groups (Audio, Subtitles,
+ * Closed-Captions) specified in the main manifest.
+ *
+ * @param {Object} settings
+ *        Object containing required information for setting up the media groups
+ * @param {Tech} settings.tech
+ *        The tech of the player
+ * @param {Object} settings.requestOptions
+ *        XHR request options used by the segment loaders
+ * @param {PlaylistLoader} settings.mainPlaylistLoader
+ *        PlaylistLoader for the main source
+ * @param {VhsHandler} settings.vhs
+ *        VHS SourceHandler
+ * @param {Object} settings.main
+ *        The parsed main manifest
+ * @param {Object} settings.mediaTypes
+ *        Object to store the loaders, tracks, and utility methods for each media type
+ * @param {Function} settings.excludePlaylist
+ *        Excludes the current rendition and forces a rendition switch.
+ * @function setupMediaGroups
+ */
+
+const setupMediaGroups = settings => {
+  ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+    initialize[type](type, settings);
+  });
+  const {
+    mediaTypes,
+    mainPlaylistLoader,
+    tech,
+    vhs,
+    segmentLoaders: {
+      ['AUDIO']: audioSegmentLoader,
+      main: mainSegmentLoader
+    }
+  } = settings; // setup active group and track getters and change event handlers
+
+  ['AUDIO', 'SUBTITLES'].forEach(type => {
+    mediaTypes[type].activeGroup = activeGroup(type, settings);
+    mediaTypes[type].activeTrack = activeTrack[type](type, settings);
+    mediaTypes[type].onGroupChanged = onGroupChanged(type, settings);
+    mediaTypes[type].onGroupChanging = onGroupChanging(type, settings);
+    mediaTypes[type].onTrackChanged = onTrackChanged(type, settings);
+    mediaTypes[type].getActiveGroup = getActiveGroup(type, settings);
+  }); // DO NOT enable the default subtitle or caption track.
+  // DO enable the default audio track
+
+  const audioGroup = mediaTypes.AUDIO.activeGroup();
+  if (audioGroup) {
+    const groupId = (audioGroup.filter(group => group.default)[0] || audioGroup[0]).id;
+    mediaTypes.AUDIO.tracks[groupId].enabled = true;
+    mediaTypes.AUDIO.onGroupChanged();
+    mediaTypes.AUDIO.onTrackChanged();
+    const activeAudioGroup = mediaTypes.AUDIO.getActiveGroup(); // a similar check for handling setAudio on each loader is run again each time the
+    // track is changed, but needs to be handled here since the track may not be considered
+    // changed on the first call to onTrackChanged
+
+    if (!activeAudioGroup.playlistLoader) {
+      // either audio is muxed with video or the stream is audio only
+      mainSegmentLoader.setAudio(true);
+    } else {
+      // audio is demuxed
+      mainSegmentLoader.setAudio(false);
+      audioSegmentLoader.setAudio(true);
+    }
+  }
+  mainPlaylistLoader.on('mediachange', () => {
+    ['AUDIO', 'SUBTITLES'].forEach(type => mediaTypes[type].onGroupChanged());
+  });
+  mainPlaylistLoader.on('mediachanging', () => {
+    ['AUDIO', 'SUBTITLES'].forEach(type => mediaTypes[type].onGroupChanging());
+  }); // custom audio track change event handler for usage event
+
+  const onAudioTrackChanged = () => {
+    mediaTypes.AUDIO.onTrackChanged();
+    tech.trigger({
+      type: 'usage',
+      name: 'vhs-audio-change'
+    });
+  };
+  tech.audioTracks().addEventListener('change', onAudioTrackChanged);
+  tech.remoteTextTracks().addEventListener('change', mediaTypes.SUBTITLES.onTrackChanged);
+  vhs.on('dispose', () => {
+    tech.audioTracks().removeEventListener('change', onAudioTrackChanged);
+    tech.remoteTextTracks().removeEventListener('change', mediaTypes.SUBTITLES.onTrackChanged);
+  }); // clear existing audio tracks and add the ones we just created
+
+  tech.clearTracks('audio');
+  for (const id in mediaTypes.AUDIO.tracks) {
+    tech.audioTracks().addTrack(mediaTypes.AUDIO.tracks[id]);
+  }
+};
+/**
+ * Creates skeleton object used to store the loaders, tracks, and utility methods for each
+ * media type
+ *
+ * @return {Object}
+ *         Object to store the loaders, tracks, and utility methods for each media type
+ * @function createMediaTypes
+ */
+
+const createMediaTypes = () => {
+  const mediaTypes = {};
+  ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+    mediaTypes[type] = {
+      groups: {},
+      tracks: {},
+      activePlaylistLoader: null,
+      activeGroup: noop,
+      activeTrack: noop,
+      getActiveGroup: noop,
+      onGroupChanged: noop,
+      onTrackChanged: noop,
+      lastTrack_: null,
+      logger_: logger(`MediaGroups[${type}]`)
+    };
+  });
+  return mediaTypes;
+};
+
+/**
+ * A utility class for setting properties and maintaining the state of the content steering manifest.
+ *
+ * Content Steering manifest format:
+ * VERSION: number (required) currently only version 1 is supported.
+ * TTL: number in seconds (optional) until the next content steering manifest reload.
+ * RELOAD-URI: string (optional) uri to fetch the next content steering manifest.
+ * SERVICE-LOCATION-PRIORITY or PATHWAY-PRIORITY a non empty array of unique string values.
+ * PATHWAY-CLONES: array (optional) (HLS only) pathway clone objects to copy from other playlists.
+ */
+
+class SteeringManifest {
+  constructor() {
+    this.priority_ = [];
+    this.pathwayClones_ = new Map();
+  }
+  set version(number) {
+    // Only version 1 is currently supported for both DASH and HLS.
+    if (number === 1) {
+      this.version_ = number;
+    }
+  }
+  set ttl(seconds) {
+    // TTL = time-to-live, default = 300 seconds.
+    this.ttl_ = seconds || 300;
+  }
+  set reloadUri(uri) {
+    if (uri) {
+      // reload URI can be relative to the previous reloadUri.
+      this.reloadUri_ = resolveUrl(this.reloadUri_, uri);
+    }
+  }
+  set priority(array) {
+    // priority must be non-empty and unique values.
+    if (array && array.length) {
+      this.priority_ = array;
+    }
+  }
+  set pathwayClones(array) {
+    // pathwayClones must be non-empty.
+    if (array && array.length) {
+      this.pathwayClones_ = new Map(array.map(clone => [clone.ID, clone]));
+    }
+  }
+  get version() {
+    return this.version_;
+  }
+  get ttl() {
+    return this.ttl_;
+  }
+  get reloadUri() {
+    return this.reloadUri_;
+  }
+  get priority() {
+    return this.priority_;
+  }
+  get pathwayClones() {
+    return this.pathwayClones_;
+  }
+}
+/**
+ * This class represents a content steering manifest and associated state. See both HLS and DASH specifications.
+ * HLS: https://developer.apple.com/streaming/HLSContentSteeringSpecification.pdf and
+ * https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/ section 4.4.6.6.
+ * DASH: https://dashif.org/docs/DASH-IF-CTS-00XX-Content-Steering-Community-Review.pdf
+ *
+ * @param {function} xhr for making a network request from the browser.
+ * @param {function} bandwidth for fetching the current bandwidth from the main segment loader.
+ */
+
+class ContentSteeringController extends videojs.EventTarget {
+  constructor(xhr, bandwidth) {
+    super();
+    this.currentPathway = null;
+    this.defaultPathway = null;
+    this.queryBeforeStart = false;
+    this.availablePathways_ = new Set();
+    this.steeringManifest = new SteeringManifest();
+    this.proxyServerUrl_ = null;
+    this.manifestType_ = null;
+    this.ttlTimeout_ = null;
+    this.request_ = null;
+    this.currentPathwayClones = new Map();
+    this.nextPathwayClones = new Map();
+    this.excludedSteeringManifestURLs = new Set();
+    this.logger_ = logger('Content Steering');
+    this.xhr_ = xhr;
+    this.getBandwidth_ = bandwidth;
+  }
+  /**
+   * Assigns the content steering tag properties to the steering controller
+   *
+   * @param {string} baseUrl the baseURL from the main manifest for resolving the steering manifest url
+   * @param {Object} steeringTag the content steering tag from the main manifest
+   */
+
+  assignTagProperties(baseUrl, steeringTag) {
+    this.manifestType_ = steeringTag.serverUri ? 'HLS' : 'DASH'; // serverUri is HLS serverURL is DASH
+
+    const steeringUri = steeringTag.serverUri || steeringTag.serverURL;
+    if (!steeringUri) {
+      this.logger_(`steering manifest URL is ${steeringUri}, cannot request steering manifest.`);
+      this.trigger('error');
+      return;
+    } // Content steering manifests can be encoded as a data URI. We can decode, parse and return early if that's the case.
+
+    if (steeringUri.startsWith('data:')) {
+      this.decodeDataUriManifest_(steeringUri.substring(steeringUri.indexOf(',') + 1));
+      return;
+    } // reloadUri is the resolution of the main manifest URL and steering URL.
+
+    this.steeringManifest.reloadUri = resolveUrl(baseUrl, steeringUri); // pathwayId is HLS defaultServiceLocation is DASH
+
+    this.defaultPathway = steeringTag.pathwayId || steeringTag.defaultServiceLocation; // currently only DASH supports the following properties on <ContentSteering> tags.
+
+    this.queryBeforeStart = steeringTag.queryBeforeStart;
+    this.proxyServerUrl_ = steeringTag.proxyServerURL; // trigger a steering event if we have a pathway from the content steering tag.
+    // this tells VHS which segment pathway to start with.
+    // If queryBeforeStart is true we need to wait for the steering manifest response.
+
+    if (this.defaultPathway && !this.queryBeforeStart) {
+      this.trigger('content-steering');
+    }
+  }
+  /**
+   * Requests the content steering manifest and parse the response. This should only be called after
+   * assignTagProperties was called with a content steering tag.
+   *
+   * @param {string} initialUri The optional uri to make the request with.
+   *    If set, the request should be made with exactly what is passed in this variable.
+   *    This scenario should only happen once on initalization.
+   */
+
+  requestSteeringManifest(initial) {
+    const reloadUri = this.steeringManifest.reloadUri;
+    if (!reloadUri) {
+      return;
+    } // We currently don't support passing MPD query parameters directly to the content steering URL as this requires
+    // ExtUrlQueryInfo tag support. See the DASH content steering spec section 8.1.
+    // This request URI accounts for manifest URIs that have been excluded.
+
+    const uri = initial ? reloadUri : this.getRequestURI(reloadUri); // If there are no valid manifest URIs, we should stop content steering.
+
+    if (!uri) {
+      this.logger_('No valid content steering manifest URIs. Stopping content steering.');
+      this.trigger('error');
+      this.dispose();
+      return;
+    }
+    this.request_ = this.xhr_({
+      uri,
+      requestType: 'content-steering-manifest'
+    }, (error, errorInfo) => {
+      if (error) {
+        // If the client receives HTTP 410 Gone in response to a manifest request,
+        // it MUST NOT issue another request for that URI for the remainder of the
+        // playback session. It MAY continue to use the most-recently obtained set
+        // of Pathways.
+        if (errorInfo.status === 410) {
+          this.logger_(`manifest request 410 ${error}.`);
+          this.logger_(`There will be no more content steering requests to ${uri} this session.`);
+          this.excludedSteeringManifestURLs.add(uri);
+          return;
+        } // If the client receives HTTP 429 Too Many Requests with a Retry-After
+        // header in response to a manifest request, it SHOULD wait until the time
+        // specified by the Retry-After header to reissue the request.
+
+        if (errorInfo.status === 429) {
+          const retrySeconds = errorInfo.responseHeaders['retry-after'];
+          this.logger_(`manifest request 429 ${error}.`);
+          this.logger_(`content steering will retry in ${retrySeconds} seconds.`);
+          this.startTTLTimeout_(parseInt(retrySeconds, 10));
+          return;
+        } // If the Steering Manifest cannot be loaded and parsed correctly, the
+        // client SHOULD continue to use the previous values and attempt to reload
+        // it after waiting for the previously-specified TTL (or 5 minutes if
+        // none).
+
+        this.logger_(`manifest failed to load ${error}.`);
+        this.startTTLTimeout_();
+        return;
+      }
+      const steeringManifestJson = JSON.parse(this.request_.responseText);
+      this.assignSteeringProperties_(steeringManifestJson);
+      this.startTTLTimeout_();
+    });
+  }
+  /**
+   * Set the proxy server URL and add the steering manifest url as a URI encoded parameter.
+   *
+   * @param {string} steeringUrl the steering manifest url
+   * @return the steering manifest url to a proxy server with all parameters set
+   */
+
+  setProxyServerUrl_(steeringUrl) {
+    const steeringUrlObject = new window$1.URL(steeringUrl);
+    const proxyServerUrlObject = new window$1.URL(this.proxyServerUrl_);
+    proxyServerUrlObject.searchParams.set('url', encodeURI(steeringUrlObject.toString()));
+    return this.setSteeringParams_(proxyServerUrlObject.toString());
+  }
+  /**
+   * Decodes and parses the data uri encoded steering manifest
+   *
+   * @param {string} dataUri the data uri to be decoded and parsed.
+   */
+
+  decodeDataUriManifest_(dataUri) {
+    const steeringManifestJson = JSON.parse(window$1.atob(dataUri));
+    this.assignSteeringProperties_(steeringManifestJson);
+  }
+  /**
+   * Set the HLS or DASH content steering manifest request query parameters. For example:
+   * _HLS_pathway="<CURRENT-PATHWAY-ID>" and _HLS_throughput=<THROUGHPUT>
+   * _DASH_pathway and _DASH_throughput
+   *
+   * @param {string} uri to add content steering server parameters to.
+   * @return a new uri as a string with the added steering query parameters.
+   */
+
+  setSteeringParams_(url) {
+    const urlObject = new window$1.URL(url);
+    const path = this.getPathway();
+    const networkThroughput = this.getBandwidth_();
+    if (path) {
+      const pathwayKey = `_${this.manifestType_}_pathway`;
+      urlObject.searchParams.set(pathwayKey, path);
+    }
+    if (networkThroughput) {
+      const throughputKey = `_${this.manifestType_}_throughput`;
+      urlObject.searchParams.set(throughputKey, networkThroughput);
+    }
+    return urlObject.toString();
+  }
+  /**
+   * Assigns the current steering manifest properties and to the SteeringManifest object
+   *
+   * @param {Object} steeringJson the raw JSON steering manifest
+   */
+
+  assignSteeringProperties_(steeringJson) {
+    this.steeringManifest.version = steeringJson.VERSION;
+    if (!this.steeringManifest.version) {
+      this.logger_(`manifest version is ${steeringJson.VERSION}, which is not supported.`);
+      this.trigger('error');
+      return;
+    }
+    this.steeringManifest.ttl = steeringJson.TTL;
+    this.steeringManifest.reloadUri = steeringJson['RELOAD-URI']; // HLS = PATHWAY-PRIORITY required. DASH = SERVICE-LOCATION-PRIORITY optional
+
+    this.steeringManifest.priority = steeringJson['PATHWAY-PRIORITY'] || steeringJson['SERVICE-LOCATION-PRIORITY']; // Pathway clones to be created/updated in HLS.
+    // See section 7.2 https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/
+
+    this.steeringManifest.pathwayClones = steeringJson['PATHWAY-CLONES'];
+    this.nextPathwayClones = this.steeringManifest.pathwayClones; // 1. apply first pathway from the array.
+    // 2. if first pathway doesn't exist in manifest, try next pathway.
+    //    a. if all pathways are exhausted, ignore the steering manifest priority.
+    // 3. if segments fail from an established pathway, try all variants/renditions, then exclude the failed pathway.
+    //    a. exclude a pathway for a minimum of the last TTL duration. Meaning, from the next steering response,
+    //       the excluded pathway will be ignored.
+    //       See excludePathway usage in excludePlaylist().
+    // If there are no available pathways, we need to stop content steering.
+
+    if (!this.availablePathways_.size) {
+      this.logger_('There are no available pathways for content steering. Ending content steering.');
+      this.trigger('error');
+      this.dispose();
+    }
+    const chooseNextPathway = pathwaysByPriority => {
+      for (const path of pathwaysByPriority) {
+        if (this.availablePathways_.has(path)) {
+          return path;
+        }
+      } // If no pathway matches, ignore the manifest and choose the first available.
+
+      return [...this.availablePathways_][0];
+    };
+    const nextPathway = chooseNextPathway(this.steeringManifest.priority);
+    if (this.currentPathway !== nextPathway) {
+      this.currentPathway = nextPathway;
+      this.trigger('content-steering');
+    }
+  }
+  /**
+   * Returns the pathway to use for steering decisions
+   *
+   * @return {string} returns the current pathway or the default
+   */
+
+  getPathway() {
+    return this.currentPathway || this.defaultPathway;
+  }
+  /**
+   * Chooses the manifest request URI based on proxy URIs and server URLs.
+   * Also accounts for exclusion on certain manifest URIs.
+   *
+   * @param {string} reloadUri the base uri before parameters
+   *
+   * @return {string} the final URI for the request to the manifest server.
+   */
+
+  getRequestURI(reloadUri) {
+    if (!reloadUri) {
+      return null;
+    }
+    const isExcluded = uri => this.excludedSteeringManifestURLs.has(uri);
+    if (this.proxyServerUrl_) {
+      const proxyURI = this.setProxyServerUrl_(reloadUri);
+      if (!isExcluded(proxyURI)) {
+        return proxyURI;
+      }
+    }
+    const steeringURI = this.setSteeringParams_(reloadUri);
+    if (!isExcluded(steeringURI)) {
+      return steeringURI;
+    } // Return nothing if all valid manifest URIs are excluded.
+
+    return null;
+  }
+  /**
+   * Start the timeout for re-requesting the steering manifest at the TTL interval.
+   *
+   * @param {number} ttl time in seconds of the timeout. Defaults to the
+   *        ttl interval in the steering manifest
+   */
+
+  startTTLTimeout_(ttl = this.steeringManifest.ttl) {
+    // 300 (5 minutes) is the default value.
+    const ttlMS = ttl * 1000;
+    this.ttlTimeout_ = window$1.setTimeout(() => {
+      this.requestSteeringManifest();
+    }, ttlMS);
+  }
+  /**
+   * Clear the TTL timeout if necessary.
+   */
+
+  clearTTLTimeout_() {
+    window$1.clearTimeout(this.ttlTimeout_);
+    this.ttlTimeout_ = null;
+  }
+  /**
+   * aborts any current steering xhr and sets the current request object to null
+   */
+
+  abort() {
+    if (this.request_) {
+      this.request_.abort();
+    }
+    this.request_ = null;
+  }
+  /**
+   * aborts steering requests clears the ttl timeout and resets all properties.
+   */
+
+  dispose() {
+    this.off('content-steering');
+    this.off('error');
+    this.abort();
+    this.clearTTLTimeout_();
+    this.currentPathway = null;
+    this.defaultPathway = null;
+    this.queryBeforeStart = null;
+    this.proxyServerUrl_ = null;
+    this.manifestType_ = null;
+    this.ttlTimeout_ = null;
+    this.request_ = null;
+    this.excludedSteeringManifestURLs = new Set();
+    this.availablePathways_ = new Set();
+    this.steeringManifest = new SteeringManifest();
+  }
+  /**
+   * adds a pathway to the available pathways set
+   *
+   * @param {string} pathway the pathway string to add
+   */
+
+  addAvailablePathway(pathway) {
+    if (pathway) {
+      this.availablePathways_.add(pathway);
+    }
+  }
+  /**
+   * Clears all pathways from the available pathways set
+   */
+
+  clearAvailablePathways() {
+    this.availablePathways_.clear();
+  }
+  /**
+   * Removes a pathway from the available pathways set.
+   */
+
+  excludePathway(pathway) {
+    return this.availablePathways_.delete(pathway);
+  }
+  /**
+   * Checks the refreshed DASH manifest content steering tag for changes.
+   *
+   * @param {string} baseURL new steering tag on DASH manifest refresh
+   * @param {Object} newTag the new tag to check for changes
+   * @return a true or false whether the new tag has different values
+   */
+
+  didDASHTagChange(baseURL, newTag) {
+    return !newTag && this.steeringManifest.reloadUri || newTag && (resolveUrl(baseURL, newTag.serverURL) !== this.steeringManifest.reloadUri || newTag.defaultServiceLocation !== this.defaultPathway || newTag.queryBeforeStart !== this.queryBeforeStart || newTag.proxyServerURL !== this.proxyServerUrl_);
+  }
+  getAvailablePathways() {
+    return this.availablePathways_;
+  }
+}
+
+/**
+ * @file playlist-controller.js
+ */
+const ABORT_EARLY_EXCLUSION_SECONDS = 10;
+let Vhs$1; // SegmentLoader stats that need to have each loader's
+// values summed to calculate the final value
+
+const loaderStats = ['mediaRequests', 'mediaRequestsAborted', 'mediaRequestsTimedout', 'mediaRequestsErrored', 'mediaTransferDuration', 'mediaBytesTransferred', 'mediaAppends'];
+const sumLoaderStat = function (stat) {
+  return this.audioSegmentLoader_[stat] + this.mainSegmentLoader_[stat];
+};
+const shouldSwitchToMedia = function ({
+  currentPlaylist,
+  buffered,
+  currentTime,
+  nextPlaylist,
+  bufferLowWaterLine,
+  bufferHighWaterLine,
+  duration,
+  bufferBasedABR,
+  log
+}) {
+  // we have no other playlist to switch to
+  if (!nextPlaylist) {
+    videojs.log.warn('We received no playlist to switch to. Please check your stream.');
+    return false;
+  }
+  const sharedLogLine = `allowing switch ${currentPlaylist && currentPlaylist.id || 'null'} -> ${nextPlaylist.id}`;
+  if (!currentPlaylist) {
+    log(`${sharedLogLine} as current playlist is not set`);
+    return true;
+  } // no need to switch if playlist is the same
+
+  if (nextPlaylist.id === currentPlaylist.id) {
+    return false;
+  } // determine if current time is in a buffered range.
+
+  const isBuffered = Boolean(findRange(buffered, currentTime).length); // If the playlist is live, then we want to not take low water line into account.
+  // This is because in LIVE, the player plays 3 segments from the end of the
+  // playlist, and if `BUFFER_LOW_WATER_LINE` is greater than the duration availble
+  // in those segments, a viewer will never experience a rendition upswitch.
+
+  if (!currentPlaylist.endList) {
+    // For LLHLS live streams, don't switch renditions before playback has started, as it almost
+    // doubles the time to first playback.
+    if (!isBuffered && typeof currentPlaylist.partTargetDuration === 'number') {
+      log(`not ${sharedLogLine} as current playlist is live llhls, but currentTime isn't in buffered.`);
+      return false;
+    }
+    log(`${sharedLogLine} as current playlist is live`);
+    return true;
+  }
+  const forwardBuffer = timeAheadOf(buffered, currentTime);
+  const maxBufferLowWaterLine = bufferBasedABR ? Config.EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE : Config.MAX_BUFFER_LOW_WATER_LINE; // For the same reason as LIVE, we ignore the low water line when the VOD
+  // duration is below the max potential low water line
+
+  if (duration < maxBufferLowWaterLine) {
+    log(`${sharedLogLine} as duration < max low water line (${duration} < ${maxBufferLowWaterLine})`);
+    return true;
+  }
+  const nextBandwidth = nextPlaylist.attributes.BANDWIDTH;
+  const currBandwidth = currentPlaylist.attributes.BANDWIDTH; // when switching down, if our buffer is lower than the high water line,
+  // we can switch down
+
+  if (nextBandwidth < currBandwidth && (!bufferBasedABR || forwardBuffer < bufferHighWaterLine)) {
+    let logLine = `${sharedLogLine} as next bandwidth < current bandwidth (${nextBandwidth} < ${currBandwidth})`;
+    if (bufferBasedABR) {
+      logLine += ` and forwardBuffer < bufferHighWaterLine (${forwardBuffer} < ${bufferHighWaterLine})`;
+    }
+    log(logLine);
+    return true;
+  } // and if our buffer is higher than the low water line,
+  // we can switch up
+
+  if ((!bufferBasedABR || nextBandwidth > currBandwidth) && forwardBuffer >= bufferLowWaterLine) {
+    let logLine = `${sharedLogLine} as forwardBuffer >= bufferLowWaterLine (${forwardBuffer} >= ${bufferLowWaterLine})`;
+    if (bufferBasedABR) {
+      logLine += ` and next bandwidth > current bandwidth (${nextBandwidth} > ${currBandwidth})`;
+    }
+    log(logLine);
+    return true;
+  }
+  log(`not ${sharedLogLine} as no switching criteria met`);
+  return false;
+};
+/**
+ * the main playlist controller controller all interactons
+ * between playlists and segmentloaders. At this time this mainly
+ * involves a main playlist and a series of audio playlists
+ * if they are available
+ *
+ * @class PlaylistController
+ * @extends videojs.EventTarget
+ */
+
+class PlaylistController extends videojs.EventTarget {
+  constructor(options) {
+    super();
+    const {
+      src,
+      withCredentials,
+      tech,
+      bandwidth,
+      externVhs,
+      useCueTags,
+      playlistExclusionDuration,
+      enableLowInitialPlaylist,
+      sourceType,
+      cacheEncryptionKeys,
+      bufferBasedABR,
+      leastPixelDiffSelector,
+      captionServices
+    } = options;
+    if (!src) {
+      throw new Error('A non-empty playlist URL or JSON manifest string is required');
+    }
+    let {
+      maxPlaylistRetries
+    } = options;
+    if (maxPlaylistRetries === null || typeof maxPlaylistRetries === 'undefined') {
+      maxPlaylistRetries = Infinity;
+    }
+    Vhs$1 = externVhs;
+    this.bufferBasedABR = Boolean(bufferBasedABR);
+    this.leastPixelDiffSelector = Boolean(leastPixelDiffSelector);
+    this.withCredentials = withCredentials;
+    this.tech_ = tech;
+    this.vhs_ = tech.vhs;
+    this.sourceType_ = sourceType;
+    this.useCueTags_ = useCueTags;
+    this.playlistExclusionDuration = playlistExclusionDuration;
+    this.maxPlaylistRetries = maxPlaylistRetries;
+    this.enableLowInitialPlaylist = enableLowInitialPlaylist;
+    if (this.useCueTags_) {
+      this.cueTagsTrack_ = this.tech_.addTextTrack('metadata', 'ad-cues');
+      this.cueTagsTrack_.inBandMetadataTrackDispatchType = '';
+    }
+    this.requestOptions_ = {
+      withCredentials,
+      maxPlaylistRetries,
+      timeout: null
+    };
+    this.on('error', this.pauseLoading);
+    this.mediaTypes_ = createMediaTypes();
+    this.mediaSource = new window$1.MediaSource();
+    this.handleDurationChange_ = this.handleDurationChange_.bind(this);
+    this.handleSourceOpen_ = this.handleSourceOpen_.bind(this);
+    this.handleSourceEnded_ = this.handleSourceEnded_.bind(this);
+    this.mediaSource.addEventListener('durationchange', this.handleDurationChange_); // load the media source into the player
+
+    this.mediaSource.addEventListener('sourceopen', this.handleSourceOpen_);
+    this.mediaSource.addEventListener('sourceended', this.handleSourceEnded_); // we don't have to handle sourceclose since dispose will handle termination of
+    // everything, and the MediaSource should not be detached without a proper disposal
+
+    this.seekable_ = createTimeRanges();
+    this.hasPlayed_ = false;
+    this.syncController_ = new SyncController(options);
+    this.segmentMetadataTrack_ = tech.addRemoteTextTrack({
+      kind: 'metadata',
+      label: 'segment-metadata'
+    }, false).track;
+    this.decrypter_ = new Decrypter();
+    this.sourceUpdater_ = new SourceUpdater(this.mediaSource);
+    this.inbandTextTracks_ = {};
+    this.timelineChangeController_ = new TimelineChangeController();
+    this.keyStatusMap_ = new Map();
+    const segmentLoaderSettings = {
+      vhs: this.vhs_,
+      parse708captions: options.parse708captions,
+      useDtsForTimestampOffset: options.useDtsForTimestampOffset,
+      captionServices,
+      mediaSource: this.mediaSource,
+      currentTime: this.tech_.currentTime.bind(this.tech_),
+      seekable: () => this.seekable(),
+      seeking: () => this.tech_.seeking(),
+      duration: () => this.duration(),
+      hasPlayed: () => this.hasPlayed_,
+      goalBufferLength: () => this.goalBufferLength(),
+      bandwidth,
+      syncController: this.syncController_,
+      decrypter: this.decrypter_,
+      sourceType: this.sourceType_,
+      inbandTextTracks: this.inbandTextTracks_,
+      cacheEncryptionKeys,
+      sourceUpdater: this.sourceUpdater_,
+      timelineChangeController: this.timelineChangeController_,
+      exactManifestTimings: options.exactManifestTimings,
+      addMetadataToTextTrack: this.addMetadataToTextTrack.bind(this)
+    }; // The source type check not only determines whether a special DASH playlist loader
+    // should be used, but also covers the case where the provided src is a vhs-json
+    // manifest object (instead of a URL). In the case of vhs-json, the default
+    // PlaylistLoader should be used.
+
+    this.mainPlaylistLoader_ = this.sourceType_ === 'dash' ? new DashPlaylistLoader(src, this.vhs_, merge(this.requestOptions_, {
+      addMetadataToTextTrack: this.addMetadataToTextTrack.bind(this)
+    })) : new PlaylistLoader(src, this.vhs_, merge(this.requestOptions_, {
+      addDateRangesToTextTrack: this.addDateRangesToTextTrack_.bind(this)
+    }));
+    this.setupMainPlaylistLoaderListeners_(); // setup segment loaders
+    // combined audio/video or just video when alternate audio track is selected
+
+    this.mainSegmentLoader_ = new SegmentLoader(merge(segmentLoaderSettings, {
+      segmentMetadataTrack: this.segmentMetadataTrack_,
+      loaderType: 'main'
+    }), options); // alternate audio track
+
+    this.audioSegmentLoader_ = new SegmentLoader(merge(segmentLoaderSettings, {
+      loaderType: 'audio'
+    }), options);
+    this.subtitleSegmentLoader_ = new VTTSegmentLoader(merge(segmentLoaderSettings, {
+      loaderType: 'vtt',
+      featuresNativeTextTracks: this.tech_.featuresNativeTextTracks,
+      loadVttJs: () => new Promise((resolve, reject) => {
+        function onLoad() {
+          tech.off('vttjserror', onError);
+          resolve();
+        }
+        function onError() {
+          tech.off('vttjsloaded', onLoad);
+          reject();
+        }
+        tech.one('vttjsloaded', onLoad);
+        tech.one('vttjserror', onError); // safe to call multiple times, script will be loaded only once:
+
+        tech.addWebVttScript_();
+      })
+    }), options);
+    const getBandwidth = () => {
+      return this.mainSegmentLoader_.bandwidth;
+    };
+    this.contentSteeringController_ = new ContentSteeringController(this.vhs_.xhr, getBandwidth);
+    this.setupSegmentLoaderListeners_();
+    if (this.bufferBasedABR) {
+      this.mainPlaylistLoader_.one('loadedplaylist', () => this.startABRTimer_());
+      this.tech_.on('pause', () => this.stopABRTimer_());
+      this.tech_.on('play', () => this.startABRTimer_());
+    } // Create SegmentLoader stat-getters
+    // mediaRequests_
+    // mediaRequestsAborted_
+    // mediaRequestsTimedout_
+    // mediaRequestsErrored_
+    // mediaTransferDuration_
+    // mediaBytesTransferred_
+    // mediaAppends_
+
+    loaderStats.forEach(stat => {
+      this[stat + '_'] = sumLoaderStat.bind(this, stat);
+    });
+    this.logger_ = logger('pc');
+    this.triggeredFmp4Usage = false;
+    if (this.tech_.preload() === 'none') {
+      this.loadOnPlay_ = () => {
+        this.loadOnPlay_ = null;
+        this.mainPlaylistLoader_.load();
+      };
+      this.tech_.one('play', this.loadOnPlay_);
+    } else {
+      this.mainPlaylistLoader_.load();
+    }
+    this.timeToLoadedData__ = -1;
+    this.mainAppendsToLoadedData__ = -1;
+    this.audioAppendsToLoadedData__ = -1;
+    const event = this.tech_.preload() === 'none' ? 'play' : 'loadstart'; // start the first frame timer on loadstart or play (for preload none)
+
+    this.tech_.one(event, () => {
+      const timeToLoadedDataStart = Date.now();
+      this.tech_.one('loadeddata', () => {
+        this.timeToLoadedData__ = Date.now() - timeToLoadedDataStart;
+        this.mainAppendsToLoadedData__ = this.mainSegmentLoader_.mediaAppends;
+        this.audioAppendsToLoadedData__ = this.audioSegmentLoader_.mediaAppends;
+      });
+    });
+  }
+  mainAppendsToLoadedData_() {
+    return this.mainAppendsToLoadedData__;
+  }
+  audioAppendsToLoadedData_() {
+    return this.audioAppendsToLoadedData__;
+  }
+  appendsToLoadedData_() {
+    const main = this.mainAppendsToLoadedData_();
+    const audio = this.audioAppendsToLoadedData_();
+    if (main === -1 || audio === -1) {
+      return -1;
+    }
+    return main + audio;
+  }
+  timeToLoadedData_() {
+    return this.timeToLoadedData__;
+  }
+  /**
+   * Run selectPlaylist and switch to the new playlist if we should
+   *
+   * @param {string} [reason=abr] a reason for why the ABR check is made
+   * @private
+   */
+
+  checkABR_(reason = 'abr') {
+    const nextPlaylist = this.selectPlaylist();
+    if (nextPlaylist && this.shouldSwitchToMedia_(nextPlaylist)) {
+      this.switchMedia_(nextPlaylist, reason);
+    }
+  }
+  switchMedia_(playlist, cause, delay) {
+    const oldMedia = this.media();
+    const oldId = oldMedia && (oldMedia.id || oldMedia.uri);
+    const newId = playlist && (playlist.id || playlist.uri);
+    if (oldId && oldId !== newId) {
+      this.logger_(`switch media ${oldId} -> ${newId} from ${cause}`);
+      this.tech_.trigger({
+        type: 'usage',
+        name: `vhs-rendition-change-${cause}`
+      });
+    }
+    this.mainPlaylistLoader_.media(playlist, delay);
+  }
+  /**
+   * A function that ensures we switch our playlists inside of `mediaTypes`
+   * to match the current `serviceLocation` provided by the contentSteering controller.
+   * We want to check media types of `AUDIO`, `SUBTITLES`, and `CLOSED-CAPTIONS`.
+   *
+   * This should only be called on a DASH playback scenario while using content steering.
+   * This is necessary due to differences in how media in HLS manifests are generally tied to
+   * a video playlist, where in DASH that is not always the case.
+   */
+
+  switchMediaForDASHContentSteering_() {
+    ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+      const mediaType = this.mediaTypes_[type];
+      const activeGroup = mediaType ? mediaType.activeGroup() : null;
+      const pathway = this.contentSteeringController_.getPathway();
+      if (activeGroup && pathway) {
+        // activeGroup can be an array or a single group
+        const mediaPlaylists = activeGroup.length ? activeGroup[0].playlists : activeGroup.playlists;
+        const dashMediaPlaylists = mediaPlaylists.filter(p => p.attributes.serviceLocation === pathway); // Switch the current active playlist to the correct CDN
+
+        if (dashMediaPlaylists.length) {
+          this.mediaTypes_[type].activePlaylistLoader.media(dashMediaPlaylists[0]);
+        }
+      }
+    });
+  }
+  /**
+   * Start a timer that periodically calls checkABR_
+   *
+   * @private
+   */
+
+  startABRTimer_() {
+    this.stopABRTimer_();
+    this.abrTimer_ = window$1.setInterval(() => this.checkABR_(), 250);
+  }
+  /**
+   * Stop the timer that periodically calls checkABR_
+   *
+   * @private
+   */
+
+  stopABRTimer_() {
+    // if we're scrubbing, we don't need to pause.
+    // This getter will be added to Video.js in version 7.11.
+    if (this.tech_.scrubbing && this.tech_.scrubbing()) {
+      return;
+    }
+    window$1.clearInterval(this.abrTimer_);
+    this.abrTimer_ = null;
+  }
+  /**
+   * Get a list of playlists for the currently selected audio playlist
+   *
+   * @return {Array} the array of audio playlists
+   */
+
+  getAudioTrackPlaylists_() {
+    const main = this.main();
+    const defaultPlaylists = main && main.playlists || []; // if we don't have any audio groups then we can only
+    // assume that the audio tracks are contained in main
+    // playlist array, use that or an empty array.
+
+    if (!main || !main.mediaGroups || !main.mediaGroups.AUDIO) {
+      return defaultPlaylists;
+    }
+    const AUDIO = main.mediaGroups.AUDIO;
+    const groupKeys = Object.keys(AUDIO);
+    let track; // get the current active track
+
+    if (Object.keys(this.mediaTypes_.AUDIO.groups).length) {
+      track = this.mediaTypes_.AUDIO.activeTrack(); // or get the default track from main if mediaTypes_ isn't setup yet
+    } else {
+      // default group is `main` or just the first group.
+      const defaultGroup = AUDIO.main || groupKeys.length && AUDIO[groupKeys[0]];
+      for (const label in defaultGroup) {
+        if (defaultGroup[label].default) {
+          track = {
+            label
+          };
+          break;
+        }
+      }
+    } // no active track no playlists.
+
+    if (!track) {
+      return defaultPlaylists;
+    }
+    const playlists = []; // get all of the playlists that are possible for the
+    // active track.
+
+    for (const group in AUDIO) {
+      if (AUDIO[group][track.label]) {
+        const properties = AUDIO[group][track.label];
+        if (properties.playlists && properties.playlists.length) {
+          playlists.push.apply(playlists, properties.playlists);
+        } else if (properties.uri) {
+          playlists.push(properties);
+        } else if (main.playlists.length) {
+          // if an audio group does not have a uri
+          // see if we have main playlists that use it as a group.
+          // if we do then add those to the playlists list.
+          for (let i = 0; i < main.playlists.length; i++) {
+            const playlist = main.playlists[i];
+            if (playlist.attributes && playlist.attributes.AUDIO && playlist.attributes.AUDIO === group) {
+              playlists.push(playlist);
+            }
+          }
+        }
+      }
+    }
+    if (!playlists.length) {
+      return defaultPlaylists;
+    }
+    return playlists;
+  }
+  /**
+   * Register event handlers on the main playlist loader. A helper
+   * function for construction time.
+   *
+   * @private
+   */
+
+  setupMainPlaylistLoaderListeners_() {
+    this.mainPlaylistLoader_.on('loadedmetadata', () => {
+      const media = this.mainPlaylistLoader_.media();
+      const requestTimeout = media.targetDuration * 1.5 * 1000; // If we don't have any more available playlists, we don't want to
+      // timeout the request.
+
+      if (isLowestEnabledRendition(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.media())) {
+        this.requestOptions_.timeout = 0;
+      } else {
+        this.requestOptions_.timeout = requestTimeout;
+      } // if this isn't a live video and preload permits, start
+      // downloading segments
+
+      if (media.endList && this.tech_.preload() !== 'none') {
+        this.mainSegmentLoader_.playlist(media, this.requestOptions_);
+        this.mainSegmentLoader_.load();
+      }
+      setupMediaGroups({
+        sourceType: this.sourceType_,
+        segmentLoaders: {
+          AUDIO: this.audioSegmentLoader_,
+          SUBTITLES: this.subtitleSegmentLoader_,
+          main: this.mainSegmentLoader_
+        },
+        tech: this.tech_,
+        requestOptions: this.requestOptions_,
+        mainPlaylistLoader: this.mainPlaylistLoader_,
+        vhs: this.vhs_,
+        main: this.main(),
+        mediaTypes: this.mediaTypes_,
+        excludePlaylist: this.excludePlaylist.bind(this)
+      });
+      this.triggerPresenceUsage_(this.main(), media);
+      this.setupFirstPlay();
+      if (!this.mediaTypes_.AUDIO.activePlaylistLoader || this.mediaTypes_.AUDIO.activePlaylistLoader.media()) {
+        this.trigger('selectedinitialmedia');
+      } else {
+        // We must wait for the active audio playlist loader to
+        // finish setting up before triggering this event so the
+        // representations API and EME setup is correct
+        this.mediaTypes_.AUDIO.activePlaylistLoader.one('loadedmetadata', () => {
+          this.trigger('selectedinitialmedia');
+        });
+      }
+    });
+    this.mainPlaylistLoader_.on('loadedplaylist', () => {
+      if (this.loadOnPlay_) {
+        this.tech_.off('play', this.loadOnPlay_);
+      }
+      let updatedPlaylist = this.mainPlaylistLoader_.media();
+      if (!updatedPlaylist) {
+        // Add content steering listeners on first load and init.
+        this.attachContentSteeringListeners_();
+        this.initContentSteeringController_(); // exclude any variants that are not supported by the browser before selecting
+        // an initial media as the playlist selectors do not consider browser support
+
+        this.excludeUnsupportedVariants_();
+        let selectedMedia;
+        if (this.enableLowInitialPlaylist) {
+          selectedMedia = this.selectInitialPlaylist();
+        }
+        if (!selectedMedia) {
+          selectedMedia = this.selectPlaylist();
+        }
+        if (!selectedMedia || !this.shouldSwitchToMedia_(selectedMedia)) {
+          return;
+        }
+        this.initialMedia_ = selectedMedia;
+        this.switchMedia_(this.initialMedia_, 'initial'); // Under the standard case where a source URL is provided, loadedplaylist will
+        // fire again since the playlist will be requested. In the case of vhs-json
+        // (where the manifest object is provided as the source), when the media
+        // playlist's `segments` list is already available, a media playlist won't be
+        // requested, and loadedplaylist won't fire again, so the playlist handler must be
+        // called on its own here.
+
+        const haveJsonSource = this.sourceType_ === 'vhs-json' && this.initialMedia_.segments;
+        if (!haveJsonSource) {
+          return;
+        }
+        updatedPlaylist = this.initialMedia_;
+      }
+      this.handleUpdatedMediaPlaylist(updatedPlaylist);
+    });
+    this.mainPlaylistLoader_.on('error', () => {
+      const error = this.mainPlaylistLoader_.error;
+      this.excludePlaylist({
+        playlistToExclude: error.playlist,
+        error
+      });
+    });
+    this.mainPlaylistLoader_.on('mediachanging', () => {
+      this.mainSegmentLoader_.abort();
+      this.mainSegmentLoader_.pause();
+    });
+    this.mainPlaylistLoader_.on('mediachange', () => {
+      const media = this.mainPlaylistLoader_.media();
+      const requestTimeout = media.targetDuration * 1.5 * 1000; // If we don't have any more available playlists, we don't want to
+      // timeout the request.
+
+      if (isLowestEnabledRendition(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.media())) {
+        this.requestOptions_.timeout = 0;
+      } else {
+        this.requestOptions_.timeout = requestTimeout;
+      }
+      if (this.sourceType_ === 'dash') {
+        // we don't want to re-request the same hls playlist right after it was changed
+        this.mainPlaylistLoader_.load();
+      } // TODO: Create a new event on the PlaylistLoader that signals
+      // that the segments have changed in some way and use that to
+      // update the SegmentLoader instead of doing it twice here and
+      // on `loadedplaylist`
+
+      this.mainSegmentLoader_.pause();
+      this.mainSegmentLoader_.playlist(media, this.requestOptions_);
+      if (this.waitingForFastQualityPlaylistReceived_) {
+        this.runFastQualitySwitch_();
+      } else {
+        this.mainSegmentLoader_.load();
+      }
+      this.tech_.trigger({
+        type: 'mediachange',
+        bubbles: true
+      });
+    });
+    this.mainPlaylistLoader_.on('playlistunchanged', () => {
+      const updatedPlaylist = this.mainPlaylistLoader_.media(); // ignore unchanged playlists that have already been
+      // excluded for not-changing. We likely just have a really slowly updating
+      // playlist.
+
+      if (updatedPlaylist.lastExcludeReason_ === 'playlist-unchanged') {
+        return;
+      }
+      const playlistOutdated = this.stuckAtPlaylistEnd_(updatedPlaylist);
+      if (playlistOutdated) {
+        // Playlist has stopped updating and we're stuck at its end. Try to
+        // exclude it and switch to another playlist in the hope that that
+        // one is updating (and give the player a chance to re-adjust to the
+        // safe live point).
+        this.excludePlaylist({
+          error: {
+            message: 'Playlist no longer updating.',
+            reason: 'playlist-unchanged'
+          }
+        }); // useful for monitoring QoS
+
+        this.tech_.trigger('playliststuck');
+      }
+    });
+    this.mainPlaylistLoader_.on('renditiondisabled', () => {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-rendition-disabled'
+      });
+    });
+    this.mainPlaylistLoader_.on('renditionenabled', () => {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-rendition-enabled'
+      });
+    });
+  }
+  /**
+   * Given an updated media playlist (whether it was loaded for the first time, or
+   * refreshed for live playlists), update any relevant properties and state to reflect
+   * changes in the media that should be accounted for (e.g., cues and duration).
+   *
+   * @param {Object} updatedPlaylist the updated media playlist object
+   *
+   * @private
+   */
+
+  handleUpdatedMediaPlaylist(updatedPlaylist) {
+    if (this.useCueTags_) {
+      this.updateAdCues_(updatedPlaylist);
+    } // TODO: Create a new event on the PlaylistLoader that signals
+    // that the segments have changed in some way and use that to
+    // update the SegmentLoader instead of doing it twice here and
+    // on `mediachange`
+
+    this.mainSegmentLoader_.pause();
+    this.mainSegmentLoader_.playlist(updatedPlaylist, this.requestOptions_);
+    if (this.waitingForFastQualityPlaylistReceived_) {
+      this.runFastQualitySwitch_();
+    }
+    this.updateDuration(!updatedPlaylist.endList); // If the player isn't paused, ensure that the segment loader is running,
+    // as it is possible that it was temporarily stopped while waiting for
+    // a playlist (e.g., in case the playlist errored and we re-requested it).
+
+    if (!this.tech_.paused()) {
+      this.mainSegmentLoader_.load();
+      if (this.audioSegmentLoader_) {
+        this.audioSegmentLoader_.load();
+      }
+    }
+  }
+  /**
+   * A helper function for triggerring presence usage events once per source
+   *
+   * @private
+   */
+
+  triggerPresenceUsage_(main, media) {
+    const mediaGroups = main.mediaGroups || {};
+    let defaultDemuxed = true;
+    const audioGroupKeys = Object.keys(mediaGroups.AUDIO);
+    for (const mediaGroup in mediaGroups.AUDIO) {
+      for (const label in mediaGroups.AUDIO[mediaGroup]) {
+        const properties = mediaGroups.AUDIO[mediaGroup][label];
+        if (!properties.uri) {
+          defaultDemuxed = false;
+        }
+      }
+    }
+    if (defaultDemuxed) {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-demuxed'
+      });
+    }
+    if (Object.keys(mediaGroups.SUBTITLES).length) {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-webvtt'
+      });
+    }
+    if (Vhs$1.Playlist.isAes(media)) {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-aes'
+      });
+    }
+    if (audioGroupKeys.length && Object.keys(mediaGroups.AUDIO[audioGroupKeys[0]]).length > 1) {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-alternate-audio'
+      });
+    }
+    if (this.useCueTags_) {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-playlist-cue-tags'
+      });
+    }
+  }
+  shouldSwitchToMedia_(nextPlaylist) {
+    const currentPlaylist = this.mainPlaylistLoader_.media() || this.mainPlaylistLoader_.pendingMedia_;
+    const currentTime = this.tech_.currentTime();
+    const bufferLowWaterLine = this.bufferLowWaterLine();
+    const bufferHighWaterLine = this.bufferHighWaterLine();
+    const buffered = this.tech_.buffered();
+    return shouldSwitchToMedia({
+      buffered,
+      currentTime,
+      currentPlaylist,
+      nextPlaylist,
+      bufferLowWaterLine,
+      bufferHighWaterLine,
+      duration: this.duration(),
+      bufferBasedABR: this.bufferBasedABR,
+      log: this.logger_
+    });
+  }
+  /**
+   * Register event handlers on the segment loaders. A helper function
+   * for construction time.
+   *
+   * @private
+   */
+
+  setupSegmentLoaderListeners_() {
+    this.mainSegmentLoader_.on('bandwidthupdate', () => {
+      // Whether or not buffer based ABR or another ABR is used, on a bandwidth change it's
+      // useful to check to see if a rendition switch should be made.
+      this.checkABR_('bandwidthupdate');
+      this.tech_.trigger('bandwidthupdate');
+    });
+    this.mainSegmentLoader_.on('timeout', () => {
+      if (this.bufferBasedABR) {
+        // If a rendition change is needed, then it would've be done on `bandwidthupdate`.
+        // Here the only consideration is that for buffer based ABR there's no guarantee
+        // of an immediate switch (since the bandwidth is averaged with a timeout
+        // bandwidth value of 1), so force a load on the segment loader to keep it going.
+        this.mainSegmentLoader_.load();
+      }
+    }); // `progress` events are not reliable enough of a bandwidth measure to trigger buffer
+    // based ABR.
+
+    if (!this.bufferBasedABR) {
+      this.mainSegmentLoader_.on('progress', () => {
+        this.trigger('progress');
+      });
+    }
+    this.mainSegmentLoader_.on('error', () => {
+      const error = this.mainSegmentLoader_.error();
+      this.excludePlaylist({
+        playlistToExclude: error.playlist,
+        error
+      });
+    });
+    this.mainSegmentLoader_.on('appenderror', () => {
+      this.error = this.mainSegmentLoader_.error_;
+      this.trigger('error');
+    });
+    this.mainSegmentLoader_.on('syncinfoupdate', () => {
+      this.onSyncInfoUpdate_();
+    });
+    this.mainSegmentLoader_.on('timestampoffset', () => {
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-timestamp-offset'
+      });
+    });
+    this.audioSegmentLoader_.on('syncinfoupdate', () => {
+      this.onSyncInfoUpdate_();
+    });
+    this.audioSegmentLoader_.on('appenderror', () => {
+      this.error = this.audioSegmentLoader_.error_;
+      this.trigger('error');
+    });
+    this.mainSegmentLoader_.on('ended', () => {
+      this.logger_('main segment loader ended');
+      this.onEndOfStream();
+    });
+    this.mainSegmentLoader_.on('earlyabort', event => {
+      // never try to early abort with the new ABR algorithm
+      if (this.bufferBasedABR) {
+        return;
+      }
+      this.delegateLoaders_('all', ['abort']);
+      this.excludePlaylist({
+        error: {
+          message: 'Aborted early because there isn\'t enough bandwidth to complete ' + 'the request without rebuffering.'
+        },
+        playlistExclusionDuration: ABORT_EARLY_EXCLUSION_SECONDS
+      });
+    });
+    const updateCodecs = () => {
+      if (!this.sourceUpdater_.hasCreatedSourceBuffers()) {
+        return this.tryToCreateSourceBuffers_();
+      }
+      const codecs = this.getCodecsOrExclude_(); // no codecs means that the playlist was excluded
+
+      if (!codecs) {
+        return;
+      }
+      this.sourceUpdater_.addOrChangeSourceBuffers(codecs);
+    };
+    this.mainSegmentLoader_.on('trackinfo', updateCodecs);
+    this.audioSegmentLoader_.on('trackinfo', updateCodecs);
+    this.mainSegmentLoader_.on('fmp4', () => {
+      if (!this.triggeredFmp4Usage) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-fmp4'
+        });
+        this.triggeredFmp4Usage = true;
+      }
+    });
+    this.audioSegmentLoader_.on('fmp4', () => {
+      if (!this.triggeredFmp4Usage) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-fmp4'
+        });
+        this.triggeredFmp4Usage = true;
+      }
+    });
+    this.audioSegmentLoader_.on('ended', () => {
+      this.logger_('audioSegmentLoader ended');
+      this.onEndOfStream();
+    });
+  }
+  mediaSecondsLoaded_() {
+    return Math.max(this.audioSegmentLoader_.mediaSecondsLoaded + this.mainSegmentLoader_.mediaSecondsLoaded);
+  }
+  /**
+   * Call load on our SegmentLoaders
+   */
+
+  load() {
+    this.mainSegmentLoader_.load();
+    if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+      this.audioSegmentLoader_.load();
+    }
+    if (this.mediaTypes_.SUBTITLES.activePlaylistLoader) {
+      this.subtitleSegmentLoader_.load();
+    }
+  }
+  /**
+   * Re-tune playback quality level for the current player
+   * conditions. This method will perform destructive actions like removing
+   * already buffered content in order to readjust the currently active
+   * playlist quickly. This is good for manual quality changes
+   *
+   * @private
+   */
+
+  fastQualityChange_(media = this.selectPlaylist()) {
+    if (media && media === this.mainPlaylistLoader_.media()) {
+      this.logger_('skipping fastQualityChange because new media is same as old');
+      return;
+    }
+    this.switchMedia_(media, 'fast-quality'); // we would like to avoid race condition when we call fastQuality,
+    // reset everything and start loading segments from prev segments instead of new because new playlist is not received yet
+
+    this.waitingForFastQualityPlaylistReceived_ = true;
+  }
+  runFastQualitySwitch_() {
+    this.waitingForFastQualityPlaylistReceived_ = false; // Delete all buffered data to allow an immediate quality switch, then seek to give
+    // the browser a kick to remove any cached frames from the previous rendtion (.04 seconds
+    // ahead was roughly the minimum that will accomplish this across a variety of content
+    // in IE and Edge, but seeking in place is sufficient on all other browsers)
+    // Edge/IE bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14600375/
+    // Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=651904
+
+    this.mainSegmentLoader_.pause();
+    this.mainSegmentLoader_.resetEverything(() => {
+      this.tech_.setCurrentTime(this.tech_.currentTime());
+    }); // don't need to reset audio as it is reset when media changes
+  }
+  /**
+   * Begin playback.
+   */
+
+  play() {
+    if (this.setupFirstPlay()) {
+      return;
+    }
+    if (this.tech_.ended()) {
+      this.tech_.setCurrentTime(0);
+    }
+    if (this.hasPlayed_) {
+      this.load();
+    }
+    const seekable = this.tech_.seekable(); // if the viewer has paused and we fell out of the live window,
+    // seek forward to the live point
+
+    if (this.tech_.duration() === Infinity) {
+      if (this.tech_.currentTime() < seekable.start(0)) {
+        return this.tech_.setCurrentTime(seekable.end(seekable.length - 1));
+      }
+    }
+  }
+  /**
+   * Seek to the latest media position if this is a live video and the
+   * player and video are loaded and initialized.
+   */
+
+  setupFirstPlay() {
+    const media = this.mainPlaylistLoader_.media(); // Check that everything is ready to begin buffering for the first call to play
+    //  If 1) there is no active media
+    //     2) the player is paused
+    //     3) the first play has already been setup
+    // then exit early
+
+    if (!media || this.tech_.paused() || this.hasPlayed_) {
+      return false;
+    } // when the video is a live stream and/or has a start time
+
+    if (!media.endList || media.start) {
+      const seekable = this.seekable();
+      if (!seekable.length) {
+        // without a seekable range, the player cannot seek to begin buffering at the
+        // live or start point
+        return false;
+      }
+      const seekableEnd = seekable.end(0);
+      let startPoint = seekableEnd;
+      if (media.start) {
+        const offset = media.start.timeOffset;
+        if (offset < 0) {
+          startPoint = Math.max(seekableEnd + offset, seekable.start(0));
+        } else {
+          startPoint = Math.min(seekableEnd, offset);
+        }
+      } // trigger firstplay to inform the source handler to ignore the next seek event
+
+      this.trigger('firstplay'); // seek to the live point
+
+      this.tech_.setCurrentTime(startPoint);
+    }
+    this.hasPlayed_ = true; // we can begin loading now that everything is ready
+
+    this.load();
+    return true;
+  }
+  /**
+   * handle the sourceopen event on the MediaSource
+   *
+   * @private
+   */
+
+  handleSourceOpen_() {
+    // Only attempt to create the source buffer if none already exist.
+    // handleSourceOpen is also called when we are "re-opening" a source buffer
+    // after `endOfStream` has been called (in response to a seek for instance)
+    this.tryToCreateSourceBuffers_(); // if autoplay is enabled, begin playback. This is duplicative of
+    // code in video.js but is required because play() must be invoked
+    // *after* the media source has opened.
+
+    if (this.tech_.autoplay()) {
+      const playPromise = this.tech_.play(); // Catch/silence error when a pause interrupts a play request
+      // on browsers which return a promise
+
+      if (typeof playPromise !== 'undefined' && typeof playPromise.then === 'function') {
+        playPromise.then(null, e => {});
+      }
+    }
+    this.trigger('sourceopen');
+  }
+  /**
+   * handle the sourceended event on the MediaSource
+   *
+   * @private
+   */
+
+  handleSourceEnded_() {
+    if (!this.inbandTextTracks_.metadataTrack_) {
+      return;
+    }
+    const cues = this.inbandTextTracks_.metadataTrack_.cues;
+    if (!cues || !cues.length) {
+      return;
+    }
+    const duration = this.duration();
+    cues[cues.length - 1].endTime = isNaN(duration) || Math.abs(duration) === Infinity ? Number.MAX_VALUE : duration;
+  }
+  /**
+   * handle the durationchange event on the MediaSource
+   *
+   * @private
+   */
+
+  handleDurationChange_() {
+    this.tech_.trigger('durationchange');
+  }
+  /**
+   * Calls endOfStream on the media source when all active stream types have called
+   * endOfStream
+   *
+   * @param {string} streamType
+   *        Stream type of the segment loader that called endOfStream
+   * @private
+   */
+
+  onEndOfStream() {
+    let isEndOfStream = this.mainSegmentLoader_.ended_;
+    if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+      const mainMediaInfo = this.mainSegmentLoader_.getCurrentMediaInfo_(); // if the audio playlist loader exists, then alternate audio is active
+
+      if (!mainMediaInfo || mainMediaInfo.hasVideo) {
+        // if we do not know if the main segment loader contains video yet or if we
+        // definitively know the main segment loader contains video, then we need to wait
+        // for both main and audio segment loaders to call endOfStream
+        isEndOfStream = isEndOfStream && this.audioSegmentLoader_.ended_;
+      } else {
+        // otherwise just rely on the audio loader
+        isEndOfStream = this.audioSegmentLoader_.ended_;
+      }
+    }
+    if (!isEndOfStream) {
+      return;
+    }
+    this.stopABRTimer_();
+    this.sourceUpdater_.endOfStream();
+  }
+  /**
+   * Check if a playlist has stopped being updated
+   *
+   * @param {Object} playlist the media playlist object
+   * @return {boolean} whether the playlist has stopped being updated or not
+   */
+
+  stuckAtPlaylistEnd_(playlist) {
+    const seekable = this.seekable();
+    if (!seekable.length) {
+      // playlist doesn't have enough information to determine whether we are stuck
+      return false;
+    }
+    const expired = this.syncController_.getExpiredTime(playlist, this.duration());
+    if (expired === null) {
+      return false;
+    } // does not use the safe live end to calculate playlist end, since we
+    // don't want to say we are stuck while there is still content
+
+    const absolutePlaylistEnd = Vhs$1.Playlist.playlistEnd(playlist, expired);
+    const currentTime = this.tech_.currentTime();
+    const buffered = this.tech_.buffered();
+    if (!buffered.length) {
+      // return true if the playhead reached the absolute end of the playlist
+      return absolutePlaylistEnd - currentTime <= SAFE_TIME_DELTA;
+    }
+    const bufferedEnd = buffered.end(buffered.length - 1); // return true if there is too little buffer left and buffer has reached absolute
+    // end of playlist
+
+    return bufferedEnd - currentTime <= SAFE_TIME_DELTA && absolutePlaylistEnd - bufferedEnd <= SAFE_TIME_DELTA;
+  }
+  /**
+   * Exclude a playlist for a set amount of time, making it unavailable for selection by
+   * the rendition selection algorithm, then force a new playlist (rendition) selection.
+   *
+   * @param {Object=} playlistToExclude
+   *                  the playlist to exclude, defaults to the currently selected playlist
+   * @param {Object=} error
+   *                  an optional error
+   * @param {number=} playlistExclusionDuration
+   *                  an optional number of seconds to exclude the playlist
+   */
+
+  excludePlaylist({
+    playlistToExclude = this.mainPlaylistLoader_.media(),
+    error = {},
+    playlistExclusionDuration
+  }) {
+    // If the `error` was generated by the playlist loader, it will contain
+    // the playlist we were trying to load (but failed) and that should be
+    // excluded instead of the currently selected playlist which is likely
+    // out-of-date in this scenario
+    playlistToExclude = playlistToExclude || this.mainPlaylistLoader_.media();
+    playlistExclusionDuration = playlistExclusionDuration || error.playlistExclusionDuration || this.playlistExclusionDuration; // If there is no current playlist, then an error occurred while we were
+    // trying to load the main OR while we were disposing of the tech
+
+    if (!playlistToExclude) {
+      this.error = error;
+      if (this.mediaSource.readyState !== 'open') {
+        this.trigger('error');
+      } else {
+        this.sourceUpdater_.endOfStream('network');
+      }
+      return;
+    }
+    playlistToExclude.playlistErrors_++;
+    const playlists = this.mainPlaylistLoader_.main.playlists;
+    const enabledPlaylists = playlists.filter(isEnabled);
+    const isFinalRendition = enabledPlaylists.length === 1 && enabledPlaylists[0] === playlistToExclude; // Don't exclude the only playlist unless it was excluded
+    // forever
+
+    if (playlists.length === 1 && playlistExclusionDuration !== Infinity) {
+      videojs.log.warn(`Problem encountered with playlist ${playlistToExclude.id}. ` + 'Trying again since it is the only playlist.');
+      this.tech_.trigger('retryplaylist'); // if this is a final rendition, we should delay
+
+      return this.mainPlaylistLoader_.load(isFinalRendition);
+    }
+    if (isFinalRendition) {
+      // If we're content steering, try other pathways.
+      if (this.main().contentSteering) {
+        const pathway = this.pathwayAttribute_(playlistToExclude); // Ignore at least 1 steering manifest refresh.
+
+        const reIncludeDelay = this.contentSteeringController_.steeringManifest.ttl * 1000;
+        this.contentSteeringController_.excludePathway(pathway);
+        this.excludeThenChangePathway_();
+        setTimeout(() => {
+          this.contentSteeringController_.addAvailablePathway(pathway);
+        }, reIncludeDelay);
+        return;
+      } // Since we're on the final non-excluded playlist, and we're about to exclude
+      // it, instead of erring the player or retrying this playlist, clear out the current
+      // exclusion list. This allows other playlists to be attempted in case any have been
+      // fixed.
+
+      let reincluded = false;
+      playlists.forEach(playlist => {
+        // skip current playlist which is about to be excluded
+        if (playlist === playlistToExclude) {
+          return;
+        }
+        const excludeUntil = playlist.excludeUntil; // a playlist cannot be reincluded if it wasn't excluded to begin with.
+
+        if (typeof excludeUntil !== 'undefined' && excludeUntil !== Infinity) {
+          reincluded = true;
+          delete playlist.excludeUntil;
+        }
+      });
+      if (reincluded) {
+        videojs.log.warn('Removing other playlists from the exclusion list because the last ' + 'rendition is about to be excluded.'); // Technically we are retrying a playlist, in that we are simply retrying a previous
+        // playlist. This is needed for users relying on the retryplaylist event to catch a
+        // case where the player might be stuck and looping through "dead" playlists.
+
+        this.tech_.trigger('retryplaylist');
+      }
+    } // Exclude this playlist
+
+    let excludeUntil;
+    if (playlistToExclude.playlistErrors_ > this.maxPlaylistRetries) {
+      excludeUntil = Infinity;
+    } else {
+      excludeUntil = Date.now() + playlistExclusionDuration * 1000;
+    }
+    playlistToExclude.excludeUntil = excludeUntil;
+    if (error.reason) {
+      playlistToExclude.lastExcludeReason_ = error.reason;
+    }
+    this.tech_.trigger('excludeplaylist');
+    this.tech_.trigger({
+      type: 'usage',
+      name: 'vhs-rendition-excluded'
+    }); // TODO: only load a new playlist if we're excluding the current playlist
+    // If this function was called with a playlist that's not the current active playlist
+    // (e.g., media().id !== playlistToExclude.id),
+    // then a new playlist should not be selected and loaded, as there's nothing wrong with the current playlist.
+
+    const nextPlaylist = this.selectPlaylist();
+    if (!nextPlaylist) {
+      this.error = 'Playback cannot continue. No available working or supported playlists.';
+      this.trigger('error');
+      return;
+    }
+    const logFn = error.internal ? this.logger_ : videojs.log.warn;
+    const errorMessage = error.message ? ' ' + error.message : '';
+    logFn(`${error.internal ? 'Internal problem' : 'Problem'} encountered with playlist ${playlistToExclude.id}.` + `${errorMessage} Switching to playlist ${nextPlaylist.id}.`); // if audio group changed reset audio loaders
+
+    if (nextPlaylist.attributes.AUDIO !== playlistToExclude.attributes.AUDIO) {
+      this.delegateLoaders_('audio', ['abort', 'pause']);
+    } // if subtitle group changed reset subtitle loaders
+
+    if (nextPlaylist.attributes.SUBTITLES !== playlistToExclude.attributes.SUBTITLES) {
+      this.delegateLoaders_('subtitle', ['abort', 'pause']);
+    }
+    this.delegateLoaders_('main', ['abort', 'pause']);
+    const delayDuration = nextPlaylist.targetDuration / 2 * 1000 || 5 * 1000;
+    const shouldDelay = typeof nextPlaylist.lastRequest === 'number' && Date.now() - nextPlaylist.lastRequest <= delayDuration; // delay if it's a final rendition or if the last refresh is sooner than half targetDuration
+
+    return this.switchMedia_(nextPlaylist, 'exclude', isFinalRendition || shouldDelay);
+  }
+  /**
+   * Pause all segment/playlist loaders
+   */
+
+  pauseLoading() {
+    this.delegateLoaders_('all', ['abort', 'pause']);
+    this.stopABRTimer_();
+  }
+  /**
+   * Call a set of functions in order on playlist loaders, segment loaders,
+   * or both types of loaders.
+   *
+   * @param {string} filter
+   *        Filter loaders that should call fnNames using a string. Can be:
+   *        * all - run on all loaders
+   *        * audio - run on all audio loaders
+   *        * subtitle - run on all subtitle loaders
+   *        * main - run on the main loaders
+   *
+   * @param {Array|string} fnNames
+   *        A string or array of function names to call.
+   */
+
+  delegateLoaders_(filter, fnNames) {
+    const loaders = [];
+    const dontFilterPlaylist = filter === 'all';
+    if (dontFilterPlaylist || filter === 'main') {
+      loaders.push(this.mainPlaylistLoader_);
+    }
+    const mediaTypes = [];
+    if (dontFilterPlaylist || filter === 'audio') {
+      mediaTypes.push('AUDIO');
+    }
+    if (dontFilterPlaylist || filter === 'subtitle') {
+      mediaTypes.push('CLOSED-CAPTIONS');
+      mediaTypes.push('SUBTITLES');
+    }
+    mediaTypes.forEach(mediaType => {
+      const loader = this.mediaTypes_[mediaType] && this.mediaTypes_[mediaType].activePlaylistLoader;
+      if (loader) {
+        loaders.push(loader);
+      }
+    });
+    ['main', 'audio', 'subtitle'].forEach(name => {
+      const loader = this[`${name}SegmentLoader_`];
+      if (loader && (filter === name || filter === 'all')) {
+        loaders.push(loader);
+      }
+    });
+    loaders.forEach(loader => fnNames.forEach(fnName => {
+      if (typeof loader[fnName] === 'function') {
+        loader[fnName]();
+      }
+    }));
+  }
+  /**
+   * set the current time on all segment loaders
+   *
+   * @param {TimeRange} currentTime the current time to set
+   * @return {TimeRange} the current time
+   */
+
+  setCurrentTime(currentTime) {
+    const buffered = findRange(this.tech_.buffered(), currentTime);
+    if (!(this.mainPlaylistLoader_ && this.mainPlaylistLoader_.media())) {
+      // return immediately if the metadata is not ready yet
+      return 0;
+    } // it's clearly an edge-case but don't thrown an error if asked to
+    // seek within an empty playlist
+
+    if (!this.mainPlaylistLoader_.media().segments) {
+      return 0;
+    } // if the seek location is already buffered, continue buffering as usual
+
+    if (buffered && buffered.length) {
+      return currentTime;
+    } // cancel outstanding requests so we begin buffering at the new
+    // location
+
+    this.mainSegmentLoader_.pause();
+    this.mainSegmentLoader_.resetEverything();
+    if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+      this.audioSegmentLoader_.pause();
+      this.audioSegmentLoader_.resetEverything();
+    }
+    if (this.mediaTypes_.SUBTITLES.activePlaylistLoader) {
+      this.subtitleSegmentLoader_.pause();
+      this.subtitleSegmentLoader_.resetEverything();
+    } // start segment loader loading in case they are paused
+
+    this.load();
+  }
+  /**
+   * get the current duration
+   *
+   * @return {TimeRange} the duration
+   */
+
+  duration() {
+    if (!this.mainPlaylistLoader_) {
+      return 0;
+    }
+    const media = this.mainPlaylistLoader_.media();
+    if (!media) {
+      // no playlists loaded yet, so can't determine a duration
+      return 0;
+    } // Don't rely on the media source for duration in the case of a live playlist since
+    // setting the native MediaSource's duration to infinity ends up with consequences to
+    // seekable behavior. See https://github.com/w3c/media-source/issues/5 for details.
+    //
+    // This is resolved in the spec by https://github.com/w3c/media-source/pull/92,
+    // however, few browsers have support for setLiveSeekableRange()
+    // https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/setLiveSeekableRange
+    //
+    // Until a time when the duration of the media source can be set to infinity, and a
+    // seekable range specified across browsers, just return Infinity.
+
+    if (!media.endList) {
+      return Infinity;
+    } // Since this is a VOD video, it is safe to rely on the media source's duration (if
+    // available). If it's not available, fall back to a playlist-calculated estimate.
+
+    if (this.mediaSource) {
+      return this.mediaSource.duration;
+    }
+    return Vhs$1.Playlist.duration(media);
+  }
+  /**
+   * check the seekable range
+   *
+   * @return {TimeRange} the seekable range
+   */
+
+  seekable() {
+    return this.seekable_;
+  }
+  onSyncInfoUpdate_() {
+    let audioSeekable; // TODO check for creation of both source buffers before updating seekable
+    //
+    // A fix was made to this function where a check for
+    // this.sourceUpdater_.hasCreatedSourceBuffers
+    // was added to ensure that both source buffers were created before seekable was
+    // updated. However, it originally had a bug where it was checking for a true and
+    // returning early instead of checking for false. Setting it to check for false to
+    // return early though created other issues. A call to play() would check for seekable
+    // end without verifying that a seekable range was present. In addition, even checking
+    // for that didn't solve some issues, as handleFirstPlay is sometimes worked around
+    // due to a media update calling load on the segment loaders, skipping a seek to live,
+    // thereby starting live streams at the beginning of the stream rather than at the end.
+    //
+    // This conditional should be fixed to wait for the creation of two source buffers at
+    // the same time as the other sections of code are fixed to properly seek to live and
+    // not throw an error due to checking for a seekable end when no seekable range exists.
+    //
+    // For now, fall back to the older behavior, with the understanding that the seekable
+    // range may not be completely correct, leading to a suboptimal initial live point.
+
+    if (!this.mainPlaylistLoader_) {
+      return;
+    }
+    let media = this.mainPlaylistLoader_.media();
+    if (!media) {
+      return;
+    }
+    let expired = this.syncController_.getExpiredTime(media, this.duration());
+    if (expired === null) {
+      // not enough information to update seekable
+      return;
+    }
+    const main = this.mainPlaylistLoader_.main;
+    const mainSeekable = Vhs$1.Playlist.seekable(media, expired, Vhs$1.Playlist.liveEdgeDelay(main, media));
+    if (mainSeekable.length === 0) {
+      return;
+    }
+    if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+      media = this.mediaTypes_.AUDIO.activePlaylistLoader.media();
+      expired = this.syncController_.getExpiredTime(media, this.duration());
+      if (expired === null) {
+        return;
+      }
+      audioSeekable = Vhs$1.Playlist.seekable(media, expired, Vhs$1.Playlist.liveEdgeDelay(main, media));
+      if (audioSeekable.length === 0) {
+        return;
+      }
+    }
+    let oldEnd;
+    let oldStart;
+    if (this.seekable_ && this.seekable_.length) {
+      oldEnd = this.seekable_.end(0);
+      oldStart = this.seekable_.start(0);
+    }
+    if (!audioSeekable) {
+      // seekable has been calculated based on buffering video data so it
+      // can be returned directly
+      this.seekable_ = mainSeekable;
+    } else if (audioSeekable.start(0) > mainSeekable.end(0) || mainSeekable.start(0) > audioSeekable.end(0)) {
+      // seekables are pretty far off, rely on main
+      this.seekable_ = mainSeekable;
+    } else {
+      this.seekable_ = createTimeRanges([[audioSeekable.start(0) > mainSeekable.start(0) ? audioSeekable.start(0) : mainSeekable.start(0), audioSeekable.end(0) < mainSeekable.end(0) ? audioSeekable.end(0) : mainSeekable.end(0)]]);
+    } // seekable is the same as last time
+
+    if (this.seekable_ && this.seekable_.length) {
+      if (this.seekable_.end(0) === oldEnd && this.seekable_.start(0) === oldStart) {
+        return;
+      }
+    }
+    this.logger_(`seekable updated [${printableRange(this.seekable_)}]`);
+    this.tech_.trigger('seekablechanged');
+  }
+  /**
+   * Update the player duration
+   */
+
+  updateDuration(isLive) {
+    if (this.updateDuration_) {
+      this.mediaSource.removeEventListener('sourceopen', this.updateDuration_);
+      this.updateDuration_ = null;
+    }
+    if (this.mediaSource.readyState !== 'open') {
+      this.updateDuration_ = this.updateDuration.bind(this, isLive);
+      this.mediaSource.addEventListener('sourceopen', this.updateDuration_);
+      return;
+    }
+    if (isLive) {
+      const seekable = this.seekable();
+      if (!seekable.length) {
+        return;
+      } // Even in the case of a live playlist, the native MediaSource's duration should not
+      // be set to Infinity (even though this would be expected for a live playlist), since
+      // setting the native MediaSource's duration to infinity ends up with consequences to
+      // seekable behavior. See https://github.com/w3c/media-source/issues/5 for details.
+      //
+      // This is resolved in the spec by https://github.com/w3c/media-source/pull/92,
+      // however, few browsers have support for setLiveSeekableRange()
+      // https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/setLiveSeekableRange
+      //
+      // Until a time when the duration of the media source can be set to infinity, and a
+      // seekable range specified across browsers, the duration should be greater than or
+      // equal to the last possible seekable value.
+      // MediaSource duration starts as NaN
+      // It is possible (and probable) that this case will never be reached for many
+      // sources, since the MediaSource reports duration as the highest value without
+      // accounting for timestamp offset. For example, if the timestamp offset is -100 and
+      // we buffered times 0 to 100 with real times of 100 to 200, even though current
+      // time will be between 0 and 100, the native media source may report the duration
+      // as 200. However, since we report duration separate from the media source (as
+      // Infinity), and as long as the native media source duration value is greater than
+      // our reported seekable range, seeks will work as expected. The large number as
+      // duration for live is actually a strategy used by some players to work around the
+      // issue of live seekable ranges cited above.
+
+      if (isNaN(this.mediaSource.duration) || this.mediaSource.duration < seekable.end(seekable.length - 1)) {
+        this.sourceUpdater_.setDuration(seekable.end(seekable.length - 1));
+      }
+      return;
+    }
+    const buffered = this.tech_.buffered();
+    let duration = Vhs$1.Playlist.duration(this.mainPlaylistLoader_.media());
+    if (buffered.length > 0) {
+      duration = Math.max(duration, buffered.end(buffered.length - 1));
+    }
+    if (this.mediaSource.duration !== duration) {
+      this.sourceUpdater_.setDuration(duration);
+    }
+  }
+  /**
+   * dispose of the PlaylistController and everything
+   * that it controls
+   */
+
+  dispose() {
+    this.trigger('dispose');
+    this.decrypter_.terminate();
+    this.mainPlaylistLoader_.dispose();
+    this.mainSegmentLoader_.dispose();
+    this.contentSteeringController_.dispose();
+    this.keyStatusMap_.clear();
+    if (this.loadOnPlay_) {
+      this.tech_.off('play', this.loadOnPlay_);
+    }
+    ['AUDIO', 'SUBTITLES'].forEach(type => {
+      const groups = this.mediaTypes_[type].groups;
+      for (const id in groups) {
+        groups[id].forEach(group => {
+          if (group.playlistLoader) {
+            group.playlistLoader.dispose();
+          }
+        });
+      }
+    });
+    this.audioSegmentLoader_.dispose();
+    this.subtitleSegmentLoader_.dispose();
+    this.sourceUpdater_.dispose();
+    this.timelineChangeController_.dispose();
+    this.stopABRTimer_();
+    if (this.updateDuration_) {
+      this.mediaSource.removeEventListener('sourceopen', this.updateDuration_);
+    }
+    this.mediaSource.removeEventListener('durationchange', this.handleDurationChange_); // load the media source into the player
+
+    this.mediaSource.removeEventListener('sourceopen', this.handleSourceOpen_);
+    this.mediaSource.removeEventListener('sourceended', this.handleSourceEnded_);
+    this.off();
+  }
+  /**
+   * return the main playlist object if we have one
+   *
+   * @return {Object} the main playlist object that we parsed
+   */
+
+  main() {
+    return this.mainPlaylistLoader_.main;
+  }
+  /**
+   * return the currently selected playlist
+   *
+   * @return {Object} the currently selected playlist object that we parsed
+   */
+
+  media() {
+    // playlist loader will not return media if it has not been fully loaded
+    return this.mainPlaylistLoader_.media() || this.initialMedia_;
+  }
+  areMediaTypesKnown_() {
+    const usingAudioLoader = !!this.mediaTypes_.AUDIO.activePlaylistLoader;
+    const hasMainMediaInfo = !!this.mainSegmentLoader_.getCurrentMediaInfo_(); // if we are not using an audio loader, then we have audio media info
+    // otherwise check on the segment loader.
+
+    const hasAudioMediaInfo = !usingAudioLoader ? true : !!this.audioSegmentLoader_.getCurrentMediaInfo_(); // one or both loaders has not loaded sufficently to get codecs
+
+    if (!hasMainMediaInfo || !hasAudioMediaInfo) {
+      return false;
+    }
+    return true;
+  }
+  getCodecsOrExclude_() {
+    const media = {
+      main: this.mainSegmentLoader_.getCurrentMediaInfo_() || {},
+      audio: this.audioSegmentLoader_.getCurrentMediaInfo_() || {}
+    };
+    const playlist = this.mainSegmentLoader_.getPendingSegmentPlaylist() || this.media(); // set "main" media equal to video
+
+    media.video = media.main;
+    const playlistCodecs = codecsForPlaylist(this.main(), playlist);
+    const codecs = {};
+    const usingAudioLoader = !!this.mediaTypes_.AUDIO.activePlaylistLoader;
+    if (media.main.hasVideo) {
+      codecs.video = playlistCodecs.video || media.main.videoCodec || DEFAULT_VIDEO_CODEC;
+    }
+    if (media.main.isMuxed) {
+      codecs.video += `,${playlistCodecs.audio || media.main.audioCodec || DEFAULT_AUDIO_CODEC}`;
+    }
+    if (media.main.hasAudio && !media.main.isMuxed || media.audio.hasAudio || usingAudioLoader) {
+      codecs.audio = playlistCodecs.audio || media.main.audioCodec || media.audio.audioCodec || DEFAULT_AUDIO_CODEC; // set audio isFmp4 so we use the correct "supports" function below
+
+      media.audio.isFmp4 = media.main.hasAudio && !media.main.isMuxed ? media.main.isFmp4 : media.audio.isFmp4;
+    } // no codecs, no playback.
+
+    if (!codecs.audio && !codecs.video) {
+      this.excludePlaylist({
+        playlistToExclude: playlist,
+        error: {
+          message: 'Could not determine codecs for playlist.'
+        },
+        playlistExclusionDuration: Infinity
+      });
+      return;
+    } // fmp4 relies on browser support, while ts relies on muxer support
+
+    const supportFunction = (isFmp4, codec) => isFmp4 ? browserSupportsCodec(codec) : muxerSupportsCodec(codec);
+    const unsupportedCodecs = {};
+    let unsupportedAudio;
+    ['video', 'audio'].forEach(function (type) {
+      if (codecs.hasOwnProperty(type) && !supportFunction(media[type].isFmp4, codecs[type])) {
+        const supporter = media[type].isFmp4 ? 'browser' : 'muxer';
+        unsupportedCodecs[supporter] = unsupportedCodecs[supporter] || [];
+        unsupportedCodecs[supporter].push(codecs[type]);
+        if (type === 'audio') {
+          unsupportedAudio = supporter;
+        }
+      }
+    });
+    if (usingAudioLoader && unsupportedAudio && playlist.attributes.AUDIO) {
+      const audioGroup = playlist.attributes.AUDIO;
+      this.main().playlists.forEach(variant => {
+        const variantAudioGroup = variant.attributes && variant.attributes.AUDIO;
+        if (variantAudioGroup === audioGroup && variant !== playlist) {
+          variant.excludeUntil = Infinity;
+        }
+      });
+      this.logger_(`excluding audio group ${audioGroup} as ${unsupportedAudio} does not support codec(s): "${codecs.audio}"`);
+    } // if we have any unsupported codecs exclude this playlist.
+
+    if (Object.keys(unsupportedCodecs).length) {
+      const message = Object.keys(unsupportedCodecs).reduce((acc, supporter) => {
+        if (acc) {
+          acc += ', ';
+        }
+        acc += `${supporter} does not support codec(s): "${unsupportedCodecs[supporter].join(',')}"`;
+        return acc;
+      }, '') + '.';
+      this.excludePlaylist({
+        playlistToExclude: playlist,
+        error: {
+          internal: true,
+          message
+        },
+        playlistExclusionDuration: Infinity
+      });
+      return;
+    } // check if codec switching is happening
+
+    if (this.sourceUpdater_.hasCreatedSourceBuffers() && !this.sourceUpdater_.canChangeType()) {
+      const switchMessages = [];
+      ['video', 'audio'].forEach(type => {
+        const newCodec = (parseCodecs(this.sourceUpdater_.codecs[type] || '')[0] || {}).type;
+        const oldCodec = (parseCodecs(codecs[type] || '')[0] || {}).type;
+        if (newCodec && oldCodec && newCodec.toLowerCase() !== oldCodec.toLowerCase()) {
+          switchMessages.push(`"${this.sourceUpdater_.codecs[type]}" -> "${codecs[type]}"`);
+        }
+      });
+      if (switchMessages.length) {
+        this.excludePlaylist({
+          playlistToExclude: playlist,
+          error: {
+            message: `Codec switching not supported: ${switchMessages.join(', ')}.`,
+            internal: true
+          },
+          playlistExclusionDuration: Infinity
+        });
+        return;
+      }
+    } // TODO: when using the muxer shouldn't we just return
+    // the codecs that the muxer outputs?
+
+    return codecs;
+  }
+  /**
+   * Create source buffers and exlude any incompatible renditions.
+   *
+   * @private
+   */
+
+  tryToCreateSourceBuffers_() {
+    // media source is not ready yet or sourceBuffers are already
+    // created.
+    if (this.mediaSource.readyState !== 'open' || this.sourceUpdater_.hasCreatedSourceBuffers()) {
+      return;
+    }
+    if (!this.areMediaTypesKnown_()) {
+      return;
+    }
+    const codecs = this.getCodecsOrExclude_(); // no codecs means that the playlist was excluded
+
+    if (!codecs) {
+      return;
+    }
+    this.sourceUpdater_.createSourceBuffers(codecs);
+    const codecString = [codecs.video, codecs.audio].filter(Boolean).join(',');
+    this.excludeIncompatibleVariants_(codecString);
+  }
+  /**
+   * Excludes playlists with codecs that are unsupported by the muxer and browser.
+   */
+
+  excludeUnsupportedVariants_() {
+    const playlists = this.main().playlists;
+    const ids = []; // TODO: why don't we have a property to loop through all
+    // playlist? Why did we ever mix indexes and keys?
+
+    Object.keys(playlists).forEach(key => {
+      const variant = playlists[key]; // check if we already processed this playlist.
+
+      if (ids.indexOf(variant.id) !== -1) {
+        return;
+      }
+      ids.push(variant.id);
+      const codecs = codecsForPlaylist(this.main, variant);
+      const unsupported = [];
+      if (codecs.audio && !muxerSupportsCodec(codecs.audio) && !browserSupportsCodec(codecs.audio)) {
+        unsupported.push(`audio codec ${codecs.audio}`);
+      }
+      if (codecs.video && !muxerSupportsCodec(codecs.video) && !browserSupportsCodec(codecs.video)) {
+        unsupported.push(`video codec ${codecs.video}`);
+      }
+      if (codecs.text && codecs.text === 'stpp.ttml.im1t') {
+        unsupported.push(`text codec ${codecs.text}`);
+      }
+      if (unsupported.length) {
+        variant.excludeUntil = Infinity;
+        this.logger_(`excluding ${variant.id} for unsupported: ${unsupported.join(', ')}`);
+      }
+    });
+  }
+  /**
+   * Exclude playlists that are known to be codec or
+   * stream-incompatible with the SourceBuffer configuration. For
+   * instance, Media Source Extensions would cause the video element to
+   * stall waiting for video data if you switched from a variant with
+   * video and audio to an audio-only one.
+   *
+   * @param {Object} media a media playlist compatible with the current
+   * set of SourceBuffers. Variants in the current main playlist that
+   * do not appear to have compatible codec or stream configurations
+   * will be excluded from the default playlist selection algorithm
+   * indefinitely.
+   * @private
+   */
+
+  excludeIncompatibleVariants_(codecString) {
+    const ids = [];
+    const playlists = this.main().playlists;
+    const codecs = unwrapCodecList(parseCodecs(codecString));
+    const codecCount_ = codecCount(codecs);
+    const videoDetails = codecs.video && parseCodecs(codecs.video)[0] || null;
+    const audioDetails = codecs.audio && parseCodecs(codecs.audio)[0] || null;
+    Object.keys(playlists).forEach(key => {
+      const variant = playlists[key]; // check if we already processed this playlist.
+      // or it if it is already excluded forever.
+
+      if (ids.indexOf(variant.id) !== -1 || variant.excludeUntil === Infinity) {
+        return;
+      }
+      ids.push(variant.id);
+      const exclusionReasons = []; // get codecs from the playlist for this variant
+
+      const variantCodecs = codecsForPlaylist(this.mainPlaylistLoader_.main, variant);
+      const variantCodecCount = codecCount(variantCodecs); // if no codecs are listed, we cannot determine that this
+      // variant is incompatible. Wait for mux.js to probe
+
+      if (!variantCodecs.audio && !variantCodecs.video) {
+        return;
+      } // TODO: we can support this by removing the
+      // old media source and creating a new one, but it will take some work.
+      // The number of streams cannot change
+
+      if (variantCodecCount !== codecCount_) {
+        exclusionReasons.push(`codec count "${variantCodecCount}" !== "${codecCount_}"`);
+      } // only exclude playlists by codec change, if codecs cannot switch
+      // during playback.
+
+      if (!this.sourceUpdater_.canChangeType()) {
+        const variantVideoDetails = variantCodecs.video && parseCodecs(variantCodecs.video)[0] || null;
+        const variantAudioDetails = variantCodecs.audio && parseCodecs(variantCodecs.audio)[0] || null; // the video codec cannot change
+
+        if (variantVideoDetails && videoDetails && variantVideoDetails.type.toLowerCase() !== videoDetails.type.toLowerCase()) {
+          exclusionReasons.push(`video codec "${variantVideoDetails.type}" !== "${videoDetails.type}"`);
+        } // the audio codec cannot change
+
+        if (variantAudioDetails && audioDetails && variantAudioDetails.type.toLowerCase() !== audioDetails.type.toLowerCase()) {
+          exclusionReasons.push(`audio codec "${variantAudioDetails.type}" !== "${audioDetails.type}"`);
+        }
+      }
+      if (exclusionReasons.length) {
+        variant.excludeUntil = Infinity;
+        this.logger_(`excluding ${variant.id}: ${exclusionReasons.join(' && ')}`);
+      }
+    });
+  }
+  updateAdCues_(media) {
+    let offset = 0;
+    const seekable = this.seekable();
+    if (seekable.length) {
+      offset = seekable.start(0);
+    }
+    updateAdCues(media, this.cueTagsTrack_, offset);
+  }
+  /**
+   * Calculates the desired forward buffer length based on current time
+   *
+   * @return {number} Desired forward buffer length in seconds
+   */
+
+  goalBufferLength() {
+    const currentTime = this.tech_.currentTime();
+    const initial = Config.GOAL_BUFFER_LENGTH;
+    const rate = Config.GOAL_BUFFER_LENGTH_RATE;
+    const max = Math.max(initial, Config.MAX_GOAL_BUFFER_LENGTH);
+    return Math.min(initial + currentTime * rate, max);
+  }
+  /**
+   * Calculates the desired buffer low water line based on current time
+   *
+   * @return {number} Desired buffer low water line in seconds
+   */
+
+  bufferLowWaterLine() {
+    const currentTime = this.tech_.currentTime();
+    const initial = Config.BUFFER_LOW_WATER_LINE;
+    const rate = Config.BUFFER_LOW_WATER_LINE_RATE;
+    const max = Math.max(initial, Config.MAX_BUFFER_LOW_WATER_LINE);
+    const newMax = Math.max(initial, Config.EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE);
+    return Math.min(initial + currentTime * rate, this.bufferBasedABR ? newMax : max);
+  }
+  bufferHighWaterLine() {
+    return Config.BUFFER_HIGH_WATER_LINE;
+  }
+  addDateRangesToTextTrack_(dateRanges) {
+    createMetadataTrackIfNotExists(this.inbandTextTracks_, 'com.apple.streaming', this.tech_);
+    addDateRangeMetadata({
+      inbandTextTracks: this.inbandTextTracks_,
+      dateRanges
+    });
+  }
+  addMetadataToTextTrack(dispatchType, metadataArray, videoDuration) {
+    const timestampOffset = this.sourceUpdater_.videoBuffer ? this.sourceUpdater_.videoTimestampOffset() : this.sourceUpdater_.audioTimestampOffset(); // There's potentially an issue where we could double add metadata if there's a muxed
+    // audio/video source with a metadata track, and an alt audio with a metadata track.
+    // However, this probably won't happen, and if it does it can be handled then.
+
+    createMetadataTrackIfNotExists(this.inbandTextTracks_, dispatchType, this.tech_);
+    addMetadata({
+      inbandTextTracks: this.inbandTextTracks_,
+      metadataArray,
+      timestampOffset,
+      videoDuration
+    });
+  }
+  /**
+   * Utility for getting the pathway or service location from an HLS or DASH playlist.
+   *
+   * @param {Object} playlist for getting pathway from.
+   * @return the pathway attribute of a playlist
+   */
+
+  pathwayAttribute_(playlist) {
+    return playlist.attributes['PATHWAY-ID'] || playlist.attributes.serviceLocation;
+  }
+  /**
+   * Initialize available pathways and apply the tag properties.
+   */
+
+  initContentSteeringController_() {
+    const main = this.main();
+    if (!main.contentSteering) {
+      return;
+    }
+    for (const playlist of main.playlists) {
+      this.contentSteeringController_.addAvailablePathway(this.pathwayAttribute_(playlist));
+    }
+    this.contentSteeringController_.assignTagProperties(main.uri, main.contentSteering); // request the steering manifest immediately if queryBeforeStart is set.
+
+    if (this.contentSteeringController_.queryBeforeStart) {
+      // When queryBeforeStart is true, initial request should omit steering parameters.
+      this.contentSteeringController_.requestSteeringManifest(true);
+      return;
+    } // otherwise start content steering after playback starts
+
+    this.tech_.one('canplay', () => {
+      this.contentSteeringController_.requestSteeringManifest();
+    });
+  }
+  /**
+   * Reset the content steering controller and re-init.
+   */
+
+  resetContentSteeringController_() {
+    this.contentSteeringController_.clearAvailablePathways();
+    this.contentSteeringController_.dispose();
+    this.initContentSteeringController_();
+  }
+  /**
+   * Attaches the listeners for content steering.
+   */
+
+  attachContentSteeringListeners_() {
+    this.contentSteeringController_.on('content-steering', this.excludeThenChangePathway_.bind(this));
+    if (this.sourceType_ === 'dash') {
+      this.mainPlaylistLoader_.on('loadedplaylist', () => {
+        const main = this.main(); // check if steering tag or pathways changed.
+
+        const didDashTagChange = this.contentSteeringController_.didDASHTagChange(main.uri, main.contentSteering);
+        const didPathwaysChange = () => {
+          const availablePathways = this.contentSteeringController_.getAvailablePathways();
+          const newPathways = [];
+          for (const playlist of main.playlists) {
+            const serviceLocation = playlist.attributes.serviceLocation;
+            if (serviceLocation) {
+              newPathways.push(serviceLocation);
+              if (!availablePathways.has(serviceLocation)) {
+                return true;
+              }
+            }
+          } // If we have no new serviceLocations and previously had availablePathways
+
+          if (!newPathways.length && availablePathways.size) {
+            return true;
+          }
+          return false;
+        };
+        if (didDashTagChange || didPathwaysChange()) {
+          this.resetContentSteeringController_();
+        }
+      });
+    }
+  }
+  /**
+   * Simple exclude and change playlist logic for content steering.
+   */
+
+  excludeThenChangePathway_() {
+    const currentPathway = this.contentSteeringController_.getPathway();
+    if (!currentPathway) {
+      return;
+    }
+    this.handlePathwayClones_();
+    const main = this.main();
+    const playlists = main.playlists;
+    const ids = new Set();
+    let didEnablePlaylists = false;
+    Object.keys(playlists).forEach(key => {
+      const variant = playlists[key];
+      const pathwayId = this.pathwayAttribute_(variant);
+      const differentPathwayId = pathwayId && currentPathway !== pathwayId;
+      const steeringExclusion = variant.excludeUntil === Infinity && variant.lastExcludeReason_ === 'content-steering';
+      if (steeringExclusion && !differentPathwayId) {
+        delete variant.excludeUntil;
+        delete variant.lastExcludeReason_;
+        didEnablePlaylists = true;
+      }
+      const noExcludeUntil = !variant.excludeUntil && variant.excludeUntil !== Infinity;
+      const shouldExclude = !ids.has(variant.id) && differentPathwayId && noExcludeUntil;
+      if (!shouldExclude) {
+        return;
+      }
+      ids.add(variant.id);
+      variant.excludeUntil = Infinity;
+      variant.lastExcludeReason_ = 'content-steering'; // TODO: kind of spammy, maybe move this.
+
+      this.logger_(`excluding ${variant.id} for ${variant.lastExcludeReason_}`);
+    });
+    if (this.contentSteeringController_.manifestType_ === 'DASH') {
+      Object.keys(this.mediaTypes_).forEach(key => {
+        const type = this.mediaTypes_[key];
+        if (type.activePlaylistLoader) {
+          const currentPlaylist = type.activePlaylistLoader.media_; // Check if the current media playlist matches the current CDN
+
+          if (currentPlaylist && currentPlaylist.attributes.serviceLocation !== currentPathway) {
+            didEnablePlaylists = true;
+          }
+        }
+      });
+    }
+    if (didEnablePlaylists) {
+      this.changeSegmentPathway_();
+    }
+  }
+  /**
+   * Add, update, or delete playlists and media groups for
+   * the pathway clones for HLS Content Steering.
+   *
+   * See https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/
+   *
+   * NOTE: Pathway cloning does not currently support the `PER_VARIANT_URIS` and
+   * `PER_RENDITION_URIS` as we do not handle `STABLE-VARIANT-ID` or
+   * `STABLE-RENDITION-ID` values.
+   */
+
+  handlePathwayClones_() {
+    const main = this.main();
+    const playlists = main.playlists;
+    const currentPathwayClones = this.contentSteeringController_.currentPathwayClones;
+    const nextPathwayClones = this.contentSteeringController_.nextPathwayClones;
+    const hasClones = currentPathwayClones && currentPathwayClones.size || nextPathwayClones && nextPathwayClones.size;
+    if (!hasClones) {
+      return;
+    }
+    for (const [id, clone] of currentPathwayClones.entries()) {
+      const newClone = nextPathwayClones.get(id); // Delete the old pathway clone.
+
+      if (!newClone) {
+        this.mainPlaylistLoader_.updateOrDeleteClone(clone);
+        this.contentSteeringController_.excludePathway(id);
+      }
+    }
+    for (const [id, clone] of nextPathwayClones.entries()) {
+      const oldClone = currentPathwayClones.get(id); // Create a new pathway if it is a new pathway clone object.
+
+      if (!oldClone) {
+        const playlistsToClone = playlists.filter(p => {
+          return p.attributes['PATHWAY-ID'] === clone['BASE-ID'];
+        });
+        playlistsToClone.forEach(p => {
+          this.mainPlaylistLoader_.addClonePathway(clone, p);
+        });
+        this.contentSteeringController_.addAvailablePathway(id);
+        continue;
+      } // There have not been changes to the pathway clone object, so skip.
+
+      if (this.equalPathwayClones_(oldClone, clone)) {
+        continue;
+      } // Update a preexisting cloned pathway.
+      // True is set for the update flag.
+
+      this.mainPlaylistLoader_.updateOrDeleteClone(clone, true);
+      this.contentSteeringController_.addAvailablePathway(id);
+    } // Deep copy contents of next to current pathways.
+
+    this.contentSteeringController_.currentPathwayClones = new Map(JSON.parse(JSON.stringify([...nextPathwayClones])));
+  }
+  /**
+   * Determines whether two pathway clone objects are equivalent.
+   *
+   * @param {Object} a The first pathway clone object.
+   * @param {Object} b The second pathway clone object.
+   * @return {boolean} True if the pathway clone objects are equal, false otherwise.
+   */
+
+  equalPathwayClones_(a, b) {
+    if (a['BASE-ID'] !== b['BASE-ID'] || a.ID !== b.ID || a['URI-REPLACEMENT'].HOST !== b['URI-REPLACEMENT'].HOST) {
+      return false;
+    }
+    const aParams = a['URI-REPLACEMENT'].PARAMS;
+    const bParams = b['URI-REPLACEMENT'].PARAMS; // We need to iterate through both lists of params because one could be
+    // missing a parameter that the other has.
+
+    for (const p in aParams) {
+      if (aParams[p] !== bParams[p]) {
+        return false;
+      }
+    }
+    for (const p in bParams) {
+      if (aParams[p] !== bParams[p]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  /**
+   * Changes the current playlists for audio, video and subtitles after a new pathway
+   * is chosen from content steering.
+   */
+
+  changeSegmentPathway_() {
+    const nextPlaylist = this.selectPlaylist();
+    this.pauseLoading(); // Switch audio and text track playlists if necessary in DASH
+
+    if (this.contentSteeringController_.manifestType_ === 'DASH') {
+      this.switchMediaForDASHContentSteering_();
+    }
+    this.switchMedia_(nextPlaylist, 'content-steering');
+  }
+  /**
+   * Iterates through playlists and check their keyId set and compare with the
+   * keyStatusMap, only enable playlists that have a usable key. If the playlist
+   * has no keyId leave it enabled by default.
+   */
+
+  excludeNonUsablePlaylistsByKeyId_() {
+    if (!this.mainPlaylistLoader_ || !this.mainPlaylistLoader_.main) {
+      return;
+    }
+    let nonUsableKeyStatusCount = 0;
+    const NON_USABLE = 'non-usable';
+    this.mainPlaylistLoader_.main.playlists.forEach(playlist => {
+      const keyIdSet = this.mainPlaylistLoader_.getKeyIdSet(playlist); // If the playlist doesn't have keyIDs lets not exclude it.
+
+      if (!keyIdSet || !keyIdSet.size) {
+        return;
+      }
+      keyIdSet.forEach(key => {
+        const USABLE = 'usable';
+        const hasUsableKeyStatus = this.keyStatusMap_.has(key) && this.keyStatusMap_.get(key) === USABLE;
+        const nonUsableExclusion = playlist.lastExcludeReason_ === NON_USABLE && playlist.excludeUntil === Infinity;
+        if (!hasUsableKeyStatus) {
+          // Only exclude playlists that haven't already been excluded as non-usable.
+          if (playlist.excludeUntil !== Infinity && playlist.lastExcludeReason_ !== NON_USABLE) {
+            playlist.excludeUntil = Infinity;
+            playlist.lastExcludeReason_ = NON_USABLE;
+            this.logger_(`excluding playlist ${playlist.id} because the key ID ${key} doesn't exist in the keyStatusMap or is not ${USABLE}`);
+          } // count all nonUsableKeyStatus
+
+          nonUsableKeyStatusCount++;
+        } else if (hasUsableKeyStatus && nonUsableExclusion) {
+          delete playlist.excludeUntil;
+          delete playlist.lastExcludeReason_;
+          this.logger_(`enabling playlist ${playlist.id} because key ID ${key} is ${USABLE}`);
+        }
+      });
+    }); // If for whatever reason every playlist has a non usable key status. Lets try re-including the SD renditions as a failsafe.
+
+    if (nonUsableKeyStatusCount >= this.mainPlaylistLoader_.main.playlists.length) {
+      this.mainPlaylistLoader_.main.playlists.forEach(playlist => {
+        const isNonHD = playlist && playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.height < 720;
+        const excludedForNonUsableKey = playlist.excludeUntil === Infinity && playlist.lastExcludeReason_ === NON_USABLE;
+        if (isNonHD && excludedForNonUsableKey) {
+          // Only delete the excludeUntil so we don't try and re-exclude these playlists.
+          delete playlist.excludeUntil;
+          videojs.log.warn(`enabling non-HD playlist ${playlist.id} because all playlists were excluded due to ${NON_USABLE} key IDs`);
+        }
+      });
+    }
+  }
+  /**
+   * Adds a keystatus to the keystatus map, tries to convert to string if necessary.
+   *
+   * @param {any} keyId the keyId to add a status for
+   * @param {string} status the status of the keyId
+   */
+
+  addKeyStatus_(keyId, status) {
+    const isString = typeof keyId === 'string';
+    const keyIdHexString = isString ? keyId : bufferToHexString(keyId);
+    const formattedKeyIdString = keyIdHexString.slice(0, 32).toLowerCase();
+    this.logger_(`KeyStatus '${status}' with key ID ${formattedKeyIdString} added to the keyStatusMap`);
+    this.keyStatusMap_.set(formattedKeyIdString, status);
+  }
+  /**
+   * Utility function for adding key status to the keyStatusMap and filtering usable encrypted playlists.
+   *
+   * @param {any} keyId the keyId from the keystatuschange event
+   * @param {string} status the key status string
+   */
+
+  updatePlaylistByKeyStatus(keyId, status) {
+    this.addKeyStatus_(keyId, status);
+    if (!this.waitingForFastQualityPlaylistReceived_) {
+      this.excludeNonUsableThenChangePlaylist_();
+    } // Listen to loadedplaylist with a single listener and check for new contentProtection elements when a playlist is updated.
+
+    this.mainPlaylistLoader_.off('loadedplaylist', this.excludeNonUsableThenChangePlaylist_.bind(this));
+    this.mainPlaylistLoader_.on('loadedplaylist', this.excludeNonUsableThenChangePlaylist_.bind(this));
+  }
+  excludeNonUsableThenChangePlaylist_() {
+    this.excludeNonUsablePlaylistsByKeyId_();
+    this.fastQualityChange_();
+  }
+}
+
+/**
+ * Returns a function that acts as the Enable/disable playlist function.
+ *
+ * @param {PlaylistLoader} loader - The main playlist loader
+ * @param {string} playlistID - id of the playlist
+ * @param {Function} changePlaylistFn - A function to be called after a
+ * playlist's enabled-state has been changed. Will NOT be called if a
+ * playlist's enabled-state is unchanged
+ * @param {boolean=} enable - Value to set the playlist enabled-state to
+ * or if undefined returns the current enabled-state for the playlist
+ * @return {Function} Function for setting/getting enabled
+ */
+
+const enableFunction = (loader, playlistID, changePlaylistFn) => enable => {
+  const playlist = loader.main.playlists[playlistID];
+  const incompatible = isIncompatible(playlist);
+  const currentlyEnabled = isEnabled(playlist);
+  if (typeof enable === 'undefined') {
+    return currentlyEnabled;
+  }
+  if (enable) {
+    delete playlist.disabled;
+  } else {
+    playlist.disabled = true;
+  }
+  if (enable !== currentlyEnabled && !incompatible) {
+    // Ensure the outside world knows about our changes
+    changePlaylistFn(playlist);
+    if (enable) {
+      loader.trigger('renditionenabled');
+    } else {
+      loader.trigger('renditiondisabled');
+    }
+  }
+  return enable;
+};
+/**
+ * The representation object encapsulates the publicly visible information
+ * in a media playlist along with a setter/getter-type function (enabled)
+ * for changing the enabled-state of a particular playlist entry
+ *
+ * @class Representation
+ */
+
+class Representation {
+  constructor(vhsHandler, playlist, id) {
+    const {
+      playlistController_: pc
+    } = vhsHandler;
+    const qualityChangeFunction = pc.fastQualityChange_.bind(pc); // some playlist attributes are optional
+
+    if (playlist.attributes) {
+      const resolution = playlist.attributes.RESOLUTION;
+      this.width = resolution && resolution.width;
+      this.height = resolution && resolution.height;
+      this.bandwidth = playlist.attributes.BANDWIDTH;
+      this.frameRate = playlist.attributes['FRAME-RATE'];
+    }
+    this.codecs = codecsForPlaylist(pc.main(), playlist);
+    this.playlist = playlist; // The id is simply the ordinality of the media playlist
+    // within the main playlist
+
+    this.id = id; // Partially-apply the enableFunction to create a playlist-
+    // specific variant
+
+    this.enabled = enableFunction(vhsHandler.playlists, playlist.id, qualityChangeFunction);
+  }
+}
+/**
+ * A mixin function that adds the `representations` api to an instance
+ * of the VhsHandler class
+ *
+ * @param {VhsHandler} vhsHandler - An instance of VhsHandler to add the
+ * representation API into
+ */
+
+const renditionSelectionMixin = function (vhsHandler) {
+  // Add a single API-specific function to the VhsHandler instance
+  vhsHandler.representations = () => {
+    const main = vhsHandler.playlistController_.main();
+    const playlists = isAudioOnly(main) ? vhsHandler.playlistController_.getAudioTrackPlaylists_() : main.playlists;
+    if (!playlists) {
+      return [];
+    }
+    return playlists.filter(media => !isIncompatible(media)).map((e, i) => new Representation(vhsHandler, e, e.id));
+  };
+};
+
+/**
+ * @file playback-watcher.js
+ *
+ * Playback starts, and now my watch begins. It shall not end until my death. I shall
+ * take no wait, hold no uncleared timeouts, father no bad seeks. I shall wear no crowns
+ * and win no glory. I shall live and die at my post. I am the corrector of the underflow.
+ * I am the watcher of gaps. I am the shield that guards the realms of seekable. I pledge
+ * my life and honor to the Playback Watch, for this Player and all the Players to come.
+ */
+
+const timerCancelEvents = ['seeking', 'seeked', 'pause', 'playing', 'error'];
+/**
+ * @class PlaybackWatcher
+ */
+
+class PlaybackWatcher {
+  /**
+   * Represents an PlaybackWatcher object.
+   *
+   * @class
+   * @param {Object} options an object that includes the tech and settings
+   */
+  constructor(options) {
+    this.playlistController_ = options.playlistController;
+    this.tech_ = options.tech;
+    this.seekable = options.seekable;
+    this.allowSeeksWithinUnsafeLiveWindow = options.allowSeeksWithinUnsafeLiveWindow;
+    this.liveRangeSafeTimeDelta = options.liveRangeSafeTimeDelta;
+    this.media = options.media;
+    this.consecutiveUpdates = 0;
+    this.lastRecordedTime = null;
+    this.checkCurrentTimeTimeout_ = null;
+    this.logger_ = logger('PlaybackWatcher');
+    this.logger_('initialize');
+    const playHandler = () => this.monitorCurrentTime_();
+    const canPlayHandler = () => this.monitorCurrentTime_();
+    const waitingHandler = () => this.techWaiting_();
+    const cancelTimerHandler = () => this.resetTimeUpdate_();
+    const pc = this.playlistController_;
+    const loaderTypes = ['main', 'subtitle', 'audio'];
+    const loaderChecks = {};
+    loaderTypes.forEach(type => {
+      loaderChecks[type] = {
+        reset: () => this.resetSegmentDownloads_(type),
+        updateend: () => this.checkSegmentDownloads_(type)
+      };
+      pc[`${type}SegmentLoader_`].on('appendsdone', loaderChecks[type].updateend); // If a rendition switch happens during a playback stall where the buffer
+      // isn't changing we want to reset. We cannot assume that the new rendition
+      // will also be stalled, until after new appends.
+
+      pc[`${type}SegmentLoader_`].on('playlistupdate', loaderChecks[type].reset); // Playback stalls should not be detected right after seeking.
+      // This prevents one segment playlists (single vtt or single segment content)
+      // from being detected as stalling. As the buffer will not change in those cases, since
+      // the buffer is the entire video duration.
+
+      this.tech_.on(['seeked', 'seeking'], loaderChecks[type].reset);
+    });
+    /**
+     * We check if a seek was into a gap through the following steps:
+     * 1. We get a seeking event and we do not get a seeked event. This means that
+     *    a seek was attempted but not completed.
+     * 2. We run `fixesBadSeeks_` on segment loader appends. This means that we already
+     *    removed everything from our buffer and appended a segment, and should be ready
+     *    to check for gaps.
+     */
+
+    const setSeekingHandlers = fn => {
+      ['main', 'audio'].forEach(type => {
+        pc[`${type}SegmentLoader_`][fn]('appended', this.seekingAppendCheck_);
+      });
+    };
+    this.seekingAppendCheck_ = () => {
+      if (this.fixesBadSeeks_()) {
+        this.consecutiveUpdates = 0;
+        this.lastRecordedTime = this.tech_.currentTime();
+        setSeekingHandlers('off');
+      }
+    };
+    this.clearSeekingAppendCheck_ = () => setSeekingHandlers('off');
+    this.watchForBadSeeking_ = () => {
+      this.clearSeekingAppendCheck_();
+      setSeekingHandlers('on');
+    };
+    this.tech_.on('seeked', this.clearSeekingAppendCheck_);
+    this.tech_.on('seeking', this.watchForBadSeeking_);
+    this.tech_.on('waiting', waitingHandler);
+    this.tech_.on(timerCancelEvents, cancelTimerHandler);
+    this.tech_.on('canplay', canPlayHandler);
+    /*
+      An edge case exists that results in gaps not being skipped when they exist at the beginning of a stream. This case
+      is surfaced in one of two ways:
+       1)  The `waiting` event is fired before the player has buffered content, making it impossible
+          to find or skip the gap. The `waiting` event is followed by a `play` event. On first play
+          we can check if playback is stalled due to a gap, and skip the gap if necessary.
+      2)  A source with a gap at the beginning of the stream is loaded programatically while the player
+          is in a playing state. To catch this case, it's important that our one-time play listener is setup
+          even if the player is in a playing state
+    */
+
+    this.tech_.one('play', playHandler); // Define the dispose function to clean up our events
+
+    this.dispose = () => {
+      this.clearSeekingAppendCheck_();
+      this.logger_('dispose');
+      this.tech_.off('waiting', waitingHandler);
+      this.tech_.off(timerCancelEvents, cancelTimerHandler);
+      this.tech_.off('canplay', canPlayHandler);
+      this.tech_.off('play', playHandler);
+      this.tech_.off('seeking', this.watchForBadSeeking_);
+      this.tech_.off('seeked', this.clearSeekingAppendCheck_);
+      loaderTypes.forEach(type => {
+        pc[`${type}SegmentLoader_`].off('appendsdone', loaderChecks[type].updateend);
+        pc[`${type}SegmentLoader_`].off('playlistupdate', loaderChecks[type].reset);
+        this.tech_.off(['seeked', 'seeking'], loaderChecks[type].reset);
+      });
+      if (this.checkCurrentTimeTimeout_) {
+        window$1.clearTimeout(this.checkCurrentTimeTimeout_);
+      }
+      this.resetTimeUpdate_();
+    };
+  }
+  /**
+   * Periodically check current time to see if playback stopped
+   *
+   * @private
+   */
+
+  monitorCurrentTime_() {
+    this.checkCurrentTime_();
+    if (this.checkCurrentTimeTimeout_) {
+      window$1.clearTimeout(this.checkCurrentTimeTimeout_);
+    } // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
+
+    this.checkCurrentTimeTimeout_ = window$1.setTimeout(this.monitorCurrentTime_.bind(this), 250);
+  }
+  /**
+   * Reset stalled download stats for a specific type of loader
+   *
+   * @param {string} type
+   *        The segment loader type to check.
+   *
+   * @listens SegmentLoader#playlistupdate
+   * @listens Tech#seeking
+   * @listens Tech#seeked
+   */
+
+  resetSegmentDownloads_(type) {
+    const loader = this.playlistController_[`${type}SegmentLoader_`];
+    if (this[`${type}StalledDownloads_`] > 0) {
+      this.logger_(`resetting possible stalled download count for ${type} loader`);
+    }
+    this[`${type}StalledDownloads_`] = 0;
+    this[`${type}Buffered_`] = loader.buffered_();
+  }
+  /**
+   * Checks on every segment `appendsdone` to see
+   * if segment appends are making progress. If they are not
+   * and we are still downloading bytes. We exclude the playlist.
+   *
+   * @param {string} type
+   *        The segment loader type to check.
+   *
+   * @listens SegmentLoader#appendsdone
+   */
+
+  checkSegmentDownloads_(type) {
+    const pc = this.playlistController_;
+    const loader = pc[`${type}SegmentLoader_`];
+    const buffered = loader.buffered_();
+    const isBufferedDifferent = isRangeDifferent(this[`${type}Buffered_`], buffered);
+    this[`${type}Buffered_`] = buffered; // if another watcher is going to fix the issue or
+    // the buffered value for this loader changed
+    // appends are working
+
+    if (isBufferedDifferent) {
+      this.resetSegmentDownloads_(type);
+      return;
+    }
+    this[`${type}StalledDownloads_`]++;
+    this.logger_(`found #${this[`${type}StalledDownloads_`]} ${type} appends that did not increase buffer (possible stalled download)`, {
+      playlistId: loader.playlist_ && loader.playlist_.id,
+      buffered: timeRangesToArray(buffered)
+    }); // after 10 possibly stalled appends with no reset, exclude
+
+    if (this[`${type}StalledDownloads_`] < 10) {
+      return;
+    }
+    this.logger_(`${type} loader stalled download exclusion`);
+    this.resetSegmentDownloads_(type);
+    this.tech_.trigger({
+      type: 'usage',
+      name: `vhs-${type}-download-exclusion`
+    });
+    if (type === 'subtitle') {
+      return;
+    } // TODO: should we exclude audio tracks rather than main tracks
+    // when type is audio?
+
+    pc.excludePlaylist({
+      error: {
+        message: `Excessive ${type} segment downloading detected.`
+      },
+      playlistExclusionDuration: Infinity
+    });
+  }
+  /**
+   * The purpose of this function is to emulate the "waiting" event on
+   * browsers that do not emit it when they are waiting for more
+   * data to continue playback
+   *
+   * @private
+   */
+
+  checkCurrentTime_() {
+    if (this.tech_.paused() || this.tech_.seeking()) {
+      return;
+    }
+    const currentTime = this.tech_.currentTime();
+    const buffered = this.tech_.buffered();
+    if (this.lastRecordedTime === currentTime && (!buffered.length || currentTime + SAFE_TIME_DELTA >= buffered.end(buffered.length - 1))) {
+      // If current time is at the end of the final buffered region, then any playback
+      // stall is most likely caused by buffering in a low bandwidth environment. The tech
+      // should fire a `waiting` event in this scenario, but due to browser and tech
+      // inconsistencies. Calling `techWaiting_` here allows us to simulate
+      // responding to a native `waiting` event when the tech fails to emit one.
+      return this.techWaiting_();
+    }
+    if (this.consecutiveUpdates >= 5 && currentTime === this.lastRecordedTime) {
+      this.consecutiveUpdates++;
+      this.waiting_();
+    } else if (currentTime === this.lastRecordedTime) {
+      this.consecutiveUpdates++;
+    } else {
+      this.consecutiveUpdates = 0;
+      this.lastRecordedTime = currentTime;
+    }
+  }
+  /**
+   * Resets the 'timeupdate' mechanism designed to detect that we are stalled
+   *
+   * @private
+   */
+
+  resetTimeUpdate_() {
+    this.consecutiveUpdates = 0;
+  }
+  /**
+   * Fixes situations where there's a bad seek
+   *
+   * @return {boolean} whether an action was taken to fix the seek
+   * @private
+   */
+
+  fixesBadSeeks_() {
+    const seeking = this.tech_.seeking();
+    if (!seeking) {
+      return false;
+    } // TODO: It's possible that these seekable checks should be moved out of this function
+    // and into a function that runs on seekablechange. It's also possible that we only need
+    // afterSeekableWindow as the buffered check at the bottom is good enough to handle before
+    // seekable range.
+
+    const seekable = this.seekable();
+    const currentTime = this.tech_.currentTime();
+    const isAfterSeekableRange = this.afterSeekableWindow_(seekable, currentTime, this.media(), this.allowSeeksWithinUnsafeLiveWindow);
+    let seekTo;
+    if (isAfterSeekableRange) {
+      const seekableEnd = seekable.end(seekable.length - 1); // sync to live point (if VOD, our seekable was updated and we're simply adjusting)
+
+      seekTo = seekableEnd;
+    }
+    if (this.beforeSeekableWindow_(seekable, currentTime)) {
+      const seekableStart = seekable.start(0); // sync to the beginning of the live window
+      // provide a buffer of .1 seconds to handle rounding/imprecise numbers
+
+      seekTo = seekableStart + (
+      // if the playlist is too short and the seekable range is an exact time (can
+      // happen in live with a 3 segment playlist), then don't use a time delta
+      seekableStart === seekable.end(0) ? 0 : SAFE_TIME_DELTA);
+    }
+    if (typeof seekTo !== 'undefined') {
+      this.logger_(`Trying to seek outside of seekable at time ${currentTime} with ` + `seekable range ${printableRange(seekable)}. Seeking to ` + `${seekTo}.`);
+      this.tech_.setCurrentTime(seekTo);
+      return true;
+    }
+    const sourceUpdater = this.playlistController_.sourceUpdater_;
+    const buffered = this.tech_.buffered();
+    const audioBuffered = sourceUpdater.audioBuffer ? sourceUpdater.audioBuffered() : null;
+    const videoBuffered = sourceUpdater.videoBuffer ? sourceUpdater.videoBuffered() : null;
+    const media = this.media(); // verify that at least two segment durations or one part duration have been
+    // appended before checking for a gap.
+
+    const minAppendedDuration = media.partTargetDuration ? media.partTargetDuration : (media.targetDuration - TIME_FUDGE_FACTOR) * 2; // verify that at least two segment durations have been
+    // appended before checking for a gap.
+
+    const bufferedToCheck = [audioBuffered, videoBuffered];
+    for (let i = 0; i < bufferedToCheck.length; i++) {
+      // skip null buffered
+      if (!bufferedToCheck[i]) {
+        continue;
+      }
+      const timeAhead = timeAheadOf(bufferedToCheck[i], currentTime); // if we are less than two video/audio segment durations or one part
+      // duration behind we haven't appended enough to call this a bad seek.
+
+      if (timeAhead < minAppendedDuration) {
+        return false;
+      }
+    }
+    const nextRange = findNextRange(buffered, currentTime); // we have appended enough content, but we don't have anything buffered
+    // to seek over the gap
+
+    if (nextRange.length === 0) {
+      return false;
+    }
+    seekTo = nextRange.start(0) + SAFE_TIME_DELTA;
+    this.logger_(`Buffered region starts (${nextRange.start(0)}) ` + ` just beyond seek point (${currentTime}). Seeking to ${seekTo}.`);
+    this.tech_.setCurrentTime(seekTo);
+    return true;
+  }
+  /**
+   * Handler for situations when we determine the player is waiting.
+   *
+   * @private
+   */
+
+  waiting_() {
+    if (this.techWaiting_()) {
+      return;
+    } // All tech waiting checks failed. Use last resort correction
+
+    const currentTime = this.tech_.currentTime();
+    const buffered = this.tech_.buffered();
+    const currentRange = findRange(buffered, currentTime); // Sometimes the player can stall for unknown reasons within a contiguous buffered
+    // region with no indication that anything is amiss (seen in Firefox). Seeking to
+    // currentTime is usually enough to kickstart the player. This checks that the player
+    // is currently within a buffered region before attempting a corrective seek.
+    // Chrome does not appear to continue `timeupdate` events after a `waiting` event
+    // until there is ~ 3 seconds of forward buffer available. PlaybackWatcher should also
+    // make sure there is ~3 seconds of forward buffer before taking any corrective action
+    // to avoid triggering an `unknownwaiting` event when the network is slow.
+
+    if (currentRange.length && currentTime + 3 <= currentRange.end(0)) {
+      this.resetTimeUpdate_();
+      this.tech_.setCurrentTime(currentTime);
+      this.logger_(`Stopped at ${currentTime} while inside a buffered region ` + `[${currentRange.start(0)} -> ${currentRange.end(0)}]. Attempting to resume ` + 'playback by seeking to the current time.'); // unknown waiting corrections may be useful for monitoring QoS
+
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-unknown-waiting'
+      });
+      return;
+    }
+  }
+  /**
+   * Handler for situations when the tech fires a `waiting` event
+   *
+   * @return {boolean}
+   *         True if an action (or none) was needed to correct the waiting. False if no
+   *         checks passed
+   * @private
+   */
+
+  techWaiting_() {
+    const seekable = this.seekable();
+    const currentTime = this.tech_.currentTime();
+    if (this.tech_.seeking()) {
+      // Tech is seeking or already waiting on another action, no action needed
+      return true;
+    }
+    if (this.beforeSeekableWindow_(seekable, currentTime)) {
+      const livePoint = seekable.end(seekable.length - 1);
+      this.logger_(`Fell out of live window at time ${currentTime}. Seeking to ` + `live point (seekable end) ${livePoint}`);
+      this.resetTimeUpdate_();
+      this.tech_.setCurrentTime(livePoint); // live window resyncs may be useful for monitoring QoS
+
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-live-resync'
+      });
+      return true;
+    }
+    const sourceUpdater = this.tech_.vhs.playlistController_.sourceUpdater_;
+    const buffered = this.tech_.buffered();
+    const videoUnderflow = this.videoUnderflow_({
+      audioBuffered: sourceUpdater.audioBuffered(),
+      videoBuffered: sourceUpdater.videoBuffered(),
+      currentTime
+    });
+    if (videoUnderflow) {
+      // Even though the video underflowed and was stuck in a gap, the audio overplayed
+      // the gap, leading currentTime into a buffered range. Seeking to currentTime
+      // allows the video to catch up to the audio position without losing any audio
+      // (only suffering ~3 seconds of frozen video and a pause in audio playback).
+      this.resetTimeUpdate_();
+      this.tech_.setCurrentTime(currentTime); // video underflow may be useful for monitoring QoS
+
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-video-underflow'
+      });
+      return true;
+    }
+    const nextRange = findNextRange(buffered, currentTime); // check for gap
+
+    if (nextRange.length > 0) {
+      this.logger_(`Stopped at ${currentTime} and seeking to ${nextRange.start(0)}`);
+      this.resetTimeUpdate_();
+      this.skipTheGap_(currentTime);
+      return true;
+    } // All checks failed. Returning false to indicate failure to correct waiting
+
+    return false;
+  }
+  afterSeekableWindow_(seekable, currentTime, playlist, allowSeeksWithinUnsafeLiveWindow = false) {
+    if (!seekable.length) {
+      // we can't make a solid case if there's no seekable, default to false
+      return false;
+    }
+    let allowedEnd = seekable.end(seekable.length - 1) + SAFE_TIME_DELTA;
+    const isLive = !playlist.endList;
+    const isLLHLS = typeof playlist.partTargetDuration === 'number';
+    if (isLive && (isLLHLS || allowSeeksWithinUnsafeLiveWindow)) {
+      allowedEnd = seekable.end(seekable.length - 1) + playlist.targetDuration * 3;
+    }
+    if (currentTime > allowedEnd) {
+      return true;
+    }
+    return false;
+  }
+  beforeSeekableWindow_(seekable, currentTime) {
+    if (seekable.length &&
+    // can't fall before 0 and 0 seekable start identifies VOD stream
+    seekable.start(0) > 0 && currentTime < seekable.start(0) - this.liveRangeSafeTimeDelta) {
+      return true;
+    }
+    return false;
+  }
+  videoUnderflow_({
+    videoBuffered,
+    audioBuffered,
+    currentTime
+  }) {
+    // audio only content will not have video underflow :)
+    if (!videoBuffered) {
+      return;
+    }
+    let gap; // find a gap in demuxed content.
+
+    if (videoBuffered.length && audioBuffered.length) {
+      // in Chrome audio will continue to play for ~3s when we run out of video
+      // so we have to check that the video buffer did have some buffer in the
+      // past.
+      const lastVideoRange = findRange(videoBuffered, currentTime - 3);
+      const videoRange = findRange(videoBuffered, currentTime);
+      const audioRange = findRange(audioBuffered, currentTime);
+      if (audioRange.length && !videoRange.length && lastVideoRange.length) {
+        gap = {
+          start: lastVideoRange.end(0),
+          end: audioRange.end(0)
+        };
+      } // find a gap in muxed content.
+    } else {
+      const nextRange = findNextRange(videoBuffered, currentTime); // Even if there is no available next range, there is still a possibility we are
+      // stuck in a gap due to video underflow.
+
+      if (!nextRange.length) {
+        gap = this.gapFromVideoUnderflow_(videoBuffered, currentTime);
+      }
+    }
+    if (gap) {
+      this.logger_(`Encountered a gap in video from ${gap.start} to ${gap.end}. ` + `Seeking to current time ${currentTime}`);
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Timer callback. If playback still has not proceeded, then we seek
+   * to the start of the next buffered region.
+   *
+   * @private
+   */
+
+  skipTheGap_(scheduledCurrentTime) {
+    const buffered = this.tech_.buffered();
+    const currentTime = this.tech_.currentTime();
+    const nextRange = findNextRange(buffered, currentTime);
+    this.resetTimeUpdate_();
+    if (nextRange.length === 0 || currentTime !== scheduledCurrentTime) {
+      return;
+    }
+    this.logger_('skipTheGap_:', 'currentTime:', currentTime, 'scheduled currentTime:', scheduledCurrentTime, 'nextRange start:', nextRange.start(0)); // only seek if we still have not played
+
+    this.tech_.setCurrentTime(nextRange.start(0) + TIME_FUDGE_FACTOR);
+    this.tech_.trigger({
+      type: 'usage',
+      name: 'vhs-gap-skip'
+    });
+  }
+  gapFromVideoUnderflow_(buffered, currentTime) {
+    // At least in Chrome, if there is a gap in the video buffer, the audio will continue
+    // playing for ~3 seconds after the video gap starts. This is done to account for
+    // video buffer underflow/underrun (note that this is not done when there is audio
+    // buffer underflow/underrun -- in that case the video will stop as soon as it
+    // encounters the gap, as audio stalls are more noticeable/jarring to a user than
+    // video stalls). The player's time will reflect the playthrough of audio, so the
+    // time will appear as if we are in a buffered region, even if we are stuck in a
+    // "gap."
+    //
+    // Example:
+    // video buffer:   0 => 10.1, 10.2 => 20
+    // audio buffer:   0 => 20
+    // overall buffer: 0 => 10.1, 10.2 => 20
+    // current time: 13
+    //
+    // Chrome's video froze at 10 seconds, where the video buffer encountered the gap,
+    // however, the audio continued playing until it reached ~3 seconds past the gap
+    // (13 seconds), at which point it stops as well. Since current time is past the
+    // gap, findNextRange will return no ranges.
+    //
+    // To check for this issue, we see if there is a gap that starts somewhere within
+    // a 3 second range (3 seconds +/- 1 second) back from our current time.
+    const gaps = findGaps(buffered);
+    for (let i = 0; i < gaps.length; i++) {
+      const start = gaps.start(i);
+      const end = gaps.end(i); // gap is starts no more than 4 seconds back
+
+      if (currentTime - start < 4 && currentTime - start > 2) {
+        return {
+          start,
+          end
+        };
+      }
+    }
+    return null;
+  }
+}
+const defaultOptions = {
+  errorInterval: 30,
+  getSource(next) {
+    const tech = this.tech({
+      IWillNotUseThisInPlugins: true
+    });
+    const sourceObj = tech.currentSource_ || this.currentSource();
+    return next(sourceObj);
+  }
+};
+/**
+ * Main entry point for the plugin
+ *
+ * @param {Player} player a reference to a videojs Player instance
+ * @param {Object} [options] an object with plugin options
+ * @private
+ */
+
+const initPlugin = function (player, options) {
+  let lastCalled = 0;
+  let seekTo = 0;
+  const localOptions = merge(defaultOptions, options);
+  player.ready(() => {
+    player.trigger({
+      type: 'usage',
+      name: 'vhs-error-reload-initialized'
+    });
+  });
+  /**
+   * Player modifications to perform that must wait until `loadedmetadata`
+   * has been triggered
+   *
+   * @private
+   */
+
+  const loadedMetadataHandler = function () {
+    if (seekTo) {
+      player.currentTime(seekTo);
+    }
+  };
+  /**
+   * Set the source on the player element, play, and seek if necessary
+   *
+   * @param {Object} sourceObj An object specifying the source url and mime-type to play
+   * @private
+   */
+
+  const setSource = function (sourceObj) {
+    if (sourceObj === null || sourceObj === undefined) {
+      return;
+    }
+    seekTo = player.duration() !== Infinity && player.currentTime() || 0;
+    player.one('loadedmetadata', loadedMetadataHandler);
+    player.src(sourceObj);
+    player.trigger({
+      type: 'usage',
+      name: 'vhs-error-reload'
+    });
+    player.play();
+  };
+  /**
+   * Attempt to get a source from either the built-in getSource function
+   * or a custom function provided via the options
+   *
+   * @private
+   */
+
+  const errorHandler = function () {
+    // Do not attempt to reload the source if a source-reload occurred before
+    // 'errorInterval' time has elapsed since the last source-reload
+    if (Date.now() - lastCalled < localOptions.errorInterval * 1000) {
+      player.trigger({
+        type: 'usage',
+        name: 'vhs-error-reload-canceled'
+      });
+      return;
+    }
+    if (!localOptions.getSource || typeof localOptions.getSource !== 'function') {
+      videojs.log.error('ERROR: reloadSourceOnError - The option getSource must be a function!');
+      return;
+    }
+    lastCalled = Date.now();
+    return localOptions.getSource.call(player, setSource);
+  };
+  /**
+   * Unbind any event handlers that were bound by the plugin
+   *
+   * @private
+   */
+
+  const cleanupEvents = function () {
+    player.off('loadedmetadata', loadedMetadataHandler);
+    player.off('error', errorHandler);
+    player.off('dispose', cleanupEvents);
+  };
+  /**
+   * Cleanup before re-initializing the plugin
+   *
+   * @param {Object} [newOptions] an object with plugin options
+   * @private
+   */
+
+  const reinitPlugin = function (newOptions) {
+    cleanupEvents();
+    initPlugin(player, newOptions);
+  };
+  player.on('error', errorHandler);
+  player.on('dispose', cleanupEvents); // Overwrite the plugin function so that we can correctly cleanup before
+  // initializing the plugin
+
+  player.reloadSourceOnError = reinitPlugin;
+};
+/**
+ * Reload the source when an error is detected as long as there
+ * wasn't an error previously within the last 30 seconds
+ *
+ * @param {Object} [options] an object with plugin options
+ */
+
+const reloadSourceOnError = function (options) {
+  initPlugin(this, options);
+};
+var version$4 = "3.12.1";
+var version$3 = "7.0.3";
+var version$2 = "1.3.0";
+var version$1 = "7.1.0";
+var version = "4.0.1";
+
+/**
+ * @file videojs-http-streaming.js
+ *
+ * The main file for the VHS project.
+ * License: https://github.com/videojs/videojs-http-streaming/blob/main/LICENSE
+ */
+const Vhs = {
+  PlaylistLoader,
+  Playlist,
+  utils,
+  STANDARD_PLAYLIST_SELECTOR: lastBandwidthSelector,
+  INITIAL_PLAYLIST_SELECTOR: lowestBitrateCompatibleVariantSelector,
+  lastBandwidthSelector,
+  movingAverageBandwidthSelector,
+  comparePlaylistBandwidth,
+  comparePlaylistResolution,
+  xhr: xhrFactory()
+}; // Define getter/setters for config properties
+
+Object.keys(Config).forEach(prop => {
+  Object.defineProperty(Vhs, prop, {
+    get() {
+      videojs.log.warn(`using Vhs.${prop} is UNSAFE be sure you know what you are doing`);
+      return Config[prop];
+    },
+    set(value) {
+      videojs.log.warn(`using Vhs.${prop} is UNSAFE be sure you know what you are doing`);
+      if (typeof value !== 'number' || value < 0) {
+        videojs.log.warn(`value of Vhs.${prop} must be greater than or equal to 0`);
+        return;
+      }
+      Config[prop] = value;
+    }
+  });
+});
+const LOCAL_STORAGE_KEY = 'videojs-vhs';
+/**
+ * Updates the selectedIndex of the QualityLevelList when a mediachange happens in vhs.
+ *
+ * @param {QualityLevelList} qualityLevels The QualityLevelList to update.
+ * @param {PlaylistLoader} playlistLoader PlaylistLoader containing the new media info.
+ * @function handleVhsMediaChange
+ */
+
+const handleVhsMediaChange = function (qualityLevels, playlistLoader) {
+  const newPlaylist = playlistLoader.media();
+  let selectedIndex = -1;
+  for (let i = 0; i < qualityLevels.length; i++) {
+    if (qualityLevels[i].id === newPlaylist.id) {
+      selectedIndex = i;
+      break;
+    }
+  }
+  qualityLevels.selectedIndex_ = selectedIndex;
+  qualityLevels.trigger({
+    selectedIndex,
+    type: 'change'
+  });
+};
+/**
+ * Adds quality levels to list once playlist metadata is available
+ *
+ * @param {QualityLevelList} qualityLevels The QualityLevelList to attach events to.
+ * @param {Object} vhs Vhs object to listen to for media events.
+ * @function handleVhsLoadedMetadata
+ */
+
+const handleVhsLoadedMetadata = function (qualityLevels, vhs) {
+  vhs.representations().forEach(rep => {
+    qualityLevels.addQualityLevel(rep);
+  });
+  handleVhsMediaChange(qualityLevels, vhs.playlists);
+}; // VHS is a source handler, not a tech. Make sure attempts to use it
+// as one do not cause exceptions.
+
+Vhs.canPlaySource = function () {
+  return videojs.log.warn('VHS is no longer a tech. Please remove it from ' + 'your player\'s techOrder.');
+};
+const emeKeySystems = (keySystemOptions, mainPlaylist, audioPlaylist) => {
+  if (!keySystemOptions) {
+    return keySystemOptions;
+  }
+  let codecs = {};
+  if (mainPlaylist && mainPlaylist.attributes && mainPlaylist.attributes.CODECS) {
+    codecs = unwrapCodecList(parseCodecs(mainPlaylist.attributes.CODECS));
+  }
+  if (audioPlaylist && audioPlaylist.attributes && audioPlaylist.attributes.CODECS) {
+    codecs.audio = audioPlaylist.attributes.CODECS;
+  }
+  const videoContentType = getMimeForCodec(codecs.video);
+  const audioContentType = getMimeForCodec(codecs.audio); // upsert the content types based on the selected playlist
+
+  const keySystemContentTypes = {};
+  for (const keySystem in keySystemOptions) {
+    keySystemContentTypes[keySystem] = {};
+    if (audioContentType) {
+      keySystemContentTypes[keySystem].audioContentType = audioContentType;
+    }
+    if (videoContentType) {
+      keySystemContentTypes[keySystem].videoContentType = videoContentType;
+    } // Default to using the video playlist's PSSH even though they may be different, as
+    // videojs-contrib-eme will only accept one in the options.
+    //
+    // This shouldn't be an issue for most cases as early intialization will handle all
+    // unique PSSH values, and if they aren't, then encrypted events should have the
+    // specific information needed for the unique license.
+
+    if (mainPlaylist.contentProtection && mainPlaylist.contentProtection[keySystem] && mainPlaylist.contentProtection[keySystem].pssh) {
+      keySystemContentTypes[keySystem].pssh = mainPlaylist.contentProtection[keySystem].pssh;
+    } // videojs-contrib-eme accepts the option of specifying: 'com.some.cdm': 'url'
+    // so we need to prevent overwriting the URL entirely
+
+    if (typeof keySystemOptions[keySystem] === 'string') {
+      keySystemContentTypes[keySystem].url = keySystemOptions[keySystem];
+    }
+  }
+  return merge(keySystemOptions, keySystemContentTypes);
+};
+/**
+ * @typedef {Object} KeySystems
+ *
+ * keySystems configuration for https://github.com/videojs/videojs-contrib-eme
+ * Note: not all options are listed here.
+ *
+ * @property {Uint8Array} [pssh]
+ *           Protection System Specific Header
+ */
+
+/**
+ * Goes through all the playlists and collects an array of KeySystems options objects
+ * containing each playlist's keySystems and their pssh values, if available.
+ *
+ * @param {Object[]} playlists
+ *        The playlists to look through
+ * @param {string[]} keySystems
+ *        The keySystems to collect pssh values for
+ *
+ * @return {KeySystems[]}
+ *         An array of KeySystems objects containing available key systems and their
+ *         pssh values
+ */
+
+const getAllPsshKeySystemsOptions = (playlists, keySystems) => {
+  return playlists.reduce((keySystemsArr, playlist) => {
+    if (!playlist.contentProtection) {
+      return keySystemsArr;
+    }
+    const keySystemsOptions = keySystems.reduce((keySystemsObj, keySystem) => {
+      const keySystemOptions = playlist.contentProtection[keySystem];
+      if (keySystemOptions && keySystemOptions.pssh) {
+        keySystemsObj[keySystem] = {
+          pssh: keySystemOptions.pssh
+        };
+      }
+      return keySystemsObj;
+    }, {});
+    if (Object.keys(keySystemsOptions).length) {
+      keySystemsArr.push(keySystemsOptions);
+    }
+    return keySystemsArr;
+  }, []);
+};
+/**
+ * Returns a promise that waits for the
+ * [eme plugin](https://github.com/videojs/videojs-contrib-eme) to create a key session.
+ *
+ * Works around https://bugs.chromium.org/p/chromium/issues/detail?id=895449 in non-IE11
+ * browsers.
+ *
+ * As per the above ticket, this is particularly important for Chrome, where, if
+ * unencrypted content is appended before encrypted content and the key session has not
+ * been created, a MEDIA_ERR_DECODE will be thrown once the encrypted content is reached
+ * during playback.
+ *
+ * @param {Object} player
+ *        The player instance
+ * @param {Object[]} sourceKeySystems
+ *        The key systems options from the player source
+ * @param {Object} [audioMedia]
+ *        The active audio media playlist (optional)
+ * @param {Object[]} mainPlaylists
+ *        The playlists found on the main playlist object
+ *
+ * @return {Object}
+ *         Promise that resolves when the key session has been created
+ */
+
+const waitForKeySessionCreation = ({
+  player,
+  sourceKeySystems,
+  audioMedia,
+  mainPlaylists
+}) => {
+  if (!player.eme.initializeMediaKeys) {
+    return Promise.resolve();
+  } // TODO should all audio PSSH values be initialized for DRM?
+  //
+  // All unique video rendition pssh values are initialized for DRM, but here only
+  // the initial audio playlist license is initialized. In theory, an encrypted
+  // event should be fired if the user switches to an alternative audio playlist
+  // where a license is required, but this case hasn't yet been tested. In addition, there
+  // may be many alternate audio playlists unlikely to be used (e.g., multiple different
+  // languages).
+
+  const playlists = audioMedia ? mainPlaylists.concat([audioMedia]) : mainPlaylists;
+  const keySystemsOptionsArr = getAllPsshKeySystemsOptions(playlists, Object.keys(sourceKeySystems));
+  const initializationFinishedPromises = [];
+  const keySessionCreatedPromises = []; // Since PSSH values are interpreted as initData, EME will dedupe any duplicates. The
+  // only place where it should not be deduped is for ms-prefixed APIs, but
+  // the existence of modern EME APIs in addition to
+  // ms-prefixed APIs on Edge should prevent this from being a concern.
+  // initializeMediaKeys also won't use the webkit-prefixed APIs.
+
+  keySystemsOptionsArr.forEach(keySystemsOptions => {
+    keySessionCreatedPromises.push(new Promise((resolve, reject) => {
+      player.tech_.one('keysessioncreated', resolve);
+    }));
+    initializationFinishedPromises.push(new Promise((resolve, reject) => {
+      player.eme.initializeMediaKeys({
+        keySystems: keySystemsOptions
+      }, err => {
+        if (err) {
+          reject(err);
+          return;
+        }
+        resolve();
+      });
+    }));
+  }); // The reasons Promise.race is chosen over Promise.any:
+  //
+  // * Promise.any is only available in Safari 14+.
+  // * None of these promises are expected to reject. If they do reject, it might be
+  //   better here for the race to surface the rejection, rather than mask it by using
+  //   Promise.any.
+
+  return Promise.race([
+  // If a session was previously created, these will all finish resolving without
+  // creating a new session, otherwise it will take until the end of all license
+  // requests, which is why the key session check is used (to make setup much faster).
+  Promise.all(initializationFinishedPromises),
+  // Once a single session is created, the browser knows DRM will be used.
+  Promise.race(keySessionCreatedPromises)]);
+};
+/**
+ * If the [eme](https://github.com/videojs/videojs-contrib-eme) plugin is available, and
+ * there are keySystems on the source, sets up source options to prepare the source for
+ * eme.
+ *
+ * @param {Object} player
+ *        The player instance
+ * @param {Object[]} sourceKeySystems
+ *        The key systems options from the player source
+ * @param {Object} media
+ *        The active media playlist
+ * @param {Object} [audioMedia]
+ *        The active audio media playlist (optional)
+ *
+ * @return {boolean}
+ *         Whether or not options were configured and EME is available
+ */
+
+const setupEmeOptions = ({
+  player,
+  sourceKeySystems,
+  media,
+  audioMedia
+}) => {
+  const sourceOptions = emeKeySystems(sourceKeySystems, media, audioMedia);
+  if (!sourceOptions) {
+    return false;
+  }
+  player.currentSource().keySystems = sourceOptions; // eme handles the rest of the setup, so if it is missing
+  // do nothing.
+
+  if (sourceOptions && !player.eme) {
+    videojs.log.warn('DRM encrypted source cannot be decrypted without a DRM plugin');
+    return false;
+  }
+  return true;
+};
+const getVhsLocalStorage = () => {
+  if (!window$1.localStorage) {
+    return null;
+  }
+  const storedObject = window$1.localStorage.getItem(LOCAL_STORAGE_KEY);
+  if (!storedObject) {
+    return null;
+  }
+  try {
+    return JSON.parse(storedObject);
+  } catch (e) {
+    // someone may have tampered with the value
+    return null;
+  }
+};
+const updateVhsLocalStorage = options => {
+  if (!window$1.localStorage) {
+    return false;
+  }
+  let objectToStore = getVhsLocalStorage();
+  objectToStore = objectToStore ? merge(objectToStore, options) : options;
+  try {
+    window$1.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(objectToStore));
+  } catch (e) {
+    // Throws if storage is full (e.g., always on iOS 5+ Safari private mode, where
+    // storage is set to 0).
+    // https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem#Exceptions
+    // No need to perform any operation.
+    return false;
+  }
+  return objectToStore;
+};
+/**
+ * Parses VHS-supported media types from data URIs. See
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
+ * for information on data URIs.
+ *
+ * @param {string} dataUri
+ *        The data URI
+ *
+ * @return {string|Object}
+ *         The parsed object/string, or the original string if no supported media type
+ *         was found
+ */
+
+const expandDataUri = dataUri => {
+  if (dataUri.toLowerCase().indexOf('data:application/vnd.videojs.vhs+json,') === 0) {
+    return JSON.parse(dataUri.substring(dataUri.indexOf(',') + 1));
+  } // no known case for this data URI, return the string as-is
+
+  return dataUri;
+};
+/**
+ * Adds a request hook to an xhr object
+ *
+ * @param {Object} xhr object to add the onRequest hook to
+ * @param {function} callback hook function for an xhr request
+ */
+
+const addOnRequestHook = (xhr, callback) => {
+  if (!xhr._requestCallbackSet) {
+    xhr._requestCallbackSet = new Set();
+  }
+  xhr._requestCallbackSet.add(callback);
+};
+/**
+ * Adds a response hook to an xhr object
+ *
+ * @param {Object} xhr object to add the onResponse hook to
+ * @param {function} callback hook function for an xhr response
+ */
+
+const addOnResponseHook = (xhr, callback) => {
+  if (!xhr._responseCallbackSet) {
+    xhr._responseCallbackSet = new Set();
+  }
+  xhr._responseCallbackSet.add(callback);
+};
+/**
+ * Removes a request hook on an xhr object, deletes the onRequest set if empty.
+ *
+ * @param {Object} xhr object to remove the onRequest hook from
+ * @param {function} callback hook function to remove
+ */
+
+const removeOnRequestHook = (xhr, callback) => {
+  if (!xhr._requestCallbackSet) {
+    return;
+  }
+  xhr._requestCallbackSet.delete(callback);
+  if (!xhr._requestCallbackSet.size) {
+    delete xhr._requestCallbackSet;
+  }
+};
+/**
+ * Removes a response hook on an xhr object, deletes the onResponse set if empty.
+ *
+ * @param {Object} xhr object to remove the onResponse hook from
+ * @param {function} callback hook function to remove
+ */
+
+const removeOnResponseHook = (xhr, callback) => {
+  if (!xhr._responseCallbackSet) {
+    return;
+  }
+  xhr._responseCallbackSet.delete(callback);
+  if (!xhr._responseCallbackSet.size) {
+    delete xhr._responseCallbackSet;
+  }
+};
+/**
+ * Whether the browser has built-in HLS support.
+ */
+
+Vhs.supportsNativeHls = function () {
+  if (!document || !document.createElement) {
+    return false;
+  }
+  const video = document.createElement('video'); // native HLS is definitely not supported if HTML5 video isn't
+
+  if (!videojs.getTech('Html5').isSupported()) {
+    return false;
+  } // HLS manifests can go by many mime-types
+
+  const canPlay = [
+  // Apple santioned
+  'application/vnd.apple.mpegurl',
+  // Apple sanctioned for backwards compatibility
+  'audio/mpegurl',
+  // Very common
+  'audio/x-mpegurl',
+  // Very common
+  'application/x-mpegurl',
+  // Included for completeness
+  'video/x-mpegurl', 'video/mpegurl', 'application/mpegurl'];
+  return canPlay.some(function (canItPlay) {
+    return /maybe|probably/i.test(video.canPlayType(canItPlay));
+  });
+}();
+Vhs.supportsNativeDash = function () {
+  if (!document || !document.createElement || !videojs.getTech('Html5').isSupported()) {
+    return false;
+  }
+  return /maybe|probably/i.test(document.createElement('video').canPlayType('application/dash+xml'));
+}();
+Vhs.supportsTypeNatively = type => {
+  if (type === 'hls') {
+    return Vhs.supportsNativeHls;
+  }
+  if (type === 'dash') {
+    return Vhs.supportsNativeDash;
+  }
+  return false;
+};
+/**
+ * VHS is a source handler, not a tech. Make sure attempts to use it
+ * as one do not cause exceptions.
+ */
+
+Vhs.isSupported = function () {
+  return videojs.log.warn('VHS is no longer a tech. Please remove it from ' + 'your player\'s techOrder.');
+};
+/**
+ * A global function for setting an onRequest hook
+ *
+ * @param {function} callback for request modifiction
+ */
+
+Vhs.xhr.onRequest = function (callback) {
+  addOnRequestHook(Vhs.xhr, callback);
+};
+/**
+ * A global function for setting an onResponse hook
+ *
+ * @param {callback} callback for response data retrieval
+ */
+
+Vhs.xhr.onResponse = function (callback) {
+  addOnResponseHook(Vhs.xhr, callback);
+};
+/**
+ * Deletes a global onRequest callback if it exists
+ *
+ * @param {function} callback to delete from the global set
+ */
+
+Vhs.xhr.offRequest = function (callback) {
+  removeOnRequestHook(Vhs.xhr, callback);
+};
+/**
+ * Deletes a global onResponse callback if it exists
+ *
+ * @param {function} callback to delete from the global set
+ */
+
+Vhs.xhr.offResponse = function (callback) {
+  removeOnResponseHook(Vhs.xhr, callback);
+};
+const Component = videojs.getComponent('Component');
+/**
+ * The Vhs Handler object, where we orchestrate all of the parts
+ * of VHS to interact with video.js
+ *
+ * @class VhsHandler
+ * @extends videojs.Component
+ * @param {Object} source the soruce object
+ * @param {Tech} tech the parent tech object
+ * @param {Object} options optional and required options
+ */
+
+class VhsHandler extends Component {
+  constructor(source, tech, options) {
+    super(tech, options.vhs); // if a tech level `initialBandwidth` option was passed
+    // use that over the VHS level `bandwidth` option
+
+    if (typeof options.initialBandwidth === 'number') {
+      this.options_.bandwidth = options.initialBandwidth;
+    }
+    this.logger_ = logger('VhsHandler'); // we need access to the player in some cases,
+    // so, get it from Video.js via the `playerId`
+
+    if (tech.options_ && tech.options_.playerId) {
+      const _player = videojs.getPlayer(tech.options_.playerId);
+      this.player_ = _player;
+    }
+    this.tech_ = tech;
+    this.source_ = source;
+    this.stats = {};
+    this.ignoreNextSeekingEvent_ = false;
+    this.setOptions_();
+    if (this.options_.overrideNative && tech.overrideNativeAudioTracks && tech.overrideNativeVideoTracks) {
+      tech.overrideNativeAudioTracks(true);
+      tech.overrideNativeVideoTracks(true);
+    } else if (this.options_.overrideNative && (tech.featuresNativeVideoTracks || tech.featuresNativeAudioTracks)) {
+      // overriding native VHS only works if audio tracks have been emulated
+      // error early if we're misconfigured
+      throw new Error('Overriding native VHS requires emulated tracks. ' + 'See https://git.io/vMpjB');
+    } // listen for fullscreenchange events for this player so that we
+    // can adjust our quality selection quickly
+
+    this.on(document, ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'], event => {
+      const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+      if (fullscreenElement && fullscreenElement.contains(this.tech_.el())) {
+        this.playlistController_.fastQualityChange_();
+      } else {
+        // When leaving fullscreen, since the in page pixel dimensions should be smaller
+        // than full screen, see if there should be a rendition switch down to preserve
+        // bandwidth.
+        this.playlistController_.checkABR_();
+      }
+    });
+    this.on(this.tech_, 'seeking', function () {
+      if (this.ignoreNextSeekingEvent_) {
+        this.ignoreNextSeekingEvent_ = false;
+        return;
+      }
+      this.setCurrentTime(this.tech_.currentTime());
+    });
+    this.on(this.tech_, 'error', function () {
+      // verify that the error was real and we are loaded
+      // enough to have pc loaded.
+      if (this.tech_.error() && this.playlistController_) {
+        this.playlistController_.pauseLoading();
+      }
+    });
+    this.on(this.tech_, 'play', this.play);
+  }
+  /**
+   * Set VHS options based on options from configuration, as well as partial
+   * options to be passed at a later time.
+   *
+   * @param {Object} options A partial chunk of config options
+   */
+
+  setOptions_(options = {}) {
+    this.options_ = merge(this.options_, options); // defaults
+
+    this.options_.withCredentials = this.options_.withCredentials || false;
+    this.options_.limitRenditionByPlayerDimensions = this.options_.limitRenditionByPlayerDimensions === false ? false : true;
+    this.options_.useDevicePixelRatio = this.options_.useDevicePixelRatio || false;
+    this.options_.useBandwidthFromLocalStorage = typeof this.source_.useBandwidthFromLocalStorage !== 'undefined' ? this.source_.useBandwidthFromLocalStorage : this.options_.useBandwidthFromLocalStorage || false;
+    this.options_.useForcedSubtitles = this.options_.useForcedSubtitles || false;
+    this.options_.useNetworkInformationApi = this.options_.useNetworkInformationApi || false;
+    this.options_.useDtsForTimestampOffset = this.options_.useDtsForTimestampOffset || false;
+    this.options_.customTagParsers = this.options_.customTagParsers || [];
+    this.options_.customTagMappers = this.options_.customTagMappers || [];
+    this.options_.cacheEncryptionKeys = this.options_.cacheEncryptionKeys || false;
+    this.options_.llhls = this.options_.llhls === false ? false : true;
+    this.options_.bufferBasedABR = this.options_.bufferBasedABR || false;
+    if (typeof this.options_.playlistExclusionDuration !== 'number') {
+      this.options_.playlistExclusionDuration = 60;
+    }
+    if (typeof this.options_.bandwidth !== 'number') {
+      if (this.options_.useBandwidthFromLocalStorage) {
+        const storedObject = getVhsLocalStorage();
+        if (storedObject && storedObject.bandwidth) {
+          this.options_.bandwidth = storedObject.bandwidth;
+          this.tech_.trigger({
+            type: 'usage',
+            name: 'vhs-bandwidth-from-local-storage'
+          });
+        }
+        if (storedObject && storedObject.throughput) {
+          this.options_.throughput = storedObject.throughput;
+          this.tech_.trigger({
+            type: 'usage',
+            name: 'vhs-throughput-from-local-storage'
+          });
+        }
+      }
+    } // if bandwidth was not set by options or pulled from local storage, start playlist
+    // selection at a reasonable bandwidth
+
+    if (typeof this.options_.bandwidth !== 'number') {
+      this.options_.bandwidth = Config.INITIAL_BANDWIDTH;
+    } // If the bandwidth number is unchanged from the initial setting
+    // then this takes precedence over the enableLowInitialPlaylist option
+
+    this.options_.enableLowInitialPlaylist = this.options_.enableLowInitialPlaylist && this.options_.bandwidth === Config.INITIAL_BANDWIDTH; // grab options passed to player.src
+
+    ['withCredentials', 'useDevicePixelRatio', 'customPixelRatio', 'limitRenditionByPlayerDimensions', 'bandwidth', 'customTagParsers', 'customTagMappers', 'cacheEncryptionKeys', 'playlistSelector', 'initialPlaylistSelector', 'bufferBasedABR', 'liveRangeSafeTimeDelta', 'llhls', 'useForcedSubtitles', 'useNetworkInformationApi', 'useDtsForTimestampOffset', 'exactManifestTimings', 'leastPixelDiffSelector'].forEach(option => {
+      if (typeof this.source_[option] !== 'undefined') {
+        this.options_[option] = this.source_[option];
+      }
+    });
+    this.limitRenditionByPlayerDimensions = this.options_.limitRenditionByPlayerDimensions;
+    this.useDevicePixelRatio = this.options_.useDevicePixelRatio;
+    const customPixelRatio = this.options_.customPixelRatio; // Ensure the custom pixel ratio is a number greater than or equal to 0
+
+    if (typeof customPixelRatio === 'number' && customPixelRatio >= 0) {
+      this.customPixelRatio = customPixelRatio;
+    }
+  } // alias for public method to set options
+
+  setOptions(options = {}) {
+    this.setOptions_(options);
+  }
+  /**
+   * called when player.src gets called, handle a new source
+   *
+   * @param {Object} src the source object to handle
+   */
+
+  src(src, type) {
+    // do nothing if the src is falsey
+    if (!src) {
+      return;
+    }
+    this.setOptions_(); // add main playlist controller options
+
+    this.options_.src = expandDataUri(this.source_.src);
+    this.options_.tech = this.tech_;
+    this.options_.externVhs = Vhs;
+    this.options_.sourceType = simpleTypeFromSourceType(type); // Whenever we seek internally, we should update the tech
+
+    this.options_.seekTo = time => {
+      this.tech_.setCurrentTime(time);
+    };
+    this.playlistController_ = new PlaylistController(this.options_);
+    const playbackWatcherOptions = merge({
+      liveRangeSafeTimeDelta: SAFE_TIME_DELTA
+    }, this.options_, {
+      seekable: () => this.seekable(),
+      media: () => this.playlistController_.media(),
+      playlistController: this.playlistController_
+    });
+    this.playbackWatcher_ = new PlaybackWatcher(playbackWatcherOptions);
+    this.playlistController_.on('error', () => {
+      const player = videojs.players[this.tech_.options_.playerId];
+      let error = this.playlistController_.error;
+      if (typeof error === 'object' && !error.code) {
+        error.code = 3;
+      } else if (typeof error === 'string') {
+        error = {
+          message: error,
+          code: 3
+        };
+      }
+      player.error(error);
+    });
+    const defaultSelector = this.options_.bufferBasedABR ? Vhs.movingAverageBandwidthSelector(0.55) : Vhs.STANDARD_PLAYLIST_SELECTOR; // `this` in selectPlaylist should be the VhsHandler for backwards
+    // compatibility with < v2
+
+    this.playlistController_.selectPlaylist = this.selectPlaylist ? this.selectPlaylist.bind(this) : defaultSelector.bind(this);
+    this.playlistController_.selectInitialPlaylist = Vhs.INITIAL_PLAYLIST_SELECTOR.bind(this); // re-expose some internal objects for backwards compatibility with < v2
+
+    this.playlists = this.playlistController_.mainPlaylistLoader_;
+    this.mediaSource = this.playlistController_.mediaSource; // Proxy assignment of some properties to the main playlist
+    // controller. Using a custom property for backwards compatibility
+    // with < v2
+
+    Object.defineProperties(this, {
+      selectPlaylist: {
+        get() {
+          return this.playlistController_.selectPlaylist;
+        },
+        set(selectPlaylist) {
+          this.playlistController_.selectPlaylist = selectPlaylist.bind(this);
+        }
+      },
+      throughput: {
+        get() {
+          return this.playlistController_.mainSegmentLoader_.throughput.rate;
+        },
+        set(throughput) {
+          this.playlistController_.mainSegmentLoader_.throughput.rate = throughput; // By setting `count` to 1 the throughput value becomes the starting value
+          // for the cumulative average
+
+          this.playlistController_.mainSegmentLoader_.throughput.count = 1;
+        }
+      },
+      bandwidth: {
+        get() {
+          let playerBandwidthEst = this.playlistController_.mainSegmentLoader_.bandwidth;
+          const networkInformation = window$1.navigator.connection || window$1.navigator.mozConnection || window$1.navigator.webkitConnection;
+          const tenMbpsAsBitsPerSecond = 10e6;
+          if (this.options_.useNetworkInformationApi && networkInformation) {
+            // downlink returns Mbps
+            // https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/downlink
+            const networkInfoBandwidthEstBitsPerSec = networkInformation.downlink * 1000 * 1000; // downlink maxes out at 10 Mbps. In the event that both networkInformationApi and the player
+            // estimate a bandwidth greater than 10 Mbps, use the larger of the two estimates to ensure that
+            // high quality streams are not filtered out.
+
+            if (networkInfoBandwidthEstBitsPerSec >= tenMbpsAsBitsPerSecond && playerBandwidthEst >= tenMbpsAsBitsPerSecond) {
+              playerBandwidthEst = Math.max(playerBandwidthEst, networkInfoBandwidthEstBitsPerSec);
+            } else {
+              playerBandwidthEst = networkInfoBandwidthEstBitsPerSec;
+            }
+          }
+          return playerBandwidthEst;
+        },
+        set(bandwidth) {
+          this.playlistController_.mainSegmentLoader_.bandwidth = bandwidth; // setting the bandwidth manually resets the throughput counter
+          // `count` is set to zero that current value of `rate` isn't included
+          // in the cumulative average
+
+          this.playlistController_.mainSegmentLoader_.throughput = {
+            rate: 0,
+            count: 0
+          };
+        }
+      },
+      /**
+       * `systemBandwidth` is a combination of two serial processes bit-rates. The first
+       * is the network bitrate provided by `bandwidth` and the second is the bitrate of
+       * the entire process after that - decryption, transmuxing, and appending - provided
+       * by `throughput`.
+       *
+       * Since the two process are serial, the overall system bandwidth is given by:
+       *   sysBandwidth = 1 / (1 / bandwidth + 1 / throughput)
+       */
+      systemBandwidth: {
+        get() {
+          const invBandwidth = 1 / (this.bandwidth || 1);
+          let invThroughput;
+          if (this.throughput > 0) {
+            invThroughput = 1 / this.throughput;
+          } else {
+            invThroughput = 0;
+          }
+          const systemBitrate = Math.floor(1 / (invBandwidth + invThroughput));
+          return systemBitrate;
+        },
+        set() {
+          videojs.log.error('The "systemBandwidth" property is read-only');
+        }
+      }
+    });
+    if (this.options_.bandwidth) {
+      this.bandwidth = this.options_.bandwidth;
+    }
+    if (this.options_.throughput) {
+      this.throughput = this.options_.throughput;
+    }
+    Object.defineProperties(this.stats, {
+      bandwidth: {
+        get: () => this.bandwidth || 0,
+        enumerable: true
+      },
+      mediaRequests: {
+        get: () => this.playlistController_.mediaRequests_() || 0,
+        enumerable: true
+      },
+      mediaRequestsAborted: {
+        get: () => this.playlistController_.mediaRequestsAborted_() || 0,
+        enumerable: true
+      },
+      mediaRequestsTimedout: {
+        get: () => this.playlistController_.mediaRequestsTimedout_() || 0,
+        enumerable: true
+      },
+      mediaRequestsErrored: {
+        get: () => this.playlistController_.mediaRequestsErrored_() || 0,
+        enumerable: true
+      },
+      mediaTransferDuration: {
+        get: () => this.playlistController_.mediaTransferDuration_() || 0,
+        enumerable: true
+      },
+      mediaBytesTransferred: {
+        get: () => this.playlistController_.mediaBytesTransferred_() || 0,
+        enumerable: true
+      },
+      mediaSecondsLoaded: {
+        get: () => this.playlistController_.mediaSecondsLoaded_() || 0,
+        enumerable: true
+      },
+      mediaAppends: {
+        get: () => this.playlistController_.mediaAppends_() || 0,
+        enumerable: true
+      },
+      mainAppendsToLoadedData: {
+        get: () => this.playlistController_.mainAppendsToLoadedData_() || 0,
+        enumerable: true
+      },
+      audioAppendsToLoadedData: {
+        get: () => this.playlistController_.audioAppendsToLoadedData_() || 0,
+        enumerable: true
+      },
+      appendsToLoadedData: {
+        get: () => this.playlistController_.appendsToLoadedData_() || 0,
+        enumerable: true
+      },
+      timeToLoadedData: {
+        get: () => this.playlistController_.timeToLoadedData_() || 0,
+        enumerable: true
+      },
+      buffered: {
+        get: () => timeRangesToArray(this.tech_.buffered()),
+        enumerable: true
+      },
+      currentTime: {
+        get: () => this.tech_.currentTime(),
+        enumerable: true
+      },
+      currentSource: {
+        get: () => this.tech_.currentSource_,
+        enumerable: true
+      },
+      currentTech: {
+        get: () => this.tech_.name_,
+        enumerable: true
+      },
+      duration: {
+        get: () => this.tech_.duration(),
+        enumerable: true
+      },
+      main: {
+        get: () => this.playlists.main,
+        enumerable: true
+      },
+      playerDimensions: {
+        get: () => this.tech_.currentDimensions(),
+        enumerable: true
+      },
+      seekable: {
+        get: () => timeRangesToArray(this.tech_.seekable()),
+        enumerable: true
+      },
+      timestamp: {
+        get: () => Date.now(),
+        enumerable: true
+      },
+      videoPlaybackQuality: {
+        get: () => this.tech_.getVideoPlaybackQuality(),
+        enumerable: true
+      }
+    });
+    this.tech_.one('canplay', this.playlistController_.setupFirstPlay.bind(this.playlistController_));
+    this.tech_.on('bandwidthupdate', () => {
+      if (this.options_.useBandwidthFromLocalStorage) {
+        updateVhsLocalStorage({
+          bandwidth: this.bandwidth,
+          throughput: Math.round(this.throughput)
+        });
+      }
+    });
+    this.playlistController_.on('selectedinitialmedia', () => {
+      // Add the manual rendition mix-in to VhsHandler
+      renditionSelectionMixin(this);
+    });
+    this.playlistController_.sourceUpdater_.on('createdsourcebuffers', () => {
+      this.setupEme_();
+    }); // the bandwidth of the primary segment loader is our best
+    // estimate of overall bandwidth
+
+    this.on(this.playlistController_, 'progress', function () {
+      this.tech_.trigger('progress');
+    }); // In the live case, we need to ignore the very first `seeking` event since
+    // that will be the result of the seek-to-live behavior
+
+    this.on(this.playlistController_, 'firstplay', function () {
+      this.ignoreNextSeekingEvent_ = true;
+    });
+    this.setupQualityLevels_(); // do nothing if the tech has been disposed already
+    // this can occur if someone sets the src in player.ready(), for instance
+
+    if (!this.tech_.el()) {
+      return;
+    }
+    this.mediaSourceUrl_ = window$1.URL.createObjectURL(this.playlistController_.mediaSource);
+    this.tech_.src(this.mediaSourceUrl_);
+  }
+  createKeySessions_() {
+    const audioPlaylistLoader = this.playlistController_.mediaTypes_.AUDIO.activePlaylistLoader;
+    this.logger_('waiting for EME key session creation');
+    waitForKeySessionCreation({
+      player: this.player_,
+      sourceKeySystems: this.source_.keySystems,
+      audioMedia: audioPlaylistLoader && audioPlaylistLoader.media(),
+      mainPlaylists: this.playlists.main.playlists
+    }).then(() => {
+      this.logger_('created EME key session');
+      this.playlistController_.sourceUpdater_.initializedEme();
+    }).catch(err => {
+      this.logger_('error while creating EME key session', err);
+      this.player_.error({
+        message: 'Failed to initialize media keys for EME',
+        code: 3,
+        metadata: {
+          errorType: videojs.Error.EMEKeySessionCreationError
+        }
+      });
+    });
+  }
+  handleWaitingForKey_() {
+    // If waitingforkey is fired, it's possible that the data that's necessary to retrieve
+    // the key is in the manifest. While this should've happened on initial source load, it
+    // may happen again in live streams where the keys change, and the manifest info
+    // reflects the update.
+    //
+    // Because videojs-contrib-eme compares the PSSH data we send to that of PSSH data it's
+    // already requested keys for, we don't have to worry about this generating extraneous
+    // requests.
+    this.logger_('waitingforkey fired, attempting to create any new key sessions');
+    this.createKeySessions_();
+  }
+  /**
+   * If necessary and EME is available, sets up EME options and waits for key session
+   * creation.
+   *
+   * This function also updates the source updater so taht it can be used, as for some
+   * browsers, EME must be configured before content is appended (if appending unencrypted
+   * content before encrypted content).
+   */
+
+  setupEme_() {
+    const audioPlaylistLoader = this.playlistController_.mediaTypes_.AUDIO.activePlaylistLoader;
+    const didSetupEmeOptions = setupEmeOptions({
+      player: this.player_,
+      sourceKeySystems: this.source_.keySystems,
+      media: this.playlists.media(),
+      audioMedia: audioPlaylistLoader && audioPlaylistLoader.media()
+    });
+    this.player_.tech_.on('keystatuschange', e => {
+      this.playlistController_.updatePlaylistByKeyStatus(e.keyId, e.status);
+    });
+    this.handleWaitingForKey_ = this.handleWaitingForKey_.bind(this);
+    this.player_.tech_.on('waitingforkey', this.handleWaitingForKey_);
+    if (!didSetupEmeOptions) {
+      // If EME options were not set up, we've done all we could to initialize EME.
+      this.playlistController_.sourceUpdater_.initializedEme();
+      return;
+    }
+    this.createKeySessions_();
+  }
+  /**
+   * Initializes the quality levels and sets listeners to update them.
+   *
+   * @method setupQualityLevels_
+   * @private
+   */
+
+  setupQualityLevels_() {
+    const player = videojs.players[this.tech_.options_.playerId]; // if there isn't a player or there isn't a qualityLevels plugin
+    // or qualityLevels_ listeners have already been setup, do nothing.
+
+    if (!player || !player.qualityLevels || this.qualityLevels_) {
+      return;
+    }
+    this.qualityLevels_ = player.qualityLevels();
+    this.playlistController_.on('selectedinitialmedia', () => {
+      handleVhsLoadedMetadata(this.qualityLevels_, this);
+    });
+    this.playlists.on('mediachange', () => {
+      handleVhsMediaChange(this.qualityLevels_, this.playlists);
+    });
+  }
+  /**
+   * return the version
+   */
+
+  static version() {
+    return {
+      '@videojs/http-streaming': version$4,
+      'mux.js': version$3,
+      'mpd-parser': version$2,
+      'm3u8-parser': version$1,
+      'aes-decrypter': version
+    };
+  }
+  /**
+   * return the version
+   */
+
+  version() {
+    return this.constructor.version();
+  }
+  canChangeType() {
+    return SourceUpdater.canChangeType();
+  }
+  /**
+   * Begin playing the video.
+   */
+
+  play() {
+    this.playlistController_.play();
+  }
+  /**
+   * a wrapper around the function in PlaylistController
+   */
+
+  setCurrentTime(currentTime) {
+    this.playlistController_.setCurrentTime(currentTime);
+  }
+  /**
+   * a wrapper around the function in PlaylistController
+   */
+
+  duration() {
+    return this.playlistController_.duration();
+  }
+  /**
+   * a wrapper around the function in PlaylistController
+   */
+
+  seekable() {
+    return this.playlistController_.seekable();
+  }
+  /**
+   * Abort all outstanding work and cleanup.
+   */
+
+  dispose() {
+    if (this.playbackWatcher_) {
+      this.playbackWatcher_.dispose();
+    }
+    if (this.playlistController_) {
+      this.playlistController_.dispose();
+    }
+    if (this.qualityLevels_) {
+      this.qualityLevels_.dispose();
+    }
+    if (this.tech_ && this.tech_.vhs) {
+      delete this.tech_.vhs;
+    }
+    if (this.mediaSourceUrl_ && window$1.URL.revokeObjectURL) {
+      window$1.URL.revokeObjectURL(this.mediaSourceUrl_);
+      this.mediaSourceUrl_ = null;
+    }
+    if (this.tech_) {
+      this.tech_.off('waitingforkey', this.handleWaitingForKey_);
+    }
+    super.dispose();
+  }
+  convertToProgramTime(time, callback) {
+    return getProgramTime({
+      playlist: this.playlistController_.media(),
+      time,
+      callback
+    });
+  } // the player must be playing before calling this
+
+  seekToProgramTime(programTime, callback, pauseAfterSeek = true, retryCount = 2) {
+    return seekToProgramTime({
+      programTime,
+      playlist: this.playlistController_.media(),
+      retryCount,
+      pauseAfterSeek,
+      seekTo: this.options_.seekTo,
+      tech: this.options_.tech,
+      callback
+    });
+  }
+  /**
+   * Adds the onRequest, onResponse, offRequest and offResponse functions
+   * to the VhsHandler xhr Object.
+   */
+
+  setupXhrHooks_() {
+    /**
+     * A player function for setting an onRequest hook
+     *
+     * @param {function} callback for request modifiction
+     */
+    this.xhr.onRequest = callback => {
+      addOnRequestHook(this.xhr, callback);
+    };
+    /**
+     * A player function for setting an onResponse hook
+     *
+     * @param {callback} callback for response data retrieval
+     */
+
+    this.xhr.onResponse = callback => {
+      addOnResponseHook(this.xhr, callback);
+    };
+    /**
+     * Deletes a player onRequest callback if it exists
+     *
+     * @param {function} callback to delete from the player set
+     */
+
+    this.xhr.offRequest = callback => {
+      removeOnRequestHook(this.xhr, callback);
+    };
+    /**
+     * Deletes a player onResponse callback if it exists
+     *
+     * @param {function} callback to delete from the player set
+     */
+
+    this.xhr.offResponse = callback => {
+      removeOnResponseHook(this.xhr, callback);
+    }; // Trigger an event on the player to notify the user that vhs is ready to set xhr hooks.
+    // This allows hooks to be set before the source is set to vhs when handleSource is called.
+
+    this.player_.trigger('xhr-hooks-ready');
+  }
+}
+/**
+ * The Source Handler object, which informs video.js what additional
+ * MIME types are supported and sets up playback. It is registered
+ * automatically to the appropriate tech based on the capabilities of
+ * the browser it is running in. It is not necessary to use or modify
+ * this object in normal usage.
+ */
+
+const VhsSourceHandler = {
+  name: 'videojs-http-streaming',
+  VERSION: version$4,
+  canHandleSource(srcObj, options = {}) {
+    const localOptions = merge(videojs.options, options);
+    return VhsSourceHandler.canPlayType(srcObj.type, localOptions);
+  },
+  handleSource(source, tech, options = {}) {
+    const localOptions = merge(videojs.options, options);
+    tech.vhs = new VhsHandler(source, tech, localOptions);
+    tech.vhs.xhr = xhrFactory();
+    tech.vhs.setupXhrHooks_();
+    tech.vhs.src(source.src, source.type);
+    return tech.vhs;
+  },
+  canPlayType(type, options) {
+    const simpleType = simpleTypeFromSourceType(type);
+    if (!simpleType) {
+      return '';
+    }
+    const overrideNative = VhsSourceHandler.getOverrideNative(options);
+    const supportsTypeNatively = Vhs.supportsTypeNatively(simpleType);
+    const canUseMsePlayback = !supportsTypeNatively || overrideNative;
+    return canUseMsePlayback ? 'maybe' : '';
+  },
+  getOverrideNative(options = {}) {
+    const {
+      vhs = {}
+    } = options;
+    const defaultOverrideNative = !(videojs.browser.IS_ANY_SAFARI || videojs.browser.IS_IOS);
+    const {
+      overrideNative = defaultOverrideNative
+    } = vhs;
+    return overrideNative;
+  }
+};
+/**
+ * Check to see if the native MediaSource object exists and supports
+ * an MP4 container with both H.264 video and AAC-LC audio.
+ *
+ * @return {boolean} if  native media sources are supported
+ */
+
+const supportsNativeMediaSources = () => {
+  return browserSupportsCodec('avc1.4d400d,mp4a.40.2');
+}; // register source handlers with the appropriate techs
+
+if (supportsNativeMediaSources()) {
+  videojs.getTech('Html5').registerSourceHandler(VhsSourceHandler, 0);
+}
+videojs.VhsHandler = VhsHandler;
+videojs.VhsSourceHandler = VhsSourceHandler;
+videojs.Vhs = Vhs;
+if (!videojs.use) {
+  videojs.registerComponent('Vhs', Vhs);
+}
+videojs.options.vhs = videojs.options.vhs || {};
+if (!videojs.getPlugin || !videojs.getPlugin('reloadSourceOnError')) {
+  videojs.registerPlugin('reloadSourceOnError', reloadSourceOnError);
+}
+
+export { videojs as default };
diff --git a/priv/static/video.js/video.js b/priv/static/video.js/video.js
new file mode 100644
index 0000000..8d5ddfc
--- /dev/null
+++ b/priv/static/video.js/video.js
@@ -0,0 +1,65224 @@
+/**
+ * @license
+ * Video.js 8.12.0 <http://videojs.com/>
+ * Copyright Brightcove, Inc. <https://www.brightcove.com/>
+ * Available under Apache License Version 2.0
+ * <https://github.com/videojs/video.js/blob/main/LICENSE>
+ *
+ * Includes vtt.js <https://github.com/mozilla/vtt.js>
+ * Available under Apache License Version 2.0
+ * <https://github.com/mozilla/vtt.js/blob/main/LICENSE>
+ */
+
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojs = factory());
+})(this, (function () { 'use strict';
+
+  var version$5 = "8.12.0";
+
+  /**
+   * An Object that contains lifecycle hooks as keys which point to an array
+   * of functions that are run when a lifecycle is triggered
+   *
+   * @private
+   */
+  const hooks_ = {};
+
+  /**
+   * Get a list of hooks for a specific lifecycle
+   *
+   * @param  {string} type
+   *         the lifecycle to get hooks from
+   *
+   * @param  {Function|Function[]} [fn]
+   *         Optionally add a hook (or hooks) to the lifecycle that your are getting.
+   *
+   * @return {Array}
+   *         an array of hooks, or an empty array if there are none.
+   */
+  const hooks = function (type, fn) {
+    hooks_[type] = hooks_[type] || [];
+    if (fn) {
+      hooks_[type] = hooks_[type].concat(fn);
+    }
+    return hooks_[type];
+  };
+
+  /**
+   * Add a function hook to a specific videojs lifecycle.
+   *
+   * @param {string} type
+   *        the lifecycle to hook the function to.
+   *
+   * @param {Function|Function[]}
+   *        The function or array of functions to attach.
+   */
+  const hook = function (type, fn) {
+    hooks(type, fn);
+  };
+
+  /**
+   * Remove a hook from a specific videojs lifecycle.
+   *
+   * @param  {string} type
+   *         the lifecycle that the function hooked to
+   *
+   * @param  {Function} fn
+   *         The hooked function to remove
+   *
+   * @return {boolean}
+   *         The function that was removed or undef
+   */
+  const removeHook = function (type, fn) {
+    const index = hooks(type).indexOf(fn);
+    if (index <= -1) {
+      return false;
+    }
+    hooks_[type] = hooks_[type].slice();
+    hooks_[type].splice(index, 1);
+    return true;
+  };
+
+  /**
+   * Add a function hook that will only run once to a specific videojs lifecycle.
+   *
+   * @param {string} type
+   *        the lifecycle to hook the function to.
+   *
+   * @param {Function|Function[]}
+   *        The function or array of functions to attach.
+   */
+  const hookOnce = function (type, fn) {
+    hooks(type, [].concat(fn).map(original => {
+      const wrapper = (...args) => {
+        removeHook(type, wrapper);
+        return original(...args);
+      };
+      return wrapper;
+    }));
+  };
+
+  /**
+   * @file fullscreen-api.js
+   * @module fullscreen-api
+   */
+
+  /**
+   * Store the browser-specific methods for the fullscreen API.
+   *
+   * @type {Object}
+   * @see [Specification]{@link https://fullscreen.spec.whatwg.org}
+   * @see [Map Approach From Screenfull.js]{@link https://github.com/sindresorhus/screenfull.js}
+   */
+  const FullscreenApi = {
+    prefixed: true
+  };
+
+  // browser API methods
+  const apiMap = [['requestFullscreen', 'exitFullscreen', 'fullscreenElement', 'fullscreenEnabled', 'fullscreenchange', 'fullscreenerror', 'fullscreen'],
+  // WebKit
+  ['webkitRequestFullscreen', 'webkitExitFullscreen', 'webkitFullscreenElement', 'webkitFullscreenEnabled', 'webkitfullscreenchange', 'webkitfullscreenerror', '-webkit-full-screen']];
+  const specApi = apiMap[0];
+  let browserApi;
+
+  // determine the supported set of functions
+  for (let i = 0; i < apiMap.length; i++) {
+    // check for exitFullscreen function
+    if (apiMap[i][1] in document) {
+      browserApi = apiMap[i];
+      break;
+    }
+  }
+
+  // map the browser API names to the spec API names
+  if (browserApi) {
+    for (let i = 0; i < browserApi.length; i++) {
+      FullscreenApi[specApi[i]] = browserApi[i];
+    }
+    FullscreenApi.prefixed = browserApi[0] !== specApi[0];
+  }
+
+  /**
+   * @file create-logger.js
+   * @module create-logger
+   */
+
+  // This is the private tracking variable for the logging history.
+  let history = [];
+
+  /**
+   * Log messages to the console and history based on the type of message
+   *
+   * @private
+   * @param  {string} name
+   *         The name of the console method to use.
+   *
+   * @param  {Object} log
+   *         The arguments to be passed to the matching console method.
+   *
+   * @param {string} [styles]
+   *        styles for name
+   */
+  const LogByTypeFactory = (name, log, styles) => (type, level, args) => {
+    const lvl = log.levels[level];
+    const lvlRegExp = new RegExp(`^(${lvl})$`);
+    let resultName = name;
+    if (type !== 'log') {
+      // Add the type to the front of the message when it's not "log".
+      args.unshift(type.toUpperCase() + ':');
+    }
+    if (styles) {
+      resultName = `%c${name}`;
+      args.unshift(styles);
+    }
+
+    // Add console prefix after adding to history.
+    args.unshift(resultName + ':');
+
+    // Add a clone of the args at this point to history.
+    if (history) {
+      history.push([].concat(args));
+
+      // only store 1000 history entries
+      const splice = history.length - 1000;
+      history.splice(0, splice > 0 ? splice : 0);
+    }
+
+    // If there's no console then don't try to output messages, but they will
+    // still be stored in history.
+    if (!window.console) {
+      return;
+    }
+
+    // Was setting these once outside of this function, but containing them
+    // in the function makes it easier to test cases where console doesn't exist
+    // when the module is executed.
+    let fn = window.console[type];
+    if (!fn && type === 'debug') {
+      // Certain browsers don't have support for console.debug. For those, we
+      // should default to the closest comparable log.
+      fn = window.console.info || window.console.log;
+    }
+
+    // Bail out if there's no console or if this type is not allowed by the
+    // current logging level.
+    if (!fn || !lvl || !lvlRegExp.test(type)) {
+      return;
+    }
+    fn[Array.isArray(args) ? 'apply' : 'call'](window.console, args);
+  };
+  function createLogger$1(name, delimiter = ':', styles = '') {
+    // This is the private tracking variable for logging level.
+    let level = 'info';
+
+    // the curried logByType bound to the specific log and history
+    let logByType;
+
+    /**
+     * Logs plain debug messages. Similar to `console.log`.
+     *
+     * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+     * of our JSDoc template, we cannot properly document this as both a function
+     * and a namespace, so its function signature is documented here.
+     *
+     * #### Arguments
+     * ##### *args
+     * *[]
+     *
+     * Any combination of values that could be passed to `console.log()`.
+     *
+     * #### Return Value
+     *
+     * `undefined`
+     *
+     * @namespace
+     * @param    {...*} args
+     *           One or more messages or objects that should be logged.
+     */
+    const log = function (...args) {
+      logByType('log', level, args);
+    };
+
+    // This is the logByType helper that the logging methods below use
+    logByType = LogByTypeFactory(name, log, styles);
+
+    /**
+     * Create a new subLogger which chains the old name to the new name.
+     *
+     * For example, doing `videojs.log.createLogger('player')` and then using that logger will log the following:
+     * ```js
+     *  mylogger('foo');
+     *  // > VIDEOJS: player: foo
+     * ```
+     *
+     * @param {string} subName
+     *        The name to add call the new logger
+     * @param {string} [subDelimiter]
+     *        Optional delimiter
+     * @param {string} [subStyles]
+     *        Optional styles
+     * @return {Object}
+     */
+    log.createLogger = (subName, subDelimiter, subStyles) => {
+      const resultDelimiter = subDelimiter !== undefined ? subDelimiter : delimiter;
+      const resultStyles = subStyles !== undefined ? subStyles : styles;
+      const resultName = `${name} ${resultDelimiter} ${subName}`;
+      return createLogger$1(resultName, resultDelimiter, resultStyles);
+    };
+
+    /**
+     * Create a new logger.
+     *
+     * @param {string} newName
+     *        The name for the new logger
+     * @param {string} [newDelimiter]
+     *        Optional delimiter
+     * @param {string} [newStyles]
+     *        Optional styles
+     * @return {Object}
+     */
+    log.createNewLogger = (newName, newDelimiter, newStyles) => {
+      return createLogger$1(newName, newDelimiter, newStyles);
+    };
+
+    /**
+     * Enumeration of available logging levels, where the keys are the level names
+     * and the values are `|`-separated strings containing logging methods allowed
+     * in that logging level. These strings are used to create a regular expression
+     * matching the function name being called.
+     *
+     * Levels provided by Video.js are:
+     *
+     * - `off`: Matches no calls. Any value that can be cast to `false` will have
+     *   this effect. The most restrictive.
+     * - `all`: Matches only Video.js-provided functions (`debug`, `log`,
+     *   `log.warn`, and `log.error`).
+     * - `debug`: Matches `log.debug`, `log`, `log.warn`, and `log.error` calls.
+     * - `info` (default): Matches `log`, `log.warn`, and `log.error` calls.
+     * - `warn`: Matches `log.warn` and `log.error` calls.
+     * - `error`: Matches only `log.error` calls.
+     *
+     * @type {Object}
+     */
+    log.levels = {
+      all: 'debug|log|warn|error',
+      off: '',
+      debug: 'debug|log|warn|error',
+      info: 'log|warn|error',
+      warn: 'warn|error',
+      error: 'error',
+      DEFAULT: level
+    };
+
+    /**
+     * Get or set the current logging level.
+     *
+     * If a string matching a key from {@link module:log.levels} is provided, acts
+     * as a setter.
+     *
+     * @param  {'all'|'debug'|'info'|'warn'|'error'|'off'} [lvl]
+     *         Pass a valid level to set a new logging level.
+     *
+     * @return {string}
+     *         The current logging level.
+     */
+    log.level = lvl => {
+      if (typeof lvl === 'string') {
+        if (!log.levels.hasOwnProperty(lvl)) {
+          throw new Error(`"${lvl}" in not a valid log level`);
+        }
+        level = lvl;
+      }
+      return level;
+    };
+
+    /**
+     * Returns an array containing everything that has been logged to the history.
+     *
+     * This array is a shallow clone of the internal history record. However, its
+     * contents are _not_ cloned; so, mutating objects inside this array will
+     * mutate them in history.
+     *
+     * @return {Array}
+     */
+    log.history = () => history ? [].concat(history) : [];
+
+    /**
+     * Allows you to filter the history by the given logger name
+     *
+     * @param {string} fname
+     *        The name to filter by
+     *
+     * @return {Array}
+     *         The filtered list to return
+     */
+    log.history.filter = fname => {
+      return (history || []).filter(historyItem => {
+        // if the first item in each historyItem includes `fname`, then it's a match
+        return new RegExp(`.*${fname}.*`).test(historyItem[0]);
+      });
+    };
+
+    /**
+     * Clears the internal history tracking, but does not prevent further history
+     * tracking.
+     */
+    log.history.clear = () => {
+      if (history) {
+        history.length = 0;
+      }
+    };
+
+    /**
+     * Disable history tracking if it is currently enabled.
+     */
+    log.history.disable = () => {
+      if (history !== null) {
+        history.length = 0;
+        history = null;
+      }
+    };
+
+    /**
+     * Enable history tracking if it is currently disabled.
+     */
+    log.history.enable = () => {
+      if (history === null) {
+        history = [];
+      }
+    };
+
+    /**
+     * Logs error messages. Similar to `console.error`.
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as an error
+     */
+    log.error = (...args) => logByType('error', level, args);
+
+    /**
+     * Logs warning messages. Similar to `console.warn`.
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as a warning.
+     */
+    log.warn = (...args) => logByType('warn', level, args);
+
+    /**
+     * Logs debug messages. Similar to `console.debug`, but may also act as a comparable
+     * log if `console.debug` is not available
+     *
+     * @param {...*} args
+     *        One or more messages or objects that should be logged as debug.
+     */
+    log.debug = (...args) => logByType('debug', level, args);
+    return log;
+  }
+
+  /**
+   * @file log.js
+   * @module log
+   */
+  const log$1 = createLogger$1('VIDEOJS');
+  const createLogger = log$1.createLogger;
+
+  /**
+   * @file obj.js
+   * @module obj
+   */
+
+  /**
+   * @callback obj:EachCallback
+   *
+   * @param {*} value
+   *        The current key for the object that is being iterated over.
+   *
+   * @param {string} key
+   *        The current key-value for object that is being iterated over
+   */
+
+  /**
+   * @callback obj:ReduceCallback
+   *
+   * @param {*} accum
+   *        The value that is accumulating over the reduce loop.
+   *
+   * @param {*} value
+   *        The current key for the object that is being iterated over.
+   *
+   * @param {string} key
+   *        The current key-value for object that is being iterated over
+   *
+   * @return {*}
+   *         The new accumulated value.
+   */
+  const toString$1 = Object.prototype.toString;
+
+  /**
+   * Get the keys of an Object
+   *
+   * @param {Object}
+   *        The Object to get the keys from
+   *
+   * @return {string[]}
+   *         An array of the keys from the object. Returns an empty array if the
+   *         object passed in was invalid or had no keys.
+   *
+   * @private
+   */
+  const keys = function (object) {
+    return isObject$1(object) ? Object.keys(object) : [];
+  };
+
+  /**
+   * Array-like iteration for objects.
+   *
+   * @param {Object} object
+   *        The object to iterate over
+   *
+   * @param {obj:EachCallback} fn
+   *        The callback function which is called for each key in the object.
+   */
+  function each(object, fn) {
+    keys(object).forEach(key => fn(object[key], key));
+  }
+
+  /**
+   * Array-like reduce for objects.
+   *
+   * @param {Object} object
+   *        The Object that you want to reduce.
+   *
+   * @param {Function} fn
+   *         A callback function which is called for each key in the object. It
+   *         receives the accumulated value and the per-iteration value and key
+   *         as arguments.
+   *
+   * @param {*} [initial = 0]
+   *        Starting value
+   *
+   * @return {*}
+   *         The final accumulated value.
+   */
+  function reduce(object, fn, initial = 0) {
+    return keys(object).reduce((accum, key) => fn(accum, object[key], key), initial);
+  }
+
+  /**
+   * Returns whether a value is an object of any kind - including DOM nodes,
+   * arrays, regular expressions, etc. Not functions, though.
+   *
+   * This avoids the gotcha where using `typeof` on a `null` value
+   * results in `'object'`.
+   *
+   * @param  {Object} value
+   * @return {boolean}
+   */
+  function isObject$1(value) {
+    return !!value && typeof value === 'object';
+  }
+
+  /**
+   * Returns whether an object appears to be a "plain" object - that is, a
+   * direct instance of `Object`.
+   *
+   * @param  {Object} value
+   * @return {boolean}
+   */
+  function isPlain(value) {
+    return isObject$1(value) && toString$1.call(value) === '[object Object]' && value.constructor === Object;
+  }
+
+  /**
+   * Merge two objects recursively.
+   *
+   * Performs a deep merge like
+   * {@link https://lodash.com/docs/4.17.10#merge|lodash.merge}, but only merges
+   * plain objects (not arrays, elements, or anything else).
+   *
+   * Non-plain object values will be copied directly from the right-most
+   * argument.
+   *
+   * @param   {Object[]} sources
+   *          One or more objects to merge into a new object.
+   *
+   * @return {Object}
+   *          A new object that is the merged result of all sources.
+   */
+  function merge$2(...sources) {
+    const result = {};
+    sources.forEach(source => {
+      if (!source) {
+        return;
+      }
+      each(source, (value, key) => {
+        if (!isPlain(value)) {
+          result[key] = value;
+          return;
+        }
+        if (!isPlain(result[key])) {
+          result[key] = {};
+        }
+        result[key] = merge$2(result[key], value);
+      });
+    });
+    return result;
+  }
+
+  /**
+   * Returns an array of values for a given object
+   *
+   * @param  {Object} source - target object
+   * @return {Array<unknown>} - object values
+   */
+  function values$1(source = {}) {
+    const result = [];
+    for (const key in source) {
+      if (source.hasOwnProperty(key)) {
+        const value = source[key];
+        result.push(value);
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Object.defineProperty but "lazy", which means that the value is only set after
+   * it is retrieved the first time, rather than being set right away.
+   *
+   * @param {Object} obj the object to set the property on
+   * @param {string} key the key for the property to set
+   * @param {Function} getValue the function used to get the value when it is needed.
+   * @param {boolean} setter whether a setter should be allowed or not
+   */
+  function defineLazyProperty(obj, key, getValue, setter = true) {
+    const set = value => Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      writable: true
+    });
+    const options = {
+      configurable: true,
+      enumerable: true,
+      get() {
+        const value = getValue();
+        set(value);
+        return value;
+      }
+    };
+    if (setter) {
+      options.set = set;
+    }
+    return Object.defineProperty(obj, key, options);
+  }
+
+  var Obj = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    each: each,
+    reduce: reduce,
+    isObject: isObject$1,
+    isPlain: isPlain,
+    merge: merge$2,
+    values: values$1,
+    defineLazyProperty: defineLazyProperty
+  });
+
+  /**
+   * @file browser.js
+   * @module browser
+   */
+
+  /**
+   * Whether or not this device is an iPod.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_IPOD = false;
+
+  /**
+   * The detected iOS version - or `null`.
+   *
+   * @static
+   * @type {string|null}
+   */
+  let IOS_VERSION = null;
+
+  /**
+   * Whether or not this is an Android device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_ANDROID = false;
+
+  /**
+   * The detected Android version - or `null` if not Android or indeterminable.
+   *
+   * @static
+   * @type {number|string|null}
+   */
+  let ANDROID_VERSION;
+
+  /**
+   * Whether or not this is Mozilla Firefox.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_FIREFOX = false;
+
+  /**
+   * Whether or not this is Microsoft Edge.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_EDGE = false;
+
+  /**
+   * Whether or not this is any Chromium Browser
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_CHROMIUM = false;
+
+  /**
+   * Whether or not this is any Chromium browser that is not Edge.
+   *
+   * This will also be `true` for Chrome on iOS, which will have different support
+   * as it is actually Safari under the hood.
+   *
+   * Deprecated, as the behaviour to not match Edge was to prevent Legacy Edge's UA matching.
+   * IS_CHROMIUM should be used instead.
+   * "Chromium but not Edge" could be explicitly tested with IS_CHROMIUM && !IS_EDGE
+   *
+   * @static
+   * @deprecated
+   * @type {Boolean}
+   */
+  let IS_CHROME = false;
+
+  /**
+   * The detected Chromium version - or `null`.
+   *
+   * @static
+   * @type {number|null}
+   */
+  let CHROMIUM_VERSION = null;
+
+  /**
+   * The detected Google Chrome version - or `null`.
+   * This has always been the _Chromium_ version, i.e. would return on Chromium Edge.
+   * Deprecated, use CHROMIUM_VERSION instead.
+   *
+   * @static
+   * @deprecated
+   * @type {number|null}
+   */
+  let CHROME_VERSION = null;
+
+  /**
+   * The detected Internet Explorer version - or `null`.
+   *
+   * @static
+   * @deprecated
+   * @type {number|null}
+   */
+  let IE_VERSION = null;
+
+  /**
+   * Whether or not this is desktop Safari.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_SAFARI = false;
+
+  /**
+   * Whether or not this is a Windows machine.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_WINDOWS = false;
+
+  /**
+   * Whether or not this device is an iPad.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_IPAD = false;
+
+  /**
+   * Whether or not this device is an iPhone.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  // The Facebook app's UIWebView identifies as both an iPhone and iPad, so
+  // to identify iPhones, we need to exclude iPads.
+  // http://artsy.github.io/blog/2012/10/18/the-perils-of-ios-user-agent-sniffing/
+  let IS_IPHONE = false;
+
+  /**
+   * Whether or not this is a Tizen device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_TIZEN = false;
+
+  /**
+   * Whether or not this is a WebOS device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_WEBOS = false;
+
+  /**
+   * Whether or not this is a Smart TV (Tizen or WebOS) device.
+   *
+   * @static
+   * @type {Boolean}
+   */
+  let IS_SMART_TV = false;
+
+  /**
+   * Whether or not this device is touch-enabled.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const TOUCH_ENABLED = Boolean(isReal() && ('ontouchstart' in window || window.navigator.maxTouchPoints || window.DocumentTouch && window.document instanceof window.DocumentTouch));
+  const UAD = window.navigator && window.navigator.userAgentData;
+  if (UAD && UAD.platform && UAD.brands) {
+    // If userAgentData is present, use it instead of userAgent to avoid warnings
+    // Currently only implemented on Chromium
+    // userAgentData does not expose Android version, so ANDROID_VERSION remains `null`
+
+    IS_ANDROID = UAD.platform === 'Android';
+    IS_EDGE = Boolean(UAD.brands.find(b => b.brand === 'Microsoft Edge'));
+    IS_CHROMIUM = Boolean(UAD.brands.find(b => b.brand === 'Chromium'));
+    IS_CHROME = !IS_EDGE && IS_CHROMIUM;
+    CHROMIUM_VERSION = CHROME_VERSION = (UAD.brands.find(b => b.brand === 'Chromium') || {}).version || null;
+    IS_WINDOWS = UAD.platform === 'Windows';
+  }
+
+  // If the browser is not Chromium, either userAgentData is not present which could be an old Chromium browser,
+  //  or it's a browser that has added userAgentData since that we don't have tests for yet. In either case,
+  // the checks need to be made agiainst the regular userAgent string.
+  if (!IS_CHROMIUM) {
+    const USER_AGENT = window.navigator && window.navigator.userAgent || '';
+    IS_IPOD = /iPod/i.test(USER_AGENT);
+    IOS_VERSION = function () {
+      const match = USER_AGENT.match(/OS (\d+)_/i);
+      if (match && match[1]) {
+        return match[1];
+      }
+      return null;
+    }();
+    IS_ANDROID = /Android/i.test(USER_AGENT);
+    ANDROID_VERSION = function () {
+      // This matches Android Major.Minor.Patch versions
+      // ANDROID_VERSION is Major.Minor as a Number, if Minor isn't available, then only Major is returned
+      const match = USER_AGENT.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i);
+      if (!match) {
+        return null;
+      }
+      const major = match[1] && parseFloat(match[1]);
+      const minor = match[2] && parseFloat(match[2]);
+      if (major && minor) {
+        return parseFloat(match[1] + '.' + match[2]);
+      } else if (major) {
+        return major;
+      }
+      return null;
+    }();
+    IS_FIREFOX = /Firefox/i.test(USER_AGENT);
+    IS_EDGE = /Edg/i.test(USER_AGENT);
+    IS_CHROMIUM = /Chrome/i.test(USER_AGENT) || /CriOS/i.test(USER_AGENT);
+    IS_CHROME = !IS_EDGE && IS_CHROMIUM;
+    CHROMIUM_VERSION = CHROME_VERSION = function () {
+      const match = USER_AGENT.match(/(Chrome|CriOS)\/(\d+)/);
+      if (match && match[2]) {
+        return parseFloat(match[2]);
+      }
+      return null;
+    }();
+    IE_VERSION = function () {
+      const result = /MSIE\s(\d+)\.\d/.exec(USER_AGENT);
+      let version = result && parseFloat(result[1]);
+      if (!version && /Trident\/7.0/i.test(USER_AGENT) && /rv:11.0/.test(USER_AGENT)) {
+        // IE 11 has a different user agent string than other IE versions
+        version = 11.0;
+      }
+      return version;
+    }();
+    IS_TIZEN = /Tizen/i.test(USER_AGENT);
+    IS_WEBOS = /Web0S/i.test(USER_AGENT);
+    IS_SMART_TV = IS_TIZEN || IS_WEBOS;
+    IS_SAFARI = /Safari/i.test(USER_AGENT) && !IS_CHROME && !IS_ANDROID && !IS_EDGE && !IS_SMART_TV;
+    IS_WINDOWS = /Windows/i.test(USER_AGENT);
+    IS_IPAD = /iPad/i.test(USER_AGENT) || IS_SAFARI && TOUCH_ENABLED && !/iPhone/i.test(USER_AGENT);
+    IS_IPHONE = /iPhone/i.test(USER_AGENT) && !IS_IPAD;
+  }
+
+  /**
+   * Whether or not this is an iOS device.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const IS_IOS = IS_IPHONE || IS_IPAD || IS_IPOD;
+
+  /**
+   * Whether or not this is any flavor of Safari - including iOS.
+   *
+   * @static
+   * @const
+   * @type {Boolean}
+   */
+  const IS_ANY_SAFARI = (IS_SAFARI || IS_IOS) && !IS_CHROME;
+
+  var browser = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    get IS_IPOD () { return IS_IPOD; },
+    get IOS_VERSION () { return IOS_VERSION; },
+    get IS_ANDROID () { return IS_ANDROID; },
+    get ANDROID_VERSION () { return ANDROID_VERSION; },
+    get IS_FIREFOX () { return IS_FIREFOX; },
+    get IS_EDGE () { return IS_EDGE; },
+    get IS_CHROMIUM () { return IS_CHROMIUM; },
+    get IS_CHROME () { return IS_CHROME; },
+    get CHROMIUM_VERSION () { return CHROMIUM_VERSION; },
+    get CHROME_VERSION () { return CHROME_VERSION; },
+    get IE_VERSION () { return IE_VERSION; },
+    get IS_SAFARI () { return IS_SAFARI; },
+    get IS_WINDOWS () { return IS_WINDOWS; },
+    get IS_IPAD () { return IS_IPAD; },
+    get IS_IPHONE () { return IS_IPHONE; },
+    get IS_TIZEN () { return IS_TIZEN; },
+    get IS_WEBOS () { return IS_WEBOS; },
+    get IS_SMART_TV () { return IS_SMART_TV; },
+    TOUCH_ENABLED: TOUCH_ENABLED,
+    IS_IOS: IS_IOS,
+    IS_ANY_SAFARI: IS_ANY_SAFARI
+  });
+
+  /**
+   * @file dom.js
+   * @module dom
+   */
+
+  /**
+   * Detect if a value is a string with any non-whitespace characters.
+   *
+   * @private
+   * @param  {string} str
+   *         The string to check
+   *
+   * @return {boolean}
+   *         Will be `true` if the string is non-blank, `false` otherwise.
+   *
+   */
+  function isNonBlankString(str) {
+    // we use str.trim as it will trim any whitespace characters
+    // from the front or back of non-whitespace characters. aka
+    // Any string that contains non-whitespace characters will
+    // still contain them after `trim` but whitespace only strings
+    // will have a length of 0, failing this check.
+    return typeof str === 'string' && Boolean(str.trim());
+  }
+
+  /**
+   * Throws an error if the passed string has whitespace. This is used by
+   * class methods to be relatively consistent with the classList API.
+   *
+   * @private
+   * @param  {string} str
+   *         The string to check for whitespace.
+   *
+   * @throws {Error}
+   *         Throws an error if there is whitespace in the string.
+   */
+  function throwIfWhitespace(str) {
+    // str.indexOf instead of regex because str.indexOf is faster performance wise.
+    if (str.indexOf(' ') >= 0) {
+      throw new Error('class has illegal whitespace characters');
+    }
+  }
+
+  /**
+   * Whether the current DOM interface appears to be real (i.e. not simulated).
+   *
+   * @return {boolean}
+   *         Will be `true` if the DOM appears to be real, `false` otherwise.
+   */
+  function isReal() {
+    // Both document and window will never be undefined thanks to `global`.
+    return document === window.document;
+  }
+
+  /**
+   * Determines, via duck typing, whether or not a value is a DOM element.
+   *
+   * @param  {*} value
+   *         The value to check.
+   *
+   * @return {boolean}
+   *         Will be `true` if the value is a DOM element, `false` otherwise.
+   */
+  function isEl(value) {
+    return isObject$1(value) && value.nodeType === 1;
+  }
+
+  /**
+   * Determines if the current DOM is embedded in an iframe.
+   *
+   * @return {boolean}
+   *         Will be `true` if the DOM is embedded in an iframe, `false`
+   *         otherwise.
+   */
+  function isInFrame() {
+    // We need a try/catch here because Safari will throw errors when attempting
+    // to get either `parent` or `self`
+    try {
+      return window.parent !== window.self;
+    } catch (x) {
+      return true;
+    }
+  }
+
+  /**
+   * Creates functions to query the DOM using a given method.
+   *
+   * @private
+   * @param   {string} method
+   *          The method to create the query with.
+   *
+   * @return  {Function}
+   *          The query method
+   */
+  function createQuerier(method) {
+    return function (selector, context) {
+      if (!isNonBlankString(selector)) {
+        return document[method](null);
+      }
+      if (isNonBlankString(context)) {
+        context = document.querySelector(context);
+      }
+      const ctx = isEl(context) ? context : document;
+      return ctx[method] && ctx[method](selector);
+    };
+  }
+
+  /**
+   * Creates an element and applies properties, attributes, and inserts content.
+   *
+   * @param  {string} [tagName='div']
+   *         Name of tag to be created.
+   *
+   * @param  {Object} [properties={}]
+   *         Element properties to be applied.
+   *
+   * @param  {Object} [attributes={}]
+   *         Element attributes to be applied.
+   *
+   * @param {ContentDescriptor} [content]
+   *        A content descriptor object.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  function createEl(tagName = 'div', properties = {}, attributes = {}, content) {
+    const el = document.createElement(tagName);
+    Object.getOwnPropertyNames(properties).forEach(function (propName) {
+      const val = properties[propName];
+
+      // Handle textContent since it's not supported everywhere and we have a
+      // method for it.
+      if (propName === 'textContent') {
+        textContent(el, val);
+      } else if (el[propName] !== val || propName === 'tabIndex') {
+        el[propName] = val;
+      }
+    });
+    Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
+      el.setAttribute(attrName, attributes[attrName]);
+    });
+    if (content) {
+      appendContent(el, content);
+    }
+    return el;
+  }
+
+  /**
+   * Injects text into an element, replacing any existing contents entirely.
+   *
+   * @param  {HTMLElement} el
+   *         The element to add text content into
+   *
+   * @param  {string} text
+   *         The text content to add.
+   *
+   * @return {Element}
+   *         The element with added text content.
+   */
+  function textContent(el, text) {
+    if (typeof el.textContent === 'undefined') {
+      el.innerText = text;
+    } else {
+      el.textContent = text;
+    }
+    return el;
+  }
+
+  /**
+   * Insert an element as the first child node of another
+   *
+   * @param {Element} child
+   *        Element to insert
+   *
+   * @param {Element} parent
+   *        Element to insert child into
+   */
+  function prependTo(child, parent) {
+    if (parent.firstChild) {
+      parent.insertBefore(child, parent.firstChild);
+    } else {
+      parent.appendChild(child);
+    }
+  }
+
+  /**
+   * Check if an element has a class name.
+   *
+   * @param  {Element} element
+   *         Element to check
+   *
+   * @param  {string} classToCheck
+   *         Class name to check for
+   *
+   * @return {boolean}
+   *         Will be `true` if the element has a class, `false` otherwise.
+   *
+   * @throws {Error}
+   *         Throws an error if `classToCheck` has white space.
+   */
+  function hasClass(element, classToCheck) {
+    throwIfWhitespace(classToCheck);
+    return element.classList.contains(classToCheck);
+  }
+
+  /**
+   * Add a class name to an element.
+   *
+   * @param  {Element} element
+   *         Element to add class name to.
+   *
+   * @param  {...string} classesToAdd
+   *         One or more class name to add.
+   *
+   * @return {Element}
+   *         The DOM element with the added class name.
+   */
+  function addClass(element, ...classesToAdd) {
+    element.classList.add(...classesToAdd.reduce((prev, current) => prev.concat(current.split(/\s+/)), []));
+    return element;
+  }
+
+  /**
+   * Remove a class name from an element.
+   *
+   * @param  {Element} element
+   *         Element to remove a class name from.
+   *
+   * @param  {...string} classesToRemove
+   *         One or more class name to remove.
+   *
+   * @return {Element}
+   *         The DOM element with class name removed.
+   */
+  function removeClass(element, ...classesToRemove) {
+    // Protect in case the player gets disposed
+    if (!element) {
+      log$1.warn("removeClass was called with an element that doesn't exist");
+      return null;
+    }
+    element.classList.remove(...classesToRemove.reduce((prev, current) => prev.concat(current.split(/\s+/)), []));
+    return element;
+  }
+
+  /**
+   * The callback definition for toggleClass.
+   *
+   * @callback module:dom~PredicateCallback
+   * @param    {Element} element
+   *           The DOM element of the Component.
+   *
+   * @param    {string} classToToggle
+   *           The `className` that wants to be toggled
+   *
+   * @return   {boolean|undefined}
+   *           If `true` is returned, the `classToToggle` will be added to the
+   *           `element`. If `false`, the `classToToggle` will be removed from
+   *           the `element`. If `undefined`, the callback will be ignored.
+   */
+
+  /**
+   * Adds or removes a class name to/from an element depending on an optional
+   * condition or the presence/absence of the class name.
+   *
+   * @param  {Element} element
+   *         The element to toggle a class name on.
+   *
+   * @param  {string} classToToggle
+   *         The class that should be toggled.
+   *
+   * @param  {boolean|module:dom~PredicateCallback} [predicate]
+   *         See the return value for {@link module:dom~PredicateCallback}
+   *
+   * @return {Element}
+   *         The element with a class that has been toggled.
+   */
+  function toggleClass(element, classToToggle, predicate) {
+    if (typeof predicate === 'function') {
+      predicate = predicate(element, classToToggle);
+    }
+    if (typeof predicate !== 'boolean') {
+      predicate = undefined;
+    }
+    classToToggle.split(/\s+/).forEach(className => element.classList.toggle(className, predicate));
+    return element;
+  }
+
+  /**
+   * Apply attributes to an HTML element.
+   *
+   * @param {Element} el
+   *        Element to add attributes to.
+   *
+   * @param {Object} [attributes]
+   *        Attributes to be applied.
+   */
+  function setAttributes(el, attributes) {
+    Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
+      const attrValue = attributes[attrName];
+      if (attrValue === null || typeof attrValue === 'undefined' || attrValue === false) {
+        el.removeAttribute(attrName);
+      } else {
+        el.setAttribute(attrName, attrValue === true ? '' : attrValue);
+      }
+    });
+  }
+
+  /**
+   * Get an element's attribute values, as defined on the HTML tag.
+   *
+   * Attributes are not the same as properties. They're defined on the tag
+   * or with setAttribute.
+   *
+   * @param  {Element} tag
+   *         Element from which to get tag attributes.
+   *
+   * @return {Object}
+   *         All attributes of the element. Boolean attributes will be `true` or
+   *         `false`, others will be strings.
+   */
+  function getAttributes(tag) {
+    const obj = {};
+
+    // known boolean attributes
+    // we can check for matching boolean properties, but not all browsers
+    // and not all tags know about these attributes, so, we still want to check them manually
+    const knownBooleans = ['autoplay', 'controls', 'playsinline', 'loop', 'muted', 'default', 'defaultMuted'];
+    if (tag && tag.attributes && tag.attributes.length > 0) {
+      const attrs = tag.attributes;
+      for (let i = attrs.length - 1; i >= 0; i--) {
+        const attrName = attrs[i].name;
+        /** @type {boolean|string} */
+        let attrVal = attrs[i].value;
+
+        // check for known booleans
+        // the matching element property will return a value for typeof
+        if (knownBooleans.includes(attrName)) {
+          // the value of an included boolean attribute is typically an empty
+          // string ('') which would equal false if we just check for a false value.
+          // we also don't want support bad code like autoplay='false'
+          attrVal = attrVal !== null ? true : false;
+        }
+        obj[attrName] = attrVal;
+      }
+    }
+    return obj;
+  }
+
+  /**
+   * Get the value of an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to get the value of.
+   *
+   * @return {string}
+   *         The value of the attribute.
+   */
+  function getAttribute(el, attribute) {
+    return el.getAttribute(attribute);
+  }
+
+  /**
+   * Set the value of an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to set.
+   *
+   * @param {string} value
+   *        Value to set the attribute to.
+   */
+  function setAttribute(el, attribute, value) {
+    el.setAttribute(attribute, value);
+  }
+
+  /**
+   * Remove an element's attribute.
+   *
+   * @param {Element} el
+   *        A DOM element.
+   *
+   * @param {string} attribute
+   *        Attribute to remove.
+   */
+  function removeAttribute(el, attribute) {
+    el.removeAttribute(attribute);
+  }
+
+  /**
+   * Attempt to block the ability to select text.
+   */
+  function blockTextSelection() {
+    document.body.focus();
+    document.onselectstart = function () {
+      return false;
+    };
+  }
+
+  /**
+   * Turn off text selection blocking.
+   */
+  function unblockTextSelection() {
+    document.onselectstart = function () {
+      return true;
+    };
+  }
+
+  /**
+   * Identical to the native `getBoundingClientRect` function, but ensures that
+   * the method is supported at all (it is in all browsers we claim to support)
+   * and that the element is in the DOM before continuing.
+   *
+   * This wrapper function also shims properties which are not provided by some
+   * older browsers (namely, IE8).
+   *
+   * Additionally, some browsers do not support adding properties to a
+   * `ClientRect`/`DOMRect` object; so, we shallow-copy it with the standard
+   * properties (except `x` and `y` which are not widely supported). This helps
+   * avoid implementations where keys are non-enumerable.
+   *
+   * @param  {Element} el
+   *         Element whose `ClientRect` we want to calculate.
+   *
+   * @return {Object|undefined}
+   *         Always returns a plain object - or `undefined` if it cannot.
+   */
+  function getBoundingClientRect(el) {
+    if (el && el.getBoundingClientRect && el.parentNode) {
+      const rect = el.getBoundingClientRect();
+      const result = {};
+      ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach(k => {
+        if (rect[k] !== undefined) {
+          result[k] = rect[k];
+        }
+      });
+      if (!result.height) {
+        result.height = parseFloat(computedStyle(el, 'height'));
+      }
+      if (!result.width) {
+        result.width = parseFloat(computedStyle(el, 'width'));
+      }
+      return result;
+    }
+  }
+
+  /**
+   * Represents the position of a DOM element on the page.
+   *
+   * @typedef  {Object} module:dom~Position
+   *
+   * @property {number} left
+   *           Pixels to the left.
+   *
+   * @property {number} top
+   *           Pixels from the top.
+   */
+
+  /**
+   * Get the position of an element in the DOM.
+   *
+   * Uses `getBoundingClientRect` technique from John Resig.
+   *
+   * @see http://ejohn.org/blog/getboundingclientrect-is-awesome/
+   *
+   * @param  {Element} el
+   *         Element from which to get offset.
+   *
+   * @return {module:dom~Position}
+   *         The position of the element that was passed in.
+   */
+  function findPosition(el) {
+    if (!el || el && !el.offsetParent) {
+      return {
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0
+      };
+    }
+    const width = el.offsetWidth;
+    const height = el.offsetHeight;
+    let left = 0;
+    let top = 0;
+    while (el.offsetParent && el !== document[FullscreenApi.fullscreenElement]) {
+      left += el.offsetLeft;
+      top += el.offsetTop;
+      el = el.offsetParent;
+    }
+    return {
+      left,
+      top,
+      width,
+      height
+    };
+  }
+
+  /**
+   * Represents x and y coordinates for a DOM element or mouse pointer.
+   *
+   * @typedef  {Object} module:dom~Coordinates
+   *
+   * @property {number} x
+   *           x coordinate in pixels
+   *
+   * @property {number} y
+   *           y coordinate in pixels
+   */
+
+  /**
+   * Get the pointer position within an element.
+   *
+   * The base on the coordinates are the bottom left of the element.
+   *
+   * @param  {Element} el
+   *         Element on which to get the pointer position on.
+   *
+   * @param  {Event} event
+   *         Event object.
+   *
+   * @return {module:dom~Coordinates}
+   *         A coordinates object corresponding to the mouse position.
+   *
+   */
+  function getPointerPosition(el, event) {
+    const translated = {
+      x: 0,
+      y: 0
+    };
+    if (IS_IOS) {
+      let item = el;
+      while (item && item.nodeName.toLowerCase() !== 'html') {
+        const transform = computedStyle(item, 'transform');
+        if (/^matrix/.test(transform)) {
+          const values = transform.slice(7, -1).split(/,\s/).map(Number);
+          translated.x += values[4];
+          translated.y += values[5];
+        } else if (/^matrix3d/.test(transform)) {
+          const values = transform.slice(9, -1).split(/,\s/).map(Number);
+          translated.x += values[12];
+          translated.y += values[13];
+        }
+        item = item.parentNode;
+      }
+    }
+    const position = {};
+    const boxTarget = findPosition(event.target);
+    const box = findPosition(el);
+    const boxW = box.width;
+    const boxH = box.height;
+    let offsetY = event.offsetY - (box.top - boxTarget.top);
+    let offsetX = event.offsetX - (box.left - boxTarget.left);
+    if (event.changedTouches) {
+      offsetX = event.changedTouches[0].pageX - box.left;
+      offsetY = event.changedTouches[0].pageY + box.top;
+      if (IS_IOS) {
+        offsetX -= translated.x;
+        offsetY -= translated.y;
+      }
+    }
+    position.y = 1 - Math.max(0, Math.min(1, offsetY / boxH));
+    position.x = Math.max(0, Math.min(1, offsetX / boxW));
+    return position;
+  }
+
+  /**
+   * Determines, via duck typing, whether or not a value is a text node.
+   *
+   * @param  {*} value
+   *         Check if this value is a text node.
+   *
+   * @return {boolean}
+   *         Will be `true` if the value is a text node, `false` otherwise.
+   */
+  function isTextNode$1(value) {
+    return isObject$1(value) && value.nodeType === 3;
+  }
+
+  /**
+   * Empties the contents of an element.
+   *
+   * @param  {Element} el
+   *         The element to empty children from
+   *
+   * @return {Element}
+   *         The element with no children
+   */
+  function emptyEl(el) {
+    while (el.firstChild) {
+      el.removeChild(el.firstChild);
+    }
+    return el;
+  }
+
+  /**
+   * This is a mixed value that describes content to be injected into the DOM
+   * via some method. It can be of the following types:
+   *
+   * Type       | Description
+   * -----------|-------------
+   * `string`   | The value will be normalized into a text node.
+   * `Element`  | The value will be accepted as-is.
+   * `Text`     | A TextNode. The value will be accepted as-is.
+   * `Array`    | A one-dimensional array of strings, elements, text nodes, or functions. These functions should return a string, element, or text node (any other return value, like an array, will be ignored).
+   * `Function` | A function, which is expected to return a string, element, text node, or array - any of the other possible values described above. This means that a content descriptor could be a function that returns an array of functions, but those second-level functions must return strings, elements, or text nodes.
+   *
+   * @typedef {string|Element|Text|Array|Function} ContentDescriptor
+   */
+
+  /**
+   * Normalizes content for eventual insertion into the DOM.
+   *
+   * This allows a wide range of content definition methods, but helps protect
+   * from falling into the trap of simply writing to `innerHTML`, which could
+   * be an XSS concern.
+   *
+   * The content for an element can be passed in multiple types and
+   * combinations, whose behavior is as follows:
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Array}
+   *         All of the content that was passed in, normalized to an array of
+   *         elements or text nodes.
+   */
+  function normalizeContent(content) {
+    // First, invoke content if it is a function. If it produces an array,
+    // that needs to happen before normalization.
+    if (typeof content === 'function') {
+      content = content();
+    }
+
+    // Next up, normalize to an array, so one or many items can be normalized,
+    // filtered, and returned.
+    return (Array.isArray(content) ? content : [content]).map(value => {
+      // First, invoke value if it is a function to produce a new value,
+      // which will be subsequently normalized to a Node of some kind.
+      if (typeof value === 'function') {
+        value = value();
+      }
+      if (isEl(value) || isTextNode$1(value)) {
+        return value;
+      }
+      if (typeof value === 'string' && /\S/.test(value)) {
+        return document.createTextNode(value);
+      }
+    }).filter(value => value);
+  }
+
+  /**
+   * Normalizes and appends content to an element.
+   *
+   * @param  {Element} el
+   *         Element to append normalized content to.
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Element}
+   *         The element with appended normalized content.
+   */
+  function appendContent(el, content) {
+    normalizeContent(content).forEach(node => el.appendChild(node));
+    return el;
+  }
+
+  /**
+   * Normalizes and inserts content into an element; this is identical to
+   * `appendContent()`, except it empties the element first.
+   *
+   * @param {Element} el
+   *        Element to insert normalized content into.
+   *
+   * @param {ContentDescriptor} content
+   *        A content descriptor value.
+   *
+   * @return {Element}
+   *         The element with inserted normalized content.
+   */
+  function insertContent(el, content) {
+    return appendContent(emptyEl(el), content);
+  }
+
+  /**
+   * Check if an event was a single left click.
+   *
+   * @param  {MouseEvent} event
+   *         Event object.
+   *
+   * @return {boolean}
+   *         Will be `true` if a single left click, `false` otherwise.
+   */
+  function isSingleLeftClick(event) {
+    // Note: if you create something draggable, be sure to
+    // call it on both `mousedown` and `mousemove` event,
+    // otherwise `mousedown` should be enough for a button
+
+    if (event.button === undefined && event.buttons === undefined) {
+      // Why do we need `buttons` ?
+      // Because, middle mouse sometimes have this:
+      // e.button === 0 and e.buttons === 4
+      // Furthermore, we want to prevent combination click, something like
+      // HOLD middlemouse then left click, that would be
+      // e.button === 0, e.buttons === 5
+      // just `button` is not gonna work
+
+      // Alright, then what this block does ?
+      // this is for chrome `simulate mobile devices`
+      // I want to support this as well
+
+      return true;
+    }
+    if (event.button === 0 && event.buttons === undefined) {
+      // Touch screen, sometimes on some specific device, `buttons`
+      // doesn't have anything (safari on ios, blackberry...)
+
+      return true;
+    }
+
+    // `mouseup` event on a single left click has
+    // `button` and `buttons` equal to 0
+    if (event.type === 'mouseup' && event.button === 0 && event.buttons === 0) {
+      return true;
+    }
+    if (event.button !== 0 || event.buttons !== 1) {
+      // This is the reason we have those if else block above
+      // if any special case we can catch and let it slide
+      // we do it above, when get to here, this definitely
+      // is-not-left-click
+
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * Finds a single DOM element matching `selector` within the optional
+   * `context` of another DOM element (defaulting to `document`).
+   *
+   * @param  {string} selector
+   *         A valid CSS selector, which will be passed to `querySelector`.
+   *
+   * @param  {Element|String} [context=document]
+   *         A DOM element within which to query. Can also be a selector
+   *         string in which case the first matching element will be used
+   *         as context. If missing (or no element matches selector), falls
+   *         back to `document`.
+   *
+   * @return {Element|null}
+   *         The element that was found or null.
+   */
+  const $ = createQuerier('querySelector');
+
+  /**
+   * Finds a all DOM elements matching `selector` within the optional
+   * `context` of another DOM element (defaulting to `document`).
+   *
+   * @param  {string} selector
+   *         A valid CSS selector, which will be passed to `querySelectorAll`.
+   *
+   * @param  {Element|String} [context=document]
+   *         A DOM element within which to query. Can also be a selector
+   *         string in which case the first matching element will be used
+   *         as context. If missing (or no element matches selector), falls
+   *         back to `document`.
+   *
+   * @return {NodeList}
+   *         A element list of elements that were found. Will be empty if none
+   *         were found.
+   *
+   */
+  const $$ = createQuerier('querySelectorAll');
+
+  /**
+   * A safe getComputedStyle.
+   *
+   * This is needed because in Firefox, if the player is loaded in an iframe with
+   * `display:none`, then `getComputedStyle` returns `null`, so, we do a
+   * null-check to make sure that the player doesn't break in these cases.
+   *
+   * @param    {Element} el
+   *           The element you want the computed style of
+   *
+   * @param    {string} prop
+   *           The property name you want
+   *
+   * @see      https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+   */
+  function computedStyle(el, prop) {
+    if (!el || !prop) {
+      return '';
+    }
+    if (typeof window.getComputedStyle === 'function') {
+      let computedStyleValue;
+      try {
+        computedStyleValue = window.getComputedStyle(el);
+      } catch (e) {
+        return '';
+      }
+      return computedStyleValue ? computedStyleValue.getPropertyValue(prop) || computedStyleValue[prop] : '';
+    }
+    return '';
+  }
+
+  /**
+   * Copy document style sheets to another window.
+   *
+   * @param    {Window} win
+   *           The window element you want to copy the document style sheets to.
+   *
+   */
+  function copyStyleSheetsToWindow(win) {
+    [...document.styleSheets].forEach(styleSheet => {
+      try {
+        const cssRules = [...styleSheet.cssRules].map(rule => rule.cssText).join('');
+        const style = document.createElement('style');
+        style.textContent = cssRules;
+        win.document.head.appendChild(style);
+      } catch (e) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.type = styleSheet.type;
+        // For older Safari this has to be the string; on other browsers setting the MediaList works
+        link.media = styleSheet.media.mediaText;
+        link.href = styleSheet.href;
+        win.document.head.appendChild(link);
+      }
+    });
+  }
+
+  var Dom = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    isReal: isReal,
+    isEl: isEl,
+    isInFrame: isInFrame,
+    createEl: createEl,
+    textContent: textContent,
+    prependTo: prependTo,
+    hasClass: hasClass,
+    addClass: addClass,
+    removeClass: removeClass,
+    toggleClass: toggleClass,
+    setAttributes: setAttributes,
+    getAttributes: getAttributes,
+    getAttribute: getAttribute,
+    setAttribute: setAttribute,
+    removeAttribute: removeAttribute,
+    blockTextSelection: blockTextSelection,
+    unblockTextSelection: unblockTextSelection,
+    getBoundingClientRect: getBoundingClientRect,
+    findPosition: findPosition,
+    getPointerPosition: getPointerPosition,
+    isTextNode: isTextNode$1,
+    emptyEl: emptyEl,
+    normalizeContent: normalizeContent,
+    appendContent: appendContent,
+    insertContent: insertContent,
+    isSingleLeftClick: isSingleLeftClick,
+    $: $,
+    $$: $$,
+    computedStyle: computedStyle,
+    copyStyleSheetsToWindow: copyStyleSheetsToWindow
+  });
+
+  /**
+   * @file setup.js - Functions for setting up a player without
+   * user interaction based on the data-setup `attribute` of the video tag.
+   *
+   * @module setup
+   */
+  let _windowLoaded = false;
+  let videojs$1;
+
+  /**
+   * Set up any tags that have a data-setup `attribute` when the player is started.
+   */
+  const autoSetup = function () {
+    if (videojs$1.options.autoSetup === false) {
+      return;
+    }
+    const vids = Array.prototype.slice.call(document.getElementsByTagName('video'));
+    const audios = Array.prototype.slice.call(document.getElementsByTagName('audio'));
+    const divs = Array.prototype.slice.call(document.getElementsByTagName('video-js'));
+    const mediaEls = vids.concat(audios, divs);
+
+    // Check if any media elements exist
+    if (mediaEls && mediaEls.length > 0) {
+      for (let i = 0, e = mediaEls.length; i < e; i++) {
+        const mediaEl = mediaEls[i];
+
+        // Check if element exists, has getAttribute func.
+        if (mediaEl && mediaEl.getAttribute) {
+          // Make sure this player hasn't already been set up.
+          if (mediaEl.player === undefined) {
+            const options = mediaEl.getAttribute('data-setup');
+
+            // Check if data-setup attr exists.
+            // We only auto-setup if they've added the data-setup attr.
+            if (options !== null) {
+              // Create new video.js instance.
+              videojs$1(mediaEl);
+            }
+          }
+
+          // If getAttribute isn't defined, we need to wait for the DOM.
+        } else {
+          autoSetupTimeout(1);
+          break;
+        }
+      }
+
+      // No videos were found, so keep looping unless page is finished loading.
+    } else if (!_windowLoaded) {
+      autoSetupTimeout(1);
+    }
+  };
+
+  /**
+   * Wait until the page is loaded before running autoSetup. This will be called in
+   * autoSetup if `hasLoaded` returns false.
+   *
+   * @param {number} wait
+   *        How long to wait in ms
+   *
+   * @param {module:videojs} [vjs]
+   *        The videojs library function
+   */
+  function autoSetupTimeout(wait, vjs) {
+    // Protect against breakage in non-browser environments
+    if (!isReal()) {
+      return;
+    }
+    if (vjs) {
+      videojs$1 = vjs;
+    }
+    window.setTimeout(autoSetup, wait);
+  }
+
+  /**
+   * Used to set the internal tracking of window loaded state to true.
+   *
+   * @private
+   */
+  function setWindowLoaded() {
+    _windowLoaded = true;
+    window.removeEventListener('load', setWindowLoaded);
+  }
+  if (isReal()) {
+    if (document.readyState === 'complete') {
+      setWindowLoaded();
+    } else {
+      /**
+       * Listen for the load event on window, and set _windowLoaded to true.
+       *
+       * We use a standard event listener here to avoid incrementing the GUID
+       * before any players are created.
+       *
+       * @listens load
+       */
+      window.addEventListener('load', setWindowLoaded);
+    }
+  }
+
+  /**
+   * @file stylesheet.js
+   * @module stylesheet
+   */
+
+  /**
+   * Create a DOM style element given a className for it.
+   *
+   * @param {string} className
+   *        The className to add to the created style element.
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  const createStyleElement = function (className) {
+    const style = document.createElement('style');
+    style.className = className;
+    return style;
+  };
+
+  /**
+   * Add text to a DOM element.
+   *
+   * @param {Element} el
+   *        The Element to add text content to.
+   *
+   * @param {string} content
+   *        The text to add to the element.
+   */
+  const setTextContent = function (el, content) {
+    if (el.styleSheet) {
+      el.styleSheet.cssText = content;
+    } else {
+      el.textContent = content;
+    }
+  };
+
+  /**
+   * @file dom-data.js
+   * @module dom-data
+   */
+
+  /**
+   * Element Data Store.
+   *
+   * Allows for binding data to an element without putting it directly on the
+   * element. Ex. Event listeners are stored here.
+   * (also from jsninja.com, slightly modified and updated for closure compiler)
+   *
+   * @type {Object}
+   * @private
+   */
+  var DomData = new WeakMap();
+
+  /**
+   * @file guid.js
+   * @module guid
+   */
+
+  // Default value for GUIDs. This allows us to reset the GUID counter in tests.
+  //
+  // The initial GUID is 3 because some users have come to rely on the first
+  // default player ID ending up as `vjs_video_3`.
+  //
+  // See: https://github.com/videojs/video.js/pull/6216
+  const _initialGuid = 3;
+
+  /**
+   * Unique ID for an element or function
+   *
+   * @type {Number}
+   */
+  let _guid = _initialGuid;
+
+  /**
+   * Get a unique auto-incrementing ID by number that has not been returned before.
+   *
+   * @return {number}
+   *         A new unique ID.
+   */
+  function newGUID() {
+    return _guid++;
+  }
+
+  /**
+   * @file events.js. An Event System (John Resig - Secrets of a JS Ninja http://jsninja.com/)
+   * (Original book version wasn't completely usable, so fixed some things and made Closure Compiler compatible)
+   * This should work very similarly to jQuery's events, however it's based off the book version which isn't as
+   * robust as jquery's, so there's probably some differences.
+   *
+   * @file events.js
+   * @module events
+   */
+
+  /**
+   * Clean up the listener cache and dispatchers
+   *
+   * @param {Element|Object} elem
+   *        Element to clean up
+   *
+   * @param {string} type
+   *        Type of event to clean up
+   */
+  function _cleanUpEvents(elem, type) {
+    if (!DomData.has(elem)) {
+      return;
+    }
+    const data = DomData.get(elem);
+
+    // Remove the events of a particular type if there are none left
+    if (data.handlers[type].length === 0) {
+      delete data.handlers[type];
+      // data.handlers[type] = null;
+      // Setting to null was causing an error with data.handlers
+
+      // Remove the meta-handler from the element
+      if (elem.removeEventListener) {
+        elem.removeEventListener(type, data.dispatcher, false);
+      } else if (elem.detachEvent) {
+        elem.detachEvent('on' + type, data.dispatcher);
+      }
+    }
+
+    // Remove the events object if there are no types left
+    if (Object.getOwnPropertyNames(data.handlers).length <= 0) {
+      delete data.handlers;
+      delete data.dispatcher;
+      delete data.disabled;
+    }
+
+    // Finally remove the element data if there is no data left
+    if (Object.getOwnPropertyNames(data).length === 0) {
+      DomData.delete(elem);
+    }
+  }
+
+  /**
+   * Loops through an array of event types and calls the requested method for each type.
+   *
+   * @param {Function} fn
+   *        The event method we want to use.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind listeners to
+   *
+   * @param {string[]} types
+   *        Type of event to bind to.
+   *
+   * @param {Function} callback
+   *        Event listener.
+   */
+  function _handleMultipleEvents(fn, elem, types, callback) {
+    types.forEach(function (type) {
+      // Call the event method for each one of the types
+      fn(elem, type, callback);
+    });
+  }
+
+  /**
+   * Fix a native event to have standard property values
+   *
+   * @param {Object} event
+   *        Event object to fix.
+   *
+   * @return {Object}
+   *         Fixed event object.
+   */
+  function fixEvent(event) {
+    if (event.fixed_) {
+      return event;
+    }
+    function returnTrue() {
+      return true;
+    }
+    function returnFalse() {
+      return false;
+    }
+
+    // Test if fixing up is needed
+    // Used to check if !event.stopPropagation instead of isPropagationStopped
+    // But native events return true for stopPropagation, but don't have
+    // other expected methods like isPropagationStopped. Seems to be a problem
+    // with the Javascript Ninja code. So we're just overriding all events now.
+    if (!event || !event.isPropagationStopped || !event.isImmediatePropagationStopped) {
+      const old = event || window.event;
+      event = {};
+      // Clone the old object so that we can modify the values event = {};
+      // IE8 Doesn't like when you mess with native event properties
+      // Firefox returns false for event.hasOwnProperty('type') and other props
+      //  which makes copying more difficult.
+      // TODO: Probably best to create a whitelist of event props
+      for (const key in old) {
+        // Safari 6.0.3 warns you if you try to copy deprecated layerX/Y
+        // Chrome warns you if you try to copy deprecated keyboardEvent.keyLocation
+        // and webkitMovementX/Y
+        // Lighthouse complains if Event.path is copied
+        if (key !== 'layerX' && key !== 'layerY' && key !== 'keyLocation' && key !== 'webkitMovementX' && key !== 'webkitMovementY' && key !== 'path') {
+          // Chrome 32+ warns if you try to copy deprecated returnValue, but
+          // we still want to if preventDefault isn't supported (IE8).
+          if (!(key === 'returnValue' && old.preventDefault)) {
+            event[key] = old[key];
+          }
+        }
+      }
+
+      // The event occurred on this element
+      if (!event.target) {
+        event.target = event.srcElement || document;
+      }
+
+      // Handle which other element the event is related to
+      if (!event.relatedTarget) {
+        event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
+      }
+
+      // Stop the default browser action
+      event.preventDefault = function () {
+        if (old.preventDefault) {
+          old.preventDefault();
+        }
+        event.returnValue = false;
+        old.returnValue = false;
+        event.defaultPrevented = true;
+      };
+      event.defaultPrevented = false;
+
+      // Stop the event from bubbling
+      event.stopPropagation = function () {
+        if (old.stopPropagation) {
+          old.stopPropagation();
+        }
+        event.cancelBubble = true;
+        old.cancelBubble = true;
+        event.isPropagationStopped = returnTrue;
+      };
+      event.isPropagationStopped = returnFalse;
+
+      // Stop the event from bubbling and executing other handlers
+      event.stopImmediatePropagation = function () {
+        if (old.stopImmediatePropagation) {
+          old.stopImmediatePropagation();
+        }
+        event.isImmediatePropagationStopped = returnTrue;
+        event.stopPropagation();
+      };
+      event.isImmediatePropagationStopped = returnFalse;
+
+      // Handle mouse position
+      if (event.clientX !== null && event.clientX !== undefined) {
+        const doc = document.documentElement;
+        const body = document.body;
+        event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
+        event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
+      }
+
+      // Handle key presses
+      event.which = event.charCode || event.keyCode;
+
+      // Fix button for mouse clicks:
+      // 0 == left; 1 == middle; 2 == right
+      if (event.button !== null && event.button !== undefined) {
+        // The following is disabled because it does not pass videojs-standard
+        // and... yikes.
+        /* eslint-disable */
+        event.button = event.button & 1 ? 0 : event.button & 4 ? 1 : event.button & 2 ? 2 : 0;
+        /* eslint-enable */
+      }
+    }
+
+    event.fixed_ = true;
+    // Returns fixed-up instance
+    return event;
+  }
+
+  /**
+   * Whether passive event listeners are supported
+   */
+  let _supportsPassive;
+  const supportsPassive = function () {
+    if (typeof _supportsPassive !== 'boolean') {
+      _supportsPassive = false;
+      try {
+        const opts = Object.defineProperty({}, 'passive', {
+          get() {
+            _supportsPassive = true;
+          }
+        });
+        window.addEventListener('test', null, opts);
+        window.removeEventListener('test', null, opts);
+      } catch (e) {
+        // disregard
+      }
+    }
+    return _supportsPassive;
+  };
+
+  /**
+   * Touch events Chrome expects to be passive
+   */
+  const passiveEvents = ['touchstart', 'touchmove'];
+
+  /**
+   * Add an event listener to element
+   * It stores the handler function in a separate cache object
+   * and adds a generic handler to the element's event,
+   * along with a unique id (guid) to the element.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind listeners to
+   *
+   * @param {string|string[]} type
+   *        Type of event to bind to.
+   *
+   * @param {Function} fn
+   *        Event listener.
+   */
+  function on(elem, type, fn) {
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(on, elem, type, fn);
+    }
+    if (!DomData.has(elem)) {
+      DomData.set(elem, {});
+    }
+    const data = DomData.get(elem);
+
+    // We need a place to store all our handler data
+    if (!data.handlers) {
+      data.handlers = {};
+    }
+    if (!data.handlers[type]) {
+      data.handlers[type] = [];
+    }
+    if (!fn.guid) {
+      fn.guid = newGUID();
+    }
+    data.handlers[type].push(fn);
+    if (!data.dispatcher) {
+      data.disabled = false;
+      data.dispatcher = function (event, hash) {
+        if (data.disabled) {
+          return;
+        }
+        event = fixEvent(event);
+        const handlers = data.handlers[event.type];
+        if (handlers) {
+          // Copy handlers so if handlers are added/removed during the process it doesn't throw everything off.
+          const handlersCopy = handlers.slice(0);
+          for (let m = 0, n = handlersCopy.length; m < n; m++) {
+            if (event.isImmediatePropagationStopped()) {
+              break;
+            } else {
+              try {
+                handlersCopy[m].call(elem, event, hash);
+              } catch (e) {
+                log$1.error(e);
+              }
+            }
+          }
+        }
+      };
+    }
+    if (data.handlers[type].length === 1) {
+      if (elem.addEventListener) {
+        let options = false;
+        if (supportsPassive() && passiveEvents.indexOf(type) > -1) {
+          options = {
+            passive: true
+          };
+        }
+        elem.addEventListener(type, data.dispatcher, options);
+      } else if (elem.attachEvent) {
+        elem.attachEvent('on' + type, data.dispatcher);
+      }
+    }
+  }
+
+  /**
+   * Removes event listeners from an element
+   *
+   * @param {Element|Object} elem
+   *        Object to remove listeners from.
+   *
+   * @param {string|string[]} [type]
+   *        Type of listener to remove. Don't include to remove all events from element.
+   *
+   * @param {Function} [fn]
+   *        Specific listener to remove. Don't include to remove listeners for an event
+   *        type.
+   */
+  function off(elem, type, fn) {
+    // Don't want to add a cache object through getElData if not needed
+    if (!DomData.has(elem)) {
+      return;
+    }
+    const data = DomData.get(elem);
+
+    // If no events exist, nothing to unbind
+    if (!data.handlers) {
+      return;
+    }
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(off, elem, type, fn);
+    }
+
+    // Utility function
+    const removeType = function (el, t) {
+      data.handlers[t] = [];
+      _cleanUpEvents(el, t);
+    };
+
+    // Are we removing all bound events?
+    if (type === undefined) {
+      for (const t in data.handlers) {
+        if (Object.prototype.hasOwnProperty.call(data.handlers || {}, t)) {
+          removeType(elem, t);
+        }
+      }
+      return;
+    }
+    const handlers = data.handlers[type];
+
+    // If no handlers exist, nothing to unbind
+    if (!handlers) {
+      return;
+    }
+
+    // If no listener was provided, remove all listeners for type
+    if (!fn) {
+      removeType(elem, type);
+      return;
+    }
+
+    // We're only removing a single handler
+    if (fn.guid) {
+      for (let n = 0; n < handlers.length; n++) {
+        if (handlers[n].guid === fn.guid) {
+          handlers.splice(n--, 1);
+        }
+      }
+    }
+    _cleanUpEvents(elem, type);
+  }
+
+  /**
+   * Trigger an event for an element
+   *
+   * @param {Element|Object} elem
+   *        Element to trigger an event on
+   *
+   * @param {EventTarget~Event|string} event
+   *        A string (the type) or an event object with a type attribute
+   *
+   * @param {Object} [hash]
+   *        data hash to pass along with the event
+   *
+   * @return {boolean|undefined}
+   *         Returns the opposite of `defaultPrevented` if default was
+   *         prevented. Otherwise, returns `undefined`
+   */
+  function trigger(elem, event, hash) {
+    // Fetches element data and a reference to the parent (for bubbling).
+    // Don't want to add a data object to cache for every parent,
+    // so checking hasElData first.
+    const elemData = DomData.has(elem) ? DomData.get(elem) : {};
+    const parent = elem.parentNode || elem.ownerDocument;
+    // type = event.type || event,
+    // handler;
+
+    // If an event name was passed as a string, creates an event out of it
+    if (typeof event === 'string') {
+      event = {
+        type: event,
+        target: elem
+      };
+    } else if (!event.target) {
+      event.target = elem;
+    }
+
+    // Normalizes the event properties.
+    event = fixEvent(event);
+
+    // If the passed element has a dispatcher, executes the established handlers.
+    if (elemData.dispatcher) {
+      elemData.dispatcher.call(elem, event, hash);
+    }
+
+    // Unless explicitly stopped or the event does not bubble (e.g. media events)
+    // recursively calls this function to bubble the event up the DOM.
+    if (parent && !event.isPropagationStopped() && event.bubbles === true) {
+      trigger.call(null, parent, event, hash);
+
+      // If at the top of the DOM, triggers the default action unless disabled.
+    } else if (!parent && !event.defaultPrevented && event.target && event.target[event.type]) {
+      if (!DomData.has(event.target)) {
+        DomData.set(event.target, {});
+      }
+      const targetData = DomData.get(event.target);
+
+      // Checks if the target has a default action for this event.
+      if (event.target[event.type]) {
+        // Temporarily disables event dispatching on the target as we have already executed the handler.
+        targetData.disabled = true;
+        // Executes the default action.
+        if (typeof event.target[event.type] === 'function') {
+          event.target[event.type]();
+        }
+        // Re-enables event dispatching.
+        targetData.disabled = false;
+      }
+    }
+
+    // Inform the triggerer if the default was prevented by returning false
+    return !event.defaultPrevented;
+  }
+
+  /**
+   * Trigger a listener only once for an event.
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind to.
+   *
+   * @param {string|string[]} type
+   *        Name/type of event
+   *
+   * @param {Event~EventListener} fn
+   *        Event listener function
+   */
+  function one(elem, type, fn) {
+    if (Array.isArray(type)) {
+      return _handleMultipleEvents(one, elem, type, fn);
+    }
+    const func = function () {
+      off(elem, type, func);
+      fn.apply(this, arguments);
+    };
+
+    // copy the guid to the new function so it can removed using the original function's ID
+    func.guid = fn.guid = fn.guid || newGUID();
+    on(elem, type, func);
+  }
+
+  /**
+   * Trigger a listener only once and then turn if off for all
+   * configured events
+   *
+   * @param {Element|Object} elem
+   *        Element or object to bind to.
+   *
+   * @param {string|string[]} type
+   *        Name/type of event
+   *
+   * @param {Event~EventListener} fn
+   *        Event listener function
+   */
+  function any(elem, type, fn) {
+    const func = function () {
+      off(elem, type, func);
+      fn.apply(this, arguments);
+    };
+
+    // copy the guid to the new function so it can removed using the original function's ID
+    func.guid = fn.guid = fn.guid || newGUID();
+
+    // multiple ons, but one off for everything
+    on(elem, type, func);
+  }
+
+  var Events = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    fixEvent: fixEvent,
+    on: on,
+    off: off,
+    trigger: trigger,
+    one: one,
+    any: any
+  });
+
+  /**
+   * @file fn.js
+   * @module fn
+   */
+  const UPDATE_REFRESH_INTERVAL = 30;
+
+  /**
+   * A private, internal-only function for changing the context of a function.
+   *
+   * It also stores a unique id on the function so it can be easily removed from
+   * events.
+   *
+   * @private
+   * @function
+   * @param    {*} context
+   *           The object to bind as scope.
+   *
+   * @param    {Function} fn
+   *           The function to be bound to a scope.
+   *
+   * @param    {number} [uid]
+   *           An optional unique ID for the function to be set
+   *
+   * @return   {Function}
+   *           The new function that will be bound into the context given
+   */
+  const bind_ = function (context, fn, uid) {
+    // Make sure the function has a unique ID
+    if (!fn.guid) {
+      fn.guid = newGUID();
+    }
+
+    // Create the new function that changes the context
+    const bound = fn.bind(context);
+
+    // Allow for the ability to individualize this function
+    // Needed in the case where multiple objects might share the same prototype
+    // IF both items add an event listener with the same function, then you try to remove just one
+    // it will remove both because they both have the same guid.
+    // when using this, you need to use the bind method when you remove the listener as well.
+    // currently used in text tracks
+    bound.guid = uid ? uid + '_' + fn.guid : fn.guid;
+    return bound;
+  };
+
+  /**
+   * Wraps the given function, `fn`, with a new function that only invokes `fn`
+   * at most once per every `wait` milliseconds.
+   *
+   * @function
+   * @param    {Function} fn
+   *           The function to be throttled.
+   *
+   * @param    {number}   wait
+   *           The number of milliseconds by which to throttle.
+   *
+   * @return   {Function}
+   */
+  const throttle = function (fn, wait) {
+    let last = window.performance.now();
+    const throttled = function (...args) {
+      const now = window.performance.now();
+      if (now - last >= wait) {
+        fn(...args);
+        last = now;
+      }
+    };
+    return throttled;
+  };
+
+  /**
+   * Creates a debounced function that delays invoking `func` until after `wait`
+   * milliseconds have elapsed since the last time the debounced function was
+   * invoked.
+   *
+   * Inspired by lodash and underscore implementations.
+   *
+   * @function
+   * @param    {Function} func
+   *           The function to wrap with debounce behavior.
+   *
+   * @param    {number} wait
+   *           The number of milliseconds to wait after the last invocation.
+   *
+   * @param    {boolean} [immediate]
+   *           Whether or not to invoke the function immediately upon creation.
+   *
+   * @param    {Object} [context=window]
+   *           The "context" in which the debounced function should debounce. For
+   *           example, if this function should be tied to a Video.js player,
+   *           the player can be passed here. Alternatively, defaults to the
+   *           global `window` object.
+   *
+   * @return   {Function}
+   *           A debounced function.
+   */
+  const debounce = function (func, wait, immediate, context = window) {
+    let timeout;
+    const cancel = () => {
+      context.clearTimeout(timeout);
+      timeout = null;
+    };
+
+    /* eslint-disable consistent-this */
+    const debounced = function () {
+      const self = this;
+      const args = arguments;
+      let later = function () {
+        timeout = null;
+        later = null;
+        if (!immediate) {
+          func.apply(self, args);
+        }
+      };
+      if (!timeout && immediate) {
+        func.apply(self, args);
+      }
+      context.clearTimeout(timeout);
+      timeout = context.setTimeout(later, wait);
+    };
+    /* eslint-enable consistent-this */
+
+    debounced.cancel = cancel;
+    return debounced;
+  };
+
+  var Fn = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UPDATE_REFRESH_INTERVAL: UPDATE_REFRESH_INTERVAL,
+    bind_: bind_,
+    throttle: throttle,
+    debounce: debounce
+  });
+
+  /**
+   * @file src/js/event-target.js
+   */
+  let EVENT_MAP;
+
+  /**
+   * `EventTarget` is a class that can have the same API as the DOM `EventTarget`. It
+   * adds shorthand functions that wrap around lengthy functions. For example:
+   * the `on` function is a wrapper around `addEventListener`.
+   *
+   * @see [EventTarget Spec]{@link https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget}
+   * @class EventTarget
+   */
+  class EventTarget$2 {
+    /**
+     * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+     * function that will get called when an event with a certain name gets triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to call with `EventTarget`s
+     */
+    on(type, fn) {
+      // Remove the addEventListener alias before calling Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      on(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+     * This makes it so that the `event listener` will no longer get called when the
+     * named event happens.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to remove.
+     */
+    off(type, fn) {
+      off(this, type, fn);
+    }
+    /**
+     * This function will add an `event listener` that gets triggered only once. After the
+     * first trigger it will get removed. This is like adding an `event listener`
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    one(type, fn) {
+      // Remove the addEventListener aliasing Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      one(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * This function will add an `event listener` that gets triggered only once and is
+     * removed from all events. This is like adding an array of `event listener`s
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+     * first time it is triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    any(type, fn) {
+      // Remove the addEventListener aliasing Events.on
+      // so we don't get into an infinite type loop
+      const ael = this.addEventListener;
+      this.addEventListener = () => {};
+      any(this, type, fn);
+      this.addEventListener = ael;
+    }
+    /**
+     * This function causes an event to happen. This will then cause any `event listeners`
+     * that are waiting for that event, to get called. If there are no `event listeners`
+     * for an event then nothing will happen.
+     *
+     * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+     * Trigger will also call the `on` + `uppercaseEventName` function.
+     *
+     * Example:
+     * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+     * `onClick` if it exists.
+     *
+     * @param {string|EventTarget~Event|Object} event
+     *        The name of the event, an `Event`, or an object with a key of type set to
+     *        an event name.
+     */
+    trigger(event) {
+      const type = event.type || event;
+
+      // deprecation
+      // In a future version we should default target to `this`
+      // similar to how we default the target to `elem` in
+      // `Events.trigger`. Right now the default `target` will be
+      // `document` due to the `Event.fixEvent` call.
+      if (typeof event === 'string') {
+        event = {
+          type
+        };
+      }
+      event = fixEvent(event);
+      if (this.allowedEvents_[type] && this['on' + type]) {
+        this['on' + type](event);
+      }
+      trigger(this, event);
+    }
+    queueTrigger(event) {
+      // only set up EVENT_MAP if it'll be used
+      if (!EVENT_MAP) {
+        EVENT_MAP = new Map();
+      }
+      const type = event.type || event;
+      let map = EVENT_MAP.get(this);
+      if (!map) {
+        map = new Map();
+        EVENT_MAP.set(this, map);
+      }
+      const oldTimeout = map.get(type);
+      map.delete(type);
+      window.clearTimeout(oldTimeout);
+      const timeout = window.setTimeout(() => {
+        map.delete(type);
+        // if we cleared out all timeouts for the current target, delete its map
+        if (map.size === 0) {
+          map = null;
+          EVENT_MAP.delete(this);
+        }
+        this.trigger(event);
+      }, 0);
+      map.set(type, timeout);
+    }
+  }
+
+  /**
+   * A Custom DOM event.
+   *
+   * @typedef {CustomEvent} Event
+   * @see [Properties]{@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent}
+   */
+
+  /**
+   * All event listeners should follow the following format.
+   *
+   * @callback EventListener
+   * @this {EventTarget}
+   *
+   * @param {Event} event
+   *        the event that triggered this function
+   *
+   * @param {Object} [hash]
+   *        hash of data sent during the event
+   */
+
+  /**
+   * An object containing event names as keys and booleans as values.
+   *
+   * > NOTE: If an event name is set to a true value here {@link EventTarget#trigger}
+   *         will have extra functionality. See that function for more information.
+   *
+   * @property EventTarget.prototype.allowedEvents_
+   * @protected
+   */
+  EventTarget$2.prototype.allowedEvents_ = {};
+
+  /**
+   * An alias of {@link EventTarget#on}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#on}
+   */
+  EventTarget$2.prototype.addEventListener = EventTarget$2.prototype.on;
+
+  /**
+   * An alias of {@link EventTarget#off}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#off}
+   */
+  EventTarget$2.prototype.removeEventListener = EventTarget$2.prototype.off;
+
+  /**
+   * An alias of {@link EventTarget#trigger}. Allows `EventTarget` to mimic
+   * the standard DOM API.
+   *
+   * @function
+   * @see {@link EventTarget#trigger}
+   */
+  EventTarget$2.prototype.dispatchEvent = EventTarget$2.prototype.trigger;
+
+  /**
+   * @file mixins/evented.js
+   * @module evented
+   */
+  const objName = obj => {
+    if (typeof obj.name === 'function') {
+      return obj.name();
+    }
+    if (typeof obj.name === 'string') {
+      return obj.name;
+    }
+    if (obj.name_) {
+      return obj.name_;
+    }
+    if (obj.constructor && obj.constructor.name) {
+      return obj.constructor.name;
+    }
+    return typeof obj;
+  };
+
+  /**
+   * Returns whether or not an object has had the evented mixin applied.
+   *
+   * @param  {Object} object
+   *         An object to test.
+   *
+   * @return {boolean}
+   *         Whether or not the object appears to be evented.
+   */
+  const isEvented = object => object instanceof EventTarget$2 || !!object.eventBusEl_ && ['on', 'one', 'off', 'trigger'].every(k => typeof object[k] === 'function');
+
+  /**
+   * Adds a callback to run after the evented mixin applied.
+   *
+   * @param  {Object} target
+   *         An object to Add
+   * @param  {Function} callback
+   *         The callback to run.
+   */
+  const addEventedCallback = (target, callback) => {
+    if (isEvented(target)) {
+      callback();
+    } else {
+      if (!target.eventedCallbacks) {
+        target.eventedCallbacks = [];
+      }
+      target.eventedCallbacks.push(callback);
+    }
+  };
+
+  /**
+   * Whether a value is a valid event type - non-empty string or array.
+   *
+   * @private
+   * @param  {string|Array} type
+   *         The type value to test.
+   *
+   * @return {boolean}
+   *         Whether or not the type is a valid event type.
+   */
+  const isValidEventType = type =>
+  // The regex here verifies that the `type` contains at least one non-
+  // whitespace character.
+  typeof type === 'string' && /\S/.test(type) || Array.isArray(type) && !!type.length;
+
+  /**
+   * Validates a value to determine if it is a valid event target. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the target does not appear to be a valid event target.
+   *
+   * @param  {Object} target
+   *         The object to test.
+   *
+   * @param  {Object} obj
+   *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateTarget = (target, obj, fnName) => {
+    if (!target || !target.nodeName && !isEvented(target)) {
+      throw new Error(`Invalid target for ${objName(obj)}#${fnName}; must be a DOM node or evented object.`);
+    }
+  };
+
+  /**
+   * Validates a value to determine if it is a valid event target. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the type does not appear to be a valid event type.
+   *
+   * @param  {string|Array} type
+   *         The type to test.
+   *
+   * @param  {Object} obj
+  *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateEventType = (type, obj, fnName) => {
+    if (!isValidEventType(type)) {
+      throw new Error(`Invalid event type for ${objName(obj)}#${fnName}; must be a non-empty string or array.`);
+    }
+  };
+
+  /**
+   * Validates a value to determine if it is a valid listener. Throws if not.
+   *
+   * @private
+   * @throws {Error}
+   *         If the listener is not a function.
+   *
+   * @param  {Function} listener
+   *         The listener to test.
+   *
+   * @param  {Object} obj
+   *         The evented object we are validating for
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   */
+  const validateListener = (listener, obj, fnName) => {
+    if (typeof listener !== 'function') {
+      throw new Error(`Invalid listener for ${objName(obj)}#${fnName}; must be a function.`);
+    }
+  };
+
+  /**
+   * Takes an array of arguments given to `on()` or `one()`, validates them, and
+   * normalizes them into an object.
+   *
+   * @private
+   * @param  {Object} self
+   *         The evented object on which `on()` or `one()` was called. This
+   *         object will be bound as the `this` value for the listener.
+   *
+   * @param  {Array} args
+   *         An array of arguments passed to `on()` or `one()`.
+   *
+   * @param  {string} fnName
+   *         The name of the evented mixin function that called this.
+   *
+   * @return {Object}
+   *         An object containing useful values for `on()` or `one()` calls.
+   */
+  const normalizeListenArgs = (self, args, fnName) => {
+    // If the number of arguments is less than 3, the target is always the
+    // evented object itself.
+    const isTargetingSelf = args.length < 3 || args[0] === self || args[0] === self.eventBusEl_;
+    let target;
+    let type;
+    let listener;
+    if (isTargetingSelf) {
+      target = self.eventBusEl_;
+
+      // Deal with cases where we got 3 arguments, but we are still listening to
+      // the evented object itself.
+      if (args.length >= 3) {
+        args.shift();
+      }
+      [type, listener] = args;
+    } else {
+      [target, type, listener] = args;
+    }
+    validateTarget(target, self, fnName);
+    validateEventType(type, self, fnName);
+    validateListener(listener, self, fnName);
+    listener = bind_(self, listener);
+    return {
+      isTargetingSelf,
+      target,
+      type,
+      listener
+    };
+  };
+
+  /**
+   * Adds the listener to the event type(s) on the target, normalizing for
+   * the type of target.
+   *
+   * @private
+   * @param  {Element|Object} target
+   *         A DOM node or evented object.
+   *
+   * @param  {string} method
+   *         The event binding method to use ("on" or "one").
+   *
+   * @param  {string|Array} type
+   *         One or more event type(s).
+   *
+   * @param  {Function} listener
+   *         A listener function.
+   */
+  const listen = (target, method, type, listener) => {
+    validateTarget(target, target, method);
+    if (target.nodeName) {
+      Events[method](target, type, listener);
+    } else {
+      target[method](type, listener);
+    }
+  };
+
+  /**
+   * Contains methods that provide event capabilities to an object which is passed
+   * to {@link module:evented|evented}.
+   *
+   * @mixin EventedMixin
+   */
+  const EventedMixin = {
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    on(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'on');
+      listen(target, 'on', type, listener);
+
+      // If this object is listening to another evented object.
+      if (!isTargetingSelf) {
+        // If this object is disposed, remove the listener.
+        const removeListenerOnDispose = () => this.off(target, type, listener);
+
+        // Use the same function ID as the listener so we can remove it later it
+        // using the ID of the original listener.
+        removeListenerOnDispose.guid = listener.guid;
+
+        // Add a listener to the target's dispose event as well. This ensures
+        // that if the target is disposed BEFORE this object, we remove the
+        // removal listener that was just added. Otherwise, we create a memory leak.
+        const removeRemoverOnTargetDispose = () => this.off('dispose', removeListenerOnDispose);
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        removeRemoverOnTargetDispose.guid = listener.guid;
+        listen(this, 'on', 'dispose', removeListenerOnDispose);
+        listen(target, 'on', 'dispose', removeRemoverOnTargetDispose);
+      }
+    },
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object. The listener will be called once per event and then removed.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    one(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'one');
+
+      // Targeting this evented object.
+      if (isTargetingSelf) {
+        listen(target, 'one', type, listener);
+
+        // Targeting another evented object.
+      } else {
+        // TODO: This wrapper is incorrect! It should only
+        //       remove the wrapper for the event type that called it.
+        //       Instead all listeners are removed on the first trigger!
+        //       see https://github.com/videojs/video.js/issues/5962
+        const wrapper = (...largs) => {
+          this.off(target, type, wrapper);
+          listener.apply(null, largs);
+        };
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        wrapper.guid = listener.guid;
+        listen(target, 'one', type, wrapper);
+      }
+    },
+    /**
+     * Add a listener to an event (or events) on this object or another evented
+     * object. The listener will only be called once for the first event that is triggered
+     * then removed.
+     *
+     * @param  {string|Array|Element|Object} targetOrType
+     *         If this is a string or array, it represents the event type(s)
+     *         that will trigger the listener.
+     *
+     *         Another evented object can be passed here instead, which will
+     *         cause the listener to listen for events on _that_ object.
+     *
+     *         In either case, the listener's `this` value will be bound to
+     *         this object.
+     *
+     * @param  {string|Array|Function} typeOrListener
+     *         If the first argument was a string or array, this should be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function.
+     */
+    any(...args) {
+      const {
+        isTargetingSelf,
+        target,
+        type,
+        listener
+      } = normalizeListenArgs(this, args, 'any');
+
+      // Targeting this evented object.
+      if (isTargetingSelf) {
+        listen(target, 'any', type, listener);
+
+        // Targeting another evented object.
+      } else {
+        const wrapper = (...largs) => {
+          this.off(target, type, wrapper);
+          listener.apply(null, largs);
+        };
+
+        // Use the same function ID as the listener so we can remove it later
+        // it using the ID of the original listener.
+        wrapper.guid = listener.guid;
+        listen(target, 'any', type, wrapper);
+      }
+    },
+    /**
+     * Removes listener(s) from event(s) on an evented object.
+     *
+     * @param  {string|Array|Element|Object} [targetOrType]
+     *         If this is a string or array, it represents the event type(s).
+     *
+     *         Another evented object can be passed here instead, in which case
+     *         ALL 3 arguments are _required_.
+     *
+     * @param  {string|Array|Function} [typeOrListener]
+     *         If the first argument was a string or array, this may be the
+     *         listener function. Otherwise, this is a string or array of event
+     *         type(s).
+     *
+     * @param  {Function} [listener]
+     *         If the first argument was another evented object, this will be
+     *         the listener function; otherwise, _all_ listeners bound to the
+     *         event type(s) will be removed.
+     */
+    off(targetOrType, typeOrListener, listener) {
+      // Targeting this evented object.
+      if (!targetOrType || isValidEventType(targetOrType)) {
+        off(this.eventBusEl_, targetOrType, typeOrListener);
+
+        // Targeting another evented object.
+      } else {
+        const target = targetOrType;
+        const type = typeOrListener;
+
+        // Fail fast and in a meaningful way!
+        validateTarget(target, this, 'off');
+        validateEventType(type, this, 'off');
+        validateListener(listener, this, 'off');
+
+        // Ensure there's at least a guid, even if the function hasn't been used
+        listener = bind_(this, listener);
+
+        // Remove the dispose listener on this evented object, which was given
+        // the same guid as the event listener in on().
+        this.off('dispose', listener);
+        if (target.nodeName) {
+          off(target, type, listener);
+          off(target, 'dispose', listener);
+        } else if (isEvented(target)) {
+          target.off(type, listener);
+          target.off('dispose', listener);
+        }
+      }
+    },
+    /**
+     * Fire an event on this evented object, causing its listeners to be called.
+     *
+     * @param   {string|Object} event
+     *          An event type or an object with a type property.
+     *
+     * @param   {Object} [hash]
+     *          An additional object to pass along to listeners.
+     *
+     * @return {boolean}
+     *          Whether or not the default behavior was prevented.
+     */
+    trigger(event, hash) {
+      validateTarget(this.eventBusEl_, this, 'trigger');
+      const type = event && typeof event !== 'string' ? event.type : event;
+      if (!isValidEventType(type)) {
+        throw new Error(`Invalid event type for ${objName(this)}#trigger; ` + 'must be a non-empty string or object with a type key that has a non-empty value.');
+      }
+      return trigger(this.eventBusEl_, event, hash);
+    }
+  };
+
+  /**
+   * Applies {@link module:evented~EventedMixin|EventedMixin} to a target object.
+   *
+   * @param  {Object} target
+   *         The object to which to add event methods.
+   *
+   * @param  {Object} [options={}]
+   *         Options for customizing the mixin behavior.
+   *
+   * @param  {string} [options.eventBusKey]
+   *         By default, adds a `eventBusEl_` DOM element to the target object,
+   *         which is used as an event bus. If the target object already has a
+   *         DOM element that should be used, pass its key here.
+   *
+   * @return {Object}
+   *         The target object.
+   */
+  function evented(target, options = {}) {
+    const {
+      eventBusKey
+    } = options;
+
+    // Set or create the eventBusEl_.
+    if (eventBusKey) {
+      if (!target[eventBusKey].nodeName) {
+        throw new Error(`The eventBusKey "${eventBusKey}" does not refer to an element.`);
+      }
+      target.eventBusEl_ = target[eventBusKey];
+    } else {
+      target.eventBusEl_ = createEl('span', {
+        className: 'vjs-event-bus'
+      });
+    }
+    Object.assign(target, EventedMixin);
+    if (target.eventedCallbacks) {
+      target.eventedCallbacks.forEach(callback => {
+        callback();
+      });
+    }
+
+    // When any evented object is disposed, it removes all its listeners.
+    target.on('dispose', () => {
+      target.off();
+      [target, target.el_, target.eventBusEl_].forEach(function (val) {
+        if (val && DomData.has(val)) {
+          DomData.delete(val);
+        }
+      });
+      window.setTimeout(() => {
+        target.eventBusEl_ = null;
+      }, 0);
+    });
+    return target;
+  }
+
+  /**
+   * @file mixins/stateful.js
+   * @module stateful
+   */
+
+  /**
+   * Contains methods that provide statefulness to an object which is passed
+   * to {@link module:stateful}.
+   *
+   * @mixin StatefulMixin
+   */
+  const StatefulMixin = {
+    /**
+     * A hash containing arbitrary keys and values representing the state of
+     * the object.
+     *
+     * @type {Object}
+     */
+    state: {},
+    /**
+     * Set the state of an object by mutating its
+     * {@link module:stateful~StatefulMixin.state|state} object in place.
+     *
+     * @fires   module:stateful~StatefulMixin#statechanged
+     * @param   {Object|Function} stateUpdates
+     *          A new set of properties to shallow-merge into the plugin state.
+     *          Can be a plain object or a function returning a plain object.
+     *
+     * @return {Object|undefined}
+     *          An object containing changes that occurred. If no changes
+     *          occurred, returns `undefined`.
+     */
+    setState(stateUpdates) {
+      // Support providing the `stateUpdates` state as a function.
+      if (typeof stateUpdates === 'function') {
+        stateUpdates = stateUpdates();
+      }
+      let changes;
+      each(stateUpdates, (value, key) => {
+        // Record the change if the value is different from what's in the
+        // current state.
+        if (this.state[key] !== value) {
+          changes = changes || {};
+          changes[key] = {
+            from: this.state[key],
+            to: value
+          };
+        }
+        this.state[key] = value;
+      });
+
+      // Only trigger "statechange" if there were changes AND we have a trigger
+      // function. This allows us to not require that the target object be an
+      // evented object.
+      if (changes && isEvented(this)) {
+        /**
+         * An event triggered on an object that is both
+         * {@link module:stateful|stateful} and {@link module:evented|evented}
+         * indicating that its state has changed.
+         *
+         * @event    module:stateful~StatefulMixin#statechanged
+         * @type     {Object}
+         * @property {Object} changes
+         *           A hash containing the properties that were changed and
+         *           the values they were changed `from` and `to`.
+         */
+        this.trigger({
+          changes,
+          type: 'statechanged'
+        });
+      }
+      return changes;
+    }
+  };
+
+  /**
+   * Applies {@link module:stateful~StatefulMixin|StatefulMixin} to a target
+   * object.
+   *
+   * If the target object is {@link module:evented|evented} and has a
+   * `handleStateChanged` method, that method will be automatically bound to the
+   * `statechanged` event on itself.
+   *
+   * @param   {Object} target
+   *          The object to be made stateful.
+   *
+   * @param   {Object} [defaultState]
+   *          A default set of properties to populate the newly-stateful object's
+   *          `state` property.
+   *
+   * @return {Object}
+   *          Returns the `target`.
+   */
+  function stateful(target, defaultState) {
+    Object.assign(target, StatefulMixin);
+
+    // This happens after the mixing-in because we need to replace the `state`
+    // added in that step.
+    target.state = Object.assign({}, target.state, defaultState);
+
+    // Auto-bind the `handleStateChanged` method of the target object if it exists.
+    if (typeof target.handleStateChanged === 'function' && isEvented(target)) {
+      target.on('statechanged', target.handleStateChanged);
+    }
+    return target;
+  }
+
+  /**
+   * @file str.js
+   * @module to-lower-case
+   */
+
+  /**
+   * Lowercase the first letter of a string.
+   *
+   * @param {string} string
+   *        String to be lowercased
+   *
+   * @return {string}
+   *         The string with a lowercased first letter
+   */
+  const toLowerCase = function (string) {
+    if (typeof string !== 'string') {
+      return string;
+    }
+    return string.replace(/./, w => w.toLowerCase());
+  };
+
+  /**
+   * Uppercase the first letter of a string.
+   *
+   * @param {string} string
+   *        String to be uppercased
+   *
+   * @return {string}
+   *         The string with an uppercased first letter
+   */
+  const toTitleCase$1 = function (string) {
+    if (typeof string !== 'string') {
+      return string;
+    }
+    return string.replace(/./, w => w.toUpperCase());
+  };
+
+  /**
+   * Compares the TitleCase versions of the two strings for equality.
+   *
+   * @param {string} str1
+   *        The first string to compare
+   *
+   * @param {string} str2
+   *        The second string to compare
+   *
+   * @return {boolean}
+   *         Whether the TitleCase versions of the strings are equal
+   */
+  const titleCaseEquals = function (str1, str2) {
+    return toTitleCase$1(str1) === toTitleCase$1(str2);
+  };
+
+  var Str = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    toLowerCase: toLowerCase,
+    toTitleCase: toTitleCase$1,
+    titleCaseEquals: titleCaseEquals
+  });
+
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+  function unwrapExports (x) {
+  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+  }
+
+  function createCommonjsModule(fn, module) {
+  	return module = { exports: {} }, fn(module, module.exports), module.exports;
+  }
+
+  var keycode = createCommonjsModule(function (module, exports) {
+    // Source: http://jsfiddle.net/vWx8V/
+    // http://stackoverflow.com/questions/5603195/full-list-of-javascript-keycodes
+
+    /**
+     * Conenience method returns corresponding value for given keyName or keyCode.
+     *
+     * @param {Mixed} keyCode {Number} or keyName {String}
+     * @return {Mixed}
+     * @api public
+     */
+
+    function keyCode(searchInput) {
+      // Keyboard Events
+      if (searchInput && 'object' === typeof searchInput) {
+        var hasKeyCode = searchInput.which || searchInput.keyCode || searchInput.charCode;
+        if (hasKeyCode) searchInput = hasKeyCode;
+      }
+
+      // Numbers
+      if ('number' === typeof searchInput) return names[searchInput];
+
+      // Everything else (cast to string)
+      var search = String(searchInput);
+
+      // check codes
+      var foundNamedKey = codes[search.toLowerCase()];
+      if (foundNamedKey) return foundNamedKey;
+
+      // check aliases
+      var foundNamedKey = aliases[search.toLowerCase()];
+      if (foundNamedKey) return foundNamedKey;
+
+      // weird character?
+      if (search.length === 1) return search.charCodeAt(0);
+      return undefined;
+    }
+
+    /**
+     * Compares a keyboard event with a given keyCode or keyName.
+     *
+     * @param {Event} event Keyboard event that should be tested
+     * @param {Mixed} keyCode {Number} or keyName {String}
+     * @return {Boolean}
+     * @api public
+     */
+    keyCode.isEventKey = function isEventKey(event, nameOrCode) {
+      if (event && 'object' === typeof event) {
+        var keyCode = event.which || event.keyCode || event.charCode;
+        if (keyCode === null || keyCode === undefined) {
+          return false;
+        }
+        if (typeof nameOrCode === 'string') {
+          // check codes
+          var foundNamedKey = codes[nameOrCode.toLowerCase()];
+          if (foundNamedKey) {
+            return foundNamedKey === keyCode;
+          }
+
+          // check aliases
+          var foundNamedKey = aliases[nameOrCode.toLowerCase()];
+          if (foundNamedKey) {
+            return foundNamedKey === keyCode;
+          }
+        } else if (typeof nameOrCode === 'number') {
+          return nameOrCode === keyCode;
+        }
+        return false;
+      }
+    };
+    exports = module.exports = keyCode;
+
+    /**
+     * Get by name
+     *
+     *   exports.code['enter'] // => 13
+     */
+
+    var codes = exports.code = exports.codes = {
+      'backspace': 8,
+      'tab': 9,
+      'enter': 13,
+      'shift': 16,
+      'ctrl': 17,
+      'alt': 18,
+      'pause/break': 19,
+      'caps lock': 20,
+      'esc': 27,
+      'space': 32,
+      'page up': 33,
+      'page down': 34,
+      'end': 35,
+      'home': 36,
+      'left': 37,
+      'up': 38,
+      'right': 39,
+      'down': 40,
+      'insert': 45,
+      'delete': 46,
+      'command': 91,
+      'left command': 91,
+      'right command': 93,
+      'numpad *': 106,
+      'numpad +': 107,
+      'numpad -': 109,
+      'numpad .': 110,
+      'numpad /': 111,
+      'num lock': 144,
+      'scroll lock': 145,
+      'my computer': 182,
+      'my calculator': 183,
+      ';': 186,
+      '=': 187,
+      ',': 188,
+      '-': 189,
+      '.': 190,
+      '/': 191,
+      '`': 192,
+      '[': 219,
+      '\\': 220,
+      ']': 221,
+      "'": 222
+    };
+
+    // Helper aliases
+
+    var aliases = exports.aliases = {
+      'windows': 91,
+      '⇧': 16,
+      '⌥': 18,
+      '⌃': 17,
+      '⌘': 91,
+      'ctl': 17,
+      'control': 17,
+      'option': 18,
+      'pause': 19,
+      'break': 19,
+      'caps': 20,
+      'return': 13,
+      'escape': 27,
+      'spc': 32,
+      'spacebar': 32,
+      'pgup': 33,
+      'pgdn': 34,
+      'ins': 45,
+      'del': 46,
+      'cmd': 91
+    };
+
+    /*!
+     * Programatically add the following
+     */
+
+    // lower case chars
+    for (i = 97; i < 123; i++) codes[String.fromCharCode(i)] = i - 32;
+
+    // numbers
+    for (var i = 48; i < 58; i++) codes[i - 48] = i;
+
+    // function keys
+    for (i = 1; i < 13; i++) codes['f' + i] = i + 111;
+
+    // numpad keys
+    for (i = 0; i < 10; i++) codes['numpad ' + i] = i + 96;
+
+    /**
+     * Get by code
+     *
+     *   exports.name[13] // => 'Enter'
+     */
+
+    var names = exports.names = exports.title = {}; // title for backward compat
+
+    // Create reverse mapping
+    for (i in codes) names[codes[i]] = i;
+
+    // Add aliases
+    for (var alias in aliases) {
+      codes[alias] = aliases[alias];
+    }
+  });
+  keycode.code;
+  keycode.codes;
+  keycode.aliases;
+  keycode.names;
+  keycode.title;
+
+  /**
+   * Player Component - Base class for all UI objects
+   *
+   * @file component.js
+   */
+
+  /**
+   * Base class for all UI Components.
+   * Components are UI objects which represent both a javascript object and an element
+   * in the DOM. They can be children of other components, and can have
+   * children themselves.
+   *
+   * Components can also use methods from {@link EventTarget}
+   */
+  class Component$1 {
+    /**
+     * A callback that is called when a component is ready. Does not have any
+     * parameters and any callback value will be ignored.
+     *
+     * @callback ReadyCallback
+     * @this Component
+     */
+
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of component options.
+     *
+     * @param {Object[]} [options.children]
+     *        An array of children objects to initialize this component with. Children objects have
+     *        a name property that will be used if more than one component of the same type needs to be
+     *        added.
+     *
+     * @param  {string} [options.className]
+     *         A class or space separated list of classes to add the component
+     *
+     * @param {ReadyCallback} [ready]
+     *        Function that gets called when the `Component` is ready.
+     */
+    constructor(player, options, ready) {
+      // The component might be the player itself and we can't pass `this` to super
+      if (!player && this.play) {
+        this.player_ = player = this; // eslint-disable-line
+      } else {
+        this.player_ = player;
+      }
+      this.isDisposed_ = false;
+
+      // Hold the reference to the parent component via `addChild` method
+      this.parentComponent_ = null;
+
+      // Make a copy of prototype.options_ to protect against overriding defaults
+      this.options_ = merge$2({}, this.options_);
+
+      // Updated options with supplied options
+      options = this.options_ = merge$2(this.options_, options);
+
+      // Get ID from options or options element if one is supplied
+      this.id_ = options.id || options.el && options.el.id;
+
+      // If there was no ID from the options, generate one
+      if (!this.id_) {
+        // Don't require the player ID function in the case of mock players
+        const id = player && player.id && player.id() || 'no_player';
+        this.id_ = `${id}_component_${newGUID()}`;
+      }
+      this.name_ = options.name || null;
+
+      // Create element if one wasn't provided in options
+      if (options.el) {
+        this.el_ = options.el;
+      } else if (options.createEl !== false) {
+        this.el_ = this.createEl();
+      }
+      if (options.className && this.el_) {
+        options.className.split(' ').forEach(c => this.addClass(c));
+      }
+
+      // Remove the placeholder event methods. If the component is evented, the
+      // real methods are added next
+      ['on', 'off', 'one', 'any', 'trigger'].forEach(fn => {
+        this[fn] = undefined;
+      });
+
+      // if evented is anything except false, we want to mixin in evented
+      if (options.evented !== false) {
+        // Make this an evented object and use `el_`, if available, as its event bus
+        evented(this, {
+          eventBusKey: this.el_ ? 'el_' : null
+        });
+        this.handleLanguagechange = this.handleLanguagechange.bind(this);
+        this.on(this.player_, 'languagechange', this.handleLanguagechange);
+      }
+      stateful(this, this.constructor.defaultState);
+      this.children_ = [];
+      this.childIndex_ = {};
+      this.childNameIndex_ = {};
+      this.setTimeoutIds_ = new Set();
+      this.setIntervalIds_ = new Set();
+      this.rafIds_ = new Set();
+      this.namedRafs_ = new Map();
+      this.clearingTimersOnDispose_ = false;
+
+      // Add any child components in options
+      if (options.initChildren !== false) {
+        this.initChildren();
+      }
+
+      // Don't want to trigger ready here or it will go before init is actually
+      // finished for all children that run this constructor
+      this.ready(ready);
+      if (options.reportTouchActivity !== false) {
+        this.enableTouchActivity();
+      }
+    }
+
+    // `on`, `off`, `one`, `any` and `trigger` are here so tsc includes them in definitions.
+    // They are replaced or removed in the constructor
+
+    /**
+     * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
+     * function that will get called when an event with a certain name gets triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to call with `EventTarget`s
+     */
+    on(type, fn) {}
+
+    /**
+     * Removes an `event listener` for a specific event from an instance of `EventTarget`.
+     * This makes it so that the `event listener` will no longer get called when the
+     * named event happens.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} [fn]
+     *        The function to remove. If not specified, all listeners managed by Video.js will be removed.
+     */
+    off(type, fn) {}
+
+    /**
+     * This function will add an `event listener` that gets triggered only once. After the
+     * first trigger it will get removed. This is like adding an `event listener`
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    one(type, fn) {}
+
+    /**
+     * This function will add an `event listener` that gets triggered only once and is
+     * removed from all events. This is like adding an array of `event listener`s
+     * with {@link EventTarget#on} that calls {@link EventTarget#off} on all events the
+     * first time it is triggered.
+     *
+     * @param {string|string[]} type
+     *        An event name or an array of event names.
+     *
+     * @param {Function} fn
+     *        The function to be called once for each event name.
+     */
+    any(type, fn) {}
+
+    /**
+     * This function causes an event to happen. This will then cause any `event listeners`
+     * that are waiting for that event, to get called. If there are no `event listeners`
+     * for an event then nothing will happen.
+     *
+     * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
+     * Trigger will also call the `on` + `uppercaseEventName` function.
+     *
+     * Example:
+     * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
+     * `onClick` if it exists.
+     *
+     * @param {string|Event|Object} event
+     *        The name of the event, an `Event`, or an object with a key of type set to
+     *        an event name.
+     *
+     * @param {Object} [hash]
+     *        Optionally extra argument to pass through to an event listener
+     */
+    trigger(event, hash) {}
+
+    /**
+     * Dispose of the `Component` and all child components.
+     *
+     * @fires Component#dispose
+     *
+     * @param {Object} options
+     * @param {Element} options.originalEl element with which to replace player element
+     */
+    dispose(options = {}) {
+      // Bail out if the component has already been disposed.
+      if (this.isDisposed_) {
+        return;
+      }
+      if (this.readyQueue_) {
+        this.readyQueue_.length = 0;
+      }
+
+      /**
+       * Triggered when a `Component` is disposed.
+       *
+       * @event Component#dispose
+       * @type {Event}
+       *
+       * @property {boolean} [bubbles=false]
+       *           set to false so that the dispose event does not
+       *           bubble up
+       */
+      this.trigger({
+        type: 'dispose',
+        bubbles: false
+      });
+      this.isDisposed_ = true;
+
+      // Dispose all children.
+      if (this.children_) {
+        for (let i = this.children_.length - 1; i >= 0; i--) {
+          if (this.children_[i].dispose) {
+            this.children_[i].dispose();
+          }
+        }
+      }
+
+      // Delete child references
+      this.children_ = null;
+      this.childIndex_ = null;
+      this.childNameIndex_ = null;
+      this.parentComponent_ = null;
+      if (this.el_) {
+        // Remove element from DOM
+        if (this.el_.parentNode) {
+          if (options.restoreEl) {
+            this.el_.parentNode.replaceChild(options.restoreEl, this.el_);
+          } else {
+            this.el_.parentNode.removeChild(this.el_);
+          }
+        }
+        this.el_ = null;
+      }
+
+      // remove reference to the player after disposing of the element
+      this.player_ = null;
+    }
+
+    /**
+     * Determine whether or not this component has been disposed.
+     *
+     * @return {boolean}
+     *         If the component has been disposed, will be `true`. Otherwise, `false`.
+     */
+    isDisposed() {
+      return Boolean(this.isDisposed_);
+    }
+
+    /**
+     * Return the {@link Player} that the `Component` has attached to.
+     *
+     * @return { import('./player').default }
+     *         The player that this `Component` has attached to.
+     */
+    player() {
+      return this.player_;
+    }
+
+    /**
+     * Deep merge of options objects with new options.
+     * > Note: When both `obj` and `options` contain properties whose values are objects.
+     *         The two properties get merged using {@link module:obj.merge}
+     *
+     * @param {Object} obj
+     *        The object that contains new options.
+     *
+     * @return {Object}
+     *         A new object of `this.options_` and `obj` merged together.
+     */
+    options(obj) {
+      if (!obj) {
+        return this.options_;
+      }
+      this.options_ = merge$2(this.options_, obj);
+      return this.options_;
+    }
+
+    /**
+     * Get the `Component`s DOM element
+     *
+     * @return {Element}
+     *         The DOM element for this `Component`.
+     */
+    el() {
+      return this.el_;
+    }
+
+    /**
+     * Create the `Component`s DOM element.
+     *
+     * @param {string} [tagName]
+     *        Element's DOM node type. e.g. 'div'
+     *
+     * @param {Object} [properties]
+     *        An object of properties that should be set.
+     *
+     * @param {Object} [attributes]
+     *        An object of attributes that should be set.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tagName, properties, attributes) {
+      return createEl(tagName, properties, attributes);
+    }
+
+    /**
+     * Localize a string given the string in english.
+     *
+     * If tokens are provided, it'll try and run a simple token replacement on the provided string.
+     * The tokens it looks for look like `{1}` with the index being 1-indexed into the tokens array.
+     *
+     * If a `defaultValue` is provided, it'll use that over `string`,
+     * if a value isn't found in provided language files.
+     * This is useful if you want to have a descriptive key for token replacement
+     * but have a succinct localized string and not require `en.json` to be included.
+     *
+     * Currently, it is used for the progress bar timing.
+     * ```js
+     * {
+     *   "progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
+     * }
+     * ```
+     * It is then used like so:
+     * ```js
+     * this.localize('progress bar timing: currentTime={1} duration{2}',
+     *               [this.player_.currentTime(), this.player_.duration()],
+     *               '{1} of {2}');
+     * ```
+     *
+     * Which outputs something like: `01:23 of 24:56`.
+     *
+     *
+     * @param {string} string
+     *        The string to localize and the key to lookup in the language files.
+     * @param {string[]} [tokens]
+     *        If the current item has token replacements, provide the tokens here.
+     * @param {string} [defaultValue]
+     *        Defaults to `string`. Can be a default value to use for token replacement
+     *        if the lookup key is needed to be separate.
+     *
+     * @return {string}
+     *         The localized string or if no localization exists the english string.
+     */
+    localize(string, tokens, defaultValue = string) {
+      const code = this.player_.language && this.player_.language();
+      const languages = this.player_.languages && this.player_.languages();
+      const language = languages && languages[code];
+      const primaryCode = code && code.split('-')[0];
+      const primaryLang = languages && languages[primaryCode];
+      let localizedString = defaultValue;
+      if (language && language[string]) {
+        localizedString = language[string];
+      } else if (primaryLang && primaryLang[string]) {
+        localizedString = primaryLang[string];
+      }
+      if (tokens) {
+        localizedString = localizedString.replace(/\{(\d+)\}/g, function (match, index) {
+          const value = tokens[index - 1];
+          let ret = value;
+          if (typeof value === 'undefined') {
+            ret = match;
+          }
+          return ret;
+        });
+      }
+      return localizedString;
+    }
+
+    /**
+     * Handles language change for the player in components. Should be overridden by sub-components.
+     *
+     * @abstract
+     */
+    handleLanguagechange() {}
+
+    /**
+     * Return the `Component`s DOM element. This is where children get inserted.
+     * This will usually be the the same as the element returned in {@link Component#el}.
+     *
+     * @return {Element}
+     *         The content element for this `Component`.
+     */
+    contentEl() {
+      return this.contentEl_ || this.el_;
+    }
+
+    /**
+     * Get this `Component`s ID
+     *
+     * @return {string}
+     *         The id of this `Component`
+     */
+    id() {
+      return this.id_;
+    }
+
+    /**
+     * Get the `Component`s name. The name gets used to reference the `Component`
+     * and is set during registration.
+     *
+     * @return {string}
+     *         The name of this `Component`.
+     */
+    name() {
+      return this.name_;
+    }
+
+    /**
+     * Get an array of all child components
+     *
+     * @return {Array}
+     *         The children
+     */
+    children() {
+      return this.children_;
+    }
+
+    /**
+     * Returns the child `Component` with the given `id`.
+     *
+     * @param {string} id
+     *        The id of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The child `Component` with the given `id` or undefined.
+     */
+    getChildById(id) {
+      return this.childIndex_[id];
+    }
+
+    /**
+     * Returns the child `Component` with the given `name`.
+     *
+     * @param {string} name
+     *        The name of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The child `Component` with the given `name` or undefined.
+     */
+    getChild(name) {
+      if (!name) {
+        return;
+      }
+      return this.childNameIndex_[name];
+    }
+
+    /**
+     * Returns the descendant `Component` following the givent
+     * descendant `names`. For instance ['foo', 'bar', 'baz'] would
+     * try to get 'foo' on the current component, 'bar' on the 'foo'
+     * component and 'baz' on the 'bar' component and return undefined
+     * if any of those don't exist.
+     *
+     * @param {...string[]|...string} names
+     *        The name of the child `Component` to get.
+     *
+     * @return {Component|undefined}
+     *         The descendant `Component` following the given descendant
+     *         `names` or undefined.
+     */
+    getDescendant(...names) {
+      // flatten array argument into the main array
+      names = names.reduce((acc, n) => acc.concat(n), []);
+      let currentChild = this;
+      for (let i = 0; i < names.length; i++) {
+        currentChild = currentChild.getChild(names[i]);
+        if (!currentChild || !currentChild.getChild) {
+          return;
+        }
+      }
+      return currentChild;
+    }
+
+    /**
+     * Adds an SVG icon element to another element or component.
+     *
+     * @param {string} iconName
+     *        The name of icon. A list of all the icon names can be found at 'sandbox/svg-icons.html'
+     *
+     * @param {Element} [el=this.el()]
+     *        Element to set the title on. Defaults to the current Component's element.
+     *
+     * @return {Element}
+     *        The newly created icon element.
+     */
+    setIcon(iconName, el = this.el()) {
+      // TODO: In v9 of video.js, we will want to remove font icons entirely.
+      // This means this check, as well as the others throughout the code, and
+      // the unecessary CSS for font icons, will need to be removed.
+      // See https://github.com/videojs/video.js/pull/8260 as to which components
+      // need updating.
+      if (!this.player_.options_.experimentalSvgIcons) {
+        return;
+      }
+      const xmlnsURL = 'http://www.w3.org/2000/svg';
+
+      // The below creates an element in the format of:
+      // <span><svg><use>....</use></svg></span>
+      const iconContainer = createEl('span', {
+        className: 'vjs-icon-placeholder vjs-svg-icon'
+      }, {
+        'aria-hidden': 'true'
+      });
+      const svgEl = document.createElementNS(xmlnsURL, 'svg');
+      svgEl.setAttributeNS(null, 'viewBox', '0 0 512 512');
+      const useEl = document.createElementNS(xmlnsURL, 'use');
+      svgEl.appendChild(useEl);
+      useEl.setAttributeNS(null, 'href', `#vjs-icon-${iconName}`);
+      iconContainer.appendChild(svgEl);
+
+      // Replace a pre-existing icon if one exists.
+      if (this.iconIsSet_) {
+        el.replaceChild(iconContainer, el.querySelector('.vjs-icon-placeholder'));
+      } else {
+        el.appendChild(iconContainer);
+      }
+      this.iconIsSet_ = true;
+      return iconContainer;
+    }
+
+    /**
+     * Add a child `Component` inside the current `Component`.
+     *
+     * @param {string|Component} child
+     *        The name or instance of a child to add.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of options that will get passed to children of
+     *        the child.
+     *
+     * @param {number} [index=this.children_.length]
+     *        The index to attempt to add a child into.
+     *
+     *
+     * @return {Component}
+     *         The `Component` that gets added as a child. When using a string the
+     *         `Component` will get created by this process.
+     */
+    addChild(child, options = {}, index = this.children_.length) {
+      let component;
+      let componentName;
+
+      // If child is a string, create component with options
+      if (typeof child === 'string') {
+        componentName = toTitleCase$1(child);
+        const componentClassName = options.componentClass || componentName;
+
+        // Set name through options
+        options.name = componentName;
+
+        // Create a new object & element for this controls set
+        // If there's no .player_, this is a player
+        const ComponentClass = Component$1.getComponent(componentClassName);
+        if (!ComponentClass) {
+          throw new Error(`Component ${componentClassName} does not exist`);
+        }
+
+        // data stored directly on the videojs object may be
+        // misidentified as a component to retain
+        // backwards-compatibility with 4.x. check to make sure the
+        // component class can be instantiated.
+        if (typeof ComponentClass !== 'function') {
+          return null;
+        }
+        component = new ComponentClass(this.player_ || this, options);
+
+        // child is a component instance
+      } else {
+        component = child;
+      }
+      if (component.parentComponent_) {
+        component.parentComponent_.removeChild(component);
+      }
+      this.children_.splice(index, 0, component);
+      component.parentComponent_ = this;
+      if (typeof component.id === 'function') {
+        this.childIndex_[component.id()] = component;
+      }
+
+      // If a name wasn't used to create the component, check if we can use the
+      // name function of the component
+      componentName = componentName || component.name && toTitleCase$1(component.name());
+      if (componentName) {
+        this.childNameIndex_[componentName] = component;
+        this.childNameIndex_[toLowerCase(componentName)] = component;
+      }
+
+      // Add the UI object's element to the container div (box)
+      // Having an element is not required
+      if (typeof component.el === 'function' && component.el()) {
+        // If inserting before a component, insert before that component's element
+        let refNode = null;
+        if (this.children_[index + 1]) {
+          // Most children are components, but the video tech is an HTML element
+          if (this.children_[index + 1].el_) {
+            refNode = this.children_[index + 1].el_;
+          } else if (isEl(this.children_[index + 1])) {
+            refNode = this.children_[index + 1];
+          }
+        }
+        this.contentEl().insertBefore(component.el(), refNode);
+      }
+
+      // Return so it can stored on parent object if desired.
+      return component;
+    }
+
+    /**
+     * Remove a child `Component` from this `Component`s list of children. Also removes
+     * the child `Component`s element from this `Component`s element.
+     *
+     * @param {Component} component
+     *        The child `Component` to remove.
+     */
+    removeChild(component) {
+      if (typeof component === 'string') {
+        component = this.getChild(component);
+      }
+      if (!component || !this.children_) {
+        return;
+      }
+      let childFound = false;
+      for (let i = this.children_.length - 1; i >= 0; i--) {
+        if (this.children_[i] === component) {
+          childFound = true;
+          this.children_.splice(i, 1);
+          break;
+        }
+      }
+      if (!childFound) {
+        return;
+      }
+      component.parentComponent_ = null;
+      this.childIndex_[component.id()] = null;
+      this.childNameIndex_[toTitleCase$1(component.name())] = null;
+      this.childNameIndex_[toLowerCase(component.name())] = null;
+      const compEl = component.el();
+      if (compEl && compEl.parentNode === this.contentEl()) {
+        this.contentEl().removeChild(component.el());
+      }
+    }
+
+    /**
+     * Add and initialize default child `Component`s based upon options.
+     */
+    initChildren() {
+      const children = this.options_.children;
+      if (children) {
+        // `this` is `parent`
+        const parentOptions = this.options_;
+        const handleAdd = child => {
+          const name = child.name;
+          let opts = child.opts;
+
+          // Allow options for children to be set at the parent options
+          // e.g. videojs(id, { controlBar: false });
+          // instead of videojs(id, { children: { controlBar: false });
+          if (parentOptions[name] !== undefined) {
+            opts = parentOptions[name];
+          }
+
+          // Allow for disabling default components
+          // e.g. options['children']['posterImage'] = false
+          if (opts === false) {
+            return;
+          }
+
+          // Allow options to be passed as a simple boolean if no configuration
+          // is necessary.
+          if (opts === true) {
+            opts = {};
+          }
+
+          // We also want to pass the original player options
+          // to each component as well so they don't need to
+          // reach back into the player for options later.
+          opts.playerOptions = this.options_.playerOptions;
+
+          // Create and add the child component.
+          // Add a direct reference to the child by name on the parent instance.
+          // If two of the same component are used, different names should be supplied
+          // for each
+          const newChild = this.addChild(name, opts);
+          if (newChild) {
+            this[name] = newChild;
+          }
+        };
+
+        // Allow for an array of children details to passed in the options
+        let workingChildren;
+        const Tech = Component$1.getComponent('Tech');
+        if (Array.isArray(children)) {
+          workingChildren = children;
+        } else {
+          workingChildren = Object.keys(children);
+        }
+        workingChildren
+        // children that are in this.options_ but also in workingChildren  would
+        // give us extra children we do not want. So, we want to filter them out.
+        .concat(Object.keys(this.options_).filter(function (child) {
+          return !workingChildren.some(function (wchild) {
+            if (typeof wchild === 'string') {
+              return child === wchild;
+            }
+            return child === wchild.name;
+          });
+        })).map(child => {
+          let name;
+          let opts;
+          if (typeof child === 'string') {
+            name = child;
+            opts = children[name] || this.options_[name] || {};
+          } else {
+            name = child.name;
+            opts = child;
+          }
+          return {
+            name,
+            opts
+          };
+        }).filter(child => {
+          // we have to make sure that child.name isn't in the techOrder since
+          // techs are registered as Components but can't aren't compatible
+          // See https://github.com/videojs/video.js/issues/2772
+          const c = Component$1.getComponent(child.opts.componentClass || toTitleCase$1(child.name));
+          return c && !Tech.isTech(c);
+        }).forEach(handleAdd);
+      }
+    }
+
+    /**
+     * Builds the default DOM class name. Should be overridden by sub-components.
+     *
+     * @return {string}
+     *         The DOM class name for this object.
+     *
+     * @abstract
+     */
+    buildCSSClass() {
+      // Child classes can include a function that does:
+      // return 'CLASS NAME' + this._super();
+      return '';
+    }
+
+    /**
+     * Bind a listener to the component's ready state.
+     * Different from event listeners in that if the ready event has already happened
+     * it will trigger the function immediately.
+     *
+     * @param {ReadyCallback} fn
+     *        Function that gets called when the `Component` is ready.
+     *
+     * @return {Component}
+     *         Returns itself; method can be chained.
+     */
+    ready(fn, sync = false) {
+      if (!fn) {
+        return;
+      }
+      if (!this.isReady_) {
+        this.readyQueue_ = this.readyQueue_ || [];
+        this.readyQueue_.push(fn);
+        return;
+      }
+      if (sync) {
+        fn.call(this);
+      } else {
+        // Call the function asynchronously by default for consistency
+        this.setTimeout(fn, 1);
+      }
+    }
+
+    /**
+     * Trigger all the ready listeners for this `Component`.
+     *
+     * @fires Component#ready
+     */
+    triggerReady() {
+      this.isReady_ = true;
+
+      // Ensure ready is triggered asynchronously
+      this.setTimeout(function () {
+        const readyQueue = this.readyQueue_;
+
+        // Reset Ready Queue
+        this.readyQueue_ = [];
+        if (readyQueue && readyQueue.length > 0) {
+          readyQueue.forEach(function (fn) {
+            fn.call(this);
+          }, this);
+        }
+
+        // Allow for using event listeners also
+        /**
+         * Triggered when a `Component` is ready.
+         *
+         * @event Component#ready
+         * @type {Event}
+         */
+        this.trigger('ready');
+      }, 1);
+    }
+
+    /**
+     * Find a single DOM element matching a `selector`. This can be within the `Component`s
+     * `contentEl()` or another custom context.
+     *
+     * @param {string} selector
+     *        A valid CSS selector, which will be passed to `querySelector`.
+     *
+     * @param {Element|string} [context=this.contentEl()]
+     *        A DOM element within which to query. Can also be a selector string in
+     *        which case the first matching element will get used as context. If
+     *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+     *        nothing it falls back to `document`.
+     *
+     * @return {Element|null}
+     *         the dom element that was found, or null
+     *
+     * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+     */
+    $(selector, context) {
+      return $(selector, context || this.contentEl());
+    }
+
+    /**
+     * Finds all DOM element matching a `selector`. This can be within the `Component`s
+     * `contentEl()` or another custom context.
+     *
+     * @param {string} selector
+     *        A valid CSS selector, which will be passed to `querySelectorAll`.
+     *
+     * @param {Element|string} [context=this.contentEl()]
+     *        A DOM element within which to query. Can also be a selector string in
+     *        which case the first matching element will get used as context. If
+     *        missing `this.contentEl()` gets used. If  `this.contentEl()` returns
+     *        nothing it falls back to `document`.
+     *
+     * @return {NodeList}
+     *         a list of dom elements that were found
+     *
+     * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+     */
+    $$(selector, context) {
+      return $$(selector, context || this.contentEl());
+    }
+
+    /**
+     * Check if a component's element has a CSS class name.
+     *
+     * @param {string} classToCheck
+     *        CSS class name to check.
+     *
+     * @return {boolean}
+     *         - True if the `Component` has the class.
+     *         - False if the `Component` does not have the class`
+     */
+    hasClass(classToCheck) {
+      return hasClass(this.el_, classToCheck);
+    }
+
+    /**
+     * Add a CSS class name to the `Component`s element.
+     *
+     * @param {...string} classesToAdd
+     *        One or more CSS class name to add.
+     */
+    addClass(...classesToAdd) {
+      addClass(this.el_, ...classesToAdd);
+    }
+
+    /**
+     * Remove a CSS class name from the `Component`s element.
+     *
+     * @param {...string} classesToRemove
+     *        One or more CSS class name to remove.
+     */
+    removeClass(...classesToRemove) {
+      removeClass(this.el_, ...classesToRemove);
+    }
+
+    /**
+     * Add or remove a CSS class name from the component's element.
+     * - `classToToggle` gets added when {@link Component#hasClass} would return false.
+     * - `classToToggle` gets removed when {@link Component#hasClass} would return true.
+     *
+     * @param  {string} classToToggle
+     *         The class to add or remove based on (@link Component#hasClass}
+     *
+     * @param  {boolean|Dom~predicate} [predicate]
+     *         An {@link Dom~predicate} function or a boolean
+     */
+    toggleClass(classToToggle, predicate) {
+      toggleClass(this.el_, classToToggle, predicate);
+    }
+
+    /**
+     * Show the `Component`s element if it is hidden by removing the
+     * 'vjs-hidden' class name from it.
+     */
+    show() {
+      this.removeClass('vjs-hidden');
+    }
+
+    /**
+     * Hide the `Component`s element if it is currently showing by adding the
+     * 'vjs-hidden` class name to it.
+     */
+    hide() {
+      this.addClass('vjs-hidden');
+    }
+
+    /**
+     * Lock a `Component`s element in its visible state by adding the 'vjs-lock-showing'
+     * class name to it. Used during fadeIn/fadeOut.
+     *
+     * @private
+     */
+    lockShowing() {
+      this.addClass('vjs-lock-showing');
+    }
+
+    /**
+     * Unlock a `Component`s element from its visible state by removing the 'vjs-lock-showing'
+     * class name from it. Used during fadeIn/fadeOut.
+     *
+     * @private
+     */
+    unlockShowing() {
+      this.removeClass('vjs-lock-showing');
+    }
+
+    /**
+     * Get the value of an attribute on the `Component`s element.
+     *
+     * @param {string} attribute
+     *        Name of the attribute to get the value from.
+     *
+     * @return {string|null}
+     *         - The value of the attribute that was asked for.
+     *         - Can be an empty string on some browsers if the attribute does not exist
+     *           or has no value
+     *         - Most browsers will return null if the attribute does not exist or has
+     *           no value.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute}
+     */
+    getAttribute(attribute) {
+      return getAttribute(this.el_, attribute);
+    }
+
+    /**
+     * Set the value of an attribute on the `Component`'s element
+     *
+     * @param {string} attribute
+     *        Name of the attribute to set.
+     *
+     * @param {string} value
+     *        Value to set the attribute to.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute}
+     */
+    setAttribute(attribute, value) {
+      setAttribute(this.el_, attribute, value);
+    }
+
+    /**
+     * Remove an attribute from the `Component`s element.
+     *
+     * @param {string} attribute
+     *        Name of the attribute to remove.
+     *
+     * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute}
+     */
+    removeAttribute(attribute) {
+      removeAttribute(this.el_, attribute);
+    }
+
+    /**
+     * Get or set the width of the component based upon the CSS styles.
+     * See {@link Component#dimension} for more detailed information.
+     *
+     * @param {number|string} [num]
+     *        The width that you want to set postfixed with '%', 'px' or nothing.
+     *
+     * @param {boolean} [skipListeners]
+     *        Skip the componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The width when getting, zero if there is no width
+     */
+    width(num, skipListeners) {
+      return this.dimension('width', num, skipListeners);
+    }
+
+    /**
+     * Get or set the height of the component based upon the CSS styles.
+     * See {@link Component#dimension} for more detailed information.
+     *
+     * @param {number|string} [num]
+     *        The height that you want to set postfixed with '%', 'px' or nothing.
+     *
+     * @param {boolean} [skipListeners]
+     *        Skip the componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The height when getting, zero if there is no height
+     */
+    height(num, skipListeners) {
+      return this.dimension('height', num, skipListeners);
+    }
+
+    /**
+     * Set both the width and height of the `Component` element at the same time.
+     *
+     * @param  {number|string} width
+     *         Width to set the `Component`s element to.
+     *
+     * @param  {number|string} height
+     *         Height to set the `Component`s element to.
+     */
+    dimensions(width, height) {
+      // Skip componentresize listeners on width for optimization
+      this.width(width, true);
+      this.height(height);
+    }
+
+    /**
+     * Get or set width or height of the `Component` element. This is the shared code
+     * for the {@link Component#width} and {@link Component#height}.
+     *
+     * Things to know:
+     * - If the width or height in an number this will return the number postfixed with 'px'.
+     * - If the width/height is a percent this will return the percent postfixed with '%'
+     * - Hidden elements have a width of 0 with `window.getComputedStyle`. This function
+     *   defaults to the `Component`s `style.width` and falls back to `window.getComputedStyle`.
+     *   See [this]{@link http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/}
+     *   for more information
+     * - If you want the computed style of the component, use {@link Component#currentWidth}
+     *   and {@link {Component#currentHeight}
+     *
+     * @fires Component#componentresize
+     *
+     * @param {string} widthOrHeight
+     8        'width' or 'height'
+     *
+     * @param  {number|string} [num]
+     8         New dimension
+     *
+     * @param  {boolean} [skipListeners]
+     *         Skip componentresize event trigger
+     *
+     * @return {number|undefined}
+     *         The dimension when getting or 0 if unset
+     */
+    dimension(widthOrHeight, num, skipListeners) {
+      if (num !== undefined) {
+        // Set to zero if null or literally NaN (NaN !== NaN)
+        if (num === null || num !== num) {
+          num = 0;
+        }
+
+        // Check if using css width/height (% or px) and adjust
+        if (('' + num).indexOf('%') !== -1 || ('' + num).indexOf('px') !== -1) {
+          this.el_.style[widthOrHeight] = num;
+        } else if (num === 'auto') {
+          this.el_.style[widthOrHeight] = '';
+        } else {
+          this.el_.style[widthOrHeight] = num + 'px';
+        }
+
+        // skipListeners allows us to avoid triggering the resize event when setting both width and height
+        if (!skipListeners) {
+          /**
+           * Triggered when a component is resized.
+           *
+           * @event Component#componentresize
+           * @type {Event}
+           */
+          this.trigger('componentresize');
+        }
+        return;
+      }
+
+      // Not setting a value, so getting it
+      // Make sure element exists
+      if (!this.el_) {
+        return 0;
+      }
+
+      // Get dimension value from style
+      const val = this.el_.style[widthOrHeight];
+      const pxIndex = val.indexOf('px');
+      if (pxIndex !== -1) {
+        // Return the pixel value with no 'px'
+        return parseInt(val.slice(0, pxIndex), 10);
+      }
+
+      // No px so using % or no style was set, so falling back to offsetWidth/height
+      // If component has display:none, offset will return 0
+      // TODO: handle display:none and no dimension style using px
+      return parseInt(this.el_['offset' + toTitleCase$1(widthOrHeight)], 10);
+    }
+
+    /**
+     * Get the computed width or the height of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @param {string} widthOrHeight
+     *        A string containing 'width' or 'height'. Whichever one you want to get.
+     *
+     * @return {number}
+     *         The dimension that gets asked for or 0 if nothing was set
+     *         for that dimension.
+     */
+    currentDimension(widthOrHeight) {
+      let computedWidthOrHeight = 0;
+      if (widthOrHeight !== 'width' && widthOrHeight !== 'height') {
+        throw new Error('currentDimension only accepts width or height value');
+      }
+      computedWidthOrHeight = computedStyle(this.el_, widthOrHeight);
+
+      // remove 'px' from variable and parse as integer
+      computedWidthOrHeight = parseFloat(computedWidthOrHeight);
+
+      // if the computed value is still 0, it's possible that the browser is lying
+      // and we want to check the offset values.
+      // This code also runs wherever getComputedStyle doesn't exist.
+      if (computedWidthOrHeight === 0 || isNaN(computedWidthOrHeight)) {
+        const rule = `offset${toTitleCase$1(widthOrHeight)}`;
+        computedWidthOrHeight = this.el_[rule];
+      }
+      return computedWidthOrHeight;
+    }
+
+    /**
+     * An object that contains width and height values of the `Component`s
+     * computed style. Uses `window.getComputedStyle`.
+     *
+     * @typedef {Object} Component~DimensionObject
+     *
+     * @property {number} width
+     *           The width of the `Component`s computed style.
+     *
+     * @property {number} height
+     *           The height of the `Component`s computed style.
+     */
+
+    /**
+     * Get an object that contains computed width and height values of the
+     * component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {Component~DimensionObject}
+     *         The computed dimensions of the component's element.
+     */
+    currentDimensions() {
+      return {
+        width: this.currentDimension('width'),
+        height: this.currentDimension('height')
+      };
+    }
+
+    /**
+     * Get the computed width of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {number}
+     *         The computed width of the component's element.
+     */
+    currentWidth() {
+      return this.currentDimension('width');
+    }
+
+    /**
+     * Get the computed height of the component's element.
+     *
+     * Uses `window.getComputedStyle`.
+     *
+     * @return {number}
+     *         The computed height of the component's element.
+     */
+    currentHeight() {
+      return this.currentDimension('height');
+    }
+
+    /**
+     * Set the focus to this component
+     */
+    focus() {
+      this.el_.focus();
+    }
+
+    /**
+     * Remove the focus from this component
+     */
+    blur() {
+      this.el_.blur();
+    }
+
+    /**
+     * When this Component receives a `keydown` event which it does not process,
+     *  it passes the event to the Player for handling.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     */
+    handleKeyDown(event) {
+      if (this.player_) {
+        // We only stop propagation here because we want unhandled events to fall
+        // back to the browser. Exclude Tab for focus trapping.
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.stopPropagation();
+        }
+        this.player_.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Many components used to have a `handleKeyPress` method, which was poorly
+     * named because it listened to a `keydown` event. This method name now
+     * delegates to `handleKeyDown`. This means anyone calling `handleKeyPress`
+     * will not see their method calls stop working.
+     *
+     * @param {KeyboardEvent} event
+     *        The event that caused this function to be called.
+     */
+    handleKeyPress(event) {
+      this.handleKeyDown(event);
+    }
+
+    /**
+     * Emit a 'tap' events when touch event support gets detected. This gets used to
+     * support toggling the controls through a tap on the video. They get enabled
+     * because every sub-component would have extra overhead otherwise.
+     *
+     * @protected
+     * @fires Component#tap
+     * @listens Component#touchstart
+     * @listens Component#touchmove
+     * @listens Component#touchleave
+     * @listens Component#touchcancel
+     * @listens Component#touchend
+      */
+    emitTapEvents() {
+      // Track the start time so we can determine how long the touch lasted
+      let touchStart = 0;
+      let firstTouch = null;
+
+      // Maximum movement allowed during a touch event to still be considered a tap
+      // Other popular libs use anywhere from 2 (hammer.js) to 15,
+      // so 10 seems like a nice, round number.
+      const tapMovementThreshold = 10;
+
+      // The maximum length a touch can be while still being considered a tap
+      const touchTimeThreshold = 200;
+      let couldBeTap;
+      this.on('touchstart', function (event) {
+        // If more than one finger, don't consider treating this as a click
+        if (event.touches.length === 1) {
+          // Copy pageX/pageY from the object
+          firstTouch = {
+            pageX: event.touches[0].pageX,
+            pageY: event.touches[0].pageY
+          };
+          // Record start time so we can detect a tap vs. "touch and hold"
+          touchStart = window.performance.now();
+          // Reset couldBeTap tracking
+          couldBeTap = true;
+        }
+      });
+      this.on('touchmove', function (event) {
+        // If more than one finger, don't consider treating this as a click
+        if (event.touches.length > 1) {
+          couldBeTap = false;
+        } else if (firstTouch) {
+          // Some devices will throw touchmoves for all but the slightest of taps.
+          // So, if we moved only a small distance, this could still be a tap
+          const xdiff = event.touches[0].pageX - firstTouch.pageX;
+          const ydiff = event.touches[0].pageY - firstTouch.pageY;
+          const touchDistance = Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+          if (touchDistance > tapMovementThreshold) {
+            couldBeTap = false;
+          }
+        }
+      });
+      const noTap = function () {
+        couldBeTap = false;
+      };
+
+      // TODO: Listen to the original target. http://youtu.be/DujfpXOKUp8?t=13m8s
+      this.on('touchleave', noTap);
+      this.on('touchcancel', noTap);
+
+      // When the touch ends, measure how long it took and trigger the appropriate
+      // event
+      this.on('touchend', function (event) {
+        firstTouch = null;
+        // Proceed only if the touchmove/leave/cancel event didn't happen
+        if (couldBeTap === true) {
+          // Measure how long the touch lasted
+          const touchTime = window.performance.now() - touchStart;
+
+          // Make sure the touch was less than the threshold to be considered a tap
+          if (touchTime < touchTimeThreshold) {
+            // Don't let browser turn this into a click
+            event.preventDefault();
+            /**
+             * Triggered when a `Component` is tapped.
+             *
+             * @event Component#tap
+             * @type {MouseEvent}
+             */
+            this.trigger('tap');
+            // It may be good to copy the touchend event object and change the
+            // type to tap, if the other event properties aren't exact after
+            // Events.fixEvent runs (e.g. event.target)
+          }
+        }
+      });
+    }
+
+    /**
+     * This function reports user activity whenever touch events happen. This can get
+     * turned off by any sub-components that wants touch events to act another way.
+     *
+     * Report user touch activity when touch events occur. User activity gets used to
+     * determine when controls should show/hide. It is simple when it comes to mouse
+     * events, because any mouse event should show the controls. So we capture mouse
+     * events that bubble up to the player and report activity when that happens.
+     * With touch events it isn't as easy as `touchstart` and `touchend` toggle player
+     * controls. So touch events can't help us at the player level either.
+     *
+     * User activity gets checked asynchronously. So what could happen is a tap event
+     * on the video turns the controls off. Then the `touchend` event bubbles up to
+     * the player. Which, if it reported user activity, would turn the controls right
+     * back on. We also don't want to completely block touch events from bubbling up.
+     * Furthermore a `touchmove` event and anything other than a tap, should not turn
+     * controls back on.
+     *
+     * @listens Component#touchstart
+     * @listens Component#touchmove
+     * @listens Component#touchend
+     * @listens Component#touchcancel
+     */
+    enableTouchActivity() {
+      // Don't continue if the root player doesn't support reporting user activity
+      if (!this.player() || !this.player().reportUserActivity) {
+        return;
+      }
+
+      // listener for reporting that the user is active
+      const report = bind_(this.player(), this.player().reportUserActivity);
+      let touchHolding;
+      this.on('touchstart', function () {
+        report();
+        // For as long as the they are touching the device or have their mouse down,
+        // we consider them active even if they're not moving their finger or mouse.
+        // So we want to continue to update that they are active
+        this.clearInterval(touchHolding);
+        // report at the same interval as activityCheck
+        touchHolding = this.setInterval(report, 250);
+      });
+      const touchEnd = function (event) {
+        report();
+        // stop the interval that maintains activity if the touch is holding
+        this.clearInterval(touchHolding);
+      };
+      this.on('touchmove', report);
+      this.on('touchend', touchEnd);
+      this.on('touchcancel', touchEnd);
+    }
+
+    /**
+     * A callback that has no parameters and is bound into `Component`s context.
+     *
+     * @callback Component~GenericCallback
+     * @this Component
+     */
+
+    /**
+     * Creates a function that runs after an `x` millisecond timeout. This function is a
+     * wrapper around `window.setTimeout`. There are a few reasons to use this one
+     * instead though:
+     * 1. It gets cleared via  {@link Component#clearTimeout} when
+     *    {@link Component#dispose} gets called.
+     * 2. The function callback will gets turned into a {@link Component~GenericCallback}
+     *
+     * > Note: You can't use `window.clearTimeout` on the id returned by this function. This
+     *         will cause its dispose listener not to get cleaned up! Please use
+     *         {@link Component#clearTimeout} or {@link Component#dispose} instead.
+     *
+     * @param {Component~GenericCallback} fn
+     *        The function that will be run after `timeout`.
+     *
+     * @param {number} timeout
+     *        Timeout in milliseconds to delay before executing the specified function.
+     *
+     * @return {number}
+     *         Returns a timeout ID that gets used to identify the timeout. It can also
+     *         get used in {@link Component#clearTimeout} to clear the timeout that
+     *         was set.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout}
+     */
+    setTimeout(fn, timeout) {
+      // declare as variables so they are properly available in timeout function
+      // eslint-disable-next-line
+      var timeoutId;
+      fn = bind_(this, fn);
+      this.clearTimersOnDispose_();
+      timeoutId = window.setTimeout(() => {
+        if (this.setTimeoutIds_.has(timeoutId)) {
+          this.setTimeoutIds_.delete(timeoutId);
+        }
+        fn();
+      }, timeout);
+      this.setTimeoutIds_.add(timeoutId);
+      return timeoutId;
+    }
+
+    /**
+     * Clears a timeout that gets created via `window.setTimeout` or
+     * {@link Component#setTimeout}. If you set a timeout via {@link Component#setTimeout}
+     * use this function instead of `window.clearTimout`. If you don't your dispose
+     * listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} timeoutId
+     *        The id of the timeout to clear. The return value of
+     *        {@link Component#setTimeout} or `window.setTimeout`.
+     *
+     * @return {number}
+     *         Returns the timeout id that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout}
+     */
+    clearTimeout(timeoutId) {
+      if (this.setTimeoutIds_.has(timeoutId)) {
+        this.setTimeoutIds_.delete(timeoutId);
+        window.clearTimeout(timeoutId);
+      }
+      return timeoutId;
+    }
+
+    /**
+     * Creates a function that gets run every `x` milliseconds. This function is a wrapper
+     * around `window.setInterval`. There are a few reasons to use this one instead though.
+     * 1. It gets cleared via  {@link Component#clearInterval} when
+     *    {@link Component#dispose} gets called.
+     * 2. The function callback will be a {@link Component~GenericCallback}
+     *
+     * @param {Component~GenericCallback} fn
+     *        The function to run every `x` seconds.
+     *
+     * @param {number} interval
+     *        Execute the specified function every `x` milliseconds.
+     *
+     * @return {number}
+     *         Returns an id that can be used to identify the interval. It can also be be used in
+     *         {@link Component#clearInterval} to clear the interval.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval}
+     */
+    setInterval(fn, interval) {
+      fn = bind_(this, fn);
+      this.clearTimersOnDispose_();
+      const intervalId = window.setInterval(fn, interval);
+      this.setIntervalIds_.add(intervalId);
+      return intervalId;
+    }
+
+    /**
+     * Clears an interval that gets created via `window.setInterval` or
+     * {@link Component#setInterval}. If you set an interval via {@link Component#setInterval}
+     * use this function instead of `window.clearInterval`. If you don't your dispose
+     * listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} intervalId
+     *        The id of the interval to clear. The return value of
+     *        {@link Component#setInterval} or `window.setInterval`.
+     *
+     * @return {number}
+     *         Returns the interval id that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval}
+     */
+    clearInterval(intervalId) {
+      if (this.setIntervalIds_.has(intervalId)) {
+        this.setIntervalIds_.delete(intervalId);
+        window.clearInterval(intervalId);
+      }
+      return intervalId;
+    }
+
+    /**
+     * Queues up a callback to be passed to requestAnimationFrame (rAF), but
+     * with a few extra bonuses:
+     *
+     * - Supports browsers that do not support rAF by falling back to
+     *   {@link Component#setTimeout}.
+     *
+     * - The callback is turned into a {@link Component~GenericCallback} (i.e.
+     *   bound to the component).
+     *
+     * - Automatic cancellation of the rAF callback is handled if the component
+     *   is disposed before it is called.
+     *
+     * @param  {Component~GenericCallback} fn
+     *         A function that will be bound to this component and executed just
+     *         before the browser's next repaint.
+     *
+     * @return {number}
+     *         Returns an rAF ID that gets used to identify the timeout. It can
+     *         also be used in {@link Component#cancelAnimationFrame} to cancel
+     *         the animation frame callback.
+     *
+     * @listens Component#dispose
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame}
+     */
+    requestAnimationFrame(fn) {
+      this.clearTimersOnDispose_();
+
+      // declare as variables so they are properly available in rAF function
+      // eslint-disable-next-line
+      var id;
+      fn = bind_(this, fn);
+      id = window.requestAnimationFrame(() => {
+        if (this.rafIds_.has(id)) {
+          this.rafIds_.delete(id);
+        }
+        fn();
+      });
+      this.rafIds_.add(id);
+      return id;
+    }
+
+    /**
+     * Request an animation frame, but only one named animation
+     * frame will be queued. Another will never be added until
+     * the previous one finishes.
+     *
+     * @param {string} name
+     *        The name to give this requestAnimationFrame
+     *
+     * @param  {Component~GenericCallback} fn
+     *         A function that will be bound to this component and executed just
+     *         before the browser's next repaint.
+     */
+    requestNamedAnimationFrame(name, fn) {
+      if (this.namedRafs_.has(name)) {
+        return;
+      }
+      this.clearTimersOnDispose_();
+      fn = bind_(this, fn);
+      const id = this.requestAnimationFrame(() => {
+        fn();
+        if (this.namedRafs_.has(name)) {
+          this.namedRafs_.delete(name);
+        }
+      });
+      this.namedRafs_.set(name, id);
+      return name;
+    }
+
+    /**
+     * Cancels a current named animation frame if it exists.
+     *
+     * @param {string} name
+     *        The name of the requestAnimationFrame to cancel.
+     */
+    cancelNamedAnimationFrame(name) {
+      if (!this.namedRafs_.has(name)) {
+        return;
+      }
+      this.cancelAnimationFrame(this.namedRafs_.get(name));
+      this.namedRafs_.delete(name);
+    }
+
+    /**
+     * Cancels a queued callback passed to {@link Component#requestAnimationFrame}
+     * (rAF).
+     *
+     * If you queue an rAF callback via {@link Component#requestAnimationFrame},
+     * use this function instead of `window.cancelAnimationFrame`. If you don't,
+     * your dispose listener will not get cleaned up until {@link Component#dispose}!
+     *
+     * @param {number} id
+     *        The rAF ID to clear. The return value of {@link Component#requestAnimationFrame}.
+     *
+     * @return {number}
+     *         Returns the rAF ID that was cleared.
+     *
+     * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/cancelAnimationFrame}
+     */
+    cancelAnimationFrame(id) {
+      if (this.rafIds_.has(id)) {
+        this.rafIds_.delete(id);
+        window.cancelAnimationFrame(id);
+      }
+      return id;
+    }
+
+    /**
+     * A function to setup `requestAnimationFrame`, `setTimeout`,
+     * and `setInterval`, clearing on dispose.
+     *
+     * > Previously each timer added and removed dispose listeners on it's own.
+     * For better performance it was decided to batch them all, and use `Set`s
+     * to track outstanding timer ids.
+     *
+     * @private
+     */
+    clearTimersOnDispose_() {
+      if (this.clearingTimersOnDispose_) {
+        return;
+      }
+      this.clearingTimersOnDispose_ = true;
+      this.one('dispose', () => {
+        [['namedRafs_', 'cancelNamedAnimationFrame'], ['rafIds_', 'cancelAnimationFrame'], ['setTimeoutIds_', 'clearTimeout'], ['setIntervalIds_', 'clearInterval']].forEach(([idName, cancelName]) => {
+          // for a `Set` key will actually be the value again
+          // so forEach((val, val) =>` but for maps we want to use
+          // the key.
+          this[idName].forEach((val, key) => this[cancelName](key));
+        });
+        this.clearingTimersOnDispose_ = false;
+      });
+    }
+
+    /**
+     * Register a `Component` with `videojs` given the name and the component.
+     *
+     * > NOTE: {@link Tech}s should not be registered as a `Component`. {@link Tech}s
+     *         should be registered using {@link Tech.registerTech} or
+     *         {@link videojs:videojs.registerTech}.
+     *
+     * > NOTE: This function can also be seen on videojs as
+     *         {@link videojs:videojs.registerComponent}.
+     *
+     * @param {string} name
+     *        The name of the `Component` to register.
+     *
+     * @param {Component} ComponentToRegister
+     *        The `Component` class to register.
+     *
+     * @return {Component}
+     *         The `Component` that was registered.
+     */
+    static registerComponent(name, ComponentToRegister) {
+      if (typeof name !== 'string' || !name) {
+        throw new Error(`Illegal component name, "${name}"; must be a non-empty string.`);
+      }
+      const Tech = Component$1.getComponent('Tech');
+
+      // We need to make sure this check is only done if Tech has been registered.
+      const isTech = Tech && Tech.isTech(ComponentToRegister);
+      const isComp = Component$1 === ComponentToRegister || Component$1.prototype.isPrototypeOf(ComponentToRegister.prototype);
+      if (isTech || !isComp) {
+        let reason;
+        if (isTech) {
+          reason = 'techs must be registered using Tech.registerTech()';
+        } else {
+          reason = 'must be a Component subclass';
+        }
+        throw new Error(`Illegal component, "${name}"; ${reason}.`);
+      }
+      name = toTitleCase$1(name);
+      if (!Component$1.components_) {
+        Component$1.components_ = {};
+      }
+      const Player = Component$1.getComponent('Player');
+      if (name === 'Player' && Player && Player.players) {
+        const players = Player.players;
+        const playerNames = Object.keys(players);
+
+        // If we have players that were disposed, then their name will still be
+        // in Players.players. So, we must loop through and verify that the value
+        // for each item is not null. This allows registration of the Player component
+        // after all players have been disposed or before any were created.
+        if (players && playerNames.length > 0 && playerNames.map(pname => players[pname]).every(Boolean)) {
+          throw new Error('Can not register Player component after player has been created.');
+        }
+      }
+      Component$1.components_[name] = ComponentToRegister;
+      Component$1.components_[toLowerCase(name)] = ComponentToRegister;
+      return ComponentToRegister;
+    }
+
+    /**
+     * Get a `Component` based on the name it was registered with.
+     *
+     * @param {string} name
+     *        The Name of the component to get.
+     *
+     * @return {typeof Component}
+     *         The `Component` that got registered under the given name.
+     */
+    static getComponent(name) {
+      if (!name || !Component$1.components_) {
+        return;
+      }
+      return Component$1.components_[name];
+    }
+  }
+  Component$1.registerComponent('Component', Component$1);
+
+  /**
+   * @file time.js
+   * @module time
+   */
+
+  /**
+   * Returns the time for the specified index at the start or end
+   * of a TimeRange object.
+   *
+   * @typedef    {Function} TimeRangeIndex
+   *
+   * @param      {number} [index=0]
+   *             The range number to return the time for.
+   *
+   * @return     {number}
+   *             The time offset at the specified index.
+   *
+   * @deprecated The index argument must be provided.
+   *             In the future, leaving it out will throw an error.
+   */
+
+  /**
+   * An object that contains ranges of time, which mimics {@link TimeRanges}.
+   *
+   * @typedef  {Object} TimeRange
+   *
+   * @property {number} length
+   *           The number of time ranges represented by this object.
+   *
+   * @property {module:time~TimeRangeIndex} start
+   *           Returns the time offset at which a specified time range begins.
+   *
+   * @property {module:time~TimeRangeIndex} end
+   *           Returns the time offset at which a specified time range ends.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges
+   */
+
+  /**
+   * Check if any of the time ranges are over the maximum index.
+   *
+   * @private
+   * @param   {string} fnName
+   *          The function name to use for logging
+   *
+   * @param   {number} index
+   *          The index to check
+   *
+   * @param   {number} maxIndex
+   *          The maximum possible index
+   *
+   * @throws  {Error} if the timeRanges provided are over the maxIndex
+   */
+  function rangeCheck(fnName, index, maxIndex) {
+    if (typeof index !== 'number' || index < 0 || index > maxIndex) {
+      throw new Error(`Failed to execute '${fnName}' on 'TimeRanges': The index provided (${index}) is non-numeric or out of bounds (0-${maxIndex}).`);
+    }
+  }
+
+  /**
+   * Get the time for the specified index at the start or end
+   * of a TimeRange object.
+   *
+   * @private
+   * @param      {string} fnName
+   *             The function name to use for logging
+   *
+   * @param      {string} valueIndex
+   *             The property that should be used to get the time. should be
+   *             'start' or 'end'
+   *
+   * @param      {Array} ranges
+   *             An array of time ranges
+   *
+   * @param      {Array} [rangeIndex=0]
+   *             The index to start the search at
+   *
+   * @return     {number}
+   *             The time that offset at the specified index.
+   *
+   * @deprecated rangeIndex must be set to a value, in the future this will throw an error.
+   * @throws     {Error} if rangeIndex is more than the length of ranges
+   */
+  function getRange(fnName, valueIndex, ranges, rangeIndex) {
+    rangeCheck(fnName, rangeIndex, ranges.length - 1);
+    return ranges[rangeIndex][valueIndex];
+  }
+
+  /**
+   * Create a time range object given ranges of time.
+   *
+   * @private
+   * @param   {Array} [ranges]
+   *          An array of time ranges.
+   *
+   * @return  {TimeRange}
+   */
+  function createTimeRangesObj(ranges) {
+    let timeRangesObj;
+    if (ranges === undefined || ranges.length === 0) {
+      timeRangesObj = {
+        length: 0,
+        start() {
+          throw new Error('This TimeRanges object is empty');
+        },
+        end() {
+          throw new Error('This TimeRanges object is empty');
+        }
+      };
+    } else {
+      timeRangesObj = {
+        length: ranges.length,
+        start: getRange.bind(null, 'start', 0, ranges),
+        end: getRange.bind(null, 'end', 1, ranges)
+      };
+    }
+    if (window.Symbol && window.Symbol.iterator) {
+      timeRangesObj[window.Symbol.iterator] = () => (ranges || []).values();
+    }
+    return timeRangesObj;
+  }
+
+  /**
+   * Create a `TimeRange` object which mimics an
+   * {@link https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges|HTML5 TimeRanges instance}.
+   *
+   * @param {number|Array[]} start
+   *        The start of a single range (a number) or an array of ranges (an
+   *        array of arrays of two numbers each).
+   *
+   * @param {number} end
+   *        The end of a single range. Cannot be used with the array form of
+   *        the `start` argument.
+   *
+   * @return {TimeRange}
+   */
+  function createTimeRanges$1(start, end) {
+    if (Array.isArray(start)) {
+      return createTimeRangesObj(start);
+    } else if (start === undefined || end === undefined) {
+      return createTimeRangesObj();
+    }
+    return createTimeRangesObj([[start, end]]);
+  }
+
+  /**
+   * Format seconds as a time string, H:MM:SS or M:SS. Supplying a guide (in
+   * seconds) will force a number of leading zeros to cover the length of the
+   * guide.
+   *
+   * @private
+   * @param  {number} seconds
+   *         Number of seconds to be turned into a string
+   *
+   * @param  {number} guide
+   *         Number (in seconds) to model the string after
+   *
+   * @return {string}
+   *         Time formatted as H:MM:SS or M:SS
+   */
+  const defaultImplementation = function (seconds, guide) {
+    seconds = seconds < 0 ? 0 : seconds;
+    let s = Math.floor(seconds % 60);
+    let m = Math.floor(seconds / 60 % 60);
+    let h = Math.floor(seconds / 3600);
+    const gm = Math.floor(guide / 60 % 60);
+    const gh = Math.floor(guide / 3600);
+
+    // handle invalid times
+    if (isNaN(seconds) || seconds === Infinity) {
+      // '-' is false for all relational operators (e.g. <, >=) so this setting
+      // will add the minimum number of fields specified by the guide
+      h = m = s = '-';
+    }
+
+    // Check if we need to show hours
+    h = h > 0 || gh > 0 ? h + ':' : '';
+
+    // If hours are showing, we may need to add a leading zero.
+    // Always show at least one digit of minutes.
+    m = ((h || gm >= 10) && m < 10 ? '0' + m : m) + ':';
+
+    // Check if leading zero is need for seconds
+    s = s < 10 ? '0' + s : s;
+    return h + m + s;
+  };
+
+  // Internal pointer to the current implementation.
+  let implementation = defaultImplementation;
+
+  /**
+   * Replaces the default formatTime implementation with a custom implementation.
+   *
+   * @param {Function} customImplementation
+   *        A function which will be used in place of the default formatTime
+   *        implementation. Will receive the current time in seconds and the
+   *        guide (in seconds) as arguments.
+   */
+  function setFormatTime(customImplementation) {
+    implementation = customImplementation;
+  }
+
+  /**
+   * Resets formatTime to the default implementation.
+   */
+  function resetFormatTime() {
+    implementation = defaultImplementation;
+  }
+
+  /**
+   * Delegates to either the default time formatting function or a custom
+   * function supplied via `setFormatTime`.
+   *
+   * Formats seconds as a time string (H:MM:SS or M:SS). Supplying a
+   * guide (in seconds) will force a number of leading zeros to cover the
+   * length of the guide.
+   *
+   * @example  formatTime(125, 600) === "02:05"
+   * @param    {number} seconds
+   *           Number of seconds to be turned into a string
+   *
+   * @param    {number} guide
+   *           Number (in seconds) to model the string after
+   *
+   * @return   {string}
+   *           Time formatted as H:MM:SS or M:SS
+   */
+  function formatTime(seconds, guide = seconds) {
+    return implementation(seconds, guide);
+  }
+
+  var Time = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    createTimeRanges: createTimeRanges$1,
+    createTimeRange: createTimeRanges$1,
+    setFormatTime: setFormatTime,
+    resetFormatTime: resetFormatTime,
+    formatTime: formatTime
+  });
+
+  /**
+   * @file buffer.js
+   * @module buffer
+   */
+
+  /**
+   * Compute the percentage of the media that has been buffered.
+   *
+   * @param { import('./time').TimeRange } buffered
+   *        The current `TimeRanges` object representing buffered time ranges
+   *
+   * @param {number} duration
+   *        Total duration of the media
+   *
+   * @return {number}
+   *         Percent buffered of the total duration in decimal form.
+   */
+  function bufferedPercent(buffered, duration) {
+    let bufferedDuration = 0;
+    let start;
+    let end;
+    if (!duration) {
+      return 0;
+    }
+    if (!buffered || !buffered.length) {
+      buffered = createTimeRanges$1(0, 0);
+    }
+    for (let i = 0; i < buffered.length; i++) {
+      start = buffered.start(i);
+      end = buffered.end(i);
+
+      // buffered end can be bigger than duration by a very small fraction
+      if (end > duration) {
+        end = duration;
+      }
+      bufferedDuration += end - start;
+    }
+    return bufferedDuration / duration;
+  }
+
+  /**
+   * @file media-error.js
+   */
+
+  /**
+   * A Custom `MediaError` class which mimics the standard HTML5 `MediaError` class.
+   *
+   * @param {number|string|Object|MediaError} value
+   *        This can be of multiple types:
+   *        - number: should be a standard error code
+   *        - string: an error message (the code will be 0)
+   *        - Object: arbitrary properties
+   *        - `MediaError` (native): used to populate a video.js `MediaError` object
+   *        - `MediaError` (video.js): will return itself if it's already a
+   *          video.js `MediaError` object.
+   *
+   * @see [MediaError Spec]{@link https://dev.w3.org/html5/spec-author-view/video.html#mediaerror}
+   * @see [Encrypted MediaError Spec]{@link https://www.w3.org/TR/2013/WD-encrypted-media-20130510/#error-codes}
+   *
+   * @class MediaError
+   */
+  function MediaError(value) {
+    // Allow redundant calls to this constructor to avoid having `instanceof`
+    // checks peppered around the code.
+    if (value instanceof MediaError) {
+      return value;
+    }
+    if (typeof value === 'number') {
+      this.code = value;
+    } else if (typeof value === 'string') {
+      // default code is zero, so this is a custom error
+      this.message = value;
+    } else if (isObject$1(value)) {
+      // We assign the `code` property manually because native `MediaError` objects
+      // do not expose it as an own/enumerable property of the object.
+      if (typeof value.code === 'number') {
+        this.code = value.code;
+      }
+      Object.assign(this, value);
+    }
+    if (!this.message) {
+      this.message = MediaError.defaultMessages[this.code] || '';
+    }
+  }
+
+  /**
+   * The error code that refers two one of the defined `MediaError` types
+   *
+   * @type {Number}
+   */
+  MediaError.prototype.code = 0;
+
+  /**
+   * An optional message that to show with the error. Message is not part of the HTML5
+   * video spec but allows for more informative custom errors.
+   *
+   * @type {String}
+   */
+  MediaError.prototype.message = '';
+
+  /**
+   * An optional status code that can be set by plugins to allow even more detail about
+   * the error. For example a plugin might provide a specific HTTP status code and an
+   * error message for that code. Then when the plugin gets that error this class will
+   * know how to display an error message for it. This allows a custom message to show
+   * up on the `Player` error overlay.
+   *
+   * @type {Array}
+   */
+  MediaError.prototype.status = null;
+
+  /**
+   * An object containing an error type, as well as other information regarding the error.
+   *
+   * @typedef {{errorType: string, [key: string]: any}} ErrorMetadata
+   */
+
+  /**
+   * An optional object to give more detail about the error. This can be used to give
+   * a higher level of specificity to an error versus the more generic MediaError codes.
+   * `metadata` expects an `errorType` string that should align with the values from videojs.Error.
+   *
+   * @type {ErrorMetadata}
+   */
+  MediaError.prototype.metadata = null;
+
+  /**
+   * Errors indexed by the W3C standard. The order **CANNOT CHANGE**! See the
+   * specification listed under {@link MediaError} for more information.
+   *
+   * @enum {array}
+   * @readonly
+   * @property {string} 0 - MEDIA_ERR_CUSTOM
+   * @property {string} 1 - MEDIA_ERR_ABORTED
+   * @property {string} 2 - MEDIA_ERR_NETWORK
+   * @property {string} 3 - MEDIA_ERR_DECODE
+   * @property {string} 4 - MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @property {string} 5 - MEDIA_ERR_ENCRYPTED
+   */
+  MediaError.errorTypes = ['MEDIA_ERR_CUSTOM', 'MEDIA_ERR_ABORTED', 'MEDIA_ERR_NETWORK', 'MEDIA_ERR_DECODE', 'MEDIA_ERR_SRC_NOT_SUPPORTED', 'MEDIA_ERR_ENCRYPTED'];
+
+  /**
+   * The default `MediaError` messages based on the {@link MediaError.errorTypes}.
+   *
+   * @type {Array}
+   * @constant
+   */
+  MediaError.defaultMessages = {
+    1: 'You aborted the media playback',
+    2: 'A network error caused the media download to fail part-way.',
+    3: 'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.',
+    4: 'The media could not be loaded, either because the server or network failed or because the format is not supported.',
+    5: 'The media is encrypted and we do not have the keys to decrypt it.'
+  };
+
+  /**
+   * W3C error code for any custom error.
+   *
+   * @member MediaError#MEDIA_ERR_CUSTOM
+   * @constant {number}
+   * @default 0
+   */
+  MediaError.MEDIA_ERR_CUSTOM = 0;
+
+  /**
+   * W3C error code for any custom error.
+   *
+   * @member MediaError.MEDIA_ERR_CUSTOM
+   * @constant {number}
+   * @default 0
+   */
+  MediaError.prototype.MEDIA_ERR_CUSTOM = 0;
+
+  /**
+   * W3C error code for media error aborted.
+   *
+   * @member MediaError#MEDIA_ERR_ABORTED
+   * @constant {number}
+   * @default 1
+   */
+  MediaError.MEDIA_ERR_ABORTED = 1;
+
+  /**
+   * W3C error code for media error aborted.
+   *
+   * @member MediaError.MEDIA_ERR_ABORTED
+   * @constant {number}
+   * @default 1
+   */
+  MediaError.prototype.MEDIA_ERR_ABORTED = 1;
+
+  /**
+   * W3C error code for any network error.
+   *
+   * @member MediaError#MEDIA_ERR_NETWORK
+   * @constant {number}
+   * @default 2
+   */
+  MediaError.MEDIA_ERR_NETWORK = 2;
+
+  /**
+   * W3C error code for any network error.
+   *
+   * @member MediaError.MEDIA_ERR_NETWORK
+   * @constant {number}
+   * @default 2
+   */
+  MediaError.prototype.MEDIA_ERR_NETWORK = 2;
+
+  /**
+   * W3C error code for any decoding error.
+   *
+   * @member MediaError#MEDIA_ERR_DECODE
+   * @constant {number}
+   * @default 3
+   */
+  MediaError.MEDIA_ERR_DECODE = 3;
+
+  /**
+   * W3C error code for any decoding error.
+   *
+   * @member MediaError.MEDIA_ERR_DECODE
+   * @constant {number}
+   * @default 3
+   */
+  MediaError.prototype.MEDIA_ERR_DECODE = 3;
+
+  /**
+   * W3C error code for any time that a source is not supported.
+   *
+   * @member MediaError#MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @constant {number}
+   * @default 4
+   */
+  MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+
+  /**
+   * W3C error code for any time that a source is not supported.
+   *
+   * @member MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
+   * @constant {number}
+   * @default 4
+   */
+  MediaError.prototype.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+
+  /**
+   * W3C error code for any time that a source is encrypted.
+   *
+   * @member MediaError#MEDIA_ERR_ENCRYPTED
+   * @constant {number}
+   * @default 5
+   */
+  MediaError.MEDIA_ERR_ENCRYPTED = 5;
+
+  /**
+   * W3C error code for any time that a source is encrypted.
+   *
+   * @member MediaError.MEDIA_ERR_ENCRYPTED
+   * @constant {number}
+   * @default 5
+   */
+  MediaError.prototype.MEDIA_ERR_ENCRYPTED = 5;
+
+  var tuple = SafeParseTuple;
+  function SafeParseTuple(obj, reviver) {
+    var json;
+    var error = null;
+    try {
+      json = JSON.parse(obj, reviver);
+    } catch (err) {
+      error = err;
+    }
+    return [error, json];
+  }
+
+  /**
+   * Returns whether an object is `Promise`-like (i.e. has a `then` method).
+   *
+   * @param  {Object}  value
+   *         An object that may or may not be `Promise`-like.
+   *
+   * @return {boolean}
+   *         Whether or not the object is `Promise`-like.
+   */
+  function isPromise(value) {
+    return value !== undefined && value !== null && typeof value.then === 'function';
+  }
+
+  /**
+   * Silence a Promise-like object.
+   *
+   * This is useful for avoiding non-harmful, but potentially confusing "uncaught
+   * play promise" rejection error messages.
+   *
+   * @param  {Object} value
+   *         An object that may or may not be `Promise`-like.
+   */
+  function silencePromise(value) {
+    if (isPromise(value)) {
+      value.then(null, e => {});
+    }
+  }
+
+  /**
+   * @file text-track-list-converter.js Utilities for capturing text track state and
+   * re-creating tracks based on a capture.
+   *
+   * @module text-track-list-converter
+   */
+
+  /**
+   * Examine a single {@link TextTrack} and return a JSON-compatible javascript object that
+   * represents the {@link TextTrack}'s state.
+   *
+   * @param {TextTrack} track
+   *        The text track to query.
+   *
+   * @return {Object}
+   *         A serializable javascript representation of the TextTrack.
+   * @private
+   */
+  const trackToJson_ = function (track) {
+    const ret = ['kind', 'label', 'language', 'id', 'inBandMetadataTrackDispatchType', 'mode', 'src'].reduce((acc, prop, i) => {
+      if (track[prop]) {
+        acc[prop] = track[prop];
+      }
+      return acc;
+    }, {
+      cues: track.cues && Array.prototype.map.call(track.cues, function (cue) {
+        return {
+          startTime: cue.startTime,
+          endTime: cue.endTime,
+          text: cue.text,
+          id: cue.id
+        };
+      })
+    });
+    return ret;
+  };
+
+  /**
+   * Examine a {@link Tech} and return a JSON-compatible javascript array that represents the
+   * state of all {@link TextTrack}s currently configured. The return array is compatible with
+   * {@link text-track-list-converter:jsonToTextTracks}.
+   *
+   * @param { import('../tech/tech').default } tech
+   *        The tech object to query
+   *
+   * @return {Array}
+   *         A serializable javascript representation of the {@link Tech}s
+   *         {@link TextTrackList}.
+   */
+  const textTracksToJson = function (tech) {
+    const trackEls = tech.$$('track');
+    const trackObjs = Array.prototype.map.call(trackEls, t => t.track);
+    const tracks = Array.prototype.map.call(trackEls, function (trackEl) {
+      const json = trackToJson_(trackEl.track);
+      if (trackEl.src) {
+        json.src = trackEl.src;
+      }
+      return json;
+    });
+    return tracks.concat(Array.prototype.filter.call(tech.textTracks(), function (track) {
+      return trackObjs.indexOf(track) === -1;
+    }).map(trackToJson_));
+  };
+
+  /**
+   * Create a set of remote {@link TextTrack}s on a {@link Tech} based on an array of javascript
+   * object {@link TextTrack} representations.
+   *
+   * @param {Array} json
+   *        An array of `TextTrack` representation objects, like those that would be
+   *        produced by `textTracksToJson`.
+   *
+   * @param {Tech} tech
+   *        The `Tech` to create the `TextTrack`s on.
+   */
+  const jsonToTextTracks = function (json, tech) {
+    json.forEach(function (track) {
+      const addedTrack = tech.addRemoteTextTrack(track).track;
+      if (!track.src && track.cues) {
+        track.cues.forEach(cue => addedTrack.addCue(cue));
+      }
+    });
+    return tech.textTracks();
+  };
+  var textTrackConverter = {
+    textTracksToJson,
+    jsonToTextTracks,
+    trackToJson_
+  };
+
+  /**
+   * @file modal-dialog.js
+   */
+  const MODAL_CLASS_NAME = 'vjs-modal-dialog';
+
+  /**
+   * The `ModalDialog` displays over the video and its controls, which blocks
+   * interaction with the player until it is closed.
+   *
+   * Modal dialogs include a "Close" button and will close when that button
+   * is activated - or when ESC is pressed anywhere.
+   *
+   * @extends Component
+   */
+  class ModalDialog extends Component$1 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param { import('./utils/dom').ContentDescriptor} [options.content=undefined]
+     *        Provide customized content for this modal.
+     *
+     * @param {string} [options.description]
+     *        A text description for the modal, primarily for accessibility.
+     *
+     * @param {boolean} [options.fillAlways=false]
+     *        Normally, modals are automatically filled only the first time
+     *        they open. This tells the modal to refresh its content
+     *        every time it opens.
+     *
+     * @param {string} [options.label]
+     *        A text label for the modal, primarily for accessibility.
+     *
+     * @param {boolean} [options.pauseOnOpen=true]
+     *        If `true`, playback will will be paused if playing when
+     *        the modal opens, and resumed when it closes.
+     *
+     * @param {boolean} [options.temporary=true]
+     *        If `true`, the modal can only be opened once; it will be
+     *        disposed as soon as it's closed.
+     *
+     * @param {boolean} [options.uncloseable=false]
+     *        If `true`, the user will not be able to close the modal
+     *        through the UI in the normal ways. Programmatic closing is
+     *        still possible.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.close_ = e => this.close(e);
+      this.opened_ = this.hasBeenOpened_ = this.hasBeenFilled_ = false;
+      this.closeable(!this.options_.uncloseable);
+      this.content(this.options_.content);
+
+      // Make sure the contentEl is defined AFTER any children are initialized
+      // because we only want the contents of the modal in the contentEl
+      // (not the UI elements like the close button).
+      this.contentEl_ = createEl('div', {
+        className: `${MODAL_CLASS_NAME}-content`
+      }, {
+        role: 'document'
+      });
+      this.descEl_ = createEl('p', {
+        className: `${MODAL_CLASS_NAME}-description vjs-control-text`,
+        id: this.el().getAttribute('aria-describedby')
+      });
+      textContent(this.descEl_, this.description());
+      this.el_.appendChild(this.descEl_);
+      this.el_.appendChild(this.contentEl_);
+    }
+
+    /**
+     * Create the `ModalDialog`'s DOM element
+     *
+     * @return {Element}
+     *         The DOM element that gets created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildCSSClass(),
+        tabIndex: -1
+      }, {
+        'aria-describedby': `${this.id()}_description`,
+        'aria-hidden': 'true',
+        'aria-label': this.label(),
+        'role': 'dialog',
+        'aria-live': 'polite'
+      });
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.descEl_ = null;
+      this.previouslyActiveEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `${MODAL_CLASS_NAME} vjs-hidden ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Returns the label string for this modal. Primarily used for accessibility.
+     *
+     * @return {string}
+     *         the localized or raw label of this modal.
+     */
+    label() {
+      return this.localize(this.options_.label || 'Modal Window');
+    }
+
+    /**
+     * Returns the description string for this modal. Primarily used for
+     * accessibility.
+     *
+     * @return {string}
+     *         The localized or raw description of this modal.
+     */
+    description() {
+      let desc = this.options_.description || this.localize('This is a modal window.');
+
+      // Append a universal closeability message if the modal is closeable.
+      if (this.closeable()) {
+        desc += ' ' + this.localize('This modal can be closed by pressing the Escape key or activating the close button.');
+      }
+      return desc;
+    }
+
+    /**
+     * Opens the modal.
+     *
+     * @fires ModalDialog#beforemodalopen
+     * @fires ModalDialog#modalopen
+     */
+    open() {
+      if (this.opened_) {
+        if (this.options_.fillAlways) {
+          this.fill();
+        }
+        return;
+      }
+      const player = this.player();
+
+      /**
+        * Fired just before a `ModalDialog` is opened.
+        *
+        * @event ModalDialog#beforemodalopen
+        * @type {Event}
+        */
+      this.trigger('beforemodalopen');
+      this.opened_ = true;
+
+      // Fill content if the modal has never opened before and
+      // never been filled.
+      if (this.options_.fillAlways || !this.hasBeenOpened_ && !this.hasBeenFilled_) {
+        this.fill();
+      }
+
+      // If the player was playing, pause it and take note of its previously
+      // playing state.
+      this.wasPlaying_ = !player.paused();
+      if (this.options_.pauseOnOpen && this.wasPlaying_) {
+        player.pause();
+      }
+      this.on('keydown', this.handleKeyDown_);
+
+      // Hide controls and note if they were enabled.
+      this.hadControls_ = player.controls();
+      player.controls(false);
+      this.show();
+      this.conditionalFocus_();
+      this.el().setAttribute('aria-hidden', 'false');
+
+      /**
+        * Fired just after a `ModalDialog` is opened.
+        *
+        * @event ModalDialog#modalopen
+        * @type {Event}
+        */
+      this.trigger('modalopen');
+      this.hasBeenOpened_ = true;
+    }
+
+    /**
+     * If the `ModalDialog` is currently open or closed.
+     *
+     * @param  {boolean} [value]
+     *         If given, it will open (`true`) or close (`false`) the modal.
+     *
+     * @return {boolean}
+     *         the current open state of the modaldialog
+     */
+    opened(value) {
+      if (typeof value === 'boolean') {
+        this[value ? 'open' : 'close']();
+      }
+      return this.opened_;
+    }
+
+    /**
+     * Closes the modal, does nothing if the `ModalDialog` is
+     * not open.
+     *
+     * @fires ModalDialog#beforemodalclose
+     * @fires ModalDialog#modalclose
+     */
+    close() {
+      if (!this.opened_) {
+        return;
+      }
+      const player = this.player();
+
+      /**
+        * Fired just before a `ModalDialog` is closed.
+        *
+        * @event ModalDialog#beforemodalclose
+        * @type {Event}
+        */
+      this.trigger('beforemodalclose');
+      this.opened_ = false;
+      if (this.wasPlaying_ && this.options_.pauseOnOpen) {
+        player.play();
+      }
+      this.off('keydown', this.handleKeyDown_);
+      if (this.hadControls_) {
+        player.controls(true);
+      }
+      this.hide();
+      this.el().setAttribute('aria-hidden', 'true');
+
+      /**
+        * Fired just after a `ModalDialog` is closed.
+        *
+        * @event ModalDialog#modalclose
+        * @type {Event}
+        */
+      this.trigger('modalclose');
+      this.conditionalBlur_();
+      if (this.options_.temporary) {
+        this.dispose();
+      }
+    }
+
+    /**
+     * Check to see if the `ModalDialog` is closeable via the UI.
+     *
+     * @param  {boolean} [value]
+     *         If given as a boolean, it will set the `closeable` option.
+     *
+     * @return {boolean}
+     *         Returns the final value of the closable option.
+     */
+    closeable(value) {
+      if (typeof value === 'boolean') {
+        const closeable = this.closeable_ = !!value;
+        let close = this.getChild('closeButton');
+
+        // If this is being made closeable and has no close button, add one.
+        if (closeable && !close) {
+          // The close button should be a child of the modal - not its
+          // content element, so temporarily change the content element.
+          const temp = this.contentEl_;
+          this.contentEl_ = this.el_;
+          close = this.addChild('closeButton', {
+            controlText: 'Close Modal Dialog'
+          });
+          this.contentEl_ = temp;
+          this.on(close, 'close', this.close_);
+        }
+
+        // If this is being made uncloseable and has a close button, remove it.
+        if (!closeable && close) {
+          this.off(close, 'close', this.close_);
+          this.removeChild(close);
+          close.dispose();
+        }
+      }
+      return this.closeable_;
+    }
+
+    /**
+     * Fill the modal's content element with the modal's "content" option.
+     * The content element will be emptied before this change takes place.
+     */
+    fill() {
+      this.fillWith(this.content());
+    }
+
+    /**
+     * Fill the modal's content element with arbitrary content.
+     * The content element will be emptied before this change takes place.
+     *
+     * @fires ModalDialog#beforemodalfill
+     * @fires ModalDialog#modalfill
+     *
+     * @param { import('./utils/dom').ContentDescriptor} [content]
+     *        The same rules apply to this as apply to the `content` option.
+     */
+    fillWith(content) {
+      const contentEl = this.contentEl();
+      const parentEl = contentEl.parentNode;
+      const nextSiblingEl = contentEl.nextSibling;
+
+      /**
+        * Fired just before a `ModalDialog` is filled with content.
+        *
+        * @event ModalDialog#beforemodalfill
+        * @type {Event}
+        */
+      this.trigger('beforemodalfill');
+      this.hasBeenFilled_ = true;
+
+      // Detach the content element from the DOM before performing
+      // manipulation to avoid modifying the live DOM multiple times.
+      parentEl.removeChild(contentEl);
+      this.empty();
+      insertContent(contentEl, content);
+      /**
+       * Fired just after a `ModalDialog` is filled with content.
+       *
+       * @event ModalDialog#modalfill
+       * @type {Event}
+       */
+      this.trigger('modalfill');
+
+      // Re-inject the re-filled content element.
+      if (nextSiblingEl) {
+        parentEl.insertBefore(contentEl, nextSiblingEl);
+      } else {
+        parentEl.appendChild(contentEl);
+      }
+
+      // make sure that the close button is last in the dialog DOM
+      const closeButton = this.getChild('closeButton');
+      if (closeButton) {
+        parentEl.appendChild(closeButton.el_);
+      }
+    }
+
+    /**
+     * Empties the content element. This happens anytime the modal is filled.
+     *
+     * @fires ModalDialog#beforemodalempty
+     * @fires ModalDialog#modalempty
+     */
+    empty() {
+      /**
+      * Fired just before a `ModalDialog` is emptied.
+      *
+      * @event ModalDialog#beforemodalempty
+      * @type {Event}
+      */
+      this.trigger('beforemodalempty');
+      emptyEl(this.contentEl());
+
+      /**
+      * Fired just after a `ModalDialog` is emptied.
+      *
+      * @event ModalDialog#modalempty
+      * @type {Event}
+      */
+      this.trigger('modalempty');
+    }
+
+    /**
+     * Gets or sets the modal content, which gets normalized before being
+     * rendered into the DOM.
+     *
+     * This does not update the DOM or fill the modal, but it is called during
+     * that process.
+     *
+     * @param  { import('./utils/dom').ContentDescriptor} [value]
+     *         If defined, sets the internal content value to be used on the
+     *         next call(s) to `fill`. This value is normalized before being
+     *         inserted. To "clear" the internal content value, pass `null`.
+     *
+     * @return { import('./utils/dom').ContentDescriptor}
+     *         The current content of the modal dialog
+     */
+    content(value) {
+      if (typeof value !== 'undefined') {
+        this.content_ = value;
+      }
+      return this.content_;
+    }
+
+    /**
+     * conditionally focus the modal dialog if focus was previously on the player.
+     *
+     * @private
+     */
+    conditionalFocus_() {
+      const activeEl = document.activeElement;
+      const playerEl = this.player_.el_;
+      this.previouslyActiveEl_ = null;
+      if (playerEl.contains(activeEl) || playerEl === activeEl) {
+        this.previouslyActiveEl_ = activeEl;
+        this.focus();
+      }
+    }
+
+    /**
+     * conditionally blur the element and refocus the last focused element
+     *
+     * @private
+     */
+    conditionalBlur_() {
+      if (this.previouslyActiveEl_) {
+        this.previouslyActiveEl_.focus();
+        this.previouslyActiveEl_ = null;
+      }
+    }
+
+    /**
+     * Keydown handler. Attached when modal is focused.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Do not allow keydowns to reach out of the modal dialog.
+      event.stopPropagation();
+      if (keycode.isEventKey(event, 'Escape') && this.closeable()) {
+        event.preventDefault();
+        this.close();
+        return;
+      }
+
+      // exit early if it isn't a tab key
+      if (!keycode.isEventKey(event, 'Tab')) {
+        return;
+      }
+      const focusableEls = this.focusableEls_();
+      const activeEl = this.el_.querySelector(':focus');
+      let focusIndex;
+      for (let i = 0; i < focusableEls.length; i++) {
+        if (activeEl === focusableEls[i]) {
+          focusIndex = i;
+          break;
+        }
+      }
+      if (document.activeElement === this.el_) {
+        focusIndex = 0;
+      }
+      if (event.shiftKey && focusIndex === 0) {
+        focusableEls[focusableEls.length - 1].focus();
+        event.preventDefault();
+      } else if (!event.shiftKey && focusIndex === focusableEls.length - 1) {
+        focusableEls[0].focus();
+        event.preventDefault();
+      }
+    }
+
+    /**
+     * get all focusable elements
+     *
+     * @private
+     */
+    focusableEls_() {
+      const allChildren = this.el_.querySelectorAll('*');
+      return Array.prototype.filter.call(allChildren, child => {
+        return (child instanceof window.HTMLAnchorElement || child instanceof window.HTMLAreaElement) && child.hasAttribute('href') || (child instanceof window.HTMLInputElement || child instanceof window.HTMLSelectElement || child instanceof window.HTMLTextAreaElement || child instanceof window.HTMLButtonElement) && !child.hasAttribute('disabled') || child instanceof window.HTMLIFrameElement || child instanceof window.HTMLObjectElement || child instanceof window.HTMLEmbedElement || child.hasAttribute('tabindex') && child.getAttribute('tabindex') !== -1 || child.hasAttribute('contenteditable');
+      });
+    }
+  }
+
+  /**
+   * Default options for `ModalDialog` default options.
+   *
+   * @type {Object}
+   * @private
+   */
+  ModalDialog.prototype.options_ = {
+    pauseOnOpen: true,
+    temporary: true
+  };
+  Component$1.registerComponent('ModalDialog', ModalDialog);
+
+  /**
+   * @file track-list.js
+   */
+
+  /**
+   * Common functionaliy between {@link TextTrackList}, {@link AudioTrackList}, and
+   * {@link VideoTrackList}
+   *
+   * @extends EventTarget
+   */
+  class TrackList extends EventTarget$2 {
+    /**
+     * Create an instance of this class
+     *
+     * @param { import('./track').default[] } tracks
+     *        A list of tracks to initialize the list with.
+     *
+     * @abstract
+     */
+    constructor(tracks = []) {
+      super();
+      this.tracks_ = [];
+
+      /**
+       * @memberof TrackList
+       * @member {number} length
+       *         The current number of `Track`s in the this Trackist.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.tracks_.length;
+        }
+      });
+      for (let i = 0; i < tracks.length; i++) {
+        this.addTrack(tracks[i]);
+      }
+    }
+
+    /**
+     * Add a {@link Track} to the `TrackList`
+     *
+     * @param { import('./track').default } track
+     *        The audio, video, or text track to add to the list.
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      const index = this.tracks_.length;
+      if (!('' + index in this)) {
+        Object.defineProperty(this, index, {
+          get() {
+            return this.tracks_[index];
+          }
+        });
+      }
+
+      // Do not add duplicate tracks
+      if (this.tracks_.indexOf(track) === -1) {
+        this.tracks_.push(track);
+        /**
+         * Triggered when a track is added to a track list.
+         *
+         * @event TrackList#addtrack
+         * @type {Event}
+         * @property {Track} track
+         *           A reference to track that was added.
+         */
+        this.trigger({
+          track,
+          type: 'addtrack',
+          target: this
+        });
+      }
+
+      /**
+       * Triggered when a track label is changed.
+       *
+       * @event TrackList#addtrack
+       * @type {Event}
+       * @property {Track} track
+       *           A reference to track that was added.
+       */
+      track.labelchange_ = () => {
+        this.trigger({
+          track,
+          type: 'labelchange',
+          target: this
+        });
+      };
+      if (isEvented(track)) {
+        track.addEventListener('labelchange', track.labelchange_);
+      }
+    }
+
+    /**
+     * Remove a {@link Track} from the `TrackList`
+     *
+     * @param { import('./track').default } rtrack
+     *        The audio, video, or text track to remove from the list.
+     *
+     * @fires TrackList#removetrack
+     */
+    removeTrack(rtrack) {
+      let track;
+      for (let i = 0, l = this.length; i < l; i++) {
+        if (this[i] === rtrack) {
+          track = this[i];
+          if (track.off) {
+            track.off();
+          }
+          this.tracks_.splice(i, 1);
+          break;
+        }
+      }
+      if (!track) {
+        return;
+      }
+
+      /**
+       * Triggered when a track is removed from track list.
+       *
+       * @event TrackList#removetrack
+       * @type {Event}
+       * @property {Track} track
+       *           A reference to track that was removed.
+       */
+      this.trigger({
+        track,
+        type: 'removetrack',
+        target: this
+      });
+    }
+
+    /**
+     * Get a Track from the TrackList by a tracks id
+     *
+     * @param {string} id - the id of the track to get
+     * @method getTrackById
+     * @return { import('./track').default }
+     * @private
+     */
+    getTrackById(id) {
+      let result = null;
+      for (let i = 0, l = this.length; i < l; i++) {
+        const track = this[i];
+        if (track.id === id) {
+          result = track;
+          break;
+        }
+      }
+      return result;
+    }
+  }
+
+  /**
+   * Triggered when a different track is selected/enabled.
+   *
+   * @event TrackList#change
+   * @type {Event}
+   */
+
+  /**
+   * Events that can be called with on + eventName. See {@link EventHandler}.
+   *
+   * @property {Object} TrackList#allowedEvents_
+   * @protected
+   */
+  TrackList.prototype.allowedEvents_ = {
+    change: 'change',
+    addtrack: 'addtrack',
+    removetrack: 'removetrack',
+    labelchange: 'labelchange'
+  };
+
+  // emulate attribute EventHandler support to allow for feature detection
+  for (const event in TrackList.prototype.allowedEvents_) {
+    TrackList.prototype['on' + event] = null;
+  }
+
+  /**
+   * @file audio-track-list.js
+   */
+
+  /**
+   * Anywhere we call this function we diverge from the spec
+   * as we only support one enabled audiotrack at a time
+   *
+   * @param {AudioTrackList} list
+   *        list to work on
+   *
+   * @param { import('./audio-track').default } track
+   *        The track to skip
+   *
+   * @private
+   */
+  const disableOthers$1 = function (list, track) {
+    for (let i = 0; i < list.length; i++) {
+      if (!Object.keys(list[i]).length || track.id === list[i].id) {
+        continue;
+      }
+      // another audio track is enabled, disable it
+      list[i].enabled = false;
+    }
+  };
+
+  /**
+   * The current list of {@link AudioTrack} for a media file.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist}
+   * @extends TrackList
+   */
+  class AudioTrackList extends TrackList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./audio-track').default[] } [tracks=[]]
+     *        A list of `AudioTrack` to instantiate the list with.
+     */
+    constructor(tracks = []) {
+      // make sure only 1 track is enabled
+      // sorted from last index to first index
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        if (tracks[i].enabled) {
+          disableOthers$1(tracks, tracks[i]);
+          break;
+        }
+      }
+      super(tracks);
+      this.changing_ = false;
+    }
+
+    /**
+     * Add an {@link AudioTrack} to the `AudioTrackList`.
+     *
+     * @param { import('./audio-track').default } track
+     *        The AudioTrack to add to the list
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      if (track.enabled) {
+        disableOthers$1(this, track);
+      }
+      super.addTrack(track);
+      // native tracks don't have this
+      if (!track.addEventListener) {
+        return;
+      }
+      track.enabledChange_ = () => {
+        // when we are disabling other tracks (since we don't support
+        // more than one track at a time) we will set changing_
+        // to true so that we don't trigger additional change events
+        if (this.changing_) {
+          return;
+        }
+        this.changing_ = true;
+        disableOthers$1(this, track);
+        this.changing_ = false;
+        this.trigger('change');
+      };
+
+      /**
+       * @listens AudioTrack#enabledchange
+       * @fires TrackList#change
+       */
+      track.addEventListener('enabledchange', track.enabledChange_);
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+      if (rtrack.removeEventListener && rtrack.enabledChange_) {
+        rtrack.removeEventListener('enabledchange', rtrack.enabledChange_);
+        rtrack.enabledChange_ = null;
+      }
+    }
+  }
+
+  /**
+   * @file video-track-list.js
+   */
+
+  /**
+   * Un-select all other {@link VideoTrack}s that are selected.
+   *
+   * @param {VideoTrackList} list
+   *        list to work on
+   *
+   * @param { import('./video-track').default } track
+   *        The track to skip
+   *
+   * @private
+   */
+  const disableOthers = function (list, track) {
+    for (let i = 0; i < list.length; i++) {
+      if (!Object.keys(list[i]).length || track.id === list[i].id) {
+        continue;
+      }
+      // another video track is enabled, disable it
+      list[i].selected = false;
+    }
+  };
+
+  /**
+   * The current list of {@link VideoTrack} for a video.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist}
+   * @extends TrackList
+   */
+  class VideoTrackList extends TrackList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {VideoTrack[]} [tracks=[]]
+     *        A list of `VideoTrack` to instantiate the list with.
+     */
+    constructor(tracks = []) {
+      // make sure only 1 track is enabled
+      // sorted from last index to first index
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        if (tracks[i].selected) {
+          disableOthers(tracks, tracks[i]);
+          break;
+        }
+      }
+      super(tracks);
+      this.changing_ = false;
+
+      /**
+       * @member {number} VideoTrackList#selectedIndex
+       *         The current index of the selected {@link VideoTrack`}.
+       */
+      Object.defineProperty(this, 'selectedIndex', {
+        get() {
+          for (let i = 0; i < this.length; i++) {
+            if (this[i].selected) {
+              return i;
+            }
+          }
+          return -1;
+        },
+        set() {}
+      });
+    }
+
+    /**
+     * Add a {@link VideoTrack} to the `VideoTrackList`.
+     *
+     * @param { import('./video-track').default } track
+     *        The VideoTrack to add to the list
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      if (track.selected) {
+        disableOthers(this, track);
+      }
+      super.addTrack(track);
+      // native tracks don't have this
+      if (!track.addEventListener) {
+        return;
+      }
+      track.selectedChange_ = () => {
+        if (this.changing_) {
+          return;
+        }
+        this.changing_ = true;
+        disableOthers(this, track);
+        this.changing_ = false;
+        this.trigger('change');
+      };
+
+      /**
+       * @listens VideoTrack#selectedchange
+       * @fires TrackList#change
+       */
+      track.addEventListener('selectedchange', track.selectedChange_);
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+      if (rtrack.removeEventListener && rtrack.selectedChange_) {
+        rtrack.removeEventListener('selectedchange', rtrack.selectedChange_);
+        rtrack.selectedChange_ = null;
+      }
+    }
+  }
+
+  /**
+   * @file text-track-list.js
+   */
+
+  /**
+   * The current list of {@link TextTrack} for a media file.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttracklist}
+   * @extends TrackList
+   */
+  class TextTrackList extends TrackList {
+    /**
+     * Add a {@link TextTrack} to the `TextTrackList`
+     *
+     * @param { import('./text-track').default } track
+     *        The text track to add to the list.
+     *
+     * @fires TrackList#addtrack
+     */
+    addTrack(track) {
+      super.addTrack(track);
+      if (!this.queueChange_) {
+        this.queueChange_ = () => this.queueTrigger('change');
+      }
+      if (!this.triggerSelectedlanguagechange) {
+        this.triggerSelectedlanguagechange_ = () => this.trigger('selectedlanguagechange');
+      }
+
+      /**
+       * @listens TextTrack#modechange
+       * @fires TrackList#change
+       */
+      track.addEventListener('modechange', this.queueChange_);
+      const nonLanguageTextTrackKind = ['metadata', 'chapters'];
+      if (nonLanguageTextTrackKind.indexOf(track.kind) === -1) {
+        track.addEventListener('modechange', this.triggerSelectedlanguagechange_);
+      }
+    }
+    removeTrack(rtrack) {
+      super.removeTrack(rtrack);
+
+      // manually remove the event handlers we added
+      if (rtrack.removeEventListener) {
+        if (this.queueChange_) {
+          rtrack.removeEventListener('modechange', this.queueChange_);
+        }
+        if (this.selectedlanguagechange_) {
+          rtrack.removeEventListener('modechange', this.triggerSelectedlanguagechange_);
+        }
+      }
+    }
+  }
+
+  /**
+   * @file html-track-element-list.js
+   */
+
+  /**
+   * The current list of {@link HtmlTrackElement}s.
+   */
+  class HtmlTrackElementList {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {HtmlTrackElement[]} [tracks=[]]
+     *        A list of `HtmlTrackElement` to instantiate the list with.
+     */
+    constructor(trackElements = []) {
+      this.trackElements_ = [];
+
+      /**
+       * @memberof HtmlTrackElementList
+       * @member {number} length
+       *         The current number of `Track`s in the this Trackist.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.trackElements_.length;
+        }
+      });
+      for (let i = 0, length = trackElements.length; i < length; i++) {
+        this.addTrackElement_(trackElements[i]);
+      }
+    }
+
+    /**
+     * Add an {@link HtmlTrackElement} to the `HtmlTrackElementList`
+     *
+     * @param {HtmlTrackElement} trackElement
+     *        The track element to add to the list.
+     *
+     * @private
+     */
+    addTrackElement_(trackElement) {
+      const index = this.trackElements_.length;
+      if (!('' + index in this)) {
+        Object.defineProperty(this, index, {
+          get() {
+            return this.trackElements_[index];
+          }
+        });
+      }
+
+      // Do not add duplicate elements
+      if (this.trackElements_.indexOf(trackElement) === -1) {
+        this.trackElements_.push(trackElement);
+      }
+    }
+
+    /**
+     * Get an {@link HtmlTrackElement} from the `HtmlTrackElementList` given an
+     * {@link TextTrack}.
+     *
+     * @param {TextTrack} track
+     *        The track associated with a track element.
+     *
+     * @return {HtmlTrackElement|undefined}
+     *         The track element that was found or undefined.
+     *
+     * @private
+     */
+    getTrackElementByTrack_(track) {
+      let trackElement_;
+      for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+        if (track === this.trackElements_[i].track) {
+          trackElement_ = this.trackElements_[i];
+          break;
+        }
+      }
+      return trackElement_;
+    }
+
+    /**
+     * Remove a {@link HtmlTrackElement} from the `HtmlTrackElementList`
+     *
+     * @param {HtmlTrackElement} trackElement
+     *        The track element to remove from the list.
+     *
+     * @private
+     */
+    removeTrackElement_(trackElement) {
+      for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+        if (trackElement === this.trackElements_[i]) {
+          if (this.trackElements_[i].track && typeof this.trackElements_[i].track.off === 'function') {
+            this.trackElements_[i].track.off();
+          }
+          if (typeof this.trackElements_[i].off === 'function') {
+            this.trackElements_[i].off();
+          }
+          this.trackElements_.splice(i, 1);
+          break;
+        }
+      }
+    }
+  }
+
+  /**
+   * @file text-track-cue-list.js
+   */
+
+  /**
+   * @typedef {Object} TextTrackCueList~TextTrackCue
+   *
+   * @property {string} id
+   *           The unique id for this text track cue
+   *
+   * @property {number} startTime
+   *           The start time for this text track cue
+   *
+   * @property {number} endTime
+   *           The end time for this text track cue
+   *
+   * @property {boolean} pauseOnExit
+   *           Pause when the end time is reached if true.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue}
+   */
+
+  /**
+   * A List of TextTrackCues.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcuelist}
+   */
+  class TextTrackCueList {
+    /**
+     * Create an instance of this class..
+     *
+     * @param {Array} cues
+     *        A list of cues to be initialized with
+     */
+    constructor(cues) {
+      TextTrackCueList.prototype.setCues_.call(this, cues);
+
+      /**
+       * @memberof TextTrackCueList
+       * @member {number} length
+       *         The current number of `TextTrackCue`s in the TextTrackCueList.
+       * @instance
+       */
+      Object.defineProperty(this, 'length', {
+        get() {
+          return this.length_;
+        }
+      });
+    }
+
+    /**
+     * A setter for cues in this list. Creates getters
+     * an an index for the cues.
+     *
+     * @param {Array} cues
+     *        An array of cues to set
+     *
+     * @private
+     */
+    setCues_(cues) {
+      const oldLength = this.length || 0;
+      let i = 0;
+      const l = cues.length;
+      this.cues_ = cues;
+      this.length_ = cues.length;
+      const defineProp = function (index) {
+        if (!('' + index in this)) {
+          Object.defineProperty(this, '' + index, {
+            get() {
+              return this.cues_[index];
+            }
+          });
+        }
+      };
+      if (oldLength < l) {
+        i = oldLength;
+        for (; i < l; i++) {
+          defineProp.call(this, i);
+        }
+      }
+    }
+
+    /**
+     * Get a `TextTrackCue` that is currently in the `TextTrackCueList` by id.
+     *
+     * @param {string} id
+     *        The id of the cue that should be searched for.
+     *
+     * @return {TextTrackCueList~TextTrackCue|null}
+     *         A single cue or null if none was found.
+     */
+    getCueById(id) {
+      let result = null;
+      for (let i = 0, l = this.length; i < l; i++) {
+        const cue = this[i];
+        if (cue.id === id) {
+          result = cue;
+          break;
+        }
+      }
+      return result;
+    }
+  }
+
+  /**
+   * @file track-kinds.js
+   */
+
+  /**
+   * All possible `VideoTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-videotrack-kind
+   * @typedef VideoTrack~Kind
+   * @enum
+   */
+  const VideoTrackKind = {
+    alternative: 'alternative',
+    captions: 'captions',
+    main: 'main',
+    sign: 'sign',
+    subtitles: 'subtitles',
+    commentary: 'commentary'
+  };
+
+  /**
+   * All possible `AudioTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-kind
+   * @typedef AudioTrack~Kind
+   * @enum
+   */
+  const AudioTrackKind = {
+    'alternative': 'alternative',
+    'descriptions': 'descriptions',
+    'main': 'main',
+    'main-desc': 'main-desc',
+    'translation': 'translation',
+    'commentary': 'commentary'
+  };
+
+  /**
+   * All possible `TextTrackKind`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-texttrack-kind
+   * @typedef TextTrack~Kind
+   * @enum
+   */
+  const TextTrackKind = {
+    subtitles: 'subtitles',
+    captions: 'captions',
+    descriptions: 'descriptions',
+    chapters: 'chapters',
+    metadata: 'metadata'
+  };
+
+  /**
+   * All possible `TextTrackMode`s
+   *
+   * @see https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackmode
+   * @typedef TextTrack~Mode
+   * @enum
+   */
+  const TextTrackMode = {
+    disabled: 'disabled',
+    hidden: 'hidden',
+    showing: 'showing'
+  };
+
+  /**
+   * @file track.js
+   */
+
+  /**
+   * A Track class that contains all of the common functionality for {@link AudioTrack},
+   * {@link VideoTrack}, and {@link TextTrack}.
+   *
+   * > Note: This class should not be used directly
+   *
+   * @see {@link https://html.spec.whatwg.org/multipage/embedded-content.html}
+   * @extends EventTarget
+   * @abstract
+   */
+  class Track extends EventTarget$2 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {string} [options.kind='']
+     *        A valid kind for the track type you are creating.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @abstract
+     */
+    constructor(options = {}) {
+      super();
+      const trackProps = {
+        id: options.id || 'vjs_track_' + newGUID(),
+        kind: options.kind || '',
+        language: options.language || ''
+      };
+      let label = options.label || '';
+
+      /**
+       * @memberof Track
+       * @member {string} id
+       *         The id of this track. Cannot be changed after creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      /**
+       * @memberof Track
+       * @member {string} kind
+       *         The kind of track that this is. Cannot be changed after creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      /**
+       * @memberof Track
+       * @member {string} language
+       *         The two letter language code for this track. Cannot be changed after
+       *         creation.
+       * @instance
+       *
+       * @readonly
+       */
+
+      for (const key in trackProps) {
+        Object.defineProperty(this, key, {
+          get() {
+            return trackProps[key];
+          },
+          set() {}
+        });
+      }
+
+      /**
+       * @memberof Track
+       * @member {string} label
+       *         The label of this track. Cannot be changed after creation.
+       * @instance
+       *
+       * @fires Track#labelchange
+       */
+      Object.defineProperty(this, 'label', {
+        get() {
+          return label;
+        },
+        set(newLabel) {
+          if (newLabel !== label) {
+            label = newLabel;
+
+            /**
+             * An event that fires when label changes on this track.
+             *
+             * > Note: This is not part of the spec!
+             *
+             * @event Track#labelchange
+             * @type {Event}
+             */
+            this.trigger('labelchange');
+          }
+        }
+      });
+    }
+  }
+
+  /**
+   * @file url.js
+   * @module url
+   */
+
+  /**
+   * @typedef {Object} url:URLObject
+   *
+   * @property {string} protocol
+   *           The protocol of the url that was parsed.
+   *
+   * @property {string} hostname
+   *           The hostname of the url that was parsed.
+   *
+   * @property {string} port
+   *           The port of the url that was parsed.
+   *
+   * @property {string} pathname
+   *           The pathname of the url that was parsed.
+   *
+   * @property {string} search
+   *           The search query of the url that was parsed.
+   *
+   * @property {string} hash
+   *           The hash of the url that was parsed.
+   *
+   * @property {string} host
+   *           The host of the url that was parsed.
+   */
+
+  /**
+   * Resolve and parse the elements of a URL.
+   *
+   * @function
+   * @param    {String} url
+   *           The url to parse
+   *
+   * @return   {url:URLObject}
+   *           An object of url details
+   */
+  const parseUrl = function (url) {
+    // This entire method can be replace with URL once we are able to drop IE11
+
+    const props = ['protocol', 'hostname', 'port', 'pathname', 'search', 'hash', 'host'];
+
+    // add the url to an anchor and let the browser parse the URL
+    const a = document.createElement('a');
+    a.href = url;
+
+    // Copy the specific URL properties to a new object
+    // This is also needed for IE because the anchor loses its
+    // properties when it's removed from the dom
+    const details = {};
+    for (let i = 0; i < props.length; i++) {
+      details[props[i]] = a[props[i]];
+    }
+
+    // IE adds the port to the host property unlike everyone else. If
+    // a port identifier is added for standard ports, strip it.
+    if (details.protocol === 'http:') {
+      details.host = details.host.replace(/:80$/, '');
+    }
+    if (details.protocol === 'https:') {
+      details.host = details.host.replace(/:443$/, '');
+    }
+    if (!details.protocol) {
+      details.protocol = window.location.protocol;
+    }
+
+    /* istanbul ignore if */
+    if (!details.host) {
+      details.host = window.location.host;
+    }
+    return details;
+  };
+
+  /**
+   * Get absolute version of relative URL.
+   *
+   * @function
+   * @param    {string} url
+   *           URL to make absolute
+   *
+   * @return   {string}
+   *           Absolute URL
+   *
+   * @see      http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
+   */
+  const getAbsoluteURL = function (url) {
+    // Check if absolute URL
+    if (!url.match(/^https?:\/\//)) {
+      // Add the url to an anchor and let the browser parse it to convert to an absolute url
+      const a = document.createElement('a');
+      a.href = url;
+      url = a.href;
+    }
+    return url;
+  };
+
+  /**
+   * Returns the extension of the passed file name. It will return an empty string
+   * if passed an invalid path.
+   *
+   * @function
+   * @param    {string} path
+   *           The fileName path like '/path/to/file.mp4'
+   *
+   * @return  {string}
+   *           The extension in lower case or an empty string if no
+   *           extension could be found.
+   */
+  const getFileExtension = function (path) {
+    if (typeof path === 'string') {
+      const splitPathRe = /^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/;
+      const pathParts = splitPathRe.exec(path);
+      if (pathParts) {
+        return pathParts.pop().toLowerCase();
+      }
+    }
+    return '';
+  };
+
+  /**
+   * Returns whether the url passed is a cross domain request or not.
+   *
+   * @function
+   * @param    {string} url
+   *           The url to check.
+   *
+   * @param    {Object} [winLoc]
+   *           the domain to check the url against, defaults to window.location
+   *
+   * @param    {string} [winLoc.protocol]
+   *           The window location protocol defaults to window.location.protocol
+   *
+   * @param    {string} [winLoc.host]
+   *           The window location host defaults to window.location.host
+   *
+   * @return   {boolean}
+   *           Whether it is a cross domain request or not.
+   */
+  const isCrossOrigin = function (url, winLoc = window.location) {
+    const urlInfo = parseUrl(url);
+
+    // IE8 protocol relative urls will return ':' for protocol
+    const srcProtocol = urlInfo.protocol === ':' ? winLoc.protocol : urlInfo.protocol;
+
+    // Check if url is for another domain/origin
+    // IE8 doesn't know location.origin, so we won't rely on it here
+    const crossOrigin = srcProtocol + urlInfo.host !== winLoc.protocol + winLoc.host;
+    return crossOrigin;
+  };
+
+  var Url = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    parseUrl: parseUrl,
+    getAbsoluteURL: getAbsoluteURL,
+    getFileExtension: getFileExtension,
+    isCrossOrigin: isCrossOrigin
+  });
+
+  var win;
+  if (typeof window !== "undefined") {
+    win = window;
+  } else if (typeof commonjsGlobal !== "undefined") {
+    win = commonjsGlobal;
+  } else if (typeof self !== "undefined") {
+    win = self;
+  } else {
+    win = {};
+  }
+  var window_1 = win;
+
+  var _extends_1 = createCommonjsModule(function (module) {
+    function _extends() {
+      module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i];
+          for (var key in source) {
+            if (Object.prototype.hasOwnProperty.call(source, key)) {
+              target[key] = source[key];
+            }
+          }
+        }
+        return target;
+      }, module.exports.__esModule = true, module.exports["default"] = module.exports;
+      return _extends.apply(this, arguments);
+    }
+    module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+  var _extends$1 = unwrapExports(_extends_1);
+
+  var isFunction_1 = isFunction;
+  var toString = Object.prototype.toString;
+  function isFunction(fn) {
+    if (!fn) {
+      return false;
+    }
+    var string = toString.call(fn);
+    return string === '[object Function]' || typeof fn === 'function' && string !== '[object RegExp]' || typeof window !== 'undefined' && (
+    // IE8 and below
+    fn === window.setTimeout || fn === window.alert || fn === window.confirm || fn === window.prompt);
+  }
+
+  var httpResponseHandler = function httpResponseHandler(callback, decodeResponseBody) {
+    if (decodeResponseBody === void 0) {
+      decodeResponseBody = false;
+    }
+    return function (err, response, responseBody) {
+      // if the XHR failed, return that error
+      if (err) {
+        callback(err);
+        return;
+      } // if the HTTP status code is 4xx or 5xx, the request also failed
+
+      if (response.statusCode >= 400 && response.statusCode <= 599) {
+        var cause = responseBody;
+        if (decodeResponseBody) {
+          if (window_1.TextDecoder) {
+            var charset = getCharset(response.headers && response.headers['content-type']);
+            try {
+              cause = new TextDecoder(charset).decode(responseBody);
+            } catch (e) {}
+          } else {
+            cause = String.fromCharCode.apply(null, new Uint8Array(responseBody));
+          }
+        }
+        callback({
+          cause: cause
+        });
+        return;
+      } // otherwise, request succeeded
+
+      callback(null, responseBody);
+    };
+  };
+  function getCharset(contentTypeHeader) {
+    if (contentTypeHeader === void 0) {
+      contentTypeHeader = '';
+    }
+    return contentTypeHeader.toLowerCase().split(';').reduce(function (charset, contentType) {
+      var _contentType$split = contentType.split('='),
+        type = _contentType$split[0],
+        value = _contentType$split[1];
+      if (type.trim() === 'charset') {
+        return value.trim();
+      }
+      return charset;
+    }, 'utf-8');
+  }
+  var httpHandler = httpResponseHandler;
+
+  createXHR.httpHandler = httpHandler;
+  /**
+   * @license
+   * slighly modified parse-headers 2.0.2 <https://github.com/kesla/parse-headers/>
+   * Copyright (c) 2014 David Björklund
+   * Available under the MIT license
+   * <https://github.com/kesla/parse-headers/blob/master/LICENCE>
+   */
+
+  var parseHeaders = function parseHeaders(headers) {
+    var result = {};
+    if (!headers) {
+      return result;
+    }
+    headers.trim().split('\n').forEach(function (row) {
+      var index = row.indexOf(':');
+      var key = row.slice(0, index).trim().toLowerCase();
+      var value = row.slice(index + 1).trim();
+      if (typeof result[key] === 'undefined') {
+        result[key] = value;
+      } else if (Array.isArray(result[key])) {
+        result[key].push(value);
+      } else {
+        result[key] = [result[key], value];
+      }
+    });
+    return result;
+  };
+  var lib = createXHR; // Allow use of default import syntax in TypeScript
+
+  var default_1 = createXHR;
+  createXHR.XMLHttpRequest = window_1.XMLHttpRequest || noop$1;
+  createXHR.XDomainRequest = "withCredentials" in new createXHR.XMLHttpRequest() ? createXHR.XMLHttpRequest : window_1.XDomainRequest;
+  forEachArray(["get", "put", "post", "patch", "head", "delete"], function (method) {
+    createXHR[method === "delete" ? "del" : method] = function (uri, options, callback) {
+      options = initParams(uri, options, callback);
+      options.method = method.toUpperCase();
+      return _createXHR(options);
+    };
+  });
+  function forEachArray(array, iterator) {
+    for (var i = 0; i < array.length; i++) {
+      iterator(array[i]);
+    }
+  }
+  function isEmpty(obj) {
+    for (var i in obj) {
+      if (obj.hasOwnProperty(i)) return false;
+    }
+    return true;
+  }
+  function initParams(uri, options, callback) {
+    var params = uri;
+    if (isFunction_1(options)) {
+      callback = options;
+      if (typeof uri === "string") {
+        params = {
+          uri: uri
+        };
+      }
+    } else {
+      params = _extends_1({}, options, {
+        uri: uri
+      });
+    }
+    params.callback = callback;
+    return params;
+  }
+  function createXHR(uri, options, callback) {
+    options = initParams(uri, options, callback);
+    return _createXHR(options);
+  }
+  function _createXHR(options) {
+    if (typeof options.callback === "undefined") {
+      throw new Error("callback argument missing");
+    }
+    var called = false;
+    var callback = function cbOnce(err, response, body) {
+      if (!called) {
+        called = true;
+        options.callback(err, response, body);
+      }
+    };
+    function readystatechange() {
+      if (xhr.readyState === 4) {
+        setTimeout(loadFunc, 0);
+      }
+    }
+    function getBody() {
+      // Chrome with requestType=blob throws errors arround when even testing access to responseText
+      var body = undefined;
+      if (xhr.response) {
+        body = xhr.response;
+      } else {
+        body = xhr.responseText || getXml(xhr);
+      }
+      if (isJson) {
+        try {
+          body = JSON.parse(body);
+        } catch (e) {}
+      }
+      return body;
+    }
+    function errorFunc(evt) {
+      clearTimeout(timeoutTimer);
+      if (!(evt instanceof Error)) {
+        evt = new Error("" + (evt || "Unknown XMLHttpRequest Error"));
+      }
+      evt.statusCode = 0;
+      return callback(evt, failureResponse);
+    } // will load the data & process the response in a special response object
+
+    function loadFunc() {
+      if (aborted) return;
+      var status;
+      clearTimeout(timeoutTimer);
+      if (options.useXDR && xhr.status === undefined) {
+        //IE8 CORS GET successful response doesn't have a status field, but body is fine
+        status = 200;
+      } else {
+        status = xhr.status === 1223 ? 204 : xhr.status;
+      }
+      var response = failureResponse;
+      var err = null;
+      if (status !== 0) {
+        response = {
+          body: getBody(),
+          statusCode: status,
+          method: method,
+          headers: {},
+          url: uri,
+          rawRequest: xhr
+        };
+        if (xhr.getAllResponseHeaders) {
+          //remember xhr can in fact be XDR for CORS in IE
+          response.headers = parseHeaders(xhr.getAllResponseHeaders());
+        }
+      } else {
+        err = new Error("Internal XMLHttpRequest Error");
+      }
+      return callback(err, response, response.body);
+    }
+    var xhr = options.xhr || null;
+    if (!xhr) {
+      if (options.cors || options.useXDR) {
+        xhr = new createXHR.XDomainRequest();
+      } else {
+        xhr = new createXHR.XMLHttpRequest();
+      }
+    }
+    var key;
+    var aborted;
+    var uri = xhr.url = options.uri || options.url;
+    var method = xhr.method = options.method || "GET";
+    var body = options.body || options.data;
+    var headers = xhr.headers = options.headers || {};
+    var sync = !!options.sync;
+    var isJson = false;
+    var timeoutTimer;
+    var failureResponse = {
+      body: undefined,
+      headers: {},
+      statusCode: 0,
+      method: method,
+      url: uri,
+      rawRequest: xhr
+    };
+    if ("json" in options && options.json !== false) {
+      isJson = true;
+      headers["accept"] || headers["Accept"] || (headers["Accept"] = "application/json"); //Don't override existing accept header declared by user
+
+      if (method !== "GET" && method !== "HEAD") {
+        headers["content-type"] || headers["Content-Type"] || (headers["Content-Type"] = "application/json"); //Don't override existing accept header declared by user
+
+        body = JSON.stringify(options.json === true ? body : options.json);
+      }
+    }
+    xhr.onreadystatechange = readystatechange;
+    xhr.onload = loadFunc;
+    xhr.onerror = errorFunc; // IE9 must have onprogress be set to a unique function.
+
+    xhr.onprogress = function () {// IE must die
+    };
+    xhr.onabort = function () {
+      aborted = true;
+    };
+    xhr.ontimeout = errorFunc;
+    xhr.open(method, uri, !sync, options.username, options.password); //has to be after open
+
+    if (!sync) {
+      xhr.withCredentials = !!options.withCredentials;
+    } // Cannot set timeout with sync request
+    // not setting timeout on the xhr object, because of old webkits etc. not handling that correctly
+    // both npm's request and jquery 1.x use this kind of timeout, so this is being consistent
+
+    if (!sync && options.timeout > 0) {
+      timeoutTimer = setTimeout(function () {
+        if (aborted) return;
+        aborted = true; //IE9 may still call readystatechange
+
+        xhr.abort("timeout");
+        var e = new Error("XMLHttpRequest timeout");
+        e.code = "ETIMEDOUT";
+        errorFunc(e);
+      }, options.timeout);
+    }
+    if (xhr.setRequestHeader) {
+      for (key in headers) {
+        if (headers.hasOwnProperty(key)) {
+          xhr.setRequestHeader(key, headers[key]);
+        }
+      }
+    } else if (options.headers && !isEmpty(options.headers)) {
+      throw new Error("Headers cannot be set on an XDomainRequest object");
+    }
+    if ("responseType" in options) {
+      xhr.responseType = options.responseType;
+    }
+    if ("beforeSend" in options && typeof options.beforeSend === "function") {
+      options.beforeSend(xhr);
+    } // Microsoft Edge browser sends "undefined" when send is called with undefined value.
+    // XMLHttpRequest spec says to pass null as body to indicate no body
+    // See https://github.com/naugtur/xhr/issues/100.
+
+    xhr.send(body || null);
+    return xhr;
+  }
+  function getXml(xhr) {
+    // xhr.responseXML will throw Exception "InvalidStateError" or "DOMException"
+    // See https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseXML.
+    try {
+      if (xhr.responseType === "document") {
+        return xhr.responseXML;
+      }
+      var firefoxBugTakenEffect = xhr.responseXML && xhr.responseXML.documentElement.nodeName === "parsererror";
+      if (xhr.responseType === "" && !firefoxBugTakenEffect) {
+        return xhr.responseXML;
+      }
+    } catch (e) {}
+    return null;
+  }
+  function noop$1() {}
+  lib.default = default_1;
+
+  /**
+   * @file text-track.js
+   */
+
+  /**
+   * Takes a webvtt file contents and parses it into cues
+   *
+   * @param {string} srcContent
+   *        webVTT file contents
+   *
+   * @param {TextTrack} track
+   *        TextTrack to add cues to. Cues come from the srcContent.
+   *
+   * @private
+   */
+  const parseCues = function (srcContent, track) {
+    const parser = new window.WebVTT.Parser(window, window.vttjs, window.WebVTT.StringDecoder());
+    const errors = [];
+    parser.oncue = function (cue) {
+      track.addCue(cue);
+    };
+    parser.onparsingerror = function (error) {
+      errors.push(error);
+    };
+    parser.onflush = function () {
+      track.trigger({
+        type: 'loadeddata',
+        target: track
+      });
+    };
+    parser.parse(srcContent);
+    if (errors.length > 0) {
+      if (window.console && window.console.groupCollapsed) {
+        window.console.groupCollapsed(`Text Track parsing errors for ${track.src}`);
+      }
+      errors.forEach(error => log$1.error(error));
+      if (window.console && window.console.groupEnd) {
+        window.console.groupEnd();
+      }
+    }
+    parser.flush();
+  };
+
+  /**
+   * Load a `TextTrack` from a specified url.
+   *
+   * @param {string} src
+   *        Url to load track from.
+   *
+   * @param {TextTrack} track
+   *        Track to add cues to. Comes from the content at the end of `url`.
+   *
+   * @private
+   */
+  const loadTrack = function (src, track) {
+    const opts = {
+      uri: src
+    };
+    const crossOrigin = isCrossOrigin(src);
+    if (crossOrigin) {
+      opts.cors = crossOrigin;
+    }
+    const withCredentials = track.tech_.crossOrigin() === 'use-credentials';
+    if (withCredentials) {
+      opts.withCredentials = withCredentials;
+    }
+    lib(opts, bind_(this, function (err, response, responseBody) {
+      if (err) {
+        return log$1.error(err, response);
+      }
+      track.loaded_ = true;
+
+      // Make sure that vttjs has loaded, otherwise, wait till it finished loading
+      // NOTE: this is only used for the alt/video.novtt.js build
+      if (typeof window.WebVTT !== 'function') {
+        if (track.tech_) {
+          // to prevent use before define eslint error, we define loadHandler
+          // as a let here
+          track.tech_.any(['vttjsloaded', 'vttjserror'], event => {
+            if (event.type === 'vttjserror') {
+              log$1.error(`vttjs failed to load, stopping trying to process ${track.src}`);
+              return;
+            }
+            return parseCues(responseBody, track);
+          });
+        }
+      } else {
+        parseCues(responseBody, track);
+      }
+    }));
+  };
+
+  /**
+   * A representation of a single `TextTrack`.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrack}
+   * @extends Track
+   */
+  class TextTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} options={}
+     *        Object of option names and values
+     *
+     * @param { import('../tech/tech').default } options.tech
+     *        A reference to the tech that owns this TextTrack.
+     *
+     * @param {TextTrack~Kind} [options.kind='subtitles']
+     *        A valid text track kind.
+     *
+     * @param {TextTrack~Mode} [options.mode='disabled']
+     *        A valid text track mode.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this TextTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {string} [options.srclang='']
+     *        A valid two character language code. An alternative, but deprioritized
+     *        version of `options.language`
+     *
+     * @param {string} [options.src]
+     *        A url to TextTrack cues.
+     *
+     * @param {boolean} [options.default]
+     *        If this track should default to on or off.
+     */
+    constructor(options = {}) {
+      if (!options.tech) {
+        throw new Error('A tech was not provided.');
+      }
+      const settings = merge$2(options, {
+        kind: TextTrackKind[options.kind] || 'subtitles',
+        language: options.language || options.srclang || ''
+      });
+      let mode = TextTrackMode[settings.mode] || 'disabled';
+      const default_ = settings.default;
+      if (settings.kind === 'metadata' || settings.kind === 'chapters') {
+        mode = 'hidden';
+      }
+      super(settings);
+      this.tech_ = settings.tech;
+      this.cues_ = [];
+      this.activeCues_ = [];
+      this.preload_ = this.tech_.preloadTextTracks !== false;
+      const cues = new TextTrackCueList(this.cues_);
+      const activeCues = new TextTrackCueList(this.activeCues_);
+      let changed = false;
+      this.timeupdateHandler = bind_(this, function (event = {}) {
+        if (this.tech_.isDisposed()) {
+          return;
+        }
+        if (!this.tech_.isReady_) {
+          if (event.type !== 'timeupdate') {
+            this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+          }
+          return;
+        }
+
+        // Accessing this.activeCues for the side-effects of updating itself
+        // due to its nature as a getter function. Do not remove or cues will
+        // stop updating!
+        // Use the setter to prevent deletion from uglify (pure_getters rule)
+        this.activeCues = this.activeCues;
+        if (changed) {
+          this.trigger('cuechange');
+          changed = false;
+        }
+        if (event.type !== 'timeupdate') {
+          this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+        }
+      });
+      const disposeHandler = () => {
+        this.stopTracking();
+      };
+      this.tech_.one('dispose', disposeHandler);
+      if (mode !== 'disabled') {
+        this.startTracking();
+      }
+      Object.defineProperties(this, {
+        /**
+         * @memberof TextTrack
+         * @member {boolean} default
+         *         If this track was set to be on or off by default. Cannot be changed after
+         *         creation.
+         * @instance
+         *
+         * @readonly
+         */
+        default: {
+          get() {
+            return default_;
+          },
+          set() {}
+        },
+        /**
+         * @memberof TextTrack
+         * @member {string} mode
+         *         Set the mode of this TextTrack to a valid {@link TextTrack~Mode}. Will
+         *         not be set if setting to an invalid mode.
+         * @instance
+         *
+         * @fires TextTrack#modechange
+         */
+        mode: {
+          get() {
+            return mode;
+          },
+          set(newMode) {
+            if (!TextTrackMode[newMode]) {
+              return;
+            }
+            if (mode === newMode) {
+              return;
+            }
+            mode = newMode;
+            if (!this.preload_ && mode !== 'disabled' && this.cues.length === 0) {
+              // On-demand load.
+              loadTrack(this.src, this);
+            }
+            this.stopTracking();
+            if (mode !== 'disabled') {
+              this.startTracking();
+            }
+            /**
+             * An event that fires when mode changes on this track. This allows
+             * the TextTrackList that holds this track to act accordingly.
+             *
+             * > Note: This is not part of the spec!
+             *
+             * @event TextTrack#modechange
+             * @type {Event}
+             */
+            this.trigger('modechange');
+          }
+        },
+        /**
+         * @memberof TextTrack
+         * @member {TextTrackCueList} cues
+         *         The text track cue list for this TextTrack.
+         * @instance
+         */
+        cues: {
+          get() {
+            if (!this.loaded_) {
+              return null;
+            }
+            return cues;
+          },
+          set() {}
+        },
+        /**
+         * @memberof TextTrack
+         * @member {TextTrackCueList} activeCues
+         *         The list text track cues that are currently active for this TextTrack.
+         * @instance
+         */
+        activeCues: {
+          get() {
+            if (!this.loaded_) {
+              return null;
+            }
+
+            // nothing to do
+            if (this.cues.length === 0) {
+              return activeCues;
+            }
+            const ct = this.tech_.currentTime();
+            const active = [];
+            for (let i = 0, l = this.cues.length; i < l; i++) {
+              const cue = this.cues[i];
+              if (cue.startTime <= ct && cue.endTime >= ct) {
+                active.push(cue);
+              }
+            }
+            changed = false;
+            if (active.length !== this.activeCues_.length) {
+              changed = true;
+            } else {
+              for (let i = 0; i < active.length; i++) {
+                if (this.activeCues_.indexOf(active[i]) === -1) {
+                  changed = true;
+                }
+              }
+            }
+            this.activeCues_ = active;
+            activeCues.setCues_(this.activeCues_);
+            return activeCues;
+          },
+          // /!\ Keep this setter empty (see the timeupdate handler above)
+          set() {}
+        }
+      });
+      if (settings.src) {
+        this.src = settings.src;
+        if (!this.preload_) {
+          // Tracks will load on-demand.
+          // Act like we're loaded for other purposes.
+          this.loaded_ = true;
+        }
+        if (this.preload_ || settings.kind !== 'subtitles' && settings.kind !== 'captions') {
+          loadTrack(this.src, this);
+        }
+      } else {
+        this.loaded_ = true;
+      }
+    }
+    startTracking() {
+      // More precise cues based on requestVideoFrameCallback with a requestAnimationFram fallback
+      this.rvf_ = this.tech_.requestVideoFrameCallback(this.timeupdateHandler);
+      // Also listen to timeupdate in case rVFC/rAF stops (window in background, audio in video el)
+      this.tech_.on('timeupdate', this.timeupdateHandler);
+    }
+    stopTracking() {
+      if (this.rvf_) {
+        this.tech_.cancelVideoFrameCallback(this.rvf_);
+        this.rvf_ = undefined;
+      }
+      this.tech_.off('timeupdate', this.timeupdateHandler);
+    }
+
+    /**
+     * Add a cue to the internal list of cues.
+     *
+     * @param {TextTrack~Cue} cue
+     *        The cue to add to our internal list
+     */
+    addCue(originalCue) {
+      let cue = originalCue;
+
+      // Testing if the cue is a VTTCue in a way that survives minification
+      if (!('getCueAsHTML' in cue)) {
+        cue = new window.vttjs.VTTCue(originalCue.startTime, originalCue.endTime, originalCue.text);
+        for (const prop in originalCue) {
+          if (!(prop in cue)) {
+            cue[prop] = originalCue[prop];
+          }
+        }
+
+        // make sure that `id` is copied over
+        cue.id = originalCue.id;
+        cue.originalCue_ = originalCue;
+      }
+      const tracks = this.tech_.textTracks();
+      for (let i = 0; i < tracks.length; i++) {
+        if (tracks[i] !== this) {
+          tracks[i].removeCue(cue);
+        }
+      }
+      this.cues_.push(cue);
+      this.cues.setCues_(this.cues_);
+    }
+
+    /**
+     * Remove a cue from our internal list
+     *
+     * @param {TextTrack~Cue} removeCue
+     *        The cue to remove from our internal list
+     */
+    removeCue(removeCue) {
+      let i = this.cues_.length;
+      while (i--) {
+        const cue = this.cues_[i];
+        if (cue === removeCue || cue.originalCue_ && cue.originalCue_ === removeCue) {
+          this.cues_.splice(i, 1);
+          this.cues.setCues_(this.cues_);
+          break;
+        }
+      }
+    }
+  }
+
+  /**
+   * cuechange - One or more cues in the track have become active or stopped being active.
+   * @protected
+   */
+  TextTrack.prototype.allowedEvents_ = {
+    cuechange: 'cuechange'
+  };
+
+  /**
+   * A representation of a single `AudioTrack`. If it is part of an {@link AudioTrackList}
+   * only one `AudioTrack` in the list will be enabled at a time.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotrack}
+   * @extends Track
+   */
+  class AudioTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {AudioTrack~Kind} [options.kind='']
+     *        A valid audio track kind
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {boolean} [options.enabled]
+     *        If this track is the one that is currently playing. If this track is part of
+     *        an {@link AudioTrackList}, only one {@link AudioTrack} will be enabled.
+     */
+    constructor(options = {}) {
+      const settings = merge$2(options, {
+        kind: AudioTrackKind[options.kind] || ''
+      });
+      super(settings);
+      let enabled = false;
+
+      /**
+       * @memberof AudioTrack
+       * @member {boolean} enabled
+       *         If this `AudioTrack` is enabled or not. When setting this will
+       *         fire {@link AudioTrack#enabledchange} if the state of enabled is changed.
+       * @instance
+       *
+       * @fires VideoTrack#selectedchange
+       */
+      Object.defineProperty(this, 'enabled', {
+        get() {
+          return enabled;
+        },
+        set(newEnabled) {
+          // an invalid or unchanged value
+          if (typeof newEnabled !== 'boolean' || newEnabled === enabled) {
+            return;
+          }
+          enabled = newEnabled;
+
+          /**
+           * An event that fires when enabled changes on this track. This allows
+           * the AudioTrackList that holds this track to act accordingly.
+           *
+           * > Note: This is not part of the spec! Native tracks will do
+           *         this internally without an event.
+           *
+           * @event AudioTrack#enabledchange
+           * @type {Event}
+           */
+          this.trigger('enabledchange');
+        }
+      });
+
+      // if the user sets this track to selected then
+      // set selected to that true value otherwise
+      // we keep it false
+      if (settings.enabled) {
+        this.enabled = settings.enabled;
+      }
+      this.loaded_ = true;
+    }
+  }
+
+  /**
+   * A representation of a single `VideoTrack`.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotrack}
+   * @extends Track
+   */
+  class VideoTrack extends Track {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} [options={}]
+     *        Object of option names and values
+     *
+     * @param {string} [options.kind='']
+     *        A valid {@link VideoTrack~Kind}
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this AudioTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {boolean} [options.selected]
+     *        If this track is the one that is currently playing.
+     */
+    constructor(options = {}) {
+      const settings = merge$2(options, {
+        kind: VideoTrackKind[options.kind] || ''
+      });
+      super(settings);
+      let selected = false;
+
+      /**
+       * @memberof VideoTrack
+       * @member {boolean} selected
+       *         If this `VideoTrack` is selected or not. When setting this will
+       *         fire {@link VideoTrack#selectedchange} if the state of selected changed.
+       * @instance
+       *
+       * @fires VideoTrack#selectedchange
+       */
+      Object.defineProperty(this, 'selected', {
+        get() {
+          return selected;
+        },
+        set(newSelected) {
+          // an invalid or unchanged value
+          if (typeof newSelected !== 'boolean' || newSelected === selected) {
+            return;
+          }
+          selected = newSelected;
+
+          /**
+           * An event that fires when selected changes on this track. This allows
+           * the VideoTrackList that holds this track to act accordingly.
+           *
+           * > Note: This is not part of the spec! Native tracks will do
+           *         this internally without an event.
+           *
+           * @event VideoTrack#selectedchange
+           * @type {Event}
+           */
+          this.trigger('selectedchange');
+        }
+      });
+
+      // if the user sets this track to selected then
+      // set selected to that true value otherwise
+      // we keep it false
+      if (settings.selected) {
+        this.selected = settings.selected;
+      }
+    }
+  }
+
+  /**
+   * @file html-track-element.js
+   */
+
+  /**
+   * A single track represented in the DOM.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#htmltrackelement}
+   * @extends EventTarget
+   */
+  class HTMLTrackElement extends EventTarget$2 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Object} options={}
+     *        Object of option names and values
+     *
+     * @param { import('../tech/tech').default } options.tech
+     *        A reference to the tech that owns this HTMLTrackElement.
+     *
+     * @param {TextTrack~Kind} [options.kind='subtitles']
+     *        A valid text track kind.
+     *
+     * @param {TextTrack~Mode} [options.mode='disabled']
+     *        A valid text track mode.
+     *
+     * @param {string} [options.id='vjs_track_' + Guid.newGUID()]
+     *        A unique id for this TextTrack.
+     *
+     * @param {string} [options.label='']
+     *        The menu label for this track.
+     *
+     * @param {string} [options.language='']
+     *        A valid two character language code.
+     *
+     * @param {string} [options.srclang='']
+     *        A valid two character language code. An alternative, but deprioritized
+     *        version of `options.language`
+     *
+     * @param {string} [options.src]
+     *        A url to TextTrack cues.
+     *
+     * @param {boolean} [options.default]
+     *        If this track should default to on or off.
+     */
+    constructor(options = {}) {
+      super();
+      let readyState;
+      const track = new TextTrack(options);
+      this.kind = track.kind;
+      this.src = track.src;
+      this.srclang = track.language;
+      this.label = track.label;
+      this.default = track.default;
+      Object.defineProperties(this, {
+        /**
+         * @memberof HTMLTrackElement
+         * @member {HTMLTrackElement~ReadyState} readyState
+         *         The current ready state of the track element.
+         * @instance
+         */
+        readyState: {
+          get() {
+            return readyState;
+          }
+        },
+        /**
+         * @memberof HTMLTrackElement
+         * @member {TextTrack} track
+         *         The underlying TextTrack object.
+         * @instance
+         *
+         */
+        track: {
+          get() {
+            return track;
+          }
+        }
+      });
+      readyState = HTMLTrackElement.NONE;
+
+      /**
+       * @listens TextTrack#loadeddata
+       * @fires HTMLTrackElement#load
+       */
+      track.addEventListener('loadeddata', () => {
+        readyState = HTMLTrackElement.LOADED;
+        this.trigger({
+          type: 'load',
+          target: this
+        });
+      });
+    }
+  }
+
+  /**
+   * @protected
+   */
+  HTMLTrackElement.prototype.allowedEvents_ = {
+    load: 'load'
+  };
+
+  /**
+   * The text track not loaded state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.NONE = 0;
+
+  /**
+   * The text track loading state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.LOADING = 1;
+
+  /**
+   * The text track loaded state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.LOADED = 2;
+
+  /**
+   * The text track failed to load state.
+   *
+   * @type {number}
+   * @static
+   */
+  HTMLTrackElement.ERROR = 3;
+
+  /*
+   * This file contains all track properties that are used in
+   * player.js, tech.js, html5.js and possibly other techs in the future.
+   */
+
+  const NORMAL = {
+    audio: {
+      ListClass: AudioTrackList,
+      TrackClass: AudioTrack,
+      capitalName: 'Audio'
+    },
+    video: {
+      ListClass: VideoTrackList,
+      TrackClass: VideoTrack,
+      capitalName: 'Video'
+    },
+    text: {
+      ListClass: TextTrackList,
+      TrackClass: TextTrack,
+      capitalName: 'Text'
+    }
+  };
+  Object.keys(NORMAL).forEach(function (type) {
+    NORMAL[type].getterName = `${type}Tracks`;
+    NORMAL[type].privateName = `${type}Tracks_`;
+  });
+  const REMOTE = {
+    remoteText: {
+      ListClass: TextTrackList,
+      TrackClass: TextTrack,
+      capitalName: 'RemoteText',
+      getterName: 'remoteTextTracks',
+      privateName: 'remoteTextTracks_'
+    },
+    remoteTextEl: {
+      ListClass: HtmlTrackElementList,
+      TrackClass: HTMLTrackElement,
+      capitalName: 'RemoteTextTrackEls',
+      getterName: 'remoteTextTrackEls',
+      privateName: 'remoteTextTrackEls_'
+    }
+  };
+  const ALL = Object.assign({}, NORMAL, REMOTE);
+  REMOTE.names = Object.keys(REMOTE);
+  NORMAL.names = Object.keys(NORMAL);
+  ALL.names = [].concat(REMOTE.names).concat(NORMAL.names);
+
+  var minDoc = {};
+
+  var topLevel = typeof commonjsGlobal !== 'undefined' ? commonjsGlobal : typeof window !== 'undefined' ? window : {};
+  var doccy;
+  if (typeof document !== 'undefined') {
+    doccy = document;
+  } else {
+    doccy = topLevel['__GLOBAL_DOCUMENT_CACHE@4'];
+    if (!doccy) {
+      doccy = topLevel['__GLOBAL_DOCUMENT_CACHE@4'] = minDoc;
+    }
+  }
+  var document_1 = doccy;
+
+  /**
+   * Copyright 2013 vtt.js Contributors
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *   http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+
+  /* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+  /* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+  var _objCreate = Object.create || function () {
+    function F() {}
+    return function (o) {
+      if (arguments.length !== 1) {
+        throw new Error('Object.create shim only accepts one parameter.');
+      }
+      F.prototype = o;
+      return new F();
+    };
+  }();
+
+  // Creates a new ParserError object from an errorData object. The errorData
+  // object should have default code and message properties. The default message
+  // property can be overriden by passing in a message parameter.
+  // See ParsingError.Errors below for acceptable errors.
+  function ParsingError(errorData, message) {
+    this.name = "ParsingError";
+    this.code = errorData.code;
+    this.message = message || errorData.message;
+  }
+  ParsingError.prototype = _objCreate(Error.prototype);
+  ParsingError.prototype.constructor = ParsingError;
+
+  // ParsingError metadata for acceptable ParsingErrors.
+  ParsingError.Errors = {
+    BadSignature: {
+      code: 0,
+      message: "Malformed WebVTT signature."
+    },
+    BadTimeStamp: {
+      code: 1,
+      message: "Malformed time stamp."
+    }
+  };
+
+  // Try to parse input as a time stamp.
+  function parseTimeStamp(input) {
+    function computeSeconds(h, m, s, f) {
+      return (h | 0) * 3600 + (m | 0) * 60 + (s | 0) + (f | 0) / 1000;
+    }
+    var m = input.match(/^(\d+):(\d{1,2})(:\d{1,2})?\.(\d{3})/);
+    if (!m) {
+      return null;
+    }
+    if (m[3]) {
+      // Timestamp takes the form of [hours]:[minutes]:[seconds].[milliseconds]
+      return computeSeconds(m[1], m[2], m[3].replace(":", ""), m[4]);
+    } else if (m[1] > 59) {
+      // Timestamp takes the form of [hours]:[minutes].[milliseconds]
+      // First position is hours as it's over 59.
+      return computeSeconds(m[1], m[2], 0, m[4]);
+    } else {
+      // Timestamp takes the form of [minutes]:[seconds].[milliseconds]
+      return computeSeconds(0, m[1], m[2], m[4]);
+    }
+  }
+
+  // A settings object holds key/value pairs and will ignore anything but the first
+  // assignment to a specific key.
+  function Settings() {
+    this.values = _objCreate(null);
+  }
+  Settings.prototype = {
+    // Only accept the first assignment to any key.
+    set: function (k, v) {
+      if (!this.get(k) && v !== "") {
+        this.values[k] = v;
+      }
+    },
+    // Return the value for a key, or a default value.
+    // If 'defaultKey' is passed then 'dflt' is assumed to be an object with
+    // a number of possible default values as properties where 'defaultKey' is
+    // the key of the property that will be chosen; otherwise it's assumed to be
+    // a single value.
+    get: function (k, dflt, defaultKey) {
+      if (defaultKey) {
+        return this.has(k) ? this.values[k] : dflt[defaultKey];
+      }
+      return this.has(k) ? this.values[k] : dflt;
+    },
+    // Check whether we have a value for a key.
+    has: function (k) {
+      return k in this.values;
+    },
+    // Accept a setting if its one of the given alternatives.
+    alt: function (k, v, a) {
+      for (var n = 0; n < a.length; ++n) {
+        if (v === a[n]) {
+          this.set(k, v);
+          break;
+        }
+      }
+    },
+    // Accept a setting if its a valid (signed) integer.
+    integer: function (k, v) {
+      if (/^-?\d+$/.test(v)) {
+        // integer
+        this.set(k, parseInt(v, 10));
+      }
+    },
+    // Accept a setting if its a valid percentage.
+    percent: function (k, v) {
+      if (v.match(/^([\d]{1,3})(\.[\d]*)?%$/)) {
+        v = parseFloat(v);
+        if (v >= 0 && v <= 100) {
+          this.set(k, v);
+          return true;
+        }
+      }
+      return false;
+    }
+  };
+
+  // Helper function to parse input into groups separated by 'groupDelim', and
+  // interprete each group as a key/value pair separated by 'keyValueDelim'.
+  function parseOptions(input, callback, keyValueDelim, groupDelim) {
+    var groups = groupDelim ? input.split(groupDelim) : [input];
+    for (var i in groups) {
+      if (typeof groups[i] !== "string") {
+        continue;
+      }
+      var kv = groups[i].split(keyValueDelim);
+      if (kv.length !== 2) {
+        continue;
+      }
+      var k = kv[0].trim();
+      var v = kv[1].trim();
+      callback(k, v);
+    }
+  }
+  function parseCue(input, cue, regionList) {
+    // Remember the original input if we need to throw an error.
+    var oInput = input;
+    // 4.1 WebVTT timestamp
+    function consumeTimeStamp() {
+      var ts = parseTimeStamp(input);
+      if (ts === null) {
+        throw new ParsingError(ParsingError.Errors.BadTimeStamp, "Malformed timestamp: " + oInput);
+      }
+      // Remove time stamp from input.
+      input = input.replace(/^[^\sa-zA-Z-]+/, "");
+      return ts;
+    }
+
+    // 4.4.2 WebVTT cue settings
+    function consumeCueSettings(input, cue) {
+      var settings = new Settings();
+      parseOptions(input, function (k, v) {
+        switch (k) {
+          case "region":
+            // Find the last region we parsed with the same region id.
+            for (var i = regionList.length - 1; i >= 0; i--) {
+              if (regionList[i].id === v) {
+                settings.set(k, regionList[i].region);
+                break;
+              }
+            }
+            break;
+          case "vertical":
+            settings.alt(k, v, ["rl", "lr"]);
+            break;
+          case "line":
+            var vals = v.split(","),
+              vals0 = vals[0];
+            settings.integer(k, vals0);
+            settings.percent(k, vals0) ? settings.set("snapToLines", false) : null;
+            settings.alt(k, vals0, ["auto"]);
+            if (vals.length === 2) {
+              settings.alt("lineAlign", vals[1], ["start", "center", "end"]);
+            }
+            break;
+          case "position":
+            vals = v.split(",");
+            settings.percent(k, vals[0]);
+            if (vals.length === 2) {
+              settings.alt("positionAlign", vals[1], ["start", "center", "end"]);
+            }
+            break;
+          case "size":
+            settings.percent(k, v);
+            break;
+          case "align":
+            settings.alt(k, v, ["start", "center", "end", "left", "right"]);
+            break;
+        }
+      }, /:/, /\s/);
+
+      // Apply default values for any missing fields.
+      cue.region = settings.get("region", null);
+      cue.vertical = settings.get("vertical", "");
+      try {
+        cue.line = settings.get("line", "auto");
+      } catch (e) {}
+      cue.lineAlign = settings.get("lineAlign", "start");
+      cue.snapToLines = settings.get("snapToLines", true);
+      cue.size = settings.get("size", 100);
+      // Safari still uses the old middle value and won't accept center
+      try {
+        cue.align = settings.get("align", "center");
+      } catch (e) {
+        cue.align = settings.get("align", "middle");
+      }
+      try {
+        cue.position = settings.get("position", "auto");
+      } catch (e) {
+        cue.position = settings.get("position", {
+          start: 0,
+          left: 0,
+          center: 50,
+          middle: 50,
+          end: 100,
+          right: 100
+        }, cue.align);
+      }
+      cue.positionAlign = settings.get("positionAlign", {
+        start: "start",
+        left: "start",
+        center: "center",
+        middle: "center",
+        end: "end",
+        right: "end"
+      }, cue.align);
+    }
+    function skipWhitespace() {
+      input = input.replace(/^\s+/, "");
+    }
+
+    // 4.1 WebVTT cue timings.
+    skipWhitespace();
+    cue.startTime = consumeTimeStamp(); // (1) collect cue start time
+    skipWhitespace();
+    if (input.substr(0, 3) !== "-->") {
+      // (3) next characters must match "-->"
+      throw new ParsingError(ParsingError.Errors.BadTimeStamp, "Malformed time stamp (time stamps must be separated by '-->'): " + oInput);
+    }
+    input = input.substr(3);
+    skipWhitespace();
+    cue.endTime = consumeTimeStamp(); // (5) collect cue end time
+
+    // 4.1 WebVTT cue settings list.
+    skipWhitespace();
+    consumeCueSettings(input, cue);
+  }
+
+  // When evaluating this file as part of a Webpack bundle for server
+  // side rendering, `document` is an empty object.
+  var TEXTAREA_ELEMENT = document_1.createElement && document_1.createElement("textarea");
+  var TAG_NAME = {
+    c: "span",
+    i: "i",
+    b: "b",
+    u: "u",
+    ruby: "ruby",
+    rt: "rt",
+    v: "span",
+    lang: "span"
+  };
+
+  // 5.1 default text color
+  // 5.2 default text background color is equivalent to text color with bg_ prefix
+  var DEFAULT_COLOR_CLASS = {
+    white: 'rgba(255,255,255,1)',
+    lime: 'rgba(0,255,0,1)',
+    cyan: 'rgba(0,255,255,1)',
+    red: 'rgba(255,0,0,1)',
+    yellow: 'rgba(255,255,0,1)',
+    magenta: 'rgba(255,0,255,1)',
+    blue: 'rgba(0,0,255,1)',
+    black: 'rgba(0,0,0,1)'
+  };
+  var TAG_ANNOTATION = {
+    v: "title",
+    lang: "lang"
+  };
+  var NEEDS_PARENT = {
+    rt: "ruby"
+  };
+
+  // Parse content into a document fragment.
+  function parseContent(window, input) {
+    function nextToken() {
+      // Check for end-of-string.
+      if (!input) {
+        return null;
+      }
+
+      // Consume 'n' characters from the input.
+      function consume(result) {
+        input = input.substr(result.length);
+        return result;
+      }
+      var m = input.match(/^([^<]*)(<[^>]*>?)?/);
+      // If there is some text before the next tag, return it, otherwise return
+      // the tag.
+      return consume(m[1] ? m[1] : m[2]);
+    }
+    function unescape(s) {
+      TEXTAREA_ELEMENT.innerHTML = s;
+      s = TEXTAREA_ELEMENT.textContent;
+      TEXTAREA_ELEMENT.textContent = "";
+      return s;
+    }
+    function shouldAdd(current, element) {
+      return !NEEDS_PARENT[element.localName] || NEEDS_PARENT[element.localName] === current.localName;
+    }
+
+    // Create an element for this tag.
+    function createElement(type, annotation) {
+      var tagName = TAG_NAME[type];
+      if (!tagName) {
+        return null;
+      }
+      var element = window.document.createElement(tagName);
+      var name = TAG_ANNOTATION[type];
+      if (name && annotation) {
+        element[name] = annotation.trim();
+      }
+      return element;
+    }
+    var rootDiv = window.document.createElement("div"),
+      current = rootDiv,
+      t,
+      tagStack = [];
+    while ((t = nextToken()) !== null) {
+      if (t[0] === '<') {
+        if (t[1] === "/") {
+          // If the closing tag matches, move back up to the parent node.
+          if (tagStack.length && tagStack[tagStack.length - 1] === t.substr(2).replace(">", "")) {
+            tagStack.pop();
+            current = current.parentNode;
+          }
+          // Otherwise just ignore the end tag.
+          continue;
+        }
+        var ts = parseTimeStamp(t.substr(1, t.length - 2));
+        var node;
+        if (ts) {
+          // Timestamps are lead nodes as well.
+          node = window.document.createProcessingInstruction("timestamp", ts);
+          current.appendChild(node);
+          continue;
+        }
+        var m = t.match(/^<([^.\s/0-9>]+)(\.[^\s\\>]+)?([^>\\]+)?(\\?)>?$/);
+        // If we can't parse the tag, skip to the next tag.
+        if (!m) {
+          continue;
+        }
+        // Try to construct an element, and ignore the tag if we couldn't.
+        node = createElement(m[1], m[3]);
+        if (!node) {
+          continue;
+        }
+        // Determine if the tag should be added based on the context of where it
+        // is placed in the cuetext.
+        if (!shouldAdd(current, node)) {
+          continue;
+        }
+        // Set the class list (as a list of classes, separated by space).
+        if (m[2]) {
+          var classes = m[2].split('.');
+          classes.forEach(function (cl) {
+            var bgColor = /^bg_/.test(cl);
+            // slice out `bg_` if it's a background color
+            var colorName = bgColor ? cl.slice(3) : cl;
+            if (DEFAULT_COLOR_CLASS.hasOwnProperty(colorName)) {
+              var propName = bgColor ? 'background-color' : 'color';
+              var propValue = DEFAULT_COLOR_CLASS[colorName];
+              node.style[propName] = propValue;
+            }
+          });
+          node.className = classes.join(' ');
+        }
+        // Append the node to the current node, and enter the scope of the new
+        // node.
+        tagStack.push(m[1]);
+        current.appendChild(node);
+        current = node;
+        continue;
+      }
+
+      // Text nodes are leaf nodes.
+      current.appendChild(window.document.createTextNode(unescape(t)));
+    }
+    return rootDiv;
+  }
+
+  // This is a list of all the Unicode characters that have a strong
+  // right-to-left category. What this means is that these characters are
+  // written right-to-left for sure. It was generated by pulling all the strong
+  // right-to-left characters out of the Unicode data table. That table can
+  // found at: http://www.unicode.org/Public/UNIDATA/UnicodeData.txt
+  var strongRTLRanges = [[0x5be, 0x5be], [0x5c0, 0x5c0], [0x5c3, 0x5c3], [0x5c6, 0x5c6], [0x5d0, 0x5ea], [0x5f0, 0x5f4], [0x608, 0x608], [0x60b, 0x60b], [0x60d, 0x60d], [0x61b, 0x61b], [0x61e, 0x64a], [0x66d, 0x66f], [0x671, 0x6d5], [0x6e5, 0x6e6], [0x6ee, 0x6ef], [0x6fa, 0x70d], [0x70f, 0x710], [0x712, 0x72f], [0x74d, 0x7a5], [0x7b1, 0x7b1], [0x7c0, 0x7ea], [0x7f4, 0x7f5], [0x7fa, 0x7fa], [0x800, 0x815], [0x81a, 0x81a], [0x824, 0x824], [0x828, 0x828], [0x830, 0x83e], [0x840, 0x858], [0x85e, 0x85e], [0x8a0, 0x8a0], [0x8a2, 0x8ac], [0x200f, 0x200f], [0xfb1d, 0xfb1d], [0xfb1f, 0xfb28], [0xfb2a, 0xfb36], [0xfb38, 0xfb3c], [0xfb3e, 0xfb3e], [0xfb40, 0xfb41], [0xfb43, 0xfb44], [0xfb46, 0xfbc1], [0xfbd3, 0xfd3d], [0xfd50, 0xfd8f], [0xfd92, 0xfdc7], [0xfdf0, 0xfdfc], [0xfe70, 0xfe74], [0xfe76, 0xfefc], [0x10800, 0x10805], [0x10808, 0x10808], [0x1080a, 0x10835], [0x10837, 0x10838], [0x1083c, 0x1083c], [0x1083f, 0x10855], [0x10857, 0x1085f], [0x10900, 0x1091b], [0x10920, 0x10939], [0x1093f, 0x1093f], [0x10980, 0x109b7], [0x109be, 0x109bf], [0x10a00, 0x10a00], [0x10a10, 0x10a13], [0x10a15, 0x10a17], [0x10a19, 0x10a33], [0x10a40, 0x10a47], [0x10a50, 0x10a58], [0x10a60, 0x10a7f], [0x10b00, 0x10b35], [0x10b40, 0x10b55], [0x10b58, 0x10b72], [0x10b78, 0x10b7f], [0x10c00, 0x10c48], [0x1ee00, 0x1ee03], [0x1ee05, 0x1ee1f], [0x1ee21, 0x1ee22], [0x1ee24, 0x1ee24], [0x1ee27, 0x1ee27], [0x1ee29, 0x1ee32], [0x1ee34, 0x1ee37], [0x1ee39, 0x1ee39], [0x1ee3b, 0x1ee3b], [0x1ee42, 0x1ee42], [0x1ee47, 0x1ee47], [0x1ee49, 0x1ee49], [0x1ee4b, 0x1ee4b], [0x1ee4d, 0x1ee4f], [0x1ee51, 0x1ee52], [0x1ee54, 0x1ee54], [0x1ee57, 0x1ee57], [0x1ee59, 0x1ee59], [0x1ee5b, 0x1ee5b], [0x1ee5d, 0x1ee5d], [0x1ee5f, 0x1ee5f], [0x1ee61, 0x1ee62], [0x1ee64, 0x1ee64], [0x1ee67, 0x1ee6a], [0x1ee6c, 0x1ee72], [0x1ee74, 0x1ee77], [0x1ee79, 0x1ee7c], [0x1ee7e, 0x1ee7e], [0x1ee80, 0x1ee89], [0x1ee8b, 0x1ee9b], [0x1eea1, 0x1eea3], [0x1eea5, 0x1eea9], [0x1eeab, 0x1eebb], [0x10fffd, 0x10fffd]];
+  function isStrongRTLChar(charCode) {
+    for (var i = 0; i < strongRTLRanges.length; i++) {
+      var currentRange = strongRTLRanges[i];
+      if (charCode >= currentRange[0] && charCode <= currentRange[1]) {
+        return true;
+      }
+    }
+    return false;
+  }
+  function determineBidi(cueDiv) {
+    var nodeStack = [],
+      text = "",
+      charCode;
+    if (!cueDiv || !cueDiv.childNodes) {
+      return "ltr";
+    }
+    function pushNodes(nodeStack, node) {
+      for (var i = node.childNodes.length - 1; i >= 0; i--) {
+        nodeStack.push(node.childNodes[i]);
+      }
+    }
+    function nextTextNode(nodeStack) {
+      if (!nodeStack || !nodeStack.length) {
+        return null;
+      }
+      var node = nodeStack.pop(),
+        text = node.textContent || node.innerText;
+      if (text) {
+        // TODO: This should match all unicode type B characters (paragraph
+        // separator characters). See issue #115.
+        var m = text.match(/^.*(\n|\r)/);
+        if (m) {
+          nodeStack.length = 0;
+          return m[0];
+        }
+        return text;
+      }
+      if (node.tagName === "ruby") {
+        return nextTextNode(nodeStack);
+      }
+      if (node.childNodes) {
+        pushNodes(nodeStack, node);
+        return nextTextNode(nodeStack);
+      }
+    }
+    pushNodes(nodeStack, cueDiv);
+    while (text = nextTextNode(nodeStack)) {
+      for (var i = 0; i < text.length; i++) {
+        charCode = text.charCodeAt(i);
+        if (isStrongRTLChar(charCode)) {
+          return "rtl";
+        }
+      }
+    }
+    return "ltr";
+  }
+  function computeLinePos(cue) {
+    if (typeof cue.line === "number" && (cue.snapToLines || cue.line >= 0 && cue.line <= 100)) {
+      return cue.line;
+    }
+    if (!cue.track || !cue.track.textTrackList || !cue.track.textTrackList.mediaElement) {
+      return -1;
+    }
+    var track = cue.track,
+      trackList = track.textTrackList,
+      count = 0;
+    for (var i = 0; i < trackList.length && trackList[i] !== track; i++) {
+      if (trackList[i].mode === "showing") {
+        count++;
+      }
+    }
+    return ++count * -1;
+  }
+  function StyleBox() {}
+
+  // Apply styles to a div. If there is no div passed then it defaults to the
+  // div on 'this'.
+  StyleBox.prototype.applyStyles = function (styles, div) {
+    div = div || this.div;
+    for (var prop in styles) {
+      if (styles.hasOwnProperty(prop)) {
+        div.style[prop] = styles[prop];
+      }
+    }
+  };
+  StyleBox.prototype.formatStyle = function (val, unit) {
+    return val === 0 ? 0 : val + unit;
+  };
+
+  // Constructs the computed display state of the cue (a div). Places the div
+  // into the overlay which should be a block level element (usually a div).
+  function CueStyleBox(window, cue, styleOptions) {
+    StyleBox.call(this);
+    this.cue = cue;
+
+    // Parse our cue's text into a DOM tree rooted at 'cueDiv'. This div will
+    // have inline positioning and will function as the cue background box.
+    this.cueDiv = parseContent(window, cue.text);
+    var styles = {
+      color: "rgba(255, 255, 255, 1)",
+      backgroundColor: "rgba(0, 0, 0, 0.8)",
+      position: "relative",
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      display: "inline",
+      writingMode: cue.vertical === "" ? "horizontal-tb" : cue.vertical === "lr" ? "vertical-lr" : "vertical-rl",
+      unicodeBidi: "plaintext"
+    };
+    this.applyStyles(styles, this.cueDiv);
+
+    // Create an absolutely positioned div that will be used to position the cue
+    // div. Note, all WebVTT cue-setting alignments are equivalent to the CSS
+    // mirrors of them except middle instead of center on Safari.
+    this.div = window.document.createElement("div");
+    styles = {
+      direction: determineBidi(this.cueDiv),
+      writingMode: cue.vertical === "" ? "horizontal-tb" : cue.vertical === "lr" ? "vertical-lr" : "vertical-rl",
+      unicodeBidi: "plaintext",
+      textAlign: cue.align === "middle" ? "center" : cue.align,
+      font: styleOptions.font,
+      whiteSpace: "pre-line",
+      position: "absolute"
+    };
+    this.applyStyles(styles);
+    this.div.appendChild(this.cueDiv);
+
+    // Calculate the distance from the reference edge of the viewport to the text
+    // position of the cue box. The reference edge will be resolved later when
+    // the box orientation styles are applied.
+    var textPos = 0;
+    switch (cue.positionAlign) {
+      case "start":
+      case "line-left":
+        textPos = cue.position;
+        break;
+      case "center":
+        textPos = cue.position - cue.size / 2;
+        break;
+      case "end":
+      case "line-right":
+        textPos = cue.position - cue.size;
+        break;
+    }
+
+    // Horizontal box orientation; textPos is the distance from the left edge of the
+    // area to the left edge of the box and cue.size is the distance extending to
+    // the right from there.
+    if (cue.vertical === "") {
+      this.applyStyles({
+        left: this.formatStyle(textPos, "%"),
+        width: this.formatStyle(cue.size, "%")
+      });
+      // Vertical box orientation; textPos is the distance from the top edge of the
+      // area to the top edge of the box and cue.size is the height extending
+      // downwards from there.
+    } else {
+      this.applyStyles({
+        top: this.formatStyle(textPos, "%"),
+        height: this.formatStyle(cue.size, "%")
+      });
+    }
+    this.move = function (box) {
+      this.applyStyles({
+        top: this.formatStyle(box.top, "px"),
+        bottom: this.formatStyle(box.bottom, "px"),
+        left: this.formatStyle(box.left, "px"),
+        right: this.formatStyle(box.right, "px"),
+        height: this.formatStyle(box.height, "px"),
+        width: this.formatStyle(box.width, "px")
+      });
+    };
+  }
+  CueStyleBox.prototype = _objCreate(StyleBox.prototype);
+  CueStyleBox.prototype.constructor = CueStyleBox;
+
+  // Represents the co-ordinates of an Element in a way that we can easily
+  // compute things with such as if it overlaps or intersects with another Element.
+  // Can initialize it with either a StyleBox or another BoxPosition.
+  function BoxPosition(obj) {
+    // Either a BoxPosition was passed in and we need to copy it, or a StyleBox
+    // was passed in and we need to copy the results of 'getBoundingClientRect'
+    // as the object returned is readonly. All co-ordinate values are in reference
+    // to the viewport origin (top left).
+    var lh, height, width, top;
+    if (obj.div) {
+      height = obj.div.offsetHeight;
+      width = obj.div.offsetWidth;
+      top = obj.div.offsetTop;
+      var rects = (rects = obj.div.childNodes) && (rects = rects[0]) && rects.getClientRects && rects.getClientRects();
+      obj = obj.div.getBoundingClientRect();
+      // In certain cases the outter div will be slightly larger then the sum of
+      // the inner div's lines. This could be due to bold text, etc, on some platforms.
+      // In this case we should get the average line height and use that. This will
+      // result in the desired behaviour.
+      lh = rects ? Math.max(rects[0] && rects[0].height || 0, obj.height / rects.length) : 0;
+    }
+    this.left = obj.left;
+    this.right = obj.right;
+    this.top = obj.top || top;
+    this.height = obj.height || height;
+    this.bottom = obj.bottom || top + (obj.height || height);
+    this.width = obj.width || width;
+    this.lineHeight = lh !== undefined ? lh : obj.lineHeight;
+  }
+
+  // Move the box along a particular axis. Optionally pass in an amount to move
+  // the box. If no amount is passed then the default is the line height of the
+  // box.
+  BoxPosition.prototype.move = function (axis, toMove) {
+    toMove = toMove !== undefined ? toMove : this.lineHeight;
+    switch (axis) {
+      case "+x":
+        this.left += toMove;
+        this.right += toMove;
+        break;
+      case "-x":
+        this.left -= toMove;
+        this.right -= toMove;
+        break;
+      case "+y":
+        this.top += toMove;
+        this.bottom += toMove;
+        break;
+      case "-y":
+        this.top -= toMove;
+        this.bottom -= toMove;
+        break;
+    }
+  };
+
+  // Check if this box overlaps another box, b2.
+  BoxPosition.prototype.overlaps = function (b2) {
+    return this.left < b2.right && this.right > b2.left && this.top < b2.bottom && this.bottom > b2.top;
+  };
+
+  // Check if this box overlaps any other boxes in boxes.
+  BoxPosition.prototype.overlapsAny = function (boxes) {
+    for (var i = 0; i < boxes.length; i++) {
+      if (this.overlaps(boxes[i])) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  // Check if this box is within another box.
+  BoxPosition.prototype.within = function (container) {
+    return this.top >= container.top && this.bottom <= container.bottom && this.left >= container.left && this.right <= container.right;
+  };
+
+  // Check if this box is entirely within the container or it is overlapping
+  // on the edge opposite of the axis direction passed. For example, if "+x" is
+  // passed and the box is overlapping on the left edge of the container, then
+  // return true.
+  BoxPosition.prototype.overlapsOppositeAxis = function (container, axis) {
+    switch (axis) {
+      case "+x":
+        return this.left < container.left;
+      case "-x":
+        return this.right > container.right;
+      case "+y":
+        return this.top < container.top;
+      case "-y":
+        return this.bottom > container.bottom;
+    }
+  };
+
+  // Find the percentage of the area that this box is overlapping with another
+  // box.
+  BoxPosition.prototype.intersectPercentage = function (b2) {
+    var x = Math.max(0, Math.min(this.right, b2.right) - Math.max(this.left, b2.left)),
+      y = Math.max(0, Math.min(this.bottom, b2.bottom) - Math.max(this.top, b2.top)),
+      intersectArea = x * y;
+    return intersectArea / (this.height * this.width);
+  };
+
+  // Convert the positions from this box to CSS compatible positions using
+  // the reference container's positions. This has to be done because this
+  // box's positions are in reference to the viewport origin, whereas, CSS
+  // values are in referecne to their respective edges.
+  BoxPosition.prototype.toCSSCompatValues = function (reference) {
+    return {
+      top: this.top - reference.top,
+      bottom: reference.bottom - this.bottom,
+      left: this.left - reference.left,
+      right: reference.right - this.right,
+      height: this.height,
+      width: this.width
+    };
+  };
+
+  // Get an object that represents the box's position without anything extra.
+  // Can pass a StyleBox, HTMLElement, or another BoxPositon.
+  BoxPosition.getSimpleBoxPosition = function (obj) {
+    var height = obj.div ? obj.div.offsetHeight : obj.tagName ? obj.offsetHeight : 0;
+    var width = obj.div ? obj.div.offsetWidth : obj.tagName ? obj.offsetWidth : 0;
+    var top = obj.div ? obj.div.offsetTop : obj.tagName ? obj.offsetTop : 0;
+    obj = obj.div ? obj.div.getBoundingClientRect() : obj.tagName ? obj.getBoundingClientRect() : obj;
+    var ret = {
+      left: obj.left,
+      right: obj.right,
+      top: obj.top || top,
+      height: obj.height || height,
+      bottom: obj.bottom || top + (obj.height || height),
+      width: obj.width || width
+    };
+    return ret;
+  };
+
+  // Move a StyleBox to its specified, or next best, position. The containerBox
+  // is the box that contains the StyleBox, such as a div. boxPositions are
+  // a list of other boxes that the styleBox can't overlap with.
+  function moveBoxToLinePosition(window, styleBox, containerBox, boxPositions) {
+    // Find the best position for a cue box, b, on the video. The axis parameter
+    // is a list of axis, the order of which, it will move the box along. For example:
+    // Passing ["+x", "-x"] will move the box first along the x axis in the positive
+    // direction. If it doesn't find a good position for it there it will then move
+    // it along the x axis in the negative direction.
+    function findBestPosition(b, axis) {
+      var bestPosition,
+        specifiedPosition = new BoxPosition(b),
+        percentage = 1; // Highest possible so the first thing we get is better.
+
+      for (var i = 0; i < axis.length; i++) {
+        while (b.overlapsOppositeAxis(containerBox, axis[i]) || b.within(containerBox) && b.overlapsAny(boxPositions)) {
+          b.move(axis[i]);
+        }
+        // We found a spot where we aren't overlapping anything. This is our
+        // best position.
+        if (b.within(containerBox)) {
+          return b;
+        }
+        var p = b.intersectPercentage(containerBox);
+        // If we're outside the container box less then we were on our last try
+        // then remember this position as the best position.
+        if (percentage > p) {
+          bestPosition = new BoxPosition(b);
+          percentage = p;
+        }
+        // Reset the box position to the specified position.
+        b = new BoxPosition(specifiedPosition);
+      }
+      return bestPosition || specifiedPosition;
+    }
+    var boxPosition = new BoxPosition(styleBox),
+      cue = styleBox.cue,
+      linePos = computeLinePos(cue),
+      axis = [];
+
+    // If we have a line number to align the cue to.
+    if (cue.snapToLines) {
+      var size;
+      switch (cue.vertical) {
+        case "":
+          axis = ["+y", "-y"];
+          size = "height";
+          break;
+        case "rl":
+          axis = ["+x", "-x"];
+          size = "width";
+          break;
+        case "lr":
+          axis = ["-x", "+x"];
+          size = "width";
+          break;
+      }
+      var step = boxPosition.lineHeight,
+        position = step * Math.round(linePos),
+        maxPosition = containerBox[size] + step,
+        initialAxis = axis[0];
+
+      // If the specified intial position is greater then the max position then
+      // clamp the box to the amount of steps it would take for the box to
+      // reach the max position.
+      if (Math.abs(position) > maxPosition) {
+        position = position < 0 ? -1 : 1;
+        position *= Math.ceil(maxPosition / step) * step;
+      }
+
+      // If computed line position returns negative then line numbers are
+      // relative to the bottom of the video instead of the top. Therefore, we
+      // need to increase our initial position by the length or width of the
+      // video, depending on the writing direction, and reverse our axis directions.
+      if (linePos < 0) {
+        position += cue.vertical === "" ? containerBox.height : containerBox.width;
+        axis = axis.reverse();
+      }
+
+      // Move the box to the specified position. This may not be its best
+      // position.
+      boxPosition.move(initialAxis, position);
+    } else {
+      // If we have a percentage line value for the cue.
+      var calculatedPercentage = boxPosition.lineHeight / containerBox.height * 100;
+      switch (cue.lineAlign) {
+        case "center":
+          linePos -= calculatedPercentage / 2;
+          break;
+        case "end":
+          linePos -= calculatedPercentage;
+          break;
+      }
+
+      // Apply initial line position to the cue box.
+      switch (cue.vertical) {
+        case "":
+          styleBox.applyStyles({
+            top: styleBox.formatStyle(linePos, "%")
+          });
+          break;
+        case "rl":
+          styleBox.applyStyles({
+            left: styleBox.formatStyle(linePos, "%")
+          });
+          break;
+        case "lr":
+          styleBox.applyStyles({
+            right: styleBox.formatStyle(linePos, "%")
+          });
+          break;
+      }
+      axis = ["+y", "-x", "+x", "-y"];
+
+      // Get the box position again after we've applied the specified positioning
+      // to it.
+      boxPosition = new BoxPosition(styleBox);
+    }
+    var bestPosition = findBestPosition(boxPosition, axis);
+    styleBox.move(bestPosition.toCSSCompatValues(containerBox));
+  }
+  function WebVTT$1() {
+    // Nothing
+  }
+
+  // Helper to allow strings to be decoded instead of the default binary utf8 data.
+  WebVTT$1.StringDecoder = function () {
+    return {
+      decode: function (data) {
+        if (!data) {
+          return "";
+        }
+        if (typeof data !== "string") {
+          throw new Error("Error - expected string data.");
+        }
+        return decodeURIComponent(encodeURIComponent(data));
+      }
+    };
+  };
+  WebVTT$1.convertCueToDOMTree = function (window, cuetext) {
+    if (!window || !cuetext) {
+      return null;
+    }
+    return parseContent(window, cuetext);
+  };
+  var FONT_SIZE_PERCENT = 0.05;
+  var FONT_STYLE = "sans-serif";
+  var CUE_BACKGROUND_PADDING = "1.5%";
+
+  // Runs the processing model over the cues and regions passed to it.
+  // @param overlay A block level element (usually a div) that the computed cues
+  //                and regions will be placed into.
+  WebVTT$1.processCues = function (window, cues, overlay) {
+    if (!window || !cues || !overlay) {
+      return null;
+    }
+
+    // Remove all previous children.
+    while (overlay.firstChild) {
+      overlay.removeChild(overlay.firstChild);
+    }
+    var paddedOverlay = window.document.createElement("div");
+    paddedOverlay.style.position = "absolute";
+    paddedOverlay.style.left = "0";
+    paddedOverlay.style.right = "0";
+    paddedOverlay.style.top = "0";
+    paddedOverlay.style.bottom = "0";
+    paddedOverlay.style.margin = CUE_BACKGROUND_PADDING;
+    overlay.appendChild(paddedOverlay);
+
+    // Determine if we need to compute the display states of the cues. This could
+    // be the case if a cue's state has been changed since the last computation or
+    // if it has not been computed yet.
+    function shouldCompute(cues) {
+      for (var i = 0; i < cues.length; i++) {
+        if (cues[i].hasBeenReset || !cues[i].displayState) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    // We don't need to recompute the cues' display states. Just reuse them.
+    if (!shouldCompute(cues)) {
+      for (var i = 0; i < cues.length; i++) {
+        paddedOverlay.appendChild(cues[i].displayState);
+      }
+      return;
+    }
+    var boxPositions = [],
+      containerBox = BoxPosition.getSimpleBoxPosition(paddedOverlay),
+      fontSize = Math.round(containerBox.height * FONT_SIZE_PERCENT * 100) / 100;
+    var styleOptions = {
+      font: fontSize + "px " + FONT_STYLE
+    };
+    (function () {
+      var styleBox, cue;
+      for (var i = 0; i < cues.length; i++) {
+        cue = cues[i];
+
+        // Compute the intial position and styles of the cue div.
+        styleBox = new CueStyleBox(window, cue, styleOptions);
+        paddedOverlay.appendChild(styleBox.div);
+
+        // Move the cue div to it's correct line position.
+        moveBoxToLinePosition(window, styleBox, containerBox, boxPositions);
+
+        // Remember the computed div so that we don't have to recompute it later
+        // if we don't have too.
+        cue.displayState = styleBox.div;
+        boxPositions.push(BoxPosition.getSimpleBoxPosition(styleBox));
+      }
+    })();
+  };
+  WebVTT$1.Parser = function (window, vttjs, decoder) {
+    if (!decoder) {
+      decoder = vttjs;
+      vttjs = {};
+    }
+    if (!vttjs) {
+      vttjs = {};
+    }
+    this.window = window;
+    this.vttjs = vttjs;
+    this.state = "INITIAL";
+    this.buffer = "";
+    this.decoder = decoder || new TextDecoder("utf8");
+    this.regionList = [];
+  };
+  WebVTT$1.Parser.prototype = {
+    // If the error is a ParsingError then report it to the consumer if
+    // possible. If it's not a ParsingError then throw it like normal.
+    reportOrThrowError: function (e) {
+      if (e instanceof ParsingError) {
+        this.onparsingerror && this.onparsingerror(e);
+      } else {
+        throw e;
+      }
+    },
+    parse: function (data) {
+      var self = this;
+
+      // If there is no data then we won't decode it, but will just try to parse
+      // whatever is in buffer already. This may occur in circumstances, for
+      // example when flush() is called.
+      if (data) {
+        // Try to decode the data that we received.
+        self.buffer += self.decoder.decode(data, {
+          stream: true
+        });
+      }
+      function collectNextLine() {
+        var buffer = self.buffer;
+        var pos = 0;
+        while (pos < buffer.length && buffer[pos] !== '\r' && buffer[pos] !== '\n') {
+          ++pos;
+        }
+        var line = buffer.substr(0, pos);
+        // Advance the buffer early in case we fail below.
+        if (buffer[pos] === '\r') {
+          ++pos;
+        }
+        if (buffer[pos] === '\n') {
+          ++pos;
+        }
+        self.buffer = buffer.substr(pos);
+        return line;
+      }
+
+      // 3.4 WebVTT region and WebVTT region settings syntax
+      function parseRegion(input) {
+        var settings = new Settings();
+        parseOptions(input, function (k, v) {
+          switch (k) {
+            case "id":
+              settings.set(k, v);
+              break;
+            case "width":
+              settings.percent(k, v);
+              break;
+            case "lines":
+              settings.integer(k, v);
+              break;
+            case "regionanchor":
+            case "viewportanchor":
+              var xy = v.split(',');
+              if (xy.length !== 2) {
+                break;
+              }
+              // We have to make sure both x and y parse, so use a temporary
+              // settings object here.
+              var anchor = new Settings();
+              anchor.percent("x", xy[0]);
+              anchor.percent("y", xy[1]);
+              if (!anchor.has("x") || !anchor.has("y")) {
+                break;
+              }
+              settings.set(k + "X", anchor.get("x"));
+              settings.set(k + "Y", anchor.get("y"));
+              break;
+            case "scroll":
+              settings.alt(k, v, ["up"]);
+              break;
+          }
+        }, /=/, /\s/);
+
+        // Create the region, using default values for any values that were not
+        // specified.
+        if (settings.has("id")) {
+          var region = new (self.vttjs.VTTRegion || self.window.VTTRegion)();
+          region.width = settings.get("width", 100);
+          region.lines = settings.get("lines", 3);
+          region.regionAnchorX = settings.get("regionanchorX", 0);
+          region.regionAnchorY = settings.get("regionanchorY", 100);
+          region.viewportAnchorX = settings.get("viewportanchorX", 0);
+          region.viewportAnchorY = settings.get("viewportanchorY", 100);
+          region.scroll = settings.get("scroll", "");
+          // Register the region.
+          self.onregion && self.onregion(region);
+          // Remember the VTTRegion for later in case we parse any VTTCues that
+          // reference it.
+          self.regionList.push({
+            id: settings.get("id"),
+            region: region
+          });
+        }
+      }
+
+      // draft-pantos-http-live-streaming-20
+      // https://tools.ietf.org/html/draft-pantos-http-live-streaming-20#section-3.5
+      // 3.5 WebVTT
+      function parseTimestampMap(input) {
+        var settings = new Settings();
+        parseOptions(input, function (k, v) {
+          switch (k) {
+            case "MPEGT":
+              settings.integer(k + 'S', v);
+              break;
+            case "LOCA":
+              settings.set(k + 'L', parseTimeStamp(v));
+              break;
+          }
+        }, /[^\d]:/, /,/);
+        self.ontimestampmap && self.ontimestampmap({
+          "MPEGTS": settings.get("MPEGTS"),
+          "LOCAL": settings.get("LOCAL")
+        });
+      }
+
+      // 3.2 WebVTT metadata header syntax
+      function parseHeader(input) {
+        if (input.match(/X-TIMESTAMP-MAP/)) {
+          // This line contains HLS X-TIMESTAMP-MAP metadata
+          parseOptions(input, function (k, v) {
+            switch (k) {
+              case "X-TIMESTAMP-MAP":
+                parseTimestampMap(v);
+                break;
+            }
+          }, /=/);
+        } else {
+          parseOptions(input, function (k, v) {
+            switch (k) {
+              case "Region":
+                // 3.3 WebVTT region metadata header syntax
+                parseRegion(v);
+                break;
+            }
+          }, /:/);
+        }
+      }
+
+      // 5.1 WebVTT file parsing.
+      try {
+        var line;
+        if (self.state === "INITIAL") {
+          // We can't start parsing until we have the first line.
+          if (!/\r\n|\n/.test(self.buffer)) {
+            return this;
+          }
+          line = collectNextLine();
+          var m = line.match(/^WEBVTT([ \t].*)?$/);
+          if (!m || !m[0]) {
+            throw new ParsingError(ParsingError.Errors.BadSignature);
+          }
+          self.state = "HEADER";
+        }
+        var alreadyCollectedLine = false;
+        while (self.buffer) {
+          // We can't parse a line until we have the full line.
+          if (!/\r\n|\n/.test(self.buffer)) {
+            return this;
+          }
+          if (!alreadyCollectedLine) {
+            line = collectNextLine();
+          } else {
+            alreadyCollectedLine = false;
+          }
+          switch (self.state) {
+            case "HEADER":
+              // 13-18 - Allow a header (metadata) under the WEBVTT line.
+              if (/:/.test(line)) {
+                parseHeader(line);
+              } else if (!line) {
+                // An empty line terminates the header and starts the body (cues).
+                self.state = "ID";
+              }
+              continue;
+            case "NOTE":
+              // Ignore NOTE blocks.
+              if (!line) {
+                self.state = "ID";
+              }
+              continue;
+            case "ID":
+              // Check for the start of NOTE blocks.
+              if (/^NOTE($|[ \t])/.test(line)) {
+                self.state = "NOTE";
+                break;
+              }
+              // 19-29 - Allow any number of line terminators, then initialize new cue values.
+              if (!line) {
+                continue;
+              }
+              self.cue = new (self.vttjs.VTTCue || self.window.VTTCue)(0, 0, "");
+              // Safari still uses the old middle value and won't accept center
+              try {
+                self.cue.align = "center";
+              } catch (e) {
+                self.cue.align = "middle";
+              }
+              self.state = "CUE";
+              // 30-39 - Check if self line contains an optional identifier or timing data.
+              if (line.indexOf("-->") === -1) {
+                self.cue.id = line;
+                continue;
+              }
+            // Process line as start of a cue.
+            /*falls through*/
+            case "CUE":
+              // 40 - Collect cue timings and settings.
+              try {
+                parseCue(line, self.cue, self.regionList);
+              } catch (e) {
+                self.reportOrThrowError(e);
+                // In case of an error ignore rest of the cue.
+                self.cue = null;
+                self.state = "BADCUE";
+                continue;
+              }
+              self.state = "CUETEXT";
+              continue;
+            case "CUETEXT":
+              var hasSubstring = line.indexOf("-->") !== -1;
+              // 34 - If we have an empty line then report the cue.
+              // 35 - If we have the special substring '-->' then report the cue,
+              // but do not collect the line as we need to process the current
+              // one as a new cue.
+              if (!line || hasSubstring && (alreadyCollectedLine = true)) {
+                // We are done parsing self cue.
+                self.oncue && self.oncue(self.cue);
+                self.cue = null;
+                self.state = "ID";
+                continue;
+              }
+              if (self.cue.text) {
+                self.cue.text += "\n";
+              }
+              self.cue.text += line.replace(/\u2028/g, '\n').replace(/u2029/g, '\n');
+              continue;
+            case "BADCUE":
+              // BADCUE
+              // 54-62 - Collect and discard the remaining cue.
+              if (!line) {
+                self.state = "ID";
+              }
+              continue;
+          }
+        }
+      } catch (e) {
+        self.reportOrThrowError(e);
+
+        // If we are currently parsing a cue, report what we have.
+        if (self.state === "CUETEXT" && self.cue && self.oncue) {
+          self.oncue(self.cue);
+        }
+        self.cue = null;
+        // Enter BADWEBVTT state if header was not parsed correctly otherwise
+        // another exception occurred so enter BADCUE state.
+        self.state = self.state === "INITIAL" ? "BADWEBVTT" : "BADCUE";
+      }
+      return this;
+    },
+    flush: function () {
+      var self = this;
+      try {
+        // Finish decoding the stream.
+        self.buffer += self.decoder.decode();
+        // Synthesize the end of the current cue or region.
+        if (self.cue || self.state === "HEADER") {
+          self.buffer += "\n\n";
+          self.parse();
+        }
+        // If we've flushed, parsed, and we're still on the INITIAL state then
+        // that means we don't have enough of the stream to parse the first
+        // line.
+        if (self.state === "INITIAL") {
+          throw new ParsingError(ParsingError.Errors.BadSignature);
+        }
+      } catch (e) {
+        self.reportOrThrowError(e);
+      }
+      self.onflush && self.onflush();
+      return this;
+    }
+  };
+  var vtt = WebVTT$1;
+
+  /**
+   * Copyright 2013 vtt.js Contributors
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *   http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+
+  var autoKeyword = "auto";
+  var directionSetting = {
+    "": 1,
+    "lr": 1,
+    "rl": 1
+  };
+  var alignSetting = {
+    "start": 1,
+    "center": 1,
+    "end": 1,
+    "left": 1,
+    "right": 1,
+    "auto": 1,
+    "line-left": 1,
+    "line-right": 1
+  };
+  function findDirectionSetting(value) {
+    if (typeof value !== "string") {
+      return false;
+    }
+    var dir = directionSetting[value.toLowerCase()];
+    return dir ? value.toLowerCase() : false;
+  }
+  function findAlignSetting(value) {
+    if (typeof value !== "string") {
+      return false;
+    }
+    var align = alignSetting[value.toLowerCase()];
+    return align ? value.toLowerCase() : false;
+  }
+  function VTTCue(startTime, endTime, text) {
+    /**
+     * Shim implementation specific properties. These properties are not in
+     * the spec.
+     */
+
+    // Lets us know when the VTTCue's data has changed in such a way that we need
+    // to recompute its display state. This lets us compute its display state
+    // lazily.
+    this.hasBeenReset = false;
+
+    /**
+     * VTTCue and TextTrackCue properties
+     * http://dev.w3.org/html5/webvtt/#vttcue-interface
+     */
+
+    var _id = "";
+    var _pauseOnExit = false;
+    var _startTime = startTime;
+    var _endTime = endTime;
+    var _text = text;
+    var _region = null;
+    var _vertical = "";
+    var _snapToLines = true;
+    var _line = "auto";
+    var _lineAlign = "start";
+    var _position = "auto";
+    var _positionAlign = "auto";
+    var _size = 100;
+    var _align = "center";
+    Object.defineProperties(this, {
+      "id": {
+        enumerable: true,
+        get: function () {
+          return _id;
+        },
+        set: function (value) {
+          _id = "" + value;
+        }
+      },
+      "pauseOnExit": {
+        enumerable: true,
+        get: function () {
+          return _pauseOnExit;
+        },
+        set: function (value) {
+          _pauseOnExit = !!value;
+        }
+      },
+      "startTime": {
+        enumerable: true,
+        get: function () {
+          return _startTime;
+        },
+        set: function (value) {
+          if (typeof value !== "number") {
+            throw new TypeError("Start time must be set to a number.");
+          }
+          _startTime = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "endTime": {
+        enumerable: true,
+        get: function () {
+          return _endTime;
+        },
+        set: function (value) {
+          if (typeof value !== "number") {
+            throw new TypeError("End time must be set to a number.");
+          }
+          _endTime = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "text": {
+        enumerable: true,
+        get: function () {
+          return _text;
+        },
+        set: function (value) {
+          _text = "" + value;
+          this.hasBeenReset = true;
+        }
+      },
+      "region": {
+        enumerable: true,
+        get: function () {
+          return _region;
+        },
+        set: function (value) {
+          _region = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "vertical": {
+        enumerable: true,
+        get: function () {
+          return _vertical;
+        },
+        set: function (value) {
+          var setting = findDirectionSetting(value);
+          // Have to check for false because the setting an be an empty string.
+          if (setting === false) {
+            throw new SyntaxError("Vertical: an invalid or illegal direction string was specified.");
+          }
+          _vertical = setting;
+          this.hasBeenReset = true;
+        }
+      },
+      "snapToLines": {
+        enumerable: true,
+        get: function () {
+          return _snapToLines;
+        },
+        set: function (value) {
+          _snapToLines = !!value;
+          this.hasBeenReset = true;
+        }
+      },
+      "line": {
+        enumerable: true,
+        get: function () {
+          return _line;
+        },
+        set: function (value) {
+          if (typeof value !== "number" && value !== autoKeyword) {
+            throw new SyntaxError("Line: an invalid number or illegal string was specified.");
+          }
+          _line = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "lineAlign": {
+        enumerable: true,
+        get: function () {
+          return _lineAlign;
+        },
+        set: function (value) {
+          var setting = findAlignSetting(value);
+          if (!setting) {
+            console.warn("lineAlign: an invalid or illegal string was specified.");
+          } else {
+            _lineAlign = setting;
+            this.hasBeenReset = true;
+          }
+        }
+      },
+      "position": {
+        enumerable: true,
+        get: function () {
+          return _position;
+        },
+        set: function (value) {
+          if (value < 0 || value > 100) {
+            throw new Error("Position must be between 0 and 100.");
+          }
+          _position = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "positionAlign": {
+        enumerable: true,
+        get: function () {
+          return _positionAlign;
+        },
+        set: function (value) {
+          var setting = findAlignSetting(value);
+          if (!setting) {
+            console.warn("positionAlign: an invalid or illegal string was specified.");
+          } else {
+            _positionAlign = setting;
+            this.hasBeenReset = true;
+          }
+        }
+      },
+      "size": {
+        enumerable: true,
+        get: function () {
+          return _size;
+        },
+        set: function (value) {
+          if (value < 0 || value > 100) {
+            throw new Error("Size must be between 0 and 100.");
+          }
+          _size = value;
+          this.hasBeenReset = true;
+        }
+      },
+      "align": {
+        enumerable: true,
+        get: function () {
+          return _align;
+        },
+        set: function (value) {
+          var setting = findAlignSetting(value);
+          if (!setting) {
+            throw new SyntaxError("align: an invalid or illegal alignment string was specified.");
+          }
+          _align = setting;
+          this.hasBeenReset = true;
+        }
+      }
+    });
+
+    /**
+     * Other <track> spec defined properties
+     */
+
+    // http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#text-track-cue-display-state
+    this.displayState = undefined;
+  }
+
+  /**
+   * VTTCue methods
+   */
+
+  VTTCue.prototype.getCueAsHTML = function () {
+    // Assume WebVTT.convertCueToDOMTree is on the global.
+    return WebVTT.convertCueToDOMTree(window, this.text);
+  };
+  var vttcue = VTTCue;
+
+  /**
+   * Copyright 2013 vtt.js Contributors
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *   http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+
+  var scrollSetting = {
+    "": true,
+    "up": true
+  };
+  function findScrollSetting(value) {
+    if (typeof value !== "string") {
+      return false;
+    }
+    var scroll = scrollSetting[value.toLowerCase()];
+    return scroll ? value.toLowerCase() : false;
+  }
+  function isValidPercentValue(value) {
+    return typeof value === "number" && value >= 0 && value <= 100;
+  }
+
+  // VTTRegion shim http://dev.w3.org/html5/webvtt/#vttregion-interface
+  function VTTRegion() {
+    var _width = 100;
+    var _lines = 3;
+    var _regionAnchorX = 0;
+    var _regionAnchorY = 100;
+    var _viewportAnchorX = 0;
+    var _viewportAnchorY = 100;
+    var _scroll = "";
+    Object.defineProperties(this, {
+      "width": {
+        enumerable: true,
+        get: function () {
+          return _width;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("Width must be between 0 and 100.");
+          }
+          _width = value;
+        }
+      },
+      "lines": {
+        enumerable: true,
+        get: function () {
+          return _lines;
+        },
+        set: function (value) {
+          if (typeof value !== "number") {
+            throw new TypeError("Lines must be set to a number.");
+          }
+          _lines = value;
+        }
+      },
+      "regionAnchorY": {
+        enumerable: true,
+        get: function () {
+          return _regionAnchorY;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("RegionAnchorX must be between 0 and 100.");
+          }
+          _regionAnchorY = value;
+        }
+      },
+      "regionAnchorX": {
+        enumerable: true,
+        get: function () {
+          return _regionAnchorX;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("RegionAnchorY must be between 0 and 100.");
+          }
+          _regionAnchorX = value;
+        }
+      },
+      "viewportAnchorY": {
+        enumerable: true,
+        get: function () {
+          return _viewportAnchorY;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("ViewportAnchorY must be between 0 and 100.");
+          }
+          _viewportAnchorY = value;
+        }
+      },
+      "viewportAnchorX": {
+        enumerable: true,
+        get: function () {
+          return _viewportAnchorX;
+        },
+        set: function (value) {
+          if (!isValidPercentValue(value)) {
+            throw new Error("ViewportAnchorX must be between 0 and 100.");
+          }
+          _viewportAnchorX = value;
+        }
+      },
+      "scroll": {
+        enumerable: true,
+        get: function () {
+          return _scroll;
+        },
+        set: function (value) {
+          var setting = findScrollSetting(value);
+          // Have to check for false as an empty string is a legal value.
+          if (setting === false) {
+            console.warn("Scroll: an invalid or illegal string was specified.");
+          } else {
+            _scroll = setting;
+          }
+        }
+      }
+    });
+  }
+  var vttregion = VTTRegion;
+
+  var browserIndex = createCommonjsModule(function (module) {
+    /**
+     * Copyright 2013 vtt.js Contributors
+     *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *   http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+
+    // Default exports for Node. Export the extended versions of VTTCue and
+    // VTTRegion in Node since we likely want the capability to convert back and
+    // forth between JSON. If we don't then it's not that big of a deal since we're
+    // off browser.
+
+    var vttjs = module.exports = {
+      WebVTT: vtt,
+      VTTCue: vttcue,
+      VTTRegion: vttregion
+    };
+    window_1.vttjs = vttjs;
+    window_1.WebVTT = vttjs.WebVTT;
+    var cueShim = vttjs.VTTCue;
+    var regionShim = vttjs.VTTRegion;
+    var nativeVTTCue = window_1.VTTCue;
+    var nativeVTTRegion = window_1.VTTRegion;
+    vttjs.shim = function () {
+      window_1.VTTCue = cueShim;
+      window_1.VTTRegion = regionShim;
+    };
+    vttjs.restore = function () {
+      window_1.VTTCue = nativeVTTCue;
+      window_1.VTTRegion = nativeVTTRegion;
+    };
+    if (!window_1.VTTCue) {
+      vttjs.shim();
+    }
+  });
+  browserIndex.WebVTT;
+  browserIndex.VTTCue;
+  browserIndex.VTTRegion;
+
+  /**
+   * @file tech.js
+   */
+
+  /**
+   * An Object containing a structure like: `{src: 'url', type: 'mimetype'}` or string
+   * that just contains the src url alone.
+   * * `var SourceObject = {src: 'http://ex.com/video.mp4', type: 'video/mp4'};`
+     * `var SourceString = 'http://example.com/some-video.mp4';`
+   *
+   * @typedef {Object|string} SourceObject
+   *
+   * @property {string} src
+   *           The url to the source
+   *
+   * @property {string} type
+   *           The mime type of the source
+   */
+
+  /**
+   * A function used by {@link Tech} to create a new {@link TextTrack}.
+   *
+   * @private
+   *
+   * @param {Tech} self
+   *        An instance of the Tech class.
+   *
+   * @param {string} kind
+   *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+   *
+   * @param {string} [label]
+   *        Label to identify the text track
+   *
+   * @param {string} [language]
+   *        Two letter language abbreviation
+   *
+   * @param {Object} [options={}]
+   *        An object with additional text track options
+   *
+   * @return {TextTrack}
+   *          The text track that was created.
+   */
+  function createTrackHelper(self, kind, label, language, options = {}) {
+    const tracks = self.textTracks();
+    options.kind = kind;
+    if (label) {
+      options.label = label;
+    }
+    if (language) {
+      options.language = language;
+    }
+    options.tech = self;
+    const track = new ALL.text.TrackClass(options);
+    tracks.addTrack(track);
+    return track;
+  }
+
+  /**
+   * This is the base class for media playback technology controllers, such as
+   * {@link HTML5}
+   *
+   * @extends Component
+   */
+  class Tech extends Component$1 {
+    /**
+    * Create an instance of this Tech.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    *
+    * @param {Function} [ready]
+    *        Callback function to call when the `HTML5` Tech is ready.
+    */
+    constructor(options = {}, ready = function () {}) {
+      // we don't want the tech to report user activity automatically.
+      // This is done manually in addControlsListeners
+      options.reportTouchActivity = false;
+      super(null, options, ready);
+      this.onDurationChange_ = e => this.onDurationChange(e);
+      this.trackProgress_ = e => this.trackProgress(e);
+      this.trackCurrentTime_ = e => this.trackCurrentTime(e);
+      this.stopTrackingCurrentTime_ = e => this.stopTrackingCurrentTime(e);
+      this.disposeSourceHandler_ = e => this.disposeSourceHandler(e);
+      this.queuedHanders_ = new Set();
+
+      // keep track of whether the current source has played at all to
+      // implement a very limited played()
+      this.hasStarted_ = false;
+      this.on('playing', function () {
+        this.hasStarted_ = true;
+      });
+      this.on('loadstart', function () {
+        this.hasStarted_ = false;
+      });
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        if (options && options[props.getterName]) {
+          this[props.privateName] = options[props.getterName];
+        }
+      });
+
+      // Manually track progress in cases where the browser/tech doesn't report it.
+      if (!this.featuresProgressEvents) {
+        this.manualProgressOn();
+      }
+
+      // Manually track timeupdates in cases where the browser/tech doesn't report it.
+      if (!this.featuresTimeupdateEvents) {
+        this.manualTimeUpdatesOn();
+      }
+      ['Text', 'Audio', 'Video'].forEach(track => {
+        if (options[`native${track}Tracks`] === false) {
+          this[`featuresNative${track}Tracks`] = false;
+        }
+      });
+      if (options.nativeCaptions === false || options.nativeTextTracks === false) {
+        this.featuresNativeTextTracks = false;
+      } else if (options.nativeCaptions === true || options.nativeTextTracks === true) {
+        this.featuresNativeTextTracks = true;
+      }
+      if (!this.featuresNativeTextTracks) {
+        this.emulateTextTracks();
+      }
+      this.preloadTextTracks = options.preloadTextTracks !== false;
+      this.autoRemoteTextTracks_ = new ALL.text.ListClass();
+      this.initTrackListeners();
+
+      // Turn on component tap events only if not using native controls
+      if (!options.nativeControlsForTouch) {
+        this.emitTapEvents();
+      }
+      if (this.constructor) {
+        this.name_ = this.constructor.name || 'Unknown Tech';
+      }
+    }
+
+    /**
+     * A special function to trigger source set in a way that will allow player
+     * to re-trigger if the player or tech are not ready yet.
+     *
+     * @fires Tech#sourceset
+     * @param {string} src The source string at the time of the source changing.
+     */
+    triggerSourceset(src) {
+      if (!this.isReady_) {
+        // on initial ready we have to trigger source set
+        // 1ms after ready so that player can watch for it.
+        this.one('ready', () => this.setTimeout(() => this.triggerSourceset(src), 1));
+      }
+
+      /**
+       * Fired when the source is set on the tech causing the media element
+       * to reload.
+       *
+       * @see {@link Player#event:sourceset}
+       * @event Tech#sourceset
+       * @type {Event}
+       */
+      this.trigger({
+        src,
+        type: 'sourceset'
+      });
+    }
+
+    /* Fallbacks for unsupported event types
+    ================================================================================ */
+
+    /**
+     * Polyfill the `progress` event for browsers that don't support it natively.
+     *
+     * @see {@link Tech#trackProgress}
+     */
+    manualProgressOn() {
+      this.on('durationchange', this.onDurationChange_);
+      this.manualProgress = true;
+
+      // Trigger progress watching when a source begins loading
+      this.one('ready', this.trackProgress_);
+    }
+
+    /**
+     * Turn off the polyfill for `progress` events that was created in
+     * {@link Tech#manualProgressOn}
+     */
+    manualProgressOff() {
+      this.manualProgress = false;
+      this.stopTrackingProgress();
+      this.off('durationchange', this.onDurationChange_);
+    }
+
+    /**
+     * This is used to trigger a `progress` event when the buffered percent changes. It
+     * sets an interval function that will be called every 500 milliseconds to check if the
+     * buffer end percent has changed.
+     *
+     * > This function is called by {@link Tech#manualProgressOn}
+     *
+     * @param {Event} event
+     *        The `ready` event that caused this to run.
+     *
+     * @listens Tech#ready
+     * @fires Tech#progress
+     */
+    trackProgress(event) {
+      this.stopTrackingProgress();
+      this.progressInterval = this.setInterval(bind_(this, function () {
+        // Don't trigger unless buffered amount is greater than last time
+
+        const numBufferedPercent = this.bufferedPercent();
+        if (this.bufferedPercent_ !== numBufferedPercent) {
+          /**
+           * See {@link Player#progress}
+           *
+           * @event Tech#progress
+           * @type {Event}
+           */
+          this.trigger('progress');
+        }
+        this.bufferedPercent_ = numBufferedPercent;
+        if (numBufferedPercent === 1) {
+          this.stopTrackingProgress();
+        }
+      }), 500);
+    }
+
+    /**
+     * Update our internal duration on a `durationchange` event by calling
+     * {@link Tech#duration}.
+     *
+     * @param {Event} event
+     *        The `durationchange` event that caused this to run.
+     *
+     * @listens Tech#durationchange
+     */
+    onDurationChange(event) {
+      this.duration_ = this.duration();
+    }
+
+    /**
+     * Get and create a `TimeRange` object for buffering.
+     *
+     * @return { import('../utils/time').TimeRange }
+     *         The time range object that was created.
+     */
+    buffered() {
+      return createTimeRanges$1(0, 0);
+    }
+
+    /**
+     * Get the percentage of the current video that is currently buffered.
+     *
+     * @return {number}
+     *         A number from 0 to 1 that represents the decimal percentage of the
+     *         video that is buffered.
+     *
+     */
+    bufferedPercent() {
+      return bufferedPercent(this.buffered(), this.duration_);
+    }
+
+    /**
+     * Turn off the polyfill for `progress` events that was created in
+     * {@link Tech#manualProgressOn}
+     * Stop manually tracking progress events by clearing the interval that was set in
+     * {@link Tech#trackProgress}.
+     */
+    stopTrackingProgress() {
+      this.clearInterval(this.progressInterval);
+    }
+
+    /**
+     * Polyfill the `timeupdate` event for browsers that don't support it.
+     *
+     * @see {@link Tech#trackCurrentTime}
+     */
+    manualTimeUpdatesOn() {
+      this.manualTimeUpdates = true;
+      this.on('play', this.trackCurrentTime_);
+      this.on('pause', this.stopTrackingCurrentTime_);
+    }
+
+    /**
+     * Turn off the polyfill for `timeupdate` events that was created in
+     * {@link Tech#manualTimeUpdatesOn}
+     */
+    manualTimeUpdatesOff() {
+      this.manualTimeUpdates = false;
+      this.stopTrackingCurrentTime();
+      this.off('play', this.trackCurrentTime_);
+      this.off('pause', this.stopTrackingCurrentTime_);
+    }
+
+    /**
+     * Sets up an interval function to track current time and trigger `timeupdate` every
+     * 250 milliseconds.
+     *
+     * @listens Tech#play
+     * @triggers Tech#timeupdate
+     */
+    trackCurrentTime() {
+      if (this.currentTimeInterval) {
+        this.stopTrackingCurrentTime();
+      }
+      this.currentTimeInterval = this.setInterval(function () {
+        /**
+         * Triggered at an interval of 250ms to indicated that time is passing in the video.
+         *
+         * @event Tech#timeupdate
+         * @type {Event}
+         */
+        this.trigger({
+          type: 'timeupdate',
+          target: this,
+          manuallyTriggered: true
+        });
+
+        // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
+      }, 250);
+    }
+
+    /**
+     * Stop the interval function created in {@link Tech#trackCurrentTime} so that the
+     * `timeupdate` event is no longer triggered.
+     *
+     * @listens {Tech#pause}
+     */
+    stopTrackingCurrentTime() {
+      this.clearInterval(this.currentTimeInterval);
+
+      // #1002 - if the video ends right before the next timeupdate would happen,
+      // the progress bar won't make it all the way to the end
+      this.trigger({
+        type: 'timeupdate',
+        target: this,
+        manuallyTriggered: true
+      });
+    }
+
+    /**
+     * Turn off all event polyfills, clear the `Tech`s {@link AudioTrackList},
+     * {@link VideoTrackList}, and {@link TextTrackList}, and dispose of this Tech.
+     *
+     * @fires Component#dispose
+     */
+    dispose() {
+      // clear out all tracks because we can't reuse them between techs
+      this.clearTracks(NORMAL.names);
+
+      // Turn off any manual progress or timeupdate tracking
+      if (this.manualProgress) {
+        this.manualProgressOff();
+      }
+      if (this.manualTimeUpdates) {
+        this.manualTimeUpdatesOff();
+      }
+      super.dispose();
+    }
+
+    /**
+     * Clear out a single `TrackList` or an array of `TrackLists` given their names.
+     *
+     * > Note: Techs without source handlers should call this between sources for `video`
+     *         & `audio` tracks. You don't want to use them between tracks!
+     *
+     * @param {string[]|string} types
+     *        TrackList names to clear, valid names are `video`, `audio`, and
+     *        `text`.
+     */
+    clearTracks(types) {
+      types = [].concat(types);
+      // clear out all tracks because we can't reuse them between techs
+      types.forEach(type => {
+        const list = this[`${type}Tracks`]() || [];
+        let i = list.length;
+        while (i--) {
+          const track = list[i];
+          if (type === 'text') {
+            this.removeRemoteTextTrack(track);
+          }
+          list.removeTrack(track);
+        }
+      });
+    }
+
+    /**
+     * Remove any TextTracks added via addRemoteTextTrack that are
+     * flagged for automatic garbage collection
+     */
+    cleanupAutoTextTracks() {
+      const list = this.autoRemoteTextTracks_ || [];
+      let i = list.length;
+      while (i--) {
+        const track = list[i];
+        this.removeRemoteTextTrack(track);
+      }
+    }
+
+    /**
+     * Reset the tech, which will removes all sources and reset the internal readyState.
+     *
+     * @abstract
+     */
+    reset() {}
+
+    /**
+     * Get the value of `crossOrigin` from the tech.
+     *
+     * @abstract
+     *
+     * @see {Html5#crossOrigin}
+     */
+    crossOrigin() {}
+
+    /**
+     * Set the value of `crossOrigin` on the tech.
+     *
+     * @abstract
+     *
+     * @param {string} crossOrigin the crossOrigin value
+     * @see {Html5#setCrossOrigin}
+     */
+    setCrossOrigin() {}
+
+    /**
+     * Get or set an error on the Tech.
+     *
+     * @param {MediaError} [err]
+     *        Error to set on the Tech
+     *
+     * @return {MediaError|null}
+     *         The current error object on the tech, or null if there isn't one.
+     */
+    error(err) {
+      if (err !== undefined) {
+        this.error_ = new MediaError(err);
+        this.trigger('error');
+      }
+      return this.error_;
+    }
+
+    /**
+     * Returns the `TimeRange`s that have been played through for the current source.
+     *
+     * > NOTE: This implementation is incomplete. It does not track the played `TimeRange`.
+     *         It only checks whether the source has played at all or not.
+     *
+     * @return { import('../utils/time').TimeRange }
+     *         - A single time range if this video has played
+     *         - An empty set of ranges if not.
+     */
+    played() {
+      if (this.hasStarted_) {
+        return createTimeRanges$1(0, 0);
+      }
+      return createTimeRanges$1();
+    }
+
+    /**
+     * Start playback
+     *
+     * @abstract
+     *
+     * @see {Html5#play}
+     */
+    play() {}
+
+    /**
+     * Set whether we are scrubbing or not
+     *
+     * @abstract
+     * @param {boolean} _isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     *
+     * @see {Html5#setScrubbing}
+     */
+    setScrubbing(_isScrubbing) {}
+
+    /**
+     * Get whether we are scrubbing or not
+     *
+     * @abstract
+     *
+     * @see {Html5#scrubbing}
+     */
+    scrubbing() {}
+
+    /**
+     * Causes a manual time update to occur if {@link Tech#manualTimeUpdatesOn} was
+     * previously called.
+     *
+     * @param {number} _seconds
+     *        Set the current time of the media to this.
+     * @fires Tech#timeupdate
+     */
+    setCurrentTime(_seconds) {
+      // improve the accuracy of manual timeupdates
+      if (this.manualTimeUpdates) {
+        /**
+         * A manual `timeupdate` event.
+         *
+         * @event Tech#timeupdate
+         * @type {Event}
+         */
+        this.trigger({
+          type: 'timeupdate',
+          target: this,
+          manuallyTriggered: true
+        });
+      }
+    }
+
+    /**
+     * Turn on listeners for {@link VideoTrackList}, {@link {AudioTrackList}, and
+     * {@link TextTrackList} events.
+     *
+     * This adds {@link EventTarget~EventListeners} for `addtrack`, and  `removetrack`.
+     *
+     * @fires Tech#audiotrackchange
+     * @fires Tech#videotrackchange
+     * @fires Tech#texttrackchange
+     */
+    initTrackListeners() {
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link AudioTrackList}
+        *
+        * @event Tech#audiotrackchange
+        * @type {Event}
+        */
+
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link VideoTrackList}
+        *
+        * @event Tech#videotrackchange
+        * @type {Event}
+        */
+
+      /**
+        * Triggered when tracks are added or removed on the Tech {@link TextTrackList}
+        *
+        * @event Tech#texttrackchange
+        * @type {Event}
+        */
+      NORMAL.names.forEach(name => {
+        const props = NORMAL[name];
+        const trackListChanges = () => {
+          this.trigger(`${name}trackchange`);
+        };
+        const tracks = this[props.getterName]();
+        tracks.addEventListener('removetrack', trackListChanges);
+        tracks.addEventListener('addtrack', trackListChanges);
+        this.on('dispose', () => {
+          tracks.removeEventListener('removetrack', trackListChanges);
+          tracks.removeEventListener('addtrack', trackListChanges);
+        });
+      });
+    }
+
+    /**
+     * Emulate TextTracks using vtt.js if necessary
+     *
+     * @fires Tech#vttjsloaded
+     * @fires Tech#vttjserror
+     */
+    addWebVttScript_() {
+      if (window.WebVTT) {
+        return;
+      }
+
+      // Initially, Tech.el_ is a child of a dummy-div wait until the Component system
+      // signals that the Tech is ready at which point Tech.el_ is part of the DOM
+      // before inserting the WebVTT script
+      if (document.body.contains(this.el())) {
+        // load via require if available and vtt.js script location was not passed in
+        // as an option. novtt builds will turn the above require call into an empty object
+        // which will cause this if check to always fail.
+        if (!this.options_['vtt.js'] && isPlain(browserIndex) && Object.keys(browserIndex).length > 0) {
+          this.trigger('vttjsloaded');
+          return;
+        }
+
+        // load vtt.js via the script location option or the cdn of no location was
+        // passed in
+        const script = document.createElement('script');
+        script.src = this.options_['vtt.js'] || 'https://vjs.zencdn.net/vttjs/0.14.1/vtt.min.js';
+        script.onload = () => {
+          /**
+           * Fired when vtt.js is loaded.
+           *
+           * @event Tech#vttjsloaded
+           * @type {Event}
+           */
+          this.trigger('vttjsloaded');
+        };
+        script.onerror = () => {
+          /**
+           * Fired when vtt.js was not loaded due to an error
+           *
+           * @event Tech#vttjsloaded
+           * @type {Event}
+           */
+          this.trigger('vttjserror');
+        };
+        this.on('dispose', () => {
+          script.onload = null;
+          script.onerror = null;
+        });
+        // but have not loaded yet and we set it to true before the inject so that
+        // we don't overwrite the injected window.WebVTT if it loads right away
+        window.WebVTT = true;
+        this.el().parentNode.appendChild(script);
+      } else {
+        this.ready(this.addWebVttScript_);
+      }
+    }
+
+    /**
+     * Emulate texttracks
+     *
+     */
+    emulateTextTracks() {
+      const tracks = this.textTracks();
+      const remoteTracks = this.remoteTextTracks();
+      const handleAddTrack = e => tracks.addTrack(e.track);
+      const handleRemoveTrack = e => tracks.removeTrack(e.track);
+      remoteTracks.on('addtrack', handleAddTrack);
+      remoteTracks.on('removetrack', handleRemoveTrack);
+      this.addWebVttScript_();
+      const updateDisplay = () => this.trigger('texttrackchange');
+      const textTracksChanges = () => {
+        updateDisplay();
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+          track.removeEventListener('cuechange', updateDisplay);
+          if (track.mode === 'showing') {
+            track.addEventListener('cuechange', updateDisplay);
+          }
+        }
+      };
+      textTracksChanges();
+      tracks.addEventListener('change', textTracksChanges);
+      tracks.addEventListener('addtrack', textTracksChanges);
+      tracks.addEventListener('removetrack', textTracksChanges);
+      this.on('dispose', function () {
+        remoteTracks.off('addtrack', handleAddTrack);
+        remoteTracks.off('removetrack', handleRemoveTrack);
+        tracks.removeEventListener('change', textTracksChanges);
+        tracks.removeEventListener('addtrack', textTracksChanges);
+        tracks.removeEventListener('removetrack', textTracksChanges);
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+          track.removeEventListener('cuechange', updateDisplay);
+        }
+      });
+    }
+
+    /**
+     * Create and returns a remote {@link TextTrack} object.
+     *
+     * @param {string} kind
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+     *
+     * @param {string} [label]
+     *        Label to identify the text track
+     *
+     * @param {string} [language]
+     *        Two letter language abbreviation
+     *
+     * @return {TextTrack}
+     *         The TextTrack that gets created.
+     */
+    addTextTrack(kind, label, language) {
+      if (!kind) {
+        throw new Error('TextTrack kind is required but was not provided');
+      }
+      return createTrackHelper(this, kind, label, language);
+    }
+
+    /**
+     * Create an emulated TextTrack for use by addRemoteTextTrack
+     *
+     * This is intended to be overridden by classes that inherit from
+     * Tech in order to create native or custom TextTracks.
+     *
+     * @param {Object} options
+     *        The object should contain the options to initialize the TextTrack with.
+     *
+     * @param {string} [options.kind]
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+     *
+     * @param {string} [options.label].
+     *        Label to identify the text track
+     *
+     * @param {string} [options.language]
+     *        Two letter language abbreviation.
+     *
+     * @return {HTMLTrackElement}
+     *         The track element that gets created.
+     */
+    createRemoteTextTrack(options) {
+      const track = merge$2(options, {
+        tech: this
+      });
+      return new REMOTE.remoteTextEl.TrackClass(track);
+    }
+
+    /**
+     * Creates a remote text track object and returns an html track element.
+     *
+     * > Note: This can be an emulated {@link HTMLTrackElement} or a native one.
+     *
+     * @param {Object} options
+     *        See {@link Tech#createRemoteTextTrack} for more detailed properties.
+     *
+     * @param {boolean} [manualCleanup=false]
+     *        - When false: the TextTrack will be automatically removed from the video
+     *          element whenever the source changes
+     *        - When True: The TextTrack will have to be cleaned up manually
+     *
+     * @return {HTMLTrackElement}
+     *         An Html Track Element.
+     *
+     */
+    addRemoteTextTrack(options = {}, manualCleanup) {
+      const htmlTrackElement = this.createRemoteTextTrack(options);
+      if (typeof manualCleanup !== 'boolean') {
+        manualCleanup = false;
+      }
+
+      // store HTMLTrackElement and TextTrack to remote list
+      this.remoteTextTrackEls().addTrackElement_(htmlTrackElement);
+      this.remoteTextTracks().addTrack(htmlTrackElement.track);
+      if (manualCleanup === false) {
+        // create the TextTrackList if it doesn't exist
+        this.ready(() => this.autoRemoteTextTracks_.addTrack(htmlTrackElement.track));
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Remove a remote text track from the remote `TextTrackList`.
+     *
+     * @param {TextTrack} track
+     *        `TextTrack` to remove from the `TextTrackList`
+     */
+    removeRemoteTextTrack(track) {
+      const trackElement = this.remoteTextTrackEls().getTrackElementByTrack_(track);
+
+      // remove HTMLTrackElement and TextTrack from remote list
+      this.remoteTextTrackEls().removeTrackElement_(trackElement);
+      this.remoteTextTracks().removeTrack(track);
+      this.autoRemoteTextTracks_.removeTrack(track);
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object}
+     *         An object with supported media playback quality metrics
+     *
+     * @abstract
+     */
+    getVideoPlaybackQuality() {
+      return {};
+    }
+
+    /**
+     * Attempt to create a floating video window always on top of other windows
+     * so that users may continue consuming media while they interact with other
+     * content sites, or applications on their device.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @return {Promise|undefined}
+     *         A promise with a Picture-in-Picture window if the browser supports
+     *         Promises (or one was passed in as an option). It returns undefined
+     *         otherwise.
+     *
+     * @abstract
+     */
+    requestPictureInPicture() {
+      return Promise.reject();
+    }
+
+    /**
+     * A method to check for the value of the 'disablePictureInPicture' <video> property.
+     * Defaults to true, as it should be considered disabled if the tech does not support pip
+     *
+     * @abstract
+     */
+    disablePictureInPicture() {
+      return true;
+    }
+
+    /**
+     * A method to set or unset the 'disablePictureInPicture' <video> property.
+     *
+     * @abstract
+     */
+    setDisablePictureInPicture() {}
+
+    /**
+     * A fallback implementation of requestVideoFrameCallback using requestAnimationFrame
+     *
+     * @param {function} cb
+     * @return {number} request id
+     */
+    requestVideoFrameCallback(cb) {
+      const id = newGUID();
+      if (!this.isReady_ || this.paused()) {
+        this.queuedHanders_.add(id);
+        this.one('playing', () => {
+          if (this.queuedHanders_.has(id)) {
+            this.queuedHanders_.delete(id);
+            cb();
+          }
+        });
+      } else {
+        this.requestNamedAnimationFrame(id, cb);
+      }
+      return id;
+    }
+
+    /**
+     * A fallback implementation of cancelVideoFrameCallback
+     *
+     * @param {number} id id of callback to be cancelled
+     */
+    cancelVideoFrameCallback(id) {
+      if (this.queuedHanders_.has(id)) {
+        this.queuedHanders_.delete(id);
+      } else {
+        this.cancelNamedAnimationFrame(id);
+      }
+    }
+
+    /**
+     * A method to set a poster from a `Tech`.
+     *
+     * @abstract
+     */
+    setPoster() {}
+
+    /**
+     * A method to check for the presence of the 'playsinline' <video> attribute.
+     *
+     * @abstract
+     */
+    playsinline() {}
+
+    /**
+     * A method to set or unset the 'playsinline' <video> attribute.
+     *
+     * @abstract
+     */
+    setPlaysinline() {}
+
+    /**
+     * Attempt to force override of native audio tracks.
+     *
+     * @param {boolean} override - If set to true native audio will be overridden,
+     * otherwise native audio will potentially be used.
+     *
+     * @abstract
+     */
+    overrideNativeAudioTracks(override) {}
+
+    /**
+     * Attempt to force override of native video tracks.
+     *
+     * @param {boolean} override - If set to true native video will be overridden,
+     * otherwise native video will potentially be used.
+     *
+     * @abstract
+     */
+    overrideNativeVideoTracks(override) {}
+
+    /**
+     * Check if the tech can support the given mime-type.
+     *
+     * The base tech does not support any type, but source handlers might
+     * overwrite this.
+     *
+     * @param  {string} _type
+     *         The mimetype to check for support
+     *
+     * @return {string}
+     *         'probably', 'maybe', or empty string
+     *
+     * @see [Spec]{@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType}
+     *
+     * @abstract
+     */
+    canPlayType(_type) {
+      return '';
+    }
+
+    /**
+     * Check if the type is supported by this tech.
+     *
+     * The base tech does not support any type, but source handlers might
+     * overwrite this.
+     *
+     * @param {string} _type
+     *        The media type to check
+     * @return {string} Returns the native video element's response
+     */
+    static canPlayType(_type) {
+      return '';
+    }
+
+    /**
+     * Check if the tech can support the given source
+     *
+     * @param {Object} srcObj
+     *        The source object
+     * @param {Object} options
+     *        The options passed to the tech
+     * @return {string} 'probably', 'maybe', or '' (empty string)
+     */
+    static canPlaySource(srcObj, options) {
+      return Tech.canPlayType(srcObj.type);
+    }
+
+    /*
+     * Return whether the argument is a Tech or not.
+     * Can be passed either a Class like `Html5` or a instance like `player.tech_`
+     *
+     * @param {Object} component
+     *        The item to check
+     *
+     * @return {boolean}
+     *         Whether it is a tech or not
+     *         - True if it is a tech
+     *         - False if it is not
+     */
+    static isTech(component) {
+      return component.prototype instanceof Tech || component instanceof Tech || component === Tech;
+    }
+
+    /**
+     * Registers a `Tech` into a shared list for videojs.
+     *
+     * @param {string} name
+     *        Name of the `Tech` to register.
+     *
+     * @param {Object} tech
+     *        The `Tech` class to register.
+     */
+    static registerTech(name, tech) {
+      if (!Tech.techs_) {
+        Tech.techs_ = {};
+      }
+      if (!Tech.isTech(tech)) {
+        throw new Error(`Tech ${name} must be a Tech`);
+      }
+      if (!Tech.canPlayType) {
+        throw new Error('Techs must have a static canPlayType method on them');
+      }
+      if (!Tech.canPlaySource) {
+        throw new Error('Techs must have a static canPlaySource method on them');
+      }
+      name = toTitleCase$1(name);
+      Tech.techs_[name] = tech;
+      Tech.techs_[toLowerCase(name)] = tech;
+      if (name !== 'Tech') {
+        // camel case the techName for use in techOrder
+        Tech.defaultTechOrder_.push(name);
+      }
+      return tech;
+    }
+
+    /**
+     * Get a `Tech` from the shared list by name.
+     *
+     * @param {string} name
+     *        `camelCase` or `TitleCase` name of the Tech to get
+     *
+     * @return {Tech|undefined}
+     *         The `Tech` or undefined if there was no tech with the name requested.
+     */
+    static getTech(name) {
+      if (!name) {
+        return;
+      }
+      if (Tech.techs_ && Tech.techs_[name]) {
+        return Tech.techs_[name];
+      }
+      name = toTitleCase$1(name);
+      if (window && window.videojs && window.videojs[name]) {
+        log$1.warn(`The ${name} tech was added to the videojs object when it should be registered using videojs.registerTech(name, tech)`);
+        return window.videojs[name];
+      }
+    }
+  }
+
+  /**
+   * Get the {@link VideoTrackList}
+   *
+   * @returns {VideoTrackList}
+   * @method Tech.prototype.videoTracks
+   */
+
+  /**
+   * Get the {@link AudioTrackList}
+   *
+   * @returns {AudioTrackList}
+   * @method Tech.prototype.audioTracks
+   */
+
+  /**
+   * Get the {@link TextTrackList}
+   *
+   * @returns {TextTrackList}
+   * @method Tech.prototype.textTracks
+   */
+
+  /**
+   * Get the remote element {@link TextTrackList}
+   *
+   * @returns {TextTrackList}
+   * @method Tech.prototype.remoteTextTracks
+   */
+
+  /**
+   * Get the remote element {@link HtmlTrackElementList}
+   *
+   * @returns {HtmlTrackElementList}
+   * @method Tech.prototype.remoteTextTrackEls
+   */
+
+  ALL.names.forEach(function (name) {
+    const props = ALL[name];
+    Tech.prototype[props.getterName] = function () {
+      this[props.privateName] = this[props.privateName] || new props.ListClass();
+      return this[props.privateName];
+    };
+  });
+
+  /**
+   * List of associated text tracks
+   *
+   * @type {TextTrackList}
+   * @private
+   * @property Tech#textTracks_
+   */
+
+  /**
+   * List of associated audio tracks.
+   *
+   * @type {AudioTrackList}
+   * @private
+   * @property Tech#audioTracks_
+   */
+
+  /**
+   * List of associated video tracks.
+   *
+   * @type {VideoTrackList}
+   * @private
+   * @property Tech#videoTracks_
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports volume control.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresVolumeControl = true;
+
+  /**
+   * Boolean indicating whether the `Tech` supports muting volume.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresMuteControl = true;
+
+  /**
+   * Boolean indicating whether the `Tech` supports fullscreen resize control.
+   * Resizing plugins using request fullscreen reloads the plugin
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresFullscreenResize = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports changing the speed at which the video
+   * plays. Examples:
+   *   - Set player to play 2x (twice) as fast
+   *   - Set player to play 0.5x (half) as fast
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresPlaybackRate = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `progress` event.
+   * This will be used to determine if {@link Tech#manualProgressOn} should be called.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresProgressEvents = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `sourceset` event.
+   *
+   * A tech should set this to `true` and then use {@link Tech#triggerSourceset}
+   * to trigger a {@link Tech#event:sourceset} at the earliest time after getting
+   * a new source.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresSourceset = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `timeupdate` event.
+   * This will be used to determine if {@link Tech#manualTimeUpdates} should be called.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresTimeupdateEvents = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports the native `TextTrack`s.
+   * This will help us integrate with native `TextTrack`s if the browser supports them.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresNativeTextTracks = false;
+
+  /**
+   * Boolean indicating whether the `Tech` supports `requestVideoFrameCallback`.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Tech.prototype.featuresVideoFrameCallback = false;
+
+  /**
+   * A functional mixin for techs that want to use the Source Handler pattern.
+   * Source handlers are scripts for handling specific formats.
+   * The source handler pattern is used for adaptive formats (HLS, DASH) that
+   * manually load video data and feed it into a Source Buffer (Media Source Extensions)
+   * Example: `Tech.withSourceHandlers.call(MyTech);`
+   *
+   * @param {Tech} _Tech
+   *        The tech to add source handler functions to.
+   *
+   * @mixes Tech~SourceHandlerAdditions
+   */
+  Tech.withSourceHandlers = function (_Tech) {
+    /**
+     * Register a source handler
+     *
+     * @param {Function} handler
+     *        The source handler class
+     *
+     * @param {number} [index]
+     *        Register it at the following index
+     */
+    _Tech.registerSourceHandler = function (handler, index) {
+      let handlers = _Tech.sourceHandlers;
+      if (!handlers) {
+        handlers = _Tech.sourceHandlers = [];
+      }
+      if (index === undefined) {
+        // add to the end of the list
+        index = handlers.length;
+      }
+      handlers.splice(index, 0, handler);
+    };
+
+    /**
+     * Check if the tech can support the given type. Also checks the
+     * Techs sourceHandlers.
+     *
+     * @param {string} type
+     *         The mimetype to check.
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    _Tech.canPlayType = function (type) {
+      const handlers = _Tech.sourceHandlers || [];
+      let can;
+      for (let i = 0; i < handlers.length; i++) {
+        can = handlers[i].canPlayType(type);
+        if (can) {
+          return can;
+        }
+      }
+      return '';
+    };
+
+    /**
+     * Returns the first source handler that supports the source.
+     *
+     * TODO: Answer question: should 'probably' be prioritized over 'maybe'
+     *
+     * @param {SourceObject} source
+     *        The source object
+     *
+     * @param {Object} options
+     *        The options passed to the tech
+     *
+     * @return {SourceHandler|null}
+     *          The first source handler that supports the source or null if
+     *          no SourceHandler supports the source
+     */
+    _Tech.selectSourceHandler = function (source, options) {
+      const handlers = _Tech.sourceHandlers || [];
+      let can;
+      for (let i = 0; i < handlers.length; i++) {
+        can = handlers[i].canHandleSource(source, options);
+        if (can) {
+          return handlers[i];
+        }
+      }
+      return null;
+    };
+
+    /**
+     * Check if the tech can support the given source.
+     *
+     * @param {SourceObject} srcObj
+     *        The source object
+     *
+     * @param {Object} options
+     *        The options passed to the tech
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    _Tech.canPlaySource = function (srcObj, options) {
+      const sh = _Tech.selectSourceHandler(srcObj, options);
+      if (sh) {
+        return sh.canHandleSource(srcObj, options);
+      }
+      return '';
+    };
+
+    /**
+     * When using a source handler, prefer its implementation of
+     * any function normally provided by the tech.
+     */
+    const deferrable = ['seekable', 'seeking', 'duration'];
+
+    /**
+     * A wrapper around {@link Tech#seekable} that will call a `SourceHandler`s seekable
+     * function if it exists, with a fallback to the Techs seekable function.
+     *
+     * @method _Tech.seekable
+     */
+
+    /**
+     * A wrapper around {@link Tech#duration} that will call a `SourceHandler`s duration
+     * function if it exists, otherwise it will fallback to the techs duration function.
+     *
+     * @method _Tech.duration
+     */
+
+    deferrable.forEach(function (fnName) {
+      const originalFn = this[fnName];
+      if (typeof originalFn !== 'function') {
+        return;
+      }
+      this[fnName] = function () {
+        if (this.sourceHandler_ && this.sourceHandler_[fnName]) {
+          return this.sourceHandler_[fnName].apply(this.sourceHandler_, arguments);
+        }
+        return originalFn.apply(this, arguments);
+      };
+    }, _Tech.prototype);
+
+    /**
+     * Create a function for setting the source using a source object
+     * and source handlers.
+     * Should never be called unless a source handler was found.
+     *
+     * @param {SourceObject} source
+     *        A source object with src and type keys
+     */
+    _Tech.prototype.setSource = function (source) {
+      let sh = _Tech.selectSourceHandler(source, this.options_);
+      if (!sh) {
+        // Fall back to a native source handler when unsupported sources are
+        // deliberately set
+        if (_Tech.nativeSourceHandler) {
+          sh = _Tech.nativeSourceHandler;
+        } else {
+          log$1.error('No source handler found for the current source.');
+        }
+      }
+
+      // Dispose any existing source handler
+      this.disposeSourceHandler();
+      this.off('dispose', this.disposeSourceHandler_);
+      if (sh !== _Tech.nativeSourceHandler) {
+        this.currentSource_ = source;
+      }
+      this.sourceHandler_ = sh.handleSource(source, this, this.options_);
+      this.one('dispose', this.disposeSourceHandler_);
+    };
+
+    /**
+     * Clean up any existing SourceHandlers and listeners when the Tech is disposed.
+     *
+     * @listens Tech#dispose
+     */
+    _Tech.prototype.disposeSourceHandler = function () {
+      // if we have a source and get another one
+      // then we are loading something new
+      // than clear all of our current tracks
+      if (this.currentSource_) {
+        this.clearTracks(['audio', 'video']);
+        this.currentSource_ = null;
+      }
+
+      // always clean up auto-text tracks
+      this.cleanupAutoTextTracks();
+      if (this.sourceHandler_) {
+        if (this.sourceHandler_.dispose) {
+          this.sourceHandler_.dispose();
+        }
+        this.sourceHandler_ = null;
+      }
+    };
+  };
+
+  // The base Tech class needs to be registered as a Component. It is the only
+  // Tech that can be registered as a Component.
+  Component$1.registerComponent('Tech', Tech);
+  Tech.registerTech('Tech', Tech);
+
+  /**
+   * A list of techs that should be added to techOrder on Players
+   *
+   * @private
+   */
+  Tech.defaultTechOrder_ = [];
+
+  /**
+   * @file middleware.js
+   * @module middleware
+   */
+  const middlewares = {};
+  const middlewareInstances = {};
+  const TERMINATOR = {};
+
+  /**
+   * A middleware object is a plain JavaScript object that has methods that
+   * match the {@link Tech} methods found in the lists of allowed
+   * {@link module:middleware.allowedGetters|getters},
+   * {@link module:middleware.allowedSetters|setters}, and
+   * {@link module:middleware.allowedMediators|mediators}.
+   *
+   * @typedef {Object} MiddlewareObject
+   */
+
+  /**
+   * A middleware factory function that should return a
+   * {@link module:middleware~MiddlewareObject|MiddlewareObject}.
+   *
+   * This factory will be called for each player when needed, with the player
+   * passed in as an argument.
+   *
+   * @callback MiddlewareFactory
+   * @param { import('../player').default } player
+   *        A Video.js player.
+   */
+
+  /**
+   * Define a middleware that the player should use by way of a factory function
+   * that returns a middleware object.
+   *
+   * @param  {string} type
+   *         The MIME type to match or `"*"` for all MIME types.
+   *
+   * @param  {MiddlewareFactory} middleware
+   *         A middleware factory function that will be executed for
+   *         matching types.
+   */
+  function use(type, middleware) {
+    middlewares[type] = middlewares[type] || [];
+    middlewares[type].push(middleware);
+  }
+
+  /**
+   * Asynchronously sets a source using middleware by recursing through any
+   * matching middlewares and calling `setSource` on each, passing along the
+   * previous returned value each time.
+   *
+   * @param  { import('../player').default } player
+   *         A {@link Player} instance.
+   *
+   * @param  {Tech~SourceObject} src
+   *         A source object.
+   *
+   * @param  {Function}
+   *         The next middleware to run.
+   */
+  function setSource(player, src, next) {
+    player.setTimeout(() => setSourceHelper(src, middlewares[src.type], next, player), 1);
+  }
+
+  /**
+   * When the tech is set, passes the tech to each middleware's `setTech` method.
+   *
+   * @param {Object[]} middleware
+   *        An array of middleware instances.
+   *
+   * @param { import('../tech/tech').default } tech
+   *        A Video.js tech.
+   */
+  function setTech(middleware, tech) {
+    middleware.forEach(mw => mw.setTech && mw.setTech(tech));
+  }
+
+  /**
+   * Calls a getter on the tech first, through each middleware
+   * from right to left to the player.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @return {*}
+   *         The final value from the tech after middleware has intercepted it.
+   */
+  function get(middleware, tech, method) {
+    return middleware.reduceRight(middlewareIterator(method), tech[method]());
+  }
+
+  /**
+   * Takes the argument given to the player and calls the setter method on each
+   * middleware from left to right to the tech.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @param  {*} arg
+   *         The value to set on the tech.
+   *
+   * @return {*}
+   *         The return value of the `method` of the `tech`.
+   */
+  function set(middleware, tech, method, arg) {
+    return tech[method](middleware.reduce(middlewareIterator(method), arg));
+  }
+
+  /**
+   * Takes the argument given to the player and calls the `call` version of the
+   * method on each middleware from left to right.
+   *
+   * Then, call the passed in method on the tech and return the result unchanged
+   * back to the player, through middleware, this time from right to left.
+   *
+   * @param  {Object[]} middleware
+   *         An array of middleware instances.
+   *
+   * @param  { import('../tech/tech').default } tech
+   *         The current tech.
+   *
+   * @param  {string} method
+   *         A method name.
+   *
+   * @param  {*} arg
+   *         The value to set on the tech.
+   *
+   * @return {*}
+   *         The return value of the `method` of the `tech`, regardless of the
+   *         return values of middlewares.
+   */
+  function mediate(middleware, tech, method, arg = null) {
+    const callMethod = 'call' + toTitleCase$1(method);
+    const middlewareValue = middleware.reduce(middlewareIterator(callMethod), arg);
+    const terminated = middlewareValue === TERMINATOR;
+    // deprecated. The `null` return value should instead return TERMINATOR to
+    // prevent confusion if a techs method actually returns null.
+    const returnValue = terminated ? null : tech[method](middlewareValue);
+    executeRight(middleware, method, returnValue, terminated);
+    return returnValue;
+  }
+
+  /**
+   * Enumeration of allowed getters where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedGetters = {
+    buffered: 1,
+    currentTime: 1,
+    duration: 1,
+    muted: 1,
+    played: 1,
+    paused: 1,
+    seekable: 1,
+    volume: 1,
+    ended: 1
+  };
+
+  /**
+   * Enumeration of allowed setters where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedSetters = {
+    setCurrentTime: 1,
+    setMuted: 1,
+    setVolume: 1
+  };
+
+  /**
+   * Enumeration of allowed mediators where the keys are method names.
+   *
+   * @type {Object}
+   */
+  const allowedMediators = {
+    play: 1,
+    pause: 1
+  };
+  function middlewareIterator(method) {
+    return (value, mw) => {
+      // if the previous middleware terminated, pass along the termination
+      if (value === TERMINATOR) {
+        return TERMINATOR;
+      }
+      if (mw[method]) {
+        return mw[method](value);
+      }
+      return value;
+    };
+  }
+  function executeRight(mws, method, value, terminated) {
+    for (let i = mws.length - 1; i >= 0; i--) {
+      const mw = mws[i];
+      if (mw[method]) {
+        mw[method](terminated, value);
+      }
+    }
+  }
+
+  /**
+   * Clear the middleware cache for a player.
+   *
+   * @param  { import('../player').default } player
+   *         A {@link Player} instance.
+   */
+  function clearCacheForPlayer(player) {
+    middlewareInstances[player.id()] = null;
+  }
+
+  /**
+   * {
+   *  [playerId]: [[mwFactory, mwInstance], ...]
+   * }
+   *
+   * @private
+   */
+  function getOrCreateFactory(player, mwFactory) {
+    const mws = middlewareInstances[player.id()];
+    let mw = null;
+    if (mws === undefined || mws === null) {
+      mw = mwFactory(player);
+      middlewareInstances[player.id()] = [[mwFactory, mw]];
+      return mw;
+    }
+    for (let i = 0; i < mws.length; i++) {
+      const [mwf, mwi] = mws[i];
+      if (mwf !== mwFactory) {
+        continue;
+      }
+      mw = mwi;
+    }
+    if (mw === null) {
+      mw = mwFactory(player);
+      mws.push([mwFactory, mw]);
+    }
+    return mw;
+  }
+  function setSourceHelper(src = {}, middleware = [], next, player, acc = [], lastRun = false) {
+    const [mwFactory, ...mwrest] = middleware;
+
+    // if mwFactory is a string, then we're at a fork in the road
+    if (typeof mwFactory === 'string') {
+      setSourceHelper(src, middlewares[mwFactory], next, player, acc, lastRun);
+
+      // if we have an mwFactory, call it with the player to get the mw,
+      // then call the mw's setSource method
+    } else if (mwFactory) {
+      const mw = getOrCreateFactory(player, mwFactory);
+
+      // if setSource isn't present, implicitly select this middleware
+      if (!mw.setSource) {
+        acc.push(mw);
+        return setSourceHelper(src, mwrest, next, player, acc, lastRun);
+      }
+      mw.setSource(Object.assign({}, src), function (err, _src) {
+        // something happened, try the next middleware on the current level
+        // make sure to use the old src
+        if (err) {
+          return setSourceHelper(src, mwrest, next, player, acc, lastRun);
+        }
+
+        // we've succeeded, now we need to go deeper
+        acc.push(mw);
+
+        // if it's the same type, continue down the current chain
+        // otherwise, we want to go down the new chain
+        setSourceHelper(_src, src.type === _src.type ? mwrest : middlewares[_src.type], next, player, acc, lastRun);
+      });
+    } else if (mwrest.length) {
+      setSourceHelper(src, mwrest, next, player, acc, lastRun);
+    } else if (lastRun) {
+      next(src, acc);
+    } else {
+      setSourceHelper(src, middlewares['*'], next, player, acc, true);
+    }
+  }
+
+  /**
+   * Mimetypes
+   *
+   * @see https://www.iana.org/assignments/media-types/media-types.xhtml
+   * @typedef Mimetypes~Kind
+   * @enum
+   */
+  const MimetypesKind = {
+    opus: 'video/ogg',
+    ogv: 'video/ogg',
+    mp4: 'video/mp4',
+    mov: 'video/mp4',
+    m4v: 'video/mp4',
+    mkv: 'video/x-matroska',
+    m4a: 'audio/mp4',
+    mp3: 'audio/mpeg',
+    aac: 'audio/aac',
+    caf: 'audio/x-caf',
+    flac: 'audio/flac',
+    oga: 'audio/ogg',
+    wav: 'audio/wav',
+    m3u8: 'application/x-mpegURL',
+    mpd: 'application/dash+xml',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    gif: 'image/gif',
+    png: 'image/png',
+    svg: 'image/svg+xml',
+    webp: 'image/webp'
+  };
+
+  /**
+   * Get the mimetype of a given src url if possible
+   *
+   * @param {string} src
+   *        The url to the src
+   *
+   * @return {string}
+   *         return the mimetype if it was known or empty string otherwise
+   */
+  const getMimetype = function (src = '') {
+    const ext = getFileExtension(src);
+    const mimetype = MimetypesKind[ext.toLowerCase()];
+    return mimetype || '';
+  };
+
+  /**
+   * Find the mime type of a given source string if possible. Uses the player
+   * source cache.
+   *
+   * @param { import('../player').default } player
+   *        The player object
+   *
+   * @param {string} src
+   *        The source string
+   *
+   * @return {string}
+   *         The type that was found
+   */
+  const findMimetype = (player, src) => {
+    if (!src) {
+      return '';
+    }
+
+    // 1. check for the type in the `source` cache
+    if (player.cache_.source.src === src && player.cache_.source.type) {
+      return player.cache_.source.type;
+    }
+
+    // 2. see if we have this source in our `currentSources` cache
+    const matchingSources = player.cache_.sources.filter(s => s.src === src);
+    if (matchingSources.length) {
+      return matchingSources[0].type;
+    }
+
+    // 3. look for the src url in source elements and use the type there
+    const sources = player.$$('source');
+    for (let i = 0; i < sources.length; i++) {
+      const s = sources[i];
+      if (s.type && s.src && s.src === src) {
+        return s.type;
+      }
+    }
+
+    // 4. finally fallback to our list of mime types based on src url extension
+    return getMimetype(src);
+  };
+
+  /**
+   * @module filter-source
+   */
+
+  /**
+   * Filter out single bad source objects or multiple source objects in an
+   * array. Also flattens nested source object arrays into a 1 dimensional
+   * array of source objects.
+   *
+   * @param {Tech~SourceObject|Tech~SourceObject[]} src
+   *        The src object to filter
+   *
+   * @return {Tech~SourceObject[]}
+   *         An array of sourceobjects containing only valid sources
+   *
+   * @private
+   */
+  const filterSource = function (src) {
+    // traverse array
+    if (Array.isArray(src)) {
+      let newsrc = [];
+      src.forEach(function (srcobj) {
+        srcobj = filterSource(srcobj);
+        if (Array.isArray(srcobj)) {
+          newsrc = newsrc.concat(srcobj);
+        } else if (isObject$1(srcobj)) {
+          newsrc.push(srcobj);
+        }
+      });
+      src = newsrc;
+    } else if (typeof src === 'string' && src.trim()) {
+      // convert string into object
+      src = [fixSource({
+        src
+      })];
+    } else if (isObject$1(src) && typeof src.src === 'string' && src.src && src.src.trim()) {
+      // src is already valid
+      src = [fixSource(src)];
+    } else {
+      // invalid source, turn it into an empty array
+      src = [];
+    }
+    return src;
+  };
+
+  /**
+   * Checks src mimetype, adding it when possible
+   *
+   * @param {Tech~SourceObject} src
+   *        The src object to check
+   * @return {Tech~SourceObject}
+   *        src Object with known type
+   */
+  function fixSource(src) {
+    if (!src.type) {
+      const mimetype = getMimetype(src.src);
+      if (mimetype) {
+        src.type = mimetype;
+      }
+    }
+    return src;
+  }
+
+  var icons = "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-play\">\n      <path d=\"M16 10v28l22-14z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-pause\">\n      <path d=\"M12 38h8V10h-8v28zm16-28v28h8V10h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-audio\">\n      <path d=\"M24 2C14.06 2 6 10.06 6 20v14c0 3.31 2.69 6 6 6h6V24h-8v-4c0-7.73 6.27-14 14-14s14 6.27 14 14v4h-8v16h6c3.31 0 6-2.69 6-6V20c0-9.94-8.06-18-18-18z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-captions\">\n      <path d=\"M38 8H10c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM22 22h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2zm14 0h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-subtitles\">\n      <path d=\"M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-fullscreen-enter\">\n      <path d=\"M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-fullscreen-exit\">\n      <path d=\"M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-play-circle\">\n      <path d=\"M20 33l12-9-12-9v18zm4-29C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-mute\">\n      <path d=\"M33 24c0-3.53-2.04-6.58-5-8.05v4.42l4.91 4.91c.06-.42.09-.85.09-1.28zm5 0c0 1.88-.41 3.65-1.08 5.28l3.03 3.03C41.25 29.82 42 27 42 24c0-8.56-5.99-15.72-14-17.54v4.13c5.78 1.72 10 7.07 10 13.41zM8.55 6L6 8.55 15.45 18H6v12h8l10 10V26.55l8.51 8.51c-1.34 1.03-2.85 1.86-4.51 2.36v4.13a17.94 17.94 0 0 0 7.37-3.62L39.45 42 42 39.45l-18-18L8.55 6zM24 8l-4.18 4.18L24 16.36V8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-low\">\n      <path d=\"M14 18v12h8l10 10V8L22 18h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-medium\">\n      <path d=\"M37 24c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zm-27-6v12h8l10 10V8L18 18h-8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-volume-high\">\n      <path d=\"M6 18v12h8l10 10V8L14 18H6zm27 6c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zM28 6.46v4.13c5.78 1.72 10 7.07 10 13.41s-4.22 11.69-10 13.41v4.13c8.01-1.82 14-8.97 14-17.54S36.01 8.28 28 6.46z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-spinner\">\n      <path d=\"M18.8 21l9.53-16.51C26.94 4.18 25.49 4 24 4c-4.8 0-9.19 1.69-12.64 4.51l7.33 12.69.11-.2zm24.28-3c-1.84-5.85-6.3-10.52-11.99-12.68L23.77 18h19.31zm.52 2H28.62l.58 1 9.53 16.5C41.99 33.94 44 29.21 44 24c0-1.37-.14-2.71-.4-4zm-26.53 4l-7.8-13.5C6.01 14.06 4 18.79 4 24c0 1.37.14 2.71.4 4h14.98l-2.31-4zM4.92 30c1.84 5.85 6.3 10.52 11.99 12.68L24.23 30H4.92zm22.54 0l-7.8 13.51c1.4.31 2.85.49 4.34.49 4.8 0 9.19-1.69 12.64-4.51L29.31 26.8 27.46 30z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 24 24\" id=\"vjs-icon-hd\">\n      <path d=\"M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-chapters\">\n      <path d=\"M6 26h4v-4H6v4zm0 8h4v-4H6v4zm0-16h4v-4H6v4zm8 8h28v-4H14v4zm0 8h28v-4H14v4zm0-20v4h28v-4H14z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 40 40\" id=\"vjs-icon-downloading\">\n      <path d=\"M18.208 36.875q-3.208-.292-5.979-1.729-2.771-1.438-4.812-3.729-2.042-2.292-3.188-5.229-1.146-2.938-1.146-6.23 0-6.583 4.334-11.416 4.333-4.834 10.833-5.5v3.166q-5.167.75-8.583 4.646Q6.25 14.75 6.25 19.958q0 5.209 3.396 9.104 3.396 3.896 8.562 4.646zM20 28.417L11.542 20l2.083-2.083 4.917 4.916v-11.25h2.916v11.25l4.875-4.916L28.417 20zm1.792 8.458v-3.167q1.833-.25 3.541-.958 1.709-.708 3.167-1.875l2.333 2.292q-1.958 1.583-4.25 2.541-2.291.959-4.791 1.167zm6.791-27.792q-1.541-1.125-3.25-1.854-1.708-.729-3.541-1.021V3.042q2.5.25 4.77 1.208 2.271.958 4.271 2.5zm4.584 21.584l-2.25-2.25q1.166-1.5 1.854-3.209.687-1.708.937-3.541h3.209q-.292 2.5-1.229 4.791-.938 2.292-2.521 4.209zm.541-12.417q-.291-1.833-.958-3.562-.667-1.73-1.833-3.188l2.375-2.208q1.541 1.916 2.458 4.208.917 2.292 1.167 4.75z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download\">\n      <path d=\"M10.8 40.55q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h26.35v-7.7h3.4v7.7q0 1.4-1 2.4t-2.4 1zM24 32.1L13.9 22.05l2.45-2.45 5.95 5.95V7.15h3.4v18.4l5.95-5.95 2.45 2.45z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download-done\">\n      <path d=\"M9.8 40.5v-3.45h28.4v3.45zm9.2-9.05L7.4 19.85l2.45-2.35L19 26.65l19.2-19.2 2.4 2.4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-file-download-off\">\n      <path d=\"M4.9 4.75L43.25 43.1 41 45.3l-4.75-4.75q-.05.05-.075.025-.025-.025-.075-.025H10.8q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h22.05l-7-7-1.85 1.8L13.9 21.9l1.85-1.85L2.7 7zm26.75 14.7l2.45 2.45-3.75 3.8-2.45-2.5zM25.7 7.15V21.1l-3.4-3.45V7.15z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-share\">\n      <path d=\"M36 32.17c-1.52 0-2.89.59-3.93 1.54L17.82 25.4c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31A5.83 5.83 0 1 0 36 32.17z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cog\">\n      <path d=\"M38.86 25.95c.08-.64.14-1.29.14-1.95s-.06-1.31-.14-1.95l4.23-3.31c.38-.3.49-.84.24-1.28l-4-6.93c-.25-.43-.77-.61-1.22-.43l-4.98 2.01c-1.03-.79-2.16-1.46-3.38-1.97L29 4.84c-.09-.47-.5-.84-1-.84h-8c-.5 0-.91.37-.99.84l-.75 5.3a14.8 14.8 0 0 0-3.38 1.97L9.9 10.1a1 1 0 0 0-1.22.43l-4 6.93c-.25.43-.14.97.24 1.28l4.22 3.31C9.06 22.69 9 23.34 9 24s.06 1.31.14 1.95l-4.22 3.31c-.38.3-.49.84-.24 1.28l4 6.93c.25.43.77.61 1.22.43l4.98-2.01c1.03.79 2.16 1.46 3.38 1.97l.75 5.3c.08.47.49.84.99.84h8c.5 0 .91-.37.99-.84l.75-5.3a14.8 14.8 0 0 0 3.38-1.97l4.98 2.01a1 1 0 0 0 1.22-.43l4-6.93c.25-.43.14-.97-.24-1.28l-4.22-3.31zM24 31c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-square\">\n      <path d=\"M36 8H12c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H12V12h24v24z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle\">\n      <circle cx=\"24\" cy=\"24\" r=\"20\"></circle>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle-outline\">\n      <path d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-circle-inner-circle\">\n      <path d=\"M24 4C12.97 4 4 12.97 4 24s8.97 20 20 20 20-8.97 20-20S35.03 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm6-16c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6 6 2.69 6 6z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cancel\">\n      <path d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-replay\">\n      <path d=\"M24 10V2L14 12l10 10v-8c6.63 0 12 5.37 12 12s-5.37 12-12 12-12-5.37-12-12H8c0 8.84 7.16 16 16 16s16-7.16 16-16-7.16-16-16-16z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-repeat\">\n      <path d=\"M14 14h20v6l8-8-8-8v6H10v12h4v-8zm20 20H14v-6l-8 8 8 8v-6h24V26h-4v8z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-5\">\n      <path d=\"M17.689 98l-8.697 8.696 8.697 8.697 2.486-2.485-4.32-4.319h1.302c4.93 0 9.071 1.722 12.424 5.165 3.352 3.443 5.029 7.638 5.029 12.584h3.55c0-2.958-.553-5.73-1.658-8.313-1.104-2.583-2.622-4.841-4.555-6.774-1.932-1.932-4.19-3.45-6.773-4.555-2.584-1.104-5.355-1.657-8.313-1.657H15.5l4.615-4.615zm-8.08 21.659v13.861h11.357v5.008H9.609V143h12.7c.834 0 1.55-.298 2.146-.894.596-.597.895-1.31.895-2.145v-7.781c0-.835-.299-1.55-.895-2.147a2.929 2.929 0 0 0-2.147-.894h-8.227v-5.096H25.35v-4.384z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-10\">\n      <path d=\"M42.315 125.63c0-4.997-1.694-9.235-5.08-12.713-3.388-3.479-7.571-5.218-12.552-5.218h-1.315l4.363 4.363-2.51 2.51-8.787-8.786L25.221 97l2.45 2.45-4.662 4.663h1.375c2.988 0 5.788.557 8.397 1.673 2.61 1.116 4.892 2.65 6.844 4.602 1.953 1.953 3.487 4.234 4.602 6.844 1.116 2.61 1.674 5.41 1.674 8.398zM8.183 142v-19.657H3.176V117.8h9.643V142zm13.63 0c-1.156 0-2.127-.393-2.912-1.178-.778-.778-1.168-1.746-1.168-2.902v-16.04c0-1.156.393-2.127 1.178-2.912.779-.779 1.746-1.168 2.902-1.168h7.696c1.156 0 2.126.392 2.911 1.177.779.78 1.168 1.747 1.168 2.903v16.04c0 1.156-.392 2.127-1.177 2.912-.779.779-1.746 1.168-2.902 1.168zm.556-4.636h6.583v-15.02H22.37z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-replay-30\">\n      <path d=\"M26.047 97l-8.733 8.732 8.733 8.733 2.496-2.494-4.336-4.338h1.307c4.95 0 9.108 1.73 12.474 5.187 3.367 3.458 5.051 7.668 5.051 12.635h3.565c0-2.97-.556-5.751-1.665-8.346-1.109-2.594-2.633-4.862-4.574-6.802-1.94-1.941-4.208-3.466-6.803-4.575-2.594-1.109-5.375-1.664-8.345-1.664H23.85l4.634-4.634zM2.555 117.531v4.688h10.297v5.25H5.873v4.687h6.979v5.156H2.555V142H13.36c1.061 0 1.95-.395 2.668-1.186.718-.79 1.076-1.772 1.076-2.94v-16.218c0-1.168-.358-2.149-1.076-2.94-.717-.79-1.607-1.185-2.668-1.185zm22.482.14c-1.149 0-2.11.39-2.885 1.165-.78.78-1.172 1.744-1.172 2.893v15.943c0 1.149.388 2.11 1.163 2.885.78.78 1.745 1.172 2.894 1.172h7.649c1.148 0 2.11-.388 2.884-1.163.78-.78 1.17-1.745 1.17-2.894v-15.943c0-1.15-.386-2.111-1.16-2.885-.78-.78-1.746-1.172-2.894-1.172zm.553 4.518h6.545v14.93H25.59z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-5\">\n      <path d=\"M29.508 97l-2.431 2.43 4.625 4.625h-1.364c-2.965 0-5.742.554-8.332 1.66-2.589 1.107-4.851 2.629-6.788 4.566-1.937 1.937-3.458 4.2-4.565 6.788-1.107 2.59-1.66 5.367-1.66 8.331h3.557c0-4.957 1.68-9.16 5.04-12.611 3.36-3.45 7.51-5.177 12.451-5.177h1.304l-4.326 4.33 2.49 2.49 8.715-8.716zm-9.783 21.61v13.89h11.382v5.018H19.725V142h12.727a2.93 2.93 0 0 0 2.15-.896 2.93 2.93 0 0 0 .896-2.15v-7.798c0-.837-.299-1.554-.896-2.152a2.93 2.93 0 0 0-2.15-.896h-8.245V123h11.29v-4.392z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-10\">\n      <path d=\"M23.119 97l-2.386 2.383 4.538 4.538h-1.339c-2.908 0-5.633.543-8.173 1.63-2.54 1.085-4.76 2.577-6.66 4.478-1.9 1.9-3.392 4.12-4.478 6.66-1.085 2.54-1.629 5.264-1.629 8.172h3.49c0-4.863 1.648-8.986 4.944-12.372 3.297-3.385 7.368-5.078 12.216-5.078h1.279l-4.245 4.247 2.443 2.442 8.55-8.55zm-9.52 21.45v4.42h4.871V142h4.513v-23.55zm18.136 0c-1.125 0-2.066.377-2.824 1.135-.764.764-1.148 1.709-1.148 2.834v15.612c0 1.124.38 2.066 1.139 2.824.764.764 1.708 1.145 2.833 1.145h7.489c1.125 0 2.066-.378 2.824-1.136.764-.764 1.145-1.709 1.145-2.833v-15.612c0-1.125-.378-2.067-1.136-2.825-.764-.764-1.708-1.145-2.833-1.145zm.54 4.42h6.408v14.617h-6.407z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 96 48 48\" id=\"vjs-icon-forward-30\">\n      <path d=\"M25.549 97l-2.437 2.434 4.634 4.635H26.38c-2.97 0-5.753.555-8.347 1.664-2.594 1.109-4.861 2.633-6.802 4.574-1.94 1.94-3.465 4.207-4.574 6.802-1.109 2.594-1.664 5.377-1.664 8.347h3.565c0-4.967 1.683-9.178 5.05-12.636 3.366-3.458 7.525-5.187 12.475-5.187h1.307l-4.335 4.338 2.495 2.494 8.732-8.732zm-11.553 20.53v4.689h10.297v5.249h-6.978v4.688h6.978v5.156H13.996V142h10.808c1.06 0 1.948-.395 2.666-1.186.718-.79 1.077-1.771 1.077-2.94v-16.217c0-1.169-.36-2.15-1.077-2.94-.718-.79-1.605-1.186-2.666-1.186zm21.174.168c-1.149 0-2.11.389-2.884 1.163-.78.78-1.172 1.745-1.172 2.894v15.942c0 1.15.388 2.11 1.162 2.885.78.78 1.745 1.17 2.894 1.17h7.649c1.149 0 2.11-.386 2.885-1.16.78-.78 1.17-1.746 1.17-2.895v-15.942c0-1.15-.387-2.11-1.161-2.885-.78-.78-1.745-1.172-2.894-1.172zm.552 4.516h6.542v14.931h-6.542z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 512 512\" id=\"vjs-icon-audio-description\">\n      <g fill-rule=\"evenodd\"><path d=\"M227.29 381.351V162.993c50.38-1.017 89.108-3.028 117.631 17.126 27.374 19.342 48.734 56.965 44.89 105.325-4.067 51.155-41.335 94.139-89.776 98.475-24.085 2.155-71.972 0-71.972 0s-.84-1.352-.773-2.568m48.755-54.804c31.43 1.26 53.208-16.633 56.495-45.386 4.403-38.51-21.188-63.552-58.041-60.796v103.612c-.036 1.466.575 2.22 1.546 2.57\"></path><path d=\"M383.78 381.328c13.336 3.71 17.387-11.06 23.215-21.408 12.722-22.571 22.294-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.226 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894\"></path><path d=\"M425.154 381.328c13.336 3.71 17.384-11.061 23.215-21.408 12.721-22.571 22.291-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.511c-.586 3.874 2.226 7.315 3.866 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894\"></path><path d=\"M466.26 381.328c13.337 3.71 17.385-11.061 23.216-21.408 12.722-22.571 22.292-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.225 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894M4.477 383.005H72.58l18.573-28.484 64.169-.135s.065 19.413.065 28.62h48.756V160.307h-58.816c-5.653 9.537-140.85 222.697-140.85 222.697zm152.667-145.282v71.158l-40.453-.27 40.453-70.888z\"></path></g>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-next-item\">\n      <path d=\"M12 36l17-12-17-12v24zm20-24v24h4V12h-4z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-previous-item\">\n      <path d=\"M12 12h4v24h-4zm7 12l17 12V12z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-shuffle\">\n      <path d=\"M21.17 18.34L10.83 8 8 10.83l10.34 10.34 2.83-2.83zM29 8l4.09 4.09L8 37.17 10.83 40l25.09-25.09L40 19V8H29zm.66 18.83l-2.83 2.83 6.26 6.26L29 40h11V29l-4.09 4.09-6.25-6.26z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-cast\">\n      <path d=\"M42 6H6c-2.21 0-4 1.79-4 4v6h4v-6h36v28H28v4h14c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4zM2 36v6h6c0-3.31-2.69-6-6-6zm0-8v4c5.52 0 10 4.48 10 10h4c0-7.73-6.27-14-14-14zm0-8v4c9.94 0 18 8.06 18 18h4c0-12.15-9.85-22-22-22z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 48 48\" id=\"vjs-icon-picture-in-picture-enter\">\n      <path d=\"M38 22H22v11.99h16V22zm8 16V9.96C46 7.76 44.2 6 42 6H6C3.8 6 2 7.76 2 9.96V38c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4zm-4 .04H6V9.94h36v28.1z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 22 18\" id=\"vjs-icon-picture-in-picture-exit\">\n      <path d=\"M18 4H4v10h14V4zm4 12V1.98C22 .88 21.1 0 20 0H2C.9 0 0 .88 0 1.98V16c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H2V1.97h18v14.05z\"></path>\n      <path fill=\"none\" d=\"M-1-3h24v24H-1z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-facebook\">\n      <path d=\"M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759H734V905H479V609h255V391q0-186 104-288.5T1115 0q147 0 228 12z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-linkedin\">\n      <path d=\"M477 625v991H147V625h330zm21-306q1 73-50.5 122T312 490h-2q-82 0-132-49t-50-122q0-74 51.5-122.5T314 148t133 48.5T498 319zm1166 729v568h-329v-530q0-105-40.5-164.5T1168 862q-63 0-105.5 34.5T999 982q-11 30-11 81v553H659q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5T1285 602q171 0 275 113.5t104 332.5z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-twitter\">\n      <path d=\"M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5T1369.5 1125 1185 1335.5t-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5T285 1033q33 5 61 5 43 0 85-11-112-23-185.5-111.5T172 710v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5T884 653q-8-38-8-74 0-134 94.5-228.5T1199 256q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-tumblr\">\n      <path d=\"M1328 1329l80 237q-23 35-111 66t-177 32q-104 2-190.5-26T787 1564t-95-106-55.5-120-16.5-118V676H452V461q72-26 129-69.5t91-90 58-102 34-99T779 12q1-5 4.5-8.5T791 0h244v424h333v252h-334v518q0 30 6.5 56t22.5 52.5 49.5 41.5 81.5 14q78-2 134-29z\"></path>\n    </symbol>\n    <symbol viewBox=\"0 0 1792 1792\" id=\"vjs-icon-pinterest\">\n      <path d=\"M1664 896q0 209-103 385.5T1281.5 1561 896 1664q-111 0-218-32 59-93 78-164 9-34 54-211 20 39 73 67.5t114 28.5q121 0 216-68.5t147-188.5 52-270q0-114-59.5-214T1180 449t-255-63q-105 0-196 29t-154.5 77-109 110.5-67 129.5T377 866q0 104 40 183t117 111q30 12 38-20 2-7 8-31t8-30q6-23-11-43-51-61-51-151 0-151 104.5-259.5T904 517q151 0 235.5 82t84.5 213q0 170-68.5 289T980 1220q-61 0-98-43.5T859 1072q8-35 26.5-93.5t30-103T927 800q0-50-27-83t-77-33q-62 0-105 57t-43 142q0 73 25 122l-99 418q-17 70-13 177-206-91-333-281T128 896q0-209 103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z\"></path>\n    </symbol>\n  </defs>\n</svg>";
+
+  /**
+   * @file loader.js
+   */
+
+  /**
+   * The `MediaLoader` is the `Component` that decides which playback technology to load
+   * when a player is initialized.
+   *
+   * @extends Component
+   */
+  class MediaLoader extends Component$1 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should attach to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function that is run when this component is ready.
+     */
+    constructor(player, options, ready) {
+      // MediaLoader has no element
+      const options_ = merge$2({
+        createEl: false
+      }, options);
+      super(player, options_, ready);
+
+      // If there are no sources when the player is initialized,
+      // load the first supported playback technology.
+
+      if (!options.playerOptions.sources || options.playerOptions.sources.length === 0) {
+        for (let i = 0, j = options.playerOptions.techOrder; i < j.length; i++) {
+          const techName = toTitleCase$1(j[i]);
+          let tech = Tech.getTech(techName);
+
+          // Support old behavior of techs being registered as components.
+          // Remove once that deprecated behavior is removed.
+          if (!techName) {
+            tech = Component$1.getComponent(techName);
+          }
+
+          // Check if the browser supports this technology
+          if (tech && tech.isSupported()) {
+            player.loadTech_(techName);
+            break;
+          }
+        }
+      } else {
+        // Loop through playback technologies (e.g. HTML5) and check for support.
+        // Then load the best source.
+        // A few assumptions here:
+        //   All playback technologies respect preload false.
+        player.src(options.playerOptions.sources);
+      }
+    }
+  }
+  Component$1.registerComponent('MediaLoader', MediaLoader);
+
+  /**
+   * @file clickable-component.js
+   */
+
+  /**
+   * Component which is clickable or keyboard actionable, but is not a
+   * native HTML button.
+   *
+   * @extends Component
+   */
+  class ClickableComponent extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  { import('./player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of component options.
+     *
+     * @param  {function} [options.clickHandler]
+     *         The function to call when the button is clicked / activated
+     *
+     * @param  {string} [options.controlText]
+     *         The text to set on the button
+     *
+     * @param  {string} [options.className]
+     *         A class or space separated list of classes to add the component
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      if (this.options_.controlText) {
+        this.controlText(this.options_.controlText);
+      }
+      this.handleMouseOver_ = e => this.handleMouseOver(e);
+      this.handleMouseOut_ = e => this.handleMouseOut(e);
+      this.handleClick_ = e => this.handleClick(e);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.emitTapEvents();
+      this.enable();
+    }
+
+    /**
+     * Create the `ClickableComponent`s DOM element.
+     *
+     * @param {string} [tag=div]
+     *        The element's node type.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element.
+     *
+     * @param {Object} [attributes={}]
+     *        An object of attributes that should be set on the element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tag = 'div', props = {}, attributes = {}) {
+      props = Object.assign({
+        className: this.buildCSSClass(),
+        tabIndex: 0
+      }, props);
+      if (tag === 'button') {
+        log$1.error(`Creating a ClickableComponent with an HTML element of ${tag} is not supported; use a Button instead.`);
+      }
+
+      // Add ARIA attributes for clickable element which is not a native HTML button
+      attributes = Object.assign({
+        role: 'button'
+      }, attributes);
+      this.tabIndex_ = props.tabIndex;
+      const el = createEl(tag, props, attributes);
+      if (!this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+      }
+      this.createControlTextEl(el);
+      return el;
+    }
+    dispose() {
+      // remove controlTextEl_ on dispose
+      this.controlTextEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Create a control text element on this `ClickableComponent`
+     *
+     * @param {Element} [el]
+     *        Parent element for the control text.
+     *
+     * @return {Element}
+     *         The control text element that gets created.
+     */
+    createControlTextEl(el) {
+      this.controlTextEl_ = createEl('span', {
+        className: 'vjs-control-text'
+      }, {
+        // let the screen reader user know that the text of the element may change
+        'aria-live': 'polite'
+      });
+      if (el) {
+        el.appendChild(this.controlTextEl_);
+      }
+      this.controlText(this.controlText_, el);
+      return this.controlTextEl_;
+    }
+
+    /**
+     * Get or set the localize text to use for the controls on the `ClickableComponent`.
+     *
+     * @param {string} [text]
+     *        Control text for element.
+     *
+     * @param {Element} [el=this.el()]
+     *        Element to set the title on.
+     *
+     * @return {string}
+     *         - The control text when getting
+     */
+    controlText(text, el = this.el()) {
+      if (text === undefined) {
+        return this.controlText_ || 'Need Text';
+      }
+      const localizedText = this.localize(text);
+
+      /** @protected */
+      this.controlText_ = text;
+      textContent(this.controlTextEl_, localizedText);
+      if (!this.nonIconControl && !this.player_.options_.noUITitleAttributes) {
+        // Set title attribute if only an icon is shown
+        el.setAttribute('title', localizedText);
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-control vjs-button ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Enable this `ClickableComponent`
+     */
+    enable() {
+      if (!this.enabled_) {
+        this.enabled_ = true;
+        this.removeClass('vjs-disabled');
+        this.el_.setAttribute('aria-disabled', 'false');
+        if (typeof this.tabIndex_ !== 'undefined') {
+          this.el_.setAttribute('tabIndex', this.tabIndex_);
+        }
+        this.on(['tap', 'click'], this.handleClick_);
+        this.on('keydown', this.handleKeyDown_);
+      }
+    }
+
+    /**
+     * Disable this `ClickableComponent`
+     */
+    disable() {
+      this.enabled_ = false;
+      this.addClass('vjs-disabled');
+      this.el_.setAttribute('aria-disabled', 'true');
+      if (typeof this.tabIndex_ !== 'undefined') {
+        this.el_.removeAttribute('tabIndex');
+      }
+      this.off('mouseover', this.handleMouseOver_);
+      this.off('mouseout', this.handleMouseOut_);
+      this.off(['tap', 'click'], this.handleClick_);
+      this.off('keydown', this.handleKeyDown_);
+    }
+
+    /**
+     * Handles language change in ClickableComponent for the player in components
+     *
+     *
+     */
+    handleLanguagechange() {
+      this.controlText(this.controlText_);
+    }
+
+    /**
+     * Event handler that is called when a `ClickableComponent` receives a
+     * `click` or `tap` event.
+     *
+     * @param {Event} event
+     *        The `tap` or `click` event that caused this function to be called.
+     *
+     * @listens tap
+     * @listens click
+     * @abstract
+     */
+    handleClick(event) {
+      if (this.options_.clickHandler) {
+        this.options_.clickHandler.call(this, arguments);
+      }
+    }
+
+    /**
+     * Event handler that is called when a `ClickableComponent` receives a
+     * `keydown` event.
+     *
+     * By default, if the key is Space or Enter, it will trigger a `click` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Support Space or Enter key operation to fire a click event. Also,
+      // prevent the event from propagating through the DOM and triggering
+      // Player hotkeys.
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.trigger('click');
+      } else {
+        // Pass keypress handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+  }
+  Component$1.registerComponent('ClickableComponent', ClickableComponent);
+
+  /**
+   * @file poster-image.js
+   */
+
+  /**
+   * A `ClickableComponent` that handles showing the poster image for the player.
+   *
+   * @extends ClickableComponent
+   */
+  class PosterImage extends ClickableComponent {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should attach to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update();
+      this.update_ = e => this.update(e);
+      player.on('posterchange', this.update_);
+    }
+
+    /**
+     * Clean up and dispose of the `PosterImage`.
+     */
+    dispose() {
+      this.player().off('posterchange', this.update_);
+      super.dispose();
+    }
+
+    /**
+     * Create the `PosterImage`s DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      // The el is an empty div to keep position in the DOM
+      // A picture and img el will be inserted when a source is set
+      return createEl('div', {
+        className: 'vjs-poster'
+      });
+    }
+
+    /**
+     * Get or set the `PosterImage`'s crossOrigin option.
+     *
+     * @param {string|null} [value]
+     *        The value to set the crossOrigin to. If an argument is
+     *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+     *
+     * @return {string|null}
+     *         - The current crossOrigin value of the `Player` when getting.
+     *         - undefined when setting
+     */
+    crossOrigin(value) {
+      // `null` can be set to unset a value
+      if (typeof value === 'undefined') {
+        if (this.$('img')) {
+          // If the poster's element exists, give its value
+          return this.$('img').crossOrigin;
+        } else if (this.player_.tech_ && this.player_.tech_.isReady_) {
+          // If not but the tech is ready, query the tech
+          return this.player_.crossOrigin();
+        }
+        // Otherwise check options as the  poster is usually set before the state of crossorigin
+        // can be retrieved by the getter
+        return this.player_.options_.crossOrigin || this.player_.options_.crossorigin || null;
+      }
+      if (value !== null && value !== 'anonymous' && value !== 'use-credentials') {
+        this.player_.log.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${value}"`);
+        return;
+      }
+      if (this.$('img')) {
+        this.$('img').crossOrigin = value;
+      }
+      return;
+    }
+
+    /**
+     * An {@link EventTarget~EventListener} for {@link Player#posterchange} events.
+     *
+     * @listens Player#posterchange
+     *
+     * @param {Event} [event]
+     *        The `Player#posterchange` event that triggered this function.
+     */
+    update(event) {
+      const url = this.player().poster();
+      this.setSrc(url);
+
+      // If there's no poster source we should display:none on this component
+      // so it's not still clickable or right-clickable
+      if (url) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+
+    /**
+     * Set the source of the `PosterImage` depending on the display method. (Re)creates
+     * the inner picture and img elementss when needed.
+     *
+     * @param {string} [url]
+     *        The URL to the source for the `PosterImage`. If not specified or falsy,
+     *        any source and ant inner picture/img are removed.
+     */
+    setSrc(url) {
+      if (!url) {
+        this.el_.textContent = '';
+        return;
+      }
+      if (!this.$('img')) {
+        this.el_.appendChild(createEl('picture', {
+          className: 'vjs-poster',
+          // Don't want poster to be tabbable.
+          tabIndex: -1
+        }, {}, createEl('img', {
+          loading: 'lazy',
+          crossOrigin: this.crossOrigin()
+        }, {
+          alt: ''
+        })));
+      }
+      this.$('img').src = url;
+    }
+
+    /**
+     * An {@link EventTarget~EventListener} for clicks on the `PosterImage`. See
+     * {@link ClickableComponent#handleClick} for instances where this will be triggered.
+     *
+     * @listens tap
+     * @listens click
+     * @listens keydown
+     *
+     * @param {Event} event
+     +        The `click`, `tap` or `keydown` event that caused this function to be called.
+     */
+    handleClick(event) {
+      // We don't want a click to trigger playback when controls are disabled
+      if (!this.player_.controls()) {
+        return;
+      }
+      if (this.player_.tech(true)) {
+        this.player_.tech(true).focus();
+      }
+      if (this.player_.paused()) {
+        silencePromise(this.player_.play());
+      } else {
+        this.player_.pause();
+      }
+    }
+  }
+
+  /**
+   * Get or set the `PosterImage`'s crossorigin option. For the HTML5 player, this
+   * sets the `crossOrigin` property on the `<img>` tag to control the CORS
+   * behavior.
+   *
+   * @param {string|null} [value]
+   *        The value to set the `PosterImages`'s crossorigin to. If an argument is
+   *        given, must be one of `anonymous` or `use-credentials`.
+   *
+   * @return {string|null|undefined}
+   *         - The current crossorigin value of the `Player` when getting.
+   *         - undefined when setting
+   */
+  PosterImage.prototype.crossorigin = PosterImage.prototype.crossOrigin;
+  Component$1.registerComponent('PosterImage', PosterImage);
+
+  /**
+   * @file text-track-display.js
+   */
+  const darkGray = '#222';
+  const lightGray = '#ccc';
+  const fontMap = {
+    monospace: 'monospace',
+    sansSerif: 'sans-serif',
+    serif: 'serif',
+    monospaceSansSerif: '"Andale Mono", "Lucida Console", monospace',
+    monospaceSerif: '"Courier New", monospace',
+    proportionalSansSerif: 'sans-serif',
+    proportionalSerif: 'serif',
+    casual: '"Comic Sans MS", Impact, fantasy',
+    script: '"Monotype Corsiva", cursive',
+    smallcaps: '"Andale Mono", "Lucida Console", monospace, sans-serif'
+  };
+
+  /**
+   * Construct an rgba color from a given hex color code.
+   *
+   * @param {number} color
+   *        Hex number for color, like #f0e or #f604e2.
+   *
+   * @param {number} opacity
+   *        Value for opacity, 0.0 - 1.0.
+   *
+   * @return {string}
+   *         The rgba color that was created, like 'rgba(255, 0, 0, 0.3)'.
+   */
+  function constructColor(color, opacity) {
+    let hex;
+    if (color.length === 4) {
+      // color looks like "#f0e"
+      hex = color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+    } else if (color.length === 7) {
+      // color looks like "#f604e2"
+      hex = color.slice(1);
+    } else {
+      throw new Error('Invalid color code provided, ' + color + '; must be formatted as e.g. #f0e or #f604e2.');
+    }
+    return 'rgba(' + parseInt(hex.slice(0, 2), 16) + ',' + parseInt(hex.slice(2, 4), 16) + ',' + parseInt(hex.slice(4, 6), 16) + ',' + opacity + ')';
+  }
+
+  /**
+   * Try to update the style of a DOM element. Some style changes will throw an error,
+   * particularly in IE8. Those should be noops.
+   *
+   * @param {Element} el
+   *        The DOM element to be styled.
+   *
+   * @param {string} style
+   *        The CSS property on the element that should be styled.
+   *
+   * @param {string} rule
+   *        The style rule that should be applied to the property.
+   *
+   * @private
+   */
+  function tryUpdateStyle(el, style, rule) {
+    try {
+      el.style[style] = rule;
+    } catch (e) {
+      // Satisfies linter.
+      return;
+    }
+  }
+
+  /**
+   * Converts the CSS top/right/bottom/left property numeric value to string in pixels.
+   *
+   * @param {number} position
+   *        The CSS top/right/bottom/left property value.
+   *
+   * @return {string}
+   *          The CSS property value that was created, like '10px'.
+   *
+   * @private
+   */
+  function getCSSPositionValue(position) {
+    return position ? `${position}px` : '';
+  }
+
+  /**
+   * The component for displaying text track cues.
+   *
+   * @extends Component
+   */
+  class TextTrackDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when `TextTrackDisplay` is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      const updateDisplayTextHandler = e => this.updateDisplay(e);
+      const updateDisplayHandler = e => {
+        this.updateDisplayOverlay();
+        this.updateDisplay(e);
+      };
+      player.on('loadstart', e => this.toggleDisplay(e));
+      player.on('texttrackchange', updateDisplayTextHandler);
+      player.on('loadedmetadata', e => {
+        this.updateDisplayOverlay();
+        this.preselectTrack(e);
+      });
+
+      // This used to be called during player init, but was causing an error
+      // if a track should show by default and the display hadn't loaded yet.
+      // Should probably be moved to an external track loader when we support
+      // tracks that don't need a display.
+      player.ready(bind_(this, function () {
+        if (player.tech_ && player.tech_.featuresNativeTextTracks) {
+          this.hide();
+          return;
+        }
+        player.on('fullscreenchange', updateDisplayHandler);
+        player.on('playerresize', updateDisplayHandler);
+        const screenOrientation = window.screen.orientation || window;
+        const changeOrientationEvent = window.screen.orientation ? 'change' : 'orientationchange';
+        screenOrientation.addEventListener(changeOrientationEvent, updateDisplayHandler);
+        player.on('dispose', () => screenOrientation.removeEventListener(changeOrientationEvent, updateDisplayHandler));
+        const tracks = this.options_.playerOptions.tracks || [];
+        for (let i = 0; i < tracks.length; i++) {
+          this.player_.addRemoteTextTrack(tracks[i], true);
+        }
+        this.preselectTrack();
+      }));
+    }
+
+    /**
+    * Preselect a track following this precedence:
+    * - matches the previously selected {@link TextTrack}'s language and kind
+    * - matches the previously selected {@link TextTrack}'s language only
+    * - is the first default captions track
+    * - is the first default descriptions track
+    *
+    * @listens Player#loadstart
+    */
+    preselectTrack() {
+      const modes = {
+        captions: 1,
+        subtitles: 1
+      };
+      const trackList = this.player_.textTracks();
+      const userPref = this.player_.cache_.selectedLanguage;
+      let firstDesc;
+      let firstCaptions;
+      let preferredTrack;
+      for (let i = 0; i < trackList.length; i++) {
+        const track = trackList[i];
+        if (userPref && userPref.enabled && userPref.language && userPref.language === track.language && track.kind in modes) {
+          // Always choose the track that matches both language and kind
+          if (track.kind === userPref.kind) {
+            preferredTrack = track;
+            // or choose the first track that matches language
+          } else if (!preferredTrack) {
+            preferredTrack = track;
+          }
+
+          // clear everything if offTextTrackMenuItem was clicked
+        } else if (userPref && !userPref.enabled) {
+          preferredTrack = null;
+          firstDesc = null;
+          firstCaptions = null;
+        } else if (track.default) {
+          if (track.kind === 'descriptions' && !firstDesc) {
+            firstDesc = track;
+          } else if (track.kind in modes && !firstCaptions) {
+            firstCaptions = track;
+          }
+        }
+      }
+
+      // The preferredTrack matches the user preference and takes
+      // precedence over all the other tracks.
+      // So, display the preferredTrack before the first default track
+      // and the subtitles/captions track before the descriptions track
+      if (preferredTrack) {
+        preferredTrack.mode = 'showing';
+      } else if (firstCaptions) {
+        firstCaptions.mode = 'showing';
+      } else if (firstDesc) {
+        firstDesc.mode = 'showing';
+      }
+    }
+
+    /**
+     * Turn display of {@link TextTrack}'s from the current state into the other state.
+     * There are only two states:
+     * - 'shown'
+     * - 'hidden'
+     *
+     * @listens Player#loadstart
+     */
+    toggleDisplay() {
+      if (this.player_.tech_ && this.player_.tech_.featuresNativeTextTracks) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+
+    /**
+     * Create the {@link Component}'s DOM element.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-text-track-display'
+      }, {
+        'translate': 'yes',
+        'aria-live': 'off',
+        'aria-atomic': 'true'
+      });
+    }
+
+    /**
+     * Clear all displayed {@link TextTrack}s.
+     */
+    clearDisplay() {
+      if (typeof window.WebVTT === 'function') {
+        window.WebVTT.processCues(window, [], this.el_);
+      }
+    }
+
+    /**
+     * Update the displayed TextTrack when a either a {@link Player#texttrackchange} or
+     * a {@link Player#fullscreenchange} is fired.
+     *
+     * @listens Player#texttrackchange
+     * @listens Player#fullscreenchange
+     */
+    updateDisplay() {
+      const tracks = this.player_.textTracks();
+      const allowMultipleShowingTracks = this.options_.allowMultipleShowingTracks;
+      this.clearDisplay();
+      if (allowMultipleShowingTracks) {
+        const showingTracks = [];
+        for (let i = 0; i < tracks.length; ++i) {
+          const track = tracks[i];
+          if (track.mode !== 'showing') {
+            continue;
+          }
+          showingTracks.push(track);
+        }
+        this.updateForTrack(showingTracks);
+        return;
+      }
+
+      //  Track display prioritization model: if multiple tracks are 'showing',
+      //  display the first 'subtitles' or 'captions' track which is 'showing',
+      //  otherwise display the first 'descriptions' track which is 'showing'
+
+      let descriptionsTrack = null;
+      let captionsSubtitlesTrack = null;
+      let i = tracks.length;
+      while (i--) {
+        const track = tracks[i];
+        if (track.mode === 'showing') {
+          if (track.kind === 'descriptions') {
+            descriptionsTrack = track;
+          } else {
+            captionsSubtitlesTrack = track;
+          }
+        }
+      }
+      if (captionsSubtitlesTrack) {
+        if (this.getAttribute('aria-live') !== 'off') {
+          this.setAttribute('aria-live', 'off');
+        }
+        this.updateForTrack(captionsSubtitlesTrack);
+      } else if (descriptionsTrack) {
+        if (this.getAttribute('aria-live') !== 'assertive') {
+          this.setAttribute('aria-live', 'assertive');
+        }
+        this.updateForTrack(descriptionsTrack);
+      }
+    }
+
+    /**
+     * Updates the displayed TextTrack to be sure it overlays the video when a either
+     * a {@link Player#texttrackchange} or a {@link Player#fullscreenchange} is fired.
+     */
+    updateDisplayOverlay() {
+      // inset-inline and inset-block are not supprted on old chrome, but these are
+      // only likely to be used on TV devices
+      if (!this.player_.videoHeight() || !window.CSS.supports('inset-inline: 10px')) {
+        return;
+      }
+      const playerWidth = this.player_.currentWidth();
+      const playerHeight = this.player_.currentHeight();
+      const playerAspectRatio = playerWidth / playerHeight;
+      const videoAspectRatio = this.player_.videoWidth() / this.player_.videoHeight();
+      let insetInlineMatch = 0;
+      let insetBlockMatch = 0;
+      if (Math.abs(playerAspectRatio - videoAspectRatio) > 0.1) {
+        if (playerAspectRatio > videoAspectRatio) {
+          insetInlineMatch = Math.round((playerWidth - playerHeight * videoAspectRatio) / 2);
+        } else {
+          insetBlockMatch = Math.round((playerHeight - playerWidth / videoAspectRatio) / 2);
+        }
+      }
+      tryUpdateStyle(this.el_, 'insetInline', getCSSPositionValue(insetInlineMatch));
+      tryUpdateStyle(this.el_, 'insetBlock', getCSSPositionValue(insetBlockMatch));
+    }
+
+    /**
+     * Style {@Link TextTrack} activeCues according to {@Link TextTrackSettings}.
+     *
+     * @param {TextTrack} track
+     *        Text track object containing active cues to style.
+     */
+    updateDisplayState(track) {
+      const overrides = this.player_.textTrackSettings.getValues();
+      const cues = track.activeCues;
+      let i = cues.length;
+      while (i--) {
+        const cue = cues[i];
+        if (!cue) {
+          continue;
+        }
+        const cueDiv = cue.displayState;
+        if (overrides.color) {
+          cueDiv.firstChild.style.color = overrides.color;
+        }
+        if (overrides.textOpacity) {
+          tryUpdateStyle(cueDiv.firstChild, 'color', constructColor(overrides.color || '#fff', overrides.textOpacity));
+        }
+        if (overrides.backgroundColor) {
+          cueDiv.firstChild.style.backgroundColor = overrides.backgroundColor;
+        }
+        if (overrides.backgroundOpacity) {
+          tryUpdateStyle(cueDiv.firstChild, 'backgroundColor', constructColor(overrides.backgroundColor || '#000', overrides.backgroundOpacity));
+        }
+        if (overrides.windowColor) {
+          if (overrides.windowOpacity) {
+            tryUpdateStyle(cueDiv, 'backgroundColor', constructColor(overrides.windowColor, overrides.windowOpacity));
+          } else {
+            cueDiv.style.backgroundColor = overrides.windowColor;
+          }
+        }
+        if (overrides.edgeStyle) {
+          if (overrides.edgeStyle === 'dropshadow') {
+            cueDiv.firstChild.style.textShadow = `2px 2px 3px ${darkGray}, 2px 2px 4px ${darkGray}, 2px 2px 5px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'raised') {
+            cueDiv.firstChild.style.textShadow = `1px 1px ${darkGray}, 2px 2px ${darkGray}, 3px 3px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'depressed') {
+            cueDiv.firstChild.style.textShadow = `1px 1px ${lightGray}, 0 1px ${lightGray}, -1px -1px ${darkGray}, 0 -1px ${darkGray}`;
+          } else if (overrides.edgeStyle === 'uniform') {
+            cueDiv.firstChild.style.textShadow = `0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}`;
+          }
+        }
+        if (overrides.fontPercent && overrides.fontPercent !== 1) {
+          const fontSize = window.parseFloat(cueDiv.style.fontSize);
+          cueDiv.style.fontSize = fontSize * overrides.fontPercent + 'px';
+          cueDiv.style.height = 'auto';
+          cueDiv.style.top = 'auto';
+        }
+        if (overrides.fontFamily && overrides.fontFamily !== 'default') {
+          if (overrides.fontFamily === 'small-caps') {
+            cueDiv.firstChild.style.fontVariant = 'small-caps';
+          } else {
+            cueDiv.firstChild.style.fontFamily = fontMap[overrides.fontFamily];
+          }
+        }
+      }
+    }
+
+    /**
+     * Add an {@link TextTrack} to to the {@link Tech}s {@link TextTrackList}.
+     *
+     * @param {TextTrack|TextTrack[]} tracks
+     *        Text track object or text track array to be added to the list.
+     */
+    updateForTrack(tracks) {
+      if (!Array.isArray(tracks)) {
+        tracks = [tracks];
+      }
+      if (typeof window.WebVTT !== 'function' || tracks.every(track => {
+        return !track.activeCues;
+      })) {
+        return;
+      }
+      const cues = [];
+
+      // push all active track cues
+      for (let i = 0; i < tracks.length; ++i) {
+        const track = tracks[i];
+        for (let j = 0; j < track.activeCues.length; ++j) {
+          cues.push(track.activeCues[j]);
+        }
+      }
+
+      // removes all cues before it processes new ones
+      window.WebVTT.processCues(window, cues, this.el_);
+
+      // add unique class to each language text track & add settings styling if necessary
+      for (let i = 0; i < tracks.length; ++i) {
+        const track = tracks[i];
+        for (let j = 0; j < track.activeCues.length; ++j) {
+          const cueEl = track.activeCues[j].displayState;
+          addClass(cueEl, 'vjs-text-track-cue', 'vjs-text-track-cue-' + (track.language ? track.language : i));
+          if (track.language) {
+            setAttribute(cueEl, 'lang', track.language);
+          }
+        }
+        if (this.player_.textTrackSettings) {
+          this.updateDisplayState(track);
+        }
+      }
+    }
+  }
+  Component$1.registerComponent('TextTrackDisplay', TextTrackDisplay);
+
+  /**
+   * @file loading-spinner.js
+   */
+
+  /**
+   * A loading spinner for use during waiting/loading events.
+   *
+   * @extends Component
+   */
+  class LoadingSpinner extends Component$1 {
+    /**
+     * Create the `LoadingSpinner`s DOM element.
+     *
+     * @return {Element}
+     *         The dom element that gets created.
+     */
+    createEl() {
+      const isAudio = this.player_.isAudio();
+      const playerType = this.localize(isAudio ? 'Audio Player' : 'Video Player');
+      const controlText = createEl('span', {
+        className: 'vjs-control-text',
+        textContent: this.localize('{1} is loading.', [playerType])
+      });
+      const el = super.createEl('div', {
+        className: 'vjs-loading-spinner',
+        dir: 'ltr'
+      });
+      el.appendChild(controlText);
+      return el;
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-control-text').textContent = this.localize('{1} is loading.', [this.player_.isAudio() ? 'Audio Player' : 'Video Player']);
+    }
+  }
+  Component$1.registerComponent('LoadingSpinner', LoadingSpinner);
+
+  /**
+   * @file button.js
+   */
+
+  /**
+   * Base class for all buttons.
+   *
+   * @extends ClickableComponent
+   */
+  class Button extends ClickableComponent {
+    /**
+     * Create the `Button`s DOM element.
+     *
+     * @param {string} [tag="button"]
+     *        The element's node type. This argument is IGNORED: no matter what
+     *        is passed, it will always create a `button` element.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element.
+     *
+     * @param {Object} [attributes={}]
+     *        An object of attributes that should be set on the element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(tag, props = {}, attributes = {}) {
+      tag = 'button';
+      props = Object.assign({
+        className: this.buildCSSClass()
+      }, props);
+
+      // Add attributes for button element
+      attributes = Object.assign({
+        // Necessary since the default button type is "submit"
+        type: 'button'
+      }, attributes);
+      const el = createEl(tag, props, attributes);
+      if (!this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+      }
+      this.createControlTextEl(el);
+      return el;
+    }
+
+    /**
+     * Add a child `Component` inside of this `Button`.
+     *
+     * @param {string|Component} child
+     *        The name or instance of a child to add.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of options that will get passed to children of
+     *        the child.
+     *
+     * @return {Component}
+     *         The `Component` that gets added as a child. When using a string the
+     *         `Component` will get created by this process.
+     *
+     * @deprecated since version 5
+     */
+    addChild(child, options = {}) {
+      const className = this.constructor.name;
+      log$1.warn(`Adding an actionable (user controllable) child to a Button (${className}) is not supported; use a ClickableComponent instead.`);
+
+      // Avoid the error message generated by ClickableComponent's addChild method
+      return Component$1.prototype.addChild.call(this, child, options);
+    }
+
+    /**
+     * Enable the `Button` element so that it can be activated or clicked. Use this with
+     * {@link Button#disable}.
+     */
+    enable() {
+      super.enable();
+      this.el_.removeAttribute('disabled');
+    }
+
+    /**
+     * Disable the `Button` element so that it cannot be activated or clicked. Use this with
+     * {@link Button#enable}.
+     */
+    disable() {
+      super.disable();
+      this.el_.setAttribute('disabled', 'disabled');
+    }
+
+    /**
+     * This gets called when a `Button` has focus and `keydown` is triggered via a key
+     * press.
+     *
+     * @param {KeyboardEvent} event
+     *        The event that caused this function to get called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Ignore Space or Enter key operation, which is handled by the browser for
+      // a button - though not for its super class, ClickableComponent. Also,
+      // prevent the event from propagating through the DOM and triggering Player
+      // hotkeys. We do not preventDefault here because we _want_ the browser to
+      // handle it.
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.stopPropagation();
+        return;
+      }
+
+      // Pass keypress handling up for unsupported keys
+      super.handleKeyDown(event);
+    }
+  }
+  Component$1.registerComponent('Button', Button);
+
+  /**
+   * @file big-play-button.js
+   */
+
+  /**
+   * The initial play button that shows before the video has played. The hiding of the
+   * `BigPlayButton` get done via CSS and `Player` states.
+   *
+   * @extends Button
+   */
+  class BigPlayButton extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.mouseused_ = false;
+      this.setIcon('play');
+      this.on('mousedown', e => this.handleMouseDown(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object. Always returns 'vjs-big-play-button'.
+     */
+    buildCSSClass() {
+      return 'vjs-big-play-button';
+    }
+
+    /**
+     * This gets called when a `BigPlayButton` "clicked". See {@link ClickableComponent}
+     * for more detailed information on what a click can be.
+     *
+     * @param {KeyboardEvent|MouseEvent|TouchEvent} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const playPromise = this.player_.play();
+
+      // exit early if clicked via the mouse
+      if (this.mouseused_ && 'clientX' in event && 'clientY' in event) {
+        silencePromise(playPromise);
+        if (this.player_.tech(true)) {
+          this.player_.tech(true).focus();
+        }
+        return;
+      }
+      const cb = this.player_.getChild('controlBar');
+      const playToggle = cb && cb.getChild('playToggle');
+      if (!playToggle) {
+        this.player_.tech(true).focus();
+        return;
+      }
+      const playFocus = () => playToggle.focus();
+      if (isPromise(playPromise)) {
+        playPromise.then(playFocus, () => {});
+      } else {
+        this.setTimeout(playFocus, 1);
+      }
+    }
+
+    /**
+     * Event handler that is called when a `BigPlayButton` receives a
+     * `keydown` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      this.mouseused_ = false;
+      super.handleKeyDown(event);
+    }
+
+    /**
+     * Handle `mousedown` events on the `BigPlayButton`.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      this.mouseused_ = true;
+    }
+  }
+
+  /**
+   * The text that should display over the `BigPlayButton`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  BigPlayButton.prototype.controlText_ = 'Play Video';
+  Component$1.registerComponent('BigPlayButton', BigPlayButton);
+
+  /**
+   * @file close-button.js
+   */
+
+  /**
+   * The `CloseButton` is a `{@link Button}` that fires a `close` event when
+   * it gets clicked.
+   *
+   * @extends Button
+   */
+  class CloseButton extends Button {
+    /**
+    * Creates an instance of the this class.
+    *
+    * @param  { import('./player').default } player
+    *         The `Player` that this class should be attached to.
+    *
+    * @param  {Object} [options]
+    *         The key/value store of player options.
+    */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('cancel');
+      this.controlText(options && options.controlText || this.localize('Close'));
+    }
+
+    /**
+    * Builds the default DOM `className`.
+    *
+    * @return {string}
+    *         The DOM `className` for this object.
+    */
+    buildCSSClass() {
+      return `vjs-close-button ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when a `CloseButton` gets clicked. See
+     * {@link ClickableComponent#handleClick} for more information on when
+     * this will be triggered
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     * @fires CloseButton#close
+     */
+    handleClick(event) {
+      /**
+       * Triggered when the a `CloseButton` is clicked.
+       *
+       * @event CloseButton#close
+       * @type {Event}
+       *
+       * @property {boolean} [bubbles=false]
+       *           set to false so that the close event does not
+       *           bubble up to parents if there is no listener
+       */
+      this.trigger({
+        type: 'close',
+        bubbles: false
+      });
+    }
+    /**
+     * Event handler that is called when a `CloseButton` receives a
+     * `keydown` event.
+     *
+     * By default, if the key is Esc, it will trigger a `click` event.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Esc button will trigger `click` event
+      if (keycode.isEventKey(event, 'Esc')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.trigger('click');
+      } else {
+        // Pass keypress handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+  }
+  Component$1.registerComponent('CloseButton', CloseButton);
+
+  /**
+   * @file play-toggle.js
+   */
+
+  /**
+   * Button to toggle between play and pause.
+   *
+   * @extends Button
+   */
+  class PlayToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+
+      // show or hide replay icon
+      options.replay = options.replay === undefined || options.replay;
+      this.setIcon('play');
+      this.on(player, 'play', e => this.handlePlay(e));
+      this.on(player, 'pause', e => this.handlePause(e));
+      if (options.replay) {
+        this.on(player, 'ended', e => this.handleEnded(e));
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-play-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when an `PlayToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (this.player_.paused()) {
+        silencePromise(this.player_.play());
+      } else {
+        this.player_.pause();
+      }
+    }
+
+    /**
+     * This gets called once after the video has ended and the user seeks so that
+     * we can change the replay button back to a play button.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#seeked
+     */
+    handleSeeked(event) {
+      this.removeClass('vjs-ended');
+      if (this.player_.paused()) {
+        this.handlePause(event);
+      } else {
+        this.handlePlay(event);
+      }
+    }
+
+    /**
+     * Add the vjs-playing class to the element so it can change appearance.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#play
+     */
+    handlePlay(event) {
+      this.removeClass('vjs-ended', 'vjs-paused');
+      this.addClass('vjs-playing');
+      // change the button text to "Pause"
+      this.setIcon('pause');
+      this.controlText('Pause');
+    }
+
+    /**
+     * Add the vjs-paused class to the element so it can change appearance.
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#pause
+     */
+    handlePause(event) {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      // change the button text to "Play"
+      this.setIcon('play');
+      this.controlText('Play');
+    }
+
+    /**
+     * Add the vjs-ended class to the element so it can change appearance
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#ended
+     */
+    handleEnded(event) {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-ended');
+      // change the button text to "Replay"
+      this.setIcon('replay');
+      this.controlText('Replay');
+
+      // on the next seek remove the replay button
+      this.one(this.player_, 'seeked', e => this.handleSeeked(e));
+    }
+  }
+
+  /**
+   * The text that should display over the `PlayToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PlayToggle.prototype.controlText_ = 'Play';
+  Component$1.registerComponent('PlayToggle', PlayToggle);
+
+  /**
+   * @file time-display.js
+   */
+
+  /**
+   * Displays time information about the video
+   *
+   * @extends Component
+   */
+  class TimeDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, ['timeupdate', 'ended', 'seeking'], e => this.update(e));
+      this.updateTextNode_();
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const className = this.buildCSSClass();
+      const el = super.createEl('div', {
+        className: `${className} vjs-time-control vjs-control`
+      });
+      const span = createEl('span', {
+        className: 'vjs-control-text',
+        textContent: `${this.localize(this.labelText_)}\u00a0`
+      }, {
+        role: 'presentation'
+      });
+      el.appendChild(span);
+      this.contentEl_ = createEl('span', {
+        className: `${className}-display`
+      }, {
+        // span elements have no implicit role, but some screen readers (notably VoiceOver)
+        // treat them as a break between items in the DOM when using arrow keys
+        // (or left-to-right swipes on iOS) to read contents of a page. Using
+        // role='presentation' causes VoiceOver to NOT treat this span as a break.
+        role: 'presentation'
+      });
+      el.appendChild(this.contentEl_);
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.textNode_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Updates the displayed time according to the `updateContent` function which is defined in the child class.
+     *
+     * @param {Event} [event]
+     *          The `timeupdate`, `ended` or `seeking` (if enableSmoothSeeking is true) event that caused this function to be called.
+     */
+    update(event) {
+      if (!this.player_.options_.enableSmoothSeeking && event.type === 'seeking') {
+        return;
+      }
+      this.updateContent(event);
+    }
+
+    /**
+     * Updates the time display text node with a new time
+     *
+     * @param {number} [time=0] the time to update to
+     *
+     * @private
+     */
+    updateTextNode_(time = 0) {
+      time = formatTime(time);
+      if (this.formattedTime_ === time) {
+        return;
+      }
+      this.formattedTime_ = time;
+      this.requestNamedAnimationFrame('TimeDisplay#updateTextNode_', () => {
+        if (!this.contentEl_) {
+          return;
+        }
+        let oldNode = this.textNode_;
+        if (oldNode && this.contentEl_.firstChild !== oldNode) {
+          oldNode = null;
+          log$1.warn('TimeDisplay#updateTextnode_: Prevented replacement of text node element since it was no longer a child of this node. Appending a new node instead.');
+        }
+        this.textNode_ = document.createTextNode(this.formattedTime_);
+        if (!this.textNode_) {
+          return;
+        }
+        if (oldNode) {
+          this.contentEl_.replaceChild(this.textNode_, oldNode);
+        } else {
+          this.contentEl_.appendChild(this.textNode_);
+        }
+      });
+    }
+
+    /**
+     * To be filled out in the child class, should update the displayed time
+     * in accordance with the fact that the current time has changed.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate`  event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     */
+    updateContent(event) {}
+  }
+
+  /**
+   * The text that is added to the `TimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  TimeDisplay.prototype.labelText_ = 'Time';
+
+  /**
+   * The text that should display over the `TimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  TimeDisplay.prototype.controlText_ = 'Time';
+  Component$1.registerComponent('TimeDisplay', TimeDisplay);
+
+  /**
+   * @file current-time-display.js
+   */
+
+  /**
+   * Displays the current time
+   *
+   * @extends Component
+   */
+  class CurrentTimeDisplay extends TimeDisplay {
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-current-time';
+    }
+
+    /**
+     * Update current time display
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` event that caused this function to run.
+     *
+     * @listens Player#timeupdate
+     */
+    updateContent(event) {
+      // Allows for smooth scrubbing, when player can't keep up.
+      let time;
+      if (this.player_.ended()) {
+        time = this.player_.duration();
+      } else {
+        time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+      }
+      this.updateTextNode_(time);
+    }
+  }
+
+  /**
+   * The text that is added to the `CurrentTimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  CurrentTimeDisplay.prototype.labelText_ = 'Current Time';
+
+  /**
+   * The text that should display over the `CurrentTimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  CurrentTimeDisplay.prototype.controlText_ = 'Current Time';
+  Component$1.registerComponent('CurrentTimeDisplay', CurrentTimeDisplay);
+
+  /**
+   * @file duration-display.js
+   */
+
+  /**
+   * Displays the duration
+   *
+   * @extends Component
+   */
+  class DurationDisplay extends TimeDisplay {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      const updateContent = e => this.updateContent(e);
+
+      // we do not want to/need to throttle duration changes,
+      // as they should always display the changed duration as
+      // it has changed
+      this.on(player, 'durationchange', updateContent);
+
+      // Listen to loadstart because the player duration is reset when a new media element is loaded,
+      // but the durationchange on the user agent will not fire.
+      // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
+      this.on(player, 'loadstart', updateContent);
+
+      // Also listen for timeupdate (in the parent) and loadedmetadata because removing those
+      // listeners could have broken dependent applications/libraries. These
+      // can likely be removed for 7.0.
+      this.on(player, 'loadedmetadata', updateContent);
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-duration';
+    }
+
+    /**
+     * Update duration time display.
+     *
+     * @param {Event} [event]
+     *        The `durationchange`, `timeupdate`, or `loadedmetadata` event that caused
+     *        this function to be called.
+     *
+     * @listens Player#durationchange
+     * @listens Player#timeupdate
+     * @listens Player#loadedmetadata
+     */
+    updateContent(event) {
+      const duration = this.player_.duration();
+      this.updateTextNode_(duration);
+    }
+  }
+
+  /**
+   * The text that is added to the `DurationDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  DurationDisplay.prototype.labelText_ = 'Duration';
+
+  /**
+   * The text that should display over the `DurationDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  DurationDisplay.prototype.controlText_ = 'Duration';
+  Component$1.registerComponent('DurationDisplay', DurationDisplay);
+
+  /**
+   * @file time-divider.js
+   */
+
+  /**
+   * The separator between the current time and duration.
+   * Can be hidden if it's not needed in the design.
+   *
+   * @extends Component
+   */
+  class TimeDivider extends Component$1 {
+    /**
+     * Create the component's DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-time-control vjs-time-divider'
+      }, {
+        // this element and its contents can be hidden from assistive techs since
+        // it is made extraneous by the announcement of the control text
+        // for the current time and duration displays
+        'aria-hidden': true
+      });
+      const div = super.createEl('div');
+      const span = super.createEl('span', {
+        textContent: '/'
+      });
+      div.appendChild(span);
+      el.appendChild(div);
+      return el;
+    }
+  }
+  Component$1.registerComponent('TimeDivider', TimeDivider);
+
+  /**
+   * @file remaining-time-display.js
+   */
+
+  /**
+   * Displays the time left in the video
+   *
+   * @extends Component
+   */
+  class RemainingTimeDisplay extends TimeDisplay {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, 'durationchange', e => this.updateContent(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return 'vjs-remaining-time';
+    }
+
+    /**
+     * Create the `Component`'s DOM element with the "minus" character prepend to the time
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl();
+      if (this.options_.displayNegative !== false) {
+        el.insertBefore(createEl('span', {}, {
+          'aria-hidden': true
+        }, '-'), this.contentEl_);
+      }
+      return el;
+    }
+
+    /**
+     * Update remaining time display.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` or `durationchange` event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     * @listens Player#durationchange
+     */
+    updateContent(event) {
+      if (typeof this.player_.duration() !== 'number') {
+        return;
+      }
+      let time;
+
+      // @deprecated We should only use remainingTimeDisplay
+      // as of video.js 7
+      if (this.player_.ended()) {
+        time = 0;
+      } else if (this.player_.remainingTimeDisplay) {
+        time = this.player_.remainingTimeDisplay();
+      } else {
+        time = this.player_.remainingTime();
+      }
+      this.updateTextNode_(time);
+    }
+  }
+
+  /**
+   * The text that is added to the `RemainingTimeDisplay` for screen reader users.
+   *
+   * @type {string}
+   * @private
+   */
+  RemainingTimeDisplay.prototype.labelText_ = 'Remaining Time';
+
+  /**
+   * The text that should display over the `RemainingTimeDisplay`s controls. Added to for localization.
+   *
+   * @type {string}
+   * @protected
+   *
+   * @deprecated in v7; controlText_ is not used in non-active display Components
+   */
+  RemainingTimeDisplay.prototype.controlText_ = 'Remaining Time';
+  Component$1.registerComponent('RemainingTimeDisplay', RemainingTimeDisplay);
+
+  /**
+   * @file live-display.js
+   */
+
+  // TODO - Future make it click to snap to live
+
+  /**
+   * Displays the live indicator when duration is Infinity.
+   *
+   * @extends Component
+   */
+  class LiveDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.updateShowing();
+      this.on(this.player(), 'durationchange', e => this.updateShowing(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-live-control vjs-control'
+      });
+      this.contentEl_ = createEl('div', {
+        className: 'vjs-live-display'
+      }, {
+        'aria-live': 'off'
+      });
+      this.contentEl_.appendChild(createEl('span', {
+        className: 'vjs-control-text',
+        textContent: `${this.localize('Stream Type')}\u00a0`
+      }));
+      this.contentEl_.appendChild(document.createTextNode(this.localize('LIVE')));
+      el.appendChild(this.contentEl_);
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Check the duration to see if the LiveDisplay should be showing or not. Then show/hide
+     * it accordingly
+     *
+     * @param {Event} [event]
+     *        The {@link Player#durationchange} event that caused this function to run.
+     *
+     * @listens Player#durationchange
+     */
+    updateShowing(event) {
+      if (this.player().duration() === Infinity) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }
+  Component$1.registerComponent('LiveDisplay', LiveDisplay);
+
+  /**
+   * @file seek-to-live.js
+   */
+
+  /**
+   * Displays the live indicator when duration is Infinity.
+   *
+   * @extends Component
+   */
+  class SeekToLive extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.updateLiveEdgeStatus();
+      if (this.player_.liveTracker) {
+        this.updateLiveEdgeStatusHandler_ = e => this.updateLiveEdgeStatus(e);
+        this.on(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
+      }
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('button', {
+        className: 'vjs-seek-to-live-control vjs-control'
+      });
+      this.setIcon('circle', el);
+      this.textEl_ = createEl('span', {
+        className: 'vjs-seek-to-live-text',
+        textContent: this.localize('LIVE')
+      }, {
+        'aria-hidden': 'true'
+      });
+      el.appendChild(this.textEl_);
+      return el;
+    }
+
+    /**
+     * Update the state of this button if we are at the live edge
+     * or not
+     */
+    updateLiveEdgeStatus() {
+      // default to live edge
+      if (!this.player_.liveTracker || this.player_.liveTracker.atLiveEdge()) {
+        this.setAttribute('aria-disabled', true);
+        this.addClass('vjs-at-live-edge');
+        this.controlText('Seek to live, currently playing live');
+      } else {
+        this.setAttribute('aria-disabled', false);
+        this.removeClass('vjs-at-live-edge');
+        this.controlText('Seek to live, currently behind live');
+      }
+    }
+
+    /**
+     * On click bring us as near to the live point as possible.
+     * This requires that we wait for the next `live-seekable-change`
+     * event which will happen every segment length seconds.
+     */
+    handleClick() {
+      this.player_.liveTracker.seekToLiveEdge();
+    }
+
+    /**
+     * Dispose of the element and stop tracking
+     */
+    dispose() {
+      if (this.player_.liveTracker) {
+        this.off(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
+      }
+      this.textEl_ = null;
+      super.dispose();
+    }
+  }
+  /**
+   * The text that should display over the `SeekToLive`s control. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  SeekToLive.prototype.controlText_ = 'Seek to live, currently playing live';
+  Component$1.registerComponent('SeekToLive', SeekToLive);
+
+  /**
+   * @file num.js
+   * @module num
+   */
+
+  /**
+   * Keep a number between a min and a max value
+   *
+   * @param {number} number
+   *        The number to clamp
+   *
+   * @param {number} min
+   *        The minimum value
+   * @param {number} max
+   *        The maximum value
+   *
+   * @return {number}
+   *         the clamped number
+   */
+  function clamp(number, min, max) {
+    number = Number(number);
+    return Math.min(max, Math.max(min, isNaN(number) ? min : number));
+  }
+
+  var Num = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    clamp: clamp
+  });
+
+  /**
+   * @file slider.js
+   */
+
+  /**
+   * The base functionality for a slider. Can be vertical or horizontal.
+   * For instance the volume bar or the seek bar on a video is a slider.
+   *
+   * @extends Component
+   */
+  class Slider extends Component$1 {
+    /**
+    * Create an instance of this class
+    *
+    * @param { import('../player').default } player
+    *        The `Player` that this class should be attached to.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    */
+    constructor(player, options) {
+      super(player, options);
+      this.handleMouseDown_ = e => this.handleMouseDown(e);
+      this.handleMouseUp_ = e => this.handleMouseUp(e);
+      this.handleKeyDown_ = e => this.handleKeyDown(e);
+      this.handleClick_ = e => this.handleClick(e);
+      this.handleMouseMove_ = e => this.handleMouseMove(e);
+      this.update_ = e => this.update(e);
+
+      // Set property names to bar to match with the child Slider class is looking for
+      this.bar = this.getChild(this.options_.barName);
+
+      // Set a horizontal or vertical class on the slider depending on the slider type
+      this.vertical(!!this.options_.vertical);
+      this.enable();
+    }
+
+    /**
+     * Are controls are currently enabled for this slider or not.
+     *
+     * @return {boolean}
+     *         true if controls are enabled, false otherwise
+     */
+    enabled() {
+      return this.enabled_;
+    }
+
+    /**
+     * Enable controls for this slider if they are disabled
+     */
+    enable() {
+      if (this.enabled()) {
+        return;
+      }
+      this.on('mousedown', this.handleMouseDown_);
+      this.on('touchstart', this.handleMouseDown_);
+      this.on('keydown', this.handleKeyDown_);
+      this.on('click', this.handleClick_);
+
+      // TODO: deprecated, controlsvisible does not seem to be fired
+      this.on(this.player_, 'controlsvisible', this.update);
+      if (this.playerEvent) {
+        this.on(this.player_, this.playerEvent, this.update);
+      }
+      this.removeClass('disabled');
+      this.setAttribute('tabindex', 0);
+      this.enabled_ = true;
+    }
+
+    /**
+     * Disable controls for this slider if they are enabled
+     */
+    disable() {
+      if (!this.enabled()) {
+        return;
+      }
+      const doc = this.bar.el_.ownerDocument;
+      this.off('mousedown', this.handleMouseDown_);
+      this.off('touchstart', this.handleMouseDown_);
+      this.off('keydown', this.handleKeyDown_);
+      this.off('click', this.handleClick_);
+      this.off(this.player_, 'controlsvisible', this.update_);
+      this.off(doc, 'mousemove', this.handleMouseMove_);
+      this.off(doc, 'mouseup', this.handleMouseUp_);
+      this.off(doc, 'touchmove', this.handleMouseMove_);
+      this.off(doc, 'touchend', this.handleMouseUp_);
+      this.removeAttribute('tabindex');
+      this.addClass('disabled');
+      if (this.playerEvent) {
+        this.off(this.player_, this.playerEvent, this.update);
+      }
+      this.enabled_ = false;
+    }
+
+    /**
+     * Create the `Slider`s DOM element.
+     *
+     * @param {string} type
+     *        Type of element to create.
+     *
+     * @param {Object} [props={}]
+     *        List of properties in Object form.
+     *
+     * @param {Object} [attributes={}]
+     *        list of attributes in Object form.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(type, props = {}, attributes = {}) {
+      // Add the slider element class to all sub classes
+      props.className = props.className + ' vjs-slider';
+      props = Object.assign({
+        tabIndex: 0
+      }, props);
+      attributes = Object.assign({
+        'role': 'slider',
+        'aria-valuenow': 0,
+        'aria-valuemin': 0,
+        'aria-valuemax': 100
+      }, attributes);
+      return super.createEl(type, props, attributes);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `Slider`.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     * @fires Slider#slideractive
+     */
+    handleMouseDown(event) {
+      const doc = this.bar.el_.ownerDocument;
+      if (event.type === 'mousedown') {
+        event.preventDefault();
+      }
+      // Do not call preventDefault() on touchstart in Chrome
+      // to avoid console warnings. Use a 'touch-action: none' style
+      // instead to prevent unintended scrolling.
+      // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+      if (event.type === 'touchstart' && !IS_CHROME) {
+        event.preventDefault();
+      }
+      blockTextSelection();
+      this.addClass('vjs-sliding');
+      /**
+       * Triggered when the slider is in an active state
+       *
+       * @event Slider#slideractive
+       * @type {MouseEvent}
+       */
+      this.trigger('slideractive');
+      this.on(doc, 'mousemove', this.handleMouseMove_);
+      this.on(doc, 'mouseup', this.handleMouseUp_);
+      this.on(doc, 'touchmove', this.handleMouseMove_);
+      this.on(doc, 'touchend', this.handleMouseUp_);
+      this.handleMouseMove(event, true);
+    }
+
+    /**
+     * Handle the `mousemove`, `touchmove`, and `mousedown` events on this `Slider`.
+     * The `mousemove` and `touchmove` events will only only trigger this function during
+     * `mousedown` and `touchstart`. This is due to {@link Slider#handleMouseDown} and
+     * {@link Slider#handleMouseUp}.
+     *
+     * @param {MouseEvent} event
+     *        `mousedown`, `mousemove`, `touchstart`, or `touchmove` event that triggered
+     *        this function
+     * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false.
+     *
+     * @listens mousemove
+     * @listens touchmove
+     */
+    handleMouseMove(event) {}
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `Slider`.
+     *
+     * @param {MouseEvent} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     * @fires Slider#sliderinactive
+     */
+    handleMouseUp(event) {
+      const doc = this.bar.el_.ownerDocument;
+      unblockTextSelection();
+      this.removeClass('vjs-sliding');
+      /**
+       * Triggered when the slider is no longer in an active state.
+       *
+       * @event Slider#sliderinactive
+       * @type {Event}
+       */
+      this.trigger('sliderinactive');
+      this.off(doc, 'mousemove', this.handleMouseMove_);
+      this.off(doc, 'mouseup', this.handleMouseUp_);
+      this.off(doc, 'touchmove', this.handleMouseMove_);
+      this.off(doc, 'touchend', this.handleMouseUp_);
+      this.update();
+    }
+
+    /**
+     * Update the progress bar of the `Slider`.
+     *
+     * @return {number}
+     *          The percentage of progress the progress bar represents as a
+     *          number from 0 to 1.
+     */
+    update() {
+      // In VolumeBar init we have a setTimeout for update that pops and update
+      // to the end of the execution stack. The player is destroyed before then
+      // update will cause an error
+      // If there's no bar...
+      if (!this.el_ || !this.bar) {
+        return;
+      }
+
+      // clamp progress between 0 and 1
+      // and only round to four decimal places, as we round to two below
+      const progress = this.getProgress();
+      if (progress === this.progress_) {
+        return progress;
+      }
+      this.progress_ = progress;
+      this.requestNamedAnimationFrame('Slider#update', () => {
+        // Set the new bar width or height
+        const sizeKey = this.vertical() ? 'height' : 'width';
+
+        // Convert to a percentage for css value
+        this.bar.el().style[sizeKey] = (progress * 100).toFixed(2) + '%';
+      });
+      return progress;
+    }
+
+    /**
+     * Get the percentage of the bar that should be filled
+     * but clamped and rounded.
+     *
+     * @return {number}
+     *         percentage filled that the slider is
+     */
+    getProgress() {
+      return Number(clamp(this.getPercent(), 0, 1).toFixed(4));
+    }
+
+    /**
+     * Calculate distance for slider
+     *
+     * @param {Event} event
+     *        The event that caused this function to run.
+     *
+     * @return {number}
+     *         The current position of the Slider.
+     *         - position.x for vertical `Slider`s
+     *         - position.y for horizontal `Slider`s
+     */
+    calculateDistance(event) {
+      const position = getPointerPosition(this.el_, event);
+      if (this.vertical()) {
+        return position.y;
+      }
+      return position.x;
+    }
+
+    /**
+     * Handle a `keydown` event on the `Slider`. Watches for left, right, up, and down
+     * arrow keys. This function will only be called when the slider has focus. See
+     * {@link Slider#handleFocus} and {@link Slider#handleBlur}.
+     *
+     * @param {KeyboardEvent} event
+     *        the `keydown` event that caused this function to run.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Left and Down Arrows
+      if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepBack();
+
+        // Up and Right Arrows
+      } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepForward();
+      } else {
+        // Pass keydown handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Listener for click events on slider, used to prevent clicks
+     *   from bubbling up to parent elements like button menus.
+     *
+     * @param {Object} event
+     *        Event that caused this object to run
+     */
+    handleClick(event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+
+    /**
+     * Get/set if slider is horizontal for vertical
+     *
+     * @param {boolean} [bool]
+     *        - true if slider is vertical,
+     *        - false is horizontal
+     *
+     * @return {boolean}
+     *         - true if slider is vertical, and getting
+     *         - false if the slider is horizontal, and getting
+     */
+    vertical(bool) {
+      if (bool === undefined) {
+        return this.vertical_ || false;
+      }
+      this.vertical_ = !!bool;
+      if (this.vertical_) {
+        this.addClass('vjs-slider-vertical');
+      } else {
+        this.addClass('vjs-slider-horizontal');
+      }
+    }
+  }
+  Component$1.registerComponent('Slider', Slider);
+
+  /**
+   * @file load-progress-bar.js
+   */
+
+  // get the percent width of a time compared to the total end
+  const percentify = (time, end) => clamp(time / end * 100, 0, 100).toFixed(2) + '%';
+
+  /**
+   * Shows loading progress
+   *
+   * @extends Component
+   */
+  class LoadProgressBar extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.partEls_ = [];
+      this.on(player, 'progress', e => this.update(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-load-progress'
+      });
+      const wrapper = createEl('span', {
+        className: 'vjs-control-text'
+      });
+      const loadedText = createEl('span', {
+        textContent: this.localize('Loaded')
+      });
+      const separator = document.createTextNode(': ');
+      this.percentageEl_ = createEl('span', {
+        className: 'vjs-control-text-loaded-percentage',
+        textContent: '0%'
+      });
+      el.appendChild(wrapper);
+      wrapper.appendChild(loadedText);
+      wrapper.appendChild(separator);
+      wrapper.appendChild(this.percentageEl_);
+      return el;
+    }
+    dispose() {
+      this.partEls_ = null;
+      this.percentageEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Update progress bar
+     *
+     * @param {Event} [event]
+     *        The `progress` event that caused this function to run.
+     *
+     * @listens Player#progress
+     */
+    update(event) {
+      this.requestNamedAnimationFrame('LoadProgressBar#update', () => {
+        const liveTracker = this.player_.liveTracker;
+        const buffered = this.player_.buffered();
+        const duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
+        const bufferedEnd = this.player_.bufferedEnd();
+        const children = this.partEls_;
+        const percent = percentify(bufferedEnd, duration);
+        if (this.percent_ !== percent) {
+          // update the width of the progress bar
+          this.el_.style.width = percent;
+          // update the control-text
+          textContent(this.percentageEl_, percent);
+          this.percent_ = percent;
+        }
+
+        // add child elements to represent the individual buffered time ranges
+        for (let i = 0; i < buffered.length; i++) {
+          const start = buffered.start(i);
+          const end = buffered.end(i);
+          let part = children[i];
+          if (!part) {
+            part = this.el_.appendChild(createEl());
+            children[i] = part;
+          }
+
+          //  only update if changed
+          if (part.dataset.start === start && part.dataset.end === end) {
+            continue;
+          }
+          part.dataset.start = start;
+          part.dataset.end = end;
+
+          // set the percent based on the width of the progress bar (bufferedEnd)
+          part.style.left = percentify(start, bufferedEnd);
+          part.style.width = percentify(end - start, bufferedEnd);
+        }
+
+        // remove unused buffered range elements
+        for (let i = children.length; i > buffered.length; i--) {
+          this.el_.removeChild(children[i - 1]);
+        }
+        children.length = buffered.length;
+      });
+    }
+  }
+  Component$1.registerComponent('LoadProgressBar', LoadProgressBar);
+
+  /**
+   * @file time-tooltip.js
+   */
+
+  /**
+   * Time tooltips display a time above the progress bar.
+   *
+   * @extends Component
+   */
+  class TimeTooltip extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the time tooltip DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-time-tooltip'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Updates the position of the time tooltip relative to the `SeekBar`.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint, content) {
+      const tooltipRect = findPosition(this.el_);
+      const playerRect = getBoundingClientRect(this.player_.el());
+      const seekBarPointPx = seekBarRect.width * seekBarPoint;
+
+      // do nothing if either rect isn't available
+      // for example, if the player isn't in the DOM for testing
+      if (!playerRect || !tooltipRect) {
+        return;
+      }
+
+      // This is the space left of the `seekBarPoint` available within the bounds
+      // of the player. We calculate any gap between the left edge of the player
+      // and the left edge of the `SeekBar` and add the number of pixels in the
+      // `SeekBar` before hitting the `seekBarPoint`
+      let spaceLeftOfPoint = seekBarRect.left - playerRect.left + seekBarPointPx;
+
+      // This is the space right of the `seekBarPoint` available within the bounds
+      // of the player. We calculate the number of pixels from the `seekBarPoint`
+      // to the right edge of the `SeekBar` and add to that any gap between the
+      // right edge of the `SeekBar` and the player.
+      let spaceRightOfPoint = seekBarRect.width - seekBarPointPx + (playerRect.right - seekBarRect.right);
+
+      // spaceRightOfPoint is always NaN for mouse time display
+      // because the seekbarRect does not have a right property. This causes
+      // the mouse tool tip to be truncated when it's close to the right edge of the player.
+      // In such cases, we ignore the `playerRect.right - seekBarRect.right` value when calculating.
+      // For the sake of consistency, we ignore seekBarRect.left - playerRect.left for the left edge.
+      if (!spaceRightOfPoint) {
+        spaceRightOfPoint = seekBarRect.width - seekBarPointPx;
+        spaceLeftOfPoint = seekBarPointPx;
+      }
+      // This is the number of pixels by which the tooltip will need to be pulled
+      // further to the right to center it over the `seekBarPoint`.
+      let pullTooltipBy = tooltipRect.width / 2;
+
+      // Adjust the `pullTooltipBy` distance to the left or right depending on
+      // the results of the space calculations above.
+      if (spaceLeftOfPoint < pullTooltipBy) {
+        pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
+      } else if (spaceRightOfPoint < pullTooltipBy) {
+        pullTooltipBy = spaceRightOfPoint;
+      }
+
+      // Due to the imprecision of decimal/ratio based calculations and varying
+      // rounding behaviors, there are cases where the spacing adjustment is off
+      // by a pixel or two. This adds insurance to these calculations.
+      if (pullTooltipBy < 0) {
+        pullTooltipBy = 0;
+      } else if (pullTooltipBy > tooltipRect.width) {
+        pullTooltipBy = tooltipRect.width;
+      }
+
+      // prevent small width fluctuations within 0.4px from
+      // changing the value below.
+      // This really helps for live to prevent the play
+      // progress time tooltip from jittering
+      pullTooltipBy = Math.round(pullTooltipBy);
+      this.el_.style.right = `-${pullTooltipBy}px`;
+      this.write(content);
+    }
+
+    /**
+     * Write the time to the tooltip DOM element.
+     *
+     * @param {string} content
+     *        The formatted time for the tooltip.
+     */
+    write(content) {
+      textContent(this.el_, content);
+    }
+
+    /**
+     * Updates the position of the time tooltip relative to the `SeekBar`.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     *
+     * @param {number} time
+     *        The time to update the tooltip to, not used during live playback
+     *
+     * @param {Function} cb
+     *        A function that will be called during the request animation frame
+     *        for tooltips that need to do additional animations from the default
+     */
+    updateTime(seekBarRect, seekBarPoint, time, cb) {
+      this.requestNamedAnimationFrame('TimeTooltip#updateTime', () => {
+        let content;
+        const duration = this.player_.duration();
+        if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+          const liveWindow = this.player_.liveTracker.liveWindow();
+          const secondsBehind = liveWindow - seekBarPoint * liveWindow;
+          content = (secondsBehind < 1 ? '' : '-') + formatTime(secondsBehind, liveWindow);
+        } else {
+          content = formatTime(time, duration);
+        }
+        this.update(seekBarRect, seekBarPoint, content);
+        if (cb) {
+          cb();
+        }
+      });
+    }
+  }
+  Component$1.registerComponent('TimeTooltip', TimeTooltip);
+
+  /**
+   * @file play-progress-bar.js
+   */
+
+  /**
+   * Used by {@link SeekBar} to display media playback progress as part of the
+   * {@link ProgressControl}.
+   *
+   * @extends Component
+   */
+  class PlayProgressBar extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('circle');
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-play-progress vjs-slider-bar'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Enqueues updates to its own DOM as well as the DOM of its
+     * {@link TimeTooltip} child.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint) {
+      const timeTooltip = this.getChild('timeTooltip');
+      if (!timeTooltip) {
+        return;
+      }
+      const time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+      timeTooltip.updateTime(seekBarRect, seekBarPoint, time);
+    }
+  }
+
+  /**
+   * Default options for {@link PlayProgressBar}.
+   *
+   * @type {Object}
+   * @private
+   */
+  PlayProgressBar.prototype.options_ = {
+    children: []
+  };
+
+  // Time tooltips should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    PlayProgressBar.prototype.options_.children.push('timeTooltip');
+  }
+  Component$1.registerComponent('PlayProgressBar', PlayProgressBar);
+
+  /**
+   * @file mouse-time-display.js
+   */
+
+  /**
+   * The {@link MouseTimeDisplay} component tracks mouse movement over the
+   * {@link ProgressControl}. It displays an indicator and a {@link TimeTooltip}
+   * indicating the time which is represented by a given point in the
+   * {@link ProgressControl}.
+   *
+   * @extends Component
+   */
+  class MouseTimeDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-mouse-display'
+      });
+    }
+
+    /**
+     * Enqueues updates to its own DOM as well as the DOM of its
+     * {@link TimeTooltip} child.
+     *
+     * @param {Object} seekBarRect
+     *        The `ClientRect` for the {@link SeekBar} element.
+     *
+     * @param {number} seekBarPoint
+     *        A number from 0 to 1, representing a horizontal reference point
+     *        from the left edge of the {@link SeekBar}
+     */
+    update(seekBarRect, seekBarPoint) {
+      const time = seekBarPoint * this.player_.duration();
+      this.getChild('timeTooltip').updateTime(seekBarRect, seekBarPoint, time, () => {
+        this.el_.style.left = `${seekBarRect.width * seekBarPoint}px`;
+      });
+    }
+  }
+
+  /**
+   * Default options for `MouseTimeDisplay`
+   *
+   * @type {Object}
+   * @private
+   */
+  MouseTimeDisplay.prototype.options_ = {
+    children: ['timeTooltip']
+  };
+  Component$1.registerComponent('MouseTimeDisplay', MouseTimeDisplay);
+
+  /**
+   * @file seek-bar.js
+   */
+
+  // The number of seconds the `step*` functions move the timeline.
+  const STEP_SECONDS = 5;
+
+  // The multiplier of STEP_SECONDS that PgUp/PgDown move the timeline.
+  const PAGE_KEY_MULTIPLIER = 12;
+
+  /**
+   * Seek bar and container for the progress bars. Uses {@link PlayProgressBar}
+   * as its `bar`.
+   *
+   * @extends Slider
+   */
+  class SeekBar extends Slider {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setEventHandlers_();
+    }
+
+    /**
+     * Sets the event handlers
+     *
+     * @private
+     */
+    setEventHandlers_() {
+      this.update_ = bind_(this, this.update);
+      this.update = throttle(this.update_, UPDATE_REFRESH_INTERVAL);
+      this.on(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
+      if (this.player_.liveTracker) {
+        this.on(this.player_.liveTracker, 'liveedgechange', this.update);
+      }
+
+      // when playing, let's ensure we smoothly update the play progress bar
+      // via an interval
+      this.updateInterval = null;
+      this.enableIntervalHandler_ = e => this.enableInterval_(e);
+      this.disableIntervalHandler_ = e => this.disableInterval_(e);
+      this.on(this.player_, ['playing'], this.enableIntervalHandler_);
+      this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
+
+      // we don't need to update the play progress if the document is hidden,
+      // also, this causes the CPU to spike and eventually crash the page on IE11.
+      if ('hidden' in document && 'visibilityState' in document) {
+        this.on(document, 'visibilitychange', this.toggleVisibility_);
+      }
+    }
+    toggleVisibility_(e) {
+      if (document.visibilityState === 'hidden') {
+        this.cancelNamedAnimationFrame('SeekBar#update');
+        this.cancelNamedAnimationFrame('Slider#update');
+        this.disableInterval_(e);
+      } else {
+        if (!this.player_.ended() && !this.player_.paused()) {
+          this.enableInterval_();
+        }
+
+        // we just switched back to the page and someone may be looking, so, update ASAP
+        this.update();
+      }
+    }
+    enableInterval_() {
+      if (this.updateInterval) {
+        return;
+      }
+      this.updateInterval = this.setInterval(this.update, UPDATE_REFRESH_INTERVAL);
+    }
+    disableInterval_(e) {
+      if (this.player_.liveTracker && this.player_.liveTracker.isLive() && e && e.type !== 'ended') {
+        return;
+      }
+      if (!this.updateInterval) {
+        return;
+      }
+      this.clearInterval(this.updateInterval);
+      this.updateInterval = null;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-progress-holder'
+      }, {
+        'aria-label': this.localize('Progress Bar')
+      });
+    }
+
+    /**
+     * This function updates the play progress bar and accessibility
+     * attributes to whatever is passed in.
+     *
+     * @param {Event} [event]
+     *        The `timeupdate` or `ended` event that caused this to run.
+     *
+     * @listens Player#timeupdate
+     *
+     * @return {number}
+     *          The current percent at a number from 0-1
+     */
+    update(event) {
+      // ignore updates while the tab is hidden
+      if (document.visibilityState === 'hidden') {
+        return;
+      }
+      const percent = super.update();
+      this.requestNamedAnimationFrame('SeekBar#update', () => {
+        const currentTime = this.player_.ended() ? this.player_.duration() : this.getCurrentTime_();
+        const liveTracker = this.player_.liveTracker;
+        let duration = this.player_.duration();
+        if (liveTracker && liveTracker.isLive()) {
+          duration = this.player_.liveTracker.liveCurrentTime();
+        }
+        if (this.percent_ !== percent) {
+          // machine readable value of progress bar (percentage complete)
+          this.el_.setAttribute('aria-valuenow', (percent * 100).toFixed(2));
+          this.percent_ = percent;
+        }
+        if (this.currentTime_ !== currentTime || this.duration_ !== duration) {
+          // human readable value of progress bar (time complete)
+          this.el_.setAttribute('aria-valuetext', this.localize('progress bar timing: currentTime={1} duration={2}', [formatTime(currentTime, duration), formatTime(duration, duration)], '{1} of {2}'));
+          this.currentTime_ = currentTime;
+          this.duration_ = duration;
+        }
+
+        // update the progress bar time tooltip with the current time
+        if (this.bar) {
+          this.bar.update(getBoundingClientRect(this.el()), this.getProgress());
+        }
+      });
+      return percent;
+    }
+
+    /**
+     * Prevent liveThreshold from causing seeks to seem like they
+     * are not happening from a user perspective.
+     *
+     * @param {number} ct
+     *        current time to seek to
+     */
+    userSeek_(ct) {
+      if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+        this.player_.liveTracker.nextSeekedFromUser();
+      }
+      this.player_.currentTime(ct);
+    }
+
+    /**
+     * Get the value of current time but allows for smooth scrubbing,
+     * when player can't keep up.
+     *
+     * @return {number}
+     *         The current time value to display
+     *
+     * @private
+     */
+    getCurrentTime_() {
+      return this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+    }
+
+    /**
+     * Get the percentage of media played so far.
+     *
+     * @return {number}
+     *         The percentage of media played so far (0 to 1).
+     */
+    getPercent() {
+      const currentTime = this.getCurrentTime_();
+      let percent;
+      const liveTracker = this.player_.liveTracker;
+      if (liveTracker && liveTracker.isLive()) {
+        percent = (currentTime - liveTracker.seekableStart()) / liveTracker.liveWindow();
+
+        // prevent the percent from changing at the live edge
+        if (liveTracker.atLiveEdge()) {
+          percent = 1;
+        }
+      } else {
+        percent = currentTime / this.player_.duration();
+      }
+      return percent;
+    }
+
+    /**
+     * Handle mouse down on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mousedown` event that caused this to run.
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+
+      // Stop event propagation to prevent double fire in progress-control.js
+      event.stopPropagation();
+      this.videoWasPlaying = !this.player_.paused();
+      this.player_.pause();
+      super.handleMouseDown(event);
+    }
+
+    /**
+     * Handle mouse move on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mousemove` event that caused this to run.
+     * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false
+     *
+     * @listens mousemove
+     */
+    handleMouseMove(event, mouseDown = false) {
+      if (!isSingleLeftClick(event) || isNaN(this.player_.duration())) {
+        return;
+      }
+      if (!mouseDown && !this.player_.scrubbing()) {
+        this.player_.scrubbing(true);
+      }
+      let newTime;
+      const distance = this.calculateDistance(event);
+      const liveTracker = this.player_.liveTracker;
+      if (!liveTracker || !liveTracker.isLive()) {
+        newTime = distance * this.player_.duration();
+
+        // Don't let video end while scrubbing.
+        if (newTime === this.player_.duration()) {
+          newTime = newTime - 0.1;
+        }
+      } else {
+        if (distance >= 0.99) {
+          liveTracker.seekToLiveEdge();
+          return;
+        }
+        const seekableStart = liveTracker.seekableStart();
+        const seekableEnd = liveTracker.liveCurrentTime();
+        newTime = seekableStart + distance * liveTracker.liveWindow();
+
+        // Don't let video end while scrubbing.
+        if (newTime >= seekableEnd) {
+          newTime = seekableEnd;
+        }
+
+        // Compensate for precision differences so that currentTime is not less
+        // than seekable start
+        if (newTime <= seekableStart) {
+          newTime = seekableStart + 0.1;
+        }
+
+        // On android seekableEnd can be Infinity sometimes,
+        // this will cause newTime to be Infinity, which is
+        // not a valid currentTime.
+        if (newTime === Infinity) {
+          return;
+        }
+      }
+
+      // Set new time (tell player to seek to new time)
+      this.userSeek_(newTime);
+      if (this.player_.options_.enableSmoothSeeking) {
+        this.update();
+      }
+    }
+    enable() {
+      super.enable();
+      const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+      if (!mouseTimeDisplay) {
+        return;
+      }
+      mouseTimeDisplay.show();
+    }
+    disable() {
+      super.disable();
+      const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+      if (!mouseTimeDisplay) {
+        return;
+      }
+      mouseTimeDisplay.hide();
+    }
+
+    /**
+     * Handle mouse up on seek bar
+     *
+     * @param {MouseEvent} event
+     *        The `mouseup` event that caused this to run.
+     *
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      super.handleMouseUp(event);
+
+      // Stop event propagation to prevent double fire in progress-control.js
+      if (event) {
+        event.stopPropagation();
+      }
+      this.player_.scrubbing(false);
+
+      /**
+       * Trigger timeupdate because we're done seeking and the time has changed.
+       * This is particularly useful for if the player is paused to time the time displays.
+       *
+       * @event Tech#timeupdate
+       * @type {Event}
+       */
+      this.player_.trigger({
+        type: 'timeupdate',
+        target: this,
+        manuallyTriggered: true
+      });
+      if (this.videoWasPlaying) {
+        silencePromise(this.player_.play());
+      } else {
+        // We're done seeking and the time has changed.
+        // If the player is paused, make sure we display the correct time on the seek bar.
+        this.update_();
+      }
+    }
+
+    /**
+     * Move more quickly fast forward for keyboard-only users
+     */
+    stepForward() {
+      this.userSeek_(this.player_.currentTime() + STEP_SECONDS);
+    }
+
+    /**
+     * Move more quickly rewind for keyboard-only users
+     */
+    stepBack() {
+      this.userSeek_(this.player_.currentTime() - STEP_SECONDS);
+    }
+
+    /**
+     * Toggles the playback state of the player
+     * This gets called when enter or space is used on the seekbar
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called
+     *
+     */
+    handleAction(event) {
+      if (this.player_.paused()) {
+        this.player_.play();
+      } else {
+        this.player_.pause();
+      }
+    }
+
+    /**
+     * Called when this SeekBar has focus and a key gets pressed down.
+     * Supports the following keys:
+     *
+     *   Space or Enter key fire a click event
+     *   Home key moves to start of the timeline
+     *   End key moves to end of the timeline
+     *   Digit "0" through "9" keys move to 0%, 10% ... 80%, 90% of the timeline
+     *   PageDown key moves back a larger step than ArrowDown
+     *   PageUp key moves forward a large step
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      const liveTracker = this.player_.liveTracker;
+      if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.handleAction(event);
+      } else if (keycode.isEventKey(event, 'Home')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(0);
+      } else if (keycode.isEventKey(event, 'End')) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (liveTracker && liveTracker.isLive()) {
+          this.userSeek_(liveTracker.liveCurrentTime());
+        } else {
+          this.userSeek_(this.player_.duration());
+        }
+      } else if (/^[0-9]$/.test(keycode(event))) {
+        event.preventDefault();
+        event.stopPropagation();
+        const gotoFraction = (keycode.codes[keycode(event)] - keycode.codes['0']) * 10.0 / 100.0;
+        if (liveTracker && liveTracker.isLive()) {
+          this.userSeek_(liveTracker.seekableStart() + liveTracker.liveWindow() * gotoFraction);
+        } else {
+          this.userSeek_(this.player_.duration() * gotoFraction);
+        }
+      } else if (keycode.isEventKey(event, 'PgDn')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(this.player_.currentTime() - STEP_SECONDS * PAGE_KEY_MULTIPLIER);
+      } else if (keycode.isEventKey(event, 'PgUp')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userSeek_(this.player_.currentTime() + STEP_SECONDS * PAGE_KEY_MULTIPLIER);
+      } else {
+        // Pass keydown handling up for unsupported keys
+        super.handleKeyDown(event);
+      }
+    }
+    dispose() {
+      this.disableInterval_();
+      this.off(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
+      if (this.player_.liveTracker) {
+        this.off(this.player_.liveTracker, 'liveedgechange', this.update);
+      }
+      this.off(this.player_, ['playing'], this.enableIntervalHandler_);
+      this.off(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
+
+      // we don't need to update the play progress if the document is hidden,
+      // also, this causes the CPU to spike and eventually crash the page on IE11.
+      if ('hidden' in document && 'visibilityState' in document) {
+        this.off(document, 'visibilitychange', this.toggleVisibility_);
+      }
+      super.dispose();
+    }
+  }
+
+  /**
+   * Default options for the `SeekBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  SeekBar.prototype.options_ = {
+    children: ['loadProgressBar', 'playProgressBar'],
+    barName: 'playProgressBar'
+  };
+
+  // MouseTimeDisplay tooltips should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    SeekBar.prototype.options_.children.splice(1, 0, 'mouseTimeDisplay');
+  }
+  Component$1.registerComponent('SeekBar', SeekBar);
+
+  /**
+   * @file progress-control.js
+   */
+
+  /**
+   * The Progress Control component contains the seek bar, load progress,
+   * and play progress.
+   *
+   * @extends Component
+   */
+  class ProgressControl extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.handleMouseMove = throttle(bind_(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+      this.throttledHandleMouseSeek = throttle(bind_(this, this.handleMouseSeek), UPDATE_REFRESH_INTERVAL);
+      this.handleMouseUpHandler_ = e => this.handleMouseUp(e);
+      this.handleMouseDownHandler_ = e => this.handleMouseDown(e);
+      this.enable();
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-progress-control vjs-control'
+      });
+    }
+
+    /**
+     * When the mouse moves over the `ProgressControl`, the pointer position
+     * gets passed down to the `MouseTimeDisplay` component.
+     *
+     * @param {Event} event
+     *        The `mousemove` event that caused this function to run.
+     *
+     * @listen mousemove
+     */
+    handleMouseMove(event) {
+      const seekBar = this.getChild('seekBar');
+      if (!seekBar) {
+        return;
+      }
+      const playProgressBar = seekBar.getChild('playProgressBar');
+      const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
+      if (!playProgressBar && !mouseTimeDisplay) {
+        return;
+      }
+      const seekBarEl = seekBar.el();
+      const seekBarRect = findPosition(seekBarEl);
+      let seekBarPoint = getPointerPosition(seekBarEl, event).x;
+
+      // The default skin has a gap on either side of the `SeekBar`. This means
+      // that it's possible to trigger this behavior outside the boundaries of
+      // the `SeekBar`. This ensures we stay within it at all times.
+      seekBarPoint = clamp(seekBarPoint, 0, 1);
+      if (mouseTimeDisplay) {
+        mouseTimeDisplay.update(seekBarRect, seekBarPoint);
+      }
+      if (playProgressBar) {
+        playProgressBar.update(seekBarRect, seekBar.getProgress());
+      }
+    }
+
+    /**
+     * A throttled version of the {@link ProgressControl#handleMouseSeek} listener.
+     *
+     * @method ProgressControl#throttledHandleMouseSeek
+     * @param {Event} event
+     *        The `mousemove` event that caused this function to run.
+     *
+     * @listen mousemove
+     * @listen touchmove
+     */
+
+    /**
+     * Handle `mousemove` or `touchmove` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousemove
+     * @listens touchmove
+     */
+    handleMouseSeek(event) {
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseMove(event);
+      }
+    }
+
+    /**
+     * Are controls are currently enabled for this progress control.
+     *
+     * @return {boolean}
+     *         true if controls are enabled, false otherwise
+     */
+    enabled() {
+      return this.enabled_;
+    }
+
+    /**
+     * Disable all controls on the progress control and its children
+     */
+    disable() {
+      this.children().forEach(child => child.disable && child.disable());
+      if (!this.enabled()) {
+        return;
+      }
+      this.off(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
+      this.off(this.el_, 'mousemove', this.handleMouseMove);
+      this.removeListenersAddedOnMousedownAndTouchstart();
+      this.addClass('disabled');
+      this.enabled_ = false;
+
+      // Restore normal playback state if controls are disabled while scrubbing
+      if (this.player_.scrubbing()) {
+        const seekBar = this.getChild('seekBar');
+        this.player_.scrubbing(false);
+        if (seekBar.videoWasPlaying) {
+          silencePromise(this.player_.play());
+        }
+      }
+    }
+
+    /**
+     * Enable all controls on the progress control and its children
+     */
+    enable() {
+      this.children().forEach(child => child.enable && child.enable());
+      if (this.enabled()) {
+        return;
+      }
+      this.on(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
+      this.on(this.el_, 'mousemove', this.handleMouseMove);
+      this.removeClass('disabled');
+      this.enabled_ = true;
+    }
+
+    /**
+     * Cleanup listeners after the user finishes interacting with the progress controls
+     */
+    removeListenersAddedOnMousedownAndTouchstart() {
+      const doc = this.el_.ownerDocument;
+      this.off(doc, 'mousemove', this.throttledHandleMouseSeek);
+      this.off(doc, 'touchmove', this.throttledHandleMouseSeek);
+      this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.off(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseDown(event) {
+      const doc = this.el_.ownerDocument;
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseDown(event);
+      }
+      this.on(doc, 'mousemove', this.throttledHandleMouseSeek);
+      this.on(doc, 'touchmove', this.throttledHandleMouseSeek);
+      this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.on(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `ProgressControl`.
+     *
+     * @param {Event} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      const seekBar = this.getChild('seekBar');
+      if (seekBar) {
+        seekBar.handleMouseUp(event);
+      }
+      this.removeListenersAddedOnMousedownAndTouchstart();
+    }
+  }
+
+  /**
+   * Default options for `ProgressControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  ProgressControl.prototype.options_ = {
+    children: ['seekBar']
+  };
+  Component$1.registerComponent('ProgressControl', ProgressControl);
+
+  /**
+   * @file picture-in-picture-toggle.js
+   */
+
+  /**
+   * Toggle Picture-in-Picture mode
+   *
+   * @extends Button
+   */
+  class PictureInPictureToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @listens Player#enterpictureinpicture
+     * @listens Player#leavepictureinpicture
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('picture-in-picture-enter');
+      this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], e => this.handlePictureInPictureChange(e));
+      this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], e => this.handlePictureInPictureEnabledChange(e));
+      this.on(player, ['loadedmetadata', 'audioonlymodechange', 'audiopostermodechange'], () => this.handlePictureInPictureAudioModeChange());
+
+      // TODO: Deactivate button on player emptied event.
+      this.disable();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-picture-in-picture-control vjs-hidden ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Displays or hides the button depending on the audio mode detection.
+     * Exits picture-in-picture if it is enabled when switching to audio mode.
+     */
+    handlePictureInPictureAudioModeChange() {
+      // This audio detection will not detect HLS or DASH audio-only streams because there was no reliable way to detect them at the time
+      const isSourceAudio = this.player_.currentType().substring(0, 5) === 'audio';
+      const isAudioMode = isSourceAudio || this.player_.audioPosterMode() || this.player_.audioOnlyMode();
+      if (!isAudioMode) {
+        this.show();
+        return;
+      }
+      if (this.player_.isInPictureInPicture()) {
+        this.player_.exitPictureInPicture();
+      }
+      this.hide();
+    }
+
+    /**
+     * Enables or disables button based on availability of a Picture-In-Picture mode.
+     *
+     * Enabled if
+     * - `player.options().enableDocumentPictureInPicture` is true and
+     *   window.documentPictureInPicture is available; or
+     * - `player.disablePictureInPicture()` is false and
+     *   element.requestPictureInPicture is available
+     */
+    handlePictureInPictureEnabledChange() {
+      if (document.pictureInPictureEnabled && this.player_.disablePictureInPicture() === false || this.player_.options_.enableDocumentPictureInPicture && 'documentPictureInPicture' in window) {
+        this.enable();
+      } else {
+        this.disable();
+      }
+    }
+
+    /**
+     * Handles enterpictureinpicture and leavepictureinpicture on the player and change control text accordingly.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#enterpictureinpicture} or {@link Player#leavepictureinpicture} event that caused this function to be
+     *        called.
+     *
+     * @listens Player#enterpictureinpicture
+     * @listens Player#leavepictureinpicture
+     */
+    handlePictureInPictureChange(event) {
+      if (this.player_.isInPictureInPicture()) {
+        this.setIcon('picture-in-picture-exit');
+        this.controlText('Exit Picture-in-Picture');
+      } else {
+        this.setIcon('picture-in-picture-enter');
+        this.controlText('Picture-in-Picture');
+      }
+      this.handlePictureInPictureEnabledChange();
+    }
+
+    /**
+     * This gets called when an `PictureInPictureToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (!this.player_.isInPictureInPicture()) {
+        this.player_.requestPictureInPicture();
+      } else {
+        this.player_.exitPictureInPicture();
+      }
+    }
+
+    /**
+     * Show the `Component`s element if it is hidden by removing the
+     * 'vjs-hidden' class name from it only in browsers that support the Picture-in-Picture API.
+     */
+    show() {
+      // Does not allow to display the pictureInPictureToggle in browsers that do not support the Picture-in-Picture API, e.g. Firefox.
+      if (typeof document.exitPictureInPicture !== 'function') {
+        return;
+      }
+      super.show();
+    }
+  }
+
+  /**
+   * The text that should display over the `PictureInPictureToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PictureInPictureToggle.prototype.controlText_ = 'Picture-in-Picture';
+  Component$1.registerComponent('PictureInPictureToggle', PictureInPictureToggle);
+
+  /**
+   * @file fullscreen-toggle.js
+   */
+
+  /**
+   * Toggle fullscreen video
+   *
+   * @extends Button
+   */
+  class FullscreenToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.setIcon('fullscreen-enter');
+      this.on(player, 'fullscreenchange', e => this.handleFullscreenChange(e));
+      if (document[player.fsApi_.fullscreenEnabled] === false) {
+        this.disable();
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-fullscreen-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Handles fullscreenchange on the player and change control text accordingly.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#fullscreenchange} event that caused this function to be
+     *        called.
+     *
+     * @listens Player#fullscreenchange
+     */
+    handleFullscreenChange(event) {
+      if (this.player_.isFullscreen()) {
+        this.controlText('Exit Fullscreen');
+        this.setIcon('fullscreen-exit');
+      } else {
+        this.controlText('Fullscreen');
+        this.setIcon('fullscreen-enter');
+      }
+    }
+
+    /**
+     * This gets called when an `FullscreenToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (!this.player_.isFullscreen()) {
+        this.player_.requestFullscreen();
+      } else {
+        this.player_.exitFullscreen();
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `FullscreenToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  FullscreenToggle.prototype.controlText_ = 'Fullscreen';
+  Component$1.registerComponent('FullscreenToggle', FullscreenToggle);
+
+  /**
+   * Check if volume control is supported and if it isn't hide the
+   * `Component` that was passed  using the `vjs-hidden` class.
+   *
+   * @param { import('../../component').default } self
+   *        The component that should be hidden if volume is unsupported
+   *
+   * @param { import('../../player').default } player
+   *        A reference to the player
+   *
+   * @private
+   */
+  const checkVolumeSupport = function (self, player) {
+    // hide volume controls when they're not supported by the current tech
+    if (player.tech_ && !player.tech_.featuresVolumeControl) {
+      self.addClass('vjs-hidden');
+    }
+    self.on(player, 'loadstart', function () {
+      if (!player.tech_.featuresVolumeControl) {
+        self.addClass('vjs-hidden');
+      } else {
+        self.removeClass('vjs-hidden');
+      }
+    });
+  };
+
+  /**
+   * @file volume-level.js
+   */
+
+  /**
+   * Shows volume level
+   *
+   * @extends Component
+   */
+  class VolumeLevel extends Component$1 {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl('div', {
+        className: 'vjs-volume-level'
+      });
+      this.setIcon('circle', el);
+      el.appendChild(super.createEl('span', {
+        className: 'vjs-control-text'
+      }));
+      return el;
+    }
+  }
+  Component$1.registerComponent('VolumeLevel', VolumeLevel);
+
+  /**
+   * @file volume-level-tooltip.js
+   */
+
+  /**
+   * Volume level tooltips display a volume above or side by side the volume bar.
+   *
+   * @extends Component
+   */
+  class VolumeLevelTooltip extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the volume tooltip DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-volume-tooltip'
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Updates the position of the tooltip relative to the `VolumeBar` and
+     * its content text.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     */
+    update(rangeBarRect, rangeBarPoint, vertical, content) {
+      if (!vertical) {
+        const tooltipRect = getBoundingClientRect(this.el_);
+        const playerRect = getBoundingClientRect(this.player_.el());
+        const volumeBarPointPx = rangeBarRect.width * rangeBarPoint;
+        if (!playerRect || !tooltipRect) {
+          return;
+        }
+        const spaceLeftOfPoint = rangeBarRect.left - playerRect.left + volumeBarPointPx;
+        const spaceRightOfPoint = rangeBarRect.width - volumeBarPointPx + (playerRect.right - rangeBarRect.right);
+        let pullTooltipBy = tooltipRect.width / 2;
+        if (spaceLeftOfPoint < pullTooltipBy) {
+          pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
+        } else if (spaceRightOfPoint < pullTooltipBy) {
+          pullTooltipBy = spaceRightOfPoint;
+        }
+        if (pullTooltipBy < 0) {
+          pullTooltipBy = 0;
+        } else if (pullTooltipBy > tooltipRect.width) {
+          pullTooltipBy = tooltipRect.width;
+        }
+        this.el_.style.right = `-${pullTooltipBy}px`;
+      }
+      this.write(`${content}%`);
+    }
+
+    /**
+     * Write the volume to the tooltip DOM element.
+     *
+     * @param {string} content
+     *        The formatted volume for the tooltip.
+     */
+    write(content) {
+      textContent(this.el_, content);
+    }
+
+    /**
+     * Updates the position of the volume tooltip relative to the `VolumeBar`.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     * @param {number} volume
+     *        The volume level to update the tooltip to
+     *
+     * @param {Function} cb
+     *        A function that will be called during the request animation frame
+     *        for tooltips that need to do additional animations from the default
+     */
+    updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, cb) {
+      this.requestNamedAnimationFrame('VolumeLevelTooltip#updateVolume', () => {
+        this.update(rangeBarRect, rangeBarPoint, vertical, volume.toFixed(0));
+        if (cb) {
+          cb();
+        }
+      });
+    }
+  }
+  Component$1.registerComponent('VolumeLevelTooltip', VolumeLevelTooltip);
+
+  /**
+   * @file mouse-volume-level-display.js
+   */
+
+  /**
+   * The {@link MouseVolumeLevelDisplay} component tracks mouse movement over the
+   * {@link VolumeControl}. It displays an indicator and a {@link VolumeLevelTooltip}
+   * indicating the volume level which is represented by a given point in the
+   * {@link VolumeBar}.
+   *
+   * @extends Component
+   */
+  class MouseVolumeLevelDisplay extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The {@link Player} that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.update = throttle(bind_(this, this.update), UPDATE_REFRESH_INTERVAL);
+    }
+
+    /**
+     * Create the DOM element for this class.
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-mouse-display'
+      });
+    }
+
+    /**
+     * Enquires updates to its own DOM as well as the DOM of its
+     * {@link VolumeLevelTooltip} child.
+     *
+     * @param {Object} rangeBarRect
+     *        The `ClientRect` for the {@link VolumeBar} element.
+     *
+     * @param {number} rangeBarPoint
+     *        A number from 0 to 1, representing a horizontal/vertical reference point
+     *        from the left edge of the {@link VolumeBar}
+     *
+     * @param {boolean} vertical
+     *        Referees to the Volume control position
+     *        in the control bar{@link VolumeControl}
+     *
+     */
+    update(rangeBarRect, rangeBarPoint, vertical) {
+      const volume = 100 * rangeBarPoint;
+      this.getChild('volumeLevelTooltip').updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, () => {
+        if (vertical) {
+          this.el_.style.bottom = `${rangeBarRect.height * rangeBarPoint}px`;
+        } else {
+          this.el_.style.left = `${rangeBarRect.width * rangeBarPoint}px`;
+        }
+      });
+    }
+  }
+
+  /**
+   * Default options for `MouseVolumeLevelDisplay`
+   *
+   * @type {Object}
+   * @private
+   */
+  MouseVolumeLevelDisplay.prototype.options_ = {
+    children: ['volumeLevelTooltip']
+  };
+  Component$1.registerComponent('MouseVolumeLevelDisplay', MouseVolumeLevelDisplay);
+
+  /**
+   * @file volume-bar.js
+   */
+
+  /**
+   * The bar that contains the volume level and can be clicked on to adjust the level
+   *
+   * @extends Slider
+   */
+  class VolumeBar extends Slider {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on('slideractive', e => this.updateLastVolume_(e));
+      this.on(player, 'volumechange', e => this.updateARIAAttributes(e));
+      player.ready(() => this.updateARIAAttributes());
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-volume-bar vjs-slider-bar'
+      }, {
+        'aria-label': this.localize('Volume Level'),
+        'aria-live': 'polite'
+      });
+    }
+
+    /**
+     * Handle mouse down on volume bar
+     *
+     * @param {Event} event
+     *        The `mousedown` event that caused this to run.
+     *
+     * @listens mousedown
+     */
+    handleMouseDown(event) {
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+      super.handleMouseDown(event);
+    }
+
+    /**
+     * Handle movement events on the {@link VolumeMenuButton}.
+     *
+     * @param {Event} event
+     *        The event that caused this function to run.
+     *
+     * @listens mousemove
+     */
+    handleMouseMove(event) {
+      const mouseVolumeLevelDisplay = this.getChild('mouseVolumeLevelDisplay');
+      if (mouseVolumeLevelDisplay) {
+        const volumeBarEl = this.el();
+        const volumeBarRect = getBoundingClientRect(volumeBarEl);
+        const vertical = this.vertical();
+        let volumeBarPoint = getPointerPosition(volumeBarEl, event);
+        volumeBarPoint = vertical ? volumeBarPoint.y : volumeBarPoint.x;
+        // The default skin has a gap on either side of the `VolumeBar`. This means
+        // that it's possible to trigger this behavior outside the boundaries of
+        // the `VolumeBar`. This ensures we stay within it at all times.
+        volumeBarPoint = clamp(volumeBarPoint, 0, 1);
+        mouseVolumeLevelDisplay.update(volumeBarRect, volumeBarPoint, vertical);
+      }
+      if (!isSingleLeftClick(event)) {
+        return;
+      }
+      this.checkMuted();
+      this.player_.volume(this.calculateDistance(event));
+    }
+
+    /**
+     * If the player is muted unmute it.
+     */
+    checkMuted() {
+      if (this.player_.muted()) {
+        this.player_.muted(false);
+      }
+    }
+
+    /**
+     * Get percent of volume level
+     *
+     * @return {number}
+     *         Volume level percent as a decimal number.
+     */
+    getPercent() {
+      if (this.player_.muted()) {
+        return 0;
+      }
+      return this.player_.volume();
+    }
+
+    /**
+     * Increase volume level for keyboard users
+     */
+    stepForward() {
+      this.checkMuted();
+      this.player_.volume(this.player_.volume() + 0.1);
+    }
+
+    /**
+     * Decrease volume level for keyboard users
+     */
+    stepBack() {
+      this.checkMuted();
+      this.player_.volume(this.player_.volume() - 0.1);
+    }
+
+    /**
+     * Update ARIA accessibility attributes
+     *
+     * @param {Event} [event]
+     *        The `volumechange` event that caused this function to run.
+     *
+     * @listens Player#volumechange
+     */
+    updateARIAAttributes(event) {
+      const ariaValue = this.player_.muted() ? 0 : this.volumeAsPercentage_();
+      this.el_.setAttribute('aria-valuenow', ariaValue);
+      this.el_.setAttribute('aria-valuetext', ariaValue + '%');
+    }
+
+    /**
+     * Returns the current value of the player volume as a percentage
+     *
+     * @private
+     */
+    volumeAsPercentage_() {
+      return Math.round(this.player_.volume() * 100);
+    }
+
+    /**
+     * When user starts dragging the VolumeBar, store the volume and listen for
+     * the end of the drag. When the drag ends, if the volume was set to zero,
+     * set lastVolume to the stored volume.
+     *
+     * @listens slideractive
+     * @private
+     */
+    updateLastVolume_() {
+      const volumeBeforeDrag = this.player_.volume();
+      this.one('sliderinactive', () => {
+        if (this.player_.volume() === 0) {
+          this.player_.lastVolume_(volumeBeforeDrag);
+        }
+      });
+    }
+  }
+
+  /**
+   * Default options for the `VolumeBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumeBar.prototype.options_ = {
+    children: ['volumeLevel'],
+    barName: 'volumeLevel'
+  };
+
+  // MouseVolumeLevelDisplay tooltip should not be added to a player on mobile devices
+  if (!IS_IOS && !IS_ANDROID) {
+    VolumeBar.prototype.options_.children.splice(0, 0, 'mouseVolumeLevelDisplay');
+  }
+
+  /**
+   * Call the update event for this Slider when this event happens on the player.
+   *
+   * @type {string}
+   */
+  VolumeBar.prototype.playerEvent = 'volumechange';
+  Component$1.registerComponent('VolumeBar', VolumeBar);
+
+  /**
+   * @file volume-control.js
+   */
+
+  /**
+   * The component for controlling the volume level
+   *
+   * @extends Component
+   */
+  class VolumeControl extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.vertical = options.vertical || false;
+
+      // Pass the vertical option down to the VolumeBar if
+      // the VolumeBar is turned on.
+      if (typeof options.volumeBar === 'undefined' || isPlain(options.volumeBar)) {
+        options.volumeBar = options.volumeBar || {};
+        options.volumeBar.vertical = options.vertical;
+      }
+      super(player, options);
+
+      // hide this control if volume support is missing
+      checkVolumeSupport(this, player);
+      this.throttledHandleMouseMove = throttle(bind_(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+      this.handleMouseUpHandler_ = e => this.handleMouseUp(e);
+      this.on('mousedown', e => this.handleMouseDown(e));
+      this.on('touchstart', e => this.handleMouseDown(e));
+      this.on('mousemove', e => this.handleMouseMove(e));
+
+      // while the slider is active (the mouse has been pressed down and
+      // is dragging) or in focus we do not want to hide the VolumeBar
+      this.on(this.volumeBar, ['focus', 'slideractive'], () => {
+        this.volumeBar.addClass('vjs-slider-active');
+        this.addClass('vjs-slider-active');
+        this.trigger('slideractive');
+      });
+      this.on(this.volumeBar, ['blur', 'sliderinactive'], () => {
+        this.volumeBar.removeClass('vjs-slider-active');
+        this.removeClass('vjs-slider-active');
+        this.trigger('sliderinactive');
+      });
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      let orientationClass = 'vjs-volume-horizontal';
+      if (this.options_.vertical) {
+        orientationClass = 'vjs-volume-vertical';
+      }
+      return super.createEl('div', {
+        className: `vjs-volume-control vjs-control ${orientationClass}`
+      });
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseDown(event) {
+      const doc = this.el_.ownerDocument;
+      this.on(doc, 'mousemove', this.throttledHandleMouseMove);
+      this.on(doc, 'touchmove', this.throttledHandleMouseMove);
+      this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.on(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mouseup` or `touchend` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mouseup` or `touchend` event that triggered this function.
+     *
+     * @listens touchend
+     * @listens mouseup
+     */
+    handleMouseUp(event) {
+      const doc = this.el_.ownerDocument;
+      this.off(doc, 'mousemove', this.throttledHandleMouseMove);
+      this.off(doc, 'touchmove', this.throttledHandleMouseMove);
+      this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+      this.off(doc, 'touchend', this.handleMouseUpHandler_);
+    }
+
+    /**
+     * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        `mousedown` or `touchstart` event that triggered this function
+     *
+     * @listens mousedown
+     * @listens touchstart
+     */
+    handleMouseMove(event) {
+      this.volumeBar.handleMouseMove(event);
+    }
+  }
+
+  /**
+   * Default options for the `VolumeControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumeControl.prototype.options_ = {
+    children: ['volumeBar']
+  };
+  Component$1.registerComponent('VolumeControl', VolumeControl);
+
+  /**
+   * Check if muting volume is supported and if it isn't hide the mute toggle
+   * button.
+   *
+   * @param { import('../../component').default } self
+   *        A reference to the mute toggle button
+   *
+   * @param { import('../../player').default } player
+   *        A reference to the player
+   *
+   * @private
+   */
+  const checkMuteSupport = function (self, player) {
+    // hide mute toggle button if it's not supported by the current tech
+    if (player.tech_ && !player.tech_.featuresMuteControl) {
+      self.addClass('vjs-hidden');
+    }
+    self.on(player, 'loadstart', function () {
+      if (!player.tech_.featuresMuteControl) {
+        self.addClass('vjs-hidden');
+      } else {
+        self.removeClass('vjs-hidden');
+      }
+    });
+  };
+
+  /**
+   * @file mute-toggle.js
+   */
+
+  /**
+   * A button component for muting the audio.
+   *
+   * @extends Button
+   */
+  class MuteToggle extends Button {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+
+      // hide this control if volume support is missing
+      checkMuteSupport(this, player);
+      this.on(player, ['loadstart', 'volumechange'], e => this.update(e));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-mute-control ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * This gets called when an `MuteToggle` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const vol = this.player_.volume();
+      const lastVolume = this.player_.lastVolume_();
+      if (vol === 0) {
+        const volumeToSet = lastVolume < 0.1 ? 0.1 : lastVolume;
+        this.player_.volume(volumeToSet);
+        this.player_.muted(false);
+      } else {
+        this.player_.muted(this.player_.muted() ? false : true);
+      }
+    }
+
+    /**
+     * Update the `MuteToggle` button based on the state of `volume` and `muted`
+     * on the player.
+     *
+     * @param {Event} [event]
+     *        The {@link Player#loadstart} event if this function was called
+     *        through an event.
+     *
+     * @listens Player#loadstart
+     * @listens Player#volumechange
+     */
+    update(event) {
+      this.updateIcon_();
+      this.updateControlText_();
+    }
+
+    /**
+     * Update the appearance of the `MuteToggle` icon.
+     *
+     * Possible states (given `level` variable below):
+     * - 0: crossed out
+     * - 1: zero bars of volume
+     * - 2: one bar of volume
+     * - 3: two bars of volume
+     *
+     * @private
+     */
+    updateIcon_() {
+      const vol = this.player_.volume();
+      let level = 3;
+      this.setIcon('volume-high');
+
+      // in iOS when a player is loaded with muted attribute
+      // and volume is changed with a native mute button
+      // we want to make sure muted state is updated
+      if (IS_IOS && this.player_.tech_ && this.player_.tech_.el_) {
+        this.player_.muted(this.player_.tech_.el_.muted);
+      }
+      if (vol === 0 || this.player_.muted()) {
+        this.setIcon('volume-mute');
+        level = 0;
+      } else if (vol < 0.33) {
+        this.setIcon('volume-low');
+        level = 1;
+      } else if (vol < 0.67) {
+        this.setIcon('volume-medium');
+        level = 2;
+      }
+      removeClass(this.el_, [0, 1, 2, 3].reduce((str, i) => str + `${i ? ' ' : ''}vjs-vol-${i}`, ''));
+      addClass(this.el_, `vjs-vol-${level}`);
+    }
+
+    /**
+     * If `muted` has changed on the player, update the control text
+     * (`title` attribute on `vjs-mute-control` element and content of
+     * `vjs-control-text` element).
+     *
+     * @private
+     */
+    updateControlText_() {
+      const soundOff = this.player_.muted() || this.player_.volume() === 0;
+      const text = soundOff ? 'Unmute' : 'Mute';
+      if (this.controlText() !== text) {
+        this.controlText(text);
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `MuteToggle`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  MuteToggle.prototype.controlText_ = 'Mute';
+  Component$1.registerComponent('MuteToggle', MuteToggle);
+
+  /**
+   * @file volume-control.js
+   */
+
+  /**
+   * A Component to contain the MuteToggle and VolumeControl so that
+   * they can work together.
+   *
+   * @extends Component
+   */
+  class VolumePanel extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      if (typeof options.inline !== 'undefined') {
+        options.inline = options.inline;
+      } else {
+        options.inline = true;
+      }
+
+      // pass the inline option down to the VolumeControl as vertical if
+      // the VolumeControl is on.
+      if (typeof options.volumeControl === 'undefined' || isPlain(options.volumeControl)) {
+        options.volumeControl = options.volumeControl || {};
+        options.volumeControl.vertical = !options.inline;
+      }
+      super(player, options);
+
+      // this handler is used by mouse handler methods below
+      this.handleKeyPressHandler_ = e => this.handleKeyPress(e);
+      this.on(player, ['loadstart'], e => this.volumePanelState_(e));
+      this.on(this.muteToggle, 'keyup', e => this.handleKeyPress(e));
+      this.on(this.volumeControl, 'keyup', e => this.handleVolumeControlKeyUp(e));
+      this.on('keydown', e => this.handleKeyPress(e));
+      this.on('mouseover', e => this.handleMouseOver(e));
+      this.on('mouseout', e => this.handleMouseOut(e));
+
+      // while the slider is active (the mouse has been pressed down and
+      // is dragging) we do not want to hide the VolumeBar
+      this.on(this.volumeControl, ['slideractive'], this.sliderActive_);
+      this.on(this.volumeControl, ['sliderinactive'], this.sliderInactive_);
+    }
+
+    /**
+     * Add vjs-slider-active class to the VolumePanel
+     *
+     * @listens VolumeControl#slideractive
+     * @private
+     */
+    sliderActive_() {
+      this.addClass('vjs-slider-active');
+    }
+
+    /**
+     * Removes vjs-slider-active class to the VolumePanel
+     *
+     * @listens VolumeControl#sliderinactive
+     * @private
+     */
+    sliderInactive_() {
+      this.removeClass('vjs-slider-active');
+    }
+
+    /**
+     * Adds vjs-hidden or vjs-mute-toggle-only to the VolumePanel
+     * depending on MuteToggle and VolumeControl state
+     *
+     * @listens Player#loadstart
+     * @private
+     */
+    volumePanelState_() {
+      // hide volume panel if neither volume control or mute toggle
+      // are displayed
+      if (this.volumeControl.hasClass('vjs-hidden') && this.muteToggle.hasClass('vjs-hidden')) {
+        this.addClass('vjs-hidden');
+      }
+
+      // if only mute toggle is visible we don't want
+      // volume panel expanding when hovered or active
+      if (this.volumeControl.hasClass('vjs-hidden') && !this.muteToggle.hasClass('vjs-hidden')) {
+        this.addClass('vjs-mute-toggle-only');
+      }
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      let orientationClass = 'vjs-volume-panel-horizontal';
+      if (!this.options_.inline) {
+        orientationClass = 'vjs-volume-panel-vertical';
+      }
+      return super.createEl('div', {
+        className: `vjs-volume-panel vjs-control ${orientationClass}`
+      });
+    }
+
+    /**
+     * Dispose of the `volume-panel` and all child components.
+     */
+    dispose() {
+      this.handleMouseOut();
+      super.dispose();
+    }
+
+    /**
+     * Handles `keyup` events on the `VolumeControl`, looking for ESC, which closes
+     * the volume panel and sets focus on `MuteToggle`.
+     *
+     * @param {Event} event
+     *        The `keyup` event that caused this function to be called.
+     *
+     * @listens keyup
+     */
+    handleVolumeControlKeyUp(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        this.muteToggle.focus();
+      }
+    }
+
+    /**
+     * This gets called when a `VolumePanel` gains hover via a `mouseover` event.
+     * Turns on listening for `mouseover` event. When they happen it
+     * calls `this.handleMouseOver`.
+     *
+     * @param {Event} event
+     *        The `mouseover` event that caused this function to be called.
+     *
+     * @listens mouseover
+     */
+    handleMouseOver(event) {
+      this.addClass('vjs-hover');
+      on(document, 'keyup', this.handleKeyPressHandler_);
+    }
+
+    /**
+     * This gets called when a `VolumePanel` gains hover via a `mouseout` event.
+     * Turns on listening for `mouseout` event. When they happen it
+     * calls `this.handleMouseOut`.
+     *
+     * @param {Event} event
+     *        The `mouseout` event that caused this function to be called.
+     *
+     * @listens mouseout
+     */
+    handleMouseOut(event) {
+      this.removeClass('vjs-hover');
+      off(document, 'keyup', this.handleKeyPressHandler_);
+    }
+
+    /**
+     * Handles `keyup` event on the document or `keydown` event on the `VolumePanel`,
+     * looking for ESC, which hides the `VolumeControl`.
+     *
+     * @param {Event} event
+     *        The keypress that triggered this event.
+     *
+     * @listens keydown | keyup
+     */
+    handleKeyPress(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        this.handleMouseOut();
+      }
+    }
+  }
+
+  /**
+   * Default options for the `VolumeControl`
+   *
+   * @type {Object}
+   * @private
+   */
+  VolumePanel.prototype.options_ = {
+    children: ['muteToggle', 'volumeControl']
+  };
+  Component$1.registerComponent('VolumePanel', VolumePanel);
+
+  /**
+   * Button to skip forward a configurable amount of time
+   * through a video. Renders in the control bar.
+   *
+   * e.g. options: {controlBar: {skipButtons: forward: 5}}
+   *
+   * @extends Button
+   */
+  class SkipForward extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.validOptions = [5, 10, 30];
+      this.skipTime = this.getSkipForwardTime();
+      if (this.skipTime && this.validOptions.includes(this.skipTime)) {
+        this.setIcon(`forward-${this.skipTime}`);
+        this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime.toLocaleString(player.language())]));
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+    getSkipForwardTime() {
+      const playerOptions = this.options_.playerOptions;
+      return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.forward;
+    }
+    buildCSSClass() {
+      return `vjs-skip-forward-${this.getSkipForwardTime()} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * On click, skips forward in the duration/seekable range by a configurable amount of seconds.
+     * If the time left in the duration/seekable range is less than the configured 'skip forward' time,
+     * skips to end of duration/seekable range.
+     *
+     * Handle a click on a `SkipForward` button
+     *
+     * @param {EventTarget~Event} event
+     *        The `click` event that caused this function
+     *        to be called
+     */
+    handleClick(event) {
+      if (isNaN(this.player_.duration())) {
+        return;
+      }
+      const currentVideoTime = this.player_.currentTime();
+      const liveTracker = this.player_.liveTracker;
+      const duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
+      let newTime;
+      if (currentVideoTime + this.skipTime <= duration) {
+        newTime = currentVideoTime + this.skipTime;
+      } else {
+        newTime = duration;
+      }
+      this.player_.currentTime(newTime);
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime]));
+    }
+  }
+  SkipForward.prototype.controlText_ = 'Skip Forward';
+  Component$1.registerComponent('SkipForward', SkipForward);
+
+  /**
+   * Button to skip backward a configurable amount of time
+   * through a video. Renders in the control bar.
+   *
+   *  * e.g. options: {controlBar: {skipButtons: backward: 5}}
+   *
+   * @extends Button
+   */
+  class SkipBackward extends Button {
+    constructor(player, options) {
+      super(player, options);
+      this.validOptions = [5, 10, 30];
+      this.skipTime = this.getSkipBackwardTime();
+      if (this.skipTime && this.validOptions.includes(this.skipTime)) {
+        this.setIcon(`replay-${this.skipTime}`);
+        this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime.toLocaleString(player.language())]));
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+    getSkipBackwardTime() {
+      const playerOptions = this.options_.playerOptions;
+      return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.backward;
+    }
+    buildCSSClass() {
+      return `vjs-skip-backward-${this.getSkipBackwardTime()} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * On click, skips backward in the video by a configurable amount of seconds.
+     * If the current time in the video is less than the configured 'skip backward' time,
+     * skips to beginning of video or seekable range.
+     *
+     * Handle a click on a `SkipBackward` button
+     *
+     * @param {EventTarget~Event} event
+     *        The `click` event that caused this function
+     *        to be called
+     */
+    handleClick(event) {
+      const currentVideoTime = this.player_.currentTime();
+      const liveTracker = this.player_.liveTracker;
+      const seekableStart = liveTracker && liveTracker.isLive() && liveTracker.seekableStart();
+      let newTime;
+      if (seekableStart && currentVideoTime - this.skipTime <= seekableStart) {
+        newTime = seekableStart;
+      } else if (currentVideoTime >= this.skipTime) {
+        newTime = currentVideoTime - this.skipTime;
+      } else {
+        newTime = 0;
+      }
+      this.player_.currentTime(newTime);
+    }
+
+    /**
+     * Update control text on languagechange
+     */
+    handleLanguagechange() {
+      this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime]));
+    }
+  }
+  SkipBackward.prototype.controlText_ = 'Skip Backward';
+  Component$1.registerComponent('SkipBackward', SkipBackward);
+
+  /**
+   * @file menu.js
+   */
+
+  /**
+   * The Menu component is used to build popup menus, including subtitle and
+   * captions selection menus.
+   *
+   * @extends Component
+   */
+  class Menu extends Component$1 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        the player that this component should attach to
+     *
+     * @param {Object} [options]
+     *        Object of option names and values
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      if (options) {
+        this.menuButton_ = options.menuButton;
+      }
+      this.focusedChild_ = -1;
+      this.on('keydown', e => this.handleKeyDown(e));
+
+      // All the menu item instances share the same blur handler provided by the menu container.
+      this.boundHandleBlur_ = e => this.handleBlur(e);
+      this.boundHandleTapClick_ = e => this.handleTapClick(e);
+    }
+
+    /**
+     * Add event listeners to the {@link MenuItem}.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem` to add listeners to.
+     *
+     */
+    addEventListenerForItem(component) {
+      if (!(component instanceof Component$1)) {
+        return;
+      }
+      this.on(component, 'blur', this.boundHandleBlur_);
+      this.on(component, ['tap', 'click'], this.boundHandleTapClick_);
+    }
+
+    /**
+     * Remove event listeners from the {@link MenuItem}.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem` to remove listeners.
+     *
+     */
+    removeEventListenerForItem(component) {
+      if (!(component instanceof Component$1)) {
+        return;
+      }
+      this.off(component, 'blur', this.boundHandleBlur_);
+      this.off(component, ['tap', 'click'], this.boundHandleTapClick_);
+    }
+
+    /**
+     * This method will be called indirectly when the component has been added
+     * before the component adds to the new menu instance by `addItem`.
+     * In this case, the original menu instance will remove the component
+     * by calling `removeChild`.
+     *
+     * @param {Object} component
+     *        The instance of the `MenuItem`
+     */
+    removeChild(component) {
+      if (typeof component === 'string') {
+        component = this.getChild(component);
+      }
+      this.removeEventListenerForItem(component);
+      super.removeChild(component);
+    }
+
+    /**
+     * Add a {@link MenuItem} to the menu.
+     *
+     * @param {Object|string} component
+     *        The name or instance of the `MenuItem` to add.
+     *
+     */
+    addItem(component) {
+      const childComponent = this.addChild(component);
+      if (childComponent) {
+        this.addEventListenerForItem(childComponent);
+      }
+    }
+
+    /**
+     * Create the `Menu`s DOM element.
+     *
+     * @return {Element}
+     *         the element that was created
+     */
+    createEl() {
+      const contentElType = this.options_.contentElType || 'ul';
+      this.contentEl_ = createEl(contentElType, {
+        className: 'vjs-menu-content'
+      });
+      this.contentEl_.setAttribute('role', 'menu');
+      const el = super.createEl('div', {
+        append: this.contentEl_,
+        className: 'vjs-menu'
+      });
+      el.appendChild(this.contentEl_);
+
+      // Prevent clicks from bubbling up. Needed for Menu Buttons,
+      // where a click on the parent is significant
+      on(el, 'click', function (event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      });
+      return el;
+    }
+    dispose() {
+      this.contentEl_ = null;
+      this.boundHandleBlur_ = null;
+      this.boundHandleTapClick_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Called when a `MenuItem` loses focus.
+     *
+     * @param {Event} event
+     *        The `blur` event that caused this function to be called.
+     *
+     * @listens blur
+     */
+    handleBlur(event) {
+      const relatedTarget = event.relatedTarget || document.activeElement;
+
+      // Close menu popup when a user clicks outside the menu
+      if (!this.children().some(element => {
+        return element.el() === relatedTarget;
+      })) {
+        const btn = this.menuButton_;
+        if (btn && btn.buttonPressed_ && relatedTarget !== btn.el().firstChild) {
+          btn.unpressButton();
+        }
+      }
+    }
+
+    /**
+     * Called when a `MenuItem` gets clicked or tapped.
+     *
+     * @param {Event} event
+     *        The `click` or `tap` event that caused this function to be called.
+     *
+     * @listens click,tap
+     */
+    handleTapClick(event) {
+      // Unpress the associated MenuButton, and move focus back to it
+      if (this.menuButton_) {
+        this.menuButton_.unpressButton();
+        const childComponents = this.children();
+        if (!Array.isArray(childComponents)) {
+          return;
+        }
+        const foundComponent = childComponents.filter(component => component.el() === event.target)[0];
+        if (!foundComponent) {
+          return;
+        }
+
+        // don't focus menu button if item is a caption settings item
+        // because focus will move elsewhere
+        if (foundComponent.name() !== 'CaptionSettingsMenuItem') {
+          this.menuButton_.focus();
+        }
+      }
+    }
+
+    /**
+     * Handle a `keydown` event on this menu. This listener is added in the constructor.
+     *
+     * @param {KeyboardEvent} event
+     *        A `keydown` event that happened on the menu.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Left and Down Arrows
+      if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepForward();
+
+        // Up and Right Arrows
+      } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepBack();
+      }
+    }
+
+    /**
+     * Move to next (lower) menu item for keyboard users.
+     */
+    stepForward() {
+      let stepChild = 0;
+      if (this.focusedChild_ !== undefined) {
+        stepChild = this.focusedChild_ + 1;
+      }
+      this.focus(stepChild);
+    }
+
+    /**
+     * Move to previous (higher) menu item for keyboard users.
+     */
+    stepBack() {
+      let stepChild = 0;
+      if (this.focusedChild_ !== undefined) {
+        stepChild = this.focusedChild_ - 1;
+      }
+      this.focus(stepChild);
+    }
+
+    /**
+     * Set focus on a {@link MenuItem} in the `Menu`.
+     *
+     * @param {Object|string} [item=0]
+     *        Index of child item set focus on.
+     */
+    focus(item = 0) {
+      const children = this.children().slice();
+      const haveTitle = children.length && children[0].hasClass('vjs-menu-title');
+      if (haveTitle) {
+        children.shift();
+      }
+      if (children.length > 0) {
+        if (item < 0) {
+          item = 0;
+        } else if (item >= children.length) {
+          item = children.length - 1;
+        }
+        this.focusedChild_ = item;
+        children[item].el_.focus();
+      }
+    }
+  }
+  Component$1.registerComponent('Menu', Menu);
+
+  /**
+   * @file menu-button.js
+   */
+
+  /**
+   * A `MenuButton` class for any popup {@link Menu}.
+   *
+   * @extends Component
+   */
+  class MenuButton extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+      this.menuButton_ = new Button(player, options);
+      this.menuButton_.controlText(this.controlText_);
+      this.menuButton_.el_.setAttribute('aria-haspopup', 'true');
+
+      // Add buildCSSClass values to the button, not the wrapper
+      const buttonClass = Button.prototype.buildCSSClass();
+      this.menuButton_.el_.className = this.buildCSSClass() + ' ' + buttonClass;
+      this.menuButton_.removeClass('vjs-control');
+      this.addChild(this.menuButton_);
+      this.update();
+      this.enabled_ = true;
+      const handleClick = e => this.handleClick(e);
+      this.handleMenuKeyUp_ = e => this.handleMenuKeyUp(e);
+      this.on(this.menuButton_, 'tap', handleClick);
+      this.on(this.menuButton_, 'click', handleClick);
+      this.on(this.menuButton_, 'keydown', e => this.handleKeyDown(e));
+      this.on(this.menuButton_, 'mouseenter', () => {
+        this.addClass('vjs-hover');
+        this.menu.show();
+        on(document, 'keyup', this.handleMenuKeyUp_);
+      });
+      this.on('mouseleave', e => this.handleMouseLeave(e));
+      this.on('keydown', e => this.handleSubmenuKeyDown(e));
+    }
+
+    /**
+     * Update the menu based on the current state of its items.
+     */
+    update() {
+      const menu = this.createMenu();
+      if (this.menu) {
+        this.menu.dispose();
+        this.removeChild(this.menu);
+      }
+      this.menu = menu;
+      this.addChild(menu);
+
+      /**
+       * Track the state of the menu button
+       *
+       * @type {Boolean}
+       * @private
+       */
+      this.buttonPressed_ = false;
+      this.menuButton_.el_.setAttribute('aria-expanded', 'false');
+      if (this.items && this.items.length <= this.hideThreshold_) {
+        this.hide();
+        this.menu.contentEl_.removeAttribute('role');
+      } else {
+        this.show();
+        this.menu.contentEl_.setAttribute('role', 'menu');
+      }
+    }
+
+    /**
+     * Create the menu and add all items to it.
+     *
+     * @return {Menu}
+     *         The constructed menu
+     */
+    createMenu() {
+      const menu = new Menu(this.player_, {
+        menuButton: this
+      });
+
+      /**
+       * Hide the menu if the number of items is less than or equal to this threshold. This defaults
+       * to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list
+       * it here because every time we run `createMenu` we need to reset the value.
+       *
+       * @protected
+       * @type {Number}
+       */
+      this.hideThreshold_ = 0;
+
+      // Add a title list item to the top
+      if (this.options_.title) {
+        const titleEl = createEl('li', {
+          className: 'vjs-menu-title',
+          textContent: toTitleCase$1(this.options_.title),
+          tabIndex: -1
+        });
+        const titleComponent = new Component$1(this.player_, {
+          el: titleEl
+        });
+        menu.addItem(titleComponent);
+      }
+      this.items = this.createItems();
+      if (this.items) {
+        // Add menu items to the menu
+        for (let i = 0; i < this.items.length; i++) {
+          menu.addItem(this.items[i]);
+        }
+      }
+      return menu;
+    }
+
+    /**
+     * Create the list of menu items. Specific to each subclass.
+     *
+     * @abstract
+     */
+    createItems() {}
+
+    /**
+     * Create the `MenuButtons`s DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildWrapperCSSClass()
+      }, {});
+    }
+
+    /**
+     * Overwrites the `setIcon` method from `Component`.
+     * In this case, we want the icon to be appended to the menuButton.
+     *
+     * @param {string} name
+     *         The icon name to be added.
+     */
+    setIcon(name) {
+      super.setIcon(name, this.menuButton_.el_);
+    }
+
+    /**
+     * Allow sub components to stack CSS class names for the wrapper element
+     *
+     * @return {string}
+     *         The constructed wrapper DOM `className`
+     */
+    buildWrapperCSSClass() {
+      let menuButtonClass = 'vjs-menu-button';
+
+      // If the inline option is passed, we want to use different styles altogether.
+      if (this.options_.inline === true) {
+        menuButtonClass += '-inline';
+      } else {
+        menuButtonClass += '-popup';
+      }
+
+      // TODO: Fix the CSS so that this isn't necessary
+      const buttonClass = Button.prototype.buildCSSClass();
+      return `vjs-menu-button ${menuButtonClass} ${buttonClass} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      let menuButtonClass = 'vjs-menu-button';
+
+      // If the inline option is passed, we want to use different styles altogether.
+      if (this.options_.inline === true) {
+        menuButtonClass += '-inline';
+      } else {
+        menuButtonClass += '-popup';
+      }
+      return `vjs-menu-button ${menuButtonClass} ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Get or set the localized control text that will be used for accessibility.
+     *
+     * > NOTE: This will come from the internal `menuButton_` element.
+     *
+     * @param {string} [text]
+     *        Control text for element.
+     *
+     * @param {Element} [el=this.menuButton_.el()]
+     *        Element to set the title on.
+     *
+     * @return {string}
+     *         - The control text when getting
+     */
+    controlText(text, el = this.menuButton_.el()) {
+      return this.menuButton_.controlText(text, el);
+    }
+
+    /**
+     * Dispose of the `menu-button` and all child components.
+     */
+    dispose() {
+      this.handleMouseLeave();
+      super.dispose();
+    }
+
+    /**
+     * Handle a click on a `MenuButton`.
+     * See {@link ClickableComponent#handleClick} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      if (this.buttonPressed_) {
+        this.unpressButton();
+      } else {
+        this.pressButton();
+      }
+    }
+
+    /**
+     * Handle `mouseleave` for `MenuButton`.
+     *
+     * @param {Event} event
+     *        The `mouseleave` event that caused this function to be called.
+     *
+     * @listens mouseleave
+     */
+    handleMouseLeave(event) {
+      this.removeClass('vjs-hover');
+      off(document, 'keyup', this.handleMenuKeyUp_);
+    }
+
+    /**
+     * Set the focus to the actual button, not to this element
+     */
+    focus() {
+      this.menuButton_.focus();
+    }
+
+    /**
+     * Remove the focus from the actual button, not this element
+     */
+    blur() {
+      this.menuButton_.blur();
+    }
+
+    /**
+     * Handle tab, escape, down arrow, and up arrow keys for `MenuButton`. See
+     * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      // Escape or Tab unpress the 'button'
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        if (this.buttonPressed_) {
+          this.unpressButton();
+        }
+
+        // Don't preventDefault for Tab key - we still want to lose focus
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.preventDefault();
+          // Set focus back to the menu button's button
+          this.menuButton_.focus();
+        }
+        // Up Arrow or Down Arrow also 'press' the button to open the menu
+      } else if (keycode.isEventKey(event, 'Up') || keycode.isEventKey(event, 'Down')) {
+        if (!this.buttonPressed_) {
+          event.preventDefault();
+          this.pressButton();
+        }
+      }
+    }
+
+    /**
+     * Handle a `keyup` event on a `MenuButton`. The listener for this is added in
+     * the constructor.
+     *
+     * @param {Event} event
+     *        Key press event
+     *
+     * @listens keyup
+     */
+    handleMenuKeyUp(event) {
+      // Escape hides popup menu
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        this.removeClass('vjs-hover');
+      }
+    }
+
+    /**
+     * This method name now delegates to `handleSubmenuKeyDown`. This means
+     * anyone calling `handleSubmenuKeyPress` will not see their method calls
+     * stop working.
+     *
+     * @param {Event} event
+     *        The event that caused this function to be called.
+     */
+    handleSubmenuKeyPress(event) {
+      this.handleSubmenuKeyDown(event);
+    }
+
+    /**
+     * Handle a `keydown` event on a sub-menu. The listener for this is added in
+     * the constructor.
+     *
+     * @param {Event} event
+     *        Key press event
+     *
+     * @listens keydown
+     */
+    handleSubmenuKeyDown(event) {
+      // Escape or Tab unpress the 'button'
+      if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
+        if (this.buttonPressed_) {
+          this.unpressButton();
+        }
+        // Don't preventDefault for Tab key - we still want to lose focus
+        if (!keycode.isEventKey(event, 'Tab')) {
+          event.preventDefault();
+          // Set focus back to the menu button's button
+          this.menuButton_.focus();
+        }
+      }
+    }
+
+    /**
+     * Put the current `MenuButton` into a pressed state.
+     */
+    pressButton() {
+      if (this.enabled_) {
+        this.buttonPressed_ = true;
+        this.menu.show();
+        this.menu.lockShowing();
+        this.menuButton_.el_.setAttribute('aria-expanded', 'true');
+
+        // set the focus into the submenu, except on iOS where it is resulting in
+        // undesired scrolling behavior when the player is in an iframe
+        if (IS_IOS && isInFrame()) {
+          // Return early so that the menu isn't focused
+          return;
+        }
+        this.menu.focus();
+      }
+    }
+
+    /**
+     * Take the current `MenuButton` out of a pressed state.
+     */
+    unpressButton() {
+      if (this.enabled_) {
+        this.buttonPressed_ = false;
+        this.menu.unlockShowing();
+        this.menu.hide();
+        this.menuButton_.el_.setAttribute('aria-expanded', 'false');
+      }
+    }
+
+    /**
+     * Disable the `MenuButton`. Don't allow it to be clicked.
+     */
+    disable() {
+      this.unpressButton();
+      this.enabled_ = false;
+      this.addClass('vjs-disabled');
+      this.menuButton_.disable();
+    }
+
+    /**
+     * Enable the `MenuButton`. Allow it to be clicked.
+     */
+    enable() {
+      this.enabled_ = true;
+      this.removeClass('vjs-disabled');
+      this.menuButton_.enable();
+    }
+  }
+  Component$1.registerComponent('MenuButton', MenuButton);
+
+  /**
+   * @file track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific  track types (e.g. subtitles).
+   *
+   * @extends MenuButton
+   */
+  class TrackButton extends MenuButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const tracks = options.tracks;
+      super(player, options);
+      if (this.items.length <= 1) {
+        this.hide();
+      }
+      if (!tracks) {
+        return;
+      }
+      const updateHandler = bind_(this, this.update);
+      tracks.addEventListener('removetrack', updateHandler);
+      tracks.addEventListener('addtrack', updateHandler);
+      tracks.addEventListener('labelchange', updateHandler);
+      this.player_.on('ready', updateHandler);
+      this.player_.on('dispose', function () {
+        tracks.removeEventListener('removetrack', updateHandler);
+        tracks.removeEventListener('addtrack', updateHandler);
+        tracks.removeEventListener('labelchange', updateHandler);
+      });
+    }
+  }
+  Component$1.registerComponent('TrackButton', TrackButton);
+
+  /**
+   * @file menu-keys.js
+   */
+
+  /**
+    * All keys used for operation of a menu (`MenuButton`, `Menu`, and `MenuItem`)
+    * Note that 'Enter' and 'Space' are not included here (otherwise they would
+    * prevent the `MenuButton` and `MenuItem` from being keyboard-clickable)
+   *
+    * @typedef MenuKeys
+    * @array
+    */
+  const MenuKeys = ['Tab', 'Esc', 'Up', 'Down', 'Right', 'Left'];
+
+  /**
+   * @file menu-item.js
+   */
+
+  /**
+   * The component for a menu item. `<li>`
+   *
+   * @extends ClickableComponent
+   */
+  class MenuItem extends ClickableComponent {
+    /**
+     * Creates an instance of the this class.
+     *
+     * @param { import('../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     *
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.selectable = options.selectable;
+      this.isSelected_ = options.selected || false;
+      this.multiSelectable = options.multiSelectable;
+      this.selected(this.isSelected_);
+      if (this.selectable) {
+        if (this.multiSelectable) {
+          this.el_.setAttribute('role', 'menuitemcheckbox');
+        } else {
+          this.el_.setAttribute('role', 'menuitemradio');
+        }
+      } else {
+        this.el_.setAttribute('role', 'menuitem');
+      }
+    }
+
+    /**
+     * Create the `MenuItem's DOM element
+     *
+     * @param {string} [type=li]
+     *        Element's node type, not actually used, always set to `li`.
+     *
+     * @param {Object} [props={}]
+     *        An object of properties that should be set on the element
+     *
+     * @param {Object} [attrs={}]
+     *        An object of attributes that should be set on the element
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl(type, props, attrs) {
+      // The control is textual, not just an icon
+      this.nonIconControl = true;
+      const el = super.createEl('li', Object.assign({
+        className: 'vjs-menu-item',
+        tabIndex: -1
+      }, props), attrs);
+
+      // swap icon with menu item text.
+      const menuItemEl = createEl('span', {
+        className: 'vjs-menu-item-text',
+        textContent: this.localize(this.options_.label)
+      });
+
+      // If using SVG icons, the element with vjs-icon-placeholder will be added separately.
+      if (this.player_.options_.experimentalSvgIcons) {
+        el.appendChild(menuItemEl);
+      } else {
+        el.replaceChild(menuItemEl, el.querySelector('.vjs-icon-placeholder'));
+      }
+      return el;
+    }
+
+    /**
+     * Ignore keys which are used by the menu, but pass any other ones up. See
+     * {@link ClickableComponent#handleKeyDown} for instances where this is called.
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      if (!MenuKeys.some(key => keycode.isEventKey(event, key))) {
+        // Pass keydown handling up for unused keys
+        super.handleKeyDown(event);
+      }
+    }
+
+    /**
+     * Any click on a `MenuItem` puts it into the selected state.
+     * See {@link ClickableComponent#handleClick} for instances where this is called.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      this.selected(true);
+    }
+
+    /**
+     * Set the state for this menu item as selected or not.
+     *
+     * @param {boolean} selected
+     *        if the menu item is selected or not
+     */
+    selected(selected) {
+      if (this.selectable) {
+        if (selected) {
+          this.addClass('vjs-selected');
+          this.el_.setAttribute('aria-checked', 'true');
+          // aria-checked isn't fully supported by browsers/screen readers,
+          // so indicate selected state to screen reader in the control text.
+          this.controlText(', selected');
+          this.isSelected_ = true;
+        } else {
+          this.removeClass('vjs-selected');
+          this.el_.setAttribute('aria-checked', 'false');
+          // Indicate un-selected state to screen reader
+          this.controlText('');
+          this.isSelected_ = false;
+        }
+      }
+    }
+  }
+  Component$1.registerComponent('MenuItem', MenuItem);
+
+  /**
+   * @file text-track-menu-item.js
+   */
+
+  /**
+   * The specific menu item type for selecting a language within a text track kind
+   *
+   * @extends MenuItem
+   */
+  class TextTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const tracks = player.textTracks();
+
+      // Modify options for parent MenuItem class's init.
+      options.label = track.label || track.language || 'Unknown';
+      options.selected = track.mode === 'showing';
+      super(player, options);
+      this.track = track;
+      // Determine the relevant kind(s) of tracks for this component and filter
+      // out empty kinds.
+      this.kinds = (options.kinds || [options.kind || this.track.kind]).filter(Boolean);
+      const changeHandler = (...args) => {
+        this.handleTracksChange.apply(this, args);
+      };
+      const selectedLanguageChangeHandler = (...args) => {
+        this.handleSelectedLanguageChange.apply(this, args);
+      };
+      player.on(['loadstart', 'texttrackchange'], changeHandler);
+      tracks.addEventListener('change', changeHandler);
+      tracks.addEventListener('selectedlanguagechange', selectedLanguageChangeHandler);
+      this.on('dispose', function () {
+        player.off(['loadstart', 'texttrackchange'], changeHandler);
+        tracks.removeEventListener('change', changeHandler);
+        tracks.removeEventListener('selectedlanguagechange', selectedLanguageChangeHandler);
+      });
+
+      // iOS7 doesn't dispatch change events to TextTrackLists when an
+      // associated track's mode changes. Without something like
+      // Object.observe() (also not present on iOS7), it's not
+      // possible to detect changes to the mode attribute and polyfill
+      // the change event. As a poor substitute, we manually dispatch
+      // change events whenever the controls modify the mode.
+      if (tracks.onchange === undefined) {
+        let event;
+        this.on(['tap', 'click'], function () {
+          if (typeof window.Event !== 'object') {
+            // Android 2.3 throws an Illegal Constructor error for window.Event
+            try {
+              event = new window.Event('change');
+            } catch (err) {
+              // continue regardless of error
+            }
+          }
+          if (!event) {
+            event = document.createEvent('Event');
+            event.initEvent('change', true, true);
+          }
+          tracks.dispatchEvent(event);
+        });
+      }
+
+      // set the default state based on current tracks
+      this.handleTracksChange();
+    }
+
+    /**
+     * This gets called when an `TextTrackMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} event
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      const referenceTrack = this.track;
+      const tracks = this.player_.textTracks();
+      super.handleClick(event);
+      if (!tracks) {
+        return;
+      }
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+
+        // If the track from the text tracks list is not of the right kind,
+        // skip it. We do not want to affect tracks of incompatible kind(s).
+        if (this.kinds.indexOf(track.kind) === -1) {
+          continue;
+        }
+
+        // If this text track is the component's track and it is not showing,
+        // set it to showing.
+        if (track === referenceTrack) {
+          if (track.mode !== 'showing') {
+            track.mode = 'showing';
+          }
+
+          // If this text track is not the component's track and it is not
+          // disabled, set it to disabled.
+        } else if (track.mode !== 'disabled') {
+          track.mode = 'disabled';
+        }
+      }
+    }
+
+    /**
+     * Handle text track list change
+     *
+     * @param {Event} event
+     *        The `change` event that caused this function to be called.
+     *
+     * @listens TextTrackList#change
+     */
+    handleTracksChange(event) {
+      const shouldBeSelected = this.track.mode === 'showing';
+
+      // Prevent redundant selected() calls because they may cause
+      // screen readers to read the appended control text unnecessarily
+      if (shouldBeSelected !== this.isSelected_) {
+        this.selected(shouldBeSelected);
+      }
+    }
+    handleSelectedLanguageChange(event) {
+      if (this.track.mode === 'showing') {
+        const selectedLanguage = this.player_.cache_.selectedLanguage;
+
+        // Don't replace the kind of track across the same language
+        if (selectedLanguage && selectedLanguage.enabled && selectedLanguage.language === this.track.language && selectedLanguage.kind !== this.track.kind) {
+          return;
+        }
+        this.player_.cache_.selectedLanguage = {
+          enabled: true,
+          language: this.track.language,
+          kind: this.track.kind
+        };
+      }
+    }
+    dispose() {
+      // remove reference to track object on dispose
+      this.track = null;
+      super.dispose();
+    }
+  }
+  Component$1.registerComponent('TextTrackMenuItem', TextTrackMenuItem);
+
+  /**
+   * @file off-text-track-menu-item.js
+   */
+
+  /**
+   * A special menu item for turning off a specific type of text track
+   *
+   * @extends TextTrackMenuItem
+   */
+  class OffTextTrackMenuItem extends TextTrackMenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      // Create pseudo track info
+      // Requires options['kind']
+      options.track = {
+        player,
+        // it is no longer necessary to store `kind` or `kinds` on the track itself
+        // since they are now stored in the `kinds` property of all instances of
+        // TextTrackMenuItem, but this will remain for backwards compatibility
+        kind: options.kind,
+        kinds: options.kinds,
+        default: false,
+        mode: 'disabled'
+      };
+      if (!options.kinds) {
+        options.kinds = [options.kind];
+      }
+      if (options.label) {
+        options.track.label = options.label;
+      } else {
+        options.track.label = options.kinds.join(' and ') + ' off';
+      }
+
+      // MenuItem is selectable
+      options.selectable = true;
+      // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+      options.multiSelectable = false;
+      super(player, options);
+    }
+
+    /**
+     * Handle text track change
+     *
+     * @param {Event} event
+     *        The event that caused this function to run
+     */
+    handleTracksChange(event) {
+      const tracks = this.player().textTracks();
+      let shouldBeSelected = true;
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (this.options_.kinds.indexOf(track.kind) > -1 && track.mode === 'showing') {
+          shouldBeSelected = false;
+          break;
+        }
+      }
+
+      // Prevent redundant selected() calls because they may cause
+      // screen readers to read the appended control text unnecessarily
+      if (shouldBeSelected !== this.isSelected_) {
+        this.selected(shouldBeSelected);
+      }
+    }
+    handleSelectedLanguageChange(event) {
+      const tracks = this.player().textTracks();
+      let allHidden = true;
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (['captions', 'descriptions', 'subtitles'].indexOf(track.kind) > -1 && track.mode === 'showing') {
+          allHidden = false;
+          break;
+        }
+      }
+      if (allHidden) {
+        this.player_.cache_.selectedLanguage = {
+          enabled: false
+        };
+      }
+    }
+
+    /**
+     * Update control text and label on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.label);
+      super.handleLanguagechange();
+    }
+  }
+  Component$1.registerComponent('OffTextTrackMenuItem', OffTextTrackMenuItem);
+
+  /**
+   * @file text-track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific text track types (e.g. subtitles)
+   *
+   * @extends MenuButton
+   */
+  class TextTrackButton extends TrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.tracks = player.textTracks();
+      super(player, options);
+    }
+
+    /**
+     * Create a menu item for each text track
+     *
+     * @param {TextTrackMenuItem[]} [items=[]]
+     *        Existing array of items to use during creation
+     *
+     * @return {TextTrackMenuItem[]}
+     *         Array of menu items that were created
+     */
+    createItems(items = [], TrackMenuItem = TextTrackMenuItem) {
+      // Label is an override for the [track] off label
+      // USed to localise captions/subtitles
+      let label;
+      if (this.label_) {
+        label = `${this.label_} off`;
+      }
+      // Add an OFF menu item to turn all tracks off
+      items.push(new OffTextTrackMenuItem(this.player_, {
+        kinds: this.kinds_,
+        kind: this.kind_,
+        label
+      }));
+      this.hideThreshold_ += 1;
+      const tracks = this.player_.textTracks();
+      if (!Array.isArray(this.kinds_)) {
+        this.kinds_ = [this.kind_];
+      }
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+
+        // only add tracks that are of an appropriate kind and have a label
+        if (this.kinds_.indexOf(track.kind) > -1) {
+          const item = new TrackMenuItem(this.player_, {
+            track,
+            kinds: this.kinds_,
+            kind: this.kind_,
+            // MenuItem is selectable
+            selectable: true,
+            // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+            multiSelectable: false
+          });
+          item.addClass(`vjs-${track.kind}-menu-item`);
+          items.push(item);
+        }
+      }
+      return items;
+    }
+  }
+  Component$1.registerComponent('TextTrackButton', TextTrackButton);
+
+  /**
+   * @file chapters-track-menu-item.js
+   */
+
+  /**
+   * The chapter track menu item
+   *
+   * @extends MenuItem
+   */
+  class ChaptersTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const cue = options.cue;
+      const currentTime = player.currentTime();
+
+      // Modify options for parent MenuItem class's init.
+      options.selectable = true;
+      options.multiSelectable = false;
+      options.label = cue.text;
+      options.selected = cue.startTime <= currentTime && currentTime < cue.endTime;
+      super(player, options);
+      this.track = track;
+      this.cue = cue;
+    }
+
+    /**
+     * This gets called when an `ChaptersTrackMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick();
+      this.player_.currentTime(this.cue.startTime);
+    }
+  }
+  Component$1.registerComponent('ChaptersTrackMenuItem', ChaptersTrackMenuItem);
+
+  /**
+   * @file chapters-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting chapters
+   * Chapters act much differently than other text tracks
+   * Cues are navigation vs. other tracks of alternative languages
+   *
+   * @extends TextTrackButton
+   */
+  class ChaptersButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this function is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('chapters');
+      this.selectCurrentItem_ = () => {
+        this.items.forEach(item => {
+          item.selected(this.track_.activeCues[0] === item.cue);
+        });
+      };
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-chapters-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-chapters-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Update the menu based on the current state of its items.
+     *
+     * @param {Event} [event]
+     *        An event that triggered this function to run.
+     *
+     * @listens TextTrackList#addtrack
+     * @listens TextTrackList#removetrack
+     * @listens TextTrackList#change
+     */
+    update(event) {
+      if (event && event.track && event.track.kind !== 'chapters') {
+        return;
+      }
+      const track = this.findChaptersTrack();
+      if (track !== this.track_) {
+        this.setTrack(track);
+        super.update();
+      } else if (!this.items || track && track.cues && track.cues.length !== this.items.length) {
+        // Update the menu initially or if the number of cues has changed since set
+        super.update();
+      }
+    }
+
+    /**
+     * Set the currently selected track for the chapters button.
+     *
+     * @param {TextTrack} track
+     *        The new track to select. Nothing will change if this is the currently selected
+     *        track.
+     */
+    setTrack(track) {
+      if (this.track_ === track) {
+        return;
+      }
+      if (!this.updateHandler_) {
+        this.updateHandler_ = this.update.bind(this);
+      }
+
+      // here this.track_ refers to the old track instance
+      if (this.track_) {
+        const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
+        if (remoteTextTrackEl) {
+          remoteTextTrackEl.removeEventListener('load', this.updateHandler_);
+        }
+        this.track_.removeEventListener('cuechange', this.selectCurrentItem_);
+        this.track_ = null;
+      }
+      this.track_ = track;
+
+      // here this.track_ refers to the new track instance
+      if (this.track_) {
+        this.track_.mode = 'hidden';
+        const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
+        if (remoteTextTrackEl) {
+          remoteTextTrackEl.addEventListener('load', this.updateHandler_);
+        }
+        this.track_.addEventListener('cuechange', this.selectCurrentItem_);
+      }
+    }
+
+    /**
+     * Find the track object that is currently in use by this ChaptersButton
+     *
+     * @return {TextTrack|undefined}
+     *         The current track or undefined if none was found.
+     */
+    findChaptersTrack() {
+      const tracks = this.player_.textTracks() || [];
+      for (let i = tracks.length - 1; i >= 0; i--) {
+        // We will always choose the last track as our chaptersTrack
+        const track = tracks[i];
+        if (track.kind === this.kind_) {
+          return track;
+        }
+      }
+    }
+
+    /**
+     * Get the caption for the ChaptersButton based on the track label. This will also
+     * use the current tracks localized kind as a fallback if a label does not exist.
+     *
+     * @return {string}
+     *         The tracks current label or the localized track kind.
+     */
+    getMenuCaption() {
+      if (this.track_ && this.track_.label) {
+        return this.track_.label;
+      }
+      return this.localize(toTitleCase$1(this.kind_));
+    }
+
+    /**
+     * Create menu from chapter track
+     *
+     * @return { import('../../menu/menu').default }
+     *         New menu for the chapter buttons
+     */
+    createMenu() {
+      this.options_.title = this.getMenuCaption();
+      return super.createMenu();
+    }
+
+    /**
+     * Create a menu item for each text track
+     *
+     * @return  { import('./text-track-menu-item').default[] }
+     *         Array of menu items
+     */
+    createItems() {
+      const items = [];
+      if (!this.track_) {
+        return items;
+      }
+      const cues = this.track_.cues;
+      if (!cues) {
+        return items;
+      }
+      for (let i = 0, l = cues.length; i < l; i++) {
+        const cue = cues[i];
+        const mi = new ChaptersTrackMenuItem(this.player_, {
+          track: this.track_,
+          cue
+        });
+        items.push(mi);
+      }
+      return items;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  ChaptersButton.prototype.kind_ = 'chapters';
+
+  /**
+   * The text that should display over the `ChaptersButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  ChaptersButton.prototype.controlText_ = 'Chapters';
+  Component$1.registerComponent('ChaptersButton', ChaptersButton);
+
+  /**
+   * @file descriptions-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting descriptions
+   *
+   * @extends TextTrackButton
+   */
+  class DescriptionsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('audio-description');
+      const tracks = player.textTracks();
+      const changeHandler = bind_(this, this.handleTracksChange);
+      tracks.addEventListener('change', changeHandler);
+      this.on('dispose', function () {
+        tracks.removeEventListener('change', changeHandler);
+      });
+    }
+
+    /**
+     * Handle text track change
+     *
+     * @param {Event} event
+     *        The event that caused this function to run
+     *
+     * @listens TextTrackList#change
+     */
+    handleTracksChange(event) {
+      const tracks = this.player().textTracks();
+      let disabled = false;
+
+      // Check whether a track of a different kind is showing
+      for (let i = 0, l = tracks.length; i < l; i++) {
+        const track = tracks[i];
+        if (track.kind !== this.kind_ && track.mode === 'showing') {
+          disabled = true;
+          break;
+        }
+      }
+
+      // If another track is showing, disable this menu button
+      if (disabled) {
+        this.disable();
+      } else {
+        this.enable();
+      }
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-descriptions-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-descriptions-button ${super.buildWrapperCSSClass()}`;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  DescriptionsButton.prototype.kind_ = 'descriptions';
+
+  /**
+   * The text that should display over the `DescriptionsButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  DescriptionsButton.prototype.controlText_ = 'Descriptions';
+  Component$1.registerComponent('DescriptionsButton', DescriptionsButton);
+
+  /**
+   * @file subtitles-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting subtitles
+   *
+   * @extends TextTrackButton
+   */
+  class SubtitlesButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('subtitles');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-subtitles-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-subtitles-button ${super.buildWrapperCSSClass()}`;
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  SubtitlesButton.prototype.kind_ = 'subtitles';
+
+  /**
+   * The text that should display over the `SubtitlesButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  SubtitlesButton.prototype.controlText_ = 'Subtitles';
+  Component$1.registerComponent('SubtitlesButton', SubtitlesButton);
+
+  /**
+   * @file caption-settings-menu-item.js
+   */
+
+  /**
+   * The menu item for caption track settings menu
+   *
+   * @extends TextTrackMenuItem
+   */
+  class CaptionSettingsMenuItem extends TextTrackMenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      options.track = {
+        player,
+        kind: options.kind,
+        label: options.kind + ' settings',
+        selectable: false,
+        default: false,
+        mode: 'disabled'
+      };
+
+      // CaptionSettingsMenuItem has no concept of 'selected'
+      options.selectable = false;
+      options.name = 'CaptionSettingsMenuItem';
+      super(player, options);
+      this.addClass('vjs-texttrack-settings');
+      this.controlText(', opens ' + options.kind + ' settings dialog');
+    }
+
+    /**
+     * This gets called when an `CaptionSettingsMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      this.player().getChild('textTrackSettings').open();
+    }
+
+    /**
+     * Update control text and label on languagechange
+     */
+    handleLanguagechange() {
+      this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.kind + ' settings');
+      super.handleLanguagechange();
+    }
+  }
+  Component$1.registerComponent('CaptionSettingsMenuItem', CaptionSettingsMenuItem);
+
+  /**
+   * @file captions-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting captions
+   *
+   * @extends TextTrackButton
+   */
+  class CaptionsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options, ready) {
+      super(player, options, ready);
+      this.setIcon('captions');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-captions-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-captions-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create caption menu items
+     *
+     * @return {CaptionSettingsMenuItem[]}
+     *         The array of current menu items.
+     */
+    createItems() {
+      const items = [];
+      if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks) && this.player().getChild('textTrackSettings')) {
+        items.push(new CaptionSettingsMenuItem(this.player_, {
+          kind: this.kind_
+        }));
+        this.hideThreshold_ += 1;
+      }
+      return super.createItems(items);
+    }
+  }
+
+  /**
+   * `kind` of TextTrack to look for to associate it with this menu.
+   *
+   * @type {string}
+   * @private
+   */
+  CaptionsButton.prototype.kind_ = 'captions';
+
+  /**
+   * The text that should display over the `CaptionsButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  CaptionsButton.prototype.controlText_ = 'Captions';
+  Component$1.registerComponent('CaptionsButton', CaptionsButton);
+
+  /**
+   * @file subs-caps-menu-item.js
+   */
+
+  /**
+   * SubsCapsMenuItem has an [cc] icon to distinguish captions from subtitles
+   * in the SubsCapsMenu.
+   *
+   * @extends TextTrackMenuItem
+   */
+  class SubsCapsMenuItem extends TextTrackMenuItem {
+    createEl(type, props, attrs) {
+      const el = super.createEl(type, props, attrs);
+      const parentSpan = el.querySelector('.vjs-menu-item-text');
+      if (this.options_.track.kind === 'captions') {
+        if (this.player_.options_.experimentalSvgIcons) {
+          this.setIcon('captions', el);
+        } else {
+          parentSpan.appendChild(createEl('span', {
+            className: 'vjs-icon-placeholder'
+          }, {
+            'aria-hidden': true
+          }));
+        }
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-control-text',
+          // space added as the text will visually flow with the
+          // label
+          textContent: ` ${this.localize('Captions')}`
+        }));
+      }
+      return el;
+    }
+  }
+  Component$1.registerComponent('SubsCapsMenuItem', SubsCapsMenuItem);
+
+  /**
+   * @file sub-caps-button.js
+   */
+
+  /**
+   * The button component for toggling and selecting captions and/or subtitles
+   *
+   * @extends TextTrackButton
+   */
+  class SubsCapsButton extends TextTrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {Function} [ready]
+     *        The function to call when this component is ready.
+     */
+    constructor(player, options = {}) {
+      super(player, options);
+
+      // Although North America uses "captions" in most cases for
+      // "captions and subtitles" other locales use "subtitles"
+      this.label_ = 'subtitles';
+      this.setIcon('subtitles');
+      if (['en', 'en-us', 'en-ca', 'fr-ca'].indexOf(this.player_.language_) > -1) {
+        this.label_ = 'captions';
+        this.setIcon('captions');
+      }
+      this.menuButton_.controlText(toTitleCase$1(this.label_));
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-subs-caps-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-subs-caps-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create caption/subtitles menu items
+     *
+     * @return {CaptionSettingsMenuItem[]}
+     *         The array of current menu items.
+     */
+    createItems() {
+      let items = [];
+      if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks) && this.player().getChild('textTrackSettings')) {
+        items.push(new CaptionSettingsMenuItem(this.player_, {
+          kind: this.label_
+        }));
+        this.hideThreshold_ += 1;
+      }
+      items = super.createItems(items, SubsCapsMenuItem);
+      return items;
+    }
+  }
+
+  /**
+   * `kind`s of TextTrack to look for to associate it with this menu.
+   *
+   * @type {array}
+   * @private
+   */
+  SubsCapsButton.prototype.kinds_ = ['captions', 'subtitles'];
+
+  /**
+   * The text that should display over the `SubsCapsButton`s controls.
+   *
+   *
+   * @type {string}
+   * @protected
+   */
+  SubsCapsButton.prototype.controlText_ = 'Subtitles';
+  Component$1.registerComponent('SubsCapsButton', SubsCapsButton);
+
+  /**
+   * @file audio-track-menu-item.js
+   */
+
+  /**
+   * An {@link AudioTrack} {@link MenuItem}
+   *
+   * @extends MenuItem
+   */
+  class AudioTrackMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const track = options.track;
+      const tracks = player.audioTracks();
+
+      // Modify options for parent MenuItem class's init.
+      options.label = track.label || track.language || 'Unknown';
+      options.selected = track.enabled;
+      super(player, options);
+      this.track = track;
+      this.addClass(`vjs-${track.kind}-menu-item`);
+      const changeHandler = (...args) => {
+        this.handleTracksChange.apply(this, args);
+      };
+      tracks.addEventListener('change', changeHandler);
+      this.on('dispose', () => {
+        tracks.removeEventListener('change', changeHandler);
+      });
+    }
+    createEl(type, props, attrs) {
+      const el = super.createEl(type, props, attrs);
+      const parentSpan = el.querySelector('.vjs-menu-item-text');
+      if (['main-desc', 'description'].indexOf(this.options_.track.kind) >= 0) {
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-icon-placeholder'
+        }, {
+          'aria-hidden': true
+        }));
+        parentSpan.appendChild(createEl('span', {
+          className: 'vjs-control-text',
+          textContent: ' ' + this.localize('Descriptions')
+        }));
+      }
+      return el;
+    }
+
+    /**
+     * This gets called when an `AudioTrackMenuItem is "clicked". See {@link ClickableComponent}
+     * for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick(event);
+
+      // the audio track list will automatically toggle other tracks
+      // off for us.
+      this.track.enabled = true;
+
+      // when native audio tracks are used, we want to make sure that other tracks are turned off
+      if (this.player_.tech_.featuresNativeAudioTracks) {
+        const tracks = this.player_.audioTracks();
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+
+          // skip the current track since we enabled it above
+          if (track === this.track) {
+            continue;
+          }
+          track.enabled = track === this.track;
+        }
+      }
+    }
+
+    /**
+     * Handle any {@link AudioTrack} change.
+     *
+     * @param {Event} [event]
+     *        The {@link AudioTrackList#change} event that caused this to run.
+     *
+     * @listens AudioTrackList#change
+     */
+    handleTracksChange(event) {
+      this.selected(this.track.enabled);
+    }
+  }
+  Component$1.registerComponent('AudioTrackMenuItem', AudioTrackMenuItem);
+
+  /**
+   * @file audio-track-button.js
+   */
+
+  /**
+   * The base class for buttons that toggle specific {@link AudioTrack} types.
+   *
+   * @extends TrackButton
+   */
+  class AudioTrackButton extends TrackButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param {Player} player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options={}]
+     *        The key/value store of player options.
+     */
+    constructor(player, options = {}) {
+      options.tracks = player.audioTracks();
+      super(player, options);
+      this.setIcon('audio');
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-audio-button ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-audio-button ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create a menu item for each audio track
+     *
+     * @param {AudioTrackMenuItem[]} [items=[]]
+     *        An array of existing menu items to use.
+     *
+     * @return {AudioTrackMenuItem[]}
+     *         An array of menu items
+     */
+    createItems(items = []) {
+      // if there's only one audio track, there no point in showing it
+      this.hideThreshold_ = 1;
+      const tracks = this.player_.audioTracks();
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        items.push(new AudioTrackMenuItem(this.player_, {
+          track,
+          // MenuItem is selectable
+          selectable: true,
+          // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
+          multiSelectable: false
+        }));
+      }
+      return items;
+    }
+  }
+
+  /**
+   * The text that should display over the `AudioTrackButton`s controls. Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  AudioTrackButton.prototype.controlText_ = 'Audio Track';
+  Component$1.registerComponent('AudioTrackButton', AudioTrackButton);
+
+  /**
+   * @file playback-rate-menu-item.js
+   */
+
+  /**
+   * The specific menu item type for selecting a playback rate.
+   *
+   * @extends MenuItem
+   */
+  class PlaybackRateMenuItem extends MenuItem {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      const label = options.rate;
+      const rate = parseFloat(label, 10);
+
+      // Modify options for parent MenuItem class's init.
+      options.label = label;
+      options.selected = rate === player.playbackRate();
+      options.selectable = true;
+      options.multiSelectable = false;
+      super(player, options);
+      this.label = label;
+      this.rate = rate;
+      this.on(player, 'ratechange', e => this.update(e));
+    }
+
+    /**
+     * This gets called when an `PlaybackRateMenuItem` is "clicked". See
+     * {@link ClickableComponent} for more detailed information on what a click can be.
+     *
+     * @param {Event} [event]
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
+     *        called.
+     *
+     * @listens tap
+     * @listens click
+     */
+    handleClick(event) {
+      super.handleClick();
+      this.player().playbackRate(this.rate);
+    }
+
+    /**
+     * Update the PlaybackRateMenuItem when the playbackrate changes.
+     *
+     * @param {Event} [event]
+     *        The `ratechange` event that caused this function to run.
+     *
+     * @listens Player#ratechange
+     */
+    update(event) {
+      this.selected(this.player().playbackRate() === this.rate);
+    }
+  }
+
+  /**
+   * The text that should display over the `PlaybackRateMenuItem`s controls. Added for localization.
+   *
+   * @type {string}
+   * @private
+   */
+  PlaybackRateMenuItem.prototype.contentElType = 'button';
+  Component$1.registerComponent('PlaybackRateMenuItem', PlaybackRateMenuItem);
+
+  /**
+   * @file playback-rate-menu-button.js
+   */
+
+  /**
+   * The component for controlling the playback rate.
+   *
+   * @extends MenuButton
+   */
+  class PlaybackRateMenuButton extends MenuButton {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../../player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);
+      this.updateVisibility();
+      this.updateLabel();
+      this.on(player, 'loadstart', e => this.updateVisibility(e));
+      this.on(player, 'ratechange', e => this.updateLabel(e));
+      this.on(player, 'playbackrateschange', e => this.handlePlaybackRateschange(e));
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      const el = super.createEl();
+      this.labelElId_ = 'vjs-playback-rate-value-label-' + this.id_;
+      this.labelEl_ = createEl('div', {
+        className: 'vjs-playback-rate-value',
+        id: this.labelElId_,
+        textContent: '1x'
+      });
+      el.appendChild(this.labelEl_);
+      return el;
+    }
+    dispose() {
+      this.labelEl_ = null;
+      super.dispose();
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-playback-rate ${super.buildCSSClass()}`;
+    }
+    buildWrapperCSSClass() {
+      return `vjs-playback-rate ${super.buildWrapperCSSClass()}`;
+    }
+
+    /**
+     * Create the list of menu items. Specific to each subclass.
+     *
+     */
+    createItems() {
+      const rates = this.playbackRates();
+      const items = [];
+      for (let i = rates.length - 1; i >= 0; i--) {
+        items.push(new PlaybackRateMenuItem(this.player(), {
+          rate: rates[i] + 'x'
+        }));
+      }
+      return items;
+    }
+
+    /**
+     * On playbackrateschange, update the menu to account for the new items.
+     *
+     * @listens Player#playbackrateschange
+     */
+    handlePlaybackRateschange(event) {
+      this.update();
+    }
+
+    /**
+     * Get possible playback rates
+     *
+     * @return {Array}
+     *         All possible playback rates
+     */
+    playbackRates() {
+      const player = this.player();
+      return player.playbackRates && player.playbackRates() || [];
+    }
+
+    /**
+     * Get whether playback rates is supported by the tech
+     * and an array of playback rates exists
+     *
+     * @return {boolean}
+     *         Whether changing playback rate is supported
+     */
+    playbackRateSupported() {
+      return this.player().tech_ && this.player().tech_.featuresPlaybackRate && this.playbackRates() && this.playbackRates().length > 0;
+    }
+
+    /**
+     * Hide playback rate controls when they're no playback rate options to select
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#loadstart
+     */
+    updateVisibility(event) {
+      if (this.playbackRateSupported()) {
+        this.removeClass('vjs-hidden');
+      } else {
+        this.addClass('vjs-hidden');
+      }
+    }
+
+    /**
+     * Update button label when rate changed
+     *
+     * @param {Event} [event]
+     *        The event that caused this function to run.
+     *
+     * @listens Player#ratechange
+     */
+    updateLabel(event) {
+      if (this.playbackRateSupported()) {
+        this.labelEl_.textContent = this.player().playbackRate() + 'x';
+      }
+    }
+  }
+
+  /**
+   * The text that should display over the `PlaybackRateMenuButton`s controls.
+   *
+   * Added for localization.
+   *
+   * @type {string}
+   * @protected
+   */
+  PlaybackRateMenuButton.prototype.controlText_ = 'Playback Rate';
+  Component$1.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton);
+
+  /**
+   * @file spacer.js
+   */
+
+  /**
+   * Just an empty spacer element that can be used as an append point for plugins, etc.
+   * Also can be used to create space between elements when necessary.
+   *
+   * @extends Component
+   */
+  class Spacer extends Component$1 {
+    /**
+    * Builds the default DOM `className`.
+    *
+    * @return {string}
+    *         The DOM `className` for this object.
+    */
+    buildCSSClass() {
+      return `vjs-spacer ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl(tag = 'div', props = {}, attributes = {}) {
+      if (!props.className) {
+        props.className = this.buildCSSClass();
+      }
+      return super.createEl(tag, props, attributes);
+    }
+  }
+  Component$1.registerComponent('Spacer', Spacer);
+
+  /**
+   * @file custom-control-spacer.js
+   */
+
+  /**
+   * Spacer specifically meant to be used as an insertion point for new plugins, etc.
+   *
+   * @extends Spacer
+   */
+  class CustomControlSpacer extends Spacer {
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+      return `vjs-custom-control-spacer ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: this.buildCSSClass(),
+        // No-flex/table-cell mode requires there be some content
+        // in the cell to fill the remaining space of the table.
+        textContent: '\u00a0'
+      });
+    }
+  }
+  Component$1.registerComponent('CustomControlSpacer', CustomControlSpacer);
+
+  /**
+   * @file control-bar.js
+   */
+
+  /**
+   * Container of main controls.
+   *
+   * @extends Component
+   */
+  class ControlBar extends Component$1 {
+    /**
+     * Create the `Component`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      return super.createEl('div', {
+        className: 'vjs-control-bar',
+        dir: 'ltr'
+      });
+    }
+  }
+
+  /**
+   * Default options for `ControlBar`
+   *
+   * @type {Object}
+   * @private
+   */
+  ControlBar.prototype.options_ = {
+    children: ['playToggle', 'skipBackward', 'skipForward', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'seekToLive', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'pictureInPictureToggle', 'fullscreenToggle']
+  };
+  Component$1.registerComponent('ControlBar', ControlBar);
+
+  /**
+   * @file error-display.js
+   */
+
+  /**
+   * A display that indicates an error has occurred. This means that the video
+   * is unplayable.
+   *
+   * @extends ModalDialog
+   */
+  class ErrorDisplay extends ModalDialog {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  { import('./player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player, options) {
+      super(player, options);
+      this.on(player, 'error', e => {
+        this.open(e);
+      });
+    }
+
+    /**
+     * Builds the default DOM `className`.
+     *
+     * @return {string}
+     *         The DOM `className` for this object.
+     *
+     * @deprecated Since version 5.
+     */
+    buildCSSClass() {
+      return `vjs-error-display ${super.buildCSSClass()}`;
+    }
+
+    /**
+     * Gets the localized error message based on the `Player`s error.
+     *
+     * @return {string}
+     *         The `Player`s error message localized or an empty string.
+     */
+    content() {
+      const error = this.player().error();
+      return error ? this.localize(error.message) : '';
+    }
+  }
+
+  /**
+   * The default options for an `ErrorDisplay`.
+   *
+   * @private
+   */
+  ErrorDisplay.prototype.options_ = Object.assign({}, ModalDialog.prototype.options_, {
+    pauseOnOpen: false,
+    fillAlways: true,
+    temporary: false,
+    uncloseable: true
+  });
+  Component$1.registerComponent('ErrorDisplay', ErrorDisplay);
+
+  /**
+   * @file text-track-settings.js
+   */
+  const LOCAL_STORAGE_KEY$1 = 'vjs-text-track-settings';
+  const COLOR_BLACK = ['#000', 'Black'];
+  const COLOR_BLUE = ['#00F', 'Blue'];
+  const COLOR_CYAN = ['#0FF', 'Cyan'];
+  const COLOR_GREEN = ['#0F0', 'Green'];
+  const COLOR_MAGENTA = ['#F0F', 'Magenta'];
+  const COLOR_RED = ['#F00', 'Red'];
+  const COLOR_WHITE = ['#FFF', 'White'];
+  const COLOR_YELLOW = ['#FF0', 'Yellow'];
+  const OPACITY_OPAQUE = ['1', 'Opaque'];
+  const OPACITY_SEMI = ['0.5', 'Semi-Transparent'];
+  const OPACITY_TRANS = ['0', 'Transparent'];
+
+  // Configuration for the various <select> elements in the DOM of this component.
+  //
+  // Possible keys include:
+  //
+  // `default`:
+  //   The default option index. Only needs to be provided if not zero.
+  // `parser`:
+  //   A function which is used to parse the value from the selected option in
+  //   a customized way.
+  // `selector`:
+  //   The selector used to find the associated <select> element.
+  const selectConfigs = {
+    backgroundColor: {
+      selector: '.vjs-bg-color > select',
+      id: 'captions-background-color-%s',
+      label: 'Color',
+      options: [COLOR_BLACK, COLOR_WHITE, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
+    },
+    backgroundOpacity: {
+      selector: '.vjs-bg-opacity > select',
+      id: 'captions-background-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_OPAQUE, OPACITY_SEMI, OPACITY_TRANS]
+    },
+    color: {
+      selector: '.vjs-text-color > select',
+      id: 'captions-foreground-color-%s',
+      label: 'Color',
+      options: [COLOR_WHITE, COLOR_BLACK, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
+    },
+    edgeStyle: {
+      selector: '.vjs-edge-style > select',
+      id: '%s',
+      label: 'Text Edge Style',
+      options: [['none', 'None'], ['raised', 'Raised'], ['depressed', 'Depressed'], ['uniform', 'Uniform'], ['dropshadow', 'Drop shadow']]
+    },
+    fontFamily: {
+      selector: '.vjs-font-family > select',
+      id: 'captions-font-family-%s',
+      label: 'Font Family',
+      options: [['proportionalSansSerif', 'Proportional Sans-Serif'], ['monospaceSansSerif', 'Monospace Sans-Serif'], ['proportionalSerif', 'Proportional Serif'], ['monospaceSerif', 'Monospace Serif'], ['casual', 'Casual'], ['script', 'Script'], ['small-caps', 'Small Caps']]
+    },
+    fontPercent: {
+      selector: '.vjs-font-percent > select',
+      id: 'captions-font-size-%s',
+      label: 'Font Size',
+      options: [['0.50', '50%'], ['0.75', '75%'], ['1.00', '100%'], ['1.25', '125%'], ['1.50', '150%'], ['1.75', '175%'], ['2.00', '200%'], ['3.00', '300%'], ['4.00', '400%']],
+      default: 2,
+      parser: v => v === '1.00' ? null : Number(v)
+    },
+    textOpacity: {
+      selector: '.vjs-text-opacity > select',
+      id: 'captions-foreground-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_OPAQUE, OPACITY_SEMI]
+    },
+    // Options for this object are defined below.
+    windowColor: {
+      selector: '.vjs-window-color > select',
+      id: 'captions-window-color-%s',
+      label: 'Color'
+    },
+    // Options for this object are defined below.
+    windowOpacity: {
+      selector: '.vjs-window-opacity > select',
+      id: 'captions-window-opacity-%s',
+      label: 'Opacity',
+      options: [OPACITY_TRANS, OPACITY_SEMI, OPACITY_OPAQUE]
+    }
+  };
+  selectConfigs.windowColor.options = selectConfigs.backgroundColor.options;
+
+  /**
+   * Get the actual value of an option.
+   *
+   * @param  {string} value
+   *         The value to get
+   *
+   * @param  {Function} [parser]
+   *         Optional function to adjust the value.
+   *
+   * @return {*}
+   *         - Will be `undefined` if no value exists
+   *         - Will be `undefined` if the given value is "none".
+   *         - Will be the actual value otherwise.
+   *
+   * @private
+   */
+  function parseOptionValue(value, parser) {
+    if (parser) {
+      value = parser(value);
+    }
+    if (value && value !== 'none') {
+      return value;
+    }
+  }
+
+  /**
+   * Gets the value of the selected <option> element within a <select> element.
+   *
+   * @param  {Element} el
+   *         the element to look in
+   *
+   * @param  {Function} [parser]
+   *         Optional function to adjust the value.
+   *
+   * @return {*}
+   *         - Will be `undefined` if no value exists
+   *         - Will be `undefined` if the given value is "none".
+   *         - Will be the actual value otherwise.
+   *
+   * @private
+   */
+  function getSelectedOptionValue(el, parser) {
+    const value = el.options[el.options.selectedIndex].value;
+    return parseOptionValue(value, parser);
+  }
+
+  /**
+   * Sets the selected <option> element within a <select> element based on a
+   * given value.
+   *
+   * @param {Element} el
+   *        The element to look in.
+   *
+   * @param {string} value
+   *        the property to look on.
+   *
+   * @param {Function} [parser]
+   *        Optional function to adjust the value before comparing.
+   *
+   * @private
+   */
+  function setSelectedOption(el, value, parser) {
+    if (!value) {
+      return;
+    }
+    for (let i = 0; i < el.options.length; i++) {
+      if (parseOptionValue(el.options[i].value, parser) === value) {
+        el.selectedIndex = i;
+        break;
+      }
+    }
+  }
+
+  /**
+   * Manipulate Text Tracks settings.
+   *
+   * @extends ModalDialog
+   */
+  class TextTrackSettings extends ModalDialog {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('../player').default } player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player, options) {
+      options.temporary = false;
+      super(player, options);
+      this.updateDisplay = this.updateDisplay.bind(this);
+
+      // fill the modal and pretend we have opened it
+      this.fill();
+      this.hasBeenOpened_ = this.hasBeenFilled_ = true;
+      this.endDialog = createEl('p', {
+        className: 'vjs-control-text',
+        textContent: this.localize('End of dialog window.')
+      });
+      this.el().appendChild(this.endDialog);
+      this.setDefaults();
+
+      // Grab `persistTextTrackSettings` from the player options if not passed in child options
+      if (options.persistTextTrackSettings === undefined) {
+        this.options_.persistTextTrackSettings = this.options_.playerOptions.persistTextTrackSettings;
+      }
+      this.on(this.$('.vjs-done-button'), 'click', () => {
+        this.saveSettings();
+        this.close();
+      });
+      this.on(this.$('.vjs-default-button'), 'click', () => {
+        this.setDefaults();
+        this.updateDisplay();
+      });
+      each(selectConfigs, config => {
+        this.on(this.$(config.selector), 'change', this.updateDisplay);
+      });
+      if (this.options_.persistTextTrackSettings) {
+        this.restoreSettings();
+      }
+    }
+    dispose() {
+      this.endDialog = null;
+      super.dispose();
+    }
+
+    /**
+     * Create a <select> element with configured options.
+     *
+     * @param {string} key
+     *        Configuration key to use during creation.
+     *
+     * @param {string} [legendId]
+     *        Id of associated <legend>.
+     *
+     * @param {string} [type=label]
+     *        Type of labelling element, `label` or `legend`
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElSelect_(key, legendId = '', type = 'label') {
+      const config = selectConfigs[key];
+      const id = config.id.replace('%s', this.id_);
+      const selectLabelledbyIds = [legendId, id].join(' ').trim();
+      const guid = `vjs_select_${newGUID()}`;
+      return [`<${type} id="${id}"${type === 'label' ? ` for="${guid}" class="vjs-label"` : ''}>`, this.localize(config.label), `</${type}>`, `<select aria-labelledby="${selectLabelledbyIds}" id="${guid}">`].concat(config.options.map(o => {
+        const optionId = id + '-' + o[1].replace(/\W+/g, '');
+        return [`<option id="${optionId}" value="${o[0]}" `, `aria-labelledby="${selectLabelledbyIds} ${optionId}">`, this.localize(o[1]), '</option>'].join('');
+      })).concat('</select>').join('');
+    }
+
+    /**
+     * Create foreground color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElFgColor_() {
+      const legendId = `captions-text-legend-${this.id_}`;
+      return ['<fieldset class="vjs-fg vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Text'), '</legend>', '<span class="vjs-text-color">', this.createElSelect_('color', legendId), '</span>', '<span class="vjs-text-opacity vjs-opacity">', this.createElSelect_('textOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create background color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElBgColor_() {
+      const legendId = `captions-background-${this.id_}`;
+      return ['<fieldset class="vjs-bg vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Text Background'), '</legend>', '<span class="vjs-bg-color">', this.createElSelect_('backgroundColor', legendId), '</span>', '<span class="vjs-bg-opacity vjs-opacity">', this.createElSelect_('backgroundOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create window color element for the component
+     *
+     * @return {string}
+     *         An HTML string.
+     *
+     * @private
+     */
+    createElWinColor_() {
+      const legendId = `captions-window-${this.id_}`;
+      return ['<fieldset class="vjs-window vjs-track-setting">', `<legend id="${legendId}">`, this.localize('Caption Area Background'), '</legend>', '<span class="vjs-window-color">', this.createElSelect_('windowColor', legendId), '</span>', '<span class="vjs-window-opacity vjs-opacity">', this.createElSelect_('windowOpacity', legendId), '</span>', '</fieldset>'].join('');
+    }
+
+    /**
+     * Create color elements for the component
+     *
+     * @return {Element}
+     *         The element that was created
+     *
+     * @private
+     */
+    createElColors_() {
+      return createEl('div', {
+        className: 'vjs-track-settings-colors',
+        innerHTML: [this.createElFgColor_(), this.createElBgColor_(), this.createElWinColor_()].join('')
+      });
+    }
+
+    /**
+     * Create font elements for the component
+     *
+     * @return {Element}
+     *         The element that was created.
+     *
+     * @private
+     */
+    createElFont_() {
+      return createEl('div', {
+        className: 'vjs-track-settings-font',
+        innerHTML: ['<fieldset class="vjs-font-percent vjs-track-setting">', this.createElSelect_('fontPercent', '', 'legend'), '</fieldset>', '<fieldset class="vjs-edge-style vjs-track-setting">', this.createElSelect_('edgeStyle', '', 'legend'), '</fieldset>', '<fieldset class="vjs-font-family vjs-track-setting">', this.createElSelect_('fontFamily', '', 'legend'), '</fieldset>'].join('')
+      });
+    }
+
+    /**
+     * Create controls for the component
+     *
+     * @return {Element}
+     *         The element that was created.
+     *
+     * @private
+     */
+    createElControls_() {
+      const defaultsDescription = this.localize('restore all settings to the default values');
+      return createEl('div', {
+        className: 'vjs-track-settings-controls',
+        innerHTML: [`<button type="button" class="vjs-default-button" title="${defaultsDescription}">`, this.localize('Reset'), `<span class="vjs-control-text"> ${defaultsDescription}</span>`, '</button>', `<button type="button" class="vjs-done-button">${this.localize('Done')}</button>`].join('')
+      });
+    }
+    content() {
+      return [this.createElColors_(), this.createElFont_(), this.createElControls_()];
+    }
+    label() {
+      return this.localize('Caption Settings Dialog');
+    }
+    description() {
+      return this.localize('Beginning of dialog window. Escape will cancel and close the window.');
+    }
+    buildCSSClass() {
+      return super.buildCSSClass() + ' vjs-text-track-settings';
+    }
+
+    /**
+     * Gets an object of text track settings (or null).
+     *
+     * @return {Object}
+     *         An object with config values parsed from the DOM or localStorage.
+     */
+    getValues() {
+      return reduce(selectConfigs, (accum, config, key) => {
+        const value = getSelectedOptionValue(this.$(config.selector), config.parser);
+        if (value !== undefined) {
+          accum[key] = value;
+        }
+        return accum;
+      }, {});
+    }
+
+    /**
+     * Sets text track settings from an object of values.
+     *
+     * @param {Object} values
+     *        An object with config values parsed from the DOM or localStorage.
+     */
+    setValues(values) {
+      each(selectConfigs, (config, key) => {
+        setSelectedOption(this.$(config.selector), values[key], config.parser);
+      });
+    }
+
+    /**
+     * Sets all `<select>` elements to their default values.
+     */
+    setDefaults() {
+      each(selectConfigs, config => {
+        const index = config.hasOwnProperty('default') ? config.default : 0;
+        this.$(config.selector).selectedIndex = index;
+      });
+    }
+
+    /**
+     * Restore texttrack settings from localStorage
+     */
+    restoreSettings() {
+      let values;
+      try {
+        values = JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_KEY$1));
+      } catch (err) {
+        log$1.warn(err);
+      }
+      if (values) {
+        this.setValues(values);
+      }
+    }
+
+    /**
+     * Save text track settings to localStorage
+     */
+    saveSettings() {
+      if (!this.options_.persistTextTrackSettings) {
+        return;
+      }
+      const values = this.getValues();
+      try {
+        if (Object.keys(values).length) {
+          window.localStorage.setItem(LOCAL_STORAGE_KEY$1, JSON.stringify(values));
+        } else {
+          window.localStorage.removeItem(LOCAL_STORAGE_KEY$1);
+        }
+      } catch (err) {
+        log$1.warn(err);
+      }
+    }
+
+    /**
+     * Update display of text track settings
+     */
+    updateDisplay() {
+      const ttDisplay = this.player_.getChild('textTrackDisplay');
+      if (ttDisplay) {
+        ttDisplay.updateDisplay();
+      }
+    }
+
+    /**
+     * conditionally blur the element and refocus the captions button
+     *
+     * @private
+     */
+    conditionalBlur_() {
+      this.previouslyActiveEl_ = null;
+      const cb = this.player_.controlBar;
+      const subsCapsBtn = cb && cb.subsCapsButton;
+      const ccBtn = cb && cb.captionsButton;
+      if (subsCapsBtn) {
+        subsCapsBtn.focus();
+      } else if (ccBtn) {
+        ccBtn.focus();
+      }
+    }
+
+    /**
+     * Repopulate dialog with new localizations on languagechange
+     */
+    handleLanguagechange() {
+      this.fill();
+    }
+  }
+  Component$1.registerComponent('TextTrackSettings', TextTrackSettings);
+
+  /**
+   * @file resize-manager.js
+   */
+
+  /**
+   * A Resize Manager. It is in charge of triggering `playerresize` on the player in the right conditions.
+   *
+   * It'll either create an iframe and use a debounced resize handler on it or use the new {@link https://wicg.github.io/ResizeObserver/|ResizeObserver}.
+   *
+   * If the ResizeObserver is available natively, it will be used. A polyfill can be passed in as an option.
+   * If a `playerresize` event is not needed, the ResizeManager component can be removed from the player, see the example below.
+   *
+   * @example <caption>How to disable the resize manager</caption>
+   * const player = videojs('#vid', {
+   *   resizeManager: false
+   * });
+   *
+   * @see {@link https://wicg.github.io/ResizeObserver/|ResizeObserver specification}
+   *
+   * @extends Component
+   */
+  class ResizeManager extends Component$1 {
+    /**
+     * Create the ResizeManager.
+     *
+     * @param {Object} player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of ResizeManager options.
+     *
+     * @param {Object} [options.ResizeObserver]
+     *        A polyfill for ResizeObserver can be passed in here.
+     *        If this is set to null it will ignore the native ResizeObserver and fall back to the iframe fallback.
+     */
+    constructor(player, options) {
+      let RESIZE_OBSERVER_AVAILABLE = options.ResizeObserver || window.ResizeObserver;
+
+      // if `null` was passed, we want to disable the ResizeObserver
+      if (options.ResizeObserver === null) {
+        RESIZE_OBSERVER_AVAILABLE = false;
+      }
+
+      // Only create an element when ResizeObserver isn't available
+      const options_ = merge$2({
+        createEl: !RESIZE_OBSERVER_AVAILABLE,
+        reportTouchActivity: false
+      }, options);
+      super(player, options_);
+      this.ResizeObserver = options.ResizeObserver || window.ResizeObserver;
+      this.loadListener_ = null;
+      this.resizeObserver_ = null;
+      this.debouncedHandler_ = debounce(() => {
+        this.resizeHandler();
+      }, 100, false, this);
+      if (RESIZE_OBSERVER_AVAILABLE) {
+        this.resizeObserver_ = new this.ResizeObserver(this.debouncedHandler_);
+        this.resizeObserver_.observe(player.el());
+      } else {
+        this.loadListener_ = () => {
+          if (!this.el_ || !this.el_.contentWindow) {
+            return;
+          }
+          const debouncedHandler_ = this.debouncedHandler_;
+          let unloadListener_ = this.unloadListener_ = function () {
+            off(this, 'resize', debouncedHandler_);
+            off(this, 'unload', unloadListener_);
+            unloadListener_ = null;
+          };
+
+          // safari and edge can unload the iframe before resizemanager dispose
+          // we have to dispose of event handlers correctly before that happens
+          on(this.el_.contentWindow, 'unload', unloadListener_);
+          on(this.el_.contentWindow, 'resize', debouncedHandler_);
+        };
+        this.one('load', this.loadListener_);
+      }
+    }
+    createEl() {
+      return super.createEl('iframe', {
+        className: 'vjs-resize-manager',
+        tabIndex: -1,
+        title: this.localize('No content')
+      }, {
+        'aria-hidden': 'true'
+      });
+    }
+
+    /**
+     * Called when a resize is triggered on the iframe or a resize is observed via the ResizeObserver
+     *
+     * @fires Player#playerresize
+     */
+    resizeHandler() {
+      /**
+       * Called when the player size has changed
+       *
+       * @event Player#playerresize
+       * @type {Event}
+       */
+      // make sure player is still around to trigger
+      // prevents this from causing an error after dispose
+      if (!this.player_ || !this.player_.trigger) {
+        return;
+      }
+      this.player_.trigger('playerresize');
+    }
+    dispose() {
+      if (this.debouncedHandler_) {
+        this.debouncedHandler_.cancel();
+      }
+      if (this.resizeObserver_) {
+        if (this.player_.el()) {
+          this.resizeObserver_.unobserve(this.player_.el());
+        }
+        this.resizeObserver_.disconnect();
+      }
+      if (this.loadListener_) {
+        this.off('load', this.loadListener_);
+      }
+      if (this.el_ && this.el_.contentWindow && this.unloadListener_) {
+        this.unloadListener_.call(this.el_.contentWindow);
+      }
+      this.ResizeObserver = null;
+      this.resizeObserver = null;
+      this.debouncedHandler_ = null;
+      this.loadListener_ = null;
+      super.dispose();
+    }
+  }
+  Component$1.registerComponent('ResizeManager', ResizeManager);
+
+  const defaults = {
+    trackingThreshold: 20,
+    liveTolerance: 15
+  };
+
+  /*
+    track when we are at the live edge, and other helpers for live playback */
+
+  /**
+   * A class for checking live current time and determining when the player
+   * is at or behind the live edge.
+   */
+  class LiveTracker extends Component$1 {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param { import('./player').default } player
+     *        The `Player` that this class should be attached to.
+     *
+     * @param {Object} [options]
+     *        The key/value store of player options.
+     *
+     * @param {number} [options.trackingThreshold=20]
+     *        Number of seconds of live window (seekableEnd - seekableStart) that
+     *        media needs to have before the liveui will be shown.
+     *
+     * @param {number} [options.liveTolerance=15]
+     *        Number of seconds behind live that we have to be
+     *        before we will be considered non-live. Note that this will only
+     *        be used when playing at the live edge. This allows large seekable end
+     *        changes to not effect whether we are live or not.
+     */
+    constructor(player, options) {
+      // LiveTracker does not need an element
+      const options_ = merge$2(defaults, options, {
+        createEl: false
+      });
+      super(player, options_);
+      this.trackLiveHandler_ = () => this.trackLive_();
+      this.handlePlay_ = e => this.handlePlay(e);
+      this.handleFirstTimeupdate_ = e => this.handleFirstTimeupdate(e);
+      this.handleSeeked_ = e => this.handleSeeked(e);
+      this.seekToLiveEdge_ = e => this.seekToLiveEdge(e);
+      this.reset_();
+      this.on(this.player_, 'durationchange', e => this.handleDurationchange(e));
+      // we should try to toggle tracking on canplay as native playback engines, like Safari
+      // may not have the proper values for things like seekableEnd until then
+      this.on(this.player_, 'canplay', () => this.toggleTracking());
+    }
+
+    /**
+     * all the functionality for tracking when seek end changes
+     * and for tracking how far past seek end we should be
+     */
+    trackLive_() {
+      const seekable = this.player_.seekable();
+
+      // skip undefined seekable
+      if (!seekable || !seekable.length) {
+        return;
+      }
+      const newTime = Number(window.performance.now().toFixed(4));
+      const deltaTime = this.lastTime_ === -1 ? 0 : (newTime - this.lastTime_) / 1000;
+      this.lastTime_ = newTime;
+      this.pastSeekEnd_ = this.pastSeekEnd() + deltaTime;
+      const liveCurrentTime = this.liveCurrentTime();
+      const currentTime = this.player_.currentTime();
+
+      // we are behind live if any are true
+      // 1. the player is paused
+      // 2. the user seeked to a location 2 seconds away from live
+      // 3. the difference between live and current time is greater
+      //    liveTolerance which defaults to 15s
+      let isBehind = this.player_.paused() || this.seekedBehindLive_ || Math.abs(liveCurrentTime - currentTime) > this.options_.liveTolerance;
+
+      // we cannot be behind if
+      // 1. until we have not seen a timeupdate yet
+      // 2. liveCurrentTime is Infinity, which happens on Android and Native Safari
+      if (!this.timeupdateSeen_ || liveCurrentTime === Infinity) {
+        isBehind = false;
+      }
+      if (isBehind !== this.behindLiveEdge_) {
+        this.behindLiveEdge_ = isBehind;
+        this.trigger('liveedgechange');
+      }
+    }
+
+    /**
+     * handle a durationchange event on the player
+     * and start/stop tracking accordingly.
+     */
+    handleDurationchange() {
+      this.toggleTracking();
+    }
+
+    /**
+     * start/stop tracking
+     */
+    toggleTracking() {
+      if (this.player_.duration() === Infinity && this.liveWindow() >= this.options_.trackingThreshold) {
+        if (this.player_.options_.liveui) {
+          this.player_.addClass('vjs-liveui');
+        }
+        this.startTracking();
+      } else {
+        this.player_.removeClass('vjs-liveui');
+        this.stopTracking();
+      }
+    }
+
+    /**
+     * start tracking live playback
+     */
+    startTracking() {
+      if (this.isTracking()) {
+        return;
+      }
+
+      // If we haven't seen a timeupdate, we need to check whether playback
+      // began before this component started tracking. This can happen commonly
+      // when using autoplay.
+      if (!this.timeupdateSeen_) {
+        this.timeupdateSeen_ = this.player_.hasStarted();
+      }
+      this.trackingInterval_ = this.setInterval(this.trackLiveHandler_, UPDATE_REFRESH_INTERVAL);
+      this.trackLive_();
+      this.on(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+      if (!this.timeupdateSeen_) {
+        this.one(this.player_, 'play', this.handlePlay_);
+        this.one(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+      } else {
+        this.on(this.player_, 'seeked', this.handleSeeked_);
+      }
+    }
+
+    /**
+     * handle the first timeupdate on the player if it wasn't already playing
+     * when live tracker started tracking.
+     */
+    handleFirstTimeupdate() {
+      this.timeupdateSeen_ = true;
+      this.on(this.player_, 'seeked', this.handleSeeked_);
+    }
+
+    /**
+     * Keep track of what time a seek starts, and listen for seeked
+     * to find where a seek ends.
+     */
+    handleSeeked() {
+      const timeDiff = Math.abs(this.liveCurrentTime() - this.player_.currentTime());
+      this.seekedBehindLive_ = this.nextSeekedFromUser_ && timeDiff > 2;
+      this.nextSeekedFromUser_ = false;
+      this.trackLive_();
+    }
+
+    /**
+     * handle the first play on the player, and make sure that we seek
+     * right to the live edge.
+     */
+    handlePlay() {
+      this.one(this.player_, 'timeupdate', this.seekToLiveEdge_);
+    }
+
+    /**
+     * Stop tracking, and set all internal variables to
+     * their initial value.
+     */
+    reset_() {
+      this.lastTime_ = -1;
+      this.pastSeekEnd_ = 0;
+      this.lastSeekEnd_ = -1;
+      this.behindLiveEdge_ = true;
+      this.timeupdateSeen_ = false;
+      this.seekedBehindLive_ = false;
+      this.nextSeekedFromUser_ = false;
+      this.clearInterval(this.trackingInterval_);
+      this.trackingInterval_ = null;
+      this.off(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+      this.off(this.player_, 'seeked', this.handleSeeked_);
+      this.off(this.player_, 'play', this.handlePlay_);
+      this.off(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+      this.off(this.player_, 'timeupdate', this.seekToLiveEdge_);
+    }
+
+    /**
+     * The next seeked event is from the user. Meaning that any seek
+     * > 2s behind live will be considered behind live for real and
+     * liveTolerance will be ignored.
+     */
+    nextSeekedFromUser() {
+      this.nextSeekedFromUser_ = true;
+    }
+
+    /**
+     * stop tracking live playback
+     */
+    stopTracking() {
+      if (!this.isTracking()) {
+        return;
+      }
+      this.reset_();
+      this.trigger('liveedgechange');
+    }
+
+    /**
+     * A helper to get the player seekable end
+     * so that we don't have to null check everywhere
+     *
+     * @return {number}
+     *         The furthest seekable end or Infinity.
+     */
+    seekableEnd() {
+      const seekable = this.player_.seekable();
+      const seekableEnds = [];
+      let i = seekable ? seekable.length : 0;
+      while (i--) {
+        seekableEnds.push(seekable.end(i));
+      }
+
+      // grab the furthest seekable end after sorting, or if there are none
+      // default to Infinity
+      return seekableEnds.length ? seekableEnds.sort()[seekableEnds.length - 1] : Infinity;
+    }
+
+    /**
+     * A helper to get the player seekable start
+     * so that we don't have to null check everywhere
+     *
+     * @return {number}
+     *         The earliest seekable start or 0.
+     */
+    seekableStart() {
+      const seekable = this.player_.seekable();
+      const seekableStarts = [];
+      let i = seekable ? seekable.length : 0;
+      while (i--) {
+        seekableStarts.push(seekable.start(i));
+      }
+
+      // grab the first seekable start after sorting, or if there are none
+      // default to 0
+      return seekableStarts.length ? seekableStarts.sort()[0] : 0;
+    }
+
+    /**
+     * Get the live time window aka
+     * the amount of time between seekable start and
+     * live current time.
+     *
+     * @return {number}
+     *         The amount of seconds that are seekable in
+     *         the live video.
+     */
+    liveWindow() {
+      const liveCurrentTime = this.liveCurrentTime();
+
+      // if liveCurrenTime is Infinity then we don't have a liveWindow at all
+      if (liveCurrentTime === Infinity) {
+        return 0;
+      }
+      return liveCurrentTime - this.seekableStart();
+    }
+
+    /**
+     * Determines if the player is live, only checks if this component
+     * is tracking live playback or not
+     *
+     * @return {boolean}
+     *         Whether liveTracker is tracking
+     */
+    isLive() {
+      return this.isTracking();
+    }
+
+    /**
+     * Determines if currentTime is at the live edge and won't fall behind
+     * on each seekableendchange
+     *
+     * @return {boolean}
+     *         Whether playback is at the live edge
+     */
+    atLiveEdge() {
+      return !this.behindLiveEdge();
+    }
+
+    /**
+     * get what we expect the live current time to be
+     *
+     * @return {number}
+     *         The expected live current time
+     */
+    liveCurrentTime() {
+      return this.pastSeekEnd() + this.seekableEnd();
+    }
+
+    /**
+     * The number of seconds that have occurred after seekable end
+     * changed. This will be reset to 0 once seekable end changes.
+     *
+     * @return {number}
+     *         Seconds past the current seekable end
+     */
+    pastSeekEnd() {
+      const seekableEnd = this.seekableEnd();
+      if (this.lastSeekEnd_ !== -1 && seekableEnd !== this.lastSeekEnd_) {
+        this.pastSeekEnd_ = 0;
+      }
+      this.lastSeekEnd_ = seekableEnd;
+      return this.pastSeekEnd_;
+    }
+
+    /**
+     * If we are currently behind the live edge, aka currentTime will be
+     * behind on a seekableendchange
+     *
+     * @return {boolean}
+     *         If we are behind the live edge
+     */
+    behindLiveEdge() {
+      return this.behindLiveEdge_;
+    }
+
+    /**
+     * Whether live tracker is currently tracking or not.
+     */
+    isTracking() {
+      return typeof this.trackingInterval_ === 'number';
+    }
+
+    /**
+     * Seek to the live edge if we are behind the live edge
+     */
+    seekToLiveEdge() {
+      this.seekedBehindLive_ = false;
+      if (this.atLiveEdge()) {
+        return;
+      }
+      this.nextSeekedFromUser_ = false;
+      this.player_.currentTime(this.liveCurrentTime());
+    }
+
+    /**
+     * Dispose of liveTracker
+     */
+    dispose() {
+      this.stopTracking();
+      super.dispose();
+    }
+  }
+  Component$1.registerComponent('LiveTracker', LiveTracker);
+
+  /**
+   * Displays an element over the player which contains an optional title and
+   * description for the current content.
+   *
+   * Much of the code for this component originated in the now obsolete
+   * videojs-dock plugin: https://github.com/brightcove/videojs-dock/
+   *
+   * @extends Component
+   */
+  class TitleBar extends Component$1 {
+    constructor(player, options) {
+      super(player, options);
+      this.on('statechanged', e => this.updateDom_());
+      this.updateDom_();
+    }
+
+    /**
+     * Create the `TitleBar`'s DOM element
+     *
+     * @return {Element}
+     *         The element that was created.
+     */
+    createEl() {
+      this.els = {
+        title: createEl('div', {
+          className: 'vjs-title-bar-title',
+          id: `vjs-title-bar-title-${newGUID()}`
+        }),
+        description: createEl('div', {
+          className: 'vjs-title-bar-description',
+          id: `vjs-title-bar-description-${newGUID()}`
+        })
+      };
+      return createEl('div', {
+        className: 'vjs-title-bar'
+      }, {}, values$1(this.els));
+    }
+
+    /**
+     * Updates the DOM based on the component's state object.
+     */
+    updateDom_() {
+      const tech = this.player_.tech_;
+      const techEl = tech && tech.el_;
+      const techAriaAttrs = {
+        title: 'aria-labelledby',
+        description: 'aria-describedby'
+      };
+      ['title', 'description'].forEach(k => {
+        const value = this.state[k];
+        const el = this.els[k];
+        const techAriaAttr = techAriaAttrs[k];
+        emptyEl(el);
+        if (value) {
+          textContent(el, value);
+        }
+
+        // If there is a tech element available, update its ARIA attributes
+        // according to whether a title and/or description have been provided.
+        if (techEl) {
+          techEl.removeAttribute(techAriaAttr);
+          if (value) {
+            techEl.setAttribute(techAriaAttr, el.id);
+          }
+        }
+      });
+      if (this.state.title || this.state.description) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+
+    /**
+     * Update the contents of the title bar component with new title and
+     * description text.
+     *
+     * If both title and description are missing, the title bar will be hidden.
+     *
+     * If either title or description are present, the title bar will be visible.
+     *
+     * NOTE: Any previously set value will be preserved. To unset a previously
+     * set value, you must pass an empty string or null.
+     *
+     * For example:
+     *
+     * ```
+     * update({title: 'foo', description: 'bar'}) // title: 'foo', description: 'bar'
+     * update({description: 'bar2'}) // title: 'foo', description: 'bar2'
+     * update({title: ''}) // title: '', description: 'bar2'
+     * update({title: 'foo', description: null}) // title: 'foo', description: null
+     * ```
+     *
+     * @param  {Object} [options={}]
+     *         An options object. When empty, the title bar will be hidden.
+     *
+     * @param  {string} [options.title]
+     *         A title to display in the title bar.
+     *
+     * @param  {string} [options.description]
+     *         A description to display in the title bar.
+     */
+    update(options) {
+      this.setState(options);
+    }
+
+    /**
+     * Dispose the component.
+     */
+    dispose() {
+      const tech = this.player_.tech_;
+      const techEl = tech && tech.el_;
+      if (techEl) {
+        techEl.removeAttribute('aria-labelledby');
+        techEl.removeAttribute('aria-describedby');
+      }
+      super.dispose();
+      this.els = null;
+    }
+  }
+  Component$1.registerComponent('TitleBar', TitleBar);
+
+  /**
+   * This function is used to fire a sourceset when there is something
+   * similar to `mediaEl.load()` being called. It will try to find the source via
+   * the `src` attribute and then the `<source>` elements. It will then fire `sourceset`
+   * with the source that was found or empty string if we cannot know. If it cannot
+   * find a source then `sourceset` will not be fired.
+   *
+   * @param { import('./html5').default } tech
+   *        The tech object that sourceset was setup on
+   *
+   * @return {boolean}
+   *         returns false if the sourceset was not fired and true otherwise.
+   */
+  const sourcesetLoad = tech => {
+    const el = tech.el();
+
+    // if `el.src` is set, that source will be loaded.
+    if (el.hasAttribute('src')) {
+      tech.triggerSourceset(el.src);
+      return true;
+    }
+
+    /**
+     * Since there isn't a src property on the media element, source elements will be used for
+     * implementing the source selection algorithm. This happens asynchronously and
+     * for most cases were there is more than one source we cannot tell what source will
+     * be loaded, without re-implementing the source selection algorithm. At this time we are not
+     * going to do that. There are three special cases that we do handle here though:
+     *
+     * 1. If there are no sources, do not fire `sourceset`.
+     * 2. If there is only one `<source>` with a `src` property/attribute that is our `src`
+     * 3. If there is more than one `<source>` but all of them have the same `src` url.
+     *    That will be our src.
+     */
+    const sources = tech.$$('source');
+    const srcUrls = [];
+    let src = '';
+
+    // if there are no sources, do not fire sourceset
+    if (!sources.length) {
+      return false;
+    }
+
+    // only count valid/non-duplicate source elements
+    for (let i = 0; i < sources.length; i++) {
+      const url = sources[i].src;
+      if (url && srcUrls.indexOf(url) === -1) {
+        srcUrls.push(url);
+      }
+    }
+
+    // there were no valid sources
+    if (!srcUrls.length) {
+      return false;
+    }
+
+    // there is only one valid source element url
+    // use that
+    if (srcUrls.length === 1) {
+      src = srcUrls[0];
+    }
+    tech.triggerSourceset(src);
+    return true;
+  };
+
+  /**
+   * our implementation of an `innerHTML` descriptor for browsers
+   * that do not have one.
+   */
+  const innerHTMLDescriptorPolyfill = Object.defineProperty({}, 'innerHTML', {
+    get() {
+      return this.cloneNode(true).innerHTML;
+    },
+    set(v) {
+      // make a dummy node to use innerHTML on
+      const dummy = document.createElement(this.nodeName.toLowerCase());
+
+      // set innerHTML to the value provided
+      dummy.innerHTML = v;
+
+      // make a document fragment to hold the nodes from dummy
+      const docFrag = document.createDocumentFragment();
+
+      // copy all of the nodes created by the innerHTML on dummy
+      // to the document fragment
+      while (dummy.childNodes.length) {
+        docFrag.appendChild(dummy.childNodes[0]);
+      }
+
+      // remove content
+      this.innerText = '';
+
+      // now we add all of that html in one by appending the
+      // document fragment. This is how innerHTML does it.
+      window.Element.prototype.appendChild.call(this, docFrag);
+
+      // then return the result that innerHTML's setter would
+      return this.innerHTML;
+    }
+  });
+
+  /**
+   * Get a property descriptor given a list of priorities and the
+   * property to get.
+   */
+  const getDescriptor = (priority, prop) => {
+    let descriptor = {};
+    for (let i = 0; i < priority.length; i++) {
+      descriptor = Object.getOwnPropertyDescriptor(priority[i], prop);
+      if (descriptor && descriptor.set && descriptor.get) {
+        break;
+      }
+    }
+    descriptor.enumerable = true;
+    descriptor.configurable = true;
+    return descriptor;
+  };
+  const getInnerHTMLDescriptor = tech => getDescriptor([tech.el(), window.HTMLMediaElement.prototype, window.Element.prototype, innerHTMLDescriptorPolyfill], 'innerHTML');
+
+  /**
+   * Patches browser internal functions so that we can tell synchronously
+   * if a `<source>` was appended to the media element. For some reason this
+   * causes a `sourceset` if the the media element is ready and has no source.
+   * This happens when:
+   * - The page has just loaded and the media element does not have a source.
+   * - The media element was emptied of all sources, then `load()` was called.
+   *
+   * It does this by patching the following functions/properties when they are supported:
+   *
+   * - `append()` - can be used to add a `<source>` element to the media element
+   * - `appendChild()` - can be used to add a `<source>` element to the media element
+   * - `insertAdjacentHTML()` -  can be used to add a `<source>` element to the media element
+   * - `innerHTML` -  can be used to add a `<source>` element to the media element
+   *
+   * @param {Html5} tech
+   *        The tech object that sourceset is being setup on.
+   */
+  const firstSourceWatch = function (tech) {
+    const el = tech.el();
+
+    // make sure firstSourceWatch isn't setup twice.
+    if (el.resetSourceWatch_) {
+      return;
+    }
+    const old = {};
+    const innerDescriptor = getInnerHTMLDescriptor(tech);
+    const appendWrapper = appendFn => (...args) => {
+      const retval = appendFn.apply(el, args);
+      sourcesetLoad(tech);
+      return retval;
+    };
+    ['append', 'appendChild', 'insertAdjacentHTML'].forEach(k => {
+      if (!el[k]) {
+        return;
+      }
+
+      // store the old function
+      old[k] = el[k];
+
+      // call the old function with a sourceset if a source
+      // was loaded
+      el[k] = appendWrapper(old[k]);
+    });
+    Object.defineProperty(el, 'innerHTML', merge$2(innerDescriptor, {
+      set: appendWrapper(innerDescriptor.set)
+    }));
+    el.resetSourceWatch_ = () => {
+      el.resetSourceWatch_ = null;
+      Object.keys(old).forEach(k => {
+        el[k] = old[k];
+      });
+      Object.defineProperty(el, 'innerHTML', innerDescriptor);
+    };
+
+    // on the first sourceset, we need to revert our changes
+    tech.one('sourceset', el.resetSourceWatch_);
+  };
+
+  /**
+   * our implementation of a `src` descriptor for browsers
+   * that do not have one
+   */
+  const srcDescriptorPolyfill = Object.defineProperty({}, 'src', {
+    get() {
+      if (this.hasAttribute('src')) {
+        return getAbsoluteURL(window.Element.prototype.getAttribute.call(this, 'src'));
+      }
+      return '';
+    },
+    set(v) {
+      window.Element.prototype.setAttribute.call(this, 'src', v);
+      return v;
+    }
+  });
+  const getSrcDescriptor = tech => getDescriptor([tech.el(), window.HTMLMediaElement.prototype, srcDescriptorPolyfill], 'src');
+
+  /**
+   * setup `sourceset` handling on the `Html5` tech. This function
+   * patches the following element properties/functions:
+   *
+   * - `src` - to determine when `src` is set
+   * - `setAttribute()` - to determine when `src` is set
+   * - `load()` - this re-triggers the source selection algorithm, and can
+   *              cause a sourceset.
+   *
+   * If there is no source when we are adding `sourceset` support or during a `load()`
+   * we also patch the functions listed in `firstSourceWatch`.
+   *
+   * @param {Html5} tech
+   *        The tech to patch
+   */
+  const setupSourceset = function (tech) {
+    if (!tech.featuresSourceset) {
+      return;
+    }
+    const el = tech.el();
+
+    // make sure sourceset isn't setup twice.
+    if (el.resetSourceset_) {
+      return;
+    }
+    const srcDescriptor = getSrcDescriptor(tech);
+    const oldSetAttribute = el.setAttribute;
+    const oldLoad = el.load;
+    Object.defineProperty(el, 'src', merge$2(srcDescriptor, {
+      set: v => {
+        const retval = srcDescriptor.set.call(el, v);
+
+        // we use the getter here to get the actual value set on src
+        tech.triggerSourceset(el.src);
+        return retval;
+      }
+    }));
+    el.setAttribute = (n, v) => {
+      const retval = oldSetAttribute.call(el, n, v);
+      if (/src/i.test(n)) {
+        tech.triggerSourceset(el.src);
+      }
+      return retval;
+    };
+    el.load = () => {
+      const retval = oldLoad.call(el);
+
+      // if load was called, but there was no source to fire
+      // sourceset on. We have to watch for a source append
+      // as that can trigger a `sourceset` when the media element
+      // has no source
+      if (!sourcesetLoad(tech)) {
+        tech.triggerSourceset('');
+        firstSourceWatch(tech);
+      }
+      return retval;
+    };
+    if (el.currentSrc) {
+      tech.triggerSourceset(el.currentSrc);
+    } else if (!sourcesetLoad(tech)) {
+      firstSourceWatch(tech);
+    }
+    el.resetSourceset_ = () => {
+      el.resetSourceset_ = null;
+      el.load = oldLoad;
+      el.setAttribute = oldSetAttribute;
+      Object.defineProperty(el, 'src', srcDescriptor);
+      if (el.resetSourceWatch_) {
+        el.resetSourceWatch_();
+      }
+    };
+  };
+
+  /**
+   * @file html5.js
+   */
+
+  /**
+   * HTML5 Media Controller - Wrapper for HTML5 Media API
+   *
+   * @mixes Tech~SourceHandlerAdditions
+   * @extends Tech
+   */
+  class Html5 extends Tech {
+    /**
+    * Create an instance of this Tech.
+    *
+    * @param {Object} [options]
+    *        The key/value store of player options.
+    *
+    * @param {Function} [ready]
+    *        Callback function to call when the `HTML5` Tech is ready.
+    */
+    constructor(options, ready) {
+      super(options, ready);
+      const source = options.source;
+      let crossoriginTracks = false;
+      this.featuresVideoFrameCallback = this.featuresVideoFrameCallback && this.el_.tagName === 'VIDEO';
+
+      // Set the source if one is provided
+      // 1) Check if the source is new (if not, we want to keep the original so playback isn't interrupted)
+      // 2) Check to see if the network state of the tag was failed at init, and if so, reset the source
+      // anyway so the error gets fired.
+      if (source && (this.el_.currentSrc !== source.src || options.tag && options.tag.initNetworkState_ === 3)) {
+        this.setSource(source);
+      } else {
+        this.handleLateInit_(this.el_);
+      }
+
+      // setup sourceset after late sourceset/init
+      if (options.enableSourceset) {
+        this.setupSourcesetHandling_();
+      }
+      this.isScrubbing_ = false;
+      if (this.el_.hasChildNodes()) {
+        const nodes = this.el_.childNodes;
+        let nodesLength = nodes.length;
+        const removeNodes = [];
+        while (nodesLength--) {
+          const node = nodes[nodesLength];
+          const nodeName = node.nodeName.toLowerCase();
+          if (nodeName === 'track') {
+            if (!this.featuresNativeTextTracks) {
+              // Empty video tag tracks so the built-in player doesn't use them also.
+              // This may not be fast enough to stop HTML5 browsers from reading the tags
+              // so we'll need to turn off any default tracks if we're manually doing
+              // captions and subtitles. videoElement.textTracks
+              removeNodes.push(node);
+            } else {
+              // store HTMLTrackElement and TextTrack to remote list
+              this.remoteTextTrackEls().addTrackElement_(node);
+              this.remoteTextTracks().addTrack(node.track);
+              this.textTracks().addTrack(node.track);
+              if (!crossoriginTracks && !this.el_.hasAttribute('crossorigin') && isCrossOrigin(node.src)) {
+                crossoriginTracks = true;
+              }
+            }
+          }
+        }
+        for (let i = 0; i < removeNodes.length; i++) {
+          this.el_.removeChild(removeNodes[i]);
+        }
+      }
+      this.proxyNativeTracks_();
+      if (this.featuresNativeTextTracks && crossoriginTracks) {
+        log$1.warn('Text Tracks are being loaded from another origin but the crossorigin attribute isn\'t used.\n' + 'This may prevent text tracks from loading.');
+      }
+
+      // prevent iOS Safari from disabling metadata text tracks during native playback
+      this.restoreMetadataTracksInIOSNativePlayer_();
+
+      // Determine if native controls should be used
+      // Our goal should be to get the custom controls on mobile solid everywhere
+      // so we can remove this all together. Right now this will block custom
+      // controls on touch enabled laptops like the Chrome Pixel
+      if ((TOUCH_ENABLED || IS_IPHONE) && options.nativeControlsForTouch === true) {
+        this.setControls(true);
+      }
+
+      // on iOS, we want to proxy `webkitbeginfullscreen` and `webkitendfullscreen`
+      // into a `fullscreenchange` event
+      this.proxyWebkitFullscreen_();
+      this.triggerReady();
+    }
+
+    /**
+     * Dispose of `HTML5` media element and remove all tracks.
+     */
+    dispose() {
+      if (this.el_ && this.el_.resetSourceset_) {
+        this.el_.resetSourceset_();
+      }
+      Html5.disposeMediaElement(this.el_);
+      this.options_ = null;
+
+      // tech will handle clearing of the emulated track list
+      super.dispose();
+    }
+
+    /**
+     * Modify the media element so that we can detect when
+     * the source is changed. Fires `sourceset` just after the source has changed
+     */
+    setupSourcesetHandling_() {
+      setupSourceset(this);
+    }
+
+    /**
+     * When a captions track is enabled in the iOS Safari native player, all other
+     * tracks are disabled (including metadata tracks), which nulls all of their
+     * associated cue points. This will restore metadata tracks to their pre-fullscreen
+     * state in those cases so that cue points are not needlessly lost.
+     *
+     * @private
+     */
+    restoreMetadataTracksInIOSNativePlayer_() {
+      const textTracks = this.textTracks();
+      let metadataTracksPreFullscreenState;
+
+      // captures a snapshot of every metadata track's current state
+      const takeMetadataTrackSnapshot = () => {
+        metadataTracksPreFullscreenState = [];
+        for (let i = 0; i < textTracks.length; i++) {
+          const track = textTracks[i];
+          if (track.kind === 'metadata') {
+            metadataTracksPreFullscreenState.push({
+              track,
+              storedMode: track.mode
+            });
+          }
+        }
+      };
+
+      // snapshot each metadata track's initial state, and update the snapshot
+      // each time there is a track 'change' event
+      takeMetadataTrackSnapshot();
+      textTracks.addEventListener('change', takeMetadataTrackSnapshot);
+      this.on('dispose', () => textTracks.removeEventListener('change', takeMetadataTrackSnapshot));
+      const restoreTrackMode = () => {
+        for (let i = 0; i < metadataTracksPreFullscreenState.length; i++) {
+          const storedTrack = metadataTracksPreFullscreenState[i];
+          if (storedTrack.track.mode === 'disabled' && storedTrack.track.mode !== storedTrack.storedMode) {
+            storedTrack.track.mode = storedTrack.storedMode;
+          }
+        }
+        // we only want this handler to be executed on the first 'change' event
+        textTracks.removeEventListener('change', restoreTrackMode);
+      };
+
+      // when we enter fullscreen playback, stop updating the snapshot and
+      // restore all track modes to their pre-fullscreen state
+      this.on('webkitbeginfullscreen', () => {
+        textTracks.removeEventListener('change', takeMetadataTrackSnapshot);
+
+        // remove the listener before adding it just in case it wasn't previously removed
+        textTracks.removeEventListener('change', restoreTrackMode);
+        textTracks.addEventListener('change', restoreTrackMode);
+      });
+
+      // start updating the snapshot again after leaving fullscreen
+      this.on('webkitendfullscreen', () => {
+        // remove the listener before adding it just in case it wasn't previously removed
+        textTracks.removeEventListener('change', takeMetadataTrackSnapshot);
+        textTracks.addEventListener('change', takeMetadataTrackSnapshot);
+
+        // remove the restoreTrackMode handler in case it wasn't triggered during fullscreen playback
+        textTracks.removeEventListener('change', restoreTrackMode);
+      });
+    }
+
+    /**
+     * Attempt to force override of tracks for the given type
+     *
+     * @param {string} type - Track type to override, possible values include 'Audio',
+     * 'Video', and 'Text'.
+     * @param {boolean} override - If set to true native audio/video will be overridden,
+     * otherwise native audio/video will potentially be used.
+     * @private
+     */
+    overrideNative_(type, override) {
+      // If there is no behavioral change don't add/remove listeners
+      if (override !== this[`featuresNative${type}Tracks`]) {
+        return;
+      }
+      const lowerCaseType = type.toLowerCase();
+      if (this[`${lowerCaseType}TracksListeners_`]) {
+        Object.keys(this[`${lowerCaseType}TracksListeners_`]).forEach(eventName => {
+          const elTracks = this.el()[`${lowerCaseType}Tracks`];
+          elTracks.removeEventListener(eventName, this[`${lowerCaseType}TracksListeners_`][eventName]);
+        });
+      }
+      this[`featuresNative${type}Tracks`] = !override;
+      this[`${lowerCaseType}TracksListeners_`] = null;
+      this.proxyNativeTracksForType_(lowerCaseType);
+    }
+
+    /**
+     * Attempt to force override of native audio tracks.
+     *
+     * @param {boolean} override - If set to true native audio will be overridden,
+     * otherwise native audio will potentially be used.
+     */
+    overrideNativeAudioTracks(override) {
+      this.overrideNative_('Audio', override);
+    }
+
+    /**
+     * Attempt to force override of native video tracks.
+     *
+     * @param {boolean} override - If set to true native video will be overridden,
+     * otherwise native video will potentially be used.
+     */
+    overrideNativeVideoTracks(override) {
+      this.overrideNative_('Video', override);
+    }
+
+    /**
+     * Proxy native track list events for the given type to our track
+     * lists if the browser we are playing in supports that type of track list.
+     *
+     * @param {string} name - Track type; values include 'audio', 'video', and 'text'
+     * @private
+     */
+    proxyNativeTracksForType_(name) {
+      const props = NORMAL[name];
+      const elTracks = this.el()[props.getterName];
+      const techTracks = this[props.getterName]();
+      if (!this[`featuresNative${props.capitalName}Tracks`] || !elTracks || !elTracks.addEventListener) {
+        return;
+      }
+      const listeners = {
+        change: e => {
+          const event = {
+            type: 'change',
+            target: techTracks,
+            currentTarget: techTracks,
+            srcElement: techTracks
+          };
+          techTracks.trigger(event);
+
+          // if we are a text track change event, we should also notify the
+          // remote text track list. This can potentially cause a false positive
+          // if we were to get a change event on a non-remote track and
+          // we triggered the event on the remote text track list which doesn't
+          // contain that track. However, best practices mean looping through the
+          // list of tracks and searching for the appropriate mode value, so,
+          // this shouldn't pose an issue
+          if (name === 'text') {
+            this[REMOTE.remoteText.getterName]().trigger(event);
+          }
+        },
+        addtrack(e) {
+          techTracks.addTrack(e.track);
+        },
+        removetrack(e) {
+          techTracks.removeTrack(e.track);
+        }
+      };
+      const removeOldTracks = function () {
+        const removeTracks = [];
+        for (let i = 0; i < techTracks.length; i++) {
+          let found = false;
+          for (let j = 0; j < elTracks.length; j++) {
+            if (elTracks[j] === techTracks[i]) {
+              found = true;
+              break;
+            }
+          }
+          if (!found) {
+            removeTracks.push(techTracks[i]);
+          }
+        }
+        while (removeTracks.length) {
+          techTracks.removeTrack(removeTracks.shift());
+        }
+      };
+      this[props.getterName + 'Listeners_'] = listeners;
+      Object.keys(listeners).forEach(eventName => {
+        const listener = listeners[eventName];
+        elTracks.addEventListener(eventName, listener);
+        this.on('dispose', e => elTracks.removeEventListener(eventName, listener));
+      });
+
+      // Remove (native) tracks that are not used anymore
+      this.on('loadstart', removeOldTracks);
+      this.on('dispose', e => this.off('loadstart', removeOldTracks));
+    }
+
+    /**
+     * Proxy all native track list events to our track lists if the browser we are playing
+     * in supports that type of track list.
+     *
+     * @private
+     */
+    proxyNativeTracks_() {
+      NORMAL.names.forEach(name => {
+        this.proxyNativeTracksForType_(name);
+      });
+    }
+
+    /**
+     * Create the `Html5` Tech's DOM element.
+     *
+     * @return {Element}
+     *         The element that gets created.
+     */
+    createEl() {
+      let el = this.options_.tag;
+
+      // Check if this browser supports moving the element into the box.
+      // On the iPhone video will break if you move the element,
+      // So we have to create a brand new element.
+      // If we ingested the player div, we do not need to move the media element.
+      if (!el || !(this.options_.playerElIngest || this.movingMediaElementInDOM)) {
+        // If the original tag is still there, clone and remove it.
+        if (el) {
+          const clone = el.cloneNode(true);
+          if (el.parentNode) {
+            el.parentNode.insertBefore(clone, el);
+          }
+          Html5.disposeMediaElement(el);
+          el = clone;
+        } else {
+          el = document.createElement('video');
+
+          // determine if native controls should be used
+          const tagAttributes = this.options_.tag && getAttributes(this.options_.tag);
+          const attributes = merge$2({}, tagAttributes);
+          if (!TOUCH_ENABLED || this.options_.nativeControlsForTouch !== true) {
+            delete attributes.controls;
+          }
+          setAttributes(el, Object.assign(attributes, {
+            id: this.options_.techId,
+            class: 'vjs-tech'
+          }));
+        }
+        el.playerId = this.options_.playerId;
+      }
+      if (typeof this.options_.preload !== 'undefined') {
+        setAttribute(el, 'preload', this.options_.preload);
+      }
+      if (this.options_.disablePictureInPicture !== undefined) {
+        el.disablePictureInPicture = this.options_.disablePictureInPicture;
+      }
+
+      // Update specific tag settings, in case they were overridden
+      // `autoplay` has to be *last* so that `muted` and `playsinline` are present
+      // when iOS/Safari or other browsers attempt to autoplay.
+      const settingsAttrs = ['loop', 'muted', 'playsinline', 'autoplay'];
+      for (let i = 0; i < settingsAttrs.length; i++) {
+        const attr = settingsAttrs[i];
+        const value = this.options_[attr];
+        if (typeof value !== 'undefined') {
+          if (value) {
+            setAttribute(el, attr, attr);
+          } else {
+            removeAttribute(el, attr);
+          }
+          el[attr] = value;
+        }
+      }
+      return el;
+    }
+
+    /**
+     * This will be triggered if the loadstart event has already fired, before videojs was
+     * ready. Two known examples of when this can happen are:
+     * 1. If we're loading the playback object after it has started loading
+     * 2. The media is already playing the (often with autoplay on) then
+     *
+     * This function will fire another loadstart so that videojs can catchup.
+     *
+     * @fires Tech#loadstart
+     *
+     * @return {undefined}
+     *         returns nothing.
+     */
+    handleLateInit_(el) {
+      if (el.networkState === 0 || el.networkState === 3) {
+        // The video element hasn't started loading the source yet
+        // or didn't find a source
+        return;
+      }
+      if (el.readyState === 0) {
+        // NetworkState is set synchronously BUT loadstart is fired at the
+        // end of the current stack, usually before setInterval(fn, 0).
+        // So at this point we know loadstart may have already fired or is
+        // about to fire, and either way the player hasn't seen it yet.
+        // We don't want to fire loadstart prematurely here and cause a
+        // double loadstart so we'll wait and see if it happens between now
+        // and the next loop, and fire it if not.
+        // HOWEVER, we also want to make sure it fires before loadedmetadata
+        // which could also happen between now and the next loop, so we'll
+        // watch for that also.
+        let loadstartFired = false;
+        const setLoadstartFired = function () {
+          loadstartFired = true;
+        };
+        this.on('loadstart', setLoadstartFired);
+        const triggerLoadstart = function () {
+          // We did miss the original loadstart. Make sure the player
+          // sees loadstart before loadedmetadata
+          if (!loadstartFired) {
+            this.trigger('loadstart');
+          }
+        };
+        this.on('loadedmetadata', triggerLoadstart);
+        this.ready(function () {
+          this.off('loadstart', setLoadstartFired);
+          this.off('loadedmetadata', triggerLoadstart);
+          if (!loadstartFired) {
+            // We did miss the original native loadstart. Fire it now.
+            this.trigger('loadstart');
+          }
+        });
+        return;
+      }
+
+      // From here on we know that loadstart already fired and we missed it.
+      // The other readyState events aren't as much of a problem if we double
+      // them, so not going to go to as much trouble as loadstart to prevent
+      // that unless we find reason to.
+      const eventsToTrigger = ['loadstart'];
+
+      // loadedmetadata: newly equal to HAVE_METADATA (1) or greater
+      eventsToTrigger.push('loadedmetadata');
+
+      // loadeddata: newly increased to HAVE_CURRENT_DATA (2) or greater
+      if (el.readyState >= 2) {
+        eventsToTrigger.push('loadeddata');
+      }
+
+      // canplay: newly increased to HAVE_FUTURE_DATA (3) or greater
+      if (el.readyState >= 3) {
+        eventsToTrigger.push('canplay');
+      }
+
+      // canplaythrough: newly equal to HAVE_ENOUGH_DATA (4)
+      if (el.readyState >= 4) {
+        eventsToTrigger.push('canplaythrough');
+      }
+
+      // We still need to give the player time to add event listeners
+      this.ready(function () {
+        eventsToTrigger.forEach(function (type) {
+          this.trigger(type);
+        }, this);
+      });
+    }
+
+    /**
+     * Set whether we are scrubbing or not.
+     * This is used to decide whether we should use `fastSeek` or not.
+     * `fastSeek` is used to provide trick play on Safari browsers.
+     *
+     * @param {boolean} isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     */
+    setScrubbing(isScrubbing) {
+      this.isScrubbing_ = isScrubbing;
+    }
+
+    /**
+     * Get whether we are scrubbing or not.
+     *
+     * @return {boolean} isScrubbing
+     *                  - true for we are currently scrubbing
+     *                  - false for we are no longer scrubbing
+     */
+    scrubbing() {
+      return this.isScrubbing_;
+    }
+
+    /**
+     * Set current time for the `HTML5` tech.
+     *
+     * @param {number} seconds
+     *        Set the current time of the media to this.
+     */
+    setCurrentTime(seconds) {
+      try {
+        if (this.isScrubbing_ && this.el_.fastSeek && IS_ANY_SAFARI) {
+          this.el_.fastSeek(seconds);
+        } else {
+          this.el_.currentTime = seconds;
+        }
+      } catch (e) {
+        log$1(e, 'Video is not ready. (Video.js)');
+        // this.warning(VideoJS.warnings.videoNotReady);
+      }
+    }
+
+    /**
+     * Get the current duration of the HTML5 media element.
+     *
+     * @return {number}
+     *         The duration of the media or 0 if there is no duration.
+     */
+    duration() {
+      // Android Chrome will report duration as Infinity for VOD HLS until after
+      // playback has started, which triggers the live display erroneously.
+      // Return NaN if playback has not started and trigger a durationupdate once
+      // the duration can be reliably known.
+      if (this.el_.duration === Infinity && IS_ANDROID && IS_CHROME && this.el_.currentTime === 0) {
+        // Wait for the first `timeupdate` with currentTime > 0 - there may be
+        // several with 0
+        const checkProgress = () => {
+          if (this.el_.currentTime > 0) {
+            // Trigger durationchange for genuinely live video
+            if (this.el_.duration === Infinity) {
+              this.trigger('durationchange');
+            }
+            this.off('timeupdate', checkProgress);
+          }
+        };
+        this.on('timeupdate', checkProgress);
+        return NaN;
+      }
+      return this.el_.duration || NaN;
+    }
+
+    /**
+     * Get the current width of the HTML5 media element.
+     *
+     * @return {number}
+     *         The width of the HTML5 media element.
+     */
+    width() {
+      return this.el_.offsetWidth;
+    }
+
+    /**
+     * Get the current height of the HTML5 media element.
+     *
+     * @return {number}
+     *         The height of the HTML5 media element.
+     */
+    height() {
+      return this.el_.offsetHeight;
+    }
+
+    /**
+     * Proxy iOS `webkitbeginfullscreen` and `webkitendfullscreen` into
+     * `fullscreenchange` event.
+     *
+     * @private
+     * @fires fullscreenchange
+     * @listens webkitendfullscreen
+     * @listens webkitbeginfullscreen
+     * @listens webkitbeginfullscreen
+     */
+    proxyWebkitFullscreen_() {
+      if (!('webkitDisplayingFullscreen' in this.el_)) {
+        return;
+      }
+      const endFn = function () {
+        this.trigger('fullscreenchange', {
+          isFullscreen: false
+        });
+        // Safari will sometimes set controls on the videoelement when existing fullscreen.
+        if (this.el_.controls && !this.options_.nativeControlsForTouch && this.controls()) {
+          this.el_.controls = false;
+        }
+      };
+      const beginFn = function () {
+        if ('webkitPresentationMode' in this.el_ && this.el_.webkitPresentationMode !== 'picture-in-picture') {
+          this.one('webkitendfullscreen', endFn);
+          this.trigger('fullscreenchange', {
+            isFullscreen: true,
+            // set a flag in case another tech triggers fullscreenchange
+            nativeIOSFullscreen: true
+          });
+        }
+      };
+      this.on('webkitbeginfullscreen', beginFn);
+      this.on('dispose', () => {
+        this.off('webkitbeginfullscreen', beginFn);
+        this.off('webkitendfullscreen', endFn);
+      });
+    }
+
+    /**
+     * Check if fullscreen is supported on the video el.
+     *
+     * @return {boolean}
+     *         - True if fullscreen is supported.
+     *         - False if fullscreen is not supported.
+     */
+    supportsFullScreen() {
+      return typeof this.el_.webkitEnterFullScreen === 'function';
+    }
+
+    /**
+     * Request that the `HTML5` Tech enter fullscreen.
+     */
+    enterFullScreen() {
+      const video = this.el_;
+      if (video.paused && video.networkState <= video.HAVE_METADATA) {
+        // attempt to prime the video element for programmatic access
+        // this isn't necessary on the desktop but shouldn't hurt
+        silencePromise(this.el_.play());
+
+        // playing and pausing synchronously during the transition to fullscreen
+        // can get iOS ~6.1 devices into a play/pause loop
+        this.setTimeout(function () {
+          video.pause();
+          try {
+            video.webkitEnterFullScreen();
+          } catch (e) {
+            this.trigger('fullscreenerror', e);
+          }
+        }, 0);
+      } else {
+        try {
+          video.webkitEnterFullScreen();
+        } catch (e) {
+          this.trigger('fullscreenerror', e);
+        }
+      }
+    }
+
+    /**
+     * Request that the `HTML5` Tech exit fullscreen.
+     */
+    exitFullScreen() {
+      if (!this.el_.webkitDisplayingFullscreen) {
+        this.trigger('fullscreenerror', new Error('The video is not fullscreen'));
+        return;
+      }
+      this.el_.webkitExitFullScreen();
+    }
+
+    /**
+     * Create a floating video window always on top of other windows so that users may
+     * continue consuming media while they interact with other content sites, or
+     * applications on their device.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @return {Promise}
+     *         A promise with a Picture-in-Picture window.
+     */
+    requestPictureInPicture() {
+      return this.el_.requestPictureInPicture();
+    }
+
+    /**
+     * Native requestVideoFrameCallback if supported by browser/tech, or fallback
+     * Don't use rVCF on Safari when DRM is playing, as it doesn't fire
+     * Needs to be checked later than the constructor
+     * This will be a false positive for clear sources loaded after a Fairplay source
+     *
+     * @param {function} cb function to call
+     * @return {number} id of request
+     */
+    requestVideoFrameCallback(cb) {
+      if (this.featuresVideoFrameCallback && !this.el_.webkitKeys) {
+        return this.el_.requestVideoFrameCallback(cb);
+      }
+      return super.requestVideoFrameCallback(cb);
+    }
+
+    /**
+     * Native or fallback requestVideoFrameCallback
+     *
+     * @param {number} id request id to cancel
+     */
+    cancelVideoFrameCallback(id) {
+      if (this.featuresVideoFrameCallback && !this.el_.webkitKeys) {
+        this.el_.cancelVideoFrameCallback(id);
+      } else {
+        super.cancelVideoFrameCallback(id);
+      }
+    }
+
+    /**
+     * A getter/setter for the `Html5` Tech's source object.
+     * > Note: Please use {@link Html5#setSource}
+     *
+     * @param {Tech~SourceObject} [src]
+     *        The source object you want to set on the `HTML5` techs element.
+     *
+     * @return {Tech~SourceObject|undefined}
+     *         - The current source object when a source is not passed in.
+     *         - undefined when setting
+     *
+     * @deprecated Since version 5.
+     */
+    src(src) {
+      if (src === undefined) {
+        return this.el_.src;
+      }
+
+      // Setting src through `src` instead of `setSrc` will be deprecated
+      this.setSrc(src);
+    }
+
+    /**
+     * Reset the tech by removing all sources and then calling
+     * {@link Html5.resetMediaElement}.
+     */
+    reset() {
+      Html5.resetMediaElement(this.el_);
+    }
+
+    /**
+     * Get the current source on the `HTML5` Tech. Falls back to returning the source from
+     * the HTML5 media element.
+     *
+     * @return {Tech~SourceObject}
+     *         The current source object from the HTML5 tech. With a fallback to the
+     *         elements source.
+     */
+    currentSrc() {
+      if (this.currentSource_) {
+        return this.currentSource_.src;
+      }
+      return this.el_.currentSrc;
+    }
+
+    /**
+     * Set controls attribute for the HTML5 media Element.
+     *
+     * @param {string} val
+     *        Value to set the controls attribute to
+     */
+    setControls(val) {
+      this.el_.controls = !!val;
+    }
+
+    /**
+     * Create and returns a remote {@link TextTrack} object.
+     *
+     * @param {string} kind
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)
+     *
+     * @param {string} [label]
+     *        Label to identify the text track
+     *
+     * @param {string} [language]
+     *        Two letter language abbreviation
+     *
+     * @return {TextTrack}
+     *         The TextTrack that gets created.
+     */
+    addTextTrack(kind, label, language) {
+      if (!this.featuresNativeTextTracks) {
+        return super.addTextTrack(kind, label, language);
+      }
+      return this.el_.addTextTrack(kind, label, language);
+    }
+
+    /**
+     * Creates either native TextTrack or an emulated TextTrack depending
+     * on the value of `featuresNativeTextTracks`
+     *
+     * @param {Object} options
+     *        The object should contain the options to initialize the TextTrack with.
+     *
+     * @param {string} [options.kind]
+     *        `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).
+     *
+     * @param {string} [options.label]
+     *        Label to identify the text track
+     *
+     * @param {string} [options.language]
+     *        Two letter language abbreviation.
+     *
+     * @param {boolean} [options.default]
+     *        Default this track to on.
+     *
+     * @param {string} [options.id]
+     *        The internal id to assign this track.
+     *
+     * @param {string} [options.src]
+     *        A source url for the track.
+     *
+     * @return {HTMLTrackElement}
+     *         The track element that gets created.
+     */
+    createRemoteTextTrack(options) {
+      if (!this.featuresNativeTextTracks) {
+        return super.createRemoteTextTrack(options);
+      }
+      const htmlTrackElement = document.createElement('track');
+      if (options.kind) {
+        htmlTrackElement.kind = options.kind;
+      }
+      if (options.label) {
+        htmlTrackElement.label = options.label;
+      }
+      if (options.language || options.srclang) {
+        htmlTrackElement.srclang = options.language || options.srclang;
+      }
+      if (options.default) {
+        htmlTrackElement.default = options.default;
+      }
+      if (options.id) {
+        htmlTrackElement.id = options.id;
+      }
+      if (options.src) {
+        htmlTrackElement.src = options.src;
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Creates a remote text track object and returns an html track element.
+     *
+     * @param {Object} options The object should contain values for
+     * kind, language, label, and src (location of the WebVTT file)
+     * @param {boolean} [manualCleanup=false] if set to true, the TextTrack
+     * will not be removed from the TextTrackList and HtmlTrackElementList
+     * after a source change
+     * @return {HTMLTrackElement} An Html Track Element.
+     * This can be an emulated {@link HTMLTrackElement} or a native one.
+     *
+     */
+    addRemoteTextTrack(options, manualCleanup) {
+      const htmlTrackElement = super.addRemoteTextTrack(options, manualCleanup);
+      if (this.featuresNativeTextTracks) {
+        this.el().appendChild(htmlTrackElement);
+      }
+      return htmlTrackElement;
+    }
+
+    /**
+     * Remove remote `TextTrack` from `TextTrackList` object
+     *
+     * @param {TextTrack} track
+     *        `TextTrack` object to remove
+     */
+    removeRemoteTextTrack(track) {
+      super.removeRemoteTextTrack(track);
+      if (this.featuresNativeTextTracks) {
+        const tracks = this.$$('track');
+        let i = tracks.length;
+        while (i--) {
+          if (track === tracks[i] || track === tracks[i].track) {
+            this.el().removeChild(tracks[i]);
+          }
+        }
+      }
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object}
+     *         An object with supported media playback quality metrics
+     */
+    getVideoPlaybackQuality() {
+      if (typeof this.el().getVideoPlaybackQuality === 'function') {
+        return this.el().getVideoPlaybackQuality();
+      }
+      const videoPlaybackQuality = {};
+      if (typeof this.el().webkitDroppedFrameCount !== 'undefined' && typeof this.el().webkitDecodedFrameCount !== 'undefined') {
+        videoPlaybackQuality.droppedVideoFrames = this.el().webkitDroppedFrameCount;
+        videoPlaybackQuality.totalVideoFrames = this.el().webkitDecodedFrameCount;
+      }
+      if (window.performance) {
+        videoPlaybackQuality.creationTime = window.performance.now();
+      }
+      return videoPlaybackQuality;
+    }
+  }
+
+  /* HTML5 Support Testing ---------------------------------------------------- */
+
+  /**
+   * Element for testing browser HTML5 media capabilities
+   *
+   * @type {Element}
+   * @constant
+   * @private
+   */
+  defineLazyProperty(Html5, 'TEST_VID', function () {
+    if (!isReal()) {
+      return;
+    }
+    const video = document.createElement('video');
+    const track = document.createElement('track');
+    track.kind = 'captions';
+    track.srclang = 'en';
+    track.label = 'English';
+    video.appendChild(track);
+    return video;
+  });
+
+  /**
+   * Check if HTML5 media is supported by this browser/device.
+   *
+   * @return {boolean}
+   *         - True if HTML5 media is supported.
+   *         - False if HTML5 media is not supported.
+   */
+  Html5.isSupported = function () {
+    // IE with no Media Player is a LIAR! (#984)
+    try {
+      Html5.TEST_VID.volume = 0.5;
+    } catch (e) {
+      return false;
+    }
+    return !!(Html5.TEST_VID && Html5.TEST_VID.canPlayType);
+  };
+
+  /**
+   * Check if the tech can support the given type
+   *
+   * @param {string} type
+   *        The mimetype to check
+   * @return {string} 'probably', 'maybe', or '' (empty string)
+   */
+  Html5.canPlayType = function (type) {
+    return Html5.TEST_VID.canPlayType(type);
+  };
+
+  /**
+   * Check if the tech can support the given source
+   *
+   * @param {Object} srcObj
+   *        The source object
+   * @param {Object} options
+   *        The options passed to the tech
+   * @return {string} 'probably', 'maybe', or '' (empty string)
+   */
+  Html5.canPlaySource = function (srcObj, options) {
+    return Html5.canPlayType(srcObj.type);
+  };
+
+  /**
+   * Check if the volume can be changed in this browser/device.
+   * Volume cannot be changed in a lot of mobile devices.
+   * Specifically, it can't be changed from 1 on iOS.
+   *
+   * @return {boolean}
+   *         - True if volume can be controlled
+   *         - False otherwise
+   */
+  Html5.canControlVolume = function () {
+    // IE will error if Windows Media Player not installed #3315
+    try {
+      const volume = Html5.TEST_VID.volume;
+      Html5.TEST_VID.volume = volume / 2 + 0.1;
+      const canControl = volume !== Html5.TEST_VID.volume;
+
+      // With the introduction of iOS 15, there are cases where the volume is read as
+      // changed but reverts back to its original state at the start of the next tick.
+      // To determine whether volume can be controlled on iOS,
+      // a timeout is set and the volume is checked asynchronously.
+      // Since `features` doesn't currently work asynchronously, the value is manually set.
+      if (canControl && IS_IOS) {
+        window.setTimeout(() => {
+          if (Html5 && Html5.prototype) {
+            Html5.prototype.featuresVolumeControl = volume !== Html5.TEST_VID.volume;
+          }
+        });
+
+        // default iOS to false, which will be updated in the timeout above.
+        return false;
+      }
+      return canControl;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if the volume can be muted in this browser/device.
+   * Some devices, e.g. iOS, don't allow changing volume
+   * but permits muting/unmuting.
+   *
+   * @return {boolean}
+   *      - True if volume can be muted
+   *      - False otherwise
+   */
+  Html5.canMuteVolume = function () {
+    try {
+      const muted = Html5.TEST_VID.muted;
+
+      // in some versions of iOS muted property doesn't always
+      // work, so we want to set both property and attribute
+      Html5.TEST_VID.muted = !muted;
+      if (Html5.TEST_VID.muted) {
+        setAttribute(Html5.TEST_VID, 'muted', 'muted');
+      } else {
+        removeAttribute(Html5.TEST_VID, 'muted', 'muted');
+      }
+      return muted !== Html5.TEST_VID.muted;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if the playback rate can be changed in this browser/device.
+   *
+   * @return {boolean}
+   *         - True if playback rate can be controlled
+   *         - False otherwise
+   */
+  Html5.canControlPlaybackRate = function () {
+    // Playback rate API is implemented in Android Chrome, but doesn't do anything
+    // https://github.com/videojs/video.js/issues/3180
+    if (IS_ANDROID && IS_CHROME && CHROME_VERSION < 58) {
+      return false;
+    }
+    // IE will error if Windows Media Player not installed #3315
+    try {
+      const playbackRate = Html5.TEST_VID.playbackRate;
+      Html5.TEST_VID.playbackRate = playbackRate / 2 + 0.1;
+      return playbackRate !== Html5.TEST_VID.playbackRate;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * Check if we can override a video/audio elements attributes, with
+   * Object.defineProperty.
+   *
+   * @return {boolean}
+   *         - True if builtin attributes can be overridden
+   *         - False otherwise
+   */
+  Html5.canOverrideAttributes = function () {
+    // if we cannot overwrite the src/innerHTML property, there is no support
+    // iOS 7 safari for instance cannot do this.
+    try {
+      const noop = () => {};
+      Object.defineProperty(document.createElement('video'), 'src', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('audio'), 'src', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('video'), 'innerHTML', {
+        get: noop,
+        set: noop
+      });
+      Object.defineProperty(document.createElement('audio'), 'innerHTML', {
+        get: noop,
+        set: noop
+      });
+    } catch (e) {
+      return false;
+    }
+    return true;
+  };
+
+  /**
+   * Check to see if native `TextTrack`s are supported by this browser/device.
+   *
+   * @return {boolean}
+   *         - True if native `TextTrack`s are supported.
+   *         - False otherwise
+   */
+  Html5.supportsNativeTextTracks = function () {
+    return IS_ANY_SAFARI || IS_IOS && IS_CHROME;
+  };
+
+  /**
+   * Check to see if native `VideoTrack`s are supported by this browser/device
+   *
+   * @return {boolean}
+   *        - True if native `VideoTrack`s are supported.
+   *        - False otherwise
+   */
+  Html5.supportsNativeVideoTracks = function () {
+    return !!(Html5.TEST_VID && Html5.TEST_VID.videoTracks);
+  };
+
+  /**
+   * Check to see if native `AudioTrack`s are supported by this browser/device
+   *
+   * @return {boolean}
+   *        - True if native `AudioTrack`s are supported.
+   *        - False otherwise
+   */
+  Html5.supportsNativeAudioTracks = function () {
+    return !!(Html5.TEST_VID && Html5.TEST_VID.audioTracks);
+  };
+
+  /**
+   * An array of events available on the Html5 tech.
+   *
+   * @private
+   * @type {Array}
+   */
+  Html5.Events = ['loadstart', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'seeking', 'seeked', 'ended', 'durationchange', 'timeupdate', 'progress', 'play', 'pause', 'ratechange', 'resize', 'volumechange'];
+
+  /**
+   * Boolean indicating whether the `Tech` supports volume control.
+   *
+   * @type {boolean}
+   * @default {@link Html5.canControlVolume}
+   */
+  /**
+   * Boolean indicating whether the `Tech` supports muting volume.
+   *
+   * @type {boolean}
+   * @default {@link Html5.canMuteVolume}
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports changing the speed at which the media
+   * plays. Examples:
+   *   - Set player to play 2x (twice) as fast
+   *   - Set player to play 0.5x (half) as fast
+   *
+   * @type {boolean}
+   * @default {@link Html5.canControlPlaybackRate}
+   */
+
+  /**
+   * Boolean indicating whether the `Tech` supports the `sourceset` event.
+   *
+   * @type {boolean}
+   * @default
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `TextTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeTextTracks}
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `VideoTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeVideoTracks}
+   */
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports native `AudioTrack`s.
+   *
+   * @type {boolean}
+   * @default {@link Html5.supportsNativeAudioTracks}
+   */
+  [['featuresMuteControl', 'canMuteVolume'], ['featuresPlaybackRate', 'canControlPlaybackRate'], ['featuresSourceset', 'canOverrideAttributes'], ['featuresNativeTextTracks', 'supportsNativeTextTracks'], ['featuresNativeVideoTracks', 'supportsNativeVideoTracks'], ['featuresNativeAudioTracks', 'supportsNativeAudioTracks']].forEach(function ([key, fn]) {
+    defineLazyProperty(Html5.prototype, key, () => Html5[fn](), true);
+  });
+  Html5.prototype.featuresVolumeControl = Html5.canControlVolume();
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the media element
+   * moving in the DOM. iOS breaks if you move the media element, so this is set this to
+   * false there. Everywhere else this should be true.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.movingMediaElementInDOM = !IS_IOS;
+
+  // TODO: Previous comment: No longer appears to be used. Can probably be removed.
+  //       Is this true?
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports automatic media resize
+   * when going into fullscreen.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.featuresFullscreenResize = true;
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the progress event.
+   * If this is false, manual `progress` events will be triggered instead.
+   *
+   * @type {boolean}
+   * @default
+   */
+  Html5.prototype.featuresProgressEvents = true;
+
+  /**
+   * Boolean indicating whether the `HTML5` tech currently supports the timeupdate event.
+   * If this is false, manual `timeupdate` events will be triggered instead.
+   *
+   * @default
+   */
+  Html5.prototype.featuresTimeupdateEvents = true;
+
+  /**
+   * Whether the HTML5 el supports `requestVideoFrameCallback`
+   *
+   * @type {boolean}
+   */
+  Html5.prototype.featuresVideoFrameCallback = !!(Html5.TEST_VID && Html5.TEST_VID.requestVideoFrameCallback);
+  Html5.disposeMediaElement = function (el) {
+    if (!el) {
+      return;
+    }
+    if (el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+
+    // remove any child track or source nodes to prevent their loading
+    while (el.hasChildNodes()) {
+      el.removeChild(el.firstChild);
+    }
+
+    // remove any src reference. not setting `src=''` because that causes a warning
+    // in firefox
+    el.removeAttribute('src');
+
+    // force the media element to update its loading state by calling load()
+    // however IE on Windows 7N has a bug that throws an error so need a try/catch (#793)
+    if (typeof el.load === 'function') {
+      // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+      (function () {
+        try {
+          el.load();
+        } catch (e) {
+          // not supported
+        }
+      })();
+    }
+  };
+  Html5.resetMediaElement = function (el) {
+    if (!el) {
+      return;
+    }
+    const sources = el.querySelectorAll('source');
+    let i = sources.length;
+    while (i--) {
+      el.removeChild(sources[i]);
+    }
+
+    // remove any src reference.
+    // not setting `src=''` because that throws an error
+    el.removeAttribute('src');
+    if (typeof el.load === 'function') {
+      // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+      (function () {
+        try {
+          el.load();
+        } catch (e) {
+          // satisfy linter
+        }
+      })();
+    }
+  };
+
+  /* Native HTML5 element property wrapping ----------------------------------- */
+  // Wrap native boolean attributes with getters that check both property and attribute
+  // The list is as followed:
+  // muted, defaultMuted, autoplay, controls, loop, playsinline
+  [
+  /**
+   * Get the value of `muted` from the media element. `muted` indicates
+   * that the volume for the media should be set to silent. This does not actually change
+   * the `volume` attribute.
+   *
+   * @method Html5#muted
+   * @return {boolean}
+   *         - True if the value of `volume` should be ignored and the audio set to silent.
+   *         - False if the value of `volume` should be used.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted}
+   */
+  'muted',
+  /**
+   * Get the value of `defaultMuted` from the media element. `defaultMuted` indicates
+   * whether the media should start muted or not. Only changes the default state of the
+   * media. `muted` and `defaultMuted` can have different values. {@link Html5#muted} indicates the
+   * current state.
+   *
+   * @method Html5#defaultMuted
+   * @return {boolean}
+   *         - The value of `defaultMuted` from the media element.
+   *         - True indicates that the media should start muted.
+   *         - False indicates that the media should not start muted
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted}
+   */
+  'defaultMuted',
+  /**
+   * Get the value of `autoplay` from the media element. `autoplay` indicates
+   * that the media should start to play as soon as the page is ready.
+   *
+   * @method Html5#autoplay
+   * @return {boolean}
+   *         - The value of `autoplay` from the media element.
+   *         - True indicates that the media should start as soon as the page loads.
+   *         - False indicates that the media should not start as soon as the page loads.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay}
+   */
+  'autoplay',
+  /**
+   * Get the value of `controls` from the media element. `controls` indicates
+   * whether the native media controls should be shown or hidden.
+   *
+   * @method Html5#controls
+   * @return {boolean}
+   *         - The value of `controls` from the media element.
+   *         - True indicates that native controls should be showing.
+   *         - False indicates that native controls should be hidden.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-controls}
+   */
+  'controls',
+  /**
+   * Get the value of `loop` from the media element. `loop` indicates
+   * that the media should return to the start of the media and continue playing once
+   * it reaches the end.
+   *
+   * @method Html5#loop
+   * @return {boolean}
+   *         - The value of `loop` from the media element.
+   *         - True indicates that playback should seek back to start once
+   *           the end of a media is reached.
+   *         - False indicates that playback should not loop back to the start when the
+   *           end of the media is reached.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop}
+   */
+  'loop',
+  /**
+   * Get the value of `playsinline` from the media element. `playsinline` indicates
+   * to the browser that non-fullscreen playback is preferred when fullscreen
+   * playback is the native default, such as in iOS Safari.
+   *
+   * @method Html5#playsinline
+   * @return {boolean}
+   *         - The value of `playsinline` from the media element.
+   *         - True indicates that the media should play inline.
+   *         - False indicates that the media should not play inline.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+   */
+  'playsinline'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop] || this.el_.hasAttribute(prop);
+    };
+  });
+
+  // Wrap native boolean attributes with setters that set both property and attribute
+  // The list is as followed:
+  // setMuted, setDefaultMuted, setAutoplay, setLoop, setPlaysinline
+  // setControls is special-cased above
+  [
+  /**
+   * Set the value of `muted` on the media element. `muted` indicates that the current
+   * audio level should be silent.
+   *
+   * @method Html5#setMuted
+   * @param {boolean} muted
+   *        - True if the audio should be set to silent
+   *        - False otherwise
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted}
+   */
+  'muted',
+  /**
+   * Set the value of `defaultMuted` on the media element. `defaultMuted` indicates that the current
+   * audio level should be silent, but will only effect the muted level on initial playback..
+   *
+   * @method Html5.prototype.setDefaultMuted
+   * @param {boolean} defaultMuted
+   *        - True if the audio should be set to silent
+   *        - False otherwise
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted}
+   */
+  'defaultMuted',
+  /**
+   * Set the value of `autoplay` on the media element. `autoplay` indicates
+   * that the media should start to play as soon as the page is ready.
+   *
+   * @method Html5#setAutoplay
+   * @param {boolean} autoplay
+   *         - True indicates that the media should start as soon as the page loads.
+   *         - False indicates that the media should not start as soon as the page loads.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay}
+   */
+  'autoplay',
+  /**
+   * Set the value of `loop` on the media element. `loop` indicates
+   * that the media should return to the start of the media and continue playing once
+   * it reaches the end.
+   *
+   * @method Html5#setLoop
+   * @param {boolean} loop
+   *         - True indicates that playback should seek back to start once
+   *           the end of a media is reached.
+   *         - False indicates that playback should not loop back to the start when the
+   *           end of the media is reached.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop}
+   */
+  'loop',
+  /**
+   * Set the value of `playsinline` from the media element. `playsinline` indicates
+   * to the browser that non-fullscreen playback is preferred when fullscreen
+   * playback is the native default, such as in iOS Safari.
+   *
+   * @method Html5#setPlaysinline
+   * @param {boolean} playsinline
+   *         - True indicates that the media should play inline.
+   *         - False indicates that the media should not play inline.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+   */
+  'playsinline'].forEach(function (prop) {
+    Html5.prototype['set' + toTitleCase$1(prop)] = function (v) {
+      this.el_[prop] = v;
+      if (v) {
+        this.el_.setAttribute(prop, prop);
+      } else {
+        this.el_.removeAttribute(prop);
+      }
+    };
+  });
+
+  // Wrap native properties with a getter
+  // The list is as followed
+  // paused, currentTime, buffered, volume, poster, preload, error, seeking
+  // seekable, ended, playbackRate, defaultPlaybackRate, disablePictureInPicture
+  // played, networkState, readyState, videoWidth, videoHeight, crossOrigin
+  [
+  /**
+   * Get the value of `paused` from the media element. `paused` indicates whether the media element
+   * is currently paused or not.
+   *
+   * @method Html5#paused
+   * @return {boolean}
+   *         The value of `paused` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-paused}
+   */
+  'paused',
+  /**
+   * Get the value of `currentTime` from the media element. `currentTime` indicates
+   * the current second that the media is at in playback.
+   *
+   * @method Html5#currentTime
+   * @return {number}
+   *         The value of `currentTime` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-currenttime}
+   */
+  'currentTime',
+  /**
+   * Get the value of `buffered` from the media element. `buffered` is a `TimeRange`
+   * object that represents the parts of the media that are already downloaded and
+   * available for playback.
+   *
+   * @method Html5#buffered
+   * @return {TimeRange}
+   *         The value of `buffered` from the media element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-buffered}
+   */
+  'buffered',
+  /**
+   * Get the value of `volume` from the media element. `volume` indicates
+   * the current playback volume of audio for a media. `volume` will be a value from 0
+   * (silent) to 1 (loudest and default).
+   *
+   * @method Html5#volume
+   * @return {number}
+   *         The value of `volume` from the media element. Value will be between 0-1.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume}
+   */
+  'volume',
+  /**
+   * Get the value of `poster` from the media element. `poster` indicates
+   * that the url of an image file that can/will be shown when no media data is available.
+   *
+   * @method Html5#poster
+   * @return {string}
+   *         The value of `poster` from the media element. Value will be a url to an
+   *         image.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-video-poster}
+   */
+  'poster',
+  /**
+   * Get the value of `preload` from the media element. `preload` indicates
+   * what should download before the media is interacted with. It can have the following
+   * values:
+   * - none: nothing should be downloaded
+   * - metadata: poster and the first few frames of the media may be downloaded to get
+   *   media dimensions and other metadata
+   * - auto: allow the media and metadata for the media to be downloaded before
+   *    interaction
+   *
+   * @method Html5#preload
+   * @return {string}
+   *         The value of `preload` from the media element. Will be 'none', 'metadata',
+   *         or 'auto'.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload}
+   */
+  'preload',
+  /**
+   * Get the value of the `error` from the media element. `error` indicates any
+   * MediaError that may have occurred during playback. If error returns null there is no
+   * current error.
+   *
+   * @method Html5#error
+   * @return {MediaError|null}
+   *         The value of `error` from the media element. Will be `MediaError` if there
+   *         is a current error and null otherwise.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-error}
+   */
+  'error',
+  /**
+   * Get the value of `seeking` from the media element. `seeking` indicates whether the
+   * media is currently seeking to a new position or not.
+   *
+   * @method Html5#seeking
+   * @return {boolean}
+   *         - The value of `seeking` from the media element.
+   *         - True indicates that the media is currently seeking to a new position.
+   *         - False indicates that the media is not seeking to a new position at this time.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seeking}
+   */
+  'seeking',
+  /**
+   * Get the value of `seekable` from the media element. `seekable` returns a
+   * `TimeRange` object indicating ranges of time that can currently be `seeked` to.
+   *
+   * @method Html5#seekable
+   * @return {TimeRange}
+   *         The value of `seekable` from the media element. A `TimeRange` object
+   *         indicating the current ranges of time that can be seeked to.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seekable}
+   */
+  'seekable',
+  /**
+   * Get the value of `ended` from the media element. `ended` indicates whether
+   * the media has reached the end or not.
+   *
+   * @method Html5#ended
+   * @return {boolean}
+   *         - The value of `ended` from the media element.
+   *         - True indicates that the media has ended.
+   *         - False indicates that the media has not ended.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-ended}
+   */
+  'ended',
+  /**
+   * Get the value of `playbackRate` from the media element. `playbackRate` indicates
+   * the rate at which the media is currently playing back. Examples:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5#playbackRate
+   * @return {number}
+   *         The value of `playbackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'playbackRate',
+  /**
+   * Get the value of `defaultPlaybackRate` from the media element. `defaultPlaybackRate` indicates
+   * the rate at which the media is currently playing back. This value will not indicate the current
+   * `playbackRate` after playback has started, use {@link Html5#playbackRate} for that.
+   *
+   * Examples:
+   *   - if defaultPlaybackRate is set to 2, media will play twice as fast.
+   *   - if defaultPlaybackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5.prototype.defaultPlaybackRate
+   * @return {number}
+   *         The value of `defaultPlaybackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'defaultPlaybackRate',
+  /**
+   * Get the value of 'disablePictureInPicture' from the video element.
+   *
+   * @method Html5#disablePictureInPicture
+   * @return {boolean} value
+   *         - The value of `disablePictureInPicture` from the video element.
+   *         - True indicates that the video can't be played in Picture-In-Picture mode
+   *         - False indicates that the video can be played in Picture-In-Picture mode
+   *
+   * @see [Spec]{@link https://w3c.github.io/picture-in-picture/#disable-pip}
+   */
+  'disablePictureInPicture',
+  /**
+   * Get the value of `played` from the media element. `played` returns a `TimeRange`
+   * object representing points in the media timeline that have been played.
+   *
+   * @method Html5#played
+   * @return {TimeRange}
+   *         The value of `played` from the media element. A `TimeRange` object indicating
+   *         the ranges of time that have been played.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-played}
+   */
+  'played',
+  /**
+   * Get the value of `networkState` from the media element. `networkState` indicates
+   * the current network state. It returns an enumeration from the following list:
+   * - 0: NETWORK_EMPTY
+   * - 1: NETWORK_IDLE
+   * - 2: NETWORK_LOADING
+   * - 3: NETWORK_NO_SOURCE
+   *
+   * @method Html5#networkState
+   * @return {number}
+   *         The value of `networkState` from the media element. This will be a number
+   *         from the list in the description.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-networkstate}
+   */
+  'networkState',
+  /**
+   * Get the value of `readyState` from the media element. `readyState` indicates
+   * the current state of the media element. It returns an enumeration from the
+   * following list:
+   * - 0: HAVE_NOTHING
+   * - 1: HAVE_METADATA
+   * - 2: HAVE_CURRENT_DATA
+   * - 3: HAVE_FUTURE_DATA
+   * - 4: HAVE_ENOUGH_DATA
+   *
+   * @method Html5#readyState
+   * @return {number}
+   *         The value of `readyState` from the media element. This will be a number
+   *         from the list in the description.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#ready-states}
+   */
+  'readyState',
+  /**
+   * Get the value of `videoWidth` from the video element. `videoWidth` indicates
+   * the current width of the video in css pixels.
+   *
+   * @method Html5#videoWidth
+   * @return {number}
+   *         The value of `videoWidth` from the video element. This will be a number
+   *         in css pixels.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth}
+   */
+  'videoWidth',
+  /**
+   * Get the value of `videoHeight` from the video element. `videoHeight` indicates
+   * the current height of the video in css pixels.
+   *
+   * @method Html5#videoHeight
+   * @return {number}
+   *         The value of `videoHeight` from the video element. This will be a number
+   *         in css pixels.
+   *
+   * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth}
+   */
+  'videoHeight',
+  /**
+   * Get the value of `crossOrigin` from the media element. `crossOrigin` indicates
+   * to the browser that should sent the cookies along with the requests for the
+   * different assets/playlists
+   *
+   * @method Html5#crossOrigin
+   * @return {string}
+   *         - anonymous indicates that the media should not sent cookies.
+   *         - use-credentials indicates that the media should sent cookies along the requests.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-media-crossorigin}
+   */
+  'crossOrigin'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop];
+    };
+  });
+
+  // Wrap native properties with a setter in this format:
+  // set + toTitleCase(name)
+  // The list is as follows:
+  // setVolume, setSrc, setPoster, setPreload, setPlaybackRate, setDefaultPlaybackRate,
+  // setDisablePictureInPicture, setCrossOrigin
+  [
+  /**
+   * Set the value of `volume` on the media element. `volume` indicates the current
+   * audio level as a percentage in decimal form. This means that 1 is 100%, 0.5 is 50%, and
+   * so on.
+   *
+   * @method Html5#setVolume
+   * @param {number} percentAsDecimal
+   *        The volume percent as a decimal. Valid range is from 0-1.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume}
+   */
+  'volume',
+  /**
+   * Set the value of `src` on the media element. `src` indicates the current
+   * {@link Tech~SourceObject} for the media.
+   *
+   * @method Html5#setSrc
+   * @param {Tech~SourceObject} src
+   *        The source object to set as the current source.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-src}
+   */
+  'src',
+  /**
+   * Set the value of `poster` on the media element. `poster` is the url to
+   * an image file that can/will be shown when no media data is available.
+   *
+   * @method Html5#setPoster
+   * @param {string} poster
+   *        The url to an image that should be used as the `poster` for the media
+   *        element.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-poster}
+   */
+  'poster',
+  /**
+   * Set the value of `preload` on the media element. `preload` indicates
+   * what should download before the media is interacted with. It can have the following
+   * values:
+   * - none: nothing should be downloaded
+   * - metadata: poster and the first few frames of the media may be downloaded to get
+   *   media dimensions and other metadata
+   * - auto: allow the media and metadata for the media to be downloaded before
+   *    interaction
+   *
+   * @method Html5#setPreload
+   * @param {string} preload
+   *         The value of `preload` to set on the media element. Must be 'none', 'metadata',
+   *         or 'auto'.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload}
+   */
+  'preload',
+  /**
+   * Set the value of `playbackRate` on the media element. `playbackRate` indicates
+   * the rate at which the media should play back. Examples:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5#setPlaybackRate
+   * @return {number}
+   *         The value of `playbackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate}
+   */
+  'playbackRate',
+  /**
+   * Set the value of `defaultPlaybackRate` on the media element. `defaultPlaybackRate` indicates
+   * the rate at which the media should play back upon initial startup. Changing this value
+   * after a video has started will do nothing. Instead you should used {@link Html5#setPlaybackRate}.
+   *
+   * Example Values:
+   *   - if playbackRate is set to 2, media will play twice as fast.
+   *   - if playbackRate is set to 0.5, media will play half as fast.
+   *
+   * @method Html5.prototype.setDefaultPlaybackRate
+   * @return {number}
+   *         The value of `defaultPlaybackRate` from the media element. A number indicating
+   *         the current playback speed of the media, where 1 is normal speed.
+   *
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultplaybackrate}
+   */
+  'defaultPlaybackRate',
+  /**
+   * Prevents the browser from suggesting a Picture-in-Picture context menu
+   * or to request Picture-in-Picture automatically in some cases.
+   *
+   * @method Html5#setDisablePictureInPicture
+   * @param {boolean} value
+   *         The true value will disable Picture-in-Picture mode.
+   *
+   * @see [Spec]{@link https://w3c.github.io/picture-in-picture/#disable-pip}
+   */
+  'disablePictureInPicture',
+  /**
+   * Set the value of `crossOrigin` from the media element. `crossOrigin` indicates
+   * to the browser that should sent the cookies along with the requests for the
+   * different assets/playlists
+   *
+   * @method Html5#setCrossOrigin
+   * @param {string} crossOrigin
+   *         - anonymous indicates that the media should not sent cookies.
+   *         - use-credentials indicates that the media should sent cookies along the requests.
+   *
+   * @see [Spec]{@link https://html.spec.whatwg.org/#attr-media-crossorigin}
+   */
+  'crossOrigin'].forEach(function (prop) {
+    Html5.prototype['set' + toTitleCase$1(prop)] = function (v) {
+      this.el_[prop] = v;
+    };
+  });
+
+  // wrap native functions with a function
+  // The list is as follows:
+  // pause, load, play
+  [
+  /**
+   * A wrapper around the media elements `pause` function. This will call the `HTML5`
+   * media elements `pause` function.
+   *
+   * @method Html5#pause
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-pause}
+   */
+  'pause',
+  /**
+   * A wrapper around the media elements `load` function. This will call the `HTML5`s
+   * media element `load` function.
+   *
+   * @method Html5#load
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-load}
+   */
+  'load',
+  /**
+   * A wrapper around the media elements `play` function. This will call the `HTML5`s
+   * media element `play` function.
+   *
+   * @method Html5#play
+   * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-play}
+   */
+  'play'].forEach(function (prop) {
+    Html5.prototype[prop] = function () {
+      return this.el_[prop]();
+    };
+  });
+  Tech.withSourceHandlers(Html5);
+
+  /**
+   * Native source handler for Html5, simply passes the source to the media element.
+   *
+   * @property {Tech~SourceObject} source
+   *        The source object
+   *
+   * @property {Html5} tech
+   *        The instance of the HTML5 tech.
+   */
+  Html5.nativeSourceHandler = {};
+
+  /**
+   * Check if the media element can play the given mime type.
+   *
+   * @param {string} type
+   *        The mimetype to check
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string)
+   */
+  Html5.nativeSourceHandler.canPlayType = function (type) {
+    // IE without MediaPlayer throws an error (#519)
+    try {
+      return Html5.TEST_VID.canPlayType(type);
+    } catch (e) {
+      return '';
+    }
+  };
+
+  /**
+   * Check if the media element can handle a source natively.
+   *
+   * @param {Tech~SourceObject} source
+   *         The source object
+   *
+   * @param {Object} [options]
+   *         Options to be passed to the tech.
+   *
+   * @return {string}
+   *         'probably', 'maybe', or '' (empty string).
+   */
+  Html5.nativeSourceHandler.canHandleSource = function (source, options) {
+    // If a type was provided we should rely on that
+    if (source.type) {
+      return Html5.nativeSourceHandler.canPlayType(source.type);
+
+      // If no type, fall back to checking 'video/[EXTENSION]'
+    } else if (source.src) {
+      const ext = getFileExtension(source.src);
+      return Html5.nativeSourceHandler.canPlayType(`video/${ext}`);
+    }
+    return '';
+  };
+
+  /**
+   * Pass the source to the native media element.
+   *
+   * @param {Tech~SourceObject} source
+   *        The source object
+   *
+   * @param {Html5} tech
+   *        The instance of the Html5 tech
+   *
+   * @param {Object} [options]
+   *        The options to pass to the source
+   */
+  Html5.nativeSourceHandler.handleSource = function (source, tech, options) {
+    tech.setSrc(source.src);
+  };
+
+  /**
+   * A noop for the native dispose function, as cleanup is not needed.
+   */
+  Html5.nativeSourceHandler.dispose = function () {};
+
+  // Register the native source handler
+  Html5.registerSourceHandler(Html5.nativeSourceHandler);
+  Tech.registerTech('Html5', Html5);
+
+  /**
+   * @file player.js
+   */
+
+  // The following tech events are simply re-triggered
+  // on the player when they happen
+  const TECH_EVENTS_RETRIGGER = [
+  /**
+   * Fired while the user agent is downloading media data.
+   *
+   * @event Player#progress
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `progress` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechProgress_
+   * @fires Player#progress
+   * @listens Tech#progress
+   */
+  'progress',
+  /**
+   * Fires when the loading of an audio/video is aborted.
+   *
+   * @event Player#abort
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `abort` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechAbort_
+   * @fires Player#abort
+   * @listens Tech#abort
+   */
+  'abort',
+  /**
+   * Fires when the browser is intentionally not getting media data.
+   *
+   * @event Player#suspend
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `suspend` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechSuspend_
+   * @fires Player#suspend
+   * @listens Tech#suspend
+   */
+  'suspend',
+  /**
+   * Fires when the current playlist is empty.
+   *
+   * @event Player#emptied
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `emptied` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechEmptied_
+   * @fires Player#emptied
+   * @listens Tech#emptied
+   */
+  'emptied',
+  /**
+   * Fires when the browser is trying to get media data, but data is not available.
+   *
+   * @event Player#stalled
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `stalled` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechStalled_
+   * @fires Player#stalled
+   * @listens Tech#stalled
+   */
+  'stalled',
+  /**
+   * Fires when the browser has loaded meta data for the audio/video.
+   *
+   * @event Player#loadedmetadata
+   * @type {Event}
+   */
+  /**
+   * Retrigger the `loadedmetadata` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechLoadedmetadata_
+   * @fires Player#loadedmetadata
+   * @listens Tech#loadedmetadata
+   */
+  'loadedmetadata',
+  /**
+   * Fires when the browser has loaded the current frame of the audio/video.
+   *
+   * @event Player#loadeddata
+   * @type {event}
+   */
+  /**
+   * Retrigger the `loadeddata` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechLoaddeddata_
+   * @fires Player#loadeddata
+   * @listens Tech#loadeddata
+   */
+  'loadeddata',
+  /**
+   * Fires when the current playback position has changed.
+   *
+   * @event Player#timeupdate
+   * @type {event}
+   */
+  /**
+   * Retrigger the `timeupdate` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechTimeUpdate_
+   * @fires Player#timeupdate
+   * @listens Tech#timeupdate
+   */
+  'timeupdate',
+  /**
+   * Fires when the video's intrinsic dimensions change
+   *
+   * @event Player#resize
+   * @type {event}
+   */
+  /**
+   * Retrigger the `resize` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechResize_
+   * @fires Player#resize
+   * @listens Tech#resize
+   */
+  'resize',
+  /**
+   * Fires when the volume has been changed
+   *
+   * @event Player#volumechange
+   * @type {event}
+   */
+  /**
+   * Retrigger the `volumechange` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechVolumechange_
+   * @fires Player#volumechange
+   * @listens Tech#volumechange
+   */
+  'volumechange',
+  /**
+   * Fires when the text track has been changed
+   *
+   * @event Player#texttrackchange
+   * @type {event}
+   */
+  /**
+   * Retrigger the `texttrackchange` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechTexttrackchange_
+   * @fires Player#texttrackchange
+   * @listens Tech#texttrackchange
+   */
+  'texttrackchange'];
+
+  // events to queue when playback rate is zero
+  // this is a hash for the sole purpose of mapping non-camel-cased event names
+  // to camel-cased function names
+  const TECH_EVENTS_QUEUE = {
+    canplay: 'CanPlay',
+    canplaythrough: 'CanPlayThrough',
+    playing: 'Playing',
+    seeked: 'Seeked'
+  };
+  const BREAKPOINT_ORDER = ['tiny', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'huge'];
+  const BREAKPOINT_CLASSES = {};
+
+  // grep: vjs-layout-tiny
+  // grep: vjs-layout-x-small
+  // grep: vjs-layout-small
+  // grep: vjs-layout-medium
+  // grep: vjs-layout-large
+  // grep: vjs-layout-x-large
+  // grep: vjs-layout-huge
+  BREAKPOINT_ORDER.forEach(k => {
+    const v = k.charAt(0) === 'x' ? `x-${k.substring(1)}` : k;
+    BREAKPOINT_CLASSES[k] = `vjs-layout-${v}`;
+  });
+  const DEFAULT_BREAKPOINTS = {
+    tiny: 210,
+    xsmall: 320,
+    small: 425,
+    medium: 768,
+    large: 1440,
+    xlarge: 2560,
+    huge: Infinity
+  };
+
+  /**
+   * An instance of the `Player` class is created when any of the Video.js setup methods
+   * are used to initialize a video.
+   *
+   * After an instance has been created it can be accessed globally in three ways:
+   * 1. By calling `videojs.getPlayer('example_video_1');`
+   * 2. By calling `videojs('example_video_1');` (not recommended)
+   * 2. By using it directly via `videojs.players.example_video_1;`
+   *
+   * @extends Component
+   * @global
+   */
+  class Player extends Component$1 {
+    /**
+     * Create an instance of this class.
+     *
+     * @param {Element} tag
+     *        The original video DOM element used for configuring options.
+     *
+     * @param {Object} [options]
+     *        Object of option names and values.
+     *
+     * @param {Function} [ready]
+     *        Ready callback function.
+     */
+    constructor(tag, options, ready) {
+      // Make sure tag ID exists
+      // also here.. probably better
+      tag.id = tag.id || options.id || `vjs_video_${newGUID()}`;
+
+      // Set Options
+      // The options argument overrides options set in the video tag
+      // which overrides globally set options.
+      // This latter part coincides with the load order
+      // (tag must exist before Player)
+      options = Object.assign(Player.getTagSettings(tag), options);
+
+      // Delay the initialization of children because we need to set up
+      // player properties first, and can't use `this` before `super()`
+      options.initChildren = false;
+
+      // Same with creating the element
+      options.createEl = false;
+
+      // don't auto mixin the evented mixin
+      options.evented = false;
+
+      // we don't want the player to report touch activity on itself
+      // see enableTouchActivity in Component
+      options.reportTouchActivity = false;
+
+      // If language is not set, get the closest lang attribute
+      if (!options.language) {
+        const closest = tag.closest('[lang]');
+        if (closest) {
+          options.language = closest.getAttribute('lang');
+        }
+      }
+
+      // Run base component initializing with new options
+      super(null, options, ready);
+
+      // Create bound methods for document listeners.
+      this.boundDocumentFullscreenChange_ = e => this.documentFullscreenChange_(e);
+      this.boundFullWindowOnEscKey_ = e => this.fullWindowOnEscKey(e);
+      this.boundUpdateStyleEl_ = e => this.updateStyleEl_(e);
+      this.boundApplyInitTime_ = e => this.applyInitTime_(e);
+      this.boundUpdateCurrentBreakpoint_ = e => this.updateCurrentBreakpoint_(e);
+      this.boundHandleTechClick_ = e => this.handleTechClick_(e);
+      this.boundHandleTechDoubleClick_ = e => this.handleTechDoubleClick_(e);
+      this.boundHandleTechTouchStart_ = e => this.handleTechTouchStart_(e);
+      this.boundHandleTechTouchMove_ = e => this.handleTechTouchMove_(e);
+      this.boundHandleTechTouchEnd_ = e => this.handleTechTouchEnd_(e);
+      this.boundHandleTechTap_ = e => this.handleTechTap_(e);
+
+      // default isFullscreen_ to false
+      this.isFullscreen_ = false;
+
+      // create logger
+      this.log = createLogger(this.id_);
+
+      // Hold our own reference to fullscreen api so it can be mocked in tests
+      this.fsApi_ = FullscreenApi;
+
+      // Tracks when a tech changes the poster
+      this.isPosterFromTech_ = false;
+
+      // Holds callback info that gets queued when playback rate is zero
+      // and a seek is happening
+      this.queuedCallbacks_ = [];
+
+      // Turn off API access because we're loading a new tech that might load asynchronously
+      this.isReady_ = false;
+
+      // Init state hasStarted_
+      this.hasStarted_ = false;
+
+      // Init state userActive_
+      this.userActive_ = false;
+
+      // Init debugEnabled_
+      this.debugEnabled_ = false;
+
+      // Init state audioOnlyMode_
+      this.audioOnlyMode_ = false;
+
+      // Init state audioPosterMode_
+      this.audioPosterMode_ = false;
+
+      // Init state audioOnlyCache_
+      this.audioOnlyCache_ = {
+        playerHeight: null,
+        hiddenChildren: []
+      };
+
+      // if the global option object was accidentally blown away by
+      // someone, bail early with an informative error
+      if (!this.options_ || !this.options_.techOrder || !this.options_.techOrder.length) {
+        throw new Error('No techOrder specified. Did you overwrite ' + 'videojs.options instead of just changing the ' + 'properties you want to override?');
+      }
+
+      // Store the original tag used to set options
+      this.tag = tag;
+
+      // Store the tag attributes used to restore html5 element
+      this.tagAttributes = tag && getAttributes(tag);
+
+      // Update current language
+      this.language(this.options_.language);
+
+      // Update Supported Languages
+      if (options.languages) {
+        // Normalise player option languages to lowercase
+        const languagesToLower = {};
+        Object.getOwnPropertyNames(options.languages).forEach(function (name) {
+          languagesToLower[name.toLowerCase()] = options.languages[name];
+        });
+        this.languages_ = languagesToLower;
+      } else {
+        this.languages_ = Player.prototype.options_.languages;
+      }
+      this.resetCache_();
+
+      // Set poster
+      /** @type string */
+      this.poster_ = options.poster || '';
+
+      // Set controls
+      /** @type {boolean} */
+      this.controls_ = !!options.controls;
+
+      // Original tag settings stored in options
+      // now remove immediately so native controls don't flash.
+      // May be turned back on by HTML5 tech if nativeControlsForTouch is true
+      tag.controls = false;
+      tag.removeAttribute('controls');
+      this.changingSrc_ = false;
+      this.playCallbacks_ = [];
+      this.playTerminatedQueue_ = [];
+
+      // the attribute overrides the option
+      if (tag.hasAttribute('autoplay')) {
+        this.autoplay(true);
+      } else {
+        // otherwise use the setter to validate and
+        // set the correct value.
+        this.autoplay(this.options_.autoplay);
+      }
+
+      // check plugins
+      if (options.plugins) {
+        Object.keys(options.plugins).forEach(name => {
+          if (typeof this[name] !== 'function') {
+            throw new Error(`plugin "${name}" does not exist`);
+          }
+        });
+      }
+
+      /*
+       * Store the internal state of scrubbing
+       *
+       * @private
+       * @return {Boolean} True if the user is scrubbing
+       */
+      this.scrubbing_ = false;
+      this.el_ = this.createEl();
+
+      // Make this an evented object and use `el_` as its event bus.
+      evented(this, {
+        eventBusKey: 'el_'
+      });
+
+      // listen to document and player fullscreenchange handlers so we receive those events
+      // before a user can receive them so we can update isFullscreen appropriately.
+      // make sure that we listen to fullscreenchange events before everything else to make sure that
+      // our isFullscreen method is updated properly for internal components as well as external.
+      if (this.fsApi_.requestFullscreen) {
+        on(document, this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+        this.on(this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+      }
+      if (this.fluid_) {
+        this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+      }
+      // We also want to pass the original player options to each component and plugin
+      // as well so they don't need to reach back into the player for options later.
+      // We also need to do another copy of this.options_ so we don't end up with
+      // an infinite loop.
+      const playerOptionsCopy = merge$2(this.options_);
+
+      // Load plugins
+      if (options.plugins) {
+        Object.keys(options.plugins).forEach(name => {
+          this[name](options.plugins[name]);
+        });
+      }
+
+      // Enable debug mode to fire debugon event for all plugins.
+      if (options.debug) {
+        this.debug(true);
+      }
+      this.options_.playerOptions = playerOptionsCopy;
+      this.middleware_ = [];
+      this.playbackRates(options.playbackRates);
+      if (options.experimentalSvgIcons) {
+        // Add SVG Sprite to the DOM
+        const parser = new window.DOMParser();
+        const parsedSVG = parser.parseFromString(icons, 'image/svg+xml');
+        const errorNode = parsedSVG.querySelector('parsererror');
+        if (errorNode) {
+          log$1.warn('Failed to load SVG Icons. Falling back to Font Icons.');
+          this.options_.experimentalSvgIcons = null;
+        } else {
+          const sprite = parsedSVG.documentElement;
+          sprite.style.display = 'none';
+          this.el_.appendChild(sprite);
+          this.addClass('vjs-svg-icons-enabled');
+        }
+      }
+      this.initChildren();
+
+      // Set isAudio based on whether or not an audio tag was used
+      this.isAudio(tag.nodeName.toLowerCase() === 'audio');
+
+      // Update controls className. Can't do this when the controls are initially
+      // set because the element doesn't exist yet.
+      if (this.controls()) {
+        this.addClass('vjs-controls-enabled');
+      } else {
+        this.addClass('vjs-controls-disabled');
+      }
+
+      // Set ARIA label and region role depending on player type
+      this.el_.setAttribute('role', 'region');
+      if (this.isAudio()) {
+        this.el_.setAttribute('aria-label', this.localize('Audio Player'));
+      } else {
+        this.el_.setAttribute('aria-label', this.localize('Video Player'));
+      }
+      if (this.isAudio()) {
+        this.addClass('vjs-audio');
+      }
+
+      // TODO: Make this smarter. Toggle user state between touching/mousing
+      // using events, since devices can have both touch and mouse events.
+      // TODO: Make this check be performed again when the window switches between monitors
+      // (See https://github.com/videojs/video.js/issues/5683)
+      if (TOUCH_ENABLED) {
+        this.addClass('vjs-touch-enabled');
+      }
+
+      // iOS Safari has broken hover handling
+      if (!IS_IOS) {
+        this.addClass('vjs-workinghover');
+      }
+
+      // Make player easily findable by ID
+      Player.players[this.id_] = this;
+
+      // Add a major version class to aid css in plugins
+      const majorVersion = version$5.split('.')[0];
+      this.addClass(`vjs-v${majorVersion}`);
+
+      // When the player is first initialized, trigger activity so components
+      // like the control bar show themselves if needed
+      this.userActive(true);
+      this.reportUserActivity();
+      this.one('play', e => this.listenForUserActivity_(e));
+      this.on('keydown', e => this.handleKeyDown(e));
+      this.on('languagechange', e => this.handleLanguagechange(e));
+      this.breakpoints(this.options_.breakpoints);
+      this.responsive(this.options_.responsive);
+
+      // Calling both the audio mode methods after the player is fully
+      // setup to be able to listen to the events triggered by them
+      this.on('ready', () => {
+        // Calling the audioPosterMode method first so that
+        // the audioOnlyMode can take precedence when both options are set to true
+        this.audioPosterMode(this.options_.audioPosterMode);
+        this.audioOnlyMode(this.options_.audioOnlyMode);
+      });
+    }
+
+    /**
+     * Destroys the video player and does any necessary cleanup.
+     *
+     * This is especially helpful if you are dynamically adding and removing videos
+     * to/from the DOM.
+     *
+     * @fires Player#dispose
+     */
+    dispose() {
+      /**
+       * Called when the player is being disposed of.
+       *
+       * @event Player#dispose
+       * @type {Event}
+       */
+      this.trigger('dispose');
+      // prevent dispose from being called twice
+      this.off('dispose');
+
+      // Make sure all player-specific document listeners are unbound. This is
+      off(document, this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
+      off(document, 'keydown', this.boundFullWindowOnEscKey_);
+      if (this.styleEl_ && this.styleEl_.parentNode) {
+        this.styleEl_.parentNode.removeChild(this.styleEl_);
+        this.styleEl_ = null;
+      }
+
+      // Kill reference to this player
+      Player.players[this.id_] = null;
+      if (this.tag && this.tag.player) {
+        this.tag.player = null;
+      }
+      if (this.el_ && this.el_.player) {
+        this.el_.player = null;
+      }
+      if (this.tech_) {
+        this.tech_.dispose();
+        this.isPosterFromTech_ = false;
+        this.poster_ = '';
+      }
+      if (this.playerElIngest_) {
+        this.playerElIngest_ = null;
+      }
+      if (this.tag) {
+        this.tag = null;
+      }
+      clearCacheForPlayer(this);
+
+      // remove all event handlers for track lists
+      // all tracks and track listeners are removed on
+      // tech dispose
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        const list = this[props.getterName]();
+
+        // if it is not a native list
+        // we have to manually remove event listeners
+        if (list && list.off) {
+          list.off();
+        }
+      });
+
+      // the actual .el_ is removed here, or replaced if
+      super.dispose({
+        restoreEl: this.options_.restoreEl
+      });
+    }
+
+    /**
+     * Create the `Player`'s DOM element.
+     *
+     * @return {Element}
+     *         The DOM element that gets created.
+     */
+    createEl() {
+      let tag = this.tag;
+      let el;
+      let playerElIngest = this.playerElIngest_ = tag.parentNode && tag.parentNode.hasAttribute && tag.parentNode.hasAttribute('data-vjs-player');
+      const divEmbed = this.tag.tagName.toLowerCase() === 'video-js';
+      if (playerElIngest) {
+        el = this.el_ = tag.parentNode;
+      } else if (!divEmbed) {
+        el = this.el_ = super.createEl('div');
+      }
+
+      // Copy over all the attributes from the tag, including ID and class
+      // ID will now reference player box, not the video tag
+      const attrs = getAttributes(tag);
+      if (divEmbed) {
+        el = this.el_ = tag;
+        tag = this.tag = document.createElement('video');
+        while (el.children.length) {
+          tag.appendChild(el.firstChild);
+        }
+        if (!hasClass(el, 'video-js')) {
+          addClass(el, 'video-js');
+        }
+        el.appendChild(tag);
+        playerElIngest = this.playerElIngest_ = el;
+        // move properties over from our custom `video-js` element
+        // to our new `video` element. This will move things like
+        // `src` or `controls` that were set via js before the player
+        // was initialized.
+        Object.keys(el).forEach(k => {
+          try {
+            tag[k] = el[k];
+          } catch (e) {
+            // we got a a property like outerHTML which we can't actually copy, ignore it
+          }
+        });
+      }
+
+      // set tabindex to -1 to remove the video element from the focus order
+      tag.setAttribute('tabindex', '-1');
+      attrs.tabindex = '-1';
+
+      // Workaround for #4583 on Chrome (on Windows) with JAWS.
+      // See https://github.com/FreedomScientific/VFO-standards-support/issues/78
+      // Note that we can't detect if JAWS is being used, but this ARIA attribute
+      // doesn't change behavior of Chrome if JAWS is not being used
+      if (IS_CHROME && IS_WINDOWS) {
+        tag.setAttribute('role', 'application');
+        attrs.role = 'application';
+      }
+
+      // Remove width/height attrs from tag so CSS can make it 100% width/height
+      tag.removeAttribute('width');
+      tag.removeAttribute('height');
+      if ('width' in attrs) {
+        delete attrs.width;
+      }
+      if ('height' in attrs) {
+        delete attrs.height;
+      }
+      Object.getOwnPropertyNames(attrs).forEach(function (attr) {
+        // don't copy over the class attribute to the player element when we're in a div embed
+        // the class is already set up properly in the divEmbed case
+        // and we want to make sure that the `video-js` class doesn't get lost
+        if (!(divEmbed && attr === 'class')) {
+          el.setAttribute(attr, attrs[attr]);
+        }
+        if (divEmbed) {
+          tag.setAttribute(attr, attrs[attr]);
+        }
+      });
+
+      // Update tag id/class for use as HTML5 playback tech
+      // Might think we should do this after embedding in container so .vjs-tech class
+      // doesn't flash 100% width/height, but class only applies with .video-js parent
+      tag.playerId = tag.id;
+      tag.id += '_html5_api';
+      tag.className = 'vjs-tech';
+
+      // Make player findable on elements
+      tag.player = el.player = this;
+      // Default state of video is paused
+      this.addClass('vjs-paused');
+      const deviceClassNames = ['IS_SMART_TV', 'IS_TIZEN', 'IS_WEBOS', 'IS_ANDROID', 'IS_IPAD', 'IS_IPHONE'].filter(key => browser[key]).map(key => {
+        return 'vjs-device-' + key.substring(3).toLowerCase().replace(/\_/g, '-');
+      });
+      this.addClass(...deviceClassNames);
+
+      // Add a style element in the player that we'll use to set the width/height
+      // of the player in a way that's still overridable by CSS, just like the
+      // video element
+      if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true) {
+        this.styleEl_ = createStyleElement('vjs-styles-dimensions');
+        const defaultsStyleEl = $('.vjs-styles-defaults');
+        const head = $('head');
+        head.insertBefore(this.styleEl_, defaultsStyleEl ? defaultsStyleEl.nextSibling : head.firstChild);
+      }
+      this.fill_ = false;
+      this.fluid_ = false;
+
+      // Pass in the width/height/aspectRatio options which will update the style el
+      this.width(this.options_.width);
+      this.height(this.options_.height);
+      this.fill(this.options_.fill);
+      this.fluid(this.options_.fluid);
+      this.aspectRatio(this.options_.aspectRatio);
+      // support both crossOrigin and crossorigin to reduce confusion and issues around the name
+      this.crossOrigin(this.options_.crossOrigin || this.options_.crossorigin);
+
+      // Hide any links within the video/audio tag,
+      // because IE doesn't hide them completely from screen readers.
+      const links = tag.getElementsByTagName('a');
+      for (let i = 0; i < links.length; i++) {
+        const linkEl = links.item(i);
+        addClass(linkEl, 'vjs-hidden');
+        linkEl.setAttribute('hidden', 'hidden');
+      }
+
+      // insertElFirst seems to cause the networkState to flicker from 3 to 2, so
+      // keep track of the original for later so we can know if the source originally failed
+      tag.initNetworkState_ = tag.networkState;
+
+      // Wrap video tag in div (el/box) container
+      if (tag.parentNode && !playerElIngest) {
+        tag.parentNode.insertBefore(el, tag);
+      }
+
+      // insert the tag as the first child of the player element
+      // then manually add it to the children array so that this.addChild
+      // will work properly for other components
+      //
+      // Breaks iPhone, fixed in HTML5 setup.
+      prependTo(tag, el);
+      this.children_.unshift(tag);
+
+      // Set lang attr on player to ensure CSS :lang() in consistent with player
+      // if it's been set to something different to the doc
+      this.el_.setAttribute('lang', this.language_);
+      this.el_.setAttribute('translate', 'no');
+      this.el_ = el;
+      return el;
+    }
+
+    /**
+     * Get or set the `Player`'s crossOrigin option. For the HTML5 player, this
+     * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+     * behavior.
+     *
+     * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+     *
+     * @param {string|null} [value]
+     *        The value to set the `Player`'s crossOrigin to. If an argument is
+     *        given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
+     *
+     * @return {string|null|undefined}
+     *         - The current crossOrigin value of the `Player` when getting.
+     *         - undefined when setting
+     */
+    crossOrigin(value) {
+      // `null` can be set to unset a value
+      if (typeof value === 'undefined') {
+        return this.techGet_('crossOrigin');
+      }
+      if (value !== null && value !== 'anonymous' && value !== 'use-credentials') {
+        log$1.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${value}"`);
+        return;
+      }
+      this.techCall_('setCrossOrigin', value);
+      if (this.posterImage) {
+        this.posterImage.crossOrigin(value);
+      }
+      return;
+    }
+
+    /**
+     * A getter/setter for the `Player`'s width. Returns the player's configured value.
+     * To get the current width use `currentWidth()`.
+     *
+     * @param {number|string} [value]
+     *        CSS value to set the `Player`'s width to.
+     *
+     * @return {number|undefined}
+     *         - The current width of the `Player` when getting.
+     *         - Nothing when setting
+     */
+    width(value) {
+      return this.dimension('width', value);
+    }
+
+    /**
+     * A getter/setter for the `Player`'s height. Returns the player's configured value.
+     * To get the current height use `currentheight()`.
+     *
+     * @param {number|string} [value]
+     *        CSS value to set the `Player`'s height to.
+     *
+     * @return {number|undefined}
+     *         - The current height of the `Player` when getting.
+     *         - Nothing when setting
+     */
+    height(value) {
+      return this.dimension('height', value);
+    }
+
+    /**
+     * A getter/setter for the `Player`'s width & height.
+     *
+     * @param {string} dimension
+     *        This string can be:
+     *        - 'width'
+     *        - 'height'
+     *
+     * @param {number|string} [value]
+     *        Value for dimension specified in the first argument.
+     *
+     * @return {number}
+     *         The dimension arguments value when getting (width/height).
+     */
+    dimension(dimension, value) {
+      const privDimension = dimension + '_';
+      if (value === undefined) {
+        return this[privDimension] || 0;
+      }
+      if (value === '' || value === 'auto') {
+        // If an empty string is given, reset the dimension to be automatic
+        this[privDimension] = undefined;
+        this.updateStyleEl_();
+        return;
+      }
+      const parsedVal = parseFloat(value);
+      if (isNaN(parsedVal)) {
+        log$1.error(`Improper value "${value}" supplied for for ${dimension}`);
+        return;
+      }
+      this[privDimension] = parsedVal;
+      this.updateStyleEl_();
+    }
+
+    /**
+     * A getter/setter/toggler for the vjs-fluid `className` on the `Player`.
+     *
+     * Turning this on will turn off fill mode.
+     *
+     * @param {boolean} [bool]
+     *        - A value of true adds the class.
+     *        - A value of false removes the class.
+     *        - No value will be a getter.
+     *
+     * @return {boolean|undefined}
+     *         - The value of fluid when getting.
+     *         - `undefined` when setting.
+     */
+    fluid(bool) {
+      if (bool === undefined) {
+        return !!this.fluid_;
+      }
+      this.fluid_ = !!bool;
+      if (isEvented(this)) {
+        this.off(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+      }
+      if (bool) {
+        this.addClass('vjs-fluid');
+        this.fill(false);
+        addEventedCallback(this, () => {
+          this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
+        });
+      } else {
+        this.removeClass('vjs-fluid');
+      }
+      this.updateStyleEl_();
+    }
+
+    /**
+     * A getter/setter/toggler for the vjs-fill `className` on the `Player`.
+     *
+     * Turning this on will turn off fluid mode.
+     *
+     * @param {boolean} [bool]
+     *        - A value of true adds the class.
+     *        - A value of false removes the class.
+     *        - No value will be a getter.
+     *
+     * @return {boolean|undefined}
+     *         - The value of fluid when getting.
+     *         - `undefined` when setting.
+     */
+    fill(bool) {
+      if (bool === undefined) {
+        return !!this.fill_;
+      }
+      this.fill_ = !!bool;
+      if (bool) {
+        this.addClass('vjs-fill');
+        this.fluid(false);
+      } else {
+        this.removeClass('vjs-fill');
+      }
+    }
+
+    /**
+     * Get/Set the aspect ratio
+     *
+     * @param {string} [ratio]
+     *        Aspect ratio for player
+     *
+     * @return {string|undefined}
+     *         returns the current aspect ratio when getting
+     */
+
+    /**
+     * A getter/setter for the `Player`'s aspect ratio.
+     *
+     * @param {string} [ratio]
+     *        The value to set the `Player`'s aspect ratio to.
+     *
+     * @return {string|undefined}
+     *         - The current aspect ratio of the `Player` when getting.
+     *         - undefined when setting
+     */
+    aspectRatio(ratio) {
+      if (ratio === undefined) {
+        return this.aspectRatio_;
+      }
+
+      // Check for width:height format
+      if (!/^\d+\:\d+$/.test(ratio)) {
+        throw new Error('Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.');
+      }
+      this.aspectRatio_ = ratio;
+
+      // We're assuming if you set an aspect ratio you want fluid mode,
+      // because in fixed mode you could calculate width and height yourself.
+      this.fluid(true);
+      this.updateStyleEl_();
+    }
+
+    /**
+     * Update styles of the `Player` element (height, width and aspect ratio).
+     *
+     * @private
+     * @listens Tech#loadedmetadata
+     */
+    updateStyleEl_() {
+      if (window.VIDEOJS_NO_DYNAMIC_STYLE === true) {
+        const width = typeof this.width_ === 'number' ? this.width_ : this.options_.width;
+        const height = typeof this.height_ === 'number' ? this.height_ : this.options_.height;
+        const techEl = this.tech_ && this.tech_.el();
+        if (techEl) {
+          if (width >= 0) {
+            techEl.width = width;
+          }
+          if (height >= 0) {
+            techEl.height = height;
+          }
+        }
+        return;
+      }
+      let width;
+      let height;
+      let aspectRatio;
+      let idClass;
+
+      // The aspect ratio is either used directly or to calculate width and height.
+      if (this.aspectRatio_ !== undefined && this.aspectRatio_ !== 'auto') {
+        // Use any aspectRatio that's been specifically set
+        aspectRatio = this.aspectRatio_;
+      } else if (this.videoWidth() > 0) {
+        // Otherwise try to get the aspect ratio from the video metadata
+        aspectRatio = this.videoWidth() + ':' + this.videoHeight();
+      } else {
+        // Or use a default. The video element's is 2:1, but 16:9 is more common.
+        aspectRatio = '16:9';
+      }
+
+      // Get the ratio as a decimal we can use to calculate dimensions
+      const ratioParts = aspectRatio.split(':');
+      const ratioMultiplier = ratioParts[1] / ratioParts[0];
+      if (this.width_ !== undefined) {
+        // Use any width that's been specifically set
+        width = this.width_;
+      } else if (this.height_ !== undefined) {
+        // Or calculate the width from the aspect ratio if a height has been set
+        width = this.height_ / ratioMultiplier;
+      } else {
+        // Or use the video's metadata, or use the video el's default of 300
+        width = this.videoWidth() || 300;
+      }
+      if (this.height_ !== undefined) {
+        // Use any height that's been specifically set
+        height = this.height_;
+      } else {
+        // Otherwise calculate the height from the ratio and the width
+        height = width * ratioMultiplier;
+      }
+
+      // Ensure the CSS class is valid by starting with an alpha character
+      if (/^[^a-zA-Z]/.test(this.id())) {
+        idClass = 'dimensions-' + this.id();
+      } else {
+        idClass = this.id() + '-dimensions';
+      }
+
+      // Ensure the right class is still on the player for the style element
+      this.addClass(idClass);
+      setTextContent(this.styleEl_, `
+      .${idClass} {
+        width: ${width}px;
+        height: ${height}px;
+      }
+
+      .${idClass}.vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: ${ratioMultiplier * 100}%;
+      }
+    `);
+    }
+
+    /**
+     * Load/Create an instance of playback {@link Tech} including element
+     * and API methods. Then append the `Tech` element in `Player` as a child.
+     *
+     * @param {string} techName
+     *        name of the playback technology
+     *
+     * @param {string} source
+     *        video source
+     *
+     * @private
+     */
+    loadTech_(techName, source) {
+      // Pause and remove current playback technology
+      if (this.tech_) {
+        this.unloadTech_();
+      }
+      const titleTechName = toTitleCase$1(techName);
+      const camelTechName = techName.charAt(0).toLowerCase() + techName.slice(1);
+
+      // get rid of the HTML5 video tag as soon as we are using another tech
+      if (titleTechName !== 'Html5' && this.tag) {
+        Tech.getTech('Html5').disposeMediaElement(this.tag);
+        this.tag.player = null;
+        this.tag = null;
+      }
+      this.techName_ = titleTechName;
+
+      // Turn off API access because we're loading a new tech that might load asynchronously
+      this.isReady_ = false;
+      let autoplay = this.autoplay();
+
+      // if autoplay is a string (or `true` with normalizeAutoplay: true) we pass false to the tech
+      // because the player is going to handle autoplay on `loadstart`
+      if (typeof this.autoplay() === 'string' || this.autoplay() === true && this.options_.normalizeAutoplay) {
+        autoplay = false;
+      }
+
+      // Grab tech-specific options from player options and add source and parent element to use.
+      const techOptions = {
+        source,
+        autoplay,
+        'nativeControlsForTouch': this.options_.nativeControlsForTouch,
+        'playerId': this.id(),
+        'techId': `${this.id()}_${camelTechName}_api`,
+        'playsinline': this.options_.playsinline,
+        'preload': this.options_.preload,
+        'loop': this.options_.loop,
+        'disablePictureInPicture': this.options_.disablePictureInPicture,
+        'muted': this.options_.muted,
+        'poster': this.poster(),
+        'language': this.language(),
+        'playerElIngest': this.playerElIngest_ || false,
+        'vtt.js': this.options_['vtt.js'],
+        'canOverridePoster': !!this.options_.techCanOverridePoster,
+        'enableSourceset': this.options_.enableSourceset
+      };
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        techOptions[props.getterName] = this[props.privateName];
+      });
+      Object.assign(techOptions, this.options_[titleTechName]);
+      Object.assign(techOptions, this.options_[camelTechName]);
+      Object.assign(techOptions, this.options_[techName.toLowerCase()]);
+      if (this.tag) {
+        techOptions.tag = this.tag;
+      }
+      if (source && source.src === this.cache_.src && this.cache_.currentTime > 0) {
+        techOptions.startTime = this.cache_.currentTime;
+      }
+
+      // Initialize tech instance
+      const TechClass = Tech.getTech(techName);
+      if (!TechClass) {
+        throw new Error(`No Tech named '${titleTechName}' exists! '${titleTechName}' should be registered using videojs.registerTech()'`);
+      }
+      this.tech_ = new TechClass(techOptions);
+
+      // player.triggerReady is always async, so don't need this to be async
+      this.tech_.ready(bind_(this, this.handleTechReady_), true);
+      textTrackConverter.jsonToTextTracks(this.textTracksJson_ || [], this.tech_);
+
+      // Listen to all HTML5-defined events and trigger them on the player
+      TECH_EVENTS_RETRIGGER.forEach(event => {
+        this.on(this.tech_, event, e => this[`handleTech${toTitleCase$1(event)}_`](e));
+      });
+      Object.keys(TECH_EVENTS_QUEUE).forEach(event => {
+        this.on(this.tech_, event, eventObj => {
+          if (this.tech_.playbackRate() === 0 && this.tech_.seeking()) {
+            this.queuedCallbacks_.push({
+              callback: this[`handleTech${TECH_EVENTS_QUEUE[event]}_`].bind(this),
+              event: eventObj
+            });
+            return;
+          }
+          this[`handleTech${TECH_EVENTS_QUEUE[event]}_`](eventObj);
+        });
+      });
+      this.on(this.tech_, 'loadstart', e => this.handleTechLoadStart_(e));
+      this.on(this.tech_, 'sourceset', e => this.handleTechSourceset_(e));
+      this.on(this.tech_, 'waiting', e => this.handleTechWaiting_(e));
+      this.on(this.tech_, 'ended', e => this.handleTechEnded_(e));
+      this.on(this.tech_, 'seeking', e => this.handleTechSeeking_(e));
+      this.on(this.tech_, 'play', e => this.handleTechPlay_(e));
+      this.on(this.tech_, 'pause', e => this.handleTechPause_(e));
+      this.on(this.tech_, 'durationchange', e => this.handleTechDurationChange_(e));
+      this.on(this.tech_, 'fullscreenchange', (e, data) => this.handleTechFullscreenChange_(e, data));
+      this.on(this.tech_, 'fullscreenerror', (e, err) => this.handleTechFullscreenError_(e, err));
+      this.on(this.tech_, 'enterpictureinpicture', e => this.handleTechEnterPictureInPicture_(e));
+      this.on(this.tech_, 'leavepictureinpicture', e => this.handleTechLeavePictureInPicture_(e));
+      this.on(this.tech_, 'error', e => this.handleTechError_(e));
+      this.on(this.tech_, 'posterchange', e => this.handleTechPosterChange_(e));
+      this.on(this.tech_, 'textdata', e => this.handleTechTextData_(e));
+      this.on(this.tech_, 'ratechange', e => this.handleTechRateChange_(e));
+      this.on(this.tech_, 'loadedmetadata', this.boundUpdateStyleEl_);
+      this.usingNativeControls(this.techGet_('controls'));
+      if (this.controls() && !this.usingNativeControls()) {
+        this.addTechControlsListeners_();
+      }
+
+      // Add the tech element in the DOM if it was not already there
+      // Make sure to not insert the original video element if using Html5
+      if (this.tech_.el().parentNode !== this.el() && (titleTechName !== 'Html5' || !this.tag)) {
+        prependTo(this.tech_.el(), this.el());
+      }
+
+      // Get rid of the original video tag reference after the first tech is loaded
+      if (this.tag) {
+        this.tag.player = null;
+        this.tag = null;
+      }
+    }
+
+    /**
+     * Unload and dispose of the current playback {@link Tech}.
+     *
+     * @private
+     */
+    unloadTech_() {
+      // Save the current text tracks so that we can reuse the same text tracks with the next tech
+      ALL.names.forEach(name => {
+        const props = ALL[name];
+        this[props.privateName] = this[props.getterName]();
+      });
+      this.textTracksJson_ = textTrackConverter.textTracksToJson(this.tech_);
+      this.isReady_ = false;
+      this.tech_.dispose();
+      this.tech_ = false;
+      if (this.isPosterFromTech_) {
+        this.poster_ = '';
+        this.trigger('posterchange');
+      }
+      this.isPosterFromTech_ = false;
+    }
+
+    /**
+     * Return a reference to the current {@link Tech}.
+     * It will print a warning by default about the danger of using the tech directly
+     * but any argument that is passed in will silence the warning.
+     *
+     * @param {*} [safety]
+     *        Anything passed in to silence the warning
+     *
+     * @return {Tech}
+     *         The Tech
+     */
+    tech(safety) {
+      if (safety === undefined) {
+        log$1.warn('Using the tech directly can be dangerous. I hope you know what you\'re doing.\n' + 'See https://github.com/videojs/video.js/issues/2617 for more info.\n');
+      }
+      return this.tech_;
+    }
+
+    /**
+     * An object that contains Video.js version.
+     *
+     * @typedef {Object} PlayerVersion
+     *
+     * @property {string} 'video.js' - Video.js version
+     */
+
+    /**
+     * Returns an object with Video.js version.
+     *
+     * @return {PlayerVersion}
+     *          An object with Video.js version.
+     */
+    version() {
+      return {
+        'video.js': version$5
+      };
+    }
+
+    /**
+     * Set up click and touch listeners for the playback element
+     *
+     * - On desktops: a click on the video itself will toggle playback
+     * - On mobile devices: a click on the video toggles controls
+     *   which is done by toggling the user state between active and
+     *   inactive
+     * - A tap can signal that a user has become active or has become inactive
+     *   e.g. a quick tap on an iPhone movie should reveal the controls. Another
+     *   quick tap should hide them again (signaling the user is in an inactive
+     *   viewing state)
+     * - In addition to this, we still want the user to be considered inactive after
+     *   a few seconds of inactivity.
+     *
+     * > Note: the only part of iOS interaction we can't mimic with this setup
+     * is a touch and hold on the video element counting as activity in order to
+     * keep the controls showing, but that shouldn't be an issue. A touch and hold
+     * on any controls will still keep the user active
+     *
+     * @private
+     */
+    addTechControlsListeners_() {
+      // Make sure to remove all the previous listeners in case we are called multiple times.
+      this.removeTechControlsListeners_();
+      this.on(this.tech_, 'click', this.boundHandleTechClick_);
+      this.on(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
+
+      // If the controls were hidden we don't want that to change without a tap event
+      // so we'll check if the controls were already showing before reporting user
+      // activity
+      this.on(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+      this.on(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+      this.on(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+
+      // The tap listener needs to come after the touchend listener because the tap
+      // listener cancels out any reportedUserActivity when setting userActive(false)
+      this.on(this.tech_, 'tap', this.boundHandleTechTap_);
+    }
+
+    /**
+     * Remove the listeners used for click and tap controls. This is needed for
+     * toggling to controls disabled, where a tap/touch should do nothing.
+     *
+     * @private
+     */
+    removeTechControlsListeners_() {
+      // We don't want to just use `this.off()` because there might be other needed
+      // listeners added by techs that extend this.
+      this.off(this.tech_, 'tap', this.boundHandleTechTap_);
+      this.off(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+      this.off(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+      this.off(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+      this.off(this.tech_, 'click', this.boundHandleTechClick_);
+      this.off(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
+    }
+
+    /**
+     * Player waits for the tech to be ready
+     *
+     * @private
+     */
+    handleTechReady_() {
+      this.triggerReady();
+
+      // Keep the same volume as before
+      if (this.cache_.volume) {
+        this.techCall_('setVolume', this.cache_.volume);
+      }
+
+      // Look if the tech found a higher resolution poster while loading
+      this.handleTechPosterChange_();
+
+      // Update the duration if available
+      this.handleTechDurationChange_();
+    }
+
+    /**
+     * Retrigger the `loadstart` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#loadstart
+     * @listens Tech#loadstart
+     * @private
+     */
+    handleTechLoadStart_() {
+      // TODO: Update to use `emptied` event instead. See #1277.
+
+      this.removeClass('vjs-ended', 'vjs-seeking');
+
+      // reset the error state
+      this.error(null);
+
+      // Update the duration
+      this.handleTechDurationChange_();
+      if (!this.paused()) {
+        /**
+         * Fired when the user agent begins looking for media data
+         *
+         * @event Player#loadstart
+         * @type {Event}
+         */
+        this.trigger('loadstart');
+      } else {
+        // reset the hasStarted state
+        this.hasStarted(false);
+        this.trigger('loadstart');
+      }
+
+      // autoplay happens after loadstart for the browser,
+      // so we mimic that behavior
+      this.manualAutoplay_(this.autoplay() === true && this.options_.normalizeAutoplay ? 'play' : this.autoplay());
+    }
+
+    /**
+     * Handle autoplay string values, rather than the typical boolean
+     * values that should be handled by the tech. Note that this is not
+     * part of any specification. Valid values and what they do can be
+     * found on the autoplay getter at Player#autoplay()
+     */
+    manualAutoplay_(type) {
+      if (!this.tech_ || typeof type !== 'string') {
+        return;
+      }
+
+      // Save original muted() value, set muted to true, and attempt to play().
+      // On promise rejection, restore muted from saved value
+      const resolveMuted = () => {
+        const previouslyMuted = this.muted();
+        this.muted(true);
+        const restoreMuted = () => {
+          this.muted(previouslyMuted);
+        };
+
+        // restore muted on play terminatation
+        this.playTerminatedQueue_.push(restoreMuted);
+        const mutedPromise = this.play();
+        if (!isPromise(mutedPromise)) {
+          return;
+        }
+        return mutedPromise.catch(err => {
+          restoreMuted();
+          throw new Error(`Rejection at manualAutoplay. Restoring muted value. ${err ? err : ''}`);
+        });
+      };
+      let promise;
+
+      // if muted defaults to true
+      // the only thing we can do is call play
+      if (type === 'any' && !this.muted()) {
+        promise = this.play();
+        if (isPromise(promise)) {
+          promise = promise.catch(resolveMuted);
+        }
+      } else if (type === 'muted' && !this.muted()) {
+        promise = resolveMuted();
+      } else {
+        promise = this.play();
+      }
+      if (!isPromise(promise)) {
+        return;
+      }
+      return promise.then(() => {
+        this.trigger({
+          type: 'autoplay-success',
+          autoplay: type
+        });
+      }).catch(() => {
+        this.trigger({
+          type: 'autoplay-failure',
+          autoplay: type
+        });
+      });
+    }
+
+    /**
+     * Update the internal source caches so that we return the correct source from
+     * `src()`, `currentSource()`, and `currentSources()`.
+     *
+     * > Note: `currentSources` will not be updated if the source that is passed in exists
+     *         in the current `currentSources` cache.
+     *
+     *
+     * @param {Tech~SourceObject} srcObj
+     *        A string or object source to update our caches to.
+     */
+    updateSourceCaches_(srcObj = '') {
+      let src = srcObj;
+      let type = '';
+      if (typeof src !== 'string') {
+        src = srcObj.src;
+        type = srcObj.type;
+      }
+
+      // make sure all the caches are set to default values
+      // to prevent null checking
+      this.cache_.source = this.cache_.source || {};
+      this.cache_.sources = this.cache_.sources || [];
+
+      // try to get the type of the src that was passed in
+      if (src && !type) {
+        type = findMimetype(this, src);
+      }
+
+      // update `currentSource` cache always
+      this.cache_.source = merge$2({}, srcObj, {
+        src,
+        type
+      });
+      const matchingSources = this.cache_.sources.filter(s => s.src && s.src === src);
+      const sourceElSources = [];
+      const sourceEls = this.$$('source');
+      const matchingSourceEls = [];
+      for (let i = 0; i < sourceEls.length; i++) {
+        const sourceObj = getAttributes(sourceEls[i]);
+        sourceElSources.push(sourceObj);
+        if (sourceObj.src && sourceObj.src === src) {
+          matchingSourceEls.push(sourceObj.src);
+        }
+      }
+
+      // if we have matching source els but not matching sources
+      // the current source cache is not up to date
+      if (matchingSourceEls.length && !matchingSources.length) {
+        this.cache_.sources = sourceElSources;
+        // if we don't have matching source or source els set the
+        // sources cache to the `currentSource` cache
+      } else if (!matchingSources.length) {
+        this.cache_.sources = [this.cache_.source];
+      }
+
+      // update the tech `src` cache
+      this.cache_.src = src;
+    }
+
+    /**
+     * *EXPERIMENTAL* Fired when the source is set or changed on the {@link Tech}
+     * causing the media element to reload.
+     *
+     * It will fire for the initial source and each subsequent source.
+     * This event is a custom event from Video.js and is triggered by the {@link Tech}.
+     *
+     * The event object for this event contains a `src` property that will contain the source
+     * that was available when the event was triggered. This is generally only necessary if Video.js
+     * is switching techs while the source was being changed.
+     *
+     * It is also fired when `load` is called on the player (or media element)
+     * because the {@link https://html.spec.whatwg.org/multipage/media.html#dom-media-load|specification for `load`}
+     * says that the resource selection algorithm needs to be aborted and restarted.
+     * In this case, it is very likely that the `src` property will be set to the
+     * empty string `""` to indicate we do not know what the source will be but
+     * that it is changing.
+     *
+     * *This event is currently still experimental and may change in minor releases.*
+     * __To use this, pass `enableSourceset` option to the player.__
+     *
+     * @event Player#sourceset
+     * @type {Event}
+     * @prop {string} src
+     *                The source url available when the `sourceset` was triggered.
+     *                It will be an empty string if we cannot know what the source is
+     *                but know that the source will change.
+     */
+    /**
+     * Retrigger the `sourceset` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#sourceset
+     * @listens Tech#sourceset
+     * @private
+     */
+    handleTechSourceset_(event) {
+      // only update the source cache when the source
+      // was not updated using the player api
+      if (!this.changingSrc_) {
+        let updateSourceCaches = src => this.updateSourceCaches_(src);
+        const playerSrc = this.currentSource().src;
+        const eventSrc = event.src;
+
+        // if we have a playerSrc that is not a blob, and a tech src that is a blob
+        if (playerSrc && !/^blob:/.test(playerSrc) && /^blob:/.test(eventSrc)) {
+          // if both the tech source and the player source were updated we assume
+          // something like @videojs/http-streaming did the sourceset and skip updating the source cache.
+          if (!this.lastSource_ || this.lastSource_.tech !== eventSrc && this.lastSource_.player !== playerSrc) {
+            updateSourceCaches = () => {};
+          }
+        }
+
+        // update the source to the initial source right away
+        // in some cases this will be empty string
+        updateSourceCaches(eventSrc);
+
+        // if the `sourceset` `src` was an empty string
+        // wait for a `loadstart` to update the cache to `currentSrc`.
+        // If a sourceset happens before a `loadstart`, we reset the state
+        if (!event.src) {
+          this.tech_.any(['sourceset', 'loadstart'], e => {
+            // if a sourceset happens before a `loadstart` there
+            // is nothing to do as this `handleTechSourceset_`
+            // will be called again and this will be handled there.
+            if (e.type === 'sourceset') {
+              return;
+            }
+            const techSrc = this.techGet_('currentSrc');
+            this.lastSource_.tech = techSrc;
+            this.updateSourceCaches_(techSrc);
+          });
+        }
+      }
+      this.lastSource_ = {
+        player: this.currentSource().src,
+        tech: event.src
+      };
+      this.trigger({
+        src: event.src,
+        type: 'sourceset'
+      });
+    }
+
+    /**
+     * Add/remove the vjs-has-started class
+     *
+     *
+     * @param {boolean} request
+     *        - true: adds the class
+     *        - false: remove the class
+     *
+     * @return {boolean}
+     *         the boolean value of hasStarted_
+     */
+    hasStarted(request) {
+      if (request === undefined) {
+        // act as getter, if we have no request to change
+        return this.hasStarted_;
+      }
+      if (request === this.hasStarted_) {
+        return;
+      }
+      this.hasStarted_ = request;
+      if (this.hasStarted_) {
+        this.addClass('vjs-has-started');
+      } else {
+        this.removeClass('vjs-has-started');
+      }
+    }
+
+    /**
+     * Fired whenever the media begins or resumes playback
+     *
+     * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play}
+     * @fires Player#play
+     * @listens Tech#play
+     * @private
+     */
+    handleTechPlay_() {
+      this.removeClass('vjs-ended', 'vjs-paused');
+      this.addClass('vjs-playing');
+
+      // hide the poster when the user hits play
+      this.hasStarted(true);
+      /**
+       * Triggered whenever an {@link Tech#play} event happens. Indicates that
+       * playback has started or resumed.
+       *
+       * @event Player#play
+       * @type {Event}
+       */
+      this.trigger('play');
+    }
+
+    /**
+     * Retrigger the `ratechange` event that was triggered by the {@link Tech}.
+     *
+     * If there were any events queued while the playback rate was zero, fire
+     * those events now.
+     *
+     * @private
+     * @method Player#handleTechRateChange_
+     * @fires Player#ratechange
+     * @listens Tech#ratechange
+     */
+    handleTechRateChange_() {
+      if (this.tech_.playbackRate() > 0 && this.cache_.lastPlaybackRate === 0) {
+        this.queuedCallbacks_.forEach(queued => queued.callback(queued.event));
+        this.queuedCallbacks_ = [];
+      }
+      this.cache_.lastPlaybackRate = this.tech_.playbackRate();
+      /**
+       * Fires when the playing speed of the audio/video is changed
+       *
+       * @event Player#ratechange
+       * @type {event}
+       */
+      this.trigger('ratechange');
+    }
+
+    /**
+     * Retrigger the `waiting` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#waiting
+     * @listens Tech#waiting
+     * @private
+     */
+    handleTechWaiting_() {
+      this.addClass('vjs-waiting');
+      /**
+       * A readyState change on the DOM element has caused playback to stop.
+       *
+       * @event Player#waiting
+       * @type {Event}
+       */
+      this.trigger('waiting');
+
+      // Browsers may emit a timeupdate event after a waiting event. In order to prevent
+      // premature removal of the waiting class, wait for the time to change.
+      const timeWhenWaiting = this.currentTime();
+      const timeUpdateListener = () => {
+        if (timeWhenWaiting !== this.currentTime()) {
+          this.removeClass('vjs-waiting');
+          this.off('timeupdate', timeUpdateListener);
+        }
+      };
+      this.on('timeupdate', timeUpdateListener);
+    }
+
+    /**
+     * Retrigger the `canplay` event that was triggered by the {@link Tech}.
+     * > Note: This is not consistent between browsers. See #1351
+     *
+     * @fires Player#canplay
+     * @listens Tech#canplay
+     * @private
+     */
+    handleTechCanPlay_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media has a readyState of HAVE_FUTURE_DATA or greater.
+       *
+       * @event Player#canplay
+       * @type {Event}
+       */
+      this.trigger('canplay');
+    }
+
+    /**
+     * Retrigger the `canplaythrough` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#canplaythrough
+     * @listens Tech#canplaythrough
+     * @private
+     */
+    handleTechCanPlayThrough_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media has a readyState of HAVE_ENOUGH_DATA or greater. This means that the
+       * entire media file can be played without buffering.
+       *
+       * @event Player#canplaythrough
+       * @type {Event}
+       */
+      this.trigger('canplaythrough');
+    }
+
+    /**
+     * Retrigger the `playing` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#playing
+     * @listens Tech#playing
+     * @private
+     */
+    handleTechPlaying_() {
+      this.removeClass('vjs-waiting');
+      /**
+       * The media is no longer blocked from playback, and has started playing.
+       *
+       * @event Player#playing
+       * @type {Event}
+       */
+      this.trigger('playing');
+    }
+
+    /**
+     * Retrigger the `seeking` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#seeking
+     * @listens Tech#seeking
+     * @private
+     */
+    handleTechSeeking_() {
+      this.addClass('vjs-seeking');
+      /**
+       * Fired whenever the player is jumping to a new time
+       *
+       * @event Player#seeking
+       * @type {Event}
+       */
+      this.trigger('seeking');
+    }
+
+    /**
+     * Retrigger the `seeked` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#seeked
+     * @listens Tech#seeked
+     * @private
+     */
+    handleTechSeeked_() {
+      this.removeClass('vjs-seeking', 'vjs-ended');
+      /**
+       * Fired when the player has finished jumping to a new time
+       *
+       * @event Player#seeked
+       * @type {Event}
+       */
+      this.trigger('seeked');
+    }
+
+    /**
+     * Retrigger the `pause` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#pause
+     * @listens Tech#pause
+     * @private
+     */
+    handleTechPause_() {
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      /**
+       * Fired whenever the media has been paused
+       *
+       * @event Player#pause
+       * @type {Event}
+       */
+      this.trigger('pause');
+    }
+
+    /**
+     * Retrigger the `ended` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#ended
+     * @listens Tech#ended
+     * @private
+     */
+    handleTechEnded_() {
+      this.addClass('vjs-ended');
+      this.removeClass('vjs-waiting');
+      if (this.options_.loop) {
+        this.currentTime(0);
+        this.play();
+      } else if (!this.paused()) {
+        this.pause();
+      }
+
+      /**
+       * Fired when the end of the media resource is reached (currentTime == duration)
+       *
+       * @event Player#ended
+       * @type {Event}
+       */
+      this.trigger('ended');
+    }
+
+    /**
+     * Fired when the duration of the media resource is first known or changed
+     *
+     * @listens Tech#durationchange
+     * @private
+     */
+    handleTechDurationChange_() {
+      this.duration(this.techGet_('duration'));
+    }
+
+    /**
+     * Handle a click on the media element to play/pause
+     *
+     * @param {Event} event
+     *        the event that caused this function to trigger
+     *
+     * @listens Tech#click
+     * @private
+     */
+    handleTechClick_(event) {
+      // When controls are disabled a click should not toggle playback because
+      // the click is considered a control
+      if (!this.controls_) {
+        return;
+      }
+      if (this.options_ === undefined || this.options_.userActions === undefined || this.options_.userActions.click === undefined || this.options_.userActions.click !== false) {
+        if (this.options_ !== undefined && this.options_.userActions !== undefined && typeof this.options_.userActions.click === 'function') {
+          this.options_.userActions.click.call(this, event);
+        } else if (this.paused()) {
+          silencePromise(this.play());
+        } else {
+          this.pause();
+        }
+      }
+    }
+
+    /**
+     * Handle a double-click on the media element to enter/exit fullscreen
+     *
+     * @param {Event} event
+     *        the event that caused this function to trigger
+     *
+     * @listens Tech#dblclick
+     * @private
+     */
+    handleTechDoubleClick_(event) {
+      if (!this.controls_) {
+        return;
+      }
+
+      // we do not want to toggle fullscreen state
+      // when double-clicking inside a control bar or a modal
+      const inAllowedEls = Array.prototype.some.call(this.$$('.vjs-control-bar, .vjs-modal-dialog'), el => el.contains(event.target));
+      if (!inAllowedEls) {
+        /*
+         * options.userActions.doubleClick
+         *
+         * If `undefined` or `true`, double-click toggles fullscreen if controls are present
+         * Set to `false` to disable double-click handling
+         * Set to a function to substitute an external double-click handler
+         */
+        if (this.options_ === undefined || this.options_.userActions === undefined || this.options_.userActions.doubleClick === undefined || this.options_.userActions.doubleClick !== false) {
+          if (this.options_ !== undefined && this.options_.userActions !== undefined && typeof this.options_.userActions.doubleClick === 'function') {
+            this.options_.userActions.doubleClick.call(this, event);
+          } else if (this.isFullscreen()) {
+            this.exitFullscreen();
+          } else {
+            this.requestFullscreen();
+          }
+        }
+      }
+    }
+
+    /**
+     * Handle a tap on the media element. It will toggle the user
+     * activity state, which hides and shows the controls.
+     *
+     * @listens Tech#tap
+     * @private
+     */
+    handleTechTap_() {
+      this.userActive(!this.userActive());
+    }
+
+    /**
+     * Handle touch to start
+     *
+     * @listens Tech#touchstart
+     * @private
+     */
+    handleTechTouchStart_() {
+      this.userWasActive = this.userActive();
+    }
+
+    /**
+     * Handle touch to move
+     *
+     * @listens Tech#touchmove
+     * @private
+     */
+    handleTechTouchMove_() {
+      if (this.userWasActive) {
+        this.reportUserActivity();
+      }
+    }
+
+    /**
+     * Handle touch to end
+     *
+     * @param {Event} event
+     *        the touchend event that triggered
+     *        this function
+     *
+     * @listens Tech#touchend
+     * @private
+     */
+    handleTechTouchEnd_(event) {
+      // Stop the mouse events from also happening
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    }
+
+    /**
+     * @private
+     */
+    toggleFullscreenClass_() {
+      if (this.isFullscreen()) {
+        this.addClass('vjs-fullscreen');
+      } else {
+        this.removeClass('vjs-fullscreen');
+      }
+    }
+
+    /**
+     * when the document fschange event triggers it calls this
+     */
+    documentFullscreenChange_(e) {
+      const targetPlayer = e.target.player;
+
+      // if another player was fullscreen
+      // do a null check for targetPlayer because older firefox's would put document as e.target
+      if (targetPlayer && targetPlayer !== this) {
+        return;
+      }
+      const el = this.el();
+      let isFs = document[this.fsApi_.fullscreenElement] === el;
+      if (!isFs && el.matches) {
+        isFs = el.matches(':' + this.fsApi_.fullscreen);
+      }
+      this.isFullscreen(isFs);
+    }
+
+    /**
+     * Handle Tech Fullscreen Change
+     *
+     * @param {Event} event
+     *        the fullscreenchange event that triggered this function
+     *
+     * @param {Object} data
+     *        the data that was sent with the event
+     *
+     * @private
+     * @listens Tech#fullscreenchange
+     * @fires Player#fullscreenchange
+     */
+    handleTechFullscreenChange_(event, data) {
+      if (data) {
+        if (data.nativeIOSFullscreen) {
+          this.addClass('vjs-ios-native-fs');
+          this.tech_.one('webkitendfullscreen', () => {
+            this.removeClass('vjs-ios-native-fs');
+          });
+        }
+        this.isFullscreen(data.isFullscreen);
+      }
+    }
+    handleTechFullscreenError_(event, err) {
+      this.trigger('fullscreenerror', err);
+    }
+
+    /**
+     * @private
+     */
+    togglePictureInPictureClass_() {
+      if (this.isInPictureInPicture()) {
+        this.addClass('vjs-picture-in-picture');
+      } else {
+        this.removeClass('vjs-picture-in-picture');
+      }
+    }
+
+    /**
+     * Handle Tech Enter Picture-in-Picture.
+     *
+     * @param {Event} event
+     *        the enterpictureinpicture event that triggered this function
+     *
+     * @private
+     * @listens Tech#enterpictureinpicture
+     */
+    handleTechEnterPictureInPicture_(event) {
+      this.isInPictureInPicture(true);
+    }
+
+    /**
+     * Handle Tech Leave Picture-in-Picture.
+     *
+     * @param {Event} event
+     *        the leavepictureinpicture event that triggered this function
+     *
+     * @private
+     * @listens Tech#leavepictureinpicture
+     */
+    handleTechLeavePictureInPicture_(event) {
+      this.isInPictureInPicture(false);
+    }
+
+    /**
+     * Fires when an error occurred during the loading of an audio/video.
+     *
+     * @private
+     * @listens Tech#error
+     */
+    handleTechError_() {
+      const error = this.tech_.error();
+      if (error) {
+        this.error(error);
+      }
+    }
+
+    /**
+     * Retrigger the `textdata` event that was triggered by the {@link Tech}.
+     *
+     * @fires Player#textdata
+     * @listens Tech#textdata
+     * @private
+     */
+    handleTechTextData_() {
+      let data = null;
+      if (arguments.length > 1) {
+        data = arguments[1];
+      }
+
+      /**
+       * Fires when we get a textdata event from tech
+       *
+       * @event Player#textdata
+       * @type {Event}
+       */
+      this.trigger('textdata', data);
+    }
+
+    /**
+     * Get object for cached values.
+     *
+     * @return {Object}
+     *         get the current object cache
+     */
+    getCache() {
+      return this.cache_;
+    }
+
+    /**
+     * Resets the internal cache object.
+     *
+     * Using this function outside the player constructor or reset method may
+     * have unintended side-effects.
+     *
+     * @private
+     */
+    resetCache_() {
+      this.cache_ = {
+        // Right now, the currentTime is not _really_ cached because it is always
+        // retrieved from the tech (see: currentTime). However, for completeness,
+        // we set it to zero here to ensure that if we do start actually caching
+        // it, we reset it along with everything else.
+        currentTime: 0,
+        initTime: 0,
+        inactivityTimeout: this.options_.inactivityTimeout,
+        duration: NaN,
+        lastVolume: 1,
+        lastPlaybackRate: this.defaultPlaybackRate(),
+        media: null,
+        src: '',
+        source: {},
+        sources: [],
+        playbackRates: [],
+        volume: 1
+      };
+    }
+
+    /**
+     * Pass values to the playback tech
+     *
+     * @param {string} [method]
+     *        the method to call
+     *
+     * @param {Object} [arg]
+     *        the argument to pass
+     *
+     * @private
+     */
+    techCall_(method, arg) {
+      // If it's not ready yet, call method when it is
+
+      this.ready(function () {
+        if (method in allowedSetters) {
+          return set(this.middleware_, this.tech_, method, arg);
+        } else if (method in allowedMediators) {
+          return mediate(this.middleware_, this.tech_, method, arg);
+        }
+        try {
+          if (this.tech_) {
+            this.tech_[method](arg);
+          }
+        } catch (e) {
+          log$1(e);
+          throw e;
+        }
+      }, true);
+    }
+
+    /**
+     * Mediate attempt to call playback tech method
+     * and return the value of the method called.
+     *
+     * @param {string} method
+     *        Tech method
+     *
+     * @return {*}
+     *         Value returned by the tech method called, undefined if tech
+     *         is not ready or tech method is not present
+     *
+     * @private
+     */
+    techGet_(method) {
+      if (!this.tech_ || !this.tech_.isReady_) {
+        return;
+      }
+      if (method in allowedGetters) {
+        return get(this.middleware_, this.tech_, method);
+      } else if (method in allowedMediators) {
+        return mediate(this.middleware_, this.tech_, method);
+      }
+
+      // Log error when playback tech object is present but method
+      // is undefined or unavailable
+      try {
+        return this.tech_[method]();
+      } catch (e) {
+        // When building additional tech libs, an expected method may not be defined yet
+        if (this.tech_[method] === undefined) {
+          log$1(`Video.js: ${method} method not defined for ${this.techName_} playback technology.`, e);
+          throw e;
+        }
+
+        // When a method isn't available on the object it throws a TypeError
+        if (e.name === 'TypeError') {
+          log$1(`Video.js: ${method} unavailable on ${this.techName_} playback technology element.`, e);
+          this.tech_.isReady_ = false;
+          throw e;
+        }
+
+        // If error unknown, just log and throw
+        log$1(e);
+        throw e;
+      }
+    }
+
+    /**
+     * Attempt to begin playback at the first opportunity.
+     *
+     * @return {Promise|undefined}
+     *         Returns a promise if the browser supports Promises (or one
+     *         was passed in as an option). This promise will be resolved on
+     *         the return value of play. If this is undefined it will fulfill the
+     *         promise chain otherwise the promise chain will be fulfilled when
+     *         the promise from play is fulfilled.
+     */
+    play() {
+      return new Promise(resolve => {
+        this.play_(resolve);
+      });
+    }
+
+    /**
+     * The actual logic for play, takes a callback that will be resolved on the
+     * return value of play. This allows us to resolve to the play promise if there
+     * is one on modern browsers.
+     *
+     * @private
+     * @param {Function} [callback]
+     *        The callback that should be called when the techs play is actually called
+     */
+    play_(callback = silencePromise) {
+      this.playCallbacks_.push(callback);
+      const isSrcReady = Boolean(!this.changingSrc_ && (this.src() || this.currentSrc()));
+      const isSafariOrIOS = Boolean(IS_ANY_SAFARI || IS_IOS);
+
+      // treat calls to play_ somewhat like the `one` event function
+      if (this.waitToPlay_) {
+        this.off(['ready', 'loadstart'], this.waitToPlay_);
+        this.waitToPlay_ = null;
+      }
+
+      // if the player/tech is not ready or the src itself is not ready
+      // queue up a call to play on `ready` or `loadstart`
+      if (!this.isReady_ || !isSrcReady) {
+        this.waitToPlay_ = e => {
+          this.play_();
+        };
+        this.one(['ready', 'loadstart'], this.waitToPlay_);
+
+        // if we are in Safari, there is a high chance that loadstart will trigger after the gesture timeperiod
+        // in that case, we need to prime the video element by calling load so it'll be ready in time
+        if (!isSrcReady && isSafariOrIOS) {
+          this.load();
+        }
+        return;
+      }
+
+      // If the player/tech is ready and we have a source, we can attempt playback.
+      const val = this.techGet_('play');
+
+      // For native playback, reset the progress bar if we get a play call from a replay.
+      const isNativeReplay = isSafariOrIOS && this.hasClass('vjs-ended');
+      if (isNativeReplay) {
+        this.resetProgressBar_();
+      }
+      // play was terminated if the returned value is null
+      if (val === null) {
+        this.runPlayTerminatedQueue_();
+      } else {
+        this.runPlayCallbacks_(val);
+      }
+    }
+
+    /**
+     * These functions will be run when if play is terminated. If play
+     * runPlayCallbacks_ is run these function will not be run. This allows us
+     * to differentiate between a terminated play and an actual call to play.
+     */
+    runPlayTerminatedQueue_() {
+      const queue = this.playTerminatedQueue_.slice(0);
+      this.playTerminatedQueue_ = [];
+      queue.forEach(function (q) {
+        q();
+      });
+    }
+
+    /**
+     * When a callback to play is delayed we have to run these
+     * callbacks when play is actually called on the tech. This function
+     * runs the callbacks that were delayed and accepts the return value
+     * from the tech.
+     *
+     * @param {undefined|Promise} val
+     *        The return value from the tech.
+     */
+    runPlayCallbacks_(val) {
+      const callbacks = this.playCallbacks_.slice(0);
+      this.playCallbacks_ = [];
+      // clear play terminatedQueue since we finished a real play
+      this.playTerminatedQueue_ = [];
+      callbacks.forEach(function (cb) {
+        cb(val);
+      });
+    }
+
+    /**
+     * Pause the video playback
+     */
+    pause() {
+      this.techCall_('pause');
+    }
+
+    /**
+     * Check if the player is paused or has yet to play
+     *
+     * @return {boolean}
+     *         - false: if the media is currently playing
+     *         - true: if media is not currently playing
+     */
+    paused() {
+      // The initial state of paused should be true (in Safari it's actually false)
+      return this.techGet_('paused') === false ? false : true;
+    }
+
+    /**
+     * Get a TimeRange object representing the current ranges of time that the user
+     * has played.
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A time range object that represents all the increments of time that have
+     *         been played.
+     */
+    played() {
+      return this.techGet_('played') || createTimeRanges$1(0, 0);
+    }
+
+    /**
+     * Sets or returns whether or not the user is "scrubbing". Scrubbing is
+     * when the user has clicked the progress bar handle and is
+     * dragging it along the progress bar.
+     *
+     * @param {boolean} [isScrubbing]
+     *        whether the user is or is not scrubbing
+     *
+     * @return {boolean|undefined}
+     *         - The value of scrubbing when getting
+     *         - Nothing when setting
+     */
+    scrubbing(isScrubbing) {
+      if (typeof isScrubbing === 'undefined') {
+        return this.scrubbing_;
+      }
+      this.scrubbing_ = !!isScrubbing;
+      this.techCall_('setScrubbing', this.scrubbing_);
+      if (isScrubbing) {
+        this.addClass('vjs-scrubbing');
+      } else {
+        this.removeClass('vjs-scrubbing');
+      }
+    }
+
+    /**
+     * Get or set the current time (in seconds)
+     *
+     * @param {number|string} [seconds]
+     *        The time to seek to in seconds
+     *
+     * @return {number|undefined}
+     *         - the current time in seconds when getting
+     *         - Nothing when setting
+     */
+    currentTime(seconds) {
+      if (seconds === undefined) {
+        // cache last currentTime and return. default to 0 seconds
+        //
+        // Caching the currentTime is meant to prevent a massive amount of reads on the tech's
+        // currentTime when scrubbing, but may not provide much performance benefit after all.
+        // Should be tested. Also something has to read the actual current time or the cache will
+        // never get updated.
+        this.cache_.currentTime = this.techGet_('currentTime') || 0;
+        return this.cache_.currentTime;
+      }
+      if (seconds < 0) {
+        seconds = 0;
+      }
+      if (!this.isReady_ || this.changingSrc_ || !this.tech_ || !this.tech_.isReady_) {
+        this.cache_.initTime = seconds;
+        this.off('canplay', this.boundApplyInitTime_);
+        this.one('canplay', this.boundApplyInitTime_);
+        return;
+      }
+      this.techCall_('setCurrentTime', seconds);
+      this.cache_.initTime = 0;
+      if (isFinite(seconds)) {
+        this.cache_.currentTime = Number(seconds);
+      }
+    }
+
+    /**
+     * Apply the value of initTime stored in cache as currentTime.
+     *
+     * @private
+     */
+    applyInitTime_() {
+      this.currentTime(this.cache_.initTime);
+    }
+
+    /**
+     * Normally gets the length in time of the video in seconds;
+     * in all but the rarest use cases an argument will NOT be passed to the method
+     *
+     * > **NOTE**: The video must have started loading before the duration can be
+     * known, and depending on preload behaviour may not be known until the video starts
+     * playing.
+     *
+     * @fires Player#durationchange
+     *
+     * @param {number} [seconds]
+     *        The duration of the video to set in seconds
+     *
+     * @return {number|undefined}
+     *         - The duration of the video in seconds when getting
+     *         - Nothing when setting
+     */
+    duration(seconds) {
+      if (seconds === undefined) {
+        // return NaN if the duration is not known
+        return this.cache_.duration !== undefined ? this.cache_.duration : NaN;
+      }
+      seconds = parseFloat(seconds);
+
+      // Standardize on Infinity for signaling video is live
+      if (seconds < 0) {
+        seconds = Infinity;
+      }
+      if (seconds !== this.cache_.duration) {
+        // Cache the last set value for optimized scrubbing
+        this.cache_.duration = seconds;
+        if (seconds === Infinity) {
+          this.addClass('vjs-live');
+        } else {
+          this.removeClass('vjs-live');
+        }
+        if (!isNaN(seconds)) {
+          // Do not fire durationchange unless the duration value is known.
+          // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
+
+          /**
+           * @event Player#durationchange
+           * @type {Event}
+           */
+          this.trigger('durationchange');
+        }
+      }
+    }
+
+    /**
+     * Calculates how much time is left in the video. Not part
+     * of the native video API.
+     *
+     * @return {number}
+     *         The time remaining in seconds
+     */
+    remainingTime() {
+      return this.duration() - this.currentTime();
+    }
+
+    /**
+     * A remaining time function that is intended to be used when
+     * the time is to be displayed directly to the user.
+     *
+     * @return {number}
+     *         The rounded time remaining in seconds
+     */
+    remainingTimeDisplay() {
+      return Math.floor(this.duration()) - Math.floor(this.currentTime());
+    }
+
+    //
+    // Kind of like an array of portions of the video that have been downloaded.
+
+    /**
+     * Get a TimeRange object with an array of the times of the video
+     * that have been downloaded. If you just want the percent of the
+     * video that's been downloaded, use bufferedPercent.
+     *
+     * @see [Buffered Spec]{@link http://dev.w3.org/html5/spec/video.html#dom-media-buffered}
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A mock {@link TimeRanges} object (following HTML spec)
+     */
+    buffered() {
+      let buffered = this.techGet_('buffered');
+      if (!buffered || !buffered.length) {
+        buffered = createTimeRanges$1(0, 0);
+      }
+      return buffered;
+    }
+
+    /**
+     * Get the TimeRanges of the media that are currently available
+     * for seeking to.
+     *
+     * @see [Seekable Spec]{@link https://html.spec.whatwg.org/multipage/media.html#dom-media-seekable}
+     *
+     * @return { import('./utils/time').TimeRange }
+     *         A mock {@link TimeRanges} object (following HTML spec)
+     */
+    seekable() {
+      let seekable = this.techGet_('seekable');
+      if (!seekable || !seekable.length) {
+        seekable = createTimeRanges$1(0, 0);
+      }
+      return seekable;
+    }
+
+    /**
+     * Returns whether the player is in the "seeking" state.
+     *
+     * @return {boolean} True if the player is in the seeking state, false if not.
+     */
+    seeking() {
+      return this.techGet_('seeking');
+    }
+
+    /**
+     * Returns whether the player is in the "ended" state.
+     *
+     * @return {boolean} True if the player is in the ended state, false if not.
+     */
+    ended() {
+      return this.techGet_('ended');
+    }
+
+    /**
+     * Returns the current state of network activity for the element, from
+     * the codes in the list below.
+     * - NETWORK_EMPTY (numeric value 0)
+     *   The element has not yet been initialised. All attributes are in
+     *   their initial states.
+     * - NETWORK_IDLE (numeric value 1)
+     *   The element's resource selection algorithm is active and has
+     *   selected a resource, but it is not actually using the network at
+     *   this time.
+     * - NETWORK_LOADING (numeric value 2)
+     *   The user agent is actively trying to download data.
+     * - NETWORK_NO_SOURCE (numeric value 3)
+     *   The element's resource selection algorithm is active, but it has
+     *   not yet found a resource to use.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states
+     * @return {number} the current network activity state
+     */
+    networkState() {
+      return this.techGet_('networkState');
+    }
+
+    /**
+     * Returns a value that expresses the current state of the element
+     * with respect to rendering the current playback position, from the
+     * codes in the list below.
+     * - HAVE_NOTHING (numeric value 0)
+     *   No information regarding the media resource is available.
+     * - HAVE_METADATA (numeric value 1)
+     *   Enough of the resource has been obtained that the duration of the
+     *   resource is available.
+     * - HAVE_CURRENT_DATA (numeric value 2)
+     *   Data for the immediate current playback position is available.
+     * - HAVE_FUTURE_DATA (numeric value 3)
+     *   Data for the immediate current playback position is available, as
+     *   well as enough data for the user agent to advance the current
+     *   playback position in the direction of playback.
+     * - HAVE_ENOUGH_DATA (numeric value 4)
+     *   The user agent estimates that enough data is available for
+     *   playback to proceed uninterrupted.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate
+     * @return {number} the current playback rendering state
+     */
+    readyState() {
+      return this.techGet_('readyState');
+    }
+
+    /**
+     * Get the percent (as a decimal) of the video that's been downloaded.
+     * This method is not a part of the native HTML video API.
+     *
+     * @return {number}
+     *         A decimal between 0 and 1 representing the percent
+     *         that is buffered 0 being 0% and 1 being 100%
+     */
+    bufferedPercent() {
+      return bufferedPercent(this.buffered(), this.duration());
+    }
+
+    /**
+     * Get the ending time of the last buffered time range
+     * This is used in the progress bar to encapsulate all time ranges.
+     *
+     * @return {number}
+     *         The end of the last buffered time range
+     */
+    bufferedEnd() {
+      const buffered = this.buffered();
+      const duration = this.duration();
+      let end = buffered.end(buffered.length - 1);
+      if (end > duration) {
+        end = duration;
+      }
+      return end;
+    }
+
+    /**
+     * Get or set the current volume of the media
+     *
+     * @param  {number} [percentAsDecimal]
+     *         The new volume as a decimal percent:
+     *         - 0 is muted/0%/off
+     *         - 1.0 is 100%/full
+     *         - 0.5 is half volume or 50%
+     *
+     * @return {number|undefined}
+     *         The current volume as a percent when getting
+     */
+    volume(percentAsDecimal) {
+      let vol;
+      if (percentAsDecimal !== undefined) {
+        // Force value to between 0 and 1
+        vol = Math.max(0, Math.min(1, percentAsDecimal));
+        this.cache_.volume = vol;
+        this.techCall_('setVolume', vol);
+        if (vol > 0) {
+          this.lastVolume_(vol);
+        }
+        return;
+      }
+
+      // Default to 1 when returning current volume.
+      vol = parseFloat(this.techGet_('volume'));
+      return isNaN(vol) ? 1 : vol;
+    }
+
+    /**
+     * Get the current muted state, or turn mute on or off
+     *
+     * @param {boolean} [muted]
+     *        - true to mute
+     *        - false to unmute
+     *
+     * @return {boolean|undefined}
+     *         - true if mute is on and getting
+     *         - false if mute is off and getting
+     *         - nothing if setting
+     */
+    muted(muted) {
+      if (muted !== undefined) {
+        this.techCall_('setMuted', muted);
+        return;
+      }
+      return this.techGet_('muted') || false;
+    }
+
+    /**
+     * Get the current defaultMuted state, or turn defaultMuted on or off. defaultMuted
+     * indicates the state of muted on initial playback.
+     *
+     * ```js
+     *   var myPlayer = videojs('some-player-id');
+     *
+     *   myPlayer.src("http://www.example.com/path/to/video.mp4");
+     *
+     *   // get, should be false
+     *   console.log(myPlayer.defaultMuted());
+     *   // set to true
+     *   myPlayer.defaultMuted(true);
+     *   // get should be true
+     *   console.log(myPlayer.defaultMuted());
+     * ```
+     *
+     * @param {boolean} [defaultMuted]
+     *        - true to mute
+     *        - false to unmute
+     *
+     * @return {boolean|undefined}
+     *         - true if defaultMuted is on and getting
+     *         - false if defaultMuted is off and getting
+     *         - Nothing when setting
+     */
+    defaultMuted(defaultMuted) {
+      if (defaultMuted !== undefined) {
+        this.techCall_('setDefaultMuted', defaultMuted);
+      }
+      return this.techGet_('defaultMuted') || false;
+    }
+
+    /**
+     * Get the last volume, or set it
+     *
+     * @param  {number} [percentAsDecimal]
+     *         The new last volume as a decimal percent:
+     *         - 0 is muted/0%/off
+     *         - 1.0 is 100%/full
+     *         - 0.5 is half volume or 50%
+     *
+     * @return {number|undefined}
+     *         - The current value of lastVolume as a percent when getting
+     *         - Nothing when setting
+     *
+     * @private
+     */
+    lastVolume_(percentAsDecimal) {
+      if (percentAsDecimal !== undefined && percentAsDecimal !== 0) {
+        this.cache_.lastVolume = percentAsDecimal;
+        return;
+      }
+      return this.cache_.lastVolume;
+    }
+
+    /**
+     * Check if current tech can support native fullscreen
+     * (e.g. with built in controls like iOS)
+     *
+     * @return {boolean}
+     *         if native fullscreen is supported
+     */
+    supportsFullScreen() {
+      return this.techGet_('supportsFullScreen') || false;
+    }
+
+    /**
+     * Check if the player is in fullscreen mode or tell the player that it
+     * is or is not in fullscreen mode.
+     *
+     * > NOTE: As of the latest HTML5 spec, isFullscreen is no longer an official
+     * property and instead document.fullscreenElement is used. But isFullscreen is
+     * still a valuable property for internal player workings.
+     *
+     * @param  {boolean} [isFS]
+     *         Set the players current fullscreen state
+     *
+     * @return {boolean|undefined}
+     *         - true if fullscreen is on and getting
+     *         - false if fullscreen is off and getting
+     *         - Nothing when setting
+     */
+    isFullscreen(isFS) {
+      if (isFS !== undefined) {
+        const oldValue = this.isFullscreen_;
+        this.isFullscreen_ = Boolean(isFS);
+
+        // if we changed fullscreen state and we're in prefixed mode, trigger fullscreenchange
+        // this is the only place where we trigger fullscreenchange events for older browsers
+        // fullWindow mode is treated as a prefixed event and will get a fullscreenchange event as well
+        if (this.isFullscreen_ !== oldValue && this.fsApi_.prefixed) {
+          /**
+             * @event Player#fullscreenchange
+             * @type {Event}
+             */
+          this.trigger('fullscreenchange');
+        }
+        this.toggleFullscreenClass_();
+        return;
+      }
+      return this.isFullscreen_;
+    }
+
+    /**
+     * Increase the size of the video to full screen
+     * In some browsers, full screen is not supported natively, so it enters
+     * "full window mode", where the video fills the browser window.
+     * In browsers and devices that support native full screen, sometimes the
+     * browser's default controls will be shown, and not the Video.js custom skin.
+     * This includes most mobile devices (iOS, Android) and older versions of
+     * Safari.
+     *
+     * @param  {Object} [fullscreenOptions]
+     *         Override the player fullscreen options
+     *
+     * @fires Player#fullscreenchange
+     */
+    requestFullscreen(fullscreenOptions) {
+      if (this.isInPictureInPicture()) {
+        this.exitPictureInPicture();
+      }
+      const self = this;
+      return new Promise((resolve, reject) => {
+        function offHandler() {
+          self.off('fullscreenerror', errorHandler);
+          self.off('fullscreenchange', changeHandler);
+        }
+        function changeHandler() {
+          offHandler();
+          resolve();
+        }
+        function errorHandler(e, err) {
+          offHandler();
+          reject(err);
+        }
+        self.one('fullscreenchange', changeHandler);
+        self.one('fullscreenerror', errorHandler);
+        const promise = self.requestFullscreenHelper_(fullscreenOptions);
+        if (promise) {
+          promise.then(offHandler, offHandler);
+          promise.then(resolve, reject);
+        }
+      });
+    }
+    requestFullscreenHelper_(fullscreenOptions) {
+      let fsOptions;
+
+      // Only pass fullscreen options to requestFullscreen in spec-compliant browsers.
+      // Use defaults or player configured option unless passed directly to this method.
+      if (!this.fsApi_.prefixed) {
+        fsOptions = this.options_.fullscreen && this.options_.fullscreen.options || {};
+        if (fullscreenOptions !== undefined) {
+          fsOptions = fullscreenOptions;
+        }
+      }
+
+      // This method works as follows:
+      // 1. if a fullscreen api is available, use it
+      //   1. call requestFullscreen with potential options
+      //   2. if we got a promise from above, use it to update isFullscreen()
+      // 2. otherwise, if the tech supports fullscreen, call `enterFullScreen` on it.
+      //   This is particularly used for iPhone, older iPads, and non-safari browser on iOS.
+      // 3. otherwise, use "fullWindow" mode
+      if (this.fsApi_.requestFullscreen) {
+        const promise = this.el_[this.fsApi_.requestFullscreen](fsOptions);
+
+        // Even on browsers with promise support this may not return a promise
+        if (promise) {
+          promise.then(() => this.isFullscreen(true), () => this.isFullscreen(false));
+        }
+        return promise;
+      } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) {
+        // we can't take the video.js controls fullscreen but we can go fullscreen
+        // with native controls
+        this.techCall_('enterFullScreen');
+      } else {
+        // fullscreen isn't supported so we'll just stretch the video element to
+        // fill the viewport
+        this.enterFullWindow();
+      }
+    }
+
+    /**
+     * Return the video to its normal size after having been in full screen mode
+     *
+     * @fires Player#fullscreenchange
+     */
+    exitFullscreen() {
+      const self = this;
+      return new Promise((resolve, reject) => {
+        function offHandler() {
+          self.off('fullscreenerror', errorHandler);
+          self.off('fullscreenchange', changeHandler);
+        }
+        function changeHandler() {
+          offHandler();
+          resolve();
+        }
+        function errorHandler(e, err) {
+          offHandler();
+          reject(err);
+        }
+        self.one('fullscreenchange', changeHandler);
+        self.one('fullscreenerror', errorHandler);
+        const promise = self.exitFullscreenHelper_();
+        if (promise) {
+          promise.then(offHandler, offHandler);
+          // map the promise to our resolve/reject methods
+          promise.then(resolve, reject);
+        }
+      });
+    }
+    exitFullscreenHelper_() {
+      if (this.fsApi_.requestFullscreen) {
+        const promise = document[this.fsApi_.exitFullscreen]();
+
+        // Even on browsers with promise support this may not return a promise
+        if (promise) {
+          // we're splitting the promise here, so, we want to catch the
+          // potential error so that this chain doesn't have unhandled errors
+          silencePromise(promise.then(() => this.isFullscreen(false)));
+        }
+        return promise;
+      } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) {
+        this.techCall_('exitFullScreen');
+      } else {
+        this.exitFullWindow();
+      }
+    }
+
+    /**
+     * When fullscreen isn't supported we can stretch the
+     * video container to as wide as the browser will let us.
+     *
+     * @fires Player#enterFullWindow
+     */
+    enterFullWindow() {
+      this.isFullscreen(true);
+      this.isFullWindow = true;
+
+      // Storing original doc overflow value to return to when fullscreen is off
+      this.docOrigOverflow = document.documentElement.style.overflow;
+
+      // Add listener for esc key to exit fullscreen
+      on(document, 'keydown', this.boundFullWindowOnEscKey_);
+
+      // Hide any scroll bars
+      document.documentElement.style.overflow = 'hidden';
+
+      // Apply fullscreen styles
+      addClass(document.body, 'vjs-full-window');
+
+      /**
+       * @event Player#enterFullWindow
+       * @type {Event}
+       */
+      this.trigger('enterFullWindow');
+    }
+
+    /**
+     * Check for call to either exit full window or
+     * full screen on ESC key
+     *
+     * @param {string} event
+     *        Event to check for key press
+     */
+    fullWindowOnEscKey(event) {
+      if (keycode.isEventKey(event, 'Esc')) {
+        if (this.isFullscreen() === true) {
+          if (!this.isFullWindow) {
+            this.exitFullscreen();
+          } else {
+            this.exitFullWindow();
+          }
+        }
+      }
+    }
+
+    /**
+     * Exit full window
+     *
+     * @fires Player#exitFullWindow
+     */
+    exitFullWindow() {
+      this.isFullscreen(false);
+      this.isFullWindow = false;
+      off(document, 'keydown', this.boundFullWindowOnEscKey_);
+
+      // Unhide scroll bars.
+      document.documentElement.style.overflow = this.docOrigOverflow;
+
+      // Remove fullscreen styles
+      removeClass(document.body, 'vjs-full-window');
+
+      // Resize the box, controller, and poster to original sizes
+      // this.positionAll();
+      /**
+       * @event Player#exitFullWindow
+       * @type {Event}
+       */
+      this.trigger('exitFullWindow');
+    }
+
+    /**
+     * Get or set disable Picture-in-Picture mode.
+     *
+     * @param {boolean} [value]
+     *                  - true will disable Picture-in-Picture mode
+     *                  - false will enable Picture-in-Picture mode
+     */
+    disablePictureInPicture(value) {
+      if (value === undefined) {
+        return this.techGet_('disablePictureInPicture');
+      }
+      this.techCall_('setDisablePictureInPicture', value);
+      this.options_.disablePictureInPicture = value;
+      this.trigger('disablepictureinpicturechanged');
+    }
+
+    /**
+     * Check if the player is in Picture-in-Picture mode or tell the player that it
+     * is or is not in Picture-in-Picture mode.
+     *
+     * @param  {boolean} [isPiP]
+     *         Set the players current Picture-in-Picture state
+     *
+     * @return {boolean|undefined}
+     *         - true if Picture-in-Picture is on and getting
+     *         - false if Picture-in-Picture is off and getting
+     *         - nothing if setting
+     */
+    isInPictureInPicture(isPiP) {
+      if (isPiP !== undefined) {
+        this.isInPictureInPicture_ = !!isPiP;
+        this.togglePictureInPictureClass_();
+        return;
+      }
+      return !!this.isInPictureInPicture_;
+    }
+
+    /**
+     * Create a floating video window always on top of other windows so that users may
+     * continue consuming media while they interact with other content sites, or
+     * applications on their device.
+     *
+     * This can use document picture-in-picture or element picture in picture
+     *
+     * Set `enableDocumentPictureInPicture` to `true` to use docPiP on a supported browser
+     * Else set `disablePictureInPicture` to `false` to disable elPiP on a supported browser
+     *
+     *
+     * @see [Spec]{@link https://w3c.github.io/picture-in-picture/}
+     * @see [Spec]{@link https://wicg.github.io/document-picture-in-picture/}
+     *
+     * @fires Player#enterpictureinpicture
+     *
+     * @return {Promise}
+     *         A promise with a Picture-in-Picture window.
+     */
+    requestPictureInPicture() {
+      if (this.options_.enableDocumentPictureInPicture && window.documentPictureInPicture) {
+        const pipContainer = document.createElement(this.el().tagName);
+        pipContainer.classList = this.el().classList;
+        pipContainer.classList.add('vjs-pip-container');
+        if (this.posterImage) {
+          pipContainer.appendChild(this.posterImage.el().cloneNode(true));
+        }
+        if (this.titleBar) {
+          pipContainer.appendChild(this.titleBar.el().cloneNode(true));
+        }
+        pipContainer.appendChild(createEl('p', {
+          className: 'vjs-pip-text'
+        }, {}, this.localize('Playing in picture-in-picture')));
+        return window.documentPictureInPicture.requestWindow({
+          // The aspect ratio won't be correct, Chrome bug https://crbug.com/1407629
+          width: this.videoWidth(),
+          height: this.videoHeight()
+        }).then(pipWindow => {
+          copyStyleSheetsToWindow(pipWindow);
+          this.el_.parentNode.insertBefore(pipContainer, this.el_);
+          pipWindow.document.body.appendChild(this.el_);
+          pipWindow.document.body.classList.add('vjs-pip-window');
+          this.player_.isInPictureInPicture(true);
+          this.player_.trigger({
+            type: 'enterpictureinpicture',
+            pipWindow
+          });
+
+          // Listen for the PiP closing event to move the video back.
+          pipWindow.addEventListener('pagehide', event => {
+            const pipVideo = event.target.querySelector('.video-js');
+            pipContainer.parentNode.replaceChild(pipVideo, pipContainer);
+            this.player_.isInPictureInPicture(false);
+            this.player_.trigger('leavepictureinpicture');
+          });
+          return pipWindow;
+        });
+      }
+      if ('pictureInPictureEnabled' in document && this.disablePictureInPicture() === false) {
+        /**
+         * This event fires when the player enters picture in picture mode
+         *
+         * @event Player#enterpictureinpicture
+         * @type {Event}
+         */
+        return this.techGet_('requestPictureInPicture');
+      }
+      return Promise.reject('No PiP mode is available');
+    }
+
+    /**
+     * Exit Picture-in-Picture mode.
+     *
+     * @see [Spec]{@link https://wicg.github.io/picture-in-picture}
+     *
+     * @fires Player#leavepictureinpicture
+     *
+     * @return {Promise}
+     *         A promise.
+     */
+    exitPictureInPicture() {
+      if (window.documentPictureInPicture && window.documentPictureInPicture.window) {
+        // With documentPictureInPicture, Player#leavepictureinpicture is fired in the pagehide handler
+        window.documentPictureInPicture.window.close();
+        return Promise.resolve();
+      }
+      if ('pictureInPictureEnabled' in document) {
+        /**
+         * This event fires when the player leaves picture in picture mode
+         *
+         * @event Player#leavepictureinpicture
+         * @type {Event}
+         */
+        return document.exitPictureInPicture();
+      }
+    }
+
+    /**
+     * Called when this Player has focus and a key gets pressed down, or when
+     * any Component of this player receives a key press that it doesn't handle.
+     * This allows player-wide hotkeys (either as defined below, or optionally
+     * by an external function).
+     *
+     * @param {KeyboardEvent} event
+     *        The `keydown` event that caused this function to be called.
+     *
+     * @listens keydown
+     */
+    handleKeyDown(event) {
+      const {
+        userActions
+      } = this.options_;
+
+      // Bail out if hotkeys are not configured.
+      if (!userActions || !userActions.hotkeys) {
+        return;
+      }
+
+      // Function that determines whether or not to exclude an element from
+      // hotkeys handling.
+      const excludeElement = el => {
+        const tagName = el.tagName.toLowerCase();
+
+        // The first and easiest test is for `contenteditable` elements.
+        if (el.isContentEditable) {
+          return true;
+        }
+
+        // Inputs matching these types will still trigger hotkey handling as
+        // they are not text inputs.
+        const allowedInputTypes = ['button', 'checkbox', 'hidden', 'radio', 'reset', 'submit'];
+        if (tagName === 'input') {
+          return allowedInputTypes.indexOf(el.type) === -1;
+        }
+
+        // The final test is by tag name. These tags will be excluded entirely.
+        const excludedTags = ['textarea'];
+        return excludedTags.indexOf(tagName) !== -1;
+      };
+
+      // Bail out if the user is focused on an interactive form element.
+      if (excludeElement(this.el_.ownerDocument.activeElement)) {
+        return;
+      }
+      if (typeof userActions.hotkeys === 'function') {
+        userActions.hotkeys.call(this, event);
+      } else {
+        this.handleHotkeys(event);
+      }
+    }
+
+    /**
+     * Called when this Player receives a hotkey keydown event.
+     * Supported player-wide hotkeys are:
+     *
+     *   f          - toggle fullscreen
+     *   m          - toggle mute
+     *   k or Space - toggle play/pause
+     *
+     * @param {Event} event
+     *        The `keydown` event that caused this function to be called.
+     */
+    handleHotkeys(event) {
+      const hotkeys = this.options_.userActions ? this.options_.userActions.hotkeys : {};
+
+      // set fullscreenKey, muteKey, playPauseKey from `hotkeys`, use defaults if not set
+      const {
+        fullscreenKey = keydownEvent => keycode.isEventKey(keydownEvent, 'f'),
+        muteKey = keydownEvent => keycode.isEventKey(keydownEvent, 'm'),
+        playPauseKey = keydownEvent => keycode.isEventKey(keydownEvent, 'k') || keycode.isEventKey(keydownEvent, 'Space')
+      } = hotkeys;
+      if (fullscreenKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const FSToggle = Component$1.getComponent('FullscreenToggle');
+        if (document[this.fsApi_.fullscreenEnabled] !== false) {
+          FSToggle.prototype.handleClick.call(this, event);
+        }
+      } else if (muteKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const MuteToggle = Component$1.getComponent('MuteToggle');
+        MuteToggle.prototype.handleClick.call(this, event);
+      } else if (playPauseKey.call(this, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const PlayToggle = Component$1.getComponent('PlayToggle');
+        PlayToggle.prototype.handleClick.call(this, event);
+      }
+    }
+
+    /**
+     * Check whether the player can play a given mimetype
+     *
+     * @see https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype
+     *
+     * @param {string} type
+     *        The mimetype to check
+     *
+     * @return {string}
+     *         'probably', 'maybe', or '' (empty string)
+     */
+    canPlayType(type) {
+      let can;
+
+      // Loop through each playback technology in the options order
+      for (let i = 0, j = this.options_.techOrder; i < j.length; i++) {
+        const techName = j[i];
+        let tech = Tech.getTech(techName);
+
+        // Support old behavior of techs being registered as components.
+        // Remove once that deprecated behavior is removed.
+        if (!tech) {
+          tech = Component$1.getComponent(techName);
+        }
+
+        // Check if the current tech is defined before continuing
+        if (!tech) {
+          log$1.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+          continue;
+        }
+
+        // Check if the browser supports this technology
+        if (tech.isSupported()) {
+          can = tech.canPlayType(type);
+          if (can) {
+            return can;
+          }
+        }
+      }
+      return '';
+    }
+
+    /**
+     * Select source based on tech-order or source-order
+     * Uses source-order selection if `options.sourceOrder` is truthy. Otherwise,
+     * defaults to tech-order selection
+     *
+     * @param {Array} sources
+     *        The sources for a media asset
+     *
+     * @return {Object|boolean}
+     *         Object of source and tech order or false
+     */
+    selectSource(sources) {
+      // Get only the techs specified in `techOrder` that exist and are supported by the
+      // current platform
+      const techs = this.options_.techOrder.map(techName => {
+        return [techName, Tech.getTech(techName)];
+      }).filter(([techName, tech]) => {
+        // Check if the current tech is defined before continuing
+        if (tech) {
+          // Check if the browser supports this technology
+          return tech.isSupported();
+        }
+        log$1.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+        return false;
+      });
+
+      // Iterate over each `innerArray` element once per `outerArray` element and execute
+      // `tester` with both. If `tester` returns a non-falsy value, exit early and return
+      // that value.
+      const findFirstPassingTechSourcePair = function (outerArray, innerArray, tester) {
+        let found;
+        outerArray.some(outerChoice => {
+          return innerArray.some(innerChoice => {
+            found = tester(outerChoice, innerChoice);
+            if (found) {
+              return true;
+            }
+          });
+        });
+        return found;
+      };
+      let foundSourceAndTech;
+      const flip = fn => (a, b) => fn(b, a);
+      const finder = ([techName, tech], source) => {
+        if (tech.canPlaySource(source, this.options_[techName.toLowerCase()])) {
+          return {
+            source,
+            tech: techName
+          };
+        }
+      };
+
+      // Depending on the truthiness of `options.sourceOrder`, we swap the order of techs and sources
+      // to select from them based on their priority.
+      if (this.options_.sourceOrder) {
+        // Source-first ordering
+        foundSourceAndTech = findFirstPassingTechSourcePair(sources, techs, flip(finder));
+      } else {
+        // Tech-first ordering
+        foundSourceAndTech = findFirstPassingTechSourcePair(techs, sources, finder);
+      }
+      return foundSourceAndTech || false;
+    }
+
+    /**
+     * Executes source setting and getting logic
+     *
+     * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+     *        A SourceObject, an array of SourceObjects, or a string referencing
+     *        a URL to a media source. It is _highly recommended_ that an object
+     *        or array of objects is used here, so that source selection
+     *        algorithms can take the `type` into account.
+     *
+     *        If not provided, this method acts as a getter.
+     * @param {boolean} [isRetry]
+     *        Indicates whether this is being called internally as a result of a retry
+     *
+     * @return {string|undefined}
+     *         If the `source` argument is missing, returns the current source
+     *         URL. Otherwise, returns nothing/undefined.
+     */
+    handleSrc_(source, isRetry) {
+      // getter usage
+      if (typeof source === 'undefined') {
+        return this.cache_.src || '';
+      }
+
+      // Reset retry behavior for new source
+      if (this.resetRetryOnError_) {
+        this.resetRetryOnError_();
+      }
+
+      // filter out invalid sources and turn our source into
+      // an array of source objects
+      const sources = filterSource(source);
+
+      // if a source was passed in then it is invalid because
+      // it was filtered to a zero length Array. So we have to
+      // show an error
+      if (!sources.length) {
+        this.setTimeout(function () {
+          this.error({
+            code: 4,
+            message: this.options_.notSupportedMessage
+          });
+        }, 0);
+        return;
+      }
+
+      // initial sources
+      this.changingSrc_ = true;
+
+      // Only update the cached source list if we are not retrying a new source after error,
+      // since in that case we want to include the failed source(s) in the cache
+      if (!isRetry) {
+        this.cache_.sources = sources;
+      }
+      this.updateSourceCaches_(sources[0]);
+
+      // middlewareSource is the source after it has been changed by middleware
+      setSource(this, sources[0], (middlewareSource, mws) => {
+        this.middleware_ = mws;
+
+        // since sourceSet is async we have to update the cache again after we select a source since
+        // the source that is selected could be out of order from the cache update above this callback.
+        if (!isRetry) {
+          this.cache_.sources = sources;
+        }
+        this.updateSourceCaches_(middlewareSource);
+        const err = this.src_(middlewareSource);
+        if (err) {
+          if (sources.length > 1) {
+            return this.handleSrc_(sources.slice(1));
+          }
+          this.changingSrc_ = false;
+
+          // We need to wrap this in a timeout to give folks a chance to add error event handlers
+          this.setTimeout(function () {
+            this.error({
+              code: 4,
+              message: this.options_.notSupportedMessage
+            });
+          }, 0);
+
+          // we could not find an appropriate tech, but let's still notify the delegate that this is it
+          // this needs a better comment about why this is needed
+          this.triggerReady();
+          return;
+        }
+        setTech(mws, this.tech_);
+      });
+
+      // Try another available source if this one fails before playback.
+      if (sources.length > 1) {
+        const retry = () => {
+          // Remove the error modal
+          this.error(null);
+          this.handleSrc_(sources.slice(1), true);
+        };
+        const stopListeningForErrors = () => {
+          this.off('error', retry);
+        };
+        this.one('error', retry);
+        this.one('playing', stopListeningForErrors);
+        this.resetRetryOnError_ = () => {
+          this.off('error', retry);
+          this.off('playing', stopListeningForErrors);
+        };
+      }
+    }
+
+    /**
+     * Get or set the video source.
+     *
+     * @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
+     *        A SourceObject, an array of SourceObjects, or a string referencing
+     *        a URL to a media source. It is _highly recommended_ that an object
+     *        or array of objects is used here, so that source selection
+     *        algorithms can take the `type` into account.
+     *
+     *        If not provided, this method acts as a getter.
+     *
+     * @return {string|undefined}
+     *         If the `source` argument is missing, returns the current source
+     *         URL. Otherwise, returns nothing/undefined.
+     */
+    src(source) {
+      return this.handleSrc_(source, false);
+    }
+
+    /**
+     * Set the source object on the tech, returns a boolean that indicates whether
+     * there is a tech that can play the source or not
+     *
+     * @param {Tech~SourceObject} source
+     *        The source object to set on the Tech
+     *
+     * @return {boolean}
+     *         - True if there is no Tech to playback this source
+     *         - False otherwise
+     *
+     * @private
+     */
+    src_(source) {
+      const sourceTech = this.selectSource([source]);
+      if (!sourceTech) {
+        return true;
+      }
+      if (!titleCaseEquals(sourceTech.tech, this.techName_)) {
+        this.changingSrc_ = true;
+        // load this technology with the chosen source
+        this.loadTech_(sourceTech.tech, sourceTech.source);
+        this.tech_.ready(() => {
+          this.changingSrc_ = false;
+        });
+        return false;
+      }
+
+      // wait until the tech is ready to set the source
+      // and set it synchronously if possible (#2326)
+      this.ready(function () {
+        // The setSource tech method was added with source handlers
+        // so older techs won't support it
+        // We need to check the direct prototype for the case where subclasses
+        // of the tech do not support source handlers
+        if (this.tech_.constructor.prototype.hasOwnProperty('setSource')) {
+          this.techCall_('setSource', source);
+        } else {
+          this.techCall_('src', source.src);
+        }
+        this.changingSrc_ = false;
+      }, true);
+      return false;
+    }
+
+    /**
+     * Begin loading the src data.
+     */
+    load() {
+      // Workaround to use the load method with the VHS.
+      // Does not cover the case when the load method is called directly from the mediaElement.
+      if (this.tech_ && this.tech_.vhs) {
+        this.src(this.currentSource());
+        return;
+      }
+      this.techCall_('load');
+    }
+
+    /**
+     * Reset the player. Loads the first tech in the techOrder,
+     * removes all the text tracks in the existing `tech`,
+     * and calls `reset` on the `tech`.
+     */
+    reset() {
+      if (this.paused()) {
+        this.doReset_();
+      } else {
+        const playPromise = this.play();
+        silencePromise(playPromise.then(() => this.doReset_()));
+      }
+    }
+    doReset_() {
+      if (this.tech_) {
+        this.tech_.clearTracks('text');
+      }
+      this.removeClass('vjs-playing');
+      this.addClass('vjs-paused');
+      this.resetCache_();
+      this.poster('');
+      this.loadTech_(this.options_.techOrder[0], null);
+      this.techCall_('reset');
+      this.resetControlBarUI_();
+      this.error(null);
+      if (this.titleBar) {
+        this.titleBar.update({
+          title: undefined,
+          description: undefined
+        });
+      }
+      if (isEvented(this)) {
+        this.trigger('playerreset');
+      }
+    }
+
+    /**
+     * Reset Control Bar's UI by calling sub-methods that reset
+     * all of Control Bar's components
+     */
+    resetControlBarUI_() {
+      this.resetProgressBar_();
+      this.resetPlaybackRate_();
+      this.resetVolumeBar_();
+    }
+
+    /**
+     * Reset tech's progress so progress bar is reset in the UI
+     */
+    resetProgressBar_() {
+      this.currentTime(0);
+      const {
+        currentTimeDisplay,
+        durationDisplay,
+        progressControl,
+        remainingTimeDisplay
+      } = this.controlBar || {};
+      const {
+        seekBar
+      } = progressControl || {};
+      if (currentTimeDisplay) {
+        currentTimeDisplay.updateContent();
+      }
+      if (durationDisplay) {
+        durationDisplay.updateContent();
+      }
+      if (remainingTimeDisplay) {
+        remainingTimeDisplay.updateContent();
+      }
+      if (seekBar) {
+        seekBar.update();
+        if (seekBar.loadProgressBar) {
+          seekBar.loadProgressBar.update();
+        }
+      }
+    }
+
+    /**
+     * Reset Playback ratio
+     */
+    resetPlaybackRate_() {
+      this.playbackRate(this.defaultPlaybackRate());
+      this.handleTechRateChange_();
+    }
+
+    /**
+     * Reset Volume bar
+     */
+    resetVolumeBar_() {
+      this.volume(1.0);
+      this.trigger('volumechange');
+    }
+
+    /**
+     * Returns all of the current source objects.
+     *
+     * @return {Tech~SourceObject[]}
+     *         The current source objects
+     */
+    currentSources() {
+      const source = this.currentSource();
+      const sources = [];
+
+      // assume `{}` or `{ src }`
+      if (Object.keys(source).length !== 0) {
+        sources.push(source);
+      }
+      return this.cache_.sources || sources;
+    }
+
+    /**
+     * Returns the current source object.
+     *
+     * @return {Tech~SourceObject}
+     *         The current source object
+     */
+    currentSource() {
+      return this.cache_.source || {};
+    }
+
+    /**
+     * Returns the fully qualified URL of the current source value e.g. http://mysite.com/video.mp4
+     * Can be used in conjunction with `currentType` to assist in rebuilding the current source object.
+     *
+     * @return {string}
+     *         The current source
+     */
+    currentSrc() {
+      return this.currentSource() && this.currentSource().src || '';
+    }
+
+    /**
+     * Get the current source type e.g. video/mp4
+     * This can allow you rebuild the current source object so that you could load the same
+     * source and tech later
+     *
+     * @return {string}
+     *         The source MIME type
+     */
+    currentType() {
+      return this.currentSource() && this.currentSource().type || '';
+    }
+
+    /**
+     * Get or set the preload attribute
+     *
+     * @param {'none'|'auto'|'metadata'} [value]
+     *        Preload mode to pass to tech
+     *
+     * @return {string|undefined}
+     *         - The preload attribute value when getting
+     *         - Nothing when setting
+     */
+    preload(value) {
+      if (value !== undefined) {
+        this.techCall_('setPreload', value);
+        this.options_.preload = value;
+        return;
+      }
+      return this.techGet_('preload');
+    }
+
+    /**
+     * Get or set the autoplay option. When this is a boolean it will
+     * modify the attribute on the tech. When this is a string the attribute on
+     * the tech will be removed and `Player` will handle autoplay on loadstarts.
+     *
+     * @param {boolean|'play'|'muted'|'any'} [value]
+     *        - true: autoplay using the browser behavior
+     *        - false: do not autoplay
+     *        - 'play': call play() on every loadstart
+     *        - 'muted': call muted() then play() on every loadstart
+     *        - 'any': call play() on every loadstart. if that fails call muted() then play().
+     *        - *: values other than those listed here will be set `autoplay` to true
+     *
+     * @return {boolean|string|undefined}
+     *         - The current value of autoplay when getting
+     *         - Nothing when setting
+     */
+    autoplay(value) {
+      // getter usage
+      if (value === undefined) {
+        return this.options_.autoplay || false;
+      }
+      let techAutoplay;
+
+      // if the value is a valid string set it to that, or normalize `true` to 'play', if need be
+      if (typeof value === 'string' && /(any|play|muted)/.test(value) || value === true && this.options_.normalizeAutoplay) {
+        this.options_.autoplay = value;
+        this.manualAutoplay_(typeof value === 'string' ? value : 'play');
+        techAutoplay = false;
+
+        // any falsy value sets autoplay to false in the browser,
+        // lets do the same
+      } else if (!value) {
+        this.options_.autoplay = false;
+
+        // any other value (ie truthy) sets autoplay to true
+      } else {
+        this.options_.autoplay = true;
+      }
+      techAutoplay = typeof techAutoplay === 'undefined' ? this.options_.autoplay : techAutoplay;
+
+      // if we don't have a tech then we do not queue up
+      // a setAutoplay call on tech ready. We do this because the
+      // autoplay option will be passed in the constructor and we
+      // do not need to set it twice
+      if (this.tech_) {
+        this.techCall_('setAutoplay', techAutoplay);
+      }
+    }
+
+    /**
+     * Set or unset the playsinline attribute.
+     * Playsinline tells the browser that non-fullscreen playback is preferred.
+     *
+     * @param {boolean} [value]
+     *        - true means that we should try to play inline by default
+     *        - false means that we should use the browser's default playback mode,
+     *          which in most cases is inline. iOS Safari is a notable exception
+     *          and plays fullscreen by default.
+     *
+     * @return {string|undefined}
+     *         - the current value of playsinline
+     *         - Nothing when setting
+     *
+     * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
+     */
+    playsinline(value) {
+      if (value !== undefined) {
+        this.techCall_('setPlaysinline', value);
+        this.options_.playsinline = value;
+      }
+      return this.techGet_('playsinline');
+    }
+
+    /**
+     * Get or set the loop attribute on the video element.
+     *
+     * @param {boolean} [value]
+     *        - true means that we should loop the video
+     *        - false means that we should not loop the video
+     *
+     * @return {boolean|undefined}
+     *         - The current value of loop when getting
+     *         - Nothing when setting
+     */
+    loop(value) {
+      if (value !== undefined) {
+        this.techCall_('setLoop', value);
+        this.options_.loop = value;
+        return;
+      }
+      return this.techGet_('loop');
+    }
+
+    /**
+     * Get or set the poster image source url
+     *
+     * @fires Player#posterchange
+     *
+     * @param {string} [src]
+     *        Poster image source URL
+     *
+     * @return {string|undefined}
+     *         - The current value of poster when getting
+     *         - Nothing when setting
+     */
+    poster(src) {
+      if (src === undefined) {
+        return this.poster_;
+      }
+
+      // The correct way to remove a poster is to set as an empty string
+      // other falsey values will throw errors
+      if (!src) {
+        src = '';
+      }
+      if (src === this.poster_) {
+        return;
+      }
+
+      // update the internal poster variable
+      this.poster_ = src;
+
+      // update the tech's poster
+      this.techCall_('setPoster', src);
+      this.isPosterFromTech_ = false;
+
+      // alert components that the poster has been set
+      /**
+       * This event fires when the poster image is changed on the player.
+       *
+       * @event Player#posterchange
+       * @type {Event}
+       */
+      this.trigger('posterchange');
+    }
+
+    /**
+     * Some techs (e.g. YouTube) can provide a poster source in an
+     * asynchronous way. We want the poster component to use this
+     * poster source so that it covers up the tech's controls.
+     * (YouTube's play button). However we only want to use this
+     * source if the player user hasn't set a poster through
+     * the normal APIs.
+     *
+     * @fires Player#posterchange
+     * @listens Tech#posterchange
+     * @private
+     */
+    handleTechPosterChange_() {
+      if ((!this.poster_ || this.options_.techCanOverridePoster) && this.tech_ && this.tech_.poster) {
+        const newPoster = this.tech_.poster() || '';
+        if (newPoster !== this.poster_) {
+          this.poster_ = newPoster;
+          this.isPosterFromTech_ = true;
+
+          // Let components know the poster has changed
+          this.trigger('posterchange');
+        }
+      }
+    }
+
+    /**
+     * Get or set whether or not the controls are showing.
+     *
+     * @fires Player#controlsenabled
+     *
+     * @param {boolean} [bool]
+     *        - true to turn controls on
+     *        - false to turn controls off
+     *
+     * @return {boolean|undefined}
+     *         - The current value of controls when getting
+     *         - Nothing when setting
+     */
+    controls(bool) {
+      if (bool === undefined) {
+        return !!this.controls_;
+      }
+      bool = !!bool;
+
+      // Don't trigger a change event unless it actually changed
+      if (this.controls_ === bool) {
+        return;
+      }
+      this.controls_ = bool;
+      if (this.usingNativeControls()) {
+        this.techCall_('setControls', bool);
+      }
+      if (this.controls_) {
+        this.removeClass('vjs-controls-disabled');
+        this.addClass('vjs-controls-enabled');
+        /**
+         * @event Player#controlsenabled
+         * @type {Event}
+         */
+        this.trigger('controlsenabled');
+        if (!this.usingNativeControls()) {
+          this.addTechControlsListeners_();
+        }
+      } else {
+        this.removeClass('vjs-controls-enabled');
+        this.addClass('vjs-controls-disabled');
+        /**
+         * @event Player#controlsdisabled
+         * @type {Event}
+         */
+        this.trigger('controlsdisabled');
+        if (!this.usingNativeControls()) {
+          this.removeTechControlsListeners_();
+        }
+      }
+    }
+
+    /**
+     * Toggle native controls on/off. Native controls are the controls built into
+     * devices (e.g. default iPhone controls) or other techs
+     * (e.g. Vimeo Controls)
+     * **This should only be set by the current tech, because only the tech knows
+     * if it can support native controls**
+     *
+     * @fires Player#usingnativecontrols
+     * @fires Player#usingcustomcontrols
+     *
+     * @param {boolean} [bool]
+     *        - true to turn native controls on
+     *        - false to turn native controls off
+     *
+     * @return {boolean|undefined}
+     *         - The current value of native controls when getting
+     *         - Nothing when setting
+     */
+    usingNativeControls(bool) {
+      if (bool === undefined) {
+        return !!this.usingNativeControls_;
+      }
+      bool = !!bool;
+
+      // Don't trigger a change event unless it actually changed
+      if (this.usingNativeControls_ === bool) {
+        return;
+      }
+      this.usingNativeControls_ = bool;
+      if (this.usingNativeControls_) {
+        this.addClass('vjs-using-native-controls');
+
+        /**
+         * player is using the native device controls
+         *
+         * @event Player#usingnativecontrols
+         * @type {Event}
+         */
+        this.trigger('usingnativecontrols');
+      } else {
+        this.removeClass('vjs-using-native-controls');
+
+        /**
+         * player is using the custom HTML controls
+         *
+         * @event Player#usingcustomcontrols
+         * @type {Event}
+         */
+        this.trigger('usingcustomcontrols');
+      }
+    }
+
+    /**
+     * Set or get the current MediaError
+     *
+     * @fires Player#error
+     *
+     * @param  {MediaError|string|number} [err]
+     *         A MediaError or a string/number to be turned
+     *         into a MediaError
+     *
+     * @return {MediaError|null|undefined}
+     *         - The current MediaError when getting (or null)
+     *         - Nothing when setting
+     */
+    error(err) {
+      if (err === undefined) {
+        return this.error_ || null;
+      }
+
+      // allow hooks to modify error object
+      hooks('beforeerror').forEach(hookFunction => {
+        const newErr = hookFunction(this, err);
+        if (!(isObject$1(newErr) && !Array.isArray(newErr) || typeof newErr === 'string' || typeof newErr === 'number' || newErr === null)) {
+          this.log.error('please return a value that MediaError expects in beforeerror hooks');
+          return;
+        }
+        err = newErr;
+      });
+
+      // Suppress the first error message for no compatible source until
+      // user interaction
+      if (this.options_.suppressNotSupportedError && err && err.code === 4) {
+        const triggerSuppressedError = function () {
+          this.error(err);
+        };
+        this.options_.suppressNotSupportedError = false;
+        this.any(['click', 'touchstart'], triggerSuppressedError);
+        this.one('loadstart', function () {
+          this.off(['click', 'touchstart'], triggerSuppressedError);
+        });
+        return;
+      }
+
+      // restoring to default
+      if (err === null) {
+        this.error_ = null;
+        this.removeClass('vjs-error');
+        if (this.errorDisplay) {
+          this.errorDisplay.close();
+        }
+        return;
+      }
+      this.error_ = new MediaError(err);
+
+      // add the vjs-error classname to the player
+      this.addClass('vjs-error');
+
+      // log the name of the error type and any message
+      // IE11 logs "[object object]" and required you to expand message to see error object
+      log$1.error(`(CODE:${this.error_.code} ${MediaError.errorTypes[this.error_.code]})`, this.error_.message, this.error_);
+
+      /**
+       * @event Player#error
+       * @type {Event}
+       */
+      this.trigger('error');
+
+      // notify hooks of the per player error
+      hooks('error').forEach(hookFunction => hookFunction(this, this.error_));
+      return;
+    }
+
+    /**
+     * Report user activity
+     *
+     * @param {Object} event
+     *        Event object
+     */
+    reportUserActivity(event) {
+      this.userActivity_ = true;
+    }
+
+    /**
+     * Get/set if user is active
+     *
+     * @fires Player#useractive
+     * @fires Player#userinactive
+     *
+     * @param {boolean} [bool]
+     *        - true if the user is active
+     *        - false if the user is inactive
+     *
+     * @return {boolean|undefined}
+     *         - The current value of userActive when getting
+     *         - Nothing when setting
+     */
+    userActive(bool) {
+      if (bool === undefined) {
+        return this.userActive_;
+      }
+      bool = !!bool;
+      if (bool === this.userActive_) {
+        return;
+      }
+      this.userActive_ = bool;
+      if (this.userActive_) {
+        this.userActivity_ = true;
+        this.removeClass('vjs-user-inactive');
+        this.addClass('vjs-user-active');
+        /**
+         * @event Player#useractive
+         * @type {Event}
+         */
+        this.trigger('useractive');
+        return;
+      }
+
+      // Chrome/Safari/IE have bugs where when you change the cursor it can
+      // trigger a mousemove event. This causes an issue when you're hiding
+      // the cursor when the user is inactive, and a mousemove signals user
+      // activity. Making it impossible to go into inactive mode. Specifically
+      // this happens in fullscreen when we really need to hide the cursor.
+      //
+      // When this gets resolved in ALL browsers it can be removed
+      // https://code.google.com/p/chromium/issues/detail?id=103041
+      if (this.tech_) {
+        this.tech_.one('mousemove', function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+        });
+      }
+      this.userActivity_ = false;
+      this.removeClass('vjs-user-active');
+      this.addClass('vjs-user-inactive');
+      /**
+       * @event Player#userinactive
+       * @type {Event}
+       */
+      this.trigger('userinactive');
+    }
+
+    /**
+     * Listen for user activity based on timeout value
+     *
+     * @private
+     */
+    listenForUserActivity_() {
+      let mouseInProgress;
+      let lastMoveX;
+      let lastMoveY;
+      const handleActivity = bind_(this, this.reportUserActivity);
+      const handleMouseMove = function (e) {
+        // #1068 - Prevent mousemove spamming
+        // Chrome Bug: https://code.google.com/p/chromium/issues/detail?id=366970
+        if (e.screenX !== lastMoveX || e.screenY !== lastMoveY) {
+          lastMoveX = e.screenX;
+          lastMoveY = e.screenY;
+          handleActivity();
+        }
+      };
+      const handleMouseDown = function () {
+        handleActivity();
+        // For as long as the they are touching the device or have their mouse down,
+        // we consider them active even if they're not moving their finger or mouse.
+        // So we want to continue to update that they are active
+        this.clearInterval(mouseInProgress);
+        // Setting userActivity=true now and setting the interval to the same time
+        // as the activityCheck interval (250) should ensure we never miss the
+        // next activityCheck
+        mouseInProgress = this.setInterval(handleActivity, 250);
+      };
+      const handleMouseUpAndMouseLeave = function (event) {
+        handleActivity();
+        // Stop the interval that maintains activity if the mouse/touch is down
+        this.clearInterval(mouseInProgress);
+      };
+
+      // Any mouse movement will be considered user activity
+      this.on('mousedown', handleMouseDown);
+      this.on('mousemove', handleMouseMove);
+      this.on('mouseup', handleMouseUpAndMouseLeave);
+      this.on('mouseleave', handleMouseUpAndMouseLeave);
+      const controlBar = this.getChild('controlBar');
+
+      // Fixes bug on Android & iOS where when tapping progressBar (when control bar is displayed)
+      // controlBar would no longer be hidden by default timeout.
+      if (controlBar && !IS_IOS && !IS_ANDROID) {
+        controlBar.on('mouseenter', function (event) {
+          if (this.player().options_.inactivityTimeout !== 0) {
+            this.player().cache_.inactivityTimeout = this.player().options_.inactivityTimeout;
+          }
+          this.player().options_.inactivityTimeout = 0;
+        });
+        controlBar.on('mouseleave', function (event) {
+          this.player().options_.inactivityTimeout = this.player().cache_.inactivityTimeout;
+        });
+      }
+
+      // Listen for keyboard navigation
+      // Shouldn't need to use inProgress interval because of key repeat
+      this.on('keydown', handleActivity);
+      this.on('keyup', handleActivity);
+
+      // Run an interval every 250 milliseconds instead of stuffing everything into
+      // the mousemove/touchmove function itself, to prevent performance degradation.
+      // `this.reportUserActivity` simply sets this.userActivity_ to true, which
+      // then gets picked up by this loop
+      // http://ejohn.org/blog/learning-from-twitter/
+      let inactivityTimeout;
+
+      /** @this Player */
+      const activityCheck = function () {
+        // Check to see if mouse/touch activity has happened
+        if (!this.userActivity_) {
+          return;
+        }
+
+        // Reset the activity tracker
+        this.userActivity_ = false;
+
+        // If the user state was inactive, set the state to active
+        this.userActive(true);
+
+        // Clear any existing inactivity timeout to start the timer over
+        this.clearTimeout(inactivityTimeout);
+        const timeout = this.options_.inactivityTimeout;
+        if (timeout <= 0) {
+          return;
+        }
+
+        // In <timeout> milliseconds, if no more activity has occurred the
+        // user will be considered inactive
+        inactivityTimeout = this.setTimeout(function () {
+          // Protect against the case where the inactivityTimeout can trigger just
+          // before the next user activity is picked up by the activity check loop
+          // causing a flicker
+          if (!this.userActivity_) {
+            this.userActive(false);
+          }
+        }, timeout);
+      };
+      this.setInterval(activityCheck, 250);
+    }
+
+    /**
+     * Gets or sets the current playback rate. A playback rate of
+     * 1.0 represents normal speed and 0.5 would indicate half-speed
+     * playback, for instance.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-playbackrate
+     *
+     * @param {number} [rate]
+     *       New playback rate to set.
+     *
+     * @return {number|undefined}
+     *         - The current playback rate when getting or 1.0
+     *         - Nothing when setting
+     */
+    playbackRate(rate) {
+      if (rate !== undefined) {
+        // NOTE: this.cache_.lastPlaybackRate is set from the tech handler
+        // that is registered above
+        this.techCall_('setPlaybackRate', rate);
+        return;
+      }
+      if (this.tech_ && this.tech_.featuresPlaybackRate) {
+        return this.cache_.lastPlaybackRate || this.techGet_('playbackRate');
+      }
+      return 1.0;
+    }
+
+    /**
+     * Gets or sets the current default playback rate. A default playback rate of
+     * 1.0 represents normal speed and 0.5 would indicate half-speed playback, for instance.
+     * defaultPlaybackRate will only represent what the initial playbackRate of a video was, not
+     * not the current playbackRate.
+     *
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-defaultplaybackrate
+     *
+     * @param {number} [rate]
+     *       New default playback rate to set.
+     *
+     * @return {number|undefined}
+     *         - The default playback rate when getting or 1.0
+     *         - Nothing when setting
+     */
+    defaultPlaybackRate(rate) {
+      if (rate !== undefined) {
+        return this.techCall_('setDefaultPlaybackRate', rate);
+      }
+      if (this.tech_ && this.tech_.featuresPlaybackRate) {
+        return this.techGet_('defaultPlaybackRate');
+      }
+      return 1.0;
+    }
+
+    /**
+     * Gets or sets the audio flag
+     *
+     * @param {boolean} [bool]
+     *        - true signals that this is an audio player
+     *        - false signals that this is not an audio player
+     *
+     * @return {boolean|undefined}
+     *         - The current value of isAudio when getting
+     *         - Nothing when setting
+     */
+    isAudio(bool) {
+      if (bool !== undefined) {
+        this.isAudio_ = !!bool;
+        return;
+      }
+      return !!this.isAudio_;
+    }
+    enableAudioOnlyUI_() {
+      // Update styling immediately to show the control bar so we can get its height
+      this.addClass('vjs-audio-only-mode');
+      const playerChildren = this.children();
+      const controlBar = this.getChild('ControlBar');
+      const controlBarHeight = controlBar && controlBar.currentHeight();
+
+      // Hide all player components except the control bar. Control bar components
+      // needed only for video are hidden with CSS
+      playerChildren.forEach(child => {
+        if (child === controlBar) {
+          return;
+        }
+        if (child.el_ && !child.hasClass('vjs-hidden')) {
+          child.hide();
+          this.audioOnlyCache_.hiddenChildren.push(child);
+        }
+      });
+      this.audioOnlyCache_.playerHeight = this.currentHeight();
+
+      // Set the player height the same as the control bar
+      this.height(controlBarHeight);
+      this.trigger('audioonlymodechange');
+    }
+    disableAudioOnlyUI_() {
+      this.removeClass('vjs-audio-only-mode');
+
+      // Show player components that were previously hidden
+      this.audioOnlyCache_.hiddenChildren.forEach(child => child.show());
+
+      // Reset player height
+      this.height(this.audioOnlyCache_.playerHeight);
+      this.trigger('audioonlymodechange');
+    }
+
+    /**
+     * Get the current audioOnlyMode state or set audioOnlyMode to true or false.
+     *
+     * Setting this to `true` will hide all player components except the control bar,
+     * as well as control bar components needed only for video.
+     *
+     * @param {boolean} [value]
+     *         The value to set audioOnlyMode to.
+     *
+     * @return {Promise|boolean}
+     *        A Promise is returned when setting the state, and a boolean when getting
+     *        the present state
+     */
+    audioOnlyMode(value) {
+      if (typeof value !== 'boolean' || value === this.audioOnlyMode_) {
+        return this.audioOnlyMode_;
+      }
+      this.audioOnlyMode_ = value;
+
+      // Enable Audio Only Mode
+      if (value) {
+        const exitPromises = [];
+
+        // Fullscreen and PiP are not supported in audioOnlyMode, so exit if we need to.
+        if (this.isInPictureInPicture()) {
+          exitPromises.push(this.exitPictureInPicture());
+        }
+        if (this.isFullscreen()) {
+          exitPromises.push(this.exitFullscreen());
+        }
+        if (this.audioPosterMode()) {
+          exitPromises.push(this.audioPosterMode(false));
+        }
+        return Promise.all(exitPromises).then(() => this.enableAudioOnlyUI_());
+      }
+
+      // Disable Audio Only Mode
+      return Promise.resolve().then(() => this.disableAudioOnlyUI_());
+    }
+    enablePosterModeUI_() {
+      // Hide the video element and show the poster image to enable posterModeUI
+      const tech = this.tech_ && this.tech_;
+      tech.hide();
+      this.addClass('vjs-audio-poster-mode');
+      this.trigger('audiopostermodechange');
+    }
+    disablePosterModeUI_() {
+      // Show the video element and hide the poster image to disable posterModeUI
+      const tech = this.tech_ && this.tech_;
+      tech.show();
+      this.removeClass('vjs-audio-poster-mode');
+      this.trigger('audiopostermodechange');
+    }
+
+    /**
+     * Get the current audioPosterMode state or set audioPosterMode to true or false
+     *
+     * @param {boolean} [value]
+     *         The value to set audioPosterMode to.
+     *
+     * @return {Promise|boolean}
+     *         A Promise is returned when setting the state, and a boolean when getting
+     *        the present state
+     */
+    audioPosterMode(value) {
+      if (typeof value !== 'boolean' || value === this.audioPosterMode_) {
+        return this.audioPosterMode_;
+      }
+      this.audioPosterMode_ = value;
+      if (value) {
+        if (this.audioOnlyMode()) {
+          const audioOnlyModePromise = this.audioOnlyMode(false);
+          return audioOnlyModePromise.then(() => {
+            // enable audio poster mode after audio only mode is disabled
+            this.enablePosterModeUI_();
+          });
+        }
+        return Promise.resolve().then(() => {
+          // enable audio poster mode
+          this.enablePosterModeUI_();
+        });
+      }
+      return Promise.resolve().then(() => {
+        // disable audio poster mode
+        this.disablePosterModeUI_();
+      });
+    }
+
+    /**
+     * A helper method for adding a {@link TextTrack} to our
+     * {@link TextTrackList}.
+     *
+     * In addition to the W3C settings we allow adding additional info through options.
+     *
+     * @see http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack
+     *
+     * @param {string} [kind]
+     *        the kind of TextTrack you are adding
+     *
+     * @param {string} [label]
+     *        the label to give the TextTrack label
+     *
+     * @param {string} [language]
+     *        the language to set on the TextTrack
+     *
+     * @return {TextTrack|undefined}
+     *         the TextTrack that was added or undefined
+     *         if there is no tech
+     */
+    addTextTrack(kind, label, language) {
+      if (this.tech_) {
+        return this.tech_.addTextTrack(kind, label, language);
+      }
+    }
+
+    /**
+     * Create a remote {@link TextTrack} and an {@link HTMLTrackElement}.
+     *
+     * @param {Object} options
+     *        Options to pass to {@link HTMLTrackElement} during creation. See
+     *        {@link HTMLTrackElement} for object properties that you should use.
+     *
+     * @param {boolean} [manualCleanup=false] if set to true, the TextTrack will not be removed
+     *                                        from the TextTrackList and HtmlTrackElementList
+     *                                        after a source change
+     *
+     * @return { import('./tracks/html-track-element').default }
+     *         the HTMLTrackElement that was created and added
+     *         to the HtmlTrackElementList and the remote
+     *         TextTrackList
+     *
+     */
+    addRemoteTextTrack(options, manualCleanup) {
+      if (this.tech_) {
+        return this.tech_.addRemoteTextTrack(options, manualCleanup);
+      }
+    }
+
+    /**
+     * Remove a remote {@link TextTrack} from the respective
+     * {@link TextTrackList} and {@link HtmlTrackElementList}.
+     *
+     * @param {Object} track
+     *        Remote {@link TextTrack} to remove
+     *
+     * @return {undefined}
+     *         does not return anything
+     */
+    removeRemoteTextTrack(obj = {}) {
+      let {
+        track
+      } = obj;
+      if (!track) {
+        track = obj;
+      }
+
+      // destructure the input into an object with a track argument, defaulting to arguments[0]
+      // default the whole argument to an empty object if nothing was passed in
+
+      if (this.tech_) {
+        return this.tech_.removeRemoteTextTrack(track);
+      }
+    }
+
+    /**
+     * Gets available media playback quality metrics as specified by the W3C's Media
+     * Playback Quality API.
+     *
+     * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+     *
+     * @return {Object|undefined}
+     *         An object with supported media playback quality metrics or undefined if there
+     *         is no tech or the tech does not support it.
+     */
+    getVideoPlaybackQuality() {
+      return this.techGet_('getVideoPlaybackQuality');
+    }
+
+    /**
+     * Get video width
+     *
+     * @return {number}
+     *         current video width
+     */
+    videoWidth() {
+      return this.tech_ && this.tech_.videoWidth && this.tech_.videoWidth() || 0;
+    }
+
+    /**
+     * Get video height
+     *
+     * @return {number}
+     *         current video height
+     */
+    videoHeight() {
+      return this.tech_ && this.tech_.videoHeight && this.tech_.videoHeight() || 0;
+    }
+
+    /**
+     * Set or get the player's language code.
+     *
+     * Changing the language will trigger
+     * [languagechange]{@link Player#event:languagechange}
+     * which Components can use to update control text.
+     * ClickableComponent will update its control text by default on
+     * [languagechange]{@link Player#event:languagechange}.
+     *
+     * @fires Player#languagechange
+     *
+     * @param {string} [code]
+     *        the language code to set the player to
+     *
+     * @return {string|undefined}
+     *         - The current language code when getting
+     *         - Nothing when setting
+     */
+    language(code) {
+      if (code === undefined) {
+        return this.language_;
+      }
+      if (this.language_ !== String(code).toLowerCase()) {
+        this.language_ = String(code).toLowerCase();
+
+        // during first init, it's possible some things won't be evented
+        if (isEvented(this)) {
+          /**
+          * fires when the player language change
+          *
+          * @event Player#languagechange
+          * @type {Event}
+          */
+          this.trigger('languagechange');
+        }
+      }
+    }
+
+    /**
+     * Get the player's language dictionary
+     * Merge every time, because a newly added plugin might call videojs.addLanguage() at any time
+     * Languages specified directly in the player options have precedence
+     *
+     * @return {Array}
+     *         An array of of supported languages
+     */
+    languages() {
+      return merge$2(Player.prototype.options_.languages, this.languages_);
+    }
+
+    /**
+     * returns a JavaScript object representing the current track
+     * information. **DOES not return it as JSON**
+     *
+     * @return {Object}
+     *         Object representing the current of track info
+     */
+    toJSON() {
+      const options = merge$2(this.options_);
+      const tracks = options.tracks;
+      options.tracks = [];
+      for (let i = 0; i < tracks.length; i++) {
+        let track = tracks[i];
+
+        // deep merge tracks and null out player so no circular references
+        track = merge$2(track);
+        track.player = undefined;
+        options.tracks[i] = track;
+      }
+      return options;
+    }
+
+    /**
+     * Creates a simple modal dialog (an instance of the {@link ModalDialog}
+     * component) that immediately overlays the player with arbitrary
+     * content and removes itself when closed.
+     *
+     * @param {string|Function|Element|Array|null} content
+     *        Same as {@link ModalDialog#content}'s param of the same name.
+     *        The most straight-forward usage is to provide a string or DOM
+     *        element.
+     *
+     * @param {Object} [options]
+     *        Extra options which will be passed on to the {@link ModalDialog}.
+     *
+     * @return {ModalDialog}
+     *         the {@link ModalDialog} that was created
+     */
+    createModal(content, options) {
+      options = options || {};
+      options.content = content || '';
+      const modal = new ModalDialog(this, options);
+      this.addChild(modal);
+      modal.on('dispose', () => {
+        this.removeChild(modal);
+      });
+      modal.open();
+      return modal;
+    }
+
+    /**
+     * Change breakpoint classes when the player resizes.
+     *
+     * @private
+     */
+    updateCurrentBreakpoint_() {
+      if (!this.responsive()) {
+        return;
+      }
+      const currentBreakpoint = this.currentBreakpoint();
+      const currentWidth = this.currentWidth();
+      for (let i = 0; i < BREAKPOINT_ORDER.length; i++) {
+        const candidateBreakpoint = BREAKPOINT_ORDER[i];
+        const maxWidth = this.breakpoints_[candidateBreakpoint];
+        if (currentWidth <= maxWidth) {
+          // The current breakpoint did not change, nothing to do.
+          if (currentBreakpoint === candidateBreakpoint) {
+            return;
+          }
+
+          // Only remove a class if there is a current breakpoint.
+          if (currentBreakpoint) {
+            this.removeClass(BREAKPOINT_CLASSES[currentBreakpoint]);
+          }
+          this.addClass(BREAKPOINT_CLASSES[candidateBreakpoint]);
+          this.breakpoint_ = candidateBreakpoint;
+          break;
+        }
+      }
+    }
+
+    /**
+     * Removes the current breakpoint.
+     *
+     * @private
+     */
+    removeCurrentBreakpoint_() {
+      const className = this.currentBreakpointClass();
+      this.breakpoint_ = '';
+      if (className) {
+        this.removeClass(className);
+      }
+    }
+
+    /**
+     * Get or set breakpoints on the player.
+     *
+     * Calling this method with an object or `true` will remove any previous
+     * custom breakpoints and start from the defaults again.
+     *
+     * @param  {Object|boolean} [breakpoints]
+     *         If an object is given, it can be used to provide custom
+     *         breakpoints. If `true` is given, will set default breakpoints.
+     *         If this argument is not given, will simply return the current
+     *         breakpoints.
+     *
+     * @param  {number} [breakpoints.tiny]
+     *         The maximum width for the "vjs-layout-tiny" class.
+     *
+     * @param  {number} [breakpoints.xsmall]
+     *         The maximum width for the "vjs-layout-x-small" class.
+     *
+     * @param  {number} [breakpoints.small]
+     *         The maximum width for the "vjs-layout-small" class.
+     *
+     * @param  {number} [breakpoints.medium]
+     *         The maximum width for the "vjs-layout-medium" class.
+     *
+     * @param  {number} [breakpoints.large]
+     *         The maximum width for the "vjs-layout-large" class.
+     *
+     * @param  {number} [breakpoints.xlarge]
+     *         The maximum width for the "vjs-layout-x-large" class.
+     *
+     * @param  {number} [breakpoints.huge]
+     *         The maximum width for the "vjs-layout-huge" class.
+     *
+     * @return {Object}
+     *         An object mapping breakpoint names to maximum width values.
+     */
+    breakpoints(breakpoints) {
+      // Used as a getter.
+      if (breakpoints === undefined) {
+        return Object.assign(this.breakpoints_);
+      }
+      this.breakpoint_ = '';
+      this.breakpoints_ = Object.assign({}, DEFAULT_BREAKPOINTS, breakpoints);
+
+      // When breakpoint definitions change, we need to update the currently
+      // selected breakpoint.
+      this.updateCurrentBreakpoint_();
+
+      // Clone the breakpoints before returning.
+      return Object.assign(this.breakpoints_);
+    }
+
+    /**
+     * Get or set a flag indicating whether or not this player should adjust
+     * its UI based on its dimensions.
+     *
+     * @param  {boolean} [value]
+     *         Should be `true` if the player should adjust its UI based on its
+     *         dimensions; otherwise, should be `false`.
+     *
+     * @return {boolean|undefined}
+     *         Will be `true` if this player should adjust its UI based on its
+     *         dimensions; otherwise, will be `false`.
+     *         Nothing if setting
+     */
+    responsive(value) {
+      // Used as a getter.
+      if (value === undefined) {
+        return this.responsive_;
+      }
+      value = Boolean(value);
+      const current = this.responsive_;
+
+      // Nothing changed.
+      if (value === current) {
+        return;
+      }
+
+      // The value actually changed, set it.
+      this.responsive_ = value;
+
+      // Start listening for breakpoints and set the initial breakpoint if the
+      // player is now responsive.
+      if (value) {
+        this.on('playerresize', this.boundUpdateCurrentBreakpoint_);
+        this.updateCurrentBreakpoint_();
+
+        // Stop listening for breakpoints if the player is no longer responsive.
+      } else {
+        this.off('playerresize', this.boundUpdateCurrentBreakpoint_);
+        this.removeCurrentBreakpoint_();
+      }
+      return value;
+    }
+
+    /**
+     * Get current breakpoint name, if any.
+     *
+     * @return {string}
+     *         If there is currently a breakpoint set, returns a the key from the
+     *         breakpoints object matching it. Otherwise, returns an empty string.
+     */
+    currentBreakpoint() {
+      return this.breakpoint_;
+    }
+
+    /**
+     * Get the current breakpoint class name.
+     *
+     * @return {string}
+     *         The matching class name (e.g. `"vjs-layout-tiny"` or
+     *         `"vjs-layout-large"`) for the current breakpoint. Empty string if
+     *         there is no current breakpoint.
+     */
+    currentBreakpointClass() {
+      return BREAKPOINT_CLASSES[this.breakpoint_] || '';
+    }
+
+    /**
+     * An object that describes a single piece of media.
+     *
+     * Properties that are not part of this type description will be retained; so,
+     * this can be viewed as a generic metadata storage mechanism as well.
+     *
+     * @see      {@link https://wicg.github.io/mediasession/#the-mediametadata-interface}
+     * @typedef  {Object} Player~MediaObject
+     *
+     * @property {string} [album]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {string} [artist]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {Object[]} [artwork]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API. If not specified, will be populated via the `poster`, if
+     *           available.
+     *
+     * @property {string} [poster]
+     *           URL to an image that will display before playback.
+     *
+     * @property {Tech~SourceObject|Tech~SourceObject[]|string} [src]
+     *           A single source object, an array of source objects, or a string
+     *           referencing a URL to a media source. It is _highly recommended_
+     *           that an object or array of objects is used here, so that source
+     *           selection algorithms can take the `type` into account.
+     *
+     * @property {string} [title]
+     *           Unused, except if this object is passed to the `MediaSession`
+     *           API.
+     *
+     * @property {Object[]} [textTracks]
+     *           An array of objects to be used to create text tracks, following
+     *           the {@link https://www.w3.org/TR/html50/embedded-content-0.html#the-track-element|native track element format}.
+     *           For ease of removal, these will be created as "remote" text
+     *           tracks and set to automatically clean up on source changes.
+     *
+     *           These objects may have properties like `src`, `kind`, `label`,
+     *           and `language`, see {@link Tech#createRemoteTextTrack}.
+     */
+
+    /**
+     * Populate the player using a {@link Player~MediaObject|MediaObject}.
+     *
+     * @param  {Player~MediaObject} media
+     *         A media object.
+     *
+     * @param  {Function} ready
+     *         A callback to be called when the player is ready.
+     */
+    loadMedia(media, ready) {
+      if (!media || typeof media !== 'object') {
+        return;
+      }
+      const crossOrigin = this.crossOrigin();
+      this.reset();
+
+      // Clone the media object so it cannot be mutated from outside.
+      this.cache_.media = merge$2(media);
+      const {
+        artist,
+        artwork,
+        description,
+        poster,
+        src,
+        textTracks,
+        title
+      } = this.cache_.media;
+
+      // If `artwork` is not given, create it using `poster`.
+      if (!artwork && poster) {
+        this.cache_.media.artwork = [{
+          src: poster,
+          type: getMimetype(poster)
+        }];
+      }
+      if (crossOrigin) {
+        this.crossOrigin(crossOrigin);
+      }
+      if (src) {
+        this.src(src);
+      }
+      if (poster) {
+        this.poster(poster);
+      }
+      if (Array.isArray(textTracks)) {
+        textTracks.forEach(tt => this.addRemoteTextTrack(tt, false));
+      }
+      if (this.titleBar) {
+        this.titleBar.update({
+          title,
+          description: description || artist || ''
+        });
+      }
+      this.ready(ready);
+    }
+
+    /**
+     * Get a clone of the current {@link Player~MediaObject} for this player.
+     *
+     * If the `loadMedia` method has not been used, will attempt to return a
+     * {@link Player~MediaObject} based on the current state of the player.
+     *
+     * @return {Player~MediaObject}
+     */
+    getMedia() {
+      if (!this.cache_.media) {
+        const poster = this.poster();
+        const src = this.currentSources();
+        const textTracks = Array.prototype.map.call(this.remoteTextTracks(), tt => ({
+          kind: tt.kind,
+          label: tt.label,
+          language: tt.language,
+          src: tt.src
+        }));
+        const media = {
+          src,
+          textTracks
+        };
+        if (poster) {
+          media.poster = poster;
+          media.artwork = [{
+            src: media.poster,
+            type: getMimetype(media.poster)
+          }];
+        }
+        return media;
+      }
+      return merge$2(this.cache_.media);
+    }
+
+    /**
+     * Gets tag settings
+     *
+     * @param {Element} tag
+     *        The player tag
+     *
+     * @return {Object}
+     *         An object containing all of the settings
+     *         for a player tag
+     */
+    static getTagSettings(tag) {
+      const baseOptions = {
+        sources: [],
+        tracks: []
+      };
+      const tagOptions = getAttributes(tag);
+      const dataSetup = tagOptions['data-setup'];
+      if (hasClass(tag, 'vjs-fill')) {
+        tagOptions.fill = true;
+      }
+      if (hasClass(tag, 'vjs-fluid')) {
+        tagOptions.fluid = true;
+      }
+
+      // Check if data-setup attr exists.
+      if (dataSetup !== null) {
+        // Parse options JSON
+        // If empty string, make it a parsable json object.
+        const [err, data] = tuple(dataSetup || '{}');
+        if (err) {
+          log$1.error(err);
+        }
+        Object.assign(tagOptions, data);
+      }
+      Object.assign(baseOptions, tagOptions);
+
+      // Get tag children settings
+      if (tag.hasChildNodes()) {
+        const children = tag.childNodes;
+        for (let i = 0, j = children.length; i < j; i++) {
+          const child = children[i];
+          // Change case needed: http://ejohn.org/blog/nodename-case-sensitivity/
+          const childName = child.nodeName.toLowerCase();
+          if (childName === 'source') {
+            baseOptions.sources.push(getAttributes(child));
+          } else if (childName === 'track') {
+            baseOptions.tracks.push(getAttributes(child));
+          }
+        }
+      }
+      return baseOptions;
+    }
+
+    /**
+     * Set debug mode to enable/disable logs at info level.
+     *
+     * @param {boolean} enabled
+     * @fires Player#debugon
+     * @fires Player#debugoff
+     * @return {boolean|undefined}
+     */
+    debug(enabled) {
+      if (enabled === undefined) {
+        return this.debugEnabled_;
+      }
+      if (enabled) {
+        this.trigger('debugon');
+        this.previousLogLevel_ = this.log.level;
+        this.log.level('debug');
+        this.debugEnabled_ = true;
+      } else {
+        this.trigger('debugoff');
+        this.log.level(this.previousLogLevel_);
+        this.previousLogLevel_ = undefined;
+        this.debugEnabled_ = false;
+      }
+    }
+
+    /**
+     * Set or get current playback rates.
+     * Takes an array and updates the playback rates menu with the new items.
+     * Pass in an empty array to hide the menu.
+     * Values other than arrays are ignored.
+     *
+     * @fires Player#playbackrateschange
+     * @param {number[]} [newRates]
+     *                   The new rates that the playback rates menu should update to.
+     *                   An empty array will hide the menu
+     * @return {number[]} When used as a getter will return the current playback rates
+     */
+    playbackRates(newRates) {
+      if (newRates === undefined) {
+        return this.cache_.playbackRates;
+      }
+
+      // ignore any value that isn't an array
+      if (!Array.isArray(newRates)) {
+        return;
+      }
+
+      // ignore any arrays that don't only contain numbers
+      if (!newRates.every(rate => typeof rate === 'number')) {
+        return;
+      }
+      this.cache_.playbackRates = newRates;
+
+      /**
+      * fires when the playback rates in a player are changed
+      *
+      * @event Player#playbackrateschange
+      * @type {Event}
+      */
+      this.trigger('playbackrateschange');
+    }
+  }
+
+  /**
+   * Get the {@link VideoTrackList}
+   *
+   * @link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist
+   *
+   * @return {VideoTrackList}
+   *         the current video track list
+   *
+   * @method Player.prototype.videoTracks
+   */
+
+  /**
+   * Get the {@link AudioTrackList}
+   *
+   * @link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist
+   *
+   * @return {AudioTrackList}
+   *         the current audio track list
+   *
+   * @method Player.prototype.audioTracks
+   */
+
+  /**
+   * Get the {@link TextTrackList}
+   *
+   * @link http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-texttracks
+   *
+   * @return {TextTrackList}
+   *         the current text track list
+   *
+   * @method Player.prototype.textTracks
+   */
+
+  /**
+   * Get the remote {@link TextTrackList}
+   *
+   * @return {TextTrackList}
+   *         The current remote text track list
+   *
+   * @method Player.prototype.remoteTextTracks
+   */
+
+  /**
+   * Get the remote {@link HtmlTrackElementList} tracks.
+   *
+   * @return {HtmlTrackElementList}
+   *         The current remote text track element list
+   *
+   * @method Player.prototype.remoteTextTrackEls
+   */
+
+  ALL.names.forEach(function (name) {
+    const props = ALL[name];
+    Player.prototype[props.getterName] = function () {
+      if (this.tech_) {
+        return this.tech_[props.getterName]();
+      }
+
+      // if we have not yet loadTech_, we create {video,audio,text}Tracks_
+      // these will be passed to the tech during loading
+      this[props.privateName] = this[props.privateName] || new props.ListClass();
+      return this[props.privateName];
+    };
+  });
+
+  /**
+   * Get or set the `Player`'s crossorigin option. For the HTML5 player, this
+   * sets the `crossOrigin` property on the `<video>` tag to control the CORS
+   * behavior.
+   *
+   * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
+   *
+   * @param {string} [value]
+   *        The value to set the `Player`'s crossorigin to. If an argument is
+   *        given, must be one of `anonymous` or `use-credentials`.
+   *
+   * @return {string|undefined}
+   *         - The current crossorigin value of the `Player` when getting.
+   *         - undefined when setting
+   */
+  Player.prototype.crossorigin = Player.prototype.crossOrigin;
+
+  /**
+   * Global enumeration of players.
+   *
+   * The keys are the player IDs and the values are either the {@link Player}
+   * instance or `null` for disposed players.
+   *
+   * @type {Object}
+   */
+  Player.players = {};
+  const navigator = window.navigator;
+
+  /*
+   * Player instance options, surfaced using options
+   * options = Player.prototype.options_
+   * Make changes in options, not here.
+   *
+   * @type {Object}
+   * @private
+   */
+  Player.prototype.options_ = {
+    // Default order of fallback technology
+    techOrder: Tech.defaultTechOrder_,
+    html5: {},
+    // enable sourceset by default
+    enableSourceset: true,
+    // default inactivity timeout
+    inactivityTimeout: 2000,
+    // default playback rates
+    playbackRates: [],
+    // Add playback rate selection by adding rates
+    // 'playbackRates': [0.5, 1, 1.5, 2],
+    liveui: false,
+    // Included control sets
+    children: ['mediaLoader', 'posterImage', 'titleBar', 'textTrackDisplay', 'loadingSpinner', 'bigPlayButton', 'liveTracker', 'controlBar', 'errorDisplay', 'textTrackSettings', 'resizeManager'],
+    language: navigator && (navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language) || 'en',
+    // locales and their language translations
+    languages: {},
+    // Default message to show when a video cannot be played.
+    notSupportedMessage: 'No compatible source was found for this media.',
+    normalizeAutoplay: false,
+    fullscreen: {
+      options: {
+        navigationUI: 'hide'
+      }
+    },
+    breakpoints: {},
+    responsive: false,
+    audioOnlyMode: false,
+    audioPosterMode: false,
+    // Default smooth seeking to false
+    enableSmoothSeeking: false
+  };
+  TECH_EVENTS_RETRIGGER.forEach(function (event) {
+    Player.prototype[`handleTech${toTitleCase$1(event)}_`] = function () {
+      return this.trigger(event);
+    };
+  });
+
+  /**
+   * Fired when the player has initial duration and dimension information
+   *
+   * @event Player#loadedmetadata
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the player has downloaded data at the current playback position
+   *
+   * @event Player#loadeddata
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the current playback position has changed *
+   * During playback this is fired every 15-250 milliseconds, depending on the
+   * playback technology in use.
+   *
+   * @event Player#timeupdate
+   * @type {Event}
+   */
+
+  /**
+   * Fired when the volume changes
+   *
+   * @event Player#volumechange
+   * @type {Event}
+   */
+
+  /**
+   * Reports whether or not a player has a plugin available.
+   *
+   * This does not report whether or not the plugin has ever been initialized
+   * on this player. For that, [usingPlugin]{@link Player#usingPlugin}.
+   *
+   * @method Player#hasPlugin
+   * @param  {string}  name
+   *         The name of a plugin.
+   *
+   * @return {boolean}
+   *         Whether or not this player has the requested plugin available.
+   */
+
+  /**
+   * Reports whether or not a player is using a plugin by name.
+   *
+   * For basic plugins, this only reports whether the plugin has _ever_ been
+   * initialized on this player.
+   *
+   * @method Player#usingPlugin
+   * @param  {string} name
+   *         The name of a plugin.
+   *
+   * @return {boolean}
+   *         Whether or not this player is using the requested plugin.
+   */
+
+  Component$1.registerComponent('Player', Player);
+
+  /**
+   * @file plugin.js
+   */
+
+  /**
+   * The base plugin name.
+   *
+   * @private
+   * @constant
+   * @type {string}
+   */
+  const BASE_PLUGIN_NAME = 'plugin';
+
+  /**
+   * The key on which a player's active plugins cache is stored.
+   *
+   * @private
+   * @constant
+   * @type     {string}
+   */
+  const PLUGIN_CACHE_KEY = 'activePlugins_';
+
+  /**
+   * Stores registered plugins in a private space.
+   *
+   * @private
+   * @type    {Object}
+   */
+  const pluginStorage = {};
+
+  /**
+   * Reports whether or not a plugin has been registered.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of a plugin.
+   *
+   * @return {boolean}
+   *          Whether or not the plugin has been registered.
+   */
+  const pluginExists = name => pluginStorage.hasOwnProperty(name);
+
+  /**
+   * Get a single registered plugin by name.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of a plugin.
+   *
+   * @return {typeof Plugin|Function|undefined}
+   *          The plugin (or undefined).
+   */
+  const getPlugin = name => pluginExists(name) ? pluginStorage[name] : undefined;
+
+  /**
+   * Marks a plugin as "active" on a player.
+   *
+   * Also, ensures that the player has an object for tracking active plugins.
+   *
+   * @private
+   * @param   {Player} player
+   *          A Video.js player instance.
+   *
+   * @param   {string} name
+   *          The name of a plugin.
+   */
+  const markPluginAsActive = (player, name) => {
+    player[PLUGIN_CACHE_KEY] = player[PLUGIN_CACHE_KEY] || {};
+    player[PLUGIN_CACHE_KEY][name] = true;
+  };
+
+  /**
+   * Triggers a pair of plugin setup events.
+   *
+   * @private
+   * @param  {Player} player
+   *         A Video.js player instance.
+   *
+   * @param  {PluginEventHash} hash
+   *         A plugin event hash.
+   *
+   * @param  {boolean} [before]
+   *         If true, prefixes the event name with "before". In other words,
+   *         use this to trigger "beforepluginsetup" instead of "pluginsetup".
+   */
+  const triggerSetupEvent = (player, hash, before) => {
+    const eventName = (before ? 'before' : '') + 'pluginsetup';
+    player.trigger(eventName, hash);
+    player.trigger(eventName + ':' + hash.name, hash);
+  };
+
+  /**
+   * Takes a basic plugin function and returns a wrapper function which marks
+   * on the player that the plugin has been activated.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of the plugin.
+   *
+   * @param   {Function} plugin
+   *          The basic plugin.
+   *
+   * @return {Function}
+   *          A wrapper function for the given plugin.
+   */
+  const createBasicPlugin = function (name, plugin) {
+    const basicPluginWrapper = function () {
+      // We trigger the "beforepluginsetup" and "pluginsetup" events on the player
+      // regardless, but we want the hash to be consistent with the hash provided
+      // for advanced plugins.
+      //
+      // The only potentially counter-intuitive thing here is the `instance` in
+      // the "pluginsetup" event is the value returned by the `plugin` function.
+      triggerSetupEvent(this, {
+        name,
+        plugin,
+        instance: null
+      }, true);
+      const instance = plugin.apply(this, arguments);
+      markPluginAsActive(this, name);
+      triggerSetupEvent(this, {
+        name,
+        plugin,
+        instance
+      });
+      return instance;
+    };
+    Object.keys(plugin).forEach(function (prop) {
+      basicPluginWrapper[prop] = plugin[prop];
+    });
+    return basicPluginWrapper;
+  };
+
+  /**
+   * Takes a plugin sub-class and returns a factory function for generating
+   * instances of it.
+   *
+   * This factory function will replace itself with an instance of the requested
+   * sub-class of Plugin.
+   *
+   * @private
+   * @param   {string} name
+   *          The name of the plugin.
+   *
+   * @param   {Plugin} PluginSubClass
+   *          The advanced plugin.
+   *
+   * @return {Function}
+   */
+  const createPluginFactory = (name, PluginSubClass) => {
+    // Add a `name` property to the plugin prototype so that each plugin can
+    // refer to itself by name.
+    PluginSubClass.prototype.name = name;
+    return function (...args) {
+      triggerSetupEvent(this, {
+        name,
+        plugin: PluginSubClass,
+        instance: null
+      }, true);
+      const instance = new PluginSubClass(...[this, ...args]);
+
+      // The plugin is replaced by a function that returns the current instance.
+      this[name] = () => instance;
+      triggerSetupEvent(this, instance.getEventHash());
+      return instance;
+    };
+  };
+
+  /**
+   * Parent class for all advanced plugins.
+   *
+   * @mixes   module:evented~EventedMixin
+   * @mixes   module:stateful~StatefulMixin
+   * @fires   Player#beforepluginsetup
+   * @fires   Player#beforepluginsetup:$name
+   * @fires   Player#pluginsetup
+   * @fires   Player#pluginsetup:$name
+   * @listens Player#dispose
+   * @throws  {Error}
+   *          If attempting to instantiate the base {@link Plugin} class
+   *          directly instead of via a sub-class.
+   */
+  class Plugin {
+    /**
+     * Creates an instance of this class.
+     *
+     * Sub-classes should call `super` to ensure plugins are properly initialized.
+     *
+     * @param {Player} player
+     *        A Video.js player instance.
+     */
+    constructor(player) {
+      if (this.constructor === Plugin) {
+        throw new Error('Plugin must be sub-classed; not directly instantiated.');
+      }
+      this.player = player;
+      if (!this.log) {
+        this.log = this.player.log.createLogger(this.name);
+      }
+
+      // Make this object evented, but remove the added `trigger` method so we
+      // use the prototype version instead.
+      evented(this);
+      delete this.trigger;
+      stateful(this, this.constructor.defaultState);
+      markPluginAsActive(player, this.name);
+
+      // Auto-bind the dispose method so we can use it as a listener and unbind
+      // it later easily.
+      this.dispose = this.dispose.bind(this);
+
+      // If the player is disposed, dispose the plugin.
+      player.on('dispose', this.dispose);
+    }
+
+    /**
+     * Get the version of the plugin that was set on <pluginName>.VERSION
+     */
+    version() {
+      return this.constructor.VERSION;
+    }
+
+    /**
+     * Each event triggered by plugins includes a hash of additional data with
+     * conventional properties.
+     *
+     * This returns that object or mutates an existing hash.
+     *
+     * @param   {Object} [hash={}]
+     *          An object to be used as event an event hash.
+     *
+     * @return {PluginEventHash}
+     *          An event hash object with provided properties mixed-in.
+     */
+    getEventHash(hash = {}) {
+      hash.name = this.name;
+      hash.plugin = this.constructor;
+      hash.instance = this;
+      return hash;
+    }
+
+    /**
+     * Triggers an event on the plugin object and overrides
+     * {@link module:evented~EventedMixin.trigger|EventedMixin.trigger}.
+     *
+     * @param   {string|Object} event
+     *          An event type or an object with a type property.
+     *
+     * @param   {Object} [hash={}]
+     *          Additional data hash to merge with a
+     *          {@link PluginEventHash|PluginEventHash}.
+     *
+     * @return {boolean}
+     *          Whether or not default was prevented.
+     */
+    trigger(event, hash = {}) {
+      return trigger(this.eventBusEl_, event, this.getEventHash(hash));
+    }
+
+    /**
+     * Handles "statechanged" events on the plugin. No-op by default, override by
+     * subclassing.
+     *
+     * @abstract
+     * @param    {Event} e
+     *           An event object provided by a "statechanged" event.
+     *
+     * @param    {Object} e.changes
+     *           An object describing changes that occurred with the "statechanged"
+     *           event.
+     */
+    handleStateChanged(e) {}
+
+    /**
+     * Disposes a plugin.
+     *
+     * Subclasses can override this if they want, but for the sake of safety,
+     * it's probably best to subscribe the "dispose" event.
+     *
+     * @fires Plugin#dispose
+     */
+    dispose() {
+      const {
+        name,
+        player
+      } = this;
+
+      /**
+       * Signals that a advanced plugin is about to be disposed.
+       *
+       * @event Plugin#dispose
+       * @type  {Event}
+       */
+      this.trigger('dispose');
+      this.off();
+      player.off('dispose', this.dispose);
+
+      // Eliminate any possible sources of leaking memory by clearing up
+      // references between the player and the plugin instance and nulling out
+      // the plugin's state and replacing methods with a function that throws.
+      player[PLUGIN_CACHE_KEY][name] = false;
+      this.player = this.state = null;
+
+      // Finally, replace the plugin name on the player with a new factory
+      // function, so that the plugin is ready to be set up again.
+      player[name] = createPluginFactory(name, pluginStorage[name]);
+    }
+
+    /**
+     * Determines if a plugin is a basic plugin (i.e. not a sub-class of `Plugin`).
+     *
+     * @param   {string|Function} plugin
+     *          If a string, matches the name of a plugin. If a function, will be
+     *          tested directly.
+     *
+     * @return {boolean}
+     *          Whether or not a plugin is a basic plugin.
+     */
+    static isBasic(plugin) {
+      const p = typeof plugin === 'string' ? getPlugin(plugin) : plugin;
+      return typeof p === 'function' && !Plugin.prototype.isPrototypeOf(p.prototype);
+    }
+
+    /**
+     * Register a Video.js plugin.
+     *
+     * @param   {string} name
+     *          The name of the plugin to be registered. Must be a string and
+     *          must not match an existing plugin or a method on the `Player`
+     *          prototype.
+     *
+     * @param   {typeof Plugin|Function} plugin
+     *          A sub-class of `Plugin` or a function for basic plugins.
+     *
+     * @return {typeof Plugin|Function}
+     *          For advanced plugins, a factory function for that plugin. For
+     *          basic plugins, a wrapper function that initializes the plugin.
+     */
+    static registerPlugin(name, plugin) {
+      if (typeof name !== 'string') {
+        throw new Error(`Illegal plugin name, "${name}", must be a string, was ${typeof name}.`);
+      }
+      if (pluginExists(name)) {
+        log$1.warn(`A plugin named "${name}" already exists. You may want to avoid re-registering plugins!`);
+      } else if (Player.prototype.hasOwnProperty(name)) {
+        throw new Error(`Illegal plugin name, "${name}", cannot share a name with an existing player method!`);
+      }
+      if (typeof plugin !== 'function') {
+        throw new Error(`Illegal plugin for "${name}", must be a function, was ${typeof plugin}.`);
+      }
+      pluginStorage[name] = plugin;
+
+      // Add a player prototype method for all sub-classed plugins (but not for
+      // the base Plugin class).
+      if (name !== BASE_PLUGIN_NAME) {
+        if (Plugin.isBasic(plugin)) {
+          Player.prototype[name] = createBasicPlugin(name, plugin);
+        } else {
+          Player.prototype[name] = createPluginFactory(name, plugin);
+        }
+      }
+      return plugin;
+    }
+
+    /**
+     * De-register a Video.js plugin.
+     *
+     * @param  {string} name
+     *         The name of the plugin to be de-registered. Must be a string that
+     *         matches an existing plugin.
+     *
+     * @throws {Error}
+     *         If an attempt is made to de-register the base plugin.
+     */
+    static deregisterPlugin(name) {
+      if (name === BASE_PLUGIN_NAME) {
+        throw new Error('Cannot de-register base plugin.');
+      }
+      if (pluginExists(name)) {
+        delete pluginStorage[name];
+        delete Player.prototype[name];
+      }
+    }
+
+    /**
+     * Gets an object containing multiple Video.js plugins.
+     *
+     * @param   {Array} [names]
+     *          If provided, should be an array of plugin names. Defaults to _all_
+     *          plugin names.
+     *
+     * @return {Object|undefined}
+     *          An object containing plugin(s) associated with their name(s) or
+     *          `undefined` if no matching plugins exist).
+     */
+    static getPlugins(names = Object.keys(pluginStorage)) {
+      let result;
+      names.forEach(name => {
+        const plugin = getPlugin(name);
+        if (plugin) {
+          result = result || {};
+          result[name] = plugin;
+        }
+      });
+      return result;
+    }
+
+    /**
+     * Gets a plugin's version, if available
+     *
+     * @param   {string} name
+     *          The name of a plugin.
+     *
+     * @return {string}
+     *          The plugin's version or an empty string.
+     */
+    static getPluginVersion(name) {
+      const plugin = getPlugin(name);
+      return plugin && plugin.VERSION || '';
+    }
+  }
+
+  /**
+   * Gets a plugin by name if it exists.
+   *
+   * @static
+   * @method   getPlugin
+   * @memberOf Plugin
+   * @param    {string} name
+   *           The name of a plugin.
+   *
+   * @returns  {typeof Plugin|Function|undefined}
+   *           The plugin (or `undefined`).
+   */
+  Plugin.getPlugin = getPlugin;
+
+  /**
+   * The name of the base plugin class as it is registered.
+   *
+   * @type {string}
+   */
+  Plugin.BASE_PLUGIN_NAME = BASE_PLUGIN_NAME;
+  Plugin.registerPlugin(BASE_PLUGIN_NAME, Plugin);
+
+  /**
+   * Documented in player.js
+   *
+   * @ignore
+   */
+  Player.prototype.usingPlugin = function (name) {
+    return !!this[PLUGIN_CACHE_KEY] && this[PLUGIN_CACHE_KEY][name] === true;
+  };
+
+  /**
+   * Documented in player.js
+   *
+   * @ignore
+   */
+  Player.prototype.hasPlugin = function (name) {
+    return !!pluginExists(name);
+  };
+
+  /**
+   * Signals that a plugin is about to be set up on a player.
+   *
+   * @event    Player#beforepluginsetup
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin is about to be set up on a player - by name. The name
+   * is the name of the plugin.
+   *
+   * @event    Player#beforepluginsetup:$name
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin has just been set up on a player.
+   *
+   * @event    Player#pluginsetup
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * Signals that a plugin has just been set up on a player - by name. The name
+   * is the name of the plugin.
+   *
+   * @event    Player#pluginsetup:$name
+   * @type     {PluginEventHash}
+   */
+
+  /**
+   * @typedef  {Object} PluginEventHash
+   *
+   * @property {string} instance
+   *           For basic plugins, the return value of the plugin function. For
+   *           advanced plugins, the plugin instance on which the event is fired.
+   *
+   * @property {string} name
+   *           The name of the plugin.
+   *
+   * @property {string} plugin
+   *           For basic plugins, the plugin function. For advanced plugins, the
+   *           plugin class/constructor.
+   */
+
+  /**
+   * @file deprecate.js
+   * @module deprecate
+   */
+
+  /**
+   * Decorate a function with a deprecation message the first time it is called.
+   *
+   * @param  {string}   message
+   *         A deprecation message to log the first time the returned function
+   *         is called.
+   *
+   * @param  {Function} fn
+   *         The function to be deprecated.
+   *
+   * @return {Function}
+   *         A wrapper function that will log a deprecation warning the first
+   *         time it is called. The return value will be the return value of
+   *         the wrapped function.
+   */
+  function deprecate(message, fn) {
+    let warned = false;
+    return function (...args) {
+      if (!warned) {
+        log$1.warn(message);
+      }
+      warned = true;
+      return fn.apply(this, args);
+    };
+  }
+
+  /**
+   * Internal function used to mark a function as deprecated in the next major
+   * version with consistent messaging.
+   *
+   * @param  {number}   major   The major version where it will be removed
+   * @param  {string}   oldName The old function name
+   * @param  {string}   newName The new function name
+   * @param  {Function} fn      The function to deprecate
+   * @return {Function}         The decorated function
+   */
+  function deprecateForMajor(major, oldName, newName, fn) {
+    return deprecate(`${oldName} is deprecated and will be removed in ${major}.0; please use ${newName} instead.`, fn);
+  }
+
+  var VjsErrors = {
+    UnsupportedSidxContainer: 'unsupported-sidx-container-error',
+    DashManifestSidxParsingError: 'dash-manifest-sidx-parsing-error',
+    HlsPlaylistRequestError: 'hls-playlist-request-error',
+    SegmentUnsupportedMediaFormat: 'segment-unsupported-media-format-error',
+    UnsupportedMediaInitialization: 'unsupported-media-initialization-error',
+    SegmentSwitchError: 'segment-switch-error',
+    SegmentExceedsSourceBufferQuota: 'segment-exceeds-source-buffer-quota-error',
+    SegmentAppendError: 'segment-append-error',
+    VttLoadError: 'vtt-load-error',
+    VttCueParsingError: 'vtt-cue-parsing-error',
+    // Errors used in contrib-ads:
+    AdsBeforePrerollError: 'ads-before-preroll-error',
+    AdsPrerollError: 'ads-preroll-error',
+    AdsMidrollError: 'ads-midroll-error',
+    AdsPostrollError: 'ads-postroll-error',
+    AdsMacroReplacementFailed: 'ads-macro-replacement-failed',
+    AdsResumeContentFailed: 'ads-resume-content-failed',
+    // Errors used in contrib-eme:
+    EMEFailedToRequestMediaKeySystemAccess: 'eme-failed-request-media-key-system-access',
+    EMEFailedToCreateMediaKeys: 'eme-failed-create-media-keys',
+    EMEFailedToAttachMediaKeysToVideoElement: 'eme-failed-attach-media-keys-to-video',
+    EMEFailedToCreateMediaKeySession: 'eme-failed-create-media-key-session',
+    EMEFailedToSetServerCertificate: 'eme-failed-set-server-certificate',
+    EMEFailedToGenerateLicenseRequest: 'eme-failed-generate-license-request',
+    EMEFailedToUpdateSessionWithReceivedLicenseKeys: 'eme-failed-update-session',
+    EMEFailedToCloseSession: 'eme-failed-close-session',
+    EMEFailedToRemoveKeysFromSession: 'eme-failed-remove-keys',
+    EMEFailedToLoadSessionBySessionId: 'eme-failed-load-session'
+  };
+
+  /**
+   * @file video.js
+   * @module videojs
+   */
+
+  /**
+   * Normalize an `id` value by trimming off a leading `#`
+   *
+   * @private
+   * @param   {string} id
+   *          A string, maybe with a leading `#`.
+   *
+   * @return {string}
+   *          The string, without any leading `#`.
+   */
+  const normalizeId = id => id.indexOf('#') === 0 ? id.slice(1) : id;
+
+  /**
+   * A callback that is called when a component is ready. Does not have any
+   * parameters and any callback value will be ignored. See: {@link Component~ReadyCallback}
+   *
+   * @callback ReadyCallback
+   */
+
+  /**
+   * The `videojs()` function doubles as the main function for users to create a
+   * {@link Player} instance as well as the main library namespace.
+   *
+   * It can also be used as a getter for a pre-existing {@link Player} instance.
+   * However, we _strongly_ recommend using `videojs.getPlayer()` for this
+   * purpose because it avoids any potential for unintended initialization.
+   *
+   * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)
+   * of our JSDoc template, we cannot properly document this as both a function
+   * and a namespace, so its function signature is documented here.
+   *
+   * #### Arguments
+   * ##### id
+   * string|Element, **required**
+   *
+   * Video element or video element ID.
+   *
+   * ##### options
+   * Object, optional
+   *
+   * Options object for providing settings.
+   * See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+   *
+   * ##### ready
+   * {@link Component~ReadyCallback}, optional
+   *
+   * A function to be called when the {@link Player} and {@link Tech} are ready.
+   *
+   * #### Return Value
+   *
+   * The `videojs()` function returns a {@link Player} instance.
+   *
+   * @namespace
+   *
+   * @borrows AudioTrack as AudioTrack
+   * @borrows Component.getComponent as getComponent
+   * @borrows module:events.on as on
+   * @borrows module:events.one as one
+   * @borrows module:events.off as off
+   * @borrows module:events.trigger as trigger
+   * @borrows EventTarget as EventTarget
+   * @borrows module:middleware.use as use
+   * @borrows Player.players as players
+   * @borrows Plugin.registerPlugin as registerPlugin
+   * @borrows Plugin.deregisterPlugin as deregisterPlugin
+   * @borrows Plugin.getPlugins as getPlugins
+   * @borrows Plugin.getPlugin as getPlugin
+   * @borrows Plugin.getPluginVersion as getPluginVersion
+   * @borrows Tech.getTech as getTech
+   * @borrows Tech.registerTech as registerTech
+   * @borrows TextTrack as TextTrack
+   * @borrows VideoTrack as VideoTrack
+   *
+   * @param  {string|Element} id
+   *         Video element or video element ID.
+   *
+   * @param  {Object} [options]
+   *         Options object for providing settings.
+   *         See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
+   *
+   * @param  {ReadyCallback} [ready]
+   *         A function to be called when the {@link Player} and {@link Tech} are
+   *         ready.
+   *
+   * @return {Player}
+   *         The `videojs()` function returns a {@link Player|Player} instance.
+   */
+  function videojs(id, options, ready) {
+    let player = videojs.getPlayer(id);
+    if (player) {
+      if (options) {
+        log$1.warn(`Player "${id}" is already initialised. Options will not be applied.`);
+      }
+      if (ready) {
+        player.ready(ready);
+      }
+      return player;
+    }
+    const el = typeof id === 'string' ? $('#' + normalizeId(id)) : id;
+    if (!isEl(el)) {
+      throw new TypeError('The element or ID supplied is not valid. (videojs)');
+    }
+
+    // document.body.contains(el) will only check if el is contained within that one document.
+    // This causes problems for elements in iframes.
+    // Instead, use the element's ownerDocument instead of the global document.
+    // This will make sure that the element is indeed in the dom of that document.
+    // Additionally, check that the document in question has a default view.
+    // If the document is no longer attached to the dom, the defaultView of the document will be null.
+    // If element is inside Shadow DOM (e.g. is part of a Custom element), ownerDocument.body
+    // always returns false. Instead, use the Shadow DOM root.
+    const inShadowDom = 'getRootNode' in el ? el.getRootNode() instanceof window.ShadowRoot : false;
+    const rootNode = inShadowDom ? el.getRootNode() : el.ownerDocument.body;
+    if (!el.ownerDocument.defaultView || !rootNode.contains(el)) {
+      log$1.warn('The element supplied is not included in the DOM');
+    }
+    options = options || {};
+
+    // Store a copy of the el before modification, if it is to be restored in destroy()
+    // If div ingest, store the parent div
+    if (options.restoreEl === true) {
+      options.restoreEl = (el.parentNode && el.parentNode.hasAttribute('data-vjs-player') ? el.parentNode : el).cloneNode(true);
+    }
+    hooks('beforesetup').forEach(hookFunction => {
+      const opts = hookFunction(el, merge$2(options));
+      if (!isObject$1(opts) || Array.isArray(opts)) {
+        log$1.error('please return an object in beforesetup hooks');
+        return;
+      }
+      options = merge$2(options, opts);
+    });
+
+    // We get the current "Player" component here in case an integration has
+    // replaced it with a custom player.
+    const PlayerComponent = Component$1.getComponent('Player');
+    player = new PlayerComponent(el, options, ready);
+    hooks('setup').forEach(hookFunction => hookFunction(player));
+    return player;
+  }
+  videojs.hooks_ = hooks_;
+  videojs.hooks = hooks;
+  videojs.hook = hook;
+  videojs.hookOnce = hookOnce;
+  videojs.removeHook = removeHook;
+
+  // Add default styles
+  if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true && isReal()) {
+    let style = $('.vjs-styles-defaults');
+    if (!style) {
+      style = createStyleElement('vjs-styles-defaults');
+      const head = $('head');
+      if (head) {
+        head.insertBefore(style, head.firstChild);
+      }
+      setTextContent(style, `
+      .video-js {
+        width: 300px;
+        height: 150px;
+      }
+
+      .vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: 56.25%
+      }
+    `);
+    }
+  }
+
+  // Run Auto-load players
+  // You have to wait at least once in case this script is loaded after your
+  // video in the DOM (weird behavior only with minified version)
+  autoSetupTimeout(1, videojs);
+
+  /**
+   * Current Video.js version. Follows [semantic versioning](https://semver.org/).
+   *
+   * @type {string}
+   */
+  videojs.VERSION = version$5;
+
+  /**
+   * The global options object. These are the settings that take effect
+   * if no overrides are specified when the player is created.
+   *
+   * @type {Object}
+   */
+  videojs.options = Player.prototype.options_;
+
+  /**
+   * Get an object with the currently created players, keyed by player ID
+   *
+   * @return {Object}
+   *         The created players
+   */
+  videojs.getPlayers = () => Player.players;
+
+  /**
+   * Get a single player based on an ID or DOM element.
+   *
+   * This is useful if you want to check if an element or ID has an associated
+   * Video.js player, but not create one if it doesn't.
+   *
+   * @param   {string|Element} id
+   *          An HTML element - `<video>`, `<audio>`, or `<video-js>` -
+   *          or a string matching the `id` of such an element.
+   *
+   * @return {Player|undefined}
+   *          A player instance or `undefined` if there is no player instance
+   *          matching the argument.
+   */
+  videojs.getPlayer = id => {
+    const players = Player.players;
+    let tag;
+    if (typeof id === 'string') {
+      const nId = normalizeId(id);
+      const player = players[nId];
+      if (player) {
+        return player;
+      }
+      tag = $('#' + nId);
+    } else {
+      tag = id;
+    }
+    if (isEl(tag)) {
+      const {
+        player,
+        playerId
+      } = tag;
+
+      // Element may have a `player` property referring to an already created
+      // player instance. If so, return that.
+      if (player || players[playerId]) {
+        return player || players[playerId];
+      }
+    }
+  };
+
+  /**
+   * Returns an array of all current players.
+   *
+   * @return {Array}
+   *         An array of all players. The array will be in the order that
+   *         `Object.keys` provides, which could potentially vary between
+   *         JavaScript engines.
+   *
+   */
+  videojs.getAllPlayers = () =>
+  // Disposed players leave a key with a `null` value, so we need to make sure
+  // we filter those out.
+  Object.keys(Player.players).map(k => Player.players[k]).filter(Boolean);
+  videojs.players = Player.players;
+  videojs.getComponent = Component$1.getComponent;
+
+  /**
+   * Register a component so it can referred to by name. Used when adding to other
+   * components, either through addChild `component.addChild('myComponent')` or through
+   * default children options  `{ children: ['myComponent'] }`.
+   *
+   * > NOTE: You could also just initialize the component before adding.
+   * `component.addChild(new MyComponent());`
+   *
+   * @param {string} name
+   *        The class name of the component
+   *
+   * @param {typeof Component} comp
+   *        The component class
+   *
+   * @return {typeof Component}
+   *         The newly registered component
+   */
+  videojs.registerComponent = (name, comp) => {
+    if (Tech.isTech(comp)) {
+      log$1.warn(`The ${name} tech was registered as a component. It should instead be registered using videojs.registerTech(name, tech)`);
+    }
+    return Component$1.registerComponent.call(Component$1, name, comp);
+  };
+  videojs.getTech = Tech.getTech;
+  videojs.registerTech = Tech.registerTech;
+  videojs.use = use;
+
+  /**
+   * An object that can be returned by a middleware to signify
+   * that the middleware is being terminated.
+   *
+   * @type {object}
+   * @property {object} middleware.TERMINATOR
+   */
+  Object.defineProperty(videojs, 'middleware', {
+    value: {},
+    writeable: false,
+    enumerable: true
+  });
+  Object.defineProperty(videojs.middleware, 'TERMINATOR', {
+    value: TERMINATOR,
+    writeable: false,
+    enumerable: true
+  });
+
+  /**
+   * A reference to the {@link module:browser|browser utility module} as an object.
+   *
+   * @type {Object}
+   * @see  {@link module:browser|browser}
+   */
+  videojs.browser = browser;
+
+  /**
+   * A reference to the {@link module:obj|obj utility module} as an object.
+   *
+   * @type {Object}
+   * @see  {@link module:obj|obj}
+   */
+  videojs.obj = Obj;
+
+  /**
+   * Deprecated reference to the {@link module:obj.merge|merge function}
+   *
+   * @type {Function}
+   * @see {@link module:obj.merge|merge}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.obj.merge instead.
+   */
+  videojs.mergeOptions = deprecateForMajor(9, 'videojs.mergeOptions', 'videojs.obj.merge', merge$2);
+
+  /**
+   * Deprecated reference to the {@link module:obj.defineLazyProperty|defineLazyProperty function}
+   *
+   * @type {Function}
+   * @see {@link module:obj.defineLazyProperty|defineLazyProperty}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.obj.defineLazyProperty instead.
+   */
+  videojs.defineLazyProperty = deprecateForMajor(9, 'videojs.defineLazyProperty', 'videojs.obj.defineLazyProperty', defineLazyProperty);
+
+  /**
+   * Deprecated reference to the {@link module:fn.bind_|fn.bind_ function}
+   *
+   * @type {Function}
+   * @see {@link module:fn.bind_|fn.bind_}
+   * @deprecated Deprecated and will be removed in 9.0. Please use native Function.prototype.bind instead.
+   */
+  videojs.bind = deprecateForMajor(9, 'videojs.bind', 'native Function.prototype.bind', bind_);
+  videojs.registerPlugin = Plugin.registerPlugin;
+  videojs.deregisterPlugin = Plugin.deregisterPlugin;
+
+  /**
+   * Deprecated method to register a plugin with Video.js
+   *
+   * @deprecated Deprecated and will be removed in 9.0. Use videojs.registerPlugin() instead.
+   *
+   * @param {string} name
+   *        The plugin name
+  *
+   * @param {typeof Plugin|Function} plugin
+   *         The plugin sub-class or function
+   *
+   * @return {typeof Plugin|Function}
+   */
+  videojs.plugin = (name, plugin) => {
+    log$1.warn('videojs.plugin() is deprecated; use videojs.registerPlugin() instead');
+    return Plugin.registerPlugin(name, plugin);
+  };
+  videojs.getPlugins = Plugin.getPlugins;
+  videojs.getPlugin = Plugin.getPlugin;
+  videojs.getPluginVersion = Plugin.getPluginVersion;
+
+  /**
+   * Adding languages so that they're available to all players.
+   * Example: `videojs.addLanguage('es', { 'Hello': 'Hola' });`
+   *
+   * @param {string} code
+   *        The language code or dictionary property
+   *
+   * @param {Object} data
+   *        The data values to be translated
+   *
+   * @return {Object}
+   *         The resulting language dictionary object
+   */
+  videojs.addLanguage = function (code, data) {
+    code = ('' + code).toLowerCase();
+    videojs.options.languages = merge$2(videojs.options.languages, {
+      [code]: data
+    });
+    return videojs.options.languages[code];
+  };
+
+  /**
+   * A reference to the {@link module:log|log utility module} as an object.
+   *
+   * @type {Function}
+   * @see  {@link module:log|log}
+   */
+  videojs.log = log$1;
+  videojs.createLogger = createLogger;
+
+  /**
+   * A reference to the {@link module:time|time utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:time|time}
+   */
+  videojs.time = Time;
+
+  /**
+   * Deprecated reference to the {@link module:time.createTimeRanges|createTimeRanges function}
+   *
+   * @type {Function}
+   * @see {@link module:time.createTimeRanges|createTimeRanges}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.createTimeRanges instead.
+   */
+  videojs.createTimeRange = deprecateForMajor(9, 'videojs.createTimeRange', 'videojs.time.createTimeRanges', createTimeRanges$1);
+
+  /**
+   * Deprecated reference to the {@link module:time.createTimeRanges|createTimeRanges function}
+   *
+   * @type {Function}
+   * @see {@link module:time.createTimeRanges|createTimeRanges}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.createTimeRanges instead.
+   */
+  videojs.createTimeRanges = deprecateForMajor(9, 'videojs.createTimeRanges', 'videojs.time.createTimeRanges', createTimeRanges$1);
+
+  /**
+   * Deprecated reference to the {@link module:time.formatTime|formatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.formatTime|formatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.format instead.
+   */
+  videojs.formatTime = deprecateForMajor(9, 'videojs.formatTime', 'videojs.time.formatTime', formatTime);
+
+  /**
+   * Deprecated reference to the {@link module:time.setFormatTime|setFormatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.setFormatTime|setFormatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.setFormat instead.
+   */
+  videojs.setFormatTime = deprecateForMajor(9, 'videojs.setFormatTime', 'videojs.time.setFormatTime', setFormatTime);
+
+  /**
+   * Deprecated reference to the {@link module:time.resetFormatTime|resetFormatTime function}
+   *
+   * @type {Function}
+   * @see {@link module:time.resetFormatTime|resetFormatTime}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.time.resetFormat instead.
+   */
+  videojs.resetFormatTime = deprecateForMajor(9, 'videojs.resetFormatTime', 'videojs.time.resetFormatTime', resetFormatTime);
+
+  /**
+   * Deprecated reference to the {@link module:url.parseUrl|Url.parseUrl function}
+   *
+   * @type {Function}
+   * @see {@link module:url.parseUrl|parseUrl}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.url.parseUrl instead.
+   */
+  videojs.parseUrl = deprecateForMajor(9, 'videojs.parseUrl', 'videojs.url.parseUrl', parseUrl);
+
+  /**
+   * Deprecated reference to the {@link module:url.isCrossOrigin|Url.isCrossOrigin function}
+   *
+   * @type {Function}
+   * @see {@link module:url.isCrossOrigin|isCrossOrigin}
+   * @deprecated Deprecated and will be removed in 9.0. Please use videojs.url.isCrossOrigin instead.
+   */
+  videojs.isCrossOrigin = deprecateForMajor(9, 'videojs.isCrossOrigin', 'videojs.url.isCrossOrigin', isCrossOrigin);
+  videojs.EventTarget = EventTarget$2;
+  videojs.any = any;
+  videojs.on = on;
+  videojs.one = one;
+  videojs.off = off;
+  videojs.trigger = trigger;
+
+  /**
+   * A cross-browser XMLHttpRequest wrapper.
+   *
+   * @function
+   * @param    {Object} options
+   *           Settings for the request.
+   *
+   * @return   {XMLHttpRequest|XDomainRequest}
+   *           The request object.
+   *
+   * @see      https://github.com/Raynos/xhr
+   */
+  videojs.xhr = lib;
+  videojs.TextTrack = TextTrack;
+  videojs.AudioTrack = AudioTrack;
+  videojs.VideoTrack = VideoTrack;
+  ['isEl', 'isTextNode', 'createEl', 'hasClass', 'addClass', 'removeClass', 'toggleClass', 'setAttributes', 'getAttributes', 'emptyEl', 'appendContent', 'insertContent'].forEach(k => {
+    videojs[k] = function () {
+      log$1.warn(`videojs.${k}() is deprecated; use videojs.dom.${k}() instead`);
+      return Dom[k].apply(null, arguments);
+    };
+  });
+  videojs.computedStyle = deprecateForMajor(9, 'videojs.computedStyle', 'videojs.dom.computedStyle', computedStyle);
+
+  /**
+   * A reference to the {@link module:dom|DOM utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:dom|dom}
+   */
+  videojs.dom = Dom;
+
+  /**
+   * A reference to the {@link module:fn|fn utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:fn|fn}
+   */
+  videojs.fn = Fn;
+
+  /**
+   * A reference to the {@link module:num|num utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:num|num}
+   */
+  videojs.num = Num;
+
+  /**
+   * A reference to the {@link module:str|str utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:str|str}
+   */
+  videojs.str = Str;
+
+  /**
+   * A reference to the {@link module:url|URL utility module} as an object.
+   *
+   * @type {Object}
+   * @see {@link module:url|url}
+   */
+  videojs.url = Url;
+
+  // The list of possible error types to occur in video.js
+  videojs.Error = VjsErrors;
+
+  createCommonjsModule(function (module, exports) {
+    /*! @name videojs-contrib-quality-levels @version 4.1.0 @license Apache-2.0 */
+    (function (global, factory) {
+      module.exports = factory(videojs) ;
+    })(commonjsGlobal, function (videojs) {
+
+      function _interopDefaultLegacy(e) {
+        return e && typeof e === 'object' && 'default' in e ? e : {
+          'default': e
+        };
+      }
+      var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
+
+      /**
+       * A single QualityLevel.
+       *
+       * interface QualityLevel {
+       *   readonly attribute DOMString id;
+       *            attribute DOMString label;
+       *   readonly attribute long width;
+       *   readonly attribute long height;
+       *   readonly attribute long bitrate;
+       *            attribute boolean enabled;
+       * };
+       *
+       * @class QualityLevel
+       */
+      class QualityLevel {
+        /**
+         * Creates a QualityLevel
+         *
+         * @param {Representation|Object} representation The representation of the quality level
+         * @param {string}   representation.id        Unique id of the QualityLevel
+         * @param {number=}  representation.width     Resolution width of the QualityLevel
+         * @param {number=}  representation.height    Resolution height of the QualityLevel
+         * @param {number}   representation.bandwidth Bitrate of the QualityLevel
+         * @param {number=}  representation.frameRate Frame-rate of the QualityLevel
+         * @param {Function} representation.enabled   Callback to enable/disable QualityLevel
+         */
+        constructor(representation) {
+          let level = this; // eslint-disable-line
+
+          level.id = representation.id;
+          level.label = level.id;
+          level.width = representation.width;
+          level.height = representation.height;
+          level.bitrate = representation.bandwidth;
+          level.frameRate = representation.frameRate;
+          level.enabled_ = representation.enabled;
+          Object.defineProperty(level, 'enabled', {
+            /**
+             * Get whether the QualityLevel is enabled.
+             *
+             * @return {boolean} True if the QualityLevel is enabled.
+             */
+            get() {
+              return level.enabled_();
+            },
+            /**
+             * Enable or disable the QualityLevel.
+             *
+             * @param {boolean} enable true to enable QualityLevel, false to disable.
+             */
+            set(enable) {
+              level.enabled_(enable);
+            }
+          });
+          return level;
+        }
+      }
+
+      /**
+       * A list of QualityLevels.
+       *
+       * interface QualityLevelList : EventTarget {
+       *   getter QualityLevel (unsigned long index);
+       *   readonly attribute unsigned long length;
+       *   readonly attribute long selectedIndex;
+       *
+       *   void addQualityLevel(QualityLevel qualityLevel)
+       *   void removeQualityLevel(QualityLevel remove)
+       *   QualityLevel? getQualityLevelById(DOMString id);
+       *
+       *   attribute EventHandler onchange;
+       *   attribute EventHandler onaddqualitylevel;
+       *   attribute EventHandler onremovequalitylevel;
+       * };
+       *
+       * @extends videojs.EventTarget
+       * @class QualityLevelList
+       */
+      class QualityLevelList extends videojs__default["default"].EventTarget {
+        /**
+         * Creates a QualityLevelList.
+         */
+        constructor() {
+          super();
+          let list = this; // eslint-disable-line
+
+          list.levels_ = [];
+          list.selectedIndex_ = -1;
+
+          /**
+           * Get the index of the currently selected QualityLevel.
+           *
+           * @returns {number} The index of the selected QualityLevel. -1 if none selected.
+           * @readonly
+           */
+          Object.defineProperty(list, 'selectedIndex', {
+            get() {
+              return list.selectedIndex_;
+            }
+          });
+
+          /**
+           * Get the length of the list of QualityLevels.
+           *
+           * @returns {number} The length of the list.
+           * @readonly
+           */
+          Object.defineProperty(list, 'length', {
+            get() {
+              return list.levels_.length;
+            }
+          });
+          list[Symbol.iterator] = () => list.levels_.values();
+          return list;
+        }
+
+        /**
+         * Adds a quality level to the list.
+         *
+         * @param {Representation|Object} representation The representation of the quality level
+         * @param {string}   representation.id        Unique id of the QualityLevel
+         * @param {number=}  representation.width     Resolution width of the QualityLevel
+         * @param {number=}  representation.height    Resolution height of the QualityLevel
+         * @param {number}   representation.bandwidth Bitrate of the QualityLevel
+         * @param {number=}  representation.frameRate Frame-rate of the QualityLevel
+         * @param {Function} representation.enabled   Callback to enable/disable QualityLevel
+         * @return {QualityLevel} the QualityLevel added to the list
+         * @method addQualityLevel
+         */
+        addQualityLevel(representation) {
+          let qualityLevel = this.getQualityLevelById(representation.id);
+
+          // Do not add duplicate quality levels
+          if (qualityLevel) {
+            return qualityLevel;
+          }
+          const index = this.levels_.length;
+          qualityLevel = new QualityLevel(representation);
+          if (!('' + index in this)) {
+            Object.defineProperty(this, index, {
+              get() {
+                return this.levels_[index];
+              }
+            });
+          }
+          this.levels_.push(qualityLevel);
+          this.trigger({
+            qualityLevel,
+            type: 'addqualitylevel'
+          });
+          return qualityLevel;
+        }
+
+        /**
+         * Removes a quality level from the list.
+         *
+         * @param {QualityLevel} qualityLevel The QualityLevel to remove from the list.
+         * @return {QualityLevel|null} the QualityLevel removed or null if nothing removed
+         * @method removeQualityLevel
+         */
+        removeQualityLevel(qualityLevel) {
+          let removed = null;
+          for (let i = 0, l = this.length; i < l; i++) {
+            if (this[i] === qualityLevel) {
+              removed = this.levels_.splice(i, 1)[0];
+              if (this.selectedIndex_ === i) {
+                this.selectedIndex_ = -1;
+              } else if (this.selectedIndex_ > i) {
+                this.selectedIndex_--;
+              }
+              break;
+            }
+          }
+          if (removed) {
+            this.trigger({
+              qualityLevel,
+              type: 'removequalitylevel'
+            });
+          }
+          return removed;
+        }
+
+        /**
+         * Searches for a QualityLevel with the given id.
+         *
+         * @param {string} id The id of the QualityLevel to find.
+         * @return {QualityLevel|null} The QualityLevel with id, or null if not found.
+         * @method getQualityLevelById
+         */
+        getQualityLevelById(id) {
+          for (let i = 0, l = this.length; i < l; i++) {
+            const level = this[i];
+            if (level.id === id) {
+              return level;
+            }
+          }
+          return null;
+        }
+
+        /**
+         * Resets the list of QualityLevels to empty
+         *
+         * @method dispose
+         */
+        dispose() {
+          this.selectedIndex_ = -1;
+          this.levels_.length = 0;
+        }
+      }
+
+      /**
+       * change - The selected QualityLevel has changed.
+       * addqualitylevel - A QualityLevel has been added to the QualityLevelList.
+       * removequalitylevel - A QualityLevel has been removed from the QualityLevelList.
+       */
+      QualityLevelList.prototype.allowedEvents_ = {
+        change: 'change',
+        addqualitylevel: 'addqualitylevel',
+        removequalitylevel: 'removequalitylevel'
+      };
+
+      // emulate attribute EventHandler support to allow for feature detection
+      for (const event in QualityLevelList.prototype.allowedEvents_) {
+        QualityLevelList.prototype['on' + event] = null;
+      }
+      var version = "4.1.0";
+
+      /**
+       * Initialization function for the qualityLevels plugin. Sets up the QualityLevelList and
+       * event handlers.
+       *
+       * @param {Player} player Player object.
+       * @param {Object} options Plugin options object.
+       * @return {QualityLevelList} a list of QualityLevels
+       */
+      const initPlugin = function (player, options) {
+        const originalPluginFn = player.qualityLevels;
+        const qualityLevelList = new QualityLevelList();
+        const disposeHandler = function () {
+          qualityLevelList.dispose();
+          player.qualityLevels = originalPluginFn;
+          player.off('dispose', disposeHandler);
+        };
+        player.on('dispose', disposeHandler);
+        player.qualityLevels = () => qualityLevelList;
+        player.qualityLevels.VERSION = version;
+        return qualityLevelList;
+      };
+
+      /**
+       * A video.js plugin.
+       *
+       * In the plugin function, the value of `this` is a video.js `Player`
+       * instance. You cannot rely on the player being in a "ready" state here,
+       * depending on how the plugin is invoked. This may or may not be important
+       * to you; if not, remove the wait for "ready"!
+       *
+       * @param {Object} options Plugin options object
+       * @return {QualityLevelList} a list of QualityLevels
+       */
+      const qualityLevels = function (options) {
+        return initPlugin(this, videojs__default["default"].obj.merge({}, options));
+      };
+
+      // Register the plugin with video.js.
+      videojs__default["default"].registerPlugin('qualityLevels', qualityLevels);
+
+      // Include the version number.
+      qualityLevels.VERSION = version;
+      return qualityLevels;
+    });
+  });
+
+  var urlToolkit = createCommonjsModule(function (module, exports) {
+    // see https://tools.ietf.org/html/rfc1808
+
+    (function (root) {
+      var URL_REGEX = /^(?=((?:[a-zA-Z0-9+\-.]+:)?))\1(?=((?:\/\/[^\/?#]*)?))\2(?=((?:(?:[^?#\/]*\/)*[^;?#\/]*)?))\3((?:;[^?#]*)?)(\?[^#]*)?(#[^]*)?$/;
+      var FIRST_SEGMENT_REGEX = /^(?=([^\/?#]*))\1([^]*)$/;
+      var SLASH_DOT_REGEX = /(?:\/|^)\.(?=\/)/g;
+      var SLASH_DOT_DOT_REGEX = /(?:\/|^)\.\.\/(?!\.\.\/)[^\/]*(?=\/)/g;
+      var URLToolkit = {
+        // If opts.alwaysNormalize is true then the path will always be normalized even when it starts with / or //
+        // E.g
+        // With opts.alwaysNormalize = false (default, spec compliant)
+        // http://a.com/b/cd + /e/f/../g => http://a.com/e/f/../g
+        // With opts.alwaysNormalize = true (not spec compliant)
+        // http://a.com/b/cd + /e/f/../g => http://a.com/e/g
+        buildAbsoluteURL: function (baseURL, relativeURL, opts) {
+          opts = opts || {};
+          // remove any remaining space and CRLF
+          baseURL = baseURL.trim();
+          relativeURL = relativeURL.trim();
+          if (!relativeURL) {
+            // 2a) If the embedded URL is entirely empty, it inherits the
+            // entire base URL (i.e., is set equal to the base URL)
+            // and we are done.
+            if (!opts.alwaysNormalize) {
+              return baseURL;
+            }
+            var basePartsForNormalise = URLToolkit.parseURL(baseURL);
+            if (!basePartsForNormalise) {
+              throw new Error('Error trying to parse base URL.');
+            }
+            basePartsForNormalise.path = URLToolkit.normalizePath(basePartsForNormalise.path);
+            return URLToolkit.buildURLFromParts(basePartsForNormalise);
+          }
+          var relativeParts = URLToolkit.parseURL(relativeURL);
+          if (!relativeParts) {
+            throw new Error('Error trying to parse relative URL.');
+          }
+          if (relativeParts.scheme) {
+            // 2b) If the embedded URL starts with a scheme name, it is
+            // interpreted as an absolute URL and we are done.
+            if (!opts.alwaysNormalize) {
+              return relativeURL;
+            }
+            relativeParts.path = URLToolkit.normalizePath(relativeParts.path);
+            return URLToolkit.buildURLFromParts(relativeParts);
+          }
+          var baseParts = URLToolkit.parseURL(baseURL);
+          if (!baseParts) {
+            throw new Error('Error trying to parse base URL.');
+          }
+          if (!baseParts.netLoc && baseParts.path && baseParts.path[0] !== '/') {
+            // If netLoc missing and path doesn't start with '/', assume everthing before the first '/' is the netLoc
+            // This causes 'example.com/a' to be handled as '//example.com/a' instead of '/example.com/a'
+            var pathParts = FIRST_SEGMENT_REGEX.exec(baseParts.path);
+            baseParts.netLoc = pathParts[1];
+            baseParts.path = pathParts[2];
+          }
+          if (baseParts.netLoc && !baseParts.path) {
+            baseParts.path = '/';
+          }
+          var builtParts = {
+            // 2c) Otherwise, the embedded URL inherits the scheme of
+            // the base URL.
+            scheme: baseParts.scheme,
+            netLoc: relativeParts.netLoc,
+            path: null,
+            params: relativeParts.params,
+            query: relativeParts.query,
+            fragment: relativeParts.fragment
+          };
+          if (!relativeParts.netLoc) {
+            // 3) If the embedded URL's <net_loc> is non-empty, we skip to
+            // Step 7.  Otherwise, the embedded URL inherits the <net_loc>
+            // (if any) of the base URL.
+            builtParts.netLoc = baseParts.netLoc;
+            // 4) If the embedded URL path is preceded by a slash "/", the
+            // path is not relative and we skip to Step 7.
+            if (relativeParts.path[0] !== '/') {
+              if (!relativeParts.path) {
+                // 5) If the embedded URL path is empty (and not preceded by a
+                // slash), then the embedded URL inherits the base URL path
+                builtParts.path = baseParts.path;
+                // 5a) if the embedded URL's <params> is non-empty, we skip to
+                // step 7; otherwise, it inherits the <params> of the base
+                // URL (if any) and
+                if (!relativeParts.params) {
+                  builtParts.params = baseParts.params;
+                  // 5b) if the embedded URL's <query> is non-empty, we skip to
+                  // step 7; otherwise, it inherits the <query> of the base
+                  // URL (if any) and we skip to step 7.
+                  if (!relativeParts.query) {
+                    builtParts.query = baseParts.query;
+                  }
+                }
+              } else {
+                // 6) The last segment of the base URL's path (anything
+                // following the rightmost slash "/", or the entire path if no
+                // slash is present) is removed and the embedded URL's path is
+                // appended in its place.
+                var baseURLPath = baseParts.path;
+                var newPath = baseURLPath.substring(0, baseURLPath.lastIndexOf('/') + 1) + relativeParts.path;
+                builtParts.path = URLToolkit.normalizePath(newPath);
+              }
+            }
+          }
+          if (builtParts.path === null) {
+            builtParts.path = opts.alwaysNormalize ? URLToolkit.normalizePath(relativeParts.path) : relativeParts.path;
+          }
+          return URLToolkit.buildURLFromParts(builtParts);
+        },
+        parseURL: function (url) {
+          var parts = URL_REGEX.exec(url);
+          if (!parts) {
+            return null;
+          }
+          return {
+            scheme: parts[1] || '',
+            netLoc: parts[2] || '',
+            path: parts[3] || '',
+            params: parts[4] || '',
+            query: parts[5] || '',
+            fragment: parts[6] || ''
+          };
+        },
+        normalizePath: function (path) {
+          // The following operations are
+          // then applied, in order, to the new path:
+          // 6a) All occurrences of "./", where "." is a complete path
+          // segment, are removed.
+          // 6b) If the path ends with "." as a complete path segment,
+          // that "." is removed.
+          path = path.split('').reverse().join('').replace(SLASH_DOT_REGEX, '');
+          // 6c) All occurrences of "<segment>/../", where <segment> is a
+          // complete path segment not equal to "..", are removed.
+          // Removal of these path segments is performed iteratively,
+          // removing the leftmost matching pattern on each iteration,
+          // until no matching pattern remains.
+          // 6d) If the path ends with "<segment>/..", where <segment> is a
+          // complete path segment not equal to "..", that
+          // "<segment>/.." is removed.
+          while (path.length !== (path = path.replace(SLASH_DOT_DOT_REGEX, '')).length) {}
+          return path.split('').reverse().join('');
+        },
+        buildURLFromParts: function (parts) {
+          return parts.scheme + parts.netLoc + parts.path + parts.params + parts.query + parts.fragment;
+        }
+      };
+      module.exports = URLToolkit;
+    })();
+  });
+
+  var DEFAULT_LOCATION = 'http://example.com';
+  var resolveUrl$1 = function resolveUrl(baseUrl, relativeUrl) {
+    // return early if we don't need to resolve
+    if (/^[a-z]+:/i.test(relativeUrl)) {
+      return relativeUrl;
+    } // if baseUrl is a data URI, ignore it and resolve everything relative to window.location
+
+    if (/^data:/.test(baseUrl)) {
+      baseUrl = window.location && window.location.href || '';
+    } // IE11 supports URL but not the URL constructor
+    // feature detect the behavior we want
+
+    var nativeURL = typeof window.URL === 'function';
+    var protocolLess = /^\/\//.test(baseUrl); // remove location if window.location isn't available (i.e. we're in node)
+    // and if baseUrl isn't an absolute url
+
+    var removeLocation = !window.location && !/\/\//i.test(baseUrl); // if the base URL is relative then combine with the current location
+
+    if (nativeURL) {
+      baseUrl = new window.URL(baseUrl, window.location || DEFAULT_LOCATION);
+    } else if (!/\/\//i.test(baseUrl)) {
+      baseUrl = urlToolkit.buildAbsoluteURL(window.location && window.location.href || '', baseUrl);
+    }
+    if (nativeURL) {
+      var newUrl = new URL(relativeUrl, baseUrl); // if we're a protocol-less url, remove the protocol
+      // and if we're location-less, remove the location
+      // otherwise, return the url unmodified
+
+      if (removeLocation) {
+        return newUrl.href.slice(DEFAULT_LOCATION.length);
+      } else if (protocolLess) {
+        return newUrl.href.slice(newUrl.protocol.length);
+      }
+      return newUrl.href;
+    }
+    return urlToolkit.buildAbsoluteURL(baseUrl, relativeUrl);
+  };
+
+  /**
+   * @file stream.js
+   */
+
+  /**
+   * A lightweight readable stream implemention that handles event dispatching.
+   *
+   * @class Stream
+   */
+  var Stream = /*#__PURE__*/function () {
+    function Stream() {
+      this.listeners = {};
+    }
+    /**
+     * Add a listener for a specified event type.
+     *
+     * @param {string} type the event name
+     * @param {Function} listener the callback to be invoked when an event of
+     * the specified type occurs
+     */
+
+    var _proto = Stream.prototype;
+    _proto.on = function on(type, listener) {
+      if (!this.listeners[type]) {
+        this.listeners[type] = [];
+      }
+      this.listeners[type].push(listener);
+    }
+    /**
+     * Remove a listener for a specified event type.
+     *
+     * @param {string} type the event name
+     * @param {Function} listener  a function previously registered for this
+     * type of event through `on`
+     * @return {boolean} if we could turn it off or not
+     */;
+
+    _proto.off = function off(type, listener) {
+      if (!this.listeners[type]) {
+        return false;
+      }
+      var index = this.listeners[type].indexOf(listener); // TODO: which is better?
+      // In Video.js we slice listener functions
+      // on trigger so that it does not mess up the order
+      // while we loop through.
+      //
+      // Here we slice on off so that the loop in trigger
+      // can continue using it's old reference to loop without
+      // messing up the order.
+
+      this.listeners[type] = this.listeners[type].slice(0);
+      this.listeners[type].splice(index, 1);
+      return index > -1;
+    }
+    /**
+     * Trigger an event of the specified type on this stream. Any additional
+     * arguments to this function are passed as parameters to event listeners.
+     *
+     * @param {string} type the event name
+     */;
+
+    _proto.trigger = function trigger(type) {
+      var callbacks = this.listeners[type];
+      if (!callbacks) {
+        return;
+      } // Slicing the arguments on every invocation of this method
+      // can add a significant amount of overhead. Avoid the
+      // intermediate object creation for the common case of a
+      // single callback argument
+
+      if (arguments.length === 2) {
+        var length = callbacks.length;
+        for (var i = 0; i < length; ++i) {
+          callbacks[i].call(this, arguments[1]);
+        }
+      } else {
+        var args = Array.prototype.slice.call(arguments, 1);
+        var _length = callbacks.length;
+        for (var _i = 0; _i < _length; ++_i) {
+          callbacks[_i].apply(this, args);
+        }
+      }
+    }
+    /**
+     * Destroys the stream and cleans up.
+     */;
+
+    _proto.dispose = function dispose() {
+      this.listeners = {};
+    }
+    /**
+     * Forwards all `data` events on this stream to the destination stream. The
+     * destination stream should provide a method `push` to receive the data
+     * events as they arrive.
+     *
+     * @param {Stream} destination the stream that will receive all `data` events
+     * @see http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options
+     */;
+
+    _proto.pipe = function pipe(destination) {
+      this.on('data', function (data) {
+        destination.push(data);
+      });
+    };
+    return Stream;
+  }();
+
+  var atob$1 = function atob(s) {
+    return window.atob ? window.atob(s) : Buffer.from(s, 'base64').toString('binary');
+  };
+  function decodeB64ToUint8Array$1(b64Text) {
+    var decodedString = atob$1(b64Text);
+    var array = new Uint8Array(decodedString.length);
+    for (var i = 0; i < decodedString.length; i++) {
+      array[i] = decodedString.charCodeAt(i);
+    }
+    return array;
+  }
+
+  /*! @name m3u8-parser @version 7.1.0 @license Apache-2.0 */
+
+  /**
+   * @file m3u8/line-stream.js
+   */
+  /**
+   * A stream that buffers string input and generates a `data` event for each
+   * line.
+   *
+   * @class LineStream
+   * @extends Stream
+   */
+
+  class LineStream extends Stream {
+    constructor() {
+      super();
+      this.buffer = '';
+    }
+    /**
+     * Add new data to be parsed.
+     *
+     * @param {string} data the text to process
+     */
+
+    push(data) {
+      let nextNewline;
+      this.buffer += data;
+      nextNewline = this.buffer.indexOf('\n');
+      for (; nextNewline > -1; nextNewline = this.buffer.indexOf('\n')) {
+        this.trigger('data', this.buffer.substring(0, nextNewline));
+        this.buffer = this.buffer.substring(nextNewline + 1);
+      }
+    }
+  }
+  const TAB = String.fromCharCode(0x09);
+  const parseByterange = function (byterangeString) {
+    // optionally match and capture 0+ digits before `@`
+    // optionally match and capture 0+ digits after `@`
+    const match = /([0-9.]*)?@?([0-9.]*)?/.exec(byterangeString || '');
+    const result = {};
+    if (match[1]) {
+      result.length = parseInt(match[1], 10);
+    }
+    if (match[2]) {
+      result.offset = parseInt(match[2], 10);
+    }
+    return result;
+  };
+  /**
+   * "forgiving" attribute list psuedo-grammar:
+   * attributes -> keyvalue (',' keyvalue)*
+   * keyvalue   -> key '=' value
+   * key        -> [^=]*
+   * value      -> '"' [^"]* '"' | [^,]*
+   */
+
+  const attributeSeparator = function () {
+    const key = '[^=]*';
+    const value = '"[^"]*"|[^,]*';
+    const keyvalue = '(?:' + key + ')=(?:' + value + ')';
+    return new RegExp('(?:^|,)(' + keyvalue + ')');
+  };
+  /**
+   * Parse attributes from a line given the separator
+   *
+   * @param {string} attributes the attribute line to parse
+   */
+
+  const parseAttributes$1 = function (attributes) {
+    const result = {};
+    if (!attributes) {
+      return result;
+    } // split the string using attributes as the separator
+
+    const attrs = attributes.split(attributeSeparator());
+    let i = attrs.length;
+    let attr;
+    while (i--) {
+      // filter out unmatched portions of the string
+      if (attrs[i] === '') {
+        continue;
+      } // split the key and value
+
+      attr = /([^=]*)=(.*)/.exec(attrs[i]).slice(1); // trim whitespace and remove optional quotes around the value
+
+      attr[0] = attr[0].replace(/^\s+|\s+$/g, '');
+      attr[1] = attr[1].replace(/^\s+|\s+$/g, '');
+      attr[1] = attr[1].replace(/^['"](.*)['"]$/g, '$1');
+      result[attr[0]] = attr[1];
+    }
+    return result;
+  };
+  /**
+   * A line-level M3U8 parser event stream. It expects to receive input one
+   * line at a time and performs a context-free parse of its contents. A stream
+   * interpretation of a manifest can be useful if the manifest is expected to
+   * be too large to fit comfortably into memory or the entirety of the input
+   * is not immediately available. Otherwise, it's probably much easier to work
+   * with a regular `Parser` object.
+   *
+   * Produces `data` events with an object that captures the parser's
+   * interpretation of the input. That object has a property `tag` that is one
+   * of `uri`, `comment`, or `tag`. URIs only have a single additional
+   * property, `line`, which captures the entirety of the input without
+   * interpretation. Comments similarly have a single additional property
+   * `text` which is the input without the leading `#`.
+   *
+   * Tags always have a property `tagType` which is the lower-cased version of
+   * the M3U8 directive without the `#EXT` or `#EXT-X-` prefix. For instance,
+   * `#EXT-X-MEDIA-SEQUENCE` becomes `media-sequence` when parsed. Unrecognized
+   * tags are given the tag type `unknown` and a single additional property
+   * `data` with the remainder of the input.
+   *
+   * @class ParseStream
+   * @extends Stream
+   */
+
+  class ParseStream extends Stream {
+    constructor() {
+      super();
+      this.customParsers = [];
+      this.tagMappers = [];
+    }
+    /**
+     * Parses an additional line of input.
+     *
+     * @param {string} line a single line of an M3U8 file to parse
+     */
+
+    push(line) {
+      let match;
+      let event; // strip whitespace
+
+      line = line.trim();
+      if (line.length === 0) {
+        // ignore empty lines
+        return;
+      } // URIs
+
+      if (line[0] !== '#') {
+        this.trigger('data', {
+          type: 'uri',
+          uri: line
+        });
+        return;
+      } // map tags
+
+      const newLines = this.tagMappers.reduce((acc, mapper) => {
+        const mappedLine = mapper(line); // skip if unchanged
+
+        if (mappedLine === line) {
+          return acc;
+        }
+        return acc.concat([mappedLine]);
+      }, [line]);
+      newLines.forEach(newLine => {
+        for (let i = 0; i < this.customParsers.length; i++) {
+          if (this.customParsers[i].call(this, newLine)) {
+            return;
+          }
+        } // Comments
+
+        if (newLine.indexOf('#EXT') !== 0) {
+          this.trigger('data', {
+            type: 'comment',
+            text: newLine.slice(1)
+          });
+          return;
+        } // strip off any carriage returns here so the regex matching
+        // doesn't have to account for them.
+
+        newLine = newLine.replace('\r', ''); // Tags
+
+        match = /^#EXTM3U/.exec(newLine);
+        if (match) {
+          this.trigger('data', {
+            type: 'tag',
+            tagType: 'm3u'
+          });
+          return;
+        }
+        match = /^#EXTINF:([0-9\.]*)?,?(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'inf'
+          };
+          if (match[1]) {
+            event.duration = parseFloat(match[1]);
+          }
+          if (match[2]) {
+            event.title = match[2];
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-TARGETDURATION:([0-9.]*)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'targetduration'
+          };
+          if (match[1]) {
+            event.duration = parseInt(match[1], 10);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-VERSION:([0-9.]*)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'version'
+          };
+          if (match[1]) {
+            event.version = parseInt(match[1], 10);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-MEDIA-SEQUENCE:(\-?[0-9.]*)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'media-sequence'
+          };
+          if (match[1]) {
+            event.number = parseInt(match[1], 10);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-DISCONTINUITY-SEQUENCE:(\-?[0-9.]*)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'discontinuity-sequence'
+          };
+          if (match[1]) {
+            event.number = parseInt(match[1], 10);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-PLAYLIST-TYPE:(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'playlist-type'
+          };
+          if (match[1]) {
+            event.playlistType = match[1];
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-BYTERANGE:(.*)?$/.exec(newLine);
+        if (match) {
+          event = _extends$1(parseByterange(match[1]), {
+            type: 'tag',
+            tagType: 'byterange'
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-ALLOW-CACHE:(YES|NO)?/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'allow-cache'
+          };
+          if (match[1]) {
+            event.allowed = !/NO/.test(match[1]);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-MAP:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'map'
+          };
+          if (match[1]) {
+            const attributes = parseAttributes$1(match[1]);
+            if (attributes.URI) {
+              event.uri = attributes.URI;
+            }
+            if (attributes.BYTERANGE) {
+              event.byterange = parseByterange(attributes.BYTERANGE);
+            }
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-STREAM-INF:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'stream-inf'
+          };
+          if (match[1]) {
+            event.attributes = parseAttributes$1(match[1]);
+            if (event.attributes.RESOLUTION) {
+              const split = event.attributes.RESOLUTION.split('x');
+              const resolution = {};
+              if (split[0]) {
+                resolution.width = parseInt(split[0], 10);
+              }
+              if (split[1]) {
+                resolution.height = parseInt(split[1], 10);
+              }
+              event.attributes.RESOLUTION = resolution;
+            }
+            if (event.attributes.BANDWIDTH) {
+              event.attributes.BANDWIDTH = parseInt(event.attributes.BANDWIDTH, 10);
+            }
+            if (event.attributes['FRAME-RATE']) {
+              event.attributes['FRAME-RATE'] = parseFloat(event.attributes['FRAME-RATE']);
+            }
+            if (event.attributes['PROGRAM-ID']) {
+              event.attributes['PROGRAM-ID'] = parseInt(event.attributes['PROGRAM-ID'], 10);
+            }
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-MEDIA:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'media'
+          };
+          if (match[1]) {
+            event.attributes = parseAttributes$1(match[1]);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-ENDLIST/.exec(newLine);
+        if (match) {
+          this.trigger('data', {
+            type: 'tag',
+            tagType: 'endlist'
+          });
+          return;
+        }
+        match = /^#EXT-X-DISCONTINUITY/.exec(newLine);
+        if (match) {
+          this.trigger('data', {
+            type: 'tag',
+            tagType: 'discontinuity'
+          });
+          return;
+        }
+        match = /^#EXT-X-PROGRAM-DATE-TIME:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'program-date-time'
+          };
+          if (match[1]) {
+            event.dateTimeString = match[1];
+            event.dateTimeObject = new Date(match[1]);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-KEY:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'key'
+          };
+          if (match[1]) {
+            event.attributes = parseAttributes$1(match[1]); // parse the IV string into a Uint32Array
+
+            if (event.attributes.IV) {
+              if (event.attributes.IV.substring(0, 2).toLowerCase() === '0x') {
+                event.attributes.IV = event.attributes.IV.substring(2);
+              }
+              event.attributes.IV = event.attributes.IV.match(/.{8}/g);
+              event.attributes.IV[0] = parseInt(event.attributes.IV[0], 16);
+              event.attributes.IV[1] = parseInt(event.attributes.IV[1], 16);
+              event.attributes.IV[2] = parseInt(event.attributes.IV[2], 16);
+              event.attributes.IV[3] = parseInt(event.attributes.IV[3], 16);
+              event.attributes.IV = new Uint32Array(event.attributes.IV);
+            }
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-START:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'start'
+          };
+          if (match[1]) {
+            event.attributes = parseAttributes$1(match[1]);
+            event.attributes['TIME-OFFSET'] = parseFloat(event.attributes['TIME-OFFSET']);
+            event.attributes.PRECISE = /YES/.test(event.attributes.PRECISE);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-CUE-OUT-CONT:(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'cue-out-cont'
+          };
+          if (match[1]) {
+            event.data = match[1];
+          } else {
+            event.data = '';
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-CUE-OUT:(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'cue-out'
+          };
+          if (match[1]) {
+            event.data = match[1];
+          } else {
+            event.data = '';
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-CUE-IN:(.*)?$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'cue-in'
+          };
+          if (match[1]) {
+            event.data = match[1];
+          } else {
+            event.data = '';
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-SKIP:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'skip'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          if (event.attributes.hasOwnProperty('SKIPPED-SEGMENTS')) {
+            event.attributes['SKIPPED-SEGMENTS'] = parseInt(event.attributes['SKIPPED-SEGMENTS'], 10);
+          }
+          if (event.attributes.hasOwnProperty('RECENTLY-REMOVED-DATERANGES')) {
+            event.attributes['RECENTLY-REMOVED-DATERANGES'] = event.attributes['RECENTLY-REMOVED-DATERANGES'].split(TAB);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-PART:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'part'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['DURATION'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseFloat(event.attributes[key]);
+            }
+          });
+          ['INDEPENDENT', 'GAP'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = /YES/.test(event.attributes[key]);
+            }
+          });
+          if (event.attributes.hasOwnProperty('BYTERANGE')) {
+            event.attributes.byterange = parseByterange(event.attributes.BYTERANGE);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-SERVER-CONTROL:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'server-control'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['CAN-SKIP-UNTIL', 'PART-HOLD-BACK', 'HOLD-BACK'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseFloat(event.attributes[key]);
+            }
+          });
+          ['CAN-SKIP-DATERANGES', 'CAN-BLOCK-RELOAD'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = /YES/.test(event.attributes[key]);
+            }
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-PART-INF:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'part-inf'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['PART-TARGET'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseFloat(event.attributes[key]);
+            }
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-PRELOAD-HINT:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'preload-hint'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['BYTERANGE-START', 'BYTERANGE-LENGTH'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseInt(event.attributes[key], 10);
+              const subkey = key === 'BYTERANGE-LENGTH' ? 'length' : 'offset';
+              event.attributes.byterange = event.attributes.byterange || {};
+              event.attributes.byterange[subkey] = event.attributes[key]; // only keep the parsed byterange object.
+
+              delete event.attributes[key];
+            }
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-RENDITION-REPORT:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'rendition-report'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['LAST-MSN', 'LAST-PART'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseInt(event.attributes[key], 10);
+            }
+          });
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-DATERANGE:(.*)$/.exec(newLine);
+        if (match && match[1]) {
+          event = {
+            type: 'tag',
+            tagType: 'daterange'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          ['ID', 'CLASS'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = String(event.attributes[key]);
+            }
+          });
+          ['START-DATE', 'END-DATE'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = new Date(event.attributes[key]);
+            }
+          });
+          ['DURATION', 'PLANNED-DURATION'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = parseFloat(event.attributes[key]);
+            }
+          });
+          ['END-ON-NEXT'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = /YES/i.test(event.attributes[key]);
+            }
+          });
+          ['SCTE35-CMD', ' SCTE35-OUT', 'SCTE35-IN'].forEach(function (key) {
+            if (event.attributes.hasOwnProperty(key)) {
+              event.attributes[key] = event.attributes[key].toString(16);
+            }
+          });
+          const clientAttributePattern = /^X-([A-Z]+-)+[A-Z]+$/;
+          for (const key in event.attributes) {
+            if (!clientAttributePattern.test(key)) {
+              continue;
+            }
+            const isHexaDecimal = /[0-9A-Fa-f]{6}/g.test(event.attributes[key]);
+            const isDecimalFloating = /^\d+(\.\d+)?$/.test(event.attributes[key]);
+            event.attributes[key] = isHexaDecimal ? event.attributes[key].toString(16) : isDecimalFloating ? parseFloat(event.attributes[key]) : String(event.attributes[key]);
+          }
+          this.trigger('data', event);
+          return;
+        }
+        match = /^#EXT-X-INDEPENDENT-SEGMENTS/.exec(newLine);
+        if (match) {
+          this.trigger('data', {
+            type: 'tag',
+            tagType: 'independent-segments'
+          });
+          return;
+        }
+        match = /^#EXT-X-CONTENT-STEERING:(.*)$/.exec(newLine);
+        if (match) {
+          event = {
+            type: 'tag',
+            tagType: 'content-steering'
+          };
+          event.attributes = parseAttributes$1(match[1]);
+          this.trigger('data', event);
+          return;
+        } // unknown tag type
+
+        this.trigger('data', {
+          type: 'tag',
+          data: newLine.slice(4)
+        });
+      });
+    }
+    /**
+     * Add a parser for custom headers
+     *
+     * @param {Object}   options              a map of options for the added parser
+     * @param {RegExp}   options.expression   a regular expression to match the custom header
+     * @param {string}   options.customType   the custom type to register to the output
+     * @param {Function} [options.dataParser] function to parse the line into an object
+     * @param {boolean}  [options.segment]    should tag data be attached to the segment object
+     */
+
+    addParser({
+      expression,
+      customType,
+      dataParser,
+      segment
+    }) {
+      if (typeof dataParser !== 'function') {
+        dataParser = line => line;
+      }
+      this.customParsers.push(line => {
+        const match = expression.exec(line);
+        if (match) {
+          this.trigger('data', {
+            type: 'custom',
+            data: dataParser(line),
+            customType,
+            segment
+          });
+          return true;
+        }
+      });
+    }
+    /**
+     * Add a custom header mapper
+     *
+     * @param {Object}   options
+     * @param {RegExp}   options.expression   a regular expression to match the custom header
+     * @param {Function} options.map          function to translate tag into a different tag
+     */
+
+    addTagMapper({
+      expression,
+      map
+    }) {
+      const mapFn = line => {
+        if (expression.test(line)) {
+          return map(line);
+        }
+        return line;
+      };
+      this.tagMappers.push(mapFn);
+    }
+  }
+  const camelCase = str => str.toLowerCase().replace(/-(\w)/g, a => a[1].toUpperCase());
+  const camelCaseKeys = function (attributes) {
+    const result = {};
+    Object.keys(attributes).forEach(function (key) {
+      result[camelCase(key)] = attributes[key];
+    });
+    return result;
+  }; // set SERVER-CONTROL hold back based upon targetDuration and partTargetDuration
+  // we need this helper because defaults are based upon targetDuration and
+  // partTargetDuration being set, but they may not be if SERVER-CONTROL appears before
+  // target durations are set.
+
+  const setHoldBack = function (manifest) {
+    const {
+      serverControl,
+      targetDuration,
+      partTargetDuration
+    } = manifest;
+    if (!serverControl) {
+      return;
+    }
+    const tag = '#EXT-X-SERVER-CONTROL';
+    const hb = 'holdBack';
+    const phb = 'partHoldBack';
+    const minTargetDuration = targetDuration && targetDuration * 3;
+    const minPartDuration = partTargetDuration && partTargetDuration * 2;
+    if (targetDuration && !serverControl.hasOwnProperty(hb)) {
+      serverControl[hb] = minTargetDuration;
+      this.trigger('info', {
+        message: `${tag} defaulting HOLD-BACK to targetDuration * 3 (${minTargetDuration}).`
+      });
+    }
+    if (minTargetDuration && serverControl[hb] < minTargetDuration) {
+      this.trigger('warn', {
+        message: `${tag} clamping HOLD-BACK (${serverControl[hb]}) to targetDuration * 3 (${minTargetDuration})`
+      });
+      serverControl[hb] = minTargetDuration;
+    } // default no part hold back to part target duration * 3
+
+    if (partTargetDuration && !serverControl.hasOwnProperty(phb)) {
+      serverControl[phb] = partTargetDuration * 3;
+      this.trigger('info', {
+        message: `${tag} defaulting PART-HOLD-BACK to partTargetDuration * 3 (${serverControl[phb]}).`
+      });
+    } // if part hold back is too small default it to part target duration * 2
+
+    if (partTargetDuration && serverControl[phb] < minPartDuration) {
+      this.trigger('warn', {
+        message: `${tag} clamping PART-HOLD-BACK (${serverControl[phb]}) to partTargetDuration * 2 (${minPartDuration}).`
+      });
+      serverControl[phb] = minPartDuration;
+    }
+  };
+  /**
+   * A parser for M3U8 files. The current interpretation of the input is
+   * exposed as a property `manifest` on parser objects. It's just two lines to
+   * create and parse a manifest once you have the contents available as a string:
+   *
+   * ```js
+   * var parser = new m3u8.Parser();
+   * parser.push(xhr.responseText);
+   * ```
+   *
+   * New input can later be applied to update the manifest object by calling
+   * `push` again.
+   *
+   * The parser attempts to create a usable manifest object even if the
+   * underlying input is somewhat nonsensical. It emits `info` and `warning`
+   * events during the parse if it encounters input that seems invalid or
+   * requires some property of the manifest object to be defaulted.
+   *
+   * @class Parser
+   * @extends Stream
+   */
+
+  class Parser extends Stream {
+    constructor() {
+      super();
+      this.lineStream = new LineStream();
+      this.parseStream = new ParseStream();
+      this.lineStream.pipe(this.parseStream);
+      this.lastProgramDateTime = null;
+      /* eslint-disable consistent-this */
+
+      const self = this;
+      /* eslint-enable consistent-this */
+
+      const uris = [];
+      let currentUri = {}; // if specified, the active EXT-X-MAP definition
+
+      let currentMap; // if specified, the active decryption key
+
+      let key;
+      let hasParts = false;
+      const noop = function () {};
+      const defaultMediaGroups = {
+        'AUDIO': {},
+        'VIDEO': {},
+        'CLOSED-CAPTIONS': {},
+        'SUBTITLES': {}
+      }; // This is the Widevine UUID from DASH IF IOP. The same exact string is
+      // used in MPDs with Widevine encrypted streams.
+
+      const widevineUuid = 'urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed'; // group segments into numbered timelines delineated by discontinuities
+
+      let currentTimeline = 0; // the manifest is empty until the parse stream begins delivering data
+
+      this.manifest = {
+        allowCache: true,
+        discontinuityStarts: [],
+        dateRanges: [],
+        segments: []
+      }; // keep track of the last seen segment's byte range end, as segments are not required
+      // to provide the offset, in which case it defaults to the next byte after the
+      // previous segment
+
+      let lastByterangeEnd = 0; // keep track of the last seen part's byte range end.
+
+      let lastPartByterangeEnd = 0;
+      const dateRangeTags = {};
+      this.on('end', () => {
+        // only add preloadSegment if we don't yet have a uri for it.
+        // and we actually have parts/preloadHints
+        if (currentUri.uri || !currentUri.parts && !currentUri.preloadHints) {
+          return;
+        }
+        if (!currentUri.map && currentMap) {
+          currentUri.map = currentMap;
+        }
+        if (!currentUri.key && key) {
+          currentUri.key = key;
+        }
+        if (!currentUri.timeline && typeof currentTimeline === 'number') {
+          currentUri.timeline = currentTimeline;
+        }
+        this.manifest.preloadSegment = currentUri;
+      }); // update the manifest with the m3u8 entry from the parse stream
+
+      this.parseStream.on('data', function (entry) {
+        let mediaGroup;
+        let rendition;
+        ({
+          tag() {
+            // switch based on the tag type
+            (({
+              version() {
+                if (entry.version) {
+                  this.manifest.version = entry.version;
+                }
+              },
+              'allow-cache'() {
+                this.manifest.allowCache = entry.allowed;
+                if (!('allowed' in entry)) {
+                  this.trigger('info', {
+                    message: 'defaulting allowCache to YES'
+                  });
+                  this.manifest.allowCache = true;
+                }
+              },
+              byterange() {
+                const byterange = {};
+                if ('length' in entry) {
+                  currentUri.byterange = byterange;
+                  byterange.length = entry.length;
+                  if (!('offset' in entry)) {
+                    /*
+                     * From the latest spec (as of this writing):
+                     * https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.2.2
+                     *
+                     * Same text since EXT-X-BYTERANGE's introduction in draft 7:
+                     * https://tools.ietf.org/html/draft-pantos-http-live-streaming-07#section-3.3.1)
+                     *
+                     * "If o [offset] is not present, the sub-range begins at the next byte
+                     * following the sub-range of the previous media segment."
+                     */
+                    entry.offset = lastByterangeEnd;
+                  }
+                }
+                if ('offset' in entry) {
+                  currentUri.byterange = byterange;
+                  byterange.offset = entry.offset;
+                }
+                lastByterangeEnd = byterange.offset + byterange.length;
+              },
+              endlist() {
+                this.manifest.endList = true;
+              },
+              inf() {
+                if (!('mediaSequence' in this.manifest)) {
+                  this.manifest.mediaSequence = 0;
+                  this.trigger('info', {
+                    message: 'defaulting media sequence to zero'
+                  });
+                }
+                if (!('discontinuitySequence' in this.manifest)) {
+                  this.manifest.discontinuitySequence = 0;
+                  this.trigger('info', {
+                    message: 'defaulting discontinuity sequence to zero'
+                  });
+                }
+                if (entry.title) {
+                  currentUri.title = entry.title;
+                }
+                if (entry.duration > 0) {
+                  currentUri.duration = entry.duration;
+                }
+                if (entry.duration === 0) {
+                  currentUri.duration = 0.01;
+                  this.trigger('info', {
+                    message: 'updating zero segment duration to a small value'
+                  });
+                }
+                this.manifest.segments = uris;
+              },
+              key() {
+                if (!entry.attributes) {
+                  this.trigger('warn', {
+                    message: 'ignoring key declaration without attribute list'
+                  });
+                  return;
+                } // clear the active encryption key
+
+                if (entry.attributes.METHOD === 'NONE') {
+                  key = null;
+                  return;
+                }
+                if (!entry.attributes.URI) {
+                  this.trigger('warn', {
+                    message: 'ignoring key declaration without URI'
+                  });
+                  return;
+                }
+                if (entry.attributes.KEYFORMAT === 'com.apple.streamingkeydelivery') {
+                  this.manifest.contentProtection = this.manifest.contentProtection || {}; // TODO: add full support for this.
+
+                  this.manifest.contentProtection['com.apple.fps.1_0'] = {
+                    attributes: entry.attributes
+                  };
+                  return;
+                }
+                if (entry.attributes.KEYFORMAT === 'com.microsoft.playready') {
+                  this.manifest.contentProtection = this.manifest.contentProtection || {}; // TODO: add full support for this.
+
+                  this.manifest.contentProtection['com.microsoft.playready'] = {
+                    uri: entry.attributes.URI
+                  };
+                  return;
+                } // check if the content is encrypted for Widevine
+                // Widevine/HLS spec: https://storage.googleapis.com/wvdocs/Widevine_DRM_HLS.pdf
+
+                if (entry.attributes.KEYFORMAT === widevineUuid) {
+                  const VALID_METHODS = ['SAMPLE-AES', 'SAMPLE-AES-CTR', 'SAMPLE-AES-CENC'];
+                  if (VALID_METHODS.indexOf(entry.attributes.METHOD) === -1) {
+                    this.trigger('warn', {
+                      message: 'invalid key method provided for Widevine'
+                    });
+                    return;
+                  }
+                  if (entry.attributes.METHOD === 'SAMPLE-AES-CENC') {
+                    this.trigger('warn', {
+                      message: 'SAMPLE-AES-CENC is deprecated, please use SAMPLE-AES-CTR instead'
+                    });
+                  }
+                  if (entry.attributes.URI.substring(0, 23) !== 'data:text/plain;base64,') {
+                    this.trigger('warn', {
+                      message: 'invalid key URI provided for Widevine'
+                    });
+                    return;
+                  }
+                  if (!(entry.attributes.KEYID && entry.attributes.KEYID.substring(0, 2) === '0x')) {
+                    this.trigger('warn', {
+                      message: 'invalid key ID provided for Widevine'
+                    });
+                    return;
+                  } // if Widevine key attributes are valid, store them as `contentProtection`
+                  // on the manifest to emulate Widevine tag structure in a DASH mpd
+
+                  this.manifest.contentProtection = this.manifest.contentProtection || {};
+                  this.manifest.contentProtection['com.widevine.alpha'] = {
+                    attributes: {
+                      schemeIdUri: entry.attributes.KEYFORMAT,
+                      // remove '0x' from the key id string
+                      keyId: entry.attributes.KEYID.substring(2)
+                    },
+                    // decode the base64-encoded PSSH box
+                    pssh: decodeB64ToUint8Array$1(entry.attributes.URI.split(',')[1])
+                  };
+                  return;
+                }
+                if (!entry.attributes.METHOD) {
+                  this.trigger('warn', {
+                    message: 'defaulting key method to AES-128'
+                  });
+                } // setup an encryption key for upcoming segments
+
+                key = {
+                  method: entry.attributes.METHOD || 'AES-128',
+                  uri: entry.attributes.URI
+                };
+                if (typeof entry.attributes.IV !== 'undefined') {
+                  key.iv = entry.attributes.IV;
+                }
+              },
+              'media-sequence'() {
+                if (!isFinite(entry.number)) {
+                  this.trigger('warn', {
+                    message: 'ignoring invalid media sequence: ' + entry.number
+                  });
+                  return;
+                }
+                this.manifest.mediaSequence = entry.number;
+              },
+              'discontinuity-sequence'() {
+                if (!isFinite(entry.number)) {
+                  this.trigger('warn', {
+                    message: 'ignoring invalid discontinuity sequence: ' + entry.number
+                  });
+                  return;
+                }
+                this.manifest.discontinuitySequence = entry.number;
+                currentTimeline = entry.number;
+              },
+              'playlist-type'() {
+                if (!/VOD|EVENT/.test(entry.playlistType)) {
+                  this.trigger('warn', {
+                    message: 'ignoring unknown playlist type: ' + entry.playlist
+                  });
+                  return;
+                }
+                this.manifest.playlistType = entry.playlistType;
+              },
+              map() {
+                currentMap = {};
+                if (entry.uri) {
+                  currentMap.uri = entry.uri;
+                }
+                if (entry.byterange) {
+                  currentMap.byterange = entry.byterange;
+                }
+                if (key) {
+                  currentMap.key = key;
+                }
+              },
+              'stream-inf'() {
+                this.manifest.playlists = uris;
+                this.manifest.mediaGroups = this.manifest.mediaGroups || defaultMediaGroups;
+                if (!entry.attributes) {
+                  this.trigger('warn', {
+                    message: 'ignoring empty stream-inf attributes'
+                  });
+                  return;
+                }
+                if (!currentUri.attributes) {
+                  currentUri.attributes = {};
+                }
+                _extends$1(currentUri.attributes, entry.attributes);
+              },
+              media() {
+                this.manifest.mediaGroups = this.manifest.mediaGroups || defaultMediaGroups;
+                if (!(entry.attributes && entry.attributes.TYPE && entry.attributes['GROUP-ID'] && entry.attributes.NAME)) {
+                  this.trigger('warn', {
+                    message: 'ignoring incomplete or missing media group'
+                  });
+                  return;
+                } // find the media group, creating defaults as necessary
+
+                const mediaGroupType = this.manifest.mediaGroups[entry.attributes.TYPE];
+                mediaGroupType[entry.attributes['GROUP-ID']] = mediaGroupType[entry.attributes['GROUP-ID']] || {};
+                mediaGroup = mediaGroupType[entry.attributes['GROUP-ID']]; // collect the rendition metadata
+
+                rendition = {
+                  default: /yes/i.test(entry.attributes.DEFAULT)
+                };
+                if (rendition.default) {
+                  rendition.autoselect = true;
+                } else {
+                  rendition.autoselect = /yes/i.test(entry.attributes.AUTOSELECT);
+                }
+                if (entry.attributes.LANGUAGE) {
+                  rendition.language = entry.attributes.LANGUAGE;
+                }
+                if (entry.attributes.URI) {
+                  rendition.uri = entry.attributes.URI;
+                }
+                if (entry.attributes['INSTREAM-ID']) {
+                  rendition.instreamId = entry.attributes['INSTREAM-ID'];
+                }
+                if (entry.attributes.CHARACTERISTICS) {
+                  rendition.characteristics = entry.attributes.CHARACTERISTICS;
+                }
+                if (entry.attributes.FORCED) {
+                  rendition.forced = /yes/i.test(entry.attributes.FORCED);
+                } // insert the new rendition
+
+                mediaGroup[entry.attributes.NAME] = rendition;
+              },
+              discontinuity() {
+                currentTimeline += 1;
+                currentUri.discontinuity = true;
+                this.manifest.discontinuityStarts.push(uris.length);
+              },
+              'program-date-time'() {
+                if (typeof this.manifest.dateTimeString === 'undefined') {
+                  // PROGRAM-DATE-TIME is a media-segment tag, but for backwards
+                  // compatibility, we add the first occurence of the PROGRAM-DATE-TIME tag
+                  // to the manifest object
+                  // TODO: Consider removing this in future major version
+                  this.manifest.dateTimeString = entry.dateTimeString;
+                  this.manifest.dateTimeObject = entry.dateTimeObject;
+                }
+                currentUri.dateTimeString = entry.dateTimeString;
+                currentUri.dateTimeObject = entry.dateTimeObject;
+                const {
+                  lastProgramDateTime
+                } = this;
+                this.lastProgramDateTime = new Date(entry.dateTimeString).getTime(); // We should extrapolate Program Date Time backward only during first program date time occurrence.
+                // Once we have at least one program date time point, we can always extrapolate it forward using lastProgramDateTime reference.
+
+                if (lastProgramDateTime === null) {
+                  // Extrapolate Program Date Time backward
+                  // Since it is first program date time occurrence we're assuming that
+                  // all this.manifest.segments have no program date time info
+                  this.manifest.segments.reduceRight((programDateTime, segment) => {
+                    segment.programDateTime = programDateTime - segment.duration * 1000;
+                    return segment.programDateTime;
+                  }, this.lastProgramDateTime);
+                }
+              },
+              targetduration() {
+                if (!isFinite(entry.duration) || entry.duration < 0) {
+                  this.trigger('warn', {
+                    message: 'ignoring invalid target duration: ' + entry.duration
+                  });
+                  return;
+                }
+                this.manifest.targetDuration = entry.duration;
+                setHoldBack.call(this, this.manifest);
+              },
+              start() {
+                if (!entry.attributes || isNaN(entry.attributes['TIME-OFFSET'])) {
+                  this.trigger('warn', {
+                    message: 'ignoring start declaration without appropriate attribute list'
+                  });
+                  return;
+                }
+                this.manifest.start = {
+                  timeOffset: entry.attributes['TIME-OFFSET'],
+                  precise: entry.attributes.PRECISE
+                };
+              },
+              'cue-out'() {
+                currentUri.cueOut = entry.data;
+              },
+              'cue-out-cont'() {
+                currentUri.cueOutCont = entry.data;
+              },
+              'cue-in'() {
+                currentUri.cueIn = entry.data;
+              },
+              'skip'() {
+                this.manifest.skip = camelCaseKeys(entry.attributes);
+                this.warnOnMissingAttributes_('#EXT-X-SKIP', entry.attributes, ['SKIPPED-SEGMENTS']);
+              },
+              'part'() {
+                hasParts = true; // parts are always specifed before a segment
+
+                const segmentIndex = this.manifest.segments.length;
+                const part = camelCaseKeys(entry.attributes);
+                currentUri.parts = currentUri.parts || [];
+                currentUri.parts.push(part);
+                if (part.byterange) {
+                  if (!part.byterange.hasOwnProperty('offset')) {
+                    part.byterange.offset = lastPartByterangeEnd;
+                  }
+                  lastPartByterangeEnd = part.byterange.offset + part.byterange.length;
+                }
+                const partIndex = currentUri.parts.length - 1;
+                this.warnOnMissingAttributes_(`#EXT-X-PART #${partIndex} for segment #${segmentIndex}`, entry.attributes, ['URI', 'DURATION']);
+                if (this.manifest.renditionReports) {
+                  this.manifest.renditionReports.forEach((r, i) => {
+                    if (!r.hasOwnProperty('lastPart')) {
+                      this.trigger('warn', {
+                        message: `#EXT-X-RENDITION-REPORT #${i} lacks required attribute(s): LAST-PART`
+                      });
+                    }
+                  });
+                }
+              },
+              'server-control'() {
+                const attrs = this.manifest.serverControl = camelCaseKeys(entry.attributes);
+                if (!attrs.hasOwnProperty('canBlockReload')) {
+                  attrs.canBlockReload = false;
+                  this.trigger('info', {
+                    message: '#EXT-X-SERVER-CONTROL defaulting CAN-BLOCK-RELOAD to false'
+                  });
+                }
+                setHoldBack.call(this, this.manifest);
+                if (attrs.canSkipDateranges && !attrs.hasOwnProperty('canSkipUntil')) {
+                  this.trigger('warn', {
+                    message: '#EXT-X-SERVER-CONTROL lacks required attribute CAN-SKIP-UNTIL which is required when CAN-SKIP-DATERANGES is set'
+                  });
+                }
+              },
+              'preload-hint'() {
+                // parts are always specifed before a segment
+                const segmentIndex = this.manifest.segments.length;
+                const hint = camelCaseKeys(entry.attributes);
+                const isPart = hint.type && hint.type === 'PART';
+                currentUri.preloadHints = currentUri.preloadHints || [];
+                currentUri.preloadHints.push(hint);
+                if (hint.byterange) {
+                  if (!hint.byterange.hasOwnProperty('offset')) {
+                    // use last part byterange end or zero if not a part.
+                    hint.byterange.offset = isPart ? lastPartByterangeEnd : 0;
+                    if (isPart) {
+                      lastPartByterangeEnd = hint.byterange.offset + hint.byterange.length;
+                    }
+                  }
+                }
+                const index = currentUri.preloadHints.length - 1;
+                this.warnOnMissingAttributes_(`#EXT-X-PRELOAD-HINT #${index} for segment #${segmentIndex}`, entry.attributes, ['TYPE', 'URI']);
+                if (!hint.type) {
+                  return;
+                } // search through all preload hints except for the current one for
+                // a duplicate type.
+
+                for (let i = 0; i < currentUri.preloadHints.length - 1; i++) {
+                  const otherHint = currentUri.preloadHints[i];
+                  if (!otherHint.type) {
+                    continue;
+                  }
+                  if (otherHint.type === hint.type) {
+                    this.trigger('warn', {
+                      message: `#EXT-X-PRELOAD-HINT #${index} for segment #${segmentIndex} has the same TYPE ${hint.type} as preload hint #${i}`
+                    });
+                  }
+                }
+              },
+              'rendition-report'() {
+                const report = camelCaseKeys(entry.attributes);
+                this.manifest.renditionReports = this.manifest.renditionReports || [];
+                this.manifest.renditionReports.push(report);
+                const index = this.manifest.renditionReports.length - 1;
+                const required = ['LAST-MSN', 'URI'];
+                if (hasParts) {
+                  required.push('LAST-PART');
+                }
+                this.warnOnMissingAttributes_(`#EXT-X-RENDITION-REPORT #${index}`, entry.attributes, required);
+              },
+              'part-inf'() {
+                this.manifest.partInf = camelCaseKeys(entry.attributes);
+                this.warnOnMissingAttributes_('#EXT-X-PART-INF', entry.attributes, ['PART-TARGET']);
+                if (this.manifest.partInf.partTarget) {
+                  this.manifest.partTargetDuration = this.manifest.partInf.partTarget;
+                }
+                setHoldBack.call(this, this.manifest);
+              },
+              'daterange'() {
+                this.manifest.dateRanges.push(camelCaseKeys(entry.attributes));
+                const index = this.manifest.dateRanges.length - 1;
+                this.warnOnMissingAttributes_(`#EXT-X-DATERANGE #${index}`, entry.attributes, ['ID', 'START-DATE']);
+                const dateRange = this.manifest.dateRanges[index];
+                if (dateRange.endDate && dateRange.startDate && new Date(dateRange.endDate) < new Date(dateRange.startDate)) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE END-DATE must be equal to or later than the value of the START-DATE'
+                  });
+                }
+                if (dateRange.duration && dateRange.duration < 0) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE DURATION must not be negative'
+                  });
+                }
+                if (dateRange.plannedDuration && dateRange.plannedDuration < 0) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE PLANNED-DURATION must not be negative'
+                  });
+                }
+                const endOnNextYes = !!dateRange.endOnNext;
+                if (endOnNextYes && !dateRange.class) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE with an END-ON-NEXT=YES attribute must have a CLASS attribute'
+                  });
+                }
+                if (endOnNextYes && (dateRange.duration || dateRange.endDate)) {
+                  this.trigger('warn', {
+                    message: 'EXT-X-DATERANGE with an END-ON-NEXT=YES attribute must not contain DURATION or END-DATE attributes'
+                  });
+                }
+                if (dateRange.duration && dateRange.endDate) {
+                  const startDate = dateRange.startDate;
+                  const newDateInSeconds = startDate.getTime() + dateRange.duration * 1000;
+                  this.manifest.dateRanges[index].endDate = new Date(newDateInSeconds);
+                }
+                if (!dateRangeTags[dateRange.id]) {
+                  dateRangeTags[dateRange.id] = dateRange;
+                } else {
+                  for (const attribute in dateRangeTags[dateRange.id]) {
+                    if (!!dateRange[attribute] && JSON.stringify(dateRangeTags[dateRange.id][attribute]) !== JSON.stringify(dateRange[attribute])) {
+                      this.trigger('warn', {
+                        message: 'EXT-X-DATERANGE tags with the same ID in a playlist must have the same attributes values'
+                      });
+                      break;
+                    }
+                  } // if tags with the same ID do not have conflicting attributes, merge them
+
+                  const dateRangeWithSameId = this.manifest.dateRanges.findIndex(dateRangeToFind => dateRangeToFind.id === dateRange.id);
+                  this.manifest.dateRanges[dateRangeWithSameId] = _extends$1(this.manifest.dateRanges[dateRangeWithSameId], dateRange);
+                  dateRangeTags[dateRange.id] = _extends$1(dateRangeTags[dateRange.id], dateRange); // after merging, delete the duplicate dateRange that was added last
+
+                  this.manifest.dateRanges.pop();
+                }
+              },
+              'independent-segments'() {
+                this.manifest.independentSegments = true;
+              },
+              'content-steering'() {
+                this.manifest.contentSteering = camelCaseKeys(entry.attributes);
+                this.warnOnMissingAttributes_('#EXT-X-CONTENT-STEERING', entry.attributes, ['SERVER-URI']);
+              }
+            })[entry.tagType] || noop).call(self);
+          },
+          uri() {
+            currentUri.uri = entry.uri;
+            uris.push(currentUri); // if no explicit duration was declared, use the target duration
+
+            if (this.manifest.targetDuration && !('duration' in currentUri)) {
+              this.trigger('warn', {
+                message: 'defaulting segment duration to the target duration'
+              });
+              currentUri.duration = this.manifest.targetDuration;
+            } // annotate with encryption information, if necessary
+
+            if (key) {
+              currentUri.key = key;
+            }
+            currentUri.timeline = currentTimeline; // annotate with initialization segment information, if necessary
+
+            if (currentMap) {
+              currentUri.map = currentMap;
+            } // reset the last byterange end as it needs to be 0 between parts
+
+            lastPartByterangeEnd = 0; // Once we have at least one program date time we can always extrapolate it forward
+
+            if (this.lastProgramDateTime !== null) {
+              currentUri.programDateTime = this.lastProgramDateTime;
+              this.lastProgramDateTime += currentUri.duration * 1000;
+            } // prepare for the next URI
+
+            currentUri = {};
+          },
+          comment() {// comments are not important for playback
+          },
+          custom() {
+            // if this is segment-level data attach the output to the segment
+            if (entry.segment) {
+              currentUri.custom = currentUri.custom || {};
+              currentUri.custom[entry.customType] = entry.data; // if this is manifest-level data attach to the top level manifest object
+            } else {
+              this.manifest.custom = this.manifest.custom || {};
+              this.manifest.custom[entry.customType] = entry.data;
+            }
+          }
+        })[entry.type].call(self);
+      });
+    }
+    warnOnMissingAttributes_(identifier, attributes, required) {
+      const missing = [];
+      required.forEach(function (key) {
+        if (!attributes.hasOwnProperty(key)) {
+          missing.push(key);
+        }
+      });
+      if (missing.length) {
+        this.trigger('warn', {
+          message: `${identifier} lacks required attribute(s): ${missing.join(', ')}`
+        });
+      }
+    }
+    /**
+     * Parse the input string and update the manifest object.
+     *
+     * @param {string} chunk a potentially incomplete portion of the manifest
+     */
+
+    push(chunk) {
+      this.lineStream.push(chunk);
+    }
+    /**
+     * Flush any remaining input. This can be handy if the last line of an M3U8
+     * manifest did not contain a trailing newline but the file has been
+     * completely received.
+     */
+
+    end() {
+      // flush any buffered input
+      this.lineStream.push('\n');
+      if (this.manifest.dateRanges.length && this.lastProgramDateTime === null) {
+        this.trigger('warn', {
+          message: 'A playlist with EXT-X-DATERANGE tag must contain atleast one EXT-X-PROGRAM-DATE-TIME tag'
+        });
+      }
+      this.lastProgramDateTime = null;
+      this.trigger('end');
+    }
+    /**
+     * Add an additional parser for non-standard tags
+     *
+     * @param {Object}   options              a map of options for the added parser
+     * @param {RegExp}   options.expression   a regular expression to match the custom header
+     * @param {string}   options.customType   the custom type to register to the output
+     * @param {Function} [options.dataParser] function to parse the line into an object
+     * @param {boolean}  [options.segment]    should tag data be attached to the segment object
+     */
+
+    addParser(options) {
+      this.parseStream.addParser(options);
+    }
+    /**
+     * Add a custom header mapper
+     *
+     * @param {Object}   options
+     * @param {RegExp}   options.expression   a regular expression to match the custom header
+     * @param {Function} options.map          function to translate tag into a different tag
+     */
+
+    addTagMapper(options) {
+      this.parseStream.addTagMapper(options);
+    }
+  }
+
+  var regexs = {
+    // to determine mime types
+    mp4: /^(av0?1|avc0?[1234]|vp0?9|flac|opus|mp3|mp4a|mp4v|stpp.ttml.im1t)/,
+    webm: /^(vp0?[89]|av0?1|opus|vorbis)/,
+    ogg: /^(vp0?[89]|theora|flac|opus|vorbis)/,
+    // to determine if a codec is audio or video
+    video: /^(av0?1|avc0?[1234]|vp0?[89]|hvc1|hev1|theora|mp4v)/,
+    audio: /^(mp4a|flac|vorbis|opus|ac-[34]|ec-3|alac|mp3|speex|aac)/,
+    text: /^(stpp.ttml.im1t)/,
+    // mux.js support regex
+    muxerVideo: /^(avc0?1)/,
+    muxerAudio: /^(mp4a)/,
+    // match nothing as muxer does not support text right now.
+    // there cannot never be a character before the start of a string
+    // so this matches nothing.
+    muxerText: /a^/
+  };
+  var mediaTypes = ['video', 'audio', 'text'];
+  var upperMediaTypes = ['Video', 'Audio', 'Text'];
+  /**
+   * Replace the old apple-style `avc1.<dd>.<dd>` codec string with the standard
+   * `avc1.<hhhhhh>`
+   *
+   * @param {string} codec
+   *        Codec string to translate
+   * @return {string}
+   *         The translated codec string
+   */
+
+  var translateLegacyCodec = function translateLegacyCodec(codec) {
+    if (!codec) {
+      return codec;
+    }
+    return codec.replace(/avc1\.(\d+)\.(\d+)/i, function (orig, profile, avcLevel) {
+      var profileHex = ('00' + Number(profile).toString(16)).slice(-2);
+      var avcLevelHex = ('00' + Number(avcLevel).toString(16)).slice(-2);
+      return 'avc1.' + profileHex + '00' + avcLevelHex;
+    });
+  };
+  /**
+   * @typedef {Object} ParsedCodecInfo
+   * @property {number} codecCount
+   *           Number of codecs parsed
+   * @property {string} [videoCodec]
+   *           Parsed video codec (if found)
+   * @property {string} [videoObjectTypeIndicator]
+   *           Video object type indicator (if found)
+   * @property {string|null} audioProfile
+   *           Audio profile
+   */
+
+  /**
+   * Parses a codec string to retrieve the number of codecs specified, the video codec and
+   * object type indicator, and the audio profile.
+   *
+   * @param {string} [codecString]
+   *        The codec string to parse
+   * @return {ParsedCodecInfo}
+   *         Parsed codec info
+   */
+
+  var parseCodecs = function parseCodecs(codecString) {
+    if (codecString === void 0) {
+      codecString = '';
+    }
+    var codecs = codecString.split(',');
+    var result = [];
+    codecs.forEach(function (codec) {
+      codec = codec.trim();
+      var codecType;
+      mediaTypes.forEach(function (name) {
+        var match = regexs[name].exec(codec.toLowerCase());
+        if (!match || match.length <= 1) {
+          return;
+        }
+        codecType = name; // maintain codec case
+
+        var type = codec.substring(0, match[1].length);
+        var details = codec.replace(type, '');
+        result.push({
+          type: type,
+          details: details,
+          mediaType: name
+        });
+      });
+      if (!codecType) {
+        result.push({
+          type: codec,
+          details: '',
+          mediaType: 'unknown'
+        });
+      }
+    });
+    return result;
+  };
+  /**
+   * Returns a ParsedCodecInfo object for the default alternate audio playlist if there is
+   * a default alternate audio playlist for the provided audio group.
+   *
+   * @param {Object} master
+   *        The master playlist
+   * @param {string} audioGroupId
+   *        ID of the audio group for which to find the default codec info
+   * @return {ParsedCodecInfo}
+   *         Parsed codec info
+   */
+
+  var codecsFromDefault = function codecsFromDefault(master, audioGroupId) {
+    if (!master.mediaGroups.AUDIO || !audioGroupId) {
+      return null;
+    }
+    var audioGroup = master.mediaGroups.AUDIO[audioGroupId];
+    if (!audioGroup) {
+      return null;
+    }
+    for (var name in audioGroup) {
+      var audioType = audioGroup[name];
+      if (audioType.default && audioType.playlists) {
+        // codec should be the same for all playlists within the audio type
+        return parseCodecs(audioType.playlists[0].attributes.CODECS);
+      }
+    }
+    return null;
+  };
+  var isAudioCodec = function isAudioCodec(codec) {
+    if (codec === void 0) {
+      codec = '';
+    }
+    return regexs.audio.test(codec.trim().toLowerCase());
+  };
+  var isTextCodec = function isTextCodec(codec) {
+    if (codec === void 0) {
+      codec = '';
+    }
+    return regexs.text.test(codec.trim().toLowerCase());
+  };
+  var getMimeForCodec = function getMimeForCodec(codecString) {
+    if (!codecString || typeof codecString !== 'string') {
+      return;
+    }
+    var codecs = codecString.toLowerCase().split(',').map(function (c) {
+      return translateLegacyCodec(c.trim());
+    }); // default to video type
+
+    var type = 'video'; // only change to audio type if the only codec we have is
+    // audio
+
+    if (codecs.length === 1 && isAudioCodec(codecs[0])) {
+      type = 'audio';
+    } else if (codecs.length === 1 && isTextCodec(codecs[0])) {
+      // text uses application/<container> for now
+      type = 'application';
+    } // default the container to mp4
+
+    var container = 'mp4'; // every codec must be able to go into the container
+    // for that container to be the correct one
+
+    if (codecs.every(function (c) {
+      return regexs.mp4.test(c);
+    })) {
+      container = 'mp4';
+    } else if (codecs.every(function (c) {
+      return regexs.webm.test(c);
+    })) {
+      container = 'webm';
+    } else if (codecs.every(function (c) {
+      return regexs.ogg.test(c);
+    })) {
+      container = 'ogg';
+    }
+    return type + "/" + container + ";codecs=\"" + codecString + "\"";
+  };
+  var browserSupportsCodec = function browserSupportsCodec(codecString) {
+    if (codecString === void 0) {
+      codecString = '';
+    }
+    return window.MediaSource && window.MediaSource.isTypeSupported && window.MediaSource.isTypeSupported(getMimeForCodec(codecString)) || false;
+  };
+  var muxerSupportsCodec = function muxerSupportsCodec(codecString) {
+    if (codecString === void 0) {
+      codecString = '';
+    }
+    return codecString.toLowerCase().split(',').every(function (codec) {
+      codec = codec.trim(); // any match is supported.
+
+      for (var i = 0; i < upperMediaTypes.length; i++) {
+        var type = upperMediaTypes[i];
+        if (regexs["muxer" + type].test(codec)) {
+          return true;
+        }
+      }
+      return false;
+    });
+  };
+  var DEFAULT_AUDIO_CODEC = 'mp4a.40.2';
+  var DEFAULT_VIDEO_CODEC = 'avc1.4d400d';
+
+  var MPEGURL_REGEX = /^(audio|video|application)\/(x-|vnd\.apple\.)?mpegurl/i;
+  var DASH_REGEX = /^application\/dash\+xml/i;
+  /**
+   * Returns a string that describes the type of source based on a video source object's
+   * media type.
+   *
+   * @see {@link https://dev.w3.org/html5/pf-summary/video.html#dom-source-type|Source Type}
+   *
+   * @param {string} type
+   *        Video source object media type
+   * @return {('hls'|'dash'|'vhs-json'|null)}
+   *         VHS source type string
+   */
+
+  var simpleTypeFromSourceType = function simpleTypeFromSourceType(type) {
+    if (MPEGURL_REGEX.test(type)) {
+      return 'hls';
+    }
+    if (DASH_REGEX.test(type)) {
+      return 'dash';
+    } // Denotes the special case of a manifest object passed to http-streaming instead of a
+    // source URL.
+    //
+    // See https://en.wikipedia.org/wiki/Media_type for details on specifying media types.
+    //
+    // In this case, vnd stands for vendor, video.js for the organization, VHS for this
+    // project, and the +json suffix identifies the structure of the media type.
+
+    if (type === 'application/vnd.videojs.vhs+json') {
+      return 'vhs-json';
+    }
+    return null;
+  };
+
+  // const log2 = Math.log2 ? Math.log2 : (x) => (Math.log(x) / Math.log(2));
+  // we used to do this with log2 but BigInt does not support builtin math
+  // Math.ceil(log2(x));
+
+  var countBits = function countBits(x) {
+    return x.toString(2).length;
+  }; // count the number of whole bytes it would take to represent a number
+
+  var countBytes = function countBytes(x) {
+    return Math.ceil(countBits(x) / 8);
+  };
+  var isArrayBufferView = function isArrayBufferView(obj) {
+    if (ArrayBuffer.isView === 'function') {
+      return ArrayBuffer.isView(obj);
+    }
+    return obj && obj.buffer instanceof ArrayBuffer;
+  };
+  var isTypedArray = function isTypedArray(obj) {
+    return isArrayBufferView(obj);
+  };
+  var toUint8 = function toUint8(bytes) {
+    if (bytes instanceof Uint8Array) {
+      return bytes;
+    }
+    if (!Array.isArray(bytes) && !isTypedArray(bytes) && !(bytes instanceof ArrayBuffer)) {
+      // any non-number or NaN leads to empty uint8array
+      // eslint-disable-next-line
+      if (typeof bytes !== 'number' || typeof bytes === 'number' && bytes !== bytes) {
+        bytes = 0;
+      } else {
+        bytes = [bytes];
+      }
+    }
+    return new Uint8Array(bytes && bytes.buffer || bytes, bytes && bytes.byteOffset || 0, bytes && bytes.byteLength || 0);
+  };
+  var BigInt = window.BigInt || Number;
+  var BYTE_TABLE = [BigInt('0x1'), BigInt('0x100'), BigInt('0x10000'), BigInt('0x1000000'), BigInt('0x100000000'), BigInt('0x10000000000'), BigInt('0x1000000000000'), BigInt('0x100000000000000'), BigInt('0x10000000000000000')];
+  (function () {
+    var a = new Uint16Array([0xFFCC]);
+    var b = new Uint8Array(a.buffer, a.byteOffset, a.byteLength);
+    if (b[0] === 0xFF) {
+      return 'big';
+    }
+    if (b[0] === 0xCC) {
+      return 'little';
+    }
+    return 'unknown';
+  })();
+  var bytesToNumber = function bytesToNumber(bytes, _temp) {
+    var _ref = _temp === void 0 ? {} : _temp,
+      _ref$signed = _ref.signed,
+      signed = _ref$signed === void 0 ? false : _ref$signed,
+      _ref$le = _ref.le,
+      le = _ref$le === void 0 ? false : _ref$le;
+    bytes = toUint8(bytes);
+    var fn = le ? 'reduce' : 'reduceRight';
+    var obj = bytes[fn] ? bytes[fn] : Array.prototype[fn];
+    var number = obj.call(bytes, function (total, byte, i) {
+      var exponent = le ? i : Math.abs(i + 1 - bytes.length);
+      return total + BigInt(byte) * BYTE_TABLE[exponent];
+    }, BigInt(0));
+    if (signed) {
+      var max = BYTE_TABLE[bytes.length] / BigInt(2) - BigInt(1);
+      number = BigInt(number);
+      if (number > max) {
+        number -= max;
+        number -= max;
+        number -= BigInt(2);
+      }
+    }
+    return Number(number);
+  };
+  var numberToBytes = function numberToBytes(number, _temp2) {
+    var _ref2 = _temp2 === void 0 ? {} : _temp2,
+      _ref2$le = _ref2.le,
+      le = _ref2$le === void 0 ? false : _ref2$le;
+
+    // eslint-disable-next-line
+    if (typeof number !== 'bigint' && typeof number !== 'number' || typeof number === 'number' && number !== number) {
+      number = 0;
+    }
+    number = BigInt(number);
+    var byteCount = countBytes(number);
+    var bytes = new Uint8Array(new ArrayBuffer(byteCount));
+    for (var i = 0; i < byteCount; i++) {
+      var byteIndex = le ? i : Math.abs(i + 1 - bytes.length);
+      bytes[byteIndex] = Number(number / BYTE_TABLE[i] & BigInt(0xFF));
+      if (number < 0) {
+        bytes[byteIndex] = Math.abs(~bytes[byteIndex]);
+        bytes[byteIndex] -= i === 0 ? 1 : 2;
+      }
+    }
+    return bytes;
+  };
+  var stringToBytes = function stringToBytes(string, stringIsBytes) {
+    if (typeof string !== 'string' && string && typeof string.toString === 'function') {
+      string = string.toString();
+    }
+    if (typeof string !== 'string') {
+      return new Uint8Array();
+    } // If the string already is bytes, we don't have to do this
+    // otherwise we do this so that we split multi length characters
+    // into individual bytes
+
+    if (!stringIsBytes) {
+      string = unescape(encodeURIComponent(string));
+    }
+    var view = new Uint8Array(string.length);
+    for (var i = 0; i < string.length; i++) {
+      view[i] = string.charCodeAt(i);
+    }
+    return view;
+  };
+  var concatTypedArrays = function concatTypedArrays() {
+    for (var _len = arguments.length, buffers = new Array(_len), _key = 0; _key < _len; _key++) {
+      buffers[_key] = arguments[_key];
+    }
+    buffers = buffers.filter(function (b) {
+      return b && (b.byteLength || b.length) && typeof b !== 'string';
+    });
+    if (buffers.length <= 1) {
+      // for 0 length we will return empty uint8
+      // for 1 length we return the first uint8
+      return toUint8(buffers[0]);
+    }
+    var totalLen = buffers.reduce(function (total, buf, i) {
+      return total + (buf.byteLength || buf.length);
+    }, 0);
+    var tempBuffer = new Uint8Array(totalLen);
+    var offset = 0;
+    buffers.forEach(function (buf) {
+      buf = toUint8(buf);
+      tempBuffer.set(buf, offset);
+      offset += buf.byteLength;
+    });
+    return tempBuffer;
+  };
+  /**
+   * Check if the bytes "b" are contained within bytes "a".
+   *
+   * @param {Uint8Array|Array} a
+   *        Bytes to check in
+   *
+   * @param {Uint8Array|Array} b
+   *        Bytes to check for
+   *
+   * @param {Object} options
+   *        options
+   *
+   * @param {Array|Uint8Array} [offset=0]
+   *        offset to use when looking at bytes in a
+   *
+   * @param {Array|Uint8Array} [mask=[]]
+   *        mask to use on bytes before comparison.
+   *
+   * @return {boolean}
+   *         If all bytes in b are inside of a, taking into account
+   *         bit masks.
+   */
+
+  var bytesMatch = function bytesMatch(a, b, _temp3) {
+    var _ref3 = _temp3 === void 0 ? {} : _temp3,
+      _ref3$offset = _ref3.offset,
+      offset = _ref3$offset === void 0 ? 0 : _ref3$offset,
+      _ref3$mask = _ref3.mask,
+      mask = _ref3$mask === void 0 ? [] : _ref3$mask;
+    a = toUint8(a);
+    b = toUint8(b); // ie 11 does not support uint8 every
+
+    var fn = b.every ? b.every : Array.prototype.every;
+    return b.length && a.length - offset >= b.length &&
+    // ie 11 doesn't support every on uin8
+    fn.call(b, function (bByte, i) {
+      var aByte = mask[i] ? mask[i] & a[offset + i] : a[offset + i];
+      return bByte === aByte;
+    });
+  };
+
+  /**
+   * Loops through all supported media groups in master and calls the provided
+   * callback for each group
+   *
+   * @param {Object} master
+   *        The parsed master manifest object
+   * @param {string[]} groups
+   *        The media groups to call the callback for
+   * @param {Function} callback
+   *        Callback to call for each media group
+   */
+  var forEachMediaGroup$1 = function forEachMediaGroup(master, groups, callback) {
+    groups.forEach(function (mediaType) {
+      for (var groupKey in master.mediaGroups[mediaType]) {
+        for (var labelKey in master.mediaGroups[mediaType][groupKey]) {
+          var mediaProperties = master.mediaGroups[mediaType][groupKey][labelKey];
+          callback(mediaProperties, mediaType, groupKey, labelKey);
+        }
+      }
+    });
+  };
+
+  var atob = function atob(s) {
+    return window.atob ? window.atob(s) : Buffer.from(s, 'base64').toString('binary');
+  };
+  function decodeB64ToUint8Array(b64Text) {
+    var decodedString = atob(b64Text);
+    var array = new Uint8Array(decodedString.length);
+    for (var i = 0; i < decodedString.length; i++) {
+      array[i] = decodedString.charCodeAt(i);
+    }
+    return array;
+  }
+
+  /**
+   * Ponyfill for `Array.prototype.find` which is only available in ES6 runtimes.
+   *
+   * Works with anything that has a `length` property and index access properties, including NodeList.
+   *
+   * @template {unknown} T
+   * @param {Array<T> | ({length:number, [number]: T})} list
+   * @param {function (item: T, index: number, list:Array<T> | ({length:number, [number]: T})):boolean} predicate
+   * @param {Partial<Pick<ArrayConstructor['prototype'], 'find'>>?} ac `Array.prototype` by default,
+   * 				allows injecting a custom implementation in tests
+   * @returns {T | undefined}
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
+   * @see https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.find
+   */
+  function find$1(list, predicate, ac) {
+    if (ac === undefined) {
+      ac = Array.prototype;
+    }
+    if (list && typeof ac.find === 'function') {
+      return ac.find.call(list, predicate);
+    }
+    for (var i = 0; i < list.length; i++) {
+      if (Object.prototype.hasOwnProperty.call(list, i)) {
+        var item = list[i];
+        if (predicate.call(undefined, item, i, list)) {
+          return item;
+        }
+      }
+    }
+  }
+
+  /**
+   * "Shallow freezes" an object to render it immutable.
+   * Uses `Object.freeze` if available,
+   * otherwise the immutability is only in the type.
+   *
+   * Is used to create "enum like" objects.
+   *
+   * @template T
+   * @param {T} object the object to freeze
+   * @param {Pick<ObjectConstructor, 'freeze'> = Object} oc `Object` by default,
+   * 				allows to inject custom object constructor for tests
+   * @returns {Readonly<T>}
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
+   */
+  function freeze(object, oc) {
+    if (oc === undefined) {
+      oc = Object;
+    }
+    return oc && typeof oc.freeze === 'function' ? oc.freeze(object) : object;
+  }
+
+  /**
+   * Since we can not rely on `Object.assign` we provide a simplified version
+   * that is sufficient for our needs.
+   *
+   * @param {Object} target
+   * @param {Object | null | undefined} source
+   *
+   * @returns {Object} target
+   * @throws TypeError if target is not an object
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+   * @see https://tc39.es/ecma262/multipage/fundamental-objects.html#sec-object.assign
+   */
+  function assign(target, source) {
+    if (target === null || typeof target !== 'object') {
+      throw new TypeError('target is not an object');
+    }
+    for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+
+  /**
+   * All mime types that are allowed as input to `DOMParser.parseFromString`
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString#Argument02 MDN
+   * @see https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#domparsersupportedtype WHATWG HTML Spec
+   * @see DOMParser.prototype.parseFromString
+   */
+  var MIME_TYPE = freeze({
+    /**
+     * `text/html`, the only mime type that triggers treating an XML document as HTML.
+     *
+     * @see DOMParser.SupportedType.isHTML
+     * @see https://www.iana.org/assignments/media-types/text/html IANA MimeType registration
+     * @see https://en.wikipedia.org/wiki/HTML Wikipedia
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString MDN
+     * @see https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#dom-domparser-parsefromstring WHATWG HTML Spec
+     */
+    HTML: 'text/html',
+    /**
+     * Helper method to check a mime type if it indicates an HTML document
+     *
+     * @param {string} [value]
+     * @returns {boolean}
+     *
+     * @see https://www.iana.org/assignments/media-types/text/html IANA MimeType registration
+     * @see https://en.wikipedia.org/wiki/HTML Wikipedia
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString MDN
+     * @see https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#dom-domparser-parsefromstring 	 */
+    isHTML: function (value) {
+      return value === MIME_TYPE.HTML;
+    },
+    /**
+     * `application/xml`, the standard mime type for XML documents.
+     *
+     * @see https://www.iana.org/assignments/media-types/application/xml IANA MimeType registration
+     * @see https://tools.ietf.org/html/rfc7303#section-9.1 RFC 7303
+     * @see https://en.wikipedia.org/wiki/XML_and_MIME Wikipedia
+     */
+    XML_APPLICATION: 'application/xml',
+    /**
+     * `text/html`, an alias for `application/xml`.
+     *
+     * @see https://tools.ietf.org/html/rfc7303#section-9.2 RFC 7303
+     * @see https://www.iana.org/assignments/media-types/text/xml IANA MimeType registration
+     * @see https://en.wikipedia.org/wiki/XML_and_MIME Wikipedia
+     */
+    XML_TEXT: 'text/xml',
+    /**
+     * `application/xhtml+xml`, indicates an XML document that has the default HTML namespace,
+     * but is parsed as an XML document.
+     *
+     * @see https://www.iana.org/assignments/media-types/application/xhtml+xml IANA MimeType registration
+     * @see https://dom.spec.whatwg.org/#dom-domimplementation-createdocument WHATWG DOM Spec
+     * @see https://en.wikipedia.org/wiki/XHTML Wikipedia
+     */
+    XML_XHTML_APPLICATION: 'application/xhtml+xml',
+    /**
+     * `image/svg+xml`,
+     *
+     * @see https://www.iana.org/assignments/media-types/image/svg+xml IANA MimeType registration
+     * @see https://www.w3.org/TR/SVG11/ W3C SVG 1.1
+     * @see https://en.wikipedia.org/wiki/Scalable_Vector_Graphics Wikipedia
+     */
+    XML_SVG_IMAGE: 'image/svg+xml'
+  });
+
+  /**
+   * Namespaces that are used in this code base.
+   *
+   * @see http://www.w3.org/TR/REC-xml-names
+   */
+  var NAMESPACE$3 = freeze({
+    /**
+     * The XHTML namespace.
+     *
+     * @see http://www.w3.org/1999/xhtml
+     */
+    HTML: 'http://www.w3.org/1999/xhtml',
+    /**
+     * Checks if `uri` equals `NAMESPACE.HTML`.
+     *
+     * @param {string} [uri]
+     *
+     * @see NAMESPACE.HTML
+     */
+    isHTML: function (uri) {
+      return uri === NAMESPACE$3.HTML;
+    },
+    /**
+     * The SVG namespace.
+     *
+     * @see http://www.w3.org/2000/svg
+     */
+    SVG: 'http://www.w3.org/2000/svg',
+    /**
+     * The `xml:` namespace.
+     *
+     * @see http://www.w3.org/XML/1998/namespace
+     */
+    XML: 'http://www.w3.org/XML/1998/namespace',
+    /**
+     * The `xmlns:` namespace
+     *
+     * @see https://www.w3.org/2000/xmlns/
+     */
+    XMLNS: 'http://www.w3.org/2000/xmlns/'
+  });
+  var assign_1 = assign;
+  var find_1 = find$1;
+  var freeze_1 = freeze;
+  var MIME_TYPE_1 = MIME_TYPE;
+  var NAMESPACE_1 = NAMESPACE$3;
+  var conventions = {
+    assign: assign_1,
+    find: find_1,
+    freeze: freeze_1,
+    MIME_TYPE: MIME_TYPE_1,
+    NAMESPACE: NAMESPACE_1
+  };
+
+  var find = conventions.find;
+  var NAMESPACE$2 = conventions.NAMESPACE;
+
+  /**
+   * A prerequisite for `[].filter`, to drop elements that are empty
+   * @param {string} input
+   * @returns {boolean}
+   */
+  function notEmptyString(input) {
+    return input !== '';
+  }
+  /**
+   * @see https://infra.spec.whatwg.org/#split-on-ascii-whitespace
+   * @see https://infra.spec.whatwg.org/#ascii-whitespace
+   *
+   * @param {string} input
+   * @returns {string[]} (can be empty)
+   */
+  function splitOnASCIIWhitespace(input) {
+    // U+0009 TAB, U+000A LF, U+000C FF, U+000D CR, U+0020 SPACE
+    return input ? input.split(/[\t\n\f\r ]+/).filter(notEmptyString) : [];
+  }
+
+  /**
+   * Adds element as a key to current if it is not already present.
+   *
+   * @param {Record<string, boolean | undefined>} current
+   * @param {string} element
+   * @returns {Record<string, boolean | undefined>}
+   */
+  function orderedSetReducer(current, element) {
+    if (!current.hasOwnProperty(element)) {
+      current[element] = true;
+    }
+    return current;
+  }
+
+  /**
+   * @see https://infra.spec.whatwg.org/#ordered-set
+   * @param {string} input
+   * @returns {string[]}
+   */
+  function toOrderedSet(input) {
+    if (!input) return [];
+    var list = splitOnASCIIWhitespace(input);
+    return Object.keys(list.reduce(orderedSetReducer, {}));
+  }
+
+  /**
+   * Uses `list.indexOf` to implement something like `Array.prototype.includes`,
+   * which we can not rely on being available.
+   *
+   * @param {any[]} list
+   * @returns {function(any): boolean}
+   */
+  function arrayIncludes(list) {
+    return function (element) {
+      return list && list.indexOf(element) !== -1;
+    };
+  }
+  function copy(src, dest) {
+    for (var p in src) {
+      if (Object.prototype.hasOwnProperty.call(src, p)) {
+        dest[p] = src[p];
+      }
+    }
+  }
+
+  /**
+  ^\w+\.prototype\.([_\w]+)\s*=\s*((?:.*\{\s*?[\r\n][\s\S]*?^})|\S.*?(?=[;\r\n]));?
+  ^\w+\.prototype\.([_\w]+)\s*=\s*(\S.*?(?=[;\r\n]));?
+   */
+  function _extends(Class, Super) {
+    var pt = Class.prototype;
+    if (!(pt instanceof Super)) {
+      function t() {}
+      t.prototype = Super.prototype;
+      t = new t();
+      copy(pt, t);
+      Class.prototype = pt = t;
+    }
+    if (pt.constructor != Class) {
+      if (typeof Class != 'function') {
+        console.error("unknown Class:" + Class);
+      }
+      pt.constructor = Class;
+    }
+  }
+
+  // Node Types
+  var NodeType = {};
+  var ELEMENT_NODE = NodeType.ELEMENT_NODE = 1;
+  var ATTRIBUTE_NODE = NodeType.ATTRIBUTE_NODE = 2;
+  var TEXT_NODE = NodeType.TEXT_NODE = 3;
+  var CDATA_SECTION_NODE = NodeType.CDATA_SECTION_NODE = 4;
+  var ENTITY_REFERENCE_NODE = NodeType.ENTITY_REFERENCE_NODE = 5;
+  var ENTITY_NODE = NodeType.ENTITY_NODE = 6;
+  var PROCESSING_INSTRUCTION_NODE = NodeType.PROCESSING_INSTRUCTION_NODE = 7;
+  var COMMENT_NODE = NodeType.COMMENT_NODE = 8;
+  var DOCUMENT_NODE = NodeType.DOCUMENT_NODE = 9;
+  var DOCUMENT_TYPE_NODE = NodeType.DOCUMENT_TYPE_NODE = 10;
+  var DOCUMENT_FRAGMENT_NODE = NodeType.DOCUMENT_FRAGMENT_NODE = 11;
+  var NOTATION_NODE = NodeType.NOTATION_NODE = 12;
+
+  // ExceptionCode
+  var ExceptionCode = {};
+  var ExceptionMessage = {};
+  ExceptionCode.INDEX_SIZE_ERR = (ExceptionMessage[1] = "Index size error", 1);
+  ExceptionCode.DOMSTRING_SIZE_ERR = (ExceptionMessage[2] = "DOMString size error", 2);
+  var HIERARCHY_REQUEST_ERR = ExceptionCode.HIERARCHY_REQUEST_ERR = (ExceptionMessage[3] = "Hierarchy request error", 3);
+  ExceptionCode.WRONG_DOCUMENT_ERR = (ExceptionMessage[4] = "Wrong document", 4);
+  ExceptionCode.INVALID_CHARACTER_ERR = (ExceptionMessage[5] = "Invalid character", 5);
+  ExceptionCode.NO_DATA_ALLOWED_ERR = (ExceptionMessage[6] = "No data allowed", 6);
+  ExceptionCode.NO_MODIFICATION_ALLOWED_ERR = (ExceptionMessage[7] = "No modification allowed", 7);
+  var NOT_FOUND_ERR = ExceptionCode.NOT_FOUND_ERR = (ExceptionMessage[8] = "Not found", 8);
+  ExceptionCode.NOT_SUPPORTED_ERR = (ExceptionMessage[9] = "Not supported", 9);
+  var INUSE_ATTRIBUTE_ERR = ExceptionCode.INUSE_ATTRIBUTE_ERR = (ExceptionMessage[10] = "Attribute in use", 10);
+  //level2
+  ExceptionCode.INVALID_STATE_ERR = (ExceptionMessage[11] = "Invalid state", 11);
+  ExceptionCode.SYNTAX_ERR = (ExceptionMessage[12] = "Syntax error", 12);
+  ExceptionCode.INVALID_MODIFICATION_ERR = (ExceptionMessage[13] = "Invalid modification", 13);
+  ExceptionCode.NAMESPACE_ERR = (ExceptionMessage[14] = "Invalid namespace", 14);
+  ExceptionCode.INVALID_ACCESS_ERR = (ExceptionMessage[15] = "Invalid access", 15);
+
+  /**
+   * DOM Level 2
+   * Object DOMException
+   * @see http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/ecma-script-binding.html
+   * @see http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html
+   */
+  function DOMException(code, message) {
+    if (message instanceof Error) {
+      var error = message;
+    } else {
+      error = this;
+      Error.call(this, ExceptionMessage[code]);
+      this.message = ExceptionMessage[code];
+      if (Error.captureStackTrace) Error.captureStackTrace(this, DOMException);
+    }
+    error.code = code;
+    if (message) this.message = this.message + ": " + message;
+    return error;
+  }
+  DOMException.prototype = Error.prototype;
+  copy(ExceptionCode, DOMException);
+
+  /**
+   * @see http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-536297177
+   * The NodeList interface provides the abstraction of an ordered collection of nodes, without defining or constraining how this collection is implemented. NodeList objects in the DOM are live.
+   * The items in the NodeList are accessible via an integral index, starting from 0.
+   */
+  function NodeList() {}
+  NodeList.prototype = {
+    /**
+     * The number of nodes in the list. The range of valid child node indices is 0 to length-1 inclusive.
+     * @standard level1
+     */
+    length: 0,
+    /**
+     * Returns the indexth item in the collection. If index is greater than or equal to the number of nodes in the list, this returns null.
+     * @standard level1
+     * @param index  unsigned long
+     *   Index into the collection.
+     * @return Node
+     * 	The node at the indexth position in the NodeList, or null if that is not a valid index.
+     */
+    item: function (index) {
+      return index >= 0 && index < this.length ? this[index] : null;
+    },
+    toString: function (isHTML, nodeFilter) {
+      for (var buf = [], i = 0; i < this.length; i++) {
+        serializeToString(this[i], buf, isHTML, nodeFilter);
+      }
+      return buf.join('');
+    },
+    /**
+     * @private
+     * @param {function (Node):boolean} predicate
+     * @returns {Node[]}
+     */
+    filter: function (predicate) {
+      return Array.prototype.filter.call(this, predicate);
+    },
+    /**
+     * @private
+     * @param {Node} item
+     * @returns {number}
+     */
+    indexOf: function (item) {
+      return Array.prototype.indexOf.call(this, item);
+    }
+  };
+  function LiveNodeList(node, refresh) {
+    this._node = node;
+    this._refresh = refresh;
+    _updateLiveList(this);
+  }
+  function _updateLiveList(list) {
+    var inc = list._node._inc || list._node.ownerDocument._inc;
+    if (list._inc !== inc) {
+      var ls = list._refresh(list._node);
+      __set__(list, 'length', ls.length);
+      if (!list.$$length || ls.length < list.$$length) {
+        for (var i = ls.length; (i in list); i++) {
+          if (Object.prototype.hasOwnProperty.call(list, i)) {
+            delete list[i];
+          }
+        }
+      }
+      copy(ls, list);
+      list._inc = inc;
+    }
+  }
+  LiveNodeList.prototype.item = function (i) {
+    _updateLiveList(this);
+    return this[i] || null;
+  };
+  _extends(LiveNodeList, NodeList);
+
+  /**
+   * Objects implementing the NamedNodeMap interface are used
+   * to represent collections of nodes that can be accessed by name.
+   * Note that NamedNodeMap does not inherit from NodeList;
+   * NamedNodeMaps are not maintained in any particular order.
+   * Objects contained in an object implementing NamedNodeMap may also be accessed by an ordinal index,
+   * but this is simply to allow convenient enumeration of the contents of a NamedNodeMap,
+   * and does not imply that the DOM specifies an order to these Nodes.
+   * NamedNodeMap objects in the DOM are live.
+   * used for attributes or DocumentType entities
+   */
+  function NamedNodeMap() {}
+  function _findNodeIndex(list, node) {
+    var i = list.length;
+    while (i--) {
+      if (list[i] === node) {
+        return i;
+      }
+    }
+  }
+  function _addNamedNode(el, list, newAttr, oldAttr) {
+    if (oldAttr) {
+      list[_findNodeIndex(list, oldAttr)] = newAttr;
+    } else {
+      list[list.length++] = newAttr;
+    }
+    if (el) {
+      newAttr.ownerElement = el;
+      var doc = el.ownerDocument;
+      if (doc) {
+        oldAttr && _onRemoveAttribute(doc, el, oldAttr);
+        _onAddAttribute(doc, el, newAttr);
+      }
+    }
+  }
+  function _removeNamedNode(el, list, attr) {
+    //console.log('remove attr:'+attr)
+    var i = _findNodeIndex(list, attr);
+    if (i >= 0) {
+      var lastIndex = list.length - 1;
+      while (i < lastIndex) {
+        list[i] = list[++i];
+      }
+      list.length = lastIndex;
+      if (el) {
+        var doc = el.ownerDocument;
+        if (doc) {
+          _onRemoveAttribute(doc, el, attr);
+          attr.ownerElement = null;
+        }
+      }
+    } else {
+      throw new DOMException(NOT_FOUND_ERR, new Error(el.tagName + '@' + attr));
+    }
+  }
+  NamedNodeMap.prototype = {
+    length: 0,
+    item: NodeList.prototype.item,
+    getNamedItem: function (key) {
+      //		if(key.indexOf(':')>0 || key == 'xmlns'){
+      //			return null;
+      //		}
+      //console.log()
+      var i = this.length;
+      while (i--) {
+        var attr = this[i];
+        //console.log(attr.nodeName,key)
+        if (attr.nodeName == key) {
+          return attr;
+        }
+      }
+    },
+    setNamedItem: function (attr) {
+      var el = attr.ownerElement;
+      if (el && el != this._ownerElement) {
+        throw new DOMException(INUSE_ATTRIBUTE_ERR);
+      }
+      var oldAttr = this.getNamedItem(attr.nodeName);
+      _addNamedNode(this._ownerElement, this, attr, oldAttr);
+      return oldAttr;
+    },
+    /* returns Node */
+    setNamedItemNS: function (attr) {
+      // raises: WRONG_DOCUMENT_ERR,NO_MODIFICATION_ALLOWED_ERR,INUSE_ATTRIBUTE_ERR
+      var el = attr.ownerElement,
+        oldAttr;
+      if (el && el != this._ownerElement) {
+        throw new DOMException(INUSE_ATTRIBUTE_ERR);
+      }
+      oldAttr = this.getNamedItemNS(attr.namespaceURI, attr.localName);
+      _addNamedNode(this._ownerElement, this, attr, oldAttr);
+      return oldAttr;
+    },
+    /* returns Node */
+    removeNamedItem: function (key) {
+      var attr = this.getNamedItem(key);
+      _removeNamedNode(this._ownerElement, this, attr);
+      return attr;
+    },
+    // raises: NOT_FOUND_ERR,NO_MODIFICATION_ALLOWED_ERR
+
+    //for level2
+    removeNamedItemNS: function (namespaceURI, localName) {
+      var attr = this.getNamedItemNS(namespaceURI, localName);
+      _removeNamedNode(this._ownerElement, this, attr);
+      return attr;
+    },
+    getNamedItemNS: function (namespaceURI, localName) {
+      var i = this.length;
+      while (i--) {
+        var node = this[i];
+        if (node.localName == localName && node.namespaceURI == namespaceURI) {
+          return node;
+        }
+      }
+      return null;
+    }
+  };
+
+  /**
+   * The DOMImplementation interface represents an object providing methods
+   * which are not dependent on any particular document.
+   * Such an object is returned by the `Document.implementation` property.
+   *
+   * __The individual methods describe the differences compared to the specs.__
+   *
+   * @constructor
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation MDN
+   * @see https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-102161490 DOM Level 1 Core (Initial)
+   * @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490 DOM Level 2 Core
+   * @see https://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-102161490 DOM Level 3 Core
+   * @see https://dom.spec.whatwg.org/#domimplementation DOM Living Standard
+   */
+  function DOMImplementation$1() {}
+  DOMImplementation$1.prototype = {
+    /**
+     * The DOMImplementation.hasFeature() method returns a Boolean flag indicating if a given feature is supported.
+     * The different implementations fairly diverged in what kind of features were reported.
+     * The latest version of the spec settled to force this method to always return true, where the functionality was accurate and in use.
+     *
+     * @deprecated It is deprecated and modern browsers return true in all cases.
+     *
+     * @param {string} feature
+     * @param {string} [version]
+     * @returns {boolean} always true
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/hasFeature MDN
+     * @see https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-5CED94D7 DOM Level 1 Core
+     * @see https://dom.spec.whatwg.org/#dom-domimplementation-hasfeature DOM Living Standard
+     */
+    hasFeature: function (feature, version) {
+      return true;
+    },
+    /**
+     * Creates an XML Document object of the specified type with its document element.
+     *
+     * __It behaves slightly different from the description in the living standard__:
+     * - There is no interface/class `XMLDocument`, it returns a `Document` instance.
+     * - `contentType`, `encoding`, `mode`, `origin`, `url` fields are currently not declared.
+     * - this implementation is not validating names or qualified names
+     *   (when parsing XML strings, the SAX parser takes care of that)
+     *
+     * @param {string|null} namespaceURI
+     * @param {string} qualifiedName
+     * @param {DocumentType=null} doctype
+     * @returns {Document}
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createDocument MDN
+     * @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#Level-2-Core-DOM-createDocument DOM Level 2 Core (initial)
+     * @see https://dom.spec.whatwg.org/#dom-domimplementation-createdocument  DOM Level 2 Core
+     *
+     * @see https://dom.spec.whatwg.org/#validate-and-extract DOM: Validate and extract
+     * @see https://www.w3.org/TR/xml/#NT-NameStartChar XML Spec: Names
+     * @see https://www.w3.org/TR/xml-names/#ns-qualnames XML Namespaces: Qualified names
+     */
+    createDocument: function (namespaceURI, qualifiedName, doctype) {
+      var doc = new Document();
+      doc.implementation = this;
+      doc.childNodes = new NodeList();
+      doc.doctype = doctype || null;
+      if (doctype) {
+        doc.appendChild(doctype);
+      }
+      if (qualifiedName) {
+        var root = doc.createElementNS(namespaceURI, qualifiedName);
+        doc.appendChild(root);
+      }
+      return doc;
+    },
+    /**
+     * Returns a doctype, with the given `qualifiedName`, `publicId`, and `systemId`.
+     *
+     * __This behavior is slightly different from the in the specs__:
+     * - this implementation is not validating names or qualified names
+     *   (when parsing XML strings, the SAX parser takes care of that)
+     *
+     * @param {string} qualifiedName
+     * @param {string} [publicId]
+     * @param {string} [systemId]
+     * @returns {DocumentType} which can either be used with `DOMImplementation.createDocument` upon document creation
+     * 				  or can be put into the document via methods like `Node.insertBefore()` or `Node.replaceChild()`
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createDocumentType MDN
+     * @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#Level-2-Core-DOM-createDocType DOM Level 2 Core
+     * @see https://dom.spec.whatwg.org/#dom-domimplementation-createdocumenttype DOM Living Standard
+     *
+     * @see https://dom.spec.whatwg.org/#validate-and-extract DOM: Validate and extract
+     * @see https://www.w3.org/TR/xml/#NT-NameStartChar XML Spec: Names
+     * @see https://www.w3.org/TR/xml-names/#ns-qualnames XML Namespaces: Qualified names
+     */
+    createDocumentType: function (qualifiedName, publicId, systemId) {
+      var node = new DocumentType();
+      node.name = qualifiedName;
+      node.nodeName = qualifiedName;
+      node.publicId = publicId || '';
+      node.systemId = systemId || '';
+      return node;
+    }
+  };
+
+  /**
+   * @see http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1950641247
+   */
+
+  function Node() {}
+  Node.prototype = {
+    firstChild: null,
+    lastChild: null,
+    previousSibling: null,
+    nextSibling: null,
+    attributes: null,
+    parentNode: null,
+    childNodes: null,
+    ownerDocument: null,
+    nodeValue: null,
+    namespaceURI: null,
+    prefix: null,
+    localName: null,
+    // Modified in DOM Level 2:
+    insertBefore: function (newChild, refChild) {
+      //raises
+      return _insertBefore(this, newChild, refChild);
+    },
+    replaceChild: function (newChild, oldChild) {
+      //raises
+      _insertBefore(this, newChild, oldChild, assertPreReplacementValidityInDocument);
+      if (oldChild) {
+        this.removeChild(oldChild);
+      }
+    },
+    removeChild: function (oldChild) {
+      return _removeChild(this, oldChild);
+    },
+    appendChild: function (newChild) {
+      return this.insertBefore(newChild, null);
+    },
+    hasChildNodes: function () {
+      return this.firstChild != null;
+    },
+    cloneNode: function (deep) {
+      return cloneNode(this.ownerDocument || this, this, deep);
+    },
+    // Modified in DOM Level 2:
+    normalize: function () {
+      var child = this.firstChild;
+      while (child) {
+        var next = child.nextSibling;
+        if (next && next.nodeType == TEXT_NODE && child.nodeType == TEXT_NODE) {
+          this.removeChild(next);
+          child.appendData(next.data);
+        } else {
+          child.normalize();
+          child = next;
+        }
+      }
+    },
+    // Introduced in DOM Level 2:
+    isSupported: function (feature, version) {
+      return this.ownerDocument.implementation.hasFeature(feature, version);
+    },
+    // Introduced in DOM Level 2:
+    hasAttributes: function () {
+      return this.attributes.length > 0;
+    },
+    /**
+     * Look up the prefix associated to the given namespace URI, starting from this node.
+     * **The default namespace declarations are ignored by this method.**
+     * See Namespace Prefix Lookup for details on the algorithm used by this method.
+     *
+     * _Note: The implementation seems to be incomplete when compared to the algorithm described in the specs._
+     *
+     * @param {string | null} namespaceURI
+     * @returns {string | null}
+     * @see https://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix
+     * @see https://www.w3.org/TR/DOM-Level-3-Core/namespaces-algorithms.html#lookupNamespacePrefixAlgo
+     * @see https://dom.spec.whatwg.org/#dom-node-lookupprefix
+     * @see https://github.com/xmldom/xmldom/issues/322
+     */
+    lookupPrefix: function (namespaceURI) {
+      var el = this;
+      while (el) {
+        var map = el._nsMap;
+        //console.dir(map)
+        if (map) {
+          for (var n in map) {
+            if (Object.prototype.hasOwnProperty.call(map, n) && map[n] === namespaceURI) {
+              return n;
+            }
+          }
+        }
+        el = el.nodeType == ATTRIBUTE_NODE ? el.ownerDocument : el.parentNode;
+      }
+      return null;
+    },
+    // Introduced in DOM Level 3:
+    lookupNamespaceURI: function (prefix) {
+      var el = this;
+      while (el) {
+        var map = el._nsMap;
+        //console.dir(map)
+        if (map) {
+          if (Object.prototype.hasOwnProperty.call(map, prefix)) {
+            return map[prefix];
+          }
+        }
+        el = el.nodeType == ATTRIBUTE_NODE ? el.ownerDocument : el.parentNode;
+      }
+      return null;
+    },
+    // Introduced in DOM Level 3:
+    isDefaultNamespace: function (namespaceURI) {
+      var prefix = this.lookupPrefix(namespaceURI);
+      return prefix == null;
+    }
+  };
+  function _xmlEncoder(c) {
+    return c == '<' && '&lt;' || c == '>' && '&gt;' || c == '&' && '&amp;' || c == '"' && '&quot;' || '&#' + c.charCodeAt() + ';';
+  }
+  copy(NodeType, Node);
+  copy(NodeType, Node.prototype);
+
+  /**
+   * @param callback return true for continue,false for break
+   * @return boolean true: break visit;
+   */
+  function _visitNode(node, callback) {
+    if (callback(node)) {
+      return true;
+    }
+    if (node = node.firstChild) {
+      do {
+        if (_visitNode(node, callback)) {
+          return true;
+        }
+      } while (node = node.nextSibling);
+    }
+  }
+  function Document() {
+    this.ownerDocument = this;
+  }
+  function _onAddAttribute(doc, el, newAttr) {
+    doc && doc._inc++;
+    var ns = newAttr.namespaceURI;
+    if (ns === NAMESPACE$2.XMLNS) {
+      //update namespace
+      el._nsMap[newAttr.prefix ? newAttr.localName : ''] = newAttr.value;
+    }
+  }
+  function _onRemoveAttribute(doc, el, newAttr, remove) {
+    doc && doc._inc++;
+    var ns = newAttr.namespaceURI;
+    if (ns === NAMESPACE$2.XMLNS) {
+      //update namespace
+      delete el._nsMap[newAttr.prefix ? newAttr.localName : ''];
+    }
+  }
+
+  /**
+   * Updates `el.childNodes`, updating the indexed items and it's `length`.
+   * Passing `newChild` means it will be appended.
+   * Otherwise it's assumed that an item has been removed,
+   * and `el.firstNode` and it's `.nextSibling` are used
+   * to walk the current list of child nodes.
+   *
+   * @param {Document} doc
+   * @param {Node} el
+   * @param {Node} [newChild]
+   * @private
+   */
+  function _onUpdateChild(doc, el, newChild) {
+    if (doc && doc._inc) {
+      doc._inc++;
+      //update childNodes
+      var cs = el.childNodes;
+      if (newChild) {
+        cs[cs.length++] = newChild;
+      } else {
+        var child = el.firstChild;
+        var i = 0;
+        while (child) {
+          cs[i++] = child;
+          child = child.nextSibling;
+        }
+        cs.length = i;
+        delete cs[cs.length];
+      }
+    }
+  }
+
+  /**
+   * Removes the connections between `parentNode` and `child`
+   * and any existing `child.previousSibling` or `child.nextSibling`.
+   *
+   * @see https://github.com/xmldom/xmldom/issues/135
+   * @see https://github.com/xmldom/xmldom/issues/145
+   *
+   * @param {Node} parentNode
+   * @param {Node} child
+   * @returns {Node} the child that was removed.
+   * @private
+   */
+  function _removeChild(parentNode, child) {
+    var previous = child.previousSibling;
+    var next = child.nextSibling;
+    if (previous) {
+      previous.nextSibling = next;
+    } else {
+      parentNode.firstChild = next;
+    }
+    if (next) {
+      next.previousSibling = previous;
+    } else {
+      parentNode.lastChild = previous;
+    }
+    child.parentNode = null;
+    child.previousSibling = null;
+    child.nextSibling = null;
+    _onUpdateChild(parentNode.ownerDocument, parentNode);
+    return child;
+  }
+
+  /**
+   * Returns `true` if `node` can be a parent for insertion.
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function hasValidParentNodeType(node) {
+    return node && (node.nodeType === Node.DOCUMENT_NODE || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE || node.nodeType === Node.ELEMENT_NODE);
+  }
+
+  /**
+   * Returns `true` if `node` can be inserted according to it's `nodeType`.
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function hasInsertableNodeType(node) {
+    return node && (isElementNode(node) || isTextNode(node) || isDocTypeNode(node) || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE || node.nodeType === Node.COMMENT_NODE || node.nodeType === Node.PROCESSING_INSTRUCTION_NODE);
+  }
+
+  /**
+   * Returns true if `node` is a DOCTYPE node
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function isDocTypeNode(node) {
+    return node && node.nodeType === Node.DOCUMENT_TYPE_NODE;
+  }
+
+  /**
+   * Returns true if the node is an element
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function isElementNode(node) {
+    return node && node.nodeType === Node.ELEMENT_NODE;
+  }
+  /**
+   * Returns true if `node` is a text node
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function isTextNode(node) {
+    return node && node.nodeType === Node.TEXT_NODE;
+  }
+
+  /**
+   * Check if en element node can be inserted before `child`, or at the end if child is falsy,
+   * according to the presence and position of a doctype node on the same level.
+   *
+   * @param {Document} doc The document node
+   * @param {Node} child the node that would become the nextSibling if the element would be inserted
+   * @returns {boolean} `true` if an element can be inserted before child
+   * @private
+   * https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   */
+  function isElementInsertionPossible(doc, child) {
+    var parentChildNodes = doc.childNodes || [];
+    if (find(parentChildNodes, isElementNode) || isDocTypeNode(child)) {
+      return false;
+    }
+    var docTypeNode = find(parentChildNodes, isDocTypeNode);
+    return !(child && docTypeNode && parentChildNodes.indexOf(docTypeNode) > parentChildNodes.indexOf(child));
+  }
+
+  /**
+   * Check if en element node can be inserted before `child`, or at the end if child is falsy,
+   * according to the presence and position of a doctype node on the same level.
+   *
+   * @param {Node} doc The document node
+   * @param {Node} child the node that would become the nextSibling if the element would be inserted
+   * @returns {boolean} `true` if an element can be inserted before child
+   * @private
+   * https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   */
+  function isElementReplacementPossible(doc, child) {
+    var parentChildNodes = doc.childNodes || [];
+    function hasElementChildThatIsNotChild(node) {
+      return isElementNode(node) && node !== child;
+    }
+    if (find(parentChildNodes, hasElementChildThatIsNotChild)) {
+      return false;
+    }
+    var docTypeNode = find(parentChildNodes, isDocTypeNode);
+    return !(child && docTypeNode && parentChildNodes.indexOf(docTypeNode) > parentChildNodes.indexOf(child));
+  }
+
+  /**
+   * @private
+   * Steps 1-5 of the checks before inserting and before replacing a child are the same.
+   *
+   * @param {Node} parent the parent node to insert `node` into
+   * @param {Node} node the node to insert
+   * @param {Node=} child the node that should become the `nextSibling` of `node`
+   * @returns {Node}
+   * @throws DOMException for several node combinations that would create a DOM that is not well-formed.
+   * @throws DOMException if `child` is provided but is not a child of `parent`.
+   * @see https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   * @see https://dom.spec.whatwg.org/#concept-node-replace
+   */
+  function assertPreInsertionValidity1to5(parent, node, child) {
+    // 1. If `parent` is not a Document, DocumentFragment, or Element node, then throw a "HierarchyRequestError" DOMException.
+    if (!hasValidParentNodeType(parent)) {
+      throw new DOMException(HIERARCHY_REQUEST_ERR, 'Unexpected parent node type ' + parent.nodeType);
+    }
+    // 2. If `node` is a host-including inclusive ancestor of `parent`, then throw a "HierarchyRequestError" DOMException.
+    // not implemented!
+    // 3. If `child` is non-null and its parent is not `parent`, then throw a "NotFoundError" DOMException.
+    if (child && child.parentNode !== parent) {
+      throw new DOMException(NOT_FOUND_ERR, 'child not in parent');
+    }
+    if (
+    // 4. If `node` is not a DocumentFragment, DocumentType, Element, or CharacterData node, then throw a "HierarchyRequestError" DOMException.
+    !hasInsertableNodeType(node) ||
+    // 5. If either `node` is a Text node and `parent` is a document,
+    // the sax parser currently adds top level text nodes, this will be fixed in 0.9.0
+    // || (node.nodeType === Node.TEXT_NODE && parent.nodeType === Node.DOCUMENT_NODE)
+    // or `node` is a doctype and `parent` is not a document, then throw a "HierarchyRequestError" DOMException.
+    isDocTypeNode(node) && parent.nodeType !== Node.DOCUMENT_NODE) {
+      throw new DOMException(HIERARCHY_REQUEST_ERR, 'Unexpected node type ' + node.nodeType + ' for parent node type ' + parent.nodeType);
+    }
+  }
+
+  /**
+   * @private
+   * Step 6 of the checks before inserting and before replacing a child are different.
+   *
+   * @param {Document} parent the parent node to insert `node` into
+   * @param {Node} node the node to insert
+   * @param {Node | undefined} child the node that should become the `nextSibling` of `node`
+   * @returns {Node}
+   * @throws DOMException for several node combinations that would create a DOM that is not well-formed.
+   * @throws DOMException if `child` is provided but is not a child of `parent`.
+   * @see https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   * @see https://dom.spec.whatwg.org/#concept-node-replace
+   */
+  function assertPreInsertionValidityInDocument(parent, node, child) {
+    var parentChildNodes = parent.childNodes || [];
+    var nodeChildNodes = node.childNodes || [];
+
+    // DocumentFragment
+    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      var nodeChildElements = nodeChildNodes.filter(isElementNode);
+      // If node has more than one element child or has a Text node child.
+      if (nodeChildElements.length > 1 || find(nodeChildNodes, isTextNode)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'More than one element or text in fragment');
+      }
+      // Otherwise, if `node` has one element child and either `parent` has an element child,
+      // `child` is a doctype, or `child` is non-null and a doctype is following `child`.
+      if (nodeChildElements.length === 1 && !isElementInsertionPossible(parent, child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Element in fragment can not be inserted before doctype');
+      }
+    }
+    // Element
+    if (isElementNode(node)) {
+      // `parent` has an element child, `child` is a doctype,
+      // or `child` is non-null and a doctype is following `child`.
+      if (!isElementInsertionPossible(parent, child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Only one element can be added and only after doctype');
+      }
+    }
+    // DocumentType
+    if (isDocTypeNode(node)) {
+      // `parent` has a doctype child,
+      if (find(parentChildNodes, isDocTypeNode)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Only one doctype is allowed');
+      }
+      var parentElementChild = find(parentChildNodes, isElementNode);
+      // `child` is non-null and an element is preceding `child`,
+      if (child && parentChildNodes.indexOf(parentElementChild) < parentChildNodes.indexOf(child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Doctype can only be inserted before an element');
+      }
+      // or `child` is null and `parent` has an element child.
+      if (!child && parentElementChild) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Doctype can not be appended since element is present');
+      }
+    }
+  }
+
+  /**
+   * @private
+   * Step 6 of the checks before inserting and before replacing a child are different.
+   *
+   * @param {Document} parent the parent node to insert `node` into
+   * @param {Node} node the node to insert
+   * @param {Node | undefined} child the node that should become the `nextSibling` of `node`
+   * @returns {Node}
+   * @throws DOMException for several node combinations that would create a DOM that is not well-formed.
+   * @throws DOMException if `child` is provided but is not a child of `parent`.
+   * @see https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   * @see https://dom.spec.whatwg.org/#concept-node-replace
+   */
+  function assertPreReplacementValidityInDocument(parent, node, child) {
+    var parentChildNodes = parent.childNodes || [];
+    var nodeChildNodes = node.childNodes || [];
+
+    // DocumentFragment
+    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      var nodeChildElements = nodeChildNodes.filter(isElementNode);
+      // If `node` has more than one element child or has a Text node child.
+      if (nodeChildElements.length > 1 || find(nodeChildNodes, isTextNode)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'More than one element or text in fragment');
+      }
+      // Otherwise, if `node` has one element child and either `parent` has an element child that is not `child` or a doctype is following `child`.
+      if (nodeChildElements.length === 1 && !isElementReplacementPossible(parent, child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Element in fragment can not be inserted before doctype');
+      }
+    }
+    // Element
+    if (isElementNode(node)) {
+      // `parent` has an element child that is not `child` or a doctype is following `child`.
+      if (!isElementReplacementPossible(parent, child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Only one element can be added and only after doctype');
+      }
+    }
+    // DocumentType
+    if (isDocTypeNode(node)) {
+      function hasDoctypeChildThatIsNotChild(node) {
+        return isDocTypeNode(node) && node !== child;
+      }
+
+      // `parent` has a doctype child that is not `child`,
+      if (find(parentChildNodes, hasDoctypeChildThatIsNotChild)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Only one doctype is allowed');
+      }
+      var parentElementChild = find(parentChildNodes, isElementNode);
+      // or an element is preceding `child`.
+      if (child && parentChildNodes.indexOf(parentElementChild) < parentChildNodes.indexOf(child)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, 'Doctype can only be inserted before an element');
+      }
+    }
+  }
+
+  /**
+   * @private
+   * @param {Node} parent the parent node to insert `node` into
+   * @param {Node} node the node to insert
+   * @param {Node=} child the node that should become the `nextSibling` of `node`
+   * @returns {Node}
+   * @throws DOMException for several node combinations that would create a DOM that is not well-formed.
+   * @throws DOMException if `child` is provided but is not a child of `parent`.
+   * @see https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity
+   */
+  function _insertBefore(parent, node, child, _inDocumentAssertion) {
+    // To ensure pre-insertion validity of a node into a parent before a child, run these steps:
+    assertPreInsertionValidity1to5(parent, node, child);
+
+    // If parent is a document, and any of the statements below, switched on the interface node implements,
+    // are true, then throw a "HierarchyRequestError" DOMException.
+    if (parent.nodeType === Node.DOCUMENT_NODE) {
+      (_inDocumentAssertion || assertPreInsertionValidityInDocument)(parent, node, child);
+    }
+    var cp = node.parentNode;
+    if (cp) {
+      cp.removeChild(node); //remove and update
+    }
+
+    if (node.nodeType === DOCUMENT_FRAGMENT_NODE) {
+      var newFirst = node.firstChild;
+      if (newFirst == null) {
+        return node;
+      }
+      var newLast = node.lastChild;
+    } else {
+      newFirst = newLast = node;
+    }
+    var pre = child ? child.previousSibling : parent.lastChild;
+    newFirst.previousSibling = pre;
+    newLast.nextSibling = child;
+    if (pre) {
+      pre.nextSibling = newFirst;
+    } else {
+      parent.firstChild = newFirst;
+    }
+    if (child == null) {
+      parent.lastChild = newLast;
+    } else {
+      child.previousSibling = newLast;
+    }
+    do {
+      newFirst.parentNode = parent;
+    } while (newFirst !== newLast && (newFirst = newFirst.nextSibling));
+    _onUpdateChild(parent.ownerDocument || parent, parent);
+    //console.log(parent.lastChild.nextSibling == null)
+    if (node.nodeType == DOCUMENT_FRAGMENT_NODE) {
+      node.firstChild = node.lastChild = null;
+    }
+    return node;
+  }
+
+  /**
+   * Appends `newChild` to `parentNode`.
+   * If `newChild` is already connected to a `parentNode` it is first removed from it.
+   *
+   * @see https://github.com/xmldom/xmldom/issues/135
+   * @see https://github.com/xmldom/xmldom/issues/145
+   * @param {Node} parentNode
+   * @param {Node} newChild
+   * @returns {Node}
+   * @private
+   */
+  function _appendSingleChild(parentNode, newChild) {
+    if (newChild.parentNode) {
+      newChild.parentNode.removeChild(newChild);
+    }
+    newChild.parentNode = parentNode;
+    newChild.previousSibling = parentNode.lastChild;
+    newChild.nextSibling = null;
+    if (newChild.previousSibling) {
+      newChild.previousSibling.nextSibling = newChild;
+    } else {
+      parentNode.firstChild = newChild;
+    }
+    parentNode.lastChild = newChild;
+    _onUpdateChild(parentNode.ownerDocument, parentNode, newChild);
+    return newChild;
+  }
+  Document.prototype = {
+    //implementation : null,
+    nodeName: '#document',
+    nodeType: DOCUMENT_NODE,
+    /**
+     * The DocumentType node of the document.
+     *
+     * @readonly
+     * @type DocumentType
+     */
+    doctype: null,
+    documentElement: null,
+    _inc: 1,
+    insertBefore: function (newChild, refChild) {
+      //raises
+      if (newChild.nodeType == DOCUMENT_FRAGMENT_NODE) {
+        var child = newChild.firstChild;
+        while (child) {
+          var next = child.nextSibling;
+          this.insertBefore(child, refChild);
+          child = next;
+        }
+        return newChild;
+      }
+      _insertBefore(this, newChild, refChild);
+      newChild.ownerDocument = this;
+      if (this.documentElement === null && newChild.nodeType === ELEMENT_NODE) {
+        this.documentElement = newChild;
+      }
+      return newChild;
+    },
+    removeChild: function (oldChild) {
+      if (this.documentElement == oldChild) {
+        this.documentElement = null;
+      }
+      return _removeChild(this, oldChild);
+    },
+    replaceChild: function (newChild, oldChild) {
+      //raises
+      _insertBefore(this, newChild, oldChild, assertPreReplacementValidityInDocument);
+      newChild.ownerDocument = this;
+      if (oldChild) {
+        this.removeChild(oldChild);
+      }
+      if (isElementNode(newChild)) {
+        this.documentElement = newChild;
+      }
+    },
+    // Introduced in DOM Level 2:
+    importNode: function (importedNode, deep) {
+      return importNode(this, importedNode, deep);
+    },
+    // Introduced in DOM Level 2:
+    getElementById: function (id) {
+      var rtv = null;
+      _visitNode(this.documentElement, function (node) {
+        if (node.nodeType == ELEMENT_NODE) {
+          if (node.getAttribute('id') == id) {
+            rtv = node;
+            return true;
+          }
+        }
+      });
+      return rtv;
+    },
+    /**
+     * The `getElementsByClassName` method of `Document` interface returns an array-like object
+     * of all child elements which have **all** of the given class name(s).
+     *
+     * Returns an empty list if `classeNames` is an empty string or only contains HTML white space characters.
+     *
+     *
+     * Warning: This is a live LiveNodeList.
+     * Changes in the DOM will reflect in the array as the changes occur.
+     * If an element selected by this array no longer qualifies for the selector,
+     * it will automatically be removed. Be aware of this for iteration purposes.
+     *
+     * @param {string} classNames is a string representing the class name(s) to match; multiple class names are separated by (ASCII-)whitespace
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
+     * @see https://dom.spec.whatwg.org/#concept-getelementsbyclassname
+     */
+    getElementsByClassName: function (classNames) {
+      var classNamesSet = toOrderedSet(classNames);
+      return new LiveNodeList(this, function (base) {
+        var ls = [];
+        if (classNamesSet.length > 0) {
+          _visitNode(base.documentElement, function (node) {
+            if (node !== base && node.nodeType === ELEMENT_NODE) {
+              var nodeClassNames = node.getAttribute('class');
+              // can be null if the attribute does not exist
+              if (nodeClassNames) {
+                // before splitting and iterating just compare them for the most common case
+                var matches = classNames === nodeClassNames;
+                if (!matches) {
+                  var nodeClassNamesSet = toOrderedSet(nodeClassNames);
+                  matches = classNamesSet.every(arrayIncludes(nodeClassNamesSet));
+                }
+                if (matches) {
+                  ls.push(node);
+                }
+              }
+            }
+          });
+        }
+        return ls;
+      });
+    },
+    //document factory method:
+    createElement: function (tagName) {
+      var node = new Element();
+      node.ownerDocument = this;
+      node.nodeName = tagName;
+      node.tagName = tagName;
+      node.localName = tagName;
+      node.childNodes = new NodeList();
+      var attrs = node.attributes = new NamedNodeMap();
+      attrs._ownerElement = node;
+      return node;
+    },
+    createDocumentFragment: function () {
+      var node = new DocumentFragment();
+      node.ownerDocument = this;
+      node.childNodes = new NodeList();
+      return node;
+    },
+    createTextNode: function (data) {
+      var node = new Text();
+      node.ownerDocument = this;
+      node.appendData(data);
+      return node;
+    },
+    createComment: function (data) {
+      var node = new Comment();
+      node.ownerDocument = this;
+      node.appendData(data);
+      return node;
+    },
+    createCDATASection: function (data) {
+      var node = new CDATASection();
+      node.ownerDocument = this;
+      node.appendData(data);
+      return node;
+    },
+    createProcessingInstruction: function (target, data) {
+      var node = new ProcessingInstruction();
+      node.ownerDocument = this;
+      node.tagName = node.nodeName = node.target = target;
+      node.nodeValue = node.data = data;
+      return node;
+    },
+    createAttribute: function (name) {
+      var node = new Attr();
+      node.ownerDocument = this;
+      node.name = name;
+      node.nodeName = name;
+      node.localName = name;
+      node.specified = true;
+      return node;
+    },
+    createEntityReference: function (name) {
+      var node = new EntityReference();
+      node.ownerDocument = this;
+      node.nodeName = name;
+      return node;
+    },
+    // Introduced in DOM Level 2:
+    createElementNS: function (namespaceURI, qualifiedName) {
+      var node = new Element();
+      var pl = qualifiedName.split(':');
+      var attrs = node.attributes = new NamedNodeMap();
+      node.childNodes = new NodeList();
+      node.ownerDocument = this;
+      node.nodeName = qualifiedName;
+      node.tagName = qualifiedName;
+      node.namespaceURI = namespaceURI;
+      if (pl.length == 2) {
+        node.prefix = pl[0];
+        node.localName = pl[1];
+      } else {
+        //el.prefix = null;
+        node.localName = qualifiedName;
+      }
+      attrs._ownerElement = node;
+      return node;
+    },
+    // Introduced in DOM Level 2:
+    createAttributeNS: function (namespaceURI, qualifiedName) {
+      var node = new Attr();
+      var pl = qualifiedName.split(':');
+      node.ownerDocument = this;
+      node.nodeName = qualifiedName;
+      node.name = qualifiedName;
+      node.namespaceURI = namespaceURI;
+      node.specified = true;
+      if (pl.length == 2) {
+        node.prefix = pl[0];
+        node.localName = pl[1];
+      } else {
+        //el.prefix = null;
+        node.localName = qualifiedName;
+      }
+      return node;
+    }
+  };
+  _extends(Document, Node);
+  function Element() {
+    this._nsMap = {};
+  }
+  Element.prototype = {
+    nodeType: ELEMENT_NODE,
+    hasAttribute: function (name) {
+      return this.getAttributeNode(name) != null;
+    },
+    getAttribute: function (name) {
+      var attr = this.getAttributeNode(name);
+      return attr && attr.value || '';
+    },
+    getAttributeNode: function (name) {
+      return this.attributes.getNamedItem(name);
+    },
+    setAttribute: function (name, value) {
+      var attr = this.ownerDocument.createAttribute(name);
+      attr.value = attr.nodeValue = "" + value;
+      this.setAttributeNode(attr);
+    },
+    removeAttribute: function (name) {
+      var attr = this.getAttributeNode(name);
+      attr && this.removeAttributeNode(attr);
+    },
+    //four real opeartion method
+    appendChild: function (newChild) {
+      if (newChild.nodeType === DOCUMENT_FRAGMENT_NODE) {
+        return this.insertBefore(newChild, null);
+      } else {
+        return _appendSingleChild(this, newChild);
+      }
+    },
+    setAttributeNode: function (newAttr) {
+      return this.attributes.setNamedItem(newAttr);
+    },
+    setAttributeNodeNS: function (newAttr) {
+      return this.attributes.setNamedItemNS(newAttr);
+    },
+    removeAttributeNode: function (oldAttr) {
+      //console.log(this == oldAttr.ownerElement)
+      return this.attributes.removeNamedItem(oldAttr.nodeName);
+    },
+    //get real attribute name,and remove it by removeAttributeNode
+    removeAttributeNS: function (namespaceURI, localName) {
+      var old = this.getAttributeNodeNS(namespaceURI, localName);
+      old && this.removeAttributeNode(old);
+    },
+    hasAttributeNS: function (namespaceURI, localName) {
+      return this.getAttributeNodeNS(namespaceURI, localName) != null;
+    },
+    getAttributeNS: function (namespaceURI, localName) {
+      var attr = this.getAttributeNodeNS(namespaceURI, localName);
+      return attr && attr.value || '';
+    },
+    setAttributeNS: function (namespaceURI, qualifiedName, value) {
+      var attr = this.ownerDocument.createAttributeNS(namespaceURI, qualifiedName);
+      attr.value = attr.nodeValue = "" + value;
+      this.setAttributeNode(attr);
+    },
+    getAttributeNodeNS: function (namespaceURI, localName) {
+      return this.attributes.getNamedItemNS(namespaceURI, localName);
+    },
+    getElementsByTagName: function (tagName) {
+      return new LiveNodeList(this, function (base) {
+        var ls = [];
+        _visitNode(base, function (node) {
+          if (node !== base && node.nodeType == ELEMENT_NODE && (tagName === '*' || node.tagName == tagName)) {
+            ls.push(node);
+          }
+        });
+        return ls;
+      });
+    },
+    getElementsByTagNameNS: function (namespaceURI, localName) {
+      return new LiveNodeList(this, function (base) {
+        var ls = [];
+        _visitNode(base, function (node) {
+          if (node !== base && node.nodeType === ELEMENT_NODE && (namespaceURI === '*' || node.namespaceURI === namespaceURI) && (localName === '*' || node.localName == localName)) {
+            ls.push(node);
+          }
+        });
+        return ls;
+      });
+    }
+  };
+  Document.prototype.getElementsByTagName = Element.prototype.getElementsByTagName;
+  Document.prototype.getElementsByTagNameNS = Element.prototype.getElementsByTagNameNS;
+  _extends(Element, Node);
+  function Attr() {}
+  Attr.prototype.nodeType = ATTRIBUTE_NODE;
+  _extends(Attr, Node);
+  function CharacterData() {}
+  CharacterData.prototype = {
+    data: '',
+    substringData: function (offset, count) {
+      return this.data.substring(offset, offset + count);
+    },
+    appendData: function (text) {
+      text = this.data + text;
+      this.nodeValue = this.data = text;
+      this.length = text.length;
+    },
+    insertData: function (offset, text) {
+      this.replaceData(offset, 0, text);
+    },
+    appendChild: function (newChild) {
+      throw new Error(ExceptionMessage[HIERARCHY_REQUEST_ERR]);
+    },
+    deleteData: function (offset, count) {
+      this.replaceData(offset, count, "");
+    },
+    replaceData: function (offset, count, text) {
+      var start = this.data.substring(0, offset);
+      var end = this.data.substring(offset + count);
+      text = start + text + end;
+      this.nodeValue = this.data = text;
+      this.length = text.length;
+    }
+  };
+  _extends(CharacterData, Node);
+  function Text() {}
+  Text.prototype = {
+    nodeName: "#text",
+    nodeType: TEXT_NODE,
+    splitText: function (offset) {
+      var text = this.data;
+      var newText = text.substring(offset);
+      text = text.substring(0, offset);
+      this.data = this.nodeValue = text;
+      this.length = text.length;
+      var newNode = this.ownerDocument.createTextNode(newText);
+      if (this.parentNode) {
+        this.parentNode.insertBefore(newNode, this.nextSibling);
+      }
+      return newNode;
+    }
+  };
+  _extends(Text, CharacterData);
+  function Comment() {}
+  Comment.prototype = {
+    nodeName: "#comment",
+    nodeType: COMMENT_NODE
+  };
+  _extends(Comment, CharacterData);
+  function CDATASection() {}
+  CDATASection.prototype = {
+    nodeName: "#cdata-section",
+    nodeType: CDATA_SECTION_NODE
+  };
+  _extends(CDATASection, CharacterData);
+  function DocumentType() {}
+  DocumentType.prototype.nodeType = DOCUMENT_TYPE_NODE;
+  _extends(DocumentType, Node);
+  function Notation() {}
+  Notation.prototype.nodeType = NOTATION_NODE;
+  _extends(Notation, Node);
+  function Entity() {}
+  Entity.prototype.nodeType = ENTITY_NODE;
+  _extends(Entity, Node);
+  function EntityReference() {}
+  EntityReference.prototype.nodeType = ENTITY_REFERENCE_NODE;
+  _extends(EntityReference, Node);
+  function DocumentFragment() {}
+  DocumentFragment.prototype.nodeName = "#document-fragment";
+  DocumentFragment.prototype.nodeType = DOCUMENT_FRAGMENT_NODE;
+  _extends(DocumentFragment, Node);
+  function ProcessingInstruction() {}
+  ProcessingInstruction.prototype.nodeType = PROCESSING_INSTRUCTION_NODE;
+  _extends(ProcessingInstruction, Node);
+  function XMLSerializer() {}
+  XMLSerializer.prototype.serializeToString = function (node, isHtml, nodeFilter) {
+    return nodeSerializeToString.call(node, isHtml, nodeFilter);
+  };
+  Node.prototype.toString = nodeSerializeToString;
+  function nodeSerializeToString(isHtml, nodeFilter) {
+    var buf = [];
+    var refNode = this.nodeType == 9 && this.documentElement || this;
+    var prefix = refNode.prefix;
+    var uri = refNode.namespaceURI;
+    if (uri && prefix == null) {
+      //console.log(prefix)
+      var prefix = refNode.lookupPrefix(uri);
+      if (prefix == null) {
+        //isHTML = true;
+        var visibleNamespaces = [{
+          namespace: uri,
+          prefix: null
+        }
+        //{namespace:uri,prefix:''}
+        ];
+      }
+    }
+
+    serializeToString(this, buf, isHtml, nodeFilter, visibleNamespaces);
+    //console.log('###',this.nodeType,uri,prefix,buf.join(''))
+    return buf.join('');
+  }
+  function needNamespaceDefine(node, isHTML, visibleNamespaces) {
+    var prefix = node.prefix || '';
+    var uri = node.namespaceURI;
+    // According to [Namespaces in XML 1.0](https://www.w3.org/TR/REC-xml-names/#ns-using) ,
+    // and more specifically https://www.w3.org/TR/REC-xml-names/#nsc-NoPrefixUndecl :
+    // > In a namespace declaration for a prefix [...], the attribute value MUST NOT be empty.
+    // in a similar manner [Namespaces in XML 1.1](https://www.w3.org/TR/xml-names11/#ns-using)
+    // and more specifically https://www.w3.org/TR/xml-names11/#nsc-NSDeclared :
+    // > [...] Furthermore, the attribute value [...] must not be an empty string.
+    // so serializing empty namespace value like xmlns:ds="" would produce an invalid XML document.
+    if (!uri) {
+      return false;
+    }
+    if (prefix === "xml" && uri === NAMESPACE$2.XML || uri === NAMESPACE$2.XMLNS) {
+      return false;
+    }
+    var i = visibleNamespaces.length;
+    while (i--) {
+      var ns = visibleNamespaces[i];
+      // get namespace prefix
+      if (ns.prefix === prefix) {
+        return ns.namespace !== uri;
+      }
+    }
+    return true;
+  }
+  /**
+   * Well-formed constraint: No < in Attribute Values
+   * > The replacement text of any entity referred to directly or indirectly
+   * > in an attribute value must not contain a <.
+   * @see https://www.w3.org/TR/xml11/#CleanAttrVals
+   * @see https://www.w3.org/TR/xml11/#NT-AttValue
+   *
+   * Literal whitespace other than space that appear in attribute values
+   * are serialized as their entity references, so they will be preserved.
+   * (In contrast to whitespace literals in the input which are normalized to spaces)
+   * @see https://www.w3.org/TR/xml11/#AVNormalize
+   * @see https://w3c.github.io/DOM-Parsing/#serializing-an-element-s-attributes
+   */
+  function addSerializedAttribute(buf, qualifiedName, value) {
+    buf.push(' ', qualifiedName, '="', value.replace(/[<>&"\t\n\r]/g, _xmlEncoder), '"');
+  }
+  function serializeToString(node, buf, isHTML, nodeFilter, visibleNamespaces) {
+    if (!visibleNamespaces) {
+      visibleNamespaces = [];
+    }
+    if (nodeFilter) {
+      node = nodeFilter(node);
+      if (node) {
+        if (typeof node == 'string') {
+          buf.push(node);
+          return;
+        }
+      } else {
+        return;
+      }
+      //buf.sort.apply(attrs, attributeSorter);
+    }
+
+    switch (node.nodeType) {
+      case ELEMENT_NODE:
+        var attrs = node.attributes;
+        var len = attrs.length;
+        var child = node.firstChild;
+        var nodeName = node.tagName;
+        isHTML = NAMESPACE$2.isHTML(node.namespaceURI) || isHTML;
+        var prefixedNodeName = nodeName;
+        if (!isHTML && !node.prefix && node.namespaceURI) {
+          var defaultNS;
+          // lookup current default ns from `xmlns` attribute
+          for (var ai = 0; ai < attrs.length; ai++) {
+            if (attrs.item(ai).name === 'xmlns') {
+              defaultNS = attrs.item(ai).value;
+              break;
+            }
+          }
+          if (!defaultNS) {
+            // lookup current default ns in visibleNamespaces
+            for (var nsi = visibleNamespaces.length - 1; nsi >= 0; nsi--) {
+              var namespace = visibleNamespaces[nsi];
+              if (namespace.prefix === '' && namespace.namespace === node.namespaceURI) {
+                defaultNS = namespace.namespace;
+                break;
+              }
+            }
+          }
+          if (defaultNS !== node.namespaceURI) {
+            for (var nsi = visibleNamespaces.length - 1; nsi >= 0; nsi--) {
+              var namespace = visibleNamespaces[nsi];
+              if (namespace.namespace === node.namespaceURI) {
+                if (namespace.prefix) {
+                  prefixedNodeName = namespace.prefix + ':' + nodeName;
+                }
+                break;
+              }
+            }
+          }
+        }
+        buf.push('<', prefixedNodeName);
+        for (var i = 0; i < len; i++) {
+          // add namespaces for attributes
+          var attr = attrs.item(i);
+          if (attr.prefix == 'xmlns') {
+            visibleNamespaces.push({
+              prefix: attr.localName,
+              namespace: attr.value
+            });
+          } else if (attr.nodeName == 'xmlns') {
+            visibleNamespaces.push({
+              prefix: '',
+              namespace: attr.value
+            });
+          }
+        }
+        for (var i = 0; i < len; i++) {
+          var attr = attrs.item(i);
+          if (needNamespaceDefine(attr, isHTML, visibleNamespaces)) {
+            var prefix = attr.prefix || '';
+            var uri = attr.namespaceURI;
+            addSerializedAttribute(buf, prefix ? 'xmlns:' + prefix : "xmlns", uri);
+            visibleNamespaces.push({
+              prefix: prefix,
+              namespace: uri
+            });
+          }
+          serializeToString(attr, buf, isHTML, nodeFilter, visibleNamespaces);
+        }
+
+        // add namespace for current node
+        if (nodeName === prefixedNodeName && needNamespaceDefine(node, isHTML, visibleNamespaces)) {
+          var prefix = node.prefix || '';
+          var uri = node.namespaceURI;
+          addSerializedAttribute(buf, prefix ? 'xmlns:' + prefix : "xmlns", uri);
+          visibleNamespaces.push({
+            prefix: prefix,
+            namespace: uri
+          });
+        }
+        if (child || isHTML && !/^(?:meta|link|img|br|hr|input)$/i.test(nodeName)) {
+          buf.push('>');
+          //if is cdata child node
+          if (isHTML && /^script$/i.test(nodeName)) {
+            while (child) {
+              if (child.data) {
+                buf.push(child.data);
+              } else {
+                serializeToString(child, buf, isHTML, nodeFilter, visibleNamespaces.slice());
+              }
+              child = child.nextSibling;
+            }
+          } else {
+            while (child) {
+              serializeToString(child, buf, isHTML, nodeFilter, visibleNamespaces.slice());
+              child = child.nextSibling;
+            }
+          }
+          buf.push('</', prefixedNodeName, '>');
+        } else {
+          buf.push('/>');
+        }
+        // remove added visible namespaces
+        //visibleNamespaces.length = startVisibleNamespaces;
+        return;
+      case DOCUMENT_NODE:
+      case DOCUMENT_FRAGMENT_NODE:
+        var child = node.firstChild;
+        while (child) {
+          serializeToString(child, buf, isHTML, nodeFilter, visibleNamespaces.slice());
+          child = child.nextSibling;
+        }
+        return;
+      case ATTRIBUTE_NODE:
+        return addSerializedAttribute(buf, node.name, node.value);
+      case TEXT_NODE:
+        /**
+         * The ampersand character (&) and the left angle bracket (<) must not appear in their literal form,
+         * except when used as markup delimiters, or within a comment, a processing instruction, or a CDATA section.
+         * If they are needed elsewhere, they must be escaped using either numeric character references or the strings
+         * `&amp;` and `&lt;` respectively.
+         * The right angle bracket (>) may be represented using the string " &gt; ", and must, for compatibility,
+         * be escaped using either `&gt;` or a character reference when it appears in the string `]]>` in content,
+         * when that string is not marking the end of a CDATA section.
+         *
+         * In the content of elements, character data is any string of characters
+         * which does not contain the start-delimiter of any markup
+         * and does not include the CDATA-section-close delimiter, `]]>`.
+         *
+         * @see https://www.w3.org/TR/xml/#NT-CharData
+         * @see https://w3c.github.io/DOM-Parsing/#xml-serializing-a-text-node
+         */
+        return buf.push(node.data.replace(/[<&>]/g, _xmlEncoder));
+      case CDATA_SECTION_NODE:
+        return buf.push('<![CDATA[', node.data, ']]>');
+      case COMMENT_NODE:
+        return buf.push("<!--", node.data, "-->");
+      case DOCUMENT_TYPE_NODE:
+        var pubid = node.publicId;
+        var sysid = node.systemId;
+        buf.push('<!DOCTYPE ', node.name);
+        if (pubid) {
+          buf.push(' PUBLIC ', pubid);
+          if (sysid && sysid != '.') {
+            buf.push(' ', sysid);
+          }
+          buf.push('>');
+        } else if (sysid && sysid != '.') {
+          buf.push(' SYSTEM ', sysid, '>');
+        } else {
+          var sub = node.internalSubset;
+          if (sub) {
+            buf.push(" [", sub, "]");
+          }
+          buf.push(">");
+        }
+        return;
+      case PROCESSING_INSTRUCTION_NODE:
+        return buf.push("<?", node.target, " ", node.data, "?>");
+      case ENTITY_REFERENCE_NODE:
+        return buf.push('&', node.nodeName, ';');
+      //case ENTITY_NODE:
+      //case NOTATION_NODE:
+      default:
+        buf.push('??', node.nodeName);
+    }
+  }
+  function importNode(doc, node, deep) {
+    var node2;
+    switch (node.nodeType) {
+      case ELEMENT_NODE:
+        node2 = node.cloneNode(false);
+        node2.ownerDocument = doc;
+      //var attrs = node2.attributes;
+      //var len = attrs.length;
+      //for(var i=0;i<len;i++){
+      //node2.setAttributeNodeNS(importNode(doc,attrs.item(i),deep));
+      //}
+      case DOCUMENT_FRAGMENT_NODE:
+        break;
+      case ATTRIBUTE_NODE:
+        deep = true;
+        break;
+      //case ENTITY_REFERENCE_NODE:
+      //case PROCESSING_INSTRUCTION_NODE:
+      ////case TEXT_NODE:
+      //case CDATA_SECTION_NODE:
+      //case COMMENT_NODE:
+      //	deep = false;
+      //	break;
+      //case DOCUMENT_NODE:
+      //case DOCUMENT_TYPE_NODE:
+      //cannot be imported.
+      //case ENTITY_NODE:
+      //case NOTATION_NODE：
+      //can not hit in level3
+      //default:throw e;
+    }
+
+    if (!node2) {
+      node2 = node.cloneNode(false); //false
+    }
+
+    node2.ownerDocument = doc;
+    node2.parentNode = null;
+    if (deep) {
+      var child = node.firstChild;
+      while (child) {
+        node2.appendChild(importNode(doc, child, deep));
+        child = child.nextSibling;
+      }
+    }
+    return node2;
+  }
+  //
+  //var _relationMap = {firstChild:1,lastChild:1,previousSibling:1,nextSibling:1,
+  //					attributes:1,childNodes:1,parentNode:1,documentElement:1,doctype,};
+  function cloneNode(doc, node, deep) {
+    var node2 = new node.constructor();
+    for (var n in node) {
+      if (Object.prototype.hasOwnProperty.call(node, n)) {
+        var v = node[n];
+        if (typeof v != "object") {
+          if (v != node2[n]) {
+            node2[n] = v;
+          }
+        }
+      }
+    }
+    if (node.childNodes) {
+      node2.childNodes = new NodeList();
+    }
+    node2.ownerDocument = doc;
+    switch (node2.nodeType) {
+      case ELEMENT_NODE:
+        var attrs = node.attributes;
+        var attrs2 = node2.attributes = new NamedNodeMap();
+        var len = attrs.length;
+        attrs2._ownerElement = node2;
+        for (var i = 0; i < len; i++) {
+          node2.setAttributeNode(cloneNode(doc, attrs.item(i), true));
+        }
+        break;
+      case ATTRIBUTE_NODE:
+        deep = true;
+    }
+    if (deep) {
+      var child = node.firstChild;
+      while (child) {
+        node2.appendChild(cloneNode(doc, child, deep));
+        child = child.nextSibling;
+      }
+    }
+    return node2;
+  }
+  function __set__(object, key, value) {
+    object[key] = value;
+  }
+  //do dynamic
+  try {
+    if (Object.defineProperty) {
+      Object.defineProperty(LiveNodeList.prototype, 'length', {
+        get: function () {
+          _updateLiveList(this);
+          return this.$$length;
+        }
+      });
+      Object.defineProperty(Node.prototype, 'textContent', {
+        get: function () {
+          return getTextContent(this);
+        },
+        set: function (data) {
+          switch (this.nodeType) {
+            case ELEMENT_NODE:
+            case DOCUMENT_FRAGMENT_NODE:
+              while (this.firstChild) {
+                this.removeChild(this.firstChild);
+              }
+              if (data || String(data)) {
+                this.appendChild(this.ownerDocument.createTextNode(data));
+              }
+              break;
+            default:
+              this.data = data;
+              this.value = data;
+              this.nodeValue = data;
+          }
+        }
+      });
+      function getTextContent(node) {
+        switch (node.nodeType) {
+          case ELEMENT_NODE:
+          case DOCUMENT_FRAGMENT_NODE:
+            var buf = [];
+            node = node.firstChild;
+            while (node) {
+              if (node.nodeType !== 7 && node.nodeType !== 8) {
+                buf.push(getTextContent(node));
+              }
+              node = node.nextSibling;
+            }
+            return buf.join('');
+          default:
+            return node.nodeValue;
+        }
+      }
+      __set__ = function (object, key, value) {
+        //console.log(value)
+        object['$$' + key] = value;
+      };
+    }
+  } catch (e) {//ie8
+  }
+
+  //if(typeof require == 'function'){
+  var DocumentType_1 = DocumentType;
+  var DOMException_1 = DOMException;
+  var DOMImplementation_1 = DOMImplementation$1;
+  var Element_1 = Element;
+  var Node_1 = Node;
+  var NodeList_1 = NodeList;
+  var XMLSerializer_1 = XMLSerializer;
+  //}
+
+  var dom = {
+    DocumentType: DocumentType_1,
+    DOMException: DOMException_1,
+    DOMImplementation: DOMImplementation_1,
+    Element: Element_1,
+    Node: Node_1,
+    NodeList: NodeList_1,
+    XMLSerializer: XMLSerializer_1
+  };
+
+  var entities = createCommonjsModule(function (module, exports) {
+
+    var freeze = conventions.freeze;
+
+    /**
+     * The entities that are predefined in every XML document.
+     *
+     * @see https://www.w3.org/TR/2006/REC-xml11-20060816/#sec-predefined-ent W3C XML 1.1
+     * @see https://www.w3.org/TR/2008/REC-xml-20081126/#sec-predefined-ent W3C XML 1.0
+     * @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Predefined_entities_in_XML Wikipedia
+     */
+    exports.XML_ENTITIES = freeze({
+      amp: '&',
+      apos: "'",
+      gt: '>',
+      lt: '<',
+      quot: '"'
+    });
+
+    /**
+     * A map of all entities that are detected in an HTML document.
+     * They contain all entries from `XML_ENTITIES`.
+     *
+     * @see XML_ENTITIES
+     * @see DOMParser.parseFromString
+     * @see DOMImplementation.prototype.createHTMLDocument
+     * @see https://html.spec.whatwg.org/#named-character-references WHATWG HTML(5) Spec
+     * @see https://html.spec.whatwg.org/entities.json JSON
+     * @see https://www.w3.org/TR/xml-entity-names/ W3C XML Entity Names
+     * @see https://www.w3.org/TR/html4/sgml/entities.html W3C HTML4/SGML
+     * @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Character_entity_references_in_HTML Wikipedia (HTML)
+     * @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Entities_representing_special_characters_in_XHTML Wikpedia (XHTML)
+     */
+    exports.HTML_ENTITIES = freeze({
+      Aacute: '\u00C1',
+      aacute: '\u00E1',
+      Abreve: '\u0102',
+      abreve: '\u0103',
+      ac: '\u223E',
+      acd: '\u223F',
+      acE: '\u223E\u0333',
+      Acirc: '\u00C2',
+      acirc: '\u00E2',
+      acute: '\u00B4',
+      Acy: '\u0410',
+      acy: '\u0430',
+      AElig: '\u00C6',
+      aelig: '\u00E6',
+      af: '\u2061',
+      Afr: '\uD835\uDD04',
+      afr: '\uD835\uDD1E',
+      Agrave: '\u00C0',
+      agrave: '\u00E0',
+      alefsym: '\u2135',
+      aleph: '\u2135',
+      Alpha: '\u0391',
+      alpha: '\u03B1',
+      Amacr: '\u0100',
+      amacr: '\u0101',
+      amalg: '\u2A3F',
+      AMP: '\u0026',
+      amp: '\u0026',
+      And: '\u2A53',
+      and: '\u2227',
+      andand: '\u2A55',
+      andd: '\u2A5C',
+      andslope: '\u2A58',
+      andv: '\u2A5A',
+      ang: '\u2220',
+      ange: '\u29A4',
+      angle: '\u2220',
+      angmsd: '\u2221',
+      angmsdaa: '\u29A8',
+      angmsdab: '\u29A9',
+      angmsdac: '\u29AA',
+      angmsdad: '\u29AB',
+      angmsdae: '\u29AC',
+      angmsdaf: '\u29AD',
+      angmsdag: '\u29AE',
+      angmsdah: '\u29AF',
+      angrt: '\u221F',
+      angrtvb: '\u22BE',
+      angrtvbd: '\u299D',
+      angsph: '\u2222',
+      angst: '\u00C5',
+      angzarr: '\u237C',
+      Aogon: '\u0104',
+      aogon: '\u0105',
+      Aopf: '\uD835\uDD38',
+      aopf: '\uD835\uDD52',
+      ap: '\u2248',
+      apacir: '\u2A6F',
+      apE: '\u2A70',
+      ape: '\u224A',
+      apid: '\u224B',
+      apos: '\u0027',
+      ApplyFunction: '\u2061',
+      approx: '\u2248',
+      approxeq: '\u224A',
+      Aring: '\u00C5',
+      aring: '\u00E5',
+      Ascr: '\uD835\uDC9C',
+      ascr: '\uD835\uDCB6',
+      Assign: '\u2254',
+      ast: '\u002A',
+      asymp: '\u2248',
+      asympeq: '\u224D',
+      Atilde: '\u00C3',
+      atilde: '\u00E3',
+      Auml: '\u00C4',
+      auml: '\u00E4',
+      awconint: '\u2233',
+      awint: '\u2A11',
+      backcong: '\u224C',
+      backepsilon: '\u03F6',
+      backprime: '\u2035',
+      backsim: '\u223D',
+      backsimeq: '\u22CD',
+      Backslash: '\u2216',
+      Barv: '\u2AE7',
+      barvee: '\u22BD',
+      Barwed: '\u2306',
+      barwed: '\u2305',
+      barwedge: '\u2305',
+      bbrk: '\u23B5',
+      bbrktbrk: '\u23B6',
+      bcong: '\u224C',
+      Bcy: '\u0411',
+      bcy: '\u0431',
+      bdquo: '\u201E',
+      becaus: '\u2235',
+      Because: '\u2235',
+      because: '\u2235',
+      bemptyv: '\u29B0',
+      bepsi: '\u03F6',
+      bernou: '\u212C',
+      Bernoullis: '\u212C',
+      Beta: '\u0392',
+      beta: '\u03B2',
+      beth: '\u2136',
+      between: '\u226C',
+      Bfr: '\uD835\uDD05',
+      bfr: '\uD835\uDD1F',
+      bigcap: '\u22C2',
+      bigcirc: '\u25EF',
+      bigcup: '\u22C3',
+      bigodot: '\u2A00',
+      bigoplus: '\u2A01',
+      bigotimes: '\u2A02',
+      bigsqcup: '\u2A06',
+      bigstar: '\u2605',
+      bigtriangledown: '\u25BD',
+      bigtriangleup: '\u25B3',
+      biguplus: '\u2A04',
+      bigvee: '\u22C1',
+      bigwedge: '\u22C0',
+      bkarow: '\u290D',
+      blacklozenge: '\u29EB',
+      blacksquare: '\u25AA',
+      blacktriangle: '\u25B4',
+      blacktriangledown: '\u25BE',
+      blacktriangleleft: '\u25C2',
+      blacktriangleright: '\u25B8',
+      blank: '\u2423',
+      blk12: '\u2592',
+      blk14: '\u2591',
+      blk34: '\u2593',
+      block: '\u2588',
+      bne: '\u003D\u20E5',
+      bnequiv: '\u2261\u20E5',
+      bNot: '\u2AED',
+      bnot: '\u2310',
+      Bopf: '\uD835\uDD39',
+      bopf: '\uD835\uDD53',
+      bot: '\u22A5',
+      bottom: '\u22A5',
+      bowtie: '\u22C8',
+      boxbox: '\u29C9',
+      boxDL: '\u2557',
+      boxDl: '\u2556',
+      boxdL: '\u2555',
+      boxdl: '\u2510',
+      boxDR: '\u2554',
+      boxDr: '\u2553',
+      boxdR: '\u2552',
+      boxdr: '\u250C',
+      boxH: '\u2550',
+      boxh: '\u2500',
+      boxHD: '\u2566',
+      boxHd: '\u2564',
+      boxhD: '\u2565',
+      boxhd: '\u252C',
+      boxHU: '\u2569',
+      boxHu: '\u2567',
+      boxhU: '\u2568',
+      boxhu: '\u2534',
+      boxminus: '\u229F',
+      boxplus: '\u229E',
+      boxtimes: '\u22A0',
+      boxUL: '\u255D',
+      boxUl: '\u255C',
+      boxuL: '\u255B',
+      boxul: '\u2518',
+      boxUR: '\u255A',
+      boxUr: '\u2559',
+      boxuR: '\u2558',
+      boxur: '\u2514',
+      boxV: '\u2551',
+      boxv: '\u2502',
+      boxVH: '\u256C',
+      boxVh: '\u256B',
+      boxvH: '\u256A',
+      boxvh: '\u253C',
+      boxVL: '\u2563',
+      boxVl: '\u2562',
+      boxvL: '\u2561',
+      boxvl: '\u2524',
+      boxVR: '\u2560',
+      boxVr: '\u255F',
+      boxvR: '\u255E',
+      boxvr: '\u251C',
+      bprime: '\u2035',
+      Breve: '\u02D8',
+      breve: '\u02D8',
+      brvbar: '\u00A6',
+      Bscr: '\u212C',
+      bscr: '\uD835\uDCB7',
+      bsemi: '\u204F',
+      bsim: '\u223D',
+      bsime: '\u22CD',
+      bsol: '\u005C',
+      bsolb: '\u29C5',
+      bsolhsub: '\u27C8',
+      bull: '\u2022',
+      bullet: '\u2022',
+      bump: '\u224E',
+      bumpE: '\u2AAE',
+      bumpe: '\u224F',
+      Bumpeq: '\u224E',
+      bumpeq: '\u224F',
+      Cacute: '\u0106',
+      cacute: '\u0107',
+      Cap: '\u22D2',
+      cap: '\u2229',
+      capand: '\u2A44',
+      capbrcup: '\u2A49',
+      capcap: '\u2A4B',
+      capcup: '\u2A47',
+      capdot: '\u2A40',
+      CapitalDifferentialD: '\u2145',
+      caps: '\u2229\uFE00',
+      caret: '\u2041',
+      caron: '\u02C7',
+      Cayleys: '\u212D',
+      ccaps: '\u2A4D',
+      Ccaron: '\u010C',
+      ccaron: '\u010D',
+      Ccedil: '\u00C7',
+      ccedil: '\u00E7',
+      Ccirc: '\u0108',
+      ccirc: '\u0109',
+      Cconint: '\u2230',
+      ccups: '\u2A4C',
+      ccupssm: '\u2A50',
+      Cdot: '\u010A',
+      cdot: '\u010B',
+      cedil: '\u00B8',
+      Cedilla: '\u00B8',
+      cemptyv: '\u29B2',
+      cent: '\u00A2',
+      CenterDot: '\u00B7',
+      centerdot: '\u00B7',
+      Cfr: '\u212D',
+      cfr: '\uD835\uDD20',
+      CHcy: '\u0427',
+      chcy: '\u0447',
+      check: '\u2713',
+      checkmark: '\u2713',
+      Chi: '\u03A7',
+      chi: '\u03C7',
+      cir: '\u25CB',
+      circ: '\u02C6',
+      circeq: '\u2257',
+      circlearrowleft: '\u21BA',
+      circlearrowright: '\u21BB',
+      circledast: '\u229B',
+      circledcirc: '\u229A',
+      circleddash: '\u229D',
+      CircleDot: '\u2299',
+      circledR: '\u00AE',
+      circledS: '\u24C8',
+      CircleMinus: '\u2296',
+      CirclePlus: '\u2295',
+      CircleTimes: '\u2297',
+      cirE: '\u29C3',
+      cire: '\u2257',
+      cirfnint: '\u2A10',
+      cirmid: '\u2AEF',
+      cirscir: '\u29C2',
+      ClockwiseContourIntegral: '\u2232',
+      CloseCurlyDoubleQuote: '\u201D',
+      CloseCurlyQuote: '\u2019',
+      clubs: '\u2663',
+      clubsuit: '\u2663',
+      Colon: '\u2237',
+      colon: '\u003A',
+      Colone: '\u2A74',
+      colone: '\u2254',
+      coloneq: '\u2254',
+      comma: '\u002C',
+      commat: '\u0040',
+      comp: '\u2201',
+      compfn: '\u2218',
+      complement: '\u2201',
+      complexes: '\u2102',
+      cong: '\u2245',
+      congdot: '\u2A6D',
+      Congruent: '\u2261',
+      Conint: '\u222F',
+      conint: '\u222E',
+      ContourIntegral: '\u222E',
+      Copf: '\u2102',
+      copf: '\uD835\uDD54',
+      coprod: '\u2210',
+      Coproduct: '\u2210',
+      COPY: '\u00A9',
+      copy: '\u00A9',
+      copysr: '\u2117',
+      CounterClockwiseContourIntegral: '\u2233',
+      crarr: '\u21B5',
+      Cross: '\u2A2F',
+      cross: '\u2717',
+      Cscr: '\uD835\uDC9E',
+      cscr: '\uD835\uDCB8',
+      csub: '\u2ACF',
+      csube: '\u2AD1',
+      csup: '\u2AD0',
+      csupe: '\u2AD2',
+      ctdot: '\u22EF',
+      cudarrl: '\u2938',
+      cudarrr: '\u2935',
+      cuepr: '\u22DE',
+      cuesc: '\u22DF',
+      cularr: '\u21B6',
+      cularrp: '\u293D',
+      Cup: '\u22D3',
+      cup: '\u222A',
+      cupbrcap: '\u2A48',
+      CupCap: '\u224D',
+      cupcap: '\u2A46',
+      cupcup: '\u2A4A',
+      cupdot: '\u228D',
+      cupor: '\u2A45',
+      cups: '\u222A\uFE00',
+      curarr: '\u21B7',
+      curarrm: '\u293C',
+      curlyeqprec: '\u22DE',
+      curlyeqsucc: '\u22DF',
+      curlyvee: '\u22CE',
+      curlywedge: '\u22CF',
+      curren: '\u00A4',
+      curvearrowleft: '\u21B6',
+      curvearrowright: '\u21B7',
+      cuvee: '\u22CE',
+      cuwed: '\u22CF',
+      cwconint: '\u2232',
+      cwint: '\u2231',
+      cylcty: '\u232D',
+      Dagger: '\u2021',
+      dagger: '\u2020',
+      daleth: '\u2138',
+      Darr: '\u21A1',
+      dArr: '\u21D3',
+      darr: '\u2193',
+      dash: '\u2010',
+      Dashv: '\u2AE4',
+      dashv: '\u22A3',
+      dbkarow: '\u290F',
+      dblac: '\u02DD',
+      Dcaron: '\u010E',
+      dcaron: '\u010F',
+      Dcy: '\u0414',
+      dcy: '\u0434',
+      DD: '\u2145',
+      dd: '\u2146',
+      ddagger: '\u2021',
+      ddarr: '\u21CA',
+      DDotrahd: '\u2911',
+      ddotseq: '\u2A77',
+      deg: '\u00B0',
+      Del: '\u2207',
+      Delta: '\u0394',
+      delta: '\u03B4',
+      demptyv: '\u29B1',
+      dfisht: '\u297F',
+      Dfr: '\uD835\uDD07',
+      dfr: '\uD835\uDD21',
+      dHar: '\u2965',
+      dharl: '\u21C3',
+      dharr: '\u21C2',
+      DiacriticalAcute: '\u00B4',
+      DiacriticalDot: '\u02D9',
+      DiacriticalDoubleAcute: '\u02DD',
+      DiacriticalGrave: '\u0060',
+      DiacriticalTilde: '\u02DC',
+      diam: '\u22C4',
+      Diamond: '\u22C4',
+      diamond: '\u22C4',
+      diamondsuit: '\u2666',
+      diams: '\u2666',
+      die: '\u00A8',
+      DifferentialD: '\u2146',
+      digamma: '\u03DD',
+      disin: '\u22F2',
+      div: '\u00F7',
+      divide: '\u00F7',
+      divideontimes: '\u22C7',
+      divonx: '\u22C7',
+      DJcy: '\u0402',
+      djcy: '\u0452',
+      dlcorn: '\u231E',
+      dlcrop: '\u230D',
+      dollar: '\u0024',
+      Dopf: '\uD835\uDD3B',
+      dopf: '\uD835\uDD55',
+      Dot: '\u00A8',
+      dot: '\u02D9',
+      DotDot: '\u20DC',
+      doteq: '\u2250',
+      doteqdot: '\u2251',
+      DotEqual: '\u2250',
+      dotminus: '\u2238',
+      dotplus: '\u2214',
+      dotsquare: '\u22A1',
+      doublebarwedge: '\u2306',
+      DoubleContourIntegral: '\u222F',
+      DoubleDot: '\u00A8',
+      DoubleDownArrow: '\u21D3',
+      DoubleLeftArrow: '\u21D0',
+      DoubleLeftRightArrow: '\u21D4',
+      DoubleLeftTee: '\u2AE4',
+      DoubleLongLeftArrow: '\u27F8',
+      DoubleLongLeftRightArrow: '\u27FA',
+      DoubleLongRightArrow: '\u27F9',
+      DoubleRightArrow: '\u21D2',
+      DoubleRightTee: '\u22A8',
+      DoubleUpArrow: '\u21D1',
+      DoubleUpDownArrow: '\u21D5',
+      DoubleVerticalBar: '\u2225',
+      DownArrow: '\u2193',
+      Downarrow: '\u21D3',
+      downarrow: '\u2193',
+      DownArrowBar: '\u2913',
+      DownArrowUpArrow: '\u21F5',
+      DownBreve: '\u0311',
+      downdownarrows: '\u21CA',
+      downharpoonleft: '\u21C3',
+      downharpoonright: '\u21C2',
+      DownLeftRightVector: '\u2950',
+      DownLeftTeeVector: '\u295E',
+      DownLeftVector: '\u21BD',
+      DownLeftVectorBar: '\u2956',
+      DownRightTeeVector: '\u295F',
+      DownRightVector: '\u21C1',
+      DownRightVectorBar: '\u2957',
+      DownTee: '\u22A4',
+      DownTeeArrow: '\u21A7',
+      drbkarow: '\u2910',
+      drcorn: '\u231F',
+      drcrop: '\u230C',
+      Dscr: '\uD835\uDC9F',
+      dscr: '\uD835\uDCB9',
+      DScy: '\u0405',
+      dscy: '\u0455',
+      dsol: '\u29F6',
+      Dstrok: '\u0110',
+      dstrok: '\u0111',
+      dtdot: '\u22F1',
+      dtri: '\u25BF',
+      dtrif: '\u25BE',
+      duarr: '\u21F5',
+      duhar: '\u296F',
+      dwangle: '\u29A6',
+      DZcy: '\u040F',
+      dzcy: '\u045F',
+      dzigrarr: '\u27FF',
+      Eacute: '\u00C9',
+      eacute: '\u00E9',
+      easter: '\u2A6E',
+      Ecaron: '\u011A',
+      ecaron: '\u011B',
+      ecir: '\u2256',
+      Ecirc: '\u00CA',
+      ecirc: '\u00EA',
+      ecolon: '\u2255',
+      Ecy: '\u042D',
+      ecy: '\u044D',
+      eDDot: '\u2A77',
+      Edot: '\u0116',
+      eDot: '\u2251',
+      edot: '\u0117',
+      ee: '\u2147',
+      efDot: '\u2252',
+      Efr: '\uD835\uDD08',
+      efr: '\uD835\uDD22',
+      eg: '\u2A9A',
+      Egrave: '\u00C8',
+      egrave: '\u00E8',
+      egs: '\u2A96',
+      egsdot: '\u2A98',
+      el: '\u2A99',
+      Element: '\u2208',
+      elinters: '\u23E7',
+      ell: '\u2113',
+      els: '\u2A95',
+      elsdot: '\u2A97',
+      Emacr: '\u0112',
+      emacr: '\u0113',
+      empty: '\u2205',
+      emptyset: '\u2205',
+      EmptySmallSquare: '\u25FB',
+      emptyv: '\u2205',
+      EmptyVerySmallSquare: '\u25AB',
+      emsp: '\u2003',
+      emsp13: '\u2004',
+      emsp14: '\u2005',
+      ENG: '\u014A',
+      eng: '\u014B',
+      ensp: '\u2002',
+      Eogon: '\u0118',
+      eogon: '\u0119',
+      Eopf: '\uD835\uDD3C',
+      eopf: '\uD835\uDD56',
+      epar: '\u22D5',
+      eparsl: '\u29E3',
+      eplus: '\u2A71',
+      epsi: '\u03B5',
+      Epsilon: '\u0395',
+      epsilon: '\u03B5',
+      epsiv: '\u03F5',
+      eqcirc: '\u2256',
+      eqcolon: '\u2255',
+      eqsim: '\u2242',
+      eqslantgtr: '\u2A96',
+      eqslantless: '\u2A95',
+      Equal: '\u2A75',
+      equals: '\u003D',
+      EqualTilde: '\u2242',
+      equest: '\u225F',
+      Equilibrium: '\u21CC',
+      equiv: '\u2261',
+      equivDD: '\u2A78',
+      eqvparsl: '\u29E5',
+      erarr: '\u2971',
+      erDot: '\u2253',
+      Escr: '\u2130',
+      escr: '\u212F',
+      esdot: '\u2250',
+      Esim: '\u2A73',
+      esim: '\u2242',
+      Eta: '\u0397',
+      eta: '\u03B7',
+      ETH: '\u00D0',
+      eth: '\u00F0',
+      Euml: '\u00CB',
+      euml: '\u00EB',
+      euro: '\u20AC',
+      excl: '\u0021',
+      exist: '\u2203',
+      Exists: '\u2203',
+      expectation: '\u2130',
+      ExponentialE: '\u2147',
+      exponentiale: '\u2147',
+      fallingdotseq: '\u2252',
+      Fcy: '\u0424',
+      fcy: '\u0444',
+      female: '\u2640',
+      ffilig: '\uFB03',
+      fflig: '\uFB00',
+      ffllig: '\uFB04',
+      Ffr: '\uD835\uDD09',
+      ffr: '\uD835\uDD23',
+      filig: '\uFB01',
+      FilledSmallSquare: '\u25FC',
+      FilledVerySmallSquare: '\u25AA',
+      fjlig: '\u0066\u006A',
+      flat: '\u266D',
+      fllig: '\uFB02',
+      fltns: '\u25B1',
+      fnof: '\u0192',
+      Fopf: '\uD835\uDD3D',
+      fopf: '\uD835\uDD57',
+      ForAll: '\u2200',
+      forall: '\u2200',
+      fork: '\u22D4',
+      forkv: '\u2AD9',
+      Fouriertrf: '\u2131',
+      fpartint: '\u2A0D',
+      frac12: '\u00BD',
+      frac13: '\u2153',
+      frac14: '\u00BC',
+      frac15: '\u2155',
+      frac16: '\u2159',
+      frac18: '\u215B',
+      frac23: '\u2154',
+      frac25: '\u2156',
+      frac34: '\u00BE',
+      frac35: '\u2157',
+      frac38: '\u215C',
+      frac45: '\u2158',
+      frac56: '\u215A',
+      frac58: '\u215D',
+      frac78: '\u215E',
+      frasl: '\u2044',
+      frown: '\u2322',
+      Fscr: '\u2131',
+      fscr: '\uD835\uDCBB',
+      gacute: '\u01F5',
+      Gamma: '\u0393',
+      gamma: '\u03B3',
+      Gammad: '\u03DC',
+      gammad: '\u03DD',
+      gap: '\u2A86',
+      Gbreve: '\u011E',
+      gbreve: '\u011F',
+      Gcedil: '\u0122',
+      Gcirc: '\u011C',
+      gcirc: '\u011D',
+      Gcy: '\u0413',
+      gcy: '\u0433',
+      Gdot: '\u0120',
+      gdot: '\u0121',
+      gE: '\u2267',
+      ge: '\u2265',
+      gEl: '\u2A8C',
+      gel: '\u22DB',
+      geq: '\u2265',
+      geqq: '\u2267',
+      geqslant: '\u2A7E',
+      ges: '\u2A7E',
+      gescc: '\u2AA9',
+      gesdot: '\u2A80',
+      gesdoto: '\u2A82',
+      gesdotol: '\u2A84',
+      gesl: '\u22DB\uFE00',
+      gesles: '\u2A94',
+      Gfr: '\uD835\uDD0A',
+      gfr: '\uD835\uDD24',
+      Gg: '\u22D9',
+      gg: '\u226B',
+      ggg: '\u22D9',
+      gimel: '\u2137',
+      GJcy: '\u0403',
+      gjcy: '\u0453',
+      gl: '\u2277',
+      gla: '\u2AA5',
+      glE: '\u2A92',
+      glj: '\u2AA4',
+      gnap: '\u2A8A',
+      gnapprox: '\u2A8A',
+      gnE: '\u2269',
+      gne: '\u2A88',
+      gneq: '\u2A88',
+      gneqq: '\u2269',
+      gnsim: '\u22E7',
+      Gopf: '\uD835\uDD3E',
+      gopf: '\uD835\uDD58',
+      grave: '\u0060',
+      GreaterEqual: '\u2265',
+      GreaterEqualLess: '\u22DB',
+      GreaterFullEqual: '\u2267',
+      GreaterGreater: '\u2AA2',
+      GreaterLess: '\u2277',
+      GreaterSlantEqual: '\u2A7E',
+      GreaterTilde: '\u2273',
+      Gscr: '\uD835\uDCA2',
+      gscr: '\u210A',
+      gsim: '\u2273',
+      gsime: '\u2A8E',
+      gsiml: '\u2A90',
+      Gt: '\u226B',
+      GT: '\u003E',
+      gt: '\u003E',
+      gtcc: '\u2AA7',
+      gtcir: '\u2A7A',
+      gtdot: '\u22D7',
+      gtlPar: '\u2995',
+      gtquest: '\u2A7C',
+      gtrapprox: '\u2A86',
+      gtrarr: '\u2978',
+      gtrdot: '\u22D7',
+      gtreqless: '\u22DB',
+      gtreqqless: '\u2A8C',
+      gtrless: '\u2277',
+      gtrsim: '\u2273',
+      gvertneqq: '\u2269\uFE00',
+      gvnE: '\u2269\uFE00',
+      Hacek: '\u02C7',
+      hairsp: '\u200A',
+      half: '\u00BD',
+      hamilt: '\u210B',
+      HARDcy: '\u042A',
+      hardcy: '\u044A',
+      hArr: '\u21D4',
+      harr: '\u2194',
+      harrcir: '\u2948',
+      harrw: '\u21AD',
+      Hat: '\u005E',
+      hbar: '\u210F',
+      Hcirc: '\u0124',
+      hcirc: '\u0125',
+      hearts: '\u2665',
+      heartsuit: '\u2665',
+      hellip: '\u2026',
+      hercon: '\u22B9',
+      Hfr: '\u210C',
+      hfr: '\uD835\uDD25',
+      HilbertSpace: '\u210B',
+      hksearow: '\u2925',
+      hkswarow: '\u2926',
+      hoarr: '\u21FF',
+      homtht: '\u223B',
+      hookleftarrow: '\u21A9',
+      hookrightarrow: '\u21AA',
+      Hopf: '\u210D',
+      hopf: '\uD835\uDD59',
+      horbar: '\u2015',
+      HorizontalLine: '\u2500',
+      Hscr: '\u210B',
+      hscr: '\uD835\uDCBD',
+      hslash: '\u210F',
+      Hstrok: '\u0126',
+      hstrok: '\u0127',
+      HumpDownHump: '\u224E',
+      HumpEqual: '\u224F',
+      hybull: '\u2043',
+      hyphen: '\u2010',
+      Iacute: '\u00CD',
+      iacute: '\u00ED',
+      ic: '\u2063',
+      Icirc: '\u00CE',
+      icirc: '\u00EE',
+      Icy: '\u0418',
+      icy: '\u0438',
+      Idot: '\u0130',
+      IEcy: '\u0415',
+      iecy: '\u0435',
+      iexcl: '\u00A1',
+      iff: '\u21D4',
+      Ifr: '\u2111',
+      ifr: '\uD835\uDD26',
+      Igrave: '\u00CC',
+      igrave: '\u00EC',
+      ii: '\u2148',
+      iiiint: '\u2A0C',
+      iiint: '\u222D',
+      iinfin: '\u29DC',
+      iiota: '\u2129',
+      IJlig: '\u0132',
+      ijlig: '\u0133',
+      Im: '\u2111',
+      Imacr: '\u012A',
+      imacr: '\u012B',
+      image: '\u2111',
+      ImaginaryI: '\u2148',
+      imagline: '\u2110',
+      imagpart: '\u2111',
+      imath: '\u0131',
+      imof: '\u22B7',
+      imped: '\u01B5',
+      Implies: '\u21D2',
+      in: '\u2208',
+      incare: '\u2105',
+      infin: '\u221E',
+      infintie: '\u29DD',
+      inodot: '\u0131',
+      Int: '\u222C',
+      int: '\u222B',
+      intcal: '\u22BA',
+      integers: '\u2124',
+      Integral: '\u222B',
+      intercal: '\u22BA',
+      Intersection: '\u22C2',
+      intlarhk: '\u2A17',
+      intprod: '\u2A3C',
+      InvisibleComma: '\u2063',
+      InvisibleTimes: '\u2062',
+      IOcy: '\u0401',
+      iocy: '\u0451',
+      Iogon: '\u012E',
+      iogon: '\u012F',
+      Iopf: '\uD835\uDD40',
+      iopf: '\uD835\uDD5A',
+      Iota: '\u0399',
+      iota: '\u03B9',
+      iprod: '\u2A3C',
+      iquest: '\u00BF',
+      Iscr: '\u2110',
+      iscr: '\uD835\uDCBE',
+      isin: '\u2208',
+      isindot: '\u22F5',
+      isinE: '\u22F9',
+      isins: '\u22F4',
+      isinsv: '\u22F3',
+      isinv: '\u2208',
+      it: '\u2062',
+      Itilde: '\u0128',
+      itilde: '\u0129',
+      Iukcy: '\u0406',
+      iukcy: '\u0456',
+      Iuml: '\u00CF',
+      iuml: '\u00EF',
+      Jcirc: '\u0134',
+      jcirc: '\u0135',
+      Jcy: '\u0419',
+      jcy: '\u0439',
+      Jfr: '\uD835\uDD0D',
+      jfr: '\uD835\uDD27',
+      jmath: '\u0237',
+      Jopf: '\uD835\uDD41',
+      jopf: '\uD835\uDD5B',
+      Jscr: '\uD835\uDCA5',
+      jscr: '\uD835\uDCBF',
+      Jsercy: '\u0408',
+      jsercy: '\u0458',
+      Jukcy: '\u0404',
+      jukcy: '\u0454',
+      Kappa: '\u039A',
+      kappa: '\u03BA',
+      kappav: '\u03F0',
+      Kcedil: '\u0136',
+      kcedil: '\u0137',
+      Kcy: '\u041A',
+      kcy: '\u043A',
+      Kfr: '\uD835\uDD0E',
+      kfr: '\uD835\uDD28',
+      kgreen: '\u0138',
+      KHcy: '\u0425',
+      khcy: '\u0445',
+      KJcy: '\u040C',
+      kjcy: '\u045C',
+      Kopf: '\uD835\uDD42',
+      kopf: '\uD835\uDD5C',
+      Kscr: '\uD835\uDCA6',
+      kscr: '\uD835\uDCC0',
+      lAarr: '\u21DA',
+      Lacute: '\u0139',
+      lacute: '\u013A',
+      laemptyv: '\u29B4',
+      lagran: '\u2112',
+      Lambda: '\u039B',
+      lambda: '\u03BB',
+      Lang: '\u27EA',
+      lang: '\u27E8',
+      langd: '\u2991',
+      langle: '\u27E8',
+      lap: '\u2A85',
+      Laplacetrf: '\u2112',
+      laquo: '\u00AB',
+      Larr: '\u219E',
+      lArr: '\u21D0',
+      larr: '\u2190',
+      larrb: '\u21E4',
+      larrbfs: '\u291F',
+      larrfs: '\u291D',
+      larrhk: '\u21A9',
+      larrlp: '\u21AB',
+      larrpl: '\u2939',
+      larrsim: '\u2973',
+      larrtl: '\u21A2',
+      lat: '\u2AAB',
+      lAtail: '\u291B',
+      latail: '\u2919',
+      late: '\u2AAD',
+      lates: '\u2AAD\uFE00',
+      lBarr: '\u290E',
+      lbarr: '\u290C',
+      lbbrk: '\u2772',
+      lbrace: '\u007B',
+      lbrack: '\u005B',
+      lbrke: '\u298B',
+      lbrksld: '\u298F',
+      lbrkslu: '\u298D',
+      Lcaron: '\u013D',
+      lcaron: '\u013E',
+      Lcedil: '\u013B',
+      lcedil: '\u013C',
+      lceil: '\u2308',
+      lcub: '\u007B',
+      Lcy: '\u041B',
+      lcy: '\u043B',
+      ldca: '\u2936',
+      ldquo: '\u201C',
+      ldquor: '\u201E',
+      ldrdhar: '\u2967',
+      ldrushar: '\u294B',
+      ldsh: '\u21B2',
+      lE: '\u2266',
+      le: '\u2264',
+      LeftAngleBracket: '\u27E8',
+      LeftArrow: '\u2190',
+      Leftarrow: '\u21D0',
+      leftarrow: '\u2190',
+      LeftArrowBar: '\u21E4',
+      LeftArrowRightArrow: '\u21C6',
+      leftarrowtail: '\u21A2',
+      LeftCeiling: '\u2308',
+      LeftDoubleBracket: '\u27E6',
+      LeftDownTeeVector: '\u2961',
+      LeftDownVector: '\u21C3',
+      LeftDownVectorBar: '\u2959',
+      LeftFloor: '\u230A',
+      leftharpoondown: '\u21BD',
+      leftharpoonup: '\u21BC',
+      leftleftarrows: '\u21C7',
+      LeftRightArrow: '\u2194',
+      Leftrightarrow: '\u21D4',
+      leftrightarrow: '\u2194',
+      leftrightarrows: '\u21C6',
+      leftrightharpoons: '\u21CB',
+      leftrightsquigarrow: '\u21AD',
+      LeftRightVector: '\u294E',
+      LeftTee: '\u22A3',
+      LeftTeeArrow: '\u21A4',
+      LeftTeeVector: '\u295A',
+      leftthreetimes: '\u22CB',
+      LeftTriangle: '\u22B2',
+      LeftTriangleBar: '\u29CF',
+      LeftTriangleEqual: '\u22B4',
+      LeftUpDownVector: '\u2951',
+      LeftUpTeeVector: '\u2960',
+      LeftUpVector: '\u21BF',
+      LeftUpVectorBar: '\u2958',
+      LeftVector: '\u21BC',
+      LeftVectorBar: '\u2952',
+      lEg: '\u2A8B',
+      leg: '\u22DA',
+      leq: '\u2264',
+      leqq: '\u2266',
+      leqslant: '\u2A7D',
+      les: '\u2A7D',
+      lescc: '\u2AA8',
+      lesdot: '\u2A7F',
+      lesdoto: '\u2A81',
+      lesdotor: '\u2A83',
+      lesg: '\u22DA\uFE00',
+      lesges: '\u2A93',
+      lessapprox: '\u2A85',
+      lessdot: '\u22D6',
+      lesseqgtr: '\u22DA',
+      lesseqqgtr: '\u2A8B',
+      LessEqualGreater: '\u22DA',
+      LessFullEqual: '\u2266',
+      LessGreater: '\u2276',
+      lessgtr: '\u2276',
+      LessLess: '\u2AA1',
+      lesssim: '\u2272',
+      LessSlantEqual: '\u2A7D',
+      LessTilde: '\u2272',
+      lfisht: '\u297C',
+      lfloor: '\u230A',
+      Lfr: '\uD835\uDD0F',
+      lfr: '\uD835\uDD29',
+      lg: '\u2276',
+      lgE: '\u2A91',
+      lHar: '\u2962',
+      lhard: '\u21BD',
+      lharu: '\u21BC',
+      lharul: '\u296A',
+      lhblk: '\u2584',
+      LJcy: '\u0409',
+      ljcy: '\u0459',
+      Ll: '\u22D8',
+      ll: '\u226A',
+      llarr: '\u21C7',
+      llcorner: '\u231E',
+      Lleftarrow: '\u21DA',
+      llhard: '\u296B',
+      lltri: '\u25FA',
+      Lmidot: '\u013F',
+      lmidot: '\u0140',
+      lmoust: '\u23B0',
+      lmoustache: '\u23B0',
+      lnap: '\u2A89',
+      lnapprox: '\u2A89',
+      lnE: '\u2268',
+      lne: '\u2A87',
+      lneq: '\u2A87',
+      lneqq: '\u2268',
+      lnsim: '\u22E6',
+      loang: '\u27EC',
+      loarr: '\u21FD',
+      lobrk: '\u27E6',
+      LongLeftArrow: '\u27F5',
+      Longleftarrow: '\u27F8',
+      longleftarrow: '\u27F5',
+      LongLeftRightArrow: '\u27F7',
+      Longleftrightarrow: '\u27FA',
+      longleftrightarrow: '\u27F7',
+      longmapsto: '\u27FC',
+      LongRightArrow: '\u27F6',
+      Longrightarrow: '\u27F9',
+      longrightarrow: '\u27F6',
+      looparrowleft: '\u21AB',
+      looparrowright: '\u21AC',
+      lopar: '\u2985',
+      Lopf: '\uD835\uDD43',
+      lopf: '\uD835\uDD5D',
+      loplus: '\u2A2D',
+      lotimes: '\u2A34',
+      lowast: '\u2217',
+      lowbar: '\u005F',
+      LowerLeftArrow: '\u2199',
+      LowerRightArrow: '\u2198',
+      loz: '\u25CA',
+      lozenge: '\u25CA',
+      lozf: '\u29EB',
+      lpar: '\u0028',
+      lparlt: '\u2993',
+      lrarr: '\u21C6',
+      lrcorner: '\u231F',
+      lrhar: '\u21CB',
+      lrhard: '\u296D',
+      lrm: '\u200E',
+      lrtri: '\u22BF',
+      lsaquo: '\u2039',
+      Lscr: '\u2112',
+      lscr: '\uD835\uDCC1',
+      Lsh: '\u21B0',
+      lsh: '\u21B0',
+      lsim: '\u2272',
+      lsime: '\u2A8D',
+      lsimg: '\u2A8F',
+      lsqb: '\u005B',
+      lsquo: '\u2018',
+      lsquor: '\u201A',
+      Lstrok: '\u0141',
+      lstrok: '\u0142',
+      Lt: '\u226A',
+      LT: '\u003C',
+      lt: '\u003C',
+      ltcc: '\u2AA6',
+      ltcir: '\u2A79',
+      ltdot: '\u22D6',
+      lthree: '\u22CB',
+      ltimes: '\u22C9',
+      ltlarr: '\u2976',
+      ltquest: '\u2A7B',
+      ltri: '\u25C3',
+      ltrie: '\u22B4',
+      ltrif: '\u25C2',
+      ltrPar: '\u2996',
+      lurdshar: '\u294A',
+      luruhar: '\u2966',
+      lvertneqq: '\u2268\uFE00',
+      lvnE: '\u2268\uFE00',
+      macr: '\u00AF',
+      male: '\u2642',
+      malt: '\u2720',
+      maltese: '\u2720',
+      Map: '\u2905',
+      map: '\u21A6',
+      mapsto: '\u21A6',
+      mapstodown: '\u21A7',
+      mapstoleft: '\u21A4',
+      mapstoup: '\u21A5',
+      marker: '\u25AE',
+      mcomma: '\u2A29',
+      Mcy: '\u041C',
+      mcy: '\u043C',
+      mdash: '\u2014',
+      mDDot: '\u223A',
+      measuredangle: '\u2221',
+      MediumSpace: '\u205F',
+      Mellintrf: '\u2133',
+      Mfr: '\uD835\uDD10',
+      mfr: '\uD835\uDD2A',
+      mho: '\u2127',
+      micro: '\u00B5',
+      mid: '\u2223',
+      midast: '\u002A',
+      midcir: '\u2AF0',
+      middot: '\u00B7',
+      minus: '\u2212',
+      minusb: '\u229F',
+      minusd: '\u2238',
+      minusdu: '\u2A2A',
+      MinusPlus: '\u2213',
+      mlcp: '\u2ADB',
+      mldr: '\u2026',
+      mnplus: '\u2213',
+      models: '\u22A7',
+      Mopf: '\uD835\uDD44',
+      mopf: '\uD835\uDD5E',
+      mp: '\u2213',
+      Mscr: '\u2133',
+      mscr: '\uD835\uDCC2',
+      mstpos: '\u223E',
+      Mu: '\u039C',
+      mu: '\u03BC',
+      multimap: '\u22B8',
+      mumap: '\u22B8',
+      nabla: '\u2207',
+      Nacute: '\u0143',
+      nacute: '\u0144',
+      nang: '\u2220\u20D2',
+      nap: '\u2249',
+      napE: '\u2A70\u0338',
+      napid: '\u224B\u0338',
+      napos: '\u0149',
+      napprox: '\u2249',
+      natur: '\u266E',
+      natural: '\u266E',
+      naturals: '\u2115',
+      nbsp: '\u00A0',
+      nbump: '\u224E\u0338',
+      nbumpe: '\u224F\u0338',
+      ncap: '\u2A43',
+      Ncaron: '\u0147',
+      ncaron: '\u0148',
+      Ncedil: '\u0145',
+      ncedil: '\u0146',
+      ncong: '\u2247',
+      ncongdot: '\u2A6D\u0338',
+      ncup: '\u2A42',
+      Ncy: '\u041D',
+      ncy: '\u043D',
+      ndash: '\u2013',
+      ne: '\u2260',
+      nearhk: '\u2924',
+      neArr: '\u21D7',
+      nearr: '\u2197',
+      nearrow: '\u2197',
+      nedot: '\u2250\u0338',
+      NegativeMediumSpace: '\u200B',
+      NegativeThickSpace: '\u200B',
+      NegativeThinSpace: '\u200B',
+      NegativeVeryThinSpace: '\u200B',
+      nequiv: '\u2262',
+      nesear: '\u2928',
+      nesim: '\u2242\u0338',
+      NestedGreaterGreater: '\u226B',
+      NestedLessLess: '\u226A',
+      NewLine: '\u000A',
+      nexist: '\u2204',
+      nexists: '\u2204',
+      Nfr: '\uD835\uDD11',
+      nfr: '\uD835\uDD2B',
+      ngE: '\u2267\u0338',
+      nge: '\u2271',
+      ngeq: '\u2271',
+      ngeqq: '\u2267\u0338',
+      ngeqslant: '\u2A7E\u0338',
+      nges: '\u2A7E\u0338',
+      nGg: '\u22D9\u0338',
+      ngsim: '\u2275',
+      nGt: '\u226B\u20D2',
+      ngt: '\u226F',
+      ngtr: '\u226F',
+      nGtv: '\u226B\u0338',
+      nhArr: '\u21CE',
+      nharr: '\u21AE',
+      nhpar: '\u2AF2',
+      ni: '\u220B',
+      nis: '\u22FC',
+      nisd: '\u22FA',
+      niv: '\u220B',
+      NJcy: '\u040A',
+      njcy: '\u045A',
+      nlArr: '\u21CD',
+      nlarr: '\u219A',
+      nldr: '\u2025',
+      nlE: '\u2266\u0338',
+      nle: '\u2270',
+      nLeftarrow: '\u21CD',
+      nleftarrow: '\u219A',
+      nLeftrightarrow: '\u21CE',
+      nleftrightarrow: '\u21AE',
+      nleq: '\u2270',
+      nleqq: '\u2266\u0338',
+      nleqslant: '\u2A7D\u0338',
+      nles: '\u2A7D\u0338',
+      nless: '\u226E',
+      nLl: '\u22D8\u0338',
+      nlsim: '\u2274',
+      nLt: '\u226A\u20D2',
+      nlt: '\u226E',
+      nltri: '\u22EA',
+      nltrie: '\u22EC',
+      nLtv: '\u226A\u0338',
+      nmid: '\u2224',
+      NoBreak: '\u2060',
+      NonBreakingSpace: '\u00A0',
+      Nopf: '\u2115',
+      nopf: '\uD835\uDD5F',
+      Not: '\u2AEC',
+      not: '\u00AC',
+      NotCongruent: '\u2262',
+      NotCupCap: '\u226D',
+      NotDoubleVerticalBar: '\u2226',
+      NotElement: '\u2209',
+      NotEqual: '\u2260',
+      NotEqualTilde: '\u2242\u0338',
+      NotExists: '\u2204',
+      NotGreater: '\u226F',
+      NotGreaterEqual: '\u2271',
+      NotGreaterFullEqual: '\u2267\u0338',
+      NotGreaterGreater: '\u226B\u0338',
+      NotGreaterLess: '\u2279',
+      NotGreaterSlantEqual: '\u2A7E\u0338',
+      NotGreaterTilde: '\u2275',
+      NotHumpDownHump: '\u224E\u0338',
+      NotHumpEqual: '\u224F\u0338',
+      notin: '\u2209',
+      notindot: '\u22F5\u0338',
+      notinE: '\u22F9\u0338',
+      notinva: '\u2209',
+      notinvb: '\u22F7',
+      notinvc: '\u22F6',
+      NotLeftTriangle: '\u22EA',
+      NotLeftTriangleBar: '\u29CF\u0338',
+      NotLeftTriangleEqual: '\u22EC',
+      NotLess: '\u226E',
+      NotLessEqual: '\u2270',
+      NotLessGreater: '\u2278',
+      NotLessLess: '\u226A\u0338',
+      NotLessSlantEqual: '\u2A7D\u0338',
+      NotLessTilde: '\u2274',
+      NotNestedGreaterGreater: '\u2AA2\u0338',
+      NotNestedLessLess: '\u2AA1\u0338',
+      notni: '\u220C',
+      notniva: '\u220C',
+      notnivb: '\u22FE',
+      notnivc: '\u22FD',
+      NotPrecedes: '\u2280',
+      NotPrecedesEqual: '\u2AAF\u0338',
+      NotPrecedesSlantEqual: '\u22E0',
+      NotReverseElement: '\u220C',
+      NotRightTriangle: '\u22EB',
+      NotRightTriangleBar: '\u29D0\u0338',
+      NotRightTriangleEqual: '\u22ED',
+      NotSquareSubset: '\u228F\u0338',
+      NotSquareSubsetEqual: '\u22E2',
+      NotSquareSuperset: '\u2290\u0338',
+      NotSquareSupersetEqual: '\u22E3',
+      NotSubset: '\u2282\u20D2',
+      NotSubsetEqual: '\u2288',
+      NotSucceeds: '\u2281',
+      NotSucceedsEqual: '\u2AB0\u0338',
+      NotSucceedsSlantEqual: '\u22E1',
+      NotSucceedsTilde: '\u227F\u0338',
+      NotSuperset: '\u2283\u20D2',
+      NotSupersetEqual: '\u2289',
+      NotTilde: '\u2241',
+      NotTildeEqual: '\u2244',
+      NotTildeFullEqual: '\u2247',
+      NotTildeTilde: '\u2249',
+      NotVerticalBar: '\u2224',
+      npar: '\u2226',
+      nparallel: '\u2226',
+      nparsl: '\u2AFD\u20E5',
+      npart: '\u2202\u0338',
+      npolint: '\u2A14',
+      npr: '\u2280',
+      nprcue: '\u22E0',
+      npre: '\u2AAF\u0338',
+      nprec: '\u2280',
+      npreceq: '\u2AAF\u0338',
+      nrArr: '\u21CF',
+      nrarr: '\u219B',
+      nrarrc: '\u2933\u0338',
+      nrarrw: '\u219D\u0338',
+      nRightarrow: '\u21CF',
+      nrightarrow: '\u219B',
+      nrtri: '\u22EB',
+      nrtrie: '\u22ED',
+      nsc: '\u2281',
+      nsccue: '\u22E1',
+      nsce: '\u2AB0\u0338',
+      Nscr: '\uD835\uDCA9',
+      nscr: '\uD835\uDCC3',
+      nshortmid: '\u2224',
+      nshortparallel: '\u2226',
+      nsim: '\u2241',
+      nsime: '\u2244',
+      nsimeq: '\u2244',
+      nsmid: '\u2224',
+      nspar: '\u2226',
+      nsqsube: '\u22E2',
+      nsqsupe: '\u22E3',
+      nsub: '\u2284',
+      nsubE: '\u2AC5\u0338',
+      nsube: '\u2288',
+      nsubset: '\u2282\u20D2',
+      nsubseteq: '\u2288',
+      nsubseteqq: '\u2AC5\u0338',
+      nsucc: '\u2281',
+      nsucceq: '\u2AB0\u0338',
+      nsup: '\u2285',
+      nsupE: '\u2AC6\u0338',
+      nsupe: '\u2289',
+      nsupset: '\u2283\u20D2',
+      nsupseteq: '\u2289',
+      nsupseteqq: '\u2AC6\u0338',
+      ntgl: '\u2279',
+      Ntilde: '\u00D1',
+      ntilde: '\u00F1',
+      ntlg: '\u2278',
+      ntriangleleft: '\u22EA',
+      ntrianglelefteq: '\u22EC',
+      ntriangleright: '\u22EB',
+      ntrianglerighteq: '\u22ED',
+      Nu: '\u039D',
+      nu: '\u03BD',
+      num: '\u0023',
+      numero: '\u2116',
+      numsp: '\u2007',
+      nvap: '\u224D\u20D2',
+      nVDash: '\u22AF',
+      nVdash: '\u22AE',
+      nvDash: '\u22AD',
+      nvdash: '\u22AC',
+      nvge: '\u2265\u20D2',
+      nvgt: '\u003E\u20D2',
+      nvHarr: '\u2904',
+      nvinfin: '\u29DE',
+      nvlArr: '\u2902',
+      nvle: '\u2264\u20D2',
+      nvlt: '\u003C\u20D2',
+      nvltrie: '\u22B4\u20D2',
+      nvrArr: '\u2903',
+      nvrtrie: '\u22B5\u20D2',
+      nvsim: '\u223C\u20D2',
+      nwarhk: '\u2923',
+      nwArr: '\u21D6',
+      nwarr: '\u2196',
+      nwarrow: '\u2196',
+      nwnear: '\u2927',
+      Oacute: '\u00D3',
+      oacute: '\u00F3',
+      oast: '\u229B',
+      ocir: '\u229A',
+      Ocirc: '\u00D4',
+      ocirc: '\u00F4',
+      Ocy: '\u041E',
+      ocy: '\u043E',
+      odash: '\u229D',
+      Odblac: '\u0150',
+      odblac: '\u0151',
+      odiv: '\u2A38',
+      odot: '\u2299',
+      odsold: '\u29BC',
+      OElig: '\u0152',
+      oelig: '\u0153',
+      ofcir: '\u29BF',
+      Ofr: '\uD835\uDD12',
+      ofr: '\uD835\uDD2C',
+      ogon: '\u02DB',
+      Ograve: '\u00D2',
+      ograve: '\u00F2',
+      ogt: '\u29C1',
+      ohbar: '\u29B5',
+      ohm: '\u03A9',
+      oint: '\u222E',
+      olarr: '\u21BA',
+      olcir: '\u29BE',
+      olcross: '\u29BB',
+      oline: '\u203E',
+      olt: '\u29C0',
+      Omacr: '\u014C',
+      omacr: '\u014D',
+      Omega: '\u03A9',
+      omega: '\u03C9',
+      Omicron: '\u039F',
+      omicron: '\u03BF',
+      omid: '\u29B6',
+      ominus: '\u2296',
+      Oopf: '\uD835\uDD46',
+      oopf: '\uD835\uDD60',
+      opar: '\u29B7',
+      OpenCurlyDoubleQuote: '\u201C',
+      OpenCurlyQuote: '\u2018',
+      operp: '\u29B9',
+      oplus: '\u2295',
+      Or: '\u2A54',
+      or: '\u2228',
+      orarr: '\u21BB',
+      ord: '\u2A5D',
+      order: '\u2134',
+      orderof: '\u2134',
+      ordf: '\u00AA',
+      ordm: '\u00BA',
+      origof: '\u22B6',
+      oror: '\u2A56',
+      orslope: '\u2A57',
+      orv: '\u2A5B',
+      oS: '\u24C8',
+      Oscr: '\uD835\uDCAA',
+      oscr: '\u2134',
+      Oslash: '\u00D8',
+      oslash: '\u00F8',
+      osol: '\u2298',
+      Otilde: '\u00D5',
+      otilde: '\u00F5',
+      Otimes: '\u2A37',
+      otimes: '\u2297',
+      otimesas: '\u2A36',
+      Ouml: '\u00D6',
+      ouml: '\u00F6',
+      ovbar: '\u233D',
+      OverBar: '\u203E',
+      OverBrace: '\u23DE',
+      OverBracket: '\u23B4',
+      OverParenthesis: '\u23DC',
+      par: '\u2225',
+      para: '\u00B6',
+      parallel: '\u2225',
+      parsim: '\u2AF3',
+      parsl: '\u2AFD',
+      part: '\u2202',
+      PartialD: '\u2202',
+      Pcy: '\u041F',
+      pcy: '\u043F',
+      percnt: '\u0025',
+      period: '\u002E',
+      permil: '\u2030',
+      perp: '\u22A5',
+      pertenk: '\u2031',
+      Pfr: '\uD835\uDD13',
+      pfr: '\uD835\uDD2D',
+      Phi: '\u03A6',
+      phi: '\u03C6',
+      phiv: '\u03D5',
+      phmmat: '\u2133',
+      phone: '\u260E',
+      Pi: '\u03A0',
+      pi: '\u03C0',
+      pitchfork: '\u22D4',
+      piv: '\u03D6',
+      planck: '\u210F',
+      planckh: '\u210E',
+      plankv: '\u210F',
+      plus: '\u002B',
+      plusacir: '\u2A23',
+      plusb: '\u229E',
+      pluscir: '\u2A22',
+      plusdo: '\u2214',
+      plusdu: '\u2A25',
+      pluse: '\u2A72',
+      PlusMinus: '\u00B1',
+      plusmn: '\u00B1',
+      plussim: '\u2A26',
+      plustwo: '\u2A27',
+      pm: '\u00B1',
+      Poincareplane: '\u210C',
+      pointint: '\u2A15',
+      Popf: '\u2119',
+      popf: '\uD835\uDD61',
+      pound: '\u00A3',
+      Pr: '\u2ABB',
+      pr: '\u227A',
+      prap: '\u2AB7',
+      prcue: '\u227C',
+      prE: '\u2AB3',
+      pre: '\u2AAF',
+      prec: '\u227A',
+      precapprox: '\u2AB7',
+      preccurlyeq: '\u227C',
+      Precedes: '\u227A',
+      PrecedesEqual: '\u2AAF',
+      PrecedesSlantEqual: '\u227C',
+      PrecedesTilde: '\u227E',
+      preceq: '\u2AAF',
+      precnapprox: '\u2AB9',
+      precneqq: '\u2AB5',
+      precnsim: '\u22E8',
+      precsim: '\u227E',
+      Prime: '\u2033',
+      prime: '\u2032',
+      primes: '\u2119',
+      prnap: '\u2AB9',
+      prnE: '\u2AB5',
+      prnsim: '\u22E8',
+      prod: '\u220F',
+      Product: '\u220F',
+      profalar: '\u232E',
+      profline: '\u2312',
+      profsurf: '\u2313',
+      prop: '\u221D',
+      Proportion: '\u2237',
+      Proportional: '\u221D',
+      propto: '\u221D',
+      prsim: '\u227E',
+      prurel: '\u22B0',
+      Pscr: '\uD835\uDCAB',
+      pscr: '\uD835\uDCC5',
+      Psi: '\u03A8',
+      psi: '\u03C8',
+      puncsp: '\u2008',
+      Qfr: '\uD835\uDD14',
+      qfr: '\uD835\uDD2E',
+      qint: '\u2A0C',
+      Qopf: '\u211A',
+      qopf: '\uD835\uDD62',
+      qprime: '\u2057',
+      Qscr: '\uD835\uDCAC',
+      qscr: '\uD835\uDCC6',
+      quaternions: '\u210D',
+      quatint: '\u2A16',
+      quest: '\u003F',
+      questeq: '\u225F',
+      QUOT: '\u0022',
+      quot: '\u0022',
+      rAarr: '\u21DB',
+      race: '\u223D\u0331',
+      Racute: '\u0154',
+      racute: '\u0155',
+      radic: '\u221A',
+      raemptyv: '\u29B3',
+      Rang: '\u27EB',
+      rang: '\u27E9',
+      rangd: '\u2992',
+      range: '\u29A5',
+      rangle: '\u27E9',
+      raquo: '\u00BB',
+      Rarr: '\u21A0',
+      rArr: '\u21D2',
+      rarr: '\u2192',
+      rarrap: '\u2975',
+      rarrb: '\u21E5',
+      rarrbfs: '\u2920',
+      rarrc: '\u2933',
+      rarrfs: '\u291E',
+      rarrhk: '\u21AA',
+      rarrlp: '\u21AC',
+      rarrpl: '\u2945',
+      rarrsim: '\u2974',
+      Rarrtl: '\u2916',
+      rarrtl: '\u21A3',
+      rarrw: '\u219D',
+      rAtail: '\u291C',
+      ratail: '\u291A',
+      ratio: '\u2236',
+      rationals: '\u211A',
+      RBarr: '\u2910',
+      rBarr: '\u290F',
+      rbarr: '\u290D',
+      rbbrk: '\u2773',
+      rbrace: '\u007D',
+      rbrack: '\u005D',
+      rbrke: '\u298C',
+      rbrksld: '\u298E',
+      rbrkslu: '\u2990',
+      Rcaron: '\u0158',
+      rcaron: '\u0159',
+      Rcedil: '\u0156',
+      rcedil: '\u0157',
+      rceil: '\u2309',
+      rcub: '\u007D',
+      Rcy: '\u0420',
+      rcy: '\u0440',
+      rdca: '\u2937',
+      rdldhar: '\u2969',
+      rdquo: '\u201D',
+      rdquor: '\u201D',
+      rdsh: '\u21B3',
+      Re: '\u211C',
+      real: '\u211C',
+      realine: '\u211B',
+      realpart: '\u211C',
+      reals: '\u211D',
+      rect: '\u25AD',
+      REG: '\u00AE',
+      reg: '\u00AE',
+      ReverseElement: '\u220B',
+      ReverseEquilibrium: '\u21CB',
+      ReverseUpEquilibrium: '\u296F',
+      rfisht: '\u297D',
+      rfloor: '\u230B',
+      Rfr: '\u211C',
+      rfr: '\uD835\uDD2F',
+      rHar: '\u2964',
+      rhard: '\u21C1',
+      rharu: '\u21C0',
+      rharul: '\u296C',
+      Rho: '\u03A1',
+      rho: '\u03C1',
+      rhov: '\u03F1',
+      RightAngleBracket: '\u27E9',
+      RightArrow: '\u2192',
+      Rightarrow: '\u21D2',
+      rightarrow: '\u2192',
+      RightArrowBar: '\u21E5',
+      RightArrowLeftArrow: '\u21C4',
+      rightarrowtail: '\u21A3',
+      RightCeiling: '\u2309',
+      RightDoubleBracket: '\u27E7',
+      RightDownTeeVector: '\u295D',
+      RightDownVector: '\u21C2',
+      RightDownVectorBar: '\u2955',
+      RightFloor: '\u230B',
+      rightharpoondown: '\u21C1',
+      rightharpoonup: '\u21C0',
+      rightleftarrows: '\u21C4',
+      rightleftharpoons: '\u21CC',
+      rightrightarrows: '\u21C9',
+      rightsquigarrow: '\u219D',
+      RightTee: '\u22A2',
+      RightTeeArrow: '\u21A6',
+      RightTeeVector: '\u295B',
+      rightthreetimes: '\u22CC',
+      RightTriangle: '\u22B3',
+      RightTriangleBar: '\u29D0',
+      RightTriangleEqual: '\u22B5',
+      RightUpDownVector: '\u294F',
+      RightUpTeeVector: '\u295C',
+      RightUpVector: '\u21BE',
+      RightUpVectorBar: '\u2954',
+      RightVector: '\u21C0',
+      RightVectorBar: '\u2953',
+      ring: '\u02DA',
+      risingdotseq: '\u2253',
+      rlarr: '\u21C4',
+      rlhar: '\u21CC',
+      rlm: '\u200F',
+      rmoust: '\u23B1',
+      rmoustache: '\u23B1',
+      rnmid: '\u2AEE',
+      roang: '\u27ED',
+      roarr: '\u21FE',
+      robrk: '\u27E7',
+      ropar: '\u2986',
+      Ropf: '\u211D',
+      ropf: '\uD835\uDD63',
+      roplus: '\u2A2E',
+      rotimes: '\u2A35',
+      RoundImplies: '\u2970',
+      rpar: '\u0029',
+      rpargt: '\u2994',
+      rppolint: '\u2A12',
+      rrarr: '\u21C9',
+      Rrightarrow: '\u21DB',
+      rsaquo: '\u203A',
+      Rscr: '\u211B',
+      rscr: '\uD835\uDCC7',
+      Rsh: '\u21B1',
+      rsh: '\u21B1',
+      rsqb: '\u005D',
+      rsquo: '\u2019',
+      rsquor: '\u2019',
+      rthree: '\u22CC',
+      rtimes: '\u22CA',
+      rtri: '\u25B9',
+      rtrie: '\u22B5',
+      rtrif: '\u25B8',
+      rtriltri: '\u29CE',
+      RuleDelayed: '\u29F4',
+      ruluhar: '\u2968',
+      rx: '\u211E',
+      Sacute: '\u015A',
+      sacute: '\u015B',
+      sbquo: '\u201A',
+      Sc: '\u2ABC',
+      sc: '\u227B',
+      scap: '\u2AB8',
+      Scaron: '\u0160',
+      scaron: '\u0161',
+      sccue: '\u227D',
+      scE: '\u2AB4',
+      sce: '\u2AB0',
+      Scedil: '\u015E',
+      scedil: '\u015F',
+      Scirc: '\u015C',
+      scirc: '\u015D',
+      scnap: '\u2ABA',
+      scnE: '\u2AB6',
+      scnsim: '\u22E9',
+      scpolint: '\u2A13',
+      scsim: '\u227F',
+      Scy: '\u0421',
+      scy: '\u0441',
+      sdot: '\u22C5',
+      sdotb: '\u22A1',
+      sdote: '\u2A66',
+      searhk: '\u2925',
+      seArr: '\u21D8',
+      searr: '\u2198',
+      searrow: '\u2198',
+      sect: '\u00A7',
+      semi: '\u003B',
+      seswar: '\u2929',
+      setminus: '\u2216',
+      setmn: '\u2216',
+      sext: '\u2736',
+      Sfr: '\uD835\uDD16',
+      sfr: '\uD835\uDD30',
+      sfrown: '\u2322',
+      sharp: '\u266F',
+      SHCHcy: '\u0429',
+      shchcy: '\u0449',
+      SHcy: '\u0428',
+      shcy: '\u0448',
+      ShortDownArrow: '\u2193',
+      ShortLeftArrow: '\u2190',
+      shortmid: '\u2223',
+      shortparallel: '\u2225',
+      ShortRightArrow: '\u2192',
+      ShortUpArrow: '\u2191',
+      shy: '\u00AD',
+      Sigma: '\u03A3',
+      sigma: '\u03C3',
+      sigmaf: '\u03C2',
+      sigmav: '\u03C2',
+      sim: '\u223C',
+      simdot: '\u2A6A',
+      sime: '\u2243',
+      simeq: '\u2243',
+      simg: '\u2A9E',
+      simgE: '\u2AA0',
+      siml: '\u2A9D',
+      simlE: '\u2A9F',
+      simne: '\u2246',
+      simplus: '\u2A24',
+      simrarr: '\u2972',
+      slarr: '\u2190',
+      SmallCircle: '\u2218',
+      smallsetminus: '\u2216',
+      smashp: '\u2A33',
+      smeparsl: '\u29E4',
+      smid: '\u2223',
+      smile: '\u2323',
+      smt: '\u2AAA',
+      smte: '\u2AAC',
+      smtes: '\u2AAC\uFE00',
+      SOFTcy: '\u042C',
+      softcy: '\u044C',
+      sol: '\u002F',
+      solb: '\u29C4',
+      solbar: '\u233F',
+      Sopf: '\uD835\uDD4A',
+      sopf: '\uD835\uDD64',
+      spades: '\u2660',
+      spadesuit: '\u2660',
+      spar: '\u2225',
+      sqcap: '\u2293',
+      sqcaps: '\u2293\uFE00',
+      sqcup: '\u2294',
+      sqcups: '\u2294\uFE00',
+      Sqrt: '\u221A',
+      sqsub: '\u228F',
+      sqsube: '\u2291',
+      sqsubset: '\u228F',
+      sqsubseteq: '\u2291',
+      sqsup: '\u2290',
+      sqsupe: '\u2292',
+      sqsupset: '\u2290',
+      sqsupseteq: '\u2292',
+      squ: '\u25A1',
+      Square: '\u25A1',
+      square: '\u25A1',
+      SquareIntersection: '\u2293',
+      SquareSubset: '\u228F',
+      SquareSubsetEqual: '\u2291',
+      SquareSuperset: '\u2290',
+      SquareSupersetEqual: '\u2292',
+      SquareUnion: '\u2294',
+      squarf: '\u25AA',
+      squf: '\u25AA',
+      srarr: '\u2192',
+      Sscr: '\uD835\uDCAE',
+      sscr: '\uD835\uDCC8',
+      ssetmn: '\u2216',
+      ssmile: '\u2323',
+      sstarf: '\u22C6',
+      Star: '\u22C6',
+      star: '\u2606',
+      starf: '\u2605',
+      straightepsilon: '\u03F5',
+      straightphi: '\u03D5',
+      strns: '\u00AF',
+      Sub: '\u22D0',
+      sub: '\u2282',
+      subdot: '\u2ABD',
+      subE: '\u2AC5',
+      sube: '\u2286',
+      subedot: '\u2AC3',
+      submult: '\u2AC1',
+      subnE: '\u2ACB',
+      subne: '\u228A',
+      subplus: '\u2ABF',
+      subrarr: '\u2979',
+      Subset: '\u22D0',
+      subset: '\u2282',
+      subseteq: '\u2286',
+      subseteqq: '\u2AC5',
+      SubsetEqual: '\u2286',
+      subsetneq: '\u228A',
+      subsetneqq: '\u2ACB',
+      subsim: '\u2AC7',
+      subsub: '\u2AD5',
+      subsup: '\u2AD3',
+      succ: '\u227B',
+      succapprox: '\u2AB8',
+      succcurlyeq: '\u227D',
+      Succeeds: '\u227B',
+      SucceedsEqual: '\u2AB0',
+      SucceedsSlantEqual: '\u227D',
+      SucceedsTilde: '\u227F',
+      succeq: '\u2AB0',
+      succnapprox: '\u2ABA',
+      succneqq: '\u2AB6',
+      succnsim: '\u22E9',
+      succsim: '\u227F',
+      SuchThat: '\u220B',
+      Sum: '\u2211',
+      sum: '\u2211',
+      sung: '\u266A',
+      Sup: '\u22D1',
+      sup: '\u2283',
+      sup1: '\u00B9',
+      sup2: '\u00B2',
+      sup3: '\u00B3',
+      supdot: '\u2ABE',
+      supdsub: '\u2AD8',
+      supE: '\u2AC6',
+      supe: '\u2287',
+      supedot: '\u2AC4',
+      Superset: '\u2283',
+      SupersetEqual: '\u2287',
+      suphsol: '\u27C9',
+      suphsub: '\u2AD7',
+      suplarr: '\u297B',
+      supmult: '\u2AC2',
+      supnE: '\u2ACC',
+      supne: '\u228B',
+      supplus: '\u2AC0',
+      Supset: '\u22D1',
+      supset: '\u2283',
+      supseteq: '\u2287',
+      supseteqq: '\u2AC6',
+      supsetneq: '\u228B',
+      supsetneqq: '\u2ACC',
+      supsim: '\u2AC8',
+      supsub: '\u2AD4',
+      supsup: '\u2AD6',
+      swarhk: '\u2926',
+      swArr: '\u21D9',
+      swarr: '\u2199',
+      swarrow: '\u2199',
+      swnwar: '\u292A',
+      szlig: '\u00DF',
+      Tab: '\u0009',
+      target: '\u2316',
+      Tau: '\u03A4',
+      tau: '\u03C4',
+      tbrk: '\u23B4',
+      Tcaron: '\u0164',
+      tcaron: '\u0165',
+      Tcedil: '\u0162',
+      tcedil: '\u0163',
+      Tcy: '\u0422',
+      tcy: '\u0442',
+      tdot: '\u20DB',
+      telrec: '\u2315',
+      Tfr: '\uD835\uDD17',
+      tfr: '\uD835\uDD31',
+      there4: '\u2234',
+      Therefore: '\u2234',
+      therefore: '\u2234',
+      Theta: '\u0398',
+      theta: '\u03B8',
+      thetasym: '\u03D1',
+      thetav: '\u03D1',
+      thickapprox: '\u2248',
+      thicksim: '\u223C',
+      ThickSpace: '\u205F\u200A',
+      thinsp: '\u2009',
+      ThinSpace: '\u2009',
+      thkap: '\u2248',
+      thksim: '\u223C',
+      THORN: '\u00DE',
+      thorn: '\u00FE',
+      Tilde: '\u223C',
+      tilde: '\u02DC',
+      TildeEqual: '\u2243',
+      TildeFullEqual: '\u2245',
+      TildeTilde: '\u2248',
+      times: '\u00D7',
+      timesb: '\u22A0',
+      timesbar: '\u2A31',
+      timesd: '\u2A30',
+      tint: '\u222D',
+      toea: '\u2928',
+      top: '\u22A4',
+      topbot: '\u2336',
+      topcir: '\u2AF1',
+      Topf: '\uD835\uDD4B',
+      topf: '\uD835\uDD65',
+      topfork: '\u2ADA',
+      tosa: '\u2929',
+      tprime: '\u2034',
+      TRADE: '\u2122',
+      trade: '\u2122',
+      triangle: '\u25B5',
+      triangledown: '\u25BF',
+      triangleleft: '\u25C3',
+      trianglelefteq: '\u22B4',
+      triangleq: '\u225C',
+      triangleright: '\u25B9',
+      trianglerighteq: '\u22B5',
+      tridot: '\u25EC',
+      trie: '\u225C',
+      triminus: '\u2A3A',
+      TripleDot: '\u20DB',
+      triplus: '\u2A39',
+      trisb: '\u29CD',
+      tritime: '\u2A3B',
+      trpezium: '\u23E2',
+      Tscr: '\uD835\uDCAF',
+      tscr: '\uD835\uDCC9',
+      TScy: '\u0426',
+      tscy: '\u0446',
+      TSHcy: '\u040B',
+      tshcy: '\u045B',
+      Tstrok: '\u0166',
+      tstrok: '\u0167',
+      twixt: '\u226C',
+      twoheadleftarrow: '\u219E',
+      twoheadrightarrow: '\u21A0',
+      Uacute: '\u00DA',
+      uacute: '\u00FA',
+      Uarr: '\u219F',
+      uArr: '\u21D1',
+      uarr: '\u2191',
+      Uarrocir: '\u2949',
+      Ubrcy: '\u040E',
+      ubrcy: '\u045E',
+      Ubreve: '\u016C',
+      ubreve: '\u016D',
+      Ucirc: '\u00DB',
+      ucirc: '\u00FB',
+      Ucy: '\u0423',
+      ucy: '\u0443',
+      udarr: '\u21C5',
+      Udblac: '\u0170',
+      udblac: '\u0171',
+      udhar: '\u296E',
+      ufisht: '\u297E',
+      Ufr: '\uD835\uDD18',
+      ufr: '\uD835\uDD32',
+      Ugrave: '\u00D9',
+      ugrave: '\u00F9',
+      uHar: '\u2963',
+      uharl: '\u21BF',
+      uharr: '\u21BE',
+      uhblk: '\u2580',
+      ulcorn: '\u231C',
+      ulcorner: '\u231C',
+      ulcrop: '\u230F',
+      ultri: '\u25F8',
+      Umacr: '\u016A',
+      umacr: '\u016B',
+      uml: '\u00A8',
+      UnderBar: '\u005F',
+      UnderBrace: '\u23DF',
+      UnderBracket: '\u23B5',
+      UnderParenthesis: '\u23DD',
+      Union: '\u22C3',
+      UnionPlus: '\u228E',
+      Uogon: '\u0172',
+      uogon: '\u0173',
+      Uopf: '\uD835\uDD4C',
+      uopf: '\uD835\uDD66',
+      UpArrow: '\u2191',
+      Uparrow: '\u21D1',
+      uparrow: '\u2191',
+      UpArrowBar: '\u2912',
+      UpArrowDownArrow: '\u21C5',
+      UpDownArrow: '\u2195',
+      Updownarrow: '\u21D5',
+      updownarrow: '\u2195',
+      UpEquilibrium: '\u296E',
+      upharpoonleft: '\u21BF',
+      upharpoonright: '\u21BE',
+      uplus: '\u228E',
+      UpperLeftArrow: '\u2196',
+      UpperRightArrow: '\u2197',
+      Upsi: '\u03D2',
+      upsi: '\u03C5',
+      upsih: '\u03D2',
+      Upsilon: '\u03A5',
+      upsilon: '\u03C5',
+      UpTee: '\u22A5',
+      UpTeeArrow: '\u21A5',
+      upuparrows: '\u21C8',
+      urcorn: '\u231D',
+      urcorner: '\u231D',
+      urcrop: '\u230E',
+      Uring: '\u016E',
+      uring: '\u016F',
+      urtri: '\u25F9',
+      Uscr: '\uD835\uDCB0',
+      uscr: '\uD835\uDCCA',
+      utdot: '\u22F0',
+      Utilde: '\u0168',
+      utilde: '\u0169',
+      utri: '\u25B5',
+      utrif: '\u25B4',
+      uuarr: '\u21C8',
+      Uuml: '\u00DC',
+      uuml: '\u00FC',
+      uwangle: '\u29A7',
+      vangrt: '\u299C',
+      varepsilon: '\u03F5',
+      varkappa: '\u03F0',
+      varnothing: '\u2205',
+      varphi: '\u03D5',
+      varpi: '\u03D6',
+      varpropto: '\u221D',
+      vArr: '\u21D5',
+      varr: '\u2195',
+      varrho: '\u03F1',
+      varsigma: '\u03C2',
+      varsubsetneq: '\u228A\uFE00',
+      varsubsetneqq: '\u2ACB\uFE00',
+      varsupsetneq: '\u228B\uFE00',
+      varsupsetneqq: '\u2ACC\uFE00',
+      vartheta: '\u03D1',
+      vartriangleleft: '\u22B2',
+      vartriangleright: '\u22B3',
+      Vbar: '\u2AEB',
+      vBar: '\u2AE8',
+      vBarv: '\u2AE9',
+      Vcy: '\u0412',
+      vcy: '\u0432',
+      VDash: '\u22AB',
+      Vdash: '\u22A9',
+      vDash: '\u22A8',
+      vdash: '\u22A2',
+      Vdashl: '\u2AE6',
+      Vee: '\u22C1',
+      vee: '\u2228',
+      veebar: '\u22BB',
+      veeeq: '\u225A',
+      vellip: '\u22EE',
+      Verbar: '\u2016',
+      verbar: '\u007C',
+      Vert: '\u2016',
+      vert: '\u007C',
+      VerticalBar: '\u2223',
+      VerticalLine: '\u007C',
+      VerticalSeparator: '\u2758',
+      VerticalTilde: '\u2240',
+      VeryThinSpace: '\u200A',
+      Vfr: '\uD835\uDD19',
+      vfr: '\uD835\uDD33',
+      vltri: '\u22B2',
+      vnsub: '\u2282\u20D2',
+      vnsup: '\u2283\u20D2',
+      Vopf: '\uD835\uDD4D',
+      vopf: '\uD835\uDD67',
+      vprop: '\u221D',
+      vrtri: '\u22B3',
+      Vscr: '\uD835\uDCB1',
+      vscr: '\uD835\uDCCB',
+      vsubnE: '\u2ACB\uFE00',
+      vsubne: '\u228A\uFE00',
+      vsupnE: '\u2ACC\uFE00',
+      vsupne: '\u228B\uFE00',
+      Vvdash: '\u22AA',
+      vzigzag: '\u299A',
+      Wcirc: '\u0174',
+      wcirc: '\u0175',
+      wedbar: '\u2A5F',
+      Wedge: '\u22C0',
+      wedge: '\u2227',
+      wedgeq: '\u2259',
+      weierp: '\u2118',
+      Wfr: '\uD835\uDD1A',
+      wfr: '\uD835\uDD34',
+      Wopf: '\uD835\uDD4E',
+      wopf: '\uD835\uDD68',
+      wp: '\u2118',
+      wr: '\u2240',
+      wreath: '\u2240',
+      Wscr: '\uD835\uDCB2',
+      wscr: '\uD835\uDCCC',
+      xcap: '\u22C2',
+      xcirc: '\u25EF',
+      xcup: '\u22C3',
+      xdtri: '\u25BD',
+      Xfr: '\uD835\uDD1B',
+      xfr: '\uD835\uDD35',
+      xhArr: '\u27FA',
+      xharr: '\u27F7',
+      Xi: '\u039E',
+      xi: '\u03BE',
+      xlArr: '\u27F8',
+      xlarr: '\u27F5',
+      xmap: '\u27FC',
+      xnis: '\u22FB',
+      xodot: '\u2A00',
+      Xopf: '\uD835\uDD4F',
+      xopf: '\uD835\uDD69',
+      xoplus: '\u2A01',
+      xotime: '\u2A02',
+      xrArr: '\u27F9',
+      xrarr: '\u27F6',
+      Xscr: '\uD835\uDCB3',
+      xscr: '\uD835\uDCCD',
+      xsqcup: '\u2A06',
+      xuplus: '\u2A04',
+      xutri: '\u25B3',
+      xvee: '\u22C1',
+      xwedge: '\u22C0',
+      Yacute: '\u00DD',
+      yacute: '\u00FD',
+      YAcy: '\u042F',
+      yacy: '\u044F',
+      Ycirc: '\u0176',
+      ycirc: '\u0177',
+      Ycy: '\u042B',
+      ycy: '\u044B',
+      yen: '\u00A5',
+      Yfr: '\uD835\uDD1C',
+      yfr: '\uD835\uDD36',
+      YIcy: '\u0407',
+      yicy: '\u0457',
+      Yopf: '\uD835\uDD50',
+      yopf: '\uD835\uDD6A',
+      Yscr: '\uD835\uDCB4',
+      yscr: '\uD835\uDCCE',
+      YUcy: '\u042E',
+      yucy: '\u044E',
+      Yuml: '\u0178',
+      yuml: '\u00FF',
+      Zacute: '\u0179',
+      zacute: '\u017A',
+      Zcaron: '\u017D',
+      zcaron: '\u017E',
+      Zcy: '\u0417',
+      zcy: '\u0437',
+      Zdot: '\u017B',
+      zdot: '\u017C',
+      zeetrf: '\u2128',
+      ZeroWidthSpace: '\u200B',
+      Zeta: '\u0396',
+      zeta: '\u03B6',
+      Zfr: '\u2128',
+      zfr: '\uD835\uDD37',
+      ZHcy: '\u0416',
+      zhcy: '\u0436',
+      zigrarr: '\u21DD',
+      Zopf: '\u2124',
+      zopf: '\uD835\uDD6B',
+      Zscr: '\uD835\uDCB5',
+      zscr: '\uD835\uDCCF',
+      zwj: '\u200D',
+      zwnj: '\u200C'
+    });
+
+    /**
+     * @deprecated use `HTML_ENTITIES` instead
+     * @see HTML_ENTITIES
+     */
+    exports.entityMap = exports.HTML_ENTITIES;
+  });
+  entities.XML_ENTITIES;
+  entities.HTML_ENTITIES;
+  entities.entityMap;
+
+  var NAMESPACE$1 = conventions.NAMESPACE;
+
+  //[4]   	NameStartChar	   ::=   	":" | [A-Z] | "_" | [a-z] | [#xC0-#xD6] | [#xD8-#xF6] | [#xF8-#x2FF] | [#x370-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | [#x2070-#x218F] | [#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] | [#x10000-#xEFFFF]
+  //[4a]   	NameChar	   ::=   	NameStartChar | "-" | "." | [0-9] | #xB7 | [#x0300-#x036F] | [#x203F-#x2040]
+  //[5]   	Name	   ::=   	NameStartChar (NameChar)*
+  var nameStartChar = /[A-Z_a-z\xC0-\xD6\xD8-\xF6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]/; //\u10000-\uEFFFF
+  var nameChar = new RegExp("[\\-\\.0-9" + nameStartChar.source.slice(1, -1) + "\\u00B7\\u0300-\\u036F\\u203F-\\u2040]");
+  var tagNamePattern = new RegExp('^' + nameStartChar.source + nameChar.source + '*(?:\:' + nameStartChar.source + nameChar.source + '*)?$');
+  //var tagNamePattern = /^[a-zA-Z_][\w\-\.]*(?:\:[a-zA-Z_][\w\-\.]*)?$/
+  //var handlers = 'resolveEntity,getExternalSubset,characters,endDocument,endElement,endPrefixMapping,ignorableWhitespace,processingInstruction,setDocumentLocator,skippedEntity,startDocument,startElement,startPrefixMapping,notationDecl,unparsedEntityDecl,error,fatalError,warning,attributeDecl,elementDecl,externalEntityDecl,internalEntityDecl,comment,endCDATA,endDTD,endEntity,startCDATA,startDTD,startEntity'.split(',')
+
+  //S_TAG,	S_ATTR,	S_EQ,	S_ATTR_NOQUOT_VALUE
+  //S_ATTR_SPACE,	S_ATTR_END,	S_TAG_SPACE, S_TAG_CLOSE
+  var S_TAG = 0; //tag name offerring
+  var S_ATTR = 1; //attr name offerring
+  var S_ATTR_SPACE = 2; //attr name end and space offer
+  var S_EQ = 3; //=space?
+  var S_ATTR_NOQUOT_VALUE = 4; //attr value(no quot value only)
+  var S_ATTR_END = 5; //attr value end and no space(quot end)
+  var S_TAG_SPACE = 6; //(attr value end || tag end ) && (space offer)
+  var S_TAG_CLOSE = 7; //closed el<el />
+
+  /**
+   * Creates an error that will not be caught by XMLReader aka the SAX parser.
+   *
+   * @param {string} message
+   * @param {any?} locator Optional, can provide details about the location in the source
+   * @constructor
+   */
+  function ParseError$1(message, locator) {
+    this.message = message;
+    this.locator = locator;
+    if (Error.captureStackTrace) Error.captureStackTrace(this, ParseError$1);
+  }
+  ParseError$1.prototype = new Error();
+  ParseError$1.prototype.name = ParseError$1.name;
+  function XMLReader$1() {}
+  XMLReader$1.prototype = {
+    parse: function (source, defaultNSMap, entityMap) {
+      var domBuilder = this.domBuilder;
+      domBuilder.startDocument();
+      _copy(defaultNSMap, defaultNSMap = {});
+      parse$1(source, defaultNSMap, entityMap, domBuilder, this.errorHandler);
+      domBuilder.endDocument();
+    }
+  };
+  function parse$1(source, defaultNSMapCopy, entityMap, domBuilder, errorHandler) {
+    function fixedFromCharCode(code) {
+      // String.prototype.fromCharCode does not supports
+      // > 2 bytes unicode chars directly
+      if (code > 0xffff) {
+        code -= 0x10000;
+        var surrogate1 = 0xd800 + (code >> 10),
+          surrogate2 = 0xdc00 + (code & 0x3ff);
+        return String.fromCharCode(surrogate1, surrogate2);
+      } else {
+        return String.fromCharCode(code);
+      }
+    }
+    function entityReplacer(a) {
+      var k = a.slice(1, -1);
+      if (Object.hasOwnProperty.call(entityMap, k)) {
+        return entityMap[k];
+      } else if (k.charAt(0) === '#') {
+        return fixedFromCharCode(parseInt(k.substr(1).replace('x', '0x')));
+      } else {
+        errorHandler.error('entity not found:' + a);
+        return a;
+      }
+    }
+    function appendText(end) {
+      //has some bugs
+      if (end > start) {
+        var xt = source.substring(start, end).replace(/&#?\w+;/g, entityReplacer);
+        locator && position(start);
+        domBuilder.characters(xt, 0, end - start);
+        start = end;
+      }
+    }
+    function position(p, m) {
+      while (p >= lineEnd && (m = linePattern.exec(source))) {
+        lineStart = m.index;
+        lineEnd = lineStart + m[0].length;
+        locator.lineNumber++;
+        //console.log('line++:',locator,startPos,endPos)
+      }
+
+      locator.columnNumber = p - lineStart + 1;
+    }
+    var lineStart = 0;
+    var lineEnd = 0;
+    var linePattern = /.*(?:\r\n?|\n)|.*$/g;
+    var locator = domBuilder.locator;
+    var parseStack = [{
+      currentNSMap: defaultNSMapCopy
+    }];
+    var closeMap = {};
+    var start = 0;
+    while (true) {
+      try {
+        var tagStart = source.indexOf('<', start);
+        if (tagStart < 0) {
+          if (!source.substr(start).match(/^\s*$/)) {
+            var doc = domBuilder.doc;
+            var text = doc.createTextNode(source.substr(start));
+            doc.appendChild(text);
+            domBuilder.currentElement = text;
+          }
+          return;
+        }
+        if (tagStart > start) {
+          appendText(tagStart);
+        }
+        switch (source.charAt(tagStart + 1)) {
+          case '/':
+            var end = source.indexOf('>', tagStart + 3);
+            var tagName = source.substring(tagStart + 2, end).replace(/[ \t\n\r]+$/g, '');
+            var config = parseStack.pop();
+            if (end < 0) {
+              tagName = source.substring(tagStart + 2).replace(/[\s<].*/, '');
+              errorHandler.error("end tag name: " + tagName + ' is not complete:' + config.tagName);
+              end = tagStart + 1 + tagName.length;
+            } else if (tagName.match(/\s</)) {
+              tagName = tagName.replace(/[\s<].*/, '');
+              errorHandler.error("end tag name: " + tagName + ' maybe not complete');
+              end = tagStart + 1 + tagName.length;
+            }
+            var localNSMap = config.localNSMap;
+            var endMatch = config.tagName == tagName;
+            var endIgnoreCaseMach = endMatch || config.tagName && config.tagName.toLowerCase() == tagName.toLowerCase();
+            if (endIgnoreCaseMach) {
+              domBuilder.endElement(config.uri, config.localName, tagName);
+              if (localNSMap) {
+                for (var prefix in localNSMap) {
+                  if (Object.prototype.hasOwnProperty.call(localNSMap, prefix)) {
+                    domBuilder.endPrefixMapping(prefix);
+                  }
+                }
+              }
+              if (!endMatch) {
+                errorHandler.fatalError("end tag name: " + tagName + ' is not match the current start tagName:' + config.tagName); // No known test case
+              }
+            } else {
+              parseStack.push(config);
+            }
+            end++;
+            break;
+          // end elment
+          case '?':
+            // <?...?>
+            locator && position(tagStart);
+            end = parseInstruction(source, tagStart, domBuilder);
+            break;
+          case '!':
+            // <!doctype,<![CDATA,<!--
+            locator && position(tagStart);
+            end = parseDCC(source, tagStart, domBuilder, errorHandler);
+            break;
+          default:
+            locator && position(tagStart);
+            var el = new ElementAttributes();
+            var currentNSMap = parseStack[parseStack.length - 1].currentNSMap;
+            //elStartEnd
+            var end = parseElementStartPart(source, tagStart, el, currentNSMap, entityReplacer, errorHandler);
+            var len = el.length;
+            if (!el.closed && fixSelfClosed(source, end, el.tagName, closeMap)) {
+              el.closed = true;
+              if (!entityMap.nbsp) {
+                errorHandler.warning('unclosed xml attribute');
+              }
+            }
+            if (locator && len) {
+              var locator2 = copyLocator(locator, {});
+              //try{//attribute position fixed
+              for (var i = 0; i < len; i++) {
+                var a = el[i];
+                position(a.offset);
+                a.locator = copyLocator(locator, {});
+              }
+              domBuilder.locator = locator2;
+              if (appendElement$1(el, domBuilder, currentNSMap)) {
+                parseStack.push(el);
+              }
+              domBuilder.locator = locator;
+            } else {
+              if (appendElement$1(el, domBuilder, currentNSMap)) {
+                parseStack.push(el);
+              }
+            }
+            if (NAMESPACE$1.isHTML(el.uri) && !el.closed) {
+              end = parseHtmlSpecialContent(source, end, el.tagName, entityReplacer, domBuilder);
+            } else {
+              end++;
+            }
+        }
+      } catch (e) {
+        if (e instanceof ParseError$1) {
+          throw e;
+        }
+        errorHandler.error('element parse error: ' + e);
+        end = -1;
+      }
+      if (end > start) {
+        start = end;
+      } else {
+        //TODO: 这里有可能sax回退，有位置错误风险
+        appendText(Math.max(tagStart, start) + 1);
+      }
+    }
+  }
+  function copyLocator(f, t) {
+    t.lineNumber = f.lineNumber;
+    t.columnNumber = f.columnNumber;
+    return t;
+  }
+
+  /**
+   * @see #appendElement(source,elStartEnd,el,selfClosed,entityReplacer,domBuilder,parseStack);
+   * @return end of the elementStartPart(end of elementEndPart for selfClosed el)
+   */
+  function parseElementStartPart(source, start, el, currentNSMap, entityReplacer, errorHandler) {
+    /**
+     * @param {string} qname
+     * @param {string} value
+     * @param {number} startIndex
+     */
+    function addAttribute(qname, value, startIndex) {
+      if (el.attributeNames.hasOwnProperty(qname)) {
+        errorHandler.fatalError('Attribute ' + qname + ' redefined');
+      }
+      el.addValue(qname,
+      // @see https://www.w3.org/TR/xml/#AVNormalize
+      // since the xmldom sax parser does not "interpret" DTD the following is not implemented:
+      // - recursive replacement of (DTD) entity references
+      // - trimming and collapsing multiple spaces into a single one for attributes that are not of type CDATA
+      value.replace(/[\t\n\r]/g, ' ').replace(/&#?\w+;/g, entityReplacer), startIndex);
+    }
+    var attrName;
+    var value;
+    var p = ++start;
+    var s = S_TAG; //status
+    while (true) {
+      var c = source.charAt(p);
+      switch (c) {
+        case '=':
+          if (s === S_ATTR) {
+            //attrName
+            attrName = source.slice(start, p);
+            s = S_EQ;
+          } else if (s === S_ATTR_SPACE) {
+            s = S_EQ;
+          } else {
+            //fatalError: equal must after attrName or space after attrName
+            throw new Error('attribute equal must after attrName'); // No known test case
+          }
+
+          break;
+        case '\'':
+        case '"':
+          if (s === S_EQ || s === S_ATTR //|| s == S_ATTR_SPACE
+          ) {
+            //equal
+            if (s === S_ATTR) {
+              errorHandler.warning('attribute value must after "="');
+              attrName = source.slice(start, p);
+            }
+            start = p + 1;
+            p = source.indexOf(c, start);
+            if (p > 0) {
+              value = source.slice(start, p);
+              addAttribute(attrName, value, start - 1);
+              s = S_ATTR_END;
+            } else {
+              //fatalError: no end quot match
+              throw new Error('attribute value no end \'' + c + '\' match');
+            }
+          } else if (s == S_ATTR_NOQUOT_VALUE) {
+            value = source.slice(start, p);
+            addAttribute(attrName, value, start);
+            errorHandler.warning('attribute "' + attrName + '" missed start quot(' + c + ')!!');
+            start = p + 1;
+            s = S_ATTR_END;
+          } else {
+            //fatalError: no equal before
+            throw new Error('attribute value must after "="'); // No known test case
+          }
+
+          break;
+        case '/':
+          switch (s) {
+            case S_TAG:
+              el.setTagName(source.slice(start, p));
+            case S_ATTR_END:
+            case S_TAG_SPACE:
+            case S_TAG_CLOSE:
+              s = S_TAG_CLOSE;
+              el.closed = true;
+            case S_ATTR_NOQUOT_VALUE:
+            case S_ATTR:
+              break;
+            case S_ATTR_SPACE:
+              el.closed = true;
+              break;
+            //case S_EQ:
+            default:
+              throw new Error("attribute invalid close char('/')");
+            // No known test case
+          }
+
+          break;
+        case '':
+          //end document
+          errorHandler.error('unexpected end of input');
+          if (s == S_TAG) {
+            el.setTagName(source.slice(start, p));
+          }
+          return p;
+        case '>':
+          switch (s) {
+            case S_TAG:
+              el.setTagName(source.slice(start, p));
+            case S_ATTR_END:
+            case S_TAG_SPACE:
+            case S_TAG_CLOSE:
+              break;
+            //normal
+            case S_ATTR_NOQUOT_VALUE: //Compatible state
+            case S_ATTR:
+              value = source.slice(start, p);
+              if (value.slice(-1) === '/') {
+                el.closed = true;
+                value = value.slice(0, -1);
+              }
+            case S_ATTR_SPACE:
+              if (s === S_ATTR_SPACE) {
+                value = attrName;
+              }
+              if (s == S_ATTR_NOQUOT_VALUE) {
+                errorHandler.warning('attribute "' + value + '" missed quot(")!');
+                addAttribute(attrName, value, start);
+              } else {
+                if (!NAMESPACE$1.isHTML(currentNSMap['']) || !value.match(/^(?:disabled|checked|selected)$/i)) {
+                  errorHandler.warning('attribute "' + value + '" missed value!! "' + value + '" instead!!');
+                }
+                addAttribute(value, value, start);
+              }
+              break;
+            case S_EQ:
+              throw new Error('attribute value missed!!');
+          }
+          //			console.log(tagName,tagNamePattern,tagNamePattern.test(tagName))
+          return p;
+        /*xml space '\x20' | #x9 | #xD | #xA; */
+        case '\u0080':
+          c = ' ';
+        default:
+          if (c <= ' ') {
+            //space
+            switch (s) {
+              case S_TAG:
+                el.setTagName(source.slice(start, p)); //tagName
+                s = S_TAG_SPACE;
+                break;
+              case S_ATTR:
+                attrName = source.slice(start, p);
+                s = S_ATTR_SPACE;
+                break;
+              case S_ATTR_NOQUOT_VALUE:
+                var value = source.slice(start, p);
+                errorHandler.warning('attribute "' + value + '" missed quot(")!!');
+                addAttribute(attrName, value, start);
+              case S_ATTR_END:
+                s = S_TAG_SPACE;
+                break;
+              //case S_TAG_SPACE:
+              //case S_EQ:
+              //case S_ATTR_SPACE:
+              //	void();break;
+              //case S_TAG_CLOSE:
+              //ignore warning
+            }
+          } else {
+            //not space
+            //S_TAG,	S_ATTR,	S_EQ,	S_ATTR_NOQUOT_VALUE
+            //S_ATTR_SPACE,	S_ATTR_END,	S_TAG_SPACE, S_TAG_CLOSE
+            switch (s) {
+              //case S_TAG:void();break;
+              //case S_ATTR:void();break;
+              //case S_ATTR_NOQUOT_VALUE:void();break;
+              case S_ATTR_SPACE:
+                el.tagName;
+                if (!NAMESPACE$1.isHTML(currentNSMap['']) || !attrName.match(/^(?:disabled|checked|selected)$/i)) {
+                  errorHandler.warning('attribute "' + attrName + '" missed value!! "' + attrName + '" instead2!!');
+                }
+                addAttribute(attrName, attrName, start);
+                start = p;
+                s = S_ATTR;
+                break;
+              case S_ATTR_END:
+                errorHandler.warning('attribute space is required"' + attrName + '"!!');
+              case S_TAG_SPACE:
+                s = S_ATTR;
+                start = p;
+                break;
+              case S_EQ:
+                s = S_ATTR_NOQUOT_VALUE;
+                start = p;
+                break;
+              case S_TAG_CLOSE:
+                throw new Error("elements closed character '/' and '>' must be connected to");
+            }
+          }
+      } //end outer switch
+      //console.log('p++',p)
+      p++;
+    }
+  }
+  /**
+   * @return true if has new namespace define
+   */
+  function appendElement$1(el, domBuilder, currentNSMap) {
+    var tagName = el.tagName;
+    var localNSMap = null;
+    //var currentNSMap = parseStack[parseStack.length-1].currentNSMap;
+    var i = el.length;
+    while (i--) {
+      var a = el[i];
+      var qName = a.qName;
+      var value = a.value;
+      var nsp = qName.indexOf(':');
+      if (nsp > 0) {
+        var prefix = a.prefix = qName.slice(0, nsp);
+        var localName = qName.slice(nsp + 1);
+        var nsPrefix = prefix === 'xmlns' && localName;
+      } else {
+        localName = qName;
+        prefix = null;
+        nsPrefix = qName === 'xmlns' && '';
+      }
+      //can not set prefix,because prefix !== ''
+      a.localName = localName;
+      //prefix == null for no ns prefix attribute
+      if (nsPrefix !== false) {
+        //hack!!
+        if (localNSMap == null) {
+          localNSMap = {};
+          //console.log(currentNSMap,0)
+          _copy(currentNSMap, currentNSMap = {});
+          //console.log(currentNSMap,1)
+        }
+
+        currentNSMap[nsPrefix] = localNSMap[nsPrefix] = value;
+        a.uri = NAMESPACE$1.XMLNS;
+        domBuilder.startPrefixMapping(nsPrefix, value);
+      }
+    }
+    var i = el.length;
+    while (i--) {
+      a = el[i];
+      var prefix = a.prefix;
+      if (prefix) {
+        //no prefix attribute has no namespace
+        if (prefix === 'xml') {
+          a.uri = NAMESPACE$1.XML;
+        }
+        if (prefix !== 'xmlns') {
+          a.uri = currentNSMap[prefix || ''];
+
+          //{console.log('###'+a.qName,domBuilder.locator.systemId+'',currentNSMap,a.uri)}
+        }
+      }
+    }
+
+    var nsp = tagName.indexOf(':');
+    if (nsp > 0) {
+      prefix = el.prefix = tagName.slice(0, nsp);
+      localName = el.localName = tagName.slice(nsp + 1);
+    } else {
+      prefix = null; //important!!
+      localName = el.localName = tagName;
+    }
+    //no prefix element has default namespace
+    var ns = el.uri = currentNSMap[prefix || ''];
+    domBuilder.startElement(ns, localName, tagName, el);
+    //endPrefixMapping and startPrefixMapping have not any help for dom builder
+    //localNSMap = null
+    if (el.closed) {
+      domBuilder.endElement(ns, localName, tagName);
+      if (localNSMap) {
+        for (prefix in localNSMap) {
+          if (Object.prototype.hasOwnProperty.call(localNSMap, prefix)) {
+            domBuilder.endPrefixMapping(prefix);
+          }
+        }
+      }
+    } else {
+      el.currentNSMap = currentNSMap;
+      el.localNSMap = localNSMap;
+      //parseStack.push(el);
+      return true;
+    }
+  }
+  function parseHtmlSpecialContent(source, elStartEnd, tagName, entityReplacer, domBuilder) {
+    if (/^(?:script|textarea)$/i.test(tagName)) {
+      var elEndStart = source.indexOf('</' + tagName + '>', elStartEnd);
+      var text = source.substring(elStartEnd + 1, elEndStart);
+      if (/[&<]/.test(text)) {
+        if (/^script$/i.test(tagName)) {
+          //if(!/\]\]>/.test(text)){
+          //lexHandler.startCDATA();
+          domBuilder.characters(text, 0, text.length);
+          //lexHandler.endCDATA();
+          return elEndStart;
+          //}
+        } //}else{//text area
+        text = text.replace(/&#?\w+;/g, entityReplacer);
+        domBuilder.characters(text, 0, text.length);
+        return elEndStart;
+        //}
+      }
+    }
+
+    return elStartEnd + 1;
+  }
+  function fixSelfClosed(source, elStartEnd, tagName, closeMap) {
+    //if(tagName in closeMap){
+    var pos = closeMap[tagName];
+    if (pos == null) {
+      //console.log(tagName)
+      pos = source.lastIndexOf('</' + tagName + '>');
+      if (pos < elStartEnd) {
+        //忘记闭合
+        pos = source.lastIndexOf('</' + tagName);
+      }
+      closeMap[tagName] = pos;
+    }
+    return pos < elStartEnd;
+    //}
+  }
+
+  function _copy(source, target) {
+    for (var n in source) {
+      if (Object.prototype.hasOwnProperty.call(source, n)) {
+        target[n] = source[n];
+      }
+    }
+  }
+  function parseDCC(source, start, domBuilder, errorHandler) {
+    //sure start with '<!'
+    var next = source.charAt(start + 2);
+    switch (next) {
+      case '-':
+        if (source.charAt(start + 3) === '-') {
+          var end = source.indexOf('-->', start + 4);
+          //append comment source.substring(4,end)//<!--
+          if (end > start) {
+            domBuilder.comment(source, start + 4, end - start - 4);
+            return end + 3;
+          } else {
+            errorHandler.error("Unclosed comment");
+            return -1;
+          }
+        } else {
+          //error
+          return -1;
+        }
+      default:
+        if (source.substr(start + 3, 6) == 'CDATA[') {
+          var end = source.indexOf(']]>', start + 9);
+          domBuilder.startCDATA();
+          domBuilder.characters(source, start + 9, end - start - 9);
+          domBuilder.endCDATA();
+          return end + 3;
+        }
+        //<!DOCTYPE
+        //startDTD(java.lang.String name, java.lang.String publicId, java.lang.String systemId)
+        var matchs = split(source, start);
+        var len = matchs.length;
+        if (len > 1 && /!doctype/i.test(matchs[0][0])) {
+          var name = matchs[1][0];
+          var pubid = false;
+          var sysid = false;
+          if (len > 3) {
+            if (/^public$/i.test(matchs[2][0])) {
+              pubid = matchs[3][0];
+              sysid = len > 4 && matchs[4][0];
+            } else if (/^system$/i.test(matchs[2][0])) {
+              sysid = matchs[3][0];
+            }
+          }
+          var lastMatch = matchs[len - 1];
+          domBuilder.startDTD(name, pubid, sysid);
+          domBuilder.endDTD();
+          return lastMatch.index + lastMatch[0].length;
+        }
+    }
+    return -1;
+  }
+  function parseInstruction(source, start, domBuilder) {
+    var end = source.indexOf('?>', start);
+    if (end) {
+      var match = source.substring(start, end).match(/^<\?(\S*)\s*([\s\S]*?)\s*$/);
+      if (match) {
+        match[0].length;
+        domBuilder.processingInstruction(match[1], match[2]);
+        return end + 2;
+      } else {
+        //error
+        return -1;
+      }
+    }
+    return -1;
+  }
+  function ElementAttributes() {
+    this.attributeNames = {};
+  }
+  ElementAttributes.prototype = {
+    setTagName: function (tagName) {
+      if (!tagNamePattern.test(tagName)) {
+        throw new Error('invalid tagName:' + tagName);
+      }
+      this.tagName = tagName;
+    },
+    addValue: function (qName, value, offset) {
+      if (!tagNamePattern.test(qName)) {
+        throw new Error('invalid attribute:' + qName);
+      }
+      this.attributeNames[qName] = this.length;
+      this[this.length++] = {
+        qName: qName,
+        value: value,
+        offset: offset
+      };
+    },
+    length: 0,
+    getLocalName: function (i) {
+      return this[i].localName;
+    },
+    getLocator: function (i) {
+      return this[i].locator;
+    },
+    getQName: function (i) {
+      return this[i].qName;
+    },
+    getURI: function (i) {
+      return this[i].uri;
+    },
+    getValue: function (i) {
+      return this[i].value;
+    }
+    //	,getIndex:function(uri, localName)){
+    //		if(localName){
+    //
+    //		}else{
+    //			var qName = uri
+    //		}
+    //	},
+    //	getValue:function(){return this.getValue(this.getIndex.apply(this,arguments))},
+    //	getType:function(uri,localName){}
+    //	getType:function(i){},
+  };
+
+  function split(source, start) {
+    var match;
+    var buf = [];
+    var reg = /'[^']+'|"[^"]+"|[^\s<>\/=]+=?|(\/?\s*>|<)/g;
+    reg.lastIndex = start;
+    reg.exec(source); //skip <
+    while (match = reg.exec(source)) {
+      buf.push(match);
+      if (match[1]) return buf;
+    }
+  }
+  var XMLReader_1 = XMLReader$1;
+  var ParseError_1 = ParseError$1;
+  var sax = {
+    XMLReader: XMLReader_1,
+    ParseError: ParseError_1
+  };
+
+  var DOMImplementation = dom.DOMImplementation;
+  var NAMESPACE = conventions.NAMESPACE;
+  var ParseError = sax.ParseError;
+  var XMLReader = sax.XMLReader;
+
+  /**
+   * Normalizes line ending according to https://www.w3.org/TR/xml11/#sec-line-ends:
+   *
+   * > XML parsed entities are often stored in computer files which,
+   * > for editing convenience, are organized into lines.
+   * > These lines are typically separated by some combination
+   * > of the characters CARRIAGE RETURN (#xD) and LINE FEED (#xA).
+   * >
+   * > To simplify the tasks of applications, the XML processor must behave
+   * > as if it normalized all line breaks in external parsed entities (including the document entity)
+   * > on input, before parsing, by translating all of the following to a single #xA character:
+   * >
+   * > 1. the two-character sequence #xD #xA
+   * > 2. the two-character sequence #xD #x85
+   * > 3. the single character #x85
+   * > 4. the single character #x2028
+   * > 5. any #xD character that is not immediately followed by #xA or #x85.
+   *
+   * @param {string} input
+   * @returns {string}
+   */
+  function normalizeLineEndings(input) {
+    return input.replace(/\r[\n\u0085]/g, '\n').replace(/[\r\u0085\u2028]/g, '\n');
+  }
+
+  /**
+   * @typedef Locator
+   * @property {number} [columnNumber]
+   * @property {number} [lineNumber]
+   */
+
+  /**
+   * @typedef DOMParserOptions
+   * @property {DOMHandler} [domBuilder]
+   * @property {Function} [errorHandler]
+   * @property {(string) => string} [normalizeLineEndings] used to replace line endings before parsing
+   * 						defaults to `normalizeLineEndings`
+   * @property {Locator} [locator]
+   * @property {Record<string, string>} [xmlns]
+   *
+   * @see normalizeLineEndings
+   */
+
+  /**
+   * The DOMParser interface provides the ability to parse XML or HTML source code
+   * from a string into a DOM `Document`.
+   *
+   * _xmldom is different from the spec in that it allows an `options` parameter,
+   * to override the default behavior._
+   *
+   * @param {DOMParserOptions} [options]
+   * @constructor
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
+   * @see https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#dom-parsing-and-serialization
+   */
+  function DOMParser$1(options) {
+    this.options = options || {
+      locator: {}
+    };
+  }
+  DOMParser$1.prototype.parseFromString = function (source, mimeType) {
+    var options = this.options;
+    var sax = new XMLReader();
+    var domBuilder = options.domBuilder || new DOMHandler(); //contentHandler and LexicalHandler
+    var errorHandler = options.errorHandler;
+    var locator = options.locator;
+    var defaultNSMap = options.xmlns || {};
+    var isHTML = /\/x?html?$/.test(mimeType); //mimeType.toLowerCase().indexOf('html') > -1;
+    var entityMap = isHTML ? entities.HTML_ENTITIES : entities.XML_ENTITIES;
+    if (locator) {
+      domBuilder.setDocumentLocator(locator);
+    }
+    sax.errorHandler = buildErrorHandler(errorHandler, domBuilder, locator);
+    sax.domBuilder = options.domBuilder || domBuilder;
+    if (isHTML) {
+      defaultNSMap[''] = NAMESPACE.HTML;
+    }
+    defaultNSMap.xml = defaultNSMap.xml || NAMESPACE.XML;
+    var normalize = options.normalizeLineEndings || normalizeLineEndings;
+    if (source && typeof source === 'string') {
+      sax.parse(normalize(source), defaultNSMap, entityMap);
+    } else {
+      sax.errorHandler.error('invalid doc source');
+    }
+    return domBuilder.doc;
+  };
+  function buildErrorHandler(errorImpl, domBuilder, locator) {
+    if (!errorImpl) {
+      if (domBuilder instanceof DOMHandler) {
+        return domBuilder;
+      }
+      errorImpl = domBuilder;
+    }
+    var errorHandler = {};
+    var isCallback = errorImpl instanceof Function;
+    locator = locator || {};
+    function build(key) {
+      var fn = errorImpl[key];
+      if (!fn && isCallback) {
+        fn = errorImpl.length == 2 ? function (msg) {
+          errorImpl(key, msg);
+        } : errorImpl;
+      }
+      errorHandler[key] = fn && function (msg) {
+        fn('[xmldom ' + key + ']\t' + msg + _locator(locator));
+      } || function () {};
+    }
+    build('warning');
+    build('error');
+    build('fatalError');
+    return errorHandler;
+  }
+
+  //console.log('#\n\n\n\n\n\n\n####')
+  /**
+   * +ContentHandler+ErrorHandler
+   * +LexicalHandler+EntityResolver2
+   * -DeclHandler-DTDHandler
+   *
+   * DefaultHandler:EntityResolver, DTDHandler, ContentHandler, ErrorHandler
+   * DefaultHandler2:DefaultHandler,LexicalHandler, DeclHandler, EntityResolver2
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/helpers/DefaultHandler.html
+   */
+  function DOMHandler() {
+    this.cdata = false;
+  }
+  function position(locator, node) {
+    node.lineNumber = locator.lineNumber;
+    node.columnNumber = locator.columnNumber;
+  }
+  /**
+   * @see org.xml.sax.ContentHandler#startDocument
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/ContentHandler.html
+   */
+  DOMHandler.prototype = {
+    startDocument: function () {
+      this.doc = new DOMImplementation().createDocument(null, null, null);
+      if (this.locator) {
+        this.doc.documentURI = this.locator.systemId;
+      }
+    },
+    startElement: function (namespaceURI, localName, qName, attrs) {
+      var doc = this.doc;
+      var el = doc.createElementNS(namespaceURI, qName || localName);
+      var len = attrs.length;
+      appendElement(this, el);
+      this.currentElement = el;
+      this.locator && position(this.locator, el);
+      for (var i = 0; i < len; i++) {
+        var namespaceURI = attrs.getURI(i);
+        var value = attrs.getValue(i);
+        var qName = attrs.getQName(i);
+        var attr = doc.createAttributeNS(namespaceURI, qName);
+        this.locator && position(attrs.getLocator(i), attr);
+        attr.value = attr.nodeValue = value;
+        el.setAttributeNode(attr);
+      }
+    },
+    endElement: function (namespaceURI, localName, qName) {
+      var current = this.currentElement;
+      current.tagName;
+      this.currentElement = current.parentNode;
+    },
+    startPrefixMapping: function (prefix, uri) {},
+    endPrefixMapping: function (prefix) {},
+    processingInstruction: function (target, data) {
+      var ins = this.doc.createProcessingInstruction(target, data);
+      this.locator && position(this.locator, ins);
+      appendElement(this, ins);
+    },
+    ignorableWhitespace: function (ch, start, length) {},
+    characters: function (chars, start, length) {
+      chars = _toString.apply(this, arguments);
+      //console.log(chars)
+      if (chars) {
+        if (this.cdata) {
+          var charNode = this.doc.createCDATASection(chars);
+        } else {
+          var charNode = this.doc.createTextNode(chars);
+        }
+        if (this.currentElement) {
+          this.currentElement.appendChild(charNode);
+        } else if (/^\s*$/.test(chars)) {
+          this.doc.appendChild(charNode);
+          //process xml
+        }
+
+        this.locator && position(this.locator, charNode);
+      }
+    },
+    skippedEntity: function (name) {},
+    endDocument: function () {
+      this.doc.normalize();
+    },
+    setDocumentLocator: function (locator) {
+      if (this.locator = locator) {
+        // && !('lineNumber' in locator)){
+        locator.lineNumber = 0;
+      }
+    },
+    //LexicalHandler
+    comment: function (chars, start, length) {
+      chars = _toString.apply(this, arguments);
+      var comm = this.doc.createComment(chars);
+      this.locator && position(this.locator, comm);
+      appendElement(this, comm);
+    },
+    startCDATA: function () {
+      //used in characters() methods
+      this.cdata = true;
+    },
+    endCDATA: function () {
+      this.cdata = false;
+    },
+    startDTD: function (name, publicId, systemId) {
+      var impl = this.doc.implementation;
+      if (impl && impl.createDocumentType) {
+        var dt = impl.createDocumentType(name, publicId, systemId);
+        this.locator && position(this.locator, dt);
+        appendElement(this, dt);
+        this.doc.doctype = dt;
+      }
+    },
+    /**
+     * @see org.xml.sax.ErrorHandler
+     * @link http://www.saxproject.org/apidoc/org/xml/sax/ErrorHandler.html
+     */
+    warning: function (error) {
+      console.warn('[xmldom warning]\t' + error, _locator(this.locator));
+    },
+    error: function (error) {
+      console.error('[xmldom error]\t' + error, _locator(this.locator));
+    },
+    fatalError: function (error) {
+      throw new ParseError(error, this.locator);
+    }
+  };
+  function _locator(l) {
+    if (l) {
+      return '\n@' + (l.systemId || '') + '#[line:' + l.lineNumber + ',col:' + l.columnNumber + ']';
+    }
+  }
+  function _toString(chars, start, length) {
+    if (typeof chars == 'string') {
+      return chars.substr(start, length);
+    } else {
+      //java sax connect width xmldom on rhino(what about: "? && !(chars instanceof String)")
+      if (chars.length >= start + length || start) {
+        return new java.lang.String(chars, start, length) + '';
+      }
+      return chars;
+    }
+  }
+
+  /*
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/ext/LexicalHandler.html
+   * used method of org.xml.sax.ext.LexicalHandler:
+   *  #comment(chars, start, length)
+   *  #startCDATA()
+   *  #endCDATA()
+   *  #startDTD(name, publicId, systemId)
+   *
+   *
+   * IGNORED method of org.xml.sax.ext.LexicalHandler:
+   *  #endDTD()
+   *  #startEntity(name)
+   *  #endEntity(name)
+   *
+   *
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/ext/DeclHandler.html
+   * IGNORED method of org.xml.sax.ext.DeclHandler
+   * 	#attributeDecl(eName, aName, type, mode, value)
+   *  #elementDecl(name, model)
+   *  #externalEntityDecl(name, publicId, systemId)
+   *  #internalEntityDecl(name, value)
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/ext/EntityResolver2.html
+   * IGNORED method of org.xml.sax.EntityResolver2
+   *  #resolveEntity(String name,String publicId,String baseURI,String systemId)
+   *  #resolveEntity(publicId, systemId)
+   *  #getExternalSubset(name, baseURI)
+   * @link http://www.saxproject.org/apidoc/org/xml/sax/DTDHandler.html
+   * IGNORED method of org.xml.sax.DTDHandler
+   *  #notationDecl(name, publicId, systemId) {};
+   *  #unparsedEntityDecl(name, publicId, systemId, notationName) {};
+   */
+  "endDTD,startEntity,endEntity,attributeDecl,elementDecl,externalEntityDecl,internalEntityDecl,resolveEntity,getExternalSubset,notationDecl,unparsedEntityDecl".replace(/\w+/g, function (key) {
+    DOMHandler.prototype[key] = function () {
+      return null;
+    };
+  });
+
+  /* Private static helpers treated below as private instance methods, so don't need to add these to the public API; we might use a Relator to also get rid of non-standard public properties */
+  function appendElement(hander, node) {
+    if (!hander.currentElement) {
+      hander.doc.appendChild(node);
+    } else {
+      hander.currentElement.appendChild(node);
+    }
+  } //appendChild and setAttributeNS are preformance key
+
+  var __DOMHandler = DOMHandler;
+  var normalizeLineEndings_1 = normalizeLineEndings;
+  var DOMParser_1 = DOMParser$1;
+  var domParser = {
+    __DOMHandler: __DOMHandler,
+    normalizeLineEndings: normalizeLineEndings_1,
+    DOMParser: DOMParser_1
+  };
+
+  var DOMParser = domParser.DOMParser;
+
+  /*! @name mpd-parser @version 1.3.0 @license Apache-2.0 */
+  const isObject = obj => {
+    return !!obj && typeof obj === 'object';
+  };
+  const merge$1 = (...objects) => {
+    return objects.reduce((result, source) => {
+      if (typeof source !== 'object') {
+        return result;
+      }
+      Object.keys(source).forEach(key => {
+        if (Array.isArray(result[key]) && Array.isArray(source[key])) {
+          result[key] = result[key].concat(source[key]);
+        } else if (isObject(result[key]) && isObject(source[key])) {
+          result[key] = merge$1(result[key], source[key]);
+        } else {
+          result[key] = source[key];
+        }
+      });
+      return result;
+    }, {});
+  };
+  const values = o => Object.keys(o).map(k => o[k]);
+  const range = (start, end) => {
+    const result = [];
+    for (let i = start; i < end; i++) {
+      result.push(i);
+    }
+    return result;
+  };
+  const flatten = lists => lists.reduce((x, y) => x.concat(y), []);
+  const from = list => {
+    if (!list.length) {
+      return [];
+    }
+    const result = [];
+    for (let i = 0; i < list.length; i++) {
+      result.push(list[i]);
+    }
+    return result;
+  };
+  const findIndexes = (l, key) => l.reduce((a, e, i) => {
+    if (e[key]) {
+      a.push(i);
+    }
+    return a;
+  }, []);
+  /**
+   * Returns a union of the included lists provided each element can be identified by a key.
+   *
+   * @param {Array} list - list of lists to get the union of
+   * @param {Function} keyFunction - the function to use as a key for each element
+   *
+   * @return {Array} the union of the arrays
+   */
+
+  const union = (lists, keyFunction) => {
+    return values(lists.reduce((acc, list) => {
+      list.forEach(el => {
+        acc[keyFunction(el)] = el;
+      });
+      return acc;
+    }, {}));
+  };
+  var errors = {
+    INVALID_NUMBER_OF_PERIOD: 'INVALID_NUMBER_OF_PERIOD',
+    INVALID_NUMBER_OF_CONTENT_STEERING: 'INVALID_NUMBER_OF_CONTENT_STEERING',
+    DASH_EMPTY_MANIFEST: 'DASH_EMPTY_MANIFEST',
+    DASH_INVALID_XML: 'DASH_INVALID_XML',
+    NO_BASE_URL: 'NO_BASE_URL',
+    MISSING_SEGMENT_INFORMATION: 'MISSING_SEGMENT_INFORMATION',
+    SEGMENT_TIME_UNSPECIFIED: 'SEGMENT_TIME_UNSPECIFIED',
+    UNSUPPORTED_UTC_TIMING_SCHEME: 'UNSUPPORTED_UTC_TIMING_SCHEME'
+  };
+
+  /**
+   * @typedef {Object} SingleUri
+   * @property {string} uri - relative location of segment
+   * @property {string} resolvedUri - resolved location of segment
+   * @property {Object} byterange - Object containing information on how to make byte range
+   *   requests following byte-range-spec per RFC2616.
+   * @property {String} byterange.length - length of range request
+   * @property {String} byterange.offset - byte offset of range request
+   *
+   * @see https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.35.1
+   */
+
+  /**
+   * Converts a URLType node (5.3.9.2.3 Table 13) to a segment object
+   * that conforms to how m3u8-parser is structured
+   *
+   * @see https://github.com/videojs/m3u8-parser
+   *
+   * @param {string} baseUrl - baseUrl provided by <BaseUrl> nodes
+   * @param {string} source - source url for segment
+   * @param {string} range - optional range used for range calls,
+   *   follows  RFC 2616, Clause 14.35.1
+   * @return {SingleUri} full segment information transformed into a format similar
+   *   to m3u8-parser
+   */
+
+  const urlTypeToSegment = ({
+    baseUrl = '',
+    source = '',
+    range = '',
+    indexRange = ''
+  }) => {
+    const segment = {
+      uri: source,
+      resolvedUri: resolveUrl$1(baseUrl || '', source)
+    };
+    if (range || indexRange) {
+      const rangeStr = range ? range : indexRange;
+      const ranges = rangeStr.split('-'); // default to parsing this as a BigInt if possible
+
+      let startRange = window.BigInt ? window.BigInt(ranges[0]) : parseInt(ranges[0], 10);
+      let endRange = window.BigInt ? window.BigInt(ranges[1]) : parseInt(ranges[1], 10); // convert back to a number if less than MAX_SAFE_INTEGER
+
+      if (startRange < Number.MAX_SAFE_INTEGER && typeof startRange === 'bigint') {
+        startRange = Number(startRange);
+      }
+      if (endRange < Number.MAX_SAFE_INTEGER && typeof endRange === 'bigint') {
+        endRange = Number(endRange);
+      }
+      let length;
+      if (typeof endRange === 'bigint' || typeof startRange === 'bigint') {
+        length = window.BigInt(endRange) - window.BigInt(startRange) + window.BigInt(1);
+      } else {
+        length = endRange - startRange + 1;
+      }
+      if (typeof length === 'bigint' && length < Number.MAX_SAFE_INTEGER) {
+        length = Number(length);
+      } // byterange should be inclusive according to
+      // RFC 2616, Clause 14.35.1
+
+      segment.byterange = {
+        length,
+        offset: startRange
+      };
+    }
+    return segment;
+  };
+  const byteRangeToString = byterange => {
+    // `endRange` is one less than `offset + length` because the HTTP range
+    // header uses inclusive ranges
+    let endRange;
+    if (typeof byterange.offset === 'bigint' || typeof byterange.length === 'bigint') {
+      endRange = window.BigInt(byterange.offset) + window.BigInt(byterange.length) - window.BigInt(1);
+    } else {
+      endRange = byterange.offset + byterange.length - 1;
+    }
+    return `${byterange.offset}-${endRange}`;
+  };
+
+  /**
+   * parse the end number attribue that can be a string
+   * number, or undefined.
+   *
+   * @param {string|number|undefined} endNumber
+   *        The end number attribute.
+   *
+   * @return {number|null}
+   *          The result of parsing the end number.
+   */
+
+  const parseEndNumber = endNumber => {
+    if (endNumber && typeof endNumber !== 'number') {
+      endNumber = parseInt(endNumber, 10);
+    }
+    if (isNaN(endNumber)) {
+      return null;
+    }
+    return endNumber;
+  };
+  /**
+   * Functions for calculating the range of available segments in static and dynamic
+   * manifests.
+   */
+
+  const segmentRange = {
+    /**
+     * Returns the entire range of available segments for a static MPD
+     *
+     * @param {Object} attributes
+     *        Inheritied MPD attributes
+     * @return {{ start: number, end: number }}
+     *         The start and end numbers for available segments
+     */
+    static(attributes) {
+      const {
+        duration,
+        timescale = 1,
+        sourceDuration,
+        periodDuration
+      } = attributes;
+      const endNumber = parseEndNumber(attributes.endNumber);
+      const segmentDuration = duration / timescale;
+      if (typeof endNumber === 'number') {
+        return {
+          start: 0,
+          end: endNumber
+        };
+      }
+      if (typeof periodDuration === 'number') {
+        return {
+          start: 0,
+          end: periodDuration / segmentDuration
+        };
+      }
+      return {
+        start: 0,
+        end: sourceDuration / segmentDuration
+      };
+    },
+    /**
+     * Returns the current live window range of available segments for a dynamic MPD
+     *
+     * @param {Object} attributes
+     *        Inheritied MPD attributes
+     * @return {{ start: number, end: number }}
+     *         The start and end numbers for available segments
+     */
+    dynamic(attributes) {
+      const {
+        NOW,
+        clientOffset,
+        availabilityStartTime,
+        timescale = 1,
+        duration,
+        periodStart = 0,
+        minimumUpdatePeriod = 0,
+        timeShiftBufferDepth = Infinity
+      } = attributes;
+      const endNumber = parseEndNumber(attributes.endNumber); // clientOffset is passed in at the top level of mpd-parser and is an offset calculated
+      // after retrieving UTC server time.
+
+      const now = (NOW + clientOffset) / 1000; // WC stands for Wall Clock.
+      // Convert the period start time to EPOCH.
+
+      const periodStartWC = availabilityStartTime + periodStart; // Period end in EPOCH is manifest's retrieval time + time until next update.
+
+      const periodEndWC = now + minimumUpdatePeriod;
+      const periodDuration = periodEndWC - periodStartWC;
+      const segmentCount = Math.ceil(periodDuration * timescale / duration);
+      const availableStart = Math.floor((now - periodStartWC - timeShiftBufferDepth) * timescale / duration);
+      const availableEnd = Math.floor((now - periodStartWC) * timescale / duration);
+      return {
+        start: Math.max(0, availableStart),
+        end: typeof endNumber === 'number' ? endNumber : Math.min(segmentCount, availableEnd)
+      };
+    }
+  };
+  /**
+   * Maps a range of numbers to objects with information needed to build the corresponding
+   * segment list
+   *
+   * @name toSegmentsCallback
+   * @function
+   * @param {number} number
+   *        Number of the segment
+   * @param {number} index
+   *        Index of the number in the range list
+   * @return {{ number: Number, duration: Number, timeline: Number, time: Number }}
+   *         Object with segment timing and duration info
+   */
+
+  /**
+   * Returns a callback for Array.prototype.map for mapping a range of numbers to
+   * information needed to build the segment list.
+   *
+   * @param {Object} attributes
+   *        Inherited MPD attributes
+   * @return {toSegmentsCallback}
+   *         Callback map function
+   */
+
+  const toSegments = attributes => number => {
+    const {
+      duration,
+      timescale = 1,
+      periodStart,
+      startNumber = 1
+    } = attributes;
+    return {
+      number: startNumber + number,
+      duration: duration / timescale,
+      timeline: periodStart,
+      time: number * duration
+    };
+  };
+  /**
+   * Returns a list of objects containing segment timing and duration info used for
+   * building the list of segments. This uses the @duration attribute specified
+   * in the MPD manifest to derive the range of segments.
+   *
+   * @param {Object} attributes
+   *        Inherited MPD attributes
+   * @return {{number: number, duration: number, time: number, timeline: number}[]}
+   *         List of Objects with segment timing and duration info
+   */
+
+  const parseByDuration = attributes => {
+    const {
+      type,
+      duration,
+      timescale = 1,
+      periodDuration,
+      sourceDuration
+    } = attributes;
+    const {
+      start,
+      end
+    } = segmentRange[type](attributes);
+    const segments = range(start, end).map(toSegments(attributes));
+    if (type === 'static') {
+      const index = segments.length - 1; // section is either a period or the full source
+
+      const sectionDuration = typeof periodDuration === 'number' ? periodDuration : sourceDuration; // final segment may be less than full segment duration
+
+      segments[index].duration = sectionDuration - duration / timescale * index;
+    }
+    return segments;
+  };
+
+  /**
+   * Translates SegmentBase into a set of segments.
+   * (DASH SPEC Section 5.3.9.3.2) contains a set of <SegmentURL> nodes.  Each
+   * node should be translated into segment.
+   *
+   * @param {Object} attributes
+   *   Object containing all inherited attributes from parent elements with attribute
+   *   names as keys
+   * @return {Object.<Array>} list of segments
+   */
+
+  const segmentsFromBase = attributes => {
+    const {
+      baseUrl,
+      initialization = {},
+      sourceDuration,
+      indexRange = '',
+      periodStart,
+      presentationTime,
+      number = 0,
+      duration
+    } = attributes; // base url is required for SegmentBase to work, per spec (Section 5.3.9.2.1)
+
+    if (!baseUrl) {
+      throw new Error(errors.NO_BASE_URL);
+    }
+    const initSegment = urlTypeToSegment({
+      baseUrl,
+      source: initialization.sourceURL,
+      range: initialization.range
+    });
+    const segment = urlTypeToSegment({
+      baseUrl,
+      source: baseUrl,
+      indexRange
+    });
+    segment.map = initSegment; // If there is a duration, use it, otherwise use the given duration of the source
+    // (since SegmentBase is only for one total segment)
+
+    if (duration) {
+      const segmentTimeInfo = parseByDuration(attributes);
+      if (segmentTimeInfo.length) {
+        segment.duration = segmentTimeInfo[0].duration;
+        segment.timeline = segmentTimeInfo[0].timeline;
+      }
+    } else if (sourceDuration) {
+      segment.duration = sourceDuration;
+      segment.timeline = periodStart;
+    } // If presentation time is provided, these segments are being generated by SIDX
+    // references, and should use the time provided. For the general case of SegmentBase,
+    // there should only be one segment in the period, so its presentation time is the same
+    // as its period start.
+
+    segment.presentationTime = presentationTime || periodStart;
+    segment.number = number;
+    return [segment];
+  };
+  /**
+   * Given a playlist, a sidx box, and a baseUrl, update the segment list of the playlist
+   * according to the sidx information given.
+   *
+   * playlist.sidx has metadadata about the sidx where-as the sidx param
+   * is the parsed sidx box itself.
+   *
+   * @param {Object} playlist the playlist to update the sidx information for
+   * @param {Object} sidx the parsed sidx box
+   * @return {Object} the playlist object with the updated sidx information
+   */
+
+  const addSidxSegmentsToPlaylist$1 = (playlist, sidx, baseUrl) => {
+    // Retain init segment information
+    const initSegment = playlist.sidx.map ? playlist.sidx.map : null; // Retain source duration from initial main manifest parsing
+
+    const sourceDuration = playlist.sidx.duration; // Retain source timeline
+
+    const timeline = playlist.timeline || 0;
+    const sidxByteRange = playlist.sidx.byterange;
+    const sidxEnd = sidxByteRange.offset + sidxByteRange.length; // Retain timescale of the parsed sidx
+
+    const timescale = sidx.timescale; // referenceType 1 refers to other sidx boxes
+
+    const mediaReferences = sidx.references.filter(r => r.referenceType !== 1);
+    const segments = [];
+    const type = playlist.endList ? 'static' : 'dynamic';
+    const periodStart = playlist.sidx.timeline;
+    let presentationTime = periodStart;
+    let number = playlist.mediaSequence || 0; // firstOffset is the offset from the end of the sidx box
+
+    let startIndex; // eslint-disable-next-line
+
+    if (typeof sidx.firstOffset === 'bigint') {
+      startIndex = window.BigInt(sidxEnd) + sidx.firstOffset;
+    } else {
+      startIndex = sidxEnd + sidx.firstOffset;
+    }
+    for (let i = 0; i < mediaReferences.length; i++) {
+      const reference = sidx.references[i]; // size of the referenced (sub)segment
+
+      const size = reference.referencedSize; // duration of the referenced (sub)segment, in  the  timescale
+      // this will be converted to seconds when generating segments
+
+      const duration = reference.subsegmentDuration; // should be an inclusive range
+
+      let endIndex; // eslint-disable-next-line
+
+      if (typeof startIndex === 'bigint') {
+        endIndex = startIndex + window.BigInt(size) - window.BigInt(1);
+      } else {
+        endIndex = startIndex + size - 1;
+      }
+      const indexRange = `${startIndex}-${endIndex}`;
+      const attributes = {
+        baseUrl,
+        timescale,
+        timeline,
+        periodStart,
+        presentationTime,
+        number,
+        duration,
+        sourceDuration,
+        indexRange,
+        type
+      };
+      const segment = segmentsFromBase(attributes)[0];
+      if (initSegment) {
+        segment.map = initSegment;
+      }
+      segments.push(segment);
+      if (typeof startIndex === 'bigint') {
+        startIndex += window.BigInt(size);
+      } else {
+        startIndex += size;
+      }
+      presentationTime += duration / timescale;
+      number++;
+    }
+    playlist.segments = segments;
+    return playlist;
+  };
+  const SUPPORTED_MEDIA_TYPES = ['AUDIO', 'SUBTITLES']; // allow one 60fps frame as leniency (arbitrarily chosen)
+
+  const TIME_FUDGE = 1 / 60;
+  /**
+   * Given a list of timelineStarts, combines, dedupes, and sorts them.
+   *
+   * @param {TimelineStart[]} timelineStarts - list of timeline starts
+   *
+   * @return {TimelineStart[]} the combined and deduped timeline starts
+   */
+
+  const getUniqueTimelineStarts = timelineStarts => {
+    return union(timelineStarts, ({
+      timeline
+    }) => timeline).sort((a, b) => a.timeline > b.timeline ? 1 : -1);
+  };
+  /**
+   * Finds the playlist with the matching NAME attribute.
+   *
+   * @param {Array} playlists - playlists to search through
+   * @param {string} name - the NAME attribute to search for
+   *
+   * @return {Object|null} the matching playlist object, or null
+   */
+
+  const findPlaylistWithName = (playlists, name) => {
+    for (let i = 0; i < playlists.length; i++) {
+      if (playlists[i].attributes.NAME === name) {
+        return playlists[i];
+      }
+    }
+    return null;
+  };
+  /**
+   * Gets a flattened array of media group playlists.
+   *
+   * @param {Object} manifest - the main manifest object
+   *
+   * @return {Array} the media group playlists
+   */
+
+  const getMediaGroupPlaylists = manifest => {
+    let mediaGroupPlaylists = [];
+    forEachMediaGroup$1(manifest, SUPPORTED_MEDIA_TYPES, (properties, type, group, label) => {
+      mediaGroupPlaylists = mediaGroupPlaylists.concat(properties.playlists || []);
+    });
+    return mediaGroupPlaylists;
+  };
+  /**
+   * Updates the playlist's media sequence numbers.
+   *
+   * @param {Object} config - options object
+   * @param {Object} config.playlist - the playlist to update
+   * @param {number} config.mediaSequence - the mediaSequence number to start with
+   */
+
+  const updateMediaSequenceForPlaylist = ({
+    playlist,
+    mediaSequence
+  }) => {
+    playlist.mediaSequence = mediaSequence;
+    playlist.segments.forEach((segment, index) => {
+      segment.number = playlist.mediaSequence + index;
+    });
+  };
+  /**
+   * Updates the media and discontinuity sequence numbers of newPlaylists given oldPlaylists
+   * and a complete list of timeline starts.
+   *
+   * If no matching playlist is found, only the discontinuity sequence number of the playlist
+   * will be updated.
+   *
+   * Since early available timelines are not supported, at least one segment must be present.
+   *
+   * @param {Object} config - options object
+   * @param {Object[]} oldPlaylists - the old playlists to use as a reference
+   * @param {Object[]} newPlaylists - the new playlists to update
+   * @param {Object} timelineStarts - all timelineStarts seen in the stream to this point
+   */
+
+  const updateSequenceNumbers = ({
+    oldPlaylists,
+    newPlaylists,
+    timelineStarts
+  }) => {
+    newPlaylists.forEach(playlist => {
+      playlist.discontinuitySequence = timelineStarts.findIndex(function ({
+        timeline
+      }) {
+        return timeline === playlist.timeline;
+      }); // Playlists NAMEs come from DASH Representation IDs, which are mandatory
+      // (see ISO_23009-1-2012 5.3.5.2).
+      //
+      // If the same Representation existed in a prior Period, it will retain the same NAME.
+
+      const oldPlaylist = findPlaylistWithName(oldPlaylists, playlist.attributes.NAME);
+      if (!oldPlaylist) {
+        // Since this is a new playlist, the media sequence values can start from 0 without
+        // consequence.
+        return;
+      } // TODO better support for live SIDX
+      //
+      // As of this writing, mpd-parser does not support multiperiod SIDX (in live or VOD).
+      // This is evident by a playlist only having a single SIDX reference. In a multiperiod
+      // playlist there would need to be multiple SIDX references. In addition, live SIDX is
+      // not supported when the SIDX properties change on refreshes.
+      //
+      // In the future, if support needs to be added, the merging logic here can be called
+      // after SIDX references are resolved. For now, exit early to prevent exceptions being
+      // thrown due to undefined references.
+
+      if (playlist.sidx) {
+        return;
+      } // Since we don't yet support early available timelines, we don't need to support
+      // playlists with no segments.
+
+      const firstNewSegment = playlist.segments[0];
+      const oldMatchingSegmentIndex = oldPlaylist.segments.findIndex(function (oldSegment) {
+        return Math.abs(oldSegment.presentationTime - firstNewSegment.presentationTime) < TIME_FUDGE;
+      }); // No matching segment from the old playlist means the entire playlist was refreshed.
+      // In this case the media sequence should account for this update, and the new segments
+      // should be marked as discontinuous from the prior content, since the last prior
+      // timeline was removed.
+
+      if (oldMatchingSegmentIndex === -1) {
+        updateMediaSequenceForPlaylist({
+          playlist,
+          mediaSequence: oldPlaylist.mediaSequence + oldPlaylist.segments.length
+        });
+        playlist.segments[0].discontinuity = true;
+        playlist.discontinuityStarts.unshift(0); // No matching segment does not necessarily mean there's missing content.
+        //
+        // If the new playlist's timeline is the same as the last seen segment's timeline,
+        // then a discontinuity can be added to identify that there's potentially missing
+        // content. If there's no missing content, the discontinuity should still be rather
+        // harmless. It's possible that if segment durations are accurate enough, that the
+        // existence of a gap can be determined using the presentation times and durations,
+        // but if the segment timing info is off, it may introduce more problems than simply
+        // adding the discontinuity.
+        //
+        // If the new playlist's timeline is different from the last seen segment's timeline,
+        // then a discontinuity can be added to identify that this is the first seen segment
+        // of a new timeline. However, the logic at the start of this function that
+        // determined the disconinuity sequence by timeline index is now off by one (the
+        // discontinuity of the newest timeline hasn't yet fallen off the manifest...since
+        // we added it), so the disconinuity sequence must be decremented.
+        //
+        // A period may also have a duration of zero, so the case of no segments is handled
+        // here even though we don't yet support early available periods.
+
+        if (!oldPlaylist.segments.length && playlist.timeline > oldPlaylist.timeline || oldPlaylist.segments.length && playlist.timeline > oldPlaylist.segments[oldPlaylist.segments.length - 1].timeline) {
+          playlist.discontinuitySequence--;
+        }
+        return;
+      } // If the first segment matched with a prior segment on a discontinuity (it's matching
+      // on the first segment of a period), then the discontinuitySequence shouldn't be the
+      // timeline's matching one, but instead should be the one prior, and the first segment
+      // of the new manifest should be marked with a discontinuity.
+      //
+      // The reason for this special case is that discontinuity sequence shows how many
+      // discontinuities have fallen off of the playlist, and discontinuities are marked on
+      // the first segment of a new "timeline." Because of this, while DASH will retain that
+      // Period while the "timeline" exists, HLS keeps track of it via the discontinuity
+      // sequence, and that first segment is an indicator, but can be removed before that
+      // timeline is gone.
+
+      const oldMatchingSegment = oldPlaylist.segments[oldMatchingSegmentIndex];
+      if (oldMatchingSegment.discontinuity && !firstNewSegment.discontinuity) {
+        firstNewSegment.discontinuity = true;
+        playlist.discontinuityStarts.unshift(0);
+        playlist.discontinuitySequence--;
+      }
+      updateMediaSequenceForPlaylist({
+        playlist,
+        mediaSequence: oldPlaylist.segments[oldMatchingSegmentIndex].number
+      });
+    });
+  };
+  /**
+   * Given an old parsed manifest object and a new parsed manifest object, updates the
+   * sequence and timing values within the new manifest to ensure that it lines up with the
+   * old.
+   *
+   * @param {Array} oldManifest - the old main manifest object
+   * @param {Array} newManifest - the new main manifest object
+   *
+   * @return {Object} the updated new manifest object
+   */
+
+  const positionManifestOnTimeline = ({
+    oldManifest,
+    newManifest
+  }) => {
+    // Starting from v4.1.2 of the IOP, section 4.4.3.3 states:
+    //
+    // "MPD@availabilityStartTime and Period@start shall not be changed over MPD updates."
+    //
+    // This was added from https://github.com/Dash-Industry-Forum/DASH-IF-IOP/issues/160
+    //
+    // Because of this change, and the difficulty of supporting periods with changing start
+    // times, periods with changing start times are not supported. This makes the logic much
+    // simpler, since periods with the same start time can be considerred the same period
+    // across refreshes.
+    //
+    // To give an example as to the difficulty of handling periods where the start time may
+    // change, if a single period manifest is refreshed with another manifest with a single
+    // period, and both the start and end times are increased, then the only way to determine
+    // if it's a new period or an old one that has changed is to look through the segments of
+    // each playlist and determine the presentation time bounds to find a match. In addition,
+    // if the period start changed to exceed the old period end, then there would be no
+    // match, and it would not be possible to determine whether the refreshed period is a new
+    // one or the old one.
+    const oldPlaylists = oldManifest.playlists.concat(getMediaGroupPlaylists(oldManifest));
+    const newPlaylists = newManifest.playlists.concat(getMediaGroupPlaylists(newManifest)); // Save all seen timelineStarts to the new manifest. Although this potentially means that
+    // there's a "memory leak" in that it will never stop growing, in reality, only a couple
+    // of properties are saved for each seen Period. Even long running live streams won't
+    // generate too many Periods, unless the stream is watched for decades. In the future,
+    // this can be optimized by mapping to discontinuity sequence numbers for each timeline,
+    // but it may not become an issue, and the additional info can be useful for debugging.
+
+    newManifest.timelineStarts = getUniqueTimelineStarts([oldManifest.timelineStarts, newManifest.timelineStarts]);
+    updateSequenceNumbers({
+      oldPlaylists,
+      newPlaylists,
+      timelineStarts: newManifest.timelineStarts
+    });
+    return newManifest;
+  };
+  const generateSidxKey = sidx => sidx && sidx.uri + '-' + byteRangeToString(sidx.byterange);
+  const mergeDiscontiguousPlaylists = playlists => {
+    // Break out playlists into groups based on their baseUrl
+    const playlistsByBaseUrl = playlists.reduce(function (acc, cur) {
+      if (!acc[cur.attributes.baseUrl]) {
+        acc[cur.attributes.baseUrl] = [];
+      }
+      acc[cur.attributes.baseUrl].push(cur);
+      return acc;
+    }, {});
+    let allPlaylists = [];
+    Object.values(playlistsByBaseUrl).forEach(playlistGroup => {
+      const mergedPlaylists = values(playlistGroup.reduce((acc, playlist) => {
+        // assuming playlist IDs are the same across periods
+        // TODO: handle multiperiod where representation sets are not the same
+        // across periods
+        const name = playlist.attributes.id + (playlist.attributes.lang || '');
+        if (!acc[name]) {
+          // First Period
+          acc[name] = playlist;
+          acc[name].attributes.timelineStarts = [];
+        } else {
+          // Subsequent Periods
+          if (playlist.segments) {
+            // first segment of subsequent periods signal a discontinuity
+            if (playlist.segments[0]) {
+              playlist.segments[0].discontinuity = true;
+            }
+            acc[name].segments.push(...playlist.segments);
+          } // bubble up contentProtection, this assumes all DRM content
+          // has the same contentProtection
+
+          if (playlist.attributes.contentProtection) {
+            acc[name].attributes.contentProtection = playlist.attributes.contentProtection;
+          }
+        }
+        acc[name].attributes.timelineStarts.push({
+          // Although they represent the same number, it's important to have both to make it
+          // compatible with HLS potentially having a similar attribute.
+          start: playlist.attributes.periodStart,
+          timeline: playlist.attributes.periodStart
+        });
+        return acc;
+      }, {}));
+      allPlaylists = allPlaylists.concat(mergedPlaylists);
+    });
+    return allPlaylists.map(playlist => {
+      playlist.discontinuityStarts = findIndexes(playlist.segments || [], 'discontinuity');
+      return playlist;
+    });
+  };
+  const addSidxSegmentsToPlaylist = (playlist, sidxMapping) => {
+    const sidxKey = generateSidxKey(playlist.sidx);
+    const sidxMatch = sidxKey && sidxMapping[sidxKey] && sidxMapping[sidxKey].sidx;
+    if (sidxMatch) {
+      addSidxSegmentsToPlaylist$1(playlist, sidxMatch, playlist.sidx.resolvedUri);
+    }
+    return playlist;
+  };
+  const addSidxSegmentsToPlaylists = (playlists, sidxMapping = {}) => {
+    if (!Object.keys(sidxMapping).length) {
+      return playlists;
+    }
+    for (const i in playlists) {
+      playlists[i] = addSidxSegmentsToPlaylist(playlists[i], sidxMapping);
+    }
+    return playlists;
+  };
+  const formatAudioPlaylist = ({
+    attributes,
+    segments,
+    sidx,
+    mediaSequence,
+    discontinuitySequence,
+    discontinuityStarts
+  }, isAudioOnly) => {
+    const playlist = {
+      attributes: {
+        NAME: attributes.id,
+        BANDWIDTH: attributes.bandwidth,
+        CODECS: attributes.codecs,
+        ['PROGRAM-ID']: 1
+      },
+      uri: '',
+      endList: attributes.type === 'static',
+      timeline: attributes.periodStart,
+      resolvedUri: attributes.baseUrl || '',
+      targetDuration: attributes.duration,
+      discontinuitySequence,
+      discontinuityStarts,
+      timelineStarts: attributes.timelineStarts,
+      mediaSequence,
+      segments
+    };
+    if (attributes.contentProtection) {
+      playlist.contentProtection = attributes.contentProtection;
+    }
+    if (attributes.serviceLocation) {
+      playlist.attributes.serviceLocation = attributes.serviceLocation;
+    }
+    if (sidx) {
+      playlist.sidx = sidx;
+    }
+    if (isAudioOnly) {
+      playlist.attributes.AUDIO = 'audio';
+      playlist.attributes.SUBTITLES = 'subs';
+    }
+    return playlist;
+  };
+  const formatVttPlaylist = ({
+    attributes,
+    segments,
+    mediaSequence,
+    discontinuityStarts,
+    discontinuitySequence
+  }) => {
+    if (typeof segments === 'undefined') {
+      // vtt tracks may use single file in BaseURL
+      segments = [{
+        uri: attributes.baseUrl,
+        timeline: attributes.periodStart,
+        resolvedUri: attributes.baseUrl || '',
+        duration: attributes.sourceDuration,
+        number: 0
+      }]; // targetDuration should be the same duration as the only segment
+
+      attributes.duration = attributes.sourceDuration;
+    }
+    const m3u8Attributes = {
+      NAME: attributes.id,
+      BANDWIDTH: attributes.bandwidth,
+      ['PROGRAM-ID']: 1
+    };
+    if (attributes.codecs) {
+      m3u8Attributes.CODECS = attributes.codecs;
+    }
+    const vttPlaylist = {
+      attributes: m3u8Attributes,
+      uri: '',
+      endList: attributes.type === 'static',
+      timeline: attributes.periodStart,
+      resolvedUri: attributes.baseUrl || '',
+      targetDuration: attributes.duration,
+      timelineStarts: attributes.timelineStarts,
+      discontinuityStarts,
+      discontinuitySequence,
+      mediaSequence,
+      segments
+    };
+    if (attributes.serviceLocation) {
+      vttPlaylist.attributes.serviceLocation = attributes.serviceLocation;
+    }
+    return vttPlaylist;
+  };
+  const organizeAudioPlaylists = (playlists, sidxMapping = {}, isAudioOnly = false) => {
+    let mainPlaylist;
+    const formattedPlaylists = playlists.reduce((a, playlist) => {
+      const role = playlist.attributes.role && playlist.attributes.role.value || '';
+      const language = playlist.attributes.lang || '';
+      let label = playlist.attributes.label || 'main';
+      if (language && !playlist.attributes.label) {
+        const roleLabel = role ? ` (${role})` : '';
+        label = `${playlist.attributes.lang}${roleLabel}`;
+      }
+      if (!a[label]) {
+        a[label] = {
+          language,
+          autoselect: true,
+          default: role === 'main',
+          playlists: [],
+          uri: ''
+        };
+      }
+      const formatted = addSidxSegmentsToPlaylist(formatAudioPlaylist(playlist, isAudioOnly), sidxMapping);
+      a[label].playlists.push(formatted);
+      if (typeof mainPlaylist === 'undefined' && role === 'main') {
+        mainPlaylist = playlist;
+        mainPlaylist.default = true;
+      }
+      return a;
+    }, {}); // if no playlists have role "main", mark the first as main
+
+    if (!mainPlaylist) {
+      const firstLabel = Object.keys(formattedPlaylists)[0];
+      formattedPlaylists[firstLabel].default = true;
+    }
+    return formattedPlaylists;
+  };
+  const organizeVttPlaylists = (playlists, sidxMapping = {}) => {
+    return playlists.reduce((a, playlist) => {
+      const label = playlist.attributes.label || playlist.attributes.lang || 'text';
+      if (!a[label]) {
+        a[label] = {
+          language: label,
+          default: false,
+          autoselect: false,
+          playlists: [],
+          uri: ''
+        };
+      }
+      a[label].playlists.push(addSidxSegmentsToPlaylist(formatVttPlaylist(playlist), sidxMapping));
+      return a;
+    }, {});
+  };
+  const organizeCaptionServices = captionServices => captionServices.reduce((svcObj, svc) => {
+    if (!svc) {
+      return svcObj;
+    }
+    svc.forEach(service => {
+      const {
+        channel,
+        language
+      } = service;
+      svcObj[language] = {
+        autoselect: false,
+        default: false,
+        instreamId: channel,
+        language
+      };
+      if (service.hasOwnProperty('aspectRatio')) {
+        svcObj[language].aspectRatio = service.aspectRatio;
+      }
+      if (service.hasOwnProperty('easyReader')) {
+        svcObj[language].easyReader = service.easyReader;
+      }
+      if (service.hasOwnProperty('3D')) {
+        svcObj[language]['3D'] = service['3D'];
+      }
+    });
+    return svcObj;
+  }, {});
+  const formatVideoPlaylist = ({
+    attributes,
+    segments,
+    sidx,
+    discontinuityStarts
+  }) => {
+    const playlist = {
+      attributes: {
+        NAME: attributes.id,
+        AUDIO: 'audio',
+        SUBTITLES: 'subs',
+        RESOLUTION: {
+          width: attributes.width,
+          height: attributes.height
+        },
+        CODECS: attributes.codecs,
+        BANDWIDTH: attributes.bandwidth,
+        ['PROGRAM-ID']: 1
+      },
+      uri: '',
+      endList: attributes.type === 'static',
+      timeline: attributes.periodStart,
+      resolvedUri: attributes.baseUrl || '',
+      targetDuration: attributes.duration,
+      discontinuityStarts,
+      timelineStarts: attributes.timelineStarts,
+      segments
+    };
+    if (attributes.frameRate) {
+      playlist.attributes['FRAME-RATE'] = attributes.frameRate;
+    }
+    if (attributes.contentProtection) {
+      playlist.contentProtection = attributes.contentProtection;
+    }
+    if (attributes.serviceLocation) {
+      playlist.attributes.serviceLocation = attributes.serviceLocation;
+    }
+    if (sidx) {
+      playlist.sidx = sidx;
+    }
+    return playlist;
+  };
+  const videoOnly = ({
+    attributes
+  }) => attributes.mimeType === 'video/mp4' || attributes.mimeType === 'video/webm' || attributes.contentType === 'video';
+  const audioOnly = ({
+    attributes
+  }) => attributes.mimeType === 'audio/mp4' || attributes.mimeType === 'audio/webm' || attributes.contentType === 'audio';
+  const vttOnly = ({
+    attributes
+  }) => attributes.mimeType === 'text/vtt' || attributes.contentType === 'text';
+  /**
+   * Contains start and timeline properties denoting a timeline start. For DASH, these will
+   * be the same number.
+   *
+   * @typedef {Object} TimelineStart
+   * @property {number} start - the start time of the timeline
+   * @property {number} timeline - the timeline number
+   */
+
+  /**
+   * Adds appropriate media and discontinuity sequence values to the segments and playlists.
+   *
+   * Throughout mpd-parser, the `number` attribute is used in relation to `startNumber`, a
+   * DASH specific attribute used in constructing segment URI's from templates. However, from
+   * an HLS perspective, the `number` attribute on a segment would be its `mediaSequence`
+   * value, which should start at the original media sequence value (or 0) and increment by 1
+   * for each segment thereafter. Since DASH's `startNumber` values are independent per
+   * period, it doesn't make sense to use it for `number`. Instead, assume everything starts
+   * from a 0 mediaSequence value and increment from there.
+   *
+   * Note that VHS currently doesn't use the `number` property, but it can be helpful for
+   * debugging and making sense of the manifest.
+   *
+   * For live playlists, to account for values increasing in manifests when periods are
+   * removed on refreshes, merging logic should be used to update the numbers to their
+   * appropriate values (to ensure they're sequential and increasing).
+   *
+   * @param {Object[]} playlists - the playlists to update
+   * @param {TimelineStart[]} timelineStarts - the timeline starts for the manifest
+   */
+
+  const addMediaSequenceValues = (playlists, timelineStarts) => {
+    // increment all segments sequentially
+    playlists.forEach(playlist => {
+      playlist.mediaSequence = 0;
+      playlist.discontinuitySequence = timelineStarts.findIndex(function ({
+        timeline
+      }) {
+        return timeline === playlist.timeline;
+      });
+      if (!playlist.segments) {
+        return;
+      }
+      playlist.segments.forEach((segment, index) => {
+        segment.number = index;
+      });
+    });
+  };
+  /**
+   * Given a media group object, flattens all playlists within the media group into a single
+   * array.
+   *
+   * @param {Object} mediaGroupObject - the media group object
+   *
+   * @return {Object[]}
+   *         The media group playlists
+   */
+
+  const flattenMediaGroupPlaylists = mediaGroupObject => {
+    if (!mediaGroupObject) {
+      return [];
+    }
+    return Object.keys(mediaGroupObject).reduce((acc, label) => {
+      const labelContents = mediaGroupObject[label];
+      return acc.concat(labelContents.playlists);
+    }, []);
+  };
+  const toM3u8 = ({
+    dashPlaylists,
+    locations,
+    contentSteering,
+    sidxMapping = {},
+    previousManifest,
+    eventStream
+  }) => {
+    if (!dashPlaylists.length) {
+      return {};
+    } // grab all main manifest attributes
+
+    const {
+      sourceDuration: duration,
+      type,
+      suggestedPresentationDelay,
+      minimumUpdatePeriod
+    } = dashPlaylists[0].attributes;
+    const videoPlaylists = mergeDiscontiguousPlaylists(dashPlaylists.filter(videoOnly)).map(formatVideoPlaylist);
+    const audioPlaylists = mergeDiscontiguousPlaylists(dashPlaylists.filter(audioOnly));
+    const vttPlaylists = mergeDiscontiguousPlaylists(dashPlaylists.filter(vttOnly));
+    const captions = dashPlaylists.map(playlist => playlist.attributes.captionServices).filter(Boolean);
+    const manifest = {
+      allowCache: true,
+      discontinuityStarts: [],
+      segments: [],
+      endList: true,
+      mediaGroups: {
+        AUDIO: {},
+        VIDEO: {},
+        ['CLOSED-CAPTIONS']: {},
+        SUBTITLES: {}
+      },
+      uri: '',
+      duration,
+      playlists: addSidxSegmentsToPlaylists(videoPlaylists, sidxMapping)
+    };
+    if (minimumUpdatePeriod >= 0) {
+      manifest.minimumUpdatePeriod = minimumUpdatePeriod * 1000;
+    }
+    if (locations) {
+      manifest.locations = locations;
+    }
+    if (contentSteering) {
+      manifest.contentSteering = contentSteering;
+    }
+    if (type === 'dynamic') {
+      manifest.suggestedPresentationDelay = suggestedPresentationDelay;
+    }
+    if (eventStream && eventStream.length > 0) {
+      manifest.eventStream = eventStream;
+    }
+    const isAudioOnly = manifest.playlists.length === 0;
+    const organizedAudioGroup = audioPlaylists.length ? organizeAudioPlaylists(audioPlaylists, sidxMapping, isAudioOnly) : null;
+    const organizedVttGroup = vttPlaylists.length ? organizeVttPlaylists(vttPlaylists, sidxMapping) : null;
+    const formattedPlaylists = videoPlaylists.concat(flattenMediaGroupPlaylists(organizedAudioGroup), flattenMediaGroupPlaylists(organizedVttGroup));
+    const playlistTimelineStarts = formattedPlaylists.map(({
+      timelineStarts
+    }) => timelineStarts);
+    manifest.timelineStarts = getUniqueTimelineStarts(playlistTimelineStarts);
+    addMediaSequenceValues(formattedPlaylists, manifest.timelineStarts);
+    if (organizedAudioGroup) {
+      manifest.mediaGroups.AUDIO.audio = organizedAudioGroup;
+    }
+    if (organizedVttGroup) {
+      manifest.mediaGroups.SUBTITLES.subs = organizedVttGroup;
+    }
+    if (captions.length) {
+      manifest.mediaGroups['CLOSED-CAPTIONS'].cc = organizeCaptionServices(captions);
+    }
+    if (previousManifest) {
+      return positionManifestOnTimeline({
+        oldManifest: previousManifest,
+        newManifest: manifest
+      });
+    }
+    return manifest;
+  };
+
+  /**
+   * Calculates the R (repetition) value for a live stream (for the final segment
+   * in a manifest where the r value is negative 1)
+   *
+   * @param {Object} attributes
+   *        Object containing all inherited attributes from parent elements with attribute
+   *        names as keys
+   * @param {number} time
+   *        current time (typically the total time up until the final segment)
+   * @param {number} duration
+   *        duration property for the given <S />
+   *
+   * @return {number}
+   *        R value to reach the end of the given period
+   */
+  const getLiveRValue = (attributes, time, duration) => {
+    const {
+      NOW,
+      clientOffset,
+      availabilityStartTime,
+      timescale = 1,
+      periodStart = 0,
+      minimumUpdatePeriod = 0
+    } = attributes;
+    const now = (NOW + clientOffset) / 1000;
+    const periodStartWC = availabilityStartTime + periodStart;
+    const periodEndWC = now + minimumUpdatePeriod;
+    const periodDuration = periodEndWC - periodStartWC;
+    return Math.ceil((periodDuration * timescale - time) / duration);
+  };
+  /**
+   * Uses information provided by SegmentTemplate.SegmentTimeline to determine segment
+   * timing and duration
+   *
+   * @param {Object} attributes
+   *        Object containing all inherited attributes from parent elements with attribute
+   *        names as keys
+   * @param {Object[]} segmentTimeline
+   *        List of objects representing the attributes of each S element contained within
+   *
+   * @return {{number: number, duration: number, time: number, timeline: number}[]}
+   *         List of Objects with segment timing and duration info
+   */
+
+  const parseByTimeline = (attributes, segmentTimeline) => {
+    const {
+      type,
+      minimumUpdatePeriod = 0,
+      media = '',
+      sourceDuration,
+      timescale = 1,
+      startNumber = 1,
+      periodStart: timeline
+    } = attributes;
+    const segments = [];
+    let time = -1;
+    for (let sIndex = 0; sIndex < segmentTimeline.length; sIndex++) {
+      const S = segmentTimeline[sIndex];
+      const duration = S.d;
+      const repeat = S.r || 0;
+      const segmentTime = S.t || 0;
+      if (time < 0) {
+        // first segment
+        time = segmentTime;
+      }
+      if (segmentTime && segmentTime > time) {
+        // discontinuity
+        // TODO: How to handle this type of discontinuity
+        // timeline++ here would treat it like HLS discontuity and content would
+        // get appended without gap
+        // E.G.
+        //  <S t="0" d="1" />
+        //  <S d="1" />
+        //  <S d="1" />
+        //  <S t="5" d="1" />
+        // would have $Time$ values of [0, 1, 2, 5]
+        // should this be appened at time positions [0, 1, 2, 3],(#EXT-X-DISCONTINUITY)
+        // or [0, 1, 2, gap, gap, 5]? (#EXT-X-GAP)
+        // does the value of sourceDuration consider this when calculating arbitrary
+        // negative @r repeat value?
+        // E.G. Same elements as above with this added at the end
+        //  <S d="1" r="-1" />
+        //  with a sourceDuration of 10
+        // Would the 2 gaps be included in the time duration calculations resulting in
+        // 8 segments with $Time$ values of [0, 1, 2, 5, 6, 7, 8, 9] or 10 segments
+        // with $Time$ values of [0, 1, 2, 5, 6, 7, 8, 9, 10, 11] ?
+        time = segmentTime;
+      }
+      let count;
+      if (repeat < 0) {
+        const nextS = sIndex + 1;
+        if (nextS === segmentTimeline.length) {
+          // last segment
+          if (type === 'dynamic' && minimumUpdatePeriod > 0 && media.indexOf('$Number$') > 0) {
+            count = getLiveRValue(attributes, time, duration);
+          } else {
+            // TODO: This may be incorrect depending on conclusion of TODO above
+            count = (sourceDuration * timescale - time) / duration;
+          }
+        } else {
+          count = (segmentTimeline[nextS].t - time) / duration;
+        }
+      } else {
+        count = repeat + 1;
+      }
+      const end = startNumber + segments.length + count;
+      let number = startNumber + segments.length;
+      while (number < end) {
+        segments.push({
+          number,
+          duration: duration / timescale,
+          time,
+          timeline
+        });
+        time += duration;
+        number++;
+      }
+    }
+    return segments;
+  };
+  const identifierPattern = /\$([A-z]*)(?:(%0)([0-9]+)d)?\$/g;
+  /**
+   * Replaces template identifiers with corresponding values. To be used as the callback
+   * for String.prototype.replace
+   *
+   * @name replaceCallback
+   * @function
+   * @param {string} match
+   *        Entire match of identifier
+   * @param {string} identifier
+   *        Name of matched identifier
+   * @param {string} format
+   *        Format tag string. Its presence indicates that padding is expected
+   * @param {string} width
+   *        Desired length of the replaced value. Values less than this width shall be left
+   *        zero padded
+   * @return {string}
+   *         Replacement for the matched identifier
+   */
+
+  /**
+   * Returns a function to be used as a callback for String.prototype.replace to replace
+   * template identifiers
+   *
+   * @param {Obect} values
+   *        Object containing values that shall be used to replace known identifiers
+   * @param {number} values.RepresentationID
+   *        Value of the Representation@id attribute
+   * @param {number} values.Number
+   *        Number of the corresponding segment
+   * @param {number} values.Bandwidth
+   *        Value of the Representation@bandwidth attribute.
+   * @param {number} values.Time
+   *        Timestamp value of the corresponding segment
+   * @return {replaceCallback}
+   *         Callback to be used with String.prototype.replace to replace identifiers
+   */
+
+  const identifierReplacement = values => (match, identifier, format, width) => {
+    if (match === '$$') {
+      // escape sequence
+      return '$';
+    }
+    if (typeof values[identifier] === 'undefined') {
+      return match;
+    }
+    const value = '' + values[identifier];
+    if (identifier === 'RepresentationID') {
+      // Format tag shall not be present with RepresentationID
+      return value;
+    }
+    if (!format) {
+      width = 1;
+    } else {
+      width = parseInt(width, 10);
+    }
+    if (value.length >= width) {
+      return value;
+    }
+    return `${new Array(width - value.length + 1).join('0')}${value}`;
+  };
+  /**
+   * Constructs a segment url from a template string
+   *
+   * @param {string} url
+   *        Template string to construct url from
+   * @param {Obect} values
+   *        Object containing values that shall be used to replace known identifiers
+   * @param {number} values.RepresentationID
+   *        Value of the Representation@id attribute
+   * @param {number} values.Number
+   *        Number of the corresponding segment
+   * @param {number} values.Bandwidth
+   *        Value of the Representation@bandwidth attribute.
+   * @param {number} values.Time
+   *        Timestamp value of the corresponding segment
+   * @return {string}
+   *         Segment url with identifiers replaced
+   */
+
+  const constructTemplateUrl = (url, values) => url.replace(identifierPattern, identifierReplacement(values));
+  /**
+   * Generates a list of objects containing timing and duration information about each
+   * segment needed to generate segment uris and the complete segment object
+   *
+   * @param {Object} attributes
+   *        Object containing all inherited attributes from parent elements with attribute
+   *        names as keys
+   * @param {Object[]|undefined} segmentTimeline
+   *        List of objects representing the attributes of each S element contained within
+   *        the SegmentTimeline element
+   * @return {{number: number, duration: number, time: number, timeline: number}[]}
+   *         List of Objects with segment timing and duration info
+   */
+
+  const parseTemplateInfo = (attributes, segmentTimeline) => {
+    if (!attributes.duration && !segmentTimeline) {
+      // if neither @duration or SegmentTimeline are present, then there shall be exactly
+      // one media segment
+      return [{
+        number: attributes.startNumber || 1,
+        duration: attributes.sourceDuration,
+        time: 0,
+        timeline: attributes.periodStart
+      }];
+    }
+    if (attributes.duration) {
+      return parseByDuration(attributes);
+    }
+    return parseByTimeline(attributes, segmentTimeline);
+  };
+  /**
+   * Generates a list of segments using information provided by the SegmentTemplate element
+   *
+   * @param {Object} attributes
+   *        Object containing all inherited attributes from parent elements with attribute
+   *        names as keys
+   * @param {Object[]|undefined} segmentTimeline
+   *        List of objects representing the attributes of each S element contained within
+   *        the SegmentTimeline element
+   * @return {Object[]}
+   *         List of segment objects
+   */
+
+  const segmentsFromTemplate = (attributes, segmentTimeline) => {
+    const templateValues = {
+      RepresentationID: attributes.id,
+      Bandwidth: attributes.bandwidth || 0
+    };
+    const {
+      initialization = {
+        sourceURL: '',
+        range: ''
+      }
+    } = attributes;
+    const mapSegment = urlTypeToSegment({
+      baseUrl: attributes.baseUrl,
+      source: constructTemplateUrl(initialization.sourceURL, templateValues),
+      range: initialization.range
+    });
+    const segments = parseTemplateInfo(attributes, segmentTimeline);
+    return segments.map(segment => {
+      templateValues.Number = segment.number;
+      templateValues.Time = segment.time;
+      const uri = constructTemplateUrl(attributes.media || '', templateValues); // See DASH spec section 5.3.9.2.2
+      // - if timescale isn't present on any level, default to 1.
+
+      const timescale = attributes.timescale || 1; // - if presentationTimeOffset isn't present on any level, default to 0
+
+      const presentationTimeOffset = attributes.presentationTimeOffset || 0;
+      const presentationTime =
+      // Even if the @t attribute is not specified for the segment, segment.time is
+      // calculated in mpd-parser prior to this, so it's assumed to be available.
+      attributes.periodStart + (segment.time - presentationTimeOffset) / timescale;
+      const map = {
+        uri,
+        timeline: segment.timeline,
+        duration: segment.duration,
+        resolvedUri: resolveUrl$1(attributes.baseUrl || '', uri),
+        map: mapSegment,
+        number: segment.number,
+        presentationTime
+      };
+      return map;
+    });
+  };
+
+  /**
+   * Converts a <SegmentUrl> (of type URLType from the DASH spec 5.3.9.2 Table 14)
+   * to an object that matches the output of a segment in videojs/mpd-parser
+   *
+   * @param {Object} attributes
+   *   Object containing all inherited attributes from parent elements with attribute
+   *   names as keys
+   * @param {Object} segmentUrl
+   *   <SegmentURL> node to translate into a segment object
+   * @return {Object} translated segment object
+   */
+
+  const SegmentURLToSegmentObject = (attributes, segmentUrl) => {
+    const {
+      baseUrl,
+      initialization = {}
+    } = attributes;
+    const initSegment = urlTypeToSegment({
+      baseUrl,
+      source: initialization.sourceURL,
+      range: initialization.range
+    });
+    const segment = urlTypeToSegment({
+      baseUrl,
+      source: segmentUrl.media,
+      range: segmentUrl.mediaRange
+    });
+    segment.map = initSegment;
+    return segment;
+  };
+  /**
+   * Generates a list of segments using information provided by the SegmentList element
+   * SegmentList (DASH SPEC Section 5.3.9.3.2) contains a set of <SegmentURL> nodes.  Each
+   * node should be translated into segment.
+   *
+   * @param {Object} attributes
+   *   Object containing all inherited attributes from parent elements with attribute
+   *   names as keys
+   * @param {Object[]|undefined} segmentTimeline
+   *        List of objects representing the attributes of each S element contained within
+   *        the SegmentTimeline element
+   * @return {Object.<Array>} list of segments
+   */
+
+  const segmentsFromList = (attributes, segmentTimeline) => {
+    const {
+      duration,
+      segmentUrls = [],
+      periodStart
+    } = attributes; // Per spec (5.3.9.2.1) no way to determine segment duration OR
+    // if both SegmentTimeline and @duration are defined, it is outside of spec.
+
+    if (!duration && !segmentTimeline || duration && segmentTimeline) {
+      throw new Error(errors.SEGMENT_TIME_UNSPECIFIED);
+    }
+    const segmentUrlMap = segmentUrls.map(segmentUrlObject => SegmentURLToSegmentObject(attributes, segmentUrlObject));
+    let segmentTimeInfo;
+    if (duration) {
+      segmentTimeInfo = parseByDuration(attributes);
+    }
+    if (segmentTimeline) {
+      segmentTimeInfo = parseByTimeline(attributes, segmentTimeline);
+    }
+    const segments = segmentTimeInfo.map((segmentTime, index) => {
+      if (segmentUrlMap[index]) {
+        const segment = segmentUrlMap[index]; // See DASH spec section 5.3.9.2.2
+        // - if timescale isn't present on any level, default to 1.
+
+        const timescale = attributes.timescale || 1; // - if presentationTimeOffset isn't present on any level, default to 0
+
+        const presentationTimeOffset = attributes.presentationTimeOffset || 0;
+        segment.timeline = segmentTime.timeline;
+        segment.duration = segmentTime.duration;
+        segment.number = segmentTime.number;
+        segment.presentationTime = periodStart + (segmentTime.time - presentationTimeOffset) / timescale;
+        return segment;
+      } // Since we're mapping we should get rid of any blank segments (in case
+      // the given SegmentTimeline is handling for more elements than we have
+      // SegmentURLs for).
+    }).filter(segment => segment);
+    return segments;
+  };
+  const generateSegments = ({
+    attributes,
+    segmentInfo
+  }) => {
+    let segmentAttributes;
+    let segmentsFn;
+    if (segmentInfo.template) {
+      segmentsFn = segmentsFromTemplate;
+      segmentAttributes = merge$1(attributes, segmentInfo.template);
+    } else if (segmentInfo.base) {
+      segmentsFn = segmentsFromBase;
+      segmentAttributes = merge$1(attributes, segmentInfo.base);
+    } else if (segmentInfo.list) {
+      segmentsFn = segmentsFromList;
+      segmentAttributes = merge$1(attributes, segmentInfo.list);
+    }
+    const segmentsInfo = {
+      attributes
+    };
+    if (!segmentsFn) {
+      return segmentsInfo;
+    }
+    const segments = segmentsFn(segmentAttributes, segmentInfo.segmentTimeline); // The @duration attribute will be used to determin the playlist's targetDuration which
+    // must be in seconds. Since we've generated the segment list, we no longer need
+    // @duration to be in @timescale units, so we can convert it here.
+
+    if (segmentAttributes.duration) {
+      const {
+        duration,
+        timescale = 1
+      } = segmentAttributes;
+      segmentAttributes.duration = duration / timescale;
+    } else if (segments.length) {
+      // if there is no @duration attribute, use the largest segment duration as
+      // as target duration
+      segmentAttributes.duration = segments.reduce((max, segment) => {
+        return Math.max(max, Math.ceil(segment.duration));
+      }, 0);
+    } else {
+      segmentAttributes.duration = 0;
+    }
+    segmentsInfo.attributes = segmentAttributes;
+    segmentsInfo.segments = segments; // This is a sidx box without actual segment information
+
+    if (segmentInfo.base && segmentAttributes.indexRange) {
+      segmentsInfo.sidx = segments[0];
+      segmentsInfo.segments = [];
+    }
+    return segmentsInfo;
+  };
+  const toPlaylists = representations => representations.map(generateSegments);
+  const findChildren = (element, name) => from(element.childNodes).filter(({
+    tagName
+  }) => tagName === name);
+  const getContent = element => element.textContent.trim();
+
+  /**
+   * Converts the provided string that may contain a division operation to a number.
+   *
+   * @param {string} value - the provided string value
+   *
+   * @return {number} the parsed string value
+   */
+  const parseDivisionValue = value => {
+    return parseFloat(value.split('/').reduce((prev, current) => prev / current));
+  };
+  const parseDuration = str => {
+    const SECONDS_IN_YEAR = 365 * 24 * 60 * 60;
+    const SECONDS_IN_MONTH = 30 * 24 * 60 * 60;
+    const SECONDS_IN_DAY = 24 * 60 * 60;
+    const SECONDS_IN_HOUR = 60 * 60;
+    const SECONDS_IN_MIN = 60; // P10Y10M10DT10H10M10.1S
+
+    const durationRegex = /P(?:(\d*)Y)?(?:(\d*)M)?(?:(\d*)D)?(?:T(?:(\d*)H)?(?:(\d*)M)?(?:([\d.]*)S)?)?/;
+    const match = durationRegex.exec(str);
+    if (!match) {
+      return 0;
+    }
+    const [year, month, day, hour, minute, second] = match.slice(1);
+    return parseFloat(year || 0) * SECONDS_IN_YEAR + parseFloat(month || 0) * SECONDS_IN_MONTH + parseFloat(day || 0) * SECONDS_IN_DAY + parseFloat(hour || 0) * SECONDS_IN_HOUR + parseFloat(minute || 0) * SECONDS_IN_MIN + parseFloat(second || 0);
+  };
+  const parseDate = str => {
+    // Date format without timezone according to ISO 8601
+    // YYY-MM-DDThh:mm:ss.ssssss
+    const dateRegex = /^\d+-\d+-\d+T\d+:\d+:\d+(\.\d+)?$/; // If the date string does not specifiy a timezone, we must specifiy UTC. This is
+    // expressed by ending with 'Z'
+
+    if (dateRegex.test(str)) {
+      str += 'Z';
+    }
+    return Date.parse(str);
+  };
+  const parsers = {
+    /**
+     * Specifies the duration of the entire Media Presentation. Format is a duration string
+     * as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    mediaPresentationDuration(value) {
+      return parseDuration(value);
+    },
+    /**
+     * Specifies the Segment availability start time for all Segments referred to in this
+     * MPD. For a dynamic manifest, it specifies the anchor for the earliest availability
+     * time. Format is a date string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The date as seconds from unix epoch
+     */
+    availabilityStartTime(value) {
+      return parseDate(value) / 1000;
+    },
+    /**
+     * Specifies the smallest period between potential changes to the MPD. Format is a
+     * duration string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    minimumUpdatePeriod(value) {
+      return parseDuration(value);
+    },
+    /**
+     * Specifies the suggested presentation delay. Format is a
+     * duration string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    suggestedPresentationDelay(value) {
+      return parseDuration(value);
+    },
+    /**
+     * specifices the type of mpd. Can be either "static" or "dynamic"
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     *
+     * @return {string}
+     *         The type as a string
+     */
+    type(value) {
+      return value;
+    },
+    /**
+     * Specifies the duration of the smallest time shifting buffer for any Representation
+     * in the MPD. Format is a duration string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    timeShiftBufferDepth(value) {
+      return parseDuration(value);
+    },
+    /**
+     * Specifies the PeriodStart time of the Period relative to the availabilityStarttime.
+     * Format is a duration string as specified in ISO 8601
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The duration in seconds
+     */
+    start(value) {
+      return parseDuration(value);
+    },
+    /**
+     * Specifies the width of the visual presentation
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed width
+     */
+    width(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the height of the visual presentation
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed height
+     */
+    height(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the bitrate of the representation
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed bandwidth
+     */
+    bandwidth(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the frame rate of the representation
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed frame rate
+     */
+    frameRate(value) {
+      return parseDivisionValue(value);
+    },
+    /**
+     * Specifies the number of the first Media Segment in this Representation in the Period
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed number
+     */
+    startNumber(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the timescale in units per seconds
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed timescale
+     */
+    timescale(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the presentationTimeOffset.
+     *
+     * @param {string} value
+     *        value of the attribute as a string
+     *
+     * @return {number}
+     *         The parsed presentationTimeOffset
+     */
+    presentationTimeOffset(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the constant approximate Segment duration
+     * NOTE: The <Period> element also contains an @duration attribute. This duration
+     *       specifies the duration of the Period. This attribute is currently not
+     *       supported by the rest of the parser, however we still check for it to prevent
+     *       errors.
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed duration
+     */
+    duration(value) {
+      const parsedValue = parseInt(value, 10);
+      if (isNaN(parsedValue)) {
+        return parseDuration(value);
+      }
+      return parsedValue;
+    },
+    /**
+     * Specifies the Segment duration, in units of the value of the @timescale.
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed duration
+     */
+    d(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the MPD start time, in @timescale units, the first Segment in the series
+     * starts relative to the beginning of the Period
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed time
+     */
+    t(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the repeat count of the number of following contiguous Segments with the
+     * same duration expressed by the value of @d
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {number}
+     *         The parsed number
+     */
+    r(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Specifies the presentationTime.
+     *
+     * @param {string} value
+     *        value of the attribute as a string
+     *
+     * @return {number}
+     *         The parsed presentationTime
+     */
+    presentationTime(value) {
+      return parseInt(value, 10);
+    },
+    /**
+     * Default parser for all other attributes. Acts as a no-op and just returns the value
+     * as a string
+     *
+     * @param {string} value
+     *        value of attribute as a string
+     * @return {string}
+     *         Unparsed value
+     */
+    DEFAULT(value) {
+      return value;
+    }
+  };
+  /**
+   * Gets all the attributes and values of the provided node, parses attributes with known
+   * types, and returns an object with attribute names mapped to values.
+   *
+   * @param {Node} el
+   *        The node to parse attributes from
+   * @return {Object}
+   *         Object with all attributes of el parsed
+   */
+
+  const parseAttributes = el => {
+    if (!(el && el.attributes)) {
+      return {};
+    }
+    return from(el.attributes).reduce((a, e) => {
+      const parseFn = parsers[e.name] || parsers.DEFAULT;
+      a[e.name] = parseFn(e.value);
+      return a;
+    }, {});
+  };
+  const keySystemsMap = {
+    'urn:uuid:1077efec-c0b2-4d02-ace3-3c1e52e2fb4b': 'org.w3.clearkey',
+    'urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed': 'com.widevine.alpha',
+    'urn:uuid:9a04f079-9840-4286-ab92-e65be0885f95': 'com.microsoft.playready',
+    'urn:uuid:f239e769-efa3-4850-9c16-a903c6932efb': 'com.adobe.primetime',
+    // ISO_IEC 23009-1_2022 5.8.5.2.2 The mp4 Protection Scheme
+    'urn:mpeg:dash:mp4protection:2011': 'mp4protection'
+  };
+  /**
+   * Builds a list of urls that is the product of the reference urls and BaseURL values
+   *
+   * @param {Object[]} references
+   *        List of objects containing the reference URL as well as its attributes
+   * @param {Node[]} baseUrlElements
+   *        List of BaseURL nodes from the mpd
+   * @return {Object[]}
+   *         List of objects with resolved urls and attributes
+   */
+
+  const buildBaseUrls = (references, baseUrlElements) => {
+    if (!baseUrlElements.length) {
+      return references;
+    }
+    return flatten(references.map(function (reference) {
+      return baseUrlElements.map(function (baseUrlElement) {
+        const initialBaseUrl = getContent(baseUrlElement);
+        const resolvedBaseUrl = resolveUrl$1(reference.baseUrl, initialBaseUrl);
+        const finalBaseUrl = merge$1(parseAttributes(baseUrlElement), {
+          baseUrl: resolvedBaseUrl
+        }); // If the URL is resolved, we want to get the serviceLocation from the reference
+        // assuming there is no serviceLocation on the initialBaseUrl
+
+        if (resolvedBaseUrl !== initialBaseUrl && !finalBaseUrl.serviceLocation && reference.serviceLocation) {
+          finalBaseUrl.serviceLocation = reference.serviceLocation;
+        }
+        return finalBaseUrl;
+      });
+    }));
+  };
+  /**
+   * Contains all Segment information for its containing AdaptationSet
+   *
+   * @typedef {Object} SegmentInformation
+   * @property {Object|undefined} template
+   *           Contains the attributes for the SegmentTemplate node
+   * @property {Object[]|undefined} segmentTimeline
+   *           Contains a list of atrributes for each S node within the SegmentTimeline node
+   * @property {Object|undefined} list
+   *           Contains the attributes for the SegmentList node
+   * @property {Object|undefined} base
+   *           Contains the attributes for the SegmentBase node
+   */
+
+  /**
+   * Returns all available Segment information contained within the AdaptationSet node
+   *
+   * @param {Node} adaptationSet
+   *        The AdaptationSet node to get Segment information from
+   * @return {SegmentInformation}
+   *         The Segment information contained within the provided AdaptationSet
+   */
+
+  const getSegmentInformation = adaptationSet => {
+    const segmentTemplate = findChildren(adaptationSet, 'SegmentTemplate')[0];
+    const segmentList = findChildren(adaptationSet, 'SegmentList')[0];
+    const segmentUrls = segmentList && findChildren(segmentList, 'SegmentURL').map(s => merge$1({
+      tag: 'SegmentURL'
+    }, parseAttributes(s)));
+    const segmentBase = findChildren(adaptationSet, 'SegmentBase')[0];
+    const segmentTimelineParentNode = segmentList || segmentTemplate;
+    const segmentTimeline = segmentTimelineParentNode && findChildren(segmentTimelineParentNode, 'SegmentTimeline')[0];
+    const segmentInitializationParentNode = segmentList || segmentBase || segmentTemplate;
+    const segmentInitialization = segmentInitializationParentNode && findChildren(segmentInitializationParentNode, 'Initialization')[0]; // SegmentTemplate is handled slightly differently, since it can have both
+    // @initialization and an <Initialization> node.  @initialization can be templated,
+    // while the node can have a url and range specified.  If the <SegmentTemplate> has
+    // both @initialization and an <Initialization> subelement we opt to override with
+    // the node, as this interaction is not defined in the spec.
+
+    const template = segmentTemplate && parseAttributes(segmentTemplate);
+    if (template && segmentInitialization) {
+      template.initialization = segmentInitialization && parseAttributes(segmentInitialization);
+    } else if (template && template.initialization) {
+      // If it is @initialization we convert it to an object since this is the format that
+      // later functions will rely on for the initialization segment.  This is only valid
+      // for <SegmentTemplate>
+      template.initialization = {
+        sourceURL: template.initialization
+      };
+    }
+    const segmentInfo = {
+      template,
+      segmentTimeline: segmentTimeline && findChildren(segmentTimeline, 'S').map(s => parseAttributes(s)),
+      list: segmentList && merge$1(parseAttributes(segmentList), {
+        segmentUrls,
+        initialization: parseAttributes(segmentInitialization)
+      }),
+      base: segmentBase && merge$1(parseAttributes(segmentBase), {
+        initialization: parseAttributes(segmentInitialization)
+      })
+    };
+    Object.keys(segmentInfo).forEach(key => {
+      if (!segmentInfo[key]) {
+        delete segmentInfo[key];
+      }
+    });
+    return segmentInfo;
+  };
+  /**
+   * Contains Segment information and attributes needed to construct a Playlist object
+   * from a Representation
+   *
+   * @typedef {Object} RepresentationInformation
+   * @property {SegmentInformation} segmentInfo
+   *           Segment information for this Representation
+   * @property {Object} attributes
+   *           Inherited attributes for this Representation
+   */
+
+  /**
+   * Maps a Representation node to an object containing Segment information and attributes
+   *
+   * @name inheritBaseUrlsCallback
+   * @function
+   * @param {Node} representation
+   *        Representation node from the mpd
+   * @return {RepresentationInformation}
+   *         Representation information needed to construct a Playlist object
+   */
+
+  /**
+   * Returns a callback for Array.prototype.map for mapping Representation nodes to
+   * Segment information and attributes using inherited BaseURL nodes.
+   *
+   * @param {Object} adaptationSetAttributes
+   *        Contains attributes inherited by the AdaptationSet
+   * @param {Object[]} adaptationSetBaseUrls
+   *        List of objects containing resolved base URLs and attributes
+   *        inherited by the AdaptationSet
+   * @param {SegmentInformation} adaptationSetSegmentInfo
+   *        Contains Segment information for the AdaptationSet
+   * @return {inheritBaseUrlsCallback}
+   *         Callback map function
+   */
+
+  const inheritBaseUrls = (adaptationSetAttributes, adaptationSetBaseUrls, adaptationSetSegmentInfo) => representation => {
+    const repBaseUrlElements = findChildren(representation, 'BaseURL');
+    const repBaseUrls = buildBaseUrls(adaptationSetBaseUrls, repBaseUrlElements);
+    const attributes = merge$1(adaptationSetAttributes, parseAttributes(representation));
+    const representationSegmentInfo = getSegmentInformation(representation);
+    return repBaseUrls.map(baseUrl => {
+      return {
+        segmentInfo: merge$1(adaptationSetSegmentInfo, representationSegmentInfo),
+        attributes: merge$1(attributes, baseUrl)
+      };
+    });
+  };
+  /**
+   * Tranforms a series of content protection nodes to
+   * an object containing pssh data by key system
+   *
+   * @param {Node[]} contentProtectionNodes
+   *        Content protection nodes
+   * @return {Object}
+   *        Object containing pssh data by key system
+   */
+
+  const generateKeySystemInformation = contentProtectionNodes => {
+    return contentProtectionNodes.reduce((acc, node) => {
+      const attributes = parseAttributes(node); // Although it could be argued that according to the UUID RFC spec the UUID string (a-f chars) should be generated
+      // as a lowercase string it also mentions it should be treated as case-insensitive on input. Since the key system
+      // UUIDs in the keySystemsMap are hardcoded as lowercase in the codebase there isn't any reason not to do
+      // .toLowerCase() on the input UUID string from the manifest (at least I could not think of one).
+
+      if (attributes.schemeIdUri) {
+        attributes.schemeIdUri = attributes.schemeIdUri.toLowerCase();
+      }
+      const keySystem = keySystemsMap[attributes.schemeIdUri];
+      if (keySystem) {
+        acc[keySystem] = {
+          attributes
+        };
+        const psshNode = findChildren(node, 'cenc:pssh')[0];
+        if (psshNode) {
+          const pssh = getContent(psshNode);
+          acc[keySystem].pssh = pssh && decodeB64ToUint8Array(pssh);
+        }
+      }
+      return acc;
+    }, {});
+  }; // defined in ANSI_SCTE 214-1 2016
+
+  const parseCaptionServiceMetadata = service => {
+    // 608 captions
+    if (service.schemeIdUri === 'urn:scte:dash:cc:cea-608:2015') {
+      const values = typeof service.value !== 'string' ? [] : service.value.split(';');
+      return values.map(value => {
+        let channel;
+        let language; // default language to value
+
+        language = value;
+        if (/^CC\d=/.test(value)) {
+          [channel, language] = value.split('=');
+        } else if (/^CC\d$/.test(value)) {
+          channel = value;
+        }
+        return {
+          channel,
+          language
+        };
+      });
+    } else if (service.schemeIdUri === 'urn:scte:dash:cc:cea-708:2015') {
+      const values = typeof service.value !== 'string' ? [] : service.value.split(';');
+      return values.map(value => {
+        const flags = {
+          // service or channel number 1-63
+          'channel': undefined,
+          // language is a 3ALPHA per ISO 639.2/B
+          // field is required
+          'language': undefined,
+          // BIT 1/0 or ?
+          // default value is 1, meaning 16:9 aspect ratio, 0 is 4:3, ? is unknown
+          'aspectRatio': 1,
+          // BIT 1/0
+          // easy reader flag indicated the text is tailed to the needs of beginning readers
+          // default 0, or off
+          'easyReader': 0,
+          // BIT 1/0
+          // If 3d metadata is present (CEA-708.1) then 1
+          // default 0
+          '3D': 0
+        };
+        if (/=/.test(value)) {
+          const [channel, opts = ''] = value.split('=');
+          flags.channel = channel;
+          flags.language = value;
+          opts.split(',').forEach(opt => {
+            const [name, val] = opt.split(':');
+            if (name === 'lang') {
+              flags.language = val; // er for easyReadery
+            } else if (name === 'er') {
+              flags.easyReader = Number(val); // war for wide aspect ratio
+            } else if (name === 'war') {
+              flags.aspectRatio = Number(val);
+            } else if (name === '3D') {
+              flags['3D'] = Number(val);
+            }
+          });
+        } else {
+          flags.language = value;
+        }
+        if (flags.channel) {
+          flags.channel = 'SERVICE' + flags.channel;
+        }
+        return flags;
+      });
+    }
+  };
+  /**
+   * A map callback that will parse all event stream data for a collection of periods
+   * DASH ISO_IEC_23009 5.10.2.2
+   * https://dashif-documents.azurewebsites.net/Events/master/event.html#mpd-event-timing
+   *
+   * @param {PeriodInformation} period object containing necessary period information
+   * @return a collection of parsed eventstream event objects
+   */
+
+  const toEventStream = period => {
+    // get and flatten all EventStreams tags and parse attributes and children
+    return flatten(findChildren(period.node, 'EventStream').map(eventStream => {
+      const eventStreamAttributes = parseAttributes(eventStream);
+      const schemeIdUri = eventStreamAttributes.schemeIdUri; // find all Events per EventStream tag and map to return objects
+
+      return findChildren(eventStream, 'Event').map(event => {
+        const eventAttributes = parseAttributes(event);
+        const presentationTime = eventAttributes.presentationTime || 0;
+        const timescale = eventStreamAttributes.timescale || 1;
+        const duration = eventAttributes.duration || 0;
+        const start = presentationTime / timescale + period.attributes.start;
+        return {
+          schemeIdUri,
+          value: eventStreamAttributes.value,
+          id: eventAttributes.id,
+          start,
+          end: start + duration / timescale,
+          messageData: getContent(event) || eventAttributes.messageData,
+          contentEncoding: eventStreamAttributes.contentEncoding,
+          presentationTimeOffset: eventStreamAttributes.presentationTimeOffset || 0
+        };
+      });
+    }));
+  };
+  /**
+   * Maps an AdaptationSet node to a list of Representation information objects
+   *
+   * @name toRepresentationsCallback
+   * @function
+   * @param {Node} adaptationSet
+   *        AdaptationSet node from the mpd
+   * @return {RepresentationInformation[]}
+   *         List of objects containing Representaion information
+   */
+
+  /**
+   * Returns a callback for Array.prototype.map for mapping AdaptationSet nodes to a list of
+   * Representation information objects
+   *
+   * @param {Object} periodAttributes
+   *        Contains attributes inherited by the Period
+   * @param {Object[]} periodBaseUrls
+   *        Contains list of objects with resolved base urls and attributes
+   *        inherited by the Period
+   * @param {string[]} periodSegmentInfo
+   *        Contains Segment Information at the period level
+   * @return {toRepresentationsCallback}
+   *         Callback map function
+   */
+
+  const toRepresentations = (periodAttributes, periodBaseUrls, periodSegmentInfo) => adaptationSet => {
+    const adaptationSetAttributes = parseAttributes(adaptationSet);
+    const adaptationSetBaseUrls = buildBaseUrls(periodBaseUrls, findChildren(adaptationSet, 'BaseURL'));
+    const role = findChildren(adaptationSet, 'Role')[0];
+    const roleAttributes = {
+      role: parseAttributes(role)
+    };
+    let attrs = merge$1(periodAttributes, adaptationSetAttributes, roleAttributes);
+    const accessibility = findChildren(adaptationSet, 'Accessibility')[0];
+    const captionServices = parseCaptionServiceMetadata(parseAttributes(accessibility));
+    if (captionServices) {
+      attrs = merge$1(attrs, {
+        captionServices
+      });
+    }
+    const label = findChildren(adaptationSet, 'Label')[0];
+    if (label && label.childNodes.length) {
+      const labelVal = label.childNodes[0].nodeValue.trim();
+      attrs = merge$1(attrs, {
+        label: labelVal
+      });
+    }
+    const contentProtection = generateKeySystemInformation(findChildren(adaptationSet, 'ContentProtection'));
+    if (Object.keys(contentProtection).length) {
+      attrs = merge$1(attrs, {
+        contentProtection
+      });
+    }
+    const segmentInfo = getSegmentInformation(adaptationSet);
+    const representations = findChildren(adaptationSet, 'Representation');
+    const adaptationSetSegmentInfo = merge$1(periodSegmentInfo, segmentInfo);
+    return flatten(representations.map(inheritBaseUrls(attrs, adaptationSetBaseUrls, adaptationSetSegmentInfo)));
+  };
+  /**
+   * Contains all period information for mapping nodes onto adaptation sets.
+   *
+   * @typedef {Object} PeriodInformation
+   * @property {Node} period.node
+   *           Period node from the mpd
+   * @property {Object} period.attributes
+   *           Parsed period attributes from node plus any added
+   */
+
+  /**
+   * Maps a PeriodInformation object to a list of Representation information objects for all
+   * AdaptationSet nodes contained within the Period.
+   *
+   * @name toAdaptationSetsCallback
+   * @function
+   * @param {PeriodInformation} period
+   *        Period object containing necessary period information
+   * @param {number} periodStart
+   *        Start time of the Period within the mpd
+   * @return {RepresentationInformation[]}
+   *         List of objects containing Representaion information
+   */
+
+  /**
+   * Returns a callback for Array.prototype.map for mapping Period nodes to a list of
+   * Representation information objects
+   *
+   * @param {Object} mpdAttributes
+   *        Contains attributes inherited by the mpd
+    * @param {Object[]} mpdBaseUrls
+   *        Contains list of objects with resolved base urls and attributes
+   *        inherited by the mpd
+   * @return {toAdaptationSetsCallback}
+   *         Callback map function
+   */
+
+  const toAdaptationSets = (mpdAttributes, mpdBaseUrls) => (period, index) => {
+    const periodBaseUrls = buildBaseUrls(mpdBaseUrls, findChildren(period.node, 'BaseURL'));
+    const periodAttributes = merge$1(mpdAttributes, {
+      periodStart: period.attributes.start
+    });
+    if (typeof period.attributes.duration === 'number') {
+      periodAttributes.periodDuration = period.attributes.duration;
+    }
+    const adaptationSets = findChildren(period.node, 'AdaptationSet');
+    const periodSegmentInfo = getSegmentInformation(period.node);
+    return flatten(adaptationSets.map(toRepresentations(periodAttributes, periodBaseUrls, periodSegmentInfo)));
+  };
+  /**
+   * Tranforms an array of content steering nodes into an object
+   * containing CDN content steering information from the MPD manifest.
+   *
+   * For more information on the DASH spec for Content Steering parsing, see:
+   * https://dashif.org/docs/DASH-IF-CTS-00XX-Content-Steering-Community-Review.pdf
+   *
+   * @param {Node[]} contentSteeringNodes
+   *        Content steering nodes
+   * @param {Function} eventHandler
+   *        The event handler passed into the parser options to handle warnings
+   * @return {Object}
+   *        Object containing content steering data
+   */
+
+  const generateContentSteeringInformation = (contentSteeringNodes, eventHandler) => {
+    // If there are more than one ContentSteering tags, throw an error
+    if (contentSteeringNodes.length > 1) {
+      eventHandler({
+        type: 'warn',
+        message: 'The MPD manifest should contain no more than one ContentSteering tag'
+      });
+    } // Return a null value if there are no ContentSteering tags
+
+    if (!contentSteeringNodes.length) {
+      return null;
+    }
+    const infoFromContentSteeringTag = merge$1({
+      serverURL: getContent(contentSteeringNodes[0])
+    }, parseAttributes(contentSteeringNodes[0])); // Converts `queryBeforeStart` to a boolean, as well as setting the default value
+    // to `false` if it doesn't exist
+
+    infoFromContentSteeringTag.queryBeforeStart = infoFromContentSteeringTag.queryBeforeStart === 'true';
+    return infoFromContentSteeringTag;
+  };
+  /**
+   * Gets Period@start property for a given period.
+   *
+   * @param {Object} options
+   *        Options object
+   * @param {Object} options.attributes
+   *        Period attributes
+   * @param {Object} [options.priorPeriodAttributes]
+   *        Prior period attributes (if prior period is available)
+   * @param {string} options.mpdType
+   *        The MPD@type these periods came from
+   * @return {number|null}
+   *         The period start, or null if it's an early available period or error
+   */
+
+  const getPeriodStart = ({
+    attributes,
+    priorPeriodAttributes,
+    mpdType
+  }) => {
+    // Summary of period start time calculation from DASH spec section 5.3.2.1
+    //
+    // A period's start is the first period's start + time elapsed after playing all
+    // prior periods to this one. Periods continue one after the other in time (without
+    // gaps) until the end of the presentation.
+    //
+    // The value of Period@start should be:
+    // 1. if Period@start is present: value of Period@start
+    // 2. if previous period exists and it has @duration: previous Period@start +
+    //    previous Period@duration
+    // 3. if this is first period and MPD@type is 'static': 0
+    // 4. in all other cases, consider the period an "early available period" (note: not
+    //    currently supported)
+    // (1)
+    if (typeof attributes.start === 'number') {
+      return attributes.start;
+    } // (2)
+
+    if (priorPeriodAttributes && typeof priorPeriodAttributes.start === 'number' && typeof priorPeriodAttributes.duration === 'number') {
+      return priorPeriodAttributes.start + priorPeriodAttributes.duration;
+    } // (3)
+
+    if (!priorPeriodAttributes && mpdType === 'static') {
+      return 0;
+    } // (4)
+    // There is currently no logic for calculating the Period@start value if there is
+    // no Period@start or prior Period@start and Period@duration available. This is not made
+    // explicit by the DASH interop guidelines or the DASH spec, however, since there's
+    // nothing about any other resolution strategies, it's implied. Thus, this case should
+    // be considered an early available period, or error, and null should suffice for both
+    // of those cases.
+
+    return null;
+  };
+  /**
+   * Traverses the mpd xml tree to generate a list of Representation information objects
+   * that have inherited attributes from parent nodes
+   *
+   * @param {Node} mpd
+   *        The root node of the mpd
+   * @param {Object} options
+   *        Available options for inheritAttributes
+   * @param {string} options.manifestUri
+   *        The uri source of the mpd
+   * @param {number} options.NOW
+   *        Current time per DASH IOP.  Default is current time in ms since epoch
+   * @param {number} options.clientOffset
+   *        Client time difference from NOW (in milliseconds)
+   * @return {RepresentationInformation[]}
+   *         List of objects containing Representation information
+   */
+
+  const inheritAttributes = (mpd, options = {}) => {
+    const {
+      manifestUri = '',
+      NOW = Date.now(),
+      clientOffset = 0,
+      // TODO: For now, we are expecting an eventHandler callback function
+      // to be passed into the mpd parser as an option.
+      // In the future, we should enable stream parsing by using the Stream class from vhs-utils.
+      // This will support new features including a standardized event handler.
+      // See the m3u8 parser for examples of how stream parsing is currently used for HLS parsing.
+      // https://github.com/videojs/vhs-utils/blob/88d6e10c631e57a5af02c5a62bc7376cd456b4f5/src/stream.js#L9
+      eventHandler = function () {}
+    } = options;
+    const periodNodes = findChildren(mpd, 'Period');
+    if (!periodNodes.length) {
+      throw new Error(errors.INVALID_NUMBER_OF_PERIOD);
+    }
+    const locations = findChildren(mpd, 'Location');
+    const mpdAttributes = parseAttributes(mpd);
+    const mpdBaseUrls = buildBaseUrls([{
+      baseUrl: manifestUri
+    }], findChildren(mpd, 'BaseURL'));
+    const contentSteeringNodes = findChildren(mpd, 'ContentSteering'); // See DASH spec section 5.3.1.2, Semantics of MPD element. Default type to 'static'.
+
+    mpdAttributes.type = mpdAttributes.type || 'static';
+    mpdAttributes.sourceDuration = mpdAttributes.mediaPresentationDuration || 0;
+    mpdAttributes.NOW = NOW;
+    mpdAttributes.clientOffset = clientOffset;
+    if (locations.length) {
+      mpdAttributes.locations = locations.map(getContent);
+    }
+    const periods = []; // Since toAdaptationSets acts on individual periods right now, the simplest approach to
+    // adding properties that require looking at prior periods is to parse attributes and add
+    // missing ones before toAdaptationSets is called. If more such properties are added, it
+    // may be better to refactor toAdaptationSets.
+
+    periodNodes.forEach((node, index) => {
+      const attributes = parseAttributes(node); // Use the last modified prior period, as it may contain added information necessary
+      // for this period.
+
+      const priorPeriod = periods[index - 1];
+      attributes.start = getPeriodStart({
+        attributes,
+        priorPeriodAttributes: priorPeriod ? priorPeriod.attributes : null,
+        mpdType: mpdAttributes.type
+      });
+      periods.push({
+        node,
+        attributes
+      });
+    });
+    return {
+      locations: mpdAttributes.locations,
+      contentSteeringInfo: generateContentSteeringInformation(contentSteeringNodes, eventHandler),
+      // TODO: There are occurences where this `representationInfo` array contains undesired
+      // duplicates. This generally occurs when there are multiple BaseURL nodes that are
+      // direct children of the MPD node. When we attempt to resolve URLs from a combination of the
+      // parent BaseURL and a child BaseURL, and the value does not resolve,
+      // we end up returning the child BaseURL multiple times.
+      // We need to determine a way to remove these duplicates in a safe way.
+      // See: https://github.com/videojs/mpd-parser/pull/17#discussion_r162750527
+      representationInfo: flatten(periods.map(toAdaptationSets(mpdAttributes, mpdBaseUrls))),
+      eventStream: flatten(periods.map(toEventStream))
+    };
+  };
+  const stringToMpdXml = manifestString => {
+    if (manifestString === '') {
+      throw new Error(errors.DASH_EMPTY_MANIFEST);
+    }
+    const parser = new DOMParser();
+    let xml;
+    let mpd;
+    try {
+      xml = parser.parseFromString(manifestString, 'application/xml');
+      mpd = xml && xml.documentElement.tagName === 'MPD' ? xml.documentElement : null;
+    } catch (e) {// ie 11 throws on invalid xml
+    }
+    if (!mpd || mpd && mpd.getElementsByTagName('parsererror').length > 0) {
+      throw new Error(errors.DASH_INVALID_XML);
+    }
+    return mpd;
+  };
+
+  /**
+   * Parses the manifest for a UTCTiming node, returning the nodes attributes if found
+   *
+   * @param {string} mpd
+   *        XML string of the MPD manifest
+   * @return {Object|null}
+   *         Attributes of UTCTiming node specified in the manifest. Null if none found
+   */
+
+  const parseUTCTimingScheme = mpd => {
+    const UTCTimingNode = findChildren(mpd, 'UTCTiming')[0];
+    if (!UTCTimingNode) {
+      return null;
+    }
+    const attributes = parseAttributes(UTCTimingNode);
+    switch (attributes.schemeIdUri) {
+      case 'urn:mpeg:dash:utc:http-head:2014':
+      case 'urn:mpeg:dash:utc:http-head:2012':
+        attributes.method = 'HEAD';
+        break;
+      case 'urn:mpeg:dash:utc:http-xsdate:2014':
+      case 'urn:mpeg:dash:utc:http-iso:2014':
+      case 'urn:mpeg:dash:utc:http-xsdate:2012':
+      case 'urn:mpeg:dash:utc:http-iso:2012':
+        attributes.method = 'GET';
+        break;
+      case 'urn:mpeg:dash:utc:direct:2014':
+      case 'urn:mpeg:dash:utc:direct:2012':
+        attributes.method = 'DIRECT';
+        attributes.value = Date.parse(attributes.value);
+        break;
+      case 'urn:mpeg:dash:utc:http-ntp:2014':
+      case 'urn:mpeg:dash:utc:ntp:2014':
+      case 'urn:mpeg:dash:utc:sntp:2014':
+      default:
+        throw new Error(errors.UNSUPPORTED_UTC_TIMING_SCHEME);
+    }
+    return attributes;
+  };
+  /*
+   * Given a DASH manifest string and options, parses the DASH manifest into an object in the
+   * form outputed by m3u8-parser and accepted by videojs/http-streaming.
+   *
+   * For live DASH manifests, if `previousManifest` is provided in options, then the newly
+   * parsed DASH manifest will have its media sequence and discontinuity sequence values
+   * updated to reflect its position relative to the prior manifest.
+   *
+   * @param {string} manifestString - the DASH manifest as a string
+   * @param {options} [options] - any options
+   *
+   * @return {Object} the manifest object
+   */
+
+  const parse = (manifestString, options = {}) => {
+    const parsedManifestInfo = inheritAttributes(stringToMpdXml(manifestString), options);
+    const playlists = toPlaylists(parsedManifestInfo.representationInfo);
+    return toM3u8({
+      dashPlaylists: playlists,
+      locations: parsedManifestInfo.locations,
+      contentSteering: parsedManifestInfo.contentSteeringInfo,
+      sidxMapping: options.sidxMapping,
+      previousManifest: options.previousManifest,
+      eventStream: parsedManifestInfo.eventStream
+    });
+  };
+  /**
+   * Parses the manifest for a UTCTiming node, returning the nodes attributes if found
+   *
+   * @param {string} manifestString
+   *        XML string of the MPD manifest
+   * @return {Object|null}
+   *         Attributes of UTCTiming node specified in the manifest. Null if none found
+   */
+
+  const parseUTCTiming = manifestString => parseUTCTimingScheme(stringToMpdXml(manifestString));
+
+  var MAX_UINT32 = Math.pow(2, 32);
+  var getUint64$1 = function (uint8) {
+    var dv = new DataView(uint8.buffer, uint8.byteOffset, uint8.byteLength);
+    var value;
+    if (dv.getBigUint64) {
+      value = dv.getBigUint64(0);
+      if (value < Number.MAX_SAFE_INTEGER) {
+        return Number(value);
+      }
+      return value;
+    }
+    return dv.getUint32(0) * MAX_UINT32 + dv.getUint32(4);
+  };
+  var numbers = {
+    getUint64: getUint64$1,
+    MAX_UINT32: MAX_UINT32
+  };
+
+  var getUint64 = numbers.getUint64;
+  var parseSidx = function (data) {
+    var view = new DataView(data.buffer, data.byteOffset, data.byteLength),
+      result = {
+        version: data[0],
+        flags: new Uint8Array(data.subarray(1, 4)),
+        references: [],
+        referenceId: view.getUint32(4),
+        timescale: view.getUint32(8)
+      },
+      i = 12;
+    if (result.version === 0) {
+      result.earliestPresentationTime = view.getUint32(i);
+      result.firstOffset = view.getUint32(i + 4);
+      i += 8;
+    } else {
+      // read 64 bits
+      result.earliestPresentationTime = getUint64(data.subarray(i));
+      result.firstOffset = getUint64(data.subarray(i + 8));
+      i += 16;
+    }
+    i += 2; // reserved
+
+    var referenceCount = view.getUint16(i);
+    i += 2; // start of references
+
+    for (; referenceCount > 0; i += 12, referenceCount--) {
+      result.references.push({
+        referenceType: (data[i] & 0x80) >>> 7,
+        referencedSize: view.getUint32(i) & 0x7FFFFFFF,
+        subsegmentDuration: view.getUint32(i + 4),
+        startsWithSap: !!(data[i + 8] & 0x80),
+        sapType: (data[i + 8] & 0x70) >>> 4,
+        sapDeltaTime: view.getUint32(i + 8) & 0x0FFFFFFF
+      });
+    }
+    return result;
+  };
+  var parseSidx_1 = parseSidx;
+
+  var ID3 = toUint8([0x49, 0x44, 0x33]);
+  var getId3Size = function getId3Size(bytes, offset) {
+    if (offset === void 0) {
+      offset = 0;
+    }
+    bytes = toUint8(bytes);
+    var flags = bytes[offset + 5];
+    var returnSize = bytes[offset + 6] << 21 | bytes[offset + 7] << 14 | bytes[offset + 8] << 7 | bytes[offset + 9];
+    var footerPresent = (flags & 16) >> 4;
+    if (footerPresent) {
+      return returnSize + 20;
+    }
+    return returnSize + 10;
+  };
+  var getId3Offset = function getId3Offset(bytes, offset) {
+    if (offset === void 0) {
+      offset = 0;
+    }
+    bytes = toUint8(bytes);
+    if (bytes.length - offset < 10 || !bytesMatch(bytes, ID3, {
+      offset: offset
+    })) {
+      return offset;
+    }
+    offset += getId3Size(bytes, offset); // recursive check for id3 tags as some files
+    // have multiple ID3 tag sections even though
+    // they should not.
+
+    return getId3Offset(bytes, offset);
+  };
+
+  var normalizePath$1 = function normalizePath(path) {
+    if (typeof path === 'string') {
+      return stringToBytes(path);
+    }
+    if (typeof path === 'number') {
+      return path;
+    }
+    return path;
+  };
+  var normalizePaths$1 = function normalizePaths(paths) {
+    if (!Array.isArray(paths)) {
+      return [normalizePath$1(paths)];
+    }
+    return paths.map(function (p) {
+      return normalizePath$1(p);
+    });
+  };
+  /**
+   * find any number of boxes by name given a path to it in an iso bmff
+   * such as mp4.
+   *
+   * @param {TypedArray} bytes
+   *        bytes for the iso bmff to search for boxes in
+   *
+   * @param {Uint8Array[]|string[]|string|Uint8Array} name
+   *        An array of paths or a single path representing the name
+   *        of boxes to search through in bytes. Paths may be
+   *        uint8 (character codes) or strings.
+   *
+   * @param {boolean} [complete=false]
+   *        Should we search only for complete boxes on the final path.
+   *        This is very useful when you do not want to get back partial boxes
+   *        in the case of streaming files.
+   *
+   * @return {Uint8Array[]}
+   *         An array of the end paths that we found.
+   */
+
+  var findBox = function findBox(bytes, paths, complete) {
+    if (complete === void 0) {
+      complete = false;
+    }
+    paths = normalizePaths$1(paths);
+    bytes = toUint8(bytes);
+    var results = [];
+    if (!paths.length) {
+      // short-circuit the search for empty paths
+      return results;
+    }
+    var i = 0;
+    while (i < bytes.length) {
+      var size = (bytes[i] << 24 | bytes[i + 1] << 16 | bytes[i + 2] << 8 | bytes[i + 3]) >>> 0;
+      var type = bytes.subarray(i + 4, i + 8); // invalid box format.
+
+      if (size === 0) {
+        break;
+      }
+      var end = i + size;
+      if (end > bytes.length) {
+        // this box is bigger than the number of bytes we have
+        // and complete is set, we cannot find any more boxes.
+        if (complete) {
+          break;
+        }
+        end = bytes.length;
+      }
+      var data = bytes.subarray(i + 8, end);
+      if (bytesMatch(type, paths[0])) {
+        if (paths.length === 1) {
+          // this is the end of the path and we've found the box we were
+          // looking for
+          results.push(data);
+        } else {
+          // recursively search for the next box along the path
+          results.push.apply(results, findBox(data, paths.slice(1), complete));
+        }
+      }
+      i = end;
+    } // we've finished searching all of bytes
+
+    return results;
+  };
+
+  // https://matroska-org.github.io/libebml/specs.html
+  // https://www.matroska.org/technical/elements.html
+  // https://www.webmproject.org/docs/container/
+
+  var EBML_TAGS = {
+    EBML: toUint8([0x1A, 0x45, 0xDF, 0xA3]),
+    DocType: toUint8([0x42, 0x82]),
+    Segment: toUint8([0x18, 0x53, 0x80, 0x67]),
+    SegmentInfo: toUint8([0x15, 0x49, 0xA9, 0x66]),
+    Tracks: toUint8([0x16, 0x54, 0xAE, 0x6B]),
+    Track: toUint8([0xAE]),
+    TrackNumber: toUint8([0xd7]),
+    DefaultDuration: toUint8([0x23, 0xe3, 0x83]),
+    TrackEntry: toUint8([0xAE]),
+    TrackType: toUint8([0x83]),
+    FlagDefault: toUint8([0x88]),
+    CodecID: toUint8([0x86]),
+    CodecPrivate: toUint8([0x63, 0xA2]),
+    VideoTrack: toUint8([0xe0]),
+    AudioTrack: toUint8([0xe1]),
+    // Not used yet, but will be used for live webm/mkv
+    // see https://www.matroska.org/technical/basics.html#block-structure
+    // see https://www.matroska.org/technical/basics.html#simpleblock-structure
+    Cluster: toUint8([0x1F, 0x43, 0xB6, 0x75]),
+    Timestamp: toUint8([0xE7]),
+    TimestampScale: toUint8([0x2A, 0xD7, 0xB1]),
+    BlockGroup: toUint8([0xA0]),
+    BlockDuration: toUint8([0x9B]),
+    Block: toUint8([0xA1]),
+    SimpleBlock: toUint8([0xA3])
+  };
+  /**
+   * This is a simple table to determine the length
+   * of things in ebml. The length is one based (starts at 1,
+   * rather than zero) and for every zero bit before a one bit
+   * we add one to length. We also need this table because in some
+   * case we have to xor all the length bits from another value.
+   */
+
+  var LENGTH_TABLE = [128, 64, 32, 16, 8, 4, 2, 1];
+  var getLength = function getLength(byte) {
+    var len = 1;
+    for (var i = 0; i < LENGTH_TABLE.length; i++) {
+      if (byte & LENGTH_TABLE[i]) {
+        break;
+      }
+      len++;
+    }
+    return len;
+  }; // length in ebml is stored in the first 4 to 8 bits
+  // of the first byte. 4 for the id length and 8 for the
+  // data size length. Length is measured by converting the number to binary
+  // then 1 + the number of zeros before a 1 is encountered starting
+  // from the left.
+
+  var getvint = function getvint(bytes, offset, removeLength, signed) {
+    if (removeLength === void 0) {
+      removeLength = true;
+    }
+    if (signed === void 0) {
+      signed = false;
+    }
+    var length = getLength(bytes[offset]);
+    var valueBytes = bytes.subarray(offset, offset + length); // NOTE that we do **not** subarray here because we need to copy these bytes
+    // as they will be modified below to remove the dataSizeLen bits and we do not
+    // want to modify the original data. normally we could just call slice on
+    // uint8array but ie 11 does not support that...
+
+    if (removeLength) {
+      valueBytes = Array.prototype.slice.call(bytes, offset, offset + length);
+      valueBytes[0] ^= LENGTH_TABLE[length - 1];
+    }
+    return {
+      length: length,
+      value: bytesToNumber(valueBytes, {
+        signed: signed
+      }),
+      bytes: valueBytes
+    };
+  };
+  var normalizePath = function normalizePath(path) {
+    if (typeof path === 'string') {
+      return path.match(/.{1,2}/g).map(function (p) {
+        return normalizePath(p);
+      });
+    }
+    if (typeof path === 'number') {
+      return numberToBytes(path);
+    }
+    return path;
+  };
+  var normalizePaths = function normalizePaths(paths) {
+    if (!Array.isArray(paths)) {
+      return [normalizePath(paths)];
+    }
+    return paths.map(function (p) {
+      return normalizePath(p);
+    });
+  };
+  var getInfinityDataSize = function getInfinityDataSize(id, bytes, offset) {
+    if (offset >= bytes.length) {
+      return bytes.length;
+    }
+    var innerid = getvint(bytes, offset, false);
+    if (bytesMatch(id.bytes, innerid.bytes)) {
+      return offset;
+    }
+    var dataHeader = getvint(bytes, offset + innerid.length);
+    return getInfinityDataSize(id, bytes, offset + dataHeader.length + dataHeader.value + innerid.length);
+  };
+  /**
+   * Notes on the EBLM format.
+   *
+   * EBLM uses "vints" tags. Every vint tag contains
+   * two parts
+   *
+   * 1. The length from the first byte. You get this by
+   *    converting the byte to binary and counting the zeros
+   *    before a 1. Then you add 1 to that. Examples
+   *    00011111 = length 4 because there are 3 zeros before a 1.
+   *    00100000 = length 3 because there are 2 zeros before a 1.
+   *    00000011 = length 7 because there are 6 zeros before a 1.
+   *
+   * 2. The bits used for length are removed from the first byte
+   *    Then all the bytes are merged into a value. NOTE: this
+   *    is not the case for id ebml tags as there id includes
+   *    length bits.
+   *
+   */
+
+  var findEbml = function findEbml(bytes, paths) {
+    paths = normalizePaths(paths);
+    bytes = toUint8(bytes);
+    var results = [];
+    if (!paths.length) {
+      return results;
+    }
+    var i = 0;
+    while (i < bytes.length) {
+      var id = getvint(bytes, i, false);
+      var dataHeader = getvint(bytes, i + id.length);
+      var dataStart = i + id.length + dataHeader.length; // dataSize is unknown or this is a live stream
+
+      if (dataHeader.value === 0x7f) {
+        dataHeader.value = getInfinityDataSize(id, bytes, dataStart);
+        if (dataHeader.value !== bytes.length) {
+          dataHeader.value -= dataStart;
+        }
+      }
+      var dataEnd = dataStart + dataHeader.value > bytes.length ? bytes.length : dataStart + dataHeader.value;
+      var data = bytes.subarray(dataStart, dataEnd);
+      if (bytesMatch(paths[0], id.bytes)) {
+        if (paths.length === 1) {
+          // this is the end of the paths and we've found the tag we were
+          // looking for
+          results.push(data);
+        } else {
+          // recursively search for the next tag inside of the data
+          // of this one
+          results = results.concat(findEbml(data, paths.slice(1)));
+        }
+      }
+      var totalLength = id.length + dataHeader.length + data.length; // move past this tag entirely, we are not looking for it
+
+      i += totalLength;
+    }
+    return results;
+  }; // see https://www.matroska.org/technical/basics.html#block-structure
+
+  var NAL_TYPE_ONE = toUint8([0x00, 0x00, 0x00, 0x01]);
+  var NAL_TYPE_TWO = toUint8([0x00, 0x00, 0x01]);
+  var EMULATION_PREVENTION = toUint8([0x00, 0x00, 0x03]);
+  /**
+   * Expunge any "Emulation Prevention" bytes from a "Raw Byte
+   * Sequence Payload"
+   *
+   * @param data {Uint8Array} the bytes of a RBSP from a NAL
+   * unit
+   * @return {Uint8Array} the RBSP without any Emulation
+   * Prevention Bytes
+   */
+
+  var discardEmulationPreventionBytes = function discardEmulationPreventionBytes(bytes) {
+    var positions = [];
+    var i = 1; // Find all `Emulation Prevention Bytes`
+
+    while (i < bytes.length - 2) {
+      if (bytesMatch(bytes.subarray(i, i + 3), EMULATION_PREVENTION)) {
+        positions.push(i + 2);
+        i++;
+      }
+      i++;
+    } // If no Emulation Prevention Bytes were found just return the original
+    // array
+
+    if (positions.length === 0) {
+      return bytes;
+    } // Create a new array to hold the NAL unit data
+
+    var newLength = bytes.length - positions.length;
+    var newData = new Uint8Array(newLength);
+    var sourceIndex = 0;
+    for (i = 0; i < newLength; sourceIndex++, i++) {
+      if (sourceIndex === positions[0]) {
+        // Skip this byte
+        sourceIndex++; // Remove this position index
+
+        positions.shift();
+      }
+      newData[i] = bytes[sourceIndex];
+    }
+    return newData;
+  };
+  var findNal = function findNal(bytes, dataType, types, nalLimit) {
+    if (nalLimit === void 0) {
+      nalLimit = Infinity;
+    }
+    bytes = toUint8(bytes);
+    types = [].concat(types);
+    var i = 0;
+    var nalStart;
+    var nalsFound = 0; // keep searching until:
+    // we reach the end of bytes
+    // we reach the maximum number of nals they want to seach
+    // NOTE: that we disregard nalLimit when we have found the start
+    // of the nal we want so that we can find the end of the nal we want.
+
+    while (i < bytes.length && (nalsFound < nalLimit || nalStart)) {
+      var nalOffset = void 0;
+      if (bytesMatch(bytes.subarray(i), NAL_TYPE_ONE)) {
+        nalOffset = 4;
+      } else if (bytesMatch(bytes.subarray(i), NAL_TYPE_TWO)) {
+        nalOffset = 3;
+      } // we are unsynced,
+      // find the next nal unit
+
+      if (!nalOffset) {
+        i++;
+        continue;
+      }
+      nalsFound++;
+      if (nalStart) {
+        return discardEmulationPreventionBytes(bytes.subarray(nalStart, i));
+      }
+      var nalType = void 0;
+      if (dataType === 'h264') {
+        nalType = bytes[i + nalOffset] & 0x1f;
+      } else if (dataType === 'h265') {
+        nalType = bytes[i + nalOffset] >> 1 & 0x3f;
+      }
+      if (types.indexOf(nalType) !== -1) {
+        nalStart = i + nalOffset;
+      } // nal header is 1 length for h264, and 2 for h265
+
+      i += nalOffset + (dataType === 'h264' ? 1 : 2);
+    }
+    return bytes.subarray(0, 0);
+  };
+  var findH264Nal = function findH264Nal(bytes, type, nalLimit) {
+    return findNal(bytes, 'h264', type, nalLimit);
+  };
+  var findH265Nal = function findH265Nal(bytes, type, nalLimit) {
+    return findNal(bytes, 'h265', type, nalLimit);
+  };
+
+  var CONSTANTS = {
+    // "webm" string literal in hex
+    'webm': toUint8([0x77, 0x65, 0x62, 0x6d]),
+    // "matroska" string literal in hex
+    'matroska': toUint8([0x6d, 0x61, 0x74, 0x72, 0x6f, 0x73, 0x6b, 0x61]),
+    // "fLaC" string literal in hex
+    'flac': toUint8([0x66, 0x4c, 0x61, 0x43]),
+    // "OggS" string literal in hex
+    'ogg': toUint8([0x4f, 0x67, 0x67, 0x53]),
+    // ac-3 sync byte, also works for ec-3 as that is simply a codec
+    // of ac-3
+    'ac3': toUint8([0x0b, 0x77]),
+    // "RIFF" string literal in hex used for wav and avi
+    'riff': toUint8([0x52, 0x49, 0x46, 0x46]),
+    // "AVI" string literal in hex
+    'avi': toUint8([0x41, 0x56, 0x49]),
+    // "WAVE" string literal in hex
+    'wav': toUint8([0x57, 0x41, 0x56, 0x45]),
+    // "ftyp3g" string literal in hex
+    '3gp': toUint8([0x66, 0x74, 0x79, 0x70, 0x33, 0x67]),
+    // "ftyp" string literal in hex
+    'mp4': toUint8([0x66, 0x74, 0x79, 0x70]),
+    // "styp" string literal in hex
+    'fmp4': toUint8([0x73, 0x74, 0x79, 0x70]),
+    // "ftypqt" string literal in hex
+    'mov': toUint8([0x66, 0x74, 0x79, 0x70, 0x71, 0x74]),
+    // moov string literal in hex
+    'moov': toUint8([0x6D, 0x6F, 0x6F, 0x76]),
+    // moof string literal in hex
+    'moof': toUint8([0x6D, 0x6F, 0x6F, 0x66])
+  };
+  var _isLikely = {
+    aac: function aac(bytes) {
+      var offset = getId3Offset(bytes);
+      return bytesMatch(bytes, [0xFF, 0x10], {
+        offset: offset,
+        mask: [0xFF, 0x16]
+      });
+    },
+    mp3: function mp3(bytes) {
+      var offset = getId3Offset(bytes);
+      return bytesMatch(bytes, [0xFF, 0x02], {
+        offset: offset,
+        mask: [0xFF, 0x06]
+      });
+    },
+    webm: function webm(bytes) {
+      var docType = findEbml(bytes, [EBML_TAGS.EBML, EBML_TAGS.DocType])[0]; // check if DocType EBML tag is webm
+
+      return bytesMatch(docType, CONSTANTS.webm);
+    },
+    mkv: function mkv(bytes) {
+      var docType = findEbml(bytes, [EBML_TAGS.EBML, EBML_TAGS.DocType])[0]; // check if DocType EBML tag is matroska
+
+      return bytesMatch(docType, CONSTANTS.matroska);
+    },
+    mp4: function mp4(bytes) {
+      // if this file is another base media file format, it is not mp4
+      if (_isLikely['3gp'](bytes) || _isLikely.mov(bytes)) {
+        return false;
+      } // if this file starts with a ftyp or styp box its mp4
+
+      if (bytesMatch(bytes, CONSTANTS.mp4, {
+        offset: 4
+      }) || bytesMatch(bytes, CONSTANTS.fmp4, {
+        offset: 4
+      })) {
+        return true;
+      } // if this file starts with a moof/moov box its mp4
+
+      if (bytesMatch(bytes, CONSTANTS.moof, {
+        offset: 4
+      }) || bytesMatch(bytes, CONSTANTS.moov, {
+        offset: 4
+      })) {
+        return true;
+      }
+    },
+    mov: function mov(bytes) {
+      return bytesMatch(bytes, CONSTANTS.mov, {
+        offset: 4
+      });
+    },
+    '3gp': function gp(bytes) {
+      return bytesMatch(bytes, CONSTANTS['3gp'], {
+        offset: 4
+      });
+    },
+    ac3: function ac3(bytes) {
+      var offset = getId3Offset(bytes);
+      return bytesMatch(bytes, CONSTANTS.ac3, {
+        offset: offset
+      });
+    },
+    ts: function ts(bytes) {
+      if (bytes.length < 189 && bytes.length >= 1) {
+        return bytes[0] === 0x47;
+      }
+      var i = 0; // check the first 376 bytes for two matching sync bytes
+
+      while (i + 188 < bytes.length && i < 188) {
+        if (bytes[i] === 0x47 && bytes[i + 188] === 0x47) {
+          return true;
+        }
+        i += 1;
+      }
+      return false;
+    },
+    flac: function flac(bytes) {
+      var offset = getId3Offset(bytes);
+      return bytesMatch(bytes, CONSTANTS.flac, {
+        offset: offset
+      });
+    },
+    ogg: function ogg(bytes) {
+      return bytesMatch(bytes, CONSTANTS.ogg);
+    },
+    avi: function avi(bytes) {
+      return bytesMatch(bytes, CONSTANTS.riff) && bytesMatch(bytes, CONSTANTS.avi, {
+        offset: 8
+      });
+    },
+    wav: function wav(bytes) {
+      return bytesMatch(bytes, CONSTANTS.riff) && bytesMatch(bytes, CONSTANTS.wav, {
+        offset: 8
+      });
+    },
+    'h264': function h264(bytes) {
+      // find seq_parameter_set_rbsp
+      return findH264Nal(bytes, 7, 3).length;
+    },
+    'h265': function h265(bytes) {
+      // find video_parameter_set_rbsp or seq_parameter_set_rbsp
+      return findH265Nal(bytes, [32, 33], 3).length;
+    }
+  }; // get all the isLikely functions
+  // but make sure 'ts' is above h264 and h265
+  // but below everything else as it is the least specific
+
+  var isLikelyTypes = Object.keys(_isLikely) // remove ts, h264, h265
+  .filter(function (t) {
+    return t !== 'ts' && t !== 'h264' && t !== 'h265';
+  }) // add it back to the bottom
+  .concat(['ts', 'h264', 'h265']); // make sure we are dealing with uint8 data.
+
+  isLikelyTypes.forEach(function (type) {
+    var isLikelyFn = _isLikely[type];
+    _isLikely[type] = function (bytes) {
+      return isLikelyFn(toUint8(bytes));
+    };
+  }); // export after wrapping
+
+  var isLikely = _isLikely; // A useful list of file signatures can be found here
+  // https://en.wikipedia.org/wiki/List_of_file_signatures
+
+  var detectContainerForBytes = function detectContainerForBytes(bytes) {
+    bytes = toUint8(bytes);
+    for (var i = 0; i < isLikelyTypes.length; i++) {
+      var type = isLikelyTypes[i];
+      if (isLikely[type](bytes)) {
+        return type;
+      }
+    }
+    return '';
+  }; // fmp4 is not a container
+
+  var isLikelyFmp4MediaSegment = function isLikelyFmp4MediaSegment(bytes) {
+    return findBox(bytes, ['moof']).length > 0;
+  };
+
+  /**
+   * mux.js
+   *
+   * Copyright (c) Brightcove
+   * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+   */
+  var ONE_SECOND_IN_TS = 90000,
+    // 90kHz clock
+    secondsToVideoTs,
+    secondsToAudioTs,
+    videoTsToSeconds,
+    audioTsToSeconds,
+    audioTsToVideoTs,
+    videoTsToAudioTs,
+    metadataTsToSeconds;
+  secondsToVideoTs = function (seconds) {
+    return seconds * ONE_SECOND_IN_TS;
+  };
+  secondsToAudioTs = function (seconds, sampleRate) {
+    return seconds * sampleRate;
+  };
+  videoTsToSeconds = function (timestamp) {
+    return timestamp / ONE_SECOND_IN_TS;
+  };
+  audioTsToSeconds = function (timestamp, sampleRate) {
+    return timestamp / sampleRate;
+  };
+  audioTsToVideoTs = function (timestamp, sampleRate) {
+    return secondsToVideoTs(audioTsToSeconds(timestamp, sampleRate));
+  };
+  videoTsToAudioTs = function (timestamp, sampleRate) {
+    return secondsToAudioTs(videoTsToSeconds(timestamp), sampleRate);
+  };
+
+  /**
+   * Adjust ID3 tag or caption timing information by the timeline pts values
+   * (if keepOriginalTimestamps is false) and convert to seconds
+   */
+  metadataTsToSeconds = function (timestamp, timelineStartPts, keepOriginalTimestamps) {
+    return videoTsToSeconds(keepOriginalTimestamps ? timestamp : timestamp - timelineStartPts);
+  };
+  var clock = {
+    ONE_SECOND_IN_TS: ONE_SECOND_IN_TS,
+    secondsToVideoTs: secondsToVideoTs,
+    secondsToAudioTs: secondsToAudioTs,
+    videoTsToSeconds: videoTsToSeconds,
+    audioTsToSeconds: audioTsToSeconds,
+    audioTsToVideoTs: audioTsToVideoTs,
+    videoTsToAudioTs: videoTsToAudioTs,
+    metadataTsToSeconds: metadataTsToSeconds
+  };
+  var clock_1 = clock.ONE_SECOND_IN_TS;
+
+  /*! @name @videojs/http-streaming @version 3.12.1 @license Apache-2.0 */
+
+  /**
+   * @file resolve-url.js - Handling how URLs are resolved and manipulated
+   */
+  const resolveUrl = resolveUrl$1;
+  /**
+   * If the xhr request was redirected, return the responseURL, otherwise,
+   * return the original url.
+   *
+   * @api private
+   *
+   * @param  {string} url - an url being requested
+   * @param  {XMLHttpRequest} req - xhr request result
+   *
+   * @return {string}
+   */
+
+  const resolveManifestRedirect = (url, req) => {
+    // To understand how the responseURL below is set and generated:
+    // - https://fetch.spec.whatwg.org/#concept-response-url
+    // - https://fetch.spec.whatwg.org/#atomic-http-redirect-handling
+    if (req && req.responseURL && url !== req.responseURL) {
+      return req.responseURL;
+    }
+    return url;
+  };
+  const logger = source => {
+    if (videojs.log.debug) {
+      return videojs.log.debug.bind(videojs, 'VHS:', `${source} >`);
+    }
+    return function () {};
+  };
+
+  /**
+   * Provides a compatibility layer between Video.js 7 and 8 API changes for VHS.
+   */
+  /**
+   * Delegates to videojs.obj.merge (Video.js 8) or
+   * videojs.mergeOptions (Video.js 7).
+   */
+
+  function merge(...args) {
+    const context = videojs.obj || videojs;
+    const fn = context.merge || context.mergeOptions;
+    return fn.apply(context, args);
+  }
+  /**
+   * Delegates to videojs.time.createTimeRanges (Video.js 8) or
+   * videojs.createTimeRanges (Video.js 7).
+   */
+
+  function createTimeRanges(...args) {
+    const context = videojs.time || videojs;
+    const fn = context.createTimeRanges || context.createTimeRanges;
+    return fn.apply(context, args);
+  }
+  /**
+   * Converts provided buffered ranges to a descriptive string
+   *
+   * @param {TimeRanges} buffered - received buffered time ranges
+   *
+   * @return {string} - descriptive string
+   */
+
+  function bufferedRangesToString(buffered) {
+    if (buffered.length === 0) {
+      return 'Buffered Ranges are empty';
+    }
+    let bufferedRangesStr = 'Buffered Ranges: \n';
+    for (let i = 0; i < buffered.length; i++) {
+      const start = buffered.start(i);
+      const end = buffered.end(i);
+      bufferedRangesStr += `${start} --> ${end}. Duration (${end - start})\n`;
+    }
+    return bufferedRangesStr;
+  }
+
+  /**
+   * ranges
+   *
+   * Utilities for working with TimeRanges.
+   *
+   */
+
+  const TIME_FUDGE_FACTOR = 1 / 30; // Comparisons between time values such as current time and the end of the buffered range
+  // can be misleading because of precision differences or when the current media has poorly
+  // aligned audio and video, which can cause values to be slightly off from what you would
+  // expect. This value is what we consider to be safe to use in such comparisons to account
+  // for these scenarios.
+
+  const SAFE_TIME_DELTA = TIME_FUDGE_FACTOR * 3;
+  const filterRanges = function (timeRanges, predicate) {
+    const results = [];
+    let i;
+    if (timeRanges && timeRanges.length) {
+      // Search for ranges that match the predicate
+      for (i = 0; i < timeRanges.length; i++) {
+        if (predicate(timeRanges.start(i), timeRanges.end(i))) {
+          results.push([timeRanges.start(i), timeRanges.end(i)]);
+        }
+      }
+    }
+    return createTimeRanges(results);
+  };
+  /**
+   * Attempts to find the buffered TimeRange that contains the specified
+   * time.
+   *
+   * @param {TimeRanges} buffered - the TimeRanges object to query
+   * @param {number} time  - the time to filter on.
+   * @return {TimeRanges} a new TimeRanges object
+   */
+
+  const findRange = function (buffered, time) {
+    return filterRanges(buffered, function (start, end) {
+      return start - SAFE_TIME_DELTA <= time && end + SAFE_TIME_DELTA >= time;
+    });
+  };
+  /**
+   * Returns the TimeRanges that begin later than the specified time.
+   *
+   * @param {TimeRanges} timeRanges - the TimeRanges object to query
+   * @param {number} time - the time to filter on.
+   * @return {TimeRanges} a new TimeRanges object.
+   */
+
+  const findNextRange = function (timeRanges, time) {
+    return filterRanges(timeRanges, function (start) {
+      return start - TIME_FUDGE_FACTOR >= time;
+    });
+  };
+  /**
+   * Returns gaps within a list of TimeRanges
+   *
+   * @param {TimeRanges} buffered - the TimeRanges object
+   * @return {TimeRanges} a TimeRanges object of gaps
+   */
+
+  const findGaps = function (buffered) {
+    if (buffered.length < 2) {
+      return createTimeRanges();
+    }
+    const ranges = [];
+    for (let i = 1; i < buffered.length; i++) {
+      const start = buffered.end(i - 1);
+      const end = buffered.start(i);
+      ranges.push([start, end]);
+    }
+    return createTimeRanges(ranges);
+  };
+  /**
+   * Calculate the intersection of two TimeRanges
+   *
+   * @param {TimeRanges} bufferA
+   * @param {TimeRanges} bufferB
+   * @return {TimeRanges} The interesection of `bufferA` with `bufferB`
+   */
+
+  const bufferIntersection = function (bufferA, bufferB) {
+    let start = null;
+    let end = null;
+    let arity = 0;
+    const extents = [];
+    const ranges = [];
+    if (!bufferA || !bufferA.length || !bufferB || !bufferB.length) {
+      return createTimeRanges();
+    } // Handle the case where we have both buffers and create an
+    // intersection of the two
+
+    let count = bufferA.length; // A) Gather up all start and end times
+
+    while (count--) {
+      extents.push({
+        time: bufferA.start(count),
+        type: 'start'
+      });
+      extents.push({
+        time: bufferA.end(count),
+        type: 'end'
+      });
+    }
+    count = bufferB.length;
+    while (count--) {
+      extents.push({
+        time: bufferB.start(count),
+        type: 'start'
+      });
+      extents.push({
+        time: bufferB.end(count),
+        type: 'end'
+      });
+    } // B) Sort them by time
+
+    extents.sort(function (a, b) {
+      return a.time - b.time;
+    }); // C) Go along one by one incrementing arity for start and decrementing
+    //    arity for ends
+
+    for (count = 0; count < extents.length; count++) {
+      if (extents[count].type === 'start') {
+        arity++; // D) If arity is ever incremented to 2 we are entering an
+        //    overlapping range
+
+        if (arity === 2) {
+          start = extents[count].time;
+        }
+      } else if (extents[count].type === 'end') {
+        arity--; // E) If arity is ever decremented to 1 we leaving an
+        //    overlapping range
+
+        if (arity === 1) {
+          end = extents[count].time;
+        }
+      } // F) Record overlapping ranges
+
+      if (start !== null && end !== null) {
+        ranges.push([start, end]);
+        start = null;
+        end = null;
+      }
+    }
+    return createTimeRanges(ranges);
+  };
+  /**
+   * Gets a human readable string for a TimeRange
+   *
+   * @param {TimeRange} range
+   * @return {string} a human readable string
+   */
+
+  const printableRange = range => {
+    const strArr = [];
+    if (!range || !range.length) {
+      return '';
+    }
+    for (let i = 0; i < range.length; i++) {
+      strArr.push(range.start(i) + ' => ' + range.end(i));
+    }
+    return strArr.join(', ');
+  };
+  /**
+   * Calculates the amount of time left in seconds until the player hits the end of the
+   * buffer and causes a rebuffer
+   *
+   * @param {TimeRange} buffered
+   *        The state of the buffer
+   * @param {Numnber} currentTime
+   *        The current time of the player
+   * @param {number} playbackRate
+   *        The current playback rate of the player. Defaults to 1.
+   * @return {number}
+   *         Time until the player has to start rebuffering in seconds.
+   * @function timeUntilRebuffer
+   */
+
+  const timeUntilRebuffer = function (buffered, currentTime, playbackRate = 1) {
+    const bufferedEnd = buffered.length ? buffered.end(buffered.length - 1) : 0;
+    return (bufferedEnd - currentTime) / playbackRate;
+  };
+  /**
+   * Converts a TimeRanges object into an array representation
+   *
+   * @param {TimeRanges} timeRanges
+   * @return {Array}
+   */
+
+  const timeRangesToArray = timeRanges => {
+    const timeRangesList = [];
+    for (let i = 0; i < timeRanges.length; i++) {
+      timeRangesList.push({
+        start: timeRanges.start(i),
+        end: timeRanges.end(i)
+      });
+    }
+    return timeRangesList;
+  };
+  /**
+   * Determines if two time range objects are different.
+   *
+   * @param {TimeRange} a
+   *        the first time range object to check
+   *
+   * @param {TimeRange} b
+   *        the second time range object to check
+   *
+   * @return {Boolean}
+   *         Whether the time range objects differ
+   */
+
+  const isRangeDifferent = function (a, b) {
+    // same object
+    if (a === b) {
+      return false;
+    } // one or the other is undefined
+
+    if (!a && b || !b && a) {
+      return true;
+    } // length is different
+
+    if (a.length !== b.length) {
+      return true;
+    } // see if any start/end pair is different
+
+    for (let i = 0; i < a.length; i++) {
+      if (a.start(i) !== b.start(i) || a.end(i) !== b.end(i)) {
+        return true;
+      }
+    } // if the length and every pair is the same
+    // this is the same time range
+
+    return false;
+  };
+  const lastBufferedEnd = function (a) {
+    if (!a || !a.length || !a.end) {
+      return;
+    }
+    return a.end(a.length - 1);
+  };
+  /**
+   * A utility function to add up the amount of time in a timeRange
+   * after a specified startTime.
+   * ie:[[0, 10], [20, 40], [50, 60]] with a startTime 0
+   *     would return 40 as there are 40s seconds after 0 in the timeRange
+   *
+   * @param {TimeRange} range
+   *        The range to check against
+   * @param {number} startTime
+   *        The time in the time range that you should start counting from
+   *
+   * @return {number}
+   *          The number of seconds in the buffer passed the specified time.
+   */
+
+  const timeAheadOf = function (range, startTime) {
+    let time = 0;
+    if (!range || !range.length) {
+      return time;
+    }
+    for (let i = 0; i < range.length; i++) {
+      const start = range.start(i);
+      const end = range.end(i); // startTime is after this range entirely
+
+      if (startTime > end) {
+        continue;
+      } // startTime is within this range
+
+      if (startTime > start && startTime <= end) {
+        time += end - startTime;
+        continue;
+      } // startTime is before this range.
+
+      time += end - start;
+    }
+    return time;
+  };
+
+  /**
+   * @file playlist.js
+   *
+   * Playlist related utilities.
+   */
+  /**
+   * Get the duration of a segment, with special cases for
+   * llhls segments that do not have a duration yet.
+   *
+   * @param {Object} playlist
+   *        the playlist that the segment belongs to.
+   * @param {Object} segment
+   *        the segment to get a duration for.
+   *
+   * @return {number}
+   *          the segment duration
+   */
+
+  const segmentDurationWithParts = (playlist, segment) => {
+    // if this isn't a preload segment
+    // then we will have a segment duration that is accurate.
+    if (!segment.preload) {
+      return segment.duration;
+    } // otherwise we have to add up parts and preload hints
+    // to get an up to date duration.
+
+    let result = 0;
+    (segment.parts || []).forEach(function (p) {
+      result += p.duration;
+    }); // for preload hints we have to use partTargetDuration
+    // as they won't even have a duration yet.
+
+    (segment.preloadHints || []).forEach(function (p) {
+      if (p.type === 'PART') {
+        result += playlist.partTargetDuration;
+      }
+    });
+    return result;
+  };
+  /**
+   * A function to get a combined list of parts and segments with durations
+   * and indexes.
+   *
+   * @param {Playlist} playlist the playlist to get the list for.
+   *
+   * @return {Array} The part/segment list.
+   */
+
+  const getPartsAndSegments = playlist => (playlist.segments || []).reduce((acc, segment, si) => {
+    if (segment.parts) {
+      segment.parts.forEach(function (part, pi) {
+        acc.push({
+          duration: part.duration,
+          segmentIndex: si,
+          partIndex: pi,
+          part,
+          segment
+        });
+      });
+    } else {
+      acc.push({
+        duration: segment.duration,
+        segmentIndex: si,
+        partIndex: null,
+        segment,
+        part: null
+      });
+    }
+    return acc;
+  }, []);
+  const getLastParts = media => {
+    const lastSegment = media.segments && media.segments.length && media.segments[media.segments.length - 1];
+    return lastSegment && lastSegment.parts || [];
+  };
+  const getKnownPartCount = ({
+    preloadSegment
+  }) => {
+    if (!preloadSegment) {
+      return;
+    }
+    const {
+      parts,
+      preloadHints
+    } = preloadSegment;
+    let partCount = (preloadHints || []).reduce((count, hint) => count + (hint.type === 'PART' ? 1 : 0), 0);
+    partCount += parts && parts.length ? parts.length : 0;
+    return partCount;
+  };
+  /**
+   * Get the number of seconds to delay from the end of a
+   * live playlist.
+   *
+   * @param {Playlist} main the main playlist
+   * @param {Playlist} media the media playlist
+   * @return {number} the hold back in seconds.
+   */
+
+  const liveEdgeDelay = (main, media) => {
+    if (media.endList) {
+      return 0;
+    } // dash suggestedPresentationDelay trumps everything
+
+    if (main && main.suggestedPresentationDelay) {
+      return main.suggestedPresentationDelay;
+    }
+    const hasParts = getLastParts(media).length > 0; // look for "part" delays from ll-hls first
+
+    if (hasParts && media.serverControl && media.serverControl.partHoldBack) {
+      return media.serverControl.partHoldBack;
+    } else if (hasParts && media.partTargetDuration) {
+      return media.partTargetDuration * 3; // finally look for full segment delays
+    } else if (media.serverControl && media.serverControl.holdBack) {
+      return media.serverControl.holdBack;
+    } else if (media.targetDuration) {
+      return media.targetDuration * 3;
+    }
+    return 0;
+  };
+  /**
+   * walk backward until we find a duration we can use
+   * or return a failure
+   *
+   * @param {Playlist} playlist the playlist to walk through
+   * @param {Number} endSequence the mediaSequence to stop walking on
+   */
+
+  const backwardDuration = function (playlist, endSequence) {
+    let result = 0;
+    let i = endSequence - playlist.mediaSequence; // if a start time is available for segment immediately following
+    // the interval, use it
+
+    let segment = playlist.segments[i]; // Walk backward until we find the latest segment with timeline
+    // information that is earlier than endSequence
+
+    if (segment) {
+      if (typeof segment.start !== 'undefined') {
+        return {
+          result: segment.start,
+          precise: true
+        };
+      }
+      if (typeof segment.end !== 'undefined') {
+        return {
+          result: segment.end - segment.duration,
+          precise: true
+        };
+      }
+    }
+    while (i--) {
+      segment = playlist.segments[i];
+      if (typeof segment.end !== 'undefined') {
+        return {
+          result: result + segment.end,
+          precise: true
+        };
+      }
+      result += segmentDurationWithParts(playlist, segment);
+      if (typeof segment.start !== 'undefined') {
+        return {
+          result: result + segment.start,
+          precise: true
+        };
+      }
+    }
+    return {
+      result,
+      precise: false
+    };
+  };
+  /**
+   * walk forward until we find a duration we can use
+   * or return a failure
+   *
+   * @param {Playlist} playlist the playlist to walk through
+   * @param {number} endSequence the mediaSequence to stop walking on
+   */
+
+  const forwardDuration = function (playlist, endSequence) {
+    let result = 0;
+    let segment;
+    let i = endSequence - playlist.mediaSequence; // Walk forward until we find the earliest segment with timeline
+    // information
+
+    for (; i < playlist.segments.length; i++) {
+      segment = playlist.segments[i];
+      if (typeof segment.start !== 'undefined') {
+        return {
+          result: segment.start - result,
+          precise: true
+        };
+      }
+      result += segmentDurationWithParts(playlist, segment);
+      if (typeof segment.end !== 'undefined') {
+        return {
+          result: segment.end - result,
+          precise: true
+        };
+      }
+    } // indicate we didn't find a useful duration estimate
+
+    return {
+      result: -1,
+      precise: false
+    };
+  };
+  /**
+    * Calculate the media duration from the segments associated with a
+    * playlist. The duration of a subinterval of the available segments
+    * may be calculated by specifying an end index.
+    *
+    * @param {Object} playlist a media playlist object
+    * @param {number=} endSequence an exclusive upper boundary
+    * for the playlist.  Defaults to playlist length.
+    * @param {number} expired the amount of time that has dropped
+    * off the front of the playlist in a live scenario
+    * @return {number} the duration between the first available segment
+    * and end index.
+    */
+
+  const intervalDuration = function (playlist, endSequence, expired) {
+    if (typeof endSequence === 'undefined') {
+      endSequence = playlist.mediaSequence + playlist.segments.length;
+    }
+    if (endSequence < playlist.mediaSequence) {
+      return 0;
+    } // do a backward walk to estimate the duration
+
+    const backward = backwardDuration(playlist, endSequence);
+    if (backward.precise) {
+      // if we were able to base our duration estimate on timing
+      // information provided directly from the Media Source, return
+      // it
+      return backward.result;
+    } // walk forward to see if a precise duration estimate can be made
+    // that way
+
+    const forward = forwardDuration(playlist, endSequence);
+    if (forward.precise) {
+      // we found a segment that has been buffered and so it's
+      // position is known precisely
+      return forward.result;
+    } // return the less-precise, playlist-based duration estimate
+
+    return backward.result + expired;
+  };
+  /**
+    * Calculates the duration of a playlist. If a start and end index
+    * are specified, the duration will be for the subset of the media
+    * timeline between those two indices. The total duration for live
+    * playlists is always Infinity.
+    *
+    * @param {Object} playlist a media playlist object
+    * @param {number=} endSequence an exclusive upper
+    * boundary for the playlist. Defaults to the playlist media
+    * sequence number plus its length.
+    * @param {number=} expired the amount of time that has
+    * dropped off the front of the playlist in a live scenario
+    * @return {number} the duration between the start index and end
+    * index.
+    */
+
+  const duration = function (playlist, endSequence, expired) {
+    if (!playlist) {
+      return 0;
+    }
+    if (typeof expired !== 'number') {
+      expired = 0;
+    } // if a slice of the total duration is not requested, use
+    // playlist-level duration indicators when they're present
+
+    if (typeof endSequence === 'undefined') {
+      // if present, use the duration specified in the playlist
+      if (playlist.totalDuration) {
+        return playlist.totalDuration;
+      } // duration should be Infinity for live playlists
+
+      if (!playlist.endList) {
+        return window.Infinity;
+      }
+    } // calculate the total duration based on the segment durations
+
+    return intervalDuration(playlist, endSequence, expired);
+  };
+  /**
+    * Calculate the time between two indexes in the current playlist
+    * neight the start- nor the end-index need to be within the current
+    * playlist in which case, the targetDuration of the playlist is used
+    * to approximate the durations of the segments
+    *
+    * @param {Array} options.durationList list to iterate over for durations.
+    * @param {number} options.defaultDuration duration to use for elements before or after the durationList
+    * @param {number} options.startIndex partsAndSegments index to start
+    * @param {number} options.endIndex partsAndSegments index to end.
+    * @return {number} the number of seconds between startIndex and endIndex
+    */
+
+  const sumDurations = function ({
+    defaultDuration,
+    durationList,
+    startIndex,
+    endIndex
+  }) {
+    let durations = 0;
+    if (startIndex > endIndex) {
+      [startIndex, endIndex] = [endIndex, startIndex];
+    }
+    if (startIndex < 0) {
+      for (let i = startIndex; i < Math.min(0, endIndex); i++) {
+        durations += defaultDuration;
+      }
+      startIndex = 0;
+    }
+    for (let i = startIndex; i < endIndex; i++) {
+      durations += durationList[i].duration;
+    }
+    return durations;
+  };
+  /**
+   * Calculates the playlist end time
+   *
+   * @param {Object} playlist a media playlist object
+   * @param {number=} expired the amount of time that has
+   *                  dropped off the front of the playlist in a live scenario
+   * @param {boolean|false} useSafeLiveEnd a boolean value indicating whether or not the
+   *                        playlist end calculation should consider the safe live end
+   *                        (truncate the playlist end by three segments). This is normally
+   *                        used for calculating the end of the playlist's seekable range.
+   *                        This takes into account the value of liveEdgePadding.
+   *                        Setting liveEdgePadding to 0 is equivalent to setting this to false.
+   * @param {number} liveEdgePadding a number indicating how far from the end of the playlist we should be in seconds.
+   *                 If this is provided, it is used in the safe live end calculation.
+   *                 Setting useSafeLiveEnd=false or liveEdgePadding=0 are equivalent.
+   *                 Corresponds to suggestedPresentationDelay in DASH manifests.
+   * @return {number} the end time of playlist
+   * @function playlistEnd
+   */
+
+  const playlistEnd = function (playlist, expired, useSafeLiveEnd, liveEdgePadding) {
+    if (!playlist || !playlist.segments) {
+      return null;
+    }
+    if (playlist.endList) {
+      return duration(playlist);
+    }
+    if (expired === null) {
+      return null;
+    }
+    expired = expired || 0;
+    let lastSegmentEndTime = intervalDuration(playlist, playlist.mediaSequence + playlist.segments.length, expired);
+    if (useSafeLiveEnd) {
+      liveEdgePadding = typeof liveEdgePadding === 'number' ? liveEdgePadding : liveEdgeDelay(null, playlist);
+      lastSegmentEndTime -= liveEdgePadding;
+    } // don't return a time less than zero
+
+    return Math.max(0, lastSegmentEndTime);
+  };
+  /**
+    * Calculates the interval of time that is currently seekable in a
+    * playlist. The returned time ranges are relative to the earliest
+    * moment in the specified playlist that is still available. A full
+    * seekable implementation for live streams would need to offset
+    * these values by the duration of content that has expired from the
+    * stream.
+    *
+    * @param {Object} playlist a media playlist object
+    * dropped off the front of the playlist in a live scenario
+    * @param {number=} expired the amount of time that has
+    * dropped off the front of the playlist in a live scenario
+    * @param {number} liveEdgePadding how far from the end of the playlist we should be in seconds.
+    *        Corresponds to suggestedPresentationDelay in DASH manifests.
+    * @return {TimeRanges} the periods of time that are valid targets
+    * for seeking
+    */
+
+  const seekable = function (playlist, expired, liveEdgePadding) {
+    const useSafeLiveEnd = true;
+    const seekableStart = expired || 0;
+    let seekableEnd = playlistEnd(playlist, expired, useSafeLiveEnd, liveEdgePadding);
+    if (seekableEnd === null) {
+      return createTimeRanges();
+    } // Clamp seekable end since it can not be less than the seekable start
+
+    if (seekableEnd < seekableStart) {
+      seekableEnd = seekableStart;
+    }
+    return createTimeRanges(seekableStart, seekableEnd);
+  };
+  /**
+   * Determine the index and estimated starting time of the segment that
+   * contains a specified playback position in a media playlist.
+   *
+   * @param {Object} options.playlist the media playlist to query
+   * @param {number} options.currentTime The number of seconds since the earliest
+   * possible position to determine the containing segment for
+   * @param {number} options.startTime the time when the segment/part starts
+   * @param {number} options.startingSegmentIndex the segment index to start looking at.
+   * @param {number?} [options.startingPartIndex] the part index to look at within the segment.
+   *
+   * @return {Object} an object with partIndex, segmentIndex, and startTime.
+   */
+
+  const getMediaInfoForTime = function ({
+    playlist,
+    currentTime,
+    startingSegmentIndex,
+    startingPartIndex,
+    startTime,
+    exactManifestTimings
+  }) {
+    let time = currentTime - startTime;
+    const partsAndSegments = getPartsAndSegments(playlist);
+    let startIndex = 0;
+    for (let i = 0; i < partsAndSegments.length; i++) {
+      const partAndSegment = partsAndSegments[i];
+      if (startingSegmentIndex !== partAndSegment.segmentIndex) {
+        continue;
+      } // skip this if part index does not match.
+
+      if (typeof startingPartIndex === 'number' && typeof partAndSegment.partIndex === 'number' && startingPartIndex !== partAndSegment.partIndex) {
+        continue;
+      }
+      startIndex = i;
+      break;
+    }
+    if (time < 0) {
+      // Walk backward from startIndex in the playlist, adding durations
+      // until we find a segment that contains `time` and return it
+      if (startIndex > 0) {
+        for (let i = startIndex - 1; i >= 0; i--) {
+          const partAndSegment = partsAndSegments[i];
+          time += partAndSegment.duration;
+          if (exactManifestTimings) {
+            if (time < 0) {
+              continue;
+            }
+          } else if (time + TIME_FUDGE_FACTOR <= 0) {
+            continue;
+          }
+          return {
+            partIndex: partAndSegment.partIndex,
+            segmentIndex: partAndSegment.segmentIndex,
+            startTime: startTime - sumDurations({
+              defaultDuration: playlist.targetDuration,
+              durationList: partsAndSegments,
+              startIndex,
+              endIndex: i
+            })
+          };
+        }
+      } // We were unable to find a good segment within the playlist
+      // so select the first segment
+
+      return {
+        partIndex: partsAndSegments[0] && partsAndSegments[0].partIndex || null,
+        segmentIndex: partsAndSegments[0] && partsAndSegments[0].segmentIndex || 0,
+        startTime: currentTime
+      };
+    } // When startIndex is negative, we first walk forward to first segment
+    // adding target durations. If we "run out of time" before getting to
+    // the first segment, return the first segment
+
+    if (startIndex < 0) {
+      for (let i = startIndex; i < 0; i++) {
+        time -= playlist.targetDuration;
+        if (time < 0) {
+          return {
+            partIndex: partsAndSegments[0] && partsAndSegments[0].partIndex || null,
+            segmentIndex: partsAndSegments[0] && partsAndSegments[0].segmentIndex || 0,
+            startTime: currentTime
+          };
+        }
+      }
+      startIndex = 0;
+    } // Walk forward from startIndex in the playlist, subtracting durations
+    // until we find a segment that contains `time` and return it
+
+    for (let i = startIndex; i < partsAndSegments.length; i++) {
+      const partAndSegment = partsAndSegments[i];
+      time -= partAndSegment.duration;
+      const canUseFudgeFactor = partAndSegment.duration > TIME_FUDGE_FACTOR;
+      const isExactlyAtTheEnd = time === 0;
+      const isExtremelyCloseToTheEnd = canUseFudgeFactor && time + TIME_FUDGE_FACTOR >= 0;
+      if (isExactlyAtTheEnd || isExtremelyCloseToTheEnd) {
+        // 1) We are exactly at the end of the current segment.
+        // 2) We are extremely close to the end of the current segment (The difference is less than  1 / 30).
+        //    We may encounter this situation when
+        //    we don't have exact match between segment duration info in the manifest and the actual duration of the segment
+        //    For example:
+        //    We appended 3 segments 10 seconds each, meaning we should have 30 sec buffered,
+        //    but we the actual buffered is 29.99999
+        //
+        // In both cases:
+        // if we passed current time -> it means that we already played current segment
+        // if we passed buffered.end -> it means that this segment is already loaded and buffered
+        // we should select the next segment if we have one:
+        if (i !== partsAndSegments.length - 1) {
+          continue;
+        }
+      }
+      if (exactManifestTimings) {
+        if (time > 0) {
+          continue;
+        }
+      } else if (time - TIME_FUDGE_FACTOR >= 0) {
+        continue;
+      }
+      return {
+        partIndex: partAndSegment.partIndex,
+        segmentIndex: partAndSegment.segmentIndex,
+        startTime: startTime + sumDurations({
+          defaultDuration: playlist.targetDuration,
+          durationList: partsAndSegments,
+          startIndex,
+          endIndex: i
+        })
+      };
+    } // We are out of possible candidates so load the last one...
+
+    return {
+      segmentIndex: partsAndSegments[partsAndSegments.length - 1].segmentIndex,
+      partIndex: partsAndSegments[partsAndSegments.length - 1].partIndex,
+      startTime: currentTime
+    };
+  };
+  /**
+   * Check whether the playlist is excluded or not.
+   *
+   * @param {Object} playlist the media playlist object
+   * @return {boolean} whether the playlist is excluded or not
+   * @function isExcluded
+   */
+
+  const isExcluded = function (playlist) {
+    return playlist.excludeUntil && playlist.excludeUntil > Date.now();
+  };
+  /**
+   * Check whether the playlist is compatible with current playback configuration or has
+   * been excluded permanently for being incompatible.
+   *
+   * @param {Object} playlist the media playlist object
+   * @return {boolean} whether the playlist is incompatible or not
+   * @function isIncompatible
+   */
+
+  const isIncompatible = function (playlist) {
+    return playlist.excludeUntil && playlist.excludeUntil === Infinity;
+  };
+  /**
+   * Check whether the playlist is enabled or not.
+   *
+   * @param {Object} playlist the media playlist object
+   * @return {boolean} whether the playlist is enabled or not
+   * @function isEnabled
+   */
+
+  const isEnabled = function (playlist) {
+    const excluded = isExcluded(playlist);
+    return !playlist.disabled && !excluded;
+  };
+  /**
+   * Check whether the playlist has been manually disabled through the representations api.
+   *
+   * @param {Object} playlist the media playlist object
+   * @return {boolean} whether the playlist is disabled manually or not
+   * @function isDisabled
+   */
+
+  const isDisabled = function (playlist) {
+    return playlist.disabled;
+  };
+  /**
+   * Returns whether the current playlist is an AES encrypted HLS stream
+   *
+   * @return {boolean} true if it's an AES encrypted HLS stream
+   */
+
+  const isAes = function (media) {
+    for (let i = 0; i < media.segments.length; i++) {
+      if (media.segments[i].key) {
+        return true;
+      }
+    }
+    return false;
+  };
+  /**
+   * Checks if the playlist has a value for the specified attribute
+   *
+   * @param {string} attr
+   *        Attribute to check for
+   * @param {Object} playlist
+   *        The media playlist object
+   * @return {boolean}
+   *         Whether the playlist contains a value for the attribute or not
+   * @function hasAttribute
+   */
+
+  const hasAttribute = function (attr, playlist) {
+    return playlist.attributes && playlist.attributes[attr];
+  };
+  /**
+   * Estimates the time required to complete a segment download from the specified playlist
+   *
+   * @param {number} segmentDuration
+   *        Duration of requested segment
+   * @param {number} bandwidth
+   *        Current measured bandwidth of the player
+   * @param {Object} playlist
+   *        The media playlist object
+   * @param {number=} bytesReceived
+   *        Number of bytes already received for the request. Defaults to 0
+   * @return {number|NaN}
+   *         The estimated time to request the segment. NaN if bandwidth information for
+   *         the given playlist is unavailable
+   * @function estimateSegmentRequestTime
+   */
+
+  const estimateSegmentRequestTime = function (segmentDuration, bandwidth, playlist, bytesReceived = 0) {
+    if (!hasAttribute('BANDWIDTH', playlist)) {
+      return NaN;
+    }
+    const size = segmentDuration * playlist.attributes.BANDWIDTH;
+    return (size - bytesReceived * 8) / bandwidth;
+  };
+  /*
+   * Returns whether the current playlist is the lowest rendition
+   *
+   * @return {Boolean} true if on lowest rendition
+   */
+
+  const isLowestEnabledRendition = (main, media) => {
+    if (main.playlists.length === 1) {
+      return true;
+    }
+    const currentBandwidth = media.attributes.BANDWIDTH || Number.MAX_VALUE;
+    return main.playlists.filter(playlist => {
+      if (!isEnabled(playlist)) {
+        return false;
+      }
+      return (playlist.attributes.BANDWIDTH || 0) < currentBandwidth;
+    }).length === 0;
+  };
+  const playlistMatch = (a, b) => {
+    // both playlits are null
+    // or only one playlist is non-null
+    // no match
+    if (!a && !b || !a && b || a && !b) {
+      return false;
+    } // playlist objects are the same, match
+
+    if (a === b) {
+      return true;
+    } // first try to use id as it should be the most
+    // accurate
+
+    if (a.id && b.id && a.id === b.id) {
+      return true;
+    } // next try to use reslovedUri as it should be the
+    // second most accurate.
+
+    if (a.resolvedUri && b.resolvedUri && a.resolvedUri === b.resolvedUri) {
+      return true;
+    } // finally try to use uri as it should be accurate
+    // but might miss a few cases for relative uris
+
+    if (a.uri && b.uri && a.uri === b.uri) {
+      return true;
+    }
+    return false;
+  };
+  const someAudioVariant = function (main, callback) {
+    const AUDIO = main && main.mediaGroups && main.mediaGroups.AUDIO || {};
+    let found = false;
+    for (const groupName in AUDIO) {
+      for (const label in AUDIO[groupName]) {
+        found = callback(AUDIO[groupName][label]);
+        if (found) {
+          break;
+        }
+      }
+      if (found) {
+        break;
+      }
+    }
+    return !!found;
+  };
+  const isAudioOnly = main => {
+    // we are audio only if we have no main playlists but do
+    // have media group playlists.
+    if (!main || !main.playlists || !main.playlists.length) {
+      // without audio variants or playlists this
+      // is not an audio only main.
+      const found = someAudioVariant(main, variant => variant.playlists && variant.playlists.length || variant.uri);
+      return found;
+    } // if every playlist has only an audio codec it is audio only
+
+    for (let i = 0; i < main.playlists.length; i++) {
+      const playlist = main.playlists[i];
+      const CODECS = playlist.attributes && playlist.attributes.CODECS; // all codecs are audio, this is an audio playlist.
+
+      if (CODECS && CODECS.split(',').every(c => isAudioCodec(c))) {
+        continue;
+      } // playlist is in an audio group it is audio only
+
+      const found = someAudioVariant(main, variant => playlistMatch(playlist, variant));
+      if (found) {
+        continue;
+      } // if we make it here this playlist isn't audio and we
+      // are not audio only
+
+      return false;
+    } // if we make it past every playlist without returning, then
+    // this is an audio only playlist.
+
+    return true;
+  }; // exports
+
+  var Playlist = {
+    liveEdgeDelay,
+    duration,
+    seekable,
+    getMediaInfoForTime,
+    isEnabled,
+    isDisabled,
+    isExcluded,
+    isIncompatible,
+    playlistEnd,
+    isAes,
+    hasAttribute,
+    estimateSegmentRequestTime,
+    isLowestEnabledRendition,
+    isAudioOnly,
+    playlistMatch,
+    segmentDurationWithParts
+  };
+  const {
+    log
+  } = videojs;
+  const createPlaylistID = (index, uri) => {
+    return `${index}-${uri}`;
+  }; // default function for creating a group id
+
+  const groupID = (type, group, label) => {
+    return `placeholder-uri-${type}-${group}-${label}`;
+  };
+  /**
+   * Parses a given m3u8 playlist
+   *
+   * @param {Function} [onwarn]
+   *        a function to call when the parser triggers a warning event.
+   * @param {Function} [oninfo]
+   *        a function to call when the parser triggers an info event.
+   * @param {string} manifestString
+   *        The downloaded manifest string
+   * @param {Object[]} [customTagParsers]
+   *        An array of custom tag parsers for the m3u8-parser instance
+   * @param {Object[]} [customTagMappers]
+   *        An array of custom tag mappers for the m3u8-parser instance
+   * @param {boolean} [llhls]
+   *        Whether to keep ll-hls features in the manifest after parsing.
+   * @return {Object}
+   *         The manifest object
+   */
+
+  const parseManifest = ({
+    onwarn,
+    oninfo,
+    manifestString,
+    customTagParsers = [],
+    customTagMappers = [],
+    llhls
+  }) => {
+    const parser = new Parser();
+    if (onwarn) {
+      parser.on('warn', onwarn);
+    }
+    if (oninfo) {
+      parser.on('info', oninfo);
+    }
+    customTagParsers.forEach(customParser => parser.addParser(customParser));
+    customTagMappers.forEach(mapper => parser.addTagMapper(mapper));
+    parser.push(manifestString);
+    parser.end();
+    const manifest = parser.manifest; // remove llhls features from the parsed manifest
+    // if we don't want llhls support.
+
+    if (!llhls) {
+      ['preloadSegment', 'skip', 'serverControl', 'renditionReports', 'partInf', 'partTargetDuration'].forEach(function (k) {
+        if (manifest.hasOwnProperty(k)) {
+          delete manifest[k];
+        }
+      });
+      if (manifest.segments) {
+        manifest.segments.forEach(function (segment) {
+          ['parts', 'preloadHints'].forEach(function (k) {
+            if (segment.hasOwnProperty(k)) {
+              delete segment[k];
+            }
+          });
+        });
+      }
+    }
+    if (!manifest.targetDuration) {
+      let targetDuration = 10;
+      if (manifest.segments && manifest.segments.length) {
+        targetDuration = manifest.segments.reduce((acc, s) => Math.max(acc, s.duration), 0);
+      }
+      if (onwarn) {
+        onwarn({
+          message: `manifest has no targetDuration defaulting to ${targetDuration}`
+        });
+      }
+      manifest.targetDuration = targetDuration;
+    }
+    const parts = getLastParts(manifest);
+    if (parts.length && !manifest.partTargetDuration) {
+      const partTargetDuration = parts.reduce((acc, p) => Math.max(acc, p.duration), 0);
+      if (onwarn) {
+        onwarn({
+          message: `manifest has no partTargetDuration defaulting to ${partTargetDuration}`
+        });
+        log.error('LL-HLS manifest has parts but lacks required #EXT-X-PART-INF:PART-TARGET value. See https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis-09#section-4.4.3.7. Playback is not guaranteed.');
+      }
+      manifest.partTargetDuration = partTargetDuration;
+    }
+    return manifest;
+  };
+  /**
+   * Loops through all supported media groups in main and calls the provided
+   * callback for each group
+   *
+   * @param {Object} main
+   *        The parsed main manifest object
+   * @param {Function} callback
+   *        Callback to call for each media group
+   */
+
+  const forEachMediaGroup = (main, callback) => {
+    if (!main.mediaGroups) {
+      return;
+    }
+    ['AUDIO', 'SUBTITLES'].forEach(mediaType => {
+      if (!main.mediaGroups[mediaType]) {
+        return;
+      }
+      for (const groupKey in main.mediaGroups[mediaType]) {
+        for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+          const mediaProperties = main.mediaGroups[mediaType][groupKey][labelKey];
+          callback(mediaProperties, mediaType, groupKey, labelKey);
+        }
+      }
+    });
+  };
+  /**
+   * Adds properties and attributes to the playlist to keep consistent functionality for
+   * playlists throughout VHS.
+   *
+   * @param {Object} config
+   *        Arguments object
+   * @param {Object} config.playlist
+   *        The media playlist
+   * @param {string} [config.uri]
+   *        The uri to the media playlist (if media playlist is not from within a main
+   *        playlist)
+   * @param {string} id
+   *        ID to use for the playlist
+   */
+
+  const setupMediaPlaylist = ({
+    playlist,
+    uri,
+    id
+  }) => {
+    playlist.id = id;
+    playlist.playlistErrors_ = 0;
+    if (uri) {
+      // For media playlists, m3u8-parser does not have access to a URI, as HLS media
+      // playlists do not contain their own source URI, but one is needed for consistency in
+      // VHS.
+      playlist.uri = uri;
+    } // For HLS main playlists, even though certain attributes MUST be defined, the
+    // stream may still be played without them.
+    // For HLS media playlists, m3u8-parser does not attach an attributes object to the
+    // manifest.
+    //
+    // To avoid undefined reference errors through the project, and make the code easier
+    // to write/read, add an empty attributes object for these cases.
+
+    playlist.attributes = playlist.attributes || {};
+  };
+  /**
+   * Adds ID, resolvedUri, and attributes properties to each playlist of the main, where
+   * necessary. In addition, creates playlist IDs for each playlist and adds playlist ID to
+   * playlist references to the playlists array.
+   *
+   * @param {Object} main
+   *        The main playlist
+   */
+
+  const setupMediaPlaylists = main => {
+    let i = main.playlists.length;
+    while (i--) {
+      const playlist = main.playlists[i];
+      setupMediaPlaylist({
+        playlist,
+        id: createPlaylistID(i, playlist.uri)
+      });
+      playlist.resolvedUri = resolveUrl(main.uri, playlist.uri);
+      main.playlists[playlist.id] = playlist; // URI reference added for backwards compatibility
+
+      main.playlists[playlist.uri] = playlist; // Although the spec states an #EXT-X-STREAM-INF tag MUST have a BANDWIDTH attribute,
+      // the stream can be played without it. Although an attributes property may have been
+      // added to the playlist to prevent undefined references, issue a warning to fix the
+      // manifest.
+
+      if (!playlist.attributes.BANDWIDTH) {
+        log.warn('Invalid playlist STREAM-INF detected. Missing BANDWIDTH attribute.');
+      }
+    }
+  };
+  /**
+   * Adds resolvedUri properties to each media group.
+   *
+   * @param {Object} main
+   *        The main playlist
+   */
+
+  const resolveMediaGroupUris = main => {
+    forEachMediaGroup(main, properties => {
+      if (properties.uri) {
+        properties.resolvedUri = resolveUrl(main.uri, properties.uri);
+      }
+    });
+  };
+  /**
+   * Creates a main playlist wrapper to insert a sole media playlist into.
+   *
+   * @param {Object} media
+   *        Media playlist
+   * @param {string} uri
+   *        The media URI
+   *
+   * @return {Object}
+   *         main playlist
+   */
+
+  const mainForMedia = (media, uri) => {
+    const id = createPlaylistID(0, uri);
+    const main = {
+      mediaGroups: {
+        'AUDIO': {},
+        'VIDEO': {},
+        'CLOSED-CAPTIONS': {},
+        'SUBTITLES': {}
+      },
+      uri: window.location.href,
+      resolvedUri: window.location.href,
+      playlists: [{
+        uri,
+        id,
+        resolvedUri: uri,
+        // m3u8-parser does not attach an attributes property to media playlists so make
+        // sure that the property is attached to avoid undefined reference errors
+        attributes: {}
+      }]
+    }; // set up ID reference
+
+    main.playlists[id] = main.playlists[0]; // URI reference added for backwards compatibility
+
+    main.playlists[uri] = main.playlists[0];
+    return main;
+  };
+  /**
+   * Does an in-place update of the main manifest to add updated playlist URI references
+   * as well as other properties needed by VHS that aren't included by the parser.
+   *
+   * @param {Object} main
+   *        main manifest object
+   * @param {string} uri
+   *        The source URI
+   * @param {function} createGroupID
+   *        A function to determine how to create the groupID for mediaGroups
+   */
+
+  const addPropertiesToMain = (main, uri, createGroupID = groupID) => {
+    main.uri = uri;
+    for (let i = 0; i < main.playlists.length; i++) {
+      if (!main.playlists[i].uri) {
+        // Set up phony URIs for the playlists since playlists are referenced by their URIs
+        // throughout VHS, but some formats (e.g., DASH) don't have external URIs
+        // TODO: consider adding dummy URIs in mpd-parser
+        const phonyUri = `placeholder-uri-${i}`;
+        main.playlists[i].uri = phonyUri;
+      }
+    }
+    const audioOnlyMain = isAudioOnly(main);
+    forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+      // add a playlist array under properties
+      if (!properties.playlists || !properties.playlists.length) {
+        // If the manifest is audio only and this media group does not have a uri, check
+        // if the media group is located in the main list of playlists. If it is, don't add
+        // placeholder properties as it shouldn't be considered an alternate audio track.
+        if (audioOnlyMain && mediaType === 'AUDIO' && !properties.uri) {
+          for (let i = 0; i < main.playlists.length; i++) {
+            const p = main.playlists[i];
+            if (p.attributes && p.attributes.AUDIO && p.attributes.AUDIO === groupKey) {
+              return;
+            }
+          }
+        }
+        properties.playlists = [_extends$1({}, properties)];
+      }
+      properties.playlists.forEach(function (p, i) {
+        const groupId = createGroupID(mediaType, groupKey, labelKey, p);
+        const id = createPlaylistID(i, groupId);
+        if (p.uri) {
+          p.resolvedUri = p.resolvedUri || resolveUrl(main.uri, p.uri);
+        } else {
+          // DEPRECATED, this has been added to prevent a breaking change.
+          // previously we only ever had a single media group playlist, so
+          // we mark the first playlist uri without prepending the index as we used to
+          // ideally we would do all of the playlists the same way.
+          p.uri = i === 0 ? groupId : id; // don't resolve a placeholder uri to an absolute url, just use
+          // the placeholder again
+
+          p.resolvedUri = p.uri;
+        }
+        p.id = p.id || id; // add an empty attributes object, all playlists are
+        // expected to have this.
+
+        p.attributes = p.attributes || {}; // setup ID and URI references (URI for backwards compatibility)
+
+        main.playlists[p.id] = p;
+        main.playlists[p.uri] = p;
+      });
+    });
+    setupMediaPlaylists(main);
+    resolveMediaGroupUris(main);
+  };
+  class DateRangesStorage {
+    constructor() {
+      this.offset_ = null;
+      this.pendingDateRanges_ = new Map();
+      this.processedDateRanges_ = new Map();
+    }
+    setOffset(segments = []) {
+      // already set
+      if (this.offset_ !== null) {
+        return;
+      } // no segment to process
+
+      if (!segments.length) {
+        return;
+      }
+      const [firstSegment] = segments; // no program date time
+
+      if (firstSegment.programDateTime === undefined) {
+        return;
+      } // Set offset as ProgramDateTime for the very first segment of the very first playlist load:
+
+      this.offset_ = firstSegment.programDateTime / 1000;
+    }
+    setPendingDateRanges(dateRanges = []) {
+      if (!dateRanges.length) {
+        return;
+      }
+      const [dateRange] = dateRanges;
+      const startTime = dateRange.startDate.getTime();
+      this.trimProcessedDateRanges_(startTime);
+      this.pendingDateRanges_ = dateRanges.reduce((map, pendingDateRange) => {
+        map.set(pendingDateRange.id, pendingDateRange);
+        return map;
+      }, new Map());
+    }
+    processDateRange(dateRange) {
+      this.pendingDateRanges_.delete(dateRange.id);
+      this.processedDateRanges_.set(dateRange.id, dateRange);
+    }
+    getDateRangesToProcess() {
+      if (this.offset_ === null) {
+        return [];
+      }
+      const dateRangeClasses = {};
+      const dateRangesToProcess = [];
+      this.pendingDateRanges_.forEach((dateRange, id) => {
+        if (this.processedDateRanges_.has(id)) {
+          return;
+        }
+        dateRange.startTime = dateRange.startDate.getTime() / 1000 - this.offset_;
+        dateRange.processDateRange = () => this.processDateRange(dateRange);
+        dateRangesToProcess.push(dateRange);
+        if (!dateRange.class) {
+          return;
+        }
+        if (dateRangeClasses[dateRange.class]) {
+          const length = dateRangeClasses[dateRange.class].push(dateRange);
+          dateRange.classListIndex = length - 1;
+        } else {
+          dateRangeClasses[dateRange.class] = [dateRange];
+          dateRange.classListIndex = 0;
+        }
+      });
+      for (const dateRange of dateRangesToProcess) {
+        const classList = dateRangeClasses[dateRange.class] || [];
+        if (dateRange.endDate) {
+          dateRange.endTime = dateRange.endDate.getTime() / 1000 - this.offset_;
+        } else if (dateRange.endOnNext && classList[dateRange.classListIndex + 1]) {
+          dateRange.endTime = classList[dateRange.classListIndex + 1].startTime;
+        } else if (dateRange.duration) {
+          dateRange.endTime = dateRange.startTime + dateRange.duration;
+        } else if (dateRange.plannedDuration) {
+          dateRange.endTime = dateRange.startTime + dateRange.plannedDuration;
+        } else {
+          dateRange.endTime = dateRange.startTime;
+        }
+      }
+      return dateRangesToProcess;
+    }
+    trimProcessedDateRanges_(startTime) {
+      const copy = new Map(this.processedDateRanges_);
+      copy.forEach((dateRange, id) => {
+        if (dateRange.startDate.getTime() < startTime) {
+          this.processedDateRanges_.delete(id);
+        }
+      });
+    }
+  }
+  const {
+    EventTarget: EventTarget$1
+  } = videojs;
+  const addLLHLSQueryDirectives = (uri, media) => {
+    if (media.endList || !media.serverControl) {
+      return uri;
+    }
+    const parameters = {};
+    if (media.serverControl.canBlockReload) {
+      const {
+        preloadSegment
+      } = media; // next msn is a zero based value, length is not.
+
+      let nextMSN = media.mediaSequence + media.segments.length; // If preload segment has parts then it is likely
+      // that we are going to request a part of that preload segment.
+      // the logic below is used to determine that.
+
+      if (preloadSegment) {
+        const parts = preloadSegment.parts || []; // _HLS_part is a zero based index
+
+        const nextPart = getKnownPartCount(media) - 1; // if nextPart is > -1 and not equal to just the
+        // length of parts, then we know we had part preload hints
+        // and we need to add the _HLS_part= query
+
+        if (nextPart > -1 && nextPart !== parts.length - 1) {
+          // add existing parts to our preload hints
+          // eslint-disable-next-line
+          parameters._HLS_part = nextPart;
+        } // this if statement makes sure that we request the msn
+        // of the preload segment if:
+        // 1. the preload segment had parts (and was not yet a full segment)
+        //    but was added to our segments array
+        // 2. the preload segment had preload hints for parts that are not in
+        //    the manifest yet.
+        // in all other cases we want the segment after the preload segment
+        // which will be given by using media.segments.length because it is 1 based
+        // rather than 0 based.
+
+        if (nextPart > -1 || parts.length) {
+          nextMSN--;
+        }
+      } // add _HLS_msn= in front of any _HLS_part query
+      // eslint-disable-next-line
+
+      parameters._HLS_msn = nextMSN;
+    }
+    if (media.serverControl && media.serverControl.canSkipUntil) {
+      // add _HLS_skip= infront of all other queries.
+      // eslint-disable-next-line
+      parameters._HLS_skip = media.serverControl.canSkipDateranges ? 'v2' : 'YES';
+    }
+    if (Object.keys(parameters).length) {
+      const parsedUri = new window.URL(uri);
+      ['_HLS_skip', '_HLS_msn', '_HLS_part'].forEach(function (name) {
+        if (!parameters.hasOwnProperty(name)) {
+          return;
+        }
+        parsedUri.searchParams.set(name, parameters[name]);
+      });
+      uri = parsedUri.toString();
+    }
+    return uri;
+  };
+  /**
+   * Returns a new segment object with properties and
+   * the parts array merged.
+   *
+   * @param {Object} a the old segment
+   * @param {Object} b the new segment
+   *
+   * @return {Object} the merged segment
+   */
+
+  const updateSegment = (a, b) => {
+    if (!a) {
+      return b;
+    }
+    const result = merge(a, b); // if only the old segment has preload hints
+    // and the new one does not, remove preload hints.
+
+    if (a.preloadHints && !b.preloadHints) {
+      delete result.preloadHints;
+    } // if only the old segment has parts
+    // then the parts are no longer valid
+
+    if (a.parts && !b.parts) {
+      delete result.parts; // if both segments have parts
+      // copy part propeties from the old segment
+      // to the new one.
+    } else if (a.parts && b.parts) {
+      for (let i = 0; i < b.parts.length; i++) {
+        if (a.parts && a.parts[i]) {
+          result.parts[i] = merge(a.parts[i], b.parts[i]);
+        }
+      }
+    } // set skipped to false for segments that have
+    // have had information merged from the old segment.
+
+    if (!a.skipped && b.skipped) {
+      result.skipped = false;
+    } // set preload to false for segments that have
+    // had information added in the new segment.
+
+    if (a.preload && !b.preload) {
+      result.preload = false;
+    }
+    return result;
+  };
+  /**
+   * Returns a new array of segments that is the result of merging
+   * properties from an older list of segments onto an updated
+   * list. No properties on the updated playlist will be ovewritten.
+   *
+   * @param {Array} original the outdated list of segments
+   * @param {Array} update the updated list of segments
+   * @param {number=} offset the index of the first update
+   * segment in the original segment list. For non-live playlists,
+   * this should always be zero and does not need to be
+   * specified. For live playlists, it should be the difference
+   * between the media sequence numbers in the original and updated
+   * playlists.
+   * @return {Array} a list of merged segment objects
+   */
+
+  const updateSegments = (original, update, offset) => {
+    const oldSegments = original.slice();
+    const newSegments = update.slice();
+    offset = offset || 0;
+    const result = [];
+    let currentMap;
+    for (let newIndex = 0; newIndex < newSegments.length; newIndex++) {
+      const oldSegment = oldSegments[newIndex + offset];
+      const newSegment = newSegments[newIndex];
+      if (oldSegment) {
+        currentMap = oldSegment.map || currentMap;
+        result.push(updateSegment(oldSegment, newSegment));
+      } else {
+        // carry over map to new segment if it is missing
+        if (currentMap && !newSegment.map) {
+          newSegment.map = currentMap;
+        }
+        result.push(newSegment);
+      }
+    }
+    return result;
+  };
+  const resolveSegmentUris = (segment, baseUri) => {
+    // preloadSegment will not have a uri at all
+    // as the segment isn't actually in the manifest yet, only parts
+    if (!segment.resolvedUri && segment.uri) {
+      segment.resolvedUri = resolveUrl(baseUri, segment.uri);
+    }
+    if (segment.key && !segment.key.resolvedUri) {
+      segment.key.resolvedUri = resolveUrl(baseUri, segment.key.uri);
+    }
+    if (segment.map && !segment.map.resolvedUri) {
+      segment.map.resolvedUri = resolveUrl(baseUri, segment.map.uri);
+    }
+    if (segment.map && segment.map.key && !segment.map.key.resolvedUri) {
+      segment.map.key.resolvedUri = resolveUrl(baseUri, segment.map.key.uri);
+    }
+    if (segment.parts && segment.parts.length) {
+      segment.parts.forEach(p => {
+        if (p.resolvedUri) {
+          return;
+        }
+        p.resolvedUri = resolveUrl(baseUri, p.uri);
+      });
+    }
+    if (segment.preloadHints && segment.preloadHints.length) {
+      segment.preloadHints.forEach(p => {
+        if (p.resolvedUri) {
+          return;
+        }
+        p.resolvedUri = resolveUrl(baseUri, p.uri);
+      });
+    }
+  };
+  const getAllSegments = function (media) {
+    const segments = media.segments || [];
+    const preloadSegment = media.preloadSegment; // a preloadSegment with only preloadHints is not currently
+    // a usable segment, only include a preloadSegment that has
+    // parts.
+
+    if (preloadSegment && preloadSegment.parts && preloadSegment.parts.length) {
+      // if preloadHints has a MAP that means that the
+      // init segment is going to change. We cannot use any of the parts
+      // from this preload segment.
+      if (preloadSegment.preloadHints) {
+        for (let i = 0; i < preloadSegment.preloadHints.length; i++) {
+          if (preloadSegment.preloadHints[i].type === 'MAP') {
+            return segments;
+          }
+        }
+      } // set the duration for our preload segment to target duration.
+
+      preloadSegment.duration = media.targetDuration;
+      preloadSegment.preload = true;
+      segments.push(preloadSegment);
+    }
+    return segments;
+  }; // consider the playlist unchanged if the playlist object is the same or
+  // the number of segments is equal, the media sequence number is unchanged,
+  // and this playlist hasn't become the end of the playlist
+
+  const isPlaylistUnchanged = (a, b) => a === b || a.segments && b.segments && a.segments.length === b.segments.length && a.endList === b.endList && a.mediaSequence === b.mediaSequence && a.preloadSegment === b.preloadSegment;
+  /**
+    * Returns a new main playlist that is the result of merging an
+    * updated media playlist into the original version. If the
+    * updated media playlist does not match any of the playlist
+    * entries in the original main playlist, null is returned.
+    *
+    * @param {Object} main a parsed main M3U8 object
+    * @param {Object} media a parsed media M3U8 object
+    * @return {Object} a new object that represents the original
+    * main playlist with the updated media playlist merged in, or
+    * null if the merge produced no change.
+    */
+
+  const updateMain$1 = (main, newMedia, unchangedCheck = isPlaylistUnchanged) => {
+    const result = merge(main, {});
+    const oldMedia = result.playlists[newMedia.id];
+    if (!oldMedia) {
+      return null;
+    }
+    if (unchangedCheck(oldMedia, newMedia)) {
+      return null;
+    }
+    newMedia.segments = getAllSegments(newMedia);
+    const mergedPlaylist = merge(oldMedia, newMedia); // always use the new media's preload segment
+
+    if (mergedPlaylist.preloadSegment && !newMedia.preloadSegment) {
+      delete mergedPlaylist.preloadSegment;
+    } // if the update could overlap existing segment information, merge the two segment lists
+
+    if (oldMedia.segments) {
+      if (newMedia.skip) {
+        newMedia.segments = newMedia.segments || []; // add back in objects for skipped segments, so that we merge
+        // old properties into the new segments
+
+        for (let i = 0; i < newMedia.skip.skippedSegments; i++) {
+          newMedia.segments.unshift({
+            skipped: true
+          });
+        }
+      }
+      mergedPlaylist.segments = updateSegments(oldMedia.segments, newMedia.segments, newMedia.mediaSequence - oldMedia.mediaSequence);
+    } // resolve any segment URIs to prevent us from having to do it later
+
+    mergedPlaylist.segments.forEach(segment => {
+      resolveSegmentUris(segment, mergedPlaylist.resolvedUri);
+    }); // TODO Right now in the playlists array there are two references to each playlist, one
+    // that is referenced by index, and one by URI. The index reference may no longer be
+    // necessary.
+
+    for (let i = 0; i < result.playlists.length; i++) {
+      if (result.playlists[i].id === newMedia.id) {
+        result.playlists[i] = mergedPlaylist;
+      }
+    }
+    result.playlists[newMedia.id] = mergedPlaylist; // URI reference added for backwards compatibility
+
+    result.playlists[newMedia.uri] = mergedPlaylist; // update media group playlist references.
+
+    forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+      if (!properties.playlists) {
+        return;
+      }
+      for (let i = 0; i < properties.playlists.length; i++) {
+        if (newMedia.id === properties.playlists[i].id) {
+          properties.playlists[i] = mergedPlaylist;
+        }
+      }
+    });
+    return result;
+  };
+  /**
+   * Calculates the time to wait before refreshing a live playlist
+   *
+   * @param {Object} media
+   *        The current media
+   * @param {boolean} update
+   *        True if there were any updates from the last refresh, false otherwise
+   * @return {number}
+   *         The time in ms to wait before refreshing the live playlist
+   */
+
+  const refreshDelay = (media, update) => {
+    const segments = media.segments || [];
+    const lastSegment = segments[segments.length - 1];
+    const lastPart = lastSegment && lastSegment.parts && lastSegment.parts[lastSegment.parts.length - 1];
+    const lastDuration = lastPart && lastPart.duration || lastSegment && lastSegment.duration;
+    if (update && lastDuration) {
+      return lastDuration * 1000;
+    } // if the playlist is unchanged since the last reload or last segment duration
+    // cannot be determined, try again after half the target duration
+
+    return (media.partTargetDuration || media.targetDuration || 10) * 500;
+  };
+  /**
+   * Load a playlist from a remote location
+   *
+   * @class PlaylistLoader
+   * @extends Stream
+   * @param {string|Object} src url or object of manifest
+   * @param {boolean} withCredentials the withCredentials xhr option
+   * @class
+   */
+
+  class PlaylistLoader extends EventTarget$1 {
+    constructor(src, vhs, options = {}) {
+      super();
+      if (!src) {
+        throw new Error('A non-empty playlist URL or object is required');
+      }
+      this.logger_ = logger('PlaylistLoader');
+      const {
+        withCredentials = false
+      } = options;
+      this.src = src;
+      this.vhs_ = vhs;
+      this.withCredentials = withCredentials;
+      this.addDateRangesToTextTrack_ = options.addDateRangesToTextTrack;
+      const vhsOptions = vhs.options_;
+      this.customTagParsers = vhsOptions && vhsOptions.customTagParsers || [];
+      this.customTagMappers = vhsOptions && vhsOptions.customTagMappers || [];
+      this.llhls = vhsOptions && vhsOptions.llhls;
+      this.dateRangesStorage_ = new DateRangesStorage(); // initialize the loader state
+
+      this.state = 'HAVE_NOTHING'; // live playlist staleness timeout
+
+      this.handleMediaupdatetimeout_ = this.handleMediaupdatetimeout_.bind(this);
+      this.on('mediaupdatetimeout', this.handleMediaupdatetimeout_);
+      this.on('loadedplaylist', this.handleLoadedPlaylist_.bind(this));
+    }
+    handleLoadedPlaylist_() {
+      const mediaPlaylist = this.media();
+      if (!mediaPlaylist) {
+        return;
+      }
+      this.dateRangesStorage_.setOffset(mediaPlaylist.segments);
+      this.dateRangesStorage_.setPendingDateRanges(mediaPlaylist.dateRanges);
+      const availableDateRanges = this.dateRangesStorage_.getDateRangesToProcess();
+      if (!availableDateRanges.length || !this.addDateRangesToTextTrack_) {
+        return;
+      }
+      this.addDateRangesToTextTrack_(availableDateRanges);
+    }
+    handleMediaupdatetimeout_() {
+      if (this.state !== 'HAVE_METADATA') {
+        // only refresh the media playlist if no other activity is going on
+        return;
+      }
+      const media = this.media();
+      let uri = resolveUrl(this.main.uri, media.uri);
+      if (this.llhls) {
+        uri = addLLHLSQueryDirectives(uri, media);
+      }
+      this.state = 'HAVE_CURRENT_METADATA';
+      this.request = this.vhs_.xhr({
+        uri,
+        withCredentials: this.withCredentials,
+        requestType: 'hls-playlist'
+      }, (error, req) => {
+        // disposed
+        if (!this.request) {
+          return;
+        }
+        if (error) {
+          return this.playlistRequestError(this.request, this.media(), 'HAVE_METADATA');
+        }
+        this.haveMetadata({
+          playlistString: this.request.responseText,
+          url: this.media().uri,
+          id: this.media().id
+        });
+      });
+    }
+    playlistRequestError(xhr, playlist, startingState) {
+      const {
+        uri,
+        id
+      } = playlist; // any in-flight request is now finished
+
+      this.request = null;
+      if (startingState) {
+        this.state = startingState;
+      }
+      this.error = {
+        playlist: this.main.playlists[id],
+        status: xhr.status,
+        message: `HLS playlist request error at URL: ${uri}.`,
+        responseText: xhr.responseText,
+        code: xhr.status >= 500 ? 4 : 2,
+        metadata: {
+          errorType: videojs.Error.HlsPlaylistRequestError
+        }
+      };
+      this.trigger('error');
+    }
+    parseManifest_({
+      url,
+      manifestString
+    }) {
+      return parseManifest({
+        onwarn: ({
+          message
+        }) => this.logger_(`m3u8-parser warn for ${url}: ${message}`),
+        oninfo: ({
+          message
+        }) => this.logger_(`m3u8-parser info for ${url}: ${message}`),
+        manifestString,
+        customTagParsers: this.customTagParsers,
+        customTagMappers: this.customTagMappers,
+        llhls: this.llhls
+      });
+    }
+    /**
+     * Update the playlist loader's state in response to a new or updated playlist.
+     *
+     * @param {string} [playlistString]
+     *        Playlist string (if playlistObject is not provided)
+     * @param {Object} [playlistObject]
+     *        Playlist object (if playlistString is not provided)
+     * @param {string} url
+     *        URL of playlist
+     * @param {string} id
+     *        ID to use for playlist
+     */
+
+    haveMetadata({
+      playlistString,
+      playlistObject,
+      url,
+      id
+    }) {
+      // any in-flight request is now finished
+      this.request = null;
+      this.state = 'HAVE_METADATA';
+      const playlist = playlistObject || this.parseManifest_({
+        url,
+        manifestString: playlistString
+      });
+      playlist.lastRequest = Date.now();
+      setupMediaPlaylist({
+        playlist,
+        uri: url,
+        id
+      }); // merge this playlist into the main manifest
+
+      const update = updateMain$1(this.main, playlist);
+      this.targetDuration = playlist.partTargetDuration || playlist.targetDuration;
+      this.pendingMedia_ = null;
+      if (update) {
+        this.main = update;
+        this.media_ = this.main.playlists[id];
+      } else {
+        this.trigger('playlistunchanged');
+      }
+      this.updateMediaUpdateTimeout_(refreshDelay(this.media(), !!update));
+      this.trigger('loadedplaylist');
+    }
+    /**
+      * Abort any outstanding work and clean up.
+      */
+
+    dispose() {
+      this.trigger('dispose');
+      this.stopRequest();
+      window.clearTimeout(this.mediaUpdateTimeout);
+      window.clearTimeout(this.finalRenditionTimeout);
+      this.dateRangesStorage_ = new DateRangesStorage();
+      this.off();
+    }
+    stopRequest() {
+      if (this.request) {
+        const oldRequest = this.request;
+        this.request = null;
+        oldRequest.onreadystatechange = null;
+        oldRequest.abort();
+      }
+    }
+    /**
+      * When called without any arguments, returns the currently
+      * active media playlist. When called with a single argument,
+      * triggers the playlist loader to asynchronously switch to the
+      * specified media playlist. Calling this method while the
+      * loader is in the HAVE_NOTHING causes an error to be emitted
+      * but otherwise has no effect.
+      *
+      * @param {Object=} playlist the parsed media playlist
+      * object to switch to
+      * @param {boolean=} shouldDelay whether we should delay the request by half target duration
+      *
+      * @return {Playlist} the current loaded media
+      */
+
+    media(playlist, shouldDelay) {
+      // getter
+      if (!playlist) {
+        return this.media_;
+      } // setter
+
+      if (this.state === 'HAVE_NOTHING') {
+        throw new Error('Cannot switch media playlist from ' + this.state);
+      } // find the playlist object if the target playlist has been
+      // specified by URI
+
+      if (typeof playlist === 'string') {
+        if (!this.main.playlists[playlist]) {
+          throw new Error('Unknown playlist URI: ' + playlist);
+        }
+        playlist = this.main.playlists[playlist];
+      }
+      window.clearTimeout(this.finalRenditionTimeout);
+      if (shouldDelay) {
+        const delay = (playlist.partTargetDuration || playlist.targetDuration) / 2 * 1000 || 5 * 1000;
+        this.finalRenditionTimeout = window.setTimeout(this.media.bind(this, playlist, false), delay);
+        return;
+      }
+      const startingState = this.state;
+      const mediaChange = !this.media_ || playlist.id !== this.media_.id;
+      const mainPlaylistRef = this.main.playlists[playlist.id]; // switch to fully loaded playlists immediately
+
+      if (mainPlaylistRef && mainPlaylistRef.endList ||
+      // handle the case of a playlist object (e.g., if using vhs-json with a resolved
+      // media playlist or, for the case of demuxed audio, a resolved audio media group)
+      playlist.endList && playlist.segments.length) {
+        // abort outstanding playlist requests
+        if (this.request) {
+          this.request.onreadystatechange = null;
+          this.request.abort();
+          this.request = null;
+        }
+        this.state = 'HAVE_METADATA';
+        this.media_ = playlist; // trigger media change if the active media has been updated
+
+        if (mediaChange) {
+          this.trigger('mediachanging');
+          if (startingState === 'HAVE_MAIN_MANIFEST') {
+            // The initial playlist was a main manifest, and the first media selected was
+            // also provided (in the form of a resolved playlist object) as part of the
+            // source object (rather than just a URL). Therefore, since the media playlist
+            // doesn't need to be requested, loadedmetadata won't trigger as part of the
+            // normal flow, and needs an explicit trigger here.
+            this.trigger('loadedmetadata');
+          } else {
+            this.trigger('mediachange');
+          }
+        }
+        return;
+      } // We update/set the timeout here so that live playlists
+      // that are not a media change will "start" the loader as expected.
+      // We expect that this function will start the media update timeout
+      // cycle again. This also prevents a playlist switch failure from
+      // causing us to stall during live.
+
+      this.updateMediaUpdateTimeout_(refreshDelay(playlist, true)); // switching to the active playlist is a no-op
+
+      if (!mediaChange) {
+        return;
+      }
+      this.state = 'SWITCHING_MEDIA'; // there is already an outstanding playlist request
+
+      if (this.request) {
+        if (playlist.resolvedUri === this.request.url) {
+          // requesting to switch to the same playlist multiple times
+          // has no effect after the first
+          return;
+        }
+        this.request.onreadystatechange = null;
+        this.request.abort();
+        this.request = null;
+      } // request the new playlist
+
+      if (this.media_) {
+        this.trigger('mediachanging');
+      }
+      this.pendingMedia_ = playlist;
+      this.request = this.vhs_.xhr({
+        uri: playlist.resolvedUri,
+        withCredentials: this.withCredentials,
+        requestType: 'hls-playlist'
+      }, (error, req) => {
+        // disposed
+        if (!this.request) {
+          return;
+        }
+        playlist.lastRequest = Date.now();
+        playlist.resolvedUri = resolveManifestRedirect(playlist.resolvedUri, req);
+        if (error) {
+          return this.playlistRequestError(this.request, playlist, startingState);
+        }
+        this.haveMetadata({
+          playlistString: req.responseText,
+          url: playlist.uri,
+          id: playlist.id
+        }); // fire loadedmetadata the first time a media playlist is loaded
+
+        if (startingState === 'HAVE_MAIN_MANIFEST') {
+          this.trigger('loadedmetadata');
+        } else {
+          this.trigger('mediachange');
+        }
+      });
+    }
+    /**
+     * pause loading of the playlist
+     */
+
+    pause() {
+      if (this.mediaUpdateTimeout) {
+        window.clearTimeout(this.mediaUpdateTimeout);
+        this.mediaUpdateTimeout = null;
+      }
+      this.stopRequest();
+      if (this.state === 'HAVE_NOTHING') {
+        // If we pause the loader before any data has been retrieved, its as if we never
+        // started, so reset to an unstarted state.
+        this.started = false;
+      } // Need to restore state now that no activity is happening
+
+      if (this.state === 'SWITCHING_MEDIA') {
+        // if the loader was in the process of switching media, it should either return to
+        // HAVE_MAIN_MANIFEST or HAVE_METADATA depending on if the loader has loaded a media
+        // playlist yet. This is determined by the existence of loader.media_
+        if (this.media_) {
+          this.state = 'HAVE_METADATA';
+        } else {
+          this.state = 'HAVE_MAIN_MANIFEST';
+        }
+      } else if (this.state === 'HAVE_CURRENT_METADATA') {
+        this.state = 'HAVE_METADATA';
+      }
+    }
+    /**
+     * start loading of the playlist
+     */
+
+    load(shouldDelay) {
+      if (this.mediaUpdateTimeout) {
+        window.clearTimeout(this.mediaUpdateTimeout);
+        this.mediaUpdateTimeout = null;
+      }
+      const media = this.media();
+      if (shouldDelay) {
+        const delay = media ? (media.partTargetDuration || media.targetDuration) / 2 * 1000 : 5 * 1000;
+        this.mediaUpdateTimeout = window.setTimeout(() => {
+          this.mediaUpdateTimeout = null;
+          this.load();
+        }, delay);
+        return;
+      }
+      if (!this.started) {
+        this.start();
+        return;
+      }
+      if (media && !media.endList) {
+        this.trigger('mediaupdatetimeout');
+      } else {
+        this.trigger('loadedplaylist');
+      }
+    }
+    updateMediaUpdateTimeout_(delay) {
+      if (this.mediaUpdateTimeout) {
+        window.clearTimeout(this.mediaUpdateTimeout);
+        this.mediaUpdateTimeout = null;
+      } // we only have use mediaupdatetimeout for live playlists.
+
+      if (!this.media() || this.media().endList) {
+        return;
+      }
+      this.mediaUpdateTimeout = window.setTimeout(() => {
+        this.mediaUpdateTimeout = null;
+        this.trigger('mediaupdatetimeout');
+        this.updateMediaUpdateTimeout_(delay);
+      }, delay);
+    }
+    /**
+     * start loading of the playlist
+     */
+
+    start() {
+      this.started = true;
+      if (typeof this.src === 'object') {
+        // in the case of an entirely constructed manifest object (meaning there's no actual
+        // manifest on a server), default the uri to the page's href
+        if (!this.src.uri) {
+          this.src.uri = window.location.href;
+        } // resolvedUri is added on internally after the initial request. Since there's no
+        // request for pre-resolved manifests, add on resolvedUri here.
+
+        this.src.resolvedUri = this.src.uri; // Since a manifest object was passed in as the source (instead of a URL), the first
+        // request can be skipped (since the top level of the manifest, at a minimum, is
+        // already available as a parsed manifest object). However, if the manifest object
+        // represents a main playlist, some media playlists may need to be resolved before
+        // the starting segment list is available. Therefore, go directly to setup of the
+        // initial playlist, and let the normal flow continue from there.
+        //
+        // Note that the call to setup is asynchronous, as other sections of VHS may assume
+        // that the first request is asynchronous.
+
+        setTimeout(() => {
+          this.setupInitialPlaylist(this.src);
+        }, 0);
+        return;
+      } // request the specified URL
+
+      this.request = this.vhs_.xhr({
+        uri: this.src,
+        withCredentials: this.withCredentials,
+        requestType: 'hls-playlist'
+      }, (error, req) => {
+        // disposed
+        if (!this.request) {
+          return;
+        } // clear the loader's request reference
+
+        this.request = null;
+        if (error) {
+          this.error = {
+            status: req.status,
+            message: `HLS playlist request error at URL: ${this.src}.`,
+            responseText: req.responseText,
+            // MEDIA_ERR_NETWORK
+            code: 2,
+            metadata: {
+              errorType: videojs.Error.HlsPlaylistRequestError
+            }
+          };
+          if (this.state === 'HAVE_NOTHING') {
+            this.started = false;
+          }
+          return this.trigger('error');
+        }
+        this.src = resolveManifestRedirect(this.src, req);
+        const manifest = this.parseManifest_({
+          manifestString: req.responseText,
+          url: this.src
+        });
+        this.setupInitialPlaylist(manifest);
+      });
+    }
+    srcUri() {
+      return typeof this.src === 'string' ? this.src : this.src.uri;
+    }
+    /**
+     * Given a manifest object that's either a main or media playlist, trigger the proper
+     * events and set the state of the playlist loader.
+     *
+     * If the manifest object represents a main playlist, `loadedplaylist` will be
+     * triggered to allow listeners to select a playlist. If none is selected, the loader
+     * will default to the first one in the playlists array.
+     *
+     * If the manifest object represents a media playlist, `loadedplaylist` will be
+     * triggered followed by `loadedmetadata`, as the only available playlist is loaded.
+     *
+     * In the case of a media playlist, a main playlist object wrapper with one playlist
+     * will be created so that all logic can handle playlists in the same fashion (as an
+     * assumed manifest object schema).
+     *
+     * @param {Object} manifest
+     *        The parsed manifest object
+     */
+
+    setupInitialPlaylist(manifest) {
+      this.state = 'HAVE_MAIN_MANIFEST';
+      if (manifest.playlists) {
+        this.main = manifest;
+        addPropertiesToMain(this.main, this.srcUri()); // If the initial main playlist has playlists wtih segments already resolved,
+        // then resolve URIs in advance, as they are usually done after a playlist request,
+        // which may not happen if the playlist is resolved.
+
+        manifest.playlists.forEach(playlist => {
+          playlist.segments = getAllSegments(playlist);
+          playlist.segments.forEach(segment => {
+            resolveSegmentUris(segment, playlist.resolvedUri);
+          });
+        });
+        this.trigger('loadedplaylist');
+        if (!this.request) {
+          // no media playlist was specifically selected so start
+          // from the first listed one
+          this.media(this.main.playlists[0]);
+        }
+        return;
+      } // In order to support media playlists passed in as vhs-json, the case where the uri
+      // is not provided as part of the manifest should be considered, and an appropriate
+      // default used.
+
+      const uri = this.srcUri() || window.location.href;
+      this.main = mainForMedia(manifest, uri);
+      this.haveMetadata({
+        playlistObject: manifest,
+        url: uri,
+        id: this.main.playlists[0].id
+      });
+      this.trigger('loadedmetadata');
+    }
+    /**
+     * Updates or deletes a preexisting pathway clone.
+     * Ensures that all playlists related to the old pathway clone are
+     * either updated or deleted.
+     *
+     * @param {Object} clone On update, the pathway clone object for the newly updated pathway clone.
+     *        On delete, the old pathway clone object to be deleted.
+     * @param {boolean} isUpdate True if the pathway is to be updated,
+     *        false if it is meant to be deleted.
+     */
+
+    updateOrDeleteClone(clone, isUpdate) {
+      const main = this.main;
+      const pathway = clone.ID;
+      let i = main.playlists.length; // Iterate backwards through the playlist so we can remove playlists if necessary.
+
+      while (i--) {
+        const p = main.playlists[i];
+        if (p.attributes['PATHWAY-ID'] === pathway) {
+          const oldPlaylistUri = p.resolvedUri;
+          const oldPlaylistId = p.id; // update the indexed playlist and add new playlists by ID and URI
+
+          if (isUpdate) {
+            const newPlaylistUri = this.createCloneURI_(p.resolvedUri, clone);
+            const newPlaylistId = createPlaylistID(pathway, newPlaylistUri);
+            const attributes = this.createCloneAttributes_(pathway, p.attributes);
+            const updatedPlaylist = this.createClonePlaylist_(p, newPlaylistId, clone, attributes);
+            main.playlists[i] = updatedPlaylist;
+            main.playlists[newPlaylistId] = updatedPlaylist;
+            main.playlists[newPlaylistUri] = updatedPlaylist;
+          } else {
+            // Remove the indexed playlist.
+            main.playlists.splice(i, 1);
+          } // Remove playlists by the old ID and URI.
+
+          delete main.playlists[oldPlaylistId];
+          delete main.playlists[oldPlaylistUri];
+        }
+      }
+      this.updateOrDeleteCloneMedia(clone, isUpdate);
+    }
+    /**
+     * Updates or deletes media data based on the pathway clone object.
+     * Due to the complexity of the media groups and playlists, in all cases
+     * we remove all of the old media groups and playlists.
+     * On updates, we then create new media groups and playlists based on the
+     * new pathway clone object.
+     *
+     * @param {Object} clone The pathway clone object for the newly updated pathway clone.
+     * @param {boolean} isUpdate True if the pathway is to be updated,
+     *        false if it is meant to be deleted.
+     */
+
+    updateOrDeleteCloneMedia(clone, isUpdate) {
+      const main = this.main;
+      const id = clone.ID;
+      ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+        if (!main.mediaGroups[mediaType] || !main.mediaGroups[mediaType][id]) {
+          return;
+        }
+        for (const groupKey in main.mediaGroups[mediaType]) {
+          // Remove all media playlists for the media group for this pathway clone.
+          if (groupKey === id) {
+            for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+              const oldMedia = main.mediaGroups[mediaType][groupKey][labelKey];
+              oldMedia.playlists.forEach((p, i) => {
+                const oldMediaPlaylist = main.playlists[p.id];
+                const oldPlaylistId = oldMediaPlaylist.id;
+                const oldPlaylistUri = oldMediaPlaylist.resolvedUri;
+                delete main.playlists[oldPlaylistId];
+                delete main.playlists[oldPlaylistUri];
+              });
+            } // Delete the old media group.
+
+            delete main.mediaGroups[mediaType][groupKey];
+          }
+        }
+      }); // Create the new media groups and playlists if there is an update.
+
+      if (isUpdate) {
+        this.createClonedMediaGroups_(clone);
+      }
+    }
+    /**
+     * Given a pathway clone object, clones all necessary playlists.
+     *
+     * @param {Object} clone The pathway clone object.
+     * @param {Object} basePlaylist The original playlist to clone from.
+     */
+
+    addClonePathway(clone, basePlaylist = {}) {
+      const main = this.main;
+      const index = main.playlists.length;
+      const uri = this.createCloneURI_(basePlaylist.resolvedUri, clone);
+      const playlistId = createPlaylistID(clone.ID, uri);
+      const attributes = this.createCloneAttributes_(clone.ID, basePlaylist.attributes);
+      const playlist = this.createClonePlaylist_(basePlaylist, playlistId, clone, attributes);
+      main.playlists[index] = playlist; // add playlist by ID and URI
+
+      main.playlists[playlistId] = playlist;
+      main.playlists[uri] = playlist;
+      this.createClonedMediaGroups_(clone);
+    }
+    /**
+     * Given a pathway clone object we create clones of all media.
+     * In this function, all necessary information and updated playlists
+     * are added to the `mediaGroup` object.
+     * Playlists are also added to the `playlists` array so the media groups
+     * will be properly linked.
+     *
+     * @param {Object} clone The pathway clone object.
+     */
+
+    createClonedMediaGroups_(clone) {
+      const id = clone.ID;
+      const baseID = clone['BASE-ID'];
+      const main = this.main;
+      ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+        // If the media type doesn't exist, or there is already a clone, skip
+        // to the next media type.
+        if (!main.mediaGroups[mediaType] || main.mediaGroups[mediaType][id]) {
+          return;
+        }
+        for (const groupKey in main.mediaGroups[mediaType]) {
+          if (groupKey === baseID) {
+            // Create the group.
+            main.mediaGroups[mediaType][id] = {};
+          } else {
+            // There is no need to iterate over label keys in this case.
+            continue;
+          }
+          for (const labelKey in main.mediaGroups[mediaType][groupKey]) {
+            const oldMedia = main.mediaGroups[mediaType][groupKey][labelKey];
+            main.mediaGroups[mediaType][id][labelKey] = _extends$1({}, oldMedia);
+            const newMedia = main.mediaGroups[mediaType][id][labelKey]; // update URIs on the media
+
+            const newUri = this.createCloneURI_(oldMedia.resolvedUri, clone);
+            newMedia.resolvedUri = newUri;
+            newMedia.uri = newUri; // Reset playlists in the new media group.
+
+            newMedia.playlists = []; // Create new playlists in the newly cloned media group.
+
+            oldMedia.playlists.forEach((p, i) => {
+              const oldMediaPlaylist = main.playlists[p.id];
+              const group = groupID(mediaType, id, labelKey);
+              const newPlaylistID = createPlaylistID(id, group); // Check to see if it already exists
+
+              if (oldMediaPlaylist && !main.playlists[newPlaylistID]) {
+                const newMediaPlaylist = this.createClonePlaylist_(oldMediaPlaylist, newPlaylistID, clone);
+                const newPlaylistUri = newMediaPlaylist.resolvedUri;
+                main.playlists[newPlaylistID] = newMediaPlaylist;
+                main.playlists[newPlaylistUri] = newMediaPlaylist;
+              }
+              newMedia.playlists[i] = this.createClonePlaylist_(p, newPlaylistID, clone);
+            });
+          }
+        }
+      });
+    }
+    /**
+     * Using the original playlist to be cloned, and the pathway clone object
+     * information, we create a new playlist.
+     *
+     * @param {Object} basePlaylist  The original playlist to be cloned from.
+     * @param {string} id The desired id of the newly cloned playlist.
+     * @param {Object} clone The pathway clone object.
+     * @param {Object} attributes An optional object to populate the `attributes` property in the playlist.
+     *
+     * @return {Object} The combined cloned playlist.
+     */
+
+    createClonePlaylist_(basePlaylist, id, clone, attributes) {
+      const uri = this.createCloneURI_(basePlaylist.resolvedUri, clone);
+      const newProps = {
+        resolvedUri: uri,
+        uri,
+        id
+      }; // Remove all segments from previous playlist in the clone.
+
+      if (basePlaylist.segments) {
+        newProps.segments = [];
+      }
+      if (attributes) {
+        newProps.attributes = attributes;
+      }
+      return merge(basePlaylist, newProps);
+    }
+    /**
+     * Generates an updated URI for a cloned pathway based on the original
+     * pathway's URI and the paramaters from the pathway clone object in the
+     * content steering server response.
+     *
+     * @param {string} baseUri URI to be updated in the cloned pathway.
+     * @param {Object} clone The pathway clone object.
+     *
+     * @return {string} The updated URI for the cloned pathway.
+     */
+
+    createCloneURI_(baseURI, clone) {
+      const uri = new URL(baseURI);
+      uri.hostname = clone['URI-REPLACEMENT'].HOST;
+      const params = clone['URI-REPLACEMENT'].PARAMS; // Add params to the cloned URL.
+
+      for (const key of Object.keys(params)) {
+        uri.searchParams.set(key, params[key]);
+      }
+      return uri.href;
+    }
+    /**
+     * Helper function to create the attributes needed for the new clone.
+     * This mainly adds the necessary media attributes.
+     *
+     * @param {string} id The pathway clone object ID.
+     * @param {Object} oldAttributes The old attributes to compare to.
+     * @return {Object} The new attributes to add to the playlist.
+     */
+
+    createCloneAttributes_(id, oldAttributes) {
+      const attributes = {
+        ['PATHWAY-ID']: id
+      };
+      ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(mediaType => {
+        if (oldAttributes[mediaType]) {
+          attributes[mediaType] = id;
+        }
+      });
+      return attributes;
+    }
+    /**
+     * Returns the key ID set from a playlist
+     *
+     * @param {playlist} playlist to fetch the key ID set from.
+     * @return a Set of 32 digit hex strings that represent the unique keyIds for that playlist.
+     */
+
+    getKeyIdSet(playlist) {
+      if (playlist.contentProtection) {
+        const keyIds = new Set();
+        for (const keysystem in playlist.contentProtection) {
+          const keyId = playlist.contentProtection[keysystem].attributes.keyId;
+          if (keyId) {
+            keyIds.add(keyId.toLowerCase());
+          }
+        }
+        return keyIds;
+      }
+    }
+  }
+
+  /**
+   * @file xhr.js
+   */
+
+  const callbackWrapper = function (request, error, response, callback) {
+    const reqResponse = request.responseType === 'arraybuffer' ? request.response : request.responseText;
+    if (!error && reqResponse) {
+      request.responseTime = Date.now();
+      request.roundTripTime = request.responseTime - request.requestTime;
+      request.bytesReceived = reqResponse.byteLength || reqResponse.length;
+      if (!request.bandwidth) {
+        request.bandwidth = Math.floor(request.bytesReceived / request.roundTripTime * 8 * 1000);
+      }
+    }
+    if (response.headers) {
+      request.responseHeaders = response.headers;
+    } // videojs.xhr now uses a specific code on the error
+    // object to signal that a request has timed out instead
+    // of setting a boolean on the request object
+
+    if (error && error.code === 'ETIMEDOUT') {
+      request.timedout = true;
+    } // videojs.xhr no longer considers status codes outside of 200 and 0
+    // (for file uris) to be errors, but the old XHR did, so emulate that
+    // behavior. Status 206 may be used in response to byterange requests.
+
+    if (!error && !request.aborted && response.statusCode !== 200 && response.statusCode !== 206 && response.statusCode !== 0) {
+      error = new Error('XHR Failed with a response of: ' + (request && (reqResponse || request.responseText)));
+    }
+    callback(error, request);
+  };
+  /**
+   * Iterates over the request hooks Set and calls them in order
+   *
+   * @param {Set} hooks the hook Set to iterate over
+   * @param {Object} options the request options to pass to the xhr wrapper
+   * @return the callback hook function return value, the modified or new options Object.
+   */
+
+  const callAllRequestHooks = (requestSet, options) => {
+    if (!requestSet || !requestSet.size) {
+      return;
+    }
+    let newOptions = options;
+    requestSet.forEach(requestCallback => {
+      newOptions = requestCallback(newOptions);
+    });
+    return newOptions;
+  };
+  /**
+   * Iterates over the response hooks Set and calls them in order.
+   *
+   * @param {Set} hooks the hook Set to iterate over
+   * @param {Object} request the xhr request object
+   * @param {Object} error the xhr error object
+   * @param {Object} response the xhr response object
+   */
+
+  const callAllResponseHooks = (responseSet, request, error, response) => {
+    if (!responseSet || !responseSet.size) {
+      return;
+    }
+    responseSet.forEach(responseCallback => {
+      responseCallback(request, error, response);
+    });
+  };
+  const xhrFactory = function () {
+    const xhr = function XhrFunction(options, callback) {
+      // Add a default timeout
+      options = merge({
+        timeout: 45e3
+      }, options); // Allow an optional user-specified function to modify the option
+      // object before we construct the xhr request
+      // TODO: Remove beforeRequest in the next major release.
+
+      const beforeRequest = XhrFunction.beforeRequest || videojs.Vhs.xhr.beforeRequest; // onRequest and onResponse hooks as a Set, at either the player or global level.
+      // TODO: new Set added here for beforeRequest alias. Remove this when beforeRequest is removed.
+
+      const _requestCallbackSet = XhrFunction._requestCallbackSet || videojs.Vhs.xhr._requestCallbackSet || new Set();
+      const _responseCallbackSet = XhrFunction._responseCallbackSet || videojs.Vhs.xhr._responseCallbackSet;
+      if (beforeRequest && typeof beforeRequest === 'function') {
+        videojs.log.warn('beforeRequest is deprecated, use onRequest instead.');
+        _requestCallbackSet.add(beforeRequest);
+      } // Use the standard videojs.xhr() method unless `videojs.Vhs.xhr` has been overriden
+      // TODO: switch back to videojs.Vhs.xhr.name === 'XhrFunction' when we drop IE11
+
+      const xhrMethod = videojs.Vhs.xhr.original === true ? videojs.xhr : videojs.Vhs.xhr; // call all registered onRequest hooks, assign new options.
+
+      const beforeRequestOptions = callAllRequestHooks(_requestCallbackSet, options); // Remove the beforeRequest function from the hooks set so stale beforeRequest functions are not called.
+
+      _requestCallbackSet.delete(beforeRequest); // xhrMethod will call XMLHttpRequest.open and XMLHttpRequest.send
+
+      const request = xhrMethod(beforeRequestOptions || options, function (error, response) {
+        // call all registered onResponse hooks
+        callAllResponseHooks(_responseCallbackSet, request, error, response);
+        return callbackWrapper(request, error, response, callback);
+      });
+      const originalAbort = request.abort;
+      request.abort = function () {
+        request.aborted = true;
+        return originalAbort.apply(request, arguments);
+      };
+      request.uri = options.uri;
+      request.requestTime = Date.now();
+      return request;
+    };
+    xhr.original = true;
+    return xhr;
+  };
+  /**
+   * Turns segment byterange into a string suitable for use in
+   * HTTP Range requests
+   *
+   * @param {Object} byterange - an object with two values defining the start and end
+   *                             of a byte-range
+   */
+
+  const byterangeStr = function (byterange) {
+    // `byterangeEnd` is one less than `offset + length` because the HTTP range
+    // header uses inclusive ranges
+    let byterangeEnd;
+    const byterangeStart = byterange.offset;
+    if (typeof byterange.offset === 'bigint' || typeof byterange.length === 'bigint') {
+      byterangeEnd = window.BigInt(byterange.offset) + window.BigInt(byterange.length) - window.BigInt(1);
+    } else {
+      byterangeEnd = byterange.offset + byterange.length - 1;
+    }
+    return 'bytes=' + byterangeStart + '-' + byterangeEnd;
+  };
+  /**
+   * Defines headers for use in the xhr request for a particular segment.
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   */
+
+  const segmentXhrHeaders = function (segment) {
+    const headers = {};
+    if (segment.byterange) {
+      headers.Range = byterangeStr(segment.byterange);
+    }
+    return headers;
+  };
+
+  /**
+   * @file bin-utils.js
+   */
+
+  /**
+   * convert a TimeRange to text
+   *
+   * @param {TimeRange} range the timerange to use for conversion
+   * @param {number} i the iterator on the range to convert
+   * @return {string} the range in string format
+   */
+
+  const textRange = function (range, i) {
+    return range.start(i) + '-' + range.end(i);
+  };
+  /**
+   * format a number as hex string
+   *
+   * @param {number} e The number
+   * @param {number} i the iterator
+   * @return {string} the hex formatted number as a string
+   */
+
+  const formatHexString = function (e, i) {
+    const value = e.toString(16);
+    return '00'.substring(0, 2 - value.length) + value + (i % 2 ? ' ' : '');
+  };
+  const formatAsciiString = function (e) {
+    if (e >= 0x20 && e < 0x7e) {
+      return String.fromCharCode(e);
+    }
+    return '.';
+  };
+  /**
+   * Creates an object for sending to a web worker modifying properties that are TypedArrays
+   * into a new object with seperated properties for the buffer, byteOffset, and byteLength.
+   *
+   * @param {Object} message
+   *        Object of properties and values to send to the web worker
+   * @return {Object}
+   *         Modified message with TypedArray values expanded
+   * @function createTransferableMessage
+   */
+
+  const createTransferableMessage = function (message) {
+    const transferable = {};
+    Object.keys(message).forEach(key => {
+      const value = message[key];
+      if (isArrayBufferView(value)) {
+        transferable[key] = {
+          bytes: value.buffer,
+          byteOffset: value.byteOffset,
+          byteLength: value.byteLength
+        };
+      } else {
+        transferable[key] = value;
+      }
+    });
+    return transferable;
+  };
+  /**
+   * Returns a unique string identifier for a media initialization
+   * segment.
+   *
+   * @param {Object} initSegment
+   *        the init segment object.
+   *
+   * @return {string} the generated init segment id
+   */
+
+  const initSegmentId = function (initSegment) {
+    const byterange = initSegment.byterange || {
+      length: Infinity,
+      offset: 0
+    };
+    return [byterange.length, byterange.offset, initSegment.resolvedUri].join(',');
+  };
+  /**
+   * Returns a unique string identifier for a media segment key.
+   *
+   * @param {Object} key the encryption key
+   * @return {string} the unique id for the media segment key.
+   */
+
+  const segmentKeyId = function (key) {
+    return key.resolvedUri;
+  };
+  /**
+   * utils to help dump binary data to the console
+   *
+   * @param {Array|TypedArray} data
+   *        data to dump to a string
+   *
+   * @return {string} the data as a hex string.
+   */
+
+  const hexDump = data => {
+    const bytes = Array.prototype.slice.call(data);
+    const step = 16;
+    let result = '';
+    let hex;
+    let ascii;
+    for (let j = 0; j < bytes.length / step; j++) {
+      hex = bytes.slice(j * step, j * step + step).map(formatHexString).join('');
+      ascii = bytes.slice(j * step, j * step + step).map(formatAsciiString).join('');
+      result += hex + ' ' + ascii + '\n';
+    }
+    return result;
+  };
+  const tagDump = ({
+    bytes
+  }) => hexDump(bytes);
+  const textRanges = ranges => {
+    let result = '';
+    let i;
+    for (i = 0; i < ranges.length; i++) {
+      result += textRange(ranges, i) + ' ';
+    }
+    return result;
+  };
+  var utils = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    createTransferableMessage: createTransferableMessage,
+    initSegmentId: initSegmentId,
+    segmentKeyId: segmentKeyId,
+    hexDump: hexDump,
+    tagDump: tagDump,
+    textRanges: textRanges
+  });
+
+  // TODO handle fmp4 case where the timing info is accurate and doesn't involve transmux
+  // 25% was arbitrarily chosen, and may need to be refined over time.
+
+  const SEGMENT_END_FUDGE_PERCENT = 0.25;
+  /**
+   * Converts a player time (any time that can be gotten/set from player.currentTime(),
+   * e.g., any time within player.seekable().start(0) to player.seekable().end(0)) to a
+   * program time (any time referencing the real world (e.g., EXT-X-PROGRAM-DATE-TIME)).
+   *
+   * The containing segment is required as the EXT-X-PROGRAM-DATE-TIME serves as an "anchor
+   * point" (a point where we have a mapping from program time to player time, with player
+   * time being the post transmux start of the segment).
+   *
+   * For more details, see [this doc](../../docs/program-time-from-player-time.md).
+   *
+   * @param {number} playerTime the player time
+   * @param {Object} segment the segment which contains the player time
+   * @return {Date} program time
+   */
+
+  const playerTimeToProgramTime = (playerTime, segment) => {
+    if (!segment.dateTimeObject) {
+      // Can't convert without an "anchor point" for the program time (i.e., a time that can
+      // be used to map the start of a segment with a real world time).
+      return null;
+    }
+    const transmuxerPrependedSeconds = segment.videoTimingInfo.transmuxerPrependedSeconds;
+    const transmuxedStart = segment.videoTimingInfo.transmuxedPresentationStart; // get the start of the content from before old content is prepended
+
+    const startOfSegment = transmuxedStart + transmuxerPrependedSeconds;
+    const offsetFromSegmentStart = playerTime - startOfSegment;
+    return new Date(segment.dateTimeObject.getTime() + offsetFromSegmentStart * 1000);
+  };
+  const originalSegmentVideoDuration = videoTimingInfo => {
+    return videoTimingInfo.transmuxedPresentationEnd - videoTimingInfo.transmuxedPresentationStart - videoTimingInfo.transmuxerPrependedSeconds;
+  };
+  /**
+   * Finds a segment that contains the time requested given as an ISO-8601 string. The
+   * returned segment might be an estimate or an accurate match.
+   *
+   * @param {string} programTime The ISO-8601 programTime to find a match for
+   * @param {Object} playlist A playlist object to search within
+   */
+
+  const findSegmentForProgramTime = (programTime, playlist) => {
+    // Assumptions:
+    //  - verifyProgramDateTimeTags has already been run
+    //  - live streams have been started
+    let dateTimeObject;
+    try {
+      dateTimeObject = new Date(programTime);
+    } catch (e) {
+      return null;
+    }
+    if (!playlist || !playlist.segments || playlist.segments.length === 0) {
+      return null;
+    }
+    let segment = playlist.segments[0];
+    if (dateTimeObject < new Date(segment.dateTimeObject)) {
+      // Requested time is before stream start.
+      return null;
+    }
+    for (let i = 0; i < playlist.segments.length - 1; i++) {
+      segment = playlist.segments[i];
+      const nextSegmentStart = new Date(playlist.segments[i + 1].dateTimeObject);
+      if (dateTimeObject < nextSegmentStart) {
+        break;
+      }
+    }
+    const lastSegment = playlist.segments[playlist.segments.length - 1];
+    const lastSegmentStart = lastSegment.dateTimeObject;
+    const lastSegmentDuration = lastSegment.videoTimingInfo ? originalSegmentVideoDuration(lastSegment.videoTimingInfo) : lastSegment.duration + lastSegment.duration * SEGMENT_END_FUDGE_PERCENT;
+    const lastSegmentEnd = new Date(lastSegmentStart.getTime() + lastSegmentDuration * 1000);
+    if (dateTimeObject > lastSegmentEnd) {
+      // Beyond the end of the stream, or our best guess of the end of the stream.
+      return null;
+    }
+    if (dateTimeObject > new Date(lastSegmentStart)) {
+      segment = lastSegment;
+    }
+    return {
+      segment,
+      estimatedStart: segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationStart : Playlist.duration(playlist, playlist.mediaSequence + playlist.segments.indexOf(segment)),
+      // Although, given that all segments have accurate date time objects, the segment
+      // selected should be accurate, unless the video has been transmuxed at some point
+      // (determined by the presence of the videoTimingInfo object), the segment's "player
+      // time" (the start time in the player) can't be considered accurate.
+      type: segment.videoTimingInfo ? 'accurate' : 'estimate'
+    };
+  };
+  /**
+   * Finds a segment that contains the given player time(in seconds).
+   *
+   * @param {number} time The player time to find a match for
+   * @param {Object} playlist A playlist object to search within
+   */
+
+  const findSegmentForPlayerTime = (time, playlist) => {
+    // Assumptions:
+    // - there will always be a segment.duration
+    // - we can start from zero
+    // - segments are in time order
+    if (!playlist || !playlist.segments || playlist.segments.length === 0) {
+      return null;
+    }
+    let segmentEnd = 0;
+    let segment;
+    for (let i = 0; i < playlist.segments.length; i++) {
+      segment = playlist.segments[i]; // videoTimingInfo is set after the segment is downloaded and transmuxed, and
+      // should contain the most accurate values we have for the segment's player times.
+      //
+      // Use the accurate transmuxedPresentationEnd value if it is available, otherwise fall
+      // back to an estimate based on the manifest derived (inaccurate) segment.duration, to
+      // calculate an end value.
+
+      segmentEnd = segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationEnd : segmentEnd + segment.duration;
+      if (time <= segmentEnd) {
+        break;
+      }
+    }
+    const lastSegment = playlist.segments[playlist.segments.length - 1];
+    if (lastSegment.videoTimingInfo && lastSegment.videoTimingInfo.transmuxedPresentationEnd < time) {
+      // The time requested is beyond the stream end.
+      return null;
+    }
+    if (time > segmentEnd) {
+      // The time is within or beyond the last segment.
+      //
+      // Check to see if the time is beyond a reasonable guess of the end of the stream.
+      if (time > segmentEnd + lastSegment.duration * SEGMENT_END_FUDGE_PERCENT) {
+        // Technically, because the duration value is only an estimate, the time may still
+        // exist in the last segment, however, there isn't enough information to make even
+        // a reasonable estimate.
+        return null;
+      }
+      segment = lastSegment;
+    }
+    return {
+      segment,
+      estimatedStart: segment.videoTimingInfo ? segment.videoTimingInfo.transmuxedPresentationStart : segmentEnd - segment.duration,
+      // Because videoTimingInfo is only set after transmux, it is the only way to get
+      // accurate timing values.
+      type: segment.videoTimingInfo ? 'accurate' : 'estimate'
+    };
+  };
+  /**
+   * Gives the offset of the comparisonTimestamp from the programTime timestamp in seconds.
+   * If the offset returned is positive, the programTime occurs after the
+   * comparisonTimestamp.
+   * If the offset is negative, the programTime occurs before the comparisonTimestamp.
+   *
+   * @param {string} comparisonTimeStamp An ISO-8601 timestamp to compare against
+   * @param {string} programTime The programTime as an ISO-8601 string
+   * @return {number} offset
+   */
+
+  const getOffsetFromTimestamp = (comparisonTimeStamp, programTime) => {
+    let segmentDateTime;
+    let programDateTime;
+    try {
+      segmentDateTime = new Date(comparisonTimeStamp);
+      programDateTime = new Date(programTime);
+    } catch (e) {// TODO handle error
+    }
+    const segmentTimeEpoch = segmentDateTime.getTime();
+    const programTimeEpoch = programDateTime.getTime();
+    return (programTimeEpoch - segmentTimeEpoch) / 1000;
+  };
+  /**
+   * Checks that all segments in this playlist have programDateTime tags.
+   *
+   * @param {Object} playlist A playlist object
+   */
+
+  const verifyProgramDateTimeTags = playlist => {
+    if (!playlist.segments || playlist.segments.length === 0) {
+      return false;
+    }
+    for (let i = 0; i < playlist.segments.length; i++) {
+      const segment = playlist.segments[i];
+      if (!segment.dateTimeObject) {
+        return false;
+      }
+    }
+    return true;
+  };
+  /**
+   * Returns the programTime of the media given a playlist and a playerTime.
+   * The playlist must have programDateTime tags for a programDateTime tag to be returned.
+   * If the segments containing the time requested have not been buffered yet, an estimate
+   * may be returned to the callback.
+   *
+   * @param {Object} args
+   * @param {Object} args.playlist A playlist object to search within
+   * @param {number} time A playerTime in seconds
+   * @param {Function} callback(err, programTime)
+   * @return {string} err.message A detailed error message
+   * @return {Object} programTime
+   * @return {number} programTime.mediaSeconds The streamTime in seconds
+   * @return {string} programTime.programDateTime The programTime as an ISO-8601 String
+   */
+
+  const getProgramTime = ({
+    playlist,
+    time = undefined,
+    callback
+  }) => {
+    if (!callback) {
+      throw new Error('getProgramTime: callback must be provided');
+    }
+    if (!playlist || time === undefined) {
+      return callback({
+        message: 'getProgramTime: playlist and time must be provided'
+      });
+    }
+    const matchedSegment = findSegmentForPlayerTime(time, playlist);
+    if (!matchedSegment) {
+      return callback({
+        message: 'valid programTime was not found'
+      });
+    }
+    if (matchedSegment.type === 'estimate') {
+      return callback({
+        message: 'Accurate programTime could not be determined.' + ' Please seek to e.seekTime and try again',
+        seekTime: matchedSegment.estimatedStart
+      });
+    }
+    const programTimeObject = {
+      mediaSeconds: time
+    };
+    const programTime = playerTimeToProgramTime(time, matchedSegment.segment);
+    if (programTime) {
+      programTimeObject.programDateTime = programTime.toISOString();
+    }
+    return callback(null, programTimeObject);
+  };
+  /**
+   * Seeks in the player to a time that matches the given programTime ISO-8601 string.
+   *
+   * @param {Object} args
+   * @param {string} args.programTime A programTime to seek to as an ISO-8601 String
+   * @param {Object} args.playlist A playlist to look within
+   * @param {number} args.retryCount The number of times to try for an accurate seek. Default is 2.
+   * @param {Function} args.seekTo A method to perform a seek
+   * @param {boolean} args.pauseAfterSeek Whether to end in a paused state after seeking. Default is true.
+   * @param {Object} args.tech The tech to seek on
+   * @param {Function} args.callback(err, newTime) A callback to return the new time to
+   * @return {string} err.message A detailed error message
+   * @return {number} newTime The exact time that was seeked to in seconds
+   */
+
+  const seekToProgramTime = ({
+    programTime,
+    playlist,
+    retryCount = 2,
+    seekTo,
+    pauseAfterSeek = true,
+    tech,
+    callback
+  }) => {
+    if (!callback) {
+      throw new Error('seekToProgramTime: callback must be provided');
+    }
+    if (typeof programTime === 'undefined' || !playlist || !seekTo) {
+      return callback({
+        message: 'seekToProgramTime: programTime, seekTo and playlist must be provided'
+      });
+    }
+    if (!playlist.endList && !tech.hasStarted_) {
+      return callback({
+        message: 'player must be playing a live stream to start buffering'
+      });
+    }
+    if (!verifyProgramDateTimeTags(playlist)) {
+      return callback({
+        message: 'programDateTime tags must be provided in the manifest ' + playlist.resolvedUri
+      });
+    }
+    const matchedSegment = findSegmentForProgramTime(programTime, playlist); // no match
+
+    if (!matchedSegment) {
+      return callback({
+        message: `${programTime} was not found in the stream`
+      });
+    }
+    const segment = matchedSegment.segment;
+    const mediaOffset = getOffsetFromTimestamp(segment.dateTimeObject, programTime);
+    if (matchedSegment.type === 'estimate') {
+      // we've run out of retries
+      if (retryCount === 0) {
+        return callback({
+          message: `${programTime} is not buffered yet. Try again`
+        });
+      }
+      seekTo(matchedSegment.estimatedStart + mediaOffset);
+      tech.one('seeked', () => {
+        seekToProgramTime({
+          programTime,
+          playlist,
+          retryCount: retryCount - 1,
+          seekTo,
+          pauseAfterSeek,
+          tech,
+          callback
+        });
+      });
+      return;
+    } // Since the segment.start value is determined from the buffered end or ending time
+    // of the prior segment, the seekToTime doesn't need to account for any transmuxer
+    // modifications.
+
+    const seekToTime = segment.start + mediaOffset;
+    const seekedCallback = () => {
+      return callback(null, tech.currentTime());
+    }; // listen for seeked event
+
+    tech.one('seeked', seekedCallback); // pause before seeking as video.js will restore this state
+
+    if (pauseAfterSeek) {
+      tech.pause();
+    }
+    seekTo(seekToTime);
+  };
+
+  // which will only happen if the request is complete.
+
+  const callbackOnCompleted = (request, cb) => {
+    if (request.readyState === 4) {
+      return cb();
+    }
+    return;
+  };
+  const containerRequest = (uri, xhr, cb) => {
+    let bytes = [];
+    let id3Offset;
+    let finished = false;
+    const endRequestAndCallback = function (err, req, type, _bytes) {
+      req.abort();
+      finished = true;
+      return cb(err, req, type, _bytes);
+    };
+    const progressListener = function (error, request) {
+      if (finished) {
+        return;
+      }
+      if (error) {
+        return endRequestAndCallback(error, request, '', bytes);
+      } // grap the new part of content that was just downloaded
+
+      const newPart = request.responseText.substring(bytes && bytes.byteLength || 0, request.responseText.length); // add that onto bytes
+
+      bytes = concatTypedArrays(bytes, stringToBytes(newPart, true));
+      id3Offset = id3Offset || getId3Offset(bytes); // we need at least 10 bytes to determine a type
+      // or we need at least two bytes after an id3Offset
+
+      if (bytes.length < 10 || id3Offset && bytes.length < id3Offset + 2) {
+        return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+      }
+      const type = detectContainerForBytes(bytes); // if this looks like a ts segment but we don't have enough data
+      // to see the second sync byte, wait until we have enough data
+      // before declaring it ts
+
+      if (type === 'ts' && bytes.length < 188) {
+        return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+      } // this may be an unsynced ts segment
+      // wait for 376 bytes before detecting no container
+
+      if (!type && bytes.length < 376) {
+        return callbackOnCompleted(request, () => endRequestAndCallback(error, request, '', bytes));
+      }
+      return endRequestAndCallback(null, request, type, bytes);
+    };
+    const options = {
+      uri,
+      beforeSend(request) {
+        // this forces the browser to pass the bytes to us unprocessed
+        request.overrideMimeType('text/plain; charset=x-user-defined');
+        request.addEventListener('progress', function ({
+          total,
+          loaded
+        }) {
+          return callbackWrapper(request, null, {
+            statusCode: request.status
+          }, progressListener);
+        });
+      }
+    };
+    const request = xhr(options, function (error, response) {
+      return callbackWrapper(request, error, response, progressListener);
+    });
+    return request;
+  };
+  const {
+    EventTarget
+  } = videojs;
+  const dashPlaylistUnchanged = function (a, b) {
+    if (!isPlaylistUnchanged(a, b)) {
+      return false;
+    } // for dash the above check will often return true in scenarios where
+    // the playlist actually has changed because mediaSequence isn't a
+    // dash thing, and we often set it to 1. So if the playlists have the same amount
+    // of segments we return true.
+    // So for dash we need to make sure that the underlying segments are different.
+    // if sidx changed then the playlists are different.
+
+    if (a.sidx && b.sidx && (a.sidx.offset !== b.sidx.offset || a.sidx.length !== b.sidx.length)) {
+      return false;
+    } else if (!a.sidx && b.sidx || a.sidx && !b.sidx) {
+      return false;
+    } // one or the other does not have segments
+    // there was a change.
+
+    if (a.segments && !b.segments || !a.segments && b.segments) {
+      return false;
+    } // neither has segments nothing changed
+
+    if (!a.segments && !b.segments) {
+      return true;
+    } // check segments themselves
+
+    for (let i = 0; i < a.segments.length; i++) {
+      const aSegment = a.segments[i];
+      const bSegment = b.segments[i]; // if uris are different between segments there was a change
+
+      if (aSegment.uri !== bSegment.uri) {
+        return false;
+      } // neither segment has a byterange, there will be no byterange change.
+
+      if (!aSegment.byterange && !bSegment.byterange) {
+        continue;
+      }
+      const aByterange = aSegment.byterange;
+      const bByterange = bSegment.byterange; // if byterange only exists on one of the segments, there was a change.
+
+      if (aByterange && !bByterange || !aByterange && bByterange) {
+        return false;
+      } // if both segments have byterange with different offsets, there was a change.
+
+      if (aByterange.offset !== bByterange.offset || aByterange.length !== bByterange.length) {
+        return false;
+      }
+    } // if everything was the same with segments, this is the same playlist.
+
+    return true;
+  };
+  /**
+   * Use the representation IDs from the mpd object to create groupIDs, the NAME is set to mandatory representation
+   * ID in the parser. This allows for continuous playout across periods with the same representation IDs
+   * (continuous periods as defined in DASH-IF 3.2.12). This is assumed in the mpd-parser as well. If we want to support
+   * periods without continuous playback this function may need modification as well as the parser.
+   */
+
+  const dashGroupId = (type, group, label, playlist) => {
+    // If the manifest somehow does not have an ID (non-dash compliant), use the label.
+    const playlistId = playlist.attributes.NAME || label;
+    return `placeholder-uri-${type}-${group}-${playlistId}`;
+  };
+  /**
+   * Parses the main XML string and updates playlist URI references.
+   *
+   * @param {Object} config
+   *        Object of arguments
+   * @param {string} config.mainXml
+   *        The mpd XML
+   * @param {string} config.srcUrl
+   *        The mpd URL
+   * @param {Date} config.clientOffset
+   *         A time difference between server and client
+   * @param {Object} config.sidxMapping
+   *        SIDX mappings for moof/mdat URIs and byte ranges
+   * @return {Object}
+   *         The parsed mpd manifest object
+   */
+
+  const parseMainXml = ({
+    mainXml,
+    srcUrl,
+    clientOffset,
+    sidxMapping,
+    previousManifest
+  }) => {
+    const manifest = parse(mainXml, {
+      manifestUri: srcUrl,
+      clientOffset,
+      sidxMapping,
+      previousManifest
+    });
+    addPropertiesToMain(manifest, srcUrl, dashGroupId);
+    return manifest;
+  };
+  /**
+   * Removes any mediaGroup labels that no longer exist in the newMain
+   *
+   * @param {Object} update
+   *         The previous mpd object being updated
+   * @param {Object} newMain
+   *         The new mpd object
+   */
+
+  const removeOldMediaGroupLabels = (update, newMain) => {
+    forEachMediaGroup(update, (properties, type, group, label) => {
+      if (!(label in newMain.mediaGroups[type][group])) {
+        delete update.mediaGroups[type][group][label];
+      }
+    });
+  };
+  /**
+   * Returns a new main manifest that is the result of merging an updated main manifest
+   * into the original version.
+   *
+   * @param {Object} oldMain
+   *        The old parsed mpd object
+   * @param {Object} newMain
+   *        The updated parsed mpd object
+   * @return {Object}
+   *         A new object representing the original main manifest with the updated media
+   *         playlists merged in
+   */
+
+  const updateMain = (oldMain, newMain, sidxMapping) => {
+    let noChanges = true;
+    let update = merge(oldMain, {
+      // These are top level properties that can be updated
+      duration: newMain.duration,
+      minimumUpdatePeriod: newMain.minimumUpdatePeriod,
+      timelineStarts: newMain.timelineStarts
+    }); // First update the playlists in playlist list
+
+    for (let i = 0; i < newMain.playlists.length; i++) {
+      const playlist = newMain.playlists[i];
+      if (playlist.sidx) {
+        const sidxKey = generateSidxKey(playlist.sidx); // add sidx segments to the playlist if we have all the sidx info already
+
+        if (sidxMapping && sidxMapping[sidxKey] && sidxMapping[sidxKey].sidx) {
+          addSidxSegmentsToPlaylist$1(playlist, sidxMapping[sidxKey].sidx, playlist.sidx.resolvedUri);
+        }
+      }
+      const playlistUpdate = updateMain$1(update, playlist, dashPlaylistUnchanged);
+      if (playlistUpdate) {
+        update = playlistUpdate;
+        noChanges = false;
+      }
+    } // Then update media group playlists
+
+    forEachMediaGroup(newMain, (properties, type, group, label) => {
+      if (properties.playlists && properties.playlists.length) {
+        const id = properties.playlists[0].id;
+        const playlistUpdate = updateMain$1(update, properties.playlists[0], dashPlaylistUnchanged);
+        if (playlistUpdate) {
+          update = playlistUpdate; // add new mediaGroup label if it doesn't exist and assign the new mediaGroup.
+
+          if (!(label in update.mediaGroups[type][group])) {
+            update.mediaGroups[type][group][label] = properties;
+          } // update the playlist reference within media groups
+
+          update.mediaGroups[type][group][label].playlists[0] = update.playlists[id];
+          noChanges = false;
+        }
+      }
+    }); // remove mediaGroup labels and references that no longer exist in the newMain
+
+    removeOldMediaGroupLabels(update, newMain);
+    if (newMain.minimumUpdatePeriod !== oldMain.minimumUpdatePeriod) {
+      noChanges = false;
+    }
+    if (noChanges) {
+      return null;
+    }
+    return update;
+  }; // SIDX should be equivalent if the URI and byteranges of the SIDX match.
+  // If the SIDXs have maps, the two maps should match,
+  // both `a` and `b` missing SIDXs is considered matching.
+  // If `a` or `b` but not both have a map, they aren't matching.
+
+  const equivalentSidx = (a, b) => {
+    const neitherMap = Boolean(!a.map && !b.map);
+    const equivalentMap = neitherMap || Boolean(a.map && b.map && a.map.byterange.offset === b.map.byterange.offset && a.map.byterange.length === b.map.byterange.length);
+    return equivalentMap && a.uri === b.uri && a.byterange.offset === b.byterange.offset && a.byterange.length === b.byterange.length;
+  }; // exported for testing
+
+  const compareSidxEntry = (playlists, oldSidxMapping) => {
+    const newSidxMapping = {};
+    for (const id in playlists) {
+      const playlist = playlists[id];
+      const currentSidxInfo = playlist.sidx;
+      if (currentSidxInfo) {
+        const key = generateSidxKey(currentSidxInfo);
+        if (!oldSidxMapping[key]) {
+          break;
+        }
+        const savedSidxInfo = oldSidxMapping[key].sidxInfo;
+        if (equivalentSidx(savedSidxInfo, currentSidxInfo)) {
+          newSidxMapping[key] = oldSidxMapping[key];
+        }
+      }
+    }
+    return newSidxMapping;
+  };
+  /**
+   *  A function that filters out changed items as they need to be requested separately.
+   *
+   *  The method is exported for testing
+   *
+   *  @param {Object} main the parsed mpd XML returned via mpd-parser
+   *  @param {Object} oldSidxMapping the SIDX to compare against
+   */
+
+  const filterChangedSidxMappings = (main, oldSidxMapping) => {
+    const videoSidx = compareSidxEntry(main.playlists, oldSidxMapping);
+    let mediaGroupSidx = videoSidx;
+    forEachMediaGroup(main, (properties, mediaType, groupKey, labelKey) => {
+      if (properties.playlists && properties.playlists.length) {
+        const playlists = properties.playlists;
+        mediaGroupSidx = merge(mediaGroupSidx, compareSidxEntry(playlists, oldSidxMapping));
+      }
+    });
+    return mediaGroupSidx;
+  };
+  class DashPlaylistLoader extends EventTarget {
+    // DashPlaylistLoader must accept either a src url or a playlist because subsequent
+    // playlist loader setups from media groups will expect to be able to pass a playlist
+    // (since there aren't external URLs to media playlists with DASH)
+    constructor(srcUrlOrPlaylist, vhs, options = {}, mainPlaylistLoader) {
+      super();
+      this.mainPlaylistLoader_ = mainPlaylistLoader || this;
+      if (!mainPlaylistLoader) {
+        this.isMain_ = true;
+      }
+      const {
+        withCredentials = false
+      } = options;
+      this.vhs_ = vhs;
+      this.withCredentials = withCredentials;
+      this.addMetadataToTextTrack = options.addMetadataToTextTrack;
+      if (!srcUrlOrPlaylist) {
+        throw new Error('A non-empty playlist URL or object is required');
+      } // event naming?
+
+      this.on('minimumUpdatePeriod', () => {
+        this.refreshXml_();
+      }); // live playlist staleness timeout
+
+      this.on('mediaupdatetimeout', () => {
+        this.refreshMedia_(this.media().id);
+      });
+      this.state = 'HAVE_NOTHING';
+      this.loadedPlaylists_ = {};
+      this.logger_ = logger('DashPlaylistLoader'); // initialize the loader state
+      // The mainPlaylistLoader will be created with a string
+
+      if (this.isMain_) {
+        this.mainPlaylistLoader_.srcUrl = srcUrlOrPlaylist; // TODO: reset sidxMapping between period changes
+        // once multi-period is refactored
+
+        this.mainPlaylistLoader_.sidxMapping_ = {};
+      } else {
+        this.childPlaylist_ = srcUrlOrPlaylist;
+      }
+    }
+    requestErrored_(err, request, startingState) {
+      // disposed
+      if (!this.request) {
+        return true;
+      } // pending request is cleared
+
+      this.request = null;
+      if (err) {
+        // use the provided error object or create one
+        // based on the request/response
+        this.error = typeof err === 'object' && !(err instanceof Error) ? err : {
+          status: request.status,
+          message: 'DASH request error at URL: ' + request.uri,
+          response: request.response,
+          // MEDIA_ERR_NETWORK
+          code: 2,
+          metadata: err.metadata
+        };
+        if (startingState) {
+          this.state = startingState;
+        }
+        this.trigger('error');
+        return true;
+      }
+    }
+    /**
+     * Verify that the container of the sidx segment can be parsed
+     * and if it can, get and parse that segment.
+     */
+
+    addSidxSegments_(playlist, startingState, cb) {
+      const sidxKey = playlist.sidx && generateSidxKey(playlist.sidx); // playlist lacks sidx or sidx segments were added to this playlist already.
+
+      if (!playlist.sidx || !sidxKey || this.mainPlaylistLoader_.sidxMapping_[sidxKey]) {
+        // keep this function async
+        this.mediaRequest_ = window.setTimeout(() => cb(false), 0);
+        return;
+      } // resolve the segment URL relative to the playlist
+
+      const uri = resolveManifestRedirect(playlist.sidx.resolvedUri);
+      const fin = (err, request) => {
+        // TODO: add error metdata here once we create an error type in video.js
+        if (this.requestErrored_(err, request, startingState)) {
+          return;
+        }
+        const sidxMapping = this.mainPlaylistLoader_.sidxMapping_;
+        let sidx;
+        try {
+          sidx = parseSidx_1(toUint8(request.response).subarray(8));
+        } catch (e) {
+          e.metadata = {
+            errorType: videojs.Error.DashManifestSidxParsingError
+          }; // sidx parsing failed.
+
+          this.requestErrored_(e, request, startingState);
+          return;
+        }
+        sidxMapping[sidxKey] = {
+          sidxInfo: playlist.sidx,
+          sidx
+        };
+        addSidxSegmentsToPlaylist$1(playlist, sidx, playlist.sidx.resolvedUri);
+        return cb(true);
+      };
+      this.request = containerRequest(uri, this.vhs_.xhr, (err, request, container, bytes) => {
+        if (err) {
+          return fin(err, request);
+        }
+        if (!container || container !== 'mp4') {
+          const sidxContainer = container || 'unknown';
+          return fin({
+            status: request.status,
+            message: `Unsupported ${sidxContainer} container type for sidx segment at URL: ${uri}`,
+            // response is just bytes in this case
+            // but we really don't want to return that.
+            response: '',
+            playlist,
+            internal: true,
+            playlistExclusionDuration: Infinity,
+            // MEDIA_ERR_NETWORK
+            code: 2,
+            metadata: {
+              errorType: videojs.Error.UnsupportedSidxContainer,
+              sidxContainer
+            }
+          }, request);
+        } // if we already downloaded the sidx bytes in the container request, use them
+
+        const {
+          offset,
+          length
+        } = playlist.sidx.byterange;
+        if (bytes.length >= length + offset) {
+          return fin(err, {
+            response: bytes.subarray(offset, offset + length),
+            status: request.status,
+            uri: request.uri
+          });
+        } // otherwise request sidx bytes
+
+        this.request = this.vhs_.xhr({
+          uri,
+          responseType: 'arraybuffer',
+          headers: segmentXhrHeaders({
+            byterange: playlist.sidx.byterange
+          })
+        }, fin);
+      });
+    }
+    dispose() {
+      this.trigger('dispose');
+      this.stopRequest();
+      this.loadedPlaylists_ = {};
+      window.clearTimeout(this.minimumUpdatePeriodTimeout_);
+      window.clearTimeout(this.mediaRequest_);
+      window.clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+      this.mediaRequest_ = null;
+      this.minimumUpdatePeriodTimeout_ = null;
+      if (this.mainPlaylistLoader_.createMupOnMedia_) {
+        this.off('loadedmetadata', this.mainPlaylistLoader_.createMupOnMedia_);
+        this.mainPlaylistLoader_.createMupOnMedia_ = null;
+      }
+      this.off();
+    }
+    hasPendingRequest() {
+      return this.request || this.mediaRequest_;
+    }
+    stopRequest() {
+      if (this.request) {
+        const oldRequest = this.request;
+        this.request = null;
+        oldRequest.onreadystatechange = null;
+        oldRequest.abort();
+      }
+    }
+    media(playlist) {
+      // getter
+      if (!playlist) {
+        return this.media_;
+      } // setter
+
+      if (this.state === 'HAVE_NOTHING') {
+        throw new Error('Cannot switch media playlist from ' + this.state);
+      }
+      const startingState = this.state; // find the playlist object if the target playlist has been specified by URI
+
+      if (typeof playlist === 'string') {
+        if (!this.mainPlaylistLoader_.main.playlists[playlist]) {
+          throw new Error('Unknown playlist URI: ' + playlist);
+        }
+        playlist = this.mainPlaylistLoader_.main.playlists[playlist];
+      }
+      const mediaChange = !this.media_ || playlist.id !== this.media_.id; // switch to previously loaded playlists immediately
+
+      if (mediaChange && this.loadedPlaylists_[playlist.id] && this.loadedPlaylists_[playlist.id].endList) {
+        this.state = 'HAVE_METADATA';
+        this.media_ = playlist; // trigger media change if the active media has been updated
+
+        if (mediaChange) {
+          this.trigger('mediachanging');
+          this.trigger('mediachange');
+        }
+        return;
+      } // switching to the active playlist is a no-op
+
+      if (!mediaChange) {
+        return;
+      } // switching from an already loaded playlist
+
+      if (this.media_) {
+        this.trigger('mediachanging');
+      }
+      this.addSidxSegments_(playlist, startingState, sidxChanged => {
+        // everything is ready just continue to haveMetadata
+        this.haveMetadata({
+          startingState,
+          playlist
+        });
+      });
+    }
+    haveMetadata({
+      startingState,
+      playlist
+    }) {
+      this.state = 'HAVE_METADATA';
+      this.loadedPlaylists_[playlist.id] = playlist;
+      this.mediaRequest_ = null; // This will trigger loadedplaylist
+
+      this.refreshMedia_(playlist.id); // fire loadedmetadata the first time a media playlist is loaded
+      // to resolve setup of media groups
+
+      if (startingState === 'HAVE_MAIN_MANIFEST') {
+        this.trigger('loadedmetadata');
+      } else {
+        // trigger media change if the active media has been updated
+        this.trigger('mediachange');
+      }
+    }
+    pause() {
+      if (this.mainPlaylistLoader_.createMupOnMedia_) {
+        this.off('loadedmetadata', this.mainPlaylistLoader_.createMupOnMedia_);
+        this.mainPlaylistLoader_.createMupOnMedia_ = null;
+      }
+      this.stopRequest();
+      window.clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+      if (this.isMain_) {
+        window.clearTimeout(this.mainPlaylistLoader_.minimumUpdatePeriodTimeout_);
+        this.mainPlaylistLoader_.minimumUpdatePeriodTimeout_ = null;
+      }
+      if (this.state === 'HAVE_NOTHING') {
+        // If we pause the loader before any data has been retrieved, its as if we never
+        // started, so reset to an unstarted state.
+        this.started = false;
+      }
+    }
+    load(isFinalRendition) {
+      window.clearTimeout(this.mediaUpdateTimeout);
+      this.mediaUpdateTimeout = null;
+      const media = this.media();
+      if (isFinalRendition) {
+        const delay = media ? media.targetDuration / 2 * 1000 : 5 * 1000;
+        this.mediaUpdateTimeout = window.setTimeout(() => this.load(), delay);
+        return;
+      } // because the playlists are internal to the manifest, load should either load the
+      // main manifest, or do nothing but trigger an event
+
+      if (!this.started) {
+        this.start();
+        return;
+      }
+      if (media && !media.endList) {
+        // Check to see if this is the main loader and the MUP was cleared (this happens
+        // when the loader was paused). `media` should be set at this point since one is always
+        // set during `start()`.
+        if (this.isMain_ && !this.minimumUpdatePeriodTimeout_) {
+          // Trigger minimumUpdatePeriod to refresh the main manifest
+          this.trigger('minimumUpdatePeriod'); // Since there was no prior minimumUpdatePeriodTimeout it should be recreated
+
+          this.updateMinimumUpdatePeriodTimeout_();
+        }
+        this.trigger('mediaupdatetimeout');
+      } else {
+        this.trigger('loadedplaylist');
+      }
+    }
+    start() {
+      this.started = true; // We don't need to request the main manifest again
+      // Call this asynchronously to match the xhr request behavior below
+
+      if (!this.isMain_) {
+        this.mediaRequest_ = window.setTimeout(() => this.haveMain_(), 0);
+        return;
+      }
+      this.requestMain_((req, mainChanged) => {
+        this.haveMain_();
+        if (!this.hasPendingRequest() && !this.media_) {
+          this.media(this.mainPlaylistLoader_.main.playlists[0]);
+        }
+      });
+    }
+    requestMain_(cb) {
+      this.request = this.vhs_.xhr({
+        uri: this.mainPlaylistLoader_.srcUrl,
+        withCredentials: this.withCredentials,
+        requestType: 'dash-manifest'
+      }, (error, req) => {
+        if (this.requestErrored_(error, req)) {
+          if (this.state === 'HAVE_NOTHING') {
+            this.started = false;
+          }
+          return;
+        }
+        const mainChanged = req.responseText !== this.mainPlaylistLoader_.mainXml_;
+        this.mainPlaylistLoader_.mainXml_ = req.responseText;
+        if (req.responseHeaders && req.responseHeaders.date) {
+          this.mainLoaded_ = Date.parse(req.responseHeaders.date);
+        } else {
+          this.mainLoaded_ = Date.now();
+        }
+        this.mainPlaylistLoader_.srcUrl = resolveManifestRedirect(this.mainPlaylistLoader_.srcUrl, req);
+        if (mainChanged) {
+          this.handleMain_();
+          this.syncClientServerClock_(() => {
+            return cb(req, mainChanged);
+          });
+          return;
+        }
+        return cb(req, mainChanged);
+      });
+    }
+    /**
+     * Parses the main xml for UTCTiming node to sync the client clock to the server
+     * clock. If the UTCTiming node requires a HEAD or GET request, that request is made.
+     *
+     * @param {Function} done
+     *        Function to call when clock sync has completed
+     */
+
+    syncClientServerClock_(done) {
+      const utcTiming = parseUTCTiming(this.mainPlaylistLoader_.mainXml_); // No UTCTiming element found in the mpd. Use Date header from mpd request as the
+      // server clock
+
+      if (utcTiming === null) {
+        this.mainPlaylistLoader_.clientOffset_ = this.mainLoaded_ - Date.now();
+        return done();
+      }
+      if (utcTiming.method === 'DIRECT') {
+        this.mainPlaylistLoader_.clientOffset_ = utcTiming.value - Date.now();
+        return done();
+      }
+      this.request = this.vhs_.xhr({
+        uri: resolveUrl(this.mainPlaylistLoader_.srcUrl, utcTiming.value),
+        method: utcTiming.method,
+        withCredentials: this.withCredentials,
+        requestType: 'dash-clock-sync'
+      }, (error, req) => {
+        // disposed
+        if (!this.request) {
+          return;
+        }
+        if (error) {
+          // sync request failed, fall back to using date header from mpd
+          // TODO: log warning
+          this.mainPlaylistLoader_.clientOffset_ = this.mainLoaded_ - Date.now();
+          return done();
+        }
+        let serverTime;
+        if (utcTiming.method === 'HEAD') {
+          if (!req.responseHeaders || !req.responseHeaders.date) {
+            // expected date header not preset, fall back to using date header from mpd
+            // TODO: log warning
+            serverTime = this.mainLoaded_;
+          } else {
+            serverTime = Date.parse(req.responseHeaders.date);
+          }
+        } else {
+          serverTime = Date.parse(req.responseText);
+        }
+        this.mainPlaylistLoader_.clientOffset_ = serverTime - Date.now();
+        done();
+      });
+    }
+    haveMain_() {
+      this.state = 'HAVE_MAIN_MANIFEST';
+      if (this.isMain_) {
+        // We have the main playlist at this point, so
+        // trigger this to allow PlaylistController
+        // to make an initial playlist selection
+        this.trigger('loadedplaylist');
+      } else if (!this.media_) {
+        // no media playlist was specifically selected so select
+        // the one the child playlist loader was created with
+        this.media(this.childPlaylist_);
+      }
+    }
+    handleMain_() {
+      // clear media request
+      this.mediaRequest_ = null;
+      const oldMain = this.mainPlaylistLoader_.main;
+      let newMain = parseMainXml({
+        mainXml: this.mainPlaylistLoader_.mainXml_,
+        srcUrl: this.mainPlaylistLoader_.srcUrl,
+        clientOffset: this.mainPlaylistLoader_.clientOffset_,
+        sidxMapping: this.mainPlaylistLoader_.sidxMapping_,
+        previousManifest: oldMain
+      }); // if we have an old main to compare the new main against
+
+      if (oldMain) {
+        newMain = updateMain(oldMain, newMain, this.mainPlaylistLoader_.sidxMapping_);
+      } // only update main if we have a new main
+
+      this.mainPlaylistLoader_.main = newMain ? newMain : oldMain;
+      const location = this.mainPlaylistLoader_.main.locations && this.mainPlaylistLoader_.main.locations[0];
+      if (location && location !== this.mainPlaylistLoader_.srcUrl) {
+        this.mainPlaylistLoader_.srcUrl = location;
+      }
+      if (!oldMain || newMain && newMain.minimumUpdatePeriod !== oldMain.minimumUpdatePeriod) {
+        this.updateMinimumUpdatePeriodTimeout_();
+      }
+      this.addEventStreamToMetadataTrack_(newMain);
+      return Boolean(newMain);
+    }
+    updateMinimumUpdatePeriodTimeout_() {
+      const mpl = this.mainPlaylistLoader_; // cancel any pending creation of mup on media
+      // a new one will be added if needed.
+
+      if (mpl.createMupOnMedia_) {
+        mpl.off('loadedmetadata', mpl.createMupOnMedia_);
+        mpl.createMupOnMedia_ = null;
+      } // clear any pending timeouts
+
+      if (mpl.minimumUpdatePeriodTimeout_) {
+        window.clearTimeout(mpl.minimumUpdatePeriodTimeout_);
+        mpl.minimumUpdatePeriodTimeout_ = null;
+      }
+      let mup = mpl.main && mpl.main.minimumUpdatePeriod; // If the minimumUpdatePeriod has a value of 0, that indicates that the current
+      // MPD has no future validity, so a new one will need to be acquired when new
+      // media segments are to be made available. Thus, we use the target duration
+      // in this case
+
+      if (mup === 0) {
+        if (mpl.media()) {
+          mup = mpl.media().targetDuration * 1000;
+        } else {
+          mpl.createMupOnMedia_ = mpl.updateMinimumUpdatePeriodTimeout_;
+          mpl.one('loadedmetadata', mpl.createMupOnMedia_);
+        }
+      } // if minimumUpdatePeriod is invalid or <= zero, which
+      // can happen when a live video becomes VOD. skip timeout
+      // creation.
+
+      if (typeof mup !== 'number' || mup <= 0) {
+        if (mup < 0) {
+          this.logger_(`found invalid minimumUpdatePeriod of ${mup}, not setting a timeout`);
+        }
+        return;
+      }
+      this.createMUPTimeout_(mup);
+    }
+    createMUPTimeout_(mup) {
+      const mpl = this.mainPlaylistLoader_;
+      mpl.minimumUpdatePeriodTimeout_ = window.setTimeout(() => {
+        mpl.minimumUpdatePeriodTimeout_ = null;
+        mpl.trigger('minimumUpdatePeriod');
+        mpl.createMUPTimeout_(mup);
+      }, mup);
+    }
+    /**
+     * Sends request to refresh the main xml and updates the parsed main manifest
+     */
+
+    refreshXml_() {
+      this.requestMain_((req, mainChanged) => {
+        if (!mainChanged) {
+          return;
+        }
+        if (this.media_) {
+          this.media_ = this.mainPlaylistLoader_.main.playlists[this.media_.id];
+        } // This will filter out updated sidx info from the mapping
+
+        this.mainPlaylistLoader_.sidxMapping_ = filterChangedSidxMappings(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.sidxMapping_);
+        this.addSidxSegments_(this.media(), this.state, sidxChanged => {
+          // TODO: do we need to reload the current playlist?
+          this.refreshMedia_(this.media().id);
+        });
+      });
+    }
+    /**
+     * Refreshes the media playlist by re-parsing the main xml and updating playlist
+     * references. If this is an alternate loader, the updated parsed manifest is retrieved
+     * from the main loader.
+     */
+
+    refreshMedia_(mediaID) {
+      if (!mediaID) {
+        throw new Error('refreshMedia_ must take a media id');
+      } // for main we have to reparse the main xml
+      // to re-create segments based on current timing values
+      // which may change media. We only skip updating the main manifest
+      // if this is the first time this.media_ is being set.
+      // as main was just parsed in that case.
+
+      if (this.media_ && this.isMain_) {
+        this.handleMain_();
+      }
+      const playlists = this.mainPlaylistLoader_.main.playlists;
+      const mediaChanged = !this.media_ || this.media_ !== playlists[mediaID];
+      if (mediaChanged) {
+        this.media_ = playlists[mediaID];
+      } else {
+        this.trigger('playlistunchanged');
+      }
+      if (!this.mediaUpdateTimeout) {
+        const createMediaUpdateTimeout = () => {
+          if (this.media().endList) {
+            return;
+          }
+          this.mediaUpdateTimeout = window.setTimeout(() => {
+            this.trigger('mediaupdatetimeout');
+            createMediaUpdateTimeout();
+          }, refreshDelay(this.media(), Boolean(mediaChanged)));
+        };
+        createMediaUpdateTimeout();
+      }
+      this.trigger('loadedplaylist');
+    }
+    /**
+     * Takes eventstream data from a parsed DASH manifest and adds it to the metadata text track.
+     *
+     * @param {manifest} newMain the newly parsed manifest
+     */
+
+    addEventStreamToMetadataTrack_(newMain) {
+      // Only add new event stream metadata if we have a new manifest.
+      if (newMain && this.mainPlaylistLoader_.main.eventStream) {
+        // convert EventStream to ID3-like data.
+        const metadataArray = this.mainPlaylistLoader_.main.eventStream.map(eventStreamNode => {
+          return {
+            cueTime: eventStreamNode.start,
+            frames: [{
+              data: eventStreamNode.messageData
+            }]
+          };
+        });
+        this.addMetadataToTextTrack('EventStream', metadataArray, this.mainPlaylistLoader_.main.duration);
+      }
+    }
+    /**
+     * Returns the key ID set from a playlist
+     *
+     * @param {playlist} playlist to fetch the key ID set from.
+     * @return a Set of 32 digit hex strings that represent the unique keyIds for that playlist.
+     */
+
+    getKeyIdSet(playlist) {
+      if (playlist.contentProtection) {
+        const keyIds = new Set();
+        for (const keysystem in playlist.contentProtection) {
+          const defaultKID = playlist.contentProtection[keysystem].attributes['cenc:default_KID'];
+          if (defaultKID) {
+            // DASH keyIds are separated by dashes.
+            keyIds.add(defaultKID.replace(/-/g, '').toLowerCase());
+          }
+        }
+        return keyIds;
+      }
+    }
+  }
+  var Config = {
+    GOAL_BUFFER_LENGTH: 30,
+    MAX_GOAL_BUFFER_LENGTH: 60,
+    BACK_BUFFER_LENGTH: 30,
+    GOAL_BUFFER_LENGTH_RATE: 1,
+    // 0.5 MB/s
+    INITIAL_BANDWIDTH: 4194304,
+    // A fudge factor to apply to advertised playlist bitrates to account for
+    // temporary flucations in client bandwidth
+    BANDWIDTH_VARIANCE: 1.2,
+    // How much of the buffer must be filled before we consider upswitching
+    BUFFER_LOW_WATER_LINE: 0,
+    MAX_BUFFER_LOW_WATER_LINE: 30,
+    // TODO: Remove this when experimentalBufferBasedABR is removed
+    EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE: 16,
+    BUFFER_LOW_WATER_LINE_RATE: 1,
+    // If the buffer is greater than the high water line, we won't switch down
+    BUFFER_HIGH_WATER_LINE: 30
+  };
+  const stringToArrayBuffer = string => {
+    const view = new Uint8Array(new ArrayBuffer(string.length));
+    for (let i = 0; i < string.length; i++) {
+      view[i] = string.charCodeAt(i);
+    }
+    return view.buffer;
+  };
+
+  /* global Blob, BlobBuilder, Worker */
+  // unify worker interface
+  const browserWorkerPolyFill = function (workerObj) {
+    // node only supports on/off
+    workerObj.on = workerObj.addEventListener;
+    workerObj.off = workerObj.removeEventListener;
+    return workerObj;
+  };
+  const createObjectURL = function (str) {
+    try {
+      return URL.createObjectURL(new Blob([str], {
+        type: 'application/javascript'
+      }));
+    } catch (e) {
+      const blob = new BlobBuilder();
+      blob.append(str);
+      return URL.createObjectURL(blob.getBlob());
+    }
+  };
+  const factory = function (code) {
+    return function () {
+      const objectUrl = createObjectURL(code);
+      const worker = browserWorkerPolyFill(new Worker(objectUrl));
+      worker.objURL = objectUrl;
+      const terminate = worker.terminate;
+      worker.on = worker.addEventListener;
+      worker.off = worker.removeEventListener;
+      worker.terminate = function () {
+        URL.revokeObjectURL(objectUrl);
+        return terminate.call(this);
+      };
+      return worker;
+    };
+  };
+  const transform = function (code) {
+    return `var browserWorkerPolyFill = ${browserWorkerPolyFill.toString()};\n` + 'browserWorkerPolyFill(self);\n' + code;
+  };
+  const getWorkerString = function (fn) {
+    return fn.toString().replace(/^function.+?{/, '').slice(0, -1);
+  };
+
+  /* rollup-plugin-worker-factory start for worker!/home/runner/work/http-streaming/http-streaming/src/transmuxer-worker.js */
+  const workerCode$1 = transform(getWorkerString(function () {
+    var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * A lightweight readable stream implemention that handles event dispatching.
+     * Objects that inherit from streams should call init in their constructors.
+     */
+
+    var Stream$8 = function () {
+      this.init = function () {
+        var listeners = {};
+        /**
+         * Add a listener for a specified event type.
+         * @param type {string} the event name
+         * @param listener {function} the callback to be invoked when an event of
+         * the specified type occurs
+         */
+
+        this.on = function (type, listener) {
+          if (!listeners[type]) {
+            listeners[type] = [];
+          }
+          listeners[type] = listeners[type].concat(listener);
+        };
+        /**
+         * Remove a listener for a specified event type.
+         * @param type {string} the event name
+         * @param listener {function} a function previously registered for this
+         * type of event through `on`
+         */
+
+        this.off = function (type, listener) {
+          var index;
+          if (!listeners[type]) {
+            return false;
+          }
+          index = listeners[type].indexOf(listener);
+          listeners[type] = listeners[type].slice();
+          listeners[type].splice(index, 1);
+          return index > -1;
+        };
+        /**
+         * Trigger an event of the specified type on this stream. Any additional
+         * arguments to this function are passed as parameters to event listeners.
+         * @param type {string} the event name
+         */
+
+        this.trigger = function (type) {
+          var callbacks, i, length, args;
+          callbacks = listeners[type];
+          if (!callbacks) {
+            return;
+          } // Slicing the arguments on every invocation of this method
+          // can add a significant amount of overhead. Avoid the
+          // intermediate object creation for the common case of a
+          // single callback argument
+
+          if (arguments.length === 2) {
+            length = callbacks.length;
+            for (i = 0; i < length; ++i) {
+              callbacks[i].call(this, arguments[1]);
+            }
+          } else {
+            args = [];
+            i = arguments.length;
+            for (i = 1; i < arguments.length; ++i) {
+              args.push(arguments[i]);
+            }
+            length = callbacks.length;
+            for (i = 0; i < length; ++i) {
+              callbacks[i].apply(this, args);
+            }
+          }
+        };
+        /**
+         * Destroys the stream and cleans up.
+         */
+
+        this.dispose = function () {
+          listeners = {};
+        };
+      };
+    };
+    /**
+     * Forwards all `data` events on this stream to the destination stream. The
+     * destination stream should provide a method `push` to receive the data
+     * events as they arrive.
+     * @param destination {stream} the stream that will receive all `data` events
+     * @param autoFlush {boolean} if false, we will not call `flush` on the destination
+     *                            when the current stream emits a 'done' event
+     * @see http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options
+     */
+
+    Stream$8.prototype.pipe = function (destination) {
+      this.on('data', function (data) {
+        destination.push(data);
+      });
+      this.on('done', function (flushSource) {
+        destination.flush(flushSource);
+      });
+      this.on('partialdone', function (flushSource) {
+        destination.partialFlush(flushSource);
+      });
+      this.on('endedtimeline', function (flushSource) {
+        destination.endTimeline(flushSource);
+      });
+      this.on('reset', function (flushSource) {
+        destination.reset(flushSource);
+      });
+      return destination;
+    }; // Default stream functions that are expected to be overridden to perform
+    // actual work. These are provided by the prototype as a sort of no-op
+    // implementation so that we don't have to check for their existence in the
+    // `pipe` function above.
+
+    Stream$8.prototype.push = function (data) {
+      this.trigger('data', data);
+    };
+    Stream$8.prototype.flush = function (flushSource) {
+      this.trigger('done', flushSource);
+    };
+    Stream$8.prototype.partialFlush = function (flushSource) {
+      this.trigger('partialdone', flushSource);
+    };
+    Stream$8.prototype.endTimeline = function (flushSource) {
+      this.trigger('endedtimeline', flushSource);
+    };
+    Stream$8.prototype.reset = function (flushSource) {
+      this.trigger('reset', flushSource);
+    };
+    var stream = Stream$8;
+    var MAX_UINT32$1 = Math.pow(2, 32);
+    var getUint64$3 = function (uint8) {
+      var dv = new DataView(uint8.buffer, uint8.byteOffset, uint8.byteLength);
+      var value;
+      if (dv.getBigUint64) {
+        value = dv.getBigUint64(0);
+        if (value < Number.MAX_SAFE_INTEGER) {
+          return Number(value);
+        }
+        return value;
+      }
+      return dv.getUint32(0) * MAX_UINT32$1 + dv.getUint32(4);
+    };
+    var numbers = {
+      getUint64: getUint64$3,
+      MAX_UINT32: MAX_UINT32$1
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Functions that generate fragmented MP4s suitable for use with Media
+     * Source Extensions.
+     */
+
+    var MAX_UINT32 = numbers.MAX_UINT32;
+    var box, dinf, esds, ftyp, mdat, mfhd, minf, moof, moov, mvex, mvhd, trak, tkhd, mdia, mdhd, hdlr, sdtp, stbl, stsd, traf, trex, trun$1, types, MAJOR_BRAND, MINOR_VERSION, AVC1_BRAND, VIDEO_HDLR, AUDIO_HDLR, HDLR_TYPES, VMHD, SMHD, DREF, STCO, STSC, STSZ, STTS; // pre-calculate constants
+
+    (function () {
+      var i;
+      types = {
+        avc1: [],
+        // codingname
+        avcC: [],
+        btrt: [],
+        dinf: [],
+        dref: [],
+        esds: [],
+        ftyp: [],
+        hdlr: [],
+        mdat: [],
+        mdhd: [],
+        mdia: [],
+        mfhd: [],
+        minf: [],
+        moof: [],
+        moov: [],
+        mp4a: [],
+        // codingname
+        mvex: [],
+        mvhd: [],
+        pasp: [],
+        sdtp: [],
+        smhd: [],
+        stbl: [],
+        stco: [],
+        stsc: [],
+        stsd: [],
+        stsz: [],
+        stts: [],
+        styp: [],
+        tfdt: [],
+        tfhd: [],
+        traf: [],
+        trak: [],
+        trun: [],
+        trex: [],
+        tkhd: [],
+        vmhd: []
+      }; // In environments where Uint8Array is undefined (e.g., IE8), skip set up so that we
+      // don't throw an error
+
+      if (typeof Uint8Array === 'undefined') {
+        return;
+      }
+      for (i in types) {
+        if (types.hasOwnProperty(i)) {
+          types[i] = [i.charCodeAt(0), i.charCodeAt(1), i.charCodeAt(2), i.charCodeAt(3)];
+        }
+      }
+      MAJOR_BRAND = new Uint8Array(['i'.charCodeAt(0), 's'.charCodeAt(0), 'o'.charCodeAt(0), 'm'.charCodeAt(0)]);
+      AVC1_BRAND = new Uint8Array(['a'.charCodeAt(0), 'v'.charCodeAt(0), 'c'.charCodeAt(0), '1'.charCodeAt(0)]);
+      MINOR_VERSION = new Uint8Array([0, 0, 0, 1]);
+      VIDEO_HDLR = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x00,
+      // pre_defined
+      0x76, 0x69, 0x64, 0x65,
+      // handler_type: 'vide'
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x56, 0x69, 0x64, 0x65, 0x6f, 0x48, 0x61, 0x6e, 0x64, 0x6c, 0x65, 0x72, 0x00 // name: 'VideoHandler'
+      ]);
+
+      AUDIO_HDLR = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x00,
+      // pre_defined
+      0x73, 0x6f, 0x75, 0x6e,
+      // handler_type: 'soun'
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x53, 0x6f, 0x75, 0x6e, 0x64, 0x48, 0x61, 0x6e, 0x64, 0x6c, 0x65, 0x72, 0x00 // name: 'SoundHandler'
+      ]);
+
+      HDLR_TYPES = {
+        video: VIDEO_HDLR,
+        audio: AUDIO_HDLR
+      };
+      DREF = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x01,
+      // entry_count
+      0x00, 0x00, 0x00, 0x0c,
+      // entry_size
+      0x75, 0x72, 0x6c, 0x20,
+      // 'url' type
+      0x00,
+      // version 0
+      0x00, 0x00, 0x01 // entry_flags
+      ]);
+
+      SMHD = new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00,
+      // balance, 0 means centered
+      0x00, 0x00 // reserved
+      ]);
+
+      STCO = new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x00 // entry_count
+      ]);
+
+      STSC = STCO;
+      STSZ = new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x00,
+      // sample_size
+      0x00, 0x00, 0x00, 0x00 // sample_count
+      ]);
+
+      STTS = STCO;
+      VMHD = new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x01,
+      // flags
+      0x00, 0x00,
+      // graphicsmode
+      0x00, 0x00, 0x00, 0x00, 0x00, 0x00 // opcolor
+      ]);
+    })();
+
+    box = function (type) {
+      var payload = [],
+        size = 0,
+        i,
+        result,
+        view;
+      for (i = 1; i < arguments.length; i++) {
+        payload.push(arguments[i]);
+      }
+      i = payload.length; // calculate the total size we need to allocate
+
+      while (i--) {
+        size += payload[i].byteLength;
+      }
+      result = new Uint8Array(size + 8);
+      view = new DataView(result.buffer, result.byteOffset, result.byteLength);
+      view.setUint32(0, result.byteLength);
+      result.set(type, 4); // copy the payload into the result
+
+      for (i = 0, size = 8; i < payload.length; i++) {
+        result.set(payload[i], size);
+        size += payload[i].byteLength;
+      }
+      return result;
+    };
+    dinf = function () {
+      return box(types.dinf, box(types.dref, DREF));
+    };
+    esds = function (track) {
+      return box(types.esds, new Uint8Array([0x00,
+      // version
+      0x00, 0x00, 0x00,
+      // flags
+      // ES_Descriptor
+      0x03,
+      // tag, ES_DescrTag
+      0x19,
+      // length
+      0x00, 0x00,
+      // ES_ID
+      0x00,
+      // streamDependenceFlag, URL_flag, reserved, streamPriority
+      // DecoderConfigDescriptor
+      0x04,
+      // tag, DecoderConfigDescrTag
+      0x11,
+      // length
+      0x40,
+      // object type
+      0x15,
+      // streamType
+      0x00, 0x06, 0x00,
+      // bufferSizeDB
+      0x00, 0x00, 0xda, 0xc0,
+      // maxBitrate
+      0x00, 0x00, 0xda, 0xc0,
+      // avgBitrate
+      // DecoderSpecificInfo
+      0x05,
+      // tag, DecoderSpecificInfoTag
+      0x02,
+      // length
+      // ISO/IEC 14496-3, AudioSpecificConfig
+      // for samplingFrequencyIndex see ISO/IEC 13818-7:2006, 8.1.3.2.2, Table 35
+      track.audioobjecttype << 3 | track.samplingfrequencyindex >>> 1, track.samplingfrequencyindex << 7 | track.channelcount << 3, 0x06, 0x01, 0x02 // GASpecificConfig
+      ]));
+    };
+
+    ftyp = function () {
+      return box(types.ftyp, MAJOR_BRAND, MINOR_VERSION, MAJOR_BRAND, AVC1_BRAND);
+    };
+    hdlr = function (type) {
+      return box(types.hdlr, HDLR_TYPES[type]);
+    };
+    mdat = function (data) {
+      return box(types.mdat, data);
+    };
+    mdhd = function (track) {
+      var result = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x02,
+      // creation_time
+      0x00, 0x00, 0x00, 0x03,
+      // modification_time
+      0x00, 0x01, 0x5f, 0x90,
+      // timescale, 90,000 "ticks" per second
+      track.duration >>> 24 & 0xFF, track.duration >>> 16 & 0xFF, track.duration >>> 8 & 0xFF, track.duration & 0xFF,
+      // duration
+      0x55, 0xc4,
+      // 'und' language (undetermined)
+      0x00, 0x00]); // Use the sample rate from the track metadata, when it is
+      // defined. The sample rate can be parsed out of an ADTS header, for
+      // instance.
+
+      if (track.samplerate) {
+        result[12] = track.samplerate >>> 24 & 0xFF;
+        result[13] = track.samplerate >>> 16 & 0xFF;
+        result[14] = track.samplerate >>> 8 & 0xFF;
+        result[15] = track.samplerate & 0xFF;
+      }
+      return box(types.mdhd, result);
+    };
+    mdia = function (track) {
+      return box(types.mdia, mdhd(track), hdlr(track.type), minf(track));
+    };
+    mfhd = function (sequenceNumber) {
+      return box(types.mfhd, new Uint8Array([0x00, 0x00, 0x00, 0x00,
+      // flags
+      (sequenceNumber & 0xFF000000) >> 24, (sequenceNumber & 0xFF0000) >> 16, (sequenceNumber & 0xFF00) >> 8, sequenceNumber & 0xFF // sequence_number
+      ]));
+    };
+
+    minf = function (track) {
+      return box(types.minf, track.type === 'video' ? box(types.vmhd, VMHD) : box(types.smhd, SMHD), dinf(), stbl(track));
+    };
+    moof = function (sequenceNumber, tracks) {
+      var trackFragments = [],
+        i = tracks.length; // build traf boxes for each track fragment
+
+      while (i--) {
+        trackFragments[i] = traf(tracks[i]);
+      }
+      return box.apply(null, [types.moof, mfhd(sequenceNumber)].concat(trackFragments));
+    };
+    /**
+     * Returns a movie box.
+     * @param tracks {array} the tracks associated with this movie
+     * @see ISO/IEC 14496-12:2012(E), section 8.2.1
+     */
+
+    moov = function (tracks) {
+      var i = tracks.length,
+        boxes = [];
+      while (i--) {
+        boxes[i] = trak(tracks[i]);
+      }
+      return box.apply(null, [types.moov, mvhd(0xffffffff)].concat(boxes).concat(mvex(tracks)));
+    };
+    mvex = function (tracks) {
+      var i = tracks.length,
+        boxes = [];
+      while (i--) {
+        boxes[i] = trex(tracks[i]);
+      }
+      return box.apply(null, [types.mvex].concat(boxes));
+    };
+    mvhd = function (duration) {
+      var bytes = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      0x00, 0x00, 0x00, 0x01,
+      // creation_time
+      0x00, 0x00, 0x00, 0x02,
+      // modification_time
+      0x00, 0x01, 0x5f, 0x90,
+      // timescale, 90,000 "ticks" per second
+      (duration & 0xFF000000) >> 24, (duration & 0xFF0000) >> 16, (duration & 0xFF00) >> 8, duration & 0xFF,
+      // duration
+      0x00, 0x01, 0x00, 0x00,
+      // 1.0 rate
+      0x01, 0x00,
+      // 1.0 volume
+      0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x00,
+      // transformation: unity matrix
+      0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      // pre_defined
+      0xff, 0xff, 0xff, 0xff // next_track_ID
+      ]);
+
+      return box(types.mvhd, bytes);
+    };
+    sdtp = function (track) {
+      var samples = track.samples || [],
+        bytes = new Uint8Array(4 + samples.length),
+        flags,
+        i; // leave the full box header (4 bytes) all zero
+      // write the sample table
+
+      for (i = 0; i < samples.length; i++) {
+        flags = samples[i].flags;
+        bytes[i + 4] = flags.dependsOn << 4 | flags.isDependedOn << 2 | flags.hasRedundancy;
+      }
+      return box(types.sdtp, bytes);
+    };
+    stbl = function (track) {
+      return box(types.stbl, stsd(track), box(types.stts, STTS), box(types.stsc, STSC), box(types.stsz, STSZ), box(types.stco, STCO));
+    };
+    (function () {
+      var videoSample, audioSample;
+      stsd = function (track) {
+        return box(types.stsd, new Uint8Array([0x00,
+        // version 0
+        0x00, 0x00, 0x00,
+        // flags
+        0x00, 0x00, 0x00, 0x01]), track.type === 'video' ? videoSample(track) : audioSample(track));
+      };
+      videoSample = function (track) {
+        var sps = track.sps || [],
+          pps = track.pps || [],
+          sequenceParameterSets = [],
+          pictureParameterSets = [],
+          i,
+          avc1Box; // assemble the SPSs
+
+        for (i = 0; i < sps.length; i++) {
+          sequenceParameterSets.push((sps[i].byteLength & 0xFF00) >>> 8);
+          sequenceParameterSets.push(sps[i].byteLength & 0xFF); // sequenceParameterSetLength
+
+          sequenceParameterSets = sequenceParameterSets.concat(Array.prototype.slice.call(sps[i])); // SPS
+        } // assemble the PPSs
+
+        for (i = 0; i < pps.length; i++) {
+          pictureParameterSets.push((pps[i].byteLength & 0xFF00) >>> 8);
+          pictureParameterSets.push(pps[i].byteLength & 0xFF);
+          pictureParameterSets = pictureParameterSets.concat(Array.prototype.slice.call(pps[i]));
+        }
+        avc1Box = [types.avc1, new Uint8Array([0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        // reserved
+        0x00, 0x01,
+        // data_reference_index
+        0x00, 0x00,
+        // pre_defined
+        0x00, 0x00,
+        // reserved
+        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        // pre_defined
+        (track.width & 0xff00) >> 8, track.width & 0xff,
+        // width
+        (track.height & 0xff00) >> 8, track.height & 0xff,
+        // height
+        0x00, 0x48, 0x00, 0x00,
+        // horizresolution
+        0x00, 0x48, 0x00, 0x00,
+        // vertresolution
+        0x00, 0x00, 0x00, 0x00,
+        // reserved
+        0x00, 0x01,
+        // frame_count
+        0x13, 0x76, 0x69, 0x64, 0x65, 0x6f, 0x6a, 0x73, 0x2d, 0x63, 0x6f, 0x6e, 0x74, 0x72, 0x69, 0x62, 0x2d, 0x68, 0x6c, 0x73, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        // compressorname
+        0x00, 0x18,
+        // depth = 24
+        0x11, 0x11 // pre_defined = -1
+        ]), box(types.avcC, new Uint8Array([0x01,
+        // configurationVersion
+        track.profileIdc,
+        // AVCProfileIndication
+        track.profileCompatibility,
+        // profile_compatibility
+        track.levelIdc,
+        // AVCLevelIndication
+        0xff // lengthSizeMinusOne, hard-coded to 4 bytes
+        ].concat([sps.length],
+        // numOfSequenceParameterSets
+        sequenceParameterSets,
+        // "SPS"
+        [pps.length],
+        // numOfPictureParameterSets
+        pictureParameterSets // "PPS"
+        ))), box(types.btrt, new Uint8Array([0x00, 0x1c, 0x9c, 0x80,
+        // bufferSizeDB
+        0x00, 0x2d, 0xc6, 0xc0,
+        // maxBitrate
+        0x00, 0x2d, 0xc6, 0xc0 // avgBitrate
+        ]))];
+
+        if (track.sarRatio) {
+          var hSpacing = track.sarRatio[0],
+            vSpacing = track.sarRatio[1];
+          avc1Box.push(box(types.pasp, new Uint8Array([(hSpacing & 0xFF000000) >> 24, (hSpacing & 0xFF0000) >> 16, (hSpacing & 0xFF00) >> 8, hSpacing & 0xFF, (vSpacing & 0xFF000000) >> 24, (vSpacing & 0xFF0000) >> 16, (vSpacing & 0xFF00) >> 8, vSpacing & 0xFF])));
+        }
+        return box.apply(null, avc1Box);
+      };
+      audioSample = function (track) {
+        return box(types.mp4a, new Uint8Array([
+        // SampleEntry, ISO/IEC 14496-12
+        0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        // reserved
+        0x00, 0x01,
+        // data_reference_index
+        // AudioSampleEntry, ISO/IEC 14496-12
+        0x00, 0x00, 0x00, 0x00,
+        // reserved
+        0x00, 0x00, 0x00, 0x00,
+        // reserved
+        (track.channelcount & 0xff00) >> 8, track.channelcount & 0xff,
+        // channelcount
+        (track.samplesize & 0xff00) >> 8, track.samplesize & 0xff,
+        // samplesize
+        0x00, 0x00,
+        // pre_defined
+        0x00, 0x00,
+        // reserved
+        (track.samplerate & 0xff00) >> 8, track.samplerate & 0xff, 0x00, 0x00 // samplerate, 16.16
+        // MP4AudioSampleEntry, ISO/IEC 14496-14
+        ]), esds(track));
+      };
+    })();
+    tkhd = function (track) {
+      var result = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x07,
+      // flags
+      0x00, 0x00, 0x00, 0x00,
+      // creation_time
+      0x00, 0x00, 0x00, 0x00,
+      // modification_time
+      (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+      // track_ID
+      0x00, 0x00, 0x00, 0x00,
+      // reserved
+      (track.duration & 0xFF000000) >> 24, (track.duration & 0xFF0000) >> 16, (track.duration & 0xFF00) >> 8, track.duration & 0xFF,
+      // duration
+      0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      // reserved
+      0x00, 0x00,
+      // layer
+      0x00, 0x00,
+      // alternate_group
+      0x01, 0x00,
+      // non-audio track volume
+      0x00, 0x00,
+      // reserved
+      0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x00,
+      // transformation: unity matrix
+      (track.width & 0xFF00) >> 8, track.width & 0xFF, 0x00, 0x00,
+      // width
+      (track.height & 0xFF00) >> 8, track.height & 0xFF, 0x00, 0x00 // height
+      ]);
+
+      return box(types.tkhd, result);
+    };
+    /**
+     * Generate a track fragment (traf) box. A traf box collects metadata
+     * about tracks in a movie fragment (moof) box.
+     */
+
+    traf = function (track) {
+      var trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun, sampleDependencyTable, dataOffset, upperWordBaseMediaDecodeTime, lowerWordBaseMediaDecodeTime;
+      trackFragmentHeader = box(types.tfhd, new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x3a,
+      // flags
+      (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+      // track_ID
+      0x00, 0x00, 0x00, 0x01,
+      // sample_description_index
+      0x00, 0x00, 0x00, 0x00,
+      // default_sample_duration
+      0x00, 0x00, 0x00, 0x00,
+      // default_sample_size
+      0x00, 0x00, 0x00, 0x00 // default_sample_flags
+      ]));
+
+      upperWordBaseMediaDecodeTime = Math.floor(track.baseMediaDecodeTime / MAX_UINT32);
+      lowerWordBaseMediaDecodeTime = Math.floor(track.baseMediaDecodeTime % MAX_UINT32);
+      trackFragmentDecodeTime = box(types.tfdt, new Uint8Array([0x01,
+      // version 1
+      0x00, 0x00, 0x00,
+      // flags
+      // baseMediaDecodeTime
+      upperWordBaseMediaDecodeTime >>> 24 & 0xFF, upperWordBaseMediaDecodeTime >>> 16 & 0xFF, upperWordBaseMediaDecodeTime >>> 8 & 0xFF, upperWordBaseMediaDecodeTime & 0xFF, lowerWordBaseMediaDecodeTime >>> 24 & 0xFF, lowerWordBaseMediaDecodeTime >>> 16 & 0xFF, lowerWordBaseMediaDecodeTime >>> 8 & 0xFF, lowerWordBaseMediaDecodeTime & 0xFF])); // the data offset specifies the number of bytes from the start of
+      // the containing moof to the first payload byte of the associated
+      // mdat
+
+      dataOffset = 32 +
+      // tfhd
+      20 +
+      // tfdt
+      8 +
+      // traf header
+      16 +
+      // mfhd
+      8 +
+      // moof header
+      8; // mdat header
+      // audio tracks require less metadata
+
+      if (track.type === 'audio') {
+        trackFragmentRun = trun$1(track, dataOffset);
+        return box(types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun);
+      } // video tracks should contain an independent and disposable samples
+      // box (sdtp)
+      // generate one and adjust offsets to match
+
+      sampleDependencyTable = sdtp(track);
+      trackFragmentRun = trun$1(track, sampleDependencyTable.length + dataOffset);
+      return box(types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun, sampleDependencyTable);
+    };
+    /**
+     * Generate a track box.
+     * @param track {object} a track definition
+     * @return {Uint8Array} the track box
+     */
+
+    trak = function (track) {
+      track.duration = track.duration || 0xffffffff;
+      return box(types.trak, tkhd(track), mdia(track));
+    };
+    trex = function (track) {
+      var result = new Uint8Array([0x00,
+      // version 0
+      0x00, 0x00, 0x00,
+      // flags
+      (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF,
+      // track_ID
+      0x00, 0x00, 0x00, 0x01,
+      // default_sample_description_index
+      0x00, 0x00, 0x00, 0x00,
+      // default_sample_duration
+      0x00, 0x00, 0x00, 0x00,
+      // default_sample_size
+      0x00, 0x01, 0x00, 0x01 // default_sample_flags
+      ]); // the last two bytes of default_sample_flags is the sample
+      // degradation priority, a hint about the importance of this sample
+      // relative to others. Lower the degradation priority for all sample
+      // types other than video.
+
+      if (track.type !== 'video') {
+        result[result.length - 1] = 0x00;
+      }
+      return box(types.trex, result);
+    };
+    (function () {
+      var audioTrun, videoTrun, trunHeader; // This method assumes all samples are uniform. That is, if a
+      // duration is present for the first sample, it will be present for
+      // all subsequent samples.
+      // see ISO/IEC 14496-12:2012, Section 8.8.8.1
+
+      trunHeader = function (samples, offset) {
+        var durationPresent = 0,
+          sizePresent = 0,
+          flagsPresent = 0,
+          compositionTimeOffset = 0; // trun flag constants
+
+        if (samples.length) {
+          if (samples[0].duration !== undefined) {
+            durationPresent = 0x1;
+          }
+          if (samples[0].size !== undefined) {
+            sizePresent = 0x2;
+          }
+          if (samples[0].flags !== undefined) {
+            flagsPresent = 0x4;
+          }
+          if (samples[0].compositionTimeOffset !== undefined) {
+            compositionTimeOffset = 0x8;
+          }
+        }
+        return [0x00,
+        // version 0
+        0x00, durationPresent | sizePresent | flagsPresent | compositionTimeOffset, 0x01,
+        // flags
+        (samples.length & 0xFF000000) >>> 24, (samples.length & 0xFF0000) >>> 16, (samples.length & 0xFF00) >>> 8, samples.length & 0xFF,
+        // sample_count
+        (offset & 0xFF000000) >>> 24, (offset & 0xFF0000) >>> 16, (offset & 0xFF00) >>> 8, offset & 0xFF // data_offset
+        ];
+      };
+
+      videoTrun = function (track, offset) {
+        var bytesOffest, bytes, header, samples, sample, i;
+        samples = track.samples || [];
+        offset += 8 + 12 + 16 * samples.length;
+        header = trunHeader(samples, offset);
+        bytes = new Uint8Array(header.length + samples.length * 16);
+        bytes.set(header);
+        bytesOffest = header.length;
+        for (i = 0; i < samples.length; i++) {
+          sample = samples[i];
+          bytes[bytesOffest++] = (sample.duration & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.duration & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.duration & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.duration & 0xFF; // sample_duration
+
+          bytes[bytesOffest++] = (sample.size & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.size & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.size & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.size & 0xFF; // sample_size
+
+          bytes[bytesOffest++] = sample.flags.isLeading << 2 | sample.flags.dependsOn;
+          bytes[bytesOffest++] = sample.flags.isDependedOn << 6 | sample.flags.hasRedundancy << 4 | sample.flags.paddingValue << 1 | sample.flags.isNonSyncSample;
+          bytes[bytesOffest++] = sample.flags.degradationPriority & 0xF0 << 8;
+          bytes[bytesOffest++] = sample.flags.degradationPriority & 0x0F; // sample_flags
+
+          bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.compositionTimeOffset & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.compositionTimeOffset & 0xFF; // sample_composition_time_offset
+        }
+
+        return box(types.trun, bytes);
+      };
+      audioTrun = function (track, offset) {
+        var bytes, bytesOffest, header, samples, sample, i;
+        samples = track.samples || [];
+        offset += 8 + 12 + 8 * samples.length;
+        header = trunHeader(samples, offset);
+        bytes = new Uint8Array(header.length + samples.length * 8);
+        bytes.set(header);
+        bytesOffest = header.length;
+        for (i = 0; i < samples.length; i++) {
+          sample = samples[i];
+          bytes[bytesOffest++] = (sample.duration & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.duration & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.duration & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.duration & 0xFF; // sample_duration
+
+          bytes[bytesOffest++] = (sample.size & 0xFF000000) >>> 24;
+          bytes[bytesOffest++] = (sample.size & 0xFF0000) >>> 16;
+          bytes[bytesOffest++] = (sample.size & 0xFF00) >>> 8;
+          bytes[bytesOffest++] = sample.size & 0xFF; // sample_size
+        }
+
+        return box(types.trun, bytes);
+      };
+      trun$1 = function (track, offset) {
+        if (track.type === 'audio') {
+          return audioTrun(track, offset);
+        }
+        return videoTrun(track, offset);
+      };
+    })();
+    var mp4Generator = {
+      ftyp: ftyp,
+      mdat: mdat,
+      moof: moof,
+      moov: moov,
+      initSegment: function (tracks) {
+        var fileType = ftyp(),
+          movie = moov(tracks),
+          result;
+        result = new Uint8Array(fileType.byteLength + movie.byteLength);
+        result.set(fileType);
+        result.set(movie, fileType.byteLength);
+        return result;
+      }
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+    // composed of the nal units that make up that frame
+    // Also keep track of cummulative data about the frame from the nal units such
+    // as the frame duration, starting pts, etc.
+
+    var groupNalsIntoFrames = function (nalUnits) {
+      var i,
+        currentNal,
+        currentFrame = [],
+        frames = []; // TODO added for LHLS, make sure this is OK
+
+      frames.byteLength = 0;
+      frames.nalCount = 0;
+      frames.duration = 0;
+      currentFrame.byteLength = 0;
+      for (i = 0; i < nalUnits.length; i++) {
+        currentNal = nalUnits[i]; // Split on 'aud'-type nal units
+
+        if (currentNal.nalUnitType === 'access_unit_delimiter_rbsp') {
+          // Since the very first nal unit is expected to be an AUD
+          // only push to the frames array when currentFrame is not empty
+          if (currentFrame.length) {
+            currentFrame.duration = currentNal.dts - currentFrame.dts; // TODO added for LHLS, make sure this is OK
+
+            frames.byteLength += currentFrame.byteLength;
+            frames.nalCount += currentFrame.length;
+            frames.duration += currentFrame.duration;
+            frames.push(currentFrame);
+          }
+          currentFrame = [currentNal];
+          currentFrame.byteLength = currentNal.data.byteLength;
+          currentFrame.pts = currentNal.pts;
+          currentFrame.dts = currentNal.dts;
+        } else {
+          // Specifically flag key frames for ease of use later
+          if (currentNal.nalUnitType === 'slice_layer_without_partitioning_rbsp_idr') {
+            currentFrame.keyFrame = true;
+          }
+          currentFrame.duration = currentNal.dts - currentFrame.dts;
+          currentFrame.byteLength += currentNal.data.byteLength;
+          currentFrame.push(currentNal);
+        }
+      } // For the last frame, use the duration of the previous frame if we
+      // have nothing better to go on
+
+      if (frames.length && (!currentFrame.duration || currentFrame.duration <= 0)) {
+        currentFrame.duration = frames[frames.length - 1].duration;
+      } // Push the final frame
+      // TODO added for LHLS, make sure this is OK
+
+      frames.byteLength += currentFrame.byteLength;
+      frames.nalCount += currentFrame.length;
+      frames.duration += currentFrame.duration;
+      frames.push(currentFrame);
+      return frames;
+    }; // Convert an array of frames into an array of Gop with each Gop being composed
+    // of the frames that make up that Gop
+    // Also keep track of cummulative data about the Gop from the frames such as the
+    // Gop duration, starting pts, etc.
+
+    var groupFramesIntoGops = function (frames) {
+      var i,
+        currentFrame,
+        currentGop = [],
+        gops = []; // We must pre-set some of the values on the Gop since we
+      // keep running totals of these values
+
+      currentGop.byteLength = 0;
+      currentGop.nalCount = 0;
+      currentGop.duration = 0;
+      currentGop.pts = frames[0].pts;
+      currentGop.dts = frames[0].dts; // store some metadata about all the Gops
+
+      gops.byteLength = 0;
+      gops.nalCount = 0;
+      gops.duration = 0;
+      gops.pts = frames[0].pts;
+      gops.dts = frames[0].dts;
+      for (i = 0; i < frames.length; i++) {
+        currentFrame = frames[i];
+        if (currentFrame.keyFrame) {
+          // Since the very first frame is expected to be an keyframe
+          // only push to the gops array when currentGop is not empty
+          if (currentGop.length) {
+            gops.push(currentGop);
+            gops.byteLength += currentGop.byteLength;
+            gops.nalCount += currentGop.nalCount;
+            gops.duration += currentGop.duration;
+          }
+          currentGop = [currentFrame];
+          currentGop.nalCount = currentFrame.length;
+          currentGop.byteLength = currentFrame.byteLength;
+          currentGop.pts = currentFrame.pts;
+          currentGop.dts = currentFrame.dts;
+          currentGop.duration = currentFrame.duration;
+        } else {
+          currentGop.duration += currentFrame.duration;
+          currentGop.nalCount += currentFrame.length;
+          currentGop.byteLength += currentFrame.byteLength;
+          currentGop.push(currentFrame);
+        }
+      }
+      if (gops.length && currentGop.duration <= 0) {
+        currentGop.duration = gops[gops.length - 1].duration;
+      }
+      gops.byteLength += currentGop.byteLength;
+      gops.nalCount += currentGop.nalCount;
+      gops.duration += currentGop.duration; // push the final Gop
+
+      gops.push(currentGop);
+      return gops;
+    };
+    /*
+     * Search for the first keyframe in the GOPs and throw away all frames
+     * until that keyframe. Then extend the duration of the pulled keyframe
+     * and pull the PTS and DTS of the keyframe so that it covers the time
+     * range of the frames that were disposed.
+     *
+     * @param {Array} gops video GOPs
+     * @returns {Array} modified video GOPs
+     */
+
+    var extendFirstKeyFrame = function (gops) {
+      var currentGop;
+      if (!gops[0][0].keyFrame && gops.length > 1) {
+        // Remove the first GOP
+        currentGop = gops.shift();
+        gops.byteLength -= currentGop.byteLength;
+        gops.nalCount -= currentGop.nalCount; // Extend the first frame of what is now the
+        // first gop to cover the time period of the
+        // frames we just removed
+
+        gops[0][0].dts = currentGop.dts;
+        gops[0][0].pts = currentGop.pts;
+        gops[0][0].duration += currentGop.duration;
+      }
+      return gops;
+    };
+    /**
+     * Default sample object
+     * see ISO/IEC 14496-12:2012, section 8.6.4.3
+     */
+
+    var createDefaultSample = function () {
+      return {
+        size: 0,
+        flags: {
+          isLeading: 0,
+          dependsOn: 1,
+          isDependedOn: 0,
+          hasRedundancy: 0,
+          degradationPriority: 0,
+          isNonSyncSample: 1
+        }
+      };
+    };
+    /*
+     * Collates information from a video frame into an object for eventual
+     * entry into an MP4 sample table.
+     *
+     * @param {Object} frame the video frame
+     * @param {Number} dataOffset the byte offset to position the sample
+     * @return {Object} object containing sample table info for a frame
+     */
+
+    var sampleForFrame = function (frame, dataOffset) {
+      var sample = createDefaultSample();
+      sample.dataOffset = dataOffset;
+      sample.compositionTimeOffset = frame.pts - frame.dts;
+      sample.duration = frame.duration;
+      sample.size = 4 * frame.length; // Space for nal unit size
+
+      sample.size += frame.byteLength;
+      if (frame.keyFrame) {
+        sample.flags.dependsOn = 2;
+        sample.flags.isNonSyncSample = 0;
+      }
+      return sample;
+    }; // generate the track's sample table from an array of gops
+
+    var generateSampleTable$1 = function (gops, baseDataOffset) {
+      var h,
+        i,
+        sample,
+        currentGop,
+        currentFrame,
+        dataOffset = baseDataOffset || 0,
+        samples = [];
+      for (h = 0; h < gops.length; h++) {
+        currentGop = gops[h];
+        for (i = 0; i < currentGop.length; i++) {
+          currentFrame = currentGop[i];
+          sample = sampleForFrame(currentFrame, dataOffset);
+          dataOffset += sample.size;
+          samples.push(sample);
+        }
+      }
+      return samples;
+    }; // generate the track's raw mdat data from an array of gops
+
+    var concatenateNalData = function (gops) {
+      var h,
+        i,
+        j,
+        currentGop,
+        currentFrame,
+        currentNal,
+        dataOffset = 0,
+        nalsByteLength = gops.byteLength,
+        numberOfNals = gops.nalCount,
+        totalByteLength = nalsByteLength + 4 * numberOfNals,
+        data = new Uint8Array(totalByteLength),
+        view = new DataView(data.buffer); // For each Gop..
+
+      for (h = 0; h < gops.length; h++) {
+        currentGop = gops[h]; // For each Frame..
+
+        for (i = 0; i < currentGop.length; i++) {
+          currentFrame = currentGop[i]; // For each NAL..
+
+          for (j = 0; j < currentFrame.length; j++) {
+            currentNal = currentFrame[j];
+            view.setUint32(dataOffset, currentNal.data.byteLength);
+            dataOffset += 4;
+            data.set(currentNal.data, dataOffset);
+            dataOffset += currentNal.data.byteLength;
+          }
+        }
+      }
+      return data;
+    }; // generate the track's sample table from a frame
+
+    var generateSampleTableForFrame = function (frame, baseDataOffset) {
+      var sample,
+        dataOffset = baseDataOffset || 0,
+        samples = [];
+      sample = sampleForFrame(frame, dataOffset);
+      samples.push(sample);
+      return samples;
+    }; // generate the track's raw mdat data from a frame
+
+    var concatenateNalDataForFrame = function (frame) {
+      var i,
+        currentNal,
+        dataOffset = 0,
+        nalsByteLength = frame.byteLength,
+        numberOfNals = frame.length,
+        totalByteLength = nalsByteLength + 4 * numberOfNals,
+        data = new Uint8Array(totalByteLength),
+        view = new DataView(data.buffer); // For each NAL..
+
+      for (i = 0; i < frame.length; i++) {
+        currentNal = frame[i];
+        view.setUint32(dataOffset, currentNal.data.byteLength);
+        dataOffset += 4;
+        data.set(currentNal.data, dataOffset);
+        dataOffset += currentNal.data.byteLength;
+      }
+      return data;
+    };
+    var frameUtils$1 = {
+      groupNalsIntoFrames: groupNalsIntoFrames,
+      groupFramesIntoGops: groupFramesIntoGops,
+      extendFirstKeyFrame: extendFirstKeyFrame,
+      generateSampleTable: generateSampleTable$1,
+      concatenateNalData: concatenateNalData,
+      generateSampleTableForFrame: generateSampleTableForFrame,
+      concatenateNalDataForFrame: concatenateNalDataForFrame
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var highPrefix = [33, 16, 5, 32, 164, 27];
+    var lowPrefix = [33, 65, 108, 84, 1, 2, 4, 8, 168, 2, 4, 8, 17, 191, 252];
+    var zeroFill = function (count) {
+      var a = [];
+      while (count--) {
+        a.push(0);
+      }
+      return a;
+    };
+    var makeTable = function (metaTable) {
+      return Object.keys(metaTable).reduce(function (obj, key) {
+        obj[key] = new Uint8Array(metaTable[key].reduce(function (arr, part) {
+          return arr.concat(part);
+        }, []));
+        return obj;
+      }, {});
+    };
+    var silence;
+    var silence_1 = function () {
+      if (!silence) {
+        // Frames-of-silence to use for filling in missing AAC frames
+        var coneOfSilence = {
+          96000: [highPrefix, [227, 64], zeroFill(154), [56]],
+          88200: [highPrefix, [231], zeroFill(170), [56]],
+          64000: [highPrefix, [248, 192], zeroFill(240), [56]],
+          48000: [highPrefix, [255, 192], zeroFill(268), [55, 148, 128], zeroFill(54), [112]],
+          44100: [highPrefix, [255, 192], zeroFill(268), [55, 163, 128], zeroFill(84), [112]],
+          32000: [highPrefix, [255, 192], zeroFill(268), [55, 234], zeroFill(226), [112]],
+          24000: [highPrefix, [255, 192], zeroFill(268), [55, 255, 128], zeroFill(268), [111, 112], zeroFill(126), [224]],
+          16000: [highPrefix, [255, 192], zeroFill(268), [55, 255, 128], zeroFill(268), [111, 255], zeroFill(269), [223, 108], zeroFill(195), [1, 192]],
+          12000: [lowPrefix, zeroFill(268), [3, 127, 248], zeroFill(268), [6, 255, 240], zeroFill(268), [13, 255, 224], zeroFill(268), [27, 253, 128], zeroFill(259), [56]],
+          11025: [lowPrefix, zeroFill(268), [3, 127, 248], zeroFill(268), [6, 255, 240], zeroFill(268), [13, 255, 224], zeroFill(268), [27, 255, 192], zeroFill(268), [55, 175, 128], zeroFill(108), [112]],
+          8000: [lowPrefix, zeroFill(268), [3, 121, 16], zeroFill(47), [7]]
+        };
+        silence = makeTable(coneOfSilence);
+      }
+      return silence;
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var ONE_SECOND_IN_TS$4 = 90000,
+      // 90kHz clock
+      secondsToVideoTs,
+      secondsToAudioTs,
+      videoTsToSeconds,
+      audioTsToSeconds,
+      audioTsToVideoTs,
+      videoTsToAudioTs,
+      metadataTsToSeconds;
+    secondsToVideoTs = function (seconds) {
+      return seconds * ONE_SECOND_IN_TS$4;
+    };
+    secondsToAudioTs = function (seconds, sampleRate) {
+      return seconds * sampleRate;
+    };
+    videoTsToSeconds = function (timestamp) {
+      return timestamp / ONE_SECOND_IN_TS$4;
+    };
+    audioTsToSeconds = function (timestamp, sampleRate) {
+      return timestamp / sampleRate;
+    };
+    audioTsToVideoTs = function (timestamp, sampleRate) {
+      return secondsToVideoTs(audioTsToSeconds(timestamp, sampleRate));
+    };
+    videoTsToAudioTs = function (timestamp, sampleRate) {
+      return secondsToAudioTs(videoTsToSeconds(timestamp), sampleRate);
+    };
+    /**
+     * Adjust ID3 tag or caption timing information by the timeline pts values
+     * (if keepOriginalTimestamps is false) and convert to seconds
+     */
+
+    metadataTsToSeconds = function (timestamp, timelineStartPts, keepOriginalTimestamps) {
+      return videoTsToSeconds(keepOriginalTimestamps ? timestamp : timestamp - timelineStartPts);
+    };
+    var clock$2 = {
+      ONE_SECOND_IN_TS: ONE_SECOND_IN_TS$4,
+      secondsToVideoTs: secondsToVideoTs,
+      secondsToAudioTs: secondsToAudioTs,
+      videoTsToSeconds: videoTsToSeconds,
+      audioTsToSeconds: audioTsToSeconds,
+      audioTsToVideoTs: audioTsToVideoTs,
+      videoTsToAudioTs: videoTsToAudioTs,
+      metadataTsToSeconds: metadataTsToSeconds
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var coneOfSilence = silence_1;
+    var clock$1 = clock$2;
+    /**
+     * Sum the `byteLength` properties of the data in each AAC frame
+     */
+
+    var sumFrameByteLengths = function (array) {
+      var i,
+        currentObj,
+        sum = 0; // sum the byteLength's all each nal unit in the frame
+
+      for (i = 0; i < array.length; i++) {
+        currentObj = array[i];
+        sum += currentObj.data.byteLength;
+      }
+      return sum;
+    }; // Possibly pad (prefix) the audio track with silence if appending this track
+    // would lead to the introduction of a gap in the audio buffer
+
+    var prefixWithSilence = function (track, frames, audioAppendStartTs, videoBaseMediaDecodeTime) {
+      var baseMediaDecodeTimeTs,
+        frameDuration = 0,
+        audioGapDuration = 0,
+        audioFillFrameCount = 0,
+        audioFillDuration = 0,
+        silentFrame,
+        i,
+        firstFrame;
+      if (!frames.length) {
+        return;
+      }
+      baseMediaDecodeTimeTs = clock$1.audioTsToVideoTs(track.baseMediaDecodeTime, track.samplerate); // determine frame clock duration based on sample rate, round up to avoid overfills
+
+      frameDuration = Math.ceil(clock$1.ONE_SECOND_IN_TS / (track.samplerate / 1024));
+      if (audioAppendStartTs && videoBaseMediaDecodeTime) {
+        // insert the shortest possible amount (audio gap or audio to video gap)
+        audioGapDuration = baseMediaDecodeTimeTs - Math.max(audioAppendStartTs, videoBaseMediaDecodeTime); // number of full frames in the audio gap
+
+        audioFillFrameCount = Math.floor(audioGapDuration / frameDuration);
+        audioFillDuration = audioFillFrameCount * frameDuration;
+      } // don't attempt to fill gaps smaller than a single frame or larger
+      // than a half second
+
+      if (audioFillFrameCount < 1 || audioFillDuration > clock$1.ONE_SECOND_IN_TS / 2) {
+        return;
+      }
+      silentFrame = coneOfSilence()[track.samplerate];
+      if (!silentFrame) {
+        // we don't have a silent frame pregenerated for the sample rate, so use a frame
+        // from the content instead
+        silentFrame = frames[0].data;
+      }
+      for (i = 0; i < audioFillFrameCount; i++) {
+        firstFrame = frames[0];
+        frames.splice(0, 0, {
+          data: silentFrame,
+          dts: firstFrame.dts - frameDuration,
+          pts: firstFrame.pts - frameDuration
+        });
+      }
+      track.baseMediaDecodeTime -= Math.floor(clock$1.videoTsToAudioTs(audioFillDuration, track.samplerate));
+      return audioFillDuration;
+    }; // If the audio segment extends before the earliest allowed dts
+    // value, remove AAC frames until starts at or after the earliest
+    // allowed DTS so that we don't end up with a negative baseMedia-
+    // DecodeTime for the audio track
+
+    var trimAdtsFramesByEarliestDts = function (adtsFrames, track, earliestAllowedDts) {
+      if (track.minSegmentDts >= earliestAllowedDts) {
+        return adtsFrames;
+      } // We will need to recalculate the earliest segment Dts
+
+      track.minSegmentDts = Infinity;
+      return adtsFrames.filter(function (currentFrame) {
+        // If this is an allowed frame, keep it and record it's Dts
+        if (currentFrame.dts >= earliestAllowedDts) {
+          track.minSegmentDts = Math.min(track.minSegmentDts, currentFrame.dts);
+          track.minSegmentPts = track.minSegmentDts;
+          return true;
+        } // Otherwise, discard it
+
+        return false;
+      });
+    }; // generate the track's raw mdat data from an array of frames
+
+    var generateSampleTable = function (frames) {
+      var i,
+        currentFrame,
+        samples = [];
+      for (i = 0; i < frames.length; i++) {
+        currentFrame = frames[i];
+        samples.push({
+          size: currentFrame.data.byteLength,
+          duration: 1024 // For AAC audio, all samples contain 1024 samples
+        });
+      }
+
+      return samples;
+    }; // generate the track's sample table from an array of frames
+
+    var concatenateFrameData = function (frames) {
+      var i,
+        currentFrame,
+        dataOffset = 0,
+        data = new Uint8Array(sumFrameByteLengths(frames));
+      for (i = 0; i < frames.length; i++) {
+        currentFrame = frames[i];
+        data.set(currentFrame.data, dataOffset);
+        dataOffset += currentFrame.data.byteLength;
+      }
+      return data;
+    };
+    var audioFrameUtils$1 = {
+      prefixWithSilence: prefixWithSilence,
+      trimAdtsFramesByEarliestDts: trimAdtsFramesByEarliestDts,
+      generateSampleTable: generateSampleTable,
+      concatenateFrameData: concatenateFrameData
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var ONE_SECOND_IN_TS$3 = clock$2.ONE_SECOND_IN_TS;
+    /**
+     * Store information about the start and end of the track and the
+     * duration for each frame/sample we process in order to calculate
+     * the baseMediaDecodeTime
+     */
+
+    var collectDtsInfo = function (track, data) {
+      if (typeof data.pts === 'number') {
+        if (track.timelineStartInfo.pts === undefined) {
+          track.timelineStartInfo.pts = data.pts;
+        }
+        if (track.minSegmentPts === undefined) {
+          track.minSegmentPts = data.pts;
+        } else {
+          track.minSegmentPts = Math.min(track.minSegmentPts, data.pts);
+        }
+        if (track.maxSegmentPts === undefined) {
+          track.maxSegmentPts = data.pts;
+        } else {
+          track.maxSegmentPts = Math.max(track.maxSegmentPts, data.pts);
+        }
+      }
+      if (typeof data.dts === 'number') {
+        if (track.timelineStartInfo.dts === undefined) {
+          track.timelineStartInfo.dts = data.dts;
+        }
+        if (track.minSegmentDts === undefined) {
+          track.minSegmentDts = data.dts;
+        } else {
+          track.minSegmentDts = Math.min(track.minSegmentDts, data.dts);
+        }
+        if (track.maxSegmentDts === undefined) {
+          track.maxSegmentDts = data.dts;
+        } else {
+          track.maxSegmentDts = Math.max(track.maxSegmentDts, data.dts);
+        }
+      }
+    };
+    /**
+     * Clear values used to calculate the baseMediaDecodeTime between
+     * tracks
+     */
+
+    var clearDtsInfo = function (track) {
+      delete track.minSegmentDts;
+      delete track.maxSegmentDts;
+      delete track.minSegmentPts;
+      delete track.maxSegmentPts;
+    };
+    /**
+     * Calculate the track's baseMediaDecodeTime based on the earliest
+     * DTS the transmuxer has ever seen and the minimum DTS for the
+     * current track
+     * @param track {object} track metadata configuration
+     * @param keepOriginalTimestamps {boolean} If true, keep the timestamps
+     *        in the source; false to adjust the first segment to start at 0.
+     */
+
+    var calculateTrackBaseMediaDecodeTime = function (track, keepOriginalTimestamps) {
+      var baseMediaDecodeTime,
+        scale,
+        minSegmentDts = track.minSegmentDts; // Optionally adjust the time so the first segment starts at zero.
+
+      if (!keepOriginalTimestamps) {
+        minSegmentDts -= track.timelineStartInfo.dts;
+      } // track.timelineStartInfo.baseMediaDecodeTime is the location, in time, where
+      // we want the start of the first segment to be placed
+
+      baseMediaDecodeTime = track.timelineStartInfo.baseMediaDecodeTime; // Add to that the distance this segment is from the very first
+
+      baseMediaDecodeTime += minSegmentDts; // baseMediaDecodeTime must not become negative
+
+      baseMediaDecodeTime = Math.max(0, baseMediaDecodeTime);
+      if (track.type === 'audio') {
+        // Audio has a different clock equal to the sampling_rate so we need to
+        // scale the PTS values into the clock rate of the track
+        scale = track.samplerate / ONE_SECOND_IN_TS$3;
+        baseMediaDecodeTime *= scale;
+        baseMediaDecodeTime = Math.floor(baseMediaDecodeTime);
+      }
+      return baseMediaDecodeTime;
+    };
+    var trackDecodeInfo$1 = {
+      clearDtsInfo: clearDtsInfo,
+      calculateTrackBaseMediaDecodeTime: calculateTrackBaseMediaDecodeTime,
+      collectDtsInfo: collectDtsInfo
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Reads in-band caption information from a video elementary
+     * stream. Captions must follow the CEA-708 standard for injection
+     * into an MPEG-2 transport streams.
+     * @see https://en.wikipedia.org/wiki/CEA-708
+     * @see https://www.gpo.gov/fdsys/pkg/CFR-2007-title47-vol1/pdf/CFR-2007-title47-vol1-sec15-119.pdf
+     */
+    // payload type field to indicate how they are to be
+    // interpreted. CEAS-708 caption content is always transmitted with
+    // payload type 0x04.
+
+    var USER_DATA_REGISTERED_ITU_T_T35 = 4,
+      RBSP_TRAILING_BITS = 128;
+    /**
+      * Parse a supplemental enhancement information (SEI) NAL unit.
+      * Stops parsing once a message of type ITU T T35 has been found.
+      *
+      * @param bytes {Uint8Array} the bytes of a SEI NAL unit
+      * @return {object} the parsed SEI payload
+      * @see Rec. ITU-T H.264, 7.3.2.3.1
+      */
+
+    var parseSei = function (bytes) {
+      var i = 0,
+        result = {
+          payloadType: -1,
+          payloadSize: 0
+        },
+        payloadType = 0,
+        payloadSize = 0; // go through the sei_rbsp parsing each each individual sei_message
+
+      while (i < bytes.byteLength) {
+        // stop once we have hit the end of the sei_rbsp
+        if (bytes[i] === RBSP_TRAILING_BITS) {
+          break;
+        } // Parse payload type
+
+        while (bytes[i] === 0xFF) {
+          payloadType += 255;
+          i++;
+        }
+        payloadType += bytes[i++]; // Parse payload size
+
+        while (bytes[i] === 0xFF) {
+          payloadSize += 255;
+          i++;
+        }
+        payloadSize += bytes[i++]; // this sei_message is a 608/708 caption so save it and break
+        // there can only ever be one caption message in a frame's sei
+
+        if (!result.payload && payloadType === USER_DATA_REGISTERED_ITU_T_T35) {
+          var userIdentifier = String.fromCharCode(bytes[i + 3], bytes[i + 4], bytes[i + 5], bytes[i + 6]);
+          if (userIdentifier === 'GA94') {
+            result.payloadType = payloadType;
+            result.payloadSize = payloadSize;
+            result.payload = bytes.subarray(i, i + payloadSize);
+            break;
+          } else {
+            result.payload = void 0;
+          }
+        } // skip the payload and parse the next message
+
+        i += payloadSize;
+        payloadType = 0;
+        payloadSize = 0;
+      }
+      return result;
+    }; // see ANSI/SCTE 128-1 (2013), section 8.1
+
+    var parseUserData = function (sei) {
+      // itu_t_t35_contry_code must be 181 (United States) for
+      // captions
+      if (sei.payload[0] !== 181) {
+        return null;
+      } // itu_t_t35_provider_code should be 49 (ATSC) for captions
+
+      if ((sei.payload[1] << 8 | sei.payload[2]) !== 49) {
+        return null;
+      } // the user_identifier should be "GA94" to indicate ATSC1 data
+
+      if (String.fromCharCode(sei.payload[3], sei.payload[4], sei.payload[5], sei.payload[6]) !== 'GA94') {
+        return null;
+      } // finally, user_data_type_code should be 0x03 for caption data
+
+      if (sei.payload[7] !== 0x03) {
+        return null;
+      } // return the user_data_type_structure and strip the trailing
+      // marker bits
+
+      return sei.payload.subarray(8, sei.payload.length - 1);
+    }; // see CEA-708-D, section 4.4
+
+    var parseCaptionPackets = function (pts, userData) {
+      var results = [],
+        i,
+        count,
+        offset,
+        data; // if this is just filler, return immediately
+
+      if (!(userData[0] & 0x40)) {
+        return results;
+      } // parse out the cc_data_1 and cc_data_2 fields
+
+      count = userData[0] & 0x1f;
+      for (i = 0; i < count; i++) {
+        offset = i * 3;
+        data = {
+          type: userData[offset + 2] & 0x03,
+          pts: pts
+        }; // capture cc data when cc_valid is 1
+
+        if (userData[offset + 2] & 0x04) {
+          data.ccData = userData[offset + 3] << 8 | userData[offset + 4];
+          results.push(data);
+        }
+      }
+      return results;
+    };
+    var discardEmulationPreventionBytes$1 = function (data) {
+      var length = data.byteLength,
+        emulationPreventionBytesPositions = [],
+        i = 1,
+        newLength,
+        newData; // Find all `Emulation Prevention Bytes`
+
+      while (i < length - 2) {
+        if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0x03) {
+          emulationPreventionBytesPositions.push(i + 2);
+          i += 2;
+        } else {
+          i++;
+        }
+      } // If no Emulation Prevention Bytes were found just return the original
+      // array
+
+      if (emulationPreventionBytesPositions.length === 0) {
+        return data;
+      } // Create a new array to hold the NAL unit data
+
+      newLength = length - emulationPreventionBytesPositions.length;
+      newData = new Uint8Array(newLength);
+      var sourceIndex = 0;
+      for (i = 0; i < newLength; sourceIndex++, i++) {
+        if (sourceIndex === emulationPreventionBytesPositions[0]) {
+          // Skip this byte
+          sourceIndex++; // Remove this position index
+
+          emulationPreventionBytesPositions.shift();
+        }
+        newData[i] = data[sourceIndex];
+      }
+      return newData;
+    }; // exports
+
+    var captionPacketParser = {
+      parseSei: parseSei,
+      parseUserData: parseUserData,
+      parseCaptionPackets: parseCaptionPackets,
+      discardEmulationPreventionBytes: discardEmulationPreventionBytes$1,
+      USER_DATA_REGISTERED_ITU_T_T35: USER_DATA_REGISTERED_ITU_T_T35
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Reads in-band caption information from a video elementary
+     * stream. Captions must follow the CEA-708 standard for injection
+     * into an MPEG-2 transport streams.
+     * @see https://en.wikipedia.org/wiki/CEA-708
+     * @see https://www.gpo.gov/fdsys/pkg/CFR-2007-title47-vol1/pdf/CFR-2007-title47-vol1-sec15-119.pdf
+     */
+    // Link To Transport
+    // -----------------
+
+    var Stream$7 = stream;
+    var cea708Parser = captionPacketParser;
+    var CaptionStream$2 = function (options) {
+      options = options || {};
+      CaptionStream$2.prototype.init.call(this); // parse708captions flag, default to true
+
+      this.parse708captions_ = typeof options.parse708captions === 'boolean' ? options.parse708captions : true;
+      this.captionPackets_ = [];
+      this.ccStreams_ = [new Cea608Stream(0, 0),
+      // eslint-disable-line no-use-before-define
+      new Cea608Stream(0, 1),
+      // eslint-disable-line no-use-before-define
+      new Cea608Stream(1, 0),
+      // eslint-disable-line no-use-before-define
+      new Cea608Stream(1, 1) // eslint-disable-line no-use-before-define
+      ];
+
+      if (this.parse708captions_) {
+        this.cc708Stream_ = new Cea708Stream({
+          captionServices: options.captionServices
+        }); // eslint-disable-line no-use-before-define
+      }
+
+      this.reset(); // forward data and done events from CCs to this CaptionStream
+
+      this.ccStreams_.forEach(function (cc) {
+        cc.on('data', this.trigger.bind(this, 'data'));
+        cc.on('partialdone', this.trigger.bind(this, 'partialdone'));
+        cc.on('done', this.trigger.bind(this, 'done'));
+      }, this);
+      if (this.parse708captions_) {
+        this.cc708Stream_.on('data', this.trigger.bind(this, 'data'));
+        this.cc708Stream_.on('partialdone', this.trigger.bind(this, 'partialdone'));
+        this.cc708Stream_.on('done', this.trigger.bind(this, 'done'));
+      }
+    };
+    CaptionStream$2.prototype = new Stream$7();
+    CaptionStream$2.prototype.push = function (event) {
+      var sei, userData, newCaptionPackets; // only examine SEI NALs
+
+      if (event.nalUnitType !== 'sei_rbsp') {
+        return;
+      } // parse the sei
+
+      sei = cea708Parser.parseSei(event.escapedRBSP); // no payload data, skip
+
+      if (!sei.payload) {
+        return;
+      } // ignore everything but user_data_registered_itu_t_t35
+
+      if (sei.payloadType !== cea708Parser.USER_DATA_REGISTERED_ITU_T_T35) {
+        return;
+      } // parse out the user data payload
+
+      userData = cea708Parser.parseUserData(sei); // ignore unrecognized userData
+
+      if (!userData) {
+        return;
+      } // Sometimes, the same segment # will be downloaded twice. To stop the
+      // caption data from being processed twice, we track the latest dts we've
+      // received and ignore everything with a dts before that. However, since
+      // data for a specific dts can be split across packets on either side of
+      // a segment boundary, we need to make sure we *don't* ignore the packets
+      // from the *next* segment that have dts === this.latestDts_. By constantly
+      // tracking the number of packets received with dts === this.latestDts_, we
+      // know how many should be ignored once we start receiving duplicates.
+
+      if (event.dts < this.latestDts_) {
+        // We've started getting older data, so set the flag.
+        this.ignoreNextEqualDts_ = true;
+        return;
+      } else if (event.dts === this.latestDts_ && this.ignoreNextEqualDts_) {
+        this.numSameDts_--;
+        if (!this.numSameDts_) {
+          // We've received the last duplicate packet, time to start processing again
+          this.ignoreNextEqualDts_ = false;
+        }
+        return;
+      } // parse out CC data packets and save them for later
+
+      newCaptionPackets = cea708Parser.parseCaptionPackets(event.pts, userData);
+      this.captionPackets_ = this.captionPackets_.concat(newCaptionPackets);
+      if (this.latestDts_ !== event.dts) {
+        this.numSameDts_ = 0;
+      }
+      this.numSameDts_++;
+      this.latestDts_ = event.dts;
+    };
+    CaptionStream$2.prototype.flushCCStreams = function (flushType) {
+      this.ccStreams_.forEach(function (cc) {
+        return flushType === 'flush' ? cc.flush() : cc.partialFlush();
+      }, this);
+    };
+    CaptionStream$2.prototype.flushStream = function (flushType) {
+      // make sure we actually parsed captions before proceeding
+      if (!this.captionPackets_.length) {
+        this.flushCCStreams(flushType);
+        return;
+      } // In Chrome, the Array#sort function is not stable so add a
+      // presortIndex that we can use to ensure we get a stable-sort
+
+      this.captionPackets_.forEach(function (elem, idx) {
+        elem.presortIndex = idx;
+      }); // sort caption byte-pairs based on their PTS values
+
+      this.captionPackets_.sort(function (a, b) {
+        if (a.pts === b.pts) {
+          return a.presortIndex - b.presortIndex;
+        }
+        return a.pts - b.pts;
+      });
+      this.captionPackets_.forEach(function (packet) {
+        if (packet.type < 2) {
+          // Dispatch packet to the right Cea608Stream
+          this.dispatchCea608Packet(packet);
+        } else {
+          // Dispatch packet to the Cea708Stream
+          this.dispatchCea708Packet(packet);
+        }
+      }, this);
+      this.captionPackets_.length = 0;
+      this.flushCCStreams(flushType);
+    };
+    CaptionStream$2.prototype.flush = function () {
+      return this.flushStream('flush');
+    }; // Only called if handling partial data
+
+    CaptionStream$2.prototype.partialFlush = function () {
+      return this.flushStream('partialFlush');
+    };
+    CaptionStream$2.prototype.reset = function () {
+      this.latestDts_ = null;
+      this.ignoreNextEqualDts_ = false;
+      this.numSameDts_ = 0;
+      this.activeCea608Channel_ = [null, null];
+      this.ccStreams_.forEach(function (ccStream) {
+        ccStream.reset();
+      });
+    }; // From the CEA-608 spec:
+
+    /*
+     * When XDS sub-packets are interleaved with other services, the end of each sub-packet shall be followed
+     * by a control pair to change to a different service. When any of the control codes from 0x10 to 0x1F is
+     * used to begin a control code pair, it indicates the return to captioning or Text data. The control code pair
+     * and subsequent data should then be processed according to the FCC rules. It may be necessary for the
+     * line 21 data encoder to automatically insert a control code pair (i.e. RCL, RU2, RU3, RU4, RDC, or RTD)
+     * to switch to captioning or Text.
+    */
+    // With that in mind, we ignore any data between an XDS control code and a
+    // subsequent closed-captioning control code.
+
+    CaptionStream$2.prototype.dispatchCea608Packet = function (packet) {
+      // NOTE: packet.type is the CEA608 field
+      if (this.setsTextOrXDSActive(packet)) {
+        this.activeCea608Channel_[packet.type] = null;
+      } else if (this.setsChannel1Active(packet)) {
+        this.activeCea608Channel_[packet.type] = 0;
+      } else if (this.setsChannel2Active(packet)) {
+        this.activeCea608Channel_[packet.type] = 1;
+      }
+      if (this.activeCea608Channel_[packet.type] === null) {
+        // If we haven't received anything to set the active channel, or the
+        // packets are Text/XDS data, discard the data; we don't want jumbled
+        // captions
+        return;
+      }
+      this.ccStreams_[(packet.type << 1) + this.activeCea608Channel_[packet.type]].push(packet);
+    };
+    CaptionStream$2.prototype.setsChannel1Active = function (packet) {
+      return (packet.ccData & 0x7800) === 0x1000;
+    };
+    CaptionStream$2.prototype.setsChannel2Active = function (packet) {
+      return (packet.ccData & 0x7800) === 0x1800;
+    };
+    CaptionStream$2.prototype.setsTextOrXDSActive = function (packet) {
+      return (packet.ccData & 0x7100) === 0x0100 || (packet.ccData & 0x78fe) === 0x102a || (packet.ccData & 0x78fe) === 0x182a;
+    };
+    CaptionStream$2.prototype.dispatchCea708Packet = function (packet) {
+      if (this.parse708captions_) {
+        this.cc708Stream_.push(packet);
+      }
+    }; // ----------------------
+    // Session to Application
+    // ----------------------
+    // This hash maps special and extended character codes to their
+    // proper Unicode equivalent. The first one-byte key is just a
+    // non-standard character code. The two-byte keys that follow are
+    // the extended CEA708 character codes, along with the preceding
+    // 0x10 extended character byte to distinguish these codes from
+    // non-extended character codes. Every CEA708 character code that
+    // is not in this object maps directly to a standard unicode
+    // character code.
+    // The transparent space and non-breaking transparent space are
+    // technically not fully supported since there is no code to
+    // make them transparent, so they have normal non-transparent
+    // stand-ins.
+    // The special closed caption (CC) character isn't a standard
+    // unicode character, so a fairly similar unicode character was
+    // chosen in it's place.
+
+    var CHARACTER_TRANSLATION_708 = {
+      0x7f: 0x266a,
+      // ♪
+      0x1020: 0x20,
+      // Transparent Space
+      0x1021: 0xa0,
+      // Nob-breaking Transparent Space
+      0x1025: 0x2026,
+      // …
+      0x102a: 0x0160,
+      // Š
+      0x102c: 0x0152,
+      // Œ
+      0x1030: 0x2588,
+      // █
+      0x1031: 0x2018,
+      // ‘
+      0x1032: 0x2019,
+      // ’
+      0x1033: 0x201c,
+      // “
+      0x1034: 0x201d,
+      // ”
+      0x1035: 0x2022,
+      // •
+      0x1039: 0x2122,
+      // ™
+      0x103a: 0x0161,
+      // š
+      0x103c: 0x0153,
+      // œ
+      0x103d: 0x2120,
+      // ℠
+      0x103f: 0x0178,
+      // Ÿ
+      0x1076: 0x215b,
+      // ⅛
+      0x1077: 0x215c,
+      // ⅜
+      0x1078: 0x215d,
+      // ⅝
+      0x1079: 0x215e,
+      // ⅞
+      0x107a: 0x23d0,
+      // ⏐
+      0x107b: 0x23a4,
+      // ⎤
+      0x107c: 0x23a3,
+      // ⎣
+      0x107d: 0x23af,
+      // ⎯
+      0x107e: 0x23a6,
+      // ⎦
+      0x107f: 0x23a1,
+      // ⎡
+      0x10a0: 0x3138 // ㄸ (CC char)
+    };
+
+    var get708CharFromCode = function (code) {
+      var newCode = CHARACTER_TRANSLATION_708[code] || code;
+      if (code & 0x1000 && code === newCode) {
+        // Invalid extended code
+        return '';
+      }
+      return String.fromCharCode(newCode);
+    };
+    var within708TextBlock = function (b) {
+      return 0x20 <= b && b <= 0x7f || 0xa0 <= b && b <= 0xff;
+    };
+    var Cea708Window = function (windowNum) {
+      this.windowNum = windowNum;
+      this.reset();
+    };
+    Cea708Window.prototype.reset = function () {
+      this.clearText();
+      this.pendingNewLine = false;
+      this.winAttr = {};
+      this.penAttr = {};
+      this.penLoc = {};
+      this.penColor = {}; // These default values are arbitrary,
+      // defineWindow will usually override them
+
+      this.visible = 0;
+      this.rowLock = 0;
+      this.columnLock = 0;
+      this.priority = 0;
+      this.relativePositioning = 0;
+      this.anchorVertical = 0;
+      this.anchorHorizontal = 0;
+      this.anchorPoint = 0;
+      this.rowCount = 1;
+      this.virtualRowCount = this.rowCount + 1;
+      this.columnCount = 41;
+      this.windowStyle = 0;
+      this.penStyle = 0;
+    };
+    Cea708Window.prototype.getText = function () {
+      return this.rows.join('\n');
+    };
+    Cea708Window.prototype.clearText = function () {
+      this.rows = [''];
+      this.rowIdx = 0;
+    };
+    Cea708Window.prototype.newLine = function (pts) {
+      if (this.rows.length >= this.virtualRowCount && typeof this.beforeRowOverflow === 'function') {
+        this.beforeRowOverflow(pts);
+      }
+      if (this.rows.length > 0) {
+        this.rows.push('');
+        this.rowIdx++;
+      } // Show all virtual rows since there's no visible scrolling
+
+      while (this.rows.length > this.virtualRowCount) {
+        this.rows.shift();
+        this.rowIdx--;
+      }
+    };
+    Cea708Window.prototype.isEmpty = function () {
+      if (this.rows.length === 0) {
+        return true;
+      } else if (this.rows.length === 1) {
+        return this.rows[0] === '';
+      }
+      return false;
+    };
+    Cea708Window.prototype.addText = function (text) {
+      this.rows[this.rowIdx] += text;
+    };
+    Cea708Window.prototype.backspace = function () {
+      if (!this.isEmpty()) {
+        var row = this.rows[this.rowIdx];
+        this.rows[this.rowIdx] = row.substr(0, row.length - 1);
+      }
+    };
+    var Cea708Service = function (serviceNum, encoding, stream) {
+      this.serviceNum = serviceNum;
+      this.text = '';
+      this.currentWindow = new Cea708Window(-1);
+      this.windows = [];
+      this.stream = stream; // Try to setup a TextDecoder if an `encoding` value was provided
+
+      if (typeof encoding === 'string') {
+        this.createTextDecoder(encoding);
+      }
+    };
+    /**
+     * Initialize service windows
+     * Must be run before service use
+     *
+     * @param  {Integer}  pts               PTS value
+     * @param  {Function} beforeRowOverflow Function to execute before row overflow of a window
+     */
+
+    Cea708Service.prototype.init = function (pts, beforeRowOverflow) {
+      this.startPts = pts;
+      for (var win = 0; win < 8; win++) {
+        this.windows[win] = new Cea708Window(win);
+        if (typeof beforeRowOverflow === 'function') {
+          this.windows[win].beforeRowOverflow = beforeRowOverflow;
+        }
+      }
+    };
+    /**
+     * Set current window of service to be affected by commands
+     *
+     * @param  {Integer} windowNum Window number
+     */
+
+    Cea708Service.prototype.setCurrentWindow = function (windowNum) {
+      this.currentWindow = this.windows[windowNum];
+    };
+    /**
+     * Try to create a TextDecoder if it is natively supported
+     */
+
+    Cea708Service.prototype.createTextDecoder = function (encoding) {
+      if (typeof TextDecoder === 'undefined') {
+        this.stream.trigger('log', {
+          level: 'warn',
+          message: 'The `encoding` option is unsupported without TextDecoder support'
+        });
+      } else {
+        try {
+          this.textDecoder_ = new TextDecoder(encoding);
+        } catch (error) {
+          this.stream.trigger('log', {
+            level: 'warn',
+            message: 'TextDecoder could not be created with ' + encoding + ' encoding. ' + error
+          });
+        }
+      }
+    };
+    var Cea708Stream = function (options) {
+      options = options || {};
+      Cea708Stream.prototype.init.call(this);
+      var self = this;
+      var captionServices = options.captionServices || {};
+      var captionServiceEncodings = {};
+      var serviceProps; // Get service encodings from captionServices option block
+
+      Object.keys(captionServices).forEach(serviceName => {
+        serviceProps = captionServices[serviceName];
+        if (/^SERVICE/.test(serviceName)) {
+          captionServiceEncodings[serviceName] = serviceProps.encoding;
+        }
+      });
+      this.serviceEncodings = captionServiceEncodings;
+      this.current708Packet = null;
+      this.services = {};
+      this.push = function (packet) {
+        if (packet.type === 3) {
+          // 708 packet start
+          self.new708Packet();
+          self.add708Bytes(packet);
+        } else {
+          if (self.current708Packet === null) {
+            // This should only happen at the start of a file if there's no packet start.
+            self.new708Packet();
+          }
+          self.add708Bytes(packet);
+        }
+      };
+    };
+    Cea708Stream.prototype = new Stream$7();
+    /**
+     * Push current 708 packet, create new 708 packet.
+     */
+
+    Cea708Stream.prototype.new708Packet = function () {
+      if (this.current708Packet !== null) {
+        this.push708Packet();
+      }
+      this.current708Packet = {
+        data: [],
+        ptsVals: []
+      };
+    };
+    /**
+     * Add pts and both bytes from packet into current 708 packet.
+     */
+
+    Cea708Stream.prototype.add708Bytes = function (packet) {
+      var data = packet.ccData;
+      var byte0 = data >>> 8;
+      var byte1 = data & 0xff; // I would just keep a list of packets instead of bytes, but it isn't clear in the spec
+      // that service blocks will always line up with byte pairs.
+
+      this.current708Packet.ptsVals.push(packet.pts);
+      this.current708Packet.data.push(byte0);
+      this.current708Packet.data.push(byte1);
+    };
+    /**
+     * Parse completed 708 packet into service blocks and push each service block.
+     */
+
+    Cea708Stream.prototype.push708Packet = function () {
+      var packet708 = this.current708Packet;
+      var packetData = packet708.data;
+      var serviceNum = null;
+      var blockSize = null;
+      var i = 0;
+      var b = packetData[i++];
+      packet708.seq = b >> 6;
+      packet708.sizeCode = b & 0x3f; // 0b00111111;
+
+      for (; i < packetData.length; i++) {
+        b = packetData[i++];
+        serviceNum = b >> 5;
+        blockSize = b & 0x1f; // 0b00011111
+
+        if (serviceNum === 7 && blockSize > 0) {
+          // Extended service num
+          b = packetData[i++];
+          serviceNum = b;
+        }
+        this.pushServiceBlock(serviceNum, i, blockSize);
+        if (blockSize > 0) {
+          i += blockSize - 1;
+        }
+      }
+    };
+    /**
+     * Parse service block, execute commands, read text.
+     *
+     * Note: While many of these commands serve important purposes,
+     * many others just parse out the parameters or attributes, but
+     * nothing is done with them because this is not a full and complete
+     * implementation of the entire 708 spec.
+     *
+     * @param  {Integer} serviceNum Service number
+     * @param  {Integer} start      Start index of the 708 packet data
+     * @param  {Integer} size       Block size
+     */
+
+    Cea708Stream.prototype.pushServiceBlock = function (serviceNum, start, size) {
+      var b;
+      var i = start;
+      var packetData = this.current708Packet.data;
+      var service = this.services[serviceNum];
+      if (!service) {
+        service = this.initService(serviceNum, i);
+      }
+      for (; i < start + size && i < packetData.length; i++) {
+        b = packetData[i];
+        if (within708TextBlock(b)) {
+          i = this.handleText(i, service);
+        } else if (b === 0x18) {
+          i = this.multiByteCharacter(i, service);
+        } else if (b === 0x10) {
+          i = this.extendedCommands(i, service);
+        } else if (0x80 <= b && b <= 0x87) {
+          i = this.setCurrentWindow(i, service);
+        } else if (0x98 <= b && b <= 0x9f) {
+          i = this.defineWindow(i, service);
+        } else if (b === 0x88) {
+          i = this.clearWindows(i, service);
+        } else if (b === 0x8c) {
+          i = this.deleteWindows(i, service);
+        } else if (b === 0x89) {
+          i = this.displayWindows(i, service);
+        } else if (b === 0x8a) {
+          i = this.hideWindows(i, service);
+        } else if (b === 0x8b) {
+          i = this.toggleWindows(i, service);
+        } else if (b === 0x97) {
+          i = this.setWindowAttributes(i, service);
+        } else if (b === 0x90) {
+          i = this.setPenAttributes(i, service);
+        } else if (b === 0x91) {
+          i = this.setPenColor(i, service);
+        } else if (b === 0x92) {
+          i = this.setPenLocation(i, service);
+        } else if (b === 0x8f) {
+          service = this.reset(i, service);
+        } else if (b === 0x08) {
+          // BS: Backspace
+          service.currentWindow.backspace();
+        } else if (b === 0x0c) {
+          // FF: Form feed
+          service.currentWindow.clearText();
+        } else if (b === 0x0d) {
+          // CR: Carriage return
+          service.currentWindow.pendingNewLine = true;
+        } else if (b === 0x0e) {
+          // HCR: Horizontal carriage return
+          service.currentWindow.clearText();
+        } else if (b === 0x8d) {
+          // DLY: Delay, nothing to do
+          i++;
+        } else ;
+      }
+    };
+    /**
+     * Execute an extended command
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.extendedCommands = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      if (within708TextBlock(b)) {
+        i = this.handleText(i, service, {
+          isExtended: true
+        });
+      }
+      return i;
+    };
+    /**
+     * Get PTS value of a given byte index
+     *
+     * @param  {Integer} byteIndex  Index of the byte
+     * @return {Integer}            PTS
+     */
+
+    Cea708Stream.prototype.getPts = function (byteIndex) {
+      // There's 1 pts value per 2 bytes
+      return this.current708Packet.ptsVals[Math.floor(byteIndex / 2)];
+    };
+    /**
+     * Initializes a service
+     *
+     * @param  {Integer} serviceNum Service number
+     * @return {Service}            Initialized service object
+     */
+
+    Cea708Stream.prototype.initService = function (serviceNum, i) {
+      var serviceName = 'SERVICE' + serviceNum;
+      var self = this;
+      var serviceName;
+      var encoding;
+      if (serviceName in this.serviceEncodings) {
+        encoding = this.serviceEncodings[serviceName];
+      }
+      this.services[serviceNum] = new Cea708Service(serviceNum, encoding, self);
+      this.services[serviceNum].init(this.getPts(i), function (pts) {
+        self.flushDisplayed(pts, self.services[serviceNum]);
+      });
+      return this.services[serviceNum];
+    };
+    /**
+     * Execute text writing to current window
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.handleText = function (i, service, options) {
+      var isExtended = options && options.isExtended;
+      var isMultiByte = options && options.isMultiByte;
+      var packetData = this.current708Packet.data;
+      var extended = isExtended ? 0x1000 : 0x0000;
+      var currentByte = packetData[i];
+      var nextByte = packetData[i + 1];
+      var win = service.currentWindow;
+      var char;
+      var charCodeArray; // Converts an array of bytes to a unicode hex string.
+
+      function toHexString(byteArray) {
+        return byteArray.map(byte => {
+          return ('0' + (byte & 0xFF).toString(16)).slice(-2);
+        }).join('');
+      }
+      if (isMultiByte) {
+        charCodeArray = [currentByte, nextByte];
+        i++;
+      } else {
+        charCodeArray = [currentByte];
+      } // Use the TextDecoder if one was created for this service
+
+      if (service.textDecoder_ && !isExtended) {
+        char = service.textDecoder_.decode(new Uint8Array(charCodeArray));
+      } else {
+        // We assume any multi-byte char without a decoder is unicode.
+        if (isMultiByte) {
+          const unicode = toHexString(charCodeArray); // Takes a unicode hex string and creates a single character.
+
+          char = String.fromCharCode(parseInt(unicode, 16));
+        } else {
+          char = get708CharFromCode(extended | currentByte);
+        }
+      }
+      if (win.pendingNewLine && !win.isEmpty()) {
+        win.newLine(this.getPts(i));
+      }
+      win.pendingNewLine = false;
+      win.addText(char);
+      return i;
+    };
+    /**
+     * Handle decoding of multibyte character
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.multiByteCharacter = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var firstByte = packetData[i + 1];
+      var secondByte = packetData[i + 2];
+      if (within708TextBlock(firstByte) && within708TextBlock(secondByte)) {
+        i = this.handleText(++i, service, {
+          isMultiByte: true
+        });
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the CW# command.
+     *
+     * Set the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setCurrentWindow = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var windowNum = b & 0x07;
+      service.setCurrentWindow(windowNum);
+      return i;
+    };
+    /**
+     * Parse and execute the DF# command.
+     *
+     * Define a window and set it as the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.defineWindow = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var windowNum = b & 0x07;
+      service.setCurrentWindow(windowNum);
+      var win = service.currentWindow;
+      b = packetData[++i];
+      win.visible = (b & 0x20) >> 5; // v
+
+      win.rowLock = (b & 0x10) >> 4; // rl
+
+      win.columnLock = (b & 0x08) >> 3; // cl
+
+      win.priority = b & 0x07; // p
+
+      b = packetData[++i];
+      win.relativePositioning = (b & 0x80) >> 7; // rp
+
+      win.anchorVertical = b & 0x7f; // av
+
+      b = packetData[++i];
+      win.anchorHorizontal = b; // ah
+
+      b = packetData[++i];
+      win.anchorPoint = (b & 0xf0) >> 4; // ap
+
+      win.rowCount = b & 0x0f; // rc
+
+      b = packetData[++i];
+      win.columnCount = b & 0x3f; // cc
+
+      b = packetData[++i];
+      win.windowStyle = (b & 0x38) >> 3; // ws
+
+      win.penStyle = b & 0x07; // ps
+      // The spec says there are (rowCount+1) "virtual rows"
+
+      win.virtualRowCount = win.rowCount + 1;
+      return i;
+    };
+    /**
+     * Parse and execute the SWA command.
+     *
+     * Set attributes of the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setWindowAttributes = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var winAttr = service.currentWindow.winAttr;
+      b = packetData[++i];
+      winAttr.fillOpacity = (b & 0xc0) >> 6; // fo
+
+      winAttr.fillRed = (b & 0x30) >> 4; // fr
+
+      winAttr.fillGreen = (b & 0x0c) >> 2; // fg
+
+      winAttr.fillBlue = b & 0x03; // fb
+
+      b = packetData[++i];
+      winAttr.borderType = (b & 0xc0) >> 6; // bt
+
+      winAttr.borderRed = (b & 0x30) >> 4; // br
+
+      winAttr.borderGreen = (b & 0x0c) >> 2; // bg
+
+      winAttr.borderBlue = b & 0x03; // bb
+
+      b = packetData[++i];
+      winAttr.borderType += (b & 0x80) >> 5; // bt
+
+      winAttr.wordWrap = (b & 0x40) >> 6; // ww
+
+      winAttr.printDirection = (b & 0x30) >> 4; // pd
+
+      winAttr.scrollDirection = (b & 0x0c) >> 2; // sd
+
+      winAttr.justify = b & 0x03; // j
+
+      b = packetData[++i];
+      winAttr.effectSpeed = (b & 0xf0) >> 4; // es
+
+      winAttr.effectDirection = (b & 0x0c) >> 2; // ed
+
+      winAttr.displayEffect = b & 0x03; // de
+
+      return i;
+    };
+    /**
+     * Gather text from all displayed windows and push a caption to output.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     */
+
+    Cea708Stream.prototype.flushDisplayed = function (pts, service) {
+      var displayedText = []; // TODO: Positioning not supported, displaying multiple windows will not necessarily
+      // display text in the correct order, but sample files so far have not shown any issue.
+
+      for (var winId = 0; winId < 8; winId++) {
+        if (service.windows[winId].visible && !service.windows[winId].isEmpty()) {
+          displayedText.push(service.windows[winId].getText());
+        }
+      }
+      service.endPts = pts;
+      service.text = displayedText.join('\n\n');
+      this.pushCaption(service);
+      service.startPts = pts;
+    };
+    /**
+     * Push a caption to output if the caption contains text.
+     *
+     * @param  {Service} service  The service object to be affected
+     */
+
+    Cea708Stream.prototype.pushCaption = function (service) {
+      if (service.text !== '') {
+        this.trigger('data', {
+          startPts: service.startPts,
+          endPts: service.endPts,
+          text: service.text,
+          stream: 'cc708_' + service.serviceNum
+        });
+        service.text = '';
+        service.startPts = service.endPts;
+      }
+    };
+    /**
+     * Parse and execute the DSW command.
+     *
+     * Set visible property of windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.displayWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].visible = 1;
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the HDW command.
+     *
+     * Set visible property of windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.hideWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].visible = 0;
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the TGW command.
+     *
+     * Set visible property of windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.toggleWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].visible ^= 1;
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the CLW command.
+     *
+     * Clear text of windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.clearWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].clearText();
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the DLW command.
+     *
+     * Re-initialize windows based on the parsed bitmask.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.deleteWindows = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[++i];
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      for (var winId = 0; winId < 8; winId++) {
+        if (b & 0x01 << winId) {
+          service.windows[winId].reset();
+        }
+      }
+      return i;
+    };
+    /**
+     * Parse and execute the SPA command.
+     *
+     * Set pen attributes of the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setPenAttributes = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var penAttr = service.currentWindow.penAttr;
+      b = packetData[++i];
+      penAttr.textTag = (b & 0xf0) >> 4; // tt
+
+      penAttr.offset = (b & 0x0c) >> 2; // o
+
+      penAttr.penSize = b & 0x03; // s
+
+      b = packetData[++i];
+      penAttr.italics = (b & 0x80) >> 7; // i
+
+      penAttr.underline = (b & 0x40) >> 6; // u
+
+      penAttr.edgeType = (b & 0x38) >> 3; // et
+
+      penAttr.fontStyle = b & 0x07; // fs
+
+      return i;
+    };
+    /**
+     * Parse and execute the SPC command.
+     *
+     * Set pen color of the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setPenColor = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var penColor = service.currentWindow.penColor;
+      b = packetData[++i];
+      penColor.fgOpacity = (b & 0xc0) >> 6; // fo
+
+      penColor.fgRed = (b & 0x30) >> 4; // fr
+
+      penColor.fgGreen = (b & 0x0c) >> 2; // fg
+
+      penColor.fgBlue = b & 0x03; // fb
+
+      b = packetData[++i];
+      penColor.bgOpacity = (b & 0xc0) >> 6; // bo
+
+      penColor.bgRed = (b & 0x30) >> 4; // br
+
+      penColor.bgGreen = (b & 0x0c) >> 2; // bg
+
+      penColor.bgBlue = b & 0x03; // bb
+
+      b = packetData[++i];
+      penColor.edgeRed = (b & 0x30) >> 4; // er
+
+      penColor.edgeGreen = (b & 0x0c) >> 2; // eg
+
+      penColor.edgeBlue = b & 0x03; // eb
+
+      return i;
+    };
+    /**
+     * Parse and execute the SPL command.
+     *
+     * Set pen location of the current window.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Integer}          New index after parsing
+     */
+
+    Cea708Stream.prototype.setPenLocation = function (i, service) {
+      var packetData = this.current708Packet.data;
+      var b = packetData[i];
+      var penLoc = service.currentWindow.penLoc; // Positioning isn't really supported at the moment, so this essentially just inserts a linebreak
+
+      service.currentWindow.pendingNewLine = true;
+      b = packetData[++i];
+      penLoc.row = b & 0x0f; // r
+
+      b = packetData[++i];
+      penLoc.column = b & 0x3f; // c
+
+      return i;
+    };
+    /**
+     * Execute the RST command.
+     *
+     * Reset service to a clean slate. Re-initialize.
+     *
+     * @param  {Integer} i        Current index in the 708 packet
+     * @param  {Service} service  The service object to be affected
+     * @return {Service}          Re-initialized service
+     */
+
+    Cea708Stream.prototype.reset = function (i, service) {
+      var pts = this.getPts(i);
+      this.flushDisplayed(pts, service);
+      return this.initService(service.serviceNum, i);
+    }; // This hash maps non-ASCII, special, and extended character codes to their
+    // proper Unicode equivalent. The first keys that are only a single byte
+    // are the non-standard ASCII characters, which simply map the CEA608 byte
+    // to the standard ASCII/Unicode. The two-byte keys that follow are the CEA608
+    // character codes, but have their MSB bitmasked with 0x03 so that a lookup
+    // can be performed regardless of the field and data channel on which the
+    // character code was received.
+
+    var CHARACTER_TRANSLATION = {
+      0x2a: 0xe1,
+      // á
+      0x5c: 0xe9,
+      // é
+      0x5e: 0xed,
+      // í
+      0x5f: 0xf3,
+      // ó
+      0x60: 0xfa,
+      // ú
+      0x7b: 0xe7,
+      // ç
+      0x7c: 0xf7,
+      // ÷
+      0x7d: 0xd1,
+      // Ñ
+      0x7e: 0xf1,
+      // ñ
+      0x7f: 0x2588,
+      // █
+      0x0130: 0xae,
+      // ®
+      0x0131: 0xb0,
+      // °
+      0x0132: 0xbd,
+      // ½
+      0x0133: 0xbf,
+      // ¿
+      0x0134: 0x2122,
+      // ™
+      0x0135: 0xa2,
+      // ¢
+      0x0136: 0xa3,
+      // £
+      0x0137: 0x266a,
+      // ♪
+      0x0138: 0xe0,
+      // à
+      0x0139: 0xa0,
+      //
+      0x013a: 0xe8,
+      // è
+      0x013b: 0xe2,
+      // â
+      0x013c: 0xea,
+      // ê
+      0x013d: 0xee,
+      // î
+      0x013e: 0xf4,
+      // ô
+      0x013f: 0xfb,
+      // û
+      0x0220: 0xc1,
+      // Á
+      0x0221: 0xc9,
+      // É
+      0x0222: 0xd3,
+      // Ó
+      0x0223: 0xda,
+      // Ú
+      0x0224: 0xdc,
+      // Ü
+      0x0225: 0xfc,
+      // ü
+      0x0226: 0x2018,
+      // ‘
+      0x0227: 0xa1,
+      // ¡
+      0x0228: 0x2a,
+      // *
+      0x0229: 0x27,
+      // '
+      0x022a: 0x2014,
+      // —
+      0x022b: 0xa9,
+      // ©
+      0x022c: 0x2120,
+      // ℠
+      0x022d: 0x2022,
+      // •
+      0x022e: 0x201c,
+      // “
+      0x022f: 0x201d,
+      // ”
+      0x0230: 0xc0,
+      // À
+      0x0231: 0xc2,
+      // Â
+      0x0232: 0xc7,
+      // Ç
+      0x0233: 0xc8,
+      // È
+      0x0234: 0xca,
+      // Ê
+      0x0235: 0xcb,
+      // Ë
+      0x0236: 0xeb,
+      // ë
+      0x0237: 0xce,
+      // Î
+      0x0238: 0xcf,
+      // Ï
+      0x0239: 0xef,
+      // ï
+      0x023a: 0xd4,
+      // Ô
+      0x023b: 0xd9,
+      // Ù
+      0x023c: 0xf9,
+      // ù
+      0x023d: 0xdb,
+      // Û
+      0x023e: 0xab,
+      // «
+      0x023f: 0xbb,
+      // »
+      0x0320: 0xc3,
+      // Ã
+      0x0321: 0xe3,
+      // ã
+      0x0322: 0xcd,
+      // Í
+      0x0323: 0xcc,
+      // Ì
+      0x0324: 0xec,
+      // ì
+      0x0325: 0xd2,
+      // Ò
+      0x0326: 0xf2,
+      // ò
+      0x0327: 0xd5,
+      // Õ
+      0x0328: 0xf5,
+      // õ
+      0x0329: 0x7b,
+      // {
+      0x032a: 0x7d,
+      // }
+      0x032b: 0x5c,
+      // \
+      0x032c: 0x5e,
+      // ^
+      0x032d: 0x5f,
+      // _
+      0x032e: 0x7c,
+      // |
+      0x032f: 0x7e,
+      // ~
+      0x0330: 0xc4,
+      // Ä
+      0x0331: 0xe4,
+      // ä
+      0x0332: 0xd6,
+      // Ö
+      0x0333: 0xf6,
+      // ö
+      0x0334: 0xdf,
+      // ß
+      0x0335: 0xa5,
+      // ¥
+      0x0336: 0xa4,
+      // ¤
+      0x0337: 0x2502,
+      // │
+      0x0338: 0xc5,
+      // Å
+      0x0339: 0xe5,
+      // å
+      0x033a: 0xd8,
+      // Ø
+      0x033b: 0xf8,
+      // ø
+      0x033c: 0x250c,
+      // ┌
+      0x033d: 0x2510,
+      // ┐
+      0x033e: 0x2514,
+      // └
+      0x033f: 0x2518 // ┘
+    };
+
+    var getCharFromCode = function (code) {
+      if (code === null) {
+        return '';
+      }
+      code = CHARACTER_TRANSLATION[code] || code;
+      return String.fromCharCode(code);
+    }; // the index of the last row in a CEA-608 display buffer
+
+    var BOTTOM_ROW = 14; // This array is used for mapping PACs -> row #, since there's no way of
+    // getting it through bit logic.
+
+    var ROWS = [0x1100, 0x1120, 0x1200, 0x1220, 0x1500, 0x1520, 0x1600, 0x1620, 0x1700, 0x1720, 0x1000, 0x1300, 0x1320, 0x1400, 0x1420]; // CEA-608 captions are rendered onto a 34x15 matrix of character
+    // cells. The "bottom" row is the last element in the outer array.
+    // We keep track of positioning information as we go by storing the
+    // number of indentations and the tab offset in this buffer.
+
+    var createDisplayBuffer = function () {
+      var result = [],
+        i = BOTTOM_ROW + 1;
+      while (i--) {
+        result.push({
+          text: '',
+          indent: 0,
+          offset: 0
+        });
+      }
+      return result;
+    };
+    var Cea608Stream = function (field, dataChannel) {
+      Cea608Stream.prototype.init.call(this);
+      this.field_ = field || 0;
+      this.dataChannel_ = dataChannel || 0;
+      this.name_ = 'CC' + ((this.field_ << 1 | this.dataChannel_) + 1);
+      this.setConstants();
+      this.reset();
+      this.push = function (packet) {
+        var data, swap, char0, char1, text; // remove the parity bits
+
+        data = packet.ccData & 0x7f7f; // ignore duplicate control codes; the spec demands they're sent twice
+
+        if (data === this.lastControlCode_) {
+          this.lastControlCode_ = null;
+          return;
+        } // Store control codes
+
+        if ((data & 0xf000) === 0x1000) {
+          this.lastControlCode_ = data;
+        } else if (data !== this.PADDING_) {
+          this.lastControlCode_ = null;
+        }
+        char0 = data >>> 8;
+        char1 = data & 0xff;
+        if (data === this.PADDING_) {
+          return;
+        } else if (data === this.RESUME_CAPTION_LOADING_) {
+          this.mode_ = 'popOn';
+        } else if (data === this.END_OF_CAPTION_) {
+          // If an EOC is received while in paint-on mode, the displayed caption
+          // text should be swapped to non-displayed memory as if it was a pop-on
+          // caption. Because of that, we should explicitly switch back to pop-on
+          // mode
+          this.mode_ = 'popOn';
+          this.clearFormatting(packet.pts); // if a caption was being displayed, it's gone now
+
+          this.flushDisplayed(packet.pts); // flip memory
+
+          swap = this.displayed_;
+          this.displayed_ = this.nonDisplayed_;
+          this.nonDisplayed_ = swap; // start measuring the time to display the caption
+
+          this.startPts_ = packet.pts;
+        } else if (data === this.ROLL_UP_2_ROWS_) {
+          this.rollUpRows_ = 2;
+          this.setRollUp(packet.pts);
+        } else if (data === this.ROLL_UP_3_ROWS_) {
+          this.rollUpRows_ = 3;
+          this.setRollUp(packet.pts);
+        } else if (data === this.ROLL_UP_4_ROWS_) {
+          this.rollUpRows_ = 4;
+          this.setRollUp(packet.pts);
+        } else if (data === this.CARRIAGE_RETURN_) {
+          this.clearFormatting(packet.pts);
+          this.flushDisplayed(packet.pts);
+          this.shiftRowsUp_();
+          this.startPts_ = packet.pts;
+        } else if (data === this.BACKSPACE_) {
+          if (this.mode_ === 'popOn') {
+            this.nonDisplayed_[this.row_].text = this.nonDisplayed_[this.row_].text.slice(0, -1);
+          } else {
+            this.displayed_[this.row_].text = this.displayed_[this.row_].text.slice(0, -1);
+          }
+        } else if (data === this.ERASE_DISPLAYED_MEMORY_) {
+          this.flushDisplayed(packet.pts);
+          this.displayed_ = createDisplayBuffer();
+        } else if (data === this.ERASE_NON_DISPLAYED_MEMORY_) {
+          this.nonDisplayed_ = createDisplayBuffer();
+        } else if (data === this.RESUME_DIRECT_CAPTIONING_) {
+          if (this.mode_ !== 'paintOn') {
+            // NOTE: This should be removed when proper caption positioning is
+            // implemented
+            this.flushDisplayed(packet.pts);
+            this.displayed_ = createDisplayBuffer();
+          }
+          this.mode_ = 'paintOn';
+          this.startPts_ = packet.pts; // Append special characters to caption text
+        } else if (this.isSpecialCharacter(char0, char1)) {
+          // Bitmask char0 so that we can apply character transformations
+          // regardless of field and data channel.
+          // Then byte-shift to the left and OR with char1 so we can pass the
+          // entire character code to `getCharFromCode`.
+          char0 = (char0 & 0x03) << 8;
+          text = getCharFromCode(char0 | char1);
+          this[this.mode_](packet.pts, text);
+          this.column_++; // Append extended characters to caption text
+        } else if (this.isExtCharacter(char0, char1)) {
+          // Extended characters always follow their "non-extended" equivalents.
+          // IE if a "è" is desired, you'll always receive "eè"; non-compliant
+          // decoders are supposed to drop the "è", while compliant decoders
+          // backspace the "e" and insert "è".
+          // Delete the previous character
+          if (this.mode_ === 'popOn') {
+            this.nonDisplayed_[this.row_].text = this.nonDisplayed_[this.row_].text.slice(0, -1);
+          } else {
+            this.displayed_[this.row_].text = this.displayed_[this.row_].text.slice(0, -1);
+          } // Bitmask char0 so that we can apply character transformations
+          // regardless of field and data channel.
+          // Then byte-shift to the left and OR with char1 so we can pass the
+          // entire character code to `getCharFromCode`.
+
+          char0 = (char0 & 0x03) << 8;
+          text = getCharFromCode(char0 | char1);
+          this[this.mode_](packet.pts, text);
+          this.column_++; // Process mid-row codes
+        } else if (this.isMidRowCode(char0, char1)) {
+          // Attributes are not additive, so clear all formatting
+          this.clearFormatting(packet.pts); // According to the standard, mid-row codes
+          // should be replaced with spaces, so add one now
+
+          this[this.mode_](packet.pts, ' ');
+          this.column_++;
+          if ((char1 & 0xe) === 0xe) {
+            this.addFormatting(packet.pts, ['i']);
+          }
+          if ((char1 & 0x1) === 0x1) {
+            this.addFormatting(packet.pts, ['u']);
+          } // Detect offset control codes and adjust cursor
+        } else if (this.isOffsetControlCode(char0, char1)) {
+          // Cursor position is set by indent PAC (see below) in 4-column
+          // increments, with an additional offset code of 1-3 to reach any
+          // of the 32 columns specified by CEA-608. So all we need to do
+          // here is increment the column cursor by the given offset.
+          const offset = char1 & 0x03; // For an offest value 1-3, set the offset for that caption
+          // in the non-displayed array.
+
+          this.nonDisplayed_[this.row_].offset = offset;
+          this.column_ += offset; // Detect PACs (Preamble Address Codes)
+        } else if (this.isPAC(char0, char1)) {
+          // There's no logic for PAC -> row mapping, so we have to just
+          // find the row code in an array and use its index :(
+          var row = ROWS.indexOf(data & 0x1f20); // Configure the caption window if we're in roll-up mode
+
+          if (this.mode_ === 'rollUp') {
+            // This implies that the base row is incorrectly set.
+            // As per the recommendation in CEA-608(Base Row Implementation), defer to the number
+            // of roll-up rows set.
+            if (row - this.rollUpRows_ + 1 < 0) {
+              row = this.rollUpRows_ - 1;
+            }
+            this.setRollUp(packet.pts, row);
+          } // Ensure the row is between 0 and 14, otherwise use the most
+          // recent or default row.
+
+          if (row !== this.row_ && row >= 0 && row <= 14) {
+            // formatting is only persistent for current row
+            this.clearFormatting(packet.pts);
+            this.row_ = row;
+          } // All PACs can apply underline, so detect and apply
+          // (All odd-numbered second bytes set underline)
+
+          if (char1 & 0x1 && this.formatting_.indexOf('u') === -1) {
+            this.addFormatting(packet.pts, ['u']);
+          }
+          if ((data & 0x10) === 0x10) {
+            // We've got an indent level code. Each successive even number
+            // increments the column cursor by 4, so we can get the desired
+            // column position by bit-shifting to the right (to get n/2)
+            // and multiplying by 4.
+            const indentations = (data & 0xe) >> 1;
+            this.column_ = indentations * 4; // add to the number of indentations for positioning
+
+            this.nonDisplayed_[this.row_].indent += indentations;
+          }
+          if (this.isColorPAC(char1)) {
+            // it's a color code, though we only support white, which
+            // can be either normal or italicized. white italics can be
+            // either 0x4e or 0x6e depending on the row, so we just
+            // bitwise-and with 0xe to see if italics should be turned on
+            if ((char1 & 0xe) === 0xe) {
+              this.addFormatting(packet.pts, ['i']);
+            }
+          } // We have a normal character in char0, and possibly one in char1
+        } else if (this.isNormalChar(char0)) {
+          if (char1 === 0x00) {
+            char1 = null;
+          }
+          text = getCharFromCode(char0);
+          text += getCharFromCode(char1);
+          this[this.mode_](packet.pts, text);
+          this.column_ += text.length;
+        } // finish data processing
+      };
+    };
+
+    Cea608Stream.prototype = new Stream$7(); // Trigger a cue point that captures the current state of the
+    // display buffer
+
+    Cea608Stream.prototype.flushDisplayed = function (pts) {
+      const logWarning = index => {
+        this.trigger('log', {
+          level: 'warn',
+          message: 'Skipping a malformed 608 caption at index ' + index + '.'
+        });
+      };
+      const content = [];
+      this.displayed_.forEach((row, i) => {
+        if (row && row.text && row.text.length) {
+          try {
+            // remove spaces from the start and end of the string
+            row.text = row.text.trim();
+          } catch (e) {
+            // Ordinarily, this shouldn't happen. However, caption
+            // parsing errors should not throw exceptions and
+            // break playback.
+            logWarning(i);
+          } // See the below link for more details on the following fields:
+          // https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#positioning-in-cea-608
+
+          if (row.text.length) {
+            content.push({
+              // The text to be displayed in the caption from this specific row, with whitespace removed.
+              text: row.text,
+              // Value between 1 and 15 representing the PAC row used to calculate line height.
+              line: i + 1,
+              // A number representing the indent position by percentage (CEA-608 PAC indent code).
+              // The value will be a number between 10 and 80. Offset is used to add an aditional
+              // value to the position if necessary.
+              position: 10 + Math.min(70, row.indent * 10) + row.offset * 2.5
+            });
+          }
+        } else if (row === undefined || row === null) {
+          logWarning(i);
+        }
+      });
+      if (content.length) {
+        this.trigger('data', {
+          startPts: this.startPts_,
+          endPts: pts,
+          content,
+          stream: this.name_
+        });
+      }
+    };
+    /**
+     * Zero out the data, used for startup and on seek
+     */
+
+    Cea608Stream.prototype.reset = function () {
+      this.mode_ = 'popOn'; // When in roll-up mode, the index of the last row that will
+      // actually display captions. If a caption is shifted to a row
+      // with a lower index than this, it is cleared from the display
+      // buffer
+
+      this.topRow_ = 0;
+      this.startPts_ = 0;
+      this.displayed_ = createDisplayBuffer();
+      this.nonDisplayed_ = createDisplayBuffer();
+      this.lastControlCode_ = null; // Track row and column for proper line-breaking and spacing
+
+      this.column_ = 0;
+      this.row_ = BOTTOM_ROW;
+      this.rollUpRows_ = 2; // This variable holds currently-applied formatting
+
+      this.formatting_ = [];
+    };
+    /**
+     * Sets up control code and related constants for this instance
+     */
+
+    Cea608Stream.prototype.setConstants = function () {
+      // The following attributes have these uses:
+      // ext_ :    char0 for mid-row codes, and the base for extended
+      //           chars (ext_+0, ext_+1, and ext_+2 are char0s for
+      //           extended codes)
+      // control_: char0 for control codes, except byte-shifted to the
+      //           left so that we can do this.control_ | CONTROL_CODE
+      // offset_:  char0 for tab offset codes
+      //
+      // It's also worth noting that control codes, and _only_ control codes,
+      // differ between field 1 and field2. Field 2 control codes are always
+      // their field 1 value plus 1. That's why there's the "| field" on the
+      // control value.
+      if (this.dataChannel_ === 0) {
+        this.BASE_ = 0x10;
+        this.EXT_ = 0x11;
+        this.CONTROL_ = (0x14 | this.field_) << 8;
+        this.OFFSET_ = 0x17;
+      } else if (this.dataChannel_ === 1) {
+        this.BASE_ = 0x18;
+        this.EXT_ = 0x19;
+        this.CONTROL_ = (0x1c | this.field_) << 8;
+        this.OFFSET_ = 0x1f;
+      } // Constants for the LSByte command codes recognized by Cea608Stream. This
+      // list is not exhaustive. For a more comprehensive listing and semantics see
+      // http://www.gpo.gov/fdsys/pkg/CFR-2010-title47-vol1/pdf/CFR-2010-title47-vol1-sec15-119.pdf
+      // Padding
+
+      this.PADDING_ = 0x0000; // Pop-on Mode
+
+      this.RESUME_CAPTION_LOADING_ = this.CONTROL_ | 0x20;
+      this.END_OF_CAPTION_ = this.CONTROL_ | 0x2f; // Roll-up Mode
+
+      this.ROLL_UP_2_ROWS_ = this.CONTROL_ | 0x25;
+      this.ROLL_UP_3_ROWS_ = this.CONTROL_ | 0x26;
+      this.ROLL_UP_4_ROWS_ = this.CONTROL_ | 0x27;
+      this.CARRIAGE_RETURN_ = this.CONTROL_ | 0x2d; // paint-on mode
+
+      this.RESUME_DIRECT_CAPTIONING_ = this.CONTROL_ | 0x29; // Erasure
+
+      this.BACKSPACE_ = this.CONTROL_ | 0x21;
+      this.ERASE_DISPLAYED_MEMORY_ = this.CONTROL_ | 0x2c;
+      this.ERASE_NON_DISPLAYED_MEMORY_ = this.CONTROL_ | 0x2e;
+    };
+    /**
+     * Detects if the 2-byte packet data is a special character
+     *
+     * Special characters have a second byte in the range 0x30 to 0x3f,
+     * with the first byte being 0x11 (for data channel 1) or 0x19 (for
+     * data channel 2).
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are an special character
+     */
+
+    Cea608Stream.prototype.isSpecialCharacter = function (char0, char1) {
+      return char0 === this.EXT_ && char1 >= 0x30 && char1 <= 0x3f;
+    };
+    /**
+     * Detects if the 2-byte packet data is an extended character
+     *
+     * Extended characters have a second byte in the range 0x20 to 0x3f,
+     * with the first byte being 0x12 or 0x13 (for data channel 1) or
+     * 0x1a or 0x1b (for data channel 2).
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are an extended character
+     */
+
+    Cea608Stream.prototype.isExtCharacter = function (char0, char1) {
+      return (char0 === this.EXT_ + 1 || char0 === this.EXT_ + 2) && char1 >= 0x20 && char1 <= 0x3f;
+    };
+    /**
+     * Detects if the 2-byte packet is a mid-row code
+     *
+     * Mid-row codes have a second byte in the range 0x20 to 0x2f, with
+     * the first byte being 0x11 (for data channel 1) or 0x19 (for data
+     * channel 2).
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are a mid-row code
+     */
+
+    Cea608Stream.prototype.isMidRowCode = function (char0, char1) {
+      return char0 === this.EXT_ && char1 >= 0x20 && char1 <= 0x2f;
+    };
+    /**
+     * Detects if the 2-byte packet is an offset control code
+     *
+     * Offset control codes have a second byte in the range 0x21 to 0x23,
+     * with the first byte being 0x17 (for data channel 1) or 0x1f (for
+     * data channel 2).
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are an offset control code
+     */
+
+    Cea608Stream.prototype.isOffsetControlCode = function (char0, char1) {
+      return char0 === this.OFFSET_ && char1 >= 0x21 && char1 <= 0x23;
+    };
+    /**
+     * Detects if the 2-byte packet is a Preamble Address Code
+     *
+     * PACs have a first byte in the range 0x10 to 0x17 (for data channel 1)
+     * or 0x18 to 0x1f (for data channel 2), with the second byte in the
+     * range 0x40 to 0x7f.
+     *
+     * @param  {Integer} char0 The first byte
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the 2 bytes are a PAC
+     */
+
+    Cea608Stream.prototype.isPAC = function (char0, char1) {
+      return char0 >= this.BASE_ && char0 < this.BASE_ + 8 && char1 >= 0x40 && char1 <= 0x7f;
+    };
+    /**
+     * Detects if a packet's second byte is in the range of a PAC color code
+     *
+     * PAC color codes have the second byte be in the range 0x40 to 0x4f, or
+     * 0x60 to 0x6f.
+     *
+     * @param  {Integer} char1 The second byte
+     * @return {Boolean}       Whether the byte is a color PAC
+     */
+
+    Cea608Stream.prototype.isColorPAC = function (char1) {
+      return char1 >= 0x40 && char1 <= 0x4f || char1 >= 0x60 && char1 <= 0x7f;
+    };
+    /**
+     * Detects if a single byte is in the range of a normal character
+     *
+     * Normal text bytes are in the range 0x20 to 0x7f.
+     *
+     * @param  {Integer} char  The byte
+     * @return {Boolean}       Whether the byte is a normal character
+     */
+
+    Cea608Stream.prototype.isNormalChar = function (char) {
+      return char >= 0x20 && char <= 0x7f;
+    };
+    /**
+     * Configures roll-up
+     *
+     * @param  {Integer} pts         Current PTS
+     * @param  {Integer} newBaseRow  Used by PACs to slide the current window to
+     *                               a new position
+     */
+
+    Cea608Stream.prototype.setRollUp = function (pts, newBaseRow) {
+      // Reset the base row to the bottom row when switching modes
+      if (this.mode_ !== 'rollUp') {
+        this.row_ = BOTTOM_ROW;
+        this.mode_ = 'rollUp'; // Spec says to wipe memories when switching to roll-up
+
+        this.flushDisplayed(pts);
+        this.nonDisplayed_ = createDisplayBuffer();
+        this.displayed_ = createDisplayBuffer();
+      }
+      if (newBaseRow !== undefined && newBaseRow !== this.row_) {
+        // move currently displayed captions (up or down) to the new base row
+        for (var i = 0; i < this.rollUpRows_; i++) {
+          this.displayed_[newBaseRow - i] = this.displayed_[this.row_ - i];
+          this.displayed_[this.row_ - i] = {
+            text: '',
+            indent: 0,
+            offset: 0
+          };
+        }
+      }
+      if (newBaseRow === undefined) {
+        newBaseRow = this.row_;
+      }
+      this.topRow_ = newBaseRow - this.rollUpRows_ + 1;
+    }; // Adds the opening HTML tag for the passed character to the caption text,
+    // and keeps track of it for later closing
+
+    Cea608Stream.prototype.addFormatting = function (pts, format) {
+      this.formatting_ = this.formatting_.concat(format);
+      var text = format.reduce(function (text, format) {
+        return text + '<' + format + '>';
+      }, '');
+      this[this.mode_](pts, text);
+    }; // Adds HTML closing tags for current formatting to caption text and
+    // clears remembered formatting
+
+    Cea608Stream.prototype.clearFormatting = function (pts) {
+      if (!this.formatting_.length) {
+        return;
+      }
+      var text = this.formatting_.reverse().reduce(function (text, format) {
+        return text + '</' + format + '>';
+      }, '');
+      this.formatting_ = [];
+      this[this.mode_](pts, text);
+    }; // Mode Implementations
+
+    Cea608Stream.prototype.popOn = function (pts, text) {
+      var baseRow = this.nonDisplayed_[this.row_].text; // buffer characters
+
+      baseRow += text;
+      this.nonDisplayed_[this.row_].text = baseRow;
+    };
+    Cea608Stream.prototype.rollUp = function (pts, text) {
+      var baseRow = this.displayed_[this.row_].text;
+      baseRow += text;
+      this.displayed_[this.row_].text = baseRow;
+    };
+    Cea608Stream.prototype.shiftRowsUp_ = function () {
+      var i; // clear out inactive rows
+
+      for (i = 0; i < this.topRow_; i++) {
+        this.displayed_[i] = {
+          text: '',
+          indent: 0,
+          offset: 0
+        };
+      }
+      for (i = this.row_ + 1; i < BOTTOM_ROW + 1; i++) {
+        this.displayed_[i] = {
+          text: '',
+          indent: 0,
+          offset: 0
+        };
+      } // shift displayed rows up
+
+      for (i = this.topRow_; i < this.row_; i++) {
+        this.displayed_[i] = this.displayed_[i + 1];
+      } // clear out the bottom row
+
+      this.displayed_[this.row_] = {
+        text: '',
+        indent: 0,
+        offset: 0
+      };
+    };
+    Cea608Stream.prototype.paintOn = function (pts, text) {
+      var baseRow = this.displayed_[this.row_].text;
+      baseRow += text;
+      this.displayed_[this.row_].text = baseRow;
+    }; // exports
+
+    var captionStream = {
+      CaptionStream: CaptionStream$2,
+      Cea608Stream: Cea608Stream,
+      Cea708Stream: Cea708Stream
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var streamTypes = {
+      H264_STREAM_TYPE: 0x1B,
+      ADTS_STREAM_TYPE: 0x0F,
+      METADATA_STREAM_TYPE: 0x15
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Accepts program elementary stream (PES) data events and corrects
+     * decode and presentation time stamps to account for a rollover
+     * of the 33 bit value.
+     */
+
+    var Stream$6 = stream;
+    var MAX_TS = 8589934592;
+    var RO_THRESH = 4294967296;
+    var TYPE_SHARED = 'shared';
+    var handleRollover$1 = function (value, reference) {
+      var direction = 1;
+      if (value > reference) {
+        // If the current timestamp value is greater than our reference timestamp and we detect a
+        // timestamp rollover, this means the roll over is happening in the opposite direction.
+        // Example scenario: Enter a long stream/video just after a rollover occurred. The reference
+        // point will be set to a small number, e.g. 1. The user then seeks backwards over the
+        // rollover point. In loading this segment, the timestamp values will be very large,
+        // e.g. 2^33 - 1. Since this comes before the data we loaded previously, we want to adjust
+        // the time stamp to be `value - 2^33`.
+        direction = -1;
+      } // Note: A seek forwards or back that is greater than the RO_THRESH (2^32, ~13 hours) will
+      // cause an incorrect adjustment.
+
+      while (Math.abs(reference - value) > RO_THRESH) {
+        value += direction * MAX_TS;
+      }
+      return value;
+    };
+    var TimestampRolloverStream$1 = function (type) {
+      var lastDTS, referenceDTS;
+      TimestampRolloverStream$1.prototype.init.call(this); // The "shared" type is used in cases where a stream will contain muxed
+      // video and audio. We could use `undefined` here, but having a string
+      // makes debugging a little clearer.
+
+      this.type_ = type || TYPE_SHARED;
+      this.push = function (data) {
+        /**
+         * Rollover stream expects data from elementary stream.
+         * Elementary stream can push forward 2 types of data
+         * - Parsed Video/Audio/Timed-metadata PES (packetized elementary stream) packets
+         * - Tracks metadata from PMT (Program Map Table)
+         * Rollover stream expects pts/dts info to be available, since it stores lastDTS
+         * We should ignore non-PES packets since they may override lastDTS to undefined.
+         * lastDTS is important to signal the next segments
+         * about rollover from the previous segments.
+         */
+        if (data.type === 'metadata') {
+          this.trigger('data', data);
+          return;
+        } // Any "shared" rollover streams will accept _all_ data. Otherwise,
+        // streams will only accept data that matches their type.
+
+        if (this.type_ !== TYPE_SHARED && data.type !== this.type_) {
+          return;
+        }
+        if (referenceDTS === undefined) {
+          referenceDTS = data.dts;
+        }
+        data.dts = handleRollover$1(data.dts, referenceDTS);
+        data.pts = handleRollover$1(data.pts, referenceDTS);
+        lastDTS = data.dts;
+        this.trigger('data', data);
+      };
+      this.flush = function () {
+        referenceDTS = lastDTS;
+        this.trigger('done');
+      };
+      this.endTimeline = function () {
+        this.flush();
+        this.trigger('endedtimeline');
+      };
+      this.discontinuity = function () {
+        referenceDTS = void 0;
+        lastDTS = void 0;
+      };
+      this.reset = function () {
+        this.discontinuity();
+        this.trigger('reset');
+      };
+    };
+    TimestampRolloverStream$1.prototype = new Stream$6();
+    var timestampRolloverStream = {
+      TimestampRolloverStream: TimestampRolloverStream$1,
+      handleRollover: handleRollover$1
+    }; // Once IE11 support is dropped, this function should be removed.
+
+    var typedArrayIndexOf$1 = (typedArray, element, fromIndex) => {
+      if (!typedArray) {
+        return -1;
+      }
+      var currentIndex = fromIndex;
+      for (; currentIndex < typedArray.length; currentIndex++) {
+        if (typedArray[currentIndex] === element) {
+          return currentIndex;
+        }
+      }
+      return -1;
+    };
+    var typedArray = {
+      typedArrayIndexOf: typedArrayIndexOf$1
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Tools for parsing ID3 frame data
+     * @see http://id3.org/id3v2.3.0
+     */
+
+    var typedArrayIndexOf = typedArray.typedArrayIndexOf,
+      // Frames that allow different types of text encoding contain a text
+      // encoding description byte [ID3v2.4.0 section 4.]
+      textEncodingDescriptionByte = {
+        Iso88591: 0x00,
+        // ISO-8859-1, terminated with \0.
+        Utf16: 0x01,
+        // UTF-16 encoded Unicode BOM, terminated with \0\0
+        Utf16be: 0x02,
+        // UTF-16BE encoded Unicode, without BOM, terminated with \0\0
+        Utf8: 0x03 // UTF-8 encoded Unicode, terminated with \0
+      },
+      // return a percent-encoded representation of the specified byte range
+      // @see http://en.wikipedia.org/wiki/Percent-encoding 
+      percentEncode$1 = function (bytes, start, end) {
+        var i,
+          result = '';
+        for (i = start; i < end; i++) {
+          result += '%' + ('00' + bytes[i].toString(16)).slice(-2);
+        }
+        return result;
+      },
+      // return the string representation of the specified byte range,
+      // interpreted as UTf-8.
+      parseUtf8 = function (bytes, start, end) {
+        return decodeURIComponent(percentEncode$1(bytes, start, end));
+      },
+      // return the string representation of the specified byte range,
+      // interpreted as ISO-8859-1.
+      parseIso88591$1 = function (bytes, start, end) {
+        return unescape(percentEncode$1(bytes, start, end)); // jshint ignore:line
+      },
+      parseSyncSafeInteger$1 = function (data) {
+        return data[0] << 21 | data[1] << 14 | data[2] << 7 | data[3];
+      },
+      frameParsers = {
+        'APIC': function (frame) {
+          var i = 1,
+            mimeTypeEndIndex,
+            descriptionEndIndex,
+            LINK_MIME_TYPE = '-->';
+          if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+            // ignore frames with unrecognized character encodings
+            return;
+          } // parsing fields [ID3v2.4.0 section 4.14.]
+
+          mimeTypeEndIndex = typedArrayIndexOf(frame.data, 0, i);
+          if (mimeTypeEndIndex < 0) {
+            // malformed frame
+            return;
+          } // parsing Mime type field (terminated with \0)
+
+          frame.mimeType = parseIso88591$1(frame.data, i, mimeTypeEndIndex);
+          i = mimeTypeEndIndex + 1; // parsing 1-byte Picture Type field
+
+          frame.pictureType = frame.data[i];
+          i++;
+          descriptionEndIndex = typedArrayIndexOf(frame.data, 0, i);
+          if (descriptionEndIndex < 0) {
+            // malformed frame
+            return;
+          } // parsing Description field (terminated with \0)
+
+          frame.description = parseUtf8(frame.data, i, descriptionEndIndex);
+          i = descriptionEndIndex + 1;
+          if (frame.mimeType === LINK_MIME_TYPE) {
+            // parsing Picture Data field as URL (always represented as ISO-8859-1 [ID3v2.4.0 section 4.])
+            frame.url = parseIso88591$1(frame.data, i, frame.data.length);
+          } else {
+            // parsing Picture Data field as binary data
+            frame.pictureData = frame.data.subarray(i, frame.data.length);
+          }
+        },
+        'T*': function (frame) {
+          if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+            // ignore frames with unrecognized character encodings
+            return;
+          } // parse text field, do not include null terminator in the frame value
+          // frames that allow different types of encoding contain terminated text [ID3v2.4.0 section 4.]
+
+          frame.value = parseUtf8(frame.data, 1, frame.data.length).replace(/\0*$/, ''); // text information frames supports multiple strings, stored as a terminator separated list [ID3v2.4.0 section 4.2.]
+
+          frame.values = frame.value.split('\0');
+        },
+        'TXXX': function (frame) {
+          var descriptionEndIndex;
+          if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+            // ignore frames with unrecognized character encodings
+            return;
+          }
+          descriptionEndIndex = typedArrayIndexOf(frame.data, 0, 1);
+          if (descriptionEndIndex === -1) {
+            return;
+          } // parse the text fields
+
+          frame.description = parseUtf8(frame.data, 1, descriptionEndIndex); // do not include the null terminator in the tag value
+          // frames that allow different types of encoding contain terminated text
+          // [ID3v2.4.0 section 4.]
+
+          frame.value = parseUtf8(frame.data, descriptionEndIndex + 1, frame.data.length).replace(/\0*$/, '');
+          frame.data = frame.value;
+        },
+        'W*': function (frame) {
+          // parse URL field; URL fields are always represented as ISO-8859-1 [ID3v2.4.0 section 4.]
+          // if the value is followed by a string termination all the following information should be ignored [ID3v2.4.0 section 4.3]
+          frame.url = parseIso88591$1(frame.data, 0, frame.data.length).replace(/\0.*$/, '');
+        },
+        'WXXX': function (frame) {
+          var descriptionEndIndex;
+          if (frame.data[0] !== textEncodingDescriptionByte.Utf8) {
+            // ignore frames with unrecognized character encodings
+            return;
+          }
+          descriptionEndIndex = typedArrayIndexOf(frame.data, 0, 1);
+          if (descriptionEndIndex === -1) {
+            return;
+          } // parse the description and URL fields
+
+          frame.description = parseUtf8(frame.data, 1, descriptionEndIndex); // URL fields are always represented as ISO-8859-1 [ID3v2.4.0 section 4.]
+          // if the value is followed by a string termination all the following information
+          // should be ignored [ID3v2.4.0 section 4.3]
+
+          frame.url = parseIso88591$1(frame.data, descriptionEndIndex + 1, frame.data.length).replace(/\0.*$/, '');
+        },
+        'PRIV': function (frame) {
+          var i;
+          for (i = 0; i < frame.data.length; i++) {
+            if (frame.data[i] === 0) {
+              // parse the description and URL fields
+              frame.owner = parseIso88591$1(frame.data, 0, i);
+              break;
+            }
+          }
+          frame.privateData = frame.data.subarray(i + 1);
+          frame.data = frame.privateData;
+        }
+      };
+    var parseId3Frames$1 = function (data) {
+      var frameSize,
+        frameHeader,
+        frameStart = 10,
+        tagSize = 0,
+        frames = []; // If we don't have enough data for a header, 10 bytes, 
+      // or 'ID3' in the first 3 bytes this is not a valid ID3 tag.
+
+      if (data.length < 10 || data[0] !== 'I'.charCodeAt(0) || data[1] !== 'D'.charCodeAt(0) || data[2] !== '3'.charCodeAt(0)) {
+        return;
+      } // the frame size is transmitted as a 28-bit integer in the
+      // last four bytes of the ID3 header.
+      // The most significant bit of each byte is dropped and the
+      // results concatenated to recover the actual value.
+
+      tagSize = parseSyncSafeInteger$1(data.subarray(6, 10)); // ID3 reports the tag size excluding the header but it's more
+      // convenient for our comparisons to include it
+
+      tagSize += 10; // check bit 6 of byte 5 for the extended header flag.
+
+      var hasExtendedHeader = data[5] & 0x40;
+      if (hasExtendedHeader) {
+        // advance the frame start past the extended header
+        frameStart += 4; // header size field
+
+        frameStart += parseSyncSafeInteger$1(data.subarray(10, 14));
+        tagSize -= parseSyncSafeInteger$1(data.subarray(16, 20)); // clip any padding off the end
+      } // parse one or more ID3 frames
+      // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+      do {
+        // determine the number of bytes in this frame
+        frameSize = parseSyncSafeInteger$1(data.subarray(frameStart + 4, frameStart + 8));
+        if (frameSize < 1) {
+          break;
+        }
+        frameHeader = String.fromCharCode(data[frameStart], data[frameStart + 1], data[frameStart + 2], data[frameStart + 3]);
+        var frame = {
+          id: frameHeader,
+          data: data.subarray(frameStart + 10, frameStart + frameSize + 10)
+        };
+        frame.key = frame.id; // parse frame values
+
+        if (frameParsers[frame.id]) {
+          // use frame specific parser
+          frameParsers[frame.id](frame);
+        } else if (frame.id[0] === 'T') {
+          // use text frame generic parser
+          frameParsers['T*'](frame);
+        } else if (frame.id[0] === 'W') {
+          // use URL link frame generic parser
+          frameParsers['W*'](frame);
+        }
+        frames.push(frame);
+        frameStart += 10; // advance past the frame header
+
+        frameStart += frameSize; // advance past the frame body
+      } while (frameStart < tagSize);
+      return frames;
+    };
+    var parseId3 = {
+      parseId3Frames: parseId3Frames$1,
+      parseSyncSafeInteger: parseSyncSafeInteger$1,
+      frameParsers: frameParsers
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Accepts program elementary stream (PES) data events and parses out
+     * ID3 metadata from them, if present.
+     * @see http://id3.org/id3v2.3.0
+     */
+
+    var Stream$5 = stream,
+      StreamTypes$3 = streamTypes,
+      id3 = parseId3,
+      MetadataStream;
+    MetadataStream = function (options) {
+      var settings = {
+          // the bytes of the program-level descriptor field in MP2T
+          // see ISO/IEC 13818-1:2013 (E), section 2.6 "Program and
+          // program element descriptors"
+          descriptor: options && options.descriptor
+        },
+        // the total size in bytes of the ID3 tag being parsed
+        tagSize = 0,
+        // tag data that is not complete enough to be parsed
+        buffer = [],
+        // the total number of bytes currently in the buffer
+        bufferSize = 0,
+        i;
+      MetadataStream.prototype.init.call(this); // calculate the text track in-band metadata track dispatch type
+      // https://html.spec.whatwg.org/multipage/embedded-content.html#steps-to-expose-a-media-resource-specific-text-track
+
+      this.dispatchType = StreamTypes$3.METADATA_STREAM_TYPE.toString(16);
+      if (settings.descriptor) {
+        for (i = 0; i < settings.descriptor.length; i++) {
+          this.dispatchType += ('00' + settings.descriptor[i].toString(16)).slice(-2);
+        }
+      }
+      this.push = function (chunk) {
+        var tag, frameStart, frameSize, frame, i, frameHeader;
+        if (chunk.type !== 'timed-metadata') {
+          return;
+        } // if data_alignment_indicator is set in the PES header,
+        // we must have the start of a new ID3 tag. Assume anything
+        // remaining in the buffer was malformed and throw it out
+
+        if (chunk.dataAlignmentIndicator) {
+          bufferSize = 0;
+          buffer.length = 0;
+        } // ignore events that don't look like ID3 data
+
+        if (buffer.length === 0 && (chunk.data.length < 10 || chunk.data[0] !== 'I'.charCodeAt(0) || chunk.data[1] !== 'D'.charCodeAt(0) || chunk.data[2] !== '3'.charCodeAt(0))) {
+          this.trigger('log', {
+            level: 'warn',
+            message: 'Skipping unrecognized metadata packet'
+          });
+          return;
+        } // add this chunk to the data we've collected so far
+
+        buffer.push(chunk);
+        bufferSize += chunk.data.byteLength; // grab the size of the entire frame from the ID3 header
+
+        if (buffer.length === 1) {
+          // the frame size is transmitted as a 28-bit integer in the
+          // last four bytes of the ID3 header.
+          // The most significant bit of each byte is dropped and the
+          // results concatenated to recover the actual value.
+          tagSize = id3.parseSyncSafeInteger(chunk.data.subarray(6, 10)); // ID3 reports the tag size excluding the header but it's more
+          // convenient for our comparisons to include it
+
+          tagSize += 10;
+        } // if the entire frame has not arrived, wait for more data
+
+        if (bufferSize < tagSize) {
+          return;
+        } // collect the entire frame so it can be parsed
+
+        tag = {
+          data: new Uint8Array(tagSize),
+          frames: [],
+          pts: buffer[0].pts,
+          dts: buffer[0].dts
+        };
+        for (i = 0; i < tagSize;) {
+          tag.data.set(buffer[0].data.subarray(0, tagSize - i), i);
+          i += buffer[0].data.byteLength;
+          bufferSize -= buffer[0].data.byteLength;
+          buffer.shift();
+        } // find the start of the first frame and the end of the tag
+
+        frameStart = 10;
+        if (tag.data[5] & 0x40) {
+          // advance the frame start past the extended header
+          frameStart += 4; // header size field
+
+          frameStart += id3.parseSyncSafeInteger(tag.data.subarray(10, 14)); // clip any padding off the end
+
+          tagSize -= id3.parseSyncSafeInteger(tag.data.subarray(16, 20));
+        } // parse one or more ID3 frames
+        // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+        do {
+          // determine the number of bytes in this frame
+          frameSize = id3.parseSyncSafeInteger(tag.data.subarray(frameStart + 4, frameStart + 8));
+          if (frameSize < 1) {
+            this.trigger('log', {
+              level: 'warn',
+              message: 'Malformed ID3 frame encountered. Skipping remaining metadata parsing.'
+            }); // If the frame is malformed, don't parse any further frames but allow previous valid parsed frames
+            // to be sent along.
+
+            break;
+          }
+          frameHeader = String.fromCharCode(tag.data[frameStart], tag.data[frameStart + 1], tag.data[frameStart + 2], tag.data[frameStart + 3]);
+          frame = {
+            id: frameHeader,
+            data: tag.data.subarray(frameStart + 10, frameStart + frameSize + 10)
+          };
+          frame.key = frame.id; // parse frame values
+
+          if (id3.frameParsers[frame.id]) {
+            // use frame specific parser
+            id3.frameParsers[frame.id](frame);
+          } else if (frame.id[0] === 'T') {
+            // use text frame generic parser
+            id3.frameParsers['T*'](frame);
+          } else if (frame.id[0] === 'W') {
+            // use URL link frame generic parser
+            id3.frameParsers['W*'](frame);
+          } // handle the special PRIV frame used to indicate the start
+          // time for raw AAC data
+
+          if (frame.owner === 'com.apple.streaming.transportStreamTimestamp') {
+            var d = frame.data,
+              size = (d[3] & 0x01) << 30 | d[4] << 22 | d[5] << 14 | d[6] << 6 | d[7] >>> 2;
+            size *= 4;
+            size += d[7] & 0x03;
+            frame.timeStamp = size; // in raw AAC, all subsequent data will be timestamped based
+            // on the value of this frame
+            // we couldn't have known the appropriate pts and dts before
+            // parsing this ID3 tag so set those values now
+
+            if (tag.pts === undefined && tag.dts === undefined) {
+              tag.pts = frame.timeStamp;
+              tag.dts = frame.timeStamp;
+            }
+            this.trigger('timestamp', frame);
+          }
+          tag.frames.push(frame);
+          frameStart += 10; // advance past the frame header
+
+          frameStart += frameSize; // advance past the frame body
+        } while (frameStart < tagSize);
+        this.trigger('data', tag);
+      };
+    };
+    MetadataStream.prototype = new Stream$5();
+    var metadataStream = MetadataStream;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * A stream-based mp2t to mp4 converter. This utility can be used to
+     * deliver mp4s to a SourceBuffer on platforms that support native
+     * Media Source Extensions.
+     */
+
+    var Stream$4 = stream,
+      CaptionStream$1 = captionStream,
+      StreamTypes$2 = streamTypes,
+      TimestampRolloverStream = timestampRolloverStream.TimestampRolloverStream; // object types
+
+    var TransportPacketStream, TransportParseStream, ElementaryStream; // constants
+
+    var MP2T_PACKET_LENGTH$1 = 188,
+      // bytes
+      SYNC_BYTE$1 = 0x47;
+    /**
+     * Splits an incoming stream of binary data into MPEG-2 Transport
+     * Stream packets.
+     */
+
+    TransportPacketStream = function () {
+      var buffer = new Uint8Array(MP2T_PACKET_LENGTH$1),
+        bytesInBuffer = 0;
+      TransportPacketStream.prototype.init.call(this); // Deliver new bytes to the stream.
+
+      /**
+       * Split a stream of data into M2TS packets
+      **/
+
+      this.push = function (bytes) {
+        var startIndex = 0,
+          endIndex = MP2T_PACKET_LENGTH$1,
+          everything; // If there are bytes remaining from the last segment, prepend them to the
+        // bytes that were pushed in
+
+        if (bytesInBuffer) {
+          everything = new Uint8Array(bytes.byteLength + bytesInBuffer);
+          everything.set(buffer.subarray(0, bytesInBuffer));
+          everything.set(bytes, bytesInBuffer);
+          bytesInBuffer = 0;
+        } else {
+          everything = bytes;
+        } // While we have enough data for a packet
+
+        while (endIndex < everything.byteLength) {
+          // Look for a pair of start and end sync bytes in the data..
+          if (everything[startIndex] === SYNC_BYTE$1 && everything[endIndex] === SYNC_BYTE$1) {
+            // We found a packet so emit it and jump one whole packet forward in
+            // the stream
+            this.trigger('data', everything.subarray(startIndex, endIndex));
+            startIndex += MP2T_PACKET_LENGTH$1;
+            endIndex += MP2T_PACKET_LENGTH$1;
+            continue;
+          } // If we get here, we have somehow become de-synchronized and we need to step
+          // forward one byte at a time until we find a pair of sync bytes that denote
+          // a packet
+
+          startIndex++;
+          endIndex++;
+        } // If there was some data left over at the end of the segment that couldn't
+        // possibly be a whole packet, keep it because it might be the start of a packet
+        // that continues in the next segment
+
+        if (startIndex < everything.byteLength) {
+          buffer.set(everything.subarray(startIndex), 0);
+          bytesInBuffer = everything.byteLength - startIndex;
+        }
+      };
+      /**
+       * Passes identified M2TS packets to the TransportParseStream to be parsed
+      **/
+
+      this.flush = function () {
+        // If the buffer contains a whole packet when we are being flushed, emit it
+        // and empty the buffer. Otherwise hold onto the data because it may be
+        // important for decoding the next segment
+        if (bytesInBuffer === MP2T_PACKET_LENGTH$1 && buffer[0] === SYNC_BYTE$1) {
+          this.trigger('data', buffer);
+          bytesInBuffer = 0;
+        }
+        this.trigger('done');
+      };
+      this.endTimeline = function () {
+        this.flush();
+        this.trigger('endedtimeline');
+      };
+      this.reset = function () {
+        bytesInBuffer = 0;
+        this.trigger('reset');
+      };
+    };
+    TransportPacketStream.prototype = new Stream$4();
+    /**
+     * Accepts an MP2T TransportPacketStream and emits data events with parsed
+     * forms of the individual transport stream packets.
+     */
+
+    TransportParseStream = function () {
+      var parsePsi, parsePat, parsePmt, self;
+      TransportParseStream.prototype.init.call(this);
+      self = this;
+      this.packetsWaitingForPmt = [];
+      this.programMapTable = undefined;
+      parsePsi = function (payload, psi) {
+        var offset = 0; // PSI packets may be split into multiple sections and those
+        // sections may be split into multiple packets. If a PSI
+        // section starts in this packet, the payload_unit_start_indicator
+        // will be true and the first byte of the payload will indicate
+        // the offset from the current position to the start of the
+        // section.
+
+        if (psi.payloadUnitStartIndicator) {
+          offset += payload[offset] + 1;
+        }
+        if (psi.type === 'pat') {
+          parsePat(payload.subarray(offset), psi);
+        } else {
+          parsePmt(payload.subarray(offset), psi);
+        }
+      };
+      parsePat = function (payload, pat) {
+        pat.section_number = payload[7]; // eslint-disable-line camelcase
+
+        pat.last_section_number = payload[8]; // eslint-disable-line camelcase
+        // skip the PSI header and parse the first PMT entry
+
+        self.pmtPid = (payload[10] & 0x1F) << 8 | payload[11];
+        pat.pmtPid = self.pmtPid;
+      };
+      /**
+       * Parse out the relevant fields of a Program Map Table (PMT).
+       * @param payload {Uint8Array} the PMT-specific portion of an MP2T
+       * packet. The first byte in this array should be the table_id
+       * field.
+       * @param pmt {object} the object that should be decorated with
+       * fields parsed from the PMT.
+       */
+
+      parsePmt = function (payload, pmt) {
+        var sectionLength, tableEnd, programInfoLength, offset; // PMTs can be sent ahead of the time when they should actually
+        // take effect. We don't believe this should ever be the case
+        // for HLS but we'll ignore "forward" PMT declarations if we see
+        // them. Future PMT declarations have the current_next_indicator
+        // set to zero.
+
+        if (!(payload[5] & 0x01)) {
+          return;
+        } // overwrite any existing program map table
+
+        self.programMapTable = {
+          video: null,
+          audio: null,
+          'timed-metadata': {}
+        }; // the mapping table ends at the end of the current section
+
+        sectionLength = (payload[1] & 0x0f) << 8 | payload[2];
+        tableEnd = 3 + sectionLength - 4; // to determine where the table is, we have to figure out how
+        // long the program info descriptors are
+
+        programInfoLength = (payload[10] & 0x0f) << 8 | payload[11]; // advance the offset to the first entry in the mapping table
+
+        offset = 12 + programInfoLength;
+        while (offset < tableEnd) {
+          var streamType = payload[offset];
+          var pid = (payload[offset + 1] & 0x1F) << 8 | payload[offset + 2]; // only map a single elementary_pid for audio and video stream types
+          // TODO: should this be done for metadata too? for now maintain behavior of
+          //       multiple metadata streams
+
+          if (streamType === StreamTypes$2.H264_STREAM_TYPE && self.programMapTable.video === null) {
+            self.programMapTable.video = pid;
+          } else if (streamType === StreamTypes$2.ADTS_STREAM_TYPE && self.programMapTable.audio === null) {
+            self.programMapTable.audio = pid;
+          } else if (streamType === StreamTypes$2.METADATA_STREAM_TYPE) {
+            // map pid to stream type for metadata streams
+            self.programMapTable['timed-metadata'][pid] = streamType;
+          } // move to the next table entry
+          // skip past the elementary stream descriptors, if present
+
+          offset += ((payload[offset + 3] & 0x0F) << 8 | payload[offset + 4]) + 5;
+        } // record the map on the packet as well
+
+        pmt.programMapTable = self.programMapTable;
+      };
+      /**
+       * Deliver a new MP2T packet to the next stream in the pipeline.
+       */
+
+      this.push = function (packet) {
+        var result = {},
+          offset = 4;
+        result.payloadUnitStartIndicator = !!(packet[1] & 0x40); // pid is a 13-bit field starting at the last bit of packet[1]
+
+        result.pid = packet[1] & 0x1f;
+        result.pid <<= 8;
+        result.pid |= packet[2]; // if an adaption field is present, its length is specified by the
+        // fifth byte of the TS packet header. The adaptation field is
+        // used to add stuffing to PES packets that don't fill a complete
+        // TS packet, and to specify some forms of timing and control data
+        // that we do not currently use.
+
+        if ((packet[3] & 0x30) >>> 4 > 0x01) {
+          offset += packet[offset] + 1;
+        } // parse the rest of the packet based on the type
+
+        if (result.pid === 0) {
+          result.type = 'pat';
+          parsePsi(packet.subarray(offset), result);
+          this.trigger('data', result);
+        } else if (result.pid === this.pmtPid) {
+          result.type = 'pmt';
+          parsePsi(packet.subarray(offset), result);
+          this.trigger('data', result); // if there are any packets waiting for a PMT to be found, process them now
+
+          while (this.packetsWaitingForPmt.length) {
+            this.processPes_.apply(this, this.packetsWaitingForPmt.shift());
+          }
+        } else if (this.programMapTable === undefined) {
+          // When we have not seen a PMT yet, defer further processing of
+          // PES packets until one has been parsed
+          this.packetsWaitingForPmt.push([packet, offset, result]);
+        } else {
+          this.processPes_(packet, offset, result);
+        }
+      };
+      this.processPes_ = function (packet, offset, result) {
+        // set the appropriate stream type
+        if (result.pid === this.programMapTable.video) {
+          result.streamType = StreamTypes$2.H264_STREAM_TYPE;
+        } else if (result.pid === this.programMapTable.audio) {
+          result.streamType = StreamTypes$2.ADTS_STREAM_TYPE;
+        } else {
+          // if not video or audio, it is timed-metadata or unknown
+          // if unknown, streamType will be undefined
+          result.streamType = this.programMapTable['timed-metadata'][result.pid];
+        }
+        result.type = 'pes';
+        result.data = packet.subarray(offset);
+        this.trigger('data', result);
+      };
+    };
+    TransportParseStream.prototype = new Stream$4();
+    TransportParseStream.STREAM_TYPES = {
+      h264: 0x1b,
+      adts: 0x0f
+    };
+    /**
+     * Reconsistutes program elementary stream (PES) packets from parsed
+     * transport stream packets. That is, if you pipe an
+     * mp2t.TransportParseStream into a mp2t.ElementaryStream, the output
+     * events will be events which capture the bytes for individual PES
+     * packets plus relevant metadata that has been extracted from the
+     * container.
+     */
+
+    ElementaryStream = function () {
+      var self = this,
+        segmentHadPmt = false,
+        // PES packet fragments
+        video = {
+          data: [],
+          size: 0
+        },
+        audio = {
+          data: [],
+          size: 0
+        },
+        timedMetadata = {
+          data: [],
+          size: 0
+        },
+        programMapTable,
+        parsePes = function (payload, pes) {
+          var ptsDtsFlags;
+          const startPrefix = payload[0] << 16 | payload[1] << 8 | payload[2]; // default to an empty array
+
+          pes.data = new Uint8Array(); // In certain live streams, the start of a TS fragment has ts packets
+          // that are frame data that is continuing from the previous fragment. This
+          // is to check that the pes data is the start of a new pes payload
+
+          if (startPrefix !== 1) {
+            return;
+          } // get the packet length, this will be 0 for video
+
+          pes.packetLength = 6 + (payload[4] << 8 | payload[5]); // find out if this packets starts a new keyframe
+
+          pes.dataAlignmentIndicator = (payload[6] & 0x04) !== 0; // PES packets may be annotated with a PTS value, or a PTS value
+          // and a DTS value. Determine what combination of values is
+          // available to work with.
+
+          ptsDtsFlags = payload[7]; // PTS and DTS are normally stored as a 33-bit number.  Javascript
+          // performs all bitwise operations on 32-bit integers but javascript
+          // supports a much greater range (52-bits) of integer using standard
+          // mathematical operations.
+          // We construct a 31-bit value using bitwise operators over the 31
+          // most significant bits and then multiply by 4 (equal to a left-shift
+          // of 2) before we add the final 2 least significant bits of the
+          // timestamp (equal to an OR.)
+
+          if (ptsDtsFlags & 0xC0) {
+            // the PTS and DTS are not written out directly. For information
+            // on how they are encoded, see
+            // http://dvd.sourceforge.net/dvdinfo/pes-hdr.html
+            pes.pts = (payload[9] & 0x0E) << 27 | (payload[10] & 0xFF) << 20 | (payload[11] & 0xFE) << 12 | (payload[12] & 0xFF) << 5 | (payload[13] & 0xFE) >>> 3;
+            pes.pts *= 4; // Left shift by 2
+
+            pes.pts += (payload[13] & 0x06) >>> 1; // OR by the two LSBs
+
+            pes.dts = pes.pts;
+            if (ptsDtsFlags & 0x40) {
+              pes.dts = (payload[14] & 0x0E) << 27 | (payload[15] & 0xFF) << 20 | (payload[16] & 0xFE) << 12 | (payload[17] & 0xFF) << 5 | (payload[18] & 0xFE) >>> 3;
+              pes.dts *= 4; // Left shift by 2
+
+              pes.dts += (payload[18] & 0x06) >>> 1; // OR by the two LSBs
+            }
+          } // the data section starts immediately after the PES header.
+          // pes_header_data_length specifies the number of header bytes
+          // that follow the last byte of the field.
+
+          pes.data = payload.subarray(9 + payload[8]);
+        },
+        /**
+          * Pass completely parsed PES packets to the next stream in the pipeline
+         **/
+        flushStream = function (stream, type, forceFlush) {
+          var packetData = new Uint8Array(stream.size),
+            event = {
+              type: type
+            },
+            i = 0,
+            offset = 0,
+            packetFlushable = false,
+            fragment; // do nothing if there is not enough buffered data for a complete
+          // PES header
+
+          if (!stream.data.length || stream.size < 9) {
+            return;
+          }
+          event.trackId = stream.data[0].pid; // reassemble the packet
+
+          for (i = 0; i < stream.data.length; i++) {
+            fragment = stream.data[i];
+            packetData.set(fragment.data, offset);
+            offset += fragment.data.byteLength;
+          } // parse assembled packet's PES header
+
+          parsePes(packetData, event); // non-video PES packets MUST have a non-zero PES_packet_length
+          // check that there is enough stream data to fill the packet
+
+          packetFlushable = type === 'video' || event.packetLength <= stream.size; // flush pending packets if the conditions are right
+
+          if (forceFlush || packetFlushable) {
+            stream.size = 0;
+            stream.data.length = 0;
+          } // only emit packets that are complete. this is to avoid assembling
+          // incomplete PES packets due to poor segmentation
+
+          if (packetFlushable) {
+            self.trigger('data', event);
+          }
+        };
+      ElementaryStream.prototype.init.call(this);
+      /**
+       * Identifies M2TS packet types and parses PES packets using metadata
+       * parsed from the PMT
+       **/
+
+      this.push = function (data) {
+        ({
+          pat: function () {// we have to wait for the PMT to arrive as well before we
+            // have any meaningful metadata
+          },
+          pes: function () {
+            var stream, streamType;
+            switch (data.streamType) {
+              case StreamTypes$2.H264_STREAM_TYPE:
+                stream = video;
+                streamType = 'video';
+                break;
+              case StreamTypes$2.ADTS_STREAM_TYPE:
+                stream = audio;
+                streamType = 'audio';
+                break;
+              case StreamTypes$2.METADATA_STREAM_TYPE:
+                stream = timedMetadata;
+                streamType = 'timed-metadata';
+                break;
+              default:
+                // ignore unknown stream types
+                return;
+            } // if a new packet is starting, we can flush the completed
+            // packet
+
+            if (data.payloadUnitStartIndicator) {
+              flushStream(stream, streamType, true);
+            } // buffer this fragment until we are sure we've received the
+            // complete payload
+
+            stream.data.push(data);
+            stream.size += data.data.byteLength;
+          },
+          pmt: function () {
+            var event = {
+              type: 'metadata',
+              tracks: []
+            };
+            programMapTable = data.programMapTable; // translate audio and video streams to tracks
+
+            if (programMapTable.video !== null) {
+              event.tracks.push({
+                timelineStartInfo: {
+                  baseMediaDecodeTime: 0
+                },
+                id: +programMapTable.video,
+                codec: 'avc',
+                type: 'video'
+              });
+            }
+            if (programMapTable.audio !== null) {
+              event.tracks.push({
+                timelineStartInfo: {
+                  baseMediaDecodeTime: 0
+                },
+                id: +programMapTable.audio,
+                codec: 'adts',
+                type: 'audio'
+              });
+            }
+            segmentHadPmt = true;
+            self.trigger('data', event);
+          }
+        })[data.type]();
+      };
+      this.reset = function () {
+        video.size = 0;
+        video.data.length = 0;
+        audio.size = 0;
+        audio.data.length = 0;
+        this.trigger('reset');
+      };
+      /**
+       * Flush any remaining input. Video PES packets may be of variable
+       * length. Normally, the start of a new video packet can trigger the
+       * finalization of the previous packet. That is not possible if no
+       * more video is forthcoming, however. In that case, some other
+       * mechanism (like the end of the file) has to be employed. When it is
+       * clear that no additional data is forthcoming, calling this method
+       * will flush the buffered packets.
+       */
+
+      this.flushStreams_ = function () {
+        // !!THIS ORDER IS IMPORTANT!!
+        // video first then audio
+        flushStream(video, 'video');
+        flushStream(audio, 'audio');
+        flushStream(timedMetadata, 'timed-metadata');
+      };
+      this.flush = function () {
+        // if on flush we haven't had a pmt emitted
+        // and we have a pmt to emit. emit the pmt
+        // so that we trigger a trackinfo downstream.
+        if (!segmentHadPmt && programMapTable) {
+          var pmt = {
+            type: 'metadata',
+            tracks: []
+          }; // translate audio and video streams to tracks
+
+          if (programMapTable.video !== null) {
+            pmt.tracks.push({
+              timelineStartInfo: {
+                baseMediaDecodeTime: 0
+              },
+              id: +programMapTable.video,
+              codec: 'avc',
+              type: 'video'
+            });
+          }
+          if (programMapTable.audio !== null) {
+            pmt.tracks.push({
+              timelineStartInfo: {
+                baseMediaDecodeTime: 0
+              },
+              id: +programMapTable.audio,
+              codec: 'adts',
+              type: 'audio'
+            });
+          }
+          self.trigger('data', pmt);
+        }
+        segmentHadPmt = false;
+        this.flushStreams_();
+        this.trigger('done');
+      };
+    };
+    ElementaryStream.prototype = new Stream$4();
+    var m2ts$1 = {
+      PAT_PID: 0x0000,
+      MP2T_PACKET_LENGTH: MP2T_PACKET_LENGTH$1,
+      TransportPacketStream: TransportPacketStream,
+      TransportParseStream: TransportParseStream,
+      ElementaryStream: ElementaryStream,
+      TimestampRolloverStream: TimestampRolloverStream,
+      CaptionStream: CaptionStream$1.CaptionStream,
+      Cea608Stream: CaptionStream$1.Cea608Stream,
+      Cea708Stream: CaptionStream$1.Cea708Stream,
+      MetadataStream: metadataStream
+    };
+    for (var type in StreamTypes$2) {
+      if (StreamTypes$2.hasOwnProperty(type)) {
+        m2ts$1[type] = StreamTypes$2[type];
+      }
+    }
+    var m2ts_1 = m2ts$1;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var Stream$3 = stream;
+    var ONE_SECOND_IN_TS$2 = clock$2.ONE_SECOND_IN_TS;
+    var AdtsStream$1;
+    var ADTS_SAMPLING_FREQUENCIES$1 = [96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350];
+    /*
+     * Accepts a ElementaryStream and emits data events with parsed
+     * AAC Audio Frames of the individual packets. Input audio in ADTS
+     * format is unpacked and re-emitted as AAC frames.
+     *
+     * @see http://wiki.multimedia.cx/index.php?title=ADTS
+     * @see http://wiki.multimedia.cx/?title=Understanding_AAC
+     */
+
+    AdtsStream$1 = function (handlePartialSegments) {
+      var buffer,
+        frameNum = 0;
+      AdtsStream$1.prototype.init.call(this);
+      this.skipWarn_ = function (start, end) {
+        this.trigger('log', {
+          level: 'warn',
+          message: `adts skiping bytes ${start} to ${end} in frame ${frameNum} outside syncword`
+        });
+      };
+      this.push = function (packet) {
+        var i = 0,
+          frameLength,
+          protectionSkipBytes,
+          oldBuffer,
+          sampleCount,
+          adtsFrameDuration;
+        if (!handlePartialSegments) {
+          frameNum = 0;
+        }
+        if (packet.type !== 'audio') {
+          // ignore non-audio data
+          return;
+        } // Prepend any data in the buffer to the input data so that we can parse
+        // aac frames the cross a PES packet boundary
+
+        if (buffer && buffer.length) {
+          oldBuffer = buffer;
+          buffer = new Uint8Array(oldBuffer.byteLength + packet.data.byteLength);
+          buffer.set(oldBuffer);
+          buffer.set(packet.data, oldBuffer.byteLength);
+        } else {
+          buffer = packet.data;
+        } // unpack any ADTS frames which have been fully received
+        // for details on the ADTS header, see http://wiki.multimedia.cx/index.php?title=ADTS
+
+        var skip; // We use i + 7 here because we want to be able to parse the entire header.
+        // If we don't have enough bytes to do that, then we definitely won't have a full frame.
+
+        while (i + 7 < buffer.length) {
+          // Look for the start of an ADTS header..
+          if (buffer[i] !== 0xFF || (buffer[i + 1] & 0xF6) !== 0xF0) {
+            if (typeof skip !== 'number') {
+              skip = i;
+            } // If a valid header was not found,  jump one forward and attempt to
+            // find a valid ADTS header starting at the next byte
+
+            i++;
+            continue;
+          }
+          if (typeof skip === 'number') {
+            this.skipWarn_(skip, i);
+            skip = null;
+          } // The protection skip bit tells us if we have 2 bytes of CRC data at the
+          // end of the ADTS header
+
+          protectionSkipBytes = (~buffer[i + 1] & 0x01) * 2; // Frame length is a 13 bit integer starting 16 bits from the
+          // end of the sync sequence
+          // NOTE: frame length includes the size of the header
+
+          frameLength = (buffer[i + 3] & 0x03) << 11 | buffer[i + 4] << 3 | (buffer[i + 5] & 0xe0) >> 5;
+          sampleCount = ((buffer[i + 6] & 0x03) + 1) * 1024;
+          adtsFrameDuration = sampleCount * ONE_SECOND_IN_TS$2 / ADTS_SAMPLING_FREQUENCIES$1[(buffer[i + 2] & 0x3c) >>> 2]; // If we don't have enough data to actually finish this ADTS frame,
+          // then we have to wait for more data
+
+          if (buffer.byteLength - i < frameLength) {
+            break;
+          } // Otherwise, deliver the complete AAC frame
+
+          this.trigger('data', {
+            pts: packet.pts + frameNum * adtsFrameDuration,
+            dts: packet.dts + frameNum * adtsFrameDuration,
+            sampleCount: sampleCount,
+            audioobjecttype: (buffer[i + 2] >>> 6 & 0x03) + 1,
+            channelcount: (buffer[i + 2] & 1) << 2 | (buffer[i + 3] & 0xc0) >>> 6,
+            samplerate: ADTS_SAMPLING_FREQUENCIES$1[(buffer[i + 2] & 0x3c) >>> 2],
+            samplingfrequencyindex: (buffer[i + 2] & 0x3c) >>> 2,
+            // assume ISO/IEC 14496-12 AudioSampleEntry default of 16
+            samplesize: 16,
+            // data is the frame without it's header
+            data: buffer.subarray(i + 7 + protectionSkipBytes, i + frameLength)
+          });
+          frameNum++;
+          i += frameLength;
+        }
+        if (typeof skip === 'number') {
+          this.skipWarn_(skip, i);
+          skip = null;
+        } // remove processed bytes from the buffer.
+
+        buffer = buffer.subarray(i);
+      };
+      this.flush = function () {
+        frameNum = 0;
+        this.trigger('done');
+      };
+      this.reset = function () {
+        buffer = void 0;
+        this.trigger('reset');
+      };
+      this.endTimeline = function () {
+        buffer = void 0;
+        this.trigger('endedtimeline');
+      };
+    };
+    AdtsStream$1.prototype = new Stream$3();
+    var adts = AdtsStream$1;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var ExpGolomb$1;
+    /**
+     * Parser for exponential Golomb codes, a variable-bitwidth number encoding
+     * scheme used by h264.
+     */
+
+    ExpGolomb$1 = function (workingData) {
+      var
+        // the number of bytes left to examine in workingData
+        workingBytesAvailable = workingData.byteLength,
+        // the current word being examined
+        workingWord = 0,
+        // :uint
+        // the number of bits left to examine in the current word
+        workingBitsAvailable = 0; // :uint;
+      // ():uint
+
+      this.length = function () {
+        return 8 * workingBytesAvailable;
+      }; // ():uint
+
+      this.bitsAvailable = function () {
+        return 8 * workingBytesAvailable + workingBitsAvailable;
+      }; // ():void
+
+      this.loadWord = function () {
+        var position = workingData.byteLength - workingBytesAvailable,
+          workingBytes = new Uint8Array(4),
+          availableBytes = Math.min(4, workingBytesAvailable);
+        if (availableBytes === 0) {
+          throw new Error('no bytes available');
+        }
+        workingBytes.set(workingData.subarray(position, position + availableBytes));
+        workingWord = new DataView(workingBytes.buffer).getUint32(0); // track the amount of workingData that has been processed
+
+        workingBitsAvailable = availableBytes * 8;
+        workingBytesAvailable -= availableBytes;
+      }; // (count:int):void
+
+      this.skipBits = function (count) {
+        var skipBytes; // :int
+
+        if (workingBitsAvailable > count) {
+          workingWord <<= count;
+          workingBitsAvailable -= count;
+        } else {
+          count -= workingBitsAvailable;
+          skipBytes = Math.floor(count / 8);
+          count -= skipBytes * 8;
+          workingBytesAvailable -= skipBytes;
+          this.loadWord();
+          workingWord <<= count;
+          workingBitsAvailable -= count;
+        }
+      }; // (size:int):uint
+
+      this.readBits = function (size) {
+        var bits = Math.min(workingBitsAvailable, size),
+          // :uint
+          valu = workingWord >>> 32 - bits; // :uint
+        // if size > 31, handle error
+
+        workingBitsAvailable -= bits;
+        if (workingBitsAvailable > 0) {
+          workingWord <<= bits;
+        } else if (workingBytesAvailable > 0) {
+          this.loadWord();
+        }
+        bits = size - bits;
+        if (bits > 0) {
+          return valu << bits | this.readBits(bits);
+        }
+        return valu;
+      }; // ():uint
+
+      this.skipLeadingZeros = function () {
+        var leadingZeroCount; // :uint
+
+        for (leadingZeroCount = 0; leadingZeroCount < workingBitsAvailable; ++leadingZeroCount) {
+          if ((workingWord & 0x80000000 >>> leadingZeroCount) !== 0) {
+            // the first bit of working word is 1
+            workingWord <<= leadingZeroCount;
+            workingBitsAvailable -= leadingZeroCount;
+            return leadingZeroCount;
+          }
+        } // we exhausted workingWord and still have not found a 1
+
+        this.loadWord();
+        return leadingZeroCount + this.skipLeadingZeros();
+      }; // ():void
+
+      this.skipUnsignedExpGolomb = function () {
+        this.skipBits(1 + this.skipLeadingZeros());
+      }; // ():void
+
+      this.skipExpGolomb = function () {
+        this.skipBits(1 + this.skipLeadingZeros());
+      }; // ():uint
+
+      this.readUnsignedExpGolomb = function () {
+        var clz = this.skipLeadingZeros(); // :uint
+
+        return this.readBits(clz + 1) - 1;
+      }; // ():int
+
+      this.readExpGolomb = function () {
+        var valu = this.readUnsignedExpGolomb(); // :int
+
+        if (0x01 & valu) {
+          // the number is odd if the low order bit is set
+          return 1 + valu >>> 1; // add 1 to make it even, and divide by 2
+        }
+
+        return -1 * (valu >>> 1); // divide by two then make it negative
+      }; // Some convenience functions
+      // :Boolean
+
+      this.readBoolean = function () {
+        return this.readBits(1) === 1;
+      }; // ():int
+
+      this.readUnsignedByte = function () {
+        return this.readBits(8);
+      };
+      this.loadWord();
+    };
+    var expGolomb = ExpGolomb$1;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var Stream$2 = stream;
+    var ExpGolomb = expGolomb;
+    var H264Stream$1, NalByteStream;
+    var PROFILES_WITH_OPTIONAL_SPS_DATA;
+    /**
+     * Accepts a NAL unit byte stream and unpacks the embedded NAL units.
+     */
+
+    NalByteStream = function () {
+      var syncPoint = 0,
+        i,
+        buffer;
+      NalByteStream.prototype.init.call(this);
+      /*
+       * Scans a byte stream and triggers a data event with the NAL units found.
+       * @param {Object} data Event received from H264Stream
+       * @param {Uint8Array} data.data The h264 byte stream to be scanned
+       *
+       * @see H264Stream.push
+       */
+
+      this.push = function (data) {
+        var swapBuffer;
+        if (!buffer) {
+          buffer = data.data;
+        } else {
+          swapBuffer = new Uint8Array(buffer.byteLength + data.data.byteLength);
+          swapBuffer.set(buffer);
+          swapBuffer.set(data.data, buffer.byteLength);
+          buffer = swapBuffer;
+        }
+        var len = buffer.byteLength; // Rec. ITU-T H.264, Annex B
+        // scan for NAL unit boundaries
+        // a match looks like this:
+        // 0 0 1 .. NAL .. 0 0 1
+        // ^ sync point        ^ i
+        // or this:
+        // 0 0 1 .. NAL .. 0 0 0
+        // ^ sync point        ^ i
+        // advance the sync point to a NAL start, if necessary
+
+        for (; syncPoint < len - 3; syncPoint++) {
+          if (buffer[syncPoint + 2] === 1) {
+            // the sync point is properly aligned
+            i = syncPoint + 5;
+            break;
+          }
+        }
+        while (i < len) {
+          // look at the current byte to determine if we've hit the end of
+          // a NAL unit boundary
+          switch (buffer[i]) {
+            case 0:
+              // skip past non-sync sequences
+              if (buffer[i - 1] !== 0) {
+                i += 2;
+                break;
+              } else if (buffer[i - 2] !== 0) {
+                i++;
+                break;
+              } // deliver the NAL unit if it isn't empty
+
+              if (syncPoint + 3 !== i - 2) {
+                this.trigger('data', buffer.subarray(syncPoint + 3, i - 2));
+              } // drop trailing zeroes
+
+              do {
+                i++;
+              } while (buffer[i] !== 1 && i < len);
+              syncPoint = i - 2;
+              i += 3;
+              break;
+            case 1:
+              // skip past non-sync sequences
+              if (buffer[i - 1] !== 0 || buffer[i - 2] !== 0) {
+                i += 3;
+                break;
+              } // deliver the NAL unit
+
+              this.trigger('data', buffer.subarray(syncPoint + 3, i - 2));
+              syncPoint = i - 2;
+              i += 3;
+              break;
+            default:
+              // the current byte isn't a one or zero, so it cannot be part
+              // of a sync sequence
+              i += 3;
+              break;
+          }
+        } // filter out the NAL units that were delivered
+
+        buffer = buffer.subarray(syncPoint);
+        i -= syncPoint;
+        syncPoint = 0;
+      };
+      this.reset = function () {
+        buffer = null;
+        syncPoint = 0;
+        this.trigger('reset');
+      };
+      this.flush = function () {
+        // deliver the last buffered NAL unit
+        if (buffer && buffer.byteLength > 3) {
+          this.trigger('data', buffer.subarray(syncPoint + 3));
+        } // reset the stream state
+
+        buffer = null;
+        syncPoint = 0;
+        this.trigger('done');
+      };
+      this.endTimeline = function () {
+        this.flush();
+        this.trigger('endedtimeline');
+      };
+    };
+    NalByteStream.prototype = new Stream$2(); // values of profile_idc that indicate additional fields are included in the SPS
+    // see Recommendation ITU-T H.264 (4/2013),
+    // 7.3.2.1.1 Sequence parameter set data syntax
+
+    PROFILES_WITH_OPTIONAL_SPS_DATA = {
+      100: true,
+      110: true,
+      122: true,
+      244: true,
+      44: true,
+      83: true,
+      86: true,
+      118: true,
+      128: true,
+      // TODO: the three profiles below don't
+      // appear to have sps data in the specificiation anymore?
+      138: true,
+      139: true,
+      134: true
+    };
+    /**
+     * Accepts input from a ElementaryStream and produces H.264 NAL unit data
+     * events.
+     */
+
+    H264Stream$1 = function () {
+      var nalByteStream = new NalByteStream(),
+        self,
+        trackId,
+        currentPts,
+        currentDts,
+        discardEmulationPreventionBytes,
+        readSequenceParameterSet,
+        skipScalingList;
+      H264Stream$1.prototype.init.call(this);
+      self = this;
+      /*
+       * Pushes a packet from a stream onto the NalByteStream
+       *
+       * @param {Object} packet - A packet received from a stream
+       * @param {Uint8Array} packet.data - The raw bytes of the packet
+       * @param {Number} packet.dts - Decode timestamp of the packet
+       * @param {Number} packet.pts - Presentation timestamp of the packet
+       * @param {Number} packet.trackId - The id of the h264 track this packet came from
+       * @param {('video'|'audio')} packet.type - The type of packet
+       *
+       */
+
+      this.push = function (packet) {
+        if (packet.type !== 'video') {
+          return;
+        }
+        trackId = packet.trackId;
+        currentPts = packet.pts;
+        currentDts = packet.dts;
+        nalByteStream.push(packet);
+      };
+      /*
+       * Identify NAL unit types and pass on the NALU, trackId, presentation and decode timestamps
+       * for the NALUs to the next stream component.
+       * Also, preprocess caption and sequence parameter NALUs.
+       *
+       * @param {Uint8Array} data - A NAL unit identified by `NalByteStream.push`
+       * @see NalByteStream.push
+       */
+
+      nalByteStream.on('data', function (data) {
+        var event = {
+          trackId: trackId,
+          pts: currentPts,
+          dts: currentDts,
+          data: data,
+          nalUnitTypeCode: data[0] & 0x1f
+        };
+        switch (event.nalUnitTypeCode) {
+          case 0x05:
+            event.nalUnitType = 'slice_layer_without_partitioning_rbsp_idr';
+            break;
+          case 0x06:
+            event.nalUnitType = 'sei_rbsp';
+            event.escapedRBSP = discardEmulationPreventionBytes(data.subarray(1));
+            break;
+          case 0x07:
+            event.nalUnitType = 'seq_parameter_set_rbsp';
+            event.escapedRBSP = discardEmulationPreventionBytes(data.subarray(1));
+            event.config = readSequenceParameterSet(event.escapedRBSP);
+            break;
+          case 0x08:
+            event.nalUnitType = 'pic_parameter_set_rbsp';
+            break;
+          case 0x09:
+            event.nalUnitType = 'access_unit_delimiter_rbsp';
+            break;
+        } // This triggers data on the H264Stream
+
+        self.trigger('data', event);
+      });
+      nalByteStream.on('done', function () {
+        self.trigger('done');
+      });
+      nalByteStream.on('partialdone', function () {
+        self.trigger('partialdone');
+      });
+      nalByteStream.on('reset', function () {
+        self.trigger('reset');
+      });
+      nalByteStream.on('endedtimeline', function () {
+        self.trigger('endedtimeline');
+      });
+      this.flush = function () {
+        nalByteStream.flush();
+      };
+      this.partialFlush = function () {
+        nalByteStream.partialFlush();
+      };
+      this.reset = function () {
+        nalByteStream.reset();
+      };
+      this.endTimeline = function () {
+        nalByteStream.endTimeline();
+      };
+      /**
+       * Advance the ExpGolomb decoder past a scaling list. The scaling
+       * list is optionally transmitted as part of a sequence parameter
+       * set and is not relevant to transmuxing.
+       * @param count {number} the number of entries in this scaling list
+       * @param expGolombDecoder {object} an ExpGolomb pointed to the
+       * start of a scaling list
+       * @see Recommendation ITU-T H.264, Section 7.3.2.1.1.1
+       */
+
+      skipScalingList = function (count, expGolombDecoder) {
+        var lastScale = 8,
+          nextScale = 8,
+          j,
+          deltaScale;
+        for (j = 0; j < count; j++) {
+          if (nextScale !== 0) {
+            deltaScale = expGolombDecoder.readExpGolomb();
+            nextScale = (lastScale + deltaScale + 256) % 256;
+          }
+          lastScale = nextScale === 0 ? lastScale : nextScale;
+        }
+      };
+      /**
+       * Expunge any "Emulation Prevention" bytes from a "Raw Byte
+       * Sequence Payload"
+       * @param data {Uint8Array} the bytes of a RBSP from a NAL
+       * unit
+       * @return {Uint8Array} the RBSP without any Emulation
+       * Prevention Bytes
+       */
+
+      discardEmulationPreventionBytes = function (data) {
+        var length = data.byteLength,
+          emulationPreventionBytesPositions = [],
+          i = 1,
+          newLength,
+          newData; // Find all `Emulation Prevention Bytes`
+
+        while (i < length - 2) {
+          if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0x03) {
+            emulationPreventionBytesPositions.push(i + 2);
+            i += 2;
+          } else {
+            i++;
+          }
+        } // If no Emulation Prevention Bytes were found just return the original
+        // array
+
+        if (emulationPreventionBytesPositions.length === 0) {
+          return data;
+        } // Create a new array to hold the NAL unit data
+
+        newLength = length - emulationPreventionBytesPositions.length;
+        newData = new Uint8Array(newLength);
+        var sourceIndex = 0;
+        for (i = 0; i < newLength; sourceIndex++, i++) {
+          if (sourceIndex === emulationPreventionBytesPositions[0]) {
+            // Skip this byte
+            sourceIndex++; // Remove this position index
+
+            emulationPreventionBytesPositions.shift();
+          }
+          newData[i] = data[sourceIndex];
+        }
+        return newData;
+      };
+      /**
+       * Read a sequence parameter set and return some interesting video
+       * properties. A sequence parameter set is the H264 metadata that
+       * describes the properties of upcoming video frames.
+       * @param data {Uint8Array} the bytes of a sequence parameter set
+       * @return {object} an object with configuration parsed from the
+       * sequence parameter set, including the dimensions of the
+       * associated video frames.
+       */
+
+      readSequenceParameterSet = function (data) {
+        var frameCropLeftOffset = 0,
+          frameCropRightOffset = 0,
+          frameCropTopOffset = 0,
+          frameCropBottomOffset = 0,
+          expGolombDecoder,
+          profileIdc,
+          levelIdc,
+          profileCompatibility,
+          chromaFormatIdc,
+          picOrderCntType,
+          numRefFramesInPicOrderCntCycle,
+          picWidthInMbsMinus1,
+          picHeightInMapUnitsMinus1,
+          frameMbsOnlyFlag,
+          scalingListCount,
+          sarRatio = [1, 1],
+          aspectRatioIdc,
+          i;
+        expGolombDecoder = new ExpGolomb(data);
+        profileIdc = expGolombDecoder.readUnsignedByte(); // profile_idc
+
+        profileCompatibility = expGolombDecoder.readUnsignedByte(); // constraint_set[0-5]_flag
+
+        levelIdc = expGolombDecoder.readUnsignedByte(); // level_idc u(8)
+
+        expGolombDecoder.skipUnsignedExpGolomb(); // seq_parameter_set_id
+        // some profiles have more optional data we don't need
+
+        if (PROFILES_WITH_OPTIONAL_SPS_DATA[profileIdc]) {
+          chromaFormatIdc = expGolombDecoder.readUnsignedExpGolomb();
+          if (chromaFormatIdc === 3) {
+            expGolombDecoder.skipBits(1); // separate_colour_plane_flag
+          }
+
+          expGolombDecoder.skipUnsignedExpGolomb(); // bit_depth_luma_minus8
+
+          expGolombDecoder.skipUnsignedExpGolomb(); // bit_depth_chroma_minus8
+
+          expGolombDecoder.skipBits(1); // qpprime_y_zero_transform_bypass_flag
+
+          if (expGolombDecoder.readBoolean()) {
+            // seq_scaling_matrix_present_flag
+            scalingListCount = chromaFormatIdc !== 3 ? 8 : 12;
+            for (i = 0; i < scalingListCount; i++) {
+              if (expGolombDecoder.readBoolean()) {
+                // seq_scaling_list_present_flag[ i ]
+                if (i < 6) {
+                  skipScalingList(16, expGolombDecoder);
+                } else {
+                  skipScalingList(64, expGolombDecoder);
+                }
+              }
+            }
+          }
+        }
+        expGolombDecoder.skipUnsignedExpGolomb(); // log2_max_frame_num_minus4
+
+        picOrderCntType = expGolombDecoder.readUnsignedExpGolomb();
+        if (picOrderCntType === 0) {
+          expGolombDecoder.readUnsignedExpGolomb(); // log2_max_pic_order_cnt_lsb_minus4
+        } else if (picOrderCntType === 1) {
+          expGolombDecoder.skipBits(1); // delta_pic_order_always_zero_flag
+
+          expGolombDecoder.skipExpGolomb(); // offset_for_non_ref_pic
+
+          expGolombDecoder.skipExpGolomb(); // offset_for_top_to_bottom_field
+
+          numRefFramesInPicOrderCntCycle = expGolombDecoder.readUnsignedExpGolomb();
+          for (i = 0; i < numRefFramesInPicOrderCntCycle; i++) {
+            expGolombDecoder.skipExpGolomb(); // offset_for_ref_frame[ i ]
+          }
+        }
+
+        expGolombDecoder.skipUnsignedExpGolomb(); // max_num_ref_frames
+
+        expGolombDecoder.skipBits(1); // gaps_in_frame_num_value_allowed_flag
+
+        picWidthInMbsMinus1 = expGolombDecoder.readUnsignedExpGolomb();
+        picHeightInMapUnitsMinus1 = expGolombDecoder.readUnsignedExpGolomb();
+        frameMbsOnlyFlag = expGolombDecoder.readBits(1);
+        if (frameMbsOnlyFlag === 0) {
+          expGolombDecoder.skipBits(1); // mb_adaptive_frame_field_flag
+        }
+
+        expGolombDecoder.skipBits(1); // direct_8x8_inference_flag
+
+        if (expGolombDecoder.readBoolean()) {
+          // frame_cropping_flag
+          frameCropLeftOffset = expGolombDecoder.readUnsignedExpGolomb();
+          frameCropRightOffset = expGolombDecoder.readUnsignedExpGolomb();
+          frameCropTopOffset = expGolombDecoder.readUnsignedExpGolomb();
+          frameCropBottomOffset = expGolombDecoder.readUnsignedExpGolomb();
+        }
+        if (expGolombDecoder.readBoolean()) {
+          // vui_parameters_present_flag
+          if (expGolombDecoder.readBoolean()) {
+            // aspect_ratio_info_present_flag
+            aspectRatioIdc = expGolombDecoder.readUnsignedByte();
+            switch (aspectRatioIdc) {
+              case 1:
+                sarRatio = [1, 1];
+                break;
+              case 2:
+                sarRatio = [12, 11];
+                break;
+              case 3:
+                sarRatio = [10, 11];
+                break;
+              case 4:
+                sarRatio = [16, 11];
+                break;
+              case 5:
+                sarRatio = [40, 33];
+                break;
+              case 6:
+                sarRatio = [24, 11];
+                break;
+              case 7:
+                sarRatio = [20, 11];
+                break;
+              case 8:
+                sarRatio = [32, 11];
+                break;
+              case 9:
+                sarRatio = [80, 33];
+                break;
+              case 10:
+                sarRatio = [18, 11];
+                break;
+              case 11:
+                sarRatio = [15, 11];
+                break;
+              case 12:
+                sarRatio = [64, 33];
+                break;
+              case 13:
+                sarRatio = [160, 99];
+                break;
+              case 14:
+                sarRatio = [4, 3];
+                break;
+              case 15:
+                sarRatio = [3, 2];
+                break;
+              case 16:
+                sarRatio = [2, 1];
+                break;
+              case 255:
+                {
+                  sarRatio = [expGolombDecoder.readUnsignedByte() << 8 | expGolombDecoder.readUnsignedByte(), expGolombDecoder.readUnsignedByte() << 8 | expGolombDecoder.readUnsignedByte()];
+                  break;
+                }
+            }
+            if (sarRatio) {
+              sarRatio[0] / sarRatio[1];
+            }
+          }
+        }
+        return {
+          profileIdc: profileIdc,
+          levelIdc: levelIdc,
+          profileCompatibility: profileCompatibility,
+          width: (picWidthInMbsMinus1 + 1) * 16 - frameCropLeftOffset * 2 - frameCropRightOffset * 2,
+          height: (2 - frameMbsOnlyFlag) * (picHeightInMapUnitsMinus1 + 1) * 16 - frameCropTopOffset * 2 - frameCropBottomOffset * 2,
+          // sar is sample aspect ratio
+          sarRatio: sarRatio
+        };
+      };
+    };
+    H264Stream$1.prototype = new Stream$2();
+    var h264 = {
+      H264Stream: H264Stream$1,
+      NalByteStream: NalByteStream
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Utilities to detect basic properties and metadata about Aac data.
+     */
+
+    var ADTS_SAMPLING_FREQUENCIES = [96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350];
+    var parseId3TagSize = function (header, byteIndex) {
+      var returnSize = header[byteIndex + 6] << 21 | header[byteIndex + 7] << 14 | header[byteIndex + 8] << 7 | header[byteIndex + 9],
+        flags = header[byteIndex + 5],
+        footerPresent = (flags & 16) >> 4; // if we get a negative returnSize clamp it to 0
+
+      returnSize = returnSize >= 0 ? returnSize : 0;
+      if (footerPresent) {
+        return returnSize + 20;
+      }
+      return returnSize + 10;
+    };
+    var getId3Offset = function (data, offset) {
+      if (data.length - offset < 10 || data[offset] !== 'I'.charCodeAt(0) || data[offset + 1] !== 'D'.charCodeAt(0) || data[offset + 2] !== '3'.charCodeAt(0)) {
+        return offset;
+      }
+      offset += parseId3TagSize(data, offset);
+      return getId3Offset(data, offset);
+    }; // TODO: use vhs-utils
+
+    var isLikelyAacData$1 = function (data) {
+      var offset = getId3Offset(data, 0);
+      return data.length >= offset + 2 && (data[offset] & 0xFF) === 0xFF && (data[offset + 1] & 0xF0) === 0xF0 &&
+      // verify that the 2 layer bits are 0, aka this
+      // is not mp3 data but aac data.
+      (data[offset + 1] & 0x16) === 0x10;
+    };
+    var parseSyncSafeInteger = function (data) {
+      return data[0] << 21 | data[1] << 14 | data[2] << 7 | data[3];
+    }; // return a percent-encoded representation of the specified byte range
+    // @see http://en.wikipedia.org/wiki/Percent-encoding
+
+    var percentEncode = function (bytes, start, end) {
+      var i,
+        result = '';
+      for (i = start; i < end; i++) {
+        result += '%' + ('00' + bytes[i].toString(16)).slice(-2);
+      }
+      return result;
+    }; // return the string representation of the specified byte range,
+    // interpreted as ISO-8859-1.
+
+    var parseIso88591 = function (bytes, start, end) {
+      return unescape(percentEncode(bytes, start, end)); // jshint ignore:line
+    };
+
+    var parseAdtsSize = function (header, byteIndex) {
+      var lowThree = (header[byteIndex + 5] & 0xE0) >> 5,
+        middle = header[byteIndex + 4] << 3,
+        highTwo = header[byteIndex + 3] & 0x3 << 11;
+      return highTwo | middle | lowThree;
+    };
+    var parseType$4 = function (header, byteIndex) {
+      if (header[byteIndex] === 'I'.charCodeAt(0) && header[byteIndex + 1] === 'D'.charCodeAt(0) && header[byteIndex + 2] === '3'.charCodeAt(0)) {
+        return 'timed-metadata';
+      } else if (header[byteIndex] & 0xff === 0xff && (header[byteIndex + 1] & 0xf0) === 0xf0) {
+        return 'audio';
+      }
+      return null;
+    };
+    var parseSampleRate = function (packet) {
+      var i = 0;
+      while (i + 5 < packet.length) {
+        if (packet[i] !== 0xFF || (packet[i + 1] & 0xF6) !== 0xF0) {
+          // If a valid header was not found,  jump one forward and attempt to
+          // find a valid ADTS header starting at the next byte
+          i++;
+          continue;
+        }
+        return ADTS_SAMPLING_FREQUENCIES[(packet[i + 2] & 0x3c) >>> 2];
+      }
+      return null;
+    };
+    var parseAacTimestamp = function (packet) {
+      var frameStart, frameSize, frame, frameHeader; // find the start of the first frame and the end of the tag
+
+      frameStart = 10;
+      if (packet[5] & 0x40) {
+        // advance the frame start past the extended header
+        frameStart += 4; // header size field
+
+        frameStart += parseSyncSafeInteger(packet.subarray(10, 14));
+      } // parse one or more ID3 frames
+      // http://id3.org/id3v2.3.0#ID3v2_frame_overview
+
+      do {
+        // determine the number of bytes in this frame
+        frameSize = parseSyncSafeInteger(packet.subarray(frameStart + 4, frameStart + 8));
+        if (frameSize < 1) {
+          return null;
+        }
+        frameHeader = String.fromCharCode(packet[frameStart], packet[frameStart + 1], packet[frameStart + 2], packet[frameStart + 3]);
+        if (frameHeader === 'PRIV') {
+          frame = packet.subarray(frameStart + 10, frameStart + frameSize + 10);
+          for (var i = 0; i < frame.byteLength; i++) {
+            if (frame[i] === 0) {
+              var owner = parseIso88591(frame, 0, i);
+              if (owner === 'com.apple.streaming.transportStreamTimestamp') {
+                var d = frame.subarray(i + 1);
+                var size = (d[3] & 0x01) << 30 | d[4] << 22 | d[5] << 14 | d[6] << 6 | d[7] >>> 2;
+                size *= 4;
+                size += d[7] & 0x03;
+                return size;
+              }
+              break;
+            }
+          }
+        }
+        frameStart += 10; // advance past the frame header
+
+        frameStart += frameSize; // advance past the frame body
+      } while (frameStart < packet.byteLength);
+      return null;
+    };
+    var utils = {
+      isLikelyAacData: isLikelyAacData$1,
+      parseId3TagSize: parseId3TagSize,
+      parseAdtsSize: parseAdtsSize,
+      parseType: parseType$4,
+      parseSampleRate: parseSampleRate,
+      parseAacTimestamp: parseAacTimestamp
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * A stream-based aac to mp4 converter. This utility can be used to
+     * deliver mp4s to a SourceBuffer on platforms that support native
+     * Media Source Extensions.
+     */
+
+    var Stream$1 = stream;
+    var aacUtils = utils; // Constants
+
+    var AacStream$1;
+    /**
+     * Splits an incoming stream of binary data into ADTS and ID3 Frames.
+     */
+
+    AacStream$1 = function () {
+      var everything = new Uint8Array(),
+        timeStamp = 0;
+      AacStream$1.prototype.init.call(this);
+      this.setTimestamp = function (timestamp) {
+        timeStamp = timestamp;
+      };
+      this.push = function (bytes) {
+        var frameSize = 0,
+          byteIndex = 0,
+          bytesLeft,
+          chunk,
+          packet,
+          tempLength; // If there are bytes remaining from the last segment, prepend them to the
+        // bytes that were pushed in
+
+        if (everything.length) {
+          tempLength = everything.length;
+          everything = new Uint8Array(bytes.byteLength + tempLength);
+          everything.set(everything.subarray(0, tempLength));
+          everything.set(bytes, tempLength);
+        } else {
+          everything = bytes;
+        }
+        while (everything.length - byteIndex >= 3) {
+          if (everything[byteIndex] === 'I'.charCodeAt(0) && everything[byteIndex + 1] === 'D'.charCodeAt(0) && everything[byteIndex + 2] === '3'.charCodeAt(0)) {
+            // Exit early because we don't have enough to parse
+            // the ID3 tag header
+            if (everything.length - byteIndex < 10) {
+              break;
+            } // check framesize
+
+            frameSize = aacUtils.parseId3TagSize(everything, byteIndex); // Exit early if we don't have enough in the buffer
+            // to emit a full packet
+            // Add to byteIndex to support multiple ID3 tags in sequence
+
+            if (byteIndex + frameSize > everything.length) {
+              break;
+            }
+            chunk = {
+              type: 'timed-metadata',
+              data: everything.subarray(byteIndex, byteIndex + frameSize)
+            };
+            this.trigger('data', chunk);
+            byteIndex += frameSize;
+            continue;
+          } else if ((everything[byteIndex] & 0xff) === 0xff && (everything[byteIndex + 1] & 0xf0) === 0xf0) {
+            // Exit early because we don't have enough to parse
+            // the ADTS frame header
+            if (everything.length - byteIndex < 7) {
+              break;
+            }
+            frameSize = aacUtils.parseAdtsSize(everything, byteIndex); // Exit early if we don't have enough in the buffer
+            // to emit a full packet
+
+            if (byteIndex + frameSize > everything.length) {
+              break;
+            }
+            packet = {
+              type: 'audio',
+              data: everything.subarray(byteIndex, byteIndex + frameSize),
+              pts: timeStamp,
+              dts: timeStamp
+            };
+            this.trigger('data', packet);
+            byteIndex += frameSize;
+            continue;
+          }
+          byteIndex++;
+        }
+        bytesLeft = everything.length - byteIndex;
+        if (bytesLeft > 0) {
+          everything = everything.subarray(byteIndex);
+        } else {
+          everything = new Uint8Array();
+        }
+      };
+      this.reset = function () {
+        everything = new Uint8Array();
+        this.trigger('reset');
+      };
+      this.endTimeline = function () {
+        everything = new Uint8Array();
+        this.trigger('endedtimeline');
+      };
+    };
+    AacStream$1.prototype = new Stream$1();
+    var aac = AacStream$1;
+    var AUDIO_PROPERTIES$1 = ['audioobjecttype', 'channelcount', 'samplerate', 'samplingfrequencyindex', 'samplesize'];
+    var audioProperties = AUDIO_PROPERTIES$1;
+    var VIDEO_PROPERTIES$1 = ['width', 'height', 'profileIdc', 'levelIdc', 'profileCompatibility', 'sarRatio'];
+    var videoProperties = VIDEO_PROPERTIES$1;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * A stream-based mp2t to mp4 converter. This utility can be used to
+     * deliver mp4s to a SourceBuffer on platforms that support native
+     * Media Source Extensions.
+     */
+
+    var Stream = stream;
+    var mp4 = mp4Generator;
+    var frameUtils = frameUtils$1;
+    var audioFrameUtils = audioFrameUtils$1;
+    var trackDecodeInfo = trackDecodeInfo$1;
+    var m2ts = m2ts_1;
+    var clock = clock$2;
+    var AdtsStream = adts;
+    var H264Stream = h264.H264Stream;
+    var AacStream = aac;
+    var isLikelyAacData = utils.isLikelyAacData;
+    var ONE_SECOND_IN_TS$1 = clock$2.ONE_SECOND_IN_TS;
+    var AUDIO_PROPERTIES = audioProperties;
+    var VIDEO_PROPERTIES = videoProperties; // object types
+
+    var VideoSegmentStream, AudioSegmentStream, Transmuxer, CoalesceStream;
+    var retriggerForStream = function (key, event) {
+      event.stream = key;
+      this.trigger('log', event);
+    };
+    var addPipelineLogRetriggers = function (transmuxer, pipeline) {
+      var keys = Object.keys(pipeline);
+      for (var i = 0; i < keys.length; i++) {
+        var key = keys[i]; // skip non-stream keys and headOfPipeline
+        // which is just a duplicate
+
+        if (key === 'headOfPipeline' || !pipeline[key].on) {
+          continue;
+        }
+        pipeline[key].on('log', retriggerForStream.bind(transmuxer, key));
+      }
+    };
+    /**
+     * Compare two arrays (even typed) for same-ness
+     */
+
+    var arrayEquals = function (a, b) {
+      var i;
+      if (a.length !== b.length) {
+        return false;
+      } // compare the value of each element in the array
+
+      for (i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) {
+          return false;
+        }
+      }
+      return true;
+    };
+    var generateSegmentTimingInfo = function (baseMediaDecodeTime, startDts, startPts, endDts, endPts, prependedContentDuration) {
+      var ptsOffsetFromDts = startPts - startDts,
+        decodeDuration = endDts - startDts,
+        presentationDuration = endPts - startPts; // The PTS and DTS values are based on the actual stream times from the segment,
+      // however, the player time values will reflect a start from the baseMediaDecodeTime.
+      // In order to provide relevant values for the player times, base timing info on the
+      // baseMediaDecodeTime and the DTS and PTS durations of the segment.
+
+      return {
+        start: {
+          dts: baseMediaDecodeTime,
+          pts: baseMediaDecodeTime + ptsOffsetFromDts
+        },
+        end: {
+          dts: baseMediaDecodeTime + decodeDuration,
+          pts: baseMediaDecodeTime + presentationDuration
+        },
+        prependedContentDuration: prependedContentDuration,
+        baseMediaDecodeTime: baseMediaDecodeTime
+      };
+    };
+    /**
+     * Constructs a single-track, ISO BMFF media segment from AAC data
+     * events. The output of this stream can be fed to a SourceBuffer
+     * configured with a suitable initialization segment.
+     * @param track {object} track metadata configuration
+     * @param options {object} transmuxer options object
+     * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+     *        in the source; false to adjust the first segment to start at 0.
+     */
+
+    AudioSegmentStream = function (track, options) {
+      var adtsFrames = [],
+        sequenceNumber,
+        earliestAllowedDts = 0,
+        audioAppendStartTs = 0,
+        videoBaseMediaDecodeTime = Infinity;
+      options = options || {};
+      sequenceNumber = options.firstSequenceNumber || 0;
+      AudioSegmentStream.prototype.init.call(this);
+      this.push = function (data) {
+        trackDecodeInfo.collectDtsInfo(track, data);
+        if (track) {
+          AUDIO_PROPERTIES.forEach(function (prop) {
+            track[prop] = data[prop];
+          });
+        } // buffer audio data until end() is called
+
+        adtsFrames.push(data);
+      };
+      this.setEarliestDts = function (earliestDts) {
+        earliestAllowedDts = earliestDts;
+      };
+      this.setVideoBaseMediaDecodeTime = function (baseMediaDecodeTime) {
+        videoBaseMediaDecodeTime = baseMediaDecodeTime;
+      };
+      this.setAudioAppendStart = function (timestamp) {
+        audioAppendStartTs = timestamp;
+      };
+      this.flush = function () {
+        var frames, moof, mdat, boxes, frameDuration, segmentDuration, videoClockCyclesOfSilencePrefixed; // return early if no audio data has been observed
+
+        if (adtsFrames.length === 0) {
+          this.trigger('done', 'AudioSegmentStream');
+          return;
+        }
+        frames = audioFrameUtils.trimAdtsFramesByEarliestDts(adtsFrames, track, earliestAllowedDts);
+        track.baseMediaDecodeTime = trackDecodeInfo.calculateTrackBaseMediaDecodeTime(track, options.keepOriginalTimestamps); // amount of audio filled but the value is in video clock rather than audio clock
+
+        videoClockCyclesOfSilencePrefixed = audioFrameUtils.prefixWithSilence(track, frames, audioAppendStartTs, videoBaseMediaDecodeTime); // we have to build the index from byte locations to
+        // samples (that is, adts frames) in the audio data
+
+        track.samples = audioFrameUtils.generateSampleTable(frames); // concatenate the audio data to constuct the mdat
+
+        mdat = mp4.mdat(audioFrameUtils.concatenateFrameData(frames));
+        adtsFrames = [];
+        moof = mp4.moof(sequenceNumber, [track]);
+        boxes = new Uint8Array(moof.byteLength + mdat.byteLength); // bump the sequence number for next time
+
+        sequenceNumber++;
+        boxes.set(moof);
+        boxes.set(mdat, moof.byteLength);
+        trackDecodeInfo.clearDtsInfo(track);
+        frameDuration = Math.ceil(ONE_SECOND_IN_TS$1 * 1024 / track.samplerate); // TODO this check was added to maintain backwards compatibility (particularly with
+        // tests) on adding the timingInfo event. However, it seems unlikely that there's a
+        // valid use-case where an init segment/data should be triggered without associated
+        // frames. Leaving for now, but should be looked into.
+
+        if (frames.length) {
+          segmentDuration = frames.length * frameDuration;
+          this.trigger('segmentTimingInfo', generateSegmentTimingInfo(
+          // The audio track's baseMediaDecodeTime is in audio clock cycles, but the
+          // frame info is in video clock cycles. Convert to match expectation of
+          // listeners (that all timestamps will be based on video clock cycles).
+          clock.audioTsToVideoTs(track.baseMediaDecodeTime, track.samplerate),
+          // frame times are already in video clock, as is segment duration
+          frames[0].dts, frames[0].pts, frames[0].dts + segmentDuration, frames[0].pts + segmentDuration, videoClockCyclesOfSilencePrefixed || 0));
+          this.trigger('timingInfo', {
+            start: frames[0].pts,
+            end: frames[0].pts + segmentDuration
+          });
+        }
+        this.trigger('data', {
+          track: track,
+          boxes: boxes
+        });
+        this.trigger('done', 'AudioSegmentStream');
+      };
+      this.reset = function () {
+        trackDecodeInfo.clearDtsInfo(track);
+        adtsFrames = [];
+        this.trigger('reset');
+      };
+    };
+    AudioSegmentStream.prototype = new Stream();
+    /**
+     * Constructs a single-track, ISO BMFF media segment from H264 data
+     * events. The output of this stream can be fed to a SourceBuffer
+     * configured with a suitable initialization segment.
+     * @param track {object} track metadata configuration
+     * @param options {object} transmuxer options object
+     * @param options.alignGopsAtEnd {boolean} If true, start from the end of the
+     *        gopsToAlignWith list when attempting to align gop pts
+     * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+     *        in the source; false to adjust the first segment to start at 0.
+     */
+
+    VideoSegmentStream = function (track, options) {
+      var sequenceNumber,
+        nalUnits = [],
+        gopsToAlignWith = [],
+        config,
+        pps;
+      options = options || {};
+      sequenceNumber = options.firstSequenceNumber || 0;
+      VideoSegmentStream.prototype.init.call(this);
+      delete track.minPTS;
+      this.gopCache_ = [];
+      /**
+        * Constructs a ISO BMFF segment given H264 nalUnits
+        * @param {Object} nalUnit A data event representing a nalUnit
+        * @param {String} nalUnit.nalUnitType
+        * @param {Object} nalUnit.config Properties for a mp4 track
+        * @param {Uint8Array} nalUnit.data The nalUnit bytes
+        * @see lib/codecs/h264.js
+       **/
+
+      this.push = function (nalUnit) {
+        trackDecodeInfo.collectDtsInfo(track, nalUnit); // record the track config
+
+        if (nalUnit.nalUnitType === 'seq_parameter_set_rbsp' && !config) {
+          config = nalUnit.config;
+          track.sps = [nalUnit.data];
+          VIDEO_PROPERTIES.forEach(function (prop) {
+            track[prop] = config[prop];
+          }, this);
+        }
+        if (nalUnit.nalUnitType === 'pic_parameter_set_rbsp' && !pps) {
+          pps = nalUnit.data;
+          track.pps = [nalUnit.data];
+        } // buffer video until flush() is called
+
+        nalUnits.push(nalUnit);
+      };
+      /**
+        * Pass constructed ISO BMFF track and boxes on to the
+        * next stream in the pipeline
+       **/
+
+      this.flush = function () {
+        var frames,
+          gopForFusion,
+          gops,
+          moof,
+          mdat,
+          boxes,
+          prependedContentDuration = 0,
+          firstGop,
+          lastGop; // Throw away nalUnits at the start of the byte stream until
+        // we find the first AUD
+
+        while (nalUnits.length) {
+          if (nalUnits[0].nalUnitType === 'access_unit_delimiter_rbsp') {
+            break;
+          }
+          nalUnits.shift();
+        } // Return early if no video data has been observed
+
+        if (nalUnits.length === 0) {
+          this.resetStream_();
+          this.trigger('done', 'VideoSegmentStream');
+          return;
+        } // Organize the raw nal-units into arrays that represent
+        // higher-level constructs such as frames and gops
+        // (group-of-pictures)
+
+        frames = frameUtils.groupNalsIntoFrames(nalUnits);
+        gops = frameUtils.groupFramesIntoGops(frames); // If the first frame of this fragment is not a keyframe we have
+        // a problem since MSE (on Chrome) requires a leading keyframe.
+        //
+        // We have two approaches to repairing this situation:
+        // 1) GOP-FUSION:
+        //    This is where we keep track of the GOPS (group-of-pictures)
+        //    from previous fragments and attempt to find one that we can
+        //    prepend to the current fragment in order to create a valid
+        //    fragment.
+        // 2) KEYFRAME-PULLING:
+        //    Here we search for the first keyframe in the fragment and
+        //    throw away all the frames between the start of the fragment
+        //    and that keyframe. We then extend the duration and pull the
+        //    PTS of the keyframe forward so that it covers the time range
+        //    of the frames that were disposed of.
+        //
+        // #1 is far prefereable over #2 which can cause "stuttering" but
+        // requires more things to be just right.
+
+        if (!gops[0][0].keyFrame) {
+          // Search for a gop for fusion from our gopCache
+          gopForFusion = this.getGopForFusion_(nalUnits[0], track);
+          if (gopForFusion) {
+            // in order to provide more accurate timing information about the segment, save
+            // the number of seconds prepended to the original segment due to GOP fusion
+            prependedContentDuration = gopForFusion.duration;
+            gops.unshift(gopForFusion); // Adjust Gops' metadata to account for the inclusion of the
+            // new gop at the beginning
+
+            gops.byteLength += gopForFusion.byteLength;
+            gops.nalCount += gopForFusion.nalCount;
+            gops.pts = gopForFusion.pts;
+            gops.dts = gopForFusion.dts;
+            gops.duration += gopForFusion.duration;
+          } else {
+            // If we didn't find a candidate gop fall back to keyframe-pulling
+            gops = frameUtils.extendFirstKeyFrame(gops);
+          }
+        } // Trim gops to align with gopsToAlignWith
+
+        if (gopsToAlignWith.length) {
+          var alignedGops;
+          if (options.alignGopsAtEnd) {
+            alignedGops = this.alignGopsAtEnd_(gops);
+          } else {
+            alignedGops = this.alignGopsAtStart_(gops);
+          }
+          if (!alignedGops) {
+            // save all the nals in the last GOP into the gop cache
+            this.gopCache_.unshift({
+              gop: gops.pop(),
+              pps: track.pps,
+              sps: track.sps
+            }); // Keep a maximum of 6 GOPs in the cache
+
+            this.gopCache_.length = Math.min(6, this.gopCache_.length); // Clear nalUnits
+
+            nalUnits = []; // return early no gops can be aligned with desired gopsToAlignWith
+
+            this.resetStream_();
+            this.trigger('done', 'VideoSegmentStream');
+            return;
+          } // Some gops were trimmed. clear dts info so minSegmentDts and pts are correct
+          // when recalculated before sending off to CoalesceStream
+
+          trackDecodeInfo.clearDtsInfo(track);
+          gops = alignedGops;
+        }
+        trackDecodeInfo.collectDtsInfo(track, gops); // First, we have to build the index from byte locations to
+        // samples (that is, frames) in the video data
+
+        track.samples = frameUtils.generateSampleTable(gops); // Concatenate the video data and construct the mdat
+
+        mdat = mp4.mdat(frameUtils.concatenateNalData(gops));
+        track.baseMediaDecodeTime = trackDecodeInfo.calculateTrackBaseMediaDecodeTime(track, options.keepOriginalTimestamps);
+        this.trigger('processedGopsInfo', gops.map(function (gop) {
+          return {
+            pts: gop.pts,
+            dts: gop.dts,
+            byteLength: gop.byteLength
+          };
+        }));
+        firstGop = gops[0];
+        lastGop = gops[gops.length - 1];
+        this.trigger('segmentTimingInfo', generateSegmentTimingInfo(track.baseMediaDecodeTime, firstGop.dts, firstGop.pts, lastGop.dts + lastGop.duration, lastGop.pts + lastGop.duration, prependedContentDuration));
+        this.trigger('timingInfo', {
+          start: gops[0].pts,
+          end: gops[gops.length - 1].pts + gops[gops.length - 1].duration
+        }); // save all the nals in the last GOP into the gop cache
+
+        this.gopCache_.unshift({
+          gop: gops.pop(),
+          pps: track.pps,
+          sps: track.sps
+        }); // Keep a maximum of 6 GOPs in the cache
+
+        this.gopCache_.length = Math.min(6, this.gopCache_.length); // Clear nalUnits
+
+        nalUnits = [];
+        this.trigger('baseMediaDecodeTime', track.baseMediaDecodeTime);
+        this.trigger('timelineStartInfo', track.timelineStartInfo);
+        moof = mp4.moof(sequenceNumber, [track]); // it would be great to allocate this array up front instead of
+        // throwing away hundreds of media segment fragments
+
+        boxes = new Uint8Array(moof.byteLength + mdat.byteLength); // Bump the sequence number for next time
+
+        sequenceNumber++;
+        boxes.set(moof);
+        boxes.set(mdat, moof.byteLength);
+        this.trigger('data', {
+          track: track,
+          boxes: boxes
+        });
+        this.resetStream_(); // Continue with the flush process now
+
+        this.trigger('done', 'VideoSegmentStream');
+      };
+      this.reset = function () {
+        this.resetStream_();
+        nalUnits = [];
+        this.gopCache_.length = 0;
+        gopsToAlignWith.length = 0;
+        this.trigger('reset');
+      };
+      this.resetStream_ = function () {
+        trackDecodeInfo.clearDtsInfo(track); // reset config and pps because they may differ across segments
+        // for instance, when we are rendition switching
+
+        config = undefined;
+        pps = undefined;
+      }; // Search for a candidate Gop for gop-fusion from the gop cache and
+      // return it or return null if no good candidate was found
+
+      this.getGopForFusion_ = function (nalUnit) {
+        var halfSecond = 45000,
+          // Half-a-second in a 90khz clock
+          allowableOverlap = 10000,
+          // About 3 frames @ 30fps
+          nearestDistance = Infinity,
+          dtsDistance,
+          nearestGopObj,
+          currentGop,
+          currentGopObj,
+          i; // Search for the GOP nearest to the beginning of this nal unit
+
+        for (i = 0; i < this.gopCache_.length; i++) {
+          currentGopObj = this.gopCache_[i];
+          currentGop = currentGopObj.gop; // Reject Gops with different SPS or PPS
+
+          if (!(track.pps && arrayEquals(track.pps[0], currentGopObj.pps[0])) || !(track.sps && arrayEquals(track.sps[0], currentGopObj.sps[0]))) {
+            continue;
+          } // Reject Gops that would require a negative baseMediaDecodeTime
+
+          if (currentGop.dts < track.timelineStartInfo.dts) {
+            continue;
+          } // The distance between the end of the gop and the start of the nalUnit
+
+          dtsDistance = nalUnit.dts - currentGop.dts - currentGop.duration; // Only consider GOPS that start before the nal unit and end within
+          // a half-second of the nal unit
+
+          if (dtsDistance >= -allowableOverlap && dtsDistance <= halfSecond) {
+            // Always use the closest GOP we found if there is more than
+            // one candidate
+            if (!nearestGopObj || nearestDistance > dtsDistance) {
+              nearestGopObj = currentGopObj;
+              nearestDistance = dtsDistance;
+            }
+          }
+        }
+        if (nearestGopObj) {
+          return nearestGopObj.gop;
+        }
+        return null;
+      }; // trim gop list to the first gop found that has a matching pts with a gop in the list
+      // of gopsToAlignWith starting from the START of the list
+
+      this.alignGopsAtStart_ = function (gops) {
+        var alignIndex, gopIndex, align, gop, byteLength, nalCount, duration, alignedGops;
+        byteLength = gops.byteLength;
+        nalCount = gops.nalCount;
+        duration = gops.duration;
+        alignIndex = gopIndex = 0;
+        while (alignIndex < gopsToAlignWith.length && gopIndex < gops.length) {
+          align = gopsToAlignWith[alignIndex];
+          gop = gops[gopIndex];
+          if (align.pts === gop.pts) {
+            break;
+          }
+          if (gop.pts > align.pts) {
+            // this current gop starts after the current gop we want to align on, so increment
+            // align index
+            alignIndex++;
+            continue;
+          } // current gop starts before the current gop we want to align on. so increment gop
+          // index
+
+          gopIndex++;
+          byteLength -= gop.byteLength;
+          nalCount -= gop.nalCount;
+          duration -= gop.duration;
+        }
+        if (gopIndex === 0) {
+          // no gops to trim
+          return gops;
+        }
+        if (gopIndex === gops.length) {
+          // all gops trimmed, skip appending all gops
+          return null;
+        }
+        alignedGops = gops.slice(gopIndex);
+        alignedGops.byteLength = byteLength;
+        alignedGops.duration = duration;
+        alignedGops.nalCount = nalCount;
+        alignedGops.pts = alignedGops[0].pts;
+        alignedGops.dts = alignedGops[0].dts;
+        return alignedGops;
+      }; // trim gop list to the first gop found that has a matching pts with a gop in the list
+      // of gopsToAlignWith starting from the END of the list
+
+      this.alignGopsAtEnd_ = function (gops) {
+        var alignIndex, gopIndex, align, gop, alignEndIndex, matchFound;
+        alignIndex = gopsToAlignWith.length - 1;
+        gopIndex = gops.length - 1;
+        alignEndIndex = null;
+        matchFound = false;
+        while (alignIndex >= 0 && gopIndex >= 0) {
+          align = gopsToAlignWith[alignIndex];
+          gop = gops[gopIndex];
+          if (align.pts === gop.pts) {
+            matchFound = true;
+            break;
+          }
+          if (align.pts > gop.pts) {
+            alignIndex--;
+            continue;
+          }
+          if (alignIndex === gopsToAlignWith.length - 1) {
+            // gop.pts is greater than the last alignment candidate. If no match is found
+            // by the end of this loop, we still want to append gops that come after this
+            // point
+            alignEndIndex = gopIndex;
+          }
+          gopIndex--;
+        }
+        if (!matchFound && alignEndIndex === null) {
+          return null;
+        }
+        var trimIndex;
+        if (matchFound) {
+          trimIndex = gopIndex;
+        } else {
+          trimIndex = alignEndIndex;
+        }
+        if (trimIndex === 0) {
+          return gops;
+        }
+        var alignedGops = gops.slice(trimIndex);
+        var metadata = alignedGops.reduce(function (total, gop) {
+          total.byteLength += gop.byteLength;
+          total.duration += gop.duration;
+          total.nalCount += gop.nalCount;
+          return total;
+        }, {
+          byteLength: 0,
+          duration: 0,
+          nalCount: 0
+        });
+        alignedGops.byteLength = metadata.byteLength;
+        alignedGops.duration = metadata.duration;
+        alignedGops.nalCount = metadata.nalCount;
+        alignedGops.pts = alignedGops[0].pts;
+        alignedGops.dts = alignedGops[0].dts;
+        return alignedGops;
+      };
+      this.alignGopsWith = function (newGopsToAlignWith) {
+        gopsToAlignWith = newGopsToAlignWith;
+      };
+    };
+    VideoSegmentStream.prototype = new Stream();
+    /**
+     * A Stream that can combine multiple streams (ie. audio & video)
+     * into a single output segment for MSE. Also supports audio-only
+     * and video-only streams.
+     * @param options {object} transmuxer options object
+     * @param options.keepOriginalTimestamps {boolean} If true, keep the timestamps
+     *        in the source; false to adjust the first segment to start at media timeline start.
+     */
+
+    CoalesceStream = function (options, metadataStream) {
+      // Number of Tracks per output segment
+      // If greater than 1, we combine multiple
+      // tracks into a single segment
+      this.numberOfTracks = 0;
+      this.metadataStream = metadataStream;
+      options = options || {};
+      if (typeof options.remux !== 'undefined') {
+        this.remuxTracks = !!options.remux;
+      } else {
+        this.remuxTracks = true;
+      }
+      if (typeof options.keepOriginalTimestamps === 'boolean') {
+        this.keepOriginalTimestamps = options.keepOriginalTimestamps;
+      } else {
+        this.keepOriginalTimestamps = false;
+      }
+      this.pendingTracks = [];
+      this.videoTrack = null;
+      this.pendingBoxes = [];
+      this.pendingCaptions = [];
+      this.pendingMetadata = [];
+      this.pendingBytes = 0;
+      this.emittedTracks = 0;
+      CoalesceStream.prototype.init.call(this); // Take output from multiple
+
+      this.push = function (output) {
+        // buffer incoming captions until the associated video segment
+        // finishes
+        if (output.content || output.text) {
+          return this.pendingCaptions.push(output);
+        } // buffer incoming id3 tags until the final flush
+
+        if (output.frames) {
+          return this.pendingMetadata.push(output);
+        } // Add this track to the list of pending tracks and store
+        // important information required for the construction of
+        // the final segment
+
+        this.pendingTracks.push(output.track);
+        this.pendingBytes += output.boxes.byteLength; // TODO: is there an issue for this against chrome?
+        // We unshift audio and push video because
+        // as of Chrome 75 when switching from
+        // one init segment to another if the video
+        // mdat does not appear after the audio mdat
+        // only audio will play for the duration of our transmux.
+
+        if (output.track.type === 'video') {
+          this.videoTrack = output.track;
+          this.pendingBoxes.push(output.boxes);
+        }
+        if (output.track.type === 'audio') {
+          this.audioTrack = output.track;
+          this.pendingBoxes.unshift(output.boxes);
+        }
+      };
+    };
+    CoalesceStream.prototype = new Stream();
+    CoalesceStream.prototype.flush = function (flushSource) {
+      var offset = 0,
+        event = {
+          captions: [],
+          captionStreams: {},
+          metadata: [],
+          info: {}
+        },
+        caption,
+        id3,
+        initSegment,
+        timelineStartPts = 0,
+        i;
+      if (this.pendingTracks.length < this.numberOfTracks) {
+        if (flushSource !== 'VideoSegmentStream' && flushSource !== 'AudioSegmentStream') {
+          // Return because we haven't received a flush from a data-generating
+          // portion of the segment (meaning that we have only recieved meta-data
+          // or captions.)
+          return;
+        } else if (this.remuxTracks) {
+          // Return until we have enough tracks from the pipeline to remux (if we
+          // are remuxing audio and video into a single MP4)
+          return;
+        } else if (this.pendingTracks.length === 0) {
+          // In the case where we receive a flush without any data having been
+          // received we consider it an emitted track for the purposes of coalescing
+          // `done` events.
+          // We do this for the case where there is an audio and video track in the
+          // segment but no audio data. (seen in several playlists with alternate
+          // audio tracks and no audio present in the main TS segments.)
+          this.emittedTracks++;
+          if (this.emittedTracks >= this.numberOfTracks) {
+            this.trigger('done');
+            this.emittedTracks = 0;
+          }
+          return;
+        }
+      }
+      if (this.videoTrack) {
+        timelineStartPts = this.videoTrack.timelineStartInfo.pts;
+        VIDEO_PROPERTIES.forEach(function (prop) {
+          event.info[prop] = this.videoTrack[prop];
+        }, this);
+      } else if (this.audioTrack) {
+        timelineStartPts = this.audioTrack.timelineStartInfo.pts;
+        AUDIO_PROPERTIES.forEach(function (prop) {
+          event.info[prop] = this.audioTrack[prop];
+        }, this);
+      }
+      if (this.videoTrack || this.audioTrack) {
+        if (this.pendingTracks.length === 1) {
+          event.type = this.pendingTracks[0].type;
+        } else {
+          event.type = 'combined';
+        }
+        this.emittedTracks += this.pendingTracks.length;
+        initSegment = mp4.initSegment(this.pendingTracks); // Create a new typed array to hold the init segment
+
+        event.initSegment = new Uint8Array(initSegment.byteLength); // Create an init segment containing a moov
+        // and track definitions
+
+        event.initSegment.set(initSegment); // Create a new typed array to hold the moof+mdats
+
+        event.data = new Uint8Array(this.pendingBytes); // Append each moof+mdat (one per track) together
+
+        for (i = 0; i < this.pendingBoxes.length; i++) {
+          event.data.set(this.pendingBoxes[i], offset);
+          offset += this.pendingBoxes[i].byteLength;
+        } // Translate caption PTS times into second offsets to match the
+        // video timeline for the segment, and add track info
+
+        for (i = 0; i < this.pendingCaptions.length; i++) {
+          caption = this.pendingCaptions[i];
+          caption.startTime = clock.metadataTsToSeconds(caption.startPts, timelineStartPts, this.keepOriginalTimestamps);
+          caption.endTime = clock.metadataTsToSeconds(caption.endPts, timelineStartPts, this.keepOriginalTimestamps);
+          event.captionStreams[caption.stream] = true;
+          event.captions.push(caption);
+        } // Translate ID3 frame PTS times into second offsets to match the
+        // video timeline for the segment
+
+        for (i = 0; i < this.pendingMetadata.length; i++) {
+          id3 = this.pendingMetadata[i];
+          id3.cueTime = clock.metadataTsToSeconds(id3.pts, timelineStartPts, this.keepOriginalTimestamps);
+          event.metadata.push(id3);
+        } // We add this to every single emitted segment even though we only need
+        // it for the first
+
+        event.metadata.dispatchType = this.metadataStream.dispatchType; // Reset stream state
+
+        this.pendingTracks.length = 0;
+        this.videoTrack = null;
+        this.pendingBoxes.length = 0;
+        this.pendingCaptions.length = 0;
+        this.pendingBytes = 0;
+        this.pendingMetadata.length = 0; // Emit the built segment
+        // We include captions and ID3 tags for backwards compatibility,
+        // ideally we should send only video and audio in the data event
+
+        this.trigger('data', event); // Emit each caption to the outside world
+        // Ideally, this would happen immediately on parsing captions,
+        // but we need to ensure that video data is sent back first
+        // so that caption timing can be adjusted to match video timing
+
+        for (i = 0; i < event.captions.length; i++) {
+          caption = event.captions[i];
+          this.trigger('caption', caption);
+        } // Emit each id3 tag to the outside world
+        // Ideally, this would happen immediately on parsing the tag,
+        // but we need to ensure that video data is sent back first
+        // so that ID3 frame timing can be adjusted to match video timing
+
+        for (i = 0; i < event.metadata.length; i++) {
+          id3 = event.metadata[i];
+          this.trigger('id3Frame', id3);
+        }
+      } // Only emit `done` if all tracks have been flushed and emitted
+
+      if (this.emittedTracks >= this.numberOfTracks) {
+        this.trigger('done');
+        this.emittedTracks = 0;
+      }
+    };
+    CoalesceStream.prototype.setRemux = function (val) {
+      this.remuxTracks = val;
+    };
+    /**
+     * A Stream that expects MP2T binary data as input and produces
+     * corresponding media segments, suitable for use with Media Source
+     * Extension (MSE) implementations that support the ISO BMFF byte
+     * stream format, like Chrome.
+     */
+
+    Transmuxer = function (options) {
+      var self = this,
+        hasFlushed = true,
+        videoTrack,
+        audioTrack;
+      Transmuxer.prototype.init.call(this);
+      options = options || {};
+      this.baseMediaDecodeTime = options.baseMediaDecodeTime || 0;
+      this.transmuxPipeline_ = {};
+      this.setupAacPipeline = function () {
+        var pipeline = {};
+        this.transmuxPipeline_ = pipeline;
+        pipeline.type = 'aac';
+        pipeline.metadataStream = new m2ts.MetadataStream(); // set up the parsing pipeline
+
+        pipeline.aacStream = new AacStream();
+        pipeline.audioTimestampRolloverStream = new m2ts.TimestampRolloverStream('audio');
+        pipeline.timedMetadataTimestampRolloverStream = new m2ts.TimestampRolloverStream('timed-metadata');
+        pipeline.adtsStream = new AdtsStream();
+        pipeline.coalesceStream = new CoalesceStream(options, pipeline.metadataStream);
+        pipeline.headOfPipeline = pipeline.aacStream;
+        pipeline.aacStream.pipe(pipeline.audioTimestampRolloverStream).pipe(pipeline.adtsStream);
+        pipeline.aacStream.pipe(pipeline.timedMetadataTimestampRolloverStream).pipe(pipeline.metadataStream).pipe(pipeline.coalesceStream);
+        pipeline.metadataStream.on('timestamp', function (frame) {
+          pipeline.aacStream.setTimestamp(frame.timeStamp);
+        });
+        pipeline.aacStream.on('data', function (data) {
+          if (data.type !== 'timed-metadata' && data.type !== 'audio' || pipeline.audioSegmentStream) {
+            return;
+          }
+          audioTrack = audioTrack || {
+            timelineStartInfo: {
+              baseMediaDecodeTime: self.baseMediaDecodeTime
+            },
+            codec: 'adts',
+            type: 'audio'
+          }; // hook up the audio segment stream to the first track with aac data
+
+          pipeline.coalesceStream.numberOfTracks++;
+          pipeline.audioSegmentStream = new AudioSegmentStream(audioTrack, options);
+          pipeline.audioSegmentStream.on('log', self.getLogTrigger_('audioSegmentStream'));
+          pipeline.audioSegmentStream.on('timingInfo', self.trigger.bind(self, 'audioTimingInfo')); // Set up the final part of the audio pipeline
+
+          pipeline.adtsStream.pipe(pipeline.audioSegmentStream).pipe(pipeline.coalesceStream); // emit pmt info
+
+          self.trigger('trackinfo', {
+            hasAudio: !!audioTrack,
+            hasVideo: !!videoTrack
+          });
+        }); // Re-emit any data coming from the coalesce stream to the outside world
+
+        pipeline.coalesceStream.on('data', this.trigger.bind(this, 'data')); // Let the consumer know we have finished flushing the entire pipeline
+
+        pipeline.coalesceStream.on('done', this.trigger.bind(this, 'done'));
+        addPipelineLogRetriggers(this, pipeline);
+      };
+      this.setupTsPipeline = function () {
+        var pipeline = {};
+        this.transmuxPipeline_ = pipeline;
+        pipeline.type = 'ts';
+        pipeline.metadataStream = new m2ts.MetadataStream(); // set up the parsing pipeline
+
+        pipeline.packetStream = new m2ts.TransportPacketStream();
+        pipeline.parseStream = new m2ts.TransportParseStream();
+        pipeline.elementaryStream = new m2ts.ElementaryStream();
+        pipeline.timestampRolloverStream = new m2ts.TimestampRolloverStream();
+        pipeline.adtsStream = new AdtsStream();
+        pipeline.h264Stream = new H264Stream();
+        pipeline.captionStream = new m2ts.CaptionStream(options);
+        pipeline.coalesceStream = new CoalesceStream(options, pipeline.metadataStream);
+        pipeline.headOfPipeline = pipeline.packetStream; // disassemble MPEG2-TS packets into elementary streams
+
+        pipeline.packetStream.pipe(pipeline.parseStream).pipe(pipeline.elementaryStream).pipe(pipeline.timestampRolloverStream); // !!THIS ORDER IS IMPORTANT!!
+        // demux the streams
+
+        pipeline.timestampRolloverStream.pipe(pipeline.h264Stream);
+        pipeline.timestampRolloverStream.pipe(pipeline.adtsStream);
+        pipeline.timestampRolloverStream.pipe(pipeline.metadataStream).pipe(pipeline.coalesceStream); // Hook up CEA-608/708 caption stream
+
+        pipeline.h264Stream.pipe(pipeline.captionStream).pipe(pipeline.coalesceStream);
+        pipeline.elementaryStream.on('data', function (data) {
+          var i;
+          if (data.type === 'metadata') {
+            i = data.tracks.length; // scan the tracks listed in the metadata
+
+            while (i--) {
+              if (!videoTrack && data.tracks[i].type === 'video') {
+                videoTrack = data.tracks[i];
+                videoTrack.timelineStartInfo.baseMediaDecodeTime = self.baseMediaDecodeTime;
+              } else if (!audioTrack && data.tracks[i].type === 'audio') {
+                audioTrack = data.tracks[i];
+                audioTrack.timelineStartInfo.baseMediaDecodeTime = self.baseMediaDecodeTime;
+              }
+            } // hook up the video segment stream to the first track with h264 data
+
+            if (videoTrack && !pipeline.videoSegmentStream) {
+              pipeline.coalesceStream.numberOfTracks++;
+              pipeline.videoSegmentStream = new VideoSegmentStream(videoTrack, options);
+              pipeline.videoSegmentStream.on('log', self.getLogTrigger_('videoSegmentStream'));
+              pipeline.videoSegmentStream.on('timelineStartInfo', function (timelineStartInfo) {
+                // When video emits timelineStartInfo data after a flush, we forward that
+                // info to the AudioSegmentStream, if it exists, because video timeline
+                // data takes precedence.  Do not do this if keepOriginalTimestamps is set,
+                // because this is a particularly subtle form of timestamp alteration.
+                if (audioTrack && !options.keepOriginalTimestamps) {
+                  audioTrack.timelineStartInfo = timelineStartInfo; // On the first segment we trim AAC frames that exist before the
+                  // very earliest DTS we have seen in video because Chrome will
+                  // interpret any video track with a baseMediaDecodeTime that is
+                  // non-zero as a gap.
+
+                  pipeline.audioSegmentStream.setEarliestDts(timelineStartInfo.dts - self.baseMediaDecodeTime);
+                }
+              });
+              pipeline.videoSegmentStream.on('processedGopsInfo', self.trigger.bind(self, 'gopInfo'));
+              pipeline.videoSegmentStream.on('segmentTimingInfo', self.trigger.bind(self, 'videoSegmentTimingInfo'));
+              pipeline.videoSegmentStream.on('baseMediaDecodeTime', function (baseMediaDecodeTime) {
+                if (audioTrack) {
+                  pipeline.audioSegmentStream.setVideoBaseMediaDecodeTime(baseMediaDecodeTime);
+                }
+              });
+              pipeline.videoSegmentStream.on('timingInfo', self.trigger.bind(self, 'videoTimingInfo')); // Set up the final part of the video pipeline
+
+              pipeline.h264Stream.pipe(pipeline.videoSegmentStream).pipe(pipeline.coalesceStream);
+            }
+            if (audioTrack && !pipeline.audioSegmentStream) {
+              // hook up the audio segment stream to the first track with aac data
+              pipeline.coalesceStream.numberOfTracks++;
+              pipeline.audioSegmentStream = new AudioSegmentStream(audioTrack, options);
+              pipeline.audioSegmentStream.on('log', self.getLogTrigger_('audioSegmentStream'));
+              pipeline.audioSegmentStream.on('timingInfo', self.trigger.bind(self, 'audioTimingInfo'));
+              pipeline.audioSegmentStream.on('segmentTimingInfo', self.trigger.bind(self, 'audioSegmentTimingInfo')); // Set up the final part of the audio pipeline
+
+              pipeline.adtsStream.pipe(pipeline.audioSegmentStream).pipe(pipeline.coalesceStream);
+            } // emit pmt info
+
+            self.trigger('trackinfo', {
+              hasAudio: !!audioTrack,
+              hasVideo: !!videoTrack
+            });
+          }
+        }); // Re-emit any data coming from the coalesce stream to the outside world
+
+        pipeline.coalesceStream.on('data', this.trigger.bind(this, 'data'));
+        pipeline.coalesceStream.on('id3Frame', function (id3Frame) {
+          id3Frame.dispatchType = pipeline.metadataStream.dispatchType;
+          self.trigger('id3Frame', id3Frame);
+        });
+        pipeline.coalesceStream.on('caption', this.trigger.bind(this, 'caption')); // Let the consumer know we have finished flushing the entire pipeline
+
+        pipeline.coalesceStream.on('done', this.trigger.bind(this, 'done'));
+        addPipelineLogRetriggers(this, pipeline);
+      }; // hook up the segment streams once track metadata is delivered
+
+      this.setBaseMediaDecodeTime = function (baseMediaDecodeTime) {
+        var pipeline = this.transmuxPipeline_;
+        if (!options.keepOriginalTimestamps) {
+          this.baseMediaDecodeTime = baseMediaDecodeTime;
+        }
+        if (audioTrack) {
+          audioTrack.timelineStartInfo.dts = undefined;
+          audioTrack.timelineStartInfo.pts = undefined;
+          trackDecodeInfo.clearDtsInfo(audioTrack);
+          if (pipeline.audioTimestampRolloverStream) {
+            pipeline.audioTimestampRolloverStream.discontinuity();
+          }
+        }
+        if (videoTrack) {
+          if (pipeline.videoSegmentStream) {
+            pipeline.videoSegmentStream.gopCache_ = [];
+          }
+          videoTrack.timelineStartInfo.dts = undefined;
+          videoTrack.timelineStartInfo.pts = undefined;
+          trackDecodeInfo.clearDtsInfo(videoTrack);
+          pipeline.captionStream.reset();
+        }
+        if (pipeline.timestampRolloverStream) {
+          pipeline.timestampRolloverStream.discontinuity();
+        }
+      };
+      this.setAudioAppendStart = function (timestamp) {
+        if (audioTrack) {
+          this.transmuxPipeline_.audioSegmentStream.setAudioAppendStart(timestamp);
+        }
+      };
+      this.setRemux = function (val) {
+        var pipeline = this.transmuxPipeline_;
+        options.remux = val;
+        if (pipeline && pipeline.coalesceStream) {
+          pipeline.coalesceStream.setRemux(val);
+        }
+      };
+      this.alignGopsWith = function (gopsToAlignWith) {
+        if (videoTrack && this.transmuxPipeline_.videoSegmentStream) {
+          this.transmuxPipeline_.videoSegmentStream.alignGopsWith(gopsToAlignWith);
+        }
+      };
+      this.getLogTrigger_ = function (key) {
+        var self = this;
+        return function (event) {
+          event.stream = key;
+          self.trigger('log', event);
+        };
+      }; // feed incoming data to the front of the parsing pipeline
+
+      this.push = function (data) {
+        if (hasFlushed) {
+          var isAac = isLikelyAacData(data);
+          if (isAac && this.transmuxPipeline_.type !== 'aac') {
+            this.setupAacPipeline();
+          } else if (!isAac && this.transmuxPipeline_.type !== 'ts') {
+            this.setupTsPipeline();
+          }
+          hasFlushed = false;
+        }
+        this.transmuxPipeline_.headOfPipeline.push(data);
+      }; // flush any buffered data
+
+      this.flush = function () {
+        hasFlushed = true; // Start at the top of the pipeline and flush all pending work
+
+        this.transmuxPipeline_.headOfPipeline.flush();
+      };
+      this.endTimeline = function () {
+        this.transmuxPipeline_.headOfPipeline.endTimeline();
+      };
+      this.reset = function () {
+        if (this.transmuxPipeline_.headOfPipeline) {
+          this.transmuxPipeline_.headOfPipeline.reset();
+        }
+      }; // Caption data has to be reset when seeking outside buffered range
+
+      this.resetCaptions = function () {
+        if (this.transmuxPipeline_.captionStream) {
+          this.transmuxPipeline_.captionStream.reset();
+        }
+      };
+    };
+    Transmuxer.prototype = new Stream();
+    var transmuxer = {
+      Transmuxer: Transmuxer,
+      VideoSegmentStream: VideoSegmentStream,
+      AudioSegmentStream: AudioSegmentStream,
+      AUDIO_PROPERTIES: AUDIO_PROPERTIES,
+      VIDEO_PROPERTIES: VIDEO_PROPERTIES,
+      // exported for testing
+      generateSegmentTimingInfo: generateSegmentTimingInfo
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     */
+
+    var toUnsigned$3 = function (value) {
+      return value >>> 0;
+    };
+    var toHexString$1 = function (value) {
+      return ('00' + value.toString(16)).slice(-2);
+    };
+    var bin = {
+      toUnsigned: toUnsigned$3,
+      toHexString: toHexString$1
+    };
+    var parseType$3 = function (buffer) {
+      var result = '';
+      result += String.fromCharCode(buffer[0]);
+      result += String.fromCharCode(buffer[1]);
+      result += String.fromCharCode(buffer[2]);
+      result += String.fromCharCode(buffer[3]);
+      return result;
+    };
+    var parseType_1 = parseType$3;
+    var toUnsigned$2 = bin.toUnsigned;
+    var parseType$2 = parseType_1;
+    var findBox$2 = function (data, path) {
+      var results = [],
+        i,
+        size,
+        type,
+        end,
+        subresults;
+      if (!path.length) {
+        // short-circuit the search for empty paths
+        return null;
+      }
+      for (i = 0; i < data.byteLength;) {
+        size = toUnsigned$2(data[i] << 24 | data[i + 1] << 16 | data[i + 2] << 8 | data[i + 3]);
+        type = parseType$2(data.subarray(i + 4, i + 8));
+        end = size > 1 ? i + size : data.byteLength;
+        if (type === path[0]) {
+          if (path.length === 1) {
+            // this is the end of the path and we've found the box we were
+            // looking for
+            results.push(data.subarray(i + 8, end));
+          } else {
+            // recursively search for the next box along the path
+            subresults = findBox$2(data.subarray(i + 8, end), path.slice(1));
+            if (subresults.length) {
+              results = results.concat(subresults);
+            }
+          }
+        }
+        i = end;
+      } // we've finished searching all of data
+
+      return results;
+    };
+    var findBox_1 = findBox$2;
+    var toUnsigned$1 = bin.toUnsigned;
+    var getUint64$2 = numbers.getUint64;
+    var tfdt = function (data) {
+      var result = {
+        version: data[0],
+        flags: new Uint8Array(data.subarray(1, 4))
+      };
+      if (result.version === 1) {
+        result.baseMediaDecodeTime = getUint64$2(data.subarray(4));
+      } else {
+        result.baseMediaDecodeTime = toUnsigned$1(data[4] << 24 | data[5] << 16 | data[6] << 8 | data[7]);
+      }
+      return result;
+    };
+    var parseTfdt$2 = tfdt;
+    var parseSampleFlags$1 = function (flags) {
+      return {
+        isLeading: (flags[0] & 0x0c) >>> 2,
+        dependsOn: flags[0] & 0x03,
+        isDependedOn: (flags[1] & 0xc0) >>> 6,
+        hasRedundancy: (flags[1] & 0x30) >>> 4,
+        paddingValue: (flags[1] & 0x0e) >>> 1,
+        isNonSyncSample: flags[1] & 0x01,
+        degradationPriority: flags[2] << 8 | flags[3]
+      };
+    };
+    var parseSampleFlags_1 = parseSampleFlags$1;
+    var parseSampleFlags = parseSampleFlags_1;
+    var trun = function (data) {
+      var result = {
+          version: data[0],
+          flags: new Uint8Array(data.subarray(1, 4)),
+          samples: []
+        },
+        view = new DataView(data.buffer, data.byteOffset, data.byteLength),
+        // Flag interpretation
+        dataOffsetPresent = result.flags[2] & 0x01,
+        // compare with 2nd byte of 0x1
+        firstSampleFlagsPresent = result.flags[2] & 0x04,
+        // compare with 2nd byte of 0x4
+        sampleDurationPresent = result.flags[1] & 0x01,
+        // compare with 2nd byte of 0x100
+        sampleSizePresent = result.flags[1] & 0x02,
+        // compare with 2nd byte of 0x200
+        sampleFlagsPresent = result.flags[1] & 0x04,
+        // compare with 2nd byte of 0x400
+        sampleCompositionTimeOffsetPresent = result.flags[1] & 0x08,
+        // compare with 2nd byte of 0x800
+        sampleCount = view.getUint32(4),
+        offset = 8,
+        sample;
+      if (dataOffsetPresent) {
+        // 32 bit signed integer
+        result.dataOffset = view.getInt32(offset);
+        offset += 4;
+      } // Overrides the flags for the first sample only. The order of
+      // optional values will be: duration, size, compositionTimeOffset
+
+      if (firstSampleFlagsPresent && sampleCount) {
+        sample = {
+          flags: parseSampleFlags(data.subarray(offset, offset + 4))
+        };
+        offset += 4;
+        if (sampleDurationPresent) {
+          sample.duration = view.getUint32(offset);
+          offset += 4;
+        }
+        if (sampleSizePresent) {
+          sample.size = view.getUint32(offset);
+          offset += 4;
+        }
+        if (sampleCompositionTimeOffsetPresent) {
+          if (result.version === 1) {
+            sample.compositionTimeOffset = view.getInt32(offset);
+          } else {
+            sample.compositionTimeOffset = view.getUint32(offset);
+          }
+          offset += 4;
+        }
+        result.samples.push(sample);
+        sampleCount--;
+      }
+      while (sampleCount--) {
+        sample = {};
+        if (sampleDurationPresent) {
+          sample.duration = view.getUint32(offset);
+          offset += 4;
+        }
+        if (sampleSizePresent) {
+          sample.size = view.getUint32(offset);
+          offset += 4;
+        }
+        if (sampleFlagsPresent) {
+          sample.flags = parseSampleFlags(data.subarray(offset, offset + 4));
+          offset += 4;
+        }
+        if (sampleCompositionTimeOffsetPresent) {
+          if (result.version === 1) {
+            sample.compositionTimeOffset = view.getInt32(offset);
+          } else {
+            sample.compositionTimeOffset = view.getUint32(offset);
+          }
+          offset += 4;
+        }
+        result.samples.push(sample);
+      }
+      return result;
+    };
+    var parseTrun$2 = trun;
+    var tfhd = function (data) {
+      var view = new DataView(data.buffer, data.byteOffset, data.byteLength),
+        result = {
+          version: data[0],
+          flags: new Uint8Array(data.subarray(1, 4)),
+          trackId: view.getUint32(4)
+        },
+        baseDataOffsetPresent = result.flags[2] & 0x01,
+        sampleDescriptionIndexPresent = result.flags[2] & 0x02,
+        defaultSampleDurationPresent = result.flags[2] & 0x08,
+        defaultSampleSizePresent = result.flags[2] & 0x10,
+        defaultSampleFlagsPresent = result.flags[2] & 0x20,
+        durationIsEmpty = result.flags[0] & 0x010000,
+        defaultBaseIsMoof = result.flags[0] & 0x020000,
+        i;
+      i = 8;
+      if (baseDataOffsetPresent) {
+        i += 4; // truncate top 4 bytes
+        // FIXME: should we read the full 64 bits?
+
+        result.baseDataOffset = view.getUint32(12);
+        i += 4;
+      }
+      if (sampleDescriptionIndexPresent) {
+        result.sampleDescriptionIndex = view.getUint32(i);
+        i += 4;
+      }
+      if (defaultSampleDurationPresent) {
+        result.defaultSampleDuration = view.getUint32(i);
+        i += 4;
+      }
+      if (defaultSampleSizePresent) {
+        result.defaultSampleSize = view.getUint32(i);
+        i += 4;
+      }
+      if (defaultSampleFlagsPresent) {
+        result.defaultSampleFlags = view.getUint32(i);
+      }
+      if (durationIsEmpty) {
+        result.durationIsEmpty = true;
+      }
+      if (!baseDataOffsetPresent && defaultBaseIsMoof) {
+        result.baseDataOffsetIsMoof = true;
+      }
+      return result;
+    };
+    var parseTfhd$2 = tfhd;
+    var win;
+    if (typeof window !== "undefined") {
+      win = window;
+    } else if (typeof commonjsGlobal !== "undefined") {
+      win = commonjsGlobal;
+    } else if (typeof self !== "undefined") {
+      win = self;
+    } else {
+      win = {};
+    }
+    var window_1 = win;
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Reads in-band CEA-708 captions out of FMP4 segments.
+     * @see https://en.wikipedia.org/wiki/CEA-708
+     */
+
+    var discardEmulationPreventionBytes = captionPacketParser.discardEmulationPreventionBytes;
+    var CaptionStream = captionStream.CaptionStream;
+    var findBox$1 = findBox_1;
+    var parseTfdt$1 = parseTfdt$2;
+    var parseTrun$1 = parseTrun$2;
+    var parseTfhd$1 = parseTfhd$2;
+    var window$2 = window_1;
+    /**
+      * Maps an offset in the mdat to a sample based on the the size of the samples.
+      * Assumes that `parseSamples` has been called first.
+      *
+      * @param {Number} offset - The offset into the mdat
+      * @param {Object[]} samples - An array of samples, parsed using `parseSamples`
+      * @return {?Object} The matching sample, or null if no match was found.
+      *
+      * @see ISO-BMFF-12/2015, Section 8.8.8
+     **/
+
+    var mapToSample = function (offset, samples) {
+      var approximateOffset = offset;
+      for (var i = 0; i < samples.length; i++) {
+        var sample = samples[i];
+        if (approximateOffset < sample.size) {
+          return sample;
+        }
+        approximateOffset -= sample.size;
+      }
+      return null;
+    };
+    /**
+      * Finds SEI nal units contained in a Media Data Box.
+      * Assumes that `parseSamples` has been called first.
+      *
+      * @param {Uint8Array} avcStream - The bytes of the mdat
+      * @param {Object[]} samples - The samples parsed out by `parseSamples`
+      * @param {Number} trackId - The trackId of this video track
+      * @return {Object[]} seiNals - the parsed SEI NALUs found.
+      *   The contents of the seiNal should match what is expected by
+      *   CaptionStream.push (nalUnitType, size, data, escapedRBSP, pts, dts)
+      *
+      * @see ISO-BMFF-12/2015, Section 8.1.1
+      * @see Rec. ITU-T H.264, 7.3.2.3.1
+     **/
+
+    var findSeiNals = function (avcStream, samples, trackId) {
+      var avcView = new DataView(avcStream.buffer, avcStream.byteOffset, avcStream.byteLength),
+        result = {
+          logs: [],
+          seiNals: []
+        },
+        seiNal,
+        i,
+        length,
+        lastMatchedSample;
+      for (i = 0; i + 4 < avcStream.length; i += length) {
+        length = avcView.getUint32(i);
+        i += 4; // Bail if this doesn't appear to be an H264 stream
+
+        if (length <= 0) {
+          continue;
+        }
+        switch (avcStream[i] & 0x1F) {
+          case 0x06:
+            var data = avcStream.subarray(i + 1, i + 1 + length);
+            var matchingSample = mapToSample(i, samples);
+            seiNal = {
+              nalUnitType: 'sei_rbsp',
+              size: length,
+              data: data,
+              escapedRBSP: discardEmulationPreventionBytes(data),
+              trackId: trackId
+            };
+            if (matchingSample) {
+              seiNal.pts = matchingSample.pts;
+              seiNal.dts = matchingSample.dts;
+              lastMatchedSample = matchingSample;
+            } else if (lastMatchedSample) {
+              // If a matching sample cannot be found, use the last
+              // sample's values as they should be as close as possible
+              seiNal.pts = lastMatchedSample.pts;
+              seiNal.dts = lastMatchedSample.dts;
+            } else {
+              result.logs.push({
+                level: 'warn',
+                message: 'We\'ve encountered a nal unit without data at ' + i + ' for trackId ' + trackId + '. See mux.js#223.'
+              });
+              break;
+            }
+            result.seiNals.push(seiNal);
+            break;
+        }
+      }
+      return result;
+    };
+    /**
+      * Parses sample information out of Track Run Boxes and calculates
+      * the absolute presentation and decode timestamps of each sample.
+      *
+      * @param {Array<Uint8Array>} truns - The Trun Run boxes to be parsed
+      * @param {Number|BigInt} baseMediaDecodeTime - base media decode time from tfdt
+          @see ISO-BMFF-12/2015, Section 8.8.12
+      * @param {Object} tfhd - The parsed Track Fragment Header
+      *   @see inspect.parseTfhd
+      * @return {Object[]} the parsed samples
+      *
+      * @see ISO-BMFF-12/2015, Section 8.8.8
+     **/
+
+    var parseSamples = function (truns, baseMediaDecodeTime, tfhd) {
+      var currentDts = baseMediaDecodeTime;
+      var defaultSampleDuration = tfhd.defaultSampleDuration || 0;
+      var defaultSampleSize = tfhd.defaultSampleSize || 0;
+      var trackId = tfhd.trackId;
+      var allSamples = [];
+      truns.forEach(function (trun) {
+        // Note: We currently do not parse the sample table as well
+        // as the trun. It's possible some sources will require this.
+        // moov > trak > mdia > minf > stbl
+        var trackRun = parseTrun$1(trun);
+        var samples = trackRun.samples;
+        samples.forEach(function (sample) {
+          if (sample.duration === undefined) {
+            sample.duration = defaultSampleDuration;
+          }
+          if (sample.size === undefined) {
+            sample.size = defaultSampleSize;
+          }
+          sample.trackId = trackId;
+          sample.dts = currentDts;
+          if (sample.compositionTimeOffset === undefined) {
+            sample.compositionTimeOffset = 0;
+          }
+          if (typeof currentDts === 'bigint') {
+            sample.pts = currentDts + window$2.BigInt(sample.compositionTimeOffset);
+            currentDts += window$2.BigInt(sample.duration);
+          } else {
+            sample.pts = currentDts + sample.compositionTimeOffset;
+            currentDts += sample.duration;
+          }
+        });
+        allSamples = allSamples.concat(samples);
+      });
+      return allSamples;
+    };
+    /**
+      * Parses out caption nals from an FMP4 segment's video tracks.
+      *
+      * @param {Uint8Array} segment - The bytes of a single segment
+      * @param {Number} videoTrackId - The trackId of a video track in the segment
+      * @return {Object.<Number, Object[]>} A mapping of video trackId to
+      *   a list of seiNals found in that track
+     **/
+
+    var parseCaptionNals = function (segment, videoTrackId) {
+      // To get the samples
+      var trafs = findBox$1(segment, ['moof', 'traf']); // To get SEI NAL units
+
+      var mdats = findBox$1(segment, ['mdat']);
+      var captionNals = {};
+      var mdatTrafPairs = []; // Pair up each traf with a mdat as moofs and mdats are in pairs
+
+      mdats.forEach(function (mdat, index) {
+        var matchingTraf = trafs[index];
+        mdatTrafPairs.push({
+          mdat: mdat,
+          traf: matchingTraf
+        });
+      });
+      mdatTrafPairs.forEach(function (pair) {
+        var mdat = pair.mdat;
+        var traf = pair.traf;
+        var tfhd = findBox$1(traf, ['tfhd']); // Exactly 1 tfhd per traf
+
+        var headerInfo = parseTfhd$1(tfhd[0]);
+        var trackId = headerInfo.trackId;
+        var tfdt = findBox$1(traf, ['tfdt']); // Either 0 or 1 tfdt per traf
+
+        var baseMediaDecodeTime = tfdt.length > 0 ? parseTfdt$1(tfdt[0]).baseMediaDecodeTime : 0;
+        var truns = findBox$1(traf, ['trun']);
+        var samples;
+        var result; // Only parse video data for the chosen video track
+
+        if (videoTrackId === trackId && truns.length > 0) {
+          samples = parseSamples(truns, baseMediaDecodeTime, headerInfo);
+          result = findSeiNals(mdat, samples, trackId);
+          if (!captionNals[trackId]) {
+            captionNals[trackId] = {
+              seiNals: [],
+              logs: []
+            };
+          }
+          captionNals[trackId].seiNals = captionNals[trackId].seiNals.concat(result.seiNals);
+          captionNals[trackId].logs = captionNals[trackId].logs.concat(result.logs);
+        }
+      });
+      return captionNals;
+    };
+    /**
+      * Parses out inband captions from an MP4 container and returns
+      * caption objects that can be used by WebVTT and the TextTrack API.
+      * @see https://developer.mozilla.org/en-US/docs/Web/API/VTTCue
+      * @see https://developer.mozilla.org/en-US/docs/Web/API/TextTrack
+      * Assumes that `probe.getVideoTrackIds` and `probe.timescale` have been called first
+      *
+      * @param {Uint8Array} segment - The fmp4 segment containing embedded captions
+      * @param {Number} trackId - The id of the video track to parse
+      * @param {Number} timescale - The timescale for the video track from the init segment
+      *
+      * @return {?Object[]} parsedCaptions - A list of captions or null if no video tracks
+      * @return {Number} parsedCaptions[].startTime - The time to show the caption in seconds
+      * @return {Number} parsedCaptions[].endTime - The time to stop showing the caption in seconds
+      * @return {Object[]} parsedCaptions[].content - A list of individual caption segments
+      * @return {String} parsedCaptions[].content.text - The visible content of the caption segment
+      * @return {Number} parsedCaptions[].content.line - The line height from 1-15 for positioning of the caption segment
+      * @return {Number} parsedCaptions[].content.position - The column indent percentage for cue positioning from 10-80
+     **/
+
+    var parseEmbeddedCaptions = function (segment, trackId, timescale) {
+      var captionNals; // the ISO-BMFF spec says that trackId can't be zero, but there's some broken content out there
+
+      if (trackId === null) {
+        return null;
+      }
+      captionNals = parseCaptionNals(segment, trackId);
+      var trackNals = captionNals[trackId] || {};
+      return {
+        seiNals: trackNals.seiNals,
+        logs: trackNals.logs,
+        timescale: timescale
+      };
+    };
+    /**
+      * Converts SEI NALUs into captions that can be used by video.js
+     **/
+
+    var CaptionParser = function () {
+      var isInitialized = false;
+      var captionStream; // Stores segments seen before trackId and timescale are set
+
+      var segmentCache; // Stores video track ID of the track being parsed
+
+      var trackId; // Stores the timescale of the track being parsed
+
+      var timescale; // Stores captions parsed so far
+
+      var parsedCaptions; // Stores whether we are receiving partial data or not
+
+      var parsingPartial;
+      /**
+        * A method to indicate whether a CaptionParser has been initalized
+        * @returns {Boolean}
+       **/
+
+      this.isInitialized = function () {
+        return isInitialized;
+      };
+      /**
+        * Initializes the underlying CaptionStream, SEI NAL parsing
+        * and management, and caption collection
+       **/
+
+      this.init = function (options) {
+        captionStream = new CaptionStream();
+        isInitialized = true;
+        parsingPartial = options ? options.isPartial : false; // Collect dispatched captions
+
+        captionStream.on('data', function (event) {
+          // Convert to seconds in the source's timescale
+          event.startTime = event.startPts / timescale;
+          event.endTime = event.endPts / timescale;
+          parsedCaptions.captions.push(event);
+          parsedCaptions.captionStreams[event.stream] = true;
+        });
+        captionStream.on('log', function (log) {
+          parsedCaptions.logs.push(log);
+        });
+      };
+      /**
+        * Determines if a new video track will be selected
+        * or if the timescale changed
+        * @return {Boolean}
+       **/
+
+      this.isNewInit = function (videoTrackIds, timescales) {
+        if (videoTrackIds && videoTrackIds.length === 0 || timescales && typeof timescales === 'object' && Object.keys(timescales).length === 0) {
+          return false;
+        }
+        return trackId !== videoTrackIds[0] || timescale !== timescales[trackId];
+      };
+      /**
+        * Parses out SEI captions and interacts with underlying
+        * CaptionStream to return dispatched captions
+        *
+        * @param {Uint8Array} segment - The fmp4 segment containing embedded captions
+        * @param {Number[]} videoTrackIds - A list of video tracks found in the init segment
+        * @param {Object.<Number, Number>} timescales - The timescales found in the init segment
+        * @see parseEmbeddedCaptions
+        * @see m2ts/caption-stream.js
+       **/
+
+      this.parse = function (segment, videoTrackIds, timescales) {
+        var parsedData;
+        if (!this.isInitialized()) {
+          return null; // This is not likely to be a video segment
+        } else if (!videoTrackIds || !timescales) {
+          return null;
+        } else if (this.isNewInit(videoTrackIds, timescales)) {
+          // Use the first video track only as there is no
+          // mechanism to switch to other video tracks
+          trackId = videoTrackIds[0];
+          timescale = timescales[trackId]; // If an init segment has not been seen yet, hold onto segment
+          // data until we have one.
+          // the ISO-BMFF spec says that trackId can't be zero, but there's some broken content out there
+        } else if (trackId === null || !timescale) {
+          segmentCache.push(segment);
+          return null;
+        } // Now that a timescale and trackId is set, parse cached segments
+
+        while (segmentCache.length > 0) {
+          var cachedSegment = segmentCache.shift();
+          this.parse(cachedSegment, videoTrackIds, timescales);
+        }
+        parsedData = parseEmbeddedCaptions(segment, trackId, timescale);
+        if (parsedData && parsedData.logs) {
+          parsedCaptions.logs = parsedCaptions.logs.concat(parsedData.logs);
+        }
+        if (parsedData === null || !parsedData.seiNals) {
+          if (parsedCaptions.logs.length) {
+            return {
+              logs: parsedCaptions.logs,
+              captions: [],
+              captionStreams: []
+            };
+          }
+          return null;
+        }
+        this.pushNals(parsedData.seiNals); // Force the parsed captions to be dispatched
+
+        this.flushStream();
+        return parsedCaptions;
+      };
+      /**
+        * Pushes SEI NALUs onto CaptionStream
+        * @param {Object[]} nals - A list of SEI nals parsed using `parseCaptionNals`
+        * Assumes that `parseCaptionNals` has been called first
+        * @see m2ts/caption-stream.js
+        **/
+
+      this.pushNals = function (nals) {
+        if (!this.isInitialized() || !nals || nals.length === 0) {
+          return null;
+        }
+        nals.forEach(function (nal) {
+          captionStream.push(nal);
+        });
+      };
+      /**
+        * Flushes underlying CaptionStream to dispatch processed, displayable captions
+        * @see m2ts/caption-stream.js
+       **/
+
+      this.flushStream = function () {
+        if (!this.isInitialized()) {
+          return null;
+        }
+        if (!parsingPartial) {
+          captionStream.flush();
+        } else {
+          captionStream.partialFlush();
+        }
+      };
+      /**
+        * Reset caption buckets for new data
+       **/
+
+      this.clearParsedCaptions = function () {
+        parsedCaptions.captions = [];
+        parsedCaptions.captionStreams = {};
+        parsedCaptions.logs = [];
+      };
+      /**
+        * Resets underlying CaptionStream
+        * @see m2ts/caption-stream.js
+       **/
+
+      this.resetCaptionStream = function () {
+        if (!this.isInitialized()) {
+          return null;
+        }
+        captionStream.reset();
+      };
+      /**
+        * Convenience method to clear all captions flushed from the
+        * CaptionStream and still being parsed
+        * @see m2ts/caption-stream.js
+       **/
+
+      this.clearAllCaptions = function () {
+        this.clearParsedCaptions();
+        this.resetCaptionStream();
+      };
+      /**
+        * Reset caption parser
+       **/
+
+      this.reset = function () {
+        segmentCache = [];
+        trackId = null;
+        timescale = null;
+        if (!parsedCaptions) {
+          parsedCaptions = {
+            captions: [],
+            // CC1, CC2, CC3, CC4
+            captionStreams: {},
+            logs: []
+          };
+        } else {
+          this.clearParsedCaptions();
+        }
+        this.resetCaptionStream();
+      };
+      this.reset();
+    };
+    var captionParser = CaptionParser;
+    /**
+     * Returns the first string in the data array ending with a null char '\0'
+     * @param {UInt8} data 
+     * @returns the string with the null char
+     */
+
+    var uint8ToCString$1 = function (data) {
+      var index = 0;
+      var curChar = String.fromCharCode(data[index]);
+      var retString = '';
+      while (curChar !== '\0') {
+        retString += curChar;
+        index++;
+        curChar = String.fromCharCode(data[index]);
+      } // Add nullChar
+
+      retString += curChar;
+      return retString;
+    };
+    var string = {
+      uint8ToCString: uint8ToCString$1
+    };
+    var uint8ToCString = string.uint8ToCString;
+    var getUint64$1 = numbers.getUint64;
+    /**
+     * Based on: ISO/IEC 23009 Section: 5.10.3.3
+     * References:
+     * https://dashif-documents.azurewebsites.net/Events/master/event.html#emsg-format
+     * https://aomediacodec.github.io/id3-emsg/
+     * 
+     * Takes emsg box data as a uint8 array and returns a emsg box object
+     * @param {UInt8Array} boxData data from emsg box
+     * @returns A parsed emsg box object
+     */
+
+    var parseEmsgBox = function (boxData) {
+      // version + flags
+      var offset = 4;
+      var version = boxData[0];
+      var scheme_id_uri, value, timescale, presentation_time, presentation_time_delta, event_duration, id, message_data;
+      if (version === 0) {
+        scheme_id_uri = uint8ToCString(boxData.subarray(offset));
+        offset += scheme_id_uri.length;
+        value = uint8ToCString(boxData.subarray(offset));
+        offset += value.length;
+        var dv = new DataView(boxData.buffer);
+        timescale = dv.getUint32(offset);
+        offset += 4;
+        presentation_time_delta = dv.getUint32(offset);
+        offset += 4;
+        event_duration = dv.getUint32(offset);
+        offset += 4;
+        id = dv.getUint32(offset);
+        offset += 4;
+      } else if (version === 1) {
+        var dv = new DataView(boxData.buffer);
+        timescale = dv.getUint32(offset);
+        offset += 4;
+        presentation_time = getUint64$1(boxData.subarray(offset));
+        offset += 8;
+        event_duration = dv.getUint32(offset);
+        offset += 4;
+        id = dv.getUint32(offset);
+        offset += 4;
+        scheme_id_uri = uint8ToCString(boxData.subarray(offset));
+        offset += scheme_id_uri.length;
+        value = uint8ToCString(boxData.subarray(offset));
+        offset += value.length;
+      }
+      message_data = new Uint8Array(boxData.subarray(offset, boxData.byteLength));
+      var emsgBox = {
+        scheme_id_uri,
+        value,
+        // if timescale is undefined or 0 set to 1 
+        timescale: timescale ? timescale : 1,
+        presentation_time,
+        presentation_time_delta,
+        event_duration,
+        id,
+        message_data
+      };
+      return isValidEmsgBox(version, emsgBox) ? emsgBox : undefined;
+    };
+    /**
+     * Scales a presentation time or time delta with an offset with a provided timescale
+     * @param {number} presentationTime 
+     * @param {number} timescale 
+     * @param {number} timeDelta 
+     * @param {number} offset 
+     * @returns the scaled time as a number
+     */
+
+    var scaleTime = function (presentationTime, timescale, timeDelta, offset) {
+      return presentationTime || presentationTime === 0 ? presentationTime / timescale : offset + timeDelta / timescale;
+    };
+    /**
+     * Checks the emsg box data for validity based on the version
+     * @param {number} version of the emsg box to validate
+     * @param {Object} emsg the emsg data to validate
+     * @returns if the box is valid as a boolean
+     */
+
+    var isValidEmsgBox = function (version, emsg) {
+      var hasScheme = emsg.scheme_id_uri !== '\0';
+      var isValidV0Box = version === 0 && isDefined(emsg.presentation_time_delta) && hasScheme;
+      var isValidV1Box = version === 1 && isDefined(emsg.presentation_time) && hasScheme; // Only valid versions of emsg are 0 and 1
+
+      return !(version > 1) && isValidV0Box || isValidV1Box;
+    }; // Utility function to check if an object is defined
+
+    var isDefined = function (data) {
+      return data !== undefined || data !== null;
+    };
+    var emsg$1 = {
+      parseEmsgBox: parseEmsgBox,
+      scaleTime: scaleTime
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Utilities to detect basic properties and metadata about MP4s.
+     */
+
+    var toUnsigned = bin.toUnsigned;
+    var toHexString = bin.toHexString;
+    var findBox = findBox_1;
+    var parseType$1 = parseType_1;
+    var emsg = emsg$1;
+    var parseTfhd = parseTfhd$2;
+    var parseTrun = parseTrun$2;
+    var parseTfdt = parseTfdt$2;
+    var getUint64 = numbers.getUint64;
+    var timescale, startTime, compositionStartTime, getVideoTrackIds, getTracks, getTimescaleFromMediaHeader, getEmsgID3;
+    var window$1 = window_1;
+    var parseId3Frames = parseId3.parseId3Frames;
+    /**
+     * Parses an MP4 initialization segment and extracts the timescale
+     * values for any declared tracks. Timescale values indicate the
+     * number of clock ticks per second to assume for time-based values
+     * elsewhere in the MP4.
+     *
+     * To determine the start time of an MP4, you need two pieces of
+     * information: the timescale unit and the earliest base media decode
+     * time. Multiple timescales can be specified within an MP4 but the
+     * base media decode time is always expressed in the timescale from
+     * the media header box for the track:
+     * ```
+     * moov > trak > mdia > mdhd.timescale
+     * ```
+     * @param init {Uint8Array} the bytes of the init segment
+     * @return {object} a hash of track ids to timescale values or null if
+     * the init segment is malformed.
+     */
+
+    timescale = function (init) {
+      var result = {},
+        traks = findBox(init, ['moov', 'trak']); // mdhd timescale
+
+      return traks.reduce(function (result, trak) {
+        var tkhd, version, index, id, mdhd;
+        tkhd = findBox(trak, ['tkhd'])[0];
+        if (!tkhd) {
+          return null;
+        }
+        version = tkhd[0];
+        index = version === 0 ? 12 : 20;
+        id = toUnsigned(tkhd[index] << 24 | tkhd[index + 1] << 16 | tkhd[index + 2] << 8 | tkhd[index + 3]);
+        mdhd = findBox(trak, ['mdia', 'mdhd'])[0];
+        if (!mdhd) {
+          return null;
+        }
+        version = mdhd[0];
+        index = version === 0 ? 12 : 20;
+        result[id] = toUnsigned(mdhd[index] << 24 | mdhd[index + 1] << 16 | mdhd[index + 2] << 8 | mdhd[index + 3]);
+        return result;
+      }, result);
+    };
+    /**
+     * Determine the base media decode start time, in seconds, for an MP4
+     * fragment. If multiple fragments are specified, the earliest time is
+     * returned.
+     *
+     * The base media decode time can be parsed from track fragment
+     * metadata:
+     * ```
+     * moof > traf > tfdt.baseMediaDecodeTime
+     * ```
+     * It requires the timescale value from the mdhd to interpret.
+     *
+     * @param timescale {object} a hash of track ids to timescale values.
+     * @return {number} the earliest base media decode start time for the
+     * fragment, in seconds
+     */
+
+    startTime = function (timescale, fragment) {
+      var trafs; // we need info from two childrend of each track fragment box
+
+      trafs = findBox(fragment, ['moof', 'traf']); // determine the start times for each track
+
+      var lowestTime = trafs.reduce(function (acc, traf) {
+        var tfhd = findBox(traf, ['tfhd'])[0]; // get the track id from the tfhd
+
+        var id = toUnsigned(tfhd[4] << 24 | tfhd[5] << 16 | tfhd[6] << 8 | tfhd[7]); // assume a 90kHz clock if no timescale was specified
+
+        var scale = timescale[id] || 90e3; // get the base media decode time from the tfdt
+
+        var tfdt = findBox(traf, ['tfdt'])[0];
+        var dv = new DataView(tfdt.buffer, tfdt.byteOffset, tfdt.byteLength);
+        var baseTime; // version 1 is 64 bit
+
+        if (tfdt[0] === 1) {
+          baseTime = getUint64(tfdt.subarray(4, 12));
+        } else {
+          baseTime = dv.getUint32(4);
+        } // convert base time to seconds if it is a valid number.
+
+        let seconds;
+        if (typeof baseTime === 'bigint') {
+          seconds = baseTime / window$1.BigInt(scale);
+        } else if (typeof baseTime === 'number' && !isNaN(baseTime)) {
+          seconds = baseTime / scale;
+        }
+        if (seconds < Number.MAX_SAFE_INTEGER) {
+          seconds = Number(seconds);
+        }
+        if (seconds < acc) {
+          acc = seconds;
+        }
+        return acc;
+      }, Infinity);
+      return typeof lowestTime === 'bigint' || isFinite(lowestTime) ? lowestTime : 0;
+    };
+    /**
+     * Determine the composition start, in seconds, for an MP4
+     * fragment.
+     *
+     * The composition start time of a fragment can be calculated using the base
+     * media decode time, composition time offset, and timescale, as follows:
+     *
+     * compositionStartTime = (baseMediaDecodeTime + compositionTimeOffset) / timescale
+     *
+     * All of the aforementioned information is contained within a media fragment's
+     * `traf` box, except for timescale info, which comes from the initialization
+     * segment, so a track id (also contained within a `traf`) is also necessary to
+     * associate it with a timescale
+     *
+     *
+     * @param timescales {object} - a hash of track ids to timescale values.
+     * @param fragment {Unit8Array} - the bytes of a media segment
+     * @return {number} the composition start time for the fragment, in seconds
+     **/
+
+    compositionStartTime = function (timescales, fragment) {
+      var trafBoxes = findBox(fragment, ['moof', 'traf']);
+      var baseMediaDecodeTime = 0;
+      var compositionTimeOffset = 0;
+      var trackId;
+      if (trafBoxes && trafBoxes.length) {
+        // The spec states that track run samples contained within a `traf` box are contiguous, but
+        // it does not explicitly state whether the `traf` boxes themselves are contiguous.
+        // We will assume that they are, so we only need the first to calculate start time.
+        var tfhd = findBox(trafBoxes[0], ['tfhd'])[0];
+        var trun = findBox(trafBoxes[0], ['trun'])[0];
+        var tfdt = findBox(trafBoxes[0], ['tfdt'])[0];
+        if (tfhd) {
+          var parsedTfhd = parseTfhd(tfhd);
+          trackId = parsedTfhd.trackId;
+        }
+        if (tfdt) {
+          var parsedTfdt = parseTfdt(tfdt);
+          baseMediaDecodeTime = parsedTfdt.baseMediaDecodeTime;
+        }
+        if (trun) {
+          var parsedTrun = parseTrun(trun);
+          if (parsedTrun.samples && parsedTrun.samples.length) {
+            compositionTimeOffset = parsedTrun.samples[0].compositionTimeOffset || 0;
+          }
+        }
+      } // Get timescale for this specific track. Assume a 90kHz clock if no timescale was
+      // specified.
+
+      var timescale = timescales[trackId] || 90e3; // return the composition start time, in seconds
+
+      if (typeof baseMediaDecodeTime === 'bigint') {
+        compositionTimeOffset = window$1.BigInt(compositionTimeOffset);
+        timescale = window$1.BigInt(timescale);
+      }
+      var result = (baseMediaDecodeTime + compositionTimeOffset) / timescale;
+      if (typeof result === 'bigint' && result < Number.MAX_SAFE_INTEGER) {
+        result = Number(result);
+      }
+      return result;
+    };
+    /**
+      * Find the trackIds of the video tracks in this source.
+      * Found by parsing the Handler Reference and Track Header Boxes:
+      *   moov > trak > mdia > hdlr
+      *   moov > trak > tkhd
+      *
+      * @param {Uint8Array} init - The bytes of the init segment for this source
+      * @return {Number[]} A list of trackIds
+      *
+      * @see ISO-BMFF-12/2015, Section 8.4.3
+     **/
+
+    getVideoTrackIds = function (init) {
+      var traks = findBox(init, ['moov', 'trak']);
+      var videoTrackIds = [];
+      traks.forEach(function (trak) {
+        var hdlrs = findBox(trak, ['mdia', 'hdlr']);
+        var tkhds = findBox(trak, ['tkhd']);
+        hdlrs.forEach(function (hdlr, index) {
+          var handlerType = parseType$1(hdlr.subarray(8, 12));
+          var tkhd = tkhds[index];
+          var view;
+          var version;
+          var trackId;
+          if (handlerType === 'vide') {
+            view = new DataView(tkhd.buffer, tkhd.byteOffset, tkhd.byteLength);
+            version = view.getUint8(0);
+            trackId = version === 0 ? view.getUint32(12) : view.getUint32(20);
+            videoTrackIds.push(trackId);
+          }
+        });
+      });
+      return videoTrackIds;
+    };
+    getTimescaleFromMediaHeader = function (mdhd) {
+      // mdhd is a FullBox, meaning it will have its own version as the first byte
+      var version = mdhd[0];
+      var index = version === 0 ? 12 : 20;
+      return toUnsigned(mdhd[index] << 24 | mdhd[index + 1] << 16 | mdhd[index + 2] << 8 | mdhd[index + 3]);
+    };
+    /**
+     * Get all the video, audio, and hint tracks from a non fragmented
+     * mp4 segment
+     */
+
+    getTracks = function (init) {
+      var traks = findBox(init, ['moov', 'trak']);
+      var tracks = [];
+      traks.forEach(function (trak) {
+        var track = {};
+        var tkhd = findBox(trak, ['tkhd'])[0];
+        var view, tkhdVersion; // id
+
+        if (tkhd) {
+          view = new DataView(tkhd.buffer, tkhd.byteOffset, tkhd.byteLength);
+          tkhdVersion = view.getUint8(0);
+          track.id = tkhdVersion === 0 ? view.getUint32(12) : view.getUint32(20);
+        }
+        var hdlr = findBox(trak, ['mdia', 'hdlr'])[0]; // type
+
+        if (hdlr) {
+          var type = parseType$1(hdlr.subarray(8, 12));
+          if (type === 'vide') {
+            track.type = 'video';
+          } else if (type === 'soun') {
+            track.type = 'audio';
+          } else {
+            track.type = type;
+          }
+        } // codec
+
+        var stsd = findBox(trak, ['mdia', 'minf', 'stbl', 'stsd'])[0];
+        if (stsd) {
+          var sampleDescriptions = stsd.subarray(8); // gives the codec type string
+
+          track.codec = parseType$1(sampleDescriptions.subarray(4, 8));
+          var codecBox = findBox(sampleDescriptions, [track.codec])[0];
+          var codecConfig, codecConfigType;
+          if (codecBox) {
+            // https://tools.ietf.org/html/rfc6381#section-3.3
+            if (/^[asm]vc[1-9]$/i.test(track.codec)) {
+              // we don't need anything but the "config" parameter of the
+              // avc1 codecBox
+              codecConfig = codecBox.subarray(78);
+              codecConfigType = parseType$1(codecConfig.subarray(4, 8));
+              if (codecConfigType === 'avcC' && codecConfig.length > 11) {
+                track.codec += '.'; // left padded with zeroes for single digit hex
+                // profile idc
+
+                track.codec += toHexString(codecConfig[9]); // the byte containing the constraint_set flags
+
+                track.codec += toHexString(codecConfig[10]); // level idc
+
+                track.codec += toHexString(codecConfig[11]);
+              } else {
+                // TODO: show a warning that we couldn't parse the codec
+                // and are using the default
+                track.codec = 'avc1.4d400d';
+              }
+            } else if (/^mp4[a,v]$/i.test(track.codec)) {
+              // we do not need anything but the streamDescriptor of the mp4a codecBox
+              codecConfig = codecBox.subarray(28);
+              codecConfigType = parseType$1(codecConfig.subarray(4, 8));
+              if (codecConfigType === 'esds' && codecConfig.length > 20 && codecConfig[19] !== 0) {
+                track.codec += '.' + toHexString(codecConfig[19]); // this value is only a single digit
+
+                track.codec += '.' + toHexString(codecConfig[20] >>> 2 & 0x3f).replace(/^0/, '');
+              } else {
+                // TODO: show a warning that we couldn't parse the codec
+                // and are using the default
+                track.codec = 'mp4a.40.2';
+              }
+            } else {
+              // flac, opus, etc
+              track.codec = track.codec.toLowerCase();
+            }
+          }
+        }
+        var mdhd = findBox(trak, ['mdia', 'mdhd'])[0];
+        if (mdhd) {
+          track.timescale = getTimescaleFromMediaHeader(mdhd);
+        }
+        tracks.push(track);
+      });
+      return tracks;
+    };
+    /**
+     * Returns an array of emsg ID3 data from the provided segmentData.
+     * An offset can also be provided as the Latest Arrival Time to calculate 
+     * the Event Start Time of v0 EMSG boxes. 
+     * See: https://dashif-documents.azurewebsites.net/Events/master/event.html#Inband-event-timing
+     * 
+     * @param {Uint8Array} segmentData the segment byte array.
+     * @param {number} offset the segment start time or Latest Arrival Time, 
+     * @return {Object[]} an array of ID3 parsed from EMSG boxes
+     */
+
+    getEmsgID3 = function (segmentData, offset = 0) {
+      var emsgBoxes = findBox(segmentData, ['emsg']);
+      return emsgBoxes.map(data => {
+        var parsedBox = emsg.parseEmsgBox(new Uint8Array(data));
+        var parsedId3Frames = parseId3Frames(parsedBox.message_data);
+        return {
+          cueTime: emsg.scaleTime(parsedBox.presentation_time, parsedBox.timescale, parsedBox.presentation_time_delta, offset),
+          duration: emsg.scaleTime(parsedBox.event_duration, parsedBox.timescale),
+          frames: parsedId3Frames
+        };
+      });
+    };
+    var probe$2 = {
+      // export mp4 inspector's findBox and parseType for backwards compatibility
+      findBox: findBox,
+      parseType: parseType$1,
+      timescale: timescale,
+      startTime: startTime,
+      compositionStartTime: compositionStartTime,
+      videoTrackIds: getVideoTrackIds,
+      tracks: getTracks,
+      getTimescaleFromMediaHeader: getTimescaleFromMediaHeader,
+      getEmsgID3: getEmsgID3
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Utilities to detect basic properties and metadata about TS Segments.
+     */
+
+    var StreamTypes$1 = streamTypes;
+    var parsePid = function (packet) {
+      var pid = packet[1] & 0x1f;
+      pid <<= 8;
+      pid |= packet[2];
+      return pid;
+    };
+    var parsePayloadUnitStartIndicator = function (packet) {
+      return !!(packet[1] & 0x40);
+    };
+    var parseAdaptionField = function (packet) {
+      var offset = 0; // if an adaption field is present, its length is specified by the
+      // fifth byte of the TS packet header. The adaptation field is
+      // used to add stuffing to PES packets that don't fill a complete
+      // TS packet, and to specify some forms of timing and control data
+      // that we do not currently use.
+
+      if ((packet[3] & 0x30) >>> 4 > 0x01) {
+        offset += packet[4] + 1;
+      }
+      return offset;
+    };
+    var parseType = function (packet, pmtPid) {
+      var pid = parsePid(packet);
+      if (pid === 0) {
+        return 'pat';
+      } else if (pid === pmtPid) {
+        return 'pmt';
+      } else if (pmtPid) {
+        return 'pes';
+      }
+      return null;
+    };
+    var parsePat = function (packet) {
+      var pusi = parsePayloadUnitStartIndicator(packet);
+      var offset = 4 + parseAdaptionField(packet);
+      if (pusi) {
+        offset += packet[offset] + 1;
+      }
+      return (packet[offset + 10] & 0x1f) << 8 | packet[offset + 11];
+    };
+    var parsePmt = function (packet) {
+      var programMapTable = {};
+      var pusi = parsePayloadUnitStartIndicator(packet);
+      var payloadOffset = 4 + parseAdaptionField(packet);
+      if (pusi) {
+        payloadOffset += packet[payloadOffset] + 1;
+      } // PMTs can be sent ahead of the time when they should actually
+      // take effect. We don't believe this should ever be the case
+      // for HLS but we'll ignore "forward" PMT declarations if we see
+      // them. Future PMT declarations have the current_next_indicator
+      // set to zero.
+
+      if (!(packet[payloadOffset + 5] & 0x01)) {
+        return;
+      }
+      var sectionLength, tableEnd, programInfoLength; // the mapping table ends at the end of the current section
+
+      sectionLength = (packet[payloadOffset + 1] & 0x0f) << 8 | packet[payloadOffset + 2];
+      tableEnd = 3 + sectionLength - 4; // to determine where the table is, we have to figure out how
+      // long the program info descriptors are
+
+      programInfoLength = (packet[payloadOffset + 10] & 0x0f) << 8 | packet[payloadOffset + 11]; // advance the offset to the first entry in the mapping table
+
+      var offset = 12 + programInfoLength;
+      while (offset < tableEnd) {
+        var i = payloadOffset + offset; // add an entry that maps the elementary_pid to the stream_type
+
+        programMapTable[(packet[i + 1] & 0x1F) << 8 | packet[i + 2]] = packet[i]; // move to the next table entry
+        // skip past the elementary stream descriptors, if present
+
+        offset += ((packet[i + 3] & 0x0F) << 8 | packet[i + 4]) + 5;
+      }
+      return programMapTable;
+    };
+    var parsePesType = function (packet, programMapTable) {
+      var pid = parsePid(packet);
+      var type = programMapTable[pid];
+      switch (type) {
+        case StreamTypes$1.H264_STREAM_TYPE:
+          return 'video';
+        case StreamTypes$1.ADTS_STREAM_TYPE:
+          return 'audio';
+        case StreamTypes$1.METADATA_STREAM_TYPE:
+          return 'timed-metadata';
+        default:
+          return null;
+      }
+    };
+    var parsePesTime = function (packet) {
+      var pusi = parsePayloadUnitStartIndicator(packet);
+      if (!pusi) {
+        return null;
+      }
+      var offset = 4 + parseAdaptionField(packet);
+      if (offset >= packet.byteLength) {
+        // From the H 222.0 MPEG-TS spec
+        // "For transport stream packets carrying PES packets, stuffing is needed when there
+        //  is insufficient PES packet data to completely fill the transport stream packet
+        //  payload bytes. Stuffing is accomplished by defining an adaptation field longer than
+        //  the sum of the lengths of the data elements in it, so that the payload bytes
+        //  remaining after the adaptation field exactly accommodates the available PES packet
+        //  data."
+        //
+        // If the offset is >= the length of the packet, then the packet contains no data
+        // and instead is just adaption field stuffing bytes
+        return null;
+      }
+      var pes = null;
+      var ptsDtsFlags; // PES packets may be annotated with a PTS value, or a PTS value
+      // and a DTS value. Determine what combination of values is
+      // available to work with.
+
+      ptsDtsFlags = packet[offset + 7]; // PTS and DTS are normally stored as a 33-bit number.  Javascript
+      // performs all bitwise operations on 32-bit integers but javascript
+      // supports a much greater range (52-bits) of integer using standard
+      // mathematical operations.
+      // We construct a 31-bit value using bitwise operators over the 31
+      // most significant bits and then multiply by 4 (equal to a left-shift
+      // of 2) before we add the final 2 least significant bits of the
+      // timestamp (equal to an OR.)
+
+      if (ptsDtsFlags & 0xC0) {
+        pes = {}; // the PTS and DTS are not written out directly. For information
+        // on how they are encoded, see
+        // http://dvd.sourceforge.net/dvdinfo/pes-hdr.html
+
+        pes.pts = (packet[offset + 9] & 0x0E) << 27 | (packet[offset + 10] & 0xFF) << 20 | (packet[offset + 11] & 0xFE) << 12 | (packet[offset + 12] & 0xFF) << 5 | (packet[offset + 13] & 0xFE) >>> 3;
+        pes.pts *= 4; // Left shift by 2
+
+        pes.pts += (packet[offset + 13] & 0x06) >>> 1; // OR by the two LSBs
+
+        pes.dts = pes.pts;
+        if (ptsDtsFlags & 0x40) {
+          pes.dts = (packet[offset + 14] & 0x0E) << 27 | (packet[offset + 15] & 0xFF) << 20 | (packet[offset + 16] & 0xFE) << 12 | (packet[offset + 17] & 0xFF) << 5 | (packet[offset + 18] & 0xFE) >>> 3;
+          pes.dts *= 4; // Left shift by 2
+
+          pes.dts += (packet[offset + 18] & 0x06) >>> 1; // OR by the two LSBs
+        }
+      }
+
+      return pes;
+    };
+    var parseNalUnitType = function (type) {
+      switch (type) {
+        case 0x05:
+          return 'slice_layer_without_partitioning_rbsp_idr';
+        case 0x06:
+          return 'sei_rbsp';
+        case 0x07:
+          return 'seq_parameter_set_rbsp';
+        case 0x08:
+          return 'pic_parameter_set_rbsp';
+        case 0x09:
+          return 'access_unit_delimiter_rbsp';
+        default:
+          return null;
+      }
+    };
+    var videoPacketContainsKeyFrame = function (packet) {
+      var offset = 4 + parseAdaptionField(packet);
+      var frameBuffer = packet.subarray(offset);
+      var frameI = 0;
+      var frameSyncPoint = 0;
+      var foundKeyFrame = false;
+      var nalType; // advance the sync point to a NAL start, if necessary
+
+      for (; frameSyncPoint < frameBuffer.byteLength - 3; frameSyncPoint++) {
+        if (frameBuffer[frameSyncPoint + 2] === 1) {
+          // the sync point is properly aligned
+          frameI = frameSyncPoint + 5;
+          break;
+        }
+      }
+      while (frameI < frameBuffer.byteLength) {
+        // look at the current byte to determine if we've hit the end of
+        // a NAL unit boundary
+        switch (frameBuffer[frameI]) {
+          case 0:
+            // skip past non-sync sequences
+            if (frameBuffer[frameI - 1] !== 0) {
+              frameI += 2;
+              break;
+            } else if (frameBuffer[frameI - 2] !== 0) {
+              frameI++;
+              break;
+            }
+            if (frameSyncPoint + 3 !== frameI - 2) {
+              nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+              if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+                foundKeyFrame = true;
+              }
+            } // drop trailing zeroes
+
+            do {
+              frameI++;
+            } while (frameBuffer[frameI] !== 1 && frameI < frameBuffer.length);
+            frameSyncPoint = frameI - 2;
+            frameI += 3;
+            break;
+          case 1:
+            // skip past non-sync sequences
+            if (frameBuffer[frameI - 1] !== 0 || frameBuffer[frameI - 2] !== 0) {
+              frameI += 3;
+              break;
+            }
+            nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+            if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+              foundKeyFrame = true;
+            }
+            frameSyncPoint = frameI - 2;
+            frameI += 3;
+            break;
+          default:
+            // the current byte isn't a one or zero, so it cannot be part
+            // of a sync sequence
+            frameI += 3;
+            break;
+        }
+      }
+      frameBuffer = frameBuffer.subarray(frameSyncPoint);
+      frameI -= frameSyncPoint;
+      frameSyncPoint = 0; // parse the final nal
+
+      if (frameBuffer && frameBuffer.byteLength > 3) {
+        nalType = parseNalUnitType(frameBuffer[frameSyncPoint + 3] & 0x1f);
+        if (nalType === 'slice_layer_without_partitioning_rbsp_idr') {
+          foundKeyFrame = true;
+        }
+      }
+      return foundKeyFrame;
+    };
+    var probe$1 = {
+      parseType: parseType,
+      parsePat: parsePat,
+      parsePmt: parsePmt,
+      parsePayloadUnitStartIndicator: parsePayloadUnitStartIndicator,
+      parsePesType: parsePesType,
+      parsePesTime: parsePesTime,
+      videoPacketContainsKeyFrame: videoPacketContainsKeyFrame
+    };
+    /**
+     * mux.js
+     *
+     * Copyright (c) Brightcove
+     * Licensed Apache-2.0 https://github.com/videojs/mux.js/blob/master/LICENSE
+     *
+     * Parse mpeg2 transport stream packets to extract basic timing information
+     */
+
+    var StreamTypes = streamTypes;
+    var handleRollover = timestampRolloverStream.handleRollover;
+    var probe = {};
+    probe.ts = probe$1;
+    probe.aac = utils;
+    var ONE_SECOND_IN_TS = clock$2.ONE_SECOND_IN_TS;
+    var MP2T_PACKET_LENGTH = 188,
+      // bytes
+      SYNC_BYTE = 0x47;
+    /**
+     * walks through segment data looking for pat and pmt packets to parse out
+     * program map table information
+     */
+
+    var parsePsi_ = function (bytes, pmt) {
+      var startIndex = 0,
+        endIndex = MP2T_PACKET_LENGTH,
+        packet,
+        type;
+      while (endIndex < bytes.byteLength) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pat':
+              pmt.pid = probe.ts.parsePat(packet);
+              break;
+            case 'pmt':
+              var table = probe.ts.parsePmt(packet);
+              pmt.table = pmt.table || {};
+              Object.keys(table).forEach(function (key) {
+                pmt.table[key] = table[key];
+              });
+              break;
+          }
+          startIndex += MP2T_PACKET_LENGTH;
+          endIndex += MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex++;
+        endIndex++;
+      }
+    };
+    /**
+     * walks through the segment data from the start and end to get timing information
+     * for the first and last audio pes packets
+     */
+
+    var parseAudioPes_ = function (bytes, pmt, result) {
+      var startIndex = 0,
+        endIndex = MP2T_PACKET_LENGTH,
+        packet,
+        type,
+        pesType,
+        pusi,
+        parsed;
+      var endLoop = false; // Start walking from start of segment to get first audio packet
+
+      while (endIndex <= bytes.byteLength) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && (bytes[endIndex] === SYNC_BYTE || endIndex === bytes.byteLength)) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pes':
+              pesType = probe.ts.parsePesType(packet, pmt.table);
+              pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+              if (pesType === 'audio' && pusi) {
+                parsed = probe.ts.parsePesTime(packet);
+                if (parsed) {
+                  parsed.type = 'audio';
+                  result.audio.push(parsed);
+                  endLoop = true;
+                }
+              }
+              break;
+          }
+          if (endLoop) {
+            break;
+          }
+          startIndex += MP2T_PACKET_LENGTH;
+          endIndex += MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex++;
+        endIndex++;
+      } // Start walking from end of segment to get last audio packet
+
+      endIndex = bytes.byteLength;
+      startIndex = endIndex - MP2T_PACKET_LENGTH;
+      endLoop = false;
+      while (startIndex >= 0) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && (bytes[endIndex] === SYNC_BYTE || endIndex === bytes.byteLength)) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pes':
+              pesType = probe.ts.parsePesType(packet, pmt.table);
+              pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+              if (pesType === 'audio' && pusi) {
+                parsed = probe.ts.parsePesTime(packet);
+                if (parsed) {
+                  parsed.type = 'audio';
+                  result.audio.push(parsed);
+                  endLoop = true;
+                }
+              }
+              break;
+          }
+          if (endLoop) {
+            break;
+          }
+          startIndex -= MP2T_PACKET_LENGTH;
+          endIndex -= MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex--;
+        endIndex--;
+      }
+    };
+    /**
+     * walks through the segment data from the start and end to get timing information
+     * for the first and last video pes packets as well as timing information for the first
+     * key frame.
+     */
+
+    var parseVideoPes_ = function (bytes, pmt, result) {
+      var startIndex = 0,
+        endIndex = MP2T_PACKET_LENGTH,
+        packet,
+        type,
+        pesType,
+        pusi,
+        parsed,
+        frame,
+        i,
+        pes;
+      var endLoop = false;
+      var currentFrame = {
+        data: [],
+        size: 0
+      }; // Start walking from start of segment to get first video packet
+
+      while (endIndex < bytes.byteLength) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pes':
+              pesType = probe.ts.parsePesType(packet, pmt.table);
+              pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+              if (pesType === 'video') {
+                if (pusi && !endLoop) {
+                  parsed = probe.ts.parsePesTime(packet);
+                  if (parsed) {
+                    parsed.type = 'video';
+                    result.video.push(parsed);
+                    endLoop = true;
+                  }
+                }
+                if (!result.firstKeyFrame) {
+                  if (pusi) {
+                    if (currentFrame.size !== 0) {
+                      frame = new Uint8Array(currentFrame.size);
+                      i = 0;
+                      while (currentFrame.data.length) {
+                        pes = currentFrame.data.shift();
+                        frame.set(pes, i);
+                        i += pes.byteLength;
+                      }
+                      if (probe.ts.videoPacketContainsKeyFrame(frame)) {
+                        var firstKeyFrame = probe.ts.parsePesTime(frame); // PTS/DTS may not be available. Simply *not* setting
+                        // the keyframe seems to work fine with HLS playback
+                        // and definitely preferable to a crash with TypeError...
+
+                        if (firstKeyFrame) {
+                          result.firstKeyFrame = firstKeyFrame;
+                          result.firstKeyFrame.type = 'video';
+                        } else {
+                          // eslint-disable-next-line
+                          console.warn('Failed to extract PTS/DTS from PES at first keyframe. ' + 'This could be an unusual TS segment, or else mux.js did not ' + 'parse your TS segment correctly. If you know your TS ' + 'segments do contain PTS/DTS on keyframes please file a bug ' + 'report! You can try ffprobe to double check for yourself.');
+                        }
+                      }
+                      currentFrame.size = 0;
+                    }
+                  }
+                  currentFrame.data.push(packet);
+                  currentFrame.size += packet.byteLength;
+                }
+              }
+              break;
+          }
+          if (endLoop && result.firstKeyFrame) {
+            break;
+          }
+          startIndex += MP2T_PACKET_LENGTH;
+          endIndex += MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex++;
+        endIndex++;
+      } // Start walking from end of segment to get last video packet
+
+      endIndex = bytes.byteLength;
+      startIndex = endIndex - MP2T_PACKET_LENGTH;
+      endLoop = false;
+      while (startIndex >= 0) {
+        // Look for a pair of start and end sync bytes in the data..
+        if (bytes[startIndex] === SYNC_BYTE && bytes[endIndex] === SYNC_BYTE) {
+          // We found a packet
+          packet = bytes.subarray(startIndex, endIndex);
+          type = probe.ts.parseType(packet, pmt.pid);
+          switch (type) {
+            case 'pes':
+              pesType = probe.ts.parsePesType(packet, pmt.table);
+              pusi = probe.ts.parsePayloadUnitStartIndicator(packet);
+              if (pesType === 'video' && pusi) {
+                parsed = probe.ts.parsePesTime(packet);
+                if (parsed) {
+                  parsed.type = 'video';
+                  result.video.push(parsed);
+                  endLoop = true;
+                }
+              }
+              break;
+          }
+          if (endLoop) {
+            break;
+          }
+          startIndex -= MP2T_PACKET_LENGTH;
+          endIndex -= MP2T_PACKET_LENGTH;
+          continue;
+        } // If we get here, we have somehow become de-synchronized and we need to step
+        // forward one byte at a time until we find a pair of sync bytes that denote
+        // a packet
+
+        startIndex--;
+        endIndex--;
+      }
+    };
+    /**
+     * Adjusts the timestamp information for the segment to account for
+     * rollover and convert to seconds based on pes packet timescale (90khz clock)
+     */
+
+    var adjustTimestamp_ = function (segmentInfo, baseTimestamp) {
+      if (segmentInfo.audio && segmentInfo.audio.length) {
+        var audioBaseTimestamp = baseTimestamp;
+        if (typeof audioBaseTimestamp === 'undefined' || isNaN(audioBaseTimestamp)) {
+          audioBaseTimestamp = segmentInfo.audio[0].dts;
+        }
+        segmentInfo.audio.forEach(function (info) {
+          info.dts = handleRollover(info.dts, audioBaseTimestamp);
+          info.pts = handleRollover(info.pts, audioBaseTimestamp); // time in seconds
+
+          info.dtsTime = info.dts / ONE_SECOND_IN_TS;
+          info.ptsTime = info.pts / ONE_SECOND_IN_TS;
+        });
+      }
+      if (segmentInfo.video && segmentInfo.video.length) {
+        var videoBaseTimestamp = baseTimestamp;
+        if (typeof videoBaseTimestamp === 'undefined' || isNaN(videoBaseTimestamp)) {
+          videoBaseTimestamp = segmentInfo.video[0].dts;
+        }
+        segmentInfo.video.forEach(function (info) {
+          info.dts = handleRollover(info.dts, videoBaseTimestamp);
+          info.pts = handleRollover(info.pts, videoBaseTimestamp); // time in seconds
+
+          info.dtsTime = info.dts / ONE_SECOND_IN_TS;
+          info.ptsTime = info.pts / ONE_SECOND_IN_TS;
+        });
+        if (segmentInfo.firstKeyFrame) {
+          var frame = segmentInfo.firstKeyFrame;
+          frame.dts = handleRollover(frame.dts, videoBaseTimestamp);
+          frame.pts = handleRollover(frame.pts, videoBaseTimestamp); // time in seconds
+
+          frame.dtsTime = frame.dts / ONE_SECOND_IN_TS;
+          frame.ptsTime = frame.pts / ONE_SECOND_IN_TS;
+        }
+      }
+    };
+    /**
+     * inspects the aac data stream for start and end time information
+     */
+
+    var inspectAac_ = function (bytes) {
+      var endLoop = false,
+        audioCount = 0,
+        sampleRate = null,
+        timestamp = null,
+        frameSize = 0,
+        byteIndex = 0,
+        packet;
+      while (bytes.length - byteIndex >= 3) {
+        var type = probe.aac.parseType(bytes, byteIndex);
+        switch (type) {
+          case 'timed-metadata':
+            // Exit early because we don't have enough to parse
+            // the ID3 tag header
+            if (bytes.length - byteIndex < 10) {
+              endLoop = true;
+              break;
+            }
+            frameSize = probe.aac.parseId3TagSize(bytes, byteIndex); // Exit early if we don't have enough in the buffer
+            // to emit a full packet
+
+            if (frameSize > bytes.length) {
+              endLoop = true;
+              break;
+            }
+            if (timestamp === null) {
+              packet = bytes.subarray(byteIndex, byteIndex + frameSize);
+              timestamp = probe.aac.parseAacTimestamp(packet);
+            }
+            byteIndex += frameSize;
+            break;
+          case 'audio':
+            // Exit early because we don't have enough to parse
+            // the ADTS frame header
+            if (bytes.length - byteIndex < 7) {
+              endLoop = true;
+              break;
+            }
+            frameSize = probe.aac.parseAdtsSize(bytes, byteIndex); // Exit early if we don't have enough in the buffer
+            // to emit a full packet
+
+            if (frameSize > bytes.length) {
+              endLoop = true;
+              break;
+            }
+            if (sampleRate === null) {
+              packet = bytes.subarray(byteIndex, byteIndex + frameSize);
+              sampleRate = probe.aac.parseSampleRate(packet);
+            }
+            audioCount++;
+            byteIndex += frameSize;
+            break;
+          default:
+            byteIndex++;
+            break;
+        }
+        if (endLoop) {
+          return null;
+        }
+      }
+      if (sampleRate === null || timestamp === null) {
+        return null;
+      }
+      var audioTimescale = ONE_SECOND_IN_TS / sampleRate;
+      var result = {
+        audio: [{
+          type: 'audio',
+          dts: timestamp,
+          pts: timestamp
+        }, {
+          type: 'audio',
+          dts: timestamp + audioCount * 1024 * audioTimescale,
+          pts: timestamp + audioCount * 1024 * audioTimescale
+        }]
+      };
+      return result;
+    };
+    /**
+     * inspects the transport stream segment data for start and end time information
+     * of the audio and video tracks (when present) as well as the first key frame's
+     * start time.
+     */
+
+    var inspectTs_ = function (bytes) {
+      var pmt = {
+        pid: null,
+        table: null
+      };
+      var result = {};
+      parsePsi_(bytes, pmt);
+      for (var pid in pmt.table) {
+        if (pmt.table.hasOwnProperty(pid)) {
+          var type = pmt.table[pid];
+          switch (type) {
+            case StreamTypes.H264_STREAM_TYPE:
+              result.video = [];
+              parseVideoPes_(bytes, pmt, result);
+              if (result.video.length === 0) {
+                delete result.video;
+              }
+              break;
+            case StreamTypes.ADTS_STREAM_TYPE:
+              result.audio = [];
+              parseAudioPes_(bytes, pmt, result);
+              if (result.audio.length === 0) {
+                delete result.audio;
+              }
+              break;
+          }
+        }
+      }
+      return result;
+    };
+    /**
+     * Inspects segment byte data and returns an object with start and end timing information
+     *
+     * @param {Uint8Array} bytes The segment byte data
+     * @param {Number} baseTimestamp Relative reference timestamp used when adjusting frame
+     *  timestamps for rollover. This value must be in 90khz clock.
+     * @return {Object} Object containing start and end frame timing info of segment.
+     */
+
+    var inspect = function (bytes, baseTimestamp) {
+      var isAacData = probe.aac.isLikelyAacData(bytes);
+      var result;
+      if (isAacData) {
+        result = inspectAac_(bytes);
+      } else {
+        result = inspectTs_(bytes);
+      }
+      if (!result || !result.audio && !result.video) {
+        return null;
+      }
+      adjustTimestamp_(result, baseTimestamp);
+      return result;
+    };
+    var tsInspector = {
+      inspect: inspect,
+      parseAudioPes_: parseAudioPes_
+    };
+    /* global self */
+
+    /**
+     * Re-emits transmuxer events by converting them into messages to the
+     * world outside the worker.
+     *
+     * @param {Object} transmuxer the transmuxer to wire events on
+     * @private
+     */
+
+    const wireTransmuxerEvents = function (self, transmuxer) {
+      transmuxer.on('data', function (segment) {
+        // transfer ownership of the underlying ArrayBuffer
+        // instead of doing a copy to save memory
+        // ArrayBuffers are transferable but generic TypedArrays are not
+        // @link https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Passing_data_by_transferring_ownership_(transferable_objects)
+        const initArray = segment.initSegment;
+        segment.initSegment = {
+          data: initArray.buffer,
+          byteOffset: initArray.byteOffset,
+          byteLength: initArray.byteLength
+        };
+        const typedArray = segment.data;
+        segment.data = typedArray.buffer;
+        self.postMessage({
+          action: 'data',
+          segment,
+          byteOffset: typedArray.byteOffset,
+          byteLength: typedArray.byteLength
+        }, [segment.data]);
+      });
+      transmuxer.on('done', function (data) {
+        self.postMessage({
+          action: 'done'
+        });
+      });
+      transmuxer.on('gopInfo', function (gopInfo) {
+        self.postMessage({
+          action: 'gopInfo',
+          gopInfo
+        });
+      });
+      transmuxer.on('videoSegmentTimingInfo', function (timingInfo) {
+        const videoSegmentTimingInfo = {
+          start: {
+            decode: clock$2.videoTsToSeconds(timingInfo.start.dts),
+            presentation: clock$2.videoTsToSeconds(timingInfo.start.pts)
+          },
+          end: {
+            decode: clock$2.videoTsToSeconds(timingInfo.end.dts),
+            presentation: clock$2.videoTsToSeconds(timingInfo.end.pts)
+          },
+          baseMediaDecodeTime: clock$2.videoTsToSeconds(timingInfo.baseMediaDecodeTime)
+        };
+        if (timingInfo.prependedContentDuration) {
+          videoSegmentTimingInfo.prependedContentDuration = clock$2.videoTsToSeconds(timingInfo.prependedContentDuration);
+        }
+        self.postMessage({
+          action: 'videoSegmentTimingInfo',
+          videoSegmentTimingInfo
+        });
+      });
+      transmuxer.on('audioSegmentTimingInfo', function (timingInfo) {
+        // Note that all times for [audio/video]SegmentTimingInfo events are in video clock
+        const audioSegmentTimingInfo = {
+          start: {
+            decode: clock$2.videoTsToSeconds(timingInfo.start.dts),
+            presentation: clock$2.videoTsToSeconds(timingInfo.start.pts)
+          },
+          end: {
+            decode: clock$2.videoTsToSeconds(timingInfo.end.dts),
+            presentation: clock$2.videoTsToSeconds(timingInfo.end.pts)
+          },
+          baseMediaDecodeTime: clock$2.videoTsToSeconds(timingInfo.baseMediaDecodeTime)
+        };
+        if (timingInfo.prependedContentDuration) {
+          audioSegmentTimingInfo.prependedContentDuration = clock$2.videoTsToSeconds(timingInfo.prependedContentDuration);
+        }
+        self.postMessage({
+          action: 'audioSegmentTimingInfo',
+          audioSegmentTimingInfo
+        });
+      });
+      transmuxer.on('id3Frame', function (id3Frame) {
+        self.postMessage({
+          action: 'id3Frame',
+          id3Frame
+        });
+      });
+      transmuxer.on('caption', function (caption) {
+        self.postMessage({
+          action: 'caption',
+          caption
+        });
+      });
+      transmuxer.on('trackinfo', function (trackInfo) {
+        self.postMessage({
+          action: 'trackinfo',
+          trackInfo
+        });
+      });
+      transmuxer.on('audioTimingInfo', function (audioTimingInfo) {
+        // convert to video TS since we prioritize video time over audio
+        self.postMessage({
+          action: 'audioTimingInfo',
+          audioTimingInfo: {
+            start: clock$2.videoTsToSeconds(audioTimingInfo.start),
+            end: clock$2.videoTsToSeconds(audioTimingInfo.end)
+          }
+        });
+      });
+      transmuxer.on('videoTimingInfo', function (videoTimingInfo) {
+        self.postMessage({
+          action: 'videoTimingInfo',
+          videoTimingInfo: {
+            start: clock$2.videoTsToSeconds(videoTimingInfo.start),
+            end: clock$2.videoTsToSeconds(videoTimingInfo.end)
+          }
+        });
+      });
+      transmuxer.on('log', function (log) {
+        self.postMessage({
+          action: 'log',
+          log
+        });
+      });
+    };
+    /**
+     * All incoming messages route through this hash. If no function exists
+     * to handle an incoming message, then we ignore the message.
+     *
+     * @class MessageHandlers
+     * @param {Object} options the options to initialize with
+     */
+
+    class MessageHandlers {
+      constructor(self, options) {
+        this.options = options || {};
+        this.self = self;
+        this.init();
+      }
+      /**
+       * initialize our web worker and wire all the events.
+       */
+
+      init() {
+        if (this.transmuxer) {
+          this.transmuxer.dispose();
+        }
+        this.transmuxer = new transmuxer.Transmuxer(this.options);
+        wireTransmuxerEvents(this.self, this.transmuxer);
+      }
+      pushMp4Captions(data) {
+        if (!this.captionParser) {
+          this.captionParser = new captionParser();
+          this.captionParser.init();
+        }
+        const segment = new Uint8Array(data.data, data.byteOffset, data.byteLength);
+        const parsed = this.captionParser.parse(segment, data.trackIds, data.timescales);
+        this.self.postMessage({
+          action: 'mp4Captions',
+          captions: parsed && parsed.captions || [],
+          logs: parsed && parsed.logs || [],
+          data: segment.buffer
+        }, [segment.buffer]);
+      }
+      probeMp4StartTime({
+        timescales,
+        data
+      }) {
+        const startTime = probe$2.startTime(timescales, data);
+        this.self.postMessage({
+          action: 'probeMp4StartTime',
+          startTime,
+          data
+        }, [data.buffer]);
+      }
+      probeMp4Tracks({
+        data
+      }) {
+        const tracks = probe$2.tracks(data);
+        this.self.postMessage({
+          action: 'probeMp4Tracks',
+          tracks,
+          data
+        }, [data.buffer]);
+      }
+      /**
+       * Probes an mp4 segment for EMSG boxes containing ID3 data.
+       * https://aomediacodec.github.io/id3-emsg/
+       *
+       * @param {Uint8Array} data segment data
+       * @param {number} offset segment start time
+       * @return {Object[]} an array of ID3 frames
+       */
+
+      probeEmsgID3({
+        data,
+        offset
+      }) {
+        const id3Frames = probe$2.getEmsgID3(data, offset);
+        this.self.postMessage({
+          action: 'probeEmsgID3',
+          id3Frames,
+          emsgData: data
+        }, [data.buffer]);
+      }
+      /**
+       * Probe an mpeg2-ts segment to determine the start time of the segment in it's
+       * internal "media time," as well as whether it contains video and/or audio.
+       *
+       * @private
+       * @param {Uint8Array} bytes - segment bytes
+       * @param {number} baseStartTime
+       *        Relative reference timestamp used when adjusting frame timestamps for rollover.
+       *        This value should be in seconds, as it's converted to a 90khz clock within the
+       *        function body.
+       * @return {Object} The start time of the current segment in "media time" as well as
+       *                  whether it contains video and/or audio
+       */
+
+      probeTs({
+        data,
+        baseStartTime
+      }) {
+        const tsStartTime = typeof baseStartTime === 'number' && !isNaN(baseStartTime) ? baseStartTime * clock$2.ONE_SECOND_IN_TS : void 0;
+        const timeInfo = tsInspector.inspect(data, tsStartTime);
+        let result = null;
+        if (timeInfo) {
+          result = {
+            // each type's time info comes back as an array of 2 times, start and end
+            hasVideo: timeInfo.video && timeInfo.video.length === 2 || false,
+            hasAudio: timeInfo.audio && timeInfo.audio.length === 2 || false
+          };
+          if (result.hasVideo) {
+            result.videoStart = timeInfo.video[0].ptsTime;
+          }
+          if (result.hasAudio) {
+            result.audioStart = timeInfo.audio[0].ptsTime;
+          }
+        }
+        this.self.postMessage({
+          action: 'probeTs',
+          result,
+          data
+        }, [data.buffer]);
+      }
+      clearAllMp4Captions() {
+        if (this.captionParser) {
+          this.captionParser.clearAllCaptions();
+        }
+      }
+      clearParsedMp4Captions() {
+        if (this.captionParser) {
+          this.captionParser.clearParsedCaptions();
+        }
+      }
+      /**
+       * Adds data (a ts segment) to the start of the transmuxer pipeline for
+       * processing.
+       *
+       * @param {ArrayBuffer} data data to push into the muxer
+       */
+
+      push(data) {
+        // Cast array buffer to correct type for transmuxer
+        const segment = new Uint8Array(data.data, data.byteOffset, data.byteLength);
+        this.transmuxer.push(segment);
+      }
+      /**
+       * Recreate the transmuxer so that the next segment added via `push`
+       * start with a fresh transmuxer.
+       */
+
+      reset() {
+        this.transmuxer.reset();
+      }
+      /**
+       * Set the value that will be used as the `baseMediaDecodeTime` time for the
+       * next segment pushed in. Subsequent segments will have their `baseMediaDecodeTime`
+       * set relative to the first based on the PTS values.
+       *
+       * @param {Object} data used to set the timestamp offset in the muxer
+       */
+
+      setTimestampOffset(data) {
+        const timestampOffset = data.timestampOffset || 0;
+        this.transmuxer.setBaseMediaDecodeTime(Math.round(clock$2.secondsToVideoTs(timestampOffset)));
+      }
+      setAudioAppendStart(data) {
+        this.transmuxer.setAudioAppendStart(Math.ceil(clock$2.secondsToVideoTs(data.appendStart)));
+      }
+      setRemux(data) {
+        this.transmuxer.setRemux(data.remux);
+      }
+      /**
+       * Forces the pipeline to finish processing the last segment and emit it's
+       * results.
+       *
+       * @param {Object} data event data, not really used
+       */
+
+      flush(data) {
+        this.transmuxer.flush(); // transmuxed done action is fired after both audio/video pipelines are flushed
+
+        self.postMessage({
+          action: 'done',
+          type: 'transmuxed'
+        });
+      }
+      endTimeline() {
+        this.transmuxer.endTimeline(); // transmuxed endedtimeline action is fired after both audio/video pipelines end their
+        // timelines
+
+        self.postMessage({
+          action: 'endedtimeline',
+          type: 'transmuxed'
+        });
+      }
+      alignGopsWith(data) {
+        this.transmuxer.alignGopsWith(data.gopsToAlignWith.slice());
+      }
+    }
+    /**
+     * Our web worker interface so that things can talk to mux.js
+     * that will be running in a web worker. the scope is passed to this by
+     * webworkify.
+     *
+     * @param {Object} self the scope for the web worker
+     */
+
+    self.onmessage = function (event) {
+      if (event.data.action === 'init' && event.data.options) {
+        this.messageHandlers = new MessageHandlers(self, event.data.options);
+        return;
+      }
+      if (!this.messageHandlers) {
+        this.messageHandlers = new MessageHandlers(self);
+      }
+      if (event.data && event.data.action && event.data.action !== 'init') {
+        if (this.messageHandlers[event.data.action]) {
+          this.messageHandlers[event.data.action](event.data);
+        }
+      }
+    };
+  }));
+  var TransmuxWorker = factory(workerCode$1);
+  /* rollup-plugin-worker-factory end for worker!/home/runner/work/http-streaming/http-streaming/src/transmuxer-worker.js */
+
+  const handleData_ = (event, transmuxedData, callback) => {
+    const {
+      type,
+      initSegment,
+      captions,
+      captionStreams,
+      metadata,
+      videoFrameDtsTime,
+      videoFramePtsTime
+    } = event.data.segment;
+    transmuxedData.buffer.push({
+      captions,
+      captionStreams,
+      metadata
+    });
+    const boxes = event.data.segment.boxes || {
+      data: event.data.segment.data
+    };
+    const result = {
+      type,
+      // cast ArrayBuffer to TypedArray
+      data: new Uint8Array(boxes.data, boxes.data.byteOffset, boxes.data.byteLength),
+      initSegment: new Uint8Array(initSegment.data, initSegment.byteOffset, initSegment.byteLength)
+    };
+    if (typeof videoFrameDtsTime !== 'undefined') {
+      result.videoFrameDtsTime = videoFrameDtsTime;
+    }
+    if (typeof videoFramePtsTime !== 'undefined') {
+      result.videoFramePtsTime = videoFramePtsTime;
+    }
+    callback(result);
+  };
+  const handleDone_ = ({
+    transmuxedData,
+    callback
+  }) => {
+    // Previously we only returned data on data events,
+    // not on done events. Clear out the buffer to keep that consistent.
+    transmuxedData.buffer = []; // all buffers should have been flushed from the muxer, so start processing anything we
+    // have received
+
+    callback(transmuxedData);
+  };
+  const handleGopInfo_ = (event, transmuxedData) => {
+    transmuxedData.gopInfo = event.data.gopInfo;
+  };
+  const processTransmux = options => {
+    const {
+      transmuxer,
+      bytes,
+      audioAppendStart,
+      gopsToAlignWith,
+      remux,
+      onData,
+      onTrackInfo,
+      onAudioTimingInfo,
+      onVideoTimingInfo,
+      onVideoSegmentTimingInfo,
+      onAudioSegmentTimingInfo,
+      onId3,
+      onCaptions,
+      onDone,
+      onEndedTimeline,
+      onTransmuxerLog,
+      isEndOfTimeline
+    } = options;
+    const transmuxedData = {
+      buffer: []
+    };
+    let waitForEndedTimelineEvent = isEndOfTimeline;
+    const handleMessage = event => {
+      if (transmuxer.currentTransmux !== options) {
+        // disposed
+        return;
+      }
+      if (event.data.action === 'data') {
+        handleData_(event, transmuxedData, onData);
+      }
+      if (event.data.action === 'trackinfo') {
+        onTrackInfo(event.data.trackInfo);
+      }
+      if (event.data.action === 'gopInfo') {
+        handleGopInfo_(event, transmuxedData);
+      }
+      if (event.data.action === 'audioTimingInfo') {
+        onAudioTimingInfo(event.data.audioTimingInfo);
+      }
+      if (event.data.action === 'videoTimingInfo') {
+        onVideoTimingInfo(event.data.videoTimingInfo);
+      }
+      if (event.data.action === 'videoSegmentTimingInfo') {
+        onVideoSegmentTimingInfo(event.data.videoSegmentTimingInfo);
+      }
+      if (event.data.action === 'audioSegmentTimingInfo') {
+        onAudioSegmentTimingInfo(event.data.audioSegmentTimingInfo);
+      }
+      if (event.data.action === 'id3Frame') {
+        onId3([event.data.id3Frame], event.data.id3Frame.dispatchType);
+      }
+      if (event.data.action === 'caption') {
+        onCaptions(event.data.caption);
+      }
+      if (event.data.action === 'endedtimeline') {
+        waitForEndedTimelineEvent = false;
+        onEndedTimeline();
+      }
+      if (event.data.action === 'log') {
+        onTransmuxerLog(event.data.log);
+      } // wait for the transmuxed event since we may have audio and video
+
+      if (event.data.type !== 'transmuxed') {
+        return;
+      } // If the "endedtimeline" event has not yet fired, and this segment represents the end
+      // of a timeline, that means there may still be data events before the segment
+      // processing can be considerred complete. In that case, the final event should be
+      // an "endedtimeline" event with the type "transmuxed."
+
+      if (waitForEndedTimelineEvent) {
+        return;
+      }
+      transmuxer.onmessage = null;
+      handleDone_({
+        transmuxedData,
+        callback: onDone
+      });
+      /* eslint-disable no-use-before-define */
+
+      dequeue(transmuxer);
+      /* eslint-enable */
+    };
+
+    transmuxer.onmessage = handleMessage;
+    if (audioAppendStart) {
+      transmuxer.postMessage({
+        action: 'setAudioAppendStart',
+        appendStart: audioAppendStart
+      });
+    } // allow empty arrays to be passed to clear out GOPs
+
+    if (Array.isArray(gopsToAlignWith)) {
+      transmuxer.postMessage({
+        action: 'alignGopsWith',
+        gopsToAlignWith
+      });
+    }
+    if (typeof remux !== 'undefined') {
+      transmuxer.postMessage({
+        action: 'setRemux',
+        remux
+      });
+    }
+    if (bytes.byteLength) {
+      const buffer = bytes instanceof ArrayBuffer ? bytes : bytes.buffer;
+      const byteOffset = bytes instanceof ArrayBuffer ? 0 : bytes.byteOffset;
+      transmuxer.postMessage({
+        action: 'push',
+        // Send the typed-array of data as an ArrayBuffer so that
+        // it can be sent as a "Transferable" and avoid the costly
+        // memory copy
+        data: buffer,
+        // To recreate the original typed-array, we need information
+        // about what portion of the ArrayBuffer it was a view into
+        byteOffset,
+        byteLength: bytes.byteLength
+      }, [buffer]);
+    }
+    if (isEndOfTimeline) {
+      transmuxer.postMessage({
+        action: 'endTimeline'
+      });
+    } // even if we didn't push any bytes, we have to make sure we flush in case we reached
+    // the end of the segment
+
+    transmuxer.postMessage({
+      action: 'flush'
+    });
+  };
+  const dequeue = transmuxer => {
+    transmuxer.currentTransmux = null;
+    if (transmuxer.transmuxQueue.length) {
+      transmuxer.currentTransmux = transmuxer.transmuxQueue.shift();
+      if (typeof transmuxer.currentTransmux === 'function') {
+        transmuxer.currentTransmux();
+      } else {
+        processTransmux(transmuxer.currentTransmux);
+      }
+    }
+  };
+  const processAction = (transmuxer, action) => {
+    transmuxer.postMessage({
+      action
+    });
+    dequeue(transmuxer);
+  };
+  const enqueueAction = (action, transmuxer) => {
+    if (!transmuxer.currentTransmux) {
+      transmuxer.currentTransmux = action;
+      processAction(transmuxer, action);
+      return;
+    }
+    transmuxer.transmuxQueue.push(processAction.bind(null, transmuxer, action));
+  };
+  const reset = transmuxer => {
+    enqueueAction('reset', transmuxer);
+  };
+  const endTimeline = transmuxer => {
+    enqueueAction('endTimeline', transmuxer);
+  };
+  const transmux = options => {
+    if (!options.transmuxer.currentTransmux) {
+      options.transmuxer.currentTransmux = options;
+      processTransmux(options);
+      return;
+    }
+    options.transmuxer.transmuxQueue.push(options);
+  };
+  const createTransmuxer = options => {
+    const transmuxer = new TransmuxWorker();
+    transmuxer.currentTransmux = null;
+    transmuxer.transmuxQueue = [];
+    const term = transmuxer.terminate;
+    transmuxer.terminate = () => {
+      transmuxer.currentTransmux = null;
+      transmuxer.transmuxQueue.length = 0;
+      return term.call(transmuxer);
+    };
+    transmuxer.postMessage({
+      action: 'init',
+      options
+    });
+    return transmuxer;
+  };
+  var segmentTransmuxer = {
+    reset,
+    endTimeline,
+    transmux,
+    createTransmuxer
+  };
+  const workerCallback = function (options) {
+    const transmuxer = options.transmuxer;
+    const endAction = options.endAction || options.action;
+    const callback = options.callback;
+    const message = _extends$1({}, options, {
+      endAction: null,
+      transmuxer: null,
+      callback: null
+    });
+    const listenForEndEvent = event => {
+      if (event.data.action !== endAction) {
+        return;
+      }
+      transmuxer.removeEventListener('message', listenForEndEvent); // transfer ownership of bytes back to us.
+
+      if (event.data.data) {
+        event.data.data = new Uint8Array(event.data.data, options.byteOffset || 0, options.byteLength || event.data.data.byteLength);
+        if (options.data) {
+          options.data = event.data.data;
+        }
+      }
+      callback(event.data);
+    };
+    transmuxer.addEventListener('message', listenForEndEvent);
+    if (options.data) {
+      const isArrayBuffer = options.data instanceof ArrayBuffer;
+      message.byteOffset = isArrayBuffer ? 0 : options.data.byteOffset;
+      message.byteLength = options.data.byteLength;
+      const transfers = [isArrayBuffer ? options.data : options.data.buffer];
+      transmuxer.postMessage(message, transfers);
+    } else {
+      transmuxer.postMessage(message);
+    }
+  };
+  const REQUEST_ERRORS = {
+    FAILURE: 2,
+    TIMEOUT: -101,
+    ABORTED: -102
+  };
+  /**
+   * Abort all requests
+   *
+   * @param {Object} activeXhrs - an object that tracks all XHR requests
+   */
+
+  const abortAll = activeXhrs => {
+    activeXhrs.forEach(xhr => {
+      xhr.abort();
+    });
+  };
+  /**
+   * Gather important bandwidth stats once a request has completed
+   *
+   * @param {Object} request - the XHR request from which to gather stats
+   */
+
+  const getRequestStats = request => {
+    return {
+      bandwidth: request.bandwidth,
+      bytesReceived: request.bytesReceived || 0,
+      roundTripTime: request.roundTripTime || 0
+    };
+  };
+  /**
+   * If possible gather bandwidth stats as a request is in
+   * progress
+   *
+   * @param {Event} progressEvent - an event object from an XHR's progress event
+   */
+
+  const getProgressStats = progressEvent => {
+    const request = progressEvent.target;
+    const roundTripTime = Date.now() - request.requestTime;
+    const stats = {
+      bandwidth: Infinity,
+      bytesReceived: 0,
+      roundTripTime: roundTripTime || 0
+    };
+    stats.bytesReceived = progressEvent.loaded; // This can result in Infinity if stats.roundTripTime is 0 but that is ok
+    // because we should only use bandwidth stats on progress to determine when
+    // abort a request early due to insufficient bandwidth
+
+    stats.bandwidth = Math.floor(stats.bytesReceived / stats.roundTripTime * 8 * 1000);
+    return stats;
+  };
+  /**
+   * Handle all error conditions in one place and return an object
+   * with all the information
+   *
+   * @param {Error|null} error - if non-null signals an error occured with the XHR
+   * @param {Object} request -  the XHR request that possibly generated the error
+   */
+
+  const handleErrors = (error, request) => {
+    if (request.timedout) {
+      return {
+        status: request.status,
+        message: 'HLS request timed-out at URL: ' + request.uri,
+        code: REQUEST_ERRORS.TIMEOUT,
+        xhr: request
+      };
+    }
+    if (request.aborted) {
+      return {
+        status: request.status,
+        message: 'HLS request aborted at URL: ' + request.uri,
+        code: REQUEST_ERRORS.ABORTED,
+        xhr: request
+      };
+    }
+    if (error) {
+      return {
+        status: request.status,
+        message: 'HLS request errored at URL: ' + request.uri,
+        code: REQUEST_ERRORS.FAILURE,
+        xhr: request
+      };
+    }
+    if (request.responseType === 'arraybuffer' && request.response.byteLength === 0) {
+      return {
+        status: request.status,
+        message: 'Empty HLS response at URL: ' + request.uri,
+        code: REQUEST_ERRORS.FAILURE,
+        xhr: request
+      };
+    }
+    return null;
+  };
+  /**
+   * Handle responses for key data and convert the key data to the correct format
+   * for the decryption step later
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Array} objects - objects to add the key bytes to.
+   * @param {Function} finishProcessingFn - a callback to execute to continue processing
+   *                                        this request
+   */
+
+  const handleKeyResponse = (segment, objects, finishProcessingFn) => (error, request) => {
+    const response = request.response;
+    const errorObj = handleErrors(error, request);
+    if (errorObj) {
+      return finishProcessingFn(errorObj, segment);
+    }
+    if (response.byteLength !== 16) {
+      return finishProcessingFn({
+        status: request.status,
+        message: 'Invalid HLS key at URL: ' + request.uri,
+        code: REQUEST_ERRORS.FAILURE,
+        xhr: request
+      }, segment);
+    }
+    const view = new DataView(response);
+    const bytes = new Uint32Array([view.getUint32(0), view.getUint32(4), view.getUint32(8), view.getUint32(12)]);
+    for (let i = 0; i < objects.length; i++) {
+      objects[i].bytes = bytes;
+    }
+    return finishProcessingFn(null, segment);
+  };
+  const parseInitSegment = (segment, callback) => {
+    const type = detectContainerForBytes(segment.map.bytes); // TODO: We should also handle ts init segments here, but we
+    // only know how to parse mp4 init segments at the moment
+
+    if (type !== 'mp4') {
+      const uri = segment.map.resolvedUri || segment.map.uri;
+      const mediaType = type || 'unknown';
+      return callback({
+        internal: true,
+        message: `Found unsupported ${mediaType} container for initialization segment at URL: ${uri}`,
+        code: REQUEST_ERRORS.FAILURE,
+        metadata: {
+          errorType: videojs.Error.UnsupportedMediaInitialization,
+          mediaType
+        }
+      });
+    }
+    workerCallback({
+      action: 'probeMp4Tracks',
+      data: segment.map.bytes,
+      transmuxer: segment.transmuxer,
+      callback: ({
+        tracks,
+        data
+      }) => {
+        // transfer bytes back to us
+        segment.map.bytes = data;
+        tracks.forEach(function (track) {
+          segment.map.tracks = segment.map.tracks || {}; // only support one track of each type for now
+
+          if (segment.map.tracks[track.type]) {
+            return;
+          }
+          segment.map.tracks[track.type] = track;
+          if (typeof track.id === 'number' && track.timescale) {
+            segment.map.timescales = segment.map.timescales || {};
+            segment.map.timescales[track.id] = track.timescale;
+          }
+        });
+        return callback(null);
+      }
+    });
+  };
+  /**
+   * Handle init-segment responses
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} finishProcessingFn - a callback to execute to continue processing
+   *                                        this request
+   */
+
+  const handleInitSegmentResponse = ({
+    segment,
+    finishProcessingFn
+  }) => (error, request) => {
+    const errorObj = handleErrors(error, request);
+    if (errorObj) {
+      return finishProcessingFn(errorObj, segment);
+    }
+    const bytes = new Uint8Array(request.response); // init segment is encypted, we will have to wait
+    // until the key request is done to decrypt.
+
+    if (segment.map.key) {
+      segment.map.encryptedBytes = bytes;
+      return finishProcessingFn(null, segment);
+    }
+    segment.map.bytes = bytes;
+    parseInitSegment(segment, function (parseError) {
+      if (parseError) {
+        parseError.xhr = request;
+        parseError.status = request.status;
+        return finishProcessingFn(parseError, segment);
+      }
+      finishProcessingFn(null, segment);
+    });
+  };
+  /**
+   * Response handler for segment-requests being sure to set the correct
+   * property depending on whether the segment is encryped or not
+   * Also records and keeps track of stats that are used for ABR purposes
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} finishProcessingFn - a callback to execute to continue processing
+   *                                        this request
+   */
+
+  const handleSegmentResponse = ({
+    segment,
+    finishProcessingFn,
+    responseType
+  }) => (error, request) => {
+    const errorObj = handleErrors(error, request);
+    if (errorObj) {
+      return finishProcessingFn(errorObj, segment);
+    }
+    const newBytes =
+    // although responseText "should" exist, this guard serves to prevent an error being
+    // thrown for two primary cases:
+    // 1. the mime type override stops working, or is not implemented for a specific
+    //    browser
+    // 2. when using mock XHR libraries like sinon that do not allow the override behavior
+    responseType === 'arraybuffer' || !request.responseText ? request.response : stringToArrayBuffer(request.responseText.substring(segment.lastReachedChar || 0));
+    segment.stats = getRequestStats(request);
+    if (segment.key) {
+      segment.encryptedBytes = new Uint8Array(newBytes);
+    } else {
+      segment.bytes = new Uint8Array(newBytes);
+    }
+    return finishProcessingFn(null, segment);
+  };
+  const transmuxAndNotify = ({
+    segment,
+    bytes,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    const fmp4Tracks = segment.map && segment.map.tracks || {};
+    const isMuxed = Boolean(fmp4Tracks.audio && fmp4Tracks.video); // Keep references to each function so we can null them out after we're done with them.
+    // One reason for this is that in the case of full segments, we want to trust start
+    // times from the probe, rather than the transmuxer.
+
+    let audioStartFn = timingInfoFn.bind(null, segment, 'audio', 'start');
+    const audioEndFn = timingInfoFn.bind(null, segment, 'audio', 'end');
+    let videoStartFn = timingInfoFn.bind(null, segment, 'video', 'start');
+    const videoEndFn = timingInfoFn.bind(null, segment, 'video', 'end');
+    const finish = () => transmux({
+      bytes,
+      transmuxer: segment.transmuxer,
+      audioAppendStart: segment.audioAppendStart,
+      gopsToAlignWith: segment.gopsToAlignWith,
+      remux: isMuxed,
+      onData: result => {
+        result.type = result.type === 'combined' ? 'video' : result.type;
+        dataFn(segment, result);
+      },
+      onTrackInfo: trackInfo => {
+        if (trackInfoFn) {
+          if (isMuxed) {
+            trackInfo.isMuxed = true;
+          }
+          trackInfoFn(segment, trackInfo);
+        }
+      },
+      onAudioTimingInfo: audioTimingInfo => {
+        // we only want the first start value we encounter
+        if (audioStartFn && typeof audioTimingInfo.start !== 'undefined') {
+          audioStartFn(audioTimingInfo.start);
+          audioStartFn = null;
+        } // we want to continually update the end time
+
+        if (audioEndFn && typeof audioTimingInfo.end !== 'undefined') {
+          audioEndFn(audioTimingInfo.end);
+        }
+      },
+      onVideoTimingInfo: videoTimingInfo => {
+        // we only want the first start value we encounter
+        if (videoStartFn && typeof videoTimingInfo.start !== 'undefined') {
+          videoStartFn(videoTimingInfo.start);
+          videoStartFn = null;
+        } // we want to continually update the end time
+
+        if (videoEndFn && typeof videoTimingInfo.end !== 'undefined') {
+          videoEndFn(videoTimingInfo.end);
+        }
+      },
+      onVideoSegmentTimingInfo: videoSegmentTimingInfo => {
+        videoSegmentTimingInfoFn(videoSegmentTimingInfo);
+      },
+      onAudioSegmentTimingInfo: audioSegmentTimingInfo => {
+        audioSegmentTimingInfoFn(audioSegmentTimingInfo);
+      },
+      onId3: (id3Frames, dispatchType) => {
+        id3Fn(segment, id3Frames, dispatchType);
+      },
+      onCaptions: captions => {
+        captionsFn(segment, [captions]);
+      },
+      isEndOfTimeline,
+      onEndedTimeline: () => {
+        endedTimelineFn();
+      },
+      onTransmuxerLog,
+      onDone: result => {
+        if (!doneFn) {
+          return;
+        }
+        result.type = result.type === 'combined' ? 'video' : result.type;
+        doneFn(null, segment, result);
+      }
+    }); // In the transmuxer, we don't yet have the ability to extract a "proper" start time.
+    // Meaning cached frame data may corrupt our notion of where this segment
+    // really starts. To get around this, probe for the info needed.
+
+    workerCallback({
+      action: 'probeTs',
+      transmuxer: segment.transmuxer,
+      data: bytes,
+      baseStartTime: segment.baseStartTime,
+      callback: data => {
+        segment.bytes = bytes = data.data;
+        const probeResult = data.result;
+        if (probeResult) {
+          trackInfoFn(segment, {
+            hasAudio: probeResult.hasAudio,
+            hasVideo: probeResult.hasVideo,
+            isMuxed
+          });
+          trackInfoFn = null;
+        }
+        finish();
+      }
+    });
+  };
+  const handleSegmentBytes = ({
+    segment,
+    bytes,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    let bytesAsUint8Array = new Uint8Array(bytes); // TODO:
+    // We should have a handler that fetches the number of bytes required
+    // to check if something is fmp4. This will allow us to save bandwidth
+    // because we can only exclude a playlist and abort requests
+    // by codec after trackinfo triggers.
+
+    if (isLikelyFmp4MediaSegment(bytesAsUint8Array)) {
+      segment.isFmp4 = true;
+      const {
+        tracks
+      } = segment.map;
+      const trackInfo = {
+        isFmp4: true,
+        hasVideo: !!tracks.video,
+        hasAudio: !!tracks.audio
+      }; // if we have a audio track, with a codec that is not set to
+      // encrypted audio
+
+      if (tracks.audio && tracks.audio.codec && tracks.audio.codec !== 'enca') {
+        trackInfo.audioCodec = tracks.audio.codec;
+      } // if we have a video track, with a codec that is not set to
+      // encrypted video
+
+      if (tracks.video && tracks.video.codec && tracks.video.codec !== 'encv') {
+        trackInfo.videoCodec = tracks.video.codec;
+      }
+      if (tracks.video && tracks.audio) {
+        trackInfo.isMuxed = true;
+      } // since we don't support appending fmp4 data on progress, we know we have the full
+      // segment here
+
+      trackInfoFn(segment, trackInfo); // The probe doesn't provide the segment end time, so only callback with the start
+      // time. The end time can be roughly calculated by the receiver using the duration.
+      //
+      // Note that the start time returned by the probe reflects the baseMediaDecodeTime, as
+      // that is the true start of the segment (where the playback engine should begin
+      // decoding).
+
+      const finishLoading = (captions, id3Frames) => {
+        // if the track still has audio at this point it is only possible
+        // for it to be audio only. See `tracks.video && tracks.audio` if statement
+        // above.
+        // we make sure to use segment.bytes here as that
+        dataFn(segment, {
+          data: bytesAsUint8Array,
+          type: trackInfo.hasAudio && !trackInfo.isMuxed ? 'audio' : 'video'
+        });
+        if (id3Frames && id3Frames.length) {
+          id3Fn(segment, id3Frames);
+        }
+        if (captions && captions.length) {
+          captionsFn(segment, captions);
+        }
+        doneFn(null, segment, {});
+      };
+      workerCallback({
+        action: 'probeMp4StartTime',
+        timescales: segment.map.timescales,
+        data: bytesAsUint8Array,
+        transmuxer: segment.transmuxer,
+        callback: ({
+          data,
+          startTime
+        }) => {
+          // transfer bytes back to us
+          bytes = data.buffer;
+          segment.bytes = bytesAsUint8Array = data;
+          if (trackInfo.hasAudio && !trackInfo.isMuxed) {
+            timingInfoFn(segment, 'audio', 'start', startTime);
+          }
+          if (trackInfo.hasVideo) {
+            timingInfoFn(segment, 'video', 'start', startTime);
+          }
+          workerCallback({
+            action: 'probeEmsgID3',
+            data: bytesAsUint8Array,
+            transmuxer: segment.transmuxer,
+            offset: startTime,
+            callback: ({
+              emsgData,
+              id3Frames
+            }) => {
+              // transfer bytes back to us
+              bytes = emsgData.buffer;
+              segment.bytes = bytesAsUint8Array = emsgData; // Run through the CaptionParser in case there are captions.
+              // Initialize CaptionParser if it hasn't been yet
+
+              if (!tracks.video || !emsgData.byteLength || !segment.transmuxer) {
+                finishLoading(undefined, id3Frames);
+                return;
+              }
+              workerCallback({
+                action: 'pushMp4Captions',
+                endAction: 'mp4Captions',
+                transmuxer: segment.transmuxer,
+                data: bytesAsUint8Array,
+                timescales: segment.map.timescales,
+                trackIds: [tracks.video.id],
+                callback: message => {
+                  // transfer bytes back to us
+                  bytes = message.data.buffer;
+                  segment.bytes = bytesAsUint8Array = message.data;
+                  message.logs.forEach(function (log) {
+                    onTransmuxerLog(merge(log, {
+                      stream: 'mp4CaptionParser'
+                    }));
+                  });
+                  finishLoading(message.captions, id3Frames);
+                }
+              });
+            }
+          });
+        }
+      });
+      return;
+    } // VTT or other segments that don't need processing
+
+    if (!segment.transmuxer) {
+      doneFn(null, segment, {});
+      return;
+    }
+    if (typeof segment.container === 'undefined') {
+      segment.container = detectContainerForBytes(bytesAsUint8Array);
+    }
+    if (segment.container !== 'ts' && segment.container !== 'aac') {
+      trackInfoFn(segment, {
+        hasAudio: false,
+        hasVideo: false
+      });
+      doneFn(null, segment, {});
+      return;
+    } // ts or aac
+
+    transmuxAndNotify({
+      segment,
+      bytes,
+      trackInfoFn,
+      timingInfoFn,
+      videoSegmentTimingInfoFn,
+      audioSegmentTimingInfoFn,
+      id3Fn,
+      captionsFn,
+      isEndOfTimeline,
+      endedTimelineFn,
+      dataFn,
+      doneFn,
+      onTransmuxerLog
+    });
+  };
+  const decrypt = function ({
+    id,
+    key,
+    encryptedBytes,
+    decryptionWorker
+  }, callback) {
+    const decryptionHandler = event => {
+      if (event.data.source === id) {
+        decryptionWorker.removeEventListener('message', decryptionHandler);
+        const decrypted = event.data.decrypted;
+        callback(new Uint8Array(decrypted.bytes, decrypted.byteOffset, decrypted.byteLength));
+      }
+    };
+    decryptionWorker.addEventListener('message', decryptionHandler);
+    let keyBytes;
+    if (key.bytes.slice) {
+      keyBytes = key.bytes.slice();
+    } else {
+      keyBytes = new Uint32Array(Array.prototype.slice.call(key.bytes));
+    } // incrementally decrypt the bytes
+
+    decryptionWorker.postMessage(createTransferableMessage({
+      source: id,
+      encrypted: encryptedBytes,
+      key: keyBytes,
+      iv: key.iv
+    }), [encryptedBytes.buffer, keyBytes.buffer]);
+  };
+  /**
+   * Decrypt the segment via the decryption web worker
+   *
+   * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128 decryption
+   *                                       routines
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} trackInfoFn - a callback that receives track info
+   * @param {Function} timingInfoFn - a callback that receives timing info
+   * @param {Function} videoSegmentTimingInfoFn
+   *                   a callback that receives video timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} audioSegmentTimingInfoFn
+   *                   a callback that receives audio timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {boolean}  isEndOfTimeline
+   *                   true if this segment represents the last segment in a timeline
+   * @param {Function} endedTimelineFn
+   *                   a callback made when a timeline is ended, will only be called if
+   *                   isEndOfTimeline is true
+   * @param {Function} dataFn - a callback that is executed when segment bytes are available
+   *                            and ready to use
+   * @param {Function} doneFn - a callback that is executed after decryption has completed
+   */
+
+  const decryptSegment = ({
+    decryptionWorker,
+    segment,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    decrypt({
+      id: segment.requestId,
+      key: segment.key,
+      encryptedBytes: segment.encryptedBytes,
+      decryptionWorker
+    }, decryptedBytes => {
+      segment.bytes = decryptedBytes;
+      handleSegmentBytes({
+        segment,
+        bytes: segment.bytes,
+        trackInfoFn,
+        timingInfoFn,
+        videoSegmentTimingInfoFn,
+        audioSegmentTimingInfoFn,
+        id3Fn,
+        captionsFn,
+        isEndOfTimeline,
+        endedTimelineFn,
+        dataFn,
+        doneFn,
+        onTransmuxerLog
+      });
+    });
+  };
+  /**
+   * This function waits for all XHRs to finish (with either success or failure)
+   * before continueing processing via it's callback. The function gathers errors
+   * from each request into a single errors array so that the error status for
+   * each request can be examined later.
+   *
+   * @param {Object} activeXhrs - an object that tracks all XHR requests
+   * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128 decryption
+   *                                       routines
+   * @param {Function} trackInfoFn - a callback that receives track info
+   * @param {Function} timingInfoFn - a callback that receives timing info
+   * @param {Function} videoSegmentTimingInfoFn
+   *                   a callback that receives video timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} audioSegmentTimingInfoFn
+   *                   a callback that receives audio timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} id3Fn - a callback that receives ID3 metadata
+   * @param {Function} captionsFn - a callback that receives captions
+   * @param {boolean}  isEndOfTimeline
+   *                   true if this segment represents the last segment in a timeline
+   * @param {Function} endedTimelineFn
+   *                   a callback made when a timeline is ended, will only be called if
+   *                   isEndOfTimeline is true
+   * @param {Function} dataFn - a callback that is executed when segment bytes are available
+   *                            and ready to use
+   * @param {Function} doneFn - a callback that is executed after all resources have been
+   *                            downloaded and any decryption completed
+   */
+
+  const waitForCompletion = ({
+    activeXhrs,
+    decryptionWorker,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    let count = 0;
+    let didError = false;
+    return (error, segment) => {
+      if (didError) {
+        return;
+      }
+      if (error) {
+        didError = true; // If there are errors, we have to abort any outstanding requests
+
+        abortAll(activeXhrs); // Even though the requests above are aborted, and in theory we could wait until we
+        // handle the aborted events from those requests, there are some cases where we may
+        // never get an aborted event. For instance, if the network connection is lost and
+        // there were two requests, the first may have triggered an error immediately, while
+        // the second request remains unsent. In that case, the aborted algorithm will not
+        // trigger an abort: see https://xhr.spec.whatwg.org/#the-abort()-method
+        //
+        // We also can't rely on the ready state of the XHR, since the request that
+        // triggered the connection error may also show as a ready state of 0 (unsent).
+        // Therefore, we have to finish this group of requests immediately after the first
+        // seen error.
+
+        return doneFn(error, segment);
+      }
+      count += 1;
+      if (count === activeXhrs.length) {
+        const segmentFinish = function () {
+          if (segment.encryptedBytes) {
+            return decryptSegment({
+              decryptionWorker,
+              segment,
+              trackInfoFn,
+              timingInfoFn,
+              videoSegmentTimingInfoFn,
+              audioSegmentTimingInfoFn,
+              id3Fn,
+              captionsFn,
+              isEndOfTimeline,
+              endedTimelineFn,
+              dataFn,
+              doneFn,
+              onTransmuxerLog
+            });
+          } // Otherwise, everything is ready just continue
+
+          handleSegmentBytes({
+            segment,
+            bytes: segment.bytes,
+            trackInfoFn,
+            timingInfoFn,
+            videoSegmentTimingInfoFn,
+            audioSegmentTimingInfoFn,
+            id3Fn,
+            captionsFn,
+            isEndOfTimeline,
+            endedTimelineFn,
+            dataFn,
+            doneFn,
+            onTransmuxerLog
+          });
+        }; // Keep track of when *all* of the requests have completed
+
+        segment.endOfAllRequests = Date.now();
+        if (segment.map && segment.map.encryptedBytes && !segment.map.bytes) {
+          return decrypt({
+            decryptionWorker,
+            // add -init to the "id" to differentiate between segment
+            // and init segment decryption, just in case they happen
+            // at the same time at some point in the future.
+            id: segment.requestId + '-init',
+            encryptedBytes: segment.map.encryptedBytes,
+            key: segment.map.key
+          }, decryptedBytes => {
+            segment.map.bytes = decryptedBytes;
+            parseInitSegment(segment, parseError => {
+              if (parseError) {
+                abortAll(activeXhrs);
+                return doneFn(parseError, segment);
+              }
+              segmentFinish();
+            });
+          });
+        }
+        segmentFinish();
+      }
+    };
+  };
+  /**
+   * Calls the abort callback if any request within the batch was aborted. Will only call
+   * the callback once per batch of requests, even if multiple were aborted.
+   *
+   * @param {Object} loadendState - state to check to see if the abort function was called
+   * @param {Function} abortFn - callback to call for abort
+   */
+
+  const handleLoadEnd = ({
+    loadendState,
+    abortFn
+  }) => event => {
+    const request = event.target;
+    if (request.aborted && abortFn && !loadendState.calledAbortFn) {
+      abortFn();
+      loadendState.calledAbortFn = true;
+    }
+  };
+  /**
+   * Simple progress event callback handler that gathers some stats before
+   * executing a provided callback with the `segment` object
+   *
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} progressFn - a callback that is executed each time a progress event
+   *                                is received
+   * @param {Function} trackInfoFn - a callback that receives track info
+   * @param {Function} timingInfoFn - a callback that receives timing info
+   * @param {Function} videoSegmentTimingInfoFn
+   *                   a callback that receives video timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} audioSegmentTimingInfoFn
+   *                   a callback that receives audio timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {boolean}  isEndOfTimeline
+   *                   true if this segment represents the last segment in a timeline
+   * @param {Function} endedTimelineFn
+   *                   a callback made when a timeline is ended, will only be called if
+   *                   isEndOfTimeline is true
+   * @param {Function} dataFn - a callback that is executed when segment bytes are available
+   *                            and ready to use
+   * @param {Event} event - the progress event object from XMLHttpRequest
+   */
+
+  const handleProgress = ({
+    segment,
+    progressFn,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn
+  }) => event => {
+    const request = event.target;
+    if (request.aborted) {
+      return;
+    }
+    segment.stats = merge(segment.stats, getProgressStats(event)); // record the time that we receive the first byte of data
+
+    if (!segment.stats.firstBytesReceivedAt && segment.stats.bytesReceived) {
+      segment.stats.firstBytesReceivedAt = Date.now();
+    }
+    return progressFn(event, segment);
+  };
+  /**
+   * Load all resources and does any processing necessary for a media-segment
+   *
+   * Features:
+   *   decrypts the media-segment if it has a key uri and an iv
+   *   aborts *all* requests if *any* one request fails
+   *
+   * The segment object, at minimum, has the following format:
+   * {
+   *   resolvedUri: String,
+   *   [transmuxer]: Object,
+   *   [byterange]: {
+   *     offset: Number,
+   *     length: Number
+   *   },
+   *   [key]: {
+   *     resolvedUri: String
+   *     [byterange]: {
+   *       offset: Number,
+   *       length: Number
+   *     },
+   *     iv: {
+   *       bytes: Uint32Array
+   *     }
+   *   },
+   *   [map]: {
+   *     resolvedUri: String,
+   *     [byterange]: {
+   *       offset: Number,
+   *       length: Number
+   *     },
+   *     [bytes]: Uint8Array
+   *   }
+   * }
+   * ...where [name] denotes optional properties
+   *
+   * @param {Function} xhr - an instance of the xhr wrapper in xhr.js
+   * @param {Object} xhrOptions - the base options to provide to all xhr requests
+   * @param {WebWorker} decryptionWorker - a WebWorker interface to AES-128
+   *                                       decryption routines
+   * @param {Object} segment - a simplified copy of the segmentInfo object
+   *                           from SegmentLoader
+   * @param {Function} abortFn - a callback called (only once) if any piece of a request was
+   *                             aborted
+   * @param {Function} progressFn - a callback that receives progress events from the main
+   *                                segment's xhr request
+   * @param {Function} trackInfoFn - a callback that receives track info
+   * @param {Function} timingInfoFn - a callback that receives timing info
+   * @param {Function} videoSegmentTimingInfoFn
+   *                   a callback that receives video timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} audioSegmentTimingInfoFn
+   *                   a callback that receives audio timing info based on media times and
+   *                   any adjustments made by the transmuxer
+   * @param {Function} id3Fn - a callback that receives ID3 metadata
+   * @param {Function} captionsFn - a callback that receives captions
+   * @param {boolean}  isEndOfTimeline
+   *                   true if this segment represents the last segment in a timeline
+   * @param {Function} endedTimelineFn
+   *                   a callback made when a timeline is ended, will only be called if
+   *                   isEndOfTimeline is true
+   * @param {Function} dataFn - a callback that receives data from the main segment's xhr
+   *                            request, transmuxed if needed
+   * @param {Function} doneFn - a callback that is executed only once all requests have
+   *                            succeeded or failed
+   * @return {Function} a function that, when invoked, immediately aborts all
+   *                     outstanding requests
+   */
+
+  const mediaSegmentRequest = ({
+    xhr,
+    xhrOptions,
+    decryptionWorker,
+    segment,
+    abortFn,
+    progressFn,
+    trackInfoFn,
+    timingInfoFn,
+    videoSegmentTimingInfoFn,
+    audioSegmentTimingInfoFn,
+    id3Fn,
+    captionsFn,
+    isEndOfTimeline,
+    endedTimelineFn,
+    dataFn,
+    doneFn,
+    onTransmuxerLog
+  }) => {
+    const activeXhrs = [];
+    const finishProcessingFn = waitForCompletion({
+      activeXhrs,
+      decryptionWorker,
+      trackInfoFn,
+      timingInfoFn,
+      videoSegmentTimingInfoFn,
+      audioSegmentTimingInfoFn,
+      id3Fn,
+      captionsFn,
+      isEndOfTimeline,
+      endedTimelineFn,
+      dataFn,
+      doneFn,
+      onTransmuxerLog
+    }); // optionally, request the decryption key
+
+    if (segment.key && !segment.key.bytes) {
+      const objects = [segment.key];
+      if (segment.map && !segment.map.bytes && segment.map.key && segment.map.key.resolvedUri === segment.key.resolvedUri) {
+        objects.push(segment.map.key);
+      }
+      const keyRequestOptions = merge(xhrOptions, {
+        uri: segment.key.resolvedUri,
+        responseType: 'arraybuffer',
+        requestType: 'segment-key'
+      });
+      const keyRequestCallback = handleKeyResponse(segment, objects, finishProcessingFn);
+      const keyXhr = xhr(keyRequestOptions, keyRequestCallback);
+      activeXhrs.push(keyXhr);
+    } // optionally, request the associated media init segment
+
+    if (segment.map && !segment.map.bytes) {
+      const differentMapKey = segment.map.key && (!segment.key || segment.key.resolvedUri !== segment.map.key.resolvedUri);
+      if (differentMapKey) {
+        const mapKeyRequestOptions = merge(xhrOptions, {
+          uri: segment.map.key.resolvedUri,
+          responseType: 'arraybuffer',
+          requestType: 'segment-key'
+        });
+        const mapKeyRequestCallback = handleKeyResponse(segment, [segment.map.key], finishProcessingFn);
+        const mapKeyXhr = xhr(mapKeyRequestOptions, mapKeyRequestCallback);
+        activeXhrs.push(mapKeyXhr);
+      }
+      const initSegmentOptions = merge(xhrOptions, {
+        uri: segment.map.resolvedUri,
+        responseType: 'arraybuffer',
+        headers: segmentXhrHeaders(segment.map),
+        requestType: 'segment-media-initialization'
+      });
+      const initSegmentRequestCallback = handleInitSegmentResponse({
+        segment,
+        finishProcessingFn
+      });
+      const initSegmentXhr = xhr(initSegmentOptions, initSegmentRequestCallback);
+      activeXhrs.push(initSegmentXhr);
+    }
+    const segmentRequestOptions = merge(xhrOptions, {
+      uri: segment.part && segment.part.resolvedUri || segment.resolvedUri,
+      responseType: 'arraybuffer',
+      headers: segmentXhrHeaders(segment),
+      requestType: 'segment'
+    });
+    const segmentRequestCallback = handleSegmentResponse({
+      segment,
+      finishProcessingFn,
+      responseType: segmentRequestOptions.responseType
+    });
+    const segmentXhr = xhr(segmentRequestOptions, segmentRequestCallback);
+    segmentXhr.addEventListener('progress', handleProgress({
+      segment,
+      progressFn,
+      trackInfoFn,
+      timingInfoFn,
+      videoSegmentTimingInfoFn,
+      audioSegmentTimingInfoFn,
+      id3Fn,
+      captionsFn,
+      isEndOfTimeline,
+      endedTimelineFn,
+      dataFn
+    }));
+    activeXhrs.push(segmentXhr); // since all parts of the request must be considered, but should not make callbacks
+    // multiple times, provide a shared state object
+
+    const loadendState = {};
+    activeXhrs.forEach(activeXhr => {
+      activeXhr.addEventListener('loadend', handleLoadEnd({
+        loadendState,
+        abortFn
+      }));
+    });
+    return () => abortAll(activeXhrs);
+  };
+
+  /**
+   * @file - codecs.js - Handles tasks regarding codec strings such as translating them to
+   * codec strings, or translating codec strings into objects that can be examined.
+   */
+  const logFn$1 = logger('CodecUtils');
+  /**
+   * Returns a set of codec strings parsed from the playlist or the default
+   * codec strings if no codecs were specified in the playlist
+   *
+   * @param {Playlist} media the current media playlist
+   * @return {Object} an object with the video and audio codecs
+   */
+
+  const getCodecs = function (media) {
+    // if the codecs were explicitly specified, use them instead of the
+    // defaults
+    const mediaAttributes = media.attributes || {};
+    if (mediaAttributes.CODECS) {
+      return parseCodecs(mediaAttributes.CODECS);
+    }
+  };
+  const isMaat = (main, media) => {
+    const mediaAttributes = media.attributes || {};
+    return main && main.mediaGroups && main.mediaGroups.AUDIO && mediaAttributes.AUDIO && main.mediaGroups.AUDIO[mediaAttributes.AUDIO];
+  };
+  const isMuxed = (main, media) => {
+    if (!isMaat(main, media)) {
+      return true;
+    }
+    const mediaAttributes = media.attributes || {};
+    const audioGroup = main.mediaGroups.AUDIO[mediaAttributes.AUDIO];
+    for (const groupId in audioGroup) {
+      // If an audio group has a URI (the case for HLS, as HLS will use external playlists),
+      // or there are listed playlists (the case for DASH, as the manifest will have already
+      // provided all of the details necessary to generate the audio playlist, as opposed to
+      // HLS' externally requested playlists), then the content is demuxed.
+      if (!audioGroup[groupId].uri && !audioGroup[groupId].playlists) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const unwrapCodecList = function (codecList) {
+    const codecs = {};
+    codecList.forEach(({
+      mediaType,
+      type,
+      details
+    }) => {
+      codecs[mediaType] = codecs[mediaType] || [];
+      codecs[mediaType].push(translateLegacyCodec(`${type}${details}`));
+    });
+    Object.keys(codecs).forEach(function (mediaType) {
+      if (codecs[mediaType].length > 1) {
+        logFn$1(`multiple ${mediaType} codecs found as attributes: ${codecs[mediaType].join(', ')}. Setting playlist codecs to null so that we wait for mux.js to probe segments for real codecs.`);
+        codecs[mediaType] = null;
+        return;
+      }
+      codecs[mediaType] = codecs[mediaType][0];
+    });
+    return codecs;
+  };
+  const codecCount = function (codecObj) {
+    let count = 0;
+    if (codecObj.audio) {
+      count++;
+    }
+    if (codecObj.video) {
+      count++;
+    }
+    return count;
+  };
+  /**
+   * Calculates the codec strings for a working configuration of
+   * SourceBuffers to play variant streams in a main playlist. If
+   * there is no possible working configuration, an empty object will be
+   * returned.
+   *
+   * @param main {Object} the m3u8 object for the main playlist
+   * @param media {Object} the m3u8 object for the variant playlist
+   * @return {Object} the codec strings.
+   *
+   * @private
+   */
+
+  const codecsForPlaylist = function (main, media) {
+    const mediaAttributes = media.attributes || {};
+    const codecInfo = unwrapCodecList(getCodecs(media) || []); // HLS with multiple-audio tracks must always get an audio codec.
+    // Put another way, there is no way to have a video-only multiple-audio HLS!
+
+    if (isMaat(main, media) && !codecInfo.audio) {
+      if (!isMuxed(main, media)) {
+        // It is possible for codecs to be specified on the audio media group playlist but
+        // not on the rendition playlist. This is mostly the case for DASH, where audio and
+        // video are always separate (and separately specified).
+        const defaultCodecs = unwrapCodecList(codecsFromDefault(main, mediaAttributes.AUDIO) || []);
+        if (defaultCodecs.audio) {
+          codecInfo.audio = defaultCodecs.audio;
+        }
+      }
+    }
+    return codecInfo;
+  };
+  const logFn = logger('PlaylistSelector');
+  const representationToString = function (representation) {
+    if (!representation || !representation.playlist) {
+      return;
+    }
+    const playlist = representation.playlist;
+    return JSON.stringify({
+      id: playlist.id,
+      bandwidth: representation.bandwidth,
+      width: representation.width,
+      height: representation.height,
+      codecs: playlist.attributes && playlist.attributes.CODECS || ''
+    });
+  }; // Utilities
+
+  /**
+   * Returns the CSS value for the specified property on an element
+   * using `getComputedStyle`. Firefox has a long-standing issue where
+   * getComputedStyle() may return null when running in an iframe with
+   * `display: none`.
+   *
+   * @see https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+   * @param {HTMLElement} el the htmlelement to work on
+   * @param {string} the proprety to get the style for
+   */
+
+  const safeGetComputedStyle = function (el, property) {
+    if (!el) {
+      return '';
+    }
+    const result = window.getComputedStyle(el);
+    if (!result) {
+      return '';
+    }
+    return result[property];
+  };
+  /**
+   * Resuable stable sort function
+   *
+   * @param {Playlists} array
+   * @param {Function} sortFn Different comparators
+   * @function stableSort
+   */
+
+  const stableSort = function (array, sortFn) {
+    const newArray = array.slice();
+    array.sort(function (left, right) {
+      const cmp = sortFn(left, right);
+      if (cmp === 0) {
+        return newArray.indexOf(left) - newArray.indexOf(right);
+      }
+      return cmp;
+    });
+  };
+  /**
+   * A comparator function to sort two playlist object by bandwidth.
+   *
+   * @param {Object} left a media playlist object
+   * @param {Object} right a media playlist object
+   * @return {number} Greater than zero if the bandwidth attribute of
+   * left is greater than the corresponding attribute of right. Less
+   * than zero if the bandwidth of right is greater than left and
+   * exactly zero if the two are equal.
+   */
+
+  const comparePlaylistBandwidth = function (left, right) {
+    let leftBandwidth;
+    let rightBandwidth;
+    if (left.attributes.BANDWIDTH) {
+      leftBandwidth = left.attributes.BANDWIDTH;
+    }
+    leftBandwidth = leftBandwidth || window.Number.MAX_VALUE;
+    if (right.attributes.BANDWIDTH) {
+      rightBandwidth = right.attributes.BANDWIDTH;
+    }
+    rightBandwidth = rightBandwidth || window.Number.MAX_VALUE;
+    return leftBandwidth - rightBandwidth;
+  };
+  /**
+   * A comparator function to sort two playlist object by resolution (width).
+   *
+   * @param {Object} left a media playlist object
+   * @param {Object} right a media playlist object
+   * @return {number} Greater than zero if the resolution.width attribute of
+   * left is greater than the corresponding attribute of right. Less
+   * than zero if the resolution.width of right is greater than left and
+   * exactly zero if the two are equal.
+   */
+
+  const comparePlaylistResolution = function (left, right) {
+    let leftWidth;
+    let rightWidth;
+    if (left.attributes.RESOLUTION && left.attributes.RESOLUTION.width) {
+      leftWidth = left.attributes.RESOLUTION.width;
+    }
+    leftWidth = leftWidth || window.Number.MAX_VALUE;
+    if (right.attributes.RESOLUTION && right.attributes.RESOLUTION.width) {
+      rightWidth = right.attributes.RESOLUTION.width;
+    }
+    rightWidth = rightWidth || window.Number.MAX_VALUE; // NOTE - Fallback to bandwidth sort as appropriate in cases where multiple renditions
+    // have the same media dimensions/ resolution
+
+    if (leftWidth === rightWidth && left.attributes.BANDWIDTH && right.attributes.BANDWIDTH) {
+      return left.attributes.BANDWIDTH - right.attributes.BANDWIDTH;
+    }
+    return leftWidth - rightWidth;
+  };
+  /**
+   * Chooses the appropriate media playlist based on bandwidth and player size
+   *
+   * @param {Object} main
+   *        Object representation of the main manifest
+   * @param {number} playerBandwidth
+   *        Current calculated bandwidth of the player
+   * @param {number} playerWidth
+   *        Current width of the player element (should account for the device pixel ratio)
+   * @param {number} playerHeight
+   *        Current height of the player element (should account for the device pixel ratio)
+   * @param {boolean} limitRenditionByPlayerDimensions
+   *        True if the player width and height should be used during the selection, false otherwise
+   * @param {Object} playlistController
+   *        the current playlistController object
+   * @return {Playlist} the highest bitrate playlist less than the
+   * currently detected bandwidth, accounting for some amount of
+   * bandwidth variance
+   */
+
+  let simpleSelector = function (main, playerBandwidth, playerWidth, playerHeight, limitRenditionByPlayerDimensions, playlistController) {
+    // If we end up getting called before `main` is available, exit early
+    if (!main) {
+      return;
+    }
+    const options = {
+      bandwidth: playerBandwidth,
+      width: playerWidth,
+      height: playerHeight,
+      limitRenditionByPlayerDimensions
+    };
+    let playlists = main.playlists; // if playlist is audio only, select between currently active audio group playlists.
+
+    if (Playlist.isAudioOnly(main)) {
+      playlists = playlistController.getAudioTrackPlaylists_(); // add audioOnly to options so that we log audioOnly: true
+      // at the buttom of this function for debugging.
+
+      options.audioOnly = true;
+    } // convert the playlists to an intermediary representation to make comparisons easier
+
+    let sortedPlaylistReps = playlists.map(playlist => {
+      let bandwidth;
+      const width = playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.width;
+      const height = playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.height;
+      bandwidth = playlist.attributes && playlist.attributes.BANDWIDTH;
+      bandwidth = bandwidth || window.Number.MAX_VALUE;
+      return {
+        bandwidth,
+        width,
+        height,
+        playlist
+      };
+    });
+    stableSort(sortedPlaylistReps, (left, right) => left.bandwidth - right.bandwidth); // filter out any playlists that have been excluded due to
+    // incompatible configurations
+
+    sortedPlaylistReps = sortedPlaylistReps.filter(rep => !Playlist.isIncompatible(rep.playlist)); // filter out any playlists that have been disabled manually through the representations
+    // api or excluded temporarily due to playback errors.
+
+    let enabledPlaylistReps = sortedPlaylistReps.filter(rep => Playlist.isEnabled(rep.playlist));
+    if (!enabledPlaylistReps.length) {
+      // if there are no enabled playlists, then they have all been excluded or disabled
+      // by the user through the representations api. In this case, ignore exclusion and
+      // fallback to what the user wants by using playlists the user has not disabled.
+      enabledPlaylistReps = sortedPlaylistReps.filter(rep => !Playlist.isDisabled(rep.playlist));
+    } // filter out any variant that has greater effective bitrate
+    // than the current estimated bandwidth
+
+    const bandwidthPlaylistReps = enabledPlaylistReps.filter(rep => rep.bandwidth * Config.BANDWIDTH_VARIANCE < playerBandwidth);
+    let highestRemainingBandwidthRep = bandwidthPlaylistReps[bandwidthPlaylistReps.length - 1]; // get all of the renditions with the same (highest) bandwidth
+    // and then taking the very first element
+
+    const bandwidthBestRep = bandwidthPlaylistReps.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0]; // if we're not going to limit renditions by player size, make an early decision.
+
+    if (limitRenditionByPlayerDimensions === false) {
+      const chosenRep = bandwidthBestRep || enabledPlaylistReps[0] || sortedPlaylistReps[0];
+      if (chosenRep && chosenRep.playlist) {
+        let type = 'sortedPlaylistReps';
+        if (bandwidthBestRep) {
+          type = 'bandwidthBestRep';
+        }
+        if (enabledPlaylistReps[0]) {
+          type = 'enabledPlaylistReps';
+        }
+        logFn(`choosing ${representationToString(chosenRep)} using ${type} with options`, options);
+        return chosenRep.playlist;
+      }
+      logFn('could not choose a playlist with options', options);
+      return null;
+    } // filter out playlists without resolution information
+
+    const haveResolution = bandwidthPlaylistReps.filter(rep => rep.width && rep.height); // sort variants by resolution
+
+    stableSort(haveResolution, (left, right) => left.width - right.width); // if we have the exact resolution as the player use it
+
+    const resolutionBestRepList = haveResolution.filter(rep => rep.width === playerWidth && rep.height === playerHeight);
+    highestRemainingBandwidthRep = resolutionBestRepList[resolutionBestRepList.length - 1]; // ensure that we pick the highest bandwidth variant that have exact resolution
+
+    const resolutionBestRep = resolutionBestRepList.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0];
+    let resolutionPlusOneList;
+    let resolutionPlusOneSmallest;
+    let resolutionPlusOneRep; // find the smallest variant that is larger than the player
+    // if there is no match of exact resolution
+
+    if (!resolutionBestRep) {
+      resolutionPlusOneList = haveResolution.filter(rep => rep.width > playerWidth || rep.height > playerHeight); // find all the variants have the same smallest resolution
+
+      resolutionPlusOneSmallest = resolutionPlusOneList.filter(rep => rep.width === resolutionPlusOneList[0].width && rep.height === resolutionPlusOneList[0].height); // ensure that we also pick the highest bandwidth variant that
+      // is just-larger-than the video player
+
+      highestRemainingBandwidthRep = resolutionPlusOneSmallest[resolutionPlusOneSmallest.length - 1];
+      resolutionPlusOneRep = resolutionPlusOneSmallest.filter(rep => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0];
+    }
+    let leastPixelDiffRep; // If this selector proves to be better than others,
+    // resolutionPlusOneRep and resolutionBestRep and all
+    // the code involving them should be removed.
+
+    if (playlistController.leastPixelDiffSelector) {
+      // find the variant that is closest to the player's pixel size
+      const leastPixelDiffList = haveResolution.map(rep => {
+        rep.pixelDiff = Math.abs(rep.width - playerWidth) + Math.abs(rep.height - playerHeight);
+        return rep;
+      }); // get the highest bandwidth, closest resolution playlist
+
+      stableSort(leastPixelDiffList, (left, right) => {
+        // sort by highest bandwidth if pixelDiff is the same
+        if (left.pixelDiff === right.pixelDiff) {
+          return right.bandwidth - left.bandwidth;
+        }
+        return left.pixelDiff - right.pixelDiff;
+      });
+      leastPixelDiffRep = leastPixelDiffList[0];
+    } // fallback chain of variants
+
+    const chosenRep = leastPixelDiffRep || resolutionPlusOneRep || resolutionBestRep || bandwidthBestRep || enabledPlaylistReps[0] || sortedPlaylistReps[0];
+    if (chosenRep && chosenRep.playlist) {
+      let type = 'sortedPlaylistReps';
+      if (leastPixelDiffRep) {
+        type = 'leastPixelDiffRep';
+      } else if (resolutionPlusOneRep) {
+        type = 'resolutionPlusOneRep';
+      } else if (resolutionBestRep) {
+        type = 'resolutionBestRep';
+      } else if (bandwidthBestRep) {
+        type = 'bandwidthBestRep';
+      } else if (enabledPlaylistReps[0]) {
+        type = 'enabledPlaylistReps';
+      }
+      logFn(`choosing ${representationToString(chosenRep)} using ${type} with options`, options);
+      return chosenRep.playlist;
+    }
+    logFn('could not choose a playlist with options', options);
+    return null;
+  };
+
+  /**
+   * Chooses the appropriate media playlist based on the most recent
+   * bandwidth estimate and the player size.
+   *
+   * Expects to be called within the context of an instance of VhsHandler
+   *
+   * @return {Playlist} the highest bitrate playlist less than the
+   * currently detected bandwidth, accounting for some amount of
+   * bandwidth variance
+   */
+
+  const lastBandwidthSelector = function () {
+    let pixelRatio = this.useDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
+    if (!isNaN(this.customPixelRatio)) {
+      pixelRatio = this.customPixelRatio;
+    }
+    return simpleSelector(this.playlists.main, this.systemBandwidth, parseInt(safeGetComputedStyle(this.tech_.el(), 'width'), 10) * pixelRatio, parseInt(safeGetComputedStyle(this.tech_.el(), 'height'), 10) * pixelRatio, this.limitRenditionByPlayerDimensions, this.playlistController_);
+  };
+  /**
+   * Chooses the appropriate media playlist based on an
+   * exponential-weighted moving average of the bandwidth after
+   * filtering for player size.
+   *
+   * Expects to be called within the context of an instance of VhsHandler
+   *
+   * @param {number} decay - a number between 0 and 1. Higher values of
+   * this parameter will cause previous bandwidth estimates to lose
+   * significance more quickly.
+   * @return {Function} a function which can be invoked to create a new
+   * playlist selector function.
+   * @see https://en.wikipedia.org/wiki/Moving_average#Exponential_moving_average
+   */
+
+  const movingAverageBandwidthSelector = function (decay) {
+    let average = -1;
+    let lastSystemBandwidth = -1;
+    if (decay < 0 || decay > 1) {
+      throw new Error('Moving average bandwidth decay must be between 0 and 1.');
+    }
+    return function () {
+      let pixelRatio = this.useDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
+      if (!isNaN(this.customPixelRatio)) {
+        pixelRatio = this.customPixelRatio;
+      }
+      if (average < 0) {
+        average = this.systemBandwidth;
+        lastSystemBandwidth = this.systemBandwidth;
+      } // stop the average value from decaying for every 250ms
+      // when the systemBandwidth is constant
+      // and
+      // stop average from setting to a very low value when the
+      // systemBandwidth becomes 0 in case of chunk cancellation
+
+      if (this.systemBandwidth > 0 && this.systemBandwidth !== lastSystemBandwidth) {
+        average = decay * this.systemBandwidth + (1 - decay) * average;
+        lastSystemBandwidth = this.systemBandwidth;
+      }
+      return simpleSelector(this.playlists.main, average, parseInt(safeGetComputedStyle(this.tech_.el(), 'width'), 10) * pixelRatio, parseInt(safeGetComputedStyle(this.tech_.el(), 'height'), 10) * pixelRatio, this.limitRenditionByPlayerDimensions, this.playlistController_);
+    };
+  };
+  /**
+   * Chooses the appropriate media playlist based on the potential to rebuffer
+   *
+   * @param {Object} settings
+   *        Object of information required to use this selector
+   * @param {Object} settings.main
+   *        Object representation of the main manifest
+   * @param {number} settings.currentTime
+   *        The current time of the player
+   * @param {number} settings.bandwidth
+   *        Current measured bandwidth
+   * @param {number} settings.duration
+   *        Duration of the media
+   * @param {number} settings.segmentDuration
+   *        Segment duration to be used in round trip time calculations
+   * @param {number} settings.timeUntilRebuffer
+   *        Time left in seconds until the player has to rebuffer
+   * @param {number} settings.currentTimeline
+   *        The current timeline segments are being loaded from
+   * @param {SyncController} settings.syncController
+   *        SyncController for determining if we have a sync point for a given playlist
+   * @return {Object|null}
+   *         {Object} return.playlist
+   *         The highest bandwidth playlist with the least amount of rebuffering
+   *         {Number} return.rebufferingImpact
+   *         The amount of time in seconds switching to this playlist will rebuffer. A
+   *         negative value means that switching will cause zero rebuffering.
+   */
+
+  const minRebufferMaxBandwidthSelector = function (settings) {
+    const {
+      main,
+      currentTime,
+      bandwidth,
+      duration,
+      segmentDuration,
+      timeUntilRebuffer,
+      currentTimeline,
+      syncController
+    } = settings; // filter out any playlists that have been excluded due to
+    // incompatible configurations
+
+    const compatiblePlaylists = main.playlists.filter(playlist => !Playlist.isIncompatible(playlist)); // filter out any playlists that have been disabled manually through the representations
+    // api or excluded temporarily due to playback errors.
+
+    let enabledPlaylists = compatiblePlaylists.filter(Playlist.isEnabled);
+    if (!enabledPlaylists.length) {
+      // if there are no enabled playlists, then they have all been excluded or disabled
+      // by the user through the representations api. In this case, ignore exclusion and
+      // fallback to what the user wants by using playlists the user has not disabled.
+      enabledPlaylists = compatiblePlaylists.filter(playlist => !Playlist.isDisabled(playlist));
+    }
+    const bandwidthPlaylists = enabledPlaylists.filter(Playlist.hasAttribute.bind(null, 'BANDWIDTH'));
+    const rebufferingEstimates = bandwidthPlaylists.map(playlist => {
+      const syncPoint = syncController.getSyncPoint(playlist, duration, currentTimeline, currentTime); // If there is no sync point for this playlist, switching to it will require a
+      // sync request first. This will double the request time
+
+      const numRequests = syncPoint ? 1 : 2;
+      const requestTimeEstimate = Playlist.estimateSegmentRequestTime(segmentDuration, bandwidth, playlist);
+      const rebufferingImpact = requestTimeEstimate * numRequests - timeUntilRebuffer;
+      return {
+        playlist,
+        rebufferingImpact
+      };
+    });
+    const noRebufferingPlaylists = rebufferingEstimates.filter(estimate => estimate.rebufferingImpact <= 0); // Sort by bandwidth DESC
+
+    stableSort(noRebufferingPlaylists, (a, b) => comparePlaylistBandwidth(b.playlist, a.playlist));
+    if (noRebufferingPlaylists.length) {
+      return noRebufferingPlaylists[0];
+    }
+    stableSort(rebufferingEstimates, (a, b) => a.rebufferingImpact - b.rebufferingImpact);
+    return rebufferingEstimates[0] || null;
+  };
+  /**
+   * Chooses the appropriate media playlist, which in this case is the lowest bitrate
+   * one with video.  If no renditions with video exist, return the lowest audio rendition.
+   *
+   * Expects to be called within the context of an instance of VhsHandler
+   *
+   * @return {Object|null}
+   *         {Object} return.playlist
+   *         The lowest bitrate playlist that contains a video codec.  If no such rendition
+   *         exists pick the lowest audio rendition.
+   */
+
+  const lowestBitrateCompatibleVariantSelector = function () {
+    // filter out any playlists that have been excluded due to
+    // incompatible configurations or playback errors
+    const playlists = this.playlists.main.playlists.filter(Playlist.isEnabled); // Sort ascending by bitrate
+
+    stableSort(playlists, (a, b) => comparePlaylistBandwidth(a, b)); // Parse and assume that playlists with no video codec have no video
+    // (this is not necessarily true, although it is generally true).
+    //
+    // If an entire manifest has no valid videos everything will get filtered
+    // out.
+
+    const playlistsWithVideo = playlists.filter(playlist => !!codecsForPlaylist(this.playlists.main, playlist).video);
+    return playlistsWithVideo[0] || null;
+  };
+
+  /**
+   * Combine all segments into a single Uint8Array
+   *
+   * @param {Object} segmentObj
+   * @return {Uint8Array} concatenated bytes
+   * @private
+   */
+  const concatSegments = segmentObj => {
+    let offset = 0;
+    let tempBuffer;
+    if (segmentObj.bytes) {
+      tempBuffer = new Uint8Array(segmentObj.bytes); // combine the individual segments into one large typed-array
+
+      segmentObj.segments.forEach(segment => {
+        tempBuffer.set(segment, offset);
+        offset += segment.byteLength;
+      });
+    }
+    return tempBuffer;
+  };
+  /**
+   * Example:
+   * https://host.com/path1/path2/path3/segment.ts?arg1=val1
+   * -->
+   * path3/segment.ts
+   *
+   * @param resolvedUri
+   * @return {string}
+   */
+
+  function compactSegmentUrlDescription(resolvedUri) {
+    try {
+      return new URL(resolvedUri).pathname.split('/').slice(-2).join('/');
+    } catch (e) {
+      return '';
+    }
+  }
+
+  /**
+   * @file text-tracks.js
+   */
+  /**
+   * Create captions text tracks on video.js if they do not exist
+   *
+   * @param {Object} inbandTextTracks a reference to current inbandTextTracks
+   * @param {Object} tech the video.js tech
+   * @param {Object} captionStream the caption stream to create
+   * @private
+   */
+
+  const createCaptionsTrackIfNotExists = function (inbandTextTracks, tech, captionStream) {
+    if (!inbandTextTracks[captionStream]) {
+      tech.trigger({
+        type: 'usage',
+        name: 'vhs-608'
+      });
+      let instreamId = captionStream; // we need to translate SERVICEn for 708 to how mux.js currently labels them
+
+      if (/^cc708_/.test(captionStream)) {
+        instreamId = 'SERVICE' + captionStream.split('_')[1];
+      }
+      const track = tech.textTracks().getTrackById(instreamId);
+      if (track) {
+        // Resuse an existing track with a CC# id because this was
+        // very likely created by videojs-contrib-hls from information
+        // in the m3u8 for us to use
+        inbandTextTracks[captionStream] = track;
+      } else {
+        // This section gets called when we have caption services that aren't specified in the manifest.
+        // Manifest level caption services are handled in media-groups.js under CLOSED-CAPTIONS.
+        const captionServices = tech.options_.vhs && tech.options_.vhs.captionServices || {};
+        let label = captionStream;
+        let language = captionStream;
+        let def = false;
+        const captionService = captionServices[instreamId];
+        if (captionService) {
+          label = captionService.label;
+          language = captionService.language;
+          def = captionService.default;
+        } // Otherwise, create a track with the default `CC#` label and
+        // without a language
+
+        inbandTextTracks[captionStream] = tech.addRemoteTextTrack({
+          kind: 'captions',
+          id: instreamId,
+          // TODO: investigate why this doesn't seem to turn the caption on by default
+          default: def,
+          label,
+          language
+        }, false).track;
+      }
+    }
+  };
+  /**
+   * Add caption text track data to a source handler given an array of captions
+   *
+   * @param {Object}
+   *   @param {Object} inbandTextTracks the inband text tracks
+   *   @param {number} timestampOffset the timestamp offset of the source buffer
+   *   @param {Array} captionArray an array of caption data
+   * @private
+   */
+
+  const addCaptionData = function ({
+    inbandTextTracks,
+    captionArray,
+    timestampOffset
+  }) {
+    if (!captionArray) {
+      return;
+    }
+    const Cue = window.WebKitDataCue || window.VTTCue;
+    captionArray.forEach(caption => {
+      const track = caption.stream; // in CEA 608 captions, video.js/mux.js sends a content array
+      // with positioning data
+
+      if (caption.content) {
+        caption.content.forEach(value => {
+          const cue = new Cue(caption.startTime + timestampOffset, caption.endTime + timestampOffset, value.text);
+          cue.line = value.line;
+          cue.align = 'left';
+          cue.position = value.position;
+          cue.positionAlign = 'line-left';
+          inbandTextTracks[track].addCue(cue);
+        });
+      } else {
+        // otherwise, a text value with combined captions is sent
+        inbandTextTracks[track].addCue(new Cue(caption.startTime + timestampOffset, caption.endTime + timestampOffset, caption.text));
+      }
+    });
+  };
+  /**
+   * Define properties on a cue for backwards compatability,
+   * but warn the user that the way that they are using it
+   * is depricated and will be removed at a later date.
+   *
+   * @param {Cue} cue the cue to add the properties on
+   * @private
+   */
+
+  const deprecateOldCue = function (cue) {
+    Object.defineProperties(cue.frame, {
+      id: {
+        get() {
+          videojs.log.warn('cue.frame.id is deprecated. Use cue.value.key instead.');
+          return cue.value.key;
+        }
+      },
+      value: {
+        get() {
+          videojs.log.warn('cue.frame.value is deprecated. Use cue.value.data instead.');
+          return cue.value.data;
+        }
+      },
+      privateData: {
+        get() {
+          videojs.log.warn('cue.frame.privateData is deprecated. Use cue.value.data instead.');
+          return cue.value.data;
+        }
+      }
+    });
+  };
+  /**
+   * Add metadata text track data to a source handler given an array of metadata
+   *
+   * @param {Object}
+   *   @param {Object} inbandTextTracks the inband text tracks
+   *   @param {Array} metadataArray an array of meta data
+   *   @param {number} timestampOffset the timestamp offset of the source buffer
+   *   @param {number} videoDuration the duration of the video
+   * @private
+   */
+
+  const addMetadata = ({
+    inbandTextTracks,
+    metadataArray,
+    timestampOffset,
+    videoDuration
+  }) => {
+    if (!metadataArray) {
+      return;
+    }
+    const Cue = window.WebKitDataCue || window.VTTCue;
+    const metadataTrack = inbandTextTracks.metadataTrack_;
+    if (!metadataTrack) {
+      return;
+    }
+    metadataArray.forEach(metadata => {
+      const time = metadata.cueTime + timestampOffset; // if time isn't a finite number between 0 and Infinity, like NaN,
+      // ignore this bit of metadata.
+      // This likely occurs when you have an non-timed ID3 tag like TIT2,
+      // which is the "Title/Songname/Content description" frame
+
+      if (typeof time !== 'number' || window.isNaN(time) || time < 0 || !(time < Infinity)) {
+        return;
+      } // If we have no frames, we can't create a cue.
+
+      if (!metadata.frames || !metadata.frames.length) {
+        return;
+      }
+      metadata.frames.forEach(frame => {
+        const cue = new Cue(time, time, frame.value || frame.url || frame.data || '');
+        cue.frame = frame;
+        cue.value = frame;
+        deprecateOldCue(cue);
+        metadataTrack.addCue(cue);
+      });
+    });
+    if (!metadataTrack.cues || !metadataTrack.cues.length) {
+      return;
+    } // Updating the metadeta cues so that
+    // the endTime of each cue is the startTime of the next cue
+    // the endTime of last cue is the duration of the video
+
+    const cues = metadataTrack.cues;
+    const cuesArray = []; // Create a copy of the TextTrackCueList...
+    // ...disregarding cues with a falsey value
+
+    for (let i = 0; i < cues.length; i++) {
+      if (cues[i]) {
+        cuesArray.push(cues[i]);
+      }
+    } // Group cues by their startTime value
+
+    const cuesGroupedByStartTime = cuesArray.reduce((obj, cue) => {
+      const timeSlot = obj[cue.startTime] || [];
+      timeSlot.push(cue);
+      obj[cue.startTime] = timeSlot;
+      return obj;
+    }, {}); // Sort startTimes by ascending order
+
+    const sortedStartTimes = Object.keys(cuesGroupedByStartTime).sort((a, b) => Number(a) - Number(b)); // Map each cue group's endTime to the next group's startTime
+
+    sortedStartTimes.forEach((startTime, idx) => {
+      const cueGroup = cuesGroupedByStartTime[startTime];
+      const finiteDuration = isFinite(videoDuration) ? videoDuration : startTime;
+      const nextTime = Number(sortedStartTimes[idx + 1]) || finiteDuration; // Map each cue's endTime the next group's startTime
+
+      cueGroup.forEach(cue => {
+        cue.endTime = nextTime;
+      });
+    });
+  }; // object for mapping daterange attributes
+
+  const dateRangeAttr = {
+    id: 'ID',
+    class: 'CLASS',
+    startDate: 'START-DATE',
+    duration: 'DURATION',
+    endDate: 'END-DATE',
+    endOnNext: 'END-ON-NEXT',
+    plannedDuration: 'PLANNED-DURATION',
+    scte35Out: 'SCTE35-OUT',
+    scte35In: 'SCTE35-IN'
+  };
+  const dateRangeKeysToOmit = new Set(['id', 'class', 'startDate', 'duration', 'endDate', 'endOnNext', 'startTime', 'endTime', 'processDateRange']);
+  /**
+   * Add DateRange metadata text track to a source handler given an array of metadata
+   *
+   * @param {Object}
+   *   @param {Object} inbandTextTracks the inband text tracks
+   *   @param {Array} dateRanges parsed media playlist
+   * @private
+   */
+
+  const addDateRangeMetadata = ({
+    inbandTextTracks,
+    dateRanges
+  }) => {
+    const metadataTrack = inbandTextTracks.metadataTrack_;
+    if (!metadataTrack) {
+      return;
+    }
+    const Cue = window.WebKitDataCue || window.VTTCue;
+    dateRanges.forEach(dateRange => {
+      // we generate multiple cues for each date range with different attributes
+      for (const key of Object.keys(dateRange)) {
+        if (dateRangeKeysToOmit.has(key)) {
+          continue;
+        }
+        const cue = new Cue(dateRange.startTime, dateRange.endTime, '');
+        cue.id = dateRange.id;
+        cue.type = 'com.apple.quicktime.HLS';
+        cue.value = {
+          key: dateRangeAttr[key],
+          data: dateRange[key]
+        };
+        if (key === 'scte35Out' || key === 'scte35In') {
+          cue.value.data = new Uint8Array(cue.value.data.match(/[\da-f]{2}/gi)).buffer;
+        }
+        metadataTrack.addCue(cue);
+      }
+      dateRange.processDateRange();
+    });
+  };
+  /**
+   * Create metadata text track on video.js if it does not exist
+   *
+   * @param {Object} inbandTextTracks a reference to current inbandTextTracks
+   * @param {string} dispatchType the inband metadata track dispatch type
+   * @param {Object} tech the video.js tech
+   * @private
+   */
+
+  const createMetadataTrackIfNotExists = (inbandTextTracks, dispatchType, tech) => {
+    if (inbandTextTracks.metadataTrack_) {
+      return;
+    }
+    inbandTextTracks.metadataTrack_ = tech.addRemoteTextTrack({
+      kind: 'metadata',
+      label: 'Timed Metadata'
+    }, false).track;
+    if (!videojs.browser.IS_ANY_SAFARI) {
+      inbandTextTracks.metadataTrack_.inBandMetadataTrackDispatchType = dispatchType;
+    }
+  };
+  /**
+   * Remove cues from a track on video.js.
+   *
+   * @param {Double} start start of where we should remove the cue
+   * @param {Double} end end of where the we should remove the cue
+   * @param {Object} track the text track to remove the cues from
+   * @private
+   */
+
+  const removeCuesFromTrack = function (start, end, track) {
+    let i;
+    let cue;
+    if (!track) {
+      return;
+    }
+    if (!track.cues) {
+      return;
+    }
+    i = track.cues.length;
+    while (i--) {
+      cue = track.cues[i]; // Remove any cue within the provided start and end time
+
+      if (cue.startTime >= start && cue.endTime <= end) {
+        track.removeCue(cue);
+      }
+    }
+  };
+  /**
+   * Remove duplicate cues from a track on video.js (a cue is considered a
+   * duplicate if it has the same time interval and text as another)
+   *
+   * @param {Object} track the text track to remove the duplicate cues from
+   * @private
+   */
+
+  const removeDuplicateCuesFromTrack = function (track) {
+    const cues = track.cues;
+    if (!cues) {
+      return;
+    }
+    const uniqueCues = {};
+    for (let i = cues.length - 1; i >= 0; i--) {
+      const cue = cues[i];
+      const cueKey = `${cue.startTime}-${cue.endTime}-${cue.text}`;
+      if (uniqueCues[cueKey]) {
+        track.removeCue(cue);
+      } else {
+        uniqueCues[cueKey] = cue;
+      }
+    }
+  };
+
+  /**
+   * Returns a list of gops in the buffer that have a pts value of 3 seconds or more in
+   * front of current time.
+   *
+   * @param {Array} buffer
+   *        The current buffer of gop information
+   * @param {number} currentTime
+   *        The current time
+   * @param {Double} mapping
+   *        Offset to map display time to stream presentation time
+   * @return {Array}
+   *         List of gops considered safe to append over
+   */
+
+  const gopsSafeToAlignWith = (buffer, currentTime, mapping) => {
+    if (typeof currentTime === 'undefined' || currentTime === null || !buffer.length) {
+      return [];
+    } // pts value for current time + 3 seconds to give a bit more wiggle room
+
+    const currentTimePts = Math.ceil((currentTime - mapping + 3) * clock_1);
+    let i;
+    for (i = 0; i < buffer.length; i++) {
+      if (buffer[i].pts > currentTimePts) {
+        break;
+      }
+    }
+    return buffer.slice(i);
+  };
+  /**
+   * Appends gop information (timing and byteLength) received by the transmuxer for the
+   * gops appended in the last call to appendBuffer
+   *
+   * @param {Array} buffer
+   *        The current buffer of gop information
+   * @param {Array} gops
+   *        List of new gop information
+   * @param {boolean} replace
+   *        If true, replace the buffer with the new gop information. If false, append the
+   *        new gop information to the buffer in the right location of time.
+   * @return {Array}
+   *         Updated list of gop information
+   */
+
+  const updateGopBuffer = (buffer, gops, replace) => {
+    if (!gops.length) {
+      return buffer;
+    }
+    if (replace) {
+      // If we are in safe append mode, then completely overwrite the gop buffer
+      // with the most recent appeneded data. This will make sure that when appending
+      // future segments, we only try to align with gops that are both ahead of current
+      // time and in the last segment appended.
+      return gops.slice();
+    }
+    const start = gops[0].pts;
+    let i = 0;
+    for (i; i < buffer.length; i++) {
+      if (buffer[i].pts >= start) {
+        break;
+      }
+    }
+    return buffer.slice(0, i).concat(gops);
+  };
+  /**
+   * Removes gop information in buffer that overlaps with provided start and end
+   *
+   * @param {Array} buffer
+   *        The current buffer of gop information
+   * @param {Double} start
+   *        position to start the remove at
+   * @param {Double} end
+   *        position to end the remove at
+   * @param {Double} mapping
+   *        Offset to map display time to stream presentation time
+   */
+
+  const removeGopBuffer = (buffer, start, end, mapping) => {
+    const startPts = Math.ceil((start - mapping) * clock_1);
+    const endPts = Math.ceil((end - mapping) * clock_1);
+    const updatedBuffer = buffer.slice();
+    let i = buffer.length;
+    while (i--) {
+      if (buffer[i].pts <= endPts) {
+        break;
+      }
+    }
+    if (i === -1) {
+      // no removal because end of remove range is before start of buffer
+      return updatedBuffer;
+    }
+    let j = i + 1;
+    while (j--) {
+      if (buffer[j].pts <= startPts) {
+        break;
+      }
+    } // clamp remove range start to 0 index
+
+    j = Math.max(j, 0);
+    updatedBuffer.splice(j, i - j + 1);
+    return updatedBuffer;
+  };
+  const shallowEqual = function (a, b) {
+    // if both are undefined
+    // or one or the other is undefined
+    // they are not equal
+    if (!a && !b || !a && b || a && !b) {
+      return false;
+    } // they are the same object and thus, equal
+
+    if (a === b) {
+      return true;
+    } // sort keys so we can make sure they have
+    // all the same keys later.
+
+    const akeys = Object.keys(a).sort();
+    const bkeys = Object.keys(b).sort(); // different number of keys, not equal
+
+    if (akeys.length !== bkeys.length) {
+      return false;
+    }
+    for (let i = 0; i < akeys.length; i++) {
+      const key = akeys[i]; // different sorted keys, not equal
+
+      if (key !== bkeys[i]) {
+        return false;
+      } // different values, not equal
+
+      if (a[key] !== b[key]) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  // https://www.w3.org/TR/WebIDL-1/#quotaexceedederror
+  const QUOTA_EXCEEDED_ERR = 22;
+
+  /**
+   * The segment loader has no recourse except to fetch a segment in the
+   * current playlist and use the internal timestamps in that segment to
+   * generate a syncPoint. This function returns a good candidate index
+   * for that process.
+   *
+   * @param {Array} segments - the segments array from a playlist.
+   * @return {number} An index of a segment from the playlist to load
+   */
+
+  const getSyncSegmentCandidate = function (currentTimeline, segments, targetTime) {
+    segments = segments || [];
+    const timelineSegments = [];
+    let time = 0;
+    for (let i = 0; i < segments.length; i++) {
+      const segment = segments[i];
+      if (currentTimeline === segment.timeline) {
+        timelineSegments.push(i);
+        time += segment.duration;
+        if (time > targetTime) {
+          return i;
+        }
+      }
+    }
+    if (timelineSegments.length === 0) {
+      return 0;
+    } // default to the last timeline segment
+
+    return timelineSegments[timelineSegments.length - 1];
+  }; // In the event of a quota exceeded error, keep at least one second of back buffer. This
+  // number was arbitrarily chosen and may be updated in the future, but seemed reasonable
+  // as a start to prevent any potential issues with removing content too close to the
+  // playhead.
+
+  const MIN_BACK_BUFFER = 1; // in ms
+
+  const CHECK_BUFFER_DELAY = 500;
+  const finite = num => typeof num === 'number' && isFinite(num); // With most content hovering around 30fps, if a segment has a duration less than a half
+  // frame at 30fps or one frame at 60fps, the bandwidth and throughput calculations will
+  // not accurately reflect the rest of the content.
+
+  const MIN_SEGMENT_DURATION_TO_SAVE_STATS = 1 / 60;
+  const illegalMediaSwitch = (loaderType, startingMedia, trackInfo) => {
+    // Although these checks should most likely cover non 'main' types, for now it narrows
+    // the scope of our checks.
+    if (loaderType !== 'main' || !startingMedia || !trackInfo) {
+      return null;
+    }
+    if (!trackInfo.hasAudio && !trackInfo.hasVideo) {
+      return 'Neither audio nor video found in segment.';
+    }
+    if (startingMedia.hasVideo && !trackInfo.hasVideo) {
+      return 'Only audio found in segment when we expected video.' + ' We can\'t switch to audio only from a stream that had video.' + ' To get rid of this message, please add codec information to the manifest.';
+    }
+    if (!startingMedia.hasVideo && trackInfo.hasVideo) {
+      return 'Video found in segment when we expected only audio.' + ' We can\'t switch to a stream with video from an audio only stream.' + ' To get rid of this message, please add codec information to the manifest.';
+    }
+    return null;
+  };
+  /**
+   * Calculates a time value that is safe to remove from the back buffer without interrupting
+   * playback.
+   *
+   * @param {TimeRange} seekable
+   *        The current seekable range
+   * @param {number} currentTime
+   *        The current time of the player
+   * @param {number} targetDuration
+   *        The target duration of the current playlist
+   * @return {number}
+   *         Time that is safe to remove from the back buffer without interrupting playback
+   */
+
+  const safeBackBufferTrimTime = (seekable, currentTime, targetDuration) => {
+    // 30 seconds before the playhead provides a safe default for trimming.
+    //
+    // Choosing a reasonable default is particularly important for high bitrate content and
+    // VOD videos/live streams with large windows, as the buffer may end up overfilled and
+    // throw an APPEND_BUFFER_ERR.
+    let trimTime = currentTime - Config.BACK_BUFFER_LENGTH;
+    if (seekable.length) {
+      // Some live playlists may have a shorter window of content than the full allowed back
+      // buffer. For these playlists, don't save content that's no longer within the window.
+      trimTime = Math.max(trimTime, seekable.start(0));
+    } // Don't remove within target duration of the current time to avoid the possibility of
+    // removing the GOP currently being played, as removing it can cause playback stalls.
+
+    const maxTrimTime = currentTime - targetDuration;
+    return Math.min(maxTrimTime, trimTime);
+  };
+  const segmentInfoString = segmentInfo => {
+    const {
+      startOfSegment,
+      duration,
+      segment,
+      part,
+      playlist: {
+        mediaSequence: seq,
+        id,
+        segments = []
+      },
+      mediaIndex: index,
+      partIndex,
+      timeline
+    } = segmentInfo;
+    const segmentLen = segments.length - 1;
+    let selection = 'mediaIndex/partIndex increment';
+    if (segmentInfo.getMediaInfoForTime) {
+      selection = `getMediaInfoForTime (${segmentInfo.getMediaInfoForTime})`;
+    } else if (segmentInfo.isSyncRequest) {
+      selection = 'getSyncSegmentCandidate (isSyncRequest)';
+    }
+    if (segmentInfo.independent) {
+      selection += ` with independent ${segmentInfo.independent}`;
+    }
+    const hasPartIndex = typeof partIndex === 'number';
+    const name = segmentInfo.segment.uri ? 'segment' : 'pre-segment';
+    const zeroBasedPartCount = hasPartIndex ? getKnownPartCount({
+      preloadSegment: segment
+    }) - 1 : 0;
+    return `${name} [${seq + index}/${seq + segmentLen}]` + (hasPartIndex ? ` part [${partIndex}/${zeroBasedPartCount}]` : '') + ` segment start/end [${segment.start} => ${segment.end}]` + (hasPartIndex ? ` part start/end [${part.start} => ${part.end}]` : '') + ` startOfSegment [${startOfSegment}]` + ` duration [${duration}]` + ` timeline [${timeline}]` + ` selected by [${selection}]` + ` playlist [${id}]`;
+  };
+  const timingInfoPropertyForMedia = mediaType => `${mediaType}TimingInfo`;
+  /**
+   * Returns the timestamp offset to use for the segment.
+   *
+   * @param {number} segmentTimeline
+   *        The timeline of the segment
+   * @param {number} currentTimeline
+   *        The timeline currently being followed by the loader
+   * @param {number} startOfSegment
+   *        The estimated segment start
+   * @param {TimeRange[]} buffered
+   *        The loader's buffer
+   * @param {boolean} overrideCheck
+   *        If true, no checks are made to see if the timestamp offset value should be set,
+   *        but sets it directly to a value.
+   *
+   * @return {number|null}
+   *         Either a number representing a new timestamp offset, or null if the segment is
+   *         part of the same timeline
+   */
+
+  const timestampOffsetForSegment = ({
+    segmentTimeline,
+    currentTimeline,
+    startOfSegment,
+    buffered,
+    overrideCheck
+  }) => {
+    // Check to see if we are crossing a discontinuity to see if we need to set the
+    // timestamp offset on the transmuxer and source buffer.
+    //
+    // Previously, we changed the timestampOffset if the start of this segment was less than
+    // the currently set timestampOffset, but this isn't desirable as it can produce bad
+    // behavior, especially around long running live streams.
+    if (!overrideCheck && segmentTimeline === currentTimeline) {
+      return null;
+    } // When changing renditions, it's possible to request a segment on an older timeline. For
+    // instance, given two renditions with the following:
+    //
+    // #EXTINF:10
+    // segment1
+    // #EXT-X-DISCONTINUITY
+    // #EXTINF:10
+    // segment2
+    // #EXTINF:10
+    // segment3
+    //
+    // And the current player state:
+    //
+    // current time: 8
+    // buffer: 0 => 20
+    //
+    // The next segment on the current rendition would be segment3, filling the buffer from
+    // 20s onwards. However, if a rendition switch happens after segment2 was requested,
+    // then the next segment to be requested will be segment1 from the new rendition in
+    // order to fill time 8 and onwards. Using the buffered end would result in repeated
+    // content (since it would position segment1 of the new rendition starting at 20s). This
+    // case can be identified when the new segment's timeline is a prior value. Instead of
+    // using the buffered end, the startOfSegment can be used, which, hopefully, will be
+    // more accurate to the actual start time of the segment.
+
+    if (segmentTimeline < currentTimeline) {
+      return startOfSegment;
+    } // segmentInfo.startOfSegment used to be used as the timestamp offset, however, that
+    // value uses the end of the last segment if it is available. While this value
+    // should often be correct, it's better to rely on the buffered end, as the new
+    // content post discontinuity should line up with the buffered end as if it were
+    // time 0 for the new content.
+
+    return buffered.length ? buffered.end(buffered.length - 1) : startOfSegment;
+  };
+  /**
+   * Returns whether or not the loader should wait for a timeline change from the timeline
+   * change controller before processing the segment.
+   *
+   * Primary timing in VHS goes by video. This is different from most media players, as
+   * audio is more often used as the primary timing source. For the foreseeable future, VHS
+   * will continue to use video as the primary timing source, due to the current logic and
+   * expectations built around it.
+
+   * Since the timing follows video, in order to maintain sync, the video loader is
+   * responsible for setting both audio and video source buffer timestamp offsets.
+   *
+   * Setting different values for audio and video source buffers could lead to
+   * desyncing. The following examples demonstrate some of the situations where this
+   * distinction is important. Note that all of these cases involve demuxed content. When
+   * content is muxed, the audio and video are packaged together, therefore syncing
+   * separate media playlists is not an issue.
+   *
+   * CASE 1: Audio prepares to load a new timeline before video:
+   *
+   * Timeline:       0                 1
+   * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Audio Loader:                     ^
+   * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Video Loader              ^
+   *
+   * In the above example, the audio loader is preparing to load the 6th segment, the first
+   * after a discontinuity, while the video loader is still loading the 5th segment, before
+   * the discontinuity.
+   *
+   * If the audio loader goes ahead and loads and appends the 6th segment before the video
+   * loader crosses the discontinuity, then when appended, the 6th audio segment will use
+   * the timestamp offset from timeline 0. This will likely lead to desyncing. In addition,
+   * the audio loader must provide the audioAppendStart value to trim the content in the
+   * transmuxer, and that value relies on the audio timestamp offset. Since the audio
+   * timestamp offset is set by the video (main) loader, the audio loader shouldn't load the
+   * segment until that value is provided.
+   *
+   * CASE 2: Video prepares to load a new timeline before audio:
+   *
+   * Timeline:       0                 1
+   * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Audio Loader:             ^
+   * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Video Loader                      ^
+   *
+   * In the above example, the video loader is preparing to load the 6th segment, the first
+   * after a discontinuity, while the audio loader is still loading the 5th segment, before
+   * the discontinuity.
+   *
+   * If the video loader goes ahead and loads and appends the 6th segment, then once the
+   * segment is loaded and processed, both the video and audio timestamp offsets will be
+   * set, since video is used as the primary timing source. This is to ensure content lines
+   * up appropriately, as any modifications to the video timing are reflected by audio when
+   * the video loader sets the audio and video timestamp offsets to the same value. However,
+   * setting the timestamp offset for audio before audio has had a chance to change
+   * timelines will likely lead to desyncing, as the audio loader will append segment 5 with
+   * a timestamp intended to apply to segments from timeline 1 rather than timeline 0.
+   *
+   * CASE 3: When seeking, audio prepares to load a new timeline before video
+   *
+   * Timeline:       0                 1
+   * Audio Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Audio Loader:           ^
+   * Video Segments: 0 1 2 3 4 5 DISCO 6 7 8 9
+   * Video Loader            ^
+   *
+   * In the above example, both audio and video loaders are loading segments from timeline
+   * 0, but imagine that the seek originated from timeline 1.
+   *
+   * When seeking to a new timeline, the timestamp offset will be set based on the expected
+   * segment start of the loaded video segment. In order to maintain sync, the audio loader
+   * must wait for the video loader to load its segment and update both the audio and video
+   * timestamp offsets before it may load and append its own segment. This is the case
+   * whether the seek results in a mismatched segment request (e.g., the audio loader
+   * chooses to load segment 3 and the video loader chooses to load segment 4) or the
+   * loaders choose to load the same segment index from each playlist, as the segments may
+   * not be aligned perfectly, even for matching segment indexes.
+   *
+   * @param {Object} timelinechangeController
+   * @param {number} currentTimeline
+   *        The timeline currently being followed by the loader
+   * @param {number} segmentTimeline
+   *        The timeline of the segment being loaded
+   * @param {('main'|'audio')} loaderType
+   *        The loader type
+   * @param {boolean} audioDisabled
+   *        Whether the audio is disabled for the loader. This should only be true when the
+   *        loader may have muxed audio in its segment, but should not append it, e.g., for
+   *        the main loader when an alternate audio playlist is active.
+   *
+   * @return {boolean}
+   *         Whether the loader should wait for a timeline change from the timeline change
+   *         controller before processing the segment
+   */
+
+  const shouldWaitForTimelineChange = ({
+    timelineChangeController,
+    currentTimeline,
+    segmentTimeline,
+    loaderType,
+    audioDisabled
+  }) => {
+    if (currentTimeline === segmentTimeline) {
+      return false;
+    }
+    if (loaderType === 'audio') {
+      const lastMainTimelineChange = timelineChangeController.lastTimelineChange({
+        type: 'main'
+      }); // Audio loader should wait if:
+      //
+      // * main hasn't had a timeline change yet (thus has not loaded its first segment)
+      // * main hasn't yet changed to the timeline audio is looking to load
+
+      return !lastMainTimelineChange || lastMainTimelineChange.to !== segmentTimeline;
+    } // The main loader only needs to wait for timeline changes if there's demuxed audio.
+    // Otherwise, there's nothing to wait for, since audio would be muxed into the main
+    // loader's segments (or the content is audio/video only and handled by the main
+    // loader).
+
+    if (loaderType === 'main' && audioDisabled) {
+      const pendingAudioTimelineChange = timelineChangeController.pendingTimelineChange({
+        type: 'audio'
+      }); // Main loader should wait for the audio loader if audio is not pending a timeline
+      // change to the current timeline.
+      //
+      // Since the main loader is responsible for setting the timestamp offset for both
+      // audio and video, the main loader must wait for audio to be about to change to its
+      // timeline before setting the offset, otherwise, if audio is behind in loading,
+      // segments from the previous timeline would be adjusted by the new timestamp offset.
+      //
+      // This requirement means that video will not cross a timeline until the audio is
+      // about to cross to it, so that way audio and video will always cross the timeline
+      // together.
+      //
+      // In addition to normal timeline changes, these rules also apply to the start of a
+      // stream (going from a non-existent timeline, -1, to timeline 0). It's important
+      // that these rules apply to the first timeline change because if they did not, it's
+      // possible that the main loader will cross two timelines before the audio loader has
+      // crossed one. Logic may be implemented to handle the startup as a special case, but
+      // it's easier to simply treat all timeline changes the same.
+
+      if (pendingAudioTimelineChange && pendingAudioTimelineChange.to === segmentTimeline) {
+        return false;
+      }
+      return true;
+    }
+    return false;
+  };
+  const mediaDuration = timingInfos => {
+    let maxDuration = 0;
+    ['video', 'audio'].forEach(function (type) {
+      const typeTimingInfo = timingInfos[`${type}TimingInfo`];
+      if (!typeTimingInfo) {
+        return;
+      }
+      const {
+        start,
+        end
+      } = typeTimingInfo;
+      let duration;
+      if (typeof start === 'bigint' || typeof end === 'bigint') {
+        duration = window.BigInt(end) - window.BigInt(start);
+      } else if (typeof start === 'number' && typeof end === 'number') {
+        duration = end - start;
+      }
+      if (typeof duration !== 'undefined' && duration > maxDuration) {
+        maxDuration = duration;
+      }
+    }); // convert back to a number if it is lower than MAX_SAFE_INTEGER
+    // as we only need BigInt when we are above that.
+
+    if (typeof maxDuration === 'bigint' && maxDuration < Number.MAX_SAFE_INTEGER) {
+      maxDuration = Number(maxDuration);
+    }
+    return maxDuration;
+  };
+  const segmentTooLong = ({
+    segmentDuration,
+    maxDuration
+  }) => {
+    // 0 duration segments are most likely due to metadata only segments or a lack of
+    // information.
+    if (!segmentDuration) {
+      return false;
+    } // For HLS:
+    //
+    // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.3.1
+    // The EXTINF duration of each Media Segment in the Playlist
+    // file, when rounded to the nearest integer, MUST be less than or equal
+    // to the target duration; longer segments can trigger playback stalls
+    // or other errors.
+    //
+    // For DASH, the mpd-parser uses the largest reported segment duration as the target
+    // duration. Although that reported duration is occasionally approximate (i.e., not
+    // exact), a strict check may report that a segment is too long more often in DASH.
+
+    return Math.round(segmentDuration) > maxDuration + TIME_FUDGE_FACTOR;
+  };
+  const getTroublesomeSegmentDurationMessage = (segmentInfo, sourceType) => {
+    // Right now we aren't following DASH's timing model exactly, so only perform
+    // this check for HLS content.
+    if (sourceType !== 'hls') {
+      return null;
+    }
+    const segmentDuration = mediaDuration({
+      audioTimingInfo: segmentInfo.audioTimingInfo,
+      videoTimingInfo: segmentInfo.videoTimingInfo
+    }); // Don't report if we lack information.
+    //
+    // If the segment has a duration of 0 it is either a lack of information or a
+    // metadata only segment and shouldn't be reported here.
+
+    if (!segmentDuration) {
+      return null;
+    }
+    const targetDuration = segmentInfo.playlist.targetDuration;
+    const isSegmentWayTooLong = segmentTooLong({
+      segmentDuration,
+      maxDuration: targetDuration * 2
+    });
+    const isSegmentSlightlyTooLong = segmentTooLong({
+      segmentDuration,
+      maxDuration: targetDuration
+    });
+    const segmentTooLongMessage = `Segment with index ${segmentInfo.mediaIndex} ` + `from playlist ${segmentInfo.playlist.id} ` + `has a duration of ${segmentDuration} ` + `when the reported duration is ${segmentInfo.duration} ` + `and the target duration is ${targetDuration}. ` + 'For HLS content, a duration in excess of the target duration may result in ' + 'playback issues. See the HLS specification section on EXT-X-TARGETDURATION for ' + 'more details: ' + 'https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.3.1';
+    if (isSegmentWayTooLong || isSegmentSlightlyTooLong) {
+      return {
+        severity: isSegmentWayTooLong ? 'warn' : 'info',
+        message: segmentTooLongMessage
+      };
+    }
+    return null;
+  };
+  /**
+   * An object that manages segment loading and appending.
+   *
+   * @class SegmentLoader
+   * @param {Object} options required and optional options
+   * @extends videojs.EventTarget
+   */
+
+  class SegmentLoader extends videojs.EventTarget {
+    constructor(settings, options = {}) {
+      super(); // check pre-conditions
+
+      if (!settings) {
+        throw new TypeError('Initialization settings are required');
+      }
+      if (typeof settings.currentTime !== 'function') {
+        throw new TypeError('No currentTime getter specified');
+      }
+      if (!settings.mediaSource) {
+        throw new TypeError('No MediaSource specified');
+      } // public properties
+
+      this.bandwidth = settings.bandwidth;
+      this.throughput = {
+        rate: 0,
+        count: 0
+      };
+      this.roundTrip = NaN;
+      this.resetStats_();
+      this.mediaIndex = null;
+      this.partIndex = null; // private settings
+
+      this.hasPlayed_ = settings.hasPlayed;
+      this.currentTime_ = settings.currentTime;
+      this.seekable_ = settings.seekable;
+      this.seeking_ = settings.seeking;
+      this.duration_ = settings.duration;
+      this.mediaSource_ = settings.mediaSource;
+      this.vhs_ = settings.vhs;
+      this.loaderType_ = settings.loaderType;
+      this.currentMediaInfo_ = void 0;
+      this.startingMediaInfo_ = void 0;
+      this.segmentMetadataTrack_ = settings.segmentMetadataTrack;
+      this.goalBufferLength_ = settings.goalBufferLength;
+      this.sourceType_ = settings.sourceType;
+      this.sourceUpdater_ = settings.sourceUpdater;
+      this.inbandTextTracks_ = settings.inbandTextTracks;
+      this.state_ = 'INIT';
+      this.timelineChangeController_ = settings.timelineChangeController;
+      this.shouldSaveSegmentTimingInfo_ = true;
+      this.parse708captions_ = settings.parse708captions;
+      this.useDtsForTimestampOffset_ = settings.useDtsForTimestampOffset;
+      this.captionServices_ = settings.captionServices;
+      this.exactManifestTimings = settings.exactManifestTimings;
+      this.addMetadataToTextTrack = settings.addMetadataToTextTrack; // private instance variables
+
+      this.checkBufferTimeout_ = null;
+      this.error_ = void 0;
+      this.currentTimeline_ = -1;
+      this.shouldForceTimestampOffsetAfterResync_ = false;
+      this.pendingSegment_ = null;
+      this.xhrOptions_ = null;
+      this.pendingSegments_ = [];
+      this.audioDisabled_ = false;
+      this.isPendingTimestampOffset_ = false; // TODO possibly move gopBuffer and timeMapping info to a separate controller
+
+      this.gopBuffer_ = [];
+      this.timeMapping_ = 0;
+      this.safeAppend_ = false;
+      this.appendInitSegment_ = {
+        audio: true,
+        video: true
+      };
+      this.playlistOfLastInitSegment_ = {
+        audio: null,
+        video: null
+      };
+      this.callQueue_ = []; // If the segment loader prepares to load a segment, but does not have enough
+      // information yet to start the loading process (e.g., if the audio loader wants to
+      // load a segment from the next timeline but the main loader hasn't yet crossed that
+      // timeline), then the load call will be added to the queue until it is ready to be
+      // processed.
+
+      this.loadQueue_ = [];
+      this.metadataQueue_ = {
+        id3: [],
+        caption: []
+      };
+      this.waitingOnRemove_ = false;
+      this.quotaExceededErrorRetryTimeout_ = null; // Fragmented mp4 playback
+
+      this.activeInitSegmentId_ = null;
+      this.initSegments_ = {}; // HLSe playback
+
+      this.cacheEncryptionKeys_ = settings.cacheEncryptionKeys;
+      this.keyCache_ = {};
+      this.decrypter_ = settings.decrypter; // Manages the tracking and generation of sync-points, mappings
+      // between a time in the display time and a segment index within
+      // a playlist
+
+      this.syncController_ = settings.syncController;
+      this.syncPoint_ = {
+        segmentIndex: 0,
+        time: 0
+      };
+      this.transmuxer_ = this.createTransmuxer_();
+      this.triggerSyncInfoUpdate_ = () => this.trigger('syncinfoupdate');
+      this.syncController_.on('syncinfoupdate', this.triggerSyncInfoUpdate_);
+      this.mediaSource_.addEventListener('sourceopen', () => {
+        if (!this.isEndOfStream_()) {
+          this.ended_ = false;
+        }
+      }); // ...for determining the fetch location
+
+      this.fetchAtBuffer_ = false;
+      this.logger_ = logger(`SegmentLoader[${this.loaderType_}]`);
+      Object.defineProperty(this, 'state', {
+        get() {
+          return this.state_;
+        },
+        set(newState) {
+          if (newState !== this.state_) {
+            this.logger_(`${this.state_} -> ${newState}`);
+            this.state_ = newState;
+            this.trigger('statechange');
+          }
+        }
+      });
+      this.sourceUpdater_.on('ready', () => {
+        if (this.hasEnoughInfoToAppend_()) {
+          this.processCallQueue_();
+        }
+      }); // Only the main loader needs to listen for pending timeline changes, as the main
+      // loader should wait for audio to be ready to change its timeline so that both main
+      // and audio timelines change together. For more details, see the
+      // shouldWaitForTimelineChange function.
+
+      if (this.loaderType_ === 'main') {
+        this.timelineChangeController_.on('pendingtimelinechange', () => {
+          if (this.hasEnoughInfoToAppend_()) {
+            this.processCallQueue_();
+          }
+        });
+      } // The main loader only listens on pending timeline changes, but the audio loader,
+      // since its loads follow main, needs to listen on timeline changes. For more details,
+      // see the shouldWaitForTimelineChange function.
+
+      if (this.loaderType_ === 'audio') {
+        this.timelineChangeController_.on('timelinechange', () => {
+          if (this.hasEnoughInfoToLoad_()) {
+            this.processLoadQueue_();
+          }
+          if (this.hasEnoughInfoToAppend_()) {
+            this.processCallQueue_();
+          }
+        });
+      }
+    }
+    /**
+     * TODO: Current sync controller consists of many hls-specific strategies
+     * media sequence sync is also hls-specific, and we would like to be protocol-agnostic on this level
+     * this should be a part of the sync-controller and sync controller should expect different strategy list based on the protocol.
+     *
+     * @return {MediaSequenceSync|null}
+     * @private
+     */
+
+    get mediaSequenceSync_() {
+      return this.syncController_.getMediaSequenceSync(this.loaderType_);
+    }
+    createTransmuxer_() {
+      return segmentTransmuxer.createTransmuxer({
+        remux: false,
+        alignGopsAtEnd: this.safeAppend_,
+        keepOriginalTimestamps: true,
+        parse708captions: this.parse708captions_,
+        captionServices: this.captionServices_
+      });
+    }
+    /**
+     * reset all of our media stats
+     *
+     * @private
+     */
+
+    resetStats_() {
+      this.mediaBytesTransferred = 0;
+      this.mediaRequests = 0;
+      this.mediaRequestsAborted = 0;
+      this.mediaRequestsTimedout = 0;
+      this.mediaRequestsErrored = 0;
+      this.mediaTransferDuration = 0;
+      this.mediaSecondsLoaded = 0;
+      this.mediaAppends = 0;
+    }
+    /**
+     * dispose of the SegmentLoader and reset to the default state
+     */
+
+    dispose() {
+      this.trigger('dispose');
+      this.state = 'DISPOSED';
+      this.pause();
+      this.abort_();
+      if (this.transmuxer_) {
+        this.transmuxer_.terminate();
+      }
+      this.resetStats_();
+      if (this.checkBufferTimeout_) {
+        window.clearTimeout(this.checkBufferTimeout_);
+      }
+      if (this.syncController_ && this.triggerSyncInfoUpdate_) {
+        this.syncController_.off('syncinfoupdate', this.triggerSyncInfoUpdate_);
+      }
+      this.off();
+    }
+    setAudio(enable) {
+      this.audioDisabled_ = !enable;
+      if (enable) {
+        this.appendInitSegment_.audio = true;
+      } else {
+        // remove current track audio if it gets disabled
+        this.sourceUpdater_.removeAudio(0, this.duration_());
+      }
+    }
+    /**
+     * abort anything that is currently doing on with the SegmentLoader
+     * and reset to a default state
+     */
+
+    abort() {
+      if (this.state !== 'WAITING') {
+        if (this.pendingSegment_) {
+          this.pendingSegment_ = null;
+        }
+        return;
+      }
+      this.abort_(); // We aborted the requests we were waiting on, so reset the loader's state to READY
+      // since we are no longer "waiting" on any requests. XHR callback is not always run
+      // when the request is aborted. This will prevent the loader from being stuck in the
+      // WAITING state indefinitely.
+
+      this.state = 'READY'; // don't wait for buffer check timeouts to begin fetching the
+      // next segment
+
+      if (!this.paused()) {
+        this.monitorBuffer_();
+      }
+    }
+    /**
+     * abort all pending xhr requests and null any pending segements
+     *
+     * @private
+     */
+
+    abort_() {
+      if (this.pendingSegment_ && this.pendingSegment_.abortRequests) {
+        this.pendingSegment_.abortRequests();
+      } // clear out the segment being processed
+
+      this.pendingSegment_ = null;
+      this.callQueue_ = [];
+      this.loadQueue_ = [];
+      this.metadataQueue_.id3 = [];
+      this.metadataQueue_.caption = [];
+      this.timelineChangeController_.clearPendingTimelineChange(this.loaderType_);
+      this.waitingOnRemove_ = false;
+      window.clearTimeout(this.quotaExceededErrorRetryTimeout_);
+      this.quotaExceededErrorRetryTimeout_ = null;
+    }
+    checkForAbort_(requestId) {
+      // If the state is APPENDING, then aborts will not modify the state, meaning the first
+      // callback that happens should reset the state to READY so that loading can continue.
+      if (this.state === 'APPENDING' && !this.pendingSegment_) {
+        this.state = 'READY';
+        return true;
+      }
+      if (!this.pendingSegment_ || this.pendingSegment_.requestId !== requestId) {
+        return true;
+      }
+      return false;
+    }
+    /**
+     * set an error on the segment loader and null out any pending segements
+     *
+     * @param {Error} error the error to set on the SegmentLoader
+     * @return {Error} the error that was set or that is currently set
+     */
+
+    error(error) {
+      if (typeof error !== 'undefined') {
+        this.logger_('error occurred:', error);
+        this.error_ = error;
+      }
+      this.pendingSegment_ = null;
+      return this.error_;
+    }
+    endOfStream() {
+      this.ended_ = true;
+      if (this.transmuxer_) {
+        // need to clear out any cached data to prepare for the new segment
+        segmentTransmuxer.reset(this.transmuxer_);
+      }
+      this.gopBuffer_.length = 0;
+      this.pause();
+      this.trigger('ended');
+    }
+    /**
+     * Indicates which time ranges are buffered
+     *
+     * @return {TimeRange}
+     *         TimeRange object representing the current buffered ranges
+     */
+
+    buffered_() {
+      const trackInfo = this.getMediaInfo_();
+      if (!this.sourceUpdater_ || !trackInfo) {
+        return createTimeRanges();
+      }
+      if (this.loaderType_ === 'main') {
+        const {
+          hasAudio,
+          hasVideo,
+          isMuxed
+        } = trackInfo;
+        if (hasVideo && hasAudio && !this.audioDisabled_ && !isMuxed) {
+          return this.sourceUpdater_.buffered();
+        }
+        if (hasVideo) {
+          return this.sourceUpdater_.videoBuffered();
+        }
+      } // One case that can be ignored for now is audio only with alt audio,
+      // as we don't yet have proper support for that.
+
+      return this.sourceUpdater_.audioBuffered();
+    }
+    /**
+     * Gets and sets init segment for the provided map
+     *
+     * @param {Object} map
+     *        The map object representing the init segment to get or set
+     * @param {boolean=} set
+     *        If true, the init segment for the provided map should be saved
+     * @return {Object}
+     *         map object for desired init segment
+     */
+
+    initSegmentForMap(map, set = false) {
+      if (!map) {
+        return null;
+      }
+      const id = initSegmentId(map);
+      let storedMap = this.initSegments_[id];
+      if (set && !storedMap && map.bytes) {
+        this.initSegments_[id] = storedMap = {
+          resolvedUri: map.resolvedUri,
+          byterange: map.byterange,
+          bytes: map.bytes,
+          tracks: map.tracks,
+          timescales: map.timescales
+        };
+      }
+      return storedMap || map;
+    }
+    /**
+     * Gets and sets key for the provided key
+     *
+     * @param {Object} key
+     *        The key object representing the key to get or set
+     * @param {boolean=} set
+     *        If true, the key for the provided key should be saved
+     * @return {Object}
+     *         Key object for desired key
+     */
+
+    segmentKey(key, set = false) {
+      if (!key) {
+        return null;
+      }
+      const id = segmentKeyId(key);
+      let storedKey = this.keyCache_[id]; // TODO: We should use the HTTP Expires header to invalidate our cache per
+      // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-6.2.3
+
+      if (this.cacheEncryptionKeys_ && set && !storedKey && key.bytes) {
+        this.keyCache_[id] = storedKey = {
+          resolvedUri: key.resolvedUri,
+          bytes: key.bytes
+        };
+      }
+      const result = {
+        resolvedUri: (storedKey || key).resolvedUri
+      };
+      if (storedKey) {
+        result.bytes = storedKey.bytes;
+      }
+      return result;
+    }
+    /**
+     * Returns true if all configuration required for loading is present, otherwise false.
+     *
+     * @return {boolean} True if the all configuration is ready for loading
+     * @private
+     */
+
+    couldBeginLoading_() {
+      return this.playlist_ && !this.paused();
+    }
+    /**
+     * load a playlist and start to fill the buffer
+     */
+
+    load() {
+      // un-pause
+      this.monitorBuffer_(); // if we don't have a playlist yet, keep waiting for one to be
+      // specified
+
+      if (!this.playlist_) {
+        return;
+      } // if all the configuration is ready, initialize and begin loading
+
+      if (this.state === 'INIT' && this.couldBeginLoading_()) {
+        return this.init_();
+      } // if we're in the middle of processing a segment already, don't
+      // kick off an additional segment request
+
+      if (!this.couldBeginLoading_() || this.state !== 'READY' && this.state !== 'INIT') {
+        return;
+      }
+      this.state = 'READY';
+    }
+    /**
+     * Once all the starting parameters have been specified, begin
+     * operation. This method should only be invoked from the INIT
+     * state.
+     *
+     * @private
+     */
+
+    init_() {
+      this.state = 'READY'; // if this is the audio segment loader, and it hasn't been inited before, then any old
+      // audio data from the muxed content should be removed
+
+      this.resetEverything();
+      return this.monitorBuffer_();
+    }
+    /**
+     * set a playlist on the segment loader
+     *
+     * @param {PlaylistLoader} media the playlist to set on the segment loader
+     */
+
+    playlist(newPlaylist, options = {}) {
+      if (!newPlaylist) {
+        return;
+      }
+      const oldPlaylist = this.playlist_;
+      const segmentInfo = this.pendingSegment_;
+      this.playlist_ = newPlaylist;
+      this.xhrOptions_ = options; // when we haven't started playing yet, the start of a live playlist
+      // is always our zero-time so force a sync update each time the playlist
+      // is refreshed from the server
+      //
+      // Use the INIT state to determine if playback has started, as the playlist sync info
+      // should be fixed once requests begin (as sync points are generated based on sync
+      // info), but not before then.
+
+      if (this.state === 'INIT') {
+        newPlaylist.syncInfo = {
+          mediaSequence: newPlaylist.mediaSequence,
+          time: 0
+        }; // Setting the date time mapping means mapping the program date time (if available)
+        // to time 0 on the player's timeline. The playlist's syncInfo serves a similar
+        // purpose, mapping the initial mediaSequence to time zero. Since the syncInfo can
+        // be updated as the playlist is refreshed before the loader starts loading, the
+        // program date time mapping needs to be updated as well.
+        //
+        // This mapping is only done for the main loader because a program date time should
+        // map equivalently between playlists.
+
+        if (this.loaderType_ === 'main') {
+          this.syncController_.setDateTimeMappingForStart(newPlaylist);
+        }
+      }
+      let oldId = null;
+      if (oldPlaylist) {
+        if (oldPlaylist.id) {
+          oldId = oldPlaylist.id;
+        } else if (oldPlaylist.uri) {
+          oldId = oldPlaylist.uri;
+        }
+      }
+      this.logger_(`playlist update [${oldId} => ${newPlaylist.id || newPlaylist.uri}]`);
+      if (this.mediaSequenceSync_) {
+        this.mediaSequenceSync_.update(newPlaylist, this.currentTime_());
+        this.logger_(`Playlist update:
+currentTime: ${this.currentTime_()}
+bufferedEnd: ${lastBufferedEnd(this.buffered_())}
+`, this.mediaSequenceSync_.diagnostics);
+      } // in VOD, this is always a rendition switch (or we updated our syncInfo above)
+      // in LIVE, we always want to update with new playlists (including refreshes)
+
+      this.trigger('syncinfoupdate'); // if we were unpaused but waiting for a playlist, start
+      // buffering now
+
+      if (this.state === 'INIT' && this.couldBeginLoading_()) {
+        return this.init_();
+      }
+      if (!oldPlaylist || oldPlaylist.uri !== newPlaylist.uri) {
+        if (this.mediaIndex !== null) {
+          // we must reset/resync the segment loader when we switch renditions and
+          // the segment loader is already synced to the previous rendition
+          // We only want to reset the loader here for LLHLS playback, as resetLoader sets fetchAtBuffer_
+          // to false, resulting in fetching segments at currentTime and causing repeated
+          // same-segment requests on playlist change. This erroneously drives up the playback watcher
+          // stalled segment count, as re-requesting segments at the currentTime or browser cached segments
+          // will not change the buffer.
+          // Reference for LLHLS fixes: https://github.com/videojs/http-streaming/pull/1201
+          const isLLHLS = !newPlaylist.endList && typeof newPlaylist.partTargetDuration === 'number';
+          if (isLLHLS) {
+            this.resetLoader();
+          } else {
+            this.resyncLoader();
+          }
+        }
+        this.currentMediaInfo_ = void 0;
+        this.trigger('playlistupdate'); // the rest of this function depends on `oldPlaylist` being defined
+
+        return;
+      } // we reloaded the same playlist so we are in a live scenario
+      // and we will likely need to adjust the mediaIndex
+
+      const mediaSequenceDiff = newPlaylist.mediaSequence - oldPlaylist.mediaSequence;
+      this.logger_(`live window shift [${mediaSequenceDiff}]`); // update the mediaIndex on the SegmentLoader
+      // this is important because we can abort a request and this value must be
+      // equal to the last appended mediaIndex
+
+      if (this.mediaIndex !== null) {
+        this.mediaIndex -= mediaSequenceDiff; // this can happen if we are going to load the first segment, but get a playlist
+        // update during that. mediaIndex would go from 0 to -1 if mediaSequence in the
+        // new playlist was incremented by 1.
+
+        if (this.mediaIndex < 0) {
+          this.mediaIndex = null;
+          this.partIndex = null;
+        } else {
+          const segment = this.playlist_.segments[this.mediaIndex]; // partIndex should remain the same for the same segment
+          // unless parts fell off of the playlist for this segment.
+          // In that case we need to reset partIndex and resync
+
+          if (this.partIndex && (!segment.parts || !segment.parts.length || !segment.parts[this.partIndex])) {
+            const mediaIndex = this.mediaIndex;
+            this.logger_(`currently processing part (index ${this.partIndex}) no longer exists.`);
+            this.resetLoader(); // We want to throw away the partIndex and the data associated with it,
+            // as the part was dropped from our current playlists segment.
+            // The mediaIndex will still be valid so keep that around.
+
+            this.mediaIndex = mediaIndex;
+          }
+        }
+      } // update the mediaIndex on the SegmentInfo object
+      // this is important because we will update this.mediaIndex with this value
+      // in `handleAppendsDone_` after the segment has been successfully appended
+
+      if (segmentInfo) {
+        segmentInfo.mediaIndex -= mediaSequenceDiff;
+        if (segmentInfo.mediaIndex < 0) {
+          segmentInfo.mediaIndex = null;
+          segmentInfo.partIndex = null;
+        } else {
+          // we need to update the referenced segment so that timing information is
+          // saved for the new playlist's segment, however, if the segment fell off the
+          // playlist, we can leave the old reference and just lose the timing info
+          if (segmentInfo.mediaIndex >= 0) {
+            segmentInfo.segment = newPlaylist.segments[segmentInfo.mediaIndex];
+          }
+          if (segmentInfo.partIndex >= 0 && segmentInfo.segment.parts) {
+            segmentInfo.part = segmentInfo.segment.parts[segmentInfo.partIndex];
+          }
+        }
+      }
+      this.syncController_.saveExpiredSegmentInfo(oldPlaylist, newPlaylist);
+    }
+    /**
+     * Prevent the loader from fetching additional segments. If there
+     * is a segment request outstanding, it will finish processing
+     * before the loader halts. A segment loader can be unpaused by
+     * calling load().
+     */
+
+    pause() {
+      if (this.checkBufferTimeout_) {
+        window.clearTimeout(this.checkBufferTimeout_);
+        this.checkBufferTimeout_ = null;
+      }
+    }
+    /**
+     * Returns whether the segment loader is fetching additional
+     * segments when given the opportunity. This property can be
+     * modified through calls to pause() and load().
+     */
+
+    paused() {
+      return this.checkBufferTimeout_ === null;
+    }
+    /**
+     * Delete all the buffered data and reset the SegmentLoader
+     *
+     * @param {Function} [done] an optional callback to be executed when the remove
+     * operation is complete
+     */
+
+    resetEverything(done) {
+      this.ended_ = false;
+      this.activeInitSegmentId_ = null;
+      this.appendInitSegment_ = {
+        audio: true,
+        video: true
+      };
+      this.resetLoader(); // remove from 0, the earliest point, to Infinity, to signify removal of everything.
+      // VTT Segment Loader doesn't need to do anything but in the regular SegmentLoader,
+      // we then clamp the value to duration if necessary.
+
+      this.remove(0, Infinity, done); // clears fmp4 captions
+
+      if (this.transmuxer_) {
+        this.transmuxer_.postMessage({
+          action: 'clearAllMp4Captions'
+        }); // reset the cache in the transmuxer
+
+        this.transmuxer_.postMessage({
+          action: 'reset'
+        });
+      }
+    }
+    /**
+     * Force the SegmentLoader to resync and start loading around the currentTime instead
+     * of starting at the end of the buffer
+     *
+     * Useful for fast quality changes
+     */
+
+    resetLoader() {
+      this.fetchAtBuffer_ = false;
+      if (this.mediaSequenceSync_) {
+        this.mediaSequenceSync_.resetAppendedStatus();
+      }
+      this.resyncLoader();
+    }
+    /**
+     * Force the SegmentLoader to restart synchronization and make a conservative guess
+     * before returning to the simple walk-forward method
+     */
+
+    resyncLoader() {
+      if (this.transmuxer_) {
+        // need to clear out any cached data to prepare for the new segment
+        segmentTransmuxer.reset(this.transmuxer_);
+      }
+      this.mediaIndex = null;
+      this.partIndex = null;
+      this.syncPoint_ = null;
+      this.isPendingTimestampOffset_ = false; // this is mainly to sync timing-info when switching between renditions with and without timestamp-rollover,
+      // so we don't want it for DASH or fragmented mp4 segments.
+
+      const isFmp4 = this.currentMediaInfo_ && this.currentMediaInfo_.isFmp4;
+      const isHlsTs = this.sourceType_ === 'hls' && !isFmp4;
+      if (isHlsTs) {
+        this.shouldForceTimestampOffsetAfterResync_ = true;
+      }
+      this.callQueue_ = [];
+      this.loadQueue_ = [];
+      this.metadataQueue_.id3 = [];
+      this.metadataQueue_.caption = [];
+      this.abort();
+      if (this.transmuxer_) {
+        this.transmuxer_.postMessage({
+          action: 'clearParsedMp4Captions'
+        });
+      }
+    }
+    /**
+     * Remove any data in the source buffer between start and end times
+     *
+     * @param {number} start - the start time of the region to remove from the buffer
+     * @param {number} end - the end time of the region to remove from the buffer
+     * @param {Function} [done] - an optional callback to be executed when the remove
+     * @param {boolean} force - force all remove operations to happen
+     * operation is complete
+     */
+
+    remove(start, end, done = () => {}, force = false) {
+      // clamp end to duration if we need to remove everything.
+      // This is due to a browser bug that causes issues if we remove to Infinity.
+      // videojs/videojs-contrib-hls#1225
+      if (end === Infinity) {
+        end = this.duration_();
+      } // skip removes that would throw an error
+      // commonly happens during a rendition switch at the start of a video
+      // from start 0 to end 0
+
+      if (end <= start) {
+        this.logger_('skipping remove because end ${end} is <= start ${start}');
+        return;
+      }
+      if (!this.sourceUpdater_ || !this.getMediaInfo_()) {
+        this.logger_('skipping remove because no source updater or starting media info'); // nothing to remove if we haven't processed any media
+
+        return;
+      } // set it to one to complete this function's removes
+
+      let removesRemaining = 1;
+      const removeFinished = () => {
+        removesRemaining--;
+        if (removesRemaining === 0) {
+          done();
+        }
+      };
+      if (force || !this.audioDisabled_) {
+        removesRemaining++;
+        this.sourceUpdater_.removeAudio(start, end, removeFinished);
+      } // While it would be better to only remove video if the main loader has video, this
+      // should be safe with audio only as removeVideo will call back even if there's no
+      // video buffer.
+      //
+      // In theory we can check to see if there's video before calling the remove, but in
+      // the event that we're switching between renditions and from video to audio only
+      // (when we add support for that), we may need to clear the video contents despite
+      // what the new media will contain.
+
+      if (force || this.loaderType_ === 'main') {
+        this.gopBuffer_ = removeGopBuffer(this.gopBuffer_, start, end, this.timeMapping_);
+        removesRemaining++;
+        this.sourceUpdater_.removeVideo(start, end, removeFinished);
+      } // remove any captions and ID3 tags
+
+      for (const track in this.inbandTextTracks_) {
+        removeCuesFromTrack(start, end, this.inbandTextTracks_[track]);
+      }
+      removeCuesFromTrack(start, end, this.segmentMetadataTrack_); // finished this function's removes
+
+      removeFinished();
+    }
+    /**
+     * (re-)schedule monitorBufferTick_ to run as soon as possible
+     *
+     * @private
+     */
+
+    monitorBuffer_() {
+      if (this.checkBufferTimeout_) {
+        window.clearTimeout(this.checkBufferTimeout_);
+      }
+      this.checkBufferTimeout_ = window.setTimeout(this.monitorBufferTick_.bind(this), 1);
+    }
+    /**
+     * As long as the SegmentLoader is in the READY state, periodically
+     * invoke fillBuffer_().
+     *
+     * @private
+     */
+
+    monitorBufferTick_() {
+      if (this.state === 'READY') {
+        this.fillBuffer_();
+      }
+      if (this.checkBufferTimeout_) {
+        window.clearTimeout(this.checkBufferTimeout_);
+      }
+      this.checkBufferTimeout_ = window.setTimeout(this.monitorBufferTick_.bind(this), CHECK_BUFFER_DELAY);
+    }
+    /**
+     * fill the buffer with segements unless the sourceBuffers are
+     * currently updating
+     *
+     * Note: this function should only ever be called by monitorBuffer_
+     * and never directly
+     *
+     * @private
+     */
+
+    fillBuffer_() {
+      // TODO since the source buffer maintains a queue, and we shouldn't call this function
+      // except when we're ready for the next segment, this check can most likely be removed
+      if (this.sourceUpdater_.updating()) {
+        return;
+      } // see if we need to begin loading immediately
+
+      const segmentInfo = this.chooseNextRequest_();
+      if (!segmentInfo) {
+        return;
+      }
+      if (typeof segmentInfo.timestampOffset === 'number') {
+        this.isPendingTimestampOffset_ = false;
+        this.timelineChangeController_.pendingTimelineChange({
+          type: this.loaderType_,
+          from: this.currentTimeline_,
+          to: segmentInfo.timeline
+        });
+      }
+      this.loadSegment_(segmentInfo);
+    }
+    /**
+     * Determines if we should call endOfStream on the media source based
+     * on the state of the buffer or if appened segment was the final
+     * segment in the playlist.
+     *
+     * @param {number} [mediaIndex] the media index of segment we last appended
+     * @param {Object} [playlist] a media playlist object
+     * @return {boolean} do we need to call endOfStream on the MediaSource
+     */
+
+    isEndOfStream_(mediaIndex = this.mediaIndex, playlist = this.playlist_, partIndex = this.partIndex) {
+      if (!playlist || !this.mediaSource_) {
+        return false;
+      }
+      const segment = typeof mediaIndex === 'number' && playlist.segments[mediaIndex]; // mediaIndex is zero based but length is 1 based
+
+      const appendedLastSegment = mediaIndex + 1 === playlist.segments.length; // true if there are no parts, or this is the last part.
+
+      const appendedLastPart = !segment || !segment.parts || partIndex + 1 === segment.parts.length; // if we've buffered to the end of the video, we need to call endOfStream
+      // so that MediaSources can trigger the `ended` event when it runs out of
+      // buffered data instead of waiting for me
+
+      return playlist.endList && this.mediaSource_.readyState === 'open' && appendedLastSegment && appendedLastPart;
+    }
+    /**
+     * Determines what request should be made given current segment loader state.
+     *
+     * @return {Object} a request object that describes the segment/part to load
+     */
+
+    chooseNextRequest_() {
+      const buffered = this.buffered_();
+      const bufferedEnd = lastBufferedEnd(buffered) || 0;
+      const bufferedTime = timeAheadOf(buffered, this.currentTime_());
+      const preloaded = !this.hasPlayed_() && bufferedTime >= 1;
+      const haveEnoughBuffer = bufferedTime >= this.goalBufferLength_();
+      const segments = this.playlist_.segments; // return no segment if:
+      // 1. we don't have segments
+      // 2. The video has not yet played and we already downloaded a segment
+      // 3. we already have enough buffered time
+
+      if (!segments.length || preloaded || haveEnoughBuffer) {
+        return null;
+      }
+      this.syncPoint_ = this.syncPoint_ || this.syncController_.getSyncPoint(this.playlist_, this.duration_(), this.currentTimeline_, this.currentTime_(), this.loaderType_);
+      const next = {
+        partIndex: null,
+        mediaIndex: null,
+        startOfSegment: null,
+        playlist: this.playlist_,
+        isSyncRequest: Boolean(!this.syncPoint_)
+      };
+      if (next.isSyncRequest) {
+        next.mediaIndex = getSyncSegmentCandidate(this.currentTimeline_, segments, bufferedEnd);
+        this.logger_(`choose next request. Can not find sync point. Fallback to media Index: ${next.mediaIndex}`);
+      } else if (this.mediaIndex !== null) {
+        const segment = segments[this.mediaIndex];
+        const partIndex = typeof this.partIndex === 'number' ? this.partIndex : -1;
+        next.startOfSegment = segment.end ? segment.end : bufferedEnd;
+        if (segment.parts && segment.parts[partIndex + 1]) {
+          next.mediaIndex = this.mediaIndex;
+          next.partIndex = partIndex + 1;
+        } else {
+          next.mediaIndex = this.mediaIndex + 1;
+        }
+      } else {
+        let segmentIndex;
+        let partIndex;
+        let startTime;
+        const targetTime = this.fetchAtBuffer_ ? bufferedEnd : this.currentTime_();
+        if (this.mediaSequenceSync_) {
+          this.logger_(`chooseNextRequest_ request after Quality Switch:
+For TargetTime: ${targetTime}.
+CurrentTime: ${this.currentTime_()}
+BufferedEnd: ${bufferedEnd}
+Fetch At Buffer: ${this.fetchAtBuffer_}
+`, this.mediaSequenceSync_.diagnostics);
+        }
+        if (this.mediaSequenceSync_ && this.mediaSequenceSync_.isReliable) {
+          const syncInfo = this.getSyncInfoFromMediaSequenceSync_(targetTime);
+          if (!syncInfo) {
+            this.logger_('chooseNextRequest_ - no sync info found using media sequence sync'); // no match
+
+            return null;
+          }
+          this.logger_(`chooseNextRequest_ mediaSequence syncInfo (${syncInfo.start} --> ${syncInfo.end})`);
+          segmentIndex = syncInfo.segmentIndex;
+          partIndex = syncInfo.partIndex;
+          startTime = syncInfo.start;
+        } else {
+          this.logger_('chooseNextRequest_ - fallback to a regular segment selection algorithm, based on a syncPoint.'); // fallback
+
+          const mediaInfoForTime = Playlist.getMediaInfoForTime({
+            exactManifestTimings: this.exactManifestTimings,
+            playlist: this.playlist_,
+            currentTime: targetTime,
+            startingPartIndex: this.syncPoint_.partIndex,
+            startingSegmentIndex: this.syncPoint_.segmentIndex,
+            startTime: this.syncPoint_.time
+          });
+          segmentIndex = mediaInfoForTime.segmentIndex;
+          partIndex = mediaInfoForTime.partIndex;
+          startTime = mediaInfoForTime.startTime;
+        }
+        next.getMediaInfoForTime = this.fetchAtBuffer_ ? `bufferedEnd ${targetTime}` : `currentTime ${targetTime}`;
+        next.mediaIndex = segmentIndex;
+        next.startOfSegment = startTime;
+        next.partIndex = partIndex;
+        this.logger_(`choose next request. Playlist switched and we have a sync point. Media Index: ${next.mediaIndex} `);
+      }
+      const nextSegment = segments[next.mediaIndex];
+      let nextPart = nextSegment && typeof next.partIndex === 'number' && nextSegment.parts && nextSegment.parts[next.partIndex]; // if the next segment index is invalid or
+      // the next partIndex is invalid do not choose a next segment.
+
+      if (!nextSegment || typeof next.partIndex === 'number' && !nextPart) {
+        return null;
+      } // if the next segment has parts, and we don't have a partIndex.
+      // Set partIndex to 0
+
+      if (typeof next.partIndex !== 'number' && nextSegment.parts) {
+        next.partIndex = 0;
+        nextPart = nextSegment.parts[0];
+      } // independentSegments applies to every segment in a playlist. If independentSegments appears in a main playlist,
+      // it applies to each segment in each media playlist.
+      // https://datatracker.ietf.org/doc/html/draft-pantos-http-live-streaming-23#section-4.3.5.1
+
+      const hasIndependentSegments = this.vhs_.playlists && this.vhs_.playlists.main && this.vhs_.playlists.main.independentSegments || this.playlist_.independentSegments; // if we have no buffered data then we need to make sure
+      // that the next part we append is "independent" if possible.
+      // So we check if the previous part is independent, and request
+      // it if it is.
+
+      if (!bufferedTime && nextPart && !hasIndependentSegments && !nextPart.independent) {
+        if (next.partIndex === 0) {
+          const lastSegment = segments[next.mediaIndex - 1];
+          const lastSegmentLastPart = lastSegment.parts && lastSegment.parts.length && lastSegment.parts[lastSegment.parts.length - 1];
+          if (lastSegmentLastPart && lastSegmentLastPart.independent) {
+            next.mediaIndex -= 1;
+            next.partIndex = lastSegment.parts.length - 1;
+            next.independent = 'previous segment';
+          }
+        } else if (nextSegment.parts[next.partIndex - 1].independent) {
+          next.partIndex -= 1;
+          next.independent = 'previous part';
+        }
+      }
+      const ended = this.mediaSource_ && this.mediaSource_.readyState === 'ended'; // do not choose a next segment if all of the following:
+      // 1. this is the last segment in the playlist
+      // 2. end of stream has been called on the media source already
+      // 3. the player is not seeking
+
+      if (next.mediaIndex >= segments.length - 1 && ended && !this.seeking_()) {
+        return null;
+      }
+      if (this.shouldForceTimestampOffsetAfterResync_) {
+        this.shouldForceTimestampOffsetAfterResync_ = false;
+        next.forceTimestampOffset = true;
+        this.logger_('choose next request. Force timestamp offset after loader resync');
+      }
+      return this.generateSegmentInfo_(next);
+    }
+    getSyncInfoFromMediaSequenceSync_(targetTime) {
+      if (!this.mediaSequenceSync_) {
+        return null;
+      } // we should pull the target time to the least available time if we drop out of sync for any reason
+
+      const finalTargetTime = Math.max(targetTime, this.mediaSequenceSync_.start);
+      if (targetTime !== finalTargetTime) {
+        this.logger_(`getSyncInfoFromMediaSequenceSync_. Pulled target time from ${targetTime} to ${finalTargetTime}`);
+      }
+      const mediaSequenceSyncInfo = this.mediaSequenceSync_.getSyncInfoForTime(finalTargetTime);
+      if (!mediaSequenceSyncInfo) {
+        // no match at all
+        return null;
+      }
+      if (!mediaSequenceSyncInfo.isAppended) {
+        // has a perfect match
+        return mediaSequenceSyncInfo;
+      } // has match, but segment was already appended.
+      // attempt to auto-advance to the nearest next segment:
+
+      const nextMediaSequenceSyncInfo = this.mediaSequenceSync_.getSyncInfoForTime(mediaSequenceSyncInfo.end);
+      if (!nextMediaSequenceSyncInfo) {
+        // no match at all
+        return null;
+      }
+      if (nextMediaSequenceSyncInfo.isAppended) {
+        this.logger_('getSyncInfoFromMediaSequenceSync_: We encounter unexpected scenario where next media sequence sync info is also appended!');
+      } // got match with the nearest next segment
+
+      return nextMediaSequenceSyncInfo;
+    }
+    generateSegmentInfo_(options) {
+      const {
+        independent,
+        playlist,
+        mediaIndex,
+        startOfSegment,
+        isSyncRequest,
+        partIndex,
+        forceTimestampOffset,
+        getMediaInfoForTime
+      } = options;
+      const segment = playlist.segments[mediaIndex];
+      const part = typeof partIndex === 'number' && segment.parts[partIndex];
+      const segmentInfo = {
+        requestId: 'segment-loader-' + Math.random(),
+        // resolve the segment URL relative to the playlist
+        uri: part && part.resolvedUri || segment.resolvedUri,
+        // the segment's mediaIndex at the time it was requested
+        mediaIndex,
+        partIndex: part ? partIndex : null,
+        // whether or not to update the SegmentLoader's state with this
+        // segment's mediaIndex
+        isSyncRequest,
+        startOfSegment,
+        // the segment's playlist
+        playlist,
+        // unencrypted bytes of the segment
+        bytes: null,
+        // when a key is defined for this segment, the encrypted bytes
+        encryptedBytes: null,
+        // The target timestampOffset for this segment when we append it
+        // to the source buffer
+        timestampOffset: null,
+        // The timeline that the segment is in
+        timeline: segment.timeline,
+        // The expected duration of the segment in seconds
+        duration: part && part.duration || segment.duration,
+        // retain the segment in case the playlist updates while doing an async process
+        segment,
+        part,
+        byteLength: 0,
+        transmuxer: this.transmuxer_,
+        // type of getMediaInfoForTime that was used to get this segment
+        getMediaInfoForTime,
+        independent
+      };
+      const overrideCheck = typeof forceTimestampOffset !== 'undefined' ? forceTimestampOffset : this.isPendingTimestampOffset_;
+      segmentInfo.timestampOffset = this.timestampOffsetForSegment_({
+        segmentTimeline: segment.timeline,
+        currentTimeline: this.currentTimeline_,
+        startOfSegment,
+        buffered: this.buffered_(),
+        overrideCheck
+      });
+      const audioBufferedEnd = lastBufferedEnd(this.sourceUpdater_.audioBuffered());
+      if (typeof audioBufferedEnd === 'number') {
+        // since the transmuxer is using the actual timing values, but the buffer is
+        // adjusted by the timestamp offset, we must adjust the value here
+        segmentInfo.audioAppendStart = audioBufferedEnd - this.sourceUpdater_.audioTimestampOffset();
+      }
+      if (this.sourceUpdater_.videoBuffered().length) {
+        segmentInfo.gopsToAlignWith = gopsSafeToAlignWith(this.gopBuffer_,
+        // since the transmuxer is using the actual timing values, but the time is
+        // adjusted by the timestmap offset, we must adjust the value here
+        this.currentTime_() - this.sourceUpdater_.videoTimestampOffset(), this.timeMapping_);
+      }
+      return segmentInfo;
+    } // get the timestampoffset for a segment,
+    // added so that vtt segment loader can override and prevent
+    // adding timestamp offsets.
+
+    timestampOffsetForSegment_(options) {
+      return timestampOffsetForSegment(options);
+    }
+    /**
+     * Determines if the network has enough bandwidth to complete the current segment
+     * request in a timely manner. If not, the request will be aborted early and bandwidth
+     * updated to trigger a playlist switch.
+     *
+     * @param {Object} stats
+     *        Object containing stats about the request timing and size
+     * @private
+     */
+
+    earlyAbortWhenNeeded_(stats) {
+      if (this.vhs_.tech_.paused() ||
+      // Don't abort if the current playlist is on the lowestEnabledRendition
+      // TODO: Replace using timeout with a boolean indicating whether this playlist is
+      //       the lowestEnabledRendition.
+      !this.xhrOptions_.timeout ||
+      // Don't abort if we have no bandwidth information to estimate segment sizes
+      !this.playlist_.attributes.BANDWIDTH) {
+        return;
+      } // Wait at least 1 second since the first byte of data has been received before
+      // using the calculated bandwidth from the progress event to allow the bitrate
+      // to stabilize
+
+      if (Date.now() - (stats.firstBytesReceivedAt || Date.now()) < 1000) {
+        return;
+      }
+      const currentTime = this.currentTime_();
+      const measuredBandwidth = stats.bandwidth;
+      const segmentDuration = this.pendingSegment_.duration;
+      const requestTimeRemaining = Playlist.estimateSegmentRequestTime(segmentDuration, measuredBandwidth, this.playlist_, stats.bytesReceived); // Subtract 1 from the timeUntilRebuffer so we still consider an early abort
+      // if we are only left with less than 1 second when the request completes.
+      // A negative timeUntilRebuffering indicates we are already rebuffering
+
+      const timeUntilRebuffer$1 = timeUntilRebuffer(this.buffered_(), currentTime, this.vhs_.tech_.playbackRate()) - 1; // Only consider aborting early if the estimated time to finish the download
+      // is larger than the estimated time until the player runs out of forward buffer
+
+      if (requestTimeRemaining <= timeUntilRebuffer$1) {
+        return;
+      }
+      const switchCandidate = minRebufferMaxBandwidthSelector({
+        main: this.vhs_.playlists.main,
+        currentTime,
+        bandwidth: measuredBandwidth,
+        duration: this.duration_(),
+        segmentDuration,
+        timeUntilRebuffer: timeUntilRebuffer$1,
+        currentTimeline: this.currentTimeline_,
+        syncController: this.syncController_
+      });
+      if (!switchCandidate) {
+        return;
+      }
+      const rebufferingImpact = requestTimeRemaining - timeUntilRebuffer$1;
+      const timeSavedBySwitching = rebufferingImpact - switchCandidate.rebufferingImpact;
+      let minimumTimeSaving = 0.5; // If we are already rebuffering, increase the amount of variance we add to the
+      // potential round trip time of the new request so that we are not too aggressive
+      // with switching to a playlist that might save us a fraction of a second.
+
+      if (timeUntilRebuffer$1 <= TIME_FUDGE_FACTOR) {
+        minimumTimeSaving = 1;
+      }
+      if (!switchCandidate.playlist || switchCandidate.playlist.uri === this.playlist_.uri || timeSavedBySwitching < minimumTimeSaving) {
+        return;
+      } // set the bandwidth to that of the desired playlist being sure to scale by
+      // BANDWIDTH_VARIANCE and add one so the playlist selector does not exclude it
+      // don't trigger a bandwidthupdate as the bandwidth is artifial
+
+      this.bandwidth = switchCandidate.playlist.attributes.BANDWIDTH * Config.BANDWIDTH_VARIANCE + 1;
+      this.trigger('earlyabort');
+    }
+    handleAbort_(segmentInfo) {
+      this.logger_(`Aborting ${segmentInfoString(segmentInfo)}`);
+      this.mediaRequestsAborted += 1;
+    }
+    /**
+     * XHR `progress` event handler
+     *
+     * @param {Event}
+     *        The XHR `progress` event
+     * @param {Object} simpleSegment
+     *        A simplified segment object copy
+     * @private
+     */
+
+    handleProgress_(event, simpleSegment) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      }
+      this.trigger('progress');
+    }
+    handleTrackInfo_(simpleSegment, trackInfo) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      }
+      if (this.checkForIllegalMediaSwitch(trackInfo)) {
+        return;
+      }
+      trackInfo = trackInfo || {}; // When we have track info, determine what media types this loader is dealing with.
+      // Guard against cases where we're not getting track info at all until we are
+      // certain that all streams will provide it.
+
+      if (!shallowEqual(this.currentMediaInfo_, trackInfo)) {
+        this.appendInitSegment_ = {
+          audio: true,
+          video: true
+        };
+        this.startingMediaInfo_ = trackInfo;
+        this.currentMediaInfo_ = trackInfo;
+        this.logger_('trackinfo update', trackInfo);
+        this.trigger('trackinfo');
+      } // trackinfo may cause an abort if the trackinfo
+      // causes a codec change to an unsupported codec.
+
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      } // set trackinfo on the pending segment so that
+      // it can append.
+
+      this.pendingSegment_.trackInfo = trackInfo; // check if any calls were waiting on the track info
+
+      if (this.hasEnoughInfoToAppend_()) {
+        this.processCallQueue_();
+      }
+    }
+    handleTimingInfo_(simpleSegment, mediaType, timeType, time) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      }
+      const segmentInfo = this.pendingSegment_;
+      const timingInfoProperty = timingInfoPropertyForMedia(mediaType);
+      segmentInfo[timingInfoProperty] = segmentInfo[timingInfoProperty] || {};
+      segmentInfo[timingInfoProperty][timeType] = time;
+      this.logger_(`timinginfo: ${mediaType} - ${timeType} - ${time}`); // check if any calls were waiting on the timing info
+
+      if (this.hasEnoughInfoToAppend_()) {
+        this.processCallQueue_();
+      }
+    }
+    handleCaptions_(simpleSegment, captionData) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      } // This could only happen with fmp4 segments, but
+      // should still not happen in general
+
+      if (captionData.length === 0) {
+        this.logger_('SegmentLoader received no captions from a caption event');
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // Wait until we have some video data so that caption timing
+      // can be adjusted by the timestamp offset
+
+      if (!segmentInfo.hasAppendedData_) {
+        this.metadataQueue_.caption.push(this.handleCaptions_.bind(this, simpleSegment, captionData));
+        return;
+      }
+      const timestampOffset = this.sourceUpdater_.videoTimestampOffset() === null ? this.sourceUpdater_.audioTimestampOffset() : this.sourceUpdater_.videoTimestampOffset();
+      const captionTracks = {}; // get total start/end and captions for each track/stream
+
+      captionData.forEach(caption => {
+        // caption.stream is actually a track name...
+        // set to the existing values in tracks or default values
+        captionTracks[caption.stream] = captionTracks[caption.stream] || {
+          // Infinity, as any other value will be less than this
+          startTime: Infinity,
+          captions: [],
+          // 0 as an other value will be more than this
+          endTime: 0
+        };
+        const captionTrack = captionTracks[caption.stream];
+        captionTrack.startTime = Math.min(captionTrack.startTime, caption.startTime + timestampOffset);
+        captionTrack.endTime = Math.max(captionTrack.endTime, caption.endTime + timestampOffset);
+        captionTrack.captions.push(caption);
+      });
+      Object.keys(captionTracks).forEach(trackName => {
+        const {
+          startTime,
+          endTime,
+          captions
+        } = captionTracks[trackName];
+        const inbandTextTracks = this.inbandTextTracks_;
+        this.logger_(`adding cues from ${startTime} -> ${endTime} for ${trackName}`);
+        createCaptionsTrackIfNotExists(inbandTextTracks, this.vhs_.tech_, trackName); // clear out any cues that start and end at the same time period for the same track.
+        // We do this because a rendition change that also changes the timescale for captions
+        // will result in captions being re-parsed for certain segments. If we add them again
+        // without clearing we will have two of the same captions visible.
+
+        removeCuesFromTrack(startTime, endTime, inbandTextTracks[trackName]);
+        addCaptionData({
+          captionArray: captions,
+          inbandTextTracks,
+          timestampOffset
+        });
+      }); // Reset stored captions since we added parsed
+      // captions to a text track at this point
+
+      if (this.transmuxer_) {
+        this.transmuxer_.postMessage({
+          action: 'clearParsedMp4Captions'
+        });
+      }
+    }
+    handleId3_(simpleSegment, id3Frames, dispatchType) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // we need to have appended data in order for the timestamp offset to be set
+
+      if (!segmentInfo.hasAppendedData_) {
+        this.metadataQueue_.id3.push(this.handleId3_.bind(this, simpleSegment, id3Frames, dispatchType));
+        return;
+      }
+      this.addMetadataToTextTrack(dispatchType, id3Frames, this.duration_());
+    }
+    processMetadataQueue_() {
+      this.metadataQueue_.id3.forEach(fn => fn());
+      this.metadataQueue_.caption.forEach(fn => fn());
+      this.metadataQueue_.id3 = [];
+      this.metadataQueue_.caption = [];
+    }
+    processCallQueue_() {
+      const callQueue = this.callQueue_; // Clear out the queue before the queued functions are run, since some of the
+      // functions may check the length of the load queue and default to pushing themselves
+      // back onto the queue.
+
+      this.callQueue_ = [];
+      callQueue.forEach(fun => fun());
+    }
+    processLoadQueue_() {
+      const loadQueue = this.loadQueue_; // Clear out the queue before the queued functions are run, since some of the
+      // functions may check the length of the load queue and default to pushing themselves
+      // back onto the queue.
+
+      this.loadQueue_ = [];
+      loadQueue.forEach(fun => fun());
+    }
+    /**
+     * Determines whether the loader has enough info to load the next segment.
+     *
+     * @return {boolean}
+     *         Whether or not the loader has enough info to load the next segment
+     */
+
+    hasEnoughInfoToLoad_() {
+      // Since primary timing goes by video, only the audio loader potentially needs to wait
+      // to load.
+      if (this.loaderType_ !== 'audio') {
+        return true;
+      }
+      const segmentInfo = this.pendingSegment_; // A fill buffer must have already run to establish a pending segment before there's
+      // enough info to load.
+
+      if (!segmentInfo) {
+        return false;
+      } // The first segment can and should be loaded immediately so that source buffers are
+      // created together (before appending). Source buffer creation uses the presence of
+      // audio and video data to determine whether to create audio/video source buffers, and
+      // uses processed (transmuxed or parsed) media to determine the types required.
+
+      if (!this.getCurrentMediaInfo_()) {
+        return true;
+      }
+      if (
+      // Technically, instead of waiting to load a segment on timeline changes, a segment
+      // can be requested and downloaded and only wait before it is transmuxed or parsed.
+      // But in practice, there are a few reasons why it is better to wait until a loader
+      // is ready to append that segment before requesting and downloading:
+      //
+      // 1. Because audio and main loaders cross discontinuities together, if this loader
+      //    is waiting for the other to catch up, then instead of requesting another
+      //    segment and using up more bandwidth, by not yet loading, more bandwidth is
+      //    allotted to the loader currently behind.
+      // 2. media-segment-request doesn't have to have logic to consider whether a segment
+      // is ready to be processed or not, isolating the queueing behavior to the loader.
+      // 3. The audio loader bases some of its segment properties on timing information
+      //    provided by the main loader, meaning that, if the logic for waiting on
+      //    processing was in media-segment-request, then it would also need to know how
+      //    to re-generate the segment information after the main loader caught up.
+      shouldWaitForTimelineChange({
+        timelineChangeController: this.timelineChangeController_,
+        currentTimeline: this.currentTimeline_,
+        segmentTimeline: segmentInfo.timeline,
+        loaderType: this.loaderType_,
+        audioDisabled: this.audioDisabled_
+      })) {
+        return false;
+      }
+      return true;
+    }
+    getCurrentMediaInfo_(segmentInfo = this.pendingSegment_) {
+      return segmentInfo && segmentInfo.trackInfo || this.currentMediaInfo_;
+    }
+    getMediaInfo_(segmentInfo = this.pendingSegment_) {
+      return this.getCurrentMediaInfo_(segmentInfo) || this.startingMediaInfo_;
+    }
+    getPendingSegmentPlaylist() {
+      return this.pendingSegment_ ? this.pendingSegment_.playlist : null;
+    }
+    hasEnoughInfoToAppend_() {
+      if (!this.sourceUpdater_.ready()) {
+        return false;
+      } // If content needs to be removed or the loader is waiting on an append reattempt,
+      // then no additional content should be appended until the prior append is resolved.
+
+      if (this.waitingOnRemove_ || this.quotaExceededErrorRetryTimeout_) {
+        return false;
+      }
+      const segmentInfo = this.pendingSegment_;
+      const trackInfo = this.getCurrentMediaInfo_(); // no segment to append any data for or
+      // we do not have information on this specific
+      // segment yet
+
+      if (!segmentInfo || !trackInfo) {
+        return false;
+      }
+      const {
+        hasAudio,
+        hasVideo,
+        isMuxed
+      } = trackInfo;
+      if (hasVideo && !segmentInfo.videoTimingInfo) {
+        return false;
+      } // muxed content only relies on video timing information for now.
+
+      if (hasAudio && !this.audioDisabled_ && !isMuxed && !segmentInfo.audioTimingInfo) {
+        return false;
+      }
+      if (shouldWaitForTimelineChange({
+        timelineChangeController: this.timelineChangeController_,
+        currentTimeline: this.currentTimeline_,
+        segmentTimeline: segmentInfo.timeline,
+        loaderType: this.loaderType_,
+        audioDisabled: this.audioDisabled_
+      })) {
+        return false;
+      }
+      return true;
+    }
+    handleData_(simpleSegment, result) {
+      this.earlyAbortWhenNeeded_(simpleSegment.stats);
+      if (this.checkForAbort_(simpleSegment.requestId)) {
+        return;
+      } // If there's anything in the call queue, then this data came later and should be
+      // executed after the calls currently queued.
+
+      if (this.callQueue_.length || !this.hasEnoughInfoToAppend_()) {
+        this.callQueue_.push(this.handleData_.bind(this, simpleSegment, result));
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // update the time mapping so we can translate from display time to media time
+
+      this.setTimeMapping_(segmentInfo.timeline); // for tracking overall stats
+
+      this.updateMediaSecondsLoaded_(segmentInfo.part || segmentInfo.segment); // Note that the state isn't changed from loading to appending. This is because abort
+      // logic may change behavior depending on the state, and changing state too early may
+      // inflate our estimates of bandwidth. In the future this should be re-examined to
+      // note more granular states.
+      // don't process and append data if the mediaSource is closed
+
+      if (this.mediaSource_.readyState === 'closed') {
+        return;
+      } // if this request included an initialization segment, save that data
+      // to the initSegment cache
+
+      if (simpleSegment.map) {
+        simpleSegment.map = this.initSegmentForMap(simpleSegment.map, true); // move over init segment properties to media request
+
+        segmentInfo.segment.map = simpleSegment.map;
+      } // if this request included a segment key, save that data in the cache
+
+      if (simpleSegment.key) {
+        this.segmentKey(simpleSegment.key, true);
+      }
+      segmentInfo.isFmp4 = simpleSegment.isFmp4;
+      segmentInfo.timingInfo = segmentInfo.timingInfo || {};
+      if (segmentInfo.isFmp4) {
+        this.trigger('fmp4');
+        segmentInfo.timingInfo.start = segmentInfo[timingInfoPropertyForMedia(result.type)].start;
+      } else {
+        const trackInfo = this.getCurrentMediaInfo_();
+        const useVideoTimingInfo = this.loaderType_ === 'main' && trackInfo && trackInfo.hasVideo;
+        let firstVideoFrameTimeForData;
+        if (useVideoTimingInfo) {
+          firstVideoFrameTimeForData = segmentInfo.videoTimingInfo.start;
+        } // Segment loader knows more about segment timing than the transmuxer (in certain
+        // aspects), so make any changes required for a more accurate start time.
+        // Don't set the end time yet, as the segment may not be finished processing.
+
+        segmentInfo.timingInfo.start = this.trueSegmentStart_({
+          currentStart: segmentInfo.timingInfo.start,
+          playlist: segmentInfo.playlist,
+          mediaIndex: segmentInfo.mediaIndex,
+          currentVideoTimestampOffset: this.sourceUpdater_.videoTimestampOffset(),
+          useVideoTimingInfo,
+          firstVideoFrameTimeForData,
+          videoTimingInfo: segmentInfo.videoTimingInfo,
+          audioTimingInfo: segmentInfo.audioTimingInfo
+        });
+      } // Init segments for audio and video only need to be appended in certain cases. Now
+      // that data is about to be appended, we can check the final cases to determine
+      // whether we should append an init segment.
+
+      this.updateAppendInitSegmentStatus(segmentInfo, result.type); // Timestamp offset should be updated once we get new data and have its timing info,
+      // as we use the start of the segment to offset the best guess (playlist provided)
+      // timestamp offset.
+
+      this.updateSourceBufferTimestampOffset_(segmentInfo); // if this is a sync request we need to determine whether it should
+      // be appended or not.
+
+      if (segmentInfo.isSyncRequest) {
+        // first save/update our timing info for this segment.
+        // this is what allows us to choose an accurate segment
+        // and the main reason we make a sync request.
+        this.updateTimingInfoEnd_(segmentInfo);
+        this.syncController_.saveSegmentTimingInfo({
+          segmentInfo,
+          shouldSaveTimelineMapping: this.loaderType_ === 'main'
+        });
+        const next = this.chooseNextRequest_(); // If the sync request isn't the segment that would be requested next
+        // after taking into account its timing info, do not append it.
+
+        if (next.mediaIndex !== segmentInfo.mediaIndex || next.partIndex !== segmentInfo.partIndex) {
+          this.logger_('sync segment was incorrect, not appending');
+          return;
+        } // otherwise append it like any other segment as our guess was correct.
+
+        this.logger_('sync segment was correct, appending');
+      } // Save some state so that in the future anything waiting on first append (and/or
+      // timestamp offset(s)) can process immediately. While the extra state isn't optimal,
+      // we need some notion of whether the timestamp offset or other relevant information
+      // has had a chance to be set.
+
+      segmentInfo.hasAppendedData_ = true; // Now that the timestamp offset should be set, we can append any waiting ID3 tags.
+
+      this.processMetadataQueue_();
+      this.appendData_(segmentInfo, result);
+    }
+    updateAppendInitSegmentStatus(segmentInfo, type) {
+      // alt audio doesn't manage timestamp offset
+      if (this.loaderType_ === 'main' && typeof segmentInfo.timestampOffset === 'number' &&
+      // in the case that we're handling partial data, we don't want to append an init
+      // segment for each chunk
+      !segmentInfo.changedTimestampOffset) {
+        // if the timestamp offset changed, the timeline may have changed, so we have to re-
+        // append init segments
+        this.appendInitSegment_ = {
+          audio: true,
+          video: true
+        };
+      }
+      if (this.playlistOfLastInitSegment_[type] !== segmentInfo.playlist) {
+        // make sure we append init segment on playlist changes, in case the media config
+        // changed
+        this.appendInitSegment_[type] = true;
+      }
+    }
+    getInitSegmentAndUpdateState_({
+      type,
+      initSegment,
+      map,
+      playlist
+    }) {
+      // "The EXT-X-MAP tag specifies how to obtain the Media Initialization Section
+      // (Section 3) required to parse the applicable Media Segments.  It applies to every
+      // Media Segment that appears after it in the Playlist until the next EXT-X-MAP tag
+      // or until the end of the playlist."
+      // https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.2.5
+      if (map) {
+        const id = initSegmentId(map);
+        if (this.activeInitSegmentId_ === id) {
+          // don't need to re-append the init segment if the ID matches
+          return null;
+        } // a map-specified init segment takes priority over any transmuxed (or otherwise
+        // obtained) init segment
+        //
+        // this also caches the init segment for later use
+
+        initSegment = this.initSegmentForMap(map, true).bytes;
+        this.activeInitSegmentId_ = id;
+      } // We used to always prepend init segments for video, however, that shouldn't be
+      // necessary. Instead, we should only append on changes, similar to what we've always
+      // done for audio. This is more important (though may not be that important) for
+      // frame-by-frame appending for LHLS, simply because of the increased quantity of
+      // appends.
+
+      if (initSegment && this.appendInitSegment_[type]) {
+        // Make sure we track the playlist that we last used for the init segment, so that
+        // we can re-append the init segment in the event that we get data from a new
+        // playlist. Discontinuities and track changes are handled in other sections.
+        this.playlistOfLastInitSegment_[type] = playlist; // Disable future init segment appends for this type. Until a change is necessary.
+
+        this.appendInitSegment_[type] = false; // we need to clear out the fmp4 active init segment id, since
+        // we are appending the muxer init segment
+
+        this.activeInitSegmentId_ = null;
+        return initSegment;
+      }
+      return null;
+    }
+    handleQuotaExceededError_({
+      segmentInfo,
+      type,
+      bytes
+    }, error) {
+      const audioBuffered = this.sourceUpdater_.audioBuffered();
+      const videoBuffered = this.sourceUpdater_.videoBuffered(); // For now we're ignoring any notion of gaps in the buffer, but they, in theory,
+      // should be cleared out during the buffer removals. However, log in case it helps
+      // debug.
+
+      if (audioBuffered.length > 1) {
+        this.logger_('On QUOTA_EXCEEDED_ERR, found gaps in the audio buffer: ' + timeRangesToArray(audioBuffered).join(', '));
+      }
+      if (videoBuffered.length > 1) {
+        this.logger_('On QUOTA_EXCEEDED_ERR, found gaps in the video buffer: ' + timeRangesToArray(videoBuffered).join(', '));
+      }
+      const audioBufferStart = audioBuffered.length ? audioBuffered.start(0) : 0;
+      const audioBufferEnd = audioBuffered.length ? audioBuffered.end(audioBuffered.length - 1) : 0;
+      const videoBufferStart = videoBuffered.length ? videoBuffered.start(0) : 0;
+      const videoBufferEnd = videoBuffered.length ? videoBuffered.end(videoBuffered.length - 1) : 0;
+      if (audioBufferEnd - audioBufferStart <= MIN_BACK_BUFFER && videoBufferEnd - videoBufferStart <= MIN_BACK_BUFFER) {
+        // Can't remove enough buffer to make room for new segment (or the browser doesn't
+        // allow for appends of segments this size). In the future, it may be possible to
+        // split up the segment and append in pieces, but for now, error out this playlist
+        // in an attempt to switch to a more manageable rendition.
+        this.logger_('On QUOTA_EXCEEDED_ERR, single segment too large to append to ' + 'buffer, triggering an error. ' + `Appended byte length: ${bytes.byteLength}, ` + `audio buffer: ${timeRangesToArray(audioBuffered).join(', ')}, ` + `video buffer: ${timeRangesToArray(videoBuffered).join(', ')}, `);
+        this.error({
+          message: 'Quota exceeded error with append of a single segment of content',
+          excludeUntil: Infinity,
+          metadata: {
+            errorType: videojs.Error.SegmentExceedsSourceBufferQuota
+          }
+        });
+        this.trigger('error');
+        return;
+      } // To try to resolve the quota exceeded error, clear back buffer and retry. This means
+      // that the segment-loader should block on future events until this one is handled, so
+      // that it doesn't keep moving onto further segments. Adding the call to the call
+      // queue will prevent further appends until waitingOnRemove_ and
+      // quotaExceededErrorRetryTimeout_ are cleared.
+      //
+      // Note that this will only block the current loader. In the case of demuxed content,
+      // the other load may keep filling as fast as possible. In practice, this should be
+      // OK, as it is a rare case when either audio has a high enough bitrate to fill up a
+      // source buffer, or video fills without enough room for audio to append (and without
+      // the availability of clearing out seconds of back buffer to make room for audio).
+      // But it might still be good to handle this case in the future as a TODO.
+
+      this.waitingOnRemove_ = true;
+      this.callQueue_.push(this.appendToSourceBuffer_.bind(this, {
+        segmentInfo,
+        type,
+        bytes
+      }));
+      const currentTime = this.currentTime_(); // Try to remove as much audio and video as possible to make room for new content
+      // before retrying.
+
+      const timeToRemoveUntil = currentTime - MIN_BACK_BUFFER;
+      this.logger_(`On QUOTA_EXCEEDED_ERR, removing audio/video from 0 to ${timeToRemoveUntil}`);
+      this.remove(0, timeToRemoveUntil, () => {
+        this.logger_(`On QUOTA_EXCEEDED_ERR, retrying append in ${MIN_BACK_BUFFER}s`);
+        this.waitingOnRemove_ = false; // wait the length of time alotted in the back buffer to prevent wasted
+        // attempts (since we can't clear less than the minimum)
+
+        this.quotaExceededErrorRetryTimeout_ = window.setTimeout(() => {
+          this.logger_('On QUOTA_EXCEEDED_ERR, re-processing call queue');
+          this.quotaExceededErrorRetryTimeout_ = null;
+          this.processCallQueue_();
+        }, MIN_BACK_BUFFER * 1000);
+      }, true);
+    }
+    handleAppendError_({
+      segmentInfo,
+      type,
+      bytes
+    }, error) {
+      // if there's no error, nothing to do
+      if (!error) {
+        return;
+      }
+      if (error.code === QUOTA_EXCEEDED_ERR) {
+        this.handleQuotaExceededError_({
+          segmentInfo,
+          type,
+          bytes
+        }); // A quota exceeded error should be recoverable with a future re-append, so no need
+        // to trigger an append error.
+
+        return;
+      }
+      this.logger_('Received non QUOTA_EXCEEDED_ERR on append', error); // If an append errors, we often can't recover.
+      // (see https://w3c.github.io/media-source/#sourcebuffer-append-error).
+      //
+      // Trigger a special error so that it can be handled separately from normal,
+      // recoverable errors.
+
+      this.error({
+        message: `${type} append of ${bytes.length}b failed for segment ` + `#${segmentInfo.mediaIndex} in playlist ${segmentInfo.playlist.id}`,
+        metadata: {
+          errorType: videojs.Error.SegmentAppendError
+        }
+      });
+      this.trigger('appenderror');
+    }
+    appendToSourceBuffer_({
+      segmentInfo,
+      type,
+      initSegment,
+      data,
+      bytes
+    }) {
+      // If this is a re-append, bytes were already created and don't need to be recreated
+      if (!bytes) {
+        const segments = [data];
+        let byteLength = data.byteLength;
+        if (initSegment) {
+          // if the media initialization segment is changing, append it before the content
+          // segment
+          segments.unshift(initSegment);
+          byteLength += initSegment.byteLength;
+        } // Technically we should be OK appending the init segment separately, however, we
+        // haven't yet tested that, and prepending is how we have always done things.
+
+        bytes = concatSegments({
+          bytes: byteLength,
+          segments
+        });
+      }
+      this.sourceUpdater_.appendBuffer({
+        segmentInfo,
+        type,
+        bytes
+      }, this.handleAppendError_.bind(this, {
+        segmentInfo,
+        type,
+        bytes
+      }));
+    }
+    handleSegmentTimingInfo_(type, requestId, segmentTimingInfo) {
+      if (!this.pendingSegment_ || requestId !== this.pendingSegment_.requestId) {
+        return;
+      }
+      const segment = this.pendingSegment_.segment;
+      const timingInfoProperty = `${type}TimingInfo`;
+      if (!segment[timingInfoProperty]) {
+        segment[timingInfoProperty] = {};
+      }
+      segment[timingInfoProperty].transmuxerPrependedSeconds = segmentTimingInfo.prependedContentDuration || 0;
+      segment[timingInfoProperty].transmuxedPresentationStart = segmentTimingInfo.start.presentation;
+      segment[timingInfoProperty].transmuxedDecodeStart = segmentTimingInfo.start.decode;
+      segment[timingInfoProperty].transmuxedPresentationEnd = segmentTimingInfo.end.presentation;
+      segment[timingInfoProperty].transmuxedDecodeEnd = segmentTimingInfo.end.decode; // mainly used as a reference for debugging
+
+      segment[timingInfoProperty].baseMediaDecodeTime = segmentTimingInfo.baseMediaDecodeTime;
+    }
+    appendData_(segmentInfo, result) {
+      const {
+        type,
+        data
+      } = result;
+      if (!data || !data.byteLength) {
+        return;
+      }
+      if (type === 'audio' && this.audioDisabled_) {
+        return;
+      }
+      const initSegment = this.getInitSegmentAndUpdateState_({
+        type,
+        initSegment: result.initSegment,
+        playlist: segmentInfo.playlist,
+        map: segmentInfo.isFmp4 ? segmentInfo.segment.map : null
+      });
+      this.appendToSourceBuffer_({
+        segmentInfo,
+        type,
+        initSegment,
+        data
+      });
+    }
+    /**
+     * load a specific segment from a request into the buffer
+     *
+     * @private
+     */
+
+    loadSegment_(segmentInfo) {
+      this.state = 'WAITING';
+      this.pendingSegment_ = segmentInfo;
+      this.trimBackBuffer_(segmentInfo);
+      if (typeof segmentInfo.timestampOffset === 'number') {
+        if (this.transmuxer_) {
+          this.transmuxer_.postMessage({
+            action: 'clearAllMp4Captions'
+          });
+        }
+      }
+      if (!this.hasEnoughInfoToLoad_()) {
+        this.loadQueue_.push(() => {
+          // regenerate the audioAppendStart, timestampOffset, etc as they
+          // may have changed since this function was added to the queue.
+          const options = _extends$1({}, segmentInfo, {
+            forceTimestampOffset: true
+          });
+          _extends$1(segmentInfo, this.generateSegmentInfo_(options));
+          this.isPendingTimestampOffset_ = false;
+          this.updateTransmuxerAndRequestSegment_(segmentInfo);
+        });
+        return;
+      }
+      this.updateTransmuxerAndRequestSegment_(segmentInfo);
+    }
+    updateTransmuxerAndRequestSegment_(segmentInfo) {
+      // We'll update the source buffer's timestamp offset once we have transmuxed data, but
+      // the transmuxer still needs to be updated before then.
+      //
+      // Even though keepOriginalTimestamps is set to true for the transmuxer, timestamp
+      // offset must be passed to the transmuxer for stream correcting adjustments.
+      if (this.shouldUpdateTransmuxerTimestampOffset_(segmentInfo.timestampOffset)) {
+        this.gopBuffer_.length = 0; // gopsToAlignWith was set before the GOP buffer was cleared
+
+        segmentInfo.gopsToAlignWith = [];
+        this.timeMapping_ = 0; // reset values in the transmuxer since a discontinuity should start fresh
+
+        this.transmuxer_.postMessage({
+          action: 'reset'
+        });
+        this.transmuxer_.postMessage({
+          action: 'setTimestampOffset',
+          timestampOffset: segmentInfo.timestampOffset
+        });
+      }
+      const simpleSegment = this.createSimplifiedSegmentObj_(segmentInfo);
+      const isEndOfStream = this.isEndOfStream_(segmentInfo.mediaIndex, segmentInfo.playlist, segmentInfo.partIndex);
+      const isWalkingForward = this.mediaIndex !== null;
+      const isDiscontinuity = segmentInfo.timeline !== this.currentTimeline_ &&
+      // currentTimeline starts at -1, so we shouldn't end the timeline switching to 0,
+      // the first timeline
+      segmentInfo.timeline > 0;
+      const isEndOfTimeline = isEndOfStream || isWalkingForward && isDiscontinuity;
+      this.logger_(`Requesting
+${compactSegmentUrlDescription(segmentInfo.uri)}
+${segmentInfoString(segmentInfo)}`); // If there's an init segment associated with this segment, but it is not cached (identified by a lack of bytes),
+      // then this init segment has never been seen before and should be appended.
+      //
+      // At this point the content type (audio/video or both) is not yet known, but it should be safe to set
+      // both to true and leave the decision of whether to append the init segment to append time.
+
+      if (simpleSegment.map && !simpleSegment.map.bytes) {
+        this.logger_('going to request init segment.');
+        this.appendInitSegment_ = {
+          video: true,
+          audio: true
+        };
+      }
+      segmentInfo.abortRequests = mediaSegmentRequest({
+        xhr: this.vhs_.xhr,
+        xhrOptions: this.xhrOptions_,
+        decryptionWorker: this.decrypter_,
+        segment: simpleSegment,
+        abortFn: this.handleAbort_.bind(this, segmentInfo),
+        progressFn: this.handleProgress_.bind(this),
+        trackInfoFn: this.handleTrackInfo_.bind(this),
+        timingInfoFn: this.handleTimingInfo_.bind(this),
+        videoSegmentTimingInfoFn: this.handleSegmentTimingInfo_.bind(this, 'video', segmentInfo.requestId),
+        audioSegmentTimingInfoFn: this.handleSegmentTimingInfo_.bind(this, 'audio', segmentInfo.requestId),
+        captionsFn: this.handleCaptions_.bind(this),
+        isEndOfTimeline,
+        endedTimelineFn: () => {
+          this.logger_('received endedtimeline callback');
+        },
+        id3Fn: this.handleId3_.bind(this),
+        dataFn: this.handleData_.bind(this),
+        doneFn: this.segmentRequestFinished_.bind(this),
+        onTransmuxerLog: ({
+          message,
+          level,
+          stream
+        }) => {
+          this.logger_(`${segmentInfoString(segmentInfo)} logged from transmuxer stream ${stream} as a ${level}: ${message}`);
+        }
+      });
+    }
+    /**
+     * trim the back buffer so that we don't have too much data
+     * in the source buffer
+     *
+     * @private
+     *
+     * @param {Object} segmentInfo - the current segment
+     */
+
+    trimBackBuffer_(segmentInfo) {
+      const removeToTime = safeBackBufferTrimTime(this.seekable_(), this.currentTime_(), this.playlist_.targetDuration || 10); // Chrome has a hard limit of 150MB of
+      // buffer and a very conservative "garbage collector"
+      // We manually clear out the old buffer to ensure
+      // we don't trigger the QuotaExceeded error
+      // on the source buffer during subsequent appends
+
+      if (removeToTime > 0) {
+        this.remove(0, removeToTime);
+      }
+    }
+    /**
+     * created a simplified copy of the segment object with just the
+     * information necessary to perform the XHR and decryption
+     *
+     * @private
+     *
+     * @param {Object} segmentInfo - the current segment
+     * @return {Object} a simplified segment object copy
+     */
+
+    createSimplifiedSegmentObj_(segmentInfo) {
+      const segment = segmentInfo.segment;
+      const part = segmentInfo.part;
+      const simpleSegment = {
+        resolvedUri: part ? part.resolvedUri : segment.resolvedUri,
+        byterange: part ? part.byterange : segment.byterange,
+        requestId: segmentInfo.requestId,
+        transmuxer: segmentInfo.transmuxer,
+        audioAppendStart: segmentInfo.audioAppendStart,
+        gopsToAlignWith: segmentInfo.gopsToAlignWith,
+        part: segmentInfo.part
+      };
+      const previousSegment = segmentInfo.playlist.segments[segmentInfo.mediaIndex - 1];
+      if (previousSegment && previousSegment.timeline === segment.timeline) {
+        // The baseStartTime of a segment is used to handle rollover when probing the TS
+        // segment to retrieve timing information. Since the probe only looks at the media's
+        // times (e.g., PTS and DTS values of the segment), and doesn't consider the
+        // player's time (e.g., player.currentTime()), baseStartTime should reflect the
+        // media time as well. transmuxedDecodeEnd represents the end time of a segment, in
+        // seconds of media time, so should be used here. The previous segment is used since
+        // the end of the previous segment should represent the beginning of the current
+        // segment, so long as they are on the same timeline.
+        if (previousSegment.videoTimingInfo) {
+          simpleSegment.baseStartTime = previousSegment.videoTimingInfo.transmuxedDecodeEnd;
+        } else if (previousSegment.audioTimingInfo) {
+          simpleSegment.baseStartTime = previousSegment.audioTimingInfo.transmuxedDecodeEnd;
+        }
+      }
+      if (segment.key) {
+        // if the media sequence is greater than 2^32, the IV will be incorrect
+        // assuming 10s segments, that would be about 1300 years
+        const iv = segment.key.iv || new Uint32Array([0, 0, 0, segmentInfo.mediaIndex + segmentInfo.playlist.mediaSequence]);
+        simpleSegment.key = this.segmentKey(segment.key);
+        simpleSegment.key.iv = iv;
+      }
+      if (segment.map) {
+        simpleSegment.map = this.initSegmentForMap(segment.map);
+      }
+      return simpleSegment;
+    }
+    saveTransferStats_(stats) {
+      // every request counts as a media request even if it has been aborted
+      // or canceled due to a timeout
+      this.mediaRequests += 1;
+      if (stats) {
+        this.mediaBytesTransferred += stats.bytesReceived;
+        this.mediaTransferDuration += stats.roundTripTime;
+      }
+    }
+    saveBandwidthRelatedStats_(duration, stats) {
+      // byteLength will be used for throughput, and should be based on bytes receieved,
+      // which we only know at the end of the request and should reflect total bytes
+      // downloaded rather than just bytes processed from components of the segment
+      this.pendingSegment_.byteLength = stats.bytesReceived;
+      if (duration < MIN_SEGMENT_DURATION_TO_SAVE_STATS) {
+        this.logger_(`Ignoring segment's bandwidth because its duration of ${duration}` + ` is less than the min to record ${MIN_SEGMENT_DURATION_TO_SAVE_STATS}`);
+        return;
+      }
+      this.bandwidth = stats.bandwidth;
+      this.roundTrip = stats.roundTripTime;
+    }
+    handleTimeout_() {
+      // although the VTT segment loader bandwidth isn't really used, it's good to
+      // maintain functinality between segment loaders
+      this.mediaRequestsTimedout += 1;
+      this.bandwidth = 1;
+      this.roundTrip = NaN;
+      this.trigger('bandwidthupdate');
+      this.trigger('timeout');
+    }
+    /**
+     * Handle the callback from the segmentRequest function and set the
+     * associated SegmentLoader state and errors if necessary
+     *
+     * @private
+     */
+
+    segmentRequestFinished_(error, simpleSegment, result) {
+      // TODO handle special cases, e.g., muxed audio/video but only audio in the segment
+      // check the call queue directly since this function doesn't need to deal with any
+      // data, and can continue even if the source buffers are not set up and we didn't get
+      // any data from the segment
+      if (this.callQueue_.length) {
+        this.callQueue_.push(this.segmentRequestFinished_.bind(this, error, simpleSegment, result));
+        return;
+      }
+      this.saveTransferStats_(simpleSegment.stats); // The request was aborted and the SegmentLoader has already been reset
+
+      if (!this.pendingSegment_) {
+        return;
+      } // the request was aborted and the SegmentLoader has already started
+      // another request. this can happen when the timeout for an aborted
+      // request triggers due to a limitation in the XHR library
+      // do not count this as any sort of request or we risk double-counting
+
+      if (simpleSegment.requestId !== this.pendingSegment_.requestId) {
+        return;
+      } // an error occurred from the active pendingSegment_ so reset everything
+
+      if (error) {
+        this.pendingSegment_ = null;
+        this.state = 'READY'; // aborts are not a true error condition and nothing corrective needs to be done
+
+        if (error.code === REQUEST_ERRORS.ABORTED) {
+          return;
+        }
+        this.pause(); // the error is really just that at least one of the requests timed-out
+        // set the bandwidth to a very low value and trigger an ABR switch to
+        // take emergency action
+
+        if (error.code === REQUEST_ERRORS.TIMEOUT) {
+          this.handleTimeout_();
+          return;
+        } // if control-flow has arrived here, then the error is real
+        // emit an error event to exclude the current playlist
+
+        this.mediaRequestsErrored += 1;
+        this.error(error);
+        this.trigger('error');
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // the response was a success so set any bandwidth stats the request
+      // generated for ABR purposes
+
+      this.saveBandwidthRelatedStats_(segmentInfo.duration, simpleSegment.stats);
+      segmentInfo.endOfAllRequests = simpleSegment.endOfAllRequests;
+      if (result.gopInfo) {
+        this.gopBuffer_ = updateGopBuffer(this.gopBuffer_, result.gopInfo, this.safeAppend_);
+      } // Although we may have already started appending on progress, we shouldn't switch the
+      // state away from loading until we are officially done loading the segment data.
+
+      this.state = 'APPENDING'; // used for testing
+
+      this.trigger('appending');
+      this.waitForAppendsToComplete_(segmentInfo);
+    }
+    setTimeMapping_(timeline) {
+      const timelineMapping = this.syncController_.mappingForTimeline(timeline);
+      if (timelineMapping !== null) {
+        this.timeMapping_ = timelineMapping;
+      }
+    }
+    updateMediaSecondsLoaded_(segment) {
+      if (typeof segment.start === 'number' && typeof segment.end === 'number') {
+        this.mediaSecondsLoaded += segment.end - segment.start;
+      } else {
+        this.mediaSecondsLoaded += segment.duration;
+      }
+    }
+    shouldUpdateTransmuxerTimestampOffset_(timestampOffset) {
+      if (timestampOffset === null) {
+        return false;
+      } // note that we're potentially using the same timestamp offset for both video and
+      // audio
+
+      if (this.loaderType_ === 'main' && timestampOffset !== this.sourceUpdater_.videoTimestampOffset()) {
+        return true;
+      }
+      if (!this.audioDisabled_ && timestampOffset !== this.sourceUpdater_.audioTimestampOffset()) {
+        return true;
+      }
+      return false;
+    }
+    trueSegmentStart_({
+      currentStart,
+      playlist,
+      mediaIndex,
+      firstVideoFrameTimeForData,
+      currentVideoTimestampOffset,
+      useVideoTimingInfo,
+      videoTimingInfo,
+      audioTimingInfo
+    }) {
+      if (typeof currentStart !== 'undefined') {
+        // if start was set once, keep using it
+        return currentStart;
+      }
+      if (!useVideoTimingInfo) {
+        return audioTimingInfo.start;
+      }
+      const previousSegment = playlist.segments[mediaIndex - 1]; // The start of a segment should be the start of the first full frame contained
+      // within that segment. Since the transmuxer maintains a cache of incomplete data
+      // from and/or the last frame seen, the start time may reflect a frame that starts
+      // in the previous segment. Check for that case and ensure the start time is
+      // accurate for the segment.
+
+      if (mediaIndex === 0 || !previousSegment || typeof previousSegment.start === 'undefined' || previousSegment.end !== firstVideoFrameTimeForData + currentVideoTimestampOffset) {
+        return firstVideoFrameTimeForData;
+      }
+      return videoTimingInfo.start;
+    }
+    waitForAppendsToComplete_(segmentInfo) {
+      const trackInfo = this.getCurrentMediaInfo_(segmentInfo);
+      if (!trackInfo) {
+        this.error({
+          message: 'No starting media returned, likely due to an unsupported media format.',
+          playlistExclusionDuration: Infinity,
+          metadata: {
+            errorType: videojs.Error.SegmentUnsupportedMediaFormat
+          }
+        });
+        this.trigger('error');
+        return;
+      } // Although transmuxing is done, appends may not yet be finished. Throw a marker
+      // on each queue this loader is responsible for to ensure that the appends are
+      // complete.
+
+      const {
+        hasAudio,
+        hasVideo,
+        isMuxed
+      } = trackInfo;
+      const waitForVideo = this.loaderType_ === 'main' && hasVideo;
+      const waitForAudio = !this.audioDisabled_ && hasAudio && !isMuxed;
+      segmentInfo.waitingOnAppends = 0; // segments with no data
+
+      if (!segmentInfo.hasAppendedData_) {
+        if (!segmentInfo.timingInfo && typeof segmentInfo.timestampOffset === 'number') {
+          // When there's no audio or video data in the segment, there's no audio or video
+          // timing information.
+          //
+          // If there's no audio or video timing information, then the timestamp offset
+          // can't be adjusted to the appropriate value for the transmuxer and source
+          // buffers.
+          //
+          // Therefore, the next segment should be used to set the timestamp offset.
+          this.isPendingTimestampOffset_ = true;
+        } // override settings for metadata only segments
+
+        segmentInfo.timingInfo = {
+          start: 0
+        };
+        segmentInfo.waitingOnAppends++;
+        if (!this.isPendingTimestampOffset_) {
+          // update the timestampoffset
+          this.updateSourceBufferTimestampOffset_(segmentInfo); // make sure the metadata queue is processed even though we have
+          // no video/audio data.
+
+          this.processMetadataQueue_();
+        } // append is "done" instantly with no data.
+
+        this.checkAppendsDone_(segmentInfo);
+        return;
+      } // Since source updater could call back synchronously, do the increments first.
+
+      if (waitForVideo) {
+        segmentInfo.waitingOnAppends++;
+      }
+      if (waitForAudio) {
+        segmentInfo.waitingOnAppends++;
+      }
+      if (waitForVideo) {
+        this.sourceUpdater_.videoQueueCallback(this.checkAppendsDone_.bind(this, segmentInfo));
+      }
+      if (waitForAudio) {
+        this.sourceUpdater_.audioQueueCallback(this.checkAppendsDone_.bind(this, segmentInfo));
+      }
+    }
+    checkAppendsDone_(segmentInfo) {
+      if (this.checkForAbort_(segmentInfo.requestId)) {
+        return;
+      }
+      segmentInfo.waitingOnAppends--;
+      if (segmentInfo.waitingOnAppends === 0) {
+        this.handleAppendsDone_();
+      }
+    }
+    checkForIllegalMediaSwitch(trackInfo) {
+      const illegalMediaSwitchError = illegalMediaSwitch(this.loaderType_, this.getCurrentMediaInfo_(), trackInfo);
+      if (illegalMediaSwitchError) {
+        this.error({
+          message: illegalMediaSwitchError,
+          playlistExclusionDuration: Infinity,
+          metadata: {
+            errorType: videojs.Error.SegmentSwitchError
+          }
+        });
+        this.trigger('error');
+        return true;
+      }
+      return false;
+    }
+    updateSourceBufferTimestampOffset_(segmentInfo) {
+      if (segmentInfo.timestampOffset === null ||
+      // we don't yet have the start for whatever media type (video or audio) has
+      // priority, timing-wise, so we must wait
+      typeof segmentInfo.timingInfo.start !== 'number' ||
+      // already updated the timestamp offset for this segment
+      segmentInfo.changedTimestampOffset ||
+      // the alt audio loader should not be responsible for setting the timestamp offset
+      this.loaderType_ !== 'main') {
+        return;
+      }
+      let didChange = false; // Primary timing goes by video, and audio is trimmed in the transmuxer, meaning that
+      // the timing info here comes from video. In the event that the audio is longer than
+      // the video, this will trim the start of the audio.
+      // This also trims any offset from 0 at the beginning of the media
+
+      segmentInfo.timestampOffset -= this.getSegmentStartTimeForTimestampOffsetCalculation_({
+        videoTimingInfo: segmentInfo.segment.videoTimingInfo,
+        audioTimingInfo: segmentInfo.segment.audioTimingInfo,
+        timingInfo: segmentInfo.timingInfo
+      }); // In the event that there are part segment downloads, each will try to update the
+      // timestamp offset. Retaining this bit of state prevents us from updating in the
+      // future (within the same segment), however, there may be a better way to handle it.
+
+      segmentInfo.changedTimestampOffset = true;
+      if (segmentInfo.timestampOffset !== this.sourceUpdater_.videoTimestampOffset()) {
+        this.sourceUpdater_.videoTimestampOffset(segmentInfo.timestampOffset);
+        didChange = true;
+      }
+      if (segmentInfo.timestampOffset !== this.sourceUpdater_.audioTimestampOffset()) {
+        this.sourceUpdater_.audioTimestampOffset(segmentInfo.timestampOffset);
+        didChange = true;
+      }
+      if (didChange) {
+        this.trigger('timestampoffset');
+      }
+    }
+    getSegmentStartTimeForTimestampOffsetCalculation_({
+      videoTimingInfo,
+      audioTimingInfo,
+      timingInfo
+    }) {
+      if (!this.useDtsForTimestampOffset_) {
+        return timingInfo.start;
+      }
+      if (videoTimingInfo && typeof videoTimingInfo.transmuxedDecodeStart === 'number') {
+        return videoTimingInfo.transmuxedDecodeStart;
+      } // handle audio only
+
+      if (audioTimingInfo && typeof audioTimingInfo.transmuxedDecodeStart === 'number') {
+        return audioTimingInfo.transmuxedDecodeStart;
+      } // handle content not transmuxed (e.g., MP4)
+
+      return timingInfo.start;
+    }
+    updateTimingInfoEnd_(segmentInfo) {
+      segmentInfo.timingInfo = segmentInfo.timingInfo || {};
+      const trackInfo = this.getMediaInfo_();
+      const useVideoTimingInfo = this.loaderType_ === 'main' && trackInfo && trackInfo.hasVideo;
+      const prioritizedTimingInfo = useVideoTimingInfo && segmentInfo.videoTimingInfo ? segmentInfo.videoTimingInfo : segmentInfo.audioTimingInfo;
+      if (!prioritizedTimingInfo) {
+        return;
+      }
+      segmentInfo.timingInfo.end = typeof prioritizedTimingInfo.end === 'number' ?
+      // End time may not exist in a case where we aren't parsing the full segment (one
+      // current example is the case of fmp4), so use the rough duration to calculate an
+      // end time.
+      prioritizedTimingInfo.end : prioritizedTimingInfo.start + segmentInfo.duration;
+    }
+    /**
+     * callback to run when appendBuffer is finished. detects if we are
+     * in a good state to do things with the data we got, or if we need
+     * to wait for more
+     *
+     * @private
+     */
+
+    handleAppendsDone_() {
+      // appendsdone can cause an abort
+      if (this.pendingSegment_) {
+        this.trigger('appendsdone');
+      }
+      if (!this.pendingSegment_) {
+        this.state = 'READY'; // TODO should this move into this.checkForAbort to speed up requests post abort in
+        // all appending cases?
+
+        if (!this.paused()) {
+          this.monitorBuffer_();
+        }
+        return;
+      }
+      const segmentInfo = this.pendingSegment_;
+      if (segmentInfo.part && segmentInfo.part.syncInfo) {
+        // low-latency flow
+        segmentInfo.part.syncInfo.markAppended();
+      } else if (segmentInfo.segment.syncInfo) {
+        // normal flow
+        segmentInfo.segment.syncInfo.markAppended();
+      } // Now that the end of the segment has been reached, we can set the end time. It's
+      // best to wait until all appends are done so we're sure that the primary media is
+      // finished (and we have its end time).
+
+      this.updateTimingInfoEnd_(segmentInfo);
+      if (this.shouldSaveSegmentTimingInfo_) {
+        // Timeline mappings should only be saved for the main loader. This is for multiple
+        // reasons:
+        //
+        // 1) Only one mapping is saved per timeline, meaning that if both the audio loader
+        //    and the main loader try to save the timeline mapping, whichever comes later
+        //    will overwrite the first. In theory this is OK, as the mappings should be the
+        //    same, however, it breaks for (2)
+        // 2) In the event of a live stream, the initial live point will make for a somewhat
+        //    arbitrary mapping. If audio and video streams are not perfectly in-sync, then
+        //    the mapping will be off for one of the streams, dependent on which one was
+        //    first saved (see (1)).
+        // 3) Primary timing goes by video in VHS, so the mapping should be video.
+        //
+        // Since the audio loader will wait for the main loader to load the first segment,
+        // the main loader will save the first timeline mapping, and ensure that there won't
+        // be a case where audio loads two segments without saving a mapping (thus leading
+        // to missing segment timing info).
+        this.syncController_.saveSegmentTimingInfo({
+          segmentInfo,
+          shouldSaveTimelineMapping: this.loaderType_ === 'main'
+        });
+      }
+      const segmentDurationMessage = getTroublesomeSegmentDurationMessage(segmentInfo, this.sourceType_);
+      if (segmentDurationMessage) {
+        if (segmentDurationMessage.severity === 'warn') {
+          videojs.log.warn(segmentDurationMessage.message);
+        } else {
+          this.logger_(segmentDurationMessage.message);
+        }
+      }
+      this.recordThroughput_(segmentInfo);
+      this.pendingSegment_ = null;
+      this.state = 'READY';
+      if (segmentInfo.isSyncRequest) {
+        this.trigger('syncinfoupdate'); // if the sync request was not appended
+        // then it was not the correct segment.
+        // throw it away and use the data it gave us
+        // to get the correct one.
+
+        if (!segmentInfo.hasAppendedData_) {
+          this.logger_(`Throwing away un-appended sync request ${segmentInfoString(segmentInfo)}`);
+          return;
+        }
+      }
+      this.logger_(`Appended ${segmentInfoString(segmentInfo)}`);
+      this.addSegmentMetadataCue_(segmentInfo);
+      this.fetchAtBuffer_ = true;
+      if (this.currentTimeline_ !== segmentInfo.timeline) {
+        this.timelineChangeController_.lastTimelineChange({
+          type: this.loaderType_,
+          from: this.currentTimeline_,
+          to: segmentInfo.timeline
+        }); // If audio is not disabled, the main segment loader is responsible for updating
+        // the audio timeline as well. If the content is video only, this won't have any
+        // impact.
+
+        if (this.loaderType_ === 'main' && !this.audioDisabled_) {
+          this.timelineChangeController_.lastTimelineChange({
+            type: 'audio',
+            from: this.currentTimeline_,
+            to: segmentInfo.timeline
+          });
+        }
+      }
+      this.currentTimeline_ = segmentInfo.timeline; // We must update the syncinfo to recalculate the seekable range before
+      // the following conditional otherwise it may consider this a bad "guess"
+      // and attempt to resync when the post-update seekable window and live
+      // point would mean that this was the perfect segment to fetch
+
+      this.trigger('syncinfoupdate');
+      const segment = segmentInfo.segment;
+      const part = segmentInfo.part;
+      const badSegmentGuess = segment.end && this.currentTime_() - segment.end > segmentInfo.playlist.targetDuration * 3;
+      const badPartGuess = part && part.end && this.currentTime_() - part.end > segmentInfo.playlist.partTargetDuration * 3; // If we previously appended a segment/part that ends more than 3 part/targetDurations before
+      // the currentTime_ that means that our conservative guess was too conservative.
+      // In that case, reset the loader state so that we try to use any information gained
+      // from the previous request to create a new, more accurate, sync-point.
+
+      if (badSegmentGuess || badPartGuess) {
+        this.logger_(`bad ${badSegmentGuess ? 'segment' : 'part'} ${segmentInfoString(segmentInfo)}`);
+        this.resetEverything();
+        return;
+      }
+      const isWalkingForward = this.mediaIndex !== null; // Don't do a rendition switch unless we have enough time to get a sync segment
+      // and conservatively guess
+
+      if (isWalkingForward) {
+        this.trigger('bandwidthupdate');
+      }
+      this.trigger('progress');
+      this.mediaIndex = segmentInfo.mediaIndex;
+      this.partIndex = segmentInfo.partIndex; // any time an update finishes and the last segment is in the
+      // buffer, end the stream. this ensures the "ended" event will
+      // fire if playback reaches that point.
+
+      if (this.isEndOfStream_(segmentInfo.mediaIndex, segmentInfo.playlist, segmentInfo.partIndex)) {
+        this.endOfStream();
+      } // used for testing
+
+      this.trigger('appended');
+      if (segmentInfo.hasAppendedData_) {
+        this.mediaAppends++;
+      }
+      if (!this.paused()) {
+        this.monitorBuffer_();
+      }
+    }
+    /**
+     * Records the current throughput of the decrypt, transmux, and append
+     * portion of the semgment pipeline. `throughput.rate` is a the cumulative
+     * moving average of the throughput. `throughput.count` is the number of
+     * data points in the average.
+     *
+     * @private
+     * @param {Object} segmentInfo the object returned by loadSegment
+     */
+
+    recordThroughput_(segmentInfo) {
+      if (segmentInfo.duration < MIN_SEGMENT_DURATION_TO_SAVE_STATS) {
+        this.logger_(`Ignoring segment's throughput because its duration of ${segmentInfo.duration}` + ` is less than the min to record ${MIN_SEGMENT_DURATION_TO_SAVE_STATS}`);
+        return;
+      }
+      const rate = this.throughput.rate; // Add one to the time to ensure that we don't accidentally attempt to divide
+      // by zero in the case where the throughput is ridiculously high
+
+      const segmentProcessingTime = Date.now() - segmentInfo.endOfAllRequests + 1; // Multiply by 8000 to convert from bytes/millisecond to bits/second
+
+      const segmentProcessingThroughput = Math.floor(segmentInfo.byteLength / segmentProcessingTime * 8 * 1000); // This is just a cumulative moving average calculation:
+      //   newAvg = oldAvg + (sample - oldAvg) / (sampleCount + 1)
+
+      this.throughput.rate += (segmentProcessingThroughput - rate) / ++this.throughput.count;
+    }
+    /**
+     * Adds a cue to the segment-metadata track with some metadata information about the
+     * segment
+     *
+     * @private
+     * @param {Object} segmentInfo
+     *        the object returned by loadSegment
+     * @method addSegmentMetadataCue_
+     */
+
+    addSegmentMetadataCue_(segmentInfo) {
+      if (!this.segmentMetadataTrack_) {
+        return;
+      }
+      const segment = segmentInfo.segment;
+      const start = segment.start;
+      const end = segment.end; // Do not try adding the cue if the start and end times are invalid.
+
+      if (!finite(start) || !finite(end)) {
+        return;
+      }
+      removeCuesFromTrack(start, end, this.segmentMetadataTrack_);
+      const Cue = window.WebKitDataCue || window.VTTCue;
+      const value = {
+        custom: segment.custom,
+        dateTimeObject: segment.dateTimeObject,
+        dateTimeString: segment.dateTimeString,
+        programDateTime: segment.programDateTime,
+        bandwidth: segmentInfo.playlist.attributes.BANDWIDTH,
+        resolution: segmentInfo.playlist.attributes.RESOLUTION,
+        codecs: segmentInfo.playlist.attributes.CODECS,
+        byteLength: segmentInfo.byteLength,
+        uri: segmentInfo.uri,
+        timeline: segmentInfo.timeline,
+        playlist: segmentInfo.playlist.id,
+        start,
+        end
+      };
+      const data = JSON.stringify(value);
+      const cue = new Cue(start, end, data); // Attach the metadata to the value property of the cue to keep consistency between
+      // the differences of WebKitDataCue in safari and VTTCue in other browsers
+
+      cue.value = value;
+      this.segmentMetadataTrack_.addCue(cue);
+    }
+  }
+  function noop() {}
+  const toTitleCase = function (string) {
+    if (typeof string !== 'string') {
+      return string;
+    }
+    return string.replace(/./, w => w.toUpperCase());
+  };
+
+  /**
+   * @file source-updater.js
+   */
+  const bufferTypes = ['video', 'audio'];
+  const updating = (type, sourceUpdater) => {
+    const sourceBuffer = sourceUpdater[`${type}Buffer`];
+    return sourceBuffer && sourceBuffer.updating || sourceUpdater.queuePending[type];
+  };
+  const nextQueueIndexOfType = (type, queue) => {
+    for (let i = 0; i < queue.length; i++) {
+      const queueEntry = queue[i];
+      if (queueEntry.type === 'mediaSource') {
+        // If the next entry is a media source entry (uses multiple source buffers), block
+        // processing to allow it to go through first.
+        return null;
+      }
+      if (queueEntry.type === type) {
+        return i;
+      }
+    }
+    return null;
+  };
+  const shiftQueue = (type, sourceUpdater) => {
+    if (sourceUpdater.queue.length === 0) {
+      return;
+    }
+    let queueIndex = 0;
+    let queueEntry = sourceUpdater.queue[queueIndex];
+    if (queueEntry.type === 'mediaSource') {
+      if (!sourceUpdater.updating() && sourceUpdater.mediaSource.readyState !== 'closed') {
+        sourceUpdater.queue.shift();
+        queueEntry.action(sourceUpdater);
+        if (queueEntry.doneFn) {
+          queueEntry.doneFn();
+        } // Only specific source buffer actions must wait for async updateend events. Media
+        // Source actions process synchronously. Therefore, both audio and video source
+        // buffers are now clear to process the next queue entries.
+
+        shiftQueue('audio', sourceUpdater);
+        shiftQueue('video', sourceUpdater);
+      } // Media Source actions require both source buffers, so if the media source action
+      // couldn't process yet (because one or both source buffers are busy), block other
+      // queue actions until both are available and the media source action can process.
+
+      return;
+    }
+    if (type === 'mediaSource') {
+      // If the queue was shifted by a media source action (this happens when pushing a
+      // media source action onto the queue), then it wasn't from an updateend event from an
+      // audio or video source buffer, so there's no change from previous state, and no
+      // processing should be done.
+      return;
+    } // Media source queue entries don't need to consider whether the source updater is
+    // started (i.e., source buffers are created) as they don't need the source buffers, but
+    // source buffer queue entries do.
+
+    if (!sourceUpdater.ready() || sourceUpdater.mediaSource.readyState === 'closed' || updating(type, sourceUpdater)) {
+      return;
+    }
+    if (queueEntry.type !== type) {
+      queueIndex = nextQueueIndexOfType(type, sourceUpdater.queue);
+      if (queueIndex === null) {
+        // Either there's no queue entry that uses this source buffer type in the queue, or
+        // there's a media source queue entry before the next entry of this type, in which
+        // case wait for that action to process first.
+        return;
+      }
+      queueEntry = sourceUpdater.queue[queueIndex];
+    }
+    sourceUpdater.queue.splice(queueIndex, 1); // Keep a record that this source buffer type is in use.
+    //
+    // The queue pending operation must be set before the action is performed in the event
+    // that the action results in a synchronous event that is acted upon. For instance, if
+    // an exception is thrown that can be handled, it's possible that new actions will be
+    // appended to an empty queue and immediately executed, but would not have the correct
+    // pending information if this property was set after the action was performed.
+
+    sourceUpdater.queuePending[type] = queueEntry;
+    queueEntry.action(type, sourceUpdater);
+    if (!queueEntry.doneFn) {
+      // synchronous operation, process next entry
+      sourceUpdater.queuePending[type] = null;
+      shiftQueue(type, sourceUpdater);
+      return;
+    }
+  };
+  const cleanupBuffer = (type, sourceUpdater) => {
+    const buffer = sourceUpdater[`${type}Buffer`];
+    const titleType = toTitleCase(type);
+    if (!buffer) {
+      return;
+    }
+    buffer.removeEventListener('updateend', sourceUpdater[`on${titleType}UpdateEnd_`]);
+    buffer.removeEventListener('error', sourceUpdater[`on${titleType}Error_`]);
+    sourceUpdater.codecs[type] = null;
+    sourceUpdater[`${type}Buffer`] = null;
+  };
+  const inSourceBuffers = (mediaSource, sourceBuffer) => mediaSource && sourceBuffer && Array.prototype.indexOf.call(mediaSource.sourceBuffers, sourceBuffer) !== -1;
+  const actions = {
+    appendBuffer: (bytes, segmentInfo, onError) => (type, sourceUpdater) => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`Appending segment ${segmentInfo.mediaIndex}'s ${bytes.length} bytes to ${type}Buffer`);
+      try {
+        sourceBuffer.appendBuffer(bytes);
+      } catch (e) {
+        sourceUpdater.logger_(`Error with code ${e.code} ` + (e.code === QUOTA_EXCEEDED_ERR ? '(QUOTA_EXCEEDED_ERR) ' : '') + `when appending segment ${segmentInfo.mediaIndex} to ${type}Buffer`);
+        sourceUpdater.queuePending[type] = null;
+        onError(e);
+      }
+    },
+    remove: (start, end) => (type, sourceUpdater) => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`Removing ${start} to ${end} from ${type}Buffer`);
+      try {
+        sourceBuffer.remove(start, end);
+      } catch (e) {
+        sourceUpdater.logger_(`Remove ${start} to ${end} from ${type}Buffer failed`);
+      }
+    },
+    timestampOffset: offset => (type, sourceUpdater) => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`Setting ${type}timestampOffset to ${offset}`);
+      sourceBuffer.timestampOffset = offset;
+    },
+    callback: callback => (type, sourceUpdater) => {
+      callback();
+    },
+    endOfStream: error => sourceUpdater => {
+      if (sourceUpdater.mediaSource.readyState !== 'open') {
+        return;
+      }
+      sourceUpdater.logger_(`Calling mediaSource endOfStream(${error || ''})`);
+      try {
+        sourceUpdater.mediaSource.endOfStream(error);
+      } catch (e) {
+        videojs.log.warn('Failed to call media source endOfStream', e);
+      }
+    },
+    duration: duration => sourceUpdater => {
+      sourceUpdater.logger_(`Setting mediaSource duration to ${duration}`);
+      try {
+        sourceUpdater.mediaSource.duration = duration;
+      } catch (e) {
+        videojs.log.warn('Failed to set media source duration', e);
+      }
+    },
+    abort: () => (type, sourceUpdater) => {
+      if (sourceUpdater.mediaSource.readyState !== 'open') {
+        return;
+      }
+      const sourceBuffer = sourceUpdater[`${type}Buffer`]; // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`calling abort on ${type}Buffer`);
+      try {
+        sourceBuffer.abort();
+      } catch (e) {
+        videojs.log.warn(`Failed to abort on ${type}Buffer`, e);
+      }
+    },
+    addSourceBuffer: (type, codec) => sourceUpdater => {
+      const titleType = toTitleCase(type);
+      const mime = getMimeForCodec(codec);
+      sourceUpdater.logger_(`Adding ${type}Buffer with codec ${codec} to mediaSource`);
+      const sourceBuffer = sourceUpdater.mediaSource.addSourceBuffer(mime);
+      sourceBuffer.addEventListener('updateend', sourceUpdater[`on${titleType}UpdateEnd_`]);
+      sourceBuffer.addEventListener('error', sourceUpdater[`on${titleType}Error_`]);
+      sourceUpdater.codecs[type] = codec;
+      sourceUpdater[`${type}Buffer`] = sourceBuffer;
+    },
+    removeSourceBuffer: type => sourceUpdater => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`];
+      cleanupBuffer(type, sourceUpdater); // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      }
+      sourceUpdater.logger_(`Removing ${type}Buffer with codec ${sourceUpdater.codecs[type]} from mediaSource`);
+      try {
+        sourceUpdater.mediaSource.removeSourceBuffer(sourceBuffer);
+      } catch (e) {
+        videojs.log.warn(`Failed to removeSourceBuffer ${type}Buffer`, e);
+      }
+    },
+    changeType: codec => (type, sourceUpdater) => {
+      const sourceBuffer = sourceUpdater[`${type}Buffer`];
+      const mime = getMimeForCodec(codec); // can't do anything if the media source / source buffer is null
+      // or the media source does not contain this source buffer.
+
+      if (!inSourceBuffers(sourceUpdater.mediaSource, sourceBuffer)) {
+        return;
+      } // do not update codec if we don't need to.
+      // Only update if we change the codec base.
+      // For example, going from avc1.640028 to avc1.64001f does not require a changeType call.
+
+      const newCodecBase = codec.substring(0, codec.indexOf('.'));
+      const oldCodec = sourceUpdater.codecs[type];
+      const oldCodecBase = oldCodec.substring(0, oldCodec.indexOf('.'));
+      if (oldCodecBase === newCodecBase) {
+        return;
+      }
+      sourceUpdater.logger_(`changing ${type}Buffer codec from ${sourceUpdater.codecs[type]} to ${codec}`); // check if change to the provided type is supported
+
+      try {
+        sourceBuffer.changeType(mime);
+        sourceUpdater.codecs[type] = codec;
+      } catch (e) {
+        videojs.log.warn(`Failed to changeType on ${type}Buffer`, e);
+      }
+    }
+  };
+  const pushQueue = ({
+    type,
+    sourceUpdater,
+    action,
+    doneFn,
+    name
+  }) => {
+    sourceUpdater.queue.push({
+      type,
+      action,
+      doneFn,
+      name
+    });
+    shiftQueue(type, sourceUpdater);
+  };
+  const onUpdateend = (type, sourceUpdater) => e => {
+    // Although there should, in theory, be a pending action for any updateend receieved,
+    // there are some actions that may trigger updateend events without set definitions in
+    // the w3c spec. For instance, setting the duration on the media source may trigger
+    // updateend events on source buffers. This does not appear to be in the spec. As such,
+    // if we encounter an updateend without a corresponding pending action from our queue
+    // for that source buffer type, process the next action.
+    const bufferedRangesForType = sourceUpdater[`${type}Buffered`]();
+    const descriptiveString = bufferedRangesToString(bufferedRangesForType);
+    sourceUpdater.logger_(`received "updateend" event for ${type} Source Buffer: `, descriptiveString);
+    if (sourceUpdater.queuePending[type]) {
+      const doneFn = sourceUpdater.queuePending[type].doneFn;
+      sourceUpdater.queuePending[type] = null;
+      if (doneFn) {
+        // if there's an error, report it
+        doneFn(sourceUpdater[`${type}Error_`]);
+      }
+    }
+    shiftQueue(type, sourceUpdater);
+  };
+  /**
+   * A queue of callbacks to be serialized and applied when a
+   * MediaSource and its associated SourceBuffers are not in the
+   * updating state. It is used by the segment loader to update the
+   * underlying SourceBuffers when new data is loaded, for instance.
+   *
+   * @class SourceUpdater
+   * @param {MediaSource} mediaSource the MediaSource to create the SourceBuffer from
+   * @param {string} mimeType the desired MIME type of the underlying SourceBuffer
+   */
+
+  class SourceUpdater extends videojs.EventTarget {
+    constructor(mediaSource) {
+      super();
+      this.mediaSource = mediaSource;
+      this.sourceopenListener_ = () => shiftQueue('mediaSource', this);
+      this.mediaSource.addEventListener('sourceopen', this.sourceopenListener_);
+      this.logger_ = logger('SourceUpdater'); // initial timestamp offset is 0
+
+      this.audioTimestampOffset_ = 0;
+      this.videoTimestampOffset_ = 0;
+      this.queue = [];
+      this.queuePending = {
+        audio: null,
+        video: null
+      };
+      this.delayedAudioAppendQueue_ = [];
+      this.videoAppendQueued_ = false;
+      this.codecs = {};
+      this.onVideoUpdateEnd_ = onUpdateend('video', this);
+      this.onAudioUpdateEnd_ = onUpdateend('audio', this);
+      this.onVideoError_ = e => {
+        // used for debugging
+        this.videoError_ = e;
+      };
+      this.onAudioError_ = e => {
+        // used for debugging
+        this.audioError_ = e;
+      };
+      this.createdSourceBuffers_ = false;
+      this.initializedEme_ = false;
+      this.triggeredReady_ = false;
+    }
+    initializedEme() {
+      this.initializedEme_ = true;
+      this.triggerReady();
+    }
+    hasCreatedSourceBuffers() {
+      // if false, likely waiting on one of the segment loaders to get enough data to create
+      // source buffers
+      return this.createdSourceBuffers_;
+    }
+    hasInitializedAnyEme() {
+      return this.initializedEme_;
+    }
+    ready() {
+      return this.hasCreatedSourceBuffers() && this.hasInitializedAnyEme();
+    }
+    createSourceBuffers(codecs) {
+      if (this.hasCreatedSourceBuffers()) {
+        // already created them before
+        return;
+      } // the intial addOrChangeSourceBuffers will always be
+      // two add buffers.
+
+      this.addOrChangeSourceBuffers(codecs);
+      this.createdSourceBuffers_ = true;
+      this.trigger('createdsourcebuffers');
+      this.triggerReady();
+    }
+    triggerReady() {
+      // only allow ready to be triggered once, this prevents the case
+      // where:
+      // 1. we trigger createdsourcebuffers
+      // 2. ie 11 synchronously initializates eme
+      // 3. the synchronous initialization causes us to trigger ready
+      // 4. We go back to the ready check in createSourceBuffers and ready is triggered again.
+      if (this.ready() && !this.triggeredReady_) {
+        this.triggeredReady_ = true;
+        this.trigger('ready');
+      }
+    }
+    /**
+     * Add a type of source buffer to the media source.
+     *
+     * @param {string} type
+     *        The type of source buffer to add.
+     *
+     * @param {string} codec
+     *        The codec to add the source buffer with.
+     */
+
+    addSourceBuffer(type, codec) {
+      pushQueue({
+        type: 'mediaSource',
+        sourceUpdater: this,
+        action: actions.addSourceBuffer(type, codec),
+        name: 'addSourceBuffer'
+      });
+    }
+    /**
+     * call abort on a source buffer.
+     *
+     * @param {string} type
+     *        The type of source buffer to call abort on.
+     */
+
+    abort(type) {
+      pushQueue({
+        type,
+        sourceUpdater: this,
+        action: actions.abort(type),
+        name: 'abort'
+      });
+    }
+    /**
+     * Call removeSourceBuffer and remove a specific type
+     * of source buffer on the mediaSource.
+     *
+     * @param {string} type
+     *        The type of source buffer to remove.
+     */
+
+    removeSourceBuffer(type) {
+      if (!this.canRemoveSourceBuffer()) {
+        videojs.log.error('removeSourceBuffer is not supported!');
+        return;
+      }
+      pushQueue({
+        type: 'mediaSource',
+        sourceUpdater: this,
+        action: actions.removeSourceBuffer(type),
+        name: 'removeSourceBuffer'
+      });
+    }
+    /**
+     * Whether or not the removeSourceBuffer function is supported
+     * on the mediaSource.
+     *
+     * @return {boolean}
+     *          if removeSourceBuffer can be called.
+     */
+
+    canRemoveSourceBuffer() {
+      // As of Firefox 83 removeSourceBuffer
+      // throws errors, so we report that it does not support this.
+      return !videojs.browser.IS_FIREFOX && window.MediaSource && window.MediaSource.prototype && typeof window.MediaSource.prototype.removeSourceBuffer === 'function';
+    }
+    /**
+     * Whether or not the changeType function is supported
+     * on our SourceBuffers.
+     *
+     * @return {boolean}
+     *         if changeType can be called.
+     */
+
+    static canChangeType() {
+      return window.SourceBuffer && window.SourceBuffer.prototype && typeof window.SourceBuffer.prototype.changeType === 'function';
+    }
+    /**
+     * Whether or not the changeType function is supported
+     * on our SourceBuffers.
+     *
+     * @return {boolean}
+     *         if changeType can be called.
+     */
+
+    canChangeType() {
+      return this.constructor.canChangeType();
+    }
+    /**
+     * Call the changeType function on a source buffer, given the code and type.
+     *
+     * @param {string} type
+     *        The type of source buffer to call changeType on.
+     *
+     * @param {string} codec
+     *        The codec string to change type with on the source buffer.
+     */
+
+    changeType(type, codec) {
+      if (!this.canChangeType()) {
+        videojs.log.error('changeType is not supported!');
+        return;
+      }
+      pushQueue({
+        type,
+        sourceUpdater: this,
+        action: actions.changeType(codec),
+        name: 'changeType'
+      });
+    }
+    /**
+     * Add source buffers with a codec or, if they are already created,
+     * call changeType on source buffers using changeType.
+     *
+     * @param {Object} codecs
+     *        Codecs to switch to
+     */
+
+    addOrChangeSourceBuffers(codecs) {
+      if (!codecs || typeof codecs !== 'object' || Object.keys(codecs).length === 0) {
+        throw new Error('Cannot addOrChangeSourceBuffers to undefined codecs');
+      }
+      Object.keys(codecs).forEach(type => {
+        const codec = codecs[type];
+        if (!this.hasCreatedSourceBuffers()) {
+          return this.addSourceBuffer(type, codec);
+        }
+        if (this.canChangeType()) {
+          this.changeType(type, codec);
+        }
+      });
+    }
+    /**
+     * Queue an update to append an ArrayBuffer.
+     *
+     * @param {MediaObject} object containing audioBytes and/or videoBytes
+     * @param {Function} done the function to call when done
+     * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-appendBuffer-void-ArrayBuffer-data
+     */
+
+    appendBuffer(options, doneFn) {
+      const {
+        segmentInfo,
+        type,
+        bytes
+      } = options;
+      this.processedAppend_ = true;
+      if (type === 'audio' && this.videoBuffer && !this.videoAppendQueued_) {
+        this.delayedAudioAppendQueue_.push([options, doneFn]);
+        this.logger_(`delayed audio append of ${bytes.length} until video append`);
+        return;
+      } // In the case of certain errors, for instance, QUOTA_EXCEEDED_ERR, updateend will
+      // not be fired. This means that the queue will be blocked until the next action
+      // taken by the segment-loader. Provide a mechanism for segment-loader to handle
+      // these errors by calling the doneFn with the specific error.
+
+      const onError = doneFn;
+      pushQueue({
+        type,
+        sourceUpdater: this,
+        action: actions.appendBuffer(bytes, segmentInfo || {
+          mediaIndex: -1
+        }, onError),
+        doneFn,
+        name: 'appendBuffer'
+      });
+      if (type === 'video') {
+        this.videoAppendQueued_ = true;
+        if (!this.delayedAudioAppendQueue_.length) {
+          return;
+        }
+        const queue = this.delayedAudioAppendQueue_.slice();
+        this.logger_(`queuing delayed audio ${queue.length} appendBuffers`);
+        this.delayedAudioAppendQueue_.length = 0;
+        queue.forEach(que => {
+          this.appendBuffer.apply(this, que);
+        });
+      }
+    }
+    /**
+     * Get the audio buffer's buffered timerange.
+     *
+     * @return {TimeRange}
+     *         The audio buffer's buffered time range
+     */
+
+    audioBuffered() {
+      // no media source/source buffer or it isn't in the media sources
+      // source buffer list
+      if (!inSourceBuffers(this.mediaSource, this.audioBuffer)) {
+        return createTimeRanges();
+      }
+      return this.audioBuffer.buffered ? this.audioBuffer.buffered : createTimeRanges();
+    }
+    /**
+     * Get the video buffer's buffered timerange.
+     *
+     * @return {TimeRange}
+     *         The video buffer's buffered time range
+     */
+
+    videoBuffered() {
+      // no media source/source buffer or it isn't in the media sources
+      // source buffer list
+      if (!inSourceBuffers(this.mediaSource, this.videoBuffer)) {
+        return createTimeRanges();
+      }
+      return this.videoBuffer.buffered ? this.videoBuffer.buffered : createTimeRanges();
+    }
+    /**
+     * Get a combined video/audio buffer's buffered timerange.
+     *
+     * @return {TimeRange}
+     *         the combined time range
+     */
+
+    buffered() {
+      const video = inSourceBuffers(this.mediaSource, this.videoBuffer) ? this.videoBuffer : null;
+      const audio = inSourceBuffers(this.mediaSource, this.audioBuffer) ? this.audioBuffer : null;
+      if (audio && !video) {
+        return this.audioBuffered();
+      }
+      if (video && !audio) {
+        return this.videoBuffered();
+      }
+      return bufferIntersection(this.audioBuffered(), this.videoBuffered());
+    }
+    /**
+     * Add a callback to the queue that will set duration on the mediaSource.
+     *
+     * @param {number} duration
+     *        The duration to set
+     *
+     * @param {Function} [doneFn]
+     *        function to run after duration has been set.
+     */
+
+    setDuration(duration, doneFn = noop) {
+      // In order to set the duration on the media source, it's necessary to wait for all
+      // source buffers to no longer be updating. "If the updating attribute equals true on
+      // any SourceBuffer in sourceBuffers, then throw an InvalidStateError exception and
+      // abort these steps." (source: https://www.w3.org/TR/media-source/#attributes).
+      pushQueue({
+        type: 'mediaSource',
+        sourceUpdater: this,
+        action: actions.duration(duration),
+        name: 'duration',
+        doneFn
+      });
+    }
+    /**
+     * Add a mediaSource endOfStream call to the queue
+     *
+     * @param {Error} [error]
+     *        Call endOfStream with an error
+     *
+     * @param {Function} [doneFn]
+     *        A function that should be called when the
+     *        endOfStream call has finished.
+     */
+
+    endOfStream(error = null, doneFn = noop) {
+      if (typeof error !== 'string') {
+        error = undefined;
+      } // In order to set the duration on the media source, it's necessary to wait for all
+      // source buffers to no longer be updating. "If the updating attribute equals true on
+      // any SourceBuffer in sourceBuffers, then throw an InvalidStateError exception and
+      // abort these steps." (source: https://www.w3.org/TR/media-source/#attributes).
+
+      pushQueue({
+        type: 'mediaSource',
+        sourceUpdater: this,
+        action: actions.endOfStream(error),
+        name: 'endOfStream',
+        doneFn
+      });
+    }
+    /**
+     * Queue an update to remove a time range from the buffer.
+     *
+     * @param {number} start where to start the removal
+     * @param {number} end where to end the removal
+     * @param {Function} [done=noop] optional callback to be executed when the remove
+     * operation is complete
+     * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end
+     */
+
+    removeAudio(start, end, done = noop) {
+      if (!this.audioBuffered().length || this.audioBuffered().end(0) === 0) {
+        done();
+        return;
+      }
+      pushQueue({
+        type: 'audio',
+        sourceUpdater: this,
+        action: actions.remove(start, end),
+        doneFn: done,
+        name: 'remove'
+      });
+    }
+    /**
+     * Queue an update to remove a time range from the buffer.
+     *
+     * @param {number} start where to start the removal
+     * @param {number} end where to end the removal
+     * @param {Function} [done=noop] optional callback to be executed when the remove
+     * operation is complete
+     * @see http://www.w3.org/TR/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end
+     */
+
+    removeVideo(start, end, done = noop) {
+      if (!this.videoBuffered().length || this.videoBuffered().end(0) === 0) {
+        done();
+        return;
+      }
+      pushQueue({
+        type: 'video',
+        sourceUpdater: this,
+        action: actions.remove(start, end),
+        doneFn: done,
+        name: 'remove'
+      });
+    }
+    /**
+     * Whether the underlying sourceBuffer is updating or not
+     *
+     * @return {boolean} the updating status of the SourceBuffer
+     */
+
+    updating() {
+      // the audio/video source buffer is updating
+      if (updating('audio', this) || updating('video', this)) {
+        return true;
+      }
+      return false;
+    }
+    /**
+     * Set/get the timestampoffset on the audio SourceBuffer
+     *
+     * @return {number} the timestamp offset
+     */
+
+    audioTimestampOffset(offset) {
+      if (typeof offset !== 'undefined' && this.audioBuffer &&
+      // no point in updating if it's the same
+      this.audioTimestampOffset_ !== offset) {
+        pushQueue({
+          type: 'audio',
+          sourceUpdater: this,
+          action: actions.timestampOffset(offset),
+          name: 'timestampOffset'
+        });
+        this.audioTimestampOffset_ = offset;
+      }
+      return this.audioTimestampOffset_;
+    }
+    /**
+     * Set/get the timestampoffset on the video SourceBuffer
+     *
+     * @return {number} the timestamp offset
+     */
+
+    videoTimestampOffset(offset) {
+      if (typeof offset !== 'undefined' && this.videoBuffer &&
+      // no point in updating if it's the same
+      this.videoTimestampOffset !== offset) {
+        pushQueue({
+          type: 'video',
+          sourceUpdater: this,
+          action: actions.timestampOffset(offset),
+          name: 'timestampOffset'
+        });
+        this.videoTimestampOffset_ = offset;
+      }
+      return this.videoTimestampOffset_;
+    }
+    /**
+     * Add a function to the queue that will be called
+     * when it is its turn to run in the audio queue.
+     *
+     * @param {Function} callback
+     *        The callback to queue.
+     */
+
+    audioQueueCallback(callback) {
+      if (!this.audioBuffer) {
+        return;
+      }
+      pushQueue({
+        type: 'audio',
+        sourceUpdater: this,
+        action: actions.callback(callback),
+        name: 'callback'
+      });
+    }
+    /**
+     * Add a function to the queue that will be called
+     * when it is its turn to run in the video queue.
+     *
+     * @param {Function} callback
+     *        The callback to queue.
+     */
+
+    videoQueueCallback(callback) {
+      if (!this.videoBuffer) {
+        return;
+      }
+      pushQueue({
+        type: 'video',
+        sourceUpdater: this,
+        action: actions.callback(callback),
+        name: 'callback'
+      });
+    }
+    /**
+     * dispose of the source updater and the underlying sourceBuffer
+     */
+
+    dispose() {
+      this.trigger('dispose');
+      bufferTypes.forEach(type => {
+        this.abort(type);
+        if (this.canRemoveSourceBuffer()) {
+          this.removeSourceBuffer(type);
+        } else {
+          this[`${type}QueueCallback`](() => cleanupBuffer(type, this));
+        }
+      });
+      this.videoAppendQueued_ = false;
+      this.delayedAudioAppendQueue_.length = 0;
+      if (this.sourceopenListener_) {
+        this.mediaSource.removeEventListener('sourceopen', this.sourceopenListener_);
+      }
+      this.off();
+    }
+  }
+  const uint8ToUtf8 = uintArray => decodeURIComponent(escape(String.fromCharCode.apply(null, uintArray)));
+  const bufferToHexString = buffer => {
+    const uInt8Buffer = new Uint8Array(buffer);
+    return Array.from(uInt8Buffer).map(byte => byte.toString(16).padStart(2, '0')).join('');
+  };
+
+  /**
+   * @file vtt-segment-loader.js
+   */
+  const VTT_LINE_TERMINATORS = new Uint8Array('\n\n'.split('').map(char => char.charCodeAt(0)));
+  class NoVttJsError extends Error {
+    constructor() {
+      super('Trying to parse received VTT cues, but there is no WebVTT. Make sure vtt.js is loaded.');
+    }
+  }
+  /**
+   * An object that manages segment loading and appending.
+   *
+   * @class VTTSegmentLoader
+   * @param {Object} options required and optional options
+   * @extends videojs.EventTarget
+   */
+
+  class VTTSegmentLoader extends SegmentLoader {
+    constructor(settings, options = {}) {
+      super(settings, options); // SegmentLoader requires a MediaSource be specified or it will throw an error;
+      // however, VTTSegmentLoader has no need of a media source, so delete the reference
+
+      this.mediaSource_ = null;
+      this.subtitlesTrack_ = null;
+      this.featuresNativeTextTracks_ = settings.featuresNativeTextTracks;
+      this.loadVttJs = settings.loadVttJs; // The VTT segment will have its own time mappings. Saving VTT segment timing info in
+      // the sync controller leads to improper behavior.
+
+      this.shouldSaveSegmentTimingInfo_ = false;
+    }
+    createTransmuxer_() {
+      // don't need to transmux any subtitles
+      return null;
+    }
+    /**
+     * Indicates which time ranges are buffered
+     *
+     * @return {TimeRange}
+     *         TimeRange object representing the current buffered ranges
+     */
+
+    buffered_() {
+      if (!this.subtitlesTrack_ || !this.subtitlesTrack_.cues || !this.subtitlesTrack_.cues.length) {
+        return createTimeRanges();
+      }
+      const cues = this.subtitlesTrack_.cues;
+      const start = cues[0].startTime;
+      const end = cues[cues.length - 1].startTime;
+      return createTimeRanges([[start, end]]);
+    }
+    /**
+     * Gets and sets init segment for the provided map
+     *
+     * @param {Object} map
+     *        The map object representing the init segment to get or set
+     * @param {boolean=} set
+     *        If true, the init segment for the provided map should be saved
+     * @return {Object}
+     *         map object for desired init segment
+     */
+
+    initSegmentForMap(map, set = false) {
+      if (!map) {
+        return null;
+      }
+      const id = initSegmentId(map);
+      let storedMap = this.initSegments_[id];
+      if (set && !storedMap && map.bytes) {
+        // append WebVTT line terminators to the media initialization segment if it exists
+        // to follow the WebVTT spec (https://w3c.github.io/webvtt/#file-structure) that
+        // requires two or more WebVTT line terminators between the WebVTT header and the
+        // rest of the file
+        const combinedByteLength = VTT_LINE_TERMINATORS.byteLength + map.bytes.byteLength;
+        const combinedSegment = new Uint8Array(combinedByteLength);
+        combinedSegment.set(map.bytes);
+        combinedSegment.set(VTT_LINE_TERMINATORS, map.bytes.byteLength);
+        this.initSegments_[id] = storedMap = {
+          resolvedUri: map.resolvedUri,
+          byterange: map.byterange,
+          bytes: combinedSegment
+        };
+      }
+      return storedMap || map;
+    }
+    /**
+     * Returns true if all configuration required for loading is present, otherwise false.
+     *
+     * @return {boolean} True if the all configuration is ready for loading
+     * @private
+     */
+
+    couldBeginLoading_() {
+      return this.playlist_ && this.subtitlesTrack_ && !this.paused();
+    }
+    /**
+     * Once all the starting parameters have been specified, begin
+     * operation. This method should only be invoked from the INIT
+     * state.
+     *
+     * @private
+     */
+
+    init_() {
+      this.state = 'READY';
+      this.resetEverything();
+      return this.monitorBuffer_();
+    }
+    /**
+     * Set a subtitle track on the segment loader to add subtitles to
+     *
+     * @param {TextTrack=} track
+     *        The text track to add loaded subtitles to
+     * @return {TextTrack}
+     *        Returns the subtitles track
+     */
+
+    track(track) {
+      if (typeof track === 'undefined') {
+        return this.subtitlesTrack_;
+      }
+      this.subtitlesTrack_ = track; // if we were unpaused but waiting for a sourceUpdater, start
+      // buffering now
+
+      if (this.state === 'INIT' && this.couldBeginLoading_()) {
+        this.init_();
+      }
+      return this.subtitlesTrack_;
+    }
+    /**
+     * Remove any data in the source buffer between start and end times
+     *
+     * @param {number} start - the start time of the region to remove from the buffer
+     * @param {number} end - the end time of the region to remove from the buffer
+     */
+
+    remove(start, end) {
+      removeCuesFromTrack(start, end, this.subtitlesTrack_);
+    }
+    /**
+     * fill the buffer with segements unless the sourceBuffers are
+     * currently updating
+     *
+     * Note: this function should only ever be called by monitorBuffer_
+     * and never directly
+     *
+     * @private
+     */
+
+    fillBuffer_() {
+      // see if we need to begin loading immediately
+      const segmentInfo = this.chooseNextRequest_();
+      if (!segmentInfo) {
+        return;
+      }
+      if (this.syncController_.timestampOffsetForTimeline(segmentInfo.timeline) === null) {
+        // We don't have the timestamp offset that we need to sync subtitles.
+        // Rerun on a timestamp offset or user interaction.
+        const checkTimestampOffset = () => {
+          this.state = 'READY';
+          if (!this.paused()) {
+            // if not paused, queue a buffer check as soon as possible
+            this.monitorBuffer_();
+          }
+        };
+        this.syncController_.one('timestampoffset', checkTimestampOffset);
+        this.state = 'WAITING_ON_TIMELINE';
+        return;
+      }
+      this.loadSegment_(segmentInfo);
+    } // never set a timestamp offset for vtt segments.
+
+    timestampOffsetForSegment_() {
+      return null;
+    }
+    chooseNextRequest_() {
+      return this.skipEmptySegments_(super.chooseNextRequest_());
+    }
+    /**
+     * Prevents the segment loader from requesting segments we know contain no subtitles
+     * by walking forward until we find the next segment that we don't know whether it is
+     * empty or not.
+     *
+     * @param {Object} segmentInfo
+     *        a segment info object that describes the current segment
+     * @return {Object}
+     *         a segment info object that describes the current segment
+     */
+
+    skipEmptySegments_(segmentInfo) {
+      while (segmentInfo && segmentInfo.segment.empty) {
+        // stop at the last possible segmentInfo
+        if (segmentInfo.mediaIndex + 1 >= segmentInfo.playlist.segments.length) {
+          segmentInfo = null;
+          break;
+        }
+        segmentInfo = this.generateSegmentInfo_({
+          playlist: segmentInfo.playlist,
+          mediaIndex: segmentInfo.mediaIndex + 1,
+          startOfSegment: segmentInfo.startOfSegment + segmentInfo.duration,
+          isSyncRequest: segmentInfo.isSyncRequest
+        });
+      }
+      return segmentInfo;
+    }
+    stopForError(error) {
+      this.error(error);
+      this.state = 'READY';
+      this.pause();
+      this.trigger('error');
+    }
+    /**
+     * append a decrypted segement to the SourceBuffer through a SourceUpdater
+     *
+     * @private
+     */
+
+    segmentRequestFinished_(error, simpleSegment, result) {
+      if (!this.subtitlesTrack_) {
+        this.state = 'READY';
+        return;
+      }
+      this.saveTransferStats_(simpleSegment.stats); // the request was aborted
+
+      if (!this.pendingSegment_) {
+        this.state = 'READY';
+        this.mediaRequestsAborted += 1;
+        return;
+      }
+      if (error) {
+        if (error.code === REQUEST_ERRORS.TIMEOUT) {
+          this.handleTimeout_();
+        }
+        if (error.code === REQUEST_ERRORS.ABORTED) {
+          this.mediaRequestsAborted += 1;
+        } else {
+          this.mediaRequestsErrored += 1;
+        }
+        this.stopForError(error);
+        return;
+      }
+      const segmentInfo = this.pendingSegment_; // although the VTT segment loader bandwidth isn't really used, it's good to
+      // maintain functionality between segment loaders
+
+      this.saveBandwidthRelatedStats_(segmentInfo.duration, simpleSegment.stats); // if this request included a segment key, save that data in the cache
+
+      if (simpleSegment.key) {
+        this.segmentKey(simpleSegment.key, true);
+      }
+      this.state = 'APPENDING'; // used for tests
+
+      this.trigger('appending');
+      const segment = segmentInfo.segment;
+      if (segment.map) {
+        segment.map.bytes = simpleSegment.map.bytes;
+      }
+      segmentInfo.bytes = simpleSegment.bytes; // Make sure that vttjs has loaded, otherwise, load it and wait till it finished loading
+
+      if (typeof window.WebVTT !== 'function' && typeof this.loadVttJs === 'function') {
+        this.state = 'WAITING_ON_VTTJS'; // should be fine to call multiple times
+        // script will be loaded once but multiple listeners will be added to the queue, which is expected.
+
+        this.loadVttJs().then(() => this.segmentRequestFinished_(error, simpleSegment, result), () => this.stopForError({
+          message: 'Error loading vtt.js',
+          metadata: {
+            errorType: videojs.Error.VttLoadError
+          }
+        }));
+        return;
+      }
+      segment.requested = true;
+      try {
+        this.parseVTTCues_(segmentInfo);
+      } catch (e) {
+        this.stopForError({
+          message: e.message,
+          metadata: {
+            errorType: videojs.Error.VttCueParsingError
+          }
+        });
+        return;
+      }
+      this.updateTimeMapping_(segmentInfo, this.syncController_.timelines[segmentInfo.timeline], this.playlist_);
+      if (segmentInfo.cues.length) {
+        segmentInfo.timingInfo = {
+          start: segmentInfo.cues[0].startTime,
+          end: segmentInfo.cues[segmentInfo.cues.length - 1].endTime
+        };
+      } else {
+        segmentInfo.timingInfo = {
+          start: segmentInfo.startOfSegment,
+          end: segmentInfo.startOfSegment + segmentInfo.duration
+        };
+      }
+      if (segmentInfo.isSyncRequest) {
+        this.trigger('syncinfoupdate');
+        this.pendingSegment_ = null;
+        this.state = 'READY';
+        return;
+      }
+      segmentInfo.byteLength = segmentInfo.bytes.byteLength;
+      this.mediaSecondsLoaded += segment.duration; // Create VTTCue instances for each cue in the new segment and add them to
+      // the subtitle track
+
+      segmentInfo.cues.forEach(cue => {
+        this.subtitlesTrack_.addCue(this.featuresNativeTextTracks_ ? new window.VTTCue(cue.startTime, cue.endTime, cue.text) : cue);
+      }); // Remove any duplicate cues from the subtitle track. The WebVTT spec allows
+      // cues to have identical time-intervals, but if the text is also identical
+      // we can safely assume it is a duplicate that can be removed (ex. when a cue
+      // "overlaps" VTT segments)
+
+      removeDuplicateCuesFromTrack(this.subtitlesTrack_);
+      this.handleAppendsDone_();
+    }
+    handleData_() {// noop as we shouldn't be getting video/audio data captions
+      // that we do not support here.
+    }
+    updateTimingInfoEnd_() {// noop
+    }
+    /**
+     * Uses the WebVTT parser to parse the segment response
+     *
+     * @throws NoVttJsError
+     *
+     * @param {Object} segmentInfo
+     *        a segment info object that describes the current segment
+     * @private
+     */
+
+    parseVTTCues_(segmentInfo) {
+      let decoder;
+      let decodeBytesToString = false;
+      if (typeof window.WebVTT !== 'function') {
+        // caller is responsible for exception handling.
+        throw new NoVttJsError();
+      }
+      if (typeof window.TextDecoder === 'function') {
+        decoder = new window.TextDecoder('utf8');
+      } else {
+        decoder = window.WebVTT.StringDecoder();
+        decodeBytesToString = true;
+      }
+      const parser = new window.WebVTT.Parser(window, window.vttjs, decoder);
+      segmentInfo.cues = [];
+      segmentInfo.timestampmap = {
+        MPEGTS: 0,
+        LOCAL: 0
+      };
+      parser.oncue = segmentInfo.cues.push.bind(segmentInfo.cues);
+      parser.ontimestampmap = map => {
+        segmentInfo.timestampmap = map;
+      };
+      parser.onparsingerror = error => {
+        videojs.log.warn('Error encountered when parsing cues: ' + error.message);
+      };
+      if (segmentInfo.segment.map) {
+        let mapData = segmentInfo.segment.map.bytes;
+        if (decodeBytesToString) {
+          mapData = uint8ToUtf8(mapData);
+        }
+        parser.parse(mapData);
+      }
+      let segmentData = segmentInfo.bytes;
+      if (decodeBytesToString) {
+        segmentData = uint8ToUtf8(segmentData);
+      }
+      parser.parse(segmentData);
+      parser.flush();
+    }
+    /**
+     * Updates the start and end times of any cues parsed by the WebVTT parser using
+     * the information parsed from the X-TIMESTAMP-MAP header and a TS to media time mapping
+     * from the SyncController
+     *
+     * @param {Object} segmentInfo
+     *        a segment info object that describes the current segment
+     * @param {Object} mappingObj
+     *        object containing a mapping from TS to media time
+     * @param {Object} playlist
+     *        the playlist object containing the segment
+     * @private
+     */
+
+    updateTimeMapping_(segmentInfo, mappingObj, playlist) {
+      const segment = segmentInfo.segment;
+      if (!mappingObj) {
+        // If the sync controller does not have a mapping of TS to Media Time for the
+        // timeline, then we don't have enough information to update the cue
+        // start/end times
+        return;
+      }
+      if (!segmentInfo.cues.length) {
+        // If there are no cues, we also do not have enough information to figure out
+        // segment timing. Mark that the segment contains no cues so we don't re-request
+        // an empty segment.
+        segment.empty = true;
+        return;
+      }
+      const {
+        MPEGTS,
+        LOCAL
+      } = segmentInfo.timestampmap;
+      /**
+       * From the spec:
+       * The MPEGTS media timestamp MUST use a 90KHz timescale,
+       * even when non-WebVTT Media Segments use a different timescale.
+       */
+
+      const mpegTsInSeconds = MPEGTS / clock_1;
+      const diff = mpegTsInSeconds - LOCAL + mappingObj.mapping;
+      segmentInfo.cues.forEach(cue => {
+        const duration = cue.endTime - cue.startTime;
+        const startTime = MPEGTS === 0 ? cue.startTime + diff : this.handleRollover_(cue.startTime + diff, mappingObj.time);
+        cue.startTime = Math.max(startTime, 0);
+        cue.endTime = Math.max(startTime + duration, 0);
+      });
+      if (!playlist.syncInfo) {
+        const firstStart = segmentInfo.cues[0].startTime;
+        const lastStart = segmentInfo.cues[segmentInfo.cues.length - 1].startTime;
+        playlist.syncInfo = {
+          mediaSequence: playlist.mediaSequence + segmentInfo.mediaIndex,
+          time: Math.min(firstStart, lastStart - segment.duration)
+        };
+      }
+    }
+    /**
+     * MPEG-TS PES timestamps are limited to 2^33.
+     * Once they reach 2^33, they roll over to 0.
+     * mux.js handles PES timestamp rollover for the following scenarios:
+     * [forward rollover(right)] ->
+     *    PES timestamps monotonically increase, and once they reach 2^33, they roll over to 0
+     * [backward rollover(left)] -->
+     *    we seek back to position before rollover.
+     *
+     * According to the HLS SPEC:
+     * When synchronizing WebVTT with PES timestamps, clients SHOULD account
+     * for cases where the 33-bit PES timestamps have wrapped and the WebVTT
+     * cue times have not.  When the PES timestamp wraps, the WebVTT Segment
+     * SHOULD have a X-TIMESTAMP-MAP header that maps the current WebVTT
+     * time to the new (low valued) PES timestamp.
+     *
+     * So we want to handle rollover here and align VTT Cue start/end time to the player's time.
+     */
+
+    handleRollover_(value, reference) {
+      if (reference === null) {
+        return value;
+      }
+      let valueIn90khz = value * clock_1;
+      const referenceIn90khz = reference * clock_1;
+      let offset;
+      if (referenceIn90khz < valueIn90khz) {
+        // - 2^33
+        offset = -8589934592;
+      } else {
+        // + 2^33
+        offset = 8589934592;
+      } // distance(value - reference) > 2^32
+
+      while (Math.abs(valueIn90khz - referenceIn90khz) > 4294967296) {
+        valueIn90khz += offset;
+      }
+      return valueIn90khz / clock_1;
+    }
+  }
+
+  /**
+   * @file ad-cue-tags.js
+   */
+  /**
+   * Searches for an ad cue that overlaps with the given mediaTime
+   *
+   * @param {Object} track
+   *        the track to find the cue for
+   *
+   * @param {number} mediaTime
+   *        the time to find the cue at
+   *
+   * @return {Object|null}
+   *         the found cue or null
+   */
+
+  const findAdCue = function (track, mediaTime) {
+    const cues = track.cues;
+    for (let i = 0; i < cues.length; i++) {
+      const cue = cues[i];
+      if (mediaTime >= cue.adStartTime && mediaTime <= cue.adEndTime) {
+        return cue;
+      }
+    }
+    return null;
+  };
+  const updateAdCues = function (media, track, offset = 0) {
+    if (!media.segments) {
+      return;
+    }
+    let mediaTime = offset;
+    let cue;
+    for (let i = 0; i < media.segments.length; i++) {
+      const segment = media.segments[i];
+      if (!cue) {
+        // Since the cues will span for at least the segment duration, adding a fudge
+        // factor of half segment duration will prevent duplicate cues from being
+        // created when timing info is not exact (e.g. cue start time initialized
+        // at 10.006677, but next call mediaTime is 10.003332 )
+        cue = findAdCue(track, mediaTime + segment.duration / 2);
+      }
+      if (cue) {
+        if ('cueIn' in segment) {
+          // Found a CUE-IN so end the cue
+          cue.endTime = mediaTime;
+          cue.adEndTime = mediaTime;
+          mediaTime += segment.duration;
+          cue = null;
+          continue;
+        }
+        if (mediaTime < cue.endTime) {
+          // Already processed this mediaTime for this cue
+          mediaTime += segment.duration;
+          continue;
+        } // otherwise extend cue until a CUE-IN is found
+
+        cue.endTime += segment.duration;
+      } else {
+        if ('cueOut' in segment) {
+          cue = new window.VTTCue(mediaTime, mediaTime + segment.duration, segment.cueOut);
+          cue.adStartTime = mediaTime; // Assumes tag format to be
+          // #EXT-X-CUE-OUT:30
+
+          cue.adEndTime = mediaTime + parseFloat(segment.cueOut);
+          track.addCue(cue);
+        }
+        if ('cueOutCont' in segment) {
+          // Entered into the middle of an ad cue
+          // Assumes tag formate to be
+          // #EXT-X-CUE-OUT-CONT:10/30
+          const [adOffset, adTotal] = segment.cueOutCont.split('/').map(parseFloat);
+          cue = new window.VTTCue(mediaTime, mediaTime + segment.duration, '');
+          cue.adStartTime = mediaTime - adOffset;
+          cue.adEndTime = cue.adStartTime + adTotal;
+          track.addCue(cue);
+        }
+      }
+      mediaTime += segment.duration;
+    }
+  };
+  class SyncInfo {
+    /**
+     * @param {number} start - media sequence start
+     * @param {number} end - media sequence end
+     * @param {number} segmentIndex - index for associated segment
+     * @param {number|null} [partIndex] - index for associated part
+     * @param {boolean} [appended] - appended indicator
+     *
+     */
+    constructor({
+      start,
+      end,
+      segmentIndex,
+      partIndex = null,
+      appended = false
+    }) {
+      this.start_ = start;
+      this.end_ = end;
+      this.segmentIndex_ = segmentIndex;
+      this.partIndex_ = partIndex;
+      this.appended_ = appended;
+    }
+    isInRange(targetTime) {
+      return targetTime >= this.start && targetTime < this.end;
+    }
+    markAppended() {
+      this.appended_ = true;
+    }
+    resetAppendedStatus() {
+      this.appended_ = false;
+    }
+    get isAppended() {
+      return this.appended_;
+    }
+    get start() {
+      return this.start_;
+    }
+    get end() {
+      return this.end_;
+    }
+    get segmentIndex() {
+      return this.segmentIndex_;
+    }
+    get partIndex() {
+      return this.partIndex_;
+    }
+  }
+  class SyncInfoData {
+    /**
+     *
+     * @param {SyncInfo} segmentSyncInfo - sync info for a given segment
+     * @param {Array<SyncInfo>} [partsSyncInfo] - sync infos for a list of parts for a given segment
+     */
+    constructor(segmentSyncInfo, partsSyncInfo = []) {
+      this.segmentSyncInfo_ = segmentSyncInfo;
+      this.partsSyncInfo_ = partsSyncInfo;
+    }
+    get segmentSyncInfo() {
+      return this.segmentSyncInfo_;
+    }
+    get partsSyncInfo() {
+      return this.partsSyncInfo_;
+    }
+    get hasPartsSyncInfo() {
+      return this.partsSyncInfo_.length > 0;
+    }
+    resetAppendStatus() {
+      this.segmentSyncInfo_.resetAppendedStatus();
+      this.partsSyncInfo_.forEach(partSyncInfo => partSyncInfo.resetAppendedStatus());
+    }
+  }
+  class MediaSequenceSync {
+    constructor() {
+      /**
+       * @type {Map<number, SyncInfoData>}
+       * @private
+       */
+      this.storage_ = new Map();
+      this.diagnostics_ = '';
+      this.isReliable_ = false;
+      this.start_ = -Infinity;
+      this.end_ = Infinity;
+    }
+    get start() {
+      return this.start_;
+    }
+    get end() {
+      return this.end_;
+    }
+    get diagnostics() {
+      return this.diagnostics_;
+    }
+    get isReliable() {
+      return this.isReliable_;
+    }
+    resetAppendedStatus() {
+      this.storage_.forEach(syncInfoData => syncInfoData.resetAppendStatus());
+    }
+    /**
+     * update sync storage
+     *
+     * @param {Object} playlist
+     * @param {number} currentTime
+     *
+     * @return {void}
+     */
+
+    update(playlist, currentTime) {
+      const {
+        mediaSequence,
+        segments
+      } = playlist;
+      this.isReliable_ = this.isReliablePlaylist_(mediaSequence, segments);
+      if (!this.isReliable_) {
+        return;
+      }
+      return this.updateStorage_(segments, mediaSequence, this.calculateBaseTime_(mediaSequence, currentTime));
+    }
+    /**
+     * @param {number} targetTime
+     * @return {SyncInfo|null}
+     */
+
+    getSyncInfoForTime(targetTime) {
+      for (const {
+        segmentSyncInfo,
+        partsSyncInfo
+      } of this.storage_.values()) {
+        // Normal segment flow:
+        if (!partsSyncInfo.length) {
+          if (segmentSyncInfo.isInRange(targetTime)) {
+            return segmentSyncInfo;
+          }
+        } else {
+          // Low latency flow:
+          for (const partSyncInfo of partsSyncInfo) {
+            if (partSyncInfo.isInRange(targetTime)) {
+              return partSyncInfo;
+            }
+          }
+        }
+      }
+      return null;
+    }
+    updateStorage_(segments, startingMediaSequence, startingTime) {
+      const newStorage = new Map();
+      let newDiagnostics = '\n';
+      let currentStart = startingTime;
+      let currentMediaSequence = startingMediaSequence;
+      this.start_ = currentStart;
+      segments.forEach((segment, segmentIndex) => {
+        const prevSyncInfoData = this.storage_.get(currentMediaSequence);
+        const segmentStart = currentStart;
+        const segmentEnd = segmentStart + segment.duration;
+        const segmentIsAppended = Boolean(prevSyncInfoData && prevSyncInfoData.segmentSyncInfo && prevSyncInfoData.segmentSyncInfo.isAppended);
+        const segmentSyncInfo = new SyncInfo({
+          start: segmentStart,
+          end: segmentEnd,
+          appended: segmentIsAppended,
+          segmentIndex
+        });
+        segment.syncInfo = segmentSyncInfo;
+        let currentPartStart = currentStart;
+        const partsSyncInfo = (segment.parts || []).map((part, partIndex) => {
+          const partStart = currentPartStart;
+          const partEnd = currentPartStart + part.duration;
+          const partIsAppended = Boolean(prevSyncInfoData && prevSyncInfoData.partsSyncInfo && prevSyncInfoData.partsSyncInfo[partIndex] && prevSyncInfoData.partsSyncInfo[partIndex].isAppended);
+          const partSyncInfo = new SyncInfo({
+            start: partStart,
+            end: partEnd,
+            appended: partIsAppended,
+            segmentIndex,
+            partIndex
+          });
+          currentPartStart = partEnd;
+          newDiagnostics += `Media Sequence: ${currentMediaSequence}.${partIndex} | Range: ${partStart} --> ${partEnd} | Appended: ${partIsAppended}\n`;
+          part.syncInfo = partSyncInfo;
+          return partSyncInfo;
+        });
+        newStorage.set(currentMediaSequence, new SyncInfoData(segmentSyncInfo, partsSyncInfo));
+        newDiagnostics += `${compactSegmentUrlDescription(segment.resolvedUri)} | Media Sequence: ${currentMediaSequence} | Range: ${segmentStart} --> ${segmentEnd} | Appended: ${segmentIsAppended}\n`;
+        currentMediaSequence++;
+        currentStart = segmentEnd;
+      });
+      this.end_ = currentStart;
+      this.storage_ = newStorage;
+      this.diagnostics_ = newDiagnostics;
+    }
+    calculateBaseTime_(mediaSequence, fallback) {
+      if (!this.storage_.size) {
+        // Initial setup flow.
+        return 0;
+      }
+      if (this.storage_.has(mediaSequence)) {
+        // Normal flow.
+        return this.storage_.get(mediaSequence).segmentSyncInfo.start;
+      } // Fallback flow.
+      // There is a gap between last recorded playlist and a new one received.
+
+      return fallback;
+    }
+    isReliablePlaylist_(mediaSequence, segments) {
+      return mediaSequence !== undefined && mediaSequence !== null && Array.isArray(segments) && segments.length;
+    }
+  }
+
+  /**
+   * @file sync-controller.js
+   */
+  // synchronize expired playlist segments.
+  // the max media sequence diff is 48 hours of live stream
+  // content with two second segments. Anything larger than that
+  // will likely be invalid.
+
+  const MAX_MEDIA_SEQUENCE_DIFF_FOR_SYNC = 86400;
+  const syncPointStrategies = [
+  // Stategy "VOD": Handle the VOD-case where the sync-point is *always*
+  //                the equivalence display-time 0 === segment-index 0
+  {
+    name: 'VOD',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      if (duration !== Infinity) {
+        const syncPoint = {
+          time: 0,
+          segmentIndex: 0,
+          partIndex: null
+        };
+        return syncPoint;
+      }
+      return null;
+    }
+  }, {
+    name: 'MediaSequence',
+    /**
+     * run media sequence strategy
+     *
+     * @param {SyncController} syncController
+     * @param {Object} playlist
+     * @param {number} duration
+     * @param {number} currentTimeline
+     * @param {number} currentTime
+     * @param {string} type
+     */
+    run: (syncController, playlist, duration, currentTimeline, currentTime, type) => {
+      const mediaSequenceSync = syncController.getMediaSequenceSync(type);
+      if (!mediaSequenceSync) {
+        return null;
+      }
+      if (!mediaSequenceSync.isReliable) {
+        return null;
+      }
+      const syncInfo = mediaSequenceSync.getSyncInfoForTime(currentTime);
+      if (!syncInfo) {
+        return null;
+      }
+      return {
+        time: syncInfo.start,
+        partIndex: syncInfo.partIndex,
+        segmentIndex: syncInfo.segmentIndex
+      };
+    }
+  },
+  // Stategy "ProgramDateTime": We have a program-date-time tag in this playlist
+  {
+    name: 'ProgramDateTime',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      if (!Object.keys(syncController.timelineToDatetimeMappings).length) {
+        return null;
+      }
+      let syncPoint = null;
+      let lastDistance = null;
+      const partsAndSegments = getPartsAndSegments(playlist);
+      currentTime = currentTime || 0;
+      for (let i = 0; i < partsAndSegments.length; i++) {
+        // start from the end and loop backwards for live
+        // or start from the front and loop forwards for non-live
+        const index = playlist.endList || currentTime === 0 ? i : partsAndSegments.length - (i + 1);
+        const partAndSegment = partsAndSegments[index];
+        const segment = partAndSegment.segment;
+        const datetimeMapping = syncController.timelineToDatetimeMappings[segment.timeline];
+        if (!datetimeMapping || !segment.dateTimeObject) {
+          continue;
+        }
+        const segmentTime = segment.dateTimeObject.getTime() / 1000;
+        let start = segmentTime + datetimeMapping; // take part duration into account.
+
+        if (segment.parts && typeof partAndSegment.partIndex === 'number') {
+          for (let z = 0; z < partAndSegment.partIndex; z++) {
+            start += segment.parts[z].duration;
+          }
+        }
+        const distance = Math.abs(currentTime - start); // Once the distance begins to increase, or if distance is 0, we have passed
+        // currentTime and can stop looking for better candidates
+
+        if (lastDistance !== null && (distance === 0 || lastDistance < distance)) {
+          break;
+        }
+        lastDistance = distance;
+        syncPoint = {
+          time: start,
+          segmentIndex: partAndSegment.segmentIndex,
+          partIndex: partAndSegment.partIndex
+        };
+      }
+      return syncPoint;
+    }
+  },
+  // Stategy "Segment": We have a known time mapping for a timeline and a
+  //                    segment in the current timeline with timing data
+  {
+    name: 'Segment',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      let syncPoint = null;
+      let lastDistance = null;
+      currentTime = currentTime || 0;
+      const partsAndSegments = getPartsAndSegments(playlist);
+      for (let i = 0; i < partsAndSegments.length; i++) {
+        // start from the end and loop backwards for live
+        // or start from the front and loop forwards for non-live
+        const index = playlist.endList || currentTime === 0 ? i : partsAndSegments.length - (i + 1);
+        const partAndSegment = partsAndSegments[index];
+        const segment = partAndSegment.segment;
+        const start = partAndSegment.part && partAndSegment.part.start || segment && segment.start;
+        if (segment.timeline === currentTimeline && typeof start !== 'undefined') {
+          const distance = Math.abs(currentTime - start); // Once the distance begins to increase, we have passed
+          // currentTime and can stop looking for better candidates
+
+          if (lastDistance !== null && lastDistance < distance) {
+            break;
+          }
+          if (!syncPoint || lastDistance === null || lastDistance >= distance) {
+            lastDistance = distance;
+            syncPoint = {
+              time: start,
+              segmentIndex: partAndSegment.segmentIndex,
+              partIndex: partAndSegment.partIndex
+            };
+          }
+        }
+      }
+      return syncPoint;
+    }
+  },
+  // Stategy "Discontinuity": We have a discontinuity with a known
+  //                          display-time
+  {
+    name: 'Discontinuity',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      let syncPoint = null;
+      currentTime = currentTime || 0;
+      if (playlist.discontinuityStarts && playlist.discontinuityStarts.length) {
+        let lastDistance = null;
+        for (let i = 0; i < playlist.discontinuityStarts.length; i++) {
+          const segmentIndex = playlist.discontinuityStarts[i];
+          const discontinuity = playlist.discontinuitySequence + i + 1;
+          const discontinuitySync = syncController.discontinuities[discontinuity];
+          if (discontinuitySync) {
+            const distance = Math.abs(currentTime - discontinuitySync.time); // Once the distance begins to increase, we have passed
+            // currentTime and can stop looking for better candidates
+
+            if (lastDistance !== null && lastDistance < distance) {
+              break;
+            }
+            if (!syncPoint || lastDistance === null || lastDistance >= distance) {
+              lastDistance = distance;
+              syncPoint = {
+                time: discontinuitySync.time,
+                segmentIndex,
+                partIndex: null
+              };
+            }
+          }
+        }
+      }
+      return syncPoint;
+    }
+  },
+  // Stategy "Playlist": We have a playlist with a known mapping of
+  //                     segment index to display time
+  {
+    name: 'Playlist',
+    run: (syncController, playlist, duration, currentTimeline, currentTime) => {
+      if (playlist.syncInfo) {
+        const syncPoint = {
+          time: playlist.syncInfo.time,
+          segmentIndex: playlist.syncInfo.mediaSequence - playlist.mediaSequence,
+          partIndex: null
+        };
+        return syncPoint;
+      }
+      return null;
+    }
+  }];
+  class SyncController extends videojs.EventTarget {
+    constructor(options = {}) {
+      super(); // ...for synching across variants
+
+      this.timelines = [];
+      this.discontinuities = [];
+      this.timelineToDatetimeMappings = {}; // TODO: this map should be only available for HLS. Since only HLS has MediaSequence.
+      //  For some reason this map helps with syncing between quality switch for MPEG-DASH as well.
+      //  Moreover if we disable this map for MPEG-DASH - quality switch will be broken.
+      //  MPEG-DASH should have its own separate sync strategy
+
+      this.mediaSequenceStorage_ = {
+        main: new MediaSequenceSync(),
+        audio: new MediaSequenceSync(),
+        vtt: new MediaSequenceSync()
+      };
+      this.logger_ = logger('SyncController');
+    }
+    /**
+     *
+     * @param {string} loaderType
+     * @return {MediaSequenceSync|null}
+     */
+
+    getMediaSequenceSync(loaderType) {
+      return this.mediaSequenceStorage_[loaderType] || null;
+    }
+    /**
+     * Find a sync-point for the playlist specified
+     *
+     * A sync-point is defined as a known mapping from display-time to
+     * a segment-index in the current playlist.
+     *
+     * @param {Playlist} playlist
+     *        The playlist that needs a sync-point
+     * @param {number} duration
+     *        Duration of the MediaSource (Infinite if playing a live source)
+     * @param {number} currentTimeline
+     *        The last timeline from which a segment was loaded
+     * @param {number} currentTime
+     *        Current player's time
+     * @param {string} type
+     *        Segment loader type
+     * @return {Object}
+     *          A sync-point object
+     */
+
+    getSyncPoint(playlist, duration, currentTimeline, currentTime, type) {
+      // Always use VOD sync point for VOD
+      if (duration !== Infinity) {
+        const vodSyncPointStrategy = syncPointStrategies.find(({
+          name
+        }) => name === 'VOD');
+        return vodSyncPointStrategy.run(this, playlist, duration);
+      }
+      const syncPoints = this.runStrategies_(playlist, duration, currentTimeline, currentTime, type);
+      if (!syncPoints.length) {
+        // Signal that we need to attempt to get a sync-point manually
+        // by fetching a segment in the playlist and constructing
+        // a sync-point from that information
+        return null;
+      } // If we have exact match just return it instead of finding the nearest distance
+
+      for (const syncPointInfo of syncPoints) {
+        const {
+          syncPoint,
+          strategy
+        } = syncPointInfo;
+        const {
+          segmentIndex,
+          time
+        } = syncPoint;
+        if (segmentIndex < 0) {
+          continue;
+        }
+        const selectedSegment = playlist.segments[segmentIndex];
+        const start = time;
+        const end = start + selectedSegment.duration;
+        this.logger_(`Strategy: ${strategy}. Current time: ${currentTime}. selected segment: ${segmentIndex}. Time: [${start} -> ${end}]}`);
+        if (currentTime >= start && currentTime < end) {
+          this.logger_('Found sync point with exact match: ', syncPoint);
+          return syncPoint;
+        }
+      } // Now find the sync-point that is closest to the currentTime because
+      // that should result in the most accurate guess about which segment
+      // to fetch
+
+      return this.selectSyncPoint_(syncPoints, {
+        key: 'time',
+        value: currentTime
+      });
+    }
+    /**
+     * Calculate the amount of time that has expired off the playlist during playback
+     *
+     * @param {Playlist} playlist
+     *        Playlist object to calculate expired from
+     * @param {number} duration
+     *        Duration of the MediaSource (Infinity if playling a live source)
+     * @return {number|null}
+     *          The amount of time that has expired off the playlist during playback. Null
+     *          if no sync-points for the playlist can be found.
+     */
+
+    getExpiredTime(playlist, duration) {
+      if (!playlist || !playlist.segments) {
+        return null;
+      }
+      const syncPoints = this.runStrategies_(playlist, duration, playlist.discontinuitySequence, 0); // Without sync-points, there is not enough information to determine the expired time
+
+      if (!syncPoints.length) {
+        return null;
+      }
+      const syncPoint = this.selectSyncPoint_(syncPoints, {
+        key: 'segmentIndex',
+        value: 0
+      }); // If the sync-point is beyond the start of the playlist, we want to subtract the
+      // duration from index 0 to syncPoint.segmentIndex instead of adding.
+
+      if (syncPoint.segmentIndex > 0) {
+        syncPoint.time *= -1;
+      }
+      return Math.abs(syncPoint.time + sumDurations({
+        defaultDuration: playlist.targetDuration,
+        durationList: playlist.segments,
+        startIndex: syncPoint.segmentIndex,
+        endIndex: 0
+      }));
+    }
+    /**
+     * Runs each sync-point strategy and returns a list of sync-points returned by the
+     * strategies
+     *
+     * @private
+     * @param {Playlist} playlist
+     *        The playlist that needs a sync-point
+     * @param {number} duration
+     *        Duration of the MediaSource (Infinity if playing a live source)
+     * @param {number} currentTimeline
+     *        The last timeline from which a segment was loaded
+     * @param {number} currentTime
+     *        Current player's time
+     * @param {string} type
+     *        Segment loader type
+     * @return {Array}
+     *          A list of sync-point objects
+     */
+
+    runStrategies_(playlist, duration, currentTimeline, currentTime, type) {
+      const syncPoints = []; // Try to find a sync-point in by utilizing various strategies...
+
+      for (let i = 0; i < syncPointStrategies.length; i++) {
+        const strategy = syncPointStrategies[i];
+        const syncPoint = strategy.run(this, playlist, duration, currentTimeline, currentTime, type);
+        if (syncPoint) {
+          syncPoint.strategy = strategy.name;
+          syncPoints.push({
+            strategy: strategy.name,
+            syncPoint
+          });
+        }
+      }
+      return syncPoints;
+    }
+    /**
+     * Selects the sync-point nearest the specified target
+     *
+     * @private
+     * @param {Array} syncPoints
+     *        List of sync-points to select from
+     * @param {Object} target
+     *        Object specifying the property and value we are targeting
+     * @param {string} target.key
+     *        Specifies the property to target. Must be either 'time' or 'segmentIndex'
+     * @param {number} target.value
+     *        The value to target for the specified key.
+     * @return {Object}
+     *          The sync-point nearest the target
+     */
+
+    selectSyncPoint_(syncPoints, target) {
+      let bestSyncPoint = syncPoints[0].syncPoint;
+      let bestDistance = Math.abs(syncPoints[0].syncPoint[target.key] - target.value);
+      let bestStrategy = syncPoints[0].strategy;
+      for (let i = 1; i < syncPoints.length; i++) {
+        const newDistance = Math.abs(syncPoints[i].syncPoint[target.key] - target.value);
+        if (newDistance < bestDistance) {
+          bestDistance = newDistance;
+          bestSyncPoint = syncPoints[i].syncPoint;
+          bestStrategy = syncPoints[i].strategy;
+        }
+      }
+      this.logger_(`syncPoint for [${target.key}: ${target.value}] chosen with strategy` + ` [${bestStrategy}]: [time:${bestSyncPoint.time},` + ` segmentIndex:${bestSyncPoint.segmentIndex}` + (typeof bestSyncPoint.partIndex === 'number' ? `,partIndex:${bestSyncPoint.partIndex}` : '') + ']');
+      return bestSyncPoint;
+    }
+    /**
+     * Save any meta-data present on the segments when segments leave
+     * the live window to the playlist to allow for synchronization at the
+     * playlist level later.
+     *
+     * @param {Playlist} oldPlaylist - The previous active playlist
+     * @param {Playlist} newPlaylist - The updated and most current playlist
+     */
+
+    saveExpiredSegmentInfo(oldPlaylist, newPlaylist) {
+      const mediaSequenceDiff = newPlaylist.mediaSequence - oldPlaylist.mediaSequence; // Ignore large media sequence gaps
+
+      if (mediaSequenceDiff > MAX_MEDIA_SEQUENCE_DIFF_FOR_SYNC) {
+        videojs.log.warn(`Not saving expired segment info. Media sequence gap ${mediaSequenceDiff} is too large.`);
+        return;
+      } // When a segment expires from the playlist and it has a start time
+      // save that information as a possible sync-point reference in future
+
+      for (let i = mediaSequenceDiff - 1; i >= 0; i--) {
+        const lastRemovedSegment = oldPlaylist.segments[i];
+        if (lastRemovedSegment && typeof lastRemovedSegment.start !== 'undefined') {
+          newPlaylist.syncInfo = {
+            mediaSequence: oldPlaylist.mediaSequence + i,
+            time: lastRemovedSegment.start
+          };
+          this.logger_(`playlist refresh sync: [time:${newPlaylist.syncInfo.time},` + ` mediaSequence: ${newPlaylist.syncInfo.mediaSequence}]`);
+          this.trigger('syncinfoupdate');
+          break;
+        }
+      }
+    }
+    /**
+     * Save the mapping from playlist's ProgramDateTime to display. This should only happen
+     * before segments start to load.
+     *
+     * @param {Playlist} playlist - The currently active playlist
+     */
+
+    setDateTimeMappingForStart(playlist) {
+      // It's possible for the playlist to be updated before playback starts, meaning time
+      // zero is not yet set. If, during these playlist refreshes, a discontinuity is
+      // crossed, then the old time zero mapping (for the prior timeline) would be retained
+      // unless the mappings are cleared.
+      this.timelineToDatetimeMappings = {};
+      if (playlist.segments && playlist.segments.length && playlist.segments[0].dateTimeObject) {
+        const firstSegment = playlist.segments[0];
+        const playlistTimestamp = firstSegment.dateTimeObject.getTime() / 1000;
+        this.timelineToDatetimeMappings[firstSegment.timeline] = -playlistTimestamp;
+      }
+    }
+    /**
+     * Calculates and saves timeline mappings, playlist sync info, and segment timing values
+     * based on the latest timing information.
+     *
+     * @param {Object} options
+     *        Options object
+     * @param {SegmentInfo} options.segmentInfo
+     *        The current active request information
+     * @param {boolean} options.shouldSaveTimelineMapping
+     *        If there's a timeline change, determines if the timeline mapping should be
+     *        saved for timeline mapping and program date time mappings.
+     */
+
+    saveSegmentTimingInfo({
+      segmentInfo,
+      shouldSaveTimelineMapping
+    }) {
+      const didCalculateSegmentTimeMapping = this.calculateSegmentTimeMapping_(segmentInfo, segmentInfo.timingInfo, shouldSaveTimelineMapping);
+      const segment = segmentInfo.segment;
+      if (didCalculateSegmentTimeMapping) {
+        this.saveDiscontinuitySyncInfo_(segmentInfo); // If the playlist does not have sync information yet, record that information
+        // now with segment timing information
+
+        if (!segmentInfo.playlist.syncInfo) {
+          segmentInfo.playlist.syncInfo = {
+            mediaSequence: segmentInfo.playlist.mediaSequence + segmentInfo.mediaIndex,
+            time: segment.start
+          };
+        }
+      }
+      const dateTime = segment.dateTimeObject;
+      if (segment.discontinuity && shouldSaveTimelineMapping && dateTime) {
+        this.timelineToDatetimeMappings[segment.timeline] = -(dateTime.getTime() / 1000);
+      }
+    }
+    timestampOffsetForTimeline(timeline) {
+      if (typeof this.timelines[timeline] === 'undefined') {
+        return null;
+      }
+      return this.timelines[timeline].time;
+    }
+    mappingForTimeline(timeline) {
+      if (typeof this.timelines[timeline] === 'undefined') {
+        return null;
+      }
+      return this.timelines[timeline].mapping;
+    }
+    /**
+     * Use the "media time" for a segment to generate a mapping to "display time" and
+     * save that display time to the segment.
+     *
+     * @private
+     * @param {SegmentInfo} segmentInfo
+     *        The current active request information
+     * @param {Object} timingInfo
+     *        The start and end time of the current segment in "media time"
+     * @param {boolean} shouldSaveTimelineMapping
+     *        If there's a timeline change, determines if the timeline mapping should be
+     *        saved in timelines.
+     * @return {boolean}
+     *          Returns false if segment time mapping could not be calculated
+     */
+
+    calculateSegmentTimeMapping_(segmentInfo, timingInfo, shouldSaveTimelineMapping) {
+      // TODO: remove side effects
+      const segment = segmentInfo.segment;
+      const part = segmentInfo.part;
+      let mappingObj = this.timelines[segmentInfo.timeline];
+      let start;
+      let end;
+      if (typeof segmentInfo.timestampOffset === 'number') {
+        mappingObj = {
+          time: segmentInfo.startOfSegment,
+          mapping: segmentInfo.startOfSegment - timingInfo.start
+        };
+        if (shouldSaveTimelineMapping) {
+          this.timelines[segmentInfo.timeline] = mappingObj;
+          this.trigger('timestampoffset');
+          this.logger_(`time mapping for timeline ${segmentInfo.timeline}: ` + `[time: ${mappingObj.time}] [mapping: ${mappingObj.mapping}]`);
+        }
+        start = segmentInfo.startOfSegment;
+        end = timingInfo.end + mappingObj.mapping;
+      } else if (mappingObj) {
+        start = timingInfo.start + mappingObj.mapping;
+        end = timingInfo.end + mappingObj.mapping;
+      } else {
+        return false;
+      }
+      if (part) {
+        part.start = start;
+        part.end = end;
+      } // If we don't have a segment start yet or the start value we got
+      // is less than our current segment.start value, save a new start value.
+      // We have to do this because parts will have segment timing info saved
+      // multiple times and we want segment start to be the earliest part start
+      // value for that segment.
+
+      if (!segment.start || start < segment.start) {
+        segment.start = start;
+      }
+      segment.end = end;
+      return true;
+    }
+    /**
+     * Each time we have discontinuity in the playlist, attempt to calculate the location
+     * in display of the start of the discontinuity and save that. We also save an accuracy
+     * value so that we save values with the most accuracy (closest to 0.)
+     *
+     * @private
+     * @param {SegmentInfo} segmentInfo - The current active request information
+     */
+
+    saveDiscontinuitySyncInfo_(segmentInfo) {
+      const playlist = segmentInfo.playlist;
+      const segment = segmentInfo.segment; // If the current segment is a discontinuity then we know exactly where
+      // the start of the range and it's accuracy is 0 (greater accuracy values
+      // mean more approximation)
+
+      if (segment.discontinuity) {
+        this.discontinuities[segment.timeline] = {
+          time: segment.start,
+          accuracy: 0
+        };
+      } else if (playlist.discontinuityStarts && playlist.discontinuityStarts.length) {
+        // Search for future discontinuities that we can provide better timing
+        // information for and save that information for sync purposes
+        for (let i = 0; i < playlist.discontinuityStarts.length; i++) {
+          const segmentIndex = playlist.discontinuityStarts[i];
+          const discontinuity = playlist.discontinuitySequence + i + 1;
+          const mediaIndexDiff = segmentIndex - segmentInfo.mediaIndex;
+          const accuracy = Math.abs(mediaIndexDiff);
+          if (!this.discontinuities[discontinuity] || this.discontinuities[discontinuity].accuracy > accuracy) {
+            let time;
+            if (mediaIndexDiff < 0) {
+              time = segment.start - sumDurations({
+                defaultDuration: playlist.targetDuration,
+                durationList: playlist.segments,
+                startIndex: segmentInfo.mediaIndex,
+                endIndex: segmentIndex
+              });
+            } else {
+              time = segment.end + sumDurations({
+                defaultDuration: playlist.targetDuration,
+                durationList: playlist.segments,
+                startIndex: segmentInfo.mediaIndex + 1,
+                endIndex: segmentIndex
+              });
+            }
+            this.discontinuities[discontinuity] = {
+              time,
+              accuracy
+            };
+          }
+        }
+      }
+    }
+    dispose() {
+      this.trigger('dispose');
+      this.off();
+    }
+  }
+
+  /**
+   * The TimelineChangeController acts as a source for segment loaders to listen for and
+   * keep track of latest and pending timeline changes. This is useful to ensure proper
+   * sync, as each loader may need to make a consideration for what timeline the other
+   * loader is on before making changes which could impact the other loader's media.
+   *
+   * @class TimelineChangeController
+   * @extends videojs.EventTarget
+   */
+
+  class TimelineChangeController extends videojs.EventTarget {
+    constructor() {
+      super();
+      this.pendingTimelineChanges_ = {};
+      this.lastTimelineChanges_ = {};
+    }
+    clearPendingTimelineChange(type) {
+      this.pendingTimelineChanges_[type] = null;
+      this.trigger('pendingtimelinechange');
+    }
+    pendingTimelineChange({
+      type,
+      from,
+      to
+    }) {
+      if (typeof from === 'number' && typeof to === 'number') {
+        this.pendingTimelineChanges_[type] = {
+          type,
+          from,
+          to
+        };
+        this.trigger('pendingtimelinechange');
+      }
+      return this.pendingTimelineChanges_[type];
+    }
+    lastTimelineChange({
+      type,
+      from,
+      to
+    }) {
+      if (typeof from === 'number' && typeof to === 'number') {
+        this.lastTimelineChanges_[type] = {
+          type,
+          from,
+          to
+        };
+        delete this.pendingTimelineChanges_[type];
+        this.trigger('timelinechange');
+      }
+      return this.lastTimelineChanges_[type];
+    }
+    dispose() {
+      this.trigger('dispose');
+      this.pendingTimelineChanges_ = {};
+      this.lastTimelineChanges_ = {};
+      this.off();
+    }
+  }
+
+  /* rollup-plugin-worker-factory start for worker!/home/runner/work/http-streaming/http-streaming/src/decrypter-worker.js */
+  const workerCode = transform(getWorkerString(function () {
+    /**
+     * @file stream.js
+     */
+
+    /**
+     * A lightweight readable stream implemention that handles event dispatching.
+     *
+     * @class Stream
+     */
+
+    var Stream = /*#__PURE__*/function () {
+      function Stream() {
+        this.listeners = {};
+      }
+      /**
+       * Add a listener for a specified event type.
+       *
+       * @param {string} type the event name
+       * @param {Function} listener the callback to be invoked when an event of
+       * the specified type occurs
+       */
+
+      var _proto = Stream.prototype;
+      _proto.on = function on(type, listener) {
+        if (!this.listeners[type]) {
+          this.listeners[type] = [];
+        }
+        this.listeners[type].push(listener);
+      }
+      /**
+       * Remove a listener for a specified event type.
+       *
+       * @param {string} type the event name
+       * @param {Function} listener  a function previously registered for this
+       * type of event through `on`
+       * @return {boolean} if we could turn it off or not
+       */;
+
+      _proto.off = function off(type, listener) {
+        if (!this.listeners[type]) {
+          return false;
+        }
+        var index = this.listeners[type].indexOf(listener); // TODO: which is better?
+        // In Video.js we slice listener functions
+        // on trigger so that it does not mess up the order
+        // while we loop through.
+        //
+        // Here we slice on off so that the loop in trigger
+        // can continue using it's old reference to loop without
+        // messing up the order.
+
+        this.listeners[type] = this.listeners[type].slice(0);
+        this.listeners[type].splice(index, 1);
+        return index > -1;
+      }
+      /**
+       * Trigger an event of the specified type on this stream. Any additional
+       * arguments to this function are passed as parameters to event listeners.
+       *
+       * @param {string} type the event name
+       */;
+
+      _proto.trigger = function trigger(type) {
+        var callbacks = this.listeners[type];
+        if (!callbacks) {
+          return;
+        } // Slicing the arguments on every invocation of this method
+        // can add a significant amount of overhead. Avoid the
+        // intermediate object creation for the common case of a
+        // single callback argument
+
+        if (arguments.length === 2) {
+          var length = callbacks.length;
+          for (var i = 0; i < length; ++i) {
+            callbacks[i].call(this, arguments[1]);
+          }
+        } else {
+          var args = Array.prototype.slice.call(arguments, 1);
+          var _length = callbacks.length;
+          for (var _i = 0; _i < _length; ++_i) {
+            callbacks[_i].apply(this, args);
+          }
+        }
+      }
+      /**
+       * Destroys the stream and cleans up.
+       */;
+
+      _proto.dispose = function dispose() {
+        this.listeners = {};
+      }
+      /**
+       * Forwards all `data` events on this stream to the destination stream. The
+       * destination stream should provide a method `push` to receive the data
+       * events as they arrive.
+       *
+       * @param {Stream} destination the stream that will receive all `data` events
+       * @see http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options
+       */;
+
+      _proto.pipe = function pipe(destination) {
+        this.on('data', function (data) {
+          destination.push(data);
+        });
+      };
+      return Stream;
+    }();
+    /*! @name pkcs7 @version 1.0.4 @license Apache-2.0 */
+
+    /**
+     * Returns the subarray of a Uint8Array without PKCS#7 padding.
+     *
+     * @param padded {Uint8Array} unencrypted bytes that have been padded
+     * @return {Uint8Array} the unpadded bytes
+     * @see http://tools.ietf.org/html/rfc5652
+     */
+
+    function unpad(padded) {
+      return padded.subarray(0, padded.byteLength - padded[padded.byteLength - 1]);
+    }
+    /*! @name aes-decrypter @version 4.0.1 @license Apache-2.0 */
+
+    /**
+     * @file aes.js
+     *
+     * This file contains an adaptation of the AES decryption algorithm
+     * from the Standford Javascript Cryptography Library. That work is
+     * covered by the following copyright and permissions notice:
+     *
+     * Copyright 2009-2010 Emily Stark, Mike Hamburg, Dan Boneh.
+     * All rights reserved.
+     *
+     * Redistribution and use in source and binary forms, with or without
+     * modification, are permitted provided that the following conditions are
+     * met:
+     *
+     * 1. Redistributions of source code must retain the above copyright
+     *    notice, this list of conditions and the following disclaimer.
+     *
+     * 2. Redistributions in binary form must reproduce the above
+     *    copyright notice, this list of conditions and the following
+     *    disclaimer in the documentation and/or other materials provided
+     *    with the distribution.
+     *
+     * THIS SOFTWARE IS PROVIDED BY THE AUTHORS ``AS IS'' AND ANY EXPRESS OR
+     * IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+     * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+     * DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> OR CONTRIBUTORS BE
+     * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+     * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+     * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
+     * BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+     * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
+     * OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN
+     * IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+     *
+     * The views and conclusions contained in the software and documentation
+     * are those of the authors and should not be interpreted as representing
+     * official policies, either expressed or implied, of the authors.
+     */
+
+    /**
+     * Expand the S-box tables.
+     *
+     * @private
+     */
+
+    const precompute = function () {
+      const tables = [[[], [], [], [], []], [[], [], [], [], []]];
+      const encTable = tables[0];
+      const decTable = tables[1];
+      const sbox = encTable[4];
+      const sboxInv = decTable[4];
+      let i;
+      let x;
+      let xInv;
+      const d = [];
+      const th = [];
+      let x2;
+      let x4;
+      let x8;
+      let s;
+      let tEnc;
+      let tDec; // Compute double and third tables
+
+      for (i = 0; i < 256; i++) {
+        th[(d[i] = i << 1 ^ (i >> 7) * 283) ^ i] = i;
+      }
+      for (x = xInv = 0; !sbox[x]; x ^= x2 || 1, xInv = th[xInv] || 1) {
+        // Compute sbox
+        s = xInv ^ xInv << 1 ^ xInv << 2 ^ xInv << 3 ^ xInv << 4;
+        s = s >> 8 ^ s & 255 ^ 99;
+        sbox[x] = s;
+        sboxInv[s] = x; // Compute MixColumns
+
+        x8 = d[x4 = d[x2 = d[x]]];
+        tDec = x8 * 0x1010101 ^ x4 * 0x10001 ^ x2 * 0x101 ^ x * 0x1010100;
+        tEnc = d[s] * 0x101 ^ s * 0x1010100;
+        for (i = 0; i < 4; i++) {
+          encTable[i][x] = tEnc = tEnc << 24 ^ tEnc >>> 8;
+          decTable[i][s] = tDec = tDec << 24 ^ tDec >>> 8;
+        }
+      } // Compactify. Considerable speedup on Firefox.
+
+      for (i = 0; i < 5; i++) {
+        encTable[i] = encTable[i].slice(0);
+        decTable[i] = decTable[i].slice(0);
+      }
+      return tables;
+    };
+    let aesTables = null;
+    /**
+     * Schedule out an AES key for both encryption and decryption. This
+     * is a low-level class. Use a cipher mode to do bulk encryption.
+     *
+     * @class AES
+     * @param key {Array} The key as an array of 4, 6 or 8 words.
+     */
+
+    class AES {
+      constructor(key) {
+        /**
+        * The expanded S-box and inverse S-box tables. These will be computed
+        * on the client so that we don't have to send them down the wire.
+        *
+        * There are two tables, _tables[0] is for encryption and
+        * _tables[1] is for decryption.
+        *
+        * The first 4 sub-tables are the expanded S-box with MixColumns. The
+        * last (_tables[01][4]) is the S-box itself.
+        *
+        * @private
+        */
+        // if we have yet to precompute the S-box tables
+        // do so now
+        if (!aesTables) {
+          aesTables = precompute();
+        } // then make a copy of that object for use
+
+        this._tables = [[aesTables[0][0].slice(), aesTables[0][1].slice(), aesTables[0][2].slice(), aesTables[0][3].slice(), aesTables[0][4].slice()], [aesTables[1][0].slice(), aesTables[1][1].slice(), aesTables[1][2].slice(), aesTables[1][3].slice(), aesTables[1][4].slice()]];
+        let i;
+        let j;
+        let tmp;
+        const sbox = this._tables[0][4];
+        const decTable = this._tables[1];
+        const keyLen = key.length;
+        let rcon = 1;
+        if (keyLen !== 4 && keyLen !== 6 && keyLen !== 8) {
+          throw new Error('Invalid aes key size');
+        }
+        const encKey = key.slice(0);
+        const decKey = [];
+        this._key = [encKey, decKey]; // schedule encryption keys
+
+        for (i = keyLen; i < 4 * keyLen + 28; i++) {
+          tmp = encKey[i - 1]; // apply sbox
+
+          if (i % keyLen === 0 || keyLen === 8 && i % keyLen === 4) {
+            tmp = sbox[tmp >>> 24] << 24 ^ sbox[tmp >> 16 & 255] << 16 ^ sbox[tmp >> 8 & 255] << 8 ^ sbox[tmp & 255]; // shift rows and add rcon
+
+            if (i % keyLen === 0) {
+              tmp = tmp << 8 ^ tmp >>> 24 ^ rcon << 24;
+              rcon = rcon << 1 ^ (rcon >> 7) * 283;
+            }
+          }
+          encKey[i] = encKey[i - keyLen] ^ tmp;
+        } // schedule decryption keys
+
+        for (j = 0; i; j++, i--) {
+          tmp = encKey[j & 3 ? i : i - 4];
+          if (i <= 4 || j < 4) {
+            decKey[j] = tmp;
+          } else {
+            decKey[j] = decTable[0][sbox[tmp >>> 24]] ^ decTable[1][sbox[tmp >> 16 & 255]] ^ decTable[2][sbox[tmp >> 8 & 255]] ^ decTable[3][sbox[tmp & 255]];
+          }
+        }
+      }
+      /**
+       * Decrypt 16 bytes, specified as four 32-bit words.
+       *
+       * @param {number} encrypted0 the first word to decrypt
+       * @param {number} encrypted1 the second word to decrypt
+       * @param {number} encrypted2 the third word to decrypt
+       * @param {number} encrypted3 the fourth word to decrypt
+       * @param {Int32Array} out the array to write the decrypted words
+       * into
+       * @param {number} offset the offset into the output array to start
+       * writing results
+       * @return {Array} The plaintext.
+       */
+
+      decrypt(encrypted0, encrypted1, encrypted2, encrypted3, out, offset) {
+        const key = this._key[1]; // state variables a,b,c,d are loaded with pre-whitened data
+
+        let a = encrypted0 ^ key[0];
+        let b = encrypted3 ^ key[1];
+        let c = encrypted2 ^ key[2];
+        let d = encrypted1 ^ key[3];
+        let a2;
+        let b2;
+        let c2; // key.length === 2 ?
+
+        const nInnerRounds = key.length / 4 - 2;
+        let i;
+        let kIndex = 4;
+        const table = this._tables[1]; // load up the tables
+
+        const table0 = table[0];
+        const table1 = table[1];
+        const table2 = table[2];
+        const table3 = table[3];
+        const sbox = table[4]; // Inner rounds. Cribbed from OpenSSL.
+
+        for (i = 0; i < nInnerRounds; i++) {
+          a2 = table0[a >>> 24] ^ table1[b >> 16 & 255] ^ table2[c >> 8 & 255] ^ table3[d & 255] ^ key[kIndex];
+          b2 = table0[b >>> 24] ^ table1[c >> 16 & 255] ^ table2[d >> 8 & 255] ^ table3[a & 255] ^ key[kIndex + 1];
+          c2 = table0[c >>> 24] ^ table1[d >> 16 & 255] ^ table2[a >> 8 & 255] ^ table3[b & 255] ^ key[kIndex + 2];
+          d = table0[d >>> 24] ^ table1[a >> 16 & 255] ^ table2[b >> 8 & 255] ^ table3[c & 255] ^ key[kIndex + 3];
+          kIndex += 4;
+          a = a2;
+          b = b2;
+          c = c2;
+        } // Last round.
+
+        for (i = 0; i < 4; i++) {
+          out[(3 & -i) + offset] = sbox[a >>> 24] << 24 ^ sbox[b >> 16 & 255] << 16 ^ sbox[c >> 8 & 255] << 8 ^ sbox[d & 255] ^ key[kIndex++];
+          a2 = a;
+          a = b;
+          b = c;
+          c = d;
+          d = a2;
+        }
+      }
+    }
+    /**
+     * @file async-stream.js
+     */
+
+    /**
+     * A wrapper around the Stream class to use setTimeout
+     * and run stream "jobs" Asynchronously
+     *
+     * @class AsyncStream
+     * @extends Stream
+     */
+
+    class AsyncStream extends Stream {
+      constructor() {
+        super(Stream);
+        this.jobs = [];
+        this.delay = 1;
+        this.timeout_ = null;
+      }
+      /**
+       * process an async job
+       *
+       * @private
+       */
+
+      processJob_() {
+        this.jobs.shift()();
+        if (this.jobs.length) {
+          this.timeout_ = setTimeout(this.processJob_.bind(this), this.delay);
+        } else {
+          this.timeout_ = null;
+        }
+      }
+      /**
+       * push a job into the stream
+       *
+       * @param {Function} job the job to push into the stream
+       */
+
+      push(job) {
+        this.jobs.push(job);
+        if (!this.timeout_) {
+          this.timeout_ = setTimeout(this.processJob_.bind(this), this.delay);
+        }
+      }
+    }
+    /**
+     * @file decrypter.js
+     *
+     * An asynchronous implementation of AES-128 CBC decryption with
+     * PKCS#7 padding.
+     */
+
+    /**
+     * Convert network-order (big-endian) bytes into their little-endian
+     * representation.
+     */
+
+    const ntoh = function (word) {
+      return word << 24 | (word & 0xff00) << 8 | (word & 0xff0000) >> 8 | word >>> 24;
+    };
+    /**
+     * Decrypt bytes using AES-128 with CBC and PKCS#7 padding.
+     *
+     * @param {Uint8Array} encrypted the encrypted bytes
+     * @param {Uint32Array} key the bytes of the decryption key
+     * @param {Uint32Array} initVector the initialization vector (IV) to
+     * use for the first round of CBC.
+     * @return {Uint8Array} the decrypted bytes
+     *
+     * @see http://en.wikipedia.org/wiki/Advanced_Encryption_Standard
+     * @see http://en.wikipedia.org/wiki/Block_cipher_mode_of_operation#Cipher_Block_Chaining_.28CBC.29
+     * @see https://tools.ietf.org/html/rfc2315
+     */
+
+    const decrypt = function (encrypted, key, initVector) {
+      // word-level access to the encrypted bytes
+      const encrypted32 = new Int32Array(encrypted.buffer, encrypted.byteOffset, encrypted.byteLength >> 2);
+      const decipher = new AES(Array.prototype.slice.call(key)); // byte and word-level access for the decrypted output
+
+      const decrypted = new Uint8Array(encrypted.byteLength);
+      const decrypted32 = new Int32Array(decrypted.buffer); // temporary variables for working with the IV, encrypted, and
+      // decrypted data
+
+      let init0;
+      let init1;
+      let init2;
+      let init3;
+      let encrypted0;
+      let encrypted1;
+      let encrypted2;
+      let encrypted3; // iteration variable
+
+      let wordIx; // pull out the words of the IV to ensure we don't modify the
+      // passed-in reference and easier access
+
+      init0 = initVector[0];
+      init1 = initVector[1];
+      init2 = initVector[2];
+      init3 = initVector[3]; // decrypt four word sequences, applying cipher-block chaining (CBC)
+      // to each decrypted block
+
+      for (wordIx = 0; wordIx < encrypted32.length; wordIx += 4) {
+        // convert big-endian (network order) words into little-endian
+        // (javascript order)
+        encrypted0 = ntoh(encrypted32[wordIx]);
+        encrypted1 = ntoh(encrypted32[wordIx + 1]);
+        encrypted2 = ntoh(encrypted32[wordIx + 2]);
+        encrypted3 = ntoh(encrypted32[wordIx + 3]); // decrypt the block
+
+        decipher.decrypt(encrypted0, encrypted1, encrypted2, encrypted3, decrypted32, wordIx); // XOR with the IV, and restore network byte-order to obtain the
+        // plaintext
+
+        decrypted32[wordIx] = ntoh(decrypted32[wordIx] ^ init0);
+        decrypted32[wordIx + 1] = ntoh(decrypted32[wordIx + 1] ^ init1);
+        decrypted32[wordIx + 2] = ntoh(decrypted32[wordIx + 2] ^ init2);
+        decrypted32[wordIx + 3] = ntoh(decrypted32[wordIx + 3] ^ init3); // setup the IV for the next round
+
+        init0 = encrypted0;
+        init1 = encrypted1;
+        init2 = encrypted2;
+        init3 = encrypted3;
+      }
+      return decrypted;
+    };
+    /**
+     * The `Decrypter` class that manages decryption of AES
+     * data through `AsyncStream` objects and the `decrypt`
+     * function
+     *
+     * @param {Uint8Array} encrypted the encrypted bytes
+     * @param {Uint32Array} key the bytes of the decryption key
+     * @param {Uint32Array} initVector the initialization vector (IV) to
+     * @param {Function} done the function to run when done
+     * @class Decrypter
+     */
+
+    class Decrypter {
+      constructor(encrypted, key, initVector, done) {
+        const step = Decrypter.STEP;
+        const encrypted32 = new Int32Array(encrypted.buffer);
+        const decrypted = new Uint8Array(encrypted.byteLength);
+        let i = 0;
+        this.asyncStream_ = new AsyncStream(); // split up the encryption job and do the individual chunks asynchronously
+
+        this.asyncStream_.push(this.decryptChunk_(encrypted32.subarray(i, i + step), key, initVector, decrypted));
+        for (i = step; i < encrypted32.length; i += step) {
+          initVector = new Uint32Array([ntoh(encrypted32[i - 4]), ntoh(encrypted32[i - 3]), ntoh(encrypted32[i - 2]), ntoh(encrypted32[i - 1])]);
+          this.asyncStream_.push(this.decryptChunk_(encrypted32.subarray(i, i + step), key, initVector, decrypted));
+        } // invoke the done() callback when everything is finished
+
+        this.asyncStream_.push(function () {
+          // remove pkcs#7 padding from the decrypted bytes
+          done(null, unpad(decrypted));
+        });
+      }
+      /**
+       * a getter for step the maximum number of bytes to process at one time
+       *
+       * @return {number} the value of step 32000
+       */
+
+      static get STEP() {
+        // 4 * 8000;
+        return 32000;
+      }
+      /**
+       * @private
+       */
+
+      decryptChunk_(encrypted, key, initVector, decrypted) {
+        return function () {
+          const bytes = decrypt(encrypted, key, initVector);
+          decrypted.set(bytes, encrypted.byteOffset);
+        };
+      }
+    }
+    var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+    var win;
+    if (typeof window !== "undefined") {
+      win = window;
+    } else if (typeof commonjsGlobal !== "undefined") {
+      win = commonjsGlobal;
+    } else if (typeof self !== "undefined") {
+      win = self;
+    } else {
+      win = {};
+    }
+    var window_1 = win;
+    var isArrayBufferView = function isArrayBufferView(obj) {
+      if (ArrayBuffer.isView === 'function') {
+        return ArrayBuffer.isView(obj);
+      }
+      return obj && obj.buffer instanceof ArrayBuffer;
+    };
+    var BigInt = window_1.BigInt || Number;
+    [BigInt('0x1'), BigInt('0x100'), BigInt('0x10000'), BigInt('0x1000000'), BigInt('0x100000000'), BigInt('0x10000000000'), BigInt('0x1000000000000'), BigInt('0x100000000000000'), BigInt('0x10000000000000000')];
+    (function () {
+      var a = new Uint16Array([0xFFCC]);
+      var b = new Uint8Array(a.buffer, a.byteOffset, a.byteLength);
+      if (b[0] === 0xFF) {
+        return 'big';
+      }
+      if (b[0] === 0xCC) {
+        return 'little';
+      }
+      return 'unknown';
+    })();
+    /**
+     * Creates an object for sending to a web worker modifying properties that are TypedArrays
+     * into a new object with seperated properties for the buffer, byteOffset, and byteLength.
+     *
+     * @param {Object} message
+     *        Object of properties and values to send to the web worker
+     * @return {Object}
+     *         Modified message with TypedArray values expanded
+     * @function createTransferableMessage
+     */
+
+    const createTransferableMessage = function (message) {
+      const transferable = {};
+      Object.keys(message).forEach(key => {
+        const value = message[key];
+        if (isArrayBufferView(value)) {
+          transferable[key] = {
+            bytes: value.buffer,
+            byteOffset: value.byteOffset,
+            byteLength: value.byteLength
+          };
+        } else {
+          transferable[key] = value;
+        }
+      });
+      return transferable;
+    };
+    /* global self */
+
+    /**
+     * Our web worker interface so that things can talk to aes-decrypter
+     * that will be running in a web worker. the scope is passed to this by
+     * webworkify.
+     */
+
+    self.onmessage = function (event) {
+      const data = event.data;
+      const encrypted = new Uint8Array(data.encrypted.bytes, data.encrypted.byteOffset, data.encrypted.byteLength);
+      const key = new Uint32Array(data.key.bytes, data.key.byteOffset, data.key.byteLength / 4);
+      const iv = new Uint32Array(data.iv.bytes, data.iv.byteOffset, data.iv.byteLength / 4);
+      /* eslint-disable no-new, handle-callback-err */
+
+      new Decrypter(encrypted, key, iv, function (err, bytes) {
+        self.postMessage(createTransferableMessage({
+          source: data.source,
+          decrypted: bytes
+        }), [bytes.buffer]);
+      });
+      /* eslint-enable */
+    };
+  }));
+
+  var Decrypter = factory(workerCode);
+  /* rollup-plugin-worker-factory end for worker!/home/runner/work/http-streaming/http-streaming/src/decrypter-worker.js */
+
+  /**
+   * Convert the properties of an HLS track into an audioTrackKind.
+   *
+   * @private
+   */
+
+  const audioTrackKind_ = properties => {
+    let kind = properties.default ? 'main' : 'alternative';
+    if (properties.characteristics && properties.characteristics.indexOf('public.accessibility.describes-video') >= 0) {
+      kind = 'main-desc';
+    }
+    return kind;
+  };
+  /**
+   * Pause provided segment loader and playlist loader if active
+   *
+   * @param {SegmentLoader} segmentLoader
+   *        SegmentLoader to pause
+   * @param {Object} mediaType
+   *        Active media type
+   * @function stopLoaders
+   */
+
+  const stopLoaders = (segmentLoader, mediaType) => {
+    segmentLoader.abort();
+    segmentLoader.pause();
+    if (mediaType && mediaType.activePlaylistLoader) {
+      mediaType.activePlaylistLoader.pause();
+      mediaType.activePlaylistLoader = null;
+    }
+  };
+  /**
+   * Start loading provided segment loader and playlist loader
+   *
+   * @param {PlaylistLoader} playlistLoader
+   *        PlaylistLoader to start loading
+   * @param {Object} mediaType
+   *        Active media type
+   * @function startLoaders
+   */
+
+  const startLoaders = (playlistLoader, mediaType) => {
+    // Segment loader will be started after `loadedmetadata` or `loadedplaylist` from the
+    // playlist loader
+    mediaType.activePlaylistLoader = playlistLoader;
+    playlistLoader.load();
+  };
+  /**
+   * Returns a function to be called when the media group changes. It performs a
+   * non-destructive (preserve the buffer) resync of the SegmentLoader. This is because a
+   * change of group is merely a rendition switch of the same content at another encoding,
+   * rather than a change of content, such as switching audio from English to Spanish.
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Handler for a non-destructive resync of SegmentLoader when the active media
+   *         group changes.
+   * @function onGroupChanged
+   */
+
+  const onGroupChanged = (type, settings) => () => {
+    const {
+      segmentLoaders: {
+        [type]: segmentLoader,
+        main: mainSegmentLoader
+      },
+      mediaTypes: {
+        [type]: mediaType
+      }
+    } = settings;
+    const activeTrack = mediaType.activeTrack();
+    const activeGroup = mediaType.getActiveGroup();
+    const previousActiveLoader = mediaType.activePlaylistLoader;
+    const lastGroup = mediaType.lastGroup_; // the group did not change do nothing
+
+    if (activeGroup && lastGroup && activeGroup.id === lastGroup.id) {
+      return;
+    }
+    mediaType.lastGroup_ = activeGroup;
+    mediaType.lastTrack_ = activeTrack;
+    stopLoaders(segmentLoader, mediaType);
+    if (!activeGroup || activeGroup.isMainPlaylist) {
+      // there is no group active or active group is a main playlist and won't change
+      return;
+    }
+    if (!activeGroup.playlistLoader) {
+      if (previousActiveLoader) {
+        // The previous group had a playlist loader but the new active group does not
+        // this means we are switching from demuxed to muxed audio. In this case we want to
+        // do a destructive reset of the main segment loader and not restart the audio
+        // loaders.
+        mainSegmentLoader.resetEverything();
+      }
+      return;
+    } // Non-destructive resync
+
+    segmentLoader.resyncLoader();
+    startLoaders(activeGroup.playlistLoader, mediaType);
+  };
+  const onGroupChanging = (type, settings) => () => {
+    const {
+      segmentLoaders: {
+        [type]: segmentLoader
+      },
+      mediaTypes: {
+        [type]: mediaType
+      }
+    } = settings;
+    mediaType.lastGroup_ = null;
+    segmentLoader.abort();
+    segmentLoader.pause();
+  };
+  /**
+   * Returns a function to be called when the media track changes. It performs a
+   * destructive reset of the SegmentLoader to ensure we start loading as close to
+   * currentTime as possible.
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Handler for a destructive reset of SegmentLoader when the active media
+   *         track changes.
+   * @function onTrackChanged
+   */
+
+  const onTrackChanged = (type, settings) => () => {
+    const {
+      mainPlaylistLoader,
+      segmentLoaders: {
+        [type]: segmentLoader,
+        main: mainSegmentLoader
+      },
+      mediaTypes: {
+        [type]: mediaType
+      }
+    } = settings;
+    const activeTrack = mediaType.activeTrack();
+    const activeGroup = mediaType.getActiveGroup();
+    const previousActiveLoader = mediaType.activePlaylistLoader;
+    const lastTrack = mediaType.lastTrack_; // track did not change, do nothing
+
+    if (lastTrack && activeTrack && lastTrack.id === activeTrack.id) {
+      return;
+    }
+    mediaType.lastGroup_ = activeGroup;
+    mediaType.lastTrack_ = activeTrack;
+    stopLoaders(segmentLoader, mediaType);
+    if (!activeGroup) {
+      // there is no group active so we do not want to restart loaders
+      return;
+    }
+    if (activeGroup.isMainPlaylist) {
+      // track did not change, do nothing
+      if (!activeTrack || !lastTrack || activeTrack.id === lastTrack.id) {
+        return;
+      }
+      const pc = settings.vhs.playlistController_;
+      const newPlaylist = pc.selectPlaylist(); // media will not change do nothing
+
+      if (pc.media() === newPlaylist) {
+        return;
+      }
+      mediaType.logger_(`track change. Switching main audio from ${lastTrack.id} to ${activeTrack.id}`);
+      mainPlaylistLoader.pause();
+      mainSegmentLoader.resetEverything();
+      pc.fastQualityChange_(newPlaylist);
+      return;
+    }
+    if (type === 'AUDIO') {
+      if (!activeGroup.playlistLoader) {
+        // when switching from demuxed audio/video to muxed audio/video (noted by no
+        // playlist loader for the audio group), we want to do a destructive reset of the
+        // main segment loader and not restart the audio loaders
+        mainSegmentLoader.setAudio(true); // don't have to worry about disabling the audio of the audio segment loader since
+        // it should be stopped
+
+        mainSegmentLoader.resetEverything();
+        return;
+      } // although the segment loader is an audio segment loader, call the setAudio
+      // function to ensure it is prepared to re-append the init segment (or handle other
+      // config changes)
+
+      segmentLoader.setAudio(true);
+      mainSegmentLoader.setAudio(false);
+    }
+    if (previousActiveLoader === activeGroup.playlistLoader) {
+      // Nothing has actually changed. This can happen because track change events can fire
+      // multiple times for a "single" change. One for enabling the new active track, and
+      // one for disabling the track that was active
+      startLoaders(activeGroup.playlistLoader, mediaType);
+      return;
+    }
+    if (segmentLoader.track) {
+      // For WebVTT, set the new text track in the segmentloader
+      segmentLoader.track(activeTrack);
+    } // destructive reset
+
+    segmentLoader.resetEverything();
+    startLoaders(activeGroup.playlistLoader, mediaType);
+  };
+  const onError = {
+    /**
+     * Returns a function to be called when a SegmentLoader or PlaylistLoader encounters
+     * an error.
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @return {Function}
+     *         Error handler. Logs warning (or error if the playlist is excluded) to
+     *         console and switches back to default audio track.
+     * @function onError.AUDIO
+     */
+    AUDIO: (type, settings) => () => {
+      const {
+        mediaTypes: {
+          [type]: mediaType
+        },
+        excludePlaylist
+      } = settings; // switch back to default audio track
+
+      const activeTrack = mediaType.activeTrack();
+      const activeGroup = mediaType.activeGroup();
+      const id = (activeGroup.filter(group => group.default)[0] || activeGroup[0]).id;
+      const defaultTrack = mediaType.tracks[id];
+      if (activeTrack === defaultTrack) {
+        // Default track encountered an error. All we can do now is exclude the current
+        // rendition and hope another will switch audio groups
+        excludePlaylist({
+          error: {
+            message: 'Problem encountered loading the default audio track.'
+          }
+        });
+        return;
+      }
+      videojs.log.warn('Problem encountered loading the alternate audio track.' + 'Switching back to default.');
+      for (const trackId in mediaType.tracks) {
+        mediaType.tracks[trackId].enabled = mediaType.tracks[trackId] === defaultTrack;
+      }
+      mediaType.onTrackChanged();
+    },
+    /**
+     * Returns a function to be called when a SegmentLoader or PlaylistLoader encounters
+     * an error.
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @return {Function}
+     *         Error handler. Logs warning to console and disables the active subtitle track
+     * @function onError.SUBTITLES
+     */
+    SUBTITLES: (type, settings) => () => {
+      const {
+        mediaTypes: {
+          [type]: mediaType
+        }
+      } = settings;
+      videojs.log.warn('Problem encountered loading the subtitle track.' + 'Disabling subtitle track.');
+      const track = mediaType.activeTrack();
+      if (track) {
+        track.mode = 'disabled';
+      }
+      mediaType.onTrackChanged();
+    }
+  };
+  const setupListeners = {
+    /**
+     * Setup event listeners for audio playlist loader
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {PlaylistLoader|null} playlistLoader
+     *        PlaylistLoader to register listeners on
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function setupListeners.AUDIO
+     */
+    AUDIO: (type, playlistLoader, settings) => {
+      if (!playlistLoader) {
+        // no playlist loader means audio will be muxed with the video
+        return;
+      }
+      const {
+        tech,
+        requestOptions,
+        segmentLoaders: {
+          [type]: segmentLoader
+        }
+      } = settings;
+      playlistLoader.on('loadedmetadata', () => {
+        const media = playlistLoader.media();
+        segmentLoader.playlist(media, requestOptions); // if the video is already playing, or if this isn't a live video and preload
+        // permits, start downloading segments
+
+        if (!tech.paused() || media.endList && tech.preload() !== 'none') {
+          segmentLoader.load();
+        }
+      });
+      playlistLoader.on('loadedplaylist', () => {
+        segmentLoader.playlist(playlistLoader.media(), requestOptions); // If the player isn't paused, ensure that the segment loader is running
+
+        if (!tech.paused()) {
+          segmentLoader.load();
+        }
+      });
+      playlistLoader.on('error', onError[type](type, settings));
+    },
+    /**
+     * Setup event listeners for subtitle playlist loader
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {PlaylistLoader|null} playlistLoader
+     *        PlaylistLoader to register listeners on
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function setupListeners.SUBTITLES
+     */
+    SUBTITLES: (type, playlistLoader, settings) => {
+      const {
+        tech,
+        requestOptions,
+        segmentLoaders: {
+          [type]: segmentLoader
+        },
+        mediaTypes: {
+          [type]: mediaType
+        }
+      } = settings;
+      playlistLoader.on('loadedmetadata', () => {
+        const media = playlistLoader.media();
+        segmentLoader.playlist(media, requestOptions);
+        segmentLoader.track(mediaType.activeTrack()); // if the video is already playing, or if this isn't a live video and preload
+        // permits, start downloading segments
+
+        if (!tech.paused() || media.endList && tech.preload() !== 'none') {
+          segmentLoader.load();
+        }
+      });
+      playlistLoader.on('loadedplaylist', () => {
+        segmentLoader.playlist(playlistLoader.media(), requestOptions); // If the player isn't paused, ensure that the segment loader is running
+
+        if (!tech.paused()) {
+          segmentLoader.load();
+        }
+      });
+      playlistLoader.on('error', onError[type](type, settings));
+    }
+  };
+  const initialize = {
+    /**
+     * Setup PlaylistLoaders and AudioTracks for the audio groups
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function initialize.AUDIO
+     */
+    'AUDIO': (type, settings) => {
+      const {
+        vhs,
+        sourceType,
+        segmentLoaders: {
+          [type]: segmentLoader
+        },
+        requestOptions,
+        main: {
+          mediaGroups
+        },
+        mediaTypes: {
+          [type]: {
+            groups,
+            tracks,
+            logger_
+          }
+        },
+        mainPlaylistLoader
+      } = settings;
+      const audioOnlyMain = isAudioOnly(mainPlaylistLoader.main); // force a default if we have none
+
+      if (!mediaGroups[type] || Object.keys(mediaGroups[type]).length === 0) {
+        mediaGroups[type] = {
+          main: {
+            default: {
+              default: true
+            }
+          }
+        };
+        if (audioOnlyMain) {
+          mediaGroups[type].main.default.playlists = mainPlaylistLoader.main.playlists;
+        }
+      }
+      for (const groupId in mediaGroups[type]) {
+        if (!groups[groupId]) {
+          groups[groupId] = [];
+        }
+        for (const variantLabel in mediaGroups[type][groupId]) {
+          let properties = mediaGroups[type][groupId][variantLabel];
+          let playlistLoader;
+          if (audioOnlyMain) {
+            logger_(`AUDIO group '${groupId}' label '${variantLabel}' is a main playlist`);
+            properties.isMainPlaylist = true;
+            playlistLoader = null; // if vhs-json was provided as the source, and the media playlist was resolved,
+            // use the resolved media playlist object
+          } else if (sourceType === 'vhs-json' && properties.playlists) {
+            playlistLoader = new PlaylistLoader(properties.playlists[0], vhs, requestOptions);
+          } else if (properties.resolvedUri) {
+            playlistLoader = new PlaylistLoader(properties.resolvedUri, vhs, requestOptions); // TODO: dash isn't the only type with properties.playlists
+            // should we even have properties.playlists in this check.
+          } else if (properties.playlists && sourceType === 'dash') {
+            playlistLoader = new DashPlaylistLoader(properties.playlists[0], vhs, requestOptions, mainPlaylistLoader);
+          } else {
+            // no resolvedUri means the audio is muxed with the video when using this
+            // audio track
+            playlistLoader = null;
+          }
+          properties = merge({
+            id: variantLabel,
+            playlistLoader
+          }, properties);
+          setupListeners[type](type, properties.playlistLoader, settings);
+          groups[groupId].push(properties);
+          if (typeof tracks[variantLabel] === 'undefined') {
+            const track = new videojs.AudioTrack({
+              id: variantLabel,
+              kind: audioTrackKind_(properties),
+              enabled: false,
+              language: properties.language,
+              default: properties.default,
+              label: variantLabel
+            });
+            tracks[variantLabel] = track;
+          }
+        }
+      } // setup single error event handler for the segment loader
+
+      segmentLoader.on('error', onError[type](type, settings));
+    },
+    /**
+     * Setup PlaylistLoaders and TextTracks for the subtitle groups
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function initialize.SUBTITLES
+     */
+    'SUBTITLES': (type, settings) => {
+      const {
+        tech,
+        vhs,
+        sourceType,
+        segmentLoaders: {
+          [type]: segmentLoader
+        },
+        requestOptions,
+        main: {
+          mediaGroups
+        },
+        mediaTypes: {
+          [type]: {
+            groups,
+            tracks
+          }
+        },
+        mainPlaylistLoader
+      } = settings;
+      for (const groupId in mediaGroups[type]) {
+        if (!groups[groupId]) {
+          groups[groupId] = [];
+        }
+        for (const variantLabel in mediaGroups[type][groupId]) {
+          if (!vhs.options_.useForcedSubtitles && mediaGroups[type][groupId][variantLabel].forced) {
+            // Subtitle playlists with the forced attribute are not selectable in Safari.
+            // According to Apple's HLS Authoring Specification:
+            //   If content has forced subtitles and regular subtitles in a given language,
+            //   the regular subtitles track in that language MUST contain both the forced
+            //   subtitles and the regular subtitles for that language.
+            // Because of this requirement and that Safari does not add forced subtitles,
+            // forced subtitles are skipped here to maintain consistent experience across
+            // all platforms
+            continue;
+          }
+          let properties = mediaGroups[type][groupId][variantLabel];
+          let playlistLoader;
+          if (sourceType === 'hls') {
+            playlistLoader = new PlaylistLoader(properties.resolvedUri, vhs, requestOptions);
+          } else if (sourceType === 'dash') {
+            const playlists = properties.playlists.filter(p => p.excludeUntil !== Infinity);
+            if (!playlists.length) {
+              return;
+            }
+            playlistLoader = new DashPlaylistLoader(properties.playlists[0], vhs, requestOptions, mainPlaylistLoader);
+          } else if (sourceType === 'vhs-json') {
+            playlistLoader = new PlaylistLoader(
+            // if the vhs-json object included the media playlist, use the media playlist
+            // as provided, otherwise use the resolved URI to load the playlist
+            properties.playlists ? properties.playlists[0] : properties.resolvedUri, vhs, requestOptions);
+          }
+          properties = merge({
+            id: variantLabel,
+            playlistLoader
+          }, properties);
+          setupListeners[type](type, properties.playlistLoader, settings);
+          groups[groupId].push(properties);
+          if (typeof tracks[variantLabel] === 'undefined') {
+            const track = tech.addRemoteTextTrack({
+              id: variantLabel,
+              kind: 'subtitles',
+              default: properties.default && properties.autoselect,
+              language: properties.language,
+              label: variantLabel
+            }, false).track;
+            tracks[variantLabel] = track;
+          }
+        }
+      } // setup single error event handler for the segment loader
+
+      segmentLoader.on('error', onError[type](type, settings));
+    },
+    /**
+     * Setup TextTracks for the closed-caption groups
+     *
+     * @param {String} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @function initialize['CLOSED-CAPTIONS']
+     */
+    'CLOSED-CAPTIONS': (type, settings) => {
+      const {
+        tech,
+        main: {
+          mediaGroups
+        },
+        mediaTypes: {
+          [type]: {
+            groups,
+            tracks
+          }
+        }
+      } = settings;
+      for (const groupId in mediaGroups[type]) {
+        if (!groups[groupId]) {
+          groups[groupId] = [];
+        }
+        for (const variantLabel in mediaGroups[type][groupId]) {
+          const properties = mediaGroups[type][groupId][variantLabel]; // Look for either 608 (CCn) or 708 (SERVICEn) caption services
+
+          if (!/^(?:CC|SERVICE)/.test(properties.instreamId)) {
+            continue;
+          }
+          const captionServices = tech.options_.vhs && tech.options_.vhs.captionServices || {};
+          let newProps = {
+            label: variantLabel,
+            language: properties.language,
+            instreamId: properties.instreamId,
+            default: properties.default && properties.autoselect
+          };
+          if (captionServices[newProps.instreamId]) {
+            newProps = merge(newProps, captionServices[newProps.instreamId]);
+          }
+          if (newProps.default === undefined) {
+            delete newProps.default;
+          } // No PlaylistLoader is required for Closed-Captions because the captions are
+          // embedded within the video stream
+
+          groups[groupId].push(merge({
+            id: variantLabel
+          }, properties));
+          if (typeof tracks[variantLabel] === 'undefined') {
+            const track = tech.addRemoteTextTrack({
+              id: newProps.instreamId,
+              kind: 'captions',
+              default: newProps.default,
+              language: newProps.language,
+              label: newProps.label
+            }, false).track;
+            tracks[variantLabel] = track;
+          }
+        }
+      }
+    }
+  };
+  const groupMatch = (list, media) => {
+    for (let i = 0; i < list.length; i++) {
+      if (playlistMatch(media, list[i])) {
+        return true;
+      }
+      if (list[i].playlists && groupMatch(list[i].playlists, media)) {
+        return true;
+      }
+    }
+    return false;
+  };
+  /**
+   * Returns a function used to get the active group of the provided type
+   *
+   * @param {string} type
+   *        MediaGroup type
+   * @param {Object} settings
+   *        Object containing required information for media groups
+   * @return {Function}
+   *         Function that returns the active media group for the provided type. Takes an
+   *         optional parameter {TextTrack} track. If no track is provided, a list of all
+   *         variants in the group, otherwise the variant corresponding to the provided
+   *         track is returned.
+   * @function activeGroup
+   */
+
+  const activeGroup = (type, settings) => track => {
+    const {
+      mainPlaylistLoader,
+      mediaTypes: {
+        [type]: {
+          groups
+        }
+      }
+    } = settings;
+    const media = mainPlaylistLoader.media();
+    if (!media) {
+      return null;
+    }
+    let variants = null; // set to variants to main media active group
+
+    if (media.attributes[type]) {
+      variants = groups[media.attributes[type]];
+    }
+    const groupKeys = Object.keys(groups);
+    if (!variants) {
+      // find the mainPlaylistLoader media
+      // that is in a media group if we are dealing
+      // with audio only
+      if (type === 'AUDIO' && groupKeys.length > 1 && isAudioOnly(settings.main)) {
+        for (let i = 0; i < groupKeys.length; i++) {
+          const groupPropertyList = groups[groupKeys[i]];
+          if (groupMatch(groupPropertyList, media)) {
+            variants = groupPropertyList;
+            break;
+          }
+        } // use the main group if it exists
+      } else if (groups.main) {
+        variants = groups.main; // only one group, use that one
+      } else if (groupKeys.length === 1) {
+        variants = groups[groupKeys[0]];
+      }
+    }
+    if (typeof track === 'undefined') {
+      return variants;
+    }
+    if (track === null || !variants) {
+      // An active track was specified so a corresponding group is expected. track === null
+      // means no track is currently active so there is no corresponding group
+      return null;
+    }
+    return variants.filter(props => props.id === track.id)[0] || null;
+  };
+  const activeTrack = {
+    /**
+     * Returns a function used to get the active track of type provided
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @return {Function}
+     *         Function that returns the active media track for the provided type. Returns
+     *         null if no track is active
+     * @function activeTrack.AUDIO
+     */
+    AUDIO: (type, settings) => () => {
+      const {
+        mediaTypes: {
+          [type]: {
+            tracks
+          }
+        }
+      } = settings;
+      for (const id in tracks) {
+        if (tracks[id].enabled) {
+          return tracks[id];
+        }
+      }
+      return null;
+    },
+    /**
+     * Returns a function used to get the active track of type provided
+     *
+     * @param {string} type
+     *        MediaGroup type
+     * @param {Object} settings
+     *        Object containing required information for media groups
+     * @return {Function}
+     *         Function that returns the active media track for the provided type. Returns
+     *         null if no track is active
+     * @function activeTrack.SUBTITLES
+     */
+    SUBTITLES: (type, settings) => () => {
+      const {
+        mediaTypes: {
+          [type]: {
+            tracks
+          }
+        }
+      } = settings;
+      for (const id in tracks) {
+        if (tracks[id].mode === 'showing' || tracks[id].mode === 'hidden') {
+          return tracks[id];
+        }
+      }
+      return null;
+    }
+  };
+  const getActiveGroup = (type, {
+    mediaTypes
+  }) => () => {
+    const activeTrack_ = mediaTypes[type].activeTrack();
+    if (!activeTrack_) {
+      return null;
+    }
+    return mediaTypes[type].activeGroup(activeTrack_);
+  };
+  /**
+   * Setup PlaylistLoaders and Tracks for media groups (Audio, Subtitles,
+   * Closed-Captions) specified in the main manifest.
+   *
+   * @param {Object} settings
+   *        Object containing required information for setting up the media groups
+   * @param {Tech} settings.tech
+   *        The tech of the player
+   * @param {Object} settings.requestOptions
+   *        XHR request options used by the segment loaders
+   * @param {PlaylistLoader} settings.mainPlaylistLoader
+   *        PlaylistLoader for the main source
+   * @param {VhsHandler} settings.vhs
+   *        VHS SourceHandler
+   * @param {Object} settings.main
+   *        The parsed main manifest
+   * @param {Object} settings.mediaTypes
+   *        Object to store the loaders, tracks, and utility methods for each media type
+   * @param {Function} settings.excludePlaylist
+   *        Excludes the current rendition and forces a rendition switch.
+   * @function setupMediaGroups
+   */
+
+  const setupMediaGroups = settings => {
+    ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+      initialize[type](type, settings);
+    });
+    const {
+      mediaTypes,
+      mainPlaylistLoader,
+      tech,
+      vhs,
+      segmentLoaders: {
+        ['AUDIO']: audioSegmentLoader,
+        main: mainSegmentLoader
+      }
+    } = settings; // setup active group and track getters and change event handlers
+
+    ['AUDIO', 'SUBTITLES'].forEach(type => {
+      mediaTypes[type].activeGroup = activeGroup(type, settings);
+      mediaTypes[type].activeTrack = activeTrack[type](type, settings);
+      mediaTypes[type].onGroupChanged = onGroupChanged(type, settings);
+      mediaTypes[type].onGroupChanging = onGroupChanging(type, settings);
+      mediaTypes[type].onTrackChanged = onTrackChanged(type, settings);
+      mediaTypes[type].getActiveGroup = getActiveGroup(type, settings);
+    }); // DO NOT enable the default subtitle or caption track.
+    // DO enable the default audio track
+
+    const audioGroup = mediaTypes.AUDIO.activeGroup();
+    if (audioGroup) {
+      const groupId = (audioGroup.filter(group => group.default)[0] || audioGroup[0]).id;
+      mediaTypes.AUDIO.tracks[groupId].enabled = true;
+      mediaTypes.AUDIO.onGroupChanged();
+      mediaTypes.AUDIO.onTrackChanged();
+      const activeAudioGroup = mediaTypes.AUDIO.getActiveGroup(); // a similar check for handling setAudio on each loader is run again each time the
+      // track is changed, but needs to be handled here since the track may not be considered
+      // changed on the first call to onTrackChanged
+
+      if (!activeAudioGroup.playlistLoader) {
+        // either audio is muxed with video or the stream is audio only
+        mainSegmentLoader.setAudio(true);
+      } else {
+        // audio is demuxed
+        mainSegmentLoader.setAudio(false);
+        audioSegmentLoader.setAudio(true);
+      }
+    }
+    mainPlaylistLoader.on('mediachange', () => {
+      ['AUDIO', 'SUBTITLES'].forEach(type => mediaTypes[type].onGroupChanged());
+    });
+    mainPlaylistLoader.on('mediachanging', () => {
+      ['AUDIO', 'SUBTITLES'].forEach(type => mediaTypes[type].onGroupChanging());
+    }); // custom audio track change event handler for usage event
+
+    const onAudioTrackChanged = () => {
+      mediaTypes.AUDIO.onTrackChanged();
+      tech.trigger({
+        type: 'usage',
+        name: 'vhs-audio-change'
+      });
+    };
+    tech.audioTracks().addEventListener('change', onAudioTrackChanged);
+    tech.remoteTextTracks().addEventListener('change', mediaTypes.SUBTITLES.onTrackChanged);
+    vhs.on('dispose', () => {
+      tech.audioTracks().removeEventListener('change', onAudioTrackChanged);
+      tech.remoteTextTracks().removeEventListener('change', mediaTypes.SUBTITLES.onTrackChanged);
+    }); // clear existing audio tracks and add the ones we just created
+
+    tech.clearTracks('audio');
+    for (const id in mediaTypes.AUDIO.tracks) {
+      tech.audioTracks().addTrack(mediaTypes.AUDIO.tracks[id]);
+    }
+  };
+  /**
+   * Creates skeleton object used to store the loaders, tracks, and utility methods for each
+   * media type
+   *
+   * @return {Object}
+   *         Object to store the loaders, tracks, and utility methods for each media type
+   * @function createMediaTypes
+   */
+
+  const createMediaTypes = () => {
+    const mediaTypes = {};
+    ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+      mediaTypes[type] = {
+        groups: {},
+        tracks: {},
+        activePlaylistLoader: null,
+        activeGroup: noop,
+        activeTrack: noop,
+        getActiveGroup: noop,
+        onGroupChanged: noop,
+        onTrackChanged: noop,
+        lastTrack_: null,
+        logger_: logger(`MediaGroups[${type}]`)
+      };
+    });
+    return mediaTypes;
+  };
+
+  /**
+   * A utility class for setting properties and maintaining the state of the content steering manifest.
+   *
+   * Content Steering manifest format:
+   * VERSION: number (required) currently only version 1 is supported.
+   * TTL: number in seconds (optional) until the next content steering manifest reload.
+   * RELOAD-URI: string (optional) uri to fetch the next content steering manifest.
+   * SERVICE-LOCATION-PRIORITY or PATHWAY-PRIORITY a non empty array of unique string values.
+   * PATHWAY-CLONES: array (optional) (HLS only) pathway clone objects to copy from other playlists.
+   */
+
+  class SteeringManifest {
+    constructor() {
+      this.priority_ = [];
+      this.pathwayClones_ = new Map();
+    }
+    set version(number) {
+      // Only version 1 is currently supported for both DASH and HLS.
+      if (number === 1) {
+        this.version_ = number;
+      }
+    }
+    set ttl(seconds) {
+      // TTL = time-to-live, default = 300 seconds.
+      this.ttl_ = seconds || 300;
+    }
+    set reloadUri(uri) {
+      if (uri) {
+        // reload URI can be relative to the previous reloadUri.
+        this.reloadUri_ = resolveUrl(this.reloadUri_, uri);
+      }
+    }
+    set priority(array) {
+      // priority must be non-empty and unique values.
+      if (array && array.length) {
+        this.priority_ = array;
+      }
+    }
+    set pathwayClones(array) {
+      // pathwayClones must be non-empty.
+      if (array && array.length) {
+        this.pathwayClones_ = new Map(array.map(clone => [clone.ID, clone]));
+      }
+    }
+    get version() {
+      return this.version_;
+    }
+    get ttl() {
+      return this.ttl_;
+    }
+    get reloadUri() {
+      return this.reloadUri_;
+    }
+    get priority() {
+      return this.priority_;
+    }
+    get pathwayClones() {
+      return this.pathwayClones_;
+    }
+  }
+  /**
+   * This class represents a content steering manifest and associated state. See both HLS and DASH specifications.
+   * HLS: https://developer.apple.com/streaming/HLSContentSteeringSpecification.pdf and
+   * https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/ section 4.4.6.6.
+   * DASH: https://dashif.org/docs/DASH-IF-CTS-00XX-Content-Steering-Community-Review.pdf
+   *
+   * @param {function} xhr for making a network request from the browser.
+   * @param {function} bandwidth for fetching the current bandwidth from the main segment loader.
+   */
+
+  class ContentSteeringController extends videojs.EventTarget {
+    constructor(xhr, bandwidth) {
+      super();
+      this.currentPathway = null;
+      this.defaultPathway = null;
+      this.queryBeforeStart = false;
+      this.availablePathways_ = new Set();
+      this.steeringManifest = new SteeringManifest();
+      this.proxyServerUrl_ = null;
+      this.manifestType_ = null;
+      this.ttlTimeout_ = null;
+      this.request_ = null;
+      this.currentPathwayClones = new Map();
+      this.nextPathwayClones = new Map();
+      this.excludedSteeringManifestURLs = new Set();
+      this.logger_ = logger('Content Steering');
+      this.xhr_ = xhr;
+      this.getBandwidth_ = bandwidth;
+    }
+    /**
+     * Assigns the content steering tag properties to the steering controller
+     *
+     * @param {string} baseUrl the baseURL from the main manifest for resolving the steering manifest url
+     * @param {Object} steeringTag the content steering tag from the main manifest
+     */
+
+    assignTagProperties(baseUrl, steeringTag) {
+      this.manifestType_ = steeringTag.serverUri ? 'HLS' : 'DASH'; // serverUri is HLS serverURL is DASH
+
+      const steeringUri = steeringTag.serverUri || steeringTag.serverURL;
+      if (!steeringUri) {
+        this.logger_(`steering manifest URL is ${steeringUri}, cannot request steering manifest.`);
+        this.trigger('error');
+        return;
+      } // Content steering manifests can be encoded as a data URI. We can decode, parse and return early if that's the case.
+
+      if (steeringUri.startsWith('data:')) {
+        this.decodeDataUriManifest_(steeringUri.substring(steeringUri.indexOf(',') + 1));
+        return;
+      } // reloadUri is the resolution of the main manifest URL and steering URL.
+
+      this.steeringManifest.reloadUri = resolveUrl(baseUrl, steeringUri); // pathwayId is HLS defaultServiceLocation is DASH
+
+      this.defaultPathway = steeringTag.pathwayId || steeringTag.defaultServiceLocation; // currently only DASH supports the following properties on <ContentSteering> tags.
+
+      this.queryBeforeStart = steeringTag.queryBeforeStart;
+      this.proxyServerUrl_ = steeringTag.proxyServerURL; // trigger a steering event if we have a pathway from the content steering tag.
+      // this tells VHS which segment pathway to start with.
+      // If queryBeforeStart is true we need to wait for the steering manifest response.
+
+      if (this.defaultPathway && !this.queryBeforeStart) {
+        this.trigger('content-steering');
+      }
+    }
+    /**
+     * Requests the content steering manifest and parse the response. This should only be called after
+     * assignTagProperties was called with a content steering tag.
+     *
+     * @param {string} initialUri The optional uri to make the request with.
+     *    If set, the request should be made with exactly what is passed in this variable.
+     *    This scenario should only happen once on initalization.
+     */
+
+    requestSteeringManifest(initial) {
+      const reloadUri = this.steeringManifest.reloadUri;
+      if (!reloadUri) {
+        return;
+      } // We currently don't support passing MPD query parameters directly to the content steering URL as this requires
+      // ExtUrlQueryInfo tag support. See the DASH content steering spec section 8.1.
+      // This request URI accounts for manifest URIs that have been excluded.
+
+      const uri = initial ? reloadUri : this.getRequestURI(reloadUri); // If there are no valid manifest URIs, we should stop content steering.
+
+      if (!uri) {
+        this.logger_('No valid content steering manifest URIs. Stopping content steering.');
+        this.trigger('error');
+        this.dispose();
+        return;
+      }
+      this.request_ = this.xhr_({
+        uri,
+        requestType: 'content-steering-manifest'
+      }, (error, errorInfo) => {
+        if (error) {
+          // If the client receives HTTP 410 Gone in response to a manifest request,
+          // it MUST NOT issue another request for that URI for the remainder of the
+          // playback session. It MAY continue to use the most-recently obtained set
+          // of Pathways.
+          if (errorInfo.status === 410) {
+            this.logger_(`manifest request 410 ${error}.`);
+            this.logger_(`There will be no more content steering requests to ${uri} this session.`);
+            this.excludedSteeringManifestURLs.add(uri);
+            return;
+          } // If the client receives HTTP 429 Too Many Requests with a Retry-After
+          // header in response to a manifest request, it SHOULD wait until the time
+          // specified by the Retry-After header to reissue the request.
+
+          if (errorInfo.status === 429) {
+            const retrySeconds = errorInfo.responseHeaders['retry-after'];
+            this.logger_(`manifest request 429 ${error}.`);
+            this.logger_(`content steering will retry in ${retrySeconds} seconds.`);
+            this.startTTLTimeout_(parseInt(retrySeconds, 10));
+            return;
+          } // If the Steering Manifest cannot be loaded and parsed correctly, the
+          // client SHOULD continue to use the previous values and attempt to reload
+          // it after waiting for the previously-specified TTL (or 5 minutes if
+          // none).
+
+          this.logger_(`manifest failed to load ${error}.`);
+          this.startTTLTimeout_();
+          return;
+        }
+        const steeringManifestJson = JSON.parse(this.request_.responseText);
+        this.assignSteeringProperties_(steeringManifestJson);
+        this.startTTLTimeout_();
+      });
+    }
+    /**
+     * Set the proxy server URL and add the steering manifest url as a URI encoded parameter.
+     *
+     * @param {string} steeringUrl the steering manifest url
+     * @return the steering manifest url to a proxy server with all parameters set
+     */
+
+    setProxyServerUrl_(steeringUrl) {
+      const steeringUrlObject = new window.URL(steeringUrl);
+      const proxyServerUrlObject = new window.URL(this.proxyServerUrl_);
+      proxyServerUrlObject.searchParams.set('url', encodeURI(steeringUrlObject.toString()));
+      return this.setSteeringParams_(proxyServerUrlObject.toString());
+    }
+    /**
+     * Decodes and parses the data uri encoded steering manifest
+     *
+     * @param {string} dataUri the data uri to be decoded and parsed.
+     */
+
+    decodeDataUriManifest_(dataUri) {
+      const steeringManifestJson = JSON.parse(window.atob(dataUri));
+      this.assignSteeringProperties_(steeringManifestJson);
+    }
+    /**
+     * Set the HLS or DASH content steering manifest request query parameters. For example:
+     * _HLS_pathway="<CURRENT-PATHWAY-ID>" and _HLS_throughput=<THROUGHPUT>
+     * _DASH_pathway and _DASH_throughput
+     *
+     * @param {string} uri to add content steering server parameters to.
+     * @return a new uri as a string with the added steering query parameters.
+     */
+
+    setSteeringParams_(url) {
+      const urlObject = new window.URL(url);
+      const path = this.getPathway();
+      const networkThroughput = this.getBandwidth_();
+      if (path) {
+        const pathwayKey = `_${this.manifestType_}_pathway`;
+        urlObject.searchParams.set(pathwayKey, path);
+      }
+      if (networkThroughput) {
+        const throughputKey = `_${this.manifestType_}_throughput`;
+        urlObject.searchParams.set(throughputKey, networkThroughput);
+      }
+      return urlObject.toString();
+    }
+    /**
+     * Assigns the current steering manifest properties and to the SteeringManifest object
+     *
+     * @param {Object} steeringJson the raw JSON steering manifest
+     */
+
+    assignSteeringProperties_(steeringJson) {
+      this.steeringManifest.version = steeringJson.VERSION;
+      if (!this.steeringManifest.version) {
+        this.logger_(`manifest version is ${steeringJson.VERSION}, which is not supported.`);
+        this.trigger('error');
+        return;
+      }
+      this.steeringManifest.ttl = steeringJson.TTL;
+      this.steeringManifest.reloadUri = steeringJson['RELOAD-URI']; // HLS = PATHWAY-PRIORITY required. DASH = SERVICE-LOCATION-PRIORITY optional
+
+      this.steeringManifest.priority = steeringJson['PATHWAY-PRIORITY'] || steeringJson['SERVICE-LOCATION-PRIORITY']; // Pathway clones to be created/updated in HLS.
+      // See section 7.2 https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/
+
+      this.steeringManifest.pathwayClones = steeringJson['PATHWAY-CLONES'];
+      this.nextPathwayClones = this.steeringManifest.pathwayClones; // 1. apply first pathway from the array.
+      // 2. if first pathway doesn't exist in manifest, try next pathway.
+      //    a. if all pathways are exhausted, ignore the steering manifest priority.
+      // 3. if segments fail from an established pathway, try all variants/renditions, then exclude the failed pathway.
+      //    a. exclude a pathway for a minimum of the last TTL duration. Meaning, from the next steering response,
+      //       the excluded pathway will be ignored.
+      //       See excludePathway usage in excludePlaylist().
+      // If there are no available pathways, we need to stop content steering.
+
+      if (!this.availablePathways_.size) {
+        this.logger_('There are no available pathways for content steering. Ending content steering.');
+        this.trigger('error');
+        this.dispose();
+      }
+      const chooseNextPathway = pathwaysByPriority => {
+        for (const path of pathwaysByPriority) {
+          if (this.availablePathways_.has(path)) {
+            return path;
+          }
+        } // If no pathway matches, ignore the manifest and choose the first available.
+
+        return [...this.availablePathways_][0];
+      };
+      const nextPathway = chooseNextPathway(this.steeringManifest.priority);
+      if (this.currentPathway !== nextPathway) {
+        this.currentPathway = nextPathway;
+        this.trigger('content-steering');
+      }
+    }
+    /**
+     * Returns the pathway to use for steering decisions
+     *
+     * @return {string} returns the current pathway or the default
+     */
+
+    getPathway() {
+      return this.currentPathway || this.defaultPathway;
+    }
+    /**
+     * Chooses the manifest request URI based on proxy URIs and server URLs.
+     * Also accounts for exclusion on certain manifest URIs.
+     *
+     * @param {string} reloadUri the base uri before parameters
+     *
+     * @return {string} the final URI for the request to the manifest server.
+     */
+
+    getRequestURI(reloadUri) {
+      if (!reloadUri) {
+        return null;
+      }
+      const isExcluded = uri => this.excludedSteeringManifestURLs.has(uri);
+      if (this.proxyServerUrl_) {
+        const proxyURI = this.setProxyServerUrl_(reloadUri);
+        if (!isExcluded(proxyURI)) {
+          return proxyURI;
+        }
+      }
+      const steeringURI = this.setSteeringParams_(reloadUri);
+      if (!isExcluded(steeringURI)) {
+        return steeringURI;
+      } // Return nothing if all valid manifest URIs are excluded.
+
+      return null;
+    }
+    /**
+     * Start the timeout for re-requesting the steering manifest at the TTL interval.
+     *
+     * @param {number} ttl time in seconds of the timeout. Defaults to the
+     *        ttl interval in the steering manifest
+     */
+
+    startTTLTimeout_(ttl = this.steeringManifest.ttl) {
+      // 300 (5 minutes) is the default value.
+      const ttlMS = ttl * 1000;
+      this.ttlTimeout_ = window.setTimeout(() => {
+        this.requestSteeringManifest();
+      }, ttlMS);
+    }
+    /**
+     * Clear the TTL timeout if necessary.
+     */
+
+    clearTTLTimeout_() {
+      window.clearTimeout(this.ttlTimeout_);
+      this.ttlTimeout_ = null;
+    }
+    /**
+     * aborts any current steering xhr and sets the current request object to null
+     */
+
+    abort() {
+      if (this.request_) {
+        this.request_.abort();
+      }
+      this.request_ = null;
+    }
+    /**
+     * aborts steering requests clears the ttl timeout and resets all properties.
+     */
+
+    dispose() {
+      this.off('content-steering');
+      this.off('error');
+      this.abort();
+      this.clearTTLTimeout_();
+      this.currentPathway = null;
+      this.defaultPathway = null;
+      this.queryBeforeStart = null;
+      this.proxyServerUrl_ = null;
+      this.manifestType_ = null;
+      this.ttlTimeout_ = null;
+      this.request_ = null;
+      this.excludedSteeringManifestURLs = new Set();
+      this.availablePathways_ = new Set();
+      this.steeringManifest = new SteeringManifest();
+    }
+    /**
+     * adds a pathway to the available pathways set
+     *
+     * @param {string} pathway the pathway string to add
+     */
+
+    addAvailablePathway(pathway) {
+      if (pathway) {
+        this.availablePathways_.add(pathway);
+      }
+    }
+    /**
+     * Clears all pathways from the available pathways set
+     */
+
+    clearAvailablePathways() {
+      this.availablePathways_.clear();
+    }
+    /**
+     * Removes a pathway from the available pathways set.
+     */
+
+    excludePathway(pathway) {
+      return this.availablePathways_.delete(pathway);
+    }
+    /**
+     * Checks the refreshed DASH manifest content steering tag for changes.
+     *
+     * @param {string} baseURL new steering tag on DASH manifest refresh
+     * @param {Object} newTag the new tag to check for changes
+     * @return a true or false whether the new tag has different values
+     */
+
+    didDASHTagChange(baseURL, newTag) {
+      return !newTag && this.steeringManifest.reloadUri || newTag && (resolveUrl(baseURL, newTag.serverURL) !== this.steeringManifest.reloadUri || newTag.defaultServiceLocation !== this.defaultPathway || newTag.queryBeforeStart !== this.queryBeforeStart || newTag.proxyServerURL !== this.proxyServerUrl_);
+    }
+    getAvailablePathways() {
+      return this.availablePathways_;
+    }
+  }
+
+  /**
+   * @file playlist-controller.js
+   */
+  const ABORT_EARLY_EXCLUSION_SECONDS = 10;
+  let Vhs$1; // SegmentLoader stats that need to have each loader's
+  // values summed to calculate the final value
+
+  const loaderStats = ['mediaRequests', 'mediaRequestsAborted', 'mediaRequestsTimedout', 'mediaRequestsErrored', 'mediaTransferDuration', 'mediaBytesTransferred', 'mediaAppends'];
+  const sumLoaderStat = function (stat) {
+    return this.audioSegmentLoader_[stat] + this.mainSegmentLoader_[stat];
+  };
+  const shouldSwitchToMedia = function ({
+    currentPlaylist,
+    buffered,
+    currentTime,
+    nextPlaylist,
+    bufferLowWaterLine,
+    bufferHighWaterLine,
+    duration,
+    bufferBasedABR,
+    log
+  }) {
+    // we have no other playlist to switch to
+    if (!nextPlaylist) {
+      videojs.log.warn('We received no playlist to switch to. Please check your stream.');
+      return false;
+    }
+    const sharedLogLine = `allowing switch ${currentPlaylist && currentPlaylist.id || 'null'} -> ${nextPlaylist.id}`;
+    if (!currentPlaylist) {
+      log(`${sharedLogLine} as current playlist is not set`);
+      return true;
+    } // no need to switch if playlist is the same
+
+    if (nextPlaylist.id === currentPlaylist.id) {
+      return false;
+    } // determine if current time is in a buffered range.
+
+    const isBuffered = Boolean(findRange(buffered, currentTime).length); // If the playlist is live, then we want to not take low water line into account.
+    // This is because in LIVE, the player plays 3 segments from the end of the
+    // playlist, and if `BUFFER_LOW_WATER_LINE` is greater than the duration availble
+    // in those segments, a viewer will never experience a rendition upswitch.
+
+    if (!currentPlaylist.endList) {
+      // For LLHLS live streams, don't switch renditions before playback has started, as it almost
+      // doubles the time to first playback.
+      if (!isBuffered && typeof currentPlaylist.partTargetDuration === 'number') {
+        log(`not ${sharedLogLine} as current playlist is live llhls, but currentTime isn't in buffered.`);
+        return false;
+      }
+      log(`${sharedLogLine} as current playlist is live`);
+      return true;
+    }
+    const forwardBuffer = timeAheadOf(buffered, currentTime);
+    const maxBufferLowWaterLine = bufferBasedABR ? Config.EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE : Config.MAX_BUFFER_LOW_WATER_LINE; // For the same reason as LIVE, we ignore the low water line when the VOD
+    // duration is below the max potential low water line
+
+    if (duration < maxBufferLowWaterLine) {
+      log(`${sharedLogLine} as duration < max low water line (${duration} < ${maxBufferLowWaterLine})`);
+      return true;
+    }
+    const nextBandwidth = nextPlaylist.attributes.BANDWIDTH;
+    const currBandwidth = currentPlaylist.attributes.BANDWIDTH; // when switching down, if our buffer is lower than the high water line,
+    // we can switch down
+
+    if (nextBandwidth < currBandwidth && (!bufferBasedABR || forwardBuffer < bufferHighWaterLine)) {
+      let logLine = `${sharedLogLine} as next bandwidth < current bandwidth (${nextBandwidth} < ${currBandwidth})`;
+      if (bufferBasedABR) {
+        logLine += ` and forwardBuffer < bufferHighWaterLine (${forwardBuffer} < ${bufferHighWaterLine})`;
+      }
+      log(logLine);
+      return true;
+    } // and if our buffer is higher than the low water line,
+    // we can switch up
+
+    if ((!bufferBasedABR || nextBandwidth > currBandwidth) && forwardBuffer >= bufferLowWaterLine) {
+      let logLine = `${sharedLogLine} as forwardBuffer >= bufferLowWaterLine (${forwardBuffer} >= ${bufferLowWaterLine})`;
+      if (bufferBasedABR) {
+        logLine += ` and next bandwidth > current bandwidth (${nextBandwidth} > ${currBandwidth})`;
+      }
+      log(logLine);
+      return true;
+    }
+    log(`not ${sharedLogLine} as no switching criteria met`);
+    return false;
+  };
+  /**
+   * the main playlist controller controller all interactons
+   * between playlists and segmentloaders. At this time this mainly
+   * involves a main playlist and a series of audio playlists
+   * if they are available
+   *
+   * @class PlaylistController
+   * @extends videojs.EventTarget
+   */
+
+  class PlaylistController extends videojs.EventTarget {
+    constructor(options) {
+      super();
+      const {
+        src,
+        withCredentials,
+        tech,
+        bandwidth,
+        externVhs,
+        useCueTags,
+        playlistExclusionDuration,
+        enableLowInitialPlaylist,
+        sourceType,
+        cacheEncryptionKeys,
+        bufferBasedABR,
+        leastPixelDiffSelector,
+        captionServices
+      } = options;
+      if (!src) {
+        throw new Error('A non-empty playlist URL or JSON manifest string is required');
+      }
+      let {
+        maxPlaylistRetries
+      } = options;
+      if (maxPlaylistRetries === null || typeof maxPlaylistRetries === 'undefined') {
+        maxPlaylistRetries = Infinity;
+      }
+      Vhs$1 = externVhs;
+      this.bufferBasedABR = Boolean(bufferBasedABR);
+      this.leastPixelDiffSelector = Boolean(leastPixelDiffSelector);
+      this.withCredentials = withCredentials;
+      this.tech_ = tech;
+      this.vhs_ = tech.vhs;
+      this.sourceType_ = sourceType;
+      this.useCueTags_ = useCueTags;
+      this.playlistExclusionDuration = playlistExclusionDuration;
+      this.maxPlaylistRetries = maxPlaylistRetries;
+      this.enableLowInitialPlaylist = enableLowInitialPlaylist;
+      if (this.useCueTags_) {
+        this.cueTagsTrack_ = this.tech_.addTextTrack('metadata', 'ad-cues');
+        this.cueTagsTrack_.inBandMetadataTrackDispatchType = '';
+      }
+      this.requestOptions_ = {
+        withCredentials,
+        maxPlaylistRetries,
+        timeout: null
+      };
+      this.on('error', this.pauseLoading);
+      this.mediaTypes_ = createMediaTypes();
+      this.mediaSource = new window.MediaSource();
+      this.handleDurationChange_ = this.handleDurationChange_.bind(this);
+      this.handleSourceOpen_ = this.handleSourceOpen_.bind(this);
+      this.handleSourceEnded_ = this.handleSourceEnded_.bind(this);
+      this.mediaSource.addEventListener('durationchange', this.handleDurationChange_); // load the media source into the player
+
+      this.mediaSource.addEventListener('sourceopen', this.handleSourceOpen_);
+      this.mediaSource.addEventListener('sourceended', this.handleSourceEnded_); // we don't have to handle sourceclose since dispose will handle termination of
+      // everything, and the MediaSource should not be detached without a proper disposal
+
+      this.seekable_ = createTimeRanges();
+      this.hasPlayed_ = false;
+      this.syncController_ = new SyncController(options);
+      this.segmentMetadataTrack_ = tech.addRemoteTextTrack({
+        kind: 'metadata',
+        label: 'segment-metadata'
+      }, false).track;
+      this.decrypter_ = new Decrypter();
+      this.sourceUpdater_ = new SourceUpdater(this.mediaSource);
+      this.inbandTextTracks_ = {};
+      this.timelineChangeController_ = new TimelineChangeController();
+      this.keyStatusMap_ = new Map();
+      const segmentLoaderSettings = {
+        vhs: this.vhs_,
+        parse708captions: options.parse708captions,
+        useDtsForTimestampOffset: options.useDtsForTimestampOffset,
+        captionServices,
+        mediaSource: this.mediaSource,
+        currentTime: this.tech_.currentTime.bind(this.tech_),
+        seekable: () => this.seekable(),
+        seeking: () => this.tech_.seeking(),
+        duration: () => this.duration(),
+        hasPlayed: () => this.hasPlayed_,
+        goalBufferLength: () => this.goalBufferLength(),
+        bandwidth,
+        syncController: this.syncController_,
+        decrypter: this.decrypter_,
+        sourceType: this.sourceType_,
+        inbandTextTracks: this.inbandTextTracks_,
+        cacheEncryptionKeys,
+        sourceUpdater: this.sourceUpdater_,
+        timelineChangeController: this.timelineChangeController_,
+        exactManifestTimings: options.exactManifestTimings,
+        addMetadataToTextTrack: this.addMetadataToTextTrack.bind(this)
+      }; // The source type check not only determines whether a special DASH playlist loader
+      // should be used, but also covers the case where the provided src is a vhs-json
+      // manifest object (instead of a URL). In the case of vhs-json, the default
+      // PlaylistLoader should be used.
+
+      this.mainPlaylistLoader_ = this.sourceType_ === 'dash' ? new DashPlaylistLoader(src, this.vhs_, merge(this.requestOptions_, {
+        addMetadataToTextTrack: this.addMetadataToTextTrack.bind(this)
+      })) : new PlaylistLoader(src, this.vhs_, merge(this.requestOptions_, {
+        addDateRangesToTextTrack: this.addDateRangesToTextTrack_.bind(this)
+      }));
+      this.setupMainPlaylistLoaderListeners_(); // setup segment loaders
+      // combined audio/video or just video when alternate audio track is selected
+
+      this.mainSegmentLoader_ = new SegmentLoader(merge(segmentLoaderSettings, {
+        segmentMetadataTrack: this.segmentMetadataTrack_,
+        loaderType: 'main'
+      }), options); // alternate audio track
+
+      this.audioSegmentLoader_ = new SegmentLoader(merge(segmentLoaderSettings, {
+        loaderType: 'audio'
+      }), options);
+      this.subtitleSegmentLoader_ = new VTTSegmentLoader(merge(segmentLoaderSettings, {
+        loaderType: 'vtt',
+        featuresNativeTextTracks: this.tech_.featuresNativeTextTracks,
+        loadVttJs: () => new Promise((resolve, reject) => {
+          function onLoad() {
+            tech.off('vttjserror', onError);
+            resolve();
+          }
+          function onError() {
+            tech.off('vttjsloaded', onLoad);
+            reject();
+          }
+          tech.one('vttjsloaded', onLoad);
+          tech.one('vttjserror', onError); // safe to call multiple times, script will be loaded only once:
+
+          tech.addWebVttScript_();
+        })
+      }), options);
+      const getBandwidth = () => {
+        return this.mainSegmentLoader_.bandwidth;
+      };
+      this.contentSteeringController_ = new ContentSteeringController(this.vhs_.xhr, getBandwidth);
+      this.setupSegmentLoaderListeners_();
+      if (this.bufferBasedABR) {
+        this.mainPlaylistLoader_.one('loadedplaylist', () => this.startABRTimer_());
+        this.tech_.on('pause', () => this.stopABRTimer_());
+        this.tech_.on('play', () => this.startABRTimer_());
+      } // Create SegmentLoader stat-getters
+      // mediaRequests_
+      // mediaRequestsAborted_
+      // mediaRequestsTimedout_
+      // mediaRequestsErrored_
+      // mediaTransferDuration_
+      // mediaBytesTransferred_
+      // mediaAppends_
+
+      loaderStats.forEach(stat => {
+        this[stat + '_'] = sumLoaderStat.bind(this, stat);
+      });
+      this.logger_ = logger('pc');
+      this.triggeredFmp4Usage = false;
+      if (this.tech_.preload() === 'none') {
+        this.loadOnPlay_ = () => {
+          this.loadOnPlay_ = null;
+          this.mainPlaylistLoader_.load();
+        };
+        this.tech_.one('play', this.loadOnPlay_);
+      } else {
+        this.mainPlaylistLoader_.load();
+      }
+      this.timeToLoadedData__ = -1;
+      this.mainAppendsToLoadedData__ = -1;
+      this.audioAppendsToLoadedData__ = -1;
+      const event = this.tech_.preload() === 'none' ? 'play' : 'loadstart'; // start the first frame timer on loadstart or play (for preload none)
+
+      this.tech_.one(event, () => {
+        const timeToLoadedDataStart = Date.now();
+        this.tech_.one('loadeddata', () => {
+          this.timeToLoadedData__ = Date.now() - timeToLoadedDataStart;
+          this.mainAppendsToLoadedData__ = this.mainSegmentLoader_.mediaAppends;
+          this.audioAppendsToLoadedData__ = this.audioSegmentLoader_.mediaAppends;
+        });
+      });
+    }
+    mainAppendsToLoadedData_() {
+      return this.mainAppendsToLoadedData__;
+    }
+    audioAppendsToLoadedData_() {
+      return this.audioAppendsToLoadedData__;
+    }
+    appendsToLoadedData_() {
+      const main = this.mainAppendsToLoadedData_();
+      const audio = this.audioAppendsToLoadedData_();
+      if (main === -1 || audio === -1) {
+        return -1;
+      }
+      return main + audio;
+    }
+    timeToLoadedData_() {
+      return this.timeToLoadedData__;
+    }
+    /**
+     * Run selectPlaylist and switch to the new playlist if we should
+     *
+     * @param {string} [reason=abr] a reason for why the ABR check is made
+     * @private
+     */
+
+    checkABR_(reason = 'abr') {
+      const nextPlaylist = this.selectPlaylist();
+      if (nextPlaylist && this.shouldSwitchToMedia_(nextPlaylist)) {
+        this.switchMedia_(nextPlaylist, reason);
+      }
+    }
+    switchMedia_(playlist, cause, delay) {
+      const oldMedia = this.media();
+      const oldId = oldMedia && (oldMedia.id || oldMedia.uri);
+      const newId = playlist && (playlist.id || playlist.uri);
+      if (oldId && oldId !== newId) {
+        this.logger_(`switch media ${oldId} -> ${newId} from ${cause}`);
+        this.tech_.trigger({
+          type: 'usage',
+          name: `vhs-rendition-change-${cause}`
+        });
+      }
+      this.mainPlaylistLoader_.media(playlist, delay);
+    }
+    /**
+     * A function that ensures we switch our playlists inside of `mediaTypes`
+     * to match the current `serviceLocation` provided by the contentSteering controller.
+     * We want to check media types of `AUDIO`, `SUBTITLES`, and `CLOSED-CAPTIONS`.
+     *
+     * This should only be called on a DASH playback scenario while using content steering.
+     * This is necessary due to differences in how media in HLS manifests are generally tied to
+     * a video playlist, where in DASH that is not always the case.
+     */
+
+    switchMediaForDASHContentSteering_() {
+      ['AUDIO', 'SUBTITLES', 'CLOSED-CAPTIONS'].forEach(type => {
+        const mediaType = this.mediaTypes_[type];
+        const activeGroup = mediaType ? mediaType.activeGroup() : null;
+        const pathway = this.contentSteeringController_.getPathway();
+        if (activeGroup && pathway) {
+          // activeGroup can be an array or a single group
+          const mediaPlaylists = activeGroup.length ? activeGroup[0].playlists : activeGroup.playlists;
+          const dashMediaPlaylists = mediaPlaylists.filter(p => p.attributes.serviceLocation === pathway); // Switch the current active playlist to the correct CDN
+
+          if (dashMediaPlaylists.length) {
+            this.mediaTypes_[type].activePlaylistLoader.media(dashMediaPlaylists[0]);
+          }
+        }
+      });
+    }
+    /**
+     * Start a timer that periodically calls checkABR_
+     *
+     * @private
+     */
+
+    startABRTimer_() {
+      this.stopABRTimer_();
+      this.abrTimer_ = window.setInterval(() => this.checkABR_(), 250);
+    }
+    /**
+     * Stop the timer that periodically calls checkABR_
+     *
+     * @private
+     */
+
+    stopABRTimer_() {
+      // if we're scrubbing, we don't need to pause.
+      // This getter will be added to Video.js in version 7.11.
+      if (this.tech_.scrubbing && this.tech_.scrubbing()) {
+        return;
+      }
+      window.clearInterval(this.abrTimer_);
+      this.abrTimer_ = null;
+    }
+    /**
+     * Get a list of playlists for the currently selected audio playlist
+     *
+     * @return {Array} the array of audio playlists
+     */
+
+    getAudioTrackPlaylists_() {
+      const main = this.main();
+      const defaultPlaylists = main && main.playlists || []; // if we don't have any audio groups then we can only
+      // assume that the audio tracks are contained in main
+      // playlist array, use that or an empty array.
+
+      if (!main || !main.mediaGroups || !main.mediaGroups.AUDIO) {
+        return defaultPlaylists;
+      }
+      const AUDIO = main.mediaGroups.AUDIO;
+      const groupKeys = Object.keys(AUDIO);
+      let track; // get the current active track
+
+      if (Object.keys(this.mediaTypes_.AUDIO.groups).length) {
+        track = this.mediaTypes_.AUDIO.activeTrack(); // or get the default track from main if mediaTypes_ isn't setup yet
+      } else {
+        // default group is `main` or just the first group.
+        const defaultGroup = AUDIO.main || groupKeys.length && AUDIO[groupKeys[0]];
+        for (const label in defaultGroup) {
+          if (defaultGroup[label].default) {
+            track = {
+              label
+            };
+            break;
+          }
+        }
+      } // no active track no playlists.
+
+      if (!track) {
+        return defaultPlaylists;
+      }
+      const playlists = []; // get all of the playlists that are possible for the
+      // active track.
+
+      for (const group in AUDIO) {
+        if (AUDIO[group][track.label]) {
+          const properties = AUDIO[group][track.label];
+          if (properties.playlists && properties.playlists.length) {
+            playlists.push.apply(playlists, properties.playlists);
+          } else if (properties.uri) {
+            playlists.push(properties);
+          } else if (main.playlists.length) {
+            // if an audio group does not have a uri
+            // see if we have main playlists that use it as a group.
+            // if we do then add those to the playlists list.
+            for (let i = 0; i < main.playlists.length; i++) {
+              const playlist = main.playlists[i];
+              if (playlist.attributes && playlist.attributes.AUDIO && playlist.attributes.AUDIO === group) {
+                playlists.push(playlist);
+              }
+            }
+          }
+        }
+      }
+      if (!playlists.length) {
+        return defaultPlaylists;
+      }
+      return playlists;
+    }
+    /**
+     * Register event handlers on the main playlist loader. A helper
+     * function for construction time.
+     *
+     * @private
+     */
+
+    setupMainPlaylistLoaderListeners_() {
+      this.mainPlaylistLoader_.on('loadedmetadata', () => {
+        const media = this.mainPlaylistLoader_.media();
+        const requestTimeout = media.targetDuration * 1.5 * 1000; // If we don't have any more available playlists, we don't want to
+        // timeout the request.
+
+        if (isLowestEnabledRendition(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.media())) {
+          this.requestOptions_.timeout = 0;
+        } else {
+          this.requestOptions_.timeout = requestTimeout;
+        } // if this isn't a live video and preload permits, start
+        // downloading segments
+
+        if (media.endList && this.tech_.preload() !== 'none') {
+          this.mainSegmentLoader_.playlist(media, this.requestOptions_);
+          this.mainSegmentLoader_.load();
+        }
+        setupMediaGroups({
+          sourceType: this.sourceType_,
+          segmentLoaders: {
+            AUDIO: this.audioSegmentLoader_,
+            SUBTITLES: this.subtitleSegmentLoader_,
+            main: this.mainSegmentLoader_
+          },
+          tech: this.tech_,
+          requestOptions: this.requestOptions_,
+          mainPlaylistLoader: this.mainPlaylistLoader_,
+          vhs: this.vhs_,
+          main: this.main(),
+          mediaTypes: this.mediaTypes_,
+          excludePlaylist: this.excludePlaylist.bind(this)
+        });
+        this.triggerPresenceUsage_(this.main(), media);
+        this.setupFirstPlay();
+        if (!this.mediaTypes_.AUDIO.activePlaylistLoader || this.mediaTypes_.AUDIO.activePlaylistLoader.media()) {
+          this.trigger('selectedinitialmedia');
+        } else {
+          // We must wait for the active audio playlist loader to
+          // finish setting up before triggering this event so the
+          // representations API and EME setup is correct
+          this.mediaTypes_.AUDIO.activePlaylistLoader.one('loadedmetadata', () => {
+            this.trigger('selectedinitialmedia');
+          });
+        }
+      });
+      this.mainPlaylistLoader_.on('loadedplaylist', () => {
+        if (this.loadOnPlay_) {
+          this.tech_.off('play', this.loadOnPlay_);
+        }
+        let updatedPlaylist = this.mainPlaylistLoader_.media();
+        if (!updatedPlaylist) {
+          // Add content steering listeners on first load and init.
+          this.attachContentSteeringListeners_();
+          this.initContentSteeringController_(); // exclude any variants that are not supported by the browser before selecting
+          // an initial media as the playlist selectors do not consider browser support
+
+          this.excludeUnsupportedVariants_();
+          let selectedMedia;
+          if (this.enableLowInitialPlaylist) {
+            selectedMedia = this.selectInitialPlaylist();
+          }
+          if (!selectedMedia) {
+            selectedMedia = this.selectPlaylist();
+          }
+          if (!selectedMedia || !this.shouldSwitchToMedia_(selectedMedia)) {
+            return;
+          }
+          this.initialMedia_ = selectedMedia;
+          this.switchMedia_(this.initialMedia_, 'initial'); // Under the standard case where a source URL is provided, loadedplaylist will
+          // fire again since the playlist will be requested. In the case of vhs-json
+          // (where the manifest object is provided as the source), when the media
+          // playlist's `segments` list is already available, a media playlist won't be
+          // requested, and loadedplaylist won't fire again, so the playlist handler must be
+          // called on its own here.
+
+          const haveJsonSource = this.sourceType_ === 'vhs-json' && this.initialMedia_.segments;
+          if (!haveJsonSource) {
+            return;
+          }
+          updatedPlaylist = this.initialMedia_;
+        }
+        this.handleUpdatedMediaPlaylist(updatedPlaylist);
+      });
+      this.mainPlaylistLoader_.on('error', () => {
+        const error = this.mainPlaylistLoader_.error;
+        this.excludePlaylist({
+          playlistToExclude: error.playlist,
+          error
+        });
+      });
+      this.mainPlaylistLoader_.on('mediachanging', () => {
+        this.mainSegmentLoader_.abort();
+        this.mainSegmentLoader_.pause();
+      });
+      this.mainPlaylistLoader_.on('mediachange', () => {
+        const media = this.mainPlaylistLoader_.media();
+        const requestTimeout = media.targetDuration * 1.5 * 1000; // If we don't have any more available playlists, we don't want to
+        // timeout the request.
+
+        if (isLowestEnabledRendition(this.mainPlaylistLoader_.main, this.mainPlaylistLoader_.media())) {
+          this.requestOptions_.timeout = 0;
+        } else {
+          this.requestOptions_.timeout = requestTimeout;
+        }
+        if (this.sourceType_ === 'dash') {
+          // we don't want to re-request the same hls playlist right after it was changed
+          this.mainPlaylistLoader_.load();
+        } // TODO: Create a new event on the PlaylistLoader that signals
+        // that the segments have changed in some way and use that to
+        // update the SegmentLoader instead of doing it twice here and
+        // on `loadedplaylist`
+
+        this.mainSegmentLoader_.pause();
+        this.mainSegmentLoader_.playlist(media, this.requestOptions_);
+        if (this.waitingForFastQualityPlaylistReceived_) {
+          this.runFastQualitySwitch_();
+        } else {
+          this.mainSegmentLoader_.load();
+        }
+        this.tech_.trigger({
+          type: 'mediachange',
+          bubbles: true
+        });
+      });
+      this.mainPlaylistLoader_.on('playlistunchanged', () => {
+        const updatedPlaylist = this.mainPlaylistLoader_.media(); // ignore unchanged playlists that have already been
+        // excluded for not-changing. We likely just have a really slowly updating
+        // playlist.
+
+        if (updatedPlaylist.lastExcludeReason_ === 'playlist-unchanged') {
+          return;
+        }
+        const playlistOutdated = this.stuckAtPlaylistEnd_(updatedPlaylist);
+        if (playlistOutdated) {
+          // Playlist has stopped updating and we're stuck at its end. Try to
+          // exclude it and switch to another playlist in the hope that that
+          // one is updating (and give the player a chance to re-adjust to the
+          // safe live point).
+          this.excludePlaylist({
+            error: {
+              message: 'Playlist no longer updating.',
+              reason: 'playlist-unchanged'
+            }
+          }); // useful for monitoring QoS
+
+          this.tech_.trigger('playliststuck');
+        }
+      });
+      this.mainPlaylistLoader_.on('renditiondisabled', () => {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-rendition-disabled'
+        });
+      });
+      this.mainPlaylistLoader_.on('renditionenabled', () => {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-rendition-enabled'
+        });
+      });
+    }
+    /**
+     * Given an updated media playlist (whether it was loaded for the first time, or
+     * refreshed for live playlists), update any relevant properties and state to reflect
+     * changes in the media that should be accounted for (e.g., cues and duration).
+     *
+     * @param {Object} updatedPlaylist the updated media playlist object
+     *
+     * @private
+     */
+
+    handleUpdatedMediaPlaylist(updatedPlaylist) {
+      if (this.useCueTags_) {
+        this.updateAdCues_(updatedPlaylist);
+      } // TODO: Create a new event on the PlaylistLoader that signals
+      // that the segments have changed in some way and use that to
+      // update the SegmentLoader instead of doing it twice here and
+      // on `mediachange`
+
+      this.mainSegmentLoader_.pause();
+      this.mainSegmentLoader_.playlist(updatedPlaylist, this.requestOptions_);
+      if (this.waitingForFastQualityPlaylistReceived_) {
+        this.runFastQualitySwitch_();
+      }
+      this.updateDuration(!updatedPlaylist.endList); // If the player isn't paused, ensure that the segment loader is running,
+      // as it is possible that it was temporarily stopped while waiting for
+      // a playlist (e.g., in case the playlist errored and we re-requested it).
+
+      if (!this.tech_.paused()) {
+        this.mainSegmentLoader_.load();
+        if (this.audioSegmentLoader_) {
+          this.audioSegmentLoader_.load();
+        }
+      }
+    }
+    /**
+     * A helper function for triggerring presence usage events once per source
+     *
+     * @private
+     */
+
+    triggerPresenceUsage_(main, media) {
+      const mediaGroups = main.mediaGroups || {};
+      let defaultDemuxed = true;
+      const audioGroupKeys = Object.keys(mediaGroups.AUDIO);
+      for (const mediaGroup in mediaGroups.AUDIO) {
+        for (const label in mediaGroups.AUDIO[mediaGroup]) {
+          const properties = mediaGroups.AUDIO[mediaGroup][label];
+          if (!properties.uri) {
+            defaultDemuxed = false;
+          }
+        }
+      }
+      if (defaultDemuxed) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-demuxed'
+        });
+      }
+      if (Object.keys(mediaGroups.SUBTITLES).length) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-webvtt'
+        });
+      }
+      if (Vhs$1.Playlist.isAes(media)) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-aes'
+        });
+      }
+      if (audioGroupKeys.length && Object.keys(mediaGroups.AUDIO[audioGroupKeys[0]]).length > 1) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-alternate-audio'
+        });
+      }
+      if (this.useCueTags_) {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-playlist-cue-tags'
+        });
+      }
+    }
+    shouldSwitchToMedia_(nextPlaylist) {
+      const currentPlaylist = this.mainPlaylistLoader_.media() || this.mainPlaylistLoader_.pendingMedia_;
+      const currentTime = this.tech_.currentTime();
+      const bufferLowWaterLine = this.bufferLowWaterLine();
+      const bufferHighWaterLine = this.bufferHighWaterLine();
+      const buffered = this.tech_.buffered();
+      return shouldSwitchToMedia({
+        buffered,
+        currentTime,
+        currentPlaylist,
+        nextPlaylist,
+        bufferLowWaterLine,
+        bufferHighWaterLine,
+        duration: this.duration(),
+        bufferBasedABR: this.bufferBasedABR,
+        log: this.logger_
+      });
+    }
+    /**
+     * Register event handlers on the segment loaders. A helper function
+     * for construction time.
+     *
+     * @private
+     */
+
+    setupSegmentLoaderListeners_() {
+      this.mainSegmentLoader_.on('bandwidthupdate', () => {
+        // Whether or not buffer based ABR or another ABR is used, on a bandwidth change it's
+        // useful to check to see if a rendition switch should be made.
+        this.checkABR_('bandwidthupdate');
+        this.tech_.trigger('bandwidthupdate');
+      });
+      this.mainSegmentLoader_.on('timeout', () => {
+        if (this.bufferBasedABR) {
+          // If a rendition change is needed, then it would've be done on `bandwidthupdate`.
+          // Here the only consideration is that for buffer based ABR there's no guarantee
+          // of an immediate switch (since the bandwidth is averaged with a timeout
+          // bandwidth value of 1), so force a load on the segment loader to keep it going.
+          this.mainSegmentLoader_.load();
+        }
+      }); // `progress` events are not reliable enough of a bandwidth measure to trigger buffer
+      // based ABR.
+
+      if (!this.bufferBasedABR) {
+        this.mainSegmentLoader_.on('progress', () => {
+          this.trigger('progress');
+        });
+      }
+      this.mainSegmentLoader_.on('error', () => {
+        const error = this.mainSegmentLoader_.error();
+        this.excludePlaylist({
+          playlistToExclude: error.playlist,
+          error
+        });
+      });
+      this.mainSegmentLoader_.on('appenderror', () => {
+        this.error = this.mainSegmentLoader_.error_;
+        this.trigger('error');
+      });
+      this.mainSegmentLoader_.on('syncinfoupdate', () => {
+        this.onSyncInfoUpdate_();
+      });
+      this.mainSegmentLoader_.on('timestampoffset', () => {
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-timestamp-offset'
+        });
+      });
+      this.audioSegmentLoader_.on('syncinfoupdate', () => {
+        this.onSyncInfoUpdate_();
+      });
+      this.audioSegmentLoader_.on('appenderror', () => {
+        this.error = this.audioSegmentLoader_.error_;
+        this.trigger('error');
+      });
+      this.mainSegmentLoader_.on('ended', () => {
+        this.logger_('main segment loader ended');
+        this.onEndOfStream();
+      });
+      this.mainSegmentLoader_.on('earlyabort', event => {
+        // never try to early abort with the new ABR algorithm
+        if (this.bufferBasedABR) {
+          return;
+        }
+        this.delegateLoaders_('all', ['abort']);
+        this.excludePlaylist({
+          error: {
+            message: 'Aborted early because there isn\'t enough bandwidth to complete ' + 'the request without rebuffering.'
+          },
+          playlistExclusionDuration: ABORT_EARLY_EXCLUSION_SECONDS
+        });
+      });
+      const updateCodecs = () => {
+        if (!this.sourceUpdater_.hasCreatedSourceBuffers()) {
+          return this.tryToCreateSourceBuffers_();
+        }
+        const codecs = this.getCodecsOrExclude_(); // no codecs means that the playlist was excluded
+
+        if (!codecs) {
+          return;
+        }
+        this.sourceUpdater_.addOrChangeSourceBuffers(codecs);
+      };
+      this.mainSegmentLoader_.on('trackinfo', updateCodecs);
+      this.audioSegmentLoader_.on('trackinfo', updateCodecs);
+      this.mainSegmentLoader_.on('fmp4', () => {
+        if (!this.triggeredFmp4Usage) {
+          this.tech_.trigger({
+            type: 'usage',
+            name: 'vhs-fmp4'
+          });
+          this.triggeredFmp4Usage = true;
+        }
+      });
+      this.audioSegmentLoader_.on('fmp4', () => {
+        if (!this.triggeredFmp4Usage) {
+          this.tech_.trigger({
+            type: 'usage',
+            name: 'vhs-fmp4'
+          });
+          this.triggeredFmp4Usage = true;
+        }
+      });
+      this.audioSegmentLoader_.on('ended', () => {
+        this.logger_('audioSegmentLoader ended');
+        this.onEndOfStream();
+      });
+    }
+    mediaSecondsLoaded_() {
+      return Math.max(this.audioSegmentLoader_.mediaSecondsLoaded + this.mainSegmentLoader_.mediaSecondsLoaded);
+    }
+    /**
+     * Call load on our SegmentLoaders
+     */
+
+    load() {
+      this.mainSegmentLoader_.load();
+      if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+        this.audioSegmentLoader_.load();
+      }
+      if (this.mediaTypes_.SUBTITLES.activePlaylistLoader) {
+        this.subtitleSegmentLoader_.load();
+      }
+    }
+    /**
+     * Re-tune playback quality level for the current player
+     * conditions. This method will perform destructive actions like removing
+     * already buffered content in order to readjust the currently active
+     * playlist quickly. This is good for manual quality changes
+     *
+     * @private
+     */
+
+    fastQualityChange_(media = this.selectPlaylist()) {
+      if (media && media === this.mainPlaylistLoader_.media()) {
+        this.logger_('skipping fastQualityChange because new media is same as old');
+        return;
+      }
+      this.switchMedia_(media, 'fast-quality'); // we would like to avoid race condition when we call fastQuality,
+      // reset everything and start loading segments from prev segments instead of new because new playlist is not received yet
+
+      this.waitingForFastQualityPlaylistReceived_ = true;
+    }
+    runFastQualitySwitch_() {
+      this.waitingForFastQualityPlaylistReceived_ = false; // Delete all buffered data to allow an immediate quality switch, then seek to give
+      // the browser a kick to remove any cached frames from the previous rendtion (.04 seconds
+      // ahead was roughly the minimum that will accomplish this across a variety of content
+      // in IE and Edge, but seeking in place is sufficient on all other browsers)
+      // Edge/IE bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14600375/
+      // Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=651904
+
+      this.mainSegmentLoader_.pause();
+      this.mainSegmentLoader_.resetEverything(() => {
+        this.tech_.setCurrentTime(this.tech_.currentTime());
+      }); // don't need to reset audio as it is reset when media changes
+    }
+    /**
+     * Begin playback.
+     */
+
+    play() {
+      if (this.setupFirstPlay()) {
+        return;
+      }
+      if (this.tech_.ended()) {
+        this.tech_.setCurrentTime(0);
+      }
+      if (this.hasPlayed_) {
+        this.load();
+      }
+      const seekable = this.tech_.seekable(); // if the viewer has paused and we fell out of the live window,
+      // seek forward to the live point
+
+      if (this.tech_.duration() === Infinity) {
+        if (this.tech_.currentTime() < seekable.start(0)) {
+          return this.tech_.setCurrentTime(seekable.end(seekable.length - 1));
+        }
+      }
+    }
+    /**
+     * Seek to the latest media position if this is a live video and the
+     * player and video are loaded and initialized.
+     */
+
+    setupFirstPlay() {
+      const media = this.mainPlaylistLoader_.media(); // Check that everything is ready to begin buffering for the first call to play
+      //  If 1) there is no active media
+      //     2) the player is paused
+      //     3) the first play has already been setup
+      // then exit early
+
+      if (!media || this.tech_.paused() || this.hasPlayed_) {
+        return false;
+      } // when the video is a live stream and/or has a start time
+
+      if (!media.endList || media.start) {
+        const seekable = this.seekable();
+        if (!seekable.length) {
+          // without a seekable range, the player cannot seek to begin buffering at the
+          // live or start point
+          return false;
+        }
+        const seekableEnd = seekable.end(0);
+        let startPoint = seekableEnd;
+        if (media.start) {
+          const offset = media.start.timeOffset;
+          if (offset < 0) {
+            startPoint = Math.max(seekableEnd + offset, seekable.start(0));
+          } else {
+            startPoint = Math.min(seekableEnd, offset);
+          }
+        } // trigger firstplay to inform the source handler to ignore the next seek event
+
+        this.trigger('firstplay'); // seek to the live point
+
+        this.tech_.setCurrentTime(startPoint);
+      }
+      this.hasPlayed_ = true; // we can begin loading now that everything is ready
+
+      this.load();
+      return true;
+    }
+    /**
+     * handle the sourceopen event on the MediaSource
+     *
+     * @private
+     */
+
+    handleSourceOpen_() {
+      // Only attempt to create the source buffer if none already exist.
+      // handleSourceOpen is also called when we are "re-opening" a source buffer
+      // after `endOfStream` has been called (in response to a seek for instance)
+      this.tryToCreateSourceBuffers_(); // if autoplay is enabled, begin playback. This is duplicative of
+      // code in video.js but is required because play() must be invoked
+      // *after* the media source has opened.
+
+      if (this.tech_.autoplay()) {
+        const playPromise = this.tech_.play(); // Catch/silence error when a pause interrupts a play request
+        // on browsers which return a promise
+
+        if (typeof playPromise !== 'undefined' && typeof playPromise.then === 'function') {
+          playPromise.then(null, e => {});
+        }
+      }
+      this.trigger('sourceopen');
+    }
+    /**
+     * handle the sourceended event on the MediaSource
+     *
+     * @private
+     */
+
+    handleSourceEnded_() {
+      if (!this.inbandTextTracks_.metadataTrack_) {
+        return;
+      }
+      const cues = this.inbandTextTracks_.metadataTrack_.cues;
+      if (!cues || !cues.length) {
+        return;
+      }
+      const duration = this.duration();
+      cues[cues.length - 1].endTime = isNaN(duration) || Math.abs(duration) === Infinity ? Number.MAX_VALUE : duration;
+    }
+    /**
+     * handle the durationchange event on the MediaSource
+     *
+     * @private
+     */
+
+    handleDurationChange_() {
+      this.tech_.trigger('durationchange');
+    }
+    /**
+     * Calls endOfStream on the media source when all active stream types have called
+     * endOfStream
+     *
+     * @param {string} streamType
+     *        Stream type of the segment loader that called endOfStream
+     * @private
+     */
+
+    onEndOfStream() {
+      let isEndOfStream = this.mainSegmentLoader_.ended_;
+      if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+        const mainMediaInfo = this.mainSegmentLoader_.getCurrentMediaInfo_(); // if the audio playlist loader exists, then alternate audio is active
+
+        if (!mainMediaInfo || mainMediaInfo.hasVideo) {
+          // if we do not know if the main segment loader contains video yet or if we
+          // definitively know the main segment loader contains video, then we need to wait
+          // for both main and audio segment loaders to call endOfStream
+          isEndOfStream = isEndOfStream && this.audioSegmentLoader_.ended_;
+        } else {
+          // otherwise just rely on the audio loader
+          isEndOfStream = this.audioSegmentLoader_.ended_;
+        }
+      }
+      if (!isEndOfStream) {
+        return;
+      }
+      this.stopABRTimer_();
+      this.sourceUpdater_.endOfStream();
+    }
+    /**
+     * Check if a playlist has stopped being updated
+     *
+     * @param {Object} playlist the media playlist object
+     * @return {boolean} whether the playlist has stopped being updated or not
+     */
+
+    stuckAtPlaylistEnd_(playlist) {
+      const seekable = this.seekable();
+      if (!seekable.length) {
+        // playlist doesn't have enough information to determine whether we are stuck
+        return false;
+      }
+      const expired = this.syncController_.getExpiredTime(playlist, this.duration());
+      if (expired === null) {
+        return false;
+      } // does not use the safe live end to calculate playlist end, since we
+      // don't want to say we are stuck while there is still content
+
+      const absolutePlaylistEnd = Vhs$1.Playlist.playlistEnd(playlist, expired);
+      const currentTime = this.tech_.currentTime();
+      const buffered = this.tech_.buffered();
+      if (!buffered.length) {
+        // return true if the playhead reached the absolute end of the playlist
+        return absolutePlaylistEnd - currentTime <= SAFE_TIME_DELTA;
+      }
+      const bufferedEnd = buffered.end(buffered.length - 1); // return true if there is too little buffer left and buffer has reached absolute
+      // end of playlist
+
+      return bufferedEnd - currentTime <= SAFE_TIME_DELTA && absolutePlaylistEnd - bufferedEnd <= SAFE_TIME_DELTA;
+    }
+    /**
+     * Exclude a playlist for a set amount of time, making it unavailable for selection by
+     * the rendition selection algorithm, then force a new playlist (rendition) selection.
+     *
+     * @param {Object=} playlistToExclude
+     *                  the playlist to exclude, defaults to the currently selected playlist
+     * @param {Object=} error
+     *                  an optional error
+     * @param {number=} playlistExclusionDuration
+     *                  an optional number of seconds to exclude the playlist
+     */
+
+    excludePlaylist({
+      playlistToExclude = this.mainPlaylistLoader_.media(),
+      error = {},
+      playlistExclusionDuration
+    }) {
+      // If the `error` was generated by the playlist loader, it will contain
+      // the playlist we were trying to load (but failed) and that should be
+      // excluded instead of the currently selected playlist which is likely
+      // out-of-date in this scenario
+      playlistToExclude = playlistToExclude || this.mainPlaylistLoader_.media();
+      playlistExclusionDuration = playlistExclusionDuration || error.playlistExclusionDuration || this.playlistExclusionDuration; // If there is no current playlist, then an error occurred while we were
+      // trying to load the main OR while we were disposing of the tech
+
+      if (!playlistToExclude) {
+        this.error = error;
+        if (this.mediaSource.readyState !== 'open') {
+          this.trigger('error');
+        } else {
+          this.sourceUpdater_.endOfStream('network');
+        }
+        return;
+      }
+      playlistToExclude.playlistErrors_++;
+      const playlists = this.mainPlaylistLoader_.main.playlists;
+      const enabledPlaylists = playlists.filter(isEnabled);
+      const isFinalRendition = enabledPlaylists.length === 1 && enabledPlaylists[0] === playlistToExclude; // Don't exclude the only playlist unless it was excluded
+      // forever
+
+      if (playlists.length === 1 && playlistExclusionDuration !== Infinity) {
+        videojs.log.warn(`Problem encountered with playlist ${playlistToExclude.id}. ` + 'Trying again since it is the only playlist.');
+        this.tech_.trigger('retryplaylist'); // if this is a final rendition, we should delay
+
+        return this.mainPlaylistLoader_.load(isFinalRendition);
+      }
+      if (isFinalRendition) {
+        // If we're content steering, try other pathways.
+        if (this.main().contentSteering) {
+          const pathway = this.pathwayAttribute_(playlistToExclude); // Ignore at least 1 steering manifest refresh.
+
+          const reIncludeDelay = this.contentSteeringController_.steeringManifest.ttl * 1000;
+          this.contentSteeringController_.excludePathway(pathway);
+          this.excludeThenChangePathway_();
+          setTimeout(() => {
+            this.contentSteeringController_.addAvailablePathway(pathway);
+          }, reIncludeDelay);
+          return;
+        } // Since we're on the final non-excluded playlist, and we're about to exclude
+        // it, instead of erring the player or retrying this playlist, clear out the current
+        // exclusion list. This allows other playlists to be attempted in case any have been
+        // fixed.
+
+        let reincluded = false;
+        playlists.forEach(playlist => {
+          // skip current playlist which is about to be excluded
+          if (playlist === playlistToExclude) {
+            return;
+          }
+          const excludeUntil = playlist.excludeUntil; // a playlist cannot be reincluded if it wasn't excluded to begin with.
+
+          if (typeof excludeUntil !== 'undefined' && excludeUntil !== Infinity) {
+            reincluded = true;
+            delete playlist.excludeUntil;
+          }
+        });
+        if (reincluded) {
+          videojs.log.warn('Removing other playlists from the exclusion list because the last ' + 'rendition is about to be excluded.'); // Technically we are retrying a playlist, in that we are simply retrying a previous
+          // playlist. This is needed for users relying on the retryplaylist event to catch a
+          // case where the player might be stuck and looping through "dead" playlists.
+
+          this.tech_.trigger('retryplaylist');
+        }
+      } // Exclude this playlist
+
+      let excludeUntil;
+      if (playlistToExclude.playlistErrors_ > this.maxPlaylistRetries) {
+        excludeUntil = Infinity;
+      } else {
+        excludeUntil = Date.now() + playlistExclusionDuration * 1000;
+      }
+      playlistToExclude.excludeUntil = excludeUntil;
+      if (error.reason) {
+        playlistToExclude.lastExcludeReason_ = error.reason;
+      }
+      this.tech_.trigger('excludeplaylist');
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-rendition-excluded'
+      }); // TODO: only load a new playlist if we're excluding the current playlist
+      // If this function was called with a playlist that's not the current active playlist
+      // (e.g., media().id !== playlistToExclude.id),
+      // then a new playlist should not be selected and loaded, as there's nothing wrong with the current playlist.
+
+      const nextPlaylist = this.selectPlaylist();
+      if (!nextPlaylist) {
+        this.error = 'Playback cannot continue. No available working or supported playlists.';
+        this.trigger('error');
+        return;
+      }
+      const logFn = error.internal ? this.logger_ : videojs.log.warn;
+      const errorMessage = error.message ? ' ' + error.message : '';
+      logFn(`${error.internal ? 'Internal problem' : 'Problem'} encountered with playlist ${playlistToExclude.id}.` + `${errorMessage} Switching to playlist ${nextPlaylist.id}.`); // if audio group changed reset audio loaders
+
+      if (nextPlaylist.attributes.AUDIO !== playlistToExclude.attributes.AUDIO) {
+        this.delegateLoaders_('audio', ['abort', 'pause']);
+      } // if subtitle group changed reset subtitle loaders
+
+      if (nextPlaylist.attributes.SUBTITLES !== playlistToExclude.attributes.SUBTITLES) {
+        this.delegateLoaders_('subtitle', ['abort', 'pause']);
+      }
+      this.delegateLoaders_('main', ['abort', 'pause']);
+      const delayDuration = nextPlaylist.targetDuration / 2 * 1000 || 5 * 1000;
+      const shouldDelay = typeof nextPlaylist.lastRequest === 'number' && Date.now() - nextPlaylist.lastRequest <= delayDuration; // delay if it's a final rendition or if the last refresh is sooner than half targetDuration
+
+      return this.switchMedia_(nextPlaylist, 'exclude', isFinalRendition || shouldDelay);
+    }
+    /**
+     * Pause all segment/playlist loaders
+     */
+
+    pauseLoading() {
+      this.delegateLoaders_('all', ['abort', 'pause']);
+      this.stopABRTimer_();
+    }
+    /**
+     * Call a set of functions in order on playlist loaders, segment loaders,
+     * or both types of loaders.
+     *
+     * @param {string} filter
+     *        Filter loaders that should call fnNames using a string. Can be:
+     *        * all - run on all loaders
+     *        * audio - run on all audio loaders
+     *        * subtitle - run on all subtitle loaders
+     *        * main - run on the main loaders
+     *
+     * @param {Array|string} fnNames
+     *        A string or array of function names to call.
+     */
+
+    delegateLoaders_(filter, fnNames) {
+      const loaders = [];
+      const dontFilterPlaylist = filter === 'all';
+      if (dontFilterPlaylist || filter === 'main') {
+        loaders.push(this.mainPlaylistLoader_);
+      }
+      const mediaTypes = [];
+      if (dontFilterPlaylist || filter === 'audio') {
+        mediaTypes.push('AUDIO');
+      }
+      if (dontFilterPlaylist || filter === 'subtitle') {
+        mediaTypes.push('CLOSED-CAPTIONS');
+        mediaTypes.push('SUBTITLES');
+      }
+      mediaTypes.forEach(mediaType => {
+        const loader = this.mediaTypes_[mediaType] && this.mediaTypes_[mediaType].activePlaylistLoader;
+        if (loader) {
+          loaders.push(loader);
+        }
+      });
+      ['main', 'audio', 'subtitle'].forEach(name => {
+        const loader = this[`${name}SegmentLoader_`];
+        if (loader && (filter === name || filter === 'all')) {
+          loaders.push(loader);
+        }
+      });
+      loaders.forEach(loader => fnNames.forEach(fnName => {
+        if (typeof loader[fnName] === 'function') {
+          loader[fnName]();
+        }
+      }));
+    }
+    /**
+     * set the current time on all segment loaders
+     *
+     * @param {TimeRange} currentTime the current time to set
+     * @return {TimeRange} the current time
+     */
+
+    setCurrentTime(currentTime) {
+      const buffered = findRange(this.tech_.buffered(), currentTime);
+      if (!(this.mainPlaylistLoader_ && this.mainPlaylistLoader_.media())) {
+        // return immediately if the metadata is not ready yet
+        return 0;
+      } // it's clearly an edge-case but don't thrown an error if asked to
+      // seek within an empty playlist
+
+      if (!this.mainPlaylistLoader_.media().segments) {
+        return 0;
+      } // if the seek location is already buffered, continue buffering as usual
+
+      if (buffered && buffered.length) {
+        return currentTime;
+      } // cancel outstanding requests so we begin buffering at the new
+      // location
+
+      this.mainSegmentLoader_.pause();
+      this.mainSegmentLoader_.resetEverything();
+      if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+        this.audioSegmentLoader_.pause();
+        this.audioSegmentLoader_.resetEverything();
+      }
+      if (this.mediaTypes_.SUBTITLES.activePlaylistLoader) {
+        this.subtitleSegmentLoader_.pause();
+        this.subtitleSegmentLoader_.resetEverything();
+      } // start segment loader loading in case they are paused
+
+      this.load();
+    }
+    /**
+     * get the current duration
+     *
+     * @return {TimeRange} the duration
+     */
+
+    duration() {
+      if (!this.mainPlaylistLoader_) {
+        return 0;
+      }
+      const media = this.mainPlaylistLoader_.media();
+      if (!media) {
+        // no playlists loaded yet, so can't determine a duration
+        return 0;
+      } // Don't rely on the media source for duration in the case of a live playlist since
+      // setting the native MediaSource's duration to infinity ends up with consequences to
+      // seekable behavior. See https://github.com/w3c/media-source/issues/5 for details.
+      //
+      // This is resolved in the spec by https://github.com/w3c/media-source/pull/92,
+      // however, few browsers have support for setLiveSeekableRange()
+      // https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/setLiveSeekableRange
+      //
+      // Until a time when the duration of the media source can be set to infinity, and a
+      // seekable range specified across browsers, just return Infinity.
+
+      if (!media.endList) {
+        return Infinity;
+      } // Since this is a VOD video, it is safe to rely on the media source's duration (if
+      // available). If it's not available, fall back to a playlist-calculated estimate.
+
+      if (this.mediaSource) {
+        return this.mediaSource.duration;
+      }
+      return Vhs$1.Playlist.duration(media);
+    }
+    /**
+     * check the seekable range
+     *
+     * @return {TimeRange} the seekable range
+     */
+
+    seekable() {
+      return this.seekable_;
+    }
+    onSyncInfoUpdate_() {
+      let audioSeekable; // TODO check for creation of both source buffers before updating seekable
+      //
+      // A fix was made to this function where a check for
+      // this.sourceUpdater_.hasCreatedSourceBuffers
+      // was added to ensure that both source buffers were created before seekable was
+      // updated. However, it originally had a bug where it was checking for a true and
+      // returning early instead of checking for false. Setting it to check for false to
+      // return early though created other issues. A call to play() would check for seekable
+      // end without verifying that a seekable range was present. In addition, even checking
+      // for that didn't solve some issues, as handleFirstPlay is sometimes worked around
+      // due to a media update calling load on the segment loaders, skipping a seek to live,
+      // thereby starting live streams at the beginning of the stream rather than at the end.
+      //
+      // This conditional should be fixed to wait for the creation of two source buffers at
+      // the same time as the other sections of code are fixed to properly seek to live and
+      // not throw an error due to checking for a seekable end when no seekable range exists.
+      //
+      // For now, fall back to the older behavior, with the understanding that the seekable
+      // range may not be completely correct, leading to a suboptimal initial live point.
+
+      if (!this.mainPlaylistLoader_) {
+        return;
+      }
+      let media = this.mainPlaylistLoader_.media();
+      if (!media) {
+        return;
+      }
+      let expired = this.syncController_.getExpiredTime(media, this.duration());
+      if (expired === null) {
+        // not enough information to update seekable
+        return;
+      }
+      const main = this.mainPlaylistLoader_.main;
+      const mainSeekable = Vhs$1.Playlist.seekable(media, expired, Vhs$1.Playlist.liveEdgeDelay(main, media));
+      if (mainSeekable.length === 0) {
+        return;
+      }
+      if (this.mediaTypes_.AUDIO.activePlaylistLoader) {
+        media = this.mediaTypes_.AUDIO.activePlaylistLoader.media();
+        expired = this.syncController_.getExpiredTime(media, this.duration());
+        if (expired === null) {
+          return;
+        }
+        audioSeekable = Vhs$1.Playlist.seekable(media, expired, Vhs$1.Playlist.liveEdgeDelay(main, media));
+        if (audioSeekable.length === 0) {
+          return;
+        }
+      }
+      let oldEnd;
+      let oldStart;
+      if (this.seekable_ && this.seekable_.length) {
+        oldEnd = this.seekable_.end(0);
+        oldStart = this.seekable_.start(0);
+      }
+      if (!audioSeekable) {
+        // seekable has been calculated based on buffering video data so it
+        // can be returned directly
+        this.seekable_ = mainSeekable;
+      } else if (audioSeekable.start(0) > mainSeekable.end(0) || mainSeekable.start(0) > audioSeekable.end(0)) {
+        // seekables are pretty far off, rely on main
+        this.seekable_ = mainSeekable;
+      } else {
+        this.seekable_ = createTimeRanges([[audioSeekable.start(0) > mainSeekable.start(0) ? audioSeekable.start(0) : mainSeekable.start(0), audioSeekable.end(0) < mainSeekable.end(0) ? audioSeekable.end(0) : mainSeekable.end(0)]]);
+      } // seekable is the same as last time
+
+      if (this.seekable_ && this.seekable_.length) {
+        if (this.seekable_.end(0) === oldEnd && this.seekable_.start(0) === oldStart) {
+          return;
+        }
+      }
+      this.logger_(`seekable updated [${printableRange(this.seekable_)}]`);
+      this.tech_.trigger('seekablechanged');
+    }
+    /**
+     * Update the player duration
+     */
+
+    updateDuration(isLive) {
+      if (this.updateDuration_) {
+        this.mediaSource.removeEventListener('sourceopen', this.updateDuration_);
+        this.updateDuration_ = null;
+      }
+      if (this.mediaSource.readyState !== 'open') {
+        this.updateDuration_ = this.updateDuration.bind(this, isLive);
+        this.mediaSource.addEventListener('sourceopen', this.updateDuration_);
+        return;
+      }
+      if (isLive) {
+        const seekable = this.seekable();
+        if (!seekable.length) {
+          return;
+        } // Even in the case of a live playlist, the native MediaSource's duration should not
+        // be set to Infinity (even though this would be expected for a live playlist), since
+        // setting the native MediaSource's duration to infinity ends up with consequences to
+        // seekable behavior. See https://github.com/w3c/media-source/issues/5 for details.
+        //
+        // This is resolved in the spec by https://github.com/w3c/media-source/pull/92,
+        // however, few browsers have support for setLiveSeekableRange()
+        // https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/setLiveSeekableRange
+        //
+        // Until a time when the duration of the media source can be set to infinity, and a
+        // seekable range specified across browsers, the duration should be greater than or
+        // equal to the last possible seekable value.
+        // MediaSource duration starts as NaN
+        // It is possible (and probable) that this case will never be reached for many
+        // sources, since the MediaSource reports duration as the highest value without
+        // accounting for timestamp offset. For example, if the timestamp offset is -100 and
+        // we buffered times 0 to 100 with real times of 100 to 200, even though current
+        // time will be between 0 and 100, the native media source may report the duration
+        // as 200. However, since we report duration separate from the media source (as
+        // Infinity), and as long as the native media source duration value is greater than
+        // our reported seekable range, seeks will work as expected. The large number as
+        // duration for live is actually a strategy used by some players to work around the
+        // issue of live seekable ranges cited above.
+
+        if (isNaN(this.mediaSource.duration) || this.mediaSource.duration < seekable.end(seekable.length - 1)) {
+          this.sourceUpdater_.setDuration(seekable.end(seekable.length - 1));
+        }
+        return;
+      }
+      const buffered = this.tech_.buffered();
+      let duration = Vhs$1.Playlist.duration(this.mainPlaylistLoader_.media());
+      if (buffered.length > 0) {
+        duration = Math.max(duration, buffered.end(buffered.length - 1));
+      }
+      if (this.mediaSource.duration !== duration) {
+        this.sourceUpdater_.setDuration(duration);
+      }
+    }
+    /**
+     * dispose of the PlaylistController and everything
+     * that it controls
+     */
+
+    dispose() {
+      this.trigger('dispose');
+      this.decrypter_.terminate();
+      this.mainPlaylistLoader_.dispose();
+      this.mainSegmentLoader_.dispose();
+      this.contentSteeringController_.dispose();
+      this.keyStatusMap_.clear();
+      if (this.loadOnPlay_) {
+        this.tech_.off('play', this.loadOnPlay_);
+      }
+      ['AUDIO', 'SUBTITLES'].forEach(type => {
+        const groups = this.mediaTypes_[type].groups;
+        for (const id in groups) {
+          groups[id].forEach(group => {
+            if (group.playlistLoader) {
+              group.playlistLoader.dispose();
+            }
+          });
+        }
+      });
+      this.audioSegmentLoader_.dispose();
+      this.subtitleSegmentLoader_.dispose();
+      this.sourceUpdater_.dispose();
+      this.timelineChangeController_.dispose();
+      this.stopABRTimer_();
+      if (this.updateDuration_) {
+        this.mediaSource.removeEventListener('sourceopen', this.updateDuration_);
+      }
+      this.mediaSource.removeEventListener('durationchange', this.handleDurationChange_); // load the media source into the player
+
+      this.mediaSource.removeEventListener('sourceopen', this.handleSourceOpen_);
+      this.mediaSource.removeEventListener('sourceended', this.handleSourceEnded_);
+      this.off();
+    }
+    /**
+     * return the main playlist object if we have one
+     *
+     * @return {Object} the main playlist object that we parsed
+     */
+
+    main() {
+      return this.mainPlaylistLoader_.main;
+    }
+    /**
+     * return the currently selected playlist
+     *
+     * @return {Object} the currently selected playlist object that we parsed
+     */
+
+    media() {
+      // playlist loader will not return media if it has not been fully loaded
+      return this.mainPlaylistLoader_.media() || this.initialMedia_;
+    }
+    areMediaTypesKnown_() {
+      const usingAudioLoader = !!this.mediaTypes_.AUDIO.activePlaylistLoader;
+      const hasMainMediaInfo = !!this.mainSegmentLoader_.getCurrentMediaInfo_(); // if we are not using an audio loader, then we have audio media info
+      // otherwise check on the segment loader.
+
+      const hasAudioMediaInfo = !usingAudioLoader ? true : !!this.audioSegmentLoader_.getCurrentMediaInfo_(); // one or both loaders has not loaded sufficently to get codecs
+
+      if (!hasMainMediaInfo || !hasAudioMediaInfo) {
+        return false;
+      }
+      return true;
+    }
+    getCodecsOrExclude_() {
+      const media = {
+        main: this.mainSegmentLoader_.getCurrentMediaInfo_() || {},
+        audio: this.audioSegmentLoader_.getCurrentMediaInfo_() || {}
+      };
+      const playlist = this.mainSegmentLoader_.getPendingSegmentPlaylist() || this.media(); // set "main" media equal to video
+
+      media.video = media.main;
+      const playlistCodecs = codecsForPlaylist(this.main(), playlist);
+      const codecs = {};
+      const usingAudioLoader = !!this.mediaTypes_.AUDIO.activePlaylistLoader;
+      if (media.main.hasVideo) {
+        codecs.video = playlistCodecs.video || media.main.videoCodec || DEFAULT_VIDEO_CODEC;
+      }
+      if (media.main.isMuxed) {
+        codecs.video += `,${playlistCodecs.audio || media.main.audioCodec || DEFAULT_AUDIO_CODEC}`;
+      }
+      if (media.main.hasAudio && !media.main.isMuxed || media.audio.hasAudio || usingAudioLoader) {
+        codecs.audio = playlistCodecs.audio || media.main.audioCodec || media.audio.audioCodec || DEFAULT_AUDIO_CODEC; // set audio isFmp4 so we use the correct "supports" function below
+
+        media.audio.isFmp4 = media.main.hasAudio && !media.main.isMuxed ? media.main.isFmp4 : media.audio.isFmp4;
+      } // no codecs, no playback.
+
+      if (!codecs.audio && !codecs.video) {
+        this.excludePlaylist({
+          playlistToExclude: playlist,
+          error: {
+            message: 'Could not determine codecs for playlist.'
+          },
+          playlistExclusionDuration: Infinity
+        });
+        return;
+      } // fmp4 relies on browser support, while ts relies on muxer support
+
+      const supportFunction = (isFmp4, codec) => isFmp4 ? browserSupportsCodec(codec) : muxerSupportsCodec(codec);
+      const unsupportedCodecs = {};
+      let unsupportedAudio;
+      ['video', 'audio'].forEach(function (type) {
+        if (codecs.hasOwnProperty(type) && !supportFunction(media[type].isFmp4, codecs[type])) {
+          const supporter = media[type].isFmp4 ? 'browser' : 'muxer';
+          unsupportedCodecs[supporter] = unsupportedCodecs[supporter] || [];
+          unsupportedCodecs[supporter].push(codecs[type]);
+          if (type === 'audio') {
+            unsupportedAudio = supporter;
+          }
+        }
+      });
+      if (usingAudioLoader && unsupportedAudio && playlist.attributes.AUDIO) {
+        const audioGroup = playlist.attributes.AUDIO;
+        this.main().playlists.forEach(variant => {
+          const variantAudioGroup = variant.attributes && variant.attributes.AUDIO;
+          if (variantAudioGroup === audioGroup && variant !== playlist) {
+            variant.excludeUntil = Infinity;
+          }
+        });
+        this.logger_(`excluding audio group ${audioGroup} as ${unsupportedAudio} does not support codec(s): "${codecs.audio}"`);
+      } // if we have any unsupported codecs exclude this playlist.
+
+      if (Object.keys(unsupportedCodecs).length) {
+        const message = Object.keys(unsupportedCodecs).reduce((acc, supporter) => {
+          if (acc) {
+            acc += ', ';
+          }
+          acc += `${supporter} does not support codec(s): "${unsupportedCodecs[supporter].join(',')}"`;
+          return acc;
+        }, '') + '.';
+        this.excludePlaylist({
+          playlistToExclude: playlist,
+          error: {
+            internal: true,
+            message
+          },
+          playlistExclusionDuration: Infinity
+        });
+        return;
+      } // check if codec switching is happening
+
+      if (this.sourceUpdater_.hasCreatedSourceBuffers() && !this.sourceUpdater_.canChangeType()) {
+        const switchMessages = [];
+        ['video', 'audio'].forEach(type => {
+          const newCodec = (parseCodecs(this.sourceUpdater_.codecs[type] || '')[0] || {}).type;
+          const oldCodec = (parseCodecs(codecs[type] || '')[0] || {}).type;
+          if (newCodec && oldCodec && newCodec.toLowerCase() !== oldCodec.toLowerCase()) {
+            switchMessages.push(`"${this.sourceUpdater_.codecs[type]}" -> "${codecs[type]}"`);
+          }
+        });
+        if (switchMessages.length) {
+          this.excludePlaylist({
+            playlistToExclude: playlist,
+            error: {
+              message: `Codec switching not supported: ${switchMessages.join(', ')}.`,
+              internal: true
+            },
+            playlistExclusionDuration: Infinity
+          });
+          return;
+        }
+      } // TODO: when using the muxer shouldn't we just return
+      // the codecs that the muxer outputs?
+
+      return codecs;
+    }
+    /**
+     * Create source buffers and exlude any incompatible renditions.
+     *
+     * @private
+     */
+
+    tryToCreateSourceBuffers_() {
+      // media source is not ready yet or sourceBuffers are already
+      // created.
+      if (this.mediaSource.readyState !== 'open' || this.sourceUpdater_.hasCreatedSourceBuffers()) {
+        return;
+      }
+      if (!this.areMediaTypesKnown_()) {
+        return;
+      }
+      const codecs = this.getCodecsOrExclude_(); // no codecs means that the playlist was excluded
+
+      if (!codecs) {
+        return;
+      }
+      this.sourceUpdater_.createSourceBuffers(codecs);
+      const codecString = [codecs.video, codecs.audio].filter(Boolean).join(',');
+      this.excludeIncompatibleVariants_(codecString);
+    }
+    /**
+     * Excludes playlists with codecs that are unsupported by the muxer and browser.
+     */
+
+    excludeUnsupportedVariants_() {
+      const playlists = this.main().playlists;
+      const ids = []; // TODO: why don't we have a property to loop through all
+      // playlist? Why did we ever mix indexes and keys?
+
+      Object.keys(playlists).forEach(key => {
+        const variant = playlists[key]; // check if we already processed this playlist.
+
+        if (ids.indexOf(variant.id) !== -1) {
+          return;
+        }
+        ids.push(variant.id);
+        const codecs = codecsForPlaylist(this.main, variant);
+        const unsupported = [];
+        if (codecs.audio && !muxerSupportsCodec(codecs.audio) && !browserSupportsCodec(codecs.audio)) {
+          unsupported.push(`audio codec ${codecs.audio}`);
+        }
+        if (codecs.video && !muxerSupportsCodec(codecs.video) && !browserSupportsCodec(codecs.video)) {
+          unsupported.push(`video codec ${codecs.video}`);
+        }
+        if (codecs.text && codecs.text === 'stpp.ttml.im1t') {
+          unsupported.push(`text codec ${codecs.text}`);
+        }
+        if (unsupported.length) {
+          variant.excludeUntil = Infinity;
+          this.logger_(`excluding ${variant.id} for unsupported: ${unsupported.join(', ')}`);
+        }
+      });
+    }
+    /**
+     * Exclude playlists that are known to be codec or
+     * stream-incompatible with the SourceBuffer configuration. For
+     * instance, Media Source Extensions would cause the video element to
+     * stall waiting for video data if you switched from a variant with
+     * video and audio to an audio-only one.
+     *
+     * @param {Object} media a media playlist compatible with the current
+     * set of SourceBuffers. Variants in the current main playlist that
+     * do not appear to have compatible codec or stream configurations
+     * will be excluded from the default playlist selection algorithm
+     * indefinitely.
+     * @private
+     */
+
+    excludeIncompatibleVariants_(codecString) {
+      const ids = [];
+      const playlists = this.main().playlists;
+      const codecs = unwrapCodecList(parseCodecs(codecString));
+      const codecCount_ = codecCount(codecs);
+      const videoDetails = codecs.video && parseCodecs(codecs.video)[0] || null;
+      const audioDetails = codecs.audio && parseCodecs(codecs.audio)[0] || null;
+      Object.keys(playlists).forEach(key => {
+        const variant = playlists[key]; // check if we already processed this playlist.
+        // or it if it is already excluded forever.
+
+        if (ids.indexOf(variant.id) !== -1 || variant.excludeUntil === Infinity) {
+          return;
+        }
+        ids.push(variant.id);
+        const exclusionReasons = []; // get codecs from the playlist for this variant
+
+        const variantCodecs = codecsForPlaylist(this.mainPlaylistLoader_.main, variant);
+        const variantCodecCount = codecCount(variantCodecs); // if no codecs are listed, we cannot determine that this
+        // variant is incompatible. Wait for mux.js to probe
+
+        if (!variantCodecs.audio && !variantCodecs.video) {
+          return;
+        } // TODO: we can support this by removing the
+        // old media source and creating a new one, but it will take some work.
+        // The number of streams cannot change
+
+        if (variantCodecCount !== codecCount_) {
+          exclusionReasons.push(`codec count "${variantCodecCount}" !== "${codecCount_}"`);
+        } // only exclude playlists by codec change, if codecs cannot switch
+        // during playback.
+
+        if (!this.sourceUpdater_.canChangeType()) {
+          const variantVideoDetails = variantCodecs.video && parseCodecs(variantCodecs.video)[0] || null;
+          const variantAudioDetails = variantCodecs.audio && parseCodecs(variantCodecs.audio)[0] || null; // the video codec cannot change
+
+          if (variantVideoDetails && videoDetails && variantVideoDetails.type.toLowerCase() !== videoDetails.type.toLowerCase()) {
+            exclusionReasons.push(`video codec "${variantVideoDetails.type}" !== "${videoDetails.type}"`);
+          } // the audio codec cannot change
+
+          if (variantAudioDetails && audioDetails && variantAudioDetails.type.toLowerCase() !== audioDetails.type.toLowerCase()) {
+            exclusionReasons.push(`audio codec "${variantAudioDetails.type}" !== "${audioDetails.type}"`);
+          }
+        }
+        if (exclusionReasons.length) {
+          variant.excludeUntil = Infinity;
+          this.logger_(`excluding ${variant.id}: ${exclusionReasons.join(' && ')}`);
+        }
+      });
+    }
+    updateAdCues_(media) {
+      let offset = 0;
+      const seekable = this.seekable();
+      if (seekable.length) {
+        offset = seekable.start(0);
+      }
+      updateAdCues(media, this.cueTagsTrack_, offset);
+    }
+    /**
+     * Calculates the desired forward buffer length based on current time
+     *
+     * @return {number} Desired forward buffer length in seconds
+     */
+
+    goalBufferLength() {
+      const currentTime = this.tech_.currentTime();
+      const initial = Config.GOAL_BUFFER_LENGTH;
+      const rate = Config.GOAL_BUFFER_LENGTH_RATE;
+      const max = Math.max(initial, Config.MAX_GOAL_BUFFER_LENGTH);
+      return Math.min(initial + currentTime * rate, max);
+    }
+    /**
+     * Calculates the desired buffer low water line based on current time
+     *
+     * @return {number} Desired buffer low water line in seconds
+     */
+
+    bufferLowWaterLine() {
+      const currentTime = this.tech_.currentTime();
+      const initial = Config.BUFFER_LOW_WATER_LINE;
+      const rate = Config.BUFFER_LOW_WATER_LINE_RATE;
+      const max = Math.max(initial, Config.MAX_BUFFER_LOW_WATER_LINE);
+      const newMax = Math.max(initial, Config.EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE);
+      return Math.min(initial + currentTime * rate, this.bufferBasedABR ? newMax : max);
+    }
+    bufferHighWaterLine() {
+      return Config.BUFFER_HIGH_WATER_LINE;
+    }
+    addDateRangesToTextTrack_(dateRanges) {
+      createMetadataTrackIfNotExists(this.inbandTextTracks_, 'com.apple.streaming', this.tech_);
+      addDateRangeMetadata({
+        inbandTextTracks: this.inbandTextTracks_,
+        dateRanges
+      });
+    }
+    addMetadataToTextTrack(dispatchType, metadataArray, videoDuration) {
+      const timestampOffset = this.sourceUpdater_.videoBuffer ? this.sourceUpdater_.videoTimestampOffset() : this.sourceUpdater_.audioTimestampOffset(); // There's potentially an issue where we could double add metadata if there's a muxed
+      // audio/video source with a metadata track, and an alt audio with a metadata track.
+      // However, this probably won't happen, and if it does it can be handled then.
+
+      createMetadataTrackIfNotExists(this.inbandTextTracks_, dispatchType, this.tech_);
+      addMetadata({
+        inbandTextTracks: this.inbandTextTracks_,
+        metadataArray,
+        timestampOffset,
+        videoDuration
+      });
+    }
+    /**
+     * Utility for getting the pathway or service location from an HLS or DASH playlist.
+     *
+     * @param {Object} playlist for getting pathway from.
+     * @return the pathway attribute of a playlist
+     */
+
+    pathwayAttribute_(playlist) {
+      return playlist.attributes['PATHWAY-ID'] || playlist.attributes.serviceLocation;
+    }
+    /**
+     * Initialize available pathways and apply the tag properties.
+     */
+
+    initContentSteeringController_() {
+      const main = this.main();
+      if (!main.contentSteering) {
+        return;
+      }
+      for (const playlist of main.playlists) {
+        this.contentSteeringController_.addAvailablePathway(this.pathwayAttribute_(playlist));
+      }
+      this.contentSteeringController_.assignTagProperties(main.uri, main.contentSteering); // request the steering manifest immediately if queryBeforeStart is set.
+
+      if (this.contentSteeringController_.queryBeforeStart) {
+        // When queryBeforeStart is true, initial request should omit steering parameters.
+        this.contentSteeringController_.requestSteeringManifest(true);
+        return;
+      } // otherwise start content steering after playback starts
+
+      this.tech_.one('canplay', () => {
+        this.contentSteeringController_.requestSteeringManifest();
+      });
+    }
+    /**
+     * Reset the content steering controller and re-init.
+     */
+
+    resetContentSteeringController_() {
+      this.contentSteeringController_.clearAvailablePathways();
+      this.contentSteeringController_.dispose();
+      this.initContentSteeringController_();
+    }
+    /**
+     * Attaches the listeners for content steering.
+     */
+
+    attachContentSteeringListeners_() {
+      this.contentSteeringController_.on('content-steering', this.excludeThenChangePathway_.bind(this));
+      if (this.sourceType_ === 'dash') {
+        this.mainPlaylistLoader_.on('loadedplaylist', () => {
+          const main = this.main(); // check if steering tag or pathways changed.
+
+          const didDashTagChange = this.contentSteeringController_.didDASHTagChange(main.uri, main.contentSteering);
+          const didPathwaysChange = () => {
+            const availablePathways = this.contentSteeringController_.getAvailablePathways();
+            const newPathways = [];
+            for (const playlist of main.playlists) {
+              const serviceLocation = playlist.attributes.serviceLocation;
+              if (serviceLocation) {
+                newPathways.push(serviceLocation);
+                if (!availablePathways.has(serviceLocation)) {
+                  return true;
+                }
+              }
+            } // If we have no new serviceLocations and previously had availablePathways
+
+            if (!newPathways.length && availablePathways.size) {
+              return true;
+            }
+            return false;
+          };
+          if (didDashTagChange || didPathwaysChange()) {
+            this.resetContentSteeringController_();
+          }
+        });
+      }
+    }
+    /**
+     * Simple exclude and change playlist logic for content steering.
+     */
+
+    excludeThenChangePathway_() {
+      const currentPathway = this.contentSteeringController_.getPathway();
+      if (!currentPathway) {
+        return;
+      }
+      this.handlePathwayClones_();
+      const main = this.main();
+      const playlists = main.playlists;
+      const ids = new Set();
+      let didEnablePlaylists = false;
+      Object.keys(playlists).forEach(key => {
+        const variant = playlists[key];
+        const pathwayId = this.pathwayAttribute_(variant);
+        const differentPathwayId = pathwayId && currentPathway !== pathwayId;
+        const steeringExclusion = variant.excludeUntil === Infinity && variant.lastExcludeReason_ === 'content-steering';
+        if (steeringExclusion && !differentPathwayId) {
+          delete variant.excludeUntil;
+          delete variant.lastExcludeReason_;
+          didEnablePlaylists = true;
+        }
+        const noExcludeUntil = !variant.excludeUntil && variant.excludeUntil !== Infinity;
+        const shouldExclude = !ids.has(variant.id) && differentPathwayId && noExcludeUntil;
+        if (!shouldExclude) {
+          return;
+        }
+        ids.add(variant.id);
+        variant.excludeUntil = Infinity;
+        variant.lastExcludeReason_ = 'content-steering'; // TODO: kind of spammy, maybe move this.
+
+        this.logger_(`excluding ${variant.id} for ${variant.lastExcludeReason_}`);
+      });
+      if (this.contentSteeringController_.manifestType_ === 'DASH') {
+        Object.keys(this.mediaTypes_).forEach(key => {
+          const type = this.mediaTypes_[key];
+          if (type.activePlaylistLoader) {
+            const currentPlaylist = type.activePlaylistLoader.media_; // Check if the current media playlist matches the current CDN
+
+            if (currentPlaylist && currentPlaylist.attributes.serviceLocation !== currentPathway) {
+              didEnablePlaylists = true;
+            }
+          }
+        });
+      }
+      if (didEnablePlaylists) {
+        this.changeSegmentPathway_();
+      }
+    }
+    /**
+     * Add, update, or delete playlists and media groups for
+     * the pathway clones for HLS Content Steering.
+     *
+     * See https://datatracker.ietf.org/doc/draft-pantos-hls-rfc8216bis/
+     *
+     * NOTE: Pathway cloning does not currently support the `PER_VARIANT_URIS` and
+     * `PER_RENDITION_URIS` as we do not handle `STABLE-VARIANT-ID` or
+     * `STABLE-RENDITION-ID` values.
+     */
+
+    handlePathwayClones_() {
+      const main = this.main();
+      const playlists = main.playlists;
+      const currentPathwayClones = this.contentSteeringController_.currentPathwayClones;
+      const nextPathwayClones = this.contentSteeringController_.nextPathwayClones;
+      const hasClones = currentPathwayClones && currentPathwayClones.size || nextPathwayClones && nextPathwayClones.size;
+      if (!hasClones) {
+        return;
+      }
+      for (const [id, clone] of currentPathwayClones.entries()) {
+        const newClone = nextPathwayClones.get(id); // Delete the old pathway clone.
+
+        if (!newClone) {
+          this.mainPlaylistLoader_.updateOrDeleteClone(clone);
+          this.contentSteeringController_.excludePathway(id);
+        }
+      }
+      for (const [id, clone] of nextPathwayClones.entries()) {
+        const oldClone = currentPathwayClones.get(id); // Create a new pathway if it is a new pathway clone object.
+
+        if (!oldClone) {
+          const playlistsToClone = playlists.filter(p => {
+            return p.attributes['PATHWAY-ID'] === clone['BASE-ID'];
+          });
+          playlistsToClone.forEach(p => {
+            this.mainPlaylistLoader_.addClonePathway(clone, p);
+          });
+          this.contentSteeringController_.addAvailablePathway(id);
+          continue;
+        } // There have not been changes to the pathway clone object, so skip.
+
+        if (this.equalPathwayClones_(oldClone, clone)) {
+          continue;
+        } // Update a preexisting cloned pathway.
+        // True is set for the update flag.
+
+        this.mainPlaylistLoader_.updateOrDeleteClone(clone, true);
+        this.contentSteeringController_.addAvailablePathway(id);
+      } // Deep copy contents of next to current pathways.
+
+      this.contentSteeringController_.currentPathwayClones = new Map(JSON.parse(JSON.stringify([...nextPathwayClones])));
+    }
+    /**
+     * Determines whether two pathway clone objects are equivalent.
+     *
+     * @param {Object} a The first pathway clone object.
+     * @param {Object} b The second pathway clone object.
+     * @return {boolean} True if the pathway clone objects are equal, false otherwise.
+     */
+
+    equalPathwayClones_(a, b) {
+      if (a['BASE-ID'] !== b['BASE-ID'] || a.ID !== b.ID || a['URI-REPLACEMENT'].HOST !== b['URI-REPLACEMENT'].HOST) {
+        return false;
+      }
+      const aParams = a['URI-REPLACEMENT'].PARAMS;
+      const bParams = b['URI-REPLACEMENT'].PARAMS; // We need to iterate through both lists of params because one could be
+      // missing a parameter that the other has.
+
+      for (const p in aParams) {
+        if (aParams[p] !== bParams[p]) {
+          return false;
+        }
+      }
+      for (const p in bParams) {
+        if (aParams[p] !== bParams[p]) {
+          return false;
+        }
+      }
+      return true;
+    }
+    /**
+     * Changes the current playlists for audio, video and subtitles after a new pathway
+     * is chosen from content steering.
+     */
+
+    changeSegmentPathway_() {
+      const nextPlaylist = this.selectPlaylist();
+      this.pauseLoading(); // Switch audio and text track playlists if necessary in DASH
+
+      if (this.contentSteeringController_.manifestType_ === 'DASH') {
+        this.switchMediaForDASHContentSteering_();
+      }
+      this.switchMedia_(nextPlaylist, 'content-steering');
+    }
+    /**
+     * Iterates through playlists and check their keyId set and compare with the
+     * keyStatusMap, only enable playlists that have a usable key. If the playlist
+     * has no keyId leave it enabled by default.
+     */
+
+    excludeNonUsablePlaylistsByKeyId_() {
+      if (!this.mainPlaylistLoader_ || !this.mainPlaylistLoader_.main) {
+        return;
+      }
+      let nonUsableKeyStatusCount = 0;
+      const NON_USABLE = 'non-usable';
+      this.mainPlaylistLoader_.main.playlists.forEach(playlist => {
+        const keyIdSet = this.mainPlaylistLoader_.getKeyIdSet(playlist); // If the playlist doesn't have keyIDs lets not exclude it.
+
+        if (!keyIdSet || !keyIdSet.size) {
+          return;
+        }
+        keyIdSet.forEach(key => {
+          const USABLE = 'usable';
+          const hasUsableKeyStatus = this.keyStatusMap_.has(key) && this.keyStatusMap_.get(key) === USABLE;
+          const nonUsableExclusion = playlist.lastExcludeReason_ === NON_USABLE && playlist.excludeUntil === Infinity;
+          if (!hasUsableKeyStatus) {
+            // Only exclude playlists that haven't already been excluded as non-usable.
+            if (playlist.excludeUntil !== Infinity && playlist.lastExcludeReason_ !== NON_USABLE) {
+              playlist.excludeUntil = Infinity;
+              playlist.lastExcludeReason_ = NON_USABLE;
+              this.logger_(`excluding playlist ${playlist.id} because the key ID ${key} doesn't exist in the keyStatusMap or is not ${USABLE}`);
+            } // count all nonUsableKeyStatus
+
+            nonUsableKeyStatusCount++;
+          } else if (hasUsableKeyStatus && nonUsableExclusion) {
+            delete playlist.excludeUntil;
+            delete playlist.lastExcludeReason_;
+            this.logger_(`enabling playlist ${playlist.id} because key ID ${key} is ${USABLE}`);
+          }
+        });
+      }); // If for whatever reason every playlist has a non usable key status. Lets try re-including the SD renditions as a failsafe.
+
+      if (nonUsableKeyStatusCount >= this.mainPlaylistLoader_.main.playlists.length) {
+        this.mainPlaylistLoader_.main.playlists.forEach(playlist => {
+          const isNonHD = playlist && playlist.attributes && playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.height < 720;
+          const excludedForNonUsableKey = playlist.excludeUntil === Infinity && playlist.lastExcludeReason_ === NON_USABLE;
+          if (isNonHD && excludedForNonUsableKey) {
+            // Only delete the excludeUntil so we don't try and re-exclude these playlists.
+            delete playlist.excludeUntil;
+            videojs.log.warn(`enabling non-HD playlist ${playlist.id} because all playlists were excluded due to ${NON_USABLE} key IDs`);
+          }
+        });
+      }
+    }
+    /**
+     * Adds a keystatus to the keystatus map, tries to convert to string if necessary.
+     *
+     * @param {any} keyId the keyId to add a status for
+     * @param {string} status the status of the keyId
+     */
+
+    addKeyStatus_(keyId, status) {
+      const isString = typeof keyId === 'string';
+      const keyIdHexString = isString ? keyId : bufferToHexString(keyId);
+      const formattedKeyIdString = keyIdHexString.slice(0, 32).toLowerCase();
+      this.logger_(`KeyStatus '${status}' with key ID ${formattedKeyIdString} added to the keyStatusMap`);
+      this.keyStatusMap_.set(formattedKeyIdString, status);
+    }
+    /**
+     * Utility function for adding key status to the keyStatusMap and filtering usable encrypted playlists.
+     *
+     * @param {any} keyId the keyId from the keystatuschange event
+     * @param {string} status the key status string
+     */
+
+    updatePlaylistByKeyStatus(keyId, status) {
+      this.addKeyStatus_(keyId, status);
+      if (!this.waitingForFastQualityPlaylistReceived_) {
+        this.excludeNonUsableThenChangePlaylist_();
+      } // Listen to loadedplaylist with a single listener and check for new contentProtection elements when a playlist is updated.
+
+      this.mainPlaylistLoader_.off('loadedplaylist', this.excludeNonUsableThenChangePlaylist_.bind(this));
+      this.mainPlaylistLoader_.on('loadedplaylist', this.excludeNonUsableThenChangePlaylist_.bind(this));
+    }
+    excludeNonUsableThenChangePlaylist_() {
+      this.excludeNonUsablePlaylistsByKeyId_();
+      this.fastQualityChange_();
+    }
+  }
+
+  /**
+   * Returns a function that acts as the Enable/disable playlist function.
+   *
+   * @param {PlaylistLoader} loader - The main playlist loader
+   * @param {string} playlistID - id of the playlist
+   * @param {Function} changePlaylistFn - A function to be called after a
+   * playlist's enabled-state has been changed. Will NOT be called if a
+   * playlist's enabled-state is unchanged
+   * @param {boolean=} enable - Value to set the playlist enabled-state to
+   * or if undefined returns the current enabled-state for the playlist
+   * @return {Function} Function for setting/getting enabled
+   */
+
+  const enableFunction = (loader, playlistID, changePlaylistFn) => enable => {
+    const playlist = loader.main.playlists[playlistID];
+    const incompatible = isIncompatible(playlist);
+    const currentlyEnabled = isEnabled(playlist);
+    if (typeof enable === 'undefined') {
+      return currentlyEnabled;
+    }
+    if (enable) {
+      delete playlist.disabled;
+    } else {
+      playlist.disabled = true;
+    }
+    if (enable !== currentlyEnabled && !incompatible) {
+      // Ensure the outside world knows about our changes
+      changePlaylistFn(playlist);
+      if (enable) {
+        loader.trigger('renditionenabled');
+      } else {
+        loader.trigger('renditiondisabled');
+      }
+    }
+    return enable;
+  };
+  /**
+   * The representation object encapsulates the publicly visible information
+   * in a media playlist along with a setter/getter-type function (enabled)
+   * for changing the enabled-state of a particular playlist entry
+   *
+   * @class Representation
+   */
+
+  class Representation {
+    constructor(vhsHandler, playlist, id) {
+      const {
+        playlistController_: pc
+      } = vhsHandler;
+      const qualityChangeFunction = pc.fastQualityChange_.bind(pc); // some playlist attributes are optional
+
+      if (playlist.attributes) {
+        const resolution = playlist.attributes.RESOLUTION;
+        this.width = resolution && resolution.width;
+        this.height = resolution && resolution.height;
+        this.bandwidth = playlist.attributes.BANDWIDTH;
+        this.frameRate = playlist.attributes['FRAME-RATE'];
+      }
+      this.codecs = codecsForPlaylist(pc.main(), playlist);
+      this.playlist = playlist; // The id is simply the ordinality of the media playlist
+      // within the main playlist
+
+      this.id = id; // Partially-apply the enableFunction to create a playlist-
+      // specific variant
+
+      this.enabled = enableFunction(vhsHandler.playlists, playlist.id, qualityChangeFunction);
+    }
+  }
+  /**
+   * A mixin function that adds the `representations` api to an instance
+   * of the VhsHandler class
+   *
+   * @param {VhsHandler} vhsHandler - An instance of VhsHandler to add the
+   * representation API into
+   */
+
+  const renditionSelectionMixin = function (vhsHandler) {
+    // Add a single API-specific function to the VhsHandler instance
+    vhsHandler.representations = () => {
+      const main = vhsHandler.playlistController_.main();
+      const playlists = isAudioOnly(main) ? vhsHandler.playlistController_.getAudioTrackPlaylists_() : main.playlists;
+      if (!playlists) {
+        return [];
+      }
+      return playlists.filter(media => !isIncompatible(media)).map((e, i) => new Representation(vhsHandler, e, e.id));
+    };
+  };
+
+  /**
+   * @file playback-watcher.js
+   *
+   * Playback starts, and now my watch begins. It shall not end until my death. I shall
+   * take no wait, hold no uncleared timeouts, father no bad seeks. I shall wear no crowns
+   * and win no glory. I shall live and die at my post. I am the corrector of the underflow.
+   * I am the watcher of gaps. I am the shield that guards the realms of seekable. I pledge
+   * my life and honor to the Playback Watch, for this Player and all the Players to come.
+   */
+
+  const timerCancelEvents = ['seeking', 'seeked', 'pause', 'playing', 'error'];
+  /**
+   * @class PlaybackWatcher
+   */
+
+  class PlaybackWatcher {
+    /**
+     * Represents an PlaybackWatcher object.
+     *
+     * @class
+     * @param {Object} options an object that includes the tech and settings
+     */
+    constructor(options) {
+      this.playlistController_ = options.playlistController;
+      this.tech_ = options.tech;
+      this.seekable = options.seekable;
+      this.allowSeeksWithinUnsafeLiveWindow = options.allowSeeksWithinUnsafeLiveWindow;
+      this.liveRangeSafeTimeDelta = options.liveRangeSafeTimeDelta;
+      this.media = options.media;
+      this.consecutiveUpdates = 0;
+      this.lastRecordedTime = null;
+      this.checkCurrentTimeTimeout_ = null;
+      this.logger_ = logger('PlaybackWatcher');
+      this.logger_('initialize');
+      const playHandler = () => this.monitorCurrentTime_();
+      const canPlayHandler = () => this.monitorCurrentTime_();
+      const waitingHandler = () => this.techWaiting_();
+      const cancelTimerHandler = () => this.resetTimeUpdate_();
+      const pc = this.playlistController_;
+      const loaderTypes = ['main', 'subtitle', 'audio'];
+      const loaderChecks = {};
+      loaderTypes.forEach(type => {
+        loaderChecks[type] = {
+          reset: () => this.resetSegmentDownloads_(type),
+          updateend: () => this.checkSegmentDownloads_(type)
+        };
+        pc[`${type}SegmentLoader_`].on('appendsdone', loaderChecks[type].updateend); // If a rendition switch happens during a playback stall where the buffer
+        // isn't changing we want to reset. We cannot assume that the new rendition
+        // will also be stalled, until after new appends.
+
+        pc[`${type}SegmentLoader_`].on('playlistupdate', loaderChecks[type].reset); // Playback stalls should not be detected right after seeking.
+        // This prevents one segment playlists (single vtt or single segment content)
+        // from being detected as stalling. As the buffer will not change in those cases, since
+        // the buffer is the entire video duration.
+
+        this.tech_.on(['seeked', 'seeking'], loaderChecks[type].reset);
+      });
+      /**
+       * We check if a seek was into a gap through the following steps:
+       * 1. We get a seeking event and we do not get a seeked event. This means that
+       *    a seek was attempted but not completed.
+       * 2. We run `fixesBadSeeks_` on segment loader appends. This means that we already
+       *    removed everything from our buffer and appended a segment, and should be ready
+       *    to check for gaps.
+       */
+
+      const setSeekingHandlers = fn => {
+        ['main', 'audio'].forEach(type => {
+          pc[`${type}SegmentLoader_`][fn]('appended', this.seekingAppendCheck_);
+        });
+      };
+      this.seekingAppendCheck_ = () => {
+        if (this.fixesBadSeeks_()) {
+          this.consecutiveUpdates = 0;
+          this.lastRecordedTime = this.tech_.currentTime();
+          setSeekingHandlers('off');
+        }
+      };
+      this.clearSeekingAppendCheck_ = () => setSeekingHandlers('off');
+      this.watchForBadSeeking_ = () => {
+        this.clearSeekingAppendCheck_();
+        setSeekingHandlers('on');
+      };
+      this.tech_.on('seeked', this.clearSeekingAppendCheck_);
+      this.tech_.on('seeking', this.watchForBadSeeking_);
+      this.tech_.on('waiting', waitingHandler);
+      this.tech_.on(timerCancelEvents, cancelTimerHandler);
+      this.tech_.on('canplay', canPlayHandler);
+      /*
+        An edge case exists that results in gaps not being skipped when they exist at the beginning of a stream. This case
+        is surfaced in one of two ways:
+         1)  The `waiting` event is fired before the player has buffered content, making it impossible
+            to find or skip the gap. The `waiting` event is followed by a `play` event. On first play
+            we can check if playback is stalled due to a gap, and skip the gap if necessary.
+        2)  A source with a gap at the beginning of the stream is loaded programatically while the player
+            is in a playing state. To catch this case, it's important that our one-time play listener is setup
+            even if the player is in a playing state
+      */
+
+      this.tech_.one('play', playHandler); // Define the dispose function to clean up our events
+
+      this.dispose = () => {
+        this.clearSeekingAppendCheck_();
+        this.logger_('dispose');
+        this.tech_.off('waiting', waitingHandler);
+        this.tech_.off(timerCancelEvents, cancelTimerHandler);
+        this.tech_.off('canplay', canPlayHandler);
+        this.tech_.off('play', playHandler);
+        this.tech_.off('seeking', this.watchForBadSeeking_);
+        this.tech_.off('seeked', this.clearSeekingAppendCheck_);
+        loaderTypes.forEach(type => {
+          pc[`${type}SegmentLoader_`].off('appendsdone', loaderChecks[type].updateend);
+          pc[`${type}SegmentLoader_`].off('playlistupdate', loaderChecks[type].reset);
+          this.tech_.off(['seeked', 'seeking'], loaderChecks[type].reset);
+        });
+        if (this.checkCurrentTimeTimeout_) {
+          window.clearTimeout(this.checkCurrentTimeTimeout_);
+        }
+        this.resetTimeUpdate_();
+      };
+    }
+    /**
+     * Periodically check current time to see if playback stopped
+     *
+     * @private
+     */
+
+    monitorCurrentTime_() {
+      this.checkCurrentTime_();
+      if (this.checkCurrentTimeTimeout_) {
+        window.clearTimeout(this.checkCurrentTimeTimeout_);
+      } // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
+
+      this.checkCurrentTimeTimeout_ = window.setTimeout(this.monitorCurrentTime_.bind(this), 250);
+    }
+    /**
+     * Reset stalled download stats for a specific type of loader
+     *
+     * @param {string} type
+     *        The segment loader type to check.
+     *
+     * @listens SegmentLoader#playlistupdate
+     * @listens Tech#seeking
+     * @listens Tech#seeked
+     */
+
+    resetSegmentDownloads_(type) {
+      const loader = this.playlistController_[`${type}SegmentLoader_`];
+      if (this[`${type}StalledDownloads_`] > 0) {
+        this.logger_(`resetting possible stalled download count for ${type} loader`);
+      }
+      this[`${type}StalledDownloads_`] = 0;
+      this[`${type}Buffered_`] = loader.buffered_();
+    }
+    /**
+     * Checks on every segment `appendsdone` to see
+     * if segment appends are making progress. If they are not
+     * and we are still downloading bytes. We exclude the playlist.
+     *
+     * @param {string} type
+     *        The segment loader type to check.
+     *
+     * @listens SegmentLoader#appendsdone
+     */
+
+    checkSegmentDownloads_(type) {
+      const pc = this.playlistController_;
+      const loader = pc[`${type}SegmentLoader_`];
+      const buffered = loader.buffered_();
+      const isBufferedDifferent = isRangeDifferent(this[`${type}Buffered_`], buffered);
+      this[`${type}Buffered_`] = buffered; // if another watcher is going to fix the issue or
+      // the buffered value for this loader changed
+      // appends are working
+
+      if (isBufferedDifferent) {
+        this.resetSegmentDownloads_(type);
+        return;
+      }
+      this[`${type}StalledDownloads_`]++;
+      this.logger_(`found #${this[`${type}StalledDownloads_`]} ${type} appends that did not increase buffer (possible stalled download)`, {
+        playlistId: loader.playlist_ && loader.playlist_.id,
+        buffered: timeRangesToArray(buffered)
+      }); // after 10 possibly stalled appends with no reset, exclude
+
+      if (this[`${type}StalledDownloads_`] < 10) {
+        return;
+      }
+      this.logger_(`${type} loader stalled download exclusion`);
+      this.resetSegmentDownloads_(type);
+      this.tech_.trigger({
+        type: 'usage',
+        name: `vhs-${type}-download-exclusion`
+      });
+      if (type === 'subtitle') {
+        return;
+      } // TODO: should we exclude audio tracks rather than main tracks
+      // when type is audio?
+
+      pc.excludePlaylist({
+        error: {
+          message: `Excessive ${type} segment downloading detected.`
+        },
+        playlistExclusionDuration: Infinity
+      });
+    }
+    /**
+     * The purpose of this function is to emulate the "waiting" event on
+     * browsers that do not emit it when they are waiting for more
+     * data to continue playback
+     *
+     * @private
+     */
+
+    checkCurrentTime_() {
+      if (this.tech_.paused() || this.tech_.seeking()) {
+        return;
+      }
+      const currentTime = this.tech_.currentTime();
+      const buffered = this.tech_.buffered();
+      if (this.lastRecordedTime === currentTime && (!buffered.length || currentTime + SAFE_TIME_DELTA >= buffered.end(buffered.length - 1))) {
+        // If current time is at the end of the final buffered region, then any playback
+        // stall is most likely caused by buffering in a low bandwidth environment. The tech
+        // should fire a `waiting` event in this scenario, but due to browser and tech
+        // inconsistencies. Calling `techWaiting_` here allows us to simulate
+        // responding to a native `waiting` event when the tech fails to emit one.
+        return this.techWaiting_();
+      }
+      if (this.consecutiveUpdates >= 5 && currentTime === this.lastRecordedTime) {
+        this.consecutiveUpdates++;
+        this.waiting_();
+      } else if (currentTime === this.lastRecordedTime) {
+        this.consecutiveUpdates++;
+      } else {
+        this.consecutiveUpdates = 0;
+        this.lastRecordedTime = currentTime;
+      }
+    }
+    /**
+     * Resets the 'timeupdate' mechanism designed to detect that we are stalled
+     *
+     * @private
+     */
+
+    resetTimeUpdate_() {
+      this.consecutiveUpdates = 0;
+    }
+    /**
+     * Fixes situations where there's a bad seek
+     *
+     * @return {boolean} whether an action was taken to fix the seek
+     * @private
+     */
+
+    fixesBadSeeks_() {
+      const seeking = this.tech_.seeking();
+      if (!seeking) {
+        return false;
+      } // TODO: It's possible that these seekable checks should be moved out of this function
+      // and into a function that runs on seekablechange. It's also possible that we only need
+      // afterSeekableWindow as the buffered check at the bottom is good enough to handle before
+      // seekable range.
+
+      const seekable = this.seekable();
+      const currentTime = this.tech_.currentTime();
+      const isAfterSeekableRange = this.afterSeekableWindow_(seekable, currentTime, this.media(), this.allowSeeksWithinUnsafeLiveWindow);
+      let seekTo;
+      if (isAfterSeekableRange) {
+        const seekableEnd = seekable.end(seekable.length - 1); // sync to live point (if VOD, our seekable was updated and we're simply adjusting)
+
+        seekTo = seekableEnd;
+      }
+      if (this.beforeSeekableWindow_(seekable, currentTime)) {
+        const seekableStart = seekable.start(0); // sync to the beginning of the live window
+        // provide a buffer of .1 seconds to handle rounding/imprecise numbers
+
+        seekTo = seekableStart + (
+        // if the playlist is too short and the seekable range is an exact time (can
+        // happen in live with a 3 segment playlist), then don't use a time delta
+        seekableStart === seekable.end(0) ? 0 : SAFE_TIME_DELTA);
+      }
+      if (typeof seekTo !== 'undefined') {
+        this.logger_(`Trying to seek outside of seekable at time ${currentTime} with ` + `seekable range ${printableRange(seekable)}. Seeking to ` + `${seekTo}.`);
+        this.tech_.setCurrentTime(seekTo);
+        return true;
+      }
+      const sourceUpdater = this.playlistController_.sourceUpdater_;
+      const buffered = this.tech_.buffered();
+      const audioBuffered = sourceUpdater.audioBuffer ? sourceUpdater.audioBuffered() : null;
+      const videoBuffered = sourceUpdater.videoBuffer ? sourceUpdater.videoBuffered() : null;
+      const media = this.media(); // verify that at least two segment durations or one part duration have been
+      // appended before checking for a gap.
+
+      const minAppendedDuration = media.partTargetDuration ? media.partTargetDuration : (media.targetDuration - TIME_FUDGE_FACTOR) * 2; // verify that at least two segment durations have been
+      // appended before checking for a gap.
+
+      const bufferedToCheck = [audioBuffered, videoBuffered];
+      for (let i = 0; i < bufferedToCheck.length; i++) {
+        // skip null buffered
+        if (!bufferedToCheck[i]) {
+          continue;
+        }
+        const timeAhead = timeAheadOf(bufferedToCheck[i], currentTime); // if we are less than two video/audio segment durations or one part
+        // duration behind we haven't appended enough to call this a bad seek.
+
+        if (timeAhead < minAppendedDuration) {
+          return false;
+        }
+      }
+      const nextRange = findNextRange(buffered, currentTime); // we have appended enough content, but we don't have anything buffered
+      // to seek over the gap
+
+      if (nextRange.length === 0) {
+        return false;
+      }
+      seekTo = nextRange.start(0) + SAFE_TIME_DELTA;
+      this.logger_(`Buffered region starts (${nextRange.start(0)}) ` + ` just beyond seek point (${currentTime}). Seeking to ${seekTo}.`);
+      this.tech_.setCurrentTime(seekTo);
+      return true;
+    }
+    /**
+     * Handler for situations when we determine the player is waiting.
+     *
+     * @private
+     */
+
+    waiting_() {
+      if (this.techWaiting_()) {
+        return;
+      } // All tech waiting checks failed. Use last resort correction
+
+      const currentTime = this.tech_.currentTime();
+      const buffered = this.tech_.buffered();
+      const currentRange = findRange(buffered, currentTime); // Sometimes the player can stall for unknown reasons within a contiguous buffered
+      // region with no indication that anything is amiss (seen in Firefox). Seeking to
+      // currentTime is usually enough to kickstart the player. This checks that the player
+      // is currently within a buffered region before attempting a corrective seek.
+      // Chrome does not appear to continue `timeupdate` events after a `waiting` event
+      // until there is ~ 3 seconds of forward buffer available. PlaybackWatcher should also
+      // make sure there is ~3 seconds of forward buffer before taking any corrective action
+      // to avoid triggering an `unknownwaiting` event when the network is slow.
+
+      if (currentRange.length && currentTime + 3 <= currentRange.end(0)) {
+        this.resetTimeUpdate_();
+        this.tech_.setCurrentTime(currentTime);
+        this.logger_(`Stopped at ${currentTime} while inside a buffered region ` + `[${currentRange.start(0)} -> ${currentRange.end(0)}]. Attempting to resume ` + 'playback by seeking to the current time.'); // unknown waiting corrections may be useful for monitoring QoS
+
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-unknown-waiting'
+        });
+        return;
+      }
+    }
+    /**
+     * Handler for situations when the tech fires a `waiting` event
+     *
+     * @return {boolean}
+     *         True if an action (or none) was needed to correct the waiting. False if no
+     *         checks passed
+     * @private
+     */
+
+    techWaiting_() {
+      const seekable = this.seekable();
+      const currentTime = this.tech_.currentTime();
+      if (this.tech_.seeking()) {
+        // Tech is seeking or already waiting on another action, no action needed
+        return true;
+      }
+      if (this.beforeSeekableWindow_(seekable, currentTime)) {
+        const livePoint = seekable.end(seekable.length - 1);
+        this.logger_(`Fell out of live window at time ${currentTime}. Seeking to ` + `live point (seekable end) ${livePoint}`);
+        this.resetTimeUpdate_();
+        this.tech_.setCurrentTime(livePoint); // live window resyncs may be useful for monitoring QoS
+
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-live-resync'
+        });
+        return true;
+      }
+      const sourceUpdater = this.tech_.vhs.playlistController_.sourceUpdater_;
+      const buffered = this.tech_.buffered();
+      const videoUnderflow = this.videoUnderflow_({
+        audioBuffered: sourceUpdater.audioBuffered(),
+        videoBuffered: sourceUpdater.videoBuffered(),
+        currentTime
+      });
+      if (videoUnderflow) {
+        // Even though the video underflowed and was stuck in a gap, the audio overplayed
+        // the gap, leading currentTime into a buffered range. Seeking to currentTime
+        // allows the video to catch up to the audio position without losing any audio
+        // (only suffering ~3 seconds of frozen video and a pause in audio playback).
+        this.resetTimeUpdate_();
+        this.tech_.setCurrentTime(currentTime); // video underflow may be useful for monitoring QoS
+
+        this.tech_.trigger({
+          type: 'usage',
+          name: 'vhs-video-underflow'
+        });
+        return true;
+      }
+      const nextRange = findNextRange(buffered, currentTime); // check for gap
+
+      if (nextRange.length > 0) {
+        this.logger_(`Stopped at ${currentTime} and seeking to ${nextRange.start(0)}`);
+        this.resetTimeUpdate_();
+        this.skipTheGap_(currentTime);
+        return true;
+      } // All checks failed. Returning false to indicate failure to correct waiting
+
+      return false;
+    }
+    afterSeekableWindow_(seekable, currentTime, playlist, allowSeeksWithinUnsafeLiveWindow = false) {
+      if (!seekable.length) {
+        // we can't make a solid case if there's no seekable, default to false
+        return false;
+      }
+      let allowedEnd = seekable.end(seekable.length - 1) + SAFE_TIME_DELTA;
+      const isLive = !playlist.endList;
+      const isLLHLS = typeof playlist.partTargetDuration === 'number';
+      if (isLive && (isLLHLS || allowSeeksWithinUnsafeLiveWindow)) {
+        allowedEnd = seekable.end(seekable.length - 1) + playlist.targetDuration * 3;
+      }
+      if (currentTime > allowedEnd) {
+        return true;
+      }
+      return false;
+    }
+    beforeSeekableWindow_(seekable, currentTime) {
+      if (seekable.length &&
+      // can't fall before 0 and 0 seekable start identifies VOD stream
+      seekable.start(0) > 0 && currentTime < seekable.start(0) - this.liveRangeSafeTimeDelta) {
+        return true;
+      }
+      return false;
+    }
+    videoUnderflow_({
+      videoBuffered,
+      audioBuffered,
+      currentTime
+    }) {
+      // audio only content will not have video underflow :)
+      if (!videoBuffered) {
+        return;
+      }
+      let gap; // find a gap in demuxed content.
+
+      if (videoBuffered.length && audioBuffered.length) {
+        // in Chrome audio will continue to play for ~3s when we run out of video
+        // so we have to check that the video buffer did have some buffer in the
+        // past.
+        const lastVideoRange = findRange(videoBuffered, currentTime - 3);
+        const videoRange = findRange(videoBuffered, currentTime);
+        const audioRange = findRange(audioBuffered, currentTime);
+        if (audioRange.length && !videoRange.length && lastVideoRange.length) {
+          gap = {
+            start: lastVideoRange.end(0),
+            end: audioRange.end(0)
+          };
+        } // find a gap in muxed content.
+      } else {
+        const nextRange = findNextRange(videoBuffered, currentTime); // Even if there is no available next range, there is still a possibility we are
+        // stuck in a gap due to video underflow.
+
+        if (!nextRange.length) {
+          gap = this.gapFromVideoUnderflow_(videoBuffered, currentTime);
+        }
+      }
+      if (gap) {
+        this.logger_(`Encountered a gap in video from ${gap.start} to ${gap.end}. ` + `Seeking to current time ${currentTime}`);
+        return true;
+      }
+      return false;
+    }
+    /**
+     * Timer callback. If playback still has not proceeded, then we seek
+     * to the start of the next buffered region.
+     *
+     * @private
+     */
+
+    skipTheGap_(scheduledCurrentTime) {
+      const buffered = this.tech_.buffered();
+      const currentTime = this.tech_.currentTime();
+      const nextRange = findNextRange(buffered, currentTime);
+      this.resetTimeUpdate_();
+      if (nextRange.length === 0 || currentTime !== scheduledCurrentTime) {
+        return;
+      }
+      this.logger_('skipTheGap_:', 'currentTime:', currentTime, 'scheduled currentTime:', scheduledCurrentTime, 'nextRange start:', nextRange.start(0)); // only seek if we still have not played
+
+      this.tech_.setCurrentTime(nextRange.start(0) + TIME_FUDGE_FACTOR);
+      this.tech_.trigger({
+        type: 'usage',
+        name: 'vhs-gap-skip'
+      });
+    }
+    gapFromVideoUnderflow_(buffered, currentTime) {
+      // At least in Chrome, if there is a gap in the video buffer, the audio will continue
+      // playing for ~3 seconds after the video gap starts. This is done to account for
+      // video buffer underflow/underrun (note that this is not done when there is audio
+      // buffer underflow/underrun -- in that case the video will stop as soon as it
+      // encounters the gap, as audio stalls are more noticeable/jarring to a user than
+      // video stalls). The player's time will reflect the playthrough of audio, so the
+      // time will appear as if we are in a buffered region, even if we are stuck in a
+      // "gap."
+      //
+      // Example:
+      // video buffer:   0 => 10.1, 10.2 => 20
+      // audio buffer:   0 => 20
+      // overall buffer: 0 => 10.1, 10.2 => 20
+      // current time: 13
+      //
+      // Chrome's video froze at 10 seconds, where the video buffer encountered the gap,
+      // however, the audio continued playing until it reached ~3 seconds past the gap
+      // (13 seconds), at which point it stops as well. Since current time is past the
+      // gap, findNextRange will return no ranges.
+      //
+      // To check for this issue, we see if there is a gap that starts somewhere within
+      // a 3 second range (3 seconds +/- 1 second) back from our current time.
+      const gaps = findGaps(buffered);
+      for (let i = 0; i < gaps.length; i++) {
+        const start = gaps.start(i);
+        const end = gaps.end(i); // gap is starts no more than 4 seconds back
+
+        if (currentTime - start < 4 && currentTime - start > 2) {
+          return {
+            start,
+            end
+          };
+        }
+      }
+      return null;
+    }
+  }
+  const defaultOptions = {
+    errorInterval: 30,
+    getSource(next) {
+      const tech = this.tech({
+        IWillNotUseThisInPlugins: true
+      });
+      const sourceObj = tech.currentSource_ || this.currentSource();
+      return next(sourceObj);
+    }
+  };
+  /**
+   * Main entry point for the plugin
+   *
+   * @param {Player} player a reference to a videojs Player instance
+   * @param {Object} [options] an object with plugin options
+   * @private
+   */
+
+  const initPlugin = function (player, options) {
+    let lastCalled = 0;
+    let seekTo = 0;
+    const localOptions = merge(defaultOptions, options);
+    player.ready(() => {
+      player.trigger({
+        type: 'usage',
+        name: 'vhs-error-reload-initialized'
+      });
+    });
+    /**
+     * Player modifications to perform that must wait until `loadedmetadata`
+     * has been triggered
+     *
+     * @private
+     */
+
+    const loadedMetadataHandler = function () {
+      if (seekTo) {
+        player.currentTime(seekTo);
+      }
+    };
+    /**
+     * Set the source on the player element, play, and seek if necessary
+     *
+     * @param {Object} sourceObj An object specifying the source url and mime-type to play
+     * @private
+     */
+
+    const setSource = function (sourceObj) {
+      if (sourceObj === null || sourceObj === undefined) {
+        return;
+      }
+      seekTo = player.duration() !== Infinity && player.currentTime() || 0;
+      player.one('loadedmetadata', loadedMetadataHandler);
+      player.src(sourceObj);
+      player.trigger({
+        type: 'usage',
+        name: 'vhs-error-reload'
+      });
+      player.play();
+    };
+    /**
+     * Attempt to get a source from either the built-in getSource function
+     * or a custom function provided via the options
+     *
+     * @private
+     */
+
+    const errorHandler = function () {
+      // Do not attempt to reload the source if a source-reload occurred before
+      // 'errorInterval' time has elapsed since the last source-reload
+      if (Date.now() - lastCalled < localOptions.errorInterval * 1000) {
+        player.trigger({
+          type: 'usage',
+          name: 'vhs-error-reload-canceled'
+        });
+        return;
+      }
+      if (!localOptions.getSource || typeof localOptions.getSource !== 'function') {
+        videojs.log.error('ERROR: reloadSourceOnError - The option getSource must be a function!');
+        return;
+      }
+      lastCalled = Date.now();
+      return localOptions.getSource.call(player, setSource);
+    };
+    /**
+     * Unbind any event handlers that were bound by the plugin
+     *
+     * @private
+     */
+
+    const cleanupEvents = function () {
+      player.off('loadedmetadata', loadedMetadataHandler);
+      player.off('error', errorHandler);
+      player.off('dispose', cleanupEvents);
+    };
+    /**
+     * Cleanup before re-initializing the plugin
+     *
+     * @param {Object} [newOptions] an object with plugin options
+     * @private
+     */
+
+    const reinitPlugin = function (newOptions) {
+      cleanupEvents();
+      initPlugin(player, newOptions);
+    };
+    player.on('error', errorHandler);
+    player.on('dispose', cleanupEvents); // Overwrite the plugin function so that we can correctly cleanup before
+    // initializing the plugin
+
+    player.reloadSourceOnError = reinitPlugin;
+  };
+  /**
+   * Reload the source when an error is detected as long as there
+   * wasn't an error previously within the last 30 seconds
+   *
+   * @param {Object} [options] an object with plugin options
+   */
+
+  const reloadSourceOnError = function (options) {
+    initPlugin(this, options);
+  };
+  var version$4 = "3.12.1";
+  var version$3 = "7.0.3";
+  var version$2 = "1.3.0";
+  var version$1 = "7.1.0";
+  var version = "4.0.1";
+
+  /**
+   * @file videojs-http-streaming.js
+   *
+   * The main file for the VHS project.
+   * License: https://github.com/videojs/videojs-http-streaming/blob/main/LICENSE
+   */
+  const Vhs = {
+    PlaylistLoader,
+    Playlist,
+    utils,
+    STANDARD_PLAYLIST_SELECTOR: lastBandwidthSelector,
+    INITIAL_PLAYLIST_SELECTOR: lowestBitrateCompatibleVariantSelector,
+    lastBandwidthSelector,
+    movingAverageBandwidthSelector,
+    comparePlaylistBandwidth,
+    comparePlaylistResolution,
+    xhr: xhrFactory()
+  }; // Define getter/setters for config properties
+
+  Object.keys(Config).forEach(prop => {
+    Object.defineProperty(Vhs, prop, {
+      get() {
+        videojs.log.warn(`using Vhs.${prop} is UNSAFE be sure you know what you are doing`);
+        return Config[prop];
+      },
+      set(value) {
+        videojs.log.warn(`using Vhs.${prop} is UNSAFE be sure you know what you are doing`);
+        if (typeof value !== 'number' || value < 0) {
+          videojs.log.warn(`value of Vhs.${prop} must be greater than or equal to 0`);
+          return;
+        }
+        Config[prop] = value;
+      }
+    });
+  });
+  const LOCAL_STORAGE_KEY = 'videojs-vhs';
+  /**
+   * Updates the selectedIndex of the QualityLevelList when a mediachange happens in vhs.
+   *
+   * @param {QualityLevelList} qualityLevels The QualityLevelList to update.
+   * @param {PlaylistLoader} playlistLoader PlaylistLoader containing the new media info.
+   * @function handleVhsMediaChange
+   */
+
+  const handleVhsMediaChange = function (qualityLevels, playlistLoader) {
+    const newPlaylist = playlistLoader.media();
+    let selectedIndex = -1;
+    for (let i = 0; i < qualityLevels.length; i++) {
+      if (qualityLevels[i].id === newPlaylist.id) {
+        selectedIndex = i;
+        break;
+      }
+    }
+    qualityLevels.selectedIndex_ = selectedIndex;
+    qualityLevels.trigger({
+      selectedIndex,
+      type: 'change'
+    });
+  };
+  /**
+   * Adds quality levels to list once playlist metadata is available
+   *
+   * @param {QualityLevelList} qualityLevels The QualityLevelList to attach events to.
+   * @param {Object} vhs Vhs object to listen to for media events.
+   * @function handleVhsLoadedMetadata
+   */
+
+  const handleVhsLoadedMetadata = function (qualityLevels, vhs) {
+    vhs.representations().forEach(rep => {
+      qualityLevels.addQualityLevel(rep);
+    });
+    handleVhsMediaChange(qualityLevels, vhs.playlists);
+  }; // VHS is a source handler, not a tech. Make sure attempts to use it
+  // as one do not cause exceptions.
+
+  Vhs.canPlaySource = function () {
+    return videojs.log.warn('VHS is no longer a tech. Please remove it from ' + 'your player\'s techOrder.');
+  };
+  const emeKeySystems = (keySystemOptions, mainPlaylist, audioPlaylist) => {
+    if (!keySystemOptions) {
+      return keySystemOptions;
+    }
+    let codecs = {};
+    if (mainPlaylist && mainPlaylist.attributes && mainPlaylist.attributes.CODECS) {
+      codecs = unwrapCodecList(parseCodecs(mainPlaylist.attributes.CODECS));
+    }
+    if (audioPlaylist && audioPlaylist.attributes && audioPlaylist.attributes.CODECS) {
+      codecs.audio = audioPlaylist.attributes.CODECS;
+    }
+    const videoContentType = getMimeForCodec(codecs.video);
+    const audioContentType = getMimeForCodec(codecs.audio); // upsert the content types based on the selected playlist
+
+    const keySystemContentTypes = {};
+    for (const keySystem in keySystemOptions) {
+      keySystemContentTypes[keySystem] = {};
+      if (audioContentType) {
+        keySystemContentTypes[keySystem].audioContentType = audioContentType;
+      }
+      if (videoContentType) {
+        keySystemContentTypes[keySystem].videoContentType = videoContentType;
+      } // Default to using the video playlist's PSSH even though they may be different, as
+      // videojs-contrib-eme will only accept one in the options.
+      //
+      // This shouldn't be an issue for most cases as early intialization will handle all
+      // unique PSSH values, and if they aren't, then encrypted events should have the
+      // specific information needed for the unique license.
+
+      if (mainPlaylist.contentProtection && mainPlaylist.contentProtection[keySystem] && mainPlaylist.contentProtection[keySystem].pssh) {
+        keySystemContentTypes[keySystem].pssh = mainPlaylist.contentProtection[keySystem].pssh;
+      } // videojs-contrib-eme accepts the option of specifying: 'com.some.cdm': 'url'
+      // so we need to prevent overwriting the URL entirely
+
+      if (typeof keySystemOptions[keySystem] === 'string') {
+        keySystemContentTypes[keySystem].url = keySystemOptions[keySystem];
+      }
+    }
+    return merge(keySystemOptions, keySystemContentTypes);
+  };
+  /**
+   * @typedef {Object} KeySystems
+   *
+   * keySystems configuration for https://github.com/videojs/videojs-contrib-eme
+   * Note: not all options are listed here.
+   *
+   * @property {Uint8Array} [pssh]
+   *           Protection System Specific Header
+   */
+
+  /**
+   * Goes through all the playlists and collects an array of KeySystems options objects
+   * containing each playlist's keySystems and their pssh values, if available.
+   *
+   * @param {Object[]} playlists
+   *        The playlists to look through
+   * @param {string[]} keySystems
+   *        The keySystems to collect pssh values for
+   *
+   * @return {KeySystems[]}
+   *         An array of KeySystems objects containing available key systems and their
+   *         pssh values
+   */
+
+  const getAllPsshKeySystemsOptions = (playlists, keySystems) => {
+    return playlists.reduce((keySystemsArr, playlist) => {
+      if (!playlist.contentProtection) {
+        return keySystemsArr;
+      }
+      const keySystemsOptions = keySystems.reduce((keySystemsObj, keySystem) => {
+        const keySystemOptions = playlist.contentProtection[keySystem];
+        if (keySystemOptions && keySystemOptions.pssh) {
+          keySystemsObj[keySystem] = {
+            pssh: keySystemOptions.pssh
+          };
+        }
+        return keySystemsObj;
+      }, {});
+      if (Object.keys(keySystemsOptions).length) {
+        keySystemsArr.push(keySystemsOptions);
+      }
+      return keySystemsArr;
+    }, []);
+  };
+  /**
+   * Returns a promise that waits for the
+   * [eme plugin](https://github.com/videojs/videojs-contrib-eme) to create a key session.
+   *
+   * Works around https://bugs.chromium.org/p/chromium/issues/detail?id=895449 in non-IE11
+   * browsers.
+   *
+   * As per the above ticket, this is particularly important for Chrome, where, if
+   * unencrypted content is appended before encrypted content and the key session has not
+   * been created, a MEDIA_ERR_DECODE will be thrown once the encrypted content is reached
+   * during playback.
+   *
+   * @param {Object} player
+   *        The player instance
+   * @param {Object[]} sourceKeySystems
+   *        The key systems options from the player source
+   * @param {Object} [audioMedia]
+   *        The active audio media playlist (optional)
+   * @param {Object[]} mainPlaylists
+   *        The playlists found on the main playlist object
+   *
+   * @return {Object}
+   *         Promise that resolves when the key session has been created
+   */
+
+  const waitForKeySessionCreation = ({
+    player,
+    sourceKeySystems,
+    audioMedia,
+    mainPlaylists
+  }) => {
+    if (!player.eme.initializeMediaKeys) {
+      return Promise.resolve();
+    } // TODO should all audio PSSH values be initialized for DRM?
+    //
+    // All unique video rendition pssh values are initialized for DRM, but here only
+    // the initial audio playlist license is initialized. In theory, an encrypted
+    // event should be fired if the user switches to an alternative audio playlist
+    // where a license is required, but this case hasn't yet been tested. In addition, there
+    // may be many alternate audio playlists unlikely to be used (e.g., multiple different
+    // languages).
+
+    const playlists = audioMedia ? mainPlaylists.concat([audioMedia]) : mainPlaylists;
+    const keySystemsOptionsArr = getAllPsshKeySystemsOptions(playlists, Object.keys(sourceKeySystems));
+    const initializationFinishedPromises = [];
+    const keySessionCreatedPromises = []; // Since PSSH values are interpreted as initData, EME will dedupe any duplicates. The
+    // only place where it should not be deduped is for ms-prefixed APIs, but
+    // the existence of modern EME APIs in addition to
+    // ms-prefixed APIs on Edge should prevent this from being a concern.
+    // initializeMediaKeys also won't use the webkit-prefixed APIs.
+
+    keySystemsOptionsArr.forEach(keySystemsOptions => {
+      keySessionCreatedPromises.push(new Promise((resolve, reject) => {
+        player.tech_.one('keysessioncreated', resolve);
+      }));
+      initializationFinishedPromises.push(new Promise((resolve, reject) => {
+        player.eme.initializeMediaKeys({
+          keySystems: keySystemsOptions
+        }, err => {
+          if (err) {
+            reject(err);
+            return;
+          }
+          resolve();
+        });
+      }));
+    }); // The reasons Promise.race is chosen over Promise.any:
+    //
+    // * Promise.any is only available in Safari 14+.
+    // * None of these promises are expected to reject. If they do reject, it might be
+    //   better here for the race to surface the rejection, rather than mask it by using
+    //   Promise.any.
+
+    return Promise.race([
+    // If a session was previously created, these will all finish resolving without
+    // creating a new session, otherwise it will take until the end of all license
+    // requests, which is why the key session check is used (to make setup much faster).
+    Promise.all(initializationFinishedPromises),
+    // Once a single session is created, the browser knows DRM will be used.
+    Promise.race(keySessionCreatedPromises)]);
+  };
+  /**
+   * If the [eme](https://github.com/videojs/videojs-contrib-eme) plugin is available, and
+   * there are keySystems on the source, sets up source options to prepare the source for
+   * eme.
+   *
+   * @param {Object} player
+   *        The player instance
+   * @param {Object[]} sourceKeySystems
+   *        The key systems options from the player source
+   * @param {Object} media
+   *        The active media playlist
+   * @param {Object} [audioMedia]
+   *        The active audio media playlist (optional)
+   *
+   * @return {boolean}
+   *         Whether or not options were configured and EME is available
+   */
+
+  const setupEmeOptions = ({
+    player,
+    sourceKeySystems,
+    media,
+    audioMedia
+  }) => {
+    const sourceOptions = emeKeySystems(sourceKeySystems, media, audioMedia);
+    if (!sourceOptions) {
+      return false;
+    }
+    player.currentSource().keySystems = sourceOptions; // eme handles the rest of the setup, so if it is missing
+    // do nothing.
+
+    if (sourceOptions && !player.eme) {
+      videojs.log.warn('DRM encrypted source cannot be decrypted without a DRM plugin');
+      return false;
+    }
+    return true;
+  };
+  const getVhsLocalStorage = () => {
+    if (!window.localStorage) {
+      return null;
+    }
+    const storedObject = window.localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (!storedObject) {
+      return null;
+    }
+    try {
+      return JSON.parse(storedObject);
+    } catch (e) {
+      // someone may have tampered with the value
+      return null;
+    }
+  };
+  const updateVhsLocalStorage = options => {
+    if (!window.localStorage) {
+      return false;
+    }
+    let objectToStore = getVhsLocalStorage();
+    objectToStore = objectToStore ? merge(objectToStore, options) : options;
+    try {
+      window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(objectToStore));
+    } catch (e) {
+      // Throws if storage is full (e.g., always on iOS 5+ Safari private mode, where
+      // storage is set to 0).
+      // https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem#Exceptions
+      // No need to perform any operation.
+      return false;
+    }
+    return objectToStore;
+  };
+  /**
+   * Parses VHS-supported media types from data URIs. See
+   * https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
+   * for information on data URIs.
+   *
+   * @param {string} dataUri
+   *        The data URI
+   *
+   * @return {string|Object}
+   *         The parsed object/string, or the original string if no supported media type
+   *         was found
+   */
+
+  const expandDataUri = dataUri => {
+    if (dataUri.toLowerCase().indexOf('data:application/vnd.videojs.vhs+json,') === 0) {
+      return JSON.parse(dataUri.substring(dataUri.indexOf(',') + 1));
+    } // no known case for this data URI, return the string as-is
+
+    return dataUri;
+  };
+  /**
+   * Adds a request hook to an xhr object
+   *
+   * @param {Object} xhr object to add the onRequest hook to
+   * @param {function} callback hook function for an xhr request
+   */
+
+  const addOnRequestHook = (xhr, callback) => {
+    if (!xhr._requestCallbackSet) {
+      xhr._requestCallbackSet = new Set();
+    }
+    xhr._requestCallbackSet.add(callback);
+  };
+  /**
+   * Adds a response hook to an xhr object
+   *
+   * @param {Object} xhr object to add the onResponse hook to
+   * @param {function} callback hook function for an xhr response
+   */
+
+  const addOnResponseHook = (xhr, callback) => {
+    if (!xhr._responseCallbackSet) {
+      xhr._responseCallbackSet = new Set();
+    }
+    xhr._responseCallbackSet.add(callback);
+  };
+  /**
+   * Removes a request hook on an xhr object, deletes the onRequest set if empty.
+   *
+   * @param {Object} xhr object to remove the onRequest hook from
+   * @param {function} callback hook function to remove
+   */
+
+  const removeOnRequestHook = (xhr, callback) => {
+    if (!xhr._requestCallbackSet) {
+      return;
+    }
+    xhr._requestCallbackSet.delete(callback);
+    if (!xhr._requestCallbackSet.size) {
+      delete xhr._requestCallbackSet;
+    }
+  };
+  /**
+   * Removes a response hook on an xhr object, deletes the onResponse set if empty.
+   *
+   * @param {Object} xhr object to remove the onResponse hook from
+   * @param {function} callback hook function to remove
+   */
+
+  const removeOnResponseHook = (xhr, callback) => {
+    if (!xhr._responseCallbackSet) {
+      return;
+    }
+    xhr._responseCallbackSet.delete(callback);
+    if (!xhr._responseCallbackSet.size) {
+      delete xhr._responseCallbackSet;
+    }
+  };
+  /**
+   * Whether the browser has built-in HLS support.
+   */
+
+  Vhs.supportsNativeHls = function () {
+    if (!document || !document.createElement) {
+      return false;
+    }
+    const video = document.createElement('video'); // native HLS is definitely not supported if HTML5 video isn't
+
+    if (!videojs.getTech('Html5').isSupported()) {
+      return false;
+    } // HLS manifests can go by many mime-types
+
+    const canPlay = [
+    // Apple santioned
+    'application/vnd.apple.mpegurl',
+    // Apple sanctioned for backwards compatibility
+    'audio/mpegurl',
+    // Very common
+    'audio/x-mpegurl',
+    // Very common
+    'application/x-mpegurl',
+    // Included for completeness
+    'video/x-mpegurl', 'video/mpegurl', 'application/mpegurl'];
+    return canPlay.some(function (canItPlay) {
+      return /maybe|probably/i.test(video.canPlayType(canItPlay));
+    });
+  }();
+  Vhs.supportsNativeDash = function () {
+    if (!document || !document.createElement || !videojs.getTech('Html5').isSupported()) {
+      return false;
+    }
+    return /maybe|probably/i.test(document.createElement('video').canPlayType('application/dash+xml'));
+  }();
+  Vhs.supportsTypeNatively = type => {
+    if (type === 'hls') {
+      return Vhs.supportsNativeHls;
+    }
+    if (type === 'dash') {
+      return Vhs.supportsNativeDash;
+    }
+    return false;
+  };
+  /**
+   * VHS is a source handler, not a tech. Make sure attempts to use it
+   * as one do not cause exceptions.
+   */
+
+  Vhs.isSupported = function () {
+    return videojs.log.warn('VHS is no longer a tech. Please remove it from ' + 'your player\'s techOrder.');
+  };
+  /**
+   * A global function for setting an onRequest hook
+   *
+   * @param {function} callback for request modifiction
+   */
+
+  Vhs.xhr.onRequest = function (callback) {
+    addOnRequestHook(Vhs.xhr, callback);
+  };
+  /**
+   * A global function for setting an onResponse hook
+   *
+   * @param {callback} callback for response data retrieval
+   */
+
+  Vhs.xhr.onResponse = function (callback) {
+    addOnResponseHook(Vhs.xhr, callback);
+  };
+  /**
+   * Deletes a global onRequest callback if it exists
+   *
+   * @param {function} callback to delete from the global set
+   */
+
+  Vhs.xhr.offRequest = function (callback) {
+    removeOnRequestHook(Vhs.xhr, callback);
+  };
+  /**
+   * Deletes a global onResponse callback if it exists
+   *
+   * @param {function} callback to delete from the global set
+   */
+
+  Vhs.xhr.offResponse = function (callback) {
+    removeOnResponseHook(Vhs.xhr, callback);
+  };
+  const Component = videojs.getComponent('Component');
+  /**
+   * The Vhs Handler object, where we orchestrate all of the parts
+   * of VHS to interact with video.js
+   *
+   * @class VhsHandler
+   * @extends videojs.Component
+   * @param {Object} source the soruce object
+   * @param {Tech} tech the parent tech object
+   * @param {Object} options optional and required options
+   */
+
+  class VhsHandler extends Component {
+    constructor(source, tech, options) {
+      super(tech, options.vhs); // if a tech level `initialBandwidth` option was passed
+      // use that over the VHS level `bandwidth` option
+
+      if (typeof options.initialBandwidth === 'number') {
+        this.options_.bandwidth = options.initialBandwidth;
+      }
+      this.logger_ = logger('VhsHandler'); // we need access to the player in some cases,
+      // so, get it from Video.js via the `playerId`
+
+      if (tech.options_ && tech.options_.playerId) {
+        const _player = videojs.getPlayer(tech.options_.playerId);
+        this.player_ = _player;
+      }
+      this.tech_ = tech;
+      this.source_ = source;
+      this.stats = {};
+      this.ignoreNextSeekingEvent_ = false;
+      this.setOptions_();
+      if (this.options_.overrideNative && tech.overrideNativeAudioTracks && tech.overrideNativeVideoTracks) {
+        tech.overrideNativeAudioTracks(true);
+        tech.overrideNativeVideoTracks(true);
+      } else if (this.options_.overrideNative && (tech.featuresNativeVideoTracks || tech.featuresNativeAudioTracks)) {
+        // overriding native VHS only works if audio tracks have been emulated
+        // error early if we're misconfigured
+        throw new Error('Overriding native VHS requires emulated tracks. ' + 'See https://git.io/vMpjB');
+      } // listen for fullscreenchange events for this player so that we
+      // can adjust our quality selection quickly
+
+      this.on(document, ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'], event => {
+        const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+        if (fullscreenElement && fullscreenElement.contains(this.tech_.el())) {
+          this.playlistController_.fastQualityChange_();
+        } else {
+          // When leaving fullscreen, since the in page pixel dimensions should be smaller
+          // than full screen, see if there should be a rendition switch down to preserve
+          // bandwidth.
+          this.playlistController_.checkABR_();
+        }
+      });
+      this.on(this.tech_, 'seeking', function () {
+        if (this.ignoreNextSeekingEvent_) {
+          this.ignoreNextSeekingEvent_ = false;
+          return;
+        }
+        this.setCurrentTime(this.tech_.currentTime());
+      });
+      this.on(this.tech_, 'error', function () {
+        // verify that the error was real and we are loaded
+        // enough to have pc loaded.
+        if (this.tech_.error() && this.playlistController_) {
+          this.playlistController_.pauseLoading();
+        }
+      });
+      this.on(this.tech_, 'play', this.play);
+    }
+    /**
+     * Set VHS options based on options from configuration, as well as partial
+     * options to be passed at a later time.
+     *
+     * @param {Object} options A partial chunk of config options
+     */
+
+    setOptions_(options = {}) {
+      this.options_ = merge(this.options_, options); // defaults
+
+      this.options_.withCredentials = this.options_.withCredentials || false;
+      this.options_.limitRenditionByPlayerDimensions = this.options_.limitRenditionByPlayerDimensions === false ? false : true;
+      this.options_.useDevicePixelRatio = this.options_.useDevicePixelRatio || false;
+      this.options_.useBandwidthFromLocalStorage = typeof this.source_.useBandwidthFromLocalStorage !== 'undefined' ? this.source_.useBandwidthFromLocalStorage : this.options_.useBandwidthFromLocalStorage || false;
+      this.options_.useForcedSubtitles = this.options_.useForcedSubtitles || false;
+      this.options_.useNetworkInformationApi = this.options_.useNetworkInformationApi || false;
+      this.options_.useDtsForTimestampOffset = this.options_.useDtsForTimestampOffset || false;
+      this.options_.customTagParsers = this.options_.customTagParsers || [];
+      this.options_.customTagMappers = this.options_.customTagMappers || [];
+      this.options_.cacheEncryptionKeys = this.options_.cacheEncryptionKeys || false;
+      this.options_.llhls = this.options_.llhls === false ? false : true;
+      this.options_.bufferBasedABR = this.options_.bufferBasedABR || false;
+      if (typeof this.options_.playlistExclusionDuration !== 'number') {
+        this.options_.playlistExclusionDuration = 60;
+      }
+      if (typeof this.options_.bandwidth !== 'number') {
+        if (this.options_.useBandwidthFromLocalStorage) {
+          const storedObject = getVhsLocalStorage();
+          if (storedObject && storedObject.bandwidth) {
+            this.options_.bandwidth = storedObject.bandwidth;
+            this.tech_.trigger({
+              type: 'usage',
+              name: 'vhs-bandwidth-from-local-storage'
+            });
+          }
+          if (storedObject && storedObject.throughput) {
+            this.options_.throughput = storedObject.throughput;
+            this.tech_.trigger({
+              type: 'usage',
+              name: 'vhs-throughput-from-local-storage'
+            });
+          }
+        }
+      } // if bandwidth was not set by options or pulled from local storage, start playlist
+      // selection at a reasonable bandwidth
+
+      if (typeof this.options_.bandwidth !== 'number') {
+        this.options_.bandwidth = Config.INITIAL_BANDWIDTH;
+      } // If the bandwidth number is unchanged from the initial setting
+      // then this takes precedence over the enableLowInitialPlaylist option
+
+      this.options_.enableLowInitialPlaylist = this.options_.enableLowInitialPlaylist && this.options_.bandwidth === Config.INITIAL_BANDWIDTH; // grab options passed to player.src
+
+      ['withCredentials', 'useDevicePixelRatio', 'customPixelRatio', 'limitRenditionByPlayerDimensions', 'bandwidth', 'customTagParsers', 'customTagMappers', 'cacheEncryptionKeys', 'playlistSelector', 'initialPlaylistSelector', 'bufferBasedABR', 'liveRangeSafeTimeDelta', 'llhls', 'useForcedSubtitles', 'useNetworkInformationApi', 'useDtsForTimestampOffset', 'exactManifestTimings', 'leastPixelDiffSelector'].forEach(option => {
+        if (typeof this.source_[option] !== 'undefined') {
+          this.options_[option] = this.source_[option];
+        }
+      });
+      this.limitRenditionByPlayerDimensions = this.options_.limitRenditionByPlayerDimensions;
+      this.useDevicePixelRatio = this.options_.useDevicePixelRatio;
+      const customPixelRatio = this.options_.customPixelRatio; // Ensure the custom pixel ratio is a number greater than or equal to 0
+
+      if (typeof customPixelRatio === 'number' && customPixelRatio >= 0) {
+        this.customPixelRatio = customPixelRatio;
+      }
+    } // alias for public method to set options
+
+    setOptions(options = {}) {
+      this.setOptions_(options);
+    }
+    /**
+     * called when player.src gets called, handle a new source
+     *
+     * @param {Object} src the source object to handle
+     */
+
+    src(src, type) {
+      // do nothing if the src is falsey
+      if (!src) {
+        return;
+      }
+      this.setOptions_(); // add main playlist controller options
+
+      this.options_.src = expandDataUri(this.source_.src);
+      this.options_.tech = this.tech_;
+      this.options_.externVhs = Vhs;
+      this.options_.sourceType = simpleTypeFromSourceType(type); // Whenever we seek internally, we should update the tech
+
+      this.options_.seekTo = time => {
+        this.tech_.setCurrentTime(time);
+      };
+      this.playlistController_ = new PlaylistController(this.options_);
+      const playbackWatcherOptions = merge({
+        liveRangeSafeTimeDelta: SAFE_TIME_DELTA
+      }, this.options_, {
+        seekable: () => this.seekable(),
+        media: () => this.playlistController_.media(),
+        playlistController: this.playlistController_
+      });
+      this.playbackWatcher_ = new PlaybackWatcher(playbackWatcherOptions);
+      this.playlistController_.on('error', () => {
+        const player = videojs.players[this.tech_.options_.playerId];
+        let error = this.playlistController_.error;
+        if (typeof error === 'object' && !error.code) {
+          error.code = 3;
+        } else if (typeof error === 'string') {
+          error = {
+            message: error,
+            code: 3
+          };
+        }
+        player.error(error);
+      });
+      const defaultSelector = this.options_.bufferBasedABR ? Vhs.movingAverageBandwidthSelector(0.55) : Vhs.STANDARD_PLAYLIST_SELECTOR; // `this` in selectPlaylist should be the VhsHandler for backwards
+      // compatibility with < v2
+
+      this.playlistController_.selectPlaylist = this.selectPlaylist ? this.selectPlaylist.bind(this) : defaultSelector.bind(this);
+      this.playlistController_.selectInitialPlaylist = Vhs.INITIAL_PLAYLIST_SELECTOR.bind(this); // re-expose some internal objects for backwards compatibility with < v2
+
+      this.playlists = this.playlistController_.mainPlaylistLoader_;
+      this.mediaSource = this.playlistController_.mediaSource; // Proxy assignment of some properties to the main playlist
+      // controller. Using a custom property for backwards compatibility
+      // with < v2
+
+      Object.defineProperties(this, {
+        selectPlaylist: {
+          get() {
+            return this.playlistController_.selectPlaylist;
+          },
+          set(selectPlaylist) {
+            this.playlistController_.selectPlaylist = selectPlaylist.bind(this);
+          }
+        },
+        throughput: {
+          get() {
+            return this.playlistController_.mainSegmentLoader_.throughput.rate;
+          },
+          set(throughput) {
+            this.playlistController_.mainSegmentLoader_.throughput.rate = throughput; // By setting `count` to 1 the throughput value becomes the starting value
+            // for the cumulative average
+
+            this.playlistController_.mainSegmentLoader_.throughput.count = 1;
+          }
+        },
+        bandwidth: {
+          get() {
+            let playerBandwidthEst = this.playlistController_.mainSegmentLoader_.bandwidth;
+            const networkInformation = window.navigator.connection || window.navigator.mozConnection || window.navigator.webkitConnection;
+            const tenMbpsAsBitsPerSecond = 10e6;
+            if (this.options_.useNetworkInformationApi && networkInformation) {
+              // downlink returns Mbps
+              // https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/downlink
+              const networkInfoBandwidthEstBitsPerSec = networkInformation.downlink * 1000 * 1000; // downlink maxes out at 10 Mbps. In the event that both networkInformationApi and the player
+              // estimate a bandwidth greater than 10 Mbps, use the larger of the two estimates to ensure that
+              // high quality streams are not filtered out.
+
+              if (networkInfoBandwidthEstBitsPerSec >= tenMbpsAsBitsPerSecond && playerBandwidthEst >= tenMbpsAsBitsPerSecond) {
+                playerBandwidthEst = Math.max(playerBandwidthEst, networkInfoBandwidthEstBitsPerSec);
+              } else {
+                playerBandwidthEst = networkInfoBandwidthEstBitsPerSec;
+              }
+            }
+            return playerBandwidthEst;
+          },
+          set(bandwidth) {
+            this.playlistController_.mainSegmentLoader_.bandwidth = bandwidth; // setting the bandwidth manually resets the throughput counter
+            // `count` is set to zero that current value of `rate` isn't included
+            // in the cumulative average
+
+            this.playlistController_.mainSegmentLoader_.throughput = {
+              rate: 0,
+              count: 0
+            };
+          }
+        },
+        /**
+         * `systemBandwidth` is a combination of two serial processes bit-rates. The first
+         * is the network bitrate provided by `bandwidth` and the second is the bitrate of
+         * the entire process after that - decryption, transmuxing, and appending - provided
+         * by `throughput`.
+         *
+         * Since the two process are serial, the overall system bandwidth is given by:
+         *   sysBandwidth = 1 / (1 / bandwidth + 1 / throughput)
+         */
+        systemBandwidth: {
+          get() {
+            const invBandwidth = 1 / (this.bandwidth || 1);
+            let invThroughput;
+            if (this.throughput > 0) {
+              invThroughput = 1 / this.throughput;
+            } else {
+              invThroughput = 0;
+            }
+            const systemBitrate = Math.floor(1 / (invBandwidth + invThroughput));
+            return systemBitrate;
+          },
+          set() {
+            videojs.log.error('The "systemBandwidth" property is read-only');
+          }
+        }
+      });
+      if (this.options_.bandwidth) {
+        this.bandwidth = this.options_.bandwidth;
+      }
+      if (this.options_.throughput) {
+        this.throughput = this.options_.throughput;
+      }
+      Object.defineProperties(this.stats, {
+        bandwidth: {
+          get: () => this.bandwidth || 0,
+          enumerable: true
+        },
+        mediaRequests: {
+          get: () => this.playlistController_.mediaRequests_() || 0,
+          enumerable: true
+        },
+        mediaRequestsAborted: {
+          get: () => this.playlistController_.mediaRequestsAborted_() || 0,
+          enumerable: true
+        },
+        mediaRequestsTimedout: {
+          get: () => this.playlistController_.mediaRequestsTimedout_() || 0,
+          enumerable: true
+        },
+        mediaRequestsErrored: {
+          get: () => this.playlistController_.mediaRequestsErrored_() || 0,
+          enumerable: true
+        },
+        mediaTransferDuration: {
+          get: () => this.playlistController_.mediaTransferDuration_() || 0,
+          enumerable: true
+        },
+        mediaBytesTransferred: {
+          get: () => this.playlistController_.mediaBytesTransferred_() || 0,
+          enumerable: true
+        },
+        mediaSecondsLoaded: {
+          get: () => this.playlistController_.mediaSecondsLoaded_() || 0,
+          enumerable: true
+        },
+        mediaAppends: {
+          get: () => this.playlistController_.mediaAppends_() || 0,
+          enumerable: true
+        },
+        mainAppendsToLoadedData: {
+          get: () => this.playlistController_.mainAppendsToLoadedData_() || 0,
+          enumerable: true
+        },
+        audioAppendsToLoadedData: {
+          get: () => this.playlistController_.audioAppendsToLoadedData_() || 0,
+          enumerable: true
+        },
+        appendsToLoadedData: {
+          get: () => this.playlistController_.appendsToLoadedData_() || 0,
+          enumerable: true
+        },
+        timeToLoadedData: {
+          get: () => this.playlistController_.timeToLoadedData_() || 0,
+          enumerable: true
+        },
+        buffered: {
+          get: () => timeRangesToArray(this.tech_.buffered()),
+          enumerable: true
+        },
+        currentTime: {
+          get: () => this.tech_.currentTime(),
+          enumerable: true
+        },
+        currentSource: {
+          get: () => this.tech_.currentSource_,
+          enumerable: true
+        },
+        currentTech: {
+          get: () => this.tech_.name_,
+          enumerable: true
+        },
+        duration: {
+          get: () => this.tech_.duration(),
+          enumerable: true
+        },
+        main: {
+          get: () => this.playlists.main,
+          enumerable: true
+        },
+        playerDimensions: {
+          get: () => this.tech_.currentDimensions(),
+          enumerable: true
+        },
+        seekable: {
+          get: () => timeRangesToArray(this.tech_.seekable()),
+          enumerable: true
+        },
+        timestamp: {
+          get: () => Date.now(),
+          enumerable: true
+        },
+        videoPlaybackQuality: {
+          get: () => this.tech_.getVideoPlaybackQuality(),
+          enumerable: true
+        }
+      });
+      this.tech_.one('canplay', this.playlistController_.setupFirstPlay.bind(this.playlistController_));
+      this.tech_.on('bandwidthupdate', () => {
+        if (this.options_.useBandwidthFromLocalStorage) {
+          updateVhsLocalStorage({
+            bandwidth: this.bandwidth,
+            throughput: Math.round(this.throughput)
+          });
+        }
+      });
+      this.playlistController_.on('selectedinitialmedia', () => {
+        // Add the manual rendition mix-in to VhsHandler
+        renditionSelectionMixin(this);
+      });
+      this.playlistController_.sourceUpdater_.on('createdsourcebuffers', () => {
+        this.setupEme_();
+      }); // the bandwidth of the primary segment loader is our best
+      // estimate of overall bandwidth
+
+      this.on(this.playlistController_, 'progress', function () {
+        this.tech_.trigger('progress');
+      }); // In the live case, we need to ignore the very first `seeking` event since
+      // that will be the result of the seek-to-live behavior
+
+      this.on(this.playlistController_, 'firstplay', function () {
+        this.ignoreNextSeekingEvent_ = true;
+      });
+      this.setupQualityLevels_(); // do nothing if the tech has been disposed already
+      // this can occur if someone sets the src in player.ready(), for instance
+
+      if (!this.tech_.el()) {
+        return;
+      }
+      this.mediaSourceUrl_ = window.URL.createObjectURL(this.playlistController_.mediaSource);
+      this.tech_.src(this.mediaSourceUrl_);
+    }
+    createKeySessions_() {
+      const audioPlaylistLoader = this.playlistController_.mediaTypes_.AUDIO.activePlaylistLoader;
+      this.logger_('waiting for EME key session creation');
+      waitForKeySessionCreation({
+        player: this.player_,
+        sourceKeySystems: this.source_.keySystems,
+        audioMedia: audioPlaylistLoader && audioPlaylistLoader.media(),
+        mainPlaylists: this.playlists.main.playlists
+      }).then(() => {
+        this.logger_('created EME key session');
+        this.playlistController_.sourceUpdater_.initializedEme();
+      }).catch(err => {
+        this.logger_('error while creating EME key session', err);
+        this.player_.error({
+          message: 'Failed to initialize media keys for EME',
+          code: 3,
+          metadata: {
+            errorType: videojs.Error.EMEKeySessionCreationError
+          }
+        });
+      });
+    }
+    handleWaitingForKey_() {
+      // If waitingforkey is fired, it's possible that the data that's necessary to retrieve
+      // the key is in the manifest. While this should've happened on initial source load, it
+      // may happen again in live streams where the keys change, and the manifest info
+      // reflects the update.
+      //
+      // Because videojs-contrib-eme compares the PSSH data we send to that of PSSH data it's
+      // already requested keys for, we don't have to worry about this generating extraneous
+      // requests.
+      this.logger_('waitingforkey fired, attempting to create any new key sessions');
+      this.createKeySessions_();
+    }
+    /**
+     * If necessary and EME is available, sets up EME options and waits for key session
+     * creation.
+     *
+     * This function also updates the source updater so taht it can be used, as for some
+     * browsers, EME must be configured before content is appended (if appending unencrypted
+     * content before encrypted content).
+     */
+
+    setupEme_() {
+      const audioPlaylistLoader = this.playlistController_.mediaTypes_.AUDIO.activePlaylistLoader;
+      const didSetupEmeOptions = setupEmeOptions({
+        player: this.player_,
+        sourceKeySystems: this.source_.keySystems,
+        media: this.playlists.media(),
+        audioMedia: audioPlaylistLoader && audioPlaylistLoader.media()
+      });
+      this.player_.tech_.on('keystatuschange', e => {
+        this.playlistController_.updatePlaylistByKeyStatus(e.keyId, e.status);
+      });
+      this.handleWaitingForKey_ = this.handleWaitingForKey_.bind(this);
+      this.player_.tech_.on('waitingforkey', this.handleWaitingForKey_);
+      if (!didSetupEmeOptions) {
+        // If EME options were not set up, we've done all we could to initialize EME.
+        this.playlistController_.sourceUpdater_.initializedEme();
+        return;
+      }
+      this.createKeySessions_();
+    }
+    /**
+     * Initializes the quality levels and sets listeners to update them.
+     *
+     * @method setupQualityLevels_
+     * @private
+     */
+
+    setupQualityLevels_() {
+      const player = videojs.players[this.tech_.options_.playerId]; // if there isn't a player or there isn't a qualityLevels plugin
+      // or qualityLevels_ listeners have already been setup, do nothing.
+
+      if (!player || !player.qualityLevels || this.qualityLevels_) {
+        return;
+      }
+      this.qualityLevels_ = player.qualityLevels();
+      this.playlistController_.on('selectedinitialmedia', () => {
+        handleVhsLoadedMetadata(this.qualityLevels_, this);
+      });
+      this.playlists.on('mediachange', () => {
+        handleVhsMediaChange(this.qualityLevels_, this.playlists);
+      });
+    }
+    /**
+     * return the version
+     */
+
+    static version() {
+      return {
+        '@videojs/http-streaming': version$4,
+        'mux.js': version$3,
+        'mpd-parser': version$2,
+        'm3u8-parser': version$1,
+        'aes-decrypter': version
+      };
+    }
+    /**
+     * return the version
+     */
+
+    version() {
+      return this.constructor.version();
+    }
+    canChangeType() {
+      return SourceUpdater.canChangeType();
+    }
+    /**
+     * Begin playing the video.
+     */
+
+    play() {
+      this.playlistController_.play();
+    }
+    /**
+     * a wrapper around the function in PlaylistController
+     */
+
+    setCurrentTime(currentTime) {
+      this.playlistController_.setCurrentTime(currentTime);
+    }
+    /**
+     * a wrapper around the function in PlaylistController
+     */
+
+    duration() {
+      return this.playlistController_.duration();
+    }
+    /**
+     * a wrapper around the function in PlaylistController
+     */
+
+    seekable() {
+      return this.playlistController_.seekable();
+    }
+    /**
+     * Abort all outstanding work and cleanup.
+     */
+
+    dispose() {
+      if (this.playbackWatcher_) {
+        this.playbackWatcher_.dispose();
+      }
+      if (this.playlistController_) {
+        this.playlistController_.dispose();
+      }
+      if (this.qualityLevels_) {
+        this.qualityLevels_.dispose();
+      }
+      if (this.tech_ && this.tech_.vhs) {
+        delete this.tech_.vhs;
+      }
+      if (this.mediaSourceUrl_ && window.URL.revokeObjectURL) {
+        window.URL.revokeObjectURL(this.mediaSourceUrl_);
+        this.mediaSourceUrl_ = null;
+      }
+      if (this.tech_) {
+        this.tech_.off('waitingforkey', this.handleWaitingForKey_);
+      }
+      super.dispose();
+    }
+    convertToProgramTime(time, callback) {
+      return getProgramTime({
+        playlist: this.playlistController_.media(),
+        time,
+        callback
+      });
+    } // the player must be playing before calling this
+
+    seekToProgramTime(programTime, callback, pauseAfterSeek = true, retryCount = 2) {
+      return seekToProgramTime({
+        programTime,
+        playlist: this.playlistController_.media(),
+        retryCount,
+        pauseAfterSeek,
+        seekTo: this.options_.seekTo,
+        tech: this.options_.tech,
+        callback
+      });
+    }
+    /**
+     * Adds the onRequest, onResponse, offRequest and offResponse functions
+     * to the VhsHandler xhr Object.
+     */
+
+    setupXhrHooks_() {
+      /**
+       * A player function for setting an onRequest hook
+       *
+       * @param {function} callback for request modifiction
+       */
+      this.xhr.onRequest = callback => {
+        addOnRequestHook(this.xhr, callback);
+      };
+      /**
+       * A player function for setting an onResponse hook
+       *
+       * @param {callback} callback for response data retrieval
+       */
+
+      this.xhr.onResponse = callback => {
+        addOnResponseHook(this.xhr, callback);
+      };
+      /**
+       * Deletes a player onRequest callback if it exists
+       *
+       * @param {function} callback to delete from the player set
+       */
+
+      this.xhr.offRequest = callback => {
+        removeOnRequestHook(this.xhr, callback);
+      };
+      /**
+       * Deletes a player onResponse callback if it exists
+       *
+       * @param {function} callback to delete from the player set
+       */
+
+      this.xhr.offResponse = callback => {
+        removeOnResponseHook(this.xhr, callback);
+      }; // Trigger an event on the player to notify the user that vhs is ready to set xhr hooks.
+      // This allows hooks to be set before the source is set to vhs when handleSource is called.
+
+      this.player_.trigger('xhr-hooks-ready');
+    }
+  }
+  /**
+   * The Source Handler object, which informs video.js what additional
+   * MIME types are supported and sets up playback. It is registered
+   * automatically to the appropriate tech based on the capabilities of
+   * the browser it is running in. It is not necessary to use or modify
+   * this object in normal usage.
+   */
+
+  const VhsSourceHandler = {
+    name: 'videojs-http-streaming',
+    VERSION: version$4,
+    canHandleSource(srcObj, options = {}) {
+      const localOptions = merge(videojs.options, options);
+      return VhsSourceHandler.canPlayType(srcObj.type, localOptions);
+    },
+    handleSource(source, tech, options = {}) {
+      const localOptions = merge(videojs.options, options);
+      tech.vhs = new VhsHandler(source, tech, localOptions);
+      tech.vhs.xhr = xhrFactory();
+      tech.vhs.setupXhrHooks_();
+      tech.vhs.src(source.src, source.type);
+      return tech.vhs;
+    },
+    canPlayType(type, options) {
+      const simpleType = simpleTypeFromSourceType(type);
+      if (!simpleType) {
+        return '';
+      }
+      const overrideNative = VhsSourceHandler.getOverrideNative(options);
+      const supportsTypeNatively = Vhs.supportsTypeNatively(simpleType);
+      const canUseMsePlayback = !supportsTypeNatively || overrideNative;
+      return canUseMsePlayback ? 'maybe' : '';
+    },
+    getOverrideNative(options = {}) {
+      const {
+        vhs = {}
+      } = options;
+      const defaultOverrideNative = !(videojs.browser.IS_ANY_SAFARI || videojs.browser.IS_IOS);
+      const {
+        overrideNative = defaultOverrideNative
+      } = vhs;
+      return overrideNative;
+    }
+  };
+  /**
+   * Check to see if the native MediaSource object exists and supports
+   * an MP4 container with both H.264 video and AAC-LC audio.
+   *
+   * @return {boolean} if  native media sources are supported
+   */
+
+  const supportsNativeMediaSources = () => {
+    return browserSupportsCodec('avc1.4d400d,mp4a.40.2');
+  }; // register source handlers with the appropriate techs
+
+  if (supportsNativeMediaSources()) {
+    videojs.getTech('Html5').registerSourceHandler(VhsSourceHandler, 0);
+  }
+  videojs.VhsHandler = VhsHandler;
+  videojs.VhsSourceHandler = VhsSourceHandler;
+  videojs.Vhs = Vhs;
+  if (!videojs.use) {
+    videojs.registerComponent('Vhs', Vhs);
+  }
+  videojs.options.vhs = videojs.options.vhs || {};
+  if (!videojs.getPlugin || !videojs.getPlugin('reloadSourceOnError')) {
+    videojs.registerPlugin('reloadSourceOnError', reloadSourceOnError);
+  }
+
+  return videojs;
+
+}));
diff --git a/priv/static/video.js/video.min.js b/priv/static/video.js/video.min.js
new file mode 100644
index 0000000..f5ef1e7
--- /dev/null
+++ b/priv/static/video.js/video.min.js
@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Video.js 8.12.0 <http://videojs.com/>
+ * Copyright Brightcove, Inc. <https://www.brightcove.com/>
+ * Available under Apache License Version 2.0
+ * <https://github.com/videojs/video.js/blob/main/LICENSE>
+ *
+ * Includes vtt.js <https://github.com/mozilla/vtt.js>
+ * Available under Apache License Version 2.0
+ * <https://github.com/mozilla/vtt.js/blob/main/LICENSE>
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).videojs=t()}(this,function(){"use strict";var M="8.12.0";const U={},B=function(e,t){return U[e]=U[e]||[],t&&(U[e]=U[e].concat(t)),U[e]};function F(e,t){return!((t=B(e).indexOf(t))<=-1||(U[e]=U[e].slice(),U[e].splice(t,1),0))}const q={prefixed:!0};var j=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror","fullscreen"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror","-webkit-full-screen"]],H=j[0];let V;for(let e=0;e<j.length;e++)if(j[e][1]in document){V=j[e];break}if(V){for(let e=0;e<V.length;e++)q[H[e]]=V[e];q.prefixed=V[0]!==H[0]}let u=[];function $(e){return K(e)?Object.keys(e):[]}const l=function s(r,n=":",a=""){let t="info",i;function o(...e){i("log",t,e)}var l,d,h;return i=(l=r,d=o,h=a,(t,i,s)=>{var e,i=d.levels[i],r=new RegExp(`^(${i})$`);let n=l;if("log"!==t&&s.unshift(t.toUpperCase()+":"),h&&(n="%c"+l,s.unshift(h)),s.unshift(n+":"),u&&(u.push([].concat(s)),e=u.length-1e3,u.splice(0,0<e?e:0)),window.console){let e=window.console[t];(e=e||"debug"!==t?e:window.console.info||window.console.log)&&i&&r.test(t)&&e[Array.isArray(s)?"apply":"call"](window.console,s)}}),o.createLogger=(e,t,i)=>s(r+` ${t=void 0!==t?t:n} `+e,t,void 0!==i?i:a),o.createNewLogger=(e,t,i)=>s(e,t,i),o.levels={all:"debug|log|warn|error",off:"",debug:"debug|log|warn|error",info:"log|warn|error",warn:"warn|error",error:"error",DEFAULT:t},o.level=e=>{if("string"==typeof e){if(!o.levels.hasOwnProperty(e))throw new Error(`"${e}" in not a valid log level`);t=e}return t},o.history=()=>u?[].concat(u):[],o.history.filter=t=>(u||[]).filter(e=>new RegExp(`.*${t}.*`).test(e[0])),o.history.clear=()=>{u&&(u.length=0)},o.history.disable=()=>{null!==u&&(u.length=0,u=null)},o.history.enable=()=>{null===u&&(u=[])},o.error=(...e)=>i("error",t,e),o.warn=(...e)=>i("warn",t,e),o.debug=(...e)=>i("debug",t,e),o}("VIDEOJS"),z=l.createLogger,W=Object.prototype.toString;function G(t,i){$(t).forEach(e=>i(t[e],e))}function X(i,s,e=0){return $(i).reduce((e,t)=>s(e,i[t],t),e)}function K(e){return!!e&&"object"==typeof e}function Y(e){return K(e)&&"[object Object]"===W.call(e)&&e.constructor===Object}function d(...e){const i={};return e.forEach(e=>{e&&G(e,(e,t)=>{Y(e)?(Y(i[t])||(i[t]={}),i[t]=d(i[t],e)):i[t]=e})}),i}function Q(e={}){var t,i=[];for(const s in e)e.hasOwnProperty(s)&&(t=e[s],i.push(t));return i}function J(t,i,s,e=!0){const r=e=>Object.defineProperty(t,i,{value:e,enumerable:!0,writable:!0});var n={configurable:!0,enumerable:!0,get(){var e=s();return r(e),e}};return e&&(n.set=r),Object.defineProperty(t,i,n)}var Z=Object.freeze({__proto__:null,each:G,reduce:X,isObject:K,isPlain:Y,merge:d,values:Q,defineLazyProperty:J});let ee=!1,te=null,ie=!1,se,re=!1,ne=!1,ae=!1,oe=!1,le=null,de=null,he=null,ue=!1,ce=!1,pe=!1,me=!1,ge=!1,fe=!1,ye=!1;const _e=Boolean(we()&&("ontouchstart"in window||window.navigator.maxTouchPoints||window.DocumentTouch&&window.document instanceof window.DocumentTouch));var ve,e=window.navigator&&window.navigator.userAgentData;if(e&&e.platform&&e.brands&&(ie="Android"===e.platform,ne=Boolean(e.brands.find(e=>"Microsoft Edge"===e.brand)),ae=Boolean(e.brands.find(e=>"Chromium"===e.brand)),oe=!ne&&ae,le=de=(e.brands.find(e=>"Chromium"===e.brand)||{}).version||null,ce="Windows"===e.platform),!ae){const N=window.navigator&&window.navigator.userAgent||"";ee=/iPod/i.test(N),te=(e=N.match(/OS (\d+)_/i))&&e[1]?e[1]:null,ie=/Android/i.test(N),se=(e=N.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i))?(Mt=e[1]&&parseFloat(e[1]),ve=e[2]&&parseFloat(e[2]),Mt&&ve?parseFloat(e[1]+"."+e[2]):Mt||null):null,re=/Firefox/i.test(N),ne=/Edg/i.test(N),ae=/Chrome/i.test(N)||/CriOS/i.test(N),oe=!ne&&ae,le=de=(ve=N.match(/(Chrome|CriOS)\/(\d+)/))&&ve[2]?parseFloat(ve[2]):null,he=function(){var e=/MSIE\s(\d+)\.\d/.exec(N);let t=e&&parseFloat(e[1]);return t=!t&&/Trident\/7.0/i.test(N)&&/rv:11.0/.test(N)?11:t}(),ge=/Tizen/i.test(N),fe=/Web0S/i.test(N),ye=ge||fe,ue=/Safari/i.test(N)&&!oe&&!ie&&!ne&&!ye,ce=/Windows/i.test(N),pe=/iPad/i.test(N)||ue&&_e&&!/iPhone/i.test(N),me=/iPhone/i.test(N)&&!pe}const c=me||pe||ee,be=(ue||c)&&!oe;var Te=Object.freeze({__proto__:null,get IS_IPOD(){return ee},get IOS_VERSION(){return te},get IS_ANDROID(){return ie},get ANDROID_VERSION(){return se},get IS_FIREFOX(){return re},get IS_EDGE(){return ne},get IS_CHROMIUM(){return ae},get IS_CHROME(){return oe},get CHROMIUM_VERSION(){return le},get CHROME_VERSION(){return de},get IE_VERSION(){return he},get IS_SAFARI(){return ue},get IS_WINDOWS(){return ce},get IS_IPAD(){return pe},get IS_IPHONE(){return me},get IS_TIZEN(){return ge},get IS_WEBOS(){return fe},get IS_SMART_TV(){return ye},TOUCH_ENABLED:_e,IS_IOS:c,IS_ANY_SAFARI:be});function Se(e){return"string"==typeof e&&Boolean(e.trim())}function we(){return document===window.document}function Ee(e){return K(e)&&1===e.nodeType}function Ce(){try{return window.parent!==window.self}catch(e){return!0}}function ke(i){return function(e,t){return Se(e)?(t=Ee(t=Se(t)?document.querySelector(t):t)?t:document)[i]&&t[i](e):document[i](null)}}function o(e="div",i={},t={},s){const r=document.createElement(e);return Object.getOwnPropertyNames(i).forEach(function(e){var t=i[e];"textContent"===e?xe(r,t):r[e]===t&&"tabIndex"!==e||(r[e]=t)}),Object.getOwnPropertyNames(t).forEach(function(e){r.setAttribute(e,t[e])}),s&&We(r,s),r}function xe(e,t){return"undefined"==typeof e.textContent?e.innerText=t:e.textContent=t,e}function Ie(e,t){t.firstChild?t.insertBefore(e,t.firstChild):t.appendChild(e)}function Ae(e,t){if(0<=t.indexOf(" "))throw new Error("class has illegal whitespace characters");return e.classList.contains(t)}function De(e,...t){return e.classList.add(...t.reduce((e,t)=>e.concat(t.split(/\s+/)),[])),e}function Pe(e,...t){return e?(e.classList.remove(...t.reduce((e,t)=>e.concat(t.split(/\s+/)),[])),e):(l.warn("removeClass was called with an element that doesn't exist"),null)}function Le(t,e,i){return"boolean"!=typeof(i="function"==typeof i?i(t,e):i)&&(i=void 0),e.split(/\s+/).forEach(e=>t.classList.toggle(e,i)),t}function Oe(i,s){Object.getOwnPropertyNames(s).forEach(function(e){var t=s[e];null===t||"undefined"==typeof t||!1===t?i.removeAttribute(e):i.setAttribute(e,!0===t?"":t)})}function Re(e){var i={},s=["autoplay","controls","playsinline","loop","muted","default","defaultMuted"];if(e&&e.attributes&&0<e.attributes.length){var r=e.attributes;for(let t=r.length-1;0<=t;t--){var n=r[t].name;let e=r[t].value;s.includes(n)&&(e=null!==e),i[n]=e}}return i}function Ne(e,t){return e.getAttribute(t)}function Me(e,t,i){e.setAttribute(t,i)}function Ue(e,t){e.removeAttribute(t)}function Be(){document.body.focus(),document.onselectstart=function(){return!1}}function Fe(){document.onselectstart=function(){return!0}}function qe(e){if(e&&e.getBoundingClientRect&&e.parentNode){const t=e.getBoundingClientRect(),i={};return["bottom","height","left","right","top","width"].forEach(e=>{void 0!==t[e]&&(i[e]=t[e])}),i.height||(i.height=parseFloat(Qe(e,"height"))),i.width||(i.width=parseFloat(Qe(e,"width"))),i}}function je(e){if(!e||!e.offsetParent)return{left:0,top:0,width:0,height:0};var t=e.offsetWidth,i=e.offsetHeight;let s=0,r=0;for(;e.offsetParent&&e!==document[q.fullscreenElement];)s+=e.offsetLeft,r+=e.offsetTop,e=e.offsetParent;return{left:s,top:r,width:t,height:i}}function He(t,e){var i={x:0,y:0};if(c){let e=t;for(;e&&"html"!==e.nodeName.toLowerCase();){var s,r=Qe(e,"transform");/^matrix/.test(r)?(s=r.slice(7,-1).split(/,\s/).map(Number),i.x+=s[4],i.y+=s[5]):/^matrix3d/.test(r)&&(s=r.slice(9,-1).split(/,\s/).map(Number),i.x+=s[12],i.y+=s[13]),e=e.parentNode}}var n={},a=je(e.target),t=je(t),o=t.width,l=t.height;let d=e.offsetY-(t.top-a.top),h=e.offsetX-(t.left-a.left);return e.changedTouches&&(h=e.changedTouches[0].pageX-t.left,d=e.changedTouches[0].pageY+t.top,c)&&(h-=i.x,d-=i.y),n.y=1-Math.max(0,Math.min(1,d/l)),n.x=Math.max(0,Math.min(1,h/o)),n}function Ve(e){return K(e)&&3===e.nodeType}function $e(e){for(;e.firstChild;)e.removeChild(e.firstChild);return e}function ze(e){return"function"==typeof e&&(e=e()),(Array.isArray(e)?e:[e]).map(e=>Ee(e="function"==typeof e?e():e)||Ve(e)?e:"string"==typeof e&&/\S/.test(e)?document.createTextNode(e):void 0).filter(e=>e)}function We(t,e){return ze(e).forEach(e=>t.appendChild(e)),t}function Ge(e,t){return We($e(e),t)}function Xe(e){return void 0===e.button&&void 0===e.buttons||0===e.button&&void 0===e.buttons||"mouseup"===e.type&&0===e.button&&0===e.buttons||0===e.button&&1===e.buttons}const Ke=ke("querySelector"),Ye=ke("querySelectorAll");function Qe(t,i){if(!t||!i)return"";if("function"!=typeof window.getComputedStyle)return"";{let e;try{e=window.getComputedStyle(t)}catch(e){return""}return e?e.getPropertyValue(i)||e[i]:""}}function Je(s){[...document.styleSheets].forEach(t=>{try{var i=[...t.cssRules].map(e=>e.cssText).join(""),e=document.createElement("style");e.textContent=i,s.document.head.appendChild(e)}catch(e){i=document.createElement("link");i.rel="stylesheet",i.type=t.type,i.media=t.media.mediaText,i.href=t.href,s.document.head.appendChild(i)}})}var Ze=Object.freeze({__proto__:null,isReal:we,isEl:Ee,isInFrame:Ce,createEl:o,textContent:xe,prependTo:Ie,hasClass:Ae,addClass:De,removeClass:Pe,toggleClass:Le,setAttributes:Oe,getAttributes:Re,getAttribute:Ne,setAttribute:Me,removeAttribute:Ue,blockTextSelection:Be,unblockTextSelection:Fe,getBoundingClientRect:qe,findPosition:je,getPointerPosition:He,isTextNode:Ve,emptyEl:$e,normalizeContent:ze,appendContent:We,insertContent:Ge,isSingleLeftClick:Xe,$:Ke,$$:Ye,computedStyle:Qe,copyStyleSheetsToWindow:Je});let et=!1,tt;function it(){if(!1!==tt.options.autoSetup){var e=Array.prototype.slice.call(document.getElementsByTagName("video")),t=Array.prototype.slice.call(document.getElementsByTagName("audio")),i=Array.prototype.slice.call(document.getElementsByTagName("video-js")),s=e.concat(t,i);if(s&&0<s.length)for(let e=0,t=s.length;e<t;e++){var r=s[e];if(!r||!r.getAttribute){st(1);break}void 0===r.player&&null!==r.getAttribute("data-setup")&&tt(r)}else et||st(1)}}function st(e,t){we()&&(t&&(tt=t),window.setTimeout(it,e))}function rt(){et=!0,window.removeEventListener("load",rt)}we()&&("complete"===document.readyState?rt():window.addEventListener("load",rt));function nt(e){var t=document.createElement("style");return t.className=e,t}function at(e,t){e.styleSheet?e.styleSheet.cssText=t:e.textContent=t}var h=new WeakMap;let ot=3;function lt(e,t){var i;h.has(e)&&(0===(i=h.get(e)).handlers[t].length&&(delete i.handlers[t],e.removeEventListener?e.removeEventListener(t,i.dispatcher,!1):e.detachEvent&&e.detachEvent("on"+t,i.dispatcher)),Object.getOwnPropertyNames(i.handlers).length<=0&&(delete i.handlers,delete i.dispatcher,delete i.disabled),0===Object.getOwnPropertyNames(i).length)&&h.delete(e)}function dt(t,i,e,s){e.forEach(function(e){t(i,e,s)})}function ht(e){if(!e.fixed_){if(!e||!e.isPropagationStopped||!e.isImmediatePropagationStopped){const n=e||window.event;e={};for(const a in n)"layerX"===a||"layerY"===a||"keyLocation"===a||"webkitMovementX"===a||"webkitMovementY"===a||"path"===a||"returnValue"===a&&n.preventDefault||(e[a]=n[a]);var t,i;e.target||(e.target=e.srcElement||document),e.relatedTarget||(e.relatedTarget=e.fromElement===e.target?e.toElement:e.fromElement),e.preventDefault=function(){n.preventDefault&&n.preventDefault(),e.returnValue=!1,n.returnValue=!1,e.defaultPrevented=!0},e.defaultPrevented=!1,e.stopPropagation=function(){n.stopPropagation&&n.stopPropagation(),e.cancelBubble=!0,n.cancelBubble=!0,e.isPropagationStopped=s},e.isPropagationStopped=r,e.stopImmediatePropagation=function(){n.stopImmediatePropagation&&n.stopImmediatePropagation(),e.isImmediatePropagationStopped=s,e.stopPropagation()},e.isImmediatePropagationStopped=r,null!==e.clientX&&void 0!==e.clientX&&(t=document.documentElement,i=document.body,e.pageX=e.clientX+(t&&t.scrollLeft||i&&i.scrollLeft||0)-(t&&t.clientLeft||i&&i.clientLeft||0),e.pageY=e.clientY+(t&&t.scrollTop||i&&i.scrollTop||0)-(t&&t.clientTop||i&&i.clientTop||0)),e.which=e.charCode||e.keyCode,null!==e.button&&void 0!==e.button&&(e.button=1&e.button?0:4&e.button?1:2&e.button?2:0)}e.fixed_=!0}return e;function s(){return!0}function r(){return!1}}let ut;const ct=["touchstart","touchmove"];function pt(n,t,e){if(Array.isArray(t))return dt(pt,n,t,e);h.has(n)||h.set(n,{});const a=h.get(n);if(a.handlers||(a.handlers={}),a.handlers[t]||(a.handlers[t]=[]),e.guid||(e.guid=ot++),a.handlers[t].push(e),a.dispatcher||(a.disabled=!1,a.dispatcher=function(i,s){if(!a.disabled){i=ht(i);var e=a.handlers[i.type];if(e){var r=e.slice(0);for(let e=0,t=r.length;e<t&&!i.isImmediatePropagationStopped();e++)try{r[e].call(n,i,s)}catch(e){l.error(e)}}}}),1===a.handlers[t].length)if(n.addEventListener){let e=!1;(function(){if("boolean"!=typeof ut){ut=!1;try{var e=Object.defineProperty({},"passive",{get(){ut=!0}});window.addEventListener("test",null,e),window.removeEventListener("test",null,e)}catch(e){}}return ut})()&&-1<ct.indexOf(t)&&(e={passive:!0}),n.addEventListener(t,a.dispatcher,e)}else n.attachEvent&&n.attachEvent("on"+t,a.dispatcher)}function p(e,t,i){if(h.has(e)){const n=h.get(e);if(n.handlers){if(Array.isArray(t))return dt(p,e,t,i);var s=function(e,t){n.handlers[t]=[],lt(e,t)};if(void 0===t)for(const a in n.handlers)Object.prototype.hasOwnProperty.call(n.handlers||{},a)&&s(e,a);else{var r=n.handlers[t];if(r)if(i){if(i.guid)for(let e=0;e<r.length;e++)r[e].guid===i.guid&&r.splice(e--,1);lt(e,t)}else s(e,t)}}}}function mt(e,t,i){var s=h.has(e)?h.get(e):{},r=e.parentNode||e.ownerDocument;return"string"==typeof t?t={type:t,target:e}:t.target||(t.target=e),t=ht(t),s.dispatcher&&s.dispatcher.call(e,t,i),r&&!t.isPropagationStopped()&&!0===t.bubbles?mt.call(null,r,t,i):!r&&!t.defaultPrevented&&t.target&&t.target[t.type]&&(h.has(t.target)||h.set(t.target,{}),s=h.get(t.target),t.target[t.type])&&(s.disabled=!0,"function"==typeof t.target[t.type]&&t.target[t.type](),s.disabled=!1),!t.defaultPrevented}function gt(e,t,i){if(Array.isArray(t))return dt(gt,e,t,i);function s(){p(e,t,s),i.apply(this,arguments)}s.guid=i.guid=i.guid||ot++,pt(e,t,s)}function ft(e,t,i){function s(){p(e,t,s),i.apply(this,arguments)}s.guid=i.guid=i.guid||ot++,pt(e,t,s)}var yt=Object.freeze({__proto__:null,fixEvent:ht,on:pt,off:p,trigger:mt,one:gt,any:ft});function m(e,t,i){return t.guid||(t.guid=ot++),(e=t.bind(e)).guid=i?i+"_"+t.guid:t.guid,e}function _t(i,s){let r=window.performance.now();return function(...e){var t=window.performance.now();t-r>=s&&(i(...e),r=t)}}function vt(s,r,n,a=window){let o;function e(){const e=this,t=arguments;let i=function(){o=null,i=null,n||s.apply(e,t)};!o&&n&&s.apply(e,t),a.clearTimeout(o),o=a.setTimeout(i,r)}return e.cancel=()=>{a.clearTimeout(o),o=null},e}e=Object.freeze({__proto__:null,UPDATE_REFRESH_INTERVAL:30,bind_:m,throttle:_t,debounce:vt});let bt;class Tt{on(e,t){var i=this.addEventListener;this.addEventListener=()=>{},pt(this,e,t),this.addEventListener=i}off(e,t){p(this,e,t)}one(e,t){var i=this.addEventListener;this.addEventListener=()=>{},gt(this,e,t),this.addEventListener=i}any(e,t){var i=this.addEventListener;this.addEventListener=()=>{},ft(this,e,t),this.addEventListener=i}trigger(e){var t=e.type||e;e=ht(e="string"==typeof e?{type:t}:e),this.allowedEvents_[t]&&this["on"+t]&&this["on"+t](e),mt(this,e)}queueTrigger(e){bt=bt||new Map;const t=e.type||e;let i=bt.get(this);i||(i=new Map,bt.set(this,i));var s=i.get(t),s=(i.delete(t),window.clearTimeout(s),window.setTimeout(()=>{i.delete(t),0===i.size&&(i=null,bt.delete(this)),this.trigger(e)},0));i.set(t,s)}}Tt.prototype.allowedEvents_={},Tt.prototype.addEventListener=Tt.prototype.on,Tt.prototype.removeEventListener=Tt.prototype.off,Tt.prototype.dispatchEvent=Tt.prototype.trigger;const St=e=>"function"==typeof e.name?e.name():"string"==typeof e.name?e.name:e.name_||(e.constructor&&e.constructor.name?e.constructor.name:typeof e),wt=t=>t instanceof Tt||!!t.eventBusEl_&&["on","one","off","trigger"].every(e=>"function"==typeof t[e]),Et=e=>"string"==typeof e&&/\S/.test(e)||Array.isArray(e)&&!!e.length,Ct=(e,t,i)=>{if(!e||!e.nodeName&&!wt(e))throw new Error(`Invalid target for ${St(t)}#${i}; must be a DOM node or evented object.`)},kt=(e,t,i)=>{if(!Et(e))throw new Error(`Invalid event type for ${St(t)}#${i}; must be a non-empty string or array.`)},xt=(e,t,i)=>{if("function"!=typeof e)throw new Error(`Invalid listener for ${St(t)}#${i}; must be a function.`)},It=(e,t,i)=>{var s=t.length<3||t[0]===e||t[0]===e.eventBusEl_;let r,n,a;return s?(r=e.eventBusEl_,3<=t.length&&t.shift(),[n,a]=t):[r,n,a]=t,Ct(r,e,i),kt(n,e,i),xt(a,e,i),a=m(e,a),{isTargetingSelf:s,target:r,type:n,listener:a}},At=(e,t,i,s)=>{Ct(e,e,t),e.nodeName?yt[t](e,i,s):e[t](i,s)},Dt={on(...e){const{isTargetingSelf:t,target:i,type:s,listener:r}=It(this,e,"on");if(At(i,"on",s,r),!t){const n=()=>this.off(i,s,r);n.guid=r.guid;e=()=>this.off("dispose",n);e.guid=r.guid,At(this,"on","dispose",n),At(i,"on","dispose",e)}},one(...e){const{isTargetingSelf:t,target:i,type:s,listener:r}=It(this,e,"one");if(t)At(i,"one",s,r);else{const n=(...e)=>{this.off(i,s,n),r.apply(null,e)};n.guid=r.guid,At(i,"one",s,n)}},any(...e){const{isTargetingSelf:t,target:i,type:s,listener:r}=It(this,e,"any");if(t)At(i,"any",s,r);else{const n=(...e)=>{this.off(i,s,n),r.apply(null,e)};n.guid=r.guid,At(i,"any",s,n)}},off(e,t,i){!e||Et(e)?p(this.eventBusEl_,e,t):(e=e,t=t,Ct(e,this,"off"),kt(t,this,"off"),xt(i,this,"off"),i=m(this,i),this.off("dispose",i),e.nodeName?(p(e,t,i),p(e,"dispose",i)):wt(e)&&(e.off(t,i),e.off("dispose",i)))},trigger(e,t){Ct(this.eventBusEl_,this,"trigger");var i=e&&"string"!=typeof e?e.type:e;if(Et(i))return mt(this.eventBusEl_,e,t);throw new Error(`Invalid event type for ${St(this)}#trigger; `+"must be a non-empty string or object with a type key that has a non-empty value.")}};function Pt(e,t={}){t=t.eventBusKey;if(t){if(!e[t].nodeName)throw new Error(`The eventBusKey "${t}" does not refer to an element.`);e.eventBusEl_=e[t]}else e.eventBusEl_=o("span",{className:"vjs-event-bus"});Object.assign(e,Dt),e.eventedCallbacks&&e.eventedCallbacks.forEach(e=>{e()}),e.on("dispose",()=>{e.off(),[e,e.el_,e.eventBusEl_].forEach(function(e){e&&h.has(e)&&h.delete(e)}),window.setTimeout(()=>{e.eventBusEl_=null},0)})}const Lt={state:{},setState(e){"function"==typeof e&&(e=e());let i;return G(e,(e,t)=>{this.state[t]!==e&&((i=i||{})[t]={from:this.state[t],to:e}),this.state[t]=e}),i&&wt(this)&&this.trigger({changes:i,type:"statechanged"}),i}};function Ot(e,t){Object.assign(e,Lt),e.state=Object.assign({},e.state,t),"function"==typeof e.handleStateChanged&&wt(e)&&e.on("statechanged",e.handleStateChanged)}function Rt(e){return"string"!=typeof e?e:e.replace(/./,e=>e.toLowerCase())}function g(e){return"string"!=typeof e?e:e.replace(/./,e=>e.toUpperCase())}function Nt(e,t){return g(e)===g(t)}var Mt=Object.freeze({__proto__:null,toLowerCase:Rt,toTitleCase:g,titleCaseEquals:Nt}),t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function Ut(e,t){return e(t={exports:{}},t.exports),t.exports}var r=Ut(function(e,t){function i(e){var t;return"number"==typeof(e=e&&"object"==typeof e&&(t=e.which||e.keyCode||e.charCode)?t:e)?o[e]:(t=String(e),s[t.toLowerCase()]||r[t.toLowerCase()]||(1===t.length?t.charCodeAt(0):void 0))}i.isEventKey=function(e,t){if(e&&"object"==typeof e){e=e.which||e.keyCode||e.charCode;if(null!=e)if("string"==typeof t){var i=s[t.toLowerCase()];if(i)return i===e;if(i=r[t.toLowerCase()])return i===e}else if("number"==typeof t)return t===e;return!1}};for(var s=(t=e.exports=i).code=t.codes={backspace:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,"pause/break":19,"caps lock":20,esc:27,space:32,"page up":33,"page down":34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,command:91,"left command":91,"right command":93,"numpad *":106,"numpad +":107,"numpad -":109,"numpad .":110,"numpad /":111,"num lock":144,"scroll lock":145,"my computer":182,"my calculator":183,";":186,"=":187,",":188,"-":189,".":190,"/":191,"`":192,"[":219,"\\":220,"]":221,"'":222},r=t.aliases={windows:91,"⇧":16,"⌥":18,"⌃":17,"⌘":91,ctl:17,control:17,option:18,pause:19,break:19,caps:20,return:13,escape:27,spc:32,spacebar:32,pgup:33,pgdn:34,ins:45,del:46,cmd:91},n=97;n<123;n++)s[String.fromCharCode(n)]=n-32;for(var n=48;n<58;n++)s[n-48]=n;for(n=1;n<13;n++)s["f"+n]=n+111;for(n=0;n<10;n++)s["numpad "+n]=n+96;var a,o=t.names=t.title={};for(n in s)o[s[n]]=n;for(a in r)s[a]=r[a]});r.code,r.codes,r.aliases,r.names,r.title;class f{constructor(e,t,i){!e&&this.play?this.player_=e=this:this.player_=e,this.isDisposed_=!1,this.parentComponent_=null,this.options_=d({},this.options_),t=this.options_=d(this.options_,t),this.id_=t.id||t.el&&t.el.id,this.id_||(e=e&&e.id&&e.id()||"no_player",this.id_=e+"_component_"+ot++),this.name_=t.name||null,t.el?this.el_=t.el:!1!==t.createEl&&(this.el_=this.createEl()),t.className&&this.el_&&t.className.split(" ").forEach(e=>this.addClass(e)),["on","off","one","any","trigger"].forEach(e=>{this[e]=void 0}),!1!==t.evented&&(Pt(this,{eventBusKey:this.el_?"el_":null}),this.handleLanguagechange=this.handleLanguagechange.bind(this),this.on(this.player_,"languagechange",this.handleLanguagechange)),Ot(this,this.constructor.defaultState),this.children_=[],this.childIndex_={},this.childNameIndex_={},this.setTimeoutIds_=new Set,this.setIntervalIds_=new Set,this.rafIds_=new Set,this.namedRafs_=new Map,(this.clearingTimersOnDispose_=!1)!==t.initChildren&&this.initChildren(),this.ready(i),!1!==t.reportTouchActivity&&this.enableTouchActivity()}on(e,t){}off(e,t){}one(e,t){}any(e,t){}trigger(e,t){}dispose(e={}){if(!this.isDisposed_){if(this.readyQueue_&&(this.readyQueue_.length=0),this.trigger({type:"dispose",bubbles:!1}),this.isDisposed_=!0,this.children_)for(let e=this.children_.length-1;0<=e;e--)this.children_[e].dispose&&this.children_[e].dispose();this.children_=null,this.childIndex_=null,this.childNameIndex_=null,this.parentComponent_=null,this.el_&&(this.el_.parentNode&&(e.restoreEl?this.el_.parentNode.replaceChild(e.restoreEl,this.el_):this.el_.parentNode.removeChild(this.el_)),this.el_=null),this.player_=null}}isDisposed(){return Boolean(this.isDisposed_)}player(){return this.player_}options(e){return e&&(this.options_=d(this.options_,e)),this.options_}el(){return this.el_}createEl(e,t,i){return o(e,t,i)}localize(e,s,t=e){var i=this.player_.language&&this.player_.language(),r=this.player_.languages&&this.player_.languages(),n=r&&r[i],i=i&&i.split("-")[0],r=r&&r[i];let a=t;return n&&n[e]?a=n[e]:r&&r[e]&&(a=r[e]),a=s?a.replace(/\{(\d+)\}/g,function(e,t){t=s[t-1];let i="undefined"==typeof t?e:t;return i}):a}handleLanguagechange(){}contentEl(){return this.contentEl_||this.el_}id(){return this.id_}name(){return this.name_}children(){return this.children_}getChildById(e){return this.childIndex_[e]}getChild(e){if(e)return this.childNameIndex_[e]}getDescendant(...t){t=t.reduce((e,t)=>e.concat(t),[]);let i=this;for(let e=0;e<t.length;e++)if(!(i=i.getChild(t[e]))||!i.getChild)return;return i}setIcon(e,t=this.el()){var i,s,r;if(this.player_.options_.experimentalSvgIcons)return r="http://www.w3.org/2000/svg",i=o("span",{className:"vjs-icon-placeholder vjs-svg-icon"},{"aria-hidden":"true"}),(s=document.createElementNS(r,"svg")).setAttributeNS(null,"viewBox","0 0 512 512"),r=document.createElementNS(r,"use"),s.appendChild(r),r.setAttributeNS(null,"href","#vjs-icon-"+e),i.appendChild(s),this.iconIsSet_?t.replaceChild(i,t.querySelector(".vjs-icon-placeholder")):t.appendChild(i),this.iconIsSet_=!0,i}addChild(e,t={},i=this.children_.length){let s,r;if("string"==typeof e){r=g(e);var n=t.componentClass||r,a=(t.name=r,f.getComponent(n));if(!a)throw new Error(`Component ${n} does not exist`);if("function"!=typeof a)return null;s=new a(this.player_||this,t)}else s=e;if(s.parentComponent_&&s.parentComponent_.removeChild(s),this.children_.splice(i,0,s),s.parentComponent_=this,"function"==typeof s.id&&(this.childIndex_[s.id()]=s),(r=r||s.name&&g(s.name()))&&(this.childNameIndex_[r]=s,this.childNameIndex_[Rt(r)]=s),"function"==typeof s.el&&s.el()){let e=null;this.children_[i+1]&&(this.children_[i+1].el_?e=this.children_[i+1].el_:Ee(this.children_[i+1])&&(e=this.children_[i+1])),this.contentEl().insertBefore(s.el(),e)}return s}removeChild(i){if((i="string"==typeof i?this.getChild(i):i)&&this.children_){let t=!1;for(let e=this.children_.length-1;0<=e;e--)if(this.children_[e]===i){t=!0,this.children_.splice(e,1);break}var e;t&&(i.parentComponent_=null,this.childIndex_[i.id()]=null,this.childNameIndex_[g(i.name())]=null,this.childNameIndex_[Rt(i.name())]=null,e=i.el())&&e.parentNode===this.contentEl()&&this.contentEl().removeChild(i.el())}}initChildren(){const s=this.options_.children;if(s){const r=this.options_;let e;const t=f.getComponent("Tech");(e=Array.isArray(s)?s:Object.keys(s)).concat(Object.keys(this.options_).filter(function(t){return!e.some(function(e){return"string"==typeof e?t===e:t===e.name})})).map(e=>{let t,i;return i="string"==typeof e?(t=e,s[t]||this.options_[t]||{}):(t=e.name,e),{name:t,opts:i}}).filter(e=>{e=f.getComponent(e.opts.componentClass||g(e.name));return e&&!t.isTech(e)}).forEach(e=>{var t=e.name;let i=e.opts;!1!==(i=void 0!==r[t]?r[t]:i)&&((i=!0===i?{}:i).playerOptions=this.options_.playerOptions,e=this.addChild(t,i))&&(this[t]=e)})}}buildCSSClass(){return""}ready(e,t=!1){e&&(this.isReady_?t?e.call(this):this.setTimeout(e,1):(this.readyQueue_=this.readyQueue_||[],this.readyQueue_.push(e)))}triggerReady(){this.isReady_=!0,this.setTimeout(function(){var e=this.readyQueue_;this.readyQueue_=[],e&&0<e.length&&e.forEach(function(e){e.call(this)},this),this.trigger("ready")},1)}$(e,t){return Ke(e,t||this.contentEl())}$$(e,t){return Ye(e,t||this.contentEl())}hasClass(e){return Ae(this.el_,e)}addClass(...e){De(this.el_,...e)}removeClass(...e){Pe(this.el_,...e)}toggleClass(e,t){Le(this.el_,e,t)}show(){this.removeClass("vjs-hidden")}hide(){this.addClass("vjs-hidden")}lockShowing(){this.addClass("vjs-lock-showing")}unlockShowing(){this.removeClass("vjs-lock-showing")}getAttribute(e){return Ne(this.el_,e)}setAttribute(e,t){Me(this.el_,e,t)}removeAttribute(e){Ue(this.el_,e)}width(e,t){return this.dimension("width",e,t)}height(e,t){return this.dimension("height",e,t)}dimensions(e,t){this.width(e,!0),this.height(t)}dimension(e,t,i){var s,r;if(void 0===t)return this.el_?-1!==(r=(s=this.el_.style[e]).indexOf("px"))?parseInt(s.slice(0,r),10):parseInt(this.el_["offset"+g(e)],10):0;-1!==(""+(t=null!==t&&t==t?t:0)).indexOf("%")||-1!==(""+t).indexOf("px")?this.el_.style[e]=t:this.el_.style[e]="auto"===t?"":t+"px",i||this.trigger("componentresize")}currentDimension(e){let t=0;if("width"!==e&&"height"!==e)throw new Error("currentDimension only accepts width or height value");return t=Qe(this.el_,e),0!==(t=parseFloat(t))&&!isNaN(t)||(e="offset"+g(e),t=this.el_[e]),t}currentDimensions(){return{width:this.currentDimension("width"),height:this.currentDimension("height")}}currentWidth(){return this.currentDimension("width")}currentHeight(){return this.currentDimension("height")}focus(){this.el_.focus()}blur(){this.el_.blur()}handleKeyDown(e){this.player_&&(r.isEventKey(e,"Tab")||e.stopPropagation(),this.player_.handleKeyDown(e))}handleKeyPress(e){this.handleKeyDown(e)}emitTapEvents(){let t=0,i=null;let s;this.on("touchstart",function(e){1===e.touches.length&&(i={pageX:e.touches[0].pageX,pageY:e.touches[0].pageY},t=window.performance.now(),s=!0)}),this.on("touchmove",function(e){var t;(1<e.touches.length||i&&(t=e.touches[0].pageX-i.pageX,e=e.touches[0].pageY-i.pageY,10<Math.sqrt(t*t+e*e)))&&(s=!1)});function e(){s=!1}this.on("touchleave",e),this.on("touchcancel",e),this.on("touchend",function(e){!(i=null)===s&&window.performance.now()-t<200&&(e.preventDefault(),this.trigger("tap"))})}enableTouchActivity(){if(this.player()&&this.player().reportUserActivity){const i=m(this.player(),this.player().reportUserActivity);let t;this.on("touchstart",function(){i(),this.clearInterval(t),t=this.setInterval(i,250)});var e=function(e){i(),this.clearInterval(t)};this.on("touchmove",i),this.on("touchend",e),this.on("touchcancel",e)}}setTimeout(e,t){var i;return e=m(this,e),this.clearTimersOnDispose_(),i=window.setTimeout(()=>{this.setTimeoutIds_.has(i)&&this.setTimeoutIds_.delete(i),e()},t),this.setTimeoutIds_.add(i),i}clearTimeout(e){return this.setTimeoutIds_.has(e)&&(this.setTimeoutIds_.delete(e),window.clearTimeout(e)),e}setInterval(e,t){e=m(this,e),this.clearTimersOnDispose_();e=window.setInterval(e,t);return this.setIntervalIds_.add(e),e}clearInterval(e){return this.setIntervalIds_.has(e)&&(this.setIntervalIds_.delete(e),window.clearInterval(e)),e}requestAnimationFrame(e){var t;return this.clearTimersOnDispose_(),e=m(this,e),t=window.requestAnimationFrame(()=>{this.rafIds_.has(t)&&this.rafIds_.delete(t),e()}),this.rafIds_.add(t),t}requestNamedAnimationFrame(e,t){var i;if(!this.namedRafs_.has(e))return this.clearTimersOnDispose_(),t=m(this,t),i=this.requestAnimationFrame(()=>{t(),this.namedRafs_.has(e)&&this.namedRafs_.delete(e)}),this.namedRafs_.set(e,i),e}cancelNamedAnimationFrame(e){this.namedRafs_.has(e)&&(this.cancelAnimationFrame(this.namedRafs_.get(e)),this.namedRafs_.delete(e))}cancelAnimationFrame(e){return this.rafIds_.has(e)&&(this.rafIds_.delete(e),window.cancelAnimationFrame(e)),e}clearTimersOnDispose_(){this.clearingTimersOnDispose_||(this.clearingTimersOnDispose_=!0,this.one("dispose",()=>{[["namedRafs_","cancelNamedAnimationFrame"],["rafIds_","cancelAnimationFrame"],["setTimeoutIds_","clearTimeout"],["setIntervalIds_","clearInterval"]].forEach(([e,i])=>{this[e].forEach((e,t)=>this[i](t))}),this.clearingTimersOnDispose_=!1}))}static registerComponent(t,e){if("string"!=typeof t||!t)throw new Error(`Illegal component name, "${t}"; must be a non-empty string.`);var i=f.getComponent("Tech"),i=i&&i.isTech(e),s=f===e||f.prototype.isPrototypeOf(e.prototype);if(i||!s){let e;throw e=i?"techs must be registered using Tech.registerTech()":"must be a Component subclass",new Error(`Illegal component, "${t}"; ${e}.`)}t=g(t),f.components_||(f.components_={});s=f.getComponent("Player");if("Player"===t&&s&&s.players){const r=s.players;i=Object.keys(r);if(r&&0<i.length&&i.map(e=>r[e]).every(Boolean))throw new Error("Can not register Player component after player has been created.")}return f.components_[t]=e,f.components_[Rt(t)]=e}static getComponent(e){if(e&&f.components_)return f.components_[e]}}function Bt(e,t,i,s){var r=s,n=i.length-1;if("number"!=typeof r||r<0||n<r)throw new Error(`Failed to execute '${e}' on 'TimeRanges': The index provided (${r}) is non-numeric or out of bounds (0-${n}).`);return i[s][t]}function Ft(e){let t;return t=void 0===e||0===e.length?{length:0,start(){throw new Error("This TimeRanges object is empty")},end(){throw new Error("This TimeRanges object is empty")}}:{length:e.length,start:Bt.bind(null,"start",0,e),end:Bt.bind(null,"end",1,e)},window.Symbol&&window.Symbol.iterator&&(t[window.Symbol.iterator]=()=>(e||[]).values()),t}function qt(e,t){return Array.isArray(e)?Ft(e):void 0===e||void 0===t?Ft():Ft([[e,t]])}f.registerComponent("Component",f);function jt(e,t){e=e<0?0:e;let i=Math.floor(e%60),s=Math.floor(e/60%60),r=Math.floor(e/3600);var n=Math.floor(t/60%60),t=Math.floor(t/3600);return r=0<(r=!isNaN(e)&&e!==1/0?r:s=i="-")||0<t?r+":":"",s=((r||10<=n)&&s<10?"0"+s:s)+":",i=i<10?"0"+i:i,r+s+i}let Ht=jt;function Vt(e){Ht=e}function $t(){Ht=jt}function zt(e,t=e){return Ht(e,t)}var Wt=Object.freeze({__proto__:null,createTimeRanges:qt,createTimeRange:qt,setFormatTime:Vt,resetFormatTime:$t,formatTime:zt});function Gt(t,i){let s=0;var r;let n;if(!i)return 0;t&&t.length||(t=qt(0,0));for(let e=0;e<t.length;e++)r=t.start(e),(n=t.end(e))>i&&(n=i),s+=n-r;return s/i}function i(e){if(e instanceof i)return e;"number"==typeof e?this.code=e:"string"==typeof e?this.message=e:K(e)&&("number"==typeof e.code&&(this.code=e.code),Object.assign(this,e)),this.message||(this.message=i.defaultMessages[this.code]||"")}i.prototype.code=0,i.prototype.message="",i.prototype.status=null,i.prototype.metadata=null,i.errorTypes=["MEDIA_ERR_CUSTOM","MEDIA_ERR_ABORTED","MEDIA_ERR_NETWORK","MEDIA_ERR_DECODE","MEDIA_ERR_SRC_NOT_SUPPORTED","MEDIA_ERR_ENCRYPTED"],i.defaultMessages={1:"You aborted the media playback",2:"A network error caused the media download to fail part-way.",3:"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.",4:"The media could not be loaded, either because the server or network failed or because the format is not supported.",5:"The media is encrypted and we do not have the keys to decrypt it."},i.MEDIA_ERR_CUSTOM=0,i.prototype.MEDIA_ERR_CUSTOM=0,i.MEDIA_ERR_ABORTED=1,i.prototype.MEDIA_ERR_ABORTED=1,i.MEDIA_ERR_NETWORK=2,i.prototype.MEDIA_ERR_NETWORK=2,i.MEDIA_ERR_DECODE=3,i.prototype.MEDIA_ERR_DECODE=3,i.MEDIA_ERR_SRC_NOT_SUPPORTED=4,i.prototype.MEDIA_ERR_SRC_NOT_SUPPORTED=4,i.MEDIA_ERR_ENCRYPTED=5,i.prototype.MEDIA_ERR_ENCRYPTED=5;var Xt=function(e,t){var i,s=null;try{i=JSON.parse(e,t)}catch(e){s=e}return[s,i]};function Kt(e){return null!=e&&"function"==typeof e.then}function Yt(e){Kt(e)&&e.then(null,e=>{})}function Qt(s){return["kind","label","language","id","inBandMetadataTrackDispatchType","mode","src"].reduce((e,t,i)=>(s[t]&&(e[t]=s[t]),e),{cues:s.cues&&Array.prototype.map.call(s.cues,function(e){return{startTime:e.startTime,endTime:e.endTime,text:e.text,id:e.id}})})}var Jt=function(e){var t=e.$$("track");const i=Array.prototype.map.call(t,e=>e.track);return Array.prototype.map.call(t,function(e){var t=Qt(e.track);return e.src&&(t.src=e.src),t}).concat(Array.prototype.filter.call(e.textTracks(),function(e){return-1===i.indexOf(e)}).map(Qt))},Zt=function(e,i){return e.forEach(function(e){const t=i.addRemoteTextTrack(e).track;!e.src&&e.cues&&e.cues.forEach(e=>t.addCue(e))}),i.textTracks()};Qt;const ei="vjs-modal-dialog";class ti extends f{constructor(e,t){super(e,t),this.handleKeyDown_=e=>this.handleKeyDown(e),this.close_=e=>this.close(e),this.opened_=this.hasBeenOpened_=this.hasBeenFilled_=!1,this.closeable(!this.options_.uncloseable),this.content(this.options_.content),this.contentEl_=o("div",{className:ei+"-content"},{role:"document"}),this.descEl_=o("p",{className:ei+"-description vjs-control-text",id:this.el().getAttribute("aria-describedby")}),xe(this.descEl_,this.description()),this.el_.appendChild(this.descEl_),this.el_.appendChild(this.contentEl_)}createEl(){return super.createEl("div",{className:this.buildCSSClass(),tabIndex:-1},{"aria-describedby":this.id()+"_description","aria-hidden":"true","aria-label":this.label(),role:"dialog","aria-live":"polite"})}dispose(){this.contentEl_=null,this.descEl_=null,this.previouslyActiveEl_=null,super.dispose()}buildCSSClass(){return ei+" vjs-hidden "+super.buildCSSClass()}label(){return this.localize(this.options_.label||"Modal Window")}description(){let e=this.options_.description||this.localize("This is a modal window.");return this.closeable()&&(e+=" "+this.localize("This modal can be closed by pressing the Escape key or activating the close button.")),e}open(){var e;this.opened_?this.options_.fillAlways&&this.fill():(e=this.player(),this.trigger("beforemodalopen"),this.opened_=!0,!this.options_.fillAlways&&(this.hasBeenOpened_||this.hasBeenFilled_)||this.fill(),this.wasPlaying_=!e.paused(),this.options_.pauseOnOpen&&this.wasPlaying_&&e.pause(),this.on("keydown",this.handleKeyDown_),this.hadControls_=e.controls(),e.controls(!1),this.show(),this.conditionalFocus_(),this.el().setAttribute("aria-hidden","false"),this.trigger("modalopen"),this.hasBeenOpened_=!0)}opened(e){return"boolean"==typeof e&&this[e?"open":"close"](),this.opened_}close(){var e;this.opened_&&(e=this.player(),this.trigger("beforemodalclose"),this.opened_=!1,this.wasPlaying_&&this.options_.pauseOnOpen&&e.play(),this.off("keydown",this.handleKeyDown_),this.hadControls_&&e.controls(!0),this.hide(),this.el().setAttribute("aria-hidden","true"),this.trigger("modalclose"),this.conditionalBlur_(),this.options_.temporary)&&this.dispose()}closeable(t){if("boolean"==typeof t){var i,t=this.closeable_=!!t;let e=this.getChild("closeButton");t&&!e&&(i=this.contentEl_,this.contentEl_=this.el_,e=this.addChild("closeButton",{controlText:"Close Modal Dialog"}),this.contentEl_=i,this.on(e,"close",this.close_)),!t&&e&&(this.off(e,"close",this.close_),this.removeChild(e),e.dispose())}return this.closeable_}fill(){this.fillWith(this.content())}fillWith(e){var t=this.contentEl(),i=t.parentNode,s=t.nextSibling,e=(this.trigger("beforemodalfill"),this.hasBeenFilled_=!0,i.removeChild(t),this.empty(),Ge(t,e),this.trigger("modalfill"),s?i.insertBefore(t,s):i.appendChild(t),this.getChild("closeButton"));e&&i.appendChild(e.el_)}empty(){this.trigger("beforemodalempty"),$e(this.contentEl()),this.trigger("modalempty")}content(e){return"undefined"!=typeof e&&(this.content_=e),this.content_}conditionalFocus_(){var e=document.activeElement,t=this.player_.el_;this.previouslyActiveEl_=null,!t.contains(e)&&t!==e||(this.previouslyActiveEl_=e,this.focus())}conditionalBlur_(){this.previouslyActiveEl_&&(this.previouslyActiveEl_.focus(),this.previouslyActiveEl_=null)}handleKeyDown(e){if(e.stopPropagation(),r.isEventKey(e,"Escape")&&this.closeable())e.preventDefault(),this.close();else if(r.isEventKey(e,"Tab")){var i=this.focusableEls_(),s=this.el_.querySelector(":focus");let t;for(let e=0;e<i.length;e++)if(s===i[e]){t=e;break}document.activeElement===this.el_&&(t=0),e.shiftKey&&0===t?(i[i.length-1].focus(),e.preventDefault()):e.shiftKey||t!==i.length-1||(i[0].focus(),e.preventDefault())}}focusableEls_(){var e=this.el_.querySelectorAll("*");return Array.prototype.filter.call(e,e=>(e instanceof window.HTMLAnchorElement||e instanceof window.HTMLAreaElement)&&e.hasAttribute("href")||(e instanceof window.HTMLInputElement||e instanceof window.HTMLSelectElement||e instanceof window.HTMLTextAreaElement||e instanceof window.HTMLButtonElement)&&!e.hasAttribute("disabled")||e instanceof window.HTMLIFrameElement||e instanceof window.HTMLObjectElement||e instanceof window.HTMLEmbedElement||e.hasAttribute("tabindex")&&-1!==e.getAttribute("tabindex")||e.hasAttribute("contenteditable"))}}ti.prototype.options_={pauseOnOpen:!0,temporary:!0},f.registerComponent("ModalDialog",ti);class ii extends Tt{constructor(t=[]){super(),this.tracks_=[],Object.defineProperty(this,"length",{get(){return this.tracks_.length}});for(let e=0;e<t.length;e++)this.addTrack(t[e])}addTrack(e){const t=this.tracks_.length;""+t in this||Object.defineProperty(this,t,{get(){return this.tracks_[t]}}),-1===this.tracks_.indexOf(e)&&(this.tracks_.push(e),this.trigger({track:e,type:"addtrack",target:this})),e.labelchange_=()=>{this.trigger({track:e,type:"labelchange",target:this})},wt(e)&&e.addEventListener("labelchange",e.labelchange_)}removeTrack(i){let s;for(let e=0,t=this.length;e<t;e++)if(this[e]===i){(s=this[e]).off&&s.off(),this.tracks_.splice(e,1);break}s&&this.trigger({track:s,type:"removetrack",target:this})}getTrackById(i){let s=null;for(let e=0,t=this.length;e<t;e++){var r=this[e];if(r.id===i){s=r;break}}return s}}for(const tc in ii.prototype.allowedEvents_={change:"change",addtrack:"addtrack",removetrack:"removetrack",labelchange:"labelchange"})ii.prototype["on"+tc]=null;function si(t,i){for(let e=0;e<t.length;e++)Object.keys(t[e]).length&&i.id!==t[e].id&&(t[e].enabled=!1)}function ri(t,i){for(let e=0;e<t.length;e++)Object.keys(t[e]).length&&i.id!==t[e].id&&(t[e].selected=!1)}class ni extends ii{addTrack(e){super.addTrack(e),this.queueChange_||(this.queueChange_=()=>this.queueTrigger("change")),this.triggerSelectedlanguagechange||(this.triggerSelectedlanguagechange_=()=>this.trigger("selectedlanguagechange")),e.addEventListener("modechange",this.queueChange_);-1===["metadata","chapters"].indexOf(e.kind)&&e.addEventListener("modechange",this.triggerSelectedlanguagechange_)}removeTrack(e){super.removeTrack(e),e.removeEventListener&&(this.queueChange_&&e.removeEventListener("modechange",this.queueChange_),this.selectedlanguagechange_)&&e.removeEventListener("modechange",this.triggerSelectedlanguagechange_)}}class ai{constructor(e){ai.prototype.setCues_.call(this,e),Object.defineProperty(this,"length",{get(){return this.length_}})}setCues_(e){var t=this.length||0;let i=0;function s(e){""+e in this||Object.defineProperty(this,""+e,{get(){return this.cues_[e]}})}var r=e.length;this.cues_=e,this.length_=e.length;if(t<r)for(i=t;i<r;i++)s.call(this,i)}getCueById(i){let s=null;for(let e=0,t=this.length;e<t;e++){var r=this[e];if(r.id===i){s=r;break}}return s}}const oi={alternative:"alternative",captions:"captions",main:"main",sign:"sign",subtitles:"subtitles",commentary:"commentary"},li={alternative:"alternative",descriptions:"descriptions",main:"main","main-desc":"main-desc",translation:"translation",commentary:"commentary"},di={subtitles:"subtitles",captions:"captions",descriptions:"descriptions",chapters:"chapters",metadata:"metadata"},hi={disabled:"disabled",hidden:"hidden",showing:"showing"};class ui extends Tt{constructor(e={}){super();const t={id:e.id||"vjs_track_"+ot++,kind:e.kind||"",language:e.language||""};let i=e.label||"";for(const s in t)Object.defineProperty(this,s,{get(){return t[s]},set(){}});Object.defineProperty(this,"label",{get(){return i},set(e){e!==i&&(i=e,this.trigger("labelchange"))}})}}function ci(e){var t=["protocol","hostname","port","pathname","search","hash","host"],i=document.createElement("a"),s=(i.href=e,{});for(let e=0;e<t.length;e++)s[t[e]]=i[t[e]];return"http:"===s.protocol&&(s.host=s.host.replace(/:80$/,"")),"https:"===s.protocol&&(s.host=s.host.replace(/:443$/,"")),s.protocol||(s.protocol=window.location.protocol),s.host||(s.host=window.location.host),s}function pi(e){var t;return e.match(/^https?:\/\//)||((t=document.createElement("a")).href=e,e=t.href),e}function mi(e,t=window.location){return(":"===(e=ci(e)).protocol?t:e).protocol+e.host!==t.protocol+t.host}const gi=function(e){if("string"==typeof e){e=/^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/.exec(e);if(e)return e.pop().toLowerCase()}return""};var fi=Object.freeze({__proto__:null,parseUrl:ci,getAbsoluteURL:pi,getFileExtension:gi,isCrossOrigin:mi}),yi="undefined"!=typeof window?window:"undefined"!=typeof t?t:"undefined"!=typeof self?self:{},_i=yi,vi=Ut(function(e){function t(){return e.exports=t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i,s=arguments[t];for(i in s)Object.prototype.hasOwnProperty.call(s,i)&&(e[i]=s[i])}return e},e.exports.__esModule=!0,e.exports.default=e.exports,t.apply(this,arguments)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports}),bi=(yi=vi)&&yi.__esModule&&Object.prototype.hasOwnProperty.call(yi,"default")?yi.default:yi,Ti=function(e){var t;return!!e&&("[object Function]"===(t=Si.call(e))||"function"==typeof e&&"[object RegExp]"!==t||"undefined"!=typeof window&&(e===window.setTimeout||e===window.alert||e===window.confirm||e===window.prompt))},Si=Object.prototype.toString;Ai.httpHandler=function(s,r){return void 0===r&&(r=!1),function(e,t,i){if(e)s(e);else if(400<=t.statusCode&&t.statusCode<=599){e=i;if(r)if(_i.TextDecoder){t=function(e){void 0===e&&(e="");return e.toLowerCase().split(";").reduce(function(e,t){var t=t.split("="),i=t[0],t=t[1];return"charset"===i.trim()?t.trim():e},"utf-8")}(t.headers&&t.headers["content-type"]);try{e=new TextDecoder(t).decode(i)}catch(e){}}else e=String.fromCharCode.apply(null,new Uint8Array(i));s({cause:e})}else s(null,i)}};for(var wi=function(e){var s={};return e&&e.trim().split("\n").forEach(function(e){var t=e.indexOf(":"),i=e.slice(0,t).trim().toLowerCase(),e=e.slice(t+1).trim();"undefined"==typeof s[i]?s[i]=e:Array.isArray(s[i])?s[i].push(e):s[i]=[s[i],e]}),s},Ei=Ai,yi=Ai,Ci=(Ai.XMLHttpRequest=_i.XMLHttpRequest||function(){},Ai.XDomainRequest="withCredentials"in new Ai.XMLHttpRequest?Ai.XMLHttpRequest:_i.XDomainRequest,["get","put","post","patch","head","delete"]),ki=function(s){Ai["delete"===s?"del":s]=function(e,t,i){return(t=Ii(e,t,i)).method=s.toUpperCase(),Di(t)}},xi=0;xi<Ci.length;xi++)ki(Ci[xi]);function Ii(e,t,i){var s=e;return Ti(t)?(i=t,"string"==typeof e&&(s={uri:e})):s=vi({},t,{uri:e}),s.callback=i,s}function Ai(e,t,i){return Di(t=Ii(e,t,i))}function Di(s){if("undefined"==typeof s.callback)throw new Error("callback argument missing");var r=!1,n=function(e,t,i){r||(r=!0,s.callback(e,t,i))};function a(){var e=void 0,e=d.response||d.responseText||function(e){try{if("document"===e.responseType)return e.responseXML;var t=e.responseXML&&"parsererror"===e.responseXML.documentElement.nodeName;if(""===e.responseType&&!t)return e.responseXML}catch(e){}return null}(d);if(g)try{e=JSON.parse(e)}catch(e){}return e}function t(e){return clearTimeout(l),(e=e instanceof Error?e:new Error(""+(e||"Unknown XMLHttpRequest Error"))).statusCode=0,n(e,f)}function e(){var e,t,i;if(!o)return clearTimeout(l),e=s.useXDR&&void 0===d.status?200:1223===d.status?204:d.status,t=f,i=null,0!==e?(t={body:a(),statusCode:e,method:u,headers:{},url:h,rawRequest:d},d.getAllResponseHeaders&&(t.headers=wi(d.getAllResponseHeaders()))):i=new Error("Internal XMLHttpRequest Error"),n(i,t,t.body)}var i,o,l,d=s.xhr||null,h=(d=d||new(s.cors||s.useXDR?Ai.XDomainRequest:Ai.XMLHttpRequest)).url=s.uri||s.url,u=d.method=s.method||"GET",c=s.body||s.data,p=d.headers=s.headers||{},m=!!s.sync,g=!1,f={body:void 0,headers:{},statusCode:0,method:u,url:h,rawRequest:d};if("json"in s&&!1!==s.json&&(g=!0,p.accept||p.Accept||(p.Accept="application/json"),"GET"!==u)&&"HEAD"!==u&&(p["content-type"]||p["Content-Type"]||(p["Content-Type"]="application/json"),c=JSON.stringify(!0===s.json?c:s.json)),d.onreadystatechange=function(){4===d.readyState&&setTimeout(e,0)},d.onload=e,d.onerror=t,d.onprogress=function(){},d.onabort=function(){o=!0},d.ontimeout=t,d.open(u,h,!m,s.username,s.password),m||(d.withCredentials=!!s.withCredentials),!m&&0<s.timeout&&(l=setTimeout(function(){var e;o||(o=!0,d.abort("timeout"),(e=new Error("XMLHttpRequest timeout")).code="ETIMEDOUT",t(e))},s.timeout)),d.setRequestHeader)for(i in p)p.hasOwnProperty(i)&&d.setRequestHeader(i,p[i]);else if(s.headers&&!function(e){for(var t in e)if(e.hasOwnProperty(t))return;return 1}(s.headers))throw new Error("Headers cannot be set on an XDomainRequest object");return"responseType"in s&&(d.responseType=s.responseType),"beforeSend"in s&&"function"==typeof s.beforeSend&&s.beforeSend(d),d.send(c||null),d}Ei.default=yi;function Pi(e,t){var i=new window.WebVTT.Parser(window,window.vttjs,window.WebVTT.StringDecoder());const s=[];i.oncue=function(e){t.addCue(e)},i.onparsingerror=function(e){s.push(e)},i.onflush=function(){t.trigger({type:"loadeddata",target:t})},i.parse(e),0<s.length&&(window.console&&window.console.groupCollapsed&&window.console.groupCollapsed("Text Track parsing errors for "+t.src),s.forEach(e=>l.error(e)),window.console)&&window.console.groupEnd&&window.console.groupEnd(),i.flush()}function Li(e,s){var t={uri:e};(e=mi(e))&&(t.cors=e),(e="use-credentials"===s.tech_.crossOrigin())&&(t.withCredentials=e),Ei(t,m(this,function(e,t,i){if(e)return l.error(e,t);s.loaded_=!0,"function"!=typeof window.WebVTT?s.tech_&&s.tech_.any(["vttjsloaded","vttjserror"],e=>{if("vttjserror"!==e.type)return Pi(i,s);l.error("vttjs failed to load, stopping trying to process "+s.src)}):Pi(i,s)}))}class Oi extends ui{constructor(e={}){if(!e.tech)throw new Error("A tech was not provided.");e=d(e,{kind:di[e.kind]||"subtitles",language:e.language||e.srclang||""});let t=hi[e.mode]||"disabled";const i=e.default,s=("metadata"!==e.kind&&"chapters"!==e.kind||(t="hidden"),super(e),this.tech_=e.tech,this.cues_=[],this.activeCues_=[],this.preload_=!1!==this.tech_.preloadTextTracks,new ai(this.cues_)),n=new ai(this.activeCues_);let a=!1;this.timeupdateHandler=m(this,function(e={}){this.tech_.isDisposed()||(this.tech_.isReady_&&(this.activeCues=this.activeCues,a)&&(this.trigger("cuechange"),a=!1),"timeupdate"!==e.type&&(this.rvf_=this.tech_.requestVideoFrameCallback(this.timeupdateHandler)))});this.tech_.one("dispose",()=>{this.stopTracking()}),"disabled"!==t&&this.startTracking(),Object.defineProperties(this,{default:{get(){return i},set(){}},mode:{get(){return t},set(e){hi[e]&&t!==e&&(t=e,this.preload_||"disabled"===t||0!==this.cues.length||Li(this.src,this),this.stopTracking(),"disabled"!==t&&this.startTracking(),this.trigger("modechange"))}},cues:{get(){return this.loaded_?s:null},set(){}},activeCues:{get(){if(!this.loaded_)return null;if(0!==this.cues.length){var i=this.tech_.currentTime(),s=[];for(let e=0,t=this.cues.length;e<t;e++){var r=this.cues[e];r.startTime<=i&&r.endTime>=i&&s.push(r)}if(a=!1,s.length!==this.activeCues_.length)a=!0;else for(let e=0;e<s.length;e++)-1===this.activeCues_.indexOf(s[e])&&(a=!0);this.activeCues_=s,n.setCues_(this.activeCues_)}return n},set(){}}}),e.src?(this.src=e.src,this.preload_||(this.loaded_=!0),(this.preload_||"subtitles"!==e.kind&&"captions"!==e.kind)&&Li(this.src,this)):this.loaded_=!0}startTracking(){this.rvf_=this.tech_.requestVideoFrameCallback(this.timeupdateHandler),this.tech_.on("timeupdate",this.timeupdateHandler)}stopTracking(){this.rvf_&&(this.tech_.cancelVideoFrameCallback(this.rvf_),this.rvf_=void 0),this.tech_.off("timeupdate",this.timeupdateHandler)}addCue(e){let t=e;if(!("getCueAsHTML"in t)){t=new window.vttjs.VTTCue(e.startTime,e.endTime,e.text);for(const s in e)s in t||(t[s]=e[s]);t.id=e.id,t.originalCue_=e}var i=this.tech_.textTracks();for(let e=0;e<i.length;e++)i[e]!==this&&i[e].removeCue(t);this.cues_.push(t),this.cues.setCues_(this.cues_)}removeCue(e){let t=this.cues_.length;for(;t--;){var i=this.cues_[t];if(i===e||i.originalCue_&&i.originalCue_===e){this.cues_.splice(t,1),this.cues.setCues_(this.cues_);break}}}}Oi.prototype.allowedEvents_={cuechange:"cuechange"};class Ri extends ui{constructor(e={}){e=d(e,{kind:li[e.kind]||""});super(e);let t=!1;Object.defineProperty(this,"enabled",{get(){return t},set(e){"boolean"==typeof e&&e!==t&&(t=e,this.trigger("enabledchange"))}}),e.enabled&&(this.enabled=e.enabled),this.loaded_=!0}}class Ni extends ui{constructor(e={}){e=d(e,{kind:oi[e.kind]||""});super(e);let t=!1;Object.defineProperty(this,"selected",{get(){return t},set(e){"boolean"==typeof e&&e!==t&&(t=e,this.trigger("selectedchange"))}}),e.selected&&(this.selected=e.selected)}}class Mi extends Tt{constructor(e={}){super();let t;const i=new Oi(e);this.kind=i.kind,this.src=i.src,this.srclang=i.language,this.label=i.label,this.default=i.default,Object.defineProperties(this,{readyState:{get(){return t}},track:{get(){return i}}}),t=Mi.NONE,i.addEventListener("loadeddata",()=>{t=Mi.LOADED,this.trigger({type:"load",target:this})})}}Mi.prototype.allowedEvents_={load:"load"},Mi.NONE=0,Mi.LOADING=1,Mi.LOADED=2,Mi.ERROR=3;const Ui={audio:{ListClass:class extends ii{constructor(t=[]){for(let e=t.length-1;0<=e;e--)if(t[e].enabled){si(t,t[e]);break}super(t),this.changing_=!1}addTrack(e){e.enabled&&si(this,e),super.addTrack(e),e.addEventListener&&(e.enabledChange_=()=>{this.changing_||(this.changing_=!0,si(this,e),this.changing_=!1,this.trigger("change"))},e.addEventListener("enabledchange",e.enabledChange_))}removeTrack(e){super.removeTrack(e),e.removeEventListener&&e.enabledChange_&&(e.removeEventListener("enabledchange",e.enabledChange_),e.enabledChange_=null)}},TrackClass:Ri,capitalName:"Audio"},video:{ListClass:class extends ii{constructor(t=[]){for(let e=t.length-1;0<=e;e--)if(t[e].selected){ri(t,t[e]);break}super(t),this.changing_=!1,Object.defineProperty(this,"selectedIndex",{get(){for(let e=0;e<this.length;e++)if(this[e].selected)return e;return-1},set(){}})}addTrack(e){e.selected&&ri(this,e),super.addTrack(e),e.addEventListener&&(e.selectedChange_=()=>{this.changing_||(this.changing_=!0,ri(this,e),this.changing_=!1,this.trigger("change"))},e.addEventListener("selectedchange",e.selectedChange_))}removeTrack(e){super.removeTrack(e),e.removeEventListener&&e.selectedChange_&&(e.removeEventListener("selectedchange",e.selectedChange_),e.selectedChange_=null)}},TrackClass:Ni,capitalName:"Video"},text:{ListClass:ni,TrackClass:Oi,capitalName:"Text"}},Bi=(Object.keys(Ui).forEach(function(e){Ui[e].getterName=e+"Tracks",Ui[e].privateName=e+"Tracks_"}),{remoteText:{ListClass:ni,TrackClass:Oi,capitalName:"RemoteText",getterName:"remoteTextTracks",privateName:"remoteTextTracks_"},remoteTextEl:{ListClass:class{constructor(i=[]){this.trackElements_=[],Object.defineProperty(this,"length",{get(){return this.trackElements_.length}});for(let e=0,t=i.length;e<t;e++)this.addTrackElement_(i[e])}addTrackElement_(e){const t=this.trackElements_.length;""+t in this||Object.defineProperty(this,t,{get(){return this.trackElements_[t]}}),-1===this.trackElements_.indexOf(e)&&this.trackElements_.push(e)}getTrackElementByTrack_(i){let s;for(let e=0,t=this.trackElements_.length;e<t;e++)if(i===this.trackElements_[e].track){s=this.trackElements_[e];break}return s}removeTrackElement_(i){for(let e=0,t=this.trackElements_.length;e<t;e++)if(i===this.trackElements_[e]){this.trackElements_[e].track&&"function"==typeof this.trackElements_[e].track.off&&this.trackElements_[e].track.off(),"function"==typeof this.trackElements_[e].off&&this.trackElements_[e].off(),this.trackElements_.splice(e,1);break}}},TrackClass:Mi,capitalName:"RemoteTextTrackEls",getterName:"remoteTextTrackEls",privateName:"remoteTextTrackEls_"}}),a=Object.assign({},Ui,Bi);Bi.names=Object.keys(Bi),Ui.names=Object.keys(Ui),a.names=[].concat(Bi.names).concat(Ui.names);var yi="undefined"!=typeof t?t:"undefined"!=typeof window?window:{},Fi="undefined"!=typeof document?document:(Fi=yi["__GLOBAL_DOCUMENT_CACHE@4"])||(yi["__GLOBAL_DOCUMENT_CACHE@4"]={}),t=Fi,qi=Object.create||function(e){if(1!==arguments.length)throw new Error("Object.create shim only accepts one parameter.");return ji.prototype=e,new ji};function ji(){}function Hi(e,t){this.name="ParsingError",this.code=e.code,this.message=t||e.message}function Vi(e){function t(e,t,i,s){return 3600*(0|e)+60*(0|t)+(0|i)+(0|s)/1e3}e=e.match(/^(\d+):(\d{1,2})(:\d{1,2})?\.(\d{3})/);return e?e[3]?t(e[1],e[2],e[3].replace(":",""),e[4]):59<e[1]?t(e[1],e[2],0,e[4]):t(0,e[1],e[2],e[4]):null}function $i(){this.values=qi(null)}function zi(e,t,i,s){var r,n,a=s?e.split(s):[e];for(r in a)"string"==typeof a[r]&&2===(n=a[r].split(i)).length&&t(n[0].trim(),n[1].trim())}((Hi.prototype=qi(Error.prototype)).constructor=Hi).Errors={BadSignature:{code:0,message:"Malformed WebVTT signature."},BadTimeStamp:{code:1,message:"Malformed time stamp."}},$i.prototype={set:function(e,t){this.get(e)||""===t||(this.values[e]=t)},get:function(e,t,i){return i?this.has(e)?this.values[e]:t[i]:this.has(e)?this.values[e]:t},has:function(e){return e in this.values},alt:function(e,t,i){for(var s=0;s<i.length;++s)if(t===i[s]){this.set(e,t);break}},integer:function(e,t){/^-?\d+$/.test(t)&&this.set(e,parseInt(t,10))},percent:function(e,t){return!!(t.match(/^([\d]{1,3})(\.[\d]*)?%$/)&&0<=(t=parseFloat(t))&&t<=100)&&(this.set(e,t),!0)}};var Wi=t.createElement&&t.createElement("textarea"),Gi={c:"span",i:"i",b:"b",u:"u",ruby:"ruby",rt:"rt",v:"span",lang:"span"},Xi={white:"rgba(255,255,255,1)",lime:"rgba(0,255,0,1)",cyan:"rgba(0,255,255,1)",red:"rgba(255,0,0,1)",yellow:"rgba(255,255,0,1)",magenta:"rgba(255,0,255,1)",blue:"rgba(0,0,255,1)",black:"rgba(0,0,0,1)"},Ki={v:"title",lang:"lang"},Yi={rt:"ruby"};function Qi(e,t){for(var i,s,r,n,a,o,l=e.document.createElement("div"),d=l,h=[];null!==(o=void 0,o=t?(o=(o=t.match(/^([^<]*)(<[^>]*>?)?/))[1]||o[2],t=t.substr(o.length),o):null);)"<"===o[0]?"/"===o[1]?h.length&&h[h.length-1]===o.substr(2).replace(">","")&&(h.pop(),d=d.parentNode):(s=Vi(o.substr(1,o.length-2)))?(i=e.document.createProcessingInstruction("timestamp",s),d.appendChild(i)):(s=o.match(/^<([^.\s/0-9>]+)(\.[^\s\\>]+)?([^>\\]+)?(\\?)>?$/))&&(r=s[1],n=s[3],a=void 0,a=Gi[r],i=a?(a=e.document.createElement(a),(r=Ki[r])&&n&&(a[r]=n.trim()),a):null)&&(r=d,Yi[(n=i).localName]&&Yi[n.localName]!==r.localName||(s[2]&&((a=s[2].split(".")).forEach(function(e){var t=/^bg_/.test(e),e=t?e.slice(3):e;Xi.hasOwnProperty(e)&&(e=Xi[e],i.style[t?"background-color":"color"]=e)}),i.className=a.join(" ")),h.push(s[1]),d.appendChild(i),d=i)):d.appendChild(e.document.createTextNode((n=o,Wi.innerHTML=n,n=Wi.textContent,Wi.textContent="",n)));return l}var Ji=[[1470,1470],[1472,1472],[1475,1475],[1478,1478],[1488,1514],[1520,1524],[1544,1544],[1547,1547],[1549,1549],[1563,1563],[1566,1610],[1645,1647],[1649,1749],[1765,1766],[1774,1775],[1786,1805],[1807,1808],[1810,1839],[1869,1957],[1969,1969],[1984,2026],[2036,2037],[2042,2042],[2048,2069],[2074,2074],[2084,2084],[2088,2088],[2096,2110],[2112,2136],[2142,2142],[2208,2208],[2210,2220],[8207,8207],[64285,64285],[64287,64296],[64298,64310],[64312,64316],[64318,64318],[64320,64321],[64323,64324],[64326,64449],[64467,64829],[64848,64911],[64914,64967],[65008,65020],[65136,65140],[65142,65276],[67584,67589],[67592,67592],[67594,67637],[67639,67640],[67644,67644],[67647,67669],[67671,67679],[67840,67867],[67872,67897],[67903,67903],[67968,68023],[68030,68031],[68096,68096],[68112,68115],[68117,68119],[68121,68147],[68160,68167],[68176,68184],[68192,68223],[68352,68405],[68416,68437],[68440,68466],[68472,68479],[68608,68680],[126464,126467],[126469,126495],[126497,126498],[126500,126500],[126503,126503],[126505,126514],[126516,126519],[126521,126521],[126523,126523],[126530,126530],[126535,126535],[126537,126537],[126539,126539],[126541,126543],[126545,126546],[126548,126548],[126551,126551],[126553,126553],[126555,126555],[126557,126557],[126559,126559],[126561,126562],[126564,126564],[126567,126570],[126572,126578],[126580,126583],[126585,126588],[126590,126590],[126592,126601],[126603,126619],[126625,126627],[126629,126633],[126635,126651],[1114109,1114109]];function Zi(e){var t=[],i="";if(e&&e.childNodes)for(n(t,e);i=function e(t){var i,s,r;return t&&t.length?(s=(i=t.pop()).textContent||i.innerText)?(r=s.match(/^.*(\n|\r)/))?r[t.length=0]:s:"ruby"===i.tagName?e(t):i.childNodes?(n(t,i),e(t)):void 0:null}(t);)for(var s=0;s<i.length;s++)if(function(e){for(var t=0;t<Ji.length;t++){var i=Ji[t];if(e>=i[0]&&e<=i[1])return 1}}(i.charCodeAt(s)))return"rtl";return"ltr";function n(e,t){for(var i=t.childNodes.length-1;0<=i;i--)e.push(t.childNodes[i])}}function es(){}function ts(e,t,i){es.call(this),this.cue=t,this.cueDiv=Qi(e,t.text);var s={color:"rgba(255, 255, 255, 1)",backgroundColor:"rgba(0, 0, 0, 0.8)",position:"relative",left:0,right:0,top:0,bottom:0,display:"inline",writingMode:""===t.vertical?"horizontal-tb":"lr"===t.vertical?"vertical-lr":"vertical-rl",unicodeBidi:"plaintext"},r=(this.applyStyles(s,this.cueDiv),this.div=e.document.createElement("div"),s={direction:Zi(this.cueDiv),writingMode:""===t.vertical?"horizontal-tb":"lr"===t.vertical?"vertical-lr":"vertical-rl",unicodeBidi:"plaintext",textAlign:"middle"===t.align?"center":t.align,font:i.font,whiteSpace:"pre-line",position:"absolute"},this.applyStyles(s),this.div.appendChild(this.cueDiv),0);switch(t.positionAlign){case"start":case"line-left":r=t.position;break;case"center":r=t.position-t.size/2;break;case"end":case"line-right":r=t.position-t.size}""===t.vertical?this.applyStyles({left:this.formatStyle(r,"%"),width:this.formatStyle(t.size,"%")}):this.applyStyles({top:this.formatStyle(r,"%"),height:this.formatStyle(t.size,"%")}),this.move=function(e){this.applyStyles({top:this.formatStyle(e.top,"px"),bottom:this.formatStyle(e.bottom,"px"),left:this.formatStyle(e.left,"px"),right:this.formatStyle(e.right,"px"),height:this.formatStyle(e.height,"px"),width:this.formatStyle(e.width,"px")})}}function y(e){var t,i,s,r;e.div&&(t=e.div.offsetHeight,i=e.div.offsetWidth,s=e.div.offsetTop,r=(r=(r=e.div.childNodes)&&r[0])&&r.getClientRects&&r.getClientRects(),e=e.div.getBoundingClientRect(),r=r?Math.max(r[0]&&r[0].height||0,e.height/r.length):0),this.left=e.left,this.right=e.right,this.top=e.top||s,this.height=e.height||t,this.bottom=e.bottom||s+(e.height||t),this.width=e.width||i,this.lineHeight=void 0!==r?r:e.lineHeight}function is(e,t,o,l){var i,s=new y(t),r=t.cue,n=function(e){if("number"==typeof e.line&&(e.snapToLines||0<=e.line&&e.line<=100))return e.line;if(!e.track||!e.track.textTrackList||!e.track.textTrackList.mediaElement)return-1;for(var t=e.track,i=t.textTrackList,s=0,r=0;r<i.length&&i[r]!==t;r++)"showing"===i[r].mode&&s++;return-1*++s}(r),a=[];if(r.snapToLines){switch(r.vertical){case"":a=["+y","-y"],i="height";break;case"rl":a=["+x","-x"],i="width";break;case"lr":a=["-x","+x"],i="width"}var d=s.lineHeight,h=d*Math.round(n),u=o[i]+d,c=a[0];Math.abs(h)>u&&(h=h<0?-1:1,h*=Math.ceil(u/d)*d),n<0&&(h+=""===r.vertical?o.height:o.width,a=a.reverse()),s.move(c,h)}else{var p=s.lineHeight/o.height*100;switch(r.lineAlign){case"center":n-=p/2;break;case"end":n-=p}switch(r.vertical){case"":t.applyStyles({top:t.formatStyle(n,"%")});break;case"rl":t.applyStyles({left:t.formatStyle(n,"%")});break;case"lr":t.applyStyles({right:t.formatStyle(n,"%")})}a=["+y","-x","+x","-y"],s=new y(t)}u=function(e,t){for(var i,s=new y(e),r=1,n=0;n<t.length;n++){for(;e.overlapsOppositeAxis(o,t[n])||e.within(o)&&e.overlapsAny(l);)e.move(t[n]);if(e.within(o))return e;var a=e.intersectPercentage(o);a<r&&(i=new y(e),r=a),e=new y(s)}return i||s}(s,a);t.move(u.toCSSCompatValues(o))}function ss(){}es.prototype.applyStyles=function(e,t){for(var i in t=t||this.div,e)e.hasOwnProperty(i)&&(t.style[i]=e[i])},es.prototype.formatStyle=function(e,t){return 0===e?0:e+t},(ts.prototype=qi(es.prototype)).constructor=ts,y.prototype.move=function(e,t){switch(t=void 0!==t?t:this.lineHeight,e){case"+x":this.left+=t,this.right+=t;break;case"-x":this.left-=t,this.right-=t;break;case"+y":this.top+=t,this.bottom+=t;break;case"-y":this.top-=t,this.bottom-=t}},y.prototype.overlaps=function(e){return this.left<e.right&&this.right>e.left&&this.top<e.bottom&&this.bottom>e.top},y.prototype.overlapsAny=function(e){for(var t=0;t<e.length;t++)if(this.overlaps(e[t]))return!0;return!1},y.prototype.within=function(e){return this.top>=e.top&&this.bottom<=e.bottom&&this.left>=e.left&&this.right<=e.right},y.prototype.overlapsOppositeAxis=function(e,t){switch(t){case"+x":return this.left<e.left;case"-x":return this.right>e.right;case"+y":return this.top<e.top;case"-y":return this.bottom>e.bottom}},y.prototype.intersectPercentage=function(e){return Math.max(0,Math.min(this.right,e.right)-Math.max(this.left,e.left))*Math.max(0,Math.min(this.bottom,e.bottom)-Math.max(this.top,e.top))/(this.height*this.width)},y.prototype.toCSSCompatValues=function(e){return{top:this.top-e.top,bottom:e.bottom-this.bottom,left:this.left-e.left,right:e.right-this.right,height:this.height,width:this.width}},y.getSimpleBoxPosition=function(e){var t=e.div?e.div.offsetHeight:e.tagName?e.offsetHeight:0,i=e.div?e.div.offsetWidth:e.tagName?e.offsetWidth:0,s=e.div?e.div.offsetTop:e.tagName?e.offsetTop:0;return{left:(e=e.div?e.div.getBoundingClientRect():e.tagName?e.getBoundingClientRect():e).left,right:e.right,top:e.top||s,height:e.height||t,bottom:e.bottom||s+(e.height||t),width:e.width||i}},ss.StringDecoder=function(){return{decode:function(e){if(!e)return"";if("string"!=typeof e)throw new Error("Error - expected string data.");return decodeURIComponent(encodeURIComponent(e))}}},ss.convertCueToDOMTree=function(e,t){return e&&t?Qi(e,t):null};ss.processCues=function(e,t,i){if(!e||!t||!i)return null;for(;i.firstChild;)i.removeChild(i.firstChild);var s=e.document.createElement("div");if(s.style.position="absolute",s.style.left="0",s.style.right="0",s.style.top="0",s.style.bottom="0",s.style.margin="1.5%",i.appendChild(s),function(e){for(var t=0;t<e.length;t++)if(e[t].hasBeenReset||!e[t].displayState)return 1}(t))for(var r,n,a=[],o=y.getSimpleBoxPosition(s),l={font:Math.round(.05*o.height*100)/100+"px sans-serif"},d=0;d<t.length;d++)n=t[d],r=new ts(e,n,l),s.appendChild(r.div),is(0,r,o,a),n.displayState=r.div,a.push(y.getSimpleBoxPosition(r));else for(var h=0;h<t.length;h++)s.appendChild(t[h].displayState)},(ss.Parser=function(e,t,i){i||(i=t,t={}),t=t||{},this.window=e,this.vttjs=t,this.state="INITIAL",this.buffer="",this.decoder=i||new TextDecoder("utf8"),this.regionList=[]}).prototype={reportOrThrowError:function(e){if(!(e instanceof Hi))throw e;this.onparsingerror&&this.onparsingerror(e)},parse:function(e){var s=this;function t(){for(var e=s.buffer,t=0;t<e.length&&"\r"!==e[t]&&"\n"!==e[t];)++t;var i=e.substr(0,t);return"\r"===e[t]&&++t,"\n"===e[t]&&++t,s.buffer=e.substr(t),i}function i(e){e.match(/X-TIMESTAMP-MAP/)?zi(e,function(e,t){var i;"X-TIMESTAMP-MAP"===e&&(e=t,i=new $i,zi(e,function(e,t){switch(e){case"MPEGT":i.integer(e+"S",t);break;case"LOCA":i.set(e+"L",Vi(t))}},/[^\d]:/,/,/),s.ontimestampmap)&&s.ontimestampmap({MPEGTS:i.get("MPEGTS"),LOCAL:i.get("LOCAL")})},/=/):zi(e,function(e,t){var r;"Region"===e&&(e=t,r=new $i,zi(e,function(e,t){switch(e){case"id":r.set(e,t);break;case"width":r.percent(e,t);break;case"lines":r.integer(e,t);break;case"regionanchor":case"viewportanchor":var i,s=t.split(",");2===s.length&&((i=new $i).percent("x",s[0]),i.percent("y",s[1]),i.has("x")&&i.has("y"))&&(r.set(e+"X",i.get("x")),r.set(e+"Y",i.get("y")));break;case"scroll":r.alt(e,t,["up"])}},/=/,/\s/),r.has("id"))&&((e=new(s.vttjs.VTTRegion||s.window.VTTRegion)).width=r.get("width",100),e.lines=r.get("lines",3),e.regionAnchorX=r.get("regionanchorX",0),e.regionAnchorY=r.get("regionanchorY",100),e.viewportAnchorX=r.get("viewportanchorX",0),e.viewportAnchorY=r.get("viewportanchorY",100),e.scroll=r.get("scroll",""),s.onregion&&s.onregion(e),s.regionList.push({id:r.get("id"),region:e}))},/:/)}e&&(s.buffer+=s.decoder.decode(e,{stream:!0}));try{if("INITIAL"===s.state){if(!/\r\n|\n/.test(s.buffer))return this;var r,n=(r=t()).match(/^WEBVTT([ \t].*)?$/);if(!n||!n[0])throw new Hi(Hi.Errors.BadSignature);s.state="HEADER"}for(var a=!1;s.buffer;){if(!/\r\n|\n/.test(s.buffer))return this;switch(a?a=!1:r=t(),s.state){case"HEADER":/:/.test(r)?i(r):r||(s.state="ID");continue;case"NOTE":r||(s.state="ID");continue;case"ID":if(/^NOTE($|[ \t])/.test(r)){s.state="NOTE";break}if(!r)continue;s.cue=new(s.vttjs.VTTCue||s.window.VTTCue)(0,0,"");try{s.cue.align="center"}catch(e){s.cue.align="middle"}if(s.state="CUE",-1===r.indexOf("--\x3e")){s.cue.id=r;continue}case"CUE":try{!function(t,i,n){var s=t;function e(){var e=Vi(t);if(null===e)throw new Hi(Hi.Errors.BadTimeStamp,"Malformed timestamp: "+s);return t=t.replace(/^[^\sa-zA-Z-]+/,""),e}function r(){t=t.replace(/^\s+/,"")}if(r(),i.startTime=e(),r(),"--\x3e"!==t.substr(0,3))throw new Hi(Hi.Errors.BadTimeStamp,"Malformed time stamp (time stamps must be separated by '--\x3e'): "+s);t=t.substr(3),r(),i.endTime=e(),r();var a=t,o=new $i;zi(a,function(e,t){switch(e){case"region":for(var i=n.length-1;0<=i;i--)if(n[i].id===t){o.set(e,n[i].region);break}break;case"vertical":o.alt(e,t,["rl","lr"]);break;case"line":var s=t.split(","),r=s[0];o.integer(e,r),o.percent(e,r)&&o.set("snapToLines",!1),o.alt(e,r,["auto"]),2===s.length&&o.alt("lineAlign",s[1],["start","center","end"]);break;case"position":s=t.split(","),o.percent(e,s[0]),2===s.length&&o.alt("positionAlign",s[1],["start","center","end"]);break;case"size":o.percent(e,t);break;case"align":o.alt(e,t,["start","center","end","left","right"])}},/:/,/\s/),i.region=o.get("region",null),i.vertical=o.get("vertical","");try{i.line=o.get("line","auto")}catch(e){}i.lineAlign=o.get("lineAlign","start"),i.snapToLines=o.get("snapToLines",!0),i.size=o.get("size",100);try{i.align=o.get("align","center")}catch(e){i.align=o.get("align","middle")}try{i.position=o.get("position","auto")}catch(e){i.position=o.get("position",{start:0,left:0,center:50,middle:50,end:100,right:100},i.align)}i.positionAlign=o.get("positionAlign",{start:"start",left:"start",center:"center",middle:"center",end:"end",right:"end"},i.align)}(r,s.cue,s.regionList)}catch(e){s.reportOrThrowError(e),s.cue=null,s.state="BADCUE";continue}s.state="CUETEXT";continue;case"CUETEXT":var o=-1!==r.indexOf("--\x3e");if(!r||o&&(a=!0)){s.oncue&&s.oncue(s.cue),s.cue=null,s.state="ID";continue}s.cue.text&&(s.cue.text+="\n"),s.cue.text+=r.replace(/\u2028/g,"\n").replace(/u2029/g,"\n");continue;case"BADCUE":r||(s.state="ID");continue}}}catch(e){s.reportOrThrowError(e),"CUETEXT"===s.state&&s.cue&&s.oncue&&s.oncue(s.cue),s.cue=null,s.state="INITIAL"===s.state?"BADWEBVTT":"BADCUE"}return this},flush:function(){var t=this;try{if(t.buffer+=t.decoder.decode(),!t.cue&&"HEADER"!==t.state||(t.buffer+="\n\n",t.parse()),"INITIAL"===t.state)throw new Hi(Hi.Errors.BadSignature)}catch(e){t.reportOrThrowError(e)}return t.onflush&&t.onflush(),this}};var rs=ss,ns={"":1,lr:1,rl:1},as={start:1,center:1,end:1,left:1,right:1,auto:1,"line-left":1,"line-right":1};function os(e){return"string"==typeof e&&!!as[e.toLowerCase()]&&e.toLowerCase()}function ls(e,t,i){this.hasBeenReset=!1;var s="",r=!1,n=e,a=t,o=i,l=null,d="",h=!0,u="auto",c="start",p="auto",m="auto",g=100,f="center";Object.defineProperties(this,{id:{enumerable:!0,get:function(){return s},set:function(e){s=""+e}},pauseOnExit:{enumerable:!0,get:function(){return r},set:function(e){r=!!e}},startTime:{enumerable:!0,get:function(){return n},set:function(e){if("number"!=typeof e)throw new TypeError("Start time must be set to a number.");n=e,this.hasBeenReset=!0}},endTime:{enumerable:!0,get:function(){return a},set:function(e){if("number"!=typeof e)throw new TypeError("End time must be set to a number.");a=e,this.hasBeenReset=!0}},text:{enumerable:!0,get:function(){return o},set:function(e){o=""+e,this.hasBeenReset=!0}},region:{enumerable:!0,get:function(){return l},set:function(e){l=e,this.hasBeenReset=!0}},vertical:{enumerable:!0,get:function(){return d},set:function(e){e="string"==typeof(e=e)&&!!ns[e.toLowerCase()]&&e.toLowerCase();if(!1===e)throw new SyntaxError("Vertical: an invalid or illegal direction string was specified.");d=e,this.hasBeenReset=!0}},snapToLines:{enumerable:!0,get:function(){return h},set:function(e){h=!!e,this.hasBeenReset=!0}},line:{enumerable:!0,get:function(){return u},set:function(e){if("number"!=typeof e&&"auto"!==e)throw new SyntaxError("Line: an invalid number or illegal string was specified.");u=e,this.hasBeenReset=!0}},lineAlign:{enumerable:!0,get:function(){return c},set:function(e){e=os(e);e&&(c=e,this.hasBeenReset=!0)}},position:{enumerable:!0,get:function(){return p},set:function(e){if(e<0||100<e)throw new Error("Position must be between 0 and 100.");p=e,this.hasBeenReset=!0}},positionAlign:{enumerable:!0,get:function(){return m},set:function(e){e=os(e);e&&(m=e,this.hasBeenReset=!0)}},size:{enumerable:!0,get:function(){return g},set:function(e){if(e<0||100<e)throw new Error("Size must be between 0 and 100.");g=e,this.hasBeenReset=!0}},align:{enumerable:!0,get:function(){return f},set:function(e){e=os(e);if(!e)throw new SyntaxError("align: an invalid or illegal alignment string was specified.");f=e,this.hasBeenReset=!0}}}),this.displayState=void 0}ls.prototype.getCueAsHTML=function(){return WebVTT.convertCueToDOMTree(window,this.text)};var ds=ls,hs={"":!0,up:!0};function us(e){return"number"==typeof e&&0<=e&&e<=100}function cs(){var t=100,i=3,s=0,r=100,n=0,a=100,o="";Object.defineProperties(this,{width:{enumerable:!0,get:function(){return t},set:function(e){if(!us(e))throw new Error("Width must be between 0 and 100.");t=e}},lines:{enumerable:!0,get:function(){return i},set:function(e){if("number"!=typeof e)throw new TypeError("Lines must be set to a number.");i=e}},regionAnchorY:{enumerable:!0,get:function(){return r},set:function(e){if(!us(e))throw new Error("RegionAnchorX must be between 0 and 100.");r=e}},regionAnchorX:{enumerable:!0,get:function(){return s},set:function(e){if(!us(e))throw new Error("RegionAnchorY must be between 0 and 100.");s=e}},viewportAnchorY:{enumerable:!0,get:function(){return a},set:function(e){if(!us(e))throw new Error("ViewportAnchorY must be between 0 and 100.");a=e}},viewportAnchorX:{enumerable:!0,get:function(){return n},set:function(e){if(!us(e))throw new Error("ViewportAnchorX must be between 0 and 100.");n=e}},scroll:{enumerable:!0,get:function(){return o},set:function(e){e="string"==typeof(e=e)&&!!hs[e.toLowerCase()]&&e.toLowerCase();!1!==e&&(o=e)}}})}var ps=Ut(function(e){var e=e.exports={WebVTT:rs,VTTCue:ds,VTTRegion:cs},t=(_i.vttjs=e,_i.WebVTT=e.WebVTT,e.VTTCue),i=e.VTTRegion,s=_i.VTTCue,r=_i.VTTRegion;e.shim=function(){_i.VTTCue=t,_i.VTTRegion=i},e.restore=function(){_i.VTTCue=s,_i.VTTRegion=r},_i.VTTCue||e.shim()});ps.WebVTT,ps.VTTCue,ps.VTTRegion;class _ extends f{constructor(t={},e=function(){}){t.reportTouchActivity=!1,super(null,t,e),this.onDurationChange_=e=>this.onDurationChange(e),this.trackProgress_=e=>this.trackProgress(e),this.trackCurrentTime_=e=>this.trackCurrentTime(e),this.stopTrackingCurrentTime_=e=>this.stopTrackingCurrentTime(e),this.disposeSourceHandler_=e=>this.disposeSourceHandler(e),this.queuedHanders_=new Set,this.hasStarted_=!1,this.on("playing",function(){this.hasStarted_=!0}),this.on("loadstart",function(){this.hasStarted_=!1}),a.names.forEach(e=>{e=a[e];t&&t[e.getterName]&&(this[e.privateName]=t[e.getterName])}),this.featuresProgressEvents||this.manualProgressOn(),this.featuresTimeupdateEvents||this.manualTimeUpdatesOn(),["Text","Audio","Video"].forEach(e=>{!1===t[`native${e}Tracks`]&&(this[`featuresNative${e}Tracks`]=!1)}),!1===t.nativeCaptions||!1===t.nativeTextTracks?this.featuresNativeTextTracks=!1:!0!==t.nativeCaptions&&!0!==t.nativeTextTracks||(this.featuresNativeTextTracks=!0),this.featuresNativeTextTracks||this.emulateTextTracks(),this.preloadTextTracks=!1!==t.preloadTextTracks,this.autoRemoteTextTracks_=new a.text.ListClass,this.initTrackListeners(),t.nativeControlsForTouch||this.emitTapEvents(),this.constructor&&(this.name_=this.constructor.name||"Unknown Tech")}triggerSourceset(e){this.isReady_||this.one("ready",()=>this.setTimeout(()=>this.triggerSourceset(e),1)),this.trigger({src:e,type:"sourceset"})}manualProgressOn(){this.on("durationchange",this.onDurationChange_),this.manualProgress=!0,this.one("ready",this.trackProgress_)}manualProgressOff(){this.manualProgress=!1,this.stopTrackingProgress(),this.off("durationchange",this.onDurationChange_)}trackProgress(e){this.stopTrackingProgress(),this.progressInterval=this.setInterval(m(this,function(){var e=this.bufferedPercent();this.bufferedPercent_!==e&&this.trigger("progress"),1===(this.bufferedPercent_=e)&&this.stopTrackingProgress()}),500)}onDurationChange(e){this.duration_=this.duration()}buffered(){return qt(0,0)}bufferedPercent(){return Gt(this.buffered(),this.duration_)}stopTrackingProgress(){this.clearInterval(this.progressInterval)}manualTimeUpdatesOn(){this.manualTimeUpdates=!0,this.on("play",this.trackCurrentTime_),this.on("pause",this.stopTrackingCurrentTime_)}manualTimeUpdatesOff(){this.manualTimeUpdates=!1,this.stopTrackingCurrentTime(),this.off("play",this.trackCurrentTime_),this.off("pause",this.stopTrackingCurrentTime_)}trackCurrentTime(){this.currentTimeInterval&&this.stopTrackingCurrentTime(),this.currentTimeInterval=this.setInterval(function(){this.trigger({type:"timeupdate",target:this,manuallyTriggered:!0})},250)}stopTrackingCurrentTime(){this.clearInterval(this.currentTimeInterval),this.trigger({type:"timeupdate",target:this,manuallyTriggered:!0})}dispose(){this.clearTracks(Ui.names),this.manualProgress&&this.manualProgressOff(),this.manualTimeUpdates&&this.manualTimeUpdatesOff(),super.dispose()}clearTracks(e){(e=[].concat(e)).forEach(e=>{var t=this[e+"Tracks"]()||[];let i=t.length;for(;i--;){var s=t[i];"text"===e&&this.removeRemoteTextTrack(s),t.removeTrack(s)}})}cleanupAutoTextTracks(){var e=this.autoRemoteTextTracks_||[];let t=e.length;for(;t--;){var i=e[t];this.removeRemoteTextTrack(i)}}reset(){}crossOrigin(){}setCrossOrigin(){}error(e){return void 0!==e&&(this.error_=new i(e),this.trigger("error")),this.error_}played(){return this.hasStarted_?qt(0,0):qt()}play(){}setScrubbing(e){}scrubbing(){}setCurrentTime(e){this.manualTimeUpdates&&this.trigger({type:"timeupdate",target:this,manuallyTriggered:!0})}initTrackListeners(){Ui.names.forEach(e=>{var t=Ui[e];const i=()=>{this.trigger(e+"trackchange")},s=this[t.getterName]();s.addEventListener("removetrack",i),s.addEventListener("addtrack",i),this.on("dispose",()=>{s.removeEventListener("removetrack",i),s.removeEventListener("addtrack",i)})})}addWebVttScript_(){if(!window.WebVTT)if(document.body.contains(this.el()))if(!this.options_["vtt.js"]&&Y(ps)&&0<Object.keys(ps).length)this.trigger("vttjsloaded");else{const e=document.createElement("script");e.src=this.options_["vtt.js"]||"https://vjs.zencdn.net/vttjs/0.14.1/vtt.min.js",e.onload=()=>{this.trigger("vttjsloaded")},e.onerror=()=>{this.trigger("vttjserror")},this.on("dispose",()=>{e.onload=null,e.onerror=null}),window.WebVTT=!0,this.el().parentNode.appendChild(e)}else this.ready(this.addWebVttScript_)}emulateTextTracks(){const i=this.textTracks(),e=this.remoteTextTracks(),t=e=>i.addTrack(e.track),s=e=>i.removeTrack(e.track),r=(e.on("addtrack",t),e.on("removetrack",s),this.addWebVttScript_(),()=>this.trigger("texttrackchange")),n=()=>{r();for(let e=0;e<i.length;e++){var t=i[e];t.removeEventListener("cuechange",r),"showing"===t.mode&&t.addEventListener("cuechange",r)}};n(),i.addEventListener("change",n),i.addEventListener("addtrack",n),i.addEventListener("removetrack",n),this.on("dispose",function(){e.off("addtrack",t),e.off("removetrack",s),i.removeEventListener("change",n),i.removeEventListener("addtrack",n),i.removeEventListener("removetrack",n);for(let e=0;e<i.length;e++)i[e].removeEventListener("cuechange",r)})}addTextTrack(e,t,i){if(e)return e=e,t=t,i=i,r={},n=(s=this).textTracks(),r.kind=e,t&&(r.label=t),i&&(r.language=i),r.tech=s,e=new a.text.TrackClass(r),n.addTrack(e),e;throw new Error("TextTrack kind is required but was not provided");var s,r,n}createRemoteTextTrack(e){e=d(e,{tech:this});return new Bi.remoteTextEl.TrackClass(e)}addRemoteTextTrack(e={},t){const i=this.createRemoteTextTrack(e);return"boolean"!=typeof t&&(t=!1),this.remoteTextTrackEls().addTrackElement_(i),this.remoteTextTracks().addTrack(i.track),!1===t&&this.ready(()=>this.autoRemoteTextTracks_.addTrack(i.track)),i}removeRemoteTextTrack(e){var t=this.remoteTextTrackEls().getTrackElementByTrack_(e);this.remoteTextTrackEls().removeTrackElement_(t),this.remoteTextTracks().removeTrack(e),this.autoRemoteTextTracks_.removeTrack(e)}getVideoPlaybackQuality(){return{}}requestPictureInPicture(){return Promise.reject()}disablePictureInPicture(){return!0}setDisablePictureInPicture(){}requestVideoFrameCallback(e){const t=ot++;return!this.isReady_||this.paused()?(this.queuedHanders_.add(t),this.one("playing",()=>{this.queuedHanders_.has(t)&&(this.queuedHanders_.delete(t),e())})):this.requestNamedAnimationFrame(t,e),t}cancelVideoFrameCallback(e){this.queuedHanders_.has(e)?this.queuedHanders_.delete(e):this.cancelNamedAnimationFrame(e)}setPoster(){}playsinline(){}setPlaysinline(){}overrideNativeAudioTracks(e){}overrideNativeVideoTracks(e){}canPlayType(e){return""}static canPlayType(e){return""}static canPlaySource(e,t){return _.canPlayType(e.type)}static isTech(e){return e.prototype instanceof _||e instanceof _||e===_}static registerTech(e,t){if(_.techs_||(_.techs_={}),!_.isTech(t))throw new Error(`Tech ${e} must be a Tech`);if(!_.canPlayType)throw new Error("Techs must have a static canPlayType method on them");if(_.canPlaySource)return e=g(e),_.techs_[e]=t,_.techs_[Rt(e)]=t,"Tech"!==e&&_.defaultTechOrder_.push(e),t;throw new Error("Techs must have a static canPlaySource method on them")}static getTech(e){if(e)return _.techs_&&_.techs_[e]?_.techs_[e]:(e=g(e),window&&window.videojs&&window.videojs[e]?(l.warn(`The ${e} tech was added to the videojs object when it should be registered using videojs.registerTech(name, tech)`),window.videojs[e]):void 0)}}a.names.forEach(function(e){const t=a[e];_.prototype[t.getterName]=function(){return this[t.privateName]=this[t.privateName]||new t.ListClass,this[t.privateName]}}),_.prototype.featuresVolumeControl=!0,_.prototype.featuresMuteControl=!0,_.prototype.featuresFullscreenResize=!1,_.prototype.featuresPlaybackRate=!1,_.prototype.featuresProgressEvents=!1,_.prototype.featuresSourceset=!1,_.prototype.featuresTimeupdateEvents=!1,_.prototype.featuresNativeTextTracks=!1,_.prototype.featuresVideoFrameCallback=!1,_.withSourceHandlers=function(r){r.registerSourceHandler=function(e,t){let i=r.sourceHandlers;i=i||(r.sourceHandlers=[]),void 0===t&&(t=i.length),i.splice(t,0,e)},r.canPlayType=function(t){var i,s=r.sourceHandlers||[];for(let e=0;e<s.length;e++)if(i=s[e].canPlayType(t))return i;return""},r.selectSourceHandler=function(t,i){var s=r.sourceHandlers||[];for(let e=0;e<s.length;e++)if(s[e].canHandleSource(t,i))return s[e];return null},r.canPlaySource=function(e,t){var i=r.selectSourceHandler(e,t);return i?i.canHandleSource(e,t):""};["seekable","seeking","duration"].forEach(function(e){const t=this[e];"function"==typeof t&&(this[e]=function(){return this.sourceHandler_&&this.sourceHandler_[e]?this.sourceHandler_[e].apply(this.sourceHandler_,arguments):t.apply(this,arguments)})},r.prototype),r.prototype.setSource=function(e){let t=r.selectSourceHandler(e,this.options_);t||(r.nativeSourceHandler?t=r.nativeSourceHandler:l.error("No source handler found for the current source.")),this.disposeSourceHandler(),this.off("dispose",this.disposeSourceHandler_),t!==r.nativeSourceHandler&&(this.currentSource_=e),this.sourceHandler_=t.handleSource(e,this,this.options_),this.one("dispose",this.disposeSourceHandler_)},r.prototype.disposeSourceHandler=function(){this.currentSource_&&(this.clearTracks(["audio","video"]),this.currentSource_=null),this.cleanupAutoTextTracks(),this.sourceHandler_&&(this.sourceHandler_.dispose&&this.sourceHandler_.dispose(),this.sourceHandler_=null)}},f.registerComponent("Tech",_),_.registerTech("Tech",_),_.defaultTechOrder_=[];const ms={},gs={},fs={};function ys(e,t,i){e.setTimeout(()=>function i(s={},e=[],r,n,a=[],o=!1){const[t,...l]=e;if("string"==typeof t)i(s,ms[t],r,n,a,o);else if(t){const d=ws(n,t);if(!d.setSource)return a.push(d),i(s,l,r,n,a,o);d.setSource(Object.assign({},s),function(e,t){if(e)return i(s,l,r,n,a,o);a.push(d),i(t,s.type===t.type?l:ms[t.type],r,n,a,o)})}else l.length?i(s,l,r,n,a,o):o?r(s,a):i(s,ms["*"],r,n,a,!0)}(t,ms[t.type],i,e),1)}function _s(e,t,i,s=null){var r="call"+g(i),r=e.reduce(Ss(r),s),s=r===fs,t=s?null:t[i](r),n=e,a=i,o=t,l=s;for(let e=n.length-1;0<=e;e--){var d=n[e];d[a]&&d[a](l,o)}return t}const vs={buffered:1,currentTime:1,duration:1,muted:1,played:1,paused:1,seekable:1,volume:1,ended:1},bs={setCurrentTime:1,setMuted:1,setVolume:1},Ts={play:1,pause:1};function Ss(i){return(e,t)=>e===fs?fs:t[i]?t[i](e):e}function ws(e,t){var i=gs[e.id()];let s=null;if(null==i)s=t(e),gs[e.id()]=[[t,s]];else{for(let e=0;e<i.length;e++){var[r,n]=i[e];r===t&&(s=n)}null===s&&(s=t(e),i.push([t,s]))}return s}function Es(e){if(Array.isArray(e)){let t=[];e.forEach(function(e){e=Es(e),Array.isArray(e)?t=t.concat(e):K(e)&&t.push(e)}),e=t}else e="string"==typeof e&&e.trim()?[xs({src:e})]:K(e)&&"string"==typeof e.src&&e.src&&e.src.trim()?[xs(e)]:[];return e}const Cs={opus:"video/ogg",ogv:"video/ogg",mp4:"video/mp4",mov:"video/mp4",m4v:"video/mp4",mkv:"video/x-matroska",m4a:"audio/mp4",mp3:"audio/mpeg",aac:"audio/aac",caf:"audio/x-caf",flac:"audio/flac",oga:"audio/ogg",wav:"audio/wav",m3u8:"application/x-mpegURL",mpd:"application/dash+xml",jpg:"image/jpeg",jpeg:"image/jpeg",gif:"image/gif",png:"image/png",svg:"image/svg+xml",webp:"image/webp"},ks=function(e=""){e=gi(e);return Cs[e.toLowerCase()]||""};function xs(e){var t;return e.type||(t=ks(e.src))&&(e.type=t),e}class Is extends f{constructor(s,e,t){if(super(s,d({createEl:!1},e),t),e.playerOptions.sources&&0!==e.playerOptions.sources.length)s.src(e.playerOptions.sources);else for(let t=0,i=e.playerOptions.techOrder;t<i.length;t++){var r=g(i[t]);let e=_.getTech(r);if((e=r?e:f.getComponent(r))&&e.isSupported()){s.loadTech_(r);break}}}}f.registerComponent("MediaLoader",Is);class As extends f{constructor(e,t){super(e,t),this.options_.controlText&&this.controlText(this.options_.controlText),this.handleMouseOver_=e=>this.handleMouseOver(e),this.handleMouseOut_=e=>this.handleMouseOut(e),this.handleClick_=e=>this.handleClick(e),this.handleKeyDown_=e=>this.handleKeyDown(e),this.emitTapEvents(),this.enable()}createEl(e="div",t={},i={}){t=Object.assign({className:this.buildCSSClass(),tabIndex:0},t),"button"===e&&l.error(`Creating a ClickableComponent with an HTML element of ${e} is not supported; use a Button instead.`),i=Object.assign({role:"button"},i),this.tabIndex_=t.tabIndex;e=o(e,t,i);return this.player_.options_.experimentalSvgIcons||e.appendChild(o("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),this.createControlTextEl(e),e}dispose(){this.controlTextEl_=null,super.dispose()}createControlTextEl(e){return this.controlTextEl_=o("span",{className:"vjs-control-text"},{"aria-live":"polite"}),e&&e.appendChild(this.controlTextEl_),this.controlText(this.controlText_,e),this.controlTextEl_}controlText(e,t=this.el()){if(void 0===e)return this.controlText_||"Need Text";var i=this.localize(e);this.controlText_=e,xe(this.controlTextEl_,i),this.nonIconControl||this.player_.options_.noUITitleAttributes||t.setAttribute("title",i)}buildCSSClass(){return"vjs-control vjs-button "+super.buildCSSClass()}enable(){this.enabled_||(this.enabled_=!0,this.removeClass("vjs-disabled"),this.el_.setAttribute("aria-disabled","false"),"undefined"!=typeof this.tabIndex_&&this.el_.setAttribute("tabIndex",this.tabIndex_),this.on(["tap","click"],this.handleClick_),this.on("keydown",this.handleKeyDown_))}disable(){this.enabled_=!1,this.addClass("vjs-disabled"),this.el_.setAttribute("aria-disabled","true"),"undefined"!=typeof this.tabIndex_&&this.el_.removeAttribute("tabIndex"),this.off("mouseover",this.handleMouseOver_),this.off("mouseout",this.handleMouseOut_),this.off(["tap","click"],this.handleClick_),this.off("keydown",this.handleKeyDown_)}handleLanguagechange(){this.controlText(this.controlText_)}handleClick(e){this.options_.clickHandler&&this.options_.clickHandler.call(this,arguments)}handleKeyDown(e){r.isEventKey(e,"Space")||r.isEventKey(e,"Enter")?(e.preventDefault(),e.stopPropagation(),this.trigger("click")):super.handleKeyDown(e)}}f.registerComponent("ClickableComponent",As);class Ds extends As{constructor(e,t){super(e,t),this.update(),this.update_=e=>this.update(e),e.on("posterchange",this.update_)}dispose(){this.player().off("posterchange",this.update_),super.dispose()}createEl(){return o("div",{className:"vjs-poster"})}crossOrigin(e){if("undefined"==typeof e)return this.$("img")?this.$("img").crossOrigin:this.player_.tech_&&this.player_.tech_.isReady_?this.player_.crossOrigin():this.player_.options_.crossOrigin||this.player_.options_.crossorigin||null;null!==e&&"anonymous"!==e&&"use-credentials"!==e?this.player_.log.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${e}"`):this.$("img")&&(this.$("img").crossOrigin=e)}update(e){var t=this.player().poster();this.setSrc(t),t?this.show():this.hide()}setSrc(e){e?(this.$("img")||this.el_.appendChild(o("picture",{className:"vjs-poster",tabIndex:-1},{},o("img",{loading:"lazy",crossOrigin:this.crossOrigin()},{alt:""}))),this.$("img").src=e):this.el_.textContent=""}handleClick(e){this.player_.controls()&&(this.player_.tech(!0)&&this.player_.tech(!0).focus(),this.player_.paused()?Yt(this.player_.play()):this.player_.pause())}}Ds.prototype.crossorigin=Ds.prototype.crossOrigin,f.registerComponent("PosterImage",Ds);const Ps={monospace:"monospace",sansSerif:"sans-serif",serif:"serif",monospaceSansSerif:'"Andale Mono", "Lucida Console", monospace',monospaceSerif:'"Courier New", monospace',proportionalSansSerif:"sans-serif",proportionalSerif:"serif",casual:'"Comic Sans MS", Impact, fantasy',script:'"Monotype Corsiva", cursive',smallcaps:'"Andale Mono", "Lucida Console", monospace, sans-serif'};function Ls(e,t){let i;if(4===e.length)i=e[1]+e[1]+e[2]+e[2]+e[3]+e[3];else{if(7!==e.length)throw new Error("Invalid color code provided, "+e+"; must be formatted as e.g. #f0e or #f604e2.");i=e.slice(1)}return"rgba("+parseInt(i.slice(0,2),16)+","+parseInt(i.slice(2,4),16)+","+parseInt(i.slice(4,6),16)+","+t+")"}function Os(e,t,i){try{e.style[t]=i}catch(e){}}function Rs(e){return e?e+"px":""}class Ns extends f{constructor(s,e,t){super(s,e,t);const r=e=>{this.updateDisplayOverlay(),this.updateDisplay(e)};s.on("loadstart",e=>this.toggleDisplay(e)),s.on("texttrackchange",e=>this.updateDisplay(e)),s.on("loadedmetadata",e=>{this.updateDisplayOverlay(),this.preselectTrack(e)}),s.ready(m(this,function(){if(s.tech_&&s.tech_.featuresNativeTextTracks)this.hide();else{s.on("fullscreenchange",r),s.on("playerresize",r);const e=window.screen.orientation||window,i=window.screen.orientation?"change":"orientationchange";e.addEventListener(i,r),s.on("dispose",()=>e.removeEventListener(i,r));var t=this.options_.playerOptions.tracks||[];for(let e=0;e<t.length;e++)this.player_.addRemoteTextTrack(t[e],!0);this.preselectTrack()}}))}preselectTrack(){var t={captions:1,subtitles:1},i=this.player_.textTracks(),s=this.player_.cache_.selectedLanguage;let r,n,a;for(let e=0;e<i.length;e++){var o=i[e];s&&s.enabled&&s.language&&s.language===o.language&&o.kind in t?a=o.kind!==s.kind&&a||o:s&&!s.enabled?(a=null,r=null,n=null):o.default&&("descriptions"!==o.kind||r?o.kind in t&&!n&&(n=o):r=o)}a?a.mode="showing":n?n.mode="showing":r&&(r.mode="showing")}toggleDisplay(){this.player_.tech_&&this.player_.tech_.featuresNativeTextTracks?this.hide():this.show()}createEl(){return super.createEl("div",{className:"vjs-text-track-display"},{translate:"yes","aria-live":"off","aria-atomic":"true"})}clearDisplay(){"function"==typeof window.WebVTT&&window.WebVTT.processCues(window,[],this.el_)}updateDisplay(){var s=this.player_.textTracks(),e=this.options_.allowMultipleShowingTracks;if(this.clearDisplay(),e){var t=[];for(let e=0;e<s.length;++e){var i=s[e];"showing"===i.mode&&t.push(i)}this.updateForTrack(t)}else{let e=null,t=null,i=s.length;for(;i--;){var r=s[i];"showing"===r.mode&&("descriptions"===r.kind?e=r:t=r)}t?("off"!==this.getAttribute("aria-live")&&this.setAttribute("aria-live","off"),this.updateForTrack(t)):e&&("assertive"!==this.getAttribute("aria-live")&&this.setAttribute("aria-live","assertive"),this.updateForTrack(e))}}updateDisplayOverlay(){if(this.player_.videoHeight()&&window.CSS.supports("inset-inline: 10px")){var i=this.player_.currentWidth(),s=this.player_.currentHeight(),r=i/s,n=this.player_.videoWidth()/this.player_.videoHeight();let e=0,t=0;.1<Math.abs(r-n)&&(n<r?e=Math.round((i-s*n)/2):t=Math.round((s-i/n)/2)),Os(this.el_,"insetInline",Rs(e)),Os(this.el_,"insetBlock",Rs(t))}}updateDisplayState(e){var t=this.player_.textTrackSettings.getValues(),i=e.activeCues;let s=i.length;for(;s--;){var r,n=i[s];n&&(n=n.displayState,t.color&&(n.firstChild.style.color=t.color),t.textOpacity&&Os(n.firstChild,"color",Ls(t.color||"#fff",t.textOpacity)),t.backgroundColor&&(n.firstChild.style.backgroundColor=t.backgroundColor),t.backgroundOpacity&&Os(n.firstChild,"backgroundColor",Ls(t.backgroundColor||"#000",t.backgroundOpacity)),t.windowColor&&(t.windowOpacity?Os(n,"backgroundColor",Ls(t.windowColor,t.windowOpacity)):n.style.backgroundColor=t.windowColor),t.edgeStyle&&("dropshadow"===t.edgeStyle?n.firstChild.style.textShadow="2px 2px 3px #222, 2px 2px 4px #222, 2px 2px 5px #222":"raised"===t.edgeStyle?n.firstChild.style.textShadow="1px 1px #222, 2px 2px #222, 3px 3px #222":"depressed"===t.edgeStyle?n.firstChild.style.textShadow="1px 1px #ccc, 0 1px #ccc, -1px -1px #222, 0 -1px #222":"uniform"===t.edgeStyle&&(n.firstChild.style.textShadow="0 0 4px #222, 0 0 4px #222, 0 0 4px #222, 0 0 4px #222")),t.fontPercent&&1!==t.fontPercent&&(r=window.parseFloat(n.style.fontSize),n.style.fontSize=r*t.fontPercent+"px",n.style.height="auto",n.style.top="auto"),t.fontFamily)&&"default"!==t.fontFamily&&("small-caps"===t.fontFamily?n.firstChild.style.fontVariant="small-caps":n.firstChild.style.fontFamily=Ps[t.fontFamily])}}updateForTrack(i){if(Array.isArray(i)||(i=[i]),"function"==typeof window.WebVTT&&!i.every(e=>!e.activeCues)){var t=[];for(let e=0;e<i.length;++e){var s=i[e];for(let e=0;e<s.activeCues.length;++e)t.push(s.activeCues[e])}window.WebVTT.processCues(window,t,this.el_);for(let t=0;t<i.length;++t){var r=i[t];for(let e=0;e<r.activeCues.length;++e){var n=r.activeCues[e].displayState;De(n,"vjs-text-track-cue","vjs-text-track-cue-"+(r.language||t)),r.language&&Me(n,"lang",r.language)}this.player_.textTrackSettings&&this.updateDisplayState(r)}}}}f.registerComponent("TextTrackDisplay",Ns);class Ms extends f{createEl(){var e=this.player_.isAudio(),e=this.localize(e?"Audio Player":"Video Player"),e=o("span",{className:"vjs-control-text",textContent:this.localize("{1} is loading.",[e])}),t=super.createEl("div",{className:"vjs-loading-spinner",dir:"ltr"});return t.appendChild(e),t}handleLanguagechange(){this.$(".vjs-control-text").textContent=this.localize("{1} is loading.",[this.player_.isAudio()?"Audio Player":"Video Player"])}}f.registerComponent("LoadingSpinner",Ms);class Us extends As{createEl(e,t={},i={}){t=o("button",t=Object.assign({className:this.buildCSSClass()},t),i=Object.assign({type:"button"},i));return this.player_.options_.experimentalSvgIcons||t.appendChild(o("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),this.createControlTextEl(t),t}addChild(e,t={}){var i=this.constructor.name;return l.warn(`Adding an actionable (user controllable) child to a Button (${i}) is not supported; use a ClickableComponent instead.`),f.prototype.addChild.call(this,e,t)}enable(){super.enable(),this.el_.removeAttribute("disabled")}disable(){super.disable(),this.el_.setAttribute("disabled","disabled")}handleKeyDown(e){r.isEventKey(e,"Space")||r.isEventKey(e,"Enter")?e.stopPropagation():super.handleKeyDown(e)}}f.registerComponent("Button",Us);class Bs extends Us{constructor(e,t){super(e,t),this.mouseused_=!1,this.setIcon("play"),this.on("mousedown",e=>this.handleMouseDown(e))}buildCSSClass(){return"vjs-big-play-button"}handleClick(e){var t=this.player_.play();if(this.mouseused_&&"clientX"in e&&"clientY"in e)Yt(t),this.player_.tech(!0)&&this.player_.tech(!0).focus();else{var e=this.player_.getChild("controlBar");const i=e&&e.getChild("playToggle");i?(e=()=>i.focus(),Kt(t)?t.then(e,()=>{}):this.setTimeout(e,1)):this.player_.tech(!0).focus()}}handleKeyDown(e){this.mouseused_=!1,super.handleKeyDown(e)}handleMouseDown(e){this.mouseused_=!0}}Bs.prototype.controlText_="Play Video",f.registerComponent("BigPlayButton",Bs);Us;f.registerComponent("CloseButton",class extends Us{constructor(e,t){super(e,t),this.setIcon("cancel"),this.controlText(t&&t.controlText||this.localize("Close"))}buildCSSClass(){return"vjs-close-button "+super.buildCSSClass()}handleClick(e){this.trigger({type:"close",bubbles:!1})}handleKeyDown(e){r.isEventKey(e,"Esc")?(e.preventDefault(),e.stopPropagation(),this.trigger("click")):super.handleKeyDown(e)}});class Fs extends Us{constructor(e,t={}){super(e,t),t.replay=void 0===t.replay||t.replay,this.setIcon("play"),this.on(e,"play",e=>this.handlePlay(e)),this.on(e,"pause",e=>this.handlePause(e)),t.replay&&this.on(e,"ended",e=>this.handleEnded(e))}buildCSSClass(){return"vjs-play-control "+super.buildCSSClass()}handleClick(e){this.player_.paused()?Yt(this.player_.play()):this.player_.pause()}handleSeeked(e){this.removeClass("vjs-ended"),this.player_.paused()?this.handlePause(e):this.handlePlay(e)}handlePlay(e){this.removeClass("vjs-ended","vjs-paused"),this.addClass("vjs-playing"),this.setIcon("pause"),this.controlText("Pause")}handlePause(e){this.removeClass("vjs-playing"),this.addClass("vjs-paused"),this.setIcon("play"),this.controlText("Play")}handleEnded(e){this.removeClass("vjs-playing"),this.addClass("vjs-ended"),this.setIcon("replay"),this.controlText("Replay"),this.one(this.player_,"seeked",e=>this.handleSeeked(e))}}Fs.prototype.controlText_="Play",f.registerComponent("PlayToggle",Fs);class qs extends f{constructor(e,t){super(e,t),this.on(e,["timeupdate","ended","seeking"],e=>this.update(e)),this.updateTextNode_()}createEl(){var e=this.buildCSSClass(),t=super.createEl("div",{className:e+" vjs-time-control vjs-control"}),i=o("span",{className:"vjs-control-text",textContent:this.localize(this.labelText_)+" "},{role:"presentation"});return t.appendChild(i),this.contentEl_=o("span",{className:e+"-display"},{role:"presentation"}),t.appendChild(this.contentEl_),t}dispose(){this.contentEl_=null,this.textNode_=null,super.dispose()}update(e){!this.player_.options_.enableSmoothSeeking&&"seeking"===e.type||this.updateContent(e)}updateTextNode_(e=0){e=zt(e),this.formattedTime_!==e&&(this.formattedTime_=e,this.requestNamedAnimationFrame("TimeDisplay#updateTextNode_",()=>{if(this.contentEl_){let e=this.textNode_;e&&this.contentEl_.firstChild!==e&&(e=null,l.warn("TimeDisplay#updateTextnode_: Prevented replacement of text node element since it was no longer a child of this node. Appending a new node instead.")),this.textNode_=document.createTextNode(this.formattedTime_),this.textNode_&&(e?this.contentEl_.replaceChild(this.textNode_,e):this.contentEl_.appendChild(this.textNode_))}}))}updateContent(e){}}qs.prototype.labelText_="Time",qs.prototype.controlText_="Time",f.registerComponent("TimeDisplay",qs);class js extends qs{buildCSSClass(){return"vjs-current-time"}updateContent(e){let t;t=this.player_.ended()?this.player_.duration():this.player_.scrubbing()?this.player_.getCache().currentTime:this.player_.currentTime(),this.updateTextNode_(t)}}js.prototype.labelText_="Current Time",js.prototype.controlText_="Current Time",f.registerComponent("CurrentTimeDisplay",js);class Hs extends qs{constructor(e,t){super(e,t);t=e=>this.updateContent(e);this.on(e,"durationchange",t),this.on(e,"loadstart",t),this.on(e,"loadedmetadata",t)}buildCSSClass(){return"vjs-duration"}updateContent(e){var t=this.player_.duration();this.updateTextNode_(t)}}Hs.prototype.labelText_="Duration",Hs.prototype.controlText_="Duration",f.registerComponent("DurationDisplay",Hs);class Vs extends f{createEl(){var e=super.createEl("div",{className:"vjs-time-control vjs-time-divider"},{"aria-hidden":!0}),t=super.createEl("div"),i=super.createEl("span",{textContent:"/"});return t.appendChild(i),e.appendChild(t),e}}f.registerComponent("TimeDivider",Vs);class $s extends qs{constructor(e,t){super(e,t),this.on(e,"durationchange",e=>this.updateContent(e))}buildCSSClass(){return"vjs-remaining-time"}createEl(){var e=super.createEl();return!1!==this.options_.displayNegative&&e.insertBefore(o("span",{},{"aria-hidden":!0},"-"),this.contentEl_),e}updateContent(e){if("number"==typeof this.player_.duration()){let e;e=this.player_.ended()?0:this.player_.remainingTimeDisplay?this.player_.remainingTimeDisplay():this.player_.remainingTime(),this.updateTextNode_(e)}}}$s.prototype.labelText_="Remaining Time",$s.prototype.controlText_="Remaining Time",f.registerComponent("RemainingTimeDisplay",$s);class zs extends f{constructor(e,t){super(e,t),this.updateShowing(),this.on(this.player(),"durationchange",e=>this.updateShowing(e))}createEl(){var e=super.createEl("div",{className:"vjs-live-control vjs-control"});return this.contentEl_=o("div",{className:"vjs-live-display"},{"aria-live":"off"}),this.contentEl_.appendChild(o("span",{className:"vjs-control-text",textContent:this.localize("Stream Type")+" "})),this.contentEl_.appendChild(document.createTextNode(this.localize("LIVE"))),e.appendChild(this.contentEl_),e}dispose(){this.contentEl_=null,super.dispose()}updateShowing(e){this.player().duration()===1/0?this.show():this.hide()}}f.registerComponent("LiveDisplay",zs);class Ws extends Us{constructor(e,t){super(e,t),this.updateLiveEdgeStatus(),this.player_.liveTracker&&(this.updateLiveEdgeStatusHandler_=e=>this.updateLiveEdgeStatus(e),this.on(this.player_.liveTracker,"liveedgechange",this.updateLiveEdgeStatusHandler_))}createEl(){var e=super.createEl("button",{className:"vjs-seek-to-live-control vjs-control"});return this.setIcon("circle",e),this.textEl_=o("span",{className:"vjs-seek-to-live-text",textContent:this.localize("LIVE")},{"aria-hidden":"true"}),e.appendChild(this.textEl_),e}updateLiveEdgeStatus(){!this.player_.liveTracker||this.player_.liveTracker.atLiveEdge()?(this.setAttribute("aria-disabled",!0),this.addClass("vjs-at-live-edge"),this.controlText("Seek to live, currently playing live")):(this.setAttribute("aria-disabled",!1),this.removeClass("vjs-at-live-edge"),this.controlText("Seek to live, currently behind live"))}handleClick(){this.player_.liveTracker.seekToLiveEdge()}dispose(){this.player_.liveTracker&&this.off(this.player_.liveTracker,"liveedgechange",this.updateLiveEdgeStatusHandler_),this.textEl_=null,super.dispose()}}function Gs(e,t,i){return e=Number(e),Math.min(i,Math.max(t,isNaN(e)?t:e))}Ws.prototype.controlText_="Seek to live, currently playing live",f.registerComponent("SeekToLive",Ws);yi=Object.freeze({__proto__:null,clamp:Gs});class Xs extends f{constructor(e,t){super(e,t),this.handleMouseDown_=e=>this.handleMouseDown(e),this.handleMouseUp_=e=>this.handleMouseUp(e),this.handleKeyDown_=e=>this.handleKeyDown(e),this.handleClick_=e=>this.handleClick(e),this.handleMouseMove_=e=>this.handleMouseMove(e),this.update_=e=>this.update(e),this.bar=this.getChild(this.options_.barName),this.vertical(!!this.options_.vertical),this.enable()}enabled(){return this.enabled_}enable(){this.enabled()||(this.on("mousedown",this.handleMouseDown_),this.on("touchstart",this.handleMouseDown_),this.on("keydown",this.handleKeyDown_),this.on("click",this.handleClick_),this.on(this.player_,"controlsvisible",this.update),this.playerEvent&&this.on(this.player_,this.playerEvent,this.update),this.removeClass("disabled"),this.setAttribute("tabindex",0),this.enabled_=!0)}disable(){var e;this.enabled()&&(e=this.bar.el_.ownerDocument,this.off("mousedown",this.handleMouseDown_),this.off("touchstart",this.handleMouseDown_),this.off("keydown",this.handleKeyDown_),this.off("click",this.handleClick_),this.off(this.player_,"controlsvisible",this.update_),this.off(e,"mousemove",this.handleMouseMove_),this.off(e,"mouseup",this.handleMouseUp_),this.off(e,"touchmove",this.handleMouseMove_),this.off(e,"touchend",this.handleMouseUp_),this.removeAttribute("tabindex"),this.addClass("disabled"),this.playerEvent&&this.off(this.player_,this.playerEvent,this.update),this.enabled_=!1)}createEl(e,t={},i={}){return t.className=t.className+" vjs-slider",t=Object.assign({tabIndex:0},t),i=Object.assign({role:"slider","aria-valuenow":0,"aria-valuemin":0,"aria-valuemax":100},i),super.createEl(e,t,i)}handleMouseDown(e){var t=this.bar.el_.ownerDocument;"mousedown"===e.type&&e.preventDefault(),"touchstart"!==e.type||oe||e.preventDefault(),Be(),this.addClass("vjs-sliding"),this.trigger("slideractive"),this.on(t,"mousemove",this.handleMouseMove_),this.on(t,"mouseup",this.handleMouseUp_),this.on(t,"touchmove",this.handleMouseMove_),this.on(t,"touchend",this.handleMouseUp_),this.handleMouseMove(e,!0)}handleMouseMove(e){}handleMouseUp(e){var t=this.bar.el_.ownerDocument;Fe(),this.removeClass("vjs-sliding"),this.trigger("sliderinactive"),this.off(t,"mousemove",this.handleMouseMove_),this.off(t,"mouseup",this.handleMouseUp_),this.off(t,"touchmove",this.handleMouseMove_),this.off(t,"touchend",this.handleMouseUp_),this.update()}update(){if(this.el_&&this.bar){const t=this.getProgress();return t!==this.progress_&&(this.progress_=t,this.requestNamedAnimationFrame("Slider#update",()=>{var e=this.vertical()?"height":"width";this.bar.el().style[e]=(100*t).toFixed(2)+"%"})),t}}getProgress(){return Number(Gs(this.getPercent(),0,1).toFixed(4))}calculateDistance(e){e=He(this.el_,e);return this.vertical()?e.y:e.x}handleKeyDown(e){r.isEventKey(e,"Left")||r.isEventKey(e,"Down")?(e.preventDefault(),e.stopPropagation(),this.stepBack()):r.isEventKey(e,"Right")||r.isEventKey(e,"Up")?(e.preventDefault(),e.stopPropagation(),this.stepForward()):super.handleKeyDown(e)}handleClick(e){e.stopPropagation(),e.preventDefault()}vertical(e){if(void 0===e)return this.vertical_||!1;this.vertical_=!!e,this.vertical_?this.addClass("vjs-slider-vertical"):this.addClass("vjs-slider-horizontal")}}f.registerComponent("Slider",Xs);const Ks=(e,t)=>Gs(e/t*100,0,100).toFixed(2)+"%";class Ys extends f{constructor(e,t){super(e,t),this.partEls_=[],this.on(e,"progress",e=>this.update(e))}createEl(){var e=super.createEl("div",{className:"vjs-load-progress"}),t=o("span",{className:"vjs-control-text"}),i=o("span",{textContent:this.localize("Loaded")}),s=document.createTextNode(": ");return this.percentageEl_=o("span",{className:"vjs-control-text-loaded-percentage",textContent:"0%"}),e.appendChild(t),t.appendChild(i),t.appendChild(s),t.appendChild(this.percentageEl_),e}dispose(){this.partEls_=null,this.percentageEl_=null,super.dispose()}update(e){this.requestNamedAnimationFrame("LoadProgressBar#update",()=>{var e=this.player_.liveTracker,i=this.player_.buffered(),e=e&&e.isLive()?e.seekableEnd():this.player_.duration(),s=this.player_.bufferedEnd(),r=this.partEls_,e=Ks(s,e);this.percent_!==e&&(this.el_.style.width=e,xe(this.percentageEl_,e),this.percent_=e);for(let t=0;t<i.length;t++){var n=i.start(t),a=i.end(t);let e=r[t];e||(e=this.el_.appendChild(o()),r[t]=e),e.dataset.start===n&&e.dataset.end===a||(e.dataset.start=n,e.dataset.end=a,e.style.left=Ks(n,s),e.style.width=Ks(a-n,s))}for(let e=r.length;e>i.length;e--)this.el_.removeChild(r[e-1]);r.length=i.length})}}f.registerComponent("LoadProgressBar",Ys);class Qs extends f{constructor(e,t){super(e,t),this.update=_t(m(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-time-tooltip"},{"aria-hidden":"true"})}update(s,r,n){var a=je(this.el_),o=qe(this.player_.el()),r=s.width*r;if(o&&a){let e=s.left-o.left+r,t=s.width-r+(o.right-s.right),i=(t||(t=s.width-r,e=r),a.width/2);e<i?i+=i-e:t<i&&(i=t),i<0?i=0:i>a.width&&(i=a.width),i=Math.round(i),this.el_.style.right=`-${i}px`,this.write(n)}}write(e){xe(this.el_,e)}updateTime(r,n,a,o){this.requestNamedAnimationFrame("TimeTooltip#updateTime",()=>{let e;var t,i,s=this.player_.duration();e=this.player_.liveTracker&&this.player_.liveTracker.isLive()?((i=(t=this.player_.liveTracker.liveWindow())-n*t)<1?"":"-")+zt(i,t):zt(a,s),this.update(r,n,e),o&&o()})}}f.registerComponent("TimeTooltip",Qs);class Js extends f{constructor(e,t){super(e,t),this.setIcon("circle"),this.update=_t(m(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-play-progress vjs-slider-bar"},{"aria-hidden":"true"})}update(e,t){var i,s=this.getChild("timeTooltip");s&&(i=this.player_.scrubbing()?this.player_.getCache().currentTime:this.player_.currentTime(),s.updateTime(e,t,i))}}Js.prototype.options_={children:[]},c||ie||Js.prototype.options_.children.push("timeTooltip"),f.registerComponent("PlayProgressBar",Js);class Zs extends f{constructor(e,t){super(e,t),this.update=_t(m(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-mouse-display"})}update(e,t){var i=t*this.player_.duration();this.getChild("timeTooltip").updateTime(e,t,i,()=>{this.el_.style.left=e.width*t+"px"})}}Zs.prototype.options_={children:["timeTooltip"]},f.registerComponent("MouseTimeDisplay",Zs);class er extends Xs{constructor(e,t){super(e,t),this.setEventHandlers_()}setEventHandlers_(){this.update_=m(this,this.update),this.update=_t(this.update_,30),this.on(this.player_,["ended","durationchange","timeupdate"],this.update),this.player_.liveTracker&&this.on(this.player_.liveTracker,"liveedgechange",this.update),this.updateInterval=null,this.enableIntervalHandler_=e=>this.enableInterval_(e),this.disableIntervalHandler_=e=>this.disableInterval_(e),this.on(this.player_,["playing"],this.enableIntervalHandler_),this.on(this.player_,["ended","pause","waiting"],this.disableIntervalHandler_),"hidden"in document&&"visibilityState"in document&&this.on(document,"visibilitychange",this.toggleVisibility_)}toggleVisibility_(e){"hidden"===document.visibilityState?(this.cancelNamedAnimationFrame("SeekBar#update"),this.cancelNamedAnimationFrame("Slider#update"),this.disableInterval_(e)):(this.player_.ended()||this.player_.paused()||this.enableInterval_(),this.update())}enableInterval_(){this.updateInterval||(this.updateInterval=this.setInterval(this.update,30))}disableInterval_(e){this.player_.liveTracker&&this.player_.liveTracker.isLive()&&e&&"ended"!==e.type||this.updateInterval&&(this.clearInterval(this.updateInterval),this.updateInterval=null)}createEl(){return super.createEl("div",{className:"vjs-progress-holder"},{"aria-label":this.localize("Progress Bar")})}update(e){if("hidden"!==document.visibilityState){const s=super.update();return this.requestNamedAnimationFrame("SeekBar#update",()=>{var e=this.player_.ended()?this.player_.duration():this.getCurrentTime_(),t=this.player_.liveTracker;let i=this.player_.duration();t&&t.isLive()&&(i=this.player_.liveTracker.liveCurrentTime()),this.percent_!==s&&(this.el_.setAttribute("aria-valuenow",(100*s).toFixed(2)),this.percent_=s),this.currentTime_===e&&this.duration_===i||(this.el_.setAttribute("aria-valuetext",this.localize("progress bar timing: currentTime={1} duration={2}",[zt(e,i),zt(i,i)],"{1} of {2}")),this.currentTime_=e,this.duration_=i),this.bar&&this.bar.update(qe(this.el()),this.getProgress())}),s}}userSeek_(e){this.player_.liveTracker&&this.player_.liveTracker.isLive()&&this.player_.liveTracker.nextSeekedFromUser(),this.player_.currentTime(e)}getCurrentTime_(){return this.player_.scrubbing()?this.player_.getCache().currentTime:this.player_.currentTime()}getPercent(){var e=this.getCurrentTime_();let t;var i=this.player_.liveTracker;return i&&i.isLive()?(t=(e-i.seekableStart())/i.liveWindow(),i.atLiveEdge()&&(t=1)):t=e/this.player_.duration(),t}handleMouseDown(e){Xe(e)&&(e.stopPropagation(),this.videoWasPlaying=!this.player_.paused(),this.player_.pause(),super.handleMouseDown(e))}handleMouseMove(t,i=!1){if(Xe(t)&&!isNaN(this.player_.duration())){i||this.player_.scrubbing()||this.player_.scrubbing(!0);let e;i=this.calculateDistance(t),t=this.player_.liveTracker;if(t&&t.isLive()){if(.99<=i)return void t.seekToLiveEdge();var s=t.seekableStart(),r=t.liveCurrentTime();if((e=(e=(e=s+i*t.liveWindow())>=r?r:e)<=s?s+.1:e)===1/0)return}else(e=i*this.player_.duration())===this.player_.duration()&&(e-=.1);this.userSeek_(e),this.player_.options_.enableSmoothSeeking&&this.update()}}enable(){super.enable();var e=this.getChild("mouseTimeDisplay");e&&e.show()}disable(){super.disable();var e=this.getChild("mouseTimeDisplay");e&&e.hide()}handleMouseUp(e){super.handleMouseUp(e),e&&e.stopPropagation(),this.player_.scrubbing(!1),this.player_.trigger({type:"timeupdate",target:this,manuallyTriggered:!0}),this.videoWasPlaying?Yt(this.player_.play()):this.update_()}stepForward(){this.userSeek_(this.player_.currentTime()+5)}stepBack(){this.userSeek_(this.player_.currentTime()-5)}handleAction(e){this.player_.paused()?this.player_.play():this.player_.pause()}handleKeyDown(e){var t,i=this.player_.liveTracker;r.isEventKey(e,"Space")||r.isEventKey(e,"Enter")?(e.preventDefault(),e.stopPropagation(),this.handleAction(e)):r.isEventKey(e,"Home")?(e.preventDefault(),e.stopPropagation(),this.userSeek_(0)):r.isEventKey(e,"End")?(e.preventDefault(),e.stopPropagation(),i&&i.isLive()?this.userSeek_(i.liveCurrentTime()):this.userSeek_(this.player_.duration())):/^[0-9]$/.test(r(e))?(e.preventDefault(),e.stopPropagation(),t=10*(r.codes[r(e)]-r.codes[0])/100,i&&i.isLive()?this.userSeek_(i.seekableStart()+i.liveWindow()*t):this.userSeek_(this.player_.duration()*t)):r.isEventKey(e,"PgDn")?(e.preventDefault(),e.stopPropagation(),this.userSeek_(this.player_.currentTime()-60)):r.isEventKey(e,"PgUp")?(e.preventDefault(),e.stopPropagation(),this.userSeek_(this.player_.currentTime()+60)):super.handleKeyDown(e)}dispose(){this.disableInterval_(),this.off(this.player_,["ended","durationchange","timeupdate"],this.update),this.player_.liveTracker&&this.off(this.player_.liveTracker,"liveedgechange",this.update),this.off(this.player_,["playing"],this.enableIntervalHandler_),this.off(this.player_,["ended","pause","waiting"],this.disableIntervalHandler_),"hidden"in document&&"visibilityState"in document&&this.off(document,"visibilitychange",this.toggleVisibility_),super.dispose()}}er.prototype.options_={children:["loadProgressBar","playProgressBar"],barName:"playProgressBar"},c||ie||er.prototype.options_.children.splice(1,0,"mouseTimeDisplay"),f.registerComponent("SeekBar",er);class tr extends f{constructor(e,t){super(e,t),this.handleMouseMove=_t(m(this,this.handleMouseMove),30),this.throttledHandleMouseSeek=_t(m(this,this.handleMouseSeek),30),this.handleMouseUpHandler_=e=>this.handleMouseUp(e),this.handleMouseDownHandler_=e=>this.handleMouseDown(e),this.enable()}createEl(){return super.createEl("div",{className:"vjs-progress-control vjs-control"})}handleMouseMove(e){var t,i,s,r,n=this.getChild("seekBar");n&&(t=n.getChild("playProgressBar"),i=n.getChild("mouseTimeDisplay"),t||i)&&(s=je(r=n.el()),r=Gs(r=He(r,e).x,0,1),i&&i.update(s,r),t)&&t.update(s,n.getProgress())}handleMouseSeek(e){var t=this.getChild("seekBar");t&&t.handleMouseMove(e)}enabled(){return this.enabled_}disable(){var e;this.children().forEach(e=>e.disable&&e.disable()),this.enabled()&&(this.off(["mousedown","touchstart"],this.handleMouseDownHandler_),this.off(this.el_,"mousemove",this.handleMouseMove),this.removeListenersAddedOnMousedownAndTouchstart(),this.addClass("disabled"),this.enabled_=!1,this.player_.scrubbing())&&(e=this.getChild("seekBar"),this.player_.scrubbing(!1),e.videoWasPlaying)&&Yt(this.player_.play())}enable(){this.children().forEach(e=>e.enable&&e.enable()),this.enabled()||(this.on(["mousedown","touchstart"],this.handleMouseDownHandler_),this.on(this.el_,"mousemove",this.handleMouseMove),this.removeClass("disabled"),this.enabled_=!0)}removeListenersAddedOnMousedownAndTouchstart(){var e=this.el_.ownerDocument;this.off(e,"mousemove",this.throttledHandleMouseSeek),this.off(e,"touchmove",this.throttledHandleMouseSeek),this.off(e,"mouseup",this.handleMouseUpHandler_),this.off(e,"touchend",this.handleMouseUpHandler_)}handleMouseDown(e){var t=this.el_.ownerDocument,i=this.getChild("seekBar");i&&i.handleMouseDown(e),this.on(t,"mousemove",this.throttledHandleMouseSeek),this.on(t,"touchmove",this.throttledHandleMouseSeek),this.on(t,"mouseup",this.handleMouseUpHandler_),this.on(t,"touchend",this.handleMouseUpHandler_)}handleMouseUp(e){var t=this.getChild("seekBar");t&&t.handleMouseUp(e),this.removeListenersAddedOnMousedownAndTouchstart()}}tr.prototype.options_={children:["seekBar"]},f.registerComponent("ProgressControl",tr);class ir extends Us{constructor(e,t){super(e,t),this.setIcon("picture-in-picture-enter"),this.on(e,["enterpictureinpicture","leavepictureinpicture"],e=>this.handlePictureInPictureChange(e)),this.on(e,["disablepictureinpicturechanged","loadedmetadata"],e=>this.handlePictureInPictureEnabledChange(e)),this.on(e,["loadedmetadata","audioonlymodechange","audiopostermodechange"],()=>this.handlePictureInPictureAudioModeChange()),this.disable()}buildCSSClass(){return"vjs-picture-in-picture-control vjs-hidden "+super.buildCSSClass()}handlePictureInPictureAudioModeChange(){"audio"===this.player_.currentType().substring(0,5)||this.player_.audioPosterMode()||this.player_.audioOnlyMode()?(this.player_.isInPictureInPicture()&&this.player_.exitPictureInPicture(),this.hide()):this.show()}handlePictureInPictureEnabledChange(){document.pictureInPictureEnabled&&!1===this.player_.disablePictureInPicture()||this.player_.options_.enableDocumentPictureInPicture&&"documentPictureInPicture"in window?this.enable():this.disable()}handlePictureInPictureChange(e){this.player_.isInPictureInPicture()?(this.setIcon("picture-in-picture-exit"),this.controlText("Exit Picture-in-Picture")):(this.setIcon("picture-in-picture-enter"),this.controlText("Picture-in-Picture")),this.handlePictureInPictureEnabledChange()}handleClick(e){this.player_.isInPictureInPicture()?this.player_.exitPictureInPicture():this.player_.requestPictureInPicture()}show(){"function"==typeof document.exitPictureInPicture&&super.show()}}ir.prototype.controlText_="Picture-in-Picture",f.registerComponent("PictureInPictureToggle",ir);class sr extends Us{constructor(e,t){super(e,t),this.setIcon("fullscreen-enter"),this.on(e,"fullscreenchange",e=>this.handleFullscreenChange(e)),!1===document[e.fsApi_.fullscreenEnabled]&&this.disable()}buildCSSClass(){return"vjs-fullscreen-control "+super.buildCSSClass()}handleFullscreenChange(e){this.player_.isFullscreen()?(this.controlText("Exit Fullscreen"),this.setIcon("fullscreen-exit")):(this.controlText("Fullscreen"),this.setIcon("fullscreen-enter"))}handleClick(e){this.player_.isFullscreen()?this.player_.exitFullscreen():this.player_.requestFullscreen()}}sr.prototype.controlText_="Fullscreen",f.registerComponent("FullscreenToggle",sr);class rr extends f{createEl(){var e=super.createEl("div",{className:"vjs-volume-level"});return this.setIcon("circle",e),e.appendChild(super.createEl("span",{className:"vjs-control-text"})),e}}f.registerComponent("VolumeLevel",rr);class nr extends f{constructor(e,t){super(e,t),this.update=_t(m(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-volume-tooltip"},{"aria-hidden":"true"})}update(t,i,s,e){if(!s){var s=qe(this.el_),r=qe(this.player_.el()),i=t.width*i;if(!r||!s)return;var n=t.left-r.left+i,i=t.width-i+(r.right-t.right);let e=s.width/2;n<e?e+=e-n:i<e&&(e=i),e<0?e=0:e>s.width&&(e=s.width),this.el_.style.right=`-${e}px`}this.write(e+"%")}write(e){xe(this.el_,e)}updateVolume(e,t,i,s,r){this.requestNamedAnimationFrame("VolumeLevelTooltip#updateVolume",()=>{this.update(e,t,i,s.toFixed(0)),r&&r()})}}f.registerComponent("VolumeLevelTooltip",nr);class ar extends f{constructor(e,t){super(e,t),this.update=_t(m(this,this.update),30)}createEl(){return super.createEl("div",{className:"vjs-mouse-display"})}update(e,t,i){var s=100*t;this.getChild("volumeLevelTooltip").updateVolume(e,t,i,s,()=>{i?this.el_.style.bottom=e.height*t+"px":this.el_.style.left=e.width*t+"px"})}}ar.prototype.options_={children:["volumeLevelTooltip"]},f.registerComponent("MouseVolumeLevelDisplay",ar);class or extends Xs{constructor(e,t){super(e,t),this.on("slideractive",e=>this.updateLastVolume_(e)),this.on(e,"volumechange",e=>this.updateARIAAttributes(e)),e.ready(()=>this.updateARIAAttributes())}createEl(){return super.createEl("div",{className:"vjs-volume-bar vjs-slider-bar"},{"aria-label":this.localize("Volume Level"),"aria-live":"polite"})}handleMouseDown(e){Xe(e)&&super.handleMouseDown(e)}handleMouseMove(e){var t,i,s,r=this.getChild("mouseVolumeLevelDisplay");r&&(t=qe(s=this.el()),i=this.vertical(),s=He(s,e),s=Gs(s=i?s.y:s.x,0,1),r.update(t,s,i)),Xe(e)&&(this.checkMuted(),this.player_.volume(this.calculateDistance(e)))}checkMuted(){this.player_.muted()&&this.player_.muted(!1)}getPercent(){return this.player_.muted()?0:this.player_.volume()}stepForward(){this.checkMuted(),this.player_.volume(this.player_.volume()+.1)}stepBack(){this.checkMuted(),this.player_.volume(this.player_.volume()-.1)}updateARIAAttributes(e){var t=this.player_.muted()?0:this.volumeAsPercentage_();this.el_.setAttribute("aria-valuenow",t),this.el_.setAttribute("aria-valuetext",t+"%")}volumeAsPercentage_(){return Math.round(100*this.player_.volume())}updateLastVolume_(){const e=this.player_.volume();this.one("sliderinactive",()=>{0===this.player_.volume()&&this.player_.lastVolume_(e)})}}or.prototype.options_={children:["volumeLevel"],barName:"volumeLevel"},c||ie||or.prototype.options_.children.splice(0,0,"mouseVolumeLevelDisplay"),or.prototype.playerEvent="volumechange",f.registerComponent("VolumeBar",or);class lr extends f{constructor(e,t={}){var i,s;t.vertical=t.vertical||!1,"undefined"!=typeof t.volumeBar&&!Y(t.volumeBar)||(t.volumeBar=t.volumeBar||{},t.volumeBar.vertical=t.vertical),super(e,t),i=this,(s=e).tech_&&!s.tech_.featuresVolumeControl&&i.addClass("vjs-hidden"),i.on(s,"loadstart",function(){s.tech_.featuresVolumeControl?i.removeClass("vjs-hidden"):i.addClass("vjs-hidden")}),this.throttledHandleMouseMove=_t(m(this,this.handleMouseMove),30),this.handleMouseUpHandler_=e=>this.handleMouseUp(e),this.on("mousedown",e=>this.handleMouseDown(e)),this.on("touchstart",e=>this.handleMouseDown(e)),this.on("mousemove",e=>this.handleMouseMove(e)),this.on(this.volumeBar,["focus","slideractive"],()=>{this.volumeBar.addClass("vjs-slider-active"),this.addClass("vjs-slider-active"),this.trigger("slideractive")}),this.on(this.volumeBar,["blur","sliderinactive"],()=>{this.volumeBar.removeClass("vjs-slider-active"),this.removeClass("vjs-slider-active"),this.trigger("sliderinactive")})}createEl(){let e="vjs-volume-horizontal";return this.options_.vertical&&(e="vjs-volume-vertical"),super.createEl("div",{className:"vjs-volume-control vjs-control "+e})}handleMouseDown(e){var t=this.el_.ownerDocument;this.on(t,"mousemove",this.throttledHandleMouseMove),this.on(t,"touchmove",this.throttledHandleMouseMove),this.on(t,"mouseup",this.handleMouseUpHandler_),this.on(t,"touchend",this.handleMouseUpHandler_)}handleMouseUp(e){var t=this.el_.ownerDocument;this.off(t,"mousemove",this.throttledHandleMouseMove),this.off(t,"touchmove",this.throttledHandleMouseMove),this.off(t,"mouseup",this.handleMouseUpHandler_),this.off(t,"touchend",this.handleMouseUpHandler_)}handleMouseMove(e){this.volumeBar.handleMouseMove(e)}}lr.prototype.options_={children:["volumeBar"]},f.registerComponent("VolumeControl",lr);class dr extends Us{constructor(e,t){var i,s;super(e,t),i=this,(s=e).tech_&&!s.tech_.featuresMuteControl&&i.addClass("vjs-hidden"),i.on(s,"loadstart",function(){s.tech_.featuresMuteControl?i.removeClass("vjs-hidden"):i.addClass("vjs-hidden")}),this.on(e,["loadstart","volumechange"],e=>this.update(e))}buildCSSClass(){return"vjs-mute-control "+super.buildCSSClass()}handleClick(e){var t=this.player_.volume(),i=this.player_.lastVolume_();0===t?(this.player_.volume(i<.1?.1:i),this.player_.muted(!1)):this.player_.muted(!this.player_.muted())}update(e){this.updateIcon_(),this.updateControlText_()}updateIcon_(){var e=this.player_.volume();let t=3;this.setIcon("volume-high"),c&&this.player_.tech_&&this.player_.tech_.el_&&this.player_.muted(this.player_.tech_.el_.muted),0===e||this.player_.muted()?(this.setIcon("volume-mute"),t=0):e<.33?(this.setIcon("volume-low"),t=1):e<.67&&(this.setIcon("volume-medium"),t=2),Pe(this.el_,[0,1,2,3].reduce((e,t)=>e+`${t?" ":""}vjs-vol-`+t,"")),De(this.el_,"vjs-vol-"+t)}updateControlText_(){var e=this.player_.muted()||0===this.player_.volume()?"Unmute":"Mute";this.controlText()!==e&&this.controlText(e)}}dr.prototype.controlText_="Mute",f.registerComponent("MuteToggle",dr);class hr extends f{constructor(e,t={}){"undefined"!=typeof t.inline?t.inline=t.inline:t.inline=!0,"undefined"!=typeof t.volumeControl&&!Y(t.volumeControl)||(t.volumeControl=t.volumeControl||{},t.volumeControl.vertical=!t.inline),super(e,t),this.handleKeyPressHandler_=e=>this.handleKeyPress(e),this.on(e,["loadstart"],e=>this.volumePanelState_(e)),this.on(this.muteToggle,"keyup",e=>this.handleKeyPress(e)),this.on(this.volumeControl,"keyup",e=>this.handleVolumeControlKeyUp(e)),this.on("keydown",e=>this.handleKeyPress(e)),this.on("mouseover",e=>this.handleMouseOver(e)),this.on("mouseout",e=>this.handleMouseOut(e)),this.on(this.volumeControl,["slideractive"],this.sliderActive_),this.on(this.volumeControl,["sliderinactive"],this.sliderInactive_)}sliderActive_(){this.addClass("vjs-slider-active")}sliderInactive_(){this.removeClass("vjs-slider-active")}volumePanelState_(){this.volumeControl.hasClass("vjs-hidden")&&this.muteToggle.hasClass("vjs-hidden")&&this.addClass("vjs-hidden"),this.volumeControl.hasClass("vjs-hidden")&&!this.muteToggle.hasClass("vjs-hidden")&&this.addClass("vjs-mute-toggle-only")}createEl(){let e="vjs-volume-panel-horizontal";return this.options_.inline||(e="vjs-volume-panel-vertical"),super.createEl("div",{className:"vjs-volume-panel vjs-control "+e})}dispose(){this.handleMouseOut(),super.dispose()}handleVolumeControlKeyUp(e){r.isEventKey(e,"Esc")&&this.muteToggle.focus()}handleMouseOver(e){this.addClass("vjs-hover"),pt(document,"keyup",this.handleKeyPressHandler_)}handleMouseOut(e){this.removeClass("vjs-hover"),p(document,"keyup",this.handleKeyPressHandler_)}handleKeyPress(e){r.isEventKey(e,"Esc")&&this.handleMouseOut()}}hr.prototype.options_={children:["muteToggle","volumeControl"]},f.registerComponent("VolumePanel",hr);class ur extends Us{constructor(e,t){super(e,t),this.validOptions=[5,10,30],this.skipTime=this.getSkipForwardTime(),this.skipTime&&this.validOptions.includes(this.skipTime)?(this.setIcon("forward-"+this.skipTime),this.controlText(this.localize("Skip forward {1} seconds",[this.skipTime.toLocaleString(e.language())])),this.show()):this.hide()}getSkipForwardTime(){var e=this.options_.playerOptions;return e.controlBar&&e.controlBar.skipButtons&&e.controlBar.skipButtons.forward}buildCSSClass(){return`vjs-skip-forward-${this.getSkipForwardTime()} `+super.buildCSSClass()}handleClick(e){if(!isNaN(this.player_.duration())){var t=this.player_.currentTime(),i=this.player_.liveTracker,i=i&&i.isLive()?i.seekableEnd():this.player_.duration();let e;e=t+this.skipTime<=i?t+this.skipTime:i,this.player_.currentTime(e)}}handleLanguagechange(){this.controlText(this.localize("Skip forward {1} seconds",[this.skipTime]))}}ur.prototype.controlText_="Skip Forward",f.registerComponent("SkipForward",ur);class cr extends Us{constructor(e,t){super(e,t),this.validOptions=[5,10,30],this.skipTime=this.getSkipBackwardTime(),this.skipTime&&this.validOptions.includes(this.skipTime)?(this.setIcon("replay-"+this.skipTime),this.controlText(this.localize("Skip backward {1} seconds",[this.skipTime.toLocaleString(e.language())])),this.show()):this.hide()}getSkipBackwardTime(){var e=this.options_.playerOptions;return e.controlBar&&e.controlBar.skipButtons&&e.controlBar.skipButtons.backward}buildCSSClass(){return`vjs-skip-backward-${this.getSkipBackwardTime()} `+super.buildCSSClass()}handleClick(e){var t=this.player_.currentTime(),i=this.player_.liveTracker,i=i&&i.isLive()&&i.seekableStart();let s;s=i&&t-this.skipTime<=i?i:t>=this.skipTime?t-this.skipTime:0,this.player_.currentTime(s)}handleLanguagechange(){this.controlText(this.localize("Skip backward {1} seconds",[this.skipTime]))}}cr.prototype.controlText_="Skip Backward",f.registerComponent("SkipBackward",cr);class pr extends f{constructor(e,t){super(e,t),t&&(this.menuButton_=t.menuButton),this.focusedChild_=-1,this.on("keydown",e=>this.handleKeyDown(e)),this.boundHandleBlur_=e=>this.handleBlur(e),this.boundHandleTapClick_=e=>this.handleTapClick(e)}addEventListenerForItem(e){e instanceof f&&(this.on(e,"blur",this.boundHandleBlur_),this.on(e,["tap","click"],this.boundHandleTapClick_))}removeEventListenerForItem(e){e instanceof f&&(this.off(e,"blur",this.boundHandleBlur_),this.off(e,["tap","click"],this.boundHandleTapClick_))}removeChild(e){"string"==typeof e&&(e=this.getChild(e)),this.removeEventListenerForItem(e),super.removeChild(e)}addItem(e){e=this.addChild(e);e&&this.addEventListenerForItem(e)}createEl(){var e=this.options_.contentElType||"ul",e=(this.contentEl_=o(e,{className:"vjs-menu-content"}),this.contentEl_.setAttribute("role","menu"),super.createEl("div",{append:this.contentEl_,className:"vjs-menu"}));return e.appendChild(this.contentEl_),pt(e,"click",function(e){e.preventDefault(),e.stopImmediatePropagation()}),e}dispose(){this.contentEl_=null,this.boundHandleBlur_=null,this.boundHandleTapClick_=null,super.dispose()}handleBlur(e){const t=e.relatedTarget||document.activeElement;this.children().some(e=>e.el()===t)||(e=this.menuButton_)&&e.buttonPressed_&&t!==e.el().firstChild&&e.unpressButton()}handleTapClick(t){var e;this.menuButton_&&(this.menuButton_.unpressButton(),e=this.children(),Array.isArray(e))&&(e=e.filter(e=>e.el()===t.target)[0])&&"CaptionSettingsMenuItem"!==e.name()&&this.menuButton_.focus()}handleKeyDown(e){r.isEventKey(e,"Left")||r.isEventKey(e,"Down")?(e.preventDefault(),e.stopPropagation(),this.stepForward()):(r.isEventKey(e,"Right")||r.isEventKey(e,"Up"))&&(e.preventDefault(),e.stopPropagation(),this.stepBack())}stepForward(){let e=0;void 0!==this.focusedChild_&&(e=this.focusedChild_+1),this.focus(e)}stepBack(){let e=0;void 0!==this.focusedChild_&&(e=this.focusedChild_-1),this.focus(e)}focus(e=0){var t=this.children().slice();t.length&&t[0].hasClass("vjs-menu-title")&&t.shift(),0<t.length&&(e<0?e=0:e>=t.length&&(e=t.length-1),t[this.focusedChild_=e].el_.focus())}}f.registerComponent("Menu",pr);class mr extends f{constructor(e,t={}){super(e,t),this.menuButton_=new Us(e,t),this.menuButton_.controlText(this.controlText_),this.menuButton_.el_.setAttribute("aria-haspopup","true");e=Us.prototype.buildCSSClass(),this.menuButton_.el_.className=this.buildCSSClass()+" "+e,this.menuButton_.removeClass("vjs-control"),this.addChild(this.menuButton_),this.update(),this.enabled_=!0,t=e=>this.handleClick(e);this.handleMenuKeyUp_=e=>this.handleMenuKeyUp(e),this.on(this.menuButton_,"tap",t),this.on(this.menuButton_,"click",t),this.on(this.menuButton_,"keydown",e=>this.handleKeyDown(e)),this.on(this.menuButton_,"mouseenter",()=>{this.addClass("vjs-hover"),this.menu.show(),pt(document,"keyup",this.handleMenuKeyUp_)}),this.on("mouseleave",e=>this.handleMouseLeave(e)),this.on("keydown",e=>this.handleSubmenuKeyDown(e))}update(){var e=this.createMenu();this.menu&&(this.menu.dispose(),this.removeChild(this.menu)),this.menu=e,this.addChild(e),this.buttonPressed_=!1,this.menuButton_.el_.setAttribute("aria-expanded","false"),this.items&&this.items.length<=this.hideThreshold_?(this.hide(),this.menu.contentEl_.removeAttribute("role")):(this.show(),this.menu.contentEl_.setAttribute("role","menu"))}createMenu(){var e,t=new pr(this.player_,{menuButton:this});if(this.hideThreshold_=0,this.options_.title&&(e=o("li",{className:"vjs-menu-title",textContent:g(this.options_.title),tabIndex:-1}),e=new f(this.player_,{el:e}),t.addItem(e)),this.items=this.createItems(),this.items)for(let e=0;e<this.items.length;e++)t.addItem(this.items[e]);return t}createItems(){}createEl(){return super.createEl("div",{className:this.buildWrapperCSSClass()},{})}setIcon(e){super.setIcon(e,this.menuButton_.el_)}buildWrapperCSSClass(){let e="vjs-menu-button";!0===this.options_.inline?e+="-inline":e+="-popup";var t=Us.prototype.buildCSSClass();return`vjs-menu-button ${e} ${t} `+super.buildCSSClass()}buildCSSClass(){let e="vjs-menu-button";return!0===this.options_.inline?e+="-inline":e+="-popup",`vjs-menu-button ${e} `+super.buildCSSClass()}controlText(e,t=this.menuButton_.el()){return this.menuButton_.controlText(e,t)}dispose(){this.handleMouseLeave(),super.dispose()}handleClick(e){this.buttonPressed_?this.unpressButton():this.pressButton()}handleMouseLeave(e){this.removeClass("vjs-hover"),p(document,"keyup",this.handleMenuKeyUp_)}focus(){this.menuButton_.focus()}blur(){this.menuButton_.blur()}handleKeyDown(e){r.isEventKey(e,"Esc")||r.isEventKey(e,"Tab")?(this.buttonPressed_&&this.unpressButton(),r.isEventKey(e,"Tab")||(e.preventDefault(),this.menuButton_.focus())):!r.isEventKey(e,"Up")&&!r.isEventKey(e,"Down")||this.buttonPressed_||(e.preventDefault(),this.pressButton())}handleMenuKeyUp(e){(r.isEventKey(e,"Esc")||r.isEventKey(e,"Tab"))&&this.removeClass("vjs-hover")}handleSubmenuKeyPress(e){this.handleSubmenuKeyDown(e)}handleSubmenuKeyDown(e){(r.isEventKey(e,"Esc")||r.isEventKey(e,"Tab"))&&(this.buttonPressed_&&this.unpressButton(),r.isEventKey(e,"Tab")||(e.preventDefault(),this.menuButton_.focus()))}pressButton(){this.enabled_&&(this.buttonPressed_=!0,this.menu.show(),this.menu.lockShowing(),this.menuButton_.el_.setAttribute("aria-expanded","true"),c&&Ce()||this.menu.focus())}unpressButton(){this.enabled_&&(this.buttonPressed_=!1,this.menu.unlockShowing(),this.menu.hide(),this.menuButton_.el_.setAttribute("aria-expanded","false"))}disable(){this.unpressButton(),this.enabled_=!1,this.addClass("vjs-disabled"),this.menuButton_.disable()}enable(){this.enabled_=!0,this.removeClass("vjs-disabled"),this.menuButton_.enable()}}f.registerComponent("MenuButton",mr);class gr extends mr{constructor(e,t){const i=t.tracks;if(super(e,t),this.items.length<=1&&this.hide(),i){const s=m(this,this.update);i.addEventListener("removetrack",s),i.addEventListener("addtrack",s),i.addEventListener("labelchange",s),this.player_.on("ready",s),this.player_.on("dispose",function(){i.removeEventListener("removetrack",s),i.removeEventListener("addtrack",s),i.removeEventListener("labelchange",s)})}}}f.registerComponent("TrackButton",gr);const fr=["Tab","Esc","Up","Down","Right","Left"];class yr extends As{constructor(e,t){super(e,t),this.selectable=t.selectable,this.isSelected_=t.selected||!1,this.multiSelectable=t.multiSelectable,this.selected(this.isSelected_),this.selectable?this.multiSelectable?this.el_.setAttribute("role","menuitemcheckbox"):this.el_.setAttribute("role","menuitemradio"):this.el_.setAttribute("role","menuitem")}createEl(e,t,i){this.nonIconControl=!0;t=super.createEl("li",Object.assign({className:"vjs-menu-item",tabIndex:-1},t),i),i=o("span",{className:"vjs-menu-item-text",textContent:this.localize(this.options_.label)});return this.player_.options_.experimentalSvgIcons?t.appendChild(i):t.replaceChild(i,t.querySelector(".vjs-icon-placeholder")),t}handleKeyDown(t){fr.some(e=>r.isEventKey(t,e))||super.handleKeyDown(t)}handleClick(e){this.selected(!0)}selected(e){this.selectable&&(e?(this.addClass("vjs-selected"),this.el_.setAttribute("aria-checked","true"),this.controlText(", selected"),this.isSelected_=!0):(this.removeClass("vjs-selected"),this.el_.setAttribute("aria-checked","false"),this.controlText(""),this.isSelected_=!1))}}f.registerComponent("MenuItem",yr);class _r extends yr{constructor(e,t){var i=t.track;const s=e.textTracks(),r=(t.label=i.label||i.language||"Unknown",t.selected="showing"===i.mode,super(e,t),this.track=i,this.kinds=(t.kinds||[t.kind||this.track.kind]).filter(Boolean),(...e)=>{this.handleTracksChange.apply(this,e)}),n=(...e)=>{this.handleSelectedLanguageChange.apply(this,e)};if(e.on(["loadstart","texttrackchange"],r),s.addEventListener("change",r),s.addEventListener("selectedlanguagechange",n),this.on("dispose",function(){e.off(["loadstart","texttrackchange"],r),s.removeEventListener("change",r),s.removeEventListener("selectedlanguagechange",n)}),void 0===s.onchange){let e;this.on(["tap","click"],function(){if("object"!=typeof window.Event)try{e=new window.Event("change")}catch(e){}e||(e=document.createEvent("Event")).initEvent("change",!0,!0),s.dispatchEvent(e)})}this.handleTracksChange()}handleClick(e){var t=this.track,i=this.player_.textTracks();if(super.handleClick(e),i)for(let e=0;e<i.length;e++){var s=i[e];-1!==this.kinds.indexOf(s.kind)&&(s===t?"showing"!==s.mode&&(s.mode="showing"):"disabled"!==s.mode&&(s.mode="disabled"))}}handleTracksChange(e){var t="showing"===this.track.mode;t!==this.isSelected_&&this.selected(t)}handleSelectedLanguageChange(e){var t;"showing"!==this.track.mode||(t=this.player_.cache_.selectedLanguage)&&t.enabled&&t.language===this.track.language&&t.kind!==this.track.kind||(this.player_.cache_.selectedLanguage={enabled:!0,language:this.track.language,kind:this.track.kind})}dispose(){this.track=null,super.dispose()}}f.registerComponent("TextTrackMenuItem",_r);class vr extends _r{constructor(e,t){t.track={player:e,kind:t.kind,kinds:t.kinds,default:!1,mode:"disabled"},t.kinds||(t.kinds=[t.kind]),t.label?t.track.label=t.label:t.track.label=t.kinds.join(" and ")+" off",t.selectable=!0,t.multiSelectable=!1,super(e,t)}handleTracksChange(e){var i=this.player().textTracks();let s=!0;for(let e=0,t=i.length;e<t;e++){var r=i[e];if(-1<this.options_.kinds.indexOf(r.kind)&&"showing"===r.mode){s=!1;break}}s!==this.isSelected_&&this.selected(s)}handleSelectedLanguageChange(e){var i=this.player().textTracks();let s=!0;for(let e=0,t=i.length;e<t;e++){var r=i[e];if(-1<["captions","descriptions","subtitles"].indexOf(r.kind)&&"showing"===r.mode){s=!1;break}}s&&(this.player_.cache_.selectedLanguage={enabled:!1})}handleLanguagechange(){this.$(".vjs-menu-item-text").textContent=this.player_.localize(this.options_.label),super.handleLanguagechange()}}f.registerComponent("OffTextTrackMenuItem",vr);class br extends gr{constructor(e,t={}){t.tracks=e.textTracks(),super(e,t)}createItems(t=[],i=_r){let e;this.label_&&(e=this.label_+" off"),t.push(new vr(this.player_,{kinds:this.kinds_,kind:this.kind_,label:e})),this.hideThreshold_+=1;var s=this.player_.textTracks();Array.isArray(this.kinds_)||(this.kinds_=[this.kind_]);for(let e=0;e<s.length;e++){var r,n=s[e];-1<this.kinds_.indexOf(n.kind)&&((r=new i(this.player_,{track:n,kinds:this.kinds_,kind:this.kind_,selectable:!0,multiSelectable:!1})).addClass(`vjs-${n.kind}-menu-item`),t.push(r))}return t}}f.registerComponent("TextTrackButton",br);class Tr extends yr{constructor(e,t){var i=t.track,s=t.cue,r=e.currentTime();t.selectable=!0,t.multiSelectable=!1,t.label=s.text,t.selected=s.startTime<=r&&r<s.endTime,super(e,t),this.track=i,this.cue=s}handleClick(e){super.handleClick(),this.player_.currentTime(this.cue.startTime)}}f.registerComponent("ChaptersTrackMenuItem",Tr);class Sr extends br{constructor(e,t,i){super(e,t,i),this.setIcon("chapters"),this.selectCurrentItem_=()=>{this.items.forEach(e=>{e.selected(this.track_.activeCues[0]===e.cue)})}}buildCSSClass(){return"vjs-chapters-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-chapters-button "+super.buildWrapperCSSClass()}update(e){e&&e.track&&"chapters"!==e.track.kind||((e=this.findChaptersTrack())!==this.track_?(this.setTrack(e),super.update()):(!this.items||e&&e.cues&&e.cues.length!==this.items.length)&&super.update())}setTrack(e){var t;this.track_!==e&&(this.updateHandler_||(this.updateHandler_=this.update.bind(this)),this.track_&&((t=this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_))&&t.removeEventListener("load",this.updateHandler_),this.track_.removeEventListener("cuechange",this.selectCurrentItem_),this.track_=null),this.track_=e,this.track_)&&(this.track_.mode="hidden",(t=this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_))&&t.addEventListener("load",this.updateHandler_),this.track_.addEventListener("cuechange",this.selectCurrentItem_))}findChaptersTrack(){var t=this.player_.textTracks()||[];for(let e=t.length-1;0<=e;e--){var i=t[e];if(i.kind===this.kind_)return i}}getMenuCaption(){return this.track_&&this.track_.label?this.track_.label:this.localize(g(this.kind_))}createMenu(){return this.options_.title=this.getMenuCaption(),super.createMenu()}createItems(){var i=[];if(this.track_){var s=this.track_.cues;if(s)for(let e=0,t=s.length;e<t;e++){var r=s[e],r=new Tr(this.player_,{track:this.track_,cue:r});i.push(r)}}return i}}Sr.prototype.kind_="chapters",Sr.prototype.controlText_="Chapters",f.registerComponent("ChaptersButton",Sr);class wr extends br{constructor(e,t,i){super(e,t,i),this.setIcon("audio-description");const s=e.textTracks(),r=m(this,this.handleTracksChange);s.addEventListener("change",r),this.on("dispose",function(){s.removeEventListener("change",r)})}handleTracksChange(e){var i=this.player().textTracks();let s=!1;for(let e=0,t=i.length;e<t;e++){var r=i[e];if(r.kind!==this.kind_&&"showing"===r.mode){s=!0;break}}s?this.disable():this.enable()}buildCSSClass(){return"vjs-descriptions-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-descriptions-button "+super.buildWrapperCSSClass()}}wr.prototype.kind_="descriptions",wr.prototype.controlText_="Descriptions",f.registerComponent("DescriptionsButton",wr);class Er extends br{constructor(e,t,i){super(e,t,i),this.setIcon("subtitles")}buildCSSClass(){return"vjs-subtitles-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-subtitles-button "+super.buildWrapperCSSClass()}}Er.prototype.kind_="subtitles",Er.prototype.controlText_="Subtitles",f.registerComponent("SubtitlesButton",Er);class Cr extends _r{constructor(e,t){t.track={player:e,kind:t.kind,label:t.kind+" settings",selectable:!1,default:!1,mode:"disabled"},t.selectable=!1,t.name="CaptionSettingsMenuItem",super(e,t),this.addClass("vjs-texttrack-settings"),this.controlText(", opens "+t.kind+" settings dialog")}handleClick(e){this.player().getChild("textTrackSettings").open()}handleLanguagechange(){this.$(".vjs-menu-item-text").textContent=this.player_.localize(this.options_.kind+" settings"),super.handleLanguagechange()}}f.registerComponent("CaptionSettingsMenuItem",Cr);class kr extends br{constructor(e,t,i){super(e,t,i),this.setIcon("captions")}buildCSSClass(){return"vjs-captions-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-captions-button "+super.buildWrapperCSSClass()}createItems(){var e=[];return this.player().tech_&&this.player().tech_.featuresNativeTextTracks||!this.player().getChild("textTrackSettings")||(e.push(new Cr(this.player_,{kind:this.kind_})),this.hideThreshold_+=1),super.createItems(e)}}kr.prototype.kind_="captions",kr.prototype.controlText_="Captions",f.registerComponent("CaptionsButton",kr);class xr extends _r{createEl(e,t,i){e=super.createEl(e,t,i),t=e.querySelector(".vjs-menu-item-text");return"captions"===this.options_.track.kind&&(this.player_.options_.experimentalSvgIcons?this.setIcon("captions",e):t.appendChild(o("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),t.appendChild(o("span",{className:"vjs-control-text",textContent:" "+this.localize("Captions")}))),e}}f.registerComponent("SubsCapsMenuItem",xr);class Ir extends br{constructor(e,t={}){super(e,t),this.label_="subtitles",this.setIcon("subtitles"),-1<["en","en-us","en-ca","fr-ca"].indexOf(this.player_.language_)&&(this.label_="captions",this.setIcon("captions")),this.menuButton_.controlText(g(this.label_))}buildCSSClass(){return"vjs-subs-caps-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-subs-caps-button "+super.buildWrapperCSSClass()}createItems(){let e=[];return this.player().tech_&&this.player().tech_.featuresNativeTextTracks||!this.player().getChild("textTrackSettings")||(e.push(new Cr(this.player_,{kind:this.label_})),this.hideThreshold_+=1),e=super.createItems(e,xr)}}Ir.prototype.kinds_=["captions","subtitles"],Ir.prototype.controlText_="Subtitles",f.registerComponent("SubsCapsButton",Ir);class Ar extends yr{constructor(e,t){var i=t.track;const s=e.audioTracks(),r=(t.label=i.label||i.language||"Unknown",t.selected=i.enabled,super(e,t),this.track=i,this.addClass(`vjs-${i.kind}-menu-item`),(...e)=>{this.handleTracksChange.apply(this,e)});s.addEventListener("change",r),this.on("dispose",()=>{s.removeEventListener("change",r)})}createEl(e,t,i){e=super.createEl(e,t,i),t=e.querySelector(".vjs-menu-item-text");return 0<=["main-desc","description"].indexOf(this.options_.track.kind)&&(t.appendChild(o("span",{className:"vjs-icon-placeholder"},{"aria-hidden":!0})),t.appendChild(o("span",{className:"vjs-control-text",textContent:" "+this.localize("Descriptions")}))),e}handleClick(e){if(super.handleClick(e),this.track.enabled=!0,this.player_.tech_.featuresNativeAudioTracks){var t=this.player_.audioTracks();for(let e=0;e<t.length;e++){var i=t[e];i!==this.track&&(i.enabled=i===this.track)}}}handleTracksChange(e){this.selected(this.track.enabled)}}f.registerComponent("AudioTrackMenuItem",Ar);class Dr extends gr{constructor(e,t={}){t.tracks=e.audioTracks(),super(e,t),this.setIcon("audio")}buildCSSClass(){return"vjs-audio-button "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-audio-button "+super.buildWrapperCSSClass()}createItems(t=[]){this.hideThreshold_=1;var i=this.player_.audioTracks();for(let e=0;e<i.length;e++){var s=i[e];t.push(new Ar(this.player_,{track:s,selectable:!0,multiSelectable:!1}))}return t}}Dr.prototype.controlText_="Audio Track",f.registerComponent("AudioTrackButton",Dr);class Pr extends yr{constructor(e,t){var i=t.rate,s=parseFloat(i,10);t.label=i,t.selected=s===e.playbackRate(),t.selectable=!0,t.multiSelectable=!1,super(e,t),this.label=i,this.rate=s,this.on(e,"ratechange",e=>this.update(e))}handleClick(e){super.handleClick(),this.player().playbackRate(this.rate)}update(e){this.selected(this.player().playbackRate()===this.rate)}}Pr.prototype.contentElType="button",f.registerComponent("PlaybackRateMenuItem",Pr);class Lr extends mr{constructor(e,t){super(e,t),this.menuButton_.el_.setAttribute("aria-describedby",this.labelElId_),this.updateVisibility(),this.updateLabel(),this.on(e,"loadstart",e=>this.updateVisibility(e)),this.on(e,"ratechange",e=>this.updateLabel(e)),this.on(e,"playbackrateschange",e=>this.handlePlaybackRateschange(e))}createEl(){var e=super.createEl();return this.labelElId_="vjs-playback-rate-value-label-"+this.id_,this.labelEl_=o("div",{className:"vjs-playback-rate-value",id:this.labelElId_,textContent:"1x"}),e.appendChild(this.labelEl_),e}dispose(){this.labelEl_=null,super.dispose()}buildCSSClass(){return"vjs-playback-rate "+super.buildCSSClass()}buildWrapperCSSClass(){return"vjs-playback-rate "+super.buildWrapperCSSClass()}createItems(){var t=this.playbackRates(),i=[];for(let e=t.length-1;0<=e;e--)i.push(new Pr(this.player(),{rate:t[e]+"x"}));return i}handlePlaybackRateschange(e){this.update()}playbackRates(){var e=this.player();return e.playbackRates&&e.playbackRates()||[]}playbackRateSupported(){return this.player().tech_&&this.player().tech_.featuresPlaybackRate&&this.playbackRates()&&0<this.playbackRates().length}updateVisibility(e){this.playbackRateSupported()?this.removeClass("vjs-hidden"):this.addClass("vjs-hidden")}updateLabel(e){this.playbackRateSupported()&&(this.labelEl_.textContent=this.player().playbackRate()+"x")}}Lr.prototype.controlText_="Playback Rate",f.registerComponent("PlaybackRateMenuButton",Lr);class Or extends f{buildCSSClass(){return"vjs-spacer "+super.buildCSSClass()}createEl(e="div",t={},i={}){return t.className||(t.className=this.buildCSSClass()),super.createEl(e,t,i)}}f.registerComponent("Spacer",Or);f.registerComponent("CustomControlSpacer",class extends Or{buildCSSClass(){return"vjs-custom-control-spacer "+super.buildCSSClass()}createEl(){return super.createEl("div",{className:this.buildCSSClass(),textContent:" "})}});class Rr extends f{createEl(){return super.createEl("div",{className:"vjs-control-bar",dir:"ltr"})}}Rr.prototype.options_={children:["playToggle","skipBackward","skipForward","volumePanel","currentTimeDisplay","timeDivider","durationDisplay","progressControl","liveDisplay","seekToLive","remainingTimeDisplay","customControlSpacer","playbackRateMenuButton","chaptersButton","descriptionsButton","subsCapsButton","audioTrackButton","pictureInPictureToggle","fullscreenToggle"]},f.registerComponent("ControlBar",Rr);class Nr extends ti{constructor(e,t){super(e,t),this.on(e,"error",e=>{this.open(e)})}buildCSSClass(){return"vjs-error-display "+super.buildCSSClass()}content(){var e=this.player().error();return e?this.localize(e.message):""}}Nr.prototype.options_=Object.assign({},ti.prototype.options_,{pauseOnOpen:!1,fillAlways:!0,temporary:!1,uncloseable:!0}),f.registerComponent("ErrorDisplay",Nr);const Mr="vjs-text-track-settings";var Fi=["#000","Black"],t=["#00F","Blue"],Ur=["#0FF","Cyan"],Br=["#0F0","Green"],s=["#F0F","Magenta"],Fr=["#F00","Red"],qr=["#FFF","White"],n=["#FF0","Yellow"],jr=["1","Opaque"],Hr=["0.5","Semi-Transparent"],Vr=["0","Transparent"];const $r={backgroundColor:{selector:".vjs-bg-color > select",id:"captions-background-color-%s",label:"Color",options:[Fi,qr,Fr,Br,t,n,s,Ur]},backgroundOpacity:{selector:".vjs-bg-opacity > select",id:"captions-background-opacity-%s",label:"Opacity",options:[jr,Hr,Vr]},color:{selector:".vjs-text-color > select",id:"captions-foreground-color-%s",label:"Color",options:[qr,Fi,Fr,Br,t,n,s,Ur]},edgeStyle:{selector:".vjs-edge-style > select",id:"%s",label:"Text Edge Style",options:[["none","None"],["raised","Raised"],["depressed","Depressed"],["uniform","Uniform"],["dropshadow","Drop shadow"]]},fontFamily:{selector:".vjs-font-family > select",id:"captions-font-family-%s",label:"Font Family",options:[["proportionalSansSerif","Proportional Sans-Serif"],["monospaceSansSerif","Monospace Sans-Serif"],["proportionalSerif","Proportional Serif"],["monospaceSerif","Monospace Serif"],["casual","Casual"],["script","Script"],["small-caps","Small Caps"]]},fontPercent:{selector:".vjs-font-percent > select",id:"captions-font-size-%s",label:"Font Size",options:[["0.50","50%"],["0.75","75%"],["1.00","100%"],["1.25","125%"],["1.50","150%"],["1.75","175%"],["2.00","200%"],["3.00","300%"],["4.00","400%"]],default:2,parser:e=>"1.00"===e?null:Number(e)},textOpacity:{selector:".vjs-text-opacity > select",id:"captions-foreground-opacity-%s",label:"Opacity",options:[jr,Hr]},windowColor:{selector:".vjs-window-color > select",id:"captions-window-color-%s",label:"Color"},windowOpacity:{selector:".vjs-window-opacity > select",id:"captions-window-opacity-%s",label:"Opacity",options:[Vr,Hr,jr]}};function zr(e,t){if((e=t?t(e):e)&&"none"!==e)return e}$r.windowColor.options=$r.backgroundColor.options;class Wr extends ti{constructor(e,t){t.temporary=!1,super(e,t),this.updateDisplay=this.updateDisplay.bind(this),this.fill(),this.hasBeenOpened_=this.hasBeenFilled_=!0,this.endDialog=o("p",{className:"vjs-control-text",textContent:this.localize("End of dialog window.")}),this.el().appendChild(this.endDialog),this.setDefaults(),void 0===t.persistTextTrackSettings&&(this.options_.persistTextTrackSettings=this.options_.playerOptions.persistTextTrackSettings),this.on(this.$(".vjs-done-button"),"click",()=>{this.saveSettings(),this.close()}),this.on(this.$(".vjs-default-button"),"click",()=>{this.setDefaults(),this.updateDisplay()}),G($r,e=>{this.on(this.$(e.selector),"change",this.updateDisplay)}),this.options_.persistTextTrackSettings&&this.restoreSettings()}dispose(){this.endDialog=null,super.dispose()}createElSelect_(e,t="",i="label"){e=$r[e];const s=e.id.replace("%s",this.id_),r=[t,s].join(" ").trim();t="vjs_select_"+ot++;return[`<${i} id="${s}"${"label"===i?` for="${t}" class="vjs-label"`:""}>`,this.localize(e.label),`</${i}>`,`<select aria-labelledby="${r}" id="${t}">`].concat(e.options.map(e=>{var t=s+"-"+e[1].replace(/\W+/g,"");return[`<option id="${t}" value="${e[0]}" `,`aria-labelledby="${r} ${t}">`,this.localize(e[1]),"</option>"].join("")})).concat("</select>").join("")}createElFgColor_(){var e="captions-text-legend-"+this.id_;return['<fieldset class="vjs-fg vjs-track-setting">',`<legend id="${e}">`,this.localize("Text"),"</legend>",'<span class="vjs-text-color">',this.createElSelect_("color",e),"</span>",'<span class="vjs-text-opacity vjs-opacity">',this.createElSelect_("textOpacity",e),"</span>","</fieldset>"].join("")}createElBgColor_(){var e="captions-background-"+this.id_;return['<fieldset class="vjs-bg vjs-track-setting">',`<legend id="${e}">`,this.localize("Text Background"),"</legend>",'<span class="vjs-bg-color">',this.createElSelect_("backgroundColor",e),"</span>",'<span class="vjs-bg-opacity vjs-opacity">',this.createElSelect_("backgroundOpacity",e),"</span>","</fieldset>"].join("")}createElWinColor_(){var e="captions-window-"+this.id_;return['<fieldset class="vjs-window vjs-track-setting">',`<legend id="${e}">`,this.localize("Caption Area Background"),"</legend>",'<span class="vjs-window-color">',this.createElSelect_("windowColor",e),"</span>",'<span class="vjs-window-opacity vjs-opacity">',this.createElSelect_("windowOpacity",e),"</span>","</fieldset>"].join("")}createElColors_(){return o("div",{className:"vjs-track-settings-colors",innerHTML:[this.createElFgColor_(),this.createElBgColor_(),this.createElWinColor_()].join("")})}createElFont_(){return o("div",{className:"vjs-track-settings-font",innerHTML:['<fieldset class="vjs-font-percent vjs-track-setting">',this.createElSelect_("fontPercent","","legend"),"</fieldset>",'<fieldset class="vjs-edge-style vjs-track-setting">',this.createElSelect_("edgeStyle","","legend"),"</fieldset>",'<fieldset class="vjs-font-family vjs-track-setting">',this.createElSelect_("fontFamily","","legend"),"</fieldset>"].join("")})}createElControls_(){var e=this.localize("restore all settings to the default values");return o("div",{className:"vjs-track-settings-controls",innerHTML:[`<button type="button" class="vjs-default-button" title="${e}">`,this.localize("Reset"),`<span class="vjs-control-text"> ${e}</span>`,"</button>",`<button type="button" class="vjs-done-button">${this.localize("Done")}</button>`].join("")})}content(){return[this.createElColors_(),this.createElFont_(),this.createElControls_()]}label(){return this.localize("Caption Settings Dialog")}description(){return this.localize("Beginning of dialog window. Escape will cancel and close the window.")}buildCSSClass(){return super.buildCSSClass()+" vjs-text-track-settings"}getValues(){return X($r,(e,t,i)=>{s=this.$(t.selector),t=t.parser;var s=zr(s.options[s.options.selectedIndex].value,t);return void 0!==s&&(e[i]=s),e},{})}setValues(n){G($r,(e,t)=>{var i=this.$(e.selector),s=n[t],r=e.parser;if(s)for(let e=0;e<i.options.length;e++)if(zr(i.options[e].value,r)===s){i.selectedIndex=e;break}})}setDefaults(){G($r,e=>{var t=e.hasOwnProperty("default")?e.default:0;this.$(e.selector).selectedIndex=t})}restoreSettings(){let e;try{e=JSON.parse(window.localStorage.getItem(Mr))}catch(e){l.warn(e)}e&&this.setValues(e)}saveSettings(){if(this.options_.persistTextTrackSettings){var e=this.getValues();try{Object.keys(e).length?window.localStorage.setItem(Mr,JSON.stringify(e)):window.localStorage.removeItem(Mr)}catch(e){l.warn(e)}}}updateDisplay(){var e=this.player_.getChild("textTrackDisplay");e&&e.updateDisplay()}conditionalBlur_(){this.previouslyActiveEl_=null;var e=this.player_.controlBar,t=e&&e.subsCapsButton,e=e&&e.captionsButton;t?t.focus():e&&e.focus()}handleLanguagechange(){this.fill()}}f.registerComponent("TextTrackSettings",Wr);class Gr extends f{constructor(e,t){let i=t.ResizeObserver||window.ResizeObserver;super(e,d({createEl:!(i=null===t.ResizeObserver?!1:i),reportTouchActivity:!1},t)),this.ResizeObserver=t.ResizeObserver||window.ResizeObserver,this.loadListener_=null,this.resizeObserver_=null,this.debouncedHandler_=vt(()=>{this.resizeHandler()},100,!1,this),i?(this.resizeObserver_=new this.ResizeObserver(this.debouncedHandler_),this.resizeObserver_.observe(e.el())):(this.loadListener_=()=>{if(this.el_&&this.el_.contentWindow){const t=this.debouncedHandler_;let e=this.unloadListener_=function(){p(this,"resize",t),p(this,"unload",e),e=null};pt(this.el_.contentWindow,"unload",e),pt(this.el_.contentWindow,"resize",t)}},this.one("load",this.loadListener_))}createEl(){return super.createEl("iframe",{className:"vjs-resize-manager",tabIndex:-1,title:this.localize("No content")},{"aria-hidden":"true"})}resizeHandler(){this.player_&&this.player_.trigger&&this.player_.trigger("playerresize")}dispose(){this.debouncedHandler_&&this.debouncedHandler_.cancel(),this.resizeObserver_&&(this.player_.el()&&this.resizeObserver_.unobserve(this.player_.el()),this.resizeObserver_.disconnect()),this.loadListener_&&this.off("load",this.loadListener_),this.el_&&this.el_.contentWindow&&this.unloadListener_&&this.unloadListener_.call(this.el_.contentWindow),this.ResizeObserver=null,this.resizeObserver=null,this.debouncedHandler_=null,this.loadListener_=null,super.dispose()}}f.registerComponent("ResizeManager",Gr);const Xr={trackingThreshold:20,liveTolerance:15};class Kr extends f{constructor(e,t){super(e,d(Xr,t,{createEl:!1})),this.trackLiveHandler_=()=>this.trackLive_(),this.handlePlay_=e=>this.handlePlay(e),this.handleFirstTimeupdate_=e=>this.handleFirstTimeupdate(e),this.handleSeeked_=e=>this.handleSeeked(e),this.seekToLiveEdge_=e=>this.seekToLiveEdge(e),this.reset_(),this.on(this.player_,"durationchange",e=>this.handleDurationchange(e)),this.on(this.player_,"canplay",()=>this.toggleTracking())}trackLive_(){var t=this.player_.seekable();if(t&&t.length){var t=Number(window.performance.now().toFixed(4)),i=-1===this.lastTime_?0:(t-this.lastTime_)/1e3,t=(this.lastTime_=t,this.pastSeekEnd_=this.pastSeekEnd()+i,this.liveCurrentTime()),i=this.player_.currentTime();let e=this.player_.paused()||this.seekedBehindLive_||Math.abs(t-i)>this.options_.liveTolerance;(e=this.timeupdateSeen_&&t!==1/0?e:!1)!==this.behindLiveEdge_&&(this.behindLiveEdge_=e,this.trigger("liveedgechange"))}}handleDurationchange(){this.toggleTracking()}toggleTracking(){this.player_.duration()===1/0&&this.liveWindow()>=this.options_.trackingThreshold?(this.player_.options_.liveui&&this.player_.addClass("vjs-liveui"),this.startTracking()):(this.player_.removeClass("vjs-liveui"),this.stopTracking())}startTracking(){this.isTracking()||(this.timeupdateSeen_||(this.timeupdateSeen_=this.player_.hasStarted()),this.trackingInterval_=this.setInterval(this.trackLiveHandler_,30),this.trackLive_(),this.on(this.player_,["play","pause"],this.trackLiveHandler_),this.timeupdateSeen_?this.on(this.player_,"seeked",this.handleSeeked_):(this.one(this.player_,"play",this.handlePlay_),this.one(this.player_,"timeupdate",this.handleFirstTimeupdate_)))}handleFirstTimeupdate(){this.timeupdateSeen_=!0,this.on(this.player_,"seeked",this.handleSeeked_)}handleSeeked(){var e=Math.abs(this.liveCurrentTime()-this.player_.currentTime());this.seekedBehindLive_=this.nextSeekedFromUser_&&2<e,this.nextSeekedFromUser_=!1,this.trackLive_()}handlePlay(){this.one(this.player_,"timeupdate",this.seekToLiveEdge_)}reset_(){this.lastTime_=-1,this.pastSeekEnd_=0,this.lastSeekEnd_=-1,this.behindLiveEdge_=!0,this.timeupdateSeen_=!1,this.seekedBehindLive_=!1,this.nextSeekedFromUser_=!1,this.clearInterval(this.trackingInterval_),this.trackingInterval_=null,this.off(this.player_,["play","pause"],this.trackLiveHandler_),this.off(this.player_,"seeked",this.handleSeeked_),this.off(this.player_,"play",this.handlePlay_),this.off(this.player_,"timeupdate",this.handleFirstTimeupdate_),this.off(this.player_,"timeupdate",this.seekToLiveEdge_)}nextSeekedFromUser(){this.nextSeekedFromUser_=!0}stopTracking(){this.isTracking()&&(this.reset_(),this.trigger("liveedgechange"))}seekableEnd(){var e=this.player_.seekable(),t=[];let i=e?e.length:0;for(;i--;)t.push(e.end(i));return t.length?t.sort()[t.length-1]:1/0}seekableStart(){var e=this.player_.seekable(),t=[];let i=e?e.length:0;for(;i--;)t.push(e.start(i));return t.length?t.sort()[0]:0}liveWindow(){var e=this.liveCurrentTime();return e===1/0?0:e-this.seekableStart()}isLive(){return this.isTracking()}atLiveEdge(){return!this.behindLiveEdge()}liveCurrentTime(){return this.pastSeekEnd()+this.seekableEnd()}pastSeekEnd(){var e=this.seekableEnd();return-1!==this.lastSeekEnd_&&e!==this.lastSeekEnd_&&(this.pastSeekEnd_=0),this.lastSeekEnd_=e,this.pastSeekEnd_}behindLiveEdge(){return this.behindLiveEdge_}isTracking(){return"number"==typeof this.trackingInterval_}seekToLiveEdge(){this.seekedBehindLive_=!1,this.atLiveEdge()||(this.nextSeekedFromUser_=!1,this.player_.currentTime(this.liveCurrentTime()))}dispose(){this.stopTracking(),super.dispose()}}f.registerComponent("LiveTracker",Kr);class Yr extends f{constructor(e,t){super(e,t),this.on("statechanged",e=>this.updateDom_()),this.updateDom_()}createEl(){return this.els={title:o("div",{className:"vjs-title-bar-title",id:"vjs-title-bar-title-"+ot++}),description:o("div",{className:"vjs-title-bar-description",id:"vjs-title-bar-description-"+ot++})},o("div",{className:"vjs-title-bar"},{},Q(this.els))}updateDom_(){var e=this.player_.tech_;const s=e&&e.el_,r={title:"aria-labelledby",description:"aria-describedby"};["title","description"].forEach(e=>{var t=this.state[e],i=this.els[e],e=r[e];$e(i),t&&xe(i,t),s&&(s.removeAttribute(e),t)&&s.setAttribute(e,i.id)}),this.state.title||this.state.description?this.show():this.hide()}update(e){this.setState(e)}dispose(){var e=this.player_.tech_,e=e&&e.el_;e&&(e.removeAttribute("aria-labelledby"),e.removeAttribute("aria-describedby")),super.dispose(),this.els=null}}f.registerComponent("TitleBar",Yr);function Qr(i){const s=i.el();if(!s.resetSourceWatch_){const t={},e=sn(i),r=t=>(...e)=>{e=t.apply(s,e);return Zr(i),e};["append","appendChild","insertAdjacentHTML"].forEach(e=>{s[e]&&(t[e]=s[e],s[e]=r(t[e]))}),Object.defineProperty(s,"innerHTML",d(e,{set:r(e.set)})),s.resetSourceWatch_=()=>{s.resetSourceWatch_=null,Object.keys(t).forEach(e=>{s[e]=t[e]}),Object.defineProperty(s,"innerHTML",e)},i.one("sourceset",s.resetSourceWatch_)}}function Jr(i){if(i.featuresSourceset){const s=i.el();if(!s.resetSourceset_){e=i;const t=tn([e.el(),window.HTMLMediaElement.prototype,rn],"src");var e;const r=s.setAttribute,n=s.load;Object.defineProperty(s,"src",d(t,{set:e=>{e=t.set.call(s,e);return i.triggerSourceset(s.src),e}})),s.setAttribute=(e,t)=>{t=r.call(s,e,t);return/src/i.test(e)&&i.triggerSourceset(s.src),t},s.load=()=>{var e=n.call(s);return Zr(i)||(i.triggerSourceset(""),Qr(i)),e},s.currentSrc?i.triggerSourceset(s.currentSrc):Zr(i)||Qr(i),s.resetSourceset_=()=>{s.resetSourceset_=null,s.load=n,s.setAttribute=r,Object.defineProperty(s,"src",t),s.resetSourceWatch_&&s.resetSourceWatch_()}}}}const Zr=t=>{var e=t.el();if(e.hasAttribute("src"))t.triggerSourceset(e.src);else{var i=t.$$("source"),s=[];let e="";if(!i.length)return!1;for(let e=0;e<i.length;e++){var r=i[e].src;r&&-1===s.indexOf(r)&&s.push(r)}if(!s.length)return!1;1===s.length&&(e=s[0]),t.triggerSourceset(e)}return!0},en=Object.defineProperty({},"innerHTML",{get(){return this.cloneNode(!0).innerHTML},set(e){for(var t=document.createElement(this.nodeName.toLowerCase()),i=(t.innerHTML=e,document.createDocumentFragment());t.childNodes.length;)i.appendChild(t.childNodes[0]);return this.innerText="",window.Element.prototype.appendChild.call(this,i),this.innerHTML}}),tn=(t,i)=>{let s={};for(let e=0;e<t.length&&!((s=Object.getOwnPropertyDescriptor(t[e],i))&&s.set&&s.get);e++);return s.enumerable=!0,s.configurable=!0,s},sn=e=>tn([e.el(),window.HTMLMediaElement.prototype,window.Element.prototype,en],"innerHTML"),rn=Object.defineProperty({},"src",{get(){return this.hasAttribute("src")?pi(window.Element.prototype.getAttribute.call(this,"src")):""},set(e){return window.Element.prototype.setAttribute.call(this,"src",e),e}});class v extends _{constructor(e,t){super(e,t);t=e.source;let i=!1;if(this.featuresVideoFrameCallback=this.featuresVideoFrameCallback&&"VIDEO"===this.el_.tagName,t&&(this.el_.currentSrc!==t.src||e.tag&&3===e.tag.initNetworkState_)?this.setSource(t):this.handleLateInit_(this.el_),e.enableSourceset&&this.setupSourcesetHandling_(),this.isScrubbing_=!1,this.el_.hasChildNodes()){var s=this.el_.childNodes;let e=s.length;for(var r=[];e--;){var n=s[e];"track"===n.nodeName.toLowerCase()&&(this.featuresNativeTextTracks?(this.remoteTextTrackEls().addTrackElement_(n),this.remoteTextTracks().addTrack(n.track),this.textTracks().addTrack(n.track),i||this.el_.hasAttribute("crossorigin")||!mi(n.src)||(i=!0)):r.push(n))}for(let e=0;e<r.length;e++)this.el_.removeChild(r[e])}this.proxyNativeTracks_(),this.featuresNativeTextTracks&&i&&l.warn("Text Tracks are being loaded from another origin but the crossorigin attribute isn't used.\nThis may prevent text tracks from loading."),this.restoreMetadataTracksInIOSNativePlayer_(),(_e||me)&&!0===e.nativeControlsForTouch&&this.setControls(!0),this.proxyWebkitFullscreen_(),this.triggerReady()}dispose(){this.el_&&this.el_.resetSourceset_&&this.el_.resetSourceset_(),v.disposeMediaElement(this.el_),this.options_=null,super.dispose()}setupSourcesetHandling_(){Jr(this)}restoreMetadataTracksInIOSNativePlayer_(){const i=this.textTracks();let s;const e=()=>{s=[];for(let e=0;e<i.length;e++){var t=i[e];"metadata"===t.kind&&s.push({track:t,storedMode:t.mode})}},r=(e(),i.addEventListener("change",e),this.on("dispose",()=>i.removeEventListener("change",e)),()=>{for(let e=0;e<s.length;e++){var t=s[e];"disabled"===t.track.mode&&t.track.mode!==t.storedMode&&(t.track.mode=t.storedMode)}i.removeEventListener("change",r)});this.on("webkitbeginfullscreen",()=>{i.removeEventListener("change",e),i.removeEventListener("change",r),i.addEventListener("change",r)}),this.on("webkitendfullscreen",()=>{i.removeEventListener("change",e),i.addEventListener("change",e),i.removeEventListener("change",r)})}overrideNative_(e,t){if(t===this[`featuresNative${e}Tracks`]){const i=e.toLowerCase();this[i+"TracksListeners_"]&&Object.keys(this[i+"TracksListeners_"]).forEach(e=>{this.el()[i+"Tracks"].removeEventListener(e,this[i+"TracksListeners_"][e])}),this[`featuresNative${e}Tracks`]=!t,this[i+"TracksListeners_"]=null,this.proxyNativeTracksForType_(i)}}overrideNativeAudioTracks(e){this.overrideNative_("Audio",e)}overrideNativeVideoTracks(e){this.overrideNative_("Video",e)}proxyNativeTracksForType_(i){var e=Ui[i];const s=this.el()[e.getterName],r=this[e.getterName]();if(this[`featuresNative${e.capitalName}Tracks`]&&s&&s.addEventListener){const n={change:e=>{var t={type:"change",target:r,currentTarget:r,srcElement:r};r.trigger(t),"text"===i&&this[Bi.remoteText.getterName]().trigger(t)},addtrack(e){r.addTrack(e.track)},removetrack(e){r.removeTrack(e.track)}},t=function(){var e=[];for(let i=0;i<r.length;i++){let t=!1;for(let e=0;e<s.length;e++)if(s[e]===r[i]){t=!0;break}t||e.push(r[i])}for(;e.length;)r.removeTrack(e.shift())};this[e.getterName+"Listeners_"]=n,Object.keys(n).forEach(t=>{const i=n[t];s.addEventListener(t,i),this.on("dispose",e=>s.removeEventListener(t,i))}),this.on("loadstart",t),this.on("dispose",e=>this.off("loadstart",t))}}proxyNativeTracks_(){Ui.names.forEach(e=>{this.proxyNativeTracksForType_(e)})}createEl(){let t=this.options_.tag;t&&(this.options_.playerElIngest||this.movingMediaElementInDOM)||(t?(e=t.cloneNode(!0),t.parentNode&&t.parentNode.insertBefore(e,t),v.disposeMediaElement(t),t=e):(t=document.createElement("video"),e=d({},this.options_.tag&&Re(this.options_.tag)),_e&&!0===this.options_.nativeControlsForTouch||delete e.controls,Oe(t,Object.assign(e,{id:this.options_.techId,class:"vjs-tech"}))),t.playerId=this.options_.playerId),"undefined"!=typeof this.options_.preload&&Me(t,"preload",this.options_.preload),void 0!==this.options_.disablePictureInPicture&&(t.disablePictureInPicture=this.options_.disablePictureInPicture);var e,i=["loop","muted","playsinline","autoplay"];for(let e=0;e<i.length;e++){var s=i[e],r=this.options_[s];"undefined"!=typeof r&&(r?Me(t,s,s):Ue(t,s),t[s]=r)}return t}handleLateInit_(e){if(0!==e.networkState&&3!==e.networkState)if(0===e.readyState){let e=!1;const t=function(){e=!0},i=(this.on("loadstart",t),function(){e||this.trigger("loadstart")});this.on("loadedmetadata",i),void this.ready(function(){this.off("loadstart",t),this.off("loadedmetadata",i),e||this.trigger("loadstart")})}else{const s=["loadstart"];s.push("loadedmetadata"),2<=e.readyState&&s.push("loadeddata"),3<=e.readyState&&s.push("canplay"),4<=e.readyState&&s.push("canplaythrough"),this.ready(function(){s.forEach(function(e){this.trigger(e)},this)})}}setScrubbing(e){this.isScrubbing_=e}scrubbing(){return this.isScrubbing_}setCurrentTime(e){try{this.isScrubbing_&&this.el_.fastSeek&&be?this.el_.fastSeek(e):this.el_.currentTime=e}catch(e){l(e,"Video is not ready. (Video.js)")}}duration(){if(this.el_.duration===1/0&&ie&&oe&&0===this.el_.currentTime){const e=()=>{0<this.el_.currentTime&&(this.el_.duration===1/0&&this.trigger("durationchange"),this.off("timeupdate",e))};return this.on("timeupdate",e),NaN}return this.el_.duration||NaN}width(){return this.el_.offsetWidth}height(){return this.el_.offsetHeight}proxyWebkitFullscreen_(){if("webkitDisplayingFullscreen"in this.el_){const e=function(){this.trigger("fullscreenchange",{isFullscreen:!1}),this.el_.controls&&!this.options_.nativeControlsForTouch&&this.controls()&&(this.el_.controls=!1)},t=function(){"webkitPresentationMode"in this.el_&&"picture-in-picture"!==this.el_.webkitPresentationMode&&(this.one("webkitendfullscreen",e),this.trigger("fullscreenchange",{isFullscreen:!0,nativeIOSFullscreen:!0}))};this.on("webkitbeginfullscreen",t),this.on("dispose",()=>{this.off("webkitbeginfullscreen",t),this.off("webkitendfullscreen",e)})}}supportsFullScreen(){return"function"==typeof this.el_.webkitEnterFullScreen}enterFullScreen(){const e=this.el_;if(e.paused&&e.networkState<=e.HAVE_METADATA)Yt(this.el_.play()),this.setTimeout(function(){e.pause();try{e.webkitEnterFullScreen()}catch(e){this.trigger("fullscreenerror",e)}},0);else try{e.webkitEnterFullScreen()}catch(e){this.trigger("fullscreenerror",e)}}exitFullScreen(){this.el_.webkitDisplayingFullscreen?this.el_.webkitExitFullScreen():this.trigger("fullscreenerror",new Error("The video is not fullscreen"))}requestPictureInPicture(){return this.el_.requestPictureInPicture()}requestVideoFrameCallback(e){return this.featuresVideoFrameCallback&&!this.el_.webkitKeys?this.el_.requestVideoFrameCallback(e):super.requestVideoFrameCallback(e)}cancelVideoFrameCallback(e){this.featuresVideoFrameCallback&&!this.el_.webkitKeys?this.el_.cancelVideoFrameCallback(e):super.cancelVideoFrameCallback(e)}src(e){if(void 0===e)return this.el_.src;this.setSrc(e)}reset(){v.resetMediaElement(this.el_)}currentSrc(){return this.currentSource_?this.currentSource_.src:this.el_.currentSrc}setControls(e){this.el_.controls=!!e}addTextTrack(e,t,i){return this.featuresNativeTextTracks?this.el_.addTextTrack(e,t,i):super.addTextTrack(e,t,i)}createRemoteTextTrack(e){var t;return this.featuresNativeTextTracks?(t=document.createElement("track"),e.kind&&(t.kind=e.kind),e.label&&(t.label=e.label),(e.language||e.srclang)&&(t.srclang=e.language||e.srclang),e.default&&(t.default=e.default),e.id&&(t.id=e.id),e.src&&(t.src=e.src),t):super.createRemoteTextTrack(e)}addRemoteTextTrack(e,t){e=super.addRemoteTextTrack(e,t);return this.featuresNativeTextTracks&&this.el().appendChild(e),e}removeRemoteTextTrack(t){if(super.removeRemoteTextTrack(t),this.featuresNativeTextTracks){var i=this.$$("track");let e=i.length;for(;e--;)t!==i[e]&&t!==i[e].track||this.el().removeChild(i[e])}}getVideoPlaybackQuality(){var e;return"function"==typeof this.el().getVideoPlaybackQuality?this.el().getVideoPlaybackQuality():(e={},"undefined"!=typeof this.el().webkitDroppedFrameCount&&"undefined"!=typeof this.el().webkitDecodedFrameCount&&(e.droppedVideoFrames=this.el().webkitDroppedFrameCount,e.totalVideoFrames=this.el().webkitDecodedFrameCount),window.performance&&(e.creationTime=window.performance.now()),e)}}J(v,"TEST_VID",function(){var e,t;if(we())return e=document.createElement("video"),(t=document.createElement("track")).kind="captions",t.srclang="en",t.label="English",e.appendChild(t),e}),v.isSupported=function(){try{v.TEST_VID.volume=.5}catch(e){return!1}return!(!v.TEST_VID||!v.TEST_VID.canPlayType)},v.canPlayType=function(e){return v.TEST_VID.canPlayType(e)},v.canPlaySource=function(e,t){return v.canPlayType(e.type)},v.canControlVolume=function(){try{const t=v.TEST_VID.volume;v.TEST_VID.volume=t/2+.1;var e=t!==v.TEST_VID.volume;return e&&c?(window.setTimeout(()=>{v&&v.prototype&&(v.prototype.featuresVolumeControl=t!==v.TEST_VID.volume)}),!1):e}catch(e){return!1}},v.canMuteVolume=function(){try{var e=v.TEST_VID.muted;return v.TEST_VID.muted=!e,v.TEST_VID.muted?Me(v.TEST_VID,"muted","muted"):Ue(v.TEST_VID,"muted"),e!==v.TEST_VID.muted}catch(e){return!1}},v.canControlPlaybackRate=function(){if(ie&&oe&&de<58)return!1;try{var e=v.TEST_VID.playbackRate;return v.TEST_VID.playbackRate=e/2+.1,e!==v.TEST_VID.playbackRate}catch(e){return!1}},v.canOverrideAttributes=function(){try{var e=()=>{};Object.defineProperty(document.createElement("video"),"src",{get:e,set:e}),Object.defineProperty(document.createElement("audio"),"src",{get:e,set:e}),Object.defineProperty(document.createElement("video"),"innerHTML",{get:e,set:e}),Object.defineProperty(document.createElement("audio"),"innerHTML",{get:e,set:e})}catch(e){return!1}return!0},v.supportsNativeTextTracks=function(){return be||c&&oe},v.supportsNativeVideoTracks=function(){return!(!v.TEST_VID||!v.TEST_VID.videoTracks)},v.supportsNativeAudioTracks=function(){return!(!v.TEST_VID||!v.TEST_VID.audioTracks)},v.Events=["loadstart","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","ended","durationchange","timeupdate","progress","play","pause","ratechange","resize","volumechange"],[["featuresMuteControl","canMuteVolume"],["featuresPlaybackRate","canControlPlaybackRate"],["featuresSourceset","canOverrideAttributes"],["featuresNativeTextTracks","supportsNativeTextTracks"],["featuresNativeVideoTracks","supportsNativeVideoTracks"],["featuresNativeAudioTracks","supportsNativeAudioTracks"]].forEach(function([e,t]){J(v.prototype,e,()=>v[t](),!0)}),v.prototype.featuresVolumeControl=v.canControlVolume(),v.prototype.movingMediaElementInDOM=!c,v.prototype.featuresFullscreenResize=!0,v.prototype.featuresProgressEvents=!0,v.prototype.featuresTimeupdateEvents=!0,v.prototype.featuresVideoFrameCallback=!(!v.TEST_VID||!v.TEST_VID.requestVideoFrameCallback),v.disposeMediaElement=function(e){if(e){for(e.parentNode&&e.parentNode.removeChild(e);e.hasChildNodes();)e.removeChild(e.firstChild);if(e.removeAttribute("src"),"function"==typeof e.load)try{e.load()}catch(e){}}},v.resetMediaElement=function(t){if(t){var i=t.querySelectorAll("source");let e=i.length;for(;e--;)t.removeChild(i[e]);if(t.removeAttribute("src"),"function"==typeof t.load)try{t.load()}catch(e){}}},["muted","defaultMuted","autoplay","controls","loop","playsinline"].forEach(function(e){v.prototype[e]=function(){return this.el_[e]||this.el_.hasAttribute(e)}}),["muted","defaultMuted","autoplay","loop","playsinline"].forEach(function(t){v.prototype["set"+g(t)]=function(e){(this.el_[t]=e)?this.el_.setAttribute(t,t):this.el_.removeAttribute(t)}}),["paused","currentTime","buffered","volume","poster","preload","error","seeking","seekable","ended","playbackRate","defaultPlaybackRate","disablePictureInPicture","played","networkState","readyState","videoWidth","videoHeight","crossOrigin"].forEach(function(e){v.prototype[e]=function(){return this.el_[e]}}),["volume","src","poster","preload","playbackRate","defaultPlaybackRate","disablePictureInPicture","crossOrigin"].forEach(function(t){v.prototype["set"+g(t)]=function(e){this.el_[t]=e}}),["pause","load","play"].forEach(function(e){v.prototype[e]=function(){return this.el_[e]()}}),_.withSourceHandlers(v),v.nativeSourceHandler={},v.nativeSourceHandler.canPlayType=function(e){try{return v.TEST_VID.canPlayType(e)}catch(e){return""}},v.nativeSourceHandler.canHandleSource=function(e,t){return e.type?v.nativeSourceHandler.canPlayType(e.type):e.src?(e=gi(e.src),v.nativeSourceHandler.canPlayType("video/"+e)):""},v.nativeSourceHandler.handleSource=function(e,t,i){t.setSrc(e.src)},v.nativeSourceHandler.dispose=function(){},v.registerSourceHandler(v.nativeSourceHandler),_.registerTech("Html5",v);const nn=["progress","abort","suspend","emptied","stalled","loadedmetadata","loadeddata","timeupdate","resize","volumechange","texttrackchange"],an={canplay:"CanPlay",canplaythrough:"CanPlayThrough",playing:"Playing",seeked:"Seeked"},on=["tiny","xsmall","small","medium","large","xlarge","huge"],ln={},dn=(on.forEach(e=>{var t="x"===e.charAt(0)?"x-"+e.substring(1):e;ln[e]="vjs-layout-"+t}),{tiny:210,xsmall:320,small:425,medium:768,large:1440,xlarge:2560,huge:1/0});class b extends f{constructor(e,t,i){if(e.id=e.id||t.id||"vjs_video_"+ot++,(t=Object.assign(b.getTagSettings(e),t)).initChildren=!1,t.createEl=!1,t.evented=!1,t.reportTouchActivity=!1,t.language||(s=e.closest("[lang]"))&&(t.language=s.getAttribute("lang")),super(null,t,i),this.boundDocumentFullscreenChange_=e=>this.documentFullscreenChange_(e),this.boundFullWindowOnEscKey_=e=>this.fullWindowOnEscKey(e),this.boundUpdateStyleEl_=e=>this.updateStyleEl_(e),this.boundApplyInitTime_=e=>this.applyInitTime_(e),this.boundUpdateCurrentBreakpoint_=e=>this.updateCurrentBreakpoint_(e),this.boundHandleTechClick_=e=>this.handleTechClick_(e),this.boundHandleTechDoubleClick_=e=>this.handleTechDoubleClick_(e),this.boundHandleTechTouchStart_=e=>this.handleTechTouchStart_(e),this.boundHandleTechTouchMove_=e=>this.handleTechTouchMove_(e),this.boundHandleTechTouchEnd_=e=>this.handleTechTouchEnd_(e),this.boundHandleTechTap_=e=>this.handleTechTap_(e),this.isFullscreen_=!1,this.log=z(this.id_),this.fsApi_=q,this.isPosterFromTech_=!1,this.queuedCallbacks_=[],this.isReady_=!1,this.hasStarted_=!1,this.userActive_=!1,this.debugEnabled_=!1,this.audioOnlyMode_=!1,this.audioPosterMode_=!1,this.audioOnlyCache_={playerHeight:null,hiddenChildren:[]},!this.options_||!this.options_.techOrder||!this.options_.techOrder.length)throw new Error("No techOrder specified. Did you overwrite videojs.options instead of just changing the properties you want to override?");if(this.tag=e,this.tagAttributes=e&&Re(e),this.language(this.options_.language),t.languages){const r={};Object.getOwnPropertyNames(t.languages).forEach(function(e){r[e.toLowerCase()]=t.languages[e]}),this.languages_=r}else this.languages_=b.prototype.options_.languages;this.resetCache_(),this.poster_=t.poster||"",this.controls_=!!t.controls,e.controls=!1,e.removeAttribute("controls"),this.changingSrc_=!1,this.playCallbacks_=[],this.playTerminatedQueue_=[],e.hasAttribute("autoplay")?this.autoplay(!0):this.autoplay(this.options_.autoplay),t.plugins&&Object.keys(t.plugins).forEach(e=>{if("function"!=typeof this[e])throw new Error(`plugin "${e}" does not exist`)}),this.scrubbing_=!1,this.el_=this.createEl(),Pt(this,{eventBusKey:"el_"}),this.fsApi_.requestFullscreen&&(pt(document,this.fsApi_.fullscreenchange,this.boundDocumentFullscreenChange_),this.on(this.fsApi_.fullscreenchange,this.boundDocumentFullscreenChange_)),this.fluid_&&this.on(["playerreset","resize"],this.boundUpdateStyleEl_);var s=d(this.options_),i=(t.plugins&&Object.keys(t.plugins).forEach(e=>{this[e](t.plugins[e])}),t.debug&&this.debug(!0),this.options_.playerOptions=s,this.middleware_=[],this.playbackRates(t.playbackRates),t.experimentalSvgIcons&&((i=(new window.DOMParser).parseFromString('<svg xmlns="http://www.w3.org/2000/svg">\n  <defs>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-play">\n      <path d="M16 10v28l22-14z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-pause">\n      <path d="M12 38h8V10h-8v28zm16-28v28h8V10h-8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-audio">\n      <path d="M24 2C14.06 2 6 10.06 6 20v14c0 3.31 2.69 6 6 6h6V24h-8v-4c0-7.73 6.27-14 14-14s14 6.27 14 14v4h-8v16h6c3.31 0 6-2.69 6-6V20c0-9.94-8.06-18-18-18z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-captions">\n      <path d="M38 8H10c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM22 22h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2zm14 0h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-subtitles">\n      <path d="M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-fullscreen-enter">\n      <path d="M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-fullscreen-exit">\n      <path d="M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-play-circle">\n      <path d="M20 33l12-9-12-9v18zm4-29C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-mute">\n      <path d="M33 24c0-3.53-2.04-6.58-5-8.05v4.42l4.91 4.91c.06-.42.09-.85.09-1.28zm5 0c0 1.88-.41 3.65-1.08 5.28l3.03 3.03C41.25 29.82 42 27 42 24c0-8.56-5.99-15.72-14-17.54v4.13c5.78 1.72 10 7.07 10 13.41zM8.55 6L6 8.55 15.45 18H6v12h8l10 10V26.55l8.51 8.51c-1.34 1.03-2.85 1.86-4.51 2.36v4.13a17.94 17.94 0 0 0 7.37-3.62L39.45 42 42 39.45l-18-18L8.55 6zM24 8l-4.18 4.18L24 16.36V8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-low">\n      <path d="M14 18v12h8l10 10V8L22 18h-8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-medium">\n      <path d="M37 24c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zm-27-6v12h8l10 10V8L18 18h-8z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-volume-high">\n      <path d="M6 18v12h8l10 10V8L14 18H6zm27 6c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zM28 6.46v4.13c5.78 1.72 10 7.07 10 13.41s-4.22 11.69-10 13.41v4.13c8.01-1.82 14-8.97 14-17.54S36.01 8.28 28 6.46z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-spinner">\n      <path d="M18.8 21l9.53-16.51C26.94 4.18 25.49 4 24 4c-4.8 0-9.19 1.69-12.64 4.51l7.33 12.69.11-.2zm24.28-3c-1.84-5.85-6.3-10.52-11.99-12.68L23.77 18h19.31zm.52 2H28.62l.58 1 9.53 16.5C41.99 33.94 44 29.21 44 24c0-1.37-.14-2.71-.4-4zm-26.53 4l-7.8-13.5C6.01 14.06 4 18.79 4 24c0 1.37.14 2.71.4 4h14.98l-2.31-4zM4.92 30c1.84 5.85 6.3 10.52 11.99 12.68L24.23 30H4.92zm22.54 0l-7.8 13.51c1.4.31 2.85.49 4.34.49 4.8 0 9.19-1.69 12.64-4.51L29.31 26.8 27.46 30z"></path>\n    </symbol>\n    <symbol viewBox="0 0 24 24" id="vjs-icon-hd">\n      <path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-chapters">\n      <path d="M6 26h4v-4H6v4zm0 8h4v-4H6v4zm0-16h4v-4H6v4zm8 8h28v-4H14v4zm0 8h28v-4H14v4zm0-20v4h28v-4H14z"></path>\n    </symbol>\n    <symbol viewBox="0 0 40 40" id="vjs-icon-downloading">\n      <path d="M18.208 36.875q-3.208-.292-5.979-1.729-2.771-1.438-4.812-3.729-2.042-2.292-3.188-5.229-1.146-2.938-1.146-6.23 0-6.583 4.334-11.416 4.333-4.834 10.833-5.5v3.166q-5.167.75-8.583 4.646Q6.25 14.75 6.25 19.958q0 5.209 3.396 9.104 3.396 3.896 8.562 4.646zM20 28.417L11.542 20l2.083-2.083 4.917 4.916v-11.25h2.916v11.25l4.875-4.916L28.417 20zm1.792 8.458v-3.167q1.833-.25 3.541-.958 1.709-.708 3.167-1.875l2.333 2.292q-1.958 1.583-4.25 2.541-2.291.959-4.791 1.167zm6.791-27.792q-1.541-1.125-3.25-1.854-1.708-.729-3.541-1.021V3.042q2.5.25 4.77 1.208 2.271.958 4.271 2.5zm4.584 21.584l-2.25-2.25q1.166-1.5 1.854-3.209.687-1.708.937-3.541h3.209q-.292 2.5-1.229 4.791-.938 2.292-2.521 4.209zm.541-12.417q-.291-1.833-.958-3.562-.667-1.73-1.833-3.188l2.375-2.208q1.541 1.916 2.458 4.208.917 2.292 1.167 4.75z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-file-download">\n      <path d="M10.8 40.55q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h26.35v-7.7h3.4v7.7q0 1.4-1 2.4t-2.4 1zM24 32.1L13.9 22.05l2.45-2.45 5.95 5.95V7.15h3.4v18.4l5.95-5.95 2.45 2.45z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-file-download-done">\n      <path d="M9.8 40.5v-3.45h28.4v3.45zm9.2-9.05L7.4 19.85l2.45-2.35L19 26.65l19.2-19.2 2.4 2.4z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-file-download-off">\n      <path d="M4.9 4.75L43.25 43.1 41 45.3l-4.75-4.75q-.05.05-.075.025-.025-.025-.075-.025H10.8q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h22.05l-7-7-1.85 1.8L13.9 21.9l1.85-1.85L2.7 7zm26.75 14.7l2.45 2.45-3.75 3.8-2.45-2.5zM25.7 7.15V21.1l-3.4-3.45V7.15z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-share">\n      <path d="M36 32.17c-1.52 0-2.89.59-3.93 1.54L17.82 25.4c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31A5.83 5.83 0 1 0 36 32.17z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-cog">\n      <path d="M38.86 25.95c.08-.64.14-1.29.14-1.95s-.06-1.31-.14-1.95l4.23-3.31c.38-.3.49-.84.24-1.28l-4-6.93c-.25-.43-.77-.61-1.22-.43l-4.98 2.01c-1.03-.79-2.16-1.46-3.38-1.97L29 4.84c-.09-.47-.5-.84-1-.84h-8c-.5 0-.91.37-.99.84l-.75 5.3a14.8 14.8 0 0 0-3.38 1.97L9.9 10.1a1 1 0 0 0-1.22.43l-4 6.93c-.25.43-.14.97.24 1.28l4.22 3.31C9.06 22.69 9 23.34 9 24s.06 1.31.14 1.95l-4.22 3.31c-.38.3-.49.84-.24 1.28l4 6.93c.25.43.77.61 1.22.43l4.98-2.01c1.03.79 2.16 1.46 3.38 1.97l.75 5.3c.08.47.49.84.99.84h8c.5 0 .91-.37.99-.84l.75-5.3a14.8 14.8 0 0 0 3.38-1.97l4.98 2.01a1 1 0 0 0 1.22-.43l4-6.93c.25-.43.14-.97-.24-1.28l-4.22-3.31zM24 31c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-square">\n      <path d="M36 8H12c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H12V12h24v24z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-circle">\n      <circle cx="24" cy="24" r="20"></circle>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-circle-outline">\n      <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-circle-inner-circle">\n      <path d="M24 4C12.97 4 4 12.97 4 24s8.97 20 20 20 20-8.97 20-20S35.03 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm6-16c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6 6 2.69 6 6z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-cancel">\n      <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-replay">\n      <path d="M24 10V2L14 12l10 10v-8c6.63 0 12 5.37 12 12s-5.37 12-12 12-12-5.37-12-12H8c0 8.84 7.16 16 16 16s16-7.16 16-16-7.16-16-16-16z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-repeat">\n      <path d="M14 14h20v6l8-8-8-8v6H10v12h4v-8zm20 20H14v-6l-8 8 8 8v-6h24V26h-4v8z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-replay-5">\n      <path d="M17.689 98l-8.697 8.696 8.697 8.697 2.486-2.485-4.32-4.319h1.302c4.93 0 9.071 1.722 12.424 5.165 3.352 3.443 5.029 7.638 5.029 12.584h3.55c0-2.958-.553-5.73-1.658-8.313-1.104-2.583-2.622-4.841-4.555-6.774-1.932-1.932-4.19-3.45-6.773-4.555-2.584-1.104-5.355-1.657-8.313-1.657H15.5l4.615-4.615zm-8.08 21.659v13.861h11.357v5.008H9.609V143h12.7c.834 0 1.55-.298 2.146-.894.596-.597.895-1.31.895-2.145v-7.781c0-.835-.299-1.55-.895-2.147a2.929 2.929 0 0 0-2.147-.894h-8.227v-5.096H25.35v-4.384z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-replay-10">\n      <path d="M42.315 125.63c0-4.997-1.694-9.235-5.08-12.713-3.388-3.479-7.571-5.218-12.552-5.218h-1.315l4.363 4.363-2.51 2.51-8.787-8.786L25.221 97l2.45 2.45-4.662 4.663h1.375c2.988 0 5.788.557 8.397 1.673 2.61 1.116 4.892 2.65 6.844 4.602 1.953 1.953 3.487 4.234 4.602 6.844 1.116 2.61 1.674 5.41 1.674 8.398zM8.183 142v-19.657H3.176V117.8h9.643V142zm13.63 0c-1.156 0-2.127-.393-2.912-1.178-.778-.778-1.168-1.746-1.168-2.902v-16.04c0-1.156.393-2.127 1.178-2.912.779-.779 1.746-1.168 2.902-1.168h7.696c1.156 0 2.126.392 2.911 1.177.779.78 1.168 1.747 1.168 2.903v16.04c0 1.156-.392 2.127-1.177 2.912-.779.779-1.746 1.168-2.902 1.168zm.556-4.636h6.583v-15.02H22.37z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-replay-30">\n      <path d="M26.047 97l-8.733 8.732 8.733 8.733 2.496-2.494-4.336-4.338h1.307c4.95 0 9.108 1.73 12.474 5.187 3.367 3.458 5.051 7.668 5.051 12.635h3.565c0-2.97-.556-5.751-1.665-8.346-1.109-2.594-2.633-4.862-4.574-6.802-1.94-1.941-4.208-3.466-6.803-4.575-2.594-1.109-5.375-1.664-8.345-1.664H23.85l4.634-4.634zM2.555 117.531v4.688h10.297v5.25H5.873v4.687h6.979v5.156H2.555V142H13.36c1.061 0 1.95-.395 2.668-1.186.718-.79 1.076-1.772 1.076-2.94v-16.218c0-1.168-.358-2.149-1.076-2.94-.717-.79-1.607-1.185-2.668-1.185zm22.482.14c-1.149 0-2.11.39-2.885 1.165-.78.78-1.172 1.744-1.172 2.893v15.943c0 1.149.388 2.11 1.163 2.885.78.78 1.745 1.172 2.894 1.172h7.649c1.148 0 2.11-.388 2.884-1.163.78-.78 1.17-1.745 1.17-2.894v-15.943c0-1.15-.386-2.111-1.16-2.885-.78-.78-1.746-1.172-2.894-1.172zm.553 4.518h6.545v14.93H25.59z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-forward-5">\n      <path d="M29.508 97l-2.431 2.43 4.625 4.625h-1.364c-2.965 0-5.742.554-8.332 1.66-2.589 1.107-4.851 2.629-6.788 4.566-1.937 1.937-3.458 4.2-4.565 6.788-1.107 2.59-1.66 5.367-1.66 8.331h3.557c0-4.957 1.68-9.16 5.04-12.611 3.36-3.45 7.51-5.177 12.451-5.177h1.304l-4.326 4.33 2.49 2.49 8.715-8.716zm-9.783 21.61v13.89h11.382v5.018H19.725V142h12.727a2.93 2.93 0 0 0 2.15-.896 2.93 2.93 0 0 0 .896-2.15v-7.798c0-.837-.299-1.554-.896-2.152a2.93 2.93 0 0 0-2.15-.896h-8.245V123h11.29v-4.392z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-forward-10">\n      <path d="M23.119 97l-2.386 2.383 4.538 4.538h-1.339c-2.908 0-5.633.543-8.173 1.63-2.54 1.085-4.76 2.577-6.66 4.478-1.9 1.9-3.392 4.12-4.478 6.66-1.085 2.54-1.629 5.264-1.629 8.172h3.49c0-4.863 1.648-8.986 4.944-12.372 3.297-3.385 7.368-5.078 12.216-5.078h1.279l-4.245 4.247 2.443 2.442 8.55-8.55zm-9.52 21.45v4.42h4.871V142h4.513v-23.55zm18.136 0c-1.125 0-2.066.377-2.824 1.135-.764.764-1.148 1.709-1.148 2.834v15.612c0 1.124.38 2.066 1.139 2.824.764.764 1.708 1.145 2.833 1.145h7.489c1.125 0 2.066-.378 2.824-1.136.764-.764 1.145-1.709 1.145-2.833v-15.612c0-1.125-.378-2.067-1.136-2.825-.764-.764-1.708-1.145-2.833-1.145zm.54 4.42h6.408v14.617h-6.407z"></path>\n    </symbol>\n    <symbol viewBox="0 96 48 48" id="vjs-icon-forward-30">\n      <path d="M25.549 97l-2.437 2.434 4.634 4.635H26.38c-2.97 0-5.753.555-8.347 1.664-2.594 1.109-4.861 2.633-6.802 4.574-1.94 1.94-3.465 4.207-4.574 6.802-1.109 2.594-1.664 5.377-1.664 8.347h3.565c0-4.967 1.683-9.178 5.05-12.636 3.366-3.458 7.525-5.187 12.475-5.187h1.307l-4.335 4.338 2.495 2.494 8.732-8.732zm-11.553 20.53v4.689h10.297v5.249h-6.978v4.688h6.978v5.156H13.996V142h10.808c1.06 0 1.948-.395 2.666-1.186.718-.79 1.077-1.771 1.077-2.94v-16.217c0-1.169-.36-2.15-1.077-2.94-.718-.79-1.605-1.186-2.666-1.186zm21.174.168c-1.149 0-2.11.389-2.884 1.163-.78.78-1.172 1.745-1.172 2.894v15.942c0 1.15.388 2.11 1.162 2.885.78.78 1.745 1.17 2.894 1.17h7.649c1.149 0 2.11-.386 2.885-1.16.78-.78 1.17-1.746 1.17-2.895v-15.942c0-1.15-.387-2.11-1.161-2.885-.78-.78-1.745-1.172-2.894-1.172zm.552 4.516h6.542v14.931h-6.542z"></path>\n    </symbol>\n    <symbol viewBox="0 0 512 512" id="vjs-icon-audio-description">\n      <g fill-rule="evenodd"><path d="M227.29 381.351V162.993c50.38-1.017 89.108-3.028 117.631 17.126 27.374 19.342 48.734 56.965 44.89 105.325-4.067 51.155-41.335 94.139-89.776 98.475-24.085 2.155-71.972 0-71.972 0s-.84-1.352-.773-2.568m48.755-54.804c31.43 1.26 53.208-16.633 56.495-45.386 4.403-38.51-21.188-63.552-58.041-60.796v103.612c-.036 1.466.575 2.22 1.546 2.57"></path><path d="M383.78 381.328c13.336 3.71 17.387-11.06 23.215-21.408 12.722-22.571 22.294-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.226 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894"></path><path d="M425.154 381.328c13.336 3.71 17.384-11.061 23.215-21.408 12.721-22.571 22.291-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.511c-.586 3.874 2.226 7.315 3.866 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894"></path><path d="M466.26 381.328c13.337 3.71 17.385-11.061 23.216-21.408 12.722-22.571 22.292-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.225 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894M4.477 383.005H72.58l18.573-28.484 64.169-.135s.065 19.413.065 28.62h48.756V160.307h-58.816c-5.653 9.537-140.85 222.697-140.85 222.697zm152.667-145.282v71.158l-40.453-.27 40.453-70.888z"></path></g>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-next-item">\n      <path d="M12 36l17-12-17-12v24zm20-24v24h4V12h-4z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-previous-item">\n      <path d="M12 12h4v24h-4zm7 12l17 12V12z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-shuffle">\n      <path d="M21.17 18.34L10.83 8 8 10.83l10.34 10.34 2.83-2.83zM29 8l4.09 4.09L8 37.17 10.83 40l25.09-25.09L40 19V8H29zm.66 18.83l-2.83 2.83 6.26 6.26L29 40h11V29l-4.09 4.09-6.25-6.26z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-cast">\n      <path d="M42 6H6c-2.21 0-4 1.79-4 4v6h4v-6h36v28H28v4h14c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4zM2 36v6h6c0-3.31-2.69-6-6-6zm0-8v4c5.52 0 10 4.48 10 10h4c0-7.73-6.27-14-14-14zm0-8v4c9.94 0 18 8.06 18 18h4c0-12.15-9.85-22-22-22z"></path>\n    </symbol>\n    <symbol viewBox="0 0 48 48" id="vjs-icon-picture-in-picture-enter">\n      <path d="M38 22H22v11.99h16V22zm8 16V9.96C46 7.76 44.2 6 42 6H6C3.8 6 2 7.76 2 9.96V38c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4zm-4 .04H6V9.94h36v28.1z"></path>\n    </symbol>\n    <symbol viewBox="0 0 22 18" id="vjs-icon-picture-in-picture-exit">\n      <path d="M18 4H4v10h14V4zm4 12V1.98C22 .88 21.1 0 20 0H2C.9 0 0 .88 0 1.98V16c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H2V1.97h18v14.05z"></path>\n      <path fill="none" d="M-1-3h24v24H-1z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-facebook">\n      <path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759H734V905H479V609h255V391q0-186 104-288.5T1115 0q147 0 228 12z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-linkedin">\n      <path d="M477 625v991H147V625h330zm21-306q1 73-50.5 122T312 490h-2q-82 0-132-49t-50-122q0-74 51.5-122.5T314 148t133 48.5T498 319zm1166 729v568h-329v-530q0-105-40.5-164.5T1168 862q-63 0-105.5 34.5T999 982q-11 30-11 81v553H659q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5T1285 602q171 0 275 113.5t104 332.5z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-twitter">\n      <path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5T1369.5 1125 1185 1335.5t-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5T285 1033q33 5 61 5 43 0 85-11-112-23-185.5-111.5T172 710v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5T884 653q-8-38-8-74 0-134 94.5-228.5T1199 256q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-tumblr">\n      <path d="M1328 1329l80 237q-23 35-111 66t-177 32q-104 2-190.5-26T787 1564t-95-106-55.5-120-16.5-118V676H452V461q72-26 129-69.5t91-90 58-102 34-99T779 12q1-5 4.5-8.5T791 0h244v424h333v252h-334v518q0 30 6.5 56t22.5 52.5 49.5 41.5 81.5 14q78-2 134-29z"></path>\n    </symbol>\n    <symbol viewBox="0 0 1792 1792" id="vjs-icon-pinterest">\n      <path d="M1664 896q0 209-103 385.5T1281.5 1561 896 1664q-111 0-218-32 59-93 78-164 9-34 54-211 20 39 73 67.5t114 28.5q121 0 216-68.5t147-188.5 52-270q0-114-59.5-214T1180 449t-255-63q-105 0-196 29t-154.5 77-109 110.5-67 129.5T377 866q0 104 40 183t117 111q30 12 38-20 2-7 8-31t8-30q6-23-11-43-51-61-51-151 0-151 104.5-259.5T904 517q151 0 235.5 82t84.5 213q0 170-68.5 289T980 1220q-61 0-98-43.5T859 1072q8-35 26.5-93.5t30-103T927 800q0-50-27-83t-77-33q-62 0-105 57t-43 142q0 73 25 122l-99 418q-17 70-13 177-206-91-333-281T128 896q0-209 103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z"></path>\n    </symbol>\n  </defs>\n</svg>',"image/svg+xml")).querySelector("parsererror")?(l.warn("Failed to load SVG Icons. Falling back to Font Icons."),this.options_.experimentalSvgIcons=null):((s=i.documentElement).style.display="none",this.el_.appendChild(s),this.addClass("vjs-svg-icons-enabled"))),this.initChildren(),this.isAudio("audio"===e.nodeName.toLowerCase()),this.controls()?this.addClass("vjs-controls-enabled"):this.addClass("vjs-controls-disabled"),this.el_.setAttribute("role","region"),this.isAudio()?this.el_.setAttribute("aria-label",this.localize("Audio Player")):this.el_.setAttribute("aria-label",this.localize("Video Player")),this.isAudio()&&this.addClass("vjs-audio"),_e&&this.addClass("vjs-touch-enabled"),c||this.addClass("vjs-workinghover"),b.players[this.id_]=this,M.split(".")[0]);this.addClass("vjs-v"+i),this.userActive(!0),this.reportUserActivity(),this.one("play",e=>this.listenForUserActivity_(e)),this.on("keydown",e=>this.handleKeyDown(e)),this.on("languagechange",e=>this.handleLanguagechange(e)),this.breakpoints(this.options_.breakpoints),this.responsive(this.options_.responsive),this.on("ready",()=>{this.audioPosterMode(this.options_.audioPosterMode),this.audioOnlyMode(this.options_.audioOnlyMode)})}dispose(){var e;this.trigger("dispose"),this.off("dispose"),p(document,this.fsApi_.fullscreenchange,this.boundDocumentFullscreenChange_),p(document,"keydown",this.boundFullWindowOnEscKey_),this.styleEl_&&this.styleEl_.parentNode&&(this.styleEl_.parentNode.removeChild(this.styleEl_),this.styleEl_=null),b.players[this.id_]=null,this.tag&&this.tag.player&&(this.tag.player=null),this.el_&&this.el_.player&&(this.el_.player=null),this.tech_&&(this.tech_.dispose(),this.isPosterFromTech_=!1,this.poster_=""),this.playerElIngest_&&(this.playerElIngest_=null),this.tag&&(this.tag=null),e=this,gs[e.id()]=null,a.names.forEach(e=>{e=this[a[e].getterName]();e&&e.off&&e.off()}),super.dispose({restoreEl:this.options_.restoreEl})}createEl(){let t=this.tag,i,e=this.playerElIngest_=t.parentNode&&t.parentNode.hasAttribute&&t.parentNode.hasAttribute("data-vjs-player");const s="video-js"===this.tag.tagName.toLowerCase(),r=(e?i=this.el_=t.parentNode:s||(i=this.el_=super.createEl("div")),Re(t));if(s){for(i=this.el_=t,t=this.tag=document.createElement("video");i.children.length;)t.appendChild(i.firstChild);Ae(i,"video-js")||De(i,"video-js"),i.appendChild(t),e=this.playerElIngest_=i,Object.keys(i).forEach(e=>{try{t[e]=i[e]}catch(e){}})}t.setAttribute("tabindex","-1"),r.tabindex="-1",oe&&ce&&(t.setAttribute("role","application"),r.role="application"),t.removeAttribute("width"),t.removeAttribute("height"),"width"in r&&delete r.width,"height"in r&&delete r.height,Object.getOwnPropertyNames(r).forEach(function(e){s&&"class"===e||i.setAttribute(e,r[e]),s&&t.setAttribute(e,r[e])}),t.playerId=t.id,t.id+="_html5_api",t.className="vjs-tech",(t.player=i.player=this).addClass("vjs-paused");var n,a=["IS_SMART_TV","IS_TIZEN","IS_WEBOS","IS_ANDROID","IS_IPAD","IS_IPHONE"].filter(e=>Te[e]).map(e=>"vjs-device-"+e.substring(3).toLowerCase().replace(/\_/g,"-")),o=(this.addClass(...a),!0!==window.VIDEOJS_NO_DYNAMIC_STYLE&&(this.styleEl_=nt("vjs-styles-dimensions"),a=Ke(".vjs-styles-defaults"),(n=Ke("head")).insertBefore(this.styleEl_,a?a.nextSibling:n.firstChild)),this.fill_=!1,this.fluid_=!1,this.width(this.options_.width),this.height(this.options_.height),this.fill(this.options_.fill),this.fluid(this.options_.fluid),this.aspectRatio(this.options_.aspectRatio),this.crossOrigin(this.options_.crossOrigin||this.options_.crossorigin),t.getElementsByTagName("a"));for(let e=0;e<o.length;e++){var l=o.item(e);De(l,"vjs-hidden"),l.setAttribute("hidden","hidden")}return t.initNetworkState_=t.networkState,t.parentNode&&!e&&t.parentNode.insertBefore(i,t),Ie(t,i),this.children_.unshift(t),this.el_.setAttribute("lang",this.language_),this.el_.setAttribute("translate","no"),this.el_=i}crossOrigin(e){if("undefined"==typeof e)return this.techGet_("crossOrigin");null!==e&&"anonymous"!==e&&"use-credentials"!==e?l.warn(`crossOrigin must be null,  "anonymous" or "use-credentials", given "${e}"`):(this.techCall_("setCrossOrigin",e),this.posterImage&&this.posterImage.crossOrigin(e))}width(e){return this.dimension("width",e)}height(e){return this.dimension("height",e)}dimension(e,t){var i,s=e+"_";if(void 0===t)return this[s]||0;""===t||"auto"===t?(this[s]=void 0,this.updateStyleEl_()):(i=parseFloat(t),isNaN(i)?l.error(`Improper value "${t}" supplied for for `+e):(this[s]=i,this.updateStyleEl_()))}fluid(e){if(void 0===e)return!!this.fluid_;var t;this.fluid_=!!e,wt(this)&&this.off(["playerreset","resize"],this.boundUpdateStyleEl_),e?(this.addClass("vjs-fluid"),this.fill(!1),e=this,t=()=>{this.on(["playerreset","resize"],this.boundUpdateStyleEl_)},wt(e)?t():(e.eventedCallbacks||(e.eventedCallbacks=[]),e.eventedCallbacks.push(t))):this.removeClass("vjs-fluid"),this.updateStyleEl_()}fill(e){if(void 0===e)return!!this.fill_;this.fill_=!!e,e?(this.addClass("vjs-fill"),this.fluid(!1)):this.removeClass("vjs-fill")}aspectRatio(e){if(void 0===e)return this.aspectRatio_;if(!/^\d+\:\d+$/.test(e))throw new Error("Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.");this.aspectRatio_=e,this.fluid(!0),this.updateStyleEl_()}updateStyleEl_(){if(!0===window.VIDEOJS_NO_DYNAMIC_STYLE){const e="number"==typeof this.width_?this.width_:this.options_.width,t="number"==typeof this.height_?this.height_:this.options_.height;var r=this.tech_&&this.tech_.el();void(r&&(0<=e&&(r.width=e),0<=t)&&(r.height=t))}else{let e,t,i,s;r=(i=void 0!==this.aspectRatio_&&"auto"!==this.aspectRatio_?this.aspectRatio_:0<this.videoWidth()?this.videoWidth()+":"+this.videoHeight():"16:9").split(":"),r=r[1]/r[0];e=void 0!==this.width_?this.width_:void 0!==this.height_?this.height_/r:this.videoWidth()||300,t=void 0!==this.height_?this.height_:e*r,s=/^[^a-zA-Z]/.test(this.id())?"dimensions-"+this.id():this.id()+"-dimensions",this.addClass(s),at(this.styleEl_,`
+      .${s} {
+        width: ${e}px;
+        height: ${t}px;
+      }
+
+      .${s}.vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: ${100*r}%;
+      }
+    `)}}loadTech_(e,t){this.tech_&&this.unloadTech_();var i=g(e),s=e.charAt(0).toLowerCase()+e.slice(1);"Html5"!==i&&this.tag&&(_.getTech("Html5").disposeMediaElement(this.tag),this.tag.player=null,this.tag=null),this.techName_=i,this.isReady_=!1;let r=this.autoplay();const n={source:t,autoplay:r="string"==typeof this.autoplay()||!0===this.autoplay()&&this.options_.normalizeAutoplay?!1:r,nativeControlsForTouch:this.options_.nativeControlsForTouch,playerId:this.id(),techId:this.id()+`_${s}_api`,playsinline:this.options_.playsinline,preload:this.options_.preload,loop:this.options_.loop,disablePictureInPicture:this.options_.disablePictureInPicture,muted:this.options_.muted,poster:this.poster(),language:this.language(),playerElIngest:this.playerElIngest_||!1,"vtt.js":this.options_["vtt.js"],canOverridePoster:!!this.options_.techCanOverridePoster,enableSourceset:this.options_.enableSourceset};a.names.forEach(e=>{e=a[e];n[e.getterName]=this[e.privateName]}),Object.assign(n,this.options_[i]),Object.assign(n,this.options_[s]),Object.assign(n,this.options_[e.toLowerCase()]),this.tag&&(n.tag=this.tag),t&&t.src===this.cache_.src&&0<this.cache_.currentTime&&(n.startTime=this.cache_.currentTime);s=_.getTech(e);if(!s)throw new Error(`No Tech named '${i}' exists! '${i}' should be registered using videojs.registerTech()'`);this.tech_=new s(n),this.tech_.ready(m(this,this.handleTechReady_),!0),Zt(this.textTracksJson_||[],this.tech_),nn.forEach(t=>{this.on(this.tech_,t,e=>this[`handleTech${g(t)}_`](e))}),Object.keys(an).forEach(t=>{this.on(this.tech_,t,e=>{0===this.tech_.playbackRate()&&this.tech_.seeking()?this.queuedCallbacks_.push({callback:this[`handleTech${an[t]}_`].bind(this),event:e}):this[`handleTech${an[t]}_`](e)})}),this.on(this.tech_,"loadstart",e=>this.handleTechLoadStart_(e)),this.on(this.tech_,"sourceset",e=>this.handleTechSourceset_(e)),this.on(this.tech_,"waiting",e=>this.handleTechWaiting_(e)),this.on(this.tech_,"ended",e=>this.handleTechEnded_(e)),this.on(this.tech_,"seeking",e=>this.handleTechSeeking_(e)),this.on(this.tech_,"play",e=>this.handleTechPlay_(e)),this.on(this.tech_,"pause",e=>this.handleTechPause_(e)),this.on(this.tech_,"durationchange",e=>this.handleTechDurationChange_(e)),this.on(this.tech_,"fullscreenchange",(e,t)=>this.handleTechFullscreenChange_(e,t)),this.on(this.tech_,"fullscreenerror",(e,t)=>this.handleTechFullscreenError_(e,t)),this.on(this.tech_,"enterpictureinpicture",e=>this.handleTechEnterPictureInPicture_(e)),this.on(this.tech_,"leavepictureinpicture",e=>this.handleTechLeavePictureInPicture_(e)),this.on(this.tech_,"error",e=>this.handleTechError_(e)),this.on(this.tech_,"posterchange",e=>this.handleTechPosterChange_(e)),this.on(this.tech_,"textdata",e=>this.handleTechTextData_(e)),this.on(this.tech_,"ratechange",e=>this.handleTechRateChange_(e)),this.on(this.tech_,"loadedmetadata",this.boundUpdateStyleEl_),this.usingNativeControls(this.techGet_("controls")),this.controls()&&!this.usingNativeControls()&&this.addTechControlsListeners_(),this.tech_.el().parentNode===this.el()||"Html5"===i&&this.tag||Ie(this.tech_.el(),this.el()),this.tag&&(this.tag.player=null,this.tag=null)}unloadTech_(){a.names.forEach(e=>{e=a[e];this[e.privateName]=this[e.getterName]()}),this.textTracksJson_=Jt(this.tech_),this.isReady_=!1,this.tech_.dispose(),this.tech_=!1,this.isPosterFromTech_&&(this.poster_="",this.trigger("posterchange")),this.isPosterFromTech_=!1}tech(e){return void 0===e&&l.warn("Using the tech directly can be dangerous. I hope you know what you're doing.\nSee https://github.com/videojs/video.js/issues/2617 for more info.\n"),this.tech_}version(){return{"video.js":M}}addTechControlsListeners_(){this.removeTechControlsListeners_(),this.on(this.tech_,"click",this.boundHandleTechClick_),this.on(this.tech_,"dblclick",this.boundHandleTechDoubleClick_),this.on(this.tech_,"touchstart",this.boundHandleTechTouchStart_),this.on(this.tech_,"touchmove",this.boundHandleTechTouchMove_),this.on(this.tech_,"touchend",this.boundHandleTechTouchEnd_),this.on(this.tech_,"tap",this.boundHandleTechTap_)}removeTechControlsListeners_(){this.off(this.tech_,"tap",this.boundHandleTechTap_),this.off(this.tech_,"touchstart",this.boundHandleTechTouchStart_),this.off(this.tech_,"touchmove",this.boundHandleTechTouchMove_),this.off(this.tech_,"touchend",this.boundHandleTechTouchEnd_),this.off(this.tech_,"click",this.boundHandleTechClick_),this.off(this.tech_,"dblclick",this.boundHandleTechDoubleClick_)}handleTechReady_(){this.triggerReady(),this.cache_.volume&&this.techCall_("setVolume",this.cache_.volume),this.handleTechPosterChange_(),this.handleTechDurationChange_()}handleTechLoadStart_(){this.removeClass("vjs-ended","vjs-seeking"),this.error(null),this.handleTechDurationChange_(),this.paused()&&this.hasStarted(!1),this.trigger("loadstart"),this.manualAutoplay_(!0===this.autoplay()&&this.options_.normalizeAutoplay?"play":this.autoplay())}manualAutoplay_(t){if(this.tech_&&"string"==typeof t){var i=()=>{const e=this.muted(),t=(this.muted(!0),()=>{this.muted(e)});this.playTerminatedQueue_.push(t);var i=this.play();if(Kt(i))return i.catch(e=>{throw t(),new Error("Rejection at manualAutoplay. Restoring muted value. "+(e||""))})};let e;if("any"!==t||this.muted()?e="muted"!==t||this.muted()?this.play():i():Kt(e=this.play())&&(e=e.catch(i)),Kt(e))return e.then(()=>{this.trigger({type:"autoplay-success",autoplay:t})}).catch(()=>{this.trigger({type:"autoplay-failure",autoplay:t})})}}updateSourceCaches_(e=""){let t=e,i="";"string"!=typeof t&&(t=e.src,i=e.type),this.cache_.source=this.cache_.source||{},this.cache_.sources=this.cache_.sources||[],t&&!i&&(i=((e,t)=>{if(!t)return"";if(e.cache_.source.src===t&&e.cache_.source.type)return e.cache_.source.type;var i=e.cache_.sources.filter(e=>e.src===t);if(i.length)return i[0].type;var s=e.$$("source");for(let e=0;e<s.length;e++){var r=s[e];if(r.type&&r.src&&r.src===t)return r.type}return ks(t)})(this,t)),this.cache_.source=d({},e,{src:t,type:i});var e=this.cache_.sources.filter(e=>e.src&&e.src===t),s=[],r=this.$$("source"),n=[];for(let e=0;e<r.length;e++){var a=Re(r[e]);s.push(a),a.src&&a.src===t&&n.push(a.src)}n.length&&!e.length?this.cache_.sources=s:e.length||(this.cache_.sources=[this.cache_.source]),this.cache_.src=t}handleTechSourceset_(t){if(!this.changingSrc_){let e=e=>this.updateSourceCaches_(e);var i=this.currentSource().src,s=t.src;(e=!i||/^blob:/.test(i)||!/^blob:/.test(s)||this.lastSource_&&(this.lastSource_.tech===s||this.lastSource_.player===i)?e:()=>{})(s),t.src||this.tech_.any(["sourceset","loadstart"],e=>{"sourceset"!==e.type&&(e=this.techGet_("currentSrc"),this.lastSource_.tech=e,this.updateSourceCaches_(e))})}this.lastSource_={player:this.currentSource().src,tech:t.src},this.trigger({src:t.src,type:"sourceset"})}hasStarted(e){if(void 0===e)return this.hasStarted_;e!==this.hasStarted_&&(this.hasStarted_=e,this.hasStarted_?this.addClass("vjs-has-started"):this.removeClass("vjs-has-started"))}handleTechPlay_(){this.removeClass("vjs-ended","vjs-paused"),this.addClass("vjs-playing"),this.hasStarted(!0),this.trigger("play")}handleTechRateChange_(){0<this.tech_.playbackRate()&&0===this.cache_.lastPlaybackRate&&(this.queuedCallbacks_.forEach(e=>e.callback(e.event)),this.queuedCallbacks_=[]),this.cache_.lastPlaybackRate=this.tech_.playbackRate(),this.trigger("ratechange")}handleTechWaiting_(){this.addClass("vjs-waiting"),this.trigger("waiting");const e=this.currentTime(),t=()=>{e!==this.currentTime()&&(this.removeClass("vjs-waiting"),this.off("timeupdate",t))};this.on("timeupdate",t)}handleTechCanPlay_(){this.removeClass("vjs-waiting"),this.trigger("canplay")}handleTechCanPlayThrough_(){this.removeClass("vjs-waiting"),this.trigger("canplaythrough")}handleTechPlaying_(){this.removeClass("vjs-waiting"),this.trigger("playing")}handleTechSeeking_(){this.addClass("vjs-seeking"),this.trigger("seeking")}handleTechSeeked_(){this.removeClass("vjs-seeking","vjs-ended"),this.trigger("seeked")}handleTechPause_(){this.removeClass("vjs-playing"),this.addClass("vjs-paused"),this.trigger("pause")}handleTechEnded_(){this.addClass("vjs-ended"),this.removeClass("vjs-waiting"),this.options_.loop?(this.currentTime(0),this.play()):this.paused()||this.pause(),this.trigger("ended")}handleTechDurationChange_(){this.duration(this.techGet_("duration"))}handleTechClick_(e){!this.controls_||void 0!==this.options_&&void 0!==this.options_.userActions&&void 0!==this.options_.userActions.click&&!1===this.options_.userActions.click||(void 0!==this.options_&&void 0!==this.options_.userActions&&"function"==typeof this.options_.userActions.click?this.options_.userActions.click.call(this,e):this.paused()?Yt(this.play()):this.pause())}handleTechDoubleClick_(t){!this.controls_||Array.prototype.some.call(this.$$(".vjs-control-bar, .vjs-modal-dialog"),e=>e.contains(t.target))||void 0!==this.options_&&void 0!==this.options_.userActions&&void 0!==this.options_.userActions.doubleClick&&!1===this.options_.userActions.doubleClick||(void 0!==this.options_&&void 0!==this.options_.userActions&&"function"==typeof this.options_.userActions.doubleClick?this.options_.userActions.doubleClick.call(this,t):this.isFullscreen()?this.exitFullscreen():this.requestFullscreen())}handleTechTap_(){this.userActive(!this.userActive())}handleTechTouchStart_(){this.userWasActive=this.userActive()}handleTechTouchMove_(){this.userWasActive&&this.reportUserActivity()}handleTechTouchEnd_(e){e.cancelable&&e.preventDefault()}toggleFullscreenClass_(){this.isFullscreen()?this.addClass("vjs-fullscreen"):this.removeClass("vjs-fullscreen")}documentFullscreenChange_(t){t=t.target.player;if(!t||t===this){t=this.el();let e=document[this.fsApi_.fullscreenElement]===t;!e&&t.matches&&(e=t.matches(":"+this.fsApi_.fullscreen)),this.isFullscreen(e)}}handleTechFullscreenChange_(e,t){t&&(t.nativeIOSFullscreen&&(this.addClass("vjs-ios-native-fs"),this.tech_.one("webkitendfullscreen",()=>{this.removeClass("vjs-ios-native-fs")})),this.isFullscreen(t.isFullscreen))}handleTechFullscreenError_(e,t){this.trigger("fullscreenerror",t)}togglePictureInPictureClass_(){this.isInPictureInPicture()?this.addClass("vjs-picture-in-picture"):this.removeClass("vjs-picture-in-picture")}handleTechEnterPictureInPicture_(e){this.isInPictureInPicture(!0)}handleTechLeavePictureInPicture_(e){this.isInPictureInPicture(!1)}handleTechError_(){var e=this.tech_.error();e&&this.error(e)}handleTechTextData_(){let e=1<arguments.length?arguments[1]:null;this.trigger("textdata",e)}getCache(){return this.cache_}resetCache_(){this.cache_={currentTime:0,initTime:0,inactivityTimeout:this.options_.inactivityTimeout,duration:NaN,lastVolume:1,lastPlaybackRate:this.defaultPlaybackRate(),media:null,src:"",source:{},sources:[],playbackRates:[],volume:1}}techCall_(t,i){this.ready(function(){if(t in bs)return e=this.middleware_,this.tech_[t](e.reduce(Ss(t),i));if(t in Ts)return _s(this.middleware_,this.tech_,t,i);var e;try{this.tech_&&this.tech_[t](i)}catch(e){throw l(e),e}},!0)}techGet_(t){if(this.tech_&&this.tech_.isReady_){if(t in vs)return e=this.middleware_,i=this.tech_,e.reduceRight(Ss(t),i[t]());if(t in Ts)return _s(this.middleware_,this.tech_,t);var e,i;try{return this.tech_[t]()}catch(e){throw void 0===this.tech_[t]?l(`Video.js: ${t} method not defined for ${this.techName_} playback technology.`,e):"TypeError"===e.name?(l(`Video.js: ${t} unavailable on ${this.techName_} playback technology element.`,e),this.tech_.isReady_=!1):l(e),e}}}play(){return new Promise(e=>{this.play_(e)})}play_(e=Yt){this.playCallbacks_.push(e);var t,e=Boolean(!this.changingSrc_&&(this.src()||this.currentSrc())),i=Boolean(be||c);this.waitToPlay_&&(this.off(["ready","loadstart"],this.waitToPlay_),this.waitToPlay_=null),this.isReady_&&e?(t=this.techGet_("play"),i&&this.hasClass("vjs-ended")&&this.resetProgressBar_(),null===t?this.runPlayTerminatedQueue_():this.runPlayCallbacks_(t)):(this.waitToPlay_=e=>{this.play_()},this.one(["ready","loadstart"],this.waitToPlay_),!e&&i&&this.load())}runPlayTerminatedQueue_(){var e=this.playTerminatedQueue_.slice(0);this.playTerminatedQueue_=[],e.forEach(function(e){e()})}runPlayCallbacks_(t){var e=this.playCallbacks_.slice(0);this.playCallbacks_=[],this.playTerminatedQueue_=[],e.forEach(function(e){e(t)})}pause(){this.techCall_("pause")}paused(){return!1!==this.techGet_("paused")}played(){return this.techGet_("played")||qt(0,0)}scrubbing(e){if("undefined"==typeof e)return this.scrubbing_;this.scrubbing_=!!e,this.techCall_("setScrubbing",this.scrubbing_),e?this.addClass("vjs-scrubbing"):this.removeClass("vjs-scrubbing")}currentTime(e){if(void 0===e)return this.cache_.currentTime=this.techGet_("currentTime")||0,this.cache_.currentTime;e<0&&(e=0),this.isReady_&&!this.changingSrc_&&this.tech_&&this.tech_.isReady_?(this.techCall_("setCurrentTime",e),this.cache_.initTime=0,isFinite(e)&&(this.cache_.currentTime=Number(e))):(this.cache_.initTime=e,this.off("canplay",this.boundApplyInitTime_),this.one("canplay",this.boundApplyInitTime_))}applyInitTime_(){this.currentTime(this.cache_.initTime)}duration(e){if(void 0===e)return void 0!==this.cache_.duration?this.cache_.duration:NaN;(e=(e=parseFloat(e))<0?1/0:e)!==this.cache_.duration&&((this.cache_.duration=e)===1/0?this.addClass("vjs-live"):this.removeClass("vjs-live"),isNaN(e)||this.trigger("durationchange"))}remainingTime(){return this.duration()-this.currentTime()}remainingTimeDisplay(){return Math.floor(this.duration())-Math.floor(this.currentTime())}buffered(){let e=this.techGet_("buffered");return e=e&&e.length?e:qt(0,0)}seekable(){let e=this.techGet_("seekable");return e=e&&e.length?e:qt(0,0)}seeking(){return this.techGet_("seeking")}ended(){return this.techGet_("ended")}networkState(){return this.techGet_("networkState")}readyState(){return this.techGet_("readyState")}bufferedPercent(){return Gt(this.buffered(),this.duration())}bufferedEnd(){var e=this.buffered(),t=this.duration();let i=e.end(e.length-1);return i=i>t?t:i}volume(e){let t;if(void 0===e)return t=parseFloat(this.techGet_("volume")),isNaN(t)?1:t;t=Math.max(0,Math.min(1,e)),this.cache_.volume=t,this.techCall_("setVolume",t),0<t&&this.lastVolume_(t)}muted(e){if(void 0===e)return this.techGet_("muted")||!1;this.techCall_("setMuted",e)}defaultMuted(e){return void 0!==e&&this.techCall_("setDefaultMuted",e),this.techGet_("defaultMuted")||!1}lastVolume_(e){if(void 0===e||0===e)return this.cache_.lastVolume;this.cache_.lastVolume=e}supportsFullScreen(){return this.techGet_("supportsFullScreen")||!1}isFullscreen(e){var t;if(void 0===e)return this.isFullscreen_;t=this.isFullscreen_,this.isFullscreen_=Boolean(e),this.isFullscreen_!==t&&this.fsApi_.prefixed&&this.trigger("fullscreenchange"),this.toggleFullscreenClass_()}requestFullscreen(a){this.isInPictureInPicture()&&this.exitPictureInPicture();const o=this;return new Promise((e,i)=>{function s(){o.off("fullscreenerror",r),o.off("fullscreenchange",t)}function t(){s(),e()}function r(e,t){s(),i(t)}o.one("fullscreenchange",t),o.one("fullscreenerror",r);var n=o.requestFullscreenHelper_(a);n&&(n.then(s,s),n.then(e,i))})}requestFullscreenHelper_(e){let t;if(this.fsApi_.prefixed||(t=this.options_.fullscreen&&this.options_.fullscreen.options||{},void 0!==e&&(t=e)),this.fsApi_.requestFullscreen)return(e=this.el_[this.fsApi_.requestFullscreen](t))&&e.then(()=>this.isFullscreen(!0),()=>this.isFullscreen(!1)),e;this.tech_.supportsFullScreen()&&!0==!this.options_.preferFullWindow?this.techCall_("enterFullScreen"):this.enterFullWindow()}exitFullscreen(){const a=this;return new Promise((e,i)=>{function s(){a.off("fullscreenerror",r),a.off("fullscreenchange",t)}function t(){s(),e()}function r(e,t){s(),i(t)}a.one("fullscreenchange",t),a.one("fullscreenerror",r);var n=a.exitFullscreenHelper_();n&&(n.then(s,s),n.then(e,i))})}exitFullscreenHelper_(){var e;if(this.fsApi_.requestFullscreen)return(e=document[this.fsApi_.exitFullscreen]())&&Yt(e.then(()=>this.isFullscreen(!1))),e;this.tech_.supportsFullScreen()&&!0==!this.options_.preferFullWindow?this.techCall_("exitFullScreen"):this.exitFullWindow()}enterFullWindow(){this.isFullscreen(!0),this.isFullWindow=!0,this.docOrigOverflow=document.documentElement.style.overflow,pt(document,"keydown",this.boundFullWindowOnEscKey_),document.documentElement.style.overflow="hidden",De(document.body,"vjs-full-window"),this.trigger("enterFullWindow")}fullWindowOnEscKey(e){r.isEventKey(e,"Esc")&&!0===this.isFullscreen()&&(this.isFullWindow?this.exitFullWindow():this.exitFullscreen())}exitFullWindow(){this.isFullscreen(!1),this.isFullWindow=!1,p(document,"keydown",this.boundFullWindowOnEscKey_),document.documentElement.style.overflow=this.docOrigOverflow,Pe(document.body,"vjs-full-window"),this.trigger("exitFullWindow")}disablePictureInPicture(e){if(void 0===e)return this.techGet_("disablePictureInPicture");this.techCall_("setDisablePictureInPicture",e),this.options_.disablePictureInPicture=e,this.trigger("disablepictureinpicturechanged")}isInPictureInPicture(e){if(void 0===e)return!!this.isInPictureInPicture_;this.isInPictureInPicture_=!!e,this.togglePictureInPictureClass_()}requestPictureInPicture(){if(this.options_.enableDocumentPictureInPicture&&window.documentPictureInPicture){const t=document.createElement(this.el().tagName);return t.classList=this.el().classList,t.classList.add("vjs-pip-container"),this.posterImage&&t.appendChild(this.posterImage.el().cloneNode(!0)),this.titleBar&&t.appendChild(this.titleBar.el().cloneNode(!0)),t.appendChild(o("p",{className:"vjs-pip-text"},{},this.localize("Playing in picture-in-picture"))),window.documentPictureInPicture.requestWindow({width:this.videoWidth(),height:this.videoHeight()}).then(e=>(Je(e),this.el_.parentNode.insertBefore(t,this.el_),e.document.body.appendChild(this.el_),e.document.body.classList.add("vjs-pip-window"),this.player_.isInPictureInPicture(!0),this.player_.trigger({type:"enterpictureinpicture",pipWindow:e}),e.addEventListener("pagehide",e=>{e=e.target.querySelector(".video-js");t.parentNode.replaceChild(e,t),this.player_.isInPictureInPicture(!1),this.player_.trigger("leavepictureinpicture")}),e))}return"pictureInPictureEnabled"in document&&!1===this.disablePictureInPicture()?this.techGet_("requestPictureInPicture"):Promise.reject("No PiP mode is available")}exitPictureInPicture(){return window.documentPictureInPicture&&window.documentPictureInPicture.window?(window.documentPictureInPicture.window.close(),Promise.resolve()):"pictureInPictureEnabled"in document?document.exitPictureInPicture():void 0}handleKeyDown(e){var t,i,s=this.options_["userActions"];s&&s.hotkeys&&(t=this.el_.ownerDocument.activeElement,i=t.tagName.toLowerCase(),t.isContentEditable||("input"===i?-1===["button","checkbox","hidden","radio","reset","submit"].indexOf(t.type):-1!==["textarea"].indexOf(i))||("function"==typeof s.hotkeys?s.hotkeys.call(this,e):this.handleHotkeys(e)))}handleHotkeys(e){var{fullscreenKey:t=e=>r.isEventKey(e,"f"),muteKey:i=e=>r.isEventKey(e,"m"),playPauseKey:s=e=>r.isEventKey(e,"k")||r.isEventKey(e,"Space")}=this.options_.userActions?this.options_.userActions.hotkeys:{};t.call(this,e)?(e.preventDefault(),e.stopPropagation(),t=f.getComponent("FullscreenToggle"),!1!==document[this.fsApi_.fullscreenEnabled]&&t.prototype.handleClick.call(this,e)):i.call(this,e)?(e.preventDefault(),e.stopPropagation(),f.getComponent("MuteToggle").prototype.handleClick.call(this,e)):s.call(this,e)&&(e.preventDefault(),e.stopPropagation(),f.getComponent("PlayToggle").prototype.handleClick.call(this,e))}canPlayType(s){var r;for(let t=0,i=this.options_.techOrder;t<i.length;t++){var n=i[t];let e=_.getTech(n);if(e=e||f.getComponent(n)){if(e.isSupported()&&(r=e.canPlayType(s)))return r}else l.error(`The "${n}" tech is undefined. Skipped browser support check for that tech.`)}return""}selectSource(e){function t(e,i,s){let r;return e.some(t=>i.some(e=>{if(r=s(t,e))return!0})),r}var i=this.options_.techOrder.map(e=>[e,_.getTech(e)]).filter(([e,t])=>t?t.isSupported():(l.error(`The "${e}" tech is undefined. Skipped browser support check for that tech.`),!1));let s;var r,n=([e,t],i)=>{if(t.canPlaySource(i,this.options_[e.toLowerCase()]))return{source:i,tech:e}};return(s=this.options_.sourceOrder?t(e,i,(r=n,(e,t)=>r(t,e))):t(i,e,n))||!1}handleSrc_(e,s){if("undefined"==typeof e)return this.cache_.src||"";this.resetRetryOnError_&&this.resetRetryOnError_();const r=Es(e);if(r.length){if(this.changingSrc_=!0,s||(this.cache_.sources=r),this.updateSourceCaches_(r[0]),ys(this,r[0],(e,t)=>{var i;if(this.middleware_=t,s||(this.cache_.sources=r),this.updateSourceCaches_(e),this.src_(e))return 1<r.length?this.handleSrc_(r.slice(1)):(this.changingSrc_=!1,this.setTimeout(function(){this.error({code:4,message:this.options_.notSupportedMessage})},0),void this.triggerReady());i=this.tech_,t.forEach(e=>e.setTech&&e.setTech(i))}),1<r.length){const t=()=>{this.error(null),this.handleSrc_(r.slice(1),!0)},i=()=>{this.off("error",t)};this.one("error",t),this.one("playing",i),this.resetRetryOnError_=()=>{this.off("error",t),this.off("playing",i)}}}else this.setTimeout(function(){this.error({code:4,message:this.options_.notSupportedMessage})},0)}src(e){return this.handleSrc_(e,!1)}src_(e){var t=this.selectSource([e]);return!t||(Nt(t.tech,this.techName_)?this.ready(function(){this.tech_.constructor.prototype.hasOwnProperty("setSource")?this.techCall_("setSource",e):this.techCall_("src",e.src),this.changingSrc_=!1},!0):(this.changingSrc_=!0,this.loadTech_(t.tech,t.source),this.tech_.ready(()=>{this.changingSrc_=!1})),!1)}load(){this.tech_&&this.tech_.vhs?this.src(this.currentSource()):this.techCall_("load")}reset(){this.paused()?this.doReset_():Yt(this.play().then(()=>this.doReset_()))}doReset_(){this.tech_&&this.tech_.clearTracks("text"),this.removeClass("vjs-playing"),this.addClass("vjs-paused"),this.resetCache_(),this.poster(""),this.loadTech_(this.options_.techOrder[0],null),this.techCall_("reset"),this.resetControlBarUI_(),this.error(null),this.titleBar&&this.titleBar.update({title:void 0,description:void 0}),wt(this)&&this.trigger("playerreset")}resetControlBarUI_(){this.resetProgressBar_(),this.resetPlaybackRate_(),this.resetVolumeBar_()}resetProgressBar_(){this.currentTime(0);var{currentTimeDisplay:e,durationDisplay:t,progressControl:i,remainingTimeDisplay:s}=this.controlBar||{},i=(i||{})["seekBar"];e&&e.updateContent(),t&&t.updateContent(),s&&s.updateContent(),i&&(i.update(),i.loadProgressBar)&&i.loadProgressBar.update()}resetPlaybackRate_(){this.playbackRate(this.defaultPlaybackRate()),this.handleTechRateChange_()}resetVolumeBar_(){this.volume(1),this.trigger("volumechange")}currentSources(){var e=this.currentSource(),t=[];return 0!==Object.keys(e).length&&t.push(e),this.cache_.sources||t}currentSource(){return this.cache_.source||{}}currentSrc(){return this.currentSource()&&this.currentSource().src||""}currentType(){return this.currentSource()&&this.currentSource().type||""}preload(e){if(void 0===e)return this.techGet_("preload");this.techCall_("setPreload",e),this.options_.preload=e}autoplay(e){if(void 0===e)return this.options_.autoplay||!1;let t;"string"==typeof e&&/(any|play|muted)/.test(e)||!0===e&&this.options_.normalizeAutoplay?(this.options_.autoplay=e,this.manualAutoplay_("string"==typeof e?e:"play"),t=!1):this.options_.autoplay=!!e,t="undefined"==typeof t?this.options_.autoplay:t,this.tech_&&this.techCall_("setAutoplay",t)}playsinline(e){return void 0!==e&&(this.techCall_("setPlaysinline",e),this.options_.playsinline=e),this.techGet_("playsinline")}loop(e){if(void 0===e)return this.techGet_("loop");this.techCall_("setLoop",e),this.options_.loop=e}poster(e){if(void 0===e)return this.poster_;(e=e||"")!==this.poster_&&(this.poster_=e,this.techCall_("setPoster",e),this.isPosterFromTech_=!1,this.trigger("posterchange"))}handleTechPosterChange_(){var e;(!this.poster_||this.options_.techCanOverridePoster)&&this.tech_&&this.tech_.poster&&(e=this.tech_.poster()||"")!==this.poster_&&(this.poster_=e,this.isPosterFromTech_=!0,this.trigger("posterchange"))}controls(e){if(void 0===e)return!!this.controls_;this.controls_!==(e=!!e)&&(this.controls_=e,this.usingNativeControls()&&this.techCall_("setControls",e),this.controls_?(this.removeClass("vjs-controls-disabled"),this.addClass("vjs-controls-enabled"),this.trigger("controlsenabled"),this.usingNativeControls()||this.addTechControlsListeners_()):(this.removeClass("vjs-controls-enabled"),this.addClass("vjs-controls-disabled"),this.trigger("controlsdisabled"),this.usingNativeControls()||this.removeTechControlsListeners_()))}usingNativeControls(e){if(void 0===e)return!!this.usingNativeControls_;this.usingNativeControls_!==(e=!!e)&&(this.usingNativeControls_=e,this.usingNativeControls_?(this.addClass("vjs-using-native-controls"),this.trigger("usingnativecontrols")):(this.removeClass("vjs-using-native-controls"),this.trigger("usingcustomcontrols")))}error(t){if(void 0===t)return this.error_||null;if(B("beforeerror").forEach(e=>{e=e(this,t);K(e)&&!Array.isArray(e)||"string"==typeof e||"number"==typeof e||null===e?t=e:this.log.error("please return a value that MediaError expects in beforeerror hooks")}),this.options_.suppressNotSupportedError&&t&&4===t.code){const e=function(){this.error(t)};this.options_.suppressNotSupportedError=!1,this.any(["click","touchstart"],e),void this.one("loadstart",function(){this.off(["click","touchstart"],e)})}else null===t?(this.error_=null,this.removeClass("vjs-error"),this.errorDisplay&&this.errorDisplay.close()):(this.error_=new i(t),this.addClass("vjs-error"),l.error(`(CODE:${this.error_.code} ${i.errorTypes[this.error_.code]})`,this.error_.message,this.error_),this.trigger("error"),B("error").forEach(e=>e(this,this.error_)))}reportUserActivity(e){this.userActivity_=!0}userActive(e){if(void 0===e)return this.userActive_;(e=!!e)!==this.userActive_&&(this.userActive_=e,this.userActive_?(this.userActivity_=!0,this.removeClass("vjs-user-inactive"),this.addClass("vjs-user-active"),this.trigger("useractive")):(this.tech_&&this.tech_.one("mousemove",function(e){e.stopPropagation(),e.preventDefault()}),this.userActivity_=!1,this.removeClass("vjs-user-active"),this.addClass("vjs-user-inactive"),this.trigger("userinactive")))}listenForUserActivity_(){let t,i,s;const r=m(this,this.reportUserActivity);function e(e){r(),this.clearInterval(t)}this.on("mousedown",function(){r(),this.clearInterval(t),t=this.setInterval(r,250)}),this.on("mousemove",function(e){e.screenX===i&&e.screenY===s||(i=e.screenX,s=e.screenY,r())}),this.on("mouseup",e),this.on("mouseleave",e);var n=this.getChild("controlBar");!n||c||ie||(n.on("mouseenter",function(e){0!==this.player().options_.inactivityTimeout&&(this.player().cache_.inactivityTimeout=this.player().options_.inactivityTimeout),this.player().options_.inactivityTimeout=0}),n.on("mouseleave",function(e){this.player().options_.inactivityTimeout=this.player().cache_.inactivityTimeout})),this.on("keydown",r),this.on("keyup",r);let a;this.setInterval(function(){var e;this.userActivity_&&(this.userActivity_=!1,this.userActive(!0),this.clearTimeout(a),(e=this.options_.inactivityTimeout)<=0||(a=this.setTimeout(function(){this.userActivity_||this.userActive(!1)},e)))},250)}playbackRate(e){if(void 0===e)return this.tech_&&this.tech_.featuresPlaybackRate?this.cache_.lastPlaybackRate||this.techGet_("playbackRate"):1;this.techCall_("setPlaybackRate",e)}defaultPlaybackRate(e){return void 0!==e?this.techCall_("setDefaultPlaybackRate",e):this.tech_&&this.tech_.featuresPlaybackRate?this.techGet_("defaultPlaybackRate"):1}isAudio(e){if(void 0===e)return!!this.isAudio_;this.isAudio_=!!e}enableAudioOnlyUI_(){this.addClass("vjs-audio-only-mode");var e=this.children();const t=this.getChild("ControlBar");var i=t&&t.currentHeight();e.forEach(e=>{e!==t&&e.el_&&!e.hasClass("vjs-hidden")&&(e.hide(),this.audioOnlyCache_.hiddenChildren.push(e))}),this.audioOnlyCache_.playerHeight=this.currentHeight(),this.height(i),this.trigger("audioonlymodechange")}disableAudioOnlyUI_(){this.removeClass("vjs-audio-only-mode"),this.audioOnlyCache_.hiddenChildren.forEach(e=>e.show()),this.height(this.audioOnlyCache_.playerHeight),this.trigger("audioonlymodechange")}audioOnlyMode(e){return"boolean"!=typeof e||e===this.audioOnlyMode_?this.audioOnlyMode_:(this.audioOnlyMode_=e)?(e=[],this.isInPictureInPicture()&&e.push(this.exitPictureInPicture()),this.isFullscreen()&&e.push(this.exitFullscreen()),this.audioPosterMode()&&e.push(this.audioPosterMode(!1)),Promise.all(e).then(()=>this.enableAudioOnlyUI_())):Promise.resolve().then(()=>this.disableAudioOnlyUI_())}enablePosterModeUI_(){(this.tech_&&this.tech_).hide(),this.addClass("vjs-audio-poster-mode"),this.trigger("audiopostermodechange")}disablePosterModeUI_(){(this.tech_&&this.tech_).show(),this.removeClass("vjs-audio-poster-mode"),this.trigger("audiopostermodechange")}audioPosterMode(e){return"boolean"!=typeof e||e===this.audioPosterMode_?this.audioPosterMode_:(this.audioPosterMode_=e)?(this.audioOnlyMode()?this.audioOnlyMode(!1):Promise.resolve()).then(()=>{this.enablePosterModeUI_()}):Promise.resolve().then(()=>{this.disablePosterModeUI_()})}addTextTrack(e,t,i){if(this.tech_)return this.tech_.addTextTrack(e,t,i)}addRemoteTextTrack(e,t){if(this.tech_)return this.tech_.addRemoteTextTrack(e,t)}removeRemoteTextTrack(e={}){let t=e["track"];if(t=t||e,this.tech_)return this.tech_.removeRemoteTextTrack(t)}getVideoPlaybackQuality(){return this.techGet_("getVideoPlaybackQuality")}videoWidth(){return this.tech_&&this.tech_.videoWidth&&this.tech_.videoWidth()||0}videoHeight(){return this.tech_&&this.tech_.videoHeight&&this.tech_.videoHeight()||0}language(e){if(void 0===e)return this.language_;this.language_!==String(e).toLowerCase()&&(this.language_=String(e).toLowerCase(),wt(this))&&this.trigger("languagechange")}languages(){return d(b.prototype.options_.languages,this.languages_)}toJSON(){var t=d(this.options_),i=t.tracks;t.tracks=[];for(let e=0;e<i.length;e++){var s=i[e];(s=d(s)).player=void 0,t.tracks[e]=s}return t}createModal(e,t){(t=t||{}).content=e||"";const i=new ti(this,t);return this.addChild(i),i.on("dispose",()=>{this.removeChild(i)}),i.open(),i}updateCurrentBreakpoint_(){if(this.responsive()){var t=this.currentBreakpoint(),i=this.currentWidth();for(let e=0;e<on.length;e++){var s=on[e];if(i<=this.breakpoints_[s]){if(t===s)return;t&&this.removeClass(ln[t]),this.addClass(ln[s]),this.breakpoint_=s;break}}}}removeCurrentBreakpoint_(){var e=this.currentBreakpointClass();this.breakpoint_="",e&&this.removeClass(e)}breakpoints(e){return void 0!==e&&(this.breakpoint_="",this.breakpoints_=Object.assign({},dn,e),this.updateCurrentBreakpoint_()),Object.assign(this.breakpoints_)}responsive(e){return void 0===e?this.responsive_:(e=Boolean(e))!==this.responsive_?((this.responsive_=e)?(this.on("playerresize",this.boundUpdateCurrentBreakpoint_),this.updateCurrentBreakpoint_()):(this.off("playerresize",this.boundUpdateCurrentBreakpoint_),this.removeCurrentBreakpoint_()),e):void 0}currentBreakpoint(){return this.breakpoint_}currentBreakpointClass(){return ln[this.breakpoint_]||""}loadMedia(e,t){var i,s,r,n,a,o,l;e&&"object"==typeof e&&(i=this.crossOrigin(),{artist:e,artwork:s,description:r,poster:n,src:a,textTracks:o,title:l}=(this.reset(),this.cache_.media=d(e),this.cache_.media),!s&&n&&(this.cache_.media.artwork=[{src:n,type:ks(n)}]),i&&this.crossOrigin(i),a&&this.src(a),n&&this.poster(n),Array.isArray(o)&&o.forEach(e=>this.addRemoteTextTrack(e,!1)),this.titleBar&&this.titleBar.update({title:l,description:r||e||""}),this.ready(t))}getMedia(){var e,t;return this.cache_.media?d(this.cache_.media):(e=this.poster(),t={src:this.currentSources(),textTracks:Array.prototype.map.call(this.remoteTextTracks(),e=>({kind:e.kind,label:e.label,language:e.language,src:e.src}))},e&&(t.poster=e,t.artwork=[{src:t.poster,type:ks(t.poster)}]),t)}static getTagSettings(e){var t,i={sources:[],tracks:[]},s=Re(e),r=s["data-setup"];if(Ae(e,"vjs-fill")&&(s.fill=!0),Ae(e,"vjs-fluid")&&(s.fluid=!0),null!==r&&([r,t]=Xt(r||"{}"),r&&l.error(r),Object.assign(s,t)),Object.assign(i,s),e.hasChildNodes()){var n=e.childNodes;for(let e=0,t=n.length;e<t;e++){var a=n[e],o=a.nodeName.toLowerCase();"source"===o?i.sources.push(Re(a)):"track"===o&&i.tracks.push(Re(a))}}return i}debug(e){if(void 0===e)return this.debugEnabled_;e?(this.trigger("debugon"),this.previousLogLevel_=this.log.level,this.log.level("debug"),this.debugEnabled_=!0):(this.trigger("debugoff"),this.log.level(this.previousLogLevel_),this.previousLogLevel_=void 0,this.debugEnabled_=!1)}playbackRates(e){if(void 0===e)return this.cache_.playbackRates;Array.isArray(e)&&e.every(e=>"number"==typeof e)&&(this.cache_.playbackRates=e,this.trigger("playbackrateschange"))}}a.names.forEach(function(e){const t=a[e];b.prototype[t.getterName]=function(){return this.tech_?this.tech_[t.getterName]():(this[t.privateName]=this[t.privateName]||new t.ListClass,this[t.privateName])}}),b.prototype.crossorigin=b.prototype.crossOrigin,b.players={};qr=window.navigator;b.prototype.options_={techOrder:_.defaultTechOrder_,html5:{},enableSourceset:!0,inactivityTimeout:2e3,playbackRates:[],liveui:!1,children:["mediaLoader","posterImage","titleBar","textTrackDisplay","loadingSpinner","bigPlayButton","liveTracker","controlBar","errorDisplay","textTrackSettings","resizeManager"],language:qr&&(qr.languages&&qr.languages[0]||qr.userLanguage||qr.language)||"en",languages:{},notSupportedMessage:"No compatible source was found for this media.",normalizeAutoplay:!1,fullscreen:{options:{navigationUI:"hide"}},breakpoints:{},responsive:!1,audioOnlyMode:!1,audioPosterMode:!1,enableSmoothSeeking:!1},nn.forEach(function(e){b.prototype[`handleTech${g(e)}_`]=function(){return this.trigger(e)}}),f.registerComponent("Player",b);function hn(t,i){function s(){yn(this,{name:t,plugin:i,instance:null},!0);var e=i.apply(this,arguments);return fn(this,t),yn(this,{name:t,plugin:i,instance:e}),e}return Object.keys(i).forEach(function(e){s[e]=i[e]}),s}const un="plugin",cn="activePlugins_",pn={},mn=e=>pn.hasOwnProperty(e),gn=e=>mn(e)?pn[e]:void 0,fn=(e,t)=>{e[cn]=e[cn]||{},e[cn][t]=!0},yn=(e,t,i)=>{i=(i?"before":"")+"pluginsetup";e.trigger(i,t),e.trigger(i+":"+t.name,t)},_n=(i,s)=>(s.prototype.name=i,function(...e){yn(this,{name:i,plugin:s,instance:null},!0);const t=new s(this,...e);return this[i]=()=>t,yn(this,t.getEventHash()),t});class vn{constructor(e){if(this.constructor===vn)throw new Error("Plugin must be sub-classed; not directly instantiated.");this.player=e,this.log||(this.log=this.player.log.createLogger(this.name)),Pt(this),delete this.trigger,Ot(this,this.constructor.defaultState),fn(e,this.name),this.dispose=this.dispose.bind(this),e.on("dispose",this.dispose)}version(){return this.constructor.VERSION}getEventHash(e={}){return e.name=this.name,e.plugin=this.constructor,e.instance=this,e}trigger(e,t={}){return mt(this.eventBusEl_,e,this.getEventHash(t))}handleStateChanged(e){}dispose(){var{name:e,player:t}=this;this.trigger("dispose"),this.off(),t.off("dispose",this.dispose),t[cn][e]=!1,this.player=this.state=null,t[e]=_n(e,pn[e])}static isBasic(e){e="string"==typeof e?gn(e):e;return"function"==typeof e&&!vn.prototype.isPrototypeOf(e.prototype)}static registerPlugin(e,t){if("string"!=typeof e)throw new Error(`Illegal plugin name, "${e}", must be a string, was ${typeof e}.`);if(mn(e))l.warn(`A plugin named "${e}" already exists. You may want to avoid re-registering plugins!`);else if(b.prototype.hasOwnProperty(e))throw new Error(`Illegal plugin name, "${e}", cannot share a name with an existing player method!`);if("function"!=typeof t)throw new Error(`Illegal plugin for "${e}", must be a function, was ${typeof t}.`);return pn[e]=t,e!==un&&(vn.isBasic(t)?b.prototype[e]=hn(e,t):b.prototype[e]=_n(e,t)),t}static deregisterPlugin(e){if(e===un)throw new Error("Cannot de-register base plugin.");mn(e)&&(delete pn[e],delete b.prototype[e])}static getPlugins(e=Object.keys(pn)){let i;return e.forEach(e=>{var t=gn(e);t&&((i=i||{})[e]=t)}),i}static getPluginVersion(e){e=gn(e);return e&&e.VERSION||""}}function bn(e,i,s,r){{var n=i+` is deprecated and will be removed in ${e}.0; please use ${s} instead.`,a=r;let t=!1;return function(...e){return t||l.warn(n),t=!0,a.apply(this,e)}}}vn.getPlugin=gn,vn.BASE_PLUGIN_NAME=un,vn.registerPlugin(un,vn),b.prototype.usingPlugin=function(e){return!!this[cn]&&!0===this[cn][e]},b.prototype.hasPlugin=function(e){return!!mn(e)};const Tn=e=>0===e.indexOf("#")?e.slice(1):e;function T(e,t,i){let s=T.getPlayer(e);if(s)t&&l.warn(`Player "${e}" is already initialised. Options will not be applied.`),i&&s.ready(i);else{const r="string"==typeof e?Ke("#"+Tn(e)):e;if(!Ee(r))throw new TypeError("The element or ID supplied is not valid. (videojs)");e="getRootNode"in r&&r.getRootNode()instanceof window.ShadowRoot?r.getRootNode():r.ownerDocument.body,e=(r.ownerDocument.defaultView&&e.contains(r)||l.warn("The element supplied is not included in the DOM"),!0===(t=t||{}).restoreEl&&(t.restoreEl=(r.parentNode&&r.parentNode.hasAttribute("data-vjs-player")?r.parentNode:r).cloneNode(!0)),B("beforesetup").forEach(e=>{e=e(r,d(t));!K(e)||Array.isArray(e)?l.error("please return an object in beforesetup hooks"):t=d(t,e)}),f.getComponent("Player"));s=new e(r,t,i),B("setup").forEach(e=>e(s))}return s}T.hooks_=U,T.hooks=B,T.hook=function(e,t){B(e,t)},T.hookOnce=function(s,e){B(s,[].concat(e).map(t=>{const i=(...e)=>(F(s,i),t(...e));return i}))},T.removeHook=F,!0!==window.VIDEOJS_NO_DYNAMIC_STYLE&&we()&&!(Fi=Ke(".vjs-styles-defaults"))&&(Fi=nt("vjs-styles-defaults"),(Fr=Ke("head"))&&Fr.insertBefore(Fi,Fr.firstChild),at(Fi,`
+      .video-js {
+        width: 300px;
+        height: 150px;
+      }
+
+      .vjs-fluid:not(.vjs-audio-only-mode) {
+        padding-top: 56.25%
+      }
+    `)),st(1,T),T.VERSION=M,T.options=b.prototype.options_,T.getPlayers=()=>b.players,T.getPlayer=e=>{var t=b.players;let i;if("string"==typeof e){var s=Tn(e),r=t[s];if(r)return r;i=Ke("#"+s)}else i=e;if(Ee(i)){var{player:r,playerId:s}=i;if(r||t[s])return r||t[s]}},T.getAllPlayers=()=>Object.keys(b.players).map(e=>b.players[e]).filter(Boolean),T.players=b.players,T.getComponent=f.getComponent,T.registerComponent=(e,t)=>(_.isTech(t)&&l.warn(`The ${e} tech was registered as a component. It should instead be registered using videojs.registerTech(name, tech)`),f.registerComponent.call(f,e,t)),T.getTech=_.getTech,T.registerTech=_.registerTech,T.use=function(e,t){ms[e]=ms[e]||[],ms[e].push(t)},Object.defineProperty(T,"middleware",{value:{},writeable:!1,enumerable:!0}),Object.defineProperty(T.middleware,"TERMINATOR",{value:fs,writeable:!1,enumerable:!0}),T.browser=Te,T.obj=Z,T.mergeOptions=bn(9,"videojs.mergeOptions","videojs.obj.merge",d),T.defineLazyProperty=bn(9,"videojs.defineLazyProperty","videojs.obj.defineLazyProperty",J),T.bind=bn(9,"videojs.bind","native Function.prototype.bind",m),T.registerPlugin=vn.registerPlugin,T.deregisterPlugin=vn.deregisterPlugin,T.plugin=(e,t)=>(l.warn("videojs.plugin() is deprecated; use videojs.registerPlugin() instead"),vn.registerPlugin(e,t)),T.getPlugins=vn.getPlugins,T.getPlugin=vn.getPlugin,T.getPluginVersion=vn.getPluginVersion,T.addLanguage=function(e,t){return e=(""+e).toLowerCase(),T.options.languages=d(T.options.languages,{[e]:t}),T.options.languages[e]},T.log=l,T.createLogger=z,T.time=Wt,T.createTimeRange=bn(9,"videojs.createTimeRange","videojs.time.createTimeRanges",qt),T.createTimeRanges=bn(9,"videojs.createTimeRanges","videojs.time.createTimeRanges",qt),T.formatTime=bn(9,"videojs.formatTime","videojs.time.formatTime",zt),T.setFormatTime=bn(9,"videojs.setFormatTime","videojs.time.setFormatTime",Vt),T.resetFormatTime=bn(9,"videojs.resetFormatTime","videojs.time.resetFormatTime",$t),T.parseUrl=bn(9,"videojs.parseUrl","videojs.url.parseUrl",ci),T.isCrossOrigin=bn(9,"videojs.isCrossOrigin","videojs.url.isCrossOrigin",mi),T.EventTarget=Tt,T.any=ft,T.on=pt,T.one=gt,T.off=p,T.trigger=mt,T.xhr=Ei,T.TextTrack=Oi,T.AudioTrack=Ri,T.VideoTrack=Ni,["isEl","isTextNode","createEl","hasClass","addClass","removeClass","toggleClass","setAttributes","getAttributes","emptyEl","appendContent","insertContent"].forEach(e=>{T[e]=function(){return l.warn(`videojs.${e}() is deprecated; use videojs.dom.${e}() instead`),Ze[e].apply(null,arguments)}}),T.computedStyle=bn(9,"videojs.computedStyle","videojs.dom.computedStyle",Qe),T.dom=Ze,T.fn=e,T.num=yi,T.str=Mt,T.url=fi,T.Error={UnsupportedSidxContainer:"unsupported-sidx-container-error",DashManifestSidxParsingError:"dash-manifest-sidx-parsing-error",HlsPlaylistRequestError:"hls-playlist-request-error",SegmentUnsupportedMediaFormat:"segment-unsupported-media-format-error",UnsupportedMediaInitialization:"unsupported-media-initialization-error",SegmentSwitchError:"segment-switch-error",SegmentExceedsSourceBufferQuota:"segment-exceeds-source-buffer-quota-error",SegmentAppendError:"segment-append-error",VttLoadError:"vtt-load-error",VttCueParsingError:"vtt-cue-parsing-error",AdsBeforePrerollError:"ads-before-preroll-error",AdsPrerollError:"ads-preroll-error",AdsMidrollError:"ads-midroll-error",AdsPostrollError:"ads-postroll-error",AdsMacroReplacementFailed:"ads-macro-replacement-failed",AdsResumeContentFailed:"ads-resume-content-failed",EMEFailedToRequestMediaKeySystemAccess:"eme-failed-request-media-key-system-access",EMEFailedToCreateMediaKeys:"eme-failed-create-media-keys",EMEFailedToAttachMediaKeysToVideoElement:"eme-failed-attach-media-keys-to-video",EMEFailedToCreateMediaKeySession:"eme-failed-create-media-key-session",EMEFailedToSetServerCertificate:"eme-failed-set-server-certificate",EMEFailedToGenerateLicenseRequest:"eme-failed-generate-license-request",EMEFailedToUpdateSessionWithReceivedLicenseKeys:"eme-failed-update-session",EMEFailedToCloseSession:"eme-failed-close-session",EMEFailedToRemoveKeysFromSession:"eme-failed-remove-keys",EMEFailedToLoadSessionBySessionId:"eme-failed-load-session"},Ut(function(e,t){
+/*! @name videojs-contrib-quality-levels @version 4.1.0 @license Apache-2.0 */
+e.exports=function(e){function t(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var i=t(e);class s{constructor(e){let t=this;t.id=e.id;t.label=t.id;t.width=e.width;t.height=e.height;t.bitrate=e.bandwidth;t.frameRate=e.frameRate;t.enabled_=e.enabled;Object.defineProperty(t,"enabled",{get(){return t.enabled_()},set(e){t.enabled_(e)}});return t}}class n extends i["default"].EventTarget{constructor(){super();let e=this;e.levels_=[];e.selectedIndex_=-1;Object.defineProperty(e,"selectedIndex",{get(){return e.selectedIndex_}});Object.defineProperty(e,"length",{get(){return e.levels_.length}});e[Symbol.iterator]=()=>e.levels_.values();return e}addQualityLevel(e){let t=this.getQualityLevelById(e.id);if(t)return t;const i=this.levels_.length;t=new s(e);if(!(""+i in this))Object.defineProperty(this,i,{get(){return this.levels_[i]}});this.levels_.push(t);this.trigger({qualityLevel:t,type:"addqualitylevel"});return t}removeQualityLevel(i){let s=null;for(let e=0,t=this.length;e<t;e++)if(this[e]===i){s=this.levels_.splice(e,1)[0];if(this.selectedIndex_===e)this.selectedIndex_=-1;else if(this.selectedIndex_>e)this.selectedIndex_--;break}if(s)this.trigger({qualityLevel:i,type:"removequalitylevel"});return s}getQualityLevelById(i){for(let e=0,t=this.length;e<t;e++){const s=this[e];if(s.id===i)return s}return null}dispose(){this.selectedIndex_=-1;this.levels_.length=0}}n.prototype.allowedEvents_={change:"change",addqualitylevel:"addqualitylevel",removequalitylevel:"removequalitylevel"};for(const l in n.prototype.allowedEvents_)n.prototype["on"+l]=null;var a="4.1.0";const r=function(e,t){const i=e.qualityLevels;const s=new n;const r=function(){s.dispose();e.qualityLevels=i;e.off("dispose",r)};e.on("dispose",r);e.qualityLevels=()=>s;e.qualityLevels.VERSION=a;return s},o=function(e){return r(this,i["default"].obj.merge({},e))};return i["default"].registerPlugin("qualityLevels",o),o.VERSION=a,o}(T)});function Sn(e,t){if(/^[a-z]+:/i.test(t))return t;/^data:/.test(e)&&(e=window.location&&window.location.href||"");var i="function"==typeof window.URL,s=/^\/\//.test(e),r=!window.location&&!/\/\//i.test(e);return i?e=new window.URL(e,window.location||En):/\/\//i.test(e)||(e=wn.buildAbsoluteURL(window.location&&window.location.href||"",e)),i?(i=new URL(t,e),r?i.href.slice(En.length):s?i.href.slice(i.protocol.length):i.href):wn.buildAbsoluteURL(e,t)}var wn=Ut(function(e,t){var i,n,s,r,a;i=/^(?=((?:[a-zA-Z0-9+\-.]+:)?))\1(?=((?:\/\/[^\/?#]*)?))\2(?=((?:(?:[^?#\/]*\/)*[^;?#\/]*)?))\3((?:;[^?#]*)?)(\?[^#]*)?(#[^]*)?$/,n=/^(?=([^\/?#]*))\1([^]*)$/,s=/(?:\/|^)\.(?=\/)/g,r=/(?:\/|^)\.\.\/(?!\.\.\/)[^\/]*(?=\/)/g,a={buildAbsoluteURL:function(e,t,i){if(i=i||{},e=e.trim(),!(t=t.trim())){if(!i.alwaysNormalize)return e;var s=a.parseURL(e);if(s)return s.path=a.normalizePath(s.path),a.buildURLFromParts(s);throw new Error("Error trying to parse base URL.")}s=a.parseURL(t);if(!s)throw new Error("Error trying to parse relative URL.");if(s.scheme)return i.alwaysNormalize?(s.path=a.normalizePath(s.path),a.buildURLFromParts(s)):t;t=a.parseURL(e);if(!t)throw new Error("Error trying to parse base URL.");!t.netLoc&&t.path&&"/"!==t.path[0]&&(e=n.exec(t.path),t.netLoc=e[1],t.path=e[2]),t.netLoc&&!t.path&&(t.path="/");var r,e={scheme:t.scheme,netLoc:s.netLoc,path:null,params:s.params,query:s.query,fragment:s.fragment};return s.netLoc||(e.netLoc=t.netLoc,"/"!==s.path[0]&&(s.path?(r=(r=t.path).substring(0,r.lastIndexOf("/")+1)+s.path,e.path=a.normalizePath(r)):(e.path=t.path,s.params||(e.params=t.params,s.query)||(e.query=t.query)))),null===e.path&&(e.path=i.alwaysNormalize?a.normalizePath(s.path):s.path),a.buildURLFromParts(e)},parseURL:function(e){e=i.exec(e);return e?{scheme:e[1]||"",netLoc:e[2]||"",path:e[3]||"",params:e[4]||"",query:e[5]||"",fragment:e[6]||""}:null},normalizePath:function(e){for(e=e.split("").reverse().join("").replace(s,"");e.length!==(e=e.replace(r,"")).length;);return e.split("").reverse().join("")},buildURLFromParts:function(e){return e.scheme+e.netLoc+e.path+e.params+e.query+e.fragment}},e.exports=a}),En="http://example.com",Br=function(){function e(){this.listeners={}}var t=e.prototype;return t.on=function(e,t){this.listeners[e]||(this.listeners[e]=[]),this.listeners[e].push(t)},t.off=function(e,t){return!!this.listeners[e]&&(t=this.listeners[e].indexOf(t),this.listeners[e]=this.listeners[e].slice(0),this.listeners[e].splice(t,1),-1<t)},t.trigger=function(e){var t=this.listeners[e];if(t)if(2===arguments.length)for(var i=t.length,s=0;s<i;++s)t[s].call(this,arguments[1]);else for(var r=Array.prototype.slice.call(arguments,1),n=t.length,a=0;a<n;++a)t[a].apply(this,r)},t.dispose=function(){this.listeners={}},t.pipe=function(t){this.on("data",function(e){t.push(e)})},e}();function Cn(e){e=e;for(var t=window.atob?window.atob(e):Buffer.from(e,"base64").toString("binary"),i=new Uint8Array(t.length),s=0;s<t.length;s++)i[s]=t.charCodeAt(s);return i}
+/*! @name m3u8-parser @version 7.1.0 @license Apache-2.0 */class kn extends Br{constructor(){super(),this.buffer=""}push(e){let t;for(this.buffer+=e,t=this.buffer.indexOf("\n");-1<t;t=this.buffer.indexOf("\n"))this.trigger("data",this.buffer.substring(0,t)),this.buffer=this.buffer.substring(t+1)}}function xn(e){var e=/([0-9.]*)?@?([0-9.]*)?/.exec(e||""),t={};return e[1]&&(t.length=parseInt(e[1],10)),e[2]&&(t.offset=parseInt(e[2],10)),t}function In(t){var i={};if(t){var s,r=t.split(new RegExp('(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))'));let e=r.length;for(;e--;)""!==r[e]&&((s=/([^=]*)=(.*)/.exec(r[e]).slice(1))[0]=s[0].replace(/^\s+|\s+$/g,""),s[1]=s[1].replace(/^\s+|\s+$/g,""),s[1]=s[1].replace(/^['"](.*)['"]$/g,"$1"),i[s[0]]=s[1])}return i}const An=String.fromCharCode(9);class Dn extends Br{constructor(){super(),this.customParsers=[],this.tagMappers=[]}push(i){let o,l;0!==(i=i.trim()).length&&("#"!==i[0]?this.trigger("data",{type:"uri",uri:i}):this.tagMappers.reduce((e,t)=>{t=t(i);return t===i?e:e.concat([t])},[i]).forEach(t=>{for(let e=0;e<this.customParsers.length;e++)if(this.customParsers[e].call(this,t))return;var e,i;if(0!==t.indexOf("#EXT"))this.trigger("data",{type:"comment",text:t.slice(1)});else if(t=t.replace("\r",""),o=/^#EXTM3U/.exec(t))this.trigger("data",{type:"tag",tagType:"m3u"});else if(o=/^#EXTINF:([0-9\.]*)?,?(.*)?$/.exec(t))l={type:"tag",tagType:"inf"},o[1]&&(l.duration=parseFloat(o[1])),o[2]&&(l.title=o[2]),this.trigger("data",l);else if(o=/^#EXT-X-TARGETDURATION:([0-9.]*)?/.exec(t))l={type:"tag",tagType:"targetduration"},o[1]&&(l.duration=parseInt(o[1],10)),this.trigger("data",l);else if(o=/^#EXT-X-VERSION:([0-9.]*)?/.exec(t))l={type:"tag",tagType:"version"},o[1]&&(l.version=parseInt(o[1],10)),this.trigger("data",l);else if(o=/^#EXT-X-MEDIA-SEQUENCE:(\-?[0-9.]*)?/.exec(t))l={type:"tag",tagType:"media-sequence"},o[1]&&(l.number=parseInt(o[1],10)),this.trigger("data",l);else if(o=/^#EXT-X-DISCONTINUITY-SEQUENCE:(\-?[0-9.]*)?/.exec(t))l={type:"tag",tagType:"discontinuity-sequence"},o[1]&&(l.number=parseInt(o[1],10)),this.trigger("data",l);else if(o=/^#EXT-X-PLAYLIST-TYPE:(.*)?$/.exec(t))l={type:"tag",tagType:"playlist-type"},o[1]&&(l.playlistType=o[1]),this.trigger("data",l);else if(o=/^#EXT-X-BYTERANGE:(.*)?$/.exec(t))l=bi(xn(o[1]),{type:"tag",tagType:"byterange"}),this.trigger("data",l);else if(o=/^#EXT-X-ALLOW-CACHE:(YES|NO)?/.exec(t))l={type:"tag",tagType:"allow-cache"},o[1]&&(l.allowed=!/NO/.test(o[1])),this.trigger("data",l);else if(o=/^#EXT-X-MAP:(.*)$/.exec(t))l={type:"tag",tagType:"map"},o[1]&&((i=In(o[1])).URI&&(l.uri=i.URI),i.BYTERANGE)&&(l.byterange=xn(i.BYTERANGE)),this.trigger("data",l);else if(o=/^#EXT-X-STREAM-INF:(.*)$/.exec(t))l={type:"tag",tagType:"stream-inf"},o[1]&&(l.attributes=In(o[1]),l.attributes.RESOLUTION&&(i={},(e=l.attributes.RESOLUTION.split("x"))[0]&&(i.width=parseInt(e[0],10)),e[1]&&(i.height=parseInt(e[1],10)),l.attributes.RESOLUTION=i),l.attributes.BANDWIDTH&&(l.attributes.BANDWIDTH=parseInt(l.attributes.BANDWIDTH,10)),l.attributes["FRAME-RATE"]&&(l.attributes["FRAME-RATE"]=parseFloat(l.attributes["FRAME-RATE"])),l.attributes["PROGRAM-ID"])&&(l.attributes["PROGRAM-ID"]=parseInt(l.attributes["PROGRAM-ID"],10)),this.trigger("data",l);else if(o=/^#EXT-X-MEDIA:(.*)$/.exec(t))l={type:"tag",tagType:"media"},o[1]&&(l.attributes=In(o[1])),this.trigger("data",l);else if(o=/^#EXT-X-ENDLIST/.exec(t))this.trigger("data",{type:"tag",tagType:"endlist"});else if(o=/^#EXT-X-DISCONTINUITY/.exec(t))this.trigger("data",{type:"tag",tagType:"discontinuity"});else if(o=/^#EXT-X-PROGRAM-DATE-TIME:(.*)$/.exec(t))l={type:"tag",tagType:"program-date-time"},o[1]&&(l.dateTimeString=o[1],l.dateTimeObject=new Date(o[1])),this.trigger("data",l);else if(o=/^#EXT-X-KEY:(.*)$/.exec(t))l={type:"tag",tagType:"key"},o[1]&&(l.attributes=In(o[1]),l.attributes.IV)&&("0x"===l.attributes.IV.substring(0,2).toLowerCase()&&(l.attributes.IV=l.attributes.IV.substring(2)),l.attributes.IV=l.attributes.IV.match(/.{8}/g),l.attributes.IV[0]=parseInt(l.attributes.IV[0],16),l.attributes.IV[1]=parseInt(l.attributes.IV[1],16),l.attributes.IV[2]=parseInt(l.attributes.IV[2],16),l.attributes.IV[3]=parseInt(l.attributes.IV[3],16),l.attributes.IV=new Uint32Array(l.attributes.IV)),this.trigger("data",l);else if(o=/^#EXT-X-START:(.*)$/.exec(t))l={type:"tag",tagType:"start"},o[1]&&(l.attributes=In(o[1]),l.attributes["TIME-OFFSET"]=parseFloat(l.attributes["TIME-OFFSET"]),l.attributes.PRECISE=/YES/.test(l.attributes.PRECISE)),this.trigger("data",l);else if(o=/^#EXT-X-CUE-OUT-CONT:(.*)?$/.exec(t))l={type:"tag",tagType:"cue-out-cont"},o[1]?l.data=o[1]:l.data="",this.trigger("data",l);else if(o=/^#EXT-X-CUE-OUT:(.*)?$/.exec(t))l={type:"tag",tagType:"cue-out"},o[1]?l.data=o[1]:l.data="",this.trigger("data",l);else if(o=/^#EXT-X-CUE-IN:(.*)?$/.exec(t))l={type:"tag",tagType:"cue-in"},o[1]?l.data=o[1]:l.data="",this.trigger("data",l);else if((o=/^#EXT-X-SKIP:(.*)$/.exec(t))&&o[1])(l={type:"tag",tagType:"skip"}).attributes=In(o[1]),l.attributes.hasOwnProperty("SKIPPED-SEGMENTS")&&(l.attributes["SKIPPED-SEGMENTS"]=parseInt(l.attributes["SKIPPED-SEGMENTS"],10)),l.attributes.hasOwnProperty("RECENTLY-REMOVED-DATERANGES")&&(l.attributes["RECENTLY-REMOVED-DATERANGES"]=l.attributes["RECENTLY-REMOVED-DATERANGES"].split(An)),this.trigger("data",l);else if((o=/^#EXT-X-PART:(.*)$/.exec(t))&&o[1])(l={type:"tag",tagType:"part"}).attributes=In(o[1]),["DURATION"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=parseFloat(l.attributes[e]))}),["INDEPENDENT","GAP"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=/YES/.test(l.attributes[e]))}),l.attributes.hasOwnProperty("BYTERANGE")&&(l.attributes.byterange=xn(l.attributes.BYTERANGE)),this.trigger("data",l);else if((o=/^#EXT-X-SERVER-CONTROL:(.*)$/.exec(t))&&o[1])(l={type:"tag",tagType:"server-control"}).attributes=In(o[1]),["CAN-SKIP-UNTIL","PART-HOLD-BACK","HOLD-BACK"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=parseFloat(l.attributes[e]))}),["CAN-SKIP-DATERANGES","CAN-BLOCK-RELOAD"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=/YES/.test(l.attributes[e]))}),this.trigger("data",l);else if((o=/^#EXT-X-PART-INF:(.*)$/.exec(t))&&o[1])(l={type:"tag",tagType:"part-inf"}).attributes=In(o[1]),["PART-TARGET"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=parseFloat(l.attributes[e]))}),this.trigger("data",l);else if((o=/^#EXT-X-PRELOAD-HINT:(.*)$/.exec(t))&&o[1])(l={type:"tag",tagType:"preload-hint"}).attributes=In(o[1]),["BYTERANGE-START","BYTERANGE-LENGTH"].forEach(function(e){var t;l.attributes.hasOwnProperty(e)&&(l.attributes[e]=parseInt(l.attributes[e],10),t="BYTERANGE-LENGTH"===e?"length":"offset",l.attributes.byterange=l.attributes.byterange||{},l.attributes.byterange[t]=l.attributes[e],delete l.attributes[e])}),this.trigger("data",l);else if((o=/^#EXT-X-RENDITION-REPORT:(.*)$/.exec(t))&&o[1])(l={type:"tag",tagType:"rendition-report"}).attributes=In(o[1]),["LAST-MSN","LAST-PART"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=parseInt(l.attributes[e],10))}),this.trigger("data",l);else if((o=/^#EXT-X-DATERANGE:(.*)$/.exec(t))&&o[1]){(l={type:"tag",tagType:"daterange"}).attributes=In(o[1]),["ID","CLASS"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=String(l.attributes[e]))}),["START-DATE","END-DATE"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=new Date(l.attributes[e]))}),["DURATION","PLANNED-DURATION"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=parseFloat(l.attributes[e]))}),["END-ON-NEXT"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=/YES/i.test(l.attributes[e]))}),["SCTE35-CMD"," SCTE35-OUT","SCTE35-IN"].forEach(function(e){l.attributes.hasOwnProperty(e)&&(l.attributes[e]=l.attributes[e].toString(16))});var s,r,n=/^X-([A-Z]+-)+[A-Z]+$/;for(const a in l.attributes)n.test(a)&&(s=/[0-9A-Fa-f]{6}/g.test(l.attributes[a]),r=/^\d+(\.\d+)?$/.test(l.attributes[a]),l.attributes[a]=s?l.attributes[a].toString(16):(r?parseFloat:String)(l.attributes[a]));this.trigger("data",l)}else(o=/^#EXT-X-INDEPENDENT-SEGMENTS/.exec(t))?this.trigger("data",{type:"tag",tagType:"independent-segments"}):(o=/^#EXT-X-CONTENT-STEERING:(.*)$/.exec(t))?((l={type:"tag",tagType:"content-steering"}).attributes=In(o[1]),this.trigger("data",l)):this.trigger("data",{type:"tag",data:t.slice(4)})}))}addParser({expression:t,customType:i,dataParser:s,segment:r}){"function"!=typeof s&&(s=e=>e),this.customParsers.push(e=>{if(t.exec(e))return this.trigger("data",{type:"custom",data:s(e),customType:i,segment:r}),!0})}addTagMapper({expression:t,map:i}){this.tagMappers.push(e=>t.test(e)?i(e):e)}}function Pn(t){const i={};return Object.keys(t).forEach(function(e){i[e.toLowerCase().replace(/-(\w)/g,e=>e[1].toUpperCase())]=t[e]}),i}function Ln(e){var t,i,s,r,n,{serverControl:e,targetDuration:a,partTargetDuration:o}=e;e&&(t="#EXT-X-SERVER-CONTROL",i="holdBack",s="partHoldBack",r=a&&3*a,n=o&&2*o,a&&!e.hasOwnProperty(i)&&(e[i]=r,this.trigger("info",{message:t+` defaulting HOLD-BACK to targetDuration * 3 (${r}).`})),r&&e[i]<r&&(this.trigger("warn",{message:t+` clamping HOLD-BACK (${e[i]}) to targetDuration * 3 (${r})`}),e[i]=r),o&&!e.hasOwnProperty(s)&&(e[s]=3*o,this.trigger("info",{message:t+` defaulting PART-HOLD-BACK to partTargetDuration * 3 (${e[s]}).`})),o)&&e[s]<n&&(this.trigger("warn",{message:t+` clamping PART-HOLD-BACK (${e[s]}) to partTargetDuration * 2 (${n}).`}),e[s]=n)}class On extends Br{constructor(){super(),this.lineStream=new kn,this.parseStream=new Dn,this.lineStream.pipe(this.parseStream),this.lastProgramDateTime=null;const e=this,s=[];let a={},r,o,l=!1;const d={AUDIO:{},VIDEO:{},"CLOSED-CAPTIONS":{},SUBTITLES:{}};let h=0,u=(this.manifest={allowCache:!0,discontinuityStarts:[],dateRanges:[],segments:[]},0),c=0;const p={};this.on("end",()=>{a.uri||!a.parts&&!a.preloadHints||(!a.map&&r&&(a.map=r),!a.key&&o&&(a.key=o),a.timeline||"number"!=typeof h||(a.timeline=h),this.manifest.preloadSegment=a)}),this.parseStream.on("data",function(n){let t,i;({tag(){({version(){n.version&&(this.manifest.version=n.version)},"allow-cache"(){this.manifest.allowCache=n.allowed,"allowed"in n||(this.trigger("info",{message:"defaulting allowCache to YES"}),this.manifest.allowCache=!0)},byterange(){var e={};"length"in n&&((a.byterange=e).length=n.length,"offset"in n||(n.offset=u)),"offset"in n&&((a.byterange=e).offset=n.offset),u=e.offset+e.length},endlist(){this.manifest.endList=!0},inf(){"mediaSequence"in this.manifest||(this.manifest.mediaSequence=0,this.trigger("info",{message:"defaulting media sequence to zero"})),"discontinuitySequence"in this.manifest||(this.manifest.discontinuitySequence=0,this.trigger("info",{message:"defaulting discontinuity sequence to zero"})),n.title&&(a.title=n.title),0<n.duration&&(a.duration=n.duration),0===n.duration&&(a.duration=.01,this.trigger("info",{message:"updating zero segment duration to a small value"})),this.manifest.segments=s},key(){if(n.attributes)if("NONE"===n.attributes.METHOD)o=null;else if(n.attributes.URI)if("com.apple.streamingkeydelivery"===n.attributes.KEYFORMAT)this.manifest.contentProtection=this.manifest.contentProtection||{},this.manifest.contentProtection["com.apple.fps.1_0"]={attributes:n.attributes};else if("com.microsoft.playready"===n.attributes.KEYFORMAT)this.manifest.contentProtection=this.manifest.contentProtection||{},this.manifest.contentProtection["com.microsoft.playready"]={uri:n.attributes.URI};else{if("urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed"===n.attributes.KEYFORMAT)return-1===["SAMPLE-AES","SAMPLE-AES-CTR","SAMPLE-AES-CENC"].indexOf(n.attributes.METHOD)?void this.trigger("warn",{message:"invalid key method provided for Widevine"}):("SAMPLE-AES-CENC"===n.attributes.METHOD&&this.trigger("warn",{message:"SAMPLE-AES-CENC is deprecated, please use SAMPLE-AES-CTR instead"}),"data:text/plain;base64,"!==n.attributes.URI.substring(0,23)?void this.trigger("warn",{message:"invalid key URI provided for Widevine"}):n.attributes.KEYID&&"0x"===n.attributes.KEYID.substring(0,2)?(this.manifest.contentProtection=this.manifest.contentProtection||{},void(this.manifest.contentProtection["com.widevine.alpha"]={attributes:{schemeIdUri:n.attributes.KEYFORMAT,keyId:n.attributes.KEYID.substring(2)},pssh:Cn(n.attributes.URI.split(",")[1])})):void this.trigger("warn",{message:"invalid key ID provided for Widevine"}));n.attributes.METHOD||this.trigger("warn",{message:"defaulting key method to AES-128"}),o={method:n.attributes.METHOD||"AES-128",uri:n.attributes.URI},"undefined"!=typeof n.attributes.IV&&(o.iv=n.attributes.IV)}else this.trigger("warn",{message:"ignoring key declaration without URI"});else this.trigger("warn",{message:"ignoring key declaration without attribute list"})},"media-sequence"(){isFinite(n.number)?this.manifest.mediaSequence=n.number:this.trigger("warn",{message:"ignoring invalid media sequence: "+n.number})},"discontinuity-sequence"(){isFinite(n.number)?(this.manifest.discontinuitySequence=n.number,h=n.number):this.trigger("warn",{message:"ignoring invalid discontinuity sequence: "+n.number})},"playlist-type"(){/VOD|EVENT/.test(n.playlistType)?this.manifest.playlistType=n.playlistType:this.trigger("warn",{message:"ignoring unknown playlist type: "+n.playlist})},map(){r={},n.uri&&(r.uri=n.uri),n.byterange&&(r.byterange=n.byterange),o&&(r.key=o)},"stream-inf"(){this.manifest.playlists=s,this.manifest.mediaGroups=this.manifest.mediaGroups||d,n.attributes?(a.attributes||(a.attributes={}),bi(a.attributes,n.attributes)):this.trigger("warn",{message:"ignoring empty stream-inf attributes"})},media(){var e;this.manifest.mediaGroups=this.manifest.mediaGroups||d,n.attributes&&n.attributes.TYPE&&n.attributes["GROUP-ID"]&&n.attributes.NAME?((e=this.manifest.mediaGroups[n.attributes.TYPE])[n.attributes["GROUP-ID"]]=e[n.attributes["GROUP-ID"]]||{},t=e[n.attributes["GROUP-ID"]],(i={default:/yes/i.test(n.attributes.DEFAULT)}).default?i.autoselect=!0:i.autoselect=/yes/i.test(n.attributes.AUTOSELECT),n.attributes.LANGUAGE&&(i.language=n.attributes.LANGUAGE),n.attributes.URI&&(i.uri=n.attributes.URI),n.attributes["INSTREAM-ID"]&&(i.instreamId=n.attributes["INSTREAM-ID"]),n.attributes.CHARACTERISTICS&&(i.characteristics=n.attributes.CHARACTERISTICS),n.attributes.FORCED&&(i.forced=/yes/i.test(n.attributes.FORCED)),t[n.attributes.NAME]=i):this.trigger("warn",{message:"ignoring incomplete or missing media group"})},discontinuity(){h+=1,a.discontinuity=!0,this.manifest.discontinuityStarts.push(s.length)},"program-date-time"(){"undefined"==typeof this.manifest.dateTimeString&&(this.manifest.dateTimeString=n.dateTimeString,this.manifest.dateTimeObject=n.dateTimeObject),a.dateTimeString=n.dateTimeString,a.dateTimeObject=n.dateTimeObject;var e=this["lastProgramDateTime"];this.lastProgramDateTime=new Date(n.dateTimeString).getTime(),null===e&&this.manifest.segments.reduceRight((e,t)=>(t.programDateTime=e-1e3*t.duration,t.programDateTime),this.lastProgramDateTime)},targetduration(){!isFinite(n.duration)||n.duration<0?this.trigger("warn",{message:"ignoring invalid target duration: "+n.duration}):(this.manifest.targetDuration=n.duration,Ln.call(this,this.manifest))},start(){!n.attributes||isNaN(n.attributes["TIME-OFFSET"])?this.trigger("warn",{message:"ignoring start declaration without appropriate attribute list"}):this.manifest.start={timeOffset:n.attributes["TIME-OFFSET"],precise:n.attributes.PRECISE}},"cue-out"(){a.cueOut=n.data},"cue-out-cont"(){a.cueOutCont=n.data},"cue-in"(){a.cueIn=n.data},skip(){this.manifest.skip=Pn(n.attributes),this.warnOnMissingAttributes_("#EXT-X-SKIP",n.attributes,["SKIPPED-SEGMENTS"])},part(){l=!0;var e=this.manifest.segments.length,t=Pn(n.attributes),t=(a.parts=a.parts||[],a.parts.push(t),t.byterange&&(t.byterange.hasOwnProperty("offset")||(t.byterange.offset=c),c=t.byterange.offset+t.byterange.length),a.parts.length-1);this.warnOnMissingAttributes_(`#EXT-X-PART #${t} for segment #`+e,n.attributes,["URI","DURATION"]),this.manifest.renditionReports&&this.manifest.renditionReports.forEach((e,t)=>{e.hasOwnProperty("lastPart")||this.trigger("warn",{message:`#EXT-X-RENDITION-REPORT #${t} lacks required attribute(s): LAST-PART`})})},"server-control"(){var e=this.manifest.serverControl=Pn(n.attributes);e.hasOwnProperty("canBlockReload")||(e.canBlockReload=!1,this.trigger("info",{message:"#EXT-X-SERVER-CONTROL defaulting CAN-BLOCK-RELOAD to false"})),Ln.call(this,this.manifest),e.canSkipDateranges&&!e.hasOwnProperty("canSkipUntil")&&this.trigger("warn",{message:"#EXT-X-SERVER-CONTROL lacks required attribute CAN-SKIP-UNTIL which is required when CAN-SKIP-DATERANGES is set"})},"preload-hint"(){var t=this.manifest.segments.length,i=Pn(n.attributes),e=i.type&&"PART"===i.type,s=(a.preloadHints=a.preloadHints||[],a.preloadHints.push(i),!i.byterange||i.byterange.hasOwnProperty("offset")||(i.byterange.offset=e?c:0,e&&(c=i.byterange.offset+i.byterange.length)),a.preloadHints.length-1);if(this.warnOnMissingAttributes_(`#EXT-X-PRELOAD-HINT #${s} for segment #`+t,n.attributes,["TYPE","URI"]),i.type)for(let e=0;e<a.preloadHints.length-1;e++){var r=a.preloadHints[e];r.type&&r.type===i.type&&this.trigger("warn",{message:`#EXT-X-PRELOAD-HINT #${s} for segment #${t} has the same TYPE ${i.type} as preload hint #`+e})}},"rendition-report"(){var e=Pn(n.attributes),e=(this.manifest.renditionReports=this.manifest.renditionReports||[],this.manifest.renditionReports.push(e),this.manifest.renditionReports.length-1),t=["LAST-MSN","URI"];l&&t.push("LAST-PART"),this.warnOnMissingAttributes_("#EXT-X-RENDITION-REPORT #"+e,n.attributes,t)},"part-inf"(){this.manifest.partInf=Pn(n.attributes),this.warnOnMissingAttributes_("#EXT-X-PART-INF",n.attributes,["PART-TARGET"]),this.manifest.partInf.partTarget&&(this.manifest.partTargetDuration=this.manifest.partInf.partTarget),Ln.call(this,this.manifest)},daterange(){this.manifest.dateRanges.push(Pn(n.attributes));var e=this.manifest.dateRanges.length-1;this.warnOnMissingAttributes_("#EXT-X-DATERANGE #"+e,n.attributes,["ID","START-DATE"]);const t=this.manifest.dateRanges[e];t.endDate&&t.startDate&&new Date(t.endDate)<new Date(t.startDate)&&this.trigger("warn",{message:"EXT-X-DATERANGE END-DATE must be equal to or later than the value of the START-DATE"}),t.duration&&t.duration<0&&this.trigger("warn",{message:"EXT-X-DATERANGE DURATION must not be negative"}),t.plannedDuration&&t.plannedDuration<0&&this.trigger("warn",{message:"EXT-X-DATERANGE PLANNED-DURATION must not be negative"});var i=!!t.endOnNext;if(i&&!t.class&&this.trigger("warn",{message:"EXT-X-DATERANGE with an END-ON-NEXT=YES attribute must have a CLASS attribute"}),i&&(t.duration||t.endDate)&&this.trigger("warn",{message:"EXT-X-DATERANGE with an END-ON-NEXT=YES attribute must not contain DURATION or END-DATE attributes"}),t.duration&&t.endDate&&(i=t.startDate.getTime()+1e3*t.duration,this.manifest.dateRanges[e].endDate=new Date(i)),p[t.id]){for(const s in p[t.id])if(t[s]&&JSON.stringify(p[t.id][s])!==JSON.stringify(t[s])){this.trigger("warn",{message:"EXT-X-DATERANGE tags with the same ID in a playlist must have the same attributes values"});break}e=this.manifest.dateRanges.findIndex(e=>e.id===t.id);this.manifest.dateRanges[e]=bi(this.manifest.dateRanges[e],t),p[t.id]=bi(p[t.id],t),this.manifest.dateRanges.pop()}else p[t.id]=t},"independent-segments"(){this.manifest.independentSegments=!0},"content-steering"(){this.manifest.contentSteering=Pn(n.attributes),this.warnOnMissingAttributes_("#EXT-X-CONTENT-STEERING",n.attributes,["SERVER-URI"])}}[n.tagType]||function(){}).call(e)},uri(){a.uri=n.uri,s.push(a),!this.manifest.targetDuration||"duration"in a||(this.trigger("warn",{message:"defaulting segment duration to the target duration"}),a.duration=this.manifest.targetDuration),o&&(a.key=o),a.timeline=h,r&&(a.map=r),c=0,null!==this.lastProgramDateTime&&(a.programDateTime=this.lastProgramDateTime,this.lastProgramDateTime+=1e3*a.duration),a={}},comment(){},custom(){n.segment?(a.custom=a.custom||{},a.custom[n.customType]=n.data):(this.manifest.custom=this.manifest.custom||{},this.manifest.custom[n.customType]=n.data)}})[n.type].call(e)})}warnOnMissingAttributes_(e,t,i){const s=[];i.forEach(function(e){t.hasOwnProperty(e)||s.push(e)}),s.length&&this.trigger("warn",{message:e+" lacks required attribute(s): "+s.join(", ")})}push(e){this.lineStream.push(e)}end(){this.lineStream.push("\n"),this.manifest.dateRanges.length&&null===this.lastProgramDateTime&&this.trigger("warn",{message:"A playlist with EXT-X-DATERANGE tag must contain atleast one EXT-X-PROGRAM-DATE-TIME tag"}),this.lastProgramDateTime=null,this.trigger("end")}addParser(e){this.parseStream.addParser(e)}addTagMapper(e){this.parseStream.addTagMapper(e)}}function Rn(e){return qn.audio.test((e=void 0===e?"":e).trim().toLowerCase())}function Nn(e){return void 0===e&&(e=""),window.MediaSource&&window.MediaSource.isTypeSupported&&window.MediaSource.isTypeSupported(zn(e))||!1}function Mn(e){return(e=void 0===e?"":e).toLowerCase().split(",").every(function(e){e=e.trim();for(var t=0;t<Hn.length;t++){var i=Hn[t];if(qn["muxer"+i].test(e))return!0}return!1})}function Un(e){return Gn.test(e)?"hls":Xn.test(e)?"dash":"application/vnd.videojs.vhs+json"===e?"vhs-json":null}function Bn(e,t){for(var i=void 0!==(t=(void 0===t?{}:t).le)&&t,s=(e=w(e="bigint"!=typeof e&&"number"!=typeof e||"number"==typeof e&&e!=e?0:e),t=e,Math.ceil(t.toString(2).length/8)),r=new Uint8Array(new ArrayBuffer(s)),n=0;n<s;n++){var a=i?n:Math.abs(n+1-r.length);r[a]=Number(e/Yn[n]&w(255)),e<0&&(r[a]=Math.abs(~r[a]),r[a]-=0===n?1:2)}return r}function Fn(e,t){if("string"!=typeof(e="string"!=typeof e&&e&&"function"==typeof e.toString?e.toString():e))return new Uint8Array;t||(e=unescape(encodeURIComponent(e)));for(var i=new Uint8Array(e.length),s=0;s<e.length;s++)i[s]=e.charCodeAt(s);return i}var qn={mp4:/^(av0?1|avc0?[1234]|vp0?9|flac|opus|mp3|mp4a|mp4v|stpp.ttml.im1t)/,webm:/^(vp0?[89]|av0?1|opus|vorbis)/,ogg:/^(vp0?[89]|theora|flac|opus|vorbis)/,video:/^(av0?1|avc0?[1234]|vp0?[89]|hvc1|hev1|theora|mp4v)/,audio:/^(mp4a|flac|vorbis|opus|ac-[34]|ec-3|alac|mp3|speex|aac)/,text:/^(stpp.ttml.im1t)/,muxerVideo:/^(avc0?1)/,muxerAudio:/^(mp4a)/,muxerText:/a^/},jn=["video","audio","text"],Hn=["Video","Audio","Text"],Vn=function(e){return e&&e.replace(/avc1\.(\d+)\.(\d+)/i,function(e,t,i){return"avc1."+("00"+Number(t).toString(16)).slice(-2)+"00"+("00"+Number(i).toString(16)).slice(-2)})},$n=function(e){var e=(e=void 0===e?"":e).split(","),n=[];return e.forEach(function(s){var r;s=s.trim(),jn.forEach(function(e){var t,i=qn[e].exec(s.toLowerCase());!i||i.length<=1||(r=e,i=s.substring(0,i[1].length),t=s.replace(i,""),n.push({type:i,details:t,mediaType:e}))}),r||n.push({type:s,details:"",mediaType:"unknown"})}),n},zn=function(e){var t,i,s;if(e&&"string"==typeof e)return i="video",1===(t=e.toLowerCase().split(",").map(function(e){return Vn(e.trim())})).length&&Rn(t[0])?i="audio":1===t.length&&(s=t[0],qn.text.test((s=void 0===s?"":s).trim().toLowerCase()))&&(i="application"),s="mp4",t.every(function(e){return qn.mp4.test(e)})?s="mp4":t.every(function(e){return qn.webm.test(e)})?s="webm":t.every(function(e){return qn.ogg.test(e)})&&(s="ogg"),i+"/"+s+';codecs="'+e+'"'},Wn="mp4a.40.2",Gn=/^(audio|video|application)\/(x-|vnd\.apple\.)?mpegurl/i,Xn=/^application\/dash\+xml/i,Kn=function(e){return"function"===ArrayBuffer.isView?ArrayBuffer.isView(e):e&&e.buffer instanceof ArrayBuffer},S=function(e){return e instanceof Uint8Array?e:(Array.isArray(e)||Kn(e)||e instanceof ArrayBuffer||(e="number"!=typeof e||"number"==typeof e&&e!=e?0:[e]),new Uint8Array(e&&e.buffer||e,e&&e.byteOffset||0,e&&e.byteLength||0))},w=window.BigInt||Number,Yn=[w("0x1"),w("0x100"),w("0x10000"),w("0x1000000"),w("0x100000000"),w("0x10000000000"),w("0x1000000000000"),w("0x100000000000000"),w("0x10000000000000000")],Qn=(t=new Uint16Array([65484]),255!==(t=new Uint8Array(t.buffer,t.byteOffset,t.byteLength))[0]&&t[0],function(s,e){var e=void 0===e?{}:e,t=e.signed,t=void 0!==t&&t,e=e.le,r=void 0!==e&&e,e=(s=S(s),r?"reduce":"reduceRight"),e=(s[e]||Array.prototype[e]).call(s,function(e,t,i){i=r?i:Math.abs(i+1-s.length);return e+w(t)*Yn[i]},w(0));return t&&(t=Yn[s.length]/w(2)-w(1))<(e=w(e))&&(e=(e=e-t-t)-w(2)),Number(e)}),E=function(i,e,t){var t=void 0===t?{}:t,s=t.offset,r=void 0===s?0:s,s=t.mask,n=void 0===s?[]:s,t=(i=S(i),(e=S(e)).every||Array.prototype.every);return e.length&&i.length-r>=e.length&&t.call(e,function(e,t){return e===(n[t]?n[t]&i[r+t]:i[r+t])})};function Jn(e){e=e;for(var t=window.atob?window.atob(e):Buffer.from(e,"base64").toString("binary"),i=new Uint8Array(t.length),s=0;s<t.length;s++)i[s]=t.charCodeAt(s);return i}function Zn(e,t){return(t=void 0===t?Object:t)&&"function"==typeof t.freeze?t.freeze(e):e}var ea=Zn({HTML:"text/html",isHTML:function(e){return e===ea.HTML},XML_APPLICATION:"application/xml",XML_TEXT:"text/xml",XML_XHTML_APPLICATION:"application/xhtml+xml",XML_SVG_IMAGE:"image/svg+xml"}),ta=Zn({HTML:"http://www.w3.org/1999/xhtml",isHTML:function(e){return e===ta.HTML},SVG:"http://www.w3.org/2000/svg",XML:"http://www.w3.org/XML/1998/namespace",XMLNS:"http://www.w3.org/2000/xmlns/"}),ia={assign:function(e,t){if(null===e||"object"!=typeof e)throw new TypeError("target is not an object");for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},find:function(e,t,i){if(void 0===i&&(i=Array.prototype),e&&"function"==typeof i.find)return i.find.call(e,t);for(var s=0;s<e.length;s++)if(Object.prototype.hasOwnProperty.call(e,s)){var r=e[s];if(t.call(void 0,r,s,e))return r}},freeze:Zn,MIME_TYPE:ea,NAMESPACE:ta},sa=ia.find,ra=ia.NAMESPACE;function na(e){return""!==e}function aa(e,t){return e.hasOwnProperty(t)||(e[t]=!0),e}function oa(e){return e?(e=(e=e)?e.split(/[\t\n\f\r ]+/).filter(na):[],Object.keys(e.reduce(aa,{}))):[]}function la(e,t){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}function da(e,t){var i=e.prototype;function s(){}i instanceof t||(s.prototype=t.prototype,la(i,s=new s),e.prototype=i=s),i.constructor!=e&&(i.constructor=e)}var n={},s=(n.ELEMENT_NODE=1,n.ATTRIBUTE_NODE=2,n.TEXT_NODE=3,n.CDATA_SECTION_NODE=4,n.ENTITY_REFERENCE_NODE=5,n.ENTITY_NODE=6,n.PROCESSING_INSTRUCTION_NODE=7,n.COMMENT_NODE=8,n.DOCUMENT_NODE=9,n.DOCUMENT_TYPE_NODE=10,n.DOCUMENT_FRAGMENT_NODE=11,n.NOTATION_NODE=12,{}),C={},ha=(s.INDEX_SIZE_ERR=(C[1]="Index size error",1),s.DOMSTRING_SIZE_ERR=(C[2]="DOMString size error",2),s.HIERARCHY_REQUEST_ERR=(C[3]="Hierarchy request error",3)),ua=(s.WRONG_DOCUMENT_ERR=(C[4]="Wrong document",4),s.INVALID_CHARACTER_ERR=(C[5]="Invalid character",5),s.NO_DATA_ALLOWED_ERR=(C[6]="No data allowed",6),s.NO_MODIFICATION_ALLOWED_ERR=(C[7]="No modification allowed",7),s.NOT_FOUND_ERR=(C[8]="Not found",8));s.NOT_SUPPORTED_ERR=(C[9]="Not supported",9),s.INUSE_ATTRIBUTE_ERR=(C[10]="Attribute in use",10);function k(e,t){var i;return t instanceof Error?i=t:(i=this,Error.call(this,C[e]),this.message=C[e],Error.captureStackTrace&&Error.captureStackTrace(this,k)),i.code=e,t&&(this.message=this.message+": "+t),i}function ca(){}function pa(e,t){this._node=e,this._refresh=t,ma(this)}function ma(e){var t=e._node._inc||e._node.ownerDocument._inc;if(e._inc!==t){var i=e._refresh(e._node);if(Ja(e,"length",i.length),!e.$$length||i.length<e.$$length)for(var s=i.length;s in e;s++)Object.prototype.hasOwnProperty.call(e,s)&&delete e[s];la(i,e),e._inc=t}}function ga(){}function fa(e,t){for(var i=e.length;i--;)if(e[i]===t)return i}function ya(e,t,i,s){s?t[fa(t,s)]=i:t[t.length++]=i,e&&(t=(i.ownerElement=e).ownerDocument)&&(s&&wa(t,e,s),s=e,e=i,(i=t)&&i._inc++,e.namespaceURI===ra.XMLNS)&&(s._nsMap[e.prefix?e.localName:""]=e.value)}function _a(e,t,i){var s=fa(t,i);if(!(0<=s))throw new k(ua,new Error(e.tagName+"@"+i));for(var r,n=t.length-1;s<n;)t[s]=t[++s];t.length=n,e&&(r=e.ownerDocument)&&(wa(r,e,i),i.ownerElement=null)}function va(){}function x(){}function ba(e){return("<"==e?"&lt;":">"==e&&"&gt;")||("&"==e?"&amp;":'"'==e&&"&quot;")||"&#"+e.charCodeAt()+";"}function Ta(e,t){if(t(e))return 1;if(e=e.firstChild)do{if(Ta(e,t))return 1}while(e=e.nextSibling)}function Sa(){this.ownerDocument=this}function wa(e,t,i){e&&e._inc++,i.namespaceURI===ra.XMLNS&&delete t._nsMap[i.prefix?i.localName:""]}function Ea(e,t,i){if(e&&e._inc){e._inc++;var s=t.childNodes;if(i)s[s.length++]=i;else{for(var r=t.firstChild,n=0;r;)r=(s[n++]=r).nextSibling;s.length=n,delete s[s.length]}}}function Ca(e,t){var i=t.previousSibling,s=t.nextSibling;return i?i.nextSibling=s:e.firstChild=s,s?s.previousSibling=i:e.lastChild=i,t.parentNode=null,t.previousSibling=null,t.nextSibling=null,Ea(e.ownerDocument,e),t}function ka(e){return e&&e.nodeType===x.DOCUMENT_TYPE_NODE}function xa(e){return e&&e.nodeType===x.ELEMENT_NODE}function Ia(e){return e&&e.nodeType===x.TEXT_NODE}function Aa(e,t){var i,e=e.childNodes||[];if(!sa(e,xa)&&!ka(t))return i=sa(e,ka),!(t&&i&&e.indexOf(i)>e.indexOf(t))}function Da(e,t){var i,e=e.childNodes||[];if(!sa(e,function(e){return xa(e)&&e!==t}))return i=sa(e,ka),!(t&&i&&e.indexOf(i)>e.indexOf(t))}function Pa(e,t,i){if(!(s=e)||s.nodeType!==x.DOCUMENT_NODE&&s.nodeType!==x.DOCUMENT_FRAGMENT_NODE&&s.nodeType!==x.ELEMENT_NODE)throw new k(ha,"Unexpected parent node type "+e.nodeType);var s;if(i&&i.parentNode!==e)throw new k(ua,"child not in parent");if(!(s=t)||!(xa(s)||Ia(s)||ka(s)||s.nodeType===x.DOCUMENT_FRAGMENT_NODE||s.nodeType===x.COMMENT_NODE||s.nodeType===x.PROCESSING_INSTRUCTION_NODE)||ka(t)&&e.nodeType!==x.DOCUMENT_NODE)throw new k(ha,"Unexpected node type "+t.nodeType+" for parent node type "+e.nodeType)}function La(e,t,i){var s=e.childNodes||[],r=t.childNodes||[];if(t.nodeType===x.DOCUMENT_FRAGMENT_NODE){var n=r.filter(xa);if(1<n.length||sa(r,Ia))throw new k(ha,"More than one element or text in fragment");if(1===n.length&&!Aa(e,i))throw new k(ha,"Element in fragment can not be inserted before doctype")}if(xa(t)&&!Aa(e,i))throw new k(ha,"Only one element can be added and only after doctype");if(ka(t)){if(sa(s,ka))throw new k(ha,"Only one doctype is allowed");r=sa(s,xa);if(i&&s.indexOf(r)<s.indexOf(i))throw new k(ha,"Doctype can only be inserted before an element");if(!i&&r)throw new k(ha,"Doctype can not be appended since element is present")}}function Oa(e,t,i){var s=e.childNodes||[],r=t.childNodes||[];if(t.nodeType===x.DOCUMENT_FRAGMENT_NODE){var n=r.filter(xa);if(1<n.length||sa(r,Ia))throw new k(ha,"More than one element or text in fragment");if(1===n.length&&!Da(e,i))throw new k(ha,"Element in fragment can not be inserted before doctype")}if(xa(t)&&!Da(e,i))throw new k(ha,"Only one element can be added and only after doctype");if(ka(t)){if(sa(s,function(e){return ka(e)&&e!==i}))throw new k(ha,"Only one doctype is allowed");r=sa(s,xa);if(i&&s.indexOf(r)<s.indexOf(i))throw new k(ha,"Doctype can only be inserted before an element")}}function Ra(e,t,i,s){Pa(e,t,i),e.nodeType===x.DOCUMENT_NODE&&(s||La)(e,t,i);s=t.parentNode;if(s&&s.removeChild(t),11===t.nodeType){var r=t.firstChild;if(null==r)return t;var n=t.lastChild}else r=n=t;s=i?i.previousSibling:e.lastChild;for(r.previousSibling=s,n.nextSibling=i,s?s.nextSibling=r:e.firstChild=r,null==i?e.lastChild=n:i.previousSibling=n;r.parentNode=e,r!==n&&(r=r.nextSibling););return Ea(e.ownerDocument||e,e),11==t.nodeType&&(t.firstChild=t.lastChild=null),t}function Na(){this._nsMap={}}function Ma(){}function Ua(){}function Ba(){}function Fa(){}function qa(){}function ja(){}function Ha(){}function Va(){}function $a(){}function za(){}function Wa(){}function Ga(){}function Xa(e,t){var i,s=[],r=9==this.nodeType&&this.documentElement||this,n=r.prefix,a=r.namespaceURI;return Qa(this,s,e,t,i=a&&null==n&&null==r.lookupPrefix(a)?[{namespace:a,prefix:null}]:i),s.join("")}function Ka(e,t,i){var s=e.prefix||"",r=e.namespaceURI;if(r&&("xml"!==s||r!==ra.XML)&&r!==ra.XMLNS){for(var n=i.length;n--;){var a=i[n];if(a.prefix===s)return a.namespace!==r}return 1}}function Ya(e,t,i){e.push(" ",t,'="',i.replace(/[<>&"\t\n\r]/g,ba),'"')}function Qa(e,t,i,s,r){if(r=r||[],s){if(!(e=s(e)))return;if("string"==typeof e)return void t.push(e)}switch(e.nodeType){case 1:var n=e.attributes,a=n.length,o=e.firstChild,l=e.tagName,d=l;if(!(i=ra.isHTML(e.namespaceURI)||i)&&!e.prefix&&e.namespaceURI){for(var h,u=0;u<n.length;u++)if("xmlns"===n.item(u).name){h=n.item(u).value;break}if(!h)for(var c=r.length-1;0<=c;c--)if(""===(p=r[c]).prefix&&p.namespace===e.namespaceURI){h=p.namespace;break}if(h!==e.namespaceURI)for(var p,c=r.length-1;0<=c;c--)if((p=r[c]).namespace===e.namespaceURI){p.prefix&&(d=p.prefix+":"+l);break}}t.push("<",d);for(var m=0;m<a;m++)"xmlns"==(g=n.item(m)).prefix?r.push({prefix:g.localName,namespace:g.value}):"xmlns"==g.nodeName&&r.push({prefix:"",namespace:g.value});for(var g,f,y,m=0;m<a;m++)Ka(g=n.item(m),0,r)&&(Ya(t,(f=g.prefix||"")?"xmlns:"+f:"xmlns",y=g.namespaceURI),r.push({prefix:f,namespace:y})),Qa(g,t,i,s,r);if(l===d&&Ka(e,0,r)&&(Ya(t,(f=e.prefix||"")?"xmlns:"+f:"xmlns",y=e.namespaceURI),r.push({prefix:f,namespace:y})),o||i&&!/^(?:meta|link|img|br|hr|input)$/i.test(l)){if(t.push(">"),i&&/^script$/i.test(l))for(;o;)o.data?t.push(o.data):Qa(o,t,i,s,r.slice()),o=o.nextSibling;else for(;o;)Qa(o,t,i,s,r.slice()),o=o.nextSibling;t.push("</",d,">")}else t.push("/>");return;case 9:case 11:for(o=e.firstChild;o;)Qa(o,t,i,s,r.slice()),o=o.nextSibling;return;case 2:return Ya(t,e.name,e.value);case 3:return t.push(e.data.replace(/[<&>]/g,ba));case 4:return t.push("<![CDATA[",e.data,"]]>");case 8:return t.push("\x3c!--",e.data,"--\x3e");case 10:var _=e.publicId,v=e.systemId;return t.push("<!DOCTYPE ",e.name),void(_?(t.push(" PUBLIC ",_),v&&"."!=v&&t.push(" ",v),t.push(">")):v&&"."!=v?t.push(" SYSTEM ",v,">"):((_=e.internalSubset)&&t.push(" [",_,"]"),t.push(">")));case 7:return t.push("<?",e.target," ",e.data,"?>");case 5:return t.push("&",e.nodeName,";");default:t.push("??",e.nodeName)}}function Ja(e,t,i){e[t]=i}s.INVALID_STATE_ERR=(C[11]="Invalid state",11),s.SYNTAX_ERR=(C[12]="Syntax error",12),s.INVALID_MODIFICATION_ERR=(C[13]="Invalid modification",13),s.NAMESPACE_ERR=(C[14]="Invalid namespace",14),s.INVALID_ACCESS_ERR=(C[15]="Invalid access",15),k.prototype=Error.prototype,la(s,k),ca.prototype={length:0,item:function(e){return 0<=e&&e<this.length?this[e]:null},toString:function(e,t){for(var i=[],s=0;s<this.length;s++)Qa(this[s],i,e,t);return i.join("")},filter:function(e){return Array.prototype.filter.call(this,e)},indexOf:function(e){return Array.prototype.indexOf.call(this,e)}},pa.prototype.item=function(e){return ma(this),this[e]||null},da(pa,ca),ga.prototype={length:0,item:ca.prototype.item,getNamedItem:function(e){for(var t=this.length;t--;){var i=this[t];if(i.nodeName==e)return i}},setNamedItem:function(e){var t=e.ownerElement;if(t&&t!=this._ownerElement)throw new k(10);t=this.getNamedItem(e.nodeName);return ya(this._ownerElement,this,e,t),t},setNamedItemNS:function(e){var t=e.ownerElement;if(t&&t!=this._ownerElement)throw new k(10);return t=this.getNamedItemNS(e.namespaceURI,e.localName),ya(this._ownerElement,this,e,t),t},removeNamedItem:function(e){e=this.getNamedItem(e);return _a(this._ownerElement,this,e),e},removeNamedItemNS:function(e,t){e=this.getNamedItemNS(e,t);return _a(this._ownerElement,this,e),e},getNamedItemNS:function(e,t){for(var i=this.length;i--;){var s=this[i];if(s.localName==t&&s.namespaceURI==e)return s}return null}},va.prototype={hasFeature:function(e,t){return!0},createDocument:function(e,t,i){var s=new Sa;return s.implementation=this,s.childNodes=new ca,s.doctype=i||null,i&&s.appendChild(i),t&&(i=s.createElementNS(e,t),s.appendChild(i)),s},createDocumentType:function(e,t,i){var s=new ja;return s.name=e,s.nodeName=e,s.publicId=t||"",s.systemId=i||"",s}},x.prototype={firstChild:null,lastChild:null,previousSibling:null,nextSibling:null,attributes:null,parentNode:null,childNodes:null,ownerDocument:null,nodeValue:null,namespaceURI:null,prefix:null,localName:null,insertBefore:function(e,t){return Ra(this,e,t)},replaceChild:function(e,t){Ra(this,e,t,Oa),t&&this.removeChild(t)},removeChild:function(e){return Ca(this,e)},appendChild:function(e){return this.insertBefore(e,null)},hasChildNodes:function(){return null!=this.firstChild},cloneNode:function(e){return function e(t,i,s){var r=new i.constructor;for(var n in i){var a;Object.prototype.hasOwnProperty.call(i,n)&&"object"!=typeof(a=i[n])&&a!=r[n]&&(r[n]=a)}i.childNodes&&(r.childNodes=new ca);r.ownerDocument=t;switch(r.nodeType){case 1:var o=i.attributes,l=r.attributes=new ga,d=o.length;l._ownerElement=r;for(var h=0;h<d;h++)r.setAttributeNode(e(t,o.item(h),!0));break;case 2:s=!0}if(s)for(var u=i.firstChild;u;)r.appendChild(e(t,u,s)),u=u.nextSibling;return r}(this.ownerDocument||this,this,e)},normalize:function(){for(var e=this.firstChild;e;){var t=e.nextSibling;t&&3==t.nodeType&&3==e.nodeType?(this.removeChild(t),e.appendData(t.data)):(e.normalize(),e=t)}},isSupported:function(e,t){return this.ownerDocument.implementation.hasFeature(e,t)},hasAttributes:function(){return 0<this.attributes.length},lookupPrefix:function(e){for(var t=this;t;){var i=t._nsMap;if(i)for(var s in i)if(Object.prototype.hasOwnProperty.call(i,s)&&i[s]===e)return s;t=2==t.nodeType?t.ownerDocument:t.parentNode}return null},lookupNamespaceURI:function(e){for(var t=this;t;){var i=t._nsMap;if(i&&Object.prototype.hasOwnProperty.call(i,e))return i[e];t=2==t.nodeType?t.ownerDocument:t.parentNode}return null},isDefaultNamespace:function(e){return null==this.lookupPrefix(e)}},la(n,x),la(n,x.prototype),Sa.prototype={nodeName:"#document",nodeType:9,doctype:null,documentElement:null,_inc:1,insertBefore:function(e,t){if(11==e.nodeType)for(var i=e.firstChild;i;){var s=i.nextSibling;this.insertBefore(i,t),i=s}else Ra(this,e,t),null===(e.ownerDocument=this).documentElement&&1===e.nodeType&&(this.documentElement=e);return e},removeChild:function(e){return this.documentElement==e&&(this.documentElement=null),Ca(this,e)},replaceChild:function(e,t){Ra(this,e,t,Oa),e.ownerDocument=this,t&&this.removeChild(t),xa(e)&&(this.documentElement=e)},importNode:function(e,t){return function e(t,i,s){var r;switch(i.nodeType){case 1:(r=i.cloneNode(!1)).ownerDocument=t;case 11:break;case 2:s=!0}r=r||i.cloneNode(!1);r.ownerDocument=t;r.parentNode=null;if(s)for(var n=i.firstChild;n;)r.appendChild(e(t,n,s)),n=n.nextSibling;return r}(this,e,t)},getElementById:function(t){var i=null;return Ta(this.documentElement,function(e){if(1==e.nodeType&&e.getAttribute("id")==t)return i=e,!0}),i},getElementsByClassName:function(a){var o=oa(a);return new pa(this,function(r){var n=[];return 0<o.length&&Ta(r.documentElement,function(e){var t,i,s;e!==r&&1===e.nodeType&&(t=e.getAttribute("class"))&&((i=a===t)||(t=oa(t),i=o.every((s=t,function(e){return s&&-1!==s.indexOf(e)}))),i)&&n.push(e)}),n})},createElement:function(e){var t=new Na;return t.ownerDocument=this,t.nodeName=e,t.tagName=e,t.localName=e,t.childNodes=new ca,(t.attributes=new ga)._ownerElement=t},createDocumentFragment:function(){var e=new za;return e.ownerDocument=this,e.childNodes=new ca,e},createTextNode:function(e){var t=new Ba;return t.ownerDocument=this,t.appendData(e),t},createComment:function(e){var t=new Fa;return t.ownerDocument=this,t.appendData(e),t},createCDATASection:function(e){var t=new qa;return t.ownerDocument=this,t.appendData(e),t},createProcessingInstruction:function(e,t){var i=new Wa;return i.ownerDocument=this,i.tagName=i.nodeName=i.target=e,i.nodeValue=i.data=t,i},createAttribute:function(e){var t=new Ma;return t.ownerDocument=this,t.name=e,t.nodeName=e,t.localName=e,t.specified=!0,t},createEntityReference:function(e){var t=new $a;return t.ownerDocument=this,t.nodeName=e,t},createElementNS:function(e,t){var i=new Na,s=t.split(":"),r=i.attributes=new ga;return i.childNodes=new ca,i.ownerDocument=this,i.nodeName=t,i.tagName=t,i.namespaceURI=e,2==s.length?(i.prefix=s[0],i.localName=s[1]):i.localName=t,r._ownerElement=i},createAttributeNS:function(e,t){var i=new Ma,s=t.split(":");return i.ownerDocument=this,i.nodeName=t,i.name=t,i.namespaceURI=e,i.specified=!0,2==s.length?(i.prefix=s[0],i.localName=s[1]):i.localName=t,i}},da(Sa,x),Sa.prototype.getElementsByTagName=(Na.prototype={nodeType:1,hasAttribute:function(e){return null!=this.getAttributeNode(e)},getAttribute:function(e){e=this.getAttributeNode(e);return e&&e.value||""},getAttributeNode:function(e){return this.attributes.getNamedItem(e)},setAttribute:function(e,t){e=this.ownerDocument.createAttribute(e);e.value=e.nodeValue=""+t,this.setAttributeNode(e)},removeAttribute:function(e){e=this.getAttributeNode(e);e&&this.removeAttributeNode(e)},appendChild:function(e){return 11===e.nodeType?this.insertBefore(e,null):(t=this,(e=e).parentNode&&e.parentNode.removeChild(e),e.parentNode=t,e.previousSibling=t.lastChild,e.nextSibling=null,e.previousSibling?e.previousSibling.nextSibling=e:t.firstChild=e,t.lastChild=e,Ea(t.ownerDocument,t,e),e);var t},setAttributeNode:function(e){return this.attributes.setNamedItem(e)},setAttributeNodeNS:function(e){return this.attributes.setNamedItemNS(e)},removeAttributeNode:function(e){return this.attributes.removeNamedItem(e.nodeName)},removeAttributeNS:function(e,t){e=this.getAttributeNodeNS(e,t);e&&this.removeAttributeNode(e)},hasAttributeNS:function(e,t){return null!=this.getAttributeNodeNS(e,t)},getAttributeNS:function(e,t){e=this.getAttributeNodeNS(e,t);return e&&e.value||""},setAttributeNS:function(e,t,i){e=this.ownerDocument.createAttributeNS(e,t);e.value=e.nodeValue=""+i,this.setAttributeNode(e)},getAttributeNodeNS:function(e,t){return this.attributes.getNamedItemNS(e,t)},getElementsByTagName:function(s){return new pa(this,function(t){var i=[];return Ta(t,function(e){e===t||1!=e.nodeType||"*"!==s&&e.tagName!=s||i.push(e)}),i})},getElementsByTagNameNS:function(s,r){return new pa(this,function(t){var i=[];return Ta(t,function(e){e===t||1!==e.nodeType||"*"!==s&&e.namespaceURI!==s||"*"!==r&&e.localName!=r||i.push(e)}),i})}}).getElementsByTagName,Sa.prototype.getElementsByTagNameNS=Na.prototype.getElementsByTagNameNS,da(Na,x),Ma.prototype.nodeType=2,da(Ma,x),Ua.prototype={data:"",substringData:function(e,t){return this.data.substring(e,e+t)},appendData:function(e){e=this.data+e,this.nodeValue=this.data=e,this.length=e.length},insertData:function(e,t){this.replaceData(e,0,t)},appendChild:function(e){throw new Error(C[ha])},deleteData:function(e,t){this.replaceData(e,t,"")},replaceData:function(e,t,i){var s=this.data.substring(0,e),e=this.data.substring(e+t);this.nodeValue=this.data=i=s+i+e,this.length=i.length}},da(Ua,x),Ba.prototype={nodeName:"#text",nodeType:3,splitText:function(e){var t=(i=this.data).substring(e),i=i.substring(0,e),e=(this.data=this.nodeValue=i,this.length=i.length,this.ownerDocument.createTextNode(t));return this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling),e}},da(Ba,Ua),Fa.prototype={nodeName:"#comment",nodeType:8},da(Fa,Ua),qa.prototype={nodeName:"#cdata-section",nodeType:4},da(qa,Ua),ja.prototype.nodeType=10,da(ja,x),Ha.prototype.nodeType=12,da(Ha,x),Va.prototype.nodeType=6,da(Va,x),$a.prototype.nodeType=5,da($a,x),za.prototype.nodeName="#document-fragment",za.prototype.nodeType=11,da(za,x),Wa.prototype.nodeType=7,da(Wa,x),Ga.prototype.serializeToString=function(e,t,i){return Xa.call(e,t,i)},x.prototype.toString=Xa;try{Object.defineProperty&&(Object.defineProperty(pa.prototype,"length",{get:function(){return ma(this),this.$$length}}),Object.defineProperty(x.prototype,"textContent",{get:function(){return function e(t){switch(t.nodeType){case 1:case 11:var i=[];for(t=t.firstChild;t;)7!==t.nodeType&&8!==t.nodeType&&i.push(e(t)),t=t.nextSibling;return i.join("");default:return t.nodeValue}}(this)},set:function(e){switch(this.nodeType){case 1:case 11:for(;this.firstChild;)this.removeChild(this.firstChild);(e||String(e))&&this.appendChild(this.ownerDocument.createTextNode(e));break;default:this.data=e,this.value=e,this.nodeValue=e}}}),Ja=function(e,t,i){e["$$"+t]=i})}catch(e){}var Ur={DocumentType:ja,DOMException:k,DOMImplementation:va,Element:Na,Node:x,NodeList:ca,XMLSerializer:Ga},Za=Ut(function(e,t){var i=ia.freeze;t.XML_ENTITIES=i({amp:"&",apos:"'",gt:">",lt:"<",quot:'"'}),t.HTML_ENTITIES=i({Aacute:"Á",aacute:"á",Abreve:"Ă",abreve:"ă",ac:"∾",acd:"∿",acE:"∾̳",Acirc:"Â",acirc:"â",acute:"´",Acy:"А",acy:"а",AElig:"Æ",aelig:"æ",af:"⁡",Afr:"𝔄",afr:"𝔞",Agrave:"À",agrave:"à",alefsym:"ℵ",aleph:"ℵ",Alpha:"Α",alpha:"α",Amacr:"Ā",amacr:"ā",amalg:"⨿",AMP:"&",amp:"&",And:"⩓",and:"∧",andand:"⩕",andd:"⩜",andslope:"⩘",andv:"⩚",ang:"∠",ange:"⦤",angle:"∠",angmsd:"∡",angmsdaa:"⦨",angmsdab:"⦩",angmsdac:"⦪",angmsdad:"⦫",angmsdae:"⦬",angmsdaf:"⦭",angmsdag:"⦮",angmsdah:"⦯",angrt:"∟",angrtvb:"⊾",angrtvbd:"⦝",angsph:"∢",angst:"Å",angzarr:"⍼",Aogon:"Ą",aogon:"ą",Aopf:"𝔸",aopf:"𝕒",ap:"≈",apacir:"⩯",apE:"⩰",ape:"≊",apid:"≋",apos:"'",ApplyFunction:"⁡",approx:"≈",approxeq:"≊",Aring:"Å",aring:"å",Ascr:"𝒜",ascr:"𝒶",Assign:"≔",ast:"*",asymp:"≈",asympeq:"≍",Atilde:"Ã",atilde:"ã",Auml:"Ä",auml:"ä",awconint:"∳",awint:"⨑",backcong:"≌",backepsilon:"϶",backprime:"‵",backsim:"∽",backsimeq:"⋍",Backslash:"∖",Barv:"⫧",barvee:"⊽",Barwed:"⌆",barwed:"⌅",barwedge:"⌅",bbrk:"⎵",bbrktbrk:"⎶",bcong:"≌",Bcy:"Б",bcy:"б",bdquo:"„",becaus:"∵",Because:"∵",because:"∵",bemptyv:"⦰",bepsi:"϶",bernou:"ℬ",Bernoullis:"ℬ",Beta:"Β",beta:"β",beth:"ℶ",between:"≬",Bfr:"𝔅",bfr:"𝔟",bigcap:"⋂",bigcirc:"◯",bigcup:"⋃",bigodot:"⨀",bigoplus:"⨁",bigotimes:"⨂",bigsqcup:"⨆",bigstar:"★",bigtriangledown:"▽",bigtriangleup:"△",biguplus:"⨄",bigvee:"⋁",bigwedge:"⋀",bkarow:"⤍",blacklozenge:"⧫",blacksquare:"▪",blacktriangle:"▴",blacktriangledown:"▾",blacktriangleleft:"◂",blacktriangleright:"▸",blank:"␣",blk12:"▒",blk14:"░",blk34:"▓",block:"█",bne:"=⃥",bnequiv:"≡⃥",bNot:"⫭",bnot:"⌐",Bopf:"𝔹",bopf:"𝕓",bot:"⊥",bottom:"⊥",bowtie:"⋈",boxbox:"⧉",boxDL:"╗",boxDl:"╖",boxdL:"╕",boxdl:"┐",boxDR:"╔",boxDr:"╓",boxdR:"╒",boxdr:"┌",boxH:"═",boxh:"─",boxHD:"╦",boxHd:"╤",boxhD:"╥",boxhd:"┬",boxHU:"╩",boxHu:"╧",boxhU:"╨",boxhu:"┴",boxminus:"⊟",boxplus:"⊞",boxtimes:"⊠",boxUL:"╝",boxUl:"╜",boxuL:"╛",boxul:"┘",boxUR:"╚",boxUr:"╙",boxuR:"╘",boxur:"└",boxV:"║",boxv:"│",boxVH:"╬",boxVh:"╫",boxvH:"╪",boxvh:"┼",boxVL:"╣",boxVl:"╢",boxvL:"╡",boxvl:"┤",boxVR:"╠",boxVr:"╟",boxvR:"╞",boxvr:"├",bprime:"‵",Breve:"˘",breve:"˘",brvbar:"¦",Bscr:"ℬ",bscr:"𝒷",bsemi:"⁏",bsim:"∽",bsime:"⋍",bsol:"\\",bsolb:"⧅",bsolhsub:"⟈",bull:"•",bullet:"•",bump:"≎",bumpE:"⪮",bumpe:"≏",Bumpeq:"≎",bumpeq:"≏",Cacute:"Ć",cacute:"ć",Cap:"⋒",cap:"∩",capand:"⩄",capbrcup:"⩉",capcap:"⩋",capcup:"⩇",capdot:"⩀",CapitalDifferentialD:"ⅅ",caps:"∩︀",caret:"⁁",caron:"ˇ",Cayleys:"ℭ",ccaps:"⩍",Ccaron:"Č",ccaron:"č",Ccedil:"Ç",ccedil:"ç",Ccirc:"Ĉ",ccirc:"ĉ",Cconint:"∰",ccups:"⩌",ccupssm:"⩐",Cdot:"Ċ",cdot:"ċ",cedil:"¸",Cedilla:"¸",cemptyv:"⦲",cent:"¢",CenterDot:"·",centerdot:"·",Cfr:"ℭ",cfr:"𝔠",CHcy:"Ч",chcy:"ч",check:"✓",checkmark:"✓",Chi:"Χ",chi:"χ",cir:"○",circ:"ˆ",circeq:"≗",circlearrowleft:"↺",circlearrowright:"↻",circledast:"⊛",circledcirc:"⊚",circleddash:"⊝",CircleDot:"⊙",circledR:"®",circledS:"Ⓢ",CircleMinus:"⊖",CirclePlus:"⊕",CircleTimes:"⊗",cirE:"⧃",cire:"≗",cirfnint:"⨐",cirmid:"⫯",cirscir:"⧂",ClockwiseContourIntegral:"∲",CloseCurlyDoubleQuote:"”",CloseCurlyQuote:"’",clubs:"♣",clubsuit:"♣",Colon:"∷",colon:":",Colone:"⩴",colone:"≔",coloneq:"≔",comma:",",commat:"@",comp:"∁",compfn:"∘",complement:"∁",complexes:"ℂ",cong:"≅",congdot:"⩭",Congruent:"≡",Conint:"∯",conint:"∮",ContourIntegral:"∮",Copf:"ℂ",copf:"𝕔",coprod:"∐",Coproduct:"∐",COPY:"©",copy:"©",copysr:"℗",CounterClockwiseContourIntegral:"∳",crarr:"↵",Cross:"⨯",cross:"✗",Cscr:"𝒞",cscr:"𝒸",csub:"⫏",csube:"⫑",csup:"⫐",csupe:"⫒",ctdot:"⋯",cudarrl:"⤸",cudarrr:"⤵",cuepr:"⋞",cuesc:"⋟",cularr:"↶",cularrp:"⤽",Cup:"⋓",cup:"∪",cupbrcap:"⩈",CupCap:"≍",cupcap:"⩆",cupcup:"⩊",cupdot:"⊍",cupor:"⩅",cups:"∪︀",curarr:"↷",curarrm:"⤼",curlyeqprec:"⋞",curlyeqsucc:"⋟",curlyvee:"⋎",curlywedge:"⋏",curren:"¤",curvearrowleft:"↶",curvearrowright:"↷",cuvee:"⋎",cuwed:"⋏",cwconint:"∲",cwint:"∱",cylcty:"⌭",Dagger:"‡",dagger:"†",daleth:"ℸ",Darr:"↡",dArr:"⇓",darr:"↓",dash:"‐",Dashv:"⫤",dashv:"⊣",dbkarow:"⤏",dblac:"˝",Dcaron:"Ď",dcaron:"ď",Dcy:"Д",dcy:"д",DD:"ⅅ",dd:"ⅆ",ddagger:"‡",ddarr:"⇊",DDotrahd:"⤑",ddotseq:"⩷",deg:"°",Del:"∇",Delta:"Δ",delta:"δ",demptyv:"⦱",dfisht:"⥿",Dfr:"𝔇",dfr:"𝔡",dHar:"⥥",dharl:"⇃",dharr:"⇂",DiacriticalAcute:"´",DiacriticalDot:"˙",DiacriticalDoubleAcute:"˝",DiacriticalGrave:"`",DiacriticalTilde:"˜",diam:"⋄",Diamond:"⋄",diamond:"⋄",diamondsuit:"♦",diams:"♦",die:"¨",DifferentialD:"ⅆ",digamma:"ϝ",disin:"⋲",div:"÷",divide:"÷",divideontimes:"⋇",divonx:"⋇",DJcy:"Ђ",djcy:"ђ",dlcorn:"⌞",dlcrop:"⌍",dollar:"$",Dopf:"𝔻",dopf:"𝕕",Dot:"¨",dot:"˙",DotDot:"⃜",doteq:"≐",doteqdot:"≑",DotEqual:"≐",dotminus:"∸",dotplus:"∔",dotsquare:"⊡",doublebarwedge:"⌆",DoubleContourIntegral:"∯",DoubleDot:"¨",DoubleDownArrow:"⇓",DoubleLeftArrow:"⇐",DoubleLeftRightArrow:"⇔",DoubleLeftTee:"⫤",DoubleLongLeftArrow:"⟸",DoubleLongLeftRightArrow:"⟺",DoubleLongRightArrow:"⟹",DoubleRightArrow:"⇒",DoubleRightTee:"⊨",DoubleUpArrow:"⇑",DoubleUpDownArrow:"⇕",DoubleVerticalBar:"∥",DownArrow:"↓",Downarrow:"⇓",downarrow:"↓",DownArrowBar:"⤓",DownArrowUpArrow:"⇵",DownBreve:"̑",downdownarrows:"⇊",downharpoonleft:"⇃",downharpoonright:"⇂",DownLeftRightVector:"⥐",DownLeftTeeVector:"⥞",DownLeftVector:"↽",DownLeftVectorBar:"⥖",DownRightTeeVector:"⥟",DownRightVector:"⇁",DownRightVectorBar:"⥗",DownTee:"⊤",DownTeeArrow:"↧",drbkarow:"⤐",drcorn:"⌟",drcrop:"⌌",Dscr:"𝒟",dscr:"𝒹",DScy:"Ѕ",dscy:"ѕ",dsol:"⧶",Dstrok:"Đ",dstrok:"đ",dtdot:"⋱",dtri:"▿",dtrif:"▾",duarr:"⇵",duhar:"⥯",dwangle:"⦦",DZcy:"Џ",dzcy:"џ",dzigrarr:"⟿",Eacute:"É",eacute:"é",easter:"⩮",Ecaron:"Ě",ecaron:"ě",ecir:"≖",Ecirc:"Ê",ecirc:"ê",ecolon:"≕",Ecy:"Э",ecy:"э",eDDot:"⩷",Edot:"Ė",eDot:"≑",edot:"ė",ee:"ⅇ",efDot:"≒",Efr:"𝔈",efr:"𝔢",eg:"⪚",Egrave:"È",egrave:"è",egs:"⪖",egsdot:"⪘",el:"⪙",Element:"∈",elinters:"⏧",ell:"ℓ",els:"⪕",elsdot:"⪗",Emacr:"Ē",emacr:"ē",empty:"∅",emptyset:"∅",EmptySmallSquare:"◻",emptyv:"∅",EmptyVerySmallSquare:"▫",emsp:" ",emsp13:" ",emsp14:" ",ENG:"Ŋ",eng:"ŋ",ensp:" ",Eogon:"Ę",eogon:"ę",Eopf:"𝔼",eopf:"𝕖",epar:"⋕",eparsl:"⧣",eplus:"⩱",epsi:"ε",Epsilon:"Ε",epsilon:"ε",epsiv:"ϵ",eqcirc:"≖",eqcolon:"≕",eqsim:"≂",eqslantgtr:"⪖",eqslantless:"⪕",Equal:"⩵",equals:"=",EqualTilde:"≂",equest:"≟",Equilibrium:"⇌",equiv:"≡",equivDD:"⩸",eqvparsl:"⧥",erarr:"⥱",erDot:"≓",Escr:"ℰ",escr:"ℯ",esdot:"≐",Esim:"⩳",esim:"≂",Eta:"Η",eta:"η",ETH:"Ð",eth:"ð",Euml:"Ë",euml:"ë",euro:"€",excl:"!",exist:"∃",Exists:"∃",expectation:"ℰ",ExponentialE:"ⅇ",exponentiale:"ⅇ",fallingdotseq:"≒",Fcy:"Ф",fcy:"ф",female:"♀",ffilig:"ffi",fflig:"ff",ffllig:"ffl",Ffr:"𝔉",ffr:"𝔣",filig:"fi",FilledSmallSquare:"◼",FilledVerySmallSquare:"▪",fjlig:"fj",flat:"♭",fllig:"fl",fltns:"▱",fnof:"ƒ",Fopf:"𝔽",fopf:"𝕗",ForAll:"∀",forall:"∀",fork:"⋔",forkv:"⫙",Fouriertrf:"ℱ",fpartint:"⨍",frac12:"½",frac13:"⅓",frac14:"¼",frac15:"⅕",frac16:"⅙",frac18:"⅛",frac23:"⅔",frac25:"⅖",frac34:"¾",frac35:"⅗",frac38:"⅜",frac45:"⅘",frac56:"⅚",frac58:"⅝",frac78:"⅞",frasl:"⁄",frown:"⌢",Fscr:"ℱ",fscr:"𝒻",gacute:"ǵ",Gamma:"Γ",gamma:"γ",Gammad:"Ϝ",gammad:"ϝ",gap:"⪆",Gbreve:"Ğ",gbreve:"ğ",Gcedil:"Ģ",Gcirc:"Ĝ",gcirc:"ĝ",Gcy:"Г",gcy:"г",Gdot:"Ġ",gdot:"ġ",gE:"≧",ge:"≥",gEl:"⪌",gel:"⋛",geq:"≥",geqq:"≧",geqslant:"⩾",ges:"⩾",gescc:"⪩",gesdot:"⪀",gesdoto:"⪂",gesdotol:"⪄",gesl:"⋛︀",gesles:"⪔",Gfr:"𝔊",gfr:"𝔤",Gg:"⋙",gg:"≫",ggg:"⋙",gimel:"ℷ",GJcy:"Ѓ",gjcy:"ѓ",gl:"≷",gla:"⪥",glE:"⪒",glj:"⪤",gnap:"⪊",gnapprox:"⪊",gnE:"≩",gne:"⪈",gneq:"⪈",gneqq:"≩",gnsim:"⋧",Gopf:"𝔾",gopf:"𝕘",grave:"`",GreaterEqual:"≥",GreaterEqualLess:"⋛",GreaterFullEqual:"≧",GreaterGreater:"⪢",GreaterLess:"≷",GreaterSlantEqual:"⩾",GreaterTilde:"≳",Gscr:"𝒢",gscr:"ℊ",gsim:"≳",gsime:"⪎",gsiml:"⪐",Gt:"≫",GT:">",gt:">",gtcc:"⪧",gtcir:"⩺",gtdot:"⋗",gtlPar:"⦕",gtquest:"⩼",gtrapprox:"⪆",gtrarr:"⥸",gtrdot:"⋗",gtreqless:"⋛",gtreqqless:"⪌",gtrless:"≷",gtrsim:"≳",gvertneqq:"≩︀",gvnE:"≩︀",Hacek:"ˇ",hairsp:" ",half:"½",hamilt:"ℋ",HARDcy:"Ъ",hardcy:"ъ",hArr:"⇔",harr:"↔",harrcir:"⥈",harrw:"↭",Hat:"^",hbar:"ℏ",Hcirc:"Ĥ",hcirc:"ĥ",hearts:"♥",heartsuit:"♥",hellip:"…",hercon:"⊹",Hfr:"ℌ",hfr:"𝔥",HilbertSpace:"ℋ",hksearow:"⤥",hkswarow:"⤦",hoarr:"⇿",homtht:"∻",hookleftarrow:"↩",hookrightarrow:"↪",Hopf:"ℍ",hopf:"𝕙",horbar:"―",HorizontalLine:"─",Hscr:"ℋ",hscr:"𝒽",hslash:"ℏ",Hstrok:"Ħ",hstrok:"ħ",HumpDownHump:"≎",HumpEqual:"≏",hybull:"⁃",hyphen:"‐",Iacute:"Í",iacute:"í",ic:"⁣",Icirc:"Î",icirc:"î",Icy:"И",icy:"и",Idot:"İ",IEcy:"Е",iecy:"е",iexcl:"¡",iff:"⇔",Ifr:"ℑ",ifr:"𝔦",Igrave:"Ì",igrave:"ì",ii:"ⅈ",iiiint:"⨌",iiint:"∭",iinfin:"⧜",iiota:"℩",IJlig:"IJ",ijlig:"ij",Im:"ℑ",Imacr:"Ī",imacr:"ī",image:"ℑ",ImaginaryI:"ⅈ",imagline:"ℐ",imagpart:"ℑ",imath:"ı",imof:"⊷",imped:"Ƶ",Implies:"⇒",in:"∈",incare:"℅",infin:"∞",infintie:"⧝",inodot:"ı",Int:"∬",int:"∫",intcal:"⊺",integers:"ℤ",Integral:"∫",intercal:"⊺",Intersection:"⋂",intlarhk:"⨗",intprod:"⨼",InvisibleComma:"⁣",InvisibleTimes:"⁢",IOcy:"Ё",iocy:"ё",Iogon:"Į",iogon:"į",Iopf:"𝕀",iopf:"𝕚",Iota:"Ι",iota:"ι",iprod:"⨼",iquest:"¿",Iscr:"ℐ",iscr:"𝒾",isin:"∈",isindot:"⋵",isinE:"⋹",isins:"⋴",isinsv:"⋳",isinv:"∈",it:"⁢",Itilde:"Ĩ",itilde:"ĩ",Iukcy:"І",iukcy:"і",Iuml:"Ï",iuml:"ï",Jcirc:"Ĵ",jcirc:"ĵ",Jcy:"Й",jcy:"й",Jfr:"𝔍",jfr:"𝔧",jmath:"ȷ",Jopf:"𝕁",jopf:"𝕛",Jscr:"𝒥",jscr:"𝒿",Jsercy:"Ј",jsercy:"ј",Jukcy:"Є",jukcy:"є",Kappa:"Κ",kappa:"κ",kappav:"ϰ",Kcedil:"Ķ",kcedil:"ķ",Kcy:"К",kcy:"к",Kfr:"𝔎",kfr:"𝔨",kgreen:"ĸ",KHcy:"Х",khcy:"х",KJcy:"Ќ",kjcy:"ќ",Kopf:"𝕂",kopf:"𝕜",Kscr:"𝒦",kscr:"𝓀",lAarr:"⇚",Lacute:"Ĺ",lacute:"ĺ",laemptyv:"⦴",lagran:"ℒ",Lambda:"Λ",lambda:"λ",Lang:"⟪",lang:"⟨",langd:"⦑",langle:"⟨",lap:"⪅",Laplacetrf:"ℒ",laquo:"«",Larr:"↞",lArr:"⇐",larr:"←",larrb:"⇤",larrbfs:"⤟",larrfs:"⤝",larrhk:"↩",larrlp:"↫",larrpl:"⤹",larrsim:"⥳",larrtl:"↢",lat:"⪫",lAtail:"⤛",latail:"⤙",late:"⪭",lates:"⪭︀",lBarr:"⤎",lbarr:"⤌",lbbrk:"❲",lbrace:"{",lbrack:"[",lbrke:"⦋",lbrksld:"⦏",lbrkslu:"⦍",Lcaron:"Ľ",lcaron:"ľ",Lcedil:"Ļ",lcedil:"ļ",lceil:"⌈",lcub:"{",Lcy:"Л",lcy:"л",ldca:"⤶",ldquo:"“",ldquor:"„",ldrdhar:"⥧",ldrushar:"⥋",ldsh:"↲",lE:"≦",le:"≤",LeftAngleBracket:"⟨",LeftArrow:"←",Leftarrow:"⇐",leftarrow:"←",LeftArrowBar:"⇤",LeftArrowRightArrow:"⇆",leftarrowtail:"↢",LeftCeiling:"⌈",LeftDoubleBracket:"⟦",LeftDownTeeVector:"⥡",LeftDownVector:"⇃",LeftDownVectorBar:"⥙",LeftFloor:"⌊",leftharpoondown:"↽",leftharpoonup:"↼",leftleftarrows:"⇇",LeftRightArrow:"↔",Leftrightarrow:"⇔",leftrightarrow:"↔",leftrightarrows:"⇆",leftrightharpoons:"⇋",leftrightsquigarrow:"↭",LeftRightVector:"⥎",LeftTee:"⊣",LeftTeeArrow:"↤",LeftTeeVector:"⥚",leftthreetimes:"⋋",LeftTriangle:"⊲",LeftTriangleBar:"⧏",LeftTriangleEqual:"⊴",LeftUpDownVector:"⥑",LeftUpTeeVector:"⥠",LeftUpVector:"↿",LeftUpVectorBar:"⥘",LeftVector:"↼",LeftVectorBar:"⥒",lEg:"⪋",leg:"⋚",leq:"≤",leqq:"≦",leqslant:"⩽",les:"⩽",lescc:"⪨",lesdot:"⩿",lesdoto:"⪁",lesdotor:"⪃",lesg:"⋚︀",lesges:"⪓",lessapprox:"⪅",lessdot:"⋖",lesseqgtr:"⋚",lesseqqgtr:"⪋",LessEqualGreater:"⋚",LessFullEqual:"≦",LessGreater:"≶",lessgtr:"≶",LessLess:"⪡",lesssim:"≲",LessSlantEqual:"⩽",LessTilde:"≲",lfisht:"⥼",lfloor:"⌊",Lfr:"𝔏",lfr:"𝔩",lg:"≶",lgE:"⪑",lHar:"⥢",lhard:"↽",lharu:"↼",lharul:"⥪",lhblk:"▄",LJcy:"Љ",ljcy:"љ",Ll:"⋘",ll:"≪",llarr:"⇇",llcorner:"⌞",Lleftarrow:"⇚",llhard:"⥫",lltri:"◺",Lmidot:"Ŀ",lmidot:"ŀ",lmoust:"⎰",lmoustache:"⎰",lnap:"⪉",lnapprox:"⪉",lnE:"≨",lne:"⪇",lneq:"⪇",lneqq:"≨",lnsim:"⋦",loang:"⟬",loarr:"⇽",lobrk:"⟦",LongLeftArrow:"⟵",Longleftarrow:"⟸",longleftarrow:"⟵",LongLeftRightArrow:"⟷",Longleftrightarrow:"⟺",longleftrightarrow:"⟷",longmapsto:"⟼",LongRightArrow:"⟶",Longrightarrow:"⟹",longrightarrow:"⟶",looparrowleft:"↫",looparrowright:"↬",lopar:"⦅",Lopf:"𝕃",lopf:"𝕝",loplus:"⨭",lotimes:"⨴",lowast:"∗",lowbar:"_",LowerLeftArrow:"↙",LowerRightArrow:"↘",loz:"◊",lozenge:"◊",lozf:"⧫",lpar:"(",lparlt:"⦓",lrarr:"⇆",lrcorner:"⌟",lrhar:"⇋",lrhard:"⥭",lrm:"‎",lrtri:"⊿",lsaquo:"‹",Lscr:"ℒ",lscr:"𝓁",Lsh:"↰",lsh:"↰",lsim:"≲",lsime:"⪍",lsimg:"⪏",lsqb:"[",lsquo:"‘",lsquor:"‚",Lstrok:"Ł",lstrok:"ł",Lt:"≪",LT:"<",lt:"<",ltcc:"⪦",ltcir:"⩹",ltdot:"⋖",lthree:"⋋",ltimes:"⋉",ltlarr:"⥶",ltquest:"⩻",ltri:"◃",ltrie:"⊴",ltrif:"◂",ltrPar:"⦖",lurdshar:"⥊",luruhar:"⥦",lvertneqq:"≨︀",lvnE:"≨︀",macr:"¯",male:"♂",malt:"✠",maltese:"✠",Map:"⤅",map:"↦",mapsto:"↦",mapstodown:"↧",mapstoleft:"↤",mapstoup:"↥",marker:"▮",mcomma:"⨩",Mcy:"М",mcy:"м",mdash:"—",mDDot:"∺",measuredangle:"∡",MediumSpace:" ",Mellintrf:"ℳ",Mfr:"𝔐",mfr:"𝔪",mho:"℧",micro:"µ",mid:"∣",midast:"*",midcir:"⫰",middot:"·",minus:"−",minusb:"⊟",minusd:"∸",minusdu:"⨪",MinusPlus:"∓",mlcp:"⫛",mldr:"…",mnplus:"∓",models:"⊧",Mopf:"𝕄",mopf:"𝕞",mp:"∓",Mscr:"ℳ",mscr:"𝓂",mstpos:"∾",Mu:"Μ",mu:"μ",multimap:"⊸",mumap:"⊸",nabla:"∇",Nacute:"Ń",nacute:"ń",nang:"∠⃒",nap:"≉",napE:"⩰̸",napid:"≋̸",napos:"ʼn",napprox:"≉",natur:"♮",natural:"♮",naturals:"ℕ",nbsp:" ",nbump:"≎̸",nbumpe:"≏̸",ncap:"⩃",Ncaron:"Ň",ncaron:"ň",Ncedil:"Ņ",ncedil:"ņ",ncong:"≇",ncongdot:"⩭̸",ncup:"⩂",Ncy:"Н",ncy:"н",ndash:"–",ne:"≠",nearhk:"⤤",neArr:"⇗",nearr:"↗",nearrow:"↗",nedot:"≐̸",NegativeMediumSpace:"​",NegativeThickSpace:"​",NegativeThinSpace:"​",NegativeVeryThinSpace:"​",nequiv:"≢",nesear:"⤨",nesim:"≂̸",NestedGreaterGreater:"≫",NestedLessLess:"≪",NewLine:"\n",nexist:"∄",nexists:"∄",Nfr:"𝔑",nfr:"𝔫",ngE:"≧̸",nge:"≱",ngeq:"≱",ngeqq:"≧̸",ngeqslant:"⩾̸",nges:"⩾̸",nGg:"⋙̸",ngsim:"≵",nGt:"≫⃒",ngt:"≯",ngtr:"≯",nGtv:"≫̸",nhArr:"⇎",nharr:"↮",nhpar:"⫲",ni:"∋",nis:"⋼",nisd:"⋺",niv:"∋",NJcy:"Њ",njcy:"њ",nlArr:"⇍",nlarr:"↚",nldr:"‥",nlE:"≦̸",nle:"≰",nLeftarrow:"⇍",nleftarrow:"↚",nLeftrightarrow:"⇎",nleftrightarrow:"↮",nleq:"≰",nleqq:"≦̸",nleqslant:"⩽̸",nles:"⩽̸",nless:"≮",nLl:"⋘̸",nlsim:"≴",nLt:"≪⃒",nlt:"≮",nltri:"⋪",nltrie:"⋬",nLtv:"≪̸",nmid:"∤",NoBreak:"⁠",NonBreakingSpace:" ",Nopf:"ℕ",nopf:"𝕟",Not:"⫬",not:"¬",NotCongruent:"≢",NotCupCap:"≭",NotDoubleVerticalBar:"∦",NotElement:"∉",NotEqual:"≠",NotEqualTilde:"≂̸",NotExists:"∄",NotGreater:"≯",NotGreaterEqual:"≱",NotGreaterFullEqual:"≧̸",NotGreaterGreater:"≫̸",NotGreaterLess:"≹",NotGreaterSlantEqual:"⩾̸",NotGreaterTilde:"≵",NotHumpDownHump:"≎̸",NotHumpEqual:"≏̸",notin:"∉",notindot:"⋵̸",notinE:"⋹̸",notinva:"∉",notinvb:"⋷",notinvc:"⋶",NotLeftTriangle:"⋪",NotLeftTriangleBar:"⧏̸",NotLeftTriangleEqual:"⋬",NotLess:"≮",NotLessEqual:"≰",NotLessGreater:"≸",NotLessLess:"≪̸",NotLessSlantEqual:"⩽̸",NotLessTilde:"≴",NotNestedGreaterGreater:"⪢̸",NotNestedLessLess:"⪡̸",notni:"∌",notniva:"∌",notnivb:"⋾",notnivc:"⋽",NotPrecedes:"⊀",NotPrecedesEqual:"⪯̸",NotPrecedesSlantEqual:"⋠",NotReverseElement:"∌",NotRightTriangle:"⋫",NotRightTriangleBar:"⧐̸",NotRightTriangleEqual:"⋭",NotSquareSubset:"⊏̸",NotSquareSubsetEqual:"⋢",NotSquareSuperset:"⊐̸",NotSquareSupersetEqual:"⋣",NotSubset:"⊂⃒",NotSubsetEqual:"⊈",NotSucceeds:"⊁",NotSucceedsEqual:"⪰̸",NotSucceedsSlantEqual:"⋡",NotSucceedsTilde:"≿̸",NotSuperset:"⊃⃒",NotSupersetEqual:"⊉",NotTilde:"≁",NotTildeEqual:"≄",NotTildeFullEqual:"≇",NotTildeTilde:"≉",NotVerticalBar:"∤",npar:"∦",nparallel:"∦",nparsl:"⫽⃥",npart:"∂̸",npolint:"⨔",npr:"⊀",nprcue:"⋠",npre:"⪯̸",nprec:"⊀",npreceq:"⪯̸",nrArr:"⇏",nrarr:"↛",nrarrc:"⤳̸",nrarrw:"↝̸",nRightarrow:"⇏",nrightarrow:"↛",nrtri:"⋫",nrtrie:"⋭",nsc:"⊁",nsccue:"⋡",nsce:"⪰̸",Nscr:"𝒩",nscr:"𝓃",nshortmid:"∤",nshortparallel:"∦",nsim:"≁",nsime:"≄",nsimeq:"≄",nsmid:"∤",nspar:"∦",nsqsube:"⋢",nsqsupe:"⋣",nsub:"⊄",nsubE:"⫅̸",nsube:"⊈",nsubset:"⊂⃒",nsubseteq:"⊈",nsubseteqq:"⫅̸",nsucc:"⊁",nsucceq:"⪰̸",nsup:"⊅",nsupE:"⫆̸",nsupe:"⊉",nsupset:"⊃⃒",nsupseteq:"⊉",nsupseteqq:"⫆̸",ntgl:"≹",Ntilde:"Ñ",ntilde:"ñ",ntlg:"≸",ntriangleleft:"⋪",ntrianglelefteq:"⋬",ntriangleright:"⋫",ntrianglerighteq:"⋭",Nu:"Ν",nu:"ν",num:"#",numero:"№",numsp:" ",nvap:"≍⃒",nVDash:"⊯",nVdash:"⊮",nvDash:"⊭",nvdash:"⊬",nvge:"≥⃒",nvgt:">⃒",nvHarr:"⤄",nvinfin:"⧞",nvlArr:"⤂",nvle:"≤⃒",nvlt:"<⃒",nvltrie:"⊴⃒",nvrArr:"⤃",nvrtrie:"⊵⃒",nvsim:"∼⃒",nwarhk:"⤣",nwArr:"⇖",nwarr:"↖",nwarrow:"↖",nwnear:"⤧",Oacute:"Ó",oacute:"ó",oast:"⊛",ocir:"⊚",Ocirc:"Ô",ocirc:"ô",Ocy:"О",ocy:"о",odash:"⊝",Odblac:"Ő",odblac:"ő",odiv:"⨸",odot:"⊙",odsold:"⦼",OElig:"Œ",oelig:"œ",ofcir:"⦿",Ofr:"𝔒",ofr:"𝔬",ogon:"˛",Ograve:"Ò",ograve:"ò",ogt:"⧁",ohbar:"⦵",ohm:"Ω",oint:"∮",olarr:"↺",olcir:"⦾",olcross:"⦻",oline:"‾",olt:"⧀",Omacr:"Ō",omacr:"ō",Omega:"Ω",omega:"ω",Omicron:"Ο",omicron:"ο",omid:"⦶",ominus:"⊖",Oopf:"𝕆",oopf:"𝕠",opar:"⦷",OpenCurlyDoubleQuote:"“",OpenCurlyQuote:"‘",operp:"⦹",oplus:"⊕",Or:"⩔",or:"∨",orarr:"↻",ord:"⩝",order:"ℴ",orderof:"ℴ",ordf:"ª",ordm:"º",origof:"⊶",oror:"⩖",orslope:"⩗",orv:"⩛",oS:"Ⓢ",Oscr:"𝒪",oscr:"ℴ",Oslash:"Ø",oslash:"ø",osol:"⊘",Otilde:"Õ",otilde:"õ",Otimes:"⨷",otimes:"⊗",otimesas:"⨶",Ouml:"Ö",ouml:"ö",ovbar:"⌽",OverBar:"‾",OverBrace:"⏞",OverBracket:"⎴",OverParenthesis:"⏜",par:"∥",para:"¶",parallel:"∥",parsim:"⫳",parsl:"⫽",part:"∂",PartialD:"∂",Pcy:"П",pcy:"п",percnt:"%",period:".",permil:"‰",perp:"⊥",pertenk:"‱",Pfr:"𝔓",pfr:"𝔭",Phi:"Φ",phi:"φ",phiv:"ϕ",phmmat:"ℳ",phone:"☎",Pi:"Π",pi:"π",pitchfork:"⋔",piv:"ϖ",planck:"ℏ",planckh:"ℎ",plankv:"ℏ",plus:"+",plusacir:"⨣",plusb:"⊞",pluscir:"⨢",plusdo:"∔",plusdu:"⨥",pluse:"⩲",PlusMinus:"±",plusmn:"±",plussim:"⨦",plustwo:"⨧",pm:"±",Poincareplane:"ℌ",pointint:"⨕",Popf:"ℙ",popf:"𝕡",pound:"£",Pr:"⪻",pr:"≺",prap:"⪷",prcue:"≼",prE:"⪳",pre:"⪯",prec:"≺",precapprox:"⪷",preccurlyeq:"≼",Precedes:"≺",PrecedesEqual:"⪯",PrecedesSlantEqual:"≼",PrecedesTilde:"≾",preceq:"⪯",precnapprox:"⪹",precneqq:"⪵",precnsim:"⋨",precsim:"≾",Prime:"″",prime:"′",primes:"ℙ",prnap:"⪹",prnE:"⪵",prnsim:"⋨",prod:"∏",Product:"∏",profalar:"⌮",profline:"⌒",profsurf:"⌓",prop:"∝",Proportion:"∷",Proportional:"∝",propto:"∝",prsim:"≾",prurel:"⊰",Pscr:"𝒫",pscr:"𝓅",Psi:"Ψ",psi:"ψ",puncsp:" ",Qfr:"𝔔",qfr:"𝔮",qint:"⨌",Qopf:"ℚ",qopf:"𝕢",qprime:"⁗",Qscr:"𝒬",qscr:"𝓆",quaternions:"ℍ",quatint:"⨖",quest:"?",questeq:"≟",QUOT:'"',quot:'"',rAarr:"⇛",race:"∽̱",Racute:"Ŕ",racute:"ŕ",radic:"√",raemptyv:"⦳",Rang:"⟫",rang:"⟩",rangd:"⦒",range:"⦥",rangle:"⟩",raquo:"»",Rarr:"↠",rArr:"⇒",rarr:"→",rarrap:"⥵",rarrb:"⇥",rarrbfs:"⤠",rarrc:"⤳",rarrfs:"⤞",rarrhk:"↪",rarrlp:"↬",rarrpl:"⥅",rarrsim:"⥴",Rarrtl:"⤖",rarrtl:"↣",rarrw:"↝",rAtail:"⤜",ratail:"⤚",ratio:"∶",rationals:"ℚ",RBarr:"⤐",rBarr:"⤏",rbarr:"⤍",rbbrk:"❳",rbrace:"}",rbrack:"]",rbrke:"⦌",rbrksld:"⦎",rbrkslu:"⦐",Rcaron:"Ř",rcaron:"ř",Rcedil:"Ŗ",rcedil:"ŗ",rceil:"⌉",rcub:"}",Rcy:"Р",rcy:"р",rdca:"⤷",rdldhar:"⥩",rdquo:"”",rdquor:"”",rdsh:"↳",Re:"ℜ",real:"ℜ",realine:"ℛ",realpart:"ℜ",reals:"ℝ",rect:"▭",REG:"®",reg:"®",ReverseElement:"∋",ReverseEquilibrium:"⇋",ReverseUpEquilibrium:"⥯",rfisht:"⥽",rfloor:"⌋",Rfr:"ℜ",rfr:"𝔯",rHar:"⥤",rhard:"⇁",rharu:"⇀",rharul:"⥬",Rho:"Ρ",rho:"ρ",rhov:"ϱ",RightAngleBracket:"⟩",RightArrow:"→",Rightarrow:"⇒",rightarrow:"→",RightArrowBar:"⇥",RightArrowLeftArrow:"⇄",rightarrowtail:"↣",RightCeiling:"⌉",RightDoubleBracket:"⟧",RightDownTeeVector:"⥝",RightDownVector:"⇂",RightDownVectorBar:"⥕",RightFloor:"⌋",rightharpoondown:"⇁",rightharpoonup:"⇀",rightleftarrows:"⇄",rightleftharpoons:"⇌",rightrightarrows:"⇉",rightsquigarrow:"↝",RightTee:"⊢",RightTeeArrow:"↦",RightTeeVector:"⥛",rightthreetimes:"⋌",RightTriangle:"⊳",RightTriangleBar:"⧐",RightTriangleEqual:"⊵",RightUpDownVector:"⥏",RightUpTeeVector:"⥜",RightUpVector:"↾",RightUpVectorBar:"⥔",RightVector:"⇀",RightVectorBar:"⥓",ring:"˚",risingdotseq:"≓",rlarr:"⇄",rlhar:"⇌",rlm:"‏",rmoust:"⎱",rmoustache:"⎱",rnmid:"⫮",roang:"⟭",roarr:"⇾",robrk:"⟧",ropar:"⦆",Ropf:"ℝ",ropf:"𝕣",roplus:"⨮",rotimes:"⨵",RoundImplies:"⥰",rpar:")",rpargt:"⦔",rppolint:"⨒",rrarr:"⇉",Rrightarrow:"⇛",rsaquo:"›",Rscr:"ℛ",rscr:"𝓇",Rsh:"↱",rsh:"↱",rsqb:"]",rsquo:"’",rsquor:"’",rthree:"⋌",rtimes:"⋊",rtri:"▹",rtrie:"⊵",rtrif:"▸",rtriltri:"⧎",RuleDelayed:"⧴",ruluhar:"⥨",rx:"℞",Sacute:"Ś",sacute:"ś",sbquo:"‚",Sc:"⪼",sc:"≻",scap:"⪸",Scaron:"Š",scaron:"š",sccue:"≽",scE:"⪴",sce:"⪰",Scedil:"Ş",scedil:"ş",Scirc:"Ŝ",scirc:"ŝ",scnap:"⪺",scnE:"⪶",scnsim:"⋩",scpolint:"⨓",scsim:"≿",Scy:"С",scy:"с",sdot:"⋅",sdotb:"⊡",sdote:"⩦",searhk:"⤥",seArr:"⇘",searr:"↘",searrow:"↘",sect:"§",semi:";",seswar:"⤩",setminus:"∖",setmn:"∖",sext:"✶",Sfr:"𝔖",sfr:"𝔰",sfrown:"⌢",sharp:"♯",SHCHcy:"Щ",shchcy:"щ",SHcy:"Ш",shcy:"ш",ShortDownArrow:"↓",ShortLeftArrow:"←",shortmid:"∣",shortparallel:"∥",ShortRightArrow:"→",ShortUpArrow:"↑",shy:"­",Sigma:"Σ",sigma:"σ",sigmaf:"ς",sigmav:"ς",sim:"∼",simdot:"⩪",sime:"≃",simeq:"≃",simg:"⪞",simgE:"⪠",siml:"⪝",simlE:"⪟",simne:"≆",simplus:"⨤",simrarr:"⥲",slarr:"←",SmallCircle:"∘",smallsetminus:"∖",smashp:"⨳",smeparsl:"⧤",smid:"∣",smile:"⌣",smt:"⪪",smte:"⪬",smtes:"⪬︀",SOFTcy:"Ь",softcy:"ь",sol:"/",solb:"⧄",solbar:"⌿",Sopf:"𝕊",sopf:"𝕤",spades:"♠",spadesuit:"♠",spar:"∥",sqcap:"⊓",sqcaps:"⊓︀",sqcup:"⊔",sqcups:"⊔︀",Sqrt:"√",sqsub:"⊏",sqsube:"⊑",sqsubset:"⊏",sqsubseteq:"⊑",sqsup:"⊐",sqsupe:"⊒",sqsupset:"⊐",sqsupseteq:"⊒",squ:"□",Square:"□",square:"□",SquareIntersection:"⊓",SquareSubset:"⊏",SquareSubsetEqual:"⊑",SquareSuperset:"⊐",SquareSupersetEqual:"⊒",SquareUnion:"⊔",squarf:"▪",squf:"▪",srarr:"→",Sscr:"𝒮",sscr:"𝓈",ssetmn:"∖",ssmile:"⌣",sstarf:"⋆",Star:"⋆",star:"☆",starf:"★",straightepsilon:"ϵ",straightphi:"ϕ",strns:"¯",Sub:"⋐",sub:"⊂",subdot:"⪽",subE:"⫅",sube:"⊆",subedot:"⫃",submult:"⫁",subnE:"⫋",subne:"⊊",subplus:"⪿",subrarr:"⥹",Subset:"⋐",subset:"⊂",subseteq:"⊆",subseteqq:"⫅",SubsetEqual:"⊆",subsetneq:"⊊",subsetneqq:"⫋",subsim:"⫇",subsub:"⫕",subsup:"⫓",succ:"≻",succapprox:"⪸",succcurlyeq:"≽",Succeeds:"≻",SucceedsEqual:"⪰",SucceedsSlantEqual:"≽",SucceedsTilde:"≿",succeq:"⪰",succnapprox:"⪺",succneqq:"⪶",succnsim:"⋩",succsim:"≿",SuchThat:"∋",Sum:"∑",sum:"∑",sung:"♪",Sup:"⋑",sup:"⊃",sup1:"¹",sup2:"²",sup3:"³",supdot:"⪾",supdsub:"⫘",supE:"⫆",supe:"⊇",supedot:"⫄",Superset:"⊃",SupersetEqual:"⊇",suphsol:"⟉",suphsub:"⫗",suplarr:"⥻",supmult:"⫂",supnE:"⫌",supne:"⊋",supplus:"⫀",Supset:"⋑",supset:"⊃",supseteq:"⊇",supseteqq:"⫆",supsetneq:"⊋",supsetneqq:"⫌",supsim:"⫈",supsub:"⫔",supsup:"⫖",swarhk:"⤦",swArr:"⇙",swarr:"↙",swarrow:"↙",swnwar:"⤪",szlig:"ß",Tab:"\t",target:"⌖",Tau:"Τ",tau:"τ",tbrk:"⎴",Tcaron:"Ť",tcaron:"ť",Tcedil:"Ţ",tcedil:"ţ",Tcy:"Т",tcy:"т",tdot:"⃛",telrec:"⌕",Tfr:"𝔗",tfr:"𝔱",there4:"∴",Therefore:"∴",therefore:"∴",Theta:"Θ",theta:"θ",thetasym:"ϑ",thetav:"ϑ",thickapprox:"≈",thicksim:"∼",ThickSpace:"  ",thinsp:" ",ThinSpace:" ",thkap:"≈",thksim:"∼",THORN:"Þ",thorn:"þ",Tilde:"∼",tilde:"˜",TildeEqual:"≃",TildeFullEqual:"≅",TildeTilde:"≈",times:"×",timesb:"⊠",timesbar:"⨱",timesd:"⨰",tint:"∭",toea:"⤨",top:"⊤",topbot:"⌶",topcir:"⫱",Topf:"𝕋",topf:"𝕥",topfork:"⫚",tosa:"⤩",tprime:"‴",TRADE:"™",trade:"™",triangle:"▵",triangledown:"▿",triangleleft:"◃",trianglelefteq:"⊴",triangleq:"≜",triangleright:"▹",trianglerighteq:"⊵",tridot:"◬",trie:"≜",triminus:"⨺",TripleDot:"⃛",triplus:"⨹",trisb:"⧍",tritime:"⨻",trpezium:"⏢",Tscr:"𝒯",tscr:"𝓉",TScy:"Ц",tscy:"ц",TSHcy:"Ћ",tshcy:"ћ",Tstrok:"Ŧ",tstrok:"ŧ",twixt:"≬",twoheadleftarrow:"↞",twoheadrightarrow:"↠",Uacute:"Ú",uacute:"ú",Uarr:"↟",uArr:"⇑",uarr:"↑",Uarrocir:"⥉",Ubrcy:"Ў",ubrcy:"ў",Ubreve:"Ŭ",ubreve:"ŭ",Ucirc:"Û",ucirc:"û",Ucy:"У",ucy:"у",udarr:"⇅",Udblac:"Ű",udblac:"ű",udhar:"⥮",ufisht:"⥾",Ufr:"𝔘",ufr:"𝔲",Ugrave:"Ù",ugrave:"ù",uHar:"⥣",uharl:"↿",uharr:"↾",uhblk:"▀",ulcorn:"⌜",ulcorner:"⌜",ulcrop:"⌏",ultri:"◸",Umacr:"Ū",umacr:"ū",uml:"¨",UnderBar:"_",UnderBrace:"⏟",UnderBracket:"⎵",UnderParenthesis:"⏝",Union:"⋃",UnionPlus:"⊎",Uogon:"Ų",uogon:"ų",Uopf:"𝕌",uopf:"𝕦",UpArrow:"↑",Uparrow:"⇑",uparrow:"↑",UpArrowBar:"⤒",UpArrowDownArrow:"⇅",UpDownArrow:"↕",Updownarrow:"⇕",updownarrow:"↕",UpEquilibrium:"⥮",upharpoonleft:"↿",upharpoonright:"↾",uplus:"⊎",UpperLeftArrow:"↖",UpperRightArrow:"↗",Upsi:"ϒ",upsi:"υ",upsih:"ϒ",Upsilon:"Υ",upsilon:"υ",UpTee:"⊥",UpTeeArrow:"↥",upuparrows:"⇈",urcorn:"⌝",urcorner:"⌝",urcrop:"⌎",Uring:"Ů",uring:"ů",urtri:"◹",Uscr:"𝒰",uscr:"𝓊",utdot:"⋰",Utilde:"Ũ",utilde:"ũ",utri:"▵",utrif:"▴",uuarr:"⇈",Uuml:"Ü",uuml:"ü",uwangle:"⦧",vangrt:"⦜",varepsilon:"ϵ",varkappa:"ϰ",varnothing:"∅",varphi:"ϕ",varpi:"ϖ",varpropto:"∝",vArr:"⇕",varr:"↕",varrho:"ϱ",varsigma:"ς",varsubsetneq:"⊊︀",varsubsetneqq:"⫋︀",varsupsetneq:"⊋︀",varsupsetneqq:"⫌︀",vartheta:"ϑ",vartriangleleft:"⊲",vartriangleright:"⊳",Vbar:"⫫",vBar:"⫨",vBarv:"⫩",Vcy:"В",vcy:"в",VDash:"⊫",Vdash:"⊩",vDash:"⊨",vdash:"⊢",Vdashl:"⫦",Vee:"⋁",vee:"∨",veebar:"⊻",veeeq:"≚",vellip:"⋮",Verbar:"‖",verbar:"|",Vert:"‖",vert:"|",VerticalBar:"∣",VerticalLine:"|",VerticalSeparator:"❘",VerticalTilde:"≀",VeryThinSpace:" ",Vfr:"𝔙",vfr:"𝔳",vltri:"⊲",vnsub:"⊂⃒",vnsup:"⊃⃒",Vopf:"𝕍",vopf:"𝕧",vprop:"∝",vrtri:"⊳",Vscr:"𝒱",vscr:"𝓋",vsubnE:"⫋︀",vsubne:"⊊︀",vsupnE:"⫌︀",vsupne:"⊋︀",Vvdash:"⊪",vzigzag:"⦚",Wcirc:"Ŵ",wcirc:"ŵ",wedbar:"⩟",Wedge:"⋀",wedge:"∧",wedgeq:"≙",weierp:"℘",Wfr:"𝔚",wfr:"𝔴",Wopf:"𝕎",wopf:"𝕨",wp:"℘",wr:"≀",wreath:"≀",Wscr:"𝒲",wscr:"𝓌",xcap:"⋂",xcirc:"◯",xcup:"⋃",xdtri:"▽",Xfr:"𝔛",xfr:"𝔵",xhArr:"⟺",xharr:"⟷",Xi:"Ξ",xi:"ξ",xlArr:"⟸",xlarr:"⟵",xmap:"⟼",xnis:"⋻",xodot:"⨀",Xopf:"𝕏",xopf:"𝕩",xoplus:"⨁",xotime:"⨂",xrArr:"⟹",xrarr:"⟶",Xscr:"𝒳",xscr:"𝓍",xsqcup:"⨆",xuplus:"⨄",xutri:"△",xvee:"⋁",xwedge:"⋀",Yacute:"Ý",yacute:"ý",YAcy:"Я",yacy:"я",Ycirc:"Ŷ",ycirc:"ŷ",Ycy:"Ы",ycy:"ы",yen:"¥",Yfr:"𝔜",yfr:"𝔶",YIcy:"Ї",yicy:"ї",Yopf:"𝕐",yopf:"𝕪",Yscr:"𝒴",yscr:"𝓎",YUcy:"Ю",yucy:"ю",Yuml:"Ÿ",yuml:"ÿ",Zacute:"Ź",zacute:"ź",Zcaron:"Ž",zcaron:"ž",Zcy:"З",zcy:"з",Zdot:"Ż",zdot:"ż",zeetrf:"ℨ",ZeroWidthSpace:"​",Zeta:"Ζ",zeta:"ζ",Zfr:"ℨ",zfr:"𝔷",ZHcy:"Ж",zhcy:"ж",zigrarr:"⇝",Zopf:"ℤ",zopf:"𝕫",Zscr:"𝒵",zscr:"𝓏",zwj:"‍",zwnj:"‌"}),t.entityMap=t.HTML_ENTITIES}),eo=(Za.XML_ENTITIES,Za.HTML_ENTITIES,Za.entityMap,ia.NAMESPACE),Vr=/[A-Z_a-z\xC0-\xD6\xD8-\xF6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]/,Hr=new RegExp("[\\-\\.0-9"+Vr.source.slice(1,-1)+"\\u00B7\\u0300-\\u036F\\u203F-\\u2040]"),to=new RegExp("^"+Vr.source+Hr.source+"*(?::"+Vr.source+Hr.source+"*)?$"),io=0,so=1,ro=2,no=3,ao=4,oo=5,lo=6,ho=7;function uo(e,t){this.message=e,this.locator=t,Error.captureStackTrace&&Error.captureStackTrace(this,uo)}function co(){}function po(e,t){return t.lineNumber=e.lineNumber,t.columnNumber=e.columnNumber,t}function mo(e,t,i){for(var s=e.tagName,r=null,n=e.length;n--;){var a=e[n],o=a.qName,l=a.value,o=0<(h=o.indexOf(":"))?(d=a.prefix=o.slice(0,h),u=o.slice(h+1),"xmlns"===d&&u):(d=null,"xmlns"===(u=o)&&"");a.localName=u,!1!==o&&(null==r&&(r={},go(i,i={})),i[o]=r[o]=l,a.uri=eo.XMLNS,t.startPrefixMapping(o,l))}for(var d,n=e.length;n--;)(d=(a=e[n]).prefix)&&("xml"===d&&(a.uri=eo.XML),"xmlns"!==d)&&(a.uri=i[d||""]);var h,u=0<(h=s.indexOf(":"))?(d=e.prefix=s.slice(0,h),e.localName=s.slice(h+1)):(d=null,e.localName=s),c=e.uri=i[d||""];if(t.startElement(c,u,s,e),!e.closed)return e.currentNSMap=i,e.localNSMap=r,1;if(t.endElement(c,u,s),r)for(d in r)Object.prototype.hasOwnProperty.call(r,d)&&t.endPrefixMapping(d)}function go(e,t){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}function fo(){this.attributeNames={}}(uo.prototype=new Error).name=uo.name,co.prototype={parse:function(e,t,i){var s=this.domBuilder;s.startDocument(),go(t,t={}),function(i,e,s,r,n){function a(e){var t=e.slice(1,-1);return Object.hasOwnProperty.call(s,t)?s[t]:"#"===t.charAt(0)?65535<(t=parseInt(t.substr(1).replace("x","0x")))?(t-=65536,String.fromCharCode(55296+(t>>10),56320+(1023&t))):String.fromCharCode(t):(n.error("entity not found:"+e),e)}function t(e){var t;m<e&&(t=i.substring(m,e).replace(/&#?\w+;/g,a),u&&o(m),r.characters(t,0,e-m),m=e)}function o(e,t){for(;d<=e&&(t=h.exec(i));)l=t.index,d=l+t[0].length,u.lineNumber++;u.columnNumber=e-l+1}var l=0,d=0,h=/.*(?:\r\n?|\n)|.*$/g,u=r.locator,c=[{currentNSMap:e}],p={},m=0;for(;;){try{var g,f,y=i.indexOf("<",m);if(y<0)return i.substr(m).match(/^\s*$/)||(g=r.doc,f=g.createTextNode(i.substr(m)),g.appendChild(f),r.currentElement=f);switch(m<y&&t(y),i.charAt(y+1)){case"/":var _=i.indexOf(">",y+3),v=i.substring(y+2,_).replace(/[ \t\n\r]+$/g,""),b=c.pop(),T=(_<0?(v=i.substring(y+2).replace(/[\s<].*/,""),n.error("end tag name: "+v+" is not complete:"+b.tagName),_=y+1+v.length):v.match(/\s</)&&(v=v.replace(/[\s<].*/,""),n.error("end tag name: "+v+" maybe not complete"),_=y+1+v.length),b.localNSMap),S=b.tagName==v;if(S||b.tagName&&b.tagName.toLowerCase()==v.toLowerCase()){if(r.endElement(b.uri,b.localName,v),T)for(var w in T)Object.prototype.hasOwnProperty.call(T,w)&&r.endPrefixMapping(w);S||n.fatalError("end tag name: "+v+" is not match the current start tagName:"+b.tagName)}else c.push(b);_++;break;case"?":u&&o(y),_=function(e,t,i){var s=e.indexOf("?>",t);if(s){e=e.substring(t,s).match(/^<\?(\S*)\s*([\s\S]*?)\s*$/);if(e)return e[0].length,i.processingInstruction(e[1],e[2]),s+2}return-1}(i,y,r);break;case"!":u&&o(y),_=function(e,t,i,s){{if("-"===e.charAt(t+2))return"-"===e.charAt(t+3)?(n=e.indexOf("--\x3e",t+4),t<n?(i.comment(e,t+4,n-t-4),n+3):(s.error("Unclosed comment"),-1)):-1;if("CDATA["==e.substr(t+3,6))return n=e.indexOf("]]>",t+9),i.startCDATA(),i.characters(e,t+9,n-t-9),i.endCDATA(),n+3;var r,s=function(e,t){var i,s=[],r=/'[^']+'|"[^"]+"|[^\s<>\/=]+=?|(\/?\s*>|<)/g;r.lastIndex=t,r.exec(e);for(;i=r.exec(e);)if(s.push(i),i[1])return s}(e,t),n=s.length;if(1<n&&/!doctype/i.test(s[0][0]))return e=s[1][0],r=t=!1,3<n&&(/^public$/i.test(s[2][0])?(t=s[3][0],r=4<n&&s[4][0]):/^system$/i.test(s[2][0])&&(r=s[3][0])),s=s[n-1],i.startDTD(e,t,r),i.endDTD(),s.index+s[0].length}return-1}(i,y,r,n);break;default:u&&o(y);var E=new fo,C=c[c.length-1].currentNSMap,_=function(e,t,s,i,r,n){function a(e,t,i){s.attributeNames.hasOwnProperty(e)&&n.fatalError("Attribute "+e+" redefined"),s.addValue(e,t.replace(/[\t\n\r]/g," ").replace(/&#?\w+;/g,r),i)}var o,l=++t,d=io;for(;;){var h=e.charAt(l);switch(h){case"=":if(d===so)o=e.slice(t,l);else if(d!==ro)throw new Error("attribute equal must after attrName");d=no;break;case"'":case'"':if(d===no||d===so){if(d===so&&(n.warning('attribute value must after "="'),o=e.slice(t,l)),t=l+1,!(0<(l=e.indexOf(h,t))))throw new Error("attribute value no end '"+h+"' match");u=e.slice(t,l),a(o,u,t-1)}else{if(d!=ao)throw new Error('attribute value must after "="');u=e.slice(t,l),a(o,u,t),n.warning('attribute "'+o+'" missed start quot('+h+")!!"),t=l+1}d=oo;break;case"/":switch(d){case io:s.setTagName(e.slice(t,l));case oo:case lo:case ho:d=ho,s.closed=!0;case ao:case so:break;case ro:s.closed=!0;break;default:throw new Error("attribute invalid close char('/')")}break;case"":return n.error("unexpected end of input"),d==io&&s.setTagName(e.slice(t,l)),l;case">":switch(d){case io:s.setTagName(e.slice(t,l));case oo:case lo:case ho:break;case ao:case so:"/"===(u=e.slice(t,l)).slice(-1)&&(s.closed=!0,u=u.slice(0,-1));case ro:d===ro&&(u=o),d==ao?(n.warning('attribute "'+u+'" missed quot(")!'),a(o,u,t)):(eo.isHTML(i[""])&&u.match(/^(?:disabled|checked|selected)$/i)||n.warning('attribute "'+u+'" missed value!! "'+u+'" instead!!'),a(u,u,t));break;case no:throw new Error("attribute value missed!!")}return l;case"€":h=" ";default:if(h<=" ")switch(d){case io:s.setTagName(e.slice(t,l)),d=lo;break;case so:o=e.slice(t,l),d=ro;break;case ao:var u=e.slice(t,l);n.warning('attribute "'+u+'" missed quot(")!!'),a(o,u,t);case oo:d=lo}else switch(d){case ro:s.tagName,eo.isHTML(i[""])&&o.match(/^(?:disabled|checked|selected)$/i)||n.warning('attribute "'+o+'" missed value!! "'+o+'" instead2!!'),a(o,o,t),t=l,d=so;break;case oo:n.warning('attribute space is required"'+o+'"!!');case lo:d=so,t=l;break;case no:d=ao,t=l;break;case ho:throw new Error("elements closed character '/' and '>' must be connected to")}}l++}}(i,y,E,C,a,n),k=E.length;if(!E.closed&&function(e,t,i,s){var r=s[i];null==r&&((r=e.lastIndexOf("</"+i+">"))<t&&(r=e.lastIndexOf("</"+i)),s[i]=r);return r<t}(i,_,E.tagName,p)&&(E.closed=!0,s.nbsp||n.warning("unclosed xml attribute")),u&&k){for(var x=po(u,{}),I=0;I<k;I++){var A=E[I];o(A.offset),A.locator=po(u,{})}r.locator=x,mo(E,r,C)&&c.push(E),r.locator=u}else mo(E,r,C)&&c.push(E);eo.isHTML(E.uri)&&!E.closed?_=function(e,t,i,s,r){if(/^(?:script|textarea)$/i.test(i)){var n=e.indexOf("</"+i+">",t),e=e.substring(t+1,n);if(/[&<]/.test(e))return/^script$/i.test(i)?r.characters(e,0,e.length):(e=e.replace(/&#?\w+;/g,s),r.characters(e,0,e.length)),n}return t+1}(i,_,E.tagName,a,r):_++}}catch(e){if(e instanceof uo)throw e;n.error("element parse error: "+e),_=-1}m<_?m=_:t(Math.max(y,m)+1)}}(e,t,i,s,this.errorHandler),s.endDocument()}},fo.prototype={setTagName:function(e){if(!to.test(e))throw new Error("invalid tagName:"+e);this.tagName=e},addValue:function(e,t,i){if(!to.test(e))throw new Error("invalid attribute:"+e);this.attributeNames[e]=this.length,this[this.length++]={qName:e,value:t,offset:i}},length:0,getLocalName:function(e){return this[e].localName},getLocator:function(e){return this[e].locator},getQName:function(e){return this[e].qName},getURI:function(e){return this[e].uri},getValue:function(e){return this[e].value}};var jr={XMLReader:co,ParseError:uo},yo=Ur.DOMImplementation,_o=ia.NAMESPACE,vo=jr.ParseError,bo=jr.XMLReader;function To(e){return e.replace(/\r[\n\u0085]/g,"\n").replace(/[\r\u0085\u2028]/g,"\n")}function So(e){this.options=e||{locator:{}}}function wo(){this.cdata=!1}function Eo(e,t){t.lineNumber=e.lineNumber,t.columnNumber=e.columnNumber}function Co(e){if(e)return"\n@"+(e.systemId||"")+"#[line:"+e.lineNumber+",col:"+e.columnNumber+"]"}function ko(e,t,i){return"string"==typeof e?e.substr(t,i):e.length>=t+i||t?new java.lang.String(e,t,i)+"":e}function xo(e,t){(e.currentElement||e.doc).appendChild(t)}So.prototype.parseFromString=function(e,t){var i=this.options,s=new bo,r=i.domBuilder||new wo,n=i.errorHandler,a=i.locator,o=i.xmlns||{},t=/\/x?html?$/.test(t),l=t?Za.HTML_ENTITIES:Za.XML_ENTITIES,n=(a&&r.setDocumentLocator(a),s.errorHandler=function(s,e,r){if(!s){if(e instanceof wo)return e;s=e}var n={},a=s instanceof Function;function t(t){var i=s[t];!i&&a&&(i=2==s.length?function(e){s(t,e)}:s),n[t]=i?function(e){i("[xmldom "+t+"]\t"+e+Co(r))}:function(){}}return r=r||{},t("warning"),t("error"),t("fatalError"),n}(n,r,a),s.domBuilder=i.domBuilder||r,t&&(o[""]=_o.HTML),o.xml=o.xml||_o.XML,i.normalizeLineEndings||To);return e&&"string"==typeof e?s.parse(n(e),o,l):s.errorHandler.error("invalid doc source"),r.doc},wo.prototype={startDocument:function(){this.doc=(new yo).createDocument(null,null,null),this.locator&&(this.doc.documentURI=this.locator.systemId)},startElement:function(e,t,i,s){var r=this.doc,n=r.createElementNS(e,i||t),a=s.length;xo(this,n),this.currentElement=n,this.locator&&Eo(this.locator,n);for(var o=0;o<a;o++){var e=s.getURI(o),l=s.getValue(o),i=s.getQName(o),d=r.createAttributeNS(e,i);this.locator&&Eo(s.getLocator(o),d),d.value=d.nodeValue=l,n.setAttributeNode(d)}},endElement:function(e,t,i){var s=this.currentElement;s.tagName,this.currentElement=s.parentNode},startPrefixMapping:function(e,t){},endPrefixMapping:function(e){},processingInstruction:function(e,t){e=this.doc.createProcessingInstruction(e,t);this.locator&&Eo(this.locator,e),xo(this,e)},ignorableWhitespace:function(e,t,i){},characters:function(e,t,i){var s;(e=ko.apply(this,arguments))&&(s=this.cdata?this.doc.createCDATASection(e):this.doc.createTextNode(e),this.currentElement?this.currentElement.appendChild(s):/^\s*$/.test(e)&&this.doc.appendChild(s),this.locator)&&Eo(this.locator,s)},skippedEntity:function(e){},endDocument:function(){this.doc.normalize()},setDocumentLocator:function(e){(this.locator=e)&&(e.lineNumber=0)},comment:function(e,t,i){e=ko.apply(this,arguments);e=this.doc.createComment(e);this.locator&&Eo(this.locator,e),xo(this,e)},startCDATA:function(){this.cdata=!0},endCDATA:function(){this.cdata=!1},startDTD:function(e,t,i){var s=this.doc.implementation;s&&s.createDocumentType&&(s=s.createDocumentType(e,t,i),this.locator&&Eo(this.locator,s),xo(this,s),this.doc.doctype=s)},warning:function(e){},error:function(e){},fatalError:function(e){throw new vo(e,this.locator)}},"endDTD,startEntity,endEntity,attributeDecl,elementDecl,externalEntityDecl,internalEntityDecl,resolveEntity,getExternalSubset,notationDecl,unparsedEntityDecl".replace(/\w+/g,function(e){wo.prototype[e]=function(){return null}});var Io={__DOMHandler:wo,normalizeLineEndings:To,DOMParser:So}.DOMParser;
+/*! @name mpd-parser @version 1.3.0 @license Apache-2.0 */
+const Ao=e=>!!e&&"object"==typeof e,I=(...e)=>e.reduce((t,i)=>("object"==typeof i&&Object.keys(i).forEach(e=>{Array.isArray(t[e])&&Array.isArray(i[e])?t[e]=t[e].concat(i[e]):Ao(t[e])&&Ao(i[e])?t[e]=I(t[e],i[e]):t[e]=i[e]}),t),{}),Do=t=>Object.keys(t).map(e=>t[e]),Po=e=>e.reduce((e,t)=>e.concat(t),[]),Lo=t=>{if(!t.length)return[];var i=[];for(let e=0;e<t.length;e++)i.push(t[e]);return i};var Oo={INVALID_NUMBER_OF_PERIOD:"INVALID_NUMBER_OF_PERIOD",INVALID_NUMBER_OF_CONTENT_STEERING:"INVALID_NUMBER_OF_CONTENT_STEERING",DASH_EMPTY_MANIFEST:"DASH_EMPTY_MANIFEST",DASH_INVALID_XML:"DASH_INVALID_XML",NO_BASE_URL:"NO_BASE_URL",MISSING_SEGMENT_INFORMATION:"MISSING_SEGMENT_INFORMATION",SEGMENT_TIME_UNSPECIFIED:"SEGMENT_TIME_UNSPECIFIED",UNSUPPORTED_UTC_TIMING_SCHEME:"UNSUPPORTED_UTC_TIMING_SCHEME"};const Ro=({baseUrl:s="",source:r="",range:n="",indexRange:a=""})=>{s={uri:r,resolvedUri:Sn(s||"",r)};if(n||a){r=(n||a).split("-");let e=window.BigInt?window.BigInt(r[0]):parseInt(r[0],10),t=window.BigInt?window.BigInt(r[1]):parseInt(r[1],10);e<Number.MAX_SAFE_INTEGER&&"bigint"==typeof e&&(e=Number(e)),t<Number.MAX_SAFE_INTEGER&&"bigint"==typeof t&&(t=Number(t));let i;"bigint"==typeof(i="bigint"==typeof t||"bigint"==typeof e?window.BigInt(t)-window.BigInt(e)+window.BigInt(1):t-e+1)&&i<Number.MAX_SAFE_INTEGER&&(i=Number(i)),s.byterange={length:i,offset:e}}return s},No=e=>(e&&"number"!=typeof e&&(e=parseInt(e,10)),isNaN(e)?null:e),Mo={static(e){var{duration:t,timescale:i=1,sourceDuration:s,periodDuration:r}=e,e=No(e.endNumber),t=t/i;return"number"==typeof e?{start:0,end:e}:"number"==typeof r?{start:0,end:r/t}:{start:0,end:s/t}},dynamic(e){var{NOW:t,clientOffset:i,availabilityStartTime:s,timescale:r=1,duration:n,periodStart:a=0,minimumUpdatePeriod:o=0,timeShiftBufferDepth:l=1/0}=e,e=No(e.endNumber),t=(t+i)/1e3,i=s+a,s=Math.ceil((t+o-i)*r/n),a=Math.floor((t-i-l)*r/n),o=Math.floor((t-i)*r/n);return{start:Math.max(0,a),end:"number"==typeof e?e:Math.min(s,o)}}},Uo=e=>{var n,{type:t,duration:i,timescale:s=1,periodDuration:r,sourceDuration:a}=e,{start:o,end:l}=Mo[t](e),o=((t,i)=>{var s=[];for(let e=t;e<i;e++)s.push(e);return s})(o,l).map((n=e,e=>{var{duration:t,timescale:i=1,periodStart:s,startNumber:r=1}=n;return{number:r+e,duration:t/i,timeline:s,time:e*t}}));return"static"===t&&(o[l=o.length-1].duration=("number"==typeof r?r:a)-i/s*l),o},Bo=e=>{var{baseUrl:t,initialization:i={},sourceDuration:s,indexRange:r="",periodStart:n,presentationTime:a,number:o=0,duration:l}=e;if(t)return i=Ro({baseUrl:t,source:i.sourceURL,range:i.range}),(t=Ro({baseUrl:t,source:t,indexRange:r})).map=i,l?(r=Uo(e)).length&&(t.duration=r[0].duration,t.timeline=r[0].timeline):s&&(t.duration=s,t.timeline=n),t.presentationTime=a||n,t.number=o,[t];throw new Error(Oo.NO_BASE_URL)},Fo=(e,i,s)=>{var r=e.sidx.map||null,n=e.sidx.duration,a=e.timeline||0,t=e.sidx.byterange,t=t.offset+t.length,o=i.timescale,l=i.references.filter(e=>1!==e.referenceType),d=[],h=e.endList?"static":"dynamic",u=e.sidx.timeline;let c=u,p=e.mediaSequence||0,m;m="bigint"==typeof i.firstOffset?window.BigInt(t)+i.firstOffset:t+i.firstOffset;for(let t=0;t<l.length;t++){var g=i.references[t],f=g.referencedSize,g=g.subsegmentDuration;let e;e="bigint"==typeof m?m+window.BigInt(f)-window.BigInt(1):m+f-1;var y=m+"-"+e,y={baseUrl:s,timescale:o,timeline:a,periodStart:u,presentationTime:c,number:p,duration:g,sourceDuration:n,indexRange:y,type:h},y=Bo(y)[0];r&&(y.map=r),d.push(y),"bigint"==typeof m?m+=window.BigInt(f):m+=f,c+=g/o,p++}return e.segments=d,e},qo=["AUDIO","SUBTITLES"],jo=e=>{return e=e,i=({timeline:e})=>e,Do(e.reduce((t,e)=>(e.forEach(e=>{t[i(e)]=e}),t),{})).sort((e,t)=>e.timeline>t.timeline?1:-1);var i},Ho=e=>{let r=[];var n,a;return n=e,e=qo,a=(e,t,i,s)=>{r=r.concat(e.playlists||[])},e.forEach(function(e){for(var t in n.mediaGroups[e])for(var i in n.mediaGroups[e][t]){var s=n.mediaGroups[e][t][i];a(s,e,t,i)}}),r},Vo=({playlist:i,mediaSequence:e})=>{i.mediaSequence=e,i.segments.forEach((e,t)=>{e.number=i.mediaSequence+t})},$o=({oldManifest:e,newManifest:t})=>{var r,n,i=e.playlists.concat(Ho(e)),s=t.playlists.concat(Ho(t));return t.timelineStarts=jo([e.timelineStarts,t.timelineStarts]),{oldPlaylists:r,newPlaylists:e,timelineStarts:n}=[{oldPlaylists:i,newPlaylists:s,timelineStarts:t.timelineStarts}][0],e.forEach(t=>{t.discontinuitySequence=n.findIndex(function({timeline:e}){return e===t.timeline});var e=((t,i)=>{for(let e=0;e<t.length;e++)if(t[e].attributes.NAME===i)return t[e];return null})(r,t.attributes.NAME);if(e&&!t.sidx){const s=t.segments[0];var i=e.segments.findIndex(function(e){return Math.abs(e.presentationTime-s.presentationTime)<1/60});-1===i?(Vo({playlist:t,mediaSequence:e.mediaSequence+e.segments.length}),t.segments[0].discontinuity=!0,t.discontinuityStarts.unshift(0),(!e.segments.length&&t.timeline>e.timeline||e.segments.length&&t.timeline>e.segments[e.segments.length-1].timeline)&&t.discontinuitySequence--):(e.segments[i].discontinuity&&!s.discontinuity&&(s.discontinuity=!0,t.discontinuityStarts.unshift(0),t.discontinuitySequence--),Vo({playlist:t,mediaSequence:e.segments[i].number}))}}),t},zo=e=>e&&e.uri+"-"+(e=>{let t;return t="bigint"==typeof e.offset||"bigint"==typeof e.length?window.BigInt(e.offset)+window.BigInt(e.length)-window.BigInt(1):e.offset+e.length-1,e.offset+"-"+t})(e.byterange),Wo=e=>{e=e.reduce(function(e,t){return e[t.attributes.baseUrl]||(e[t.attributes.baseUrl]=[]),e[t.attributes.baseUrl].push(t),e},{});let t=[];return Object.values(e).forEach(e=>{e=Do(e.reduce((e,t)=>{var i=t.attributes.id+(t.attributes.lang||"");return e[i]?(t.segments&&(t.segments[0]&&(t.segments[0].discontinuity=!0),e[i].segments.push(...t.segments)),t.attributes.contentProtection&&(e[i].attributes.contentProtection=t.attributes.contentProtection)):(e[i]=t,e[i].attributes.timelineStarts=[]),e[i].attributes.timelineStarts.push({start:t.attributes.periodStart,timeline:t.attributes.periodStart}),e},{}));t=t.concat(e)}),t.map(e=>{var t,s;return e.discontinuityStarts=(t=e.segments||[],s="discontinuity",t.reduce((e,t,i)=>(t[s]&&e.push(i),e),[])),e})},Go=(e,t)=>{var i=zo(e.sidx),t=i&&t[i]&&t[i].sidx;return t&&Fo(e,t,e.sidx.resolvedUri),e},Xo=(e,o={})=>e.reduce((e,t)=>{var i,s,r,n,a=t.attributes.label||t.attributes.lang||"text";return e[a]||(e[a]={language:a,default:!1,autoselect:!1,playlists:[],uri:""}),e[a].playlists.push(Go(({attributes:a,segments:t,mediaSequence:i,discontinuityStarts:s,discontinuitySequence:r}=[t][0],"undefined"==typeof t&&(t=[{uri:a.baseUrl,timeline:a.periodStart,resolvedUri:a.baseUrl||"",duration:a.sourceDuration,number:0}],a.duration=a.sourceDuration),n={NAME:a.id,BANDWIDTH:a.bandwidth,"PROGRAM-ID":1},a.codecs&&(n.CODECS=a.codecs),n={attributes:n,uri:"",endList:"static"===a.type,timeline:a.periodStart,resolvedUri:a.baseUrl||"",targetDuration:a.duration,timelineStarts:a.timelineStarts,discontinuityStarts:s,discontinuitySequence:r,mediaSequence:i,segments:t},a.serviceLocation&&(n.attributes.serviceLocation=a.serviceLocation),n),o)),e},{}),Ko=({attributes:e,segments:t,sidx:i,discontinuityStarts:s})=>{s={attributes:{NAME:e.id,AUDIO:"audio",SUBTITLES:"subs",RESOLUTION:{width:e.width,height:e.height},CODECS:e.codecs,BANDWIDTH:e.bandwidth,"PROGRAM-ID":1},uri:"",endList:"static"===e.type,timeline:e.periodStart,resolvedUri:e.baseUrl||"",targetDuration:e.duration,discontinuityStarts:s,timelineStarts:e.timelineStarts,segments:t};return e.frameRate&&(s.attributes["FRAME-RATE"]=e.frameRate),e.contentProtection&&(s.contentProtection=e.contentProtection),e.serviceLocation&&(s.attributes.serviceLocation=e.serviceLocation),i&&(s.sidx=i),s},Yo=({attributes:e})=>"video/mp4"===e.mimeType||"video/webm"===e.mimeType||"video"===e.contentType,Qo=({attributes:e})=>"audio/mp4"===e.mimeType||"audio/webm"===e.mimeType||"audio"===e.contentType,Jo=({attributes:e})=>"text/vtt"===e.mimeType||"text"===e.contentType,Zo=i=>i?Object.keys(i).reduce((e,t)=>{t=i[t];return e.concat(t.playlists)},[]):[],el=({dashPlaylists:e,locations:t,contentSteering:i,sidxMapping:s={},previousManifest:r,eventStream:n})=>{var a,o,l,d,h,u,c,p;return e.length?({sourceDuration:d,type:u,suggestedPresentationDelay:c,minimumUpdatePeriod:h}=e[0].attributes,a=Wo(e.filter(Yo)).map(Ko),o=Wo(e.filter(Qo)),l=Wo(e.filter(Jo)),e=e.map(e=>e.attributes.captionServices).filter(Boolean),d={allowCache:!0,discontinuityStarts:[],segments:[],endList:!0,mediaGroups:{AUDIO:{},VIDEO:{},"CLOSED-CAPTIONS":{},SUBTITLES:{}},uri:"",duration:d,playlists:((e,t={})=>{if(Object.keys(t).length)for(const i in e)e[i]=Go(e[i],t);return e})(a,s)},0<=h&&(d.minimumUpdatePeriod=1e3*h),t&&(d.locations=t),i&&(d.contentSteering=i),"dynamic"===u&&(d.suggestedPresentationDelay=c),n&&0<n.length&&(d.eventStream=n),h=0===d.playlists.length,t=o.length?((e,n={},a)=>{let o;e=e.reduce((e,t)=>{var i=t.attributes.role&&t.attributes.role.value||"",s=t.attributes.lang||"";let r=t.attributes.label||"main";e[r=s&&!t.attributes.label?t.attributes.lang+(i?` (${i})`:""):r]||(e[r]={language:s,autoselect:!0,default:"main"===i,playlists:[],uri:""});s=Go((({attributes:e,segments:t,sidx:i,mediaSequence:s,discontinuitySequence:r,discontinuityStarts:n},a)=>{r={attributes:{NAME:e.id,BANDWIDTH:e.bandwidth,CODECS:e.codecs,"PROGRAM-ID":1},uri:"",endList:"static"===e.type,timeline:e.periodStart,resolvedUri:e.baseUrl||"",targetDuration:e.duration,discontinuitySequence:r,discontinuityStarts:n,timelineStarts:e.timelineStarts,mediaSequence:s,segments:t};return e.contentProtection&&(r.contentProtection=e.contentProtection),e.serviceLocation&&(r.attributes.serviceLocation=e.serviceLocation),i&&(r.sidx=i),a&&(r.attributes.AUDIO="audio",r.attributes.SUBTITLES="subs"),r})(t,a),n);return e[r].playlists.push(s),"undefined"==typeof o&&"main"===i&&((o=t).default=!0),e},{});return o||(e[Object.keys(e)[0]].default=!0),e})(o,s,h):null,i=l.length?Xo(l,s):null,c=(u=a.concat(Zo(t),Zo(i))).map(({timelineStarts:e})=>e),d.timelineStarts=jo(c),p=d.timelineStarts,u.forEach(t=>{t.mediaSequence=0,t.discontinuitySequence=p.findIndex(function({timeline:e}){return e===t.timeline}),t.segments&&t.segments.forEach((e,t)=>{e.number=t})}),t&&(d.mediaGroups.AUDIO.audio=t),i&&(d.mediaGroups.SUBTITLES.subs=i),e.length&&(d.mediaGroups["CLOSED-CAPTIONS"].cc=e.reduce((s,e)=>(e&&e.forEach(e=>{var{channel:t,language:i}=e;s[i]={autoselect:!1,default:!1,instreamId:t,language:i},e.hasOwnProperty("aspectRatio")&&(s[i].aspectRatio=e.aspectRatio),e.hasOwnProperty("easyReader")&&(s[i].easyReader=e.easyReader),e.hasOwnProperty("3D")&&(s[i]["3D"]=e["3D"])}),s),{})),r?$o({oldManifest:r,newManifest:d}):d):{}},tl=(s,r)=>{var{type:n,minimumUpdatePeriod:a=0,media:o="",sourceDuration:l,timescale:d=1,startNumber:h=1,periodStart:u}=s,c=[];let p=-1;for(let i=0;i<r.length;i++){var m=r[i],g=m.d,f=m.r||0,m=m.t||0;p<0&&(p=m),m&&m>p&&(p=m);let e;e=f<0?(m=i+1)===r.length?"dynamic"===n&&0<a&&0<o.indexOf("$Number$")?((e,t,i)=>{var{NOW:e,clientOffset:s,availabilityStartTime:r,timescale:n=1,periodStart:a=0,minimumUpdatePeriod:o=0}=e;return Math.ceil((((e+s)/1e3+o-(r+a))*n-t)/i)})(s,p,g):(l*d-p)/g:(r[m].t-p)/g:f+1;var y=h+c.length+e;let t=h+c.length;for(;t<y;)c.push({number:t,duration:g/d,time:p,timeline:u}),p+=g,t++}return c},il=/\$([A-z]*)(?:(%0)([0-9]+)d)?\$/g,sl=(e,t)=>{return e.replace(il,(r=t,(e,t,i,s)=>{return"$$"===e?"$":"undefined"==typeof r[t]?e:(e=""+r[t],"RepresentationID"===t||(s=i?parseInt(s,10):1)<=e.length?e:new Array(s-e.length+1).join("0")+e)}));var r},rl=(r,e)=>{const n={RepresentationID:r.id,Bandwidth:r.bandwidth||0};var{initialization:t={sourceURL:"",range:""}}=r;const a=Ro({baseUrl:r.baseUrl,source:sl(t.sourceURL,n),range:t.range});return t=e,((e=r).duration||t?e.duration?Uo(e):tl(e,t):[{number:e.startNumber||1,duration:e.sourceDuration,time:0,timeline:e.periodStart}]).map(e=>{n.Number=e.number,n.Time=e.time;var t=sl(r.media||"",n),i=r.timescale||1,s=r.presentationTimeOffset||0,s=r.periodStart+(e.time-s)/i;return{uri:t,timeline:e.timeline,duration:e.duration,resolvedUri:Sn(r.baseUrl||"",t),map:a,number:e.number,presentationTime:s}})},nl=(r,e)=>{const{duration:t,segmentUrls:i=[],periodStart:n}=r;if(!t&&!e||t&&e)throw new Error(Oo.SEGMENT_TIME_UNSPECIFIED);const a=i.map(e=>{var{baseUrl:t,initialization:i={}}=t=r,i=Ro({baseUrl:t,source:i.sourceURL,range:i.range});return(t=Ro({baseUrl:t,source:e.media,range:e.mediaRange})).map=i,t});let s;return t&&(s=Uo(r)),(s=e?tl(r,e):s).map((e,t)=>{var i,s;if(a[t])return t=a[t],i=r.timescale||1,s=r.presentationTimeOffset||0,t.timeline=e.timeline,t.duration=e.duration,t.number=e.number,t.presentationTime=n+(e.time-s)/i,t}).filter(e=>e)},al=({attributes:e,segmentInfo:t})=>{let i,s;t.template?(s=rl,i=I(e,t.template)):t.base?(s=Bo,i=I(e,t.base)):t.list&&(s=nl,i=I(e,t.list));var r,n,a,e={attributes:e};return s&&(r=s(i,t.segmentTimeline),i.duration?({duration:n,timescale:a=1}=i,i.duration=n/a):r.length?i.duration=r.reduce((e,t)=>Math.max(e,Math.ceil(t.duration)),0):i.duration=0,e.attributes=i,e.segments=r,t.base)&&i.indexRange&&(e.sidx=r[0],e.segments=[]),e},ol=e=>e.map(al),A=(e,t)=>Lo(e.childNodes).filter(({tagName:e})=>e===t),ll=e=>e.textContent.trim(),dl=e=>{var t,i,s,r,n,e=/P(?:(\d*)Y)?(?:(\d*)M)?(?:(\d*)D)?(?:T(?:(\d*)H)?(?:(\d*)M)?(?:([\d.]*)S)?)?/.exec(e);return e?([e,t,i,s,r,n]=e.slice(1),31536e3*parseFloat(e||0)+2592e3*parseFloat(t||0)+86400*parseFloat(i||0)+3600*parseFloat(s||0)+60*parseFloat(r||0)+parseFloat(n||0)):0},hl={mediaPresentationDuration(e){return dl(e)},availabilityStartTime(e){return/^\d+-\d+-\d+T\d+:\d+:\d+(\.\d+)?$/.test(e=e)&&(e+="Z"),Date.parse(e)/1e3},minimumUpdatePeriod(e){return dl(e)},suggestedPresentationDelay(e){return dl(e)},type(e){return e},timeShiftBufferDepth(e){return dl(e)},start(e){return dl(e)},width(e){return parseInt(e,10)},height(e){return parseInt(e,10)},bandwidth(e){return parseInt(e,10)},frameRate(e){return parseFloat(e.split("/").reduce((e,t)=>e/t))},startNumber(e){return parseInt(e,10)},timescale(e){return parseInt(e,10)},presentationTimeOffset(e){return parseInt(e,10)},duration(e){var t=parseInt(e,10);return isNaN(t)?dl(e):t},d(e){return parseInt(e,10)},t(e){return parseInt(e,10)},r(e){return parseInt(e,10)},presentationTime(e){return parseInt(e,10)},DEFAULT(e){return e}},D=e=>e&&e.attributes?Lo(e.attributes).reduce((e,t)=>{var i=hl[t.name]||hl.DEFAULT;return e[t.name]=i(t.value),e},{}):{},ul={"urn:uuid:1077efec-c0b2-4d02-ace3-3c1e52e2fb4b":"org.w3.clearkey","urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed":"com.widevine.alpha","urn:uuid:9a04f079-9840-4286-ab92-e65be0885f95":"com.microsoft.playready","urn:uuid:f239e769-efa3-4850-9c16-a903c6932efb":"com.adobe.primetime","urn:mpeg:dash:mp4protection:2011":"mp4protection"},cl=(e,t)=>t.length?Po(e.map(function(s){return t.map(function(e){var t=ll(e),i=Sn(s.baseUrl,t),e=I(D(e),{baseUrl:i});return i!==t&&!e.serviceLocation&&s.serviceLocation&&(e.serviceLocation=s.serviceLocation),e})})):e,pl=e=>{var t=A(e,"SegmentTemplate")[0],i=A(e,"SegmentList")[0],s=i&&A(i,"SegmentURL").map(e=>I({tag:"SegmentURL"},D(e))),e=A(e,"SegmentBase")[0],r=i||t,r=r&&A(r,"SegmentTimeline")[0],n=i||e||t,n=n&&A(n,"Initialization")[0],t=t&&D(t);t&&n?t.initialization=n&&D(n):t&&t.initialization&&(t.initialization={sourceURL:t.initialization});const a={template:t,segmentTimeline:r&&A(r,"S").map(e=>D(e)),list:i&&I(D(i),{segmentUrls:s,initialization:D(n)}),base:e&&I(D(e),{initialization:D(n)})};return Object.keys(a).forEach(e=>{a[e]||delete a[e]}),a},ml=o=>Po(A(o.node,"EventStream").map(e=>{const n=D(e),a=n.schemeIdUri;return A(e,"Event").map(e=>{var t=D(e),i=t.presentationTime||0,s=n.timescale||1,r=t.duration||0,i=i/s+o.attributes.start;return{schemeIdUri:a,value:n.value,id:t.id,start:i,end:i+r/s,messageData:ll(e)||t.messageData,contentEncoding:n.contentEncoding,presentationTimeOffset:n.presentationTimeOffset||0}})})),gl=(l,d,h)=>e=>{var t=D(e),i=cl(d,A(e,"BaseURL")),s=A(e,"Role")[0],s={role:D(s)};let r=I(l,t,s);var n,a,o,t=A(e,"Accessibility")[0],t="urn:scte:dash:cc:cea-608:2015"===(s=D(t)).schemeIdUri?("string"!=typeof s.value?[]:s.value.split(";")).map(e=>{let t,i;return i=e,/^CC\d=/.test(e)?[t,i]=e.split("="):/^CC\d$/.test(e)&&(t=e),{channel:t,language:i}}):"urn:scte:dash:cc:cea-708:2015"===s.schemeIdUri?("string"!=typeof s.value?[]:s.value.split(";")).map(e=>{const i={channel:void 0,language:void 0,aspectRatio:1,easyReader:0,"3D":0};var t,s;return/=/.test(e)?([t,s=""]=e.split("="),i.channel=t,i.language=e,s.split(",").forEach(e=>{var[e,t]=e.split(":");"lang"===e?i.language=t:"er"===e?i.easyReader=Number(t):"war"===e?i.aspectRatio=Number(t):"3D"===e&&(i["3D"]=Number(t))})):i.language=e,i.channel&&(i.channel="SERVICE"+i.channel),i}):void 0,s=(t&&(r=I(r,{captionServices:t})),A(e,"Label")[0]),s=(s&&s.childNodes.length&&(t=s.childNodes[0].nodeValue.trim(),r=I(r,{label:t})),A(e,"ContentProtection").reduce((e,t)=>{var i=D(t),s=(i.schemeIdUri&&(i.schemeIdUri=i.schemeIdUri.toLowerCase()),ul[i.schemeIdUri]);return s&&(e[s]={attributes:i},i=A(t,"cenc:pssh")[0])&&(t=ll(i),e[s].pssh=t&&Jn(t)),e},{})),t=(Object.keys(s).length&&(r=I(r,{contentProtection:s})),pl(e)),s=A(e,"Representation"),e=I(h,t);return Po(s.map((n=r,a=i,o=e,e=>{var t=A(e,"BaseURL"),t=cl(a,t);const i=I(n,D(e)),s=pl(e);return t.map(e=>({segmentInfo:I(o,s),attributes:I(i,e)}))})))},fl=(e,t={})=>{var{manifestUri:t="",NOW:i=Date.now(),clientOffset:s=0,eventHandler:r=function(){}}=t,n=A(e,"Period");if(!n.length)throw new Error(Oo.INVALID_NUMBER_OF_PERIOD);var a=A(e,"Location");const o=D(e);var l,d,t=cl([{baseUrl:t}],A(e,"BaseURL")),e=A(e,"ContentSteering");o.type=o.type||"static",o.sourceDuration=o.mediaPresentationDuration||0,o.NOW=i,o.clientOffset=s,a.length&&(o.locations=a.map(ll));const h=[];return n.forEach((e,t)=>{var i,s,r=D(e),t=h[t-1];r.start=({attributes:t,priorPeriodAttributes:i,mpdType:s}=[{attributes:r,priorPeriodAttributes:t?t.attributes:null,mpdType:o.type}][0],"number"==typeof t.start?t.start:i&&"number"==typeof i.start&&"number"==typeof i.duration?i.start+i.duration:i||"static"!==s?null:0),h.push({node:e,attributes:r})}),{locations:o.locations,contentSteeringInfo:(i=r,1<(s=e).length&&i({type:"warn",message:"The MPD manifest should contain no more than one ContentSteering tag"}),s.length?((i=I({serverURL:ll(s[0])},D(s[0]))).queryBeforeStart="true"===i.queryBeforeStart,i):null),representationInfo:Po(h.map((l=o,d=t,(e,t)=>{var i=cl(d,A(e.node,"BaseURL")),s=I(l,{periodStart:e.attributes.start}),r=("number"==typeof e.attributes.duration&&(s.periodDuration=e.attributes.duration),A(e.node,"AdaptationSet")),e=pl(e.node);return Po(r.map(gl(s,i,e)))}))),eventStream:Po(h.map(ml))}},yl=e=>{if(""===e)throw new Error(Oo.DASH_EMPTY_MANIFEST);var t,i=new Io;let s;try{t=i.parseFromString(e,"application/xml"),s=t&&"MPD"===t.documentElement.tagName?t.documentElement:null}catch(e){}if(!s||s&&0<s.getElementsByTagName("parsererror").length)throw new Error(Oo.DASH_INVALID_XML);return s},_l=e=>{e=yl(e);if(!(e=A(e,"UTCTiming")[0]))return null;var t=D(e);switch(t.schemeIdUri){case"urn:mpeg:dash:utc:http-head:2014":case"urn:mpeg:dash:utc:http-head:2012":t.method="HEAD";break;case"urn:mpeg:dash:utc:http-xsdate:2014":case"urn:mpeg:dash:utc:http-iso:2014":case"urn:mpeg:dash:utc:http-xsdate:2012":case"urn:mpeg:dash:utc:http-iso:2012":t.method="GET";break;case"urn:mpeg:dash:utc:direct:2014":case"urn:mpeg:dash:utc:direct:2012":t.method="DIRECT",t.value=Date.parse(t.value);break;default:throw new Error(Oo.UNSUPPORTED_UTC_TIMING_SCHEME)}return t};function vl(e,t){var i,s,r;return void 0===t&&(t=0),(e=S(e)).length-t<10||!E(e,Al,{offset:t})?t:(t+=(void 0===(s=t)&&(s=0),r=(i=S(i=e))[s+5],i=i[s+6]<<21|i[s+7]<<14|i[s+8]<<7|i[s+9],(16&r)>>4?20+i:10+i),vl(e,t))}function bl(e){return"string"==typeof e?Fn(e):e}function Tl(e,t,i){void 0===i&&(i=!1),s=t,t=Array.isArray(s)?s.map(bl):[bl(s)],e=S(e);var s,r=[];if(t.length)for(var n=0;n<e.length;){var a=(e[n]<<24|e[n+1]<<16|e[n+2]<<8|e[n+3])>>>0,o=e.subarray(n+4,n+8);if(0==a)break;a=n+a;if(a>e.length){if(i)break;a=e.length}var l=e.subarray(n+8,a);E(o,t[0])&&(1===t.length?r.push(l):r.push.apply(r,Tl(l,t.slice(1),i))),n=a}return r}function Sl(e,t,i){var s;return i>=t.length?t.length:(s=Ol(t,i,!1),E(e.bytes,s.bytes)?i:Sl(e,t,i+(e=Ol(t,i+s.length)).length+e.value+s.length))}function wl(e,t){i=t,t=Array.isArray(i)?i.map(function(e){return Rl(e)}):[Rl(i)],e=S(e);var i,s=[];if(t.length)for(var r=0;r<e.length;){var n=Ol(e,r,!1),a=Ol(e,r+n.length),o=r+n.length+a.length,l=(127===a.value&&(a.value=Sl(n,e,o),a.value!==e.length)&&(a.value-=o),o+a.value>e.length?e.length:o+a.value),o=e.subarray(o,l);E(t[0],n.bytes)&&(1===t.length?s.push(o):s=s.concat(wl(o,t.slice(1)))),r+=n.length+a.length+o.length}return s}function El(e,t,i,s){void 0===s&&(s=1/0),e=S(e),i=[].concat(i);for(var r,n=0,a=0;n<e.length&&(a<s||r);){var o=void 0;if(E(e.subarray(n),Nl)?o=4:E(e.subarray(n),Ml)&&(o=3),o){if(a++,r)return Bl(e.subarray(r,n));var l=void 0;"h264"===t?l=31&e[n+o]:"h265"===t&&(l=e[n+o]>>1&63),-1!==i.indexOf(l)&&(r=n+o),n+=o+("h264"===t?1:2)}else n++}return e.subarray(0,0)}function Cl(e){e=S(e);for(var t=0;t<ql.length;t++){var i=ql[t];if(jl[i](e))return i}return""}var kl=Math.pow(2,32),xl=function(e){var t,e=new DataView(e.buffer,e.byteOffset,e.byteLength);return e.getBigUint64?(t=e.getBigUint64(0))<Number.MAX_SAFE_INTEGER?Number(t):t:e.getUint32(0)*kl+e.getUint32(4)},Il=function(e){var t=new DataView(e.buffer,e.byteOffset,e.byteLength),i={version:e[0],flags:new Uint8Array(e.subarray(1,4)),references:[],referenceId:t.getUint32(4),timescale:t.getUint32(8)},s=12,r=(0===i.version?(i.earliestPresentationTime=t.getUint32(s),i.firstOffset=t.getUint32(s+4),s+=8):(i.earliestPresentationTime=xl(e.subarray(s)),i.firstOffset=xl(e.subarray(s+8)),s+=16),t.getUint16(s+=2));for(s+=2;0<r;s+=12,r--)i.references.push({referenceType:(128&e[s])>>>7,referencedSize:2147483647&t.getUint32(s),subsegmentDuration:t.getUint32(s+4),startsWithSap:!!(128&e[s+8]),sapType:(112&e[s+8])>>>4,sapDeltaTime:268435455&t.getUint32(s+8)});return i},Al=S([73,68,51]),Dl={EBML:S([26,69,223,163]),DocType:S([66,130]),Segment:S([24,83,128,103]),SegmentInfo:S([21,73,169,102]),Tracks:S([22,84,174,107]),Track:S([174]),TrackNumber:S([215]),DefaultDuration:S([35,227,131]),TrackEntry:S([174]),TrackType:S([131]),FlagDefault:S([136]),CodecID:S([134]),CodecPrivate:S([99,162]),VideoTrack:S([224]),AudioTrack:S([225]),Cluster:S([31,67,182,117]),Timestamp:S([231]),TimestampScale:S([42,215,177]),BlockGroup:S([160]),BlockDuration:S([155]),Block:S([161]),SimpleBlock:S([163])},Pl=[128,64,32,16,8,4,2,1],Ll=function(e){for(var t=1,i=0;i<Pl.length&&!(e&Pl[i]);i++)t++;return t},Ol=function(e,t,i,s){void 0===i&&(i=!0),void 0===s&&(s=!1);var r=Ll(e[t]),n=e.subarray(t,t+r);return i&&((n=Array.prototype.slice.call(e,t,t+r))[0]^=Pl[r-1]),{length:r,value:Qn(n,{signed:s}),bytes:n}},Rl=function e(t){return"string"==typeof t?t.match(/.{1,2}/g).map(e):"number"==typeof t?Bn(t):t},Nl=S([0,0,0,1]),Ml=S([0,0,1]),Ul=S([0,0,3]),Bl=function(e){for(var t=[],i=1;i<e.length-2;)E(e.subarray(i,i+3),Ul)&&(t.push(i+2),i++),i++;if(0===t.length)return e;for(var s=e.length-t.length,r=new Uint8Array(s),n=0,i=0;i<s;n++,i++)n===t[0]&&(n++,t.shift()),r[i]=e[n];return r},P={webm:S([119,101,98,109]),matroska:S([109,97,116,114,111,115,107,97]),flac:S([102,76,97,67]),ogg:S([79,103,103,83]),ac3:S([11,119]),riff:S([82,73,70,70]),avi:S([65,86,73]),wav:S([87,65,86,69]),"3gp":S([102,116,121,112,51,103]),mp4:S([102,116,121,112]),fmp4:S([115,116,121,112]),mov:S([102,116,121,112,113,116]),moov:S([109,111,111,118]),moof:S([109,111,111,102])},Fl={aac:function(e){var t=vl(e);return E(e,[255,16],{offset:t,mask:[255,22]})},mp3:function(e){var t=vl(e);return E(e,[255,2],{offset:t,mask:[255,6]})},webm:function(e){e=wl(e,[Dl.EBML,Dl.DocType])[0];return E(e,P.webm)},mkv:function(e){e=wl(e,[Dl.EBML,Dl.DocType])[0];return E(e,P.matroska)},mp4:function(e){return!Fl["3gp"](e)&&!Fl.mov(e)&&(!!(E(e,P.mp4,{offset:4})||E(e,P.fmp4,{offset:4})||E(e,P.moof,{offset:4})||E(e,P.moov,{offset:4}))||void 0)},mov:function(e){return E(e,P.mov,{offset:4})},"3gp":function(e){return E(e,P["3gp"],{offset:4})},ac3:function(e){var t=vl(e);return E(e,P.ac3,{offset:t})},ts:function(e){if(e.length<189&&1<=e.length)return 71===e[0];for(var t=0;t+188<e.length&&t<188;){if(71===e[t]&&71===e[t+188])return!0;t+=1}return!1},flac:function(e){var t=vl(e);return E(e,P.flac,{offset:t})},ogg:function(e){return E(e,P.ogg)},avi:function(e){return E(e,P.riff)&&E(e,P.avi,{offset:8})},wav:function(e){return E(e,P.riff)&&E(e,P.wav,{offset:8})},h264:function(e){return El(e,"h264",7,3).length},h265:function(e){return El(e,"h265",[32,33],3).length}},ql=Object.keys(Fl).filter(function(e){return"ts"!==e&&"h264"!==e&&"h265"!==e}).concat(["ts","h264","h265"]),jl=(ql.forEach(function(e){var t=Fl[e];Fl[e]=function(e){return t(S(e))}}),Fl),Hl=9e4;
+/*! @name @videojs/http-streaming @version 3.12.1 @license Apache-2.0 */
+const Vl=Sn,$l=(e,t)=>t&&t.responseURL&&e!==t.responseURL?t.responseURL:e,zl=e=>T.log.debug?T.log.debug.bind(T,"VHS:",e+" >"):function(){};function L(...e){var t=T.obj||T;return(t.merge||t.mergeOptions).apply(t,e)}function Wl(...e){var t=T.time||T;return(t.createTimeRanges||t.createTimeRanges).apply(t,e)}function Gl(e,i){return td(e,function(e,t){return e-ed<=i&&t+ed>=i})}function Xl(e,t){return td(e,function(e){return e-Zl>=t})}function Kl(e){if(e&&e.length&&e.end)return e.end(e.length-1)}function Yl(t,i){let s=0;if(t&&t.length)for(let e=0;e<t.length;e++){var r=t.start(e),n=t.end(e);n<i||(s+=r<i&&i<=n?n-i:n-r)}return s}function Ql({defaultDuration:t,durationList:i,startIndex:s,endIndex:r}){let n=0;if(r<s&&([s,r]=[r,s]),s<0){for(let e=s;e<Math.min(0,r);e++)n+=t;s=0}for(let e=s;e<r;e++)n+=i[e].duration;return n}function Jl(e,t,i,s){if(!e||!e.segments)return null;if(e.endList)return cd(e);if(null===t)return null;t=t||0;let r=ud(e,e.mediaSequence+e.segments.length,t);return i&&(s="number"==typeof s?s:ld(null,e),r-=s),Math.max(0,r)}const Zl=1/30,ed=3*Zl,td=function(e,t){var i=[];let s;if(e&&e.length)for(s=0;s<e.length;s++)t(e.start(s),e.end(s))&&i.push([e.start(s),e.end(s)]);return Wl(i)},id=t=>{var i=[];if(!t||!t.length)return"";for(let e=0;e<t.length;e++)i.push(t.start(e)+" => "+t.end(e));return i.join(", ")},sd=t=>{var i=[];for(let e=0;e<t.length;e++)i.push({start:t.start(e),end:t.end(e)});return i},rd=(t,e)=>{if(!e.preload)return e.duration;let i=0;return(e.parts||[]).forEach(function(e){i+=e.duration}),(e.preloadHints||[]).forEach(function(e){"PART"===e.type&&(i+=t.partTargetDuration)}),i},nd=e=>(e.segments||[]).reduce((i,s,r)=>(s.parts?s.parts.forEach(function(e,t){i.push({duration:e.duration,segmentIndex:r,partIndex:t,part:e,segment:s})}):i.push({duration:s.duration,segmentIndex:r,partIndex:null,segment:s,part:null}),i),[]),ad=e=>{e=e.segments&&e.segments.length&&e.segments[e.segments.length-1];return e&&e.parts||[]},od=({preloadSegment:e})=>{var t;if(e)return{parts:e,preloadHints:t}=e,(t||[]).reduce((e,t)=>e+("PART"===t.type?1:0),0)+(e&&e.length?e.length:0)},ld=(e,t)=>{return t.endList?0:e&&e.suggestedPresentationDelay?e.suggestedPresentationDelay:(e=0<ad(t).length)&&t.serverControl&&t.serverControl.partHoldBack?t.serverControl.partHoldBack:e&&t.partTargetDuration?3*t.partTargetDuration:t.serverControl&&t.serverControl.holdBack?t.serverControl.holdBack:t.targetDuration?3*t.targetDuration:0},dd=function(e,t){let i=0,s=t-e.mediaSequence,r=e.segments[s];if(r){if("undefined"!=typeof r.start)return{result:r.start,precise:!0};if("undefined"!=typeof r.end)return{result:r.end-r.duration,precise:!0}}for(;s--;){if("undefined"!=typeof(r=e.segments[s]).end)return{result:i+r.end,precise:!0};if(i+=rd(e,r),"undefined"!=typeof r.start)return{result:i+r.start,precise:!0}}return{result:i,precise:!1}},hd=function(e,t){let i=0;var s;let r=t-e.mediaSequence;for(;r<e.segments.length;r++){if("undefined"!=typeof(s=e.segments[r]).start)return{result:s.start-i,precise:!0};if(i+=rd(e,s),"undefined"!=typeof s.end)return{result:s.end-i,precise:!0}}return{result:-1,precise:!1}},ud=function(e,t,i){var s;return(t="undefined"==typeof t?e.mediaSequence+e.segments.length:t)<e.mediaSequence?0:(s=dd(e,t)).precise?s.result:(e=hd(e,t)).precise?e.result:s.result+i},cd=function(e,t,i){if(!e)return 0;if("number"!=typeof i&&(i=0),"undefined"==typeof t){if(e.totalDuration)return e.totalDuration;if(!e.endList)return window.Infinity}return ud(e,t,i)};function pd(e){return e.excludeUntil&&e.excludeUntil>Date.now()}function md(e){return e.excludeUntil&&e.excludeUntil===1/0}function gd(e){var t=pd(e);return!e.disabled&&!t}function fd(e,t){return t.attributes&&t.attributes[e]}function yd(e,t){var i=e&&e.mediaGroups&&e.mediaGroups.AUDIO||{};let s=!1;for(const r in i){for(const n in i[r])if(s=t(i[r][n]))break;if(s)break}return!!s}const _d=(e,t)=>{if(1===e.playlists.length)return!0;const i=t.attributes.BANDWIDTH||Number.MAX_VALUE;return 0===e.playlists.filter(e=>!!gd(e)&&(e.attributes.BANDWIDTH||0)<i).length},vd=(e,t)=>!(!e&&!t||!e&&t||e&&!t||e!==t&&(!e.id||!t.id||e.id!==t.id)&&(!e.resolvedUri||!t.resolvedUri||e.resolvedUri!==t.resolvedUri)&&(!e.uri||!t.uri||e.uri!==t.uri)),bd=t=>{if(!t||!t.playlists||!t.playlists.length)return yd(t,e=>e.playlists&&e.playlists.length||e.uri);for(let e=0;e<t.playlists.length;e++){const s=t.playlists[e];var i=s.attributes&&s.attributes.CODECS;if(!i||!i.split(",").every(e=>Rn(e))){i=yd(t,e=>vd(s,e));if(!i)return!1}}return!0};var Td={liveEdgeDelay:ld,duration:cd,seekable:function(e,t,i){var s=t||0;let r=Jl(e,t,!0,i);return null===r?Wl():Wl(s,r=r<s?s:r)},getMediaInfoForTime:function({playlist:t,currentTime:i,startingSegmentIndex:s,startingPartIndex:r,startTime:n,exactManifestTimings:a}){let o=i-n;var l=nd(t);let d=0;for(let e=0;e<l.length;e++){var h=l[e];if(s===h.segmentIndex&&("number"!=typeof r||"number"!=typeof h.partIndex||r===h.partIndex)){d=e;break}}if(o<0){if(0<d)for(let e=d-1;0<=e;e--){var u=l[e];if(o+=u.duration,a){if(o<0)continue}else if(o+Zl<=0)continue;return{partIndex:u.partIndex,segmentIndex:u.segmentIndex,startTime:n-Ql({defaultDuration:t.targetDuration,durationList:l,startIndex:d,endIndex:e})}}return{partIndex:l[0]&&l[0].partIndex||null,segmentIndex:l[0]&&l[0].segmentIndex||0,startTime:i}}if(d<0){for(let e=d;e<0;e++)if((o-=t.targetDuration)<0)return{partIndex:l[0]&&l[0].partIndex||null,segmentIndex:l[0]&&l[0].segmentIndex||0,startTime:i};d=0}for(let e=d;e<l.length;e++){var c=l[e],p=(o-=c.duration,c.duration>Zl),m=0===o,p=p&&0<=o+Zl;if(!m&&!p||e===l.length-1){if(a){if(0<o)continue}else if(0<=o-Zl)continue;return{partIndex:c.partIndex,segmentIndex:c.segmentIndex,startTime:n+Ql({defaultDuration:t.targetDuration,durationList:l,startIndex:d,endIndex:e})}}}return{segmentIndex:l[l.length-1].segmentIndex,partIndex:l[l.length-1].partIndex,startTime:i}},isEnabled:gd,isDisabled:function(e){return e.disabled},isExcluded:pd,isIncompatible:md,playlistEnd:Jl,isAes:function(t){for(let e=0;e<t.segments.length;e++)if(t.segments[e].key)return!0;return!1},hasAttribute:fd,estimateSegmentRequestTime:function(e,t,i,s=0){return fd("BANDWIDTH",i)?(e*i.attributes.BANDWIDTH-8*s)/t:NaN},isLowestEnabledRendition:_d,isAudioOnly:bd,playlistMatch:vd,segmentDurationWithParts:rd};const Sd=T["log"],wd=(e,t)=>e+"-"+t,Ed=(e,t,i)=>`placeholder-uri-${e}-${t}-`+i,Cd=(r,n)=>{r.mediaGroups&&["AUDIO","SUBTITLES"].forEach(e=>{if(r.mediaGroups[e])for(const i in r.mediaGroups[e])for(const s in r.mediaGroups[e][i]){var t=r.mediaGroups[e][i][s];n(t,e,i,s)}})},kd=({playlist:e,uri:t,id:i})=>{e.id=i,e.playlistErrors_=0,t&&(e.uri=t),e.attributes=e.attributes||{}},xd=(o,e,l=Ed)=>{o.uri=e;for(let e=0;e<o.playlists.length;e++){var t;o.playlists[e].uri||(t="placeholder-uri-"+e,o.playlists[e].uri=t)}const i=bd(o);Cd(o,(e,r,n,a)=>{if(!e.playlists||!e.playlists.length){if(i&&"AUDIO"===r&&!e.uri)for(let e=0;e<o.playlists.length;e++){var t=o.playlists[e];if(t.attributes&&t.attributes.AUDIO&&t.attributes.AUDIO===n)return}e.playlists=[bi({},e)]}e.playlists.forEach(function(e,t){var i=l(r,n,a,e),s=wd(t,i);e.uri?e.resolvedUri=e.resolvedUri||Vl(o.uri,e.uri):(e.uri=0===t?i:s,e.resolvedUri=e.uri),e.id=e.id||s,e.attributes=e.attributes||{},o.playlists[e.id]=e,o.playlists[e.uri]=e})});{var s=o;let e=s.playlists.length;for(;e--;){var r=s.playlists[e];kd({playlist:r,id:wd(e,r.uri)}),r.resolvedUri=Vl(s.uri,r.uri),s.playlists[r.id]=r,(s.playlists[r.uri]=r).attributes.BANDWIDTH||Sd.warn("Invalid playlist STREAM-INF detected. Missing BANDWIDTH attribute.")}}var n;n=o,Cd(n,e=>{e.uri&&(e.resolvedUri=Vl(n.uri,e.uri))})};class Id{constructor(){this.offset_=null,this.pendingDateRanges_=new Map,this.processedDateRanges_=new Map}setOffset(e=[]){null===this.offset_&&e.length&&([e]=e,void 0!==e.programDateTime)&&(this.offset_=e.programDateTime/1e3)}setPendingDateRanges(e=[]){var t;e.length&&([t]=e,t=t.startDate.getTime(),this.trimProcessedDateRanges_(t),this.pendingDateRanges_=e.reduce((e,t)=>(e.set(t.id,t),e),new Map))}processDateRange(e){this.pendingDateRanges_.delete(e.id),this.processedDateRanges_.set(e.id,e)}getDateRangesToProcess(){if(null===this.offset_)return[];const i={},s=[];this.pendingDateRanges_.forEach((e,t)=>{this.processedDateRanges_.has(t)||(e.startTime=e.startDate.getTime()/1e3-this.offset_,e.processDateRange=()=>this.processDateRange(e),s.push(e),e.class&&(i[e.class]?(t=i[e.class].push(e),e.classListIndex=t-1):(i[e.class]=[e],e.classListIndex=0)))});for(const t of s){var e=i[t.class]||[];t.endDate?t.endTime=t.endDate.getTime()/1e3-this.offset_:t.endOnNext&&e[t.classListIndex+1]?t.endTime=e[t.classListIndex+1].startTime:t.duration?t.endTime=t.startTime+t.duration:t.plannedDuration?t.endTime=t.startTime+t.plannedDuration:t.endTime=t.startTime}return s}trimProcessedDateRanges_(i){new Map(this.processedDateRanges_).forEach((e,t)=>{e.startDate.getTime()<i&&this.processedDateRanges_.delete(t)})}}qr=T.EventTarget;function Ad(e){var t=e.segments||[],i=e.preloadSegment;if(i&&i.parts&&i.parts.length){if(i.preloadHints)for(let e=0;e<i.preloadHints.length;e++)if("MAP"===i.preloadHints[e].type)return t;i.duration=e.targetDuration,i.preload=!0,t.push(i)}return t}const Dd=(t,i)=>{if(!t)return i;var s=L(t,i);if(t.preloadHints&&!i.preloadHints&&delete s.preloadHints,t.parts&&!i.parts)delete s.parts;else if(t.parts&&i.parts)for(let e=0;e<i.parts.length;e++)t.parts&&t.parts[e]&&(s.parts[e]=L(t.parts[e],i.parts[e]));return!t.skipped&&i.skipped&&(s.skipped=!1),t.preload&&!i.preload&&(s.preload=!1),s},Pd=(e,t)=>{!e.resolvedUri&&e.uri&&(e.resolvedUri=Vl(t,e.uri)),e.key&&!e.key.resolvedUri&&(e.key.resolvedUri=Vl(t,e.key.uri)),e.map&&!e.map.resolvedUri&&(e.map.resolvedUri=Vl(t,e.map.uri)),e.map&&e.map.key&&!e.map.key.resolvedUri&&(e.map.key.resolvedUri=Vl(t,e.map.key.uri)),e.parts&&e.parts.length&&e.parts.forEach(e=>{e.resolvedUri||(e.resolvedUri=Vl(t,e.uri))}),e.preloadHints&&e.preloadHints.length&&e.preloadHints.forEach(e=>{e.resolvedUri||(e.resolvedUri=Vl(t,e.uri))})},Ld=(e,t)=>e===t||e.segments&&t.segments&&e.segments.length===t.segments.length&&e.endList===t.endList&&e.mediaSequence===t.mediaSequence&&e.preloadSegment===t.preloadSegment,Od=(e,r,t=Ld)=>{var i=L(e,{}),s=i.playlists[r.id];if(!s)return null;if(t(s,r))return null;r.segments=Ad(r);const n=L(s,r);if(n.preloadSegment&&!r.preloadSegment&&delete n.preloadSegment,s.segments){if(r.skip){r.segments=r.segments||[];for(let e=0;e<r.skip.skippedSegments;e++)r.segments.unshift({skipped:!0})}n.segments=((e,t,i)=>{var s=e.slice(),r=t.slice(),n=(i=i||0,[]);let a;for(let e=0;e<r.length;e++){var o=s[e+i],l=r[e];o?(a=o.map||a,n.push(Dd(o,l))):(a&&!l.map&&(l.map=a),n.push(l))}return n})(s.segments,r.segments,r.mediaSequence-s.mediaSequence)}n.segments.forEach(e=>{Pd(e,n.resolvedUri)});for(let e=0;e<i.playlists.length;e++)i.playlists[e].id===r.id&&(i.playlists[e]=n);return i.playlists[r.id]=n,i.playlists[r.uri]=n,Cd(e,(t,e,i,s)=>{if(t.playlists)for(let e=0;e<t.playlists.length;e++)r.id===t.playlists[e].id&&(t.playlists[e]=n)}),i},Rd=(e,t)=>{var i=e.segments||[],i=i[i.length-1],s=i&&i.parts&&i.parts[i.parts.length-1],s=s&&s.duration||i&&i.duration;return t&&s?1e3*s:500*(e.partTargetDuration||e.targetDuration||10)};class Nd extends qr{constructor(e,t,i={}){if(super(),!e)throw new Error("A non-empty playlist URL or object is required");this.logger_=zl("PlaylistLoader");var{withCredentials:s=!1}=i,e=(this.src=e,this.vhs_=t,this.withCredentials=s,this.addDateRangesToTextTrack_=i.addDateRangesToTextTrack,t.options_);this.customTagParsers=e&&e.customTagParsers||[],this.customTagMappers=e&&e.customTagMappers||[],this.llhls=e&&e.llhls,this.dateRangesStorage_=new Id,this.state="HAVE_NOTHING",this.handleMediaupdatetimeout_=this.handleMediaupdatetimeout_.bind(this),this.on("mediaupdatetimeout",this.handleMediaupdatetimeout_),this.on("loadedplaylist",this.handleLoadedPlaylist_.bind(this))}handleLoadedPlaylist_(){var e=this.media();e&&(this.dateRangesStorage_.setOffset(e.segments),this.dateRangesStorage_.setPendingDateRanges(e.dateRanges),(e=this.dateRangesStorage_.getDateRangesToProcess()).length)&&this.addDateRangesToTextTrack_&&this.addDateRangesToTextTrack_(e)}handleMediaupdatetimeout_(){if("HAVE_METADATA"===this.state){var t=this.media();let e=Vl(this.main.uri,t.uri);this.llhls&&(e=((e,t)=>{if(!t.endList&&t.serverControl){const r={};if(t.serverControl.canBlockReload){var i,s=t["preloadSegment"];let e=t.mediaSequence+t.segments.length;s&&(s=s.parts||[],-1<(i=od(t)-1)&&i!=s.length-1&&(r._HLS_part=i),-1<i||s.length)&&e--,r._HLS_msn=e}if(t.serverControl&&t.serverControl.canSkipUntil&&(r._HLS_skip=t.serverControl.canSkipDateranges?"v2":"YES"),Object.keys(r).length){const n=new window.URL(e);["_HLS_skip","_HLS_msn","_HLS_part"].forEach(function(e){r.hasOwnProperty(e)&&n.searchParams.set(e,r[e])}),e=n.toString()}}return e})(e,t)),this.state="HAVE_CURRENT_METADATA",this.request=this.vhs_.xhr({uri:e,withCredentials:this.withCredentials,requestType:"hls-playlist"},(e,t)=>{if(this.request)return e?this.playlistRequestError(this.request,this.media(),"HAVE_METADATA"):void this.haveMetadata({playlistString:this.request.responseText,url:this.media().uri,id:this.media().id})})}}playlistRequestError(e,t,i){var{uri:t,id:s}=t;this.request=null,i&&(this.state=i),this.error={playlist:this.main.playlists[s],status:e.status,message:`HLS playlist request error at URL: ${t}.`,responseText:e.responseText,code:500<=e.status?4:2,metadata:{errorType:T.Error.HlsPlaylistRequestError}},this.trigger("error")}parseManifest_({url:t,manifestString:i}){{var[{onwarn:i,oninfo:e,manifestString:s,customTagParsers:r=[],customTagMappers:n=[],llhls:a}]=[{onwarn:({message:e})=>this.logger_(`m3u8-parser warn for ${t}: `+e),oninfo:({message:e})=>this.logger_(`m3u8-parser info for ${t}: `+e),manifestString:i,customTagParsers:this.customTagParsers,customTagMappers:this.customTagMappers,llhls:this.llhls}];const o=new On,l=(i&&o.on("warn",i),e&&o.on("info",e),r.forEach(e=>o.addParser(e)),n.forEach(e=>o.addTagMapper(e)),o.push(s),o.end(),o.manifest);if(a||(["preloadSegment","skip","serverControl","renditionReports","partInf","partTargetDuration"].forEach(function(e){l.hasOwnProperty(e)&&delete l[e]}),l.segments&&l.segments.forEach(function(t){["parts","preloadHints"].forEach(function(e){t.hasOwnProperty(e)&&delete t[e]})})),!l.targetDuration){let e=10;l.segments&&l.segments.length&&(e=l.segments.reduce((e,t)=>Math.max(e,t.duration),0)),i&&i({message:"manifest has no targetDuration defaulting to "+e}),l.targetDuration=e}return(e=ad(l)).length&&!l.partTargetDuration&&(r=e.reduce((e,t)=>Math.max(e,t.duration),0),i&&(i({message:"manifest has no partTargetDuration defaulting to "+r}),Sd.error("LL-HLS manifest has parts but lacks required #EXT-X-PART-INF:PART-TARGET value. See https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis-09#section-4.4.3.7. Playback is not guaranteed.")),l.partTargetDuration=r),l}}haveMetadata({playlistString:e,playlistObject:t,url:i,id:s}){this.request=null,this.state="HAVE_METADATA";t=t||this.parseManifest_({url:i,manifestString:e}),t.lastRequest=Date.now(),kd({playlist:t,uri:i,id:s}),e=Od(this.main,t);this.targetDuration=t.partTargetDuration||t.targetDuration,this.pendingMedia_=null,e?(this.main=e,this.media_=this.main.playlists[s]):this.trigger("playlistunchanged"),this.updateMediaUpdateTimeout_(Rd(this.media(),!!e)),this.trigger("loadedplaylist")}dispose(){this.trigger("dispose"),this.stopRequest(),window.clearTimeout(this.mediaUpdateTimeout),window.clearTimeout(this.finalRenditionTimeout),this.dateRangesStorage_=new Id,this.off()}stopRequest(){var e;this.request&&(e=this.request,this.request=null,e.onreadystatechange=null,e.abort())}media(i,e){if(!i)return this.media_;if("HAVE_NOTHING"===this.state)throw new Error("Cannot switch media playlist from "+this.state);if("string"==typeof i){if(!this.main.playlists[i])throw new Error("Unknown playlist URI: "+i);i=this.main.playlists[i]}if(window.clearTimeout(this.finalRenditionTimeout),e)e=(i.partTargetDuration||i.targetDuration)/2*1e3||5e3,this.finalRenditionTimeout=window.setTimeout(this.media.bind(this,i,!1),e);else{const s=this.state;var e=!this.media_||i.id!==this.media_.id,t=this.main.playlists[i.id];if(t&&t.endList||i.endList&&i.segments.length)this.request&&(this.request.onreadystatechange=null,this.request.abort(),this.request=null),this.state="HAVE_METADATA",this.media_=i,e&&(this.trigger("mediachanging"),"HAVE_MAIN_MANIFEST"===s?this.trigger("loadedmetadata"):this.trigger("mediachange"));else if(this.updateMediaUpdateTimeout_(Rd(i,!0)),e){if(this.state="SWITCHING_MEDIA",this.request){if(i.resolvedUri===this.request.url)return;this.request.onreadystatechange=null,this.request.abort(),this.request=null}this.media_&&this.trigger("mediachanging"),this.pendingMedia_=i,this.request=this.vhs_.xhr({uri:i.resolvedUri,withCredentials:this.withCredentials,requestType:"hls-playlist"},(e,t)=>{if(this.request){if(i.lastRequest=Date.now(),i.resolvedUri=$l(i.resolvedUri,t),e)return this.playlistRequestError(this.request,i,s);this.haveMetadata({playlistString:t.responseText,url:i.uri,id:i.id}),"HAVE_MAIN_MANIFEST"===s?this.trigger("loadedmetadata"):this.trigger("mediachange")}})}}}pause(){this.mediaUpdateTimeout&&(window.clearTimeout(this.mediaUpdateTimeout),this.mediaUpdateTimeout=null),this.stopRequest(),"HAVE_NOTHING"===this.state&&(this.started=!1),"SWITCHING_MEDIA"===this.state?this.media_?this.state="HAVE_METADATA":this.state="HAVE_MAIN_MANIFEST":"HAVE_CURRENT_METADATA"===this.state&&(this.state="HAVE_METADATA")}load(e){this.mediaUpdateTimeout&&(window.clearTimeout(this.mediaUpdateTimeout),this.mediaUpdateTimeout=null);var t=this.media();e?(e=t?(t.partTargetDuration||t.targetDuration)/2*1e3:5e3,this.mediaUpdateTimeout=window.setTimeout(()=>{this.mediaUpdateTimeout=null,this.load()},e)):this.started?t&&!t.endList?this.trigger("mediaupdatetimeout"):this.trigger("loadedplaylist"):this.start()}updateMediaUpdateTimeout_(e){this.mediaUpdateTimeout&&(window.clearTimeout(this.mediaUpdateTimeout),this.mediaUpdateTimeout=null),this.media()&&!this.media().endList&&(this.mediaUpdateTimeout=window.setTimeout(()=>{this.mediaUpdateTimeout=null,this.trigger("mediaupdatetimeout"),this.updateMediaUpdateTimeout_(e)},e))}start(){this.started=!0,"object"==typeof this.src?(this.src.uri||(this.src.uri=window.location.href),this.src.resolvedUri=this.src.uri,setTimeout(()=>{this.setupInitialPlaylist(this.src)},0)):this.request=this.vhs_.xhr({uri:this.src,withCredentials:this.withCredentials,requestType:"hls-playlist"},(e,t)=>{if(this.request){if(this.request=null,e)return this.error={status:t.status,message:`HLS playlist request error at URL: ${this.src}.`,responseText:t.responseText,code:2,metadata:{errorType:T.Error.HlsPlaylistRequestError}},"HAVE_NOTHING"===this.state&&(this.started=!1),this.trigger("error");this.src=$l(this.src,t);e=this.parseManifest_({manifestString:t.responseText,url:this.src});this.setupInitialPlaylist(e)}})}srcUri(){return"string"==typeof this.src?this.src:this.src.uri}setupInitialPlaylist(e){var t,i,s,r;this.state="HAVE_MAIN_MANIFEST",e.playlists?(this.main=e,xd(this.main,this.srcUri()),e.playlists.forEach(t=>{t.segments=Ad(t),t.segments.forEach(e=>{Pd(e,t.resolvedUri)})}),this.trigger("loadedplaylist"),this.request||this.media(this.main.playlists[0])):(t=this.srcUri()||window.location.href,this.main=(i=t,s=wd(0,i),(r={mediaGroups:{AUDIO:{},VIDEO:{},"CLOSED-CAPTIONS":{},SUBTITLES:{}},uri:window.location.href,resolvedUri:window.location.href,playlists:[{uri:i,id:s,resolvedUri:i,attributes:{}}]}).playlists[s]=r.playlists[0],r.playlists[i]=r.playlists[0],r),this.haveMetadata({playlistObject:e,url:t,id:this.main.playlists[0].id}),this.trigger("loadedmetadata"))}updateOrDeleteClone(e,t){var i=this.main,s=e.ID;let r=i.playlists.length;for(;r--;){var n,a,o,l,d,h=i.playlists[r];h.attributes["PATHWAY-ID"]===s&&(n=h.resolvedUri,a=h.id,t?(o=this.createCloneURI_(h.resolvedUri,e),l=wd(s,o),d=this.createCloneAttributes_(s,h.attributes),h=this.createClonePlaylist_(h,l,e,d),i.playlists[r]=h,i.playlists[l]=h,i.playlists[o]=h):i.playlists.splice(r,1),delete i.playlists[a],delete i.playlists[n])}this.updateOrDeleteCloneMedia(e,t)}updateOrDeleteCloneMedia(e,t){const s=this.main,r=e.ID;["AUDIO","SUBTITLES","CLOSED-CAPTIONS"].forEach(e=>{if(s.mediaGroups[e]&&s.mediaGroups[e][r])for(const t in s.mediaGroups[e])if(t===r){for(const i in s.mediaGroups[e][t])s.mediaGroups[e][t][i].playlists.forEach((e,t)=>{var e=s.playlists[e.id],i=e.id,e=e.resolvedUri;delete s.playlists[i],delete s.playlists[e]});delete s.mediaGroups[e][t]}}),t&&this.createClonedMediaGroups_(e)}addClonePathway(e,t={}){var i=this.main,s=i.playlists.length,r=this.createCloneURI_(t.resolvedUri,e),n=wd(e.ID,r),a=this.createCloneAttributes_(e.ID,t.attributes),t=this.createClonePlaylist_(t,n,e,a);i.playlists[s]=t,i.playlists[n]=t,i.playlists[r]=t,this.createClonedMediaGroups_(e)}createClonedMediaGroups_(l){const d=l.ID,s=l["BASE-ID"],h=this.main;["AUDIO","SUBTITLES","CLOSED-CAPTIONS"].forEach(n=>{if(h.mediaGroups[n]&&!h.mediaGroups[n][d])for(const i in h.mediaGroups[n])if(i===s){h.mediaGroups[n][d]={};for(const a in h.mediaGroups[n][i]){var e=h.mediaGroups[n][i][a];h.mediaGroups[n][d][a]=bi({},e);const o=h.mediaGroups[n][d][a];var t=this.createCloneURI_(e.resolvedUri,l);o.resolvedUri=t,o.uri=t,o.playlists=[],e.playlists.forEach((e,t)=>{var i,s=h.playlists[e.id],r=Ed(n,d,a),r=wd(d,r);s&&!h.playlists[r]&&(i=(s=this.createClonePlaylist_(s,r,l)).resolvedUri,h.playlists[r]=s,h.playlists[i]=s),o.playlists[t]=this.createClonePlaylist_(e,r,l)})}}})}createClonePlaylist_(e,t,i,s){i=this.createCloneURI_(e.resolvedUri,i),i={resolvedUri:i,uri:i,id:t};return e.segments&&(i.segments=[]),s&&(i.attributes=s),L(e,i)}createCloneURI_(e,t){var i=new URL(e),s=(i.hostname=t["URI-REPLACEMENT"].HOST,t["URI-REPLACEMENT"].PARAMS);for(const r of Object.keys(s))i.searchParams.set(r,s[r]);return i.href}createCloneAttributes_(t,i){const s={"PATHWAY-ID":t};return["AUDIO","SUBTITLES","CLOSED-CAPTIONS"].forEach(e=>{i[e]&&(s[e]=t)}),s}getKeyIdSet(e){if(e.contentProtection){var t=new Set;for(const s in e.contentProtection){var i=e.contentProtection[s].attributes.keyId;i&&t.add(i.toLowerCase())}return t}}}function Md(e,t,i,s){var r="arraybuffer"===e.responseType?e.response:e.responseText;!t&&r&&(e.responseTime=Date.now(),e.roundTripTime=e.responseTime-e.requestTime,e.bytesReceived=r.byteLength||r.length,e.bandwidth||(e.bandwidth=Math.floor(e.bytesReceived/e.roundTripTime*8*1e3))),i.headers&&(e.responseHeaders=i.headers),t&&"ETIMEDOUT"===t.code&&(e.timedout=!0),s(t=t||e.aborted||200===i.statusCode||206===i.statusCode||0===i.statusCode?t:new Error("XHR Failed with a response of: "+(e&&(r||e.responseText))),e)}function Ud(){function d(e,a){e=L({timeout:45e3},e);var t=d.beforeRequest||T.Vhs.xhr.beforeRequest,i=d._requestCallbackSet||T.Vhs.xhr._requestCallbackSet||new Set;const o=d._responseCallbackSet||T.Vhs.xhr._responseCallbackSet;t&&"function"==typeof t&&(T.log.warn("beforeRequest is deprecated, use onRequest instead."),i.add(t));var s=(!0===T.Vhs.xhr.original?T:T.Vhs).xhr,r=((e,i)=>{if(e&&e.size){let t=i;return e.forEach(e=>{t=e(t)}),t}})(i,e);i.delete(t);const l=s(r||e,function(e,t){var i,s,r,n;return i=o,s=l,r=e,n=t,i&&i.size&&i.forEach(e=>{e(s,r,n)}),Md(l,e,t,a)}),n=l.abort;return l.abort=function(){return l.aborted=!0,n.apply(l,arguments)},l.uri=e.uri,l.requestTime=Date.now(),l}return d.original=!0,d}function Bd(e){var t={};return e.byterange&&(t.Range=function(e){let t;return"bytes="+e.offset+"-"+(t="bigint"==typeof e.offset||"bigint"==typeof e.length?window.BigInt(e.offset)+window.BigInt(e.length)-window.BigInt(1):e.offset+e.length-1)}(e.byterange)),t}function Fd(e,t){return e=e.toString(16),"00".substring(0,2-e.length)+e+(t%2?" ":"")}function qd(e){return 32<=e&&e<126?String.fromCharCode(e):"."}function jd(i){const s={};return Object.keys(i).forEach(e=>{var t=i[e];Kn(t)?s[e]={bytes:t.buffer,byteOffset:t.byteOffset,byteLength:t.byteLength}:s[e]=t}),s}function Hd(e){var t=e.byterange||{length:1/0,offset:0};return[t.length,t.offset,e.resolvedUri].join(",")}function Vd(e){return e.resolvedUri}const $d=e=>{var t,i,s=Array.prototype.slice.call(e);let r="";for(let e=0;e<s.length/16;e++)t=s.slice(16*e,16*e+16).map(Fd).join(""),i=s.slice(16*e,16*e+16).map(qd).join(""),r+=t+" "+i+"\n";return r};Fr=Object.freeze({__proto__:null,createTransferableMessage:jd,initSegmentId:Hd,segmentKeyId:Vd,hexDump:$d,tagDump:({bytes:e})=>$d(e),textRanges:e=>{let t="",i;for(i=0;i<e.length;i++)t+=(s=e,r=i,s.start(r)+"-"+s.end(r)+" ");var s,r;return t}});const zd=.25,Wd=e=>e.transmuxedPresentationEnd-e.transmuxedPresentationStart-e.transmuxerPrependedSeconds,Gd=({playlist:e,time:t=void 0,callback:i})=>{var s,r;if(i)return e&&void 0!==t?(e=((t,i)=>{if(!i||!i.segments||0===i.segments.length)return null;let s=0,r;for(let e=0;e<i.segments.length&&(r=i.segments[e],!(t<=(s=r.videoTimingInfo?r.videoTimingInfo.transmuxedPresentationEnd:s+r.duration)));e++);var e=i.segments[i.segments.length-1];if(e.videoTimingInfo&&e.videoTimingInfo.transmuxedPresentationEnd<t)return null;if(t>s){if(t>s+e.duration*zd)return null;r=e}return{segment:r,estimatedStart:r.videoTimingInfo?r.videoTimingInfo.transmuxedPresentationStart:s-r.duration,type:r.videoTimingInfo?"accurate":"estimate"}})(t,e))?"estimate"===e.type?i({message:"Accurate programTime could not be determined. Please seek to e.seekTime and try again",seekTime:e.estimatedStart}):(s={mediaSeconds:t},t=t,(r=(e=e.segment).dateTimeObject?(r=e.videoTimingInfo.transmuxerPrependedSeconds,t=t-(e.videoTimingInfo.transmuxedPresentationStart+r),new Date(e.dateTimeObject.getTime()+1e3*t)):null)&&(s.programDateTime=r.toISOString()),i(null,s)):i({message:"valid programTime was not found"}):i({message:"getProgramTime: playlist and time must be provided"});throw new Error("getProgramTime: callback must be provided")},Xd=({programTime:e,playlist:t,retryCount:i=2,seekTo:s,pauseAfterSeek:r=!0,tech:n,callback:a})=>{var o,l,d;if(a)return"undefined"!=typeof e&&t&&s?t.endList||n.hasStarted_?(t=>{if(!t.segments||0===t.segments.length)return!1;for(let e=0;e<t.segments.length;e++)if(!t.segments[e].dateTimeObject)return!1;return!0})(t)?(d=((e,t)=>{let i;try{i=new Date(e)}catch(e){return null}if(!t||!t.segments||0===t.segments.length)return null;let s=t.segments[0];if(i<new Date(s.dateTimeObject))return null;for(let e=0;e<t.segments.length-1;e++){s=t.segments[e];var r=new Date(t.segments[e+1].dateTimeObject);if(i<r)break}var e=t.segments[t.segments.length-1],n=e.dateTimeObject,a=e.videoTimingInfo?Wd(e.videoTimingInfo):e.duration+e.duration*zd,a=new Date(n.getTime()+1e3*a);return i>a?null:{segment:s=i>new Date(n)?e:s,estimatedStart:s.videoTimingInfo?s.videoTimingInfo.transmuxedPresentationStart:Td.duration(t,t.mediaSequence+t.segments.indexOf(s)),type:s.videoTimingInfo?"accurate":"estimate"}})(e,t))?(l=((e,t)=>{let i,s;try{i=new Date(e),s=new Date(t)}catch(e){}e=i.getTime();return(s.getTime()-e)/1e3})((o=d.segment).dateTimeObject,e),"estimate"===d.type?0===i?a({message:e+" is not buffered yet. Try again"}):(s(d.estimatedStart+l),void n.one("seeked",()=>{Xd({programTime:e,playlist:t,retryCount:i-1,seekTo:s,pauseAfterSeek:r,tech:n,callback:a})})):(d=o.start+l,n.one("seeked",()=>a(null,n.currentTime())),r&&n.pause(),void s(d))):a({message:e+" was not found in the stream"}):a({message:"programDateTime tags must be provided in the manifest "+t.resolvedUri}):a({message:"player must be playing a live stream to start buffering"}):a({message:"seekToProgramTime: programTime, seekTo and playlist must be provided"});throw new Error("seekToProgramTime: callback must be provided")},Kd=(e,t)=>{if(4===e.readyState)return t()},Yd=(e,t,r)=>{let s=[],n,a=!1;function o(e,t,i,s){return t.abort(),a=!0,r(e,t,i,s)}function i(e,t){var i;if(!a)return e?o(e,t,"",s):(i=t.responseText.substring(s&&s.byteLength||0,t.responseText.length),s=function(){for(var e,t,i,s=arguments.length,r=new Array(s),n=0;n<s;n++)r[n]=arguments[n];return(r=r.filter(function(e){return e&&(e.byteLength||e.length)&&"string"!=typeof e})).length<=1?S(r[0]):(e=r.reduce(function(e,t,i){return e+(t.byteLength||t.length)},0),t=new Uint8Array(e),i=0,r.forEach(function(e){e=S(e),t.set(e,i),i+=e.byteLength}),t)}(s,Fn(i,!0)),n=n||vl(s),s.length<10||n&&s.length<n+2||"ts"===(i=Cl(s))&&s.length<188||!i&&s.length<376?Kd(t,()=>o(e,t,"",s)):o(null,t,i,s))}const l=t({uri:e,beforeSend(e){e.overrideMimeType("text/plain; charset=x-user-defined"),e.addEventListener("progress",function({}){return Md(e,null,{statusCode:e.status},i)})}},function(e,t){return Md(l,e,t,i)});return l};Fi=T.EventTarget;function Qd(t,i){if(!Ld(t,i))return!1;if(t.sidx&&i.sidx&&(t.sidx.offset!==i.sidx.offset||t.sidx.length!==i.sidx.length))return!1;if(!t.sidx&&i.sidx||t.sidx&&!i.sidx)return!1;if(t.segments&&!i.segments||!t.segments&&i.segments)return!1;if(t.segments||i.segments)for(let e=0;e<t.segments.length;e++){var s=t.segments[e],r=i.segments[e];if(s.uri!==r.uri)return!1;if(s.byterange||r.byterange){s=s.byterange,r=r.byterange;if(s&&!r||!s&&r)return!1;if(s.offset!==r.offset||s.length!==r.length)return!1}}return!0}const Jd=(e,t,i,s)=>{return`placeholder-uri-${e}-${t}-`+(s.attributes.NAME||i)},Zd=({mainXml:e,srcUrl:t,clientOffset:i,sidxMapping:s,previousManifest:r})=>{e=e,i={manifestUri:t,clientOffset:i,sidxMapping:s,previousManifest:r},e=fl(yl(e),i),s=ol(e.representationInfo);r=el({dashPlaylists:s,locations:e.locations,contentSteering:e.contentSteeringInfo,sidxMapping:i.sidxMapping,previousManifest:i.previousManifest,eventStream:e.eventStream});return xd(r,t,Jd),r},eh=(e,t,i)=>{let a=!0,o=L(e,{duration:t.duration,minimumUpdatePeriod:t.minimumUpdatePeriod,timelineStarts:t.timelineStarts});for(let e=0;e<t.playlists.length;e++){var s=t.playlists[e],r=(s.sidx&&(r=zo(s.sidx),i)&&i[r]&&i[r].sidx&&Fo(s,i[r].sidx,s.sidx.resolvedUri),Od(o,s,Qd));r&&(o=r,a=!1)}var n,l;return Cd(t,(e,t,i,s)=>{var r,n;e.playlists&&e.playlists.length&&(r=e.playlists[0].id,n=Od(o,e.playlists[0],Qd))&&(s in(o=n).mediaGroups[t][i]||(o.mediaGroups[t][i][s]=e),o.mediaGroups[t][i][s].playlists[0]=o.playlists[r],a=!1)}),n=o,l=t,Cd(n,(e,t,i,s)=>{s in l.mediaGroups[t][i]||delete n.mediaGroups[t][i][s]}),(a=t.minimumUpdatePeriod===e.minimumUpdatePeriod&&a)?null:o},th=(e,t)=>{return(Boolean(!e.map&&!t.map)||Boolean(e.map&&t.map&&e.map.byterange.offset===t.map.byterange.offset&&e.map.byterange.length===t.map.byterange.length))&&e.uri===t.uri&&e.byterange.offset===t.byterange.offset&&e.byterange.length===t.byterange.length},ih=(e,t)=>{var i={};for(const a in e){var s=e[a].sidx;if(s){var r=zo(s);if(!t[r])break;var n=t[r].sidxInfo;th(n,s)&&(i[r]=t[r])}}return i};class sh extends Fi{constructor(e,t,i={},s){super(),this.mainPlaylistLoader_=s||this,s||(this.isMain_=!0);var{withCredentials:s=!1}=i;if(this.vhs_=t,this.withCredentials=s,this.addMetadataToTextTrack=i.addMetadataToTextTrack,!e)throw new Error("A non-empty playlist URL or object is required");this.on("minimumUpdatePeriod",()=>{this.refreshXml_()}),this.on("mediaupdatetimeout",()=>{this.refreshMedia_(this.media().id)}),this.state="HAVE_NOTHING",this.loadedPlaylists_={},this.logger_=zl("DashPlaylistLoader"),this.isMain_?(this.mainPlaylistLoader_.srcUrl=e,this.mainPlaylistLoader_.sidxMapping_={}):this.childPlaylist_=e}requestErrored_(e,t,i){return!this.request||(this.request=null,e?(this.error="object"!=typeof e||e instanceof Error?{status:t.status,message:"DASH request error at URL: "+t.uri,response:t.response,code:2,metadata:e.metadata}:e,i&&(this.state=i),this.trigger("error"),!0):void 0)}addSidxSegments_(a,s,r){const n=a.sidx&&zo(a.sidx);if(a.sidx&&n&&!this.mainPlaylistLoader_.sidxMapping_[n]){const o=$l(a.sidx.resolvedUri),l=(t,i)=>{if(!this.requestErrored_(t,i,s)){t=this.mainPlaylistLoader_.sidxMapping_;let e;try{e=Il(S(i.response).subarray(8))}catch(e){return e.metadata={errorType:T.Error.DashManifestSidxParsingError},void this.requestErrored_(e,i,s)}return t[n]={sidxInfo:a.sidx,sidx:e},Fo(a,e,a.sidx.resolvedUri),r(!0)}};this.request=Yd(o,this.vhs_.xhr,(e,t,i,s)=>{var r,n;return e?l(e,t):i&&"mp4"===i?({offset:r,length:n}=a.sidx.byterange,s.length>=n+r?l(e,{response:s.subarray(r,r+n),status:t.status,uri:t.uri}):void(this.request=this.vhs_.xhr({uri:o,responseType:"arraybuffer",headers:Bd({byterange:a.sidx.byterange})},l))):(e=i||"unknown",l({status:t.status,message:`Unsupported ${e} container type for sidx segment at URL: `+o,response:"",playlist:a,internal:!0,playlistExclusionDuration:1/0,code:2,metadata:{errorType:T.Error.UnsupportedSidxContainer,sidxContainer:e}},t))})}else this.mediaRequest_=window.setTimeout(()=>r(!1),0)}dispose(){this.trigger("dispose"),this.stopRequest(),this.loadedPlaylists_={},window.clearTimeout(this.minimumUpdatePeriodTimeout_),window.clearTimeout(this.mediaRequest_),window.clearTimeout(this.mediaUpdateTimeout),this.mediaUpdateTimeout=null,this.mediaRequest_=null,this.minimumUpdatePeriodTimeout_=null,this.mainPlaylistLoader_.createMupOnMedia_&&(this.off("loadedmetadata",this.mainPlaylistLoader_.createMupOnMedia_),this.mainPlaylistLoader_.createMupOnMedia_=null),this.off()}hasPendingRequest(){return this.request||this.mediaRequest_}stopRequest(){var e;this.request&&(e=this.request,this.request=null,e.onreadystatechange=null,e.abort())}media(t){if(!t)return this.media_;if("HAVE_NOTHING"===this.state)throw new Error("Cannot switch media playlist from "+this.state);const i=this.state;if("string"==typeof t){if(!this.mainPlaylistLoader_.main.playlists[t])throw new Error("Unknown playlist URI: "+t);t=this.mainPlaylistLoader_.main.playlists[t]}var e=!this.media_||t.id!==this.media_.id;e&&this.loadedPlaylists_[t.id]&&this.loadedPlaylists_[t.id].endList?(this.state="HAVE_METADATA",this.media_=t,e&&(this.trigger("mediachanging"),this.trigger("mediachange"))):e&&(this.media_&&this.trigger("mediachanging"),this.addSidxSegments_(t,i,e=>{this.haveMetadata({startingState:i,playlist:t})}))}haveMetadata({startingState:e,playlist:t}){this.state="HAVE_METADATA",this.loadedPlaylists_[t.id]=t,this.mediaRequest_=null,this.refreshMedia_(t.id),"HAVE_MAIN_MANIFEST"===e?this.trigger("loadedmetadata"):this.trigger("mediachange")}pause(){this.mainPlaylistLoader_.createMupOnMedia_&&(this.off("loadedmetadata",this.mainPlaylistLoader_.createMupOnMedia_),this.mainPlaylistLoader_.createMupOnMedia_=null),this.stopRequest(),window.clearTimeout(this.mediaUpdateTimeout),this.mediaUpdateTimeout=null,this.isMain_&&(window.clearTimeout(this.mainPlaylistLoader_.minimumUpdatePeriodTimeout_),this.mainPlaylistLoader_.minimumUpdatePeriodTimeout_=null),"HAVE_NOTHING"===this.state&&(this.started=!1)}load(e){window.clearTimeout(this.mediaUpdateTimeout),this.mediaUpdateTimeout=null;var t=this.media();e?(e=t?t.targetDuration/2*1e3:5e3,this.mediaUpdateTimeout=window.setTimeout(()=>this.load(),e)):this.started?t&&!t.endList?(this.isMain_&&!this.minimumUpdatePeriodTimeout_&&(this.trigger("minimumUpdatePeriod"),this.updateMinimumUpdatePeriodTimeout_()),this.trigger("mediaupdatetimeout")):this.trigger("loadedplaylist"):this.start()}start(){this.started=!0,this.isMain_?this.requestMain_((e,t)=>{this.haveMain_(),this.hasPendingRequest()||this.media_||this.media(this.mainPlaylistLoader_.main.playlists[0])}):this.mediaRequest_=window.setTimeout(()=>this.haveMain_(),0)}requestMain_(s){this.request=this.vhs_.xhr({uri:this.mainPlaylistLoader_.srcUrl,withCredentials:this.withCredentials,requestType:"dash-manifest"},(e,t)=>{if(this.requestErrored_(e,t))"HAVE_NOTHING"===this.state&&(this.started=!1);else{const i=t.responseText!==this.mainPlaylistLoader_.mainXml_;if(this.mainPlaylistLoader_.mainXml_=t.responseText,t.responseHeaders&&t.responseHeaders.date?this.mainLoaded_=Date.parse(t.responseHeaders.date):this.mainLoaded_=Date.now(),this.mainPlaylistLoader_.srcUrl=$l(this.mainPlaylistLoader_.srcUrl,t),!i)return s(t,i);this.handleMain_(),this.syncClientServerClock_(()=>s(t,i))}})}syncClientServerClock_(s){const r=_l(this.mainPlaylistLoader_.mainXml_);return null===r?(this.mainPlaylistLoader_.clientOffset_=this.mainLoaded_-Date.now(),s()):"DIRECT"===r.method?(this.mainPlaylistLoader_.clientOffset_=r.value-Date.now(),s()):void(this.request=this.vhs_.xhr({uri:Vl(this.mainPlaylistLoader_.srcUrl,r.value),method:r.method,withCredentials:this.withCredentials,requestType:"dash-clock-sync"},(t,i)=>{if(this.request){if(t)return this.mainPlaylistLoader_.clientOffset_=this.mainLoaded_-Date.now(),s();let e;e="HEAD"===r.method?i.responseHeaders&&i.responseHeaders.date?Date.parse(i.responseHeaders.date):this.mainLoaded_:Date.parse(i.responseText),this.mainPlaylistLoader_.clientOffset_=e-Date.now(),s()}}))}haveMain_(){this.state="HAVE_MAIN_MANIFEST",this.isMain_?this.trigger("loadedplaylist"):this.media_||this.media(this.childPlaylist_)}handleMain_(){this.mediaRequest_=null;var e=this.mainPlaylistLoader_.main;let t=Zd({mainXml:this.mainPlaylistLoader_.mainXml_,srcUrl:this.mainPlaylistLoader_.srcUrl,clientOffset:this.mainPlaylistLoader_.clientOffset_,sidxMapping:this.mainPlaylistLoader_.sidxMapping_,previousManifest:e});e&&(t=eh(e,t,this.mainPlaylistLoader_.sidxMapping_)),this.mainPlaylistLoader_.main=t||e;var i=this.mainPlaylistLoader_.main.locations&&this.mainPlaylistLoader_.main.locations[0];return i&&i!==this.mainPlaylistLoader_.srcUrl&&(this.mainPlaylistLoader_.srcUrl=i),(!e||t&&t.minimumUpdatePeriod!==e.minimumUpdatePeriod)&&this.updateMinimumUpdatePeriodTimeout_(),this.addEventStreamToMetadataTrack_(t),Boolean(t)}updateMinimumUpdatePeriodTimeout_(){var e=this.mainPlaylistLoader_;e.createMupOnMedia_&&(e.off("loadedmetadata",e.createMupOnMedia_),e.createMupOnMedia_=null),e.minimumUpdatePeriodTimeout_&&(window.clearTimeout(e.minimumUpdatePeriodTimeout_),e.minimumUpdatePeriodTimeout_=null);let t=e.main&&e.main.minimumUpdatePeriod;0===t&&(e.media()?t=1e3*e.media().targetDuration:(e.createMupOnMedia_=e.updateMinimumUpdatePeriodTimeout_,e.one("loadedmetadata",e.createMupOnMedia_))),"number"!=typeof t||t<=0?t<0&&this.logger_(`found invalid minimumUpdatePeriod of ${t}, not setting a timeout`):this.createMUPTimeout_(t)}createMUPTimeout_(e){const t=this.mainPlaylistLoader_;t.minimumUpdatePeriodTimeout_=window.setTimeout(()=>{t.minimumUpdatePeriodTimeout_=null,t.trigger("minimumUpdatePeriod"),t.createMUPTimeout_(e)},e)}refreshXml_(){this.requestMain_((e,t)=>{t&&(this.media_&&(this.media_=this.mainPlaylistLoader_.main.playlists[this.media_.id]),this.mainPlaylistLoader_.sidxMapping_=((e,r)=>{let n=ih(e.playlists,r);return Cd(e,(e,t,i,s)=>{e.playlists&&e.playlists.length&&(e=e.playlists,n=L(n,ih(e,r)))}),n})(this.mainPlaylistLoader_.main,this.mainPlaylistLoader_.sidxMapping_),this.addSidxSegments_(this.media(),this.state,e=>{this.refreshMedia_(this.media().id)}))})}refreshMedia_(e){if(!e)throw new Error("refreshMedia_ must take a media id");this.media_&&this.isMain_&&this.handleMain_();var t=this.mainPlaylistLoader_.main.playlists;const i=!this.media_||this.media_!==t[e];if(i?this.media_=t[e]:this.trigger("playlistunchanged"),!this.mediaUpdateTimeout){const s=()=>{this.media().endList||(this.mediaUpdateTimeout=window.setTimeout(()=>{this.trigger("mediaupdatetimeout"),s()},Rd(this.media(),Boolean(i))))};s()}this.trigger("loadedplaylist")}addEventStreamToMetadataTrack_(e){e&&this.mainPlaylistLoader_.main.eventStream&&(e=this.mainPlaylistLoader_.main.eventStream.map(e=>({cueTime:e.start,frames:[{data:e.messageData}]})),this.addMetadataToTextTrack("EventStream",e,this.mainPlaylistLoader_.main.duration))}getKeyIdSet(e){if(e.contentProtection){var t=new Set;for(const s in e.contentProtection){var i=e.contentProtection[s].attributes["cenc:default_KID"];i&&t.add(i.replace(/-/g,"").toLowerCase())}return t}}}var O={GOAL_BUFFER_LENGTH:30,MAX_GOAL_BUFFER_LENGTH:60,BACK_BUFFER_LENGTH:30,GOAL_BUFFER_LENGTH_RATE:1,INITIAL_BANDWIDTH:4194304,BANDWIDTH_VARIANCE:1.2,BUFFER_LOW_WATER_LINE:0,MAX_BUFFER_LOW_WATER_LINE:30,EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE:16,BUFFER_LOW_WATER_LINE_RATE:1,BUFFER_HIGH_WATER_LINE:30};function rh(e){return e.on=e.addEventListener,e.off=e.removeEventListener,e}const nh=t=>{var i=new Uint8Array(new ArrayBuffer(t.length));for(let e=0;e<t.length;e++)i[e]=t.charCodeAt(e);return i.buffer};function ah(s){return function(){const e=function(t){try{return URL.createObjectURL(new Blob([t],{type:"application/javascript"}))}catch(e){var i=new BlobBuilder;return i.append(t),URL.createObjectURL(i.getBlob())}}(s);var t=rh(new Worker(e));t.objURL=e;const i=t.terminate;return t.on=t.addEventListener,t.off=t.removeEventListener,t.terminate=function(){return URL.revokeObjectURL(e),i.call(this)},t}}function oh(e){return`var browserWorkerPolyFill = ${rh.toString()};
+`+"browserWorkerPolyFill(self);\n"+e}function lh(e){return e.toString().replace(/^function.+?{/,"").slice(0,-1)}var dh=ah(oh(lh(function(){function e(){this.init=function(){var n={};this.on=function(e,t){n[e]||(n[e]=[]),n[e]=n[e].concat(t)},this.off=function(e,t){return!!n[e]&&(t=n[e].indexOf(t),n[e]=n[e].slice(),n[e].splice(t,1),-1<t)},this.trigger=function(e){var t,i,s,r=n[e];if(r)if(2===arguments.length)for(i=r.length,t=0;t<i;++t)r[t].call(this,arguments[1]);else{for(s=[],t=arguments.length,t=1;t<arguments.length;++t)s.push(arguments[t]);for(i=r.length,t=0;t<i;++t)r[t].apply(this,s)}},this.dispose=function(){n={}}}}var l,M,U,B,F,q,j,H,V,$,z,W,G,X,K,Y,Q,J,Z,ee,d,te,ie,se,re,ne,ae,oe,t,le,de,he,ue,ce,pe,me,ge,fe="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},i=(e.prototype.pipe=function(t){return this.on("data",function(e){t.push(e)}),this.on("done",function(e){t.flush(e)}),this.on("partialdone",function(e){t.partialFlush(e)}),this.on("endedtimeline",function(e){t.endTimeline(e)}),this.on("reset",function(e){t.reset(e)}),t},e.prototype.push=function(e){this.trigger("data",e)},e.prototype.flush=function(e){this.trigger("done",e)},e.prototype.partialFlush=function(e){this.trigger("partialdone",e)},e.prototype.endTimeline=function(e){this.trigger("endedtimeline",e)},e.prototype.reset=function(e){this.trigger("reset",e)},e),ye=Math.pow(2,32),s={getUint64:function(e){var t,e=new DataView(e.buffer,e.byteOffset,e.byteLength);return e.getBigUint64?(t=e.getBigUint64(0))<Number.MAX_SAFE_INTEGER?Number(t):t:e.getUint32(0)*ye+e.getUint32(4)},MAX_UINT32:ye},_e=s.MAX_UINT32;if(d={avc1:[],avcC:[],btrt:[],dinf:[],dref:[],esds:[],ftyp:[],hdlr:[],mdat:[],mdhd:[],mdia:[],mfhd:[],minf:[],moof:[],moov:[],mp4a:[],mvex:[],mvhd:[],pasp:[],sdtp:[],smhd:[],stbl:[],stco:[],stsc:[],stsd:[],stsz:[],stts:[],styp:[],tfdt:[],tfhd:[],traf:[],trak:[],trun:[],trex:[],tkhd:[],vmhd:[]},"undefined"!=typeof Uint8Array){for(var r in d)d.hasOwnProperty(r)&&(d[r]=[r.charCodeAt(0),r.charCodeAt(1),r.charCodeAt(2),r.charCodeAt(3)]);te=new Uint8Array(["i".charCodeAt(0),"s".charCodeAt(0),"o".charCodeAt(0),"m".charCodeAt(0)]),se=new Uint8Array(["a".charCodeAt(0),"v".charCodeAt(0),"c".charCodeAt(0),"1".charCodeAt(0)]),ie=new Uint8Array([0,0,0,1]),ke=new Uint8Array([0,0,0,0,0,0,0,0,118,105,100,101,0,0,0,0,0,0,0,0,0,0,0,0,86,105,100,101,111,72,97,110,100,108,101,114,0]),Ie=new Uint8Array([0,0,0,0,0,0,0,0,115,111,117,110,0,0,0,0,0,0,0,0,0,0,0,0,83,111,117,110,100,72,97,110,100,108,101,114,0]),re={video:ke,audio:Ie},oe=new Uint8Array([0,0,0,0,0,0,0,1,0,0,0,12,117,114,108,32,0,0,0,1]),ae=new Uint8Array([0,0,0,0,0,0,0,0]),t=new Uint8Array([0,0,0,0,0,0,0,0]),le=t,de=new Uint8Array([0,0,0,0,0,0,0,0,0,0,0,0]),he=t,ne=new Uint8Array([0,0,0,1,0,0,0,0,0,0,0,0])}l=function(e){for(var t,i=[],s=0,r=1;r<arguments.length;r++)i.push(arguments[r]);for(r=i.length;r--;)s+=i[r].byteLength;for(t=new Uint8Array(s+8),new DataView(t.buffer,t.byteOffset,t.byteLength).setUint32(0,t.byteLength),t.set(e,4),r=0,s=8;r<i.length;r++)t.set(i[r],s),s+=i[r].byteLength;return t},M=function(){return l(d.dinf,l(d.dref,oe))},U=function(e){return l(d.esds,new Uint8Array([0,0,0,0,3,25,0,0,0,4,17,64,21,0,6,0,0,0,218,192,0,0,218,192,5,2,e.audioobjecttype<<3|e.samplingfrequencyindex>>>1,e.samplingfrequencyindex<<7|e.channelcount<<3,6,1,2]))},X=function(e){return l(d.hdlr,re[e])},G=function(e){var t=new Uint8Array([0,0,0,0,0,0,0,2,0,0,0,3,0,1,95,144,e.duration>>>24&255,e.duration>>>16&255,e.duration>>>8&255,255&e.duration,85,196,0,0]);return e.samplerate&&(t[12]=e.samplerate>>>24&255,t[13]=e.samplerate>>>16&255,t[14]=e.samplerate>>>8&255,t[15]=255&e.samplerate),l(d.mdhd,t)},W=function(e){return l(d.mdia,G(e),X(e.type),q(e))},F=function(e){return l(d.mfhd,new Uint8Array([0,0,0,0,(4278190080&e)>>24,(16711680&e)>>16,(65280&e)>>8,255&e]))},q=function(e){return l(d.minf,"video"===e.type?l(d.vmhd,ne):l(d.smhd,ae),M(),Y(e))},H=function(e){for(var t=e.length,i=[];t--;)i[t]=Z(e[t]);return l.apply(null,[d.mvex].concat(i))},V=function(e){e=new Uint8Array([0,0,0,0,0,0,0,1,0,0,0,2,0,1,95,144,(4278190080&e)>>24,(16711680&e)>>16,(65280&e)>>8,255&e,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,64,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,255,255,255]);return l(d.mvhd,e)},K=function(e){for(var t,i=e.samples||[],s=new Uint8Array(4+i.length),r=0;r<i.length;r++)t=i[r].flags,s[r+4]=t.dependsOn<<4|t.isDependedOn<<2|t.hasRedundancy;return l(d.sdtp,s)},Y=function(e){return l(d.stbl,Q(e),l(d.stts,he),l(d.stsc,le),l(d.stsz,de),l(d.stco,t))},Q=function(e){return l(d.stsd,new Uint8Array([0,0,0,0,0,0,0,1]),("video"===e.type?ue:ce)(e))},ue=function(e){for(var t,i,s=e.sps||[],r=e.pps||[],n=[],a=[],o=0;o<s.length;o++)n.push((65280&s[o].byteLength)>>>8),n.push(255&s[o].byteLength),n=n.concat(Array.prototype.slice.call(s[o]));for(o=0;o<r.length;o++)a.push((65280&r[o].byteLength)>>>8),a.push(255&r[o].byteLength),a=a.concat(Array.prototype.slice.call(r[o]));return t=[d.avc1,new Uint8Array([0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,(65280&e.width)>>8,255&e.width,(65280&e.height)>>8,255&e.height,0,72,0,0,0,72,0,0,0,0,0,0,0,1,19,118,105,100,101,111,106,115,45,99,111,110,116,114,105,98,45,104,108,115,0,0,0,0,0,0,0,0,0,0,0,0,0,24,17,17]),l(d.avcC,new Uint8Array([1,e.profileIdc,e.profileCompatibility,e.levelIdc,255].concat([s.length],n,[r.length],a))),l(d.btrt,new Uint8Array([0,28,156,128,0,45,198,192,0,45,198,192]))],e.sarRatio&&(i=e.sarRatio[0],e=e.sarRatio[1],t.push(l(d.pasp,new Uint8Array([(4278190080&i)>>24,(16711680&i)>>16,(65280&i)>>8,255&i,(4278190080&e)>>24,(16711680&e)>>16,(65280&e)>>8,255&e])))),l.apply(null,t)},ce=function(e){return l(d.mp4a,new Uint8Array([0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,(65280&e.channelcount)>>8,255&e.channelcount,(65280&e.samplesize)>>8,255&e.samplesize,0,0,0,0,(65280&e.samplerate)>>8,255&e.samplerate,0,0]),U(e))},z=function(e){e=new Uint8Array([0,0,0,7,0,0,0,0,0,0,0,0,(4278190080&e.id)>>24,(16711680&e.id)>>16,(65280&e.id)>>8,255&e.id,0,0,0,0,(4278190080&e.duration)>>24,(16711680&e.duration)>>16,(65280&e.duration)>>8,255&e.duration,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,64,0,0,0,(65280&e.width)>>8,255&e.width,0,0,(65280&e.height)>>8,255&e.height,0,0]);return l(d.tkhd,e)},J=function(e){var t,i=l(d.tfhd,new Uint8Array([0,0,0,58,(4278190080&e.id)>>24,(16711680&e.id)>>16,(65280&e.id)>>8,255&e.id,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0])),s=Math.floor(e.baseMediaDecodeTime/_e),r=Math.floor(e.baseMediaDecodeTime%_e),s=l(d.tfdt,new Uint8Array([1,0,0,0,s>>>24&255,s>>>16&255,s>>>8&255,255&s,r>>>24&255,r>>>16&255,r>>>8&255,255&r]));return"audio"===e.type?(t=ee(e,92),l(d.traf,i,s,t)):(r=K(e),t=ee(e,r.length+92),l(d.traf,i,s,t,r))},$=function(e){return e.duration=e.duration||4294967295,l(d.trak,z(e),W(e))},Z=function(e){var t=new Uint8Array([0,0,0,0,(4278190080&e.id)>>24,(16711680&e.id)>>16,(65280&e.id)>>8,255&e.id,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,1]);return"video"!==e.type&&(t[t.length-1]=0),l(d.trex,t)},pe=function(e,t){var i=0,s=0,r=0,n=0;return e.length&&(void 0!==e[0].duration&&(i=1),void 0!==e[0].size&&(s=2),void 0!==e[0].flags&&(r=4),void 0!==e[0].compositionTimeOffset)&&(n=8),[0,0,i|s|r|n,1,(4278190080&e.length)>>>24,(16711680&e.length)>>>16,(65280&e.length)>>>8,255&e.length,(4278190080&t)>>>24,(16711680&t)>>>16,(65280&t)>>>8,255&t]},me=function(e,t){var i,s,r,n,a=e.samples||[];for(t+=20+16*a.length,e=pe(a,t),(s=new Uint8Array(e.length+16*a.length)).set(e),i=e.length,n=0;n<a.length;n++)r=a[n],s[i++]=(4278190080&r.duration)>>>24,s[i++]=(16711680&r.duration)>>>16,s[i++]=(65280&r.duration)>>>8,s[i++]=255&r.duration,s[i++]=(4278190080&r.size)>>>24,s[i++]=(16711680&r.size)>>>16,s[i++]=(65280&r.size)>>>8,s[i++]=255&r.size,s[i++]=r.flags.isLeading<<2|r.flags.dependsOn,s[i++]=r.flags.isDependedOn<<6|r.flags.hasRedundancy<<4|r.flags.paddingValue<<1|r.flags.isNonSyncSample,s[i++]=61440&r.flags.degradationPriority,s[i++]=15&r.flags.degradationPriority,s[i++]=(4278190080&r.compositionTimeOffset)>>>24,s[i++]=(16711680&r.compositionTimeOffset)>>>16,s[i++]=(65280&r.compositionTimeOffset)>>>8,s[i++]=255&r.compositionTimeOffset;return l(d.trun,s)},ge=function(e,t){var i,s,r,n,a=e.samples||[];for(t+=20+8*a.length,e=pe(a,t),(i=new Uint8Array(e.length+8*a.length)).set(e),s=e.length,n=0;n<a.length;n++)r=a[n],i[s++]=(4278190080&r.duration)>>>24,i[s++]=(16711680&r.duration)>>>16,i[s++]=(65280&r.duration)>>>8,i[s++]=255&r.duration,i[s++]=(4278190080&r.size)>>>24,i[s++]=(16711680&r.size)>>>16,i[s++]=(65280&r.size)>>>8,i[s++]=255&r.size;return l(d.trun,i)},ee=function(e,t){return("audio"===e.type?ge:me)(e,t)};function ve(e,t){var i=xe();return i.dataOffset=t,i.compositionTimeOffset=e.pts-e.dts,i.duration=e.duration,i.size=4*e.length,i.size+=e.byteLength,e.keyFrame&&(i.flags.dependsOn=2,i.flags.isNonSyncSample=0),i}function n(e){for(var t=[];e--;)t.push(0);return t}function a(e){e=e||{},a.prototype.init.call(this),this.parse708captions_="boolean"!=typeof e.parse708captions||e.parse708captions,this.captionPackets_=[],this.ccStreams_=[new g(0,0),new g(0,1),new g(1,0),new g(1,1)],this.parse708captions_&&(this.cc708Stream_=new m({captionServices:e.captionServices})),this.reset(),this.ccStreams_.forEach(function(e){e.on("data",this.trigger.bind(this,"data")),e.on("partialdone",this.trigger.bind(this,"partialdone")),e.on("done",this.trigger.bind(this,"done"))},this),this.parse708captions_&&(this.cc708Stream_.on("data",this.trigger.bind(this,"data")),this.cc708Stream_.on("partialdone",this.trigger.bind(this,"partialdone")),this.cc708Stream_.on("done",this.trigger.bind(this,"done")))}function be(e){return 32<=e&&e<=127||160<=e&&e<=255}function o(e){this.windowNum=e,this.reset()}function Te(e,t,i){this.serviceNum=e,this.text="",this.currentWindow=new o(-1),this.windows=[],this.stream=i,"string"==typeof t&&this.createTextDecoder(t)}function Se(e){return null===e?"":(e=Fe[e]||e,String.fromCharCode(e))}function h(){for(var e=[],t=qe+1;t--;)e.push({text:"",indent:0,offset:0});return e}function we(e,t){var i=1;for(t<e&&(i=-1);Math.abs(t-e)>ze;)e+=i*$e;return e}function Ee(e){var t,i;Ee.prototype.init.call(this),this.type_=e||"shared",this.push=function(e){"metadata"===e.type?this.trigger("data",e):"shared"!==this.type_&&e.type!==this.type_||(void 0===i&&(i=e.dts),e.dts=we(e.dts,i),e.pts=we(e.pts,i),t=e.dts,this.trigger("data",e))},this.flush=function(){i=t,this.trigger("done")},this.endTimeline=function(){this.flush(),this.trigger("endedtimeline")},this.discontinuity=function(){t=i=void 0},this.reset=function(){this.discontinuity(),this.trigger("reset")}}var Ce,ke={ftyp:B=function(){return l(d.ftyp,te,ie,te,se)},mdat:function(e){return l(d.mdat,e)},moof:function(e,t){for(var i=[],s=t.length;s--;)i[s]=J(t[s]);return l.apply(null,[d.moof,F(e)].concat(i))},moov:j=function(e){for(var t=e.length,i=[];t--;)i[t]=$(e[t]);return l.apply(null,[d.moov,V(4294967295)].concat(i).concat(H(e)))},initSegment:function(e){var t=B(),e=j(e),i=new Uint8Array(t.byteLength+e.byteLength);return i.set(t),i.set(e,t.byteLength),i}},xe=function(){return{size:0,flags:{isLeading:0,dependsOn:1,isDependedOn:0,hasRedundancy:0,degradationPriority:0,isNonSyncSample:1}}},Ie={groupNalsIntoFrames:function(e){var t,i,s=[],r=[];for(r.byteLength=0,r.nalCount=0,t=s.byteLength=r.duration=0;t<e.length;t++)"access_unit_delimiter_rbsp"===(i=e[t]).nalUnitType?(s.length&&(s.duration=i.dts-s.dts,r.byteLength+=s.byteLength,r.nalCount+=s.length,r.duration+=s.duration,r.push(s)),(s=[i]).byteLength=i.data.byteLength,s.pts=i.pts,s.dts=i.dts):("slice_layer_without_partitioning_rbsp_idr"===i.nalUnitType&&(s.keyFrame=!0),s.duration=i.dts-s.dts,s.byteLength+=i.data.byteLength,s.push(i));return r.length&&(!s.duration||s.duration<=0)&&(s.duration=r[r.length-1].duration),r.byteLength+=s.byteLength,r.nalCount+=s.length,r.duration+=s.duration,r.push(s),r},groupFramesIntoGops:function(e){var t,i,s=[],r=[];for(s.byteLength=0,s.nalCount=0,s.duration=0,s.pts=e[0].pts,s.dts=e[0].dts,r.byteLength=0,r.nalCount=0,r.duration=0,r.pts=e[0].pts,r.dts=e[0].dts,t=0;t<e.length;t++)(i=e[t]).keyFrame?(s.length&&(r.push(s),r.byteLength+=s.byteLength,r.nalCount+=s.nalCount,r.duration+=s.duration),(s=[i]).nalCount=i.length,s.byteLength=i.byteLength,s.pts=i.pts,s.dts=i.dts,s.duration=i.duration):(s.duration+=i.duration,s.nalCount+=i.length,s.byteLength+=i.byteLength,s.push(i));return r.length&&s.duration<=0&&(s.duration=r[r.length-1].duration),r.byteLength+=s.byteLength,r.nalCount+=s.nalCount,r.duration+=s.duration,r.push(s),r},extendFirstKeyFrame:function(e){var t;return!e[0][0].keyFrame&&1<e.length&&(t=e.shift(),e.byteLength-=t.byteLength,e.nalCount-=t.nalCount,e[0][0].dts=t.dts,e[0][0].pts=t.pts,e[0][0].duration+=t.duration),e},generateSampleTable:function(e,t){for(var i,s,r,n=t||0,a=[],o=0;o<e.length;o++)for(s=e[o],i=0;i<s.length;i++)r=s[i],n+=(r=ve(r,n)).size,a.push(r);return a},concatenateNalData:function(e){for(var t,i,s,r,n,a=0,o=e.byteLength,l=e.nalCount,d=new Uint8Array(o+4*l),h=new DataView(d.buffer),u=0;u<e.length;u++)for(s=e[u],t=0;t<s.length;t++)for(r=s[t],i=0;i<r.length;i++)n=r[i],h.setUint32(a,n.data.byteLength),d.set(n.data,a+=4),a+=n.data.byteLength;return d},generateSampleTableForFrame:function(e,t){var i=[],e=ve(e,t||0);return i.push(e),i},concatenateNalDataForFrame:function(e){for(var t,i=0,s=e.byteLength,r=e.length,n=new Uint8Array(s+4*r),a=new DataView(n.buffer),o=0;o<e.length;o++)t=e[o],a.setUint32(i,t.data.byteLength),n.set(t.data,i+=4),i+=t.data.byteLength;return n}},u=[33,16,5,32,164,27],Ae=[33,65,108,84,1,2,4,8,168,2,4,8,17,191,252],De=function(e){return 9e4*e},Pe=function(e,t){return e*t},Le=function(e){return e/9e4},Oe=function(e,t){return e/t},c={ONE_SECOND_IN_TS:9e4,secondsToVideoTs:De,secondsToAudioTs:Pe,videoTsToSeconds:Le,audioTsToSeconds:Oe,audioTsToVideoTs:function(e,t){return e/t*9e4},videoTsToAudioTs:function(e,t){return e/9e4*t},metadataTsToSeconds:function(e,t,i){return Le(i?e:e-t)}},Re=function(){var e,i;return Ce||(e={96e3:[u,[227,64],n(154),[56]],88200:[u,[231],n(170),[56]],64e3:[u,[248,192],n(240),[56]],48e3:[u,[255,192],n(268),[55,148,128],n(54),[112]],44100:[u,[255,192],n(268),[55,163,128],n(84),[112]],32e3:[u,[255,192],n(268),[55,234],n(226),[112]],24e3:[u,[255,192],n(268),[55,255,128],n(268),[111,112],n(126),[224]],16e3:[u,[255,192],n(268),[55,255,128],n(268),[111,255],n(269),[223,108],n(195),[1,192]],12e3:[Ae,n(268),[3,127,248],n(268),[6,255,240],n(268),[13,255,224],n(268),[27,253,128],n(259),[56]],11025:[Ae,n(268),[3,127,248],n(268),[6,255,240],n(268),[13,255,224],n(268),[27,255,192],n(268),[55,175,128],n(108),[112]],8e3:[Ae,n(268),[3,121,16],n(47),[7]]},i=e,Ce=Object.keys(i).reduce(function(e,t){return e[t]=new Uint8Array(i[t].reduce(function(e,t){return e.concat(t)},[])),e},{})),Ce},Ne=c,De={prefixWithSilence:function(e,t,i,s){var r,n,a,o,l,d=0,h=0;if(t.length&&(n=Ne.audioTsToVideoTs(e.baseMediaDecodeTime,e.samplerate),r=Math.ceil(Ne.ONE_SECOND_IN_TS/(e.samplerate/1024)),i&&s&&(n=n-Math.max(i,s),h=(d=Math.floor(n/r))*r),!(d<1||h>Ne.ONE_SECOND_IN_TS/2))){for(a=(a=Re()[e.samplerate])||t[0].data,o=0;o<d;o++)l=t[0],t.splice(0,0,{data:a,dts:l.dts-r,pts:l.pts-r});return e.baseMediaDecodeTime-=Math.floor(Ne.videoTsToAudioTs(h,e.samplerate)),h}},trimAdtsFramesByEarliestDts:function(e,t,i){return t.minSegmentDts>=i?e:(t.minSegmentDts=1/0,e.filter(function(e){return e.dts>=i&&(t.minSegmentDts=Math.min(t.minSegmentDts,e.dts),t.minSegmentPts=t.minSegmentDts,!0)}))},generateSampleTable:function(e){for(var t,i=[],s=0;s<e.length;s++)t=e[s],i.push({size:t.data.byteLength,duration:1024});return i},concatenateFrameData:function(e){for(var t,i=0,s=new Uint8Array(function(e){for(var t=0,i=0;i<e.length;i++)t+=e[i].data.byteLength;return t}(e)),r=0;r<e.length;r++)t=e[r],s.set(t.data,i),i+=t.data.byteLength;return s}},Me=c.ONE_SECOND_IN_TS,Pe={clearDtsInfo:function(e){delete e.minSegmentDts,delete e.maxSegmentDts,delete e.minSegmentPts,delete e.maxSegmentPts},calculateTrackBaseMediaDecodeTime:function(e,t){var i=e.minSegmentDts;return t||(i-=e.timelineStartInfo.dts),t=e.timelineStartInfo.baseMediaDecodeTime,t+=i,t=Math.max(0,t),"audio"===e.type&&(t*=e.samplerate/Me,t=Math.floor(t)),t},collectDtsInfo:function(e,t){"number"==typeof t.pts&&(void 0===e.timelineStartInfo.pts&&(e.timelineStartInfo.pts=t.pts),void 0===e.minSegmentPts?e.minSegmentPts=t.pts:e.minSegmentPts=Math.min(e.minSegmentPts,t.pts),void 0===e.maxSegmentPts?e.maxSegmentPts=t.pts:e.maxSegmentPts=Math.max(e.maxSegmentPts,t.pts)),"number"==typeof t.dts&&(void 0===e.timelineStartInfo.dts&&(e.timelineStartInfo.dts=t.dts),void 0===e.minSegmentDts?e.minSegmentDts=t.dts:e.minSegmentDts=Math.min(e.minSegmentDts,t.dts),void 0===e.maxSegmentDts?e.maxSegmentDts=t.dts:e.maxSegmentDts=Math.max(e.maxSegmentDts,t.dts))}},Oe={parseSei:function(e){for(var t=0,i={payloadType:-1,payloadSize:0},s=0,r=0;t<e.byteLength&&128!==e[t];){for(;255===e[t];)s+=255,t++;for(s+=e[t++];255===e[t];)r+=255,t++;if(r+=e[t++],!i.payload&&4===s){if("GA94"===String.fromCharCode(e[t+3],e[t+4],e[t+5],e[t+6])){i.payloadType=s,i.payloadSize=r,i.payload=e.subarray(t,t+r);break}i.payload=void 0}t+=r,r=s=0}return i},parseUserData:function(e){return 181!==e.payload[0]||49!=(e.payload[1]<<8|e.payload[2])||"GA94"!==String.fromCharCode(e.payload[3],e.payload[4],e.payload[5],e.payload[6])||3!==e.payload[7]?null:e.payload.subarray(8,e.payload.length-1)},parseCaptionPackets:function(e,t){var i,s,r,n,a=[];if(64&t[0])for(s=31&t[0],i=0;i<s;i++)n={type:3&t[2+(r=3*i)],pts:e},4&t[2+r]&&(n.ccData=t[3+r]<<8|t[4+r],a.push(n));return a},discardEmulationPreventionBytes:function(e){for(var t=e.byteLength,i=[],s=1;s<t-2;)0===e[s]&&0===e[s+1]&&3===e[s+2]?(i.push(s+2),s+=2):s++;if(0===i.length)return e;for(var r=t-i.length,n=new Uint8Array(r),a=0,s=0;s<r;a++,s++)a===i[0]&&(a++,i.shift()),n[s]=e[a];return n},USER_DATA_REGISTERED_ITU_T_T35:4},p=i,Ue=Oe,Be=((a.prototype=new p).push=function(e){var t;"sei_rbsp"===e.nalUnitType&&(t=Ue.parseSei(e.escapedRBSP)).payload&&t.payloadType===Ue.USER_DATA_REGISTERED_ITU_T_T35&&(t=Ue.parseUserData(t))&&(e.dts<this.latestDts_?this.ignoreNextEqualDts_=!0:e.dts===this.latestDts_&&this.ignoreNextEqualDts_?(this.numSameDts_--,this.numSameDts_||(this.ignoreNextEqualDts_=!1)):(t=Ue.parseCaptionPackets(e.pts,t),this.captionPackets_=this.captionPackets_.concat(t),this.latestDts_!==e.dts&&(this.numSameDts_=0),this.numSameDts_++,this.latestDts_=e.dts))},a.prototype.flushCCStreams=function(t){this.ccStreams_.forEach(function(e){return"flush"===t?e.flush():e.partialFlush()},this)},a.prototype.flushStream=function(e){this.captionPackets_.length&&(this.captionPackets_.forEach(function(e,t){e.presortIndex=t}),this.captionPackets_.sort(function(e,t){return e.pts===t.pts?e.presortIndex-t.presortIndex:e.pts-t.pts}),this.captionPackets_.forEach(function(e){e.type<2?this.dispatchCea608Packet(e):this.dispatchCea708Packet(e)},this),this.captionPackets_.length=0),this.flushCCStreams(e)},a.prototype.flush=function(){return this.flushStream("flush")},a.prototype.partialFlush=function(){return this.flushStream("partialFlush")},a.prototype.reset=function(){this.latestDts_=null,this.ignoreNextEqualDts_=!1,this.numSameDts_=0,this.activeCea608Channel_=[null,null],this.ccStreams_.forEach(function(e){e.reset()})},a.prototype.dispatchCea608Packet=function(e){this.setsTextOrXDSActive(e)?this.activeCea608Channel_[e.type]=null:this.setsChannel1Active(e)?this.activeCea608Channel_[e.type]=0:this.setsChannel2Active(e)&&(this.activeCea608Channel_[e.type]=1),null!==this.activeCea608Channel_[e.type]&&this.ccStreams_[(e.type<<1)+this.activeCea608Channel_[e.type]].push(e)},a.prototype.setsChannel1Active=function(e){return 4096==(30720&e.ccData)},a.prototype.setsChannel2Active=function(e){return 6144==(30720&e.ccData)},a.prototype.setsTextOrXDSActive=function(e){return 256==(28928&e.ccData)||4138==(30974&e.ccData)||6186==(30974&e.ccData)},a.prototype.dispatchCea708Packet=function(e){this.parse708captions_&&this.cc708Stream_.push(e)},{127:9834,4128:32,4129:160,4133:8230,4138:352,4140:338,4144:9608,4145:8216,4146:8217,4147:8220,4148:8221,4149:8226,4153:8482,4154:353,4156:339,4157:8480,4159:376,4214:8539,4215:8540,4216:8541,4217:8542,4218:9168,4219:9124,4220:9123,4221:9135,4222:9126,4223:9121,4256:12600}),m=(o.prototype.reset=function(){this.clearText(),this.pendingNewLine=!1,this.winAttr={},this.penAttr={},this.penLoc={},this.penColor={},this.visible=0,this.rowLock=0,this.columnLock=0,this.priority=0,this.relativePositioning=0,this.anchorVertical=0,this.anchorHorizontal=0,this.anchorPoint=0,this.rowCount=1,this.virtualRowCount=this.rowCount+1,this.columnCount=41,this.windowStyle=0,this.penStyle=0},o.prototype.getText=function(){return this.rows.join("\n")},o.prototype.clearText=function(){this.rows=[""],this.rowIdx=0},o.prototype.newLine=function(e){for(this.rows.length>=this.virtualRowCount&&"function"==typeof this.beforeRowOverflow&&this.beforeRowOverflow(e),0<this.rows.length&&(this.rows.push(""),this.rowIdx++);this.rows.length>this.virtualRowCount;)this.rows.shift(),this.rowIdx--},o.prototype.isEmpty=function(){return 0===this.rows.length||1===this.rows.length&&""===this.rows[0]},o.prototype.addText=function(e){this.rows[this.rowIdx]+=e},o.prototype.backspace=function(){var e;this.isEmpty()||(e=this.rows[this.rowIdx],this.rows[this.rowIdx]=e.substr(0,e.length-1))},Te.prototype.init=function(e,t){this.startPts=e;for(var i=0;i<8;i++)this.windows[i]=new o(i),"function"==typeof t&&(this.windows[i].beforeRowOverflow=t)},Te.prototype.setCurrentWindow=function(e){this.currentWindow=this.windows[e]},Te.prototype.createTextDecoder=function(t){if("undefined"==typeof TextDecoder)this.stream.trigger("log",{level:"warn",message:"The `encoding` option is unsupported without TextDecoder support"});else try{this.textDecoder_=new TextDecoder(t)}catch(e){this.stream.trigger("log",{level:"warn",message:"TextDecoder could not be created with "+t+" encoding. "+e})}},function(e){e=e||{},m.prototype.init.call(this);var t,i=this,s=e.captionServices||{},r={};Object.keys(s).forEach(e=>{t=s[e],/^SERVICE/.test(e)&&(r[e]=t.encoding)}),this.serviceEncodings=r,this.current708Packet=null,this.services={},this.push=function(e){(3===e.type||null===i.current708Packet)&&i.new708Packet(),i.add708Bytes(e)}}),Fe=(m.prototype=new p,m.prototype.new708Packet=function(){null!==this.current708Packet&&this.push708Packet(),this.current708Packet={data:[],ptsVals:[]}},m.prototype.add708Bytes=function(e){var t=e.ccData,i=t>>>8,t=255&t;this.current708Packet.ptsVals.push(e.pts),this.current708Packet.data.push(i),this.current708Packet.data.push(t)},m.prototype.push708Packet=function(){var e,t=this.current708Packet,i=t.data,s=null,r=0,n=i[r++];for(t.seq=n>>6,t.sizeCode=63&n;r<i.length;r++)e=31&(n=i[r++]),7===(s=n>>5)&&0<e&&(s=i[r++]),this.pushServiceBlock(s,r,e),0<e&&(r+=e-1)},m.prototype.pushServiceBlock=function(e,t,i){for(var s,r=t,n=this.current708Packet.data,a=(a=this.services[e])||this.initService(e,r);r<t+i&&r<n.length;r++)s=n[r],be(s)?r=this.handleText(r,a):24===s?r=this.multiByteCharacter(r,a):16===s?r=this.extendedCommands(r,a):128<=s&&s<=135?r=this.setCurrentWindow(r,a):152<=s&&s<=159?r=this.defineWindow(r,a):136===s?r=this.clearWindows(r,a):140===s?r=this.deleteWindows(r,a):137===s?r=this.displayWindows(r,a):138===s?r=this.hideWindows(r,a):139===s?r=this.toggleWindows(r,a):151===s?r=this.setWindowAttributes(r,a):144===s?r=this.setPenAttributes(r,a):145===s?r=this.setPenColor(r,a):146===s?r=this.setPenLocation(r,a):143===s?a=this.reset(r,a):8===s?a.currentWindow.backspace():12===s?a.currentWindow.clearText():13===s?a.currentWindow.pendingNewLine=!0:14===s?a.currentWindow.clearText():141===s&&r++},m.prototype.extendedCommands=function(e,t){var i=this.current708Packet.data[++e];return e=be(i)?this.handleText(e,t,{isExtended:!0}):e},m.prototype.getPts=function(e){return this.current708Packet.ptsVals[Math.floor(e/2)]},m.prototype.initService=function(t,e){var i,s="SERVICE"+t,r=this;return s in this.serviceEncodings&&(i=this.serviceEncodings[s]),this.services[t]=new Te(t,i,r),this.services[t].init(this.getPts(e),function(e){r.flushDisplayed(e,r.services[t])}),this.services[t]},m.prototype.handleText=function(e,t,i){var s,r=i&&i.isExtended,i=i&&i.isMultiByte,n=this.current708Packet.data,a=r?4096:0,o=n[e],n=n[e+1],l=t.currentWindow;return i?(s=[o,n],e++):s=[o],i=t.textDecoder_&&!r?t.textDecoder_.decode(new Uint8Array(s)):i?(n=s.map(e=>("0"+(255&e).toString(16)).slice(-2)).join(""),String.fromCharCode(parseInt(n,16))):(t=Be[r=a|o]||r,4096&r&&r===t?"":String.fromCharCode(t)),l.pendingNewLine&&!l.isEmpty()&&l.newLine(this.getPts(e)),l.pendingNewLine=!1,l.addText(i),e},m.prototype.multiByteCharacter=function(e,t){var i=this.current708Packet.data,s=i[e+1],i=i[e+2];return e=be(s)&&be(i)?this.handleText(++e,t,{isMultiByte:!0}):e},m.prototype.setCurrentWindow=function(e,t){var i=this.current708Packet.data[e];return t.setCurrentWindow(7&i),e},m.prototype.defineWindow=function(e,t){var i=this.current708Packet.data,s=i[e],t=(t.setCurrentWindow(7&s),t.currentWindow),s=i[++e];return t.visible=(32&s)>>5,t.rowLock=(16&s)>>4,t.columnLock=(8&s)>>3,t.priority=7&s,s=i[++e],t.relativePositioning=(128&s)>>7,t.anchorVertical=127&s,s=i[++e],t.anchorHorizontal=s,s=i[++e],t.anchorPoint=(240&s)>>4,t.rowCount=15&s,s=i[++e],t.columnCount=63&s,s=i[++e],t.windowStyle=(56&s)>>3,t.penStyle=7&s,t.virtualRowCount=t.rowCount+1,e},m.prototype.setWindowAttributes=function(e,t){var i=this.current708Packet.data,t=(i[e],t.currentWindow.winAttr),s=i[++e];return t.fillOpacity=(192&s)>>6,t.fillRed=(48&s)>>4,t.fillGreen=(12&s)>>2,t.fillBlue=3&s,s=i[++e],t.borderType=(192&s)>>6,t.borderRed=(48&s)>>4,t.borderGreen=(12&s)>>2,t.borderBlue=3&s,s=i[++e],t.borderType+=(128&s)>>5,t.wordWrap=(64&s)>>6,t.printDirection=(48&s)>>4,t.scrollDirection=(12&s)>>2,t.justify=3&s,s=i[++e],t.effectSpeed=(240&s)>>4,t.effectDirection=(12&s)>>2,t.displayEffect=3&s,e},m.prototype.flushDisplayed=function(e,t){for(var i=[],s=0;s<8;s++)t.windows[s].visible&&!t.windows[s].isEmpty()&&i.push(t.windows[s].getText());t.endPts=e,t.text=i.join("\n\n"),this.pushCaption(t),t.startPts=e},m.prototype.pushCaption=function(e){""!==e.text&&(this.trigger("data",{startPts:e.startPts,endPts:e.endPts,text:e.text,stream:"cc708_"+e.serviceNum}),e.text="",e.startPts=e.endPts)},m.prototype.displayWindows=function(e,t){var i=this.current708Packet.data[++e],s=this.getPts(e);this.flushDisplayed(s,t);for(var r=0;r<8;r++)i&1<<r&&(t.windows[r].visible=1);return e},m.prototype.hideWindows=function(e,t){var i=this.current708Packet.data[++e],s=this.getPts(e);this.flushDisplayed(s,t);for(var r=0;r<8;r++)i&1<<r&&(t.windows[r].visible=0);return e},m.prototype.toggleWindows=function(e,t){var i=this.current708Packet.data[++e],s=this.getPts(e);this.flushDisplayed(s,t);for(var r=0;r<8;r++)i&1<<r&&(t.windows[r].visible^=1);return e},m.prototype.clearWindows=function(e,t){var i=this.current708Packet.data[++e],s=this.getPts(e);this.flushDisplayed(s,t);for(var r=0;r<8;r++)i&1<<r&&t.windows[r].clearText();return e},m.prototype.deleteWindows=function(e,t){var i=this.current708Packet.data[++e],s=this.getPts(e);this.flushDisplayed(s,t);for(var r=0;r<8;r++)i&1<<r&&t.windows[r].reset();return e},m.prototype.setPenAttributes=function(e,t){var i=this.current708Packet.data,t=(i[e],t.currentWindow.penAttr),s=i[++e];return t.textTag=(240&s)>>4,t.offset=(12&s)>>2,t.penSize=3&s,s=i[++e],t.italics=(128&s)>>7,t.underline=(64&s)>>6,t.edgeType=(56&s)>>3,t.fontStyle=7&s,e},m.prototype.setPenColor=function(e,t){var i=this.current708Packet.data,t=(i[e],t.currentWindow.penColor),s=i[++e];return t.fgOpacity=(192&s)>>6,t.fgRed=(48&s)>>4,t.fgGreen=(12&s)>>2,t.fgBlue=3&s,s=i[++e],t.bgOpacity=(192&s)>>6,t.bgRed=(48&s)>>4,t.bgGreen=(12&s)>>2,t.bgBlue=3&s,s=i[++e],t.edgeRed=(48&s)>>4,t.edgeGreen=(12&s)>>2,t.edgeBlue=3&s,e},m.prototype.setPenLocation=function(e,t){var i=this.current708Packet.data,s=(i[e],t.currentWindow.penLoc);return t.currentWindow.pendingNewLine=!0,t=i[++e],s.row=15&t,t=i[++e],s.column=63&t,e},m.prototype.reset=function(e,t){var i=this.getPts(e);return this.flushDisplayed(i,t),this.initService(t.serviceNum,e)},{42:225,92:233,94:237,95:243,96:250,123:231,124:247,125:209,126:241,127:9608,304:174,305:176,306:189,307:191,308:8482,309:162,310:163,311:9834,312:224,313:160,314:232,315:226,316:234,317:238,318:244,319:251,544:193,545:201,546:211,547:218,548:220,549:252,550:8216,551:161,552:42,553:39,554:8212,555:169,556:8480,557:8226,558:8220,559:8221,560:192,561:194,562:199,563:200,564:202,565:203,566:235,567:206,568:207,569:239,570:212,571:217,572:249,573:219,574:171,575:187,800:195,801:227,802:205,803:204,804:236,805:210,806:242,807:213,808:245,809:123,810:125,811:92,812:94,813:95,814:124,815:126,816:196,817:228,818:214,819:246,820:223,821:165,822:164,823:9474,824:197,825:229,826:216,827:248,828:9484,829:9488,830:9492,831:9496}),qe=14,je=[4352,4384,4608,4640,5376,5408,5632,5664,5888,5920,4096,4864,4896,5120,5152],g=function(e,t){g.prototype.init.call(this),this.field_=e||0,this.dataChannel_=t||0,this.name_="CC"+(1+(this.field_<<1|this.dataChannel_)),this.setConstants(),this.reset(),this.push=function(e){var t,i,s,r,n=32639&e.ccData;n===this.lastControlCode_?this.lastControlCode_=null:(4096==(61440&n)?this.lastControlCode_=n:n!==this.PADDING_&&(this.lastControlCode_=null),t=n>>>8,i=255&n,n!==this.PADDING_&&(n===this.RESUME_CAPTION_LOADING_?this.mode_="popOn":n===this.END_OF_CAPTION_?(this.mode_="popOn",this.clearFormatting(e.pts),this.flushDisplayed(e.pts),r=this.displayed_,this.displayed_=this.nonDisplayed_,this.nonDisplayed_=r,this.startPts_=e.pts):n===this.ROLL_UP_2_ROWS_?(this.rollUpRows_=2,this.setRollUp(e.pts)):n===this.ROLL_UP_3_ROWS_?(this.rollUpRows_=3,this.setRollUp(e.pts)):n===this.ROLL_UP_4_ROWS_?(this.rollUpRows_=4,this.setRollUp(e.pts)):n===this.CARRIAGE_RETURN_?(this.clearFormatting(e.pts),this.flushDisplayed(e.pts),this.shiftRowsUp_(),this.startPts_=e.pts):n===this.BACKSPACE_?"popOn"===this.mode_?this.nonDisplayed_[this.row_].text=this.nonDisplayed_[this.row_].text.slice(0,-1):this.displayed_[this.row_].text=this.displayed_[this.row_].text.slice(0,-1):n===this.ERASE_DISPLAYED_MEMORY_?(this.flushDisplayed(e.pts),this.displayed_=h()):n===this.ERASE_NON_DISPLAYED_MEMORY_?this.nonDisplayed_=h():n===this.RESUME_DIRECT_CAPTIONING_?("paintOn"!==this.mode_&&(this.flushDisplayed(e.pts),this.displayed_=h()),this.mode_="paintOn",this.startPts_=e.pts):this.isSpecialCharacter(t,i)?(s=Se((t=(3&t)<<8)|i),this[this.mode_](e.pts,s),this.column_++):this.isExtCharacter(t,i)?("popOn"===this.mode_?this.nonDisplayed_[this.row_].text=this.nonDisplayed_[this.row_].text.slice(0,-1):this.displayed_[this.row_].text=this.displayed_[this.row_].text.slice(0,-1),s=Se((t=(3&t)<<8)|i),this[this.mode_](e.pts,s),this.column_++):this.isMidRowCode(t,i)?(this.clearFormatting(e.pts),this[this.mode_](e.pts," "),this.column_++,14==(14&i)&&this.addFormatting(e.pts,["i"]),1==(1&i)&&this.addFormatting(e.pts,["u"])):this.isOffsetControlCode(t,i)?(this.nonDisplayed_[this.row_].offset=r=3&i,this.column_+=r):this.isPAC(t,i)?(r=je.indexOf(7968&n),"rollUp"===this.mode_&&(r-this.rollUpRows_+1<0&&(r=this.rollUpRows_-1),this.setRollUp(e.pts,r)),r!==this.row_&&0<=r&&r<=14&&(this.clearFormatting(e.pts),this.row_=r),1&i&&-1===this.formatting_.indexOf("u")&&this.addFormatting(e.pts,["u"]),16==(16&n)&&(this.column_=4*(r=(14&n)>>1),this.nonDisplayed_[this.row_].indent+=r),this.isColorPAC(i)&&14==(14&i)&&this.addFormatting(e.pts,["i"])):this.isNormalChar(t)&&(0===i&&(i=null),s=Se(t),s+=Se(i),this[this.mode_](e.pts,s),this.column_+=s.length)))}},p=(g.prototype=new p,g.prototype.flushDisplayed=function(e){const i=e=>{this.trigger("log",{level:"warn",message:"Skipping a malformed 608 caption at index "+e+"."})},s=[];this.displayed_.forEach((e,t)=>{if(e&&e.text&&e.text.length){try{e.text=e.text.trim()}catch(e){i(t)}e.text.length&&s.push({text:e.text,line:t+1,position:10+Math.min(70,10*e.indent)+2.5*e.offset})}else null==e&&i(t)}),s.length&&this.trigger("data",{startPts:this.startPts_,endPts:e,content:s,stream:this.name_})},g.prototype.reset=function(){this.mode_="popOn",this.topRow_=0,this.startPts_=0,this.displayed_=h(),this.nonDisplayed_=h(),this.lastControlCode_=null,this.column_=0,this.row_=qe,this.rollUpRows_=2,this.formatting_=[]},g.prototype.setConstants=function(){0===this.dataChannel_?(this.BASE_=16,this.EXT_=17,this.CONTROL_=(20|this.field_)<<8,this.OFFSET_=23):1===this.dataChannel_&&(this.BASE_=24,this.EXT_=25,this.CONTROL_=(28|this.field_)<<8,this.OFFSET_=31),this.PADDING_=0,this.RESUME_CAPTION_LOADING_=32|this.CONTROL_,this.END_OF_CAPTION_=47|this.CONTROL_,this.ROLL_UP_2_ROWS_=37|this.CONTROL_,this.ROLL_UP_3_ROWS_=38|this.CONTROL_,this.ROLL_UP_4_ROWS_=39|this.CONTROL_,this.CARRIAGE_RETURN_=45|this.CONTROL_,this.RESUME_DIRECT_CAPTIONING_=41|this.CONTROL_,this.BACKSPACE_=33|this.CONTROL_,this.ERASE_DISPLAYED_MEMORY_=44|this.CONTROL_,this.ERASE_NON_DISPLAYED_MEMORY_=46|this.CONTROL_},g.prototype.isSpecialCharacter=function(e,t){return e===this.EXT_&&48<=t&&t<=63},g.prototype.isExtCharacter=function(e,t){return(e===this.EXT_+1||e===this.EXT_+2)&&32<=t&&t<=63},g.prototype.isMidRowCode=function(e,t){return e===this.EXT_&&32<=t&&t<=47},g.prototype.isOffsetControlCode=function(e,t){return e===this.OFFSET_&&33<=t&&t<=35},g.prototype.isPAC=function(e,t){return e>=this.BASE_&&e<this.BASE_+8&&64<=t&&t<=127},g.prototype.isColorPAC=function(e){return 64<=e&&e<=79||96<=e&&e<=127},g.prototype.isNormalChar=function(e){return 32<=e&&e<=127},g.prototype.setRollUp=function(e,t){if("rollUp"!==this.mode_&&(this.row_=qe,this.mode_="rollUp",this.flushDisplayed(e),this.nonDisplayed_=h(),this.displayed_=h()),void 0!==t&&t!==this.row_)for(var i=0;i<this.rollUpRows_;i++)this.displayed_[t-i]=this.displayed_[this.row_-i],this.displayed_[this.row_-i]={text:"",indent:0,offset:0};void 0===t&&(t=this.row_),this.topRow_=t-this.rollUpRows_+1},g.prototype.addFormatting=function(e,t){this.formatting_=this.formatting_.concat(t);t=t.reduce(function(e,t){return e+"<"+t+">"},"");this[this.mode_](e,t)},g.prototype.clearFormatting=function(e){var t;this.formatting_.length&&(t=this.formatting_.reverse().reduce(function(e,t){return e+"</"+t+">"},""),this.formatting_=[],this[this.mode_](e,t))},g.prototype.popOn=function(e,t){var i=this.nonDisplayed_[this.row_].text;this.nonDisplayed_[this.row_].text=i+=t},g.prototype.rollUp=function(e,t){var i=this.displayed_[this.row_].text;this.displayed_[this.row_].text=i+=t},g.prototype.shiftRowsUp_=function(){for(var e=0;e<this.topRow_;e++)this.displayed_[e]={text:"",indent:0,offset:0};for(e=this.row_+1;e<qe+1;e++)this.displayed_[e]={text:"",indent:0,offset:0};for(e=this.topRow_;e<this.row_;e++)this.displayed_[e]=this.displayed_[e+1];this.displayed_[this.row_]={text:"",indent:0,offset:0}},g.prototype.paintOn=function(e,t){var i=this.displayed_[this.row_].text;this.displayed_[this.row_].text=i+=t},{CaptionStream:a,Cea608Stream:g,Cea708Stream:m}),He={H264_STREAM_TYPE:27,ADTS_STREAM_TYPE:15,METADATA_STREAM_TYPE:21},Ve=i,$e=8589934592,ze=4294967296;Ee.prototype=new Ve;function We(e,t,i){for(var s="",r=t;r<i;r++)s+="%"+("00"+e[r].toString(16)).slice(-2);return s}function f(e,t,i){return decodeURIComponent(We(e,t,i))}function y(e,t,i){return unescape(We(e,t,i))}function _(e){return e[0]<<21|e[1]<<14|e[2]<<7|e[3]}var Ge,Xe,Ke,Ve=Ee,Ye=we,Qe=(e,t,i)=>{if(e)for(var s=i;s<e.length;s++)if(e[s]===t)return s;return-1},Je=3,v={APIC:function(e){var t,i=1;e.data[0]!==Je||(t=Qe(e.data,0,1))<0||(e.mimeType=y(e.data,1,t),e.pictureType=e.data[i=t+1],(t=Qe(e.data,0,++i))<0)||(e.description=f(e.data,i,t),i=t+1,"--\x3e"===e.mimeType?e.url=y(e.data,i,e.data.length):e.pictureData=e.data.subarray(i,e.data.length))},"T*":function(e){e.data[0]===Je&&(e.value=f(e.data,1,e.data.length).replace(/\0*$/,""),e.values=e.value.split("\0"))},TXXX:function(e){var t;e.data[0]===Je&&-1!==(t=Qe(e.data,0,1))&&(e.description=f(e.data,1,t),e.value=f(e.data,t+1,e.data.length).replace(/\0*$/,""),e.data=e.value)},"W*":function(e){e.url=y(e.data,0,e.data.length).replace(/\0.*$/,"")},WXXX:function(e){var t;e.data[0]===Je&&-1!==(t=Qe(e.data,0,1))&&(e.description=f(e.data,1,t),e.url=y(e.data,t+1,e.data.length).replace(/\0.*$/,""))},PRIV:function(e){for(var t=0;t<e.data.length;t++)if(0===e.data[t]){e.owner=y(e.data,0,t);break}e.privateData=e.data.subarray(t+1),e.data=e.privateData}},Ze={parseId3Frames:function(e){var t,i=10,s=0,r=[];if(!(e.length<10||e[0]!=="I".charCodeAt(0)||e[1]!=="D".charCodeAt(0)||e[2]!=="3".charCodeAt(0))){s=_(e.subarray(6,10));s+=10,64&e[5]&&(i=(i+=4)+_(e.subarray(10,14)),s-=_(e.subarray(16,20)));do{if((t=_(e.subarray(i+4,i+8)))<1)break;var n={id:String.fromCharCode(e[i],e[i+1],e[i+2],e[i+3]),data:e.subarray(i+10,i+t+10)}}while(n.key=n.id,v[n.id]?v[n.id](n):"T"===n.id[0]?v["T*"](n):"W"===n.id[0]&&v["W*"](n),r.push(n),(i=i+10+t)<s);return r}},parseSyncSafeInteger:_,frameParsers:v},b=i,et=He,T=Ze,tt=function(e){var t,i={descriptor:e&&e.descriptor},l=0,d=[],h=0;if(tt.prototype.init.call(this),this.dispatchType=et.METADATA_STREAM_TYPE.toString(16),i.descriptor)for(t=0;t<i.descriptor.length;t++)this.dispatchType+=("00"+i.descriptor[t].toString(16)).slice(-2);this.push=function(e){var t,i,s,r,n,a,o;if("timed-metadata"===e.type)if(e.dataAlignmentIndicator&&(h=0,d.length=0),0===d.length&&(e.data.length<10||e.data[0]!=="I".charCodeAt(0)||e.data[1]!=="D".charCodeAt(0)||e.data[2]!=="3".charCodeAt(0)))this.trigger("log",{level:"warn",message:"Skipping unrecognized metadata packet"});else if(d.push(e),h+=e.data.byteLength,1===d.length&&(l=T.parseSyncSafeInteger(e.data.subarray(6,10)),l+=10),!(h<l)){for(t={data:new Uint8Array(l),frames:[],pts:d[0].pts,dts:d[0].dts},r=0;r<l;)t.data.set(d[0].data.subarray(0,l-r),r),r+=d[0].data.byteLength,h-=d[0].data.byteLength,d.shift();i=10,64&t.data[5]&&(i=(i+=4)+T.parseSyncSafeInteger(t.data.subarray(10,14)),l-=T.parseSyncSafeInteger(t.data.subarray(16,20)));do{if((s=T.parseSyncSafeInteger(t.data.subarray(i+4,i+8)))<1){this.trigger("log",{level:"warn",message:"Malformed ID3 frame encountered. Skipping remaining metadata parsing."});break}}while((o={id:String.fromCharCode(t.data[i],t.data[i+1],t.data[i+2],t.data[i+3]),data:t.data.subarray(i+10,i+s+10)}).key=o.id,T.frameParsers[o.id]?T.frameParsers[o.id](o):"T"===o.id[0]?T.frameParsers["T*"](o):"W"===o.id[0]&&T.frameParsers["W*"](o),"com.apple.streaming.transportStreamTimestamp"===o.owner&&(a=(1&(n=o.data)[3])<<30|n[4]<<22|n[5]<<14|n[6]<<6|n[7]>>>2,a=(a*=4)+(3&n[7]),o.timeStamp=a,void 0===t.pts&&void 0===t.dts&&(t.pts=o.timeStamp,t.dts=o.timeStamp),this.trigger("timestamp",o)),t.frames.push(o),(i=i+10+s)<l);this.trigger("data",t)}}},b=(tt.prototype=new b,tt),S=i,it=p,w=He,st=function(){var r=new Uint8Array(188),n=0;st.prototype.init.call(this),this.push=function(e){var t,i=0,s=188;for(n?((t=new Uint8Array(e.byteLength+n)).set(r.subarray(0,n)),t.set(e,n),n=0):t=e;s<t.byteLength;)71===t[i]&&71===t[s]?(this.trigger("data",t.subarray(i,s)),i+=188,s+=188):(i++,s++);i<t.byteLength&&(r.set(t.subarray(i),0),n=t.byteLength-i)},this.flush=function(){188===n&&71===r[0]&&(this.trigger("data",r),n=0),this.trigger("done")},this.endTimeline=function(){this.flush(),this.trigger("endedtimeline")},this.reset=function(){n=0,this.trigger("reset")}},rt=(st.prototype=new S,(Ge=function(){var s,r,n,a;Ge.prototype.init.call(this),(a=this).packetsWaitingForPmt=[],this.programMapTable=void 0,s=function(e,t){var i=0;t.payloadUnitStartIndicator&&(i+=e[i]+1),("pat"===t.type?r:n)(e.subarray(i),t)},r=function(e,t){t.section_number=e[7],t.last_section_number=e[8],a.pmtPid=(31&e[10])<<8|e[11],t.pmtPid=a.pmtPid},n=function(e,t){var i,s;if(1&e[5]){for(a.programMapTable={video:null,audio:null,"timed-metadata":{}},i=3+((15&e[1])<<8|e[2])-4,s=12+((15&e[10])<<8|e[11]);s<i;){var r=e[s],n=(31&e[s+1])<<8|e[s+2];r===w.H264_STREAM_TYPE&&null===a.programMapTable.video?a.programMapTable.video=n:r===w.ADTS_STREAM_TYPE&&null===a.programMapTable.audio?a.programMapTable.audio=n:r===w.METADATA_STREAM_TYPE&&(a.programMapTable["timed-metadata"][n]=r),s+=5+((15&e[s+3])<<8|e[s+4])}t.programMapTable=a.programMapTable}},this.push=function(e){var t={},i=4;if(t.payloadUnitStartIndicator=!!(64&e[1]),t.pid=31&e[1],t.pid<<=8,t.pid|=e[2],1<(48&e[3])>>>4&&(i+=e[i]+1),0===t.pid)t.type="pat",s(e.subarray(i),t),this.trigger("data",t);else if(t.pid===this.pmtPid)for(t.type="pmt",s(e.subarray(i),t),this.trigger("data",t);this.packetsWaitingForPmt.length;)this.processPes_.apply(this,this.packetsWaitingForPmt.shift());else void 0===this.programMapTable?this.packetsWaitingForPmt.push([e,i,t]):this.processPes_(e,i,t)},this.processPes_=function(e,t,i){i.pid===this.programMapTable.video?i.streamType=w.H264_STREAM_TYPE:i.pid===this.programMapTable.audio?i.streamType=w.ADTS_STREAM_TYPE:i.streamType=this.programMapTable["timed-metadata"][i.pid],i.type="pes",i.data=e.subarray(t),this.trigger("data",i)}}).prototype=new S,Ge.STREAM_TYPES={h264:27,adts:15},(Xe=function(){function s(e,t,i){var s,r=new Uint8Array(e.size),n={type:t},a=0,o=0;if(e.data.length&&!(e.size<9)){for(n.trackId=e.data[0].pid,a=0;a<e.data.length;a++)s=e.data[a],r.set(s.data,o),o+=s.data.byteLength;d(r,n),t="video"===t||n.packetLength<=e.size,(i||t)&&(e.size=0,e.data.length=0),t&&l.trigger("data",n)}}var t,l=this,r=!1,n={data:[],size:0},a={data:[],size:0},o={data:[],size:0},d=function(e,t){var i=e[0]<<16|e[1]<<8|e[2];t.data=new Uint8Array,1==i&&(t.packetLength=6+(e[4]<<8|e[5]),t.dataAlignmentIndicator=0!=(4&e[6]),192&(i=e[7])&&(t.pts=(14&e[9])<<27|(255&e[10])<<20|(254&e[11])<<12|(255&e[12])<<5|(254&e[13])>>>3,t.pts*=4,t.pts+=(6&e[13])>>>1,t.dts=t.pts,64&i)&&(t.dts=(14&e[14])<<27|(255&e[15])<<20|(254&e[16])<<12|(255&e[17])<<5|(254&e[18])>>>3,t.dts*=4,t.dts+=(6&e[18])>>>1),t.data=e.subarray(9+e[8]))};Xe.prototype.init.call(this),this.push=function(i){({pat:function(){},pes:function(){var e,t;switch(i.streamType){case w.H264_STREAM_TYPE:e=n,t="video";break;case w.ADTS_STREAM_TYPE:e=a,t="audio";break;case w.METADATA_STREAM_TYPE:e=o,t="timed-metadata";break;default:return}i.payloadUnitStartIndicator&&s(e,t,!0),e.data.push(i),e.size+=i.data.byteLength},pmt:function(){var e={type:"metadata",tracks:[]};null!==(t=i.programMapTable).video&&e.tracks.push({timelineStartInfo:{baseMediaDecodeTime:0},id:+t.video,codec:"avc",type:"video"}),null!==t.audio&&e.tracks.push({timelineStartInfo:{baseMediaDecodeTime:0},id:+t.audio,codec:"adts",type:"audio"}),r=!0,l.trigger("data",e)}})[i.type]()},this.reset=function(){n.size=0,n.data.length=0,a.size=0,a.data.length=0,this.trigger("reset")},this.flushStreams_=function(){s(n,"video"),s(a,"audio"),s(o,"timed-metadata")},this.flush=function(){var e;!r&&t&&(e={type:"metadata",tracks:[]},null!==t.video&&e.tracks.push({timelineStartInfo:{baseMediaDecodeTime:0},id:+t.video,codec:"avc",type:"video"}),null!==t.audio&&e.tracks.push({timelineStartInfo:{baseMediaDecodeTime:0},id:+t.audio,codec:"adts",type:"audio"}),l.trigger("data",e)),r=!1,this.flushStreams_(),this.trigger("done")}}).prototype=new S,{PAT_PID:0,MP2T_PACKET_LENGTH:188,TransportPacketStream:st,TransportParseStream:Ge,ElementaryStream:Xe,TimestampRolloverStream:Ve,CaptionStream:it.CaptionStream,Cea608Stream:it.Cea608Stream,Cea708Stream:it.Cea708Stream,MetadataStream:b});for(Ke in w)w.hasOwnProperty(Ke)&&(rt[Ke]=w[Ke]);var nt,at,S=rt,Ve=i,ot=c.ONE_SECOND_IN_TS,lt=[96e3,88200,64e3,48e3,44100,32e3,24e3,22050,16e3,12e3,11025,8e3,7350],dt=function(l){var d,h=0;dt.prototype.init.call(this),this.skipWarn_=function(e,t){this.trigger("log",{level:"warn",message:`adts skiping bytes ${e} to ${t} in frame ${h} outside syncword`})},this.push=function(e){var t,i,s,r,n,a,o=0;if(l||(h=0),"audio"===e.type){for(d&&d.length?(s=d,(d=new Uint8Array(s.byteLength+e.data.byteLength)).set(s),d.set(e.data,s.byteLength)):d=e.data;o+7<d.length;)if(255!==d[o]||240!=(246&d[o+1]))"number"!=typeof a&&(a=o),o++;else{if("number"==typeof a&&(this.skipWarn_(a,o),a=null),i=2*(1&~d[o+1]),t=(3&d[o+3])<<11|d[o+4]<<3|(224&d[o+5])>>5,n=(r=1024*(1+(3&d[o+6])))*ot/lt[(60&d[o+2])>>>2],d.byteLength-o<t)break;this.trigger("data",{pts:e.pts+h*n,dts:e.dts+h*n,sampleCount:r,audioobjecttype:1+(d[o+2]>>>6&3),channelcount:(1&d[o+2])<<2|(192&d[o+3])>>>6,samplerate:lt[(60&d[o+2])>>>2],samplingfrequencyindex:(60&d[o+2])>>>2,samplesize:16,data:d.subarray(o+7+i,o+t)}),h++,o+=t}"number"==typeof a&&(this.skipWarn_(a,o),a=null),d=d.subarray(o)}},this.flush=function(){h=0,this.trigger("done")},this.reset=function(){d=void 0,this.trigger("reset")},this.endTimeline=function(){d=void 0,this.trigger("endedtimeline")}},it=(dt.prototype=new Ve,dt),b=i,ht=function(s){var r=s.byteLength,n=0,a=0;this.length=function(){return 8*r},this.bitsAvailable=function(){return 8*r+a},this.loadWord=function(){var e=s.byteLength-r,t=new Uint8Array(4),i=Math.min(4,r);if(0===i)throw new Error("no bytes available");t.set(s.subarray(e,e+i)),n=new DataView(t.buffer).getUint32(0),a=8*i,r-=i},this.skipBits=function(e){var t;e<a||(e=(e-=a)-8*(t=Math.floor(e/8)),r-=t,this.loadWord()),n<<=e,a-=e},this.readBits=function(e){var t=Math.min(a,e),i=n>>>32-t;return 0<(a-=t)?n<<=t:0<r&&this.loadWord(),0<(t=e-t)?i<<t|this.readBits(t):i},this.skipLeadingZeros=function(){for(var e=0;e<a;++e)if(0!=(n&2147483648>>>e))return n<<=e,a-=e,e;return this.loadWord(),e+this.skipLeadingZeros()},this.skipUnsignedExpGolomb=function(){this.skipBits(1+this.skipLeadingZeros())},this.skipExpGolomb=function(){this.skipBits(1+this.skipLeadingZeros())},this.readUnsignedExpGolomb=function(){var e=this.skipLeadingZeros();return this.readBits(e+1)-1},this.readExpGolomb=function(){var e=this.readUnsignedExpGolomb();return 1&e?1+e>>>1:-1*(e>>>1)},this.readBoolean=function(){return 1===this.readBits(1)},this.readUnsignedByte=function(){return this.readBits(8)},this.loadWord()},ut=function(){var s,r,n=0;ut.prototype.init.call(this),this.push=function(e){for(var t,i=(r=r?((t=new Uint8Array(r.byteLength+e.data.byteLength)).set(r),t.set(e.data,r.byteLength),t):e.data).byteLength;n<i-3;n++)if(1===r[n+2]){s=n+5;break}for(;s<i;)switch(r[s]){case 0:if(0!==r[s-1])s+=2;else if(0!==r[s-2])s++;else{for(n+3!==s-2&&this.trigger("data",r.subarray(n+3,s-2));1!==r[++s]&&s<i;);n=s-2,s+=3}break;case 1:0!==r[s-1]||0!==r[s-2]?s+=3:(this.trigger("data",r.subarray(n+3,s-2)),n=s-2,s+=3);break;default:s+=3}r=r.subarray(n),s-=n,n=0},this.reset=function(){r=null,n=0,this.trigger("reset")},this.flush=function(){r&&3<r.byteLength&&this.trigger("data",r.subarray(n+3)),r=null,n=0,this.trigger("done")},this.endTimeline=function(){this.flush(),this.trigger("endedtimeline")}};ut.prototype=new b,at={100:!0,110:!0,122:!0,244:!0,44:!0,83:!0,86:!0,118:!0,128:!0,138:!0,139:!0,134:!0},(nt=function(){var i,s,r,n,a,o,g,t=new ut;nt.prototype.init.call(this),(i=this).push=function(e){"video"===e.type&&(s=e.trackId,r=e.pts,n=e.dts,t.push(e))},t.on("data",function(e){var t={trackId:s,pts:r,dts:n,data:e,nalUnitTypeCode:31&e[0]};switch(t.nalUnitTypeCode){case 5:t.nalUnitType="slice_layer_without_partitioning_rbsp_idr";break;case 6:t.nalUnitType="sei_rbsp",t.escapedRBSP=a(e.subarray(1));break;case 7:t.nalUnitType="seq_parameter_set_rbsp",t.escapedRBSP=a(e.subarray(1)),t.config=o(t.escapedRBSP);break;case 8:t.nalUnitType="pic_parameter_set_rbsp";break;case 9:t.nalUnitType="access_unit_delimiter_rbsp"}i.trigger("data",t)}),t.on("done",function(){i.trigger("done")}),t.on("partialdone",function(){i.trigger("partialdone")}),t.on("reset",function(){i.trigger("reset")}),t.on("endedtimeline",function(){i.trigger("endedtimeline")}),this.flush=function(){t.flush()},this.partialFlush=function(){t.partialFlush()},this.reset=function(){t.reset()},this.endTimeline=function(){t.endTimeline()},g=function(e,t){for(var i=8,s=8,r=0;r<e;r++)i=0===(s=0!==s?(i+t.readExpGolomb()+256)%256:s)?i:s},a=function(e){for(var t=e.byteLength,i=[],s=1;s<t-2;)0===e[s]&&0===e[s+1]&&3===e[s+2]?(i.push(s+2),s+=2):s++;if(0===i.length)return e;for(var r=t-i.length,n=new Uint8Array(r),a=0,s=0;s<r;a++,s++)a===i[0]&&(a++,i.shift()),n[s]=e[a];return n},o=function(e){var t,i,s,r,n,a,o=0,l=0,d=0,h=0,u=[1,1],c=new ht(e),e=c.readUnsignedByte(),p=c.readUnsignedByte(),m=c.readUnsignedByte();if(c.skipUnsignedExpGolomb(),at[e]&&(3===(i=c.readUnsignedExpGolomb())&&c.skipBits(1),c.skipUnsignedExpGolomb(),c.skipUnsignedExpGolomb(),c.skipBits(1),c.readBoolean()))for(n=3!==i?8:12,a=0;a<n;a++)c.readBoolean()&&g(a<6?16:64,c);if(c.skipUnsignedExpGolomb(),0===(i=c.readUnsignedExpGolomb()))c.readUnsignedExpGolomb();else if(1===i)for(c.skipBits(1),c.skipExpGolomb(),c.skipExpGolomb(),t=c.readUnsignedExpGolomb(),a=0;a<t;a++)c.skipExpGolomb();if(c.skipUnsignedExpGolomb(),c.skipBits(1),i=c.readUnsignedExpGolomb(),s=c.readUnsignedExpGolomb(),0===(r=c.readBits(1))&&c.skipBits(1),c.skipBits(1),c.readBoolean()&&(o=c.readUnsignedExpGolomb(),l=c.readUnsignedExpGolomb(),d=c.readUnsignedExpGolomb(),h=c.readUnsignedExpGolomb()),c.readBoolean()&&c.readBoolean()){switch(c.readUnsignedByte()){case 1:u=[1,1];break;case 2:u=[12,11];break;case 3:u=[10,11];break;case 4:u=[16,11];break;case 5:u=[40,33];break;case 6:u=[24,11];break;case 7:u=[20,11];break;case 8:u=[32,11];break;case 9:u=[80,33];break;case 10:u=[18,11];break;case 11:u=[15,11];break;case 12:u=[64,33];break;case 13:u=[160,99];break;case 14:u=[4,3];break;case 15:u=[3,2];break;case 16:u=[2,1];break;case 255:u=[c.readUnsignedByte()<<8|c.readUnsignedByte(),c.readUnsignedByte()<<8|c.readUnsignedByte()]}u&&(u[0],u[1])}return{profileIdc:e,levelIdc:m,profileCompatibility:p,width:16*(i+1)-2*o-2*l,height:(2-r)*(s+1)*16-2*d-2*h,sarRatio:u}}}).prototype=new b;function ct(e){return e[0]<<21|e[1]<<14|e[2]<<7|e[3]}var Ve=nt,pt=[96e3,88200,64e3,48e3,44100,32e3,24e3,22050,16e3,12e3,11025,8e3,7350],mt=function(e,t){var i=0<=(i=e[t+6]<<21|e[t+7]<<14|e[t+8]<<7|e[t+9])?i:0;return(16&e[t+5])>>4?20+i:10+i},gt=function(e,t){return e.length-t<10||e[t]!=="I".charCodeAt(0)||e[t+1]!=="D".charCodeAt(0)||e[t+2]!=="3".charCodeAt(0)?t:(t+=mt(e,t),gt(e,t))},ft=function(e,t,i){for(var s="",r=t;r<i;r++)s+="%"+("00"+e[r].toString(16)).slice(-2);return s},b={isLikelyAacData:function(e){var t=gt(e,0);return e.length>=t+2&&255==(255&e[t])&&240==(240&e[t+1])&&16==(22&e[t+1])},parseId3TagSize:mt,parseAdtsSize:function(e,t){var i=(224&e[t+5])>>5,s=e[t+4]<<3;return 6144&e[t+3]|s|i},parseType:function(e,t){return e[t]==="I".charCodeAt(0)&&e[t+1]==="D".charCodeAt(0)&&e[t+2]==="3".charCodeAt(0)?"timed-metadata":!0&e[t]&&240==(240&e[t+1])?"audio":null},parseSampleRate:function(e){for(var t=0;t+5<e.length;){if(255===e[t]&&240==(246&e[t+1]))return pt[(60&e[t+2])>>>2];t++}return null},parseAacTimestamp:function(e){var t,i=10;64&e[5]&&(i=(i+=4)+ct(e.subarray(10,14)));do{if((t=ct(e.subarray(i+4,i+8)))<1)return null;if("PRIV"===String.fromCharCode(e[i],e[i+1],e[i+2],e[i+3]))for(var s,r,n=e.subarray(i+10,i+t+10),a=0;a<n.byteLength;a++)if(0===n[a]){if("com.apple.streaming.transportStreamTimestamp"===unescape(ft(n,0,a)))return r=(1&(s=n.subarray(a+1))[3])<<30|s[4]<<22|s[5]<<14|s[6]<<6|s[7]>>>2,(r*=4)+(3&s[7]);break}}while((i=i+10+t)<e.byteLength);return null}},E=i,yt=b,_t=function(){var n=new Uint8Array,a=0;_t.prototype.init.call(this),this.setTimestamp=function(e){a=e},this.push=function(e){var t,i,s=0,r=0;for(n.length?(i=n.length,(n=new Uint8Array(e.byteLength+i)).set(n.subarray(0,i)),n.set(e,i)):n=e;3<=n.length-r;)if(n[r]==="I".charCodeAt(0)&&n[r+1]==="D".charCodeAt(0)&&n[r+2]==="3".charCodeAt(0)){if(n.length-r<10)break;if(r+(s=yt.parseId3TagSize(n,r))>n.length)break;t={type:"timed-metadata",data:n.subarray(r,r+s)},this.trigger("data",t),r+=s}else if(255==(255&n[r])&&240==(240&n[r+1])){if(n.length-r<7)break;if(r+(s=yt.parseAdtsSize(n,r))>n.length)break;t={type:"audio",data:n.subarray(r,r+s),pts:a,dts:a},this.trigger("data",t),r+=s}else r++;i=n.length-r,n=0<i?n.subarray(r):new Uint8Array},this.reset=function(){n=new Uint8Array,this.trigger("reset")},this.endTimeline=function(){n=new Uint8Array,this.trigger("endedtimeline")}};_t.prototype=new E;function vt(e,t){for(var i=Object.keys(t),s=0;s<i.length;s++){var r=i[s];"headOfPipeline"!==r&&t[r].on&&t[r].on("log",Ot.bind(e,r))}}function bt(e,t){var i;if(e.length===t.length){for(i=0;i<e.length;i++)if(e[i]!==t[i])return;return 1}}function Tt(e,t,i,s,r,n){return{start:{dts:e,pts:e+(i-t)},end:{dts:e+(s-t),pts:e+(r-i)},prependedContentDuration:n,baseMediaDecodeTime:e}}var St,wt,C,E=i,k=ke,x=Ie,Et=De,I=Pe,A=S,Ct=c,kt=it,xt=Ve,It=_t,At=b.isLikelyAacData,Dt=c.ONE_SECOND_IN_TS,Pt=["audioobjecttype","channelcount","samplerate","samplingfrequencyindex","samplesize"],Lt=["width","height","profileIdc","levelIdc","profileCompatibility","sarRatio"],Ot=function(e,t){t.stream=e,this.trigger("log",t)},Rt=function(n,a){var o=[],l=0,d=0,h=1/0,u=(a=a||{}).firstSequenceNumber||0;Rt.prototype.init.call(this),this.push=function(t){I.collectDtsInfo(n,t),n&&Pt.forEach(function(e){n[e]=t[e]}),o.push(t)},this.setEarliestDts=function(e){l=e},this.setVideoBaseMediaDecodeTime=function(e){h=e},this.setAudioAppendStart=function(e){d=e},this.flush=function(){var e,t,i,s,r;0!==o.length&&(e=Et.trimAdtsFramesByEarliestDts(o,n,l),n.baseMediaDecodeTime=I.calculateTrackBaseMediaDecodeTime(n,a.keepOriginalTimestamps),r=Et.prefixWithSilence(n,e,d,h),n.samples=Et.generateSampleTable(e),i=k.mdat(Et.concatenateFrameData(e)),o=[],s=k.moof(u,[n]),t=new Uint8Array(s.byteLength+i.byteLength),u++,t.set(s),t.set(i,s.byteLength),I.clearDtsInfo(n),i=Math.ceil(1024*Dt/n.samplerate),e.length&&(s=e.length*i,this.trigger("segmentTimingInfo",Tt(Ct.audioTsToVideoTs(n.baseMediaDecodeTime,n.samplerate),e[0].dts,e[0].pts,e[0].dts+s,e[0].pts+s,r||0)),this.trigger("timingInfo",{start:e[0].pts,end:e[0].pts+s})),this.trigger("data",{track:n,boxes:t})),this.trigger("done","AudioSegmentStream")},this.reset=function(){I.clearDtsInfo(n),o=[],this.trigger("reset")}};Rt.prototype=new E,(St=function(a,n){var t,i,o=[],d=[],l=(n=n||{}).firstSequenceNumber||0;St.prototype.init.call(this),delete a.minPTS,this.gopCache_=[],this.push=function(e){I.collectDtsInfo(a,e),"seq_parameter_set_rbsp"!==e.nalUnitType||t||(t=e.config,a.sps=[e.data],Lt.forEach(function(e){a[e]=t[e]},this)),"pic_parameter_set_rbsp"!==e.nalUnitType||i||(i=e.data,a.pps=[e.data]),o.push(e)},this.flush=function(){for(var e,t,i,s=0;o.length&&"access_unit_delimiter_rbsp"!==o[0].nalUnitType;)o.shift();if(0!==o.length){if(e=x.groupNalsIntoFrames(o),(e=x.groupFramesIntoGops(e))[0][0].keyFrame||((r=this.getGopForFusion_(o[0],a))?(s=r.duration,e.unshift(r),e.byteLength+=r.byteLength,e.nalCount+=r.nalCount,e.pts=r.pts,e.dts=r.dts,e.duration+=r.duration):e=x.extendFirstKeyFrame(e)),d.length){var r=n.alignGopsAtEnd?this.alignGopsAtEnd_(e):this.alignGopsAtStart_(e);if(!r)return this.gopCache_.unshift({gop:e.pop(),pps:a.pps,sps:a.sps}),this.gopCache_.length=Math.min(6,this.gopCache_.length),o=[],this.resetStream_(),void this.trigger("done","VideoSegmentStream");I.clearDtsInfo(a),e=r}I.collectDtsInfo(a,e),a.samples=x.generateSampleTable(e),r=k.mdat(x.concatenateNalData(e)),a.baseMediaDecodeTime=I.calculateTrackBaseMediaDecodeTime(a,n.keepOriginalTimestamps),this.trigger("processedGopsInfo",e.map(function(e){return{pts:e.pts,dts:e.dts,byteLength:e.byteLength}})),t=e[0],i=e[e.length-1],this.trigger("segmentTimingInfo",Tt(a.baseMediaDecodeTime,t.dts,t.pts,i.dts+i.duration,i.pts+i.duration,s)),this.trigger("timingInfo",{start:e[0].pts,end:e[e.length-1].pts+e[e.length-1].duration}),this.gopCache_.unshift({gop:e.pop(),pps:a.pps,sps:a.sps}),this.gopCache_.length=Math.min(6,this.gopCache_.length),o=[],this.trigger("baseMediaDecodeTime",a.baseMediaDecodeTime),this.trigger("timelineStartInfo",a.timelineStartInfo),t=k.moof(l,[a]),i=new Uint8Array(t.byteLength+r.byteLength),l++,i.set(t),i.set(r,t.byteLength),this.trigger("data",{track:a,boxes:i})}this.resetStream_(),this.trigger("done","VideoSegmentStream")},this.reset=function(){this.resetStream_(),o=[],this.gopCache_.length=0,d.length=0,this.trigger("reset")},this.resetStream_=function(){I.clearDtsInfo(a),i=t=void 0},this.getGopForFusion_=function(e){for(var t,i,s,r=1/0,n=0;n<this.gopCache_.length;n++)i=(s=this.gopCache_[n]).gop,a.pps&&bt(a.pps[0],s.pps[0])&&a.sps&&bt(a.sps[0],s.sps[0])&&(i.dts<a.timelineStartInfo.dts||-1e4<=(i=e.dts-i.dts-i.duration)&&i<=45e3&&(!t||i<r)&&(t=s,r=i));return t?t.gop:null},this.alignGopsAtStart_=function(e){for(var t,i,s,r,n=e.byteLength,a=e.nalCount,o=e.duration,l=t=0;l<d.length&&t<e.length&&(i=d[l],s=e[t],i.pts!==s.pts);)s.pts>i.pts?l++:(t++,n-=s.byteLength,a-=s.nalCount,o-=s.duration);return 0===t?e:t===e.length?null:((r=e.slice(t)).byteLength=n,r.duration=o,r.nalCount=a,r.pts=r[0].pts,r.dts=r[0].dts,r)},this.alignGopsAtEnd_=function(e){for(var t,i,s,r,n=d.length-1,a=e.length-1,o=null,l=!1;0<=n&&0<=a;){if(t=d[n],i=e[a],t.pts===i.pts){l=!0;break}t.pts>i.pts?n--:(n===d.length-1&&(o=a),a--)}return l||null!==o?0===(s=l?a:o)?e:(r=(s=e.slice(s)).reduce(function(e,t){return e.byteLength+=t.byteLength,e.duration+=t.duration,e.nalCount+=t.nalCount,e},{byteLength:0,duration:0,nalCount:0}),s.byteLength=r.byteLength,s.duration=r.duration,s.nalCount=r.nalCount,s.pts=s[0].pts,s.dts=s[0].dts,s):null},this.alignGopsWith=function(e){d=e}}).prototype=new E,((C=function(e,t){this.numberOfTracks=0,this.metadataStream=t,"undefined"!=typeof(e=e||{}).remux?this.remuxTracks=!!e.remux:this.remuxTracks=!0,"boolean"==typeof e.keepOriginalTimestamps?this.keepOriginalTimestamps=e.keepOriginalTimestamps:this.keepOriginalTimestamps=!1,this.pendingTracks=[],this.videoTrack=null,this.pendingBoxes=[],this.pendingCaptions=[],this.pendingMetadata=[],this.pendingBytes=0,this.emittedTracks=0,C.prototype.init.call(this),this.push=function(e){return e.content||e.text?this.pendingCaptions.push(e):e.frames?this.pendingMetadata.push(e):(this.pendingTracks.push(e.track),this.pendingBytes+=e.boxes.byteLength,"video"===e.track.type&&(this.videoTrack=e.track,this.pendingBoxes.push(e.boxes)),void("audio"===e.track.type&&(this.audioTrack=e.track,this.pendingBoxes.unshift(e.boxes))))}}).prototype=new E).flush=function(e){var t,i,s,r=0,n={captions:[],captionStreams:{},metadata:[],info:{}},a=0;if(this.pendingTracks.length<this.numberOfTracks){if("VideoSegmentStream"!==e&&"AudioSegmentStream"!==e)return;if(this.remuxTracks)return;if(0===this.pendingTracks.length)return this.emittedTracks++,void(this.emittedTracks>=this.numberOfTracks&&(this.trigger("done"),this.emittedTracks=0))}if(this.videoTrack?(a=this.videoTrack.timelineStartInfo.pts,Lt.forEach(function(e){n.info[e]=this.videoTrack[e]},this)):this.audioTrack&&(a=this.audioTrack.timelineStartInfo.pts,Pt.forEach(function(e){n.info[e]=this.audioTrack[e]},this)),this.videoTrack||this.audioTrack){for(1===this.pendingTracks.length?n.type=this.pendingTracks[0].type:n.type="combined",this.emittedTracks+=this.pendingTracks.length,e=k.initSegment(this.pendingTracks),n.initSegment=new Uint8Array(e.byteLength),n.initSegment.set(e),n.data=new Uint8Array(this.pendingBytes),s=0;s<this.pendingBoxes.length;s++)n.data.set(this.pendingBoxes[s],r),r+=this.pendingBoxes[s].byteLength;for(s=0;s<this.pendingCaptions.length;s++)(t=this.pendingCaptions[s]).startTime=Ct.metadataTsToSeconds(t.startPts,a,this.keepOriginalTimestamps),t.endTime=Ct.metadataTsToSeconds(t.endPts,a,this.keepOriginalTimestamps),n.captionStreams[t.stream]=!0,n.captions.push(t);for(s=0;s<this.pendingMetadata.length;s++)(i=this.pendingMetadata[s]).cueTime=Ct.metadataTsToSeconds(i.pts,a,this.keepOriginalTimestamps),n.metadata.push(i);for(n.metadata.dispatchType=this.metadataStream.dispatchType,this.pendingTracks.length=0,this.videoTrack=null,this.pendingBoxes.length=0,this.pendingCaptions.length=0,this.pendingBytes=0,this.pendingMetadata.length=0,this.trigger("data",n),s=0;s<n.captions.length;s++)t=n.captions[s],this.trigger("caption",t);for(s=0;s<n.metadata.length;s++)i=n.metadata[s],this.trigger("id3Frame",i)}this.emittedTracks>=this.numberOfTracks&&(this.trigger("done"),this.emittedTracks=0)},C.prototype.setRemux=function(e){this.remuxTracks=e},(wt=function(s){var r,n,a=this,i=!0;wt.prototype.init.call(this),s=s||{},this.baseMediaDecodeTime=s.baseMediaDecodeTime||0,this.transmuxPipeline_={},this.setupAacPipeline=function(){var t={};(this.transmuxPipeline_=t).type="aac",t.metadataStream=new A.MetadataStream,t.aacStream=new It,t.audioTimestampRolloverStream=new A.TimestampRolloverStream("audio"),t.timedMetadataTimestampRolloverStream=new A.TimestampRolloverStream("timed-metadata"),t.adtsStream=new kt,t.coalesceStream=new C(s,t.metadataStream),t.headOfPipeline=t.aacStream,t.aacStream.pipe(t.audioTimestampRolloverStream).pipe(t.adtsStream),t.aacStream.pipe(t.timedMetadataTimestampRolloverStream).pipe(t.metadataStream).pipe(t.coalesceStream),t.metadataStream.on("timestamp",function(e){t.aacStream.setTimestamp(e.timeStamp)}),t.aacStream.on("data",function(e){"timed-metadata"!==e.type&&"audio"!==e.type||t.audioSegmentStream||(n=n||{timelineStartInfo:{baseMediaDecodeTime:a.baseMediaDecodeTime},codec:"adts",type:"audio"},t.coalesceStream.numberOfTracks++,t.audioSegmentStream=new Rt(n,s),t.audioSegmentStream.on("log",a.getLogTrigger_("audioSegmentStream")),t.audioSegmentStream.on("timingInfo",a.trigger.bind(a,"audioTimingInfo")),t.adtsStream.pipe(t.audioSegmentStream).pipe(t.coalesceStream),a.trigger("trackinfo",{hasAudio:!!n,hasVideo:!!r}))}),t.coalesceStream.on("data",this.trigger.bind(this,"data")),t.coalesceStream.on("done",this.trigger.bind(this,"done")),vt(this,t)},this.setupTsPipeline=function(){var i={};(this.transmuxPipeline_=i).type="ts",i.metadataStream=new A.MetadataStream,i.packetStream=new A.TransportPacketStream,i.parseStream=new A.TransportParseStream,i.elementaryStream=new A.ElementaryStream,i.timestampRolloverStream=new A.TimestampRolloverStream,i.adtsStream=new kt,i.h264Stream=new xt,i.captionStream=new A.CaptionStream(s),i.coalesceStream=new C(s,i.metadataStream),i.headOfPipeline=i.packetStream,i.packetStream.pipe(i.parseStream).pipe(i.elementaryStream).pipe(i.timestampRolloverStream),i.timestampRolloverStream.pipe(i.h264Stream),i.timestampRolloverStream.pipe(i.adtsStream),i.timestampRolloverStream.pipe(i.metadataStream).pipe(i.coalesceStream),i.h264Stream.pipe(i.captionStream).pipe(i.coalesceStream),i.elementaryStream.on("data",function(e){var t;if("metadata"===e.type){for(t=e.tracks.length;t--;)r||"video"!==e.tracks[t].type?n||"audio"!==e.tracks[t].type||((n=e.tracks[t]).timelineStartInfo.baseMediaDecodeTime=a.baseMediaDecodeTime):(r=e.tracks[t]).timelineStartInfo.baseMediaDecodeTime=a.baseMediaDecodeTime;r&&!i.videoSegmentStream&&(i.coalesceStream.numberOfTracks++,i.videoSegmentStream=new St(r,s),i.videoSegmentStream.on("log",a.getLogTrigger_("videoSegmentStream")),i.videoSegmentStream.on("timelineStartInfo",function(e){n&&!s.keepOriginalTimestamps&&(n.timelineStartInfo=e,i.audioSegmentStream.setEarliestDts(e.dts-a.baseMediaDecodeTime))}),i.videoSegmentStream.on("processedGopsInfo",a.trigger.bind(a,"gopInfo")),i.videoSegmentStream.on("segmentTimingInfo",a.trigger.bind(a,"videoSegmentTimingInfo")),i.videoSegmentStream.on("baseMediaDecodeTime",function(e){n&&i.audioSegmentStream.setVideoBaseMediaDecodeTime(e)}),i.videoSegmentStream.on("timingInfo",a.trigger.bind(a,"videoTimingInfo")),i.h264Stream.pipe(i.videoSegmentStream).pipe(i.coalesceStream)),n&&!i.audioSegmentStream&&(i.coalesceStream.numberOfTracks++,i.audioSegmentStream=new Rt(n,s),i.audioSegmentStream.on("log",a.getLogTrigger_("audioSegmentStream")),i.audioSegmentStream.on("timingInfo",a.trigger.bind(a,"audioTimingInfo")),i.audioSegmentStream.on("segmentTimingInfo",a.trigger.bind(a,"audioSegmentTimingInfo")),i.adtsStream.pipe(i.audioSegmentStream).pipe(i.coalesceStream)),a.trigger("trackinfo",{hasAudio:!!n,hasVideo:!!r})}}),i.coalesceStream.on("data",this.trigger.bind(this,"data")),i.coalesceStream.on("id3Frame",function(e){e.dispatchType=i.metadataStream.dispatchType,a.trigger("id3Frame",e)}),i.coalesceStream.on("caption",this.trigger.bind(this,"caption")),i.coalesceStream.on("done",this.trigger.bind(this,"done")),vt(this,i)},this.setBaseMediaDecodeTime=function(e){var t=this.transmuxPipeline_;s.keepOriginalTimestamps||(this.baseMediaDecodeTime=e),n&&(n.timelineStartInfo.dts=void 0,n.timelineStartInfo.pts=void 0,I.clearDtsInfo(n),t.audioTimestampRolloverStream)&&t.audioTimestampRolloverStream.discontinuity(),r&&(t.videoSegmentStream&&(t.videoSegmentStream.gopCache_=[]),r.timelineStartInfo.dts=void 0,r.timelineStartInfo.pts=void 0,I.clearDtsInfo(r),t.captionStream.reset()),t.timestampRolloverStream&&t.timestampRolloverStream.discontinuity()},this.setAudioAppendStart=function(e){n&&this.transmuxPipeline_.audioSegmentStream.setAudioAppendStart(e)},this.setRemux=function(e){var t=this.transmuxPipeline_;s.remux=e,t&&t.coalesceStream&&t.coalesceStream.setRemux(e)},this.alignGopsWith=function(e){r&&this.transmuxPipeline_.videoSegmentStream&&this.transmuxPipeline_.videoSegmentStream.alignGopsWith(e)},this.getLogTrigger_=function(t){var i=this;return function(e){e.stream=t,i.trigger("log",e)}},this.push=function(e){var t;i&&((t=At(e))&&"aac"!==this.transmuxPipeline_.type?this.setupAacPipeline():t||"ts"===this.transmuxPipeline_.type||this.setupTsPipeline(),i=!1),this.transmuxPipeline_.headOfPipeline.push(e)},this.flush=function(){i=!0,this.transmuxPipeline_.headOfPipeline.flush()},this.endTimeline=function(){this.transmuxPipeline_.headOfPipeline.endTimeline()},this.reset=function(){this.transmuxPipeline_.headOfPipeline&&this.transmuxPipeline_.headOfPipeline.reset()},this.resetCaptions=function(){this.transmuxPipeline_.captionStream&&this.transmuxPipeline_.captionStream.reset()}}).prototype=new E;function Nt(e){var t="";return(t+=String.fromCharCode(e[0]))+String.fromCharCode(e[1])+String.fromCharCode(e[2])+String.fromCharCode(e[3])}function Mt(e,t){var i,s,r,n=[];if(!t.length)return null;for(i=0;i<e.byteLength;)s=zt(e[i]<<24|e[i+1]<<16|e[i+2]<<8|e[i+3]),r=Wt(e.subarray(i+4,i+8)),s=1<s?i+s:e.byteLength,r===t[0]&&(1===t.length?n.push(e.subarray(i+8,s)):(r=Mt(e.subarray(i+8,s),t.slice(1))).length&&(n=n.concat(r))),i=s;return n}function Ut(e){var t={version:e[0],flags:new Uint8Array(e.subarray(1,4))};return t.baseMediaDecodeTime=1===t.version?Xt(e.subarray(4)):Gt(e[4]<<24|e[5]<<16|e[6]<<8|e[7]),t}function Bt(e){var t,i={version:e[0],flags:new Uint8Array(e.subarray(1,4)),samples:[]},s=new DataView(e.buffer,e.byteOffset,e.byteLength),r=1&i.flags[2],n=4&i.flags[2],a=1&i.flags[1],o=2&i.flags[1],l=4&i.flags[1],d=8&i.flags[1],h=s.getUint32(4),u=8;for(r&&(i.dataOffset=s.getInt32(u),u+=4),n&&h&&(t={flags:Kt(e.subarray(u,u+4))},u+=4,a&&(t.duration=s.getUint32(u),u+=4),o&&(t.size=s.getUint32(u),u+=4),d&&(t.compositionTimeOffset=1===i.version?s.getInt32(u):s.getUint32(u),u+=4),i.samples.push(t),h--);h--;)t={},a&&(t.duration=s.getUint32(u),u+=4),o&&(t.size=s.getUint32(u),u+=4),l&&(t.flags=Kt(e.subarray(u,u+4)),u+=4),d&&(t.compositionTimeOffset=1===i.version?s.getInt32(u):s.getUint32(u),u+=4),i.samples.push(t);return i}function Ft(e){var t=new DataView(e.buffer,e.byteOffset,e.byteLength),i=1&(e={version:e[0],flags:new Uint8Array(e.subarray(1,4)),trackId:t.getUint32(4)}).flags[2],s=2&e.flags[2],r=8&e.flags[2],n=16&e.flags[2],a=32&e.flags[2],o=65536&e.flags[0],l=131072&e.flags[0],d=8;return i&&(d+=4,e.baseDataOffset=t.getUint32(12),d+=4),s&&(e.sampleDescriptionIndex=t.getUint32(d),d+=4),r&&(e.defaultSampleDuration=t.getUint32(d),d+=4),n&&(e.defaultSampleSize=t.getUint32(d),d+=4),a&&(e.defaultSampleFlags=t.getUint32(d)),o&&(e.durationIsEmpty=!0),!i&&l&&(e.baseDataOffsetIsMoof=!0),e}function qt(e){var t=31&e[1];return t<<8|e[2]}function jt(e){return!!(64&e[1])}function Ht(e){var t=0;return 1<(48&e[3])>>>4&&(t+=e[4]+1),t}function Vt(e){switch(e){case 5:return"slice_layer_without_partitioning_rbsp_idr";case 6:return"sei_rbsp";case 7:return"seq_parameter_set_rbsp";case 8:return"pic_parameter_set_rbsp";case 9:return"access_unit_delimiter_rbsp";default:return null}}var $t=wt,i=function(e){return e>>>0},De=function(e){return("00"+e.toString(16)).slice(-2)},zt=i,Wt=Nt,Gt=i,Xt=s.getUint64,Kt=function(e){return{isLeading:(12&e[0])>>>2,dependsOn:3&e[0],isDependedOn:(192&e[1])>>>6,hasRedundancy:(48&e[1])>>>4,paddingValue:(14&e[1])>>>1,isNonSyncSample:1&e[1],degradationPriority:e[2]<<8|e[3]}},Pe="undefined"!=typeof window?window:"undefined"!=typeof fe?fe:"undefined"!=typeof self?self:{},S=Pe,Yt=Oe.discardEmulationPreventionBytes,Qt=p.CaptionStream,D=Mt,Jt=Ut,Zt=Bt,ei=Ft,ti=S,ii=function(e,h){var i=D(e,["moof","traf"]),e=D(e,["mdat"]),u={},s=[];return e.forEach(function(e,t){t=i[t];s.push({mdat:e,traf:t})}),s.forEach(function(e){var t,i,s,r,n,a=e.mdat,e=e.traf,o=D(e,["tfhd"]),o=ei(o[0]),l=o.trackId,d=D(e,["tfdt"]),d=0<d.length?Jt(d[0]).baseMediaDecodeTime:0,e=D(e,["trun"]);h===l&&0<e.length&&(t=d,i=o.defaultSampleDuration||0,s=o.defaultSampleSize||0,r=o.trackId,n=[],e.forEach(function(e){e=Zt(e).samples;e.forEach(function(e){void 0===e.duration&&(e.duration=i),void 0===e.size&&(e.size=s),e.trackId=r,e.dts=t,void 0===e.compositionTimeOffset&&(e.compositionTimeOffset=0),"bigint"==typeof t?(e.pts=t+ti.BigInt(e.compositionTimeOffset),t+=ti.BigInt(e.duration)):(e.pts=t+e.compositionTimeOffset,t+=e.duration)}),n=n.concat(e)}),d=function(e,t,i){for(var s,r,n=new DataView(e.buffer,e.byteOffset,e.byteLength),a={logs:[],seiNals:[]},o=0;o+4<e.length;o+=s)if(s=n.getUint32(o),o+=4,!(s<=0))switch(31&e[o]){case 6:var l=e.subarray(o+1,o+1+s),d=function(e,t){for(var i=e,s=0;s<t.length;s++){var r=t[s];if(i<r.size)return r;i-=r.size}return null}(o,t),l={nalUnitType:"sei_rbsp",size:s,data:l,escapedRBSP:Yt(l),trackId:i};if(d)l.pts=d.pts,l.dts=d.dts,r=d;else{if(!r){a.logs.push({level:"warn",message:"We've encountered a nal unit without data at "+o+" for trackId "+i+". See mux.js#223."});break}l.pts=r.pts,l.dts=r.dts}a.seiNals.push(l)}return a}(a,n,l),u[l]||(u[l]={seiNals:[],logs:[]}),u[l].seiNals=u[l].seiNals.concat(d.seiNals),u[l].logs=u[l].logs.concat(d.logs))}),u},si=function(){var t,a,o,l,d,i,s=!1;this.isInitialized=function(){return s},this.init=function(e){t=new Qt,s=!0,i=!!e&&e.isPartial,t.on("data",function(e){e.startTime=e.startPts/l,e.endTime=e.endPts/l,d.captions.push(e),d.captionStreams[e.stream]=!0}),t.on("log",function(e){d.logs.push(e)})},this.isNewInit=function(e,t){return!(e&&0===e.length||t&&"object"==typeof t&&0===Object.keys(t).length||o===e[0]&&l===t[o])},this.parse=function(e,t,i){var s,r;if(!this.isInitialized())return null;if(!t||!i)return null;if(this.isNewInit(t,i))o=t[0],l=i[o];else if(null===o||!l)return a.push(e),null;for(;0<a.length;){var n=a.shift();this.parse(n,t,i)}return e=e,r=l,(s=null===(s=o)?null:{seiNals:(e=ii(e,s)[s]||{}).seiNals,logs:e.logs,timescale:r})&&s.logs&&(d.logs=d.logs.concat(s.logs)),null!==s&&s.seiNals?(this.pushNals(s.seiNals),this.flushStream(),d):d.logs.length?{logs:d.logs,captions:[],captionStreams:[]}:null},this.pushNals=function(e){if(!this.isInitialized()||!e||0===e.length)return null;e.forEach(function(e){t.push(e)})},this.flushStream=function(){if(!this.isInitialized())return null;i?t.partialFlush():t.flush()},this.clearParsedCaptions=function(){d.captions=[],d.captionStreams={},d.logs=[]},this.resetCaptionStream=function(){if(!this.isInitialized())return null;t.reset()},this.clearAllCaptions=function(){this.clearParsedCaptions(),this.resetCaptionStream()},this.reset=function(){a=[],l=o=null,d?this.clearParsedCaptions():d={captions:[],captionStreams:{},logs:[]},this.resetCaptionStream()},this.reset()},ri=function(e){for(var t=0,i=String.fromCharCode(e[t]),s="";"\0"!==i;)s+=i,t++,i=String.fromCharCode(e[t]);return s+=i},ni=s.getUint64,ai=function(e){return void 0!==e||null!==e},oi=i,P=De,L=Mt,li=Nt,di={parseEmsgBox:function(e){var t,i,s,r,n,a,o,l=4,d=e[0],h=(0===d?(l=(l+=(r=ri(e.subarray(l))).length)+(n=ri(e.subarray(l))).length,s=(h=new DataView(e.buffer)).getUint32(l),o=h.getUint32(l+=4),t=h.getUint32(l+=4),i=h.getUint32(l+=4),l+=4):1===d&&(s=(h=new DataView(e.buffer)).getUint32(l),a=ni(e.subarray(l+=4)),t=h.getUint32(l+=8),i=h.getUint32(l+=4),l=(l=(l+=4)+(r=ri(e.subarray(l))).length)+(n=ri(e.subarray(l))).length),{scheme_id_uri:r,value:n,timescale:s||1,presentation_time:a,presentation_time_delta:o,event_duration:t,id:i,message_data:new Uint8Array(e.subarray(l,e.byteLength))});return n="\0"!==(r=h).scheme_id_uri,a=0===(s=d)&&ai(r.presentation_time_delta)&&n,o=1===s&&ai(r.presentation_time)&&n,!(1<s)&&a||o?h:void 0},scaleTime:function(e,t,i,s){return e||0===e?e/t:s+i/t}},hi=s.getUint64,ui=S,ci=Ze.parseId3Frames,pi=function(e){var t=0===e[0]?12:20;return oi(e[t]<<24|e[1+t]<<16|e[2+t]<<8|e[3+t])},mi=function(n,e){e=L(e,["moof","traf"]).reduce(function(e,t){var i=L(t,["tfhd"])[0],i=oi(i[4]<<24|i[5]<<16|i[6]<<8|i[7]),i=n[i]||9e4,t=L(t,["tfdt"])[0],s=new DataView(t.buffer,t.byteOffset,t.byteLength),t=1===t[0]?hi(t.subarray(4,12)):s.getUint32(4);let r;return"bigint"==typeof t?r=t/ui.BigInt(i):"number"!=typeof t||isNaN(t)||(r=t/i),e=(r=r<Number.MAX_SAFE_INTEGER?Number(r):r)<e?r:e},1/0);return"bigint"==typeof e||isFinite(e)?e:0},gi=function(e){var e=L(e,["moov","trak"]),n=[];return e.forEach(function(e){var t,i={},s=L(e,["tkhd"])[0],r=(s&&(r=(s=new DataView(s.buffer,s.byteOffset,s.byteLength)).getUint8(0),i.id=0===r?s.getUint32(12):s.getUint32(20)),L(e,["mdia","hdlr"])[0]),r=(r&&(s=li(r.subarray(8,12)),i.type="vide"===s?"video":"soun"===s?"audio":s),L(e,["mdia","minf","stbl","stsd"])[0]),s=(r&&(s=r.subarray(8),i.codec=li(s.subarray(4,8)),r=L(s,[i.codec])[0])&&(/^[asm]vc[1-9]$/i.test(i.codec)?(t=r.subarray(78),"avcC"===li(t.subarray(4,8))&&11<t.length?(i.codec+=".",i.codec+=P(t[9]),i.codec+=P(t[10]),i.codec+=P(t[11])):i.codec="avc1.4d400d"):/^mp4[a,v]$/i.test(i.codec)?(t=r.subarray(28),"esds"===li(t.subarray(4,8))&&20<t.length&&0!==t[19]?(i.codec+="."+P(t[19]),i.codec+="."+P(t[20]>>>2&63).replace(/^0/,"")):i.codec="mp4a.40.2"):i.codec=i.codec.toLowerCase()),L(e,["mdia","mdhd"])[0]);s&&(i.timescale=pi(s)),n.push(i)}),n},fi=function(e,i=0){return L(e,["emsg"]).map(e=>{var e=di.parseEmsgBox(new Uint8Array(e)),t=ci(e.message_data);return{cueTime:di.scaleTime(e.presentation_time,e.timescale,e.presentation_time_delta,i),duration:di.scaleTime(e.event_duration,e.timescale),frames:t}})},yi=He,_i=He,O=Ye,R={},N=(R.ts={parseType:function(e,t){e=qt(e);return 0===e?"pat":e===t?"pmt":t?"pes":null},parsePat:function(e){var t=jt(e),i=4+Ht(e);return t&&(i+=e[i]+1),(31&e[i+10])<<8|e[i+11]},parsePmt:function(e){var t={},i=jt(e),s=4+Ht(e);if(i&&(s+=e[s]+1),1&e[s+5]){for(var r=3+((15&e[s+1])<<8|e[s+2])-4,n=12+((15&e[s+10])<<8|e[s+11]);n<r;){var a=s+n;t[(31&e[a+1])<<8|e[a+2]]=e[a],n+=5+((15&e[a+3])<<8|e[a+4])}return t}},parsePayloadUnitStartIndicator:jt,parsePesType:function(e,t){switch(t[qt(e)]){case yi.H264_STREAM_TYPE:return"video";case yi.ADTS_STREAM_TYPE:return"audio";case yi.METADATA_STREAM_TYPE:return"timed-metadata";default:return null}},parsePesTime:function(e){var t,i,s;return!jt(e)||(t=4+Ht(e))>=e.byteLength?null:(i=null,192&(s=e[t+7])&&((i={}).pts=(14&e[t+9])<<27|(255&e[t+10])<<20|(254&e[t+11])<<12|(255&e[t+12])<<5|(254&e[t+13])>>>3,i.pts*=4,i.pts+=(6&e[t+13])>>>1,i.dts=i.pts,64&s)&&(i.dts=(14&e[t+14])<<27|(255&e[t+15])<<20|(254&e[t+16])<<12|(255&e[t+17])<<5|(254&e[t+18])>>>3,i.dts*=4,i.dts+=(6&e[t+18])>>>1),i)},videoPacketContainsKeyFrame:function(e){for(var t=4+Ht(e),i=e.subarray(t),s=0,r=0,n=!1;r<i.byteLength-3;r++)if(1===i[r+2]){s=r+5;break}for(;s<i.byteLength;)switch(i[s]){case 0:if(0!==i[s-1])s+=2;else if(0!==i[s-2])s++;else{for(r+3!==s-2&&"slice_layer_without_partitioning_rbsp_idr"===Vt(31&i[r+3])&&(n=!0);1!==i[++s]&&s<i.length;);r=s-2,s+=3}break;case 1:0!==i[s-1]||0!==i[s-2]?s+=3:("slice_layer_without_partitioning_rbsp_idr"===Vt(31&i[r+3])&&(n=!0),r=s-2,s+=3);break;default:s+=3}return i=i.subarray(r),s-=r,r=0,n=i&&3<i.byteLength&&"slice_layer_without_partitioning_rbsp_idr"===Vt(31&i[r+3])?!0:n}},R.aac=b,c.ONE_SECOND_IN_TS),vi=function(e,t){for(var i,s=0,r=188;r<e.byteLength;)if(71===e[s]&&71===e[r]){switch(i=e.subarray(s,r),R.ts.parseType(i,t.pid)){case"pat":t.pid=R.ts.parsePat(i);break;case"pmt":var n=R.ts.parsePmt(i);t.table=t.table||{},Object.keys(n).forEach(function(e){t.table[e]=n[e]})}s+=188,r+=188}else s++,r++},bi=function(e,t,i){for(var s,r,n,a,o=0,l=188,d=!1;l<=e.byteLength;)if(71!==e[o]||71!==e[l]&&l!==e.byteLength)o++,l++;else{if(s=e.subarray(o,l),"pes"===R.ts.parseType(s,t.pid)&&(r=R.ts.parsePesType(s,t.table),n=R.ts.parsePayloadUnitStartIndicator(s),"audio"===r)&&n&&(a=R.ts.parsePesTime(s))&&(a.type="audio",i.audio.push(a),d=!0),d)break;o+=188,l+=188}for(o=(l=e.byteLength)-188,d=!1;0<=o;)if(71!==e[o]||71!==e[l]&&l!==e.byteLength)o--,l--;else{if(s=e.subarray(o,l),"pes"===R.ts.parseType(s,t.pid)&&(r=R.ts.parsePesType(s,t.table),n=R.ts.parsePayloadUnitStartIndicator(s),"audio"===r)&&n&&(a=R.ts.parsePesTime(s))&&(a.type="audio",i.audio.push(a),d=!0),d)break;o-=188,l-=188}},Ti=function(e,t,i){for(var s,r,n,a,o,l,d,h,u=0,c=188,p=!1,m={data:[],size:0};c<e.byteLength;)if(71===e[u]&&71===e[c]){if(s=e.subarray(u,c),"pes"===R.ts.parseType(s,t.pid))if(r=R.ts.parsePesType(s,t.table),n=R.ts.parsePayloadUnitStartIndicator(s),"video"===r&&(n&&!p&&(a=R.ts.parsePesTime(s))&&(a.type="video",i.video.push(a),p=!0),!i.firstKeyFrame)){if(n&&0!==m.size){for(o=new Uint8Array(m.size),l=0;m.data.length;)d=m.data.shift(),o.set(d,l),l+=d.byteLength;R.ts.videoPacketContainsKeyFrame(o)&&(h=R.ts.parsePesTime(o))&&(i.firstKeyFrame=h,i.firstKeyFrame.type="video"),m.size=0}m.data.push(s),m.size+=s.byteLength}if(p&&i.firstKeyFrame)break;u+=188,c+=188}else u++,c++;for(u=(c=e.byteLength)-188,p=!1;0<=u;)if(71===e[u]&&71===e[c]){if(s=e.subarray(u,c),"pes"===R.ts.parseType(s,t.pid)&&(r=R.ts.parsePesType(s,t.table),n=R.ts.parsePayloadUnitStartIndicator(s),"video"===r)&&n&&(a=R.ts.parsePesTime(s))&&(a.type="video",i.video.push(a),p=!0),p)break;u-=188,c-=188}else u--,c--},Si=function(e,t){var i,s,r,e=(R.aac.isLikelyAacData(e)?function(e){for(var t,i,s=!1,r=0,n=null,a=null,o=0,l=0;3<=e.length-l;){switch(R.aac.parseType(e,l)){case"timed-metadata":e.length-l<10?s=!0:(o=R.aac.parseId3TagSize(e,l))>e.length?s=!0:(null===a&&(t=e.subarray(l,l+o),a=R.aac.parseAacTimestamp(t)),l+=o);break;case"audio":e.length-l<7?s=!0:(o=R.aac.parseAdtsSize(e,l))>e.length?s=!0:(null===n&&(t=e.subarray(l,l+o),n=R.aac.parseSampleRate(t)),r++,l+=o);break;default:l++}if(s)return null}return null===n||null===a?null:{audio:[{type:"audio",dts:a,pts:a},{type:"audio",dts:a+1024*r*(i=N/n),pts:a+1024*r*i}]}}:function(e){var t,i={pid:null,table:null},s={};for(t in vi(e,i),i.table)if(i.table.hasOwnProperty(t))switch(i.table[t]){case _i.H264_STREAM_TYPE:s.video=[],Ti(e,i,s),0===s.video.length&&delete s.video;break;case _i.ADTS_STREAM_TYPE:s.audio=[],bi(e,i,s),0===s.audio.length&&delete s.audio}return s})(e);return e&&(e.audio||e.video)?(t=t,(i=e).audio&&i.audio.length&&("undefined"!=typeof(s=t)&&!isNaN(s)||(s=i.audio[0].dts),i.audio.forEach(function(e){e.dts=O(e.dts,s),e.pts=O(e.pts,s),e.dtsTime=e.dts/N,e.ptsTime=e.pts/N})),i.video&&i.video.length&&("undefined"!=typeof(r=t)&&!isNaN(r)||(r=i.video[0].dts),i.video.forEach(function(e){e.dts=O(e.dts,r),e.pts=O(e.pts,r),e.dtsTime=e.dts/N,e.ptsTime=e.pts/N}),i.firstKeyFrame)&&((t=i.firstKeyFrame).dts=O(t.dts,r),t.pts=O(t.pts,r),t.dtsTime=t.dts/N,t.ptsTime=t.pts/N),e):null};class wi{constructor(e,t){this.options=t||{},this.self=e,this.init()}init(){var i,e;this.transmuxer&&this.transmuxer.dispose(),this.transmuxer=new $t(this.options),i=this.self,(e=this.transmuxer).on("data",function(e){var t=e.initSegment,t=(e.initSegment={data:t.buffer,byteOffset:t.byteOffset,byteLength:t.byteLength},e.data);e.data=t.buffer,i.postMessage({action:"data",segment:e,byteOffset:t.byteOffset,byteLength:t.byteLength},[e.data])}),e.on("done",function(e){i.postMessage({action:"done"})}),e.on("gopInfo",function(e){i.postMessage({action:"gopInfo",gopInfo:e})}),e.on("videoSegmentTimingInfo",function(e){var t={start:{decode:c.videoTsToSeconds(e.start.dts),presentation:c.videoTsToSeconds(e.start.pts)},end:{decode:c.videoTsToSeconds(e.end.dts),presentation:c.videoTsToSeconds(e.end.pts)},baseMediaDecodeTime:c.videoTsToSeconds(e.baseMediaDecodeTime)};e.prependedContentDuration&&(t.prependedContentDuration=c.videoTsToSeconds(e.prependedContentDuration)),i.postMessage({action:"videoSegmentTimingInfo",videoSegmentTimingInfo:t})}),e.on("audioSegmentTimingInfo",function(e){var t={start:{decode:c.videoTsToSeconds(e.start.dts),presentation:c.videoTsToSeconds(e.start.pts)},end:{decode:c.videoTsToSeconds(e.end.dts),presentation:c.videoTsToSeconds(e.end.pts)},baseMediaDecodeTime:c.videoTsToSeconds(e.baseMediaDecodeTime)};e.prependedContentDuration&&(t.prependedContentDuration=c.videoTsToSeconds(e.prependedContentDuration)),i.postMessage({action:"audioSegmentTimingInfo",audioSegmentTimingInfo:t})}),e.on("id3Frame",function(e){i.postMessage({action:"id3Frame",id3Frame:e})}),e.on("caption",function(e){i.postMessage({action:"caption",caption:e})}),e.on("trackinfo",function(e){i.postMessage({action:"trackinfo",trackInfo:e})}),e.on("audioTimingInfo",function(e){i.postMessage({action:"audioTimingInfo",audioTimingInfo:{start:c.videoTsToSeconds(e.start),end:c.videoTsToSeconds(e.end)}})}),e.on("videoTimingInfo",function(e){i.postMessage({action:"videoTimingInfo",videoTimingInfo:{start:c.videoTsToSeconds(e.start),end:c.videoTsToSeconds(e.end)}})}),e.on("log",function(e){i.postMessage({action:"log",log:e})})}pushMp4Captions(e){this.captionParser||(this.captionParser=new si,this.captionParser.init());var t=new Uint8Array(e.data,e.byteOffset,e.byteLength),e=this.captionParser.parse(t,e.trackIds,e.timescales);this.self.postMessage({action:"mp4Captions",captions:e&&e.captions||[],logs:e&&e.logs||[],data:t.buffer},[t.buffer])}probeMp4StartTime({timescales:e,data:t}){e=mi(e,t);this.self.postMessage({action:"probeMp4StartTime",startTime:e,data:t},[t.buffer])}probeMp4Tracks({data:e}){var t=gi(e);this.self.postMessage({action:"probeMp4Tracks",tracks:t,data:e},[e.buffer])}probeEmsgID3({data:e,offset:t}){t=fi(e,t);this.self.postMessage({action:"probeEmsgID3",id3Frames:t,emsgData:e},[e.buffer])}probeTs({data:e,baseStartTime:t}){t="number"!=typeof t||isNaN(t)?void 0:t*c.ONE_SECOND_IN_TS,t=Si(e,t);let i=null;t&&((i={hasVideo:t.video&&2===t.video.length||!1,hasAudio:t.audio&&2===t.audio.length||!1}).hasVideo&&(i.videoStart=t.video[0].ptsTime),i.hasAudio)&&(i.audioStart=t.audio[0].ptsTime),this.self.postMessage({action:"probeTs",result:i,data:e},[e.buffer])}clearAllMp4Captions(){this.captionParser&&this.captionParser.clearAllCaptions()}clearParsedMp4Captions(){this.captionParser&&this.captionParser.clearParsedCaptions()}push(e){e=new Uint8Array(e.data,e.byteOffset,e.byteLength);this.transmuxer.push(e)}reset(){this.transmuxer.reset()}setTimestampOffset(e){e=e.timestampOffset||0;this.transmuxer.setBaseMediaDecodeTime(Math.round(c.secondsToVideoTs(e)))}setAudioAppendStart(e){this.transmuxer.setAudioAppendStart(Math.ceil(c.secondsToVideoTs(e.appendStart)))}setRemux(e){this.transmuxer.setRemux(e.remux)}flush(e){this.transmuxer.flush(),self.postMessage({action:"done",type:"transmuxed"})}endTimeline(){this.transmuxer.endTimeline(),self.postMessage({action:"endedtimeline",type:"transmuxed"})}alignGopsWith(e){this.transmuxer.alignGopsWith(e.gopsToAlignWith.slice())}}self.onmessage=function(e){"init"===e.data.action&&e.data.options?this.messageHandlers=new wi(self,e.data.options):(this.messageHandlers||(this.messageHandlers=new wi(self)),e.data&&e.data.action&&"init"!==e.data.action&&this.messageHandlers[e.data.action]&&this.messageHandlers[e.data.action](e.data))}})));const hh=(e,t,i)=>{var{type:s,initSegment:r,captions:n,captionStreams:a,metadata:o,videoFrameDtsTime:l,videoFramePtsTime:d}=e.data.segment,t=(t.buffer.push({captions:n,captionStreams:a,metadata:o}),e.data.segment.boxes||{data:e.data.segment.data}),n={type:s,data:new Uint8Array(t.data,t.data.byteOffset,t.data.byteLength),initSegment:new Uint8Array(r.data,r.byteOffset,r.byteLength)};"undefined"!=typeof l&&(n.videoFrameDtsTime=l),"undefined"!=typeof d&&(n.videoFramePtsTime=d),i(n)},uh=({transmuxedData:e,callback:t})=>{e.buffer=[],t(e)},ch=(e,t)=>{t.gopInfo=e.data.gopInfo},ph=t=>{const{transmuxer:i,bytes:e,audioAppendStart:s,gopsToAlignWith:r,remux:n,onData:a,onTrackInfo:o,onAudioTimingInfo:l,onVideoTimingInfo:d,onVideoSegmentTimingInfo:h,onAudioSegmentTimingInfo:u,onId3:c,onCaptions:p,onDone:m,onEndedTimeline:g,onTransmuxerLog:f,isEndOfTimeline:y}=t,_={buffer:[]};let v=y;var b,T;i.onmessage=e=>{i.currentTransmux!==t||("data"===e.data.action&&hh(e,_,a),"trackinfo"===e.data.action&&o(e.data.trackInfo),"gopInfo"===e.data.action&&ch(e,_),"audioTimingInfo"===e.data.action&&l(e.data.audioTimingInfo),"videoTimingInfo"===e.data.action&&d(e.data.videoTimingInfo),"videoSegmentTimingInfo"===e.data.action&&h(e.data.videoSegmentTimingInfo),"audioSegmentTimingInfo"===e.data.action&&u(e.data.audioSegmentTimingInfo),"id3Frame"===e.data.action&&c([e.data.id3Frame],e.data.id3Frame.dispatchType),"caption"===e.data.action&&p(e.data.caption),"endedtimeline"===e.data.action&&(v=!1,g()),"log"===e.data.action&&f(e.data.log),"transmuxed"!==e.data.type)||v||(i.onmessage=null,uh({transmuxedData:_,callback:m}),mh(i))},s&&i.postMessage({action:"setAudioAppendStart",appendStart:s}),Array.isArray(r)&&i.postMessage({action:"alignGopsWith",gopsToAlignWith:r}),"undefined"!=typeof n&&i.postMessage({action:"setRemux",remux:n}),e.byteLength&&(b=e instanceof ArrayBuffer?e:e.buffer,T=e instanceof ArrayBuffer?0:e.byteOffset,i.postMessage({action:"push",data:b,byteOffset:T,byteLength:e.byteLength},[b])),y&&i.postMessage({action:"endTimeline"}),i.postMessage({action:"flush"})},mh=e=>{e.currentTransmux=null,e.transmuxQueue.length&&(e.currentTransmux=e.transmuxQueue.shift(),"function"==typeof e.currentTransmux?e.currentTransmux():ph(e.currentTransmux))},gh=(e,t)=>{e.postMessage({action:t}),mh(e)},fh=(e,t)=>{t.currentTransmux?t.transmuxQueue.push(gh.bind(null,t,e)):(t.currentTransmux=e,gh(t,e))};const yh=e=>{e.transmuxer.currentTransmux?e.transmuxer.transmuxQueue.push(e):(e.transmuxer.currentTransmux=e,ph(e))};var _h=e=>{fh("reset",e)},vh=(yh,e=>{const t=new dh,i=(t.currentTransmux=null,t.transmuxQueue=[],t.terminate);return t.terminate=()=>(t.currentTransmux=null,t.transmuxQueue.length=0,i.call(t)),t.postMessage({action:"init",options:e}),t});function bh(t){const i=t.transmuxer,s=t.endAction||t.action,r=t.callback;var e,n=bi({},t,{endAction:null,transmuxer:null,callback:null});const a=e=>{e.data.action===s&&(i.removeEventListener("message",a),e.data.data&&(e.data.data=new Uint8Array(e.data.data,t.byteOffset||0,t.byteLength||e.data.data.byteLength),t.data)&&(t.data=e.data.data),r(e.data))};i.addEventListener("message",a),t.data?(e=t.data instanceof ArrayBuffer,n.byteOffset=e?0:t.data.byteOffset,n.byteLength=t.data.byteLength,e=[e?t.data:t.data.buffer],i.postMessage(n,e)):i.postMessage(n)}function Th(e){let t=0;return e.audio&&t++,e.video&&t++,t}function Sh(e,t){var i=t.attributes||{},s=Fh(function(e){e=e.attributes||{};if(e.CODECS)return $n(e.CODECS)}(t)||[]);return!Bh(e,t)||s.audio||((e,t)=>{if(!Bh(e,t))return!0;var t=t.attributes||{},i=e.mediaGroups.AUDIO[t.AUDIO];for(const s in i)if(!i[s].uri&&!i[s].playlists)return!0;return!1})(e,t)||(t=Fh(function(e,t){if(e.mediaGroups.AUDIO&&t){var i=e.mediaGroups.AUDIO[t];if(i)for(var s in i){s=i[s];if(s.default&&s.playlists)return $n(s.playlists[0].attributes.CODECS)}}return null}(e,i.AUDIO)||[])).audio&&(s.audio=t.audio),s}function wh(e,t){return(e=e&&window.getComputedStyle(e))?e[t]:""}function Eh(e,t){let i,s;return i=(i=e.attributes.BANDWIDTH?e.attributes.BANDWIDTH:i)||window.Number.MAX_VALUE,s=(s=t.attributes.BANDWIDTH?t.attributes.BANDWIDTH:s)||window.Number.MAX_VALUE,i-s}const Ch={FAILURE:2,TIMEOUT:-101,ABORTED:-102},kh=e=>{e.forEach(e=>{e.abort()})},xh=e=>({bandwidth:e.bandwidth,bytesReceived:e.bytesReceived||0,roundTripTime:e.roundTripTime||0}),Ih=e=>{var t=e.target,t={bandwidth:1/0,bytesReceived:0,roundTripTime:Date.now()-t.requestTime||0};return t.bytesReceived=e.loaded,t.bandwidth=Math.floor(t.bytesReceived/t.roundTripTime*8*1e3),t},Ah=(e,t)=>t.timedout?{status:t.status,message:"HLS request timed-out at URL: "+t.uri,code:Ch.TIMEOUT,xhr:t}:t.aborted?{status:t.status,message:"HLS request aborted at URL: "+t.uri,code:Ch.ABORTED,xhr:t}:e?{status:t.status,message:"HLS request errored at URL: "+t.uri,code:Ch.FAILURE,xhr:t}:"arraybuffer"===t.responseType&&0===t.response.byteLength?{status:t.status,message:"Empty HLS response at URL: "+t.uri,code:Ch.FAILURE,xhr:t}:null,Dh=(r,n,a)=>(e,t)=>{var i=t.response,e=Ah(e,t);if(e)return a(e,r);if(16!==i.byteLength)return a({status:t.status,message:"Invalid HLS key at URL: "+t.uri,code:Ch.FAILURE,xhr:t},r);var e=new DataView(i),s=new Uint32Array([e.getUint32(0),e.getUint32(4),e.getUint32(8),e.getUint32(12)]);for(let e=0;e<n.length;e++)n[e].bytes=s;return a(null,r)},Ph=(i,s)=>{var e,t=Cl(i.map.bytes);if("mp4"!==t)return e=i.map.resolvedUri||i.map.uri,s({internal:!0,message:`Found unsupported ${t=t||"unknown"} container for initialization segment at URL: `+e,code:Ch.FAILURE,metadata:{errorType:T.Error.UnsupportedMediaInitialization,mediaType:t}});bh({action:"probeMp4Tracks",data:i.map.bytes,transmuxer:i.transmuxer,callback:({tracks:e,data:t})=>(i.map.bytes=t,e.forEach(function(e){i.map.tracks=i.map.tracks||{},i.map.tracks[e.type]||"number"==typeof(i.map.tracks[e.type]=e).id&&e.timescale&&(i.map.timescales=i.map.timescales||{},i.map.timescales[e.id]=e.timescale)}),s(null))})},Lh=({segment:i,bytes:t,trackInfoFn:s,timingInfoFn:e,videoSegmentTimingInfoFn:r,audioSegmentTimingInfoFn:n,id3Fn:a,captionsFn:o,isEndOfTimeline:l,endedTimelineFn:d,dataFn:h,doneFn:u,onTransmuxerLog:c})=>{var p=i.map&&i.map.tracks||{};const m=Boolean(p.audio&&p.video);let g=e.bind(null,i,"audio","start");const f=e.bind(null,i,"audio","end");let y=e.bind(null,i,"video","start");const _=e.bind(null,i,"video","end");bh({action:"probeTs",transmuxer:i.transmuxer,data:t,baseStartTime:i.baseStartTime,callback:e=>{i.bytes=t=e.data;e=e.result;e&&(s(i,{hasAudio:e.hasAudio,hasVideo:e.hasVideo,isMuxed:m}),s=null),yh({bytes:t,transmuxer:i.transmuxer,audioAppendStart:i.audioAppendStart,gopsToAlignWith:i.gopsToAlignWith,remux:m,onData:e=>{e.type="combined"===e.type?"video":e.type,h(i,e)},onTrackInfo:e=>{s&&(m&&(e.isMuxed=!0),s(i,e))},onAudioTimingInfo:e=>{g&&"undefined"!=typeof e.start&&(g(e.start),g=null),f&&"undefined"!=typeof e.end&&f(e.end)},onVideoTimingInfo:e=>{y&&"undefined"!=typeof e.start&&(y(e.start),y=null),_&&"undefined"!=typeof e.end&&_(e.end)},onVideoSegmentTimingInfo:e=>{r(e)},onAudioSegmentTimingInfo:e=>{n(e)},onId3:(e,t)=>{a(i,e,t)},onCaptions:e=>{o(i,[e])},isEndOfTimeline:l,onEndedTimeline:()=>{d()},onTransmuxerLog:c,onDone:e=>{u&&(e.type="combined"===e.type?"video":e.type,u(null,i,e))}})}})},Oh=({segment:i,bytes:s,trackInfoFn:e,timingInfoFn:r,videoSegmentTimingInfoFn:t,audioSegmentTimingInfoFn:n,id3Fn:a,captionsFn:o,isEndOfTimeline:l,endedTimelineFn:d,dataFn:h,doneFn:u,onTransmuxerLog:c})=>{let p=new Uint8Array(s);if(m=p,0<Tl(m,["moof"]).length){i.isFmp4=!0;const g=i.map["tracks"],f={isFmp4:!0,hasVideo:!!g.video,hasAudio:!!g.audio},y=(g.audio&&g.audio.codec&&"enca"!==g.audio.codec&&(f.audioCodec=g.audio.codec),g.video&&g.video.codec&&"encv"!==g.video.codec&&(f.videoCodec=g.video.codec),g.video&&g.audio&&(f.isMuxed=!0),e(i,f),(e,t)=>{h(i,{data:p,type:f.hasAudio&&!f.isMuxed?"audio":"video"}),t&&t.length&&a(i,t),e&&e.length&&o(i,e),u(null,i,{})});void bh({action:"probeMp4StartTime",timescales:i.map.timescales,data:p,transmuxer:i.transmuxer,callback:({data:e,startTime:t})=>{s=e.buffer,i.bytes=p=e,f.hasAudio&&!f.isMuxed&&r(i,"audio","start",t),f.hasVideo&&r(i,"video","start",t),bh({action:"probeEmsgID3",data:p,transmuxer:i.transmuxer,offset:t,callback:({emsgData:e,id3Frames:t})=>{s=e.buffer,i.bytes=p=e,g.video&&e.byteLength&&i.transmuxer?bh({action:"pushMp4Captions",endAction:"mp4Captions",transmuxer:i.transmuxer,data:p,timescales:i.map.timescales,trackIds:[g.video.id],callback:e=>{s=e.data.buffer,i.bytes=p=e.data,e.logs.forEach(function(e){c(L(e,{stream:"mp4CaptionParser"}))}),y(e.captions,t)}}):y(void 0,t)}})}})}else{var m;i.transmuxer?("undefined"==typeof i.container&&(i.container=Cl(p)),"ts"!==i.container&&"aac"!==i.container?(e(i,{hasAudio:!1,hasVideo:!1}),u(null,i,{})):Lh({segment:i,bytes:s,trackInfoFn:e,timingInfoFn:r,videoSegmentTimingInfoFn:t,audioSegmentTimingInfoFn:n,id3Fn:a,captionsFn:o,isEndOfTimeline:l,endedTimelineFn:d,dataFn:h,doneFn:u,onTransmuxerLog:c})):u(null,i,{})}},Rh=function({id:t,key:e,encryptedBytes:i,decryptionWorker:s},r){const n=e=>{e.data.source===t&&(s.removeEventListener("message",n),e=e.data.decrypted,r(new Uint8Array(e.bytes,e.byteOffset,e.byteLength)))};s.addEventListener("message",n);let a;a=e.bytes.slice?e.bytes.slice():new Uint32Array(Array.prototype.slice.call(e.bytes)),s.postMessage(jd({source:t,encrypted:i,key:a,iv:e.iv}),[i.buffer,a.buffer])},Nh=({decryptionWorker:e,segment:t,trackInfoFn:i,timingInfoFn:s,videoSegmentTimingInfoFn:r,audioSegmentTimingInfoFn:n,id3Fn:a,captionsFn:o,isEndOfTimeline:l,endedTimelineFn:d,dataFn:h,doneFn:u,onTransmuxerLog:c})=>{Rh({id:t.requestId,key:t.key,encryptedBytes:t.encryptedBytes,decryptionWorker:e},e=>{t.bytes=e,Oh({segment:t,bytes:t.bytes,trackInfoFn:i,timingInfoFn:s,videoSegmentTimingInfoFn:r,audioSegmentTimingInfoFn:n,id3Fn:a,captionsFn:o,isEndOfTimeline:l,endedTimelineFn:d,dataFn:h,doneFn:u,onTransmuxerLog:c})})},Mh=({xhr:e,xhrOptions:t,decryptionWorker:i,segment:s,abortFn:r,progressFn:n,trackInfoFn:a,timingInfoFn:o,videoSegmentTimingInfoFn:l,audioSegmentTimingInfoFn:d,id3Fn:h,captionsFn:u,isEndOfTimeline:c,endedTimelineFn:p,dataFn:m,doneFn:g,onTransmuxerLog:f})=>{const y=[];var _,v,i=(({activeXhrs:s,decryptionWorker:r,trackInfoFn:n,timingInfoFn:a,videoSegmentTimingInfoFn:o,audioSegmentTimingInfoFn:l,id3Fn:d,captionsFn:h,isEndOfTimeline:u,endedTimelineFn:c,dataFn:p,doneFn:m,onTransmuxerLog:g})=>{let f=0,y=!1;return(e,t)=>{if(!y){if(e)return y=!0,kh(s),m(e,t);if((f+=1)===s.length){const i=function(){if(t.encryptedBytes)return Nh({decryptionWorker:r,segment:t,trackInfoFn:n,timingInfoFn:a,videoSegmentTimingInfoFn:o,audioSegmentTimingInfoFn:l,id3Fn:d,captionsFn:h,isEndOfTimeline:u,endedTimelineFn:c,dataFn:p,doneFn:m,onTransmuxerLog:g});Oh({segment:t,bytes:t.bytes,trackInfoFn:n,timingInfoFn:a,videoSegmentTimingInfoFn:o,audioSegmentTimingInfoFn:l,id3Fn:d,captionsFn:h,isEndOfTimeline:u,endedTimelineFn:c,dataFn:p,doneFn:m,onTransmuxerLog:g})};if(t.endOfAllRequests=Date.now(),t.map&&t.map.encryptedBytes&&!t.map.bytes)return Rh({decryptionWorker:r,id:t.requestId+"-init",encryptedBytes:t.map.encryptedBytes,key:t.map.key},e=>{t.map.bytes=e,Ph(t,e=>{if(e)return kh(s),m(e,t);i()})});i()}}}})({activeXhrs:y,decryptionWorker:i,trackInfoFn:a,timingInfoFn:o,videoSegmentTimingInfoFn:l,audioSegmentTimingInfoFn:d,id3Fn:h,captionsFn:u,isEndOfTimeline:c,endedTimelineFn:p,dataFn:m,doneFn:g,onTransmuxerLog:f}),u=(s.key&&!s.key.bytes&&(a=[s.key],s.map&&!s.map.bytes&&s.map.key&&s.map.key.resolvedUri===s.key.resolvedUri&&a.push(s.map.key),o=e(L(t,{uri:s.key.resolvedUri,responseType:"arraybuffer",requestType:"segment-key"}),Dh(s,a,i)),y.push(o)),s.map&&!s.map.bytes&&(!s.map.key||s.key&&s.key.resolvedUri===s.map.key.resolvedUri||(l=e(L(t,{uri:s.map.key.resolvedUri,responseType:"arraybuffer",requestType:"segment-key"}),Dh(s,[s.map.key],i)),y.push(l)),d=L(t,{uri:s.map.resolvedUri,responseType:"arraybuffer",headers:Bd(s.map),requestType:"segment-media-initialization"}),{segment:_,finishProcessingFn:v}=[{segment:s,finishProcessingFn:i}][0],h=e(d,(e,t)=>{var e=Ah(e,t);return e?v(e,_):(e=new Uint8Array(t.response),_.map.key?(_.map.encryptedBytes=e,v(null,_)):(_.map.bytes=e,void Ph(_,function(e){if(e)return e.xhr=t,e.status=t.status,v(e,_);v(null,_)})))}),y.push(h)),L(t,{uri:s.part&&s.part.resolvedUri||s.resolvedUri,responseType:"arraybuffer",headers:Bd(s),requestType:"segment"}));({segment:b,finishProcessingFn:T,responseType:S}={segment:s,finishProcessingFn:i,responseType:u.responseType});var b,T,S,w,E,c=e(u,(e,t)=>{var e=Ah(e,t);return e?T(e,b):(e="arraybuffer"!==S&&t.responseText?nh(t.responseText.substring(b.lastReachedChar||0)):t.response,b.stats=xh(t),b.key?b.encryptedBytes=new Uint8Array(e):b.bytes=new Uint8Array(e),T(null,b))});c.addEventListener("progress",({segment:w,progressFn:E}=[{segment:s,progressFn:n}][0],e=>{var t=e.target;if(!t.aborted)return w.stats=L(w.stats,Ih(e)),!w.stats.firstBytesReceivedAt&&w.stats.bytesReceived&&(w.stats.firstBytesReceivedAt=Date.now()),E(e,w)})),y.push(c);const C={};return y.forEach(e=>{var t,i;e.addEventListener("loadend",({loadendState:t,abortFn:i}=[{loadendState:C,abortFn:r}][0],e=>{e.target.aborted&&i&&!t.calledAbortFn&&(i(),t.calledAbortFn=!0)}))}),()=>kh(y)},Uh=zl("CodecUtils"),Bh=(e,t)=>{t=t.attributes||{};return e&&e.mediaGroups&&e.mediaGroups.AUDIO&&t.AUDIO&&e.mediaGroups.AUDIO[t.AUDIO]},Fh=function(e){const s={};return e.forEach(({mediaType:e,type:t,details:i})=>{s[e]=s[e]||[],s[e].push(Vn(""+t+i))}),Object.keys(s).forEach(function(e){1<s[e].length?(Uh(`multiple ${e} codecs found as attributes: ${s[e].join(", ")}. Setting playlist codecs to null so that we wait for mux.js to probe segments for real codecs.`),s[e]=null):s[e]=s[e][0]}),s},qh=zl("PlaylistSelector"),jh=function(e){var t;if(e&&e.playlist)return t=e.playlist,JSON.stringify({id:t.id,bandwidth:e.bandwidth,width:e.width,height:e.height,codecs:t.attributes&&t.attributes.CODECS||""})},Hh=function(e,s){const r=e.slice();e.sort(function(e,t){var i=s(e,t);return 0===i?r.indexOf(e)-r.indexOf(t):i})};function Vh(o,t,l,d,h,u){if(o){var c={bandwidth:t,width:l,height:d,limitRenditionByPlayerDimensions:h};let e=o.playlists,r=(Td.isAudioOnly(o)&&(e=u.getAudioTrackPlaylists_(),c.audioOnly=!0),e.map(e=>{var t=e.attributes&&e.attributes.RESOLUTION&&e.attributes.RESOLUTION.width,i=e.attributes&&e.attributes.RESOLUTION&&e.attributes.RESOLUTION.height,s=e.attributes&&e.attributes.BANDWIDTH;return{bandwidth:s||window.Number.MAX_VALUE,width:t,height:i,playlist:e}})),n=(Hh(r,(e,t)=>e.bandwidth-t.bandwidth),(r=r.filter(e=>!Td.isIncompatible(e.playlist))).filter(e=>Td.isEnabled(e.playlist)));o=(n=n.length?n:r.filter(e=>!Td.isDisabled(e.playlist))).filter(e=>e.bandwidth*O.BANDWIDTH_VARIANCE<t);let a=o[o.length-1];var p=o.filter(e=>e.bandwidth===a.bandwidth)[0];if(!1===h){const g=p||n[0]||r[0];if(g&&g.playlist){let e=p?"bandwidthBestRep":"sortedPlaylistReps";return n[0]&&(e="enabledPlaylistReps"),qh(`choosing ${jh(g)} using ${e} with options`,c),g.playlist}}else{var m,h=o.filter(e=>e.width&&e.height),o=(Hh(h,(e,t)=>e.width-t.width),h.filter(e=>e.width===l&&e.height===d)),o=(a=o[o.length-1],o.filter(e=>e.bandwidth===a.bandwidth)[0]);let t,i;o||(m=(t=h.filter(e=>e.width>l||e.height>d)).filter(e=>e.width===t[0].width&&e.height===t[0].height),a=m[m.length-1],i=m.filter(e=>e.bandwidth===a.bandwidth)[0]);let s;u.leastPixelDiffSelector&&(m=h.map(e=>(e.pixelDiff=Math.abs(e.width-l)+Math.abs(e.height-d),e)),Hh(m,(e,t)=>e.pixelDiff===t.pixelDiff?t.bandwidth-e.bandwidth:e.pixelDiff-t.pixelDiff),s=m[0]);const g=s||i||o||p||n[0]||r[0];if(g&&g.playlist){let e="sortedPlaylistReps";return s?e="leastPixelDiffRep":i?e="resolutionPlusOneRep":o?e="resolutionBestRep":p?e="bandwidthBestRep":n[0]&&(e="enabledPlaylistReps"),qh(`choosing ${jh(g)} using ${e} with options`,c),g.playlist}}return qh("could not choose a playlist with options",c),null}}function $h(){let e=this.useDevicePixelRatio&&window.devicePixelRatio||1;return isNaN(this.customPixelRatio)||(e=this.customPixelRatio),Vh(this.playlists.main,this.systemBandwidth,parseInt(wh(this.tech_.el(),"width"),10)*e,parseInt(wh(this.tech_.el(),"height"),10)*e,this.limitRenditionByPlayerDimensions,this.playlistController_)}function zh(e){try{return new URL(e).pathname.split("/").slice(-2).join("/")}catch(e){return""}}function Wh(e,t,i){let s;var r;if(i&&i.cues)for(s=i.cues.length;s--;)(r=i.cues[s]).startTime>=e&&r.endTime<=t&&i.removeCue(r)}const Gh=({inbandTextTracks:e,metadataArray:t,timestampOffset:i,videoDuration:r})=>{if(t){const a=window.WebKitDataCue||window.VTTCue,o=e.metadataTrack_;if(o&&(t.forEach(e=>{const s=e.cueTime+i;!("number"!=typeof s||window.isNaN(s)||s<0)&&s<1/0&&e.frames&&e.frames.length&&e.frames.forEach(e=>{var t,i=new a(s,s,e.value||e.url||e.data||"");i.frame=e,i.value=e,t=i,Object.defineProperties(t.frame,{id:{get(){return T.log.warn("cue.frame.id is deprecated. Use cue.value.key instead."),t.value.key}},value:{get(){return T.log.warn("cue.frame.value is deprecated. Use cue.value.data instead."),t.value.data}},privateData:{get(){return T.log.warn("cue.frame.privateData is deprecated. Use cue.value.data instead."),t.value.data}}}),o.addCue(i)})}),o.cues)&&o.cues.length){var s=o.cues,n=[];for(let e=0;e<s.length;e++)s[e]&&n.push(s[e]);const l=n.reduce((e,t)=>{var i=e[t.startTime]||[];return i.push(t),e[t.startTime]=i,e},{}),d=Object.keys(l).sort((e,t)=>Number(e)-Number(t));d.forEach((e,t)=>{var i=l[e],e=isFinite(r)?r:e;const s=Number(d[t+1])||e;i.forEach(e=>{e.endTime=s})})}}},Xh={id:"ID",class:"CLASS",startDate:"START-DATE",duration:"DURATION",endDate:"END-DATE",endOnNext:"END-ON-NEXT",plannedDuration:"PLANNED-DURATION",scte35Out:"SCTE35-OUT",scte35In:"SCTE35-IN"},Kh=new Set(["id","class","startDate","duration","endDate","endOnNext","startTime","endTime","processDateRange"]),Yh=(e,t,i)=>{e.metadataTrack_||(e.metadataTrack_=i.addRemoteTextTrack({kind:"metadata",label:"Timed Metadata"},!1).track,T.browser.IS_ANY_SAFARI)||(e.metadataTrack_.inBandMetadataTrackDispatchType=t)},Qh=e=>"number"==typeof e&&isFinite(e),Jh=e=>{var{startOfSegment:t,duration:i,segment:s,part:r,playlist:{mediaSequence:n,id:a,segments:o=[]},mediaIndex:l,partIndex:d,timeline:h}=e,o=o.length-1;let u="mediaIndex/partIndex increment";e.getMediaInfoForTime?u=`getMediaInfoForTime (${e.getMediaInfoForTime})`:e.isSyncRequest&&(u="getSyncSegmentCandidate (isSyncRequest)"),e.independent&&(u+=" with independent "+e.independent);var c="number"==typeof d,e=e.segment.uri?"segment":"pre-segment",p=c?od({preloadSegment:s})-1:0;return e+` [${n+l}/${n+o}]`+(c?` part [${d}/${p}]`:"")+` segment start/end [${s.start} => ${s.end}]`+(c?` part start/end [${r.start} => ${r.end}]`:"")+` startOfSegment [${t}]`+` duration [${i}]`+` timeline [${h}]`+` selected by [${u}]`+` playlist [${a}]`},Zh=e=>e+"TimingInfo",eu=({timelineChangeController:e,currentTimeline:t,segmentTimeline:i,loaderType:s,audioDisabled:r})=>{return!(t===i||("audio"===s?(t=e.lastTimelineChange({type:"main"}))&&t.to===i:"main"!==s||!r||(t=e.pendingTimelineChange({type:"audio"}))&&t.to===i))},tu=({segmentDuration:e,maxDuration:t})=>!!e&&Math.round(e)>t+Zl,iu=(e,t)=>{var i,s,r;return"hls"===t&&(t=(e=>{let s=0;return["video","audio"].forEach(function(t){t=e[t+"TimingInfo"];if(t){var{start:t,end:i}=t;let e;"bigint"==typeof t||"bigint"==typeof i?e=window.BigInt(i)-window.BigInt(t):"number"==typeof t&&"number"==typeof i&&(e=i-t),"undefined"!=typeof e&&e>s&&(s=e)}}),s="bigint"==typeof s&&s<Number.MAX_SAFE_INTEGER?Number(s):s})({audioTimingInfo:e.audioTimingInfo,videoTimingInfo:e.videoTimingInfo}))&&(i=e.playlist.targetDuration,s=tu({segmentDuration:t,maxDuration:2*i}),r=tu({segmentDuration:t,maxDuration:i}),t=`Segment with index ${e.mediaIndex} `+`from playlist ${e.playlist.id} `+`has a duration of ${t} `+`when the reported duration is ${e.duration} `+`and the target duration is ${i}. `+"For HLS content, a duration in excess of the target duration may result in playback issues. See the HLS specification section on EXT-X-TARGETDURATION for more details: https://tools.ietf.org/html/draft-pantos-http-live-streaming-23#section-4.3.3.1",s||r)?{severity:s?"warn":"info",message:t}:null};class su extends T.EventTarget{constructor(e,t=0){if(super(),!e)throw new TypeError("Initialization settings are required");if("function"!=typeof e.currentTime)throw new TypeError("No currentTime getter specified");if(!e.mediaSource)throw new TypeError("No MediaSource specified");this.bandwidth=e.bandwidth,this.throughput={rate:0,count:0},this.roundTrip=NaN,this.resetStats_(),this.mediaIndex=null,this.partIndex=null,this.hasPlayed_=e.hasPlayed,this.currentTime_=e.currentTime,this.seekable_=e.seekable,this.seeking_=e.seeking,this.duration_=e.duration,this.mediaSource_=e.mediaSource,this.vhs_=e.vhs,this.loaderType_=e.loaderType,this.currentMediaInfo_=void 0,this.startingMediaInfo_=void 0,this.segmentMetadataTrack_=e.segmentMetadataTrack,this.goalBufferLength_=e.goalBufferLength,this.sourceType_=e.sourceType,this.sourceUpdater_=e.sourceUpdater,this.inbandTextTracks_=e.inbandTextTracks,this.state_="INIT",this.timelineChangeController_=e.timelineChangeController,this.shouldSaveSegmentTimingInfo_=!0,this.parse708captions_=e.parse708captions,this.useDtsForTimestampOffset_=e.useDtsForTimestampOffset,this.captionServices_=e.captionServices,this.exactManifestTimings=e.exactManifestTimings,this.addMetadataToTextTrack=e.addMetadataToTextTrack,this.checkBufferTimeout_=null,this.error_=void 0,this.currentTimeline_=-1,this.shouldForceTimestampOffsetAfterResync_=!1,this.pendingSegment_=null,this.xhrOptions_=null,this.pendingSegments_=[],this.audioDisabled_=!1,this.isPendingTimestampOffset_=!1,this.gopBuffer_=[],this.timeMapping_=0,this.safeAppend_=!1,this.appendInitSegment_={audio:!0,video:!0},this.playlistOfLastInitSegment_={audio:null,video:null},this.callQueue_=[],this.loadQueue_=[],this.metadataQueue_={id3:[],caption:[]},this.waitingOnRemove_=!1,this.quotaExceededErrorRetryTimeout_=null,this.activeInitSegmentId_=null,this.initSegments_={},this.cacheEncryptionKeys_=e.cacheEncryptionKeys,this.keyCache_={},this.decrypter_=e.decrypter,this.syncController_=e.syncController,this.syncPoint_={segmentIndex:0,time:0},this.transmuxer_=this.createTransmuxer_(),this.triggerSyncInfoUpdate_=()=>this.trigger("syncinfoupdate"),this.syncController_.on("syncinfoupdate",this.triggerSyncInfoUpdate_),this.mediaSource_.addEventListener("sourceopen",()=>{this.isEndOfStream_()||(this.ended_=!1)}),this.fetchAtBuffer_=!1,this.logger_=zl(`SegmentLoader[${this.loaderType_}]`),Object.defineProperty(this,"state",{get(){return this.state_},set(e){e!==this.state_&&(this.logger_(this.state_+" -> "+e),this.state_=e,this.trigger("statechange"))}}),this.sourceUpdater_.on("ready",()=>{this.hasEnoughInfoToAppend_()&&this.processCallQueue_()}),"main"===this.loaderType_&&this.timelineChangeController_.on("pendingtimelinechange",()=>{this.hasEnoughInfoToAppend_()&&this.processCallQueue_()}),"audio"===this.loaderType_&&this.timelineChangeController_.on("timelinechange",()=>{this.hasEnoughInfoToLoad_()&&this.processLoadQueue_(),this.hasEnoughInfoToAppend_()&&this.processCallQueue_()})}get mediaSequenceSync_(){return this.syncController_.getMediaSequenceSync(this.loaderType_)}createTransmuxer_(){return vh({remux:!1,alignGopsAtEnd:this.safeAppend_,keepOriginalTimestamps:!0,parse708captions:this.parse708captions_,captionServices:this.captionServices_})}resetStats_(){this.mediaBytesTransferred=0,this.mediaRequests=0,this.mediaRequestsAborted=0,this.mediaRequestsTimedout=0,this.mediaRequestsErrored=0,this.mediaTransferDuration=0,this.mediaSecondsLoaded=0,this.mediaAppends=0}dispose(){this.trigger("dispose"),this.state="DISPOSED",this.pause(),this.abort_(),this.transmuxer_&&this.transmuxer_.terminate(),this.resetStats_(),this.checkBufferTimeout_&&window.clearTimeout(this.checkBufferTimeout_),this.syncController_&&this.triggerSyncInfoUpdate_&&this.syncController_.off("syncinfoupdate",this.triggerSyncInfoUpdate_),this.off()}setAudio(e){this.audioDisabled_=!e,e?this.appendInitSegment_.audio=!0:this.sourceUpdater_.removeAudio(0,this.duration_())}abort(){"WAITING"!==this.state?this.pendingSegment_&&(this.pendingSegment_=null):(this.abort_(),this.state="READY",this.paused()||this.monitorBuffer_())}abort_(){this.pendingSegment_&&this.pendingSegment_.abortRequests&&this.pendingSegment_.abortRequests(),this.pendingSegment_=null,this.callQueue_=[],this.loadQueue_=[],this.metadataQueue_.id3=[],this.metadataQueue_.caption=[],this.timelineChangeController_.clearPendingTimelineChange(this.loaderType_),this.waitingOnRemove_=!1,window.clearTimeout(this.quotaExceededErrorRetryTimeout_),this.quotaExceededErrorRetryTimeout_=null}checkForAbort_(e){return"APPENDING"!==this.state||this.pendingSegment_?!this.pendingSegment_||this.pendingSegment_.requestId!==e:(this.state="READY",!0)}error(e){return"undefined"!=typeof e&&(this.logger_("error occurred:",e),this.error_=e),this.pendingSegment_=null,this.error_}endOfStream(){this.ended_=!0,this.transmuxer_&&_h(this.transmuxer_),this.gopBuffer_.length=0,this.pause(),this.trigger("ended")}buffered_(){var e=this.getMediaInfo_();if(!this.sourceUpdater_||!e)return Wl();if("main"===this.loaderType_){var{hasAudio:e,hasVideo:t,isMuxed:i}=e;if(t&&e&&!this.audioDisabled_&&!i)return this.sourceUpdater_.buffered();if(t)return this.sourceUpdater_.videoBuffered()}return this.sourceUpdater_.audioBuffered()}initSegmentForMap(e,t=!1){if(!e)return null;var i=Hd(e);let s=this.initSegments_[i];return t&&!s&&e.bytes&&(this.initSegments_[i]=s={resolvedUri:e.resolvedUri,byterange:e.byterange,bytes:e.bytes,tracks:e.tracks,timescales:e.timescales}),s||e}segmentKey(e,t=!1){if(!e)return null;var i=Vd(e);let s=this.keyCache_[i];this.cacheEncryptionKeys_&&t&&!s&&e.bytes&&(this.keyCache_[i]=s={resolvedUri:e.resolvedUri,bytes:e.bytes});t={resolvedUri:(s||e).resolvedUri};return s&&(t.bytes=s.bytes),t}couldBeginLoading_(){return this.playlist_&&!this.paused()}load(){if(this.monitorBuffer_(),this.playlist_)return"INIT"===this.state&&this.couldBeginLoading_()?this.init_():void(!this.couldBeginLoading_()||"READY"!==this.state&&"INIT"!==this.state||(this.state="READY"))}init_(){return this.state="READY",this.resetEverything(),this.monitorBuffer_()}playlist(t,i={}){if(t){var s,r=this.playlist_,n=this.pendingSegment_;this.playlist_=t,this.xhrOptions_=i,"INIT"===this.state&&(t.syncInfo={mediaSequence:t.mediaSequence,time:0},"main"===this.loaderType_)&&this.syncController_.setDateTimeMappingForStart(t);let e=null;if(r&&(r.id?e=r.id:r.uri&&(e=r.uri)),this.logger_(`playlist update [${e} => ${t.id||t.uri}]`),this.mediaSequenceSync_&&(this.mediaSequenceSync_.update(t,this.currentTime_()),this.logger_(`Playlist update:
+currentTime: ${this.currentTime_()}
+bufferedEnd: ${Kl(this.buffered_())}
+`,this.mediaSequenceSync_.diagnostics)),this.trigger("syncinfoupdate"),"INIT"===this.state&&this.couldBeginLoading_())return this.init_();r&&r.uri===t.uri?(i=t.mediaSequence-r.mediaSequence,this.logger_(`live window shift [${i}]`),null!==this.mediaIndex&&(this.mediaIndex-=i,this.mediaIndex<0?(this.mediaIndex=null,this.partIndex=null):(s=this.playlist_.segments[this.mediaIndex],!this.partIndex||s.parts&&s.parts.length&&s.parts[this.partIndex]||(s=this.mediaIndex,this.logger_(`currently processing part (index ${this.partIndex}) no longer exists.`),this.resetLoader(),this.mediaIndex=s))),n&&(n.mediaIndex-=i,n.mediaIndex<0?(n.mediaIndex=null,n.partIndex=null):(0<=n.mediaIndex&&(n.segment=t.segments[n.mediaIndex]),0<=n.partIndex&&n.segment.parts&&(n.part=n.segment.parts[n.partIndex]))),this.syncController_.saveExpiredSegmentInfo(r,t)):(null!==this.mediaIndex&&(!t.endList&&"number"==typeof t.partTargetDuration?this.resetLoader():this.resyncLoader()),this.currentMediaInfo_=void 0,this.trigger("playlistupdate"))}}pause(){this.checkBufferTimeout_&&(window.clearTimeout(this.checkBufferTimeout_),this.checkBufferTimeout_=null)}paused(){return null===this.checkBufferTimeout_}resetEverything(e){this.ended_=!1,this.activeInitSegmentId_=null,this.appendInitSegment_={audio:!0,video:!0},this.resetLoader(),this.remove(0,1/0,e),this.transmuxer_&&(this.transmuxer_.postMessage({action:"clearAllMp4Captions"}),this.transmuxer_.postMessage({action:"reset"}))}resetLoader(){this.fetchAtBuffer_=!1,this.mediaSequenceSync_&&this.mediaSequenceSync_.resetAppendedStatus(),this.resyncLoader()}resyncLoader(){this.transmuxer_&&_h(this.transmuxer_),this.mediaIndex=null,this.partIndex=null,this.syncPoint_=null,this.isPendingTimestampOffset_=!1;var e=this.currentMediaInfo_&&this.currentMediaInfo_.isFmp4;"hls"!==this.sourceType_||e||(this.shouldForceTimestampOffsetAfterResync_=!0),this.callQueue_=[],this.loadQueue_=[],this.metadataQueue_.id3=[],this.metadataQueue_.caption=[],this.abort(),this.transmuxer_&&this.transmuxer_.postMessage({action:"clearParsedMp4Captions"})}remove(t,i,s=()=>{},r=!1){if((i=i===1/0?this.duration_():i)<=t)this.logger_("skipping remove because end ${end} is <= start ${start}");else if(this.sourceUpdater_&&this.getMediaInfo_()){let e=1;var n=()=>{0===--e&&s()};!r&&this.audioDisabled_||(e++,this.sourceUpdater_.removeAudio(t,i,n)),!r&&"main"!==this.loaderType_||(this.gopBuffer_=((t,i,e,s)=>{var r=Math.ceil((i-s)*Hl),n=Math.ceil((e-s)*Hl),i=t.slice();let a=t.length;for(;a--&&!(t[a].pts<=n););if(-1!==a){let e=a+1;for(;e--&&!(t[e].pts<=r););e=Math.max(e,0),i.splice(e,a-e+1)}return i})(this.gopBuffer_,t,i,this.timeMapping_),e++,this.sourceUpdater_.removeVideo(t,i,n));for(const a in this.inbandTextTracks_)Wh(t,i,this.inbandTextTracks_[a]);Wh(t,i,this.segmentMetadataTrack_),n()}else this.logger_("skipping remove because no source updater or starting media info")}monitorBuffer_(){this.checkBufferTimeout_&&window.clearTimeout(this.checkBufferTimeout_),this.checkBufferTimeout_=window.setTimeout(this.monitorBufferTick_.bind(this),1)}monitorBufferTick_(){"READY"===this.state&&this.fillBuffer_(),this.checkBufferTimeout_&&window.clearTimeout(this.checkBufferTimeout_),this.checkBufferTimeout_=window.setTimeout(this.monitorBufferTick_.bind(this),500)}fillBuffer_(){var e;this.sourceUpdater_.updating()||(e=this.chooseNextRequest_())&&("number"==typeof e.timestampOffset&&(this.isPendingTimestampOffset_=!1,this.timelineChangeController_.pendingTimelineChange({type:this.loaderType_,from:this.currentTimeline_,to:e.timeline})),this.loadSegment_(e))}isEndOfStream_(e=this.mediaIndex,t=this.playlist_,i=this.partIndex){var s;return!(!t||!this.mediaSource_)&&(s="number"==typeof e&&t.segments[e],e=e+1===t.segments.length,i=!s||!s.parts||i+1===s.parts.length,t.endList)&&"open"===this.mediaSource_.readyState&&e&&i}chooseNextRequest_(){var e=this.buffered_(),s=Kl(e)||0,e=Yl(e,this.currentTime_()),r=!this.hasPlayed_()&&1<=e,n=e>=this.goalBufferLength_(),t=this.playlist_.segments;if(!t.length||r||n)return null;this.syncPoint_=this.syncPoint_||this.syncController_.getSyncPoint(this.playlist_,this.duration_(),this.currentTimeline_,this.currentTime_(),this.loaderType_);r={partIndex:null,mediaIndex:null,startOfSegment:null,playlist:this.playlist_,isSyncRequest:Boolean(!this.syncPoint_)};if(r.isSyncRequest)r.mediaIndex=function(t,i,s){i=i||[];var r=[];let n=0;for(let e=0;e<i.length;e++){var a=i[e];if(t===a.timeline&&(r.push(e),(n+=a.duration)>s))return e}return 0===r.length?0:r[r.length-1]}(this.currentTimeline_,t,s),this.logger_("choose next request. Can not find sync point. Fallback to media Index: "+r.mediaIndex);else if(null!==this.mediaIndex){var n=t[this.mediaIndex],a="number"==typeof this.partIndex?this.partIndex:-1;r.startOfSegment=n.end||s,n.parts&&n.parts[a+1]?(r.mediaIndex=this.mediaIndex,r.partIndex=a+1):r.mediaIndex=this.mediaIndex+1}else{let e,t,i;n=this.fetchAtBuffer_?s:this.currentTime_();if(this.mediaSequenceSync_&&this.logger_(`chooseNextRequest_ request after Quality Switch:
+For TargetTime: ${n}.
+CurrentTime: ${this.currentTime_()}
+BufferedEnd: ${s}
+Fetch At Buffer: ${this.fetchAtBuffer_}
+`,this.mediaSequenceSync_.diagnostics),this.mediaSequenceSync_&&this.mediaSequenceSync_.isReliable){a=this.getSyncInfoFromMediaSequenceSync_(n);if(!a)return this.logger_("chooseNextRequest_ - no sync info found using media sequence sync"),null;this.logger_(`chooseNextRequest_ mediaSequence syncInfo (${a.start} --> ${a.end})`),e=a.segmentIndex,t=a.partIndex,i=a.start}else{this.logger_("chooseNextRequest_ - fallback to a regular segment selection algorithm, based on a syncPoint.");s=Td.getMediaInfoForTime({exactManifestTimings:this.exactManifestTimings,playlist:this.playlist_,currentTime:n,startingPartIndex:this.syncPoint_.partIndex,startingSegmentIndex:this.syncPoint_.segmentIndex,startTime:this.syncPoint_.time});e=s.segmentIndex,t=s.partIndex,i=s.startTime}r.getMediaInfoForTime=this.fetchAtBuffer_?"bufferedEnd "+n:"currentTime "+n,r.mediaIndex=e,r.startOfSegment=i,r.partIndex=t,this.logger_(`choose next request. Playlist switched and we have a sync point. Media Index: ${r.mediaIndex} `)}a=t[r.mediaIndex];let i=a&&"number"==typeof r.partIndex&&a.parts&&a.parts[r.partIndex];if(!a||"number"==typeof r.partIndex&&!i)return null;"number"!=typeof r.partIndex&&a.parts&&(r.partIndex=0,i=a.parts[0]);s=this.vhs_.playlists&&this.vhs_.playlists.main&&this.vhs_.playlists.main.independentSegments||this.playlist_.independentSegments,e||!i||s||i.independent||(0===r.partIndex?(e=(n=t[r.mediaIndex-1]).parts&&n.parts.length&&n.parts[n.parts.length-1])&&e.independent&&(--r.mediaIndex,r.partIndex=n.parts.length-1,r.independent="previous segment"):a.parts[r.partIndex-1].independent&&(--r.partIndex,r.independent="previous part")),s=this.mediaSource_&&"ended"===this.mediaSource_.readyState;return r.mediaIndex>=t.length-1&&s&&!this.seeking_()?null:(this.shouldForceTimestampOffsetAfterResync_&&(this.shouldForceTimestampOffsetAfterResync_=!1,r.forceTimestampOffset=!0,this.logger_("choose next request. Force timestamp offset after loader resync")),this.generateSegmentInfo_(r))}getSyncInfoFromMediaSequenceSync_(e){var t;return this.mediaSequenceSync_&&(e!==(t=Math.max(e,this.mediaSequenceSync_.start))&&this.logger_(`getSyncInfoFromMediaSequenceSync_. Pulled target time from ${e} to `+t),e=this.mediaSequenceSync_.getSyncInfoForTime(t))?e.isAppended?(t=this.mediaSequenceSync_.getSyncInfoForTime(e.end))?(t.isAppended&&this.logger_("getSyncInfoFromMediaSequenceSync_: We encounter unexpected scenario where next media sequence sync info is also appended!"),t):null:e:null}generateSegmentInfo_(e){var{independent:e,playlist:t,mediaIndex:i,startOfSegment:s,isSyncRequest:r,partIndex:n,forceTimestampOffset:a,getMediaInfoForTime:o}=e,l=t.segments[i],d="number"==typeof n&&l.parts[n],i={requestId:"segment-loader-"+Math.random(),uri:d&&d.resolvedUri||l.resolvedUri,mediaIndex:i,partIndex:d?n:null,isSyncRequest:r,startOfSegment:s,playlist:t,bytes:null,encryptedBytes:null,timestampOffset:null,timeline:l.timeline,duration:d&&d.duration||l.duration,segment:l,part:d,byteLength:0,transmuxer:this.transmuxer_,getMediaInfoForTime:o,independent:e},n="undefined"!=typeof a?a:this.isPendingTimestampOffset_,r=(i.timestampOffset=this.timestampOffsetForSegment_({segmentTimeline:l.timeline,currentTimeline:this.currentTimeline_,startOfSegment:s,buffered:this.buffered_(),overrideCheck:n}),Kl(this.sourceUpdater_.audioBuffered()));return"number"==typeof r&&(i.audioAppendStart=r-this.sourceUpdater_.audioTimestampOffset()),this.sourceUpdater_.videoBuffered().length&&(i.gopsToAlignWith=((e,t,i)=>{if("undefined"==typeof t||null===t||!e.length)return[];var s=Math.ceil((t-i+3)*Hl);let r;for(r=0;r<e.length&&!(e[r].pts>s);r++);return e.slice(r)})(this.gopBuffer_,this.currentTime_()-this.sourceUpdater_.videoTimestampOffset(),this.timeMapping_)),i}timestampOffsetForSegment_(e){return{segmentTimeline:e,currentTimeline:t,startOfSegment:i,buffered:s,overrideCheck:r}=[e][0],r||e!==t?!(e<t)&&s.length?s.end(s.length-1):i:null;var t,i,s,r}earlyAbortWhenNeeded_(t){if(!this.vhs_.tech_.paused()&&this.xhrOptions_.timeout&&this.playlist_.attributes.BANDWIDTH&&!(Date.now()-(t.firstBytesReceivedAt||Date.now())<1e3)){var e=this.currentTime_(),i=t.bandwidth,s=this.pendingSegment_.duration,t=Td.estimateSegmentRequestTime(s,i,this.playlist_,t.bytesReceived),r=([r,n,a=1]=[this.buffered_(),e,this.vhs_.tech_.playbackRate()],((r.length?r.end(r.length-1):0)-n)/a-1);if(!(t<=r)){var n=function(e){const{main:t,currentTime:i,bandwidth:s,duration:r,segmentDuration:n,timeUntilRebuffer:a,currentTimeline:o,syncController:l}=e;e=t.playlists.filter(e=>!Td.isIncompatible(e));let d=e.filter(Td.isEnabled);var e=(d=d.length?d:e.filter(e=>!Td.isDisabled(e))).filter(Td.hasAttribute.bind(null,"BANDWIDTH")).map(e=>{var t=l.getSyncPoint(e,r,o,i)?1:2;return{playlist:e,rebufferingImpact:Td.estimateSegmentRequestTime(n,s,e)*t-a}}),h=e.filter(e=>e.rebufferingImpact<=0);return Hh(h,(e,t)=>Eh(t.playlist,e.playlist)),h.length?h[0]:(Hh(e,(e,t)=>e.rebufferingImpact-t.rebufferingImpact),e[0]||null)}({main:this.vhs_.playlists.main,currentTime:e,bandwidth:i,duration:this.duration_(),segmentDuration:s,timeUntilRebuffer:r,currentTimeline:this.currentTimeline_,syncController:this.syncController_});if(n){var a=t-r-n.rebufferingImpact;let e=.5;r<=Zl&&(e=1),!n.playlist||n.playlist.uri===this.playlist_.uri||a<e||(this.bandwidth=n.playlist.attributes.BANDWIDTH*O.BANDWIDTH_VARIANCE+1,this.trigger("earlyabort"))}}}}handleAbort_(e){this.logger_("Aborting "+Jh(e)),this.mediaRequestsAborted+=1}handleProgress_(e,t){this.earlyAbortWhenNeeded_(t.stats),this.checkForAbort_(t.requestId)||this.trigger("progress")}handleTrackInfo_(e,t){this.earlyAbortWhenNeeded_(e.stats),this.checkForAbort_(e.requestId)||this.checkForIllegalMediaSwitch(t)||(function(t,i){if(!t&&!i||!t&&i||t&&!i)return!1;if(t!==i){var s=Object.keys(t).sort(),r=Object.keys(i).sort();if(s.length!==r.length)return!1;for(let e=0;e<s.length;e++){var n=s[e];if(n!==r[e])return!1;if(t[n]!==i[n])return!1}}return!0}(this.currentMediaInfo_,t=t||{})||(this.appendInitSegment_={audio:!0,video:!0},this.startingMediaInfo_=t,this.currentMediaInfo_=t,this.logger_("trackinfo update",t),this.trigger("trackinfo")),this.checkForAbort_(e.requestId))||(this.pendingSegment_.trackInfo=t,this.hasEnoughInfoToAppend_()&&this.processCallQueue_())}handleTimingInfo_(e,t,i,s){var r;this.earlyAbortWhenNeeded_(e.stats),this.checkForAbort_(e.requestId)||((e=this.pendingSegment_)[r=Zh(t)]=e[r]||{},e[r][i]=s,this.logger_(`timinginfo: ${t} - ${i} - `+s),this.hasEnoughInfoToAppend_()&&this.processCallQueue_())}handleCaptions_(e,t){if(this.earlyAbortWhenNeeded_(e.stats),!this.checkForAbort_(e.requestId))if(0===t.length)this.logger_("SegmentLoader received no captions from a caption event");else if(this.pendingSegment_.hasAppendedData_){const c=null===this.sourceUpdater_.videoTimestampOffset()?this.sourceUpdater_.audioTimestampOffset():this.sourceUpdater_.videoTimestampOffset(),p={};t.forEach(e=>{p[e.stream]=p[e.stream]||{startTime:1/0,captions:[],endTime:0};var t=p[e.stream];t.startTime=Math.min(t.startTime,e.startTime+c),t.endTime=Math.max(t.endTime,e.endTime+c),t.captions.push(e)}),Object.keys(p).forEach(e=>{var{startTime:t,endTime:i,captions:s}=p[e],r=this.inbandTextTracks_,n=(this.logger_(`adding cues from ${t} -> ${i} for `+e),r),a=this.vhs_.tech_,o=e;if(!n[o]){a.trigger({type:"usage",name:"vhs-608"});let s=o;/^cc708_/.test(o)&&(s="SERVICE"+o.split("_")[1]);var l=a.textTracks().getTrackById(s);if(l)n[o]=l;else{let e=o,t=o,i=!1;l=(a.options_.vhs&&a.options_.vhs.captionServices||{})[s];l&&(e=l.label,t=l.language,i=l.default),n[o]=a.addRemoteTextTrack({kind:"captions",id:s,default:i,label:e,language:t},!1).track}}Wh(t,i,r[e]);var{inbandTextTracks:d,captionArray:l,timestampOffset:h}={captionArray:s,inbandTextTracks:r,timestampOffset:c};if(l){const u=window.WebKitDataCue||window.VTTCue;l.forEach(i=>{const s=i.stream;i.content?i.content.forEach(e=>{var t=new u(i.startTime+h,i.endTime+h,e.text);t.line=e.line,t.align="left",t.position=e.position,t.positionAlign="line-left",d[s].addCue(t)}):d[s].addCue(new u(i.startTime+h,i.endTime+h,i.text))})}}),this.transmuxer_&&this.transmuxer_.postMessage({action:"clearParsedMp4Captions"})}else this.metadataQueue_.caption.push(this.handleCaptions_.bind(this,e,t))}handleId3_(e,t,i){this.earlyAbortWhenNeeded_(e.stats),this.checkForAbort_(e.requestId)||(this.pendingSegment_.hasAppendedData_?this.addMetadataToTextTrack(i,t,this.duration_()):this.metadataQueue_.id3.push(this.handleId3_.bind(this,e,t,i)))}processMetadataQueue_(){this.metadataQueue_.id3.forEach(e=>e()),this.metadataQueue_.caption.forEach(e=>e()),this.metadataQueue_.id3=[],this.metadataQueue_.caption=[]}processCallQueue_(){var e=this.callQueue_;this.callQueue_=[],e.forEach(e=>e())}processLoadQueue_(){var e=this.loadQueue_;this.loadQueue_=[],e.forEach(e=>e())}hasEnoughInfoToLoad_(){var e;return"audio"!==this.loaderType_||!(!(e=this.pendingSegment_)||this.getCurrentMediaInfo_()&&eu({timelineChangeController:this.timelineChangeController_,currentTimeline:this.currentTimeline_,segmentTimeline:e.timeline,loaderType:this.loaderType_,audioDisabled:this.audioDisabled_}))}getCurrentMediaInfo_(e=this.pendingSegment_){return e&&e.trackInfo||this.currentMediaInfo_}getMediaInfo_(e=this.pendingSegment_){return this.getCurrentMediaInfo_(e)||this.startingMediaInfo_}getPendingSegmentPlaylist(){return this.pendingSegment_?this.pendingSegment_.playlist:null}hasEnoughInfoToAppend_(){var e,t,i,s;return!!this.sourceUpdater_.ready()&&!(this.waitingOnRemove_||this.quotaExceededErrorRetryTimeout_||(e=this.pendingSegment_,t=this.getCurrentMediaInfo_(),!e)||!t||({hasAudio:t,hasVideo:i,isMuxed:s}=t,i&&!e.videoTimingInfo)||t&&!this.audioDisabled_&&!s&&!e.audioTimingInfo||eu({timelineChangeController:this.timelineChangeController_,currentTimeline:this.currentTimeline_,segmentTimeline:e.timeline,loaderType:this.loaderType_,audioDisabled:this.audioDisabled_}))}handleData_(t,e){if(this.earlyAbortWhenNeeded_(t.stats),!this.checkForAbort_(t.requestId))if(this.callQueue_.length||!this.hasEnoughInfoToAppend_())this.callQueue_.push(this.handleData_.bind(this,t,e));else{var i=this.pendingSegment_;if(this.setTimeMapping_(i.timeline),this.updateMediaSecondsLoaded_(i.part||i.segment),"closed"!==this.mediaSource_.readyState){if(t.map&&(t.map=this.initSegmentForMap(t.map,!0),i.segment.map=t.map),t.key&&this.segmentKey(t.key,!0),i.isFmp4=t.isFmp4,i.timingInfo=i.timingInfo||{},i.isFmp4)this.trigger("fmp4"),i.timingInfo.start=i[Zh(e.type)].start;else{t=this.getCurrentMediaInfo_(),t="main"===this.loaderType_&&t&&t.hasVideo;let e;t&&(e=i.videoTimingInfo.start),i.timingInfo.start=this.trueSegmentStart_({currentStart:i.timingInfo.start,playlist:i.playlist,mediaIndex:i.mediaIndex,currentVideoTimestampOffset:this.sourceUpdater_.videoTimestampOffset(),useVideoTimingInfo:t,firstVideoFrameTimeForData:e,videoTimingInfo:i.videoTimingInfo,audioTimingInfo:i.audioTimingInfo})}if(this.updateAppendInitSegmentStatus(i,e.type),this.updateSourceBufferTimestampOffset_(i),i.isSyncRequest){this.updateTimingInfoEnd_(i),this.syncController_.saveSegmentTimingInfo({segmentInfo:i,shouldSaveTimelineMapping:"main"===this.loaderType_});t=this.chooseNextRequest_();if(t.mediaIndex!==i.mediaIndex||t.partIndex!==i.partIndex)return void this.logger_("sync segment was incorrect, not appending");this.logger_("sync segment was correct, appending")}i.hasAppendedData_=!0,this.processMetadataQueue_(),this.appendData_(i,e)}}}updateAppendInitSegmentStatus(e,t){"main"!==this.loaderType_||"number"!=typeof e.timestampOffset||e.changedTimestampOffset||(this.appendInitSegment_={audio:!0,video:!0}),this.playlistOfLastInitSegment_[t]!==e.playlist&&(this.appendInitSegment_[t]=!0)}getInitSegmentAndUpdateState_({type:e,initSegment:t,map:i,playlist:s}){if(i){var r=Hd(i);if(this.activeInitSegmentId_===r)return null;t=this.initSegmentForMap(i,!0).bytes,this.activeInitSegmentId_=r}return t&&this.appendInitSegment_[e]?(this.playlistOfLastInitSegment_[e]=s,this.appendInitSegment_[e]=!1,this.activeInitSegmentId_=null,t):null}handleQuotaExceededError_({segmentInfo:e,type:t,bytes:i},s){var r=this.sourceUpdater_.audioBuffered(),n=this.sourceUpdater_.videoBuffered(),a=(1<r.length&&this.logger_("On QUOTA_EXCEEDED_ERR, found gaps in the audio buffer: "+sd(r).join(", ")),1<n.length&&this.logger_("On QUOTA_EXCEEDED_ERR, found gaps in the video buffer: "+sd(n).join(", ")),r.length?r.start(0):0),o=r.length?r.end(r.length-1):0,l=n.length?n.start(0):0,d=n.length?n.end(n.length-1):0;o-a<=1&&d-l<=1?(this.logger_("On QUOTA_EXCEEDED_ERR, single segment too large to append to buffer, triggering an error. "+`Appended byte length: ${i.byteLength}, `+`audio buffer: ${sd(r).join(", ")}, `+`video buffer: ${sd(n).join(", ")}, `),this.error({message:"Quota exceeded error with append of a single segment of content",excludeUntil:1/0,metadata:{errorType:T.Error.SegmentExceedsSourceBufferQuota}}),this.trigger("error")):(this.waitingOnRemove_=!0,this.callQueue_.push(this.appendToSourceBuffer_.bind(this,{segmentInfo:e,type:t,bytes:i})),o=this.currentTime_()-1,this.logger_("On QUOTA_EXCEEDED_ERR, removing audio/video from 0 to "+o),this.remove(0,o,()=>{this.logger_("On QUOTA_EXCEEDED_ERR, retrying append in 1s"),this.waitingOnRemove_=!1,this.quotaExceededErrorRetryTimeout_=window.setTimeout(()=>{this.logger_("On QUOTA_EXCEEDED_ERR, re-processing call queue"),this.quotaExceededErrorRetryTimeout_=null,this.processCallQueue_()},1e3)},!0))}handleAppendError_({segmentInfo:e,type:t,bytes:i},s){s&&(22===s.code?this.handleQuotaExceededError_({segmentInfo:e,type:t,bytes:i}):(this.logger_("Received non QUOTA_EXCEEDED_ERR on append",s),this.error({message:`${t} append of ${i.length}b failed for segment `+`#${e.mediaIndex} in playlist `+e.playlist.id,metadata:{errorType:T.Error.SegmentAppendError}}),this.trigger("appenderror")))}appendToSourceBuffer_({segmentInfo:e,type:t,initSegment:i,data:s,bytes:r}){if(!r){var n=[s];let e=s.byteLength;i&&(n.unshift(i),e+=i.byteLength),r=(e=>{let t=0,i;return e.bytes&&(i=new Uint8Array(e.bytes),e.segments.forEach(e=>{i.set(e,t),t+=e.byteLength})),i})({bytes:e,segments:n})}this.sourceUpdater_.appendBuffer({segmentInfo:e,type:t,bytes:r},this.handleAppendError_.bind(this,{segmentInfo:e,type:t,bytes:r}))}handleSegmentTimingInfo_(e,t,i){this.pendingSegment_&&t===this.pendingSegment_.requestId&&((t=this.pendingSegment_.segment)[e=e+"TimingInfo"]||(t[e]={}),t[e].transmuxerPrependedSeconds=i.prependedContentDuration||0,t[e].transmuxedPresentationStart=i.start.presentation,t[e].transmuxedDecodeStart=i.start.decode,t[e].transmuxedPresentationEnd=i.end.presentation,t[e].transmuxedDecodeEnd=i.end.decode,t[e].baseMediaDecodeTime=i.baseMediaDecodeTime)}appendData_(e,t){var{type:i,data:s}=t;s&&s.byteLength&&("audio"===i&&this.audioDisabled_||(t=this.getInitSegmentAndUpdateState_({type:i,initSegment:t.initSegment,playlist:e.playlist,map:e.isFmp4?e.segment.map:null}),this.appendToSourceBuffer_({segmentInfo:e,type:i,initSegment:t,data:s})))}loadSegment_(t){this.state="WAITING",this.pendingSegment_=t,this.trimBackBuffer_(t),"number"==typeof t.timestampOffset&&this.transmuxer_&&this.transmuxer_.postMessage({action:"clearAllMp4Captions"}),this.hasEnoughInfoToLoad_()?this.updateTransmuxerAndRequestSegment_(t):this.loadQueue_.push(()=>{var e=bi({},t,{forceTimestampOffset:!0});bi(t,this.generateSegmentInfo_(e)),this.isPendingTimestampOffset_=!1,this.updateTransmuxerAndRequestSegment_(t)})}updateTransmuxerAndRequestSegment_(s){this.shouldUpdateTransmuxerTimestampOffset_(s.timestampOffset)&&(this.gopBuffer_.length=0,s.gopsToAlignWith=[],this.timeMapping_=0,this.transmuxer_.postMessage({action:"reset"}),this.transmuxer_.postMessage({action:"setTimestampOffset",timestampOffset:s.timestampOffset}));var e=this.createSimplifiedSegmentObj_(s),t=this.isEndOfStream_(s.mediaIndex,s.playlist,s.partIndex),i=null!==this.mediaIndex,r=s.timeline!==this.currentTimeline_&&0<s.timeline,t=t||i&&r;this.logger_(`Requesting
+${zh(s.uri)}
+`+Jh(s)),e.map&&!e.map.bytes&&(this.logger_("going to request init segment."),this.appendInitSegment_={video:!0,audio:!0}),s.abortRequests=Mh({xhr:this.vhs_.xhr,xhrOptions:this.xhrOptions_,decryptionWorker:this.decrypter_,segment:e,abortFn:this.handleAbort_.bind(this,s),progressFn:this.handleProgress_.bind(this),trackInfoFn:this.handleTrackInfo_.bind(this),timingInfoFn:this.handleTimingInfo_.bind(this),videoSegmentTimingInfoFn:this.handleSegmentTimingInfo_.bind(this,"video",s.requestId),audioSegmentTimingInfoFn:this.handleSegmentTimingInfo_.bind(this,"audio",s.requestId),captionsFn:this.handleCaptions_.bind(this),isEndOfTimeline:t,endedTimelineFn:()=>{this.logger_("received endedtimeline callback")},id3Fn:this.handleId3_.bind(this),dataFn:this.handleData_.bind(this),doneFn:this.segmentRequestFinished_.bind(this),onTransmuxerLog:({message:e,level:t,stream:i})=>{this.logger_(Jh(s)+` logged from transmuxer stream ${i} as a ${t}: `+e)}})}trimBackBuffer_(e){var t=((e,t,i)=>{let s=t-O.BACK_BUFFER_LENGTH;return e.length&&(s=Math.max(s,e.start(0))),Math.min(t-i,s)})(this.seekable_(),this.currentTime_(),this.playlist_.targetDuration||10);0<t&&this.remove(0,t)}createSimplifiedSegmentObj_(e){var t=e.segment,i=e.part,i={resolvedUri:(i||t).resolvedUri,byterange:(i||t).byterange,requestId:e.requestId,transmuxer:e.transmuxer,audioAppendStart:e.audioAppendStart,gopsToAlignWith:e.gopsToAlignWith,part:e.part},s=e.playlist.segments[e.mediaIndex-1];return s&&s.timeline===t.timeline&&(s.videoTimingInfo?i.baseStartTime=s.videoTimingInfo.transmuxedDecodeEnd:s.audioTimingInfo&&(i.baseStartTime=s.audioTimingInfo.transmuxedDecodeEnd)),t.key&&(s=t.key.iv||new Uint32Array([0,0,0,e.mediaIndex+e.playlist.mediaSequence]),i.key=this.segmentKey(t.key),i.key.iv=s),t.map&&(i.map=this.initSegmentForMap(t.map)),i}saveTransferStats_(e){this.mediaRequests+=1,e&&(this.mediaBytesTransferred+=e.bytesReceived,this.mediaTransferDuration+=e.roundTripTime)}saveBandwidthRelatedStats_(e,t){this.pendingSegment_.byteLength=t.bytesReceived,e<1/60?this.logger_("Ignoring segment's bandwidth because its duration of "+e+" is less than the min to record "+1/60):(this.bandwidth=t.bandwidth,this.roundTrip=t.roundTripTime)}handleTimeout_(){this.mediaRequestsTimedout+=1,this.bandwidth=1,this.roundTrip=NaN,this.trigger("bandwidthupdate"),this.trigger("timeout")}segmentRequestFinished_(e,t,i){if(this.callQueue_.length)this.callQueue_.push(this.segmentRequestFinished_.bind(this,e,t,i));else if(this.saveTransferStats_(t.stats),this.pendingSegment_&&t.requestId===this.pendingSegment_.requestId){if(e)return this.pendingSegment_=null,this.state="READY",e.code===Ch.ABORTED?void 0:(this.pause(),e.code===Ch.TIMEOUT?void this.handleTimeout_():(this.mediaRequestsErrored+=1,this.error(e),void this.trigger("error")));e=this.pendingSegment_;this.saveBandwidthRelatedStats_(e.duration,t.stats),e.endOfAllRequests=t.endOfAllRequests,i.gopInfo&&(this.gopBuffer_=((e,t,i)=>{if(!t.length)return e;if(i)return t.slice();var s=t[0].pts;let r=0;for(r;r<e.length&&!(e[r].pts>=s);r++);return e.slice(0,r).concat(t)})(this.gopBuffer_,i.gopInfo,this.safeAppend_)),this.state="APPENDING",this.trigger("appending"),this.waitForAppendsToComplete_(e)}}setTimeMapping_(e){e=this.syncController_.mappingForTimeline(e);null!==e&&(this.timeMapping_=e)}updateMediaSecondsLoaded_(e){"number"==typeof e.start&&"number"==typeof e.end?this.mediaSecondsLoaded+=e.end-e.start:this.mediaSecondsLoaded+=e.duration}shouldUpdateTransmuxerTimestampOffset_(e){return null!==e&&("main"===this.loaderType_&&e!==this.sourceUpdater_.videoTimestampOffset()||!this.audioDisabled_&&e!==this.sourceUpdater_.audioTimestampOffset())}trueSegmentStart_({currentStart:e,playlist:t,mediaIndex:i,firstVideoFrameTimeForData:s,currentVideoTimestampOffset:r,useVideoTimingInfo:n,videoTimingInfo:a,audioTimingInfo:o}){return"undefined"!=typeof e?e:n?(e=t.segments[i-1],0!==i&&e&&"undefined"!=typeof e.start&&e.end===s+r?a.start:s):o.start}waitForAppendsToComplete_(e){var t,i,s=this.getCurrentMediaInfo_(e);s?({hasAudio:s,hasVideo:i,isMuxed:t}=s,i="main"===this.loaderType_&&i,s=!this.audioDisabled_&&s&&!t,e.waitingOnAppends=0,e.hasAppendedData_?(i&&e.waitingOnAppends++,s&&e.waitingOnAppends++,i&&this.sourceUpdater_.videoQueueCallback(this.checkAppendsDone_.bind(this,e)),s&&this.sourceUpdater_.audioQueueCallback(this.checkAppendsDone_.bind(this,e))):(e.timingInfo||"number"!=typeof e.timestampOffset||(this.isPendingTimestampOffset_=!0),e.timingInfo={start:0},e.waitingOnAppends++,this.isPendingTimestampOffset_||(this.updateSourceBufferTimestampOffset_(e),this.processMetadataQueue_()),this.checkAppendsDone_(e))):(this.error({message:"No starting media returned, likely due to an unsupported media format.",playlistExclusionDuration:1/0,metadata:{errorType:T.Error.SegmentUnsupportedMediaFormat}}),this.trigger("error"))}checkAppendsDone_(e){this.checkForAbort_(e.requestId)||(e.waitingOnAppends--,0===e.waitingOnAppends&&this.handleAppendsDone_())}checkForIllegalMediaSwitch(e){i=this.loaderType_,t=this.getCurrentMediaInfo_(),e=e;var t,i="main"===i&&t&&e?e.hasAudio||e.hasVideo?t.hasVideo&&!e.hasVideo?"Only audio found in segment when we expected video. We can't switch to audio only from a stream that had video. To get rid of this message, please add codec information to the manifest.":!t.hasVideo&&e.hasVideo?"Video found in segment when we expected only audio. We can't switch to a stream with video from an audio only stream. To get rid of this message, please add codec information to the manifest.":null:"Neither audio nor video found in segment.":null;return!!i&&(this.error({message:i,playlistExclusionDuration:1/0,metadata:{errorType:T.Error.SegmentSwitchError}}),this.trigger("error"),!0)}updateSourceBufferTimestampOffset_(t){if(null!==t.timestampOffset&&"number"==typeof t.timingInfo.start&&!t.changedTimestampOffset&&"main"===this.loaderType_){let e=!1;t.timestampOffset-=this.getSegmentStartTimeForTimestampOffsetCalculation_({videoTimingInfo:t.segment.videoTimingInfo,audioTimingInfo:t.segment.audioTimingInfo,timingInfo:t.timingInfo}),t.changedTimestampOffset=!0,t.timestampOffset!==this.sourceUpdater_.videoTimestampOffset()&&(this.sourceUpdater_.videoTimestampOffset(t.timestampOffset),e=!0),t.timestampOffset!==this.sourceUpdater_.audioTimestampOffset()&&(this.sourceUpdater_.audioTimestampOffset(t.timestampOffset),e=!0),e&&this.trigger("timestampoffset")}}getSegmentStartTimeForTimestampOffsetCalculation_({videoTimingInfo:e,audioTimingInfo:t,timingInfo:i}){return this.useDtsForTimestampOffset_?e&&"number"==typeof e.transmuxedDecodeStart?e.transmuxedDecodeStart:t&&"number"==typeof t.transmuxedDecodeStart?t.transmuxedDecodeStart:i.start:i.start}updateTimingInfoEnd_(e){e.timingInfo=e.timingInfo||{};var t=this.getMediaInfo_(),t="main"===this.loaderType_&&t&&t.hasVideo&&e.videoTimingInfo?e.videoTimingInfo:e.audioTimingInfo;t&&(e.timingInfo.end="number"==typeof t.end?t.end:t.start+e.duration)}handleAppendsDone_(){var e,t,i;this.pendingSegment_&&this.trigger("appendsdone"),this.pendingSegment_?((e=this.pendingSegment_).part&&e.part.syncInfo?e.part.syncInfo.markAppended():e.segment.syncInfo&&e.segment.syncInfo.markAppended(),this.updateTimingInfoEnd_(e),this.shouldSaveSegmentTimingInfo_&&this.syncController_.saveSegmentTimingInfo({segmentInfo:e,shouldSaveTimelineMapping:"main"===this.loaderType_}),(t=iu(e,this.sourceType_))&&("warn"===t.severity?T.log.warn(t.message):this.logger_(t.message)),this.recordThroughput_(e),this.pendingSegment_=null,this.state="READY",e.isSyncRequest&&(this.trigger("syncinfoupdate"),!e.hasAppendedData_)?this.logger_("Throwing away un-appended sync request "+Jh(e)):(this.logger_("Appended "+Jh(e)),this.addSegmentMetadataCue_(e),this.fetchAtBuffer_=!0,this.currentTimeline_!==e.timeline&&(this.timelineChangeController_.lastTimelineChange({type:this.loaderType_,from:this.currentTimeline_,to:e.timeline}),"main"!==this.loaderType_||this.audioDisabled_||this.timelineChangeController_.lastTimelineChange({type:"audio",from:this.currentTimeline_,to:e.timeline})),this.currentTimeline_=e.timeline,this.trigger("syncinfoupdate"),t=e.segment,i=e.part,t=t.end&&this.currentTime_()-t.end>3*e.playlist.targetDuration,i=i&&i.end&&this.currentTime_()-i.end>3*e.playlist.partTargetDuration,t||i?(this.logger_(`bad ${t?"segment":"part"} `+Jh(e)),this.resetEverything()):(null!==this.mediaIndex&&this.trigger("bandwidthupdate"),this.trigger("progress"),this.mediaIndex=e.mediaIndex,this.partIndex=e.partIndex,this.isEndOfStream_(e.mediaIndex,e.playlist,e.partIndex)&&this.endOfStream(),this.trigger("appended"),e.hasAppendedData_&&this.mediaAppends++,this.paused()||this.monitorBuffer_()))):(this.state="READY",this.paused()||this.monitorBuffer_())}recordThroughput_(e){var t,i;e.duration<1/60?this.logger_("Ignoring segment's throughput because its duration of "+e.duration+" is less than the min to record "+1/60):(t=this.throughput.rate,i=Date.now()-e.endOfAllRequests+1,e=Math.floor(e.byteLength/i*8*1e3),this.throughput.rate+=(e-t)/++this.throughput.count)}addSegmentMetadataCue_(e){var t,i,s,r;this.segmentMetadataTrack_&&(t=(r=e.segment).start,i=r.end,Qh(t))&&Qh(i)&&(Wh(t,i,this.segmentMetadataTrack_),s=window.WebKitDataCue||window.VTTCue,r={custom:r.custom,dateTimeObject:r.dateTimeObject,dateTimeString:r.dateTimeString,programDateTime:r.programDateTime,bandwidth:e.playlist.attributes.BANDWIDTH,resolution:e.playlist.attributes.RESOLUTION,codecs:e.playlist.attributes.CODECS,byteLength:e.byteLength,uri:e.uri,timeline:e.timeline,playlist:e.playlist.id,start:t,end:i},(e=new s(t,i,JSON.stringify(r))).value=r,this.segmentMetadataTrack_.addCue(e))}}function ru(){}function nu(e){return"string"!=typeof e?e:e.replace(/./,e=>e.toUpperCase())}const au=["video","audio"],ou=(e,t)=>{var i=t[e+"Buffer"];return i&&i.updating||t.queuePending[e]},lu=(i,s)=>{if(0!==s.queue.length){let e=0,t=s.queue[e];if("mediaSource"===t.type)s.updating()||"closed"===s.mediaSource.readyState||(s.queue.shift(),t.action(s),t.doneFn&&t.doneFn(),lu("audio",s),lu("video",s));else if("mediaSource"!==i&&s.ready()&&"closed"!==s.mediaSource.readyState&&!ou(i,s)){if(t.type!==i){if(null===(e=((t,i)=>{for(let e=0;e<i.length;e++){var s=i[e];if("mediaSource"===s.type)return null;if(s.type===t)return e}return null})(i,s.queue)))return;t=s.queue[e]}s.queue.splice(e,1),(s.queuePending[i]=t).action(i,s),t.doneFn||(s.queuePending[i]=null,lu(i,s))}}},du=(e,t)=>{var i=t[e+"Buffer"],s=nu(e);i&&(i.removeEventListener("updateend",t[`on${s}UpdateEnd_`]),i.removeEventListener("error",t[`on${s}Error_`]),t.codecs[e]=null,t[e+"Buffer"]=null)},hu=(e,t)=>e&&t&&-1!==Array.prototype.indexOf.call(e.sourceBuffers,t),uu={appendBuffer:(s,r,n)=>(t,i)=>{var e=i[t+"Buffer"];if(hu(i.mediaSource,e)){i.logger_(`Appending segment ${r.mediaIndex}'s ${s.length} bytes to ${t}Buffer`);try{e.appendBuffer(s)}catch(e){i.logger_(`Error with code ${e.code} `+(22===e.code?"(QUOTA_EXCEEDED_ERR) ":"")+`when appending segment ${r.mediaIndex} to ${t}Buffer`),i.queuePending[t]=null,n(e)}}},remove:(s,r)=>(t,i)=>{var e=i[t+"Buffer"];if(hu(i.mediaSource,e)){i.logger_(`Removing ${s} to ${r} from ${t}Buffer`);try{e.remove(s,r)}catch(e){i.logger_(`Remove ${s} to ${r} from ${t}Buffer failed`)}}},timestampOffset:s=>(e,t)=>{var i=t[e+"Buffer"];hu(t.mediaSource,i)&&(t.logger_(`Setting ${e}timestampOffset to `+s),i.timestampOffset=s)},callback:i=>(e,t)=>{i()},endOfStream:t=>e=>{if("open"===e.mediaSource.readyState){e.logger_(`Calling mediaSource endOfStream(${t||""})`);try{e.mediaSource.endOfStream(t)}catch(e){T.log.warn("Failed to call media source endOfStream",e)}}},duration:t=>e=>{e.logger_("Setting mediaSource duration to "+t);try{e.mediaSource.duration=t}catch(e){T.log.warn("Failed to set media source duration",e)}},abort:()=>(t,e)=>{if("open"===e.mediaSource.readyState){var i=e[t+"Buffer"];if(hu(e.mediaSource,i)){e.logger_(`calling abort on ${t}Buffer`);try{i.abort()}catch(e){T.log.warn(`Failed to abort on ${t}Buffer`,e)}}}},addSourceBuffer:(s,r)=>e=>{var t=nu(s),i=zn(r),i=(e.logger_(`Adding ${s}Buffer with codec ${r} to mediaSource`),e.mediaSource.addSourceBuffer(i));i.addEventListener("updateend",e[`on${t}UpdateEnd_`]),i.addEventListener("error",e[`on${t}Error_`]),e.codecs[s]=r,e[s+"Buffer"]=i},removeSourceBuffer:i=>e=>{var t=e[i+"Buffer"];if(du(i,e),hu(e.mediaSource,t)){e.logger_(`Removing ${i}Buffer with codec ${e.codecs[i]} from mediaSource`);try{e.mediaSource.removeSourceBuffer(t)}catch(e){T.log.warn(`Failed to removeSourceBuffer ${i}Buffer`,e)}}},changeType:a=>(t,e)=>{var i=e[t+"Buffer"],s=zn(a);if(hu(e.mediaSource,i)){var r=a.substring(0,a.indexOf(".")),n=e.codecs[t],n=n.substring(0,n.indexOf("."));if(n!==r){e.logger_(`changing ${t}Buffer codec from ${e.codecs[t]} to `+a);try{i.changeType(s),e.codecs[t]=a}catch(e){T.log.warn(`Failed to changeType on ${t}Buffer`,e)}}}}},cu=({type:e,sourceUpdater:t,action:i,doneFn:s,name:r})=>{t.queue.push({type:e,action:i,doneFn:s,name:r}),lu(e,t)},pu=(i,s)=>e=>{var t=function(t){if(0===t.length)return"Buffered Ranges are empty";let i="Buffered Ranges: \n";for(let e=0;e<t.length;e++){var s=t.start(e),r=t.end(e);i+=s+` --> ${r}. Duration (${r-s})
+`}return i}(s[i+"Buffered"]());s.logger_(`received "updateend" event for ${i} Source Buffer: `,t),s.queuePending[i]&&(t=s.queuePending[i].doneFn,s.queuePending[i]=null,t)&&t(s[i+"Error_"]),lu(i,s)};class mu extends T.EventTarget{constructor(e){super(),this.mediaSource=e,this.sourceopenListener_=()=>lu("mediaSource",this),this.mediaSource.addEventListener("sourceopen",this.sourceopenListener_),this.logger_=zl("SourceUpdater"),this.audioTimestampOffset_=0,this.videoTimestampOffset_=0,this.queue=[],this.queuePending={audio:null,video:null},this.delayedAudioAppendQueue_=[],this.videoAppendQueued_=!1,this.codecs={},this.onVideoUpdateEnd_=pu("video",this),this.onAudioUpdateEnd_=pu("audio",this),this.onVideoError_=e=>{this.videoError_=e},this.onAudioError_=e=>{this.audioError_=e},this.createdSourceBuffers_=!1,this.initializedEme_=!1,this.triggeredReady_=!1}initializedEme(){this.initializedEme_=!0,this.triggerReady()}hasCreatedSourceBuffers(){return this.createdSourceBuffers_}hasInitializedAnyEme(){return this.initializedEme_}ready(){return this.hasCreatedSourceBuffers()&&this.hasInitializedAnyEme()}createSourceBuffers(e){this.hasCreatedSourceBuffers()||(this.addOrChangeSourceBuffers(e),this.createdSourceBuffers_=!0,this.trigger("createdsourcebuffers"),this.triggerReady())}triggerReady(){this.ready()&&!this.triggeredReady_&&(this.triggeredReady_=!0,this.trigger("ready"))}addSourceBuffer(e,t){cu({type:"mediaSource",sourceUpdater:this,action:uu.addSourceBuffer(e,t),name:"addSourceBuffer"})}abort(e){cu({type:e,sourceUpdater:this,action:uu.abort(e),name:"abort"})}removeSourceBuffer(e){this.canRemoveSourceBuffer()?cu({type:"mediaSource",sourceUpdater:this,action:uu.removeSourceBuffer(e),name:"removeSourceBuffer"}):T.log.error("removeSourceBuffer is not supported!")}canRemoveSourceBuffer(){return!T.browser.IS_FIREFOX&&window.MediaSource&&window.MediaSource.prototype&&"function"==typeof window.MediaSource.prototype.removeSourceBuffer}static canChangeType(){return window.SourceBuffer&&window.SourceBuffer.prototype&&"function"==typeof window.SourceBuffer.prototype.changeType}canChangeType(){return this.constructor.canChangeType()}changeType(e,t){this.canChangeType()?cu({type:e,sourceUpdater:this,action:uu.changeType(t),name:"changeType"}):T.log.error("changeType is not supported!")}addOrChangeSourceBuffers(i){if(!i||"object"!=typeof i||0===Object.keys(i).length)throw new Error("Cannot addOrChangeSourceBuffers to undefined codecs");Object.keys(i).forEach(e=>{var t=i[e];if(!this.hasCreatedSourceBuffers())return this.addSourceBuffer(e,t);this.canChangeType()&&this.changeType(e,t)})}appendBuffer(e,t){var{segmentInfo:i,type:s,bytes:r}=e;this.processedAppend_=!0,"audio"===s&&this.videoBuffer&&!this.videoAppendQueued_?(this.delayedAudioAppendQueue_.push([e,t]),this.logger_(`delayed audio append of ${r.length} until video append`)):(e=t,cu({type:s,sourceUpdater:this,action:uu.appendBuffer(r,i||{mediaIndex:-1},e),doneFn:t,name:"appendBuffer"}),"video"===s&&(this.videoAppendQueued_=!0,this.delayedAudioAppendQueue_.length)&&(r=this.delayedAudioAppendQueue_.slice(),this.logger_(`queuing delayed audio ${r.length} appendBuffers`),this.delayedAudioAppendQueue_.length=0,r.forEach(e=>{this.appendBuffer.apply(this,e)})))}audioBuffered(){return hu(this.mediaSource,this.audioBuffer)&&this.audioBuffer.buffered||Wl()}videoBuffered(){return hu(this.mediaSource,this.videoBuffer)&&this.videoBuffer.buffered||Wl()}buffered(){var e=hu(this.mediaSource,this.videoBuffer)?this.videoBuffer:null,t=hu(this.mediaSource,this.audioBuffer)?this.audioBuffer:null;if(t&&!e)return this.audioBuffered();if(e&&!t)return this.videoBuffered();{var r=this.audioBuffered();var n=this.videoBuffered();let e=null,t=null,i=0;var a=[],o=[];if(!(r&&r.length&&n&&n.length))return Wl();let s=r.length;for(;s--;)a.push({time:r.start(s),type:"start"}),a.push({time:r.end(s),type:"end"});for(s=n.length;s--;)a.push({time:n.start(s),type:"start"}),a.push({time:n.end(s),type:"end"});for(a.sort(function(e,t){return e.time-t.time}),s=0;s<a.length;s++)"start"===a[s].type?2===++i&&(e=a[s].time):"end"===a[s].type&&1===--i&&(t=a[s].time),null!==e&&null!==t&&(o.push([e,t]),e=null,t=null);return Wl(o);return}}setDuration(e,t=ru){cu({type:"mediaSource",sourceUpdater:this,action:uu.duration(e),name:"duration",doneFn:t})}endOfStream(e=null,t=ru){"string"!=typeof e&&(e=void 0),cu({type:"mediaSource",sourceUpdater:this,action:uu.endOfStream(e),name:"endOfStream",doneFn:t})}removeAudio(e,t,i=ru){this.audioBuffered().length&&0!==this.audioBuffered().end(0)?cu({type:"audio",sourceUpdater:this,action:uu.remove(e,t),doneFn:i,name:"remove"}):i()}removeVideo(e,t,i=ru){this.videoBuffered().length&&0!==this.videoBuffered().end(0)?cu({type:"video",sourceUpdater:this,action:uu.remove(e,t),doneFn:i,name:"remove"}):i()}updating(){return!(!ou("audio",this)&&!ou("video",this))}audioTimestampOffset(e){return"undefined"!=typeof e&&this.audioBuffer&&this.audioTimestampOffset_!==e&&(cu({type:"audio",sourceUpdater:this,action:uu.timestampOffset(e),name:"timestampOffset"}),this.audioTimestampOffset_=e),this.audioTimestampOffset_}videoTimestampOffset(e){return"undefined"!=typeof e&&this.videoBuffer&&this.videoTimestampOffset!==e&&(cu({type:"video",sourceUpdater:this,action:uu.timestampOffset(e),name:"timestampOffset"}),this.videoTimestampOffset_=e),this.videoTimestampOffset_}audioQueueCallback(e){this.audioBuffer&&cu({type:"audio",sourceUpdater:this,action:uu.callback(e),name:"callback"})}videoQueueCallback(e){this.videoBuffer&&cu({type:"video",sourceUpdater:this,action:uu.callback(e),name:"callback"})}dispose(){this.trigger("dispose"),au.forEach(e=>{this.abort(e),this.canRemoveSourceBuffer()?this.removeSourceBuffer(e):this[e+"QueueCallback"](()=>du(e,this))}),this.videoAppendQueued_=!1,this.delayedAudioAppendQueue_.length=0,this.sourceopenListener_&&this.mediaSource.removeEventListener("sourceopen",this.sourceopenListener_),this.off()}}const gu=e=>decodeURIComponent(escape(String.fromCharCode.apply(null,e))),fu=new Uint8Array("\n\n".split("").map(e=>e.charCodeAt(0)));class yu extends Error{constructor(){super("Trying to parse received VTT cues, but there is no WebVTT. Make sure vtt.js is loaded.")}}class _u extends su{constructor(e,t={}){super(e,t),this.mediaSource_=null,this.subtitlesTrack_=null,this.featuresNativeTextTracks_=e.featuresNativeTextTracks,this.loadVttJs=e.loadVttJs,this.shouldSaveSegmentTimingInfo_=!1}createTransmuxer_(){return null}buffered_(){var e;return this.subtitlesTrack_&&this.subtitlesTrack_.cues&&this.subtitlesTrack_.cues.length?Wl([[(e=this.subtitlesTrack_.cues)[0].startTime,e[e.length-1].startTime]]):Wl()}initSegmentForMap(e,t=!1){if(!e)return null;var i=Hd(e);let s=this.initSegments_[i];return t&&!s&&e.bytes&&(t=fu.byteLength+e.bytes.byteLength,(t=new Uint8Array(t)).set(e.bytes),t.set(fu,e.bytes.byteLength),this.initSegments_[i]=s={resolvedUri:e.resolvedUri,byterange:e.byterange,bytes:t}),s||e}couldBeginLoading_(){return this.playlist_&&this.subtitlesTrack_&&!this.paused()}init_(){return this.state="READY",this.resetEverything(),this.monitorBuffer_()}track(e){return"undefined"!=typeof e&&(this.subtitlesTrack_=e,"INIT"===this.state&&this.couldBeginLoading_())&&this.init_(),this.subtitlesTrack_}remove(e,t){Wh(e,t,this.subtitlesTrack_)}fillBuffer_(){var e=this.chooseNextRequest_();e&&(null===this.syncController_.timestampOffsetForTimeline(e.timeline)?(this.syncController_.one("timestampoffset",()=>{this.state="READY",this.paused()||this.monitorBuffer_()}),this.state="WAITING_ON_TIMELINE"):this.loadSegment_(e))}timestampOffsetForSegment_(){return null}chooseNextRequest_(){return this.skipEmptySegments_(super.chooseNextRequest_())}skipEmptySegments_(e){for(;e&&e.segment.empty;){if(e.mediaIndex+1>=e.playlist.segments.length){e=null;break}e=this.generateSegmentInfo_({playlist:e.playlist,mediaIndex:e.mediaIndex+1,startOfSegment:e.startOfSegment+e.duration,isSyncRequest:e.isSyncRequest})}return e}stopForError(e){this.error(e),this.state="READY",this.pause(),this.trigger("error")}segmentRequestFinished_(e,t,i){if(this.subtitlesTrack_)if(this.saveTransferStats_(t.stats),this.pendingSegment_)if(e)e.code===Ch.TIMEOUT&&this.handleTimeout_(),e.code===Ch.ABORTED?this.mediaRequestsAborted+=1:this.mediaRequestsErrored+=1,this.stopForError(e);else{var s=this.pendingSegment_,r=(this.saveBandwidthRelatedStats_(s.duration,t.stats),t.key&&this.segmentKey(t.key,!0),this.state="APPENDING",this.trigger("appending"),s.segment);if(r.map&&(r.map.bytes=t.map.bytes),s.bytes=t.bytes,"function"!=typeof window.WebVTT&&"function"==typeof this.loadVttJs)this.state="WAITING_ON_VTTJS",this.loadVttJs().then(()=>this.segmentRequestFinished_(e,t,i),()=>this.stopForError({message:"Error loading vtt.js",metadata:{errorType:T.Error.VttLoadError}}));else{r.requested=!0;try{this.parseVTTCues_(s)}catch(e){return void this.stopForError({message:e.message,metadata:{errorType:T.Error.VttCueParsingError}})}if(this.updateTimeMapping_(s,this.syncController_.timelines[s.timeline],this.playlist_),s.cues.length?s.timingInfo={start:s.cues[0].startTime,end:s.cues[s.cues.length-1].endTime}:s.timingInfo={start:s.startOfSegment,end:s.startOfSegment+s.duration},s.isSyncRequest)this.trigger("syncinfoupdate"),this.pendingSegment_=null,this.state="READY";else{s.byteLength=s.bytes.byteLength,this.mediaSecondsLoaded+=r.duration,s.cues.forEach(e=>{this.subtitlesTrack_.addCue(this.featuresNativeTextTracks_?new window.VTTCue(e.startTime,e.endTime,e.text):e)});var n=this.subtitlesTrack_,a=n.cues;if(a){var o={};for(let e=a.length-1;0<=e;e--){var l=a[e],d=`${l.startTime}-${l.endTime}-`+l.text;o[d]?n.removeCue(l):o[d]=l}}this.handleAppendsDone_()}}}else this.state="READY",this.mediaRequestsAborted+=1;else this.state="READY"}handleData_(){}updateTimingInfoEnd_(){}parseVTTCues_(t){let e,i=!1;if("function"!=typeof window.WebVTT)throw new yu;"function"==typeof window.TextDecoder?e=new window.TextDecoder("utf8"):(e=window.WebVTT.StringDecoder(),i=!0);var s=new window.WebVTT.Parser(window,window.vttjs,e);if(t.cues=[],t.timestampmap={MPEGTS:0,LOCAL:0},s.oncue=t.cues.push.bind(t.cues),s.ontimestampmap=e=>{t.timestampmap=e},s.onparsingerror=e=>{T.log.warn("Error encountered when parsing cues: "+e.message)},t.segment.map){let e=t.segment.map.bytes;i&&(e=gu(e)),s.parse(e)}let r=t.bytes;i&&(r=gu(r)),s.parse(r),s.flush()}updateTimeMapping_(e,s,t){var i,r,n=e.segment;if(s)if(e.cues.length){const{MPEGTS:a,LOCAL:o}=e.timestampmap;const l=a/Hl-o+s.mapping;e.cues.forEach(e=>{var t=e.endTime-e.startTime,i=0===a?e.startTime+l:this.handleRollover_(e.startTime+l,s.time);e.startTime=Math.max(i,0),e.endTime=Math.max(i+t,0)}),t.syncInfo||(i=e.cues[0].startTime,r=e.cues[e.cues.length-1].startTime,t.syncInfo={mediaSequence:t.mediaSequence+e.mediaIndex,time:Math.min(i,r-n.duration)})}else n.empty=!0}handleRollover_(e,t){if(null===t)return e;let i=e*Hl;var s=t*Hl;let r;for(r=s<i?-8589934592:8589934592;4294967296<Math.abs(i-s);)i+=r;return i/Hl}}class vu{constructor({start:e,end:t,segmentIndex:i,partIndex:s=null,appended:r=!1}){this.start_=e,this.end_=t,this.segmentIndex_=i,this.partIndex_=s,this.appended_=r}isInRange(e){return e>=this.start&&e<this.end}markAppended(){this.appended_=!0}resetAppendedStatus(){this.appended_=!1}get isAppended(){return this.appended_}get start(){return this.start_}get end(){return this.end_}get segmentIndex(){return this.segmentIndex_}get partIndex(){return this.partIndex_}}class bu{constructor(e,t=[]){this.segmentSyncInfo_=e,this.partsSyncInfo_=t}get segmentSyncInfo(){return this.segmentSyncInfo_}get partsSyncInfo(){return this.partsSyncInfo_}get hasPartsSyncInfo(){return 0<this.partsSyncInfo_.length}resetAppendStatus(){this.segmentSyncInfo_.resetAppendedStatus(),this.partsSyncInfo_.forEach(e=>e.resetAppendedStatus())}}class Tu{constructor(){this.storage_=new Map,this.diagnostics_="",this.isReliable_=!1,this.start_=-1/0,this.end_=1/0}get start(){return this.start_}get end(){return this.end_}get diagnostics(){return this.diagnostics_}get isReliable(){return this.isReliable_}resetAppendedStatus(){this.storage_.forEach(e=>e.resetAppendStatus())}update(e,t){var{mediaSequence:e,segments:i}=e;if(this.isReliable_=this.isReliablePlaylist_(e,i),this.isReliable_)return this.updateStorage_(i,e,this.calculateBaseTime_(e,t))}getSyncInfoForTime(e){for(var{segmentSyncInfo:t,partsSyncInfo:i}of this.storage_.values())if(i.length){for(const s of i)if(s.isInRange(e))return s}else if(t.isInRange(e))return t;return null}updateStorage_(e,t,i){const d=new Map;let h="\n",u=i,c=t;this.start_=u,e.forEach((e,a)=>{const o=this.storage_.get(c);var t=u,i=t+e.duration,s=Boolean(o&&o.segmentSyncInfo&&o.segmentSyncInfo.isAppended),r=new vu({start:t,end:i,appended:s,segmentIndex:a});e.syncInfo=r;let l=u;var n=(e.parts||[]).map((e,t)=>{var i=l,s=l+e.duration,r=Boolean(o&&o.partsSyncInfo&&o.partsSyncInfo[t]&&o.partsSyncInfo[t].isAppended),n=new vu({start:i,end:s,appended:r,segmentIndex:a,partIndex:t});return l=s,h+=`Media Sequence: ${c}.${t} | Range: ${i} --> ${s} | Appended: ${r}
+`,e.syncInfo=n});d.set(c,new bu(r,n)),h+=`${zh(e.resolvedUri)} | Media Sequence: ${c} | Range: ${t} --> ${i} | Appended: ${s}\n`,c++,u=i}),this.end_=u,this.storage_=d,this.diagnostics_=h}calculateBaseTime_(e,t){return this.storage_.size?this.storage_.has(e)?this.storage_.get(e).segmentSyncInfo.start:t:0}isReliablePlaylist_(e,t){return null!=e&&Array.isArray(t)&&t.length}}const Su=[{name:"VOD",run:(e,t,i,s,r)=>{return i!==1/0?{time:0,segmentIndex:0,partIndex:null}:null}},{name:"MediaSequence",run:(e,t,i,s,r,n)=>{e=e.getMediaSequenceSync(n);return e&&e.isReliable&&(n=e.getSyncInfoForTime(r))?{time:n.start,partIndex:n.partIndex,segmentIndex:n.segmentIndex}:null}},{name:"ProgramDateTime",run:(t,i,e,s,r)=>{if(!Object.keys(t.timelineToDatetimeMappings).length)return null;let n=null,a=null;var o=nd(i);r=r||0;for(let e=0;e<o.length;e++){var l=o[i.endList||0===r?e:o.length-(e+1)],d=l.segment,h=t.timelineToDatetimeMappings[d.timeline];if(h&&d.dateTimeObject){let t=d.dateTimeObject.getTime()/1e3+h;if(d.parts&&"number"==typeof l.partIndex)for(let e=0;e<l.partIndex;e++)t+=d.parts[e].duration;h=Math.abs(r-t);if(null!==a&&(0===h||a<h))break;a=h,n={time:t,segmentIndex:l.segmentIndex,partIndex:l.partIndex}}}return n}},{name:"Segment",run:(e,t,i,s,r)=>{let n=null,a=null;r=r||0;var o=nd(t);for(let e=0;e<o.length;e++){var l=o[t.endList||0===r?e:o.length-(e+1)],d=l.segment,h=l.part&&l.part.start||d&&d.start;if(d.timeline===s&&"undefined"!=typeof h){d=Math.abs(r-h);if(null!==a&&a<d)break;(!n||null===a||a>=d)&&(a=d,n={time:h,segmentIndex:l.segmentIndex,partIndex:l.partIndex})}}return n}},{name:"Discontinuity",run:(i,s,e,t,r)=>{let n=null;if(r=r||0,s.discontinuityStarts&&s.discontinuityStarts.length){let t=null;for(let e=0;e<s.discontinuityStarts.length;e++){var a=s.discontinuityStarts[e],o=s.discontinuitySequence+e+1,o=i.discontinuities[o];if(o){var l=Math.abs(r-o.time);if(null!==t&&t<l)break;(!n||null===t||t>=l)&&(t=l,n={time:o.time,segmentIndex:a,partIndex:null})}}}return n}},{name:"Playlist",run:(e,t,i,s,r)=>{return t.syncInfo?{time:t.syncInfo.time,segmentIndex:t.syncInfo.mediaSequence-t.mediaSequence,partIndex:null}:null}}];class wu extends T.EventTarget{constructor(e=0){super(),this.timelines=[],this.discontinuities=[],this.timelineToDatetimeMappings={},this.mediaSequenceStorage_={main:new Tu,audio:new Tu,vtt:new Tu},this.logger_=zl("SyncController")}getMediaSequenceSync(e){return this.mediaSequenceStorage_[e]||null}getSyncPoint(e,t,i,s,r){if(t!==1/0)return Su.find(({name:e})=>"VOD"===e).run(this,e,t);t=this.runStrategies_(e,t,i,s,r);if(!t.length)return null;for(const h of t){var{syncPoint:n,strategy:a}=h,{segmentIndex:o,time:l}=n;if(!(o<0)){var d=l+e.segments[o].duration;if(this.logger_(`Strategy: ${a}. Current time: ${s}. selected segment: ${o}. Time: [${l} -> ${d}]}`),l<=s&&s<d)return this.logger_("Found sync point with exact match: ",n),n}}return this.selectSyncPoint_(t,{key:"time",value:s})}getExpiredTime(e,t){return e&&e.segments&&(t=this.runStrategies_(e,t,e.discontinuitySequence,0)).length?(0<(t=this.selectSyncPoint_(t,{key:"segmentIndex",value:0})).segmentIndex&&(t.time*=-1),Math.abs(t.time+Ql({defaultDuration:e.targetDuration,durationList:e.segments,startIndex:t.segmentIndex,endIndex:0}))):null}runStrategies_(t,i,s,r,n){var a=[];for(let e=0;e<Su.length;e++){var o=Su[e],l=o.run(this,t,i,s,r,n);l&&(l.strategy=o.name,a.push({strategy:o.name,syncPoint:l}))}return a}selectSyncPoint_(t,i){let s=t[0].syncPoint,r=Math.abs(t[0].syncPoint[i.key]-i.value),n=t[0].strategy;for(let e=1;e<t.length;e++){var a=Math.abs(t[e].syncPoint[i.key]-i.value);a<r&&(r=a,s=t[e].syncPoint,n=t[e].strategy)}return this.logger_(`syncPoint for [${i.key}: ${i.value}] chosen with strategy`+` [${n}]: [time:${s.time},`+" segmentIndex:"+s.segmentIndex+("number"==typeof s.partIndex?",partIndex:"+s.partIndex:"")+"]"),s}saveExpiredSegmentInfo(t,i){var s=i.mediaSequence-t.mediaSequence;if(86400<s)T.log.warn(`Not saving expired segment info. Media sequence gap ${s} is too large.`);else for(let e=s-1;0<=e;e--){var r=t.segments[e];if(r&&"undefined"!=typeof r.start){i.syncInfo={mediaSequence:t.mediaSequence+e,time:r.start},this.logger_(`playlist refresh sync: [time:${i.syncInfo.time},`+` mediaSequence: ${i.syncInfo.mediaSequence}]`),this.trigger("syncinfoupdate");break}}}setDateTimeMappingForStart(e){var t;this.timelineToDatetimeMappings={},e.segments&&e.segments.length&&e.segments[0].dateTimeObject&&(t=(e=e.segments[0]).dateTimeObject.getTime()/1e3,this.timelineToDatetimeMappings[e.timeline]=-t)}saveSegmentTimingInfo({segmentInfo:e,shouldSaveTimelineMapping:t}){var i=this.calculateSegmentTimeMapping_(e,e.timingInfo,t),s=e.segment,i=(i&&(this.saveDiscontinuitySyncInfo_(e),e.playlist.syncInfo||(e.playlist.syncInfo={mediaSequence:e.playlist.mediaSequence+e.mediaIndex,time:s.start})),s.dateTimeObject);s.discontinuity&&t&&i&&(this.timelineToDatetimeMappings[s.timeline]=-i.getTime()/1e3)}timestampOffsetForTimeline(e){return"undefined"==typeof this.timelines[e]?null:this.timelines[e].time}mappingForTimeline(e){return"undefined"==typeof this.timelines[e]?null:this.timelines[e].mapping}calculateSegmentTimeMapping_(e,t,i){var s=e.segment,r=e.part;let n=this.timelines[e.timeline],a,o;if("number"==typeof e.timestampOffset)n={time:e.startOfSegment,mapping:e.startOfSegment-t.start},i&&(this.timelines[e.timeline]=n,this.trigger("timestampoffset"),this.logger_(`time mapping for timeline ${e.timeline}: `+`[time: ${n.time}] [mapping: ${n.mapping}]`)),a=e.startOfSegment;else{if(!n)return!1;a=t.start+n.mapping}return o=t.end+n.mapping,r&&(r.start=a,r.end=o),(!s.start||a<s.start)&&(s.start=a),s.end=o,!0}saveDiscontinuitySyncInfo_(t){var i=t.playlist,s=t.segment;if(s.discontinuity)this.discontinuities[s.timeline]={time:s.start,accuracy:0};else if(i.discontinuityStarts&&i.discontinuityStarts.length)for(let e=0;e<i.discontinuityStarts.length;e++){var r=i.discontinuityStarts[e],n=i.discontinuitySequence+e+1,a=r-t.mediaIndex,o=Math.abs(a);if(!this.discontinuities[n]||this.discontinuities[n].accuracy>o){let e;e=a<0?s.start-Ql({defaultDuration:i.targetDuration,durationList:i.segments,startIndex:t.mediaIndex,endIndex:r}):s.end+Ql({defaultDuration:i.targetDuration,durationList:i.segments,startIndex:t.mediaIndex+1,endIndex:r}),this.discontinuities[n]={time:e,accuracy:o}}}}dispose(){this.trigger("dispose"),this.off()}}class Eu extends T.EventTarget{constructor(){super(),this.pendingTimelineChanges_={},this.lastTimelineChanges_={}}clearPendingTimelineChange(e){this.pendingTimelineChanges_[e]=null,this.trigger("pendingtimelinechange")}pendingTimelineChange({type:e,from:t,to:i}){return"number"==typeof t&&"number"==typeof i&&(this.pendingTimelineChanges_[e]={type:e,from:t,to:i},this.trigger("pendingtimelinechange")),this.pendingTimelineChanges_[e]}lastTimelineChange({type:e,from:t,to:i}){return"number"==typeof t&&"number"==typeof i&&(this.lastTimelineChanges_[e]={type:e,from:t,to:i},delete this.pendingTimelineChanges_[e],this.trigger("timelinechange")),this.lastTimelineChanges_[e]}dispose(){this.trigger("dispose"),this.pendingTimelineChanges_={},this.lastTimelineChanges_={},this.off()}}var Cu=ah(oh(lh(function(){var e=function(){function e(){this.listeners={}}var t=e.prototype;return t.on=function(e,t){this.listeners[e]||(this.listeners[e]=[]),this.listeners[e].push(t)},t.off=function(e,t){return!!this.listeners[e]&&(t=this.listeners[e].indexOf(t),this.listeners[e]=this.listeners[e].slice(0),this.listeners[e].splice(t,1),-1<t)},t.trigger=function(e){var t=this.listeners[e];if(t)if(2===arguments.length)for(var i=t.length,s=0;s<i;++s)t[s].call(this,arguments[1]);else for(var r=Array.prototype.slice.call(arguments,1),n=t.length,a=0;a<n;++a)t[a].apply(this,r)},t.dispose=function(){this.listeners={}},t.pipe=function(t){this.on("data",function(e){t.push(e)})},e}();
+/*! @name pkcs7 @version 1.0.4 @license Apache-2.0 */let h=null;class g{constructor(e){h=h||function(){var e=[[[],[],[],[],[]],[[],[],[],[],[]]],t=e[0],i=e[1],s=t[4],r=i[4];let n,a,o;var l,d,h,u,c=[],p=[];let m,g;for(n=0;n<256;n++)p[(c[n]=n<<1^283*(n>>7))^n]=n;for(a=o=0;!s[a];a^=l||1,o=p[o]||1)for(u=(u=o^o<<1^o<<2^o<<3^o<<4)>>8^255&u^99,h=c[d=c[l=c[r[s[a]=u]=a]]],g=16843009*h^65537*d^257*l^16843008*a,m=257*c[u]^16843008*u,n=0;n<4;n++)t[n][a]=m=m<<24^m>>>8,i[n][u]=g=g<<24^g>>>8;for(n=0;n<5;n++)t[n]=t[n].slice(0),i[n]=i[n].slice(0);return e}(),this._tables=[[h[0][0].slice(),h[0][1].slice(),h[0][2].slice(),h[0][3].slice(),h[0][4].slice()],[h[1][0].slice(),h[1][1].slice(),h[1][2].slice(),h[1][3].slice(),h[1][4].slice()]];let t,i,s;var r=this._tables[0][4],n=this._tables[1],a=e.length;let o=1;if(4!==a&&6!==a&&8!==a)throw new Error("Invalid aes key size");var l=e.slice(0),d=[];for(this._key=[l,d],t=a;t<4*a+28;t++)s=l[t-1],(t%a==0||8===a&&t%a==4)&&(s=r[s>>>24]<<24^r[s>>16&255]<<16^r[s>>8&255]<<8^r[255&s],t%a==0)&&(s=s<<8^s>>>24^o<<24,o=o<<1^283*(o>>7)),l[t]=l[t-a]^s;for(i=0;t;i++,t--)s=l[3&i?t:t-4],t<=4||i<4?d[i]=s:d[i]=n[0][r[s>>>24]]^n[1][r[s>>16&255]]^n[2][r[s>>8&255]]^n[3][r[255&s]]}decrypt(e,t,i,s,r,n){var a,o,l=this._key[1];let d=e^l[0],h=s^l[1],u=i^l[2],c=t^l[3],p;var m=l.length/4-2;let g,f=4;var e=this._tables[1],y=e[0],_=e[1],v=e[2],b=e[3],T=e[4];for(g=0;g<m;g++)p=y[d>>>24]^_[h>>16&255]^v[u>>8&255]^b[255&c]^l[f],a=y[h>>>24]^_[u>>16&255]^v[c>>8&255]^b[255&d]^l[f+1],o=y[u>>>24]^_[c>>16&255]^v[d>>8&255]^b[255&h]^l[f+2],c=y[c>>>24]^_[d>>16&255]^v[h>>8&255]^b[255&u]^l[f+3],f+=4,d=p,h=a,u=o;for(g=0;g<4;g++)r[(3&-g)+n]=T[d>>>24]<<24^T[h>>16&255]<<16^T[u>>8&255]<<8^T[255&c]^l[f++],p=d,d=h,h=u,u=c,c=p}}class l extends e{constructor(){super(e),this.jobs=[],this.delay=1,this.timeout_=null}processJob_(){this.jobs.shift()(),this.jobs.length?this.timeout_=setTimeout(this.processJob_.bind(this),this.delay):this.timeout_=null}push(e){this.jobs.push(e),this.timeout_||(this.timeout_=setTimeout(this.processJob_.bind(this),this.delay))}}function f(e){return e<<24|(65280&e)<<8|(16711680&e)>>8|e>>>24}class d{constructor(e,t,i,s){var r=d.STEP,n=new Int32Array(e.buffer);const a=new Uint8Array(e.byteLength);let o=0;for(this.asyncStream_=new l,this.asyncStream_.push(this.decryptChunk_(n.subarray(o,o+r),t,i,a)),o=r;o<n.length;o+=r)i=new Uint32Array([f(n[o-4]),f(n[o-3]),f(n[o-2]),f(n[o-1])]),this.asyncStream_.push(this.decryptChunk_(n.subarray(o,o+r),t,i,a));this.asyncStream_.push(function(){var e;
+/*! @name aes-decrypter @version 4.0.1 @license Apache-2.0 */s(null,(e=a).subarray(0,e.byteLength-e[e.byteLength-1]))})}static get STEP(){return 32e3}decryptChunk_(t,i,s,r){return function(){var e=function(e,t,i){var s,r,n,a,o=new Int32Array(e.buffer,e.byteOffset,e.byteLength>>2),l=new g(Array.prototype.slice.call(t)),t=new Uint8Array(e.byteLength),d=new Int32Array(t.buffer);let h,u,c,p,m;for(h=i[0],u=i[1],c=i[2],p=i[3],m=0;m<o.length;m+=4)s=f(o[m]),r=f(o[m+1]),n=f(o[m+2]),a=f(o[m+3]),l.decrypt(s,r,n,a,d,m),d[m]=f(d[m]^h),d[m+1]=f(d[m+1]^u),d[m+2]=f(d[m+2]^c),d[m+3]=f(d[m+3]^p),h=s,u=r,c=n,p=a;return t}(t,i,s);r.set(e,t.byteOffset)}}}var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},t="undefined"!=typeof window?window:"undefined"!=typeof t?t:"undefined"!=typeof self?self:{},t=t.BigInt||Number;t("0x1"),t("0x100"),t("0x10000"),t("0x1000000"),t("0x100000000"),t("0x10000000000"),t("0x1000000000000"),t("0x100000000000000"),t("0x10000000000000000"),t=new Uint16Array([65484]),255!==(t=new Uint8Array(t.buffer,t.byteOffset,t.byteLength))[0]&&t[0];function r(s){const r={};return Object.keys(s).forEach(e=>{var t,i=s[e];t=i,("function"===ArrayBuffer.isView?ArrayBuffer.isView(t):t&&t.buffer instanceof ArrayBuffer)?r[e]={bytes:i.buffer,byteOffset:i.byteOffset,byteLength:i.byteLength}:r[e]=i}),r}self.onmessage=function(e){const i=e.data;var e=new Uint8Array(i.encrypted.bytes,i.encrypted.byteOffset,i.encrypted.byteLength),t=new Uint32Array(i.key.bytes,i.key.byteOffset,i.key.byteLength/4),s=new Uint32Array(i.iv.bytes,i.iv.byteOffset,i.iv.byteLength/4);new d(e,t,s,function(e,t){self.postMessage(r({source:i.source,decrypted:t}),[t.buffer])})}})));const ku=(e,t)=>{e.abort(),e.pause(),t&&t.activePlaylistLoader&&(t.activePlaylistLoader.pause(),t.activePlaylistLoader=null)},xu=(e,t)=>{(t.activePlaylistLoader=e).load()},Iu={AUDIO:(a,o)=>()=>{var{mediaTypes:{[a]:e},excludePlaylist:t}=o,i=e.activeTrack(),s=e.activeGroup(),s=(s.filter(e=>e.default)[0]||s[0]).id,r=e.tracks[s];if(i===r)t({error:{message:"Problem encountered loading the default audio track."}});else{T.log.warn("Problem encountered loading the alternate audio track.Switching back to default.");for(const n in e.tracks)e.tracks[n].enabled=e.tracks[n]===r;e.onTrackChanged()}},SUBTITLES:(i,s)=>()=>{var{[i]:e}=s["mediaTypes"],t=(T.log.warn("Problem encountered loading the subtitle track.Disabling subtitle track."),e.activeTrack());t&&(t.mode="disabled"),e.onTrackChanged()}},Au={AUDIO:(e,t,i)=>{if(!t)return;const{tech:s,requestOptions:r,segmentLoaders:{[e]:n}}=i;t.on("loadedmetadata",()=>{var e=t.media();n.playlist(e,r),(!s.paused()||e.endList&&"none"!==s.preload())&&n.load()}),t.on("loadedplaylist",()=>{n.playlist(t.media(),r),s.paused()||n.load()}),t.on("error",Iu[e](e,i))},SUBTITLES:(e,t,i)=>{const{tech:s,requestOptions:r,segmentLoaders:{[e]:n},mediaTypes:{[e]:a}}=i;t.on("loadedmetadata",()=>{var e=t.media();n.playlist(e,r),n.track(a.activeTrack()),(!s.paused()||e.endList&&"none"!==s.preload())&&n.load()}),t.on("loadedplaylist",()=>{n.playlist(t.media(),r),s.paused()||n.load()}),t.on("error",Iu[e](e,i))}},Du={AUDIO:(i,s)=>{var r,{vhs:n,sourceType:a,segmentLoaders:{[i]:e},requestOptions:o,main:{mediaGroups:l},mediaTypes:{[i]:{groups:d,tracks:h,logger_:u}},mainPlaylistLoader:c}=s,p=bd(c.main);l[i]&&0!==Object.keys(l[i]).length||(l[i]={main:{default:{default:!0}}},p&&(l[i].main.default.playlists=c.main.playlists));for(const m in l[i]){d[m]||(d[m]=[]);for(const g in l[i][m]){let e=l[i][m][g],t;t=p?(u(`AUDIO group '${m}' label '${g}' is a main playlist`),e.isMainPlaylist=!0,null):"vhs-json"===a&&e.playlists?new Nd(e.playlists[0],n,o):e.resolvedUri?new Nd(e.resolvedUri,n,o):e.playlists&&"dash"===a?new sh(e.playlists[0],n,o,c):null,e=L({id:g,playlistLoader:t},e),Au[i](i,e.playlistLoader,s),d[m].push(e),"undefined"==typeof h[g]&&(r=new T.AudioTrack({id:g,kind:(e=>{let t=e.default?"main":"alternative";return t=e.characteristics&&0<=e.characteristics.indexOf("public.accessibility.describes-video")?"main-desc":t})(e),enabled:!1,language:e.language,default:e.default,label:g}),h[g]=r)}}e.on("error",Iu[i](i,s))},SUBTITLES:(i,s)=>{var r,{tech:n,vhs:a,sourceType:o,segmentLoaders:{[i]:e},requestOptions:l,main:{mediaGroups:d},mediaTypes:{[i]:{groups:h,tracks:u}},mainPlaylistLoader:c}=s;for(const p in d[i]){h[p]||(h[p]=[]);for(const m in d[i][p])if(a.options_.useForcedSubtitles||!d[i][p][m].forced){let e=d[i][p][m],t;if("hls"===o)t=new Nd(e.resolvedUri,a,l);else if("dash"===o){if(!e.playlists.filter(e=>e.excludeUntil!==1/0).length)return;t=new sh(e.playlists[0],a,l,c)}else"vhs-json"===o&&(t=new Nd(e.playlists?e.playlists[0]:e.resolvedUri,a,l));e=L({id:m,playlistLoader:t},e),Au[i](i,e.playlistLoader,s),h[p].push(e),"undefined"==typeof u[m]&&(r=n.addRemoteTextTrack({id:m,kind:"subtitles",default:e.default&&e.autoselect,language:e.language,label:m},!1).track,u[m]=r)}}e.on("error",Iu[i](i,s))},"CLOSED-CAPTIONS":(e,t)=>{var{tech:i,main:{mediaGroups:s},mediaTypes:{[e]:{groups:r,tracks:n}}}=t;for(const l in s[e]){r[l]||(r[l]=[]);for(const d in s[e][l]){var a=s[e][l][d];if(/^(?:CC|SERVICE)/.test(a.instreamId)){var o=i.options_.vhs&&i.options_.vhs.captionServices||{};let e={label:d,language:a.language,instreamId:a.instreamId,default:a.default&&a.autoselect};void 0===(e=o[e.instreamId]?L(e,o[e.instreamId]):e).default&&delete e.default,r[l].push(L({id:d},a)),"undefined"==typeof n[d]&&(o=i.addRemoteTextTrack({id:e.instreamId,kind:"captions",default:e.default,language:e.language,label:e.label},!1).track,n[d]=o)}}}}},Pu=(t,i)=>{for(let e=0;e<t.length;e++){if(vd(i,t[e]))return!0;if(t[e].playlists&&Pu(t[e].playlists,i))return!0}return!1},Lu={AUDIO:(i,s)=>()=>{var{[i]:{tracks:e}}=s["mediaTypes"];for(const t in e)if(e[t].enabled)return e[t];return null},SUBTITLES:(i,s)=>()=>{var{[i]:{tracks:e}}=s["mediaTypes"];for(const t in e)if("showing"===e[t].mode||"hidden"===e[t].mode)return e[t];return null}},Ou=n=>{["AUDIO","SUBTITLES","CLOSED-CAPTIONS"].forEach(e=>{Du[e](e,n)});const{mediaTypes:a,mainPlaylistLoader:e,tech:t,vhs:i,segmentLoaders:{AUDIO:s,main:r}}=n;["AUDIO","SUBTITLES"].forEach(e=>{var o,l,d,h,i,s,u,c,t,r;a[e].activeGroup=(o=e,l=n,t=>{var{mainPlaylistLoader:e,mediaTypes:{[o]:{groups:i}}}=l,s=e.media();if(!s)return null;let r=null;s.attributes[o]&&(r=i[s.attributes[o]]);var n=Object.keys(i);if(!r)if("AUDIO"===o&&1<n.length&&bd(l.main))for(let e=0;e<n.length;e++){var a=i[n[e]];if(Pu(a,s)){r=a;break}}else i.main?r=i.main:1===n.length&&(r=i[n[0]]);return"undefined"==typeof t?r:null!==t&&r&&r.filter(e=>e.id===t.id)[0]||null}),a[e].activeTrack=Lu[e](e,n),a[e].onGroupChanged=(d=e,h=n,()=>{var{segmentLoaders:{[d]:e,main:t},mediaTypes:{[d]:i}}=h,s=i.activeTrack(),r=i.getActiveGroup(),n=i.activePlaylistLoader,a=i.lastGroup_;r&&a&&r.id===a.id||(i.lastGroup_=r,i.lastTrack_=s,ku(e,i),r&&!r.isMainPlaylist&&(r.playlistLoader?(e.resyncLoader(),xu(r.playlistLoader,i)):n&&t.resetEverything()))}),a[e].onGroupChanging=(i=e,s=n,()=>{var{segmentLoaders:{[i]:e},mediaTypes:{[i]:t}}=s;t.lastGroup_=null,e.abort(),e.pause()}),a[e].onTrackChanged=(u=e,c=n,()=>{var e,t,{mainPlaylistLoader:i,segmentLoaders:{[u]:s,main:r},mediaTypes:{[u]:n}}=c,a=n.activeTrack(),o=n.getActiveGroup(),l=n.activePlaylistLoader,d=n.lastTrack_;if((!d||!a||d.id!==a.id)&&(n.lastGroup_=o,n.lastTrack_=a,ku(s,n),o)){if(o.isMainPlaylist)return!a||!d||a.id===d.id||(t=(e=c.vhs.playlistController_).selectPlaylist(),e.media()===t)?void 0:(n.logger_(`track change. Switching main audio from ${d.id} to `+a.id),i.pause(),r.resetEverything(),void e.fastQualityChange_(t));if("AUDIO"===u){if(!o.playlistLoader)return r.setAudio(!0),void r.resetEverything();s.setAudio(!0),r.setAudio(!1)}l===o.playlistLoader||(s.track&&s.track(a),s.resetEverything()),xu(o.playlistLoader,n)}}),a[e].getActiveGroup=([t,r]=[e,n["mediaTypes"]],()=>{var e=r[t].activeTrack();return e?r[t].activeGroup(e):null})});var o=a.AUDIO.activeGroup();o&&(o=(o.filter(e=>e.default)[0]||o[0]).id,a.AUDIO.tracks[o].enabled=!0,a.AUDIO.onGroupChanged(),a.AUDIO.onTrackChanged(),(a.AUDIO.getActiveGroup().playlistLoader?(r.setAudio(!1),s):r).setAudio(!0)),e.on("mediachange",()=>{["AUDIO","SUBTITLES"].forEach(e=>a[e].onGroupChanged())}),e.on("mediachanging",()=>{["AUDIO","SUBTITLES"].forEach(e=>a[e].onGroupChanging())});const l=()=>{a.AUDIO.onTrackChanged(),t.trigger({type:"usage",name:"vhs-audio-change"})};t.audioTracks().addEventListener("change",l),t.remoteTextTracks().addEventListener("change",a.SUBTITLES.onTrackChanged),i.on("dispose",()=>{t.audioTracks().removeEventListener("change",l),t.remoteTextTracks().removeEventListener("change",a.SUBTITLES.onTrackChanged)}),t.clearTracks("audio");for(const d in a.AUDIO.tracks)t.audioTracks().addTrack(a.AUDIO.tracks[d])};class Ru{constructor(){this.priority_=[],this.pathwayClones_=new Map}set version(e){1===e&&(this.version_=e)}set ttl(e){this.ttl_=e||300}set reloadUri(e){e&&(this.reloadUri_=Vl(this.reloadUri_,e))}set priority(e){e&&e.length&&(this.priority_=e)}set pathwayClones(e){e&&e.length&&(this.pathwayClones_=new Map(e.map(e=>[e.ID,e])))}get version(){return this.version_}get ttl(){return this.ttl_}get reloadUri(){return this.reloadUri_}get priority(){return this.priority_}get pathwayClones(){return this.pathwayClones_}}class Nu extends T.EventTarget{constructor(e,t){super(),this.currentPathway=null,this.defaultPathway=null,this.queryBeforeStart=!1,this.availablePathways_=new Set,this.steeringManifest=new Ru,this.proxyServerUrl_=null,this.manifestType_=null,this.ttlTimeout_=null,this.request_=null,this.currentPathwayClones=new Map,this.nextPathwayClones=new Map,this.excludedSteeringManifestURLs=new Set,this.logger_=zl("Content Steering"),this.xhr_=e,this.getBandwidth_=t}assignTagProperties(e,t){this.manifestType_=t.serverUri?"HLS":"DASH";var i=t.serverUri||t.serverURL;i?i.startsWith("data:")?this.decodeDataUriManifest_(i.substring(i.indexOf(",")+1)):(this.steeringManifest.reloadUri=Vl(e,i),this.defaultPathway=t.pathwayId||t.defaultServiceLocation,this.queryBeforeStart=t.queryBeforeStart,this.proxyServerUrl_=t.proxyServerURL,this.defaultPathway&&!this.queryBeforeStart&&this.trigger("content-steering")):(this.logger_(`steering manifest URL is ${i}, cannot request steering manifest.`),this.trigger("error"))}requestSteeringManifest(e){var t=this.steeringManifest.reloadUri;if(t){const i=e?t:this.getRequestURI(t);i?this.request_=this.xhr_({uri:i,requestType:"content-steering-manifest"},(e,t)=>{if(e)return 410===t.status?(this.logger_(`manifest request 410 ${e}.`),this.logger_(`There will be no more content steering requests to ${i} this session.`),void this.excludedSteeringManifestURLs.add(i)):429===t.status?(t=t.responseHeaders["retry-after"],this.logger_(`manifest request 429 ${e}.`),this.logger_(`content steering will retry in ${t} seconds.`),void this.startTTLTimeout_(parseInt(t,10))):(this.logger_(`manifest failed to load ${e}.`),void this.startTTLTimeout_());t=JSON.parse(this.request_.responseText);this.assignSteeringProperties_(t),this.startTTLTimeout_()}):(this.logger_("No valid content steering manifest URIs. Stopping content steering."),this.trigger("error"),this.dispose())}}setProxyServerUrl_(e){var e=new window.URL(e),t=new window.URL(this.proxyServerUrl_);return t.searchParams.set("url",encodeURI(e.toString())),this.setSteeringParams_(t.toString())}decodeDataUriManifest_(e){e=JSON.parse(window.atob(e));this.assignSteeringProperties_(e)}setSteeringParams_(e){var t,e=new window.URL(e),i=this.getPathway(),s=this.getBandwidth_();return i&&(t=`_${this.manifestType_}_pathway`,e.searchParams.set(t,i)),s&&(t=`_${this.manifestType_}_throughput`,e.searchParams.set(t,s)),e.toString()}assignSteeringProperties_(e){var t;this.steeringManifest.version=e.VERSION,this.steeringManifest.version?(this.steeringManifest.ttl=e.TTL,this.steeringManifest.reloadUri=e["RELOAD-URI"],this.steeringManifest.priority=e["PATHWAY-PRIORITY"]||e["SERVICE-LOCATION-PRIORITY"],this.steeringManifest.pathwayClones=e["PATHWAY-CLONES"],this.nextPathwayClones=this.steeringManifest.pathwayClones,this.availablePathways_.size||(this.logger_("There are no available pathways for content steering. Ending content steering."),this.trigger("error"),this.dispose()),t=(e=>{for(const t of e)if(this.availablePathways_.has(t))return t;return[...this.availablePathways_][0]})(this.steeringManifest.priority),this.currentPathway!==t&&(this.currentPathway=t,this.trigger("content-steering"))):(this.logger_(`manifest version is ${e.VERSION}, which is not supported.`),this.trigger("error"))}getPathway(){return this.currentPathway||this.defaultPathway}getRequestURI(e){if(!e)return null;var t=e=>this.excludedSteeringManifestURLs.has(e);if(this.proxyServerUrl_){var i=this.setProxyServerUrl_(e);if(!t(i))return i}i=this.setSteeringParams_(e);return t(i)?null:i}startTTLTimeout_(e=this.steeringManifest.ttl){this.ttlTimeout_=window.setTimeout(()=>{this.requestSteeringManifest()},1e3*e)}clearTTLTimeout_(){window.clearTimeout(this.ttlTimeout_),this.ttlTimeout_=null}abort(){this.request_&&this.request_.abort(),this.request_=null}dispose(){this.off("content-steering"),this.off("error"),this.abort(),this.clearTTLTimeout_(),this.currentPathway=null,this.defaultPathway=null,this.queryBeforeStart=null,this.proxyServerUrl_=null,this.manifestType_=null,this.ttlTimeout_=null,this.request_=null,this.excludedSteeringManifestURLs=new Set,this.availablePathways_=new Set,this.steeringManifest=new Ru}addAvailablePathway(e){e&&this.availablePathways_.add(e)}clearAvailablePathways(){this.availablePathways_.clear()}excludePathway(e){return this.availablePathways_.delete(e)}didDASHTagChange(e,t){return!t&&this.steeringManifest.reloadUri||t&&(Vl(e,t.serverURL)!==this.steeringManifest.reloadUri||t.defaultServiceLocation!==this.defaultPathway||t.queryBeforeStart!==this.queryBeforeStart||t.proxyServerURL!==this.proxyServerUrl_)}getAvailablePathways(){return this.availablePathways_}}let Mu;const Uu=["mediaRequests","mediaRequestsAborted","mediaRequestsTimedout","mediaRequestsErrored","mediaTransferDuration","mediaBytesTransferred","mediaAppends"];class Bu extends T.EventTarget{constructor(e){super();const{src:t,withCredentials:i,tech:r,bandwidth:s,externVhs:n,useCueTags:a,playlistExclusionDuration:o,enableLowInitialPlaylist:l,sourceType:d,cacheEncryptionKeys:h,bufferBasedABR:u,leastPixelDiffSelector:c,captionServices:p}=e;if(!t)throw new Error("A non-empty playlist URL or JSON manifest string is required");let m=e["maxPlaylistRetries"];null!==m&&"undefined"!=typeof m||(m=1/0),Mu=n,this.bufferBasedABR=Boolean(u),this.leastPixelDiffSelector=Boolean(c),this.withCredentials=i,this.tech_=r,this.vhs_=r.vhs,this.sourceType_=d,this.useCueTags_=a,this.playlistExclusionDuration=o,this.maxPlaylistRetries=m,this.enableLowInitialPlaylist=l,this.useCueTags_&&(this.cueTagsTrack_=this.tech_.addTextTrack("metadata","ad-cues"),this.cueTagsTrack_.inBandMetadataTrackDispatchType=""),this.requestOptions_={withCredentials:i,maxPlaylistRetries:m,timeout:null},this.on("error",this.pauseLoading),this.mediaTypes_=(()=>{const t={};return["AUDIO","SUBTITLES","CLOSED-CAPTIONS"].forEach(e=>{t[e]={groups:{},tracks:{},activePlaylistLoader:null,activeGroup:ru,activeTrack:ru,getActiveGroup:ru,onGroupChanged:ru,onTrackChanged:ru,lastTrack_:null,logger_:zl(`MediaGroups[${e}]`)}}),t})(),this.mediaSource=new window.MediaSource,this.handleDurationChange_=this.handleDurationChange_.bind(this),this.handleSourceOpen_=this.handleSourceOpen_.bind(this),this.handleSourceEnded_=this.handleSourceEnded_.bind(this),this.mediaSource.addEventListener("durationchange",this.handleDurationChange_),this.mediaSource.addEventListener("sourceopen",this.handleSourceOpen_),this.mediaSource.addEventListener("sourceended",this.handleSourceEnded_),this.seekable_=Wl(),this.hasPlayed_=!1,this.syncController_=new wu(e),this.segmentMetadataTrack_=r.addRemoteTextTrack({kind:"metadata",label:"segment-metadata"},!1).track,this.decrypter_=new Cu,this.sourceUpdater_=new mu(this.mediaSource),this.inbandTextTracks_={},this.timelineChangeController_=new Eu,this.keyStatusMap_=new Map;var g={vhs:this.vhs_,parse708captions:e.parse708captions,useDtsForTimestampOffset:e.useDtsForTimestampOffset,captionServices:p,mediaSource:this.mediaSource,currentTime:this.tech_.currentTime.bind(this.tech_),seekable:()=>this.seekable(),seeking:()=>this.tech_.seeking(),duration:()=>this.duration(),hasPlayed:()=>this.hasPlayed_,goalBufferLength:()=>this.goalBufferLength(),bandwidth:s,syncController:this.syncController_,decrypter:this.decrypter_,sourceType:this.sourceType_,inbandTextTracks:this.inbandTextTracks_,cacheEncryptionKeys:h,sourceUpdater:this.sourceUpdater_,timelineChangeController:this.timelineChangeController_,exactManifestTimings:e.exactManifestTimings,addMetadataToTextTrack:this.addMetadataToTextTrack.bind(this)},g=(this.mainPlaylistLoader_="dash"===this.sourceType_?new sh(t,this.vhs_,L(this.requestOptions_,{addMetadataToTextTrack:this.addMetadataToTextTrack.bind(this)})):new Nd(t,this.vhs_,L(this.requestOptions_,{addDateRangesToTextTrack:this.addDateRangesToTextTrack_.bind(this)})),this.setupMainPlaylistLoaderListeners_(),this.mainSegmentLoader_=new su(L(g,{segmentMetadataTrack:this.segmentMetadataTrack_,loaderType:"main"}),e),this.audioSegmentLoader_=new su(L(g,{loaderType:"audio"}),e),this.subtitleSegmentLoader_=new _u(L(g,{loaderType:"vtt",featuresNativeTextTracks:this.tech_.featuresNativeTextTracks,loadVttJs:()=>new Promise((e,t)=>{function i(){r.off("vttjserror",s),e()}function s(){r.off("vttjsloaded",i),t()}r.one("vttjsloaded",i),r.one("vttjserror",s),r.addWebVttScript_()})}),e),this.contentSteeringController_=new Nu(this.vhs_.xhr,()=>this.mainSegmentLoader_.bandwidth),this.setupSegmentLoaderListeners_(),this.bufferBasedABR&&(this.mainPlaylistLoader_.one("loadedplaylist",()=>this.startABRTimer_()),this.tech_.on("pause",()=>this.stopABRTimer_()),this.tech_.on("play",()=>this.startABRTimer_())),Uu.forEach(e=>{this[e+"_"]=function(e){return this.audioSegmentLoader_[e]+this.mainSegmentLoader_[e]}.bind(this,e)}),this.logger_=zl("pc"),this.triggeredFmp4Usage=!1,"none"===this.tech_.preload()?(this.loadOnPlay_=()=>{this.loadOnPlay_=null,this.mainPlaylistLoader_.load()},this.tech_.one("play",this.loadOnPlay_)):this.mainPlaylistLoader_.load(),this.timeToLoadedData__=-1,this.mainAppendsToLoadedData__=-1,this.audioAppendsToLoadedData__=-1,"none"===this.tech_.preload()?"play":"loadstart");this.tech_.one(g,()=>{const e=Date.now();this.tech_.one("loadeddata",()=>{this.timeToLoadedData__=Date.now()-e,this.mainAppendsToLoadedData__=this.mainSegmentLoader_.mediaAppends,this.audioAppendsToLoadedData__=this.audioSegmentLoader_.mediaAppends})})}mainAppendsToLoadedData_(){return this.mainAppendsToLoadedData__}audioAppendsToLoadedData_(){return this.audioAppendsToLoadedData__}appendsToLoadedData_(){var e=this.mainAppendsToLoadedData_(),t=this.audioAppendsToLoadedData_();return-1===e||-1===t?-1:e+t}timeToLoadedData_(){return this.timeToLoadedData__}checkABR_(e="abr"){var t=this.selectPlaylist();t&&this.shouldSwitchToMedia_(t)&&this.switchMedia_(t,e)}switchMedia_(e,t,i){var s=this.media(),s=s&&(s.id||s.uri),r=e&&(e.id||e.uri);s&&s!==r&&(this.logger_(`switch media ${s} -> ${r} from `+t),this.tech_.trigger({type:"usage",name:"vhs-rendition-change-"+t})),this.mainPlaylistLoader_.media(e,i)}switchMediaForDASHContentSteering_(){["AUDIO","SUBTITLES","CLOSED-CAPTIONS"].forEach(e=>{var t=this.mediaTypes_[e],t=t?t.activeGroup():null;const i=this.contentSteeringController_.getPathway();t&&i&&(t=(t.length?t[0]:t).playlists.filter(e=>e.attributes.serviceLocation===i)).length&&this.mediaTypes_[e].activePlaylistLoader.media(t[0])})}startABRTimer_(){this.stopABRTimer_(),this.abrTimer_=window.setInterval(()=>this.checkABR_(),250)}stopABRTimer_(){this.tech_.scrubbing&&this.tech_.scrubbing()||(window.clearInterval(this.abrTimer_),this.abrTimer_=null)}getAudioTrackPlaylists_(){var t=this.main(),e=t&&t.playlists||[];if(!t||!t.mediaGroups||!t.mediaGroups.AUDIO)return e;var i=t.mediaGroups.AUDIO,s=Object.keys(i);let r;if(Object.keys(this.mediaTypes_.AUDIO.groups).length)r=this.mediaTypes_.AUDIO.activeTrack();else{var n=i.main||s.length&&i[s[0]];for(const d in n)if(n[d].default){r={label:d};break}}if(!r)return e;var a=[];for(const h in i)if(i[h][r.label]){var o=i[h][r.label];if(o.playlists&&o.playlists.length)a.push.apply(a,o.playlists);else if(o.uri)a.push(o);else if(t.playlists.length)for(let e=0;e<t.playlists.length;e++){var l=t.playlists[e];l.attributes&&l.attributes.AUDIO&&l.attributes.AUDIO===h&&a.push(l)}}return a.length?a:e}setupMainPlaylistLoaderListeners_(){this.mainPlaylistLoader_.on("loadedmetadata",()=>{var e=this.mainPlaylistLoader_.media(),t=1.5*e.targetDuration*1e3;_d(this.mainPlaylistLoader_.main,this.mainPlaylistLoader_.media())?this.requestOptions_.timeout=0:this.requestOptions_.timeout=t,e.endList&&"none"!==this.tech_.preload()&&(this.mainSegmentLoader_.playlist(e,this.requestOptions_),this.mainSegmentLoader_.load()),Ou({sourceType:this.sourceType_,segmentLoaders:{AUDIO:this.audioSegmentLoader_,SUBTITLES:this.subtitleSegmentLoader_,main:this.mainSegmentLoader_},tech:this.tech_,requestOptions:this.requestOptions_,mainPlaylistLoader:this.mainPlaylistLoader_,vhs:this.vhs_,main:this.main(),mediaTypes:this.mediaTypes_,excludePlaylist:this.excludePlaylist.bind(this)}),this.triggerPresenceUsage_(this.main(),e),this.setupFirstPlay(),!this.mediaTypes_.AUDIO.activePlaylistLoader||this.mediaTypes_.AUDIO.activePlaylistLoader.media()?this.trigger("selectedinitialmedia"):this.mediaTypes_.AUDIO.activePlaylistLoader.one("loadedmetadata",()=>{this.trigger("selectedinitialmedia")})}),this.mainPlaylistLoader_.on("loadedplaylist",()=>{this.loadOnPlay_&&this.tech_.off("play",this.loadOnPlay_);let t=this.mainPlaylistLoader_.media();if(!t){this.attachContentSteeringListeners_(),this.initContentSteeringController_(),this.excludeUnsupportedVariants_();let e;if(!(e=(e=this.enableLowInitialPlaylist?this.selectInitialPlaylist():e)||this.selectPlaylist())||!this.shouldSwitchToMedia_(e))return;if(this.initialMedia_=e,this.switchMedia_(this.initialMedia_,"initial"),!("vhs-json"===this.sourceType_&&this.initialMedia_.segments))return;t=this.initialMedia_}this.handleUpdatedMediaPlaylist(t)}),this.mainPlaylistLoader_.on("error",()=>{var e=this.mainPlaylistLoader_.error;this.excludePlaylist({playlistToExclude:e.playlist,error:e})}),this.mainPlaylistLoader_.on("mediachanging",()=>{this.mainSegmentLoader_.abort(),this.mainSegmentLoader_.pause()}),this.mainPlaylistLoader_.on("mediachange",()=>{var e=this.mainPlaylistLoader_.media(),t=1.5*e.targetDuration*1e3;_d(this.mainPlaylistLoader_.main,this.mainPlaylistLoader_.media())?this.requestOptions_.timeout=0:this.requestOptions_.timeout=t,"dash"===this.sourceType_&&this.mainPlaylistLoader_.load(),this.mainSegmentLoader_.pause(),this.mainSegmentLoader_.playlist(e,this.requestOptions_),this.waitingForFastQualityPlaylistReceived_?this.runFastQualitySwitch_():this.mainSegmentLoader_.load(),this.tech_.trigger({type:"mediachange",bubbles:!0})}),this.mainPlaylistLoader_.on("playlistunchanged",()=>{var e=this.mainPlaylistLoader_.media();"playlist-unchanged"!==e.lastExcludeReason_&&this.stuckAtPlaylistEnd_(e)&&(this.excludePlaylist({error:{message:"Playlist no longer updating.",reason:"playlist-unchanged"}}),this.tech_.trigger("playliststuck"))}),this.mainPlaylistLoader_.on("renditiondisabled",()=>{this.tech_.trigger({type:"usage",name:"vhs-rendition-disabled"})}),this.mainPlaylistLoader_.on("renditionenabled",()=>{this.tech_.trigger({type:"usage",name:"vhs-rendition-enabled"})})}handleUpdatedMediaPlaylist(e){this.useCueTags_&&this.updateAdCues_(e),this.mainSegmentLoader_.pause(),this.mainSegmentLoader_.playlist(e,this.requestOptions_),this.waitingForFastQualityPlaylistReceived_&&this.runFastQualitySwitch_(),this.updateDuration(!e.endList),this.tech_.paused()||(this.mainSegmentLoader_.load(),this.audioSegmentLoader_&&this.audioSegmentLoader_.load())}triggerPresenceUsage_(e,t){var i=e.mediaGroups||{};let s=!0;e=Object.keys(i.AUDIO);for(const r in i.AUDIO)for(const n in i.AUDIO[r])i.AUDIO[r][n].uri||(s=!1);s&&this.tech_.trigger({type:"usage",name:"vhs-demuxed"}),Object.keys(i.SUBTITLES).length&&this.tech_.trigger({type:"usage",name:"vhs-webvtt"}),Mu.Playlist.isAes(t)&&this.tech_.trigger({type:"usage",name:"vhs-aes"}),e.length&&1<Object.keys(i.AUDIO[e[0]]).length&&this.tech_.trigger({type:"usage",name:"vhs-alternate-audio"}),this.useCueTags_&&this.tech_.trigger({type:"usage",name:"vhs-playlist-cue-tags"})}shouldSwitchToMedia_(t){var e=this.mainPlaylistLoader_.media()||this.mainPlaylistLoader_.pendingMedia_,i=this.tech_.currentTime(),s=this.bufferLowWaterLine(),r=this.bufferHighWaterLine(),{currentPlaylist:i,buffered:e,currentTime:t,nextPlaylist:s,bufferLowWaterLine:r,bufferHighWaterLine:n,duration:a,bufferBasedABR:o,log:l}=[{buffered:this.tech_.buffered(),currentTime:i,currentPlaylist:e,nextPlaylist:t,bufferLowWaterLine:s,bufferHighWaterLine:r,duration:this.duration(),bufferBasedABR:this.bufferBasedABR,log:this.logger_}][0];if(s){var d=`allowing switch ${i&&i.id||"null"} -> `+s.id;if(!i)return l(d+" as current playlist is not set"),!0;if(s.id!==i.id){var h=Boolean(Gl(e,t).length);if(!i.endList)return h||"number"!=typeof i.partTargetDuration?(l(d+" as current playlist is live"),!0):(l(`not ${d} as current playlist is live llhls, but currentTime isn't in buffered.`),!1);h=Yl(e,t),e=o?O.EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE:O.MAX_BUFFER_LOW_WATER_LINE;if(a<e)return l(d+` as duration < max low water line (${a} < ${e})`),!0;t=s.attributes.BANDWIDTH,a=i.attributes.BANDWIDTH;if(t<a&&(!o||h<n)){let e=d+` as next bandwidth < current bandwidth (${t} < ${a})`;return o&&(e+=` and forwardBuffer < bufferHighWaterLine (${h} < ${n})`),l(e),!0}if((!o||a<t)&&r<=h){let e=d+` as forwardBuffer >= bufferLowWaterLine (${h} >= ${r})`;return o&&(e+=` and next bandwidth > current bandwidth (${t} > ${a})`),l(e),!0}l(`not ${d} as no switching criteria met`)}}else T.log.warn("We received no playlist to switch to. Please check your stream.");return!1}setupSegmentLoaderListeners_(){this.mainSegmentLoader_.on("bandwidthupdate",()=>{this.checkABR_("bandwidthupdate"),this.tech_.trigger("bandwidthupdate")}),this.mainSegmentLoader_.on("timeout",()=>{this.bufferBasedABR&&this.mainSegmentLoader_.load()}),this.bufferBasedABR||this.mainSegmentLoader_.on("progress",()=>{this.trigger("progress")}),this.mainSegmentLoader_.on("error",()=>{var e=this.mainSegmentLoader_.error();this.excludePlaylist({playlistToExclude:e.playlist,error:e})}),this.mainSegmentLoader_.on("appenderror",()=>{this.error=this.mainSegmentLoader_.error_,this.trigger("error")}),this.mainSegmentLoader_.on("syncinfoupdate",()=>{this.onSyncInfoUpdate_()}),this.mainSegmentLoader_.on("timestampoffset",()=>{this.tech_.trigger({type:"usage",name:"vhs-timestamp-offset"})}),this.audioSegmentLoader_.on("syncinfoupdate",()=>{this.onSyncInfoUpdate_()}),this.audioSegmentLoader_.on("appenderror",()=>{this.error=this.audioSegmentLoader_.error_,this.trigger("error")}),this.mainSegmentLoader_.on("ended",()=>{this.logger_("main segment loader ended"),this.onEndOfStream()}),this.mainSegmentLoader_.on("earlyabort",e=>{this.bufferBasedABR||(this.delegateLoaders_("all",["abort"]),this.excludePlaylist({error:{message:"Aborted early because there isn't enough bandwidth to complete the request without rebuffering."},playlistExclusionDuration:10}))});var e=()=>{if(!this.sourceUpdater_.hasCreatedSourceBuffers())return this.tryToCreateSourceBuffers_();var e=this.getCodecsOrExclude_();e&&this.sourceUpdater_.addOrChangeSourceBuffers(e)};this.mainSegmentLoader_.on("trackinfo",e),this.audioSegmentLoader_.on("trackinfo",e),this.mainSegmentLoader_.on("fmp4",()=>{this.triggeredFmp4Usage||(this.tech_.trigger({type:"usage",name:"vhs-fmp4"}),this.triggeredFmp4Usage=!0)}),this.audioSegmentLoader_.on("fmp4",()=>{this.triggeredFmp4Usage||(this.tech_.trigger({type:"usage",name:"vhs-fmp4"}),this.triggeredFmp4Usage=!0)}),this.audioSegmentLoader_.on("ended",()=>{this.logger_("audioSegmentLoader ended"),this.onEndOfStream()})}mediaSecondsLoaded_(){return Math.max(this.audioSegmentLoader_.mediaSecondsLoaded+this.mainSegmentLoader_.mediaSecondsLoaded)}load(){this.mainSegmentLoader_.load(),this.mediaTypes_.AUDIO.activePlaylistLoader&&this.audioSegmentLoader_.load(),this.mediaTypes_.SUBTITLES.activePlaylistLoader&&this.subtitleSegmentLoader_.load()}fastQualityChange_(e=this.selectPlaylist()){e&&e===this.mainPlaylistLoader_.media()?this.logger_("skipping fastQualityChange because new media is same as old"):(this.switchMedia_(e,"fast-quality"),this.waitingForFastQualityPlaylistReceived_=!0)}runFastQualitySwitch_(){this.waitingForFastQualityPlaylistReceived_=!1,this.mainSegmentLoader_.pause(),this.mainSegmentLoader_.resetEverything(()=>{this.tech_.setCurrentTime(this.tech_.currentTime())})}play(){var e;if(!this.setupFirstPlay())return this.tech_.ended()&&this.tech_.setCurrentTime(0),this.hasPlayed_&&this.load(),e=this.tech_.seekable(),this.tech_.duration()===1/0&&this.tech_.currentTime()<e.start(0)?this.tech_.setCurrentTime(e.end(e.length-1)):void 0}setupFirstPlay(){var t=this.mainPlaylistLoader_.media();if(!t||this.tech_.paused()||this.hasPlayed_)return!1;if(!t.endList||t.start){var i=this.seekable();if(!i.length)return!1;var s=i.end(0);let e=s;t.start&&(t=t.start.timeOffset,e=t<0?Math.max(s+t,i.start(0)):Math.min(s,t)),this.trigger("firstplay"),this.tech_.setCurrentTime(e)}return this.hasPlayed_=!0,this.load(),!0}handleSourceOpen_(){var e;this.tryToCreateSourceBuffers_(),this.tech_.autoplay()&&"undefined"!=typeof(e=this.tech_.play())&&"function"==typeof e.then&&e.then(null,e=>{}),this.trigger("sourceopen")}handleSourceEnded_(){var e,t;this.inbandTextTracks_.metadataTrack_&&(e=this.inbandTextTracks_.metadataTrack_.cues)&&e.length&&(t=this.duration(),e[e.length-1].endTime=isNaN(t)||Math.abs(t)===1/0?Number.MAX_VALUE:t)}handleDurationChange_(){this.tech_.trigger("durationchange")}onEndOfStream(){let e=this.mainSegmentLoader_.ended_;var t;this.mediaTypes_.AUDIO.activePlaylistLoader&&(t=this.mainSegmentLoader_.getCurrentMediaInfo_(),e=(t&&!t.hasVideo||e)&&this.audioSegmentLoader_.ended_),e&&(this.stopABRTimer_(),this.sourceUpdater_.endOfStream())}stuckAtPlaylistEnd_(e){var t,i;return!!this.seekable().length&&null!==(t=this.syncController_.getExpiredTime(e,this.duration()))&&(e=Mu.Playlist.playlistEnd(e,t),t=this.tech_.currentTime(),(i=this.tech_.buffered()).length?(i=i.end(i.length-1))-t<=ed&&e-i<=ed:e-t<=ed)}excludePlaylist({playlistToExclude:s=this.mainPlaylistLoader_.media(),error:t={},playlistExclusionDuration:i}){if(s=s||this.mainPlaylistLoader_.media(),i=i||t.playlistExclusionDuration||this.playlistExclusionDuration,s){s.playlistErrors_++;var r=this.mainPlaylistLoader_.main.playlists,n=r.filter(gd),n=1===n.length&&n[0]===s;if(1===r.length&&i!==1/0)return T.log.warn(`Problem encountered with playlist ${s.id}. `+"Trying again since it is the only playlist."),this.tech_.trigger("retryplaylist"),this.mainPlaylistLoader_.load(n);if(n){if(this.main().contentSteering){const o=this.pathwayAttribute_(s);var a=1e3*this.contentSteeringController_.steeringManifest.ttl;return this.contentSteeringController_.excludePathway(o),this.excludeThenChangePathway_(),void setTimeout(()=>{this.contentSteeringController_.addAvailablePathway(o)},a)}let i=!1;r.forEach(e=>{var t;e!==s&&"undefined"!=typeof(t=e.excludeUntil)&&t!==1/0&&(i=!0,delete e.excludeUntil)}),i&&(T.log.warn("Removing other playlists from the exclusion list because the last rendition is about to be excluded."),this.tech_.trigger("retryplaylist"))}let e;e=s.playlistErrors_>this.maxPlaylistRetries?1/0:Date.now()+1e3*i,s.excludeUntil=e,t.reason&&(s.lastExcludeReason_=t.reason),this.tech_.trigger("excludeplaylist"),this.tech_.trigger({type:"usage",name:"vhs-rendition-excluded"});a=this.selectPlaylist();if(a)return r=t.internal?this.logger_:T.log.warn,i=t.message?" "+t.message:"",r(`${t.internal?"Internal problem":"Problem"} encountered with playlist ${s.id}.`+i+` Switching to playlist ${a.id}.`),a.attributes.AUDIO!==s.attributes.AUDIO&&this.delegateLoaders_("audio",["abort","pause"]),a.attributes.SUBTITLES!==s.attributes.SUBTITLES&&this.delegateLoaders_("subtitle",["abort","pause"]),this.delegateLoaders_("main",["abort","pause"]),r=a.targetDuration/2*1e3||5e3,i="number"==typeof a.lastRequest&&Date.now()-a.lastRequest<=r,this.switchMedia_(a,"exclude",n||i);this.error="Playback cannot continue. No available working or supported playlists.",this.trigger("error")}else this.error=t,"open"!==this.mediaSource.readyState?this.trigger("error"):this.sourceUpdater_.endOfStream("network")}pauseLoading(){this.delegateLoaders_("all",["abort","pause"]),this.stopABRTimer_()}delegateLoaders_(i,e){const s=[];var t="all"===i,r=(!t&&"main"!==i||s.push(this.mainPlaylistLoader_),[]);!t&&"audio"!==i||r.push("AUDIO"),!t&&"subtitle"!==i||(r.push("CLOSED-CAPTIONS"),r.push("SUBTITLES")),r.forEach(e=>{e=this.mediaTypes_[e]&&this.mediaTypes_[e].activePlaylistLoader;e&&s.push(e)}),["main","audio","subtitle"].forEach(e=>{var t=this[e+"SegmentLoader_"];!t||i!==e&&"all"!==i||s.push(t)}),s.forEach(t=>e.forEach(e=>{"function"==typeof t[e]&&t[e]()}))}setCurrentTime(e){var t=Gl(this.tech_.buffered(),e);return this.mainPlaylistLoader_&&this.mainPlaylistLoader_.media()&&this.mainPlaylistLoader_.media().segments?t&&t.length?e:(this.mainSegmentLoader_.pause(),this.mainSegmentLoader_.resetEverything(),this.mediaTypes_.AUDIO.activePlaylistLoader&&(this.audioSegmentLoader_.pause(),this.audioSegmentLoader_.resetEverything()),this.mediaTypes_.SUBTITLES.activePlaylistLoader&&(this.subtitleSegmentLoader_.pause(),this.subtitleSegmentLoader_.resetEverything()),void this.load()):0}duration(){var e;return this.mainPlaylistLoader_&&(e=this.mainPlaylistLoader_.media())?e.endList?this.mediaSource?this.mediaSource.duration:Mu.Playlist.duration(e):1/0:0}seekable(){return this.seekable_}onSyncInfoUpdate_(){let i;if(this.mainPlaylistLoader_){var s=this.mainPlaylistLoader_.media();if(s){var r=this.syncController_.getExpiredTime(s,this.duration());if(null!==r){var n=this.mainPlaylistLoader_.main,a=Mu.Playlist.seekable(s,r,Mu.Playlist.liveEdgeDelay(n,s));if(0!==a.length){if(this.mediaTypes_.AUDIO.activePlaylistLoader){if(s=this.mediaTypes_.AUDIO.activePlaylistLoader.media(),null===(r=this.syncController_.getExpiredTime(s,this.duration())))return;if(0===(i=Mu.Playlist.seekable(s,r,Mu.Playlist.liveEdgeDelay(n,s))).length)return}let e,t;this.seekable_&&this.seekable_.length&&(e=this.seekable_.end(0),t=this.seekable_.start(0)),!i||i.start(0)>a.end(0)||a.start(0)>i.end(0)?this.seekable_=a:this.seekable_=Wl([[(i.start(0)>a.start(0)?i:a).start(0),(i.end(0)<a.end(0)?i:a).end(0)]]),this.seekable_&&this.seekable_.length&&this.seekable_.end(0)===e&&this.seekable_.start(0)===t||(this.logger_(`seekable updated [${id(this.seekable_)}]`),this.tech_.trigger("seekablechanged"))}}}}}updateDuration(t){if(this.updateDuration_&&(this.mediaSource.removeEventListener("sourceopen",this.updateDuration_),this.updateDuration_=null),"open"!==this.mediaSource.readyState)this.updateDuration_=this.updateDuration.bind(this,t),this.mediaSource.addEventListener("sourceopen",this.updateDuration_);else{if(t)return(t=this.seekable()).length?void((isNaN(this.mediaSource.duration)||this.mediaSource.duration<t.end(t.length-1))&&this.sourceUpdater_.setDuration(t.end(t.length-1))):void 0;t=this.tech_.buffered();let e=Mu.Playlist.duration(this.mainPlaylistLoader_.media());0<t.length&&(e=Math.max(e,t.end(t.length-1))),this.mediaSource.duration!==e&&this.sourceUpdater_.setDuration(e)}}dispose(){this.trigger("dispose"),this.decrypter_.terminate(),this.mainPlaylistLoader_.dispose(),this.mainSegmentLoader_.dispose(),this.contentSteeringController_.dispose(),this.keyStatusMap_.clear(),this.loadOnPlay_&&this.tech_.off("play",this.loadOnPlay_),["AUDIO","SUBTITLES"].forEach(e=>{var t=this.mediaTypes_[e].groups;for(const i in t)t[i].forEach(e=>{e.playlistLoader&&e.playlistLoader.dispose()})}),this.audioSegmentLoader_.dispose(),this.subtitleSegmentLoader_.dispose(),this.sourceUpdater_.dispose(),this.timelineChangeController_.dispose(),this.stopABRTimer_(),this.updateDuration_&&this.mediaSource.removeEventListener("sourceopen",this.updateDuration_),this.mediaSource.removeEventListener("durationchange",this.handleDurationChange_),this.mediaSource.removeEventListener("sourceopen",this.handleSourceOpen_),this.mediaSource.removeEventListener("sourceended",this.handleSourceEnded_),this.off()}main(){return this.mainPlaylistLoader_.main}media(){return this.mainPlaylistLoader_.media()||this.initialMedia_}areMediaTypesKnown_(){var e=!!this.mediaTypes_.AUDIO.activePlaylistLoader,t=!!this.mainSegmentLoader_.getCurrentMediaInfo_(),e=!e||!!this.audioSegmentLoader_.getCurrentMediaInfo_();return t&&e}getCodecsOrExclude_(){const r={main:this.mainSegmentLoader_.getCurrentMediaInfo_()||{},audio:this.audioSegmentLoader_.getCurrentMediaInfo_()||{}},t=this.mainSegmentLoader_.getPendingSegmentPlaylist()||this.media();r.video=r.main;var e=Sh(this.main(),t);const n={};var i=!!this.mediaTypes_.AUDIO.activePlaylistLoader;if(r.main.hasVideo&&(n.video=e.video||r.main.videoCodec||"avc1.4d400d"),r.main.isMuxed&&(n.video+=","+(e.audio||r.main.audioCodec||Wn)),(r.main.hasAudio&&!r.main.isMuxed||r.audio.hasAudio||i)&&(n.audio=e.audio||r.main.audioCodec||r.audio.audioCodec||Wn,r.audio.isFmp4=(r.main.hasAudio&&!r.main.isMuxed?r.main:r.audio).isFmp4),n.audio||n.video){const a={};let s;if(["video","audio"].forEach(function(e){var t,i;n.hasOwnProperty(e)&&(t=r[e].isFmp4,i=n[e],!(t?Nn:Mn)(i))&&(t=r[e].isFmp4?"browser":"muxer",a[t]=a[t]||[],a[t].push(n[e]),"audio"===e&&(s=t))}),i&&s&&t.attributes.AUDIO){const o=t.attributes.AUDIO;this.main().playlists.forEach(e=>{(e.attributes&&e.attributes.AUDIO)===o&&e!==t&&(e.excludeUntil=1/0)}),this.logger_(`excluding audio group ${o} as ${s} does not support codec(s): "${n.audio}"`)}if(!Object.keys(a).length){if(this.sourceUpdater_.hasCreatedSourceBuffers()&&!this.sourceUpdater_.canChangeType()){const l=[];if(["video","audio"].forEach(e=>{var t=($n(this.sourceUpdater_.codecs[e]||"")[0]||{}).type,i=($n(n[e]||"")[0]||{}).type;t&&i&&t.toLowerCase()!==i.toLowerCase()&&l.push(`"${this.sourceUpdater_.codecs[e]}" -> "${n[e]}"`)}),l.length)return void this.excludePlaylist({playlistToExclude:t,error:{message:`Codec switching not supported: ${l.join(", ")}.`,internal:!0},playlistExclusionDuration:1/0})}return n}e=Object.keys(a).reduce((e,t)=>(e&&(e+=", "),e+=`${t} does not support codec(s): "${a[t].join(",")}"`),"")+".",this.excludePlaylist({playlistToExclude:t,error:{internal:!0,message:e},playlistExclusionDuration:1/0})}else this.excludePlaylist({playlistToExclude:t,error:{message:"Could not determine codecs for playlist."},playlistExclusionDuration:1/0})}tryToCreateSourceBuffers_(){var e;"open"!==this.mediaSource.readyState||this.sourceUpdater_.hasCreatedSourceBuffers()||this.areMediaTypesKnown_()&&(e=this.getCodecsOrExclude_())&&(this.sourceUpdater_.createSourceBuffers(e),e=[e.video,e.audio].filter(Boolean).join(","),this.excludeIncompatibleVariants_(e))}excludeUnsupportedVariants_(){const s=this.main().playlists,r=[];Object.keys(s).forEach(e=>{var t,i,e=s[e];-1===r.indexOf(e.id)&&(r.push(e.id),i=[],!(t=Sh(this.main,e)).audio||Mn(t.audio)||Nn(t.audio)||i.push("audio codec "+t.audio),!t.video||Mn(t.video)||Nn(t.video)||i.push("video codec "+t.video),t.text&&"stpp.ttml.im1t"===t.text&&i.push("text codec "+t.text),i.length)&&(e.excludeUntil=1/0,this.logger_(`excluding ${e.id} for unsupported: `+i.join(", ")))})}excludeIncompatibleVariants_(e){const r=[],n=this.main().playlists;e=Fh($n(e));const a=Th(e),o=e.video&&$n(e.video)[0]||null,l=e.audio&&$n(e.audio)[0]||null;Object.keys(n).forEach(e=>{var t,i,s,e=n[e];-1===r.indexOf(e.id)&&e.excludeUntil!==1/0&&(r.push(e.id),t=[],s=Sh(this.mainPlaylistLoader_.main,e),i=Th(s),s.audio||s.video)&&(i!==a&&t.push(`codec count "${i}" !== "${a}"`),this.sourceUpdater_.canChangeType()||(i=s.video&&$n(s.video)[0]||null,s=s.audio&&$n(s.audio)[0]||null,i&&o&&i.type.toLowerCase()!==o.type.toLowerCase()&&t.push(`video codec "${i.type}" !== "${o.type}"`),s&&l&&s.type.toLowerCase()!==l.type.toLowerCase()&&t.push(`audio codec "${s.type}" !== "${l.type}"`)),t.length)&&(e.excludeUntil=1/0,this.logger_(`excluding ${e.id}: `+t.join(" && ")))})}updateAdCues_(e){let t=0;var s=this.seekable(),[r,n,s=0]=(s.length&&(t=s.start(0)),[e,this.cueTagsTrack_,t]);if(r.segments){let t=s,i;for(let e=0;e<r.segments.length;e++){var a,o,l=r.segments[e];if(i=i||function(e,t){var i=e.cues;for(let e=0;e<i.length;e++){var s=i[e];if(t>=s.adStartTime&&t<=s.adEndTime)return s}return null}(n,t+l.duration/2)){if("cueIn"in l){i.endTime=t,i.adEndTime=t,t+=l.duration,i=null;continue}if(t<i.endTime){t+=l.duration;continue}i.endTime+=l.duration}else"cueOut"in l&&((i=new window.VTTCue(t,t+l.duration,l.cueOut)).adStartTime=t,i.adEndTime=t+parseFloat(l.cueOut),n.addCue(i)),"cueOutCont"in l&&([a,o]=l.cueOutCont.split("/").map(parseFloat),(i=new window.VTTCue(t,t+l.duration,"")).adStartTime=t-a,i.adEndTime=i.adStartTime+o,n.addCue(i));t+=l.duration}}}goalBufferLength(){var e=this.tech_.currentTime(),t=O.GOAL_BUFFER_LENGTH,i=O.GOAL_BUFFER_LENGTH_RATE,s=Math.max(t,O.MAX_GOAL_BUFFER_LENGTH);return Math.min(t+e*i,s)}bufferLowWaterLine(){var e=this.tech_.currentTime(),t=O.BUFFER_LOW_WATER_LINE,i=O.BUFFER_LOW_WATER_LINE_RATE,s=Math.max(t,O.MAX_BUFFER_LOW_WATER_LINE),r=Math.max(t,O.EXPERIMENTAL_MAX_BUFFER_LOW_WATER_LINE);return Math.min(t+e*i,this.bufferBasedABR?r:s)}bufferHighWaterLine(){return O.BUFFER_HIGH_WATER_LINE}addDateRangesToTextTrack_(e){Yh(this.inbandTextTracks_,"com.apple.streaming",this.tech_);{var{inbandTextTracks:e,dateRanges:t}={inbandTextTracks:this.inbandTextTracks_,dateRanges:e};const s=e.metadataTrack_;if(s){const r=window.WebKitDataCue||window.VTTCue;t.forEach(e=>{for(const i of Object.keys(e)){var t;Kh.has(i)||((t=new r(e.startTime,e.endTime,"")).id=e.id,t.type="com.apple.quicktime.HLS",t.value={key:Xh[i],data:e[i]},"scte35Out"!==i&&"scte35In"!==i||(t.value.data=new Uint8Array(t.value.data.match(/[\da-f]{2}/gi)).buffer),s.addCue(t))}e.processDateRange()})}}}addMetadataToTextTrack(e,t,i){var s=this.sourceUpdater_.videoBuffer?this.sourceUpdater_.videoTimestampOffset():this.sourceUpdater_.audioTimestampOffset();Yh(this.inbandTextTracks_,e,this.tech_),Gh({inbandTextTracks:this.inbandTextTracks_,metadataArray:t,timestampOffset:s,videoDuration:i})}pathwayAttribute_(e){return e.attributes["PATHWAY-ID"]||e.attributes.serviceLocation}initContentSteeringController_(){var e=this.main();if(e.contentSteering){for(const t of e.playlists)this.contentSteeringController_.addAvailablePathway(this.pathwayAttribute_(t));this.contentSteeringController_.assignTagProperties(e.uri,e.contentSteering),this.contentSteeringController_.queryBeforeStart?this.contentSteeringController_.requestSteeringManifest(!0):this.tech_.one("canplay",()=>{this.contentSteeringController_.requestSteeringManifest()})}}resetContentSteeringController_(){this.contentSteeringController_.clearAvailablePathways(),this.contentSteeringController_.dispose(),this.initContentSteeringController_()}attachContentSteeringListeners_(){this.contentSteeringController_.on("content-steering",this.excludeThenChangePathway_.bind(this)),"dash"===this.sourceType_&&this.mainPlaylistLoader_.on("loadedplaylist",()=>{const r=this.main();(this.contentSteeringController_.didDASHTagChange(r.uri,r.contentSteering)||(()=>{var e=this.contentSteeringController_.getAvailablePathways(),t=[];for(const s of r.playlists){var i=s.attributes.serviceLocation;if(i&&(t.push(i),!e.has(i)))return!0}return!(t.length||!e.size)})())&&this.resetContentSteeringController_()})}excludeThenChangePathway_(){const r=this.contentSteeringController_.getPathway();if(r){this.handlePathwayClones_();const n=this.main().playlists,a=new Set;let s=!1;Object.keys(n).forEach(e=>{var e=n[e],t=this.pathwayAttribute_(e),t=t&&r!==t,i=(e.excludeUntil===1/0&&"content-steering"===e.lastExcludeReason_&&!t&&(delete e.excludeUntil,delete e.lastExcludeReason_,s=!0),!e.excludeUntil&&e.excludeUntil!==1/0);!a.has(e.id)&&t&&i&&(a.add(e.id),e.excludeUntil=1/0,e.lastExcludeReason_="content-steering",this.logger_(`excluding ${e.id} for `+e.lastExcludeReason_))}),"DASH"===this.contentSteeringController_.manifestType_&&Object.keys(this.mediaTypes_).forEach(e=>{var e=this.mediaTypes_[e];e.activePlaylistLoader&&(e=e.activePlaylistLoader.media_)&&e.attributes.serviceLocation!==r&&(s=!0)}),s&&this.changeSegmentPathway_()}}handlePathwayClones_(){var e=this.main().playlists,t=this.contentSteeringController_.currentPathwayClones,i=this.contentSteeringController_.nextPathwayClones;if(t&&t.size||i&&i.size){for(var[s,r]of t.entries())i.get(s)||(this.mainPlaylistLoader_.updateOrDeleteClone(r),this.contentSteeringController_.excludePathway(s));for(const[a,o]of i.entries()){var n=t.get(a);n?this.equalPathwayClones_(n,o)||(this.mainPlaylistLoader_.updateOrDeleteClone(o,!0),this.contentSteeringController_.addAvailablePathway(a)):(e.filter(e=>e.attributes["PATHWAY-ID"]===o["BASE-ID"]).forEach(e=>{this.mainPlaylistLoader_.addClonePathway(o,e)}),this.contentSteeringController_.addAvailablePathway(a))}this.contentSteeringController_.currentPathwayClones=new Map(JSON.parse(JSON.stringify([...i])))}}equalPathwayClones_(e,t){if(e["BASE-ID"]!==t["BASE-ID"]||e.ID!==t.ID||e["URI-REPLACEMENT"].HOST!==t["URI-REPLACEMENT"].HOST)return!1;var i=e["URI-REPLACEMENT"].PARAMS,s=t["URI-REPLACEMENT"].PARAMS;for(const r in i)if(i[r]!==s[r])return!1;for(const n in s)if(i[n]!==s[n])return!1;return!0}changeSegmentPathway_(){var e=this.selectPlaylist();this.pauseLoading(),"DASH"===this.contentSteeringController_.manifestType_&&this.switchMediaForDASHContentSteering_(),this.switchMedia_(e,"content-steering")}excludeNonUsablePlaylistsByKeyId_(){if(this.mainPlaylistLoader_&&this.mainPlaylistLoader_.main){let r=0;const n="non-usable";this.mainPlaylistLoader_.main.playlists.forEach(s=>{var e=this.mainPlaylistLoader_.getKeyIdSet(s);e&&e.size&&e.forEach(e=>{var t="usable",t=this.keyStatusMap_.has(e)&&this.keyStatusMap_.get(e)===t,i=s.lastExcludeReason_===n&&s.excludeUntil===1/0;t?i&&(delete s.excludeUntil,delete s.lastExcludeReason_,this.logger_(`enabling playlist ${s.id} because key ID ${e} is usable`)):(s.excludeUntil!==1/0&&s.lastExcludeReason_!==n&&(s.excludeUntil=1/0,s.lastExcludeReason_=n,this.logger_(`excluding playlist ${s.id} because the key ID ${e} doesn't exist in the keyStatusMap or is not usable`)),r++)})}),r>=this.mainPlaylistLoader_.main.playlists.length&&this.mainPlaylistLoader_.main.playlists.forEach(e=>{var t=e&&e.attributes&&e.attributes.RESOLUTION&&e.attributes.RESOLUTION.height<720,i=e.excludeUntil===1/0&&e.lastExcludeReason_===n;t&&i&&(delete e.excludeUntil,T.log.warn(`enabling non-HD playlist ${e.id} because all playlists were excluded due to ${n} key IDs`))})}}addKeyStatus_(e,t){e=("string"==typeof e?e:(e=>{e=new Uint8Array(e);return Array.from(e).map(e=>e.toString(16).padStart(2,"0")).join("")})(e)).slice(0,32).toLowerCase();this.logger_(`KeyStatus '${t}' with key ID ${e} added to the keyStatusMap`),this.keyStatusMap_.set(e,t)}updatePlaylistByKeyStatus(e,t){this.addKeyStatus_(e,t),this.waitingForFastQualityPlaylistReceived_||this.excludeNonUsableThenChangePlaylist_(),this.mainPlaylistLoader_.off("loadedplaylist",this.excludeNonUsableThenChangePlaylist_.bind(this)),this.mainPlaylistLoader_.on("loadedplaylist",this.excludeNonUsableThenChangePlaylist_.bind(this))}excludeNonUsableThenChangePlaylist_(){this.excludeNonUsablePlaylistsByKeyId_(),this.fastQualityChange_()}}class Fu{constructor(e,t,i){var s,r,n,a,o=e["playlistController_"],l=o.fastQualityChange_.bind(o);t.attributes&&(s=t.attributes.RESOLUTION,this.width=s&&s.width,this.height=s&&s.height,this.bandwidth=t.attributes.BANDWIDTH,this.frameRate=t.attributes["FRAME-RATE"]),this.codecs=Sh(o.main(),t),this.playlist=t,this.id=i,this.enabled=(r=e.playlists,n=t.id,a=l,e=>{var t=r.main.playlists[n],i=md(t),s=gd(t);return"undefined"==typeof e?s:(e?delete t.disabled:t.disabled=!0,e===s||i||(a(t),e?r.trigger("renditionenabled"):r.trigger("renditiondisabled")),e)})}}const qu=["seeking","seeked","pause","playing","error"];class ju{constructor(e){this.playlistController_=e.playlistController,this.tech_=e.tech,this.seekable=e.seekable,this.allowSeeksWithinUnsafeLiveWindow=e.allowSeeksWithinUnsafeLiveWindow,this.liveRangeSafeTimeDelta=e.liveRangeSafeTimeDelta,this.media=e.media,this.consecutiveUpdates=0,this.lastRecordedTime=null,this.checkCurrentTimeTimeout_=null,this.logger_=zl("PlaybackWatcher"),this.logger_("initialize");const t=()=>this.monitorCurrentTime_(),i=()=>this.monitorCurrentTime_(),s=()=>this.techWaiting_(),r=()=>this.resetTimeUpdate_(),n=this.playlistController_,a=["main","subtitle","audio"],o={},l=(a.forEach(e=>{o[e]={reset:()=>this.resetSegmentDownloads_(e),updateend:()=>this.checkSegmentDownloads_(e)},n[e+"SegmentLoader_"].on("appendsdone",o[e].updateend),n[e+"SegmentLoader_"].on("playlistupdate",o[e].reset),this.tech_.on(["seeked","seeking"],o[e].reset)}),t=>{["main","audio"].forEach(e=>{n[e+"SegmentLoader_"][t]("appended",this.seekingAppendCheck_)})});this.seekingAppendCheck_=()=>{this.fixesBadSeeks_()&&(this.consecutiveUpdates=0,this.lastRecordedTime=this.tech_.currentTime(),l("off"))},this.clearSeekingAppendCheck_=()=>l("off"),this.watchForBadSeeking_=()=>{this.clearSeekingAppendCheck_(),l("on")},this.tech_.on("seeked",this.clearSeekingAppendCheck_),this.tech_.on("seeking",this.watchForBadSeeking_),this.tech_.on("waiting",s),this.tech_.on(qu,r),this.tech_.on("canplay",i),this.tech_.one("play",t),this.dispose=()=>{this.clearSeekingAppendCheck_(),this.logger_("dispose"),this.tech_.off("waiting",s),this.tech_.off(qu,r),this.tech_.off("canplay",i),this.tech_.off("play",t),this.tech_.off("seeking",this.watchForBadSeeking_),this.tech_.off("seeked",this.clearSeekingAppendCheck_),a.forEach(e=>{n[e+"SegmentLoader_"].off("appendsdone",o[e].updateend),n[e+"SegmentLoader_"].off("playlistupdate",o[e].reset),this.tech_.off(["seeked","seeking"],o[e].reset)}),this.checkCurrentTimeTimeout_&&window.clearTimeout(this.checkCurrentTimeTimeout_),this.resetTimeUpdate_()}}monitorCurrentTime_(){this.checkCurrentTime_(),this.checkCurrentTimeTimeout_&&window.clearTimeout(this.checkCurrentTimeTimeout_),this.checkCurrentTimeTimeout_=window.setTimeout(this.monitorCurrentTime_.bind(this),250)}resetSegmentDownloads_(e){var t=this.playlistController_[e+"SegmentLoader_"];0<this[e+"StalledDownloads_"]&&this.logger_(`resetting possible stalled download count for ${e} loader`),this[e+"StalledDownloads_"]=0,this[e+"Buffered_"]=t.buffered_()}checkSegmentDownloads_(e){var t=this.playlistController_,i=t[e+"SegmentLoader_"],s=i.buffered_(),r=function(t,i){if(t!==i){if(!t&&i||!i&&t)return!0;if(t.length!==i.length)return!0;for(let e=0;e<t.length;e++)if(t.start(e)!==i.start(e)||t.end(e)!==i.end(e))return!0}return!1}(this[e+"Buffered_"],s);this[e+"Buffered_"]=s,r?this.resetSegmentDownloads_(e):(this[e+"StalledDownloads_"]++,this.logger_(`found #${this[e+"StalledDownloads_"]} ${e} appends that did not increase buffer (possible stalled download)`,{playlistId:i.playlist_&&i.playlist_.id,buffered:sd(s)}),this[e+"StalledDownloads_"]<10||(this.logger_(e+" loader stalled download exclusion"),this.resetSegmentDownloads_(e),this.tech_.trigger({type:"usage",name:`vhs-${e}-download-exclusion`}),"subtitle"!==e&&t.excludePlaylist({error:{message:`Excessive ${e} segment downloading detected.`},playlistExclusionDuration:1/0})))}checkCurrentTime_(){var e,t;if(!this.tech_.paused()&&!this.tech_.seeking())return e=this.tech_.currentTime(),t=this.tech_.buffered(),this.lastRecordedTime===e&&(!t.length||e+ed>=t.end(t.length-1))?this.techWaiting_():void(5<=this.consecutiveUpdates&&e===this.lastRecordedTime?(this.consecutiveUpdates++,this.waiting_()):e===this.lastRecordedTime?this.consecutiveUpdates++:(this.consecutiveUpdates=0,this.lastRecordedTime=e))}resetTimeUpdate_(){this.consecutiveUpdates=0}fixesBadSeeks_(){if(!this.tech_.seeking())return!1;var e=this.seekable(),t=this.tech_.currentTime();let i;if(this.afterSeekableWindow_(e,t,this.media(),this.allowSeeksWithinUnsafeLiveWindow)&&(s=e.end(e.length-1),i=s),this.beforeSeekableWindow_(e,t)&&(s=e.start(0),i=s+(s===e.end(0)?0:ed)),"undefined"!=typeof i)this.logger_(`Trying to seek outside of seekable at time ${t} with `+`seekable range ${id(e)}. Seeking to `+i+".");else{var s=this.playlistController_.sourceUpdater_,e=this.tech_.buffered(),r=s.audioBuffer?s.audioBuffered():null,s=s.videoBuffer?s.videoBuffered():null,n=this.media(),a=n.partTargetDuration||2*(n.targetDuration-Zl),o=[r,s];for(let e=0;e<o.length;e++)if(o[e])if(Yl(o[e],t)<a)return!1;if(0===(n=Xl(e,t)).length)return!1;i=n.start(0)+ed,this.logger_(`Buffered region starts (${n.start(0)}) `+` just beyond seek point (${t}). Seeking to ${i}.`)}return this.tech_.setCurrentTime(i),!0}waiting_(){var e,t;this.techWaiting_()||(e=this.tech_.currentTime(),t=this.tech_.buffered(),(t=Gl(t,e)).length&&e+3<=t.end(0)&&(this.resetTimeUpdate_(),this.tech_.setCurrentTime(e),this.logger_(`Stopped at ${e} while inside a buffered region `+`[${t.start(0)} -> ${t.end(0)}]. Attempting to resume `+"playback by seeking to the current time."),this.tech_.trigger({type:"usage",name:"vhs-unknown-waiting"})))}techWaiting_(){var e,t=this.seekable(),i=this.tech_.currentTime();return!!this.tech_.seeking()||(this.beforeSeekableWindow_(t,i)?(t=t.end(t.length-1),this.logger_(`Fell out of live window at time ${i}. Seeking to `+"live point (seekable end) "+t),this.resetTimeUpdate_(),this.tech_.setCurrentTime(t),this.tech_.trigger({type:"usage",name:"vhs-live-resync"}),!0):(t=this.tech_.vhs.playlistController_.sourceUpdater_,e=this.tech_.buffered(),this.videoUnderflow_({audioBuffered:t.audioBuffered(),videoBuffered:t.videoBuffered(),currentTime:i})?(this.resetTimeUpdate_(),this.tech_.setCurrentTime(i),this.tech_.trigger({type:"usage",name:"vhs-video-underflow"}),!0):0<(t=Xl(e,i)).length&&(this.logger_(`Stopped at ${i} and seeking to `+t.start(0)),this.resetTimeUpdate_(),this.skipTheGap_(i),!0)))}afterSeekableWindow_(e,t,i,s=!1){if(!e.length)return!1;let r=e.end(e.length-1)+ed;var n=!i.endList,a="number"==typeof i.partTargetDuration;return t>(r=n&&(a||s)?e.end(e.length-1)+3*i.targetDuration:r)}beforeSeekableWindow_(e,t){return!!(e.length&&0<e.start(0)&&t<e.start(0)-this.liveRangeSafeTimeDelta)}videoUnderflow_({videoBuffered:t,audioBuffered:i,currentTime:s}){if(t){let e;var r,n;return t.length&&i.length?(r=Gl(t,s-3),n=Gl(t,s),(i=Gl(i,s)).length&&!n.length&&r.length&&(e={start:r.end(0),end:i.end(0)})):Xl(t,s).length||(e=this.gapFromVideoUnderflow_(t,s)),!!e&&(this.logger_(`Encountered a gap in video from ${e.start} to ${e.end}. `+"Seeking to current time "+s),!0)}}skipTheGap_(e){var t=this.tech_.buffered(),i=this.tech_.currentTime(),t=Xl(t,i);this.resetTimeUpdate_(),0!==t.length&&i===e&&(this.logger_("skipTheGap_:","currentTime:",i,"scheduled currentTime:",e,"nextRange start:",t.start(0)),this.tech_.setCurrentTime(t.start(0)+Zl),this.tech_.trigger({type:"usage",name:"vhs-gap-skip"}))}gapFromVideoUnderflow_(e,t){var i=function(t){if(t.length<2)return Wl();var i=[];for(let e=1;e<t.length;e++){var s=t.end(e-1),r=t.start(e);i.push([s,r])}return Wl(i)}(e);for(let e=0;e<i.length;e++){var s=i.start(e),r=i.end(e);if(t-s<4&&2<t-s)return{start:s,end:r}}return null}}const Hu={errorInterval:30,getSource(e){return e(this.tech({IWillNotUseThisInPlugins:!0}).currentSource_||this.currentSource())}},Vu=function(t,e){let i=0,s=0;function r(e){null!=e&&(s=t.duration()!==1/0&&t.currentTime()||0,t.one("loadedmetadata",l),t.src(e),t.trigger({type:"usage",name:"vhs-error-reload"}),t.play())}function n(){if(Date.now()-i<1e3*o.errorInterval)t.trigger({type:"usage",name:"vhs-error-reload-canceled"});else{if(o.getSource&&"function"==typeof o.getSource)return i=Date.now(),o.getSource.call(t,r);T.log.error("ERROR: reloadSourceOnError - The option getSource must be a function!")}}function a(){t.off("loadedmetadata",l),t.off("error",n),t.off("dispose",a)}const o=L(Hu,e),l=(t.ready(()=>{t.trigger({type:"usage",name:"vhs-error-reload-initialized"})}),function(){s&&t.currentTime(s)});t.on("error",n),t.on("dispose",a),t.reloadSourceOnError=function(e){a(),Vu(t,e)}};function $u(t,e){var i=e.media();let s=-1;for(let e=0;e<t.length;e++)if(t[e].id===i.id){s=e;break}t.selectedIndex_=s,t.trigger({selectedIndex:s,type:"change"})}const R={PlaylistLoader:Nd,Playlist:Td,utils:Fr,STANDARD_PLAYLIST_SELECTOR:$h,INITIAL_PLAYLIST_SELECTOR:function(){var e=this.playlists.main.playlists.filter(Td.isEnabled),e=(Hh(e,(e,t)=>Eh(e,t)),e.filter(e=>!!Sh(this.playlists.main,e).video));return e[0]||null},lastBandwidthSelector:$h,movingAverageBandwidthSelector:function(t){let i=-1,s=-1;if(t<0||1<t)throw new Error("Moving average bandwidth decay must be between 0 and 1.");return function(){let e=this.useDevicePixelRatio&&window.devicePixelRatio||1;return isNaN(this.customPixelRatio)||(e=this.customPixelRatio),i<0&&(i=this.systemBandwidth,s=this.systemBandwidth),0<this.systemBandwidth&&this.systemBandwidth!==s&&(i=t*this.systemBandwidth+(1-t)*i,s=this.systemBandwidth),Vh(this.playlists.main,i,parseInt(wh(this.tech_.el(),"width"),10)*e,parseInt(wh(this.tech_.el(),"height"),10)*e,this.limitRenditionByPlayerDimensions,this.playlistController_)}},comparePlaylistBandwidth:Eh,comparePlaylistResolution:function(e,t){let i,s;return i=(i=e.attributes.RESOLUTION&&e.attributes.RESOLUTION.width?e.attributes.RESOLUTION.width:i)||window.Number.MAX_VALUE,s=(s=t.attributes.RESOLUTION&&t.attributes.RESOLUTION.width?t.attributes.RESOLUTION.width:s)||window.Number.MAX_VALUE,i===s&&e.attributes.BANDWIDTH&&t.attributes.BANDWIDTH?e.attributes.BANDWIDTH-t.attributes.BANDWIDTH:i-s},xhr:Ud()},zu=(Object.keys(O).forEach(t=>{Object.defineProperty(R,t,{get(){return T.log.warn(`using Vhs.${t} is UNSAFE be sure you know what you are doing`),O[t]},set(e){T.log.warn(`using Vhs.${t} is UNSAFE be sure you know what you are doing`),"number"!=typeof e||e<0?T.log.warn(`value of Vhs.${t} must be greater than or equal to 0`):O[t]=e}})}),"videojs-vhs"),Wu=(R.canPlaySource=function(){return T.log.warn("VHS is no longer a tech. Please remove it from your player's techOrder.")},({player:s,sourceKeySystems:e,audioMedia:t,mainPlaylists:i})=>{if(!s.eme.initializeMediaKeys)return Promise.resolve();var r,t=t?i.concat([t]):i,t=(i=t,r=Object.keys(e),i.reduce((e,s)=>{var t;return s.contentProtection&&(t=r.reduce((e,t)=>{var i=s.contentProtection[t];return i&&i.pssh&&(e[t]={pssh:i.pssh}),e},{}),Object.keys(t).length)&&e.push(t),e},[]));const n=[],a=[];return t.forEach(e=>{a.push(new Promise((e,t)=>{s.tech_.one("keysessioncreated",e)})),n.push(new Promise((t,i)=>{s.eme.initializeMediaKeys({keySystems:e},e=>{e?i(e):t()})}))}),Promise.race([Promise.all(n),Promise.race(a)])}),Gu=({player:e,sourceKeySystems:t,media:i,audioMedia:s})=>{t=((e,t,i)=>{if(!e)return e;let s={};t&&t.attributes&&t.attributes.CODECS&&(s=Fh($n(t.attributes.CODECS))),i&&i.attributes&&i.attributes.CODECS&&(s.audio=i.attributes.CODECS);var r=zn(s.video),n=zn(s.audio),a={};for(const o in e)a[o]={},n&&(a[o].audioContentType=n),r&&(a[o].videoContentType=r),t.contentProtection&&t.contentProtection[o]&&t.contentProtection[o].pssh&&(a[o].pssh=t.contentProtection[o].pssh),"string"==typeof e[o]&&(a[o].url=e[o]);return L(e,a)})(t,i,s);return!(!t||(e.currentSource().keySystems=t)&&!e.eme&&(T.log.warn("DRM encrypted source cannot be decrypted without a DRM plugin"),1))},Xu=()=>{if(!window.localStorage)return null;var e=window.localStorage.getItem(zu);if(!e)return null;try{return JSON.parse(e)}catch(e){return null}},Ku=(e,t)=>{e._requestCallbackSet||(e._requestCallbackSet=new Set),e._requestCallbackSet.add(t)},Yu=(e,t)=>{e._responseCallbackSet||(e._responseCallbackSet=new Set),e._responseCallbackSet.add(t)},Qu=(e,t)=>{e._requestCallbackSet&&(e._requestCallbackSet.delete(t),e._requestCallbackSet.size||delete e._requestCallbackSet)},Ju=(e,t)=>{e._responseCallbackSet&&(e._responseCallbackSet.delete(t),e._responseCallbackSet.size||delete e._responseCallbackSet)};R.supportsNativeHls=function(){if(!document||!document.createElement)return!1;const t=document.createElement("video");return!!T.getTech("Html5").isSupported()&&["application/vnd.apple.mpegurl","audio/mpegurl","audio/x-mpegurl","application/x-mpegurl","video/x-mpegurl","video/mpegurl","application/mpegurl"].some(function(e){return/maybe|probably/i.test(t.canPlayType(e))})}(),R.supportsNativeDash=!!(document&&document.createElement&&T.getTech("Html5").isSupported())&&/maybe|probably/i.test(document.createElement("video").canPlayType("application/dash+xml")),R.supportsTypeNatively=e=>"hls"===e?R.supportsNativeHls:"dash"===e&&R.supportsNativeDash,R.isSupported=function(){return T.log.warn("VHS is no longer a tech. Please remove it from your player's techOrder.")},R.xhr.onRequest=function(e){Ku(R.xhr,e)},R.xhr.onResponse=function(e){Yu(R.xhr,e)},R.xhr.offRequest=function(e){Qu(R.xhr,e)},R.xhr.offResponse=function(e){Ju(R.xhr,e)};class Zu extends T.getComponent("Component"){constructor(e,t,i){if(super(t,i.vhs),"number"==typeof i.initialBandwidth&&(this.options_.bandwidth=i.initialBandwidth),this.logger_=zl("VhsHandler"),t.options_&&t.options_.playerId&&(i=T.getPlayer(t.options_.playerId),this.player_=i),this.tech_=t,this.source_=e,this.stats={},this.ignoreNextSeekingEvent_=!1,this.setOptions_(),this.options_.overrideNative&&t.overrideNativeAudioTracks&&t.overrideNativeVideoTracks)t.overrideNativeAudioTracks(!0),t.overrideNativeVideoTracks(!0);else if(this.options_.overrideNative&&(t.featuresNativeVideoTracks||t.featuresNativeAudioTracks))throw new Error("Overriding native VHS requires emulated tracks. See https://git.io/vMpjB");this.on(document,["fullscreenchange","webkitfullscreenchange","mozfullscreenchange","MSFullscreenChange"],e=>{var t=document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement;t&&t.contains(this.tech_.el())?this.playlistController_.fastQualityChange_():this.playlistController_.checkABR_()}),this.on(this.tech_,"seeking",function(){this.ignoreNextSeekingEvent_?this.ignoreNextSeekingEvent_=!1:this.setCurrentTime(this.tech_.currentTime())}),this.on(this.tech_,"error",function(){this.tech_.error()&&this.playlistController_&&this.playlistController_.pauseLoading()}),this.on(this.tech_,"play",this.play)}setOptions_(e={}){this.options_=L(this.options_,e),this.options_.withCredentials=this.options_.withCredentials||!1,this.options_.limitRenditionByPlayerDimensions=!1!==this.options_.limitRenditionByPlayerDimensions,this.options_.useDevicePixelRatio=this.options_.useDevicePixelRatio||!1,this.options_.useBandwidthFromLocalStorage="undefined"!=typeof this.source_.useBandwidthFromLocalStorage?this.source_.useBandwidthFromLocalStorage:this.options_.useBandwidthFromLocalStorage||!1,this.options_.useForcedSubtitles=this.options_.useForcedSubtitles||!1,this.options_.useNetworkInformationApi=this.options_.useNetworkInformationApi||!1,this.options_.useDtsForTimestampOffset=this.options_.useDtsForTimestampOffset||!1,this.options_.customTagParsers=this.options_.customTagParsers||[],this.options_.customTagMappers=this.options_.customTagMappers||[],this.options_.cacheEncryptionKeys=this.options_.cacheEncryptionKeys||!1,this.options_.llhls=!1!==this.options_.llhls,this.options_.bufferBasedABR=this.options_.bufferBasedABR||!1,"number"!=typeof this.options_.playlistExclusionDuration&&(this.options_.playlistExclusionDuration=60),"number"!=typeof this.options_.bandwidth&&this.options_.useBandwidthFromLocalStorage&&((e=Xu())&&e.bandwidth&&(this.options_.bandwidth=e.bandwidth,this.tech_.trigger({type:"usage",name:"vhs-bandwidth-from-local-storage"})),e)&&e.throughput&&(this.options_.throughput=e.throughput,this.tech_.trigger({type:"usage",name:"vhs-throughput-from-local-storage"})),"number"!=typeof this.options_.bandwidth&&(this.options_.bandwidth=O.INITIAL_BANDWIDTH),this.options_.enableLowInitialPlaylist=this.options_.enableLowInitialPlaylist&&this.options_.bandwidth===O.INITIAL_BANDWIDTH,["withCredentials","useDevicePixelRatio","customPixelRatio","limitRenditionByPlayerDimensions","bandwidth","customTagParsers","customTagMappers","cacheEncryptionKeys","playlistSelector","initialPlaylistSelector","bufferBasedABR","liveRangeSafeTimeDelta","llhls","useForcedSubtitles","useNetworkInformationApi","useDtsForTimestampOffset","exactManifestTimings","leastPixelDiffSelector"].forEach(e=>{"undefined"!=typeof this.source_[e]&&(this.options_[e]=this.source_[e])}),this.limitRenditionByPlayerDimensions=this.options_.limitRenditionByPlayerDimensions,this.useDevicePixelRatio=this.options_.useDevicePixelRatio;e=this.options_.customPixelRatio;"number"==typeof e&&0<=e&&(this.customPixelRatio=e)}setOptions(e={}){this.setOptions_(e)}src(e,t){e&&(this.setOptions_(),this.options_.src=0===(e=this.source_.src).toLowerCase().indexOf("data:application/vnd.videojs.vhs+json,")?JSON.parse(e.substring(e.indexOf(",")+1)):e,this.options_.tech=this.tech_,this.options_.externVhs=R,this.options_.sourceType=Un(t),this.options_.seekTo=e=>{this.tech_.setCurrentTime(e)},this.playlistController_=new Bu(this.options_),e=L({liveRangeSafeTimeDelta:ed},this.options_,{seekable:()=>this.seekable(),media:()=>this.playlistController_.media(),playlistController:this.playlistController_}),this.playbackWatcher_=new ju(e),this.playlistController_.on("error",()=>{var e=T.players[this.tech_.options_.playerId];let t=this.playlistController_.error;"object"!=typeof t||t.code?"string"==typeof t&&(t={message:t,code:3}):t.code=3,e.error(t)}),t=this.options_.bufferBasedABR?R.movingAverageBandwidthSelector(.55):R.STANDARD_PLAYLIST_SELECTOR,this.playlistController_.selectPlaylist=(this.selectPlaylist||t).bind(this),this.playlistController_.selectInitialPlaylist=R.INITIAL_PLAYLIST_SELECTOR.bind(this),this.playlists=this.playlistController_.mainPlaylistLoader_,this.mediaSource=this.playlistController_.mediaSource,Object.defineProperties(this,{selectPlaylist:{get(){return this.playlistController_.selectPlaylist},set(e){this.playlistController_.selectPlaylist=e.bind(this)}},throughput:{get(){return this.playlistController_.mainSegmentLoader_.throughput.rate},set(e){this.playlistController_.mainSegmentLoader_.throughput.rate=e,this.playlistController_.mainSegmentLoader_.throughput.count=1}},bandwidth:{get(){let e=this.playlistController_.mainSegmentLoader_.bandwidth;var t=window.navigator.connection||window.navigator.mozConnection||window.navigator.webkitConnection;return this.options_.useNetworkInformationApi&&t&&(t=1e3*t.downlink*1e3,e=1e7<=t&&1e7<=e?Math.max(e,t):t),e},set(e){this.playlistController_.mainSegmentLoader_.bandwidth=e,this.playlistController_.mainSegmentLoader_.throughput={rate:0,count:0}}},systemBandwidth:{get(){var e=1/(this.bandwidth||1);let t;return t=0<this.throughput?1/this.throughput:0,Math.floor(1/(e+t))},set(){T.log.error('The "systemBandwidth" property is read-only')}}}),this.options_.bandwidth&&(this.bandwidth=this.options_.bandwidth),this.options_.throughput&&(this.throughput=this.options_.throughput),Object.defineProperties(this.stats,{bandwidth:{get:()=>this.bandwidth||0,enumerable:!0},mediaRequests:{get:()=>this.playlistController_.mediaRequests_()||0,enumerable:!0},mediaRequestsAborted:{get:()=>this.playlistController_.mediaRequestsAborted_()||0,enumerable:!0},mediaRequestsTimedout:{get:()=>this.playlistController_.mediaRequestsTimedout_()||0,enumerable:!0},mediaRequestsErrored:{get:()=>this.playlistController_.mediaRequestsErrored_()||0,enumerable:!0},mediaTransferDuration:{get:()=>this.playlistController_.mediaTransferDuration_()||0,enumerable:!0},mediaBytesTransferred:{get:()=>this.playlistController_.mediaBytesTransferred_()||0,enumerable:!0},mediaSecondsLoaded:{get:()=>this.playlistController_.mediaSecondsLoaded_()||0,enumerable:!0},mediaAppends:{get:()=>this.playlistController_.mediaAppends_()||0,enumerable:!0},mainAppendsToLoadedData:{get:()=>this.playlistController_.mainAppendsToLoadedData_()||0,enumerable:!0},audioAppendsToLoadedData:{get:()=>this.playlistController_.audioAppendsToLoadedData_()||0,enumerable:!0},appendsToLoadedData:{get:()=>this.playlistController_.appendsToLoadedData_()||0,enumerable:!0},timeToLoadedData:{get:()=>this.playlistController_.timeToLoadedData_()||0,enumerable:!0},buffered:{get:()=>sd(this.tech_.buffered()),enumerable:!0},currentTime:{get:()=>this.tech_.currentTime(),enumerable:!0},currentSource:{get:()=>this.tech_.currentSource_,enumerable:!0},currentTech:{get:()=>this.tech_.name_,enumerable:!0},duration:{get:()=>this.tech_.duration(),enumerable:!0},main:{get:()=>this.playlists.main,enumerable:!0},playerDimensions:{get:()=>this.tech_.currentDimensions(),enumerable:!0},seekable:{get:()=>sd(this.tech_.seekable()),enumerable:!0},timestamp:{get:()=>Date.now(),enumerable:!0},videoPlaybackQuality:{get:()=>this.tech_.getVideoPlaybackQuality(),enumerable:!0}}),this.tech_.one("canplay",this.playlistController_.setupFirstPlay.bind(this.playlistController_)),this.tech_.on("bandwidthupdate",()=>{if(this.options_.useBandwidthFromLocalStorage){var e={bandwidth:this.bandwidth,throughput:Math.round(this.throughput)};if(window.localStorage){var t=(t=Xu())?L(t,e):e;try{window.localStorage.setItem(zu,JSON.stringify(t))}catch(e){return}}}}),this.playlistController_.on("selectedinitialmedia",()=>{var i;(i=this).representations=()=>{var e=i.playlistController_.main(),e=bd(e)?i.playlistController_.getAudioTrackPlaylists_():e.playlists;return e?e.filter(e=>!md(e)).map((e,t)=>new Fu(i,e,e.id)):[]}}),this.playlistController_.sourceUpdater_.on("createdsourcebuffers",()=>{this.setupEme_()}),this.on(this.playlistController_,"progress",function(){this.tech_.trigger("progress")}),this.on(this.playlistController_,"firstplay",function(){this.ignoreNextSeekingEvent_=!0}),this.setupQualityLevels_(),this.tech_.el())&&(this.mediaSourceUrl_=window.URL.createObjectURL(this.playlistController_.mediaSource),this.tech_.src(this.mediaSourceUrl_))}createKeySessions_(){var e=this.playlistController_.mediaTypes_.AUDIO.activePlaylistLoader;this.logger_("waiting for EME key session creation"),Wu({player:this.player_,sourceKeySystems:this.source_.keySystems,audioMedia:e&&e.media(),mainPlaylists:this.playlists.main.playlists}).then(()=>{this.logger_("created EME key session"),this.playlistController_.sourceUpdater_.initializedEme()}).catch(e=>{this.logger_("error while creating EME key session",e),this.player_.error({message:"Failed to initialize media keys for EME",code:3,metadata:{errorType:T.Error.EMEKeySessionCreationError}})})}handleWaitingForKey_(){this.logger_("waitingforkey fired, attempting to create any new key sessions"),this.createKeySessions_()}setupEme_(){var e=this.playlistController_.mediaTypes_.AUDIO.activePlaylistLoader,e=Gu({player:this.player_,sourceKeySystems:this.source_.keySystems,media:this.playlists.media(),audioMedia:e&&e.media()});this.player_.tech_.on("keystatuschange",e=>{this.playlistController_.updatePlaylistByKeyStatus(e.keyId,e.status)}),this.handleWaitingForKey_=this.handleWaitingForKey_.bind(this),this.player_.tech_.on("waitingforkey",this.handleWaitingForKey_),e?this.createKeySessions_():this.playlistController_.sourceUpdater_.initializedEme()}setupQualityLevels_(){var e=T.players[this.tech_.options_.playerId];e&&e.qualityLevels&&!this.qualityLevels_&&(this.qualityLevels_=e.qualityLevels(),this.playlistController_.on("selectedinitialmedia",()=>{var t,e;t=this.qualityLevels_,(e=this).representations().forEach(e=>{t.addQualityLevel(e)}),$u(t,e.playlists)}),this.playlists.on("mediachange",()=>{$u(this.qualityLevels_,this.playlists)}))}static version(){return{"@videojs/http-streaming":"3.12.1","mux.js":"7.0.3","mpd-parser":"1.3.0","m3u8-parser":"7.1.0","aes-decrypter":"4.0.1"}}version(){return this.constructor.version()}canChangeType(){return mu.canChangeType()}play(){this.playlistController_.play()}setCurrentTime(e){this.playlistController_.setCurrentTime(e)}duration(){return this.playlistController_.duration()}seekable(){return this.playlistController_.seekable()}dispose(){this.playbackWatcher_&&this.playbackWatcher_.dispose(),this.playlistController_&&this.playlistController_.dispose(),this.qualityLevels_&&this.qualityLevels_.dispose(),this.tech_&&this.tech_.vhs&&delete this.tech_.vhs,this.mediaSourceUrl_&&window.URL.revokeObjectURL&&(window.URL.revokeObjectURL(this.mediaSourceUrl_),this.mediaSourceUrl_=null),this.tech_&&this.tech_.off("waitingforkey",this.handleWaitingForKey_),super.dispose()}convertToProgramTime(e,t){return Gd({playlist:this.playlistController_.media(),time:e,callback:t})}seekToProgramTime(e,t,i=!0,s=2){return Xd({programTime:e,playlist:this.playlistController_.media(),retryCount:s,pauseAfterSeek:i,seekTo:this.options_.seekTo,tech:this.options_.tech,callback:t})}setupXhrHooks_(){this.xhr.onRequest=e=>{Ku(this.xhr,e)},this.xhr.onResponse=e=>{Yu(this.xhr,e)},this.xhr.offRequest=e=>{Qu(this.xhr,e)},this.xhr.offResponse=e=>{Ju(this.xhr,e)},this.player_.trigger("xhr-hooks-ready")}}const ec={name:"videojs-http-streaming",VERSION:"3.12.1",canHandleSource(e,t={}){t=L(T.options,t);return ec.canPlayType(e.type,t)},handleSource(e,t,i={}){i=L(T.options,i);return t.vhs=new Zu(e,t,i),t.vhs.xhr=Ud(),t.vhs.setupXhrHooks_(),t.vhs.src(e.src,e.type),t.vhs},canPlayType(e,t){e=Un(e);return e&&(t=ec.getOverrideNative(t),!R.supportsTypeNatively(e)||t)?"maybe":""},getOverrideNative(e={}){var{vhs:e={}}=e,t=!(T.browser.IS_ANY_SAFARI||T.browser.IS_IOS),{overrideNative:e=t}=e;return e}};return Nn("avc1.4d400d,mp4a.40.2")&&T.getTech("Html5").registerSourceHandler(ec,0),T.VhsHandler=Zu,T.VhsSourceHandler=ec,T.Vhs=R,T.use||T.registerComponent("Vhs",R),T.options.vhs=T.options.vhs||{},T.getPlugin&&T.getPlugin("reloadSourceOnError")||T.registerPlugin("reloadSourceOnError",function(e){Vu(this,e)}),T});
\ No newline at end of file
diff --git a/test/mediasync_test.exs b/test/mediasync_test.exs
new file mode 100644
index 0000000..773f1ae
--- /dev/null
+++ b/test/mediasync_test.exs
@@ -0,0 +1,8 @@
+defmodule MediasyncTest do
+  use ExUnit.Case
+  doctest Mediasync
+
+  test "greets the world" do
+    assert Mediasync.hello() == :world
+  end
+end
diff --git a/test/test_helper.exs b/test/test_helper.exs
new file mode 100644
index 0000000..869559e
--- /dev/null
+++ b/test/test_helper.exs
@@ -0,0 +1 @@
+ExUnit.start()